@sellmate/design-system 1.0.21 → 1.0.23

package/dist/esm/sd-tag.entry.js

@@ -1,52 +1,110 @@
-import { r as registerInstance, a as getElement, h } from './index-C_an1PQ3.js';
+import { r as registerInstance, h } from './index-B8tGP77V.js';
 
-const sdTagCss = () => `:host{display:inline-block}:host([full-width]){display:block}.sd-tag{display:inline-flex;width:100%;align-items:center;justify-content:center;gap:8px;text-decoration:none;border:1px solid transparent;border-radius:4px;transition:all 0.2s ease-in-out;position:relative;overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none;box-sizing:border-box}.sd-tag__content{display:inline-block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sd-tag--custom-color{background:var(--tag-bg-color);color:var(--tag-text-color)}.sd-tag--sm{padding:0 6px;font-size:11px;line-height:18px;height:20px;border-radius:4px}.sd-tag--md{padding:0 8px;font-size:12px;font-weight:700;line-height:20px;height:24px;border-radius:4px}.sd-tag--lg{padding:0 10px;font-size:14px;font-weight:700;line-height:24px;min-height:28px;border-radius:5px}.sd-tag--rounded.sd-tag--sm{border-radius:20px}.sd-tag--rounded.sd-tag--md{border-radius:20px}.sd-tag--rounded.sd-tag--lg{border-radius:15px}`;
-
-const TAG_COLORS = {
-    grey: 'bg-grey_20 text-grey_70',
-    red: 'bg-red_15 text-red_70',
-    orange: 'bg-orange_10 text-orange_65',
-    yellow: 'bg-yellow_10 text-yellow_70',
-    green: 'bg-green_15 text-green_75',
-    blue: 'bg-brilliantblue_20 text-brilliantblue_75',
-    darkblue: 'bg-oceanblue_15 text-oceanblue_70',
-    indigo: 'bg-brilliantblue_10 text-brilliantblue_85',
+const TAG_SHAPES = ['square', 'pill'];
+const TAG_SIZES = ['sm', 'md', 'lg'];
+const TAG_COLORS = [
+    'grey',
+    'red',
+    'orange',
+    'yellow',
+    'green',
+    'blue',
+    'darkblue',
+    'indigo',
+];
+const TAG_COLOR_CONFIG = {
+    grey: { background: '#EEEEEE', content: '#737373', icon: '#737373' },
+    red: { background: '#FCEFEF', content: '#FB4444', icon: '#FB4444' },
+    orange: { background: '#FEF1EA', content: '#FF6B00', icon: '#FF6B00' },
+    yellow: { background: '#FFF7DD', content: '#916C0D', icon: '#CA9611' },
+    green: { background: '#E8F9EF', content: '#00973C', icon: '#12B553' },
+    blue: { background: '#E6F1FF', content: '#0075FF', icon: '#0075FF' },
+    darkblue: { background: '#EAF5FE', content: '#006AC1', icon: '#006AC1' },
+    indigo: { background: '#EFF6FF', content: '#004290', icon: '#004290' },
+};
+const SQUARE_SIZE_CONFIG = {
+    sm: {
+        height: '20px',
+        paddingX: '6px',
+        gap: '4px',
+        fontSize: '11px',
+        fontWeight: '500',
+        iconSize: 12,
+        radius: '4px',
+    },
+    md: {
+        height: '24px',
+        paddingX: '8px',
+        gap: '4px',
+        fontSize: '12px',
+        fontWeight: '700',
+        iconSize: 16,
+        radius: '4px',
+    },
+    lg: {
+        height: '28px',
+        paddingX: '10px',
+        gap: '4px',
+        fontSize: '14px',
+        fontWeight: '700',
+        iconSize: 16,
+        radius: '5px',
+    },
 };
+const PILL_SIZE_CONFIG = {
+    sm: { ...SQUARE_SIZE_CONFIG.sm, radius: '999px' },
+    md: { ...SQUARE_SIZE_CONFIG.md, radius: '999px' },
+    lg: { ...SQUARE_SIZE_CONFIG.lg, radius: '999px' },
+};
+const TAG_CONFIG = Object.fromEntries(TAG_SHAPES.flatMap(shape => TAG_SIZES.flatMap(size => TAG_COLORS.map(color => {
+    const sizeConfig = shape === 'square' ? SQUARE_SIZE_CONFIG[size] : PILL_SIZE_CONFIG[size];
+    return [
+        `${shape}_${size}_${color}`,
+        {
+            shape,
+            size,
+            color,
+            ...sizeConfig,
+            ...TAG_COLOR_CONFIG[color],
+        },
+    ];
+}))));
+const isTagName = (value) => Object.prototype.hasOwnProperty.call(TAG_CONFIG, value);
+
+const sdTagCss = () => `sd-tag{display:inline-flex;width:fit-content;height:fit-content}.sd-tag{display:inline-flex;align-items:center;justify-content:center;gap:var(--sd-tag-gap, 5px);min-height:var(--sd-tag-height, 24px);padding:0 var(--sd-tag-padding-x, 8px);border-radius:var(--sd-tag-radius, 4px);background:var(--sd-tag-background, #f3f3f3);color:var(--sd-tag-content, #7a7a7a);box-sizing:border-box;white-space:nowrap;-webkit-user-select:none;user-select:none}.sd-tag__icon{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center}.sd-tag__label{display:inline-flex;align-items:center;justify-content:center;min-width:0;font-size:var(--sd-tag-font-size, 12px);font-weight:var(--sd-tag-font-weight, 700);line-height:1}`;
+
 const SdTag = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
     }
-    get el() { return getElement(this); }
-    size = 'md';
-    color = 'grey';
-    rounded = false;
+    name = 'square_md_grey';
     label = '';
-    bgColor;
-    textColor;
-    getTagClasses() {
-        const classes = ['sd-tag', `sd-tag--${this.size}`];
-        if (this.rounded) {
-            classes.push('sd-tag--rounded');
-        }
-        if (this.color && !this.bgColor && !this.textColor) {
-            classes.push(TAG_COLORS[this.color]);
-        }
-        if (this.bgColor || this.textColor) {
-            classes.push('sd-tag--custom-color');
+    icon;
+    isLeft = true;
+    get resolvedConfig() {
+        if (!isTagName(this.name)) {
+            throw new Error(`Invalid sd-tag name: ${this.name}`);
         }
-        return classes.join(' ');
+        return TAG_CONFIG[this.name];
     }
-    renderContent() {
-        return [
-            h("span", { class: "sd-tag__content" }, h("slot", null, this.label)),
-        ];
+    renderIcon(color, size) {
+        if (!this.icon)
+            return null;
+        return h("sd-icon", { class: "sd-tag__icon", name: this.icon, size: size, color: color });
     }
     render() {
-        const tagClasses = this.getTagClasses();
-        return (h("span", { key: '9745415753fe657bf5e7e5ca9eb6e02f8c953bfd', class: tagClasses, style: {
-                '--tag-bg-color': this.bgColor,
-                '--tag-text-color': this.textColor,
-            }, "aria-label": this.label || 'tag' }, this.renderContent()));
+        const config = this.resolvedConfig;
+        const iconNode = this.renderIcon(config.icon, config.iconSize);
+        return (h("span", { key: '5f9ee005b146997dd13bb3e6a06680ff8574bd14', class: "sd-tag", style: {
+                '--sd-tag-background': config.background,
+                '--sd-tag-content': config.content,
+                '--sd-tag-height': config.height,
+                '--sd-tag-padding-x': config.paddingX,
+                '--sd-tag-gap': config.gap,
+                '--sd-tag-font-size': config.fontSize,
+                '--sd-tag-font-weight': config.fontWeight,
+                '--sd-tag-radius': config.radius,
+            }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, h("span", { key: 'b123ab6ac015db640e4dc3edc5e2cf90ec5e0ecf', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
     }
 };
 SdTag.style = sdTagCss();

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-C_an1PQ3.js';
+import { r as registerInstance, c as createEvent, h } from './index-B8tGP77V.js';
 import { r as resolveColor } from './resolveColor-DUqcOPNn.js';
 
 const sdToastCss = () => `sd-toast{display:block;width:fit-content;height:fit-content}sd-toast .sd-toast{display:flex;width:fit-content;align-items:center;gap:16px;padding:12px 24px;border-radius:4px;background-color:var(--sd-toast-bg);color:var(--sd-toast-text);transition:opacity 0.2s ease, visibility 0.2s ease;box-shadow:2px 2px 8px 2px rgba(0, 0, 0, 0.2)}sd-toast .sd-toast--hidden{opacity:0;visibility:hidden;pointer-events:none}sd-toast .sd-toast__icon{display:flex;align-items:center;flex-shrink:0}sd-toast .sd-toast__content{display:flex;flex:1}sd-toast .sd-toast__message{font-size:14px;line-height:20px;font-weight:400}sd-toast .sd-toast__link{font-size:14px;line-height:20px;color:var(--sd-toast-text);text-decoration:underline;cursor:pointer;transition:opacity 0.2s ease;margin-left:4px}sd-toast .sd-toast__link:hover{opacity:0.8}sd-toast .sd-toast__button{flex-shrink:0}sd-toast .sd-toast__button button{color:var(--button-text-color, inherit) !important}sd-toast .sd-toast__close{display:flex;align-items:center;justify-content:center;padding:4px;background-color:transparent;border:none;cursor:pointer;transition:opacity 0.2s ease;flex-shrink:0}sd-toast .sd-toast__close:hover{opacity:0.7}sd-toast .sd-toast__close:active{opacity:0.5}`;
@@ -47,10 +47,10 @@ const SdToast = class {
             background: resolveColor(colorTokens.background),
             text: resolveColor(colorTokens.text),
         };
-        return (h("div", { key: '8118f67a55a3080ea91ffdfbd929bbe3464ab044', style: {
+        return (h("div", { key: '16579a21c0eec78e609b0cf82fcf2d040b8b3388', style: {
                 '--sd-toast-bg': colors.background,
                 '--sd-toast-text': colors.text,
-            } }, h("div", { key: 'f05c16b0c8ef6de2d62161f80591cb3a82c24434', class: this.getContainerClasses(), role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (h("div", { key: 'b16fee2031c4093c263229d2ef07ad8f6e69778b', class: "sd-toast__icon" }, h("sd-icon", { key: 'cd8b4c4d9cbc329fdfc99236ca56a49658c0ca8c', name: this.icon, size: 16, color: colors.text }))), h("div", { key: '888748872d886745ace2ef8491d7098528df8a46', class: "sd-toast__content" }, h("span", { key: '31b285a6b6a03b833577b4a9fb860fd76e066cb6', class: "sd-toast__message" }, this.message)), this.link && (h("a", { key: '61d1aacf70e7062abbedd2364474e7da990f485f', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (h("sd-button", { key: '94aa75ef25ee18f0577d5539337152d654dab5c1', class: `sd-toast__button ${this.type === 'basicLight' ? 'text-white' : ''}`, label: this.buttonLabel, variant: "primary", color: this.type === 'basicLight' ? 'oceanblue_75' : 'white', size: "sm", onSdClick: this.handleButtonClick, style: this.type !== 'basicLight' ? { '--button-text-color': resolveColor('grey_95') } : {} })), this.useClose && (h("button", { key: 'db0b83f7030feb5459597156c2d25f3437b91904', type: "button", class: "sd-toast__close", onClick: this.handleClose, "aria-label": "Close", title: "Close" }, h("sd-icon", { key: 'a3aab6c19c32043182f2d05d2583271520458493', name: "close", size: 12, color: colors.text }))))));
+            } }, h("div", { key: '108e47983e1ad99ed462a4fa00c29aa9e3393b8b', class: this.getContainerClasses(), role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (h("div", { key: 'd034c9aaafc272d51de96de6ccefe49208aba7e3', class: "sd-toast__icon" }, h("sd-icon", { key: '14b97c4cbe7134f67d919abcf4e10cf673dd909d', name: this.icon, size: 16, color: colors.text }))), h("div", { key: '1cecb89bdb19742a7df04625e8f070cd2c207b5e', class: "sd-toast__content" }, h("span", { key: '1daf2a2bea963b7b68c580b30c4c8fa2f3a26c8f', class: "sd-toast__message" }, this.message)), this.link && (h("a", { key: '8f7961c2c14806aa1323e378f57d74e47614772c', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (h("sd-button", { key: '89cba5e58ff368aea05130b799d903d4cf85b120', class: `sd-toast__button ${this.type === 'basicLight' ? 'text-white' : ''}`, label: this.buttonLabel, variant: "primary", color: this.type === 'basicLight' ? 'oceanblue_75' : 'white', size: "sm", onSdClick: this.handleButtonClick, style: this.type !== 'basicLight' ? { '--button-text-color': resolveColor('grey_95') } : {} })), this.useClose && (h("button", { key: '0e7fc0737824b61166cbff82a410948ca1745842', type: "button", class: "sd-toast__close", onClick: this.handleClose, "aria-label": "Close", title: "Close" }, h("sd-icon", { key: '82d203f6eb584cb04566e8f3b1bd7a86ca50bba4', name: "close", size: 12, color: colors.text }))))));
     }
 };
 SdToast.style = sdToastCss();

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-C_an1PQ3.js';
+import { r as registerInstance, c as createEvent, h } from './index-B8tGP77V.js';
 
 const sdToggleButtonCss = () => `sd-toggle-button{display:inline-block;line-height:0}.sd-toggle-button{display:inline-flex;align-items:center;justify-content:center;height:28px;padding:4px 12px;gap:6px;border-radius:14px;border:1px solid #888888;background-color:#FFFFFF;color:#737373;font-size:12px;line-height:20px;font-weight:400;cursor:pointer;transition:border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;white-space:nowrap;user-select:none;box-sizing:border-box}.sd-toggle-button--active{border-color:#0075FF;color:#0075FF}.sd-toggle-button--disabled{background-color:#EEEEEE;border-color:#CCCCCC;color:#888888;cursor:not-allowed}.sd-toggle-button--disabled.sd-toggle-button--active{background-color:#EEEEEE;border-color:#CCCCCC;color:#888888}.sd-toggle-button:hover:not(.sd-toggle-button--disabled):not(.sd-toggle-button--active){border-color:#737373}.sd-toggle-button:hover:not(.sd-toggle-button--disabled).sd-toggle-button--active{border-color:#005CC9;color:#005CC9}`;
 
@@ -39,7 +39,7 @@ const SdToggleButton = class {
         this.change.emit(newValue);
     };
     render() {
-        return (h("label", { key: '6f8d9e738490ef344ff26a4026b9de17af68041e', class: this.buttonClasses, "aria-label": this.label || 'toggle button' }, this.label, h("input", { key: '6d9d45c451301c4635e610fd70280be1fe65b316', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (h("label", { key: '174a62904591e559232574d207ff4ad9c0113ad8', class: this.buttonClasses, "aria-label": this.label || 'toggle button' }, this.label, h("input", { key: '7bbd96a0563a8cadcfb7ab9d8e1fb3767508d6bf', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
 };
 SdToggleButton.style = sdToggleButtonCss();

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-C_an1PQ3.js';
+import { r as registerInstance, c as createEvent, h } from './index-B8tGP77V.js';
 
 const sdToggleCss = () => `sd-toggle{display:inline-block;height:20px;line-height:0}sd-toggle .sd-toggle{cursor:pointer;display:inline-flex;align-items:center;gap:8px;height:20px}sd-toggle .sd-toggle>input{display:none}sd-toggle .sd-toggle__label{font-size:12px;color:#333333;line-height:20px}sd-toggle .sd-toggle__track{width:36px;height:20px;border-radius:12px;background:#CCCCCC;position:relative;transition:background-color 0.2s ease}sd-toggle .sd-toggle__thumb{width:16px;height:16px;border-radius:50%;background:white;position:absolute;top:2px;left:2px;transition:transform 0.2s ease}sd-toggle .sd-toggle--checked .sd-toggle__track{background:#0075FF}sd-toggle .sd-toggle--checked .sd-toggle__thumb{transform:translateX(16px)}sd-toggle .sd-toggle--disabled{cursor:not-allowed}sd-toggle .sd-toggle--disabled.sd-toggle--checked .sd-toggle__track{background:#BBDAFF}sd-toggle .sd-toggle--disabled.sd-toggle--unchecked .sd-toggle__track{background:#EEEEEE}sd-toggle .sd-toggle:hover:not(.sd-toggle--disabled).sd-toggle--checked .sd-toggle__track{background:#005CC9}sd-toggle .sd-toggle:hover:not(.sd-toggle--disabled).sd-toggle--unchecked .sd-toggle__track{background:#BBBBBB}`;
 
@@ -35,7 +35,7 @@ const SdToggle = class {
         this.change.emit(newValue);
     };
     render() {
-        return (h("label", { key: 'c0fcd12c231fdb995b5edae756157c58b352fd0f', "aria-label": this.label || 'toggle', class: this.toggleClasses }, h("input", { key: 'e50042ae04830f4c276d8140725ab62cc2d0490d', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), this.label && h("span", { key: '99f9506a2dcea8cfd85aabf6b71243c116a2bf11', class: "sd-toggle__label" }, this.label), h("div", { key: '424e1ae78d5684051bd7a2b3ba89f6760f773f1c', class: "sd-toggle__track" }, h("div", { key: '29aab89e58022ce22f026fb694bb9b1e4531d8cf', class: "sd-toggle__thumb" }))));
+        return (h("label", { key: '9a8a0221e093040e446bc193f682070aa1f95c6c', "aria-label": this.label || 'toggle', class: this.toggleClasses }, h("input", { key: '4a2e3c626bfa4e439676cc40df619bd284d0178a', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), this.label && h("span", { key: '1eecfd810c17610604d6cf93c6f664690f17ff6a', class: "sd-toggle__label" }, this.label), h("div", { key: '9f082e2f6036e338f2afb6fb719b4ff8d3a01d99', class: "sd-toggle__track" }, h("div", { key: '1d8b1bd11b05091a368c681ead7e79a0e453d510', class: "sd-toggle__thumb" }))));
     }
 };
 SdToggle.style = sdToggleCss();

package/dist/esm/select-keyboard-navigation-xxEHPVkL.js

@@ -0,0 +1,37 @@
+/* @ts-self-types="./index.d.ts" */
+let urlAlphabet =
+  'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict';
+let nanoid = (size = 21) => {
+  let id = '';
+  let i = size | 0;
+  while (i--) {
+    id += urlAlphabet[(Math.random() * 64) | 0];
+  }
+  return id
+};
+
+class SelectKeyboardNavigation {
+    isSearchable;
+    filteredOptions;
+    constructor(isSearchable, filteredOptions) {
+        this.isSearchable = isSearchable;
+        this.filteredOptions = filteredOptions;
+    }
+    getNavigationBounds() {
+        return {
+            minIndex: this.isSearchable ? -1 : 0,
+            maxIndex: this.filteredOptions.length - 1,
+        };
+    }
+    getNextIndex(currentIndex, direction) {
+        const { minIndex, maxIndex } = this.getNavigationBounds();
+        if (direction === 'ArrowUp') {
+            return currentIndex > minIndex ? currentIndex - 1 : maxIndex;
+        }
+        else {
+            return currentIndex < maxIndex ? currentIndex + 1 : minIndex;
+        }
+    }
+}
+
+export { SelectKeyboardNavigation as S, nanoid as n };

package/dist/esm/{tooltipArrow-BTp0AVR2.js → tooltipArrow-Pdc3NIc9.js}

@@ -1,4 +1,4 @@
-import { h } from './index-C_an1PQ3.js';
+import { h } from './index-B8tGP77V.js';
 
 const TooltipArrow = (props) => (h("svg", { width: "16", height: "12", viewBox: "0 0 16 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, h("path", { d: "M8.83205 10.7519C8.43623 11.3457 7.56377 11.3457 7.16795 10.7519L1.04907e-06 -1.39876e-06L16 0L8.83205 10.7519Z", fill: "currentColor" })));
 

package/dist/types/components/sd-button-v2/sd-button-v2.config.d.ts

@@ -0,0 +1,178 @@
+export type ButtonV2Size = 'xs' | 'sm' | 'md' | 'lg';
+export type ButtonV2Type = 'button' | 'submit' | 'reset';
+export declare const BUTTON_FOCUS_RING_COLOR = "#0075FF";
+export declare const BUTTON_CONFIG: {
+    readonly primary_xs: {
+        readonly variant: "primary";
+        readonly size: "xs";
+        readonly color: string;
+    };
+    readonly secondary_xs: {
+        readonly variant: "primary";
+        readonly size: "xs";
+        readonly color: string;
+    };
+    readonly primary_outline_xs: {
+        readonly variant: "outline";
+        readonly size: "xs";
+        readonly color: string;
+    };
+    readonly neutral_xs: {
+        readonly variant: "primary";
+        readonly size: "xs";
+        readonly color: string;
+    };
+    readonly neutral_outline_xs: {
+        readonly variant: "outline";
+        readonly size: "xs";
+        readonly color: string;
+    };
+    readonly danger_xs: {
+        readonly variant: "primary";
+        readonly size: "xs";
+        readonly color: string;
+    };
+    readonly danger_outline_xs: {
+        readonly variant: "outline";
+        readonly size: "xs";
+        readonly color: string;
+    };
+    readonly primary_sm: {
+        readonly variant: "primary";
+        readonly size: "sm";
+        readonly color: string;
+    };
+    readonly secondary_sm: {
+        readonly variant: "primary";
+        readonly size: "sm";
+        readonly color: string;
+    };
+    readonly primary_outline_sm: {
+        readonly variant: "outline";
+        readonly size: "sm";
+        readonly color: string;
+    };
+    readonly neutral_sm: {
+        readonly variant: "primary";
+        readonly size: "sm";
+        readonly color: string;
+    };
+    readonly neutral_outline_sm: {
+        readonly variant: "outline";
+        readonly size: "sm";
+        readonly color: string;
+    };
+    readonly danger_sm: {
+        readonly variant: "primary";
+        readonly size: "sm";
+        readonly color: string;
+    };
+    readonly danger_outline_sm: {
+        readonly variant: "outline";
+        readonly size: "sm";
+        readonly color: string;
+    };
+    readonly primary_md: {
+        readonly variant: "primary";
+        readonly size: "md";
+        readonly color: string;
+    };
+    readonly secondary_md: {
+        readonly variant: "primary";
+        readonly size: "md";
+        readonly color: string;
+    };
+    readonly primary_outline_md: {
+        readonly variant: "outline";
+        readonly size: "md";
+        readonly color: string;
+    };
+    readonly neutral_md: {
+        readonly variant: "primary";
+        readonly size: "md";
+        readonly color: string;
+    };
+    readonly neutral_outline_md: {
+        readonly variant: "outline";
+        readonly size: "md";
+        readonly color: string;
+    };
+    readonly danger_md: {
+        readonly variant: "primary";
+        readonly size: "md";
+        readonly color: string;
+    };
+    readonly danger_outline_md: {
+        readonly variant: "outline";
+        readonly size: "md";
+        readonly color: string;
+    };
+    readonly primary_lg: {
+        readonly variant: "primary";
+        readonly size: "lg";
+        readonly color: string;
+    };
+    readonly secondary_lg: {
+        readonly variant: "primary";
+        readonly size: "lg";
+        readonly color: string;
+    };
+    readonly primary_outline_lg: {
+        readonly variant: "outline";
+        readonly size: "lg";
+        readonly color: string;
+    };
+    readonly neutral_lg: {
+        readonly variant: "primary";
+        readonly size: "lg";
+        readonly color: string;
+    };
+    readonly neutral_outline_lg: {
+        readonly variant: "outline";
+        readonly size: "lg";
+        readonly color: string;
+    };
+    readonly danger_lg: {
+        readonly variant: "primary";
+        readonly size: "lg";
+        readonly color: string;
+    };
+    readonly danger_outline_lg: {
+        readonly variant: "outline";
+        readonly size: "lg";
+        readonly color: string;
+    };
+};
+export type ButtonV2Name = keyof typeof BUTTON_CONFIG;
+export declare const BUTTON_ICON_SIZES: Record<ButtonV2Size, number>;
+export declare const PRESET_HOVER_BACKGROUNDS: {
+    readonly primary: string;
+    readonly secondary: string;
+    readonly primary_outline: string;
+    readonly neutral: string;
+    readonly neutral_outline: string;
+    readonly danger: string;
+    readonly danger_outline: string;
+};
+export declare const PRESET_CONTENT_COLORS: {
+    readonly primary: string;
+    readonly secondary: string;
+    readonly primary_outline: string;
+    readonly neutral: string;
+    readonly neutral_outline: string;
+    readonly danger: string;
+    readonly danger_outline: string;
+};
+export declare const PRESET_BORDER_COLORS: {
+    readonly primary: "transparent";
+    readonly secondary: "transparent";
+    readonly primary_outline: string;
+    readonly neutral: "transparent";
+    readonly neutral_outline: string;
+    readonly danger: "transparent";
+    readonly danger_outline: string;
+};
+export type ButtonV2Preset = keyof typeof PRESET_CONTENT_COLORS;
+export declare const DISABLED_CONTENT: string;
+export declare const isButtonV2Name: (value: string) => value is ButtonV2Name;
+export declare const getPresetName: (value: ButtonV2Name) => ButtonV2Preset;

package/dist/types/components/sd-button-v2/sd-button-v2.d.ts

@@ -0,0 +1,18 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { type ButtonV2Name, type ButtonV2Type } from './sd-button-v2.config';
+export declare class SdButtonV2 {
+    name: ButtonV2Name;
+    label: string;
+    icon?: IconName;
+    ariaLabel: string;
+    disabled: boolean;
+    type: ButtonV2Type;
+    click: EventEmitter<MouseEvent>;
+    private hasWarnedMissingAriaLabel;
+    private handleClick;
+    private get resolvedConfig();
+    private getButtonClasses;
+    componentWillRender(): void;
+    private warnIfMissingAriaLabel;
+    render(): any;
+}

package/dist/types/components/sd-dropdown-button/sd-dropdown-button.config.d.ts

@@ -0,0 +1,55 @@
+import { type ButtonV2Name, type ButtonV2Preset } from '../sd-button-v2/sd-button-v2.config';
+export interface DropdownButtonItem {
+    value: string | number;
+    label: string;
+    icon?: IconName;
+    disabled?: boolean;
+}
+export type DropdownButtonValue = DropdownButtonItem['value'];
+export type DropdownButtonSize = 'xs' | 'sm' | 'md';
+type UnsupportedDropdownButtonName = 'neutral_xs' | 'neutral_sm' | 'neutral_md' | `${string}_lg`;
+export type DropdownButtonName = Exclude<ButtonV2Name, UnsupportedDropdownButtonName>;
+export type DropdownButtonPreset = ButtonV2Preset;
+export declare const DROPDOWN_BUTTON_CONFIG: Record<DropdownButtonName, {
+    variant: "primary" | "outline";
+    size: DropdownButtonSize;
+    color: string;
+}>;
+export declare const DROPDOWN_BUTTON_MIN_WIDTHS: Record<DropdownButtonSize, string>;
+export declare const PRESET_HOVER_BACKGROUNDS: {
+    readonly primary: string;
+    readonly secondary: string;
+    readonly primary_outline: string;
+    readonly neutral: string;
+    readonly neutral_outline: string;
+    readonly danger: string;
+    readonly danger_outline: string;
+};
+export declare const PRESET_CONTENT_COLORS: {
+    readonly primary: string;
+    readonly secondary: string;
+    readonly primary_outline: string;
+    readonly neutral: string;
+    readonly neutral_outline: string;
+    readonly danger: string;
+    readonly danger_outline: string;
+};
+export declare const PRESET_BORDER_COLORS: {
+    readonly primary: "transparent";
+    readonly secondary: "transparent";
+    readonly primary_outline: string;
+    readonly neutral: "transparent";
+    readonly neutral_outline: string;
+    readonly danger: "transparent";
+    readonly danger_outline: string;
+};
+export declare const PRESET_DIVIDER_COLORS: Record<DropdownButtonPreset, string>;
+export declare const PRESET_MENU_ITEM_COLORS: Record<DropdownButtonPreset, string>;
+export declare const PRESET_MENU_ITEM_ACTIVE_BACKGROUNDS: Record<DropdownButtonPreset, string>;
+export declare const PRESET_MENU_ITEM_ACTIVE_COLORS: Record<DropdownButtonPreset, string>;
+export declare const DROPDOWN_DISABLED_BACKGROUND: string;
+export declare const DROPDOWN_DISABLED_CONTENT: string;
+export declare const DROPDOWN_DISABLED_BORDER: string;
+export declare const isDropdownButtonName: (value: string) => value is DropdownButtonName;
+export declare const getDropdownButtonPreset: (value: DropdownButtonName) => DropdownButtonPreset;
+export {};

package/dist/types/components/sd-dropdown-button/sd-dropdown-button.d.ts

@@ -0,0 +1,34 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { BaseDropdownEvent } from '../../utils/base-dropdown-event';
+import { type DropdownButtonItem, type DropdownButtonName, type DropdownButtonValue } from './sd-dropdown-button.config';
+export declare class SdDropdownButton extends BaseDropdownEvent {
+    el: HTMLElement;
+    name: DropdownButtonName;
+    label: string;
+    items: DropdownButtonItem[];
+    disabled: boolean;
+    isOpen: boolean;
+    itemIndex: number;
+    private triggerRef?;
+    private menuRef?;
+    click: EventEmitter<DropdownButtonValue>;
+    dropDownShow: EventEmitter<{
+        isOpen: boolean;
+    }>;
+    handleOpenChange(isOpen: boolean): void;
+    componentWillLoad(): void;
+    disconnectedCallback(): void;
+    sdOpen(): Promise<void>;
+    sdClose(): Promise<void>;
+    closeDropdown: () => void;
+    protected handleDocumentClick(event: Event): void;
+    protected handleDocumentKeydown(event: KeyboardEvent): void;
+    private get resolvedConfig();
+    private getNextEnabledIndex;
+    private toggleDropdown;
+    private selectItem;
+    private getTriggerClasses;
+    private getMenuItemClasses;
+    private renderDropdown;
+    render(): any;
+}

package/dist/types/components/sd-portal/sd-portal.d.ts

@@ -11,17 +11,26 @@ export declare class SdPortal {
     private wrapper?;
     private rafId?;
     private isInsideClick;
+    private readonly handleObservedScroll;
     private resizeObserver?;
     private mutationObserver?;
+    private scrollParents;
+    private isObserved;
+    handleOpenChange(): void;
     componentDidLoad(): void;
     componentDidRender(): void;
     disconnectedCallback(): void;
     private resolveContainer;
     private createWrapper;
+    private ensureWrapper;
+    private syncPortalState;
     private moveSlotContent;
     updatePosition(): void;
     private observeParent;
     private unobserveParent;
+    private observeScrollParents;
+    private unobserveScrollParents;
+    private getScrollParents;
     handleMouseDown(e: MouseEvent): void;
     handleWindowClick(e: MouseEvent): void;
     render(): any;

package/dist/types/components/sd-tabs/sd-tabs.d.ts

@@ -16,6 +16,6 @@ export declare class SdTabs {
     private isTabSelected;
     private getTabClasses;
     private getContainerClasses;
-    private getBadgeColors;
+    private getBadgeName;
     render(): any;
 }

package/dist/types/components/sd-tag/sd-tag.config.d.ts

@@ -0,0 +1,23 @@
+export declare const TAG_SHAPES: readonly ["square", "pill"];
+export declare const TAG_SIZES: readonly ["sm", "md", "lg"];
+export declare const TAG_COLORS: readonly ["grey", "red", "orange", "yellow", "green", "blue", "darkblue", "indigo"];
+export type TagShape = (typeof TAG_SHAPES)[number];
+export type TagSize = (typeof TAG_SIZES)[number];
+export type TagColor = (typeof TAG_COLORS)[number];
+export type TagName = `${TagShape}_${TagSize}_${TagColor}`;
+export declare const TAG_CONFIG: Record<TagName, {
+    shape: TagShape;
+    size: TagSize;
+    color: TagColor;
+    background: string;
+    content: string;
+    icon: string;
+    height: string;
+    paddingX: string;
+    gap: string;
+    fontSize: string;
+    fontWeight: string;
+    iconSize: number;
+    radius: string;
+}>;
+export declare const isTagName: (value: string) => value is TagName;

package/dist/types/components/sd-tag/sd-tag.d.ts

@@ -1,14 +1,10 @@
-export type TagColor = 'grey' | 'red' | 'orange' | 'yellow' | 'green' | 'blue' | 'darkblue' | 'indigo';
-export type TagSize = 'sm' | 'md' | 'lg';
+import { type TagName } from './sd-tag.config';
 export declare class SdTag {
-    el: HTMLElement;
-    size: TagSize;
-    color: TagColor;
-    rounded: boolean;
+    name: TagName;
     label: string;
-    bgColor?: string;
-    textColor?: string;
-    private getTagClasses;
-    private renderContent;
+    icon?: IconName;
+    isLeft: boolean;
+    private get resolvedConfig();
+    private renderIcon;
     render(): any;
 }