@skf-design-system/ui-components 1.0.0-beta.5 → 1.0.1-beta.0

package/dist/vscode.html-custom-data.json

@@ -48,11 +48,6 @@
       "name": "skf-alert",
       "description": "The `<skf-alert>` is a type of notification that appears in-line\n---\n\n\n### **Events:**\n - **skf-alert-close** - Fires when the close button is clicked\n\n### **Slots:**\n - _default_ - Alert message. **Notice!** See design principles for approved content\n- **link** - Slot for the link",
       "attributes": [
-        {
-          "name": "closeable",
-          "description": "If true, alert is being used as a toast (alertdialog) with an close button",
-          "values": []
-        },
         {
           "name": "button-label",
           "description": "Close button aria-label",
@@ -63,6 +58,11 @@
           "description": "If defined, displays leading icon",
           "values": [{ "name": "SkfIcon['name']" }]
         },
+        {
+          "name": "persistent",
+          "description": "If true, renders with an close button and sets aria-role to `status`",
+          "values": []
+        },
         {
           "name": "severity",
           "description": "If defined, gives the supplied appearance",
@@ -77,9 +77,38 @@
       ],
       "references": []
     },
+    {
+      "name": "skf-breadcrumb",
+      "description": "The `<skf-breadcrumb>` component consists of multiple `<skf-breadcrumb-item>`, working together.\n---\n\n\n### **Events:**\n - **click** - Fired when the item is clicked\n\n### **Slots:**\n - _default_ - One or more `<skf-breadcrumb-item>`",
+      "attributes": [
+        {
+          "name": "label",
+          "description": "aria-label for the breadcrumb control",
+          "values": []
+        },
+        {
+          "name": "size",
+          "description": "Displays an alternative size",
+          "values": [{ "name": "md" }, { "name": "sm" }]
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "skf-breadcrumb-item",
+      "description": "The `<skf-breadcrumb-item>` is used in conjunction with the `<skf-breadcrumb>` component\n---\n\n\n### **Slots:**\n - _default_ - Label of the breadcrumb item",
+      "attributes": [
+        {
+          "name": "href",
+          "description": "If defined, loads url on click",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "skf-button",
-      "description": "Component to be used in forms or for interactivity\n---\n\n\n### **Slots:**\n - _default_ - The Primary content",
+      "description": "Component to be used in forms or for interactivity\n---\n\n\n### **Events:**\n - **click** - Fires when the button is clicked\n\n### **Methods:**\n - **click()** - Simulates a click on the button.\n\n### **Slots:**\n - _default_ - The Primary content",
       "attributes": [
         {
           "name": "destructive",
@@ -248,6 +277,11 @@
             { "name": "zoomOut" }
           ]
         },
+        {
+          "name": "iconOnly",
+          "description": "If true, removes border",
+          "values": []
+        },
         {
           "name": "icon-position",
           "description": "If provided, determines the positioning of the icon in relation to the text",
@@ -258,6 +292,7 @@
           "description": "If true, hides text & icon and shows loading indicator. **Notice!** Only applicable if `variant` is `primary`.",
           "values": []
         },
+        { "name": "no-validate", "values": [] },
         {
           "name": "size",
           "description": "If provided, displays an alternative size",
@@ -275,7 +310,11 @@
         {
           "name": "variant",
           "description": "If provided, alters the appearance",
-          "values": [{ "name": "primary" }, { "name": "secondary" }]
+          "values": [
+            { "name": "primary" },
+            { "name": "secondary" },
+            { "name": "tertiary" }
+          ]
         }
       ],
       "references": []
@@ -331,11 +370,6 @@
           "description": "If true, forces component to invalid state until removed",
           "values": []
         },
-        {
-          "name": "hide-label",
-          "description": "If true, hides the label visually",
-          "values": []
-        },
         {
           "name": "indeterminate",
           "description": "If true and the checkbox is unchecked, the checkbox will appear indeterminate",
@@ -406,12 +440,7 @@
         {
           "name": "heading-as",
           "description": "Defines which heading element will be rendered",
-          "values": [
-            { "name": "h1" },
-            { "name": "h2" },
-            { "name": "h3" },
-            { "name": "h4" }
-          ]
+          "values": [{ "name": "h2" }, { "name": "h3" }, { "name": "h4" }]
         },
         {
           "name": "small",
@@ -426,6 +455,39 @@
       ],
       "references": []
     },
+    {
+      "name": "skf-dialog",
+      "description": "The `<skf-dialog>` is a component that open up a dialog with the content provided\n---\n\n\n### **Events:**\n - **skf-dialog-open** - Fires when the dialog is opened (after transitioned in)\n- **skf-dialog-close** - Fires when the dialog is closed (before transitioned out)\n- **close** - Fires when the dialog is closed (after transitioned out)\n\n### **Slots:**\n - _default_ - The dialog component's content\n- **footer** - The dialog component's buttons goes here\n\n### **CSS Properties:**\n - **--skf-dialog-height** - A custom height for the Dialog. Pass valid CSS **block-size** values _(default: undefined)_\n- **--skf-dialog-width** - A custom width for the Dialog Pass valid CSS **inline-size** values _(default: undefined)_",
+      "attributes": [
+        {
+          "name": "close-button-aria-label",
+          "description": "If defined, sets the aria-label for the close button",
+          "values": []
+        },
+        {
+          "name": "heading",
+          "description": "Title for the modal/dialog",
+          "values": []
+        },
+        {
+          "name": "fullscreen",
+          "description": "If true, makes the dialog stretch edge to edge on screen",
+          "values": []
+        },
+        {
+          "name": "no-close-button",
+          "description": "If true, removes the close button",
+          "values": []
+        },
+        {
+          "name": "no-padding",
+          "description": "If defined, removes the inner padding",
+          "values": []
+        },
+        { "name": "open", "values": [] }
+      ],
+      "references": []
+    },
     {
       "name": "skf-divider",
       "description": "The `<Divider>` component can separate items from each other, to visually emphasize their lack of a relationship between groups of information\n---\n\n\n### **CSS Properties:**\n - **--skf-divider-spacing** - The amount of space the divider occupies. Pass valid CSS **margin-block** values when horizontal and **margin-inline** when vertical _(default: undefined)_\n- **--skf-divider-inset** - The amount of space the divider should be indented. Pass valid CSS **margin-inline** values when horizontal and **margin-block** when vertical _(default: undefined)_",
@@ -689,6 +751,7 @@
           "description": "If true, value is required or must be checked for the form to be submittable",
           "values": []
         },
+        { "name": "autocomplete", "description": "-m  }", "values": [] },
         {
           "name": "button-aria-label-clear",
           "description": "Custom aria-label for the clear button. **Notice!** Only applicable to type=search.",
@@ -1054,7 +1117,7 @@
         },
         {
           "name": "rel",
-          "description": "Defines the relationship of the target object to the link object",
+          "description": "If defined, describes the relationship between a linked resource and the current document",
           "values": []
         },
         {
@@ -1122,7 +1185,7 @@
         },
         {
           "name": "color",
-          "description": "If defined, sets color of the logo",
+          "description": "Defines the color of the logo",
           "values": [
             { "name": "primary" },
             { "name": "secondary" },
@@ -1132,6 +1195,279 @@
       ],
       "references": []
     },
+    {
+      "name": "skf-menu",
+      "description": "The `<skf-menu>` is a component that displays a list of actions or options.\n---\n\n\n### **Events:**\n - **open** - Fired when the menu is opened\n- **close** - Fired when the menu is closed\n\n### **Slots:**\n - _default_ - The menu popover content",
+      "attributes": [],
+      "references": []
+    },
+    {
+      "name": "skf-menu-item",
+      "description": "The `<skf-menu-item>` is a component that displays a list of actions or options.\n---\n\n\n### **Events:**\n - **my-tag-my-event** - Fired when something happens\n- **click** - Fired when the component is clicked\n- **mouseover** - Fired when the mouse is over the component\n- **mouseout** - Fired when the mouse is out of the component\n- **focus** - Fired when the component is focused\n- **blur** - Fired when the component is blurred\n- **change** - Fired when the component's value changes\n\n### **Slots:**\n - _default_ - The component's main content\n- **my-named-slot** - A named slot of the component",
+      "attributes": [
+        {
+          "name": "as",
+          "description": "Defines the semantic element to render",
+          "values": [{ "name": "button" }, { "name": "a" }]
+        },
+        {
+          "name": "color",
+          "description": "Defines the text-color",
+          "values": [{ "name": "primary" }, { "name": "inverse" }]
+        },
+        {
+          "name": "disabled",
+          "description": "If true, disables the link",
+          "values": []
+        },
+        {
+          "name": "download",
+          "description": "If defined, downloads the url",
+          "values": []
+        },
+        {
+          "name": "href",
+          "description": "If defined, loads url on click",
+          "values": []
+        },
+        {
+          "name": "icon",
+          "description": "If defined, renders an icon before or after the text",
+          "values": [
+            { "name": "arrowDown" },
+            { "name": "arrowDownUp" },
+            { "name": "arrowLeft" },
+            { "name": "arrowRight" },
+            { "name": "arrowUp" },
+            { "name": "article" },
+            { "name": "artificialIntelligence" },
+            { "name": "asset" },
+            { "name": "attachment" },
+            { "name": "bandCursor" },
+            { "name": "bands" },
+            { "name": "batteryEmpty" },
+            { "name": "batteryFull" },
+            { "name": "batteryLow" },
+            { "name": "bearingFault" },
+            { "name": "book" },
+            { "name": "bulb" },
+            { "name": "burger" },
+            { "name": "cPM" },
+            { "name": "calendar" },
+            { "name": "calendarBooked" },
+            { "name": "calendarEmpty" },
+            { "name": "calendarNotBooked" },
+            { "name": "calendarRecurring" },
+            { "name": "caretDown" },
+            { "name": "caretUp" },
+            { "name": "caretUpDown" },
+            { "name": "chat" },
+            { "name": "check" },
+            { "name": "checkCircle" },
+            { "name": "checkSmall" },
+            { "name": "chevronDown" },
+            { "name": "chevronLeft" },
+            { "name": "chevronRight" },
+            { "name": "chevronUp" },
+            { "name": "chevronUpDown" },
+            { "name": "close" },
+            { "name": "closeAllFaults" },
+            { "name": "closeFault" },
+            { "name": "closeSmall" },
+            { "name": "columnGraph" },
+            { "name": "comment" },
+            { "name": "connection1" },
+            { "name": "connection2" },
+            { "name": "connection3" },
+            { "name": "connection4" },
+            { "name": "danger" },
+            { "name": "defectFrequencies" },
+            { "name": "defectFrequenciesAlternative" },
+            { "name": "doubleChevronLeft" },
+            { "name": "doubleChevronRight" },
+            { "name": "download" },
+            { "name": "draft" },
+            { "name": "draftFilled" },
+            { "name": "draftOutlined" },
+            { "name": "dragNDrop" },
+            { "name": "drop" },
+            { "name": "duplicate" },
+            { "name": "edit" },
+            { "name": "emailFilled" },
+            { "name": "emailOutlined" },
+            { "name": "exclamation" },
+            { "name": "eye" },
+            { "name": "eyeHidden" },
+            { "name": "eyeVisible" },
+            { "name": "filter" },
+            { "name": "forbidden" },
+            { "name": "fullScreen" },
+            { "name": "fullScreenExit" },
+            { "name": "functionalLocation" },
+            { "name": "harmonicCursor" },
+            { "name": "heatmap" },
+            { "name": "hierarchy" },
+            { "name": "history" },
+            { "name": "historyAlt" },
+            { "name": "hourglassFramedFilled" },
+            { "name": "hourglassFramedOutlined" },
+            { "name": "hourglassOutlined" },
+            { "name": "hz" },
+            { "name": "iMX" },
+            { "name": "image" },
+            { "name": "infoCircleFilled" },
+            { "name": "infoCircleOutlined" },
+            { "name": "integration" },
+            { "name": "kebab" },
+            { "name": "link" },
+            { "name": "listGroup" },
+            { "name": "listItem" },
+            { "name": "locationPin" },
+            { "name": "lock" },
+            { "name": "logOut" },
+            { "name": "meatballs" },
+            { "name": "microphone" },
+            { "name": "minus" },
+            { "name": "minusSmall" },
+            { "name": "noData" },
+            { "name": "o" },
+            { "name": "openInNew" },
+            { "name": "overlayBaseline" },
+            { "name": "pDF" },
+            { "name": "paper" },
+            { "name": "pause" },
+            { "name": "pieChart" },
+            { "name": "pin" },
+            { "name": "play" },
+            { "name": "plus" },
+            { "name": "powerOff" },
+            { "name": "printer" },
+            { "name": "proCollect" },
+            { "name": "recAction" },
+            { "name": "received" },
+            { "name": "refresh" },
+            { "name": "reorder" },
+            { "name": "replace" },
+            { "name": "reply" },
+            { "name": "rewalkableRoute" },
+            { "name": "routes" },
+            { "name": "search" },
+            { "name": "send" },
+            { "name": "sensorA" },
+            { "name": "sensorB" },
+            { "name": "settings" },
+            { "name": "sidebandCursor" },
+            { "name": "singleCursor" },
+            { "name": "spectrum" },
+            { "name": "starFilled" },
+            { "name": "starOutlined" },
+            { "name": "statusCircle" },
+            { "name": "stop" },
+            { "name": "structuralVibration" },
+            { "name": "sync" },
+            { "name": "timewave" },
+            { "name": "trash" },
+            { "name": "trend" },
+            { "name": "trendingUp" },
+            { "name": "undo" },
+            { "name": "unknownCircle" },
+            { "name": "unknownDiamond" },
+            { "name": "unlink" },
+            { "name": "unlock" },
+            { "name": "unscheduledAction" },
+            { "name": "upload" },
+            { "name": "user" },
+            { "name": "viewFull" },
+            { "name": "viewHorizontal" },
+            { "name": "viewVertical" },
+            { "name": "warning" },
+            { "name": "warningCircle" },
+            { "name": "warningDiamond" },
+            { "name": "zoomIn" },
+            { "name": "zoomOut" }
+          ]
+        },
+        {
+          "name": "icon-placement",
+          "description": "Defines the position of the icon in relation to the text",
+          "values": [{ "name": "left" }, { "name": "right" }]
+        },
+        {
+          "name": "rel",
+          "description": "If defined, describes the relationship between a linked resource and the current document",
+          "values": []
+        },
+        {
+          "name": "route",
+          "description": "If defined, used on conjunction with onClick property, second argument",
+          "values": []
+        },
+        {
+          "name": "stretch",
+          "description": "If true, fills the parents horizontal axis",
+          "values": []
+        },
+        {
+          "name": "target",
+          "description": "If defined, specifies where to open the linked document",
+          "values": [
+            { "name": "_blank" },
+            { "name": "_parent" },
+            { "name": "_self" },
+            { "name": "_top" }
+          ]
+        },
+        {
+          "name": "type",
+          "description": "Defines the type of button",
+          "values": [
+            { "name": "button" },
+            { "name": "submit" },
+            { "name": "reset" }
+          ]
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "skf-popover",
+      "description": "The `<skf-popover>` is a general purpose component that displays the slot content.\n---\n\n\n### **Events:**\n - **open** - Fired when the menu is opened\n- **close** - Fired when the menu is closed\n\n### **Slots:**\n - _default_ - The popover content",
+      "attributes": [
+        {
+          "name": "offset",
+          "description": "If defined, sets a custom offset for the popover",
+          "values": []
+        },
+        {
+          "name": "hideArrow",
+          "description": "If true, hides the arrow",
+          "values": []
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "skf-progress",
+      "description": "The `<skf-progress>` element displays an indicator showing the completion progress of a task, typically displayed as a progress bar\n---\n",
+      "attributes": [
+        {
+          "name": "animated",
+          "description": "If true, the progress-bar's fill value is animated",
+          "values": []
+        },
+        {
+          "name": "max",
+          "description": "Describes how much work the task indicated by the progress element requires",
+          "values": []
+        },
+        {
+          "name": "value",
+          "description": "Specifies how much of the task that has been completed",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "skf-radio",
       "description": "The `<skf-radio>` component is used to create a radio input\n---\n\n\n### **Events:**\n - **change** - {object} - When the value of the input changes\n\n### **Slots:**\n - _default_ - The radios label. Alternatively, you can use the `label` attribute.",
@@ -1161,11 +1497,6 @@
           "description": "If true, forces component to invalid state until removed",
           "values": []
         },
-        {
-          "name": "hide-label",
-          "description": "If true, hides the label visually",
-          "values": []
-        },
         {
           "name": "label",
           "description": "If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute.",
@@ -1334,6 +1665,43 @@
       "attributes": [{ "name": "label", "values": [] }],
       "references": []
     },
+    {
+      "name": "skf-stepper",
+      "description": "The `<skf-stepper>` is a component that displays a list of actions or options.\n---\n\n\n### **Events:**\n - **skf-stepper-item-select** - Dispatched when the stepper item is selected\n\n### **Slots:**\n - _default_ - One or more `<skf-stepper-item>`",
+      "attributes": [
+        {
+          "name": "activeIndex",
+          "description": "Sets the active item",
+          "values": []
+        },
+        {
+          "name": "linear",
+          "description": "If true, sets linear mode (user can't go back to completed steps due to dependencies)",
+          "values": []
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "skf-stepper-item",
+      "description": "The `<skf-stepper-item>` is used in conjunction with the `<skf-stepper>` component\n---\n\n\n### **Events:**\n - **skf-stepper-item-select** - Dispatched when the stepper item is selected\n\n### **Slots:**\n - _default_ - Label of the stepper item",
+      "attributes": [
+        {
+          "name": "state",
+          "description": "If defined, gives the supplied appearance",
+          "values": [
+            { "name": "Extract<SkfStepperItemState, 'active'" },
+            { "name": "'completed'>" }
+          ]
+        },
+        {
+          "name": "completed",
+          "description": "If true, item marked as completed",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "skf-switch",
       "description": "The `<skf-switch>` is a component that displays a list of actions or options\n---\n\n\n### **Slots:**\n - _default_ - The Switchs label. Alternatively, you can use the `label` attribute.",
@@ -1391,6 +1759,58 @@
       ],
       "references": []
     },
+    {
+      "name": "skf-tab",
+      "description": "The `<skf-tab>` is a component that displays a list of actions or options\n---\n\n\n### **Events:**\n - **skf-tab-select** - {detail: { selected: true, tab: SkfTab }} Fires when the tab is selected\n- **click** - Fired when the component is clicked\n\n### **Slots:**\n - _default_ - The tab's label",
+      "attributes": [
+        {
+          "name": "panel",
+          "description": "The name of the tab-panel this tab is associated with. The panel must be located in the same tab group.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "skf-tab-group",
+      "description": "The `<skf-tab-group>` is a component that displays a list of actions or options.\n---\n\n\n### **Slots:**\n - _default_ - Used for grouping tab panels in the tab group. Must be <skf-tab-panel> elements\n- **tabs** - Used for grouping tabs in the tab group. Must be <skf-tab> elements",
+      "attributes": [
+        {
+          "name": "default-selected",
+          "description": "Sets the default selected tab",
+          "values": []
+        },
+        {
+          "name": "no-border",
+          "description": "If true, removes border",
+          "values": []
+        },
+        {
+          "name": "no-padding",
+          "description": "If true, removes padding",
+          "values": []
+        },
+        {
+          "name": "stretch",
+          "description": "If true, component fills the parent element height",
+          "values": []
+        },
+        {
+          "name": "variant",
+          "description": "Sets the appearance of the tabs",
+          "values": [{ "name": "compressed" }, { "name": "expanded" }]
+        }
+      ],
+      "references": []
+    },
+    {
+      "name": "skf-tab-panel",
+      "description": "The `<skf-tab-panel>` is a component that displays a list of actions or options.\n---\n\n\n### **Slots:**\n - _default_ - The tab panel's content",
+      "attributes": [
+        { "name": "name", "description": "The tab panel's name.", "values": [] }
+      ],
+      "references": []
+    },
     {
       "name": "skf-tag",
       "description": "The `<skf-tag>` is a component that displays a list of actions or options\n---\n\n\n### **Slots:**\n - _default_ - The component's placeholder content",
@@ -1696,21 +2116,21 @@
       "name": "skf-toast",
       "description": "A simple toast component that displays a message to the user. Use by appending a &lt;skf-toast&gt; tag to the DOM. Position in DOM is irrelevant.\n---\n\n\n### **Slots:**\n - _default_ - The component's placeholder content",
       "attributes": [
+        { "name": "debug", "values": [] },
         {
-          "name": "closeable",
-          "description": "If provided, adds a close button to the toast and will not disapear until user actively dismisses it.",
-          "values": []
+          "name": "icon",
+          "description": "If defined, displays leading icon",
+          "values": [{ "name": "SkfAlert['icon']" }]
+        },
+        {
+          "name": "persistent",
+          "description": "If true, renders with an close button and sets aria-role to `status`",
+          "values": [{ "name": "SkfAlert['persistent']" }]
         },
-        { "name": "debug", "values": [] },
         {
           "name": "severity",
-          "description": "Severity of the toast.",
-          "values": [
-            { "name": "info" },
-            { "name": "success" },
-            { "name": "warning" },
-            { "name": "error" }
-          ]
+          "description": "If defined, gives the supplied appearance",
+          "values": [{ "name": "SkfAlert['severity']" }]
         },
         {
           "name": "timer",
@@ -1730,6 +2150,12 @@
       "description": "The `<skf-toast-wrapper>` is a component without UI that positions where the toast shows up on the screen. The toast-wrapper is used internally by the toast component.\n---\n\n\n### **Slots:**\n - _default_ - The alert components that the toast creates will render here.",
       "attributes": [{ "name": "debug", "values": [] }],
       "references": []
+    },
+    {
+      "name": "skf-tooltip",
+      "description": "The `<skf-tooltip>` is a component that displays a list of actions or options.\n---\n\n\n### **Events:**\n - **open** - Fired when the dropdown is opened\n- **close** - Fired when the dropdown is closed\n\n### **Slots:**\n - _default_ - The tooltip popover content",
+      "attributes": [],
+      "references": []
     }
   ]
 }