@skf-design-system/ui-components 1.0.2-beta.6 → 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.js

@@ -2,7 +2,7 @@ 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, s) => (d(t, e, "write to private field"), s ? s.call(t, r) : e.set(t, r), 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";
@@ -10,13 +10,13 @@ import { componentStyles as C } from "../../styles/component.styles.js";
 import "lit";
 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, s) => {
-  for (var o = s > 1 ? void 0 : s ? w(e, r) : e, l = t.length - 1, n; l >= 0; l--)
-    (n = t[l]) && (o = (s ? n(e, r, o) : n(o)) || o);
-  return s && o && j(e, r, o), o;
+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: ["emphasised", "inverse", "primary", "secondary", "tertiary"],
+  color: ["emphasized", "inverse", "primary", "secondary", "tertiary"],
   vertical: "vertical"
 };
 var i, p;
@@ -30,24 +30,24 @@ const f = class f extends O {
   connectedCallback() {
     super.connectedCallback(), this.role = this.decorative ? "generic" : "separator", this.ariaOrientation = this.vertical ? "vertical" : "horizontal";
   }
-  _handleStateChange(r, s, o) {
+  _handleStateChange(r, a, o) {
     b(h(this, p), u[r]).set(o);
   }
 };
 i = new WeakMap(), p = new WeakMap(), f.styles = [C, P];
-let a = f;
+let s = f;
 c([
   v({ type: String })
-], a.prototype, "color", 2);
+], s.prototype, "color", 2);
 c([
   v({ type: Boolean })
-], a.prototype, "decorative", 2);
+], s.prototype, "decorative", 2);
 c([
   v({ type: Boolean })
-], a.prototype, "vertical", 2);
+], s.prototype, "vertical", 2);
 c([
   g(Object.keys(u))
-], a.prototype, "_handleStateChange", 1);
+], s.prototype, "_handleStateChange", 1);
 export {
-  a as SkfDivider
+  s as SkfDivider
 };

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

@@ -24,8 +24,8 @@ const o = r`
 				margin-inline: var(--skf-divider-spacing, var(--skf-spacing-100));
 			}
 
-			:host(:state(emphasised)) {
-				--_skf-divider-border-color: var(--skf-border-color-emphasised);
+			:host(:state(emphasized)) {
+				--_skf-divider-border-color: var(--skf-border-color-emphasized);
 			}
 
 			:host(:state(inverse)) {

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:
@@ -30,10 +31,10 @@ export declare class SkfDrawer extends SkfElement {
     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: Size;
     /** If true, Drawer is open */

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

@@ -1,33 +1,35 @@
-var _ = (e) => {
+var y = (e) => {
   throw TypeError(e);
 };
-var y = (e, i, t) => i.has(e) || _("Cannot " + t);
-var d = (e, i, t) => (y(e, i, "read from private field"), t ? t.call(e) : i.get(e)), m = (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), g = (e, i, t, o) => (y(e, i, "write to private field"), o ? o.call(e, t) : i.set(e, t), t);
+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 I } from "../../internal/components/skf-element.js";
-import { stateMap as D } from "../../internal/helpers/stateMap.js";
-import { watch as f } from "../../internal/helpers/watch.js";
+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 k } from "../../styles/component.styles.js";
-import { html as C } from "lit";
-import { property as p, query as $ } from "lit/decorators.js";
-import { styles as E } from "./drawer.styles.js";
-var A = Object.defineProperty, v = Object.getOwnPropertyDescriptor, n = (e, i, t, o) => {
-  for (var s = o > 1 ? void 0 : o ? v(i, t) : i, r = e.length - 1, l; r >= 0; r--)
+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 && A(i, t, s), s;
+  return o && s && P(i, t, s), s;
 };
-const w = {
+const I = {
   placement: ["left", "right"],
   size: ["sm", "md", "lg"]
 };
-var h, c;
-const u = class u extends I {
+var h, c, p;
+const _ = class _ extends D {
   constructor() {
     super(...arguments);
-    m(this, h);
-    m(this, c);
-    g(this, h, this.attachInternals()), g(this, c, d(this, h).states), this.closeButtonAriaLabel = "Close dialog", this.size = "md", this.open = !1, this.placement = "right", this._placementChanged = () => {
+    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();
       });
@@ -45,7 +47,7 @@ const u = class u extends I {
     super.disconnectedCallback(), (t = this._abortController) == null || t.abort();
   }
   _handleStateChange(t, o, s) {
-    D(d(this, c), w[t]).set(s);
+    k(m(this, p), I[t]).set(s);
   }
   async _openChanged() {
     var t;
@@ -94,12 +96,12 @@ const u = class u extends I {
     this.open = !1;
   }
   render() {
-    return C`
+    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}"
 					>
@@ -111,34 +113,34 @@ const u = class u extends I {
 		`;
   }
 };
-h = new WeakMap(), c = new WeakMap(), u.styles = [k, E];
-let a = u;
+h = new WeakMap(), c = new WeakMap(), p = new WeakMap(), _.styles = [C, O];
+let a = _;
 n([
-  p({ type: String, attribute: "close-button-aria-label" })
-], a.prototype, "closeButtonAriaLabel", 2);
-n([
-  p({ type: String })
+  d({ type: String })
 ], a.prototype, "heading", 2);
 n([
-  p({ type: String })
+  d({ type: String })
+], a.prototype, "lang", 2);
+n([
+  d({ type: String })
 ], a.prototype, "size", 2);
 n([
-  p({ type: Boolean, reflect: !0, useDefault: !0 })
+  d({ type: Boolean, reflect: !0, useDefault: !0 })
 ], a.prototype, "open", 2);
 n([
-  p({ type: String })
+  d({ type: String })
 ], a.prototype, "placement", 2);
 n([
-  $("dialog")
+  v("dialog")
 ], a.prototype, "$dialog", 2);
 n([
-  f(Object.keys(w))
+  u(Object.keys(I))
 ], a.prototype, "_handleStateChange", 1);
 n([
-  f("placement", { waitUntilFirstUpdate: !0 })
+  u("placement", { waitUntilFirstUpdate: !0 })
 ], a.prototype, "_placementChanged", 2);
 n([
-  f("open", { waitUntilFirstUpdate: !0, afterUpdate: !0 })
+  u("open", { waitUntilFirstUpdate: !0, afterUpdate: !0 })
 ], a.prototype, "_openChanged", 1);
 export {
   a as SkfDrawer

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

@@ -24,7 +24,7 @@ const o = e`
 
 			header {
 				align-items: center;
-				background-color: var(--skf-bg-color-emphasised);
+				background-color: var(--skf-bg-color-emphasized);
 				block-size: var(--skf-size-48);
 				color: var(--skf-text-color-inverse);
 				display: flex;

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,83 @@ 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());
+      var t;
+      this.clientWidth > (this._dynamicBreakpoint ?? 0) && (this._dynamicBreakpoint = null, (t = this._widthObserver) == null || t.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());
+      var t;
+      this.$navWrapper.clientWidth < this.$navWrapper.scrollWidth && (this._dynamicBreakpoint = this.clientWidth, (t = this._widthObserver) == null || t.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.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/icon/icon.component.js

@@ -8,16 +8,16 @@ import { stateMap as b } from "../../internal/helpers/stateMap.js";
 import { watch as _ } from "../../internal/helpers/watch.js";
 import { ICONS as S } from "@skf-design-system/ui-assets";
 import { componentStyles as C } from "../../styles/component.styles.js";
-import { html as O } from "lit";
+import { html as z } from "lit";
 import { property as n } from "lit/decorators.js";
-import { styles as w } from "./icon.styles.js";
-var z = Object.defineProperty, P = Object.getOwnPropertyDescriptor, p = (t, e, r, o) => {
+import { styles as O } from "./icon.styles.js";
+var w = Object.defineProperty, P = Object.getOwnPropertyDescriptor, p = (t, e, r, o) => {
   for (var s = o > 1 ? void 0 : o ? P(e, r) : e, m = t.length - 1, h; m >= 0; m--)
     (h = t[m]) && (s = (o ? h(e, r, s) : h(s)) || s);
-  return o && s && z(e, r, s), s;
+  return o && s && w(e, r, s), s;
 };
 const x = {
-  color: ["emphasised", "error", "info", "inverse", "primary", "secondary", "success", "warning"],
+  color: ["emphasized", "error", "info", "inverse", "primary", "secondary", "success", "warning"],
   size: ["lg", "md", "sm", "xs"]
 };
 var a, l;
@@ -35,10 +35,10 @@ const f = class f extends v {
     b(c(this, l), x[r]).set(s);
   }
   render() {
-    return O`<div id="root">${S[this.name]}</div>`;
+    return z`<div id="root">${S[this.name]}</div>`;
   }
 };
-a = new WeakMap(), l = new WeakMap(), f.styles = [C, w];
+a = new WeakMap(), l = new WeakMap(), f.styles = [C, O];
 let i = f;
 p([
   n({ type: String })