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

package/dist/components/switch/switch.component.js

@@ -1,21 +1,29 @@
-import { FormBase as o } from "../../internal/components/formBase.js";
-import { Asterisk as u } from "../../internal/templates/asterisk.js";
-import { componentStyles as p } from "../../styles/component.styles.js";
-import { nothing as c, html as v } from "lit";
-import { property as s, state as f, query as m } from "lit/decorators.js";
-import { classMap as _ } from "lit/directives/class-map.js";
-import { ifDefined as b } from "lit/directives/if-defined.js";
-import { styles as y } from "./switch.styles.js";
-var g = Object.defineProperty, i = (d, e, a, k) => {
-  for (var l = void 0, h = d.length - 1, n; h >= 0; h--)
-    (n = d[h]) && (l = n(e, a, l) || l);
-  return l && g(e, a, l), l;
+var p = (t) => {
+  throw TypeError(t);
 };
-const r = class r extends o {
+var c = (t, i, e) => i.has(t) || p("Cannot " + e);
+var v = (t, i, e) => (c(t, i, "read from private field"), e ? e.call(t) : i.get(t)), f = (t, i, e) => i.has(t) ? p("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(t) : i.set(t, e), m = (t, i, e, l) => (c(t, i, "write to private field"), l ? l.call(t, e) : i.set(t, e), e);
+import { FormBase as _ } from "../../internal/components/formBase.js";
+import { Asterisk as y } from "../../internal/templates/asterisk.js";
+import { componentStyles as b } from "../../styles/component.styles.js";
+import { LocalizeController as g } from "../../utilities/localize.js";
+import { nothing as k, html as $ } from "lit";
+import { property as h, state as C, query as V } from "lit/decorators.js";
+import { classMap as w } from "lit/directives/class-map.js";
+import { ifDefined as q } from "lit/directives/if-defined.js";
+import { styles as z } from "./switch.styles.js";
+var A = Object.defineProperty, a = (t, i, e, l) => {
+  for (var r = void 0, d = t.length - 1, u; d >= 0; d--)
+    (u = t[d]) && (r = u(i, e, r) || r);
+  return r && A(i, e, r), r;
+}, n;
+const o = class o extends _ {
   constructor() {
-    super(...arguments), this._initialChecked = !1, this.debug = !1, this.checked = !1, this.hideLabel = !1, this.size = "md", this.value = "", this._invalid = !1, this._handleChange = (e) => {
-      var a;
-      e.stopPropagation(), this.pristine = !1, this.checked = ((a = this.$input) == null ? void 0 : a.checked) ?? !1, this._validateInput(), this.checked ? this.setFormValue(this.value) : this.setFormValue(null), this.emitEvent("change");
+    super(...arguments);
+    f(this, n);
+    m(this, n, new g(this)), this._initialChecked = !1, this.debug = !1, this.checked = !1, this.hideLabel = !1, this.lang = "en", this.size = "md", this.value = "", this._invalid = !1, this._handleChange = (e) => {
+      var l;
+      e.stopPropagation(), this.pristine = !1, this.checked = ((l = this.$input) == null ? void 0 : l.checked) ?? !1, this._validateInput(), this.checked ? this.setFormValue(this.value) : this.setFormValue(null), this.emitEvent("change");
     }, this._handleInvalid = (e) => {
       this.pristine = !1, this._invalid = !0, this.customErrorDisplay && e.preventDefault();
     }, this._resetValue = (e) => {
@@ -42,18 +50,18 @@ const r = class r extends o {
     var e;
     if (this._invalid = !1, this.required && !this.checked) {
       this.pristine || (this._invalid = !0);
-      const a = this.hasAttribute("data-valuemissing") ? this.getAttribute("data-valuemissing") : (
+      const l = this.hasAttribute("data-valuemissing") ? this.getAttribute("data-valuemissing") : (
         // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
         ((e = this.$input) == null ? void 0 : e.validationMessage) || "Please check this box if you want to proceed"
       );
-      this.setValidity({ valueMissing: !0 }, String(a));
+      this.setValidity({ valueMissing: !0 }, String(l));
     } else
       this.setValidity({});
   }
   render() {
-    return v`
+    return $`
 			<label
-				class=${_({
+				class=${w({
       switch: !0,
       "switch--small": this.size === "sm"
     })}
@@ -67,50 +75,50 @@ const r = class r extends o {
 					@reset=${this._resetValue}
 					aria-invalid=${!!this._invalid}
 					class="switch__input"
-					name=${b(this.name)}
+					name=${q(this.name)}
 					type="checkbox"
 					value=${this.value}
 				/>
-				<div class="switch__label ${this.hideLabel ? "visually-hidden" : c}">
+				<div class="switch__label ${this.hideLabel ? "visually-hidden" : k}">
 					<slot>${this.label}</slot>
-					${this.required ? u(this.requiredLabel, "switch__asterisk") : null}
+					${this.required ? y(v(this, n).term("required"), "switch__asterisk") : null}
 				</div>
 			</label>
 		`;
   }
 };
-r.styles = [p, y];
-let t = r;
-i([
-  s({ type: Boolean })
-], t.prototype, "debug");
-i([
-  s({ type: Boolean, reflect: !0 })
-], t.prototype, "checked");
-i([
-  s({ type: Boolean, attribute: "hide-label", reflect: !0 })
-], t.prototype, "hideLabel");
-i([
-  s()
-], t.prototype, "label");
-i([
-  s()
-], t.prototype, "name");
-i([
-  s({ attribute: "required-label" })
-], t.prototype, "requiredLabel");
-i([
-  s({ reflect: !0 })
-], t.prototype, "size");
-i([
-  s()
-], t.prototype, "value");
-i([
-  f()
-], t.prototype, "_invalid");
-i([
-  m("input")
-], t.prototype, "$input");
+n = new WeakMap(), o.styles = [b, z];
+let s = o;
+a([
+  h({ type: Boolean })
+], s.prototype, "debug");
+a([
+  h({ type: Boolean, reflect: !0 })
+], s.prototype, "checked");
+a([
+  h({ type: Boolean, attribute: "hide-label", reflect: !0 })
+], s.prototype, "hideLabel");
+a([
+  h()
+], s.prototype, "label");
+a([
+  h({ type: String })
+], s.prototype, "lang");
+a([
+  h()
+], s.prototype, "name");
+a([
+  h({ reflect: !0 })
+], s.prototype, "size");
+a([
+  h()
+], s.prototype, "value");
+a([
+  C()
+], s.prototype, "_invalid");
+a([
+  V("input")
+], s.prototype, "$input");
 export {
-  t as SkfSwitch
+  s as SkfSwitch
 };

package/dist/components/switch/switch.styles.js

@@ -60,7 +60,7 @@ const o = [
 				}
 
 				&:checked {
-					--_skf-switch-bg-color: var(--skf-bg-color-emphasised);
+					--_skf-switch-bg-color: var(--skf-bg-color-emphasized);
 
 					&::after {
 						transform: translateX(calc(var(--_skf-switch-width) - var(--_skf-switch-height)));

package/dist/components/tabs/tab.styles.js

@@ -86,7 +86,7 @@ const e = o`
 			}
 
 			&:hover {
-				--_skf-tab-bg-color: var(--skf-color-blue-lighest);
+				--_skf-tab-bg-color: var(--skf-color-blue-lightest);
 			}
 
 			:host(:focus-visible) & {
@@ -97,7 +97,7 @@ const e = o`
 		.tab--expanded.tab--selected {
 			--_skf-tab-bg-color: var(--skf-bg-color-neutral-1);
 			--_skf-tab-border-bottom-color: transparent;
-			--_skf-tab-color: var(--skf-text-color-emphasised);
+			--_skf-tab-color: var(--skf-text-color-emphasized);
 
 			font-weight: var(--skf-font-weight-bold);
 

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

@@ -1,6 +1,7 @@
 import '../icon/icon.js';
 import { SkfElement } from '../../internal/components/skf-element';
 import type { Icon, Severity } from '../../internal/types.js';
+import { type Language } from '../../utilities/localize.js';
 import { type CSSResultGroup } from 'lit';
 type Size = 'sm' | 'md';
 /**
@@ -25,6 +26,8 @@ export declare class SkfTag extends SkfElement {
     icon?: Icon;
     /** If defined, gives the supplied appearance */
     color?: Severity;
+    /** Sets the internal language of the component */
+    lang: Language;
     /** If defined, accepts a function that runs on click */
     set onClick(onClickFn: ((event: Event) => void) | undefined);
     get onClick(): ((event: Event) => void) | undefined;

package/dist/components/tag/tag.component.js

@@ -1,39 +1,41 @@
-var y = (e) => {
+var k = (e) => {
   throw TypeError(e);
 };
-var k = (e, o, t) => o.has(e) || y("Cannot " + t);
-var m = (e, o, t) => (k(e, o, "read from private field"), t ? t.call(e) : o.get(e)), d = (e, o, t) => o.has(e) ? y("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(e) : o.set(e, t), v = (e, o, t, i) => (k(e, o, "write to private field"), i ? i.call(e, t) : o.set(e, t), t);
+var C = (e, o, t) => o.has(e) || k("Cannot " + t);
+var m = (e, o, t) => (C(e, o, "read from private field"), t ? t.call(e) : o.get(e)), d = (e, o, t) => o.has(e) ? k("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(e) : o.set(e, t), f = (e, o, t, s) => (C(e, o, "write to private field"), s ? s.call(e, t) : o.set(e, t), t);
 import "../icon/icon.js";
-import { SkfElement as _ } from "../../internal/components/skf-element.js";
-import { stateMap as g } from "../../internal/helpers/stateMap.js";
-import { watch as w } from "../../internal/helpers/watch.js";
-import { componentStyles as $ } from "../../styles/component.styles.js";
-import { nothing as C, html as f } from "lit";
-import { property as c, query as R } from "lit/decorators.js";
-import { ifDefined as D } from "lit/directives/if-defined.js";
-import { styles as E } from "./tag.styles.js";
-var P = Object.defineProperty, z = Object.getOwnPropertyDescriptor, r = (e, o, t, i) => {
-  for (var s = i > 1 ? void 0 : i ? z(o, t) : o, l = e.length - 1, p; l >= 0; l--)
-    (p = e[l]) && (s = (i ? p(o, t, s) : p(s)) || s);
-  return i && s && P(o, t, s), s;
+import { SkfElement as g } from "../../internal/components/skf-element.js";
+import { stateMap as w } from "../../internal/helpers/stateMap.js";
+import { watch as $ } from "../../internal/helpers/watch.js";
+import { componentStyles as R } from "../../styles/component.styles.js";
+import { LocalizeController as z } from "../../utilities/localize.js";
+import { nothing as b, html as u } from "lit";
+import { property as l, query as D } from "lit/decorators.js";
+import { ifDefined as E } from "lit/directives/if-defined.js";
+import { styles as P } from "./tag.styles.js";
+var S = Object.defineProperty, B = Object.getOwnPropertyDescriptor, r = (e, o, t, s) => {
+  for (var i = s > 1 ? void 0 : s ? B(o, t) : o, a = e.length - 1, v; a >= 0; a--)
+    (v = e[a]) && (i = (s ? v(o, t, i) : v(i)) || i);
+  return s && i && S(o, t, i), i;
 };
-const b = {
+const _ = {
   size: ["sm", "md"],
   color: ["error", "info", "success", "warning"]
 };
-var a, h;
-const u = class u extends _ {
+var c, h, p;
+const y = class y extends g {
   constructor() {
     super(...arguments);
-    d(this, a);
+    d(this, c);
     d(this, h);
-    v(this, a, this.attachInternals()), v(this, h, m(this, a).states), this.size = "md", this.removable = !1, this._handleKeyDown = (t) => {
+    d(this, p);
+    f(this, c, new z(this)), f(this, h, this.attachInternals()), f(this, p, m(this, h).states), this.size = "md", this.lang = "en", this.removable = !1, this._handleKeyDown = (t) => {
       (t.key === "Enter" || t.key === " ") && this.$removeButton.click();
     }, this._handleRemove = (t) => {
       this._onRemove && this._onRemove(t);
     }, this._handleClick = (t) => {
-      var l;
-      t.stopPropagation(), t.composedPath()[0].localName === "button" ? this.remove() : (l = this.onClick) == null || l.call(this, t);
+      var a;
+      t.stopPropagation(), t.composedPath()[0].localName === "button" ? this.remove() : (a = this.onClick) == null || a.call(this, t);
     };
   }
   set onClick(t) {
@@ -54,51 +56,58 @@ const u = class u extends _ {
   disconnectedCallback() {
     super.disconnectedCallback(), this.removeEventListener("click", this._handleClick);
   }
-  attributeChangedCallback(t, i, s) {
-    super.attributeChangedCallback(t, i, s), t === "removable" && s !== null ? this.addEventListener("keydown", this._handleKeyDown) : this.removeEventListener("keydown", this._handleKeyDown);
+  attributeChangedCallback(t, s, i) {
+    super.attributeChangedCallback(t, s, i), t === "removable" && i !== null ? this.addEventListener("keydown", this._handleKeyDown) : this.removeEventListener("keydown", this._handleKeyDown);
   }
-  _handleStateChange(t, i, s) {
-    g(m(this, h), b[t]).set(s);
+  _handleStateChange(t, s, i) {
+    w(m(this, p), _[t]).set(i);
   }
   render() {
-    return f`
+    return u`
 			<div id="root">
-				${this.icon ? f`<skf-icon color=${D(this.color)} name=${this.icon} size="sm"></skf-icon>` : C}
+				${this.icon ? u`<skf-icon color=${E(this.color)} name=${this.icon} size="sm"></skf-icon>` : b}
 				<slot></slot>
-				${this.removable ? f`
-							<button @click=${this._handleRemove} type="button">
+				${this.removable ? u`
+							<button
+								@click=${this._handleRemove}
+								aria-label=${m(this, c).term("close")}
+								type="button"
+							>
 								<skf-icon name="close" size="xs"></skf-icon>
 							</button>
-						` : C}
+						` : b}
 			</div>
 		`;
   }
 };
-a = new WeakMap(), h = new WeakMap(), u.styles = [$, E];
-let n = u;
+c = new WeakMap(), h = new WeakMap(), p = new WeakMap(), y.styles = [R, P];
+let n = y;
 r([
-  c({ type: String })
+  l({ type: String })
 ], n.prototype, "size", 2);
 r([
-  c({ type: String })
+  l({ type: String })
 ], n.prototype, "icon", 2);
 r([
-  c({ type: String })
+  l({ type: String })
 ], n.prototype, "color", 2);
 r([
-  c({ attribute: !1 })
+  l({ type: String })
+], n.prototype, "lang", 2);
+r([
+  l({ attribute: !1 })
 ], n.prototype, "onClick", 1);
 r([
-  c({ attribute: !1 })
+  l({ attribute: !1 })
 ], n.prototype, "onRemove", 1);
 r([
-  c({ type: Boolean })
+  l({ type: Boolean })
 ], n.prototype, "removable", 2);
 r([
-  R("button")
+  D("button")
 ], n.prototype, "$removeButton", 2);
 r([
-  w(Object.keys(b))
+  $(Object.keys(_))
 ], n.prototype, "_handleStateChange", 1);
 export {
   n as SkfTag

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

@@ -3,6 +3,7 @@ import { FormBase } from '../../internal/components/formBase.js';
 import '../../internal/components/hint/hint.js';
 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';
 interface SkfTextAreaProps extends Omit<FormFieldBaseProps, 'type'> {
     cols?: number;
@@ -26,6 +27,7 @@ interface SkfTextAreaProps extends Omit<FormFieldBaseProps, 'type'> {
  * @tagname skf-textarea
  */
 export declare class SkfTextArea extends FormBase implements SkfTextAreaProps {
+    #private;
     static styles: CSSResultGroup;
     /** @internal */
     private customError;
@@ -42,6 +44,8 @@ export declare class SkfTextArea extends FormBase implements SkfTextAreaProps {
     hint?: string;
     /** If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute. */
     label?: string;
+    /** Sets the internal language of the component */
+    lang: Language;
     /** If defined, adds name to the input-element */
     name?: string;
     /** If defined, sets the maximum character length to accept for this input */
@@ -52,8 +56,6 @@ export declare class SkfTextArea extends FormBase implements SkfTextAreaProps {
     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, sets the rows of the textarea */
     rows?: number;
     /** If defined, displays provided severity state */