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

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

@@ -0,0 +1,311 @@
+import { computePosition as f, flip as v, shift as _, 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, n = u.length - 1, a; n >= 0; n--)
+    (a = u[n]) && (o = (s ? a(t, e, o) : a(o)) || o);
+  return s && o && D(t, e, o), o;
+};
+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.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: n, y: a }) => {
+        Object.assign(o.style, {
+          left: `${String(n)}px`,
+          top: `${String(Math.round(a - window.scrollY))}px`
+        });
+      }).catch((n) => {
+        console.error(n);
+      }));
+    } }), 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 n = String(s).trim() || "Custom error";
+        this._pristine = !1, this._invalid = !0, this.setValidity({ customError: !0 }, n), 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 n = this.hasAttribute("data-valuemissing") ? this.getAttribute("data-valuemissing") : "Please select an option";
+      this.setValidity({ valueMissing: !0 }, String(n)), this._pristine || (this._invalid = !0);
+    } else if (e) {
+      const n = this.hasAttribute("data-rangeunderflow") ? this.getAttribute("data-rangeunderflow") : `Please select minimum ${String(this.min)} options`;
+      this.setValidity({ rangeUnderflow: !0 }, String(n)), this._pristine || (this._invalid = !0);
+    } else if (s) {
+      const n = this.hasAttribute("data-rangeoverflow") ? this.getAttribute("data-rangeoverflow") : `Please select maximum ${String(this.max)} options`;
+      this.setValidity({ rangeOverflow: !0 }, String(n)), this._pristine || (this._invalid = !0);
+    } else
+      this.setValidity({}), !this._pristine && this.showValid && this.setAttribute("valid", "true");
+  }
+  render() {
+    return h`
+			<div id="root">
+				<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.customInvalid ? this.customInvalid : 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 {};

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

@@ -0,0 +1,169 @@
+import { raiseError as r } from "../../internal/helpers/raiseError.js";
+class d {
+  constructor(e) {
+    this.localExpanded = !1, this.host = e, e.addController(this);
+  }
+  hostDisconnected() {
+    this.disableScrollDetection();
+  }
+  hostUpdated() {
+    var e, t, s;
+    ((e = this.host) == null ? void 0 : e._expanded) !== this.localExpanded && (this.localExpanded = !!((t = this.host) != null && t._expanded), (s = this.host) != null && s._expanded ? this.enableScrollDetection() : this.disableScrollDetection());
+  }
+  enableScrollDetection() {
+    if (this._scrollHandler = () => {
+      if (!this.host) return;
+      this.host._expanded = !1;
+      const t = this.host.getBoundingClientRect();
+      t.top < 0 || t.bottom > window.innerHeight || t.left < 0 || t.right > window.innerWidth ? this._onScrollOutOfView() : this._onScrollIntoView();
+    }, window.addEventListener("scroll", this._scrollHandler, !0), !this.host) return;
+    let e = this.host.parentElement;
+    for (; e; )
+      (e.scrollHeight > e.clientHeight || e.scrollWidth > e.clientWidth) && e.addEventListener("scroll", this._scrollHandler, !0), e = e.parentElement;
+  }
+  disableScrollDetection() {
+    if (!this._scrollHandler || (window.removeEventListener("scroll", this._scrollHandler, !0), !this.host)) return;
+    let e = this.host.parentElement;
+    for (; e; )
+      (e.scrollHeight > e.clientHeight || e.scrollWidth > e.clientWidth) && e.removeEventListener("scroll", this._scrollHandler, !0), e = e.parentElement;
+  }
+  /** @internal */
+  _onScrollOutOfView() {
+    this.host && (this.host._expanded = !1);
+  }
+  /** @internal */
+  _onScrollIntoView() {
+  }
+}
+class b {
+  constructor(e) {
+    this._onResize = () => {
+      this.host._expanded = !1;
+    }, this.host = e, e.addController(this);
+  }
+  hostConnected() {
+    this.enableResizeObserver();
+  }
+  hostDisconnected() {
+    this.disableResizeObserver();
+  }
+  enableResizeObserver() {
+    this._resizeObserver = new ResizeObserver(() => {
+      this.host._expanded = !1, this.host._updateWidth();
+    }), this._resizeObserver.observe(document.body), this._resizeObserver.observe(this.host);
+  }
+  disableResizeObserver() {
+    var e;
+    (e = this._resizeObserver) == null || e.disconnect();
+  }
+}
+class p {
+  constructor(e) {
+    this._globalClickHandler = (t) => {
+      t.target.closest(this.host.localName) || (this.host._expanded = !1);
+    }, this.host = e, e.addController(this);
+  }
+  // hostConnected() {
+  // 	this.enableGlobalClickDetection();
+  // }
+  hostDisconnected() {
+    this.disableGlobalClickDetection();
+  }
+  hostUpdated() {
+    this.host._expanded ? this.enableGlobalClickDetection() : this.disableGlobalClickDetection();
+  }
+  enableGlobalClickDetection() {
+    document.addEventListener("click", this._globalClickHandler);
+  }
+  disableGlobalClickDetection() {
+    document.removeEventListener("click", this._globalClickHandler);
+  }
+}
+class u {
+  constructor(e) {
+    this._handleKeyDown = (t) => {
+      switch (t.key) {
+        case "ArrowDown":
+          t.preventDefault(), this._focusSiblingOption("next");
+          break;
+        case "ArrowUp":
+          t.preventDefault(), this._focusSiblingOption("prev");
+          break;
+        case "Enter":
+          t.preventDefault(), this._selectFocusedOption(t.target);
+          break;
+        case "Escape":
+          t.preventDefault(), this.host._expanded = !1, setTimeout(() => {
+            this.host.focus();
+          });
+          break;
+      }
+    }, this.host = e, e.addController(this), this._listenerActivated = !1;
+  }
+  hostDisconnected() {
+    this.removeKeyboardListener();
+  }
+  hostUpdated() {
+    this.host._expanded && !this._listenerActivated && this.setupKeyboardListener(), !this.host._expanded && this._listenerActivated && this.removeKeyboardListener();
+  }
+  setupKeyboardListener() {
+    this._listenerActivated = !0, this.host.addEventListener("keydown", this._handleKeyDown);
+  }
+  removeKeyboardListener() {
+    this.host.removeEventListener("keydown", this._handleKeyDown), this._listenerActivated = !1;
+  }
+  _focusFirstOption() {
+    const e = this._selectableOptions[0];
+    setTimeout(() => {
+      e.focus();
+    });
+  }
+  _focusSiblingOption(e) {
+    const t = (n) => n === document.activeElement, s = this._selectableOptions.find((n) => t(n));
+    if (!s) {
+      this._focusFirstOption();
+      return;
+    }
+    const h = this._selectableOptions.indexOf(s);
+    let o = h - 1, l = h + 1;
+    o < 0 && (o = this._selectableOptions.length - 1), l >= this._selectableOptions.length && (l = 0);
+    const a = this._selectableOptions[e === "next" ? l : o];
+    s.blur(), a.focus();
+  }
+  _selectFocusedOption(e) {
+    e.selected = !0;
+  }
+  get _selectableOptions() {
+    return this.host._optionsList.filter((e) => !e.disabled);
+  }
+}
+class _ {
+  constructor(e) {
+    this.host = e, e.addController(this);
+  }
+  hostConnected() {
+    this._badAttributeCombinationWarning();
+  }
+  _badAttributeCombinationWarning() {
+    r({
+      assert: (this.host.min ?? 0) < (this.host.max ?? 1 / 0),
+      reason: "attribute-mismatch",
+      replaceStrings: [this.host.localName, "min", "smaller than max"]
+    }), r({
+      assert: ((this.host.min ?? this.host.max) && this.host.multiple) ?? !(this.host.min && this.host.max),
+      reason: "attribute-mismatch",
+      replaceStrings: [this.host.localName, "min or max", "together with multiple"]
+    }), r({
+      assert: (this.host.hideTags && this.host.multiple) ?? !this.host.hideTags,
+      reason: "attribute-mismatch",
+      replaceStrings: [this.host.localName, "hide-tags", "together with multiple"]
+    });
+  }
+}
+export {
+  _ as DeveloperFeedbackController,
+  p as GlobalClickController,
+  u as KeyboardNavigationController,
+  b as ResizeController,
+  d as ScrollController
+};

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

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

package/dist/components/select/select.js

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

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

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

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

@@ -0,0 +1,116 @@
+import { visuallyHidden as r } from "../../styles/util.styles.js";
+import { css as o } from "lit";
+const t = [
+  r,
+  o`
+		@layer components {
+			:host {
+				contain: initial;
+			}
+
+			#root {
+				color: var(--_skf-select-color, var(--skf-text-color-primary));
+				display: flex;
+				flex-direction: column;
+				gap: var(--skf-spacing-25);
+
+				:host([size='sm']) & {
+					font-size: var(--skf-font-size-75);
+					font-weight: var(--skf-font-weight-medium);
+				}
+			}
+
+			label {
+				display: inherit;
+				flex-direction: inherit;
+				gap: var(--_skf-select-label-gap, var(--skf-spacing-50));
+
+				:host([size='sm']) & {
+					--_skf-select-label-gap: var(--skf-spacing-25);
+				}
+			}
+
+			#asterisk {
+				color: var(--skf-severity-fg-color-error);
+			}
+
+			button {
+				align-items: center;
+				background-color: var(
+					--_skf-select-button-bg-color,
+					var(--skf-interactive-bg-color-secondary)
+				);
+				block-size: var(--_skf-select-button-height, var(--skf-size-44));
+				border: var(--skf-border-width-sm) solid
+					var(--_skf-select-button-border-color, var(--skf-border-color-primary));
+				border-radius: var(--skf-border-radius-sm);
+				display: flex;
+				gap: 0 var(--skf-spacing-75);
+				justify-content: space-between;
+				padding-inline: var(--skf-spacing-75);
+
+				&:hover {
+					--_skf-select-button-bg-color: var(--skf-interactive-bg-color-secondary-hover);
+				}
+
+				&:active {
+					--_skf-select-button-bg-color: var(--skf-interactive-bg-color-secondary-active);
+				}
+
+				&:disabled {
+					--_skf-select-button-bg-color: var(--skf-interactive-bg-color-disabled);
+					--_skf-select-button-border-color: var(--skf-interactive-border-color-disabled);
+				}
+
+				:host([invalid]) & {
+					--_skf-select-button-border-color: var(--skf-severity-fg-color-error);
+				}
+
+				:host([valid]) & {
+					--_skf-select-button-border-color: var(--skf-severity-fg-color-success);
+				}
+
+				:host :has(:focus-visible) & {
+					outline: var(--skf-border-width-md) solid var(--skf-interactive-border-color-focus);
+					outline-offset: -1px;
+				}
+
+				:host([size='sm']) & {
+					--_skf-select-button-height: var(--skf-size-32);
+				}
+
+				:host([severity='alert']:not([invalid], [valid])) & {
+					--_skf-select-button-border-color: var(--skf-severity-fg-color-alert);
+				}
+
+				:host([severity='info']:not([invalid], [valid])) & {
+					--_skf-select-button-border-color: var(--skf-severity-fg-color-info);
+				}
+
+				:host([severity='success']:not([invalid], [valid])) & {
+					--_skf-select-button-border-color: var(--skf-severity-fg-color-success);
+				}
+
+				:host([severity='warning']:not([invalid], [valid])) & {
+					--_skf-select-button-border-color: var(--skf-severity-fg-color-warning);
+				}
+			}
+
+			#select-dropdown {
+				background-color: var(--skf-bg-color-neutral-1);
+				border: var(--skf-border-width-sm) solid var(--skf-border-color-tertiary);
+				box-shadow: var(--skf-shadow-sm); /* TODO: Discuss with design */
+				inline-size: var(--select-width, auto);
+				padding: var(--skf-spacing-25);
+			}
+
+			#tags {
+				display: flex;
+				gap: 0.5rem;
+			}
+		}
+	`
+];
+export {
+  t as styles
+};