feat(ordered-list): support native list styles

COMPONENT_INDEX.md

@@ -2985,6 +2985,7 @@ import { OrderedList } from "carbon-components-svelte";
 | Prop name | Type                 | Default value | Description                              |
 | :-------- | :------------------- | :------------ | :--------------------------------------- |
 | nested    | <code>boolean</code> | `false`       | Set to `true` to use the nested variant. |
+| native    | <code>boolean</code> | `false`       | Set to `true` to use native list styles. |
 
 ### Slots
 

docs/src/PUBLIC_API.json

@@ -8700,6 +8700,15 @@
             "type": "boolean",
             "description": "Set to `true` to use the nested variant"
           }
+        ],
+        [
+          "native",
+          {
+            "kind": "let",
+            "value": "false",
+            "type": "boolean",
+            "description": "Set to `true` to use native list styles"
+          }
         ]
       ],
       "slots": [
@@ -8717,8 +8726,8 @@
         [
           "click",
           {
-            "start": 238,
+            "start": 409,
-            "end": 246,
+            "end": 417,
             "type": "EventHandler",
             "name": "click",
             "modifiers": [],
@@ -8728,8 +8737,8 @@
         [
           "mouseover",
           {
-            "start": 249,
+            "start": 420,
-            "end": 261,
+            "end": 432,
             "type": "EventHandler",
             "name": "mouseover",
             "modifiers": [],
@@ -8739,8 +8748,8 @@
         [
           "mouseenter",
           {
-            "start": 264,
+            "start": 435,
-            "end": 277,
+            "end": 448,
             "type": "EventHandler",
             "name": "mouseenter",
             "modifiers": [],
@@ -8750,8 +8759,8 @@
         [
           "mouseleave",
           {
-            "start": 280,
+            "start": 451,
-            "end": 293,
+            "end": 464,
             "type": "EventHandler",
             "name": "mouseleave",
             "modifiers": [],

docs/src/pages/components/OrderedList.svx

@@ -47,4 +47,24 @@ components: ["OrderedList", "ListItem"]
   </ListItem>
   <ListItem>Ordered list level 1</ListItem>
   <ListItem>Ordered list level 1</ListItem>
+</OrderedList>
+
+### Native list styles
+
+<OrderedList native>
+  <ListItem>
+    Ordered list level 1
+    <OrderedList nested>
+      <ListItem>Ordered list level 2</ListItem>
+      <ListItem>
+        Ordered list level 3
+        <OrderedList nested>
+          <ListItem>Ordered list level 3</ListItem>
+          <ListItem>Ordered list level 3</ListItem>
+        </OrderedList>
+      </ListItem>
+    </OrderedList>
+  </ListItem>
+  <ListItem>Ordered list level 1</ListItem>
+  <ListItem>Ordered list level 1</ListItem>
 </OrderedList>

src/OrderedList/OrderedList.svelte

@@ -4,10 +4,17 @@
    * @type {boolean} [nested=false]
    */
   export let nested = false;
+
+  /**
+   * Set to `true` to use native list styles
+   * @type {boolean} [native=false]
+   */
+  export let native = false;
 </script>
 
 <ol
-  class:bx--list--ordered="{true}"
+  class:bx--list--ordered="{!native}"
+  class:bx--list--ordered--native="{native}"
   class:bx--list--nested="{nested}"
   {...$$restProps}
   on:click

types/index.d.ts

@@ -2893,6 +2893,12 @@ export class OrderedList extends CarbonSvelteComponent {
      * @default false
      */
     nested?: boolean;
+
+    /**
+     * Set to `true` to use native list styles
+     * @default false
+     */
+    native?: boolean;
   };
 
   $$slot_def: { default: {} };