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

package/dist-versioned/internal/register-custom-element.d.ts

@@ -0,0 +1,19 @@
+interface Constructor<T> {
+    new (...args: any[]): T;
+}
+interface ClassDescriptor {
+    kind: 'class';
+    elements: ClassElement[];
+    finisher?: <T>(clazz: Constructor<T>) => undefined | Constructor<T>;
+}
+interface ClassElement {
+    kind: 'field' | 'method';
+    key: PropertyKey;
+    placement: 'static' | 'prototype' | 'own';
+    initializer?: () => void;
+    extras?: ClassElement[];
+    finisher?: <T>(clazz: Constructor<T>) => undefined | Constructor<T>;
+    descriptor?: PropertyDescriptor;
+}
+export declare const customElement: (tagName: string) => (classOrDescriptor: Constructor<HTMLElement> | ClassDescriptor) => any;
+export {};

package/dist-versioned/internal/register-custom-element.js

@@ -0,0 +1,25 @@
+const legacyCustomElement = (tagName, clazz) => {
+    if (window.customElements.get(tagName)) {
+        console.warn(`Custom element ${tagName} already defined. Registration skipped.`);
+        return clazz;
+    }
+    window.customElements.define(tagName, clazz);
+    return clazz;
+};
+const standardCustomElement = (tagName, descriptor) => {
+    const { kind, elements } = descriptor;
+    return {
+        kind,
+        elements,
+        finisher(clazz) {
+            if (window.customElements.get(tagName)) {
+                console.warn(`Custom element ${tagName} already defined. Registration skipped.`);
+                return;
+            }
+            window.customElements.define(tagName, clazz);
+        }
+    };
+};
+export const customElement = (tagName) => (classOrDescriptor) => typeof classOrDescriptor === 'function'
+    ? legacyCustomElement(tagName, classOrDescriptor)
+    : standardCustomElement(tagName, classOrDescriptor);

package/dist-versioned/internal/scroll.d.ts

@@ -0,0 +1,3 @@
+export declare function lockBodyScrolling(lockingEl: HTMLElement): void;
+export declare function unlockBodyScrolling(lockingEl: HTMLElement): void;
+export declare function scrollIntoView(element: HTMLElement, container: HTMLElement, direction?: 'horizontal' | 'vertical' | 'both', behavior?: 'smooth' | 'auto'): void;

package/dist-versioned/internal/scroll.js

@@ -0,0 +1,46 @@
+import { getOffset } from './offset';
+const locks = new Set();
+function getScrollbarWidth() {
+    const documentWidth = document.documentElement.clientWidth;
+    return Math.abs(window.innerWidth - documentWidth);
+}
+export function lockBodyScrolling(lockingEl) {
+    locks.add(lockingEl);
+    if (!document.body.classList.contains('sd-scroll-lock')) {
+        const scrollbarWidth = getScrollbarWidth();
+        document.body.classList.add('sd-scroll-lock');
+        document.body.style.setProperty('--sd-scroll-lock-size', `${scrollbarWidth}px`);
+    }
+}
+export function unlockBodyScrolling(lockingEl) {
+    locks.delete(lockingEl);
+    if (locks.size === 0) {
+        document.body.classList.remove('sd-scroll-lock');
+        document.body.style.removeProperty('--sd-scrollbar-width');
+    }
+}
+export function scrollIntoView(element, container, direction = 'vertical', behavior = 'smooth') {
+    const offset = getOffset(element, container);
+    const offsetTop = offset.top + container.scrollTop;
+    const offsetLeft = offset.left + container.scrollLeft;
+    const minX = container.scrollLeft;
+    const maxX = container.scrollLeft + container.offsetWidth;
+    const minY = container.scrollTop;
+    const maxY = container.scrollTop + container.offsetHeight;
+    if (direction === 'horizontal' || direction === 'both') {
+        if (offsetLeft < minX) {
+            container.scrollTo({ left: offsetLeft, behavior });
+        }
+        else if (offsetLeft + element.clientWidth > maxX) {
+            container.scrollTo({ left: offsetLeft - container.offsetWidth + element.clientWidth, behavior });
+        }
+    }
+    if (direction === 'vertical' || direction === 'both') {
+        if (offsetTop < minY) {
+            container.scrollTo({ top: offsetTop, behavior });
+        }
+        else if (offsetTop + element.clientHeight > maxY) {
+            container.scrollTo({ top: offsetTop - container.offsetHeight + element.clientHeight, behavior });
+        }
+    }
+}

package/dist-versioned/internal/slot.d.ts

@@ -0,0 +1,14 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+export declare class HasSlotController implements ReactiveController {
+    host: ReactiveControllerHost & Element;
+    slotNames: string[];
+    constructor(host: ReactiveControllerHost & Element, ...slotNames: string[]);
+    private hasDefaultSlot;
+    private hasNamedSlot;
+    test(slotName: string): boolean;
+    hostConnected(): void;
+    hostDisconnected(): void;
+    handleSlotChange(event: Event): void;
+}
+export declare function getInnerHTML(slot: HTMLSlotElement): string;
+export declare function getTextContent(slot: HTMLSlotElement | undefined | null): string;

package/dist-versioned/internal/slot.js

@@ -0,0 +1,70 @@
+export class HasSlotController {
+    constructor(host, ...slotNames) {
+        this.slotNames = [];
+        (this.host = host).addController(this);
+        this.slotNames = slotNames;
+        this.handleSlotChange = this.handleSlotChange.bind(this);
+    }
+    hasDefaultSlot() {
+        return [...this.host.childNodes].some(node => {
+            if (node.nodeType === node.TEXT_NODE && node.textContent.trim() !== '') {
+                return true;
+            }
+            if (node.nodeType === node.ELEMENT_NODE) {
+                const el = node;
+                const tagName = el.tagName.toLowerCase();
+                if (tagName === 'sd-visually-hidden') {
+                    return false;
+                }
+                if (!el.hasAttribute('slot')) {
+                    return true;
+                }
+            }
+            return false;
+        });
+    }
+    hasNamedSlot(name) {
+        return this.host.querySelector(`:scope > [slot="${name}"]`) !== null;
+    }
+    test(slotName) {
+        return slotName === '[default]' ? this.hasDefaultSlot() : this.hasNamedSlot(slotName);
+    }
+    hostConnected() {
+        this.host.shadowRoot.addEventListener('slotchange', this.handleSlotChange);
+    }
+    hostDisconnected() {
+        this.host.shadowRoot.removeEventListener('slotchange', this.handleSlotChange);
+    }
+    handleSlotChange(event) {
+        const slot = event.target;
+        if ((this.slotNames.includes('[default]') && !slot.name) || (slot.name && this.slotNames.includes(slot.name))) {
+            this.host.requestUpdate();
+        }
+    }
+}
+export function getInnerHTML(slot) {
+    const nodes = slot.assignedNodes({ flatten: true });
+    let html = '';
+    [...nodes].forEach(node => {
+        if (node.nodeType === Node.ELEMENT_NODE) {
+            html += node.outerHTML;
+        }
+        if (node.nodeType === Node.TEXT_NODE) {
+            html += node.textContent;
+        }
+    });
+    return html;
+}
+export function getTextContent(slot) {
+    if (!slot) {
+        return '';
+    }
+    const nodes = slot.assignedNodes({ flatten: true });
+    let text = '';
+    [...nodes].forEach(node => {
+        if (node.nodeType === Node.TEXT_NODE) {
+            text += node.textContent;
+        }
+    });
+    return text;
+}

package/dist-versioned/internal/solid-element.d.ts

@@ -0,0 +1,29 @@
+import { LitElement } from 'lit';
+export default class SolidElement extends LitElement {
+    dir: 'ltr' | 'rtl' | 'auto';
+    lang: string;
+    static styles: import("lit").CSSResult[];
+    emit(name: string, options?: CustomEventInit): CustomEvent<any>;
+}
+export interface SolidFormControl extends SolidElement {
+    name: string;
+    value: unknown;
+    disabled?: boolean;
+    defaultValue?: unknown;
+    defaultChecked?: boolean;
+    form?: string;
+    pattern?: string;
+    min?: number | Date | string;
+    max?: number | Date | string;
+    step?: number | 'any';
+    required?: boolean;
+    minlength?: number;
+    maxlength?: number;
+    readonly validity?: ValidityState;
+    readonly validationMessage?: string;
+    checkValidity: () => boolean;
+    reportValidity: () => boolean;
+    setCustomValidity: (message: string) => void;
+    showValidStyle?: boolean;
+    showInvalidStyle?: boolean;
+}

package/dist-versioned/internal/solid-element.js

@@ -0,0 +1,55 @@
+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 { LitElement, unsafeCSS } from 'lit';
+import { property } from 'lit/decorators.js';
+const css = unsafeCSS;
+export default class SolidElement extends LitElement {
+    static { this.styles = [
+        css `
+      /* Import CSS styles once to make them available in every component */
+      @import url('../styles/src/modules/interactive.css');
+      @import url('../styles/src/modules/paragraph.css');
+      @import url('../styles/src/modules/headline.css');
+
+      /* TailwindCSS directives have to come after imports */
+      @tailwind base;
+      @tailwind components;
+      @tailwind utilities;
+
+      :host {
+        box-sizing: border-box;
+      }
+
+      :host *,
+      :host *::before,
+      :host *::after {
+        box-sizing: inherit;
+      }
+
+      [hidden] {
+        display: none !important;
+      }
+    `
+    ]; }
+    emit(name, options) {
+        const event = new CustomEvent(name, {
+            bubbles: true,
+            cancelable: false,
+            composed: true,
+            detail: {},
+            ...options
+        });
+        this.dispatchEvent(event);
+        return event;
+    }
+}
+__decorate([
+    property()
+], SolidElement.prototype, "dir", void 0);
+__decorate([
+    property()
+], SolidElement.prototype, "lang", void 0);

package/dist-versioned/internal/string.d.ts

@@ -0,0 +1 @@
+export declare function uppercaseFirstLetter(string: string): string;

package/dist-versioned/internal/string.js

@@ -0,0 +1,3 @@
+export function uppercaseFirstLetter(string) {
+    return string.charAt(0).toUpperCase() + string.slice(1);
+}

package/dist-versioned/internal/tabbable.d.ts

@@ -0,0 +1,4 @@
+export declare function getTabbableBoundary(root: HTMLElement | ShadowRoot): {
+    start: HTMLElement | null;
+    end: HTMLElement | null;
+};

package/dist-versioned/internal/tabbable.js

@@ -0,0 +1,47 @@
+function isTabbable(el) {
+    const tag = el.tagName.toLowerCase();
+    if (el.getAttribute('tabindex') === '-1') {
+        return false;
+    }
+    if (el.hasAttribute('disabled')) {
+        return false;
+    }
+    if (el.hasAttribute('aria-disabled') && el.getAttribute('aria-disabled') !== 'false') {
+        return false;
+    }
+    if (tag === 'input' && el.getAttribute('type') === 'radio' && !el.hasAttribute('checked')) {
+        return false;
+    }
+    if (el.offsetParent === null && !(el.getRootNode() instanceof ShadowRoot)) {
+        return false;
+    }
+    if (window.getComputedStyle(el).visibility === 'hidden') {
+        return false;
+    }
+    if ((tag === 'audio' || tag === 'video') && el.hasAttribute('controls')) {
+        return true;
+    }
+    if (el.hasAttribute('tabindex')) {
+        return true;
+    }
+    if (el.hasAttribute('contenteditable') && el.getAttribute('contenteditable') !== 'false') {
+        return true;
+    }
+    return ['button', 'input', 'select', 'textarea', 'a', 'audio', 'video', 'summary'].includes(tag);
+}
+export function getTabbableBoundary(root) {
+    const allElements = [];
+    function walk(el) {
+        if (el instanceof HTMLElement) {
+            allElements.push(el);
+            if (el.shadowRoot !== null && el.shadowRoot.mode === 'open') {
+                walk(el.shadowRoot);
+            }
+        }
+        [...el.children].forEach((e) => walk(e));
+    }
+    walk(root);
+    const start = allElements.find(el => isTabbable(el)) ?? null;
+    const end = allElements.reverse().find(el => isTabbable(el)) ?? null;
+    return { start, end };
+}

package/dist-versioned/internal/test/data-testid-helpers.d.ts

@@ -0,0 +1 @@
+export declare const queryByTestId: <T extends Element>(container: HTMLElement, testId: string) => T | null;

package/dist-versioned/internal/test/data-testid-helpers.js

@@ -0,0 +1,3 @@
+export const queryByTestId = (container, testId) => {
+    return container.querySelector(`[data-testid="${testId}"]`);
+};

package/dist-versioned/internal/test/element-visible-overflow.d.ts

@@ -0,0 +1 @@
+export declare const isElementVisibleFromOverflow: (outerElement: Element, innerElement: Element) => boolean;

package/dist-versioned/internal/test/element-visible-overflow.js

@@ -0,0 +1,8 @@
+export const isElementVisibleFromOverflow = (outerElement, innerElement) => {
+    const outerRect = outerElement.getBoundingClientRect();
+    const innerRect = innerElement.getBoundingClientRect();
+    return (outerRect.top <= innerRect.bottom &&
+        innerRect.top <= outerRect.bottom &&
+        outerRect.left <= innerRect.right &&
+        innerRect.left <= outerRect.right);
+};

package/dist-versioned/internal/test/wait-for-scrolling.d.ts

@@ -0,0 +1 @@
+export declare const waitForScrollingToEnd: (element: Element, timeoutInMs?: number) => Promise<void>;

package/dist-versioned/internal/test/wait-for-scrolling.js

@@ -0,0 +1,26 @@
+export const waitForScrollingToEnd = (element, timeoutInMs = 500) => {
+    let lastLeft = element.scrollLeft;
+    let lastTop = element.scrollTop;
+    let framesWithoutChange = 0;
+    return new Promise((resolve, reject) => {
+        const timeout = window.setTimeout(() => {
+            reject(new Error('Waiting for scroll end timed out'));
+        }, timeoutInMs);
+        function checkScrollingChanged() {
+            if (element.scrollLeft !== lastLeft || element.scrollTop !== lastTop) {
+                framesWithoutChange = 0;
+                lastLeft = window.scrollX;
+                lastTop = window.scrollY;
+            }
+            else {
+                framesWithoutChange++;
+                if (framesWithoutChange >= 20) {
+                    clearTimeout(timeout);
+                    resolve();
+                }
+            }
+            window.requestAnimationFrame(checkScrollingChanged);
+        }
+        checkScrollingChanged();
+    });
+};

package/dist-versioned/internal/test.d.ts

@@ -0,0 +1,2 @@
+export declare function clickOnElement(el: Element, position?: 'top' | 'right' | 'bottom' | 'left' | 'center', offsetX?: number, offsetY?: number): Promise<void>;
+export declare function moveMouseOnElement(el: Element, position?: 'top' | 'right' | 'bottom' | 'left' | 'center', offsetX?: number, offsetY?: number): Promise<void>;

package/dist-versioned/internal/test.js

@@ -0,0 +1,40 @@
+import { sendMouse } from '@web/test-runner-commands';
+export async function clickOnElement(el, position = 'center', offsetX = 0, offsetY = 0) {
+    const { clickX, clickY } = determineMousePosition(el, position, offsetX, offsetY);
+    await sendMouse({ type: 'click', position: [clickX, clickY] });
+}
+function determineMousePosition(el, position, offsetX, offsetY) {
+    const { x, y, width, height } = el.getBoundingClientRect();
+    const centerX = Math.floor(x + window.pageXOffset + width / 2);
+    const centerY = Math.floor(y + window.pageYOffset + height / 2);
+    let clickX;
+    let clickY;
+    switch (position) {
+        case 'top':
+            clickX = centerX;
+            clickY = y;
+            break;
+        case 'right':
+            clickX = x + width - 1;
+            clickY = centerY;
+            break;
+        case 'bottom':
+            clickX = centerX;
+            clickY = y + height - 1;
+            break;
+        case 'left':
+            clickX = x;
+            clickY = centerY;
+            break;
+        default:
+            clickX = centerX;
+            clickY = centerY;
+    }
+    clickX += offsetX;
+    clickY += offsetY;
+    return { clickX, clickY };
+}
+export async function moveMouseOnElement(el, position = 'center', offsetX = 0, offsetY = 0) {
+    const { clickX, clickY } = determineMousePosition(el, position, offsetX, offsetY);
+    await sendMouse({ type: 'move', position: [clickX, clickY] });
+}

package/dist-versioned/internal/watch.d.ts

@@ -0,0 +1,11 @@
+import type { LitElement } from 'lit';
+type UpdateHandler = (prev?: unknown, next?: unknown) => void;
+type NonUndefined<A> = A extends undefined ? never : A;
+type UpdateHandlerFunctionKeys<T extends object> = {
+    [K in keyof T]-?: NonUndefined<T[K]> extends UpdateHandler ? K : never;
+}[keyof T];
+interface WatchOptions {
+    waitUntilFirstUpdate?: boolean;
+}
+export declare function watch(propertyName: string | string[], options?: WatchOptions): <ElemClass extends LitElement>(proto: ElemClass, decoratedFnName: UpdateHandlerFunctionKeys<ElemClass>) => void;
+export {};

package/dist-versioned/internal/watch.js

@@ -0,0 +1,25 @@
+export function watch(propertyName, options) {
+    const resolvedOptions = {
+        waitUntilFirstUpdate: false,
+        ...options
+    };
+    return (proto, decoratedFnName) => {
+        const { update } = proto;
+        const watchedProperties = Array.isArray(propertyName) ? propertyName : [propertyName];
+        proto.update = function (changedProps) {
+            watchedProperties.forEach(property => {
+                const key = property;
+                if (changedProps.has(key)) {
+                    const oldValue = changedProps.get(key);
+                    const newValue = this[key];
+                    if (oldValue !== newValue) {
+                        if (!resolvedOptions.waitUntilFirstUpdate || this.hasUpdated) {
+                            this[decoratedFnName](oldValue, newValue);
+                        }
+                    }
+                }
+            });
+            update.call(this, changedProps);
+        };
+    };
+}

package/dist-versioned/solid-components.css

@@ -0,0 +1,42 @@
+/*
+ * This file contains utility classes that can't be contained in a component and must be applied to the light DOM. None
+ * of the rules in this stylesheet should target component tags or HTML tags, and all classes *must* start with ".sd-"
+ * to reduce the possibility of collisions.
+ */
+
+.sd-scroll-lock {
+  padding-right: var(--sd-scroll-lock-size) !important;
+  overflow: hidden !important;
+}
+
+.sd-toast-stack {
+  position: fixed;
+  z-index: var(--sd-z-index-alert-group, 950);
+  box-sizing: border-box;
+  max-height: 100%;
+  max-width: 400px;
+}
+
+.sd-toast-stack--top-right {
+  top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
+  right: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
+  margin-right: var(--sd-spacing-4, 1rem) /* 16px */;
+}
+
+.sd-toast-stack--bottom-center {
+  bottom: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
+  --tw-translate-x: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+    inset-inline-start: 50%;
+}
+
+.sd-toast-stack sd-4-0-0-next-1-notification::part(base) {
+  --tw-shadow: var(--sd-shadow, 0px 1px 3px 0px rgb(81 81 81 / 75%));
+  --tw-shadow-colored: 0px 1px 3px 0px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.sd-toast-stack sd-4-0-0-next-1-notification::part(content) {
+  --tw-border-opacity: 1;
+  border-color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-border-opacity, 1)) /* Used for buttons, inverted focus state */;
+}

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

@@ -0,0 +1,51 @@
+export { default as SdAccordion } from './components/accordion/accordion.js';
+export { default as SdAccordionGroup } from './components/accordion-group/accordion-group.js';
+export { default as SdAudio } from './components/audio/audio.js';
+export { default as SdAnimation } from './components/animation/animation.js';
+export { default as SdBadge } from './components/badge/badge.js';
+export { default as SdBrandshape } from './components/brandshape/brandshape.js';
+export { default as SdButton } from './components/button/button.js';
+export { default as SdCarousel } from './components/carousel/carousel.js';
+export { default as SdCarouselItem } from './components/carousel-item/carousel-item.js';
+export { default as SdCheckbox } from './components/checkbox/checkbox.js';
+export { default as SdCheckboxGroup } from './components/checkbox-group/checkbox-group.js';
+export { default as SdCombobox } from './components/combobox/combobox.js';
+export { default as SdDialog } from './components/dialog/dialog.js';
+export { default as SdDivider } from './components/divider/divider.js';
+export { default as SdDrawer } from './components/drawer/drawer.js';
+export { default as SdDropdown } from './components/dropdown/dropdown.js';
+export { default as SdExpandable } from './components/expandable/expandable.js';
+export { default as SdFlipcard } from './components/flipcard/flipcard.js';
+export { default as SdHeader } from './components/header/header.js';
+export { default as SdIcon } from './components/icon/icon.js';
+export { default as SdInclude } from './components/include/include.js';
+export { default as SdInput } from './components/input/input.js';
+export { default as SdLink } from './components/link/link.js';
+export { default as SdMapMarker } from './components/map-marker/map-marker.js';
+export { default as SdNavigationItem } from './components/navigation-item/navigation-item.js';
+export { default as SdNotification } from './components/notification/notification.js';
+export { default as SdOption } from './components/option/option.js';
+export { default as SdOptgroup } from './components/optgroup/optgroup.js';
+export { default as SdPopup } from './components/popup/popup.js';
+export { default as SdQuickfact } from './components/quickfact/quickfact.js';
+export { default as SdRadio } from './components/radio/radio.js';
+export { default as SdRadioButton } from './components/radio-button/radio-button.js';
+export { default as SdRadioGroup } from './components/radio-group/radio-group.js';
+export { default as SdScrollable } from './components/scrollable/scrollable.js';
+export { default as SdSelect } from './components/select/select.js';
+export { default as SdSpinner } from './components/spinner/spinner.js';
+export { default as SdStep } from './components/step/step.js';
+export { default as SdStepGroup } from './components/step-group/step-group.js';
+export { default as SdSwitch } from './components/switch/switch.js';
+export { default as SdTab } from './components/tab/tab.js';
+export { default as SdTabGroup } from './components/tab-group/tab-group.js';
+export { default as SdTabPanel } from './components/tab-panel/tab-panel.js';
+export { default as SdTag } from './components/tag/tag.js';
+export { default as SdTeaser } from './components/teaser/teaser.js';
+export { default as SdTeaserMedia } from './components/teaser-media/teaser-media.js';
+export { default as SdTextarea } from './components/textarea/textarea.js';
+export { default as SdTooltip } from './components/tooltip/tooltip.js';
+export { default as SdVideo } from './components/video/video.js';
+export * from './utilities/icon-library';
+export * from './utilities/localize';
+export * from './utilities/autocomplete-config';