@solid-design-system/components 6.17.1 → 6.18.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/chunks/{chunk.PUDOHTPG.js → chunk.MOZSGQET.js} +1 -1
- package/cdn/chunks/chunk.ZSZLZIYX.js +12 -0
- package/cdn/components/carousel/carousel.d.ts +2 -0
- package/cdn/components/carousel/carousel.js +1 -1
- package/cdn/components/radio-button/radio-button.js +1 -1
- package/cdn/custom-elements.json +21 -1
- package/cdn/solid-components.bundle.js +65 -65
- package/cdn/solid-components.iife.js +65 -65
- package/cdn/solid-components.js +1 -1
- package/cdn/vscode.html-custom-data.json +5 -0
- package/cdn/web-types.json +11 -1
- package/cdn-versioned/chunks/chunk.2DHBC2XZ.js +2 -2
- package/cdn-versioned/chunks/chunk.3GRKVX3Y.js +2 -2
- package/cdn-versioned/chunks/chunk.4V4SW2MU.js +2 -2
- package/cdn-versioned/chunks/chunk.52TRFRJK.js +2 -2
- package/cdn-versioned/chunks/chunk.72BMHDYW.js +2 -2
- package/cdn-versioned/chunks/chunk.A4Y2ZTQS.js +2 -2
- package/cdn-versioned/chunks/chunk.ACBSQQGQ.js +2 -2
- package/cdn-versioned/chunks/chunk.B66QBBOC.js +1 -1
- package/cdn-versioned/chunks/chunk.BAAF4SAM.js +2 -2
- package/cdn-versioned/chunks/chunk.BDF5Y2DV.js +2 -2
- package/cdn-versioned/chunks/chunk.BOEKLLMY.js +2 -2
- package/cdn-versioned/chunks/chunk.C2B2WHBX.js +2 -2
- package/cdn-versioned/chunks/chunk.CEWEUYL5.js +2 -2
- package/cdn-versioned/chunks/chunk.CSMKAOUE.js +2 -2
- package/cdn-versioned/chunks/chunk.CZUZXVXM.js +1 -1
- package/cdn-versioned/chunks/chunk.DDGEG3JJ.js +2 -2
- package/cdn-versioned/chunks/chunk.DSXSUMRR.js +3 -3
- package/cdn-versioned/chunks/chunk.E2V26BUA.js +1 -1
- package/cdn-versioned/chunks/chunk.ETLWMEM7.js +5 -5
- package/cdn-versioned/chunks/chunk.EYHWAYCC.js +2 -2
- package/cdn-versioned/chunks/chunk.F2YBTYYO.js +1 -1
- package/cdn-versioned/chunks/chunk.FSMYSRQ5.js +2 -2
- package/cdn-versioned/chunks/chunk.G6OWFL7B.js +2 -2
- package/cdn-versioned/chunks/chunk.GBSKWBQY.js +5 -5
- package/cdn-versioned/chunks/chunk.GS46R6QO.js +2 -2
- package/cdn-versioned/chunks/chunk.HX4A7MNJ.js +2 -2
- package/cdn-versioned/chunks/chunk.JG5FT5V3.js +2 -2
- package/cdn-versioned/chunks/chunk.K65Y3BMV.js +2 -2
- package/cdn-versioned/chunks/chunk.KAVHO7BF.js +2 -2
- package/cdn-versioned/chunks/chunk.KXYEKUBH.js +1 -1
- package/cdn-versioned/chunks/chunk.L4Q4HWT2.js +1 -1
- package/cdn-versioned/chunks/chunk.LFLXMIIF.js +2 -2
- package/cdn-versioned/chunks/{chunk.PUDOHTPG.js → chunk.MOZSGQET.js} +2 -2
- package/cdn-versioned/chunks/chunk.OGNOPC3L.js +1 -1
- package/cdn-versioned/chunks/chunk.PCPQDPIJ.js +2 -2
- package/cdn-versioned/chunks/chunk.Q36PSPCX.js +1 -1
- package/cdn-versioned/chunks/chunk.QDWVVB6U.js +2 -2
- package/cdn-versioned/chunks/chunk.QKQ2FAEH.js +2 -2
- package/cdn-versioned/chunks/chunk.QRCDP5AE.js +2 -2
- package/cdn-versioned/chunks/chunk.RAP66B6O.js +1 -1
- package/cdn-versioned/chunks/chunk.RJVOMEKW.js +2 -2
- package/cdn-versioned/chunks/chunk.SH4PMEHV.js +2 -2
- package/cdn-versioned/chunks/chunk.SWMRHLCD.js +2 -2
- package/cdn-versioned/chunks/chunk.T2VQOPNR.js +2 -2
- package/cdn-versioned/chunks/chunk.TEQ3DTJK.js +2 -2
- package/cdn-versioned/chunks/chunk.THPGET7V.js +2 -2
- package/cdn-versioned/chunks/chunk.TXQVRNR7.js +2 -2
- package/cdn-versioned/chunks/chunk.U5H4A4ZD.js +2 -2
- package/cdn-versioned/chunks/chunk.UK3QQAGA.js +2 -2
- package/cdn-versioned/chunks/chunk.VREAKVXD.js +2 -2
- package/cdn-versioned/chunks/chunk.VW4SG3XG.js +2 -2
- package/cdn-versioned/chunks/chunk.VXGSYVQJ.js +3 -3
- package/cdn-versioned/chunks/chunk.W7A3TU2Z.js +1 -1
- package/cdn-versioned/chunks/chunk.WC4UPG7R.js +2 -2
- package/cdn-versioned/chunks/chunk.WMBV6H4W.js +2 -2
- package/cdn-versioned/chunks/chunk.WOCCV524.js +1 -1
- package/cdn-versioned/chunks/chunk.XF2NJUOO.js +2 -2
- package/cdn-versioned/chunks/chunk.XFJLF5M4.js +2 -2
- package/cdn-versioned/chunks/chunk.XGLBODZT.js +2 -2
- package/cdn-versioned/chunks/chunk.XYQCPWUJ.js +1 -1
- package/cdn-versioned/chunks/chunk.YDS5VIM3.js +2 -2
- package/cdn-versioned/chunks/chunk.YPTZDABK.js +1 -1
- package/cdn-versioned/chunks/chunk.ZMRAUCHT.js +9 -9
- package/cdn-versioned/chunks/chunk.ZSZLZIYX.js +12 -0
- 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/badge/badge.d.ts +1 -1
- package/cdn-versioned/components/brandshape/brandshape.d.ts +1 -1
- package/cdn-versioned/components/breadcrumb/breadcrumb.d.ts +1 -1
- package/cdn-versioned/components/breadcrumb-item/breadcrumb-item.d.ts +1 -1
- package/cdn-versioned/components/button/button.d.ts +1 -1
- package/cdn-versioned/components/button-group/button-group.d.ts +1 -1
- package/cdn-versioned/components/carousel/carousel.d.ts +3 -1
- package/cdn-versioned/components/carousel/carousel.js +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/datepicker/datepicker.d.ts +1 -1
- package/cdn-versioned/components/dialog/dialog.d.ts +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/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/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/loader/loader.d.ts +1 -1
- package/cdn-versioned/components/map-marker/map-marker.d.ts +1 -1
- package/cdn-versioned/components/menu/menu.d.ts +1 -1
- package/cdn-versioned/components/menu-item/menu-item.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/optgroup/optgroup.d.ts +1 -1
- 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-button/radio-button.js +1 -1
- package/cdn-versioned/components/radio-group/radio-group.d.ts +1 -1
- package/cdn-versioned/components/range/range.d.ts +1 -1
- package/cdn-versioned/components/range-tick/range-tick.d.ts +1 -1
- package/cdn-versioned/components/scrollable/scrollable.d.ts +1 -1
- package/cdn-versioned/components/select/select.d.ts +1 -1
- package/cdn-versioned/components/skeleton/skeleton.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/theme-listener/theme-listener.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 +265 -245
- package/cdn-versioned/internal/form.js +2 -2
- package/cdn-versioned/solid-components.bundle.js +82 -82
- package/cdn-versioned/solid-components.css +2 -2
- package/cdn-versioned/solid-components.iife.js +83 -83
- package/cdn-versioned/solid-components.js +1 -1
- package/cdn-versioned/vscode.html-custom-data.json +112 -107
- package/cdn-versioned/web-types.json +167 -157
- package/dist/chunks/{chunk.B43IHGRK.js → chunk.4Z5IGWSP.js} +1 -1
- package/dist/chunks/{chunk.DOQJMWSI.js → chunk.BWFGZZU7.js} +15 -3
- package/dist/components/carousel/carousel.d.ts +2 -0
- package/dist/components/carousel/carousel.js +1 -1
- package/dist/components/radio-button/radio-button.js +1 -1
- package/dist/custom-elements.json +21 -1
- package/dist/solid-components.js +2 -2
- package/dist/vscode.html-custom-data.json +5 -0
- package/dist/web-types.json +11 -1
- package/dist-versioned/chunks/chunk.2U32VSHR.js +3 -3
- package/dist-versioned/chunks/chunk.2WGBXYET.js +3 -3
- package/dist-versioned/chunks/chunk.33OSBM2L.js +1 -1
- package/dist-versioned/chunks/chunk.37VMM4OR.js +1 -1
- package/dist-versioned/chunks/chunk.3ZZBKPOH.js +5 -5
- package/dist-versioned/chunks/chunk.4VG6NHCU.js +6 -6
- package/dist-versioned/chunks/{chunk.B43IHGRK.js → chunk.4Z5IGWSP.js} +4 -4
- package/dist-versioned/chunks/chunk.5IARX66P.js +11 -11
- package/dist-versioned/chunks/chunk.6RD6BJ43.js +1 -1
- package/dist-versioned/chunks/chunk.6UAU2Y7U.js +2 -2
- package/dist-versioned/chunks/chunk.7EU5PQGA.js +5 -5
- package/dist-versioned/chunks/chunk.AFMRRRYY.js +2 -2
- package/dist-versioned/chunks/chunk.AXQ65JS3.js +6 -6
- package/dist-versioned/chunks/chunk.B46QWFGW.js +5 -5
- package/dist-versioned/chunks/chunk.BDBRCTEF.js +10 -10
- package/dist-versioned/chunks/chunk.BDOSAOAF.js +1 -1
- package/dist-versioned/chunks/chunk.BKNVWJRC.js +4 -4
- package/dist-versioned/chunks/chunk.BNUP4TMP.js +6 -6
- package/dist-versioned/chunks/chunk.BQINNFJP.js +5 -5
- package/dist-versioned/chunks/chunk.BV25PV23.js +6 -6
- package/dist-versioned/chunks/{chunk.DOQJMWSI.js → chunk.BWFGZZU7.js} +24 -12
- package/dist-versioned/chunks/chunk.C3WIBDGG.js +2 -2
- package/dist-versioned/chunks/chunk.COSVGBTT.js +12 -12
- package/dist-versioned/chunks/chunk.DEYMV3AS.js +11 -11
- package/dist-versioned/chunks/chunk.E2PJNXY4.js +3 -3
- package/dist-versioned/chunks/chunk.EQ3WBPH5.js +1 -1
- package/dist-versioned/chunks/chunk.EREHAJGM.js +5 -5
- package/dist-versioned/chunks/chunk.FKPD6TIK.js +14 -14
- package/dist-versioned/chunks/chunk.GQEY7HYL.js +1 -1
- package/dist-versioned/chunks/chunk.GU6XT67W.js +2 -2
- package/dist-versioned/chunks/chunk.GXX7ZVMH.js +2 -2
- package/dist-versioned/chunks/chunk.HPHV4VKP.js +3 -3
- package/dist-versioned/chunks/chunk.HPYZXPZN.js +2 -2
- package/dist-versioned/chunks/chunk.IOIU7TDJ.js +9 -9
- package/dist-versioned/chunks/chunk.IQMEFOSJ.js +4 -4
- package/dist-versioned/chunks/chunk.JZSKAHSL.js +2 -2
- package/dist-versioned/chunks/chunk.KEJFWGZI.js +4 -4
- package/dist-versioned/chunks/chunk.KENPAY6Q.js +2 -2
- package/dist-versioned/chunks/chunk.KQYOSLIW.js +5 -5
- package/dist-versioned/chunks/chunk.KVQN5R3X.js +11 -11
- package/dist-versioned/chunks/chunk.MACL5DD6.js +6 -6
- package/dist-versioned/chunks/chunk.MFLCJDVY.js +25 -25
- package/dist-versioned/chunks/chunk.MQG727Y4.js +4 -4
- package/dist-versioned/chunks/chunk.N4W5UD4U.js +3 -3
- package/dist-versioned/chunks/chunk.NMS67TKX.js +13 -13
- package/dist-versioned/chunks/chunk.NO5K5NRM.js +5 -5
- package/dist-versioned/chunks/chunk.RC4YZBAG.js +4 -4
- package/dist-versioned/chunks/chunk.RJQAUVFZ.js +5 -5
- package/dist-versioned/chunks/chunk.S4SI3HWM.js +2 -2
- package/dist-versioned/chunks/chunk.SBC2I6JO.js +8 -8
- package/dist-versioned/chunks/chunk.T27MZUKA.js +1 -1
- package/dist-versioned/chunks/chunk.UIQBHPD3.js +2 -2
- package/dist-versioned/chunks/chunk.UQIEZ6RZ.js +25 -25
- package/dist-versioned/chunks/chunk.USC7EHJV.js +32 -32
- package/dist-versioned/chunks/chunk.VDMPM2P2.js +2 -2
- package/dist-versioned/chunks/chunk.VLHNMJ5F.js +10 -10
- package/dist-versioned/chunks/chunk.VSWXW4QR.js +3 -3
- package/dist-versioned/chunks/chunk.W76DK5Q3.js +2 -2
- package/dist-versioned/chunks/chunk.WC2SM7KI.js +4 -4
- package/dist-versioned/chunks/chunk.WG6PNLWA.js +10 -10
- package/dist-versioned/chunks/chunk.WOZA4YTR.js +5 -5
- package/dist-versioned/chunks/chunk.XF6FDNUR.js +2 -2
- package/dist-versioned/chunks/chunk.ZGCNF5LQ.js +1 -1
- package/dist-versioned/chunks/chunk.ZR5RDB6B.js +7 -7
- 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/badge/badge.d.ts +1 -1
- package/dist-versioned/components/brandshape/brandshape.d.ts +1 -1
- package/dist-versioned/components/breadcrumb/breadcrumb.d.ts +1 -1
- package/dist-versioned/components/breadcrumb-item/breadcrumb-item.d.ts +1 -1
- package/dist-versioned/components/button/button.d.ts +1 -1
- package/dist-versioned/components/button-group/button-group.d.ts +1 -1
- package/dist-versioned/components/carousel/carousel.d.ts +3 -1
- package/dist-versioned/components/carousel/carousel.js +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/datepicker/datepicker.d.ts +1 -1
- package/dist-versioned/components/dialog/dialog.d.ts +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/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/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/loader/loader.d.ts +1 -1
- package/dist-versioned/components/map-marker/map-marker.d.ts +1 -1
- package/dist-versioned/components/menu/menu.d.ts +1 -1
- package/dist-versioned/components/menu-item/menu-item.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/optgroup/optgroup.d.ts +1 -1
- 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-button/radio-button.js +1 -1
- package/dist-versioned/components/radio-group/radio-group.d.ts +1 -1
- package/dist-versioned/components/range/range.d.ts +1 -1
- package/dist-versioned/components/range-tick/range-tick.d.ts +1 -1
- package/dist-versioned/components/scrollable/scrollable.d.ts +1 -1
- package/dist-versioned/components/select/select.d.ts +1 -1
- package/dist-versioned/components/skeleton/skeleton.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/theme-listener/theme-listener.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 +265 -245
- package/dist-versioned/internal/form.js +2 -2
- package/dist-versioned/solid-components.css +2 -2
- package/dist-versioned/solid-components.js +2 -2
- package/dist-versioned/vscode.html-custom-data.json +112 -107
- package/dist-versioned/web-types.json +167 -157
- package/package.json +1 -1
- package/cdn/chunks/chunk.HYIE6V5T.js +0 -12
- package/cdn-versioned/chunks/chunk.HYIE6V5T.js +0 -12
|
@@ -102,18 +102,18 @@ var SdMenuItem = class extends SolidElement {
|
|
|
102
102
|
};
|
|
103
103
|
return html`<div id="anchor" part="base" class="${cx(
|
|
104
104
|
"relative flex items-stretch whitespace-nowrap py-3 px-4 no-wrap !navigable-border-radius",
|
|
105
|
-
this.disabled ? "outline-none cursor-not-allowed sd-6-
|
|
105
|
+
this.disabled ? "outline-none cursor-not-allowed sd-6-18-1-menu--disabled-color-text hover:bg-transparent" : "cursor-pointer sd-6-18-1-menu-color-text hover:bg-neutral-200",
|
|
106
106
|
this.isSubmenu() && isSubmenuExpanded && "submenu-expanded"
|
|
107
107
|
)}" .disabled="${this.disabled}" ?aria-haspopup="${this.isSubmenu()}" ?aria-expanded="${isSubmenuExpanded ? true : false}">${this.type === "checkbox" ? html`<span part="checked-icon" class="${cx(
|
|
108
108
|
"flex items-center justify-center grow-0 shrink-0 basis-auto",
|
|
109
109
|
this.checked ? "visible" : "invisible"
|
|
110
|
-
)}"><sd-6-
|
|
110
|
+
)}"><sd-6-18-1-icon name="status-check" library="sd-status-assets" aria-hidden="true"></sd-6-18-1-icon></span>` : ""} ${slots.iconIndent ? html`<slot name="icon-indent" part="icon-indent" class="flex items-center grow-0 shrink-0 basis-auto mr-2"></slot>` : ""}<slot part="label" class="inline-flex grow shrink basis-auto text-ellipsis overflow-hidden" @slotchange="${this.handleDefaultSlotChange}"></slot>${this.chevron || this.isSubmenu() ? html`<span part="submenu-icon" class="flex items-center justify-center grow-0 shrink-0 basis-auto ml-3"><sd-6-18-1-icon name="chevron-right" library="_internal" aria-hidden="true" class="h-6 w-6"></sd-6-18-1-icon></span>` : ""} ${this.submenuController.renderSubmenu()}</div>`;
|
|
111
111
|
}
|
|
112
112
|
};
|
|
113
113
|
SdMenuItem.styles = [
|
|
114
114
|
...SolidElement.styles,
|
|
115
115
|
css`/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
|
|
116
|
-
:host{--submenu-offset:-6px;display:block}:host(:focus-visible){--tw-outline-style:none;outline-style:none}::slotted(sd-6-
|
|
116
|
+
:host{--submenu-offset:-6px;display:block}:host(:focus-visible){--tw-outline-style:none;outline-style:none}::slotted(sd-6-18-1-icon){height:var(--sd-spacing-6);width:var(--sd-spacing-6)}[part=checked-icon]{margin-right:var(--sd-spacing-3)}.submenu-expanded::after{position:fixed;top:calc(var(--sd-spacing-1) * 0);right:calc(var(--sd-spacing-1) * 0);bottom:calc(var(--sd-spacing-1) * 0);left:calc(var(--sd-spacing-1) * 0);z-index:calc(var(z-dropdown) - 1);--tw-content:'';content:var(--tw-content);clip-path:polygon(var(--safe-triangle-cursor-x,0) var(--safe-triangle-cursor-y,0),var(--safe-triangle-submenu-start-x,0) var(--safe-triangle-submenu-start-y,0),var(--safe-triangle-submenu-end-x,0) var(--safe-triangle-submenu-end-y,0))}:host(:hover:not([aria-disabled=true],:focus-visible)) [part=base]{background-color:rgba(var(--sd-color-background-neutral-200));--tw-outline-style:none;outline-style:none}:host(:focus-visible:not([aria-disabled=true])) [part=base]{outline-style:solid;outline-offset:2px;outline-width:2px;outline-color:var(--outline-color-primary);outline-offset:-2px}:host(.menu-item-focus) [part=base]{outline-style:solid;outline-offset:2px;outline-width:2px;outline-color:var(--outline-color-primary);outline-offset:-2px}:host(:hover) [part=base]{--tw-outline-style:none;outline-style:none}//TODO clean up sd-6-18-1-menu-color-icon variable replacing with sd-6-18-1-menu-item-color-icon-fill (breakingchange) :host [part=icon-indent],:host [part=checked-icon],:host [part=submenu-icon]{color:rgba(var(--sd-menu-color-icon,var(--sd-menu-item-color-icon-fill)))}//TODO clean up sd-6-18-1-menu--disabled-color-icon variable replacing with sd-6-18-1-menu-item--disabled-color-icon-fill (breakingchange) :host([aria-disabled=true]) [part=icon-indent]{color:rgba(var(--sd-menu--disabled-color-icon,var(--sd-menu-item--disabled-color-icon-fill)))}sd-6-18-1-popup::part(popup){z-index:var(--sd-z-index-dropdown,900);background-color:rgba(var(--sd-color-background-white));margin-left:var(--submenu-offset)}::slotted(sd-6-18-1-menu){max-width:var(--auto-size-available-width)!important;max-height:var(--auto-size-available-height)!important}.sd-6-18-1-menu-color-text{color:rgba(var(--sd-menu-color-text,var(--sd-menu-item-color-text)))}.sd-6-18-1-menu--disabled-color-text{color:rgba(var(--sd-menu--disabled-color-text,var(--sd-menu-item--disabled-color-text)))}@property --tw-content{syntax:"*";inherits:false;initial-value:""}`
|
|
117
117
|
];
|
|
118
118
|
__decorateClass([
|
|
119
119
|
query("slot:not([name])")
|
|
@@ -146,7 +146,7 @@ __decorateClass([
|
|
|
146
146
|
watch("type")
|
|
147
147
|
], SdMenuItem.prototype, "handleTypeChange", 1);
|
|
148
148
|
SdMenuItem = __decorateClass([
|
|
149
|
-
customElement("sd-6-
|
|
149
|
+
customElement("sd-6-18-1-menu-item")
|
|
150
150
|
], SdMenuItem);
|
|
151
151
|
|
|
152
152
|
export {
|
|
@@ -84,7 +84,7 @@ var SdRange = class extends SolidElement {
|
|
|
84
84
|
var _a, _b;
|
|
85
85
|
const tooltip = thumb.parentElement;
|
|
86
86
|
await tooltip.updateComplete;
|
|
87
|
-
(_b = (_a = tooltip.shadowRoot) == null ? void 0 : _a.querySelector("sd-6-
|
|
87
|
+
(_b = (_a = tooltip.shadowRoot) == null ? void 0 : _a.querySelector("sd-6-18-1-popup")) == null ? void 0 : _b.setAttribute("distance", "14");
|
|
88
88
|
});
|
|
89
89
|
}
|
|
90
90
|
willUpdate(changedProperties) {
|
|
@@ -260,7 +260,7 @@ var SdRange = class extends SolidElement {
|
|
|
260
260
|
_preventTextSelection() {
|
|
261
261
|
if (!this._dragStyleElement) {
|
|
262
262
|
const style = document.createElement("style");
|
|
263
|
-
style.setAttribute("data-sd-6-
|
|
263
|
+
style.setAttribute("data-sd-6-18-1-range-drag", "");
|
|
264
264
|
style.textContent = "*, *::before, *::after { user-select: none !important; -webkit-user-select: none !important; }";
|
|
265
265
|
document.head.appendChild(style);
|
|
266
266
|
this._dragStyleElement = style;
|
|
@@ -445,10 +445,10 @@ var SdRange = class extends SolidElement {
|
|
|
445
445
|
ariaLabel = this.tooltipFormatter(value);
|
|
446
446
|
}
|
|
447
447
|
}
|
|
448
|
-
return html`<sd-6-
|
|
448
|
+
return html`<sd-6-18-1-tooltip trigger="${this.tooltip === "on-interaction" ? "focus" : "manual"}" disabled="${ifDefined(this.disabled || this.visuallyDisabled || this.tooltip === "hidden" ? true : void 0)}"><div id="${id}" part="thumb" role="slider" tabindex="${this.disabled || this.visuallyDisabled ? -1 : 0}" aria-disabled="${ifDefined(this.disabled || this.visuallyDisabled ? "true" : void 0)}" aria-labelledby="${ariaLabeledBy}" aria-label="${ariaLabel}" aria-valuemax="${this.max}" aria-valuemin="${this.min}" aria-valuenow="${value}" aria-valuetext="${this.tooltipFormatter(value)}" data-range-id="${rangeId}" data-disabled="${ifDefined(this.disabled || this.visuallyDisabled || void 0)}" @pointerdown="${this.onClickThumb}" @pointermove="${this.onDragThumb}" @pointerup="${this.onReleaseThumb}" @pointercancel="${this.onReleaseThumb}" @keydown="${this.onKeyPress}" @focus="${this.onFocusThumb}" class="${cx(
|
|
449
449
|
"rounded-full absolute top-0 size-4 hover:cursor-grab after:-inset-2",
|
|
450
450
|
this.disabled || this.visuallyDisabled ? "outline-none" : "cursor-pointer focus-visible:focus-outline"
|
|
451
|
-
)}"></div></sd-6-
|
|
451
|
+
)}"></div></sd-6-18-1-tooltip>`;
|
|
452
452
|
});
|
|
453
453
|
}
|
|
454
454
|
render() {
|
|
@@ -518,7 +518,7 @@ __decorateClass([
|
|
|
518
518
|
property({ type: String })
|
|
519
519
|
], SdRange.prototype, "value", 1);
|
|
520
520
|
SdRange = __decorateClass([
|
|
521
|
-
customElement("sd-6-
|
|
521
|
+
customElement("sd-6-18-1-range")
|
|
522
522
|
], SdRange);
|
|
523
523
|
|
|
524
524
|
export {
|
|
@@ -20,7 +20,7 @@ var SdRangeTick = class extends SolidElement {
|
|
|
20
20
|
this.subtick = false;
|
|
21
21
|
}
|
|
22
22
|
render() {
|
|
23
|
-
return html`<div part="base" class="${cx(this.subtick ? "w-0.25" : "w-0.5")}"><div part="line" class="${cx(this.subtick ? "h-2" : "h-[10px]")}"></div><div part="label" class="flex items-center justify-center text-center text-nowrap text-sm sd-6-
|
|
23
|
+
return html`<div part="base" class="${cx(this.subtick ? "w-0.25" : "w-0.5")}"><div part="line" class="${cx(this.subtick ? "h-2" : "h-[10px]")}"></div><div part="label" class="flex items-center justify-center text-center text-nowrap text-sm sd-6-18-1-range-scale-ticks-color-text"><slot></slot></div></div>`;
|
|
24
24
|
}
|
|
25
25
|
};
|
|
26
26
|
SdRangeTick.styles = [
|
|
@@ -32,7 +32,7 @@ __decorateClass([
|
|
|
32
32
|
property({ type: Boolean, reflect: true })
|
|
33
33
|
], SdRangeTick.prototype, "subtick", 2);
|
|
34
34
|
SdRangeTick = __decorateClass([
|
|
35
|
-
customElement("sd-6-
|
|
35
|
+
customElement("sd-6-18-1-range-tick")
|
|
36
36
|
], SdRangeTick);
|
|
37
37
|
|
|
38
38
|
export {
|
|
@@ -129,7 +129,7 @@ var SdScrollable = class extends SolidElement {
|
|
|
129
129
|
down: this.upButton
|
|
130
130
|
}[direction];
|
|
131
131
|
const label = reachedStart ? `${this.localize.term("scrolled")}. ${this.localize.term("scrollToEnd")}` : `${this.localize.term("scrolled")}. ${this.localize.term("scrollToStart")}`;
|
|
132
|
-
(_c = oppositeButton == null ? void 0 : oppositeButton.querySelector("sd-6-
|
|
132
|
+
(_c = oppositeButton == null ? void 0 : oppositeButton.querySelector("sd-6-18-1-icon")) == null ? void 0 : _c.setAttribute("label", label);
|
|
133
133
|
if (isKeyboardTriggered) {
|
|
134
134
|
oppositeButton == null ? void 0 : oppositeButton.focus();
|
|
135
135
|
} else {
|
|
@@ -141,7 +141,7 @@ var SdScrollable = class extends SolidElement {
|
|
|
141
141
|
const scrollTo = ["left", "up"].includes(direction) ? "start" : "end";
|
|
142
142
|
const label = scrollTo === "start" ? this.localize.term("scrollToStart") : this.localize.term("scrollToEnd");
|
|
143
143
|
const button = e.target;
|
|
144
|
-
(_a = button.querySelector("sd-6-
|
|
144
|
+
(_a = button.querySelector("sd-6-18-1-icon")) == null ? void 0 : _a.setAttribute("label", label);
|
|
145
145
|
}
|
|
146
146
|
render() {
|
|
147
147
|
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";
|
|
@@ -158,16 +158,16 @@ var SdScrollable = class extends SolidElement {
|
|
|
158
158
|
)}" @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(
|
|
159
159
|
"absolute z-10 flex items-center justify-center top-0 left-0 h-full w-8 transition-opacity duration-medium ease-in-out",
|
|
160
160
|
!this.canScroll.left && "opacity-0 pointer-events-none"
|
|
161
|
-
)}"><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-6-
|
|
161
|
+
)}"><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-6-18-1-icon library="_internal" name="chevron-up" class="rotate-[-90deg]" label="${this.localize.term("scrollToStart")}"></sd-6-18-1-icon></slot></button></div><div part="button-right" class="${cx(
|
|
162
162
|
"absolute z-10 flex items-center justify-center top-0 right-0 h-full w-8 transition-opacity duration-medium ease-in-out",
|
|
163
163
|
!this.canScroll.right && "opacity-0 pointer-events-none"
|
|
164
|
-
)}"><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-6-
|
|
164
|
+
)}"><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-6-18-1-icon library="_internal" name="chevron-down" class="rotate-[-90deg]" label="${this.localize.term("scrollToEnd")}"></sd-6-18-1-icon></slot></button></div>` : null} ${this.isScrollVerticalEnabled ? html`<div part="button-top" class="${cx(
|
|
165
165
|
"absolute z-10 flex items-center justify-center top-0 left-0 w-full h-8 transition-opacity duration-medium ease-in-out",
|
|
166
166
|
!this.canScroll.up && "opacity-0 pointer-events-none"
|
|
167
|
-
)}"><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-6-
|
|
167
|
+
)}"><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-6-18-1-icon library="_internal" name="chevron-up" label="${this.localize.term("scrollToStart")}"></sd-6-18-1-icon></slot></button></div><div part="button-bottom" class="${cx(
|
|
168
168
|
"absolute z-10 flex items-center justify-center bottom-0 left-0 w-full h-8 transition-opacity duration-medium ease-in-out",
|
|
169
169
|
!this.canScroll.down && "opacity-0 pointer-events-none"
|
|
170
|
-
)}"><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-6-
|
|
170
|
+
)}"><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-6-18-1-icon library="_internal" name="chevron-down" label="${this.localize.term("scrollToEnd")}"></sd-6-18-1-icon></slot></button></div>` : null}` : null} ${this.shadows ? html`${this.isScrollHorizontalEnabled ? html`<div part="shadow-left" class="${cx(
|
|
171
171
|
"left top-0 left-0 w-[6px] h-full",
|
|
172
172
|
scrollShadowClasses,
|
|
173
173
|
this.canScroll.left ? "opacity-100" : "opacity-0"
|
|
@@ -189,7 +189,7 @@ var SdScrollable = class extends SolidElement {
|
|
|
189
189
|
SdScrollable.styles = [
|
|
190
190
|
...SolidElement.styles,
|
|
191
191
|
css`/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
|
|
192
|
-
:host{--gradient-color:transparent;--gradient:var(--gradient-color) 0%,rgba(var(--sd-color-background-white, rgba(var(--sd-color-white)))) 80%,rgba(var(--sd-color-background-white, rgba(var(--sd-color-white)))) 100%;position:relative;display:flex;overflow:hidden}.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-radius-sm)}.scroll-container::-webkit-scrollbar{height:var(--sd-spacing-1);width:var(--sd-spacing-1)}.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,transparent 50%,rgba(24,24,24,.4) 100%)}[part=shadow-right]{background:linear-gradient(90deg,transparent 50%,rgba(24,24,24,.4) 100%)}[part=shadow-top]{background:linear-gradient(0deg,transparent 50%,rgba(24,24,24,.4) 100%)}[part=shadow-bottom]{background:linear-gradient(180deg,transparent 50%,rgba(24,24,24,.4) 100%)}.sd-6-
|
|
192
|
+
:host{--gradient-color:transparent;--gradient:var(--gradient-color) 0%,rgba(var(--sd-color-background-white, rgba(var(--sd-color-white)))) 80%,rgba(var(--sd-color-background-white, rgba(var(--sd-color-white)))) 100%;position:relative;display:flex;overflow:hidden}.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-radius-sm)}.scroll-container::-webkit-scrollbar{height:var(--sd-spacing-1);width:var(--sd-spacing-1)}.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,transparent 50%,rgba(24,24,24,.4) 100%)}[part=shadow-right]{background:linear-gradient(90deg,transparent 50%,rgba(24,24,24,.4) 100%)}[part=shadow-top]{background:linear-gradient(0deg,transparent 50%,rgba(24,24,24,.4) 100%)}[part=shadow-bottom]{background:linear-gradient(180deg,transparent 50%,rgba(24,24,24,.4) 100%)}.sd-6-18-1-icon--top{align-self:flex-start}.sd-6-18-1-icon--down{align-self:flex-end}`
|
|
193
193
|
];
|
|
194
194
|
__decorateClass([
|
|
195
195
|
query('[part="button-right"] button')
|
|
@@ -237,7 +237,7 @@ __decorateClass([
|
|
|
237
237
|
state()
|
|
238
238
|
], SdScrollable.prototype, "isScrollVerticalEnabled", 2);
|
|
239
239
|
SdScrollable = __decorateClass([
|
|
240
|
-
customElement("sd-6-
|
|
240
|
+
customElement("sd-6-18-1-scrollable")
|
|
241
241
|
], SdScrollable);
|
|
242
242
|
|
|
243
243
|
export {
|
|
@@ -209,7 +209,7 @@ __decorateClass([
|
|
|
209
209
|
watch("playbackRate")
|
|
210
210
|
], SdAnimation.prototype, "handlePlaybackRateChange", 1);
|
|
211
211
|
SdAnimation = __decorateClass([
|
|
212
|
-
customElement("sd-6-
|
|
212
|
+
customElement("sd-6-18-1-animation")
|
|
213
213
|
], SdAnimation);
|
|
214
214
|
|
|
215
215
|
export {
|
|
@@ -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-6-
|
|
4
|
-
var isOptgroup = (item) => item.tagName.toLocaleLowerCase() === "sd-6-
|
|
3
|
+
var getOptionOrNestedOptions = (item) => item.tagName.toLocaleLowerCase() === "sd-6-18-1-option" ? item : Array.from(item.querySelectorAll(":scope > sd-6-18-1-option"));
|
|
4
|
+
var isOptgroup = (item) => item.tagName.toLocaleLowerCase() === "sd-6-18-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();
|
|
@@ -98,11 +98,11 @@ var SdCombobox = class extends SolidElement {
|
|
|
98
98
|
return normalizedOption.includes(normalizedQuery) || normalizedOptionLabel.includes(normalizedQuery);
|
|
99
99
|
};
|
|
100
100
|
this.getTag = (option) => {
|
|
101
|
-
return html`<sd-6-
|
|
101
|
+
return html`<sd-6-18-1-tag class="min-w-0 max-w-full" ?disabled="${this.disabled}" part="tag" exportparts="
|
|
102
102
|
base:tag__base,
|
|
103
103
|
content:tag__content,
|
|
104
104
|
removable-indicator:tag__removable-indicator,
|
|
105
|
-
" size="${this.size === "sm" ? "sm" : "lg"}" removable @keydown="${(event) => this.handleTagKeyDown(event, option)}" @sd-remove="${(event) => this.handleTagRemove(event, option)}">${option.getTextLabel()}</sd-6-
|
|
105
|
+
" size="${this.size === "sm" ? "sm" : "lg"}" removable @keydown="${(event) => this.handleTagKeyDown(event, option)}" @sd-remove="${(event) => this.handleTagRemove(event, option)}">${option.getTextLabel()}</sd-6-18-1-tag>`;
|
|
106
106
|
};
|
|
107
107
|
this.handleDocumentFocusIn = (event) => {
|
|
108
108
|
const path = event.composedPath();
|
|
@@ -241,9 +241,9 @@ var SdCombobox = class extends SolidElement {
|
|
|
241
241
|
return html`${typeof optionHtml === "string" ? unsafeHTML(optionHtml) : optionHtml}`;
|
|
242
242
|
};
|
|
243
243
|
return this.filteredOptions.map((item) => {
|
|
244
|
-
if (item.tagName.toLowerCase() === "sd-6-
|
|
244
|
+
if (item.tagName.toLowerCase() === "sd-6-18-1-optgroup") {
|
|
245
245
|
Array.from(item.children).forEach((option) => {
|
|
246
|
-
if (option.tagName.toLowerCase() === "sd-6-
|
|
246
|
+
if (option.tagName.toLowerCase() === "sd-6-18-1-option") {
|
|
247
247
|
renderOption(option);
|
|
248
248
|
}
|
|
249
249
|
});
|
|
@@ -263,11 +263,11 @@ var SdCombobox = class extends SolidElement {
|
|
|
263
263
|
});
|
|
264
264
|
} else {
|
|
265
265
|
return [
|
|
266
|
-
html`<sd-6-
|
|
266
|
+
html`<sd-6-18-1-tag class="min-w-0 max-w-full" ?disabled="${this.disabled}" part="tag" exportparts="
|
|
267
267
|
base:tag__base,
|
|
268
268
|
content:tag__content,
|
|
269
269
|
removable-indicator:tag__removable-indicator,
|
|
270
|
-
" size="${this.size === "sm" ? "sm" : "lg"}" removable @keydown="${(event) => this.handleTagMaxOptionsKeyDown(event)}" @sd-remove="${(event) => this.handleTagRemove(event)}">${this.selectedOptions.length} ${this.localize.term("tagsSelected")}</sd-6-
|
|
270
|
+
" size="${this.size === "sm" ? "sm" : "lg"}" removable @keydown="${(event) => this.handleTagMaxOptionsKeyDown(event)}" @sd-remove="${(event) => this.handleTagRemove(event)}">${this.selectedOptions.length} ${this.localize.term("tagsSelected")}</sd-6-18-1-tag>`
|
|
271
271
|
];
|
|
272
272
|
}
|
|
273
273
|
}
|
|
@@ -396,7 +396,7 @@ var SdCombobox = class extends SolidElement {
|
|
|
396
396
|
}
|
|
397
397
|
handleOptionClick(event) {
|
|
398
398
|
const target = event.target;
|
|
399
|
-
const option = target.closest("sd-6-
|
|
399
|
+
const option = target.closest("sd-6-18-1-option");
|
|
400
400
|
const oldValue = this.value;
|
|
401
401
|
if (option && !option.disabled) {
|
|
402
402
|
if (this.multiple) {
|
|
@@ -448,7 +448,7 @@ var SdCombobox = class extends SolidElement {
|
|
|
448
448
|
scrollIntoView(this.getCurrentOption(), this.listbox, "vertical", "auto");
|
|
449
449
|
}
|
|
450
450
|
getAllFilteredOptions() {
|
|
451
|
-
return [...this.filteredWrapper.querySelectorAll("sd-6-
|
|
451
|
+
return [...this.filteredWrapper.querySelectorAll("sd-6-18-1-option")];
|
|
452
452
|
}
|
|
453
453
|
getCurrentOption() {
|
|
454
454
|
return this.getAllFilteredOptions().find((option) => option.current);
|
|
@@ -578,7 +578,7 @@ var SdCombobox = class extends SolidElement {
|
|
|
578
578
|
clonedOption.selected = option.selected;
|
|
579
579
|
clonedOption.checkbox = option.checkbox;
|
|
580
580
|
clonedOption.size = option.size;
|
|
581
|
-
const hasOptgroup = ((_b = option.parentElement) == null ? void 0 : _b.tagName.toLowerCase()) === "sd-6-
|
|
581
|
+
const hasOptgroup = ((_b = option.parentElement) == null ? void 0 : _b.tagName.toLowerCase()) === "sd-6-18-1-optgroup";
|
|
582
582
|
if (!hasOptgroup) {
|
|
583
583
|
return clonedOption;
|
|
584
584
|
}
|
|
@@ -602,7 +602,7 @@ var SdCombobox = class extends SolidElement {
|
|
|
602
602
|
this.formControlController.emitInvalidEvent(event);
|
|
603
603
|
this.invalidMessage.textContent = event.target.validationMessage;
|
|
604
604
|
}
|
|
605
|
-
/** Receives incoming event detail from sd-6-
|
|
605
|
+
/** Receives incoming event detail from sd-6-18-1-popup and updates local state for conditional styling. */
|
|
606
606
|
handleCurrentPlacement(e) {
|
|
607
607
|
const incomingPlacement = e.detail;
|
|
608
608
|
if (incomingPlacement) {
|
|
@@ -614,7 +614,7 @@ var SdCombobox = class extends SolidElement {
|
|
|
614
614
|
}
|
|
615
615
|
handleUseTagsChange() {
|
|
616
616
|
const allOptions = this.getAllFilteredOptions();
|
|
617
|
-
if (customElements.get("sd-6-
|
|
617
|
+
if (customElements.get("sd-6-18-1-option")) {
|
|
618
618
|
allOptions.forEach((option) => {
|
|
619
619
|
option.checkbox = this.multiple;
|
|
620
620
|
});
|
|
@@ -743,8 +743,8 @@ var SdCombobox = class extends SolidElement {
|
|
|
743
743
|
return filterOnlyOptgroups(getAssignedElementsForSlot(this.defaultSlot));
|
|
744
744
|
}
|
|
745
745
|
async handleDefaultSlotChange() {
|
|
746
|
-
if (!customElements.get("sd-6-
|
|
747
|
-
customElements.whenDefined("sd-6-
|
|
746
|
+
if (!customElements.get("sd-6-18-1-option")) {
|
|
747
|
+
customElements.whenDefined("sd-6-18-1-option").then(() => this.handleDefaultSlotChange());
|
|
748
748
|
return;
|
|
749
749
|
}
|
|
750
750
|
const slottedOptions = this.getSlottedOptions();
|
|
@@ -756,10 +756,10 @@ var SdCombobox = class extends SolidElement {
|
|
|
756
756
|
if (this.multiple) {
|
|
757
757
|
option.checkbox = true;
|
|
758
758
|
}
|
|
759
|
-
option.id = option.id || `sd-6-
|
|
759
|
+
option.id = option.id || `sd-6-18-1-combobox-option-${index}`;
|
|
760
760
|
});
|
|
761
761
|
slottedOptgroups.forEach((optgroup, index) => {
|
|
762
|
-
optgroup.id = optgroup.id || `sd-6-
|
|
762
|
+
optgroup.id = optgroup.id || `sd-6-18-1-combobox-optgroup-${index}`;
|
|
763
763
|
});
|
|
764
764
|
await this.syncSelectedOptionsAndValue();
|
|
765
765
|
if (this.multiple) {
|
|
@@ -783,7 +783,7 @@ var SdCombobox = class extends SolidElement {
|
|
|
783
783
|
const isFloatingLabelActive = this.floatingLabel && hasLabel && (this.hasFocus || hasValue);
|
|
784
784
|
const selectState = this.disabled ? "disabled" : this.visuallyDisabled && !this.hasFocus ? "visuallyDisabled" : this.hasFocus && this.showInvalidStyle ? "activeInvalid" : this.hasFocus && this.styleOnValid && this.showValidStyle ? "activeValid" : this.hasFocus || this.open ? "active" : this.showInvalidStyle ? "invalid" : this.styleOnValid && this.showValidStyle ? "valid" : "default";
|
|
785
785
|
const cursorStyles = this.disabled || this.visuallyDisabled ? "cursor-not-allowed" : "cursor-pointer";
|
|
786
|
-
const iconColor = this.disabled || this.visuallyDisabled ? "text-neutral-500" : "sd-6-
|
|
786
|
+
const iconColor = this.disabled || this.visuallyDisabled ? "text-neutral-500" : "sd-6-18-1-icon-fill-primary";
|
|
787
787
|
const iconMarginLeft = { sm: "ml-1", md: "ml-2", lg: "ml-2" }[this.size];
|
|
788
788
|
const iconMarginRight = { sm: "mr-1", md: "mr-2", lg: "mr-2" }[this.size];
|
|
789
789
|
const iconSize = {
|
|
@@ -821,7 +821,7 @@ var SdCombobox = class extends SolidElement {
|
|
|
821
821
|
default: "form-control-color-border"
|
|
822
822
|
}[selectState],
|
|
823
823
|
this.open && (this.currentPlacement === "bottom" ? "rounded-bl-none rounded-br-none" : "rounded-tl-none rounded-tr-none")
|
|
824
|
-
)}"></div><sd-6-
|
|
824
|
+
)}"></div><sd-6-18-1-popup @sd-current-placement="${this.handleCurrentPlacement}" class="${cx(
|
|
825
825
|
"inline-flex relative w-full",
|
|
826
826
|
this.currentPlacement === "bottom" ? "origin-top" : "origin-bottom"
|
|
827
827
|
)}" placement="${this.placement}" strategy="${this.hoist ? "fixed" : "absolute"}" flip shift sync="width" auto-size="vertical" auto-size-padding="10" exportparts="
|
|
@@ -846,27 +846,27 @@ var SdCombobox = class extends SolidElement {
|
|
|
846
846
|
"flex justify-center",
|
|
847
847
|
iconMarginLeft,
|
|
848
848
|
this.value.length > 0 ? "visible" : "invisible"
|
|
849
|
-
)}" type="button" aria-label="${this.localize.term("clearEntry")}" @mousedown="${this.preventLoosingFocus}" @click="${this.handleClearClick}" tabindex="-1"><slot name="clear-icon"><sd-6-
|
|
849
|
+
)}" type="button" aria-label="${this.localize.term("clearEntry")}" @mousedown="${this.preventLoosingFocus}" @click="${this.handleClearClick}" tabindex="-1"><slot name="clear-icon"><sd-6-18-1-icon class="${cx("text-neutral-700", iconSize)}" name="closing-round" library="_internal"></sd-6-18-1-icon></slot></button>` : ""} ${this.showInvalidStyle ? html`<sd-6-18-1-icon part="invalid-icon" class="${cx(iconMarginLeft, iconSize, "text-error")}" library="_internal" name="risk"></sd-6-18-1-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-6-18-1-icon part="valid-icon" class="${cx("flex-shrink-0 text-success", iconMarginLeft, iconSize)}" library="_internal" name="confirm-circle"></sd-6-18-1-icon>` : ""}<slot name="right" part="right" class="${cx(
|
|
850
850
|
"inline-flex ml-2 leading-[0]",
|
|
851
|
-
this.disabled || this.visuallyDisabled ? "text-neutral-500" : "sd-6-
|
|
851
|
+
this.disabled || this.visuallyDisabled ? "text-neutral-500" : "sd-6-18-1-icon-fill-primary",
|
|
852
852
|
iconSize
|
|
853
|
-
)}">${this.type !== "search" ? html`<sd-6-
|
|
853
|
+
)}">${this.type !== "search" ? html`<sd-6-18-1-icon class="${cx(
|
|
854
854
|
"transition-transform duration-medium ease-in-out",
|
|
855
855
|
this.open ? "rotate-180" : "rotate-0"
|
|
856
|
-
)}" name="chevron-down" part="chevron" library="_internal" color="currentColor" label="${this.localize.term("open")}"></sd-6-
|
|
856
|
+
)}" name="chevron-down" part="chevron" library="_internal" color="currentColor" label="${this.localize.term("open")}"></sd-6-18-1-icon>` : ""}</slot>${this.type === "search" ? html`<button class="${cx("flex items-center sd-interactive", iconMarginLeft)}" type="button"><sd-6-18-1-icon class="${cx(iconColor, iconSize)}" library="_internal" name="magnifying-glass" label="${this.localize.term("search")}"></sd-6-18-1-icon></button>` : html`<button class="sd-interactive combobox-button absolute top-2 sd-color-icon-fill-primary" tabindex="-1" aria-hidden="true" @keydown="${this.handleComboboxMouseDown}" type="button"><span class="sr-only">${this.localize.term("open")}</span></button>`}</div><div id="listbox" role="${ifDefined(!this.multiple ? "listbox" : void 0)}" aria-expanded="${this.open}" aria-multiselectable="${this.multiple}" aria-labelledby="label" part="listbox" class="${cx(
|
|
857
857
|
"bg-white px-2 py-3 relative border-primary overflow-y-auto",
|
|
858
858
|
this.open && "shadow-listbox transition-shadow duration-medium ease-in-out",
|
|
859
859
|
this.currentPlacement === "bottom" ? "border-r-2 border-b-2 border-l-2 form-control__listbox-border-bottom-right-radius form-control__listbox-border-bottom-left-radius" : "border-r-2 border-t-2 border-l-2 form-control__listbox-border-top-right-radius form-control__listbox-border-top-left-radius"
|
|
860
|
-
)}" tabindex="-1" @mousedown="${this.preventLoosingFocus}" @mouseup="${this.handleOptionClick}"><div part="filtered-listbox">${this.filteredOptions.length === 0 ? html`<span id="noResults" class="px-4 flex items-center w-full transition-all text-left text-base relative text-black py-3" aria-hidden="true" @click="${this.handleNoResultsClick}">${this.localize.term("noResults")}</span>` : this.options}</div><slot id="defaultOptionsSlot" class="hidden" @slotchange="${this.handleDefaultSlotChange}"></slot></div></sd-6-
|
|
860
|
+
)}" tabindex="-1" @mousedown="${this.preventLoosingFocus}" @mouseup="${this.handleOptionClick}"><div part="filtered-listbox">${this.filteredOptions.length === 0 ? html`<span id="noResults" class="px-4 flex items-center w-full transition-all text-left text-base relative text-black py-3" aria-hidden="true" @click="${this.handleNoResultsClick}">${this.localize.term("noResults")}</span>` : this.options}</div><slot id="defaultOptionsSlot" class="hidden" @slotchange="${this.handleDefaultSlotChange}"></slot></div></sd-6-18-1-popup></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700 mt-1", hasHelpText ? "block" : "hidden")}" aria-hidden="${!hasHelpText}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage(this.size)}`;
|
|
861
861
|
}
|
|
862
862
|
};
|
|
863
863
|
SdCombobox.styles = [
|
|
864
864
|
...SolidElement.styles,
|
|
865
865
|
css`/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
|
|
866
|
-
:host{position:relative;display:block;width:100%}:host([required]) #label::after{content:' *'}:host([disabled]) ::-moz-placeholder,:host([visually-disabled]) ::-moz-placeholder{color:rgba(var(--sd-color-text-neutral-500))}:host([disabled]) ::placeholder,:host([visually-disabled]) ::placeholder{color:rgba(var(--sd-color-text-neutral-500))}:host([visually-disabled]) input{caret-color:transparent}:host([size=sm]) .combobox-button{right:var(--sd-spacing-4);height:var(--sd-spacing-4);width:var(--sd-spacing-4)}:host([size=md]) .combobox-button{right:.85rem;height:var(--sd-spacing-6);width:var(--sd-spacing-6)}:host([size=lg]) .combobox-button{right:var(--sd-spacing-3);height:var(--sd-spacing-8);width:var(--sd-spacing-8)}[part=listbox]{max-height:var(--auto-size-available-height,auto)}sd-6-
|
|
866
|
+
:host{position:relative;display:block;width:100%}:host([required]) #label::after{content:' *'}:host([disabled]) ::-moz-placeholder,:host([visually-disabled]) ::-moz-placeholder{color:rgba(var(--sd-color-text-neutral-500))}:host([disabled]) ::placeholder,:host([visually-disabled]) ::placeholder{color:rgba(var(--sd-color-text-neutral-500))}:host([visually-disabled]) input{caret-color:transparent}:host([size=sm]) .combobox-button{right:var(--sd-spacing-4);height:var(--sd-spacing-4);width:var(--sd-spacing-4)}:host([size=md]) .combobox-button{right:.85rem;height:var(--sd-spacing-6);width:var(--sd-spacing-6)}:host([size=lg]) .combobox-button{right:var(--sd-spacing-3);height:var(--sd-spacing-8);width:var(--sd-spacing-8)}[part=listbox]{max-height:var(--auto-size-available-height,auto)}sd-6-18-1-popup::part(popup){z-index:var(--sd-z-index-dropdown,900)}sd-6-18-1-tag::part(base){border-radius:var(--sd-radius);border-width:var(--sd-combobox__tag-border-width,var(--sd-spacing-0\\.25));padding-inline:var(--sd-spacing-1)}sd-6-18-1-tag::part(content){display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:var(--tag-max-width,15ch)}sd-6-18-1-tag[size=lg]::part(base){padding-inline:var(--sd-spacing-2)}sd-6-18-1-tag[disabled=false]::part(base):hover{background-color:rgba(var(--sd-color-background-primary-100))}[part=filtered-listbox] sd-6-18-1-optgroup:first-of-type{--display-divider:none}mark{background-color:transparent;--tw-font-weight:var(--sd-font-weight-bold);font-weight:var(--sd-font-weight-bold);color:inherit}[part=chevron]{color:rgb(var(--sd-color-icon-fill-primary))}:host([disabled])::part(chevron),:host([visually-disabled])::part(chevron){color:rgba(var(--sd-color-icon-fill-neutral-500,--sd-color-neutral-500))}@property --tw-font-weight{syntax:"*";inherits:false}`
|
|
867
867
|
];
|
|
868
868
|
__decorateClass([
|
|
869
|
-
query("sd-6-
|
|
869
|
+
query("sd-6-18-1-popup")
|
|
870
870
|
], SdCombobox.prototype, "popup", 2);
|
|
871
871
|
__decorateClass([
|
|
872
872
|
query('[part="combobox"]')
|
|
@@ -1030,7 +1030,7 @@ __decorateClass([
|
|
|
1030
1030
|
watch(["size", "floatingLabel"])
|
|
1031
1031
|
], SdCombobox.prototype, "handleSizeChange", 1);
|
|
1032
1032
|
SdCombobox = __decorateClass([
|
|
1033
|
-
customElement("sd-6-
|
|
1033
|
+
customElement("sd-6-18-1-combobox")
|
|
1034
1034
|
], SdCombobox);
|
|
1035
1035
|
setDefaultAnimation("combobox.show", {
|
|
1036
1036
|
keyframes: [{ opacity: 0 }, { opacity: 1 }],
|
|
@@ -159,62 +159,62 @@ var SdButton = class extends SolidElement {
|
|
|
159
159
|
(this.disabled || this.visuallyDisabled) && "cursor-not-allowed",
|
|
160
160
|
{
|
|
161
161
|
/* sizes, fonts */
|
|
162
|
-
sm: `varspacing-8 min-h-8 sd-6-
|
|
163
|
-
md: `varspacing-10 sd-6-
|
|
164
|
-
lg: `varspacing-12 sd-6-
|
|
162
|
+
sm: `varspacing-8 min-h-8 sd-6-18-1-button--size-sm-font-size sd-6-18-1-button-font-weight sd-6-18-1-button--secondary--size-sm-padding-block sd-6-18-1-button--size-sm-border-radius`,
|
|
163
|
+
md: `varspacing-10 sd-6-18-1-button--size-md-height sd-6-18-1-button--size-md-font-size sd-6-18-1-button--secondary--size-md-padding-block sd-6-18-1-button-font-weight sd-6-18-1-button--size-md-border-radius`,
|
|
164
|
+
lg: `varspacing-12 sd-6-18-1-button--size-lg-height sd-6-18-1-button--size-lg-font-size sd-6-18-1-button--secondary--size-lg-padding-block sd-6-18-1-button-font-weight sd-6-18-1-button--size-lg-border-radius`
|
|
165
165
|
}[this.size],
|
|
166
166
|
!slots["icon-only"] && {
|
|
167
167
|
/* sizes, fonts */
|
|
168
|
-
sm: `${hasBorder ? "sd-6-
|
|
169
|
-
md: `${hasBorder ? "sd-6-
|
|
170
|
-
lg: `${hasBorder ? "sd-6-
|
|
168
|
+
sm: `${hasBorder ? "sd-6-18-1-button--secondary-padding-inline" : "sd-6-18-1-button--size-sm-padding-block sd-6-18-1-button-padding-inline"}`,
|
|
169
|
+
md: `${hasBorder ? "sd-6-18-1-button--secondary-padding-inline" : "sd-6-18-1-button--size-md-padding-block sd-6-18-1-button-padding-inline"}`,
|
|
170
|
+
lg: `${hasBorder ? "sd-6-18-1-button--secondary-padding-inline" : "sd-6-18-1-button--size-lg-padding-block sd-6-18-1-button-padding-inline"}`
|
|
171
171
|
}[this.size],
|
|
172
172
|
/**
|
|
173
173
|
* Anatomy
|
|
174
174
|
* */
|
|
175
175
|
slots["icon-only"] && {
|
|
176
176
|
sm: "px-1 aspect-square",
|
|
177
|
-
md: "sd-6-
|
|
177
|
+
md: "sd-6-18-1-button--size-md--icon-only-padding-inline aspect-square",
|
|
178
178
|
lg: "px-[12px] aspect-square"
|
|
179
179
|
}[this.size],
|
|
180
180
|
{
|
|
181
181
|
/* variants */
|
|
182
|
-
primary: !this.inverted ? `${this.visuallyDisabled ? "bg-neutral-500 border-neutral-500 hover:bg-neutral-500 text-white" : "sd-6-
|
|
183
|
-
disabled:bg-neutral-500 disabled:text-white` : `${this.visuallyDisabled ? "bg-neutral-500 text-white border-neutral-500 hover:bg-neutral-500 active:bg-neutral-500" : "sd-6-
|
|
184
|
-
disabled:sd-6-
|
|
185
|
-
secondary: !this.inverted ? `border sd-6-
|
|
186
|
-
disabled:sd-6-
|
|
187
|
-
disabled:sd-6-
|
|
188
|
-
tertiary: !this.inverted ? `border-transparent ${this.visuallyDisabled ? "sd-6-
|
|
189
|
-
disabled:sd-6-
|
|
190
|
-
disabled:sd-6-
|
|
182
|
+
primary: !this.inverted ? `${this.visuallyDisabled ? "bg-neutral-500 border-neutral-500 hover:bg-neutral-500 text-white" : "sd-6-18-1-button--primary--default-color-background border-transparent sd-6-18-1-button--primary--default-color-text hover:sd-6-18-1-button--primary--hover-color-text active:sd-6-18-1-button--primary--active-color-text"}
|
|
183
|
+
disabled:bg-neutral-500 disabled:text-white` : `${this.visuallyDisabled ? "bg-neutral-500 text-white border-neutral-500 hover:bg-neutral-500 active:bg-neutral-500" : "sd-6-18-1-button--primary--inverted--default-color-text sd-6-18-1-button--primary--inverted--default-color-background border-white hover:sd-6-18-1-button--primary--inverted--hover-color-text active:sd-6-18-1-button--primary--inverted--active-color-text active:sd-6-18-1-button--primary--inverted--active-color-background"}
|
|
184
|
+
disabled:sd-6-18-1-button--inverted--disabled-color-background disabled:text-white`,
|
|
185
|
+
secondary: !this.inverted ? `border sd-6-18-1-button-border-width ${this.visuallyDisabled ? "sd-6-18-1-button--secondary--disabled-color-text border-neutral-500 hover:text-neutral-500 hover:border-neutral-500 active:text-neutral-500 active:border-neutral-500" : "sd-6-18-1-button--secondary--default-color-text border-primary hover:text-primary-500 hover:border-primary-500 active:sd-6-18-1-button--secondary--active-color-text active:border-primary-800"}
|
|
186
|
+
disabled:sd-6-18-1-button--secondary--disabled-color-text disabled:border-neutral-500` : `border sd-6-18-1-button-border-width ${this.visuallyDisabled ? "text-neutral-600 border-neutral-600 hover:text-neutral-600 hover:border-neutral-600 active:text-neutral-600 active:border-neutral-600" : "sd-6-18-1-button--secondary--inverted-color-text sd-6-18-1-button--secondary--inverted-color-border hover:sd-6-18-1-button--secondary--inverted-color-border hover:sd-6-18-1-button--secondary--inverted--hover-color-text hover:sd-6-18-1-button--secondary--inverted--hover-color-background active:sd-6-18-1-button--secondary--inverted--active-color-text active:border-primary-200 active:sd-6-18-1-button--secondary--inverted--active-color-background"}
|
|
187
|
+
disabled:sd-6-18-1-button--inverted--disabled-color-border disabled:sd-6-18-1-button--inverted--disabled-color-text`,
|
|
188
|
+
tertiary: !this.inverted ? `border-transparent ${this.visuallyDisabled ? "sd-6-18-1-button--tertiary--disabled-color-text hover:text-neutral-500 active:text-neutral-500" : "sd-6-18-1-button--tertiary--default-color-text hover:text-primary-500 active:sd-6-18-1-button--tertiary--active-color-text"}
|
|
189
|
+
disabled:sd-6-18-1-button--tertiary--disabled-color-text` : `border-transparent ${this.visuallyDisabled ? "text-neutral-600 hover:text-neutral-600 active:text-neutral-600" : "sd-6-18-1-button--tertiary--inverted-color-text hover:sd-6-18-1-button--tertiary--inverted--hover-color-text hover:sd-6-18-1-button--tertiary--inverted--hover-color-background active:sd-6-18-1-button--tertiary--inverted--active-color-background active:sd-6-18-1-button--tertiary--inverted--active-color-text"}
|
|
190
|
+
disabled:sd-6-18-1-button--inverted--disabled-color-text`,
|
|
191
191
|
cta: `${this.visuallyDisabled ? "bg-neutral-500 border-neutral-500 hover:bg-neutral-500 active:bg-neutral-500" : "bg-accent border-transparent hover:bg-accent-500"}
|
|
192
|
-
${!this.inverted ? "text-white bg-accent disabled:bg-neutral-500 hover:bg-accent-500 disabled:border-neutral-500 disabled:text-white" : "sd-6-
|
|
192
|
+
${!this.inverted ? "text-white bg-accent disabled:bg-neutral-500 hover:bg-accent-500 disabled:border-neutral-500 disabled:text-white" : "sd-6-18-1-button--cta--inverted--default-color-background sd-6-18-1-button--cta--inverted--default-color-text hover:sd-6-18-1-button--cta--inverted--hover-color-text active:sd-6-18-1-button--cta--inverted--active-color-text disabled:sd-6-18-1-button--inverted--disabled-color-background disabled:text-white"}`
|
|
193
193
|
}[this.variant]
|
|
194
194
|
)}" ?disabled="${ifDefined(isLink ? void 0 : this.disabled)}" type="${ifDefined(isLink ? void 0 : this.type)}" title="${this.title}" name="${ifDefined(isLink ? void 0 : this.name)}" value="${ifDefined(isLink ? void 0 : this.value)}" href="${ifDefined(isLink ? this.href : void 0)}" target="${ifDefined(isLink ? this.target : void 0)}" download="${ifDefined(isLink ? this.download : void 0)}" rel="${ifDefined(isLink && this.target ? "noreferrer noopener" : void 0)}" role="${ifDefined(isLink ? void 0 : "button")}" aria-disabled="${this.disabled || this.visuallyDisabled ? "true" : "false"}" aria-labelledby="content" tabindex="${this.disabled ? "-1" : "0"}" @blur="${this.handleBlur}" @focus="${this.handleFocus}" @invalid="${this.isButton() ? this.handleInvalid : null}" @click="${this.handleClick}"><div part="motion-wrapper" class="${cx(
|
|
195
195
|
"absolute inset-0 -z-10 overflow-hidden pointer-events-none ",
|
|
196
196
|
(this.disabled || this.visuallyDisabled) && "hidden",
|
|
197
197
|
{
|
|
198
198
|
/* sizes, fonts */
|
|
199
|
-
sm: `sd-6-
|
|
200
|
-
md: `sd-6-
|
|
201
|
-
lg: `sd-6-
|
|
199
|
+
sm: `sd-6-18-1-button-border-radius`,
|
|
200
|
+
md: `sd-6-18-1-button-border-radius`,
|
|
201
|
+
lg: `sd-6-18-1-button-border-radius`
|
|
202
202
|
}[this.size]
|
|
203
203
|
)}"><div class="absolute inset-0 w-full h-full transition-all duration-fast translate-y-full group-hover:translate-y-0 group-hover:mt-[-22%] mt-[11%]"><div class="${cx(
|
|
204
204
|
"absolute right-0 min-w-full min-h-full aspect-square skew-y-[-11deg] mt-[11%]",
|
|
205
205
|
{
|
|
206
|
-
primary: !this.inverted ? "sd-6-
|
|
207
|
-
secondary: !this.inverted ? "sd-6-
|
|
208
|
-
tertiary: !this.inverted ? "sd-6-
|
|
209
|
-
cta: !this.inverted ? "bg-accent-500 group-active:bg-accent-700" : "sd-6-
|
|
206
|
+
primary: !this.inverted ? "sd-6-18-1-button--primary--hover-color-background group-active:bg-primary-800" : "sd-6-18-1-button--primary--inverted--hover-color-background group-active:sd-6-18-1-button--primary--inverted--active-color-background",
|
|
207
|
+
secondary: !this.inverted ? "sd-6-18-1-button--secondary--hover-color-background group-active:sd-6-18-1-button--secondary--active-color-background" : "sd-6-18-1-button--secondary--inverted--hover-color-background group-active:sd-6-18-1-button--secondary--inverted--active-color-background group-active:sd-6-18-1-button--secondary--inverted--active-color-text",
|
|
208
|
+
tertiary: !this.inverted ? "sd-6-18-1-button--tertiary--hover-color-background group-active:sd-6-18-1-button--tertiary--active-color-background" : "sd-6-18-1-button--tertiary--inverted--hover-color-background group-active:sd-6-18-1-button--tertiary--inverted--active-color-background group-active:sd-6-18-1-button--tertiary--inverted--active-color-text",
|
|
209
|
+
cta: !this.inverted ? "bg-accent-500 group-active:bg-accent-700" : "sd-6-18-1-button--cta--inverted--hover-color-background group-active:sd-6-18-1-button--cta--inverted--active-color-background"
|
|
210
210
|
}[this.variant]
|
|
211
211
|
)}"></div><div class="${cx(
|
|
212
212
|
"absolute w-full h-full mt-[22%]",
|
|
213
213
|
{
|
|
214
|
-
primary: !this.inverted ? "sd-6-
|
|
215
|
-
secondary: !this.inverted ? "sd-6-
|
|
216
|
-
tertiary: !this.inverted ? "sd-6-
|
|
217
|
-
cta: !this.inverted ? "bg-accent-500 group-active:bg-accent-700" : "sd-6-
|
|
214
|
+
primary: !this.inverted ? "sd-6-18-1-button--primary--hover-color-background group-active:bg-primary-800" : "sd-6-18-1-button--primary--inverted--hover-color-background group-active:sd-6-18-1-button--primary--inverted--active-color-background",
|
|
215
|
+
secondary: !this.inverted ? "sd-6-18-1-button--secondary--hover-color-background group-active:sd-6-18-1-button--secondary--active-color-background" : "sd-6-18-1-button--secondary--inverted--hover-color-background group-active:sd-6-18-1-button--secondary--inverted--active-color-background group-active:sd-6-18-1-button--secondary--inverted--active-color-text",
|
|
216
|
+
tertiary: !this.inverted ? "sd-6-18-1-button--tertiary--hover-color-background group-active:sd-6-18-1-button--tertiary--active-color-background" : "sd-6-18-1-button--tertiary--inverted--hover-color-background group-active:sd-6-18-1-button--tertiary--inverted--active-color-background group-active:sd-6-18-1-button--tertiary--inverted--active-color-text",
|
|
217
|
+
cta: !this.inverted ? "bg-accent-500 group-active:bg-accent-700" : "sd-6-18-1-button--cta--inverted--hover-color-background group-active:sd-6-18-1-button--cta--inverted--active-color-background"
|
|
218
218
|
}[this.variant]
|
|
219
219
|
)}"></div></div></div><slot name="icon-left" part="icon-left" class="${cx(
|
|
220
220
|
"flex flex-auto items-center justify-end pointer-events-none",
|
|
@@ -243,7 +243,7 @@ var SdButton = class extends SolidElement {
|
|
|
243
243
|
md: "ml-2",
|
|
244
244
|
lg: "ml-2"
|
|
245
245
|
}[this.size]
|
|
246
|
-
)}"></slot>${this.loading ? html`<sd-6-
|
|
246
|
+
)}"></slot>${this.loading ? html`<sd-6-18-1-loader class="${cx("absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2")}"></sd-6-18-1-loader>` : ""}</${tag}>`;
|
|
247
247
|
}
|
|
248
248
|
};
|
|
249
249
|
/**
|
|
@@ -252,13 +252,13 @@ var SdButton = class extends SolidElement {
|
|
|
252
252
|
SdButton.styles = [
|
|
253
253
|
...SolidElement.styles,
|
|
254
254
|
css`/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
|
|
255
|
-
:host{position:relative;z-index:0;display:inline-block;width:auto;cursor:pointer}::slotted(sd-6-
|
|
255
|
+
:host{position:relative;z-index:0;display:inline-block;width:auto;cursor:pointer}::slotted(sd-6-18-1-badge){pointer-events:none;position:absolute;top:calc(var(--sd-spacing-1) * 0);right:calc(var(--sd-spacing-1) * 0);--tw-translate-x:calc(1 / 2 * 100%)!important;--tw-translate-y:calc(calc(1 / 2 * 100%) * -1)!important;translate:var(--tw-translate-x) var(--tw-translate-y)!important}::slotted(sd-6-18-1-icon),sd-6-18-1-loader{font-size:calc(var(--tw-varspacing)/ 2)}:host([size=lg]) ::slotted(sd-6-18-1-icon){font-size:var(--sd-button--size-lg-icon-height,var(--sd-spacing-6))}:host([size=sm]) .sd-6-18-1-button--size-sm-border-radius{border-radius:var(--sd-button--size-sm-border-radius,var(--sd-button-border-radius))}:host([size=md]) .sd-6-18-1-button--size-md-border-radius{border-radius:var(--sd-button--size-md-border-radius,var(--sd-button-border-radius))}:host([size=lg]) .sd-6-18-1-button--size-lg-border-radius{border-radius:var(--sd-button--size-lg-border-radius,var(--sd-button-border-radius))}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}`
|
|
256
256
|
];
|
|
257
257
|
__decorateClass([
|
|
258
258
|
query("a, button")
|
|
259
259
|
], SdButton.prototype, "button", 2);
|
|
260
260
|
__decorateClass([
|
|
261
|
-
queryAssignedElements({ selector: "sd-6-
|
|
261
|
+
queryAssignedElements({ selector: "sd-6-18-1-icon" })
|
|
262
262
|
], SdButton.prototype, "_iconsInDefaultSlot", 2);
|
|
263
263
|
__decorateClass([
|
|
264
264
|
state()
|
|
@@ -324,7 +324,7 @@ __decorateClass([
|
|
|
324
324
|
watch("disabled", { waitUntilFirstUpdate: true })
|
|
325
325
|
], SdButton.prototype, "handleDisabledChange", 1);
|
|
326
326
|
SdButton = __decorateClass([
|
|
327
|
-
customElement("sd-6-
|
|
327
|
+
customElement("sd-6-18-1-button")
|
|
328
328
|
], SdButton);
|
|
329
329
|
|
|
330
330
|
export {
|
|
@@ -183,7 +183,7 @@ var SdDialog = class extends SolidElement {
|
|
|
183
183
|
)}"><div part="overlay" class="fixed inset-0 overlay-color-background" @click="${() => this.requestClose("overlay")}" tabindex="-1"></div><div part="panel" class="${cx(
|
|
184
184
|
"panel-color-border border flex flex-col z-20 bg-white py-4 sm:py-8 relative gap-6 focus-visible:focus-outline-inverted overflow-y-auto",
|
|
185
185
|
this.open && "flex opacity-100"
|
|
186
|
-
)}" role="dialog" aria-modal="true" aria-hidden="${this.open ? "false" : "true"}" aria-label="${ifDefined(this.headline ? this.headline : void 0)}" aria-labelledby="${ifDefined(!this.headline ? "title" : void 0)}" tabindex="0"><header part="header" class="flex flex-grow-0 flex-shrink-0 basis-auto px-6 sm:px-10"><h2 part="title" class="flex-auto m-0" id="title">${this.headline.length > 0 ? html`<span class="sd-headline sd-headline--size-3xl leading-tight">${this.headline}</span>` : html`<slot name="headline"></slot>`}</h2>${!this.noCloseButton ? html`<sd-6-
|
|
186
|
+
)}" role="dialog" aria-modal="true" aria-hidden="${this.open ? "false" : "true"}" aria-label="${ifDefined(this.headline ? this.headline : void 0)}" aria-labelledby="${ifDefined(!this.headline ? "title" : void 0)}" tabindex="0"><header part="header" class="flex flex-grow-0 flex-shrink-0 basis-auto px-6 sm:px-10"><h2 part="title" class="flex-auto m-0" id="title">${this.headline.length > 0 ? html`<span class="sd-headline sd-headline--size-3xl leading-tight">${this.headline}</span>` : html`<slot name="headline"></slot>`}</h2>${!this.noCloseButton ? html`<sd-6-18-1-button part="close-button" variant="tertiary" exportparts="base:close-button__base" class="${cx("absolute top-2 right-2")}" name="x-lg" @click="${() => this.requestClose("close-button")}" type="button"><sd-6-18-1-icon label="${this.localize.term("close")}" name="close" library="_internal" color="currentColor"></sd-6-18-1-icon></sd-6-18-1-button>` : ""}</header><main part="body" class="flex flex-auto overflow-auto w-full px-6 sm:px-10"><slot></slot></main><footer part="footer" class="flex flex-grow-0 flex-shrink-0 basis-auto ml-auto gap-4 px-6 sm:px-10"><slot name="footer"></slot></footer></div></div>`;
|
|
187
187
|
}
|
|
188
188
|
};
|
|
189
189
|
SdDialog.styles = [
|
|
@@ -213,7 +213,7 @@ __decorateClass([
|
|
|
213
213
|
watch("open", { waitUntilFirstUpdate: true })
|
|
214
214
|
], SdDialog.prototype, "handleOpenChange", 1);
|
|
215
215
|
SdDialog = __decorateClass([
|
|
216
|
-
customElement("sd-6-
|
|
216
|
+
customElement("sd-6-18-1-dialog")
|
|
217
217
|
], SdDialog);
|
|
218
218
|
setDefaultAnimation("dialog.show", {
|
|
219
219
|
keyframes: [
|