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

package/dist/index.d.ts

@@ -18,3 +18,4 @@ export { default as SkfSelect } from './components/select/select.js';
 export { default as SkfSwitch } from './components/switch/switch.js';
 export { default as SkfTag } from './components/tag/tag.js';
 export { default as SkfTextArea } from './components/textarea/textarea.js';
+export { default as SkfToast } from './components/toast/toast.js';

package/dist/index.js

@@ -18,47 +18,50 @@ import "./components/select/select.js";
 import "./components/switch/switch.js";
 import "./components/tag/tag.js";
 import "./components/textarea/textarea.js";
-import { SkfAccordion as I } from "./components/accordion/accordion.component.js";
+import "./components/toast/toast.js";
+import { SkfAccordion as L } from "./components/accordion/accordion.component.js";
 import { SkfAlert as h } from "./components/alert/alert.component.js";
-import { SkfButton as T } from "./components/button/button.component.js";
-import { SkfCard as v } from "./components/card/card.component.js";
-import { SkfCheckbox as B } from "./components/checkbox/checkbox.component.js";
-import { SkfCollapse as H } from "./components/collapse/collapse.component.js";
-import { SkfDivider as j } from "./components/divider/divider.component.js";
-import { SkfHeading as y } from "./components/heading/heading.component.js";
-import { SkfIcon as E } from "./components/icon/icon.component.js";
-import { SkfInput as J } from "./components/input/input.component.js";
-import { SkfLink as M } from "./components/link/link.component.js";
-import { SkfLoader as P } from "./components/loader/loader.component.js";
-import { SkfLogo as U } from "./components/logo/logo.component.js";
-import { SkfRadio as W } from "./components/radio/radio.component.js";
-import { SkfSelectOptionGroup as Y } from "./components/select-option-group/select-option-group.component.js";
-import { SkfSelectOption as _ } from "./components/select-option/select-option.component.js";
-import { SkfSelect as oo } from "./components/select/select.component.js";
-import { SkfSwitch as to } from "./components/switch/switch.component.js";
-import { SkfTag as fo } from "./components/tag/tag.component.js";
-import { SkfTextArea as eo } from "./components/textarea/textarea.component.js";
-import { SkfAccordionItem as So } from "./components/accordion/accordion-item.js";
+import { SkfButton as b } from "./components/button/button.component.js";
+import { SkfCard as w } from "./components/card/card.component.js";
+import { SkfCheckbox as D } from "./components/checkbox/checkbox.component.js";
+import { SkfCollapse as R } from "./components/collapse/collapse.component.js";
+import { SkfDivider as q } from "./components/divider/divider.component.js";
+import { SkfHeading as z } from "./components/heading/heading.component.js";
+import { SkfIcon as F } from "./components/icon/icon.component.js";
+import { SkfInput as K } from "./components/input/input.component.js";
+import { SkfLink as N } from "./components/link/link.component.js";
+import { SkfLoader as Q } from "./components/loader/loader.component.js";
+import { SkfLogo as V } from "./components/logo/logo.component.js";
+import { SkfRadio as X } from "./components/radio/radio.component.js";
+import { SkfSelectOptionGroup as Z } from "./components/select-option-group/select-option-group.component.js";
+import { SkfSelectOption as $ } from "./components/select-option/select-option.component.js";
+import { SkfSelect as ro } from "./components/select/select.component.js";
+import { SkfSwitch as po } from "./components/switch/switch.component.js";
+import { SkfTag as mo } from "./components/tag/tag.component.js";
+import { SkfTextArea as io } from "./components/textarea/textarea.component.js";
+import { SkfToast as ko } from "./components/toast/toast.component.js";
+import { SkfAccordionItem as no } from "./components/accordion/accordion-item.js";
 export {
-  I as SkfAccordion,
-  So as SkfAccordionItem,
+  L as SkfAccordion,
+  no as SkfAccordionItem,
   h as SkfAlert,
-  T as SkfButton,
-  v as SkfCard,
-  B as SkfCheckbox,
-  H as SkfCollapse,
-  j as SkfDivider,
-  y as SkfHeading,
-  E as SkfIcon,
-  J as SkfInput,
-  M as SkfLink,
-  P as SkfLoader,
-  U as SkfLogo,
-  _ as SkfOption,
-  Y as SkfOptionGroup,
-  W as SkfRadio,
-  oo as SkfSelect,
-  to as SkfSwitch,
-  fo as SkfTag,
-  eo as SkfTextArea
+  b as SkfButton,
+  w as SkfCard,
+  D as SkfCheckbox,
+  R as SkfCollapse,
+  q as SkfDivider,
+  z as SkfHeading,
+  F as SkfIcon,
+  K as SkfInput,
+  N as SkfLink,
+  Q as SkfLoader,
+  V as SkfLogo,
+  $ as SkfOption,
+  Z as SkfOptionGroup,
+  X as SkfRadio,
+  ro as SkfSelect,
+  po as SkfSwitch,
+  mo as SkfTag,
+  io as SkfTextArea,
+  ko as SkfToast
 };

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

@@ -4,26 +4,28 @@ import { ICON_SEVERITY as n } from "../../constants/iconSeverity.js";
 import v from "../../../styles/component.styles.js";
 import { html as f } from "lit";
 import { property as y } from "lit/decorators.js";
-import a from "./hint.styles.js";
-var c = Object.defineProperty, h = (s, i, m, d) => {
+import d from "./hint.styles.js";
+var a = Object.defineProperty, c = (s, i, m, h) => {
   for (var r = void 0, t = s.length - 1, p; t >= 0; t--)
     (p = s[t]) && (r = p(i, m, r) || r);
-  return r && c(i, m, r), r;
+  return r && a(i, m, r), r;
 };
 const o = class o extends l {
   render() {
     return f`
-			${this.severity && f`
-				<skf-icon color=${this.severity} name="${n[this.severity]}" size="xs">
-				</skf-icon>
-			`}
-			<slot></slot>
+			<div id="root">
+				${this.severity && f`
+					<skf-icon color=${this.severity} name="${n[this.severity]}" size="xs">
+					</skf-icon>
+				`}
+				<slot></slot>
+			</div>
 		`;
   }
 };
-o.styles = [v, a];
+o.styles = [v, d];
 let e = o;
-h([
+c([
   y()
 ], e.prototype, "severity");
 export {

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/internal/storybook/shadowRootTraverser.d.ts

@@ -1,10 +1,18 @@
-import { queries, within } from '@storybook/test';
-type WithinShadowRootPromise = Promise<ReturnType<typeof within<typeof queries>>>;
 /**
- * Workaround solution for testing shadow DOM elements
- * @see {@link https://github.com/storybookjs/testing-library/issues/24#issuecomment-1593709872|GitHub}
+ * Workaround solution to get shadow DOM elements. Throws an error if the element is not found.
+ *
+ * @usage getWithinShadowRoot(canvasElement, 'my-custom-element', 'button')
  */
-export declare function withinShadowRoot(customElement: HTMLElement, selector: string): WithinShadowRootPromise;
-export declare const getElementWithinShadowRoot: (canvasElement: HTMLElement, ...selectors: string[]) => Element;
-export declare const findElementWithinShadowRoot: (canvasElement: HTMLElement, ...selectors: string[]) => Element | undefined;
-export {};
+export declare const getWithinShadowRoot: (canvasElement: HTMLElement, ...selectors: string[]) => {
+    element: HTMLElement;
+    shadowRoot: HTMLElement;
+};
+/**
+ * Workaround solution to get shadow DOM elements. Returns undefined if the element is not found.
+ *
+ * @usage findWithinShadowRoot(canvasElement, 'my-custom-element', 'button')
+ */
+export declare const findWithinShadowRoot: (canvasElement: HTMLElement, ...selectors: string[]) => {
+    element: HTMLElement;
+    shadowRoot: HTMLElement;
+} | undefined;

package/dist/react/index.d.ts

@@ -1,11 +1,11 @@
-export { default as SkfCard } from './skf-card/index.js';
 export { default as SkfAccordion } from './skf-accordion/index.js';
+export { default as SkfAlert } from './skf-alert/index.js';
+export { default as SkfButton } from './skf-button/index.js';
+export { default as SkfCard } from './skf-card/index.js';
 export { default as SkfCheckbox } from './skf-checkbox/index.js';
 export { default as SkfCollapse } from './skf-collapse/index.js';
 export { default as SkfDivider } from './skf-divider/index.js';
 export { default as SkfHeading } from './skf-heading/index.js';
-export { default as SkfButton } from './skf-button/index.js';
-export { default as SkfAlert } from './skf-alert/index.js';
 export { default as SkfIcon } from './skf-icon/index.js';
 export { default as SkfInput } from './skf-input/index.js';
 export { default as SkfLink } from './skf-link/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/index.js

@@ -1,11 +1,11 @@
-export { default as SkfCard } from './skf-card/index.js';
 export { default as SkfAccordion } from './skf-accordion/index.js';
+export { default as SkfAlert } from './skf-alert/index.js';
+export { default as SkfButton } from './skf-button/index.js';
+export { default as SkfCard } from './skf-card/index.js';
 export { default as SkfCheckbox } from './skf-checkbox/index.js';
 export { default as SkfCollapse } from './skf-collapse/index.js';
 export { default as SkfDivider } from './skf-divider/index.js';
 export { default as SkfHeading } from './skf-heading/index.js';
-export { default as SkfButton } from './skf-button/index.js';
-export { default as SkfAlert } from './skf-alert/index.js';
 export { default as SkfIcon } from './skf-icon/index.js';
 export { default as SkfInput } from './skf-input/index.js';
 export { default as SkfLink } from './skf-link/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

@@ -6,11 +6,15 @@ const i = e`
 		}
 
 		/* stylelint-disable no-descending-specificity */
-		#field {
+		#root {
 			color: var(--_skf-field-color, var(--skf-text-color-primary));
 			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

@@ -75,6 +75,20 @@ export type SkfAccordionProps = {
   truncate?: boolean | undefined;
 };
 
+export type SkfAlertProps = {
+  /** If true, alert is being used as a toast (alertdialog) with an close button */
+  closeable?: boolean | undefined;
+  /** Close button aria-label */
+  "button-label"?: string;
+  /** If defined, displays leading icon */
+  icon?: SkfIcon["name"] | undefined;
+  /** If defined, gives the supplied appearance */
+  severity?: "error" | "info" | "warning" | "success" | "alert";
+
+  /** Fires when the close button is clicked */
+  "onskf-alert-close"?: (e: CustomEvent<never>) => void;
+};
+
 export type SkfButtonProps = {
   /** If true, gives destructive appearance. **Notice!** Only applicable if `variant` is `primary`. */
   destructive?: boolean;
@@ -254,20 +268,6 @@ export type SkfCardProps = {
   stretch?: boolean | undefined;
 };
 
-export type SkfAlertProps = {
-  /** If true, alert is being used as a toast (alertdialog) with an close button */
-  closeable?: boolean | undefined;
-  /** Close button aria-label */
-  "button-label"?: string;
-  /** If defined, displays leading icon */
-  icon?: SkfIcon["name"] | undefined;
-  /** If defined, gives the supplied appearance */
-  severity?: "error" | "info" | "warning" | "success" | "alert";
-
-  /** Fires when the close button is clicked */
-  "onskf-alert-close"?: (e: CustomEvent<never>) => void;
-};
-
 export type SkfCheckboxProps = {
   /** If true, sets disabled state */
   disabled?: boolean;
@@ -302,15 +302,6 @@ export type SkfCheckboxProps = {
   onchange?: (e: CustomEvent<never>) => void;
 };
 
-export type SkfDividerProps = {
-  /** Defines the Divider color */
-  color?: "emphasised" | "primary" | "secondary" | "tertiary" | "inverse";
-  /** If true, renders a div for presentational purpose instead of the semantic hr-element */
-  decorative?: boolean | undefined;
-  /** If true, renders the divider vertically */
-  vertical?: boolean | undefined;
-};
-
 export type SkfCollapseProps = {
   /** If true, will animate the expand/collapse state */
   animated?: boolean | undefined;
@@ -329,6 +320,15 @@ export type SkfCollapseProps = {
   "onskf-collapse-toggle"?: (e: CustomEvent<CustomEvent>) => void;
 };
 
+export type SkfDividerProps = {
+  /** Defines the Divider color */
+  color?: "emphasised" | "primary" | "secondary" | "tertiary" | "inverse";
+  /** If true, renders a div for presentational purpose instead of the semantic hr-element */
+  decorative?: boolean | undefined;
+  /** If true, renders the divider vertically */
+  vertical?: boolean | undefined;
+};
+
 export type SkfHeadingProps = {
   /** Controls which heading element will be rendered. Should not be used to affect appearance */
   as?: "h1" | "h2" | "h3" | "h4";
@@ -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.
@@ -1146,38 +1164,38 @@ export type CustomElements = {
   "skf-accordion": Partial<SkfAccordionProps & BaseProps & BaseEvents>;
 
   /**
-   * Component to be used in forms or for interactivity
+   * The `<skf-alert>` is a type of notification that appears in-line
    * ---
    *
    *
+   * ### **Events:**
+   *  - **skf-alert-close** - Fires when the close button is clicked
+   *
    * ### **Slots:**
-   *  - _default_ - The Primary content
+   *  - _default_ - Alert message. **Notice!** See design principles for approved content
+   * - **link** - Slot for the link
    */
-  "skf-button": Partial<SkfButtonProps & BaseProps & BaseEvents>;
+  "skf-alert": Partial<SkfAlertProps & BaseProps & BaseEvents>;
 
   /**
-   * The `<skf-card>` can be used to group related subjects in a container
+   * Component to be used in forms or for interactivity
    * ---
    *
    *
    * ### **Slots:**
-   *  - _default_ - The card's main content
+   *  - _default_ - The Primary content
    */
-  "skf-card": Partial<SkfCardProps & BaseProps & BaseEvents>;
+  "skf-button": Partial<SkfButtonProps & BaseProps & BaseEvents>;
 
   /**
-   * The `<skf-alert>` is a type of notification that appears in-line
+   * The `<skf-card>` can be used to group related subjects in a container
    * ---
    *
    *
-   * ### **Events:**
-   *  - **skf-alert-close** - Fires when the close button is clicked
-   *
    * ### **Slots:**
-   *  - _default_ - Alert message. **Notice!** See design principles for approved content
-   * - **link** - Slot for the link
+   *  - _default_ - The card's main content
    */
-  "skf-alert": Partial<SkfAlertProps & BaseProps & BaseEvents>;
+  "skf-card": Partial<SkfCardProps & BaseProps & BaseEvents>;
 
   /**
    * The `<skf-checkbox>` component is used to create a checkbox input
@@ -1192,17 +1210,6 @@ export type CustomElements = {
    */
   "skf-checkbox": Partial<SkfCheckboxProps & BaseProps & BaseEvents>;
 
-  /**
-   * The `<Divider>` component can separate items from each other, to visually emphasize their lack of a relationship between groups of information
-   * ---
-   *
-   *
-   * ### **CSS Properties:**
-   *  - **--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)_
-   * - **--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)_
-   */
-  "skf-divider": Partial<SkfDividerProps & BaseProps & BaseEvents>;
-
   /**
    * The `<skf-collapse>` component is a general purpose container for content that can be collapsed / expanded.
    *
@@ -1222,6 +1229,17 @@ export type CustomElements = {
    */
   "skf-collapse": Partial<SkfCollapseProps & BaseProps & BaseEvents>;
 
+  /**
+   * The `<Divider>` component can separate items from each other, to visually emphasize their lack of a relationship between groups of information
+   * ---
+   *
+   *
+   * ### **CSS Properties:**
+   *  - **--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)_
+   * - **--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)_
+   */
+  "skf-divider": Partial<SkfDividerProps & BaseProps & BaseEvents>;
+
   /**
    * The `<Heading>` component is to deliniate content on a page. When using, take note not to skip heading levels.<br>
    * It extends the interface of native html `<h1>` to `<h4>` elements.
@@ -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>;
 };