@skf-design-system/ui-components 1.0.2-beta.0 → 1.0.2-beta.10

package/dist/components/dialog/dialog.component.js

@@ -1,61 +1,62 @@
-var m = (e) => {
+var _ = (e) => {
   throw TypeError(e);
 };
-var _ = (e, i, o) => i.has(e) || m("Cannot " + o);
-var h = (e, i, o) => (_(e, i, "read from private field"), o ? o.call(e) : i.get(e)), g = (e, i, o) => i.has(e) ? m("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(e) : i.set(e, o), c = (e, i, o, t) => (_(e, i, "write to private field"), t ? t.call(e, o) : i.set(e, o), o);
+var $ = (e, i, t) => i.has(e) || _("Cannot " + t);
+var c = (e, i, t) => ($(e, i, "read from private field"), t ? t.call(e) : i.get(e)), f = (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), d = (e, i, t, o) => ($(e, i, "write to private field"), o ? o.call(e, t) : i.set(e, t), t);
 import "../button/button.js";
 import "../heading/heading.js";
 import "../icon/icon.js";
-import { SkfElement as C } from "../../internal/components/skf-element.js";
-import { watch as v } from "../../internal/helpers/watch.js";
-import B from "../../styles/component.styles.js";
-import { nothing as k, html as $ } from "lit";
-import { property as p, state as b, query as P, queryAssignedElements as E } from "lit/decorators.js";
-import { classMap as w } from "lit/directives/class-map.js";
-import { styles as O } from "./dialog.styles.js";
-var x = Object.defineProperty, A = Object.getOwnPropertyDescriptor, n = (e, i, o, t) => {
-  for (var l = t > 1 ? void 0 : t ? A(i, o) : i, a = e.length - 1, d; a >= 0; a--)
-    (d = e[a]) && (l = (t ? d(i, o, l) : d(l)) || l);
-  return t && l && x(i, o, l), l;
-}, f, u, r;
-const y = class y extends C {
+import { SkfElement as b } from "../../internal/components/skf-element.js";
+import { watch as k } from "../../internal/helpers/watch.js";
+import { componentStyles as B } from "../../styles/component.styles.js";
+import { LocalizeController as P } from "../../utilities/localize.js";
+import { nothing as E, html as w } from "lit";
+import { property as h, state as v, query as O, queryAssignedElements as x } from "lit/decorators.js";
+import { classMap as C } from "lit/directives/class-map.js";
+import { styles as D } from "./dialog.styles.js";
+var F = Object.defineProperty, M = Object.getOwnPropertyDescriptor, n = (e, i, t, o) => {
+  for (var l = o > 1 ? void 0 : o ? M(i, t) : i, a = e.length - 1, r; a >= 0; a--)
+    (r = e[a]) && (l = (o ? r(i, t, l) : r(l)) || l);
+  return o && l && F(i, t, l), l;
+}, g, u, y, p;
+const m = class m extends b {
   constructor() {
     super(...arguments);
-    g(this, f);
-    g(this, u);
-    g(this, r);
-    c(this, f, 0), c(this, u, 20), c(this, r, !1), this.fullscreen = !1, this.noCloseButton = !1, this.noPadding = !1, this.open = !1, this.onClose = null, this.renderFoot = !1, this._handleBackdropClick = (o) => {
-      o.target === this.$dialog && this.close();
-    }, this._handleClose = (o) => {
-      console.log("Handle close reached"), this.onClose && this.onClose(o), this.close();
-    }, this._handleKeyDown = (o) => {
-      o.preventDefault(), o.key === "Escape" && this.close();
+    f(this, g);
+    f(this, u);
+    f(this, y);
+    f(this, p);
+    d(this, g, new P(this)), d(this, u, 0), d(this, y, 20), d(this, p, !1), this.fullscreen = !1, this.lang = "en", this.noCloseButton = !1, this.noPadding = !1, this.open = !1, this.onClose = null, this.renderFoot = !1, this._handleBackdropClick = (t) => {
+      t.target === this.$dialog && this.close();
+    }, this._handleClose = (t) => {
+      this.onClose && this.onClose(t), this.close();
+    }, this._handleKeyDown = (t) => {
+      t.key === "Escape" && (t.preventDefault(), this.close());
     };
   }
   handleOpenChange() {
-    var o;
-    this.open ? this.showModal() : this.close(), this.open && (this.renderFoot = !!((o = this.footerEls) != null && o.length));
+    this.open ? this.showModal() : this.close(), this.open && (this.renderFoot = !!this.footerEls?.length);
   }
   firstUpdated() {
-    this.$dialog && this.$dialog.addEventListener("close", (o) => {
-      o.stopPropagation(), this.emit("skf-dialog-closed");
-    });
+    this.$dialog && (this.open && this.handleOpenChange(), this.$dialog.addEventListener("close", (t) => {
+      t.stopPropagation(), this.emit("skf-dialog-closed");
+    }));
   }
   /** @internal */
   _transition() {
-    const o = this.fullscreen ? {} : {
-      translate: `${String(h(this, f))} ${String(h(this, u))}px`
+    const t = this.fullscreen ? {} : {
+      translate: `${String(c(this, u))} ${String(c(this, y))}px`
     };
     return { entry: () => new Promise((a) => {
       if (!this.$dialog) {
         a("no dialog found");
         return;
       }
-      const d = this.$dialog.animate(
+      const r = this.$dialog.animate(
         [
           {
             opacity: 0,
-            ...o
+            ...t
           },
           { opacity: 1, translate: "0 0" }
         ],
@@ -69,7 +70,7 @@ const y = class y extends C {
         duration: 200,
         fill: "forwards",
         pseudoElement: "::backdrop"
-      }), d.onfinish = () => {
+      }), r.onfinish = () => {
         a("opened");
       };
     }), exit: () => new Promise((a) => {
@@ -77,12 +78,12 @@ const y = class y extends C {
         a("no dialog found");
         return;
       }
-      const d = this.$dialog.animate(
+      const r = this.$dialog.animate(
         [
           { opacity: 1, translate: "0 0" },
           {
             opacity: 0,
-            ...o
+            ...t
           }
         ],
         {
@@ -95,37 +96,36 @@ const y = class y extends C {
         duration: 200,
         fill: "forwards",
         pseudoElement: "::backdrop"
-      }), d.onfinish = () => {
+      }), r.onfinish = () => {
         a("closed");
       };
     }) };
   }
   /** Method that opens the dialog in modal state */
   async showModal() {
-    async function o(t) {
-      return t.$dialog ? (t.$dialog.showModal(), await t._transition().entry(), t.emit("skf-dialog-opened"), !0) : !1;
+    async function t(o) {
+      return o.$dialog ? (o.open = !0, o.$dialog.showModal(), await o._transition().entry(), o.emit("skf-dialog-opened"), !0) : !1;
     }
-    return await o(this);
+    return await t(this);
   }
   /** Method that closes the dialog */
   async close() {
-    if (console.log("close reached", h(this, r)), h(this, r) || !this.open) return;
-    c(this, r, !0);
-    async function o(t) {
-      return t.$dialog ? (t.emit("skf-dialog-closing"), await t._transition().exit(), t.$dialog.close(), t.open = !1, c(t, r, !1), !0) : !1;
+    if (c(this, p) || !this.open) return;
+    d(this, p, !0);
+    async function t(o) {
+      return o.$dialog ? (o.emit("skf-dialog-closing"), await o._transition().exit(), o.$dialog.close(), o.open = !1, d(o, p, !1), !0) : !1;
     }
-    return await o(this);
+    return await t(this);
   }
   render() {
-    return $`
+    return w`
 			<dialog
 				@close=${this._handleClose}
 				@mousedown=${this._handleBackdropClick}
 				@touchstart=${this._handleBackdropClick}
 				@keydown=${this._handleKeyDown}
 				aria-modal="true"
-				autofocus
-				class=${w({
+				class=${C({
       dialog: !0,
       "dialog--fullscreen": this.fullscreen,
       "dialog--no-padding": this.noPadding
@@ -133,10 +133,10 @@ const y = class y extends C {
 			>
 				<div class="dialog__head">
 					<h2 class="dialog__heading">${this.heading}</h2>
-					${this.noCloseButton ? k : $`
+					${this.noCloseButton ? E : w`
 								<button
 									@click=${this._handleClose}
-									aria-label=${this.closeButtonAriaLabel ?? "Close dialog"}
+									aria-label=${c(this, g).term("close")}
 									class="dialog__close-btn"
 								>
 									<skf-icon name="close" color="inverse"></skf-icon>
@@ -146,7 +146,7 @@ const y = class y extends C {
 				<div class="dialog__body">
 					<slot class="dialog__main"></slot>
 					<slot
-						class=${w({
+						class=${C({
       dialog__foot: !0,
       "dialog__foot--hidden": !this.renderFoot
     })}
@@ -157,40 +157,40 @@ const y = class y extends C {
 		`;
   }
 };
-f = new WeakMap(), u = new WeakMap(), r = new WeakMap(), y.styles = [B, O];
-let s = y;
+g = new WeakMap(), u = new WeakMap(), y = new WeakMap(), p = new WeakMap(), m.styles = [B, D];
+let s = m;
 n([
-  p({ attribute: "close-button-aria-label" })
-], s.prototype, "closeButtonAriaLabel", 2);
-n([
-  p()
+  h()
 ], s.prototype, "heading", 2);
 n([
-  p({ type: Boolean })
+  h({ type: Boolean })
 ], s.prototype, "fullscreen", 2);
 n([
-  p({ type: Boolean, attribute: "no-close-button" })
+  h({ type: String })
+], s.prototype, "lang", 2);
+n([
+  h({ type: Boolean, attribute: "no-close-button" })
 ], s.prototype, "noCloseButton", 2);
 n([
-  p({ type: Boolean, attribute: "no-padding" })
+  h({ type: Boolean, attribute: "no-padding" })
 ], s.prototype, "noPadding", 2);
 n([
-  p({ type: Boolean, reflect: !0 })
+  h({ type: Boolean, reflect: !0 })
 ], s.prototype, "open", 2);
 n([
-  b()
+  v()
 ], s.prototype, "onClose", 2);
 n([
-  b()
+  v()
 ], s.prototype, "renderFoot", 2);
 n([
-  P("dialog")
+  O("dialog")
 ], s.prototype, "$dialog", 2);
 n([
-  E({ slot: "footer" })
+  x({ slot: "footer" })
 ], s.prototype, "footerEls", 2);
 n([
-  v("open")
+  k("open")
 ], s.prototype, "handleOpenChange", 1);
 export {
   s as SkfDialog

package/dist/components/dialog/dialog.d.ts

@@ -1,5 +1,5 @@
-import { SkfDialog } from './dialog.component';
-export * from './dialog.component';
+import { SkfDialog } from './dialog.component.js';
+export * from './dialog.component.js';
 export default SkfDialog;
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/dialog/dialog.styles.js

@@ -1,5 +1,5 @@
 import { css as a } from "lit";
-const o = a`
+const i = a`
 	/* stylelint-disable selector-class-pattern */
 	@layer components {
 		.dialog {
@@ -28,7 +28,7 @@ const o = a`
 			}
 
 			&::backdrop {
-				background-color: color-mix(in srgb, var(--skf-bg-color-neutral-7), transparent);
+				background-color: oklch(from var(--skf-bg-color-neutral-7) l c h / 50%);
 			}
 		}
 
@@ -58,9 +58,9 @@ const o = a`
 		}
 
 		.dialog__body {
-			/* block-size: calc(100% - (var(--_skf-dialog-head-height) + (var(--skf-box-spacing) * 2))); */
 			display: flex;
 			flex-direction: column;
+			grid-area: body;
 			row-gap: var(--skf-spacing-100);
 
 			.dialog:not(.dialog--no-padding) & {
@@ -87,5 +87,5 @@ const o = a`
 	}
 `;
 export {
-  o as styles
+  i as styles
 };

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 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, a) => (d(t, e, "write to private field"), a ? a.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, a) => {
+  for (var o = a > 1 ? void 0 : a ? w(e, r) : e, l = t.length - 1, n; l >= 0; l--)
+    (n = t[l]) && (o = (a ? n(e, r, o) : n(o)) || o);
+  return a && o && j(e, r, o), o;
+};
+const u = {
+  color: ["emphasized", "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, a, 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 s = f;
+c([
+  v({ type: String })
+], s.prototype, "color", 2);
+c([
+  v({ type: Boolean })
+], s.prototype, "decorative", 2);
+c([
+  v({ type: Boolean })
+], s.prototype, "vertical", 2);
+c([
+  g(Object.keys(u))
+], s.prototype, "_handleStateChange", 1);
 export {
-  e as SkfDivider
+  s 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']) {
-				--_skf-divider-border-color: var(--skf-border-color-emphasised);
+			:host(:state(emphasized)) {
+				--_skf-divider-border-color: var(--skf-border-color-emphasized);
 			}
 
-			: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

@@ -1,5 +1,6 @@
 import '../icon/icon.js';
 import { SkfElement } from '../../internal/components/skf-element';
+import { type Language } from '../../utilities/localize.js';
 import { type CSSResultGroup } from 'lit';
 /**
  * TODO:
@@ -8,50 +9,61 @@ 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.
+ * The `<skf-drawer>` is a modal component that displays content and toggle by sliding from left/right viewport edge
  *
  * @documentation See [zeroheight](https://zeroheight.com/853e936c9/p/0789c4-drawer) for design principles
  *
- * @event skf-drawer-opened - Fires when the drawer is opened (after transitioned in)
- * @event skf-drawer-closing - Fires when the drawer is closed (before transitioned out)
- * @event skf-drawer-closed - Fires when the drawer is closed (after transitioned out)
+ * @event {CustomEvent} skf-drawer-opened - Fires when the drawer is opened (after transitioned in)
+ * @event {CustomEvent} skf-drawer-closing - Fires when the drawer is closing (before transitioned out)
+ * @event {CustomEvent} skf-drawer-closed - Fires when the drawer is closed (after transitioned out)
  *
  * @slot - The Drawer's main content
  *
  * @tagname skf-drawer
  */
 export declare class SkfDrawer extends SkfElement {
+    #private;
     static styles: CSSResultGroup;
     /** @internal */
     private _abortController?;
     /** @internal */
     private _signal?;
-    /** If defined, sets the aria-label for the close button */
-    closeButtonAriaLabel: string;
     /** Heading for the Drawer */
     heading?: string;
+    /** Sets the internal language of the component */
+    lang: Language;
     /** 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;
+    protected firstUpdated(): void;
     disconnectedCallback(): void;
     /** @internal */
+    _handleStateChange(property: string, _prev: unknown, next: unknown): void;
+    /** @internal */
     _placementChanged: () => void;
     /** @internal */
     _openChanged(): Promise<void>;
     /** @internal */
     private _startListeners;
-    clickIsInsideElement(event: MouseEvent, el: HTMLElement): boolean;
+    /** @internal */
+    private _clickIsInsideElement;
     /** @internal */
     private _animateDrawer;
-    _clickstartInDialog: boolean;
-    _handleMouseDown: (event: MouseEvent) => void;
-    _handleMouseUp: () => void;
+    /** @internal */
+    private _clickstartInDialog;
+    /** @internal */
+    private _handleMouseDown;
+    /** @internal */
+    private _handleMouseUp;
     close(): void;
     render(): import("lit").TemplateResult<1>;
 }
+export {};