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

package/dist/components/checkbox/checkbox.component.js

@@ -23,7 +23,7 @@ const h = class h extends p {
     super.connectedCallback(), this._validateInput();
   }
   willUpdate(t) {
-    t.has("_invalid") && (this._invalid ? (this.setAttribute("invalid", ""), this.showValid || this.removeAttribute("valid"), this.checkValidity()) : (this.removeAttribute("invalid"), !this.pristine && this.showValid && this.setAttribute("valid", "true")));
+    t.has("_invalid") && (this._invalid ? (this.setAttribute("invalid", ""), this.showValid && this.removeAttribute("valid"), this.checkValidity()) : (this.removeAttribute("invalid"), !this.pristine && this.showValid && this.setAttribute("valid", "true")));
   }
   firstUpdated() {
     var t;

package/dist/components/input/input.component.js

@@ -1,23 +1,24 @@
 import "../icon/icon.js";
-import { FormBase as c } from "../../internal/components/formBase.js";
+import { FormBase as v } from "../../internal/components/formBase.js";
 import "../../internal/components/hint/hint.js";
-import { Asterisk as v } from "../../internal/templates/asterisk.js";
-import y from "../../styles/component.styles.js";
+import { hintSeverity as c } from "../../internal/helpers/hintSeverity.js";
+import { Asterisk as y } from "../../internal/templates/asterisk.js";
+import f from "../../styles/component.styles.js";
 import { html as h, nothing as d } from "lit";
-import { property as s, state as b, query as f } from "lit/decorators.js";
+import { property as s, state as b, query as _ } from "lit/decorators.js";
 import { ifDefined as a } from "lit/directives/if-defined.js";
 import { live as $ } from "lit/directives/live.js";
-import { InputNumberController as _, InputPasswordController as g } from "./input.controllers.js";
-import w from "./input.styles.js";
-var E = Object.defineProperty, A = Object.getOwnPropertyDescriptor, i = (u, e, r, n) => {
-  for (var o = n > 1 ? void 0 : n ? A(e, r) : e, l = u.length - 1, p; l >= 0; l--)
-    (p = u[l]) && (o = (n ? p(e, r, o) : p(o)) || o);
-  return n && o && E(e, r, o), o;
+import { InputNumberController as g, InputPasswordController as w } from "./input.controllers.js";
+import E from "./input.styles.js";
+var A = Object.defineProperty, C = Object.getOwnPropertyDescriptor, i = (m, e, r, n) => {
+  for (var o = n > 1 ? void 0 : n ? C(e, r) : e, l = m.length - 1, u; l >= 0; l--)
+    (u = m[l]) && (o = (n ? u(e, r, o) : u(o)) || o);
+  return n && o && A(e, r, o), o;
 };
-const m = class m extends c {
+const p = class p extends v {
   constructor() {
     super(), this.buttonAriaLabelClear = "Clear input", this.buttonAriaLabelHide = "Hide password", this.buttonAriaLabelShow = "Show password", this.debug = !1, this.hideLabel = !1, this.inputmode = "text", this.size = "md", this.type = "text", this.validateOn = "change", this.value = "", this.invalid = !1, this._buttonDown = !1, this._handleInput = () => {
-      this.value = this.$input.value || "", this.validateOn === "input" && (this.pristine = !1, this.validateInput());
+      this.value = this.$input.value || "", this.validateOn === "input" && (this._pristine = !1, this.validateInput());
     }, this._resetValue = (e) => {
       var r;
       e.stopPropagation(), this.value = ((r = this.getAttribute("value")) == null ? void 0 : r.trim()) ?? "", this._internals.setFormValue(this.value), this.$input.focus();
@@ -66,7 +67,7 @@ const m = class m extends c {
 		</button>
 	`, this._onBlur = () => {
       this._buttonDown && this.$input.focus();
-    }, this._numberController = new _(this), this._passwordController = new g(this);
+    }, this._numberController = new g(this), this._passwordController = new w(this);
   }
   set customInvalid(e) {
     this.customError = String(e);
@@ -76,9 +77,9 @@ const m = class m extends c {
   }
   firstUpdated() {
     this.$input.addEventListener("change", () => {
-      this.validateOn === "change" && (this.validateOn = "input", this.pristine = !1), this._internals.setFormValue(this.$input.value || ""), this.emitEvent("change"), this.validateInput();
+      this.validateOn === "change" && (this.validateOn = "input", this._pristine = !1), this._internals.setFormValue(this.$input.value || ""), this.emitEvent("change"), this.validateInput();
     }), this.addEventListener("invalid", (e) => {
-      this.pristine = !1, this.invalid = !0, this.customErrorDisplay && e.preventDefault();
+      this._pristine = !1, this.invalid = !0, this.customErrorDisplay && e.preventDefault();
     }), this.addEventListener("reset", this._resetValue), this.validateInput();
   }
   willUpdate(e) {
@@ -88,13 +89,13 @@ const m = class m extends c {
         const r = this._internals.validationMessage;
         this.hint = r !== "" ? this._internals.validationMessage : "", this.checkValidity();
       } else
-        this.removeAttribute("invalid"), !this.pristine && this.showValid && this.setAttribute("valid", "true"), this.hint = this.getAttribute("hint") ?? "";
+        this.removeAttribute("invalid"), !this._pristine && this.showValid && this.setAttribute("valid", "true"), this.hint = this.getAttribute("hint") ?? "";
   }
   attributeChangedCallback(e, r, n) {
     if (super.attributeChangedCallback(e, r, n), e === "value" && this._internals.setFormValue(n), e === "custom-invalid")
       if (typeof n == "string") {
         const l = String(n).trim();
-        this.pristine = !1, this._internals.setValidity({ customError: !0 }, l), this.invalid = !0, this.hint = l, this.checkValidity();
+        this._pristine = !1, this._internals.setValidity({ customError: !0 }, l), this.invalid = !0, this.hint = l, this.checkValidity();
       } else
         this._internals.setValidity({}), this.validateInput();
   }
@@ -105,7 +106,7 @@ const m = class m extends c {
     if (this.invalid = !1, r.valid)
       this._internals.setValidity({ customError: this._internals.validity.customError });
     else {
-      this.invalid = !this.pristine && !r.valid;
+      this.invalid = !this._pristine && !r.valid;
       let n;
       for (n in r) {
         const o = `data-${n.toString()}`;
@@ -129,7 +130,7 @@ const m = class m extends c {
 				<label>
 					<div class=${this.hideLabel ? "visually-hidden" : ""} id="label">
 						<slot>${this.label}</slot>
-						${this.required ? v(this.requiredLabel) : null}
+						${this.required ? y(this.requiredLabel) : null}
 					</div>
 					<div id="input">
 						${this.type === "search" ? h`<skf-icon name="search" size="sm"></skf-icon>` : d}
@@ -175,7 +176,7 @@ const m = class m extends c {
 					<skf-hint
 						aria-live=${this.invalid ? "assertive" : "polite"}
 						id="hint"
-						severity=${a(C(this.severity, this.invalid))}
+						severity=${a(c(this.severity, this.invalid))}
 						>${this.hint}
 					</skf-hint>
 				`}
@@ -183,8 +184,8 @@ const m = class m extends c {
 		`;
   }
 };
-m.styles = [y, w];
-let t = m;
+p.styles = [f, E];
+let t = p;
 i([
   s({ attribute: "button-aria-label-clear" })
 ], t.prototype, "buttonAriaLabelClear", 2);
@@ -270,11 +271,8 @@ i([
   b()
 ], t.prototype, "_buttonDown", 2);
 i([
-  f("input")
+  _("input")
 ], t.prototype, "$input", 2);
-function C(u, e) {
-  return e ? "error" : u;
-}
 export {
   t as SkfInput
 };

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

@@ -0,0 +1,138 @@
+import { FormBase } from '@internal/components/formBase.js';
+import type { FormFieldBaseProps } from '@internal/types/formField.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 { DeveloperFeedbackController, GlobalClickController, KeyboardNavigationController, ResizeController, ScrollController } 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
+ *
+ * TODO: Fix the popover positioning, it should be relative to the button, not the window (low priority since we have solution and is it possible at all on something in #toplayer)
+ */
+/**
+ * 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
+ *
+ * @attribute {Boolean} [disabled] - If true, the select is disabled	`default: false`
+ *
+ * @slot - The select's placeholder content
+ * @slot icon - The select's slot for custom meta information
+ *
+ * @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
+ *
+ * @tagname skf-select
+ */
+export declare class SkfSelect extends FormBase {
+    static styles: CSSResultGroup;
+    /** @internal */
+    selectDelay: number;
+    /** @internal */
+    _optionsList: SkfSelectOption[];
+    /** Sets the first visible text on the component */
+    buttonLabel: string;
+    /** If defined, forces component to invalid state until removed */
+    customInvalid?: string;
+    /** If true, hides the label visually */
+    hideLabel?: boolean;
+    /** If true and mulltiple is true, no tags are displayed under the select */
+    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 */
+    get getSelectedValues(): string[];
+    /** A readonly property that returns the selected slot(s) text content in a array */
+    get getSelectedOptionsText(): (string | null)[];
+    /** Sets the visible label of the select in the form */
+    label: string;
+    /** If defined, limits the number of selectable options */
+    max?: number;
+    /** If defined, sets the minimum number of required options */
+    min?: number;
+    /** If provided, allows for multiple options to be selected */
+    multiple?: boolean;
+    /** If provided, 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'];
+    /** If provided, displays valid state after interaction */
+    showValid?: boolean;
+    /** Size of the Select */
+    size: 'sm' | 'md';
+    /** Read only, returns the selected value. (if multiple: in a comma separated string) */
+    get value(): string;
+    /** @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. */
+    set selectedOptions(option: SkfSelectOption[]);
+    /** @internal */
+    get selectedOptions(): SkfSelectOption[];
+    /** @internal */
+    _expanded: boolean;
+    /** @internal */
+    /** True if the internal state is invalid  */
+    private _invalid;
+    /** @internal */
+    private $selectBtn?;
+    /** @internal */
+    private $selectedValue?;
+    /** @internal */
+    private $dropdown?;
+    /** @internal */
+    protected scrollController: ScrollController;
+    /** @internal */
+    protected resizeController: ResizeController;
+    /** @internal */
+    protected globalClickController: GlobalClickController;
+    /** @internal */
+    protected keyboardNavController: KeyboardNavigationController;
+    /** @internal */
+    protected developerFeedbackController: DeveloperFeedbackController;
+    constructor();
+    willUpdate(changedProperties: Map<string | number | symbol, unknown>): void;
+    firstUpdated(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    disconnectedCallback(): void;
+    /** @internal */
+    _handleOptionSelected: EventListener;
+    /** @internal */
+    _updateState(event: CustomEvent<SelectOptionEvent>): void;
+    /** @internal */
+    _handleReset: () => void;
+    /** @internal */
+    onUpdateComplete(): Promise<string>;
+    /** @internal */
+    /** Filter out elements other than skf-select-option and store in this._optionsList */
+    _collectSlotOptionTags(): void;
+    /** @internal */
+    _updateWidth: () => void;
+    /** @internal */
+    /** this runs only from the 'updated' lifecycle, by setting source-of-truth _expanded=false */
+    private _managePopover;
+    /** @internal */
+    _handleDropdownToggle: (e: Event) => void;
+    /** @internal
+     * Sets the value of the select component based on the selected options.
+     * Also closes the dropdown if not multiple.
+     */
+    _setValue: () => Promise<unknown>;
+    /** @internal */
+    _resetSelectedOptions: (target?: SkfSelectOption) => void;
+    /** @internal */
+    _handleSlotChange: () => void;
+    /** @internal */
+    _computeVisibleValue: () => string;
+    /** @internal */
+    private _validateInput;
+    render(): import("lit").TemplateResult<1>;
+}

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

@@ -0,0 +1,311 @@
+import { computePosition as f, flip as _, shift as v, offset as g } from "@floating-ui/dom";
+import { FormBase as b } from "../../internal/components/formBase.js";
+import { findMatchingTags as y } from "../../internal/helpers/findMatchingTags.js";
+import { hintSeverity as O } from "../../internal/helpers/hintSeverity.js";
+import { raiseError as S } from "../../internal/helpers/raiseError.js";
+import { Asterisk as w } from "../../internal/templates/asterisk.js";
+import x from "../../styles/component.styles.js";
+import { html as h, nothing as $ } from "lit";
+import { property as r, state as d, query as p } from "lit/decorators.js";
+import { classMap as V } 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 { ScrollController as C, ResizeController as A, GlobalClickController as E, KeyboardNavigationController as k, DeveloperFeedbackController as L } from "./select.controllers.js";
+import { styles as P } from "./select.styles.js";
+var D = Object.defineProperty, M = Object.getOwnPropertyDescriptor, l = (u, t, e, s) => {
+  for (var o = s > 1 ? void 0 : s ? M(t, e) : t, a = u.length - 1, n; a >= 0; a--)
+    (n = u[a]) && (o = (s ? n(t, e, o) : n(o)) || o);
+  return s && o && D(t, e, o), o;
+};
+const c = class c extends b {
+  constructor() {
+    super(), this.selectDelay = 50, this._optionsList = [], this.buttonLabel = "Select an option", this.label = "Default label", this.size = "md", this._expanded = !1, this._invalid = !1, this.scrollController = new C(this), this.resizeController = new A(this), this.globalClickController = new E(this), this.keyboardNavController = new k(this), this.developerFeedbackController = new L(this), this._handleOptionSelected = (t) => {
+      this._pristine = !1;
+      const e = this._selectedOptions.length > 0;
+      this.setFormValue(e ? this.getSelectedValues.join(",") : null), this._updateState(t);
+    }, this._handleReset = () => {
+      this.emitEvent("reset"), this._resetSelectedOptions();
+    }, this._updateWidth = () => {
+      setTimeout(() => {
+        var t;
+        (t = this.$dropdown) == null || t.style.setProperty("--select-width", `${String(this.offsetWidth)}px`);
+      }, 50);
+    }, this._managePopover = () => ({ close: () => {
+      var s;
+      (s = this.$dropdown) == null || s.hidePopover();
+    }, open: () => {
+      const s = this.$selectBtn, o = this.$dropdown;
+      !s || !o || (o.showPopover(), f(s, o, {
+        placement: "bottom",
+        middleware: [_(), v({ padding: 5 }), g(2)]
+      }).then(({ x: a, y: n }) => {
+        Object.assign(o.style, {
+          left: `${String(a)}px`,
+          top: `${String(Math.round(n - window.scrollY))}px`
+        });
+      }).catch((a) => {
+        console.error(a);
+      }));
+    } }), this._handleDropdownToggle = (t) => {
+      t.stopPropagation(), this._expanded = !this._expanded;
+    }, this._setValue = async () => new Promise((t) => {
+      switch (!0) {
+        case this._selectedOptions.length === 0:
+          this.setFormValue(null), this.requestUpdate();
+          break;
+        case this._selectedOptions.length === 1:
+          this.setFormValue(this.getSelectedValues[0]);
+          break;
+        case this._selectedOptions.length > 1:
+          this.setFormValue(this.getSelectedValues.join(","));
+          break;
+        default:
+          throw new Error("Something went wrong");
+      }
+      this.emitEvent("change"), this._validateInput(), this.$selectedValue && (this.$selectedValue.animate([{ opacity: 0.5 }, { opacity: 1 }], this.selectDelay).onfinish = () => {
+        this.multiple || (this._expanded = !1), t("done");
+      });
+    }), this._resetSelectedOptions = (t) => {
+      const e = !t;
+      this._optionsList.forEach((s) => {
+        (e || s !== t) && s.removeAttribute("selected");
+      });
+    }, this._handleSlotChange = () => {
+      this._collectSlotOptionTags(), this._validateInput();
+    }, this._computeVisibleValue = () => {
+      var t, e;
+      return (t = this.$selectedValue) == null || t.classList.add("contains-meta-info"), this._selectedOptions.length > 1 ? `(${String(this._selectedOptions.length)} items selected)` : this.value ? ((e = this.$selectedValue) == null || e.classList.remove("contains-meta-info"), this.value) : this.buttonLabel;
+    }, this._selectedOptions = [];
+  }
+  get getSelectedValues() {
+    return this._selectedOptions.map((t) => t.value.trim());
+  }
+  get getSelectedOptionsText() {
+    return this._selectedOptions.map((t) => t.textContent);
+  }
+  get value() {
+    return this._selectedOptions.length ? this._selectedOptions.length === 1 ? this._selectedOptions[0].value.trim() : this._selectedOptions.map((t) => t.value.trim()).join(",") : "";
+  }
+  set selectedOptions(t) {
+    if (!t.length) {
+      this._selectedOptions = [];
+      return;
+    }
+    this._selectedOptions = t;
+  }
+  /** @internal */
+  get selectedOptions() {
+    return this._selectedOptions;
+  }
+  willUpdate(t) {
+    if (t.has("_expanded")) {
+      const e = !!t.get("_expanded") && !this._expanded;
+      this._pristine && e && (this._pristine = !1);
+    }
+    if (t.has("_invalid"))
+      if (this._invalid) {
+        this.setAttribute("invalid", ""), this.showValid && this.removeAttribute("valid");
+        const e = this._internals.validationMessage;
+        this.hint = e !== "" ? this._internals.validationMessage : "", this.checkValidity(), this.emitEvent("invalid");
+      } else
+        this.removeAttribute("invalid"), !this._pristine && this.showValid && this.setAttribute("valid", "true"), this.hint = this.getAttribute("hint") ?? "";
+  }
+  firstUpdated() {
+    var t;
+    this.addEventListener("skf-select-option:select", this._handleOptionSelected), (t = this._internals.form) == null || t.addEventListener("reset", this._handleReset), this.onUpdateComplete(), this._collectSlotOptionTags(), this._validateInput();
+  }
+  updated(t) {
+    var e, s;
+    if (t.has("_expanded")) {
+      const o = !!t.get("_expanded") === this._expanded;
+      if (this.emit("skf-select:dropdown", { detail: { expanded: this._expanded } }), o) return;
+      this._expanded ? ((e = this.$selectBtn) == null || e.setAttribute("aria-expanded", "true"), this._managePopover().open()) : ((s = this.$selectBtn) == null || s.setAttribute("aria-expanded", "false"), this._managePopover().close());
+    }
+  }
+  attributeChangedCallback(t, e, s) {
+    if (super.attributeChangedCallback(t, e, s), t === "custom-invalid")
+      if (typeof s == "string") {
+        const a = String(s).trim() || "Custom error";
+        this._pristine = !1, this._invalid = !0, this.setValidity({ customError: !0 }, a), this.checkValidity();
+      } else
+        this.setValidity({}), this._validateInput();
+  }
+  disconnectedCallback() {
+    var t;
+    super.disconnectedCallback(), (t = this._internals.form) == null || t.removeEventListener("reset", this._handleReset);
+  }
+  /** @internal */
+  _updateState(t) {
+    if (this.multiple)
+      this._selectedOptions = [], this._optionsList.forEach((e) => {
+        e.selected && (this.selectedOptions = [...this.selectedOptions, e]);
+      });
+    else {
+      const e = this._selectedOptions.length > 0, s = t.detail.value !== null;
+      e && (this._selectedOptions[0].setSelectedDiscrete = !1, this._selectedOptions = []), s && (this.selectedOptions = [t.target]);
+    }
+    this._setValue();
+  }
+  /** @internal */
+  async onUpdateComplete() {
+    return await this.updateComplete, this._updateWidth(), "done";
+  }
+  /** @internal */
+  /** Filter out elements other than skf-select-option and store in this._optionsList */
+  _collectSlotOptionTags() {
+    this._optionsList = y(this, "skf-select-option"), this._selectedOptions = this._optionsList.filter((t) => t.selected), S({
+      assert: this._optionsList.length > 0,
+      reason: "no-children",
+      replaceStrings: [this.localName, "skf-select-option"]
+    });
+  }
+  /** @internal */
+  _validateInput() {
+    this._invalid = !1;
+    const t = this.required && !this.getSelectedValues.length || this.min === 1, e = !!(this.min && this.getSelectedValues.length < this.min), s = !!(this.max && this.getSelectedValues.length > this.max);
+    if (this._internals.validity.customError) {
+      this._invalid = !0;
+      return;
+    } else if (t) {
+      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 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 (s) {
+      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");
+  }
+  render() {
+    return h`
+			<div id="select">
+				<label>
+					<div class=${this.hideLabel ? "visually-hidden" : ""} id="label">
+						${this.label}
+						${this.required ? w(this.requiredLabel) : null}
+					</div>
+					<button
+						?disabled=${this.disabled}
+						@click=${this._handleDropdownToggle}
+						aria-controls="select-dropdown"
+						aria-expanded="false"
+						aria-haspopup="listbox"
+						id="select-button"
+						role="combobox"
+					>
+						<span
+							id="selected-value"
+							class=${V({ "selected-value": !0, "contains-meta-info": !this.value })}>
+							${this._computeVisibleValue()}
+						</span>
+						<skf-icon class="arrow" name="chevronDown"></skf-icon>
+					</button>
+				</label>
+				<div aria-multiselectable=${m(this.multiple && !0)} id="select-dropdown" popover role="listbox">
+					<slot @slotchange=${this._handleSlotChange}></slot>
+				</div>
+				${!this.hideTags && this.multiple ? h`
+								<div id="tags">
+									${this.selectedOptions.map(
+      (t) => h`
+											<skf-tag
+												removable
+												.onRemove=${(e) => (e.stopPropagation(), e.preventDefault(), t.removeAttribute("selected"), !1)}
+											>
+												${t.textContent}
+											</skf-tag>
+										`
+    )}
+								</div>
+							` : $}
+				${this.hint && h`
+						<skf-hint
+							aria-live=${this._invalid ? "assertive" : "polite"}
+							id="hint"
+							severity=${m(O(this.severity, this._invalid))}
+						>
+							${this.hint}
+						</skf-hint>
+					`}
+				</div>
+			</div>
+		`;
+  }
+};
+c.styles = [x, P];
+let i = c;
+l([
+  r({ type: String, reflect: !0, attribute: "button-label" })
+], i.prototype, "buttonLabel", 2);
+l([
+  r({ attribute: "custom-invalid" })
+], i.prototype, "customInvalid", 2);
+l([
+  r({ type: Boolean, attribute: "hide-label" })
+], i.prototype, "hideLabel", 2);
+l([
+  r({ type: Boolean, reflect: !0, attribute: "hide-tags" })
+], i.prototype, "hideTags", 2);
+l([
+  r()
+], i.prototype, "hint", 2);
+l([
+  r({ type: Array, attribute: !1 })
+], i.prototype, "getSelectedValues", 1);
+l([
+  r({ type: Array, attribute: !1 })
+], i.prototype, "getSelectedOptionsText", 1);
+l([
+  r({ reflect: !0 })
+], i.prototype, "label", 2);
+l([
+  r({ type: Number })
+], i.prototype, "max", 2);
+l([
+  r({ type: Number })
+], i.prototype, "min", 2);
+l([
+  r({ type: Boolean, reflect: !0 })
+], i.prototype, "multiple", 2);
+l([
+  r()
+], i.prototype, "name", 2);
+l([
+  r({ attribute: "required-label" })
+], i.prototype, "requiredLabel", 2);
+l([
+  r()
+], i.prototype, "severity", 2);
+l([
+  r({ type: Boolean, attribute: "show-valid" })
+], i.prototype, "showValid", 2);
+l([
+  r({ reflect: !0 })
+], i.prototype, "size", 2);
+l([
+  d()
+], i.prototype, "value", 1);
+l([
+  d()
+], i.prototype, "selectedOptions", 1);
+l([
+  d()
+], i.prototype, "_expanded", 2);
+l([
+  d()
+], i.prototype, "_invalid", 2);
+l([
+  p("#select-button")
+], i.prototype, "$selectBtn", 2);
+l([
+  p("#selected-value")
+], i.prototype, "$selectedValue", 2);
+l([
+  p("#select-dropdown")
+], i.prototype, "$dropdown", 2);
+export {
+  i as SkfSelect
+};

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

@@ -0,0 +1,59 @@
+import type { SkfSelectOption } from '@components/select-option/select-option.component.js';
+import type { ReactiveController } from 'lit';
+import type { SkfSelect } from './select.component.js';
+type ControllerHost = SkfSelect;
+export declare class ScrollController implements ReactiveController {
+    _scrollHandler?: () => void;
+    host?: ControllerHost;
+    localExpanded: boolean;
+    constructor(host: ControllerHost);
+    hostDisconnected(): void;
+    hostUpdated(): void;
+    enableScrollDetection(): void;
+    disableScrollDetection(): void;
+    /** @internal */
+    _onScrollOutOfView(): void;
+    /** @internal */
+    _onScrollIntoView(): void;
+}
+export declare class ResizeController implements ReactiveController {
+    host: ControllerHost;
+    _resizeObserver?: ResizeObserver;
+    constructor(host: ControllerHost);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    enableResizeObserver(): void;
+    disableResizeObserver(): void;
+    /** @internal */
+    _onResize: () => void;
+}
+export declare class GlobalClickController implements ReactiveController {
+    host: ControllerHost;
+    constructor(host: ControllerHost);
+    hostDisconnected(): void;
+    hostUpdated(): void;
+    _globalClickHandler: (event: MouseEvent) => void;
+    enableGlobalClickDetection(): void;
+    disableGlobalClickDetection(): void;
+}
+export declare class KeyboardNavigationController implements ReactiveController {
+    host: ControllerHost;
+    _listenerActivated: boolean;
+    constructor(host: ControllerHost);
+    hostDisconnected(): void;
+    hostUpdated(): void;
+    setupKeyboardListener(): void;
+    removeKeyboardListener(): void;
+    _handleKeyDown: (event: KeyboardEvent) => void;
+    _focusFirstOption(): void;
+    _focusSiblingOption(dir: 'next' | 'prev'): void;
+    _selectFocusedOption(target: SkfSelectOption): void;
+    get _selectableOptions(): SkfSelectOption[];
+}
+export declare class DeveloperFeedbackController implements ReactiveController {
+    host: ControllerHost;
+    constructor(host: ControllerHost);
+    hostConnected(): void;
+    _badAttributeCombinationWarning(): void;
+}
+export {};