@skf-design-system/ui-components 1.0.0-alpha.33 → 1.0.0-alpha.35

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

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

@@ -1,6 +1,7 @@
 import { SkfElement } from '../../internal/components/skf-element.js';
 import type { BorderColor } from '@skf-design-system/ui-assets';
 import { type CSSResultGroup } from 'lit';
+type SkfDividerColor = BorderColor;
 /**
  * The `<Divider>` component can separate items from each other, to visually emphasize their lack of a relationship between groups of information
  *
@@ -12,18 +13,13 @@ import { type CSSResultGroup } from 'lit';
  * @tagname skf-divider
  */
 export declare class SkfDivider extends SkfElement {
-    #private;
     static styles: CSSResultGroup;
-    /**
-     * Defines the Divider color
-     * @type { "emphasised" | "primary" | "secondary" | "tertiary" | "inverse" }
-     */
-    color: BorderColor;
+    /** Defines the Divider color */
+    color: SkfDividerColor;
     /** If true, renders a div for presentational purpose instead of the semantic hr-element */
     decorative: boolean;
     /** If true, renders the divider vertically */
     vertical: boolean;
-    constructor();
     connectedCallback(): void;
-    render(): import("lit").TemplateResult<1>;
 }
+export {};

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

@@ -1,54 +1,32 @@
-var h = (r) => {
-  throw TypeError(r);
+import { SkfElement as n } from "../../internal/components/skf-element.js";
+import { componentStyles as m } 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;
 };
-var m = (r, e, t) => e.has(r) || h("Cannot " + t);
-var c = (r, e, t) => (m(r, e, "read from private field"), t ? t.call(r) : e.get(r)), f = (r, e, t) => e.has(r) ? h("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(r) : e.set(r, t), y = (r, e, t, a) => (m(r, e, "write to private field"), a ? a.call(r, t) : e.set(r, t), t);
-import { SkfElement as u } from "../../internal/components/skf-element.js";
-import b from "../../styles/component.styles.js";
-import { html as C } from "lit";
-import { property as n } from "lit/decorators.js";
-import { classMap as _ } from "lit/directives/class-map.js";
-import { styles as x } from "./divider.styles.js";
-var B = Object.defineProperty, p = (r, e, t, a) => {
-  for (var o = void 0, l = r.length - 1, v; l >= 0; l--)
-    (v = r[l]) && (o = v(e, t, o) || o);
-  return o && B(e, t, o), o;
-}, i;
-const d = class d extends u {
+const i = class i extends n {
   constructor() {
-    super();
-    f(this, i);
-    this.color = "primary", this.decorative = !1, this.vertical = !1, y(this, i, this.attachInternals());
+    super(...arguments), this.color = "primary", this.decorative = !1, this.vertical = !1;
   }
   connectedCallback() {
-    super.connectedCallback(), c(this, i).role = this.decorative ? "generic" : "separator", c(this, i).ariaOrientation = this.vertical ? "vertical" : "horizontal";
-  }
-  render() {
-    return C`
-			<div
-				class=${_({
-      divider: !0,
-      "divider--color-emphasised": this.color === "emphasised",
-      "divider--color-inverse": this.color === "inverse",
-      "divider--color-secondary": this.color === "secondary",
-      "divider--color-tertiary": this.color === "tertiary",
-      "divider--vertical": this.vertical
-    })}
-			></div>
-		`;
+    super.connectedCallback(), this.role = this.decorative ? "generic" : "separator", this.ariaOrientation = this.vertical ? "vertical" : "horizontal";
   }
 };
-i = new WeakMap(), d.styles = [b, x];
-let s = d;
-p([
-  n({ reflect: !0 })
-], s.prototype, "color");
-p([
-  n({ type: Boolean })
-], s.prototype, "decorative");
-p([
-  n({ type: Boolean, reflect: !0 })
-], s.prototype, "vertical");
+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");
 export {
-  s as SkfDivider
+  e as SkfDivider
 };

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

@@ -1,43 +1,47 @@
 import { css as r } from "lit";
-const d = r`
-	/* stylelint-disable selector-class-pattern */
-	.divider {
-		--_skf-divider-border: var(--skf-border-width-sm) solid
-			var(--_skf-divider-border-color, var(--skf-border-color-primary));
+const e = r`
+	@layer components {
+		@layer base {
+			:host {
+				--_skf-divider-border: var(--skf-border-width-sm) solid
+					var(--_skf-divider-border-color, var(--skf-border-color-primary));
 
-		display: block;
+				display: block;
+			}
 
-		&:not(.divider--vertical) {
-			border-top: var(--_skf-divider-border);
-			margin-block: var(--skf-divider-spacing, var(--skf-spacing-100));
-			margin-inline: var(--skf-divider-inset, 0);
+			:host(:not([vertical])) {
+				border-top: var(--_skf-divider-border);
+				margin-block: var(--skf-divider-spacing, var(--skf-spacing-100));
+				margin-inline: var(--skf-divider-inset, 0);
+			}
 		}
-	}
 
-	.divider--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));
-	}
+		@layer mods {
+			:host([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));
+			}
 
-	/** Colors */
-	.divider--color-emphasised {
-		--_skf-divider-border-color: var(--skf-border-color-emphasised);
-	}
+			:host([color='emphasised']) {
+				--_skf-divider-border-color: var(--skf-border-color-emphasised);
+			}
 
-	.divider--color-inverse {
-		--_skf-divider-border-color: var(--skf-border-color-inverse);
-	}
+			:host([color='inverse']) {
+				--_skf-divider-border-color: var(--skf-border-color-inverse);
+			}
 
-	.divider--color-secondary {
-		--_skf-divider-border-color: var(--skf-border-color-secondary);
-	}
+			:host([color='secondary']) {
+				--_skf-divider-border-color: var(--skf-border-color-secondary);
+			}
 
-	.divider--color-tertiary {
-		--_skf-divider-border-color: var(--skf-border-color-tertiary);
+			:host([color='tertiary']) {
+				--_skf-divider-border-color: var(--skf-border-color-tertiary);
+			}
+		}
 	}
 `;
 export {
-  d as styles
+  e as styles
 };

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

@@ -0,0 +1,61 @@
+import '../icon/icon.js';
+import { SkfElement } from '../../internal/components/skf-element';
+import { type CSSResultGroup } from 'lit';
+/**
+ * TODO:
+ *
+ * - Fix drag outside closes the drawer
+ * - add tests
+ * - add documentation
+ */
+/**
+ * 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 {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 {
+    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 max-width */
+    size: 'sm' | 'md' | 'lg';
+    /** If true, Drawer is open */
+    open: boolean;
+    /** Placement of the Drawer */
+    placement: 'left' | 'right';
+    /** @internal */
+    $dialog: HTMLDialogElement;
+    disconnectedCallback(): void;
+    /** @internal */
+    _placementChanged: () => void;
+    /** @internal */
+    _openChanged(): Promise<void>;
+    /** @internal */
+    private _startListeners;
+    /** @internal */
+    private _clickIsInsideElement;
+    /** @internal */
+    private _animateDrawer;
+    /** @internal */
+    private _clickstartInDialog;
+    /** @internal */
+    private _handleMouseDown;
+    /** @internal */
+    private _handleMouseUp;
+    close(): void;
+    render(): import("lit").TemplateResult<1>;
+}

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

@@ -0,0 +1,125 @@
+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;
+};
+const c = class c extends m {
+  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();
+      });
+    }, this._clickstartInDialog = !1, this._handleMouseDown = (t) => {
+      this._clickIsInsideElement(t, this.$dialog) && (this._clickstartInDialog = !0);
+    }, this._handleMouseUp = () => {
+      if (this._clickstartInDialog) {
+        this._clickstartInDialog = !1;
+        return;
+      }
+    };
+  }
+  disconnectedCallback() {
+    var t;
+    super.disconnectedCallback(), (t = this._abortController) == null || t.abort();
+  }
+  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());
+  }
+  /** @internal */
+  _startListeners() {
+    window.addEventListener(
+      "keydown",
+      (t) => {
+        t.key === "Escape" && (t.preventDefault(), this.close());
+      },
+      { signal: this._signal }
+    ), this.addEventListener("click", (t) => {
+      !this._clickIsInsideElement(t, this.$dialog) && !this._clickstartInDialog && this.close();
+    });
+  }
+  /** @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;
+  }
+  /** @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) => {
+      requestAnimationFrame(() => {
+        const o = this.$dialog.animate(t, {
+          duration: p.normal,
+          fill: "forwards",
+          pseudoElement: "::backdrop"
+        }), n = this.$dialog.animate(i, {
+          duration: p.normal,
+          easing: "ease-out",
+          fill: "forwards"
+        });
+        Promise.all([o.finished, n.finished]).then(() => {
+          e("Animations finished");
+        }).catch(() => {
+          throw new Error("Animation failed");
+        });
+      });
+    });
+  }
+  close() {
+    this.open = !1;
+  }
+  render() {
+    return g`
+			<dialog @mousedown="${this._handleMouseDown}" @mouseup="${this._handleMouseUp}">
+				<header>
+					<h2>${this.heading}</h2>
+					<button
+						aria-label=${this.closeButtonAriaLabel}
+						id="close-button"
+						@click="${() => this.open = !1}"
+					>
+						<skf-icon name="close" color="inverse"></skf-icon>
+					</button>
+				</header>
+				<slot id="body" part="body">${this.slot}</slot>
+			</dialog>
+		`;
+  }
+};
+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);
+export {
+  s as SkfDrawer
+};