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

package/dist/components/logo/logo.component.js

@@ -1,12 +1,12 @@
 import { SkfElement as i } from "../../internal/components/skf-element.js";
 import m from "../../styles/component.styles.js";
 import { html as n } from "lit";
-import { property as v } from "lit/decorators.js";
+import { property as l } from "lit/decorators.js";
 import a from "./logo.styles.js";
-var d = Object.defineProperty, s = (h, o, l, f) => {
-  for (var c = void 0, r = h.length - 1, p; r >= 0; r--)
-    (p = h[r]) && (c = p(o, l, c) || c);
-  return c && d(o, l, c), c;
+var d = Object.defineProperty, s = (h, o, p, f) => {
+  for (var c = void 0, r = h.length - 1, v; r >= 0; r--)
+    (v = h[r]) && (c = v(o, p, c) || c);
+  return c && d(o, p, c), c;
 };
 const e = class e extends i {
   constructor() {
@@ -14,7 +14,7 @@ const e = class e extends i {
   }
   render() {
     return n`
-			<svg id="logo" viewBox="0 0 1300 300" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px">
+			<svg id="root" viewBox="0 0 1300 300" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px">
 				<title>${this.title}</title>
 				<g>
 					<g>
@@ -58,10 +58,10 @@ c0,5.8-4.3,6.1-9.1,6.1H1230.9z"
 e.styles = [m, a];
 let t = e;
 s([
-  v()
+  l()
 ], t.prototype, "title");
 s([
-  v()
+  l()
 ], t.prototype, "color");
 export {
   t as SkfLogo

package/dist/components/logo/logo.styles.js

@@ -1,10 +1,10 @@
 import { css as o } from "lit";
 const r = o`
 	:host {
-		display: contents;
+		display: inline-flex;
 	}
 
-	#logo {
+	#root {
 		aspect-ratio: 13 / 3;
 		block-size: var(--skf-logo-height, var(--skf-size-32));
 		fill: var(--_skf-logo-color, var(--skf-logo-primary));

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

@@ -5,40 +5,42 @@ import { type CSSResultGroup } from 'lit';
 /**
  * The `<skf-radio>` component is used to create a radio input
  *
- * @documentation See [InVision DSM](https://skf.invisionapp.com/dsm/ab-skf/4-web-applications/nav/5fa7caf78c01200018354495/asset/6229d63d9fe16020a60657e5) for design principles
+ * @documentation 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
  *
  * @event change {object} - When the value of the input changes
  *
- * @slot Default -  Alternatively, you can use the `label` attribute
+ * @slot - The radios label. Alternatively, you can use the `label` attribute.
  *
  * @tagname skf-radio
  */
 export declare class SkfRadio extends FormBase implements FormFieldBaseProps {
     static styles: CSSResultGroup;
-    /** @internal */
     private _initialChecked;
-    /** If provided, outputs helping hints in console */
-    debug?: boolean | undefined;
+    /** If true, outputs helping hints in console */
+    debug?: boolean;
     /** If true, outputs helping hints in console */
     checked?: boolean;
     /** If true, forces component to invalid state until removed */
     customInvalid?: boolean;
     /** If true, hides the label visually */
-    hideLabel: boolean;
-    /** The input's label. Alternatively, you can use the `label` attribute. */
+    hideLabel?: boolean;
+    /** If defined, sets the input's label unless the default slot is used. Alternatively, you can use the `label` attribute. */
     label?: string;
-    /** If provided, adds name to the input-element */
+    /** If defined, adds name to the input-element */
     name?: string;
-    /** If provided, renders an alternative A11y text for the asterisk */
+    /** If defined, renders an alternative A11y text for the asterisk */
     requiredLabel?: string;
-    /** If provided, displays an alternative size */
-    size?: 'sm' | 'md';
-    /** If provided, displays provided severity state */
+    /** Size of the Radio */
+    size: 'sm' | 'md';
+    /**
+     * If defined, displays provided severity state
+     * @type {"success" | "info" | "warning" | "alert"}
+     */
     severity?: FormFieldBaseProps['severity'];
-    /** If provided, displays valid state after interaction */
+    /** If true, displays valid state after interaction */
     showValid?: boolean;
     /** The current value of the input field  */
     value: string;

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

@@ -14,7 +14,7 @@ var k = Object.defineProperty, i = (n, t, r, l) => {
 };
 const d = class d extends u {
   constructor() {
-    super(...arguments), this._initialChecked = !1, this.debug = !1, this.hideLabel = !1, this.size = "md", this.value = "", this._invalid = !1, this._resetValue = (t) => {
+    super(...arguments), this._initialChecked = !1, this.size = "md", this.value = "", this._invalid = !1, this._resetValue = (t) => {
       t.stopPropagation(), this.checked = this._initialChecked, this.$input && (this.$input.checked = !!this._initialChecked), this.setFormValue(this.checked ? this.value : "");
     };
   }
@@ -70,7 +70,7 @@ const d = class d extends u {
   }
   render() {
     return m`
-			<label id="radio">
+			<label id="root">
 				<input
 					?disabled=${this.disabled}
 					?required=${this.required}
@@ -115,7 +115,7 @@ i([
   a({ reflect: !0 })
 ], e.prototype, "size");
 i([
-  a({ reflect: !0 })
+  a()
 ], e.prototype, "severity");
 i([
   a({ type: Boolean, attribute: "show-valid" })

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

@@ -8,11 +8,16 @@ const e = [
 				contain: initial;
 			}
 
-			#radio {
+			#root {
 				align-items: center;
+				color: var(--_skf-radio-color, var(--skf-text-color-primary));
 				display: flex;
 				grid-gap: var(--skf-spacing-50);
 
+				:host([disabled]) & {
+					--_skf-radio-color: var(--skf-interactive-text-color-disabled);
+				}
+
 				:host([size='sm']) & {
 					--_skf-radio-size: var(--skf-size-20);
 

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

@@ -15,10 +15,9 @@ import { DeveloperFeedbackController, GlobalClickController, KeyboardNavigationC
  *
  * @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`
+ * @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
@@ -45,31 +44,34 @@ export declare class SkfSelect extends FormBase {
     /** 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[];
+    set selectedValues(values: string[]);
+    get selectedValues(): 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;
+    set selectedOptionsText(values: string[]);
+    get selectedOptionsText(): string[];
+    /** If defined, displays provided label */
+    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 */
+    /** If true, allows for multiple options to be selected */
     multiple?: boolean;
-    /** If provided, set name of the component */
+    /** 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'];
-    /** If provided, displays valid state after interaction */
+    /** If true, 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) */
+    set value(newValue: string);
     get value(): string;
-    /** @internal */
     /** Stores the selected SkfSelectOption tag(s) in a array. Is the source of truth for the internal state. */
+    /** @internal */
     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

@@ -1,29 +1,29 @@
-import { computePosition as f, flip as _, shift as v, offset as g } from "@floating-ui/dom";
+import { computePosition as v, flip as _, shift as f, 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 { raiseError as w } from "../../internal/helpers/raiseError.js";
+import { Asterisk as x } from "../../internal/templates/asterisk.js";
+import $ from "../../styles/component.styles.js";
+import { html as h, nothing as S } from "lit";
+import { property as o, 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 { ScrollController as C, ResizeController as k, GlobalClickController as E, KeyboardNavigationController as L, DeveloperFeedbackController as A } 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;
+var D = Object.defineProperty, M = Object.getOwnPropertyDescriptor, l = (u, t, e, i) => {
+  for (var r = i > 1 ? void 0 : i ? M(t, e) : t, n = u.length - 1, a; n >= 0; n--)
+    (a = u[n]) && (r = (i ? a(t, e, r) : a(r)) || r);
+  return i && r && D(t, e, r), r;
 };
 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) => {
+    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 k(this), this.globalClickController = new E(this), this.keyboardNavController = new L(this), this.developerFeedbackController = new A(this), this._handleOptionSelected = (t) => {
       this._pristine = !1;
       const e = this._selectedOptions.length > 0;
-      this.setFormValue(e ? this.getSelectedValues.join(",") : null), this._updateState(t);
+      this.setFormValue(e ? this.selectedValues.join(",") : null), this._updateState(t);
     }, this._handleReset = () => {
       this.emitEvent("reset"), this._resetSelectedOptions();
     }, this._updateWidth = () => {
@@ -32,20 +32,20 @@ const c = class c extends b {
         (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();
+      var i;
+      (i = this.$dropdown) == null || i.hidePopover();
     }, open: () => {
-      const s = this.$selectBtn, o = this.$dropdown;
-      !s || !o || (o.showPopover(), f(s, o, {
+      const i = this.$selectBtn, r = this.$dropdown;
+      !i || !r || (r.showPopover(), v(i, r, {
         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`
+        middleware: [_(), f({ padding: 5 }), g(2)]
+      }).then(({ x: n, y: a }) => {
+        Object.assign(r.style, {
+          left: `${String(n)}px`,
+          top: `${String(Math.round(a - window.scrollY))}px`
         });
-      }).catch((a) => {
-        console.error(a);
+      }).catch((n) => {
+        console.error(n);
       }));
     } }), this._handleDropdownToggle = (t) => {
       t.stopPropagation(), this._expanded = !this._expanded;
@@ -55,10 +55,10 @@ const c = class c extends b {
           this.setFormValue(null), this.requestUpdate();
           break;
         case this._selectedOptions.length === 1:
-          this.setFormValue(this.getSelectedValues[0]);
+          this.setFormValue(this.selectedValues[0]);
           break;
         case this._selectedOptions.length > 1:
-          this.setFormValue(this.getSelectedValues.join(","));
+          this.setFormValue(this.selectedValues.join(","));
           break;
         default:
           throw new Error("Something went wrong");
@@ -68,8 +68,8 @@ const c = class c extends b {
       });
     }), this._resetSelectedOptions = (t) => {
       const e = !t;
-      this._optionsList.forEach((s) => {
-        (e || s !== t) && s.removeAttribute("selected");
+      this._optionsList.forEach((i) => {
+        (e || i !== t) && i.removeAttribute("selected");
       });
     }, this._handleSlotChange = () => {
       this._collectSlotOptionTags(), this._validateInput();
@@ -78,11 +78,23 @@ const c = class c extends b {
       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() {
+  set selectedValues(t) {
+    this._selectedOptions = this._optionsList.filter((e) => t.includes(e.value.trim()));
+  }
+  get selectedValues() {
     return this._selectedOptions.map((t) => t.value.trim());
   }
-  get getSelectedOptionsText() {
-    return this._selectedOptions.map((t) => t.textContent);
+  set selectedOptionsText(t) {
+    this._selectedOptions = this._selectedOptions.filter(
+      (e) => e.textContent && t.includes(e.textContent)
+    );
+  }
+  get selectedOptionsText() {
+    return this._selectedOptions.map((t) => t.textContent ?? "");
+  }
+  set value(t) {
+    const e = t.split(",").map((i) => i.trim());
+    this._selectedOptions = this._optionsList.filter((i) => e.includes(i.value.trim()));
   }
   get value() {
     return this._selectedOptions.length ? this._selectedOptions.length === 1 ? this._selectedOptions[0].value.trim() : this._selectedOptions.map((t) => t.value.trim()).join(",") : "";
@@ -113,21 +125,20 @@ 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._collectSlotOptionTags(), this._validateInput();
+    this.addEventListener("skf-select-option:select", this._handleOptionSelected), (t = this._internals.form) == null || t.addEventListener("reset", this._handleReset), this.onUpdateComplete(), 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());
+      const e = !!t.get("_expanded") === this._expanded;
+      if (this.emit("skf-select:dropdown", { detail: { expanded: this._expanded } }), e) return;
+      this._expanded ? this._managePopover().open() : 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();
+  attributeChangedCallback(t, e, i) {
+    if (super.attributeChangedCallback(t, e, i), t === "custom-invalid")
+      if (typeof i == "string") {
+        const n = String(i).trim() || "Custom error";
+        this._pristine = !1, this._invalid = !0, this.setValidity({ customError: !0 }, n), this.checkValidity();
       } else
         this.setValidity({}), this._validateInput();
   }
@@ -142,8 +153,8 @@ const c = class c extends b {
         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]);
+      const e = this._selectedOptions.length > 0, i = t.detail.value !== null;
+      e && (this._selectedOptions[0].setSelectedDiscrete = !1, this._selectedOptions = []), i && (this.selectedOptions = [t.target]);
     }
     this._setValue();
   }
@@ -154,7 +165,7 @@ const c = class c extends b {
   /** @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({
+    this._optionsList = y(this, "skf-select-option"), this._selectedOptions = this._optionsList.filter((t) => t.selected), w({
       assert: this._optionsList.length > 0,
       reason: "no-children",
       replaceStrings: [this.localName, "skf-select-option"]
@@ -163,36 +174,38 @@ const c = class c extends b {
   /** @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);
+    const t = this.required && !this.selectedValues.length || this.min === 1, e = !!(this.min && this.selectedValues.length < this.min), i = !!(this.max && this.selectedValues.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);
+      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 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);
+      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 (i) {
+      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="select">
+			<div id="root">
 				<label>
 					<div class=${this.hideLabel ? "visually-hidden" : ""} id="label">
 						${this.label}
-						${this.required ? w(this.requiredLabel) : null}
+						${this.required ? x(this.requiredLabel) : null}
 					</div>
 					<button
 						?disabled=${this.disabled}
 						@click=${this._handleDropdownToggle}
 						aria-controls="select-dropdown"
-						aria-expanded="false"
+						aria-expanded=${this._expanded}
+						aria-invalid=${this._invalid}
 						aria-haspopup="listbox"
+						class="skf-icon-host"
 						id="select-button"
 						role="combobox"
 					>
@@ -207,7 +220,7 @@ const c = class c extends b {
 				<div aria-multiselectable=${m(this.multiple && !0)} id="select-dropdown" popover role="listbox">
 					<slot @slotchange=${this._handleSlotChange}></slot>
 				</div>
-				${!this.hideTags && this.multiple ? h`
+				${!this.hideTags && this.multiple && this.selectedOptions.length > 0 ? h`
 								<div id="tags">
 									${this.selectedOptions.map(
       (t) => h`
@@ -220,14 +233,14 @@ const c = class c extends b {
 										`
     )}
 								</div>
-							` : $}
+							` : S}
 				${this.hint && h`
 						<skf-hint
 							aria-live=${this._invalid ? "assertive" : "polite"}
 							id="hint"
 							severity=${m(O(this.severity, this._invalid))}
 						>
-							${this.hint}
+							${this.customInvalid ? this.customInvalid : this.hint}
 						</skf-hint>
 					`}
 				</div>
@@ -235,77 +248,77 @@ const c = class c extends b {
 		`;
   }
 };
-c.styles = [x, P];
-let i = c;
+c.styles = [$, P];
+let s = c;
 l([
-  r({ type: String, reflect: !0, attribute: "button-label" })
-], i.prototype, "buttonLabel", 2);
+  o({ type: String, reflect: !0, attribute: "button-label" })
+], s.prototype, "buttonLabel", 2);
 l([
-  r({ attribute: "custom-invalid" })
-], i.prototype, "customInvalid", 2);
+  o({ attribute: "custom-invalid" })
+], s.prototype, "customInvalid", 2);
 l([
-  r({ type: Boolean, attribute: "hide-label" })
-], i.prototype, "hideLabel", 2);
+  o({ type: Boolean, attribute: "hide-label" })
+], s.prototype, "hideLabel", 2);
 l([
-  r({ type: Boolean, reflect: !0, attribute: "hide-tags" })
-], i.prototype, "hideTags", 2);
+  o({ type: Boolean, reflect: !0, attribute: "hide-tags" })
+], s.prototype, "hideTags", 2);
 l([
-  r()
-], i.prototype, "hint", 2);
+  o()
+], s.prototype, "hint", 2);
 l([
-  r({ type: Array, attribute: !1 })
-], i.prototype, "getSelectedValues", 1);
+  o({ type: Array, attribute: !1 })
+], s.prototype, "selectedValues", 1);
 l([
-  r({ type: Array, attribute: !1 })
-], i.prototype, "getSelectedOptionsText", 1);
+  o({ type: Array, attribute: !1 })
+], s.prototype, "selectedOptionsText", 1);
 l([
-  r({ reflect: !0 })
-], i.prototype, "label", 2);
+  o({ reflect: !0 })
+], s.prototype, "label", 2);
 l([
-  r({ type: Number })
-], i.prototype, "max", 2);
+  o({ type: Number })
+], s.prototype, "max", 2);
 l([
-  r({ type: Number })
-], i.prototype, "min", 2);
+  o({ type: Number })
+], s.prototype, "min", 2);
 l([
-  r({ type: Boolean, reflect: !0 })
-], i.prototype, "multiple", 2);
+  o({ type: Boolean, reflect: !0 })
+], s.prototype, "multiple", 2);
 l([
-  r()
-], i.prototype, "name", 2);
+  o()
+], s.prototype, "name", 2);
 l([
-  r({ attribute: "required-label" })
-], i.prototype, "requiredLabel", 2);
+  o({ attribute: "required-label" })
+], s.prototype, "requiredLabel", 2);
 l([
-  r()
-], i.prototype, "severity", 2);
+  o()
+], s.prototype, "severity", 2);
 l([
-  r({ type: Boolean, attribute: "show-valid" })
-], i.prototype, "showValid", 2);
+  o({ type: Boolean, attribute: "show-valid" })
+], s.prototype, "showValid", 2);
 l([
-  r({ reflect: !0 })
-], i.prototype, "size", 2);
+  o({ reflect: !0 })
+], s.prototype, "size", 2);
 l([
   d()
-], i.prototype, "value", 1);
+], s.prototype, "value", 1);
 l([
   d()
-], i.prototype, "selectedOptions", 1);
+], s.prototype, "selectedOptions", 1);
 l([
   d()
-], i.prototype, "_expanded", 2);
+], s.prototype, "_expanded", 2);
 l([
   d()
-], i.prototype, "_invalid", 2);
+], s.prototype, "_invalid", 2);
 l([
   p("#select-button")
-], i.prototype, "$selectBtn", 2);
+], s.prototype, "$selectBtn", 2);
 l([
   p("#selected-value")
-], i.prototype, "$selectedValue", 2);
+], s.prototype, "$selectedValue", 2);
 l([
   p("#select-dropdown")
-], i.prototype, "$dropdown", 2);
+], s.prototype, "$dropdown", 2);
 export {
-  i as SkfSelect
+  s as SkfSelect
 };

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

@@ -146,11 +146,14 @@ class _ {
   }
   _badAttributeCombinationWarning() {
     r({
-      assert: (this.host.min ?? 0) < (this.host.max ?? 1 / 0),
+      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),
+      assert: (
+        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+        (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({

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

@@ -1,19 +1,23 @@
 import { visuallyHidden as r } from "../../styles/util.styles.js";
-import { css as e } from "lit";
+import { css as o } from "lit";
 const t = [
   r,
-  e`
+  o`
 		@layer components {
 			:host {
 				contain: initial;
 			}
 
-			#select {
+			#root {
 				color: var(--_skf-select-color, var(--skf-text-color-primary));
 				display: flex;
 				flex-direction: column;
 				gap: var(--skf-spacing-25);
 
+				:host([disabled]) & {
+					--_skf-select-color: var(--skf-interactive-text-color-disabled);
+				}
+
 				:host([size='sm']) & {
 					font-size: var(--skf-font-size-75);
 					font-weight: var(--skf-font-weight-medium);
@@ -96,6 +100,16 @@ const t = [
 				}
 			}
 
+			skf-icon {
+				transform: var(--_skf-select-icon-transform, rotateX(0deg));
+				transform-origin: center;
+				transition: transform calc(var(--skf-motion-duration-normal) * 1ms) ease-out;
+
+				[aria-expanded='true'] & {
+					--_skf-select-icon-transform: rotateX(180deg);
+				}
+			}
+
 			#select-dropdown {
 				background-color: var(--skf-bg-color-neutral-1);
 				border: var(--skf-border-width-sm) solid var(--skf-border-color-tertiary);
@@ -106,6 +120,7 @@ const t = [
 
 			#tags {
 				display: flex;
+				flex-wrap: wrap;
 				gap: 0.5rem;
 			}
 		}