@solid-design-system/components 7.0.3 → 7.1.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.PEHSUZ2L.js +2 -0
- package/cdn/components/datepicker/datepicker.d.ts +4 -0
- package/cdn/components/datepicker/datepicker.js +1 -1
- package/cdn/custom-elements.json +33 -1
- package/cdn/solid-components.bundle.js +2 -2
- package/cdn/solid-components.iife.js +2 -2
- package/cdn/solid-components.js +1 -1
- package/cdn/vscode.html-custom-data.json +6 -1
- package/cdn/web-types.json +24 -2
- package/cdn-versioned/chunks/chunk.2C3UQTSS.js +2 -2
- package/cdn-versioned/chunks/chunk.2O3FM7UB.js +2 -2
- package/cdn-versioned/chunks/chunk.35XPUMS2.js +1 -1
- package/cdn-versioned/chunks/chunk.37JCS2XH.js +5 -5
- package/cdn-versioned/chunks/chunk.3IZUMERL.js +2 -2
- package/cdn-versioned/chunks/chunk.3RIAU3TH.js +3 -3
- package/cdn-versioned/chunks/chunk.4GA43M6X.js +2 -2
- package/cdn-versioned/chunks/chunk.4QTJXGRR.js +2 -2
- package/cdn-versioned/chunks/chunk.ADVB3FPU.js +2 -2
- package/cdn-versioned/chunks/chunk.AJGTKHU5.js +2 -2
- package/cdn-versioned/chunks/chunk.C37LGAL3.js +2 -2
- package/cdn-versioned/chunks/chunk.CGMKBGJU.js +2 -2
- package/cdn-versioned/chunks/chunk.CQNFI34K.js +2 -2
- package/cdn-versioned/chunks/chunk.DCAJAXUP.js +2 -2
- package/cdn-versioned/chunks/chunk.DS2MKMMN.js +3 -3
- package/cdn-versioned/chunks/chunk.DSKB3SEU.js +1 -1
- package/cdn-versioned/chunks/chunk.GA3PWYR4.js +2 -2
- package/cdn-versioned/chunks/chunk.HNBY226D.js +1 -1
- package/cdn-versioned/chunks/chunk.HY624TPC.js +2 -2
- package/cdn-versioned/chunks/chunk.I7OVY27Y.js +10 -10
- package/cdn-versioned/chunks/chunk.IFLRUJCI.js +2 -2
- package/cdn-versioned/chunks/chunk.IQBZ7GRB.js +2 -2
- package/cdn-versioned/chunks/chunk.J45556RK.js +1 -1
- package/cdn-versioned/chunks/chunk.JMX6KLDZ.js +2 -2
- package/cdn-versioned/chunks/chunk.JQV2BZ2E.js +2 -2
- package/cdn-versioned/chunks/chunk.KE2YEQDL.js +2 -2
- package/cdn-versioned/chunks/chunk.LZRL7OLU.js +1 -1
- package/cdn-versioned/chunks/chunk.MR54F6CV.js +2 -2
- package/cdn-versioned/chunks/chunk.MYPRMCUO.js +1 -1
- package/cdn-versioned/chunks/chunk.N4L76IWF.js +1 -1
- package/cdn-versioned/chunks/chunk.NGU7NO3O.js +5 -5
- package/cdn-versioned/chunks/chunk.NJKSWXOS.js +2 -2
- package/cdn-versioned/chunks/chunk.NOP4DTP2.js +2 -2
- package/cdn-versioned/chunks/chunk.OOIX4OAP.js +2 -2
- package/cdn-versioned/chunks/chunk.P7GMFHO5.js +1 -1
- package/cdn-versioned/chunks/chunk.PCXVXYU2.js +2 -2
- package/cdn-versioned/chunks/chunk.PEHSUZ2L.js +2 -0
- package/cdn-versioned/chunks/chunk.PFPUD5HR.js +2 -2
- package/cdn-versioned/chunks/chunk.PKCNX4R2.js +2 -2
- package/cdn-versioned/chunks/chunk.PQW77KHE.js +2 -2
- package/cdn-versioned/chunks/chunk.PURR56D5.js +2 -2
- package/cdn-versioned/chunks/chunk.Q63S2Z2M.js +2 -2
- package/cdn-versioned/chunks/chunk.QK3WCIP5.js +2 -2
- package/cdn-versioned/chunks/chunk.RHC6WZ6V.js +2 -2
- package/cdn-versioned/chunks/chunk.RRJCCIDH.js +1 -1
- package/cdn-versioned/chunks/chunk.SPL6VR5S.js +2 -2
- package/cdn-versioned/chunks/chunk.SSE7T5OF.js +2 -2
- package/cdn-versioned/chunks/chunk.SZNU4NHI.js +1 -1
- package/cdn-versioned/chunks/chunk.T7I5MFNS.js +2 -2
- package/cdn-versioned/chunks/chunk.TIMZJKMF.js +2 -2
- package/cdn-versioned/chunks/chunk.TX5WPWH2.js +2 -2
- package/cdn-versioned/chunks/chunk.UI3ZVKSU.js +2 -2
- package/cdn-versioned/chunks/chunk.V6IM4GAA.js +2 -2
- package/cdn-versioned/chunks/chunk.VPBXFCBA.js +2 -2
- package/cdn-versioned/chunks/chunk.VSX5LY2D.js +2 -2
- package/cdn-versioned/chunks/chunk.W7A3TU2Z.js +1 -1
- package/cdn-versioned/chunks/chunk.WL6NNNG5.js +2 -2
- package/cdn-versioned/chunks/chunk.WQZWYMH3.js +1 -1
- package/cdn-versioned/chunks/chunk.WUXX2P2S.js +2 -2
- package/cdn-versioned/chunks/chunk.XGVG7F7T.js +2 -2
- package/cdn-versioned/chunks/chunk.XHYIXZF4.js +2 -2
- package/cdn-versioned/chunks/chunk.XZ5JTM6K.js +2 -2
- package/cdn-versioned/chunks/chunk.Y4ZS3BWH.js +2 -2
- package/cdn-versioned/chunks/chunk.YUDSN6HJ.js +3 -3
- package/cdn-versioned/chunks/chunk.Z2M7BQV5.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/datepicker/datepicker.d.ts +5 -1
- package/cdn-versioned/components/datepicker/datepicker.js +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/file-selector/file-selector.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/progress-bar/progress-bar.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/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 +298 -266
- package/cdn-versioned/internal/form.js +2 -2
- package/cdn-versioned/solid-components.bundle.js +81 -81
- package/cdn-versioned/solid-components.css +3 -3
- package/cdn-versioned/solid-components.iife.js +81 -81
- package/cdn-versioned/solid-components.js +1 -1
- package/cdn-versioned/vscode.html-custom-data.json +120 -115
- package/cdn-versioned/web-types.json +195 -173
- package/dist/chunks/{chunk.UDTZN5OG.js → chunk.RRSERGVO.js} +37 -2
- package/dist/components/datepicker/datepicker.d.ts +4 -0
- package/dist/components/datepicker/datepicker.js +1 -1
- package/dist/custom-elements.json +33 -1
- package/dist/solid-components.js +4 -4
- package/dist/vscode.html-custom-data.json +6 -1
- package/dist/web-types.json +24 -2
- package/dist-versioned/chunks/chunk.2EXNVXP2.js +2 -2
- package/dist-versioned/chunks/chunk.2M6Y3YHU.js +4 -4
- package/dist-versioned/chunks/chunk.2NXJZVSN.js +11 -11
- package/dist-versioned/chunks/chunk.2OT7JZJP.js +10 -10
- package/dist-versioned/chunks/chunk.2Y2MTVGF.js +3 -3
- package/dist-versioned/chunks/chunk.3PHACHZ2.js +7 -7
- package/dist-versioned/chunks/chunk.42XKKRQ2.js +6 -6
- package/dist-versioned/chunks/chunk.4FXMBMSY.js +3 -3
- package/dist-versioned/chunks/chunk.4JC6XNQW.js +4 -4
- package/dist-versioned/chunks/chunk.4VWOZ477.js +4 -4
- package/dist-versioned/chunks/chunk.5JPFIM5W.js +3 -3
- package/dist-versioned/chunks/chunk.5TU4CAN7.js +6 -6
- package/dist-versioned/chunks/chunk.65FELEDA.js +3 -3
- package/dist-versioned/chunks/chunk.67LY7Y75.js +4 -4
- package/dist-versioned/chunks/chunk.6F52A4JB.js +3 -3
- package/dist-versioned/chunks/chunk.72LCNWVE.js +3 -3
- package/dist-versioned/chunks/chunk.7DQB3MN6.js +7 -7
- package/dist-versioned/chunks/chunk.7EXDALNL.js +5 -5
- package/dist-versioned/chunks/chunk.AHIYNPL4.js +1 -1
- package/dist-versioned/chunks/chunk.ALJ34SPY.js +4 -4
- package/dist-versioned/chunks/chunk.B5BWUIZC.js +2 -2
- package/dist-versioned/chunks/chunk.BW5BXFWA.js +5 -5
- package/dist-versioned/chunks/chunk.C3L34J75.js +1 -1
- package/dist-versioned/chunks/chunk.C3WIBDGG.js +2 -2
- package/dist-versioned/chunks/chunk.C4HDZU75.js +2 -2
- package/dist-versioned/chunks/chunk.CB7PF3MZ.js +6 -6
- package/dist-versioned/chunks/chunk.CXFXIMXV.js +13 -13
- package/dist-versioned/chunks/chunk.DF2LZ65H.js +2 -2
- package/dist-versioned/chunks/chunk.DGLSKBZE.js +3 -3
- package/dist-versioned/chunks/chunk.DZED227Y.js +1 -1
- package/dist-versioned/chunks/chunk.EQIZ7J5Z.js +25 -25
- package/dist-versioned/chunks/chunk.ES5DW7MC.js +2 -2
- package/dist-versioned/chunks/chunk.HFRDUE6W.js +11 -11
- package/dist-versioned/chunks/chunk.I3DVEGNB.js +11 -11
- package/dist-versioned/chunks/chunk.JKJXDDJU.js +3 -3
- package/dist-versioned/chunks/chunk.JPGYEMXS.js +2 -2
- package/dist-versioned/chunks/chunk.JXDY64LH.js +10 -10
- package/dist-versioned/chunks/chunk.KEJFWGZI.js +4 -4
- package/dist-versioned/chunks/chunk.KSU44YSO.js +7 -7
- package/dist-versioned/chunks/chunk.KXUT6UJL.js +2 -2
- package/dist-versioned/chunks/chunk.MPHRXV2B.js +1 -1
- package/dist-versioned/chunks/chunk.N5RQE7OC.js +1 -1
- package/dist-versioned/chunks/chunk.PAXRRXRW.js +4 -4
- package/dist-versioned/chunks/chunk.PGECK7YI.js +1 -1
- package/dist-versioned/chunks/chunk.QGCJ4WUV.js +5 -5
- package/dist-versioned/chunks/chunk.QIYLIH7P.js +5 -5
- package/dist-versioned/chunks/chunk.QNHUD2SQ.js +42 -42
- package/dist-versioned/chunks/{chunk.UDTZN5OG.js → chunk.RRSERGVO.js} +46 -11
- package/dist-versioned/chunks/chunk.S2ZVBJYN.js +5 -5
- package/dist-versioned/chunks/chunk.SEWHXNAY.js +5 -5
- package/dist-versioned/chunks/chunk.SG7H3CVK.js +12 -12
- package/dist-versioned/chunks/chunk.SMRP2JEM.js +1 -1
- package/dist-versioned/chunks/chunk.TFAIMBF7.js +11 -11
- package/dist-versioned/chunks/chunk.TLAI6IVF.js +2 -2
- package/dist-versioned/chunks/chunk.UIQBHPD3.js +2 -2
- package/dist-versioned/chunks/chunk.UORTR6WB.js +5 -5
- package/dist-versioned/chunks/chunk.VX7JXCCH.js +2 -2
- package/dist-versioned/chunks/chunk.XAU2YS2A.js +5 -5
- package/dist-versioned/chunks/chunk.XQMBT64Z.js +8 -8
- package/dist-versioned/chunks/chunk.YJ46MX3X.js +6 -6
- package/dist-versioned/chunks/chunk.YKGIJFJM.js +23 -23
- package/dist-versioned/chunks/chunk.YRKHHYV5.js +2 -2
- package/dist-versioned/chunks/chunk.Z4IULIBO.js +10 -10
- package/dist-versioned/chunks/chunk.ZLPWCNY6.js +14 -14
- package/dist-versioned/chunks/chunk.ZQ6CXL6H.js +5 -5
- 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 +5 -1
- package/dist-versioned/components/datepicker/datepicker.js +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/file-selector/file-selector.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/progress-bar/progress-bar.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/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 +298 -266
- package/dist-versioned/internal/form.js +2 -2
- package/dist-versioned/solid-components.css +3 -3
- package/dist-versioned/solid-components.js +4 -4
- package/dist-versioned/vscode.html-custom-data.json +120 -115
- package/dist-versioned/web-types.json +195 -173
- package/package.json +3 -3
- package/cdn/chunks/chunk.7OG7ICBB.js +0 -2
- package/cdn-versioned/chunks/chunk.7OG7ICBB.js +0 -2
|
@@ -22,7 +22,7 @@ var SdBreadcrumb = class extends SolidElement {
|
|
|
22
22
|
this.isTruncated = false;
|
|
23
23
|
}
|
|
24
24
|
get items() {
|
|
25
|
-
return this.querySelectorAll("sd-7-0-
|
|
25
|
+
return this.querySelectorAll("sd-7-1-0-breadcrumb-item");
|
|
26
26
|
}
|
|
27
27
|
cacheItemPositions() {
|
|
28
28
|
this.items.forEach((item) => {
|
|
@@ -67,12 +67,12 @@ var SdBreadcrumb = class extends SolidElement {
|
|
|
67
67
|
}
|
|
68
68
|
handleMobileChevron() {
|
|
69
69
|
var _a, _b, _c;
|
|
70
|
-
const icon = document.createElement("sd-7-0-
|
|
70
|
+
const icon = document.createElement("sd-7-1-0-icon");
|
|
71
71
|
icon.setAttribute("slot", "icon-left");
|
|
72
72
|
icon.setAttribute("library", "_internal");
|
|
73
73
|
icon.setAttribute("name", "chevron-left");
|
|
74
74
|
icon.setAttribute("class", "text-base me-1 lg:hidden");
|
|
75
|
-
(_c = (_b = (_a = Array.from(this.items).at(-2)) == null ? void 0 : _a.shadowRoot) == null ? void 0 : _b.querySelector("sd-7-0-
|
|
75
|
+
(_c = (_b = (_a = Array.from(this.items).at(-2)) == null ? void 0 : _a.shadowRoot) == null ? void 0 : _b.querySelector("sd-7-1-0-link")) == null ? void 0 : _c.appendChild(icon);
|
|
76
76
|
}
|
|
77
77
|
handleSlotChange() {
|
|
78
78
|
this.handleMobileChevron();
|
|
@@ -87,13 +87,13 @@ var SdBreadcrumb = class extends SolidElement {
|
|
|
87
87
|
this.resizeObserver.unobserve(this);
|
|
88
88
|
}
|
|
89
89
|
render() {
|
|
90
|
-
return html`<nav part="base" class="flex items-center pb-1" aria-label="${this.label}"><sd-7-0-
|
|
90
|
+
return html`<nav part="base" class="flex items-center pb-1" aria-label="${this.label}"><sd-7-1-0-dropdown part="truncated" class="${cx(!this.isTruncated && "absolute opacity-0 pointer-events-none")}"><button slot="trigger" tabindex="${this.isTruncated ? "0" : "-1"}" aria-label="${this.localize.term("truncatedBreadcrumbs")}" aria-expanded="false" aria-haspopup="true" class="flex sd-interactive">[...]</button><ol part="truncated-dropdown" class="flex flex-col gap-4 px-2 py-3 min-w-40"></ol></sd-7-1-0-dropdown><ol part="list" class="flex items-center"><slot @slotchange="${this.handleSlotChange}"></slot></ol></nav>`;
|
|
91
91
|
}
|
|
92
92
|
};
|
|
93
93
|
SdBreadcrumb.styles = [
|
|
94
94
|
...SolidElement.styles,
|
|
95
95
|
css`/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
|
|
96
|
-
:host{position:relative;display:block}::slotted(sd-7-0-
|
|
96
|
+
:host{position:relative;display:block}::slotted(sd-7-1-0-breadcrumb-item:not(:last-of-type))::after,sd-7-1-0-dropdown::after{margin-inline:var(--sd-spacing-2,.5rem);display:none;height:var(--sd-spacing-1,.25rem);width:var(--sd-spacing-1,.25rem);border-radius:var(--sd-radius-full,624.9375rem);background-color:rgba(var(--sd-breadcrumb__separator-color,195 195 195));--tw-content:'';content:var(--tw-content)}@media (width >= 64rem){::slotted(sd-7-1-0-breadcrumb-item:not(:last-of-type))::after,sd-7-1-0-dropdown::after{display:inline-block}}::slotted(sd-7-1-0-breadcrumb-item:nth-last-child(2)){display:flex}@media (width >= 64rem){::slotted(sd-7-1-0-breadcrumb-item:nth-last-child(2))::after{background-color:rgba(var(--sd-breadcrumb__separator--current-color,45 157 0))}}::slotted(sd-7-1-0-breadcrumb-item),sd-7-1-0-dropdown{display:none;align-items:center;font-size:var(--sd-text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)))}@media (width >= 64rem){::slotted(sd-7-1-0-breadcrumb-item),sd-7-1-0-dropdown{display:flex}}@property --tw-content{syntax:"*";inherits:false;initial-value:""}`
|
|
97
97
|
];
|
|
98
98
|
__decorateClass([
|
|
99
99
|
query('[part="base"]')
|
|
@@ -117,7 +117,7 @@ __decorateClass([
|
|
|
117
117
|
state()
|
|
118
118
|
], SdBreadcrumb.prototype, "isTruncated", 2);
|
|
119
119
|
SdBreadcrumb = __decorateClass([
|
|
120
|
-
customElement("sd-7-0-
|
|
120
|
+
customElement("sd-7-1-0-breadcrumb")
|
|
121
121
|
], SdBreadcrumb);
|
|
122
122
|
|
|
123
123
|
export {
|
|
@@ -147,13 +147,13 @@ var SdDialog = class extends SolidElement {
|
|
|
147
147
|
return waitForEvent(this, "sd-after-hide");
|
|
148
148
|
}
|
|
149
149
|
render() {
|
|
150
|
-
return html`<sd-7-0-
|
|
150
|
+
return html`<sd-7-1-0-theme-listener></sd-7-1-0-theme-listener><dialog part="base" class="${cx(
|
|
151
151
|
"flex items-center justify-center p-0 m-auto bg-transparent border-none overflow-visible",
|
|
152
152
|
this.hasSlotController.test("footer") && "dialog--has-footer"
|
|
153
153
|
)}"><div part="overlay" class="fixed inset-0" @click="${() => this.requestClose("overlay")}"></div><div part="panel" class="${cx(
|
|
154
154
|
"panel-color-border border flex flex-col z-20 bg-white py-4 sm:py-8 relative gap-6 focus-visible:focus-outline-inverted overflow-y-auto",
|
|
155
155
|
this.open && "flex opacity-100"
|
|
156
|
-
)}" aria-label="${ifDefined(this.headline ? this.headline : void 0)}" aria-labelledby="${ifDefined(!this.headline ? "title" : void 0)}" tabindex="0"><header part="header" class="flex flex-grow-0 flex-shrink-0 basis-auto px-6 sm:px-10"><h2 part="title" class="flex-auto m-0" id="title">${this.headline.length > 0 ? html`<span class="sd-headline sd-headline--size-3xl leading-tight">${this.headline}</span>` : html`<slot name="headline"></slot>`}</h2>${!this.noCloseButton ? html`<sd-7-0-
|
|
156
|
+
)}" aria-label="${ifDefined(this.headline ? this.headline : void 0)}" aria-labelledby="${ifDefined(!this.headline ? "title" : void 0)}" tabindex="0"><header part="header" class="flex flex-grow-0 flex-shrink-0 basis-auto px-6 sm:px-10"><h2 part="title" class="flex-auto m-0" id="title">${this.headline.length > 0 ? html`<span class="sd-headline sd-headline--size-3xl leading-tight">${this.headline}</span>` : html`<slot name="headline"></slot>`}</h2>${!this.noCloseButton ? html`<sd-7-1-0-button part="close-button" variant="tertiary" exportparts="base:close-button__base" class="${cx("absolute top-2 right-2")}" name="x-lg" @click="${() => this.requestClose("close-button")}" type="button"><sd-7-1-0-icon label="${this.localize.term("close")}" name="close" library="_internal" color="currentColor"></sd-7-1-0-icon></sd-7-1-0-button>` : ""}</header><main part="body" class="flex flex-auto overflow-auto w-full px-6 sm:px-10"><slot></slot></main><footer part="footer" class="px-6 sm:px-10"><slot name="footer"></slot></footer></div></dialog>`;
|
|
157
157
|
}
|
|
158
158
|
};
|
|
159
159
|
SdDialog.styles = [
|
|
@@ -183,7 +183,7 @@ __decorateClass([
|
|
|
183
183
|
watch("open", { waitUntilFirstUpdate: true })
|
|
184
184
|
], SdDialog.prototype, "handleOpenChange", 1);
|
|
185
185
|
SdDialog = __decorateClass([
|
|
186
|
-
customElement("sd-7-0-
|
|
186
|
+
customElement("sd-7-1-0-dialog")
|
|
187
187
|
], SdDialog);
|
|
188
188
|
setDefaultAnimation("dialog.show", {
|
|
189
189
|
keyframes: [
|
|
@@ -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-7-0-
|
|
67
|
+
"relative text-center sd-7-1-0-radio-button-border-radius transition-all ease-in-out duration-100 items-center justify-center focus-visible:focus-outline choice-control-font-weight",
|
|
68
68
|
this.size === "sm" ? "text-sm" : "text-base",
|
|
69
|
-
this.checked && !this.disabled && !this.visuallyDisabled ? "sd-7-0-
|
|
69
|
+
this.checked && !this.disabled && !this.visuallyDisabled ? "sd-7-1-0-button--primary--default-color-background sd-7-1-0-button--primary--default-color-text hover:sd-7-1-0-button--primary--hover-color-background hover:text-primary-100" : !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-7-1-0-radio-button-color-text border-primary cursor-pointer hover:sd-7-1-0-radio-button--hover-color-background hover:sd-7-1-0-radio-button--hover-color-text",
|
|
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.3.2 | 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:0;z-index:calc(10 * -1);opacity:var(--sd-opacity-0,0);outline-style:var(--tw-outline-style);outline-width:1px;outline-color:rgba(var(--sd-color-border-error,var(--sd-color-error,204 25 55)));--tw-outline-style:dotted;outline-style:dotted}.lg-label{height:46px}.lg-no-label{height:46px;padding-inline:calc(var(--sd-spacing-1,.25rem) * 5)}.md-label{height:38px}.md-no-label{height:38px;padding-inline:var(--sd-spacing-4,1rem)}.sm-label{height:30px}.sm-no-label{height:30px;padding-inline:var(--sd-spacing-3,.75rem)}:host([size=lg].sd-7-0-
|
|
92
|
+
:host{display:block;width:-moz-min-content;width:min-content}.hidden-input{all:unset;position:absolute;inset:0;z-index:calc(10 * -1);opacity:var(--sd-opacity-0,0);outline-style:var(--tw-outline-style);outline-width:1px;outline-color:rgba(var(--sd-color-border-error,var(--sd-color-error,204 25 55)));--tw-outline-style:dotted;outline-style:dotted}.lg-label{height:46px}.lg-no-label{height:46px;padding-inline:calc(var(--sd-spacing-1,.25rem) * 5)}.md-label{height:38px}.md-no-label{height:38px;padding-inline:var(--sd-spacing-4,1rem)}.sm-label{height:30px}.sm-no-label{height:30px;padding-inline:var(--sd-spacing-3,.75rem)}:host([size=lg].sd-7-1-0-button-group__button:not(.sd-7-1-0-button-group__button--first)){margin-inline-start:calc(var(--sd-spacing-3,.75rem) * -1)}:host([size=md].sd-7-1-0-button-group__button:not(.sd-7-1-0-button-group__button--first)){margin-inline-start:calc(var(--sd-spacing-2,.5rem) * -1)}:host([size=sm].sd-7-1-0-button-group__button:not(.sd-7-1-0-button-group__button--first)){margin-inline-start:calc(var(--sd-spacing-1,.25rem) * -1)}:host(.sd-7-1-0-button-group__button--hover){z-index:20}:host(.sd-7-1-0-button-group__button--focus){z-index:30}:host(.sd-7-1-0-button-group__button[checked]){z-index:40}@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-7-0-
|
|
122
|
+
customElement("sd-7-1-0-radio-button")
|
|
123
123
|
], SdRadioButton);
|
|
124
124
|
|
|
125
125
|
export {
|
|
@@ -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-7-0-
|
|
13
|
+
const popup = document.createElement("sd-7-1-0-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.3.2 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
|
|
26
|
-
sd-7-0-
|
|
26
|
+
sd-7-1-0-popup::part(popup){z-index:var(--sd-z-index-dropdown,900);overflow-y:scroll;border-bottom-right-radius:var(--sd-radius,.25rem);border-bottom-left-radius:var(--sd-radius,.25rem);border-style:var(--tw-border-style);border-width:var(--sd-border-width-2,.125rem);border-top-style:var(--tw-border-style);border-top-width:0;border-color:rgba(var(--sd-color-border-primary,0 53 142));background-color:rgba(var(--sd-color-background-white,255 255 255));padding-inline:var(--sd-spacing-2,.5rem);padding-block:var(--sd-spacing-3,.75rem);--tw-shadow:var(--sd-shadow, 0px 1px 3px 0px rgba(81, 81, 81, 0.75));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}sd-7-1-0-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-7-1-0-popup li:hover:not([disabled]){background-color:rgba(var(--sd-color-background-neutral-100,246 246 246))}sd-7-1-0-popup li{list-style-type:''}sd-7-1-0-popup li mark{background-color:transparent;--tw-font-weight:var(--sd-font-weight-bold, 600);font-weight:var(--sd-font-weight-bold,600)}sd-7-1-0-popup li:not(:has(sd-7-1-0-option)){cursor:pointer;padding-inline:var(--sd-spacing-4,1rem);padding-block:var(--sd-spacing-3,.75rem);font-size:var(--sd-text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height,calc(1.5 / 1)));color:rgba(var(--sd-color-text-black,24 24 24))}sd-7-1-0-popup li:not(:has(sd-7-1-0-option)):hover{background-color:rgba(var(--sd-color-background-neutral-200,233 233 233))}sd-7-1-0-popup li[aria-selected=true]{background-color:rgba(var(--sd-color-background-neutral-200,233 233 233))}@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-7-0-3-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-7-0-
|
|
39
|
+
(_b = (_a = sdInput.shadowRoot) == null ? void 0 : _a.querySelector("sd-7-1-0-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-7-0-
|
|
45
|
+
(_b = (_a = sdInput.shadowRoot) == null ? void 0 : _a.querySelector("sd-7-1-0-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
|
});
|
|
@@ -228,7 +228,7 @@ var SdTextarea = class extends SolidElement {
|
|
|
228
228
|
textareaState === "disabled" || textareaState === "visuallyDisabled" ? "text-neutral-500" : "text-black",
|
|
229
229
|
["invalid", "activeInvalid"].includes(textareaState) && "form-control--invalid-color-background"
|
|
230
230
|
)}"><textarea part="textarea" id="input" class="${cx(
|
|
231
|
-
"ps-4 flex-grow focus:outline-none bg-transparent placeholder:text-neutral-700 resize-none group-has-[sd-7-0-
|
|
231
|
+
"ps-4 flex-grow focus:outline-none bg-transparent placeholder:text-neutral-700 resize-none group-has-[sd-7-1-0-icon]:pe-8",
|
|
232
232
|
{
|
|
233
233
|
sm: isFloatingLabelActive ? "pb-1" : "py-2",
|
|
234
234
|
md: isFloatingLabelActive ? "pb-1" : "py-2",
|
|
@@ -236,7 +236,7 @@ var SdTextarea = class extends SolidElement {
|
|
|
236
236
|
}[this.size],
|
|
237
237
|
this.disabled && "cursor-not-allowed",
|
|
238
238
|
textSize
|
|
239
|
-
)}" title="${this.title}" name="${ifDefined(this.name)}" .value="${live(this.value)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" ?visually-disabled="${this.visuallyDisabled}" placeholder="${!this.floatingLabel || isFloatingLabelActive ? ifDefined(this.placeholder) : ""}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" rows="${ifDefined(this.rows)}" autocapitalize="${ifDefined(this.autocapitalize)}" autocorrect="${ifDefined(this.autocorrect === void 0 ? void 0 : this.autocorrect ? "on" : "off")}" ?autofocus="${this.autofocus}" spellcheck="${ifDefined(this.spellcheck)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" aria-describedby="help-text invalid-message" aria-invalid="${this.showInvalidStyle}" aria-disabled="${this.disabled || this.visuallyDisabled}" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"></textarea> ${this.showInvalidStyle ? html`<sd-7-0-
|
|
239
|
+
)}" title="${this.title}" name="${ifDefined(this.name)}" .value="${live(this.value)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" ?visually-disabled="${this.visuallyDisabled}" placeholder="${!this.floatingLabel || isFloatingLabelActive ? ifDefined(this.placeholder) : ""}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" rows="${ifDefined(this.rows)}" autocapitalize="${ifDefined(this.autocapitalize)}" autocorrect="${ifDefined(this.autocorrect === void 0 ? void 0 : this.autocorrect ? "on" : "off")}" ?autofocus="${this.autofocus}" spellcheck="${ifDefined(this.spellcheck)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" aria-describedby="help-text invalid-message" aria-invalid="${this.showInvalidStyle}" aria-disabled="${this.disabled || this.visuallyDisabled}" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"></textarea> ${this.showInvalidStyle ? html`<sd-7-1-0-icon class="${cx("text-error absolute right-4 pointer-events-none", iconSize)}" library="_internal" name="risk" part="invalid-icon"></sd-7-1-0-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-7-1-0-icon class="${cx("text-success absolute right-4 pointer-events-none", iconSize)}" library="_internal" name="confirm-circle" part="valid-icon"></sd-7-1-0-icon>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx(
|
|
240
240
|
"text-sm mt-1",
|
|
241
241
|
hasHelpText && !this.showInvalidStyle ? "block" : "hidden",
|
|
242
242
|
this.visuallyDisabled || this.disabled ? "text-neutral-500" : "text-neutral-700"
|
|
@@ -369,7 +369,7 @@ __decorateClass([
|
|
|
369
369
|
watch(["size", "floatingLabel"])
|
|
370
370
|
], SdTextarea.prototype, "handleSizeChange", 1);
|
|
371
371
|
SdTextarea = __decorateClass([
|
|
372
|
-
customElement("sd-7-0-
|
|
372
|
+
customElement("sd-7-1-0-textarea")
|
|
373
373
|
], SdTextarea);
|
|
374
374
|
|
|
375
375
|
export {
|
|
@@ -135,23 +135,23 @@ var SdAccordion = class extends SolidElement {
|
|
|
135
135
|
}
|
|
136
136
|
render() {
|
|
137
137
|
return html`<details part="base"><summary part="header" id="header" class="${cx(
|
|
138
|
-
"flex text-base gap-4 font-bold items-center cursor-pointer select-none px-4 sd-7-0-
|
|
138
|
+
"flex text-base gap-4 font-bold items-center cursor-pointer select-none px-4 sd-7-1-0-accordion-padding-block focus-visible:focus-outline focus-visible:z-10 relative group transition-colors ease-in-out duration-fast hover:sd-7-1-0-accordion--hover-color-background"
|
|
139
139
|
)}" aria-expanded="${this.open ? "true" : "false"}" aria-controls="content" tabindex="0" @click="${this.handleSummaryClick}" @keydown="${this.handleSummaryKeyDown}"><div part="summary-border" class="${cx(
|
|
140
140
|
!this.open && "opacity-0",
|
|
141
|
-
"w-1 sd-7-0-
|
|
141
|
+
"w-1 sd-7-1-0-accordion__indicator-color absolute left-0 transition-height duration-fast ease-in-out h-[calc(100%-16px)] group-hover:h-full"
|
|
142
142
|
)}"></div><slot name="summary" part="summary" class="${cx(
|
|
143
|
-
this.open ? "sd-7-0-
|
|
143
|
+
this.open ? "sd-7-1-0-accordion--open-color-text" : "sd-7-1-0-accordion-color-text",
|
|
144
144
|
"flex flex-auto items-center text-left"
|
|
145
145
|
)}">${this.summary}</slot><span part="summary-icon" class="${cx(
|
|
146
146
|
"flex flex-grow-0 flex-shrink-0 flex-auto items-center transition-all ease-in-out duration-medium text-xl",
|
|
147
147
|
this.open && "rotate-180"
|
|
148
|
-
)}"><slot name="expand-icon" class="${cx(this.open && "hidden")}"><sd-7-0-
|
|
148
|
+
)}"><slot name="expand-icon" class="${cx(this.open && "hidden")}"><sd-7-1-0-icon library="_internal" name="chevron-bottom"></sd-7-1-0-icon></slot><slot name="collapse-icon" class="${cx(!this.open && "hidden")}"><sd-7-1-0-icon library="_internal" name="chevron-bottom"></sd-7-1-0-icon></slot></span></summary><div part="content" id="content" class="overflow-hidden"><slot part="content__slot" class="block px-4 py-6" role="region" aria-labelledby="header"></slot></div></details>`;
|
|
149
149
|
}
|
|
150
150
|
};
|
|
151
151
|
SdAccordion.styles = [
|
|
152
152
|
...SolidElement.styles,
|
|
153
153
|
css`/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
|
|
154
|
-
:host{display:block}[part=header]::-webkit-details-marker{display:none}[part=base]{border-color:rgba(var(--sd-accordion-color-border,var(--sd-accordion-color-text)));border-block-width:var(--sd-accordion-border-width)}[part=summary-icon] sd-7-0-
|
|
154
|
+
:host{display:block}[part=header]::-webkit-details-marker{display:none}[part=base]{border-color:rgba(var(--sd-accordion-color-border,var(--sd-accordion-color-text)));border-block-width:var(--sd-accordion-border-width)}[part=summary-icon] sd-7-1-0-icon{color:rgb(var(--sd-accordion-color-icon-fill))}`
|
|
155
155
|
];
|
|
156
156
|
__decorateClass([
|
|
157
157
|
query('[part="base"]')
|
|
@@ -172,7 +172,7 @@ __decorateClass([
|
|
|
172
172
|
watch("open", { waitUntilFirstUpdate: true })
|
|
173
173
|
], SdAccordion.prototype, "handleOpenChange", 1);
|
|
174
174
|
SdAccordion = __decorateClass([
|
|
175
|
-
customElement("sd-7-0-
|
|
175
|
+
customElement("sd-7-1-0-accordion")
|
|
176
176
|
], SdAccordion);
|
|
177
177
|
setDefaultAnimation("accordion.show", {
|
|
178
178
|
keyframes: [
|
|
@@ -91,14 +91,14 @@ var SdOption = class extends SolidElement {
|
|
|
91
91
|
this.disabled && "border-neutral-500 top-1",
|
|
92
92
|
!this.disabled && this.hasHover ? "h-full top-0" : "top-1"
|
|
93
93
|
)}"></span> ${this.checkbox ? html`<span id="control" part="control ${this.selected ? " control--checked" : "control--unchecked"}" class="${cx(
|
|
94
|
-
"relative flex flex-shrink-0 items-center justify-center border sd-7-0-
|
|
94
|
+
"relative flex flex-shrink-0 items-center justify-center border sd-7-1-0-checkbox-border-width rounded-sm h-4 w-4 mr-2",
|
|
95
95
|
{
|
|
96
96
|
sm: "mt-0.5",
|
|
97
97
|
md: "mt-1",
|
|
98
98
|
lg: "mt-1"
|
|
99
99
|
}[this.size],
|
|
100
100
|
this.disabled ? "border-neutral-500" : this.selected ? "bg-accent border-accent" : "bg-white form-control-color-border"
|
|
101
|
-
)}">${this.selected ? html`<sd-7-0-
|
|
101
|
+
)}">${this.selected ? html`<sd-7-1-0-icon part="checked-icon" class="text-white w-3 h-3" library="sd-status-assets" name="status-check"></sd-7-1-0-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-7-0-
|
|
149
|
+
customElement("sd-7-1-0-option")
|
|
150
150
|
], SdOption);
|
|
151
151
|
|
|
152
152
|
export {
|
|
@@ -22,9 +22,9 @@ var SdBadge = class extends SolidElement {
|
|
|
22
22
|
"inline-flex items-center justify-center gap-x-[1px] text-center font-bold whitespace-nowrap border rounded-full select-none cursor-[inherit]",
|
|
23
23
|
{
|
|
24
24
|
/* variants */
|
|
25
|
-
blue: !this.inverted ? "text-white sd-7-0-
|
|
26
|
-
green: !this.inverted ? "text-white sd-7-0-
|
|
27
|
-
red: !this.inverted ? "text-white sd-7-0-
|
|
25
|
+
blue: !this.inverted ? "text-white sd-7-1-0-badge--blue-color-background border-white" : "sd-7-1-0-badge--blue--inverted-color-text sd-7-1-0-badge--blue--inverted-color-background sd-7-1-0-badge--inverted-color-border",
|
|
26
|
+
green: !this.inverted ? "text-white sd-7-1-0-badge--green-color-background border-white" : "sd-7-1-0-badge--green-color--inverted-text sd-7-1-0-badge--green-color--inverted-background sd-7-1-0-badge--inverted-color-border",
|
|
27
|
+
red: !this.inverted ? "text-white sd-7-1-0-badge--red-color-background border-white" : "sd-7-1-0-badge--red--inverted-text sd-7-1-0-badge--red--inverted-background sd-7-1-0-badge--inverted-color-border"
|
|
28
28
|
}[this.variant]
|
|
29
29
|
)}"><span id="content" part="content" class="${cx(this.size === "sm" && "sr-only")}"><slot></slot></span></span>`;
|
|
30
30
|
}
|
|
@@ -44,7 +44,7 @@ __decorateClass([
|
|
|
44
44
|
property({ type: Boolean, reflect: true })
|
|
45
45
|
], SdBadge.prototype, "inverted", 2);
|
|
46
46
|
SdBadge = __decorateClass([
|
|
47
|
-
customElement("sd-7-0-
|
|
47
|
+
customElement("sd-7-1-0-badge")
|
|
48
48
|
], SdBadge);
|
|
49
49
|
|
|
50
50
|
export {
|
|
@@ -42,16 +42,16 @@ var SdAccordionGroup = class extends SolidElement {
|
|
|
42
42
|
SdAccordionGroup.styles = [
|
|
43
43
|
...SolidElement.styles,
|
|
44
44
|
css`/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
|
|
45
|
-
:host{display:block}::slotted(sd-7-0-
|
|
45
|
+
:host{display:block}::slotted(sd-7-1-0-accordion:not(:first-of-type)){margin-top:calc(-1 * var(--sd-accordion-border-width))!important}`
|
|
46
46
|
];
|
|
47
47
|
__decorateClass([
|
|
48
|
-
queryAssignedElements({ selector: "sd-7-0-
|
|
48
|
+
queryAssignedElements({ selector: "sd-7-1-0-accordion" })
|
|
49
49
|
], SdAccordionGroup.prototype, "_accordionsInDefaultSlot", 2);
|
|
50
50
|
__decorateClass([
|
|
51
51
|
property({ attribute: "close-others", type: Boolean, reflect: true })
|
|
52
52
|
], SdAccordionGroup.prototype, "closeOthers", 2);
|
|
53
53
|
SdAccordionGroup = __decorateClass([
|
|
54
|
-
customElement("sd-7-0-
|
|
54
|
+
customElement("sd-7-1-0-accordion-group")
|
|
55
55
|
], SdAccordionGroup);
|
|
56
56
|
|
|
57
57
|
export {
|
|
@@ -22,7 +22,7 @@ var SdDivider = class extends SolidElement {
|
|
|
22
22
|
}
|
|
23
23
|
render() {
|
|
24
24
|
return html`<hr part="main" aria-orientation="${this.orientation}" class="${cx(
|
|
25
|
-
this.inverted ? "sd-7-0-
|
|
25
|
+
this.inverted ? "sd-7-1-0-divider--inverted-color-border" : "border-neutral-400",
|
|
26
26
|
this.orientation === "horizontal" ? "border-t w-full" : " border-l h-full"
|
|
27
27
|
)}">`;
|
|
28
28
|
}
|
|
@@ -33,7 +33,7 @@ var SdDivider = class extends SolidElement {
|
|
|
33
33
|
SdDivider.styles = [
|
|
34
34
|
...SolidElement.styles,
|
|
35
35
|
css`/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
|
|
36
|
-
:host{margin:0}:host(sd-7-0-
|
|
36
|
+
:host{margin:0}:host(sd-7-1-0-divider[orientation=horizontal]){display:block}:host(sd-7-1-0-divider[orientation=vertical]){display:inline-block}`
|
|
37
37
|
];
|
|
38
38
|
__decorateClass([
|
|
39
39
|
property({ type: String, reflect: true })
|
|
@@ -42,7 +42,7 @@ __decorateClass([
|
|
|
42
42
|
property({ type: Boolean, reflect: true })
|
|
43
43
|
], SdDivider.prototype, "inverted", 2);
|
|
44
44
|
SdDivider = __decorateClass([
|
|
45
|
-
customElement("sd-7-0-
|
|
45
|
+
customElement("sd-7-1-0-divider")
|
|
46
46
|
], SdDivider);
|
|
47
47
|
|
|
48
48
|
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-7-0-
|
|
74
|
+
"sd-7-1-0-radio group flex items-start 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-7-0-
|
|
83
|
+
"flex-initial shrink-0 relative inline-flex items-center justify-center border sd-7-1-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-7-0-
|
|
87
|
-
) : this.checked ? "sd-7-0-
|
|
86
|
+
this.checked ? "sd-7-1-0-radio--checked--invalid--default-color-background" : "sd-7-1-0-radio--default--invalid-color-background"
|
|
87
|
+
) : this.checked ? "sd-7-1-0-radio--checked--default-color-background hover:sd-7-1-0-radio--checked--hover-color-background group-hover:sd-7-1-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-7-0-
|
|
89
|
+
"rounded-full inline-flex text-white sd-7-1-0-radio__checked-height sd-7-1-0-radio__checked-width transition-[transform, colors] duration-medium ease-in-out",
|
|
90
90
|
this.checked ? "scale-100" : "scale-0",
|
|
91
|
-
this.disabled ? "sd-7-0-
|
|
91
|
+
this.disabled ? "sd-7-1-0-radio--checked--disabled__icon-color-background" : this.visuallyDisabled ? "bg-white" : this.invalid ? "sd-7-1-0-radio--checked--invalid--default__icon-color-background hover:sd-7-1-0-radio--checked--invalid--hover__icon-color-background group-hover:sd-7-1-0-radio--checked--invalid--hover__icon-color-background" : this.checked ? "sd-7-1-0-radio--checked--default__icon-color-background hover:sd-7-1-0-radio--checked--hover__icon-color-background group-hover:sd-7-1-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" : "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-7-0-
|
|
134
|
+
customElement("sd-7-1-0-radio")
|
|
135
135
|
], SdRadio);
|
|
136
136
|
|
|
137
137
|
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-7-0-
|
|
87
|
+
(_b = (_a = tooltip.shadowRoot) == null ? void 0 : _a.querySelector("sd-7-1-0-popup")) == null ? void 0 : _b.setAttribute("distance", "14");
|
|
88
88
|
});
|
|
89
89
|
}
|
|
90
90
|
willUpdate(changedProperties) {
|
|
@@ -260,7 +260,7 @@ var SdRange = class extends SolidElement {
|
|
|
260
260
|
_preventTextSelection() {
|
|
261
261
|
if (!this._dragStyleElement) {
|
|
262
262
|
const style = document.createElement("style");
|
|
263
|
-
style.setAttribute("data-sd-7-0-
|
|
263
|
+
style.setAttribute("data-sd-7-1-0-range-drag", "");
|
|
264
264
|
style.textContent = "*, *::before, *::after { user-select: none !important; -webkit-user-select: none !important; }";
|
|
265
265
|
document.head.appendChild(style);
|
|
266
266
|
this._dragStyleElement = style;
|
|
@@ -445,10 +445,10 @@ var SdRange = class extends SolidElement {
|
|
|
445
445
|
ariaLabel = this.tooltipFormatter(value);
|
|
446
446
|
}
|
|
447
447
|
}
|
|
448
|
-
return html`<sd-7-0-
|
|
448
|
+
return html`<sd-7-1-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-7-0-
|
|
451
|
+
)}"></div></sd-7-1-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-7-0-
|
|
521
|
+
customElement("sd-7-1-0-range")
|
|
522
522
|
], SdRange);
|
|
523
523
|
|
|
524
524
|
export {
|
|
@@ -102,18 +102,18 @@ var SdMenuItem = class extends SolidElement {
|
|
|
102
102
|
};
|
|
103
103
|
return html`<div id="anchor" part="base" class="${cx(
|
|
104
104
|
"relative flex items-stretch whitespace-nowrap py-3 px-4 no-wrap !navigable-border-radius",
|
|
105
|
-
this.disabled ? "outline-none cursor-not-allowed sd-7-0-
|
|
105
|
+
this.disabled ? "outline-none cursor-not-allowed sd-7-1-0-menu-item--disabled-color-text hover:bg-transparent" : "cursor-pointer sd-7-1-0-menu-item-color-text hover:bg-neutral-200",
|
|
106
106
|
this.isSubmenu() && isSubmenuExpanded && "submenu-expanded"
|
|
107
107
|
)}" .disabled="${this.disabled}" ?aria-haspopup="${this.isSubmenu()}" ?aria-expanded="${isSubmenuExpanded ? true : false}">${this.type === "checkbox" ? html`<span part="checked-icon" class="${cx(
|
|
108
108
|
"flex items-center justify-center grow-0 shrink-0 basis-auto",
|
|
109
109
|
this.checked ? "visible" : "invisible"
|
|
110
|
-
)}"><sd-7-0-
|
|
110
|
+
)}"><sd-7-1-0-icon name="status-check" library="sd-status-assets" aria-hidden="true"></sd-7-1-0-icon></span>` : ""} ${slots.iconIndent ? html`<slot name="icon-indent" part="icon-indent" class="flex items-center grow-0 shrink-0 basis-auto mr-2"></slot>` : ""}<slot part="label" class="inline-flex grow shrink basis-auto text-ellipsis overflow-hidden" @slotchange="${this.handleDefaultSlotChange}"></slot>${this.chevron || this.isSubmenu() ? html`<span part="submenu-icon" class="flex items-center justify-center grow-0 shrink-0 basis-auto ml-3"><sd-7-1-0-icon name="chevron-right" library="_internal" aria-hidden="true" class="h-6 w-6"></sd-7-1-0-icon></span>` : ""} ${this.submenuController.renderSubmenu()}</div>`;
|
|
111
111
|
}
|
|
112
112
|
};
|
|
113
113
|
SdMenuItem.styles = [
|
|
114
114
|
...SolidElement.styles,
|
|
115
115
|
css`/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
|
|
116
|
-
:host{--submenu-offset:-6px;display:block}:host(:focus-visible){--tw-outline-style:none;outline-style:none}::slotted(sd-7-0-
|
|
116
|
+
:host{--submenu-offset:-6px;display:block}:host(:focus-visible){--tw-outline-style:none;outline-style:none}::slotted(sd-7-1-0-icon){height:var(--sd-spacing-6,1.5rem);width:var(--sd-spacing-6,1.5rem)}[part=checked-icon]{margin-right:var(--sd-spacing-3,.75rem)}.submenu-expanded::after{position:fixed;top:0;right:0;bottom:0;left:0;z-index:calc(var(z-dropdown) - 1);--tw-content:'';content:var(--tw-content);clip-path:polygon(var(--safe-triangle-cursor-x,0) var(--safe-triangle-cursor-y,0),var(--safe-triangle-submenu-start-x,0) var(--safe-triangle-submenu-start-y,0),var(--safe-triangle-submenu-end-x,0) var(--safe-triangle-submenu-end-y,0))}:host(:hover:not([aria-disabled=true],:focus-visible)) [part=base]{background-color:rgba(var(--sd-color-background-neutral-200,233 233 233));--tw-outline-style:none;outline-style:none}:host(:focus-visible:not([aria-disabled=true])) [part=base]{outline-style:solid;outline-offset:2px;outline-width:2px;outline-color:var(--outline-color-primary);outline-offset:-2px}:host(.menu-item-focus) [part=base]{outline-style:solid;outline-offset:2px;outline-width:2px;outline-color:var(--outline-color-primary);outline-offset:-2px}:host(:hover) [part=base]{--tw-outline-style:none;outline-style:none}:host [part=checked-icon],:host [part=icon-indent],:host [part=submenu-icon]{color:rgba(var(--sd-menu-item-color-icon-fill))}:host([aria-disabled=true]) [part=icon-indent]{color:rgba(var(--sd-menu-item--disabled-color-icon-fill))}sd-7-1-0-popup::part(popup){z-index:var(--sd-z-index-dropdown,900);background-color:rgba(var(--sd-color-background-white,255 255 255));margin-left:var(--submenu-offset)}::slotted(sd-7-1-0-menu){max-width:var(--auto-size-available-width)!important;max-height:var(--auto-size-available-height)!important}.sd-7-1-0-menu-item-color-text{color:rgba(var(--sd-menu-item-color-text))}.sd-7-1-0-menu-item--disabled-color-text{color:rgba(var(--sd-menu-item--disabled-color-text))}@property --tw-content{syntax:"*";inherits:false;initial-value:""}`
|
|
117
117
|
];
|
|
118
118
|
__decorateClass([
|
|
119
119
|
query("slot:not([name])")
|
|
@@ -146,7 +146,7 @@ __decorateClass([
|
|
|
146
146
|
watch("type")
|
|
147
147
|
], SdMenuItem.prototype, "handleTypeChange", 1);
|
|
148
148
|
SdMenuItem = __decorateClass([
|
|
149
|
-
customElement("sd-7-0-
|
|
149
|
+
customElement("sd-7-1-0-menu-item")
|
|
150
150
|
], SdMenuItem);
|
|
151
151
|
|
|
152
152
|
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-7-0-
|
|
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-7-1-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-7-0-
|
|
35
|
+
customElement("sd-7-1-0-range-tick")
|
|
36
36
|
], SdRangeTick);
|
|
37
37
|
|
|
38
38
|
export {
|
|
@@ -420,14 +420,14 @@ var SdInput = class extends SolidElement {
|
|
|
420
420
|
!isFloatingLabelActive || !hasValue && (this.readonly || this.visuallyDisabled) ? textSize : "text-xs",
|
|
421
421
|
(this.visuallyDisabled || this.disabled) && "text-neutral-500",
|
|
422
422
|
isFloatingLabelActive && !this.visuallyDisabled && !this.disabled && "form-control--filled__floating-label-color-text"
|
|
423
|
-
)}">${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-7-0-
|
|
423
|
+
)}">${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-7-1-0-icon class="${cx(
|
|
424
424
|
this.disabled || this.visuallyDisabled ? "text-neutral-500" : "text-neutral-700",
|
|
425
425
|
iconSize
|
|
426
|
-
)}" library="_internal" name="close-circle"></sd-7-0-
|
|
426
|
+
)}" library="_internal" name="close-circle"></sd-7-1-0-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(
|
|
427
427
|
"flex items-center sd-interactive",
|
|
428
428
|
iconMarginLeft,
|
|
429
429
|
this.floatingLabel && !isFloatingLabelActive && "hide-password-toggle"
|
|
430
|
-
)}" type="button" @click="${this.handlePasswordToggle}" @mousedown="${this.handleClickableIconFocusIn}" @focus="${() => this.handleClickableIconFocusIn()}" @blur="${this.handleClickableIconFocusOut}">${this.passwordVisible ? html`<slot name="show-password-icon"><sd-7-0-
|
|
430
|
+
)}" type="button" @click="${this.handlePasswordToggle}" @mousedown="${this.handleClickableIconFocusIn}" @focus="${() => this.handleClickableIconFocusIn()}" @blur="${this.handleClickableIconFocusOut}">${this.passwordVisible ? html`<slot name="show-password-icon"><sd-7-1-0-icon class="${cx(iconColor, iconSize)}" library="_internal" name="eye-open"></sd-7-1-0-icon></slot>` : html`<slot name="hide-password-icon"><sd-7-1-0-icon class="${cx(iconColor, iconSize)}" library="_internal" name="eye-crossed-out"></sd-7-1-0-icon></slot>`}</button>` : ""} ${(this.type === "date" || this.type === "datetime-local") && !isFirefox ? html`<sd-7-1-0-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="_internal" name="calendar"></sd-7-1-0-icon>` : ""} ${this.type === "time" ? html`<sd-7-1-0-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="_internal" name="clock"></sd-7-1-0-icon>` : ""} ${this.type === "search" ? html`<button class="${cx("flex items-center sd-interactive", iconMarginLeft)}" type="button" @click="${this.handleSearchClick}"><sd-7-1-0-icon class="${cx(iconColor, iconSize)}" library="_internal" name="magnifying-glass" label="${this.localize.term("search")}"></sd-7-1-0-icon></button>` : ""} ${this.showInvalidStyle ? html`<sd-7-1-0-icon part="invalid-icon" class="${cx("text-error", iconMarginLeft, iconSize)}" library="_internal" name="risk"></sd-7-1-0-icon>` : ""} ${this.showValidStyle && this.styleOnValid ? html`<sd-7-1-0-icon class="${cx("text-success flex-shrink-0", iconMarginLeft, iconSize)}" library="_internal" name="confirm-circle" part="valid-icon"></sd-7-1-0-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-7-1-0-icon library="_internal" name="minus-circle" label="Decrease value" class="${cx(iconColor, iconMarginLeft, iconSize)}"></sd-7-1-0-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-7-1-0-icon library="_internal" name="plus-circle" label="Decrease value" class="${cx(iconColor, iconMarginLeft, iconSize)}"></sd-7-1-0-icon></slot></button></div>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx(
|
|
431
431
|
"text-sm mt-1",
|
|
432
432
|
hasHelpText && !this.showInvalidStyle ? "block" : "hidden",
|
|
433
433
|
this.visuallyDisabled || this.disabled ? "text-neutral-500" : "text-neutral-700"
|
|
@@ -440,7 +440,7 @@ var SdInput = class extends SolidElement {
|
|
|
440
440
|
SdInput.styles = [
|
|
441
441
|
...SolidElement.styles,
|
|
442
442
|
css`/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */@layer theme,base,components,utilities;
|
|
443
|
-
: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-7-0-
|
|
443
|
+
: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-7-1-0-icon{color:rgba(var(--sd-color-text-neutral-500,174 174 174))}.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}.icon-color{color:rgba(var(--sd-form-control-color-icon-fill))}`
|
|
444
444
|
];
|
|
445
445
|
__decorateClass([
|
|
446
446
|
query("#input")
|
|
@@ -587,7 +587,7 @@ __decorateClass([
|
|
|
587
587
|
watch(["size", "floatingLabel"])
|
|
588
588
|
], SdInput.prototype, "handleSizeChange", 1);
|
|
589
589
|
SdInput = __decorateClass([
|
|
590
|
-
customElement("sd-7-0-
|
|
590
|
+
customElement("sd-7-1-0-input")
|
|
591
591
|
], SdInput);
|
|
592
592
|
|
|
593
593
|
export {
|