@sellmate/design-system 1.0.47 → 1.0.49

package/dist/cjs/sd-text-link.cjs.entry.js

@@ -86,16 +86,16 @@ const SdTextLink = class {
             '--sd-text-link-text-decoration': typo.textDecoration,
             '--sd-text-link-color': contentColor,
         };
-        return (index.h("span", { key: '280bf34fb5caa781e9856daf40fb8060bc2c5ad1', class: {
+        return (index.h("span", { key: 'e93a2744e49a267f4b775793e0e18f0c223a03dd', class: {
                 'sd-text-link': true,
                 'sd-text-link--disabled': this.disabled,
-            }, style: cssVars, onClick: this.handleClick }, this.icon && (index.h("sd-icon", { key: '360d18168152ef09d2e94c78682f962f66136b1b', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), index.h("span", { key: 'bb24813bd296ffbdbf9d46ee18382ebea1338a0a', class: "sd-text-link__label" }, this.label), this.useArrow && (index.h("span", { key: 'e5ee0dc6b5510b8b4e28e33f8a8c7515c1e9ec44', class: "sd-text-link__arrow", style: {
+            }, style: cssVars, onClick: this.handleClick }, this.icon && (index.h("sd-icon", { key: '3f39510caef0cec81ba23340e25f920389886b69', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), index.h("span", { key: 'ad0cac3fda5be82e5f0d2d9e7822b2bf82d2d4ee', class: "sd-text-link__label" }, this.label), this.useArrow && (index.h("span", { key: '2ecdfdb83f62468ff36f6da1b96caf53b2302bbf', class: "sd-text-link__arrow", style: {
                 width: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
                 height: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
                 display: 'inline-flex',
                 alignItems: 'center',
                 justifyContent: 'center',
-            } }, index.h("sd-icon", { key: '6989fe375a6f3fa02e57c13e0fbf8d1bfa4180ef', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
+            } }, index.h("sd-icon", { key: '92140c5c4fffc70af27894cd4f1a6bab80e6f64c', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
     }
 };
 SdTextLink.style = sdTextLinkCss();

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

@@ -86,10 +86,10 @@ const SdTextarea = class {
     }
     render() {
         const maxLengthCounter = this.getMaxLengthCounter();
-        return (index.h("div", { key: 'ac860221577a4451a7ebcc796c02ff1f013a039d', class: {
+        return (index.h("div", { key: '623b3d8085c36cc4ea9de4e5b7c775d1a83eb73c', class: {
                 'sd-textarea': true,
                 [this.getTextareaStatus()]: true,
-            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, index.h("div", { key: '752ebb2e4f3f806216a522e8e743ed535e59962d', class: "sd-textarea__content" }, index.h("textarea", { key: '71edd37275617e81e2f8511fd325023469813611', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, autofocus: this.autoFocus, maxLength: this.maxLength, onInput: this.handleInput.bind(this), onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) })), this.hasFooter() && (index.h("div", { key: 'f386d7825022ad451fe23783eb341eb5ad4e5a4f', class: "sd-textarea__footer" }, this.helpText !== undefined && index.h("span", { key: 'f526ff0fee23af6e7ccf6dff34c0926745c02950', class: "sd-textarea__help-text" }, this.helpText), maxLengthCounter !== null && index.h("span", { key: 'adc899695ff0bc4eec7c95e97fcf6baf078abf0e', class: "sd-textarea__counter" }, maxLengthCounter)))));
+            }, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, index.h("div", { key: '9947ecb8ddaede40977ab421603ac987853617f6', class: "sd-textarea__content" }, index.h("textarea", { key: '8373ccc78b85abf84b09af3953b15a145bf5e747', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, autofocus: this.autoFocus, maxLength: this.maxLength, onInput: this.handleInput.bind(this), onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event) })), this.hasFooter() && (index.h("div", { key: '7392aabb95444be4f95605c6d342dcf68c2b09e2', class: "sd-textarea__footer" }, this.helpText !== undefined && index.h("span", { key: '0ace2ab4995f183184d6f1ed9f4c2ee77f30614c', class: "sd-textarea__help-text" }, this.helpText), maxLengthCounter !== null && index.h("span", { key: '6b029c0b183d80ad3c838ef666ce2461679b3ce2', class: "sd-textarea__counter" }, maxLengthCounter)))));
     }
     static get watchers() { return {
         "value": [{

package/dist/cjs/sd-toast-container.cjs.entry.js

@@ -234,7 +234,7 @@ const SdToastContainer = class {
         const activeToasts = toasts.filter(t => t.state !== 'exiting').reverse();
         const indexMap = new Map();
         activeToasts.forEach((t, i) => indexMap.set(t.id, i));
-        return (index.h("div", { key: '14a9440ade2a9de3437b54f9b4af31d2d8357e08', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
+        return (index.h("div", { key: '5de5a655a8077dea7b691eaafb47a2fd9ebad6f0', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
                 this.expanded = true;
                 this.pauseTimers();
             }, onMouseLeave: () => {

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

@@ -57,10 +57,10 @@ const SdToast = class {
     render() {
         const typeConfig = TOAST_TYPE_CONFIG[this.type] ?? TOAST_TYPE_CONFIG.default;
         const iconSize = Number(TOAST_LAYOUT.iconSize);
-        return (index.h("div", { key: '22514e8517b4f12400e09d9d64c2c2b8906cb273', style: {
+        return (index.h("div", { key: '02f7aaf208dabe0d4ed07816038379c865073296', style: {
                 '--sd-toast-bg': typeConfig.bg,
                 '--sd-toast-text': typeConfig.content,
-            } }, index.h("div", { key: 'f8b8d0050d2775488f4d70e5054237f4e3f7b0b4', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: 'a511007335db6e8c2131b554a5b77e2e0a383d73', class: "sd-toast__icon" }, index.h("sd-icon", { key: '86df116f1a3533bac738adbaefa5c1aed93a4535', name: this.icon, size: iconSize, color: typeConfig.content }))), index.h("div", { key: '0a4db0a2bc7b3bcd741006dcc8228079e000f1a3', class: "sd-toast__content" }, index.h("span", { key: '66be2d5dcd83dd47036d08b0be65f8823acd53b4', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: 'b69bc8b1ee31dd860005e39cd56ccc97c505af67', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.useClose && (index.h("button", { key: '300eaefa372b13693cdcb5a2248d1bf6b8f8ec8d', type: "button", class: "sd-toast__close", onClick: () => this.close.emit(), "aria-label": "Close", title: "Close" }, index.h("sd-icon", { key: '529a461269955fc5547bf8d7fa622838aa5b8237', name: "close", size: iconSize, color: typeConfig.content }))))));
+            } }, index.h("div", { key: 'b6273da0052dc663dc97c71705b8378ce9f73922', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: '569b0afaeade5d5ec41218e1927a247df6beffc1', class: "sd-toast__icon" }, index.h("sd-icon", { key: 'b7e2113a36f3af91adaadbe1f87c39cef37c01fd', name: this.icon, size: iconSize, color: typeConfig.content }))), index.h("div", { key: 'af6e8c9e5db30cbf5a1be3f0958470101935dde2', class: "sd-toast__content" }, index.h("span", { key: 'f6459b3d086f7675b37e922f9f4bc8ae6a257197', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: 'd3c000b69d039850b65c35836c0246d91290c111', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.useClose && (index.h("button", { key: 'c9d75b733730fe6af6aa49b3780d1c9a894b7408', type: "button", class: "sd-toast__close", onClick: () => this.close.emit(), "aria-label": "Close", title: "Close" }, index.h("sd-icon", { key: '170643bc8fecd2f275202d28f2873ddb71918bbc', name: "close", size: iconSize, color: typeConfig.content }))))));
     }
 };
 SdToast.style = sdToastCss();

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

@@ -41,7 +41,7 @@ const SdToggleButton = class {
         this.change.emit(newValue);
     };
     render() {
-        return (index.h("label", { key: '63d34a72c01e478d55b4a64ff375e6f8eebc560a', class: this.buttonClasses, "aria-label": this.label || 'toggle button' }, this.label, index.h("input", { key: '450cb27e4d66c4b9b8a2f0d56efa3eeabc9dcced', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (index.h("label", { key: '3f5747da955bf4838f95a11c52677c269e627513', class: this.buttonClasses, "aria-label": this.label || 'toggle button' }, this.label, index.h("input", { key: '3fcf184d64abec88674a999982aee09f8670c311', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
 };
 SdToggleButton.style = sdToggleButtonCss();

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

@@ -37,7 +37,7 @@ const SdToggle = class {
         this.change.emit(newValue);
     };
     render() {
-        return (index.h("label", { key: '4a2174a50db389a4ff8de2fae632039350abf0d7', "aria-label": this.label || 'toggle', class: this.toggleClasses }, index.h("input", { key: 'a35acaa1a6372a69103faa3dc9b18b9db5d33584', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), this.label && index.h("span", { key: 'af39b9be93e5ce35574d0a13766e83e6b6d1fdd1', class: "sd-toggle__label" }, this.label), index.h("div", { key: '90eaed6cf788d947454a58fee4fe37d41aeb9aca', class: "sd-toggle__track" }, index.h("div", { key: '4830da4dc05be1f7c1c147b330e8e0f10daa4045', class: "sd-toggle__thumb" }))));
+        return (index.h("label", { key: '698daae860db5fbc4771e135ddc2bcb6b7401d3f', "aria-label": this.label || 'toggle', class: this.toggleClasses }, index.h("input", { key: 'fe54c7e2ae289fc24dca6c33b7ceb16780bf249f', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), this.label && index.h("span", { key: '5063162161ebaa9d1d2773aac3fdf3d482f4219a', class: "sd-toggle__label" }, this.label), index.h("div", { key: 'f320af2c5a89fab80e5cc90cbbd0dd88dee93cea', class: "sd-toggle__track" }, index.h("div", { key: 'a96f3f836d11e3a24e78a580797dc03e92e335b6', class: "sd-toggle__thumb" }))));
     }
 };
 SdToggle.style = sdToggleCss();

package/dist/collection/components/sd-action-modal/sd-action-modal.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 import { ACTION_MODAL_LAYOUT, ACTION_MODAL_TITLE, CLOSE_ICON_SIZE, CLOSE_ICON_COLOR, } from "./sd-action-modal.config";
 export class SdActionModal {
-    title = '';
+    modalTitle = '';
     buttonLabel = '확인';
     close;
     ok;
@@ -25,7 +25,7 @@ export class SdActionModal {
             '--sd-action-modal-title-font-size': `${ACTION_MODAL_TITLE.fontSize}px`,
             '--sd-action-modal-title-line-height': `${ACTION_MODAL_TITLE.lineHeight}px`,
         };
-        return (h("div", { key: 'cc0c490c9b3e37b9a18288a14b785b7f64ef1919', class: "sd-action-modal", style: cssVars }, h("header", { key: '4e524f80f672fadc8e77d04ee7dfed9b0721f6b5', class: "sd-action-modal__header" }, h("h2", { key: '60397117390570e7ec8a108f596cabda93ab44f8', class: "sd-action-modal__title" }, this.title), h("div", { key: 'da05416e56022bd18cb29c97bf1d55ff7be07d77', class: "sd-action-modal__header-sub" }, h("slot", { key: '33670524b174de4993c44e2db514e8ffd25467bc', name: "header-sub-title" })), h("sd-icon", { key: 'c3ef1195d48074da7c0212e5c73c90cc9c3474b7', class: "sd-action-modal__close", name: "close", size: CLOSE_ICON_SIZE, color: CLOSE_ICON_COLOR, onClick: () => this.close.emit() })), h("div", { key: '8f8b1ac7802beb1729c5c8a778b1c3cd214d07ce', class: "sd-action-modal__body" }, h("slot", { key: 'b6b4c8d4afbb28473a7ad4239a0ee3943a86003b', name: "body" })), h("footer", { key: 'd6a9bf66aa0c811ad4b05d1d2f1304d63a5ec1d7', class: "sd-action-modal__footer" }, h("div", { key: '155d6ac6a480599d0e0392e1bf9a3653e2ded01f', class: "sd-action-modal__footer-sub" }, h("slot", { key: '1908ad293c7f3e519520311d0d9365b101370ba8', name: "bottom-sub-content" })), h("sd-button-v2", { key: 'aef780d6118c0ceb202b46a7d776625a6b54606d', name: "primary_md", label: this.buttonLabel, onSdClick: () => this.ok.emit() }))));
+        return (h("div", { key: '15fc49f34b906f21a0939a1fab37270132392f24', class: "sd-action-modal", style: cssVars }, h("header", { key: '7c9f30b1a021cee5ec72b8aa034baa2c84dd43e0', class: "sd-action-modal__header" }, h("h2", { key: '413fc21c9b3ff23ecb90a7b4f7897a1fc80656bc', class: "sd-action-modal__title" }, this.modalTitle), h("div", { key: '4a1edc0dffd575bb6e9e438174c492b5d86ec94e', class: "sd-action-modal__header-sub" }, h("slot", { key: '633669925cf29bf0e3a189e5afb321e19310a2b1', name: "header-sub-title" })), h("sd-icon", { key: 'c4a59612d10ee42adb62148935ebdfb7fa6ac9cd', class: "sd-action-modal__close", name: "close", size: CLOSE_ICON_SIZE, color: CLOSE_ICON_COLOR, onClick: () => this.close.emit() })), h("div", { key: 'ddeaf5f1945f3aff28a3a0e2c9d26daf019dc60e', class: "sd-action-modal__body" }, h("slot", { key: '2ea7b49a2368744372ab92ff6539920eb4894654', name: "body" })), h("footer", { key: '4804e5b8137fe99abb4aaae06a427d1aaed0e50f', class: "sd-action-modal__footer" }, h("div", { key: 'affd8bd4bf14e9b50ea59fd632d07b494c7888c4', class: "sd-action-modal__footer-sub" }, h("slot", { key: '59458e4be9131e3e4fb200e4688fe2a46f8874c8', name: "bottom-sub-content" })), h("sd-button-v2", { key: 'fde6ccdeef52199d4b657ec9dea3fa193315961c', name: "primary_md", label: this.buttonLabel, onSdClick: () => this.ok.emit() }))));
     }
     static get is() { return "sd-action-modal"; }
     static get originalStyleUrls() {
@@ -40,7 +40,7 @@ export class SdActionModal {
     }
     static get properties() {
         return {
-            "title": {
+            "modalTitle": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -57,7 +57,7 @@ export class SdActionModal {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "title",
+                "attribute": "modal-title",
                 "defaultValue": "''"
             },
             "buttonLabel": {

package/dist/collection/components/sd-button-v2/sd-button-v2.config.js

@@ -160,7 +160,8 @@ export const PRESET_BORDER_COLORS = {
     danger: 'transparent',
     danger_outline: buttonTokens.danger.outline.border,
 };
-export const DISABLED_CONTENT = buttonTokens.content.disabled;
+export const DISABLED_TEXT = buttonTokens.text.disabled;
+export const DISABLED_ICON = buttonTokens.icon.disabled;
 const SIZE_SUFFIX_PATTERN = /_(xs|sm|md|lg)$/;
 export const isButtonV2Name = (value) => value in BUTTON_CONFIG;
 export const getPresetName = (value) => value.replace(SIZE_SUFFIX_PATTERN, '');

package/dist/collection/components/sd-button-v2/sd-button-v2.css

@@ -19,6 +19,7 @@ sd-button-v2 {
   --sd-button-v2-border: transparent;
   --sd-button-v2-content: $white;
   --sd-button-v2-current-content: var(--sd-button-v2-content);
+  --sd-button-v2-current-icon: var(--sd-button-v2-content);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -107,7 +108,8 @@ sd-button-v2 {
 .sd-button-v2--disabled {
   border-color: var(--sd-button-border-disabled, #CCCCCC);
   background: var(--sd-button-bg-disabled, #E1E1E1);
-  --sd-button-v2-current-content: var(--sd-button-content-disabled, $grey_65);
+  --sd-button-v2-current-content: var(--sd-button-text-disabled, $grey_65);
+  --sd-button-v2-current-icon: var(--sd-button-icon-disabled, $grey_75);
   cursor: not-allowed;
 }
 .sd-button-v2 .sd-button-v2__content {

package/dist/collection/components/sd-button-v2/sd-button-v2.js

@@ -67,7 +67,7 @@ export class SdButtonV2 {
                 '--sd-button-v2-border': PRESET_BORDER_COLORS[preset],
                 '--sd-button-v2-content': PRESET_CONTENT_COLORS[preset],
                 '--sd-button-v2-accent': BUTTON_FOCUS_RING_COLOR,
-            }, onClick: this.handleClick }, h("span", { key: 'acc839b6b89aef8065b7b5942167a0509496b689', class: "sd-button-v2__content" }, this.icon && (h("sd-icon", { key: 'c751c89dc2741800277f9b987b69d628b120da7f', class: "sd-button-v2__icon", name: this.icon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-v2-current-content)" })), this.label && h("span", { key: '23f351d1a8b1c8b40a3da70ecf9f82b1ccf9e65c', class: "sd-button-v2__label" }, this.label))));
+            }, onClick: this.handleClick }, h("span", { key: 'acc839b6b89aef8065b7b5942167a0509496b689', class: "sd-button-v2__content" }, this.icon && (h("sd-icon", { key: '0e8f758d3e0a40f6e021efd90e5cf86d52f18a27', class: "sd-button-v2__icon", name: this.icon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-v2-current-icon)" })), this.label && h("span", { key: '24ee2337a5b3e2a6df5053978e29428b3503849f', class: "sd-button-v2__label" }, this.label))));
     }
     static get is() { return "sd-button-v2"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-dropdown-button/sd-dropdown-button.config.js

@@ -47,7 +47,8 @@ export const PRESET_MENU_ITEM_ACTIVE_COLORS = {
     danger_outline: MENU_ITEM_ACTIVE_COLOR,
 };
 export const DROPDOWN_DISABLED_BACKGROUND = buttonTokens.bg.disabled;
-export const DROPDOWN_DISABLED_CONTENT = buttonTokens.content.disabled;
+export const DROPDOWN_DISABLED_TEXT = buttonTokens.text.disabled;
+export const DROPDOWN_DISABLED_ICON = buttonTokens.icon.disabled;
 export const DROPDOWN_DISABLED_BORDER = buttonTokens.border.disabled;
 export const isDropdownButtonName = (value) => value in DROPDOWN_BUTTON_CONFIG;
 export const getDropdownButtonPreset = (value) => getPresetName(value);

package/dist/collection/components/sd-dropdown-button/sd-dropdown-button.css

@@ -26,7 +26,7 @@ sd-dropdown-button {
   --sd-dropdown-button-accent: #006ac1;
   --sd-dropdown-button-min-width: 106px;
   --sd-dropdown-button-disabled-bg: var(--sd-button-bg-disabled, $grey_30);
-  --sd-dropdown-button-disabled-content: var(--sd-button-content-disabled, $grey_65);
+  --sd-dropdown-button-disabled-content: var(--sd-button-text-disabled, $grey_65);
   --sd-dropdown-button-disabled-border: var(--sd-button-border-disabled, $grey_45);
   display: inline-flex;
   align-items: stretch;

package/dist/collection/components/sd-dropdown-button/sd-dropdown-button.js

@@ -1,7 +1,7 @@
 import { h, } from "@stencil/core";
 import { BaseDropdownEvent } from "../../utils/base-dropdown-event";
 import { BUTTON_FOCUS_RING_COLOR } from "../sd-button-v2/sd-button-v2.config";
-import { DROPDOWN_BUTTON_CONFIG, DROPDOWN_BUTTON_MIN_WIDTHS, DROPDOWN_DISABLED_BACKGROUND, DROPDOWN_DISABLED_BORDER, DROPDOWN_DISABLED_CONTENT, PRESET_BORDER_COLORS, PRESET_CONTENT_COLORS, PRESET_DIVIDER_COLORS, PRESET_HOVER_BACKGROUNDS, PRESET_MENU_ITEM_ACTIVE_BACKGROUNDS, PRESET_MENU_ITEM_ACTIVE_COLORS, PRESET_MENU_ITEM_COLORS, getDropdownButtonPreset, isDropdownButtonName, } from "./sd-dropdown-button.config";
+import { DROPDOWN_BUTTON_CONFIG, DROPDOWN_BUTTON_MIN_WIDTHS, DROPDOWN_DISABLED_BACKGROUND, DROPDOWN_DISABLED_BORDER, DROPDOWN_DISABLED_TEXT, PRESET_BORDER_COLORS, PRESET_CONTENT_COLORS, PRESET_DIVIDER_COLORS, PRESET_HOVER_BACKGROUNDS, PRESET_MENU_ITEM_ACTIVE_BACKGROUNDS, PRESET_MENU_ITEM_ACTIVE_COLORS, PRESET_MENU_ITEM_COLORS, getDropdownButtonPreset, isDropdownButtonName, } from "./sd-dropdown-button.config";
 export class SdDropdownButton extends BaseDropdownEvent {
     constructor() {
         super();
@@ -186,7 +186,7 @@ export class SdDropdownButton extends BaseDropdownEvent {
     }
     render() {
         const { config, preset } = this.resolvedConfig;
-        return (h("div", { key: '7398f76731b0d11fffe9b4f5353630e59c183b66', class: "sd-dropdown-button" }, h("button", { key: '811a86ae4fcf25b76025f6e0168d5915a893edd9', 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 (h("div", { key: 'ec3cf7d184cbf49cc60a633b4a5de719a5903098', class: "sd-dropdown-button" }, h("button", { key: '02a7208bc16fbd89af72d4dbc885951949507e11', 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-min-width': `${DROPDOWN_BUTTON_MIN_WIDTHS[config.size]}px`,
                 '--sd-dropdown-button-bg': config.color,
                 '--sd-dropdown-button-bg-hover': PRESET_HOVER_BACKGROUNDS[preset],
@@ -195,12 +195,12 @@ export class SdDropdownButton extends BaseDropdownEvent {
                 '--sd-dropdown-button-divider': PRESET_DIVIDER_COLORS[preset],
                 '--sd-dropdown-button-accent': BUTTON_FOCUS_RING_COLOR,
                 '--sd-dropdown-button-disabled-bg': DROPDOWN_DISABLED_BACKGROUND,
-                '--sd-dropdown-button-disabled-content': DROPDOWN_DISABLED_CONTENT,
+                '--sd-dropdown-button-disabled-content': DROPDOWN_DISABLED_TEXT,
                 '--sd-dropdown-button-disabled-border': DROPDOWN_DISABLED_BORDER,
-            } }, h("span", { key: 'adcf634bd7c325ec746635c153edf4b9e3d7b677', class: "sd-dropdown-button__trigger-label" }, this.label), h("span", { key: '533dfeaf615784543c802b825e8640cd2c873de2', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), h("span", { key: '200c1133e33e8c2cae4f20ff442ca247fef2764b', class: {
+            } }, h("span", { key: '04f3d92100e85b3aad59541a19002dc395c783fc', class: "sd-dropdown-button__trigger-label" }, this.label), h("span", { key: '72a49942403856fecfc2415d7318ef549f80905c', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), h("span", { key: 'cc7926fb8b3eec86dfcbb3c0aec5d193fd202cca', class: {
                 'sd-dropdown-button__trigger-icon': true,
                 'sd-dropdown-button__trigger-icon--open': this.isOpen,
-            }, "aria-hidden": "true" }, h("sd-icon", { key: 'e8ebd083b1d3c1375eb51cf5e2757df3bbb759a5', name: "chevronDown", size: 12, color: "var(--sd-dropdown-button-current-content)" }))), this.renderDropdown(preset)));
+            }, "aria-hidden": "true" }, h("sd-icon", { key: '4540ee571613668bae9157221ff8550a07cd35fa', name: "chevronDown", size: 12, color: "var(--sd-dropdown-button-current-content)" }))), this.renderDropdown(preset)));
     }
     static get is() { return "sd-dropdown-button"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-input/sd-input.css

@@ -182,4 +182,9 @@ sd-input .sd-input__content .sd-input__clear-icon,
 sd-input .sd-input__content .sd-input__password-icon {
   flex-shrink: 0;
   cursor: pointer;
+}
+sd-input .sd-input__content .sd-input__native[disabled] ~ .sd-input__clear-icon,
+sd-input .sd-input__content .sd-input__native[disabled] ~ .sd-input__password-icon {
+  cursor: not-allowed;
+  pointer-events: none;
 }

package/dist/collection/components/sd-input/sd-input.js

@@ -104,10 +104,16 @@ export class SdInput {
             '--sd-system-size-field-sm-height': `${sizeTokens.height}px`,
             '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
         };
-        return (h("sd-field", { key: '421eeff951b21ce57727ab023c026c7b00d97a36', name: this.name, label: this.label, 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 }, h("label", { key: '90e8182f3c2ea87696311eabc6bb33c8def7bc1d', class: "sd-input__content" }, h("slot", { key: '4a8f311ae31036ffc2bce4ca0b2fd42799287339', name: "prefix" }), h("input", { key: 'c3d69ca0146358eccf80565a557e5e94490953d2', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : this.type, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: 'd0d5aa897fee76985c87e72d7fa48541dfeead1e', name: "suffix" }), this.clearable && this.internalValue && (h("sd-icon", { key: 'c57f105b957d4fa70c9dd1eec0d359c599945038', name: "close", color: INPUT_COLORS.icon.default, size: INPUT_ICON.iconSize, class: "sd-input__clear-icon", onClick: async () => {
+        return (h("sd-field", { key: '6d88c272fc66a04f95140cddac8f4d343b7b0175', name: this.name, label: this.label, 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 }, h("label", { key: '76ab84d0c97d400d17e34838d7ad527d8d472c98', class: "sd-input__content" }, h("slot", { key: 'db463a1ff0c3a2d793aea57454dc49b04e919aa3', name: "prefix" }), h("input", { key: 'ebabcd0fdd55a44637c532e3eccacd3ff4e71f54', name: this.name, ref: el => (this.nativeEl = el), class: `sd-input__native ${this.inputClass}`, type: this.type === 'password' && this.passwordVisible ? 'text' : this.type, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: '40b09f7d1acb3287142efec65b1c3a8a8b1e9302', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && (h("sd-icon", { key: 'b403de0832762dc025bfc9add1835547acfd477a', name: "close", color: INPUT_COLORS.icon.default, size: INPUT_ICON.iconSize, class: "sd-input__clear-icon", onClick: async () => {
+                if (this.disabled)
+                    return;
                 this.internalValue = '';
                 await this.formField?.sdValidate();
-            } })), this.type === 'password' && (h("sd-icon", { key: '75c80ff0143ae0351dafe5166855132af3516b00', name: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', color: INPUT_COLORS.icon.default, size: INPUT_ICON.frameSize, class: "sd-input__password-icon", onClick: () => { this.passwordVisible = !this.passwordVisible; } })))));
+            } })), this.type === 'password' && (h("sd-icon", { key: 'edf2773fc424a4f9197ab1157781648e2dd3f0b6', name: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', color: INPUT_COLORS.icon.default, size: INPUT_ICON.frameSize, class: "sd-input__password-icon", onClick: () => {
+                if (this.disabled)
+                    return;
+                this.passwordVisible = !this.passwordVisible;
+            } })))));
     }
     static get is() { return "sd-input"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-number-input/sd-number-input.config.js

@@ -0,0 +1,39 @@
+import numberInputTokens from "../../tokens/generated/component.numberInput.json";
+const sm = numberInputTokens.numberInput.sm;
+const md = numberInputTokens.numberInput.md;
+export const NUMBER_INPUT_SIZE_MAP = {
+    sm: {
+        height: sm.height,
+        paddingX: sm.paddingX,
+        gap: sm.gap,
+        radius: sm.radius,
+        fontSize: sm.typography.fontSize,
+        lineHeight: sm.typography.lineHeight,
+        fontWeight: sm.typography.fontWeight,
+    },
+    md: {
+        height: md.height,
+        paddingX: md.paddingX,
+        gap: md.gap,
+        radius: md.radius,
+        fontSize: md.typography.fontSize,
+        lineHeight: md.typography.lineHeight,
+        fontWeight: md.typography.fontWeight,
+    },
+};
+export const NUMBER_INPUT_COLORS = {
+    border: numberInputTokens.numberInput.border,
+    bg: numberInputTokens.numberInput.bg,
+    text: numberInputTokens.numberInput.text,
+};
+export const NUMBER_INPUT_STEPPER = {
+    sm: { size: numberInputTokens.numberInput.stepper.sm.size },
+    md: { size: numberInputTokens.numberInput.stepper.md.size },
+    radius: numberInputTokens.numberInput.stepper.radius,
+    bg: numberInputTokens.numberInput.stepper.bg,
+    icon: numberInputTokens.numberInput.stepper.icon,
+};
+export const NUMBER_INPUT_HINT = numberInputTokens.numberInput.hint;
+export const NUMBER_INPUT_ERROR_MESSAGE = numberInputTokens.numberInput.errorMessage;
+export const NUMBER_INPUT_CONTENTS_GAP = numberInputTokens.numberInput.contents.gap;
+export const NUMBER_INPUT_BORDER_WIDTH = numberInputTokens.numberInput.borderWidth;

package/dist/collection/components/sd-number-input/sd-number-input.css

@@ -1,110 +1,67 @@
-sd-icon {
-  display: inline-block;
-  line-height: 0;
+sd-number-input {
+  display: inline-flex;
 }
-sd-icon .sd-icon--rotate-90 {
-  transform: rotate(90deg);
-}
-sd-icon .sd-icon--rotate-180 {
-  transform: rotate(180deg);
-}
-sd-icon .sd-icon--rotate-270 {
-  transform: rotate(270deg);
-}
-
-sd-number-input .sd-number-input {
-  box-sizing: border-box;
+sd-number-input .sd-number-input__content {
+  width: 100%;
+  height: 100%;
   display: flex;
-  width: var(--input-width, 100%);
+  flex-flow: row nowrap;
   align-items: center;
-  height: 28px;
-  padding: 4px 8px;
-  border-radius: 4px;
-  color: #333333;
-  font-size: 12px;
-  line-height: 20px;
-  position: relative;
-}
-sd-number-input .sd-number-input .sd-number-input__input {
-  display: block;
+  color: var(--sd-number-input-text-color);
+  font-size: var(--sd-number-input-font-size);
+  line-height: var(--sd-number-input-line-height);
+  font-weight: var(--sd-number-input-font-weight);
+  padding: 0 var(--sd-number-input-padding-x);
+  gap: var(--sd-number-input-gap);
+}
+sd-number-input .sd-number-input__content .sd-number-input__native {
   width: 100%;
-  height: 20px;
-  line-height: 20px;
+  height: 100%;
+  min-width: 0;
   border: none;
   outline: none;
   background: transparent;
   font-size: inherit;
-  color: #333333;
-  margin-left: 4px;
-  margin-right: 4px;
+  line-height: inherit;
+  font-weight: inherit;
+  color: inherit;
   padding-block: 0;
   padding-inline: 0;
-  text-align: right;
 }
-sd-number-input .sd-number-input .sd-number-input__input[disabled] {
+sd-number-input .sd-number-input__content .sd-number-input__native[disabled] {
   cursor: not-allowed;
-  color: #888888;
-}
-sd-number-input .sd-number-input .sd-number-input__input::placeholder {
-  font-size: 12px;
-  height: 20px;
-  line-height: 20px;
-  color: #AAAAAA;
+  color: var(--sd-number-input-disabled-color);
 }
-sd-number-input .sd-number-input .sd-number-input__clear-icon {
-  cursor: pointer;
-  margin-left: 8px;
+sd-number-input .sd-number-input__content .sd-number-input__native::placeholder {
+  color: var(--sd-number-input-placeholder-color);
 }
-sd-number-input .sd-number-input .sd-number-input__buttons {
-  padding: 4px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  position: absolute;
-  inset: 0;
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.2s ease;
+sd-number-input .sd-number-input__content .sd-number-input__prefix,
+sd-number-input .sd-number-input__content .sd-number-input__suffix {
+  flex-shrink: 0;
+  white-space: nowrap;
+  color: var(--sd-number-input-placeholder-color);
+  font-size: inherit;
+  line-height: inherit;
 }
-sd-number-input .sd-number-input .sd-number-input__button {
-  width: 20px;
-  height: 20px;
+sd-number-input .sd-number-input__content .sd-number-input__stepper {
+  flex-shrink: 0;
+  width: var(--sd-number-input-stepper-size);
+  height: var(--sd-number-input-stepper-size);
   border: none;
-  border-radius: 2px;
-  background-color: #EFF6FF;
+  border-radius: var(--sd-number-input-stepper-radius);
+  background-color: var(--sd-number-input-stepper-bg);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0;
   margin: 0;
-  transition: background-color 0.2s ease;
+  transition: background-color 0.15s ease;
 }
-sd-number-input .sd-number-input .sd-number-input__button:hover:not(:disabled) {
-  background-color: #E6F1FF;
+sd-number-input .sd-number-input__content .sd-number-input__stepper:hover:not(:disabled) {
+  filter: brightness(0.95);
 }
-sd-number-input .sd-number-input .sd-number-input__button:disabled {
-  background-color: #EEEEEE;
+sd-number-input .sd-number-input__content .sd-number-input__stepper:disabled {
+  background-color: var(--sd-number-input-stepper-bg-disabled);
   cursor: not-allowed;
-}
-sd-number-input .sd-number-input .sd-number-input__button--decrement {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-sd-number-input .sd-number-input .sd-number-input__button--increment {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
-sd-number-input .sd-number-input .sd-number-input__label {
-  margin-bottom: 8px;
-  font-weight: 500;
-  color: #333333;
-}
-sd-number-input:focus-within .sd-number-input__buttons {
-  opacity: 1;
-  pointer-events: auto;
-}
-sd-number-input:focus-within .sd-number-input {
-  border-color: #0075FF;
-  box-shadow: 0 0 4px 0 rgba(0, 113, 255, 0.4);
 }