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

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

@@ -1,24 +1,40 @@
+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 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 U } from "./drawer.styles.js";
+var O = Object.defineProperty, P = Object.getOwnPropertyDescriptor, n = (e, i, t, o) => {
+  for (var s = o > 1 ? void 0 : o ? P(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 && O(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);
+      this._clickIsInsideElement(t, this.$dialog) && (this._clickstartInDialog = !0);
     }, this._handleMouseUp = () => {
       if (this._clickstartInDialog) {
         this._clickstartInDialog = !1;
@@ -26,13 +42,17 @@ const c = class c extends m {
       }
     };
   }
+  firstUpdated() {
+    this.open && this._openChanged();
+  }
   disconnectedCallback() {
-    var t;
-    super.disconnectedCallback(), (t = this._abortController) == null || t.abort();
+    super.disconnectedCallback(), this._abortController?.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());
+    this.open ? (this._abortController = new AbortController(), this._signal = this._abortController.signal, this.$dialog.showModal(), this._startListeners(), await this._animateDrawer(), this.emit("skf-drawer-opened")) : (this._abortController?.abort(), this.emit("skf-drawer-closing"), await this._animateDrawer(), this.emit("skf-drawer-closed"), this.$dialog.close());
   }
   /** @internal */
   _startListeners() {
@@ -43,29 +63,30 @@ const c = class c extends m {
       },
       { signal: this._signal }
     ), this.addEventListener("click", (t) => {
-      !this.clickIsInsideElement(t, this.$dialog) && !this._clickstartInDialog && this.close();
+      !this._clickIsInsideElement(t, this.$dialog) && !this._clickstartInDialog && this.close();
     });
   }
-  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 */
+  _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");
         });
@@ -76,14 +97,14 @@ const c = class c extends m {
     this.open = !1;
   }
   render() {
-    return g`
-			<dialog @mousedown="${this._handleMouseDown}" @mouseup="${this._handleMouseUp}">
+    return E`
+			<dialog @mousedown=${this._handleMouseDown} @mouseup=${this._handleMouseUp} aria-modal="true">
 				<header>
 					<h2>${this.heading}</h2>
 					<button
-						aria-label=${this.closeButtonAriaLabel}
+						@click=${() => this.open = !1}
+						aria-label=${m(this, h).term("close")}
 						id="close-button"
-						@click="${() => this.open = !1}"
 					>
 						<skf-icon name="close" color="inverse"></skf-icon>
 					</button>
@@ -93,32 +114,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, U];
+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.d.ts

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

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

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

@@ -2,9 +2,10 @@ import '../button/button.js';
 import '../drawer/drawer.js';
 import '../logo/logo.js';
 import { SkfElement } from '../../internal/components/skf-element';
+import { type Language } from '../../utilities/localize.js';
 import { type CSSResultGroup } from 'lit';
 /**
- * The `<skf-header>` component is to be used as the site-header in the app
+ * 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
  *
@@ -13,15 +14,17 @@ import { type CSSResultGroup } from 'lit';
  * @tagname skf-header
  */
 export declare class SkfHeader extends SkfElement {
+    #private;
     static styles: CSSResultGroup;
     /** @internal */
     private _dynamicBreakpoint?;
     /** @internal */
     private _widthObserver?;
     /** If true, sets header to display in compact mode only (hanburger menu and drawer) */
-    compact: boolean;
-    /** If defined, sets the aria-label for the hamburger button */
-    hamburgerAriaLabel: string;
+    set compact(value: boolean);
+    get compact(): boolean;
+    /** Sets the internal language of the component */
+    lang: Language;
     /** If defined, sets the app or site's name */
     siteName?: string;
     /** If defined, sets the site's base-url for the "logo-link" */

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

@@ -1,21 +1,35 @@
+var v = (e) => {
+  throw TypeError(e);
+};
+var d = (e, r, t) => r.has(e) || v("Cannot " + t);
+var f = (e, r, t) => (d(e, r, "read from private field"), t ? t.call(e) : r.get(e)), u = (e, r, t) => r.has(e) ? v("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(e) : r.set(e, t), b = (e, r, t, o) => (d(e, r, "write to private field"), o ? o.call(e, t) : r.set(e, t), t);
 import "../button/button.js";
 import "../drawer/drawer.js";
 import "../logo/logo.js";
-import { SkfElement as d } from "../../internal/components/skf-element.js";
-import v from "../../styles/component.styles.js";
-import { nothing as b, html as a } from "lit";
-import { property as s, state as f, queryAssignedElements as u, query as w } from "lit/decorators.js";
-import { ifDefined as m } from "lit/directives/if-defined.js";
-import { literal as c, html as y } from "lit/static-html.js";
-import { styles as _ } from "./header.styles.js";
-var $ = Object.defineProperty, r = (h, e, p, g) => {
-  for (var i = void 0, o = h.length - 1, l; o >= 0; o--)
-    (l = h[o]) && (i = l(e, p, i) || i);
-  return i && $(e, p, i), i;
-};
-const n = class n extends d {
+import { SkfElement as y } from "../../internal/components/skf-element.js";
+import { componentStyles as $ } from "../../styles/component.styles.js";
+import { LocalizeController as g } from "../../utilities/localize.js";
+import { nothing as C, html as h } from "lit";
+import { property as p, state as O, queryAssignedElements as W, query as D } from "lit/decorators.js";
+import { ifDefined as w } from "lit/directives/if-defined.js";
+import { literal as _, html as N } from "lit/static-html.js";
+import { styles as k } from "./header.styles.js";
+var z = Object.defineProperty, B = Object.getOwnPropertyDescriptor, s = (e, r, t, o) => {
+  for (var a = o > 1 ? void 0 : o ? B(r, t) : r, l = e.length - 1, c; l >= 0; l--)
+    (c = e[l]) && (a = (o ? c(r, t, a) : c(a)) || a);
+  return o && a && z(r, t, a), a;
+}, n;
+const m = class m extends y {
   constructor() {
-    super(...arguments), this.compact = !1, this.hamburgerAriaLabel = "Show navigation", this.isCompact = !1, this.openDrawer = !1;
+    super(...arguments);
+    u(this, n);
+    b(this, n, new g(this)), this.lang = "en", this.isCompact = !1, this.openDrawer = !1;
+  }
+  set compact(t) {
+    this.isCompact = t;
+  }
+  get compact() {
+    return this.isCompact;
   }
   firstUpdated() {
     this.updateComplete.then(() => {
@@ -29,82 +43,81 @@ const n = class n extends d {
   /** @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.clientWidth > (this._dynamicBreakpoint ?? 0) && (this._dynamicBreakpoint = null, this._widthObserver?.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.$navWrapper.clientWidth < this.$navWrapper.scrollWidth && (this._dynamicBreakpoint = this.clientWidth, this._widthObserver?.disconnect(), this.isCompact = !0, this.nav[0].vertical = !0, this._observeHostWidth());
     }), this._widthObserver.observe(this.$navWrapper);
   }
   /** @internal */
   _renderMeta() {
-    const e = this.siteUrl ? c`a` : c`div`;
-    return y`
-			<${e} href=${m(this.siteUrl)} id="meta">
+    const t = this.siteUrl ? _`a` : _`div`;
+    return N`
+			<${t} href=${w(this.siteUrl)} id="meta">
 				<skf-logo color="inverse"></skf-logo>
-				${this.siteName ? a`<h2>${this.siteName}</h2>` : b}
-			</${e}>
+				${this.siteName ? h`<h2>${this.siteName}</h2>` : C}
+			</${t}>
 		`;
   }
   render() {
-    return a`
+    return h`
 			<header role="banner">
 				${this._renderMeta()}
 				<div id="nav-wrapper">
-					${this.isCompact ? a`
+					${this.isCompact ? h`
 								<button
 									@click=${() => this.openDrawer = !this.openDrawer}
 									aria-controls="drawer"
 									aria-expanded=${this.openDrawer}
-									aria-label=${this.hamburgerAriaLabel}
+									aria-label=${f(this, n).term("showMenu")}
 								>
 									<skf-icon color="inverse" name="hamburgerMenu" size="lg"></skf-icon>
 								</button>
 								<skf-drawer
 									?open=${this.openDrawer}
 									@close=${() => this.openDrawer = !1}
-									heading=${m(this.siteName)}
+									heading=${w(this.siteName)}
 									id="drawer"
+									lang=${this.lang}
 									placement="right"
 								>
 									<slot></slot>
 								</skf-drawer>
-							` : a`<slot></slot>`}
+							` : h`<slot></slot>`}
 				</div>
 			</header>
 		`;
   }
 };
-n.styles = [v, _];
-let t = n;
-r([
-  s({ type: Boolean, reflect: !0 })
-], t.prototype, "compact");
-r([
-  s({ attribute: "hamburger-aria-label" })
-], t.prototype, "hamburgerAriaLabel");
-r([
-  s({ attribute: "site-name" })
-], t.prototype, "siteName");
-r([
-  s({ attribute: "site-url" })
-], t.prototype, "siteUrl");
-r([
-  s({ type: Boolean, reflect: !0, state: !0, attribute: "is-compact" })
-], t.prototype, "isCompact");
-r([
-  f()
-], t.prototype, "openDrawer");
-r([
-  u({ selector: "skf-nav" })
-], t.prototype, "nav");
-r([
-  w("#nav-wrapper")
-], t.prototype, "$navWrapper");
+n = new WeakMap(), m.styles = [$, k];
+let i = m;
+s([
+  p({ type: Boolean, reflect: !0 })
+], i.prototype, "compact", 1);
+s([
+  p({ type: String })
+], i.prototype, "lang", 2);
+s([
+  p({ attribute: "site-name" })
+], i.prototype, "siteName", 2);
+s([
+  p({ attribute: "site-url" })
+], i.prototype, "siteUrl", 2);
+s([
+  p({ type: Boolean, reflect: !0, state: !0, attribute: "is-compact" })
+], i.prototype, "isCompact", 2);
+s([
+  O()
+], i.prototype, "openDrawer", 2);
+s([
+  W({ selector: "skf-nav" })
+], i.prototype, "nav", 2);
+s([
+  D("#nav-wrapper")
+], i.prototype, "$navWrapper", 2);
 export {
-  t as SkfHeader
+  i as SkfHeader
 };

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

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

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

@@ -7,7 +7,7 @@ const a = e`
 
 		header {
 			align-items: center;
-			background-color: var(--skf-bg-color-emphasised);
+			background-color: var(--skf-bg-color-emphasized);
 			block-size: var(--skf-header-height);
 			display: flex;
 			gap: var(--skf-spacing-125);
@@ -48,7 +48,7 @@ const a = e`
 		}
 
 		skf-drawer::part(body) {
-			background-color: var(--skf-bg-color-emphasised);
+			background-color: var(--skf-bg-color-emphasized);
 			padding: 0;
 		}
 

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

@@ -1,7 +1,6 @@
 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';
-type SkfHeadingType = HeadingType;
 /**
  * The `<Heading>` component is to deliniate content on a page. When using, take note not to skip heading levels.<br>
  * It extends the interface of native html `<h1>` to `<h4>` elements.
@@ -11,11 +10,14 @@ type SkfHeadingType = HeadingType;
  * @tagname skf-heading
  */
 export declare class SkfHeading extends SkfElement {
+    #private;
     static styles: CSSResultGroup;
     /** Controls which heading element will be rendered. Should not be used to affect appearance */
-    as: SkfHeadingType;
+    as: HeadingType;
     /** If defined, changes the appearance of the heading */
-    styledAs?: SkfHeadingType;
-    render(): import("lit").TemplateResult;
+    styledAs?: HeadingType;
+    connectedCallback(): void;
+    /** @internal */
+    _handleStateChange(): void;
+    render(): import("lit").TemplateResult<1>;
 }
-export {};