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

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

@@ -1,30 +1,32 @@
-var m = (e) => {
+var _ = (e) => {
   throw TypeError(e);
 };
-var _ = (e, i, t) => i.has(e) || m("Cannot " + t);
-var u = (e, i, t) => (_(e, i, "read from private field"), t ? t.call(e) : i.get(e)), g = (e, i, t) => i.has(e) ? m("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(e) : i.set(e, t), p = (e, i, t, o) => (_(e, i, "write to private field"), o ? o.call(e, t) : i.set(e, t), t);
+var $ = (e, i, t) => i.has(e) || _("Cannot " + t);
+var h = (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 { 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 { nothing as k, html as $ } from "lit";
-import { property as c, 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, t, o) => {
-  for (var l = o > 1 ? void 0 : o ? A(i, t) : i, a = e.length - 1, r; a >= 0; a--)
+import { LocalizeController as P } from "../../utilities/localize.js";
+import { nothing as E, html as w } from "lit";
+import { property as c, 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 && x(i, t, l), l;
-}, h, f, d;
-const y = class y extends C {
+  return o && l && F(i, t, l), l;
+}, u, g, y, p;
+const m = class m extends b {
   constructor() {
     super(...arguments);
-    g(this, h);
-    g(this, f);
-    g(this, d);
-    p(this, h, 0), p(this, f, 20), p(this, d, !1), this.fullscreen = !1, this.noCloseButton = !1, this.noPadding = !1, this.open = !1, this.onClose = null, this.renderFoot = !1, this._handleBackdropClick = (t) => {
+    f(this, u);
+    f(this, g);
+    f(this, y);
+    f(this, p);
+    d(this, u, new P(this)), d(this, g, 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();
@@ -44,7 +46,7 @@ const y = class y extends C {
   /** @internal */
   _transition() {
     const t = this.fullscreen ? {} : {
-      translate: `${String(u(this, h))} ${String(u(this, f))}px`
+      translate: `${String(h(this, g))} ${String(h(this, y))}px`
     };
     return { entry: () => new Promise((a) => {
       if (!this.$dialog) {
@@ -109,15 +111,15 @@ const y = class y extends C {
   }
   /** Method that closes the dialog */
   async close() {
-    if (u(this, d) || !this.open) return;
-    p(this, d, !0);
+    if (h(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, p(o, d, !1), !0) : !1;
+      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 t(this);
   }
   render() {
-    return $`
+    return w`
 			<dialog
 				@close=${this._handleClose}
 				@mousedown=${this._handleBackdropClick}
@@ -125,7 +127,7 @@ const y = class y extends C {
 				@keydown=${this._handleKeyDown}
 				aria-modal="true"
 				autofocus
-				class=${w({
+				class=${C({
       dialog: !0,
       "dialog--fullscreen": this.fullscreen,
       "dialog--no-padding": this.noPadding
@@ -133,10 +135,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=${h(this, u).term("close")}
 									class="dialog__close-btn"
 								>
 									<skf-icon name="close" color="inverse"></skf-icon>
@@ -146,7 +148,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,17 +159,17 @@ const y = class y extends C {
 		`;
   }
 };
-h = new WeakMap(), f = new WeakMap(), d = new WeakMap(), y.styles = [B, O];
-let s = y;
-n([
-  c({ attribute: "close-button-aria-label" })
-], s.prototype, "closeButtonAriaLabel", 2);
+u = new WeakMap(), g = new WeakMap(), y = new WeakMap(), p = new WeakMap(), m.styles = [B, D];
+let s = m;
 n([
   c()
 ], s.prototype, "heading", 2);
 n([
   c({ type: Boolean })
 ], s.prototype, "fullscreen", 2);
+n([
+  c({ type: String })
+], s.prototype, "lang", 2);
 n([
   c({ type: Boolean, attribute: "no-close-button" })
 ], s.prototype, "noCloseButton", 2);
@@ -178,19 +180,19 @@ n([
   c({ 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/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, 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,6 +9,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,25 +25,28 @@ import { type CSSResultGroup } from 'lit';
  * @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;
     disconnectedCallback(): void;
     /** @internal */
+    _handleStateChange(property: string, _prev: unknown, next: unknown): void;
+    /** @internal */
     _placementChanged: () => void;
     /** @internal */
     _openChanged(): Promise<void>;
@@ -59,3 +65,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,37 @@
+var y = (e) => {
+  throw TypeError(e);
+};
+var w = (e, i, t) => i.has(e) || y("Cannot " + t);
+var m = (e, i, t) => (w(e, i, "read from private field"), t ? t.call(e) : i.get(e)), g = (e, i, t) => i.has(e) ? y("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(e) : i.set(e, t), f = (e, i, t, o) => (w(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 D } from "../../internal/components/skf-element.js";
+import { stateMap as k } from "../../internal/helpers/stateMap.js";
+import { watch as u } from "../../internal/helpers/watch.js";
+import { MOTION_DURATIONS as b } from "@skf-design-system/ui-assets";
+import { componentStyles as C } from "../../styles/component.styles.js";
+import { LocalizeController as $ } from "../../utilities/localize.js";
+import { html as E } from "lit";
+import { property as d, query as v } from "lit/decorators.js";
+import { styles as O } from "./drawer.styles.js";
+var P = Object.defineProperty, U = Object.getOwnPropertyDescriptor, n = (e, i, t, o) => {
+  for (var s = o > 1 ? void 0 : o ? U(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 && P(i, t, s), s;
+};
+const I = {
+  placement: ["left", "right"],
+  size: ["sm", "md", "lg"]
 };
-const c = class c extends m {
+var h, c, p;
+const _ = class _ extends D {
   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);
+    g(this, h);
+    g(this, c);
+    g(this, p);
+    f(this, h, new $(this)), f(this, c, this.attachInternals()), f(this, p, m(this, c).states), this.lang = "en", 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 +46,9 @@ const c = class c extends m {
     var t;
     super.disconnectedCallback(), (t = this._abortController) == null || t.abort();
   }
+  _handleStateChange(t, o, s) {
+    k(m(this, p), I[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 +66,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,12 +96,12 @@ const c = class c extends m {
     this.open = !1;
   }
   render() {
-    return g`
+    return E`
 			<dialog @mousedown="${this._handleMouseDown}" @mouseup="${this._handleMouseUp}">
 				<header>
 					<h2>${this.heading}</h2>
 					<button
-						aria-label=${this.closeButtonAriaLabel}
+						aria-label=${m(this, h).term("close")}
 						id="close-button"
 						@click="${() => this.open = !1}"
 					>
@@ -94,32 +113,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(), p = new WeakMap(), _.styles = [C, O];
+let a = _;
+n([
+  d({ type: String })
+], a.prototype, "heading", 2);
+n([
+  d({ type: String })
+], a.prototype, "lang", 2);
+n([
+  d({ type: String })
+], a.prototype, "size", 2);
+n([
+  d({ type: Boolean, reflect: !0, useDefault: !0 })
+], a.prototype, "open", 2);
+n([
+  d({ type: String })
+], a.prototype, "placement", 2);
+n([
+  v("dialog")
+], a.prototype, "$dialog", 2);
+n([
+  u(Object.keys(I))
+], a.prototype, "_handleStateChange", 1);
+n([
+  u("placement", { waitUntilFirstUpdate: !0 })
+], a.prototype, "_placementChanged", 2);
+n([
+  u("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-emphasized);
+				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;
+			}
 		}
 	}
 `;