@sellmate/design-system 1.0.60 → 1.0.62

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

@@ -3,20 +3,15 @@ import systemTokens from "../../tokens/generated/system.json";
 import { BUTTON_CONFIG, PRESET_BORDER_COLORS as BUTTON_PRESET_BORDER_COLORS, PRESET_CONTENT_COLORS as BUTTON_PRESET_CONTENT_COLORS, PRESET_HOVER_BACKGROUNDS as BUTTON_PRESET_HOVER_BACKGROUNDS, getPresetName, } from "../sd-button-v2/sd-button-v2.config";
 const DROPDOWN_BUTTON_NAMES = Object.keys(BUTTON_CONFIG).filter((name) => !name.endsWith('_lg'));
 export const DROPDOWN_BUTTON_CONFIG = Object.fromEntries(DROPDOWN_BUTTON_NAMES.map(name => [name, BUTTON_CONFIG[name]]));
-export const DROPDOWN_BUTTON_MIN_WIDTHS = {
-    xs: buttonTokens.dropdown.xs.minWidth,
-    sm: buttonTokens.dropdown.sm.minWidth,
-    md: buttonTokens.dropdown.md.minWidth,
-};
 export const PRESET_HOVER_BACKGROUNDS = BUTTON_PRESET_HOVER_BACKGROUNDS;
 export const PRESET_CONTENT_COLORS = BUTTON_PRESET_CONTENT_COLORS;
 export const PRESET_BORDER_COLORS = BUTTON_PRESET_BORDER_COLORS;
 export const PRESET_DIVIDER_COLORS = {
-    primary: buttonTokens.brand.strong.dropdown.divider,
-    secondary: buttonTokens.brand.subtle.dropdown.divider,
+    primary: buttonTokens.button.brand.strong.dropdown.divider,
+    secondary: buttonTokens.button.brand.subtle.dropdown.divider,
     primary_outline: PRESET_BORDER_COLORS.primary_outline,
     neutral_outline: PRESET_BORDER_COLORS.neutral_outline,
-    danger: buttonTokens.danger.strong.dropdown.divider,
+    danger: buttonTokens.button.danger.strong.dropdown.divider,
     danger_outline: PRESET_BORDER_COLORS.danger_outline,
 };
 const MENU_ITEM_COLOR = systemTokens.color.content.secondary;
@@ -46,9 +41,9 @@ export const PRESET_MENU_ITEM_ACTIVE_COLORS = {
     danger: MENU_ITEM_ACTIVE_COLOR,
     danger_outline: MENU_ITEM_ACTIVE_COLOR,
 };
-export const DROPDOWN_DISABLED_BACKGROUND = buttonTokens.bg.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 DROPDOWN_DISABLED_BACKGROUND = buttonTokens.button.bg.disabled;
+export const DROPDOWN_DISABLED_TEXT = buttonTokens.button.text.disabled;
+export const DROPDOWN_DISABLED_ICON = buttonTokens.button.icon.disabled;
+export const DROPDOWN_DISABLED_BORDER = buttonTokens.button.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

@@ -24,14 +24,12 @@ sd-dropdown-button {
   --sd-dropdown-button-current-content: var(--sd-dropdown-button-content);
   --sd-dropdown-button-divider: #006ac1;
   --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-text-disabled, $grey_65);
   --sd-dropdown-button-disabled-border: var(--sd-button-border-disabled, $grey_45);
   display: inline-flex;
   align-items: stretch;
   justify-content: space-between;
-  min-width: var(--sd-dropdown-button-min-width);
   min-height: var(--sd-dropdown-button-height);
   padding: 0;
   border: var(--sd-button-border-width-default, 1px) solid var(--sd-dropdown-button-border);
@@ -158,9 +156,7 @@ sd-dropdown-button {
 }
 .sd-dropdown-button__menu-item--active {
   background: var(--sd-dropdown-button-menu-item-active-bg);
-  --sd-dropdown-button-menu-item-current-color: var(
-   --sd-dropdown-button-menu-item-active-color
-  );
+  --sd-dropdown-button-menu-item-current-color: var(--sd-dropdown-button-menu-item-active-color);
 }
 .sd-dropdown-button__menu-item--disabled {
   --sd-dropdown-button-menu-item-current-color: var(--sd-dropdown-button-disabled-content);

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_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";
+import { DROPDOWN_BUTTON_CONFIG, 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,8 +186,7 @@ export class SdDropdownButton extends BaseDropdownEvent {
     }
     render() {
         const { config, preset } = this.resolvedConfig;
-        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`,
+        return (h("div", { key: 'eaaa15c76c5c05dd8a7e103368ae5a884fd999b1', class: "sd-dropdown-button" }, h("button", { key: '6e9dd2f7e7791ad7a4a17de1189bfc783cf61d69', 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],
@@ -197,10 +196,10 @@ export class SdDropdownButton extends 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,
-            } }, 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: {
+            } }, h("span", { key: '921f7f8c98537dd01645a95bef0468768dd8571c', class: "sd-dropdown-button__trigger-label" }, this.label), h("span", { key: 'b871623ea1ba07cf797fd98e3057b01e7263234f', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), h("span", { key: '6c42e134ca5ed5291277c0316bceaf5bd6859363', class: {
                 'sd-dropdown-button__trigger-icon': true,
                 'sd-dropdown-button__trigger-icon--open': this.isOpen,
-            }, "aria-hidden": "true" }, h("sd-icon", { key: '4540ee571613668bae9157221ff8550a07cd35fa', name: "chevronDown", size: 12, color: "var(--sd-dropdown-button-current-content)" }))), this.renderDropdown(preset)));
+            }, "aria-hidden": "true" }, h("sd-icon", { key: 'ae1df86b93b174cfc488f3fa079c62ff55ae2e67', 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-field/sd-field.css

@@ -95,14 +95,14 @@ sd-field .sd-field.sd-field--pass .sd-field__wrapper .sd-field__control {
   border: 1px solid var(--sd-system-color-field-border-success) !important;
 }
 sd-field .sd-field .sd-field__error-message {
-  color: var(--sd-textinput-input-text-error-message);
-  font-size: var(--sd-textinput-input-error-message-typography-font-size);
-  line-height: var(--sd-textinput-input-error-message-typography-line-height);
-  margin-top: var(--sd-textinput-input-contents-gap);
+  color: var(--sd-textinput-textinput-text-error-message);
+  font-size: var(--sd-textinput-textinput-error-message-typography-font-size);
+  line-height: var(--sd-textinput-textinput-error-message-typography-line-height);
+  margin-top: var(--sd-textinput-textinput-contents-gap);
 }
 sd-field .sd-field .sd-field__hint {
-  color: var(--sd-textinput-input-text-hint);
-  font-size: var(--sd-textinput-input-hint-typography-font-size);
-  line-height: var(--sd-textinput-input-hint-typography-line-height);
-  margin-top: var(--sd-textinput-input-contents-gap);
+  color: var(--sd-textinput-textinput-text-hint);
+  font-size: var(--sd-textinput-textinput-hint-typography-font-size);
+  line-height: var(--sd-textinput-textinput-hint-typography-line-height);
+  margin-top: var(--sd-textinput-textinput-contents-gap);
 }

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

@@ -10,6 +10,8 @@ const FORM_PARENT_TAGS = [
     'sd-number-input',
     'sd-select-v2',
     'sd-file-picker',
+    'sd-date-picker',
+    'sd-date-range-picker',
 ];
 export class SdField {
     el;
@@ -147,12 +149,12 @@ export class SdField {
                 '--sd-field-addon-border-width': `${addonTokens.border.width}px`,
             }
             : {};
-        return (h("div", { key: 'e37722a9afbd78654328954262d4bc458634170a', class: {
+        return (h("div", { key: '3e4be9c9f1744faa0f763f0adc86c70bdceb8bbd', class: {
                 'sd-field': true,
                 'sd-field--has-label': !!this.label,
                 'sd-field--has-addon': !!addon,
                 [this.fieldStatus]: !!this.fieldStatus,
-            }, style: { ...labelCssVars, ...addonCssVars } }, h("div", { key: '38440e5f21fba28ff49fd00bfd20189af9c43707', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: 'b6d65e0db6667cbe9b4dd85ec72f9ecd08afa291', class: {
+            }, style: { ...labelCssVars, ...addonCssVars } }, h("div", { key: '240f8ffc487da6aa694aae2e2568a5c178233069', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: '8d8273dfcf65dd7fe0dd6e565313470b491970a0', class: {
                 'sd-field__control': true,
                 'sd-field__control--has-addon': !!addon,
             }, style: this.width
@@ -160,7 +162,7 @@ export class SdField {
                     width: typeof this.width === 'number' ? `${this.width}px` : this.width,
                     flex: 'none',
                 }
-                : {} }, addon && h("div", { key: '71a50d839dbbd7075c1f7f7b2daad0308ebc1225', class: "sd-field__addon" }, addon), h("slot", { key: '5c0696834e82eddde81c6603d26373a745a1febb' }))), this.errorMsg || this.errorMessage ? (h("div", { class: "sd-field__error-message" }, this.errorMsg || this.errorMessage)) : (this.hint && h("div", { class: "sd-field__hint" }, this.hint))));
+                : {} }, addon && h("div", { key: 'b08657bb5fe753defdd273464a5faeabc1a7e57e', class: "sd-field__addon" }, addon), h("slot", { key: '77c653b18f1cf4b3280e8deeff483ca22fbc0330' }))), this.errorMsg || this.errorMessage ? (h("div", { class: "sd-field__error-message" }, this.errorMsg || this.errorMessage)) : (this.hint && h("div", { class: "sd-field__hint" }, this.hint))));
     }
     renderLabel(label) {
         if (!label)

package/dist/collection/components/sd-floating-portal/sd-floating-portal.js

@@ -144,7 +144,7 @@ export class SdFloatingPopover {
         this.close.emit();
     }
     render() {
-        return h("slot", { key: '025daba88b77d9e250893b20261bfce08f37e332' });
+        return h("slot", { key: '4f7cf13fe78e7d4e906a2cda47de4258d9ceda74' });
     }
     static get is() { return "sd-floating-portal"; }
     static get originalStyleUrls() {

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

@@ -59,7 +59,7 @@ export class SdForm {
         this.submitSuccess.emit();
     }
     render() {
-        return (h("form", { key: '2a72e0fb172294913a22560311e8dfcc4b151968', onSubmit: e => this.onSubmit(e), class: this.formClass }, h("slot", { key: 'd0bd0c7f915e10c7fd9aa36af68b2020035a43d4' })));
+        return (h("form", { key: 'd37e7f5291b9f340ed020aadbc7e111c6ac9d375', onSubmit: e => this.onSubmit(e), class: this.formClass }, h("slot", { key: 'be3d12eb60e10a5b77dc9bd150ac2be23e08f3f0' })));
     }
     static get is() { return "sd-form"; }
     static get properties() {

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

@@ -28,10 +28,18 @@ export const GHOST_BUTTON_CONTENT_COLORS = {
     default: ghostButtonTokens.ghostButton.default.content,
     danger: ghostButtonTokens.ghostButton.danger.content,
     action: ghostButtonTokens.ghostButton.action.content,
+    inverse: ghostButtonTokens.ghostButton.inverse.content,
 };
 export const GHOST_BUTTON_HOVER_BG_COLORS = {
     default: ghostButtonTokens.ghostButton.default.hover.bg,
     danger: ghostButtonTokens.ghostButton.danger.hover.bg,
     action: ghostButtonTokens.ghostButton.action.hover.bg,
+    inverse: ghostButtonTokens.ghostButton.inverse.hover.bg,
 };
 export const GHOST_BUTTON_DISABLED_ICON = ghostButtonTokens.ghostButton.icon.disabled;
+export const GHOST_BUTTON_DISABLED_COLORS = {
+    default: GHOST_BUTTON_DISABLED_ICON,
+    danger: GHOST_BUTTON_DISABLED_ICON,
+    action: GHOST_BUTTON_DISABLED_ICON,
+    inverse: ghostButtonTokens.ghostButton.inverse.disabled,
+};

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

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { GHOST_BUTTON_CONTENT_COLORS, GHOST_BUTTON_DISABLED_ICON, GHOST_BUTTON_FOCUS_RING_COLOR, GHOST_BUTTON_HOVER_BG_COLORS, GHOST_BUTTON_HOVER_OPACITY, GHOST_BUTTON_RADIUS, GHOST_BUTTON_SIZES, } from "./sd-ghost-button.config";
+import { GHOST_BUTTON_CONTENT_COLORS, GHOST_BUTTON_DISABLED_COLORS, GHOST_BUTTON_FOCUS_RING_COLOR, GHOST_BUTTON_HOVER_BG_COLORS, GHOST_BUTTON_HOVER_OPACITY, GHOST_BUTTON_RADIUS, GHOST_BUTTON_SIZES, } from "./sd-ghost-button.config";
 export class SdGhostButton {
     icon;
     size = 'sm';
@@ -32,10 +32,10 @@ export class SdGhostButton {
     render() {
         const sizeConfig = GHOST_BUTTON_SIZES[this.size];
         const contentColor = this.disabled
-            ? GHOST_BUTTON_DISABLED_ICON
+            ? GHOST_BUTTON_DISABLED_COLORS[this.intent]
             : GHOST_BUTTON_CONTENT_COLORS[this.intent];
         const accessibleName = this.ariaLabel.trim() || undefined;
-        return (h("button", { key: '8d6aa7e82d3e3f31638e98870283723fdb87e0e2', class: {
+        return (h("button", { key: '783888ed2c124bf8e08698de0bc2e904b86722e9', class: {
                 'sd-ghost-button': true,
                 'sd-ghost-button--disabled': this.disabled,
             }, type: "button", disabled: this.disabled, "aria-label": accessibleName, style: {
@@ -44,7 +44,7 @@ export class SdGhostButton {
                 '--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[this.intent],
                 '--sd-ghost-button-hover-opacity': GHOST_BUTTON_HOVER_OPACITY,
                 '--sd-ghost-button-accent': GHOST_BUTTON_FOCUS_RING_COLOR,
-            }, onClick: this.handleClick }, h("sd-icon", { key: 'd858b173e3f93c49703b31cde6be4fa81440ae7a', name: this.icon, size: sizeConfig.icon, color: contentColor })));
+            }, onClick: this.handleClick }, h("sd-icon", { key: '4ae4347b169267e6964c461126b6c9a4281578bb', name: this.icon, size: sizeConfig.icon, color: contentColor })));
     }
     static get is() { return "sd-ghost-button"; }
     static get originalStyleUrls() {
@@ -115,7 +115,7 @@ export class SdGhostButton {
                 "mutable": false,
                 "complexType": {
                     "original": "GhostButtonIntent",
-                    "resolved": "\"action\" | \"danger\" | \"default\"",
+                    "resolved": "\"action\" | \"danger\" | \"default\" | \"inverse\"",
                     "references": {
                         "GhostButtonIntent": {
                             "location": "import",

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

@@ -47,9 +47,9 @@ export class SdGuide {
     };
     render() {
         const { name: iconName, size: iconSize, color: iconColor } = GUIDE_ICON[this.type];
-        return (h("div", { key: 'd98a48deb586592dbb379acb4e3725a97601dccd', class: "sd-guide", style: {
+        return (h("div", { key: '0f70d3686c37c029635c93a8ad8f937fb2ca73c2', class: "sd-guide", style: {
                 '--sd-guide-color': GUIDE_ICON[this.type].color,
-            } }, h("sd-button", { key: '35b3215ac7d73f2ae9375ab46b2981b314769fdd', ref: el => (this.guideRef = el), class: this.guideClass, variant: this.popupShow ? 'primary' : 'outline', label: this.label || GUIDE_LABEL[this.type], size: "sm", color: this.popupShow ? GUIDE_ICON[this.type].color : 'grey_45', icon: iconName, iconColor: this.popupShow ? 'white' : iconColor, iconSize: iconSize, noHover: this.popupShow, onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (h("sd-portal", { key: '56bda42619f3f10fbdc428e3d11abc1a4a812029', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: 'a73954469eb2f711ece68c8b17fe2d197b4fd515', style: { position: 'absolute', width: '0px', height: '0px' } }, h("div", { key: 'bf07222fe61b7121d99f0ae39e1e7ffb539db1de', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, h("sd-button", { key: 'c9b8d6c2a311e7a83e9c8b2568b3010e5619ad51', class: "sd-guide__popup__close", icon: "close", color: "grey_65", size: "md", variant: "ghost", noHover: true, onSdClick: this.closeDropdown }), h("div", { key: 'da280eb73610cb0f70c5adbf10e413ea4d8a4629', class: "sd-guide__popup__header" }, h("sd-icon", { key: 'ec73b6ed0777b464208e9bf94d96b044d8770714', name: "helpOutline", size: 24, color: "green_65" }), h("h3", { key: '18a221c3dedb1882479c2a567b3c870d7dfd157b', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), h("ul", { key: '5a8abec7b5c3246a5eb6a7ec45a3c16a05ccab72', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
+            } }, h("sd-button", { key: 'f07235cc53a908237af2f13a98f325340c83fd0e', ref: el => (this.guideRef = el), class: this.guideClass, variant: this.popupShow ? 'primary' : 'outline', label: this.label || GUIDE_LABEL[this.type], size: "sm", color: this.popupShow ? GUIDE_ICON[this.type].color : 'grey_45', icon: iconName, iconColor: this.popupShow ? 'white' : iconColor, iconSize: iconSize, noHover: this.popupShow, onSdClick: this.handleClickGuide }), this.type === 'help' && this.popupShow && (h("sd-portal", { key: '9c5ade0db41a02a343bb77bc1dcb44d12dba6c04', open: this.popupShow, parentRef: this.guideRef, onSdClose: this.closeDropdown, offset: [0, 4] }, h("div", { key: 'd59caf4107b678ce132accfe9f392c3cfa6b35f4', style: { position: 'absolute', width: '0px', height: '0px' } }, h("div", { key: '22aa97a939e27454dec067effc6911aea6ace2a4', class: "sd-guide__popup", style: { width: this.popupWidth ? this.popupWidth + 'px' : '426px' } }, h("sd-button", { key: '6bf404b6718bbd036acff51101538d967a2cd642', class: "sd-guide__popup__close", icon: "close", color: "grey_65", size: "md", variant: "ghost", noHover: true, onSdClick: this.closeDropdown }), h("div", { key: 'a63aa9263715f57f2e8bf977c4849f868803a704', class: "sd-guide__popup__header" }, h("sd-icon", { key: '8ba1969ada651d3226058bb9095ae8b794be1759', name: "helpOutline", size: 24, color: "green_65" }), h("h3", { key: '41dd2533e146eae12ee7367a243e819362597761', class: "sd-guide__popup__title" }, this.popupTitle || GUIDE_LABEL[this.type])), h("ul", { key: 'b45bfd9ff793f0c0860789d16c1c17fef2ad01d5', class: "sd-guide__popup__list" }, this.renderListItem(this.message))))))));
     }
     // 현재 2depth까지만 스타일 적용
     renderListItem(message, depth = 0) {

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

@@ -1,6 +1,6 @@
 import inputTokens from "../../tokens/generated/component.textinput.json";
-const sm = inputTokens.input.sm;
-const md = inputTokens.input.md;
+const sm = inputTokens.textinput.sm;
+const md = inputTokens.textinput.md;
 export const INPUT_SIZE_MAP = {
     sm: {
         height: sm.height,
@@ -22,8 +22,8 @@ export const INPUT_SIZE_MAP = {
     },
 };
 export const INPUT_COLORS = {
-    border: inputTokens.input.border,
-    bg: inputTokens.input.bg,
-    text: inputTokens.input.text,
-    icon: inputTokens.input.icon,
+    border: inputTokens.textinput.border,
+    bg: inputTokens.textinput.bg,
+    text: inputTokens.textinput.text,
+    icon: inputTokens.textinput.icon,
 };

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

@@ -12,118 +12,6 @@ sd-icon .sd-icon--rotate-270 {
   transform: rotate(270deg);
 }
 
-.sd-date-picker {
-  width: 100%;
-  display: inline-block;
-}
-.sd-date-picker .sd-date-picker--disabled .date-icon {
-  cursor: not-allowed !important;
-  color: #888888 !important;
-}
-.sd-date-picker .sd-date-picker__input {
-  text-align: center !important;
-}
-
-.sd-date-picker__menu {
-  border-radius: 8px;
-  box-shadow: 2px 2px 12px 2px rgba(0, 0, 0, 0.2);
-}
-
-sd-date-range-picker {
-  width: fit-content;
-  display: inline-flex;
-}
-sd-date-range-picker .sd-date-range-picker--disabled .date-icon {
-  cursor: not-allowed !important;
-  color: #888888 !important;
-}
-sd-date-range-picker .sd-date-range-picker--disabled .sd-input__native {
-  color: #888888 !important;
-}
-sd-date-range-picker .sd-field .sd-field__control {
-  min-width: 210px;
-}
-sd-date-range-picker .sd-field .sd-input__native {
-  margin-left: 17px !important;
-}
-
-.sd-date-range-picker__menu {
-  width: 609px;
-  box-sizing: border-box;
-  border-radius: 8px;
-  padding: 24px 19px;
-  box-shadow: 2px 2px 12px 2px rgba(0, 0, 0, 0.2);
-  background: white;
-}
-.sd-date-range-picker__menu .sd-date-range-picker__header {
-  margin-bottom: 16px;
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: center;
-  justify-content: center;
-}
-.sd-date-range-picker__menu .sd-date-range-picker__header .header-label {
-  margin: 0 12px;
-  width: 40px;
-  text-align: center;
-  font-size: 14px;
-  line-height: 24px;
-}
-.sd-date-range-picker__menu .sd-date-range-picker__body {
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: stretch;
-  gap: 19px;
-}
-.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container {
-  width: 266px;
-}
-.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header {
-  width: 100%;
-  height: 24px;
-  line-height: 24px;
-  font-size: 14px;
-  text-align: center;
-  position: relative;
-  padding: 0 5px;
-}
-.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header button {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-}
-.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header button.header-button-prev {
-  left: 5px;
-}
-.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-header button.header-button-next {
-  right: 5px;
-  left: auto;
-}
-.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-days {
-  padding: 0 5px;
-  margin-top: 8px;
-  display: grid;
-  grid-template-columns: repeat(7, minmax(0, 1fr));
-  column-gap: 10px;
-}
-.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-days .day {
-  width: 28px;
-  height: 20px;
-  font-size: 12px;
-  line-height: 20px;
-  text-align: center;
-  color: #888888;
-}
-.sd-date-range-picker__menu .sd-date-range-picker__body .calendar-container .calendar-body {
-  margin-top: 12px;
-  display: grid;
-  grid-template-columns: repeat(7, minmax(0, 1fr));
-}
-.sd-date-range-picker__menu .sd-date-range-picker__body .separator {
-  width: 1px;
-  background-color: #D8D8D8;
-}
-
 input:-webkit-autofill,
 input:-webkit-autofill:hover,
 input:-webkit-autofill:focus,

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

@@ -110,12 +110,12 @@ 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: 'd5f554784340cbb9246165fb15124098e4f7165b', 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: '02225d57c5bd17dbe78c680f243ad3a9a4ab3b5d', class: "sd-input__content" }, h("slot", { key: '1011876ea9726e62a19047b28a82932e43762436', name: "prefix" }), h("input", { key: '10f4c594382aa002ba09a0012979ff930154fc7a', 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, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: '007d15357a81f13ab4db5ddf237110b9d1f1728b', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && (h("sd-ghost-button", { key: '92dfd40117cccdb48ebfc0056aa9e093546bbf6b', icon: "close", ariaLabel: "close", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
+        return (h("sd-field", { key: '16881490eb9d8d08aa0788be2dbb845b12f50269', 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: '04e71967c3b3f7bf4589a3aaf4505c5d67d615da', class: "sd-input__content" }, h("slot", { key: '18476a19c8825734e475116586bab2711c1d84e3', name: "prefix" }), h("input", { key: '7600e0ade86d1bca8ba6197d49bd72ef4d0778dd', 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, autocomplete: this.autocomplete || undefined, maxlength: this.maxlength, minlength: this.minlength, inputmode: this.inputmode, enterkeyhint: this.enterkeyhint, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: '5c98ef1acdb26a1c0f89fc04101c0315b017c08a', name: "suffix" }), this.clearable && this.internalValue && !this.disabled && (h("sd-ghost-button", { key: 'f188270be3635c68d99a453eaba61f53d6bb2bc7', icon: "close", ariaLabel: "close", size: "xxs", disabled: this.disabled, class: "sd-input__clear-icon", onClick: async () => {
                 if (this.disabled)
                     return;
                 this.internalValue = '';
                 await this.formField?.sdValidate();
-            } })), this.type === 'password' && (h("sd-ghost-button", { key: 'a4bef720b55a94a4a6ada002f4a2ffd1d0f8da24', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled, class: "sd-input__password-icon", onClick: () => {
+            } })), this.type === 'password' && (h("sd-ghost-button", { key: 'cedaceae0b81e007e4672a57c950bd6b23d045cd', icon: this.passwordVisible ? 'visibilityOn' : 'visibilityOff', ariaLabel: "visibility", size: "xxs", disabled: this.disabled, class: "sd-input__password-icon", onClick: () => {
                 if (this.disabled)
                     return;
                 this.passwordVisible = !this.passwordVisible;

package/dist/collection/components/sd-loading-spinner/sd-loading-spinner.js

@@ -6,7 +6,7 @@ export class SdLoadingSpinner {
         return resolveColor(this.color);
     }
     render() {
-        return (h(Fragment, { key: '1a4edb8be9cc83ab900cd615ee30958d9822e98b' }, h("svg", { key: '634070026b58303bf3423b10f37ed6603179b9b1', class: "sd-loading-spinner", width: "72px", height: "72px", viewBox: "25 25 50 50", style: { color: this.resolvedColor } }, h("circle", { key: 'fda3f7e4f787176f6030e19a3f2c1dd59326d35a', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
+        return (h(Fragment, { key: 'a86933f554042c2d4b18836d37bb762d17080202' }, h("svg", { key: 'd0f301366f4b28855bf609dc048fdc7d76fd0433', class: "sd-loading-spinner", width: "72px", height: "72px", viewBox: "25 25 50 50", style: { color: this.resolvedColor } }, h("circle", { key: '64068446f4a6ec1892a00ca92da7a3f1f566891c', class: "path", cx: "50", cy: "50", r: "20", fill: "none", stroke: "currentColor", "stroke-width": "5", "stroke-miterlimit": "10" }))));
     }
     static get is() { return "sd-loading-spinner"; }
     static get originalStyleUrls() {

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

@@ -271,12 +271,12 @@ export class SdNumberInput {
             '--sd-textinput-input-hint-typography-line-height': `${NUMBER_INPUT_HINT.typography.lineHeight}px`,
             '--sd-textinput-input-contents-gap': `${NUMBER_INPUT_CONTENTS_GAP}px`,
         };
-        return (h("sd-field", { key: 'c09a48d9c0bfb0eb6c4327e63ff190b4fee7eff9', 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, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: '7ba690b017d58326640083feb4f88ab74e20f7e3', class: "sd-number-input__content" }, this.useButton && (h("button", { key: '0eb3ccd26428fce21d74b1e2f06258b054337017', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: '4af528aa82ddc6f8abbee1fa8617f5fefc77f41b', name: "minus", size: iconSize, color: this.isDecrementDisabled()
+        return (h("sd-field", { key: 'd12c62be0352fcaa356450f7a534f3f1c684cf8e', 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, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: 'be7463579f63800d84531ed72fe84c47de7a005c', class: "sd-number-input__content" }, this.useButton && (h("button", { key: '23f1e57fc26545bef557b1fc6d1827783ffe7144', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, h("sd-icon", { key: '9b918e18437423e3aec20e5cb66d0d84b3e59649', name: "minus", size: iconSize, color: this.isDecrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
-                : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && (h("span", { key: 'f524a85295c29dc02b6803d5a145d24d6d7c3f1b', class: "sd-number-input__prefix" }, this.inputPrefix)), h("input", { key: '4f3c539cb82745b317ebc2e17f2852a5b386ba6b', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__native ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
+                : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && (h("span", { key: '0793d70a0040400cc4e1f3bfe8cafaa02f42a8c2', class: "sd-number-input__prefix" }, this.inputPrefix)), h("input", { key: '31d91862988aa0ee3aabcd78a66844c37b9efac0', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__native ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
                 textAlign: this.useButton ? 'center' : 'right',
                 ...this.inputStyle,
-            } }), this.inputSuffix && (h("span", { key: '35a1cd706a87cf9320262b12aab7679cbb9eb7f2', class: "sd-number-input__suffix" }, this.inputSuffix)), this.useButton && (h("button", { key: 'a818bf380ac32291155bf8a3c35cf9b9a007ec5e', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: '0d2e75fb5ebada9aa0846e807695d31f29b18647', name: "add", size: iconSize, color: this.isIncrementDisabled()
+            } }), this.inputSuffix && (h("span", { key: 'fab71e56d4876d0899b9744632d21fb41c344bb6', class: "sd-number-input__suffix" }, this.inputSuffix)), this.useButton && (h("button", { key: '1b1c80f63d7bd8503a9d3c2cbbd5170a44d511bf', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, h("sd-icon", { key: 'a0073de5e46fc8463f818ac2521725fb8eb7211f', name: "add", size: iconSize, color: this.isIncrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
                 : NUMBER_INPUT_STEPPER.icon.default }))))));
     }

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

@@ -68,12 +68,12 @@ export class SdPagination {
         }
     }
     render() {
-        return (h("div", { key: 'd370dfd96244d439f83aa6f283ea3601b51ca8f1', class: this.paginationClasses }, h("div", { key: '4287df0cbd99892e643b1e68ce051ac119c758d2', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "pagination-info" }, h("span", { class: "current-page" }, this.currentPage), h("span", null, "/"), h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
+        return (h("div", { key: '910b6487f1d2b5581116a19e4bdf4514fe961922', class: this.paginationClasses }, h("div", { key: '1109809ea6c19088617f3ed4e3c878e60071084f', class: "prepend-btns" }, this.renderPrevButtons()), this.simple ? (h("div", { class: "pagination-info" }, h("span", { class: "current-page" }, this.currentPage), h("span", null, "/"), h("span", { class: "last-page" }, this.lastPage))) : (this.pageNumbers.map(n => (h("button", { type: "button", "aria-current": this.currentPage === n ? 'page' : undefined, class: {
                 'pagination-btn': true,
                 'pagination-btn--selected': this.currentPage === n,
             }, disabled: this.currentPage === n, style: {
                 '--pagination-btn-width': `${this.buttonWidth}px`,
-            }, onClick: () => this.handlePageChange(n) }, n)))), h("div", { key: 'ad51e05546d929ac01898e93ab4285018837394a', class: "append-btns" }, this.renderNextButtons())));
+            }, onClick: () => this.handlePageChange(n) }, n)))), h("div", { key: '10a0645cba99193a64fbe1f2df90bef9b19da8d5', class: "append-btns" }, this.renderNextButtons())));
     }
     static get is() { return "sd-pagination"; }
     static get originalStyleUrls() {

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

@@ -43,14 +43,14 @@ export class SdPopover {
         this.showPopover = false;
     };
     render() {
-        return (h(Fragment, { key: '6a0b64ce442f1bd1dc76f22a160172a87a63a1d8' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onSdClick: () => (this.showPopover = !this.showPopover) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })), this.showPopover && (h("sd-floating-portal", { key: 'e8d39da8af440c81773805331ab97a0105124d81', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement, offset: this.popoverOffset }, h("div", { key: 'f608e4dc384f48a9f52133055b718e305d1e9f86', class: {
+        return (h(Fragment, { key: '8b4e44957bff5bdb075568b15612b31fb42eaffc' }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: this.icon, size: this.buttonSize, color: this.color, variant: this.buttonVariant, class: "sd-popover", onSdClick: () => (this.showPopover = !this.showPopover) })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: this.icon, size: this.iconSize, color: this.color, class: "sd-popover", onClick: () => (this.showPopover = !this.showPopover) })), this.showPopover && (h("sd-floating-portal", { key: 'e4b676771effb4a51593c6ae0a23f15bd34878a3', parentRef: this.buttonEl, onSdClose: this.handleClose, placement: this.placement, offset: this.popoverOffset }, h("div", { key: 'c74dea7df660a3e8285f813d9cfe490c144f3093', class: {
                 'sd-floating-menu': true,
                 'sd-floating-menu--popover': true,
                 [`sd-floating-menu--${this.placement}`]: true,
                 [this.menuClass]: !!this.menuClass,
             }, style: {
                 '--sd-floating-bg': popoverTokens.popover.bg,
-            } }, h("i", { key: '8052d9f446b03770c22857048c88048f0bc982cd', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: 'f6266c4da625b539f9864da6b09599a5b4bf07cb' })), h("div", { key: '8de90282dae5ba223b6495c1f5ef9baaac88ed17', class: "sd-floating-menu__content" }, this.menuTitle && h("div", { key: '79e26ede34d97abce06bfda8dc1bd29122c2e1ac', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: 'a25d8a379e373e136363a3bce19be76fd2fba182', class: "sd-floating-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: '9cf61069c654a2d884ae0660ec6ffceb563e3617', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (h("sd-button", { ...button })))))), this.useClose && (h("sd-ghost-button", { key: '14ef6918e763521ff4db0a0f05e1598e767f257d', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xs", onClick: () => this.handleClose() })))))));
+            } }, h("i", { key: '7ff2cfecec309217bf1b5ad1f523e37737798120', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${this.placement}` }, h(TooltipArrow, { key: 'df1696d49eb0894805e59f3d0c1112be20e94d84' })), h("div", { key: '0c4babf4b592f5457bdc83f72316a9e718e075aa', class: "sd-floating-menu__content" }, this.menuTitle && h("div", { key: '4a8c4fb114b15068b49f5c6546080e8667ea12fe', class: "sd-floating-menu__title" }, this.menuTitle), this.messages.length > 0 && (h("div", { key: '47646cb9cb596afcf3bf38e2b08cdef7074ff658', class: "sd-floating-menu__messages" }, this.messages.map(message => (h("div", null, message))))), this.buttons.length > 0 && (h("div", { key: '939eb40eba7beda3aac32abcdcb9f6cd75fb6b45', class: `sd-floating-menu__buttons sd-floating-menu__buttons--${this.buttons.length}` }, this.buttons.map(button => (h("sd-button", { ...button })))))), this.useClose && (h("sd-ghost-button", { key: 'fb73a35c3db25d2cde16aeb10f14005e82121c6a', class: "sd-floating-menu__close-button", icon: "close", ariaLabel: "close", size: "xs", onClick: () => this.handleClose() })))))));
     }
     static get is() { return "sd-popover"; }
     static get originalStyleUrls() {

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

@@ -220,7 +220,7 @@ export class SdPortal {
         this.close.emit();
     }
     render() {
-        return h("slot", { key: 'c1e05f5d7c809418279e4ded8bbb8c4b29703bb1' });
+        return h("slot", { key: '07cb09b04ab2567afb15b9ae2cc189875f4b55b4' });
     }
     static get is() { return "sd-portal"; }
     static get properties() {

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

@@ -33,10 +33,10 @@ export class SdProgress {
         return this.statusColor[this.progressStatus];
     }
     render() {
-        return (h("div", { key: 'f5b723807c29b9e4a742febaf7d2f984f9de61d5', style: {
+        return (h("div", { key: 'f50623b8a78ce370c5b36e0fc5ac6e04bb5e029c', style: {
                 '--progress-color': this.progressColor,
                 '--progress-percentage': `${this.progressPercentage}%`,
-            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && h("div", { key: '369e1b7805414b8a2fa5e44f4746435335a251cb', class: "sd-progress__label" }, this.label)));
+            } }, this.type === 'bar' ? this.renderBarProgress() : this.renderSpinnerProgress(), this.label && h("div", { key: '5a6414ee55f7d3300a9cc06e86376bfd1a123a64', class: "sd-progress__label" }, this.label)));
     }
     renderBarProgress() {
         return (h("div", { class: `sd-progress__bar sd-progress__bar--${this.progressStatus}` }, h("div", { class: ['sd-progress__bar__percent', this.progressPercentage < 100 ? 'proceed' : ''].join(' ') }), h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--left" }, this.progressPercentage, "%"), h("div", { class: "sd-progress__bar__indicator sd-progress__bar__indicator--right" }, this.progressPercentage, "%")));

package/dist/collection/components/sd-radio/sd-radio.config.js

@@ -0,0 +1,30 @@
+import radioTokens from "../../tokens/generated/component.radio.json";
+export const RADIO_LAYOUT = {
+    size: radioTokens.radio.size,
+    radius: radioTokens.radio.radius,
+    borderWidth: radioTokens.radio.borderWidth,
+    gap: radioTokens.radio.gap,
+};
+export const RADIO_TYPOGRAPHY = {
+    fontSize: radioTokens.radio.typography.fontSize,
+    lineHeight: radioTokens.radio.typography.lineHeight,
+    fontWeight: radioTokens.radio.typography.fontWeight,
+};
+export const RADIO_COLORS = {
+    unchecked: {
+        bg: radioTokens.radio.unchecked.bg.default,
+        bgHover: radioTokens.radio.unchecked.bg.hover,
+        border: radioTokens.radio.unchecked.border.default,
+        borderHover: radioTokens.radio.unchecked.border.hover,
+    },
+    checked: {
+        border: radioTokens.radio.checked.border.default,
+        dot: radioTokens.radio.checked.dot.default,
+    },
+    disabled: {
+        bg: radioTokens.radio.bg.disabled,
+        border: radioTokens.radio.border.disabled,
+        dot: radioTokens.radio.dot.disabled,
+    },
+    label: radioTokens.radio.label.default,
+};