@solid-design-system/components 3.21.0 → 3.22.0

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

@@ -10,7 +10,7 @@ export default class SdButtonGroup extends SolidElement {
     private handleMouseOver;
     private handleMouseOut;
     private handleSlotChange;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -14,7 +14,7 @@ export default class SdAccordion extends SolidElement {
     handleOpenChange(): Promise<void>;
     show(): Promise<void>;
     hide(): Promise<void>;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     static styles: import("lit").CSSResultGroup[];
 }
 declare global {

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

@@ -6,7 +6,7 @@ export default class SdAccordionGroup extends SolidElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     private handleAccordionShow;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     static styles: import("lit").CSSResultGroup[];
 }
 declare global {

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

@@ -45,7 +45,7 @@ export default class SdAudio extends SolidElement {
     private stopAnimation;
     private clear;
     draw(): Promise<void>;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     static styles: import("lit").CSSResultGroup[];
 }
 declare global {

package/dist/package/components/badge/badge.d.ts

@@ -3,7 +3,7 @@ export default class SdBadge extends SolidElement {
     size: 'lg' | 'md' | 'sm';
     variant: 'default' | 'success' | 'error';
     inverted: boolean;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     static styles: import("lit").CSSResultGroup[];
 }
 declare global {

package/dist/package/components/brandshape/brandshape.d.ts

@@ -1,5 +1,5 @@
 import SolidElement from '../../internal/solid-element';
-import type { TemplateResult } from 'lit-html';
+import type { TemplateResult } from 'lit';
 type Breakpoints = 0 | 414 | 640;
 export default class SdBrandshape extends SolidElement {
     containerElem: HTMLElement;

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

@@ -42,7 +42,7 @@ export default class SdButton extends SolidElement implements SolidFormControl {
     getForm(): HTMLFormElement | null;
     reportValidity(): boolean;
     setCustomValidity(message: string): void;
-    render(): import("lit-html").TemplateResult;
+    render(): import("lit").TemplateResult;
     static styles: import("lit").CSSResultGroup[];
 }
 declare global {

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

@@ -166,12 +166,12 @@ let SdButton = class extends SolidElement {
       {
         /* variants */
         primary: !this.inverted ? `text-white bg-primary border-transparent
-           hover:text-primary-100 hover:bg-primary-500
-           active:text-primary-200 active:bg-primary-800
-           disabled:bg-neutral-500` : `text-primary bg-white border-transparent
-           hover:text-primary-500 hover:bg-primary-100
-           active:text-primary-800 active:bg-primary-200
-           disabled:bg-neutral-600 disabled:text-white`,
+          hover:text-primary-100 hover:bg-primary-500
+          active:text-primary-200 active:bg-primary-800
+          disabled:bg-neutral-500` : `text-primary bg-white border-transparent
+          hover:text-primary-500 hover:bg-primary-100
+          active:text-primary-800 active:bg-primary-200
+          disabled:bg-neutral-600 disabled:text-white`,
         secondary: !this.inverted ? `text-primary border-primary
           hover:text-primary-500 hover:border-primary-500 hover:bg-primary-100
           active:text-primary-800 active:border-primary-800 active:bg-primary-200

package/dist/package/components/carousel/carousel.d.ts

@@ -42,7 +42,7 @@ export default class SdCarousel extends SolidElement {
     next(behavior?: ScrollBehavior): void;
     nextTillFirst(behavior?: ScrollBehavior): void;
     goToSlide(index: number, behavior?: ScrollBehavior): void;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     static styles: import("lit").CSSResultGroup[];
 }
 declare global {

package/dist/package/components/carousel-item/carousel-item.d.ts

@@ -2,7 +2,7 @@ import SolidElement from '../../internal/solid-element.js';
 export default class SdCarouselItem extends SolidElement {
     static isCarouselItem(node: Node): boolean;
     connectedCallback(): void;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     static styles: import("lit").CSSResultGroup[];
 }
 declare global {

package/dist/package/components/checkbox/checkbox.d.ts

@@ -32,7 +32,7 @@ export default class SdCheckbox extends SolidElement implements SolidFormControl
     getForm(): HTMLFormElement | null;
     reportValidity(): boolean;
     setCustomValidity(message: string): void;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     static styles: import("lit").CSSResultGroup[];
 }
 declare global {

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

@@ -10,7 +10,7 @@ export default class SdCheckboxGroup extends SolidElement {
     private syncCheckboxes;
     handleSizeChange(): void;
     handleInvalid(): void;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     static styles: import("lit").CSSResultGroup[];
 }
 declare global {

package/dist/package/components/dialog/dialog.d.ts

@@ -23,7 +23,7 @@ export default class SdDialog extends SolidElement {
     handleOpenChange(): Promise<void>;
     show(): Promise<void>;
     hide(): Promise<void>;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     static styles: import("lit").CSSResultGroup[];
 }
 declare global {

package/dist/package/components/divider/divider.d.ts

@@ -3,7 +3,7 @@ export default class SdDivider extends SolidElement {
     orientation: 'horizontal' | 'vertical';
     inverted: boolean;
     connectedCallback(): void;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     static styles: import("lit").CSSResultGroup[];
 }
 declare global {

package/dist/package/components/drawer/drawer.d.ts

@@ -25,7 +25,7 @@ export default class SdDrawer extends SolidElement {
     handleNoModalChange(): void;
     show(): Promise<void>;
     hide(): Promise<void>;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     static styles: import("lit").CSSResultGroup[];
 }
 declare global {

package/dist/package/components/dropdown/dropdown.d.ts

@@ -40,7 +40,7 @@ export default class SdDropdown extends SolidElement {
     addOpenListeners(): void;
     removeOpenListeners(): void;
     handleOpenChange(): Promise<void>;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     static styles: import("lit").CSSResultGroup[];
 }
 declare global {

package/dist/package/components/expandable/expandable.d.ts

@@ -11,7 +11,7 @@ export default class SdExpandable extends SolidElement {
     onOpenChange(): void;
     show(): Promise<void>;
     hide(): Promise<void>;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     firstUpdated(): void;
     cloneContentToLightDOM(): void;
     static styles: import("lit").CSSResultGroup[];

package/dist/package/components/flipcard/flipcard.d.ts

@@ -13,7 +13,7 @@ export default class SdFlipcard extends SolidElement {
     private handleBackClick;
     private handleFrontKeydown;
     private handleBackKeydown;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     static styles: import("lit").CSSResultGroup[];
 }
 declare global {

package/dist/package/components/header/header.d.ts

@@ -12,7 +12,7 @@ export default class SdHeader extends SolidElement {
     private onResize;
     private addResizeObserver;
     private setCalculatedHeightProperty;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     private handleSlotChange;
     static styles: import("lit").CSSResultGroup[];
 }

package/dist/package/components/icon/icon.d.ts

@@ -12,7 +12,7 @@ export default class SdIcon extends SolidElement {
     private getUrl;
     handleLabelChange(): void;
     setIcon(): Promise<void>;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     static styles: import("lit").CSSResult[];
 }
 declare global {

package/dist/package/components/include/include.d.ts

@@ -5,7 +5,7 @@ export default class SdInclude extends SolidElement {
     allowScripts: boolean;
     private executeScript;
     handleSrcChange(): Promise<void>;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     static styles: import("lit").CSSResult[];
 }
 declare global {

package/dist/package/components/input/input.d.ts

@@ -71,7 +71,7 @@ export default class SdInput extends SolidElement implements SolidFormControl {
     checkValidity(): boolean;
     reportValidity(): boolean;
     setCustomValidity(message: string): void;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     static styles: import("lit").CSSResultGroup[];
 }
 declare global {

package/dist/package/components/link/link.d.ts

@@ -12,7 +12,7 @@ export default class SdLink extends SolidElement {
     private handleFocus;
     focus(options?: FocusOptions): void;
     blur(): void;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     static styles: import("lit").CSSResultGroup[];
 }
 declare global {

package/dist/package/components/map-marker/map-marker.d.ts

@@ -13,7 +13,7 @@ export default class SdMapMarker extends SolidElement {
     readonly marker: {
         [key in 'cluster' | 'main' | 'place']: SVGTemplateResult;
     };
-    render(): import("lit-html").TemplateResult;
+    render(): import("lit").TemplateResult;
     static styles: import("lit").CSSResultGroup[];
 }
 declare global {

package/dist/package/components/navigation-item/navigation-item.d.ts

@@ -23,7 +23,7 @@ export default class SdNavigationItem extends SolidElement {
     private showDetails;
     private get calculatePaddingX();
     private get tag();
-    render(): import("lit-html").TemplateResult;
+    render(): import("lit").TemplateResult;
     static styles: import("lit").CSSResultGroup[];
 }
 declare global {

package/dist/package/components/notification/notification.d.ts

@@ -22,7 +22,7 @@ export default class SdNotification extends SolidElement {
     show(): Promise<void>;
     hide(): Promise<void>;
     toast(): Promise<void>;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     static styles: import("lit").CSSResultGroup[];
 }
 declare global {

package/dist/package/components/option/option.d.ts

@@ -19,7 +19,7 @@ export default class SdOption extends SolidElement {
     handleSelectedChange(): void;
     handleValueChange(): void;
     getTextLabel(): string;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     static styles: import("lit").CSSResultGroup[];
 }
 declare global {

package/dist/package/components/popup/popup.d.ts

@@ -35,7 +35,7 @@ export default class SdPopup extends SolidElement {
     private start;
     private stop;
     reposition(): void;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     static styles: import("lit").CSSResultGroup[];
 }
 declare global {

package/dist/package/components/quickfact/quickfact.d.ts

@@ -2,7 +2,7 @@ import '../icon/icon';
 import SdAccordion from '../accordion/accordion';
 export default class SdQuickfact extends SdAccordion {
     expandable: boolean;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     static styles: (import("lit").CSSResult | import("lit").CSSResultGroup[])[];
 }
 declare global {

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

@@ -17,7 +17,7 @@ export default class SdRadio extends SolidElement {
     private setInitialAttributes;
     handleCheckedChange(): void;
     handleDisabledChange(): void;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     static styles: import("lit").CSSResultGroup[];
 }
 declare global {

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

@@ -15,7 +15,7 @@ export default class SdRadioButton extends SolidElement {
     handleDisabledChange(): void;
     focus(options?: FocusOptions): void;
     blur(): void;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     static styles: import("lit").CSSResultGroup[];
 }
 declare global {

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

@@ -43,7 +43,7 @@ export default class SdRadioGroup extends SolidElement implements SolidFormContr
     getForm(): HTMLFormElement | null;
     reportValidity(): boolean;
     setCustomValidity(message?: string): void;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     static styles: import("lit").CSSResultGroup[];
 }
 declare global {

package/dist/package/components/scrollable/scrollable.d.ts

@@ -18,7 +18,7 @@ export default class SdScrollable extends SolidElement {
     private get container();
     updateScrollIndicatorVisibility(): void;
     handleScroll(direction: 'left' | 'right' | 'up' | 'down'): void;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     static styles: import("lit").CSSResultGroup[];
 }
 declare global {

package/dist/package/components/spinner/spinner.d.ts

@@ -3,7 +3,7 @@ import SolidElement from '../../internal/solid-element';
 export default class SdSpinner extends SolidElement {
     color: 'primary' | 'white' | 'currentColor';
     localize: LocalizeController;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     static styles: import("lit").CSSResultGroup[];
 }
 declare global {

package/dist/package/components/step/step.d.ts

@@ -17,7 +17,7 @@ export default class SdStep extends SolidElement {
     handleCurrentChange(): void;
     handleDisabledChange(): void;
     handleInteractivityChange(): void;
-    render(): import("lit-html").TemplateResult;
+    render(): import("lit").TemplateResult;
     static styles: import("lit").CSSResultGroup[];
 }
 declare global {

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

@@ -12,7 +12,7 @@ export default class SdStepGroup extends SolidElement {
     private getAllSteps;
     setActiveStep(index: number): void;
     handleInteractivityChange(): void;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     static styles: import("lit").CSSResultGroup[];
 }
 declare global {

package/dist/package/components/switch/switch.d.ts

@@ -29,7 +29,7 @@ export default class SdSwitch extends SolidElement implements SolidFormControl {
     getForm(): HTMLFormElement | null;
     reportValidity(): boolean;
     setCustomValidity(message: string): void;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     static styles: import("lit").CSSResultGroup[];
 }
 declare global {

package/dist/package/components/tab/tab.d.ts

@@ -12,7 +12,7 @@ export default class SdTab extends SolidElement {
     handleDisabledChange(): void;
     focus(options?: FocusOptions): void;
     blur(): void;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     static styles: import("lit").CSSResultGroup[];
 }
 declare global {

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

@@ -27,7 +27,7 @@ export default class SdTabGroup extends SolidElement {
     private syncTabsAndPanels;
     private updateScrollControls;
     show(panel: string): void;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     static styles: import("lit").CSSResultGroup[];
 }
 declare global {

package/dist/package/components/tab-panel/tab-panel.d.ts

@@ -6,7 +6,7 @@ export default class SdTabPanel extends SolidElement {
     active: boolean;
     connectedCallback(): void;
     handleActiveChange(): void;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     static styles: import("lit").CSSResultGroup[];
 }
 declare global {

package/dist/package/components/tag/tag.d.ts

@@ -15,7 +15,7 @@ export default class SdTag extends SolidElement {
     click(): void;
     focus(options?: FocusOptions): void;
     blur(): void;
-    render(): import("lit-html").TemplateResult;
+    render(): import("lit").TemplateResult;
     static styles: import("lit").CSSResultGroup[];
 }
 declare global {

package/dist/package/components/teaser/teaser.d.ts

@@ -12,6 +12,6 @@ export default class SdTeaser extends SolidElement {
     disconnectedCallback(): void;
     updated(changedProperties: PropertyValues): void;
     updateOrientation(): void;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     static styles: import("lit").CSSResultGroup[];
 }

package/dist/package/components/teaser-media/teaser-media.d.ts

@@ -3,6 +3,6 @@ export default class SdTeaserMedia extends SolidElement {
     variant: 'white' | 'neutral-100' | 'primary' | 'primary-100' | 'gradient-white' | 'gradient-dark';
     teaserMedia: HTMLElement;
     private readonly hasSlotController;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     static styles: import("lit").CSSResultGroup[];
 }

package/dist/package/components/textarea/textarea.d.ts

@@ -61,7 +61,7 @@ export default class SdTextarea extends SolidElement implements SolidFormControl
     getForm(): HTMLFormElement | null;
     reportValidity(): boolean;
     setCustomValidity(message: string): void;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     static styles: import("lit").CSSResultGroup[];
 }
 declare global {

package/dist/package/components/tooltip/tooltip.d.ts

@@ -31,7 +31,7 @@ export default class SdTooltip extends SolidElement {
     handleDisabledChange(): void;
     show(): Promise<void>;
     hide(): Promise<void>;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     static styles: import("lit").CSSResultGroup[];
 }
 declare global {

package/dist/package/components/video/video.d.ts

@@ -14,7 +14,7 @@ export default class SdVideo extends SolidElement {
     private handleButtonResize;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
     static styles: import("lit").CSSResultGroup[];
 }
 declare global {

package/dist/package/internal/form.d.ts

@@ -32,7 +32,7 @@ export declare class FormControlController implements ReactiveController {
     private doAction;
     updateValidityStyle(): void;
     getForm(): HTMLFormElement | null;
-    renderInvalidMessage(): import("lit-html").TemplateResult<1>;
+    renderInvalidMessage(): import("lit").TemplateResult<1>;
     reset(invoker?: HTMLInputElement | SdButton): void;
     submit(invoker?: HTMLInputElement | SdButton): void;
     setValidity(isValid: boolean): void;

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

@@ -1 +1 @@
-import"./accordion.js";import{S as e,x as t,c as o,i as s,n as r,a}from"./solid-components2.js";import{o as c}from"./query-assigned-elements.js";var n=Object.defineProperty,d=Object.getOwnPropertyDescriptor,i=(e,t,o,s)=>{for(var r,a=s>1?void 0:s?d(t,o):t,c=e.length-1;c>=0;c--)(r=e[c])&&(a=(s?r(t,o,a):r(a))||a);return s&&a&&n(t,o,a),a};let l=class extends e{constructor(){super(...arguments),this.closeOthers=!1,this.handleAccordionShow=e=>{this.closeOthers&&this._accordionsInDefaultSlot.forEach((t=>{t!==e.target&&t.parentNode===e.target.parentNode&&t.removeAttribute("open")}))}}connectedCallback(){super.connectedCallback(),this.addEventListener("sd-show",this.handleAccordionShow)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("sd-show",this.handleAccordionShow)}render(){return t`<div part="base"><slot></slot></div>`}};l.styles=[o,e.styles,s`:host{display:block}::slotted(sd-3-21-0-accordion:not(:first-of-type)){margin-top:-1px}`],i([c({selector:"sd-3-21-0-accordion"})],l.prototype,"_accordionsInDefaultSlot",2),i([r({attribute:"close-others",type:Boolean})],l.prototype,"closeOthers",2),l=i([a("sd-3-21-0-accordion-group")],l);export{l as default};
+import"./accordion.js";import{S as e,x as t,c as o,i as s,n as r,a}from"./solid-components2.js";import{o as c}from"./query-assigned-elements.js";var n=Object.defineProperty,d=Object.getOwnPropertyDescriptor,i=(e,t,o,s)=>{for(var r,a=s>1?void 0:s?d(t,o):t,c=e.length-1;c>=0;c--)(r=e[c])&&(a=(s?r(t,o,a):r(a))||a);return s&&a&&n(t,o,a),a};let l=class extends e{constructor(){super(...arguments),this.closeOthers=!1,this.handleAccordionShow=e=>{this.closeOthers&&this._accordionsInDefaultSlot.forEach((t=>{t!==e.target&&t.parentNode===e.target.parentNode&&t.removeAttribute("open")}))}}connectedCallback(){super.connectedCallback(),this.addEventListener("sd-show",this.handleAccordionShow)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("sd-show",this.handleAccordionShow)}render(){return t`<div part="base"><slot></slot></div>`}};l.styles=[o,e.styles,s`:host{display:block}::slotted(sd-3-22-0-accordion:not(:first-of-type)){margin-top:-1px}`],i([c({selector:"sd-3-22-0-accordion"})],l.prototype,"_accordionsInDefaultSlot",2),i([r({attribute:"close-others",type:Boolean})],l.prototype,"closeOthers",2),l=i([a("sd-3-22-0-accordion-group")],l);export{l as default};

package/dist/versioned-components/es/accordion.js

@@ -1 +1 @@
-import"./icon.js";import{s as e,a as t,b as s}from"./animate.js";import{S as o,L as i,x as a,t as r,i as n,e as h,n as d,a as l}from"./solid-components2.js";import{g as p,s as c}from"./animation-registry.js";import{w as y}from"./event.js";import{w as m}from"./watch.js";var u=Object.defineProperty,f=Object.getOwnPropertyDescriptor,b=(e,t,s,o)=>{for(var i,a=o>1?void 0:o?f(t,s):t,r=e.length-1;r>=0;r--)(i=e[r])&&(a=(o?i(t,s,a):i(a))||a);return o&&a&&u(t,s,a),a};let w=class extends o{constructor(){super(...arguments),this.localize=new i(this),this.open=!1}firstUpdated(){this.body.hidden=!this.open,this.body.style.height=this.open?"auto":"0"}handleSummaryClick(){this.open?this.hide():this.show()}handleSummaryKeyDown(e){("Enter"===e.key||" "===e.key)&&(e.preventDefault(),this.open?this.hide():this.show()),("ArrowUp"===e.key||"ArrowLeft"===e.key)&&(e.preventDefault(),this.hide()),("ArrowDown"===e.key||"ArrowRight"===e.key)&&(e.preventDefault(),this.show())}async handleOpenChange(){if(this.open){if(this.emit("sd-show",{cancelable:!0}).defaultPrevented)return void(this.open=!1);await e(this.body),this.body.hidden=!1;const{keyframes:o,options:i}=p(this,"accordion.show",{dir:this.localize.dir()});await t(this.body,s(o,this.body.scrollHeight),i),this.body.style.height="auto",this.emit("sd-after-show")}else{if(this.emit("sd-hide",{cancelable:!0}).defaultPrevented)return void(this.open=!0);await e(this.body);const{keyframes:o,options:i}=p(this,"accordion.hide",{dir:this.localize.dir()});await t(this.body,s(o,this.body.scrollHeight),i),this.body.hidden=!0,this.body.style.height="auto",this.emit("sd-after-hide")}}async show(){if(!this.open)return this.open=!0,y(this,"sd-after-show")}async hide(){if(this.open)return this.open=!1,y(this,"sd-after-hide")}render(){return a`<div part="base" class="border-y border-neutral-400"><header part="header" id="header" class="${r("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="${r(!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="${r("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="${r(this.open&&"hidden")}"><sd-3-21-0-icon library="system" name="chevron-down"></sd-3-21-0-icon></slot><slot name="collapse-icon" class="${r(!this.open&&"hidden")}"><sd-3-21-0-icon library="system" name="chevron-down"></sd-3-21-0-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>`}};w.styles=[o.styles,n`:host{display:block}`],b([h('[part="base"]')],w.prototype,"accordion",2),b([h('[part="header"]')],w.prototype,"header",2),b([h('[part="content"]')],w.prototype,"body",2),b([d({type:Boolean,reflect:!0})],w.prototype,"open",2),b([d()],w.prototype,"summary",2),b([m("open",{waitUntilFirstUpdate:!0})],w.prototype,"handleOpenChange",1),w=b([l("sd-3-21-0-accordion")],w),c("accordion.show",{keyframes:[{height:"0",opacity:"0"},{height:"auto",opacity:"1"}],options:{duration:300,easing:"ease"}}),c("accordion.hide",{keyframes:[{height:"auto",opacity:"1"},{height:"0",opacity:"0"}],options:{duration:300,easing:"ease"}});export{w as default};
+import"./icon.js";import{s as e,a as t,b as s}from"./animate.js";import{S as o,L as i,x as a,t as r,i as n,e as h,n as d,a as l}from"./solid-components2.js";import{g as p,s as c}from"./animation-registry.js";import{w as y}from"./event.js";import{w as m}from"./watch.js";var u=Object.defineProperty,f=Object.getOwnPropertyDescriptor,b=(e,t,s,o)=>{for(var i,a=o>1?void 0:o?f(t,s):t,r=e.length-1;r>=0;r--)(i=e[r])&&(a=(o?i(t,s,a):i(a))||a);return o&&a&&u(t,s,a),a};let w=class extends o{constructor(){super(...arguments),this.localize=new i(this),this.open=!1}firstUpdated(){this.body.hidden=!this.open,this.body.style.height=this.open?"auto":"0"}handleSummaryClick(){this.open?this.hide():this.show()}handleSummaryKeyDown(e){("Enter"===e.key||" "===e.key)&&(e.preventDefault(),this.open?this.hide():this.show()),("ArrowUp"===e.key||"ArrowLeft"===e.key)&&(e.preventDefault(),this.hide()),("ArrowDown"===e.key||"ArrowRight"===e.key)&&(e.preventDefault(),this.show())}async handleOpenChange(){if(this.open){if(this.emit("sd-show",{cancelable:!0}).defaultPrevented)return void(this.open=!1);await e(this.body),this.body.hidden=!1;const{keyframes:o,options:i}=p(this,"accordion.show",{dir:this.localize.dir()});await t(this.body,s(o,this.body.scrollHeight),i),this.body.style.height="auto",this.emit("sd-after-show")}else{if(this.emit("sd-hide",{cancelable:!0}).defaultPrevented)return void(this.open=!0);await e(this.body);const{keyframes:o,options:i}=p(this,"accordion.hide",{dir:this.localize.dir()});await t(this.body,s(o,this.body.scrollHeight),i),this.body.hidden=!0,this.body.style.height="auto",this.emit("sd-after-hide")}}async show(){if(!this.open)return this.open=!0,y(this,"sd-after-show")}async hide(){if(this.open)return this.open=!1,y(this,"sd-after-hide")}render(){return a`<div part="base" class="border-y border-neutral-400"><header part="header" id="header" class="${r("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="${r(!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="${r("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="${r(this.open&&"hidden")}"><sd-3-22-0-icon library="system" name="chevron-down"></sd-3-22-0-icon></slot><slot name="collapse-icon" class="${r(!this.open&&"hidden")}"><sd-3-22-0-icon library="system" name="chevron-down"></sd-3-22-0-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>`}};w.styles=[o.styles,n`:host{display:block}`],b([h('[part="base"]')],w.prototype,"accordion",2),b([h('[part="header"]')],w.prototype,"header",2),b([h('[part="content"]')],w.prototype,"body",2),b([d({type:Boolean,reflect:!0})],w.prototype,"open",2),b([d()],w.prototype,"summary",2),b([m("open",{waitUntilFirstUpdate:!0})],w.prototype,"handleOpenChange",1),w=b([l("sd-3-22-0-accordion")],w),c("accordion.show",{keyframes:[{height:"0",opacity:"0"},{height:"auto",opacity:"1"}],options:{duration:300,easing:"ease"}}),c("accordion.hide",{keyframes:[{height:"auto",opacity:"1"},{height:"0",opacity:"0"}],options:{duration:300,easing:"ease"}});export{w as default};

package/dist/versioned-components/es/audio.js

@@ -1 +1 @@
-import{S as t,L as e,x as i,t as s,r,i as a,n as o,e as n,a as d}from"./solid-components2.js";import{H as l}from"./slot.js";import{r as h}from"./state.js";import{Wave as u}from"./wave.js";import{I as c}from"./interactive.js";var p=Object.defineProperty,m=Object.getOwnPropertyDescriptor,y=(t,e,i,s)=>{for(var r,a=s>1?void 0:s?m(e,i):e,o=t.length-1;o>=0;o--)(r=t[o])&&(a=(s?r(e,i,a):r(a))||a);return s&&a&&p(e,i,a),a};let g=class extends t{constructor(){super(),this.localize=new e(this),this.hasSlotController=new l(this,"transcript"),this.reversedLayout=!1,this.hideTimestamps=!1,this.animated=!1,this.inverted=!1,this.speed=1,this.currentTime=this.formatTime(0),this.duration="",this.isPlaying=!1,this.isMuted=!1,this.progress=0,this.setAudioProgress=()=>{this.progressSlider.max=Math.floor(this.audioElement.duration).toString()},this.updateCurrentTime=this.updateCurrentTime.bind(this),this.handleAudioEnd=this.handleAudioEnd.bind(this),this.handleAudioProgress=this.handleAudioProgress.bind(this),this.handleAudioProgressKeydown=this.handleAudioProgressKeydown.bind(this)}firstUpdated(){this.audioElement&&(this.audioElement.addEventListener("timeupdate",this.updateCurrentTime),this.audioElement.addEventListener("ended",this.handleAudioEnd),this.audioElement.setAttribute("controlsList","nodownload"),this.audioElement.playbackRate=this.speed,this.animated&&this.initAnimation())}updated(t){if(t.has("animated")){const e=t.get("animated");!e&&this.animated?this.initAnimation():e&&!this.animated&&this.clear()}}get audioElement(){const t=this.shadowRoot.querySelector("slot");return(null==t?void 0:t.assignedElements().length)>0?t.assignedElements()[0]:null}updateCurrentTime(){if(!this.audioElement)return;const t=this.audioElement.currentTime;this.currentTime=this.formatTime(t),this.progress=Math.floor(t),this.progressSlider&&(this.progressSlider.value=this.progress.toString())}updateAudioDuration(){if(this.audioElement){if(isNaN(this.audioElement.duration))return void setTimeout((()=>{this.updateAudioDuration()}),100);this.duration=this.formatTime(this.audioElement.duration),this.setAudioProgress()}}playAudio(){this.audioElement&&(this.isPlaying=!0,this.audioElement.play(),this.emit("sd-playback-start"),this.animated&&this.draw())}pauseAudio(){this.audioElement&&(this.isPlaying=!1,this.audioElement.pause(),this.emit("sd-playback-pause"),this.animated&&this.stopAnimation())}handleAudioEnd(){this.emit("sd-playback-end"),this.isPlaying=!1,this.progress=0,this.progressSlider.value="0",this.currentTime=this.formatTime(0),this.animated&&this.stopAnimation()}toggleMute(){this.audioElement&&(this.isMuted=!this.isMuted,this.isMuted?(this.emit("sd-playback-mute"),this.audioElement.muted=!0):(this.emit("sd-playback-unmute"),this.audioElement.muted=!1))}toggleMuteKeydown(t){"Enter"===t.key&&(t.preventDefault(),this.toggleMute())}togglePlaybackSpeed(){this.audioElement&&(this.emit("sd-playback-speed"),this.speed=1.5===this.speed?1:this.speed+.25,this.audioElement.playbackRate=this.speed)}togglePlaybackSpeedKeydown(t){"Enter"===t.key&&(t.preventDefault(),this.togglePlaybackSpeed())}formatTime(t){const e=Math.floor(t/60),i=Math.floor(t%60);return`${e}:${i<10?"0":""}${i}`}handleAudioProgress(){if(!this.audioElement)return;const t=Number(this.progressSlider.value);this.audioElement.currentTime=t,this.progress=t,this.currentTime=this.formatTime(t)}handleAudioProgressKeydown(t){"ArrowRight"===t.key&&(this.progressSlider.value=(Number(this.progressSlider.value)+1).toString(),this.handleAudioProgress()),"ArrowLeft"===t.key&&(this.progressSlider.value=(Number(this.progressSlider.value)-1).toString(),this.handleAudioProgress())}showTranscript(){this.emit("sd-transcript-click"),this.drawer.open=!0}showTranscriptKeydown(t){("Enter"===t.key||" "===t.key)&&this.showTranscript()}rgbToHex(t){const e=t.match(/\d+/g);if(e&&3===e.length){const t=parseInt(e[0]),i=parseInt(e[1]),s=parseInt(e[2]),r=t=>t.toString(16).padStart(2,"0");return`#${r(t)}${r(i)}${r(s)}`.toUpperCase()}return null}initAnimation(){this.context=this.canvas.getContext("2d");const t=this.audioPlayerContainer.querySelector(".playback-speed"),e=window.getComputedStyle(t).color;let i;i=this.inverted?"#FFFFFF33":this.rgbToHex(e)+"33",this.waveList=[new u({canvas:this.canvas,color:i,phase:240,shift:1.5,amplitude:230,frequency:.012,damping:1}),new u({canvas:this.canvas,color:i,phase:180,shift:2.5,amplitude:250,frequency:.005,damping:1}),new u({canvas:this.canvas,color:i,phase:180,shift:-2.5,amplitude:250,frequency:.005,damping:1}),new u({canvas:this.canvas,color:i,phase:180,shift:-1,amplitude:200,frequency:.018,damping:1}),new u({canvas:this.canvas,color:i,phase:180,shift:1.5,amplitude:150,frequency:.01,damping:1})],this.animated&&this.drawStillWaves()}drawStillWaves(){this.waveList.forEach((t=>{t.redraw()}))}stopAnimation(){this.isPlaying=!1}clear(){!this.context||!this.canvas||this.context.clearRect(0,0,this.canvas.width,this.canvas.height)}async draw(){!this.isPlaying||!this.animated||(this.clear(),this.waveList.forEach((t=>{t.redraw()})),await new Promise((t=>{setTimeout(t,1e3/30)})),await this.draw())}render(){const t=this.audioElement?this.progress/this.audioElement.duration*100:0,e=i`<div class="${s("controls grid grid-cols-3 justify-items-center items-center",!this.animated&&"relative",this.animated&&!this.reversedLayout&&"absolute -top-4 left-0 w-full",this.reversedLayout?"mt-2":"mb-2")}" part="audio-controls"><button class="${s("playback-speed justify-self-start text-base font-bold hover:cursor-pointer sd-interactive",this.inverted&&"sd-interactive--inverted")}" aria-label="${this.localize.term("playbackSpeed")}" tabindex="0" @click="${this.togglePlaybackSpeed}" @keydown="${this.togglePlaybackSpeedKeydown}" part="playback-speed">${this.speed}x</button><sd-3-21-0-button ?inverted="${!!this.inverted}" part="play-button" size="lg" @click="${this.isPlaying?this.pauseAudio:this.playAudio}" aria-label="${this.isPlaying?this.localize.term("pauseAudio"):this.localize.term("playAudio")}">${this.isPlaying?i`<sd-3-21-0-icon name="pause" library="system"></sd-3-21-0-icon>`:i`<sd-3-21-0-icon name="start" library="system"></sd-3-21-0-icon>`}</sd-3-21-0-button><div class="flex items-center justify-self-end">${this.hasSlotController.test("transcript")?i`<button class="${s("mr-6 w-6 h-6 hover:cursor-pointer sd-interactive",this.inverted&&"sd-interactive--inverted")}" @click="${this.showTranscript}" @keydown="${this.showTranscriptKeydown}" tab-index="0"><sd-3-21-0-icon class="w-6 h-6" name="transcript" library="system" label="${this.isMuted?this.localize.term("unmute"):this.localize.term("mute")}"></sd-3-21-0-icon></button>`:null} <button class="${s("w-6 h-6 hover:cursor-pointer sd-interactive",this.inverted&&"sd-interactive--inverted")}" part="volume" aria-label="${this.localize.term("mute")}" tabindex="0" @click="${this.toggleMute}" @keydown="${this.toggleMuteKeydown}"><sd-3-21-0-icon class="w-6 h-6" name="${this.isMuted?"mute":"volume"}" library="system"></sd-3-21-0-icon></button></div></div>`,r=i`<div class="${s("w-full flex justify-between",this.reversedLayout?"mb-2":"mt-2",this.animated&&this.reversedLayout&&"absolute bottom-0 left-0 mb-2",this.animated&&!this.reversedLayout&&"mt-2")}" part="timestamps"><div class="${s("current-time text-sm",this.inverted?"text-primary-400":"text-neutral-700")}">${this.currentTime}</div><div class="${s("current-time text-sm",this.inverted?"text-primary-400":"text-neutral-700")}">${this.duration}</div></div>`;return i`<div class="${s("w-full flex relative",this.reversedLayout?"flex-col-reverse":"flex-col")}" aria-label="${this.localize.term("audioPlayer")}" part="audio-player"><slot @slotchange="${this.updateAudioDuration}"></slot>${!this.animated||this.animated&&this.reversedLayout?e:null}<div class="relative">${this.animated&&!this.reversedLayout?i`${e}`:null} ${this.animated?i`<canvas class="w-full h-16"></canvas>`:null} ${!this.hideTimestamps&&this.animated&&this.reversedLayout?r:null} <input class="${s("progress-slider bg-primary appearance-none w-full cursor-pointer outline-none h-1 flex items-center sd-interactive",this.inverted&&"sd-interactive--inverted")}" type="range" max="100" step="0.001" value="${this.progress}" tabindex="0" @input="${this.handleAudioProgress}" @keydown="${this.handleAudioProgressKeydown}" part="progress-slider" style="background:linear-gradient(to right,${this.inverted?"rgb(var(--sd-color-white, 255 255 255) / 1)":"rgb(var(--sd-color-primary, 0 53 142) / 1)"} ${t}%,${this.animated?"transparent":this.inverted?"rgb(var(--sd-color-primary-400, 153 171 208) / 1)":"rgb(var(--sd-color-grey-400, 195 195 195) / 1)"} ${t}%)"></div>${this.hasSlotController.test("transcript")?i`<sd-3-21-0-drawer><slot name="transcript"></slot></sd-3-21-0-drawer>`:null} ${this.hideTimestamps||this.animated&&this.reversedLayout?null:r}</div>`}};g.styles=[t.styles,r(c),a`.progress-slider:focus-visible{outline:2px solid transparent;outline-offset:2px}.progress-slider::-webkit-slider-thumb{background-color:currentColor;height:var(--sd-spacing-4,1rem);width:var(--sd-spacing-4,1rem);-webkit-appearance:none;appearance:none;border-radius:var(--sd-border-radius-full,9999px);border-style:none;-webkit-transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.progress-slider:focus-visible::-webkit-slider-thumb{outline-style:solid;outline-offset:2px}.progress-slider::-moz-range-thumb{background-color:currentColor;height:var(--sd-spacing-4,1rem);width:var(--sd-spacing-4,1rem);-moz-appearance:none;appearance:none;border-radius:var(--sd-border-radius-full,9999px);border-style:none;-moz-transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.progress-slider:focus-visible::-moz-range-thumb{outline-style:solid;outline-offset:2px}sd-3-21-0-button::part(base){display:flex;height:var(--sd-spacing-16,4rem);width:var(--sd-spacing-16,4rem);align-items:center;justify-content:center;border-radius:var(--sd-border-radius-full,9999px)}sd-3-21-0-button::part(label){flex-grow:0}`],y([o({type:Boolean,reflect:!0,attribute:"reversed-layout"})],g.prototype,"reversedLayout",2),y([o({type:Boolean,reflect:!0,attribute:"hide-timestamps"})],g.prototype,"hideTimestamps",2),y([o({type:Boolean,reflect:!0})],g.prototype,"animated",2),y([o({type:Boolean,reflect:!0})],g.prototype,"inverted",2),y([o({type:Number})],g.prototype,"speed",2),y([h()],g.prototype,"currentTime",2),y([h()],g.prototype,"duration",2),y([h()],g.prototype,"isPlaying",2),y([h()],g.prototype,"isMuted",2),y([h()],g.prototype,"progress",2),y([n('[part="progress-slider"]')],g.prototype,"progressSlider",2),y([n('[part="audio-player"]')],g.prototype,"audioPlayerContainer",2),y([n("sd-3-21-0-drawer")],g.prototype,"drawer",2),y([n("canvas")],g.prototype,"canvas",2),g=y([d("sd-3-21-0-audio")],g);export{g as default};
+import{S as t,L as e,x as i,t as s,r,i as a,n as o,e as n,a as d}from"./solid-components2.js";import{H as l}from"./slot.js";import{r as h}from"./state.js";import{Wave as u}from"./wave.js";import{I as c}from"./interactive.js";var p=Object.defineProperty,m=Object.getOwnPropertyDescriptor,y=(t,e,i,s)=>{for(var r,a=s>1?void 0:s?m(e,i):e,o=t.length-1;o>=0;o--)(r=t[o])&&(a=(s?r(e,i,a):r(a))||a);return s&&a&&p(e,i,a),a};let g=class extends t{constructor(){super(),this.localize=new e(this),this.hasSlotController=new l(this,"transcript"),this.reversedLayout=!1,this.hideTimestamps=!1,this.animated=!1,this.inverted=!1,this.speed=1,this.currentTime=this.formatTime(0),this.duration="",this.isPlaying=!1,this.isMuted=!1,this.progress=0,this.setAudioProgress=()=>{this.progressSlider.max=Math.floor(this.audioElement.duration).toString()},this.updateCurrentTime=this.updateCurrentTime.bind(this),this.handleAudioEnd=this.handleAudioEnd.bind(this),this.handleAudioProgress=this.handleAudioProgress.bind(this),this.handleAudioProgressKeydown=this.handleAudioProgressKeydown.bind(this)}firstUpdated(){this.audioElement&&(this.audioElement.addEventListener("timeupdate",this.updateCurrentTime),this.audioElement.addEventListener("ended",this.handleAudioEnd),this.audioElement.setAttribute("controlsList","nodownload"),this.audioElement.playbackRate=this.speed,this.animated&&this.initAnimation())}updated(t){if(t.has("animated")){const e=t.get("animated");!e&&this.animated?this.initAnimation():e&&!this.animated&&this.clear()}}get audioElement(){const t=this.shadowRoot.querySelector("slot");return(null==t?void 0:t.assignedElements().length)>0?t.assignedElements()[0]:null}updateCurrentTime(){if(!this.audioElement)return;const t=this.audioElement.currentTime;this.currentTime=this.formatTime(t),this.progress=Math.floor(t),this.progressSlider&&(this.progressSlider.value=this.progress.toString())}updateAudioDuration(){if(this.audioElement){if(isNaN(this.audioElement.duration))return void setTimeout((()=>{this.updateAudioDuration()}),100);this.duration=this.formatTime(this.audioElement.duration),this.setAudioProgress()}}playAudio(){this.audioElement&&(this.isPlaying=!0,this.audioElement.play(),this.emit("sd-playback-start"),this.animated&&this.draw())}pauseAudio(){this.audioElement&&(this.isPlaying=!1,this.audioElement.pause(),this.emit("sd-playback-pause"),this.animated&&this.stopAnimation())}handleAudioEnd(){this.emit("sd-playback-end"),this.isPlaying=!1,this.progress=0,this.progressSlider.value="0",this.currentTime=this.formatTime(0),this.animated&&this.stopAnimation()}toggleMute(){this.audioElement&&(this.isMuted=!this.isMuted,this.isMuted?(this.emit("sd-playback-mute"),this.audioElement.muted=!0):(this.emit("sd-playback-unmute"),this.audioElement.muted=!1))}toggleMuteKeydown(t){"Enter"===t.key&&(t.preventDefault(),this.toggleMute())}togglePlaybackSpeed(){this.audioElement&&(this.emit("sd-playback-speed"),this.speed=1.5===this.speed?1:this.speed+.25,this.audioElement.playbackRate=this.speed)}togglePlaybackSpeedKeydown(t){"Enter"===t.key&&(t.preventDefault(),this.togglePlaybackSpeed())}formatTime(t){const e=Math.floor(t/60),i=Math.floor(t%60);return`${e}:${i<10?"0":""}${i}`}handleAudioProgress(){if(!this.audioElement)return;const t=Number(this.progressSlider.value);this.audioElement.currentTime=t,this.progress=t,this.currentTime=this.formatTime(t)}handleAudioProgressKeydown(t){"ArrowRight"===t.key&&(this.progressSlider.value=(Number(this.progressSlider.value)+1).toString(),this.handleAudioProgress()),"ArrowLeft"===t.key&&(this.progressSlider.value=(Number(this.progressSlider.value)-1).toString(),this.handleAudioProgress())}showTranscript(){this.emit("sd-transcript-click"),this.drawer.open=!0}showTranscriptKeydown(t){("Enter"===t.key||" "===t.key)&&this.showTranscript()}rgbToHex(t){const e=t.match(/\d+/g);if(e&&3===e.length){const t=parseInt(e[0]),i=parseInt(e[1]),s=parseInt(e[2]),r=t=>t.toString(16).padStart(2,"0");return`#${r(t)}${r(i)}${r(s)}`.toUpperCase()}return null}initAnimation(){this.context=this.canvas.getContext("2d");const t=this.audioPlayerContainer.querySelector(".playback-speed"),e=window.getComputedStyle(t).color;let i;i=this.inverted?"#FFFFFF33":this.rgbToHex(e)+"33",this.waveList=[new u({canvas:this.canvas,color:i,phase:240,shift:1.5,amplitude:230,frequency:.012,damping:1}),new u({canvas:this.canvas,color:i,phase:180,shift:2.5,amplitude:250,frequency:.005,damping:1}),new u({canvas:this.canvas,color:i,phase:180,shift:-2.5,amplitude:250,frequency:.005,damping:1}),new u({canvas:this.canvas,color:i,phase:180,shift:-1,amplitude:200,frequency:.018,damping:1}),new u({canvas:this.canvas,color:i,phase:180,shift:1.5,amplitude:150,frequency:.01,damping:1})],this.animated&&this.drawStillWaves()}drawStillWaves(){this.waveList.forEach((t=>{t.redraw()}))}stopAnimation(){this.isPlaying=!1}clear(){!this.context||!this.canvas||this.context.clearRect(0,0,this.canvas.width,this.canvas.height)}async draw(){!this.isPlaying||!this.animated||(this.clear(),this.waveList.forEach((t=>{t.redraw()})),await new Promise((t=>{setTimeout(t,1e3/30)})),await this.draw())}render(){const t=this.audioElement?this.progress/this.audioElement.duration*100:0,e=i`<div class="${s("controls grid grid-cols-3 justify-items-center items-center",!this.animated&&"relative",this.animated&&!this.reversedLayout&&"absolute -top-4 left-0 w-full",this.reversedLayout?"mt-2":"mb-2")}" part="audio-controls"><button class="${s("playback-speed justify-self-start text-base font-bold hover:cursor-pointer sd-interactive",this.inverted&&"sd-interactive--inverted")}" aria-label="${this.localize.term("playbackSpeed")}" tabindex="0" @click="${this.togglePlaybackSpeed}" @keydown="${this.togglePlaybackSpeedKeydown}" part="playback-speed">${this.speed}x</button><sd-3-22-0-button ?inverted="${!!this.inverted}" part="play-button" size="lg" @click="${this.isPlaying?this.pauseAudio:this.playAudio}" aria-label="${this.isPlaying?this.localize.term("pauseAudio"):this.localize.term("playAudio")}">${this.isPlaying?i`<sd-3-22-0-icon name="pause" library="system"></sd-3-22-0-icon>`:i`<sd-3-22-0-icon name="start" library="system"></sd-3-22-0-icon>`}</sd-3-22-0-button><div class="flex items-center justify-self-end">${this.hasSlotController.test("transcript")?i`<button class="${s("mr-6 w-6 h-6 hover:cursor-pointer sd-interactive",this.inverted&&"sd-interactive--inverted")}" @click="${this.showTranscript}" @keydown="${this.showTranscriptKeydown}" tab-index="0"><sd-3-22-0-icon class="w-6 h-6" name="transcript" library="system" label="${this.isMuted?this.localize.term("unmute"):this.localize.term("mute")}"></sd-3-22-0-icon></button>`:null} <button class="${s("w-6 h-6 hover:cursor-pointer sd-interactive",this.inverted&&"sd-interactive--inverted")}" part="volume" aria-label="${this.localize.term("mute")}" tabindex="0" @click="${this.toggleMute}" @keydown="${this.toggleMuteKeydown}"><sd-3-22-0-icon class="w-6 h-6" name="${this.isMuted?"mute":"volume"}" library="system"></sd-3-22-0-icon></button></div></div>`,r=i`<div class="${s("w-full flex justify-between",this.reversedLayout?"mb-2":"mt-2",this.animated&&this.reversedLayout&&"absolute bottom-0 left-0 mb-2",this.animated&&!this.reversedLayout&&"mt-2")}" part="timestamps"><div class="${s("current-time text-sm",this.inverted?"text-primary-400":"text-neutral-700")}">${this.currentTime}</div><div class="${s("current-time text-sm",this.inverted?"text-primary-400":"text-neutral-700")}">${this.duration}</div></div>`;return i`<div class="${s("w-full flex relative",this.reversedLayout?"flex-col-reverse":"flex-col")}" aria-label="${this.localize.term("audioPlayer")}" part="audio-player"><slot @slotchange="${this.updateAudioDuration}"></slot>${!this.animated||this.animated&&this.reversedLayout?e:null}<div class="relative">${this.animated&&!this.reversedLayout?i`${e}`:null} ${this.animated?i`<canvas class="w-full h-16"></canvas>`:null} ${!this.hideTimestamps&&this.animated&&this.reversedLayout?r:null} <input class="${s("progress-slider bg-primary appearance-none w-full cursor-pointer outline-none h-1 flex items-center sd-interactive",this.inverted&&"sd-interactive--inverted")}" type="range" max="100" step="0.001" value="${this.progress}" tabindex="0" @input="${this.handleAudioProgress}" @keydown="${this.handleAudioProgressKeydown}" part="progress-slider" style="background:linear-gradient(to right,${this.inverted?"rgb(var(--sd-color-white, 255 255 255) / 1)":"rgb(var(--sd-color-primary, 0 53 142) / 1)"} ${t}%,${this.animated?"transparent":this.inverted?"rgb(var(--sd-color-primary-400, 153 171 208) / 1)":"rgb(var(--sd-color-grey-400, 195 195 195) / 1)"} ${t}%)"></div>${this.hasSlotController.test("transcript")?i`<sd-3-22-0-drawer><slot name="transcript"></slot></sd-3-22-0-drawer>`:null} ${this.hideTimestamps||this.animated&&this.reversedLayout?null:r}</div>`}};g.styles=[t.styles,r(c),a`.progress-slider:focus-visible{outline:2px solid transparent;outline-offset:2px}.progress-slider::-webkit-slider-thumb{background-color:currentColor;height:var(--sd-spacing-4,1rem);width:var(--sd-spacing-4,1rem);-webkit-appearance:none;appearance:none;border-radius:var(--sd-border-radius-full,9999px);border-style:none;-webkit-transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.progress-slider:focus-visible::-webkit-slider-thumb{outline-style:solid;outline-offset:2px}.progress-slider::-moz-range-thumb{background-color:currentColor;height:var(--sd-spacing-4,1rem);width:var(--sd-spacing-4,1rem);-moz-appearance:none;appearance:none;border-radius:var(--sd-border-radius-full,9999px);border-style:none;-moz-transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-duration:.2s;transition-timing-function:cubic-bezier(.4,0,.2,1)}.progress-slider:focus-visible::-moz-range-thumb{outline-style:solid;outline-offset:2px}sd-3-22-0-button::part(base){display:flex;height:var(--sd-spacing-16,4rem);width:var(--sd-spacing-16,4rem);align-items:center;justify-content:center;border-radius:var(--sd-border-radius-full,9999px)}sd-3-22-0-button::part(label){flex-grow:0}`],y([o({type:Boolean,reflect:!0,attribute:"reversed-layout"})],g.prototype,"reversedLayout",2),y([o({type:Boolean,reflect:!0,attribute:"hide-timestamps"})],g.prototype,"hideTimestamps",2),y([o({type:Boolean,reflect:!0})],g.prototype,"animated",2),y([o({type:Boolean,reflect:!0})],g.prototype,"inverted",2),y([o({type:Number})],g.prototype,"speed",2),y([h()],g.prototype,"currentTime",2),y([h()],g.prototype,"duration",2),y([h()],g.prototype,"isPlaying",2),y([h()],g.prototype,"isMuted",2),y([h()],g.prototype,"progress",2),y([n('[part="progress-slider"]')],g.prototype,"progressSlider",2),y([n('[part="audio-player"]')],g.prototype,"audioPlayerContainer",2),y([n("sd-3-22-0-drawer")],g.prototype,"drawer",2),y([n("canvas")],g.prototype,"canvas",2),g=y([d("sd-3-22-0-audio")],g);export{g as default};

package/dist/versioned-components/es/badge.js

@@ -1 +1 @@
-import{S as e,x as t,t as r,i as s,n as i,a as n}from"./solid-components2.js";var o=Object.defineProperty,a=Object.getOwnPropertyDescriptor,l=(e,t,r,s)=>{for(var i,n=s>1?void 0:s?a(t,r):t,l=e.length-1;l>=0;l--)(i=e[l])&&(n=(s?i(t,r,n):i(n))||n);return s&&n&&o(t,r,n),n};let p=class extends e{constructor(){super(...arguments),this.size="lg",this.variant="default",this.inverted=!1}render(){return t`<span role="status" part="base" aria-labelledby="content" class="${r("inline-flex items-center justify-center gap-x-[1px] text-center font-bold whitespace-nowrap border rounded-full select-none cursor-[inherit]",{default:this.inverted?"text-primary bg-primary-100 border-primary":"text-white bg-primary-500 border-white",success:this.inverted?"text-white bg-success border-primary":"text-white bg-success border-white",error:this.inverted?"text-white bg-error border-primary":"text-white bg-error border-white"}[this.variant],{sm:"h-2 min-w-2",md:"h-4 px-1 min-w-4",lg:"h-5 min-w-5"}[this.size])}"><span id="content" part="content" class="${r("sm"===this.size&&"sr-only")}"><slot></slot></span></span>`}};p.styles=[e.styles,s`:host{display:inline-flex;align-items:center;justify-content:center}:host([size=md]){font-size:.625rem}:host([size=lg]){font-size:.75rem}:host([size=lg])::part(base){padding-left:.313rem;padding-right:.313rem}`],l([i({reflect:!0})],p.prototype,"size",2),l([i({reflect:!0})],p.prototype,"variant",2),l([i({type:Boolean,reflect:!0})],p.prototype,"inverted",2),p=l([n("sd-3-21-0-badge")],p);export{p as default};
+import{S as e,x as t,t as r,i as s,n as i,a as n}from"./solid-components2.js";var o=Object.defineProperty,a=Object.getOwnPropertyDescriptor,l=(e,t,r,s)=>{for(var i,n=s>1?void 0:s?a(t,r):t,l=e.length-1;l>=0;l--)(i=e[l])&&(n=(s?i(t,r,n):i(n))||n);return s&&n&&o(t,r,n),n};let p=class extends e{constructor(){super(...arguments),this.size="lg",this.variant="default",this.inverted=!1}render(){return t`<span role="status" part="base" aria-labelledby="content" class="${r("inline-flex items-center justify-center gap-x-[1px] text-center font-bold whitespace-nowrap border rounded-full select-none cursor-[inherit]",{default:this.inverted?"text-primary bg-primary-100 border-primary":"text-white bg-primary-500 border-white",success:this.inverted?"text-white bg-success border-primary":"text-white bg-success border-white",error:this.inverted?"text-white bg-error border-primary":"text-white bg-error border-white"}[this.variant],{sm:"h-2 min-w-2",md:"h-4 px-1 min-w-4",lg:"h-5 min-w-5"}[this.size])}"><span id="content" part="content" class="${r("sm"===this.size&&"sr-only")}"><slot></slot></span></span>`}};p.styles=[e.styles,s`:host{display:inline-flex;align-items:center;justify-content:center}:host([size=md]){font-size:.625rem}:host([size=lg]){font-size:.75rem}:host([size=lg])::part(base){padding-left:.313rem;padding-right:.313rem}`],l([i({reflect:!0})],p.prototype,"size",2),l([i({reflect:!0})],p.prototype,"variant",2),l([i({type:Boolean,reflect:!0})],p.prototype,"inverted",2),p=l([n("sd-3-22-0-badge")],p);export{p as default};