@solid-design-system/components 6.9.0 → 6.9.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.7PW5YLJH.js +2 -0
- package/cdn/chunks/{chunk.O7PJIDMP.js → chunk.YWF2EYNF.js} +1 -1
- package/cdn/components/expandable/expandable.js +1 -1
- package/cdn/components/notification/notification.js +1 -1
- package/cdn/custom-elements.json +1 -1
- package/cdn/solid-components.bundle.js +4 -4
- package/cdn/solid-components.iife.js +2 -2
- package/cdn/solid-components.js +1 -1
- package/cdn/web-types.json +1 -1
- package/cdn-versioned/chunks/chunk.25DRFJMC.js +2 -2
- package/cdn-versioned/chunks/chunk.2TRMFN6U.js +2 -2
- package/cdn-versioned/chunks/chunk.2VGJBR73.js +2 -2
- package/cdn-versioned/chunks/chunk.34BRLWBM.js +3 -3
- package/cdn-versioned/chunks/chunk.3M4RKO34.js +2 -2
- package/cdn-versioned/chunks/chunk.3VYZIXD7.js +2 -2
- package/cdn-versioned/chunks/chunk.3YATPZKE.js +1 -1
- package/cdn-versioned/chunks/chunk.4AR6H2QH.js +2 -2
- package/cdn-versioned/chunks/chunk.4BMBQGU3.js +2 -2
- package/cdn-versioned/chunks/chunk.4NKCD6HL.js +2 -2
- package/cdn-versioned/chunks/chunk.4YNC3XSD.js +2 -2
- package/cdn-versioned/chunks/chunk.6MUTKG7S.js +2 -2
- package/cdn-versioned/chunks/chunk.6UVLIGA7.js +1 -1
- package/cdn-versioned/chunks/chunk.6WZKUQIK.js +2 -2
- package/cdn-versioned/chunks/chunk.7PW5YLJH.js +2 -0
- package/cdn-versioned/chunks/chunk.AAJIGG4R.js +2 -2
- package/cdn-versioned/chunks/chunk.AX6IEBJ2.js +2 -2
- package/cdn-versioned/chunks/chunk.B35GXAKI.js +1 -1
- package/cdn-versioned/chunks/chunk.CRLGS4QF.js +1 -1
- package/cdn-versioned/chunks/chunk.DLO5GMBQ.js +2 -2
- package/cdn-versioned/chunks/chunk.DTAYHASV.js +2 -2
- package/cdn-versioned/chunks/chunk.EDWO5QHC.js +2 -2
- package/cdn-versioned/chunks/chunk.EFO4PKGN.js +2 -2
- package/cdn-versioned/chunks/chunk.G4KULB76.js +2 -2
- package/cdn-versioned/chunks/chunk.GEGKRESG.js +1 -1
- package/cdn-versioned/chunks/chunk.GIP7V3SN.js +2 -2
- package/cdn-versioned/chunks/chunk.H3DQRUKN.js +2 -2
- package/cdn-versioned/chunks/chunk.HE5IYQC2.js +2 -2
- package/cdn-versioned/chunks/chunk.JAV26Y4S.js +2 -2
- package/cdn-versioned/chunks/chunk.JSZK2BUE.js +2 -2
- package/cdn-versioned/chunks/chunk.LBHLY2UU.js +2 -2
- package/cdn-versioned/chunks/chunk.LYNWHGS3.js +2 -2
- package/cdn-versioned/chunks/chunk.MV77IJ5K.js +5 -5
- package/cdn-versioned/chunks/chunk.N3QINXLL.js +2 -2
- package/cdn-versioned/chunks/chunk.N7SVA6X3.js +2 -2
- package/cdn-versioned/chunks/chunk.NBPJQ3OT.js +2 -2
- package/cdn-versioned/chunks/chunk.O3ECZ2CR.js +1 -1
- package/cdn-versioned/chunks/chunk.OJA4LU7S.js +2 -2
- package/cdn-versioned/chunks/chunk.PPLEJM75.js +1 -1
- package/cdn-versioned/chunks/chunk.PPUIAWDA.js +1 -1
- package/cdn-versioned/chunks/chunk.PWJSPZBR.js +3 -3
- package/cdn-versioned/chunks/chunk.RAP66B6O.js +1 -1
- package/cdn-versioned/chunks/chunk.RXKIZ2UI.js +2 -2
- package/cdn-versioned/chunks/chunk.RZLPP7DP.js +2 -2
- package/cdn-versioned/chunks/chunk.SA5SIXVH.js +1 -1
- package/cdn-versioned/chunks/chunk.TEPKQR4P.js +5 -5
- package/cdn-versioned/chunks/chunk.TJA62EZW.js +2 -2
- package/cdn-versioned/chunks/chunk.TJZECQLN.js +2 -2
- package/cdn-versioned/chunks/chunk.TTU2AZHQ.js +2 -2
- package/cdn-versioned/chunks/chunk.V6TDPNCR.js +2 -2
- package/cdn-versioned/chunks/chunk.VKDXPIJT.js +2 -2
- package/cdn-versioned/chunks/chunk.VQBTMNY2.js +2 -2
- package/cdn-versioned/chunks/chunk.VTXEZEW4.js +9 -9
- package/cdn-versioned/chunks/chunk.VZJMYD3T.js +2 -2
- package/cdn-versioned/chunks/chunk.W2WCYRB2.js +2 -2
- package/cdn-versioned/chunks/chunk.W7A3TU2Z.js +1 -1
- package/cdn-versioned/chunks/chunk.WRCC4UIS.js +2 -2
- package/cdn-versioned/chunks/chunk.WXRHAPLA.js +1 -1
- package/cdn-versioned/chunks/chunk.XFHFUV4B.js +1 -1
- package/cdn-versioned/chunks/chunk.YAIU6HLJ.js +2 -2
- package/cdn-versioned/chunks/chunk.YPTZDABK.js +1 -1
- package/cdn-versioned/chunks/{chunk.O7PJIDMP.js → chunk.YWF2EYNF.js} +2 -2
- package/cdn-versioned/chunks/chunk.ZBAP3VO3.js +2 -2
- package/cdn-versioned/chunks/chunk.ZDHTVWJF.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/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 +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/expandable/expandable.js +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/notification/notification.js +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-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 +244 -244
- package/cdn-versioned/internal/form.js +3 -3
- package/cdn-versioned/solid-components.bundle.js +80 -80
- package/cdn-versioned/solid-components.css +2 -2
- package/cdn-versioned/solid-components.iife.js +80 -80
- package/cdn-versioned/solid-components.js +1 -1
- package/cdn-versioned/vscode.html-custom-data.json +94 -94
- package/cdn-versioned/web-types.json +157 -157
- package/dist/chunks/{chunk.JQTAMOYF.js → chunk.FHWJR5ZS.js} +1 -1
- package/dist/chunks/{chunk.PZQ6H5Y4.js → chunk.YXOBUWWT.js} +2 -1
- package/dist/components/expandable/expandable.js +1 -1
- package/dist/components/notification/notification.js +1 -1
- package/dist/custom-elements.json +1 -1
- package/dist/solid-components.js +2 -2
- package/dist/web-types.json +1 -1
- package/dist-versioned/chunks/chunk.2AIOG6MZ.js +1 -1
- package/dist-versioned/chunks/chunk.3AXFD44E.js +1 -1
- package/dist-versioned/chunks/chunk.47VYEPC7.js +5 -5
- package/dist-versioned/chunks/chunk.55DM73XI.js +1 -1
- package/dist-versioned/chunks/chunk.5MCEFEDU.js +2 -2
- package/dist-versioned/chunks/chunk.5MPE743H.js +4 -4
- package/dist-versioned/chunks/chunk.5OTIJW46.js +12 -12
- package/dist-versioned/chunks/chunk.5RQUMMVO.js +28 -28
- package/dist-versioned/chunks/chunk.5X6LFFKU.js +1 -1
- package/dist-versioned/chunks/chunk.B3QW57TB.js +26 -26
- package/dist-versioned/chunks/chunk.B5JP55MU.js +4 -4
- package/dist-versioned/chunks/chunk.C3WIBDGG.js +3 -3
- package/dist-versioned/chunks/chunk.CGIINI3U.js +2 -2
- package/dist-versioned/chunks/chunk.CPWWEXBN.js +14 -14
- package/dist-versioned/chunks/chunk.CTTLYNGB.js +5 -5
- package/dist-versioned/chunks/chunk.CYUQUE4B.js +2 -2
- package/dist-versioned/chunks/chunk.DILSJX2P.js +3 -3
- package/dist-versioned/chunks/chunk.DJEWCXYR.js +24 -24
- package/dist-versioned/chunks/chunk.DZ2VDJQR.js +8 -8
- package/dist-versioned/chunks/chunk.EJ7ZDGWQ.js +1 -1
- package/dist-versioned/chunks/chunk.F5SY46WN.js +5 -5
- package/dist-versioned/chunks/chunk.FCQKJZ3Q.js +3 -3
- package/dist-versioned/chunks/{chunk.JQTAMOYF.js → chunk.FHWJR5ZS.js} +3 -3
- package/dist-versioned/chunks/chunk.GHCI43SX.js +3 -3
- package/dist-versioned/chunks/chunk.GJQGI7TR.js +3 -3
- package/dist-versioned/chunks/chunk.GQ5YYHTD.js +4 -4
- package/dist-versioned/chunks/chunk.GRANIL4Q.js +6 -6
- package/dist-versioned/chunks/chunk.I53S7NHV.js +2 -2
- package/dist-versioned/chunks/chunk.IKVZ463R.js +3 -3
- package/dist-versioned/chunks/chunk.INHXFMS2.js +11 -11
- package/dist-versioned/chunks/chunk.IPCTQ6PF.js +4 -4
- package/dist-versioned/chunks/chunk.KCPMJRGB.js +2 -2
- package/dist-versioned/chunks/chunk.KEJFWGZI.js +4 -4
- package/dist-versioned/chunks/chunk.LIQBUDFE.js +1 -1
- package/dist-versioned/chunks/chunk.LZARRB2N.js +6 -6
- package/dist-versioned/chunks/chunk.MUI6ZGSD.js +1 -1
- package/dist-versioned/chunks/chunk.N6JFPCVN.js +1 -1
- package/dist-versioned/chunks/chunk.NHJ6T7AP.js +3 -3
- package/dist-versioned/chunks/chunk.NQSFAYCE.js +6 -6
- package/dist-versioned/chunks/chunk.OFV5F7EL.js +12 -12
- package/dist-versioned/chunks/chunk.PZYRZZ2R.js +3 -3
- package/dist-versioned/chunks/chunk.QFWRJIAT.js +1 -1
- package/dist-versioned/chunks/chunk.RBO5CDRH.js +8 -8
- package/dist-versioned/chunks/chunk.RKY7KPDX.js +3 -3
- package/dist-versioned/chunks/chunk.SMT5CXN7.js +5 -5
- package/dist-versioned/chunks/chunk.SNTZFQ72.js +5 -5
- package/dist-versioned/chunks/chunk.SNVCUPPA.js +2 -2
- package/dist-versioned/chunks/chunk.T3YIJ2AA.js +4 -4
- package/dist-versioned/chunks/chunk.U3G5KSOH.js +10 -10
- package/dist-versioned/chunks/chunk.UIQBHPD3.js +2 -2
- package/dist-versioned/chunks/chunk.UQT5XXVS.js +5 -5
- package/dist-versioned/chunks/chunk.V7GR76PZ.js +7 -7
- package/dist-versioned/chunks/chunk.VWORQHO2.js +4 -4
- package/dist-versioned/chunks/chunk.W5KWIGMY.js +8 -8
- package/dist-versioned/chunks/chunk.WFZUFPF7.js +2 -2
- package/dist-versioned/chunks/chunk.WRQJ6H5M.js +3 -3
- package/dist-versioned/chunks/chunk.XCFU7XC7.js +4 -4
- package/dist-versioned/chunks/chunk.XFYTZRFZ.js +2 -2
- package/dist-versioned/chunks/chunk.XPXDWU3H.js +1 -1
- package/dist-versioned/chunks/chunk.XRVF3H64.js +2 -2
- package/dist-versioned/chunks/chunk.XWLSRHC5.js +4 -4
- package/dist-versioned/chunks/chunk.Y5QCYID3.js +5 -5
- package/dist-versioned/chunks/{chunk.PZQ6H5Y4.js → chunk.YXOBUWWT.js} +11 -10
- package/dist-versioned/chunks/chunk.ZNJFZAOB.js +4 -4
- 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 +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/expandable/expandable.js +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/notification/notification.js +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-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 +244 -244
- package/dist-versioned/internal/form.js +3 -3
- package/dist-versioned/solid-components.css +2 -2
- package/dist-versioned/solid-components.js +2 -2
- package/dist-versioned/vscode.html-custom-data.json +94 -94
- package/dist-versioned/web-types.json +157 -157
- package/package.json +1 -1
- package/cdn/chunks/chunk.ZVCMF6VL.js +0 -2
- package/cdn-versioned/chunks/chunk.ZVCMF6VL.js +0 -2
|
@@ -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-9-
|
|
4
|
-
var isOptgroup = (item) => item.tagName.toLocaleLowerCase() === "sd-6-9-
|
|
3
|
+
var getOptionOrNestedOptions = (item) => item.tagName.toLocaleLowerCase() === "sd-6-9-1-option" ? item : Array.from(item.querySelectorAll(":scope > sd-6-9-1-option"));
|
|
4
|
+
var isOptgroup = (item) => item.tagName.toLocaleLowerCase() === "sd-6-9-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();
|
|
@@ -115,14 +115,14 @@ var SdSwitch = class extends SolidElement {
|
|
|
115
115
|
`relative flex flex-initial items-center justify-center border rounded-full h-4 w-8 transition-colors ease duration-100
|
|
116
116
|
peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2
|
|
117
117
|
peer-focus-visible:outline-primary transition-colors ease-in-out duration-medium hover:duration-fast`,
|
|
118
|
-
this.disabled && this.checked ? "bg-neutral-500" : this.disabled ? "border-neutral-500" : this.showInvalidStyle ? this.checked ? "border-error bg-error hover:bg-error-400 hover:border-error-400 group-hover:border-error-400 group-hover:bg-error-400" : "border-error bg-white hover:border-error-400 hover:bg-white group-hover:border-error-400 group-hover:bg-white" : this.checked ? "border-accent hover:sd-6-9-
|
|
118
|
+
this.disabled && this.checked ? "bg-neutral-500" : this.disabled ? "border-neutral-500" : this.showInvalidStyle ? this.checked ? "border-error bg-error hover:bg-error-400 hover:border-error-400 group-hover:border-error-400 group-hover:bg-error-400" : "border-error bg-white hover:border-error-400 hover:bg-white group-hover:border-error-400 group-hover:bg-white" : this.checked ? "border-accent hover:sd-6-9-1-switch--checked--hover-color-background bg-accent hover:border-accent-550 group-hover:sd-6-9-1-switch--checked--hover-color-background" : "sd-6-9-1-switch--unchecked-color-border bg-white hover:bg-neutral-200 group-hover:bg-neutral-200"
|
|
119
119
|
)}"><span id="thumb" part="thumb" class="${cx(
|
|
120
120
|
"w-2.5 h-2.5 rounded-full transition[transform,colors] ease-in-out duration-medium",
|
|
121
|
-
this.disabled && this.checked ? "translate-x-2" : this.disabled ? "-translate-x-2" : this.showInvalidStyle ? this.checked ? "translate-x-2" : "bg-error -translate-x-2 hover:bg-error-400 hover:border-error-400 group-hover:border-error-400 group-hover:bg-error-400" : this.checked ? "translate-x-2" : "-translate-x-2 sd-6-9-
|
|
121
|
+
this.disabled && this.checked ? "translate-x-2" : this.disabled ? "-translate-x-2" : this.showInvalidStyle ? this.checked ? "translate-x-2" : "bg-error -translate-x-2 hover:bg-error-400 hover:border-error-400 group-hover:border-error-400 group-hover:bg-error-400" : this.checked ? "translate-x-2" : "-translate-x-2 sd-6-9-1-switch--unchecked__icon-color-background"
|
|
122
122
|
)}"></span> </span><span part="label" id="label" class="${cx(
|
|
123
123
|
"select-none inline-block ml-2",
|
|
124
|
-
this.disabled ? "text-neutral-500" : this.showInvalidStyle ? "text-error" : "sd-6-9-
|
|
125
|
-
)}"><slot></slot></span></label> ${this.hasSlotController.test("tooltip") ? html`<slot name="tooltip"></slot>` : null}</div><div part="invalid-icon-message" class="flex items-center gap-2 mt-2">${this.showInvalidStyle ? html`<sd-6-9-
|
|
124
|
+
this.disabled ? "text-neutral-500" : this.showInvalidStyle ? "text-error" : "sd-6-9-1-switch-color-text"
|
|
125
|
+
)}"><slot></slot></span></label> ${this.hasSlotController.test("tooltip") ? html`<slot name="tooltip"></slot>` : null}</div><div part="invalid-icon-message" class="flex items-center gap-2 mt-2">${this.showInvalidStyle ? html`<sd-6-9-1-icon part="invalid-icon" class="${cx("text-error")}" library="_internal" name="risk"></sd-6-9-1-icon>` : ""} ${this.formControlController.renderInvalidMessage("lg")}</div>`;
|
|
126
126
|
}
|
|
127
127
|
};
|
|
128
128
|
/**
|
|
@@ -173,7 +173,7 @@ __decorateClass([
|
|
|
173
173
|
watch(["checked"], { waitUntilFirstUpdate: true })
|
|
174
174
|
], SdSwitch.prototype, "handleStateChange", 1);
|
|
175
175
|
SdSwitch = __decorateClass([
|
|
176
|
-
customElement("sd-6-9-
|
|
176
|
+
customElement("sd-6-9-1-switch")
|
|
177
177
|
], SdSwitch);
|
|
178
178
|
|
|
179
179
|
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-6-9-
|
|
74
|
+
"sd-6-9-1-radio group flex items-center text-base leading-normal text-black cursor-pointer",
|
|
75
75
|
(this.disabled || this.visuallyDisabled) && "hover:cursor-not-allowed",
|
|
76
76
|
{
|
|
77
77
|
/* sizes, fonts */
|
|
@@ -80,15 +80,15 @@ var SdRadio = class extends SolidElement {
|
|
|
80
80
|
lg: "text-base"
|
|
81
81
|
}[this.size]
|
|
82
82
|
)}"><span part="${`${this.checked ? "control--checked" : "control--unchecked"}`}" class="${cx(
|
|
83
|
-
"flex-initial shrink-0 relative inline-flex items-center justify-center border sd-6-9-
|
|
83
|
+
"flex-initial shrink-0 relative inline-flex items-center justify-center border sd-6-9-1-radio-border-width rounded-full bg-white h-4 w-4 duration-fast ease-in-out",
|
|
84
84
|
this.disabled || this.visuallyDisabled ? "border-neutral-500" : this.invalid ? cx(
|
|
85
85
|
"border-error hover:border-error-400 group-hover:border-error-400",
|
|
86
|
-
this.checked ? "sd-6-9-
|
|
87
|
-
) : this.checked ? "sd-6-9-
|
|
86
|
+
this.checked ? "sd-6-9-1-radio--checked--invalid--default-color-background" : "sd-6-9-1-radio--default--invalid-color-background"
|
|
87
|
+
) : this.checked ? "sd-6-9-1-radio--checked--default-color-background hover:sd-6-9-1-radio--checked--hover-color-background group-hover:sd-6-9-1-radio--checked--hover-color-background border-accent hover:border-accent-550 group-hover:border-accent-550" : "form-control-color-border hover:bg-neutral-200 group-hover:bg-neutral-200"
|
|
88
88
|
)}"><span part="checked" class="${cx(
|
|
89
|
-
"rounded-full inline-flex text-white sd-6-9-
|
|
89
|
+
"rounded-full inline-flex text-white sd-6-9-1-radio--checked--default__icon-color-background h-2.5 w-2.5 transition-[transform, colors] duration-medium ease-in-out",
|
|
90
90
|
this.checked ? "scale-100" : "scale-0",
|
|
91
|
-
this.disabled ? "bg-neutral-500" : this.visuallyDisabled ? "bg-white" : this.invalid ? "sd-6-9-
|
|
91
|
+
this.disabled ? "bg-neutral-500" : this.visuallyDisabled ? "bg-white" : this.invalid ? "sd-6-9-1-radio--checked--invalid--default__icon-color-background hover:sd-6-9-1-radio--checked--invalid--hover__icon-color-background group-hover:sd-6-9-1-radio--checked--invalid--hover__icon-color-background" : this.checked ? "sd-6-9-1-radio--checked--default__icon-color-background hover:sd-6-9-1-radio--checked--hover__icon-color-background group-hover:sd-6-9-1-radio--checked--hover__icon-color-background" : "bg-neutral-800"
|
|
92
92
|
)}"></span></span><slot part="label" class="${cx(
|
|
93
93
|
"ml-2 select-none inline-block",
|
|
94
94
|
this.disabled || this.visuallyDisabled ? "text-neutral-500" : this.invalid ? "text-error" : "text-black"
|
|
@@ -131,7 +131,7 @@ __decorateClass([
|
|
|
131
131
|
watch(["disabled", "visually-disabled"], { waitUntilFirstUpdate: true })
|
|
132
132
|
], SdRadio.prototype, "handleDisabledChange", 1);
|
|
133
133
|
SdRadio = __decorateClass([
|
|
134
|
-
customElement("sd-6-9-
|
|
134
|
+
customElement("sd-6-9-1-radio")
|
|
135
135
|
], SdRadio);
|
|
136
136
|
|
|
137
137
|
export {
|
|
@@ -88,7 +88,7 @@ var SdStep = class extends SolidElement {
|
|
|
88
88
|
this.orientation === "horizontal" && !this.horizontalInline ? this.size === "lg" ? "translateLg" : "translateSm" : this.size === "lg" ? "mt-1" : "mt-3"
|
|
89
89
|
);
|
|
90
90
|
const circleButtonClasses = cx(
|
|
91
|
-
"border sd-6-9-
|
|
91
|
+
"border sd-6-9-1-step__circle-border-width rounded-full aspect-square circle flex items-center justify-center shrink-0 font-bold select-none",
|
|
92
92
|
this.disabled ? "focus-visible:outline-none cursor-not-allowed" : !this.notInteractive && !this.waiting ? "focus-visible:focus-outline hover:cursor-pointer" : "",
|
|
93
93
|
this.notInteractive ? this.size === "lg" ? "not-interactive-lg" : "w-12" : this.size === "lg" ? "w-12" : "w-8",
|
|
94
94
|
this.disabled && "border-neutral-500 text-neutral-500",
|
|
@@ -105,7 +105,7 @@ var SdStep = class extends SolidElement {
|
|
|
105
105
|
"text-lg",
|
|
106
106
|
!this.disabled && !this.current && !this.notInteractive && !this.waiting && "text-primary hover:text-primary-500 hover:fill-primary-500",
|
|
107
107
|
this.notInteractive && "text-primary"
|
|
108
|
-
)}">${!this.disabled && !this.current && !this.notInteractive && !this.waiting ? html`<sd-6-9-
|
|
108
|
+
)}">${!this.disabled && !this.current && !this.notInteractive && !this.waiting ? html`<sd-6-9-1-icon name="status-check" library="_internal" class="${cx(this.size === "sm" && "text-sm")}"></sd-6-9-1-icon>` : html`${this.index}`}</slot></${tag}>${isHorizontalInline ? html`<div class="${cx(!this.noTail && "flex-1", "flex flex-col gap-1")}"><div class="${cx(
|
|
109
109
|
"flex w-full",
|
|
110
110
|
hasLabel && "gap-2",
|
|
111
111
|
this.size === "sm" && !hasDescription ? "mt-1" : "mt-3"
|
|
@@ -145,7 +145,7 @@ var SdStep = class extends SolidElement {
|
|
|
145
145
|
SdStep.styles = [
|
|
146
146
|
...SolidElement.styles,
|
|
147
147
|
css`/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
|
|
148
|
-
:host{flex:1}:host([orientation=horizontal]) [part=tail]{border-top-width:var(--sd-step__tail-border-width)}:host([orientation=vertical]) [part=tail]{border-left-width:var(--sd-step__tail-border-width)}:host([no-tail]){flex-grow:0}:host(:not([current])) slot[name=circle-content]{color:rgba(var(--sd-color-text-neutral-700))}slot[name=circle-content] sd-6-9-
|
|
148
|
+
:host{flex:1}:host([orientation=horizontal]) [part=tail]{border-top-width:var(--sd-step__tail-border-width)}:host([orientation=vertical]) [part=tail]{border-left-width:var(--sd-step__tail-border-width)}:host([no-tail]){flex-grow:0}:host(:not([current])) slot[name=circle-content]{color:rgba(var(--sd-color-text-neutral-700))}slot[name=circle-content] sd-6-9-1-icon,slot[name=circle-content]::slotted(sd-6-9-1-icon){color:rgba(var(--sd-color-icon-fill-primary))}:host([horizontal-inline]):has([part=description]){min-width:calc(var(--sd-spacing-1) * 0);flex:1}.translateLg{transform:translateX(3.438rem)}.translateSm{transform:translateX(4rem)}.not-interactive-lg{width:4.5rem}`
|
|
149
149
|
];
|
|
150
150
|
__decorateClass([
|
|
151
151
|
property({ type: String, reflect: true })
|
|
@@ -196,7 +196,7 @@ __decorateClass([
|
|
|
196
196
|
watch("notInteractive")
|
|
197
197
|
], SdStep.prototype, "handleInteractivityChange", 1);
|
|
198
198
|
SdStep = __decorateClass([
|
|
199
|
-
customElement("sd-6-9-
|
|
199
|
+
customElement("sd-6-9-1-step")
|
|
200
200
|
], SdStep);
|
|
201
201
|
|
|
202
202
|
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-9-
|
|
132
|
+
(_c = oppositeButton == null ? void 0 : oppositeButton.querySelector("sd-6-9-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-9-
|
|
144
|
+
(_a = button.querySelector("sd-6-9-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-9-
|
|
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-9-1-icon library="_internal" name="chevron-up" class="rotate-[-90deg]" label="${this.localize.term("scrollToStart")}"></sd-6-9-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-9-
|
|
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-9-1-icon library="_internal" name="chevron-down" class="rotate-[-90deg]" label="${this.localize.term("scrollToEnd")}"></sd-6-9-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-9-
|
|
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-9-1-icon library="_internal" name="chevron-up" label="${this.localize.term("scrollToStart")}"></sd-6-9-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-9-
|
|
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-9-1-icon library="_internal" name="chevron-down" label="${this.localize.term("scrollToEnd")}"></sd-6-9-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.1.18 | 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-9-
|
|
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-9-1-icon--top{align-self:flex-start}.sd-6-9-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-9-
|
|
240
|
+
customElement("sd-6-9-1-scrollable")
|
|
241
241
|
], SdScrollable);
|
|
242
242
|
|
|
243
243
|
export {
|
|
@@ -100,7 +100,7 @@ var SdIcon = class extends SolidElement {
|
|
|
100
100
|
}
|
|
101
101
|
}
|
|
102
102
|
render() {
|
|
103
|
-
return html`<sd-6-9-
|
|
103
|
+
return html`<sd-6-9-1-theme-listener></sd-6-9-1-theme-listener>${unsafeSVG(this.svg)}`;
|
|
104
104
|
}
|
|
105
105
|
};
|
|
106
106
|
SdIcon.styles = [
|
|
@@ -133,7 +133,7 @@ __decorateClass([
|
|
|
133
133
|
watch(["name", "src", "library"])
|
|
134
134
|
], SdIcon.prototype, "setIcon", 1);
|
|
135
135
|
SdIcon = __decorateClass([
|
|
136
|
-
customElement("sd-6-9-
|
|
136
|
+
customElement("sd-6-9-1-icon")
|
|
137
137
|
], SdIcon);
|
|
138
138
|
|
|
139
139
|
export {
|
|
@@ -97,8 +97,8 @@ var SdOption = class extends SolidElement {
|
|
|
97
97
|
md: "mt-1",
|
|
98
98
|
lg: "mt-1"
|
|
99
99
|
}[this.size],
|
|
100
|
-
this.disabled ? "sd-6-9-
|
|
101
|
-
)}">${this.selected ? html`<sd-6-9-
|
|
100
|
+
this.disabled ? "sd-6-9-1-option--disabled-color-border" : this.selected ? "bg-accent border-accent" : "bg-white form-control-color-border"
|
|
101
|
+
)}">${this.selected ? html`<sd-6-9-1-icon part="checked-icon" class="text-white w-3 h-3" library="_internal" name="status-check"></sd-6-9-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>`;
|
|
102
102
|
}
|
|
103
103
|
};
|
|
104
104
|
/**
|
|
@@ -146,7 +146,7 @@ __decorateClass([
|
|
|
146
146
|
watch("value")
|
|
147
147
|
], SdOption.prototype, "handleValueChange", 1);
|
|
148
148
|
SdOption = __decorateClass([
|
|
149
|
-
customElement("sd-6-9-
|
|
149
|
+
customElement("sd-6-9-1-option")
|
|
150
150
|
], SdOption);
|
|
151
151
|
|
|
152
152
|
export {
|
|
@@ -64,9 +64,9 @@ var SdRadioButton = class extends SolidElement {
|
|
|
64
64
|
const hasIconSlot = this.hasSlotController.test("icon");
|
|
65
65
|
const buttonSizeClass = `${this.size}-${hasDefaultSlot ? "label" : "no-label"}`;
|
|
66
66
|
return html`<div part="base" role="presentation" class="relative"><button part="${`button${this.checked ? " button--checked" : ""}`}" role="radio" aria-checked="${this.checked}" class="${cx(
|
|
67
|
-
"relative text-center sd-6-9-
|
|
67
|
+
"relative text-center sd-6-9-1-radio-button-border-radius transition-all ease-in-out duration-100 items-center justify-center focus-visible:focus-outline",
|
|
68
68
|
this.size === "sm" ? "text-sm" : "text-base",
|
|
69
|
-
this.checked && !this.disabled && !this.visuallyDisabled ? "sd-6-9-
|
|
69
|
+
this.checked && !this.disabled && !this.visuallyDisabled ? "sd-6-9-1-button--primary--default-color-background sd-6-9-1-button--primary--default-color-text hover:sd-6-9-1-button--primary--hover-color-background" : !this.checked && (this.disabled || this.visuallyDisabled) ? "text-neutral-500 hover:cursor-not-allowed" : this.checked && (this.disabled || this.visuallyDisabled) ? "bg-neutral-400 text-white hover:cursor-not-allowed " : "bg-transparent sd-6-9-1-radio-button-color-text border-primary hover:text-primary-500 cursor-pointer",
|
|
70
70
|
hasDefaultSlot && {
|
|
71
71
|
sm: "px-3",
|
|
72
72
|
md: "px-4",
|
|
@@ -89,7 +89,7 @@ var SdRadioButton = class extends SolidElement {
|
|
|
89
89
|
SdRadioButton.styles = [
|
|
90
90
|
...SolidElement.styles,
|
|
91
91
|
css`/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
|
|
92
|
-
:host{display:block;width:-moz-min-content;width:min-content}.hidden-input{all:unset;position:absolute;inset:calc(var(--sd-spacing-1) * 0);z-index:calc(10 * -1);opacity:var(--sd-opacity-0);outline-style:var(--tw-outline-style);outline-width:1px;outline-color:var(--sd-color-border-error,var(--sd-color-error));--tw-outline-style:dotted;outline-style:dotted}.lg-label{height:var(--sd-spacing-12)}.lg-no-label{height:var(--sd-spacing-12);padding-inline:calc(var(--sd-spacing-1) * 5)}.md-label{height:var(--sd-spacing-10)}.md-no-label{height:var(--sd-spacing-10);padding-inline:var(--sd-spacing-4)}.sm-label{height:var(--sd-spacing-8)}.sm-no-label{height:var(--sd-spacing-8);padding-inline:var(--sd-spacing-3)}:host([size=lg].sd-6-9-
|
|
92
|
+
:host{display:block;width:-moz-min-content;width:min-content}.hidden-input{all:unset;position:absolute;inset:calc(var(--sd-spacing-1) * 0);z-index:calc(10 * -1);opacity:var(--sd-opacity-0);outline-style:var(--tw-outline-style);outline-width:1px;outline-color:var(--sd-color-border-error,var(--sd-color-error));--tw-outline-style:dotted;outline-style:dotted}.lg-label{height:var(--sd-spacing-12)}.lg-no-label{height:var(--sd-spacing-12);padding-inline:calc(var(--sd-spacing-1) * 5)}.md-label{height:var(--sd-spacing-10)}.md-no-label{height:var(--sd-spacing-10);padding-inline:var(--sd-spacing-4)}.sm-label{height:var(--sd-spacing-8)}.sm-no-label{height:var(--sd-spacing-8);padding-inline:var(--sd-spacing-3)}:host([size=lg].sd-6-9-1-button-group__button:not(.sd-6-9-1-button-group__button--first)){margin-inline-start:calc(var(--sd-spacing-3) * -1)}:host([size=md].sd-6-9-1-button-group__button:not(.sd-6-9-1-button-group__button--first)){margin-inline-start:calc(var(--sd-spacing-2) * -1)}:host([size=sm].sd-6-9-1-button-group__button:not(.sd-6-9-1-button-group__button--first)){margin-inline-start:calc(var(--sd-spacing-1) * -1)}:host(.sd-6-9-1-button-group__button--hover){z-index:20}:host(.sd-6-9-1-button-group__button--focus),:host(.sd-6-9-1-button-group__button[checked]){z-index:10}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}`
|
|
93
93
|
];
|
|
94
94
|
__decorateClass([
|
|
95
95
|
query(".button")
|
|
@@ -119,7 +119,7 @@ __decorateClass([
|
|
|
119
119
|
watch(["disabled", "visually-disabled"], { waitUntilFirstUpdate: true })
|
|
120
120
|
], SdRadioButton.prototype, "handleDisabledChange", 1);
|
|
121
121
|
SdRadioButton = __decorateClass([
|
|
122
|
-
customElement("sd-6-9-
|
|
122
|
+
customElement("sd-6-9-1-radio-button")
|
|
123
123
|
], SdRadioButton);
|
|
124
124
|
|
|
125
125
|
export {
|
|
@@ -55,7 +55,7 @@ var SdStepGroup = class extends SolidElement {
|
|
|
55
55
|
});
|
|
56
56
|
}
|
|
57
57
|
getAllSteps() {
|
|
58
|
-
return [...this.body.assignedElements()].filter((el) => el.tagName.toLowerCase() === "sd-6-9-
|
|
58
|
+
return [...this.body.assignedElements()].filter((el) => el.tagName.toLowerCase() === "sd-6-9-1-step");
|
|
59
59
|
}
|
|
60
60
|
/**
|
|
61
61
|
* Sets the active step.
|
|
@@ -121,7 +121,7 @@ __decorateClass([
|
|
|
121
121
|
watch("notInteractive")
|
|
122
122
|
], SdStepGroup.prototype, "handleInteractivityChange", 1);
|
|
123
123
|
SdStepGroup = __decorateClass([
|
|
124
|
-
customElement("sd-6-9-
|
|
124
|
+
customElement("sd-6-9-1-step-group")
|
|
125
125
|
], SdStepGroup);
|
|
126
126
|
|
|
127
127
|
export {
|
|
@@ -324,7 +324,7 @@ __decorateClass([
|
|
|
324
324
|
property({ attribute: "auto-size-padding", type: Number })
|
|
325
325
|
], SdPopup.prototype, "autoSizePadding", 2);
|
|
326
326
|
SdPopup = __decorateClass([
|
|
327
|
-
customElement("sd-6-9-
|
|
327
|
+
customElement("sd-6-9-1-popup")
|
|
328
328
|
], SdPopup);
|
|
329
329
|
|
|
330
330
|
export {
|
|
@@ -208,7 +208,7 @@ var SdDrawer = class extends SolidElement {
|
|
|
208
208
|
end: "top-0 end-0 bottom-auto start-auto w-[var(--width)] h-full",
|
|
209
209
|
start: "top-0 end-auto bottom-auto start-0 w-[var(--width)] h-full"
|
|
210
210
|
}[this.placement]
|
|
211
|
-
)}" 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:64px"><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 ms-4 absolute top-2 end-2"><sd-6-9-
|
|
211
|
+
)}" 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:64px"><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 ms-4 absolute top-2 end-2"><sd-6-9-1-button variant="tertiary" size="lg" part="close-button" @click="${() => this.requestClose("close-button")}"><sd-6-9-1-icon label="${this.localize.term("close")}" name="close" library="_internal"></sd-6-9-1-icon></sd-6-9-1-button></div></header>` : html`<sd-6-9-1-button variant="tertiary" size="lg" part="close-button" @click="${() => this.requestClose("close-button")}" class="absolute top-2 end-2 z-10"><sd-6-9-1-icon label="${this.localize.term("close")}" name="close" library="_internal"></sd-6-9-1-icon></sd-6-9-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>`;
|
|
212
212
|
}
|
|
213
213
|
};
|
|
214
214
|
SdDrawer.styles = [
|
|
@@ -250,7 +250,7 @@ __decorateClass([
|
|
|
250
250
|
watch("contained", { waitUntilFirstUpdate: true })
|
|
251
251
|
], SdDrawer.prototype, "handleNoModalChange", 1);
|
|
252
252
|
SdDrawer = __decorateClass([
|
|
253
|
-
customElement("sd-6-9-
|
|
253
|
+
customElement("sd-6-9-1-drawer")
|
|
254
254
|
], SdDrawer);
|
|
255
255
|
setDefaultAnimation("drawer.showStart", {
|
|
256
256
|
keyframes: [
|
|
@@ -10,7 +10,7 @@ function setupAutocomplete(selector, { setValueOnSelection, scrollSelectionIntoV
|
|
|
10
10
|
var _a, _b;
|
|
11
11
|
const ul = (_a = sdInput.shadowRoot) == null ? void 0 : _a.querySelector("ul");
|
|
12
12
|
ul == null ? void 0 : ul.setAttribute("part", "listbox");
|
|
13
|
-
const popup = document.createElement("sd-6-9-
|
|
13
|
+
const popup = document.createElement("sd-6-9-1-popup");
|
|
14
14
|
popup.appendChild(ul);
|
|
15
15
|
(_b = sdInput.shadowRoot) == null ? void 0 : _b.appendChild(popup);
|
|
16
16
|
popup == null ? void 0 : popup.setAttribute("exportparts", "popup__content");
|
|
@@ -23,7 +23,7 @@ function setupAutocomplete(selector, { setValueOnSelection, scrollSelectionIntoV
|
|
|
23
23
|
popup.sync = "width";
|
|
24
24
|
}
|
|
25
25
|
const styles = css`/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
|
|
26
|
-
sd-6-9-
|
|
26
|
+
sd-6-9-1-popup::part(popup){z-index:var(--sd-z-index-dropdown,900);overflow-y:scroll;border-bottom-right-radius:var(--sd-radius);border-bottom-left-radius:var(--sd-radius);border-style:var(--tw-border-style);border-width:var(--sd-border-width-2);border-top-style:var(--tw-border-style);border-top-width:0;border-color:rgba(var(--sd-color-border-primary));background-color:rgba(var(--sd-color-background-white));padding-inline:var(--sd-spacing-2);padding-block:var(--sd-spacing-3);--tw-shadow:var(--sd-shadow);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}sd-6-9-1-popup li{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4,0,.2,1)));transition-duration:var(--tw-duration,var(--default-transition-duration,150ms))}sd-6-9-1-popup li:hover:not([disabled]){background-color:rgba(var(--sd-color-background-neutral-100))}sd-6-9-1-popup li{list-style-type:''}sd-6-9-1-popup li mark{background-color:transparent;--tw-font-weight:var(--sd-font-weight-bold);font-weight:var(--sd-font-weight-bold)}sd-6-9-1-popup li:not(:has(sd-6-9-1-option)){cursor:pointer;padding-inline:var(--sd-spacing-4);padding-block:var(--sd-spacing-3);font-size:var(--sd-text-base);line-height:var(--tw-leading,var(--text-base--line-height,calc(1.5 / 1)));color:rgba(var(--sd-color-text-black))}sd-6-9-1-popup li:not(:has(sd-6-9-1-option)):hover{background-color:rgba(var(--sd-color-background-neutral-200))}sd-6-9-1-popup li[aria-selected=true]{background-color:rgba(var(--sd-color-background-neutral-200))}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-font-weight{syntax:"*";inherits:false}`;
|
|
27
27
|
const styleSheet = new CSSStyleSheet();
|
|
28
28
|
styleSheet.replaceSync(styles);
|
|
29
29
|
sdInput.shadowRoot.adoptedStyleSheets = [...sdInput.shadowRoot.adoptedStyleSheets, styleSheet];
|
|
@@ -36,13 +36,13 @@ sd-6-9-0-popup::part(popup){z-index:var(--sd-z-index-dropdown,900);overflow-y:sc
|
|
|
36
36
|
}
|
|
37
37
|
input.addEventListener("open", () => {
|
|
38
38
|
var _a, _b, _c, _d, _e, _f;
|
|
39
|
-
(_b = (_a = sdInput.shadowRoot) == null ? void 0 : _a.querySelector("sd-6-9-
|
|
39
|
+
(_b = (_a = sdInput.shadowRoot) == null ? void 0 : _a.querySelector("sd-6-9-1-popup")) == null ? void 0 : _b.setAttribute("active", "true");
|
|
40
40
|
(_d = (_c = sdInput.shadowRoot) == null ? void 0 : _c.querySelector('[part="border"]')) == null ? void 0 : _d.classList.add("rounded-b-none");
|
|
41
41
|
(_f = (_e = sdInput.shadowRoot) == null ? void 0 : _e.querySelector('[part="form-control"]')) == null ? void 0 : _f.classList.add("z-50");
|
|
42
42
|
});
|
|
43
43
|
input.addEventListener("close", () => {
|
|
44
44
|
var _a, _b, _c, _d, _e, _f;
|
|
45
|
-
(_b = (_a = sdInput.shadowRoot) == null ? void 0 : _a.querySelector("sd-6-9-
|
|
45
|
+
(_b = (_a = sdInput.shadowRoot) == null ? void 0 : _a.querySelector("sd-6-9-1-popup")) == null ? void 0 : _b.removeAttribute("active");
|
|
46
46
|
(_d = (_c = sdInput.shadowRoot) == null ? void 0 : _c.querySelector('[part="border"]')) == null ? void 0 : _d.classList.remove("rounded-b-none");
|
|
47
47
|
(_f = (_e = sdInput.shadowRoot) == null ? void 0 : _e.querySelector('[part="form-control"]')) == null ? void 0 : _f.classList.remove("z-50");
|
|
48
48
|
});
|
|
@@ -414,14 +414,14 @@ var SdInput = class extends SolidElement {
|
|
|
414
414
|
!isFloatingLabelActive || !hasValue && (this.readonly || this.visuallyDisabled) ? textSize : "text-xs",
|
|
415
415
|
(this.visuallyDisabled || this.disabled) && "text-neutral-500",
|
|
416
416
|
isFloatingLabelActive && !this.visuallyDisabled && !this.disabled && "form-control--filled__floating-label-color-text"
|
|
417
|
-
)}">${this.label}</span></label>` : null} ${hasClearIcon ? html`<button part="clear-button" class="${cx("flex justify-center", iconMarginLeft)}" type="button" aria-label="${this.localize.term("clearEntry")}" @click="${this.handleClearClick}" tabindex="-1"><slot name="clear-icon"><sd-6-9-
|
|
417
|
+
)}">${this.label}</span></label>` : null} ${hasClearIcon ? html`<button part="clear-button" class="${cx("flex justify-center", iconMarginLeft)}" type="button" aria-label="${this.localize.term("clearEntry")}" @click="${this.handleClearClick}" tabindex="-1"><slot name="clear-icon"><sd-6-9-1-icon class="${cx(
|
|
418
418
|
this.disabled || this.visuallyDisabled ? "text-neutral-500" : "text-neutral-700",
|
|
419
419
|
iconSize
|
|
420
|
-
)}" library="_internal" name="closing-round"></sd-6-9-
|
|
420
|
+
)}" library="_internal" name="closing-round"></sd-6-9-1-icon></slot></button>` : ""} ${this.passwordToggle && this.type === "password" ? html`<button aria-label="${this.localize.term(this.passwordVisible ? "hidePassword" : "showPassword")}" part="password-toggle-button" class="${cx(
|
|
421
421
|
"flex items-center sd-interactive",
|
|
422
422
|
iconMarginLeft,
|
|
423
423
|
this.floatingLabel && !isFloatingLabelActive && "hide-password-toggle"
|
|
424
|
-
)}" type="button" @click="${this.handlePasswordToggle}" @mousedown="${this.handleClickableIconFocusIn}" @focus="${() => this.handleClickableIconFocusIn()}" @blur="${this.handleClickableIconFocusOut}">${this.passwordVisible ? html`<slot name="show-password-icon"><sd-6-9-
|
|
424
|
+
)}" type="button" @click="${this.handlePasswordToggle}" @mousedown="${this.handleClickableIconFocusIn}" @focus="${() => this.handleClickableIconFocusIn()}" @blur="${this.handleClickableIconFocusOut}">${this.passwordVisible ? html`<slot name="show-password-icon"><sd-6-9-1-icon class="${cx(iconColor, iconSize)}" library="_internal" name="eye"></sd-6-9-1-icon></slot>` : html`<slot name="hide-password-icon"><sd-6-9-1-icon class="${cx(iconColor, iconSize)}" library="_internal" name="eye-crossed-out"></sd-6-9-1-icon></slot>`}</button>` : ""} ${(this.type === "date" || this.type === "datetime-local") && !isFirefox ? html`<sd-6-9-1-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="_internal" name="calendar"></sd-6-9-1-icon>` : ""} ${this.type === "time" ? html`<sd-6-9-1-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="_internal" name="clock"></sd-6-9-1-icon>` : ""} ${this.type === "search" ? html`<button class="${cx("flex items-center sd-interactive", iconMarginLeft)}" type="button" @click="${this.handleSearchClick}"><sd-6-9-1-icon class="${cx(iconColor, iconSize)}" library="_internal" name="magnifying-glass" label="${this.localize.term("search")}"></sd-6-9-1-icon></button>` : ""} ${this.showInvalidStyle ? html`<sd-6-9-1-icon part="invalid-icon" class="${cx("text-error", iconMarginLeft, iconSize)}" library="_internal" name="risk"></sd-6-9-1-icon>` : ""} ${this.showValidStyle && this.styleOnValid ? html`<sd-6-9-1-icon class="${cx("text-success flex-shrink-0", iconMarginLeft, iconSize)}" library="_internal" name="confirm-circle" part="valid-icon"></sd-6-9-1-icon>` : ""} ${slots["right"] ? html`<slot name="right" part="right" class="${cx("inline-flex", iconColor, iconMarginLeft, iconSize)}"></slot>` : ""} ${this.type === "number" && this.spinButtons ? html`<div part="stepper" class="flex items-center"><button part="decrement-number-stepper" class="stepper-button flex" type="button" ?disabled="${this.isDecrementDisabled()}" aria-hidden="true" ${longPress({ start: () => this.handleStepDown(), end: () => this.handleChange() })} tabindex="-1" @mousedown="${this.handleClickableIconFocusIn}" @focus="${() => this.handleClickableIconFocusIn()}" @blur="${this.handleClickableIconFocusOut}"><slot name="decrement-number-stepper"><sd-6-9-1-icon library="_internal" name="minus-circle" label="Decrease value" class="${cx(iconColor, iconMarginLeft, iconSize)}"></sd-6-9-1-icon></slot></button> <button part="increment-number-stepper" class="stepper-button flex" type="button" ?disabled="${this.isIncrementDisabled()}" aria-hidden="true" ${longPress({ start: () => this.handleStepUp(), end: () => this.handleChange() })} tabindex="-1"><slot name="increment-number-stepper"><sd-6-9-1-icon library="_internal" name="plus-circle" label="Decrease value" class="${cx(iconColor, iconMarginLeft, iconSize)}"></sd-6-9-1-icon></slot></button></div>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700 mt-1", hasHelpText && !this.showInvalidStyle ? "block" : "hidden")}" aria-hidden="${!hasHelpText || this.showInvalidStyle}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage(this.size)}`;
|
|
425
425
|
}
|
|
426
426
|
};
|
|
427
427
|
/**
|
|
@@ -430,7 +430,7 @@ var SdInput = class extends SolidElement {
|
|
|
430
430
|
SdInput.styles = [
|
|
431
431
|
...SolidElement.styles,
|
|
432
432
|
css`/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
|
|
433
|
-
:host{position:relative;box-sizing:border-box;display:inline-block;width:100%;text-align:left}:host([vertical]){display:block}:host([required]) :is(#label,#floating-label)::after{content:' *'}:host([visually-disabled]) input{caret-color:transparent}details summary::-webkit-details-marker{display:none}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}input[type=time]::-webkit-calendar-picker-indicator{background:0 0;display:none;-webkit-appearance:none}details summary::-webkit-details-marker,input[type=date]::-webkit-calendar-picker-indicator,input[type=datetime-local]::-webkit-calendar-picker-indicator,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}.stepper-button[disabled] sd-6-9-
|
|
433
|
+
:host{position:relative;box-sizing:border-box;display:inline-block;width:100%;text-align:left}:host([vertical]){display:block}:host([required]) :is(#label,#floating-label)::after{content:' *'}:host([visually-disabled]) input{caret-color:transparent}details summary::-webkit-details-marker{display:none}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}input[type=time]::-webkit-calendar-picker-indicator{background:0 0;display:none;-webkit-appearance:none}details summary::-webkit-details-marker,input[type=date]::-webkit-calendar-picker-indicator,input[type=datetime-local]::-webkit-calendar-picker-indicator,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}.stepper-button[disabled] sd-6-9-1-icon{color:rgba(var(--sd-color-text-neutral-500))}.hide-password-toggle{display:none}.has-floating-label input[type=date]:not(.has-value),.has-floating-label input[type=datetime-local]:not(.has-value),.has-floating-label input[type=time]:not(.has-value){color:transparent}.has-floating-label input[type=date]:focus,.has-floating-label input[type=datetime-local]:focus,.has-floating-label input[type=time]:focus{color:inherit}`
|
|
434
434
|
];
|
|
435
435
|
__decorateClass([
|
|
436
436
|
query("#input")
|
|
@@ -569,7 +569,7 @@ __decorateClass([
|
|
|
569
569
|
watch(["size", "floatingLabel"])
|
|
570
570
|
], SdInput.prototype, "handleSizeChange", 1);
|
|
571
571
|
SdInput = __decorateClass([
|
|
572
|
-
customElement("sd-6-9-
|
|
572
|
+
customElement("sd-6-9-1-input")
|
|
573
573
|
], SdInput);
|
|
574
574
|
|
|
575
575
|
export {
|
|
@@ -30,6 +30,7 @@ import {
|
|
|
30
30
|
|
|
31
31
|
// src/components/notification/notification.ts
|
|
32
32
|
import { css, html } from "lit";
|
|
33
|
+
import { ifDefined } from "lit/directives/if-defined.js";
|
|
33
34
|
import { property, query } from "lit/decorators.js";
|
|
34
35
|
import cx from "classix";
|
|
35
36
|
var stacks = {
|
|
@@ -202,7 +203,7 @@ var SdNotification = class extends SolidElement {
|
|
|
202
203
|
});
|
|
203
204
|
}
|
|
204
205
|
render() {
|
|
205
|
-
return html`<div part="base" class="${cx("w-full flex items-stretch m-2 focus-visible:focus-outline")}" id="notification" tabindex="0" role="alert" aria-labelledby="message" aria-hidden="${this.open ? "false" : "true"}" @mouseenter="${this.onHover}" @mouseleave="${this.onHoverEnd}" @keydown="${this.handleKeyDown}"><div part="wrapper" class="${cx("w-full h-fit overflow-hidden flex items-stretch relative")}"><slot name="icon" part="icon" class="${cx(
|
|
206
|
+
return html`<div part="base" class="${cx("w-full flex items-stretch m-2 focus-visible:focus-outline")}" id="notification" tabindex="${ifDefined(this.closable ? "0" : void 0)}" role="alert" aria-labelledby="message" aria-hidden="${this.open ? "false" : "true"}" @mouseenter="${this.onHover}" @mouseleave="${this.onHoverEnd}" @keydown="${this.handleKeyDown}"><div part="wrapper" class="${cx("w-full h-fit overflow-hidden flex items-stretch relative")}"><slot name="icon" part="icon" class="${cx(
|
|
206
207
|
"min-w-min flex items-center px-3 justify-center",
|
|
207
208
|
{
|
|
208
209
|
info: "bg-info",
|
|
@@ -210,21 +211,21 @@ var SdNotification = class extends SolidElement {
|
|
|
210
211
|
warning: "bg-warning",
|
|
211
212
|
error: "bg-error"
|
|
212
213
|
}[this.variant]
|
|
213
|
-
)}"><sd-6-9-
|
|
214
|
+
)}"><sd-6-9-1-icon name="${{
|
|
214
215
|
info: "info-circle",
|
|
215
216
|
success: "confirm-circle",
|
|
216
217
|
warning: "exclamation-circle",
|
|
217
218
|
error: "warning"
|
|
218
|
-
}[this.variant] || ""}" library="_internal" class="h-6 w-6 text-white"></sd-6-9-
|
|
219
|
+
}[this.variant] || ""}" library="_internal" class="h-6 w-6 text-white"></sd-6-9-1-icon></slot><div part="content" class="${cx(
|
|
219
220
|
"h-full w-full p-1 gap-2 flex items-center justify-stretch bg-white",
|
|
220
|
-
"border-solid border-[1px] border-l-0 sd-6-9-
|
|
221
|
+
"border-solid border-[1px] border-l-0 sd-6-9-1-notification-color-border",
|
|
221
222
|
{
|
|
222
|
-
info: "sd-6-9-
|
|
223
|
-
success: "sd-6-9-
|
|
224
|
-
warning: "sd-6-9-
|
|
225
|
-
error: "sd-6-9-
|
|
223
|
+
info: "sd-6-9-1-notification--info-color-background",
|
|
224
|
+
success: "sd-6-9-1-notification--success-color-background",
|
|
225
|
+
warning: "sd-6-9-1-notification--warning-color-background",
|
|
226
|
+
error: "sd-6-9-1-notification--error-color-background"
|
|
226
227
|
}[this.variant]
|
|
227
|
-
)}"><slot id="message" part="message" class="block w-full pl-3 py-2"></slot>${this.closable ? html`<sd-6-9-
|
|
228
|
+
)}"><slot id="message" part="message" class="block w-full pl-3 py-2"></slot>${this.closable ? html`<sd-6-9-1-button size="md" variant="tertiary" part="close-button" class="ml-auto flex flex-[0_0_auto] items-stretch" @click="${this.handleCloseClick}"><sd-6-9-1-icon label="${this.localize.term("close")}" name="close" library="_internal" color="currentColor"></sd-6-9-1-icon></sd-6-9-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 sd-6-9-1-notification-color-border"></div>` : ""}</div></div>`;
|
|
228
229
|
}
|
|
229
230
|
};
|
|
230
231
|
/**
|
|
@@ -269,7 +270,7 @@ __decorateClass([
|
|
|
269
270
|
watch("duration")
|
|
270
271
|
], SdNotification.prototype, "handleDurationChange", 1);
|
|
271
272
|
SdNotification = __decorateClass([
|
|
272
|
-
customElement("sd-6-9-
|
|
273
|
+
customElement("sd-6-9-1-notification")
|
|
273
274
|
], SdNotification);
|
|
274
275
|
setDefaultAnimation("notification.show", {
|
|
275
276
|
keyframes: [
|
|
@@ -60,10 +60,10 @@ var SdTeaser = class extends SolidElement {
|
|
|
60
60
|
"flex",
|
|
61
61
|
{
|
|
62
62
|
white: "bg-white",
|
|
63
|
-
"white border-neutral-400": "bg-white border sd-6-9-
|
|
64
|
-
"neutral-100": "sd-6-9-
|
|
63
|
+
"white border-neutral-400": "bg-white border sd-6-9-1-teaser--neutral-400-color-border",
|
|
64
|
+
"neutral-100": "sd-6-9-1-teaser--neutral-100-color-background",
|
|
65
65
|
primary: "bg-primary text-white",
|
|
66
|
-
"primary-100": "sd-6-9-
|
|
66
|
+
"primary-100": "sd-6-9-1-teaser--primary-100-color-background"
|
|
67
67
|
}[this.variant],
|
|
68
68
|
this._orientation === "vertical" && "flex-col",
|
|
69
69
|
this._orientation === "horizontal" && "flex-row gap-8",
|
|
@@ -105,7 +105,7 @@ __decorateClass([
|
|
|
105
105
|
state()
|
|
106
106
|
], SdTeaser.prototype, "_orientation", 2);
|
|
107
107
|
SdTeaser = __decorateClass([
|
|
108
|
-
customElement("sd-6-9-
|
|
108
|
+
customElement("sd-6-9-1-teaser")
|
|
109
109
|
], SdTeaser);
|
|
110
110
|
|
|
111
111
|
export {
|