@solid-design-system/components 4.0.8 → 4.0.10

package/dist/chunks/{chunk.BJIZPRT4.js → chunk.4SBQOWLU.js}

@@ -54,6 +54,7 @@ var SdCheckboxGroup = class extends SolidElement {
     const hasLabelSlot = this.hasSlotController.test("label");
     const hasLabel = this.label ? true : hasLabelSlot;
     const defaultSlot = html`<slot @slotchange="${this.syncCheckboxes}"></slot>`;
+    const hasTooltip = this.hasSlotController.test("tooltip");
     return html`<fieldset part="form-control" class="${cx(
       "border-0 p-0 m-0",
       {
@@ -62,7 +63,7 @@ var SdCheckboxGroup = class extends SolidElement {
         md: "text-base",
         lg: "text-base"
       }[this.size]
-    )}" role="group" aria-labelledby="label"><div class="flex items-center gap-1 mb-2"><label part="form-control-label" id="label" class="${cx("p-0 font-bold leading-normal text-black", hasLabel ? "flex" : "hidden")}" aria-hidden="${hasLabel ? "false" : "true"}"><slot name="label">${this.label}</slot></label><slot name="tooltip"></slot></div><div part="form-control-input" class="${cx(
+    )}" role="group" aria-labelledby="label">${hasLabel || hasTooltip ? html`<div class="flex items-center gap-1 mb-2"><label part="form-control-label" id="label" class="${cx("p-0 font-bold leading-normal text-black", hasLabel ? "flex" : "hidden")}" aria-hidden="${hasLabel ? "false" : "true"}"><slot name="label">${this.label}</slot></label> ${hasTooltip ? html`<slot name="tooltip"></slot>` : ""}</div>` : null}<div part="form-control-input" class="${cx(
       {
         vertical: "flex flex-col",
         horizontal: "flex flex-row"

package/dist/chunks/{chunk.L32THKSR.js → chunk.5FOKRIWL.js}

@@ -328,11 +328,13 @@ var SdInput = class extends SolidElement {
       helpText: this.hasSlotController.test("help-text"),
       description: this.hasSlotController.test("description"),
       left: this.hasSlotController.test("left"),
-      right: this.hasSlotController.test("right")
+      right: this.hasSlotController.test("right"),
+      tooltip: this.hasSlotController.test("tooltip")
     };
     const hasLabel = this.label ? true : !!slots["label"];
     const hasHelpText = this.helpText ? true : !!slots["helpText"];
     const hasClearIcon = this.clearable && !this.readonly && (typeof this.value === "number" || this.value.length > 0);
+    const hasTooltip = !!slots["tooltip"];
     const inputState = this.disabled ? "disabled" : this.readonly ? "readonly" : this.hasFocus && this.showInvalidStyle ? "activeInvalid" : this.hasFocus && this.styleOnValid && this.showValidStyle ? "activeValid" : this.hasFocus ? "active" : this.showInvalidStyle ? "invalid" : this.styleOnValid && this.showValidStyle ? "valid" : "default";
     const textSize = this.size === "sm" ? "text-sm" : "text-base";
     const borderColor = {
@@ -352,7 +354,7 @@ var SdInput = class extends SolidElement {
       md: "text-lg",
       lg: "text-xl"
     }[this.size];
-    return html`<div part="form-control" class="${cx(this.disabled && "pointer-events-none")}"><div class="flex items-center gap-1 mb-2"><label part="form-control-label" id="label" class="${cx(hasLabel ? "inline-block" : "hidden", textSize)}" for="input" aria-hidden="${hasLabel ? "false" : "true"}"><slot name="label">${this.label}</slot></label><slot name="tooltip"></slot></div><div part="form-control-input" class="relative w-full"><div part="border" class="${cx("absolute w-full h-full pointer-events-none border rounded-default", borderColor)}"></div><div part="base" class="${cx(
+    return html`<div part="form-control" class="${cx(this.disabled && "pointer-events-none")}">${hasLabel || hasTooltip ? html`<div class="flex items-center gap-1 mb-2"><label part="form-control-label" id="label" class="${cx(hasLabel ? "inline-block" : "hidden", textSize)}" for="input" aria-hidden="${hasLabel ? "false" : "true"}"><slot name="label">${this.label}</slot></label> ${slots["tooltip"] ? html`<slot name="tooltip"></slot>` : ""}</div>` : null}<div part="form-control-input" class="relative w-full"><div part="border" class="${cx("absolute w-full h-full pointer-events-none border rounded-default", borderColor)}"></div><div part="base" class="${cx(
       "px-4 flex flex-row items-center rounded-default transition-all",
       // Vertical Padding
       this.size === "lg" ? "py-2" : "py-1",

package/dist/chunks/{chunk.UTSM3BM3.js → chunk.D3I3AZEX.js}

@@ -244,6 +244,7 @@ var SdRadioGroup = class extends SolidElement {
   render() {
     const hasLabelSlot = this.hasSlotController.test("label");
     const hasLabel = this.label ? true : !!hasLabelSlot;
+    const hasTooltipSlot = this.hasSlotController.test("tooltip");
     const defaultSlot = html`<slot @slotchange="${this.syncRadios}" @click="${this.handleRadioClick}" @keydown="${this.handleKeyDown}"></slot>`;
     return html`<fieldset part="form-control" class="${cx(
       "border-0 p-0 m-0 flex flex-col",
@@ -253,7 +254,11 @@ var SdRadioGroup = class extends SolidElement {
         md: "text-base",
         lg: "text-base"
       }[this.size]
-    )}" role="radiogroup" aria-describedby="invalid-message"><div class="flex items-center gap-1 mb-2"><legend part="form-control-label" id="label" class="${cx("p-0 leading-normal text-black text-left", !hasLabel && "hidden", this.boldLabel && "font-bold")}" @click="${this.focus}" aria-hidden="${hasLabel ? "false" : "true"}"><slot name="label">${this.label}</slot></legend><slot name="tooltip"></slot></div><div part="form-control-input" class="${cx(
+    )}" role="radiogroup" aria-describedby="invalid-message">${hasLabelSlot || hasTooltipSlot ? html`<div class="flex items-center gap-1 mb-2"><legend part="form-control-label" id="label" class="${cx(
+      "p-0 leading-normal text-black text-left",
+      !hasLabel && "hidden",
+      this.boldLabel && "font-bold"
+    )}" @click="${this.focus}" aria-hidden="${hasLabel ? "false" : "true"}"><slot name="label">${this.label}</slot></legend>${hasTooltipSlot ? html`<slot name="tooltip"></slot>` : ""}</div>` : null}<div part="form-control-input" class="${cx(
       "flex",
       {
         vertical: "flex-col",

package/dist/chunks/{chunk.HP2TVELZ.js → chunk.I5ZJV32M.js}

@@ -56,8 +56,8 @@ var SdMapMarker = class extends SolidElement {
       this.variant === "place" && !this.notInteractive && "hover:fill-primary-100",
       {
         cluster: "fill-primary",
-        main: "fill-accent *:drop-shadow-md",
-        place: "*:drop-shadow-md"
+        main: "fill-accent",
+        place: ""
       }[this.variant]
     )}">${this.marker[this.variant]}</div><div id="content" part="content" class="${cx("absolute self-center pointer-events-none", this.variant === "cluster" && "font-bold text-white")}"><slot></slot></div></${tag}>`;
   }
@@ -67,7 +67,7 @@ var SdMapMarker = class extends SolidElement {
  */
 SdMapMarker.styles = [
   ...SolidElement.styles,
-  css`:host{display:block}:host([variant=cluster]) [part=base],svg{width:calc(var(--sd-spacing-12,3rem)*var(--map-marker-scaling,1))}:host([variant=cluster]) [part=base]{height:calc(var(--sd-spacing-12,3rem)*var(--map-marker-scaling,1))}:host(:not([variant=cluster])) [part=base]{height:calc(var(--sd-spacing-16,4rem)*var(--map-marker-scaling,1))}:host([variant=cluster]) [part=content]{font-size:calc(var(--sd-font-size-sm,.875rem)*var(--map-marker-scaling,1))}:host([variant=place]) [part=content]{font-size:calc(var(--sd-font-size-3xl,2rem)*var(--map-marker-scaling,1))}`
+  css`:host{display:block}:host([variant=cluster]) [part=base],svg{width:calc(var(--sd-spacing-12,3rem)*var(--map-marker-scaling,1))}:host([variant=cluster]) [part=base]{height:calc(var(--sd-spacing-12,3rem)*var(--map-marker-scaling,1))}:host(:not([variant=cluster])) [part=base]{height:calc(var(--sd-spacing-16,4rem)*var(--map-marker-scaling,1))}:host([variant=cluster]) [part=content]{font-size:calc(var(--sd-font-size-sm,.875rem)*var(--map-marker-scaling,1))}:host([variant=place]) [part=content]{font-size:calc(var(--sd-font-size-3xl,2rem)*var(--map-marker-scaling,1));margin-top:calc(var(--sd-spacing-2,.5rem)*-1)}:host([variant=main]) [part=marker],:host([variant=place]) [part=marker]{--tw-drop-shadow:drop-shadow(var(--sd-shadow,0px 1px 3px #515151));filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}`
 ];
 __decorateClass([
   property({ reflect: true })

package/dist/chunks/{chunk.Y7254YJM.js → chunk.RSPK767T.js}

@@ -166,10 +166,12 @@ var SdTextarea = class extends SolidElement {
   render() {
     const slots = {
       label: this.hasSlotController.test("label"),
-      helpText: this.hasSlotController.test("help-text")
+      helpText: this.hasSlotController.test("help-text"),
+      tooltip: this.hasSlotController.test("tooltip")
     };
     const hasLabel = this.label ? true : !!slots["label"];
     const hasHelpText = this.helpText ? true : !!slots["helpText"];
+    const hasTooltip = !!slots["tooltip"];
     const textareaState = this.disabled ? "disabled" : this.readonly ? "readonly" : this.hasFocus && this.showInvalidStyle ? "activeInvalid" : this.hasFocus && this.styleOnValid && this.showValidStyle ? "activeValid" : this.hasFocus ? "active" : this.showInvalidStyle ? "invalid" : this.styleOnValid && this.showValidStyle ? "valid" : "default";
     const textSize = this.size === "sm" ? "text-sm" : "text-base";
     const iconSizeMarginLeft = {
@@ -177,7 +179,7 @@ var SdTextarea = class extends SolidElement {
       md: "text-lg ml-2",
       lg: "text-xl ml-2"
     }[this.size];
-    return html`<div part="form-control" class="flex flex-col h-full text-left"><div class="flex items-center gap-1 mb-2"><label part="form-control-label" id="label" class="${cx(hasLabel ? "inline-block" : "hidden", textSize)}" for="input" aria-hidden="${hasLabel ? "false" : "true"}"><slot name="label">${this.label}</slot></label><slot name="tooltip"></slot></div><div part="form-control-input" class="${cx("relative h-full w-full", this.disabled && "cursor-not-allowed")}"><div part="border" class="${cx(
+    return html`<div part="form-control" class="flex flex-col h-full text-left">${hasLabel || hasTooltip ? html`<div class="flex items-center gap-1 mb-2"><label part="form-control-label" id="label" class="${cx(hasLabel ? "inline-block" : "hidden", textSize)}" for="input" aria-hidden="${hasLabel ? "false" : "true"}"><slot name="label">${this.label}</slot></label> ${slots["tooltip"] ? html`<slot name="tooltip"></slot>` : ""}</div>` : null}<div part="form-control-input" class="${cx("relative h-full w-full", this.disabled && "cursor-not-allowed")}"><div part="border" class="${cx(
       "absolute w-full h-full pointer-events-none border rounded-default",
       {
         disabled: "border-neutral-500",

package/dist/chunks/{chunk.XQNY7RZD.js → chunk.USMGTQQG.js}

@@ -571,11 +571,13 @@ var SdSelect = class extends SolidElement {
       label: this.hasSlotController.test("label"),
       clearIcon: this.hasSlotController.test("clear-icon"),
       expandIcon: this.hasSlotController.test("expand-icon"),
-      helpText: this.hasSlotController.test("help-text")
+      helpText: this.hasSlotController.test("help-text"),
+      tooltip: this.hasSlotController.test("tooltip")
     };
     const hasLabel = this.label ? true : !!slots["label"];
     const hasHelpText = this.helpText ? true : !!slots["helpText"];
     const hasClearIcon = this.clearable && !this.disabled;
+    const hasTooltip = !!slots["tooltip"];
     const selectState = this.disabled ? "disabled" : this.hasFocus && this.showInvalidStyle ? "activeInvalid" : this.hasFocus && this.styleOnValid && this.showValidStyle ? "activeValid" : this.hasFocus || this.open ? "active" : this.showInvalidStyle ? "invalid" : this.styleOnValid && this.showValidStyle ? "valid" : "default";
     const cursorStyles = this.disabled ? "cursor-not-allowed" : "cursor-pointer";
     const iconMarginLeft = { sm: "ml-1", md: "ml-2", lg: "ml-2" }[this.size];
@@ -589,7 +591,7 @@ var SdSelect = class extends SolidElement {
       cursorStyles,
       this.size === "sm" ? "text-sm" : "text-base",
       this.open && "z-50"
-    )}"><span class="sr-only" role="alert" aria-live="assertive">${this.deletedTagLabel}</span><div class="flex items-center gap-1 mb-2"><label id="label" part="form-control-label" class="${hasLabel && "inline-block"}" aria-hidden="${hasLabel ? "false" : "true"}" @click="${this.handleLabelClick}"><slot name="label">${this.label}</slot></label><slot name="tooltip"></slot></div><div part="form-control-input" class="${cx("relative w-full bg-white", selectState === "disabled" ? "text-neutral-500" : "text-black")}"><div part="border" class="${cx(
+    )}"><span class="sr-only" role="alert" aria-live="assertive">${this.deletedTagLabel}</span> ${hasLabel || hasTooltip ? html`<div class="flex items-center gap-1 mb-2"><label id="label" part="form-control-label" class="${hasLabel && "inline-block"}" aria-hidden="${hasLabel ? "false" : "true"}" @click="${this.handleLabelClick}"><slot name="label">${this.label}</slot></label> ${slots["tooltip"] ? html`<slot name="tooltip"></slot>` : ""}</div>` : null}<div part="form-control-input" class="${cx("relative w-full bg-white", selectState === "disabled" ? "text-neutral-500" : "text-black")}"><div part="border" class="${cx(
       "absolute top-0 w-full h-full pointer-events-none border rounded-default",
       this.hasHover && "bg-neutral-200",
       {

package/dist/components/checkbox-group/checkbox-group.js

@@ -1,6 +1,6 @@
 import {
   SdCheckboxGroup
-} from "../../chunks/chunk.BJIZPRT4.js";
+} from "../../chunks/chunk.4SBQOWLU.js";
 import "../../chunks/chunk.X2PI2F35.js";
 import "../../chunks/chunk.P52GZVKG.js";
 import "../../chunks/chunk.RPB53XXV.js";

package/dist/components/input/input.js

@@ -1,6 +1,6 @@
 import {
   SdInput
-} from "../../chunks/chunk.L32THKSR.js";
+} from "../../chunks/chunk.5FOKRIWL.js";
 import "../../chunks/chunk.GI7VDIWX.js";
 import "../../chunks/chunk.KVKRZJS7.js";
 import "../../chunks/chunk.X2PI2F35.js";

package/dist/components/map-marker/map-marker.js

@@ -1,6 +1,6 @@
 import {
   SdMapMarker
-} from "../../chunks/chunk.HP2TVELZ.js";
+} from "../../chunks/chunk.I5ZJV32M.js";
 import "../../chunks/chunk.HFHUY7YD.js";
 import "../../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/components/radio-group/radio-group.js

@@ -1,6 +1,6 @@
 import {
   SdRadioGroup
-} from "../../chunks/chunk.UTSM3BM3.js";
+} from "../../chunks/chunk.D3I3AZEX.js";
 import "../../chunks/chunk.A625ONY2.js";
 import "../../chunks/chunk.KVKRZJS7.js";
 import "../../chunks/chunk.H5BDO4H5.js";

package/dist/components/select/select.js

@@ -1,6 +1,6 @@
 import {
   SdSelect
-} from "../../chunks/chunk.XQNY7RZD.js";
+} from "../../chunks/chunk.USMGTQQG.js";
 import "../../chunks/chunk.KH4M6HPE.js";
 import "../../chunks/chunk.VTUCPGYW.js";
 import "../../chunks/chunk.GI7VDIWX.js";

package/dist/components/textarea/textarea.js

@@ -1,6 +1,6 @@
 import {
   SdTextarea
-} from "../../chunks/chunk.Y7254YJM.js";
+} from "../../chunks/chunk.RSPK767T.js";
 import "../../chunks/chunk.GI7VDIWX.js";
 import "../../chunks/chunk.KVKRZJS7.js";
 import "../../chunks/chunk.X2OQMWGY.js";