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

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

@@ -25,7 +25,7 @@ export declare class SkfAccordion extends SkfElement {
     /** If true, will truncate all headings in collapsed state */
     truncate: boolean;
     /** @internal */
-    private $accordionItems;
+    private _accordionItems;
     protected updated(_changedProperties: PropertyValues): void;
     /** @internal */
     private get items();

package/dist/components/accordion/accordion.component.js

@@ -22,7 +22,7 @@ const n = class n extends p {
   }
   /** @internal */
   get items() {
-    return [...this.$accordionItems].filter((t) => t.localName === "skf-accordion-item");
+    return [...this._accordionItems].filter((t) => t.localName === "skf-accordion-item");
   }
   _onChildToggle(t) {
     if (this.multiple || t.defaultPrevented) return;
@@ -66,7 +66,7 @@ s([
 ], e.prototype, "truncate");
 s([
   d()
-], e.prototype, "$accordionItems");
+], e.prototype, "_accordionItems");
 export {
   e as SkfAccordion
 };

package/dist/components/datepicker/datepicker.component.js

@@ -344,6 +344,7 @@ const _ = class _ extends C {
 				</label>
 				${this.hint && y`
 					<skf-hint
+						?disabled=${this.disabled}
 						aria-live=${this.invalid ? "assertive" : "polite"}
 						id="hint"
 						severity=${u(O(this.invalid, this.severity))}

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

@@ -13,6 +13,7 @@ type SkfDividerColor = BorderColor;
  * @tagname skf-divider
  */
 export declare class SkfDivider extends SkfElement {
+    #private;
     static styles: CSSResultGroup;
     /** Defines the Divider color */
     color: SkfDividerColor;
@@ -21,5 +22,7 @@ export declare class SkfDivider extends SkfElement {
     /** If true, renders the divider vertically */
     vertical: boolean;
     connectedCallback(): void;
+    /** @internal */
+    _handleStateChange(property: string, _prev: unknown, next: unknown): void;
 }
 export {};

package/dist/components/divider/divider.component.js

@@ -1,32 +1,53 @@
-import { SkfElement as n } from "../../internal/components/skf-element.js";
-import { componentStyles as m } from "../../styles/component.styles.js";
+var _ = (t) => {
+  throw TypeError(t);
+};
+var d = (t, e, r) => e.has(t) || _("Cannot " + r);
+var h = (t, e, r) => (d(t, e, "read from private field"), r ? r.call(t) : e.get(t)), m = (t, e, r) => e.has(t) ? _("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, r), y = (t, e, r, s) => (d(t, e, "write to private field"), s ? s.call(t, r) : e.set(t, r), r);
+import { SkfElement as O } from "../../internal/components/skf-element.js";
+import { stateMap as b } from "../../internal/helpers/stateMap.js";
+import { watch as g } from "../../internal/helpers/watch.js";
+import { componentStyles as C } from "../../styles/component.styles.js";
 import "lit";
-import { property as o } from "lit/decorators.js";
-import { styles as f } from "./divider.styles.js";
-var h = Object.defineProperty, a = (l, s, c, v) => {
-  for (var t = void 0, r = l.length - 1, p; r >= 0; r--)
-    (p = l[r]) && (t = p(s, c, t) || t);
-  return t && h(s, c, t), t;
+import { property as v } from "lit/decorators.js";
+import { styles as P } from "./divider.styles.js";
+var j = Object.defineProperty, w = Object.getOwnPropertyDescriptor, c = (t, e, r, s) => {
+  for (var o = s > 1 ? void 0 : s ? w(e, r) : e, l = t.length - 1, n; l >= 0; l--)
+    (n = t[l]) && (o = (s ? n(e, r, o) : n(o)) || o);
+  return s && o && j(e, r, o), o;
+};
+const u = {
+  color: ["emphasised", "inverse", "primary", "secondary", "tertiary"],
+  vertical: "vertical"
 };
-const i = class i extends n {
+var i, p;
+const f = class f extends O {
   constructor() {
-    super(...arguments), this.color = "primary", this.decorative = !1, this.vertical = !1;
+    super(...arguments);
+    m(this, i);
+    m(this, p);
+    y(this, i, this.attachInternals()), y(this, p, h(this, i).states), this.color = "primary", this.decorative = !1, this.vertical = !1;
   }
   connectedCallback() {
     super.connectedCallback(), this.role = this.decorative ? "generic" : "separator", this.ariaOrientation = this.vertical ? "vertical" : "horizontal";
   }
+  _handleStateChange(r, s, o) {
+    b(h(this, p), u[r]).set(o);
+  }
 };
-i.styles = [m, f];
-let e = i;
-a([
-  o({ reflect: !0 })
-], e.prototype, "color");
-a([
-  o({ type: Boolean })
-], e.prototype, "decorative");
-a([
-  o({ type: Boolean, reflect: !0 })
-], e.prototype, "vertical");
+i = new WeakMap(), p = new WeakMap(), f.styles = [C, P];
+let a = f;
+c([
+  v({ type: String })
+], a.prototype, "color", 2);
+c([
+  v({ type: Boolean })
+], a.prototype, "decorative", 2);
+c([
+  v({ type: Boolean })
+], a.prototype, "vertical", 2);
+c([
+  g(Object.keys(u))
+], a.prototype, "_handleStateChange", 1);
 export {
-  e as SkfDivider
+  a as SkfDivider
 };

package/dist/components/divider/divider.styles.js

@@ -1,5 +1,5 @@
 import { css as r } from "lit";
-const e = r`
+const o = r`
 	@layer components {
 		@layer base {
 			:host {
@@ -9,7 +9,7 @@ const e = r`
 				display: block;
 			}
 
-			:host(:not([vertical])) {
+			:host(:not(:state(vertical))) {
 				border-top: var(--_skf-divider-border);
 				margin-block: var(--skf-divider-spacing, var(--skf-spacing-100));
 				margin-inline: var(--skf-divider-inset, 0);
@@ -17,31 +17,31 @@ const e = r`
 		}
 
 		@layer mods {
-			:host([vertical]) {
+			:host(:state(vertical)) {
 				block-size: 100%;
 				border-left: var(--_skf-divider-border);
 				margin-block: var(--skf-divider-inset, 0);
 				margin-inline: var(--skf-divider-spacing, var(--skf-spacing-100));
 			}
 
-			:host([color='emphasised']) {
+			:host(:state(emphasised)) {
 				--_skf-divider-border-color: var(--skf-border-color-emphasised);
 			}
 
-			:host([color='inverse']) {
+			:host(:state(inverse)) {
 				--_skf-divider-border-color: var(--skf-border-color-inverse);
 			}
 
-			:host([color='secondary']) {
+			:host(:state(secondary)) {
 				--_skf-divider-border-color: var(--skf-border-color-secondary);
 			}
 
-			:host([color='tertiary']) {
+			:host(:state(tertiary)) {
 				--_skf-divider-border-color: var(--skf-border-color-tertiary);
 			}
 		}
 	}
 `;
 export {
-  e as styles
+  o as styles
 };

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

@@ -8,6 +8,8 @@ import { type CSSResultGroup } from 'lit';
  * - add tests
  * - add documentation
  */
+type Placement = 'left' | 'right';
+type Size = 'sm' | 'md' | 'lg';
 /**
  * The `<skf-drawer>` is a modal component that displays content and toggle by sliding from left/right viewport edge
  *
@@ -22,6 +24,7 @@ import { type CSSResultGroup } from 'lit';
  * @tagname skf-drawer
  */
 export declare class SkfDrawer extends SkfElement {
+    #private;
     static styles: CSSResultGroup;
     /** @internal */
     private _abortController?;
@@ -32,15 +35,17 @@ export declare class SkfDrawer extends SkfElement {
     /** Heading for the Drawer */
     heading?: string;
     /** Sets the max-width */
-    size: 'sm' | 'md' | 'lg';
+    size: Size;
     /** If true, Drawer is open */
     open: boolean;
     /** Placement of the Drawer */
-    placement: 'left' | 'right';
+    placement: Placement;
     /** @internal */
     $dialog: HTMLDialogElement;
     disconnectedCallback(): void;
     /** @internal */
+    _handleStateChange(property: string, _prev: unknown, next: unknown): void;
+    /** @internal */
     _placementChanged: () => void;
     /** @internal */
     _openChanged(): Promise<void>;
@@ -59,3 +64,4 @@ export declare class SkfDrawer extends SkfElement {
     close(): void;
     render(): import("lit").TemplateResult<1>;
 }
+export {};

package/dist/components/drawer/drawer.component.js

@@ -1,21 +1,35 @@
+var _ = (e) => {
+  throw TypeError(e);
+};
+var y = (e, i, t) => i.has(e) || _("Cannot " + t);
+var d = (e, i, t) => (y(e, i, "read from private field"), t ? t.call(e) : i.get(e)), m = (e, i, t) => i.has(e) ? _("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(e) : i.set(e, t), g = (e, i, t, o) => (y(e, i, "write to private field"), o ? o.call(e, t) : i.set(e, t), t);
 import "../icon/icon.js";
-import { SkfElement as m } from "../../internal/components/skf-element.js";
-import { watch as d } from "../../internal/helpers/watch.js";
-import { MOTION_DURATIONS as p } from "@skf-design-system/ui-assets";
-import { componentStyles as f } from "../../styles/component.styles.js";
-import { html as g } from "lit";
-import { property as r, query as u } from "lit/decorators.js";
-import { styles as _ } from "./drawer.styles.js";
-var b = Object.defineProperty, w = Object.getOwnPropertyDescriptor, a = (h, t, i, e) => {
-  for (var o = e > 1 ? void 0 : e ? w(t, i) : t, n = h.length - 1, l; n >= 0; n--)
-    (l = h[n]) && (o = (e ? l(t, i, o) : l(o)) || o);
-  return e && o && b(t, i, o), o;
+import { SkfElement as I } from "../../internal/components/skf-element.js";
+import { stateMap as D } from "../../internal/helpers/stateMap.js";
+import { watch as f } from "../../internal/helpers/watch.js";
+import { MOTION_DURATIONS as b } from "@skf-design-system/ui-assets";
+import { componentStyles as k } from "../../styles/component.styles.js";
+import { html as C } from "lit";
+import { property as p, query as $ } from "lit/decorators.js";
+import { styles as E } from "./drawer.styles.js";
+var A = Object.defineProperty, v = Object.getOwnPropertyDescriptor, n = (e, i, t, o) => {
+  for (var s = o > 1 ? void 0 : o ? v(i, t) : i, r = e.length - 1, l; r >= 0; r--)
+    (l = e[r]) && (s = (o ? l(i, t, s) : l(s)) || s);
+  return o && s && A(i, t, s), s;
+};
+const w = {
+  placement: ["left", "right"],
+  size: ["sm", "md", "lg"]
 };
-const c = class c extends m {
+var h, c;
+const u = class u extends I {
   constructor() {
-    super(...arguments), this.closeButtonAriaLabel = "Close dialog", this.size = "md", this.open = !1, this.placement = "right", this._placementChanged = () => {
-      this.$dialog.getAnimations().forEach((i) => {
-        i.cancel();
+    super(...arguments);
+    m(this, h);
+    m(this, c);
+    g(this, h, this.attachInternals()), g(this, c, d(this, h).states), this.closeButtonAriaLabel = "Close dialog", this.size = "md", this.open = !1, this.placement = "right", this._placementChanged = () => {
+      this.$dialog.getAnimations().forEach((o) => {
+        o.cancel();
       });
     }, this._clickstartInDialog = !1, this._handleMouseDown = (t) => {
       this._clickIsInsideElement(t, this.$dialog) && (this._clickstartInDialog = !0);
@@ -30,6 +44,9 @@ const c = class c extends m {
     var t;
     super.disconnectedCallback(), (t = this._abortController) == null || t.abort();
   }
+  _handleStateChange(t, o, s) {
+    D(d(this, c), w[t]).set(s);
+  }
   async _openChanged() {
     var t;
     this.open ? (this._abortController = new AbortController(), this._signal = this._abortController.signal, this.$dialog.showModal(), this._startListeners(), await this._animateDrawer(), this.emit("skf-drawer-opened")) : ((t = this._abortController) == null || t.abort(), this.emit("skf-drawer-closing"), await this._animateDrawer(), this.emit("skf-drawer-closed"), this.$dialog.close());
@@ -47,26 +64,26 @@ const c = class c extends m {
     });
   }
   /** @internal */
-  _clickIsInsideElement(t, i) {
-    const e = i.getBoundingClientRect();
-    return e.top <= t.clientY && t.clientY <= e.top + e.height && e.left <= t.clientX && t.clientX <= e.left + e.width;
+  _clickIsInsideElement(t, o) {
+    const s = o.getBoundingClientRect();
+    return s.top <= t.clientY && t.clientY <= s.top + s.height && s.left <= t.clientX && t.clientX <= s.left + s.width;
   }
   /** @internal */
   _animateDrawer() {
-    const t = this.open ? [{ opacity: 0 }, { opacity: 0.4 }] : [{ opacity: 0 }], i = this.open ? [{ translate: "0" }] : [{ translate: this.placement === "right" ? "100%" : "-100%" }];
-    return new Promise((e) => {
+    const t = this.open ? [{ opacity: 0 }, { opacity: 0.4 }] : [{ opacity: 0 }], o = this.open ? [{ translate: "0" }] : [{ translate: this.placement === "right" ? "100%" : "-100%" }];
+    return new Promise((s) => {
       requestAnimationFrame(() => {
-        const o = this.$dialog.animate(t, {
-          duration: p.normal,
+        const r = this.$dialog.animate(t, {
+          duration: b.normal,
           fill: "forwards",
           pseudoElement: "::backdrop"
-        }), n = this.$dialog.animate(i, {
-          duration: p.normal,
+        }), l = this.$dialog.animate(o, {
+          duration: b.normal,
           easing: "ease-out",
           fill: "forwards"
         });
-        Promise.all([o.finished, n.finished]).then(() => {
-          e("Animations finished");
+        Promise.all([r.finished, l.finished]).then(() => {
+          s("Animations finished");
         }).catch(() => {
           throw new Error("Animation failed");
         });
@@ -77,7 +94,7 @@ const c = class c extends m {
     this.open = !1;
   }
   render() {
-    return g`
+    return C`
 			<dialog @mousedown="${this._handleMouseDown}" @mouseup="${this._handleMouseUp}">
 				<header>
 					<h2>${this.heading}</h2>
@@ -94,32 +111,35 @@ const c = class c extends m {
 		`;
   }
 };
-c.styles = [f, _];
-let s = c;
-a([
-  r({ attribute: "close-button-aria-label" })
-], s.prototype, "closeButtonAriaLabel", 2);
-a([
-  r()
-], s.prototype, "heading", 2);
-a([
-  r({ reflect: !0 })
-], s.prototype, "size", 2);
-a([
-  r({ type: Boolean, reflect: !0 })
-], s.prototype, "open", 2);
-a([
-  r({ reflect: !0 })
-], s.prototype, "placement", 2);
-a([
-  u("dialog")
-], s.prototype, "$dialog", 2);
-a([
-  d("placement", { waitUntilFirstUpdate: !0 })
-], s.prototype, "_placementChanged", 2);
-a([
-  d("open", { waitUntilFirstUpdate: !0, afterUpdate: !0 })
-], s.prototype, "_openChanged", 1);
+h = new WeakMap(), c = new WeakMap(), u.styles = [k, E];
+let a = u;
+n([
+  p({ type: String, attribute: "close-button-aria-label" })
+], a.prototype, "closeButtonAriaLabel", 2);
+n([
+  p({ type: String })
+], a.prototype, "heading", 2);
+n([
+  p({ type: String })
+], a.prototype, "size", 2);
+n([
+  p({ type: Boolean, reflect: !0, useDefault: !0 })
+], a.prototype, "open", 2);
+n([
+  p({ type: String })
+], a.prototype, "placement", 2);
+n([
+  $("dialog")
+], a.prototype, "$dialog", 2);
+n([
+  f(Object.keys(w))
+], a.prototype, "_handleStateChange", 1);
+n([
+  f("placement", { waitUntilFirstUpdate: !0 })
+], a.prototype, "_placementChanged", 2);
+n([
+  f("open", { waitUntilFirstUpdate: !0, afterUpdate: !0 })
+], a.prototype, "_openChanged", 1);
 export {
-  s as SkfDrawer
+  a as SkfDrawer
 };

package/dist/components/drawer/drawer.styles.js

@@ -1,19 +1,20 @@
 import { css as e } from "lit";
 const o = e`
 	@layer components {
-		dialog {
-			all: unset;
-			background-color: var(--skf-bg-color-neutral-1);
-			display: none;
-			flex-direction: column;
-			inline-size: min(100%, var(--_skf-drawer-size, 540px));
-			inset-block: 0;
-			inset-inline: var(--_skf-drawer-inset, auto 0);
-			position: fixed;
-			translate: 100% 0;
+		@layer base {
+			dialog {
+				--_skf-drawer-inset: auto 0;
+				--_skf-drawer-size: 540px;
 
-			&[open] {
-				display: flex;
+				all: unset;
+				background-color: var(--skf-bg-color-neutral-1);
+				display: none;
+				flex-direction: column;
+				inline-size: min(100%, var(--_skf-drawer-size));
+				inset-block: 0;
+				inset-inline: var(--_skf-drawer-inset);
+				position: fixed;
+				translate: 100% 0;
 
 				&::backdrop {
 					background-color: var(--skf-bg-color-neutral-7);
@@ -21,48 +22,54 @@ const o = e`
 				}
 			}
 
-			:host([placement='left']) & {
-				--_skf-drawer-inset: 0 auto;
+			header {
+				align-items: center;
+				background-color: var(--skf-bg-color-emphasised);
+				block-size: var(--skf-size-48);
+				color: var(--skf-text-color-inverse);
+				display: flex;
+				justify-content: space-between;
+				padding-inline: var(--skf-box-spacing);
+			}
 
-				translate: -100% 0;
+			h2 {
+				font-size: var(--skf-font-size-200);
 			}
 
-			:host([size='sm']) & {
-				--_skf-drawer-size: 400px;
+			#close-button {
+				display: inline-flex;
 			}
 
-			:host([size='lg']) & {
-				--_skf-drawer-size: 680px;
+			#body {
+				display: block;
+				flex: auto;
+				padding: var(--skf-box-spacing);
 			}
 		}
 
-		header {
-			align-items: center;
-			background-color: var(--skf-bg-color-emphasised);
-			block-size: var(--skf-size-48);
-			color: var(--skf-text-color-inverse);
-			display: flex;
-			justify-content: space-between;
-			padding-inline: var(--skf-box-spacing);
+		@layer states {
+			#close-button:focus-visible {
+				border-radius: var(--skf-border-radius-sm);
+				outline: var(--skf-border-width-sm) solid var(--skf-interactive-text-color-inverse);
+			}
 		}
 
-		h2 {
-			font-size: var(--skf-font-size-200);
-		}
+		@layer mods {
+			dialog[open] {
+				display: flex;
+			}
 
-		#close-button {
-			display: inline-flex;
+			:host(:state(left)) dialog {
+				--_skf-drawer-inset: 0 auto;
+			}
 
-			&:focus-visible {
-				border-radius: var(--skf-border-radius-sm);
-				outline: var(--skf-border-width-sm) solid var(--skf-interactive-text-color-inverse);
+			:host(:state(sm)) dialog {
+				--_skf-drawer-size: 400px;
 			}
-		}
 
-		#body {
-			display: block;
-			flex: auto;
-			padding: var(--skf-box-spacing);
+			:host(:state(lg)) dialog {
+				--_skf-drawer-size: 680px;
+			}
 		}
 	}
 `;

package/dist/components/input/input.component.js

@@ -191,6 +191,7 @@ const m = class m extends c {
 				</label>
 				${this.hint && h`
 					<skf-hint
+						?disabled=${this.disabled}
 						aria-live=${this.invalid ? "assertive" : "polite"}
 						id="hint"
 						severity=${n(b(this.invalid, this.severity))}

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

@@ -2,54 +2,51 @@ import '../icon/icon.js';
 import { SkfElement } from '../../internal/components/skf-element.js';
 import type { Icon } from '../../internal/types.js';
 import { type CSSResultGroup } from 'lit';
-type SkfLinkType = HTMLButtonElement['type'];
+type Color = 'primary' | 'inverse';
 /**
- * The `<skf-link>` can be used as either a regular link or a link styled semantic button
+ * The `<skf-link>` can be used as either a regular link or a semantic button. The button variant is
+ * intended to be used for triggering javascript functions, not handling forms.
  *
  * @documentation See [zeroheight](https://zeroheight.com/****) for design principles
  *
+ * @event {CustomEvent} skf-link-click - Fired when the link is clicked
+ *
  * @slot - The links' main content
  *
  * @tagname skf-link
  */
 export declare class SkfLink extends SkfElement {
+    #private;
     static styles: CSSResultGroup;
-    static classMap: {};
-    /** @internal */
-    private _onClick?;
     /** Defines the semantic element to render */
-    as: 'button' | 'a';
+    as: 'button' | 'link';
     /** Defines the text-color */
-    color: 'primary' | 'inverse';
+    color: Color;
     /** If true, disables the link */
     disabled: boolean;
     /** If defined, downloads the url */
-    download?: string;
+    download: boolean;
     /** If defined, loads url on click  */
     href?: string;
     /** If defined, renders an icon before or after the text */
     icon?: Icon;
-    /** Defines the position of the icon in relation to the text */
-    iconPlacement: 'left' | 'right';
-    /** If defined, accepts a function that runs on click. Forwards optional route as second argument. */
-    set onClick(onClickFn: ((event: Event, route?: string) => void) | undefined);
-    get onClick(): ((event: Event, route?: string) => void) | undefined;
+    /** If true, the icon is placed to the right in relation to the text */
+    iconRight: boolean;
     /** If defined, describes the relationship between a linked resource and the current document */
     rel?: string;
-    /** If defined, used on conjunction with onClick property, second argument */
+    /** If defined, used on conjunction with onClick property. **Notice!** Only applicable to as=button. */
     route?: string;
     /** If true, fills the parents horizontal axis */
     stretch: boolean;
     /** If defined, specifies where to open the linked document */
     target?: '_blank' | '_parent' | '_self' | '_top';
-    /** Defines the type of button */
-    type: SkfLinkType;
     connectedCallback(): void;
+    _handleAsChange(): void;
     /** @internal */
-    private _assertValidOnClick;
+    _handleStateChange(property: string, _prev: unknown, next: unknown): void;
     /** @internal */
     /** retargets click event to host */
-    private _preprocessOnClick;
+    private _handleClick;
     /** @internal */
     private _renderIcon;
     render(): import("lit").TemplateResult;