@skf-design-system/ui-components 1.0.0-alpha.27 → 1.0.0-alpha.28

package/dist/web-types.json

@@ -162,7 +162,7 @@
         },
         {
           "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",
           "doc-url": "",
           "attributes": [
             {
@@ -195,6 +195,10 @@
               "description": "If true, hides text & icon and shows loading indicator. **Notice!** Only applicable if `variant` is `primary`.",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "no-validate",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "size",
               "description": "If provided, displays an alternative size",
@@ -218,7 +222,12 @@
             }
           ],
           "slots": [{ "name": "", "description": "The Primary content" }],
-          "events": [],
+          "events": [
+            {
+              "name": "click",
+              "description": "Fires when the button is clicked"
+            }
+          ],
           "js": {
             "properties": [
               {
@@ -246,6 +255,7 @@
                 "description": "If true, hides text & icon and shows loading indicator. **Notice!** Only applicable if `variant` is `primary`.",
                 "type": "boolean"
               },
+              { "name": "noValidate", "type": "boolean" },
               {
                 "name": "size",
                 "description": "If provided, displays an alternative size",
@@ -262,7 +272,12 @@
                 "type": "'primary' | 'secondary'"
               }
             ],
-            "events": []
+            "events": [
+              {
+                "name": "click",
+                "description": "Fires when the button is clicked"
+              }
+            ]
           }
         },
         {
@@ -339,21 +354,11 @@
               "description": "If true, forces component to invalid state until removed",
               "value": { "type": "boolean | undefined" }
             },
-            {
-              "name": "hide-label",
-              "description": "If true, hides the label visually",
-              "value": { "type": "boolean | undefined" }
-            },
             {
               "name": "indeterminate",
               "description": "If true and the checkbox is unchecked, the checkbox will appear indeterminate",
               "value": { "type": "boolean | undefined" }
             },
-            {
-              "name": "invalid",
-              "description": "Read only indicator of the local state. Use custom-invalid to set it to invalid state.",
-              "value": { "type": "boolean | undefined" }
-            },
             {
               "name": "label",
               "description": "If defined, sets the input's label. Alternatively, you can use the `label` attribute.",
@@ -421,21 +426,11 @@
                 "description": "If true, forces component to invalid state until removed",
                 "type": "boolean | undefined"
               },
-              {
-                "name": "hideLabel",
-                "description": "If true, hides the label visually",
-                "type": "boolean | undefined"
-              },
               {
                 "name": "indeterminate",
                 "description": "If true and the checkbox is unchecked, the checkbox will appear indeterminate",
                 "type": "boolean | undefined"
               },
-              {
-                "name": "invalid",
-                "description": "Read only indicator of the local state. Use custom-invalid to set it to invalid state.",
-                "type": "boolean | undefined"
-              },
               {
                 "name": "label",
                 "description": "If defined, sets the input's label. Alternatively, you can use the `label` attribute.",
@@ -728,6 +723,11 @@
               "description": "If true, value is required or must be checked for the form to be submittable",
               "value": { "type": "boolean" }
             },
+            {
+              "name": "autocomplete",
+              "description": "-m  }",
+              "value": { "type": "string" }
+            },
             {
               "name": "button-aria-label-clear",
               "description": "Custom aria-label for the clear button. **Notice!** Only applicable to type=search.",
@@ -888,6 +888,7 @@
           ],
           "js": {
             "properties": [
+              { "name": "autocomplete", "description": "-m  }", "type": "" },
               {
                 "name": "buttonAriaLabelClear",
                 "description": "Custom aria-label for the clear button. **Notice!** Only applicable to type=search.",
@@ -1260,6 +1261,49 @@
             "events": []
           }
         },
+        {
+          "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",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "animated",
+              "description": "If true, the progress-bar's fill value is animated",
+              "value": { "type": "boolean | undefined" }
+            },
+            {
+              "name": "max",
+              "description": "Describes how much work the task indicated by the progress element requires",
+              "value": { "type": "number", "default": "1" }
+            },
+            {
+              "name": "value",
+              "description": "Specifies how much of the task that has been completed",
+              "value": { "type": "number", "default": "0" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "animated",
+                "description": "If true, the progress-bar's fill value is animated",
+                "type": "boolean | undefined"
+              },
+              {
+                "name": "max",
+                "description": "Describes how much work the task indicated by the progress element requires",
+                "type": "number"
+              },
+              {
+                "name": "value",
+                "description": "Specifies how much of the task that has been completed",
+                "type": "number"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "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.",
@@ -1290,11 +1334,6 @@
               "description": "If true, forces component to invalid state until removed",
               "value": { "type": "boolean | undefined" }
             },
-            {
-              "name": "hide-label",
-              "description": "If true, hides the label visually",
-              "value": { "type": "boolean | undefined" }
-            },
             {
               "name": "label",
               "description": "If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute.",
@@ -1362,11 +1401,6 @@
                 "description": "If true, forces component to invalid state until removed",
                 "type": "boolean | undefined"
               },
-              {
-                "name": "hideLabel",
-                "description": "If true, hides the label visually",
-                "type": "boolean | undefined"
-              },
               {
                 "name": "label",
                 "description": "If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute.",
@@ -1542,11 +1576,11 @@
                 "type": "string | undefined"
               },
               {
-                "name": "getSelectedValues",
+                "name": "selectedValues",
                 "description": "A readonly property that returns the selected value(s) in a array"
               },
               {
-                "name": "getSelectedOptionsText",
+                "name": "selectedOptionsText",
                 "description": "A readonly property that returns the selected slot(s) text content in a array"
               },
               {
@@ -1848,6 +1882,155 @@
             "events": []
           }
         },
+        {
+          "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",
+          "doc-url": "",
+          "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.",
+              "value": { "type": "string", "default": "''" }
+            }
+          ],
+          "slots": [{ "name": "", "description": "The tab's label" }],
+          "events": [
+            {
+              "name": "skf-tab-select",
+              "type": "CustomEvent",
+              "description": "{detail: { selected: true, tab: SkfTab }} Fires when the tab is selected"
+            },
+            {
+              "name": "click",
+              "description": "Fired when the component is clicked"
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "panel",
+                "description": "The name of the tab-panel this tab is associated with. The panel must be located in the same tab group.",
+                "type": "string"
+              },
+              { "name": "selected", "type": "boolean" },
+              { "name": "variant", "type": "SkfTabGroup['variant']" },
+              { "name": "role", "type": "string" }
+            ],
+            "events": [
+              {
+                "name": "skf-tab-select",
+                "type": "CustomEvent",
+                "description": "{detail: { selected: true, tab: SkfTab }} Fires when the tab is selected"
+              },
+              {
+                "name": "click",
+                "description": "Fired when the component is clicked"
+              }
+            ]
+          }
+        },
+        {
+          "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",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "default-selected",
+              "description": "Sets the default selected tab",
+              "value": { "type": "number", "default": "0" }
+            },
+            {
+              "name": "no-border",
+              "description": "If true, removes border",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "no-padding",
+              "description": "If true, removes padding",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "stretch",
+              "description": "If true, component fills the parent element height",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "variant",
+              "description": "Sets the appearance of the tabs",
+              "value": {
+                "type": "'compressed' | 'expanded'",
+                "default": "'expanded'"
+              }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "Used for grouping tab panels in the tab group. Must be <skf-tab-panel> elements"
+            },
+            {
+              "name": "tabs",
+              "description": "Used for grouping tabs in the tab group. Must be <skf-tab> elements"
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "defaultSelected",
+                "description": "Sets the default selected tab",
+                "type": "number"
+              },
+              {
+                "name": "noBorder",
+                "description": "If true, removes border",
+                "type": "boolean"
+              },
+              {
+                "name": "noPadding",
+                "description": "If true, removes padding",
+                "type": "boolean"
+              },
+              {
+                "name": "stretch",
+                "description": "If true, component fills the parent element height",
+                "type": "boolean"
+              },
+              {
+                "name": "variant",
+                "description": "Sets the appearance of the tabs",
+                "type": "'compressed' | 'expanded'"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "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",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "name",
+              "description": "The tab panel's name.",
+              "value": { "type": "string", "default": "''" }
+            }
+          ],
+          "slots": [{ "name": "", "description": "The tab panel's content" }],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "name",
+                "description": "The tab panel's name.",
+                "type": "string"
+              },
+              { "name": "active", "type": "boolean" },
+              { "name": "role", "type": "string" }
+            ],
+            "events": []
+          }
+        },
         {
           "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",
@@ -2146,6 +2329,92 @@
               }
             ]
           }
+        },
+        {
+          "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",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "closeable",
+              "description": "If provided, adds a close button to the toast and will not disapear until user actively dismisses it.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "debug",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "severity",
+              "description": "Severity of the toast.",
+              "value": {
+                "type": "'info' | 'success' | 'warning' | 'error'",
+                "default": "'info'"
+              }
+            },
+            {
+              "name": "timer",
+              "description": "Time in seconds before the toast disappears.",
+              "value": { "type": "number", "default": "5" }
+            },
+            {
+              "name": "topOffset",
+              "description": "offsets where toasts emerge vertically",
+              "value": { "type": "number | undefined" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The component's placeholder content" }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "closeable",
+                "description": "If provided, adds a close button to the toast and will not disapear until user actively dismisses it.",
+                "type": "boolean"
+              },
+              { "name": "debug", "type": "boolean" },
+              {
+                "name": "severity",
+                "description": "Severity of the toast.",
+                "type": "'info' | 'success' | 'warning' | 'error'"
+              },
+              {
+                "name": "timer",
+                "description": "Time in seconds before the toast disappears.",
+                "type": "number"
+              },
+              {
+                "name": "topOffset",
+                "description": "offsets where toasts emerge vertically",
+                "type": "number | undefined"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "skf-toast-wrapper",
+          "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.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "debug",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "The alert components that the toast creates will render here."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [{ "name": "debug", "type": "boolean" }],
+            "events": []
+          }
         }
       ]
     }

package/package.json

@@ -34,41 +34,42 @@
   "sideEffects": true,
   "type": "module",
   "types": "./dist/index.d.ts",
-  "version": "1.0.0-alpha.27",
+  "version": "1.0.0-alpha.28",
   "dependencies": {
-    "@floating-ui/dom": "^1.6.11"
+    "@floating-ui/dom": "^1.6.12"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^2.0.2",
+    "@chromatic-com/storybook": "^3.2.2",
     "@commitlint/cli": "^19.5.0",
     "@commitlint/config-conventional": "^19.5.0",
     "@custom-elements-manifest/analyzer": "^0.10.3",
-    "@eslint/js": "^9.13.0",
+    "@eslint/js": "^9.14.0",
     "@lit/react": "^1.0.6",
-    "@playwright/test": "^1.48.1",
+    "@playwright/test": "^1.48.2",
     "@skf-design-system/ui-assets": "0.1.3-beta.1",
-    "@storybook/addon-a11y": "^8.3.6",
-    "@storybook/addon-essentials": "^8.3.6",
-    "@storybook/addon-interactions": "^8.3.6",
-    "@storybook/addon-links": "^8.3.6",
-    "@storybook/blocks": "^8.3.6",
-    "@storybook/manager-api": "^8.3.6",
-    "@storybook/test": "^8.3.6",
+    "@skf-design-system/wc-storybook-helpers": "^0.1.0",
+    "@storybook/addon-a11y": "^8.4.2",
+    "@storybook/addon-essentials": "^8.4.2",
+    "@storybook/addon-interactions": "^8.4.2",
+    "@storybook/addon-links": "^8.4.2",
+    "@storybook/blocks": "^8.4.2",
+    "@storybook/manager-api": "^8.4.2",
+    "@storybook/test": "^8.4.2",
     "@storybook/test-runner": "^0.19.1",
-    "@storybook/theming": "^8.3.6",
-    "@storybook/web-components": "^8.3.6",
-    "@storybook/web-components-vite": "^8.3.6",
-    "@types/node": "^22.7.7",
-    "@types/react": "^18.3.11",
+    "@storybook/theming": "^8.4.2",
+    "@storybook/web-components": "^8.4.2",
+    "@storybook/web-components-vite": "^8.4.2",
+    "@types/node": "^22.9.0",
+    "@types/react": "^18.3.12",
     "cem-plugin-expanded-types": "^1.3.3",
-    "command-line-args": "^6.0.0",
-    "concurrently": "^9.0.1",
+    "command-line-args": "^6.0.1",
+    "concurrently": "^9.1.0",
     "custom-element-jet-brains-integration": "^1.6.2",
     "custom-element-jsx-integration": "^1.5.3",
     "custom-element-vs-code-integration": "^1.4.1",
     "custom-element-vuejs-integration": "^1.3.3",
     "del": "^8.0.0",
-    "eslint": "^9.13.0",
+    "eslint": "^9.14.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-lit": "^1.15.0",
     "eslint-plugin-lit-a11y": "^4.1.4",
@@ -77,20 +78,19 @@
     "husky": "^9.1.6",
     "lint-staged": "^15.2.10",
     "lit": "^3.2.1",
-    "postcss-styled-syntax": "^0.6.4",
+    "postcss-styled-syntax": "^0.7.0",
     "prettier": "3.3.3",
     "react": "^18.3.1",
-    "storybook": "^8.3.6",
+    "storybook": "^8.4.2",
     "stylelint": "^16.10.0",
     "stylelint-config-standard": "^36.0.1",
-    "stylelint-no-unsupported-browser-features": "^8.0.1",
+    "stylelint-no-unsupported-browser-features": "^8.0.2",
     "stylelint-order": "^6.0.4",
     "stylelint-value-no-unknown-custom-properties": "^6.0.1",
     "typescript": "^5.6.3",
-    "typescript-eslint": "^8.10.0",
-    "vite": "^5.4.9",
-    "vite-tsconfig-paths": "^5.0.1",
-    "wc-storybook-helpers": "^2.0.3"
+    "typescript-eslint": "^8.13.0",
+    "vite": "^5.4.10",
+    "vite-tsconfig-paths": "^5.1.0"
   },
   "peerDependencies": {
     "@lit/react": "^1.0.5",