@solid-design-system/components 1.36.0 → 1.37.0

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

@@ -73,7 +73,7 @@ let SdRadio = class extends SolidElement {
   }
   render() {
     return html`<span part="base" class="${cx(
-      "sd-1-36-0-radio group inline-flex items-start items-center text-base leading-normal text-black cursor-pointer align-middle",
+      "sd-1-37-0-radio group inline-flex items-start items-center text-base leading-normal text-black cursor-pointer align-middle",
       this.disabled && "hover:cursor-not-allowed",
       {
         /* sizes, fonts */
@@ -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>`;
   }
 };
@@ -121,7 +121,7 @@ __decorateClass([
   watch("disabled", { waitUntilFirstUpdate: true })
 ], SdRadio.prototype, "handleDisabledChange", 1);
 SdRadio = __decorateClass([
-  customElement("sd-1-36-0-radio")
+  customElement("sd-1-37-0-radio")
 ], SdRadio);
 export {
   SdRadio as default

package/dist/versioned-package/components/radio-button/radio-button.d.ts

@@ -20,6 +20,6 @@ export default class SdRadioButton extends SolidElement {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-1-36-0-radio-button': SdRadioButton;
+        'sd-1-37-0-radio-button': SdRadioButton;
     }
 }

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

@@ -84,7 +84,7 @@ let SdRadioButton = class extends SolidElement {
 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-1-36-0-button-group__button--first:not(.sd-1-36-0-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-1-36-0-button-group__button--inner) button{border-radius:var(--sd-border-radius-none,0)}:host(.sd-1-36-0-button-group__button--last:not(.sd-1-36-0-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-1-36-0-button-group__button:not(.sd-1-36-0-button-group__button--first)){margin-inline-start:-1px}:host(.sd-1-36-0-button-group__button--hover){z-index:10}:host(.sd-1-36-0-button-group__button--focus),:host(.sd-1-36-0-button-group__button[checked]){z-index:20}`
+  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-1-37-0-button-group__button--first:not(.sd-1-37-0-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-1-37-0-button-group__button--inner) button{border-radius:var(--sd-border-radius-none,0)}:host(.sd-1-37-0-button-group__button--last:not(.sd-1-37-0-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-1-37-0-button-group__button:not(.sd-1-37-0-button-group__button--first)){margin-inline-start:-1px}:host(.sd-1-37-0-button-group__button--hover){z-index:10}:host(.sd-1-37-0-button-group__button--focus),:host(.sd-1-37-0-button-group__button[checked]){z-index:20}`
 ];
 __decorateClass([
   query(".button")
@@ -111,7 +111,7 @@ __decorateClass([
   watch("disabled", { waitUntilFirstUpdate: true })
 ], SdRadioButton.prototype, "handleDisabledChange", 1);
 SdRadioButton = __decorateClass([
-  customElement("sd-1-36-0-radio-button")
+  customElement("sd-1-37-0-radio-button")
 ], SdRadioButton);
 export {
   SdRadioButton as default

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

@@ -4,7 +4,7 @@ import SolidElement from '../../internal/solid-element';
 import type { SolidFormControl } from '../../internal/solid-element';
 export default class SdRadioGroup extends SolidElement implements SolidFormControl {
     static dependencies: {
-        'sd-1-36-0-button-group': typeof SdButtonGroup;
+        'sd-1-37-0-button-group': typeof SdButtonGroup;
     };
     protected readonly formControlController: FormControlController;
     private readonly hasSlotController;
@@ -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;
@@ -47,6 +48,6 @@ export default class SdRadioGroup extends SolidElement implements SolidFormContr
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-1-36-0-radio-group': SdRadioGroup;
+        'sd-1-37-0-radio-group': SdRadioGroup;
     }
 }

package/dist/versioned-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 "";
@@ -72,10 +68,10 @@ let SdRadioGroup = class extends SolidElement {
     this.formControlController.updateValidity();
   }
   getAllRadios() {
-    return [...this.querySelectorAll("sd-1-36-0-radio, sd-1-36-0-radio-button")];
+    return [...this.querySelectorAll("sd-1-37-0-radio, sd-1-37-0-radio-button")];
   }
   handleRadioClick(event) {
-    const target = event.target.closest("sd-1-36-0-radio, sd-1-36-0-radio-button");
+    const target = event.target.closest("sd-1-37-0-radio, sd-1-37-0-radio-button");
     const radios = this.getAllRadios();
     const oldValue = this.value;
     if (target.disabled) {
@@ -85,7 +81,7 @@ let SdRadioGroup = class extends SolidElement {
     radios.forEach((radio) => radio.checked = radio === target);
     if (this.value !== oldValue) {
       this.emit("sd-change");
-      this.emit("sd-1-36-0-input");
+      this.emit("sd-1-37-0-input");
     }
   }
   handleKeyDown(event) {
@@ -119,11 +115,12 @@ let SdRadioGroup = class extends SolidElement {
     }
     if (this.value !== oldValue) {
       this.emit("sd-change");
-      this.emit("sd-1-36-0-input");
+      this.emit("sd-1-37-0-input");
     }
     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,12 +142,12 @@ 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;
         }
       })
     );
-    this.hasButtonGroup = radios.some((radio) => radio.tagName.toLowerCase() === "sd-1-36-0-radio-button");
+    this.hasButtonGroup = radios.some((radio) => radio.tagName.toLowerCase() === "sd-1-37-0-radio-button");
     if (!radios.some((radio) => radio.checked)) {
       if (this.hasButtonGroup) {
         const buttonRadio = (_a = radios[0].shadowRoot) == null ? void 0 : _a.querySelector("button");
@@ -161,26 +159,26 @@ let SdRadioGroup = class extends SolidElement {
       }
     }
     if (this.hasButtonGroup) {
-      const buttonGroup = (_b = this.shadowRoot) == null ? void 0 : _b.querySelector("sd-1-36-0-button-group");
+      const buttonGroup = (_b = this.shadowRoot) == null ? void 0 : _b.querySelector("sd-1-37-0-button-group");
       if (buttonGroup) {
         buttonGroup.disableRole = true;
       }
     }
   }
   syncRadios() {
-    if (customElements.get("sd-1-36-0-radio") && customElements.get("sd-1-36-0-radio-button")) {
+    if (customElements.get("sd-1-37-0-radio") && customElements.get("sd-1-37-0-radio-button")) {
       this.syncRadioElements();
       return;
     }
-    if (customElements.get("sd-1-36-0-radio")) {
+    if (customElements.get("sd-1-37-0-radio")) {
       this.syncRadioElements();
     } else {
-      customElements.whenDefined("sd-1-36-0-radio").then(() => this.syncRadios());
+      customElements.whenDefined("sd-1-37-0-radio").then(() => this.syncRadios());
     }
-    if (customElements.get("sd-1-36-0-radio-button")) {
+    if (customElements.get("sd-1-37-0-radio-button")) {
       this.syncRadioElements();
     } else {
-      customElements.whenDefined("sd-1-36-0-radio-button").then(() => this.syncRadios());
+      customElements.whenDefined("sd-1-37-0-radio-button").then(() => this.syncRadios());
     }
   }
   updateCheckedRadio() {
@@ -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-1-36-0-button-group part="button-group" exportparts="base:button-group__base" role="presentation">${defaultSlot}</sd-1-36-0-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-1-37-0-button-group part="button-group" exportparts="base:button-group__base" role="presentation">${defaultSlot}</sd-1-37-0-button-group>` : defaultSlot}</div></fieldset>${this.formControlController.renderInvalidMessage()}`;
   }
 };
-SdRadioGroup.dependencies = { "sd-1-36-0-button-group": SdButtonGroup };
+SdRadioGroup.dependencies = { "sd-1-37-0-button-group": SdButtonGroup };
 SdRadioGroup.styles = [
   componentStyles,
   SolidElement.styles,
-  css`:host{display:block}:host([orientation=vertical]) ::slotted(sd-1-36-0-radio){margin-bottom:var(--sd-spacing-2,.5rem);display:flex}:host([orientation=vertical]) ::slotted(sd-1-36-0-radio:last-of-type){margin-bottom:var(--sd-spacing-0,0)}:host([orientation=horizontal]) ::slotted(sd-1-36-0-radio){margin-right:var(--sd-spacing-6,1.5rem)}:host([orientation=horizontal]) ::slotted(sd-1-36-0-radio:last-of-type){margin-right:var(--sd-spacing-0,0)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-1-36-0-radio){margin-right:var(--sd-spacing-4,1rem)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-1-36-0-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-1-37-0-radio){margin-bottom:var(--sd-spacing-2,.5rem);display:flex}:host([orientation=vertical]) ::slotted(sd-1-37-0-radio:last-of-type){margin-bottom:var(--sd-spacing-0,0)}:host([orientation=horizontal]) ::slotted(sd-1-37-0-radio){margin-right:var(--sd-spacing-6,1.5rem)}:host([orientation=horizontal]) ::slotted(sd-1-37-0-radio:last-of-type){margin-right:var(--sd-spacing-0,0)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-1-37-0-radio){margin-right:var(--sd-spacing-4,1rem)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-1-37-0-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,13 +307,13 @@ __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")
 ], SdRadioGroup.prototype, "handleValueChange", 1);
 SdRadioGroup = __decorateClass([
-  customElement("sd-1-36-0-radio-group")
+  customElement("sd-1-37-0-radio-group")
 ], SdRadioGroup);
 export {
   SdRadioGroup as default

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

@@ -7,9 +7,9 @@ import type { TemplateResult } from 'lit';
 import type SdOption from '../option/option';
 export default class SdSelect extends SolidElement implements SolidFormControl {
     static dependencies: {
-        'sd-1-36-0-icon': typeof SdIcon;
-        'sd-1-36-0-popup': typeof SdPopup;
-        'sd-1-36-0-tag': typeof SdTag;
+        'sd-1-37-0-icon': typeof SdIcon;
+        'sd-1-37-0-popup': typeof SdPopup;
+        'sd-1-37-0-tag': typeof SdTag;
     };
     private readonly formControlController;
     private readonly hasSlotController;
@@ -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;
@@ -96,6 +96,6 @@ export default class SdSelect extends SolidElement implements SolidFormControl {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'sd-1-36-0-select': SdSelect;
+        'sd-1-37-0-select': SdSelect;
     }
 }