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

package/dist/internal/components/hint/hint.styles.js

@@ -1,22 +1,38 @@
-import { css as s } from "lit";
-const o = s`
-	:host {
+import { css as r } from "lit";
+const s = r`
+	#root {
 		align-items: center;
 		color: var(--_skf-hint-color, var(--skf-text-color-secondary));
 		display: flex;
 		font-size: var(--skf-font-size-75);
 		font-weight: var(--skf-font-weight-medium);
 		gap: var(--skf-spacing-25);
-	}
 
-	:host([severity='error']) {
-		--_skf-hint-color: var(--skf-severity-fg-color-error);
-	}
+		:host-context(:disabled) & {
+			color: inherit;
+		}
+
+		:host([severity='alert']) & {
+			--_skf-hint-color: var(--skf-severity-fg-color-alert);
+		}
+
+		:host([severity='error']) & {
+			--_skf-hint-color: var(--skf-severity-fg-color-error);
+		}
+
+		:host([severity='info']) & {
+			--_skf-hint-color: var(--skf-severity-fg-color-info);
+		}
+
+		:host([severity='success']) & {
+			--_skf-hint-color: var(--skf-severity-fg-color-success);
+		}
 
-	:host([severity='success']) {
-		--_skf-hint-color: var(--skf-severity-fg-color-success);
+		:host([severity='warning']) & {
+			--_skf-hint-color: var(--skf-severity-fg-color-warning);
+		}
 	}
 `;
 export {
-  o as default
+  s as default
 };

package/dist/react/index.d.ts

@@ -18,3 +18,5 @@ export { default as SkfSelectOptionGroup } from './skf-select-option-group/index
 export { default as SkfSwitch } from './skf-switch/index.js';
 export { default as SkfTag } from './skf-tag/index.js';
 export { default as SkfTextArea } from './skf-textarea/index.js';
+export { default as SkfToast } from './skf-toast/index.js';
+export { default as SkfToastWrapper } from './skf-toast-wrapper/index.js';

package/dist/react/index.js

@@ -18,3 +18,5 @@ export { default as SkfSelectOptionGroup } from './skf-select-option-group/index
 export { default as SkfSwitch } from './skf-switch/index.js';
 export { default as SkfTag } from './skf-tag/index.js';
 export { default as SkfTextArea } from './skf-textarea/index.js';
+export { default as SkfToast } from './skf-toast/index.js';
+export { default as SkfToastWrapper } from './skf-toast-wrapper/index.js';

package/dist/react/skf-toast/index.d.ts

@@ -0,0 +1,3 @@
+import Component from '../../components/toast/toast.js';
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/skf-toast/index.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/toast/toast.js';
+const tagName = 'skf-toast';
+Component.define('skf-toast');
+const reactWrapper = createComponent({
+    tagName,
+    elementClass: Component,
+    react: React,
+    events: {},
+    displayName: 'SkfToast',
+});
+export default reactWrapper;

package/dist/react/skf-toast-wrapper/index.d.ts

@@ -0,0 +1,3 @@
+import Component from '../../components/toast-wrapper/toast-wrapper.js';
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/skf-toast-wrapper/index.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/toast-wrapper/toast-wrapper.js';
+const tagName = 'skf-toast-wrapper';
+Component.define('skf-toast-wrapper');
+const reactWrapper = createComponent({
+    tagName,
+    elementClass: Component,
+    react: React,
+    events: {},
+    displayName: 'SkfToastWrapper',
+});
+export default reactWrapper;

package/dist/styles/form-field.styles.js

@@ -11,6 +11,10 @@ const i = e`
 			display: grid;
 			gap: var(--skf-spacing-25);
 
+			:host([disabled]) & {
+				--_skf-field-color: var(--skf-interactive-text-color-disabled);
+			}
+
 			:host([size='sm']) & {
 				font-size: var(--skf-font-size-75);
 				font-weight: var(--skf-font-weight-medium);

package/dist/types/jsx/custom-element-jsx.d.ts

@@ -846,9 +846,9 @@ export type SkfSelectProps = {
   /** Size of the Select */
   size?: "sm" | "md";
   /** A readonly property that returns the selected value(s) in a array */
-  getSelectedValues?: string;
+  selectedValues?: string;
   /** A readonly property that returns the selected slot(s) text content in a array */
-  getSelectedOptionsText?: string;
+  selectedOptionsText?: string;
   /** Read only, returns the selected value. (if multiple: in a comma separated string) */
   value?: string;
   /**  */
@@ -871,7 +871,7 @@ export type SkfSelectOptionProps = {
   /** If defined, set an icon */
   icon?: SkfIcon["name"] | undefined;
   /** If defined, sets provided color on the icon */
-  "icon-color"?: IconColor | undefined;
+  "icon-color"?: SeverityFgColor | undefined;
   /** If true, sets the option as selected */
   selected?: boolean | undefined;
   /** If defined, sets a short label */
@@ -1132,6 +1132,24 @@ export type SkfTextAreaProps = {
   oninvalid?: (e: CustomEvent<never>) => void;
 };
 
+export type SkfToastProps = {
+  /** If provided, adds a close button to the toast and will not disapear until user actively dismisses it. */
+  closeable?: boolean;
+  /**  */
+  debug?: boolean;
+  /** Severity of the toast. */
+  severity?: "info" | "success" | "warning" | "error";
+  /** Time in seconds before the toast disappears. */
+  timer?: number;
+  /** offsets where toasts emerge vertically */
+  topOffset?: number | undefined;
+};
+
+export type SkfToastWrapperProps = {
+  /**  */
+  debug?: boolean;
+};
+
 export type CustomElements = {
   /**
    * The `<skf-accordion>` component consists of multiple `<skf-collapse>`, working together.
@@ -1368,4 +1386,24 @@ export type CustomElements = {
    *  - _default_ - The textareas label. Alternatively, you can use the `label` attribute.
    */
   "skf-textarea": Partial<SkfTextAreaProps & BaseProps & BaseEvents>;
+
+  /**
+   * 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.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The component's placeholder content
+   */
+  "skf-toast": Partial<SkfToastProps & BaseProps & BaseEvents>;
+
+  /**
+   * 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.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The alert components that the toast creates will render here.
+   */
+  "skf-toast-wrapper": Partial<SkfToastWrapperProps & BaseProps & BaseEvents>;
 };

package/dist/types/vue/index.d.ts

@@ -20,6 +20,8 @@ import type { SkfSelectOptionGroup } from "../../components/select-option-group/
 import type { SkfSwitch } from "../../components/switch/switch.component.js";
 import type { SkfTag } from "../../components/tag/tag.component.js";
 import type { SkfTextArea } from "../../components/textarea/textarea.component.js";
+import type { SkfToast } from "../../components/toast/toast.component.js";
+import type { SkfToastWrapper } from "../../components/toast-wrapper/toast-wrapper.component.js";
 
 type SkfAccordionProps = {
   /** If true, will animate the expand/collapse state */
@@ -334,9 +336,9 @@ type SkfSelectProps = {
   /** Size of the Select */
   size?: SkfSelect["size"];
   /** A readonly property that returns the selected value(s) in a array */
-  getSelectedValues?: SkfSelect["getSelectedValues"];
+  selectedValues?: SkfSelect["selectedValues"];
   /** A readonly property that returns the selected slot(s) text content in a array */
-  getSelectedOptionsText?: SkfSelect["getSelectedOptionsText"];
+  selectedOptionsText?: SkfSelect["selectedOptionsText"];
   /** Read only, returns the selected value. (if multiple: in a comma separated string) */
   value?: SkfSelect["value"];
   /**  */
@@ -469,6 +471,24 @@ type SkfTextAreaProps = {
   oninvalid?: (e: CustomEvent<never>) => void;
 };
 
+type SkfToastProps = {
+  /** If provided, adds a close button to the toast and will not disapear until user actively dismisses it. */
+  closeable?: SkfToast["closeable"];
+  /**  */
+  debug?: SkfToast["debug"];
+  /** Severity of the toast. */
+  severity?: SkfToast["severity"];
+  /** Time in seconds before the toast disappears. */
+  timer?: SkfToast["timer"];
+  /** offsets where toasts emerge vertically */
+  topOffset?: SkfToast["topOffset"];
+};
+
+type SkfToastWrapperProps = {
+  /**  */
+  debug?: SkfToastWrapper["debug"];
+};
+
 export type CustomElements = {
   /**
    * The `<skf-accordion>` component consists of multiple `<skf-collapse>`, working together.
@@ -705,6 +725,26 @@ export type CustomElements = {
    *  - _default_ - The textareas label. Alternatively, you can use the `label` attribute.
    */
   "skf-textarea": DefineComponent<SkfTextAreaProps>;
+
+  /**
+   * 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.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The component's placeholder content
+   */
+  "skf-toast": DefineComponent<SkfToastProps>;
+
+  /**
+   * 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.
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The alert components that the toast creates will render here.
+   */
+  "skf-toast-wrapper": DefineComponent<SkfToastWrapperProps>;
 };
 
 declare module "vue" {

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

@@ -1308,7 +1308,7 @@
         {
           "name": "icon-color",
           "description": "If defined, sets provided color on the icon",
-          "values": [{ "name": "IconColor" }]
+          "values": [{ "name": "SeverityFgColor" }]
         },
         {
           "name": "selected",
@@ -1691,6 +1691,45 @@
         }
       ],
       "references": []
+    },
+    {
+      "name": "skf-toast",
+      "description": "A simple toast component that displays a message to the user. Use by appending a <skf-toast> tag to the DOM. Position in DOM is irrelevant.\n---\n\n\n### **Slots:**\n - _default_ - The component's placeholder content",
+      "attributes": [
+        {
+          "name": "closeable",
+          "description": "If provided, adds a close button to the toast and will not disapear until user actively dismisses it.",
+          "values": []
+        },
+        { "name": "debug", "values": [] },
+        {
+          "name": "severity",
+          "description": "Severity of the toast.",
+          "values": [
+            { "name": "info" },
+            { "name": "success" },
+            { "name": "warning" },
+            { "name": "error" }
+          ]
+        },
+        {
+          "name": "timer",
+          "description": "Time in seconds before the toast disappears.",
+          "values": []
+        },
+        {
+          "name": "topOffset",
+          "description": "offsets where toasts emerge vertically",
+          "values": []
+        }
+      ],
+      "references": []
+    },
+    {
+      "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.",
+      "attributes": [{ "name": "debug", "values": [] }],
+      "references": []
     }
   ]
 }

package/dist/web-types.json

@@ -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 <skf-toast> 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.3",
+  "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",