@solid-design-system/components 3.24.0 → 4.0.0-next.1

package/dist-versioned/_components/menu/menu.d.ts

@@ -0,0 +1,24 @@
+import SolidElement from '../../internal/solid-element';
+import type SdMenuItem from '../menu-item/menu-item';
+export interface MenuSelectEventDetail {
+    item: SdMenuItem;
+}
+export default class SdMenu extends SolidElement {
+    static styles: import("lit").CSSResult[];
+    defaultSlot: HTMLSlotElement;
+    connectedCallback(): void;
+    private getAllItems;
+    private handleClick;
+    private handleKeyDown;
+    private handleMouseDown;
+    private handleSlotChange;
+    private isMenuItem;
+    getCurrentItem(): SdMenuItem | undefined;
+    setCurrentItem(item: SdMenuItem): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sd-menu': SdMenu;
+    }
+}

package/dist-versioned/_components/menu/menu.js

@@ -0,0 +1,117 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement } from '../../internal/register-custom-element';
+import { html } from 'lit';
+import { query } from 'lit/decorators.js';
+import SolidElement from '../../internal/solid-element';
+import styles from './menu.styles';
+let SdMenu = class SdMenu extends SolidElement {
+    static { this.styles = [...SolidElement.styles, styles]; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('role', 'menu');
+    }
+    getAllItems() {
+        return [...this.defaultSlot.assignedElements({ flatten: true })].filter((el) => {
+            if (el.inert || !this.isMenuItem(el)) {
+                return false;
+            }
+            return true;
+        });
+    }
+    handleClick(event) {
+        const target = event.target;
+        const item = target.closest('sd-menu-item');
+        if (!item || item.disabled || item.inert) {
+            return;
+        }
+        if (item.type === 'checkbox') {
+            item.checked = !item.checked;
+        }
+        this.emit('sd-4-0-0-next-1-select', { detail: { item } });
+    }
+    handleKeyDown(event) {
+        if (event.key === 'Enter') {
+            const item = this.getCurrentItem();
+            event.preventDefault();
+            item?.click();
+        }
+        if (event.key === ' ') {
+            event.preventDefault();
+        }
+        if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
+            const items = this.getAllItems();
+            const activeItem = this.getCurrentItem();
+            let index = activeItem ? items.indexOf(activeItem) : 0;
+            if (items.length > 0) {
+                event.preventDefault();
+                if (event.key === 'ArrowDown') {
+                    index++;
+                }
+                else if (event.key === 'ArrowUp') {
+                    index--;
+                }
+                else if (event.key === 'Home') {
+                    index = 0;
+                }
+                else if (event.key === 'End') {
+                    index = items.length - 1;
+                }
+                if (index < 0) {
+                    index = items.length - 1;
+                }
+                if (index > items.length - 1) {
+                    index = 0;
+                }
+                this.setCurrentItem(items[index]);
+                items[index].focus();
+            }
+        }
+    }
+    handleMouseDown(event) {
+        const target = event.target;
+        if (this.isMenuItem(target)) {
+            this.setCurrentItem(target);
+        }
+    }
+    handleSlotChange() {
+        const items = this.getAllItems();
+        if (items.length > 0) {
+            this.setCurrentItem(items[0]);
+        }
+    }
+    isMenuItem(item) {
+        return (item.tagName.toLowerCase() === 'sd-menu-item' ||
+            ['menuitem', 'menuitemcheckbox', 'menuitemradio'].includes(item.getAttribute('role') ?? ''));
+    }
+    getCurrentItem() {
+        return this.getAllItems().find(i => i.getAttribute('tabindex') === '0');
+    }
+    setCurrentItem(item) {
+        const items = this.getAllItems();
+        items.forEach(i => {
+            i.setAttribute('tabindex', i === item ? '0' : '-1');
+        });
+    }
+    render() {
+        return html `
+      <slot
+        @slotchange=${this.handleSlotChange}
+        @click=${this.handleClick}
+        @keydown=${this.handleKeyDown}
+        @mousedown=${this.handleMouseDown}
+      ></slot>
+    `;
+    }
+};
+__decorate([
+    query('slot')
+], SdMenu.prototype, "defaultSlot", void 0);
+SdMenu = __decorate([
+    customElement('sd-menu')
+], SdMenu);
+export default SdMenu;

package/dist-versioned/_components/menu/menu.styles.d.ts

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

package/dist-versioned/_components/menu/menu.styles.js

@@ -0,0 +1,17 @@
+import { css } from 'lit';
+export default css `
+  :host {
+    display: block;
+    position: relative;
+    background: var(--sd-panel-background-color);
+    border: solid var(--sd-panel-border-width) var(--sd-panel-border-color);
+    border-radius: var(--sd-border-radius-medium);
+    padding: var(--sd-spacing-x-small) 0;
+    overflow: auto;
+    overscroll-behavior: none;
+  }
+
+  ::slotted(sd-4-0-0-next-1-divider) {
+    --spacing: var(--sd-spacing-x-small);
+  }
+`;

package/dist-versioned/_components/menu-item/menu-item.d.ts

@@ -0,0 +1,23 @@
+import '../icon/icon';
+import SolidElement from '../../internal/solid-element';
+export default class SdMenuItem extends SolidElement {
+    static styles: import("lit").CSSResult[];
+    private cachedTextLabel;
+    defaultSlot: HTMLSlotElement;
+    menuItem: HTMLElement;
+    type: 'normal' | 'checkbox';
+    checked: boolean;
+    value: string;
+    disabled: boolean;
+    private handleDefaultSlotChange;
+    handleCheckedChange(): void;
+    handleDisabledChange(): void;
+    handleTypeChange(): void;
+    getTextLabel(): string;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sd-menu-item': SdMenuItem;
+    }
+}

package/dist-versioned/_components/menu-item/menu-item.js

@@ -0,0 +1,123 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import '../icon/icon';
+import { classMap } from 'lit/directives/class-map.js';
+import { customElement } from '../../internal/register-custom-element';
+import { getTextContent } from '../../internal/slot';
+import { html } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { watch } from '../../internal/watch';
+import SolidElement from '../../internal/solid-element';
+import styles from './menu-item.styles';
+let SdMenuItem = class SdMenuItem extends SolidElement {
+    constructor() {
+        super(...arguments);
+        this.type = 'normal';
+        this.checked = false;
+        this.value = '';
+        this.disabled = false;
+    }
+    static { this.styles = [...SolidElement.styles, styles]; }
+    handleDefaultSlotChange() {
+        const textLabel = this.getTextLabel();
+        if (typeof this.cachedTextLabel === 'undefined') {
+            this.cachedTextLabel = textLabel;
+            return;
+        }
+        if (textLabel !== this.cachedTextLabel) {
+            this.cachedTextLabel = textLabel;
+            this.emit('slotchange', { bubbles: true, composed: false, cancelable: false });
+        }
+    }
+    handleCheckedChange() {
+        if (this.checked && this.type !== 'checkbox') {
+            this.checked = false;
+            console.error('The checked attribute can only be used on menu items with type="checkbox"', this);
+            return;
+        }
+        if (this.type === 'checkbox') {
+            this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
+        }
+        else {
+            this.removeAttribute('aria-checked');
+        }
+    }
+    handleDisabledChange() {
+        this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
+    }
+    handleTypeChange() {
+        if (this.type === 'checkbox') {
+            this.setAttribute('role', 'menuitemcheckbox');
+            this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
+        }
+        else {
+            this.setAttribute('role', 'menuitem');
+            this.removeAttribute('aria-checked');
+        }
+    }
+    getTextLabel() {
+        return getTextContent(this.defaultSlot);
+    }
+    render() {
+        return html `
+      <div
+        part="base"
+        class=${classMap({
+            'menu-item': true,
+            'menu-item--checked': this.checked,
+            'menu-item--disabled': this.disabled,
+            'menu-item--has-submenu': false
+        })}
+      >
+        <span part="checked-icon" class="menu-item__check">
+          <sd-4-0-0-next-1-icon name="check" library="system" aria-hidden="true"></sd-4-0-0-next-1-icon>
+        </span>
+
+        <slot name="prefix" part="prefix" class="menu-item__prefix"></slot>
+
+        <slot part="label" class="menu-item__label" @slotchange=${this.handleDefaultSlotChange}></slot>
+
+        <slot name="suffix" part="suffix" class="menu-item__suffix"></slot>
+
+        <span class="menu-item__chevron">
+          <sd-4-0-0-next-1-icon name="chevron-right" library="system" aria-hidden="true"></sd-4-0-0-next-1-icon>
+        </span>
+      </div>
+    `;
+    }
+};
+__decorate([
+    query('slot:not([name])')
+], SdMenuItem.prototype, "defaultSlot", void 0);
+__decorate([
+    query('.menu-item')
+], SdMenuItem.prototype, "menuItem", void 0);
+__decorate([
+    property()
+], SdMenuItem.prototype, "type", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SdMenuItem.prototype, "checked", void 0);
+__decorate([
+    property()
+], SdMenuItem.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SdMenuItem.prototype, "disabled", void 0);
+__decorate([
+    watch('checked')
+], SdMenuItem.prototype, "handleCheckedChange", null);
+__decorate([
+    watch('disabled')
+], SdMenuItem.prototype, "handleDisabledChange", null);
+__decorate([
+    watch('type')
+], SdMenuItem.prototype, "handleTypeChange", null);
+SdMenuItem = __decorate([
+    customElement('sd-menu-item')
+], SdMenuItem);
+export default SdMenuItem;

package/dist-versioned/_components/menu-item/menu-item.styles.d.ts

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

package/dist-versioned/_components/menu-item/menu-item.styles.js

@@ -0,0 +1,97 @@
+import { css } from 'lit';
+export default css `
+  :host {
+    display: block;
+  }
+
+  :host([inert]) {
+    display: none;
+  }
+
+  .menu-item {
+    position: relative;
+    display: flex;
+    align-items: stretch;
+    font-family: var(--sd-font-sans);
+    font-size: var(--sd-font-size-medium);
+    font-weight: var(--sd-font-weight-normal);
+    line-height: var(--sd-line-height-normal);
+    letter-spacing: var(--sd-letter-spacing-normal);
+    color: var(--sd-color-neutral-700);
+    padding: var(--sd-spacing-2x-small) var(--sd-spacing-2x-small);
+    transition: var(--sd-transition-fast) fill;
+    user-select: none;
+    white-space: nowrap;
+    cursor: pointer;
+  }
+
+  .menu-item.menu-item--disabled {
+    outline: none;
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .menu-item .menu-item__label {
+    flex: 1 1 auto;
+    display: inline-block;
+  }
+
+  .menu-item .menu-item__prefix {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+  }
+
+  .menu-item .menu-item__prefix::slotted(*) {
+    margin-inline-end: var(--sd-spacing-x-small);
+  }
+
+  .menu-item .menu-item__suffix {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+  }
+
+  .menu-item .menu-item__suffix::slotted(*) {
+    margin-inline-start: var(--sd-spacing-x-small);
+  }
+
+  :host(:focus) {
+    outline: none;
+  }
+
+  :host(:hover:not([aria-disabled='true'])) .menu-item {
+    background-color: var(--sd-color-neutral-100);
+    color: var(--sd-color-neutral-1000);
+  }
+
+  :host(:focus-visible) .menu-item {
+    outline: none;
+    background-color: var(--sd-color-primary-600);
+    color: var(--sd-color-neutral-0);
+    opacity: 1;
+  }
+
+  .menu-item .menu-item__check,
+  .menu-item .menu-item__chevron {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5em;
+    visibility: hidden;
+  }
+
+  .menu-item--checked .menu-item__check,
+  .menu-item--has-submenu .menu-item__chevron {
+    visibility: visible;
+  }
+
+  @media (forced-colors: active) {
+    :host(:hover:not([aria-disabled='true'])) .menu-item,
+    :host(:focus-visible) .menu-item {
+      outline: dashed 1px SelectedItem;
+      outline-offset: -1px;
+    }
+  }
+`;

package/dist-versioned/chunks/chunk.2IBVAXOX.js

@@ -0,0 +1,176 @@
+import {
+  defaultValue
+} from "./chunk.GI7VDIWX.js";
+import {
+  FormControlController
+} from "./chunk.KVKRZJS7.js";
+import {
+  watch
+} from "./chunk.X2OQMWGY.js";
+import {
+  SolidElement,
+  customElement
+} from "./chunk.UDZYWRPT.js";
+import {
+  __decorateClass
+} from "./chunk.S3NI7NKU.js";
+
+// src/components/switch/switch.ts
+import { css, html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { live } from "lit/directives/live.js";
+import { property, query, state } from "lit/decorators.js";
+import cx from "classix";
+var SdSwitch = class extends SolidElement {
+  constructor() {
+    super(...arguments);
+    this.formControlController = new FormControlController(this, {
+      value: (control) => control.checked ? control.value || "on" : void 0,
+      defaultValue: (control) => control.defaultChecked,
+      setValue: (control, checked) => control.checked = checked
+    });
+    this.showInvalidStyle = false;
+    this.title = "";
+    this.name = "";
+    this.disabled = false;
+    this.checked = false;
+    this.defaultChecked = false;
+    this.form = "";
+    this.required = false;
+  }
+  /** Gets the validity state object */
+  get validity() {
+    return this.input.validity;
+  }
+  firstUpdated() {
+    this.formControlController.updateValidity();
+  }
+  handleClick() {
+    this.checked = !this.checked;
+    this.emit("sd-change");
+  }
+  handleBlur() {
+    this.emit("sd-blur");
+  }
+  handleInput() {
+    this.emit("sd-input");
+  }
+  handleInvalid(event) {
+    this.formControlController.setValidity(false);
+    this.formControlController.emitInvalidEvent(event);
+    this.invalidMessage.textContent = event.target.validationMessage;
+  }
+  handleFocus() {
+    this.emit("sd-focus");
+  }
+  handleDisabledChange() {
+    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
+    this.formControlController.setValidity(this.disabled);
+  }
+  handleStateChange() {
+    this.input.checked = this.checked;
+    this.formControlController.updateValidity();
+  }
+  /** Simulates a click on the switch. */
+  click() {
+    this.input.click();
+  }
+  /** Sets focus on the switch. */
+  focus(options) {
+    this.input.focus(options);
+  }
+  /** Removes focus from the switch. */
+  blur() {
+    this.input.blur();
+  }
+  /** Checks for validity but does not show a validation message. Returns true when valid and false when invalid. */
+  checkValidity() {
+    return this.input.checkValidity();
+  }
+  /** Gets the associated form, if one exists. */
+  getForm() {
+    return this.formControlController.getForm();
+  }
+  /** Checks for validity and shows a validation message if the control is invalid. */
+  reportValidity() {
+    return this.input.reportValidity();
+  }
+  /**
+   * Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear
+   * the custom validation message, call this method with an empty string.
+   */
+  setCustomValidity(message) {
+    this.input.setCustomValidity(message);
+    this.formControlController.updateValidity();
+  }
+  render() {
+    return html`<label part="base" class="${cx(
+      "group flex items-center text-base leading-normal text-black cursor-pointer",
+      this.disabled && "hover:cursor-not-allowed"
+    )}"><input id="input" class="peer absolute opacity-0 p-0 m-0 pointer-events-none" type="checkbox" role="switch" title="${this.title}" name="${this.name}" value="${ifDefined(this.value)}" .checked="${live(this.checked)}" .disabled="${this.disabled}" .required="${this.required}" aria-checked="${this.checked ? "true" : "false"}" aria-invalid="${this.showInvalidStyle}" aria-describedby="invalid-message" @click="${this.handleClick}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @blur="${this.handleBlur}" @focus="${this.handleFocus}"> <span id="control" part="control ${this.checked ? " control--checked" : "control--unchecked"}" class="${cx(
+      `relative flex flex-initial items-center justify-center border rounded-full h-4 w-8 transition-colors ease duration-100
+            peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2
+            peer-focus-visible:outline-primary`,
+      this.disabled && this.checked ? "border-neutral-500 bg-neutral-500" : this.disabled ? "border-neutral-500" : this.showInvalidStyle ? "border-error bg-error hover:bg-error-400" : this.checked ? "border-accent bg-accent hover:bg-accent-550 group-hover:bg-accent-550" : "border-neutral-800 bg-white hover:bg-neutral-200 group-hover:bg-neutral-200"
+    )}"><span id="thumb" part="thumb" class="${cx(
+      "w-2.5 h-2.5 rounded-full transition-transform ease-in-out duration-200",
+      this.disabled && this.checked ? "bg-white" : this.disabled ? "-translate-x-2 bg-neutral-500" : this.showInvalidStyle ? "bg-white -translate-x-2" : this.checked ? "translate-x-2 bg-white" : "bg-neutral-800 -translate-x-2"
+    )}"></span> </span><span part="label" id="label" class="${cx(
+      "select-none inline-block ml-2",
+      this.disabled ? "text-neutral-500" : this.showInvalidStyle ? "text-error" : "text-black"
+    )}"><slot></slot></span></label> ${this.formControlController.renderInvalidMessage()}`;
+  }
+};
+/**
+ * Inherits Tailwind classes and includes additional styling.
+ */
+SdSwitch.styles = [
+  ...SolidElement.styles,
+  css`:host{display:block;width:-moz-max-content;width:max-content}:host(:focus-visible){outline:2px solid transparent;outline-offset:2px}:host([required]) #label:after{content:" *"}`
+];
+__decorateClass([
+  query("input")
+], SdSwitch.prototype, "input", 2);
+__decorateClass([
+  query("#invalid-message")
+], SdSwitch.prototype, "invalidMessage", 2);
+__decorateClass([
+  state()
+], SdSwitch.prototype, "showInvalidStyle", 2);
+__decorateClass([
+  property()
+], SdSwitch.prototype, "title", 2);
+__decorateClass([
+  property()
+], SdSwitch.prototype, "name", 2);
+__decorateClass([
+  property()
+], SdSwitch.prototype, "value", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdSwitch.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdSwitch.prototype, "checked", 2);
+__decorateClass([
+  defaultValue("checked")
+], SdSwitch.prototype, "defaultChecked", 2);
+__decorateClass([
+  property({ reflect: true })
+], SdSwitch.prototype, "form", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SdSwitch.prototype, "required", 2);
+__decorateClass([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], SdSwitch.prototype, "handleDisabledChange", 1);
+__decorateClass([
+  watch(["checked"], { waitUntilFirstUpdate: true })
+], SdSwitch.prototype, "handleStateChange", 1);
+SdSwitch = __decorateClass([
+  customElement("sd-4-0-0-next-1-switch")
+], SdSwitch);
+
+export {
+  SdSwitch
+};