@solid-design-system/components 5.10.1 → 5.12.0

package/cdn/solid-components.js

@@ -1 +1 @@
-import{a as eo}from"./chunks/chunk.CEVVDV52.js";import"./chunks/chunk.HAL7R4WT.js";import{a as J}from"./chunks/chunk.IRWE4TYN.js";import{a as K}from"./chunks/chunk.AXOCHBBU.js";import{a as U}from"./chunks/chunk.2JZXQAEH.js";import{a as W}from"./chunks/chunk.6X4TLHUJ.js";import{a as X}from"./chunks/chunk.PQFPJ45Y.js";import{a as Q}from"./chunks/chunk.Z4UTG2XJ.js";import{a as V}from"./chunks/chunk.S53XPYBW.js";import{a as j}from"./chunks/chunk.45UEUNN5.js";import{a as q}from"./chunks/chunk.V4CRJJ5B.js";import{a as y}from"./chunks/chunk.V7ZZFRHA.js";import{a as z}from"./chunks/chunk.YOYAMVUH.js";import{a as N}from"./chunks/chunk.4GU7BCCI.js";import{a as O}from"./chunks/chunk.U6FV3MPT.js";import{a as E}from"./chunks/chunk.RISDA2AI.js";import{a as F}from"./chunks/chunk.XMUDHBRG.js";import{a as P}from"./chunks/chunk.3I7Z2ZGA.js";import{a as H}from"./chunks/chunk.IHA7PGG2.js";import{a as L}from"./chunks/chunk.GGXUEKTA.js";import{a as M}from"./chunks/chunk.VPGQTCNG.js";import{a as h}from"./chunks/chunk.R2G6FMES.js";import{a as A}from"./chunks/chunk.SHKBYZWU.js";import{a as D}from"./chunks/chunk.R4DOCTBU.js";import"./chunks/chunk.BBD6RMZH.js";import{a as w}from"./chunks/chunk.SBU6FGLK.js";import{a as R}from"./chunks/chunk.3VSEXUCN.js";import{a as v}from"./chunks/chunk.HAFUAYZZ.js";import{a as C}from"./chunks/chunk.2YPPKILR.js";import{a as G}from"./chunks/chunk.LDAMQCO2.js";import"./chunks/chunk.YS7YV4KF.js";import{a as b}from"./chunks/chunk.AWLGV3BD.js";import{a as T}from"./chunks/chunk.XRBNH2NJ.js";import{a as I}from"./chunks/chunk.7F4BLDO5.js";import{a as B}from"./chunks/chunk.JUPXHQZ3.js";import{a as g}from"./chunks/chunk.WXLNA4GN.js";import{a as k}from"./chunks/chunk.BGEMBVJV.js";import{a as S}from"./chunks/chunk.GYKZUJLA.js";import"./chunks/chunk.URI32NHH.js";import"./chunks/chunk.ICA5V7JB.js";import{a as s}from"./chunks/chunk.ELCOIK5P.js";import{a as c}from"./chunks/chunk.H3RLFSFE.js";import{a as n}from"./chunks/chunk.LNX7ZKW3.js";import{a as i}from"./chunks/chunk.LAFGNWFC.js";import"./chunks/chunk.CDC46OKY.js";import"./chunks/chunk.X2GM34WQ.js";import"./chunks/chunk.W7A3TU2Z.js";import{a as u}from"./chunks/chunk.EADKGOFJ.js";import{a as l}from"./chunks/chunk.FCFA3AM7.js";import{a as Y}from"./chunks/chunk.KWDCB5GN.js";import{a as Z}from"./chunks/chunk.CMIXQ7JH.js";import"./chunks/chunk.AOLFDR44.js";import{a as x}from"./chunks/chunk.FA5R7CKW.js";import"./chunks/chunk.BJBQEPZV.js";import"./chunks/chunk.C577EOP7.js";import"./chunks/chunk.MHWW3RZB.js";import{a as m}from"./chunks/chunk.2S6PSHGR.js";import"./chunks/chunk.CBQWVOOS.js";import{a}from"./chunks/chunk.SBIDVQ2E.js";import{a as e}from"./chunks/chunk.CMMWC4RI.js";import{a as r}from"./chunks/chunk.AD3RLPIJ.js";import"./chunks/chunk.XR2KNB36.js";import{a as p}from"./chunks/chunk.MGVRJCCE.js";import{a as f}from"./chunks/chunk.IFNRX7KW.js";import"./chunks/chunk.I2H6CZK5.js";import"./chunks/chunk.2AQOPKKH.js";import"./chunks/chunk.G7HKVXLR.js";import"./chunks/chunk.3L472FD4.js";import{a as d}from"./chunks/chunk.NFHVSI66.js";import{a as t}from"./chunks/chunk.6NART7VP.js";import"./chunks/chunk.6HLS5XU2.js";import"./chunks/chunk.CGQ2BPPZ.js";import"./chunks/chunk.YTG5BN3U.js";import"./chunks/chunk.SKUMYG4O.js";import"./chunks/chunk.H2TKMIFR.js";import"./chunks/chunk.KLRPP4NQ.js";import{a as o}from"./chunks/chunk.YVTCC5NZ.js";import"./chunks/chunk.N2OPZHJV.js";import"./chunks/chunk.CDEXCMVF.js";import{d as _,e as $}from"./chunks/chunk.ZBXT5WFZ.js";import"./chunks/chunk.K7HF3VBZ.js";import"./chunks/chunk.B5WOG3GU.js";import"./chunks/chunk.PYHYYOBE.js";import"./chunks/chunk.TWZDCIM2.js";import"./chunks/chunk.MWDEA25W.js";import"./chunks/chunk.26V4EXHB.js";import{a as oo}from"./chunks/chunk.GHC63SXL.js";import"./chunks/chunk.WISEYZGW.js";import"./chunks/chunk.U5T3AO6I.js";import"./chunks/chunk.HJGLYEWV.js";import"./chunks/chunk.E2DRD2OX.js";import"./chunks/chunk.HDPQFCGV.js";import"./chunks/chunk.UWPDCU52.js";import"./chunks/chunk.6OTM3PE5.js";import"./chunks/chunk.WNP2V63C.js";import"./chunks/chunk.TJOCV4DC.js";export{oo as LocalizeController,e as SdAccordion,a as SdAccordionGroup,r as SdAnimation,p as SdAudio,u as SdBadge,l as SdBrandshape,Y as SdBreadcrumb,Z as SdBreadcrumbItem,d as SdButton,x as SdCarousel,m as SdCarouselItem,S as SdCheckbox,s as SdCheckboxGroup,c as SdCombobox,b as SdDialog,T as SdDivider,f as SdDrawer,I as SdDropdown,B as SdExpandable,g as SdFlipcard,k as SdHeader,o as SdIcon,C as SdInclude,G as SdInput,M as SdLink,h as SdMapMarker,A as SdMenu,D as SdMenuItem,w as SdNavigationItem,R as SdNotification,v as SdOptgroup,N as SdOption,i as SdPopup,O as SdQuickfact,P as SdRadio,E as SdRadioButton,F as SdRadioGroup,H as SdScrollable,L as SdSelect,t as SdSpinner,Q as SdStep,V as SdStepGroup,j as SdSwitch,q as SdTab,y as SdTabGroup,z as SdTabPanel,n as SdTag,J as SdTeaser,K as SdTeaserMedia,U as SdTextarea,W as SdTooltip,X as SdVideo,_ as registerIconLibrary,eo as setupAutocomplete,$ as unregisterIconLibrary};
+import"./chunks/chunk.HAL7R4WT.js";import{a as oo}from"./chunks/chunk.U44F4JBT.js";import{a as to}from"./chunks/chunk.CEVVDV52.js";import{a as U}from"./chunks/chunk.367GKF44.js";import{a as W}from"./chunks/chunk.K7JHXFND.js";import{a as X}from"./chunks/chunk.EPSMLSUF.js";import{a as Y}from"./chunks/chunk.KIKUIQH6.js";import{a as Z}from"./chunks/chunk.UOY4CWLC.js";import{a as _}from"./chunks/chunk.7YXPJHC7.js";import{a as $}from"./chunks/chunk.Y6VJJTAH.js";import{a as V}from"./chunks/chunk.2WWUKEYJ.js";import{a as j}from"./chunks/chunk.XKVU7NPO.js";import{a as q}from"./chunks/chunk.FUAY5ZRU.js";import{a as y}from"./chunks/chunk.PLVKA2MP.js";import{a as z}from"./chunks/chunk.QS3U2PLX.js";import{a as J}from"./chunks/chunk.2PWFAL3A.js";import{a as K}from"./chunks/chunk.CI5ANJHQ.js";import{a as N}from"./chunks/chunk.HWZ25VWZ.js";import{a as O}from"./chunks/chunk.Z26USUL2.js";import{a as P}from"./chunks/chunk.7IUZCPBT.js";import{a as F}from"./chunks/chunk.G4AZBDMG.js";import{a as H}from"./chunks/chunk.CODQE7UA.js";import{a as E}from"./chunks/chunk.P7SNYVCS.js";import{a as Q}from"./chunks/chunk.HF3SI4OC.js";import"./chunks/chunk.IVHEBGOY.js";import{a as h}from"./chunks/chunk.R4O2TIBS.js";import{a as A}from"./chunks/chunk.QIZORFM5.js";import{a as D}from"./chunks/chunk.W6SMEJG6.js";import{a as w}from"./chunks/chunk.TU4RJBA3.js";import"./chunks/chunk.BBD6RMZH.js";import{a as v}from"./chunks/chunk.F6Z5VUUA.js";import{a as L}from"./chunks/chunk.KPE4AHJU.js";import{a as M}from"./chunks/chunk.5CWTPYVS.js";import{a as R}from"./chunks/chunk.4AXGXJVS.js";import"./chunks/chunk.YS7YV4KF.js";import{a as g}from"./chunks/chunk.WV44R5AM.js";import{a as I}from"./chunks/chunk.NT233AXU.js";import{a as k}from"./chunks/chunk.2AAULTYV.js";import{a as B}from"./chunks/chunk.W7YBZJBO.js";import{a as C}from"./chunks/chunk.MIOZZZH5.js";import{a as G}from"./chunks/chunk.5LUOEZVE.js";import{a as i}from"./chunks/chunk.PYWUNTRK.js";import"./chunks/chunk.URI32NHH.js";import"./chunks/chunk.ICA5V7JB.js";import{a as n}from"./chunks/chunk.LPQF2NV2.js";import{a as T}from"./chunks/chunk.P2XVEBNM.js";import{a as b}from"./chunks/chunk.UBGZST4Q.js";import{a as c}from"./chunks/chunk.IVUI5RZA.js";import"./chunks/chunk.CDC46OKY.js";import"./chunks/chunk.X2GM34WQ.js";import"./chunks/chunk.W7A3TU2Z.js";import{a as u}from"./chunks/chunk.SDZ2KQEI.js";import{a as l}from"./chunks/chunk.DQR7QC2V.js";import{a as m}from"./chunks/chunk.BXUTMONQ.js";import{a as x}from"./chunks/chunk.JBL2EKSJ.js";import"./chunks/chunk.YEXOG76B.js";import{a as s}from"./chunks/chunk.PJ23OZWD.js";import"./chunks/chunk.BJBQEPZV.js";import"./chunks/chunk.C577EOP7.js";import"./chunks/chunk.MHWW3RZB.js";import{a as S}from"./chunks/chunk.PY66STPJ.js";import"./chunks/chunk.CBQWVOOS.js";import{a}from"./chunks/chunk.SVBQZKHD.js";import{a as e}from"./chunks/chunk.R7L6BSPL.js";import{a as r}from"./chunks/chunk.OTR2J5QC.js";import"./chunks/chunk.XR2KNB36.js";import{a as p}from"./chunks/chunk.23QCS6WN.js";import{a as f}from"./chunks/chunk.TLTD53JK.js";import"./chunks/chunk.I2H6CZK5.js";import"./chunks/chunk.2AQOPKKH.js";import"./chunks/chunk.G7HKVXLR.js";import"./chunks/chunk.3L472FD4.js";import{a as d}from"./chunks/chunk.PSM2IK7I.js";import{a as t}from"./chunks/chunk.KU5T2HM4.js";import"./chunks/chunk.6HLS5XU2.js";import"./chunks/chunk.CGQ2BPPZ.js";import"./chunks/chunk.VSJY5YKF.js";import"./chunks/chunk.6QOOWMSC.js";import"./chunks/chunk.SKUMYG4O.js";import"./chunks/chunk.H2TKMIFR.js";import"./chunks/chunk.KLRPP4NQ.js";import{a as o}from"./chunks/chunk.I63F7A5M.js";import"./chunks/chunk.N2OPZHJV.js";import"./chunks/chunk.CDEXCMVF.js";import{d as eo,e as ao}from"./chunks/chunk.ZBXT5WFZ.js";import"./chunks/chunk.K7HF3VBZ.js";import"./chunks/chunk.B5WOG3GU.js";import"./chunks/chunk.PYHYYOBE.js";import"./chunks/chunk.TWZDCIM2.js";import"./chunks/chunk.MWDEA25W.js";import"./chunks/chunk.26V4EXHB.js";import{a as ro}from"./chunks/chunk.GHC63SXL.js";import"./chunks/chunk.SUYDKR6I.js";import"./chunks/chunk.DCBKAP5D.js";import"./chunks/chunk.HJGLYEWV.js";import"./chunks/chunk.E2DRD2OX.js";import"./chunks/chunk.76YBBAYM.js";import"./chunks/chunk.UWPDCU52.js";import"./chunks/chunk.6OTM3PE5.js";import"./chunks/chunk.WNP2V63C.js";import"./chunks/chunk.TJOCV4DC.js";export{ro as LocalizeController,e as SdAccordion,a as SdAccordionGroup,r as SdAnimation,p as SdAudio,u as SdBadge,l as SdBrandshape,m as SdBreadcrumb,x as SdBreadcrumbItem,d as SdButton,s as SdCarousel,S as SdCarouselItem,i as SdCheckbox,n as SdCheckboxGroup,T as SdCombobox,g as SdDialog,I as SdDivider,f as SdDrawer,k as SdDropdown,B as SdExpandable,C as SdFlipcard,G as SdHeader,o as SdIcon,M as SdInclude,R as SdInput,h as SdLink,t as SdLoader,A as SdMapMarker,D as SdMenu,w as SdMenuItem,v as SdNavigationItem,L as SdNotification,N as SdOptgroup,O as SdOption,c as SdPopup,P as SdQuickfact,E as SdRadio,F as SdRadioButton,H as SdRadioGroup,Q as SdRange,V as SdRangeTick,j as SdScrollable,q as SdSelect,y as SdSpinner,z as SdStep,J as SdStepGroup,K as SdSwitch,U as SdTab,W as SdTabGroup,X as SdTabPanel,b as SdTag,Y as SdTeaser,Z as SdTeaserMedia,_ as SdTextarea,$ as SdTooltip,oo as SdVideo,eo as registerIconLibrary,to as setupAutocomplete,ao as unregisterIconLibrary};

package/cdn/translations/de.js

@@ -1 +1 @@
-import{a}from"../chunks/chunk.WISEYZGW.js";import"../chunks/chunk.HJGLYEWV.js";import"../chunks/chunk.TJOCV4DC.js";export{a as default};
+import{a}from"../chunks/chunk.SUYDKR6I.js";import"../chunks/chunk.HJGLYEWV.js";import"../chunks/chunk.TJOCV4DC.js";export{a as default};

package/cdn/translations/en.js

@@ -1 +1 @@
-import{a}from"../chunks/chunk.U5T3AO6I.js";import"../chunks/chunk.HJGLYEWV.js";import"../chunks/chunk.TJOCV4DC.js";export{a as default};
+import{a}from"../chunks/chunk.DCBKAP5D.js";import"../chunks/chunk.HJGLYEWV.js";import"../chunks/chunk.TJOCV4DC.js";export{a as default};

package/cdn/utilities/autocomplete-config.js

@@ -1 +1 @@
-import{a}from"../chunks/chunk.CEVVDV52.js";import"../chunks/chunk.LAFGNWFC.js";import"../chunks/chunk.26V4EXHB.js";import"../chunks/chunk.HDPQFCGV.js";import"../chunks/chunk.UWPDCU52.js";import"../chunks/chunk.6OTM3PE5.js";import"../chunks/chunk.TJOCV4DC.js";export{a as setupAutocomplete};
+import{a}from"../chunks/chunk.CEVVDV52.js";import"../chunks/chunk.IVUI5RZA.js";import"../chunks/chunk.26V4EXHB.js";import"../chunks/chunk.76YBBAYM.js";import"../chunks/chunk.UWPDCU52.js";import"../chunks/chunk.6OTM3PE5.js";import"../chunks/chunk.TJOCV4DC.js";export{a as setupAutocomplete};

package/cdn/utilities/localize.d.ts

@@ -32,6 +32,8 @@ export interface Translation extends DefaultTranslation {
     goToSlide: (slide: number, count: number) => string;
     hidePassword: string;
     loading: string;
+    maximum: string;
+    minimum: string;
     mute: string;
     nextSlide: string;
     noResults: string;

package/cdn/utilities/localize.js

@@ -1 +1 @@
-import{a}from"../chunks/chunk.GHC63SXL.js";import"../chunks/chunk.WISEYZGW.js";import"../chunks/chunk.U5T3AO6I.js";import"../chunks/chunk.HJGLYEWV.js";import"../chunks/chunk.TJOCV4DC.js";export{a as LocalizeController};
+import{a}from"../chunks/chunk.GHC63SXL.js";import"../chunks/chunk.SUYDKR6I.js";import"../chunks/chunk.DCBKAP5D.js";import"../chunks/chunk.HJGLYEWV.js";import"../chunks/chunk.TJOCV4DC.js";export{a as LocalizeController};

package/cdn/vscode.html-custom-data.json

@@ -1518,6 +1518,37 @@
         }
       ]
     },
+    {
+      "name": "sd-loader",
+      "description": "Loaders are used to show the progress of an indeterminate operation.\n---\n\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.",
+      "attributes": [
+        {
+          "name": "color",
+          "description": "The color of the loader.",
+          "values": [
+            { "name": "primary" },
+            { "name": "white" },
+            { "name": "currentColor" }
+          ]
+        },
+        {
+          "name": "dir",
+          "description": "The element's directionality.",
+          "values": [{ "name": "ltr" }, { "name": "rtl" }, { "name": "auto" }]
+        },
+        {
+          "name": "lang",
+          "description": "The element's language.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://solid-design-system.fe.union-investment.de/docs/?path=/docs/components-sd-loader--docs"
+        }
+      ]
+    },
     {
       "name": "sd-map-marker",
       "description": "A marker identifies a location on google map\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the map marker loses focus.\n- **sd-focus** - Emitted when the map marker is focused.\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The marker's content.\\\n\n### **CSS Properties:**\n - **--map-marker-scaling** - Scale the marker size. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The components' base wrapper.\n- **marker** - The markers' svg wrapper.\n- **content** - The container that wraps the default slot.\n- **motion-wrapper** - The container that wraps the motion animation.",
@@ -2220,6 +2251,110 @@
         }
       ]
     },
+    {
+      "name": "sd-range",
+      "description": "Used to allow users to select a single or multiple values within a defined range using a slider.\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the control loses focus.\n- **sd-change** - Emitted when an alteration to the control's value is committed by the user.\n- **sd-focus** - Emitted when the control gains focus.\n- **sd-input** - Emitted when the control receives input.\n- **sd-move** - Emitted when the user moves a thumb, either via touch or keyboard. Use `Event.preventDefault()` to prevent movement.\n\n### **Methods:**\n - **checkValidity()** - Checks for validity but does not show the browser's validation message.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The default slot.\n- **help-text** - Text that describes how to use the range. Alternatively, you can use the `help-text` attribute.\n- **label** - The range's label. Alternatively, you can use the `label` attribute.\n- **scale-ticks** - Used to display tick marks at specific intervals along the range.\n\n### **CSS Properties:**\n - **--track-active-offset** - The point of origin of the active track, starting at the left side of the range. _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **base** - The component's base wrapper.\n- **input-wrapper** - The container that wraps the input track and ticks.\n- **track-wrapper** - The wrapper for the track.\n- **track** - The inactive track.\n- **active-track** - The active track.\n- **track-click-helper** - The element that increases the track clickable area.\n- **thumb** - The thumb(s) that the user can drag to change the range.\n- **scale-ticks** - The container that wraps the tick marks.",
+      "attributes": [
+        {
+          "name": "name",
+          "description": "The name of the range, submitted as a name/value pair with form data.",
+          "values": []
+        },
+        {
+          "name": "label",
+          "description": "The range's label. If you need to display HTML, use the `label` slot instead.",
+          "values": []
+        },
+        {
+          "name": "help-text",
+          "description": "The range's help text. If you need to display HTML, use the help-text slot instead.",
+          "values": []
+        },
+        {
+          "name": "min",
+          "description": "The minimum acceptable value of the range.",
+          "values": []
+        },
+        {
+          "name": "max",
+          "description": "The maximum acceptable value of the range.",
+          "values": []
+        },
+        {
+          "name": "step",
+          "description": "The interval at which the range will increase and decrease.",
+          "values": []
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the range.",
+          "values": []
+        },
+        {
+          "name": "visually-disabled",
+          "description": "Disables the range visually.",
+          "values": []
+        },
+        {
+          "name": "no-track-bar",
+          "description": "Disables the active track bar.",
+          "values": []
+        },
+        {
+          "name": "no-tooltip",
+          "description": "Disables the thumbs tooltip.",
+          "values": []
+        },
+        {
+          "name": "value",
+          "description": "The current values of the input (in ascending order) as a string of space separated values",
+          "values": []
+        },
+        {
+          "name": "dir",
+          "description": "The element's directionality.",
+          "values": [{ "name": "ltr" }, { "name": "rtl" }, { "name": "auto" }]
+        },
+        {
+          "name": "lang",
+          "description": "The element's language.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://solid-design-system.fe.union-investment.de/docs/?path=/docs/components-sd-range--docs"
+        }
+      ]
+    },
+    {
+      "name": "sd-range-tick",
+      "description": "Ticks visually improve positioning on range sliders.\n---\n\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The tick's label\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label** - The component's label.\n- **line** - The component's tick line.",
+      "attributes": [
+        {
+          "name": "subtick",
+          "description": "Whether the tick should be shown as a subtick.",
+          "values": []
+        },
+        {
+          "name": "dir",
+          "description": "The element's directionality.",
+          "values": [{ "name": "ltr" }, { "name": "rtl" }, { "name": "auto" }]
+        },
+        {
+          "name": "lang",
+          "description": "The element's language.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://solid-design-system.fe.union-investment.de/docs/?path=/docs/components-sd-range-tick--docs"
+        }
+      ]
+    },
     {
       "name": "sd-scrollable",
       "description": "Scrollable is used to indicate there is hidden content to be scrolled.\n---\n\n\n### **Events:**\n - **start** - Emitted when the start of the scrollable is reached.\n- **end** - Emitted when the end of the scrollable is reached.\n- **eventName**\n- **button-left** - Emitted when the left button is clicked.\n- **button-right** - Emitted when the right button is clicked.\n- **button-up** - Emitted when the top button is clicked.\n- **button-down** - Emitted when the bottom button is clicked.\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The scrollable's content.\n- **icon-start** - The scrollable's start icon.\n- **icon-end** - The scrollable's end icon.\n\n### **CSS Properties:**\n - **--gradient-color** - Defines a custom color for the gradient. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The scrollable's base wrapper.\n- **scroll-content** - The scrollable's content.\n- **button-start** - The scrollable's start scroll button.\n- **button-end** - The scrollable's end scroll button.\n- **button-left** - The scrollable's left scroll button.\n- **button-right** - The scrollable's right scroll button.\n- **button-top** - The scrollable's top scroll button.\n- **button-bottom** - The scrollable's bottom scroll button.\n- **shadow-left** - The scrollable's left shadow.\n- **shadow-right** - The scrollable's right shadow.\n- **shadow-top** - The scrollable's top shadow.\n- **shadow-bottom** - The scrollable's bottom shadow.",

package/cdn/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@solid-design-system/components",
-  "version": "5.10.1",
+  "version": "5.12.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -3482,6 +3482,53 @@
             ]
           }
         },
+        {
+          "name": "sd-loader",
+          "description": "Loaders are used to show the progress of an indeterminate operation.\n---\n\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "color",
+              "description": "The color of the loader.",
+              "value": {
+                "type": "'primary' | 'white' | 'currentColor'",
+                "default": "'currentColor'"
+              }
+            },
+            {
+              "name": "dir",
+              "description": "The element's directionality.",
+              "value": { "type": "'ltr' | 'rtl' | 'auto'" }
+            },
+            {
+              "name": "lang",
+              "description": "The element's language.",
+              "value": { "type": "string" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "color",
+                "description": "The color of the loader.",
+                "type": "'primary' | 'white' | 'currentColor'"
+              },
+              { "name": "localize" },
+              {
+                "name": "dir",
+                "description": "The element's directionality.",
+                "type": "'ltr' | 'rtl' | 'auto'"
+              },
+              {
+                "name": "lang",
+                "description": "The element's language.",
+                "type": "string"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "sd-map-marker",
           "description": "A marker identifies a location on google map\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the map marker loses focus.\n- **sd-focus** - Emitted when the map marker is focused.\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The marker's content.\\\n\n### **CSS Properties:**\n - **--map-marker-scaling** - Scale the marker size. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The components' base wrapper.\n- **marker** - The markers' svg wrapper.\n- **content** - The container that wraps the default slot.\n- **motion-wrapper** - The container that wraps the motion animation.",
@@ -4994,6 +5041,271 @@
             ]
           }
         },
+        {
+          "name": "sd-range",
+          "description": "Used to allow users to select a single or multiple values within a defined range using a slider.\n---\n\n\n### **Events:**\n - **sd-blur** - Emitted when the control loses focus.\n- **sd-change** - Emitted when an alteration to the control's value is committed by the user.\n- **sd-focus** - Emitted when the control gains focus.\n- **sd-input** - Emitted when the control receives input.\n- **sd-move** - Emitted when the user moves a thumb, either via touch or keyboard. Use `Event.preventDefault()` to prevent movement.\n\n### **Methods:**\n - **checkValidity()** - Checks for validity but does not show the browser's validation message.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The default slot.\n- **help-text** - Text that describes how to use the range. Alternatively, you can use the `help-text` attribute.\n- **label** - The range's label. Alternatively, you can use the `label` attribute.\n- **scale-ticks** - Used to display tick marks at specific intervals along the range.\n\n### **CSS Properties:**\n - **--track-active-offset** - The point of origin of the active track, starting at the left side of the range. _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **base** - The component's base wrapper.\n- **input-wrapper** - The container that wraps the input track and ticks.\n- **track-wrapper** - The wrapper for the track.\n- **track** - The inactive track.\n- **active-track** - The active track.\n- **track-click-helper** - The element that increases the track clickable area.\n- **thumb** - The thumb(s) that the user can drag to change the range.\n- **scale-ticks** - The container that wraps the tick marks.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "name",
+              "description": "The name of the range, submitted as a name/value pair with form data.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "label",
+              "description": "The range's label. If you need to display HTML, use the `label` slot instead.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "help-text",
+              "description": "The range's help text. If you need to display HTML, use the help-text slot instead.",
+              "value": { "type": "string", "default": "''" }
+            },
+            {
+              "name": "min",
+              "description": "The minimum acceptable value of the range.",
+              "value": { "type": "number", "default": "0" }
+            },
+            {
+              "name": "max",
+              "description": "The maximum acceptable value of the range.",
+              "value": { "type": "number", "default": "100" }
+            },
+            {
+              "name": "step",
+              "description": "The interval at which the range will increase and decrease.",
+              "value": { "type": "number", "default": "1" }
+            },
+            {
+              "name": "disabled",
+              "description": "Disables the range.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "visually-disabled",
+              "description": "Disables the range visually.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "no-track-bar",
+              "description": "Disables the active track bar.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "no-tooltip",
+              "description": "Disables the thumbs tooltip.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "value",
+              "description": "The current values of the input (in ascending order) as a string of space separated values",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "dir",
+              "description": "The element's directionality.",
+              "value": { "type": "'ltr' | 'rtl' | 'auto'" }
+            },
+            {
+              "name": "lang",
+              "description": "The element's language.",
+              "value": { "type": "string" }
+            }
+          ],
+          "slots": [
+            { "name": "", "description": "The default slot." },
+            {
+              "name": "help-text",
+              "description": "Text that describes how to use the range. Alternatively, you can use the `help-text` attribute."
+            },
+            {
+              "name": "label",
+              "description": "The range's label. Alternatively, you can use the `label` attribute."
+            },
+            {
+              "name": "scale-ticks",
+              "description": "Used to display tick marks at specific intervals along the range."
+            }
+          ],
+          "events": [
+            {
+              "name": "sd-blur",
+              "description": "Emitted when the control loses focus."
+            },
+            {
+              "name": "sd-change",
+              "description": "Emitted when an alteration to the control's value is committed by the user."
+            },
+            {
+              "name": "sd-focus",
+              "description": "Emitted when the control gains focus."
+            },
+            {
+              "name": "sd-input",
+              "description": "Emitted when the control receives input."
+            },
+            {
+              "name": "sd-move",
+              "description": "Emitted when the user moves a thumb, either via touch or keyboard. Use `Event.preventDefault()` to prevent movement."
+            }
+          ],
+          "js": {
+            "properties": [
+              { "name": "localize" },
+              { "name": "thumbs", "type": "NodeListOf<HTMLDivElement>" },
+              {
+                "name": "tooltipFormatter",
+                "description": "A function used to format the tooltip's value.\nThe value of the thumb is passed as the only argument.\nThe function should return a string to display in the tooltip.",
+                "type": "(value: number) => string"
+              },
+              {
+                "name": "name",
+                "description": "The name of the range, submitted as a name/value pair with form data.",
+                "type": "string"
+              },
+              {
+                "name": "label",
+                "description": "The range's label. If you need to display HTML, use the `label` slot instead.",
+                "type": "string"
+              },
+              {
+                "name": "helpText",
+                "description": "The range's help text. If you need to display HTML, use the help-text slot instead.",
+                "type": "string"
+              },
+              {
+                "name": "min",
+                "description": "The minimum acceptable value of the range.",
+                "type": "number"
+              },
+              {
+                "name": "max",
+                "description": "The maximum acceptable value of the range.",
+                "type": "number"
+              },
+              {
+                "name": "step",
+                "description": "The interval at which the range will increase and decrease.",
+                "type": "number"
+              },
+              {
+                "name": "disabled",
+                "description": "Disables the range.",
+                "type": "boolean"
+              },
+              {
+                "name": "visuallyDisabled",
+                "description": "Disables the range visually.",
+                "type": "boolean"
+              },
+              {
+                "name": "noTrackBar",
+                "description": "Disables the active track bar.",
+                "type": "boolean"
+              },
+              {
+                "name": "noTooltip",
+                "description": "Disables the thumbs tooltip.",
+                "type": "boolean"
+              },
+              {
+                "name": "defaultValue",
+                "description": "The default value of the form control. Primarily used for resetting the form control.",
+                "type": "string"
+              },
+              {
+                "name": "value",
+                "description": "The current values of the input (in ascending order) as a string of space separated values"
+              },
+              {
+                "name": "valueAsArray",
+                "description": "Gets or sets the current values of the range as an array of numbers"
+              },
+              { "name": "rtl" },
+              {
+                "name": "validity",
+                "description": "Gets the validity state object"
+              },
+              {
+                "name": "dir",
+                "description": "The element's directionality.",
+                "type": "'ltr' | 'rtl' | 'auto'"
+              },
+              {
+                "name": "lang",
+                "description": "The element's language.",
+                "type": "string"
+              }
+            ],
+            "events": [
+              {
+                "name": "sd-blur",
+                "description": "Emitted when the control loses focus."
+              },
+              {
+                "name": "sd-change",
+                "description": "Emitted when an alteration to the control's value is committed by the user."
+              },
+              {
+                "name": "sd-focus",
+                "description": "Emitted when the control gains focus."
+              },
+              {
+                "name": "sd-input",
+                "description": "Emitted when the control receives input."
+              },
+              {
+                "name": "sd-move",
+                "description": "Emitted when the user moves a thumb, either via touch or keyboard. Use `Event.preventDefault()` to prevent movement."
+              }
+            ]
+          }
+        },
+        {
+          "name": "sd-range-tick",
+          "description": "Ticks visually improve positioning on range sliders.\n---\n\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The tick's label\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label** - The component's label.\n- **line** - The component's tick line.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "subtick",
+              "description": "Whether the tick should be shown as a subtick.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "dir",
+              "description": "The element's directionality.",
+              "value": { "type": "'ltr' | 'rtl' | 'auto'" }
+            },
+            {
+              "name": "lang",
+              "description": "The element's language.",
+              "value": { "type": "string" }
+            }
+          ],
+          "slots": [{ "name": "", "description": "The tick's label" }],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "localize" },
+              {
+                "name": "subtick",
+                "description": "Whether the tick should be shown as a subtick.",
+                "type": "boolean"
+              },
+              {
+                "name": "dir",
+                "description": "The element's directionality.",
+                "type": "'ltr' | 'rtl' | 'auto'"
+              },
+              {
+                "name": "lang",
+                "description": "The element's language.",
+                "type": "string"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "sd-scrollable",
           "description": "Scrollable is used to indicate there is hidden content to be scrolled.\n---\n\n\n### **Events:**\n - **start** - Emitted when the start of the scrollable is reached.\n- **end** - Emitted when the end of the scrollable is reached.\n- **eventName**\n- **button-left** - Emitted when the left button is clicked.\n- **button-right** - Emitted when the right button is clicked.\n- **button-up** - Emitted when the top button is clicked.\n- **button-down** - Emitted when the bottom button is clicked.\n\n### **Methods:**\n - **emit(name: _string_, options: _CustomEventInit_)** - Emits a custom event with more convenient defaults.\n- **token(name: _string_, fallback: _T_): _T_** - Retrieves the value of a css variable token.\n\n### **Slots:**\n - _default_ - The scrollable's content.\n- **icon-start** - The scrollable's start icon.\n- **icon-end** - The scrollable's end icon.\n\n### **CSS Properties:**\n - **--gradient-color** - Defines a custom color for the gradient. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The scrollable's base wrapper.\n- **scroll-content** - The scrollable's content.\n- **button-start** - The scrollable's start scroll button.\n- **button-end** - The scrollable's end scroll button.\n- **button-left** - The scrollable's left scroll button.\n- **button-right** - The scrollable's right scroll button.\n- **button-top** - The scrollable's top scroll button.\n- **button-bottom** - The scrollable's bottom scroll button.\n- **shadow-left** - The scrollable's left shadow.\n- **shadow-right** - The scrollable's right shadow.\n- **shadow-top** - The scrollable's top shadow.\n- **shadow-bottom** - The scrollable's bottom shadow.",

package/cdn-versioned/chunks/{chunk.MGVRJCCE.js → chunk.23QCS6WN.js}

@@ -1 +1 @@
-import{a as v}from"./chunk.CGQ2BPPZ.js";import{a}from"./chunk.26V4EXHB.js";import{a as g}from"./chunk.GHC63SXL.js";import{a as f,b as d,c as l,d as h,h as p}from"./chunk.HDPQFCGV.js";import{b as m,e as s}from"./chunk.UWPDCU52.js";import{a as c}from"./chunk.WNP2V63C.js";import{e as i}from"./chunk.TJOCV4DC.js";var t=class extends p{constructor(){super();this.localize=new g(this);this.hasSlotController=new v(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.isTranscriptOpen=!1;this.progress=0;this.updateCurrentTime=this.updateCurrentTime.bind(this),this.handleAudioEnd=this.handleAudioEnd.bind(this),this.handleAudioProgress=this.handleAudioProgress.bind(this),this.handleAudioProgressKeydown=this.handleAudioProgressKeydown.bind(this),this.handleTranscriptDrawerToggle=this.handleTranscriptDrawerToggle.bind(this)}firstUpdated(){this.audioElement&&(this.audioElement.addEventListener("timeupdate",this.updateCurrentTime),this.audioElement.addEventListener("ended",this.handleAudioEnd),this.audioElement.setAttribute("controlsList","nodownload"),document.addEventListener("sd-after-hide",this.handleTranscriptDrawerToggle),this.audioElement.playbackRate=this.speed,this.animated&&this.initAnimation())}updated(e){if(e.has("animated")){let r=e.get("animated");!r&&this.animated?this.initAnimation():r&&!this.animated&&this.clear()}}get audioElement(){let e=this.shadowRoot.querySelector("slot");return(e==null?void 0:e.assignedElements().length)>0?e.assignedElements()[0]:null}updateCurrentTime(){if(!this.audioElement)return;let e=this.audioElement.currentTime;this.currentTime=this.formatTime(e),this.progress=e,this.progressSlider&&(this.progressSlider.value=this.progress.toString())}updateAudioDuration(){if(this.audioElement){if(isNaN(this.audioElement.duration)){setTimeout(()=>{this.updateAudioDuration()},100);return}this.duration=this.formatTime(this.audioElement.duration),this.progressSlider.max=this.audioElement.duration.toString()}}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(e){e.key==="Enter"&&(e.preventDefault(),this.toggleMute())}togglePlaybackSpeed(){this.audioElement&&(this.emit("sd-playback-speed"),this.speed=this.speed===1.5?1:this.speed+.25,this.audioElement.playbackRate=this.speed)}togglePlaybackSpeedKeydown(e){e.key==="Enter"&&(e.preventDefault(),this.togglePlaybackSpeed())}formatTime(e){let r=Math.floor(e/60),o=Math.floor(e%60);return`${r}:${o<10?"0":""}${o}`}handleAudioProgress(){if(!this.audioElement)return;let e=Number(this.progressSlider.value);this.audioElement.currentTime=e,this.progress=e,this.currentTime=this.formatTime(e)}handleAudioProgressKeydown(e){e.key==="ArrowRight"&&(this.progressSlider.value=(Number(this.progressSlider.value)+1).toString(),this.handleAudioProgress()),e.key==="ArrowLeft"&&(this.progressSlider.value=(Number(this.progressSlider.value)-1).toString(),this.handleAudioProgress())}handleTranscriptDrawerToggle(){this.isTranscriptOpen=!this.isTranscriptOpen}showTranscript(){this.emit("sd-transcript-click"),this.drawer.open=!0,this.handleTranscriptDrawerToggle()}showTranscriptKeydown(e){(e.key==="Enter"||e.key===" ")&&this.showTranscript()}rgbToHex(e){let r=e.match(/\d+/g);if(r&&r.length===3){let o=parseInt(r[0]),n=parseInt(r[1]),b=parseInt(r[2]),u=y=>y.toString(16).padStart(2,"0");return`#${u(o)}${u(n)}${u(b)}`.toUpperCase()}return null}initAnimation(){this.context=this.canvas.getContext("2d");let e=this.audioPlayerContainer.querySelector(".playback-speed"),o=window.getComputedStyle(e).color,n;this.inverted?n="#FFFFFF33":n=this.rgbToHex(o)+"33",this.waveList=[new c({canvas:this.canvas,color:n,phase:240,shift:1.5,amplitude:230,frequency:.012,damping:1}),new c({canvas:this.canvas,color:n,phase:180,shift:2.5,amplitude:250,frequency:.005,damping:1}),new c({canvas:this.canvas,color:n,phase:180,shift:-2.5,amplitude:250,frequency:.005,damping:1}),new c({canvas:this.canvas,color:n,phase:180,shift:-1,amplitude:200,frequency:.018,damping:1}),new c({canvas:this.canvas,color:n,phase:180,shift:1.5,amplitude:150,frequency:.01,damping:1})],this.animated&&this.drawStillWaves()}drawStillWaves(){this.waveList.forEach(e=>{e.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(e=>{e.redraw()}),await new Promise(e=>{setTimeout(e,1e3/30)}),await this.draw())}render(){let e=this.audioElement?this.progress/this.audioElement.duration*100:0,r=s`<div class="${a("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="${a("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")} (${this.speed}x)" @click="${this.togglePlaybackSpeed}" @keydown="${this.togglePlaybackSpeedKeydown}" part="playback-speed">${this.speed}x</button><sd-5-10-1-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")}" title="${this.isPlaying?this.localize.term("pauseAudio"):this.localize.term("playAudio")}" class="text-3xl">${this.isPlaying?s`<slot name="pause-icon"><sd-5-10-1-icon class="text-3xl" name="pause" library="_internal"></sd-5-10-1-icon></slot>`:s`<slot name="play-icon"><sd-5-10-1-icon class="text-3xl" name="start" library="_internal"></sd-5-10-1-icon></slot>`}</sd-5-10-1-button><div class="flex items-center justify-self-end">${this.hasSlotController.test("transcript")?s`<button class="${a("mr-6 w-6 h-6 hover:cursor-pointer sd-interactive",this.inverted&&"sd-interactive--inverted")}" aria-label="${this.isTranscriptOpen?this.localize.term("transcriptIsOpen"):this.localize.term("openTranscript")}" @click="${this.showTranscript}" @keydown="${this.showTranscriptKeydown}" part="transcript"><sd-5-10-1-icon class="w-6 h-6" name="transcript" library="_internal"></sd-5-10-1-icon></button>`:null} <button class="${a("w-6 h-6 hover:cursor-pointer sd-interactive",this.inverted&&"sd-interactive--inverted")}" part="volume" aria-label="${this.isMuted?this.localize.term("unmute"):this.localize.term("mute")}" @click="${this.toggleMute}" @keydown="${this.toggleMuteKeydown}"><sd-5-10-1-icon class="w-6 h-6" name="${this.isMuted?"mute":"volume"}" library="_internal"></sd-5-10-1-icon></button></div></div>`,o=s`<div class="${a("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="${a("current-time text-sm",this.inverted?"text-primary-400":"text-neutral-700")}">${this.currentTime}</div><div class="${a("current-time text-sm",this.inverted?"text-primary-400":"text-neutral-700")}">${this.duration}</div></div>`;return s`<div class="${a("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?r:null}<div class="relative">${this.animated&&!this.reversedLayout?s`${r}`:null} ${this.animated?s`<canvas class="w-full h-16"></canvas>`:null} ${!this.hideTimestamps&&this.animated&&this.reversedLayout?o:null} <input class="${a("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}" @input="${this.handleAudioProgress}" @keydown="${this.handleAudioProgressKeydown}" aria-label="${this.localize.term("seekBar")}" 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)"} ${e}%,${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)"} ${e}%)"></div>${this.hasSlotController.test("transcript")?s`<sd-5-10-1-drawer><slot name="transcript"></slot></sd-5-10-1-drawer>`:null} ${!this.hideTimestamps&&(!this.animated||!this.reversedLayout)?o:null}</div>`}};t.styles=[...p.styles,m`.progress-slider:focus-visible{outline:2px solid transparent;outline-offset:2px}.progress-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background-color:currentColor;border-radius:var(--sd-border-radius-full,9999px);border-style:none;height:var(--sd-spacing-4,1rem);transition-duration:.2s;-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-timing-function:cubic-bezier(.4,0,.2,1);width:var(--sd-spacing-4,1rem)}.progress-slider:focus-visible::-webkit-slider-thumb{outline-offset:2px;outline-style:solid}.progress-slider::-moz-range-thumb{-moz-appearance:none;appearance:none;background-color:currentColor;border-radius:var(--sd-border-radius-full,9999px);border-style:none;height:var(--sd-spacing-4,1rem);transition-duration:.2s;-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-timing-function:cubic-bezier(.4,0,.2,1);width:var(--sd-spacing-4,1rem)}.progress-slider:focus-visible::-moz-range-thumb{outline-offset:2px;outline-style:solid}sd-5-10-1-button::part(base){align-items:center;border-radius:var(--sd-border-radius-full,9999px);display:flex;height:var(--sd-spacing-16,4rem);justify-content:center;width:var(--sd-spacing-16,4rem)}sd-5-10-1-button::part(motion-wrapper){border-radius:var(--sd-border-radius-full,9999px)}sd-5-10-1-button::part(label){align-items:center;display:flex;flex-grow:0}`],i([d({type:Boolean,reflect:!0,attribute:"reversed-layout"})],t.prototype,"reversedLayout",2),i([d({type:Boolean,reflect:!0,attribute:"hide-timestamps"})],t.prototype,"hideTimestamps",2),i([d({type:Boolean,reflect:!0})],t.prototype,"animated",2),i([d({type:Boolean,reflect:!0})],t.prototype,"inverted",2),i([d({type:Number,reflect:!0})],t.prototype,"speed",2),i([l()],t.prototype,"currentTime",2),i([l()],t.prototype,"duration",2),i([l()],t.prototype,"isPlaying",2),i([l()],t.prototype,"isMuted",2),i([l()],t.prototype,"isTranscriptOpen",2),i([l()],t.prototype,"progress",2),i([h('[part="progress-slider"]')],t.prototype,"progressSlider",2),i([h('[part="audio-player"]')],t.prototype,"audioPlayerContainer",2),i([h("sd-5-10-1-drawer")],t.prototype,"drawer",2),i([h("canvas")],t.prototype,"canvas",2),t=i([f("sd-5-10-1-audio")],t);export{t as a};
+import{a as v}from"./chunk.CGQ2BPPZ.js";import{a}from"./chunk.26V4EXHB.js";import{a as g}from"./chunk.GHC63SXL.js";import{a as f,b as d,c as l,d as h,h as p}from"./chunk.76YBBAYM.js";import{b as m,e as s}from"./chunk.UWPDCU52.js";import{a as c}from"./chunk.WNP2V63C.js";import{e as i}from"./chunk.TJOCV4DC.js";var t=class extends p{constructor(){super();this.localize=new g(this);this.hasSlotController=new v(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.isTranscriptOpen=!1;this.progress=0;this.updateCurrentTime=this.updateCurrentTime.bind(this),this.handleAudioEnd=this.handleAudioEnd.bind(this),this.handleAudioProgress=this.handleAudioProgress.bind(this),this.handleAudioProgressKeydown=this.handleAudioProgressKeydown.bind(this),this.handleTranscriptDrawerToggle=this.handleTranscriptDrawerToggle.bind(this)}firstUpdated(){this.audioElement&&(this.audioElement.addEventListener("timeupdate",this.updateCurrentTime),this.audioElement.addEventListener("ended",this.handleAudioEnd),this.audioElement.setAttribute("controlsList","nodownload"),document.addEventListener("sd-after-hide",this.handleTranscriptDrawerToggle),this.audioElement.playbackRate=this.speed,this.animated&&this.initAnimation())}updated(e){if(e.has("animated")){let r=e.get("animated");!r&&this.animated?this.initAnimation():r&&!this.animated&&this.clear()}}get audioElement(){let e=this.shadowRoot.querySelector("slot");return(e==null?void 0:e.assignedElements().length)>0?e.assignedElements()[0]:null}updateCurrentTime(){if(!this.audioElement)return;let e=this.audioElement.currentTime;this.currentTime=this.formatTime(e),this.progress=e,this.progressSlider&&(this.progressSlider.value=this.progress.toString())}updateAudioDuration(){if(this.audioElement){if(isNaN(this.audioElement.duration)){setTimeout(()=>{this.updateAudioDuration()},100);return}this.duration=this.formatTime(this.audioElement.duration),this.progressSlider.max=this.audioElement.duration.toString()}}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(e){e.key==="Enter"&&(e.preventDefault(),this.toggleMute())}togglePlaybackSpeed(){this.audioElement&&(this.emit("sd-playback-speed"),this.speed=this.speed===1.5?1:this.speed+.25,this.audioElement.playbackRate=this.speed)}togglePlaybackSpeedKeydown(e){e.key==="Enter"&&(e.preventDefault(),this.togglePlaybackSpeed())}formatTime(e){let r=Math.floor(e/60),o=Math.floor(e%60);return`${r}:${o<10?"0":""}${o}`}handleAudioProgress(){if(!this.audioElement)return;let e=Number(this.progressSlider.value);this.audioElement.currentTime=e,this.progress=e,this.currentTime=this.formatTime(e)}handleAudioProgressKeydown(e){e.key==="ArrowRight"&&(this.progressSlider.value=(Number(this.progressSlider.value)+1).toString(),this.handleAudioProgress()),e.key==="ArrowLeft"&&(this.progressSlider.value=(Number(this.progressSlider.value)-1).toString(),this.handleAudioProgress())}handleTranscriptDrawerToggle(){this.isTranscriptOpen=!this.isTranscriptOpen}showTranscript(){this.emit("sd-transcript-click"),this.drawer.open=!0,this.handleTranscriptDrawerToggle()}showTranscriptKeydown(e){(e.key==="Enter"||e.key===" ")&&this.showTranscript()}rgbToHex(e){let r=e.match(/\d+/g);if(r&&r.length===3){let o=parseInt(r[0]),n=parseInt(r[1]),b=parseInt(r[2]),u=y=>y.toString(16).padStart(2,"0");return`#${u(o)}${u(n)}${u(b)}`.toUpperCase()}return null}initAnimation(){this.context=this.canvas.getContext("2d");let e=this.audioPlayerContainer.querySelector(".playback-speed"),o=window.getComputedStyle(e).color,n;this.inverted?n="#FFFFFF33":n=this.rgbToHex(o)+"33",this.waveList=[new c({canvas:this.canvas,color:n,phase:240,shift:1.5,amplitude:230,frequency:.012,damping:1}),new c({canvas:this.canvas,color:n,phase:180,shift:2.5,amplitude:250,frequency:.005,damping:1}),new c({canvas:this.canvas,color:n,phase:180,shift:-2.5,amplitude:250,frequency:.005,damping:1}),new c({canvas:this.canvas,color:n,phase:180,shift:-1,amplitude:200,frequency:.018,damping:1}),new c({canvas:this.canvas,color:n,phase:180,shift:1.5,amplitude:150,frequency:.01,damping:1})],this.animated&&this.drawStillWaves()}drawStillWaves(){this.waveList.forEach(e=>{e.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(e=>{e.redraw()}),await new Promise(e=>{setTimeout(e,1e3/30)}),await this.draw())}render(){let e=this.audioElement?this.progress/this.audioElement.duration*100:0,r=s`<div class="${a("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="${a("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")} (${this.speed}x)" @click="${this.togglePlaybackSpeed}" @keydown="${this.togglePlaybackSpeedKeydown}" part="playback-speed">${this.speed}x</button><sd-5-12-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")}" title="${this.isPlaying?this.localize.term("pauseAudio"):this.localize.term("playAudio")}" class="text-3xl">${this.isPlaying?s`<slot name="pause-icon"><sd-5-12-0-icon class="text-3xl" name="pause" library="_internal"></sd-5-12-0-icon></slot>`:s`<slot name="play-icon"><sd-5-12-0-icon class="text-3xl" name="start" library="_internal"></sd-5-12-0-icon></slot>`}</sd-5-12-0-button><div class="flex items-center justify-self-end">${this.hasSlotController.test("transcript")?s`<button class="${a("mr-6 w-6 h-6 hover:cursor-pointer sd-interactive",this.inverted&&"sd-interactive--inverted")}" aria-label="${this.isTranscriptOpen?this.localize.term("transcriptIsOpen"):this.localize.term("openTranscript")}" @click="${this.showTranscript}" @keydown="${this.showTranscriptKeydown}" part="transcript"><sd-5-12-0-icon class="w-6 h-6" name="transcript" library="_internal"></sd-5-12-0-icon></button>`:null} <button class="${a("w-6 h-6 hover:cursor-pointer sd-interactive",this.inverted&&"sd-interactive--inverted")}" part="volume" aria-label="${this.isMuted?this.localize.term("unmute"):this.localize.term("mute")}" @click="${this.toggleMute}" @keydown="${this.toggleMuteKeydown}"><sd-5-12-0-icon class="w-6 h-6" name="${this.isMuted?"mute":"volume"}" library="_internal"></sd-5-12-0-icon></button></div></div>`,o=s`<div class="${a("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="${a("current-time text-sm",this.inverted?"text-primary-400":"text-neutral-700")}">${this.currentTime}</div><div class="${a("current-time text-sm",this.inverted?"text-primary-400":"text-neutral-700")}">${this.duration}</div></div>`;return s`<div class="${a("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?r:null}<div class="relative">${this.animated&&!this.reversedLayout?s`${r}`:null} ${this.animated?s`<canvas class="w-full h-16"></canvas>`:null} ${!this.hideTimestamps&&this.animated&&this.reversedLayout?o:null} <input class="${a("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}" @input="${this.handleAudioProgress}" @keydown="${this.handleAudioProgressKeydown}" aria-label="${this.localize.term("seekBar")}" 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)"} ${e}%,${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)"} ${e}%)"></div>${this.hasSlotController.test("transcript")?s`<sd-5-12-0-drawer><slot name="transcript"></slot></sd-5-12-0-drawer>`:null} ${!this.hideTimestamps&&(!this.animated||!this.reversedLayout)?o:null}</div>`}};t.styles=[...p.styles,m`.progress-slider:focus-visible{outline:2px solid transparent;outline-offset:2px}.progress-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background-color:currentColor;border-radius:var(--sd-border-radius-full,9999px);border-style:none;height:var(--sd-spacing-4,1rem);transition-duration:.2s;-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-timing-function:cubic-bezier(.4,0,.2,1);width:var(--sd-spacing-4,1rem)}.progress-slider:focus-visible::-webkit-slider-thumb{outline-offset:2px;outline-style:solid}.progress-slider::-moz-range-thumb{-moz-appearance:none;appearance:none;background-color:currentColor;border-radius:var(--sd-border-radius-full,9999px);border-style:none;height:var(--sd-spacing-4,1rem);transition-duration:.2s;-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-timing-function:cubic-bezier(.4,0,.2,1);width:var(--sd-spacing-4,1rem)}.progress-slider:focus-visible::-moz-range-thumb{outline-offset:2px;outline-style:solid}sd-5-12-0-button::part(base){align-items:center;border-radius:var(--sd-border-radius-full,9999px);display:flex;height:var(--sd-spacing-16,4rem);justify-content:center;width:var(--sd-spacing-16,4rem)}sd-5-12-0-button::part(motion-wrapper){border-radius:var(--sd-border-radius-full,9999px)}sd-5-12-0-button::part(label){align-items:center;display:flex;flex-grow:0}`],i([d({type:Boolean,reflect:!0,attribute:"reversed-layout"})],t.prototype,"reversedLayout",2),i([d({type:Boolean,reflect:!0,attribute:"hide-timestamps"})],t.prototype,"hideTimestamps",2),i([d({type:Boolean,reflect:!0})],t.prototype,"animated",2),i([d({type:Boolean,reflect:!0})],t.prototype,"inverted",2),i([d({type:Number,reflect:!0})],t.prototype,"speed",2),i([l()],t.prototype,"currentTime",2),i([l()],t.prototype,"duration",2),i([l()],t.prototype,"isPlaying",2),i([l()],t.prototype,"isMuted",2),i([l()],t.prototype,"isTranscriptOpen",2),i([l()],t.prototype,"progress",2),i([h('[part="progress-slider"]')],t.prototype,"progressSlider",2),i([h('[part="audio-player"]')],t.prototype,"audioPlayerContainer",2),i([h("sd-5-12-0-drawer")],t.prototype,"drawer",2),i([h("canvas")],t.prototype,"canvas",2),t=i([f("sd-5-12-0-audio")],t);export{t as a};