@skf-design-system/ui-components 1.0.0-alpha.33 → 1.0.0-alpha.35

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

@@ -1,16 +1,17 @@
 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 CSSResultGroup } from 'lit';
 /**
  * The `<skf-radio>` component is used to create a radio input
  *
- * @documentation See [zeroheight](https://zeroheight.com/853e936c9/p/78d5dd-radio-button) for design principles
+ * See [zeroheight](https://zeroheight.com/853e936c9/p/78d5dd-radio-button) for design principles
  *
- * @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
  *
- * @event change {object} - When the value of the input changes
+ * @event {Event} change - When the value of the input changes
  *
  * @slot - The radios label. Alternatively, you can use the `label` attribute.
  *
@@ -18,13 +19,17 @@ import { type CSSResultGroup } from 'lit';
  */
 export declare class SkfRadio extends FormBase implements FormFieldBaseProps {
     static styles: CSSResultGroup;
+    /**
+     * @internal
+     * Initial state saved here as default for form resets.
+     */
     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, forces component to invalid state until removed */
-    customInvalid?: boolean;
+    customInvalid: 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 */
@@ -33,13 +38,10 @@ export declare class SkfRadio extends FormBase implements FormFieldBaseProps {
     requiredLabel?: string;
     /** Size of the Radio */
     size: 'sm' | 'md';
-    /**
-     * If defined, displays provided severity state
-     * @type {"success" | "info" | "warning" | "alert"}
-     */
-    severity?: FormFieldBaseProps['severity'];
+    /** If defined, displays provided severity state */
+    severity?: FormFieldSeverity;
     /** If true, displays valid state after interaction */
-    showValid?: boolean;
+    showValid: boolean;
     /** The current value of the input field  */
     value: string;
     /** @internal */
@@ -49,9 +51,13 @@ export declare class SkfRadio extends FormBase implements FormFieldBaseProps {
     private $input?;
     connectedCallback(): void;
     protected firstUpdated(): void;
+    /** @internal */
     handleInvalidChange(): void;
+    /** @internal */
     handleDebugInvalid(): void;
+    /** @internal */
     handleCheckedChanged(): void;
+    /** @internal */
     handleCustomInvalidChange(): void;
     /** @internal */
     private _resetValue;

package/dist/components/radio/radio.component.js

@@ -1,20 +1,21 @@
+import "../icon/icon.js";
 import { FormBase as c } from "../../internal/components/formBase.js";
 import { watch as n } from "../../internal/helpers/watch.js";
 import { Asterisk as p } from "../../internal/templates/asterisk.js";
-import v from "../../styles/component.styles.js";
+import { componentStyles as v } from "../../styles/component.styles.js";
 import { html as m } from "lit";
 import { property as r, state as f, query as y } from "lit/decorators.js";
 import { ifDefined as b } from "lit/directives/if-defined.js";
 import { live as _ } from "lit/directives/live.js";
-import g from "./radio.styles.js";
-var k = Object.defineProperty, C = Object.getOwnPropertyDescriptor, i = (u, e, s, o) => {
-  for (var a = o > 1 ? void 0 : o ? C(e, s) : e, l = u.length - 1, h; l >= 0; l--)
-    (h = u[l]) && (a = (o ? h(e, s, a) : h(a)) || a);
-  return o && a && k(e, s, a), a;
+import { styles as g } from "./radio.styles.js";
+var k = Object.defineProperty, C = Object.getOwnPropertyDescriptor, i = (u, e, s, l) => {
+  for (var a = l > 1 ? void 0 : l ? C(e, s) : e, o = u.length - 1, h; o >= 0; o--)
+    (h = u[o]) && (a = (l ? h(e, s, a) : h(a)) || a);
+  return l && a && k(e, s, a), a;
 };
 const d = class d extends c {
   constructor() {
-    super(...arguments), this._initialChecked = !1, this.size = "md", this.value = "", this._invalid = !1, this._resetValue = (e) => {
+    super(...arguments), this._initialChecked = !1, this.debug = !1, this.checked = !1, this.customInvalid = !1, this.size = "md", this.showValid = !1, this.value = "", this._invalid = !1, this._resetValue = (e) => {
       e.stopPropagation(), this.checked = this._initialChecked, this.$input && (this.$input.checked = !!this._initialChecked), this.setFormValue(this.checked ? this.value : "");
     };
   }
@@ -24,8 +25,8 @@ const d = class d extends c {
   firstUpdated() {
     var e;
     (e = this.$input) == null || e.addEventListener("change", (s) => {
-      var o;
-      s.stopPropagation(), this.pristine = !1, this.checked = (o = this.$input) == null ? void 0 : o.checked, this._validateInput(), this.checked ? this.setFormValue(this.value) : this.setFormValue(""), this.emitEvent("change");
+      var l;
+      s.stopPropagation(), this.pristine = !1, this.checked = ((l = this.$input) == null ? void 0 : l.checked) ?? !1, this._validateInput(), this.checked ? this.setFormValue(this.value) : this.setFormValue(""), this.emitEvent("change");
     }), this.addEventListener("invalid", (s) => {
       this.pristine = !1, this._invalid = !0, this.customErrorDisplay && s.preventDefault();
     }), this._initialChecked = this.checked, this.addEventListener("reset", this._resetValue);
@@ -54,8 +55,8 @@ const d = class d extends c {
     const e = this.name;
     if (!e) return;
     (this.form ?? document).querySelectorAll(`skf-radio[name="${e}"]`).forEach((a) => {
-      const l = this.form === a.form, h = !this.form && !a.form;
-      a !== this && (l || h) && (a.checked = !1);
+      const o = this.form === a.form, h = !this.form && !a.form;
+      a !== this && (o || h) && (a.checked = !1);
     });
   }
   /** @internal */
@@ -80,7 +81,7 @@ const d = class d extends c {
 				<input
 					?disabled=${this.disabled}
 					?required=${this.required}
-					.checked=${_(!!this.checked)}
+					.checked=${_(this.checked)}
 					aria-invalid=${!!this._invalid}
 					name=${b(this.name)}
 					type="radio"

package/dist/components/radio/radio.styles.d.ts

@@ -1,2 +1 @@
-declare const _default: import("lit").CSSResult[];
-export default _default;
+export declare const styles: import("lit").CSSResult[];

package/dist/components/radio/radio.styles.js

@@ -99,5 +99,5 @@ const e = [
 	`
 ];
 export {
-  e as default
+  e as styles
 };

package/dist/components/segmented-button/segmented-button-item.component.d.ts

@@ -0,0 +1,36 @@
+import '../icon/icon.js';
+import { SkfElement } from '../../internal/components/skf-element';
+import { type CSSResultGroup } from 'lit';
+export interface SkfSegmentedButtonItemEvent {
+    item: SkfSegmentedButtonItem;
+}
+/**
+ * The `<skf-segmented-button-item>` is used in conjunction with the `<skf-segmented-button>` component
+ *
+ * @event {CustomEvent} skf-segmented-button-item-select - Fired when selected
+ *
+ * @slot - Label for the button
+ *
+ * @tagname skf-segmented-button-item
+ */
+export declare class SkfSegmentedButtonItem extends SkfElement {
+    static styles: CSSResultGroup;
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
+    /** If true, items is marked as disabled */
+    disabled: boolean;
+    /** If true, items is marked as selected */
+    selected: boolean;
+    /** Sets the item value */
+    value: string;
+    constructor();
+    /** @internal */
+    isMultiple: boolean;
+    /** @internal */
+    private _handleClick;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/segmented-button/segmented-button-item.component.js

@@ -0,0 +1,56 @@
+import "../icon/icon.js";
+import { SkfElement as n } from "../../internal/components/skf-element.js";
+import { componentStyles as f } from "../../styles/component.styles.js";
+import { LitElement as u, nothing as m, html as c } from "lit";
+import { property as r, state as v } from "lit/decorators.js";
+import { ifDefined as l } from "lit/directives/if-defined.js";
+import { styles as y } from "./segmented-button-item.styles.js";
+var b = Object.defineProperty, i = (a, p, d, k) => {
+  for (var e = void 0, o = a.length - 1, h; o >= 0; o--)
+    (h = a[o]) && (e = h(p, d, e) || e);
+  return e && b(p, d, e), e;
+};
+const s = class s extends n {
+  constructor() {
+    super(), this.disabled = !1, this.selected = !1, this.value = "", this.isMultiple = !1, this._handleClick = () => {
+      this.emit("skf-segmented-button-item-select", {
+        detail: {
+          item: this
+        }
+      });
+    }, this.addEventListener("click", this._handleClick);
+  }
+  render() {
+    return c`
+			<button
+				?disabled=${this.disabled}
+				aria-checked=${l(this.isMultiple ? void 0 : this.selected ? "true" : "false")}
+				aria-pressed=${l(this.isMultiple ? this.selected ? "true" : "false" : void 0)}
+				id="root"
+				role=${l(this.isMultiple ? void 0 : "radio")}
+				type="button"
+				value=${this.value}
+			>
+				${this.selected ? c`<skf-icon color="emphasised" name="check" size="sm"></skf-icon>` : m}
+				<slot></slot>
+			</button>
+		`;
+  }
+};
+s.styles = [f, y], s.shadowRootOptions = { ...u.shadowRootOptions, delegatesFocus: !0 };
+let t = s;
+i([
+  r({ type: Boolean, reflect: !0 })
+], t.prototype, "disabled");
+i([
+  r({ type: Boolean, reflect: !0 })
+], t.prototype, "selected");
+i([
+  r({ reflect: !0 })
+], t.prototype, "value");
+i([
+  v()
+], t.prototype, "isMultiple");
+export {
+  t as SkfSegmentedButtonItem
+};

package/dist/components/segmented-button/segmented-button-item.d.ts

@@ -0,0 +1,8 @@
+import { SkfSegmentedButtonItem } from './segmented-button-item.component.js';
+export * from './segmented-button-item.component.js';
+export default SkfSegmentedButtonItem;
+declare global {
+    interface HTMLElementTagNameMap {
+        'skf-segmented-button-item': SkfSegmentedButtonItem;
+    }
+}

package/dist/components/segmented-button/segmented-button-item.js

@@ -0,0 +1,6 @@
+import { SkfSegmentedButtonItem as e } from "./segmented-button-item.component.js";
+e.define("skf-segmented-button-item");
+export {
+  e as SkfSegmentedButtonItem,
+  e as default
+};

package/dist/components/segmented-button/segmented-button-item.styles.d.ts

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

package/dist/components/segmented-button/segmented-button-item.styles.js

@@ -0,0 +1,62 @@
+import { css as e } from "lit";
+const o = e`
+	@layer components {
+		:host {
+			display: contents;
+		}
+
+		#root {
+			align-items: center;
+			background-color: var(--_skf-segmented-button-item-bg, transparent);
+			border: var(--skf-border-width-md) solid var(--_skf-segmented-button-item-border, transparent);
+			border-radius: 4px; /* TODO: Missing token */
+			display: flex;
+			flex: 1;
+			font-size: var(--skf-font-size-75);
+			font-weight: var(--skf-font-weight-bold);
+			gap: var(--skf-spacing-25);
+			justify-content: center;
+			min-inline-size: 0;
+			padding-inline: var(--skf-spacing-50);
+			position: relative;
+
+			:host(:not(:last-of-type)) &::after {
+				background-color: var(--skf-border-color-primary);
+				block-size: calc(100% - 5px);
+				content: '';
+				inline-size: 1px;
+
+				/* inset-inline-end: calc((var(--skf-spacing-75) + 2px + var(--skf-border-width-md) * 2) / -2); */
+				inset-inline-end: -9px;
+				position: absolute;
+			}
+
+			&:disabled {
+				color: var(--skf-interactive-text-color-disabled);
+				font-weight: 500;
+			}
+
+			&:is([aria-checked='true'], [aria-pressed='true']) {
+				--_skf-segmented-button-item-border: var(--skf-border-color-emphasised);
+			}
+
+			&:hover:not(:disabled) {
+				--_skf-segmented-button-item-bg: var(--skf-interactive-bg-color-secondary-hover);
+			}
+
+			&:is(:focus, :active):not(:disabled) {
+				--_skf-segmented-button-item-bg: var(--skf-interactive-bg-color-secondary-active);
+			}
+		}
+
+		slot {
+			display: block;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+	}
+`;
+export {
+  o as styles
+};

package/dist/components/segmented-button/segmented-button.component.d.ts

@@ -0,0 +1,30 @@
+import { SkfElement } from '../../internal/components/skf-element';
+import { type CSSResultGroup } from 'lit';
+/**
+ * The `<skf-segmented-button>` component consists of multiple `<skf-segmented-button-item>`, working together.
+ *
+ * See [zeroheight](https://zeroheight.com/853e936c9/p/68ff54-segmented-buttons) for design principles
+ *
+ * @slot - One or more `<skf-segmented-button-item>`
+ *
+ * @tagname skf-segmented-button
+ */
+export declare class SkfSegmentedButton extends SkfElement {
+    static styles: CSSResultGroup;
+    /** If true, allowes multiple items to be selected */
+    multiple: boolean;
+    /** @internal */
+    value: string;
+    /** @internal */
+    private items;
+    firstUpdated(): void;
+    /** @internal */
+    private _handleSegmentedButtonItemSelected;
+    /** @internal */
+    private _handleSlotChange;
+    /** @internal */
+    private _handleKeyDown;
+    /** @internal */
+    private _getKeyDownNextItem;
+    render(): import("lit").TemplateResult<1>;
+}

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

@@ -0,0 +1,73 @@
+import { SkfElement as d } from "../../internal/components/skf-element.js";
+import { componentStyles as m } from "../../styles/component.styles.js";
+import { html as c } from "lit";
+import { property as u, state as f, queryAssignedElements as p } from "lit/decorators.js";
+import { ifDefined as g } from "lit/directives/if-defined.js";
+import { styles as y } from "./segmented-button.styles.js";
+var v = Object.defineProperty, n = (a, s, e, i) => {
+  for (var t = void 0, o = a.length - 1, r; o >= 0; o--)
+    (r = a[o]) && (t = r(s, e, t) || t);
+  return t && v(s, e, t), t;
+};
+const h = class h extends d {
+  constructor() {
+    super(...arguments), this.multiple = !1, this.value = "", this._handleSegmentedButtonItemSelected = (s) => {
+      const e = s.detail.item;
+      this.multiple && (e.selected = !e.selected), this.value = "";
+      let i = [];
+      this.items.forEach((t) => {
+        this.multiple ? t.selected && (i = [...i, t.value], this.value = i.join()) : t !== e ? t.selected = !1 : (t.selected = !0, this.value = t.value);
+      });
+    }, this._handleSlotChange = () => {
+      this.items.forEach((s) => {
+        if (s.isMultiple = this.multiple, !this.multiple) {
+          const e = this.items.filter((i) => i.selected);
+          e.length > 1 && e.slice(0, -1).forEach((i) => i.selected = !1);
+        }
+      });
+    }, this._handleKeyDown = (s) => {
+      if (["ArrowLeft", "ArrowRight"].includes(s.key)) {
+        const e = this._getKeyDownNextItem(s.key);
+        e == null || e.focus({ preventScroll: !0 });
+      }
+    };
+  }
+  firstUpdated() {
+    this.addEventListener(
+      "skf-segmented-button-item-select",
+      this._handleSegmentedButtonItemSelected
+    );
+  }
+  /** @internal */
+  _getKeyDownNextItem(s) {
+    const e = this.items.findIndex((r) => r === document.activeElement);
+    if (e === -1) return;
+    const t = (e + (s === "ArrowRight" ? 1 : -1)) % this.items.length;
+    return this.items[t < 0 ? this.items.length - 1 : t];
+  }
+  render() {
+    return c`
+			<slot
+				@keydown=${this._handleKeyDown}
+				@slotchange=${this._handleSlotChange}
+				aria-label=${g(this.ariaLabel ?? "Segmented button label")}
+				id="root"
+				role=${this.multiple ? "group" : "radiogroup"}
+			></slot>
+		`;
+  }
+};
+h.styles = [m, y];
+let l = h;
+n([
+  u({ type: Boolean })
+], l.prototype, "multiple");
+n([
+  f()
+], l.prototype, "value");
+n([
+  p()
+], l.prototype, "items");
+export {
+  l as SkfSegmentedButton
+};

package/dist/components/segmented-button/segmented-button.d.ts

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

package/dist/components/segmented-button/segmented-button.js

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

package/dist/components/segmented-button/segmented-button.styles.d.ts

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

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

@@ -0,0 +1,16 @@
+import { css as r } from "lit";
+const o = r`
+	@layer components {
+		#root {
+			block-size: var(--skf-size-44);
+			border: var(--skf-border-width-sm) solid var(--skf-border-color-primary);
+			border-radius: 6px; /* TODO: Missing token */
+			display: flex;
+			gap: var(--skf-spacing-75);
+			padding: var(--skf-spacing-25);
+		}
+	}
+`;
+export {
+  o as styles
+};

package/dist/components/{select-option-group → select}/select-option-group.component.js

@@ -1,5 +1,5 @@
 import { SkfElement as a } from "../../internal/components/skf-element.js";
-import f from "../../styles/component.styles.js";
+import { componentStyles as 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";

package/dist/components/{select-option-group → select}/select-option-group.d.ts

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

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

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

package/dist/components/{select-option → select}/select-option.component.d.ts

@@ -1,9 +1,8 @@
+import '../icon/icon.js';
 import { SkfElement } from '../../internal/components/skf-element.js';
-import type { SeverityFgColor } from '@skf-design-system/ui-assets';
+import type { Icon, IconColor } from '../../internal/types.js';
 import { type CSSResultGroup } from 'lit';
-import '../icon/icon';
-import { SkfIcon } from '../icon/icon';
-import type { SkfSelect } from '../select/select.component.js';
+import type { SkfSelect } from './select.component.js';
 export interface SelectOptionEvent {
     value: string | null;
     option: SkfSelectOption;
@@ -16,7 +15,7 @@ export interface SelectOptionEvent {
  * @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.
+ * @event skf-select-option-select - {detail: { value: string | null, option: SkfSelectOption }} Fires when the option is selected/deselected.
  *
  * @tagname skf-select-option
  */
@@ -37,15 +36,15 @@ export declare class SkfSelectOption extends SkfElement {
      * 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;
+    _shortcutUpdate: boolean;
     /** If true, prevents interaction with the option */
-    disabled?: boolean;
+    disabled: boolean;
     /** If defined, set an icon */
-    icon?: SkfIcon['name'];
+    icon?: Icon;
     /** If defined, sets provided color on the icon */
-    iconColor?: SeverityFgColor;
+    iconColor?: IconColor;
     /** If true, sets the option as selected */
-    selected?: boolean;
+    selected: boolean;
     /** If defined, sets a short label */
     shortLabel?: string;
     /** The option's label text (equivalent to the tags textContent) */

package/dist/components/{select-option → select}/select-option.component.js

@@ -1,17 +1,18 @@
+import "../icon/icon.js";
 import { SkfElement as u } from "../../internal/components/skf-element.js";
-import f from "../../styles/component.styles.js";
-import { LitElement as m, html as h } from "lit";
-import { property as n, queryAssignedNodes as _ } from "lit/decorators.js";
+import { componentStyles as f } from "../../styles/component.styles.js";
+import { LitElement as m, html as d } from "lit";
+import { property as l, queryAssignedNodes as _ } from "lit/decorators.js";
 import { ifDefined as p } from "lit/directives/if-defined.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);
+var v = Object.defineProperty, b = Object.getOwnPropertyDescriptor, o = (h, t, s, i) => {
+  for (var r = i > 1 ? void 0 : i ? b(t, s) : t, a = h.length - 1, c; a >= 0; a--)
+    (c = h[a]) && (r = (i ? c(t, s, r) : c(r)) || r);
   return i && r && v(t, s, r), r;
 };
-const l = class l extends u {
+const n = class n extends u {
   constructor() {
-    super(), this._handleClick = (s) => {
+    super(), this._shortcutUpdate = !1, this.disabled = !1, this.selected = !1, this._handleClick = (s) => {
       s.stopPropagation(), this.selected = !this.selected;
     };
     const t = this.attachInternals();
@@ -32,7 +33,7 @@ const l = class l extends u {
     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", {
+    super.updated(t), t.has("selected") && !this._shortcutUpdate && this.emit("skf-select-option-select", {
       detail: {
         value: this.selected ? this.value : null,
         option: this
@@ -66,7 +67,7 @@ const l = class l extends u {
     ) : "";
   }
   render() {
-    return h`
+    return d`
 			<button
 				?disabled=${this.disabled}
 				@click=${this._handleClick}
@@ -77,42 +78,42 @@ const l = class l extends u {
 				<slot>${this.text}</slot>
 				<div id="adornments">
 					<slot name="icon">
-						${this.icon && h`
+						${this.icon && d`
 							<skf-icon
-								class=${p((this.disabled ?? !this.iconColor) && "skf-icon-host")}
 								color=${p(this.iconColor)}
+								data-color=${p((this.disabled || !this.iconColor) && "custom")}
 								name=${this.icon}
 							></skf-icon>
 						`}
 					</slot>
-					${this.shortLabel && h`<div id="short-label">${this.shortLabel}</div>`}
+					${this.shortLabel && d`<div id="short-label">${this.shortLabel}</div>`}
 				</div>
 			</button>
 		`;
   }
 };
-l.styles = [f, y], l.shadowRootOptions = { ...m.shadowRootOptions, delegatesFocus: !0 };
-let e = l;
+n.styles = [f, y], n.shadowRootOptions = { ...m.shadowRootOptions, delegatesFocus: !0 };
+let e = n;
 o([
-  n({ type: Boolean, reflect: !0 })
+  l({ type: Boolean, reflect: !0 })
 ], e.prototype, "disabled", 2);
 o([
-  n({ reflect: !0 })
+  l({ reflect: !0 })
 ], e.prototype, "icon", 2);
 o([
-  n({ reflect: !0, attribute: "icon-color" })
+  l({ reflect: !0, attribute: "icon-color" })
 ], e.prototype, "iconColor", 2);
 o([
-  n({ type: Boolean, reflect: !0 })
+  l({ type: Boolean, reflect: !0 })
 ], e.prototype, "selected", 2);
 o([
-  n({ reflect: !0, attribute: "short-label" })
+  l({ reflect: !0, attribute: "short-label" })
 ], e.prototype, "shortLabel", 2);
 o([
-  n({ attribute: !1 })
+  l({ attribute: !1 })
 ], e.prototype, "text", 1);
 o([
-  n({ reflect: !0 })
+  l({ reflect: !0 })
 ], e.prototype, "value", 1);
 o([
   _({ flatten: !0 })

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

@@ -0,0 +1,15 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+/**
+ * Workaround for storybook helper not being able to import types
+ * E.g type ControllerHost = SkfSelectOption;
+ */
+interface ControllerHostProps {
+    localName: keyof HTMLElementTagNameMap;
+    _parent: HTMLElement | null;
+}
+export declare class DeveloperFeedbackController implements ReactiveController {
+    host?: ReactiveControllerHost & Partial<ControllerHostProps>;
+    constructor(host: ReactiveControllerHost);
+    hostUpdated(): void;
+}
+export {};

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

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