@solid-design-system/components 6.2.0 → 6.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cdn/chunks/{chunk.3CJKJUTD.js → chunk.WOZKICWV.js} +5 -5
- package/cdn/components/select/select.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.2DPSCPM4.js +2 -2
- package/cdn-versioned/chunks/chunk.2HJLVWCE.js +2 -2
- package/cdn-versioned/chunks/chunk.2KV3QDYA.js +2 -2
- package/cdn-versioned/chunks/chunk.3ETEQAPR.js +2 -2
- package/cdn-versioned/chunks/chunk.47H4SDKN.js +2 -2
- package/cdn-versioned/chunks/chunk.4LGCXG7D.js +2 -2
- package/cdn-versioned/chunks/chunk.4P5PT6MV.js +2 -2
- package/cdn-versioned/chunks/chunk.5M2K2EXR.js +2 -2
- package/cdn-versioned/chunks/chunk.5OE2GCRH.js +2 -2
- package/cdn-versioned/chunks/chunk.6GU6NFBF.js +1 -1
- package/cdn-versioned/chunks/chunk.745GDIND.js +2 -2
- package/cdn-versioned/chunks/chunk.ALCKOGA7.js +1 -1
- package/cdn-versioned/chunks/chunk.BZ3VHECJ.js +3 -3
- package/cdn-versioned/chunks/chunk.C44GZOLG.js +9 -9
- package/cdn-versioned/chunks/chunk.C4QT4K6T.js +2 -2
- package/cdn-versioned/chunks/chunk.CDP46OS4.js +1 -1
- package/cdn-versioned/chunks/chunk.CJ34NUTS.js +1 -1
- package/cdn-versioned/chunks/chunk.CMY3VPYA.js +2 -2
- package/cdn-versioned/chunks/chunk.D5FVDNYV.js +2 -2
- package/cdn-versioned/chunks/chunk.DC6UQXYF.js +2 -2
- package/cdn-versioned/chunks/chunk.DEEJ4ON7.js +2 -2
- package/cdn-versioned/chunks/chunk.DXGVZ3KG.js +1 -1
- package/cdn-versioned/chunks/chunk.E64WXH47.js +1 -1
- package/cdn-versioned/chunks/chunk.EASLRW3B.js +2 -2
- package/cdn-versioned/chunks/chunk.G42N3VHE.js +2 -2
- package/cdn-versioned/chunks/chunk.GP2QVZP5.js +1 -1
- package/cdn-versioned/chunks/chunk.H77CNSMK.js +2 -2
- package/cdn-versioned/chunks/chunk.H7S7D4YV.js +2 -2
- package/cdn-versioned/chunks/chunk.HHASCDC2.js +5 -5
- package/cdn-versioned/chunks/chunk.HYUIC2O6.js +2 -2
- package/cdn-versioned/chunks/chunk.I234MSSB.js +2 -2
- package/cdn-versioned/chunks/chunk.I3TTTGLW.js +1 -1
- package/cdn-versioned/chunks/chunk.IAEOXYGB.js +1 -1
- package/cdn-versioned/chunks/chunk.JRSX44R6.js +2 -2
- package/cdn-versioned/chunks/chunk.KKKGNXIR.js +2 -2
- package/cdn-versioned/chunks/chunk.KM5W4EDY.js +2 -2
- package/cdn-versioned/chunks/chunk.L6PAHLSN.js +2 -2
- package/cdn-versioned/chunks/chunk.MWO5B7BA.js +2 -2
- package/cdn-versioned/chunks/chunk.OAVVKKBJ.js +2 -2
- package/cdn-versioned/chunks/chunk.OG2BQH6T.js +2 -2
- package/cdn-versioned/chunks/chunk.PPIS2HQ5.js +1 -1
- package/cdn-versioned/chunks/chunk.PRGLNPUF.js +1 -1
- package/cdn-versioned/chunks/chunk.PT6G5HKE.js +1 -1
- package/cdn-versioned/chunks/chunk.QJ2LWN24.js +2 -2
- package/cdn-versioned/chunks/chunk.QMKNC76J.js +2 -2
- package/cdn-versioned/chunks/chunk.QUGI3FMS.js +2 -2
- package/cdn-versioned/chunks/chunk.RBVWPWFK.js +2 -2
- package/cdn-versioned/chunks/chunk.RKKB23ZF.js +3 -3
- package/cdn-versioned/chunks/chunk.S4II2NTI.js +2 -2
- package/cdn-versioned/chunks/chunk.S7VIPIYX.js +2 -2
- package/cdn-versioned/chunks/chunk.TWTQHJPN.js +2 -2
- package/cdn-versioned/chunks/chunk.U44PXBV2.js +2 -2
- package/cdn-versioned/chunks/chunk.U5N7L5RI.js +2 -2
- package/cdn-versioned/chunks/chunk.UVRZTPOZ.js +2 -2
- package/cdn-versioned/chunks/chunk.VAUP57XZ.js +2 -2
- package/cdn-versioned/chunks/chunk.VMUNNUNV.js +1 -1
- package/cdn-versioned/chunks/chunk.VTDQOKJM.js +2 -2
- package/cdn-versioned/chunks/chunk.W7A3TU2Z.js +1 -1
- package/cdn-versioned/chunks/{chunk.3CJKJUTD.js → chunk.WOZKICWV.js} +5 -5
- package/cdn-versioned/chunks/chunk.XAPH6XNH.js +2 -2
- package/cdn-versioned/chunks/chunk.XTRMRKZ6.js +2 -2
- package/cdn-versioned/chunks/chunk.Z6TAAGCD.js +2 -2
- package/cdn-versioned/chunks/chunk.ZTELVJ34.js +1 -1
- package/cdn-versioned/chunks/chunk.ZVHLKL7F.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 +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/select/select.js +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.XC7QKBQE.js → chunk.LZVVDTSP.js} +6 -1
- package/dist/components/select/select.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.22PWID5B.js +2 -2
- package/dist-versioned/chunks/chunk.2EWH2DC2.js +1 -1
- package/dist-versioned/chunks/chunk.2HTII44Q.js +4 -4
- package/dist-versioned/chunks/chunk.2VPWVTT6.js +4 -4
- package/dist-versioned/chunks/chunk.3EJL5IKL.js +1 -1
- package/dist-versioned/chunks/chunk.3PTRIEGP.js +2 -2
- package/dist-versioned/chunks/chunk.4UT3FCHQ.js +2 -2
- package/dist-versioned/chunks/chunk.5XWO3USG.js +3 -3
- package/dist-versioned/chunks/chunk.75WDCMIC.js +24 -24
- package/dist-versioned/chunks/chunk.ASEJW6QN.js +5 -5
- package/dist-versioned/chunks/chunk.AUSBWPVD.js +7 -7
- package/dist-versioned/chunks/chunk.AZPOFDJP.js +4 -4
- package/dist-versioned/chunks/chunk.BBLAIT57.js +2 -2
- package/dist-versioned/chunks/chunk.BSP6J6R2.js +2 -2
- package/dist-versioned/chunks/chunk.BTNS6ZNO.js +4 -4
- package/dist-versioned/chunks/chunk.C3WIBDGG.js +3 -3
- package/dist-versioned/chunks/chunk.D7CJJHHA.js +1 -1
- package/dist-versioned/chunks/chunk.DCHRUIDY.js +1 -1
- package/dist-versioned/chunks/chunk.DCOB6WLB.js +3 -3
- package/dist-versioned/chunks/chunk.DFHY67LW.js +5 -5
- package/dist-versioned/chunks/chunk.DTTVI7KT.js +11 -11
- package/dist-versioned/chunks/chunk.DXDDB6AB.js +1 -1
- package/dist-versioned/chunks/chunk.DZEAXPRA.js +4 -4
- package/dist-versioned/chunks/chunk.FKFGVTXH.js +3 -3
- package/dist-versioned/chunks/chunk.FSUOT4WC.js +12 -12
- package/dist-versioned/chunks/chunk.IJIPMNT2.js +3 -3
- package/dist-versioned/chunks/chunk.IYXPHPNO.js +1 -1
- package/dist-versioned/chunks/chunk.JGRI4R23.js +1 -1
- package/dist-versioned/chunks/chunk.K66JHYHC.js +2 -2
- package/dist-versioned/chunks/chunk.KEJFWGZI.js +4 -4
- package/dist-versioned/chunks/chunk.L3OEOSPQ.js +1 -1
- package/dist-versioned/chunks/chunk.L6ZE3RXX.js +14 -14
- package/dist-versioned/chunks/chunk.LBDV5GNR.js +4 -4
- package/dist-versioned/chunks/{chunk.XC7QKBQE.js → chunk.LZVVDTSP.js} +32 -27
- package/dist-versioned/chunks/chunk.M2D3WWF3.js +8 -8
- package/dist-versioned/chunks/chunk.MH7JHBWP.js +2 -2
- package/dist-versioned/chunks/chunk.MLRNCOWA.js +3 -3
- package/dist-versioned/chunks/chunk.N3I674PE.js +12 -12
- package/dist-versioned/chunks/chunk.NEUULRS7.js +5 -5
- package/dist-versioned/chunks/chunk.NW7LJJS2.js +8 -8
- package/dist-versioned/chunks/chunk.OJXVBFUH.js +5 -5
- package/dist-versioned/chunks/chunk.P5FGSFP3.js +1 -1
- package/dist-versioned/chunks/chunk.PBXAIJQ4.js +5 -5
- package/dist-versioned/chunks/chunk.Q7ZMX7IB.js +3 -3
- package/dist-versioned/chunks/chunk.QM4E25CD.js +5 -5
- package/dist-versioned/chunks/chunk.R56JDQAF.js +2 -2
- package/dist-versioned/chunks/chunk.RFDAZXJG.js +3 -3
- package/dist-versioned/chunks/chunk.SCWR4Q4K.js +10 -10
- package/dist-versioned/chunks/chunk.SQYISG5I.js +4 -4
- package/dist-versioned/chunks/chunk.T46LX45D.js +6 -6
- package/dist-versioned/chunks/chunk.TKDFONFB.js +3 -3
- package/dist-versioned/chunks/chunk.TNJNUASM.js +1 -1
- package/dist-versioned/chunks/chunk.TVWV4PUH.js +2 -2
- package/dist-versioned/chunks/chunk.U2BN2DBY.js +4 -4
- package/dist-versioned/chunks/chunk.UDPSGKZL.js +4 -4
- package/dist-versioned/chunks/chunk.UIQBHPD3.js +2 -2
- package/dist-versioned/chunks/chunk.UPCVQSXM.js +3 -3
- package/dist-versioned/chunks/chunk.UWQPJU3Q.js +3 -3
- package/dist-versioned/chunks/chunk.XALPLS2Y.js +6 -6
- package/dist-versioned/chunks/chunk.XV2UO6TF.js +2 -2
- package/dist-versioned/chunks/chunk.YATRFNET.js +28 -28
- package/dist-versioned/chunks/chunk.YFRD2UEO.js +8 -8
- package/dist-versioned/chunks/chunk.YNBR5ZDU.js +4 -4
- package/dist-versioned/chunks/chunk.ZMEUQIVY.js +9 -9
- package/dist-versioned/components/accordion/accordion.d.ts +1 -1
- package/dist-versioned/components/accordion-group/accordion-group.d.ts +1 -1
- package/dist-versioned/components/animation/animation.d.ts +1 -1
- package/dist-versioned/components/audio/audio.d.ts +1 -1
- package/dist-versioned/components/badge/badge.d.ts +1 -1
- package/dist-versioned/components/brandshape/brandshape.d.ts +1 -1
- package/dist-versioned/components/breadcrumb/breadcrumb.d.ts +1 -1
- package/dist-versioned/components/breadcrumb-item/breadcrumb-item.d.ts +1 -1
- package/dist-versioned/components/button/button.d.ts +1 -1
- package/dist-versioned/components/button-group/button-group.d.ts +1 -1
- package/dist-versioned/components/carousel/carousel.d.ts +1 -1
- package/dist-versioned/components/carousel-item/carousel-item.d.ts +1 -1
- package/dist-versioned/components/checkbox/checkbox.d.ts +1 -1
- package/dist-versioned/components/checkbox-group/checkbox-group.d.ts +1 -1
- package/dist-versioned/components/combobox/combobox.d.ts +1 -1
- package/dist-versioned/components/datepicker/datepicker.d.ts +1 -1
- package/dist-versioned/components/dialog/dialog.d.ts +1 -1
- package/dist-versioned/components/divider/divider.d.ts +1 -1
- package/dist-versioned/components/drawer/drawer.d.ts +1 -1
- package/dist-versioned/components/dropdown/dropdown.d.ts +1 -1
- package/dist-versioned/components/expandable/expandable.d.ts +1 -1
- package/dist-versioned/components/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/select/select.js +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
|
@@ -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-6-2-
|
|
25
|
+
return this.querySelectorAll("sd-6-2-1-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-6-2-
|
|
70
|
+
const icon = document.createElement("sd-6-2-1-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-6-2-
|
|
75
|
+
(_c = (_b = (_a = Array.from(this.items).at(-2)) == null ? void 0 : _a.shadowRoot) == null ? void 0 : _b.querySelector("sd-6-2-1-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-6-2-
|
|
90
|
+
return html`<nav part="base" class="flex items-center pb-1" aria-label="${this.label}"><sd-6-2-1-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-6-2-1-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.1.17 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
|
|
96
|
-
:host{position:relative;display:block}::slotted(sd-6-2-
|
|
96
|
+
:host{position:relative;display:block}::slotted(sd-6-2-1-breadcrumb-item:not(:last-of-type))::after,sd-6-2-1-dropdown::after{margin-inline:var(--sd-spacing-2);display:none;height:var(--sd-spacing-1);width:var(--sd-spacing-1);border-radius:var(--sd-radius-full);background-color:rgba(var(--sd-breadcrumb__separator-color,rgba(var(--sd-color-neutral-400))));--tw-content:'';content:var(--tw-content)}@media (width >= 64rem){::slotted(sd-6-2-1-breadcrumb-item:not(:last-of-type))::after,sd-6-2-1-dropdown::after{display:inline-block}}::slotted(sd-6-2-1-breadcrumb-item:nth-last-child(2)){display:flex}@media (width >= 64rem){::slotted(sd-6-2-1-breadcrumb-item:nth-last-child(2))::after{background-color:rgba(var(--sd-color-background-accent))}}::slotted(sd-6-2-1-breadcrumb-item),sd-6-2-1-dropdown{display:none;align-items:center;font-size:var(--sd-text-sm);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)))}@media (width >= 64rem){::slotted(sd-6-2-1-breadcrumb-item),sd-6-2-1-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-6-2-
|
|
120
|
+
customElement("sd-6-2-1-breadcrumb")
|
|
121
121
|
], SdBreadcrumb);
|
|
122
122
|
|
|
123
123
|
export {
|
|
@@ -183,7 +183,7 @@ var SdDialog = class extends SolidElement {
|
|
|
183
183
|
)}"><div part="overlay" class="fixed inset-0 overlay-color-background opacity-90" @click="${() => this.requestClose("overlay")}" tabindex="-1"></div><div part="panel" class="${cx(
|
|
184
184
|
"panel-color-border border flex flex-col z-20 bg-white py-4 sm:py-8 relative gap-6 focus-visible:focus-outline-inverted overflow-y-auto",
|
|
185
185
|
this.open && "flex opacity-100"
|
|
186
|
-
)}" role="dialog" aria-modal="true" aria-hidden="${this.open ? "false" : "true"}" aria-label="${ifDefined(this.headline ? this.headline : void 0)}" aria-labelledby="${ifDefined(!this.headline ? "title" : void 0)}" tabindex="0"><header part="header" class="flex flex-grow-0 flex-shrink-0 basis-auto px-6 sm:px-10"><h2 part="title" class="flex-auto m-0" id="title">${this.headline.length > 0 ? html`<span class="sd-headline sd-headline--size-3xl leading-tight">${this.headline}</span>` : html`<slot name="headline"></slot>`}</h2>${!this.noCloseButton ? html`<sd-6-2-
|
|
186
|
+
)}" role="dialog" aria-modal="true" aria-hidden="${this.open ? "false" : "true"}" aria-label="${ifDefined(this.headline ? this.headline : void 0)}" aria-labelledby="${ifDefined(!this.headline ? "title" : void 0)}" tabindex="0"><header part="header" class="flex flex-grow-0 flex-shrink-0 basis-auto px-6 sm:px-10"><h2 part="title" class="flex-auto m-0" id="title">${this.headline.length > 0 ? html`<span class="sd-headline sd-headline--size-3xl leading-tight">${this.headline}</span>` : html`<slot name="headline"></slot>`}</h2>${!this.noCloseButton ? html`<sd-6-2-1-button part="close-button" variant="tertiary" exportparts="base:close-button__base" class="${cx("absolute top-2 right-2")}" name="x-lg" @click="${() => this.requestClose("close-button")}" type="button"><sd-6-2-1-icon label="${this.localize.term("close")}" name="close" library="_internal" color="currentColor"></sd-6-2-1-icon></sd-6-2-1-button>` : ""}</header><main part="body" class="flex flex-auto overflow-auto w-full px-6 sm:px-10"><slot></slot></main><footer part="footer" class="flex flex-grow-0 flex-shrink-0 basis-auto ml-auto gap-4 px-6 sm:px-10"><slot name="footer"></slot></footer></div></div>`;
|
|
187
187
|
}
|
|
188
188
|
};
|
|
189
189
|
SdDialog.styles = [
|
|
@@ -213,7 +213,7 @@ __decorateClass([
|
|
|
213
213
|
watch("open", { waitUntilFirstUpdate: true })
|
|
214
214
|
], SdDialog.prototype, "handleOpenChange", 1);
|
|
215
215
|
SdDialog = __decorateClass([
|
|
216
|
-
customElement("sd-6-2-
|
|
216
|
+
customElement("sd-6-2-1-dialog")
|
|
217
217
|
], SdDialog);
|
|
218
218
|
setDefaultAnimation("dialog.show", {
|
|
219
219
|
keyframes: [
|
|
@@ -163,48 +163,48 @@ var SdButton = class extends SolidElement {
|
|
|
163
163
|
* */
|
|
164
164
|
{
|
|
165
165
|
/* sizes, fonts */
|
|
166
|
-
sm: `sd-6-2-
|
|
167
|
-
md: `sd-6-2-
|
|
168
|
-
lg: `sd-6-2-
|
|
166
|
+
sm: `sd-6-2-1-button--size-sm-font-size sd-6-2-1-button-font-weight sd-6-2-1-button--size-sm-border-radius varspacing-8 ${hasBorder ? "py-[0.281rem] px-[0.938rem]" : "sd-6-2-1-button--size-sm-padding-block px-4"}`,
|
|
167
|
+
md: `sd-6-2-1-button--size-md-font-size sd-6-2-1-button-font-weight sd-6-2-1-button--size-md-border-radius varspacing-10 ${hasBorder ? "py-[0.438rem] px-[0.938rem]" : "sd-6-2-1-button--size-md-padding-block px-4"}`,
|
|
168
|
+
lg: `sd-6-2-1-button--size-lg-font-size sd-6-2-1-button-font-weight sd-6-2-1-button--size-lg-border-radius varspacing-12 ${hasBorder ? "py-[0.688rem] px-[0.938rem]" : "sd-6-2-1-button--size-lg-padding-block px-4"}`
|
|
169
169
|
}[this.size],
|
|
170
170
|
{
|
|
171
171
|
/* variants */
|
|
172
|
-
primary: !this.inverted ? `${this.visuallyDisabled ? "bg-neutral-500 border-neutral-500 hover:bg-neutral-500 text-white" : "sd-6-2-
|
|
173
|
-
disabled:bg-neutral-500 disabled:text-white` : `${this.visuallyDisabled ? "bg-neutral-500 text-white border-neutral-500 hover:bg-neutral-500 active:bg-neutral-500" : "sd-6-2-
|
|
174
|
-
disabled:sd-6-2-
|
|
175
|
-
secondary: !this.inverted ? `border ${this.visuallyDisabled ? "sd-6-2-
|
|
176
|
-
disabled:sd-6-2-
|
|
177
|
-
disabled:sd-6-2-
|
|
178
|
-
tertiary: !this.inverted ? `border-transparent ${this.visuallyDisabled ? "sd-6-2-
|
|
179
|
-
disabled:sd-6-2-
|
|
180
|
-
disabled:sd-6-2-
|
|
172
|
+
primary: !this.inverted ? `${this.visuallyDisabled ? "bg-neutral-500 border-neutral-500 hover:bg-neutral-500 text-white" : "sd-6-2-1-button--primary--default-color-background border-transparent sd-6-2-1-button--primary--default-color-text hover:text-primary-100 active:sd-6-2-1-button--primary--active-color-text"}
|
|
173
|
+
disabled:bg-neutral-500 disabled:text-white` : `${this.visuallyDisabled ? "bg-neutral-500 text-white border-neutral-500 hover:bg-neutral-500 active:bg-neutral-500" : "sd-6-2-1-button--primary--inverted--default-color-text sd-6-2-1-button--primary--inverted--default-color-background border-white hover:sd-6-2-1-button--primary--inverted--hover-color-text active:sd-6-2-1-button--primary--inverted--active-color-text active:sd-6-2-1-button--primary--inverted--active-color-background"}
|
|
174
|
+
disabled:sd-6-2-1-button--inverted--disabled-color-background disabled:sd-6-2-1-button--inverted--disabled-color-border disabled:text-white`,
|
|
175
|
+
secondary: !this.inverted ? `border ${this.visuallyDisabled ? "sd-6-2-1-button--secondary--disabled-color-text border-neutral-500 hover:text-neutral-500 hover:border-neutral-500 active:text-neutral-500 active:border-neutral-500" : "sd-6-2-1-button--secondary--default-color-text border-primary hover:text-primary-500 hover:border-primary-500 active:text-primary-800 active:border-primary-800"}
|
|
176
|
+
disabled:sd-6-2-1-button--secondary--disabled-color-text disabled:border-neutral-500` : `border ${this.visuallyDisabled ? "text-neutral-600 border-neutral-600 hover:text-neutral-600 hover:border-neutral-600 active:text-neutral-600 active:border-neutral-600" : "text-white sd-6-2-1-button--secondary--inverted--color-border hover:sd-6-2-1-button--secondary--inverted--hover-color-text hover:border-primary-100 active:text-primary-200"}
|
|
177
|
+
disabled:sd-6-2-1-button--inverted--disabled-color-border disabled:sd-6-2-1-button--inverted--disabled-color-text`,
|
|
178
|
+
tertiary: !this.inverted ? `border-transparent ${this.visuallyDisabled ? "sd-6-2-1-button--tertiary--disabled-color-text hover:text-neutral-500 active:text-neutral-500" : "sd-6-2-1-button--tertiary--default-color-text hover:text-primary-500 active:text-primary-800"}
|
|
179
|
+
disabled:sd-6-2-1-button--tertiary--disabled-color-text` : `border-transparent ${this.visuallyDisabled ? "text-neutral-600 hover:text-neutral-600 active:text-neutral-600" : "text-white hover:sd-6-2-1-button--tertiary--inverted--hover-color-text hover:sd-6-2-1-button--tertiary--inverted--hover-color-background active:text-primary-200"}
|
|
180
|
+
disabled:sd-6-2-1-button--inverted--disabled-color-text`,
|
|
181
181
|
cta: `${this.visuallyDisabled ? "bg-neutral-500 border-neutral-500 hover:bg-neutral-500 active:bg-neutral-500" : "bg-accent border-transparent"}
|
|
182
|
-
${!this.inverted ? "text-white disabled:bg-neutral-500 disabled:border-neutral-500 disabled:text-white" : "sd-6-2-
|
|
182
|
+
${!this.inverted ? "text-white disabled:bg-neutral-500 disabled:border-neutral-500 disabled:text-white" : "sd-6-2-1-button--cta--inverted--default-color-background sd-6-2-1-button--cta--inverted--default-color-text hover:sd-6-2-1-button--cta--inverted--hover-color-text active:sd-6-2-1-button--cta--inverted--active-color-text disabled:sd-6-2-1-button--inverted--disabled-color-background disabled:sd-6-2-1-button--inverted--disabled-color-border disabled:text-white"}`
|
|
183
183
|
}[this.variant]
|
|
184
184
|
)}" ?disabled="${ifDefined(isLink ? void 0 : this.disabled)}" type="${ifDefined(isLink ? void 0 : this.type)}" title="${this.title}" name="${ifDefined(isLink ? void 0 : this.name)}" value="${ifDefined(isLink ? void 0 : this.value)}" href="${ifDefined(isLink ? this.href : void 0)}" target="${ifDefined(isLink ? this.target : void 0)}" download="${ifDefined(isLink ? this.download : void 0)}" rel="${ifDefined(isLink && this.target ? "noreferrer noopener" : void 0)}" role="${ifDefined(isLink ? void 0 : "button")}" aria-disabled="${this.disabled || this.visuallyDisabled ? "true" : "false"}" aria-labelledby="content" tabindex="${this.disabled ? "-1" : "0"}" @blur="${this.handleBlur}" @focus="${this.handleFocus}" @invalid="${this.isButton() ? this.handleInvalid : null}" @click="${this.handleClick}"><div part="motion-wrapper" class="${cx(
|
|
185
185
|
"absolute inset-0 -z-10 overflow-hidden pointer-events-none ",
|
|
186
186
|
(this.disabled || this.visuallyDisabled) && "hidden",
|
|
187
187
|
{
|
|
188
188
|
/* sizes, fonts */
|
|
189
|
-
sm: `sd-6-2-
|
|
190
|
-
md: `sd-6-2-
|
|
191
|
-
lg: `sd-6-2-
|
|
189
|
+
sm: `sd-6-2-1-button--size-sm-border-radius`,
|
|
190
|
+
md: `sd-6-2-1-button--size-md-border-radius`,
|
|
191
|
+
lg: `sd-6-2-1-button--size-lg-border-radius`
|
|
192
192
|
}[this.size]
|
|
193
193
|
)}"><div class="absolute inset-0 w-full h-full transition-all duration-fast translate-y-full group-hover:translate-y-0 group-hover:mt-[-22%] mt-[11%]"><div class="${cx(
|
|
194
194
|
"absolute right-0 min-w-full min-h-full aspect-square skew-y-[-11deg] mt-[11%]",
|
|
195
195
|
{
|
|
196
|
-
primary: !this.inverted ? "sd-6-2-
|
|
197
|
-
secondary: !this.inverted ? "sd-6-2-
|
|
198
|
-
tertiary: !this.inverted ? "sd-6-2-
|
|
199
|
-
cta: !this.inverted ? "bg-accent-550 group-active:bg-accent-700" : "sd-6-2-
|
|
196
|
+
primary: !this.inverted ? "sd-6-2-1-button--primary--hover-color-background group-active:bg-primary-800" : "sd-6-2-1-button--primary--inverted--hover-color-background group-active:bg-primary-200",
|
|
197
|
+
secondary: !this.inverted ? "sd-6-2-1-button--secondary--hover-color-background group-active:sd-6-2-1-button--secondary--active-color-background" : "bg-primary-500 group-active:sd-6-2-1-button--secondary--inverted--active-color-background",
|
|
198
|
+
tertiary: !this.inverted ? "sd-6-2-1-button--tertiary--hover-color-background group-active:sd-6-2-1-button--tertiary--active-color-background" : "bg-primary-500 group-active:sd-6-2-1-button--tertiary--inverted--active-color-background",
|
|
199
|
+
cta: !this.inverted ? "bg-accent-550 group-active:bg-accent-700" : "sd-6-2-1-button--cta--inverted--hover-color-background group-active:sd-6-2-1-button--cta--inverted--active-color-background"
|
|
200
200
|
}[this.variant]
|
|
201
201
|
)}"></div><div class="${cx(
|
|
202
202
|
"absolute w-full h-full mt-[22%]",
|
|
203
203
|
{
|
|
204
|
-
primary: !this.inverted ? "sd-6-2-
|
|
205
|
-
secondary: !this.inverted ? "sd-6-2-
|
|
206
|
-
tertiary: !this.inverted ? "sd-6-2-
|
|
207
|
-
cta: !this.inverted ? "bg-accent-550 group-active:bg-accent-700" : "sd-6-2-
|
|
204
|
+
primary: !this.inverted ? "sd-6-2-1-button--primary--hover-color-background group-active:bg-primary-800" : "sd-6-2-1-button--primary--inverted--hover-color-background group-active:bg-primary-200",
|
|
205
|
+
secondary: !this.inverted ? "sd-6-2-1-button--secondary--hover-color-background group-active:sd-6-2-1-button--secondary--active-color-background" : "bg-primary-500 group-active:sd-6-2-1-button--secondary--inverted--active-color-background",
|
|
206
|
+
tertiary: !this.inverted ? "sd-6-2-1-button--tertiary--hover-color-background group-active:sd-6-2-1-button--tertiary--active-color-background" : "bg-primary-500 group-active:sd-6-2-1-button--tertiary--inverted--active-color-background",
|
|
207
|
+
cta: !this.inverted ? "bg-accent-550 group-active:bg-accent-700" : "sd-6-2-1-button--cta--inverted--hover-color-background group-active:sd-6-2-1-button--cta--inverted--active-color-background"
|
|
208
208
|
}[this.variant]
|
|
209
209
|
)}"></div></div></div><slot name="icon-left" part="icon-left" class="${cx(
|
|
210
210
|
"flex flex-auto items-center justify-end pointer-events-none",
|
|
@@ -228,7 +228,7 @@ var SdButton = class extends SolidElement {
|
|
|
228
228
|
md: "ml-2",
|
|
229
229
|
lg: "ml-2"
|
|
230
230
|
}[this.size]
|
|
231
|
-
)}"></slot>${this.loading ? html`<sd-6-2-
|
|
231
|
+
)}"></slot>${this.loading ? html`<sd-6-2-1-loader class="${cx("absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2")}"></sd-6-2-1-loader>` : ""}</${tag}>`;
|
|
232
232
|
}
|
|
233
233
|
};
|
|
234
234
|
/**
|
|
@@ -237,13 +237,13 @@ var SdButton = class extends SolidElement {
|
|
|
237
237
|
SdButton.styles = [
|
|
238
238
|
...SolidElement.styles,
|
|
239
239
|
css`/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties;@layer theme,base,components,utilities;
|
|
240
|
-
:host{position:relative;z-index:0;display:inline-block;width:auto;cursor:pointer}::slotted(sd-6-2-
|
|
240
|
+
:host{position:relative;z-index:0;display:inline-block;width:auto;cursor:pointer}::slotted(sd-6-2-1-badge){pointer-events:none;position:absolute;top:calc(var(--sd-spacing-1) * 0);right:calc(var(--sd-spacing-1) * 0);--tw-translate-x:calc(1/2 * 100%)!important;--tw-translate-y:calc(calc(1/2 * 100%) * -1)!important;translate:var(--tw-translate-x) var(--tw-translate-y)!important}::slotted(sd-6-2-1-icon),sd-6-2-1-loader{font-size:calc(var(--tw-varspacing)/ 2)}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}`
|
|
241
241
|
];
|
|
242
242
|
__decorateClass([
|
|
243
243
|
query("a, button")
|
|
244
244
|
], SdButton.prototype, "button", 2);
|
|
245
245
|
__decorateClass([
|
|
246
|
-
queryAssignedElements({ selector: "sd-6-2-
|
|
246
|
+
queryAssignedElements({ selector: "sd-6-2-1-icon" })
|
|
247
247
|
], SdButton.prototype, "_iconsInDefaultSlot", 2);
|
|
248
248
|
__decorateClass([
|
|
249
249
|
state()
|
|
@@ -309,7 +309,7 @@ __decorateClass([
|
|
|
309
309
|
watch("disabled", { waitUntilFirstUpdate: true })
|
|
310
310
|
], SdButton.prototype, "handleDisabledChange", 1);
|
|
311
311
|
SdButton = __decorateClass([
|
|
312
|
-
customElement("sd-6-2-
|
|
312
|
+
customElement("sd-6-2-1-button")
|
|
313
313
|
], SdButton);
|
|
314
314
|
|
|
315
315
|
export {
|
|
@@ -53,7 +53,7 @@ var SdNavigationItem = class extends SolidElement {
|
|
|
53
53
|
}
|
|
54
54
|
if (node.nodeType === Node.ELEMENT_NODE) {
|
|
55
55
|
const element = node;
|
|
56
|
-
return element.tagName.toLowerCase() === "sd-6-2-
|
|
56
|
+
return element.tagName.toLowerCase() === "sd-6-2-1-icon";
|
|
57
57
|
}
|
|
58
58
|
return false;
|
|
59
59
|
});
|
|
@@ -126,8 +126,8 @@ var SdNavigationItem = class extends SolidElement {
|
|
|
126
126
|
const root = html`<${tag} part="base" class="${cx(
|
|
127
127
|
"flex items-center cursor-pointer relative focus-visible:focus-outline group hover:bg-neutral-200 transition-colors duration-fast ease-in-out min-h-[48px] navigable-border-radius",
|
|
128
128
|
{ md: "navigable-font-size", lg: "text-lg", sm: "text-[14px]" }[this.size],
|
|
129
|
-
this.disabled ? "text-neutral-500 pointer-events-none" : "sd-6-2-
|
|
130
|
-
this.current && "font-bold sd-6-2-
|
|
129
|
+
this.disabled ? "text-neutral-500 pointer-events-none" : "sd-6-2-1-navigation-item-color-text",
|
|
130
|
+
this.current && "font-bold sd-6-2-1-navigation-item--current-color-text",
|
|
131
131
|
!isAccordion && "w-full",
|
|
132
132
|
this.divider && this.vertical && "mt-0.25",
|
|
133
133
|
!this.vertical && "inline-flex items-center",
|
|
@@ -143,19 +143,19 @@ var SdNavigationItem = class extends SolidElement {
|
|
|
143
143
|
slots["description"] && "pt-3",
|
|
144
144
|
!slots["description"] && !this.separated && horizontalPadding,
|
|
145
145
|
this.calculatePaddingX
|
|
146
|
-
)}">${this.divider && this.vertical ? html`<sd-6-2-
|
|
146
|
+
)}">${this.divider && this.vertical ? html`<sd-6-2-1-divider part="divider" class="${cx("w-full transition-all absolute -top-0.25 left-0", this.calculatePaddingX)}"></sd-6-2-1-divider>` : ""} <span id="content" part="content-container" class="inline-flex items-center flex-auto"><slot part="content" class="inline-flex text-start"></slot></span>${this.chevron || slots["children"] && this.vertical && !this.separated ? html`<sd-6-2-1-icon name="chevron-down" part="chevron" library="_internal" color="currentColor" class="${cx(
|
|
147
147
|
"h-6 w-6 ml-2 transition-all",
|
|
148
148
|
isAccordion ? this.open ? "rotate-180" : "rotate-0" : "rotate-[270deg]"
|
|
149
|
-
)}"></sd-6-2-
|
|
149
|
+
)}"></sd-6-2-1-icon>` : ""} </span>${slots["description"] && this.vertical ? html`<slot id="description" name="description" part="description" class="${cx(
|
|
150
150
|
"inline-block text-sm text-left font-normal text-black pb-3",
|
|
151
151
|
isAccordion || this.separated ? "grow" : "w-full",
|
|
152
152
|
this.calculatePaddingX
|
|
153
153
|
)}"></slot>` : ""}</div></${tag}>`;
|
|
154
154
|
if (this.separated) {
|
|
155
|
-
return html`<div part="details" id="navigation-item-details" class="relative flex flex-col"><div class="flex items-start">${root} ${slots["children"] && this.vertical ? html`<button type="button" title="${this.open ? this.localize.term("collapseNavigationItem") : this.localize.term("expandNavigationItem")}" class="sd-interactive sd-interactive--reset -mt-1" @click="${this.handleClickSummary}"><sd-6-2-
|
|
155
|
+
return html`<div part="details" id="navigation-item-details" class="relative flex flex-col"><div class="flex items-start">${root} ${slots["children"] && this.vertical ? html`<button type="button" title="${this.open ? this.localize.term("collapseNavigationItem") : this.localize.term("expandNavigationItem")}" class="sd-interactive sd-interactive--reset -mt-1" @click="${this.handleClickSummary}"><sd-6-2-1-icon name="chevron-down" part="chevron" library="_internal" color="currentColor" class="${cx(
|
|
156
156
|
"m-4 h-6 w-6 transition-all",
|
|
157
157
|
isAccordion || this.separated ? this.open ? "rotate-180" : "rotate-0" : "rotate-[270deg]"
|
|
158
|
-
)}"></sd-6-2-
|
|
158
|
+
)}"></sd-6-2-1-icon></button>` : ""}</div>${this.open ? html`<slot name="children"></slot>` : ""}</div>`;
|
|
159
159
|
}
|
|
160
160
|
if (isAccordion) {
|
|
161
161
|
return html`<details aria-expanded="${this.open}" part="details" id="navigation-item-details" ?open="${this.open}" class="relative">${root}<slot name="children"></slot></details>`;
|
|
@@ -217,7 +217,7 @@ __decorateClass([
|
|
|
217
217
|
property({ type: Boolean, reflect: true })
|
|
218
218
|
], SdNavigationItem.prototype, "separated", 2);
|
|
219
219
|
SdNavigationItem = __decorateClass([
|
|
220
|
-
customElement("sd-6-2-
|
|
220
|
+
customElement("sd-6-2-1-navigation-item")
|
|
221
221
|
], SdNavigationItem);
|
|
222
222
|
|
|
223
223
|
export {
|
|
@@ -135,14 +135,14 @@ var SdAccordion = class extends SolidElement {
|
|
|
135
135
|
}
|
|
136
136
|
render() {
|
|
137
137
|
return html`<details part="base" class="border-neutral-400"><summary part="header" id="header" class="${cx(
|
|
138
|
-
"flex text-base gap-4 font-bold items-center cursor-pointer select-none px-4 sd-6-2-
|
|
138
|
+
"flex text-base gap-4 font-bold items-center cursor-pointer select-none px-4 sd-6-2-1-accordion-padding-block focus-visible:focus-outline focus-visible:z-10 sd-6-2-1-accordion-color-text relative group transition-colors ease-in-out duration-fast hover:bg-neutral-200"
|
|
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-6-2-
|
|
141
|
+
"w-1 sd-6-2-1-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="flex flex-auto items-center text-left">${this.summary}</slot><span part="summary-icon" class="${cx(
|
|
143
143
|
"flex flex-grow-0 flex-shrink-0 flex-auto items-center transition-all ease-in-out duration-medium text-xl",
|
|
144
144
|
this.open && "rotate-180"
|
|
145
|
-
)}"><slot name="expand-icon" class="${cx(this.open && "hidden")}"><sd-6-2-
|
|
145
|
+
)}"><slot name="expand-icon" class="${cx(this.open && "hidden")}"><sd-6-2-1-icon library="_internal" name="chevron-down"></sd-6-2-1-icon></slot><slot name="collapse-icon" class="${cx(!this.open && "hidden")}"><sd-6-2-1-icon library="_internal" name="chevron-down"></sd-6-2-1-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>`;
|
|
146
146
|
}
|
|
147
147
|
};
|
|
148
148
|
SdAccordion.styles = [
|
|
@@ -169,7 +169,7 @@ __decorateClass([
|
|
|
169
169
|
watch("open", { waitUntilFirstUpdate: true })
|
|
170
170
|
], SdAccordion.prototype, "handleOpenChange", 1);
|
|
171
171
|
SdAccordion = __decorateClass([
|
|
172
|
-
customElement("sd-6-2-
|
|
172
|
+
customElement("sd-6-2-1-accordion")
|
|
173
173
|
], SdAccordion);
|
|
174
174
|
setDefaultAnimation("accordion.show", {
|
|
175
175
|
keyframes: [
|
|
@@ -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-2-
|
|
213
|
+
)}"><sd-6-2-1-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-2-
|
|
218
|
+
}[this.variant] || ""}" library="_internal" class="h-6 w-6 text-white"></sd-6-2-1-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-2-
|
|
220
|
+
"border-solid border-[1px] border-l-0 sd-6-2-1-notification-color-border",
|
|
221
221
|
{
|
|
222
|
-
info: "sd-6-2-
|
|
223
|
-
success: "sd-6-2-
|
|
224
|
-
warning: "sd-6-2-
|
|
225
|
-
error: "sd-6-2-
|
|
222
|
+
info: "sd-6-2-1-notification--info-color-background",
|
|
223
|
+
success: "sd-6-2-1-notification--success-color-background",
|
|
224
|
+
warning: "sd-6-2-1-notification--warning-color-background",
|
|
225
|
+
error: "sd-6-2-1-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-2-
|
|
227
|
+
)}"><slot id="message" part="message" class="block w-full pl-3 py-2"></slot>${this.closable ? html`<sd-6-2-1-button size="md" variant="tertiary" part="close-button" class="ml-auto flex flex-[0_0_auto] items-stretch" @click="${this.handleCloseClick}"><sd-6-2-1-icon label="${this.localize.term("close")}" name="close" library="_internal" color="currentColor"></sd-6-2-1-icon></sd-6-2-1-button>` : ""}</div>${this.durationIndicator ? html`<div part="duration-indicator__elapsed" id="duration-indicator__elapsed" style="${`animation-duration: ${this.duration}ms`}" class="${cx(`absolute w-0 h-[2px] bottom-0 bg-primary z-10 animate-grow`)}"></div><div part="duration-indicator__total" class="w-full h-[2px] bottom-0 absolute border sd-6-2-1-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-2-
|
|
272
|
+
customElement("sd-6-2-1-notification")
|
|
273
273
|
], SdNotification);
|
|
274
274
|
setDefaultAnimation("notification.show", {
|
|
275
275
|
keyframes: [
|