@skf-design-system/ui-components 1.0.0-alpha.38 → 1.0.0-alpha.39

package/README.md

@@ -351,6 +351,24 @@ Checklist:
 
 </details>
 
+## Known inconsistencies coming from the React library and v1 Web Components
+
+Our focus going forward is on the v2 package of Web Components (new brand design) and as our bandwidth is limited work done to the v1 Web Compnent library will be very limited.
+
+| React Component | WC v1 - Solution                                                              |
+| --------------- | ----------------------------------------------------------------------------- |
+| IconButton      | Use `skf-link` without text or `skf-button` variant tertiary, without a label |
+| Search          | Search is now a variant of `skf-input`                                        |
+| Image           | Was deemed not adding value over the native `picture`/`img` tag               |
+| Paragraph       | Was deemed not adding value over the native p tag                             |
+| useTooltip      | Not needed, `skf-tooltip` handles it common state internally                  |
+| usePopup        | Renamed `skf-popover`, no need for a hook                                     |
+| EmptyState      | Missing but easy to copy svg from React and recreate                          |
+| SkfUiProvider   | Not needed, you add our global css as mentioned above                         |
+| ToastProvider   | `skf-toast` handles its own internal state, no provider needed                |
+| ts tokens       | The global css contains all tokens as css custom vars which should suffice    |
+| Missing tokens  | A few tokens are missing. Report as issue but expect to create your own       |
+
 ## 🧑‍⚖️ License
 
 Copyright SKF 2024

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

@@ -1,6 +1,7 @@
 import '../icon/icon.js';
 import { SkfElement } from '../../internal/components/skf-element.js';
 import type { Icon, Severity } from '../../internal/types.js';
+import { type Language } from '../../utilities/localize.js';
 import { type CSSResultGroup } from 'lit';
 /**
  * The `<skf-alert>` is a type of notification that appears in-line
@@ -17,10 +18,10 @@ import { type CSSResultGroup } from 'lit';
 export declare class SkfAlert extends SkfElement {
     #private;
     static styles: CSSResultGroup;
-    /** Close button aria-label */
-    buttonLabel: string;
     /** If defined, displays leading icon */
     icon?: Icon;
+    /** Sets the internal language of the component */
+    lang: Language;
     /** If true, renders with an close button and sets aria-role to `status` */
     persistent: boolean;
     /** If defined, gives the supplied appearance */

package/dist/components/alert/alert.component.js

@@ -1,28 +1,30 @@
 var u = (t) => {
   throw TypeError(t);
 };
-var d = (t, e, s) => e.has(t) || u("Cannot " + s);
-var m = (t, e, s) => (d(t, e, "read from private field"), s ? s.call(t) : e.get(t)), f = (t, e, s) => e.has(t) ? u("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, s), y = (t, e, s, o) => (d(t, e, "write to private field"), o ? o.call(t, s) : e.set(t, s), s);
+var g = (t, e, s) => e.has(t) || u("Cannot " + s);
+var c = (t, e, s) => (g(t, e, "read from private field"), s ? s.call(t) : e.get(t)), h = (t, e, s) => e.has(t) ? u("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, s), m = (t, e, s, o) => (g(t, e, "write to private field"), o ? o.call(t, s) : e.set(t, s), s);
 import "../icon/icon.js";
-import { SkfElement as g } from "../../internal/components/skf-element.js";
-import { stateMap as C } from "../../internal/helpers/stateMap.js";
+import { SkfElement as C } from "../../internal/components/skf-element.js";
+import { stateMap as w } from "../../internal/helpers/stateMap.js";
 import { watch as S } from "../../internal/helpers/watch.js";
 import { componentStyles as $ } from "../../styles/component.styles.js";
-import { nothing as w, html as v } from "lit";
-import { property as p } from "lit/decorators.js";
+import { LocalizeController as z } from "../../utilities/localize.js";
+import { nothing as O, html as b } from "lit";
+import { property as f } from "lit/decorators.js";
 import { ifDefined as _ } from "lit/directives/if-defined.js";
-import { styles as O } from "./alert.styles.js";
-var P = Object.defineProperty, k = Object.getOwnPropertyDescriptor, l = (t, e, s, o) => {
-  for (var i = o > 1 ? void 0 : o ? k(e, s) : e, c = t.length - 1, h; c >= 0; c--)
-    (h = t[c]) && (i = (o ? h(e, s, i) : h(i)) || i);
-  return o && i && P(e, s, i), i;
-}, n, a;
-const b = class b extends g {
+import { styles as P } from "./alert.styles.js";
+var k = Object.defineProperty, D = Object.getOwnPropertyDescriptor, p = (t, e, s, o) => {
+  for (var i = o > 1 ? void 0 : o ? D(e, s) : e, y = t.length - 1, d; y >= 0; y--)
+    (d = t[y]) && (i = (o ? d(e, s, i) : d(i)) || i);
+  return o && i && k(e, s, i), i;
+}, n, a, l;
+const v = class v extends C {
   constructor() {
     super(...arguments);
-    f(this, n);
-    f(this, a);
-    y(this, n, this.attachInternals()), y(this, a, m(this, n).states), this.buttonLabel = "Close", this.persistent = !1, this._handleClose = () => {
+    h(this, n);
+    h(this, a);
+    h(this, l);
+    m(this, n, new z(this)), m(this, a, this.attachInternals()), m(this, l, c(this, a).states), this.lang = "en", this.persistent = !1, this._handleClose = () => {
       this.emit("skf-alert-close");
     };
   }
@@ -31,10 +33,10 @@ const b = class b extends g {
   }
   _handleStateChange() {
     const s = ["error", "info", "success", "warning"];
-    C(m(this, a), s).set(this.severity);
+    w(c(this, l), s).set(this.severity);
   }
   render() {
-    return v`
+    return b`
 			<div id="root">
 				<skf-icon
 					color=${_(this.severity ?? "secondary")}
@@ -45,30 +47,34 @@ const b = class b extends g {
 					<slot id="main"></slot>
 					<slot name="link"></slot>
 				</div>
-				${this.persistent ? v`
-							<button @click="${this._handleClose}" aria-label=${this.buttonLabel} type="button">
+				${this.persistent ? b`
+							<button
+								@click="${this._handleClose}"
+								aria-label=${c(this, n).term("close")}
+								type="button"
+							>
 								<skf-icon name="close" size="sm"></skf-icon>
 							</button>
-						` : w}
+						` : O}
 			</div>
 		`;
   }
 };
-n = new WeakMap(), a = new WeakMap(), b.styles = [$, O];
-let r = b;
-l([
-  p({ type: String, attribute: "button-label" })
-], r.prototype, "buttonLabel", 2);
-l([
-  p({ type: String })
+n = new WeakMap(), a = new WeakMap(), l = new WeakMap(), v.styles = [$, P];
+let r = v;
+p([
+  f({ type: String })
 ], r.prototype, "icon", 2);
-l([
-  p({ type: Boolean })
+p([
+  f({ type: String })
+], r.prototype, "lang", 2);
+p([
+  f({ type: Boolean })
 ], r.prototype, "persistent", 2);
-l([
-  p({ type: String })
+p([
+  f({ type: String })
 ], r.prototype, "severity", 2);
-l([
+p([
   S("severity")
 ], r.prototype, "_handleStateChange", 1);
 export {

package/dist/components/breadcrumb/breadcrumb-item.component.js

@@ -5,16 +5,15 @@ import { html as n } from "lit";
 import { property as f, state as _ } from "lit/decorators.js";
 import { ifDefined as u } from "lit/directives/if-defined.js";
 import { styles as C } from "./breadcrumb-item.styles.js";
-var v = Object.defineProperty, y = Object.getOwnPropertyDescriptor, p = (a, t, s, r) => {
-  for (var e = r > 1 ? void 0 : r ? y(t, s) : t, o = a.length - 1, l; o >= 0; o--)
-    (l = a[o]) && (e = (r ? l(t, s, e) : l(e)) || e);
-  return r && e && v(t, s, e), e;
+var v = Object.defineProperty, y = Object.getOwnPropertyDescriptor, p = (a, t, e, i) => {
+  for (var r = i > 1 ? void 0 : i ? y(t, e) : t, o = a.length - 1, l; o >= 0; o--)
+    (l = a[o]) && (r = (i ? l(t, e, r) : l(r)) || r);
+  return i && r && v(t, e, r), r;
 };
 const c = class c extends h {
   constructor() {
-    super(...arguments), this._isCurrent = !1, this._clickHandler = (t, s) => {
-      var r;
-      this._onClick && t.preventDefault(), (r = this._onClick) == null || r.call(this, t, s);
+    super(...arguments), this._isCurrent = !1, this._clickHandler = (t, e) => {
+      this._onClick && t.preventDefault(), this._onClick?.(t, e);
     };
   }
   set onClick(t) {
@@ -45,16 +44,16 @@ const c = class c extends h {
   }
 };
 c.styles = [m, C];
-let i = c;
+let s = c;
 p([
   f({ type: String })
-], i.prototype, "href", 2);
+], s.prototype, "href", 2);
 p([
   f({ attribute: !1 })
-], i.prototype, "onClick", 1);
+], s.prototype, "onClick", 1);
 p([
   _()
-], i.prototype, "_isCurrent", 2);
+], s.prototype, "_isCurrent", 2);
 export {
-  i as SkfBreadcrumbItem
+  s as SkfBreadcrumbItem
 };

package/dist/components/button/button.component.js

@@ -1,40 +1,38 @@
-var u = (i) => {
+var f = (i) => {
   throw TypeError(i);
 };
-var _ = (i, e, t) => e.has(i) || u("Cannot " + t);
-var p = (i, e, t) => (_(i, e, "read from private field"), t ? t.call(i) : e.get(i)), v = (i, e, t) => e.has(i) ? u("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(i) : e.set(i, t), $ = (i, e, t, a) => (_(i, e, "write to private field"), a ? a.call(i, t) : e.set(i, t), t);
+var u = (i, e, t) => e.has(i) || f("Cannot " + t);
+var h = (i, e, t) => (u(i, e, "read from private field"), t ? t.call(i) : e.get(i)), _ = (i, e, t) => e.has(i) ? f("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(i) : e.set(i, t), v = (i, e, t, a) => (u(i, e, "write to private field"), a ? a.call(i, t) : e.set(i, t), t);
 import "../icon/icon.js";
 import "../loader/loader.js";
-import { SkfElement as O } from "../../internal/components/skf-element.js";
-import { watch as V } from "../../internal/helpers/watch.js";
-import { componentStyles as w } from "../../styles/component.styles.js";
-import { html as y, LitElement as z, nothing as b } from "lit";
-import { property as r, state as P, query as m } from "lit/decorators.js";
-import { classMap as L } from "lit/directives/class-map.js";
-import { ifDefined as g } from "lit/directives/if-defined.js";
-import { styles as C } from "./button.styles.js";
-var F = Object.defineProperty, q = Object.getOwnPropertyDescriptor, s = (i, e, t, a) => {
-  for (var n = a > 1 ? void 0 : a ? q(e, t) : e, h = i.length - 1, d; h >= 0; h--)
-    (d = i[h]) && (n = (a ? d(e, t, n) : d(n)) || n);
-  return a && n && F(e, t, n), n;
+import { SkfElement as g } from "../../internal/components/skf-element.js";
+import { watch as O } from "../../internal/helpers/watch.js";
+import { componentStyles as V } from "../../styles/component.styles.js";
+import { html as p, LitElement as w, nothing as b } from "lit";
+import { property as r, state as z, query as m } from "lit/decorators.js";
+import { classMap as P } from "lit/directives/class-map.js";
+import { ifDefined as $ } from "lit/directives/if-defined.js";
+import { styles as L } from "./button.styles.js";
+var C = Object.defineProperty, F = Object.getOwnPropertyDescriptor, s = (i, e, t, a) => {
+  for (var n = a > 1 ? void 0 : a ? F(e, t) : e, c = i.length - 1, y; c >= 0; c--)
+    (y = i[c]) && (n = (a ? y(e, t, n) : y(n)) || n);
+  return a && n && C(e, t, n), n;
 }, l;
-const c = class c extends O {
+const d = class d extends g {
   constructor() {
     super();
-    v(this, l);
+    _(this, l);
     this._transitionOptions = {
       duration: 200,
       fill: "forwards"
     }, this.destructive = !1, this.disabled = !1, this.iconOnly = !1, this.iconPosition = "left", this.loading = !1, this.noValidate = !1, this.size = "md", this.type = "button", this.variant = "primary", this._loaderVisible = !1, this._handleClick = (t) => {
       t.preventDefault(), t.stopPropagation(), !(this.disabled || this.loading) && (this.dispatchEvent(new CustomEvent("click", { bubbles: !0, composed: !0, detail: t })), this.type === "submit" && this._submitForm(), this.type === "reset" && this._resetForm());
     }, this._submitForm = () => {
-      var h, d, f;
-      const t = !((h = p(this, l).form) != null && h.reportValidity()), a = !this.noValidate, n = !((d = p(this, l).form) != null && d.hasAttribute("no-validate"));
-      (a || n) && t || (f = p(this, l).form) == null || f.requestSubmit();
+      const t = !h(this, l).form?.reportValidity(), a = !this.noValidate, n = !h(this, l).form?.hasAttribute("no-validate");
+      (a || n) && t || h(this, l).form?.requestSubmit();
     }, this._resetForm = () => {
-      var t;
-      (t = p(this, l).form) == null || t.reset();
-    }, this._renderIcon = () => y`<skf-icon data-color="custom" name=${g(this.icon)}></skf-icon>`, $(this, l, this.attachInternals());
+      h(this, l).form?.reset();
+    }, this._renderIcon = () => p`<skf-icon data-color="custom" name=${$(this.icon)}></skf-icon>`, v(this, l, this.attachInternals());
   }
   firstUpdated(t) {
     if (t.has("loading") && this.loading) {
@@ -47,25 +45,23 @@ const c = class c extends O {
   }
   /** Simulates a click on the button. */
   click() {
-    var t;
-    (t = this.$button) == null || t.click();
+    this.$button?.click();
   }
   /** @internal */
   async _showLoader() {
-    var t;
-    this._loaderVisible = !0, await ((t = this.$body) == null ? void 0 : t.animate({ opacity: 0 }, this._transitionOptions).finished), !(!this.$body || !this.$loader) && this.$loader.animate({ opacity: 1 }, this._transitionOptions);
+    this._loaderVisible = !0, await this.$body?.animate({ opacity: 0 }, this._transitionOptions).finished, !(!this.$body || !this.$loader) && this.$loader.animate({ opacity: 1 }, this._transitionOptions);
   }
   /** @internal */
   async _hideLoader() {
     !this.$body || !this.$loader || (await this.$loader.animate({ opacity: 0 }, this._transitionOptions).finished, this._loaderVisible = !1, this.$body.animate({ opacity: 1 }, this._transitionOptions));
   }
   render() {
-    return y`
+    return p`
 			<button
 				?disabled=${this.disabled || this.loading}
 				@click=${this._handleClick}
 				aria-busy=${this.loading}
-				class=${L({
+				class=${P({
       btn: !0,
       "btn--destructive": this.destructive,
       "btn--icon-only": this.iconOnly,
@@ -76,22 +72,22 @@ const c = class c extends O {
       "btn--variant-secondary": this.variant === "secondary",
       "btn--variant-tertiary": this.variant === "tertiary"
     })}
-				type=${g(this.type)}
+				type=${$(this.type)}
 				title=${/* An empty title prevents browser validation tooltips from appearing on hover */
     this.title}
 			>
-				${this.variant === "primary" && this._loaderVisible ? y`<skf-loader class="btn__loader" invert size="sm"></skf-loader>` : ""}
+				${this.variant === "primary" && this._loaderVisible ? p`<skf-loader class="btn__loader" invert size="sm"></skf-loader>` : ""}
 				<div class="btn__body" id="body">
 					${this.icon && this.iconPosition === "left" ? this._renderIcon() : b}
-					${this.iconOnly ? b : y`<slot class="btn__label"></slot>`}
+					${this.iconOnly ? b : p`<slot class="btn__label"></slot>`}
 					${this.icon && this.iconPosition === "right" ? this._renderIcon() : b}
 				</div>
 			</button>
 		`;
   }
 };
-l = new WeakMap(), c.styles = [w, C], c.formAssociated = !0, c.shadowRootOptions = { ...z.shadowRootOptions, delegatesFocus: !0 };
-let o = c;
+l = new WeakMap(), d.styles = [V, L], d.formAssociated = !0, d.shadowRootOptions = { ...w.shadowRootOptions, delegatesFocus: !0 };
+let o = d;
 s([
   r({ type: Boolean })
 ], o.prototype, "destructive", 2);
@@ -123,7 +119,7 @@ s([
   r({ reflect: !0 })
 ], o.prototype, "variant", 2);
 s([
-  P()
+  z()
 ], o.prototype, "_loaderVisible", 2);
 s([
   m("skf-loader")
@@ -135,7 +131,7 @@ s([
   m("button")
 ], o.prototype, "$button", 2);
 s([
-  V("loading", { afterUpdate: !0 })
+  O("loading", { afterUpdate: !0 })
 ], o.prototype, "_handleLoadingChange", 1);
 export {
   o as SkfButton

package/dist/components/button/button.styles.js

@@ -86,9 +86,9 @@ const r = o`
 			--_skf-button-bg-color: var(--skf-interactive-bg-color-secondary);
 			--_skf-button-bg-color-active: var(--skf-interactive-bg-color-secondary-active);
 			--_skf-button-bg-color-hover: var(--skf-interactive-bg-color-secondary-hover);
-			--_skf-button-border-color: var(--skf-border-color-emphasised);
+			--_skf-button-border-color: var(--skf-border-color-emphasized);
 			--_skf-button-border-color-disabled: var(--skf-interactive-border-color-disabled);
-			--_skf-button-color: var(--skf-text-color-emphasised);
+			--_skf-button-color: var(--skf-text-color-emphasized);
 			--_skf-button-color-disabled: var(--skf-interactive-text-color-disabled);
 		}
 
@@ -97,7 +97,7 @@ const r = o`
 			--_skf-button-bg-color-active: var(--skf-interactive-bg-color-secondary-active);
 			--_skf-button-bg-color-hover: var(--skf-interactive-bg-color-secondary-hover);
 			--_skf-button-border-color: transparent;
-			--_skf-button-color: var(--skf-text-color-emphasised);
+			--_skf-button-color: var(--skf-text-color-emphasized);
 			--_skf-button-color-disabled: var(--skf-interactive-text-color-disabled);
 		}
 

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

@@ -2,6 +2,7 @@ import '../icon/icon.js';
 import { FormBase } from '../../internal/components/formBase.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';
 /**
  * The `<skf-checkbox>` component is used to create a checkbox input
@@ -18,6 +19,7 @@ import { type CSSResultGroup } from 'lit';
  * @tagname skf-checkbox
  */
 export declare class SkfCheckbox extends FormBase implements FormFieldBaseProps {
+    #private;
     static styles: CSSResultGroup;
     /**
      * @internal
@@ -27,18 +29,17 @@ export declare class SkfCheckbox extends FormBase implements FormFieldBaseProps
     /** If defined, outputs helping hints in console */
     debug: boolean;
     /** If true, outputs helping hints in console */
-    get checked(): boolean;
-    set checked(value: boolean);
+    checked: boolean;
     /** If true, forces component to invalid state until removed */
     customInvalid: boolean;
     /** If true and the checkbox is unchecked, the checkbox will appear indeterminate */
     indeterminate: boolean;
     /** 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, adds name to the input-element */
     name?: string;
-    /** If defined, renders an alternative A11y text for the asterisk */
-    requiredLabel?: string;
     /** If defined, styles checkbox using provided severity */
     severity?: FormFieldSeverity;
     /** If true, displays valid state after interaction */
@@ -53,7 +54,7 @@ export declare class SkfCheckbox extends FormBase implements FormFieldBaseProps
     /** @internal */
     private $input?;
     /** @internal */
-    handleCheckedChange(): void;
+    _handleCheckedChange(): void;
     /** @internal */
     handleInvalidChange(): void;
     /** @internal */

package/dist/components/checkbox/checkbox.component.js

@@ -1,34 +1,35 @@
-import "../icon/icon.js";
-import { FormBase as p } from "../../internal/components/formBase.js";
-import { watch as h } from "../../internal/helpers/watch.js";
-import { Asterisk as v } from "../../internal/templates/asterisk.js";
-import { componentStyles as m } from "../../styles/component.styles.js";
-import { html as c, nothing as f } from "lit";
-import { property as r, state as y, query as g } from "lit/decorators.js";
-import { ifDefined as _ } from "lit/directives/if-defined.js";
-import { styles as b } from "./checkbox.styles.js";
-var k = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, i = (u, t, s, a) => {
-  for (var l = a > 1 ? void 0 : a ? $(t, s) : t, n = u.length - 1, o; n >= 0; n--)
-    (o = u[n]) && (l = (a ? o(t, s, l) : o(l)) || l);
-  return a && l && k(t, s, l), l;
+var c = (i) => {
+  throw TypeError(i);
 };
-const d = class d extends p {
+var v = (i, s, t) => s.has(i) || c("Cannot " + t);
+var m = (i, s, t) => (v(i, s, "read from private field"), t ? t.call(i) : s.get(i)), f = (i, s, t) => s.has(i) ? c("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(i) : s.set(i, t), y = (i, s, t, l) => (v(i, s, "write to private field"), l ? l.call(i, t) : s.set(i, t), t);
+import "../icon/icon.js";
+import { FormBase as _ } from "../../internal/components/formBase.js";
+import { watch as n } from "../../internal/helpers/watch.js";
+import { Asterisk as b } from "../../internal/templates/asterisk.js";
+import { componentStyles as k } from "../../styles/component.styles.js";
+import { LocalizeController as $ } from "../../utilities/localize.js";
+import { html as g, nothing as I } from "lit";
+import { property as r, state as V, query as C } from "lit/decorators.js";
+import { ifDefined as E } from "lit/directives/if-defined.js";
+import { styles as w } from "./checkbox.styles.js";
+var A = Object.defineProperty, D = Object.getOwnPropertyDescriptor, a = (i, s, t, l) => {
+  for (var h = l > 1 ? void 0 : l ? D(s, t) : s, d = i.length - 1, u; d >= 0; d--)
+    (u = i[d]) && (h = (l ? u(s, t, h) : u(h)) || h);
+  return l && h && A(s, t, h), h;
+}, o;
+const p = class p extends _ {
   constructor() {
-    super(...arguments), this._initiallyChecked = !1, this.debug = !1, this.customInvalid = !1, this.indeterminate = !1, this.showValid = !1, this.size = "md", this.value = "", this._invalid = !1, this._resetValue = (t) => {
+    super(...arguments);
+    f(this, o);
+    this._initiallyChecked = !1, y(this, o, new $(this)), this.debug = !1, this.checked = !1, this.customInvalid = !1, this.indeterminate = !1, this.lang = "en", this.showValid = !1, this.size = "md", this.value = "", this._invalid = !1, this._resetValue = (t) => {
       t.stopPropagation(), this.checked = this._initiallyChecked, this.$input && (this.$input.checked = !!this._initiallyChecked), this.setFormValue(this.checked ? this.value : null);
-    }, this._renderIcon = (t) => c`
+    }, this._renderIcon = (t) => g`
 		<skf-icon color="inverse" name=${t} size=${this.size === "sm" ? "sm" : "md"}></skf-icon>
 	`;
   }
-  get checked() {
-    var t;
-    return ((t = this.$input) == null ? void 0 : t.checked) ?? !1;
-  }
-  set checked(t) {
-    this.setAttribute("checked", String(!!t)), this.$input && (this.$input.checked = !!t);
-  }
-  handleCheckedChange() {
-    this.setFormValue(this.checked ? this.value : null), this._validateInput();
+  _handleCheckedChange() {
+    this.setFormValue(this.checked ? this.value : null), this._validateInput(), this.$input && (this.$input.checked = !!this.checked);
   }
   handleInvalidChange() {
     this._invalid ? (this.setAttribute("invalid", ""), this.showValid && this.removeAttribute("valid"), this.checkValidity()) : (this.removeAttribute("invalid"), !this.pristine && this.showValid && this.setAttribute("valid", "true"));
@@ -38,40 +39,37 @@ const d = class d extends p {
   }
   handleCustomInvalidChange() {
     if (this.customInvalid) {
-      const s = (
+      const l = (
         // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
         this.getAttribute("data-customerror") || "Set a custom error message using the data-customerror attribute"
       );
-      this.pristine = !1, this._invalid = !0, this.setValidity({ customError: !0 }, s), this.checkValidity();
+      this.pristine = !1, this._invalid = !0, this.setValidity({ customError: !0 }, l), this.checkValidity();
     } else
       this.setValidity({}), this._validateInput();
   }
   firstUpdated() {
-    var t;
-    (t = this.$input) == null || t.addEventListener("change", (s) => {
-      var a;
-      s.stopPropagation(), this.pristine = !1, this.checked = ((a = this.$input) == null ? void 0 : a.checked) ?? !1, this._validateInput(), this.checked ? (this.indeterminate = !1, this.setFormValue(this.value)) : this.setFormValue(null), this.emitEvent("change");
-    }), this.addEventListener("invalid", (s) => {
-      this.pristine = !1, this._invalid = !0, this.customErrorDisplay && s.preventDefault();
+    this.$input?.addEventListener("change", (t) => {
+      t.stopPropagation(), this.pristine = !1, this.checked = this.$input?.checked ?? !1, this._validateInput(), this.checked ? (this.indeterminate = !1, this.setFormValue(this.value)) : this.setFormValue(null), this.emitEvent("change");
+    }), this.addEventListener("invalid", (t) => {
+      this.pristine = !1, this._invalid = !0, this.customErrorDisplay && t.preventDefault();
     }), this._initiallyChecked = this.checked, this.addEventListener("reset", this._resetValue), this._validateInput();
   }
   /** @internal */
   _validateInput() {
-    var t;
     if (this._invalid = !1, this.customInvalid)
       this.setValidity({ customError: !0 }, "Custom error"), this._invalid = !0;
     else if (this.required && !this.checked) {
       this.pristine || (this._invalid = !0);
-      const s = this.hasAttribute("data-valuemissing") ? this.getAttribute("data-valuemissing") : (
+      const t = this.hasAttribute("data-valuemissing") ? this.getAttribute("data-valuemissing") : (
         // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-        ((t = this.$input) == null ? void 0 : t.validationMessage) || "Please check this box if you want to proceed"
+        this.$input?.validationMessage || "Please check this box if you want to proceed"
       );
-      this.setValidity({ valueMissing: !0 }, String(s));
+      this.setValidity({ valueMissing: !0 }, String(t));
     } else
       this.setValidity({});
   }
   render() {
-    return c`
+    return g`
 			<label id="root">
 				<input
 					?checked=${this.checked}
@@ -79,71 +77,71 @@ const d = class d extends p {
 					?required=${this.required}
 					.indeterminate=${this.indeterminate}
 					aria-invalid=${!!this._invalid}
-					name=${_(this.name)}
+					name=${E(this.name)}
 					type="checkbox"
 					value=${this.value}
 				/>
 				${this._renderIcon("check")} ${this._renderIcon("removeMinus")}
 				<div id="label">
 					<slot>${this.label}</slot>
-					${this.required ? v(this.requiredLabel) : f}
+					${this.required ? b(m(this, o).term("required")) : I}
 				</div>
 			</label>
 		`;
   }
 };
-d.styles = [m, b];
-let e = d;
-i([
+o = new WeakMap(), p.styles = [k, w];
+let e = p;
+a([
   r({ type: Boolean })
 ], e.prototype, "debug", 2);
-i([
+a([
   r({ type: Boolean, reflect: !0 })
-], e.prototype, "checked", 1);
-i([
+], e.prototype, "checked", 2);
+a([
   r({ type: Boolean, attribute: "custom-invalid", reflect: !0 })
 ], e.prototype, "customInvalid", 2);
-i([
+a([
   r({ type: Boolean, reflect: !0 })
 ], e.prototype, "indeterminate", 2);
-i([
+a([
   r()
 ], e.prototype, "label", 2);
-i([
+a([
+  r({ type: String })
+], e.prototype, "lang", 2);
+a([
   r()
 ], e.prototype, "name", 2);
-i([
-  r({ attribute: "required-label" })
-], e.prototype, "requiredLabel", 2);
-i([
+a([
   r({ reflect: !0 })
 ], e.prototype, "severity", 2);
-i([
+a([
   r({ type: Boolean, attribute: "show-valid" })
 ], e.prototype, "showValid", 2);
-i([
+a([
   r({ reflect: !0 })
 ], e.prototype, "size", 2);
-i([
+a([
   r()
 ], e.prototype, "value", 2);
-i([
-  y()
+a([
+  V()
 ], e.prototype, "_invalid", 2);
-i([
-  g("input")
+a([
+  C("input")
 ], e.prototype, "$input", 2);
-i([
-  h("checked", { afterUpdate: !0 })
-], e.prototype, "handleCheckedChange", 1);
-i([
-  h("_invalid")
+a([
+  n("checked")
+], e.prototype, "_handleCheckedChange", 1);
+a([
+  n("_invalid")
 ], e.prototype, "handleInvalidChange", 1);
-i([
-  h("_invalid", { afterUpdate: !0 })
+a([
+  n("_invalid", { afterUpdate: !0 })
 ], e.prototype, "handleDebugInvalid", 1);
-i([
-  h("customInvalid")
+a([
+  n("customInvalid")
 ], e.prototype, "handleCustomInvalidChange", 1);
 export {
   e as SkfCheckbox

package/dist/components/checkbox/checkbox.styles.js

@@ -43,7 +43,7 @@ const i = [
 				}
 
 				&:is(:checked:not(:disabled), :indeterminate:not(:disabled)) {
-					--_skf-checkbox-bg-color: var(--skf-bg-color-emphasised);
+					--_skf-checkbox-bg-color: var(--skf-bg-color-emphasized);
 					--_skf-checkbox-border-color: transparent;
 				}
 

package/dist/components/datepicker/datepicker-calendar.component.d.ts

@@ -10,6 +10,7 @@ interface DateParts {
  * @tagname skf-datepicker-calendar
  */
 export declare class SkfDatepickerCalendar extends SkfElement {
+    #private;
     static styles: CSSResultGroup;
     /** @internal */
     _secondCalendarOffset: number;