@solid-design-system/components 1.36.0 → 1.37.1

package/dist/package/components/checkbox/checkbox.d.ts

@@ -4,6 +4,7 @@ import type { SolidFormControl } from '../../internal/solid-element';
 export default class SdCheckbox extends SolidElement implements SolidFormControl {
     private readonly formControlController;
     input: HTMLInputElement;
+    invalidMessage: HTMLDivElement;
     title: string;
     name: string;
     value: string;
@@ -14,6 +15,7 @@ export default class SdCheckbox extends SolidElement implements SolidFormControl
     defaultChecked: boolean;
     form: string;
     required: boolean;
+    showInvalidStyle: boolean;
     get validity(): ValidityState;
     firstUpdated(): void;
     private handleClick;

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

@@ -5,7 +5,7 @@ import { defaultValue } from "../../internal/default-value.js";
 import { FormControlController } from "../../internal/form.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { live } from "lit/directives/live.js";
-import { query, property } from "lit/decorators.js";
+import { query, property, state } from "lit/decorators.js";
 import { watch } from "../../internal/watch.js";
 import cx from "classix";
 import SolidElement from "../../internal/solid-element.js";
@@ -37,6 +37,7 @@ let SdCheckbox = class extends SolidElement {
     this.defaultChecked = false;
     this.form = "";
     this.required = false;
+    this.showInvalidStyle = false;
   }
   /** Gets the validity state object */
   get validity() {
@@ -59,6 +60,7 @@ let SdCheckbox = class extends SolidElement {
   handleInvalid(event) {
     this.formControlController.setValidity(false);
     this.formControlController.emitInvalidEvent(event);
+    this.invalidMessage.textContent = event.target.validationMessage;
   }
   handleFocus() {
     this.emit("sd-focus");
@@ -105,6 +107,7 @@ let SdCheckbox = class extends SolidElement {
     this.formControlController.updateValidity();
   }
   render() {
+    const checkboxState = this.disabled && this.indeterminate ? "disabledIndeterminate" : this.disabled && this.checked ? "disabledChecked" : this.disabled ? "disabled" : this.showInvalidStyle && this.indeterminate ? "invalidIndeterminate" : this.showInvalidStyle ? "invalid" : this.checked || this.indeterminate ? "filled" : "default";
     return html`<label part="base" class="${cx(
       "sd-checkbox group flex items-start text-base leading-normal text-black cursor-pointer",
       this.disabled && "hover:cursor-not-allowed",
@@ -121,20 +124,31 @@ let SdCheckbox = class extends SolidElement {
         sm: "mt-[2px]",
         lg: "mt-[3px]"
       }[this.size],
-      this.disabled && this.indeterminate && "border-neutral-500 bg-neutral-500" || this.disabled && this.checked && "border-neutral-500 bg-neutral-500" || this.disabled && "border-neutral-500" || (this.checked || this.indeterminate) && "border-accent hover:border-accent-550 group-hover:border-accent-550 bg-accent group-hover:bg-accent-550" || "border-neutral-800 hover:bg-neutral-200 group-hover:bg-neutral-200 bg-white"
+      {
+        disabledIndeterminate: "border-neutral-500 bg-neutral-500",
+        disabledChecked: "border-neutral-500 bg-neutral-500",
+        disabled: "border-neutral-500",
+        invalidIndeterminate: "border-error bg-error group-hover:bg-error-400",
+        invalid: "border-error group-hover:bg-neutral-200",
+        filled: "border-accent hover:border-accent-550 group-hover:border-accent-550 bg-accent group-hover:bg-accent-550",
+        default: "border-neutral-800 hover:bg-neutral-200 group-hover:bg-neutral-200 bg-white"
+      }[checkboxState]
     )}">${this.checked ? html`<sd-icon part="checked-icon" class="text-white w-3 h-3" library="system" name="status-hook"></sd-icon>` : ""} ${!this.checked && this.indeterminate ? html`<sd-icon part="indeterminate-icon" class="text-white w-3 h-3" library="system" name="status-minus"></sd-icon>` : ""} </span><span part="label" id="label" class="${cx(
-      "select-none inline-block ml-2 text-black",
-      this.disabled && "text-neutral-500" || "text-neutral-800"
-    )}"><slot></slot></span></label>`;
+      "select-none inline-block ml-2",
+      this.disabled ? "text-neutral-500" : this.showInvalidStyle ? "text-error" : "text-black"
+    )}"><slot></slot></span></label> ${this.formControlController.renderInvalidMessage()}`;
   }
 };
 SdCheckbox.styles = [
   SolidElement.styles,
-  css`:host{display:block}:host(:focus-visible){outline-width:0}:host([required]) #label::after{content:' *'}:host([data-user-invalid]) #label{color:rgb(var(--sd-color-error,204 25 55))}:host([data-user-invalid]) #control{border-color:rgb(var(--sd-color-error,204 25 55))}:host([data-user-invalid]):host([indeterminate]) #control{background-color:rgb(var(--sd-color-error,204 25 55))}`
+  css`:host{display:block}:host(:focus-visible){outline-width:0}:host([required]) #label::after{content:' *'}`
 ];
 __decorateClass([
   query('input[type="checkbox"]')
 ], SdCheckbox.prototype, "input", 2);
+__decorateClass([
+  query("#invalid-message")
+], SdCheckbox.prototype, "invalidMessage", 2);
 __decorateClass([
   property()
 ], SdCheckbox.prototype, "title", 2);
@@ -165,6 +179,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdCheckbox.prototype, "required", 2);
+__decorateClass([
+  state()
+], SdCheckbox.prototype, "showInvalidStyle", 2);
 __decorateClass([
   watch("disabled", { waitUntilFirstUpdate: true })
 ], SdCheckbox.prototype, "handleDisabledChange", 1);

package/dist/package/components/checkbox-group/checkbox-group.js

@@ -66,7 +66,7 @@ let SdCheckboxGroup = class extends SolidElement {
         sm: "text-sm",
         lg: "text-base"
       }[this.size]
-    )}" role="group" aria-labelledby="label"><label part="form-control-label" id="label" class="${cx("mb-2 p-0 font-bold leading-normal text-black", hasLabel ? "flex" : "hidden")}" aria-hidden="${!hasLabel}"><slot name="label">${this.label}</slot></label><div part="form-control-input" class="${cx(
+    )}" role="group" aria-labelledby="label"><label part="form-control-label" id="label" class="${cx("mb-2 p-0 font-bold leading-normal text-black", hasLabel ? "flex" : "hidden")}" aria-hidden="${hasLabel ? "false" : "true"}"><slot name="label">${this.label}</slot></label><div part="form-control-input" class="${cx(
       {
         vertical: "flex flex-col",
         horizontal: "flex flex-row"

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

@@ -7,7 +7,10 @@ export default class SdInput extends SolidElement implements SolidFormControl {
     private readonly hasSlotController;
     private readonly localize;
     input: HTMLInputElement;
+    invalidMessage: HTMLDivElement;
     private hasFocus;
+    showValidStyle: boolean;
+    showInvalidStyle: boolean;
     type: 'date' | 'datetime-local' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url';
     size: 'lg' | 'md' | 'sm';
     inputmode: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';

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

@@ -12,7 +12,6 @@ import { query, state, property } from "lit/decorators.js";
 import { watch } from "../../internal/watch.js";
 import componentStyles from "../../styles/component.styles.js";
 import cx from "classix";
-import formControlStyles from "../../styles/form-control.styles.js";
 import SolidElement from "../../internal/solid-element.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -42,6 +41,8 @@ let SdInput = class extends SolidElement {
     );
     this.localize = new LocalizeController(this);
     this.hasFocus = false;
+    this.showValidStyle = false;
+    this.showInvalidStyle = false;
     this.type = "text";
     this.size = "lg";
     this.value = "";
@@ -115,8 +116,10 @@ let SdInput = class extends SolidElement {
     this.formControlController.updateValidity();
     this.emit("sd-input");
   }
-  handleInvalid() {
+  handleInvalid(event) {
     this.formControlController.setValidity(false);
+    this.formControlController.emitInvalidEvent(event);
+    this.invalidMessage.textContent = event.target.validationMessage;
   }
   handleKeyDown(event) {
     const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
@@ -210,10 +213,7 @@ let SdInput = class extends SolidElement {
     const hasLabel = this.label ? true : !!slots["label"];
     const hasHelpText = this.helpText ? true : !!slots["helpText"];
     const hasClearIcon = this.clearable && !this.readonly && (typeof this.value === "number" || this.value.length > 0);
-    const hasValidationAttr = this.required || !!this.pattern || !!this.minlength || !!this.maxlength;
-    const isInvalid = hasValidationAttr && !this.checkValidity();
-    const isValid = hasValidationAttr && this.checkValidity();
-    const inputState = this.disabled ? "disabled" : this.readonly ? "readonly" : this.hasFocus && isInvalid ? "activeInvalid" : this.hasFocus && isValid ? "activeValid" : this.hasFocus ? "active" : isInvalid ? "invalid" : isValid ? "valid" : "default";
+    const inputState = this.disabled ? "disabled" : this.readonly ? "readonly" : this.hasFocus && this.showInvalidStyle ? "activeInvalid" : this.hasFocus && this.showValidStyle ? "activeValid" : this.hasFocus ? "active" : this.showInvalidStyle ? "invalid" : this.showValidStyle ? "valid" : "default";
     const textSize = this.size === "sm" ? "text-sm" : "text-base";
     const textColor = {
       disabled: "text-neutral-500",
@@ -242,40 +242,41 @@ let SdInput = class extends SolidElement {
       md: "text-lg",
       lg: "text-xl"
     }[this.size];
-    return html`<div part="form-control" class="${cx("form-control", hasLabel && "form-control--has-label", this.disabled && "pointer-events-none")}"><label part="form-control-label" id="label" class="${cx("form-control-label mb-2", hasLabel ? "has-label  inline-block" : "hidden", textSize)}" for="input" aria-hidden="${hasLabel ? "false" : "true"}"><slot name="label">${this.label}</slot></label><div part="form-control-input" class="form-control-input relative w-full"><div part="border" class="${cx(
-      "absolute w-full h-full pointer-events-none border rounded-default transition-all",
-      borderColor
-    )}"></div><div part="base" class="${cx(
-      "px-4 flex flex-row items-center rounded-default transition-all",
+    return html`<div part="form-control" class="${cx(this.disabled && "pointer-events-none")}"><label part="form-control-label" id="label" class="${cx("mb-2", hasLabel ? "inline-block" : "hidden", textSize)}" for="input" aria-hidden="${hasLabel ? "false" : "true"}"><slot name="label">${this.label}</slot></label><div part="form-control-input" class="relative w-full"><div part="border" class="${cx("absolute w-full h-full pointer-events-none border rounded-default", borderColor)}"></div><div part="base" class="${cx(
+      "px-4 flex flex-row items-center rounded-default transition-all bg-white",
       // Vertical Padding
       this.size === "lg" ? "py-2" : "py-1",
       // States
       !this.disabled && !this.readonly ? "hover:bg-neutral-200" : "",
       this.readonly && "bg-neutral-100",
-      isInvalid && "form-control-input--invalid",
-      textColor,
-      !this.value && "input--empty",
-      this.noSpinButtons && "input--no-spin-buttons",
-      isFirefox && "input--is-firefox"
+      textColor
     )}">${slots["left"] ? html`<slot name="left" part="left" class="${cx("inline-flex", this.size === "sm" ? "mr-1" : "mr-2", iconColor, iconSize)}"></slot>` : ""} <input part="input" id="input" class="${cx(
       "min-w-0 flex-grow focus:outline-none bg-transparent placeholder-neutral-700",
       this.size === "sm" ? "h-6" : "h-8",
       textSize
-    )}" type="${this.type === "password" && this.passwordVisible ? "text" : this.type}" title="${this.title}" name="${ifDefined(this.name)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" placeholder="${ifDefined(this.placeholder)}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" min="${ifDefined(this.min)}" max="${ifDefined(this.max)}" step="${ifDefined(this.step)}" .value="${live(this.value)}" autocapitalize="${ifDefined(this.type === "password" ? "off" : this.autocapitalize)}" autocomplete="${ifDefined(this.type === "password" ? "off" : this.autocomplete)}" autocorrect="${ifDefined(this.type === "password" ? "off" : this.autocorrect)}" ?autofocus="${this.autofocus}" spellcheck="${this.spellcheck}" pattern="${ifDefined(this.pattern)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" aria-describedby="help-text" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @keydown="${this.handleKeyDown}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"> ${hasClearIcon ? html`<button part="clear-button" class="${cx("flex justify-center ", iconMarginLeft)}" type="button" aria-label="${this.localize.term("clearEntry")}" @click="${this.handleClearClick}" tabindex="-1"><slot name="clear-icon"><sd-icon class="${cx("text-neutral-500", iconSize)}" library="system" name="closing-round"></sd-icon></slot></button>` : ""} ${this.passwordToggle && this.type === "password" ? html`<button aria-label="${this.localize.term(this.passwordVisible ? "hidePassword" : "showPassword")}" part="password-toggle-button" class="flex items-center" type="button" @click="${this.handlePasswordToggle}" tabindex="-1">${this.passwordVisible ? html`<slot name="show-password-icon"><sd-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="eye"></sd-icon></slot>` : html`<slot name="hide-password-icon"><sd-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="eye-crossed-out"></sd-icon></slot>`}</button>` : ""} ${(this.type === "date" || this.type === "datetime-local") && !isFirefox ? html`<sd-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="calendar"></sd-icon>` : ""} ${this.type === "time" ? html`<sd-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="clock"></sd-icon>` : ""} ${isInvalid ? html`<sd-icon class="${cx("text-error", iconMarginLeft, iconSize)}" library="system" name="risk"></sd-icon>` : ""} ${isValid ? html`<sd-icon class="${cx("text-success", iconMarginLeft, iconSize)}" library="system" name="confirm"></sd-icon>` : ""} ${slots["right"] ? html`<slot name="right" part="right" class="${cx("inline-flex", iconColor, iconMarginLeft, iconSize)}"></slot>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700", hasHelpText ? "block" : "hidden")}" aria-hidden="${hasHelpText ? "false" : "true"}">${this.helpText}</slot></div>`;
+    )}" type="${this.type === "password" && this.passwordVisible ? "text" : this.type}" title="${this.title}" name="${ifDefined(this.name)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" placeholder="${ifDefined(this.placeholder)}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" min="${ifDefined(this.min)}" max="${ifDefined(this.max)}" step="${ifDefined(this.step)}" .value="${live(this.value)}" autocapitalize="${ifDefined(this.type === "password" ? "off" : this.autocapitalize)}" autocomplete="${ifDefined(this.type === "password" ? "off" : this.autocomplete)}" autocorrect="${ifDefined(this.type === "password" ? "off" : this.autocorrect)}" ?autofocus="${this.autofocus}" spellcheck="${this.spellcheck}" pattern="${ifDefined(this.pattern)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" aria-describedby="help-text" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @keydown="${this.handleKeyDown}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"> ${hasClearIcon ? html`<button part="clear-button" class="${cx("flex justify-center ", iconMarginLeft)}" type="button" aria-label="${this.localize.term("clearEntry")}" @click="${this.handleClearClick}" tabindex="-1"><slot name="clear-icon"><sd-icon class="${cx("text-neutral-500", iconSize)}" library="system" name="closing-round"></sd-icon></slot></button>` : ""} ${this.passwordToggle && this.type === "password" ? html`<button aria-label="${this.localize.term(this.passwordVisible ? "hidePassword" : "showPassword")}" part="password-toggle-button" class="flex items-center" type="button" @click="${this.handlePasswordToggle}" tabindex="-1">${this.passwordVisible ? html`<slot name="show-password-icon"><sd-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="eye"></sd-icon></slot>` : html`<slot name="hide-password-icon"><sd-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="eye-crossed-out"></sd-icon></slot>`}</button>` : ""} ${(this.type === "date" || this.type === "datetime-local") && !isFirefox ? html`<sd-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="calendar"></sd-icon>` : ""} ${this.type === "time" ? html`<sd-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="clock"></sd-icon>` : ""} ${this.showInvalidStyle ? html`<sd-icon class="${cx("text-error", iconMarginLeft, iconSize)}" library="system" name="risk"></sd-icon>` : ""} ${this.showValidStyle ? html`<sd-icon class="${cx("text-success", iconMarginLeft, iconSize)}" library="system" name="confirm"></sd-icon>` : ""} ${slots["right"] ? html`<slot name="right" part="right" class="${cx("inline-flex", iconColor, iconMarginLeft, iconSize)}"></slot>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700", hasHelpText ? "block" : "hidden")}" aria-hidden="${!hasHelpText}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`;
   }
 };
 SdInput.styles = [
   componentStyles,
-  formControlStyles,
   SolidElement.styles,
-  css`:host{position:relative;box-sizing:border-box;display:inline-block;width:100%;text-align:left}:host([vertical]){display:block}:host([required]) #label.has-label::after{content:'*';margin-left:var(--sd-spacing-0-5,.125rem)}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}input[type=time]::-webkit-calendar-picker-indicator{background:0 0}details summary::-webkit-details-marker,input[type=date]::-webkit-calendar-picker-indicator,input[type=datetime-local]::-webkit-calendar-picker-indicator,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}`
+  css`:host{position:relative;box-sizing:border-box;display:inline-block;width:100%;text-align:left}:host([vertical]){display:block}:host([required]) #label::after{content:' *'}details summary::-webkit-details-marker{display:none}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}input[type=time]::-webkit-calendar-picker-indicator{background:0 0}details summary::-webkit-details-marker,input[type=date]::-webkit-calendar-picker-indicator,input[type=datetime-local]::-webkit-calendar-picker-indicator,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}`
 ];
 __decorateClass([
   query("#input")
 ], SdInput.prototype, "input", 2);
+__decorateClass([
+  query("#invalid-message")
+], SdInput.prototype, "invalidMessage", 2);
 __decorateClass([
   state()
 ], SdInput.prototype, "hasFocus", 2);
+__decorateClass([
+  state()
+], SdInput.prototype, "showValidStyle", 2);
+__decorateClass([
+  state()
+], SdInput.prototype, "showInvalidStyle", 2);
 __decorateClass([
   property({ reflect: true })
 ], SdInput.prototype, "type", 2);

package/dist/package/components/option/option.js

@@ -7,7 +7,6 @@ import { query, state, property } from "lit/decorators.js";
 import { watch } from "../../internal/watch.js";
 import componentStyles from "../../styles/component.styles.js";
 import cx from "classix";
-import formControlStyles from "../../styles/form-control.styles.js";
 import SolidElement from "../../internal/solid-element.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -100,7 +99,6 @@ let SdOption = class extends SolidElement {
 };
 SdOption.styles = [
   componentStyles,
-  formControlStyles,
   SolidElement.styles,
   css`:host{position:relative;display:block;width:100%;outline:2px solid transparent!important;outline-offset:2px!important}`
 ];

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

@@ -82,13 +82,13 @@ let SdRadio = class extends SolidElement {
       }[this.size]
     )}"><span part="${`${this.checked ? "control--checked" : "control--unchecked"}`}" class="${cx(
       "flex-initial shrink-0 relative inline-flex items-center justify-center border rounded-full bg-white h-4 w-4",
-      this.disabled && "border-neutral-500" || this.invalid && "border-error hover:border-error-400 group-hover:border-error-400" || this.checked && "border-accent hover:border-accent-550 group-hover:border-accent-550" || "border-neutral-800 hover:bg-neutral-200 group-hover:bg-neutral-200"
+      this.disabled ? "border-neutral-500" : this.invalid ? "border-error hover:border-error-400 group-hover:border-error-400" : this.checked ? "border-accent hover:border-accent-550 group-hover:border-accent-550" : "border-neutral-800 hover:bg-neutral-200 group-hover:bg-neutral-200"
     )}">${this.checked ? html`<span part="checked" class="${cx(
       "rounded-full inline-flex text-white border bg-accent h-2.5 w-2.5",
-      this.disabled && "bg-neutral-500" || this.invalid && "bg-error hover:bg-error-400 group-hover:bg-error-400" || this.checked && "bg-accent hover:bg-accent-550 group-hover:bg-accent-550" || "bg-neutral-800"
+      this.disabled ? "bg-neutral-500" : this.invalid ? "bg-error hover:bg-error-400 group-hover:bg-error-400" : this.checked ? "bg-accent hover:bg-accent-550 group-hover:bg-accent-550" : "bg-neutral-800"
     )}"></span>` : ""}</span><slot part="label" class="${cx(
       "ml-2 select-none inline-block",
-      this.disabled && "text-neutral-500" || this.invalid && "text-error" || "text-black"
+      this.disabled ? "text-neutral-500" : this.invalid ? "text-error" : "text-black"
     )}"></slot></span>`;
   }
 };

package/dist/package/components/radio-group/radio-group.d.ts

@@ -12,11 +12,12 @@ export default class SdRadioGroup extends SolidElement implements SolidFormContr
     private validationTimeout;
     defaultSlot: HTMLSlotElement;
     validationInput: HTMLInputElement;
+    invalidMessage: HTMLDivElement;
     private hasButtonGroup;
     defaultValue: string;
-    private invalid;
-    private errorText;
+    showInvalidStyle: boolean;
     label: string;
+    boldLabel: boolean;
     name: string;
     value: string;
     size: 'lg' | 'sm';
@@ -30,7 +31,7 @@ export default class SdRadioGroup extends SolidElement implements SolidFormContr
     private getAllRadios;
     private handleRadioClick;
     private handleKeyDown;
-    private handleLabelClick;
+    focus(): void;
     private handleInvalid;
     private syncRadioElements;
     private syncRadios;

package/dist/package/components/radio-group/radio-group.js

@@ -7,6 +7,7 @@ import { watch } from "../../internal/watch.js";
 import componentStyles from "../../styles/component.styles.js";
 import cx from "classix";
 import SdButtonGroup from "../../_components/button-group/button-group.js";
+import SdRadio from "../radio/radio.js";
 import SolidElement from "../../internal/solid-element.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -27,9 +28,9 @@ let SdRadioGroup = class extends SolidElement {
     this.customValidityMessage = "";
     this.hasButtonGroup = false;
     this.defaultValue = "";
-    this.invalid = false;
-    this.errorText = "";
+    this.showInvalidStyle = false;
     this.label = "";
+    this.boldLabel = false;
     this.name = "option";
     this.value = "";
     this.size = "lg";
@@ -42,13 +43,10 @@ let SdRadioGroup = class extends SolidElement {
     const isRequiredAndEmpty = this.required && !this.value;
     const hasCustomValidityMessage = this.customValidityMessage !== "";
     if (hasCustomValidityMessage) {
-      this.invalid = true;
       return customErrorValidityState;
     } else if (isRequiredAndEmpty) {
-      this.invalid = true;
       return valueMissingValidityState;
     }
-    this.invalid = false;
     return validValidityState;
   }
   /** Gets the validation message */
@@ -56,10 +54,8 @@ let SdRadioGroup = class extends SolidElement {
     const isRequiredAndEmpty = this.required && !this.value;
     const hasCustomValidityMessage = this.customValidityMessage !== "";
     if (hasCustomValidityMessage) {
-      console.log("this.customValidityMessage", this.customValidityMessage);
       return this.customValidityMessage;
     } else if (isRequiredAndEmpty) {
-      console.log("this.validationInput.validationMessage", this.validationInput);
       return this.validationInput.validationMessage;
     }
     return "";
@@ -123,7 +119,8 @@ let SdRadioGroup = class extends SolidElement {
     }
     event.preventDefault();
   }
-  handleLabelClick() {
+  /** Move focus to the checked radio (or the first one if none are checked) */
+  focus() {
     const radios = this.getAllRadios();
     const checked = radios.find((radio) => radio.checked);
     const radioToFocus = checked || radios[0];
@@ -134,6 +131,7 @@ let SdRadioGroup = class extends SolidElement {
   handleInvalid(event) {
     this.formControlController.setValidity(false);
     this.formControlController.emitInvalidEvent(event);
+    this.invalidMessage.textContent = event.target.validationMessage;
   }
   async syncRadioElements() {
     var _a, _b;
@@ -144,8 +142,8 @@ let SdRadioGroup = class extends SolidElement {
         await radio.updateComplete;
         radio.checked = radio.value === this.value;
         radio.size = this.size;
-        if ("invalid" in radio) {
-          radio.invalid = this.invalid;
+        if (radio instanceof SdRadio) {
+          radio.invalid = this.showInvalidStyle;
         }
       })
     );
@@ -215,10 +213,8 @@ let SdRadioGroup = class extends SolidElement {
     return this.formControlController.getForm();
   }
   /** Checks for validity and shows the browser's validation message if the control is invalid. */
-  // TODO: https://github.com/solid-design-system/solid/issues/501
   reportValidity() {
     const isValid = this.validity.valid;
-    this.errorText = this.customValidityMessage || isValid ? "" : this.validationInput.validationMessage;
     this.formControlController.setValidity(isValid);
     this.validationInput.hidden = true;
     clearTimeout(this.validationTimeout);
@@ -232,39 +228,38 @@ let SdRadioGroup = class extends SolidElement {
   /** Sets a custom validation message. Pass an empty string to restore validity. */
   setCustomValidity(message = "") {
     this.customValidityMessage = message;
-    this.errorText = message;
     this.validationInput.setCustomValidity(message);
     this.formControlController.updateValidity();
   }
   render() {
     const hasLabelSlot = this.hasSlotController.test("label");
-    const hasErrorTextSlot = this.hasSlotController.test("error-text");
     const hasLabel = this.label ? true : !!hasLabelSlot;
-    const hasErrorText = this.errorText ? true : !!hasErrorTextSlot;
     const defaultSlot = html`<slot @slotchange="${this.syncRadios}" @click="${this.handleRadioClick}" @keydown="${this.handleKeyDown}"></slot>`;
     return html`<fieldset part="form-control" class="${cx(
-      "border-0 p-0 m-0",
-      hasErrorText && "text-error",
+      "border-0 p-0 m-0 flex flex-col",
       {
         /* sizes, fonts */
         sm: "text-sm",
         lg: "text-base"
       }[this.size]
-    )}" role="radiogroup" aria-labelledby="label" aria-errormessage="error-text"><label part="form-control-label" id="label" class="${cx("mb-2 p-0 font-bold leading-normal text-black", hasLabel ? "has-label flex" : "hidden")}" aria-hidden="${!hasLabel}" @click="${this.handleLabelClick}"><slot name="label">${this.label}</slot></label><div part="form-control-input" class="${cx(
-      "form-control-input flex",
-      this.invalid && "form-control-input--invalid text-error",
+    )}" role="radiogroup" aria-labelledby="label" aria-errormessage="error-text"><label part="form-control-label" id="label" class="${cx(
+      "mb-2 p-0 leading-normal text-black text-left",
+      !hasLabel && "hidden",
+      this.boldLabel && "font-bold"
+    )}" @click="${this.focus}" aria-hidden="${hasLabel ? "false" : "true"}"><slot name="label">${this.label}</slot></label><div part="form-control-input" class="${cx(
+      "flex",
       {
         vertical: "flex-col",
         horizontal: "flex-row"
       }[this.orientation]
-    )}"><div class="sr-only"><div id="error-message" aria-live="assertive">${this.errorText}</div><label><input id="validation-input" type="text" ?required="${this.required}" tabindex="-1" hidden @invalid="${this.handleInvalid}"></label></div>${this.hasButtonGroup ? html`<sd-button-group part="button-group" exportparts="base:button-group__base" role="presentation">${defaultSlot}</sd-button-group>` : defaultSlot}</div></fieldset>`;
+    )}"><div class="sr-only"><label><input id="validation-input" type="text" ?required="${this.required}" tabindex="-1" hidden @invalid="${this.handleInvalid}"></label></div>${this.hasButtonGroup ? html`<sd-button-group part="button-group" exportparts="base:button-group__base" role="presentation">${defaultSlot}</sd-button-group>` : defaultSlot}</div></fieldset>${this.formControlController.renderInvalidMessage()}`;
   }
 };
 SdRadioGroup.dependencies = { "sd-button-group": SdButtonGroup };
 SdRadioGroup.styles = [
   componentStyles,
   SolidElement.styles,
-  css`:host{display:block}:host([orientation=vertical]) ::slotted(sd-radio){margin-bottom:var(--sd-spacing-2,.5rem);display:flex}:host([orientation=vertical]) ::slotted(sd-radio:last-of-type){margin-bottom:var(--sd-spacing-0,0)}:host([orientation=horizontal]) ::slotted(sd-radio){margin-right:var(--sd-spacing-6,1.5rem)}:host([orientation=horizontal]) ::slotted(sd-radio:last-of-type){margin-right:var(--sd-spacing-0,0)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-radio){margin-right:var(--sd-spacing-4,1rem)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-radio:last-of-type){margin-right:var(--sd-spacing-0,0)}:host([required]) #label.has-label::after{content:'*';margin-left:var(--sd-spacing-0-5,.125rem)}`
+  css`:host{display:block}:host([orientation=vertical]) ::slotted(sd-radio){margin-bottom:var(--sd-spacing-2,.5rem);display:flex}:host([orientation=vertical]) ::slotted(sd-radio:last-of-type){margin-bottom:var(--sd-spacing-0,0)}:host([orientation=horizontal]) ::slotted(sd-radio){margin-right:var(--sd-spacing-6,1.5rem)}:host([orientation=horizontal]) ::slotted(sd-radio:last-of-type){margin-right:var(--sd-spacing-0,0)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-radio){margin-right:var(--sd-spacing-4,1rem)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-radio:last-of-type){margin-right:var(--sd-spacing-0,0)}:host([required]) #label::after{content:' *'}`
 ];
 __decorateClass([
   query("slot:not([name])")
@@ -272,6 +267,9 @@ __decorateClass([
 __decorateClass([
   query("#validation-input")
 ], SdRadioGroup.prototype, "validationInput", 2);
+__decorateClass([
+  query("#invalid-message")
+], SdRadioGroup.prototype, "invalidMessage", 2);
 __decorateClass([
   state()
 ], SdRadioGroup.prototype, "hasButtonGroup", 2);
@@ -280,13 +278,13 @@ __decorateClass([
 ], SdRadioGroup.prototype, "defaultValue", 2);
 __decorateClass([
   state()
-], SdRadioGroup.prototype, "invalid", 2);
-__decorateClass([
-  state()
-], SdRadioGroup.prototype, "errorText", 2);
+], SdRadioGroup.prototype, "showInvalidStyle", 2);
 __decorateClass([
   property()
 ], SdRadioGroup.prototype, "label", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdRadioGroup.prototype, "boldLabel", 2);
 __decorateClass([
   property()
 ], SdRadioGroup.prototype, "name", 2);
@@ -309,7 +307,7 @@ __decorateClass([
   watch("size", { waitUntilFirstUpdate: true })
 ], SdRadioGroup.prototype, "handleSizeChange", 1);
 __decorateClass([
-  watch("invalid", { waitUntilFirstUpdate: true })
+  watch("showInvalidStyle", { waitUntilFirstUpdate: true })
 ], SdRadioGroup.prototype, "handleInvalidChange", 1);
 __decorateClass([
   watch("value")

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

@@ -22,13 +22,14 @@ export default class SdSelect extends SolidElement implements SolidFormControl {
     displayInput: HTMLInputElement;
     valueInput: HTMLInputElement;
     listbox: HTMLSlotElement;
+    invalidMessage: HTMLDivElement;
     private hasFocus;
     hasHover: boolean;
     private displayLabel;
     private currentOption;
     private selectedOptions;
-    private isValid;
-    private isInvalid;
+    showValidStyle: boolean;
+    showInvalidStyle: boolean;
     defaultValue: string | string[];
     open: boolean;
     size: 'lg' | 'md' | 'sm';
@@ -51,7 +52,6 @@ export default class SdSelect extends SolidElement implements SolidFormControl {
     get validity(): ValidityState;
     get validationMessage(): string;
     connectedCallback(): void;
-    updated(): void;
     private addOpenListeners;
     private removeOpenListeners;
     private handleFocus;

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

@@ -13,7 +13,6 @@ import { waitForEvent } from "../../internal/event.js";
 import { watch } from "../../internal/watch.js";
 import componentStyles from "../../styles/component.styles.js";
 import cx from "classix";
-import formControlStyles from "../../styles/form-control.styles.js";
 import SdIcon from "../icon/icon.js";
 import SdPopup from "../popup/popup.js";
 import SdTag from "../tag/tag.js";
@@ -42,12 +41,12 @@ let SdSelect = class extends SolidElement {
     this.hasHover = false;
     this.displayLabel = "";
     this.selectedOptions = [];
-    this.isValid = false;
-    this.isInvalid = false;
+    this.showValidStyle = false;
+    this.showInvalidStyle = false;
     this.defaultValue = "";
     this.open = false;
     this.size = "lg";
-    this.label = "Label";
+    this.label = "";
     this.placeholder = this.localize.term("selectDefaultPlaceholder");
     this.helpText = "";
     this.placement = "bottom";
@@ -187,15 +186,6 @@ let SdSelect = class extends SolidElement {
     this.applySizeToOptions();
     this.open = false;
   }
-  /** Checks for the presence of the attributes 'data-user-valid' or 'data-user-invalid' and updates the corresponding state for reactive conditional styling. */
-  updated() {
-    if (this.hasAttribute("data-user-valid") && this.checkValidity()) {
-      this.isValid = true;
-    }
-    if (this.hasAttribute("data-user-invalid") && !this.checkValidity()) {
-      this.isInvalid = true;
-    }
-  }
   addOpenListeners() {
     document.addEventListener("focusin", this.handleDocumentFocusIn);
     document.addEventListener("keydown", this.handleDocumentKeyDown);
@@ -373,6 +363,7 @@ let SdSelect = class extends SolidElement {
   handleInvalid(event) {
     this.formControlController.setValidity(false);
     this.formControlController.emitInvalidEvent(event);
+    this.invalidMessage.textContent = event.target.validationMessage;
   }
   handleMouseEnter() {
     this.hasHover = true;
@@ -494,7 +485,7 @@ let SdSelect = class extends SolidElement {
     const hasLabel = this.label ? true : !!slots["label"];
     const hasHelpText = this.helpText ? true : !!slots["helpText"];
     const hasClearIcon = this.clearable && !this.disabled && this.value.length > 0;
-    const selectState = this.disabled ? "disabled" : this.hasFocus && this.isInvalid ? "activeInvalid" : this.hasFocus && this.isValid ? "activeValid" : this.hasFocus || this.open ? "active" : this.isInvalid ? "invalid" : this.isValid ? "valid" : "default";
+    const selectState = this.disabled ? "disabled" : this.hasFocus && this.showInvalidStyle ? "activeInvalid" : this.hasFocus && this.showValidStyle ? "activeValid" : this.hasFocus || this.open ? "active" : this.showInvalidStyle ? "invalid" : this.showValidStyle ? "valid" : "default";
     const cursorStyles = this.disabled ? "cursor-not-allowed" : "cursor-pointer";
     const iconMarginLeft = { sm: "ml-1", md: "ml-2", lg: "ml-2" }[this.size];
     const iconSize = {
@@ -503,9 +494,12 @@ let SdSelect = class extends SolidElement {
       lg: "text-xl"
     }[this.size];
     return html`<div part="form-control" class="${cx(
-      "form-control relative text-left",
+      "relative text-left",
       cursorStyles,
       this.size === "sm" ? "text-sm" : "text-base",
+      this.open && "z-50"
+    )}"><label id="label" part="form-control-label" class="${hasLabel && "inline-block mb-2"}" aria-hidden="${hasLabel ? "false" : "true"}" @click="${this.handleLabelClick}"><slot name="label">${this.label}</slot></label><div part="form-control-input" class="${cx(
+      "relative w-full bg-white",
       {
         disabled: "text-neutral-500",
         readonly: "text-black",
@@ -515,9 +509,8 @@ let SdSelect = class extends SolidElement {
         invalid: "text-error",
         valid: "text-success",
         default: "text-black"
-      }[selectState],
-      this.open && "z-10"
-    )}"><label id="label" part="form-control-label" class="${hasLabel && "inline-block mb-2"}" aria-hidden="${hasLabel ? "false" : "true"}" @click="${this.handleLabelClick}"><slot name="label" class="${cx(this.disabled && "text-black")}">${this.label}</slot></label><div part="form-control-input" class="${cx("relative w-full bg-white")}"><div part="border" class="${cx(
+      }[selectState]
+    )}"><div part="border" class="${cx(
       "absolute top-0 w-full h-full pointer-events-none border rounded-default",
       this.hasHover && "bg-neutral-200",
       {
@@ -545,10 +538,10 @@ let SdSelect = class extends SolidElement {
       "appearance-none outline-none flex-grow bg-transparent",
       cursorStyles,
       this.multiple && this.useTags && this.value.length > 0 ? "hidden" : ""
-    )}" type="text" placeholder="${this.placeholder}" .disabled="${this.disabled}" .value="${this.displayLabel}" autocomplete="off" spellcheck="false" autocapitalize="off" readonly="readonly" aria-controls="listbox" aria-expanded="${this.open ? "true" : "false"}" aria-haspopup="listbox" aria-labelledby="label" aria-disabled="${this.disabled ? "true" : "false"}" aria-describedby="help-text" role="combobox" tabindex="0" @focus="${this.handleFocus}" @blur="${this.handleBlur}"> ${this.multiple && this.useTags ? html`<div part="tags" class="flex-grow flex flex-wrap items-center gap-1">${this.tags}</div>` : ""} <input class="${cx("value-input absolute top-0 left-0 w-full h-full opacity-0 -z-10", cursorStyles)}" type="text" ?disabled="${this.disabled}" ?required="${this.required}" .value="${Array.isArray(this.value) ? this.value.join(", ") : this.value}" tabindex="-1" aria-hidden="true" @focus="${() => this.focus()}" @invalid="${this.handleInvalid}"> ${hasClearIcon ? html`<button part="clear-button" class="${cx("select__clear flex justify-center", iconMarginLeft)}" type="button" aria-label="${this.localize.term("clearEntry")}" @mousedown="${this.handleClearMouseDown}" @click="${this.handleClearClick}" tabindex="-1"><slot name="clear-icon"><sd-icon class="${cx("text-neutral-500", iconSize)}" library="system" name="closing-round"></sd-icon></slot></button>` : ""} ${this.isInvalid ? html`<sd-icon class="${cx("text-error", iconMarginLeft, iconSize)}" library="system" name="risk"></sd-icon>` : ""} ${this.isValid ? html`<sd-icon class="${cx("text-success", iconMarginLeft, iconSize)}" library="system" name="confirm"></sd-icon>` : ""}<slot name="expand-icon" part="expand-icon" class="${cx("inline-flex ml-2 transition-all", this.open ? "rotate-180" : "rotate-0", iconSize)}"><sd-icon name="chevron-down" part="chevron" library="system" color="currentColor"></sd-icon></slot></div><div id="listbox" role="listbox" aria-expanded="${this.open ? "true" : "false"}" aria-multiselectable="${this.multiple ? "true" : "false"}" aria-labelledby="label" part="listbox" class="${cx(
+    )}" type="text" placeholder="${this.placeholder}" .disabled="${this.disabled}" .value="${this.displayLabel}" autocomplete="off" spellcheck="false" autocapitalize="off" readonly="readonly" aria-controls="listbox" aria-expanded="${this.open ? "true" : "false"}" aria-haspopup="listbox" aria-labelledby="label" aria-disabled="${this.disabled ? "true" : "false"}" aria-describedby="help-text" role="combobox" tabindex="0" @focus="${this.handleFocus}" @blur="${this.handleBlur}"> ${this.multiple && this.useTags ? html`<div part="tags" class="flex-grow flex flex-wrap items-center gap-1">${this.tags}</div>` : ""} <input class="${cx("value-input absolute top-0 left-0 w-full h-full opacity-0 -z-10", cursorStyles)}" type="text" ?disabled="${this.disabled}" ?required="${this.required}" .value="${Array.isArray(this.value) ? this.value.join(", ") : this.value}" tabindex="-1" aria-hidden="true" @focus="${() => this.focus()}" @invalid="${this.handleInvalid}"> ${hasClearIcon ? html`<button part="clear-button" class="${cx("select__clear flex justify-center", iconMarginLeft)}" type="button" aria-label="${this.localize.term("clearEntry")}" @mousedown="${this.handleClearMouseDown}" @click="${this.handleClearClick}" tabindex="-1"><slot name="clear-icon"><sd-icon class="${cx("text-neutral-500", iconSize)}" library="system" name="closing-round"></sd-icon></slot></button>` : ""} ${this.showInvalidStyle ? html`<sd-icon class="${cx("text-error", iconMarginLeft, iconSize)}" library="system" name="risk"></sd-icon>` : ""} ${this.showValidStyle ? html`<sd-icon class="${cx("text-success", iconMarginLeft, iconSize)}" library="system" name="confirm"></sd-icon>` : ""}<slot name="expand-icon" part="expand-icon" class="${cx("inline-flex ml-2 transition-all", this.open ? "rotate-180" : "rotate-0", iconSize)}"><sd-icon name="chevron-down" part="chevron" library="system" color="currentColor"></sd-icon></slot></div><div id="listbox" role="listbox" aria-expanded="${this.open ? "true" : "false"}" aria-multiselectable="${this.multiple ? "true" : "false"}" aria-labelledby="label" part="listbox" class="${cx(
       "bg-white px-2 py-3 relative",
       this.currentPlacement === "bottom" ? "border-r-2 border-b-2 border-l-2 rounded-br-default rounded-bl-default" : "border-r-2 border-t-2 border-l-2 rounded-tr-default rounded-tl-default"
-    )}" tabindex="-1" @mouseup="${this.handleOptionClick}" @slotchange="${this.handleDefaultSlotChange}"><slot></slot></div></sd-popup></div><div class="text-sm text-neutral-700" part="form-control-help-text" id="help-text" aria-hidden="${hasHelpText ? "false" : "true"}"><slot name="help-text">${this.helpText}</slot></div></div>`;
+    )}" tabindex="-1" @mouseup="${this.handleOptionClick}" @slotchange="${this.handleDefaultSlotChange}"><slot></slot></div></sd-popup></div><div class="text-sm text-neutral-700" part="form-control-help-text" id="help-text" aria-hidden="${hasHelpText ? "false" : "true"}"><slot name="help-text">${this.helpText}</slot></div></div>${this.formControlController.renderInvalidMessage()}`;
   }
 };
 SdSelect.dependencies = {
@@ -558,7 +551,6 @@ SdSelect.dependencies = {
 };
 SdSelect.styles = [
   componentStyles,
-  formControlStyles,
   SolidElement.styles,
   css`:host{position:relative;display:block;width:100%}:host([required]) #label::after{content:' *'}sd-popup::part(popup){overflow-y:scroll}sd-tag::part(base){border-radius:var(--sd-border-radius-default,.25rem);padding-left:var(--sd-spacing-1,.25rem);padding-right:var(--sd-spacing-1,.25rem)}sd-tag[size=lg]::part(base){padding-left:var(--sd-spacing-2,.5rem);padding-right:var(--sd-spacing-2,.5rem)}sd-tag[disabled=false]::part(base):hover{--tw-bg-opacity:1;background-color:rgb(var(--sd-color-primary-100,236 240 249) / var(--tw-bg-opacity))}`
 ];
@@ -580,6 +572,9 @@ __decorateClass([
 __decorateClass([
   query('[part="listbox"]')
 ], SdSelect.prototype, "listbox", 2);
+__decorateClass([
+  query("#invalid-message")
+], SdSelect.prototype, "invalidMessage", 2);
 __decorateClass([
   state()
 ], SdSelect.prototype, "hasFocus", 2);
@@ -597,10 +592,10 @@ __decorateClass([
 ], SdSelect.prototype, "selectedOptions", 2);
 __decorateClass([
   state()
-], SdSelect.prototype, "isValid", 2);
+], SdSelect.prototype, "showValidStyle", 2);
 __decorateClass([
   state()
-], SdSelect.prototype, "isInvalid", 2);
+], SdSelect.prototype, "showInvalidStyle", 2);
 __decorateClass([
   defaultValue()
 ], SdSelect.prototype, "defaultValue", 2);