@skf-design-system/ui-components 0.0.1-beta.4 → 1.0.0-beta.3

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

@@ -0,0 +1,77 @@
+import { SkfElement } from '@internal/components/skf-element.js';
+import type { IconColor } from '@skf-design-system/ui-assets';
+import { type CSSResultGroup } from 'lit';
+import '../icon/icon';
+import { SkfIcon } from '../icon/icon';
+import type { SkfSelect } from '../select/select.component.js';
+export interface SelectOptionEvent {
+    value: string | null;
+    option: SkfSelectOption;
+}
+/**
+ * The `<skf-select-option>` is a component is used nested in a skf-select or skf-select-option-group.
+ *
+ * @documentation See [InVision DSM](https://skf.invisionapp.com/dsm/ab-skf/4-web-applications/nav/5fa7caf78c01200018354495/asset/6229d63d9fe16020a60657e5) for design principles
+ *
+ * @slot - The option's text content
+ * @slot icon - The option's slot for icon or custom meta information (svg).
+ *
+ * @event skf-select-option:select - {detail: { value: string | null, option: SkfSelectOption }} Fires when the option is selected/deselected.
+ *
+ * @tagname skf-select-option
+ */
+export declare class SkfSelectOption extends SkfElement {
+    static styles: CSSResultGroup;
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
+    /** @internal */
+    _parent: SkfSelect | null;
+    /** @internal */
+    protected _value?: string;
+    /**
+     * @internal
+     * Do not use directly, instead use `setSelectedDiscrete`.
+     * If true, instantly sets/unsets the selected property, without engaging ui feedback. Primarily for unselecting previous option in single select.
+     */
+    _shortcutUpdate?: boolean;
+    /** If true, prevents interaction with the option */
+    disabled?: boolean;
+    /** If defined, set an icon */
+    icon?: SkfIcon['name'];
+    /** If defined, sets provided color on the icon */
+    iconColor?: IconColor;
+    /** If true, sets the option as selected */
+    selected?: boolean;
+    /** If defined, sets a short label */
+    shortLabel?: string;
+    /** The option's label text (equivalent to the tags textContent) */
+    set text(slottedTextContent: string);
+    get text(): string;
+    /** Returns or sets the tags value. If value is omitted, defaults to the tags text. */
+    set value(optionValue: string);
+    get value(): string;
+    /** @internal */
+    private _assignedNodes?;
+    constructor();
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    /**
+     * @internal
+     * This internal setter is to change selected state without emitting events triggering other side effects,
+     * e.g deselecting previous selected in a single select. Is used by skf-select in single select mode.
+     */
+    set setSelectedDiscrete(value: boolean);
+    /**
+     * @internal
+     * Returns the slotted content as a string. If no slotted content, returns an empty string.
+     */
+    private _getSlottedContent;
+    /** @internal */
+    private get _slotContainsOnlyText();
+    /** @internal */
+    _handleClick: (e: Event) => void;
+    render(): import("lit").TemplateResult<1>;
+}

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

@@ -0,0 +1,117 @@
+import { SkfElement as p } from "../../internal/components/skf-element.js";
+import u from "../../styles/component.styles.js";
+import { LitElement as f, html as h } from "lit";
+import { property as n, queryAssignedNodes as m } from "lit/decorators.js";
+import { ifDefined as _ } from "lit/directives/if-defined.js";
+import "../icon/icon.js";
+import { styles as y } from "./select-option.styles.js";
+var v = Object.defineProperty, b = Object.getOwnPropertyDescriptor, o = (d, t, s, i) => {
+  for (var r = i > 1 ? void 0 : i ? b(t, s) : t, a = d.length - 1, c; a >= 0; a--)
+    (c = d[a]) && (r = (i ? c(t, s, r) : c(r)) || r);
+  return i && r && v(t, s, r), r;
+};
+const l = class l extends p {
+  constructor() {
+    super(), this._handleClick = (s) => {
+      s.stopPropagation(), this.selected = !this.selected;
+    };
+    const t = this.attachInternals();
+    t.role = "option", this._parent = this.closest("skf-select"), this._shortcutUpdate = !1;
+  }
+  set text(t) {
+    this.textContent = t.trim();
+  }
+  get text() {
+    var t;
+    return ((t = this.textContent) == null ? void 0 : t.trim()) ?? "";
+  }
+  set value(t) {
+    this._value = t.trim();
+  }
+  get value() {
+    var t;
+    return !this._value && this._slotContainsOnlyText ? this._getSlottedContent().trim() : ((t = this._value) == null ? void 0 : t.trim()) ?? this.text;
+  }
+  updated(t) {
+    super.updated(t), t.has("selected") && !this._shortcutUpdate && this.emit("skf-select-option:select", {
+      detail: {
+        value: this.selected ? this.value : null,
+        option: this
+      }
+    });
+  }
+  /**
+   * @internal
+   * This internal setter is to change selected state without emitting events triggering other side effects,
+   * e.g deselecting previous selected in a single select. Is used by skf-select in single select mode.
+   */
+  set setSelectedDiscrete(t) {
+    (async () => {
+      this._shortcutUpdate = !0, this.selected = t, await this.updateComplete, this._shortcutUpdate = !1;
+    })();
+  }
+  /**
+   * @internal
+   * Returns the slotted content as a string. If no slotted content, returns an empty string.
+   */
+  _getSlottedContent() {
+    return this._assignedNodes ? [...this._assignedNodes].map((t) => t.nodeType === Node.ELEMENT_NODE ? t.outerHTML : t.textContent).join() : "";
+  }
+  /** @internal */
+  get _slotContainsOnlyText() {
+    return this._assignedNodes ? [...this._assignedNodes].every(
+      (s) => {
+        var i;
+        return s.nodeType === Node.TEXT_NODE && ((i = s.textContent) == null ? void 0 : i.trim()) !== "";
+      }
+    ) : "";
+  }
+  render() {
+    return h`
+			<button
+				@click=${this._handleClick}
+				aria-selected=${this.selected ? "true" : "false"}
+				?disabled=${this.disabled}
+				role="option"
+			>
+				<skf-icon id="icon-check" name="check" size="sm"></skf-icon>
+				<slot>${this.text}</slot>
+				<div id="adornments">
+					<slot name="icon">
+						${this.icon && h`<skf-icon name=${this.icon} color=${_(this.iconColor)}></skf-icon>`}
+					</slot>
+					${this.shortLabel && h`<div id="short-label">${this.shortLabel}</div>`}
+				</div>
+			</button>
+		`;
+  }
+};
+l.styles = [u, y], l.shadowRootOptions = { ...f.shadowRootOptions, delegatesFocus: !0 };
+let e = l;
+o([
+  n({ type: Boolean, reflect: !0 })
+], e.prototype, "disabled", 2);
+o([
+  n({ reflect: !0 })
+], e.prototype, "icon", 2);
+o([
+  n({ reflect: !0, attribute: "icon-color" })
+], e.prototype, "iconColor", 2);
+o([
+  n({ type: Boolean, reflect: !0 })
+], e.prototype, "selected", 2);
+o([
+  n({ reflect: !0, attribute: "short-label" })
+], e.prototype, "shortLabel", 2);
+o([
+  n({ attribute: !1 })
+], e.prototype, "text", 1);
+o([
+  n({ reflect: !0 })
+], e.prototype, "value", 1);
+o([
+  m({ flatten: !0 })
+], e.prototype, "_assignedNodes", 2);
+export {
+  e as SkfSelectOption
+};

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

@@ -0,0 +1,9 @@
+import type { SkfSelectOption } from '@components/select-option/select-option.component.js';
+import type { ReactiveController } from 'lit';
+type ControllerHost = SkfSelectOption;
+export declare class DeveloperFeedbackController implements ReactiveController {
+    host: ControllerHost;
+    constructor(host: ControllerHost);
+    hostUpdated(): void;
+}
+export {};

package/dist/components/select-option/select-option.d.ts

@@ -0,0 +1,8 @@
+import { SkfSelectOption } from './select-option.component.js';
+export * from './select-option.component.js';
+export default SkfSelectOption;
+declare global {
+    interface HTMLElementTagNameMap {
+        'skf-select-option': SkfSelectOption;
+    }
+}

package/dist/components/select-option/select-option.js

@@ -0,0 +1,6 @@
+import { SkfSelectOption as e } from "./select-option.component.js";
+e.define("skf-select-option");
+export {
+  e as SkfSelectOption,
+  e as default
+};

package/dist/components/select-option/select-option.styles.d.ts

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

package/dist/components/select-option/select-option.styles.js

@@ -0,0 +1,53 @@
+import { css as e } from "lit";
+const o = e`
+	@layer components {
+		button {
+			align-items: center;
+			background-color: var(--_skf-select-option-bg, var(--skf-interactive-bg-color-secondary));
+			block-size: var(--_skf-select-option-height, var(--skf-size-44));
+			color: var(--_skf-select-option-color, inherit);
+			display: flex;
+			gap: var(--skf-spacing-50);
+			padding-inline: var(--skf-spacing-50);
+			width: 100%;
+
+			&:disabled {
+				--_skf-select-option-color: var(--skf-interactive-text-color-disabled);
+			}
+
+			&:is(:hover, :focus):not(:disabled) {
+				--_skf-select-option-bg: var(--skf-interactive-bg-color-secondary-hover);
+			}
+
+			&:active:not(:disabled) {
+				--_skf-select-option-bg: var(--skf-interactive-bg-color-secondary-active);
+			}
+
+			:host-context(skf-select[size='sm']) & {
+				--_skf-select-option-height: var(--skf-size-32);
+			}
+		}
+
+		#icon-check {
+			opacity: 0;
+
+			:host([selected]) & {
+				opacity: 1;
+			}
+		}
+
+		#adornments {
+			align-items: inherit;
+			display: inherit;
+			gap: inherit;
+			margin-inline-start: auto;
+		}
+
+		#short-label {
+			color: var(--skf-text-color-tertiary);
+		}
+	}
+`;
+export {
+  o as styles
+};

package/dist/components/select-option-group/select-option-group.component.d.ts

@@ -0,0 +1,16 @@
+import { SkfElement } from '@internal/components/skf-element';
+import { type CSSResultGroup } from 'lit';
+/**
+ * The `<skf-select-option-group>` is a component that groups select-options
+ *
+ * @documentation See [InVision DSM](https://skf.invisionapp.com/dsm/ab-skf/4-web-applications/nav/5fa7caf78c01200018354495/asset/6229d63d9fe16020a60657e5) for design principles
+ *
+ * @slot - The component's placeholder content
+ *
+ * @tagname skf-select-option-group
+ */
+export declare class SkfSelectOptionGroup extends SkfElement {
+    static styles: CSSResultGroup;
+    label: string;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/select-option-group/select-option-group.component.js

@@ -0,0 +1,31 @@
+import { SkfElement as a } from "../../internal/components/skf-element.js";
+import f from "../../styles/component.styles.js";
+import { html as p } from "lit";
+import { property as d } from "lit/decorators.js";
+import { styles as n } from "./select-option-group.style.js";
+var v = Object.defineProperty, u = (o, s, i, b) => {
+  for (var r = void 0, e = o.length - 1, m; e >= 0; e--)
+    (m = o[e]) && (r = m(s, i, r) || r);
+  return r && v(s, i, r), r;
+};
+const l = class l extends a {
+  constructor() {
+    super(...arguments), this.label = "Default label";
+  }
+  render() {
+    return p`
+			<div role="group">
+				<div id="label">${this.label}</div>
+				<slot></slot>
+			</div>
+		`;
+  }
+};
+l.styles = [f, n];
+let t = l;
+u([
+  d({ reflect: !0 })
+], t.prototype, "label");
+export {
+  t as SkfSelectOptionGroup
+};

package/dist/components/select-option-group/select-option-group.d.ts

@@ -0,0 +1,8 @@
+import { SkfSelectOptionGroup } from './select-option-group.component';
+export * from './select-option-group.component';
+export default SkfSelectOptionGroup;
+declare global {
+    interface HTMLElementTagNameMap {
+        'skf-select-option-group': SkfSelectOptionGroup;
+    }
+}

package/dist/components/select-option-group/select-option-group.js

@@ -0,0 +1,6 @@
+import { SkfSelectOptionGroup as e } from "./select-option-group.component.js";
+e.define("skf-select-option-group");
+export {
+  e as SkfSelectOptionGroup,
+  e as default
+};

package/dist/components/select-option-group/select-option-group.style.d.ts

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

package/dist/components/select-option-group/select-option-group.style.js

@@ -0,0 +1,18 @@
+import { css as e } from "lit";
+const t = e`
+	@layer components {
+		#label {
+			align-items: center;
+			block-size: var(--_skf-select-option-group-height, var(--skf-size-44));
+			display: flex;
+			font-weight: var(--skf-font-weight-bold);
+
+			:host-context(skf-select[size='sm']) & {
+				--_skf-select-option-group-height: var(--skf-size-32);
+			}
+		}
+	}
+`;
+export {
+  t as styles
+};

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

@@ -9,13 +9,12 @@ import { type CSSResultGroup } from 'lit';
  * @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
  *
- * @slot - The component's placeholder content
+ * @slot - The Switchs label. Alternatively, you can use the `label` attribute.
  *
  * @tagname skf-switch
  */
 export declare class SkfSwitch extends FormBase implements FormFieldBaseProps {
     static styles: CSSResultGroup;
-    /** @internal */
     private _initialChecked;
     /** If true, outputs helping hints in console */
     debug?: boolean;
@@ -23,7 +22,7 @@ export declare class SkfSwitch extends FormBase implements FormFieldBaseProps {
     checked?: boolean;
     /** If true, hides the label visually */
     hideLabel?: boolean;
-    /** If defined, sets the input's label. Alternatively, you can use the `label` attribute. */
+    /** 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 */
     name?: string;

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

@@ -48,7 +48,7 @@ const h = class h extends o {
   }
   render() {
     return c`
-			<label id="switch">
+			<label id="root">
 				<input
 					?checked=${this.checked}
 					?disabled=${this.disabled}

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

@@ -8,7 +8,7 @@ const t = [
 				contain: layout;
 			}
 
-			label {
+			#root {
 				align-items: center;
 				display: flex;
 				grid-gap: var(--skf-spacing-50);

package/dist/components/switch/switch.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -13,15 +13,36 @@ import { type CSSResultGroup } from 'lit';
  */
 export declare class SkfTag extends SkfElement {
     static styles: CSSResultGroup;
-    /** Specifies Tag size - @default "md" */
+    private _onClick?;
+    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" } */
+    /**
+     * 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" }
+     */
     icon?: Icon;
-    /** If defined, gives the supplied appearance - @type {  "warning" | "success" | "info" | "error" | "alert" } */
+    /**
+     * If defined, gives the supplied appearance
+     * @type {  "warning" | "success" | "info" | "error" | "alert" }
+     */
     color?: SeverityBgColor;
+    /** If defined, accepts a function that runs on click */
+    set onClick(onClickFn: ((event: Event) => void) | undefined);
+    get onClick(): ((event: Event) => void) | undefined;
+    /** If defined, accepts a function that runs on click. Self removal can be overridden by using `event.stopPropagation()`. */
+    set onRemove(onRemoveFn: ((event: Event) => void) | undefined);
+    get onRemove(): ((event: Event) => void) | undefined;
     /** If true, adds trailing button to remove tag */
     removable?: boolean;
     /** @internal */
-    private _remove;
+    $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;
     render(): import("lit").TemplateResult<1>;
 }

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

@@ -1,51 +1,88 @@
 import "../icon/icon.js";
-import { SkfElement as a } from "../../internal/components/skf-element.js";
-import h from "../../styles/component.styles.js";
-import { html as s, nothing as f } from "lit";
-import { property as e } from "lit/decorators.js";
+import { SkfElement as u } from "../../internal/components/skf-element.js";
+import d from "../../styles/component.styles.js";
+import { html as a, nothing as m } from "lit";
+import { property as s, query as f } from "lit/decorators.js";
 import { ifDefined as v } from "lit/directives/if-defined.js";
-import { styles as u } from "./tag.styles.js";
-var d = Object.defineProperty, r = (m, p, l, y) => {
-  for (var t = void 0, i = m.length - 1, c; i >= 0; i--)
-    (c = m[i]) && (t = c(p, l, t) || t);
-  return t && d(p, l, t), t;
+import { styles as k } from "./tag.styles.js";
+var y = Object.defineProperty, C = Object.getOwnPropertyDescriptor, r = (p, e, i, n) => {
+  for (var t = n > 1 ? void 0 : n ? C(e, i) : e, l = p.length - 1, c; l >= 0; l--)
+    (c = p[l]) && (t = (n ? c(e, i, t) : c(t)) || t);
+  return n && t && y(e, i, t), t;
 };
-const n = class n extends a {
+const h = class h extends u {
   constructor() {
-    super(...arguments), this.size = "md", this._remove = () => {
-      this.remove();
+    super(...arguments), this.size = "md", 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();
+      const i = e.composedPath()[0];
+      console.log("$clickTarget", i), i.localName === "button" ? this.remove() : (t = this.onClick) == null || t.call(this, e);
     };
   }
+  set onClick(e) {
+    e && (this._onClick = e);
+  }
+  get onClick() {
+    return this._onClick;
+  }
+  set onRemove(e) {
+    e && (this._onRemove = e);
+  }
+  get onRemove() {
+    return this._onRemove;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("click", this._handleClick);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("click", this._handleClick);
+  }
+  attributeChangedCallback(e, i, n) {
+    super.attributeChangedCallback(e, i, n), e === "removable" && n !== null ? this.addEventListener("keydown", this._handleKeyDown) : this.removeEventListener("keydown", this._handleKeyDown);
+  }
   render() {
-    return s`
-			<div id="tag">
-				${this.icon ? s`<skf-icon color=${v(this.color)} name=${this.icon} size="sm"></skf-icon>` : f}
+    return a`
+			<div id="root">
+				${this.icon ? a`<skf-icon color=${v(this.color)} name=${this.icon} size="sm"></skf-icon>` : m}
 				<span>
 					<slot></slot>
 				</span>
-				${this.removable ? s`
-							<button @click=${this._remove} type="button">
-								<skf-icon name="close" size="sm"></skf-icon>
+				${this.removable ? a`
+							<button @click=${this._handleRemove} type="button">
+								<skf-icon name="close" size="xs"></skf-icon>
 							</button>
-						` : f}
+						` : m}
 			</div>
 		`;
   }
 };
-n.styles = [h, u];
-let o = n;
+h.styles = [d, k];
+let o = h;
+r([
+  s({ reflect: !0 })
+], o.prototype, "size", 2);
+r([
+  s()
+], o.prototype, "icon", 2);
+r([
+  s({ reflect: !0 })
+], o.prototype, "color", 2);
 r([
-  e({ reflect: !0 })
-], o.prototype, "size");
+  s({ attribute: !1 })
+], o.prototype, "onClick", 1);
 r([
-  e()
-], o.prototype, "icon");
+  s({ attribute: !1 })
+], o.prototype, "onRemove", 1);
 r([
-  e({ reflect: !0 })
-], o.prototype, "color");
+  s({ type: Boolean, reflect: !0 })
+], o.prototype, "removable", 2);
 r([
-  e({ type: Boolean })
-], o.prototype, "removable");
+  f("button")
+], o.prototype, "$removeButton", 2);
 export {
   o as SkfTag
 };

package/dist/components/tag/tag.styles.js

@@ -1,11 +1,7 @@
 import { css as r } from "lit";
 const s = r`
 	@layer components {
-		:host {
-			display: contents;
-		}
-
-		#tag {
+		#root {
 			align-items: center;
 			background-color: var(--_skf-tag-bg-color, var(--skf-bg-color-neutral-1));
 			block-size: var(--_skf-tag-height, var(--skf-size-32));
@@ -59,6 +55,11 @@ const s = r`
 
 		button {
 			display: flex;
+
+			&:focus-visible {
+				border-radius: var(--skf-border-radius-sm);
+				outline: var(--skf-border-width-md) solid var(--skf-interactive-border-color-focus);
+			}
 		}
 	}
 `;