@solid-design-system/components 4.6.13 → 4.6.14
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.J3MO67NR.js +4 -0
- package/cdn/components/tooltip/tooltip.d.ts +1 -0
- package/cdn/components/tooltip/tooltip.js +1 -1
- package/cdn/custom-elements.json +1 -1
- package/cdn/solid-components.bundle.js +13 -13
- package/cdn/solid-components.iife.js +13 -13
- package/cdn/solid-components.js +1 -1
- package/cdn/web-types.json +1 -1
- package/cdn-versioned/_components/menu/menu.js +1 -1
- package/cdn-versioned/_components/menu/menu.styles.js +1 -1
- package/cdn-versioned/_components/menu-item/menu-item.js +2 -2
- package/cdn-versioned/chunks/chunk.3CZQFEYM.js +1 -1
- package/cdn-versioned/chunks/chunk.3LNKE2CG.js +1 -1
- package/cdn-versioned/chunks/chunk.65NSSTJE.js +1 -1
- package/cdn-versioned/chunks/chunk.6G6DPUNG.js +1 -1
- package/cdn-versioned/chunks/chunk.6NP6ACYF.js +1 -1
- package/cdn-versioned/chunks/chunk.6WMAE6EM.js +1 -1
- package/cdn-versioned/chunks/chunk.7QJPML7E.js +1 -1
- package/cdn-versioned/chunks/chunk.7R5WVKOU.js +1 -1
- package/cdn-versioned/chunks/chunk.7VF3CHZ2.js +1 -1
- package/cdn-versioned/chunks/chunk.A2HHAWSZ.js +1 -1
- package/cdn-versioned/chunks/chunk.A4472UE3.js +1 -1
- package/cdn-versioned/chunks/chunk.AULSVEYK.js +1 -1
- package/cdn-versioned/chunks/chunk.C7TENCCC.js +1 -1
- package/cdn-versioned/chunks/chunk.CDEAOHOV.js +1 -1
- package/cdn-versioned/chunks/chunk.CEVVDV52.js +1 -1
- package/cdn-versioned/chunks/chunk.CJHO2CRN.js +1 -1
- package/cdn-versioned/chunks/chunk.CNGICFLY.js +1 -1
- package/cdn-versioned/chunks/chunk.CRUS5X5G.js +1 -1
- package/cdn-versioned/chunks/chunk.EAAM3VG2.js +3 -3
- package/cdn-versioned/chunks/chunk.EQSUVFCF.js +1 -1
- package/cdn-versioned/chunks/chunk.ETYUJIA4.js +1 -1
- package/cdn-versioned/chunks/chunk.FK5LYWC7.js +1 -1
- package/cdn-versioned/chunks/chunk.FPWMHC7P.js +1 -1
- package/cdn-versioned/chunks/chunk.FYIER3I3.js +1 -1
- package/cdn-versioned/chunks/chunk.G3JDMNCB.js +1 -1
- package/cdn-versioned/chunks/chunk.G5HXH4DJ.js +1 -1
- package/cdn-versioned/chunks/chunk.GG4532YR.js +1 -1
- package/cdn-versioned/chunks/chunk.HLHBWQSY.js +1 -1
- package/cdn-versioned/chunks/chunk.IMSUZE4K.js +1 -1
- package/cdn-versioned/chunks/chunk.J3MO67NR.js +4 -0
- package/cdn-versioned/chunks/chunk.KMWJUXQH.js +1 -1
- package/cdn-versioned/chunks/chunk.KSYRDJ33.js +1 -1
- package/cdn-versioned/chunks/chunk.L2PFOOBK.js +1 -1
- package/cdn-versioned/chunks/chunk.L7T6YEYN.js +1 -1
- package/cdn-versioned/chunks/chunk.LSAUVFWV.js +1 -1
- package/cdn-versioned/chunks/chunk.M7NPMAK2.js +1 -1
- package/cdn-versioned/chunks/chunk.MT35MRN2.js +1 -1
- package/cdn-versioned/chunks/chunk.NTK6WXO7.js +1 -1
- package/cdn-versioned/chunks/chunk.O62YAWLB.js +4 -4
- package/cdn-versioned/chunks/chunk.OCOLBSJK.js +2 -2
- package/cdn-versioned/chunks/chunk.P2CPGH2M.js +1 -1
- package/cdn-versioned/chunks/chunk.QE3HRWOD.js +4 -4
- package/cdn-versioned/chunks/chunk.QJK7ON6G.js +1 -1
- package/cdn-versioned/chunks/chunk.QX6EC2OV.js +1 -1
- package/cdn-versioned/chunks/chunk.RCNLUAML.js +1 -1
- package/cdn-versioned/chunks/chunk.RTOLPQCZ.js +1 -1
- package/cdn-versioned/chunks/chunk.SA2YRNVP.js +1 -1
- package/cdn-versioned/chunks/chunk.TGMCWOXL.js +1 -1
- package/cdn-versioned/chunks/chunk.TWHESFGL.js +1 -1
- package/cdn-versioned/chunks/chunk.UJZJOR6Z.js +1 -1
- package/cdn-versioned/chunks/chunk.W7A3TU2Z.js +1 -1
- package/cdn-versioned/chunks/chunk.YICLGCNM.js +1 -1
- package/cdn-versioned/chunks/chunk.ZDACAU6O.js +1 -1
- package/cdn-versioned/components/accordion/accordion.d.ts +1 -1
- package/cdn-versioned/components/accordion-group/accordion-group.d.ts +1 -1
- package/cdn-versioned/components/animation/animation.d.ts +1 -1
- package/cdn-versioned/components/audio/audio.d.ts +1 -1
- package/cdn-versioned/components/badge/badge.d.ts +1 -1
- package/cdn-versioned/components/brandshape/brandshape.d.ts +1 -1
- package/cdn-versioned/components/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/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/map-marker/map-marker.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 +2 -2
- 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 +2 -2
- package/cdn-versioned/components/scrollable/scrollable.d.ts +1 -1
- package/cdn-versioned/components/select/select.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/tooltip/tooltip.d.ts +2 -1
- package/cdn-versioned/components/tooltip/tooltip.js +1 -1
- package/cdn-versioned/components/video/video.d.ts +1 -1
- package/cdn-versioned/custom-elements.json +211 -211
- package/cdn-versioned/internal/form.js +3 -3
- package/cdn-versioned/solid-components.bundle.js +18 -18
- package/cdn-versioned/solid-components.css +2 -2
- package/cdn-versioned/solid-components.iife.js +18 -18
- package/cdn-versioned/solid-components.js +1 -1
- package/cdn-versioned/vscode.html-custom-data.json +80 -80
- package/cdn-versioned/web-types.json +137 -137
- package/dist/chunks/{chunk.DCOXCIL6.js → chunk.5DTO5VHH.js} +12 -2
- package/dist/components/tooltip/tooltip.d.ts +1 -0
- package/dist/components/tooltip/tooltip.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/_components/menu/menu.js +1 -1
- package/dist-versioned/_components/menu/menu.styles.js +1 -1
- package/dist-versioned/_components/menu-item/menu-item.js +2 -2
- package/dist-versioned/chunks/chunk.2J5UWA4O.js +6 -6
- package/dist-versioned/chunks/chunk.2ROGEIKB.js +2 -2
- package/dist-versioned/chunks/{chunk.DCOXCIL6.js → chunk.5DTO5VHH.js} +16 -6
- package/dist-versioned/chunks/chunk.5GXWP6YW.js +2 -2
- package/dist-versioned/chunks/chunk.5H3SWQYU.js +2 -2
- package/dist-versioned/chunks/chunk.5PZUOPFS.js +4 -4
- package/dist-versioned/chunks/chunk.6DKXZWRN.js +4 -4
- package/dist-versioned/chunks/chunk.7HZNYBYX.js +2 -2
- package/dist-versioned/chunks/chunk.AIC2K6F6.js +2 -2
- package/dist-versioned/chunks/chunk.BCX6GWFU.js +1 -1
- package/dist-versioned/chunks/chunk.BLEQBK6L.js +2 -2
- package/dist-versioned/chunks/chunk.BTFVVZN7.js +2 -2
- package/dist-versioned/chunks/chunk.C3OAT5IL.js +8 -8
- package/dist-versioned/chunks/chunk.COLY2AS3.js +3 -3
- package/dist-versioned/chunks/chunk.DCMNY5PW.js +1 -1
- package/dist-versioned/chunks/chunk.DDQ43DMG.js +1 -1
- package/dist-versioned/chunks/chunk.DRFKZJ6U.js +2 -2
- package/dist-versioned/chunks/chunk.EJADH4TP.js +2 -2
- package/dist-versioned/chunks/chunk.G6HSZF64.js +1 -1
- package/dist-versioned/chunks/chunk.GG6EDMMX.js +1 -1
- package/dist-versioned/chunks/chunk.GR4QWBKR.js +2 -2
- package/dist-versioned/chunks/chunk.HY3UDFFO.js +3 -3
- package/dist-versioned/chunks/chunk.IGLAKKCM.js +2 -2
- package/dist-versioned/chunks/chunk.IJO3II3P.js +2 -2
- package/dist-versioned/chunks/chunk.IUDU7IPQ.js +3 -3
- package/dist-versioned/chunks/chunk.IZJ3ASKW.js +2 -2
- package/dist-versioned/chunks/chunk.JKMRTFLI.js +1 -1
- package/dist-versioned/chunks/chunk.KDKAOP5K.js +5 -5
- package/dist-versioned/chunks/chunk.KVKRZJS7.js +3 -3
- package/dist-versioned/chunks/chunk.LHDIK3CL.js +1 -1
- package/dist-versioned/chunks/chunk.LMZE7CWI.js +2 -2
- package/dist-versioned/chunks/chunk.MHSIUMF2.js +5 -5
- package/dist-versioned/chunks/chunk.N4PCVM2O.js +1 -1
- package/dist-versioned/chunks/chunk.PAMIVTVZ.js +1 -1
- package/dist-versioned/chunks/chunk.QB4ZOKFD.js +4 -4
- package/dist-versioned/chunks/chunk.QGTHHUEP.js +11 -11
- package/dist-versioned/chunks/chunk.QJSVVX5A.js +5 -5
- package/dist-versioned/chunks/chunk.RSBV2TUF.js +3 -3
- package/dist-versioned/chunks/chunk.RX6EYXKU.js +1 -1
- package/dist-versioned/chunks/chunk.SA5CVRAH.js +1 -1
- package/dist-versioned/chunks/chunk.SH4PL7NS.js +26 -26
- package/dist-versioned/chunks/chunk.SONGMTFR.js +5 -5
- package/dist-versioned/chunks/chunk.TOAVJJSV.js +2 -2
- package/dist-versioned/chunks/chunk.UIQBHPD3.js +2 -2
- package/dist-versioned/chunks/chunk.ULJ5M2KG.js +1 -1
- package/dist-versioned/chunks/chunk.V2GCDMDD.js +9 -9
- package/dist-versioned/chunks/chunk.V32MUHC2.js +1 -1
- package/dist-versioned/chunks/chunk.VJYNSYQW.js +1 -1
- package/dist-versioned/chunks/chunk.WE6ILGOF.js +13 -13
- package/dist-versioned/chunks/chunk.XG3WGOFU.js +23 -23
- package/dist-versioned/chunks/chunk.ZFWQYTKN.js +14 -14
- package/dist-versioned/chunks/chunk.ZTC7JGWI.js +6 -6
- package/dist-versioned/chunks/chunk.ZW2FQM2X.js +2 -2
- 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/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/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/map-marker/map-marker.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 +2 -2
- 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 +2 -2
- package/dist-versioned/components/scrollable/scrollable.d.ts +1 -1
- package/dist-versioned/components/select/select.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/tooltip/tooltip.d.ts +2 -1
- package/dist-versioned/components/tooltip/tooltip.js +1 -1
- package/dist-versioned/components/video/video.d.ts +1 -1
- package/dist-versioned/custom-elements.json +211 -211
- 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 +80 -80
- package/dist-versioned/web-types.json +137 -137
- package/package.json +1 -1
- package/cdn/chunks/chunk.4YCOU55E.js +0 -4
- package/cdn-versioned/chunks/chunk.4YCOU55E.js +0 -4
|
@@ -93,7 +93,7 @@ var SdOption = class extends SolidElement {
|
|
|
93
93
|
)}"></span> ${this.checkbox ? html`<span id="control" part="control ${this.selected ? " control--checked" : "control--unchecked"}" class="${cx(
|
|
94
94
|
"relative flex flex-shrink-0 items-center justify-center border rounded-sm h-4 w-4 mr-2",
|
|
95
95
|
this.disabled ? "border-neutral-500" : this.selected ? "bg-accent border-accent" : "border-neutral-800"
|
|
96
|
-
)}">${this.selected ? html`<sd-4-6-
|
|
96
|
+
)}">${this.selected ? html`<sd-4-6-14-icon part="checked-icon" class="text-white w-3 h-3" library="system" name="status-check"></sd-4-6-14-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>`;
|
|
97
97
|
}
|
|
98
98
|
};
|
|
99
99
|
/**
|
|
@@ -140,7 +140,7 @@ __decorateClass([
|
|
|
140
140
|
watch("value")
|
|
141
141
|
], SdOption.prototype, "handleValueChange", 1);
|
|
142
142
|
SdOption = __decorateClass([
|
|
143
|
-
customElement("sd-4-6-
|
|
143
|
+
customElement("sd-4-6-14-option")
|
|
144
144
|
], SdOption);
|
|
145
145
|
|
|
146
146
|
export {
|
|
@@ -84,7 +84,7 @@ var SdLink = class extends SolidElement {
|
|
|
84
84
|
};
|
|
85
85
|
SdLink.styles = [
|
|
86
86
|
...SolidElement.styles,
|
|
87
|
-
css`::slotted(sd-4-6-
|
|
87
|
+
css`::slotted(sd-4-6-14-icon){font-size:1.25em;margin-bottom:-.25em}:host([size=sm][standalone]) ::slotted(sd-4-6-14-icon){font-size:var(--sd-font-size-base,1rem)}:host([size=lg][standalone]) ::slotted(sd-4-6-14-icon){font-size:var(--sd-font-size-xl,1.5rem)}`
|
|
88
88
|
];
|
|
89
89
|
__decorateClass([
|
|
90
90
|
query("a")
|
|
@@ -111,7 +111,7 @@ __decorateClass([
|
|
|
111
111
|
property({ reflect: true })
|
|
112
112
|
], SdLink.prototype, "download", 2);
|
|
113
113
|
SdLink = __decorateClass([
|
|
114
|
-
customElement("sd-4-6-
|
|
114
|
+
customElement("sd-4-6-14-link")
|
|
115
115
|
], SdLink);
|
|
116
116
|
|
|
117
117
|
export {
|
|
@@ -323,7 +323,7 @@ __decorateClass([
|
|
|
323
323
|
property({ attribute: "auto-size-padding", type: Number })
|
|
324
324
|
], SdPopup.prototype, "autoSizePadding", 2);
|
|
325
325
|
SdPopup = __decorateClass([
|
|
326
|
-
customElement("sd-4-6-
|
|
326
|
+
customElement("sd-4-6-14-popup")
|
|
327
327
|
], SdPopup);
|
|
328
328
|
|
|
329
329
|
export {
|
|
@@ -89,7 +89,7 @@ var SdStep = class extends SolidElement {
|
|
|
89
89
|
!this.disabled && !this.current && !this.notInteractive && "text-primary group-hover:text-primary-500 group-hover:fill-primary-500",
|
|
90
90
|
this.notInteractive && "text-primary",
|
|
91
91
|
this.size === "lg" ? "text-lg" : "text-sm"
|
|
92
|
-
)}">${!this.disabled && !this.current && !this.notInteractive ? html`<sd-4-6-
|
|
92
|
+
)}">${!this.disabled && !this.current && !this.notInteractive ? html`<sd-4-6-14-icon name="status-check" library="system"></sd-4-6-14-icon>` : html`${this.index}`}</slot></${tag}>${this.noTail ? "" : html`<div part="tail" class="${cx(
|
|
93
93
|
this.orientation === "horizontal" ? "border-t w-full my-auto mr-2" : "border-l flex-grow flex-shrink-0 basis-auto h-full w-[1px] mx-auto",
|
|
94
94
|
!this.disabled && !this.current && !this.notInteractive ? " border-primary group-hover:border-primary-500" : "border-neutral-400"
|
|
95
95
|
)}"></div>`}</div><div part="text-container" class="${cx("mt-4 break-words flex flex-col gap-2", this.orientation === "horizontal" ? "text-center w-40" : "w-max text-left", this.disabled && "!text-neutral-700", this.notInteractive ? "ml-3" : "mr-4")}"><div part="label" id="label" class="${cx("!font-bold sd-paragraph", this.disabled && "!text-neutral-700", !this.disabled && !this.current && !this.notInteractive ? "!text-primary group-hover:!text-primary-500 group-hover:cursor-pointer" : "text-black")}"><slot name="label">${this.label}</slot></div><div part="description" id="description" class="${cx("sd-paragraph sd-paragraph--size-sm", this.disabled && "!text-neutral-700")}">${this.description || html`<slot></slot>`}</div></div></div>`;
|
|
@@ -139,7 +139,7 @@ __decorateClass([
|
|
|
139
139
|
watch("notInteractive")
|
|
140
140
|
], SdStep.prototype, "handleInteractivityChange", 1);
|
|
141
141
|
SdStep = __decorateClass([
|
|
142
|
-
customElement("sd-4-6-
|
|
142
|
+
customElement("sd-4-6-14-step")
|
|
143
143
|
], SdStep);
|
|
144
144
|
|
|
145
145
|
export {
|
|
@@ -64,10 +64,10 @@ var SdQuickfact = class extends SdAccordion {
|
|
|
64
64
|
!this.expandable && "hidden"
|
|
65
65
|
)}
|
|
66
66
|
><slot name="expand-icon" class=${cx(this.open && "hidden")}>
|
|
67
|
-
<sd-4-6-
|
|
67
|
+
<sd-4-6-14-icon library="system" name="chevron-down"></sd-4-6-14-icon>
|
|
68
68
|
</slot>
|
|
69
69
|
<slot name="collapse-icon" class=${cx(!this.open && "hidden")}>
|
|
70
|
-
<sd-4-6-
|
|
70
|
+
<sd-4-6-14-icon library="system" name="chevron-down"></sd-4-6-14-icon> </slot
|
|
71
71
|
></span>
|
|
72
72
|
</${header}>
|
|
73
73
|
<div part="content" id="content" class=${cx("overflow-hidden", !this.expandable && "hidden")}>
|
|
@@ -85,7 +85,7 @@ __decorateClass([
|
|
|
85
85
|
property({ type: Boolean, reflect: true })
|
|
86
86
|
], SdQuickfact.prototype, "expandable", 2);
|
|
87
87
|
SdQuickfact = __decorateClass([
|
|
88
|
-
customElement("sd-4-6-
|
|
88
|
+
customElement("sd-4-6-14-quickfact")
|
|
89
89
|
], SdQuickfact);
|
|
90
90
|
setDefaultAnimation("quickfact.show", {
|
|
91
91
|
keyframes: [
|
|
@@ -85,7 +85,7 @@ var SdRadioButton = class extends SolidElement {
|
|
|
85
85
|
};
|
|
86
86
|
SdRadioButton.styles = [
|
|
87
87
|
...SolidElement.styles,
|
|
88
|
-
css`:host{display:block;width:-moz-min-content;width:min-content}.hidden-input{all:unset;inset:var(--sd-spacing-0,0);opacity:var(--sd-opacity-0,0);outline-color:rgb(var(--sd-color-error,204 25 55)/1);outline-style:dotted;outline-width:1px;position:absolute;z-index:-10}.lg-label,.lg-no-label{height:var(--sd-spacing-12,3rem)}.lg-no-label{width:var(--sd-spacing-12,3rem)}.md-label,.md-no-label{height:var(--sd-spacing-10,2.5rem)}.md-no-label{width:var(--sd-spacing-10,2.5rem)}.sm-label,.sm-no-label{height:var(--sd-spacing-8,2rem)}.sm-no-label{width:var(--sd-spacing-8,2rem)}:host(.sd-4-6-
|
|
88
|
+
css`:host{display:block;width:-moz-min-content;width:min-content}.hidden-input{all:unset;inset:var(--sd-spacing-0,0);opacity:var(--sd-opacity-0,0);outline-color:rgb(var(--sd-color-error,204 25 55)/1);outline-style:dotted;outline-width:1px;position:absolute;z-index:-10}.lg-label,.lg-no-label{height:var(--sd-spacing-12,3rem)}.lg-no-label{width:var(--sd-spacing-12,3rem)}.md-label,.md-no-label{height:var(--sd-spacing-10,2.5rem)}.md-no-label{width:var(--sd-spacing-10,2.5rem)}.sm-label,.sm-no-label{height:var(--sd-spacing-8,2rem)}.sm-no-label{width:var(--sd-spacing-8,2rem)}:host(.sd-4-6-14-button-group__button--first:not(.sd-4-6-14-button-group__button--last)) button{border-bottom-right-radius:var(--sd-border-radius-none,0);border-top-right-radius:var(--sd-border-radius-none,0)}:host(.sd-4-6-14-button-group__button--inner) button{border-radius:var(--sd-border-radius-none,0)}:host(.sd-4-6-14-button-group__button--last:not(.sd-4-6-14-button-group__button--first)) button{border-bottom-left-radius:var(--sd-border-radius-none,0);border-top-left-radius:var(--sd-border-radius-none,0)}:host(.sd-4-6-14-button-group__button:not(.sd-4-6-14-button-group__button--first)){margin-inline-start:-1px}:host(.sd-4-6-14-button-group__button--hover){z-index:10}:host(.sd-4-6-14-button-group__button--focus),:host(.sd-4-6-14-button-group__button[checked]){z-index:20}`
|
|
89
89
|
];
|
|
90
90
|
__decorateClass([
|
|
91
91
|
query(".button")
|
|
@@ -115,7 +115,7 @@ __decorateClass([
|
|
|
115
115
|
watch(["disabled", "visually-disabled"], { waitUntilFirstUpdate: true })
|
|
116
116
|
], SdRadioButton.prototype, "handleDisabledChange", 1);
|
|
117
117
|
SdRadioButton = __decorateClass([
|
|
118
|
-
customElement("sd-4-6-
|
|
118
|
+
customElement("sd-4-6-14-radio-button")
|
|
119
119
|
], SdRadioButton);
|
|
120
120
|
|
|
121
121
|
export {
|
|
@@ -32,7 +32,7 @@ var SdDivider = class extends SolidElement {
|
|
|
32
32
|
*/
|
|
33
33
|
SdDivider.styles = [
|
|
34
34
|
...SolidElement.styles,
|
|
35
|
-
css`:host{margin:var(--sd-spacing-0,0)}:host(sd-4-6-
|
|
35
|
+
css`:host{margin:var(--sd-spacing-0,0)}:host(sd-4-6-14-divider[orientation=horizontal]){display:block}:host(sd-4-6-14-divider[orientation=vertical]){display:inline-block}`
|
|
36
36
|
];
|
|
37
37
|
__decorateClass([
|
|
38
38
|
property({ type: String, reflect: true })
|
|
@@ -41,7 +41,7 @@ __decorateClass([
|
|
|
41
41
|
property({ type: Boolean, reflect: true })
|
|
42
42
|
], SdDivider.prototype, "inverted", 2);
|
|
43
43
|
SdDivider = __decorateClass([
|
|
44
|
-
customElement("sd-4-6-
|
|
44
|
+
customElement("sd-4-6-14-divider")
|
|
45
45
|
], SdDivider);
|
|
46
46
|
|
|
47
47
|
export {
|
|
@@ -379,7 +379,7 @@ var SdInput = class extends SolidElement {
|
|
|
379
379
|
textSize,
|
|
380
380
|
this.visuallyDisabled && "cursor-not-allowed"
|
|
381
381
|
)}" type="${this.type === "password" && this.passwordVisible ? "text" : this.type}" title="${this.title}" name="${ifDefined(this.name)}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" ?required="${this.required}" placeholder="${ifDefined(this.placeholder)}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" min="${ifDefined(this.min)}" max="${ifDefined(this.max)}" step="${ifDefined(this.step)}" .value="${live(this.value)}" autocapitalize="${ifDefined(this.type === "password" ? "off" : this.autocapitalize)}" autocomplete="${// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
382
|
-
ifDefined(this.autocomplete)}" autocorrect="${ifDefined(this.type === "password" ? "off" : this.autocorrect)}" ?autofocus="${this.autofocus}" spellcheck="${this.spellcheck}" pattern="${ifDefined(this.pattern)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" aria-describedby="help-text invalid-message" aria-disabled="${this.visuallyDisabled || this.disabled ? "true" : "false"}" aria-invalid="${this.showInvalidStyle}" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @keydown="${this.handleKeyDown}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"> ${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-4-6-
|
|
382
|
+
ifDefined(this.autocomplete)}" autocorrect="${ifDefined(this.type === "password" ? "off" : this.autocorrect)}" ?autofocus="${this.autofocus}" spellcheck="${this.spellcheck}" pattern="${ifDefined(this.pattern)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" aria-describedby="help-text invalid-message" aria-disabled="${this.visuallyDisabled || this.disabled ? "true" : "false"}" aria-invalid="${this.showInvalidStyle}" @change="${this.handleChange}" @input="${this.handleInput}" @invalid="${this.handleInvalid}" @keydown="${this.handleKeyDown}" @focus="${this.handleFocus}" @blur="${this.handleBlur}"> ${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-4-6-14-icon class="${cx("icon-fill-neutral-800", iconSize)}" library="system" name="closing-round"></sd-4-6-14-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("flex items-center sd-interactive", iconMarginLeft)}" type="button" @click="${this.handlePasswordToggle}">${this.passwordVisible ? html`<slot name="show-password-icon"><sd-4-6-14-icon class="${cx(iconColor, iconSize)}" library="system" name="eye"></sd-4-6-14-icon></slot>` : html`<slot name="hide-password-icon"><sd-4-6-14-icon class="${cx(iconColor, iconSize)}" library="system" name="eye-crossed-out"></sd-4-6-14-icon></slot>`}</button>` : ""} ${(this.type === "date" || this.type === "datetime-local") && !isFirefox ? html`<sd-4-6-14-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="calendar"></sd-4-6-14-icon>` : ""} ${this.type === "time" ? html`<sd-4-6-14-icon class="${cx(iconColor, iconMarginLeft, iconSize)}" library="system" name="clock"></sd-4-6-14-icon>` : ""} ${this.type === "search" ? html`<button class="${cx("flex items-center sd-interactive", iconMarginLeft)}" type="button" @click="${this.handleSearchClick}"><sd-4-6-14-icon class="${cx(iconColor, iconSize)}" library="system" name="magnifying-glass" label="${this.localize.term("search")}"></sd-4-6-14-icon></button>` : ""} ${this.showInvalidStyle ? html`<sd-4-6-14-icon part="invalid-icon" class="${cx("text-error", iconMarginLeft, iconSize)}" library="system" name="risk"></sd-4-6-14-icon>` : ""} ${this.showValidStyle && this.styleOnValid ? html`<sd-4-6-14-icon class="${cx("text-success flex-shrink-0", iconMarginLeft, iconSize)}" library="system" name="status-check" part="valid-icon"></sd-4-6-14-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"><slot name="decrement-number-stepper"><sd-4-6-14-icon name="system/minus-circle" label="Decrease value" class="${cx(iconColor, iconMarginLeft, iconSize)}"></sd-4-6-14-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-4-6-14-icon name="system/plus-circle" label="Decrease value" class="${cx(iconColor, iconMarginLeft, iconSize)}"></sd-4-6-14-icon></slot></button></div>` : ""}</div></div><slot name="help-text" part="form-control-help-text" id="help-text" class="${cx("text-sm text-neutral-700 mt-2", hasHelpText ? "block" : "hidden")}" aria-hidden="${!hasHelpText}">${this.helpText}</slot></div>${this.formControlController.renderInvalidMessage()}`;
|
|
383
383
|
}
|
|
384
384
|
};
|
|
385
385
|
/**
|
|
@@ -387,7 +387,7 @@ var SdInput = class extends SolidElement {
|
|
|
387
387
|
*/
|
|
388
388
|
SdInput.styles = [
|
|
389
389
|
...SolidElement.styles,
|
|
390
|
-
css`:host{box-sizing:border-box;display:inline-block;position:relative;text-align:left;width:100%}:host([vertical]){display:block}:host([required]) #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}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-4-6-
|
|
390
|
+
css`:host{box-sizing:border-box;display:inline-block;position:relative;text-align:left;width:100%}:host([vertical]){display:block}:host([required]) #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}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-4-6-14-icon{--tw-text-opacity:1;color:rgb(var(--sd-color-neutral-500,174 174 174)/var(--tw-text-opacity,1))}`
|
|
391
391
|
];
|
|
392
392
|
__decorateClass([
|
|
393
393
|
query("#input")
|
|
@@ -517,7 +517,7 @@ __decorateClass([
|
|
|
517
517
|
watch("value", { waitUntilFirstUpdate: true })
|
|
518
518
|
], SdInput.prototype, "handleValueChange", 1);
|
|
519
519
|
SdInput = __decorateClass([
|
|
520
|
-
customElement("sd-4-6-
|
|
520
|
+
customElement("sd-4-6-14-input")
|
|
521
521
|
], SdInput);
|
|
522
522
|
|
|
523
523
|
export {
|
|
@@ -72,7 +72,7 @@ var SdExpandable = class extends SolidElement {
|
|
|
72
72
|
"sd-interactive sd-interactive--reset",
|
|
73
73
|
this.inverted && "sd-interactive--inverted",
|
|
74
74
|
!this.inverted ? "!focus-visible:focus-outline" : "!focus-visible:focus-outline-inverted"
|
|
75
|
-
)}" @click="${this.onToggleClick}" aria-expanded="${this.open}"><div class="${cx("h-full justify-center w-full text-base flex items-center toggle")}">${this.open ? html`<slot name="toggle-open"><sd-4-6-
|
|
75
|
+
)}" @click="${this.onToggleClick}" aria-expanded="${this.open}"><div class="${cx("h-full justify-center w-full text-base flex items-center toggle")}">${this.open ? html`<slot name="toggle-open"><sd-4-6-14-icon class="mr-2 text-xl" library="system" name="chevron-up"></sd-4-6-14-icon>${this.localize.term("showLess")}</slot>` : html`<slot name="toggle-closed"><sd-4-6-14-icon class="mr-2 text-xl" library="system" name="chevron-down"></sd-4-6-14-icon>${this.localize.term("showMore")}</slot>`}</div></button><details part="details" ?inert="${ifDefined(!this.open)}"><summary part="summary" aria-hidden="true" class="cursor-pointer overflow-hidden list-none"><slot name="clone"></slot></summary><div part="content" class="content content-preview overflow-hidden relative"><slot></slot></div></details></div>`;
|
|
76
76
|
}
|
|
77
77
|
firstUpdated() {
|
|
78
78
|
this.cloneContentToLightDOM();
|
|
@@ -109,7 +109,7 @@ __decorateClass([
|
|
|
109
109
|
watch("open", { waitUntilFirstUpdate: true })
|
|
110
110
|
], SdExpandable.prototype, "onOpenChange", 1);
|
|
111
111
|
SdExpandable = __decorateClass([
|
|
112
|
-
customElement("sd-4-6-
|
|
112
|
+
customElement("sd-4-6-14-expandable")
|
|
113
113
|
], SdExpandable);
|
|
114
114
|
|
|
115
115
|
export {
|
|
@@ -26,7 +26,7 @@ var SdCheckboxGroup = class extends SolidElement {
|
|
|
26
26
|
this.helpText = "";
|
|
27
27
|
}
|
|
28
28
|
getAllCheckboxes() {
|
|
29
|
-
return [...this.querySelectorAll("sd-4-6-
|
|
29
|
+
return [...this.querySelectorAll("sd-4-6-14-checkbox")];
|
|
30
30
|
}
|
|
31
31
|
async syncCheckboxElements() {
|
|
32
32
|
const checkboxes = this.getAllCheckboxes();
|
|
@@ -39,10 +39,10 @@ var SdCheckboxGroup = class extends SolidElement {
|
|
|
39
39
|
);
|
|
40
40
|
}
|
|
41
41
|
syncCheckboxes() {
|
|
42
|
-
if (customElements.get("sd-4-6-
|
|
42
|
+
if (customElements.get("sd-4-6-14-checkbox")) {
|
|
43
43
|
this.syncCheckboxElements();
|
|
44
44
|
} else {
|
|
45
|
-
customElements.whenDefined("sd-4-6-
|
|
45
|
+
customElements.whenDefined("sd-4-6-14-checkbox").then(() => this.syncCheckboxes());
|
|
46
46
|
}
|
|
47
47
|
}
|
|
48
48
|
handleSizeChange() {
|
|
@@ -79,7 +79,7 @@ var SdCheckboxGroup = class extends SolidElement {
|
|
|
79
79
|
*/
|
|
80
80
|
SdCheckboxGroup.styles = [
|
|
81
81
|
...SolidElement.styles,
|
|
82
|
-
css`:host{display:block}:host([orientation=vertical]) ::slotted(sd-4-6-
|
|
82
|
+
css`:host{display:block}:host([orientation=vertical]) ::slotted(sd-4-6-14-checkbox){display:flex;margin-bottom:var(--sd-spacing-2,.5rem)}:host([orientation=vertical]) ::slotted(sd-4-6-14-checkbox:last-of-type){margin-bottom:var(--sd-spacing-0,0)}:host([orientation=horizontal]) ::slotted(sd-4-6-14-checkbox){margin-right:var(--sd-spacing-6,1.5rem)}:host([orientation=horizontal]) ::slotted(sd-4-6-14-checkbox:last-of-type){margin-right:var(--sd-spacing-0,0)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-4-6-14-checkbox){margin-right:var(--sd-spacing-4,1rem)}:host([orientation=horizontal]):host([size=sm]) ::slotted(sd-4-6-14-checkbox:last-of-type){margin-right:var(--sd-spacing-0,0)}`
|
|
83
83
|
];
|
|
84
84
|
__decorateClass([
|
|
85
85
|
property({ type: String, reflect: true })
|
|
@@ -100,7 +100,7 @@ __decorateClass([
|
|
|
100
100
|
watch("invalid", { waitUntilFirstUpdate: true })
|
|
101
101
|
], SdCheckboxGroup.prototype, "handleInvalid", 1);
|
|
102
102
|
SdCheckboxGroup = __decorateClass([
|
|
103
|
-
customElement("sd-4-6-
|
|
103
|
+
customElement("sd-4-6-14-checkbox-group")
|
|
104
104
|
], SdCheckboxGroup);
|
|
105
105
|
|
|
106
106
|
export {
|
|
@@ -15,7 +15,7 @@ var FormControlController = class {
|
|
|
15
15
|
const disabled = this.options.disabled(this.host);
|
|
16
16
|
const name = this.options.name(this.host);
|
|
17
17
|
const value = this.options.value(this.host);
|
|
18
|
-
const isButton = this.host.tagName.toLowerCase() === "sd-4-6-
|
|
18
|
+
const isButton = this.host.tagName.toLowerCase() === "sd-4-6-14-button";
|
|
19
19
|
if (!disabled && !isButton && typeof name === "string" && name.length > 0 && typeof value !== "undefined") {
|
|
20
20
|
if (Array.isArray(value)) {
|
|
21
21
|
value.forEach((val) => {
|
|
@@ -40,7 +40,7 @@ var FormControlController = class {
|
|
|
40
40
|
event.stopImmediatePropagation();
|
|
41
41
|
const invalidElements = (_b = this.form) == null ? void 0 : _b.querySelectorAll("[data-invalid]");
|
|
42
42
|
const sdRadioGroups = Array.from(invalidElements).filter(
|
|
43
|
-
(element) => element.tagName.toLowerCase() === "sd-4-6-
|
|
43
|
+
(element) => element.tagName.toLowerCase() === "sd-4-6-14-radio-group"
|
|
44
44
|
);
|
|
45
45
|
sdRadioGroups.forEach((radioGroup) => {
|
|
46
46
|
var _a2, _b2;
|
|
@@ -88,7 +88,7 @@ var FormControlController = class {
|
|
|
88
88
|
},
|
|
89
89
|
reportValidity: (input) => typeof input.reportValidity === "function" ? input.reportValidity() : true,
|
|
90
90
|
setValue: (input, value) => input.value = value,
|
|
91
|
-
assumeInteractionOn: ["sd-4-6-
|
|
91
|
+
assumeInteractionOn: ["sd-4-6-14-input"]
|
|
92
92
|
}, options);
|
|
93
93
|
}
|
|
94
94
|
hostConnected() {
|
|
@@ -168,7 +168,7 @@ __decorateClass([
|
|
|
168
168
|
watch(["checked"], { waitUntilFirstUpdate: true })
|
|
169
169
|
], SdSwitch.prototype, "handleStateChange", 1);
|
|
170
170
|
SdSwitch = __decorateClass([
|
|
171
|
-
customElement("sd-4-6-
|
|
171
|
+
customElement("sd-4-6-14-switch")
|
|
172
172
|
], SdSwitch);
|
|
173
173
|
|
|
174
174
|
export {
|
|
@@ -69,7 +69,7 @@ var SdTag = class extends SolidElement {
|
|
|
69
69
|
/* colors */
|
|
70
70
|
!this.selected ? "border-primary text-primary hover:border-primary-500 hover:bg-neutral-100 hover:text-primary-500 disabled:border-neutral-500 disabled:text-neutral-500" : "bg-primary border-primary text-white hover:bg-primary-500 hover:border-primary-500 disabled:bg-neutral-500 disabled:border-neutral-500",
|
|
71
71
|
this.disabled && !isLink && "cursor-not-allowed"
|
|
72
|
-
)}"><slot id="content" part="content"></slot>${this.removable ? html`<button class="sd-interactive flex items-center" type="button" @click="${this.handleRemoveClick}"><slot part="removable-indicator" name="removable-indicator"><sd-4-6-
|
|
72
|
+
)}"><slot id="content" part="content"></slot>${this.removable ? html`<button class="sd-interactive flex items-center" type="button" @click="${this.handleRemoveClick}"><slot part="removable-indicator" name="removable-indicator"><sd-4-6-14-icon library="system" name="close" label="${this.localize.term("remove")}"></sd-4-6-14-icon></slot></button>` : ""}</${tag}>`;
|
|
73
73
|
}
|
|
74
74
|
};
|
|
75
75
|
SdTag.styles = [
|
|
@@ -104,7 +104,7 @@ __decorateClass([
|
|
|
104
104
|
property({ reflect: true })
|
|
105
105
|
], SdTag.prototype, "download", 2);
|
|
106
106
|
SdTag = __decorateClass([
|
|
107
|
-
customElement("sd-4-6-
|
|
107
|
+
customElement("sd-4-6-14-tag")
|
|
108
108
|
], SdTag);
|
|
109
109
|
|
|
110
110
|
export {
|
|
@@ -85,7 +85,7 @@ var SdFlipcard = class extends SolidElement {
|
|
|
85
85
|
"gradient-light": this.placement === "top" ? "bg-gradient-to-b from-white/60 to-white/0 mb-auto" : "bg-gradient-to-t from-white/60 to-white/0 mt-auto",
|
|
86
86
|
"gradient-dark": this.placement === "bottom" ? "bg-gradient-to-t from-primary-800/60 to-primary-800/0 mt-auto" : "bg-gradient-to-b from-primary-800/60 to-primary-800/0 mb-auto"
|
|
87
87
|
}[this.frontVariant]
|
|
88
|
-
)}"></div><sd-4-6-
|
|
88
|
+
)}"></div><sd-4-6-14-button part="front-button" size="md" variant="${{
|
|
89
89
|
primary: "tertiary",
|
|
90
90
|
"primary-100": "tertiary",
|
|
91
91
|
"gradient-light": "primary",
|
|
@@ -95,7 +95,7 @@ var SdFlipcard = class extends SolidElement {
|
|
|
95
95
|
"primary-100": false,
|
|
96
96
|
"gradient-light": true,
|
|
97
97
|
"gradient-dark": true
|
|
98
|
-
}[this.frontVariant]}" class="${cx("absolute right-0 p-2 flex-shrink-0", this.placement === "top" ? "bottom-0" : "top-0")}" @click="${this.flipFront}" @keydown="${this.handleFrontKeydown}"><sd-4-6-
|
|
98
|
+
}[this.frontVariant]}" class="${cx("absolute right-0 p-2 flex-shrink-0", this.placement === "top" ? "bottom-0" : "top-0")}" @click="${this.flipFront}" @keydown="${this.handleFrontKeydown}"><sd-4-6-14-icon library="system" name="reload" label="Flip to Back"></sd-4-6-14-icon></sd-4-6-14-button></div><div part="back" tabindex="0" aria-hidden="${this.activeSide === "front"}" inert="${ifDefined(this.activeSide === "front" || void 0)}" class="${cx(
|
|
99
99
|
"flip-card__side flip-card__side--back overflow-hidden transition-transform duration-1000 ease-in-out",
|
|
100
100
|
"flex focus-visible:focus-outline",
|
|
101
101
|
"absolute top-0 left-0 w-full h-full justify-end text-left",
|
|
@@ -128,7 +128,7 @@ var SdFlipcard = class extends SolidElement {
|
|
|
128
128
|
"gradient-light": this.placement === "top" ? "bg-gradient-to-b from-white/60 to-white/0 mb-auto" : "bg-gradient-to-t from-white/60 to-white/0 mt-auto",
|
|
129
129
|
"gradient-dark": this.placement === "bottom" ? "bg-gradient-to-t from-primary-800/60 to-primary-800/0 mt-auto" : "bg-gradient-to-b from-primary-800/60 to-primary-800/0 mb-auto"
|
|
130
130
|
}[this.backVariant]
|
|
131
|
-
)}"></div><sd-4-6-
|
|
131
|
+
)}"></div><sd-4-6-14-button size="md" part="back-button" variant="${{
|
|
132
132
|
primary: "tertiary",
|
|
133
133
|
"primary-100": "tertiary",
|
|
134
134
|
"gradient-light": "primary",
|
|
@@ -138,7 +138,7 @@ var SdFlipcard = class extends SolidElement {
|
|
|
138
138
|
"primary-100": false,
|
|
139
139
|
"gradient-light": true,
|
|
140
140
|
"gradient-dark": true
|
|
141
|
-
}[this.backVariant]}" class="${cx("absolute right-0 p-2 flex-shrink-0", this.placement === "top" ? "bottom-0" : "top-0")}" @click="${this.flipBack}" @keydown="${this.handleBackKeydown}"><sd-4-6-
|
|
141
|
+
}[this.backVariant]}" class="${cx("absolute right-0 p-2 flex-shrink-0", this.placement === "top" ? "bottom-0" : "top-0")}" @click="${this.flipBack}" @keydown="${this.handleBackKeydown}"><sd-4-6-14-icon library="system" name="reload" label="Flip to Front"></sd-4-6-14-icon></sd-4-6-14-button></div></div>`;
|
|
142
142
|
}
|
|
143
143
|
};
|
|
144
144
|
/**
|
|
@@ -170,7 +170,7 @@ __decorateClass([
|
|
|
170
170
|
state()
|
|
171
171
|
], SdFlipcard.prototype, "activeSide", 2);
|
|
172
172
|
SdFlipcard = __decorateClass([
|
|
173
|
-
customElement("sd-4-6-
|
|
173
|
+
customElement("sd-4-6-14-flipcard")
|
|
174
174
|
], SdFlipcard);
|
|
175
175
|
|
|
176
176
|
export {
|
|
@@ -181,15 +181,15 @@ var SdNotification = class extends SolidElement {
|
|
|
181
181
|
warning: "bg-warning",
|
|
182
182
|
error: "bg-error"
|
|
183
183
|
}[this.variant]
|
|
184
|
-
)}"><sd-4-6-
|
|
184
|
+
)}"><sd-4-6-14-icon name="${{
|
|
185
185
|
info: "info-circle",
|
|
186
186
|
success: "confirm-circle",
|
|
187
187
|
warning: "exclamation-circle",
|
|
188
188
|
error: "warning"
|
|
189
|
-
}[this.variant] || ""}" library="system" class="h-6 w-6 text-white"></sd-4-6-
|
|
189
|
+
}[this.variant] || ""}" library="system" class="h-6 w-6 text-white"></sd-4-6-14-icon></slot><div part="content" class="${cx(
|
|
190
190
|
"h-full w-full p-1 gap-2 flex items-center justify-stretch bg-white",
|
|
191
191
|
"border-solid border-[1px] border-l-0 border-neutral-400"
|
|
192
|
-
)}"><slot id="message" part="message" class="block w-full pl-3 py-2"></slot>${this.closable ? html`<sd-4-6-
|
|
192
|
+
)}"><slot id="message" part="message" class="block w-full pl-3 py-2"></slot>${this.closable ? html`<sd-4-6-14-button size="md" variant="tertiary" part="close-button" class="ml-auto flex flex-[0_0_auto] items-stretch" @click="${this.handleCloseClick}"><sd-4-6-14-icon label="${this.localize.term("close")}" name="close" library="system" color="currentColor"></sd-4-6-14-icon></sd-4-6-14-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 border-neutral-400"></div>` : ""}</div>`;
|
|
193
193
|
}
|
|
194
194
|
};
|
|
195
195
|
/**
|
|
@@ -230,7 +230,7 @@ __decorateClass([
|
|
|
230
230
|
watch("duration")
|
|
231
231
|
], SdNotification.prototype, "handleDurationChange", 1);
|
|
232
232
|
SdNotification = __decorateClass([
|
|
233
|
-
customElement("sd-4-6-
|
|
233
|
+
customElement("sd-4-6-14-notification")
|
|
234
234
|
], SdNotification);
|
|
235
235
|
setDefaultAnimation("notification.show", {
|
|
236
236
|
keyframes: [
|
|
@@ -17,19 +17,19 @@ var SdButtonGroup = class extends SolidElement {
|
|
|
17
17
|
}
|
|
18
18
|
handleFocus(event) {
|
|
19
19
|
const button = findButton(event.target);
|
|
20
|
-
button == null ? void 0 : button.classList.add("sd-4-6-
|
|
20
|
+
button == null ? void 0 : button.classList.add("sd-4-6-14-button-group__button--focus");
|
|
21
21
|
}
|
|
22
22
|
handleBlur(event) {
|
|
23
23
|
const button = findButton(event.target);
|
|
24
|
-
button == null ? void 0 : button.classList.remove("sd-4-6-
|
|
24
|
+
button == null ? void 0 : button.classList.remove("sd-4-6-14-button-group__button--focus");
|
|
25
25
|
}
|
|
26
26
|
handleMouseOver(event) {
|
|
27
27
|
const button = findButton(event.target);
|
|
28
|
-
button == null ? void 0 : button.classList.add("sd-4-6-
|
|
28
|
+
button == null ? void 0 : button.classList.add("sd-4-6-14-button-group__button--hover");
|
|
29
29
|
}
|
|
30
30
|
handleMouseOut(event) {
|
|
31
31
|
const button = findButton(event.target);
|
|
32
|
-
button == null ? void 0 : button.classList.remove("sd-4-6-
|
|
32
|
+
button == null ? void 0 : button.classList.remove("sd-4-6-14-button-group__button--hover");
|
|
33
33
|
}
|
|
34
34
|
handleSlotChange() {
|
|
35
35
|
const slottedElements = [...this.defaultSlot.assignedElements({ flatten: true })];
|
|
@@ -37,11 +37,11 @@ var SdButtonGroup = class extends SolidElement {
|
|
|
37
37
|
const index = slottedElements.indexOf(el);
|
|
38
38
|
const button = findButton(el);
|
|
39
39
|
if (button !== null) {
|
|
40
|
-
button.classList.add("sd-4-6-
|
|
41
|
-
button.classList.toggle("sd-4-6-
|
|
42
|
-
button.classList.toggle("sd-4-6-
|
|
43
|
-
button.classList.toggle("sd-4-6-
|
|
44
|
-
button.classList.toggle("sd-4-6-
|
|
40
|
+
button.classList.add("sd-4-6-14-button-group__button");
|
|
41
|
+
button.classList.toggle("sd-4-6-14-button-group__button--first", index === 0);
|
|
42
|
+
button.classList.toggle("sd-4-6-14-button-group__button--inner", index > 0 && index < slottedElements.length - 1);
|
|
43
|
+
button.classList.toggle("sd-4-6-14-button-group__button--last", index === slottedElements.length - 1);
|
|
44
|
+
button.classList.toggle("sd-4-6-14-button-group__button--radio", button.tagName.toLowerCase() === "sd-4-6-14-radio-button");
|
|
45
45
|
}
|
|
46
46
|
});
|
|
47
47
|
}
|
|
@@ -63,11 +63,11 @@ __decorateClass([
|
|
|
63
63
|
property({ type: String, reflect: true })
|
|
64
64
|
], SdButtonGroup.prototype, "label", 2);
|
|
65
65
|
SdButtonGroup = __decorateClass([
|
|
66
|
-
customElement("sd-4-6-
|
|
66
|
+
customElement("sd-4-6-14-button-group")
|
|
67
67
|
], SdButtonGroup);
|
|
68
68
|
function findButton(el) {
|
|
69
69
|
var _a;
|
|
70
|
-
const selector = "sd-4-6-
|
|
70
|
+
const selector = "sd-4-6-14-button, sd-4-6-14-radio-button";
|
|
71
71
|
return (_a = el.closest(selector)) != null ? _a : el.querySelector(selector);
|
|
72
72
|
}
|
|
73
73
|
|
|
@@ -116,16 +116,16 @@ var SdNavigationItem = class extends SolidElement {
|
|
|
116
116
|
isAccordion ? "grow" : "w-full",
|
|
117
117
|
slots["description"] || this.separated ? "pb-1" : horizontalPaddingBottom,
|
|
118
118
|
this.calculatePaddingX
|
|
119
|
-
)}">${this.divider && this.vertical ? html`<sd-4-6-
|
|
119
|
+
)}">${this.divider && this.vertical ? html`<sd-4-6-14-divider part="divider" class="${cx("w-full transition-all absolute -top-0.25 left-0", this.calculatePaddingX)}"></sd-4-6-14-divider>` : ""} <span part="content-container" class="inline-flex items-center flex-auto">${this.separated ? html`<a class="${cx(
|
|
120
120
|
"mr-4 w-full inline-flex items-center pl-4 cursor-pointer relative focus-visible:focus-outline hover:bg-neutral-200 group transition-all min-h-[48px]",
|
|
121
121
|
!slots["description"] && "py-4"
|
|
122
|
-
)}" href="${ifDefined(isLink ? this.href : void 0)}" target="${ifDefined(isLink ? this.target : void 0)}" download="${ifDefined(isLink ? this.download : void 0)}"><slot part="content" class="inline"></slot></a>` : html`<slot part="content" class="inline"></slot>`} </span>${(this.chevron || slots["children"]) && this.vertical ? this.separated ? html`<button type="button" title="${this.open ? this.localize.term("collapseNavigationItem") : this.localize.term("expandNavigationItem")}" class="sd-interactive sd-interactive--reset" @click="${this.handleClickSummary}"><sd-4-6-
|
|
122
|
+
)}" href="${ifDefined(isLink ? this.href : void 0)}" target="${ifDefined(isLink ? this.target : void 0)}" download="${ifDefined(isLink ? this.download : void 0)}"><slot part="content" class="inline"></slot></a>` : html`<slot part="content" class="inline"></slot>`} </span>${(this.chevron || slots["children"]) && this.vertical ? this.separated ? html`<button type="button" title="${this.open ? this.localize.term("collapseNavigationItem") : this.localize.term("expandNavigationItem")}" class="sd-interactive sd-interactive--reset" @click="${this.handleClickSummary}"><sd-4-6-14-icon name="chevron-down" part="chevron" library="system" color="currentColor" class="${cx(
|
|
123
123
|
"mr-4 h-6 w-6 transition-all",
|
|
124
124
|
isAccordion || this.separated ? this.open ? "rotate-180" : "rotate-0" : "rotate-[270deg]"
|
|
125
|
-
)}"></sd-4-6-
|
|
125
|
+
)}"></sd-4-6-14-icon></button>` : html`<sd-4-6-14-icon name="chevron-down" part="chevron" library="system" color="currentColor" class="${cx(
|
|
126
126
|
"h-6 w-6 ml-2 transition-all",
|
|
127
127
|
isAccordion ? this.open ? "rotate-180" : "rotate-0" : "rotate-[270deg]"
|
|
128
|
-
)}"></sd-4-6-
|
|
128
|
+
)}"></sd-4-6-14-icon>` : ""} </span>${slots["description"] && this.vertical ? html`<slot name="description" part="description" class="${cx(
|
|
129
129
|
"inline-block text-sm text-left text-black",
|
|
130
130
|
isAccordion || this.separated ? "grow" : "w-full",
|
|
131
131
|
this.separated ? "px-4" : this.calculatePaddingX,
|
|
@@ -190,7 +190,7 @@ __decorateClass([
|
|
|
190
190
|
property({ type: Boolean, reflect: true })
|
|
191
191
|
], SdNavigationItem.prototype, "separated", 2);
|
|
192
192
|
SdNavigationItem = __decorateClass([
|
|
193
|
-
customElement("sd-4-6-
|
|
193
|
+
customElement("sd-4-6-14-navigation-item")
|
|
194
194
|
], SdNavigationItem);
|
|
195
195
|
|
|
196
196
|
export {
|
|
@@ -41,16 +41,16 @@ var SdAccordionGroup = class extends SolidElement {
|
|
|
41
41
|
};
|
|
42
42
|
SdAccordionGroup.styles = [
|
|
43
43
|
...SolidElement.styles,
|
|
44
|
-
css`:host{display:block}::slotted(sd-4-6-
|
|
44
|
+
css`:host{display:block}::slotted(sd-4-6-14-accordion:not(:first-of-type)){margin-top:-1px}`
|
|
45
45
|
];
|
|
46
46
|
__decorateClass([
|
|
47
|
-
queryAssignedElements({ selector: "sd-4-6-
|
|
47
|
+
queryAssignedElements({ selector: "sd-4-6-14-accordion" })
|
|
48
48
|
], SdAccordionGroup.prototype, "_accordionsInDefaultSlot", 2);
|
|
49
49
|
__decorateClass([
|
|
50
50
|
property({ attribute: "close-others", type: Boolean, reflect: true })
|
|
51
51
|
], SdAccordionGroup.prototype, "closeOthers", 2);
|
|
52
52
|
SdAccordionGroup = __decorateClass([
|
|
53
|
-
customElement("sd-4-6-
|
|
53
|
+
customElement("sd-4-6-14-accordion-group")
|
|
54
54
|
], SdAccordionGroup);
|
|
55
55
|
|
|
56
56
|
export {
|