@skf-design-system/ui-components 1.0.2-beta.22 → 1.0.2-beta.23

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

@@ -3,8 +3,13 @@ const r = o`
 	/* stylelint-disable selector-class-pattern */
 	@layer components {
 		:host {
-			contain: initial;
-			display: inline-flex;
+			contain: paint style;
+			display: inline-block;
+		}
+
+		:host(:not([icon-only])) {
+			max-inline-size: min(100%, 23ch);
+			min-inline-size: 64px;
 		}
 
 		.btn {
@@ -14,13 +19,13 @@ const r = o`
 				var(--_skf-button-state-border-color, var(--_skf-button-border-color));
 			border-radius: var(--skf-border-radius-sm);
 			color: var(--_skf-button-state-color, var(--_skf-button-color));
+			display: inline-flex;
 			font-size: var(--_skf-button-font-size, var(--skf-font-size-100));
 			font-weight: var(--skf-font-weight-bold);
-			max-inline-size: min(100%, 23ch);
 			position: relative;
 
 			&:not(.btn--icon-only) {
-				min-inline-size: 64px;
+				inline-size: 100%;
 				padding-inline: var(--skf-spacing-100);
 			}
 
@@ -49,7 +54,6 @@ const r = o`
 
 		.btn--icon-only {
 			aspect-ratio: 1;
-			display: inherit;
 			place-content: center;
 		}
 
@@ -118,6 +122,7 @@ const r = o`
 			align-items: center;
 			display: flex;
 			gap: var(--skf-spacing-50);
+			min-inline-size: 0;
 		}
 
 		.btn__label {

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

@@ -107,6 +107,7 @@ export declare class SkfSelect extends FormBase {
     constructor();
     willUpdate(changedProperties: Map<string | number | symbol, unknown>): void;
     firstUpdated(): void;
+    /** @internal Handles updates to the size of the select-option component */
     _handleSizeUpdate(): void;
     /** @internal */
     _handleExpandedChange(): void;
@@ -122,8 +123,7 @@ export declare class SkfSelect extends FormBase {
     _handleReset: () => void;
     /** @internal */
     onUpdateComplete(): Promise<string>;
-    /** @internal */
-    /** Filter out elements other than skf-select-option and store in this._optionsList */
+    /** @internal Filter out elements other than skf-select-option and store in this._optionsList */
     _collectSlotOptionTags(): void;
     /** @internal */
     _updateWidth: () => void;

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

@@ -8,8 +8,8 @@ import "../tag/tag.js";
 import { computePosition as S, flip as C, shift as V, offset as $ } from "@floating-ui/dom";
 import { FormBase as L } from "../../internal/components/formBase.js";
 import "../../internal/components/hint/hint.js";
-import { PopoverController as k } from "../../internal/controllers/popover.controller.js";
-import { findMatchingTags as E } from "../../internal/helpers/findMatchingTags.js";
+import { PopoverController as E } from "../../internal/controllers/popover.controller.js";
+import { findMatchingTags as k } from "../../internal/helpers/findMatchingTags.js";
 import { hintSeverity as A } from "../../internal/helpers/hintSeverity.js";
 import { raiseError as I } from "../../internal/helpers/raiseError.js";
 import { watch as w } from "../../internal/helpers/watch.js";
@@ -17,22 +17,22 @@ import { Asterisk as D } from "../../internal/templates/asterisk.js";
 import { componentStyles as P } from "../../styles/component.styles.js";
 import { LocalizeController as F } from "../../utilities/localize.js";
 import { nothing as b, html as p } from "lit";
-import { property as a, state as c, query as m, queryAssignedElements as T } from "lit/decorators.js";
-import { classMap as z } from "lit/directives/class-map.js";
+import { property as n, state as c, query as m, queryAssignedElements as T } from "lit/decorators.js";
+import { classMap as U } from "lit/directives/class-map.js";
 import { ifDefined as O } from "lit/directives/if-defined.js";
-import { SkfSelectOption as U } from "./select-option.component.js";
-import { GlobalClickController as M, KeyboardNavigationController as N, DeveloperFeedbackController as H } from "./select.controllers.js";
-import { styles as q } from "./select.styles.js";
+import { SkfSelectOption as z } from "./select-option.component.js";
+import { GlobalClickController as M, KeyboardNavigationController as N, DeveloperFeedbackController as q } from "./select.controllers.js";
+import { styles as H } from "./select.styles.js";
 var R = Object.defineProperty, j = Object.getOwnPropertyDescriptor, s = (l, r, t, e) => {
-  for (var o = e > 1 ? void 0 : e ? j(r, t) : r, n = l.length - 1, h; n >= 0; n--)
-    (h = l[n]) && (o = (e ? h(r, t, o) : h(o)) || o);
+  for (var o = e > 1 ? void 0 : e ? j(r, t) : r, a = l.length - 1, h; a >= 0; a--)
+    (h = l[a]) && (o = (e ? h(r, t, o) : h(o)) || o);
   return e && o && R(r, t, o), o;
 }, d;
 const f = class f extends L {
   constructor() {
     super();
     g(this, d);
-    y(this, d, new F(this)), this._componentIsConnected = !1, this.selectDelay = 200, this._optionsList = [], this.hideLabel = !1, this.hideTags = !1, this.label = "", this.lang = "en", this.multiple = !1, this.showValid = !1, this.size = "md", this._expanded = !1, this._invalid = !1, this.globalClickController = new M(this), this.keyboardNavController = new N(this), this.developerFeedbackController = new H(this), this.popoverController = new k(this), this._handleOptionSelected = ((t) => {
+    y(this, d, new F(this)), this._componentIsConnected = !1, this.selectDelay = 200, this._optionsList = [], this.hideLabel = !1, this.hideTags = !1, this.label = "", this.lang = "en", this.multiple = !1, this.showValid = !1, this.size = "md", this._expanded = !1, this._invalid = !1, this.globalClickController = new M(this), this.keyboardNavController = new N(this), this.developerFeedbackController = new q(this), this.popoverController = new E(this), this._handleOptionSelected = ((t) => {
       this._pristine = !1;
       const e = this._selectedOptions.length > 0;
       this.setFormValue(e ? this.selectedValues.join(",") : null), this._updateState(t);
@@ -78,14 +78,14 @@ const f = class f extends L {
         (e || o !== t) && o.removeAttribute("selected");
       }), this._optionsList = [];
     }, this._handleSlotChange = () => {
-      this._handleSizeUpdate(), this._collectSlotOptionTags(), this._ifValueIsSetSelectOption(), this._validateInput(), this._componentIsConnected = !0, this.emit("skf-select-connected");
+      this._handleSizeUpdate(), this._collectSlotOptionTags(), this._ifValueIsSetSelectOption(), this._validateInput(), this._componentIsConnected = !0, this.emit("skf-select-connected"), this.requestUpdate();
     }, this._ifValueIsSetSelectOption = () => {
       if (this.value)
         if (this.multiple) {
           const t = this.value.split(",").map((e) => e.toLowerCase().trim());
           this._optionsList.forEach((e) => {
-            t.includes(e.value.toLowerCase().trim()) ? (e.setSelectedDiscrete = !0, this.selectedOptions = [...this.selectedOptions, e]) : (e.setSelectedDiscrete = !1, this._selectedOptions = this._selectedOptions.filter(
-              (o) => o.value.toLowerCase().trim() !== e.value.toLowerCase().trim()
+            t.includes(e.value.toLowerCase().trim()) ? (e.setSelectedDiscrete = !0, this._selectedOptions = [.../* @__PURE__ */ new Set([...this._selectedOptions, e])]) : (e.setSelectedDiscrete = !1, this._selectedOptions = this._selectedOptions.filter(
+              (a) => a.value.toLowerCase().trim() !== e.value.toLowerCase().trim()
             ));
           }), this._setValue().catch((e) => {
             console.error(e);
@@ -114,11 +114,11 @@ const f = class f extends L {
   }
   set value(t) {
     let e = [];
-    this._componentIsConnected && (this.multiple ? e = t.split(",").map((n) => n.toLowerCase().trim()) : e = [t.toLowerCase().trim()], this._selectedOptions = this._optionsList.filter(
-      (n) => e.includes(n.value.toLowerCase().trim())
-    ), this._optionsList.forEach((n) => {
-      n.selected && (n.setSelectedDiscrete = !1);
-    }), this._selectedOptions.forEach((n) => n.setSelectedDiscrete = !0)), this._setValue();
+    this._componentIsConnected && (this.multiple ? e = t.split(",").map((a) => a.toLowerCase().trim()) : e = [t.toLowerCase().trim()], this._selectedOptions = this._optionsList.filter(
+      (a) => e.includes(a.value.toLowerCase().trim())
+    ), this._optionsList.forEach((a) => {
+      a.selected && (a.setSelectedDiscrete = !1);
+    }), this._selectedOptions.forEach((a) => a.setSelectedDiscrete = !0)), this._setValue();
   }
   get value() {
     return this._selectedOptions.length ? this._selectedOptions.length === 1 ? this._selectedOptions[0].value.trim() : this._selectedOptions.map((t) => t.value.trim()).join(",") : "";
@@ -152,7 +152,7 @@ const f = class f extends L {
   }
   _handleSizeUpdate() {
     this._slottedItems.forEach((t) => {
-      (t instanceof U || t instanceof x) && (t.small = this.size === "sm");
+      (t instanceof z || t instanceof x) && (t.small = this.size === "sm");
     });
   }
   _handleExpandedChange() {
@@ -195,10 +195,9 @@ const f = class f extends L {
   async onUpdateComplete() {
     return await this.updateComplete, this._updateWidth(), "done";
   }
-  /** @internal */
-  /** Filter out elements other than skf-select-option and store in this._optionsList */
+  /** @internal Filter out elements other than skf-select-option and store in this._optionsList */
   _collectSlotOptionTags() {
-    this._optionsList = E(this, "skf-select-option"), this._selectedOptions = this._optionsList.filter((t) => t.selected), I({
+    this._optionsList = k(this, "skf-select-option"), this._selectedOptions = this._optionsList.filter((t) => t.selected), I({
       assert: this._optionsList.length > 0,
       reason: "no-children",
       replaceStrings: [this.localName, "skf-select-option"]
@@ -244,7 +243,7 @@ const f = class f extends L {
 					>
 						<span
 							id="selected-value"
-							class=${z({ "selected-value": !0, "contains-meta-info": !this.value })}>
+							class=${U({ "selected-value": !0, "contains-meta-info": !this.value })}>
 							${this._computeVisibleValue()}
 						</span>
 						<skf-icon class="arrow" data-color="custom" name="chevronDown"></skf-icon>
@@ -285,58 +284,58 @@ const f = class f extends L {
 		`;
   }
 };
-d = new WeakMap(), f.styles = [P, q];
+d = new WeakMap(), f.styles = [P, H];
 let i = f;
 s([
-  a({ type: String, attribute: "custom-invalid" })
+  n({ type: String, attribute: "custom-invalid" })
 ], i.prototype, "customInvalid", 2);
 s([
-  a({ type: Boolean, attribute: "hide-label" })
+  n({ type: Boolean, attribute: "hide-label" })
 ], i.prototype, "hideLabel", 2);
 s([
-  a({ type: Boolean, reflect: !0, attribute: "hide-tags" })
+  n({ type: Boolean, reflect: !0, attribute: "hide-tags" })
 ], i.prototype, "hideTags", 2);
 s([
-  a({ type: String })
+  n({ type: String })
 ], i.prototype, "hint", 2);
 s([
-  a({ type: Array, attribute: !1 })
+  n({ type: Array, attribute: !1 })
 ], i.prototype, "selectedValues", 1);
 s([
-  a({ type: Array, attribute: !1 })
+  n({ type: Array, attribute: !1 })
 ], i.prototype, "selectedOptionsText", 1);
 s([
-  a({ type: String, reflect: !0 })
+  n({ type: String, reflect: !0 })
 ], i.prototype, "label", 2);
 s([
-  a({ type: String })
+  n({ type: String })
 ], i.prototype, "lang", 2);
 s([
-  a({ type: Number })
+  n({ type: Number })
 ], i.prototype, "max", 2);
 s([
-  a({ type: Number, attribute: "max-visible-items" })
+  n({ type: Number, attribute: "max-visible-items" })
 ], i.prototype, "maxVisibleItems", 2);
 s([
-  a({ type: Number })
+  n({ type: Number })
 ], i.prototype, "min", 2);
 s([
-  a({ type: Boolean, reflect: !0 })
+  n({ type: Boolean, reflect: !0 })
 ], i.prototype, "multiple", 2);
 s([
-  a({ type: String })
+  n({ type: String })
 ], i.prototype, "name", 2);
 s([
-  a()
+  n()
 ], i.prototype, "severity", 2);
 s([
-  a({ type: Boolean, attribute: "show-valid" })
+  n({ type: Boolean, attribute: "show-valid" })
 ], i.prototype, "showValid", 2);
 s([
-  a({ reflect: !0 })
+  n({ reflect: !0 })
 ], i.prototype, "size", 2);
 s([
-  a({ type: String, attribute: !1 })
+  n({ type: String, attribute: !1 })
 ], i.prototype, "value", 1);
 s([
   c()

package/dist/custom-elements.json

@@ -1210,124 +1210,6 @@
       ],
       "typeDefinitionPath": "components/button/button.d.ts"
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/card/card.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "The `<skf-card>` can be used to group related subjects in a container\n\nSee [zeroheight](https://zeroheight.com/853e936c9/p/021eed-card) for design principles",
-          "name": "SkfCard",
-          "cssProperties": [
-            {
-              "description": "Ability to set a custom background color",
-              "name": "--mod-card-bg-color"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The card's main content",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "#internals",
-              "privacy": "private",
-              "type": {
-                "text": "ElementInternals"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "#states",
-              "privacy": "private",
-              "type": {
-                "text": "CustomStateSet"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "noBorder",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "If true, removes border",
-              "attribute": "no-border"
-            },
-            {
-              "kind": "field",
-              "name": "noPadding",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "If true, removes padding",
-              "attribute": "no-padding"
-            },
-            {
-              "kind": "field",
-              "name": "stretch",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "If true, the Card fills the parent element height",
-              "attribute": "stretch"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "no-border",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "If true, removes border",
-              "fieldName": "noBorder"
-            },
-            {
-              "name": "no-padding",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "If true, removes padding",
-              "fieldName": "noPadding"
-            },
-            {
-              "name": "stretch",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "If true, the Card fills the parent element height",
-              "fieldName": "stretch"
-            }
-          ],
-          "superclass": {
-            "name": "SkfElement",
-            "package": "@internal/components/skf-element.js"
-          },
-          "tagName": "skf-card",
-          "customElement": true,
-          "modulePath": "src/components/card/card.component.ts"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "SkfCard",
-          "declaration": {
-            "name": "SkfCard",
-            "module": "src/components/card/card.component.ts"
-          }
-        }
-      ],
-      "typeDefinitionPath": "components/card/card.d.ts"
-    },
     {
       "kind": "javascript-module",
       "path": "components/checkbox/checkbox.js",
@@ -1613,6 +1495,124 @@
       ],
       "typeDefinitionPath": "components/checkbox/checkbox.d.ts"
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/card/card.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The `<skf-card>` can be used to group related subjects in a container\n\nSee [zeroheight](https://zeroheight.com/853e936c9/p/021eed-card) for design principles",
+          "name": "SkfCard",
+          "cssProperties": [
+            {
+              "description": "Ability to set a custom background color",
+              "name": "--mod-card-bg-color"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The card's main content",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "#internals",
+              "privacy": "private",
+              "type": {
+                "text": "ElementInternals"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#states",
+              "privacy": "private",
+              "type": {
+                "text": "CustomStateSet"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "noBorder",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If true, removes border",
+              "attribute": "no-border"
+            },
+            {
+              "kind": "field",
+              "name": "noPadding",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If true, removes padding",
+              "attribute": "no-padding"
+            },
+            {
+              "kind": "field",
+              "name": "stretch",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If true, the Card fills the parent element height",
+              "attribute": "stretch"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "no-border",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If true, removes border",
+              "fieldName": "noBorder"
+            },
+            {
+              "name": "no-padding",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If true, removes padding",
+              "fieldName": "noPadding"
+            },
+            {
+              "name": "stretch",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If true, the Card fills the parent element height",
+              "fieldName": "stretch"
+            }
+          ],
+          "superclass": {
+            "name": "SkfElement",
+            "package": "@internal/components/skf-element.js"
+          },
+          "tagName": "skf-card",
+          "customElement": true,
+          "modulePath": "src/components/card/card.component.ts"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SkfCard",
+          "declaration": {
+            "name": "SkfCard",
+            "module": "src/components/card/card.component.ts"
+          }
+        }
+      ],
+      "typeDefinitionPath": "components/card/card.d.ts"
+    },
     {
       "kind": "javascript-module",
       "path": "components/datepicker/datepicker-calendar.js",
@@ -6253,13 +6253,6 @@
               },
               "privacy": "private"
             },
-            {
-              "kind": "method",
-              "name": "_handleSizeUpdate",
-              "type": {
-                "text": "_handleSizeUpdate() => void"
-              }
-            },
             {
               "kind": "field",
               "name": "_selectedOptions",