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

package/dist/web-types.json

@@ -88,6 +88,78 @@
             "events": []
           }
         },
+        {
+          "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",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "closeable",
+              "description": "If true, alert is being used as a toast (alertdialog) with an close button",
+              "value": { "type": "boolean | undefined" }
+            },
+            {
+              "name": "button-label",
+              "description": "Close button aria-label",
+              "value": { "type": "string", "default": "'Close'" }
+            },
+            {
+              "name": "icon",
+              "description": "If defined, displays leading icon",
+              "value": { "type": "SkfIcon['name'] | undefined" }
+            },
+            {
+              "name": "severity",
+              "description": "If defined, gives the supplied appearance",
+              "value": {
+                "type": "\"error\" | \"info\" | \"warning\" | \"success\" | \"alert\""
+              }
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "Alert message. **Notice!** See design principles for approved content"
+            },
+            { "name": "link", "description": "Slot for the link" }
+          ],
+          "events": [
+            {
+              "name": "skf-alert-close",
+              "description": "Fires when the close button is clicked"
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "closeable",
+                "description": "If true, alert is being used as a toast (alertdialog) with an close button",
+                "type": "boolean | undefined"
+              },
+              {
+                "name": "buttonLabel",
+                "description": "Close button aria-label",
+                "type": "string"
+              },
+              {
+                "name": "icon",
+                "description": "If defined, displays leading icon",
+                "type": "SkfIcon['name'] | undefined"
+              },
+              {
+                "name": "severity",
+                "description": "If defined, gives the supplied appearance",
+                "type": "\"error\" | \"info\" | \"warning\" | \"success\" | \"alert\""
+              }
+            ],
+            "events": [
+              {
+                "name": "skf-alert-close",
+                "description": "Fires when the close button is clicked"
+              }
+            ]
+          }
+        },
         {
           "name": "skf-button",
           "description": "Component to be used in forms or for interactivity\n---\n\n\n### **Slots:**\n - _default_ - The Primary content",
@@ -237,78 +309,6 @@
             "events": []
           }
         },
-        {
-          "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",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "closeable",
-              "description": "If true, alert is being used as a toast (alertdialog) with an close button",
-              "value": { "type": "boolean | undefined" }
-            },
-            {
-              "name": "button-label",
-              "description": "Close button aria-label",
-              "value": { "type": "string", "default": "'Close'" }
-            },
-            {
-              "name": "icon",
-              "description": "If defined, displays leading icon",
-              "value": { "type": "SkfIcon['name'] | undefined" }
-            },
-            {
-              "name": "severity",
-              "description": "If defined, gives the supplied appearance",
-              "value": {
-                "type": "\"error\" | \"info\" | \"warning\" | \"success\" | \"alert\""
-              }
-            }
-          ],
-          "slots": [
-            {
-              "name": "",
-              "description": "Alert message. **Notice!** See design principles for approved content"
-            },
-            { "name": "link", "description": "Slot for the link" }
-          ],
-          "events": [
-            {
-              "name": "skf-alert-close",
-              "description": "Fires when the close button is clicked"
-            }
-          ],
-          "js": {
-            "properties": [
-              {
-                "name": "closeable",
-                "description": "If true, alert is being used as a toast (alertdialog) with an close button",
-                "type": "boolean | undefined"
-              },
-              {
-                "name": "buttonLabel",
-                "description": "Close button aria-label",
-                "type": "string"
-              },
-              {
-                "name": "icon",
-                "description": "If defined, displays leading icon",
-                "type": "SkfIcon['name'] | undefined"
-              },
-              {
-                "name": "severity",
-                "description": "If defined, gives the supplied appearance",
-                "type": "\"error\" | \"info\" | \"warning\" | \"success\" | \"alert\""
-              }
-            ],
-            "events": [
-              {
-                "name": "skf-alert-close",
-                "description": "Fires when the close button is clicked"
-              }
-            ]
-          }
-        },
         {
           "name": "skf-checkbox",
           "description": "The `<skf-checkbox>` component is used to create a checkbox 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.",
@@ -470,52 +470,6 @@
             ]
           }
         },
-        {
-          "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)_",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "color",
-              "description": "Defines the Divider color",
-              "value": {
-                "type": "\"emphasised\" | \"primary\" | \"secondary\" | \"tertiary\" | \"inverse\"",
-                "default": "'primary'"
-              }
-            },
-            {
-              "name": "decorative",
-              "description": "If true, renders a div for presentational purpose instead of the semantic hr-element",
-              "value": { "type": "boolean | undefined" }
-            },
-            {
-              "name": "vertical",
-              "description": "If true, renders the divider vertically",
-              "value": { "type": "boolean | undefined" }
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "color",
-                "description": "Defines the Divider color",
-                "type": "\"emphasised\" | \"primary\" | \"secondary\" | \"tertiary\" | \"inverse\""
-              },
-              {
-                "name": "decorative",
-                "description": "If true, renders a div for presentational purpose instead of the semantic hr-element",
-                "type": "boolean | undefined"
-              },
-              {
-                "name": "vertical",
-                "description": "If true, renders the divider vertically",
-                "type": "boolean | undefined"
-              }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "skf-collapse",
           "description": "The `<skf-collapse>` component is a general purpose container for content that can be collapsed / expanded.\n\nSee [zeroheight](https://zeroheight.com/853e936c9/p/6590bf-accordion) for design principles.\n---\n\n\n### **Events:**\n - **skf-collapse-toggle** - Event emitted when toggled\n\n### **Methods:**\n - **setClose()** - Class method as alternative to manipulate attribute\n- **setOpen()** - Class method as alternative to manipulate attribute\n\n### **Slots:**\n - _default_ - Main content",
@@ -605,6 +559,52 @@
             ]
           }
         },
+        {
+          "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)_",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "color",
+              "description": "Defines the Divider color",
+              "value": {
+                "type": "\"emphasised\" | \"primary\" | \"secondary\" | \"tertiary\" | \"inverse\"",
+                "default": "'primary'"
+              }
+            },
+            {
+              "name": "decorative",
+              "description": "If true, renders a div for presentational purpose instead of the semantic hr-element",
+              "value": { "type": "boolean | undefined" }
+            },
+            {
+              "name": "vertical",
+              "description": "If true, renders the divider vertically",
+              "value": { "type": "boolean | undefined" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "color",
+                "description": "Defines the Divider color",
+                "type": "\"emphasised\" | \"primary\" | \"secondary\" | \"tertiary\" | \"inverse\""
+              },
+              {
+                "name": "decorative",
+                "description": "If true, renders a div for presentational purpose instead of the semantic hr-element",
+                "type": "boolean | undefined"
+              },
+              {
+                "name": "vertical",
+                "description": "If true, renders the divider vertically",
+                "type": "boolean | undefined"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "skf-heading",
           "description": "The `<Heading>` component is to deliniate content on a page. When using, take note not to skip heading levels.<br>\nIt extends the interface of native html `<h1>` to `<h4>` elements.\n---\n\n\n### **Slots:**\n - _default_ - The headings content",
@@ -1532,11 +1532,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"
               },
               {
@@ -1632,7 +1632,7 @@
             {
               "name": "icon-color",
               "description": "If defined, sets provided color on the icon",
-              "value": { "type": "IconColor | undefined" }
+              "value": { "type": "SeverityFgColor | undefined" }
             },
             {
               "name": "selected",
@@ -1678,7 +1678,7 @@
               {
                 "name": "iconColor",
                 "description": "If defined, sets provided color on the icon",
-                "type": "IconColor | undefined"
+                "type": "SeverityFgColor | undefined"
               },
               {
                 "name": "selected",
@@ -2136,6 +2136,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,7 +34,7 @@
   "sideEffects": true,
   "type": "module",
   "types": "./dist/index.d.ts",
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.5",
   "dependencies": {
     "@floating-ui/dom": "^1.6.11"
   },
@@ -47,6 +47,7 @@
     "@lit/react": "^1.0.6",
     "@playwright/test": "^1.48.1",
     "@skf-design-system/ui-assets": "0.1.3-beta.1",
+    "@skf-design-system/wc-storybook-helpers": "^0.0.1",
     "@storybook/addon-a11y": "^8.3.6",
     "@storybook/addon-essentials": "^8.3.6",
     "@storybook/addon-interactions": "^8.3.6",
@@ -89,8 +90,7 @@
     "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"
+    "vite-tsconfig-paths": "^5.0.1"
   },
   "peerDependencies": {
     "@lit/react": "^1.0.5",