@solid-design-system/components 1.35.1 → 1.37.0

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-button/radio-button.d.ts

@@ -0,0 +1,25 @@
+import SolidElement from '../../internal/solid-element';
+export default class SdRadioButton extends SolidElement {
+    private readonly hasSlotController;
+    input: HTMLInputElement;
+    hiddenInput: HTMLInputElement;
+    protected hasFocus: boolean;
+    checked: boolean;
+    value: string;
+    disabled: boolean;
+    size: 'lg' | 'md' | 'sm';
+    connectedCallback(): void;
+    private handleBlur;
+    private handleClick;
+    private handleFocus;
+    handleDisabledChange(): void;
+    focus(options?: FocusOptions): void;
+    blur(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResultGroup[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sd-radio-button': SdRadioButton;
+    }
+}

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

@@ -0,0 +1,118 @@
+import { css, html } from "lit";
+import { customElement } from "../../internal/register-custom-element.js";
+import { HasSlotController } from "../../internal/slot.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+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 SolidElement from "../../internal/solid-element.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+let SdRadioButton = class extends SolidElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "[default]", "icon");
+    this.hasFocus = false;
+    this.checked = false;
+    this.disabled = false;
+    this.size = "lg";
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("role", "presentation");
+  }
+  handleBlur() {
+    this.hasFocus = false;
+    this.emit("sd-blur");
+  }
+  handleClick(e) {
+    if (this.disabled) {
+      e.preventDefault();
+      e.stopPropagation();
+      return;
+    }
+    this.checked = true;
+  }
+  handleFocus() {
+    this.hasFocus = true;
+    this.emit("sd-focus");
+  }
+  handleDisabledChange() {
+    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+  }
+  /** Sets focus on the radio button. */
+  focus(options) {
+    this.input.focus(options);
+  }
+  /** Removes focus from the radio button. */
+  blur() {
+    this.input.blur();
+  }
+  render() {
+    const hasDefaultSlot = this.hasSlotController.test("[default]");
+    const hasIconSlot = this.hasSlotController.test("icon");
+    const buttonSizeClass = `${this.size}-${hasDefaultSlot ? "label" : "no-label"}`;
+    return html`<div part="base" role="presentation" class="relative"><button part="${`button${this.checked ? " button--checked" : ""}`}" role="radio" aria-checked="${this.checked}" class="${cx(
+      "relative text-center border rounded-default transition-all ease-in-out duration-100 items-center justify-center focus-visible:focus-outline",
+      this.size === "sm" ? "text-sm" : "text-base",
+      this.checked && !this.disabled ? "bg-primary border-primary text-white hover:bg-primary-500 hover:border-primary-500" : this.disabled && !this.checked ? "border-neutral-500 text-neutral-500 hover:cursor-not-allowed" : this.disabled && this.checked ? "bg-neutral-500 text-white hover:cursor-not-allowed" : "bg-transparent text-primary border-primary hover:bg-primary-100 hover:border-primary-500 hover:text-primary-500 cursor-pointer",
+      hasDefaultSlot && "px-4",
+      this.hasFocus && "focused-class",
+      hasDefaultSlot && "button--has-label",
+      hasIconSlot && "button--has-icon flex gap-2",
+      buttonSizeClass
+    )}" aria-disabled="${this.disabled}" type="button" value="${ifDefined(this.value)}" tabindex="${this.checked ? "0" : "-1"}" @blur="${this.handleBlur}" @focus="${this.handleFocus}" @click="${this.handleClick}"><slot name="icon" part="icon" class="${cx(
+      hasIconSlot && "inline-flex relative items-center",
+      {
+        sm: "text-base",
+        md: "text-lg",
+        lg: "text-xl"
+      }[this.size]
+    )}" ?hidden="${!hasIconSlot}"></slot>${hasDefaultSlot ? html`<slot part="label" class="button__label inline-flex relative items-center whitespace-nowrap"></slot>` : null}</button></div>`;
+  }
+};
+SdRadioButton.styles = [
+  SolidElement.styles,
+  componentStyles,
+  css`:host{display:block;width:-moz-min-content;width:min-content}.hidden-input{all:unset;position:absolute;inset:var(--sd-spacing-0,0);z-index:-10;opacity:var(--sd-opacity-0,0);outline-style:dotted;outline-width:1px;outline-color:rgb(var(--sd-color-error,204 25 55) / 1)}.lg-label{height:var(--sd-spacing-12,3rem)}.lg-no-label{height:var(--sd-spacing-12,3rem);width:var(--sd-spacing-12,3rem)}.md-label{height:var(--sd-spacing-10,2.5rem)}.md-no-label{height:var(--sd-spacing-10,2.5rem);width:var(--sd-spacing-10,2.5rem)}.sm-label{height:var(--sd-spacing-8,2rem)}.sm-no-label{height:var(--sd-spacing-8,2rem);width:var(--sd-spacing-8,2rem)}:host(.sd-button-group__button--first:not(.sd-button-group__button--last)) button{border-top-right-radius:var(--sd-border-radius-none,0);border-bottom-right-radius:var(--sd-border-radius-none,0)}:host(.sd-button-group__button--inner) button{border-radius:var(--sd-border-radius-none,0)}:host(.sd-button-group__button--last:not(.sd-button-group__button--first)) button{border-top-left-radius:var(--sd-border-radius-none,0);border-bottom-left-radius:var(--sd-border-radius-none,0)}:host(.sd-button-group__button:not(.sd-button-group__button--first)){margin-inline-start:-1px}:host(.sd-button-group__button--hover){z-index:10}:host(.sd-button-group__button--focus),:host(.sd-button-group__button[checked]){z-index:20}`
+];
+__decorateClass([
+  query(".button")
+], SdRadioButton.prototype, "input", 2);
+__decorateClass([
+  query(".hidden-input")
+], SdRadioButton.prototype, "hiddenInput", 2);
+__decorateClass([
+  state()
+], SdRadioButton.prototype, "hasFocus", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdRadioButton.prototype, "checked", 2);
+__decorateClass([
+  property()
+], SdRadioButton.prototype, "value", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdRadioButton.prototype, "disabled", 2);
+__decorateClass([
+  property({ reflect: true })
+], SdRadioButton.prototype, "size", 2);
+__decorateClass([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], SdRadioButton.prototype, "handleDisabledChange", 1);
+SdRadioButton = __decorateClass([
+  customElement("sd-radio-button")
+], SdRadioButton);
+export {
+  SdRadioButton as default
+};

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,7 +142,9 @@ let SdRadioGroup = class extends SolidElement {
         await radio.updateComplete;
         radio.checked = radio.value === this.value;
         radio.size = this.size;
-        radio.invalid = this.invalid;
+        if (radio instanceof SdRadio) {
+          radio.invalid = this.showInvalidStyle;
+        }
       })
     );
     this.hasButtonGroup = radios.some((radio) => radio.tagName.toLowerCase() === "sd-radio-button");
@@ -213,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);
@@ -230,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>${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])")
@@ -270,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);
@@ -278,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);
@@ -307,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;