scu-web-components 1.0.0 → 1.1.0

package/dist/docs/components/ScwButton.json

@@ -192,6 +192,20 @@
         "module": "src/scw-link/ScwLink.ts"
       }
     },
+    {
+      "kind": "method",
+      "name": "click",
+      "return": {
+        "type": {
+          "text": "void"
+        }
+      },
+      "description": "click",
+      "inheritedFrom": {
+        "name": "ScwLink",
+        "module": "src/scw-link/ScwLink.ts"
+      }
+    },
     {
       "kind": "method",
       "name": "renderIcon",

package/dist/docs/components/ScwHorizontalNav.json

@@ -47,6 +47,44 @@
       "privacy": "private",
       "default": "false"
     },
+    {
+      "kind": "field",
+      "name": "medBreakPoint",
+      "privacy": "private"
+    },
+    {
+      "kind": "field",
+      "name": "showDropdown",
+      "type": {
+        "text": "boolean"
+      },
+      "privacy": "private",
+      "default": "false"
+    },
+    {
+      "kind": "field",
+      "name": "orginalSize",
+      "type": {
+        "text": "'small' | 'medium'"
+      },
+      "privacy": "private"
+    },
+    {
+      "kind": "field",
+      "name": "resizeHandler",
+      "type": {
+        "text": "() => void"
+      },
+      "privacy": "private"
+    },
+    {
+      "kind": "field",
+      "name": "scrollHandler",
+      "type": {
+        "text": "() => void"
+      },
+      "privacy": "private"
+    },
     {
       "kind": "field",
       "name": "type",
@@ -67,6 +105,35 @@
       "description": "(ScwHorizontalNav) Size of nav",
       "attribute": "size"
     },
+    {
+      "kind": "field",
+      "name": "align",
+      "type": {
+        "text": "'left' | 'center'"
+      },
+      "default": "'center'",
+      "description": "(ScwHorizontalNav) Alignment of nav when horizontal",
+      "attribute": "align"
+    },
+    {
+      "kind": "field",
+      "name": "vertical",
+      "type": {
+        "text": "boolean"
+      },
+      "default": "false",
+      "description": "(ScwHorizontalNav) If you want the nav to be arranged vertically",
+      "attribute": "vertical"
+    },
+    {
+      "kind": "field",
+      "name": "responsive",
+      "type": {
+        "text": "'size' | 'dropdown' | undefined"
+      },
+      "description": "(ScwHorizontalNav) If you want the nav to handle responsiveness",
+      "attribute": "responsive"
+    },
     {
       "kind": "field",
       "name": "tabs",
@@ -87,6 +154,16 @@
       "description": "(ScwHorizontalNav) If you want to remove the bottom border",
       "attribute": "hide-border"
     },
+    {
+      "kind": "field",
+      "name": "updateOnScroll",
+      "type": {
+        "text": "boolean"
+      },
+      "default": "false",
+      "description": "(ScwHorizontalNav) If you want the nav to automatically update its\nactive item based on link anchors",
+      "attribute": "update-on-scroll"
+    },
     {
       "kind": "field",
       "name": "indicator",
@@ -115,12 +192,31 @@
         "text": "HTMLElement"
       }
     },
+    {
+      "kind": "field",
+      "name": "dropdown",
+      "type": {
+        "text": "ScwSelect"
+      }
+    },
     {
       "kind": "method",
       "name": "syncTabsAndPanels",
       "privacy": "private",
       "description": "syncTabsAndPanels"
     },
+    {
+      "kind": "method",
+      "name": "checkSize",
+      "privacy": "private",
+      "description": "checkSize"
+    },
+    {
+      "kind": "method",
+      "name": "handleScroll",
+      "privacy": "private",
+      "description": "handleScroll"
+    },
     {
       "kind": "method",
       "name": "setAriaLabels",
@@ -197,6 +293,20 @@
         }
       }
     },
+    {
+      "kind": "method",
+      "name": "handleValueChange",
+      "privacy": "private",
+      "parameters": [
+        {
+          "name": "event",
+          "type": {
+            "text": "CustomEvent"
+          }
+        }
+      ],
+      "description": "handleValueChange"
+    },
     {
       "kind": "method",
       "name": "handleClick",
@@ -403,6 +513,32 @@
       "description": "(ScwHorizontalNav) Size of nav",
       "fieldName": "size"
     },
+    {
+      "name": "align",
+      "type": {
+        "text": "'left' | 'center'"
+      },
+      "default": "'center'",
+      "description": "(ScwHorizontalNav) Alignment of nav when horizontal",
+      "fieldName": "align"
+    },
+    {
+      "name": "vertical",
+      "type": {
+        "text": "boolean"
+      },
+      "default": "false",
+      "description": "(ScwHorizontalNav) If you want the nav to be arranged vertically",
+      "fieldName": "vertical"
+    },
+    {
+      "name": "responsive",
+      "type": {
+        "text": "'size' | 'dropdown' | undefined"
+      },
+      "description": "(ScwHorizontalNav) If you want the nav to handle responsiveness",
+      "fieldName": "responsive"
+    },
     {
       "name": "tabs",
       "type": {
@@ -421,6 +557,15 @@
       "description": "(ScwHorizontalNav) If you want to remove the bottom border",
       "fieldName": "hideBorder"
     },
+    {
+      "name": "update-on-scroll",
+      "type": {
+        "text": "boolean"
+      },
+      "default": "false",
+      "description": "(ScwHorizontalNav) If you want the nav to automatically update its\nactive item based on link anchors",
+      "fieldName": "updateOnScroll"
+    },
     {
       "name": "aria-label",
       "type": {
@@ -499,34 +644,44 @@
   "overview": "",
   "examples": [
     {
-      "title": "Basic",
-      "description": "A basic horizontal navigation. Uses \n      scw-horizontal-nav-item for links.",
-      "code": "\n      <scw-horizontal-nav>\n         <scw-horizontal-nav-item  \n         href=\"/docs/index.html#/components/ScwHorizontalNav\" aria-label=\"one\">\n        </scw-horizontal-nav-item>\n        <scw-horizontal-nav-item  href=\"#\" aria-label=\"two\">\n        </scw-horizontal-nav-item>\n        <scw-horizontal-nav-item  href=\"#\" aria-label=\"three\">\n        </scw-horizontal-nav-item>\n        <scw-horizontal-nav-item  href=\"#\" aria-label=\"four\" >\n        </scw-horizontal-nav-item>\n        </scw-horizontal-nav>\n       \n        \n          "
+      "title": "Horizontal Nav",
+      "description": "There are two different designs \"button\" and \"tab\" that \n      can be set. Uses scw-horizontal-nav-item for links.",
+      "code": "\n      <scw-stack scw-gap-2s>\n        <scw-horizontal-nav type=\"tab\">\n         <scw-horizontal-nav-item href=\"#\" aria-label=\"one\" active>\n          </scw-horizontal-nav-item>\n          <scw-horizontal-nav-item href=\"#\" aria-label=\"two\">\n          </scw-horizontal-nav-item>\n          <scw-horizontal-nav-item href=\"#\" aria-label=\"three\">\n          </scw-horizontal-nav-item>\n          <scw-horizontal-nav-item href=\"#\" aria-label=\"four\" >\n          </scw-horizontal-nav-item>\n        </scw-horizontal-nav>\n        <scw-horizontal-nav type=\"button\">\n         <scw-horizontal-nav-item active href=\"#\" aria-label=\"one\">\n          </scw-horizontal-nav-item>\n          <scw-horizontal-nav-item id=\"nav-test\" href=\"#\" aria-label=\"two\">\n          </scw-horizontal-nav-item>\n          <scw-horizontal-nav-item href=\"#\" aria-label=\"three\">\n          </scw-horizontal-nav-item>\n          <scw-horizontal-nav-item href=\"#\" aria-label=\"four\" >\n          </scw-horizontal-nav-item>\n        </scw-horizontal-nav>\n      </scw-stack>\n      "
     },
     {
-      "title": "Types",
-      "description": "There are two different designs \"button\" and \"tab\" that \n      can be set.",
-      "code": "\n      <scw-stack scw-gap-2s>\n        <scw-horizontal-nav type=\"tab\">\n         <scw-horizontal-nav-item active href=\"#\" aria-label=\"one\">\n          </scw-horizontal-nav-item>\n          <scw-horizontal-nav-item href=\"#\" aria-label=\"two\">\n          </scw-horizontal-nav-item>\n          <scw-horizontal-nav-item href=\"#\" aria-label=\"three\">\n          </scw-horizontal-nav-item>\n          <scw-horizontal-nav-item href=\"#\" aria-label=\"four\" >\n          </scw-horizontal-nav-item>\n        </scw-horizontal-nav>\n        <scw-horizontal-nav type=\"button\">\n         <scw-horizontal-nav-item active href=\"#\" aria-label=\"one\">\n          </scw-horizontal-nav-item>\n          <scw-horizontal-nav-item href=\"#\" aria-label=\"two\">\n          </scw-horizontal-nav-item>\n          <scw-horizontal-nav-item href=\"#\" aria-label=\"three\">\n          </scw-horizontal-nav-item>\n          <scw-horizontal-nav-item href=\"#\" aria-label=\"four\" >\n          </scw-horizontal-nav-item>\n        </scw-horizontal-nav>\n      </scw-stack>\n      "
+      "title": "Vertical Nav",
+      "description": "Add vertical attribute to display nav vertically",
+      "code": "\n      <scw-flex-h>\n      <scw-horizontal-nav scw-fill vertical>\n        <scw-horizontal-nav-item  \n        href=\"/docs/index.html#/components/ScwHorizontalNav\" aria-label=\"one\">\n        </scw-horizontal-nav-item>\n        <scw-horizontal-nav-item  href=\"#\" aria-label=\"two\">\n        </scw-horizontal-nav-item>\n        <scw-horizontal-nav-item  href=\"#\" aria-label=\"three\">\n        </scw-horizontal-nav-item>\n        <scw-horizontal-nav-item  href=\"#\" aria-label=\"four\" >\n        </scw-horizontal-nav-item>\n      </scw-horizontal-nav>\n      <scw-horizontal-nav scw-fill vertical type=\"tab\">\n        <scw-horizontal-nav-item  \n        href=\"/docs/index.html#/components/ScwHorizontalNav\" aria-label=\"one\">\n        </scw-horizontal-nav-item>\n        <scw-horizontal-nav-item  href=\"#\" aria-label=\"two\">\n        </scw-horizontal-nav-item>\n        <scw-horizontal-nav-item  href=\"#\" aria-label=\"three\">\n        </scw-horizontal-nav-item>\n        <scw-horizontal-nav-item  href=\"#\" aria-label=\"four\" >\n        </scw-horizontal-nav-item>\n      </scw-horizontal-nav>\n      </scw-flex-h>\n      "
+    },
+    {
+      "title": "Size",
+      "description": "Set the size attribute to \"small\" for a compact nav.",
+      "code": "\n      <scw-flex-h>\n      <scw-horizontal-nav scw-fill-2 vertical type=\"tab\" size=\"small\">\n        <scw-horizontal-nav-item  \n        href=\"/docs/index.html#/components/ScwHorizontalNav\" aria-label=\"one\">\n        </scw-horizontal-nav-item>\n        <scw-horizontal-nav-item  href=\"#\" aria-label=\"two\">\n        </scw-horizontal-nav-item>\n        <scw-horizontal-nav-item  href=\"#\" aria-label=\"three\">\n        </scw-horizontal-nav-item>\n        <scw-horizontal-nav-item  href=\"#\" aria-label=\"four\" >\n        </scw-horizontal-nav-item>\n      </scw-horizontal-nav>\n      <scw-stack scw-fill-6 scw-gap-2s>\n      <scw-horizontal-nav size=\"small\" type=\"tab\">\n         <scw-horizontal-nav-item active href=\"#\" aria-label=\"one\">\n        </scw-horizontal-nav-item>\n        <scw-horizontal-nav-item href=\"#\" aria-label=\"two\">\n        </scw-horizontal-nav-item>\n        <scw-horizontal-nav-item href=\"#\" aria-label=\"three\">\n        </scw-horizontal-nav-item>\n        <scw-horizontal-nav-item href=\"#\" aria-label=\"four\" >\n        </scw-horizontal-nav-item>\n      </scw-horizontal-nav>\n\n        <scw-horizontal-nav size=\"small\" type=\"button\">\n         <scw-horizontal-nav-item active href=\"#\" aria-label=\"one\">\n        </scw-horizontal-nav-item>\n        <scw-horizontal-nav-item href=\"#\" aria-label=\"two\">\n        </scw-horizontal-nav-item>\n        <scw-horizontal-nav-item href=\"#\" aria-label=\"three\">\n        </scw-horizontal-nav-item>\n        <scw-horizontal-nav-item href=\"#\" aria-label=\"four\" >\n        </scw-horizontal-nav-item>\n      </scw-horizontal-nav>\n      </scw-stack>\n      </scw-flex-h>\n          "
+    },
+    {
+      "title": "Responsive",
+      "description": "Use the \"responsive\" attribute to determine how the\n      nav should behave on smaller screens. Set responsive=\"size\" to show\n      a small nav, or set responsive=\"dropdown\" to show a select input.",
+      "code": "\n      <scw-stack scw-gap-2s>\n        <scw-horizontal-nav type=\"tab\" responsive=\"size\">\n         <scw-horizontal-nav-item active href=\"#\" aria-label=\"one\">\n          </scw-horizontal-nav-item>\n          <scw-horizontal-nav-item href=\"#\" aria-label=\"two\">\n          </scw-horizontal-nav-item>\n          <scw-horizontal-nav-item href=\"#\" aria-label=\"three\">\n          </scw-horizontal-nav-item>\n          <scw-horizontal-nav-item href=\"#\" aria-label=\"four\" >\n          </scw-horizontal-nav-item>\n        </scw-horizontal-nav>\n        <scw-horizontal-nav type=\"tab\" responsive=\"dropdown\">\n         <scw-horizontal-nav-item active href=\"#\" aria-label=\"one\">\n          </scw-horizontal-nav-item>\n          <scw-horizontal-nav-item href=\"#\" aria-label=\"two\">\n          </scw-horizontal-nav-item>\n          <scw-horizontal-nav-item href=\"#\" aria-label=\"three\">\n          </scw-horizontal-nav-item>\n          <scw-horizontal-nav-item href=\"#\" aria-label=\"four\" >\n          </scw-horizontal-nav-item>\n        </scw-horizontal-nav>\n      </scw-stack>\n      "
+    },
+    {
+      "title": "Align",
+      "description": "Horizontal nav is center aligned by default. Use align\n      attribute for left alignment.",
+      "code": "\n      <scw-stack scw-gap-2s>\n        <scw-horizontal-nav type=\"tab\" align=\"left\">\n         <scw-horizontal-nav-item active href=\"#\" aria-label=\"one\">\n          </scw-horizontal-nav-item>\n          <scw-horizontal-nav-item href=\"#\" aria-label=\"two\">\n          </scw-horizontal-nav-item>\n          <scw-horizontal-nav-item href=\"#\" aria-label=\"three\">\n          </scw-horizontal-nav-item>\n          <scw-horizontal-nav-item href=\"#\" aria-label=\"four\" >\n          </scw-horizontal-nav-item>\n        </scw-horizontal-nav>\n        <scw-horizontal-nav type=\"button\" align=\"left\">\n         <scw-horizontal-nav-item active href=\"#\" aria-label=\"one\">\n          </scw-horizontal-nav-item>\n          <scw-horizontal-nav-item href=\"#\" aria-label=\"two\">\n          </scw-horizontal-nav-item>\n          <scw-horizontal-nav-item href=\"#\" aria-label=\"three\">\n          </scw-horizontal-nav-item>\n          <scw-horizontal-nav-item href=\"#\" aria-label=\"four\" >\n          </scw-horizontal-nav-item>\n        </scw-horizontal-nav>\n      </scw-stack>\n      "
     },
     {
       "title": "Icons",
       "description": "Use the default slot on nav items to add an\n      icon above the label",
       "code": "\n      <scw-stack scw-gap-2s>\n      <scw-horizontal-nav type=\"tab\">\n        <scw-horizontal-nav-item active href=\"#\" aria-label=\"one\">\n          <scw-icon icon=\"placeholder\" aria-label=\"icon\"></scw-icon>\n        </scw-horizontal-nav-item>\n        <scw-horizontal-nav-item href=\"#\" aria-label=\"two\">\n          <scw-icon icon=\"placeholder\" aria-label=\"icon\"></scw-icon>\n        </scw-horizontal-nav-item>\n        <scw-horizontal-nav-item href=\"#\" aria-label=\"three\">\n          <scw-icon icon=\"placeholder\" aria-label=\"icon\"></scw-icon>\n        </scw-horizontal-nav-item>\n        <scw-horizontal-nav-item href=\"#\" aria-label=\"four\">\n          <scw-icon icon=\"placeholder\" aria-label=\"icon\"></scw-icon>\n        </scw-horizontal-nav-item>\n      </scw-horizontal-nav>\n        \n      <scw-horizontal-nav type=\"button\">\n        <scw-horizontal-nav-item active href=\"#\" aria-label=\"one\">\n          <scw-icon icon=\"placeholder\" aria-label=\"icon\"></scw-icon>\n        </scw-horizontal-nav-item>\n        <scw-horizontal-nav-item href=\"#\" aria-label=\"two\">\n          <scw-icon icon=\"placeholder\" aria-label=\"icon\"></scw-icon>\n        </scw-horizontal-nav-item>\n        <scw-horizontal-nav-item href=\"#\" aria-label=\"three\">\n          <scw-icon icon=\"placeholder\" aria-label=\"icon\"></scw-icon>\n        </scw-horizontal-nav-item>\n        <scw-horizontal-nav-item href=\"#\" aria-label=\"four\" >\n          <scw-icon icon=\"placeholder\" aria-label=\"icon\"></scw-icon>\n        </scw-horizontal-nav-item>\n      </scw-horizontal-nav>\n      </scw-stack>\n      "
     },
-    {
-      "title": "Size",
-      "description": "The nav can be \"small\" or \"medium\"",
-      "code": "\n      <scw-stack scw-gap-2s>\n      <scw-horizontal-nav size=\"small\" type=\"tab\">\n         <scw-horizontal-nav-item active href=\"#\" aria-label=\"one\">\n        </scw-horizontal-nav-item>\n        <scw-horizontal-nav-item href=\"#\" aria-label=\"two\">\n        </scw-horizontal-nav-item>\n        <scw-horizontal-nav-item href=\"#\" aria-label=\"three\">\n        </scw-horizontal-nav-item>\n        <scw-horizontal-nav-item href=\"#\" aria-label=\"four\" >\n        </scw-horizontal-nav-item>\n  \n\n        </scw-horizontal-nav>\n        <scw-horizontal-nav size=\"medium\" type=\"tab\">\n         <scw-horizontal-nav-item active href=\"#\" aria-label=\"one\">\n        </scw-horizontal-nav-item>\n        <scw-horizontal-nav-item href=\"#\" aria-label=\"two\">\n        </scw-horizontal-nav-item>\n        <scw-horizontal-nav-item href=\"#\" aria-label=\"three\">\n        </scw-horizontal-nav-item>\n        <scw-horizontal-nav-item href=\"#\" aria-label=\"four\" >\n        </scw-horizontal-nav-item>\n  \n\n        </scw-horizontal-nav>\n\n        <scw-horizontal-nav size=\"small\" type=\"button\">\n         <scw-horizontal-nav-item active href=\"#\" aria-label=\"one\">\n        </scw-horizontal-nav-item>\n        <scw-horizontal-nav-item href=\"#\" aria-label=\"two\">\n        </scw-horizontal-nav-item>\n        <scw-horizontal-nav-item href=\"#\" aria-label=\"three\">\n        </scw-horizontal-nav-item>\n        <scw-horizontal-nav-item href=\"#\" aria-label=\"four\" >\n        </scw-horizontal-nav-item>\n  \n\n        </scw-horizontal-nav>\n        <scw-horizontal-nav size=\"medium\" type=\"button\">\n         <scw-horizontal-nav-item active href=\"#\" aria-label=\"one\">\n        </scw-horizontal-nav-item>\n        <scw-horizontal-nav-item href=\"#\" aria-label=\"two\">\n        </scw-horizontal-nav-item>\n        <scw-horizontal-nav-item href=\"#\" aria-label=\"three\">\n        </scw-horizontal-nav-item>\n        <scw-horizontal-nav-item href=\"#\" aria-label=\"four\" >\n        </scw-horizontal-nav-item>\n  \n\n        </scw-horizontal-nav>\n           \n\n      </scw-stack>\n        \n          "
-    },
     {
       "title": "Slider",
       "description": "If the nav overflows its container it will become\n      scrollable automatically.",
-      "code": "\n      <scw-horizontal-nav>\n         <scw-horizontal-nav-item active href=\"#\" aria-label=\"one\">\n        </scw-horizontal-nav-item>\n        <scw-horizontal-nav-item href=\"#\" aria-label=\"two\">\n        </scw-horizontal-nav-item>\n        <scw-horizontal-nav-item href=\"#\" aria-label=\"three\">\n        </scw-horizontal-nav-item>\n        <scw-horizontal-nav-item href=\"#\" aria-label=\"four\" >\n        </scw-horizontal-nav-item>\n        <scw-horizontal-nav-item href=\"#\" aria-label=\"five\">\n        </scw-horizontal-nav-item>\n        <scw-horizontal-nav-item href=\"#\" aria-label=\"six\">\n        </scw-horizontal-nav-item>\n        <scw-horizontal-nav-item href=\"#\" aria-label=\"seven\" >\n        </scw-horizontal-nav-item>\n        <scw-horizontal-nav-item href=\"#\" aria-label=\"eight\">\n        </scw-horizontal-nav-item>\n        <scw-horizontal-nav-item href=\"#\" aria-label=\"nine\">\n        </scw-horizontal-nav-item>\n        <scw-horizontal-nav-item href=\"#\" aria-label=\"ten\" >\n        </scw-horizontal-nav-item>\n\n        </scw-horizontal-nav>\n       \n        \n          "
+      "code": "\n      <scw-horizontal-nav>\n         <scw-horizontal-nav-item active href=\"#\" aria-label=\"one\">\n        </scw-horizontal-nav-item>\n        <scw-horizontal-nav-item href=\"#\" aria-label=\"two\">\n        </scw-horizontal-nav-item>\n        <scw-horizontal-nav-item href=\"#\" aria-label=\"three\">\n        </scw-horizontal-nav-item>\n        <scw-horizontal-nav-item href=\"#\" aria-label=\"four\" >\n        </scw-horizontal-nav-item>\n        <scw-horizontal-nav-item href=\"#\" aria-label=\"five\">\n        </scw-horizontal-nav-item>\n        <scw-horizontal-nav-item href=\"#\" aria-label=\"six\">\n        </scw-horizontal-nav-item>\n        <scw-horizontal-nav-item href=\"#\" aria-label=\"seven\" >\n        </scw-horizontal-nav-item>\n        <scw-horizontal-nav-item href=\"#\" aria-label=\"eight\">\n        </scw-horizontal-nav-item>\n        <scw-horizontal-nav-item href=\"#\" aria-label=\"nine\">\n        </scw-horizontal-nav-item>\n        <scw-horizontal-nav-item href=\"#\" aria-label=\"ten\" >\n        </scw-horizontal-nav-item>\n        </scw-horizontal-nav>\n          "
     },
     {
       "title": "Tabs",
       "description": "If the tabs property is set the navigation will use tab\n      mode for navigating content. Links will be ignored and each nav-item\n      will need to have a panel set with a corresponding nav-panel in the\n      panel slot that has the same name set.",
-      "code": "\n        <scw-horizontal-nav tabs type=\"tab\"\n         size=\"medium\">\n         <scw-horizontal-nav-item active panel=\"1\" aria-label=\"one\">\n        </scw-horizontal-nav-item>\n        <scw-horizontal-nav-item panel=\"2\" aria-label=\"two\">\n        </scw-horizontal-nav-item>\n        <scw-horizontal-nav-item panel=\"3\" aria-label=\"three\">\n        </scw-horizontal-nav-item>\n        <scw-horizontal-nav-item panel=\"4\" aria-label=\"four\" >\n        </scw-horizontal-nav-item>\n      \n\n        <scw-horizontal-nav-panel scw-padding-2s name=\"1\" slot=\"panel\">\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed \n        faucibus dapibus orci ut tempor. Ut eleifend egestas scelerisque. \n        Ut ante ligula, sodales quis quam vel, tristique efficitur nisi. \n        Nulla a tempor tortor, sit amet lacinia mi. Ut pharetra augue id \n        felis efficitur eleifend. Sed vestibulum sagittis urna quis cursus. \n        Phasellus vitae dapibus massa. Praesent ac iaculis ante. Praesent \n        tempus, turpis sed cursus blandit, neque elit viverra velit, quis \n        venenatis ligula turpis at magna. Duis lobortis nulla porta arcu \n        blandit, sit amet convallis magna dignissim. Mauris ut nisi vitae\n        velit tempor dignissim. Sed quis massa sodales, mollis ex mollis, \n        volutpat arcu. Proin blandit enim euismod est fermentum bibendum. \n        Aliquam in augue quis ligula pretium vulputate. Integer mi risus, \n        hendrerit posuere ultrices vel, dictum at ante. Nullam ac \n        condimentum sem.\n        </scw-horizontal-nav-panel>\n        <scw-horizontal-nav-panel scw-padding-2s name=\"2\" slot=\"panel\">\n        Nunc placerat consectetur finibus. Mauris non est in enim feugiat\n         scelerisque non in ex. Pellentesque dignissim mauris justo, id \n         euismod turpis sollicitudin id. Suspendisse vitae tristique nisl.\n          Nullam eget leo aliquet augue hendrerit congue. Nulla facilisi.\n           Mauris sit amet nisi lectus. Curabitur congue metus ac eros \n           commodo congue. Donec tincidunt enim ipsum, vitae aliquet purus \n           faucibus sed. Fusce ut luctus massa. Etiam scelerisque nulla ut \n           blandit egestas. Curabitur sollicitudin condimentum ipsum nec \n           lobortis.\n\n        </scw-horizontal-nav-panel>\n        <scw-horizontal-nav-panel scw-padding-2s name=\"3\" slot=\"panel\">\n        Etiam malesuada sit amet nunc quis ornare. Integer orci tellus, \n        suscipit vel ante a, cursus sodales risus. Phasellus tincidunt orci \n        vel nunc sodales, et eleifend lacus molestie. Sed dapibus elit nisi, \n        vitae viverra leo dignissim vitae. Proin placerat mauris mi, a \n        efficitur quam imperdiet quis. Vivamus non velit in velit eleifend \n        lobortis. Suspendisse vitae mi at nisi laoreet ultrices. Vivamus \n        sapien ipsum, porta ut sodales id, dignissim a est. Orci varius \n        natoque penatibus et magnis dis parturient montes, nascetur ridiculus \n        mus. Duis eu volutpat mi, ac egestas odio. Vivamus metus odio, \n        dignissim aliquet ipsum id, malesuada pretium nisi. Duis convallis \n        enim tortor, eget faucibus turpis hendrerit gravida. Proin quis urna \n        nec ante efficitur ultricies sed nec orci.\n        </scw-horizontal-nav-panel>\n        <scw-horizontal-nav-panel scw-padding-2s name=\"4\" slot=\"panel\">\n        Class aptent taciti sociosqu ad litora torquent per conubia nostra, \n        per inceptos himenaeos. Morbi suscipit vel lectus id scelerisque. \n        Sed quis eleifend metus. Aenean lorem quam, viverra in cursus id, \n        condimentum vitae felis. Praesent dictum efficitur lacus, eu mattis \n        dui scelerisque id. Donec commodo a mauris eget semper. Donec \n        facilisis finibus ex, sit amet auctor elit porta a. Maecenas \n        faucibus ligula id felis tempor tincidunt. Mauris id dui quis \n        lacus hendrerit aliquet vel in ipsum. In cursus, eros fermentum \n        tristique viverra, lorem purus vestibulum felis, nec varius velit \n        nisi vel erat.\n        </scw-horizontal-nav-panel>\n\n      \n        \n\n        </scw-horizontal-nav>\n          "
+      "code": "\n        <scw-horizontal-nav tabs type=\"tab\"\n         size=\"medium\">\n         <scw-horizontal-nav-item active panel=\"1\" aria-label=\"one\">\n        </scw-horizontal-nav-item>\n        <scw-horizontal-nav-item panel=\"2\" aria-label=\"two\">\n        </scw-horizontal-nav-item>\n        <scw-horizontal-nav-item panel=\"3\" aria-label=\"three\">\n        </scw-horizontal-nav-item>\n        <scw-horizontal-nav-item panel=\"4\" aria-label=\"four\" >\n        </scw-horizontal-nav-item>\n\n        <scw-horizontal-nav-panel scw-padding-2s name=\"1\" slot=\"panel\">\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed \n        faucibus dapibus orci ut tempor. Ut eleifend egestas scelerisque. \n        Ut ante ligula, sodales quis quam vel, tristique efficitur nisi. \n        Nulla a tempor tortor, sit amet lacinia mi. Ut pharetra augue id \n        felis efficitur eleifend. Sed vestibulum sagittis urna quis cursus. \n        Phasellus vitae dapibus massa. Praesent ac iaculis ante. Praesent \n        tempus, turpis sed cursus blandit, neque elit viverra velit, quis \n        venenatis ligula turpis at magna. Duis lobortis nulla porta arcu \n        blandit, sit amet convallis magna dignissim. Mauris ut nisi vitae\n        velit tempor dignissim. Sed quis massa sodales, mollis ex mollis, \n        volutpat arcu. Proin blandit enim euismod est fermentum bibendum. \n        Aliquam in augue quis ligula pretium vulputate. Integer mi risus, \n        hendrerit posuere ultrices vel, dictum at ante. Nullam ac \n        condimentum sem.\n        </scw-horizontal-nav-panel>\n        <scw-horizontal-nav-panel scw-padding-2s name=\"2\" slot=\"panel\">\n        Nunc placerat consectetur finibus. Mauris non est in enim feugiat\n         scelerisque non in ex. Pellentesque dignissim mauris justo, id \n         euismod turpis sollicitudin id. Suspendisse vitae tristique nisl.\n          Nullam eget leo aliquet augue hendrerit congue. Nulla facilisi.\n           Mauris sit amet nisi lectus. Curabitur congue metus ac eros \n           commodo congue. Donec tincidunt enim ipsum, vitae aliquet purus \n           faucibus sed. Fusce ut luctus massa. Etiam scelerisque nulla ut \n           blandit egestas. Curabitur sollicitudin condimentum ipsum nec \n           lobortis.\n\n        </scw-horizontal-nav-panel>\n        <scw-horizontal-nav-panel scw-padding-2s name=\"3\" slot=\"panel\">\n        Etiam malesuada sit amet nunc quis ornare. Integer orci tellus, \n        suscipit vel ante a, cursus sodales risus. Phasellus tincidunt orci \n        vel nunc sodales, et eleifend lacus molestie. Sed dapibus elit nisi, \n        vitae viverra leo dignissim vitae. Proin placerat mauris mi, a \n        efficitur quam imperdiet quis. Vivamus non velit in velit eleifend \n        lobortis. Suspendisse vitae mi at nisi laoreet ultrices. Vivamus \n        sapien ipsum, porta ut sodales id, dignissim a est. Orci varius \n        natoque penatibus et magnis dis parturient montes, nascetur ridiculus \n        mus. Duis eu volutpat mi, ac egestas odio. Vivamus metus odio, \n        dignissim aliquet ipsum id, malesuada pretium nisi. Duis convallis \n        enim tortor, eget faucibus turpis hendrerit gravida. Proin quis urna \n        nec ante efficitur ultricies sed nec orci.\n        </scw-horizontal-nav-panel>\n        <scw-horizontal-nav-panel scw-padding-2s name=\"4\" slot=\"panel\">\n        Class aptent taciti sociosqu ad litora torquent per conubia nostra, \n        per inceptos himenaeos. Morbi suscipit vel lectus id scelerisque. \n        Sed quis eleifend metus. Aenean lorem quam, viverra in cursus id, \n        condimentum vitae felis. Praesent dictum efficitur lacus, eu mattis \n        dui scelerisque id. Donec commodo a mauris eget semper. Donec \n        facilisis finibus ex, sit amet auctor elit porta a. Maecenas \n        faucibus ligula id felis tempor tincidunt. Mauris id dui quis \n        lacus hendrerit aliquet vel in ipsum. In cursus, eros fermentum \n        tristique viverra, lorem purus vestibulum felis, nec varius velit \n        nisi vel erat.\n        </scw-horizontal-nav-panel>\n        </scw-horizontal-nav>\n          "
     }
   ]
 }

package/dist/docs/components/ScwHorizontalNavItem.json

@@ -52,6 +52,17 @@
       "attribute": "size",
       "reflects": true
     },
+    {
+      "kind": "field",
+      "name": "vertical",
+      "type": {
+        "text": "boolean"
+      },
+      "default": "false",
+      "description": "(ScwHorizontalNavItem) If the component is vertical.\nSet automatically by parent.",
+      "attribute": "vertical",
+      "reflects": true
+    },
     {
       "kind": "field",
       "name": "tab",
@@ -291,6 +302,15 @@
       "description": "(ScwHorizontalNavItem) Size of nav item. Will be set automatically by\nparent",
       "fieldName": "size"
     },
+    {
+      "name": "vertical",
+      "type": {
+        "text": "boolean"
+      },
+      "default": "false",
+      "description": "(ScwHorizontalNavItem) If the component is vertical.\nSet automatically by parent.",
+      "fieldName": "vertical"
+    },
     {
       "name": "tab",
       "type": {

package/dist/docs/components/ScwInput.json

@@ -158,6 +158,16 @@
       "description": "(ScwInput) Size of input",
       "attribute": "size"
     },
+    {
+      "kind": "field",
+      "name": "accept",
+      "type": {
+        "text": "null"
+      },
+      "default": "null",
+      "description": "(ScwInput) Input accept property",
+      "attribute": "accept"
+    },
     {
       "kind": "field",
       "name": "input",
@@ -947,6 +957,15 @@
       "description": "(ScwInput) Size of input",
       "fieldName": "inputSize"
     },
+    {
+      "name": "accept",
+      "type": {
+        "text": "null"
+      },
+      "default": "null",
+      "description": "(ScwInput) Input accept property",
+      "fieldName": "accept"
+    },
     {
       "name": "form-type",
       "type": {

package/dist/docs/components/ScwLink.json

@@ -120,6 +120,16 @@
       },
       "description": "focus"
     },
+    {
+      "kind": "method",
+      "name": "click",
+      "return": {
+        "type": {
+          "text": "void"
+        }
+      },
+      "description": "click"
+    },
     {
       "kind": "method",
       "name": "renderIcon",

package/dist/docs/components/ScwModal.json

@@ -14,6 +14,15 @@
       "description": "(ScwModal) Modal heading",
       "attribute": "heading"
     },
+    {
+      "kind": "field",
+      "name": "align",
+      "type": {
+        "text": "'left' | 'center' | undefined"
+      },
+      "description": "(ScwModal) Force alignment of modal heading",
+      "attribute": "align"
+    },
     {
       "kind": "field",
       "name": "open",
@@ -333,6 +342,14 @@
       "description": "(ScwModal) Modal heading",
       "fieldName": "heading"
     },
+    {
+      "name": "align",
+      "type": {
+        "text": "'left' | 'center' | undefined"
+      },
+      "description": "(ScwModal) Force alignment of modal heading",
+      "fieldName": "align"
+    },
     {
       "name": "open",
       "type": {
@@ -492,6 +509,11 @@
       "description": "Use icon buttons in heading instead of text labels",
       "code": "\n        <scw-modal\n          heading=\"My Modal\"\n          back-label=\"Back\"\n          close-icon\n          back-icon\n        >\n          Content\n          <div slot=\"left-footer\">\n            <scw-checkbox\n              hide-feedback=\"true\" aria-label=\"Checkbox\"></scw-checkbox>\n          </div>\n          <div slot=\"right-footer\">\n            <scw-button aria-label=\"Button 3\"></scw-button>\n            <scw-button aria-label=\"Button 4\"></scw-button>\n          </div>\n        </scw-modal>\n        <scw-button \n          aria-label=\"open\" \n          onclick=\"event.target.previousElementSibling.open = true;\"\n        ></scw-button>\n      "
     },
+    {
+      "title": "Align",
+      "description": "By default, the heading will left align when there is no\n      back button and center align when there is one. Use the align attribute\n      to force left or center alignment",
+      "code": "\n      <scw-flex-h>\n        <scw-modal\n          heading=\"My Modal\"\n          close-icon\n          align=\"center\"\n        >\n          Content\n          <div slot=\"right-footer\">\n            <scw-button aria-label=\"Button 3\"></scw-button>\n            <scw-button aria-label=\"Button 4\"></scw-button>\n          </div>\n        </scw-modal>\n        <scw-button \n          aria-label=\"center\" \n          onclick=\"event.target.previousElementSibling.open = true;\"\n        ></scw-button>\n        <scw-modal\n          heading=\"My Modal\"\n          close-icon\n          back-icon\n          back-label=\"Back\"\n          align=\"left\"\n        >\n          Content\n          <div slot=\"right-footer\">\n            <scw-button aria-label=\"Button 3\"></scw-button>\n            <scw-button aria-label=\"Button 4\"></scw-button>\n          </div>\n        </scw-modal>\n        <scw-button \n          aria-label=\"left\" \n          onclick=\"event.target.previousElementSibling.open = true;\"\n        ></scw-button>\n      </scw-flex-h>\n      "
+    },
     {
       "title": "Sizing",
       "description": "Set width and height to customize the size",