@sellmate/design-system 1.0.21 → 1.0.23

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

@@ -1,54 +1,112 @@
 'use strict';
 
-var index = require('./index-D-PnW6jc.js');
+var index = require('./index-Qvv0fGgj.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) {
         index.registerInstance(this, hostRef);
     }
-    get el() { return index.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 [
-            index.h("span", { class: "sd-tag__content" }, index.h("slot", null, this.label)),
-        ];
+    renderIcon(color, size) {
+        if (!this.icon)
+            return null;
+        return index.h("sd-icon", { class: "sd-tag__icon", name: this.icon, size: size, color: color });
     }
     render() {
-        const tagClasses = this.getTagClasses();
-        return (index.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 (index.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, index.h("span", { key: 'b123ab6ac015db640e4dc3edc5e2cf90ec5e0ecf', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
     }
 };
 SdTag.style = sdTagCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-D-PnW6jc.js');
+var index = require('./index-Qvv0fGgj.js');
 var resolveColor = require('./resolveColor-4RlaGD62.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}`;
@@ -49,10 +49,10 @@ const SdToast = class {
             background: resolveColor.resolveColor(colorTokens.background),
             text: resolveColor.resolveColor(colorTokens.text),
         };
-        return (index.h("div", { key: '8118f67a55a3080ea91ffdfbd929bbe3464ab044', style: {
+        return (index.h("div", { key: '16579a21c0eec78e609b0cf82fcf2d040b8b3388', style: {
                 '--sd-toast-bg': colors.background,
                 '--sd-toast-text': colors.text,
-            } }, index.h("div", { key: 'f05c16b0c8ef6de2d62161f80591cb3a82c24434', class: this.getContainerClasses(), role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: 'b16fee2031c4093c263229d2ef07ad8f6e69778b', class: "sd-toast__icon" }, index.h("sd-icon", { key: 'cd8b4c4d9cbc329fdfc99236ca56a49658c0ca8c', name: this.icon, size: 16, color: colors.text }))), index.h("div", { key: '888748872d886745ace2ef8491d7098528df8a46', class: "sd-toast__content" }, index.h("span", { key: '31b285a6b6a03b833577b4a9fb860fd76e066cb6', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: '61d1aacf70e7062abbedd2364474e7da990f485f', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (index.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.resolveColor('grey_95') } : {} })), this.useClose && (index.h("button", { key: 'db0b83f7030feb5459597156c2d25f3437b91904', type: "button", class: "sd-toast__close", onClick: this.handleClose, "aria-label": "Close", title: "Close" }, index.h("sd-icon", { key: 'a3aab6c19c32043182f2d05d2583271520458493', name: "close", size: 12, color: colors.text }))))));
+            } }, index.h("div", { key: '108e47983e1ad99ed462a4fa00c29aa9e3393b8b', class: this.getContainerClasses(), role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: 'd034c9aaafc272d51de96de6ccefe49208aba7e3', class: "sd-toast__icon" }, index.h("sd-icon", { key: '14b97c4cbe7134f67d919abcf4e10cf673dd909d', name: this.icon, size: 16, color: colors.text }))), index.h("div", { key: '1cecb89bdb19742a7df04625e8f070cd2c207b5e', class: "sd-toast__content" }, index.h("span", { key: '1daf2a2bea963b7b68c580b30c4c8fa2f3a26c8f', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: '8f7961c2c14806aa1323e378f57d74e47614772c', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.buttonLabel && (index.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.resolveColor('grey_95') } : {} })), this.useClose && (index.h("button", { key: '0e7fc0737824b61166cbff82a410948ca1745842', type: "button", class: "sd-toast__close", onClick: this.handleClose, "aria-label": "Close", title: "Close" }, index.h("sd-icon", { key: '82d203f6eb584cb04566e8f3b1bd7a86ca50bba4', name: "close", size: 12, color: colors.text }))))));
     }
 };
 SdToast.style = sdToastCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-D-PnW6jc.js');
+var index = require('./index-Qvv0fGgj.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}`;
 
@@ -41,7 +41,7 @@ const SdToggleButton = class {
         this.change.emit(newValue);
     };
     render() {
-        return (index.h("label", { key: '6f8d9e738490ef344ff26a4026b9de17af68041e', class: this.buttonClasses, "aria-label": this.label || 'toggle button' }, this.label, index.h("input", { key: '6d9d45c451301c4635e610fd70280be1fe65b316', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (index.h("label", { key: '174a62904591e559232574d207ff4ad9c0113ad8', class: this.buttonClasses, "aria-label": this.label || 'toggle button' }, this.label, index.h("input", { key: '7bbd96a0563a8cadcfb7ab9d8e1fb3767508d6bf', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
 };
 SdToggleButton.style = sdToggleButtonCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-D-PnW6jc.js');
+var index = require('./index-Qvv0fGgj.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}`;
 
@@ -37,7 +37,7 @@ const SdToggle = class {
         this.change.emit(newValue);
     };
     render() {
-        return (index.h("label", { key: 'c0fcd12c231fdb995b5edae756157c58b352fd0f', "aria-label": this.label || 'toggle', class: this.toggleClasses }, index.h("input", { key: 'e50042ae04830f4c276d8140725ab62cc2d0490d', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), this.label && index.h("span", { key: '99f9506a2dcea8cfd85aabf6b71243c116a2bf11', class: "sd-toggle__label" }, this.label), index.h("div", { key: '424e1ae78d5684051bd7a2b3ba89f6760f773f1c', class: "sd-toggle__track" }, index.h("div", { key: '29aab89e58022ce22f026fb694bb9b1e4531d8cf', class: "sd-toggle__thumb" }))));
+        return (index.h("label", { key: '9a8a0221e093040e446bc193f682070aa1f95c6c', "aria-label": this.label || 'toggle', class: this.toggleClasses }, index.h("input", { key: '4a2e3c626bfa4e439676cc40df619bd284d0178a', type: "checkbox", checked: this.value, disabled: this.disabled, onInput: this.handleChange }), this.label && index.h("span", { key: '1eecfd810c17610604d6cf93c6f664690f17ff6a', class: "sd-toggle__label" }, this.label), index.h("div", { key: '9f082e2f6036e338f2afb6fb719b4ff8d3a01d99', class: "sd-toggle__track" }, index.h("div", { key: '1d8b1bd11b05091a368c681ead7e79a0e453d510', class: "sd-toggle__thumb" }))));
     }
 };
 SdToggle.style = sdToggleCss();

package/dist/cjs/select-keyboard-navigation-s2wP37xZ.js

@@ -0,0 +1,40 @@
+'use strict';
+
+/* @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;
+        }
+    }
+}
+
+exports.SelectKeyboardNavigation = SelectKeyboardNavigation;
+exports.nanoid = nanoid;

package/dist/cjs/{tooltipArrow-CMyNLSC-.js → tooltipArrow-Mb2Dhc7T.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-D-PnW6jc.js');
+var index = require('./index-Qvv0fGgj.js');
 
 const TooltipArrow = (props) => (index.h("svg", { width: "16", height: "12", viewBox: "0 0 16 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, index.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/collection/collection-manifest.json

@@ -13,12 +13,14 @@
     "components/sd-select-multiple-group/sd-select-multiple-group.js",
     "components/sd-table/sd-table.js",
     "components/sd-tabs/sd-tabs.js",
-    "components/sd-tag/sd-tag.js",
     "components/sd-toast/sd-toast.js",
     "components/sd-badge/sd-badge.js",
+    "components/sd-button-v2/sd-button-v2.js",
     "components/sd-card/sd-card.js",
     "components/sd-date-picker/sd-date-picker.js",
     "components/sd-date-range-picker/sd-date-range-picker.js",
+    "components/sd-portal/sd-portal.js",
+    "components/sd-dropdown-button/sd-dropdown-button.js",
     "components/sd-field/sd-field.js",
     "components/sd-file-picker/sd-file-picker.js",
     "components/sd-floating-portal/sd-floating-portal.js",
@@ -29,13 +31,13 @@
     "components/sd-number-input/sd-number-input.js",
     "components/sd-pagination/sd-pagination.js",
     "components/sd-popover/sd-popover.js",
-    "components/sd-portal/sd-portal.js",
     "components/sd-progress/sd-progress.js",
     "components/sd-select/sd-select-dropdown/sd-select-dropdown.js",
     "components/sd-select/sd-select-option/sd-select-option.js",
     "components/sd-select/sd-select-search-input/sd-select-search-input.js",
     "components/sd-select-multiple/sd-select-multiple.js",
     "components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.js",
+    "components/sd-tag/sd-tag.js",
     "components/sd-textarea/sd-textarea.js",
     "components/sd-toggle/sd-toggle.js",
     "components/sd-toggle-button/sd-toggle-button.js"

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

@@ -6,7 +6,7 @@ export class SdBadge {
     label = '';
     render() {
         const resolvedColor = resolveColor(this.color);
-        return (h("div", { key: 'eeb4866526fa9e628da7182d6caca317015d6452', class: `sd-badge sd-badge--${this.size}`, style: { '--sd-badge-color': resolvedColor } }, h("div", { key: 'b14add6e76ab27eba5883c641e0ffa840e170ba2', class: "sd-badge__dot" }), h("div", { key: 'a53d4d487a6c97f87189c555f0a95640186fdf93', class: "sd-badge__label" }, this.label)));
+        return (h("div", { key: 'a83ffeb7171c32bafc3312d95c9fed576d676a0d', class: `sd-badge sd-badge--${this.size}`, style: { '--sd-badge-color': resolvedColor } }, h("div", { key: 'b6d84b2391d0e03edcab957b4edf73c765c04c35', class: "sd-badge__dot" }), h("div", { key: 'f06b5639135d87d7346b46c90a28ddeb40b05c9f', class: "sd-badge__label" }, this.label)));
     }
     static get is() { return "sd-badge"; }
     static get originalStyleUrls() {

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

@@ -0,0 +1,190 @@
+import buttonTokens from "../../tokens/generated/component.button.json";
+export const BUTTON_FOCUS_RING_COLOR = '#0075FF';
+const PRESET_DEFAULT_COLORS = {
+    primary: buttonTokens.brand.strong.bg.default,
+    secondary: buttonTokens.brand.subtle.bg.default,
+    primary_outline: buttonTokens.brand.outline.bg.default,
+    neutral: buttonTokens.neutral.subtle.bg.default,
+    neutral_outline: buttonTokens.neutral.outline.bg.default,
+    danger: buttonTokens.danger.strong.bg.default,
+    danger_outline: buttonTokens.danger.outline.bg.default,
+};
+export const BUTTON_CONFIG = {
+    primary_xs: {
+        variant: 'primary',
+        size: 'xs',
+        color: PRESET_DEFAULT_COLORS.primary,
+    },
+    secondary_xs: {
+        variant: 'primary',
+        size: 'xs',
+        color: PRESET_DEFAULT_COLORS.secondary,
+    },
+    primary_outline_xs: {
+        variant: 'outline',
+        size: 'xs',
+        color: PRESET_DEFAULT_COLORS.primary_outline,
+    },
+    neutral_xs: {
+        variant: 'primary',
+        size: 'xs',
+        color: PRESET_DEFAULT_COLORS.neutral,
+    },
+    neutral_outline_xs: {
+        variant: 'outline',
+        size: 'xs',
+        color: PRESET_DEFAULT_COLORS.neutral_outline,
+    },
+    danger_xs: {
+        variant: 'primary',
+        size: 'xs',
+        color: PRESET_DEFAULT_COLORS.danger,
+    },
+    danger_outline_xs: {
+        variant: 'outline',
+        size: 'xs',
+        color: PRESET_DEFAULT_COLORS.danger_outline,
+    },
+    primary_sm: {
+        variant: 'primary',
+        size: 'sm',
+        color: PRESET_DEFAULT_COLORS.primary,
+    },
+    secondary_sm: {
+        variant: 'primary',
+        size: 'sm',
+        color: PRESET_DEFAULT_COLORS.secondary,
+    },
+    primary_outline_sm: {
+        variant: 'outline',
+        size: 'sm',
+        color: PRESET_DEFAULT_COLORS.primary_outline,
+    },
+    neutral_sm: {
+        variant: 'primary',
+        size: 'sm',
+        color: PRESET_DEFAULT_COLORS.neutral,
+    },
+    neutral_outline_sm: {
+        variant: 'outline',
+        size: 'sm',
+        color: PRESET_DEFAULT_COLORS.neutral_outline,
+    },
+    danger_sm: {
+        variant: 'primary',
+        size: 'sm',
+        color: PRESET_DEFAULT_COLORS.danger,
+    },
+    danger_outline_sm: {
+        variant: 'outline',
+        size: 'sm',
+        color: PRESET_DEFAULT_COLORS.danger_outline,
+    },
+    primary_md: {
+        variant: 'primary',
+        size: 'md',
+        color: PRESET_DEFAULT_COLORS.primary,
+    },
+    secondary_md: {
+        variant: 'primary',
+        size: 'md',
+        color: PRESET_DEFAULT_COLORS.secondary,
+    },
+    primary_outline_md: {
+        variant: 'outline',
+        size: 'md',
+        color: PRESET_DEFAULT_COLORS.primary_outline,
+    },
+    neutral_md: {
+        variant: 'primary',
+        size: 'md',
+        color: PRESET_DEFAULT_COLORS.neutral,
+    },
+    neutral_outline_md: {
+        variant: 'outline',
+        size: 'md',
+        color: PRESET_DEFAULT_COLORS.neutral_outline,
+    },
+    danger_md: {
+        variant: 'primary',
+        size: 'md',
+        color: PRESET_DEFAULT_COLORS.danger,
+    },
+    danger_outline_md: {
+        variant: 'outline',
+        size: 'md',
+        color: PRESET_DEFAULT_COLORS.danger_outline,
+    },
+    primary_lg: {
+        variant: 'primary',
+        size: 'lg',
+        color: PRESET_DEFAULT_COLORS.primary,
+    },
+    secondary_lg: {
+        variant: 'primary',
+        size: 'lg',
+        color: PRESET_DEFAULT_COLORS.secondary,
+    },
+    primary_outline_lg: {
+        variant: 'outline',
+        size: 'lg',
+        color: PRESET_DEFAULT_COLORS.primary_outline,
+    },
+    neutral_lg: {
+        variant: 'primary',
+        size: 'lg',
+        color: PRESET_DEFAULT_COLORS.neutral,
+    },
+    neutral_outline_lg: {
+        variant: 'outline',
+        size: 'lg',
+        color: PRESET_DEFAULT_COLORS.neutral_outline,
+    },
+    danger_lg: {
+        variant: 'primary',
+        size: 'lg',
+        color: PRESET_DEFAULT_COLORS.danger,
+    },
+    danger_outline_lg: {
+        variant: 'outline',
+        size: 'lg',
+        color: PRESET_DEFAULT_COLORS.danger_outline,
+    },
+};
+export const BUTTON_ICON_SIZES = {
+    xs: Number(buttonTokens.size.xs.icon),
+    sm: Number(buttonTokens.size.sm.icon),
+    md: Number(buttonTokens.size.md.icon),
+    lg: Number(buttonTokens.size.lg.icon),
+};
+export const PRESET_HOVER_BACKGROUNDS = {
+    primary: buttonTokens.brand.strong.bg.hover,
+    secondary: buttonTokens.brand.subtle.bg.hover,
+    primary_outline: buttonTokens.brand.outline.bg.hover,
+    neutral: buttonTokens.neutral.subtle.bg.hover,
+    neutral_outline: buttonTokens.neutral.outline.bg.hover,
+    danger: buttonTokens.danger.strong.bg.hover,
+    danger_outline: buttonTokens.danger.outline.bg.hover,
+};
+export const PRESET_CONTENT_COLORS = {
+    primary: buttonTokens.brand.strong.content,
+    secondary: buttonTokens.brand.subtle.content,
+    primary_outline: buttonTokens.brand.outline.content,
+    neutral: buttonTokens.neutral.subtle.content,
+    neutral_outline: buttonTokens.neutral.outline.content,
+    danger: buttonTokens.danger.strong.content,
+    danger_outline: buttonTokens.danger.outline.content,
+};
+export const PRESET_BORDER_COLORS = {
+    primary: 'transparent',
+    secondary: 'transparent',
+    primary_outline: buttonTokens.brand.outline.border,
+    neutral: 'transparent',
+    neutral_outline: buttonTokens.neutral.outline.border,
+    danger: 'transparent',
+    danger_outline: buttonTokens.danger.outline.border,
+};
+export const DISABLED_CONTENT = buttonTokens.content.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

@@ -0,0 +1,120 @@
+sd-button-v2 {
+  display: inline-flex;
+  width: fit-content;
+  height: fit-content;
+}
+
+.sd-button-v2 {
+  --sd-button-v2-height: 34px;
+  --sd-button-v2-padding-x: 20px;
+  --sd-button-v2-gap: 8px;
+  --sd-button-v2-font-family: inherit;
+  --sd-button-v2-font-size: 16px;
+  --sd-button-v2-font-weight: 500;
+  --sd-button-v2-text-decoration: none;
+  --sd-button-v2-label-min-width: auto;
+  --sd-button-v2-icon-only-size: var(--sd-button-v2-height);
+  --sd-button-v2-bg: #025497;
+  --sd-button-v2-bg-hover: #004177;
+  --sd-button-v2-border: transparent;
+  --sd-button-v2-content: #ffffff;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: var(--sd-button-v2-height);
+  min-width: var(--sd-button-v2-min-width, auto);
+  padding: 0 var(--sd-button-v2-padding-x);
+  border: var(--sd-button-border-width-default, 1px) solid var(--sd-button-v2-border);
+  border-radius: var(--sd-button-radius-default, 4px);
+  background: var(--sd-button-v2-bg);
+  color: var(--sd-button-v2-content);
+  cursor: pointer;
+  box-sizing: border-box;
+  font-family: var(--sd-button-v2-font-family);
+  font-size: var(--sd-button-v2-font-size);
+  font-weight: var(--sd-button-v2-font-weight);
+  line-height: 1;
+  text-decoration: var(--sd-button-v2-text-decoration);
+  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
+  white-space: nowrap;
+  -webkit-user-select: none;
+  user-select: none;
+}
+.sd-button-v2:hover:not(.sd-button-v2--disabled) {
+  background: var(--sd-button-v2-bg-hover);
+}
+.sd-button-v2:focus-visible {
+  outline: 0;
+  box-shadow: 0 0 0 2px var(--sd-button-v2-accent);
+}
+.sd-button-v2--xs {
+  --sd-button-v2-height: var(--sd-button-xs-height, 24px);
+  --sd-button-v2-padding-x: var(--sd-button-xs-padding-x, 8px);
+  --sd-button-v2-gap: var(--sd-button-xs-gap, 4px);
+  --sd-button-v2-font-family: var(--sd-button-xs-typography-font-family, inherit);
+  --sd-button-v2-font-size: var(--sd-button-xs-typography-font-size, 12px);
+  --sd-button-v2-font-weight: var(--sd-button-xs-typography-font-weight, 500);
+  --sd-button-v2-text-decoration: var(--sd-button-xs-typography-text-decoration, none);
+  --sd-button-v2-label-min-width: var(--sd-button-label-xs-min-width, auto);
+  --sd-button-v2-icon-only-size: var(--sd-button-icon-only-xs-width, var(--sd-button-v2-height));
+}
+.sd-button-v2--sm {
+  --sd-button-v2-height: var(--sd-button-sm-height, 28px);
+  --sd-button-v2-padding-x: var(--sd-button-sm-padding-x, 12px);
+  --sd-button-v2-gap: var(--sd-button-sm-gap, 6px);
+  --sd-button-v2-font-family: var(--sd-button-sm-typography-font-family, inherit);
+  --sd-button-v2-font-size: var(--sd-button-sm-typography-font-size, 12px);
+  --sd-button-v2-font-weight: var(--sd-button-sm-typography-font-weight, 500);
+  --sd-button-v2-text-decoration: var(--sd-button-sm-typography-text-decoration, none);
+  --sd-button-v2-label-min-width: var(--sd-button-label-sm-min-width, auto);
+  --sd-button-v2-icon-only-size: var(--sd-button-icon-only-sm-width, var(--sd-button-v2-height));
+}
+.sd-button-v2--md {
+  --sd-button-v2-height: var(--sd-button-md-height, 34px);
+  --sd-button-v2-padding-x: var(--sd-button-md-padding-x, 20px);
+  --sd-button-v2-gap: var(--sd-button-md-gap, 8px);
+  --sd-button-v2-font-family: var(--sd-button-md-typography-font-family, inherit);
+  --sd-button-v2-font-size: var(--sd-button-md-typography-font-size, 16px);
+  --sd-button-v2-font-weight: var(--sd-button-md-typography-font-weight, 500);
+  --sd-button-v2-text-decoration: var(--sd-button-md-typography-text-decoration, none);
+  --sd-button-v2-label-min-width: var(--sd-button-label-md-min-width, auto);
+  --sd-button-v2-icon-only-size: var(--sd-button-icon-only-md-width, var(--sd-button-v2-height));
+}
+.sd-button-v2--lg {
+  --sd-button-v2-height: var(--sd-button-lg-height, 62px);
+  --sd-button-v2-padding-x: var(--sd-button-lg-padding-x, 28px);
+  --sd-button-v2-gap: var(--sd-button-lg-gap, 12px);
+  --sd-button-v2-font-family: var(--sd-button-lg-typography-font-family, inherit);
+  --sd-button-v2-font-size: var(--sd-button-lg-typography-font-size, 18px);
+  --sd-button-v2-font-weight: var(--sd-button-lg-typography-font-weight, 500);
+  --sd-button-v2-text-decoration: var(--sd-button-lg-typography-text-decoration, none);
+  --sd-button-v2-label-min-width: var(--sd-button-label-lg-min-width, auto);
+  --sd-button-v2-icon-only-size: var(--sd-button-icon-only-lg-width, var(--sd-button-v2-height));
+}
+.sd-button-v2--has-label {
+  --sd-button-v2-min-width: var(--sd-button-v2-label-min-width, auto);
+}
+.sd-button-v2--icon-only {
+  width: var(--sd-button-v2-icon-only-size, var(--sd-button-v2-height));
+  min-width: var(--sd-button-v2-icon-only-size, var(--sd-button-v2-height));
+  height: var(--sd-button-v2-icon-only-size, var(--sd-button-v2-height));
+  padding: 0;
+}
+.sd-button-v2--icon-only .sd-button-v2__content {
+  gap: 0;
+}
+.sd-button-v2--disabled {
+  border-color: var(--sd-button-border-disabled, #CCCCCC);
+  background: var(--sd-button-bg-disabled, #E1E1E1);
+  color: var(--sd-button-content-disabled, #888888);
+  cursor: not-allowed;
+}
+.sd-button-v2 .sd-button-v2__content {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--sd-button-v2-gap);
+}
+.sd-button-v2 .sd-button-v2__label {
+  font: inherit;
+}