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

package/README.md

@@ -1,13 +1,33 @@
 <div align="center">
-   <!--img alt="Ferris Logotype" src="./.github/assets/ferris_logo_dark.svg" width="128"/ -->
 
 # SKF UI Components
 
-<p>
-   <a href="https://teams.microsoft.com/l/team/19%3a15d8521717e14c419998b0fed71289a5%40thread.tacv2/conversations?groupId=286b39ed-ed94-43da-8a3f-383319f6c9dc&tenantId=41875f2b-33e8-4670-92a8-f643afbb243a">MS Teams</a> |
-   <a href="https://develop--661e8ae0ef9b24dadeea9b18.chromatic.com/">Storybook Beta</a> |
-   <a href="https://github.com/SKF-Internal/ui-components/issues" target="_blank">Report Issues</a>
-   </p>
+</div>
+
+<div align="center">
+  <a href="https://www.npmjs.com/package/@skf-design-system/ui-components">
+    <img alt="NPM Version" src="https://img.shields.io/npm/v/%40skf-design-system%2Fui-components?style=for-the-badge&logo=npm">
+  </a>
+</div>
+
+---
+
+<div align="center">
+  <a href="https://codesandbox.io/p/sandbox/exciting-leftpad-hz6sgm">
+    <img alt="CodeSandbox" src="https://img.shields.io/badge/Codesandbox-040404?style=for-the-badge&logo=codesandbox&logoColor=DBDBDB" />
+  </a>
+  <a href="https://github.com/SKF-Internal/ui-components/issues">
+    <img alt="GitHub - Issues" src="https://img.shields.io/badge/Issues-%23121011.svg?style=for-the-badge&logo=github&logoColor=white" />
+  </a>
+  <a href="https://teams.microsoft.com/l/team/19%3A15d8521717e14c419998b0fed71289a5%40thread.tacv2/conversations?groupId=286b39ed-ed94-43da-8a3f-383319f6c9dc&tenantId=41875f2b-33e8-4670-92a8-f643afbb243a">
+    <img alt="MS Teams" src="https://img.shields.io/badge/MS Teams-4E5FBF?style=for-the-badge&logo=windows&logoColor=white">
+  </a>
+  <a href="https://beta--641c13cdbf6bbfbd6da88a83.chromatic.com">
+    <img alt="Storybook - Stable" src="https://img.shields.io/badge/Stable-FF4785?style=for-the-badge&logo=storybook&logoColor=white">
+  </a>
+  <a href="https://zeroheight.com/853e936c9/p/07d378-component-overview">
+    <img alt="Storybook - Beta" src="https://img.shields.io/badge/zeroheight-F63E7C?style=for-the-badge">
+  </a>
 </div>
 
 ## Introduction

package/dist/components/alert/alert.component.js

@@ -1,30 +1,32 @@
 import "../icon/icon.js";
-import { SkfElement as c } from "../../internal/components/skf-element.js";
+import { SkfElement as d } from "../../internal/components/skf-element.js";
 import b from "../../styles/component.styles.js";
-import { html as d, nothing as f } from "lit";
+import { html as p, nothing as f } from "lit";
 import { property as o } from "lit/decorators.js";
-import { ifDefined as r } from "lit/directives/if-defined.js";
-import h from "./alert.styles.js";
-var u = Object.defineProperty, i = (n, a, m, y) => {
-  for (var t = void 0, s = n.length - 1, p; s >= 0; s--)
-    (p = n[s]) && (t = p(a, m, t) || t);
-  return t && u(a, m, t), t;
+import { ifDefined as s } from "lit/directives/if-defined.js";
+import u from "./alert.styles.js";
+var h = Object.defineProperty, i = (n, a, m, y) => {
+  for (var t = void 0, r = n.length - 1, c; r >= 0; r--)
+    (c = n[r]) && (t = c(a, m, t) || t);
+  return t && h(a, m, t), t;
 };
-const l = class l extends c {
+const l = class l extends d {
   constructor() {
-    super(...arguments), this.buttonLabel = "Close", this._handleClose = () => this.emit("skf-alert-close");
+    super(...arguments), this.buttonLabel = "Close", this._handleClose = () => {
+      this.emit("skf-alert-close");
+    };
   }
   render() {
-    return d`
+    return p`
 			<div
 				id="root"
 				aria-describedby="main"
-				aria-modal=${r(this.closeable && "true")}
+				aria-modal=${s(this.closeable && "true")}
 				role=${this.closeable ? "alertdialog" : "alert"}
 			>
 				<skf-icon
-					color=${r(this.severity ?? "secondary")}
-					name=${r(this.icon)}
+					color=${s(this.severity ?? "secondary")}
+					name=${s(this.icon)}
 					size="sm"
 				></skf-icon>
 				<div id="body">
@@ -33,7 +35,7 @@ const l = class l extends c {
 					</div>
 					<slot name="link"></slot>
 				</div>
-				${this.closeable ? d`
+				${this.closeable ? p`
 							<button @click="${this._handleClose}" aria-label=${this.buttonLabel} type="button">
 								<skf-icon name="close" size="sm"></skf-icon>
 							</button>
@@ -42,10 +44,10 @@ const l = class l extends c {
 		`;
   }
 };
-l.styles = [b, h];
+l.styles = [b, u];
 let e = l;
 i([
-  o({ type: Boolean })
+  o({ type: Boolean, reflect: !0 })
 ], e.prototype, "closeable");
 i([
   o({ attribute: "button-label" })
@@ -54,7 +56,7 @@ i([
   o()
 ], e.prototype, "icon");
 i([
-  o()
+  o({ reflect: !0 })
 ], e.prototype, "severity");
 export {
   e as SkfAlert

package/dist/components/alert/alert.styles.js

@@ -1,61 +1,64 @@
 import { css as r } from "lit";
 const s = r`
-	:host {
-		contain: layout;
-	}
-
-	#root {
-		background-color: var(--_skf-alert-bg-color, var(--skf-bg-color-neutral-2));
-		border: var(--skf-border-width-sm) solid
-			var(--_skf-alert-border-color, var(--skf-border-color-primary));
-		border-radius: var(--skf-border-radius-sm);
-		box-shadow: var(--skf-shadow-md);
-		display: flex;
-		font-size: var(--skf-font-size-75);
-		gap: var(--skf-spacing-50);
-		padding-block: var(--skf-spacing-75);
-		padding-inline: var(--skf-spacing-50);
-
-		:host([severity='alert']) & {
-			--_skf-alert-bg-color: var(--skf-severity-bg-color-alert);
-			--_skf-alert-border-color: var(--skf-severity-fg-color-alert);
+	@layer components {
+		:host {
+			contain: layout;
 		}
 
-		:host([severity='error']) & {
-			--_skf-alert-bg-color: var(--skf-severity-bg-color-error);
-			--_skf-alert-border-color: var(--skf-severity-fg-color-error);
-		}
+		#root {
+			background-color: var(--_skf-alert-bg-color, var(--skf-bg-color-neutral-2));
+			border: var(--skf-border-width-sm) solid
+				var(--_skf-alert-border-color, var(--skf-border-color-primary));
+			border-radius: var(--skf-border-radius-sm);
+			box-shadow: var(--skf-shadow-md);
+			display: flex;
+			font-size: var(--skf-font-size-75);
+			gap: var(--skf-spacing-50);
+			padding-block: var(--skf-spacing-75);
+			padding-inline: var(--skf-spacing-50);
 
-		:host([severity='info']) & {
-			--_skf-alert-bg-color: var(--skf-severity-bg-color-info);
-			--_skf-alert-border-color: var(--skf-severity-fg-color-info);
-		}
+			:host([severity='alert']) & {
+				--_skf-alert-bg-color: var(--skf-severity-bg-color-alert);
+				--_skf-alert-border-color: var(--skf-severity-fg-color-alert);
+			}
 
-		:host([severity='success']) & {
-			--_skf-alert-bg-color: var(--skf-severity-bg-color-success);
-			--_skf-alert-border-color: var(--skf-severity-fg-color-success);
-		}
+			:host([severity='error']) & {
+				--_skf-alert-bg-color: var(--skf-severity-bg-color-error);
+				--_skf-alert-border-color: var(--skf-severity-fg-color-error);
+			}
+
+			:host([severity='info']) & {
+				--_skf-alert-bg-color: var(--skf-severity-bg-color-info);
+				--_skf-alert-border-color: var(--skf-severity-fg-color-info);
+			}
+
+			:host([severity='success']) & {
+				--_skf-alert-bg-color: var(--skf-severity-bg-color-success);
+				--_skf-alert-border-color: var(--skf-severity-fg-color-success);
+			}
 
-		:host([severity='warning']) & {
-			--_skf-alert-bg-color: var(--skf-severity-bg-color-warning);
-			--_skf-alert-border-color: var(--skf-severity-fg-color-warning);
+			:host([severity='warning']) & {
+				--_skf-alert-bg-color: var(--skf-severity-bg-color-warning);
+				--_skf-alert-border-color: var(--skf-severity-fg-color-warning);
+			}
 		}
-	}
 
-	#body {
-		display: flex;
-		flex: auto;
-		flex-wrap: wrap;
-		gap: var(--skf-spacing-25) var(--skf-spacing-100);
-		justify-content: space-between;
-	}
+		#body {
+			display: flex;
+			flex: auto;
+			flex-wrap: wrap;
+			gap: var(--skf-spacing-25) var(--skf-spacing-100);
+			justify-content: space-between;
+		}
 
-	::slotted(skf-link) {
-		text-transform: uppercase;
-	}
+		::slotted(skf-link) {
+			text-transform: uppercase;
+		}
 
-	button {
-		display: inline-flex;
+		button {
+			cursor: pointer;
+			display: inline-flex;
+		}
 	}
 `;
 export {

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

@@ -14,6 +14,7 @@ export declare class SkfButton extends SkfElement {
     static styles: CSSResultGroup;
     /** @internal */
     private _transitionOptions;
+    _internals: ElementInternals;
     /** If true, gives destructive appearance. **Notice!** Only applicable if `variant` is `primary`. */
     destructive: boolean;
     /** If true, removes border */
@@ -38,6 +39,7 @@ export declare class SkfButton extends SkfElement {
     private $loader?;
     /** @internal */
     private $body?;
+    constructor();
     protected firstUpdated(_changedProperties: PropertyValues): void;
     attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
     private _showLoader;

package/dist/components/button/button.component.js

@@ -6,17 +6,17 @@ import { html as d } from "lit";
 import { property as e, state as m, query as f } from "lit/decorators.js";
 import { ifDefined as y } from "lit/directives/if-defined.js";
 import u from "./button.styles.js";
-var _ = Object.defineProperty, i = (p, o, r, a) => {
-  for (var s = void 0, n = p.length - 1, h; n >= 0; n--)
-    (h = p[n]) && (s = h(o, r, s) || s);
+var _ = Object.defineProperty, i = (h, o, r, a) => {
+  for (var s = void 0, n = h.length - 1, p; n >= 0; n--)
+    (p = h[n]) && (s = p(o, r, s) || s);
   return s && _(o, r, s), s;
 };
 const l = class l extends c {
   constructor() {
-    super(...arguments), this._transitionOptions = {
+    super(), this._transitionOptions = {
       duration: 200,
       fill: "forwards"
-    }, this.destructive = !1, this.disabled = !1, this.iconPosition = "left", this.loading = !1, this.size = "md", this.type = "button", this.variant = "primary", this._loaderVisible = !1, this._renderIcon = () => d`<skf-icon class="skf-icon-host" name=${y(this.icon)}></skf-icon>`;
+    }, this.destructive = !1, this.disabled = !1, this.iconPosition = "left", this.loading = !1, this.size = "md", this.type = "button", this.variant = "primary", this._loaderVisible = !1, this._renderIcon = () => d`<skf-icon class="skf-icon-host" name=${y(this.icon)}></skf-icon>`, this._internals = this.attachInternals();
   }
   firstUpdated(o) {
     if (o.has("loading") && this.loading) {

package/dist/components/checkbox/checkbox.styles.js

@@ -10,10 +10,15 @@ const i = [
 
 			#root {
 				align-items: center;
+				color: var(--_skf-checkbox-color, var(--skf-text-color-primary));
 				display: grid;
 				grid-gap: var(--skf-spacing-50);
 				grid-template: 'input label' / auto minmax(0, 1fr);
 
+				:host([disabled]) & {
+					--_skf-checkbox-color: var(--skf-interactive-text-color-disabled);
+				}
+
 				:host([size='sm']) & {
 					--_skf-checkbox-size: var(--skf-size-20);
 
@@ -57,7 +62,7 @@ const i = [
 				}
 
 				:host([valid]) & {
-					--_skf-checkbox-border-color: var(--skf-severity-fg-color-error);
+					--_skf-checkbox-border-color: var(--skf-severity-fg-color-success);
 				}
 
 				:host([severity='alert']:not([invalid], [valid])) & {

package/dist/components/icon/icon.styles.js

@@ -1,73 +1,75 @@
 import { css as o } from "lit";
 const r = o`
-	:host {
-		display: inline-flex;
-	}
+	@layer components {
+		:host {
+			display: inline-flex;
+		}
 
-	#root {
-		--_skf-icon-size: var(--skf-icon-size-md);
+		#root {
+			--_skf-icon-size: var(--skf-icon-size-md);
 
-		block-size: var(--_skf-icon-size);
-		color: var(--_skf-icon-color, var(--skf-icon-color-primary));
-		display: inline-flex;
-		flex-shrink: 0; /* Prevents shrink when flex-child */
-		inline-size: var(--_skf-icon-size);
-		pointer-events: none;
-		user-select: none;
+			block-size: var(--_skf-icon-size);
+			color: var(--_skf-icon-color, var(--skf-icon-color-primary));
+			display: inline-flex;
+			flex-shrink: 0; /* Prevents shrink when flex-child */
+			inline-size: var(--_skf-icon-size);
+			pointer-events: none;
+			user-select: none;
 
-		:host-context(.skf-icon-host) & {
-			color: inherit;
-		}
+			:host-context(.skf-icon-host) & {
+				color: inherit;
+			}
 
-		/**
-		* Colors
-		*/
-		:host([color='secondary']) & {
-			--_skf-icon-color: var(--skf-icon-color-secondary);
-		}
+			/**
+			 * Colors
+			 */
+			:host([color='secondary']) & {
+				--_skf-icon-color: var(--skf-icon-color-secondary);
+			}
 
-		:host([color='inverse']) & {
-			--_skf-icon-color: var(--skf-icon-color-inverse);
-		}
+			:host([color='inverse']) & {
+				--_skf-icon-color: var(--skf-icon-color-inverse);
+			}
 
-		:host([color='emphasised']) & {
-			--_skf-icon-color: var(--skf-icon-color-emphasised);
-		}
+			:host([color='emphasised']) & {
+				--_skf-icon-color: var(--skf-icon-color-emphasised);
+			}
 
-		/* Severity */
-		:host([color='alert']) & {
-			--_skf-icon-color: var(--skf-severity-fg-color-alert);
-		}
+			/* Severity */
+			:host([color='alert']) & {
+				--_skf-icon-color: var(--skf-severity-fg-color-alert);
+			}
 
-		:host([color='error']) & {
-			--_skf-icon-color: var(--skf-severity-fg-color-error);
-		}
+			:host([color='error']) & {
+				--_skf-icon-color: var(--skf-severity-fg-color-error);
+			}
 
-		:host([color='info']) & {
-			--_skf-icon-color: var(--skf-severity-fg-color-info);
-		}
+			:host([color='info']) & {
+				--_skf-icon-color: var(--skf-severity-fg-color-info);
+			}
 
-		:host([color='success']) & {
-			--_skf-icon-color: var(--skf-severity-fg-color-success);
-		}
+			:host([color='success']) & {
+				--_skf-icon-color: var(--skf-severity-fg-color-success);
+			}
 
-		:host([color='warning']) & {
-			--_skf-icon-color: var(--skf-severity-fg-color-warning);
-		}
+			:host([color='warning']) & {
+				--_skf-icon-color: var(--skf-severity-fg-color-warning);
+			}
 
-		/**
-		* Sizes
-		*/
-		:host([size='xs']) & {
-			--_skf-icon-size: var(--skf-icon-size-xs);
-		}
+			/**
+			 * Sizes
+			 */
+			:host([size='xs']) & {
+				--_skf-icon-size: var(--skf-icon-size-xs);
+			}
 
-		:host([size='sm']) & {
-			--_skf-icon-size: var(--skf-icon-size-sm);
-		}
+			:host([size='sm']) & {
+				--_skf-icon-size: var(--skf-icon-size-sm);
+			}
 
-		:host([size='lg']) & {
-			--_skf-icon-size: var(--skf-icon-size-lg);
+			:host([size='lg']) & {
+				--_skf-icon-size: var(--skf-icon-size-lg);
+			}
 		}
 	}
 `;

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

@@ -55,6 +55,11 @@ export declare class SkfInput extends FormBase implements FormFieldBaseProps {
     minLength?: number;
     /** If defined, adds name to the input-element */
     name?: string;
+    /**
+     * @internal
+     * If true, hide empty label element
+     */
+    protected _noLabel: boolean | undefined;
     /** If defined, adds name to the input-element */
     pattern?: string;
     /** If defined, displays placeholder text */
@@ -91,6 +96,8 @@ export declare class SkfInput extends FormBase implements FormFieldBaseProps {
     /** @internal */
     $input: HTMLInputElement;
     /** @internal */
+    _defaultSlot: Node[];
+    /** @internal */
     private _numberController;
     /** @internal */
     private _passwordController;
@@ -124,5 +131,7 @@ export declare class SkfInput extends FormBase implements FormFieldBaseProps {
     private _renderSearchButton;
     /** @internal */
     private _onBlur;
+    /** @internal */
+    _handleSlotChange: () => void;
     render(): import("lit").TemplateResult<1>;
 }

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

@@ -1,23 +1,23 @@
 import "../icon/icon.js";
-import { FormBase as c } from "../../internal/components/formBase.js";
+import { FormBase as b } from "../../internal/components/formBase.js";
 import "../../internal/components/hint/hint.js";
 import { hintSeverity as v } 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 _ } from "lit/decorators.js";
+import { property as s, state as p, query as _, queryAssignedNodes 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 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;
+import { live as g } from "lit/directives/live.js";
+import { InputNumberController as w, InputPasswordController as E } from "./input.controllers.js";
+import C from "./input.styles.js";
+var S = Object.defineProperty, L = Object.getOwnPropertyDescriptor, i = (c, e, r, n) => {
+  for (var o = n > 1 ? void 0 : n ? L(e, r) : e, l = c.length - 1, u; l >= 0; l--)
+    (u = c[l]) && (o = (n ? u(e, r, o) : u(o)) || o);
+  return n && o && S(e, r, o), o;
 };
-const p = class p extends c {
+const m = class m extends b {
   constructor() {
-    super(...arguments), this.buttonAriaLabelClear = "Clear input", this.buttonAriaLabelHide = "Hide password", this.buttonAriaLabelShow = "Show password", this.inputmode = "text", this.size = "md", this.type = "text", this.validateOn = "change", this.value = "", this.invalid = !1, this._buttonDown = !1, this._numberController = new g(this), this._passwordController = new w(this), this._handleInput = () => {
+    super(...arguments), this.buttonAriaLabelClear = "Clear input", this.buttonAriaLabelHide = "Hide password", this.buttonAriaLabelShow = "Show password", this.inputmode = "text", this.size = "md", this.type = "text", this.validateOn = "change", this.value = "", this.invalid = !1, this._buttonDown = !1, this._numberController = new w(this), this._passwordController = new E(this), this._handleInput = () => {
       this.value = this.$input.value || "", this.validateOn === "input" && (this._pristine = !1, this.validateInput());
     }, this._resetValue = (e) => {
       var r;
@@ -36,7 +36,7 @@ const p = class p extends c {
 			@mouseup=${this._handlePressEnd}
 			@mouseleave=${this._handlePressEnd}
 			aria-label="${e === "inc" ? "Increment" : "Decrement"}"
-			class="number"
+			class="number skf-icon-host"
 			type="button"
 		>
 			<skf-icon name="${e === "inc" ? "chevronUp" : "chevronDown"}" size="sm"></skf-icon>
@@ -45,7 +45,7 @@ const p = class p extends c {
 		<button
 			@click=${this._passwordController.toggleVisibility}
 			aria-label=${a(this._passwordController._buttonAriaLabel)}
-			class="password"
+			class="password skf-icon-host"
 			type="button"
 			@mousedown="${this._handlePressStart}"
 			@mouseup="${this._handlePressEnd}"
@@ -60,13 +60,16 @@ const p = class p extends c {
 			@mouseup=${this._handlePressEnd}
 			@mouseleave=${this._handlePressEnd}
 			aria-label=${a(this.buttonAriaLabelClear)}
-			class="search"
+			class="search skf-icon-host"
 			type="button"
 		>
 			<skf-icon name="close" size="sm"></skf-icon>
 		</button>
 	`, this._onBlur = () => {
       this._buttonDown && this.$input.focus();
+    }, this._handleSlotChange = () => {
+      var e, r;
+      console.log("slot change"), this._noLabel = (this._defaultSlot.length === 0 || !((r = (e = this._defaultSlot[0]) == null ? void 0 : e.textContent) != null && r.trim())) && !this.label;
     };
   }
   set customInvalid(e) {
@@ -80,7 +83,7 @@ const p = class p extends c {
       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.addEventListener("reset", this._resetValue), this.validateInput();
+    }), this.addEventListener("reset", this._resetValue), this._handleSlotChange(), this.validateInput();
   }
   willUpdate(e) {
     if (e.has("invalid"))
@@ -128,12 +131,12 @@ const p = class p extends c {
     return h`
 			<div id="root">
 				<label>
-					<div class=${this.hideLabel ? "visually-hidden" : ""} id="label">
-						<slot>${this.label}</slot>
+					<div class=${this.hideLabel ? "visually-hidden" : ""} ?hidden=${this._noLabel} id="label">
+						<slot @slotchange=${this._handleSlotChange}>${this.label}</slot>
 						${this.required ? y(this.requiredLabel) : null}
 					</div>
 					<div id="input">
-						${this.type === "search" ? h`<skf-icon name="search" size="sm"></skf-icon>` : d}
+						${this.type === "search" ? h`<skf-icon class="skf-icon-host" name="search" size="sm"></skf-icon>` : d}
 						<div
 							data-leading=${a(this.leading)}
 							data-trailing=${a(this.trailing)}
@@ -143,7 +146,7 @@ const p = class p extends c {
 								?disabled=${this.disabled}
 								?readonly=${this.readonly}
 								?required=${this.required}
-								.value=${$(this.value)}
+								.value=${g(this.value)}
 								@blur=${this._onBlur}
 								@input=${this._handleInput}
 								aria-describedby=${a((e = this.hint) != null && e.trim() ? "hint" : d)}
@@ -159,7 +162,6 @@ const p = class p extends c {
 								name=${a(this.name)}
 								pattern=${a(this.pattern)}
 								placeholder=${a(this.placeholder)}
-								title=""
 								type=${a(
       this.type === "password" ? this._passwordController._type : this.type
     )}
@@ -186,8 +188,8 @@ const p = class p extends c {
 		`;
   }
 };
-p.styles = [f, E];
-let t = p;
+m.styles = [f, C];
+let t = m;
 i([
   s({ attribute: "button-aria-label-clear" })
 ], t.prototype, "buttonAriaLabelClear", 2);
@@ -233,6 +235,9 @@ i([
 i([
   s()
 ], t.prototype, "name", 2);
+i([
+  p()
+], t.prototype, "_noLabel", 2);
 i([
   s()
 ], t.prototype, "pattern", 2);
@@ -267,14 +272,17 @@ i([
   s()
 ], t.prototype, "value", 2);
 i([
-  b()
+  p()
 ], t.prototype, "invalid", 2);
 i([
-  b()
+  p()
 ], t.prototype, "_buttonDown", 2);
 i([
   _("input")
 ], t.prototype, "$input", 2);
+i([
+  $({ flatten: !0 })
+], t.prototype, "_defaultSlot", 2);
 export {
   t as SkfInput
 };

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

@@ -1,6 +1,6 @@
 import { visuallyHidden as r } from "../../styles/util.styles.js";
 import { css as o } from "lit";
-const i = [
+const e = [
   r,
   o`
 		@layer components {
@@ -10,9 +10,14 @@ const i = [
 
 			#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);
 
@@ -94,5 +99,5 @@ const i = [
 	`
 ];
 export {
-  i as default
+  e as default
 };

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

@@ -44,9 +44,11 @@ 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)[];
+    set selectedOptionsText(values: string[]);
+    get selectedOptionsText(): string[];
     /** If defined, displays provided label */
     label?: string;
     /** If defined, limits the number of selectable options */
@@ -66,6 +68,7 @@ export declare class SkfSelect extends FormBase {
     /** Size of the Select */
     size: 'sm' | 'md';
     /** Read only, returns the selected value. (if multiple: in a comma separated string) */
+    set value(newValue: string);
     get value(): string;
     /** Stores the selected SkfSelectOption tag(s) in a array. Is the source of truth for the internal state. */
     /** @internal */