@sellmate/design-system 1.0.67 → 1.0.69

package/dist/cjs/sd-chip.cjs.entry.js

@@ -0,0 +1,312 @@
+'use strict';
+
+var index = require('./index-B2QvhbC3.js');
+
+const chip = {
+	height: "24",
+	paddingX: "8",
+	gap: "4",
+	radius: "9999",
+	typography: {
+		"default": {
+			fontFamily: "Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif",
+			fontSize: "12",
+			fontWeight: "500",
+			lineHeight: "20"
+		},
+		focus: {
+			fontFamily: "Pretendard Variable, Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Segoe UI, Apple SD Gothic Neo, Noto Sans KR, Malgun Gothic, Apple Color Emoji, Segoe UI Emoji, sans-serif",
+			fontSize: "12",
+			fontWeight: "400",
+			lineHeight: "20"
+		}
+	},
+	bg: {
+		"default": "#F6F6F6",
+		error: "#FCEFEF",
+		focus: "#FFFFFF"
+	},
+	content: {
+		"default": "#888888",
+		error: "#E30000",
+		focus: "#555555"
+	},
+	border: {
+		focus: "#E1E1E1",
+		width: "1"
+	}
+};
+var chipTokens = {
+	chip: chip
+};
+
+const CHIP_LAYOUT = {
+    height: `${chipTokens.chip.height}px`,
+    paddingX: `${chipTokens.chip.paddingX}px`,
+    gap: `${chipTokens.chip.gap}px`,
+    radius: `${chipTokens.chip.radius}px`,
+    borderWidth: `${chipTokens.chip.border.width}px`,
+};
+const CHIP_COLORS = {
+    bg: {
+        default: chipTokens.chip.bg.default,
+        error: chipTokens.chip.bg.error,
+        focus: chipTokens.chip.bg.focus,
+    },
+    content: {
+        default: chipTokens.chip.content.default,
+        error: chipTokens.chip.content.error,
+        focus: chipTokens.chip.content.focus,
+    },
+    border: {
+        focus: chipTokens.chip.border.focus,
+    },
+};
+const CHIP_TYPOGRAPHY = {
+    default: {
+        fontFamily: chipTokens.chip.typography.default.fontFamily,
+        fontSize: `${chipTokens.chip.typography.default.fontSize}px`,
+        fontWeight: chipTokens.chip.typography.default.fontWeight,
+        lineHeight: `${chipTokens.chip.typography.default.lineHeight}px`,
+    },
+    focus: {
+        fontFamily: chipTokens.chip.typography.focus.fontFamily,
+        fontSize: `${chipTokens.chip.typography.focus.fontSize}px`,
+        fontWeight: chipTokens.chip.typography.focus.fontWeight,
+        lineHeight: `${chipTokens.chip.typography.focus.lineHeight}px`,
+    },
+};
+
+const sdChipCss = () => `sd-chip{display:inline-flex;width:fit-content;height:fit-content}sd-chip .sd-chip{display:inline-flex;align-items:center;justify-content:center;gap:var(--sd-chip-gap);height:var(--sd-chip-height);padding:0 var(--sd-chip-padding-x);border-radius:var(--sd-chip-radius);background:var(--sd-chip-bg);color:var(--sd-chip-content);border:var(--sd-chip-border-width) solid var(--sd-chip-border-color);font-family:var(--sd-chip-font-family);font-size:var(--sd-chip-font-size);font-weight:var(--sd-chip-font-weight);line-height:var(--sd-chip-line-height);box-sizing:border-box;white-space:nowrap;-webkit-user-select:none;user-select:none}sd-chip .sd-chip--editable:not(.sd-chip--focus){cursor:text}sd-chip .sd-chip--disabled{cursor:not-allowed;opacity:0.6}sd-chip .sd-chip__label{display:inline-flex;align-items:center;min-width:0}sd-chip .sd-chip__input{display:inline-block;min-width:1ch;outline:none;background:transparent;color:inherit;font:inherit;white-space:nowrap;cursor:text}sd-chip .sd-chip__input:empty::before{content:attr(data-placeholder);color:inherit;opacity:0.6;pointer-events:none}sd-chip .sd-chip__remove{flex-shrink:0}`;
+
+const SdChip = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.update = index.createEvent(this, "sdUpdate", 7);
+        this.remove = index.createEvent(this, "sdRemove", 7);
+        this.focus = index.createEvent(this, "sdFocus", 7);
+        this.blur = index.createEvent(this, "sdBlur", 7);
+    }
+    get el() { return index.getElement(this); }
+    name = '';
+    value = '';
+    error = false;
+    disabled = false;
+    placeholder = '';
+    rules = [];
+    internalValue = '';
+    isEditing = false;
+    update;
+    remove;
+    focus;
+    blur;
+    inputEl;
+    draftValue = '';
+    shouldInitInput = false;
+    valueChanged(newValue) {
+        const nextValue = newValue ?? '';
+        const wasEditing = this.isEditing;
+        this.internalValue = nextValue;
+        this.draftValue = nextValue;
+        if (wasEditing) {
+            this.isEditing = false;
+            this.shouldInitInput = false;
+            this.inputEl?.blur();
+            this.blur.emit();
+        }
+    }
+    componentWillLoad() {
+        this.internalValue = this.value ?? '';
+    }
+    componentDidLoad() {
+        this.registerToForm();
+    }
+    disconnectedCallback() {
+        this.unregisterFromForm();
+    }
+    async sdValidate() {
+        if (!this.rules || this.rules.length === 0) {
+            this.error = false;
+            return true;
+        }
+        for (const rule of this.rules) {
+            const result = rule(this.internalValue ?? '');
+            if (result !== true) {
+                this.error = true;
+                return false;
+            }
+        }
+        this.error = false;
+        return true;
+    }
+    async sdReset() {
+        this.internalValue = '';
+        this.value = '';
+        this.error = false;
+        this.draftValue = '';
+        this.isEditing = false;
+        this.shouldInitInput = false;
+    }
+    async sdResetValidate() {
+        this.error = false;
+    }
+    async sdResetValidation() {
+        this.error = false;
+    }
+    async sdFocus() {
+        if (this.disabled)
+            return;
+        this.enterEditMode();
+    }
+    async sdGetNativeElement() {
+        return this.inputEl ?? null;
+    }
+    enterEditMode = () => {
+        if (this.disabled || this.isEditing)
+            return;
+        this.draftValue = this.internalValue;
+        this.shouldInitInput = true;
+        this.isEditing = true;
+        this.focus.emit();
+    };
+    commitEdit = async () => {
+        if (!this.isEditing)
+            return;
+        const next = (this.inputEl?.textContent ?? this.draftValue).trim();
+        const changed = next !== this.draftValue;
+        this.internalValue = next;
+        this.isEditing = false;
+        this.shouldInitInput = false;
+        this.value = next;
+        if (changed) {
+            this.update.emit(next);
+        }
+        await this.sdValidate();
+        this.blur.emit();
+    };
+    cancelEdit = () => {
+        if (!this.isEditing)
+            return;
+        this.internalValue = this.draftValue;
+        this.isEditing = false;
+        this.shouldInitInput = false;
+        this.blur.emit();
+    };
+    handleChipClick = () => {
+        if (this.disabled || this.isEditing)
+            return;
+        this.enterEditMode();
+    };
+    handleChipKeyDown = (event) => {
+        if (this.disabled || this.isEditing)
+            return;
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.enterEditMode();
+        }
+    };
+    handleInputChange = (event) => {
+        const target = event.target;
+        this.internalValue = target.textContent ?? '';
+    };
+    handleInputKeyDown = (event) => {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            this.commitEdit();
+        }
+        else if (event.key === 'Escape') {
+            event.preventDefault();
+            this.cancelEdit();
+        }
+    };
+    handleInputBlur = () => {
+        this.commitEdit();
+    };
+    handlePaste = (event) => {
+        event.preventDefault();
+        const text = event.clipboardData?.getData('text/plain') ?? '';
+        document.execCommand('insertText', false, text);
+    };
+    handleRemoveClick = (event) => {
+        event.stopPropagation();
+        if (this.disabled)
+            return;
+        this.remove.emit();
+    };
+    syncInputValue(value) {
+        if (!this.inputEl)
+            return;
+        this.inputEl.textContent = value;
+        const range = document.createRange();
+        range.selectNodeContents(this.inputEl);
+        range.collapse(false);
+        const selection = window.getSelection();
+        selection?.removeAllRanges();
+        selection?.addRange(range);
+    }
+    registerToForm() {
+        const formEl = this.el.closest('sd-form');
+        if (!formEl || typeof formEl.componentOnReady !== 'function')
+            return;
+        formEl.componentOnReady().then(form => {
+            form.sdRegisterField(this);
+        });
+    }
+    unregisterFromForm() {
+        if (!this.name)
+            return;
+        const formEl = this.el.closest('sd-form');
+        formEl?.componentOnReady().then(form => {
+            form.sdUnregisterField(this.name);
+        });
+    }
+    componentDidUpdate() {
+        if (this.isEditing && this.inputEl && this.shouldInitInput) {
+            this.inputEl.focus();
+            this.syncInputValue(this.internalValue);
+            this.shouldInitInput = false;
+        }
+    }
+    resolveState() {
+        if (this.isEditing)
+            return 'focus';
+        if (this.error)
+            return 'error';
+        return 'default';
+    }
+    render() {
+        const state = this.resolveState();
+        const typography = state === 'focus' ? CHIP_TYPOGRAPHY.focus : CHIP_TYPOGRAPHY.default;
+        const cssVars = {
+            '--sd-chip-height': CHIP_LAYOUT.height,
+            '--sd-chip-padding-x': CHIP_LAYOUT.paddingX,
+            '--sd-chip-gap': CHIP_LAYOUT.gap,
+            '--sd-chip-radius': CHIP_LAYOUT.radius,
+            '--sd-chip-border-width': CHIP_LAYOUT.borderWidth,
+            '--sd-chip-bg': CHIP_COLORS.bg[state],
+            '--sd-chip-content': CHIP_COLORS.content[state],
+            '--sd-chip-border-color': state === 'focus' ? CHIP_COLORS.border.focus : 'transparent',
+            '--sd-chip-font-family': typography.fontFamily,
+            '--sd-chip-font-size': typography.fontSize,
+            '--sd-chip-font-weight': typography.fontWeight,
+            '--sd-chip-line-height': typography.lineHeight,
+        };
+        return (index.h("span", { key: 'ec814d57fb4032de1370e56d61cd51b6e831312a', class: {
+                'sd-chip': true,
+                [`sd-chip--${state}`]: true,
+                'sd-chip--disabled': this.disabled,
+                'sd-chip--editable': !this.disabled,
+            }, role: this.disabled ? undefined : 'button', tabIndex: this.disabled || this.isEditing ? -1 : 0, "aria-disabled": this.disabled ? 'true' : undefined, style: cssVars, onClick: this.handleChipClick, onKeyDown: this.handleChipKeyDown }, this.isEditing ? (index.h("span", { key: "chip-input", ref: el => (this.inputEl = el), class: "sd-chip__input", contentEditable: !this.disabled, "data-placeholder": this.placeholder, spellcheck: false, onInput: this.handleInputChange, onKeyDown: this.handleInputKeyDown, onBlur: this.handleInputBlur, onPaste: this.handlePaste, onClick: event => event.stopPropagation() })) : ([
+            index.h("span", { key: "chip-label", class: "sd-chip__label" }, this.internalValue),
+            !this.disabled && (index.h("sd-ghost-button", { key: "chip-remove", class: "sd-chip__remove", icon: "close", size: "xxs", ariaLabel: "remove", onClick: this.handleRemoveClick })),
+        ])));
+    }
+    static get watchers() { return {
+        "value": [{
+                "valueChanged": 0
+            }]
+    }; }
+};
+SdChip.style = sdChipCss();
+
+exports.sd_chip = SdChip;

package/dist/cjs/sd-circle-progress.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BpT5VmKY.js');
+var index = require('./index-B2QvhbC3.js');
 
 const spinner = {
 	color: {
@@ -63,7 +63,7 @@ const SdCircleProgress = class {
             arcStyle.strokeDashoffset = '0';
         }
         const c = CIRCLE_PROGRESS_VIEWBOX_SIZE / 2;
-        return (index.h(index.Host, { key: 'fb876909febfc95bb69c58031ac37419baa07137', style: hostStyle }, index.h("svg", { key: '3bb8130bab317a74c1553dd2ceb52b8c0f65f69f', class: "sd-circle-progress", viewBox: `0 0 ${CIRCLE_PROGRESS_VIEWBOX_SIZE} ${CIRCLE_PROGRESS_VIEWBOX_SIZE}`, xmlns: "http://www.w3.org/2000/svg" }, index.h("circle", { key: '5904f93a6b1c333dbcbd805140d5e65b5af20080', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), index.h("circle", { key: '4d8a1d352e4003a75dd63f67a66a05f595ae5700', class: "sd-circle-progress__arc", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH, "stroke-linecap": "round", style: arcStyle }))));
+        return (index.h(index.Host, { key: '50b598305810f4f91c5afb7ede87c60178e4e6df', style: hostStyle }, index.h("svg", { key: '7edcf8a57bf5589910d08a47b64179222ce9c03b', class: "sd-circle-progress", viewBox: `0 0 ${CIRCLE_PROGRESS_VIEWBOX_SIZE} ${CIRCLE_PROGRESS_VIEWBOX_SIZE}`, xmlns: "http://www.w3.org/2000/svg" }, index.h("circle", { key: '43810b096bdd644e4b09bfd770de6b0194afe3c8', class: "sd-circle-progress__track", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH }), index.h("circle", { key: '701cfdd0eadabea530d3a9deada993a568f3fb19', class: "sd-circle-progress__arc", cx: c, cy: c, r: CIRCLE_PROGRESS_RADIUS, fill: "none", "stroke-width": CIRCLE_PROGRESS_STROKE_WIDTH, "stroke-linecap": "round", style: arcStyle }))));
     }
 };
 SdCircleProgress.style = sdCircleProgressCss();

package/dist/cjs/sd-confirm-modal_2.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BpT5VmKY.js');
+var index = require('./index-B2QvhbC3.js');
 var component_modal = require('./component.modal-BFelrSMx.js');
 
 const CONFIRM_MODAL_DEFAULT_BUTTON = {
@@ -96,9 +96,9 @@ const SdConfirmModal = class {
     render() {
         const iconName = CONFIRM_MODAL_ICON_MAP[this.type];
         const iconColor = CONFIRM_MODAL_ICON_COLOR[this.type];
-        return (index.h("div", { key: 'c95e6e3992e9d63c19f27624e92c00b5046503e0', class: "sd-confirm-modal" }, index.h("sd-ghost-button", { key: 'edab233c28ebcfc181062d78cb80ec27a3ace8b4', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (index.h("sd-icon", { key: '4ea2ef8ac6027a6455367b39b6d3cc6cf073f0a8', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), index.h("h2", { key: '5a25a6f0812a6932949a2667db2af1b69d772293', class: `sd-confirm-modal__title ${this.titleClass}` }, this.modalTitle), index.h("div", { key: 'b431572003c129a0d44095a317532b535753abd3', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (index.h("div", { key: 'cd425d24bde982323a0156ff18f4dcdc81660dd5', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (index.h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg }))))), this.showContentBox && (index.h("div", { key: '9486cf19dc6692228f615112b0777b6167c1a8de', class: "sd-confirm-modal__content-box" }, this.tagContents ? (index.h("div", { class: "sd-confirm-modal__custom-content", ref: el => {
+        return (index.h("div", { key: '0ec5edeaef4920bb9193c225e5b39465e138eb25', class: "sd-confirm-modal" }, index.h("sd-ghost-button", { key: '78db09f415f399302048280a2d3eb6eb737c1d47', class: "sd-confirm-modal__close-button", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() }), iconName && (index.h("sd-icon", { key: '30921f2c1fc59b7baa608c5b270f45cced3b4a69', class: "sd-confirm-modal__icon", name: iconName, size: TITLE_ICON_SIZE, color: iconColor })), index.h("h2", { key: 'fdb1fa855a980ccad41101de0b1b0fc87a8a503b', class: `sd-confirm-modal__title ${this.titleClass}` }, this.modalTitle), index.h("div", { key: 'e3539c1d7e82c957ba65e3d63e18e74108ed4ccc', class: "sd-confirm-modal__body" }, (this.topMessage ?? []).length > 0 && (index.h("div", { key: '010bb3a2918672714a664cc9afa561d82ea2af30', class: "sd-confirm-modal__message" }, (this.topMessage ?? []).map(msg => (index.h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg }))))), this.showContentBox && (index.h("div", { key: '6501c456b1cac2fc14e62e8094c5996472eb10cc', class: "sd-confirm-modal__content-box" }, this.tagContents ? (index.h("div", { class: "sd-confirm-modal__custom-content", ref: el => {
                 this.customContentRef = el;
-            } })) : (index.h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && index.h("sd-tag", { name: this.tagPreset, label: this.tagLabel }), this.slotLabel && (index.h("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (index.h("div", { key: '7218d8bf72e26f36f88db68f57818911bb09056d', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (index.h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg })))))), index.h("div", { key: 'e16de1bb3c851988050b12ac07c7adcedab560da', class: "sd-confirm-modal__button" }, this.subButtonLabel && (index.h("sd-button-v2", { key: '8c14b099e6b8a93673ff3eb2f0931a45c98d620a', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), index.h("sd-button-v2", { key: 'fb9a3984f0476d2fceca98bac186d0a52a0ab206', name: this.resolvedMainButton, label: this.mainButtonLabel, onSdClick: () => this.ok.emit() }))));
+            } })) : (index.h("slot", { onSlotchange: () => this.syncHasSlottedContent() }, this.tagLabel && index.h("sd-tag", { name: this.tagPreset, label: this.tagLabel }), this.slotLabel && (index.h("span", { class: "sd-confirm-modal__slot-label" }, this.slotLabel)))))), (this.bottomMessage ?? []).length > 0 && (index.h("div", { key: 'fb38b92bc7ee05ede36eab14d65062a0b6289762', class: "sd-confirm-modal__message" }, (this.bottomMessage ?? []).map(msg => (index.h("p", { class: "sd-confirm-modal__message-text", innerHTML: msg })))))), index.h("div", { key: '7834c5baf84a1537e511f77f1d2bb2c018b2e5df', class: "sd-confirm-modal__button" }, this.subButtonLabel && (index.h("sd-button-v2", { key: 'ca7a8fa074bde0339052adbacb52a60459e3da23', name: SUB_BUTTON_PRESET, label: this.subButtonLabel, onSdClick: () => this.cancel.emit() })), index.h("sd-button-v2", { key: '5e3238161e753a8ea2a0266d099ff03a89b63871', name: this.resolvedMainButton, label: this.mainButtonLabel, onSdClick: () => this.ok.emit() }))));
     }
 };
 SdConfirmModal.style = sdConfirmModalCss();
@@ -178,7 +178,7 @@ const SdLoadingModal = class {
             '--sd-loading-modal-width': this.toCssSize(this.width) ?? `${LOADING_MODAL_LAYOUT.minWidth}px`,
             '--sd-loading-modal-height': this.toCssSize(this.height) ?? `${LOADING_MODAL_LAYOUT.minHeight}px`,
         };
-        return (index.h(index.Host, { key: '19735a93969986e8af39ae1dbe6b2373936e8304', style: hostStyle }, index.h("div", { key: 'd82512e430460c47619ce54ceab5961637e43bc0', class: "sd-loading-modal" }, index.h("div", { key: '265d697fe23e64366ce43ffc489c7c9a62c9a72c', class: "sd-loading-modal__content" }, this.state === 'loading' ? (index.h("sd-circle-progress", { indeterminate: true })) : (index.h("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), index.h("p", { key: '17800ecf73823075c5efb694e244f986c07759be', class: "sd-loading-modal__message" }, this.resolvedMessage), this.useButton && (index.h("div", { key: '03b7d5599356974df47546e4256bd093a1a3c991', class: "sd-loading-modal__button" }, index.h("sd-button-v2", { key: '5dc71e51cc524a3dc01d7c020b763117718ec170', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
+        return (index.h(index.Host, { key: '8ecd5db2ffde201dd0c7d3c58b1da6b85b5a4116', style: hostStyle }, index.h("div", { key: '61f79b16b22d5ab4bb4dca03f88568174cfcfb1f', class: "sd-loading-modal" }, index.h("div", { key: 'bc373cfebab5949bee9c024bd86ca92d8294ff7b', class: "sd-loading-modal__content" }, this.state === 'loading' ? (index.h("sd-circle-progress", { indeterminate: true })) : (index.h("sd-icon", { class: "sd-loading-modal__icon", name: "warningOutline", size: LOADING_MODAL_LAYOUT.contentSize, color: LOADING_MODAL_COLORS.errorIcon }))), index.h("p", { key: 'e9015b9c9813b1968c8ca7991d654761eb3ee9b3', class: "sd-loading-modal__message" }, this.resolvedMessage), this.useButton && (index.h("div", { key: '4ed941961611fe9533bd2b989c9b68ef6c7ca741', class: "sd-loading-modal__button" }, index.h("sd-button-v2", { key: '13f4c5ef5ad5285d846716e5dd72d9f2565c08f9', name: LOADING_MODAL_BUTTON_PRESET, label: this.resolvedButtonLabel, onSdClick: this.handleClick }))))));
     }
 };
 SdLoadingModal.style = sdLoadingModalCss();

package/dist/cjs/sd-date-box.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BpT5VmKY.js');
+var index = require('./index-B2QvhbC3.js');
 
 const sdDateBoxCss = () => `.sd-date-box.sc-sd-date-box{display:flex;align-items:center;justify-content:center;width:38px;height:36px;font-size:14px;position:relative;box-sizing:border-box;text-align:center;transition:background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);border-radius:14px}.sd-date-box.sc-sd-date-box .sd-date-box__content.sc-sd-date-box{width:28px;height:28px;border-radius:14px;position:relative}.sd-date-box.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box{position:relative;z-index:2;-webkit-user-select:none;user-select:none;line-height:28px}.sd-date-box.sd-date-box--disabled.sc-sd-date-box{color:#CCCCCC;cursor:default !important;pointer-events:none}.sd-date-box.sc-sd-date-box:not(.sd-date-box--disabled){color:#333333;cursor:pointer}.sd-date-box.sd-hoverable.sc-sd-date-box:hover .sd-date-box__content.sc-sd-date-box{background:#D9EAFF}.sd-date-box.sd-date-box--in-range.sc-sd-date-box:not(.sd-date-box--disabled) .sd-date-box__content.sc-sd-date-box::before{content:"";position:absolute;top:0;left:-5px;width:calc(100% + 10px);height:100%;background:#D9EAFF}.sd-date-box.sd-date-box--in-range.sd-date-box--type-start.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::before{left:auto !important;width:19px !important;right:-5px}.sd-date-box.sd-date-box--in-range.sd-date-box--type-end.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::before{width:19px !important}.sd-date-box.sd-date-box--in-range.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box{font-weight:500}.sd-date-box.sd-date-box--selected.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::after,.sd-date-box.sd-date-box--type-start.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::after,.sd-date-box.sd-date-box--type-end.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::after{content:"";position:absolute;inset:0;background:#0075FF;border-radius:14px;z-index:1}.sd-date-box.sd-date-box--selected.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box,.sd-date-box.sd-date-box--type-start.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box,.sd-date-box.sd-date-box--type-end.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box{color:white;font-weight:700}.sd-date-box.sd-date-box--start-date.sd-date-box--end-date.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::before{display:none !important}.sd-date-box.sd-date-box--today.sc-sd-date-box:not(.sd-date-box--selected) .sd-date-box__content.sc-sd-date-box::after{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:28px;height:28px;border:1px solid #E1E1E1 !important;border-radius:14px}`;
 

package/dist/cjs/sd-date-picker-calendar.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BpT5VmKY.js');
+var index = require('./index-B2QvhbC3.js');
 var useDatePicker = require('./useDatePicker-cK_XK_P6.js');
 var sdDatePicker_config = require('./sd-date-picker.config-D8xSALVj.js');
 
@@ -142,7 +142,7 @@ const SdDatePickerCalendar = class {
             '--calendar-day-font-weight': sdDatePicker_config.CALENDAR_LAYOUT.day.fontWeight,
             '--calendar-day-bold-font-weight': sdDatePicker_config.CALENDAR_LAYOUT.day.boldFontWeight,
         };
-        return (index.h("div", { key: '9e47bf6790f947639b1868a653c9d451905d4a49', class: "sd-date-picker-calendar", style: cssVars }, index.h("div", { key: '641a9726b22aff0e465347bf3363fdd6f3110919', class: "sd-date-picker-calendar__header" }, index.h("div", { key: '71e4838be05148f989af7ccb692482db425c38d7', class: "sd-date-picker-calendar__nav-group" }, index.h("sd-ghost-button", { key: '060795c43807ee50b13448ac559fb7945a48d8be', ariaLabel: "prevYear", size: "xxs", icon: "chevronLeft", onClick: this.goPrevYear }), index.h("span", { key: '5cf2c070134aa04dc5f9d506b91bdff759d9453b', class: "sd-date-picker-calendar__label" }, this.currentYear), index.h("sd-ghost-button", { key: 'dd3c9d26bc4b79673e12b90d2a7d563e4adda707', ariaLabel: "nextYear", size: "xxs", icon: "chevronRight", onClick: this.goNextYear })), index.h("span", { key: '962ee5b8adbcbf988bc94b81b3dd0fe4e388a588', class: "sd-date-picker-calendar__divider", "aria-hidden": "true" }), index.h("div", { key: '54d1fcfbcbe1e232cbea5cdd9a948045207771c7', class: "sd-date-picker-calendar__nav-group sd-date-picker-calendar__nav-group-month" }, index.h("sd-ghost-button", { key: 'ff8011dbf88a257ba4b47dbcd1a3b8c414b4e7b5', ariaLabel: "prevMonth", size: "xxs", icon: "chevronLeft", onClick: this.goPrevMonth }), index.h("span", { key: '2594eed1efacc8b3bdf648ab7527a81608e2321d', class: "sd-date-picker-calendar__label sd-date-picker-calendar__label-month" }, this.currentMonth, "\uC6D4"), index.h("sd-ghost-button", { key: 'a83692da9caeaef4c02c777d43f769026182d5a2', ariaLabel: "nextMonth", size: "xxs", icon: "chevronRight", onClick: this.goNextMonth }))), index.h("div", { key: 'bc131a11ed98ac84dee775090ca24be794fece55', class: "sd-date-picker-calendar__week" }, sdDatePicker_config.WEEK_LABELS.map(label => (index.h("span", { key: label, class: "sd-date-picker-calendar__week-cell" }, label)))), index.h("div", { key: 'bc4deb734c9c01806ae7e75640f97d76c9e79f64', class: "sd-date-picker-calendar__grid" }, this.cells.map(cell => {
+        return (index.h("div", { key: 'd23c08b38605dad1e5b3266a7e1ad72e0aeb7eb9', class: "sd-date-picker-calendar", style: cssVars }, index.h("div", { key: '1c25bd19272e1e7f4e81601a0ffa13d7b882e4e4', class: "sd-date-picker-calendar__header" }, index.h("div", { key: 'aed9a7ff3282d363c61b49dde6b6e9d6131a456c', class: "sd-date-picker-calendar__nav-group" }, index.h("sd-ghost-button", { key: '68ae361b1cc4bfd9351b093aee6d4193f2ac5549', ariaLabel: "prevYear", size: "xxs", icon: "chevronLeft", onClick: this.goPrevYear }), index.h("span", { key: 'e17d9a962faf96e8b70b0890e59e4c2e5ca515b0', class: "sd-date-picker-calendar__label" }, this.currentYear), index.h("sd-ghost-button", { key: 'ab65ce4f9f64fcc9f4084c073a0a0625ceeb9f2d', ariaLabel: "nextYear", size: "xxs", icon: "chevronRight", onClick: this.goNextYear })), index.h("span", { key: 'a01cb1691e9f112efdd6fd632c7594aa082d7f9f', class: "sd-date-picker-calendar__divider", "aria-hidden": "true" }), index.h("div", { key: '577085a6007e5e2c6b291bbe0a27c0ff4ec4ca78', class: "sd-date-picker-calendar__nav-group sd-date-picker-calendar__nav-group-month" }, index.h("sd-ghost-button", { key: 'c6b51b60d1bcc06e537800c10946ac49639fcb2c', ariaLabel: "prevMonth", size: "xxs", icon: "chevronLeft", onClick: this.goPrevMonth }), index.h("span", { key: '836008030a0d66533ffba9392fee0234a9b0b425', class: "sd-date-picker-calendar__label sd-date-picker-calendar__label-month" }, this.currentMonth, "\uC6D4"), index.h("sd-ghost-button", { key: 'a602cb65934157c171201f01699aacf1eeee8a57', ariaLabel: "nextMonth", size: "xxs", icon: "chevronRight", onClick: this.goNextMonth }))), index.h("div", { key: '0c1a368d4e878b2942f2b37ddff47ac13262c580', class: "sd-date-picker-calendar__week" }, sdDatePicker_config.WEEK_LABELS.map(label => (index.h("span", { key: label, class: "sd-date-picker-calendar__week-cell" }, label)))), index.h("div", { key: '31cfa57cd8890a7cd70209c771598d6350009cc6', class: "sd-date-picker-calendar__grid" }, this.cells.map(cell => {
             const isSelected = cell.inCurrentMonth && !!this.value && this.value === cell.date;
             const isToday = cell.inCurrentMonth && useDatePicker.today === cell.date;
             const isDisabled = cell.inCurrentMonth && this.isDisabled(cell.date);

package/dist/cjs/sd-date-picker-trigger.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BpT5VmKY.js');
+var index = require('./index-B2QvhbC3.js');
 var sdDatePicker_config = require('./sd-date-picker.config-D8xSALVj.js');
 
 const sdDatePickerTriggerCss = () => `sd-date-picker-trigger{display:block;width:100%;height:100%}sd-date-picker-trigger .sd-date-picker-trigger{display:flex;align-items:center;gap:var(--trigger-gap);width:100%;height:100%;padding:0 var(--trigger-padding-x);cursor:pointer;user-select:none;overflow:hidden;border-radius:var(--trigger-radius)}sd-date-picker-trigger .sd-date-picker-trigger--disabled{cursor:not-allowed}sd-date-picker-trigger .sd-date-picker-trigger__icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}sd-date-picker-trigger .sd-date-picker-trigger__text{flex:1;min-width:0;font-size:var(--trigger-font-size);line-height:var(--trigger-line-height);font-weight:var(--trigger-font-weight);color:var(--trigger-text-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}`;
@@ -40,10 +40,10 @@ const SdDatePickerTrigger = class {
                 ? sdDatePicker_config.DATEPICKER_COLORS.icon.disabled
                 : sdDatePicker_config.DATEPICKER_COLORS.icon.default,
         };
-        return (index.h("div", { key: '5d8508069232bba144bfb9480b0befe420a3392b', class: {
+        return (index.h("div", { key: 'ebe886b3df3b50c53d31081f6ad7e251721b5cb1', class: {
                 'sd-date-picker-trigger': true,
                 'sd-date-picker-trigger--disabled': this.disabled,
-            }, style: cssVars, onClick: this.handleClick }, index.h("sd-icon", { key: '71131e34dd1225e9633395041f7a768c020343bd', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), index.h("span", { key: '192520646e181add5f87f6ce1d3a5caf8556b163', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
+            }, style: cssVars, onClick: this.handleClick }, index.h("sd-icon", { key: '563d3bb0221d5ba17788e1fa1e970fd2d702a4fd', name: "date", size: Number(sizeTokens.iconSize), color: "var(--trigger-icon-color)", class: "sd-date-picker-trigger__icon" }), index.h("span", { key: '3bfc4c6671e70571a4b71a62cf0fd78f0297027f', class: "sd-date-picker-trigger__text" }, hasValue ? this.displayText : this.placeholder)));
     }
 };
 SdDatePickerTrigger.style = sdDatePickerTriggerCss();

package/dist/cjs/sd-date-picker.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BpT5VmKY.js');
+var index = require('./index-B2QvhbC3.js');
 var index$1 = require('./index-BUvXpPc3.js');
 var sdDatePicker_config = require('./sd-date-picker.config-D8xSALVj.js');
 
@@ -24,6 +24,7 @@ const SdDatePicker = class {
     label = '';
     labelWidth = '';
     addonLabel = '';
+    addonAlign = 'start';
     hint = '';
     errorMessage = '';
     fieldName = '';
@@ -102,9 +103,9 @@ const SdDatePicker = class {
             '--sd-system-color-field-border-focus': sdDatePicker_config.DATEPICKER_COLORS.border.focus,
             '--sd-system-color-field-bg-default': sdDatePicker_config.DATEPICKER_COLORS.bg.default,
         };
-        return (index.h("sd-field", { key: '693c0c75e6b0a9ee8323f4be7ec101592e586372', name: this.fieldName || this.internalName, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, index.h("div", { key: 'ea7f506f0163119fac0c660ef1bef5781780a118', class: "sd-date-picker", ref: el => {
+        return (index.h("sd-field", { key: '1e0bdacf53850916778544e63ce11d5aab06eafc', name: this.fieldName || this.internalName, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, index.h("div", { key: '63795f75a1b3723c2af166343dce5fd33afd5be2', class: "sd-date-picker", ref: el => {
                 this.triggerRef = el;
-            } }, index.h("sd-date-picker-trigger", { key: '0109eb0326655018bc02cc373e766ffdada85ff0', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (index.h("sd-portal", { key: '65a628af43ae036a752f3511341fd8c9c82303a1', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, index.h("sd-date-picker-calendar", { key: '21f574fc9551f9aaccfcb5d49a81952dbba72d7a', value: this.value, selectable: this.selectable, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
+            } }, index.h("sd-date-picker-trigger", { key: 'adea2cbad36285f546d3c29b66f2c74044427736', displayText: this.value ?? '', placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (index.h("sd-portal", { key: '4da6ec2a3644201b6579fc2e9838d03ef22b7e57', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, index.h("sd-date-picker-calendar", { key: '4b7e3757b7232110ec9865346fcd68868ac68081', value: this.value, selectable: this.selectable, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
     }
     static get watchers() { return {
         "isOpen": [{

package/dist/cjs/sd-date-range-picker-calendar.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BpT5VmKY.js');
+var index = require('./index-B2QvhbC3.js');
 var useDatePicker = require('./useDatePicker-cK_XK_P6.js');
 var sdDatePicker_config = require('./sd-date-picker.config-D8xSALVj.js');
 
@@ -267,7 +267,7 @@ const SdDateRangePickerCalendar = class {
             '--range-panel-gap': `${RANGE_LAYOUT.panelGap}px`,
             '--range-divider': RANGE_LAYOUT.divider,
         };
-        return (index.h(index.Fragment, { key: '99b9de5fce7e4d039b40ed95b3451c28e7799dc8' }, index.h("div", { key: 'b55374e977f79e6dd7cd5d4af9df30bf41e40fba', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), index.h("div", { key: '6bd94cde83d82efc270148434dfb6410dc5f9634', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), index.h("span", { key: '9e179166ebad4cf295e831ef2e63fc9677f65b82', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
+        return (index.h(index.Fragment, { key: '595c17bc338f96117d87c5ac3c2b26895b9e5283' }, index.h("div", { key: '39ce76545cc612422ab5024a2838fbc9faabb9a8', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), index.h("div", { key: '21764e31a3fbcfa8de22d1f243f5739fc02c38fd', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), index.h("span", { key: '402ea75f3bf8b58d30c34238285eef7099118e28', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
     }
     static get watchers() { return {
         "value": [{

package/dist/cjs/sd-date-range-picker.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BpT5VmKY.js');
+var index = require('./index-B2QvhbC3.js');
 var index$1 = require('./index-BUvXpPc3.js');
 var sdDatePicker_config = require('./sd-date-picker.config-D8xSALVj.js');
 
@@ -25,6 +25,7 @@ const SdDateRangePicker = class {
     label = '';
     labelWidth = '';
     addonLabel = '';
+    addonAlign = 'start';
     hint = '';
     errorMessage = '';
     fieldName = '';
@@ -108,9 +109,9 @@ const SdDateRangePicker = class {
             '--sd-system-color-field-border-focus': sdDatePicker_config.DATEPICKER_COLORS.border.focus,
             '--sd-system-color-field-bg-default': sdDatePicker_config.DATEPICKER_COLORS.bg.default,
         };
-        return (index.h("sd-field", { key: '95ec666c91635d6b6b749d660b4495b7ebe48e6a', name: this.fieldName || this.internalName, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, index.h("div", { key: '3051fda66e94d51208347ae2053173570d5f1ca9', class: "sd-date-range-picker", ref: el => {
+        return (index.h("sd-field", { key: '34c4d9ef2ba50f951fc6b6b09215e750ac61cd87', name: this.fieldName || this.internalName, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, index.h("div", { key: 'c92ab61d144c893077a9c81922ac24eff93314dd', class: "sd-date-range-picker", ref: el => {
                 this.triggerRef = el;
-            } }, index.h("sd-date-picker-trigger", { key: '71693b5a4cec562169d9427a4e19aed4d8b19a45', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (index.h("sd-portal", { key: '75b9f1c1ebdabcd1c1a33cad51189ba132274bb1', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, index.h("sd-date-range-picker-calendar", { key: 'f158eead4f44bc452bf102b3324721df84fc3b0c', value: this.value, selectable: this.selectable, maxRange: this.maxRange, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
+            } }, index.h("sd-date-picker-trigger", { key: '487b8a1af6e8dee063d70ffc030c314037741d74', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (index.h("sd-portal", { key: 'f22c979943cebcc82e8d4d9f86037621e8c3983a', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, index.h("sd-date-range-picker-calendar", { key: 'c19548d0074556f90c740b6ba35338ea4d41dd18', value: this.value, selectable: this.selectable, maxRange: this.maxRange, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
     }
     static get watchers() { return {
         "isOpen": [{

package/dist/cjs/sd-dropdown-button.cjs.entry.js

@@ -1,21 +1,10 @@
 'use strict';
 
-var index = require('./index-BpT5VmKY.js');
+var index = require('./index-B2QvhbC3.js');
 var baseDropdownEvent = require('./base-dropdown-event-BTPlZ1KF.js');
 var sdButtonV2_config = require('./sd-button-v2.config-CnqCQQMi.js');
 var component_button = require('./component.button-cqV-iCG5.js');
-
-const color = {
-	bg: {
-		accent: {
-			"default": "#0075FF"}},
-	content: {
-		secondary: "#555555",
-		inverse: "#FFFFFF"
-	}};
-var systemTokens = {
-	color: color
-};
+var system = require('./system-C89o3A9Z.js');
 
 const DROPDOWN_BUTTON_NAMES = Object.keys(sdButtonV2_config.BUTTON_CONFIG).filter((name) => !name.endsWith('_lg'));
 const DROPDOWN_BUTTON_CONFIG = Object.fromEntries(DROPDOWN_BUTTON_NAMES.map(name => [name, sdButtonV2_config.BUTTON_CONFIG[name]]));
@@ -30,9 +19,9 @@ const PRESET_DIVIDER_COLORS = {
     danger: component_button.buttonTokens.button.danger.strong.dropdown.divider,
     danger_outline: PRESET_BORDER_COLORS.danger_outline,
 };
-const MENU_ITEM_COLOR = systemTokens.color.content.secondary;
-const MENU_ITEM_ACTIVE_BACKGROUND = systemTokens.color.bg.accent.default;
-const MENU_ITEM_ACTIVE_COLOR = systemTokens.color.content.inverse;
+const MENU_ITEM_COLOR = system.systemTokens.color.content.secondary;
+const MENU_ITEM_ACTIVE_BACKGROUND = system.systemTokens.color.bg.accent.default;
+const MENU_ITEM_ACTIVE_COLOR = system.systemTokens.color.content.inverse;
 const PRESET_MENU_ITEM_COLORS = {
     primary: MENU_ITEM_COLOR,
     secondary: MENU_ITEM_COLOR,
@@ -257,7 +246,7 @@ const SdDropdownButton = class extends baseDropdownEvent.BaseDropdownEvent {
     }
     render() {
         const { config, preset } = this.resolvedConfig;
-        return (index.h("div", { key: '1a6fa00329392de05526a50de55dcd620a43a2db', class: "sd-dropdown-button" }, index.h("button", { key: 'd73139863c8decca29079a8111e26ea5a2d21614', type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen), disabled: this.disabled, "aria-haspopup": "menu", "aria-expanded": String(this.isOpen), onClick: this.toggleDropdown, ref: el => (this.triggerRef = el), style: {
+        return (index.h("div", { key: '5493b94262ecdd20a5fbb7ad2993dd473b1ae9e3', class: "sd-dropdown-button" }, index.h("button", { key: 'a64187dec0d84dce3532f8b3d7112ed6d6ae8e0d', type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen), disabled: this.disabled, "aria-haspopup": "menu", "aria-expanded": String(this.isOpen), onClick: this.toggleDropdown, ref: el => (this.triggerRef = el), style: {
                 '--sd-dropdown-button-bg': config.color,
                 '--sd-dropdown-button-bg-hover': PRESET_HOVER_BACKGROUNDS[preset],
                 '--sd-dropdown-button-border': PRESET_BORDER_COLORS[preset],
@@ -267,10 +256,10 @@ const SdDropdownButton = class extends baseDropdownEvent.BaseDropdownEvent {
                 '--sd-dropdown-button-disabled-bg': DROPDOWN_DISABLED_BACKGROUND,
                 '--sd-dropdown-button-disabled-content': DROPDOWN_DISABLED_TEXT,
                 '--sd-dropdown-button-disabled-border': DROPDOWN_DISABLED_BORDER,
-            } }, index.h("span", { key: '52e30c7d5f55b2ed974944b23880a42fdf941e31', class: "sd-dropdown-button__trigger-label" }, this.label), index.h("span", { key: '8d693a472783e552613b0c0503b85dc9b5ce0343', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), index.h("span", { key: 'e9f0fc3980400150c8808e569904bee6c4629dc7', class: {
+            } }, index.h("span", { key: '71ed27650dcb1beb1cfa4864a6449ab190f04829', class: "sd-dropdown-button__trigger-label" }, this.label), index.h("span", { key: '6c34575c0587fb288165cf0e15db52ed6b3f50db', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), index.h("span", { key: '0544b9d36657a80b5f51b9c1849d55ab7a7dbdc2', class: {
                 'sd-dropdown-button__trigger-icon': true,
                 'sd-dropdown-button__trigger-icon--open': this.isOpen,
-            }, "aria-hidden": "true" }, index.h("sd-icon", { key: '13fda88989885a9096ed6ecf211b3aadad3f128a', name: "chevronDown", size: DROPDOWN_CHEVRON_ICON_SIZE[config.size], color: "var(--sd-dropdown-button-current-content)" }))), this.renderDropdown(preset)));
+            }, "aria-hidden": "true" }, index.h("sd-icon", { key: 'cd73a4dffbe1fc31c76fea221cd080b455bb3131', name: "chevronDown", size: DROPDOWN_CHEVRON_ICON_SIZE[config.size], color: "var(--sd-dropdown-button-current-content)" }))), this.renderDropdown(preset)));
     }
     static get watchers() { return {
         "isOpen": [{

package/dist/cjs/sd-file-picker.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BpT5VmKY.js');
+var index = require('./index-B2QvhbC3.js');
 
 const filepicker = {
 	height: "28",
@@ -45,7 +45,7 @@ const FILE_PICKER_COLORS = {
     },
 };
 
-const sdFilePickerCss = () => `sd-file-picker{display:inline-flex;width:100%}.sd-file-picker__content{width:100%;height:100%;display:flex;align-items:center;padding:0 var(--sd-file-picker-padding-x);gap:var(--sd-file-picker-gap);cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;vertical-align:middle}.sd-file-picker__text{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:var(--sd-file-picker-font-weight);font-size:var(--sd-file-picker-font-size);line-height:var(--sd-file-picker-line-height);color:var(--sd-file-picker-placeholder-color)}.sd-file-picker__text--active{color:var(--sd-file-picker-text-color)}.sd-file-picker__text--placeholder{color:var(--sd-file-picker-placeholder-color)}.sd-file-picker__icon{flex-shrink:0}.sd-file-picker__clear-icon{flex-shrink:0;cursor:pointer;transition:opacity 0.2s ease}.sd-file-picker__clear-icon:hover{opacity:0.7}.sd-file-picker__input{display:none}.sd-file-picker__tooltip{position:absolute;top:calc(100% - 4px);left:50%;transform:translate(-50%);z-index:1000;white-space:nowrap;padding:8px 12px;background:rgba(0, 0, 0, 0.8);color:white;font-size:12px;line-height:18px;border-radius:4px;pointer-events:none}.sd-field--disabled .sd-file-picker__content{cursor:not-allowed}.sd-field--disabled .sd-file-picker__text{color:var(--sd-file-picker-disabled-color)}.sd-file-picker--inline .sd-file-picker__content{border:none;background-color:transparent;padding:0;height:auto}.sd-file-picker--inline .sd-file-picker__text{color:var(--sd-file-picker-placeholder-color)}.sd-file-picker--inline:hover:not(.sd-file-picker--inline-disabled) .sd-file-picker__text{color:var(--sd-file-picker-text-color)}.sd-file-picker--inline .sd-file-picker__text--active{color:var(--sd-file-picker-text-color)}.sd-file-picker--inline.sd-file-picker--inline-disabled .sd-file-picker__content{cursor:not-allowed}.sd-file-picker--inline.sd-file-picker--inline-disabled .sd-file-picker__text{color:var(--sd-file-picker-disabled-color)}`;
+const sdFilePickerCss = () => `sd-file-picker{display:inline-flex;width:100%}.sd-file-picker__content{width:100%;height:100%;display:flex;align-items:center;padding:0 var(--sd-file-picker-padding-x);gap:var(--sd-file-picker-gap);cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;vertical-align:middle}.sd-file-picker__text{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:var(--sd-file-picker-font-weight);font-size:var(--sd-file-picker-font-size);line-height:var(--sd-file-picker-line-height);color:var(--sd-file-picker-placeholder-color)}.sd-file-picker__text--active{color:var(--sd-file-picker-text-color)}.sd-file-picker__text--placeholder{color:var(--sd-file-picker-placeholder-color)}.sd-file-picker__icon{flex-shrink:0}.sd-file-picker__clear-icon{flex-shrink:0;cursor:pointer;transition:opacity 0.2s ease}.sd-file-picker__clear-icon:hover{opacity:0.7}.sd-file-picker__input{display:none}.sd-file-picker__tooltip{position:absolute;top:calc(100% - 4px);left:50%;transform:translate(-50%);z-index:998;white-space:nowrap;padding:8px 12px;background:rgba(0, 0, 0, 0.8);color:white;font-size:12px;line-height:18px;border-radius:4px;pointer-events:none}.sd-field--disabled .sd-file-picker__content{cursor:not-allowed}.sd-field--disabled .sd-file-picker__text{color:var(--sd-file-picker-disabled-color)}.sd-file-picker--inline .sd-file-picker__content{border:none;background-color:transparent;padding:0;height:auto}.sd-file-picker--inline .sd-file-picker__text{color:var(--sd-file-picker-placeholder-color)}.sd-file-picker--inline:hover:not(.sd-file-picker--inline-disabled) .sd-file-picker__text{color:var(--sd-file-picker-text-color)}.sd-file-picker--inline .sd-file-picker__text--active{color:var(--sd-file-picker-text-color)}.sd-file-picker--inline.sd-file-picker--inline-disabled .sd-file-picker__content{cursor:not-allowed}.sd-file-picker--inline.sd-file-picker--inline-disabled .sd-file-picker__text{color:var(--sd-file-picker-disabled-color)}`;
 
 const SdFilePicker = class {
     constructor(hostRef) {
@@ -68,6 +68,7 @@ const SdFilePicker = class {
     label = '';
     labelWidth = '';
     addonLabel = '';
+    addonAlign = 'start';
     hint = '';
     errorMessage = '';
     width = '';
@@ -222,14 +223,14 @@ const SdFilePicker = class {
                 'sd-file-picker__text': true,
                 'sd-file-picker__text--placeholder': !hasFiles,
                 'sd-file-picker__text--active': hasFiles,
-            } }, displayText), !this.disabled && hasFiles && (index.h("sd-ghost-button", { icon: "close", size: "xxs", disabled: this.disabled, class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (index.h("div", { class: "sd-file-picker__tooltip" }, displayText))));
+            } }, displayText), !this.disabled && hasFiles && (index.h("sd-ghost-button", { icon: "close", size: "xxs", ariaLabel: "clear", disabled: this.disabled, class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (index.h("div", { class: "sd-file-picker__tooltip" }, displayText))));
         if (this.inline) {
             return (index.h("div", { class: {
                     'sd-file-picker--inline': true,
                     'sd-file-picker--inline-disabled': this.disabled,
                 }, style: cssVars, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, content));
         }
-        return (index.h("sd-field", { name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, content));
+        return (index.h("sd-field", { name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, content));
     }
     static get watchers() { return {
         "value": [{

package/dist/cjs/sd-form.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BpT5VmKY.js');
+var index = require('./index-B2QvhbC3.js');
 
 const SdForm = class {
     constructor(hostRef) {