@solid-design-system/components 6.8.0 → 6.9.0
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.V4FZAAD4.js → chunk.MV77IJ5K.js} +4 -4
- package/cdn/components/combobox/combobox.js +1 -1
- package/cdn/custom-elements.json +1 -1
- package/cdn/solid-components.bundle.js +1 -1
- package/cdn/solid-components.iife.js +1 -1
- package/cdn/solid-components.js +1 -1
- package/cdn/web-types.json +1 -1
- package/cdn-versioned/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.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.V4FZAAD4.js → 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.O7PJIDMP.js +2 -2
- 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.ZBAP3VO3.js +2 -2
- package/cdn-versioned/chunks/chunk.ZDHTVWJF.js +1 -1
- package/cdn-versioned/chunks/chunk.ZVCMF6VL.js +2 -2
- 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/combobox/combobox.js +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-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.JKCYKEO5.js → chunk.DJEWCXYR.js} +4 -0
- package/dist/components/combobox/combobox.js +1 -1
- package/dist/custom-elements.json +1 -1
- package/dist/solid-components.js +1 -1
- package/dist/web-types.json +1 -1
- package/dist-versioned/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.JKCYKEO5.js → chunk.DJEWCXYR.js} +28 -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.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.JQTAMOYF.js +2 -2
- 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.PZQ6H5Y4.js +9 -9
- 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.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/combobox/combobox.js +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-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 +1 -1
- package/dist-versioned/vscode.html-custom-data.json +94 -94
- package/dist-versioned/web-types.json +157 -157
- package/package.json +1 -1
|
@@ -97,7 +97,7 @@ var SdDropdown = class extends SolidElement {
|
|
|
97
97
|
* within the slotted trigger. This could be the slotted element itself, a child of the slotted element,
|
|
98
98
|
* or an element within the slotted elements shadow root.
|
|
99
99
|
*
|
|
100
|
-
* e.g. the accessible trigger of an <sd-6-
|
|
100
|
+
* e.g. the accessible trigger of an <sd-6-9-0-button> is a <button> located inside its shadow root.
|
|
101
101
|
*
|
|
102
102
|
* To determine this, we assume the first tabbable element in the trigger slot is the "accessible trigger."
|
|
103
103
|
* */
|
|
@@ -108,11 +108,11 @@ var SdDropdown = class extends SolidElement {
|
|
|
108
108
|
if (accessibleTrigger) {
|
|
109
109
|
switch (accessibleTrigger.tagName.toLowerCase()) {
|
|
110
110
|
// Solid buttons have to update the internal button so it's announced correctly by screen readers
|
|
111
|
-
case "sd-6-
|
|
112
|
-
case "sd-6-
|
|
111
|
+
case "sd-6-9-0-button":
|
|
112
|
+
case "sd-6-9-0-icon-button":
|
|
113
113
|
target = accessibleTrigger.button;
|
|
114
114
|
break;
|
|
115
|
-
case "sd-6-
|
|
115
|
+
case "sd-6-9-0-navigation-item":
|
|
116
116
|
target = accessibleTrigger.button;
|
|
117
117
|
break;
|
|
118
118
|
default:
|
|
@@ -136,7 +136,7 @@ var SdDropdown = class extends SolidElement {
|
|
|
136
136
|
}
|
|
137
137
|
}
|
|
138
138
|
getMenu() {
|
|
139
|
-
return this.panel.assignedElements({ flatten: true }).find((el) => el.tagName.toLowerCase() === "sd-6-
|
|
139
|
+
return this.panel.assignedElements({ flatten: true }).find((el) => el.tagName.toLowerCase() === "sd-6-9-0-menu");
|
|
140
140
|
}
|
|
141
141
|
handleKeyDown(event) {
|
|
142
142
|
if (this.open && event.key === "Escape") {
|
|
@@ -148,7 +148,7 @@ var SdDropdown = class extends SolidElement {
|
|
|
148
148
|
handleDocumentKeyDown(event) {
|
|
149
149
|
var _a;
|
|
150
150
|
if (event.key === "Tab") {
|
|
151
|
-
if (this.open && ((_a = document.activeElement) == null ? void 0 : _a.tagName.toLowerCase()) === "sd-6-
|
|
151
|
+
if (this.open && ((_a = document.activeElement) == null ? void 0 : _a.tagName.toLowerCase()) === "sd-6-9-0-menu-item") {
|
|
152
152
|
event.preventDefault();
|
|
153
153
|
this.hide();
|
|
154
154
|
this.focusOnTrigger();
|
|
@@ -174,7 +174,7 @@ var SdDropdown = class extends SolidElement {
|
|
|
174
174
|
}
|
|
175
175
|
handlePanelSelect(event) {
|
|
176
176
|
const target = event.target;
|
|
177
|
-
if (!this.stayOpenOnSelect && target.tagName.toLowerCase() === "sd-6-
|
|
177
|
+
if (!this.stayOpenOnSelect && target.tagName.toLowerCase() === "sd-6-9-0-menu") {
|
|
178
178
|
this.hide();
|
|
179
179
|
this.focusOnTrigger();
|
|
180
180
|
}
|
|
@@ -263,7 +263,7 @@ var SdDropdown = class extends SolidElement {
|
|
|
263
263
|
}
|
|
264
264
|
addOpenListeners() {
|
|
265
265
|
this.panel.addEventListener("sd-activate", this.handleMenuItemActivate);
|
|
266
|
-
this.panel.addEventListener("sd-6-
|
|
266
|
+
this.panel.addEventListener("sd-6-9-0-select", this.handlePanelSelect);
|
|
267
267
|
this.panel.addEventListener("keydown", this.handleKeyDown);
|
|
268
268
|
document.addEventListener("keydown", this.handleDocumentKeyDown);
|
|
269
269
|
document.addEventListener("mousedown", this.handleDocumentMouseDown);
|
|
@@ -271,7 +271,7 @@ var SdDropdown = class extends SolidElement {
|
|
|
271
271
|
removeOpenListeners() {
|
|
272
272
|
if (this.panel) {
|
|
273
273
|
this.panel.removeEventListener("sd-activate", this.handleMenuItemActivate);
|
|
274
|
-
this.panel.removeEventListener("sd-6-
|
|
274
|
+
this.panel.removeEventListener("sd-6-9-0-select", this.handlePanelSelect);
|
|
275
275
|
this.panel.removeEventListener("keydown", this.handleKeyDown);
|
|
276
276
|
}
|
|
277
277
|
document.removeEventListener("keydown", this.handleDocumentKeyDown);
|
|
@@ -304,13 +304,13 @@ var SdDropdown = class extends SolidElement {
|
|
|
304
304
|
}
|
|
305
305
|
}
|
|
306
306
|
render() {
|
|
307
|
-
return html`<sd-6-
|
|
307
|
+
return html`<sd-6-9-0-popup part="base" id="dropdown" exportparts="
|
|
308
308
|
popup:base__popup,
|
|
309
309
|
" placement="${this.placement}" distance="${this.rounded && this.distance < 1 ? 1 : this.distance}" skidding="${this.skidding}" strategy="${this.hoist ? "fixed" : "absolute"}" ?flip="${!this.noFlip}" shift auto-size="vertical" auto-size-padding="10"><slot name="trigger" slot="anchor" part="trigger" class="block" @click="${this.handleTriggerClick}" @keydown="${this.handleTriggerKeyDown}" @keyup="${this.handleTriggerKeyUp}" @slotchange="${this.handleTriggerSlotChange}"></slot><slot part="panel" class="${cx(
|
|
310
310
|
"panel-color-border border shadow bg-white block",
|
|
311
311
|
this.open ? "pointer-events-auto" : "pointer-events-none",
|
|
312
312
|
this.rounded && "rounded-md"
|
|
313
|
-
)}" aria-hidden="${this.open ? "false" : "true"}" aria-labelledby="dropdown"></slot></sd-6-
|
|
313
|
+
)}" aria-hidden="${this.open ? "false" : "true"}" aria-labelledby="dropdown"></slot></sd-6-9-0-popup>`;
|
|
314
314
|
}
|
|
315
315
|
};
|
|
316
316
|
SdDropdown.styles = [
|
|
@@ -364,7 +364,7 @@ __decorateClass([
|
|
|
364
364
|
watch("open", { waitUntilFirstUpdate: true })
|
|
365
365
|
], SdDropdown.prototype, "handleOpenChange", 1);
|
|
366
366
|
SdDropdown = __decorateClass([
|
|
367
|
-
customElement("sd-6-
|
|
367
|
+
customElement("sd-6-9-0-dropdown")
|
|
368
368
|
], SdDropdown);
|
|
369
369
|
setDefaultAnimation("dropdown.show", {
|
|
370
370
|
keyframes: [{ opacity: 0 }, { opacity: 1 }],
|
|
@@ -210,21 +210,21 @@ var SdNotification = class extends SolidElement {
|
|
|
210
210
|
warning: "bg-warning",
|
|
211
211
|
error: "bg-error"
|
|
212
212
|
}[this.variant]
|
|
213
|
-
)}"><sd-6-
|
|
213
|
+
)}"><sd-6-9-0-icon name="${{
|
|
214
214
|
info: "info-circle",
|
|
215
215
|
success: "confirm-circle",
|
|
216
216
|
warning: "exclamation-circle",
|
|
217
217
|
error: "warning"
|
|
218
|
-
}[this.variant] || ""}" library="_internal" class="h-6 w-6 text-white"></sd-6-
|
|
218
|
+
}[this.variant] || ""}" library="_internal" class="h-6 w-6 text-white"></sd-6-9-0-icon></slot><div part="content" class="${cx(
|
|
219
219
|
"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-
|
|
220
|
+
"border-solid border-[1px] border-l-0 sd-6-9-0-notification-color-border",
|
|
221
221
|
{
|
|
222
|
-
info: "sd-6-
|
|
223
|
-
success: "sd-6-
|
|
224
|
-
warning: "sd-6-
|
|
225
|
-
error: "sd-6-
|
|
222
|
+
info: "sd-6-9-0-notification--info-color-background",
|
|
223
|
+
success: "sd-6-9-0-notification--success-color-background",
|
|
224
|
+
warning: "sd-6-9-0-notification--warning-color-background",
|
|
225
|
+
error: "sd-6-9-0-notification--error-color-background"
|
|
226
226
|
}[this.variant]
|
|
227
|
-
)}"><slot id="message" part="message" class="block w-full pl-3 py-2"></slot>${this.closable ? html`<sd-6-
|
|
227
|
+
)}"><slot id="message" part="message" class="block w-full pl-3 py-2"></slot>${this.closable ? html`<sd-6-9-0-button size="md" variant="tertiary" part="close-button" class="ml-auto flex flex-[0_0_auto] items-stretch" @click="${this.handleCloseClick}"><sd-6-9-0-icon label="${this.localize.term("close")}" name="close" library="_internal" color="currentColor"></sd-6-9-0-icon></sd-6-9-0-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-0-notification-color-border"></div>` : ""}</div></div>`;
|
|
228
228
|
}
|
|
229
229
|
};
|
|
230
230
|
/**
|
|
@@ -269,7 +269,7 @@ __decorateClass([
|
|
|
269
269
|
watch("duration")
|
|
270
270
|
], SdNotification.prototype, "handleDurationChange", 1);
|
|
271
271
|
SdNotification = __decorateClass([
|
|
272
|
-
customElement("sd-6-
|
|
272
|
+
customElement("sd-6-9-0-notification")
|
|
273
273
|
], SdNotification);
|
|
274
274
|
setDefaultAnimation("notification.show", {
|
|
275
275
|
keyframes: [
|
|
@@ -24,7 +24,7 @@ var SdTab = class extends SolidElement {
|
|
|
24
24
|
constructor() {
|
|
25
25
|
super(...arguments);
|
|
26
26
|
this.attrId = ++id;
|
|
27
|
-
this.componentId = `sd-6-
|
|
27
|
+
this.componentId = `sd-6-9-0-tab-${this.attrId}`;
|
|
28
28
|
this.hasSlotController = new HasSlotController(this, "left");
|
|
29
29
|
this.localize = new LocalizeController(this);
|
|
30
30
|
this.variant = "default";
|
|
@@ -73,7 +73,7 @@ var SdTab = class extends SolidElement {
|
|
|
73
73
|
)}"></slot><slot class="${cx(this.disabled || this.visuallyDisabled ? "text-neutral-500" : "text-primary")}"></slot>${this.variant === "container" ? html`<div part="active-tab-indicator" class="${cx(
|
|
74
74
|
"absolute bottom-0 h-1 bg-accent w-3/4 bottom-0 group-hover:w-[calc(100%-2px)] navigable__current-indicator-height navigable__current-indicator-border-radius"
|
|
75
75
|
)}"></div>` : ""}<div part="hover-bottom-border" class="${cx(
|
|
76
|
-
!this.active && !this.disabled && "absolute bottom-0 left-0 w-full h-0.25 border-b sd-6-
|
|
76
|
+
!this.active && !this.disabled && "absolute bottom-0 left-0 w-full h-0.25 border-b sd-6-9-0-tab-color-border"
|
|
77
77
|
)}"></div></div></div>`;
|
|
78
78
|
}
|
|
79
79
|
};
|
|
@@ -110,7 +110,7 @@ __decorateClass([
|
|
|
110
110
|
watch(["disabled", "visually-disabled"])
|
|
111
111
|
], SdTab.prototype, "handleDisabledChange", 1);
|
|
112
112
|
SdTab = __decorateClass([
|
|
113
|
-
customElement("sd-6-
|
|
113
|
+
customElement("sd-6-9-0-tab")
|
|
114
114
|
], SdTab);
|
|
115
115
|
|
|
116
116
|
export {
|
|
@@ -64,11 +64,11 @@ var SdTag = class extends SolidElement {
|
|
|
64
64
|
const tag = isLink ? literal`a` : isRemovable ? literal`div` : literal`button`;
|
|
65
65
|
return html`<${tag} part="base" type="${ifDefined(isLink ? void 0 : "button")}" href="${ifDefined(isLink ? this.href : void 0)}" rel="${ifDefined(isLink && this.target ? "noreferrer noopener" : void 0)}" target="${ifDefined(isLink ? this.target : void 0)}" download="${ifDefined(isLink ? this.download : void 0)}" ?disabled="${ifDefined(isLink ? void 0 : this.disabled)}" aria-labelledby="content" aria-disabled="${this.disabled ? "true" : "false"}" aria-pressed="${ifDefined(this.toggleable ? this.selected : void 0)}" tabindex="${this.disabled || isRemovable ? "-1" : "0"}" @blur="${this.handleBlur}" @focus="${this.handleFocus}" class="${cx(
|
|
66
66
|
/* basic styles of the wrapper */
|
|
67
|
-
"flex border box-border sd-6-
|
|
67
|
+
"flex border box-border sd-6-9-0-tag-border-radius items-center leading-none whitespace-nowrap transition-colors duration-fast ease-in-out focus-visible:focus-outline",
|
|
68
68
|
{
|
|
69
69
|
/* sizes, fonts */
|
|
70
|
-
lg: "h-8 sd-6-
|
|
71
|
-
sm: "h-6 sd-6-
|
|
70
|
+
lg: "h-8 sd-6-9-0-tag-font-weight sd-6-9-0-tag--size-lg-font-size gap-2",
|
|
71
|
+
sm: "h-6 sd-6-9-0-tag-font-weight sd-6-9-0-tag--size-sm-font-size gap-1"
|
|
72
72
|
}[this.size],
|
|
73
73
|
{
|
|
74
74
|
/* padding */
|
|
@@ -77,11 +77,11 @@ var SdTag = class extends SolidElement {
|
|
|
77
77
|
}[this.size],
|
|
78
78
|
/* colors */
|
|
79
79
|
!this.selected ? cx(
|
|
80
|
-
"sd-6-
|
|
81
|
-
!isRemovable ? "sd-6-
|
|
82
|
-
) : "sd-6-
|
|
80
|
+
"sd-6-9-0-tag--default-color-border sd-6-9-0-tag--default-color-text disabled:sd-6-9-0-tag--disabled-color-border disabled:text-neutral-500",
|
|
81
|
+
!isRemovable ? "sd-6-9-0-tag--default-color-background hover:border-primary-500 hover:text-primary-500 hover:sd-6-9-0-tag--default--hover-color-background" : "sd-6-9-0-tag--default-color-background has-[button:hover]:border-primary-500 has-[button:hover]:text-primary-500"
|
|
82
|
+
) : "sd-6-9-0-tag--selected-border-width sd-6-9-0-tag--selected--default-color-background sd-6-9-0-tag--selected--default-color-border sd-6-9-0-tag--selected--default-color-text hover:sd-6-9-0-tag--selected--hover-color-background hover:sd-6-9-0-tag--selected--hover-color-border hover:sd-6-9-0-tag--selected--hover-color-text disabled:bg-neutral-500 disabled:sd-6-9-0-tag--disabled-color-border",
|
|
83
83
|
this.disabled && !isLink && "cursor-not-allowed"
|
|
84
|
-
)}"><slot name="icon-left" class="${cx("flex-shrink-0", this.size === "lg" ? "text-base" : "text-[0.75rem]")}"></slot><slot id="content" part="content"></slot>${isRemovable && !isLink ? html`<button class="sd-interactive flex items-center" type="button" @click="${this.handleRemove}"><slot part="removable-indicator" name="removable-indicator"><sd-6-
|
|
84
|
+
)}"><slot name="icon-left" class="${cx("flex-shrink-0", this.size === "lg" ? "text-base" : "text-[0.75rem]")}"></slot><slot id="content" part="content"></slot>${isRemovable && !isLink ? html`<button class="sd-interactive flex items-center" type="button" @click="${this.handleRemove}"><slot part="removable-indicator" name="removable-indicator"><sd-6-9-0-icon library="_internal" name="close" label="${this.localize.term("remove")}"></sd-6-9-0-icon></slot></button>` : ""}</${tag}>`;
|
|
85
85
|
}
|
|
86
86
|
};
|
|
87
87
|
SdTag.styles = [
|
|
@@ -117,7 +117,7 @@ __decorateClass([
|
|
|
117
117
|
property({ reflect: true })
|
|
118
118
|
], SdTag.prototype, "download", 2);
|
|
119
119
|
SdTag = __decorateClass([
|
|
120
|
-
customElement("sd-6-
|
|
120
|
+
customElement("sd-6-9-0-tag")
|
|
121
121
|
], SdTag);
|
|
122
122
|
|
|
123
123
|
export {
|
|
@@ -31,12 +31,12 @@ var SdQuickfact = class extends SdAccordion {
|
|
|
31
31
|
this.expandable && "cursor-pointer select-none"
|
|
32
32
|
)}" role="${ifDefined(this.expandable ? "button" : void 0)}" aria-expanded="${ifDefined(this.expandable ? this.open ? "true" : "false" : void 0)}" aria-controls="${ifDefined(this.expandable ? "content" : void 0)}" tabindex="${this.expandable ? "0" : "-1"}" @click="${this.expandable ? this.handleSummaryClick : null}" @keydown="${this.expandable ? this.handleSummaryKeyDown : null}"><div part="icon" class="${cx("flex flex-grow-0 flex-shrink-0 flex-auto items-center", !this.expandable && "cursor-default")}"><slot name="icon"></slot></div><slot name="summary" part="summary" class="${cx(
|
|
33
33
|
"flex flex-auto items-start text-left text-base leading-normal font-normal sm:leading-tight sm:text-3xl sm:text-center",
|
|
34
|
-
this.expandable ? "sd-6-
|
|
34
|
+
this.expandable ? "sd-6-9-0-quickfact--expandable-color-text" : "text-black cursor-default"
|
|
35
35
|
)}">${this.summary}</slot><span part="summary-icon" class="${cx(
|
|
36
36
|
"flex flex-grow-0 flex-shrink-0 flex-auto self-start sm:self-center transition-transform ease-in-out duration-medium text-xl sm:mt-2",
|
|
37
37
|
this.open && "rotate-180",
|
|
38
38
|
!this.expandable && "hidden"
|
|
39
|
-
)}"><slot name="expand-icon" class="${cx(this.open && "hidden")}"><sd-6-
|
|
39
|
+
)}"><slot name="expand-icon" class="${cx(this.open && "hidden")}"><sd-6-9-0-icon library="_internal" name="chevron-down" class="group-hover:text-primary-500 transition-colors ease-in-out duration-medium"></sd-6-9-0-icon></slot><slot name="collapse-icon" class="${cx(!this.open && "hidden")}"><sd-6-9-0-icon library="_internal" name="chevron-down" class="group-hover:text-primary-500 transition-colors ease-in-out duration-medium"></sd-6-9-0-icon></slot></span></${header}><div part="content" id="content" class="${cx("overflow-hidden", !this.expandable && "hidden")}"><slot part="content__slot" class="block" role="region" aria-labelledby="header"></slot></div></${base}>`;
|
|
40
40
|
}
|
|
41
41
|
};
|
|
42
42
|
SdQuickfact.styles = [
|
|
@@ -48,7 +48,7 @@ __decorateClass([
|
|
|
48
48
|
property({ type: Boolean, reflect: true })
|
|
49
49
|
], SdQuickfact.prototype, "expandable", 2);
|
|
50
50
|
SdQuickfact = __decorateClass([
|
|
51
|
-
customElement("sd-6-
|
|
51
|
+
customElement("sd-6-9-0-quickfact")
|
|
52
52
|
], SdQuickfact);
|
|
53
53
|
setDefaultAnimation("quickfact.show", {
|
|
54
54
|
keyframes: [{ height: "0" }, { height: "auto" }],
|
|
@@ -26,7 +26,7 @@ var SdCheckboxGroup = class extends SolidElement {
|
|
|
26
26
|
this.helpText = "";
|
|
27
27
|
}
|
|
28
28
|
getAllCheckboxes() {
|
|
29
|
-
return [...this.querySelectorAll("sd-6-
|
|
29
|
+
return [...this.querySelectorAll("sd-6-9-0-checkbox")];
|
|
30
30
|
}
|
|
31
31
|
async syncCheckboxElements() {
|
|
32
32
|
const checkboxes = this.getAllCheckboxes();
|
|
@@ -39,10 +39,10 @@ var SdCheckboxGroup = class extends SolidElement {
|
|
|
39
39
|
);
|
|
40
40
|
}
|
|
41
41
|
syncCheckboxes() {
|
|
42
|
-
if (customElements.get("sd-6-
|
|
42
|
+
if (customElements.get("sd-6-9-0-checkbox")) {
|
|
43
43
|
this.syncCheckboxElements();
|
|
44
44
|
} else {
|
|
45
|
-
customElements.whenDefined("sd-6-
|
|
45
|
+
customElements.whenDefined("sd-6-9-0-checkbox").then(() => this.syncCheckboxes());
|
|
46
46
|
}
|
|
47
47
|
}
|
|
48
48
|
handleSizeChange() {
|
|
@@ -80,7 +80,7 @@ var SdCheckboxGroup = class extends SolidElement {
|
|
|
80
80
|
SdCheckboxGroup.styles = [
|
|
81
81
|
...SolidElement.styles,
|
|
82
82
|
css`/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
|
|
83
|
-
:host{display:block}:host([orientation=vertical]) ::slotted(sd-6-
|
|
83
|
+
:host{display:block}:host([orientation=vertical]) ::slotted(sd-6-9-0-checkbox){margin-bottom:var(--sd-spacing-2);display:flex}:host([orientation=vertical]) ::slotted(sd-6-9-0-checkbox:last-of-type){margin-bottom:calc(var(--sd-spacing-1) * 0)}:host([orientation=horizontal]) ::slotted(sd-6-9-0-checkbox){margin-right:var(--sd-spacing-6)}:host([orientation=horizontal]) ::slotted(sd-6-9-0-checkbox:last-of-type){margin-right:calc(var(--sd-spacing-1) * 0)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-6-9-0-checkbox){margin-right:var(--sd-spacing-4)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-6-9-0-checkbox:last-of-type){margin-right:calc(var(--sd-spacing-1) * 0)}`
|
|
84
84
|
];
|
|
85
85
|
__decorateClass([
|
|
86
86
|
property({ type: String, reflect: true })
|
|
@@ -101,7 +101,7 @@ __decorateClass([
|
|
|
101
101
|
watch("invalid", { waitUntilFirstUpdate: true })
|
|
102
102
|
], SdCheckboxGroup.prototype, "handleInvalid", 1);
|
|
103
103
|
SdCheckboxGroup = __decorateClass([
|
|
104
|
-
customElement("sd-6-
|
|
104
|
+
customElement("sd-6-9-0-checkbox-group")
|
|
105
105
|
], SdCheckboxGroup);
|
|
106
106
|
|
|
107
107
|
export {
|
|
@@ -118,7 +118,7 @@ var SdCheckbox = class extends SolidElement {
|
|
|
118
118
|
render() {
|
|
119
119
|
const checkboxState = this.disabled && this.indeterminate ? "disabledIndeterminate" : this.disabled && this.checked ? "disabledChecked" : this.disabled ? "disabled" : this.visuallyDisabled ? "visuallyDisabled" : this.showInvalidStyle && this.indeterminate ? "invalidIndeterminate" : this.showInvalidStyle ? "invalid" : this.checked || this.indeterminate ? "filled" : "default";
|
|
120
120
|
return html`<div class="flex flex-col"><label part="base" class="${cx(
|
|
121
|
-
"sd-6-
|
|
121
|
+
"sd-6-9-0-checkbox group flex items-start text-base leading-normal text-black cursor-pointer",
|
|
122
122
|
(this.disabled || this.visuallyDisabled) && "hover:cursor-not-allowed",
|
|
123
123
|
{
|
|
124
124
|
/* sizes, fonts */
|
|
@@ -127,7 +127,7 @@ var SdCheckbox = class extends SolidElement {
|
|
|
127
127
|
lg: "text-base"
|
|
128
128
|
}[this.size]
|
|
129
129
|
)}"><input class="peer absolute opacity-0 p-0 m-0 pointer-events-none" type="checkbox" title="${this.title}" name="${this.name}" value="${ifDefined(this.value)}" .indeterminate="${live(this.indeterminate)}" .checked="${live(this.checked)}" .disabled="${this.disabled}" .required="${this.required}" aria-checked="${this.indeterminate ? "mixed" : this.checked}" aria-describedby="invalid-message" aria-invalid="${this.showInvalidStyle}" aria-disabled="${this.disabled || this.visuallyDisabled ? "true" : "false"}" @click="${this.handleClick}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @blur="${this.handleBlur}" @focus="${this.handleFocus}"> <span id="control" part="control ${this.checked ? " control--checked" : "control--unchecked"} ${this.indeterminate ? " control--indeterminate" : ""}" class="${cx(
|
|
130
|
-
"relative flex flex-shrink-0 items-center justify-center border sd-6-
|
|
130
|
+
"relative flex flex-shrink-0 items-center justify-center border sd-6-9-0-checkbox-border-width rounded-sm h-4 w-4",
|
|
131
131
|
"transition-colors ease-in-out duration-medium group-hover:duration-fast",
|
|
132
132
|
"peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-primary",
|
|
133
133
|
{
|
|
@@ -160,10 +160,10 @@ var SdCheckbox = class extends SolidElement {
|
|
|
160
160
|
filled: "bg-accent group-hover:bg-accent-550",
|
|
161
161
|
default: "hover:bg-neutral-200 group-hover:bg-neutral-200 bg-white"
|
|
162
162
|
}[checkboxState]
|
|
163
|
-
)}"></div></div>${this.checked ? html`<sd-6-
|
|
163
|
+
)}"></div></div>${this.checked ? html`<sd-6-9-0-icon part="checked-icon" class="text-white w-3 h-3" library="sd-status-assets" name="status-check"></sd-6-9-0-icon>` : ""} ${!this.checked && this.indeterminate ? html`<sd-6-9-0-icon part="indeterminate-icon" class="text-white w-3 h-3" library="sd-status-assets" name="status-minus"></sd-6-9-0-icon>` : ""} </span><span part="label" id="label" class="${cx(
|
|
164
164
|
"select-none inline-block ml-2",
|
|
165
165
|
this.disabled || this.visuallyDisabled ? "text-neutral-500" : this.showInvalidStyle ? "text-error" : "text-black"
|
|
166
|
-
)}"><slot></slot></span></label><div id="invalid-icon-message" part="invalid-icon-message" class="${cx("flex items-center gap-2", this.showInvalidStyle && "mt-2")}">${this.showInvalidStyle ? html`<sd-6-
|
|
166
|
+
)}"><slot></slot></span></label><div id="invalid-icon-message" part="invalid-icon-message" class="${cx("flex items-center gap-2", this.showInvalidStyle && "mt-2")}">${this.showInvalidStyle ? html`<sd-6-9-0-icon id="invalid-icon" part="invalid-icon" class="${cx("text-error")}" library="_internal" name="risk"></sd-6-9-0-icon>` : ""} ${this.formControlController.renderInvalidMessage(this.size)}</div></div>`;
|
|
167
167
|
}
|
|
168
168
|
};
|
|
169
169
|
/**
|
|
@@ -223,7 +223,7 @@ __decorateClass([
|
|
|
223
223
|
watch(["checked", "indeterminate"], { waitUntilFirstUpdate: true })
|
|
224
224
|
], SdCheckbox.prototype, "handleStateChange", 1);
|
|
225
225
|
SdCheckbox = __decorateClass([
|
|
226
|
-
customElement("sd-6-
|
|
226
|
+
customElement("sd-6-9-0-checkbox")
|
|
227
227
|
], SdCheckbox);
|
|
228
228
|
|
|
229
229
|
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-9-0-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-9-0-range-tick")
|
|
36
36
|
], SdRangeTick);
|
|
37
37
|
|
|
38
38
|
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-9-0-popup")) == null ? void 0 : _b.setAttribute("distance", "14");
|
|
88
88
|
});
|
|
89
89
|
}
|
|
90
90
|
willUpdate(changedProperties) {
|
|
@@ -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-9-0-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-9-0-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-9-0-range")
|
|
522
522
|
], SdRange);
|
|
523
523
|
|
|
524
524
|
export {
|
|
@@ -60,7 +60,7 @@ var SdCarousel = class extends SolidElement {
|
|
|
60
60
|
this.pausedAutoplay = false;
|
|
61
61
|
this.autoplayController = new AutoplayController(this, () => this.next());
|
|
62
62
|
this.scrollController = new ScrollController(this);
|
|
63
|
-
this.slides = this.getElementsByTagName("sd-6-
|
|
63
|
+
this.slides = this.getElementsByTagName("sd-6-9-0-carousel-item");
|
|
64
64
|
// determines which slide is displayed
|
|
65
65
|
// A map containing the state of all the slides
|
|
66
66
|
this.intersectionObserverEntries = /* @__PURE__ */ new Map();
|
|
@@ -449,7 +449,7 @@ var SdCarousel = class extends SolidElement {
|
|
|
449
449
|
)}" aria-label="${this.localize.term("previousSlide")}" aria-controls="scroll-container" aria-disabled="${prevEnabled ? "false" : "true"}" @focus="${this.handleFocus}" @blur="${this.handleBlur}" @click="${prevEnabled ? (e) => {
|
|
450
450
|
this.previous();
|
|
451
451
|
this.unblockAutoplay(e, this.previousButton);
|
|
452
|
-
} : null}"><slot name="previous-icon"><sd-6-
|
|
452
|
+
} : null}"><slot name="previous-icon"><sd-6-9-0-icon class="${cx("h-6 w-6 rotate-90 grid place-items-center")}" library="_internal" name="${isLtr ? "chevron-down" : "chevron-up"}"></sd-6-9-0-icon></slot></button> ${this.variant === "dot" ? html`<div part="pagination-dot" role="tablist" class="${cx("carousel__pagination dot flex wrap items-center gap-2")}" aria-controls="scroll-container">${map(range(pagesCount), (index) => {
|
|
453
453
|
const isActive = index + 1 === currentPage;
|
|
454
454
|
return html`<button part="pagination-item ${isActive ? "pagination-item--active" : ""}" class="${cx(
|
|
455
455
|
"carousel__pagination-item",
|
|
@@ -460,14 +460,14 @@ var SdCarousel = class extends SolidElement {
|
|
|
460
460
|
this.goToSlide(index * slidesPerMove);
|
|
461
461
|
this.unblockAutoplay(e, this.paginationItems[index]);
|
|
462
462
|
}}" @keydown="${this.handleKeyDown}"><span class="${cx(
|
|
463
|
-
"h-4 w-4 block border sd-6-
|
|
464
|
-
this.inverted ? "sd-6-
|
|
463
|
+
"h-4 w-4 block border sd-6-9-0-carousel__pager-dot-border-width rounded-full transition-colors duration-slow hover:duration-fast ease-in-out",
|
|
464
|
+
this.inverted ? "sd-6-9-0-carousel__pager-dot--inverted-border hover:border-primary-200" : "border-primary hover:border-primary-500",
|
|
465
465
|
isActive && "border-none",
|
|
466
|
-
isActive ? this.inverted ? "sd-6-
|
|
466
|
+
isActive ? this.inverted ? "sd-6-9-0-carousel__pager-dot--inverted-background hover:sd-6-9-0-carousel__pager-dot--inverted--hovered-background" : "sd-6-9-0-carousel__pager-dot-background hover:bg-accent-550" : ""
|
|
467
467
|
)}"></span></button>`;
|
|
468
468
|
})}</div>` : html`<span part="pagination-number" class="carousel__pagination number flex gap-0.5 cursor-default select-none" aria-controls="scroll-container"><span part="pagination-item" class="${cx(
|
|
469
469
|
"w-5 text-center border-b-2",
|
|
470
|
-
this.inverted ? "text-white sd-6-
|
|
470
|
+
this.inverted ? "text-white sd-6-9-0-carousel--active--inverted-color-border" : "text-black sd-6-9-0-carousel--active-color-border"
|
|
471
471
|
)}">${currentPage}</span> <span part="pagination-divider" class="${cx("scale-y-[1.5]", "text-center", this.inverted ? "text-white" : "text-black")}">/</span> <span part="pagination-item" class="${cx("w-5 text-center", this.inverted ? "text-white" : "text-black")}">${pagesCount}</span></span>`} <button part="navigation-button navigation-button--next" id="carousel__navigation-button--next" ?disabled="${!nextEnabled ? true : false}" class="${cx(
|
|
472
472
|
"!ml-6 !rounded-sm sd-interactive transition-colors duration-fast ease-in-out",
|
|
473
473
|
!nextEnabled && "sd-interactive--disabled",
|
|
@@ -475,7 +475,7 @@ var SdCarousel = class extends SolidElement {
|
|
|
475
475
|
)}" aria-label="${this.localize.term("nextSlide")}" aria-controls="scroll-container" aria-disabled="${nextEnabled ? "false" : "true"}" @focus="${this.handleFocus}" @blur="${this.handleBlur}" @click="${nextEnabled ? (e) => {
|
|
476
476
|
this.next();
|
|
477
477
|
this.unblockAutoplay(e, this.nextButton);
|
|
478
|
-
} : null}"><slot name="next-icon"><sd-6-
|
|
478
|
+
} : null}"><slot name="next-icon"><sd-6-9-0-icon class="${cx("h-6 w-6 rotate-90 grid place-items-center")}" library="_internal" name="${isLtr ? "chevron-up" : "chevron-down"}"></sd-6-9-0-icon></slot></button></div><button class="${cx(
|
|
479
479
|
"ml-6 !rounded-sm",
|
|
480
480
|
"!absolute !right-0 sd-interactive",
|
|
481
481
|
this.inverted ? "sd-interactive--inverted" : "sd-interactive--reset",
|
|
@@ -485,13 +485,13 @@ var SdCarousel = class extends SolidElement {
|
|
|
485
485
|
if (e.detail) {
|
|
486
486
|
this.autoplayControls.blur();
|
|
487
487
|
}
|
|
488
|
-
}}"><slot name="autoplay-start" class="${cx(!this.pausedAutoplay ? "hidden" : "")}"><sd-6-
|
|
488
|
+
}}"><slot name="autoplay-start" class="${cx(!this.pausedAutoplay ? "hidden" : "")}"><sd-6-9-0-icon class="h-6 w-6 grid place-items-center" library="_internal" name="start"></sd-6-9-0-icon></slot><slot name="autoplay-pause" class="${cx(this.pausedAutoplay ? "hidden" : "")}"><sd-6-9-0-icon class="h-6 w-6 grid place-items-center" library="_internal" name="pause"></sd-6-9-0-icon></slot></button></div></div>`;
|
|
489
489
|
}
|
|
490
490
|
};
|
|
491
491
|
SdCarousel.styles = [
|
|
492
492
|
...SolidElement.styles,
|
|
493
493
|
css`/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
|
|
494
|
-
:host{--slide-gap:var(--sl-spacing-medium, 1rem);--scroll-hint:0px;display:flex}.carousel{grid-template-areas:'. slides .' '. pagination .'}.carousel__pagination{grid-area:pagination}.carousel__slides{grid-area:slides;scrollbar-width:none;--slide-size:calc((100% - (var(--slides-per-page) - 1) * var(--slide-gap)) / var(--slides-per-page));grid-auto-columns:var(--slide-size);-moz-column-gap:var(--slide-gap);column-gap:var(--slide-gap);scroll-padding-inline:var(--scroll-hint);padding-inline:var(--scroll-hint)}.carousel__slides::-webkit-scrollbar{display:none}:host([fade]){--carousel-height:auto}:host([fade]) .carousel__slides{position:relative;display:block;overflow:hidden;height:var(--carousel-height)}@media (prefers-reduced-motion){:where(.carousel__slides){scroll-behavior:auto}}.carousel__navigation{grid-area:navigation}sd-6-
|
|
494
|
+
:host{--slide-gap:var(--sl-spacing-medium, 1rem);--scroll-hint:0px;display:flex}.carousel{grid-template-areas:'. slides .' '. pagination .'}.carousel__pagination{grid-area:pagination}.carousel__slides{grid-area:slides;scrollbar-width:none;--slide-size:calc((100% - (var(--slides-per-page) - 1) * var(--slide-gap)) / var(--slides-per-page));grid-auto-columns:var(--slide-size);-moz-column-gap:var(--slide-gap);column-gap:var(--slide-gap);scroll-padding-inline:var(--scroll-hint);padding-inline:var(--scroll-hint)}.carousel__slides::-webkit-scrollbar{display:none}:host([fade]){--carousel-height:auto}:host([fade]) .carousel__slides{position:relative;display:block;overflow:hidden;height:var(--carousel-height)}@media (prefers-reduced-motion){:where(.carousel__slides){scroll-behavior:auto}}.carousel__navigation{grid-area:navigation}sd-6-9-0-button::part(label){pointer-events:none;display:flex;flex:auto;align-items:center}#carousel__navigation-button--next,#carousel__navigation-button--previous{color:rgba(var(--sd-color-icon-fill-primary))}#carousel__navigation-button--next:disabled,#carousel__navigation-button--previous:disabled{color:rgba(var(--sd-color-icon-fill-neutral-500))}:host([inverted]) #carousel__navigation-button--next,:host([inverted]) #carousel__navigation-button--previous{color:rgba(var(--sd-color-icon-fill-white))}:host([inverted]) #carousel__navigation-button--next:disabled,:host([inverted]) #carousel__navigation-button--previous:disabled{color:rgba(var(--sd-color-icon-fill-neutral-600))}`
|
|
495
495
|
];
|
|
496
496
|
__decorateClass([
|
|
497
497
|
query('[part~="autoplay-controls"]')
|
|
@@ -564,7 +564,7 @@ __decorateClass([
|
|
|
564
564
|
watch("autoplay")
|
|
565
565
|
], SdCarousel.prototype, "handleAutoplayChange", 1);
|
|
566
566
|
SdCarousel = __decorateClass([
|
|
567
|
-
customElement("sd-6-
|
|
567
|
+
customElement("sd-6-9-0-carousel")
|
|
568
568
|
], SdCarousel);
|
|
569
569
|
|
|
570
570
|
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-9-0-option" ? item : Array.from(item.querySelectorAll(":scope > sd-6-9-0-option"));
|
|
4
|
+
var isOptgroup = (item) => item.tagName.toLocaleLowerCase() === "sd-6-9-0-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-
|
|
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-0-switch--checked--hover-color-background bg-accent hover:border-accent-550 group-hover:sd-6-9-0-switch--checked--hover-color-background" : "sd-6-9-0-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-
|
|
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-0-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-
|
|
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-
|
|
124
|
+
this.disabled ? "text-neutral-500" : this.showInvalidStyle ? "text-error" : "sd-6-9-0-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-0-icon part="invalid-icon" class="${cx("text-error")}" library="_internal" name="risk"></sd-6-9-0-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-
|
|
176
|
+
customElement("sd-6-9-0-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-
|
|
74
|
+
"sd-6-9-0-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-
|
|
83
|
+
"flex-initial shrink-0 relative inline-flex items-center justify-center border sd-6-9-0-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-
|
|
87
|
-
) : this.checked ? "sd-6-
|
|
86
|
+
this.checked ? "sd-6-9-0-radio--checked--invalid--default-color-background" : "sd-6-9-0-radio--default--invalid-color-background"
|
|
87
|
+
) : this.checked ? "sd-6-9-0-radio--checked--default-color-background hover:sd-6-9-0-radio--checked--hover-color-background group-hover:sd-6-9-0-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-
|
|
89
|
+
"rounded-full inline-flex text-white sd-6-9-0-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-
|
|
91
|
+
this.disabled ? "bg-neutral-500" : this.visuallyDisabled ? "bg-white" : this.invalid ? "sd-6-9-0-radio--checked--invalid--default__icon-color-background hover:sd-6-9-0-radio--checked--invalid--hover__icon-color-background group-hover:sd-6-9-0-radio--checked--invalid--hover__icon-color-background" : this.checked ? "sd-6-9-0-radio--checked--default__icon-color-background hover:sd-6-9-0-radio--checked--hover__icon-color-background group-hover:sd-6-9-0-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-
|
|
134
|
+
customElement("sd-6-9-0-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-
|
|
91
|
+
"border sd-6-9-0-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-
|
|
108
|
+
)}">${!this.disabled && !this.current && !this.notInteractive && !this.waiting ? html`<sd-6-9-0-icon name="status-check" library="_internal" class="${cx(this.size === "sm" && "text-sm")}"></sd-6-9-0-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-
|
|
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-0-icon,slot[name=circle-content]::slotted(sd-6-9-0-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-
|
|
199
|
+
customElement("sd-6-9-0-step")
|
|
200
200
|
], SdStep);
|
|
201
201
|
|
|
202
202
|
export {
|