@skf-design-system/ui-components 1.0.1-beta.1 → 1.0.2-beta.1

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
+};

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

@@ -0,0 +1,8 @@
+import { SkfDrawer } from './drawer.component';
+export * from './drawer.component';
+export default SkfDrawer;
+declare global {
+    interface HTMLElementTagNameMap {
+        'skf-drawer': SkfDrawer;
+    }
+}

package/dist/components/drawer/drawer.js

@@ -0,0 +1,6 @@
+import { SkfDrawer as r } from "./drawer.component.js";
+r.define("skf-drawer");
+export {
+  r as SkfDrawer,
+  r as default
+};

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

@@ -0,0 +1,71 @@
+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;
+
+			&[open] {
+				display: flex;
+
+				&::backdrop {
+					background-color: var(--skf-bg-color-neutral-7);
+					opacity: 0.4;
+				}
+			}
+
+			:host([placement='left']) & {
+				--_skf-drawer-inset: 0 auto;
+
+				translate: -100% 0;
+			}
+
+			:host([size='sm']) & {
+				--_skf-drawer-size: 400px;
+			}
+
+			:host([size='lg']) & {
+				--_skf-drawer-size: 680px;
+			}
+		}
+
+		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);
+		}
+
+		h2 {
+			font-size: var(--skf-font-size-200);
+		}
+
+		#close-button {
+			display: inline-flex;
+
+			&:focus-visible {
+				border-radius: var(--skf-border-radius-sm);
+				outline: var(--skf-border-width-sm) solid var(--skf-interactive-text-color-inverse);
+			}
+		}
+
+		#body {
+			display: block;
+			flex: auto;
+			padding: var(--skf-box-spacing);
+		}
+	}
+`;
+export {
+  o as styles
+};

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

@@ -0,0 +1,46 @@
+import '../button/button.js';
+import '../drawer/drawer.js';
+import '../logo/logo.js';
+import { SkfElement } from '../../internal/components/skf-element';
+import { type CSSResultGroup } from 'lit';
+/**
+ * The `<skf-header>` component is to be used as the site-header in the app. The navigation will be collapsed to mobile-view if the menu items exceed the available width.
+ *
+ * @documentation See [zeroheight](https://zeroheight.com/****) for design principles
+ *
+ * @slot - Navigation items
+ *
+ * @tagname skf-header
+ */
+export declare class SkfHeader extends SkfElement {
+    static styles: CSSResultGroup;
+    /** @internal */
+    private _dynamicBreakpoint?;
+    /** @internal */
+    private _widthObserver?;
+    /** If true, sets header to display in compact mode only (hanburger menu and drawer) */
+    set compact(value: boolean);
+    get compact(): boolean;
+    /** If defined, sets the aria-label for the hamburger button */
+    hamburgerAriaLabel: string;
+    /** If defined, sets the app or site's name */
+    siteName?: string;
+    /** If defined, sets the site's base-url for the "logo-link" */
+    siteUrl?: string;
+    /** @internal */
+    isCompact: boolean;
+    /** @internal */
+    private openDrawer;
+    /** @internal */
+    private nav;
+    /** @internal */
+    private $navWrapper;
+    firstUpdated(): void;
+    /** @internal */
+    private _observeHostWidth;
+    /** @internal */
+    private _observeNavContainer;
+    /** @internal */
+    private _renderMeta;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/header/header.component.js

@@ -0,0 +1,116 @@
+import "../button/button.js";
+import "../drawer/drawer.js";
+import "../logo/logo.js";
+import { SkfElement as d } from "../../internal/components/skf-element.js";
+import { componentStyles as b } from "../../styles/component.styles.js";
+import { nothing as u, html as o } from "lit";
+import { property as s, state as f, queryAssignedElements as w, query as _ } from "lit/decorators.js";
+import { ifDefined as m } from "lit/directives/if-defined.js";
+import { literal as v, html as y } from "lit/static-html.js";
+import { styles as $ } from "./header.styles.js";
+var g = Object.defineProperty, C = Object.getOwnPropertyDescriptor, r = (c, e, n, a) => {
+  for (var i = a > 1 ? void 0 : a ? C(e, n) : e, p = c.length - 1, h; p >= 0; p--)
+    (h = c[p]) && (i = (a ? h(e, n, i) : h(i)) || i);
+  return a && i && g(e, n, i), i;
+};
+const l = class l extends d {
+  constructor() {
+    super(...arguments), this.hamburgerAriaLabel = "Show navigation", this.isCompact = !1, this.openDrawer = !1;
+  }
+  set compact(e) {
+    this.isCompact = e;
+  }
+  get compact() {
+    return this.isCompact;
+  }
+  firstUpdated() {
+    this.updateComplete.then(() => {
+      if (this.compact) {
+        this.isCompact = !0, this.nav[0].vertical = !0;
+        return;
+      }
+      this._observeHostWidth();
+    }).catch(console.error);
+  }
+  /** @internal */
+  _observeHostWidth() {
+    this._widthObserver = new ResizeObserver(() => {
+      var e;
+      this.clientWidth > (this._dynamicBreakpoint ?? 0) && (this._dynamicBreakpoint = null, (e = this._widthObserver) == null || e.disconnect(), this.isCompact = !1, this.nav[0].vertical = !1, this._observeNavContainer());
+    }), this._widthObserver.observe(this);
+  }
+  /** @internal */
+  _observeNavContainer() {
+    this._widthObserver = new ResizeObserver(() => {
+      var e;
+      this.$navWrapper.clientWidth < this.$navWrapper.scrollWidth && (this._dynamicBreakpoint = this.clientWidth, (e = this._widthObserver) == null || e.disconnect(), this.isCompact = !0, this.nav[0].vertical = !0, this._observeHostWidth());
+    }), this._widthObserver.observe(this.$navWrapper);
+  }
+  /** @internal */
+  _renderMeta() {
+    const e = this.siteUrl ? v`a` : v`div`;
+    return y`
+			<${e} href=${m(this.siteUrl)} id="meta">
+				<skf-logo color="inverse"></skf-logo>
+				${this.siteName ? o`<h2>${this.siteName}</h2>` : u}
+			</${e}>
+		`;
+  }
+  render() {
+    return o`
+			<header role="banner">
+				${this._renderMeta()}
+				<div id="nav-wrapper">
+					${this.isCompact ? o`
+								<button
+									@click=${() => this.openDrawer = !this.openDrawer}
+									aria-controls="drawer"
+									aria-expanded=${this.openDrawer}
+									aria-label=${this.hamburgerAriaLabel}
+								>
+									<skf-icon color="inverse" name="hamburgerMenu" size="lg"></skf-icon>
+								</button>
+								<skf-drawer
+									?open=${this.openDrawer}
+									@close=${() => this.openDrawer = !1}
+									heading=${m(this.siteName)}
+									id="drawer"
+									placement="right"
+								>
+									<slot></slot>
+								</skf-drawer>
+							` : o`<slot></slot>`}
+				</div>
+			</header>
+		`;
+  }
+};
+l.styles = [b, $];
+let t = l;
+r([
+  s({ type: Boolean, reflect: !0 })
+], t.prototype, "compact", 1);
+r([
+  s({ attribute: "hamburger-aria-label" })
+], t.prototype, "hamburgerAriaLabel", 2);
+r([
+  s({ attribute: "site-name" })
+], t.prototype, "siteName", 2);
+r([
+  s({ attribute: "site-url" })
+], t.prototype, "siteUrl", 2);
+r([
+  s({ type: Boolean, reflect: !0, state: !0, attribute: "is-compact" })
+], t.prototype, "isCompact", 2);
+r([
+  f()
+], t.prototype, "openDrawer", 2);
+r([
+  w({ selector: "skf-nav" })
+], t.prototype, "nav", 2);
+r([
+  _("#nav-wrapper")
+], t.prototype, "$navWrapper", 2);
+export {
+  t as SkfHeader
+};

package/dist/components/header/header.d.ts

@@ -0,0 +1,8 @@
+import { SkfHeader } from './header.component';
+export * from './header.component';
+export default SkfHeader;
+declare global {
+    interface HTMLElementTagNameMap {
+        'skf-header': SkfHeader;
+    }
+}

package/dist/components/header/header.js

@@ -0,0 +1,6 @@
+import { SkfHeader as e } from "./header.component.js";
+e.define("skf-header");
+export {
+  e as SkfHeader,
+  e as default
+};

package/dist/components/header/header.styles.js

@@ -0,0 +1,68 @@
+import { css as e } from "lit";
+const a = e`
+	@layer components {
+		:host {
+			--skf-header-height: 60px;
+		}
+
+		header {
+			align-items: center;
+			background-color: var(--skf-bg-color-emphasised);
+			block-size: var(--skf-header-height);
+			display: flex;
+			gap: var(--skf-spacing-125);
+			justify-content: space-between;
+			padding-inline: var(--skf-spacing-100);
+		}
+
+		#meta {
+			align-items: inherit;
+			color: var(--skf-text-color-inverse);
+			display: inherit;
+			gap: var(--skf-spacing-100);
+
+			&:is(a) {
+				text-decoration: none;
+			}
+
+			:host(:not([is-compact])) &:has(h2)::after {
+				align-self: normal;
+				border-right: 1px solid var(--skf-border-color-inverse);
+				content: '';
+				display: block;
+			}
+		}
+
+		h2 {
+			font-size: var(--skf-font-size-200);
+			font-weight: var(--skf-font-weight-regular);
+			white-space: nowrap;
+		}
+
+		#nav-wrapper:has(skf-drawer) {
+			display: inline-flex; /** Shrink-wrap icon-button */
+		}
+
+		#nav-wrapper:not(:has(skf-drawer)) {
+			overflow: hidden;
+		}
+
+		skf-drawer::part(body) {
+			background-color: var(--skf-bg-color-emphasised);
+			padding: 0;
+		}
+
+		button {
+			color: var(--_skf-header-button-color, var(--skf-interactive-text-color-inverse));
+			display: inline-flex;
+
+			&:focus-visible {
+				border-radius: var(--skf-border-radius-sm);
+				outline: var(--skf-border-width-sm) solid var(--skf-interactive-text-color-inverse);
+			}
+		}
+	}
+`;
+export {
+  a as styles
+};

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

@@ -1,5 +1,5 @@
 import { SkfElement } from '../../internal/components/skf-element.js';
-import type { HeadingType } from '../../internal/constants/heading.js';
+import type { HeadingType } from '../../internal/types.js';
 import { type CSSResultGroup } from 'lit';
 /**
  * The `<Heading>` component is to deliniate content on a page. When using, take note not to skip heading levels.<br>
@@ -11,17 +11,9 @@ import { type CSSResultGroup } from 'lit';
  */
 export declare class SkfHeading extends SkfElement {
     static styles: CSSResultGroup;
-    /**
-     * Controls which heading element will be rendered. Should not be used to affect appearance
-     *
-     * @type { "h1" | "h2" | "h3" | "h4" }
-     */
+    /** Controls which heading element will be rendered. Should not be used to affect appearance */
     as: HeadingType;
-    /**
-     * If provided, changes the appearance of the heading
-     *
-     * @type { "h1" | "h2" | "h3" | "h4" }
-     */
+    /** If defined, changes the appearance of the heading */
     styledAs?: HeadingType;
     render(): import("lit").TemplateResult;
 }