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

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,6 +2,7 @@ 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 navigation will be collapsed to mobile-view if the menu items exceed the available width.
@@ -13,6 +14,7 @@ import { type CSSResultGroup } from 'lit';
  * @tagname skf-header
  */
 export declare class SkfHeader extends SkfElement {
+    #private;
     static styles: CSSResultGroup;
     /** @internal */
     private _dynamicBreakpoint?;
@@ -21,8 +23,8 @@ export declare class SkfHeader extends SkfElement {
     /** 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;
+    /** 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,24 +1,32 @@
+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 { 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 {
+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.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(e) {
-    this.isCompact = e;
+  set compact(t) {
+    this.isCompact = t;
   }
   get compact() {
     return this.isCompact;
@@ -35,82 +43,81 @@ const l = class l 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 ? v`a` : v`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 ? o`<h2>${this.siteName}</h2>` : u}
-			</${e}>
+				${this.siteName ? h`<h2>${this.siteName}</h2>` : C}
+			</${t}>
 		`;
   }
   render() {
-    return o`
+    return h`
 			<header role="banner">
 				${this._renderMeta()}
 				<div id="nav-wrapper">
-					${this.isCompact ? o`
+					${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>
-							` : o`<slot></slot>`}
+							` : h`<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);
+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

@@ -10,10 +10,14 @@ import { type CSSResultGroup } from 'lit';
  * @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: HeadingType;
     /** If defined, changes the appearance of the heading */
     styledAs?: HeadingType;
-    render(): import("lit").TemplateResult;
+    connectedCallback(): void;
+    /** @internal */
+    _handleStateChange(): void;
+    render(): import("lit").TemplateResult<1>;
 }

package/dist/components/heading/heading.component.js

@@ -1,35 +1,62 @@
-import { SkfElement as f } from "../../internal/components/skf-element.js";
-import { componentStyles as n } from "../../styles/component.styles.js";
-import "lit";
-import { property as i } from "lit/decorators.js";
-import { literal as u, html as c } from "lit/static-html.js";
-import { styles as y } from "./heading.styles.js";
-var d = Object.defineProperty, a = (l, r, p, h) => {
-  for (var t = void 0, o = l.length - 1, m; o >= 0; o--)
-    (m = l[o]) && (t = m(r, p, t) || t);
-  return t && d(r, p, t), t;
+var y = (t) => {
+  throw TypeError(t);
 };
-const s = class s extends f {
+var d = (t, e, s) => e.has(t) || y("Cannot " + s);
+var n = (t, e, s) => (d(t, e, "read from private field"), s ? s.call(t) : e.get(t)), c = (t, e, s) => e.has(t) ? y("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, s), m = (t, e, s, r) => (d(t, e, "write to private field"), r ? r.call(t, s) : e.set(t, s), s);
+import { SkfElement as b } from "../../internal/components/skf-element.js";
+import { stateMap as _ } from "../../internal/helpers/stateMap.js";
+import { watch as C } from "../../internal/helpers/watch.js";
+import { componentStyles as g } from "../../styles/component.styles.js";
+import { html as w } from "lit";
+import { property as v } from "lit/decorators.js";
+import { styles as L } from "./heading.styles.js";
+var O = Object.defineProperty, P = Object.getOwnPropertyDescriptor, f = (t, e, s, r) => {
+  for (var a = r > 1 ? void 0 : r ? P(e, s) : e, l = t.length - 1, p; l >= 0; l--)
+    (p = t[l]) && (a = (r ? p(e, s, a) : p(a)) || a);
+  return r && a && O(e, s, a), a;
+}, h, i;
+const u = class u extends b {
   constructor() {
-    super(...arguments), this.as = "h2";
+    super(...arguments);
+    c(this, h);
+    c(this, i);
+    m(this, h, this.attachInternals()), m(this, i, n(this, h).states), this.as = "h2";
+  }
+  connectedCallback() {
+    switch (super.connectedCallback(), this.role = "heading", !0) {
+      case this.as === "h1":
+        this.ariaLevel = "1";
+        break;
+      case this.as === "h3":
+        this.ariaLevel = "3";
+        break;
+      case this.as === "h4":
+        this.ariaLevel = "4";
+        break;
+      default:
+        this.ariaLevel = "2";
+        break;
+    }
+  }
+  _handleStateChange() {
+    const s = ["h1", "h2", "h3", "h4"];
+    _(n(this, i), s).set(this.styledAs);
   }
   render() {
-    const r = u`${this.as}`;
-    return c`
-			<${r} id="root">
-				<slot></slot>
-			</${r}>
-		`;
+    return w`<slot data-as=${this.as} id="root"></slot>`;
   }
 };
-s.styles = [n, y];
-let e = s;
-a([
-  i({ reflect: !0 })
-], e.prototype, "as");
-a([
-  i({ attribute: "styled-as", reflect: !0 })
-], e.prototype, "styledAs");
+h = new WeakMap(), i = new WeakMap(), u.styles = [g, L];
+let o = u;
+f([
+  v({ type: String, reflect: !0, useDefault: !0 })
+], o.prototype, "as", 2);
+f([
+  v({ type: String, attribute: "styled-as" })
+], o.prototype, "styledAs", 2);
+f([
+  C("styledAs")
+], o.prototype, "_handleStateChange", 1);
 export {
-  e as SkfHeading
+  o as SkfHeading
 };

package/dist/components/heading/heading.styles.js

@@ -1,57 +1,55 @@
 import { css as s } from "lit";
 const t = s`
 	@layer components {
-		:host {
-			display: contents;
-		}
-
-		#root {
-			color: var(--skf-text-color-primary);
-			font-size: var(--_skf-heading-size);
-			font-weight: var(--_skf-heading-weight);
-			line-height: 1.2;
-
-			/* Defaults */
-			:host([as='h1']) & {
-				--_skf-heading-size: var(--skf-font-size-700);
-				--_skf-heading-weight: var(--skf-font-weight-regular);
-			}
-
-			:host(:is([as='h2'], [as='h3'], [as='h4'])) & {
-				--_skf-heading-weight: var(--skf-font-weight-bold);
-			}
-
-			:host([as='h2']) & {
-				--_skf-heading-size: var(--skf-font-size-300);
-			}
-
-			:host([as='h3']) & {
-				--_skf-heading-size: var(--skf-font-size-200);
-			}
-
-			:host([as='h4']) & {
-				--_skf-heading-size: var(--skf-font-size-200);
+		@layer base {
+			#root {
+				color: var(--skf-text-color-primary);
+				font-size: var(--_skf-heading-size);
+				font-weight: var(--_skf-heading-weight);
+				line-height: 1.2;
+
+				&[data-as='h1'] {
+					--_skf-heading-size: var(--skf-font-size-700);
+					--_skf-heading-weight: var(--skf-font-weight-regular);
+				}
+
+				&:is([data-as='h2'], [data-as='h3'], [data-as='h4']) {
+					--_skf-heading-weight: var(--skf-font-weight-bold);
+				}
+
+				&[data-as='h2'] {
+					--_skf-heading-size: var(--skf-font-size-300);
+				}
+
+				&[data-as='h3'] {
+					--_skf-heading-size: var(--skf-font-size-200);
+				}
+
+				&[data-as='h4'] {
+					--_skf-heading-size: var(--skf-font-size-200);
+				}
 			}
+		}
 
-			/** Styled As */
-			:host([styled-as='h1']) & {
+		@layer mods {
+			:host(:state(h1)) #root {
 				--_skf-heading-size: var(--skf-font-size-700);
 				--_skf-heading-weight: var(--skf-font-weight-regular);
 			}
 
-			:host(:is([styled-as='h2'], [styled-as='h3'], [styled-as='h4'])) & {
+			:host(:is(:state(h2), :state(h3), :state(h4))) #root {
 				--_skf-heading-weight: var(--skf-font-weight-bold);
 			}
 
-			:host([styled-as='h2']) & {
+			:host(:state(h2)) #root {
 				--_skf-heading-size: var(--skf-font-size-300);
 			}
 
-			:host([styled-as='h3']) & {
+			:host(:state(h3)) #root {
 				--_skf-heading-size: var(--skf-font-size-200);
 			}
 
-			:host([styled-as='h4']) & {
+			:host(:state(h4)) #root {
 				--_skf-heading-size: var(--skf-font-size-200);
 			}
 		}

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

@@ -11,6 +11,7 @@ type SkfIconSize = IconSize;
  * @tagname skf-icon
  */
 export declare class SkfIcon extends SkfElement {
+    #private;
     static styles: CSSResultGroup;
     /** Sets the color of the icon */
     color: IconColor;
@@ -20,6 +21,9 @@ export declare class SkfIcon extends SkfElement {
     name: Icon;
     /** Size of the icon */
     size: SkfIconSize;
+    connectedCallback(): void;
+    /** @internal */
+    _handleStateChange(property: string, _prev: unknown, next: unknown): void;
     render(): import("lit").TemplateResult<1>;
 }
 export {};