@skf-design-system/ui-components 1.0.0-alpha.36 → 1.0.0-alpha.38

package/dist/components/loader/loader.component.d.ts

@@ -1,5 +1,6 @@
 import { SkfElement } from '../../internal/components/skf-element.js';
 import { type CSSResultGroup } from 'lit';
+type Size = 'md' | 'sm';
 /**
  * The `<skf-loader>` component is a progress indicator that uses circular indicators for short, indeterminate activities
  *
@@ -15,7 +16,10 @@ export declare class SkfLoader extends SkfElement {
     /** If true, inverts the color (to be used on colored backgrounds) */
     invert: boolean;
     /** Defines the size of the loader */
-    size?: 'md' | 'sm';
+    size: Size;
     connectedCallback(): void;
+    /** @internal */
+    _handleStateChange(property: string, _prev: unknown, next: unknown): void;
     render(): import("lit").TemplateResult<1>;
 }
+export {};

package/dist/components/loader/loader.component.js

@@ -1,29 +1,40 @@
-var m = (t) => {
+var y = (t) => {
   throw TypeError(t);
 };
-var f = (t, e, r) => e.has(t) || m("Cannot " + r);
-var n = (t, e, r) => (f(t, e, "read from private field"), r ? r.call(t) : e.get(t)), h = (t, e, r) => e.has(t) ? m("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, r), u = (t, e, r, l) => (f(t, e, "write to private field"), l ? l.call(t, r) : e.set(t, r), r);
-import { SkfElement as b } from "../../internal/components/skf-element.js";
-import { componentStyles as y } from "../../styles/component.styles.js";
-import { html as g } from "lit";
-import { property as c } from "lit/decorators.js";
-import { styles as C } from "./loader.styles.js";
-var _ = Object.defineProperty, p = (t, e, r, l) => {
-  for (var i = void 0, o = t.length - 1, v; o >= 0; o--)
-    (v = t[o]) && (i = v(e, r, i) || i);
-  return i && _(e, r, i), i;
-}, s;
-const d = class d extends b {
+var b = (t, e, r) => e.has(t) || y("Cannot " + r);
+var m = (t, e, r) => (b(t, e, "read from private field"), r ? r.call(t) : e.get(t)), v = (t, e, r) => e.has(t) ? y("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, r), h = (t, e, r, i) => (b(t, e, "write to private field"), i ? i.call(t, r) : e.set(t, r), r);
+import { SkfElement as _ } from "../../internal/components/skf-element.js";
+import { stateMap as g } from "../../internal/helpers/stateMap.js";
+import { watch as C } from "../../internal/helpers/watch.js";
+import { componentStyles as O } from "../../styles/component.styles.js";
+import { html as P } from "lit";
+import { property as d } from "lit/decorators.js";
+import { styles as S } from "./loader.styles.js";
+var j = Object.defineProperty, w = Object.getOwnPropertyDescriptor, l = (t, e, r, i) => {
+  for (var s = i > 1 ? void 0 : i ? w(e, r) : e, n = t.length - 1, c; n >= 0; n--)
+    (c = t[n]) && (s = (i ? c(e, r, s) : c(s)) || s);
+  return i && s && j(e, r, s), s;
+};
+const u = {
+  invert: "invert",
+  size: ["md", "sm"]
+};
+var o, p;
+const f = class f extends _ {
   constructor() {
     super(...arguments);
-    h(this, s);
-    u(this, s, this.attachInternals()), this.ariaLabel = "Loading...", this.invert = !1, this.size = "md";
+    v(this, o);
+    v(this, p);
+    h(this, o, this.attachInternals()), h(this, p, m(this, o).states), this.ariaLabel = "Loading...", this.invert = !1, this.size = "md";
   }
   connectedCallback() {
-    super.connectedCallback(), n(this, s).role = "progressbar", n(this, s).ariaLive = "polite";
+    super.connectedCallback(), this.role = "progressbar", this.ariaLive = "polite";
+  }
+  _handleStateChange(r, i, s) {
+    g(m(this, p), u[r]).set(s);
   }
   render() {
-    return g`
+    return P`
 			<div id="root">
 				<div class="circle"></div>
 				<div class="circle"></div>
@@ -32,17 +43,20 @@ const d = class d extends b {
 		`;
   }
 };
-s = new WeakMap(), d.styles = [y, C];
-let a = d;
-p([
-  c({ reflect: !0, attribute: "aria-label" })
-], a.prototype, "ariaLabel");
-p([
-  c({ type: Boolean })
-], a.prototype, "invert");
-p([
-  c({ reflect: !0 })
-], a.prototype, "size");
+o = new WeakMap(), p = new WeakMap(), f.styles = [O, S];
+let a = f;
+l([
+  d({ type: String, attribute: "aria-label" })
+], a.prototype, "ariaLabel", 2);
+l([
+  d({ type: Boolean })
+], a.prototype, "invert", 2);
+l([
+  d({ type: String })
+], a.prototype, "size", 2);
+l([
+  C(Object.keys(u))
+], a.prototype, "_handleStateChange", 1);
 export {
   a as SkfLoader
 };

package/dist/components/loader/loader.styles.js

@@ -33,17 +33,13 @@ const o = a`
 		}
 
 		@layer mods {
-			:host([invert]) {
-				#root {
-					--_skf-loader-color: var(--skf-bg-color-neutral-1);
-				}
+			:host(:state(invert)) #root {
+				--_skf-loader-color: var(--skf-bg-color-neutral-1);
 			}
 
-			:host([size='sm']) {
-				#root {
-					--_skf-loader-gap: var(--skf-spacing-25);
-					--_skf-loader-size: var(--skf-size-4);
-				}
+			:host(:state(sm)) #root {
+				--_skf-loader-gap: var(--skf-spacing-25);
+				--_skf-loader-size: var(--skf-size-4);
 			}
 		}
 	}

package/dist/components/menu/menu.component.js

@@ -6,7 +6,7 @@ const s = class s extends t {
   }
   /** @internal */
   addEventListeners(i) {
-    i.addEventListener(this.triggerEvent, this.open.bind(this), { signal: this.signal });
+    i.addEventListener(this.triggerEvent, this.open, { signal: this.signal });
   }
 };
 s.styles = [t.styles, r];

package/dist/components/select/select.styles.js

@@ -52,6 +52,7 @@ const t = [
 				gap: 0 var(--skf-spacing-75);
 				justify-content: space-between;
 				padding-inline: var(--skf-spacing-75);
+				white-space: nowrap;
 
 				&:hover {
 					--_skf-select-button-bg-color: var(--skf-interactive-bg-color-secondary-hover);

package/dist/custom-elements.json

@@ -820,6 +820,22 @@
           "description": "The `<skf-loader>` component is a progress indicator that uses circular indicators for short, indeterminate activities",
           "name": "SkfLoader",
           "members": [
+            {
+              "kind": "field",
+              "name": "#internals",
+              "privacy": "private",
+              "type": {
+                "text": "ElementInternals"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#states",
+              "privacy": "private",
+              "type": {
+                "text": "CustomStateSet"
+              }
+            },
             {
               "kind": "field",
               "name": "ariaLabel",
@@ -828,8 +844,7 @@
               },
               "default": "'Loading...'",
               "description": "Defines the aria-label",
-              "attribute": "aria-label",
-              "reflects": true
+              "attribute": "aria-label"
             },
             {
               "kind": "field",
@@ -845,12 +860,14 @@
               "kind": "field",
               "name": "size",
               "type": {
-                "text": "'md' | 'sm' | undefined"
+                "text": "Size"
               },
               "default": "'md'",
               "description": "Defines the size of the loader",
               "attribute": "size",
-              "reflects": true
+              "expandedType": {
+                "text": "'sm' | 'md'"
+              }
             }
           ],
           "attributes": [
@@ -875,11 +892,14 @@
             {
               "name": "size",
               "type": {
-                "text": "'md' | 'sm' | undefined"
+                "text": "Size"
               },
               "default": "'md'",
               "description": "Defines the size of the loader",
-              "fieldName": "size"
+              "fieldName": "size",
+              "expandedType": {
+                "text": "'sm' | 'md'"
+              }
             }
           ],
           "superclass": {

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

@@ -16,8 +16,8 @@ export declare class SkfPopoverBase extends SkfElement {
     /** @internal */
     triggerEvent: 'mouseenter' | 'click';
     $arrow: HTMLElement;
-    abortEventsController: AbortController;
-    signal: AbortSignal;
+    protected abortEventsController: AbortController;
+    protected signal: AbortSignal;
     protected popoverController: PopoverController;
     constructor();
     disconnectedCallback(): void;
@@ -28,7 +28,7 @@ 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;

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

@@ -56,6 +56,8 @@ const s = (p = class extends S {
       }
     }, this.handleEscapeKey = (t) => {
       t.key === "Escape" && this.close();
+    }, 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.setAttribute("popover", "");
   }
   disconnectedCallback() {
@@ -80,9 +82,6 @@ const s = (p = class extends S {
       { 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), this.abortEventsController = new AbortController(), this.signal = this.abortEventsController.signal, document.addEventListener("keydown", this.handleEscapeKey.bind(this), { signal: this.signal }), this.openExtended();
-  }
   /** @internal add additional open tasks here in UI component */
   openExtended() {
   }

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

@@ -176,7 +176,7 @@
         {
           "name": "size",
           "description": "Defines the size of the loader",
-          "values": [{ "name": "md" }, { "name": "sm" }]
+          "values": [{ "name": "Size" }]
         }
       ],
       "references": []

package/dist/web-types.json

@@ -393,7 +393,7 @@
             {
               "name": "size",
               "description": "Defines the size of the loader",
-              "value": { "type": "'md' | 'sm' | undefined", "default": "'md'" }
+              "value": { "type": "Size", "default": "'md'" }
             }
           ],
           "events": [],
@@ -412,7 +412,7 @@
               {
                 "name": "size",
                 "description": "Defines the size of the loader",
-                "type": "'md' | 'sm' | undefined"
+                "type": "Size"
               }
             ],
             "events": []

package/package.json

@@ -34,15 +34,15 @@
   "sideEffects": true,
   "type": "module",
   "types": "./dist/index.d.ts",
-  "version": "1.0.0-alpha.36",
+  "version": "1.0.0-alpha.38",
   "dependencies": {
     "@floating-ui/dom": "^1.7.0",
     "@js-temporal/polyfill": "^0.5.1"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.6",
-    "@commitlint/cli": "^19.8.0",
-    "@commitlint/config-conventional": "^19.8.0",
+    "@commitlint/cli": "^19.8.1",
+    "@commitlint/config-conventional": "^19.8.1",
     "@custom-elements-manifest/analyzer": "^0.10.4",
     "@eslint/js": "^9.26.0",
     "@skf-design-system/ui-assets": "0.1.3-beta.4",
@@ -56,7 +56,7 @@
     "@storybook/theming": "^8.6.12",
     "@storybook/web-components": "^8.6.12",
     "@storybook/web-components-vite": "^8.6.12",
-    "@types/node": "^22.15.12",
+    "@types/node": "^22.15.17",
     "@wc-toolkit/module-path-resolver": "^1.0.0",
     "@wc-toolkit/storybook-helpers": "^1.1.2",
     "@wc-toolkit/type-parser": "^1.0.3",
@@ -70,7 +70,7 @@
     "eslint-plugin-lit-a11y": "^4.1.4",
     "eslint-plugin-wc": "^3.0.1",
     "husky": "^9.1.7",
-    "lint-staged": "^15.5.1",
+    "lint-staged": "^16.0.0",
     "lit": "^3.3.0",
     "postcss-styled-syntax": "^0.7.1",
     "prettier": "3.5.3",
@@ -82,7 +82,7 @@
     "stylelint-value-no-unknown-custom-properties": "^6.0.1",
     "tsc-alias": "^1.8.16",
     "typescript": "^5.8.3",
-    "typescript-eslint": "^8.32.0",
+    "typescript-eslint": "^8.32.1",
     "vite": "^6.3.5",
     "vite-tsconfig-paths": "^5.1.4"
   },