@skf-design-system/ui-components 1.0.2-beta.0 → 1.0.2-beta.1

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

@@ -1,10 +1,10 @@
 import { FormBase } from '../../internal/components/formBase.js';
 import { PopoverController } from '../../internal/controllers/popover.controller.js';
-import type { FormFieldBaseProps } from '../../internal/types/formField.js';
+import type { FormFieldSeverity } from '../../internal/types.js';
 import { type CSSResultGroup } from 'lit';
 import '../../internal/components/hint/hint';
-import type { SelectOptionEvent, SkfSelectOption } from '../select-option/select-option.component.js';
 import '../tag/tag';
+import type { SelectOptionEvent, SkfSelectOption } from './select-option.component.js';
 import { DeveloperFeedbackController, GlobalClickController, KeyboardNavigationController } from './select.controllers.js';
 /**
  * TODO: abstract the popover logic to a separate component/helper/partial, and use it in both select and in input[datalist], combobox etc
@@ -14,17 +14,18 @@ import { DeveloperFeedbackController, GlobalClickController, KeyboardNavigationC
 /**
  * The `<skf-select>` is a component that displays a list of actions or options. A click in the options list toggle the selected state of the option. Use it together with the ´skf-select-option` tag.
  *
- * @documentation See [InVision DSM](https://skf.invisionapp.com/dsm/ab-skf/4-web-applications/nav/5fa7caf78c01200018354495/asset/6229d63d9fe16020a60657e5) for design principles
+ * See [zeroheight](https://zeroheight.com/853e936c9/p/91c9f0-select-and-combobox) for design principles
  *
- * @attribute {boolean} [disabled] - If true, the select is disabled	`default: false`
+ * @attribute {boolean} [disabled=false] - If true, the select is disabled
+ * @attribute {boolean} [required=false] - If true, the select is required
  *
  * @slot - The select's placeholder content
  *
- * @event change - Fired when the selected option(s) changes
- * @event invalid - Fired when the select is invalid
- * @event reset - Fired when the form is reset
- * @event skf-select:dropdown - {detail: {expanded: boolean}} Fired when the select dropdown is toggled
- * @event skf-select-option:select - {detail: {value: string | null, option: SkfSelectOption}} Fired when the select dropdown is toggled
+ * @event {Event} change - Fired when the selected option(s) changes
+ * @event {Event} invalid - Fired when the select is invalid
+ * @event {Event} reset - Fired when the form is reset
+ * @event {CustomEvent} skf-select-dropdown - {detail: {expanded: boolean}} Fired when the select dropdown is toggled
+ * @event {CustomEvent} skf-select-option-select - {detail: {value: string | null, option: SkfSelectOption}} Fired when the select dropdown is toggled
  *
  * @tagname skf-select
  */
@@ -39,9 +40,9 @@ export declare class SkfSelect extends FormBase {
     /** If defined, forces component to invalid state until removed */
     customInvalid?: string;
     /** If true, hides the label visually */
-    hideLabel?: boolean;
+    hideLabel: boolean;
     /** If true and mulltiple is true, no tags are displayed under the select */
-    hideTags?: boolean;
+    hideTags: boolean;
     /** If defined, sets the hint text under the select component in the form */
     hint?: string;
     /** A readonly property that returns the selected value(s) in a array */
@@ -57,22 +58,22 @@ export declare class SkfSelect extends FormBase {
     /** If defined, sets the minimum number of required options */
     min?: number;
     /** If true, allows for multiple options to be selected */
-    multiple?: boolean;
+    multiple: boolean;
     /** If defined, set name of the component */
     name?: string;
     /** If defined, renders an alternative A11y text for the asterisk */
     requiredLabel?: string;
     /** If defined, displays provided severity state */
-    severity?: FormFieldBaseProps['severity'];
+    severity?: FormFieldSeverity;
     /** If true, displays valid state after interaction */
-    showValid?: boolean;
+    showValid: boolean;
     /** Size of the Select */
     size: 'sm' | 'md';
     /** Read only, returns the selected value. (if multiple: in a comma separated string) */
     set value(newValue: string);
     get value(): string;
-    /** Stores the selected SkfSelectOption tag(s) in a array. Is the source of truth for the internal state. */
     /** @internal */
+    /** Stores the selected SkfSelectOption tag(s) in a array. Is the source of truth for the internal state. */
     private _selectedOptions;
     /** @internal */
     /** The selected options in an array. Treat it as a read only property. See selectedValues, slectedSlots for computed value arrays. */

package/dist/components/select/select.component.js

@@ -6,23 +6,23 @@ import { hintSeverity as x } from "../../internal/helpers/hintSeverity.js";
 import { raiseError as w } from "../../internal/helpers/raiseError.js";
 import { watch as $ } from "../../internal/helpers/watch.js";
 import { Asterisk as V } from "../../internal/templates/asterisk.js";
-import S from "../../styles/component.styles.js";
+import { componentStyles as S } from "../../styles/component.styles.js";
 import { nothing as C, html as n } from "lit";
 import { property as o, state as h, query as p } from "lit/decorators.js";
 import { classMap as E } from "lit/directives/class-map.js";
 import { ifDefined as m } from "lit/directives/if-defined.js";
 import "../../internal/components/hint/hint.js";
 import "../tag/tag.js";
-import { GlobalClickController as k, KeyboardNavigationController as L, DeveloperFeedbackController as A } from "./select.controllers.js";
+import { GlobalClickController as L, KeyboardNavigationController as k, DeveloperFeedbackController as A } from "./select.controllers.js";
 import { styles as P } from "./select.styles.js";
 var T = Object.defineProperty, D = Object.getOwnPropertyDescriptor, s = (u, t, e, l) => {
-  for (var a = l > 1 ? void 0 : l ? D(t, e) : t, r = u.length - 1, d; r >= 0; r--)
-    (d = u[r]) && (a = (l ? d(t, e, a) : d(a)) || a);
-  return l && a && T(t, e, a), a;
+  for (var r = l > 1 ? void 0 : l ? D(t, e) : t, a = u.length - 1, d; a >= 0; a--)
+    (d = u[a]) && (r = (l ? d(t, e, r) : d(r)) || r);
+  return l && r && T(t, e, r), r;
 };
 const c = class c extends b {
   constructor() {
-    super(), this.selectDelay = 200, this._optionsList = [], this.buttonLabel = "Select an option", this.size = "md", this._expanded = !1, this._invalid = !1, this.globalClickController = new k(this), this.keyboardNavController = new L(this), this.developerFeedbackController = new A(this), this.popoverController = new y(this), this._handleOptionSelected = (t) => {
+    super(), this.selectDelay = 200, this._optionsList = [], this.buttonLabel = "Select an option", this.hideLabel = !1, this.hideTags = !1, this.multiple = !1, this.showValid = !1, this.size = "md", this._expanded = !1, this._invalid = !1, this.globalClickController = new L(this), this.keyboardNavController = new k(this), this.developerFeedbackController = new A(this), this.popoverController = new y(this), this._handleOptionSelected = (t) => {
       this._pristine = !1;
       const e = this._selectedOptions.length > 0;
       this.setFormValue(e ? this.selectedValues.join(",") : null), this._updateState(t);
@@ -121,18 +121,18 @@ const c = class c extends b {
   }
   firstUpdated() {
     var t;
-    this.addEventListener("skf-select-option:select", this._handleOptionSelected), (t = this._internals.form) == null || t.addEventListener("reset", this._handleReset), this.onUpdateComplete(), this._validateInput();
+    this.addEventListener("skf-select-option-select", this._handleOptionSelected), (t = this._internals.form) == null || t.addEventListener("reset", this._handleReset), this.onUpdateComplete(), this._validateInput();
   }
   handleExpandedChange() {
     this._expanded ? (this.$popover.togglePopover(this._expanded), this.popoverController.start()) : (this.$popover.togglePopover(this._expanded), this.popoverController.stop().catch((t) => {
       console.error(t);
-    })), this.emit("skf-select:dropdown", { detail: { expanded: this._expanded } });
+    })), this.emit("skf-select-dropdown", { detail: { expanded: this._expanded } });
   }
   attributeChangedCallback(t, e, l) {
     if (super.attributeChangedCallback(t, e, l), t === "custom-invalid")
       if (typeof l == "string") {
-        const r = this.withFallback(l);
-        this._pristine = !1, this._invalid = !0, this.setValidity({ customError: !0 }, r), this.checkValidity();
+        const a = this.withFallback(l);
+        this._pristine = !1, this._invalid = !0, this.setValidity({ customError: !0 }, a), this.checkValidity();
       } else
         this.setValidity({}), this._validateInput();
   }
@@ -173,14 +173,14 @@ const c = class c extends b {
       this._invalid = !0;
       return;
     } else if (t) {
-      const r = this.hasAttribute("data-valuemissing") ? this.getAttribute("data-valuemissing") : "Please select an option";
-      this.setValidity({ valueMissing: !0 }, String(r)), this._pristine || (this._invalid = !0);
+      const a = this.hasAttribute("data-valuemissing") ? this.getAttribute("data-valuemissing") : "Please select an option";
+      this.setValidity({ valueMissing: !0 }, String(a)), this._pristine || (this._invalid = !0);
     } else if (e) {
-      const r = this.hasAttribute("data-rangeunderflow") ? this.getAttribute("data-rangeunderflow") : `Please select minimum ${String(this.min)} options`;
-      this.setValidity({ rangeUnderflow: !0 }, String(r)), this._pristine || (this._invalid = !0);
+      const a = this.hasAttribute("data-rangeunderflow") ? this.getAttribute("data-rangeunderflow") : `Please select minimum ${String(this.min)} options`;
+      this.setValidity({ rangeUnderflow: !0 }, String(a)), this._pristine || (this._invalid = !0);
     } else if (l) {
-      const r = this.hasAttribute("data-rangeoverflow") ? this.getAttribute("data-rangeoverflow") : `Please select maximum ${String(this.max)} options`;
-      this.setValidity({ rangeOverflow: !0 }, String(r)), this._pristine || (this._invalid = !0);
+      const a = this.hasAttribute("data-rangeoverflow") ? this.getAttribute("data-rangeoverflow") : `Please select maximum ${String(this.max)} options`;
+      this.setValidity({ rangeOverflow: !0 }, String(a)), this._pristine || (this._invalid = !0);
     } else
       this.setValidity({}), !this._pristine && this.showValid && this.setAttribute("valid", "true");
   }
@@ -235,7 +235,7 @@ const c = class c extends b {
 						<skf-hint
 							aria-live=${this._invalid ? "assertive" : "polite"}
 							id="hint"
-							severity=${m(x(this.severity, this._invalid))}
+							severity=${m(x(this._invalid, this.severity))}
 						>
 							${this.customInvalid ?? this.hint}
 						</skf-hint>

package/dist/components/select/select.controllers.d.ts

@@ -1,5 +1,5 @@
-import type { SkfSelectOption } from '../select-option/select-option.component.js';
 import type { ReactiveController, ReactiveControllerHost } from 'lit';
+import type { SkfSelectOption } from './select-option.component.js';
 /**
  * Workaround for storybook helper not being able to import types
  * E.g type ControllerHost = SkfSelect;

package/dist/components/select/select.controllers.js

@@ -2,8 +2,8 @@ import { raiseError as a } from "../../internal/helpers/raiseError.js";
 class d {
   constructor(t) {
     this._globalClickHandler = (e) => {
-      var s;
-      !((s = this.host) != null && s.localName) || e.target.closest(this.host.localName) || (this.host._expanded = !1);
+      var i;
+      !((i = this.host) != null && i.localName) || e.target.closest(this.host.localName) || (this.host._expanded = !1);
     }, (this.host = t).addController(this);
   }
   // hostConnected() {
@@ -64,16 +64,16 @@ class p {
     });
   }
   _focusSiblingOption(t) {
-    const e = (l) => l === document.activeElement, i = this._selectableOptions.find((l) => e(l));
-    if (!i) {
+    const e = (l) => l === document.activeElement, s = this._selectableOptions.find((l) => e(l));
+    if (!s) {
       this._focusFirstOption();
       return;
     }
-    const s = this._selectableOptions.indexOf(i);
-    let o = s - 1, n = s + 1;
+    const i = this._selectableOptions.indexOf(s);
+    let o = i - 1, n = i + 1;
     o < 0 && (o = this._selectableOptions.length - 1), n >= this._selectableOptions.length && (n = 0);
     const h = this._selectableOptions[t === "next" ? n : o];
-    i.blur(), h.focus();
+    s.blur(), h.focus();
   }
   _selectFocusedOption(t) {
     t.selected = !0;
@@ -82,7 +82,7 @@ class p {
     return !this.host || !this.host._optionsList ? [] : this.host._optionsList.filter((t) => !t.disabled);
   }
 }
-class b {
+class u {
   constructor(t) {
     (this.host = t).addController(this);
   }
@@ -103,15 +103,18 @@ class b {
       ),
       reason: "attribute-mismatch",
       replaceStrings: [t, "min or max", "together with multiple"]
-    }), a({
-      assert: (this.host.hideTags && this.host.multiple) ?? !this.host.hideTags,
+    });
+    const e = this.host.hideTags && this.host.multiple, s = !this.host.hideTags;
+    a({
+      // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+      assert: e || s,
       reason: "attribute-mismatch",
       replaceStrings: [t, "hide-tags", "together with multiple"]
     });
   }
 }
 export {
-  b as DeveloperFeedbackController,
+  u as DeveloperFeedbackController,
   d as GlobalClickController,
   p as KeyboardNavigationController
 };

package/dist/components/select/select.stories.icons.d.ts

@@ -0,0 +1,7 @@
+export declare const icons: {
+    dummy1: import("lit").TemplateResult<1>;
+    dummy4: import("lit").TemplateResult<1>;
+    dummy5: import("lit").TemplateResult<1>;
+    dummy6: import("lit").TemplateResult<1>;
+    dummy7: import("lit").TemplateResult<1>;
+};

package/dist/components/{stepper-item → stepper}/stepper-item.component.js

@@ -6,17 +6,17 @@ var d = (e, i, t) => (u(e, i, "read from private field"), t ? t.call(e) : i.get(
 import "../icon/icon.js";
 import { SkfElement as b } from "../../internal/components/skf-element.js";
 import { watch as g } from "../../internal/helpers/watch.js";
-import C from "../../styles/component.styles.js";
+import { componentStyles as C } from "../../styles/component.styles.js";
 import "lit";
 import { property as y, state as c } from "lit/decorators.js";
 import { classMap as $ } from "lit/directives/class-map.js";
 import { ifDefined as x } from "lit/directives/if-defined.js";
-import { unsafeStatic as w, literal as U, html as S } from "lit/static-html.js";
-import { styles as I } from "./stepper-item.styles.js";
-var O = Object.defineProperty, P = Object.getOwnPropertyDescriptor, l = (e, i, t, s) => {
-  for (var p = s > 1 ? void 0 : s ? P(i, t) : i, h = e.length - 1, m; h >= 0; h--)
+import { literal as w, html as S } from "lit/static-html.js";
+import { styles as U } from "./stepper-item.styles.js";
+var I = Object.defineProperty, O = Object.getOwnPropertyDescriptor, l = (e, i, t, s) => {
+  for (var p = s > 1 ? void 0 : s ? O(i, t) : i, h = e.length - 1, m; h >= 0; h--)
     (m = e[h]) && (p = (s ? m(i, t, p) : m(p)) || p);
-  return s && p && O(i, t, p), p;
+  return s && p && I(i, t, p), p;
 }, o, n;
 const f = class f extends b {
   constructor() {
@@ -60,7 +60,7 @@ const f = class f extends b {
     }), r(this, n, !1);
   }
   render() {
-    const t = this._linear ? "div" : "button", s = U`${w(t)}`;
+    const t = this._linear ? "div" : "button", s = w`${t}`;
     return S`
 			<${s}
 				@click=${this._handleClick}
@@ -82,7 +82,7 @@ const f = class f extends b {
 		`;
   }
 };
-o = new WeakMap(), n = new WeakMap(), f.styles = [C, I];
+o = new WeakMap(), n = new WeakMap(), f.styles = [C, U];
 let a = f;
 l([
   y({ reflect: !0 })

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

@@ -1,6 +1,6 @@
-import type { SkfStepperItem } from '../stepper-item/stepper-item.component.js';
 import { SkfElement } from '../../internal/components/skf-element';
 import { type CSSResultGroup } from 'lit';
+import type { SkfStepperItem } from './stepper-item.component.js';
 /**
  * The `<skf-stepper>` is a component that displays a list of actions or options.
  *
@@ -8,7 +8,7 @@ import { type CSSResultGroup } from 'lit';
  *
  * @slot - One or more `<skf-stepper-item>`
  *
- * @event skf-stepper-item-select - Dispatched when the stepper item is selected
+ * @event {CustomEvent} skf-stepper-item-select - Dispatched when the stepper item is selected
  *
  * @tagname skf-stepper
  */

package/dist/components/stepper/stepper.component.js

@@ -2,30 +2,30 @@ var p = (t) => {
   throw TypeError(t);
 };
 var m = (t, i, e) => i.has(t) || p("Cannot " + e);
-var _ = (t, i, e) => (m(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), l = (t, i, e, s) => (m(t, i, "write to private field"), s ? s.call(t, e) : i.set(t, e), e);
+var _ = (t, i, e) => (m(t, i, "read from private field"), e ? e.call(t) : i.get(t)), v = (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), l = (t, i, e, s) => (m(t, i, "write to private field"), s ? s.call(t, e) : i.set(t, e), e);
 import { SkfElement as I } from "../../internal/components/skf-element.js";
-import { watch as v } from "../../internal/helpers/watch.js";
-import u from "../../styles/component.styles.js";
+import { watch as f } from "../../internal/helpers/watch.js";
+import { componentStyles as u } from "../../styles/component.styles.js";
 import { html as g } from "lit";
 import { property as x, queryAssignedElements as y } from "lit/decorators.js";
 import { classMap as A } from "lit/directives/class-map.js";
 import { stepperState as C } from "./stepper.helpers.js";
 import { styles as b } from "./stepper.styles.js";
 var E = Object.defineProperty, S = Object.getOwnPropertyDescriptor, h = (t, i, e, s) => {
-  for (var n = s > 1 ? void 0 : s ? S(i, e) : i, r = t.length - 1, d; r >= 0; r--)
-    (d = t[r]) && (n = (s ? d(i, e, n) : d(n)) || n);
+  for (var n = s > 1 ? void 0 : s ? S(i, e) : i, r = t.length - 1, o; r >= 0; r--)
+    (o = t[r]) && (n = (s ? o(i, e, n) : o(n)) || n);
   return s && n && E(i, e, n), n;
-}, o;
+}, d;
 const c = class c extends I {
   constructor() {
     super();
-    f(this, o);
-    l(this, o, !1), this.activeIndex = -1, this.linear = !1, this._handleSelected = (e) => {
-      if (!_(this, o)) return;
-      const { item: s, triggerActiveIndexUpdate: n } = e.detail, r = [...this._items ?? []].findIndex((d) => d === s);
+    v(this, d);
+    l(this, d, !1), this.activeIndex = -1, this.linear = !1, this._handleSelected = (e) => {
+      if (!_(this, d)) return;
+      const { item: s, triggerActiveIndexUpdate: n } = e.detail, r = [...this._items ?? []].findIndex((o) => o === s);
       r === this.activeIndex ? this._handleActiveIndexChanged() : (n && this._resetActive(r), this.activeIndex = r);
     }, this._handleSlotChanged = () => {
-      l(this, o, !0), this.activeIndex = this._getCurrentActiveIndex();
+      l(this, d, !0), this.activeIndex = this._getCurrentActiveIndex();
     }, this.addEventListener("skf-stepper-item-select", this._handleSelected);
   }
   firstUpdated() {
@@ -69,10 +69,10 @@ const c = class c extends I {
 		`;
   }
 };
-o = new WeakMap(), c.styles = [u, b];
+d = new WeakMap(), c.styles = [u, b];
 let a = c;
 h([
-  x({ type: Number })
+  x({ type: Number, attribute: "active-index" })
 ], a.prototype, "activeIndex", 2);
 h([
   x({ type: Boolean })
@@ -81,10 +81,10 @@ h([
   y()
 ], a.prototype, "_items", 2);
 h([
-  v("activeIndex")
+  f("activeIndex")
 ], a.prototype, "_handleActiveIndexChanged", 1);
 h([
-  v("linear")
+  f("linear")
 ], a.prototype, "_handleLinearMode", 1);
 export {
   a as SkfStepper

package/dist/components/stepper/stepper.helpers.d.ts

@@ -1,4 +1,4 @@
-import type { SkfStepperItem, SkfStepperItemState } from '../stepper-item/stepper-item.component.js';
+import type { SkfStepperItem, SkfStepperItemState } from './stepper-item.component.js';
 import type { SkfStepper } from './stepper.component.js';
 interface StepperStateProps extends Pick<SkfStepper, '_items' | 'linear'>, Pick<SkfStepperItem, 'state'> {
     items: SkfStepperItem[];

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

@@ -1,15 +1,15 @@
 import { FormBase as o } from "../../internal/components/formBase.js";
 import { Asterisk as u } from "../../internal/templates/asterisk.js";
-import p from "../../styles/component.styles.js";
-import { html as c } from "lit";
-import { property as s, state as v, query as f } from "lit/decorators.js";
-import { classMap as m } from "lit/directives/class-map.js";
-import { ifDefined as _ } from "lit/directives/if-defined.js";
-import { styles as b } from "./switch.styles.js";
-var y = Object.defineProperty, i = (d, e, a, g) => {
+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 && y(e, a, l), l;
+  return l && g(e, a, l), l;
 };
 const r = class r extends o {
   constructor() {
@@ -51,9 +51,9 @@ const r = class r extends o {
       this.setValidity({});
   }
   render() {
-    return c`
+    return v`
 			<label
-				class=${m({
+				class=${_({
       switch: !0,
       "switch--small": this.size === "sm"
     })}
@@ -67,11 +67,11 @@ const r = class r extends o {
 					@reset=${this._resetValue}
 					aria-invalid=${!!this._invalid}
 					class="switch__input"
-					name=${_(this.name)}
+					name=${b(this.name)}
 					type="checkbox"
 					value=${this.value}
 				/>
-				<div class="switch__label">
+				<div class="switch__label ${this.hideLabel ? "visually-hidden" : c}">
 					<slot>${this.label}</slot>
 					${this.required ? u(this.requiredLabel, "switch__asterisk") : null}
 				</div>
@@ -79,7 +79,7 @@ const r = class r extends o {
 		`;
   }
 };
-r.styles = [p, b];
+r.styles = [p, y];
 let t = r;
 i([
   s({ type: Boolean })
@@ -106,10 +106,10 @@ i([
   s()
 ], t.prototype, "value");
 i([
-  v()
+  f()
 ], t.prototype, "_invalid");
 i([
-  f("input")
+  m("input")
 ], t.prototype, "$input");
 export {
   t as SkfSwitch

package/dist/components/tab/tab.component.js

@@ -1,6 +1,6 @@
 import { SkfElement as n } from "../../internal/components/skf-element.js";
 import { watch as h } from "../../internal/helpers/watch.js";
-import m from "../../styles/component.styles.js";
+import { componentStyles as m } from "../../styles/component.styles.js";
 import { html as f } from "lit";
 import { property as v, state as d } from "lit/decorators.js";
 import { classMap as b } from "lit/directives/class-map.js";

package/dist/components/tab-group/tab-group.component.js

@@ -1,6 +1,6 @@
 import "../card/card.js";
 import { SkfElement as c } from "../../internal/components/skf-element.js";
-import b from "../../styles/component.styles.js";
+import { componentStyles as b } from "../../styles/component.styles.js";
 import { html as f } from "lit";
 import { property as o, queryAssignedElements as p } from "lit/decorators.js";
 import { classMap as u } from "lit/directives/class-map.js";

package/dist/components/tab-panel/tab-panel.component.js

@@ -1,6 +1,6 @@
 import { SkfElement as c } from "../../internal/components/skf-element.js";
 import { watch as h } from "../../internal/helpers/watch.js";
-import l from "../../styles/component.styles.js";
+import { componentStyles as l } from "../../styles/component.styles.js";
 import { html as v } from "lit";
 import { property as f, state as d } from "lit/decorators.js";
 import { styles as y } from "./tab-panel.styles.js";

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

@@ -1,6 +1,6 @@
 import '../icon/icon.js';
 import { SkfElement } from '../../internal/components/skf-element';
-import type { Icon, SeverityBgColor } from '@skf-design-system/ui-assets';
+import type { Icon, Severity } from '../../internal/types.js';
 import { type CSSResultGroup } from 'lit';
 /**
  * The `<skf-tag>` is a component that displays a list of actions or options
@@ -19,16 +19,10 @@ export declare class SkfTag extends SkfElement {
     protected _onRemove?: (event: Event) => void;
     /** Specifies Tag size */
     size: 'sm' | 'md';
-    /**
-     * If defined, displays leading/provided icon
-     * @type { "arrowDown" | "arrowDownUp" | "arrowLeft" | "arrowRight" | "arrowUp" | "article" | "artificialIntelligence" | "asset" | "attachment" | "bandCursor" | "bands" | "batteryEmpty" | "batteryFull" | "batteryLow" | "bearingFault" | "book" | "bulb" | "burger" | "cPM" | "calendar" | "calendarBooked" | "calendarEmpty" | "calendarNotBooked" | "calendarRecurring" | "caretDown" | "caretUp" | "caretUpDown" | "chat" | "check" | "checkCircle" | "checkSmall" | "chevronDown" | "chevronLeft" | "chevronRight" | "chevronUp" | "chevronUpDown" | "close" | "closeAllFaults" | "closeFault" | "closeSmall" | "columnGraph" | "comment" | "connection1" | "connection2" | "connection3" | "connection4" | "danger" | "defectFrequencies" | "defectFrequenciesAlternative" | "doubleChevronLeft" | "doubleChevronRight" | "download" | "draft" | "draftFilled" | "draftOutlined" | "dragNDrop" | "drop" | "duplicate" | "edit" | "emailFilled" | "emailOutlined" | "exclamation" | "eye" | "eyeHidden" | "eyeVisible" | "filter" | "forbidden" | "fullScreen" | "fullScreenExit" | "functionalLocation" | "harmonicCursor" | "heatmap" | "hierarchy" | "history" | "historyAlt" | "hourglassFramedFilled" | "hourglassFramedOutlined" | "hourglassOutlined" | "hz" | "iMX" | "image" | "infoCircleFilled" | "infoCircleOutlined" | "integration" | "kebab" | "link" | "listGroup" | "listItem" | "locationPin" | "lock" | "logOut" | "meatballs" | "microphone" | "minus" | "minusSmall" | "noData" | "o" | "openInNew" | "overlayBaseline" | "pDF" | "paper" | "pause" | "pieChart" | "pin" | "play" | "plus" | "powerOff" | "printer" | "proCollect" | "recAction" | "received" | "refresh" | "reorder" | "replace" | "reply" | "rewalkableRoute" | "routes" | "search" | "send" | "sensorA" | "sensorB" | "settings" | "sidebandCursor" | "singleCursor" | "spectrum" | "starFilled" | "starOutlined" | "statusCircle" | "stop" | "structuralVibration" | "sync" | "timewave" | "trash" | "trend" | "trendingUp" | "undo" | "unknownCircle" | "unknownDiamond" | "unlink" | "unlock" | "unscheduledAction" | "upload" | "user" | "viewFull" | "viewHorizontal" | "viewVertical" | "warning" | "warningCircle" | "warningDiamond" | "zoomIn" | "zoomOut" }
-     */
+    /** If defined, displays leading/provided icon */
     icon?: Icon;
-    /**
-     * If defined, gives the supplied appearance
-     * @type {  "warning" | "success" | "info" | "error" | "alert" }
-     */
-    color?: SeverityBgColor;
+    /** If defined, gives the supplied appearance */
+    color?: Severity;
     /** If defined, accepts a function that runs on click */
     set onClick(onClickFn: ((event: Event) => void) | undefined);
     get onClick(): ((event: Event) => void) | undefined;
@@ -42,9 +36,11 @@ export declare class SkfTag extends SkfElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
-    protected _handleKeyDown: (e: KeyboardEvent) => void;
-    /** run externally provided callback (if any) first. Let click propagate to handleClick. */
-    protected _handleRemove: (e: Event) => void;
-    protected _handleClick: (e: Event) => void;
+    /** @internal */
+    private _handleKeyDown;
+    /** @internal run externally provided callback (if any) first. Let click propagate to handleClick. */
+    private _handleRemove;
+    /** @internal */
+    private _handleClick;
     render(): import("lit").TemplateResult<1>;
 }

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

@@ -1,37 +1,35 @@
 import "../icon/icon.js";
 import { SkfElement as u } from "../../internal/components/skf-element.js";
-import f from "../../styles/component.styles.js";
+import { componentStyles as f } from "../../styles/component.styles.js";
 import { nothing as p, html as a } from "lit";
-import { property as l, query as v } from "lit/decorators.js";
+import { property as n, query as v } from "lit/decorators.js";
 import { classMap as d } from "lit/directives/class-map.js";
 import { ifDefined as _ } from "lit/directives/if-defined.js";
 import { styles as k } from "./tag.styles.js";
-var b = Object.defineProperty, y = Object.getOwnPropertyDescriptor, i = (m, t, s, r) => {
-  for (var e = r > 1 ? void 0 : r ? y(t, s) : t, n = m.length - 1, c; n >= 0; n--)
-    (c = m[n]) && (e = (r ? c(t, s, e) : c(e)) || e);
-  return r && e && b(t, s, e), e;
+var b = Object.defineProperty, y = Object.getOwnPropertyDescriptor, r = (m, e, i, s) => {
+  for (var t = s > 1 ? void 0 : s ? y(e, i) : e, l = m.length - 1, c; l >= 0; l--)
+    (c = m[l]) && (t = (s ? c(e, i, t) : c(t)) || t);
+  return s && t && b(e, i, t), t;
 };
 const h = class h extends u {
   constructor() {
-    super(...arguments), this.size = "md", 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 e;
-      t.stopPropagation();
-      const s = t.composedPath()[0];
-      console.log("$clickTarget", s), s.localName === "button" ? this.remove() : (e = this.onClick) == null || e.call(this, t);
+    super(...arguments), this.size = "md", this.removable = !1, this._handleKeyDown = (e) => {
+      (e.key === "Enter" || e.key === " ") && this.$removeButton.click();
+    }, this._handleRemove = (e) => {
+      this._onRemove && this._onRemove(e);
+    }, this._handleClick = (e) => {
+      var t;
+      e.stopPropagation(), e.composedPath()[0].localName === "button" ? this.remove() : (t = this.onClick) == null || t.call(this, e);
     };
   }
-  set onClick(t) {
-    t && (this._onClick = t);
+  set onClick(e) {
+    e && (this._onClick = e);
   }
   get onClick() {
     return this._onClick;
   }
-  set onRemove(t) {
-    t && (this._onRemove = t);
+  set onRemove(e) {
+    e && (this._onRemove = e);
   }
   get onRemove() {
     return this._onRemove;
@@ -42,15 +40,14 @@ const h = class h extends u {
   disconnectedCallback() {
     super.disconnectedCallback(), this.removeEventListener("click", this._handleClick);
   }
-  attributeChangedCallback(t, s, r) {
-    super.attributeChangedCallback(t, s, r), t === "removable" && r !== null ? this.addEventListener("keydown", this._handleKeyDown) : this.removeEventListener("keydown", this._handleKeyDown);
+  attributeChangedCallback(e, i, s) {
+    super.attributeChangedCallback(e, i, s), e === "removable" && s !== null ? this.addEventListener("keydown", this._handleKeyDown) : this.removeEventListener("keydown", this._handleKeyDown);
   }
   render() {
     return a`
 			<div
 				class=${d({
       tag: !0,
-      "tag--color-alert": this.color === "alert",
       "tag--color-error": this.color === "error",
       "tag--color-info": this.color === "info",
       "tag--color-success": this.color === "success",
@@ -78,25 +75,25 @@ const h = class h extends u {
 };
 h.styles = [f, k];
 let o = h;
-i([
-  l({ reflect: !0 })
+r([
+  n({ reflect: !0 })
 ], o.prototype, "size", 2);
-i([
-  l()
+r([
+  n()
 ], o.prototype, "icon", 2);
-i([
-  l({ reflect: !0 })
+r([
+  n({ reflect: !0 })
 ], o.prototype, "color", 2);
-i([
-  l({ attribute: !1 })
+r([
+  n({ attribute: !1 })
 ], o.prototype, "onClick", 1);
-i([
-  l({ attribute: !1 })
+r([
+  n({ attribute: !1 })
 ], o.prototype, "onRemove", 1);
-i([
-  l({ type: Boolean, reflect: !0 })
+r([
+  n({ type: Boolean, reflect: !0 })
 ], o.prototype, "removable", 2);
-i([
+r([
   v("button")
 ], o.prototype, "$removeButton", 2);
 export {