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

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

@@ -1,9 +1,10 @@
-import { raiseError as l } from "../../internal/helpers/raiseError.js";
+import { raiseError as a } from "../../internal/helpers/raiseError.js";
 class d {
   constructor(t) {
     this._globalClickHandler = (e) => {
-      e.target.closest(this.host.localName) || (this.host._expanded = !1);
-    }, this.host = t, t.addController(this);
+      var i;
+      !((i = this.host) != null && i.localName) || e.target.closest(this.host.localName) || (this.host._expanded = !1);
+    }, (this.host = t).addController(this);
   }
   // hostConnected() {
   // 	this.enableGlobalClickDetection();
@@ -12,7 +13,8 @@ class d {
     this.disableGlobalClickDetection();
   }
   hostUpdated() {
-    this.host._expanded ? this.enableGlobalClickDetection() : this.disableGlobalClickDetection();
+    var t;
+    (t = this.host) != null && t._expanded ? this.enableGlobalClickDetection() : this.disableGlobalClickDetection();
   }
   enableGlobalClickDetection() {
     document.addEventListener("click", this._globalClickHandler);
@@ -35,18 +37,19 @@ class p {
           e.preventDefault(), this._selectFocusedOption(e.target);
           break;
         case "Escape":
-          e.preventDefault(), this.host._expanded = !1, setTimeout(() => {
+          e.preventDefault(), this.host && (this.host._expanded = !1), setTimeout(() => {
             this.host.focus();
           });
           break;
       }
-    }, this.host = t, t.addController(this), this._listenerActivated = !1;
+    }, (this.host = t).addController(this), this._listenerActivated = !1;
   }
   hostDisconnected() {
     this.removeKeyboardListener();
   }
   hostUpdated() {
-    this.host._expanded && !this._listenerActivated && this.setupKeyboardListener(), !this.host._expanded && this._listenerActivated && this.removeKeyboardListener();
+    var t, e;
+    (t = this.host) != null && t._expanded && !this._listenerActivated && this.setupKeyboardListener(), !((e = this.host) != null && e._expanded) && this._listenerActivated && this.removeKeyboardListener();
   }
   setupKeyboardListener() {
     this._listenerActivated = !0, this.host.addEventListener("keydown", this._handleKeyDown);
@@ -61,52 +64,57 @@ class p {
     });
   }
   _focusSiblingOption(t) {
-    const e = (n) => n === document.activeElement, s = this._selectableOptions.find((n) => e(n));
+    const e = (l) => l === document.activeElement, s = this._selectableOptions.find((l) => e(l));
     if (!s) {
       this._focusFirstOption();
       return;
     }
-    const r = this._selectableOptions.indexOf(s);
-    let i = r - 1, o = r + 1;
-    i < 0 && (i = this._selectableOptions.length - 1), o >= this._selectableOptions.length && (o = 0);
-    const h = this._selectableOptions[t === "next" ? o : i];
+    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];
     s.blur(), h.focus();
   }
   _selectFocusedOption(t) {
     t.selected = !0;
   }
   get _selectableOptions() {
-    return this.host._optionsList.filter((t) => !t.disabled);
+    return !this.host || !this.host._optionsList ? [] : this.host._optionsList.filter((t) => !t.disabled);
   }
 }
-class b {
+class u {
   constructor(t) {
-    this.host = t, t.addController(this);
+    (this.host = t).addController(this);
   }
   hostConnected() {
     this._badAttributeCombinationWarning();
   }
   _badAttributeCombinationWarning() {
-    l({
+    if (!this.host) return;
+    const t = this.host.localName ?? "never";
+    a({
       assert: (this.host.min ?? 0) <= (this.host.max ?? 1 / 0),
       reason: "attribute-mismatch",
-      replaceStrings: [this.host.localName, "min", "smaller than max"]
-    }), l({
+      replaceStrings: [t, "min", "smaller than max"]
+    }), a({
       assert: (
         // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
         (this.host.min || this.host.max) && this.host.multiple || !(this.host.min && this.host.max)
       ),
       reason: "attribute-mismatch",
-      replaceStrings: [this.host.localName, "min or max", "together with multiple"]
-    }), l({
-      assert: (this.host.hideTags && this.host.multiple) ?? !this.host.hideTags,
+      replaceStrings: [t, "min or max", "together with multiple"]
+    });
+    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: [this.host.localName, "hide-tags", "together with multiple"]
+      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 { literal as w, unsafeStatic 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 = w`${U(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-item.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

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

@@ -1,14 +1,14 @@
-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.
  *
- * @documentation See [zeroheight](https://zeroheight.com/****) for design principles
+ * @documentation See [zeroheight](https://zeroheight.com/853e936c9/p/842a0a-stepper) for design principles
  *
  * @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
  */
@@ -27,6 +27,7 @@ export declare class SkfStepper extends SkfElement {
     _handleActiveIndexChanged(): void;
     /** @internal */
     _handleLinearMode(): void;
+    /** @internal */
     private _handleSelected;
     /** @internal */
     private _resetActive;

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.d.ts

@@ -4,10 +4,10 @@ import { type CSSResultGroup } from 'lit';
 /**
  * The `<skf-switch>` is a component that displays a list of actions or options
  *
- * @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/7282a2-switch) for design principle
  *
- * @attribute {boolean} disabled - If true, sets disabled state
- * @attribute {boolean} required - If true, value is required or must be checked for the form to be submittable
+ * @attribute {boolean} [disabled=false] - If true, sets disabled state
+ * @attribute {boolean} [required=false] - If true, value is required or must be checked for the form to be submittable
  *
  * @slot - The Switchs label. Alternatively, you can use the `label` attribute.
  *
@@ -15,13 +15,14 @@ import { type CSSResultGroup } from 'lit';
  */
 export declare class SkfSwitch extends FormBase implements FormFieldBaseProps {
     static styles: CSSResultGroup;
+    /** @internal */
     private _initialChecked;
     /** If true, outputs helping hints in console */
-    debug?: boolean;
+    debug: boolean;
     /** If true, outputs helping hints in console */
-    checked?: boolean;
+    checked: boolean;
     /** If true, hides the label visually */
-    hideLabel?: boolean;
+    hideLabel: boolean;
     /** If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute. */
     label?: string;
     /** If defined, adds name to the input-element */

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

@@ -1,21 +1,21 @@
 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) => {
-  for (var l = void 0, r = d.length - 1, n; r >= 0; r--)
-    (n = d[r]) && (l = n(e, a, l) || l);
-  return l && y(e, a, l), l;
+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;
 };
-const h = class h extends o {
+const r = class r extends o {
   constructor() {
-    super(...arguments), this._initialChecked = !1, this.size = "md", this.value = "", this._invalid = !1, this._handleChange = (e) => {
+    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, this._validateInput(), this.checked ? this.setFormValue(this.value) : this.setFormValue(null), this.emitEvent("change");
+      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");
     }, this._handleInvalid = (e) => {
       this.pristine = !1, this._invalid = !0, this.customErrorDisplay && e.preventDefault();
     }, this._resetValue = (e) => {
@@ -51,9 +51,9 @@ const h = class h 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 h = class h 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,8 +79,8 @@ const h = class h extends o {
 		`;
   }
 };
-h.styles = [p, b];
-let t = h;
+r.styles = [p, y];
+let t = r;
 i([
   s({ type: Boolean })
 ], t.prototype, "debug");
@@ -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
@@ -13,20 +13,16 @@ import { type CSSResultGroup } from 'lit';
  */
 export declare class SkfTag extends SkfElement {
     static styles: CSSResultGroup;
+    /** @internal */
     private _onClick?;
+    /** @internal */
     protected _onRemove?: (event: Event) => void;
     /** Specifies Tag size */
-    size: 'sm' | 'md' | 'lg';
-    /**
-     * 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" }
-     */
+    size: 'sm' | 'md';
+    /** 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;
@@ -34,15 +30,17 @@ export declare class SkfTag extends SkfElement {
     set onRemove(onRemoveFn: ((event: Event) => void) | undefined);
     get onRemove(): ((event: Event) => void) | undefined;
     /** If true, adds trailing button to remove tag */
-    removable?: boolean;
+    removable: boolean;
     /** @internal */
     $removeButton: HTMLButtonElement;
     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 { html as a, nothing as p } from "lit";
-import { property as l, query as d } from "lit/decorators.js";
-import { classMap as v } from "lit/directives/class-map.js";
+import { componentStyles as f } from "../../styles/component.styles.js";
+import { nothing as p, html as a } from "lit";
+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._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=${v({
+				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,26 +75,26 @@ 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([
-  d("button")
+r([
+  v("button")
 ], o.prototype, "$removeButton", 2);
 export {
   o as SkfTag