@skf-design-system/ui-components 1.0.2-beta.5 → 1.0.2-beta.7

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 })

package/dist/components/icon/icon.styles.js

@@ -38,8 +38,8 @@ const r = o`
 				--_skf-icon-color: var(--skf-icon-color-inverse);
 			}
 
-			:host(:state(emphasised)) #root {
-				--_skf-icon-color: var(--skf-icon-color-emphasised);
+			:host(:state(emphasized)) #root {
+				--_skf-icon-color: var(--skf-icon-color-emphasized);
 			}
 
 			:host(:state(alert)) #root {

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

@@ -3,6 +3,7 @@ import { FormBase } from '../../internal/components/formBase.js';
 import '../../internal/components/hint/hint';
 import type { FormFieldSeverity } from '../../internal/types.js';
 import type { FormFieldBaseProps } from '../../internal/types/formField.js';
+import { type Language } from '../../utilities/localize.js';
 import { type CSSResultGroup } from 'lit';
 /**
  * The skf-text-field is used to create a text input field. It can be used inside a form element or standalone
@@ -23,6 +24,7 @@ import { type CSSResultGroup } from 'lit';
  * behaviour: validate-on-input, validate-on-submit and native-validation
  */
 export declare class SkfInput extends FormBase implements FormFieldBaseProps {
+    #private;
     static styles: CSSResultGroup;
     private customError;
     /** @internal intermediary value for reset to function, e.g value attribute act as default value */
@@ -32,12 +34,6 @@ export declare class SkfInput extends FormBase implements FormFieldBaseProps {
      * [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/autocomplete) for details.
      */
     autocomplete?: HTMLInputElement['autocomplete'];
-    /** Custom aria-label for the clear button. **Notice!** Only applicable to type=search. */
-    buttonAriaLabelClear: string;
-    /** Custom aria-label for the visibility button. **Notice!** Only applicable to type=password. */
-    buttonAriaLabelHide: string;
-    /** Custom aria-label for the visibility button **Notice!** Only applicable to type=password. */
-    buttonAriaLabelShow: string;
     /** If defined, forces component to invalid state until removed. Its value is used as hint text. */
     set customInvalid(value: string | undefined);
     get customInvalid(): string | undefined;
@@ -54,6 +50,8 @@ export declare class SkfInput extends FormBase implements FormFieldBaseProps {
     inputmode: HTMLInputElement['inputMode'];
     /** If defined, sets the input's label. Alternatively, you can use the `label` attribute. */
     label?: string;
+    /** Sets the internal language of the component */
+    lang: Language;
     /** If defined, displays a prefix/adornment before the input-element */
     leading?: string;
     /** If defined, sets the maximum value to accept for this input */
@@ -72,8 +70,6 @@ export declare class SkfInput extends FormBase implements FormFieldBaseProps {
     placeholder?: string;
     /** If true, makes the element not mutable, meaning the user can not edit the control */
     readonly: boolean;
-    /** If defined, renders an alternative A11y text for the asterisk */
-    requiredLabel?: string;
     /** If defined, displays provided severity state */
     severity?: FormFieldSeverity;
     /** If true, displays valid state after interaction */