@skf-design-system/ui-components 1.0.1-beta.1 → 1.0.2-beta.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';
+export * from './segmented-button-item.component';
+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';
+export * from './segmented-button.component';
+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/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,8 +1,7 @@
 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';
 export interface SelectOptionEvent {
     value: string | null;
@@ -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,7 +1,7 @@
 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 { LitElement as m, html as h } from "lit";
-import { property as n, queryAssignedNodes as _ } from "lit/decorators.js";
+import { property as l, queryAssignedNodes as _ } from "lit/decorators.js";
 import { ifDefined as p } from "lit/directives/if-defined.js";
 import "../icon/icon.js";
 import { styles as y } from "./select-option.styles.js";
@@ -10,9 +10,9 @@ var v = Object.defineProperty, b = Object.getOwnPropertyDescriptor, o = (d, t, s
     (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 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();
@@ -33,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
@@ -80,7 +80,7 @@ const l = class l extends u {
 					<slot name="icon">
 						${this.icon && h`
 							<skf-icon
-								class=${p((this.disabled ?? !this.iconColor) && "skf-icon-host")}
+								class=${p((this.disabled || !this.iconColor) && "skf-icon-host")}
 								color=${p(this.iconColor)}
 								name=${this.icon}
 							></skf-icon>
@@ -92,28 +92,28 @@ const l = class l extends u {
 		`;
   }
 };
-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;

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 { html as n, nothing as C } from "lit";
+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,9 +235,9 @@ 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.customInvalid : this.hint}
+							${this.customInvalid ?? this.hint}
 						</skf-hint>
 					`}
 				</div>

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

@@ -1,10 +1,21 @@
-import type { SkfSelectOption } from '../select-option/select-option.component.js';
-import type { ReactiveController } from 'lit';
-import type { SkfSelect } from './select.component.js';
-type ControllerHost = SkfSelect;
+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;
+ */
+interface ControllerHostProps {
+    _expanded: boolean;
+    _optionsList: SkfSelectOption[];
+    localName: keyof HTMLElementTagNameMap;
+    min: number;
+    max: number;
+    multiple: boolean;
+    hideTags: boolean;
+}
 export declare class GlobalClickController implements ReactiveController {
-    host: ControllerHost;
-    constructor(host: ControllerHost);
+    host?: ReactiveControllerHost & Partial<ControllerHostProps>;
+    constructor(host: ReactiveControllerHost);
     hostDisconnected(): void;
     hostUpdated(): void;
     _globalClickHandler: (event: MouseEvent) => void;
@@ -12,9 +23,9 @@ export declare class GlobalClickController implements ReactiveController {
     disableGlobalClickDetection(): void;
 }
 export declare class KeyboardNavigationController implements ReactiveController {
-    host: ControllerHost;
+    host?: ReactiveControllerHost & Partial<ControllerHostProps>;
     _listenerActivated: boolean;
-    constructor(host: ControllerHost);
+    constructor(host: ReactiveControllerHost);
     hostDisconnected(): void;
     hostUpdated(): void;
     setupKeyboardListener(): void;
@@ -26,8 +37,8 @@ export declare class KeyboardNavigationController implements ReactiveController
     get _selectableOptions(): SkfSelectOption[];
 }
 export declare class DeveloperFeedbackController implements ReactiveController {
-    host: ControllerHost;
-    constructor(host: ControllerHost);
+    host?: ReactiveControllerHost & Partial<ControllerHostProps>;
+    constructor(host: ReactiveControllerHost);
     hostConnected(): void;
     _badAttributeCombinationWarning(): void;
 }