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

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/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
@@ -35,10 +37,10 @@ export declare class SkfCheckbox extends FormBase implements FormFieldBaseProps
     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 */

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

@@ -1,22 +1,30 @@
-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 p = (i) => {
+  throw TypeError(i);
 };
-const d = class d extends p {
+var v = (i, s, t) => s.has(i) || p("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) ? p("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(i) : s.set(i, t), y = (i, s, t, a) => (v(i, s, "write to private field"), a ? a.call(i, t) : s.set(i, t), t);
+import "../icon/icon.js";
+import { FormBase as _ } from "../../internal/components/formBase.js";
+import { watch as o } 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 l, 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, r = (i, s, t, a) => {
+  for (var h = a > 1 ? void 0 : a ? D(s, t) : s, d = i.length - 1, u; d >= 0; d--)
+    (u = i[d]) && (h = (a ? u(s, t, h) : u(h)) || h);
+  return a && h && A(s, t, h), h;
+}, n;
+const c = class c 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, n);
+    this._initiallyChecked = !1, y(this, n, new $(this)), this.debug = !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>
 	`;
   }
@@ -38,21 +46,21 @@ const d = class d extends p {
   }
   handleCustomInvalidChange() {
     if (this.customInvalid) {
-      const s = (
+      const a = (
         // 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 }, a), 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();
+    (t = this.$input) == null || t.addEventListener("change", (a) => {
+      var h;
+      a.stopPropagation(), this.pristine = !1, this.checked = ((h = this.$input) == null ? void 0 : h.checked) ?? !1, this._validateInput(), this.checked ? (this.indeterminate = !1, this.setFormValue(this.value)) : this.setFormValue(null), this.emitEvent("change");
+    }), this.addEventListener("invalid", (a) => {
+      this.pristine = !1, this._invalid = !0, this.customErrorDisplay && a.preventDefault();
     }), this._initiallyChecked = this.checked, this.addEventListener("reset", this._resetValue), this._validateInput();
   }
   /** @internal */
@@ -62,16 +70,16 @@ const d = class d extends p {
       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 a = 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.setValidity({ valueMissing: !0 }, String(s));
+      this.setValidity({ valueMissing: !0 }, String(a));
     } else
       this.setValidity({});
   }
   render() {
-    return c`
+    return g`
 			<label id="root">
 				<input
 					?checked=${this.checked}
@@ -79,71 +87,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, n).term("required")) : I}
 				</div>
 			</label>
 		`;
   }
 };
-d.styles = [m, b];
-let e = d;
-i([
-  r({ type: Boolean })
+n = new WeakMap(), c.styles = [k, w];
+let e = c;
+r([
+  l({ type: Boolean })
 ], e.prototype, "debug", 2);
-i([
-  r({ type: Boolean, reflect: !0 })
+r([
+  l({ type: Boolean, reflect: !0 })
 ], e.prototype, "checked", 1);
-i([
-  r({ type: Boolean, attribute: "custom-invalid", reflect: !0 })
+r([
+  l({ type: Boolean, attribute: "custom-invalid", reflect: !0 })
 ], e.prototype, "customInvalid", 2);
-i([
-  r({ type: Boolean, reflect: !0 })
+r([
+  l({ type: Boolean, reflect: !0 })
 ], e.prototype, "indeterminate", 2);
-i([
-  r()
+r([
+  l()
 ], e.prototype, "label", 2);
-i([
-  r()
+r([
+  l({ type: String })
+], e.prototype, "lang", 2);
+r([
+  l()
 ], e.prototype, "name", 2);
-i([
-  r({ attribute: "required-label" })
-], e.prototype, "requiredLabel", 2);
-i([
-  r({ reflect: !0 })
+r([
+  l({ reflect: !0 })
 ], e.prototype, "severity", 2);
-i([
-  r({ type: Boolean, attribute: "show-valid" })
+r([
+  l({ type: Boolean, attribute: "show-valid" })
 ], e.prototype, "showValid", 2);
-i([
-  r({ reflect: !0 })
+r([
+  l({ reflect: !0 })
 ], e.prototype, "size", 2);
-i([
-  r()
+r([
+  l()
 ], e.prototype, "value", 2);
-i([
-  y()
+r([
+  V()
 ], e.prototype, "_invalid", 2);
-i([
-  g("input")
+r([
+  C("input")
 ], e.prototype, "$input", 2);
-i([
-  h("checked", { afterUpdate: !0 })
+r([
+  o("checked", { afterUpdate: !0 })
 ], e.prototype, "handleCheckedChange", 1);
-i([
-  h("_invalid")
+r([
+  o("_invalid")
 ], e.prototype, "handleInvalidChange", 1);
-i([
-  h("_invalid", { afterUpdate: !0 })
+r([
+  o("_invalid", { afterUpdate: !0 })
 ], e.prototype, "handleDebugInvalid", 1);
-i([
-  h("customInvalid")
+r([
+  o("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

@@ -1,5 +1,6 @@
 import { SkfElement } from '../../internal/components/skf-element.js';
 import { Temporal } from '@js-temporal/polyfill';
+import { type Language } from '../../utilities/localize.js';
 import { type CSSResultGroup } from 'lit';
 interface DateParts {
     year?: number;
@@ -10,6 +11,7 @@ interface DateParts {
  * @tagname skf-datepicker-calendar
  */
 export declare class SkfDatepickerCalendar extends SkfElement {
+    #private;
     static styles: CSSResultGroup;
     /** @internal */
     _secondCalendarOffset: number;
@@ -21,6 +23,8 @@ export declare class SkfDatepickerCalendar extends SkfElement {
      * A comma-separated list of dates (yyyy-mm-dd format) that are not selectable.
      */
     invalidDates?: string;
+    /** Sets the internal language of the component */
+    lang: Language;
     locale: string;
     range: boolean;
     /**