@solid-design-system/components 4.8.0 → 4.8.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/{cdn-versioned/chunks/chunk.OD3X3SPF.js → cdn/chunks/chunk.66BLQSO5.js} +2 -2
- package/cdn/components/audio/audio.js +1 -1
- package/cdn/components/button/button.js +1 -1
- package/cdn/components/dialog/dialog.js +1 -1
- package/cdn/components/drawer/drawer.js +1 -1
- package/cdn/components/flipcard/flipcard.js +1 -1
- package/cdn/components/notification/notification.js +1 -1
- package/cdn/custom-elements.json +1 -1
- package/cdn/solid-components.bundle.js +1 -1
- package/cdn/solid-components.iife.js +1 -1
- package/cdn/solid-components.js +1 -1
- package/cdn/web-types.json +1 -1
- package/cdn-versioned/_components/menu/menu.js +1 -1
- package/cdn-versioned/_components/menu/menu.styles.js +1 -1
- package/cdn-versioned/_components/menu-item/menu-item.js +2 -2
- package/cdn-versioned/chunks/chunk.2ACESXLF.js +1 -1
- package/cdn-versioned/chunks/chunk.3CECQGCF.js +1 -1
- package/cdn-versioned/chunks/chunk.3DDNX327.js +1 -1
- package/cdn-versioned/chunks/chunk.3V4HFQ5W.js +1 -1
- package/cdn-versioned/chunks/chunk.4VLQS75A.js +1 -1
- package/cdn-versioned/chunks/chunk.5KY6BIV3.js +4 -4
- package/{cdn/chunks/chunk.OD3X3SPF.js → cdn-versioned/chunks/chunk.66BLQSO5.js} +2 -2
- package/cdn-versioned/chunks/chunk.6HLS5XU2.js +1 -1
- package/cdn-versioned/chunks/chunk.6M5O37VJ.js +1 -1
- package/cdn-versioned/chunks/chunk.7IYNE42V.js +1 -1
- package/cdn-versioned/chunks/chunk.ARJ5IWTT.js +1 -1
- package/cdn-versioned/chunks/chunk.BUPSKGHG.js +1 -1
- package/cdn-versioned/chunks/chunk.CAFBMLXB.js +1 -1
- package/cdn-versioned/chunks/chunk.CEVVDV52.js +1 -1
- package/cdn-versioned/chunks/chunk.D6GGRJJY.js +1 -1
- package/cdn-versioned/chunks/chunk.E3KCBW5V.js +1 -1
- package/cdn-versioned/chunks/chunk.FBPOMQV7.js +1 -1
- package/cdn-versioned/chunks/chunk.FZWEIQHD.js +1 -1
- package/cdn-versioned/chunks/chunk.G4SESDXX.js +1 -1
- package/cdn-versioned/chunks/chunk.GUKUXRNQ.js +2 -2
- package/cdn-versioned/chunks/chunk.HXEH6FCX.js +1 -1
- package/cdn-versioned/chunks/chunk.JEOESRAP.js +1 -1
- package/cdn-versioned/chunks/chunk.JSTQDFB5.js +1 -1
- package/cdn-versioned/chunks/chunk.KC5HYW44.js +1 -1
- package/cdn-versioned/chunks/chunk.KGY5M6CW.js +1 -1
- package/cdn-versioned/chunks/chunk.LWMWC2BY.js +1 -1
- package/cdn-versioned/chunks/chunk.M2A4DKJE.js +1 -1
- package/cdn-versioned/chunks/chunk.MU7TSWXE.js +1 -1
- package/cdn-versioned/chunks/chunk.MY3BLV5N.js +1 -1
- package/cdn-versioned/chunks/chunk.NFPYO3FO.js +1 -1
- package/cdn-versioned/chunks/chunk.P2GFJII7.js +2 -2
- package/cdn-versioned/chunks/chunk.QB5XRW3D.js +1 -1
- package/cdn-versioned/chunks/chunk.QCGQTLWK.js +1 -1
- package/cdn-versioned/chunks/chunk.QXGVQE6X.js +1 -1
- package/cdn-versioned/chunks/chunk.R4ZEEPUZ.js +1 -1
- package/cdn-versioned/chunks/chunk.SJPCYEZX.js +3 -3
- package/cdn-versioned/chunks/chunk.SLWYMYOQ.js +1 -1
- package/cdn-versioned/chunks/chunk.STUYBIXK.js +1 -1
- package/cdn-versioned/chunks/chunk.U7MMKASK.js +1 -1
- package/cdn-versioned/chunks/chunk.UA57DUVU.js +1 -1
- package/cdn-versioned/chunks/chunk.UJGX2D6U.js +1 -1
- package/cdn-versioned/chunks/chunk.UNGGT5NF.js +4 -4
- package/cdn-versioned/chunks/chunk.UX7V7Q4U.js +1 -1
- package/cdn-versioned/chunks/chunk.VAP2AXYU.js +1 -1
- package/cdn-versioned/chunks/chunk.W7A3TU2Z.js +1 -1
- package/cdn-versioned/chunks/chunk.WKWPEBJP.js +1 -1
- package/cdn-versioned/chunks/chunk.WXRJEHMG.js +1 -1
- package/cdn-versioned/chunks/chunk.WZIDBULK.js +1 -1
- package/cdn-versioned/chunks/chunk.YI2OH2MN.js +1 -1
- package/cdn-versioned/chunks/chunk.YMUOQ3X3.js +1 -1
- package/cdn-versioned/chunks/chunk.YPQX4UIH.js +1 -1
- package/cdn-versioned/chunks/chunk.YVJT5ICZ.js +1 -1
- package/cdn-versioned/chunks/chunk.Z2JHVFLZ.js +1 -1
- package/cdn-versioned/components/accordion/accordion.d.ts +1 -1
- package/cdn-versioned/components/accordion-group/accordion-group.d.ts +1 -1
- package/cdn-versioned/components/animation/animation.d.ts +1 -1
- package/cdn-versioned/components/audio/audio.d.ts +1 -1
- package/cdn-versioned/components/audio/audio.js +1 -1
- package/cdn-versioned/components/badge/badge.d.ts +1 -1
- package/cdn-versioned/components/brandshape/brandshape.d.ts +1 -1
- package/cdn-versioned/components/button/button.d.ts +1 -1
- package/cdn-versioned/components/button/button.js +1 -1
- package/cdn-versioned/components/button-group/button-group.d.ts +1 -1
- package/cdn-versioned/components/carousel/carousel.d.ts +1 -1
- package/cdn-versioned/components/carousel-item/carousel-item.d.ts +1 -1
- package/cdn-versioned/components/checkbox/checkbox.d.ts +1 -1
- package/cdn-versioned/components/checkbox-group/checkbox-group.d.ts +1 -1
- package/cdn-versioned/components/combobox/combobox.d.ts +1 -1
- package/cdn-versioned/components/dialog/dialog.d.ts +1 -1
- package/cdn-versioned/components/dialog/dialog.js +1 -1
- package/cdn-versioned/components/divider/divider.d.ts +1 -1
- package/cdn-versioned/components/drawer/drawer.d.ts +1 -1
- package/cdn-versioned/components/drawer/drawer.js +1 -1
- package/cdn-versioned/components/dropdown/dropdown.d.ts +1 -1
- package/cdn-versioned/components/expandable/expandable.d.ts +1 -1
- package/cdn-versioned/components/flipcard/flipcard.d.ts +1 -1
- package/cdn-versioned/components/flipcard/flipcard.js +1 -1
- package/cdn-versioned/components/header/header.d.ts +1 -1
- package/cdn-versioned/components/icon/icon.d.ts +1 -1
- package/cdn-versioned/components/include/include.d.ts +1 -1
- package/cdn-versioned/components/input/input.d.ts +1 -1
- package/cdn-versioned/components/link/link.d.ts +1 -1
- package/cdn-versioned/components/map-marker/map-marker.d.ts +1 -1
- package/cdn-versioned/components/navigation-item/navigation-item.d.ts +1 -1
- package/cdn-versioned/components/notification/notification.d.ts +1 -1
- package/cdn-versioned/components/notification/notification.js +1 -1
- package/cdn-versioned/components/optgroup/optgroup.d.ts +2 -2
- package/cdn-versioned/components/option/option.d.ts +1 -1
- package/cdn-versioned/components/popup/popup.d.ts +1 -1
- package/cdn-versioned/components/quickfact/quickfact.d.ts +1 -1
- package/cdn-versioned/components/radio/radio.d.ts +1 -1
- package/cdn-versioned/components/radio-button/radio-button.d.ts +1 -1
- package/cdn-versioned/components/radio-group/radio-group.d.ts +2 -2
- package/cdn-versioned/components/scrollable/scrollable.d.ts +1 -1
- package/cdn-versioned/components/select/select.d.ts +1 -1
- package/cdn-versioned/components/spinner/spinner.d.ts +1 -1
- package/cdn-versioned/components/step/step.d.ts +1 -1
- package/cdn-versioned/components/step-group/step-group.d.ts +1 -1
- package/cdn-versioned/components/switch/switch.d.ts +1 -1
- package/cdn-versioned/components/tab/tab.d.ts +1 -1
- package/cdn-versioned/components/tab-group/tab-group.d.ts +1 -1
- package/cdn-versioned/components/tab-panel/tab-panel.d.ts +1 -1
- package/cdn-versioned/components/tag/tag.d.ts +1 -1
- package/cdn-versioned/components/textarea/textarea.d.ts +1 -1
- package/cdn-versioned/components/tooltip/tooltip.d.ts +1 -1
- package/cdn-versioned/components/video/video.d.ts +1 -1
- package/cdn-versioned/custom-elements.json +211 -211
- package/cdn-versioned/internal/form.js +3 -3
- package/cdn-versioned/solid-components.bundle.js +16 -16
- package/cdn-versioned/solid-components.css +2 -2
- package/cdn-versioned/solid-components.iife.js +16 -16
- package/cdn-versioned/solid-components.js +1 -1
- package/cdn-versioned/vscode.html-custom-data.json +80 -80
- package/cdn-versioned/web-types.json +137 -137
- package/dist/chunks/{chunk.2PTRX66S.js → chunk.LFS3FPZC.js} +1 -1
- package/dist/components/audio/audio.js +1 -1
- package/dist/components/button/button.js +1 -1
- package/dist/components/dialog/dialog.js +1 -1
- package/dist/components/drawer/drawer.js +1 -1
- package/dist/components/flipcard/flipcard.js +1 -1
- package/dist/components/notification/notification.js +1 -1
- package/dist/custom-elements.json +1 -1
- package/dist/solid-components.js +1 -1
- package/dist/web-types.json +1 -1
- package/dist-versioned/_components/menu/menu.js +1 -1
- package/dist-versioned/_components/menu/menu.styles.js +1 -1
- package/dist-versioned/_components/menu-item/menu-item.js +2 -2
- package/dist-versioned/chunks/chunk.2NNBJVTZ.js +3 -3
- package/dist-versioned/chunks/chunk.3FXZJEOK.js +5 -5
- package/dist-versioned/chunks/chunk.3SSTRTWG.js +5 -5
- package/dist-versioned/chunks/chunk.5D3DLEA5.js +2 -2
- package/dist-versioned/chunks/chunk.66D76UI7.js +2 -2
- package/dist-versioned/chunks/chunk.6DKXZWRN.js +4 -4
- package/dist-versioned/chunks/chunk.6IAQSTST.js +1 -1
- package/dist-versioned/chunks/chunk.6XBF3N4L.js +2 -2
- package/dist-versioned/chunks/chunk.6YKDWN2D.js +1 -1
- package/dist-versioned/chunks/chunk.7QLBUQWZ.js +3 -3
- package/dist-versioned/chunks/chunk.7TEDJEW2.js +1 -1
- package/dist-versioned/chunks/chunk.AOR7TGS6.js +6 -6
- package/dist-versioned/chunks/chunk.APR7T2Q2.js +2 -2
- package/dist-versioned/chunks/chunk.BYNEIT5O.js +1 -1
- package/dist-versioned/chunks/chunk.C6RBE2LQ.js +26 -26
- package/dist-versioned/chunks/chunk.EDWWY2WL.js +3 -3
- package/dist-versioned/chunks/chunk.EPXGUWP5.js +24 -24
- package/dist-versioned/chunks/chunk.F4E63GW7.js +1 -1
- package/dist-versioned/chunks/chunk.FT7UBABX.js +2 -2
- package/dist-versioned/chunks/chunk.GVOME6PD.js +1 -1
- package/dist-versioned/chunks/chunk.IYYFKCD2.js +5 -5
- package/dist-versioned/chunks/chunk.JPS2VQZR.js +1 -1
- package/dist-versioned/chunks/chunk.KL2TXON5.js +9 -9
- package/dist-versioned/chunks/chunk.KVKRZJS7.js +3 -3
- package/dist-versioned/chunks/chunk.L6RX3JU4.js +3 -3
- package/dist-versioned/chunks/{chunk.2PTRX66S.js → chunk.LFS3FPZC.js} +5 -5
- package/dist-versioned/chunks/chunk.LKIMQD74.js +5 -5
- package/dist-versioned/chunks/chunk.LYFVCZXL.js +1 -1
- package/dist-versioned/chunks/chunk.MRAHP3SK.js +5 -5
- package/dist-versioned/chunks/chunk.MVTLWOO6.js +2 -2
- package/dist-versioned/chunks/chunk.NB24DI75.js +11 -11
- package/dist-versioned/chunks/chunk.NKA4K4KV.js +2 -2
- package/dist-versioned/chunks/chunk.NMFWOLLO.js +2 -2
- package/dist-versioned/chunks/chunk.NRUFRUNL.js +2 -2
- package/dist-versioned/chunks/chunk.OBZKDICF.js +14 -14
- package/dist-versioned/chunks/chunk.OOTMYYX7.js +2 -2
- package/dist-versioned/chunks/chunk.OT3GHFYG.js +6 -6
- package/dist-versioned/chunks/chunk.PKYDE7EM.js +1 -1
- package/dist-versioned/chunks/chunk.PWGSF3ZK.js +5 -5
- package/dist-versioned/chunks/chunk.QMVHHAVD.js +8 -8
- package/dist-versioned/chunks/chunk.R6RYT35M.js +1 -1
- package/dist-versioned/chunks/chunk.RHATTS2F.js +4 -4
- package/dist-versioned/chunks/chunk.SI5HEOQ5.js +1 -1
- package/dist-versioned/chunks/chunk.TMJWUQJA.js +2 -2
- package/dist-versioned/chunks/chunk.TVIAU3GO.js +2 -2
- package/dist-versioned/chunks/chunk.UIQBHPD3.js +2 -2
- package/dist-versioned/chunks/chunk.VCIIYGYE.js +1 -1
- package/dist-versioned/chunks/chunk.W2B5IXKP.js +2 -2
- package/dist-versioned/chunks/chunk.WQXQXTPT.js +2 -2
- package/dist-versioned/chunks/chunk.XSC2JQSP.js +1 -1
- package/dist-versioned/chunks/chunk.YFH2IBBJ.js +13 -13
- package/dist-versioned/chunks/chunk.ZA7XBPBQ.js +1 -1
- package/dist-versioned/chunks/chunk.ZUQDKLXG.js +2 -2
- package/dist-versioned/components/accordion/accordion.d.ts +1 -1
- package/dist-versioned/components/accordion-group/accordion-group.d.ts +1 -1
- package/dist-versioned/components/animation/animation.d.ts +1 -1
- package/dist-versioned/components/audio/audio.d.ts +1 -1
- package/dist-versioned/components/audio/audio.js +1 -1
- package/dist-versioned/components/badge/badge.d.ts +1 -1
- package/dist-versioned/components/brandshape/brandshape.d.ts +1 -1
- package/dist-versioned/components/button/button.d.ts +1 -1
- package/dist-versioned/components/button/button.js +1 -1
- package/dist-versioned/components/button-group/button-group.d.ts +1 -1
- package/dist-versioned/components/carousel/carousel.d.ts +1 -1
- package/dist-versioned/components/carousel-item/carousel-item.d.ts +1 -1
- package/dist-versioned/components/checkbox/checkbox.d.ts +1 -1
- package/dist-versioned/components/checkbox-group/checkbox-group.d.ts +1 -1
- package/dist-versioned/components/combobox/combobox.d.ts +1 -1
- package/dist-versioned/components/dialog/dialog.d.ts +1 -1
- package/dist-versioned/components/dialog/dialog.js +1 -1
- package/dist-versioned/components/divider/divider.d.ts +1 -1
- package/dist-versioned/components/drawer/drawer.d.ts +1 -1
- package/dist-versioned/components/drawer/drawer.js +1 -1
- package/dist-versioned/components/dropdown/dropdown.d.ts +1 -1
- package/dist-versioned/components/expandable/expandable.d.ts +1 -1
- package/dist-versioned/components/flipcard/flipcard.d.ts +1 -1
- package/dist-versioned/components/flipcard/flipcard.js +1 -1
- package/dist-versioned/components/header/header.d.ts +1 -1
- package/dist-versioned/components/icon/icon.d.ts +1 -1
- package/dist-versioned/components/include/include.d.ts +1 -1
- package/dist-versioned/components/input/input.d.ts +1 -1
- package/dist-versioned/components/link/link.d.ts +1 -1
- package/dist-versioned/components/map-marker/map-marker.d.ts +1 -1
- package/dist-versioned/components/navigation-item/navigation-item.d.ts +1 -1
- package/dist-versioned/components/notification/notification.d.ts +1 -1
- package/dist-versioned/components/notification/notification.js +1 -1
- package/dist-versioned/components/optgroup/optgroup.d.ts +2 -2
- package/dist-versioned/components/option/option.d.ts +1 -1
- package/dist-versioned/components/popup/popup.d.ts +1 -1
- package/dist-versioned/components/quickfact/quickfact.d.ts +1 -1
- package/dist-versioned/components/radio/radio.d.ts +1 -1
- package/dist-versioned/components/radio-button/radio-button.d.ts +1 -1
- package/dist-versioned/components/radio-group/radio-group.d.ts +2 -2
- package/dist-versioned/components/scrollable/scrollable.d.ts +1 -1
- package/dist-versioned/components/select/select.d.ts +1 -1
- package/dist-versioned/components/spinner/spinner.d.ts +1 -1
- package/dist-versioned/components/step/step.d.ts +1 -1
- package/dist-versioned/components/step-group/step-group.d.ts +1 -1
- package/dist-versioned/components/switch/switch.d.ts +1 -1
- package/dist-versioned/components/tab/tab.d.ts +1 -1
- package/dist-versioned/components/tab-group/tab-group.d.ts +1 -1
- package/dist-versioned/components/tab-panel/tab-panel.d.ts +1 -1
- package/dist-versioned/components/tag/tag.d.ts +1 -1
- package/dist-versioned/components/textarea/textarea.d.ts +1 -1
- package/dist-versioned/components/tooltip/tooltip.d.ts +1 -1
- package/dist-versioned/components/video/video.d.ts +1 -1
- package/dist-versioned/custom-elements.json +211 -211
- package/dist-versioned/internal/form.js +3 -3
- package/dist-versioned/solid-components.css +2 -2
- package/dist-versioned/solid-components.js +1 -1
- package/dist-versioned/vscode.html-custom-data.json +80 -80
- package/dist-versioned/web-types.json +137 -137
- package/package.json +1 -1
|
@@ -56,7 +56,7 @@ var SdCarousel = class extends SolidElement {
|
|
|
56
56
|
this.pausedAutoplay = false;
|
|
57
57
|
this.autoplayController = new AutoplayController(this, () => this.next());
|
|
58
58
|
this.scrollController = new ScrollController(this);
|
|
59
|
-
this.slides = this.getElementsByTagName("sd-4-8-
|
|
59
|
+
this.slides = this.getElementsByTagName("sd-4-8-1-carousel-item");
|
|
60
60
|
// determines which slide is displayed
|
|
61
61
|
// A map containing the state of all the slides
|
|
62
62
|
this.intersectionObserverEntries = /* @__PURE__ */ new Map();
|
|
@@ -380,7 +380,7 @@ var SdCarousel = class extends SolidElement {
|
|
|
380
380
|
)}" aria-label="${this.localize.term("previousSlide")}" aria-controls="scroll-container" aria-disabled="${prevEnabled ? "false" : "true"}" @focus="${this.handleFocus}" @blur="${this.handleBlur}" @click="${prevEnabled ? (e) => {
|
|
381
381
|
this.previous();
|
|
382
382
|
this.unblockAutoplay(e, this.previousButton);
|
|
383
|
-
} : null}"><slot name="previous-icon"><sd-4-8-
|
|
383
|
+
} : null}"><slot name="previous-icon"><sd-4-8-1-icon class="${cx("h-6 w-6 rotate-90 grid place-items-center")}" library="system" name="${isLtr ? "chevron-down" : "chevron-up"}"></sd-4-8-1-icon></slot></button> ${this.variant === "dot" ? html`<div part="pagination-dot" role="tablist" class="${cx("carousel__pagination dot flex wrap items-center gap-2")}" aria-controls="scroll-container">${map(range(pagesCount), (index) => {
|
|
384
384
|
const isActive = index + 1 === currentPage;
|
|
385
385
|
return html`<button part="pagination-item ${isActive ? "pagination-item--active" : ""}" class="${cx(
|
|
386
386
|
"carousel__pagination-item",
|
|
@@ -403,7 +403,7 @@ var SdCarousel = class extends SolidElement {
|
|
|
403
403
|
)}" aria-label="${this.localize.term("nextSlide")}" aria-controls="scroll-container" aria-disabled="${nextEnabled ? "false" : "true"}" @focus="${this.handleFocus}" @blur="${this.handleBlur}" @click="${nextEnabled ? (e) => {
|
|
404
404
|
this.next();
|
|
405
405
|
this.unblockAutoplay(e, this.nextButton);
|
|
406
|
-
} : null}"><slot name="next-icon"><sd-4-8-
|
|
406
|
+
} : null}"><slot name="next-icon"><sd-4-8-1-icon class="${cx("h-6 w-6 rotate-90 grid place-items-center")}" library="system" name="${isLtr ? "chevron-up" : "chevron-down"}"></sd-4-8-1-icon></slot></button></div><button class="${cx(
|
|
407
407
|
"ml-6 !rounded-sm",
|
|
408
408
|
"!absolute !right-0 sd-interactive",
|
|
409
409
|
this.inverted ? "sd-interactive--inverted" : "sd-interactive--reset",
|
|
@@ -413,12 +413,12 @@ var SdCarousel = class extends SolidElement {
|
|
|
413
413
|
if (e.detail) {
|
|
414
414
|
this.autoplayControls.blur();
|
|
415
415
|
}
|
|
416
|
-
}}"><slot name="autoplay-start" class="${cx(!this.pausedAutoplay ? "hidden" : "")}"><sd-4-8-
|
|
416
|
+
}}"><slot name="autoplay-start" class="${cx(!this.pausedAutoplay ? "hidden" : "")}"><sd-4-8-1-icon class="h-6 w-6 grid place-items-center" library="system" name="start"></sd-4-8-1-icon></slot><slot name="autoplay-pause" class="${cx(this.pausedAutoplay ? "hidden" : "")}"><sd-4-8-1-icon class="h-6 w-6 grid place-items-center" library="system" name="pause"></sd-4-8-1-icon></slot></button></div></div>`;
|
|
417
417
|
}
|
|
418
418
|
};
|
|
419
419
|
SdCarousel.styles = [
|
|
420
420
|
...SolidElement.styles,
|
|
421
|
-
css`:host{--slide-gap:var(--sl-spacing-medium,1rem);--scroll-hint:0px;display:flex}.carousel{grid-template-areas:". slides ." ". pagination ."}.carousel__pagination{grid-area:pagination}.carousel__slides{grid-area:slides;scrollbar-width:none;--slide-size:calc((100% - (var(--slides-per-page) - 1)*var(--slide-gap))/var(--slides-per-page));-moz-column-gap:var(--slide-gap);column-gap:var(--slide-gap);grid-auto-columns:var(--slide-size);padding-inline:var(--scroll-hint);scroll-padding-inline:var(--scroll-hint)}.carousel__slides::-webkit-scrollbar{display:none}@media (prefers-reduced-motion){:where(.carousel__slides){scroll-behavior:auto}}.carousel__navigation{grid-area:navigation}sd-4-8-
|
|
421
|
+
css`:host{--slide-gap:var(--sl-spacing-medium,1rem);--scroll-hint:0px;display:flex}.carousel{grid-template-areas:". slides ." ". pagination ."}.carousel__pagination{grid-area:pagination}.carousel__slides{grid-area:slides;scrollbar-width:none;--slide-size:calc((100% - (var(--slides-per-page) - 1)*var(--slide-gap))/var(--slides-per-page));-moz-column-gap:var(--slide-gap);column-gap:var(--slide-gap);grid-auto-columns:var(--slide-size);padding-inline:var(--scroll-hint);scroll-padding-inline:var(--scroll-hint)}.carousel__slides::-webkit-scrollbar{display:none}@media (prefers-reduced-motion){:where(.carousel__slides){scroll-behavior:auto}}.carousel__navigation{grid-area:navigation}sd-4-8-1-button::part(label){align-items:center;display:flex;flex:1 1 auto;pointer-events:none}`
|
|
422
422
|
];
|
|
423
423
|
__decorateClass([
|
|
424
424
|
query('[part~="autoplay-controls"]')
|
|
@@ -485,7 +485,7 @@ __decorateClass([
|
|
|
485
485
|
watch("autoplay")
|
|
486
486
|
], SdCarousel.prototype, "handleAutoplayChange", 1);
|
|
487
487
|
SdCarousel = __decorateClass([
|
|
488
|
-
customElement("sd-4-8-
|
|
488
|
+
customElement("sd-4-8-1-carousel")
|
|
489
489
|
], SdCarousel);
|
|
490
490
|
|
|
491
491
|
export {
|
|
@@ -85,7 +85,7 @@ var SdFlipcard = class extends SolidElement {
|
|
|
85
85
|
"gradient-light": this.placement === "top" ? "bg-gradient-to-b from-white/60 to-white/0 mb-auto" : "bg-gradient-to-t from-white/60 to-white/0 mt-auto",
|
|
86
86
|
"gradient-dark": this.placement === "bottom" ? "bg-gradient-to-t from-primary-800/60 to-primary-800/0 mt-auto" : "bg-gradient-to-b from-primary-800/60 to-primary-800/0 mb-auto"
|
|
87
87
|
}[this.frontVariant]
|
|
88
|
-
)}"></div><sd-4-8-
|
|
88
|
+
)}"></div><sd-4-8-1-button part="front-button" size="md" variant="${{
|
|
89
89
|
primary: "tertiary",
|
|
90
90
|
"primary-100": "tertiary",
|
|
91
91
|
"gradient-light": "primary",
|
|
@@ -95,7 +95,7 @@ var SdFlipcard = class extends SolidElement {
|
|
|
95
95
|
"primary-100": false,
|
|
96
96
|
"gradient-light": true,
|
|
97
97
|
"gradient-dark": true
|
|
98
|
-
}[this.frontVariant]}" class="${cx("absolute right-0 p-2 flex-shrink-0", this.placement === "top" ? "bottom-0" : "top-0")}" @click="${this.flipFront}" @keydown="${this.handleFrontKeydown}"><sd-4-8-
|
|
98
|
+
}[this.frontVariant]}" class="${cx("absolute right-0 p-2 flex-shrink-0", this.placement === "top" ? "bottom-0" : "top-0")}" @click="${this.flipFront}" @keydown="${this.handleFrontKeydown}"><sd-4-8-1-icon library="system" name="reload" label="Flip to Back"></sd-4-8-1-icon></sd-4-8-1-button></div><div part="back" tabindex="0" aria-hidden="${this.activeSide === "front"}" inert="${ifDefined(this.activeSide === "front" || void 0)}" class="${cx(
|
|
99
99
|
"flip-card__side flip-card__side--back overflow-hidden transition-transform duration-1000 ease-in-out",
|
|
100
100
|
"flex focus-visible:focus-outline",
|
|
101
101
|
"absolute top-0 left-0 w-full h-full justify-end text-left",
|
|
@@ -128,7 +128,7 @@ var SdFlipcard = class extends SolidElement {
|
|
|
128
128
|
"gradient-light": this.placement === "top" ? "bg-gradient-to-b from-white/60 to-white/0 mb-auto" : "bg-gradient-to-t from-white/60 to-white/0 mt-auto",
|
|
129
129
|
"gradient-dark": this.placement === "bottom" ? "bg-gradient-to-t from-primary-800/60 to-primary-800/0 mt-auto" : "bg-gradient-to-b from-primary-800/60 to-primary-800/0 mb-auto"
|
|
130
130
|
}[this.backVariant]
|
|
131
|
-
)}"></div><sd-4-8-
|
|
131
|
+
)}"></div><sd-4-8-1-button size="md" part="back-button" variant="${{
|
|
132
132
|
primary: "tertiary",
|
|
133
133
|
"primary-100": "tertiary",
|
|
134
134
|
"gradient-light": "primary",
|
|
@@ -138,7 +138,7 @@ var SdFlipcard = class extends SolidElement {
|
|
|
138
138
|
"primary-100": false,
|
|
139
139
|
"gradient-light": true,
|
|
140
140
|
"gradient-dark": true
|
|
141
|
-
}[this.backVariant]}" class="${cx("absolute right-0 p-2 flex-shrink-0", this.placement === "top" ? "bottom-0" : "top-0")}" @click="${this.flipBack}" @keydown="${this.handleBackKeydown}"><sd-4-8-
|
|
141
|
+
}[this.backVariant]}" class="${cx("absolute right-0 p-2 flex-shrink-0", this.placement === "top" ? "bottom-0" : "top-0")}" @click="${this.flipBack}" @keydown="${this.handleBackKeydown}"><sd-4-8-1-icon library="system" name="reload" label="Flip to Front"></sd-4-8-1-icon></sd-4-8-1-button></div></div>`;
|
|
142
142
|
}
|
|
143
143
|
};
|
|
144
144
|
/**
|
|
@@ -170,7 +170,7 @@ __decorateClass([
|
|
|
170
170
|
state()
|
|
171
171
|
], SdFlipcard.prototype, "activeSide", 2);
|
|
172
172
|
SdFlipcard = __decorateClass([
|
|
173
|
-
customElement("sd-4-8-
|
|
173
|
+
customElement("sd-4-8-1-flipcard")
|
|
174
174
|
], SdFlipcard);
|
|
175
175
|
|
|
176
176
|
export {
|
|
@@ -125,7 +125,7 @@ var SdScrollable = class extends SolidElement {
|
|
|
125
125
|
down: this.upButton
|
|
126
126
|
}[direction];
|
|
127
127
|
const label = reachedStart ? `${this.localize.term("scrolled")}. ${this.localize.term("scrollToEnd")}` : `${this.localize.term("scrolled")}. ${this.localize.term("scrollToStart")}`;
|
|
128
|
-
(_c = oppositeButton == null ? void 0 : oppositeButton.querySelector("sd-4-8-
|
|
128
|
+
(_c = oppositeButton == null ? void 0 : oppositeButton.querySelector("sd-4-8-1-icon")) == null ? void 0 : _c.setAttribute("label", label);
|
|
129
129
|
if (isKeyboardTriggered) {
|
|
130
130
|
oppositeButton == null ? void 0 : oppositeButton.focus();
|
|
131
131
|
} else {
|
|
@@ -137,7 +137,7 @@ var SdScrollable = class extends SolidElement {
|
|
|
137
137
|
const scrollTo = ["left", "up"].includes(direction) ? "start" : "end";
|
|
138
138
|
const label = scrollTo === "start" ? this.localize.term("scrollToStart") : this.localize.term("scrollToEnd");
|
|
139
139
|
const button = e.target;
|
|
140
|
-
(_a = button.querySelector("sd-4-8-
|
|
140
|
+
(_a = button.querySelector("sd-4-8-1-icon")) == null ? void 0 : _a.setAttribute("label", label);
|
|
141
141
|
}
|
|
142
142
|
render() {
|
|
143
143
|
const scrollButtonClasses = "relative p-0 border-0 bg-transparent cursor-pointer w-5 h-5 flex items-center justify-center sd-interactive rounded-md flex text-lg";
|
|
@@ -154,21 +154,21 @@ var SdScrollable = class extends SolidElement {
|
|
|
154
154
|
)}" @scroll="${this.handleContainerScroll}" tabindex="0"><div id="announcement-container" role="status" class="sr-only"></div><div part="scroll-content" class="flex-1"><slot></slot></div></div>${this.buttons ? html`${this.isScrollHorizontalEnabled ? html`<div part="button-left" class="${cx(
|
|
155
155
|
"absolute z-10 flex items-center justify-center top-0 left-0 h-full w-8",
|
|
156
156
|
!this.canScroll.left && "opacity-0 pointer-events-none"
|
|
157
|
-
)}"><button part="button-start" class="${cx(scrollButtonClasses)}" aria-hidden="${ifDefined(!this.canScroll.left || void 0)}" tabindex="${ifDefined(!this.canScroll.left ? -1 : void 0)}" @click="${(e) => this.handleScroll("left", e)}" @blur="${(e) => this.handleButtonBlur("left", e)}"><slot name="icon-start"><sd-4-8-
|
|
157
|
+
)}"><button part="button-start" class="${cx(scrollButtonClasses)}" aria-hidden="${ifDefined(!this.canScroll.left || void 0)}" tabindex="${ifDefined(!this.canScroll.left ? -1 : void 0)}" @click="${(e) => this.handleScroll("left", e)}" @blur="${(e) => this.handleButtonBlur("left", e)}"><slot name="icon-start"><sd-4-8-1-icon library="system" name="chevron-up" class="rotate-[-90deg]" label="${this.localize.term("scrollToStart")}"></sd-4-8-1-icon></slot></button></div><div part="button-right" class="${cx(
|
|
158
158
|
"absolute z-10 flex items-center justify-center top-0 right-0 h-full w-8",
|
|
159
159
|
!this.canScroll.right && "opacity-0 pointer-events-none"
|
|
160
|
-
)}"><button part="button-end" class="${cx(scrollButtonClasses)}" aria-hidden="${ifDefined(!this.canScroll.right || void 0)}" tabindex="${ifDefined(!this.canScroll.right ? -1 : void 0)}" @click="${(e) => this.handleScroll("right", e)}" @blur="${(e) => this.handleButtonBlur("right", e)}"><slot name="icon-end"><sd-4-8-
|
|
160
|
+
)}"><button part="button-end" class="${cx(scrollButtonClasses)}" aria-hidden="${ifDefined(!this.canScroll.right || void 0)}" tabindex="${ifDefined(!this.canScroll.right ? -1 : void 0)}" @click="${(e) => this.handleScroll("right", e)}" @blur="${(e) => this.handleButtonBlur("right", e)}"><slot name="icon-end"><sd-4-8-1-icon library="system" name="chevron-down" class="rotate-[-90deg]" label="${this.localize.term("scrollToEnd")}"></sd-4-8-1-icon></slot></button></div>` : null} ${this.isScrollVerticalEnabled ? html`<div part="button-top" class="${cx(
|
|
161
161
|
"absolute z-10 flex items-center justify-center top-0 left-0 w-full h-8",
|
|
162
162
|
!this.canScroll.up && "opacity-0 pointer-events-none"
|
|
163
|
-
)}"><button part="button-start" class="${cx(scrollButtonClasses)}" aria-hidden="${ifDefined(!this.canScroll.up || void 0)}" tabindex="${ifDefined(!this.canScroll.up ? -1 : void 0)}" @click="${(e) => this.handleScroll("up", e)}" @blur="${(e) => this.handleButtonBlur("up", e)}"><slot name="icon-start"><sd-4-8-
|
|
163
|
+
)}"><button part="button-start" class="${cx(scrollButtonClasses)}" aria-hidden="${ifDefined(!this.canScroll.up || void 0)}" tabindex="${ifDefined(!this.canScroll.up ? -1 : void 0)}" @click="${(e) => this.handleScroll("up", e)}" @blur="${(e) => this.handleButtonBlur("up", e)}"><slot name="icon-start"><sd-4-8-1-icon library="system" name="chevron-up" label="${this.localize.term("scrollToStart")}"></sd-4-8-1-icon></slot></button></div><div part="button-bottom" class="${cx(
|
|
164
164
|
"absolute z-10 flex items-center justify-center bottom-0 left-0 w-full h-8",
|
|
165
165
|
!this.canScroll.down && "opacity-0 pointer-events-none"
|
|
166
|
-
)}"><button part="button-end" class="${cx(scrollButtonClasses)}" aria-hidden="${ifDefined(!this.canScroll.down || void 0)}" tabindex="${ifDefined(!this.canScroll.down ? -1 : void 0)}" @click="${(e) => this.handleScroll("down", e)}" @blur="${(e) => this.handleButtonBlur("down", e)}"><slot name="icon-end"><sd-4-8-
|
|
166
|
+
)}"><button part="button-end" class="${cx(scrollButtonClasses)}" aria-hidden="${ifDefined(!this.canScroll.down || void 0)}" tabindex="${ifDefined(!this.canScroll.down ? -1 : void 0)}" @click="${(e) => this.handleScroll("down", e)}" @blur="${(e) => this.handleButtonBlur("down", e)}"><slot name="icon-end"><sd-4-8-1-icon library="system" name="chevron-down" label="${this.localize.term("scrollToEnd")}"></sd-4-8-1-icon></slot></button></div>` : null}` : null} ${this.shadows ? html`${this.isScrollHorizontalEnabled ? html`${this.canScroll.left ? html`<div part="shadow-left" class="${scrollShadowClasses} left top-0 left-0 w-[6px] h-full"></div>` : null} ${this.canScroll.right ? html`<div part="shadow-right" class="${scrollShadowClasses} right top-0 right-0 w-[6px] h-full"></div>` : null}` : null} ${this.isScrollVerticalEnabled ? html`${this.canScroll.up ? html`<div part="shadow-top" class="${scrollShadowClasses} top top-0 left-0 w-full h-[6px]"></div>` : null} ${this.canScroll.down ? html`<div part="shadow-bottom" class="${scrollShadowClasses} bottom bottom-0 left-0 w-full h-[6px]"></div>` : null}` : null}` : null}`;
|
|
167
167
|
}
|
|
168
168
|
};
|
|
169
169
|
SdScrollable.styles = [
|
|
170
170
|
...SolidElement.styles,
|
|
171
|
-
css`:host{--gradient-color:hsla(0,0%,100%,0);--gradient:var(--gradient-color) 0%,#fff 80%,#fff 100%;display:flex;overflow:hidden;position:relative}.hide-scrollbars{scrollbar-width:none;-ms-overflow-style:none}.hide-scrollbars::-webkit-scrollbar{display:none}.scroll-container::-webkit-scrollbar-thumb{background-color:transparent}.scroll-container:hover::-webkit-scrollbar-thumb{background:var(--background-neutral-400,#c3c3c3);border-radius:var(--sd-border-radius-sm,.125rem)}.scroll-container::-webkit-scrollbar{height:var(--sd-spacing-1,.25rem);width:var(--sd-spacing-1,.25rem)}.scroll-auto{overflow:auto}[part=button-left]{background:linear-gradient(270deg,var(--gradient))}[part=button-right]{background:linear-gradient(90deg,var(--gradient))}[part=button-top]{background:linear-gradient(0deg,var(--gradient))}[part=button-bottom]{background:linear-gradient(180deg,var(--gradient))}[part=shadow-left]{background:linear-gradient(270deg,hsla(0,0%,9%,0) 50%,hsla(0,0%,9%,.4))}[part=shadow-right]{background:linear-gradient(90deg,hsla(0,0%,9%,0) 50%,hsla(0,0%,9%,.4))}[part=shadow-top]{background:linear-gradient(0deg,hsla(0,0%,9%,0) 50%,hsla(0,0%,9%,.4))}[part=shadow-bottom]{background:linear-gradient(180deg,hsla(0,0%,9%,0) 50%,hsla(0,0%,9%,.4))}.sd-4-8-
|
|
171
|
+
css`:host{--gradient-color:hsla(0,0%,100%,0);--gradient:var(--gradient-color) 0%,#fff 80%,#fff 100%;display:flex;overflow:hidden;position:relative}.hide-scrollbars{scrollbar-width:none;-ms-overflow-style:none}.hide-scrollbars::-webkit-scrollbar{display:none}.scroll-container::-webkit-scrollbar-thumb{background-color:transparent}.scroll-container:hover::-webkit-scrollbar-thumb{background:var(--background-neutral-400,#c3c3c3);border-radius:var(--sd-border-radius-sm,.125rem)}.scroll-container::-webkit-scrollbar{height:var(--sd-spacing-1,.25rem);width:var(--sd-spacing-1,.25rem)}.scroll-auto{overflow:auto}[part=button-left]{background:linear-gradient(270deg,var(--gradient))}[part=button-right]{background:linear-gradient(90deg,var(--gradient))}[part=button-top]{background:linear-gradient(0deg,var(--gradient))}[part=button-bottom]{background:linear-gradient(180deg,var(--gradient))}[part=shadow-left]{background:linear-gradient(270deg,hsla(0,0%,9%,0) 50%,hsla(0,0%,9%,.4))}[part=shadow-right]{background:linear-gradient(90deg,hsla(0,0%,9%,0) 50%,hsla(0,0%,9%,.4))}[part=shadow-top]{background:linear-gradient(0deg,hsla(0,0%,9%,0) 50%,hsla(0,0%,9%,.4))}[part=shadow-bottom]{background:linear-gradient(180deg,hsla(0,0%,9%,0) 50%,hsla(0,0%,9%,.4))}.sd-4-8-1-icon--top{align-self:flex-start}.sd-4-8-1-icon--down{align-self:flex-end}`
|
|
172
172
|
];
|
|
173
173
|
__decorateClass([
|
|
174
174
|
query('[part="button-right"] button')
|
|
@@ -216,7 +216,7 @@ __decorateClass([
|
|
|
216
216
|
state()
|
|
217
217
|
], SdScrollable.prototype, "isScrollVerticalEnabled", 2);
|
|
218
218
|
SdScrollable = __decorateClass([
|
|
219
|
-
customElement("sd-4-8-
|
|
219
|
+
customElement("sd-4-8-1-scrollable")
|
|
220
220
|
], SdScrollable);
|
|
221
221
|
|
|
222
222
|
export {
|
|
@@ -181,15 +181,15 @@ var SdNotification = class extends SolidElement {
|
|
|
181
181
|
warning: "bg-warning",
|
|
182
182
|
error: "bg-error"
|
|
183
183
|
}[this.variant]
|
|
184
|
-
)}"><sd-4-8-
|
|
184
|
+
)}"><sd-4-8-1-icon name="${{
|
|
185
185
|
info: "info-circle",
|
|
186
186
|
success: "confirm-circle",
|
|
187
187
|
warning: "exclamation-circle",
|
|
188
188
|
error: "warning"
|
|
189
|
-
}[this.variant] || ""}" library="system" class="h-6 w-6 text-white"></sd-4-8-
|
|
189
|
+
}[this.variant] || ""}" library="system" class="h-6 w-6 text-white"></sd-4-8-1-icon></slot><div part="content" class="${cx(
|
|
190
190
|
"h-full w-full p-1 gap-2 flex items-center justify-stretch bg-white",
|
|
191
191
|
"border-solid border-[1px] border-l-0 border-neutral-400"
|
|
192
|
-
)}"><slot id="message" part="message" class="block w-full pl-3 py-2"></slot>${this.closable ? html`<sd-4-8-
|
|
192
|
+
)}"><slot id="message" part="message" class="block w-full pl-3 py-2"></slot>${this.closable ? html`<sd-4-8-1-button size="md" variant="tertiary" part="close-button" class="ml-auto flex flex-[0_0_auto] items-stretch" @click="${this.handleCloseClick}"><sd-4-8-1-icon label="${this.localize.term("close")}" name="close" library="system" color="currentColor"></sd-4-8-1-icon></sd-4-8-1-button>` : ""}</div>${this.durationIndicator ? html`<div part="duration-indicator__elapsed" id="duration-indicator__elapsed" style="${`animation-duration: ${this.duration}ms`}" class="${cx(`absolute w-0 h-[2px] bottom-0 bg-primary z-10 animate-grow`)}"></div><div part="duration-indicator__total" class="w-full h-[2px] bottom-0 absolute border border-neutral-400"></div>` : ""}</div>`;
|
|
193
193
|
}
|
|
194
194
|
};
|
|
195
195
|
/**
|
|
@@ -230,7 +230,7 @@ __decorateClass([
|
|
|
230
230
|
watch("duration")
|
|
231
231
|
], SdNotification.prototype, "handleDurationChange", 1);
|
|
232
232
|
SdNotification = __decorateClass([
|
|
233
|
-
customElement("sd-4-8-
|
|
233
|
+
customElement("sd-4-8-1-notification")
|
|
234
234
|
], SdNotification);
|
|
235
235
|
setDefaultAnimation("notification.show", {
|
|
236
236
|
keyframes: [
|
|
@@ -18,7 +18,7 @@ var SdTabPanel = class extends SolidElement {
|
|
|
18
18
|
constructor() {
|
|
19
19
|
super(...arguments);
|
|
20
20
|
this.attrId = ++id;
|
|
21
|
-
this.componentId = `sd-4-8-
|
|
21
|
+
this.componentId = `sd-4-8-1-tab-panel-${this.attrId}`;
|
|
22
22
|
this.name = "";
|
|
23
23
|
this.active = false;
|
|
24
24
|
}
|
|
@@ -48,7 +48,7 @@ __decorateClass([
|
|
|
48
48
|
watch("active")
|
|
49
49
|
], SdTabPanel.prototype, "handleActiveChange", 1);
|
|
50
50
|
SdTabPanel = __decorateClass([
|
|
51
|
-
customElement("sd-4-8-
|
|
51
|
+
customElement("sd-4-8-1-tab-panel")
|
|
52
52
|
], SdTabPanel);
|
|
53
53
|
|
|
54
54
|
export {
|
|
@@ -210,7 +210,7 @@ var SdDrawer = class extends SolidElement {
|
|
|
210
210
|
end: "top-0 end-0 bottom-auto start-auto w-[--width] h-full",
|
|
211
211
|
start: "top-0 end-auto bottom-auto start-0 w-[--width] h-full"
|
|
212
212
|
}[this.placement]
|
|
213
|
-
)}" role="dialog" aria-modal="true" aria-label="${this.label}" tabindex="0">${!this.noHeader ? html`<header part="header" class="flex justify-between py-2 px-4 items-center flex-shrink-0" style="min-height:56px"><div part="title"><slot name="header" part="title" class="flex-auto text-xl m-0" id="title"></slot></div><div class="shrink-0 flex flex-wrap justify-end gap-1 ml-4 absolute top-2 right-2"><sd-4-8-
|
|
213
|
+
)}" role="dialog" aria-modal="true" aria-label="${this.label}" tabindex="0">${!this.noHeader ? html`<header part="header" class="flex justify-between py-2 px-4 items-center flex-shrink-0" style="min-height:56px"><div part="title"><slot name="header" part="title" class="flex-auto text-xl m-0" id="title"></slot></div><div class="shrink-0 flex flex-wrap justify-end gap-1 ml-4 absolute top-2 right-2"><sd-4-8-1-button variant="tertiary" size="lg" part="close-button" @click="${() => this.requestClose("close-button")}"><sd-4-8-1-icon label="${this.localize.term("close")}" name="close" library="system"></sd-4-8-1-icon></sd-4-8-1-button></div></header>` : html`<sd-4-8-1-button variant="tertiary" size="lg" part="close-button" @click="${() => this.requestClose("close-button")}" class="absolute top-2 right-2"><sd-4-8-1-icon label="${this.localize.term("close")}" name="close" library="system"></sd-4-8-1-icon></sd-4-8-1-button>`}<div part="body" class="flex-auto block px-4 focus-visible:focus-outline !-outline-offset-2" tabindex="0"><slot></slot></div><footer part="footer" class="${cx(this.hasSlotController.test("footer") ? "text-left p-4" : "hidden")}"><slot name="footer"></slot></footer></div></section>`;
|
|
214
214
|
}
|
|
215
215
|
};
|
|
216
216
|
SdDrawer.styles = [
|
|
@@ -251,7 +251,7 @@ __decorateClass([
|
|
|
251
251
|
watch("contained", { waitUntilFirstUpdate: true })
|
|
252
252
|
], SdDrawer.prototype, "handleNoModalChange", 1);
|
|
253
253
|
SdDrawer = __decorateClass([
|
|
254
|
-
customElement("sd-4-8-
|
|
254
|
+
customElement("sd-4-8-1-drawer")
|
|
255
255
|
], SdDrawer);
|
|
256
256
|
setDefaultAnimation("drawer.showStart", {
|
|
257
257
|
keyframes: [
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
// src/components/combobox/utils.ts
|
|
2
2
|
var getAssignedElementsForSlot = (slot) => Array.from(slot.assignedElements({ flatten: true }));
|
|
3
|
-
var getOptionOrNestedOptions = (item) => item.tagName.toLocaleLowerCase() === "sd-4-8-
|
|
4
|
-
var isOptgroup = (item) => item.tagName.toLocaleLowerCase() === "sd-4-8-
|
|
3
|
+
var getOptionOrNestedOptions = (item) => item.tagName.toLocaleLowerCase() === "sd-4-8-1-option" ? item : Array.from(item.querySelectorAll(":scope > sd-4-8-1-option"));
|
|
4
|
+
var isOptgroup = (item) => item.tagName.toLocaleLowerCase() === "sd-4-8-1-optgroup";
|
|
5
5
|
var getAllOptions = (items) => items.map(getOptionOrNestedOptions);
|
|
6
6
|
var filterOnlyOptgroups = (items) => items.filter(isOptgroup);
|
|
7
7
|
var normalizeString = (str) => str.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();
|
|
@@ -168,7 +168,7 @@ __decorateClass([
|
|
|
168
168
|
watch(["checked"], { waitUntilFirstUpdate: true })
|
|
169
169
|
], SdSwitch.prototype, "handleStateChange", 1);
|
|
170
170
|
SdSwitch = __decorateClass([
|
|
171
|
-
customElement("sd-4-8-
|
|
171
|
+
customElement("sd-4-8-1-switch")
|
|
172
172
|
], SdSwitch);
|
|
173
173
|
|
|
174
174
|
export {
|
|
@@ -89,7 +89,7 @@ var SdStep = class extends SolidElement {
|
|
|
89
89
|
!this.disabled && !this.current && !this.notInteractive && "text-primary group-hover:text-primary-500 group-hover:fill-primary-500",
|
|
90
90
|
this.notInteractive && "text-primary",
|
|
91
91
|
this.size === "lg" ? "text-lg" : "text-sm"
|
|
92
|
-
)}">${!this.disabled && !this.current && !this.notInteractive ? html`<sd-4-8-
|
|
92
|
+
)}">${!this.disabled && !this.current && !this.notInteractive ? html`<sd-4-8-1-icon name="status-check" library="system"></sd-4-8-1-icon>` : html`${this.index}`}</slot></${tag}>${this.noTail ? "" : html`<div part="tail" class="${cx(
|
|
93
93
|
this.orientation === "horizontal" ? "border-t w-full my-auto mr-2" : "border-l flex-grow flex-shrink-0 basis-auto h-full w-[1px] mx-auto",
|
|
94
94
|
!this.disabled && !this.current && !this.notInteractive ? " border-primary group-hover:border-primary-500" : "border-neutral-400"
|
|
95
95
|
)}"></div>`}</div><div part="text-container" class="${cx("mt-4 break-words flex flex-col gap-2", this.orientation === "horizontal" ? "text-center w-40" : "w-max text-left", this.disabled && "!text-neutral-700", this.notInteractive ? "ml-3" : "mr-4")}"><div part="label" id="label" class="${cx("!font-bold sd-paragraph", this.disabled && "!text-neutral-700", !this.disabled && !this.current && !this.notInteractive ? "!text-primary group-hover:!text-primary-500 group-hover:cursor-pointer" : "text-black")}"><slot name="label">${this.label}</slot></div><div part="description" id="description" class="${cx("sd-paragraph sd-paragraph--size-sm", this.disabled && "!text-neutral-700")}">${this.description || html`<slot></slot>`}</div></div></div>`;
|
|
@@ -139,7 +139,7 @@ __decorateClass([
|
|
|
139
139
|
watch("notInteractive")
|
|
140
140
|
], SdStep.prototype, "handleInteractivityChange", 1);
|
|
141
141
|
SdStep = __decorateClass([
|
|
142
|
-
customElement("sd-4-8-
|
|
142
|
+
customElement("sd-4-8-1-step")
|
|
143
143
|
], SdStep);
|
|
144
144
|
|
|
145
145
|
export {
|
|
@@ -93,7 +93,7 @@ var SdOption = class extends SolidElement {
|
|
|
93
93
|
)}"></span> ${this.checkbox ? html`<span id="control" part="control ${this.selected ? " control--checked" : "control--unchecked"}" class="${cx(
|
|
94
94
|
"relative flex flex-shrink-0 items-center justify-center border rounded-sm h-4 w-4 mr-2",
|
|
95
95
|
this.disabled ? "border-neutral-500" : this.selected ? "bg-accent border-accent" : "border-neutral-800"
|
|
96
|
-
)}">${this.selected ? html`<sd-4-8-
|
|
96
|
+
)}">${this.selected ? html`<sd-4-8-1-icon part="checked-icon" class="text-white w-3 h-3" library="system" name="status-check"></sd-4-8-1-icon>` : ""}</span>` : ""} ${slots["left"] ? html`<slot name="left" part="left" class="inline-flex mr-2"></slot>` : ""}<slot part="label" class="inline-block flex-grow" @slotchange="${this.handleDefaultSlotChange}"></slot>${slots["right"] ? html`<slot name="right" part="right" class="inline-flex ml-2"></slot>` : ""}</div>`;
|
|
97
97
|
}
|
|
98
98
|
};
|
|
99
99
|
/**
|
|
@@ -140,7 +140,7 @@ __decorateClass([
|
|
|
140
140
|
watch("value")
|
|
141
141
|
], SdOption.prototype, "handleValueChange", 1);
|
|
142
142
|
SdOption = __decorateClass([
|
|
143
|
-
customElement("sd-4-8-
|
|
143
|
+
customElement("sd-4-8-1-option")
|
|
144
144
|
], SdOption);
|
|
145
145
|
|
|
146
146
|
export {
|
|
@@ -77,10 +77,10 @@ var SdRadioGroup = class extends SolidElement {
|
|
|
77
77
|
this.formControlController.updateValidity();
|
|
78
78
|
}
|
|
79
79
|
getAllRadios() {
|
|
80
|
-
return [...this.querySelectorAll("sd-4-8-
|
|
80
|
+
return [...this.querySelectorAll("sd-4-8-1-radio, sd-4-8-1-radio-button")];
|
|
81
81
|
}
|
|
82
82
|
handleRadioClick(event) {
|
|
83
|
-
const target = event.target.closest("sd-4-8-
|
|
83
|
+
const target = event.target.closest("sd-4-8-1-radio, sd-4-8-1-radio-button");
|
|
84
84
|
const radios = this.getAllRadios();
|
|
85
85
|
const oldValue = this.value;
|
|
86
86
|
if (target.disabled) {
|
|
@@ -157,7 +157,7 @@ var SdRadioGroup = class extends SolidElement {
|
|
|
157
157
|
}
|
|
158
158
|
})
|
|
159
159
|
);
|
|
160
|
-
this.hasButtonGroup = radios.some((radio) => radio.tagName.toLowerCase() === "sd-4-8-
|
|
160
|
+
this.hasButtonGroup = radios.some((radio) => radio.tagName.toLowerCase() === "sd-4-8-1-radio-button");
|
|
161
161
|
if (!radios.some((radio) => radio.checked)) {
|
|
162
162
|
if (this.hasButtonGroup) {
|
|
163
163
|
const buttonRadio = (_a = radios[0].shadowRoot) == null ? void 0 : _a.querySelector("button");
|
|
@@ -169,26 +169,26 @@ var SdRadioGroup = class extends SolidElement {
|
|
|
169
169
|
}
|
|
170
170
|
}
|
|
171
171
|
if (this.hasButtonGroup) {
|
|
172
|
-
const buttonGroup = (_b = this.shadowRoot) == null ? void 0 : _b.querySelector("sd-4-8-
|
|
172
|
+
const buttonGroup = (_b = this.shadowRoot) == null ? void 0 : _b.querySelector("sd-4-8-1-button-group");
|
|
173
173
|
if (buttonGroup) {
|
|
174
174
|
buttonGroup.disableRole = true;
|
|
175
175
|
}
|
|
176
176
|
}
|
|
177
177
|
}
|
|
178
178
|
syncRadios() {
|
|
179
|
-
if (customElements.get("sd-4-8-
|
|
179
|
+
if (customElements.get("sd-4-8-1-radio") && customElements.get("sd-4-8-1-radio-button")) {
|
|
180
180
|
this.syncRadioElements();
|
|
181
181
|
return;
|
|
182
182
|
}
|
|
183
|
-
if (customElements.get("sd-4-8-
|
|
183
|
+
if (customElements.get("sd-4-8-1-radio")) {
|
|
184
184
|
this.syncRadioElements();
|
|
185
185
|
} else {
|
|
186
|
-
customElements.whenDefined("sd-4-8-
|
|
186
|
+
customElements.whenDefined("sd-4-8-1-radio").then(() => this.syncRadios());
|
|
187
187
|
}
|
|
188
|
-
if (customElements.get("sd-4-8-
|
|
188
|
+
if (customElements.get("sd-4-8-1-radio-button")) {
|
|
189
189
|
this.syncRadioElements();
|
|
190
190
|
} else {
|
|
191
|
-
customElements.whenDefined("sd-4-8-
|
|
191
|
+
customElements.whenDefined("sd-4-8-1-radio-button").then(() => this.syncRadios());
|
|
192
192
|
}
|
|
193
193
|
}
|
|
194
194
|
updateCheckedRadio() {
|
|
@@ -267,16 +267,16 @@ var SdRadioGroup = class extends SolidElement {
|
|
|
267
267
|
vertical: "flex-col",
|
|
268
268
|
horizontal: "flex-row"
|
|
269
269
|
}[this.orientation]
|
|
270
|
-
)}"><div class="sr-only"><label><input id="validation-input" type="text" ?required="${this.required}" aria-labelledby="label" tabindex="-1" hidden @invalid="${this.handleInvalid}"></label></div>${this.hasButtonGroup ? html`<sd-4-8-
|
|
270
|
+
)}"><div class="sr-only"><label><input id="validation-input" type="text" ?required="${this.required}" aria-labelledby="label" tabindex="-1" hidden @invalid="${this.handleInvalid}"></label></div>${this.hasButtonGroup ? html`<sd-4-8-1-button-group part="button-group" exportparts="base:button-group__base" role="presentation">${defaultSlot}</sd-4-8-1-button-group>` : defaultSlot}</div></fieldset><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700 mt-2", hasHelpText ? "block" : "hidden")}" aria-hidden="${!hasHelpText}">${this.helpText}</slot>${this.formControlController.renderInvalidMessage()}`;
|
|
271
271
|
}
|
|
272
272
|
};
|
|
273
|
-
SdRadioGroup.dependencies = { "sd-4-8-
|
|
273
|
+
SdRadioGroup.dependencies = { "sd-4-8-1-button-group": SdButtonGroup };
|
|
274
274
|
/**
|
|
275
275
|
* Inherits Tailwind classes and includes additional styling.
|
|
276
276
|
*/
|
|
277
277
|
SdRadioGroup.styles = [
|
|
278
278
|
...SolidElement.styles,
|
|
279
|
-
css`:host{display:block}:host([orientation=vertical]) ::slotted(sd-4-8-
|
|
279
|
+
css`:host{display:block}:host([orientation=vertical]) ::slotted(sd-4-8-1-radio){display:flex;margin-bottom:var(--sd-spacing-2,.5rem)}:host([orientation=vertical]) ::slotted(sd-4-8-1-radio:last-of-type){margin-bottom:var(--sd-spacing-0,0)}:host([orientation=horizontal]) ::slotted(sd-4-8-1-radio){margin-right:var(--sd-spacing-6,1.5rem)}:host([orientation=horizontal]) ::slotted(sd-4-8-1-radio:last-of-type){margin-right:var(--sd-spacing-0,0)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-4-8-1-radio){margin-right:var(--sd-spacing-4,1rem)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-4-8-1-radio:last-of-type){margin-right:var(--sd-spacing-0,0)}:host([required]) #label:after{content:" *"}`
|
|
280
280
|
];
|
|
281
281
|
__decorateClass([
|
|
282
282
|
query("slot:not([name])")
|
|
@@ -333,7 +333,7 @@ __decorateClass([
|
|
|
333
333
|
watch("value")
|
|
334
334
|
], SdRadioGroup.prototype, "handleValueChange", 1);
|
|
335
335
|
SdRadioGroup = __decorateClass([
|
|
336
|
-
customElement("sd-4-8-
|
|
336
|
+
customElement("sd-4-8-1-radio-group")
|
|
337
337
|
], SdRadioGroup);
|
|
338
338
|
|
|
339
339
|
export {
|
|
@@ -71,7 +71,7 @@ var SdRadio = class extends SolidElement {
|
|
|
71
71
|
}
|
|
72
72
|
render() {
|
|
73
73
|
return html`<span part="base" class="${cx(
|
|
74
|
-
"sd-4-8-
|
|
74
|
+
"sd-4-8-1-radio group inline-flex items-start items-center text-base leading-normal text-black cursor-pointer align-middle",
|
|
75
75
|
(this.disabled || this.visuallyDisabled) && "hover:cursor-not-allowed",
|
|
76
76
|
{
|
|
77
77
|
/* sizes, fonts */
|
|
@@ -126,7 +126,7 @@ __decorateClass([
|
|
|
126
126
|
watch(["disabled", "visually-disabled"], { waitUntilFirstUpdate: true })
|
|
127
127
|
], SdRadio.prototype, "handleDisabledChange", 1);
|
|
128
128
|
SdRadio = __decorateClass([
|
|
129
|
-
customElement("sd-4-8-
|
|
129
|
+
customElement("sd-4-8-1-radio")
|
|
130
130
|
], SdRadio);
|
|
131
131
|
|
|
132
132
|
export {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import {
|
|
2
2
|
SdAudio
|
|
3
3
|
} from "../../chunks/chunk.AOR7TGS6.js";
|
|
4
|
-
import "../../chunks/chunk.
|
|
4
|
+
import "../../chunks/chunk.LFS3FPZC.js";
|
|
5
5
|
import "../../chunks/chunk.PKYDE7EM.js";
|
|
6
6
|
import "../../chunks/chunk.KVKRZJS7.js";
|
|
7
7
|
import "../../chunks/chunk.YEZS5ZR2.js";
|