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

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

@@ -1,19 +0,0 @@
-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").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'sd-button-group': SdButtonGroup;
-    }
-}

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

@@ -1,75 +0,0 @@
-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.js

@@ -1,6 +0,0 @@
-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/accordion/accordion.d.ts

@@ -1,24 +0,0 @@
-import '../icon/icon';
-import { LocalizeController } from '../../utilities/localize';
-import SolidElement from '../../internal/solid-element';
-export default class SdAccordion extends SolidElement {
-    localize: LocalizeController;
-    accordion: HTMLElement;
-    header: HTMLElement;
-    body: HTMLElement;
-    open: boolean;
-    summary: string;
-    firstUpdated(): void;
-    protected handleSummaryClick(): void;
-    protected handleSummaryKeyDown(event: KeyboardEvent): void;
-    handleOpenChange(): Promise<void>;
-    show(): Promise<void>;
-    hide(): Promise<void>;
-    render(): import("lit").TemplateResult<1>;
-    static styles: import("lit").CSSResultGroup[];
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'sd-accordion': SdAccordion;
-    }
-}

package/dist/package/components/accordion/accordion.js

@@ -1,153 +0,0 @@
-import "../icon/icon.js";
-import { stopAnimations, animateTo, shimKeyframesHeightAuto } from "../../internal/animate.js";
-import { css, html } from "lit";
-import { customElement } from "../../internal/register-custom-element.js";
-import { setDefaultAnimation, getAnimation } from "../../utilities/animation-registry.js";
-import { LocalizeController } from "../../utilities/localize.js";
-import { query, property } from "lit/decorators.js";
-import { waitForEvent } from "../../internal/event.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 SdAccordion = class extends SolidElement {
-  constructor() {
-    super(...arguments);
-    this.localize = new LocalizeController(this);
-    this.open = false;
-  }
-  firstUpdated() {
-    this.body.hidden = !this.open;
-    this.body.style.height = this.open ? "auto" : "0";
-  }
-  handleSummaryClick() {
-    if (this.open) {
-      this.hide();
-    } else {
-      this.show();
-    }
-  }
-  handleSummaryKeyDown(event) {
-    if (event.key === "Enter" || event.key === " ") {
-      event.preventDefault();
-      if (this.open) {
-        this.hide();
-      } else {
-        this.show();
-      }
-    }
-    if (event.key === "ArrowUp" || event.key === "ArrowLeft") {
-      event.preventDefault();
-      this.hide();
-    }
-    if (event.key === "ArrowDown" || event.key === "ArrowRight") {
-      event.preventDefault();
-      this.show();
-    }
-  }
-  async handleOpenChange() {
-    if (this.open) {
-      const slShow = this.emit("sd-show", { cancelable: true });
-      if (slShow.defaultPrevented) {
-        this.open = false;
-        return;
-      }
-      await stopAnimations(this.body);
-      this.body.hidden = false;
-      const { keyframes, options } = getAnimation(this, "accordion.show", { dir: this.localize.dir() });
-      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
-      this.body.style.height = "auto";
-      this.emit("sd-after-show");
-    } else {
-      const slHide = this.emit("sd-hide", { cancelable: true });
-      if (slHide.defaultPrevented) {
-        this.open = true;
-        return;
-      }
-      await stopAnimations(this.body);
-      const { keyframes, options } = getAnimation(this, "accordion.hide", { dir: this.localize.dir() });
-      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
-      this.body.hidden = true;
-      this.body.style.height = "auto";
-      this.emit("sd-after-hide");
-    }
-  }
-  /** Shows the accordion. */
-  async show() {
-    if (this.open) {
-      return void 0;
-    }
-    this.open = true;
-    return waitForEvent(this, "sd-after-show");
-  }
-  /** Hides the accordion */
-  async hide() {
-    if (!this.open) {
-      return void 0;
-    }
-    this.open = false;
-    return waitForEvent(this, "sd-after-hide");
-  }
-  render() {
-    return html`<div part="base" class="border-y border-neutral-400"><header part="header" id="header" class="${cx(
-      "flex text-base gap-4 font-bold items-center cursor-pointer select-none px-4 py-3 focus-visible:focus-outline text-primary hover:bg-neutral-200 relative group"
-    )}" role="button" aria-expanded="${this.open ? "true" : "false"}" aria-controls="content" tabindex="0" @click="${this.handleSummaryClick}" @keydown="${this.handleSummaryKeyDown}"><div part="summary-border" class="${cx(
-      !this.open && "opacity-0",
-      "w-1 bg-accent absolute left-0 transition-all h-[calc(100%-16px)] group-hover:h-full"
-    )}"></div><slot name="summary" part="summary" class="flex flex-auto items-center text-left">${this.summary}</slot><span part="summary-icon" class="${cx(
-      "flex flex-grow-0 flex-shrink-0 flex-auto items-center transition-all ease-in-out duration-300 text-xl",
-      this.open && "rotate-180"
-    )}"><slot name="expand-icon" class="${cx(this.open && "hidden")}"><sd-icon library="system" name="chevron-down"></sd-icon></slot><slot name="collapse-icon" class="${cx(!this.open && "hidden")}"><sd-icon library="system" name="chevron-down"></sd-icon></slot></span></header><div part="content" id="content" class="overflow-hidden"><slot part="content__slot" class="block px-4 py-6" role="region" aria-labelledby="header"></slot></div></div>`;
-  }
-};
-SdAccordion.styles = [
-  SolidElement.styles,
-  css`:host{display:block}`
-];
-__decorateClass([
-  query('[part="base"]')
-], SdAccordion.prototype, "accordion", 2);
-__decorateClass([
-  query('[part="header"]')
-], SdAccordion.prototype, "header", 2);
-__decorateClass([
-  query('[part="content"]')
-], SdAccordion.prototype, "body", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], SdAccordion.prototype, "open", 2);
-__decorateClass([
-  property()
-], SdAccordion.prototype, "summary", 2);
-__decorateClass([
-  watch("open", { waitUntilFirstUpdate: true })
-], SdAccordion.prototype, "handleOpenChange", 1);
-SdAccordion = __decorateClass([
-  customElement("sd-accordion")
-], SdAccordion);
-setDefaultAnimation("accordion.show", {
-  keyframes: [
-    { height: "0", opacity: "0" },
-    { height: "auto", opacity: "1" }
-  ],
-  options: { duration: 300, easing: "ease" }
-});
-setDefaultAnimation("accordion.hide", {
-  keyframes: [
-    { height: "auto", opacity: "1" },
-    { height: "0", opacity: "0" }
-  ],
-  options: { duration: 300, easing: "ease" }
-});
-export {
-  SdAccordion as default
-};

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

@@ -1,16 +0,0 @@
-import '../accordion/accordion';
-import SolidElement from '../../internal/solid-element';
-export default class SdAccordionGroup extends SolidElement {
-    _accordionsInDefaultSlot: HTMLElement[];
-    closeOthers: boolean;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    private handleAccordionShow;
-    render(): import("lit").TemplateResult<1>;
-    static styles: import("lit").CSSResultGroup[];
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'sd-accordion-group': SdAccordionGroup;
-    }
-}

package/dist/package/components/accordion-group/accordion-group.js

@@ -1,63 +0,0 @@
-import "../accordion/accordion.js";
-import { css, html } from "lit";
-import { customElement } from "../../internal/register-custom-element.js";
-import { queryAssignedElements, property } from "lit/decorators.js";
-import componentStyles from "../../styles/component.styles.js";
-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 SdAccordionGroup = class extends SolidElement {
-  constructor() {
-    super(...arguments);
-    this.closeOthers = false;
-    this.handleAccordionShow = (event) => {
-      if (this.closeOthers) {
-        this._accordionsInDefaultSlot.forEach((accordionElement) => {
-          if (accordionElement === event.target) {
-            return;
-          }
-          if (accordionElement.parentNode !== event.target.parentNode) {
-            return;
-          }
-          accordionElement.removeAttribute("open");
-        });
-      }
-    };
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener("sd-show", this.handleAccordionShow);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.removeEventListener("sd-show", this.handleAccordionShow);
-  }
-  render() {
-    return html`<div part="base"><slot></slot></div>`;
-  }
-};
-SdAccordionGroup.styles = [
-  componentStyles,
-  SolidElement.styles,
-  css`:host{display:block}::slotted(sd-accordion:not(:first-of-type)){margin-top:-1px}`
-];
-__decorateClass([
-  queryAssignedElements({ selector: "sd-accordion" })
-], SdAccordionGroup.prototype, "_accordionsInDefaultSlot", 2);
-__decorateClass([
-  property({ attribute: "close-others", type: Boolean })
-], SdAccordionGroup.prototype, "closeOthers", 2);
-SdAccordionGroup = __decorateClass([
-  customElement("sd-accordion-group")
-], SdAccordionGroup);
-export {
-  SdAccordionGroup as default
-};

package/dist/package/components/audio/audio.d.ts

@@ -1,55 +0,0 @@
-import { Wave } from './wave';
-import SolidElement from '../../internal/solid-element';
-import type SdDrawer from '../drawer/drawer';
-export default class SdAudio extends SolidElement {
-    private readonly localize;
-    private readonly hasSlotController;
-    reversedLayout: boolean;
-    hideTimestamps: boolean;
-    animated: boolean;
-    inverted: boolean;
-    speed: number;
-    currentTime: string;
-    duration: string;
-    isPlaying: boolean;
-    isMuted: boolean;
-    progress: number;
-    progressSlider: HTMLInputElement;
-    audioPlayerContainer: HTMLElement;
-    drawer: SdDrawer;
-    canvas: HTMLCanvasElement;
-    context: CanvasRenderingContext2D;
-    waveList: Wave[];
-    constructor();
-    firstUpdated(): void;
-    updated(changedProperties: Map<string | number | symbol, unknown>): void;
-    private get audioElement();
-    private setAudioProgress;
-    private updateCurrentTime;
-    private updateAudioDuration;
-    playAudio(): void;
-    pauseAudio(): void;
-    handleAudioEnd(): void;
-    private toggleMute;
-    private toggleMuteKeydown;
-    togglePlaybackSpeed(): void;
-    private togglePlaybackSpeedKeydown;
-    private formatTime;
-    private handleAudioProgress;
-    private handleAudioProgressKeydown;
-    private showTranscript;
-    private showTranscriptKeydown;
-    private rgbToHex;
-    private initAnimation;
-    private drawStillWaves;
-    private stopAnimation;
-    private clear;
-    draw(): Promise<void>;
-    render(): import("lit").TemplateResult<1>;
-    static styles: import("lit").CSSResultGroup[];
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'sd-audio': SdAudio;
-    }
-}