@skf-design-system/ui-components 1.0.2-beta.5 → 1.0.2-beta.6

package/dist/index.d.ts

@@ -28,8 +28,8 @@ export { default as SkfProgress } from './components/progress/progress.js';
 export { default as SkfRadio } from './components/radio/radio.js';
 export { default as SkfSegmentedButtonItem } from './components/segmented-button/segmented-button-item.js';
 export { default as SkfSegmentedButton } from './components/segmented-button/segmented-button.js';
-export { default as SkfOptionGroup } from './components/select/select-option-group.js';
-export { default as SkfOption } from './components/select/select-option.js';
+export { default as SkfSelectOptionGroup } from './components/select/select-option-group.js';
+export { default as SkfSelectOption } from './components/select/select-option.js';
 export { default as SkfSelect } from './components/select/select.js';
 export { default as SkfStepperItem } from './components/stepper/stepper-item.js';
 export { default as SkfStepper } from './components/stepper/stepper.js';

package/dist/index.js

@@ -56,14 +56,14 @@ import { SkfDatepickerPopup as ao } from "./components/datepicker/datepicker-pop
 import { SkfDatepicker as co } from "./components/datepicker/datepicker.component.js";
 import { SkfDialog as Io } from "./components/dialog/dialog.component.js";
 import { SkfDivider as lo } from "./components/divider/divider.component.js";
-import { SkfDrawer as go } from "./components/drawer/drawer.component.js";
+import { SkfDrawer as bo } from "./components/drawer/drawer.component.js";
 import { SkfHeader as Do } from "./components/header/header.component.js";
 import { SkfHeading as vo } from "./components/heading/heading.component.js";
-import { SkfIcon as Oo } from "./components/icon/icon.component.js";
-import { SkfInput as Co } from "./components/input/input.component.js";
-import { SkfLink as ho } from "./components/link/link.component.js";
-import { SkfLoader as Go } from "./components/loader/loader.component.js";
-import { SkfLogo as Mo } from "./components/logo/logo.component.js";
+import { SkfIcon as Po } from "./components/icon/icon.component.js";
+import { SkfInput as Lo } from "./components/input/input.component.js";
+import { SkfLink as wo } from "./components/link/link.component.js";
+import { SkfLoader as Mo } from "./components/loader/loader.component.js";
+import { SkfLogo as Oo } from "./components/logo/logo.component.js";
 import { SkfMenuItem as Ro } from "./components/menu/menu-item.component.js";
 import { SkfMenu as jo } from "./components/menu/menu.component.js";
 import { SkfNavItem as yo } from "./components/nav/nav-item.component.js";
@@ -83,11 +83,11 @@ import { SkfTabPanel as nr } from "./components/tabs/tab-panel.component.js";
 import { SkfTab as dr } from "./components/tabs/tab.component.js";
 import { SkfTabs as Ir } from "./components/tabs/tabs.component.js";
 import { SkfTag as lr } from "./components/tag/tag.component.js";
-import { SkfTextArea as gr } from "./components/textarea/textarea.component.js";
+import { SkfTextArea as br } from "./components/textarea/textarea.component.js";
 import { SkfToastItem as Dr } from "./components/toast/toast-item.component.js";
 import { SkfToastWrapper as vr } from "./components/toast/toast-wrapper.component.js";
-import { SkfToast as Or } from "./components/toast/toast.component.js";
-import { SkfTooltip as Cr } from "./components/tooltip/tooltip.component.js";
+import { SkfToast as Pr } from "./components/toast/toast.component.js";
+import { SkfTooltip as Lr } from "./components/tooltip/tooltip.component.js";
 export {
   X as SkfAccordion,
   U as SkfAccordionItem,
@@ -102,26 +102,26 @@ export {
   ao as SkfDatepickerPopup,
   Io as SkfDialog,
   lo as SkfDivider,
-  go as SkfDrawer,
+  bo as SkfDrawer,
   Do as SkfHeader,
   vo as SkfHeading,
-  Oo as SkfIcon,
-  Co as SkfInput,
-  ho as SkfLink,
-  Go as SkfLoader,
-  Mo as SkfLogo,
+  Po as SkfIcon,
+  Lo as SkfInput,
+  wo as SkfLink,
+  Mo as SkfLoader,
+  Oo as SkfLogo,
   jo as SkfMenu,
   Ro as SkfMenuItem,
   Eo as SkfNav,
   yo as SkfNavItem,
-  tr as SkfOption,
-  or as SkfOptionGroup,
   Jo as SkfPopover,
   Qo as SkfProgress,
   Vo as SkfRadio,
   _o as SkfSegmentedButton,
   Yo as SkfSegmentedButtonItem,
   mr as SkfSelect,
+  tr as SkfSelectOption,
+  or as SkfSelectOptionGroup,
   Sr as SkfStepper,
   fr as SkfStepperItem,
   xr as SkfSwitch,
@@ -129,9 +129,9 @@ export {
   nr as SkfTabPanel,
   Ir as SkfTabs,
   lr as SkfTag,
-  gr as SkfTextArea,
-  Or as SkfToast,
+  br as SkfTextArea,
+  Pr as SkfToast,
   Dr as SkfToastItem,
   vr as SkfToastWrapper,
-  Cr as SkfTooltip
+  Lr as SkfTooltip
 };

package/dist/internal/base-classes/popover/popover.base.d.ts

@@ -19,7 +19,7 @@ export declare class SkfPopoverBase extends SkfElement {
     protected abortEventsController: AbortController;
     protected signal: AbortSignal;
     protected popoverController: PopoverController;
-    constructor();
+    connectedCallback(): void;
     disconnectedCallback(): void;
     protected _toggleOpen: (newValue?: boolean) => void;
     private _handleToggle;
@@ -28,10 +28,10 @@ export declare class SkfPopoverBase extends SkfElement {
     handleAnchorChange: () => Promise<void>;
     reposition: () => Promise<void>;
     handleEscapeKey: (e: KeyboardEvent) => void;
-    open(e: Event): void;
+    open: (e: Event) => void;
     /** @internal add additional open tasks here in UI component */
     openExtended(): void;
-    close(): void;
+    close: () => void;
     /** @internal add additional close tasks here in UI component */
     closeExtended(): void;
     /** @internal eventlisteners here should implement abort signal */

package/dist/internal/base-classes/popover/popover.base.js

@@ -1,13 +1,13 @@
-import { flip as O, offset as x, arrow as A, computePosition as C } from "@floating-ui/dom";
+import { flip as O, offset as C, arrow as x, computePosition as A } from "@floating-ui/dom";
 import { SkfElement as S } from "../../components/skf-element.js";
 import { PopoverController as P } from "../../controllers/popover.controller.js";
 import { uuid as _ } from "../../helpers/uuid.js";
 import { watch as f } from "../../helpers/watch.js";
 import { componentStyles as L } from "../../../styles/component.styles.js";
 import { nothing as F, html as y } from "lit";
-import { property as u, state as c, query as T } from "lit/decorators.js";
-import { classMap as j } from "lit/directives/class-map.js";
-import { styles as k } from "./popover.styles.js";
+import { property as u, state as c, query as k } from "lit/decorators.js";
+import { classMap as T } from "lit/directives/class-map.js";
+import { styles as j } from "./popover.styles.js";
 var M = Object.defineProperty, R = Object.getOwnPropertyDescriptor, r = (m, t, o, i) => {
   for (var e = i > 1 ? void 0 : i ? R(t, o) : t, n = m.length - 1, a; n >= 0; n--)
     (a = m[n]) && (e = (i ? a(t, o, e) : a(e)) || e);
@@ -15,7 +15,7 @@ var M = Object.defineProperty, R = Object.getOwnPropertyDescriptor, r = (m, t, o
 }, p;
 const s = (p = class extends S {
   constructor() {
-    super(), this.$popover = this, this.placement = "top", this.variant = "popup", this.isOpen = !1, this.offset = 0, this.arrow = !1, this.triggerEvent = "mouseenter", this.abortEventsController = new AbortController(), this.signal = this.abortEventsController.signal, this.popoverController = new P(this), this._toggleOpen = (t) => {
+    super(...arguments), this.$popover = this, this.placement = "top", this.variant = "popup", this.isOpen = !1, this.offset = 0, this.arrow = !1, this.triggerEvent = "mouseenter", this.abortEventsController = new AbortController(), this.signal = this.abortEventsController.signal, this.popoverController = new P(this), this._toggleOpen = (t) => {
       this.isOpen = t ?? !this.isOpen;
     }, this._handleToggle = (t) => {
       const o = t.newState === "open";
@@ -30,9 +30,9 @@ const s = (p = class extends S {
     }, this.reposition = async () => {
       var n, a, h;
       if (!this.$anchor) return;
-      const t = [O(), x(this.offset)];
-      this.arrow && t.push(A({ element: this.$arrow }));
-      const { x: o, y: i, middlewareData: e } = await C(this.$anchor, this.$popover, {
+      const t = [O(), C(this.offset)];
+      this.arrow && t.push(x({ element: this.$arrow }));
+      const { x: o, y: i, middlewareData: e } = await A(this.$anchor, this.$popover, {
         placement: this.placement,
         middleware: t,
         strategy: "fixed"
@@ -41,22 +41,29 @@ const s = (p = class extends S {
         left: `${String(o)}px`,
         top: `${String(i)}px`
       }), this.arrow) {
-        const d = this.placement.split("-")[0], l = { top: "bottom", right: "left", bottom: "top", left: "right" }[d] ?? "", v = (n = e.flip) == null ? void 0 : n.index, g = (a = e.arrow) == null ? void 0 : a.x, b = (h = e.arrow) == null ? void 0 : h.y, w = typeof g == "number" ? `${String(g)}px` : "", $ = typeof b == "number" ? `${String(b)}px` : "", E = {
+        const d = this.placement.split("-")[0], l = { top: "bottom", right: "left", bottom: "top", left: "right" }[d] ?? "", g = (n = e.flip) == null ? void 0 : n.index, v = (a = e.arrow) == null ? void 0 : a.x, b = (h = e.arrow) == null ? void 0 : h.y, $ = typeof v == "number" ? `${String(v)}px` : "", w = typeof b == "number" ? `${String(b)}px` : "", E = {
           bottom: 45,
           right: 135,
           top: 225,
           left: 315
         };
         Object.assign(this.$arrow.style, {
-          top: $,
-          [this.placement.includes("left") ? "right" : "left"]: w,
-          [v ? d : l]: "calc(var(--_skf-popover-arrow-size) * -1)",
-          rotate: `${(E[l] + (v ? 180 : 0)).toString()}deg`
+          top: w,
+          [this.placement.includes("left") ? "right" : "left"]: $,
+          [g ? d : l]: "calc(var(--_skf-popover-arrow-size) * -1)",
+          rotate: `${(E[l] + (g ? 180 : 0)).toString()}deg`
         });
       }
     }, this.handleEscapeKey = (t) => {
       t.key === "Escape" && this.close();
-    }, this.setAttribute("popover", "");
+    }, this.open = (t) => {
+      t.stopPropagation(), this._toggleOpen(!0), this.abortEventsController = new AbortController(), this.signal = this.abortEventsController.signal, document.addEventListener("keydown", this.handleEscapeKey, { signal: this.signal }), this.openExtended();
+    }, this.close = () => {
+      this.closeExtended(), this._toggleOpen(!1), this.abortEventsController.abort();
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.setAttribute("popover", "");
   }
   disconnectedCallback() {
     super.disconnectedCallback(), this.abortEventsController.abort();
@@ -78,17 +85,11 @@ const s = (p = class extends S {
         t && i || this.close();
       },
       { signal: this.signal }
-    ), this.$popover.id = _(this.$anchor.id), ["popup", "menu"].includes(this.variant) && (this.$anchor.setAttribute("aria-haspopup", "true"), this.setAttribute("aria-labelledby", this.$anchor.id)), ["menu"].includes(this.variant) && this.$anchor.setAttribute("aria-controls", this.$popover.id), ["popup"].includes(this.variant) && t && (this.role = "dialog"), ["tooltip"].includes(this.variant) && this.$anchor.addEventListener("focusin", this.open.bind(this), { signal: this.signal });
-  }
-  open(t) {
-    t.stopPropagation(), this._toggleOpen(!0), document.addEventListener("keydown", this.handleEscapeKey.bind(this), { signal: this.signal }), this.openExtended();
+    ), this.$popover.id = _(this.$anchor.id), ["popup", "menu"].includes(this.variant) && (this.$anchor.setAttribute("aria-haspopup", "true"), this.setAttribute("aria-labelledby", this.$anchor.id)), ["menu"].includes(this.variant) && this.$anchor.setAttribute("aria-controls", this.$popover.id), ["popup"].includes(this.variant) && t && (this.role = "dialog"), ["tooltip"].includes(this.variant) && this.$anchor.addEventListener("focusin", this.open, { signal: this.signal });
   }
   /** @internal add additional open tasks here in UI component */
   openExtended() {
   }
-  close() {
-    this.closeExtended(), this._toggleOpen(!1), document.removeEventListener("keydown", this.handleEscapeKey.bind(this));
-  }
   /** @internal add additional close tasks here in UI component */
   closeExtended() {
   }
@@ -105,11 +106,11 @@ const s = (p = class extends S {
     return ["popup", "menu"].includes(this.variant) && ((t = this.$anchor) == null || t.setAttribute("aria-expanded", this.isOpen ? "true" : "false")), y`
 			<div
 				@toggle=${this._handleToggle}
-				class=${j({ popover: !0, ...p.classMap })}
-				id="popover"
+				class=${T({ popover: !0, ...p.classMap })}
+				id="root"
 			>
 				<slot></slot>
-				${this.arrow ? y`<div class="popover__arrow" id="arrow"></div>` : F}
+				${this.arrow ? y`<div id="arrow"></div>` : F}
 			</div>
 		`;
   }
@@ -134,7 +135,7 @@ const s = (p = class extends S {
       return h;
     }
   }
-}, p.styles = [L, k], p.classMap = {}, p);
+}, p.styles = [L, j], p.classMap = {}, p);
 r([
   u()
 ], s.prototype, "placement", 2);
@@ -160,7 +161,7 @@ r([
   c()
 ], s.prototype, "triggerEvent", 2);
 r([
-  T("#arrow")
+  k("#arrow")
 ], s.prototype, "$arrow", 2);
 r([
   f("isOpen", { afterUpdate: !0 })

package/dist/internal/base-classes/popover/popover.styles.js

@@ -1,9 +1,7 @@
 import { css as o } from "lit";
 const e = o`
-	/* stylelint-disable selector-class-pattern */
 	@layer components {
 		:host {
-			background-color: var(--skf-bg-color-neutral-1);
 			border: none;
 			border-radius: var(--skf-border-radius-sm);
 			box-shadow: var(--skf-shadow-md);
@@ -19,15 +17,16 @@ const e = o`
 			display: none;
 		}
 
-		#popover {
+		#root {
+			background-color: var(--skf-bg-color-neutral-1);
 			height: 100%;
 			width: 100%;
 		}
 
-		.popover__arrow {
+		#arrow {
 			--_skf-popover-arrow-size: calc(6px * 0.7071);
 
-			background-color: var(--skf-bg-color-neutral-1);
+			background-color: inherit;
 			block-size: calc(var(--_skf-popover-arrow-size) * 2);
 			box-shadow: 1px 1px 2px 0 rgb(0 0 0 / 5%);
 			inline-size: calc(var(--_skf-popover-arrow-size) * 2);

package/dist/internal/components/hint/hint.component.d.ts

@@ -3,7 +3,11 @@ import { SkfElement } from '../../components/skf-element.js';
 import type { Severity } from '../../types.js';
 import { type CSSResultGroup } from 'lit';
 export declare class SkfHint extends SkfElement {
+    #private;
     static styles: CSSResultGroup;
+    disabled: boolean;
     severity?: Severity;
+    /** @internal */
+    _handleStateChange(property: string, _prev: unknown, next: unknown): void;
     render(): import("lit").TemplateResult<1>;
 }

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

@@ -1,21 +1,42 @@
+var v = (t) => {
+  throw TypeError(t);
+};
+var d = (t, e, s) => e.has(t) || v("Cannot " + s);
+var m = (t, e, s) => (d(t, e, "read from private field"), s ? s.call(t) : e.get(t)), h = (t, e, s) => e.has(t) ? v("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, s), c = (t, e, s, o) => (d(t, e, "write to private field"), o ? o.call(t, s) : e.set(t, s), s);
 import "../../../components/icon/icon.js";
-import { SkfElement as l } from "../skf-element.js";
-import { ICON_SEVERITY as n } from "../../constants/iconSeverity.js";
-import { componentStyles as v } from "../../../styles/component.styles.js";
-import { html as f } from "lit";
-import { property as y } from "lit/decorators.js";
-import { styles as 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 && a(i, m, r), r;
+import { SkfElement as O } from "../skf-element.js";
+import { ICON_SEVERITY as g } from "../../constants/iconSeverity.js";
+import { stateMap as w } from "../../helpers/stateMap.js";
+import { watch as C } from "../../helpers/watch.js";
+import { componentStyles as P } from "../../../styles/component.styles.js";
+import { html as _ } from "lit";
+import { property as b } from "lit/decorators.js";
+import { styles as S } from "./hint.styles.js";
+var j = Object.defineProperty, x = Object.getOwnPropertyDescriptor, f = (t, e, s, o) => {
+  for (var r = o > 1 ? void 0 : o ? x(e, s) : e, n = t.length - 1, l; n >= 0; n--)
+    (l = t[n]) && (r = (o ? l(e, s, r) : l(r)) || r);
+  return o && r && j(e, s, r), r;
+};
+const u = {
+  disabled: "disabled",
+  severity: ["error", "info", "success", "warning"]
 };
-const o = class o extends l {
+var p, a;
+const y = class y extends O {
+  constructor() {
+    super(...arguments);
+    h(this, p);
+    h(this, a);
+    c(this, p, this.attachInternals()), c(this, a, m(this, p).states), this.disabled = !1;
+  }
+  _handleStateChange(s, o, r) {
+    w(m(this, a), u[s]).set(r);
+  }
   render() {
-    return f`
+    return _`
 			<div id="root">
-				${this.severity && f`
-					<skf-icon color=${this.severity} name="${n[this.severity]}" size="xs">
+				${this.severity && _`
+					<skf-icon color=${this.severity} name="${g[this.severity]}" size="xs">
 					</skf-icon>
 				`}
 				<slot></slot>
@@ -23,11 +44,17 @@ const o = class o extends l {
 		`;
   }
 };
-o.styles = [v, d];
-let e = o;
-c([
-  y()
-], e.prototype, "severity");
+p = new WeakMap(), a = new WeakMap(), y.styles = [P, S];
+let i = y;
+f([
+  b({ type: Boolean })
+], i.prototype, "disabled", 2);
+f([
+  b({ type: String })
+], i.prototype, "severity", 2);
+f([
+  C(Object.keys(u))
+], i.prototype, "_handleStateChange", 1);
 export {
-  e as SkfHint
+  i as SkfHint
 };

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

@@ -1,35 +1,39 @@
-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);
+import { css as o } from "lit";
+const s = o`
+	@layer components {
+		@layer base {
+			#root {
+				--_skf-hint-color: var(--skf-text-color-secondary);
 
-		:host-context(:disabled) & {
-			color: inherit;
+				align-items: center;
+				color: var(--_skf-hint-color);
+				display: flex;
+				font-size: var(--skf-font-size-75);
+				font-weight: var(--skf-font-weight-medium);
+				gap: var(--skf-spacing-25);
+			}
 		}
 
-		:host([severity='alert']) & {
-			--_skf-hint-color: var(--skf-severity-fg-color-alert);
-		}
+		@layer mods {
+			:host(:state(disabled)) #root {
+				--_skf-hint-color: var(--skf-interactive-text-color-disabled);
+			}
 
-		:host([severity='error']) & {
-			--_skf-hint-color: var(--skf-severity-fg-color-error);
-		}
+			:host(:not(:state(disabled)):state(error)) #root {
+				--_skf-hint-color: var(--skf-severity-fg-color-error);
+			}
 
-		:host([severity='info']) & {
-			--_skf-hint-color: var(--skf-severity-fg-color-info);
-		}
+			:host(:not(:state(disabled)):state(info)) #root {
+				--_skf-hint-color: var(--skf-severity-fg-color-info);
+			}
 
-		:host([severity='success']) & {
-			--_skf-hint-color: var(--skf-severity-fg-color-success);
-		}
+			:host(:not(:state(disabled)):state(success)) #root {
+				--_skf-hint-color: var(--skf-severity-fg-color-success);
+			}
 
-		:host([severity='warning']) & {
-			--_skf-hint-color: var(--skf-severity-fg-color-warning);
+			:host(:not(:state(disabled)):state(warning)) #root {
+				--_skf-hint-color: var(--skf-severity-fg-color-warning);
+			}
 		}
 	}
 `;

package/dist/internal/types.d.ts

@@ -16,3 +16,7 @@ export type HeadingType = 'h1' | 'h2' | 'h3' | 'h4';
  * Forms
  */
 export type FormFieldSeverity = Exclude<Severity, 'error'>;
+/**
+ * States
+ */
+export type States<T extends string> = Record<string, T | T[]>;