@sellmate/design-system 1.0.67 → 1.0.69

package/dist/collection/components/sd-date-range-picker/sd-date-range-picker-calendar/sd-date-range-picker-calendar.js

@@ -239,7 +239,7 @@ export class SdDateRangePickerCalendar {
             '--range-panel-gap': `${RANGE_LAYOUT.panelGap}px`,
             '--range-divider': RANGE_LAYOUT.divider,
         };
-        return (h(Fragment, { key: '99b9de5fce7e4d039b40ed95b3451c28e7799dc8' }, h("div", { key: 'b55374e977f79e6dd7cd5d4af9df30bf41e40fba', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), h("div", { key: '6bd94cde83d82efc270148434dfb6410dc5f9634', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), h("span", { key: '9e179166ebad4cf295e831ef2e63fc9677f65b82', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
+        return (h(Fragment, { key: '595c17bc338f96117d87c5ac3c2b26895b9e5283' }, h("div", { key: '39ce76545cc612422ab5024a2838fbc9faabb9a8', class: "sd-date-range-picker-calendar", style: cssVars }, this.renderYearNav(), h("div", { key: '21764e31a3fbcfa8de22d1f243f5739fc02c38fd', class: "sd-date-range-picker-calendar__panels" }, this.renderPanel(this.currentYear, this.currentMonth, true), h("span", { key: '402ea75f3bf8b58d30c34238285eef7099118e28', class: "sd-date-range-picker-calendar__divider", "aria-hidden": "true" }), this.renderPanel(this.rightYear, this.rightMonth, false)))));
     }
     static get is() { return "sd-date-range-picker-calendar"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-date-range-picker/sd-date-range-picker.js

@@ -15,6 +15,7 @@ export class SdDateRangePicker {
     label = '';
     labelWidth = '';
     addonLabel = '';
+    addonAlign = 'start';
     hint = '';
     errorMessage = '';
     fieldName = '';
@@ -98,9 +99,9 @@ export class SdDateRangePicker {
             '--sd-system-color-field-border-focus': DATEPICKER_COLORS.border.focus,
             '--sd-system-color-field-bg-default': DATEPICKER_COLORS.bg.default,
         };
-        return (h("sd-field", { key: '95ec666c91635d6b6b749d660b4495b7ebe48e6a', name: this.fieldName || this.internalName, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: '3051fda66e94d51208347ae2053173570d5f1ca9', class: "sd-date-range-picker", ref: el => {
+        return (h("sd-field", { key: '34c4d9ef2ba50f951fc6b6b09215e750ac61cd87', name: this.fieldName || this.internalName, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, size: this.size, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: 'c92ab61d144c893077a9c81922ac24eff93314dd', class: "sd-date-range-picker", ref: el => {
                 this.triggerRef = el;
-            } }, h("sd-date-picker-trigger", { key: '71693b5a4cec562169d9427a4e19aed4d8b19a45', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: '75b9f1c1ebdabcd1c1a33cad51189ba132274bb1', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-date-range-picker-calendar", { key: 'f158eead4f44bc452bf102b3324721df84fc3b0c', value: this.value, selectable: this.selectable, maxRange: this.maxRange, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
+            } }, h("sd-date-picker-trigger", { key: '487b8a1af6e8dee063d70ffc030c314037741d74', displayText: this.displayText, placeholder: this.placeholder, disabled: this.disabled, size: this.size, onSdTriggerClick: this.handleTriggerClick })), (this.isOpen || this.isAnimatingOut) && (h("sd-portal", { key: 'f22c979943cebcc82e8d4d9f86037621e8c3983a', open: this.isOpen, parentRef: this.triggerRef, onSdClose: () => this.closeDropdown() }, h("sd-date-range-picker-calendar", { key: 'c19548d0074556f90c740b6ba35338ea4d41dd18', value: this.value, selectable: this.selectable, maxRange: this.maxRange, onSdSelect: this.handleSelect, onSdViewChange: this.handleViewChange })))));
     }
     static get is() { return "sd-date-range-picker"; }
     static get originalStyleUrls() {
@@ -322,6 +323,33 @@ export class SdDateRangePicker {
                 "attribute": "addon-label",
                 "defaultValue": "''"
             },
+            "addonAlign": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "FieldAddonAlign",
+                    "resolved": "\"center\" | \"end\" | \"start\"",
+                    "references": {
+                        "FieldAddonAlign": {
+                            "location": "import",
+                            "path": "../sd-field/sd-field.config",
+                            "id": "src/components/sd-field/sd-field.config.ts::FieldAddonAlign",
+                            "referenceLocation": "FieldAddonAlign"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "addon-align",
+                "defaultValue": "'start'"
+            },
             "hint": {
                 "type": "string",
                 "mutable": false,

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

@@ -186,7 +186,7 @@ export class SdDropdownButton extends BaseDropdownEvent {
     }
     render() {
         const { config, preset } = this.resolvedConfig;
-        return (h("div", { key: '1a6fa00329392de05526a50de55dcd620a43a2db', class: "sd-dropdown-button" }, h("button", { key: 'd73139863c8decca29079a8111e26ea5a2d21614', type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen), disabled: this.disabled, "aria-haspopup": "menu", "aria-expanded": String(this.isOpen), onClick: this.toggleDropdown, ref: el => (this.triggerRef = el), style: {
+        return (h("div", { key: '5493b94262ecdd20a5fbb7ad2993dd473b1ae9e3', class: "sd-dropdown-button" }, h("button", { key: 'a64187dec0d84dce3532f8b3d7112ed6d6ae8e0d', type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen), disabled: this.disabled, "aria-haspopup": "menu", "aria-expanded": String(this.isOpen), onClick: this.toggleDropdown, ref: el => (this.triggerRef = el), style: {
                 '--sd-dropdown-button-bg': config.color,
                 '--sd-dropdown-button-bg-hover': PRESET_HOVER_BACKGROUNDS[preset],
                 '--sd-dropdown-button-border': PRESET_BORDER_COLORS[preset],
@@ -196,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: '52e30c7d5f55b2ed974944b23880a42fdf941e31', class: "sd-dropdown-button__trigger-label" }, this.label), h("span", { key: '8d693a472783e552613b0c0503b85dc9b5ce0343', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), h("span", { key: 'e9f0fc3980400150c8808e569904bee6c4629dc7', class: {
+            } }, h("span", { key: '71ed27650dcb1beb1cfa4864a6449ab190f04829', class: "sd-dropdown-button__trigger-label" }, this.label), h("span", { key: '6c34575c0587fb288165cf0e15db52ed6b3f50db', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), h("span", { key: '0544b9d36657a80b5f51b9c1849d55ab7a7dbdc2', class: {
                 'sd-dropdown-button__trigger-icon': true,
                 'sd-dropdown-button__trigger-icon--open': this.isOpen,
-            }, "aria-hidden": "true" }, h("sd-icon", { key: '13fda88989885a9096ed6ecf211b3aadad3f128a', name: "chevronDown", size: DROPDOWN_CHEVRON_ICON_SIZE[config.size], color: "var(--sd-dropdown-button-current-content)" }))), this.renderDropdown(preset)));
+            }, "aria-hidden": "true" }, h("sd-icon", { key: 'cd73a4dffbe1fc31c76fea221cd080b455bb3131', name: "chevronDown", size: DROPDOWN_CHEVRON_ICON_SIZE[config.size], color: "var(--sd-dropdown-button-current-content)" }))), this.renderDropdown(preset)));
     }
     static get is() { return "sd-dropdown-button"; }
     static get originalStyleUrls() {

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

@@ -1,4 +1,9 @@
 import fieldTokens from "../../tokens/generated/component.field.json";
+export const FIELD_ADDON_ALIGN_MAP = {
+    start: 'flex-start',
+    center: 'center',
+    end: 'flex-end',
+};
 const sm = fieldTokens.field.label.sm;
 const md = fieldTokens.field.label.md;
 export const FIELD_LABEL_SIZE_MAP = {

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

@@ -56,7 +56,11 @@ sd-field .sd-field--has-addon .sd-field__control .sd-field__addon {
   display: flex;
   gap: var(--sd-field-addon-gap);
   align-items: center;
+  justify-content: var(--sd-field-addon-justify, flex-start);
   white-space: nowrap;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  width: var(--sd-field-addon-width, auto);
   padding: 0 var(--sd-field-addon-padding-x);
   font-size: var(--sd-field-addon-font-size);
   line-height: var(--sd-field-addon-line-height);

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

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 import fieldTokens from "../../tokens/generated/component.field.json";
-import { FIELD_LABEL_SIZE_MAP } from "./sd-field.config";
+import { FIELD_ADDON_ALIGN_MAP, FIELD_LABEL_SIZE_MAP, } from "./sd-field.config";
 const FORM_PARENT_TAGS = [
     'sd-select',
     'sd-select-multiple',
@@ -31,6 +31,7 @@ export class SdField {
     label = '';
     labelWidth = '';
     addonLabel = '';
+    addonAlign = 'start';
     icon = undefined;
     labelTooltip = '';
     labelTooltipProps = null;
@@ -161,22 +162,28 @@ export class SdField {
                     : addonTokens.border.default,
                 '--sd-field-addon-gap': `${addonTokens.gap}px`,
                 '--sd-field-addon-border-width': `${addonTokens.border.width}px`,
+                '--sd-field-addon-justify': FIELD_ADDON_ALIGN_MAP[this.addonAlign] ?? FIELD_ADDON_ALIGN_MAP.start,
+                ...(this.labelWidth
+                    ? {
+                        '--sd-field-addon-width': typeof this.labelWidth === 'number' ? `${this.labelWidth}px` : this.labelWidth,
+                    }
+                    : {}),
             }
             : {};
-        return (h("div", { key: 'f12b2e13ac8152d1e688f903a60a8fa670e99065', class: {
+        return (h("div", { key: '967c6e44e514001350f0ca7eedf97e12ec8bac89', class: {
                 'sd-field': true,
                 'sd-field--has-label': !!this.label,
                 'sd-field--has-addon': !!addon,
                 [this.fieldStatus]: !!this.fieldStatus,
-            }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars } }, h("div", { key: '79f7a40b5e1ee95bb9075b0855e22261cd8adc6a', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: '54b5bbfbe18df48c40cc30ec3d6761ccd8e446cc', class: "sd-field__main", style: this.width
+            }, style: { ...sizeCssVars, ...labelCssVars, ...addonCssVars } }, h("div", { key: '238c06bb4ea963c5e7b1ee31dfc7f4b7f4b88af1', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: '2144211ec7096b3a36dab1bd494b633604fe942b', class: "sd-field__main", style: this.width
                 ? {
                     width: typeof this.width === 'number' ? `${this.width}px` : this.width,
                     flex: 'none',
                 }
-                : {} }, h("div", { key: '39542908287175ade4d6e0f1acd2cb1f03c9e2a1', class: {
+                : {} }, h("div", { key: '8f5e0e010b5fe4ec60c6cae29a9a4510ba0f34a5', class: {
                 'sd-field__control': true,
                 'sd-field__control--has-addon': !!addon,
-            } }, addon && h("div", { key: '236650de53d1d1951f26586aa0d22f0f267fc411', class: "sd-field__addon" }, addon), h("slot", { key: '41df3dca21aa68d3324617891f2555f1c488a61b' })), 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: '853c73197999da0f753335a06e38aa850d0e9230', class: "sd-field__addon" }, addon), h("slot", { key: '7e6d1d965d83df16e6294d259d1e25b2fab864cd' })), 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)
@@ -487,6 +494,33 @@ export class SdField {
                 "attribute": "addon-label",
                 "defaultValue": "''"
             },
+            "addonAlign": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "FieldAddonAlign",
+                    "resolved": "\"center\" | \"end\" | \"start\"",
+                    "references": {
+                        "FieldAddonAlign": {
+                            "location": "import",
+                            "path": "./sd-field.config",
+                            "id": "src/components/sd-field/sd-field.config.ts::FieldAddonAlign",
+                            "referenceLocation": "FieldAddonAlign"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "addon-align",
+                "defaultValue": "'start'"
+            },
             "icon": {
                 "type": "unknown",
                 "mutable": false,

package/dist/collection/components/sd-file-picker/sd-file-picker.css

@@ -57,7 +57,7 @@ sd-file-picker {
   top: calc(100% - 4px);
   left: 50%;
   transform: translate(-50%);
-  z-index: 1000;
+  z-index: 998;
   white-space: nowrap;
   padding: 8px 12px;
   background: rgba(0, 0, 0, 0.8);

package/dist/collection/components/sd-file-picker/sd-file-picker.js

@@ -16,6 +16,7 @@ export class SdFilePicker {
     label = '';
     labelWidth = '';
     addonLabel = '';
+    addonAlign = 'start';
     hint = '';
     errorMessage = '';
     width = '';
@@ -170,14 +171,14 @@ export class SdFilePicker {
                 'sd-file-picker__text': true,
                 'sd-file-picker__text--placeholder': !hasFiles,
                 'sd-file-picker__text--active': hasFiles,
-            } }, displayText), !this.disabled && hasFiles && (h("sd-ghost-button", { icon: "close", size: "xxs", disabled: this.disabled, class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (h("div", { class: "sd-file-picker__tooltip" }, displayText))));
+            } }, displayText), !this.disabled && hasFiles && (h("sd-ghost-button", { icon: "close", size: "xxs", ariaLabel: "clear", disabled: this.disabled, class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (h("div", { class: "sd-file-picker__tooltip" }, displayText))));
         if (this.inline) {
             return (h("div", { class: {
                     'sd-file-picker--inline': true,
                     'sd-file-picker--inline-disabled': this.disabled,
                 }, style: cssVars, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, content));
         }
-        return (h("sd-field", { name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, content));
+        return (h("sd-field", { name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, content));
     }
     static get is() { return "sd-file-picker"; }
     static get originalStyleUrls() {
@@ -451,6 +452,33 @@ export class SdFilePicker {
                 "attribute": "addon-label",
                 "defaultValue": "''"
             },
+            "addonAlign": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "FieldAddonAlign",
+                    "resolved": "\"center\" | \"end\" | \"start\"",
+                    "references": {
+                        "FieldAddonAlign": {
+                            "location": "import",
+                            "path": "../sd-field/sd-field.config",
+                            "id": "src/components/sd-field/sd-field.config.ts::FieldAddonAlign",
+                            "referenceLocation": "FieldAddonAlign"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "addon-align",
+                "defaultValue": "'start'"
+            },
             "hint": {
                 "type": "string",
                 "mutable": false,

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

@@ -4,7 +4,7 @@ export class SdFloatingPopover {
     to = 'body';
     parentRef = null;
     offset = [0, 0];
-    zIndex = 10000;
+    zIndex = 998;
     placement = 'bottom';
     open = false;
     close;
@@ -62,7 +62,7 @@ export class SdFloatingPopover {
         this.wrapper = document.createElement('div');
         Object.assign(this.wrapper.style, {
             position: 'absolute',
-            zIndex: (this.zIndex ?? 10000).toString(),
+            zIndex: (this.zIndex ?? 998).toString(),
             transition: 'opacity 0.4s',
             top: '-9999px',
             left: '-9999px',
@@ -92,18 +92,22 @@ export class SdFloatingPopover {
             switch (this.placement) {
                 case 'top':
                     top = rect.top + window.scrollY - this.wrapper.offsetHeight + offsetY - ARROW_SIZE;
-                    left = rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;
+                    left =
+                        rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;
                     break;
                 case 'bottom':
                     top = rect.bottom + window.scrollY + offsetY + ARROW_SIZE;
-                    left = rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;
+                    left =
+                        rect.left + window.scrollX + rect.width / 2 - this.wrapper.offsetWidth / 2 + offsetX;
                     break;
                 case 'left':
-                    top = rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;
+                    top =
+                        rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;
                     left = rect.left + window.scrollX - this.wrapper.offsetWidth - offsetX - ARROW_SIZE;
                     break;
                 case 'right':
-                    top = rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;
+                    top =
+                        rect.top + window.scrollY + rect.height / 2 - this.wrapper.offsetHeight / 2 + offsetY;
                     left = rect.right + window.scrollX + offsetX + ARROW_SIZE;
                     break;
             }
@@ -144,7 +148,7 @@ export class SdFloatingPopover {
         this.close.emit();
     }
     render() {
-        return h("slot", { key: '4dafb853b2a82e541f59056d2fedf08a6fa040ba' });
+        return h("slot", { key: 'f463fadca5060ebc995d8115575404611b94fb11' });
     }
     static get is() { return "sd-floating-portal"; }
     static get originalStyleUrls() {
@@ -243,7 +247,7 @@ export class SdFloatingPopover {
                 "setter": false,
                 "reflect": false,
                 "attribute": "z-index",
-                "defaultValue": "10000"
+                "defaultValue": "998"
             },
             "placement": {
                 "type": "string",

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

@@ -32,19 +32,19 @@ export class SdGhostButton {
     render() {
         const sizeConfig = GHOST_BUTTON_SIZES[this.size];
         const contentColor = this.disabled
-            ? GHOST_BUTTON_DISABLED_COLORS[this.intent]
-            : GHOST_BUTTON_CONTENT_COLORS[this.intent];
+            ? GHOST_BUTTON_DISABLED_COLORS[this.intent ?? 'default']
+            : GHOST_BUTTON_CONTENT_COLORS[this.intent ?? 'default'];
         const accessibleName = this.ariaLabel.trim() || undefined;
-        return (h("button", { key: 'eccb34969779d75bcd77dd6ae12cb99a419af121', class: {
+        return (h("button", { key: '690151271d15b4a3e07b47021f368647cc9daf62', class: {
                 'sd-ghost-button': true,
                 'sd-ghost-button--disabled': this.disabled,
             }, type: "button", disabled: this.disabled, "aria-label": accessibleName, style: {
                 '--sd-ghost-button-size': `${sizeConfig.size}px`,
                 '--sd-ghost-button-radius': `${GHOST_BUTTON_RADIUS[this.size]}px`,
-                '--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[this.intent],
+                '--sd-ghost-button-hover-bg': GHOST_BUTTON_HOVER_BG_COLORS[this.intent ?? 'default'],
                 '--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: '4ae160e73b72b0b4aa40947c126419b1016c81d3', name: this.icon, size: sizeConfig.icon, color: contentColor })));
+            }, onClick: this.handleClick }, h("sd-icon", { key: '9769fff9f694e7d1fa2cba94fa8e80498d0afe2e', name: this.icon, size: sizeConfig.icon, color: contentColor })));
     }
     static get is() { return "sd-ghost-button"; }
     static get originalStyleUrls() {

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

@@ -0,0 +1,48 @@
+import guideTokens from "../../tokens/generated/component.guide.json";
+import systemTokens from "../../tokens/generated/system.json";
+const { button, contents, gap } = guideTokens.guide;
+const NOTION_ICON_COLOR = systemTokens.color.content.primary;
+export const GUIDE_CONFIG = {
+    gap: `${gap}px`,
+    button: {
+        height: `${button.height}px`,
+        paddingX: `${button.paddingX}px`,
+        radius: `${button.radius}px`,
+        gap: `${button.gap}px`,
+        fontFamily: button.typography.fontFamily,
+        fontSize: `${button.typography.fontSize}px`,
+        fontWeight: button.typography.fontWeight,
+        lineHeight: `${button.typography.lineHeight}px`,
+        iconSize: Number(button.icon.size),
+        iconColorDefault: button.icon.default,
+        iconColorActive: button.icon.active,
+        iconColorNotion: NOTION_ICON_COLOR,
+        borderWidth: `${button.border.width}px`,
+        borderColor: button.border.default,
+        bgDefault: button.bg.default,
+        bgTip: button.bg.tip,
+        bgNotion: button.bg.notion,
+        textDefault: button.text.default,
+        textActive: button.text.active,
+    },
+    contents: {
+        paddingX: `${contents.paddingX}px`,
+        paddingY: `${contents.paddingY}px`,
+        gap: `${contents.gap}px`,
+        rowGap: `${contents.row.gap}px`,
+        bodyGap: `${contents.body.gap}px`,
+        titleGap: `${contents.title.gap}px`,
+        radius: `${contents.radius}px`,
+        iconColor: contents.icon,
+        iconColorNotion: NOTION_ICON_COLOR,
+        titleFontFamily: contents.typography.title.fontFamily,
+        titleFontSize: `${contents.typography.title.fontSize}px`,
+        titleFontWeight: contents.typography.title.fontWeight,
+        titleLineHeight: `${contents.typography.title.lineHeight}px`,
+        bodyFontFamily: contents.typography.body.fontFamily,
+        bodyFontSize: `${contents.typography.body.fontSize}px`,
+        bodyFontWeight: contents.typography.body.fontWeight,
+        bodyLineHeight: `${contents.typography.body.lineHeight}px`,
+        textColor: contents.typography.color,
+    },
+};

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

@@ -177,38 +177,58 @@ sd-guide {
   height: fit-content;
   width: fit-content;
 }
-sd-guide .sd-guide {
+
+.sd-guide {
   display: inline-flex;
   align-items: center;
   height: fit-content;
   width: fit-content;
 }
-sd-guide .sd-guide .sd-button {
-  padding: 0 16px 0 12px;
-  border-radius: 16px;
-  color: #333333 !important;
+.sd-guide .sd-guide__button .sd-button {
+  min-height: var(--sd-guide-button-height);
+  padding: 0 var(--sd-guide-button-padding-x);
+  border-radius: var(--sd-guide-button-radius);
+  border: var(--sd-guide-button-border-width) solid var(--sd-guide-button-border-color);
+  background: var(--sd-guide-button-bg-default);
+  color: var(--sd-guide-button-text-default) !important;
+  transition: none;
   display: flex;
   align-items: center;
-  transition: none;
+  gap: var(--sd-guide-button-gap);
+}
+.sd-guide .sd-guide__button .sd-button .sd-button__content {
+  color: var(--sd-guide-button-text-default) !important;
+  gap: var(--sd-guide-button-gap);
+}
+.sd-guide .sd-guide__button .sd-button .sd-button__content .sd-button__label {
+  margin-left: 0;
+  color: var(--sd-guide-button-text-default) !important;
+  font-size: var(--sd-guide-button-font-size);
+  font-weight: var(--sd-guide-button-font-weight);
+  line-height: var(--sd-guide-button-line-height);
 }
-sd-guide .sd-guide .sd-button .sd-button__content {
-  color: #333333 !important;
+.sd-guide .sd-guide__button--active .sd-button {
+  color: var(--sd-guide-button-text-active) !important;
 }
-sd-guide .sd-guide .sd-button .sd-button__content .sd-button__label {
-  color: #333333 !important;
-  margin-left: 4px;
+.sd-guide .sd-guide__button--active .sd-button .sd-button__content {
+  color: var(--sd-guide-button-text-active) !important;
 }
-sd-guide .sd-guide--active .sd-button {
-  border: 1px solid #00973C;
+.sd-guide .sd-guide__button--active .sd-button .sd-button__content .sd-button__label {
+  color: var(--sd-guide-button-text-active) !important;
 }
-sd-guide .sd-guide--active .sd-button .sd-button__content .sd-button__label {
-  color: white !important;
+.sd-guide .sd-guide__button--type-tip.sd-guide__button--active .sd-button {
+  background: var(--sd-guide-button-bg-tip);
+  border-color: var(--sd-guide-button-bg-tip);
+}
+.sd-guide .sd-guide__button--type-notion.sd-guide__button--active .sd-button {
+  background: var(--sd-guide-button-bg-notion);
+  border-color: var(--sd-guide-button-bg-notion);
 }
 
 .sd-guide__popup {
   position: relative;
-  padding: 20px 32px;
-  border-radius: 8px;
+  padding: var(--sd-guide-contents-padding-y) var(--sd-guide-contents-padding-x);
+  border-radius: var(--sd-guide-contents-radius);
   box-shadow: 4px 4px 24px 4px rgba(0, 0, 0, 0.1);
   background: white;
 }
@@ -220,15 +240,16 @@ sd-guide .sd-guide--active .sd-button .sd-button__content .sd-button__label {
 .sd-guide__popup__header {
   display: flex;
   align-items: center;
-  gap: 8px;
-  margin-bottom: 12px;
+  gap: var(--sd-guide-contents-title-gap);
+  margin-bottom: var(--sd-guide-contents-gap);
 }
 .sd-guide__popup__header .sd-guide__popup__title {
   margin-top: 0;
-  font-size: 16px;
-  font-weight: 700;
-  line-height: 26px;
-  color: #333333;
+  margin-bottom: 0;
+  font-size: var(--sd-guide-contents-title-font-size);
+  font-weight: var(--sd-guide-contents-title-font-weight);
+  line-height: var(--sd-guide-contents-title-line-height);
+  color: var(--sd-guide-contents-text-color);
 }
 .sd-guide__popup__list {
   width: 100%;
@@ -240,9 +261,10 @@ sd-guide .sd-guide--active .sd-button .sd-button__content .sd-button__label {
   width: 100%;
   align-items: start;
   list-style: none;
-  color: #333333;
-  font-size: 12px;
-  font-weight: 400;
+  color: var(--sd-guide-contents-text-color);
+  font-size: var(--sd-guide-contents-body-font-size);
+  font-weight: var(--sd-guide-contents-body-font-weight);
+  line-height: var(--sd-guide-contents-body-line-height);
 }
 .sd-guide__popup__list__item p {
   width: 100%;
@@ -258,13 +280,20 @@ sd-guide .sd-guide--active .sd-button .sd-button__content .sd-button__label {
   display: block;
   content: "-";
   width: 6px;
-  color: #333333;
-  font-size: 12px;
-  font-weight: 400;
+  color: var(--sd-guide-contents-text-color);
+  font-size: var(--sd-guide-contents-body-font-size);
+  font-weight: var(--sd-guide-contents-body-font-weight);
+  line-height: var(--sd-guide-contents-body-line-height);
   margin-left: 10px;
   margin-right: 12px;
   flex-shrink: 0;
 }
+.sd-guide__popup__list__item--depth-1:not(:first-child) {
+  margin-top: var(--sd-guide-contents-row-gap);
+}
+.sd-guide__popup__list__item--depth-2 {
+  margin-top: var(--sd-guide-contents-body-gap);
+}
 .sd-guide__popup__list__item--depth-2::before {
   content: "•";
 }