@skf-design-system/ui-components 1.0.0-alpha.35 → 1.0.0-alpha.37

package/dist/custom-elements.json

@@ -53,12 +53,12 @@
               "kind": "field",
               "name": "name",
               "type": {
-                "text": "Icon | undefined"
+                "text": "Icon"
               },
               "description": "Name of the icon to display",
               "attribute": "name",
               "expandedType": {
-                "text": "'addCircleOutline' | 'addCircle' | 'addPlus' | 'arrowBackIos' | 'arrowBack' | 'arrowDown' | 'arrowForwardIos' | 'arrowForward' | 'arrowLeft' | 'arrowRight' | 'arrowUpDown' | 'arrowUp' | 'article' | 'asset' | 'attachment' | 'bandCursor' | 'bands' | 'batteryEmpty' | 'batteryFull' | 'batteryLow' | 'bearingFault' | 'bluetoothDisabled' | 'bluetooth' | 'book' | 'bookmarkOutline' | 'bookmark' | 'calculator' | 'calendarBusy' | 'calendarCheck' | 'calendarEmpty' | 'calendarMonth' | 'calendarReccuring' | 'call' | 'caretDown' | 'caretUpDown' | 'caretUp' | 'chat' | 'checkCircleOutline' | 'checkCircle' | 'checkSmall' | 'check' | 'chevronDownUp' | 'chevronDown' | 'chevronLeft' | 'chevronRight' | 'chevronUpDown' | 'chevronUp' | 'chip' | 'circleStatus' | 'closeAll' | 'closeAlt' | 'close' | 'columnGraph' | 'comment' | 'connection0' | 'connection1' | 'connection2' | 'connection3' | 'connection4' | 'contentPaste' | 'copy' | 'cpmCyclesPerMinute' | 'dangerOutline' | 'danger' | 'defectFrequenciesAlt' | 'defectFrequencies' | 'deleteOutline' | 'delete' | 'devices' | 'directions' | 'doubleChevronLeft' | 'doubleChevronRight' | 'downloadDone' | 'download' | 'draftOutline' | 'draft' | 'dragDrop' | 'drop' | 'duplicate' | 'editOutline' | 'edit' | 'emailOutline' | 'emailPdf' | 'email' | 'errorOutline' | 'error' | 'exclamation' | 'facebook' | 'filterOutline' | 'filter' | 'findReplace' | 'forbidden' | 'frequencyHz' | 'fullScreen' | 'fullscreenExit' | 'functionalGroup' | 'hamburgerMenu' | 'harmonicCursor' | 'heatmap' | 'hierarchy' | 'history' | 'homeOutline' | 'home' | 'hourglassOutline' | 'hourglass' | 'image' | 'imx' | 'infoOutline' | 'info' | 'instagram' | 'integration' | 'iosShare' | 'kebabMore' | 'language' | 'lightbulbOutline' | 'lightbulb' | 'link' | 'linkedin' | 'listGroup' | 'list' | 'locationPin' | 'lockOutline' | 'lock' | 'logOut' | 'login' | 'meatballsMoreCircle' | 'meatballsMore' | 'microphone' | 'nearMe' | 'noData' | 'notificationsBellOutline' | 'notificationsBell' | 'o' | 'offer' | 'openInNew' | 'overlaysBaseline' | 'pan360' | 'paper' | 'pause' | 'pdfOutline' | 'pdf' | 'person' | 'photoCameraOutline' | 'photoCamera' | 'pieChart' | 'pinOutline' | 'pin' | 'play' | 'powerOff' | 'printOutline' | 'print' | 'privacyPolicyOutline' | 'privacyPolicy' | 'proCollect' | 'recAction' | 'refresh' | 'removeMinus' | 'reorder' | 'reply' | 'report' | 'rewakableRoute' | 'route' | 'search' | 'sendOutline' | 'send' | 'sensorAlt' | 'sensor' | 'settingsOutline' | 'settings' | 'share' | 'shoppingCart' | 'sidebandCursor' | 'singleCursor' | 'skfBearing' | 'spectrum' | 'starOutline' | 'star' | 'stop' | 'sync' | 'time' | 'timewave' | 'translate' | 'trend' | 'trendingUp' | 'twitter' | 'undo' | 'unknownDiamondOutline' | 'unknownDiamond' | 'unknownOutline' | 'unknown' | 'unlink' | 'unlockOutline' | 'unlock' | 'unscheduledAction' | 'upload' | 'vibrationAlt' | 'vibration' | 'view3D' | 'viewFull' | 'viewHorizontal' | 'viewVertical' | 'visibilityOffOutline' | 'visibilityOff' | 'visibilityOutline' | 'visibility' | 'warningDiamondOutline' | 'warningDiamond' | 'warningOutline' | 'warning' | 'youtube' | 'zoomIn' | 'zoomOut' | undefined"
+                "text": "'addCircleOutline' | 'addCircle' | 'addPlus' | 'arrowBackIos' | 'arrowBack' | 'arrowDown' | 'arrowForwardIos' | 'arrowForward' | 'arrowLeft' | 'arrowRight' | 'arrowUpDown' | 'arrowUp' | 'article' | 'asset' | 'attachment' | 'bandCursor' | 'bands' | 'batteryEmpty' | 'batteryFull' | 'batteryLow' | 'bearingFault' | 'bluetoothDisabled' | 'bluetooth' | 'book' | 'bookmarkOutline' | 'bookmark' | 'calculator' | 'calendarBusy' | 'calendarCheck' | 'calendarEmpty' | 'calendarMonth' | 'calendarReccuring' | 'call' | 'caretDown' | 'caretUpDown' | 'caretUp' | 'chat' | 'checkCircleOutline' | 'checkCircle' | 'checkSmall' | 'check' | 'chevronDownUp' | 'chevronDown' | 'chevronLeft' | 'chevronRight' | 'chevronUpDown' | 'chevronUp' | 'chip' | 'circleStatus' | 'closeAll' | 'closeAlt' | 'close' | 'columnGraph' | 'comment' | 'connection0' | 'connection1' | 'connection2' | 'connection3' | 'connection4' | 'contentPaste' | 'copy' | 'cpmCyclesPerMinute' | 'dangerOutline' | 'danger' | 'defectFrequenciesAlt' | 'defectFrequencies' | 'deleteOutline' | 'delete' | 'devices' | 'directions' | 'doubleChevronLeft' | 'doubleChevronRight' | 'downloadDone' | 'download' | 'draftOutline' | 'draft' | 'dragDrop' | 'drop' | 'duplicate' | 'editOutline' | 'edit' | 'emailOutline' | 'emailPdf' | 'email' | 'errorOutline' | 'error' | 'exclamation' | 'facebook' | 'filterOutline' | 'filter' | 'findReplace' | 'forbidden' | 'frequencyHz' | 'fullScreen' | 'fullscreenExit' | 'functionalGroup' | 'hamburgerMenu' | 'harmonicCursor' | 'heatmap' | 'hierarchy' | 'history' | 'homeOutline' | 'home' | 'hourglassOutline' | 'hourglass' | 'image' | 'imx' | 'infoOutline' | 'info' | 'instagram' | 'integration' | 'iosShare' | 'kebabMore' | 'language' | 'lightbulbOutline' | 'lightbulb' | 'link' | 'linkedin' | 'listGroup' | 'list' | 'locationPin' | 'lockOutline' | 'lock' | 'logOut' | 'login' | 'meatballsMoreCircle' | 'meatballsMore' | 'microphone' | 'nearMe' | 'noData' | 'notificationsBellOutline' | 'notificationsBell' | 'o' | 'offer' | 'openInNew' | 'overlaysBaseline' | 'pan360' | 'paper' | 'pause' | 'pdfOutline' | 'pdf' | 'person' | 'photoCameraOutline' | 'photoCamera' | 'pieChart' | 'pinOutline' | 'pin' | 'play' | 'powerOff' | 'printOutline' | 'print' | 'privacyPolicyOutline' | 'privacyPolicy' | 'proCollect' | 'recAction' | 'refresh' | 'removeMinus' | 'reorder' | 'reply' | 'report' | 'rewakableRoute' | 'route' | 'search' | 'sendOutline' | 'send' | 'sensorAlt' | 'sensor' | 'settingsOutline' | 'settings' | 'share' | 'shoppingCart' | 'sidebandCursor' | 'singleCursor' | 'skfBearing' | 'spectrum' | 'starOutline' | 'star' | 'stop' | 'sync' | 'time' | 'timewave' | 'translate' | 'trend' | 'trendingUp' | 'twitter' | 'undo' | 'unknownDiamondOutline' | 'unknownDiamond' | 'unknownOutline' | 'unknown' | 'unlink' | 'unlockOutline' | 'unlock' | 'unscheduledAction' | 'upload' | 'vibrationAlt' | 'vibration' | 'view3D' | 'viewFull' | 'viewHorizontal' | 'viewVertical' | 'visibilityOffOutline' | 'visibilityOff' | 'visibilityOutline' | 'visibility' | 'warningDiamondOutline' | 'warningDiamond' | 'warningOutline' | 'warning' | 'youtube' | 'zoomIn' | 'zoomOut'"
               }
             },
             {
@@ -73,15 +73,6 @@
               "expandedType": {
                 "text": "'xs' | 'sm' | 'md' | 'lg'"
               }
-            },
-            {
-              "kind": "method",
-              "name": "_handleNameChange",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
             }
           ],
           "attributes": [
@@ -108,12 +99,12 @@
             {
               "name": "name",
               "type": {
-                "text": "Icon | undefined"
+                "text": "Icon"
               },
               "description": "Name of the icon to display",
               "fieldName": "name",
               "expandedType": {
-                "text": "'addCircleOutline' | 'addCircle' | 'addPlus' | 'arrowBackIos' | 'arrowBack' | 'arrowDown' | 'arrowForwardIos' | 'arrowForward' | 'arrowLeft' | 'arrowRight' | 'arrowUpDown' | 'arrowUp' | 'article' | 'asset' | 'attachment' | 'bandCursor' | 'bands' | 'batteryEmpty' | 'batteryFull' | 'batteryLow' | 'bearingFault' | 'bluetoothDisabled' | 'bluetooth' | 'book' | 'bookmarkOutline' | 'bookmark' | 'calculator' | 'calendarBusy' | 'calendarCheck' | 'calendarEmpty' | 'calendarMonth' | 'calendarReccuring' | 'call' | 'caretDown' | 'caretUpDown' | 'caretUp' | 'chat' | 'checkCircleOutline' | 'checkCircle' | 'checkSmall' | 'check' | 'chevronDownUp' | 'chevronDown' | 'chevronLeft' | 'chevronRight' | 'chevronUpDown' | 'chevronUp' | 'chip' | 'circleStatus' | 'closeAll' | 'closeAlt' | 'close' | 'columnGraph' | 'comment' | 'connection0' | 'connection1' | 'connection2' | 'connection3' | 'connection4' | 'contentPaste' | 'copy' | 'cpmCyclesPerMinute' | 'dangerOutline' | 'danger' | 'defectFrequenciesAlt' | 'defectFrequencies' | 'deleteOutline' | 'delete' | 'devices' | 'directions' | 'doubleChevronLeft' | 'doubleChevronRight' | 'downloadDone' | 'download' | 'draftOutline' | 'draft' | 'dragDrop' | 'drop' | 'duplicate' | 'editOutline' | 'edit' | 'emailOutline' | 'emailPdf' | 'email' | 'errorOutline' | 'error' | 'exclamation' | 'facebook' | 'filterOutline' | 'filter' | 'findReplace' | 'forbidden' | 'frequencyHz' | 'fullScreen' | 'fullscreenExit' | 'functionalGroup' | 'hamburgerMenu' | 'harmonicCursor' | 'heatmap' | 'hierarchy' | 'history' | 'homeOutline' | 'home' | 'hourglassOutline' | 'hourglass' | 'image' | 'imx' | 'infoOutline' | 'info' | 'instagram' | 'integration' | 'iosShare' | 'kebabMore' | 'language' | 'lightbulbOutline' | 'lightbulb' | 'link' | 'linkedin' | 'listGroup' | 'list' | 'locationPin' | 'lockOutline' | 'lock' | 'logOut' | 'login' | 'meatballsMoreCircle' | 'meatballsMore' | 'microphone' | 'nearMe' | 'noData' | 'notificationsBellOutline' | 'notificationsBell' | 'o' | 'offer' | 'openInNew' | 'overlaysBaseline' | 'pan360' | 'paper' | 'pause' | 'pdfOutline' | 'pdf' | 'person' | 'photoCameraOutline' | 'photoCamera' | 'pieChart' | 'pinOutline' | 'pin' | 'play' | 'powerOff' | 'printOutline' | 'print' | 'privacyPolicyOutline' | 'privacyPolicy' | 'proCollect' | 'recAction' | 'refresh' | 'removeMinus' | 'reorder' | 'reply' | 'report' | 'rewakableRoute' | 'route' | 'search' | 'sendOutline' | 'send' | 'sensorAlt' | 'sensor' | 'settingsOutline' | 'settings' | 'share' | 'shoppingCart' | 'sidebandCursor' | 'singleCursor' | 'skfBearing' | 'spectrum' | 'starOutline' | 'star' | 'stop' | 'sync' | 'time' | 'timewave' | 'translate' | 'trend' | 'trendingUp' | 'twitter' | 'undo' | 'unknownDiamondOutline' | 'unknownDiamond' | 'unknownOutline' | 'unknown' | 'unlink' | 'unlockOutline' | 'unlock' | 'unscheduledAction' | 'upload' | 'vibrationAlt' | 'vibration' | 'view3D' | 'viewFull' | 'viewHorizontal' | 'viewVertical' | 'visibilityOffOutline' | 'visibilityOff' | 'visibilityOutline' | 'visibility' | 'warningDiamondOutline' | 'warningDiamond' | 'warningOutline' | 'warning' | 'youtube' | 'zoomIn' | 'zoomOut' | undefined"
+                "text": "'addCircleOutline' | 'addCircle' | 'addPlus' | 'arrowBackIos' | 'arrowBack' | 'arrowDown' | 'arrowForwardIos' | 'arrowForward' | 'arrowLeft' | 'arrowRight' | 'arrowUpDown' | 'arrowUp' | 'article' | 'asset' | 'attachment' | 'bandCursor' | 'bands' | 'batteryEmpty' | 'batteryFull' | 'batteryLow' | 'bearingFault' | 'bluetoothDisabled' | 'bluetooth' | 'book' | 'bookmarkOutline' | 'bookmark' | 'calculator' | 'calendarBusy' | 'calendarCheck' | 'calendarEmpty' | 'calendarMonth' | 'calendarReccuring' | 'call' | 'caretDown' | 'caretUpDown' | 'caretUp' | 'chat' | 'checkCircleOutline' | 'checkCircle' | 'checkSmall' | 'check' | 'chevronDownUp' | 'chevronDown' | 'chevronLeft' | 'chevronRight' | 'chevronUpDown' | 'chevronUp' | 'chip' | 'circleStatus' | 'closeAll' | 'closeAlt' | 'close' | 'columnGraph' | 'comment' | 'connection0' | 'connection1' | 'connection2' | 'connection3' | 'connection4' | 'contentPaste' | 'copy' | 'cpmCyclesPerMinute' | 'dangerOutline' | 'danger' | 'defectFrequenciesAlt' | 'defectFrequencies' | 'deleteOutline' | 'delete' | 'devices' | 'directions' | 'doubleChevronLeft' | 'doubleChevronRight' | 'downloadDone' | 'download' | 'draftOutline' | 'draft' | 'dragDrop' | 'drop' | 'duplicate' | 'editOutline' | 'edit' | 'emailOutline' | 'emailPdf' | 'email' | 'errorOutline' | 'error' | 'exclamation' | 'facebook' | 'filterOutline' | 'filter' | 'findReplace' | 'forbidden' | 'frequencyHz' | 'fullScreen' | 'fullscreenExit' | 'functionalGroup' | 'hamburgerMenu' | 'harmonicCursor' | 'heatmap' | 'hierarchy' | 'history' | 'homeOutline' | 'home' | 'hourglassOutline' | 'hourglass' | 'image' | 'imx' | 'infoOutline' | 'info' | 'instagram' | 'integration' | 'iosShare' | 'kebabMore' | 'language' | 'lightbulbOutline' | 'lightbulb' | 'link' | 'linkedin' | 'listGroup' | 'list' | 'locationPin' | 'lockOutline' | 'lock' | 'logOut' | 'login' | 'meatballsMoreCircle' | 'meatballsMore' | 'microphone' | 'nearMe' | 'noData' | 'notificationsBellOutline' | 'notificationsBell' | 'o' | 'offer' | 'openInNew' | 'overlaysBaseline' | 'pan360' | 'paper' | 'pause' | 'pdfOutline' | 'pdf' | 'person' | 'photoCameraOutline' | 'photoCamera' | 'pieChart' | 'pinOutline' | 'pin' | 'play' | 'powerOff' | 'printOutline' | 'print' | 'privacyPolicyOutline' | 'privacyPolicy' | 'proCollect' | 'recAction' | 'refresh' | 'removeMinus' | 'reorder' | 'reply' | 'report' | 'rewakableRoute' | 'route' | 'search' | 'sendOutline' | 'send' | 'sensorAlt' | 'sensor' | 'settingsOutline' | 'settings' | 'share' | 'shoppingCart' | 'sidebandCursor' | 'singleCursor' | 'skfBearing' | 'spectrum' | 'starOutline' | 'star' | 'stop' | 'sync' | 'time' | 'timewave' | 'translate' | 'trend' | 'trendingUp' | 'twitter' | 'undo' | 'unknownDiamondOutline' | 'unknownDiamond' | 'unknownOutline' | 'unknown' | 'unlink' | 'unlockOutline' | 'unlock' | 'unscheduledAction' | 'upload' | 'vibrationAlt' | 'vibration' | 'view3D' | 'viewFull' | 'viewHorizontal' | 'viewVertical' | 'visibilityOffOutline' | 'visibilityOff' | 'visibilityOutline' | 'visibility' | 'warningDiamondOutline' | 'warningDiamond' | 'warningOutline' | 'warning' | 'youtube' | 'zoomIn' | 'zoomOut'"
               }
             },
             {
@@ -829,6 +820,22 @@
           "description": "The `<skf-loader>` component is a progress indicator that uses circular indicators for short, indeterminate activities",
           "name": "SkfLoader",
           "members": [
+            {
+              "kind": "field",
+              "name": "#internals",
+              "privacy": "private",
+              "type": {
+                "text": "ElementInternals"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#states",
+              "privacy": "private",
+              "type": {
+                "text": "CustomStateSet"
+              }
+            },
             {
               "kind": "field",
               "name": "ariaLabel",
@@ -837,8 +844,7 @@
               },
               "default": "'Loading...'",
               "description": "Defines the aria-label",
-              "attribute": "aria-label",
-              "reflects": true
+              "attribute": "aria-label"
             },
             {
               "kind": "field",
@@ -854,12 +860,14 @@
               "kind": "field",
               "name": "size",
               "type": {
-                "text": "'md' | 'sm' | undefined"
+                "text": "Size"
               },
               "default": "'md'",
               "description": "Defines the size of the loader",
               "attribute": "size",
-              "reflects": true
+              "expandedType": {
+                "text": "'sm' | 'md'"
+              }
             }
           ],
           "attributes": [
@@ -884,11 +892,14 @@
             {
               "name": "size",
               "type": {
-                "text": "'md' | 'sm' | undefined"
+                "text": "Size"
               },
               "default": "'md'",
               "description": "Defines the size of the loader",
-              "fieldName": "size"
+              "fieldName": "size",
+              "expandedType": {
+                "text": "'sm' | 'md'"
+              }
             }
           ],
           "superclass": {
@@ -1190,6 +1201,12 @@
           "kind": "class",
           "description": "The `<skf-card>` can be used to group related subjects in a container\n\nSee [zeroheight](https://zeroheight.com/853e936c9/p/021eed-card) for design principles",
           "name": "SkfCard",
+          "cssProperties": [
+            {
+              "description": "Ability to set a custom background color",
+              "name": "--mod-card-bg-color"
+            }
+          ],
           "slots": [
             {
               "description": "The card's main content",
@@ -3008,999 +3025,1108 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/nav/nav.js",
+      "path": "components/link/link.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "The `<skf-nav>` is a component that displays a list of <nav-items>.",
-          "name": "SkfNav",
+          "description": "The `<skf-link>` can be used as either a regular link or a semantic button. The button variant is\nintended to be used for triggering javascript functions, not handling forms.",
+          "name": "SkfLink",
           "slots": [
             {
-              "description": "The component's main content",
+              "description": "The links' main content",
               "name": ""
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "vertical",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "attribute": "vertical",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "vertical",
+              "name": "#internals",
+              "privacy": "private",
               "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "vertical"
-            }
-          ],
-          "superclass": {
-            "name": "SkfElement",
-            "package": "@internal/components/skf-element"
-          },
-          "tagName": "skf-nav",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "SkfNav",
-          "declaration": {
-            "name": "SkfNav",
-            "module": "src/components/nav/nav.component.ts"
-          }
-        }
-      ],
-      "typeDefinitionPath": "components/nav/nav.d.ts"
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/header/header.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "The `<skf-header>` component is to be used as the site-header in the app. The navigation will be collapsed to mobile-view if the menu items exceed the available width.",
-          "name": "SkfHeader",
-          "slots": [
-            {
-              "description": "Navigation items",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "compact",
-              "description": "If true, sets header to display in compact mode only (hanburger menu and drawer)",
-              "attribute": "compact",
-              "reflects": true
+                "text": "ElementInternals"
+              }
             },
             {
               "kind": "field",
-              "name": "hamburgerAriaLabel",
+              "name": "#states",
+              "privacy": "private",
               "type": {
-                "text": "string"
-              },
-              "default": "'Show navigation'",
-              "description": "If defined, sets the aria-label for the hamburger button",
-              "attribute": "hamburger-aria-label"
+                "text": "CustomStateSet"
+              }
             },
             {
               "kind": "field",
-              "name": "siteName",
+              "name": "as",
               "type": {
-                "text": "string | undefined"
+                "text": "'button' | 'link'"
               },
-              "description": "If defined, sets the app or site's name",
-              "attribute": "site-name"
+              "default": "'link'",
+              "description": "Defines the semantic element to render",
+              "attribute": "as"
             },
             {
               "kind": "field",
-              "name": "siteUrl",
+              "name": "color",
               "type": {
-                "text": "string | undefined"
+                "text": "Color"
               },
-              "description": "If defined, sets the site's base-url for the \"logo-link\"",
-              "attribute": "site-url"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "compact",
-              "description": "If true, sets header to display in compact mode only (hanburger menu and drawer)",
-              "fieldName": "compact"
+              "default": "'primary'",
+              "description": "Defines the text-color",
+              "attribute": "color",
+              "expandedType": {
+                "text": "'primary' | 'inverse'"
+              }
             },
             {
-              "name": "hamburger-aria-label",
+              "kind": "field",
+              "name": "disabled",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "'Show navigation'",
-              "description": "If defined, sets the aria-label for the hamburger button",
-              "fieldName": "hamburgerAriaLabel"
+              "default": "false",
+              "description": "If true, disables the link",
+              "attribute": "disabled"
             },
             {
-              "name": "site-name",
+              "kind": "field",
+              "name": "download",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "If defined, sets the app or site's name",
-              "fieldName": "siteName"
+              "default": "false",
+              "description": "If defined, downloads the url",
+              "attribute": "download"
             },
             {
-              "name": "site-url",
+              "kind": "field",
+              "name": "href",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "If defined, sets the site's base-url for the \"logo-link\"",
-              "fieldName": "siteUrl"
-            }
-          ],
-          "superclass": {
-            "name": "SkfElement",
-            "package": "@internal/components/skf-element"
-          },
-          "tagName": "skf-header",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "SkfHeader",
-          "declaration": {
-            "name": "SkfHeader",
-            "module": "src/components/header/header.component.ts"
-          }
-        }
-      ],
-      "typeDefinitionPath": "components/header/header.d.ts"
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/input/input.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "The skf-text-field is used to create a text input field. It can be used inside a form element or standalone\n\nSee [zeroheight](https://zeroheight.com/853e936c9/p/9481fa-input-field) for design principles",
-          "name": "SkfInput",
-          "slots": [
-            {
-              "description": "The Inputs label. Alternatively, you can use the `label` attribute.",
-              "name": ""
-            }
-          ],
-          "members": [
+              "description": "If defined, loads url on click",
+              "attribute": "href"
+            },
             {
               "kind": "field",
-              "name": "customError",
+              "name": "icon",
               "type": {
-                "text": "string | undefined"
+                "text": "Icon | undefined"
               },
-              "privacy": "private"
+              "description": "If defined, renders an icon before or after the text",
+              "attribute": "icon",
+              "expandedType": {
+                "text": "'addCircleOutline' | 'addCircle' | 'addPlus' | 'arrowBackIos' | 'arrowBack' | 'arrowDown' | 'arrowForwardIos' | 'arrowForward' | 'arrowLeft' | 'arrowRight' | 'arrowUpDown' | 'arrowUp' | 'article' | 'asset' | 'attachment' | 'bandCursor' | 'bands' | 'batteryEmpty' | 'batteryFull' | 'batteryLow' | 'bearingFault' | 'bluetoothDisabled' | 'bluetooth' | 'book' | 'bookmarkOutline' | 'bookmark' | 'calculator' | 'calendarBusy' | 'calendarCheck' | 'calendarEmpty' | 'calendarMonth' | 'calendarReccuring' | 'call' | 'caretDown' | 'caretUpDown' | 'caretUp' | 'chat' | 'checkCircleOutline' | 'checkCircle' | 'checkSmall' | 'check' | 'chevronDownUp' | 'chevronDown' | 'chevronLeft' | 'chevronRight' | 'chevronUpDown' | 'chevronUp' | 'chip' | 'circleStatus' | 'closeAll' | 'closeAlt' | 'close' | 'columnGraph' | 'comment' | 'connection0' | 'connection1' | 'connection2' | 'connection3' | 'connection4' | 'contentPaste' | 'copy' | 'cpmCyclesPerMinute' | 'dangerOutline' | 'danger' | 'defectFrequenciesAlt' | 'defectFrequencies' | 'deleteOutline' | 'delete' | 'devices' | 'directions' | 'doubleChevronLeft' | 'doubleChevronRight' | 'downloadDone' | 'download' | 'draftOutline' | 'draft' | 'dragDrop' | 'drop' | 'duplicate' | 'editOutline' | 'edit' | 'emailOutline' | 'emailPdf' | 'email' | 'errorOutline' | 'error' | 'exclamation' | 'facebook' | 'filterOutline' | 'filter' | 'findReplace' | 'forbidden' | 'frequencyHz' | 'fullScreen' | 'fullscreenExit' | 'functionalGroup' | 'hamburgerMenu' | 'harmonicCursor' | 'heatmap' | 'hierarchy' | 'history' | 'homeOutline' | 'home' | 'hourglassOutline' | 'hourglass' | 'image' | 'imx' | 'infoOutline' | 'info' | 'instagram' | 'integration' | 'iosShare' | 'kebabMore' | 'language' | 'lightbulbOutline' | 'lightbulb' | 'link' | 'linkedin' | 'listGroup' | 'list' | 'locationPin' | 'lockOutline' | 'lock' | 'logOut' | 'login' | 'meatballsMoreCircle' | 'meatballsMore' | 'microphone' | 'nearMe' | 'noData' | 'notificationsBellOutline' | 'notificationsBell' | 'o' | 'offer' | 'openInNew' | 'overlaysBaseline' | 'pan360' | 'paper' | 'pause' | 'pdfOutline' | 'pdf' | 'person' | 'photoCameraOutline' | 'photoCamera' | 'pieChart' | 'pinOutline' | 'pin' | 'play' | 'powerOff' | 'printOutline' | 'print' | 'privacyPolicyOutline' | 'privacyPolicy' | 'proCollect' | 'recAction' | 'refresh' | 'removeMinus' | 'reorder' | 'reply' | 'report' | 'rewakableRoute' | 'route' | 'search' | 'sendOutline' | 'send' | 'sensorAlt' | 'sensor' | 'settingsOutline' | 'settings' | 'share' | 'shoppingCart' | 'sidebandCursor' | 'singleCursor' | 'skfBearing' | 'spectrum' | 'starOutline' | 'star' | 'stop' | 'sync' | 'time' | 'timewave' | 'translate' | 'trend' | 'trendingUp' | 'twitter' | 'undo' | 'unknownDiamondOutline' | 'unknownDiamond' | 'unknownOutline' | 'unknown' | 'unlink' | 'unlockOutline' | 'unlock' | 'unscheduledAction' | 'upload' | 'vibrationAlt' | 'vibration' | 'view3D' | 'viewFull' | 'viewHorizontal' | 'viewVertical' | 'visibilityOffOutline' | 'visibilityOff' | 'visibilityOutline' | 'visibility' | 'warningDiamondOutline' | 'warningDiamond' | 'warningOutline' | 'warning' | 'youtube' | 'zoomIn' | 'zoomOut' | undefined"
+              }
             },
             {
               "kind": "field",
-              "name": "autocomplete",
+              "name": "iconRight",
               "type": {
-                "text": "HTMLInputElement['autocomplete'] | undefined"
+                "text": "boolean"
               },
-              "description": "Indicates whether the value of the control can be automatically completed by the browser. See\n[MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/autocomplete) for details.",
-              "attribute": "autocomplete"
+              "default": "false",
+              "description": "If true, the icon is placed to the right in relation to the text",
+              "attribute": "icon-right"
             },
             {
               "kind": "field",
-              "name": "buttonAriaLabelClear",
+              "name": "rel",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'Clear input'",
-              "description": "Custom aria-label for the clear button. **Notice!** Only applicable to type=search.",
-              "attribute": "button-aria-label-clear"
+              "description": "If defined, describes the relationship between a linked resource and the current document",
+              "attribute": "rel"
             },
             {
               "kind": "field",
-              "name": "buttonAriaLabelHide",
+              "name": "route",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'Hide password'",
-              "description": "Custom aria-label for the visibility button. **Notice!** Only applicable to type=password.",
-              "attribute": "button-aria-label-hide"
+              "description": "If defined, used on conjunction with onClick property. **Notice!** Only applicable to as=button.",
+              "attribute": "route"
             },
             {
               "kind": "field",
-              "name": "buttonAriaLabelShow",
+              "name": "stretch",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "'Show password'",
-              "description": "Custom aria-label for the visibility button **Notice!** Only applicable to type=password.",
-              "attribute": "button-aria-label-show"
+              "default": "false",
+              "description": "If true, fills the parents horizontal axis",
+              "attribute": "stretch"
             },
             {
               "kind": "field",
-              "name": "customInvalid",
-              "description": "If defined, forces component to invalid state until removed. Its value is used as hint text.",
-              "attribute": "custom-invalid",
-              "reflects": true
+              "name": "target",
+              "type": {
+                "text": "'_blank' | '_parent' | '_self' | '_top' | undefined"
+              },
+              "description": "If defined, specifies where to open the linked document",
+              "attribute": "target"
             },
             {
-              "kind": "field",
-              "name": "debug",
+              "kind": "method",
+              "name": "_handleAsChange"
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fired when the link is clicked",
+              "name": "skf-link-click"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "as",
+              "type": {
+                "text": "'button' | 'link'"
+              },
+              "default": "'link'",
+              "description": "Defines the semantic element to render",
+              "fieldName": "as"
+            },
+            {
+              "name": "color",
+              "type": {
+                "text": "Color"
+              },
+              "default": "'primary'",
+              "description": "Defines the text-color",
+              "fieldName": "color",
+              "expandedType": {
+                "text": "'primary' | 'inverse'"
+              }
+            },
+            {
+              "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "If true, outputs helping hints in console",
-              "attribute": "debug"
+              "description": "If true, disables the link",
+              "fieldName": "disabled"
             },
             {
-              "kind": "field",
-              "name": "hideLabel",
+              "name": "download",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "If true, hides the label visually",
-              "attribute": "hide-label"
+              "description": "If defined, downloads the url",
+              "fieldName": "download"
             },
             {
-              "kind": "field",
-              "name": "hint",
+              "name": "href",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "If defined, displays informational text below the field",
-              "attribute": "hint"
+              "description": "If defined, loads url on click",
+              "fieldName": "href"
             },
             {
-              "kind": "field",
-              "name": "inputmode",
+              "name": "icon",
               "type": {
-                "text": "HTMLInputElement['inputMode']"
+                "text": "Icon | undefined"
               },
-              "default": "'text'",
-              "description": "Provides a hint about the type of data that might be entered by the user while editing the element or its contents. See\n[MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inputMode) for details.",
-              "attribute": "inputmode"
+              "description": "If defined, renders an icon before or after the text",
+              "fieldName": "icon",
+              "expandedType": {
+                "text": "'addCircleOutline' | 'addCircle' | 'addPlus' | 'arrowBackIos' | 'arrowBack' | 'arrowDown' | 'arrowForwardIos' | 'arrowForward' | 'arrowLeft' | 'arrowRight' | 'arrowUpDown' | 'arrowUp' | 'article' | 'asset' | 'attachment' | 'bandCursor' | 'bands' | 'batteryEmpty' | 'batteryFull' | 'batteryLow' | 'bearingFault' | 'bluetoothDisabled' | 'bluetooth' | 'book' | 'bookmarkOutline' | 'bookmark' | 'calculator' | 'calendarBusy' | 'calendarCheck' | 'calendarEmpty' | 'calendarMonth' | 'calendarReccuring' | 'call' | 'caretDown' | 'caretUpDown' | 'caretUp' | 'chat' | 'checkCircleOutline' | 'checkCircle' | 'checkSmall' | 'check' | 'chevronDownUp' | 'chevronDown' | 'chevronLeft' | 'chevronRight' | 'chevronUpDown' | 'chevronUp' | 'chip' | 'circleStatus' | 'closeAll' | 'closeAlt' | 'close' | 'columnGraph' | 'comment' | 'connection0' | 'connection1' | 'connection2' | 'connection3' | 'connection4' | 'contentPaste' | 'copy' | 'cpmCyclesPerMinute' | 'dangerOutline' | 'danger' | 'defectFrequenciesAlt' | 'defectFrequencies' | 'deleteOutline' | 'delete' | 'devices' | 'directions' | 'doubleChevronLeft' | 'doubleChevronRight' | 'downloadDone' | 'download' | 'draftOutline' | 'draft' | 'dragDrop' | 'drop' | 'duplicate' | 'editOutline' | 'edit' | 'emailOutline' | 'emailPdf' | 'email' | 'errorOutline' | 'error' | 'exclamation' | 'facebook' | 'filterOutline' | 'filter' | 'findReplace' | 'forbidden' | 'frequencyHz' | 'fullScreen' | 'fullscreenExit' | 'functionalGroup' | 'hamburgerMenu' | 'harmonicCursor' | 'heatmap' | 'hierarchy' | 'history' | 'homeOutline' | 'home' | 'hourglassOutline' | 'hourglass' | 'image' | 'imx' | 'infoOutline' | 'info' | 'instagram' | 'integration' | 'iosShare' | 'kebabMore' | 'language' | 'lightbulbOutline' | 'lightbulb' | 'link' | 'linkedin' | 'listGroup' | 'list' | 'locationPin' | 'lockOutline' | 'lock' | 'logOut' | 'login' | 'meatballsMoreCircle' | 'meatballsMore' | 'microphone' | 'nearMe' | 'noData' | 'notificationsBellOutline' | 'notificationsBell' | 'o' | 'offer' | 'openInNew' | 'overlaysBaseline' | 'pan360' | 'paper' | 'pause' | 'pdfOutline' | 'pdf' | 'person' | 'photoCameraOutline' | 'photoCamera' | 'pieChart' | 'pinOutline' | 'pin' | 'play' | 'powerOff' | 'printOutline' | 'print' | 'privacyPolicyOutline' | 'privacyPolicy' | 'proCollect' | 'recAction' | 'refresh' | 'removeMinus' | 'reorder' | 'reply' | 'report' | 'rewakableRoute' | 'route' | 'search' | 'sendOutline' | 'send' | 'sensorAlt' | 'sensor' | 'settingsOutline' | 'settings' | 'share' | 'shoppingCart' | 'sidebandCursor' | 'singleCursor' | 'skfBearing' | 'spectrum' | 'starOutline' | 'star' | 'stop' | 'sync' | 'time' | 'timewave' | 'translate' | 'trend' | 'trendingUp' | 'twitter' | 'undo' | 'unknownDiamondOutline' | 'unknownDiamond' | 'unknownOutline' | 'unknown' | 'unlink' | 'unlockOutline' | 'unlock' | 'unscheduledAction' | 'upload' | 'vibrationAlt' | 'vibration' | 'view3D' | 'viewFull' | 'viewHorizontal' | 'viewVertical' | 'visibilityOffOutline' | 'visibilityOff' | 'visibilityOutline' | 'visibility' | 'warningDiamondOutline' | 'warningDiamond' | 'warningOutline' | 'warning' | 'youtube' | 'zoomIn' | 'zoomOut' | undefined"
+              }
             },
             {
-              "kind": "field",
-              "name": "label",
+              "name": "icon-right",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "If defined, sets the input's label. Alternatively, you can use the `label` attribute.",
-              "attribute": "label"
+              "default": "false",
+              "description": "If true, the icon is placed to the right in relation to the text",
+              "fieldName": "iconRight"
             },
             {
-              "kind": "field",
-              "name": "leading",
+              "name": "rel",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "If defined, displays a prefix/adornment before the input-element",
-              "attribute": "leading"
+              "description": "If defined, describes the relationship between a linked resource and the current document",
+              "fieldName": "rel"
             },
             {
-              "kind": "field",
-              "name": "max",
+              "name": "route",
               "type": {
-                "text": "number | string | undefined"
+                "text": "string | undefined"
               },
-              "description": "If defined, sets the maximum value to accept for this input",
-              "attribute": "max"
+              "description": "If defined, used on conjunction with onClick property. **Notice!** Only applicable to as=button.",
+              "fieldName": "route"
             },
             {
-              "kind": "field",
-              "name": "maxLength",
+              "name": "stretch",
               "type": {
-                "text": "number | undefined"
+                "text": "boolean"
               },
-              "description": "If defined, sets the maximum character length to accept for this input",
-              "attribute": "maxlength"
+              "default": "false",
+              "description": "If true, fills the parents horizontal axis",
+              "fieldName": "stretch"
             },
             {
-              "kind": "field",
-              "name": "min",
+              "name": "target",
               "type": {
-                "text": "number | string | undefined"
+                "text": "'_blank' | '_parent' | '_self' | '_top' | undefined"
               },
-              "description": "If defined, sets the minimum value to accept for this input",
-              "attribute": "min"
-            },
+              "description": "If defined, specifies where to open the linked document",
+              "fieldName": "target"
+            }
+          ],
+          "superclass": {
+            "name": "SkfElement",
+            "package": "@internal/components/skf-element.js"
+          },
+          "tagName": "skf-link",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SkfLink",
+          "declaration": {
+            "name": "SkfLink",
+            "module": "src/components/link/link.component.ts"
+          }
+        }
+      ],
+      "typeDefinitionPath": "components/link/link.d.ts"
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/nav/nav-item.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The `<skf-nav>` is a component that displays a list of <nav-items>.",
+          "name": "SkfNavItem",
+          "slots": [
+            {
+              "description": "The component's main content",
+              "name": ""
+            }
+          ],
+          "members": [
             {
               "kind": "field",
-              "name": "minLength",
+              "name": "#internals",
+              "privacy": "private",
               "type": {
-                "text": "number | undefined"
-              },
-              "description": "If defined, sets the minimum character length to accept for this input",
-              "attribute": "minlength"
+                "text": "ElementInternals"
+              }
             },
             {
               "kind": "field",
-              "name": "name",
+              "name": "#states",
+              "privacy": "private",
               "type": {
-                "text": "string | undefined"
-              },
-              "description": "If defined, adds name to the input-element",
-              "attribute": "name",
-              "reflects": true
+                "text": "CustomStateSet"
+              }
             },
             {
               "kind": "field",
-              "name": "pattern",
+              "name": "href",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "description": "If defined, adds name to the input-element",
-              "attribute": "pattern"
+              "default": "''",
+              "attribute": "href"
             },
             {
               "kind": "field",
-              "name": "placeholder",
+              "name": "icon",
               "type": {
-                "text": "string | undefined"
+                "text": "Icon | undefined"
               },
-              "description": "If defined, displays placeholder text",
-              "attribute": "placeholder"
+              "attribute": "icon",
+              "expandedType": {
+                "text": "'addCircleOutline' | 'addCircle' | 'addPlus' | 'arrowBackIos' | 'arrowBack' | 'arrowDown' | 'arrowForwardIos' | 'arrowForward' | 'arrowLeft' | 'arrowRight' | 'arrowUpDown' | 'arrowUp' | 'article' | 'asset' | 'attachment' | 'bandCursor' | 'bands' | 'batteryEmpty' | 'batteryFull' | 'batteryLow' | 'bearingFault' | 'bluetoothDisabled' | 'bluetooth' | 'book' | 'bookmarkOutline' | 'bookmark' | 'calculator' | 'calendarBusy' | 'calendarCheck' | 'calendarEmpty' | 'calendarMonth' | 'calendarReccuring' | 'call' | 'caretDown' | 'caretUpDown' | 'caretUp' | 'chat' | 'checkCircleOutline' | 'checkCircle' | 'checkSmall' | 'check' | 'chevronDownUp' | 'chevronDown' | 'chevronLeft' | 'chevronRight' | 'chevronUpDown' | 'chevronUp' | 'chip' | 'circleStatus' | 'closeAll' | 'closeAlt' | 'close' | 'columnGraph' | 'comment' | 'connection0' | 'connection1' | 'connection2' | 'connection3' | 'connection4' | 'contentPaste' | 'copy' | 'cpmCyclesPerMinute' | 'dangerOutline' | 'danger' | 'defectFrequenciesAlt' | 'defectFrequencies' | 'deleteOutline' | 'delete' | 'devices' | 'directions' | 'doubleChevronLeft' | 'doubleChevronRight' | 'downloadDone' | 'download' | 'draftOutline' | 'draft' | 'dragDrop' | 'drop' | 'duplicate' | 'editOutline' | 'edit' | 'emailOutline' | 'emailPdf' | 'email' | 'errorOutline' | 'error' | 'exclamation' | 'facebook' | 'filterOutline' | 'filter' | 'findReplace' | 'forbidden' | 'frequencyHz' | 'fullScreen' | 'fullscreenExit' | 'functionalGroup' | 'hamburgerMenu' | 'harmonicCursor' | 'heatmap' | 'hierarchy' | 'history' | 'homeOutline' | 'home' | 'hourglassOutline' | 'hourglass' | 'image' | 'imx' | 'infoOutline' | 'info' | 'instagram' | 'integration' | 'iosShare' | 'kebabMore' | 'language' | 'lightbulbOutline' | 'lightbulb' | 'link' | 'linkedin' | 'listGroup' | 'list' | 'locationPin' | 'lockOutline' | 'lock' | 'logOut' | 'login' | 'meatballsMoreCircle' | 'meatballsMore' | 'microphone' | 'nearMe' | 'noData' | 'notificationsBellOutline' | 'notificationsBell' | 'o' | 'offer' | 'openInNew' | 'overlaysBaseline' | 'pan360' | 'paper' | 'pause' | 'pdfOutline' | 'pdf' | 'person' | 'photoCameraOutline' | 'photoCamera' | 'pieChart' | 'pinOutline' | 'pin' | 'play' | 'powerOff' | 'printOutline' | 'print' | 'privacyPolicyOutline' | 'privacyPolicy' | 'proCollect' | 'recAction' | 'refresh' | 'removeMinus' | 'reorder' | 'reply' | 'report' | 'rewakableRoute' | 'route' | 'search' | 'sendOutline' | 'send' | 'sensorAlt' | 'sensor' | 'settingsOutline' | 'settings' | 'share' | 'shoppingCart' | 'sidebandCursor' | 'singleCursor' | 'skfBearing' | 'spectrum' | 'starOutline' | 'star' | 'stop' | 'sync' | 'time' | 'timewave' | 'translate' | 'trend' | 'trendingUp' | 'twitter' | 'undo' | 'unknownDiamondOutline' | 'unknownDiamond' | 'unknownOutline' | 'unknown' | 'unlink' | 'unlockOutline' | 'unlock' | 'unscheduledAction' | 'upload' | 'vibrationAlt' | 'vibration' | 'view3D' | 'viewFull' | 'viewHorizontal' | 'viewVertical' | 'visibilityOffOutline' | 'visibilityOff' | 'visibilityOutline' | 'visibility' | 'warningDiamondOutline' | 'warningDiamond' | 'warningOutline' | 'warning' | 'youtube' | 'zoomIn' | 'zoomOut' | undefined"
+              }
             },
             {
               "kind": "field",
-              "name": "readonly",
+              "name": "vertical",
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "description": "If true, makes the element not mutable, meaning the user can not edit the control",
-              "attribute": "readonly"
+              "default": "false"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "href",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "href"
             },
             {
-              "kind": "field",
-              "name": "requiredLabel",
+              "name": "icon",
               "type": {
-                "text": "string | undefined"
+                "text": "Icon | undefined"
               },
-              "description": "If defined, renders an alternative A11y text for the asterisk",
-              "attribute": "required-label"
+              "fieldName": "icon",
+              "expandedType": {
+                "text": "'addCircleOutline' | 'addCircle' | 'addPlus' | 'arrowBackIos' | 'arrowBack' | 'arrowDown' | 'arrowForwardIos' | 'arrowForward' | 'arrowLeft' | 'arrowRight' | 'arrowUpDown' | 'arrowUp' | 'article' | 'asset' | 'attachment' | 'bandCursor' | 'bands' | 'batteryEmpty' | 'batteryFull' | 'batteryLow' | 'bearingFault' | 'bluetoothDisabled' | 'bluetooth' | 'book' | 'bookmarkOutline' | 'bookmark' | 'calculator' | 'calendarBusy' | 'calendarCheck' | 'calendarEmpty' | 'calendarMonth' | 'calendarReccuring' | 'call' | 'caretDown' | 'caretUpDown' | 'caretUp' | 'chat' | 'checkCircleOutline' | 'checkCircle' | 'checkSmall' | 'check' | 'chevronDownUp' | 'chevronDown' | 'chevronLeft' | 'chevronRight' | 'chevronUpDown' | 'chevronUp' | 'chip' | 'circleStatus' | 'closeAll' | 'closeAlt' | 'close' | 'columnGraph' | 'comment' | 'connection0' | 'connection1' | 'connection2' | 'connection3' | 'connection4' | 'contentPaste' | 'copy' | 'cpmCyclesPerMinute' | 'dangerOutline' | 'danger' | 'defectFrequenciesAlt' | 'defectFrequencies' | 'deleteOutline' | 'delete' | 'devices' | 'directions' | 'doubleChevronLeft' | 'doubleChevronRight' | 'downloadDone' | 'download' | 'draftOutline' | 'draft' | 'dragDrop' | 'drop' | 'duplicate' | 'editOutline' | 'edit' | 'emailOutline' | 'emailPdf' | 'email' | 'errorOutline' | 'error' | 'exclamation' | 'facebook' | 'filterOutline' | 'filter' | 'findReplace' | 'forbidden' | 'frequencyHz' | 'fullScreen' | 'fullscreenExit' | 'functionalGroup' | 'hamburgerMenu' | 'harmonicCursor' | 'heatmap' | 'hierarchy' | 'history' | 'homeOutline' | 'home' | 'hourglassOutline' | 'hourglass' | 'image' | 'imx' | 'infoOutline' | 'info' | 'instagram' | 'integration' | 'iosShare' | 'kebabMore' | 'language' | 'lightbulbOutline' | 'lightbulb' | 'link' | 'linkedin' | 'listGroup' | 'list' | 'locationPin' | 'lockOutline' | 'lock' | 'logOut' | 'login' | 'meatballsMoreCircle' | 'meatballsMore' | 'microphone' | 'nearMe' | 'noData' | 'notificationsBellOutline' | 'notificationsBell' | 'o' | 'offer' | 'openInNew' | 'overlaysBaseline' | 'pan360' | 'paper' | 'pause' | 'pdfOutline' | 'pdf' | 'person' | 'photoCameraOutline' | 'photoCamera' | 'pieChart' | 'pinOutline' | 'pin' | 'play' | 'powerOff' | 'printOutline' | 'print' | 'privacyPolicyOutline' | 'privacyPolicy' | 'proCollect' | 'recAction' | 'refresh' | 'removeMinus' | 'reorder' | 'reply' | 'report' | 'rewakableRoute' | 'route' | 'search' | 'sendOutline' | 'send' | 'sensorAlt' | 'sensor' | 'settingsOutline' | 'settings' | 'share' | 'shoppingCart' | 'sidebandCursor' | 'singleCursor' | 'skfBearing' | 'spectrum' | 'starOutline' | 'star' | 'stop' | 'sync' | 'time' | 'timewave' | 'translate' | 'trend' | 'trendingUp' | 'twitter' | 'undo' | 'unknownDiamondOutline' | 'unknownDiamond' | 'unknownOutline' | 'unknown' | 'unlink' | 'unlockOutline' | 'unlock' | 'unscheduledAction' | 'upload' | 'vibrationAlt' | 'vibration' | 'view3D' | 'viewFull' | 'viewHorizontal' | 'viewVertical' | 'visibilityOffOutline' | 'visibilityOff' | 'visibilityOutline' | 'visibility' | 'warningDiamondOutline' | 'warningDiamond' | 'warningOutline' | 'warning' | 'youtube' | 'zoomIn' | 'zoomOut' | undefined"
+              }
+            }
+          ],
+          "superclass": {
+            "name": "SkfElement",
+            "package": "@internal/components/skf-element"
+          },
+          "tagName": "skf-nav-item",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SkfNavItem",
+          "declaration": {
+            "name": "SkfNavItem",
+            "module": "src/components/nav/nav-item.component.ts"
+          }
+        }
+      ],
+      "typeDefinitionPath": "components/nav/nav-item.d.ts"
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/nav/nav.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The `<skf-nav>` is a component that displays a list of <nav-items>.",
+          "name": "SkfNav",
+          "slots": [
+            {
+              "description": "The component's main content",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "#internals",
+              "privacy": "private",
+              "type": {
+                "text": "ElementInternals"
+              }
             },
             {
               "kind": "field",
-              "name": "severity",
+              "name": "#states",
+              "privacy": "private",
               "type": {
-                "text": "FormFieldSeverity | undefined"
-              },
-              "description": "If defined, displays provided severity state",
-              "attribute": "severity",
-              "reflects": true
+                "text": "CustomStateSet"
+              }
             },
             {
               "kind": "field",
-              "name": "showValid",
+              "name": "vertical",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "If true, displays valid state after interaction",
-              "attribute": "show-valid"
-            },
+              "description": "If true, the navigation will be displayed vertically",
+              "attribute": "vertical"
+            }
+          ],
+          "attributes": [
             {
-              "kind": "field",
-              "name": "size",
+              "name": "vertical",
               "type": {
-                "text": "'sm' | 'md'"
+                "text": "boolean"
               },
-              "default": "'md'",
-              "description": "Size of the input",
-              "attribute": "size",
+              "default": "false",
+              "description": "If true, the navigation will be displayed vertically",
+              "fieldName": "vertical"
+            }
+          ],
+          "superclass": {
+            "name": "SkfElement",
+            "package": "@internal/components/skf-element"
+          },
+          "tagName": "skf-nav",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SkfNav",
+          "declaration": {
+            "name": "SkfNav",
+            "module": "src/components/nav/nav.component.ts"
+          }
+        }
+      ],
+      "typeDefinitionPath": "components/nav/nav.d.ts"
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/header/header.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The `<skf-header>` component is to be used as the site-header in the app. The navigation will be collapsed to mobile-view if the menu items exceed the available width.",
+          "name": "SkfHeader",
+          "slots": [
+            {
+              "description": "Navigation items",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "compact",
+              "description": "If true, sets header to display in compact mode only (hanburger menu and drawer)",
+              "attribute": "compact",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "trailing",
+              "name": "hamburgerAriaLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Show navigation'",
+              "description": "If defined, sets the aria-label for the hamburger button",
+              "attribute": "hamburger-aria-label"
+            },
+            {
+              "kind": "field",
+              "name": "siteName",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "If defined, displays a suffix/adornment after the input-element",
-              "attribute": "trailing"
+              "description": "If defined, sets the app or site's name",
+              "attribute": "site-name"
             },
             {
               "kind": "field",
-              "name": "type",
+              "name": "siteUrl",
               "type": {
-                "text": "'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url'"
+                "text": "string | undefined"
               },
-              "default": "'text'",
-              "description": "Type of input",
-              "attribute": "type"
+              "description": "If defined, sets the site's base-url for the \"logo-link\"",
+              "attribute": "site-url"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "compact",
+              "description": "If true, sets header to display in compact mode only (hanburger menu and drawer)",
+              "fieldName": "compact"
             },
             {
-              "kind": "field",
-              "name": "validateOn",
+              "name": "hamburger-aria-label",
               "type": {
-                "text": "'input' | 'change' | 'submit'"
+                "text": "string"
               },
-              "default": "'change'",
-              "description": "Sets validation start",
-              "attribute": "validate-on"
+              "default": "'Show navigation'",
+              "description": "If defined, sets the aria-label for the hamburger button",
+              "fieldName": "hamburgerAriaLabel"
             },
             {
-              "kind": "field",
-              "name": "value",
-              "description": "The current value of the input field",
-              "attribute": "value"
-            }
-          ],
-          "events": [
-            {
+              "name": "site-name",
               "type": {
-                "text": "CustomEvent"
+                "text": "string | undefined"
               },
-              "description": "Fires when the value of the input changes",
-              "name": "change"
+              "description": "If defined, sets the app or site's name",
+              "fieldName": "siteName"
             },
             {
+              "name": "site-url",
               "type": {
-                "text": "CustomEvent"
+                "text": "string | undefined"
               },
-              "description": "Fires when the input is invalid",
-              "name": "invalid"
+              "description": "If defined, sets the site's base-url for the \"logo-link\"",
+              "fieldName": "siteUrl"
             }
           ],
-          "attributes": [
+          "superclass": {
+            "name": "SkfElement",
+            "package": "@internal/components/skf-element"
+          },
+          "tagName": "skf-header",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SkfHeader",
+          "declaration": {
+            "name": "SkfHeader",
+            "module": "src/components/header/header.component.ts"
+          }
+        }
+      ],
+      "typeDefinitionPath": "components/header/header.d.ts"
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/input/input.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The skf-text-field is used to create a text input field. It can be used inside a form element or standalone\n\nSee [zeroheight](https://zeroheight.com/853e936c9/p/9481fa-input-field) for design principles",
+          "name": "SkfInput",
+          "slots": [
             {
-              "type": {
-                "text": "boolean"
-              },
-              "description": "If true, sets disabled state",
-              "name": "disabled",
-              "default": "false"
-            },
+              "description": "The Inputs label. Alternatively, you can use the `label` attribute.",
+              "name": ""
+            }
+          ],
+          "members": [
             {
+              "kind": "field",
+              "name": "customError",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "description": "If true, value is required or must be checked for the form to be submittable",
-              "name": "required",
-              "default": "false"
+              "privacy": "private"
             },
             {
+              "kind": "field",
               "name": "autocomplete",
               "type": {
                 "text": "HTMLInputElement['autocomplete'] | undefined"
               },
               "description": "Indicates whether the value of the control can be automatically completed by the browser. See\n[MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/autocomplete) for details.",
-              "fieldName": "autocomplete"
+              "attribute": "autocomplete"
             },
             {
-              "name": "button-aria-label-clear",
+              "kind": "field",
+              "name": "buttonAriaLabelClear",
               "type": {
                 "text": "string"
               },
               "default": "'Clear input'",
               "description": "Custom aria-label for the clear button. **Notice!** Only applicable to type=search.",
-              "fieldName": "buttonAriaLabelClear"
+              "attribute": "button-aria-label-clear"
             },
             {
-              "name": "button-aria-label-hide",
+              "kind": "field",
+              "name": "buttonAriaLabelHide",
               "type": {
                 "text": "string"
               },
               "default": "'Hide password'",
               "description": "Custom aria-label for the visibility button. **Notice!** Only applicable to type=password.",
-              "fieldName": "buttonAriaLabelHide"
+              "attribute": "button-aria-label-hide"
             },
             {
-              "name": "button-aria-label-show",
+              "kind": "field",
+              "name": "buttonAriaLabelShow",
               "type": {
                 "text": "string"
               },
               "default": "'Show password'",
               "description": "Custom aria-label for the visibility button **Notice!** Only applicable to type=password.",
-              "fieldName": "buttonAriaLabelShow"
+              "attribute": "button-aria-label-show"
             },
             {
-              "name": "custom-invalid",
+              "kind": "field",
+              "name": "customInvalid",
               "description": "If defined, forces component to invalid state until removed. Its value is used as hint text.",
-              "fieldName": "customInvalid"
+              "attribute": "custom-invalid",
+              "reflects": true
             },
             {
+              "kind": "field",
               "name": "debug",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "If true, outputs helping hints in console",
-              "fieldName": "debug"
+              "attribute": "debug"
             },
             {
-              "name": "hide-label",
+              "kind": "field",
+              "name": "hideLabel",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "If true, hides the label visually",
-              "fieldName": "hideLabel"
+              "attribute": "hide-label"
             },
             {
+              "kind": "field",
               "name": "hint",
               "type": {
                 "text": "string | undefined"
               },
               "description": "If defined, displays informational text below the field",
-              "fieldName": "hint"
+              "attribute": "hint"
             },
             {
+              "kind": "field",
               "name": "inputmode",
               "type": {
                 "text": "HTMLInputElement['inputMode']"
               },
               "default": "'text'",
               "description": "Provides a hint about the type of data that might be entered by the user while editing the element or its contents. See\n[MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inputMode) for details.",
-              "fieldName": "inputmode"
+              "attribute": "inputmode"
             },
             {
+              "kind": "field",
               "name": "label",
               "type": {
                 "text": "string | undefined"
               },
               "description": "If defined, sets the input's label. Alternatively, you can use the `label` attribute.",
-              "fieldName": "label"
+              "attribute": "label"
             },
             {
+              "kind": "field",
               "name": "leading",
               "type": {
                 "text": "string | undefined"
               },
               "description": "If defined, displays a prefix/adornment before the input-element",
-              "fieldName": "leading"
+              "attribute": "leading"
             },
             {
+              "kind": "field",
               "name": "max",
               "type": {
                 "text": "number | string | undefined"
               },
               "description": "If defined, sets the maximum value to accept for this input",
-              "fieldName": "max"
+              "attribute": "max"
             },
             {
-              "name": "maxlength",
+              "kind": "field",
+              "name": "maxLength",
               "type": {
                 "text": "number | undefined"
               },
               "description": "If defined, sets the maximum character length to accept for this input",
-              "fieldName": "maxLength"
+              "attribute": "maxlength"
             },
             {
+              "kind": "field",
               "name": "min",
               "type": {
                 "text": "number | string | undefined"
               },
               "description": "If defined, sets the minimum value to accept for this input",
-              "fieldName": "min"
+              "attribute": "min"
             },
             {
-              "name": "minlength",
+              "kind": "field",
+              "name": "minLength",
               "type": {
                 "text": "number | undefined"
               },
               "description": "If defined, sets the minimum character length to accept for this input",
-              "fieldName": "minLength"
+              "attribute": "minlength"
             },
             {
+              "kind": "field",
               "name": "name",
               "type": {
                 "text": "string | undefined"
               },
               "description": "If defined, adds name to the input-element",
-              "fieldName": "name"
+              "attribute": "name",
+              "reflects": true
             },
             {
+              "kind": "field",
               "name": "pattern",
               "type": {
                 "text": "string | undefined"
               },
               "description": "If defined, adds name to the input-element",
-              "fieldName": "pattern"
+              "attribute": "pattern"
             },
             {
+              "kind": "field",
               "name": "placeholder",
               "type": {
                 "text": "string | undefined"
               },
               "description": "If defined, displays placeholder text",
-              "fieldName": "placeholder"
+              "attribute": "placeholder"
             },
             {
+              "kind": "field",
               "name": "readonly",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "If true, makes the element not mutable, meaning the user can not edit the control",
-              "fieldName": "readonly"
+              "attribute": "readonly"
             },
             {
-              "name": "required-label",
+              "kind": "field",
+              "name": "requiredLabel",
               "type": {
                 "text": "string | undefined"
               },
               "description": "If defined, renders an alternative A11y text for the asterisk",
-              "fieldName": "requiredLabel"
+              "attribute": "required-label"
             },
             {
+              "kind": "field",
               "name": "severity",
               "type": {
                 "text": "FormFieldSeverity | undefined"
               },
               "description": "If defined, displays provided severity state",
-              "fieldName": "severity"
+              "attribute": "severity",
+              "reflects": true
             },
             {
-              "name": "show-valid",
+              "kind": "field",
+              "name": "showValid",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "If true, displays valid state after interaction",
-              "fieldName": "showValid"
+              "attribute": "show-valid"
             },
             {
+              "kind": "field",
               "name": "size",
               "type": {
                 "text": "'sm' | 'md'"
               },
               "default": "'md'",
               "description": "Size of the input",
-              "fieldName": "size"
+              "attribute": "size",
+              "reflects": true
             },
             {
+              "kind": "field",
               "name": "trailing",
               "type": {
                 "text": "string | undefined"
               },
               "description": "If defined, displays a suffix/adornment after the input-element",
-              "fieldName": "trailing"
+              "attribute": "trailing"
             },
             {
+              "kind": "field",
               "name": "type",
               "type": {
                 "text": "'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url'"
               },
               "default": "'text'",
               "description": "Type of input",
-              "fieldName": "type"
-            },
-            {
-              "name": "validate-on",
-              "type": {
-                "text": "'input' | 'change' | 'submit'"
-              },
-              "default": "'change'",
-              "description": "Sets validation start",
-              "fieldName": "validateOn"
-            },
-            {
-              "name": "value",
-              "description": "The current value of the input field",
-              "fieldName": "value"
-            }
-          ],
-          "superclass": {
-            "name": "FormBase",
-            "package": "@internal/components/formBase.js"
-          },
-          "tagName": "skf-input",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "SkfInput",
-          "declaration": {
-            "name": "SkfInput",
-            "module": "src/components/input/input.component.ts"
-          }
-        }
-      ],
-      "typeDefinitionPath": "components/input/input.d.ts"
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/link/link.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "The `<skf-link>` can be used as either a regular link or a link styled semantic button",
-          "name": "SkfLink",
-          "slots": [
-            {
-              "description": "The links' main content",
-              "name": ""
-            }
-          ],
-          "members": [
+              "attribute": "type"
+            },
             {
               "kind": "field",
-              "name": "classMap",
+              "name": "validateOn",
               "type": {
-                "text": "object"
+                "text": "'input' | 'change' | 'submit'"
               },
-              "static": true,
-              "default": "{}"
+              "default": "'change'",
+              "description": "Sets validation start",
+              "attribute": "validate-on"
             },
             {
               "kind": "field",
-              "name": "as",
+              "name": "value",
+              "description": "The current value of the input field",
+              "attribute": "value"
+            }
+          ],
+          "events": [
+            {
               "type": {
-                "text": "'button' | 'a'"
+                "text": "CustomEvent"
               },
-              "default": "'a'",
-              "description": "Defines the semantic element to render",
-              "attribute": "as",
-              "reflects": true
+              "description": "Fires when the value of the input changes",
+              "name": "change"
             },
             {
-              "kind": "field",
-              "name": "color",
               "type": {
-                "text": "'primary' | 'inverse'"
+                "text": "CustomEvent"
               },
-              "default": "'primary'",
-              "description": "Defines the text-color",
-              "attribute": "color",
-              "reflects": true
-            },
+              "description": "Fires when the input is invalid",
+              "name": "invalid"
+            }
+          ],
+          "attributes": [
             {
-              "kind": "field",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "If true, sets disabled state",
               "name": "disabled",
+              "default": "false"
+            },
+            {
               "type": {
                 "text": "boolean"
               },
-              "default": "false",
-              "description": "If true, disables the link",
-              "attribute": "disabled",
-              "reflects": true
+              "description": "If true, value is required or must be checked for the form to be submittable",
+              "name": "required",
+              "default": "false"
             },
             {
-              "kind": "field",
-              "name": "download",
+              "name": "autocomplete",
               "type": {
-                "text": "string | undefined"
+                "text": "HTMLInputElement['autocomplete'] | undefined"
               },
-              "description": "If defined, downloads the url",
-              "attribute": "download"
+              "description": "Indicates whether the value of the control can be automatically completed by the browser. See\n[MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/autocomplete) for details.",
+              "fieldName": "autocomplete"
             },
             {
-              "kind": "field",
-              "name": "href",
+              "name": "button-aria-label-clear",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "description": "If defined, loads url on click",
-              "attribute": "href"
+              "default": "'Clear input'",
+              "description": "Custom aria-label for the clear button. **Notice!** Only applicable to type=search.",
+              "fieldName": "buttonAriaLabelClear"
             },
             {
-              "kind": "field",
-              "name": "icon",
+              "name": "button-aria-label-hide",
               "type": {
-                "text": "Icon | undefined"
+                "text": "string"
               },
-              "description": "If defined, renders an icon before or after the text",
-              "attribute": "icon",
-              "expandedType": {
-                "text": "'addCircleOutline' | 'addCircle' | 'addPlus' | 'arrowBackIos' | 'arrowBack' | 'arrowDown' | 'arrowForwardIos' | 'arrowForward' | 'arrowLeft' | 'arrowRight' | 'arrowUpDown' | 'arrowUp' | 'article' | 'asset' | 'attachment' | 'bandCursor' | 'bands' | 'batteryEmpty' | 'batteryFull' | 'batteryLow' | 'bearingFault' | 'bluetoothDisabled' | 'bluetooth' | 'book' | 'bookmarkOutline' | 'bookmark' | 'calculator' | 'calendarBusy' | 'calendarCheck' | 'calendarEmpty' | 'calendarMonth' | 'calendarReccuring' | 'call' | 'caretDown' | 'caretUpDown' | 'caretUp' | 'chat' | 'checkCircleOutline' | 'checkCircle' | 'checkSmall' | 'check' | 'chevronDownUp' | 'chevronDown' | 'chevronLeft' | 'chevronRight' | 'chevronUpDown' | 'chevronUp' | 'chip' | 'circleStatus' | 'closeAll' | 'closeAlt' | 'close' | 'columnGraph' | 'comment' | 'connection0' | 'connection1' | 'connection2' | 'connection3' | 'connection4' | 'contentPaste' | 'copy' | 'cpmCyclesPerMinute' | 'dangerOutline' | 'danger' | 'defectFrequenciesAlt' | 'defectFrequencies' | 'deleteOutline' | 'delete' | 'devices' | 'directions' | 'doubleChevronLeft' | 'doubleChevronRight' | 'downloadDone' | 'download' | 'draftOutline' | 'draft' | 'dragDrop' | 'drop' | 'duplicate' | 'editOutline' | 'edit' | 'emailOutline' | 'emailPdf' | 'email' | 'errorOutline' | 'error' | 'exclamation' | 'facebook' | 'filterOutline' | 'filter' | 'findReplace' | 'forbidden' | 'frequencyHz' | 'fullScreen' | 'fullscreenExit' | 'functionalGroup' | 'hamburgerMenu' | 'harmonicCursor' | 'heatmap' | 'hierarchy' | 'history' | 'homeOutline' | 'home' | 'hourglassOutline' | 'hourglass' | 'image' | 'imx' | 'infoOutline' | 'info' | 'instagram' | 'integration' | 'iosShare' | 'kebabMore' | 'language' | 'lightbulbOutline' | 'lightbulb' | 'link' | 'linkedin' | 'listGroup' | 'list' | 'locationPin' | 'lockOutline' | 'lock' | 'logOut' | 'login' | 'meatballsMoreCircle' | 'meatballsMore' | 'microphone' | 'nearMe' | 'noData' | 'notificationsBellOutline' | 'notificationsBell' | 'o' | 'offer' | 'openInNew' | 'overlaysBaseline' | 'pan360' | 'paper' | 'pause' | 'pdfOutline' | 'pdf' | 'person' | 'photoCameraOutline' | 'photoCamera' | 'pieChart' | 'pinOutline' | 'pin' | 'play' | 'powerOff' | 'printOutline' | 'print' | 'privacyPolicyOutline' | 'privacyPolicy' | 'proCollect' | 'recAction' | 'refresh' | 'removeMinus' | 'reorder' | 'reply' | 'report' | 'rewakableRoute' | 'route' | 'search' | 'sendOutline' | 'send' | 'sensorAlt' | 'sensor' | 'settingsOutline' | 'settings' | 'share' | 'shoppingCart' | 'sidebandCursor' | 'singleCursor' | 'skfBearing' | 'spectrum' | 'starOutline' | 'star' | 'stop' | 'sync' | 'time' | 'timewave' | 'translate' | 'trend' | 'trendingUp' | 'twitter' | 'undo' | 'unknownDiamondOutline' | 'unknownDiamond' | 'unknownOutline' | 'unknown' | 'unlink' | 'unlockOutline' | 'unlock' | 'unscheduledAction' | 'upload' | 'vibrationAlt' | 'vibration' | 'view3D' | 'viewFull' | 'viewHorizontal' | 'viewVertical' | 'visibilityOffOutline' | 'visibilityOff' | 'visibilityOutline' | 'visibility' | 'warningDiamondOutline' | 'warningDiamond' | 'warningOutline' | 'warning' | 'youtube' | 'zoomIn' | 'zoomOut' | undefined"
-              }
+              "default": "'Hide password'",
+              "description": "Custom aria-label for the visibility button. **Notice!** Only applicable to type=password.",
+              "fieldName": "buttonAriaLabelHide"
             },
             {
-              "kind": "field",
-              "name": "iconPlacement",
+              "name": "button-aria-label-show",
               "type": {
-                "text": "'left' | 'right'"
+                "text": "string"
               },
-              "default": "'left'",
-              "description": "Defines the position of the icon in relation to the text",
-              "attribute": "icon-placement",
-              "reflects": true
+              "default": "'Show password'",
+              "description": "Custom aria-label for the visibility button **Notice!** Only applicable to type=password.",
+              "fieldName": "buttonAriaLabelShow"
             },
             {
-              "kind": "field",
-              "name": "onClick",
-              "description": "If defined, accepts a function that runs on click. Forwards optional route as second argument."
+              "name": "custom-invalid",
+              "description": "If defined, forces component to invalid state until removed. Its value is used as hint text.",
+              "fieldName": "customInvalid"
             },
             {
-              "kind": "field",
-              "name": "rel",
+              "name": "debug",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "If defined, describes the relationship between a linked resource and the current document",
-              "attribute": "rel"
+              "default": "false",
+              "description": "If true, outputs helping hints in console",
+              "fieldName": "debug"
             },
             {
-              "kind": "field",
-              "name": "route",
+              "name": "hide-label",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If true, hides the label visually",
+              "fieldName": "hideLabel"
+            },
+            {
+              "name": "hint",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "If defined, used on conjunction with onClick property, second argument",
-              "attribute": "route",
-              "reflects": true
+              "description": "If defined, displays informational text below the field",
+              "fieldName": "hint"
             },
             {
-              "kind": "field",
-              "name": "stretch",
+              "name": "inputmode",
               "type": {
-                "text": "boolean"
+                "text": "HTMLInputElement['inputMode']"
               },
-              "default": "false",
-              "description": "If true, fills the parents horizontal axis",
-              "attribute": "stretch",
-              "reflects": true
+              "default": "'text'",
+              "description": "Provides a hint about the type of data that might be entered by the user while editing the element or its contents. See\n[MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inputMode) for details.",
+              "fieldName": "inputmode"
             },
             {
-              "kind": "field",
-              "name": "target",
+              "name": "label",
               "type": {
-                "text": "'_blank' | '_parent' | '_self' | '_top' | undefined"
+                "text": "string | undefined"
               },
-              "description": "If defined, specifies where to open the linked document",
-              "attribute": "target"
+              "description": "If defined, sets the input's label. Alternatively, you can use the `label` attribute.",
+              "fieldName": "label"
             },
             {
-              "kind": "field",
-              "name": "type",
+              "name": "leading",
               "type": {
-                "text": "SkfLinkType"
+                "text": "string | undefined"
               },
-              "default": "'button'",
-              "description": "Defines the type of button",
-              "attribute": "type",
-              "expandedType": {
-                "text": "'submit' | 'reset' | 'button'"
-              }
-            }
-          ],
-          "attributes": [
+              "description": "If defined, displays a prefix/adornment before the input-element",
+              "fieldName": "leading"
+            },
             {
-              "name": "as",
+              "name": "max",
               "type": {
-                "text": "'button' | 'a'"
+                "text": "number | string | undefined"
               },
-              "default": "'a'",
-              "description": "Defines the semantic element to render",
-              "fieldName": "as"
+              "description": "If defined, sets the maximum value to accept for this input",
+              "fieldName": "max"
             },
             {
-              "name": "color",
+              "name": "maxlength",
               "type": {
-                "text": "'primary' | 'inverse'"
+                "text": "number | undefined"
               },
-              "default": "'primary'",
-              "description": "Defines the text-color",
-              "fieldName": "color"
+              "description": "If defined, sets the maximum character length to accept for this input",
+              "fieldName": "maxLength"
             },
             {
-              "name": "disabled",
+              "name": "min",
               "type": {
-                "text": "boolean"
+                "text": "number | string | undefined"
               },
-              "default": "false",
-              "description": "If true, disables the link",
-              "fieldName": "disabled"
+              "description": "If defined, sets the minimum value to accept for this input",
+              "fieldName": "min"
             },
             {
-              "name": "download",
+              "name": "minlength",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "If defined, sets the minimum character length to accept for this input",
+              "fieldName": "minLength"
+            },
+            {
+              "name": "name",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "If defined, downloads the url",
-              "fieldName": "download"
+              "description": "If defined, adds name to the input-element",
+              "fieldName": "name"
             },
             {
-              "name": "href",
+              "name": "pattern",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "If defined, loads url on click",
-              "fieldName": "href"
+              "description": "If defined, adds name to the input-element",
+              "fieldName": "pattern"
             },
             {
-              "name": "icon",
+              "name": "placeholder",
               "type": {
-                "text": "Icon | undefined"
+                "text": "string | undefined"
               },
-              "description": "If defined, renders an icon before or after the text",
-              "fieldName": "icon",
-              "expandedType": {
-                "text": "'addCircleOutline' | 'addCircle' | 'addPlus' | 'arrowBackIos' | 'arrowBack' | 'arrowDown' | 'arrowForwardIos' | 'arrowForward' | 'arrowLeft' | 'arrowRight' | 'arrowUpDown' | 'arrowUp' | 'article' | 'asset' | 'attachment' | 'bandCursor' | 'bands' | 'batteryEmpty' | 'batteryFull' | 'batteryLow' | 'bearingFault' | 'bluetoothDisabled' | 'bluetooth' | 'book' | 'bookmarkOutline' | 'bookmark' | 'calculator' | 'calendarBusy' | 'calendarCheck' | 'calendarEmpty' | 'calendarMonth' | 'calendarReccuring' | 'call' | 'caretDown' | 'caretUpDown' | 'caretUp' | 'chat' | 'checkCircleOutline' | 'checkCircle' | 'checkSmall' | 'check' | 'chevronDownUp' | 'chevronDown' | 'chevronLeft' | 'chevronRight' | 'chevronUpDown' | 'chevronUp' | 'chip' | 'circleStatus' | 'closeAll' | 'closeAlt' | 'close' | 'columnGraph' | 'comment' | 'connection0' | 'connection1' | 'connection2' | 'connection3' | 'connection4' | 'contentPaste' | 'copy' | 'cpmCyclesPerMinute' | 'dangerOutline' | 'danger' | 'defectFrequenciesAlt' | 'defectFrequencies' | 'deleteOutline' | 'delete' | 'devices' | 'directions' | 'doubleChevronLeft' | 'doubleChevronRight' | 'downloadDone' | 'download' | 'draftOutline' | 'draft' | 'dragDrop' | 'drop' | 'duplicate' | 'editOutline' | 'edit' | 'emailOutline' | 'emailPdf' | 'email' | 'errorOutline' | 'error' | 'exclamation' | 'facebook' | 'filterOutline' | 'filter' | 'findReplace' | 'forbidden' | 'frequencyHz' | 'fullScreen' | 'fullscreenExit' | 'functionalGroup' | 'hamburgerMenu' | 'harmonicCursor' | 'heatmap' | 'hierarchy' | 'history' | 'homeOutline' | 'home' | 'hourglassOutline' | 'hourglass' | 'image' | 'imx' | 'infoOutline' | 'info' | 'instagram' | 'integration' | 'iosShare' | 'kebabMore' | 'language' | 'lightbulbOutline' | 'lightbulb' | 'link' | 'linkedin' | 'listGroup' | 'list' | 'locationPin' | 'lockOutline' | 'lock' | 'logOut' | 'login' | 'meatballsMoreCircle' | 'meatballsMore' | 'microphone' | 'nearMe' | 'noData' | 'notificationsBellOutline' | 'notificationsBell' | 'o' | 'offer' | 'openInNew' | 'overlaysBaseline' | 'pan360' | 'paper' | 'pause' | 'pdfOutline' | 'pdf' | 'person' | 'photoCameraOutline' | 'photoCamera' | 'pieChart' | 'pinOutline' | 'pin' | 'play' | 'powerOff' | 'printOutline' | 'print' | 'privacyPolicyOutline' | 'privacyPolicy' | 'proCollect' | 'recAction' | 'refresh' | 'removeMinus' | 'reorder' | 'reply' | 'report' | 'rewakableRoute' | 'route' | 'search' | 'sendOutline' | 'send' | 'sensorAlt' | 'sensor' | 'settingsOutline' | 'settings' | 'share' | 'shoppingCart' | 'sidebandCursor' | 'singleCursor' | 'skfBearing' | 'spectrum' | 'starOutline' | 'star' | 'stop' | 'sync' | 'time' | 'timewave' | 'translate' | 'trend' | 'trendingUp' | 'twitter' | 'undo' | 'unknownDiamondOutline' | 'unknownDiamond' | 'unknownOutline' | 'unknown' | 'unlink' | 'unlockOutline' | 'unlock' | 'unscheduledAction' | 'upload' | 'vibrationAlt' | 'vibration' | 'view3D' | 'viewFull' | 'viewHorizontal' | 'viewVertical' | 'visibilityOffOutline' | 'visibilityOff' | 'visibilityOutline' | 'visibility' | 'warningDiamondOutline' | 'warningDiamond' | 'warningOutline' | 'warning' | 'youtube' | 'zoomIn' | 'zoomOut' | undefined"
-              }
+              "description": "If defined, displays placeholder text",
+              "fieldName": "placeholder"
             },
             {
-              "name": "icon-placement",
+              "name": "readonly",
               "type": {
-                "text": "'left' | 'right'"
+                "text": "boolean"
               },
-              "default": "'left'",
-              "description": "Defines the position of the icon in relation to the text",
-              "fieldName": "iconPlacement"
+              "default": "false",
+              "description": "If true, makes the element not mutable, meaning the user can not edit the control",
+              "fieldName": "readonly"
             },
             {
-              "name": "rel",
+              "name": "required-label",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "If defined, describes the relationship between a linked resource and the current document",
-              "fieldName": "rel"
+              "description": "If defined, renders an alternative A11y text for the asterisk",
+              "fieldName": "requiredLabel"
             },
             {
-              "name": "route",
+              "name": "severity",
               "type": {
-                "text": "string | undefined"
+                "text": "FormFieldSeverity | undefined"
               },
-              "description": "If defined, used on conjunction with onClick property, second argument",
-              "fieldName": "route"
+              "description": "If defined, displays provided severity state",
+              "fieldName": "severity"
             },
             {
-              "name": "stretch",
+              "name": "show-valid",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "If true, fills the parents horizontal axis",
-              "fieldName": "stretch"
+              "description": "If true, displays valid state after interaction",
+              "fieldName": "showValid"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "'sm' | 'md'"
+              },
+              "default": "'md'",
+              "description": "Size of the input",
+              "fieldName": "size"
+            },
+            {
+              "name": "trailing",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "If defined, displays a suffix/adornment after the input-element",
+              "fieldName": "trailing"
             },
             {
-              "name": "target",
+              "name": "type",
               "type": {
-                "text": "'_blank' | '_parent' | '_self' | '_top' | undefined"
+                "text": "'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'url'"
               },
-              "description": "If defined, specifies where to open the linked document",
-              "fieldName": "target"
+              "default": "'text'",
+              "description": "Type of input",
+              "fieldName": "type"
             },
             {
-              "name": "type",
+              "name": "validate-on",
               "type": {
-                "text": "SkfLinkType"
+                "text": "'input' | 'change' | 'submit'"
               },
-              "default": "'button'",
-              "description": "Defines the type of button",
-              "fieldName": "type",
-              "expandedType": {
-                "text": "'submit' | 'reset' | 'button'"
-              }
+              "default": "'change'",
+              "description": "Sets validation start",
+              "fieldName": "validateOn"
+            },
+            {
+              "name": "value",
+              "description": "The current value of the input field",
+              "fieldName": "value"
             }
           ],
           "superclass": {
-            "name": "SkfElement",
-            "package": "@internal/components/skf-element.js"
+            "name": "FormBase",
+            "package": "@internal/components/formBase.js"
           },
-          "tagName": "skf-link",
+          "tagName": "skf-input",
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "SkfLink",
+          "name": "SkfInput",
           "declaration": {
-            "name": "SkfLink",
-            "module": "src/components/link/link.component.ts"
+            "name": "SkfInput",
+            "module": "src/components/input/input.component.ts"
           }
         }
       ],
-      "typeDefinitionPath": "components/link/link.d.ts"
+      "typeDefinitionPath": "components/input/input.d.ts"
     },
     {
       "kind": "javascript-module",
@@ -4023,20 +4149,23 @@
           "members": [
             {
               "kind": "field",
-              "name": "role",
+              "name": "#internals",
+              "privacy": "private",
               "type": {
-                "text": "string"
+                "text": "ElementInternals"
               },
-              "default": "'menuitem'"
+              "inheritedFrom": {
+                "name": "SkfLink",
+                "module": "src/components/link/link.component.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "classMap",
+              "name": "#states",
+              "privacy": "private",
               "type": {
-                "text": "object"
+                "text": "CustomStateSet"
               },
-              "static": true,
-              "default": "{ 'menu-item': true }",
               "inheritedFrom": {
                 "name": "SkfLink",
                 "module": "src/components/link/link.component.ts"
@@ -4046,12 +4175,11 @@
               "kind": "field",
               "name": "as",
               "type": {
-                "text": "'button' | 'a'"
+                "text": "'button' | 'link'"
               },
-              "default": "'a'",
+              "default": "'link'",
               "description": "Defines the semantic element to render",
               "attribute": "as",
-              "reflects": true,
               "inheritedFrom": {
                 "name": "SkfLink",
                 "module": "src/components/link/link.component.ts"
@@ -4061,12 +4189,14 @@
               "kind": "field",
               "name": "color",
               "type": {
-                "text": "'primary' | 'inverse'"
+                "text": "Color"
               },
               "default": "'primary'",
               "description": "Defines the text-color",
               "attribute": "color",
-              "reflects": true,
+              "expandedType": {
+                "text": "'primary' | 'inverse'"
+              },
               "inheritedFrom": {
                 "name": "SkfLink",
                 "module": "src/components/link/link.component.ts"
@@ -4081,7 +4211,6 @@
               "default": "false",
               "description": "If true, disables the link",
               "attribute": "disabled",
-              "reflects": true,
               "inheritedFrom": {
                 "name": "SkfLink",
                 "module": "src/components/link/link.component.ts"
@@ -4091,8 +4220,9 @@
               "kind": "field",
               "name": "download",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
+              "default": "false",
               "description": "If defined, downloads the url",
               "attribute": "download",
               "inheritedFrom": {
@@ -4131,23 +4261,13 @@
             },
             {
               "kind": "field",
-              "name": "iconPlacement",
+              "name": "iconRight",
               "type": {
-                "text": "'left' | 'right'"
+                "text": "boolean"
               },
-              "default": "'left'",
-              "description": "Defines the position of the icon in relation to the text",
-              "attribute": "icon-placement",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "SkfLink",
-                "module": "src/components/link/link.component.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "onClick",
-              "description": "If defined, accepts a function that runs on click. Forwards optional route as second argument.",
+              "default": "false",
+              "description": "If true, the icon is placed to the right in relation to the text",
+              "attribute": "icon-right",
               "inheritedFrom": {
                 "name": "SkfLink",
                 "module": "src/components/link/link.component.ts"
@@ -4172,9 +4292,8 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "If defined, used on conjunction with onClick property, second argument",
+              "description": "If defined, used on conjunction with onClick property. **Notice!** Only applicable to as=button.",
               "attribute": "route",
-              "reflects": true,
               "inheritedFrom": {
                 "name": "SkfLink",
                 "module": "src/components/link/link.component.ts"
@@ -4189,7 +4308,6 @@
               "default": "false",
               "description": "If true, fills the parents horizontal axis",
               "attribute": "stretch",
-              "reflects": true,
               "inheritedFrom": {
                 "name": "SkfLink",
                 "module": "src/components/link/link.component.ts"
@@ -4209,17 +4327,8 @@
               }
             },
             {
-              "kind": "field",
-              "name": "type",
-              "type": {
-                "text": "SkfLinkType"
-              },
-              "default": "'button'",
-              "description": "Defines the type of button",
-              "attribute": "type",
-              "expandedType": {
-                "text": "'submit' | 'reset' | 'button'"
-              },
+              "kind": "method",
+              "name": "_handleAsChange",
               "inheritedFrom": {
                 "name": "SkfLink",
                 "module": "src/components/link/link.component.ts"
@@ -4236,9 +4345,9 @@
             {
               "name": "as",
               "type": {
-                "text": "'button' | 'a'"
+                "text": "'button' | 'link'"
               },
-              "default": "'a'",
+              "default": "'link'",
               "description": "Defines the semantic element to render",
               "fieldName": "as",
               "inheritedFrom": {
@@ -4249,11 +4358,14 @@
             {
               "name": "color",
               "type": {
-                "text": "'primary' | 'inverse'"
+                "text": "Color"
               },
               "default": "'primary'",
               "description": "Defines the text-color",
               "fieldName": "color",
+              "expandedType": {
+                "text": "'primary' | 'inverse'"
+              },
               "inheritedFrom": {
                 "name": "SkfLink",
                 "module": "src/components/link/link.component.ts"
@@ -4275,8 +4387,9 @@
             {
               "name": "download",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
+              "default": "false",
               "description": "If defined, downloads the url",
               "fieldName": "download",
               "inheritedFrom": {
@@ -4312,13 +4425,13 @@
               }
             },
             {
-              "name": "icon-placement",
+              "name": "icon-right",
               "type": {
-                "text": "'left' | 'right'"
+                "text": "boolean"
               },
-              "default": "'left'",
-              "description": "Defines the position of the icon in relation to the text",
-              "fieldName": "iconPlacement",
+              "default": "false",
+              "description": "If true, the icon is placed to the right in relation to the text",
+              "fieldName": "iconRight",
               "inheritedFrom": {
                 "name": "SkfLink",
                 "module": "src/components/link/link.component.ts"
@@ -4341,7 +4454,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "If defined, used on conjunction with onClick property, second argument",
+              "description": "If defined, used on conjunction with onClick property. **Notice!** Only applicable to as=button.",
               "fieldName": "route",
               "inheritedFrom": {
                 "name": "SkfLink",
@@ -4372,18 +4485,15 @@
                 "name": "SkfLink",
                 "module": "src/components/link/link.component.ts"
               }
-            },
+            }
+          ],
+          "events": [
             {
-              "name": "type",
               "type": {
-                "text": "SkfLinkType"
-              },
-              "default": "'button'",
-              "description": "Defines the type of button",
-              "fieldName": "type",
-              "expandedType": {
-                "text": "'submit' | 'reset' | 'button'"
+                "text": "CustomEvent"
               },
+              "description": "Fired when the link is clicked",
+              "name": "skf-link-click",
               "inheritedFrom": {
                 "name": "SkfLink",
                 "module": "src/components/link/link.component.ts"
@@ -4472,83 +4582,6 @@
       ],
       "typeDefinitionPath": "components/menu/menu.d.ts"
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/nav/nav-item.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "The `<skf-nav>` is a component that displays a list of <nav-items>.",
-          "name": "SkfNavItem",
-          "slots": [
-            {
-              "description": "The component's main content",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "href",
-              "type": {
-                "text": "string"
-              },
-              "default": "'#'",
-              "attribute": "href",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "icon",
-              "type": {
-                "text": "Icon | undefined"
-              },
-              "attribute": "icon",
-              "expandedType": {
-                "text": "'addCircleOutline' | 'addCircle' | 'addPlus' | 'arrowBackIos' | 'arrowBack' | 'arrowDown' | 'arrowForwardIos' | 'arrowForward' | 'arrowLeft' | 'arrowRight' | 'arrowUpDown' | 'arrowUp' | 'article' | 'asset' | 'attachment' | 'bandCursor' | 'bands' | 'batteryEmpty' | 'batteryFull' | 'batteryLow' | 'bearingFault' | 'bluetoothDisabled' | 'bluetooth' | 'book' | 'bookmarkOutline' | 'bookmark' | 'calculator' | 'calendarBusy' | 'calendarCheck' | 'calendarEmpty' | 'calendarMonth' | 'calendarReccuring' | 'call' | 'caretDown' | 'caretUpDown' | 'caretUp' | 'chat' | 'checkCircleOutline' | 'checkCircle' | 'checkSmall' | 'check' | 'chevronDownUp' | 'chevronDown' | 'chevronLeft' | 'chevronRight' | 'chevronUpDown' | 'chevronUp' | 'chip' | 'circleStatus' | 'closeAll' | 'closeAlt' | 'close' | 'columnGraph' | 'comment' | 'connection0' | 'connection1' | 'connection2' | 'connection3' | 'connection4' | 'contentPaste' | 'copy' | 'cpmCyclesPerMinute' | 'dangerOutline' | 'danger' | 'defectFrequenciesAlt' | 'defectFrequencies' | 'deleteOutline' | 'delete' | 'devices' | 'directions' | 'doubleChevronLeft' | 'doubleChevronRight' | 'downloadDone' | 'download' | 'draftOutline' | 'draft' | 'dragDrop' | 'drop' | 'duplicate' | 'editOutline' | 'edit' | 'emailOutline' | 'emailPdf' | 'email' | 'errorOutline' | 'error' | 'exclamation' | 'facebook' | 'filterOutline' | 'filter' | 'findReplace' | 'forbidden' | 'frequencyHz' | 'fullScreen' | 'fullscreenExit' | 'functionalGroup' | 'hamburgerMenu' | 'harmonicCursor' | 'heatmap' | 'hierarchy' | 'history' | 'homeOutline' | 'home' | 'hourglassOutline' | 'hourglass' | 'image' | 'imx' | 'infoOutline' | 'info' | 'instagram' | 'integration' | 'iosShare' | 'kebabMore' | 'language' | 'lightbulbOutline' | 'lightbulb' | 'link' | 'linkedin' | 'listGroup' | 'list' | 'locationPin' | 'lockOutline' | 'lock' | 'logOut' | 'login' | 'meatballsMoreCircle' | 'meatballsMore' | 'microphone' | 'nearMe' | 'noData' | 'notificationsBellOutline' | 'notificationsBell' | 'o' | 'offer' | 'openInNew' | 'overlaysBaseline' | 'pan360' | 'paper' | 'pause' | 'pdfOutline' | 'pdf' | 'person' | 'photoCameraOutline' | 'photoCamera' | 'pieChart' | 'pinOutline' | 'pin' | 'play' | 'powerOff' | 'printOutline' | 'print' | 'privacyPolicyOutline' | 'privacyPolicy' | 'proCollect' | 'recAction' | 'refresh' | 'removeMinus' | 'reorder' | 'reply' | 'report' | 'rewakableRoute' | 'route' | 'search' | 'sendOutline' | 'send' | 'sensorAlt' | 'sensor' | 'settingsOutline' | 'settings' | 'share' | 'shoppingCart' | 'sidebandCursor' | 'singleCursor' | 'skfBearing' | 'spectrum' | 'starOutline' | 'star' | 'stop' | 'sync' | 'time' | 'timewave' | 'translate' | 'trend' | 'trendingUp' | 'twitter' | 'undo' | 'unknownDiamondOutline' | 'unknownDiamond' | 'unknownOutline' | 'unknown' | 'unlink' | 'unlockOutline' | 'unlock' | 'unscheduledAction' | 'upload' | 'vibrationAlt' | 'vibration' | 'view3D' | 'viewFull' | 'viewHorizontal' | 'viewVertical' | 'visibilityOffOutline' | 'visibilityOff' | 'visibilityOutline' | 'visibility' | 'warningDiamondOutline' | 'warningDiamond' | 'warningOutline' | 'warning' | 'youtube' | 'zoomIn' | 'zoomOut' | undefined"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "href",
-              "type": {
-                "text": "string"
-              },
-              "default": "'#'",
-              "fieldName": "href"
-            },
-            {
-              "name": "icon",
-              "type": {
-                "text": "Icon | undefined"
-              },
-              "fieldName": "icon",
-              "expandedType": {
-                "text": "'addCircleOutline' | 'addCircle' | 'addPlus' | 'arrowBackIos' | 'arrowBack' | 'arrowDown' | 'arrowForwardIos' | 'arrowForward' | 'arrowLeft' | 'arrowRight' | 'arrowUpDown' | 'arrowUp' | 'article' | 'asset' | 'attachment' | 'bandCursor' | 'bands' | 'batteryEmpty' | 'batteryFull' | 'batteryLow' | 'bearingFault' | 'bluetoothDisabled' | 'bluetooth' | 'book' | 'bookmarkOutline' | 'bookmark' | 'calculator' | 'calendarBusy' | 'calendarCheck' | 'calendarEmpty' | 'calendarMonth' | 'calendarReccuring' | 'call' | 'caretDown' | 'caretUpDown' | 'caretUp' | 'chat' | 'checkCircleOutline' | 'checkCircle' | 'checkSmall' | 'check' | 'chevronDownUp' | 'chevronDown' | 'chevronLeft' | 'chevronRight' | 'chevronUpDown' | 'chevronUp' | 'chip' | 'circleStatus' | 'closeAll' | 'closeAlt' | 'close' | 'columnGraph' | 'comment' | 'connection0' | 'connection1' | 'connection2' | 'connection3' | 'connection4' | 'contentPaste' | 'copy' | 'cpmCyclesPerMinute' | 'dangerOutline' | 'danger' | 'defectFrequenciesAlt' | 'defectFrequencies' | 'deleteOutline' | 'delete' | 'devices' | 'directions' | 'doubleChevronLeft' | 'doubleChevronRight' | 'downloadDone' | 'download' | 'draftOutline' | 'draft' | 'dragDrop' | 'drop' | 'duplicate' | 'editOutline' | 'edit' | 'emailOutline' | 'emailPdf' | 'email' | 'errorOutline' | 'error' | 'exclamation' | 'facebook' | 'filterOutline' | 'filter' | 'findReplace' | 'forbidden' | 'frequencyHz' | 'fullScreen' | 'fullscreenExit' | 'functionalGroup' | 'hamburgerMenu' | 'harmonicCursor' | 'heatmap' | 'hierarchy' | 'history' | 'homeOutline' | 'home' | 'hourglassOutline' | 'hourglass' | 'image' | 'imx' | 'infoOutline' | 'info' | 'instagram' | 'integration' | 'iosShare' | 'kebabMore' | 'language' | 'lightbulbOutline' | 'lightbulb' | 'link' | 'linkedin' | 'listGroup' | 'list' | 'locationPin' | 'lockOutline' | 'lock' | 'logOut' | 'login' | 'meatballsMoreCircle' | 'meatballsMore' | 'microphone' | 'nearMe' | 'noData' | 'notificationsBellOutline' | 'notificationsBell' | 'o' | 'offer' | 'openInNew' | 'overlaysBaseline' | 'pan360' | 'paper' | 'pause' | 'pdfOutline' | 'pdf' | 'person' | 'photoCameraOutline' | 'photoCamera' | 'pieChart' | 'pinOutline' | 'pin' | 'play' | 'powerOff' | 'printOutline' | 'print' | 'privacyPolicyOutline' | 'privacyPolicy' | 'proCollect' | 'recAction' | 'refresh' | 'removeMinus' | 'reorder' | 'reply' | 'report' | 'rewakableRoute' | 'route' | 'search' | 'sendOutline' | 'send' | 'sensorAlt' | 'sensor' | 'settingsOutline' | 'settings' | 'share' | 'shoppingCart' | 'sidebandCursor' | 'singleCursor' | 'skfBearing' | 'spectrum' | 'starOutline' | 'star' | 'stop' | 'sync' | 'time' | 'timewave' | 'translate' | 'trend' | 'trendingUp' | 'twitter' | 'undo' | 'unknownDiamondOutline' | 'unknownDiamond' | 'unknownOutline' | 'unknown' | 'unlink' | 'unlockOutline' | 'unlock' | 'unscheduledAction' | 'upload' | 'vibrationAlt' | 'vibration' | 'view3D' | 'viewFull' | 'viewHorizontal' | 'viewVertical' | 'visibilityOffOutline' | 'visibilityOff' | 'visibilityOutline' | 'visibility' | 'warningDiamondOutline' | 'warningDiamond' | 'warningOutline' | 'warning' | 'youtube' | 'zoomIn' | 'zoomOut' | undefined"
-              }
-            }
-          ],
-          "superclass": {
-            "name": "SkfElement",
-            "package": "@internal/components/skf-element"
-          },
-          "tagName": "skf-nav-item",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "SkfNavItem",
-          "declaration": {
-            "name": "SkfNavItem",
-            "module": "src/components/nav/nav-item.component.ts"
-          }
-        }
-      ],
-      "typeDefinitionPath": "components/nav/nav-item.d.ts"
-    },
     {
       "kind": "javascript-module",
       "path": "components/popover/popover.js",
@@ -4674,6 +4707,22 @@
               "static": true,
               "default": "true"
             },
+            {
+              "kind": "field",
+              "name": "#internals",
+              "privacy": "private",
+              "type": {
+                "text": "ElementInternals"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#states",
+              "privacy": "private",
+              "type": {
+                "text": "CustomStateSet"
+              }
+            },
             {
               "kind": "field",
               "name": "animated",
@@ -4682,8 +4731,7 @@
               },
               "default": "false",
               "description": "If true, the progress-bar's fill value is animated",
-              "attribute": "animated",
-              "reflects": true
+              "attribute": "animated"
             },
             {
               "kind": "field",
@@ -5190,6 +5238,22 @@
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "#internals",
+              "privacy": "private",
+              "type": {
+                "text": "ElementInternals"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#states",
+              "privacy": "private",
+              "type": {
+                "text": "CustomStateSet"
+              }
+            },
             {
               "kind": "field",
               "name": "label",
@@ -5199,6 +5263,14 @@
               "default": "'Default label'",
               "attribute": "label",
               "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "small",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
             }
           ],
           "attributes": [
@@ -5552,6 +5624,10 @@
               "name": "value",
               "description": "Read only, returns the selected value. (if multiple: in a comma separated string)"
             },
+            {
+              "kind": "method",
+              "name": "_handleSizeUpdate"
+            },
             {
               "kind": "method",
               "name": "handleExpandedChange"
@@ -5786,6 +5862,22 @@
               "static": true,
               "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true }"
             },
+            {
+              "kind": "field",
+              "name": "#internals",
+              "privacy": "private",
+              "type": {
+                "text": "ElementInternals"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#states",
+              "privacy": "private",
+              "type": {
+                "text": "CustomStateSet"
+              }
+            },
             {
               "kind": "field",
               "name": "disabled",
@@ -5856,6 +5948,14 @@
               "attribute": "value",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "small",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
             {
               "kind": "field",
               "name": "role",