@solid-design-system/components 1.19.0 → 1.20.0

package/dist/package/_components/button-group/button-group.d.ts

@@ -0,0 +1,19 @@
+import SolidElement from '../../internal/solid-element';
+import type { CSSResultGroup } from 'lit';
+export default class SdButtonGroup extends SolidElement {
+    static styles: CSSResultGroup;
+    defaultSlot: HTMLSlotElement;
+    disableRole: boolean;
+    label: string;
+    private handleFocus;
+    private handleBlur;
+    private handleMouseOver;
+    private handleMouseOut;
+    private handleSlotChange;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sd-button-group': SdButtonGroup;
+    }
+}

package/dist/package/_components/button-group/button-group.js

@@ -0,0 +1,76 @@
+import { customElement } from "../../internal/register-custom-element.js";
+import { query, state, property } from "lit/decorators.js";
+import { html } from "lit";
+import SolidElement from "../../internal/solid-element.js";
+import styles from "./button-group.styles.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 SdButtonGroup = class extends SolidElement {
+  constructor() {
+    super(...arguments);
+    this.disableRole = false;
+    this.label = "";
+  }
+  handleFocus(event) {
+    const button = findButton(event.target);
+    button == null ? void 0 : button.classList.add("sd-button-group__button--focus");
+  }
+  handleBlur(event) {
+    const button = findButton(event.target);
+    button == null ? void 0 : button.classList.remove("sd-button-group__button--focus");
+  }
+  handleMouseOver(event) {
+    const button = findButton(event.target);
+    button == null ? void 0 : button.classList.add("sd-button-group__button--hover");
+  }
+  handleMouseOut(event) {
+    const button = findButton(event.target);
+    button == null ? void 0 : button.classList.remove("sd-button-group__button--hover");
+  }
+  handleSlotChange() {
+    const slottedElements = [...this.defaultSlot.assignedElements({ flatten: true })];
+    slottedElements.forEach((el) => {
+      const index = slottedElements.indexOf(el);
+      const button = findButton(el);
+      if (button !== null) {
+        button.classList.add("sd-button-group__button");
+        button.classList.toggle("sd-button-group__button--first", index === 0);
+        button.classList.toggle("sd-button-group__button--inner", index > 0 && index < slottedElements.length - 1);
+        button.classList.toggle("sd-button-group__button--last", index === slottedElements.length - 1);
+        button.classList.toggle("sd-button-group__button--radio", button.tagName.toLowerCase() === "sd-radio-button");
+      }
+    });
+  }
+  render() {
+    return html`<slot part="base" class="button-group" role="${this.disableRole ? "presentation" : "group"}" aria-label="${this.label}" @focusout="${this.handleBlur}" @focusin="${this.handleFocus}" @mouseover="${this.handleMouseOver}" @mouseout="${this.handleMouseOut}" @slotchange="${this.handleSlotChange}"></slot>`;
+  }
+};
+SdButtonGroup.styles = styles;
+__decorateClass([
+  query("slot")
+], SdButtonGroup.prototype, "defaultSlot", 2);
+__decorateClass([
+  state()
+], SdButtonGroup.prototype, "disableRole", 2);
+__decorateClass([
+  property()
+], SdButtonGroup.prototype, "label", 2);
+SdButtonGroup = __decorateClass([
+  customElement("sd-button-group")
+], SdButtonGroup);
+function findButton(el) {
+  const selector = "sd-button, sd-radio-button";
+  return el.closest(selector) ?? el.querySelector(selector);
+}
+export {
+  SdButtonGroup as default
+};

package/dist/package/_components/button-group/button-group.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/package/_components/button-group/button-group.styles.js

@@ -0,0 +1,6 @@
+import { css } from "lit";
+import componentStyles from "../../styles/component.styles.js";
+const styles = css`${componentStyles}:host{display:inline-block}.button-group{display:flex;flex-wrap:nowrap}`;
+export {
+  styles as default
+};

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

@@ -25,10 +25,13 @@ export default class SdButton extends SolidElement implements SolidFormControl {
     formMethod: 'post' | 'get';
     formNoValidate: boolean;
     formTarget: '_self' | '_blank' | '_parent' | '_top';
+    get validity(): ValidityState;
+    get validationMessage(): string;
     firstUpdated(): void;
     private handleBlur;
     private handleFocus;
     private handleClick;
+    private handleInvalid;
     private isButton;
     private isLink;
     handleDisabledChange(): void;
@@ -36,6 +39,7 @@ export default class SdButton extends SolidElement implements SolidFormControl {
     focus(options?: FocusOptions): void;
     blur(): void;
     checkValidity(): boolean;
+    getForm(): HTMLFormElement | null;
     reportValidity(): boolean;
     setCustomValidity(message: string): void;
     render(): import("lit-html").TemplateResult;

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

@@ -1,7 +1,7 @@
 import "../spinner/spinner.js";
 import { css } from "lit";
 import { customElement } from "../../internal/register-custom-element.js";
-import { FormControlController } from "../../internal/form.js";
+import { FormControlController, validValidityState } from "../../internal/form.js";
 import { HasSlotController } from "../../internal/slot.js";
 import { literal, html } from "lit/static-html.js";
 import { ifDefined } from "lit/directives/if-defined.js";
@@ -47,6 +47,20 @@ let SdButton = class extends SolidElement {
     this.value = "";
     this.href = "";
   }
+  /** Gets the validity state object */
+  get validity() {
+    if (this.isButton()) {
+      return this.button.validity;
+    }
+    return validValidityState;
+  }
+  /** Gets the validation message */
+  get validationMessage() {
+    if (this.isButton()) {
+      return this.button.validationMessage;
+    }
+    return "";
+  }
   firstUpdated() {
     if (this.isButton()) {
       this.formControlController.updateValidity();
@@ -71,6 +85,10 @@ let SdButton = class extends SolidElement {
       this.formControlController.reset(this);
     }
   }
+  handleInvalid(event) {
+    this.formControlController.setValidity(false);
+    this.formControlController.emitInvalidEvent(event);
+  }
   isButton() {
     return this.href ? false : true;
   }
@@ -94,13 +112,17 @@ let SdButton = class extends SolidElement {
   blur() {
     this.button.blur();
   }
-  /** Checks for validity but does not show the browser's validation message. */
+  /** Checks for validity but does not show the browser's validation message. Returns `true` when valid and `false` when invalid. */
   checkValidity() {
     if (this.isButton()) {
       return this.button.checkValidity();
     }
     return true;
   }
+  /** Gets the associated form, if one exists. */
+  getForm() {
+    return this.formControlController.getForm();
+  }
   /** Checks for validity and shows the browser's validation message if the control is invalid. */
   reportValidity() {
     if (this.isButton()) {
@@ -170,7 +192,7 @@ let SdButton = class extends SolidElement {
           active:bg-accent-700
           ${!this.inverted ? "disabled:bg-neutral-500" : "disabled:bg-neutral-600"} disabled:text-white`
       }[this.variant]
-    )}" ?disabled="${ifDefined(isLink ? void 0 : this.disabled)}" type="${ifDefined(isLink ? void 0 : this.type)}" title="${this.title}" name="${ifDefined(isLink ? void 0 : this.name)}" value="${ifDefined(isLink ? void 0 : this.value)}" href="${ifDefined(isLink ? this.href : void 0)}" target="${ifDefined(isLink ? this.target : void 0)}" download="${ifDefined(isLink ? this.download : void 0)}" rel="${ifDefined(isLink && this.target ? "noreferrer noopener" : void 0)}" role="${ifDefined(isLink ? void 0 : "button")}" aria-disabled="${this.disabled ? "true" : "false"}" tabindex="${this.disabled ? "-1" : "0"}" @blur="${this.handleBlur}" @focus="${this.handleFocus}" @click="${this.handleClick}"><slot name="icon-left" part="icon-left" class="${cx(
+    )}" ?disabled="${ifDefined(isLink ? void 0 : this.disabled)}" type="${ifDefined(isLink ? void 0 : this.type)}" title="${this.title}" name="${ifDefined(isLink ? void 0 : this.name)}" value="${ifDefined(isLink ? void 0 : this.value)}" href="${ifDefined(isLink ? this.href : void 0)}" target="${ifDefined(isLink ? this.target : void 0)}" download="${ifDefined(isLink ? this.download : void 0)}" rel="${ifDefined(isLink && this.target ? "noreferrer noopener" : void 0)}" role="${ifDefined(isLink ? void 0 : "button")}" aria-disabled="${this.disabled ? "true" : "false"}" tabindex="${this.disabled ? "-1" : "0"}" @blur="${this.handleBlur}" @focus="${this.handleFocus}" @invalid="${this.isButton() ? this.handleInvalid : null}" @click="${this.handleClick}"><slot name="icon-left" part="icon-left" class="${cx(
       "flex flex-auto items-center pointer-events-none",
       slots["icon-only"] && "hidden",
       this.loading && "invisible",

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

@@ -0,0 +1,27 @@
+import '../icon/icon';
+import SolidElement from '../../internal/solid-element';
+export default class SdRadio extends SolidElement {
+    checked: boolean;
+    protected hasFocus: boolean;
+    size: 'lg' | 'sm';
+    invalid: boolean;
+    disabled: boolean;
+    value: string;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private addEventListeners;
+    private removeEventListeners;
+    private handleBlur;
+    private handleClick;
+    private handleFocus;
+    private setInitialAttributes;
+    handleCheckedChange(): void;
+    handleDisabledChange(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResultGroup[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sd-radio': SdRadio;
+    }
+}

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

@@ -0,0 +1,130 @@
+import "../icon/icon.js";
+import { css, html } from "lit";
+import { customElement } from "../../internal/register-custom-element.js";
+import { state, property } from "lit/decorators.js";
+import { watch } from "../../internal/watch.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 SdRadio = class extends SolidElement {
+  constructor() {
+    super(...arguments);
+    this.checked = false;
+    this.hasFocus = false;
+    this.size = "lg";
+    this.invalid = false;
+    this.disabled = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.handleBlur = this.handleBlur.bind(this);
+    this.handleClick = this.handleClick.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
+    this.setInitialAttributes();
+    this.addEventListeners();
+  }
+  disconnectedCallback() {
+    this.removeEventListeners();
+  }
+  addEventListeners() {
+    this.addEventListener("blur", this.handleBlur);
+    this.addEventListener("click", this.handleClick);
+    this.addEventListener("focus", this.handleFocus);
+  }
+  removeEventListeners() {
+    this.removeEventListener("blur", this.handleBlur);
+    this.removeEventListener("click", this.handleClick);
+    this.removeEventListener("focus", this.handleFocus);
+  }
+  handleBlur() {
+    this.hasFocus = false;
+    this.emit("sd-blur");
+  }
+  handleClick() {
+    if (!this.disabled) {
+      this.checked = true;
+    }
+  }
+  handleFocus() {
+    this.hasFocus = true;
+    this.emit("sd-focus");
+  }
+  setInitialAttributes() {
+    this.setAttribute("role", "radio");
+    this.setAttribute("tabindex", "-1");
+    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+  }
+  handleCheckedChange() {
+    this.setAttribute("aria-checked", this.checked ? "true" : "false");
+    this.setAttribute("tabindex", this.checked ? "0" : "-1");
+  }
+  handleDisabledChange() {
+    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+  }
+  render() {
+    return html`<span part="base" class="${cx(
+      "sd-radio group inline-flex items-start items-center text-base leading-normal text-black cursor-pointer align-middle",
+      this.checked && "radio--checked",
+      this.disabled && "hover:cursor-not-allowed",
+      this.hasFocus && "radio--focused",
+      {
+        /* sizes, fonts */
+        sm: "small-size text-sm",
+        lg: "text-base"
+      }[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.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"
+    )}"></span>` : ""}</span><slot part="label" class="${cx(
+      "label ml-2 select-none inline-block",
+      this.disabled && "text-neutral-500" || this.invalid && "text-error" || "text-black"
+    )}"></slot></span>`;
+  }
+};
+SdRadio.styles = [
+  SolidElement.styles,
+  css`:host{display:block}:host(:focus-visible){outline:0}:host(:focus-visible) [part=control--checked],:host(:focus-visible) [part=control--unchecked]{outline:2px solid #00358e;outline-offset:2px}`
+];
+__decorateClass([
+  state()
+], SdRadio.prototype, "checked", 2);
+__decorateClass([
+  state()
+], SdRadio.prototype, "hasFocus", 2);
+__decorateClass([
+  property({ reflect: true })
+], SdRadio.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdRadio.prototype, "invalid", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdRadio.prototype, "disabled", 2);
+__decorateClass([
+  property()
+], SdRadio.prototype, "value", 2);
+__decorateClass([
+  watch("checked")
+], SdRadio.prototype, "handleCheckedChange", 1);
+__decorateClass([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], SdRadio.prototype, "handleDisabledChange", 1);
+SdRadio = __decorateClass([
+  customElement("sd-radio")
+], SdRadio);
+export {
+  SdRadio as default
+};

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

@@ -0,0 +1,52 @@
+import { FormControlController } from '../../internal/form';
+import SdButtonGroup from '../../_components/button-group/button-group';
+import SolidElement from '../../internal/solid-element';
+import type { SolidFormControl } from '../../internal/solid-element';
+export default class SdRadioGroup extends SolidElement implements SolidFormControl {
+    static dependencies: {
+        'sd-button-group': typeof SdButtonGroup;
+    };
+    protected readonly formControlController: FormControlController;
+    private readonly hasSlotController;
+    private customValidityMessage;
+    private validationTimeout;
+    defaultSlot: HTMLSlotElement;
+    validationInput: HTMLInputElement;
+    private hasButtonGroup;
+    defaultValue: string;
+    private invalid;
+    private errorText;
+    label: string;
+    name: string;
+    value: string;
+    size: 'lg' | 'sm';
+    form: string;
+    required: boolean;
+    orientation: 'horizontal' | 'vertical';
+    get validity(): ValidityState;
+    get validationMessage(): string;
+    connectedCallback(): void;
+    firstUpdated(): void;
+    private getAllRadios;
+    private handleRadioClick;
+    private handleKeyDown;
+    private handleLabelClick;
+    private handleInvalid;
+    private syncRadioElements;
+    private syncRadios;
+    private updateCheckedRadio;
+    handleSizeChange(): void;
+    handleInvalidChange(): void;
+    handleValueChange(): void;
+    checkValidity(): boolean;
+    getForm(): HTMLFormElement | null;
+    reportValidity(): boolean;
+    setCustomValidity(message?: string): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResultGroup[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sd-radio-group': SdRadioGroup;
+    }
+}