From 095173a574b38786ae6d54e3c0759b1d5682c5a4 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Thu, 29 Oct 2020 13:45:25 -0700
Subject: [PATCH] feat(ordered-list): support native list styles

---
 COMPONENT_INDEX.md                        |  1 +
 docs/src/PUBLIC_API.json                  | 25 +++++++++++++++--------
 docs/src/pages/components/OrderedList.svx | 20 ++++++++++++++++++
 src/OrderedList/OrderedList.svelte        |  9 +++++++-
 types/index.d.ts                          |  6 ++++++
 5 files changed, 52 insertions(+), 9 deletions(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 0f5ee035..37c737db 100644
--- a/COMPONENT_INDEX.md
+++ b/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
 
diff --git a/docs/src/PUBLIC_API.json b/docs/src/PUBLIC_API.json
index d03ac2ea..96e391f6 100644
--- a/docs/src/PUBLIC_API.json
+++ b/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,
-            "end": 246,
+            "start": 409,
+            "end": 417,
             "type": "EventHandler",
             "name": "click",
             "modifiers": [],
@@ -8728,8 +8737,8 @@
         [
           "mouseover",
           {
-            "start": 249,
-            "end": 261,
+            "start": 420,
+            "end": 432,
             "type": "EventHandler",
             "name": "mouseover",
             "modifiers": [],
@@ -8739,8 +8748,8 @@
         [
           "mouseenter",
           {
-            "start": 264,
-            "end": 277,
+            "start": 435,
+            "end": 448,
             "type": "EventHandler",
             "name": "mouseenter",
             "modifiers": [],
@@ -8750,8 +8759,8 @@
         [
           "mouseleave",
           {
-            "start": 280,
-            "end": 293,
+            "start": 451,
+            "end": 464,
             "type": "EventHandler",
             "name": "mouseleave",
             "modifiers": [],
diff --git a/docs/src/pages/components/OrderedList.svx b/docs/src/pages/components/OrderedList.svx
index 5b29739e..e8275202 100644
--- a/docs/src/pages/components/OrderedList.svx
+++ b/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>
\ No newline at end of file
diff --git a/src/OrderedList/OrderedList.svelte b/src/OrderedList/OrderedList.svelte
index 8c40d1a9..449e39f9 100644
--- a/src/OrderedList/OrderedList.svelte
+++ b/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
diff --git a/types/index.d.ts b/types/index.d.ts
index 09cd63ac..469c2dec 100644
--- a/types/index.d.ts
+++ b/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: {} };