@sellmate/design-system 1.0.21 → 1.0.22

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

@@ -0,0 +1,62 @@
+import buttonTokens from "../../tokens/generated/component.button.json";
+import systemTokens from "../../tokens/generated/system.json";
+import { BUTTON_CONFIG, PRESET_BORDER_COLORS as BUTTON_PRESET_BORDER_COLORS, PRESET_CONTENT_COLORS as BUTTON_PRESET_CONTENT_COLORS, PRESET_HOVER_BACKGROUNDS as BUTTON_PRESET_HOVER_BACKGROUNDS, getPresetName, } from "../sd-button-v2/sd-button-v2.config";
+const UNSUPPORTED_DROPDOWN_BUTTON_NAMES = new Set([
+    'neutral_xs',
+    'neutral_sm',
+    'neutral_md',
+]);
+const DROPDOWN_BUTTON_NAMES = Object.keys(BUTTON_CONFIG).filter((name) => !name.endsWith('_lg') && !UNSUPPORTED_DROPDOWN_BUTTON_NAMES.has(name));
+export const DROPDOWN_BUTTON_CONFIG = Object.fromEntries(DROPDOWN_BUTTON_NAMES.map(name => [name, BUTTON_CONFIG[name]]));
+export const DROPDOWN_BUTTON_MIN_WIDTHS = {
+    xs: buttonTokens.dropdown.xs.minWidth,
+    sm: buttonTokens.dropdown.sm.minWidth,
+    md: buttonTokens.dropdown.md.minWidth,
+};
+export const PRESET_HOVER_BACKGROUNDS = BUTTON_PRESET_HOVER_BACKGROUNDS;
+export const PRESET_CONTENT_COLORS = BUTTON_PRESET_CONTENT_COLORS;
+export const PRESET_BORDER_COLORS = BUTTON_PRESET_BORDER_COLORS;
+export const PRESET_DIVIDER_COLORS = {
+    primary: buttonTokens.brand.strong.dropdown.divider,
+    secondary: buttonTokens.brand.subtle.dropdown.divider,
+    primary_outline: PRESET_BORDER_COLORS.primary_outline,
+    neutral: buttonTokens.neutral.outline.border,
+    neutral_outline: PRESET_BORDER_COLORS.neutral_outline,
+    danger: buttonTokens.danger.strong.dropdown.divider,
+    danger_outline: PRESET_BORDER_COLORS.danger_outline,
+};
+const MENU_ITEM_COLOR = systemTokens.color.text.secondary;
+const MENU_ITEM_ACTIVE_BACKGROUND = systemTokens.color.bg.accent.default;
+const MENU_ITEM_ACTIVE_COLOR = systemTokens.color.text.inverse;
+export const PRESET_MENU_ITEM_COLORS = {
+    primary: MENU_ITEM_COLOR,
+    secondary: MENU_ITEM_COLOR,
+    primary_outline: MENU_ITEM_COLOR,
+    neutral: MENU_ITEM_COLOR,
+    neutral_outline: MENU_ITEM_COLOR,
+    danger: MENU_ITEM_COLOR,
+    danger_outline: MENU_ITEM_COLOR,
+};
+export const PRESET_MENU_ITEM_ACTIVE_BACKGROUNDS = {
+    primary: MENU_ITEM_ACTIVE_BACKGROUND,
+    secondary: MENU_ITEM_ACTIVE_BACKGROUND,
+    primary_outline: MENU_ITEM_ACTIVE_BACKGROUND,
+    neutral: MENU_ITEM_ACTIVE_BACKGROUND,
+    neutral_outline: MENU_ITEM_ACTIVE_BACKGROUND,
+    danger: MENU_ITEM_ACTIVE_BACKGROUND,
+    danger_outline: MENU_ITEM_ACTIVE_BACKGROUND,
+};
+export const PRESET_MENU_ITEM_ACTIVE_COLORS = {
+    primary: MENU_ITEM_ACTIVE_COLOR,
+    secondary: MENU_ITEM_ACTIVE_COLOR,
+    primary_outline: MENU_ITEM_ACTIVE_COLOR,
+    neutral: MENU_ITEM_ACTIVE_COLOR,
+    neutral_outline: MENU_ITEM_ACTIVE_COLOR,
+    danger: MENU_ITEM_ACTIVE_COLOR,
+    danger_outline: MENU_ITEM_ACTIVE_COLOR,
+};
+export const DROPDOWN_DISABLED_BACKGROUND = buttonTokens.bg.disabled;
+export const DROPDOWN_DISABLED_CONTENT = buttonTokens.content.disabled;
+export const DROPDOWN_DISABLED_BORDER = buttonTokens.border.disabled;
+export const isDropdownButtonName = (value) => value in DROPDOWN_BUTTON_CONFIG;
+export const getDropdownButtonPreset = (value) => getPresetName(value);

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

@@ -0,0 +1,171 @@
+sd-dropdown-button {
+  display: inline-flex;
+  width: fit-content;
+  height: fit-content;
+}
+
+.sd-dropdown-button {
+  display: inline-flex;
+  position: relative;
+}
+
+.sd-dropdown-button__trigger {
+  --sd-dropdown-button-height: var(--sd-button-md-height, 34px);
+  --sd-dropdown-button-padding-x: var(--sd-button-md-padding-x, 20px);
+  --sd-dropdown-button-gap: var(--sd-button-md-gap, 8px);
+  --sd-dropdown-button-font-family: var(--sd-button-md-typography-font-family, inherit);
+  --sd-dropdown-button-font-size: var(--sd-button-md-typography-font-size, 12px);
+  --sd-dropdown-button-font-weight: var(--sd-button-md-typography-font-weight, 500);
+  --sd-dropdown-button-text-decoration: var(--sd-button-md-typography-text-decoration, none);
+  --sd-dropdown-button-bg: #025497;
+  --sd-dropdown-button-bg-hover: #004177;
+  --sd-dropdown-button-border: transparent;
+  --sd-dropdown-button-content: #ffffff;
+  --sd-dropdown-button-divider: #006ac1;
+  --sd-dropdown-button-accent: #006ac1;
+  --sd-dropdown-button-min-width: 106px;
+  --sd-dropdown-button-disabled-bg: var(--sd-button-bg-disabled, $grey_30);
+  --sd-dropdown-button-disabled-content: var(--sd-button-content-disabled, $grey_65);
+  --sd-dropdown-button-disabled-border: var(--sd-button-border-disabled, $grey_45);
+  display: inline-flex;
+  align-items: stretch;
+  justify-content: space-between;
+  min-width: var(--sd-dropdown-button-min-width);
+  min-height: var(--sd-dropdown-button-height);
+  padding: 0;
+  border: var(--sd-button-border-width-default, 1px) solid var(--sd-dropdown-button-border);
+  border-radius: var(--sd-button-radius-default, 4px);
+  background: var(--sd-dropdown-button-bg);
+  color: var(--sd-dropdown-button-content);
+  cursor: pointer;
+  box-sizing: border-box;
+  font-family: var(--sd-dropdown-button-font-family);
+  font-size: var(--sd-dropdown-button-font-size);
+  font-weight: var(--sd-dropdown-button-font-weight);
+  line-height: 1;
+  text-decoration: var(--sd-dropdown-button-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;
+}
+.sd-dropdown-button__trigger:hover:not(.sd-dropdown-button__trigger--disabled) {
+  background: var(--sd-dropdown-button-bg-hover);
+}
+.sd-dropdown-button__trigger:focus-visible {
+  outline: 0;
+  box-shadow: 0 0 0 2px var(--sd-dropdown-button-accent);
+}
+.sd-dropdown-button__trigger--xs {
+  --sd-dropdown-button-height: var(--sd-button-xs-height, 24px);
+  --sd-dropdown-button-padding-x: var(--sd-button-xs-padding-x, 8px);
+  --sd-dropdown-button-gap: var(--sd-button-xs-gap, 4px);
+  --sd-dropdown-button-font-family: var(--sd-button-xs-typography-font-family, inherit);
+  --sd-dropdown-button-font-size: var(--sd-button-xs-typography-font-size, 12px);
+  --sd-dropdown-button-font-weight: var(--sd-button-xs-typography-font-weight, 500);
+  --sd-dropdown-button-text-decoration: var(--sd-button-xs-typography-text-decoration, none);
+}
+.sd-dropdown-button__trigger--sm {
+  --sd-dropdown-button-height: var(--sd-button-sm-height, 28px);
+  --sd-dropdown-button-padding-x: var(--sd-button-sm-padding-x, 12px);
+  --sd-dropdown-button-gap: var(--sd-button-sm-gap, 6px);
+  --sd-dropdown-button-font-family: var(--sd-button-sm-typography-font-family, inherit);
+  --sd-dropdown-button-font-size: var(--sd-button-sm-typography-font-size, 12px);
+  --sd-dropdown-button-font-weight: var(--sd-button-sm-typography-font-weight, 500);
+  --sd-dropdown-button-text-decoration: var(--sd-button-sm-typography-text-decoration, none);
+}
+.sd-dropdown-button__trigger--md {
+  --sd-dropdown-button-height: var(--sd-button-md-height, 34px);
+  --sd-dropdown-button-padding-x: var(--sd-button-md-padding-x, 20px);
+  --sd-dropdown-button-gap: var(--sd-button-md-gap, 8px);
+  --sd-dropdown-button-font-family: var(--sd-button-md-typography-font-family, inherit);
+  --sd-dropdown-button-font-size: var(--sd-button-md-typography-font-size, 16px);
+  --sd-dropdown-button-font-weight: var(--sd-button-md-typography-font-weight, 500);
+  --sd-dropdown-button-text-decoration: var(--sd-button-md-typography-text-decoration, none);
+}
+.sd-dropdown-button__trigger--disabled {
+  border-color: var(--sd-dropdown-button-disabled-border);
+  background: var(--sd-dropdown-button-disabled-bg);
+  color: var(--sd-dropdown-button-disabled-content);
+  cursor: not-allowed;
+}
+.sd-dropdown-button__trigger--disabled .sd-dropdown-button__trigger-divider {
+  background: var(--sd-dropdown-button-disabled-border);
+}
+
+.sd-dropdown-button__trigger-label,
+.sd-dropdown-button__trigger-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.sd-dropdown-button__trigger-label {
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: 0 var(--sd-dropdown-button-padding-x);
+}
+
+.sd-dropdown-button__trigger-divider {
+  align-self: stretch;
+  width: 1px;
+  height: auto;
+  background: var(--sd-dropdown-button-divider);
+  opacity: 0.9;
+}
+
+.sd-dropdown-button__trigger-icon {
+  flex: 0 0 auto;
+  min-width: calc(var(--sd-dropdown-button-height) - 2px);
+  padding: 0 calc(var(--sd-dropdown-button-gap) + 2px);
+}
+
+.sd-dropdown-button__menu {
+  display: grid;
+  width: max-content;
+  min-width: max-content;
+  max-width: calc(100vw - 24px);
+  padding: 4px 0;
+  border: 0;
+  border-radius: 4px;
+  background: #FFFFFF;
+  box-shadow: 2px 2px 12px 2px rgba(0, 0, 0, 0.1019607843);
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.sd-dropdown-button__menu-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 28px;
+  width: 100%;
+  padding: 0 12px;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: var(--sd-dropdown-button-menu-item-color);
+  cursor: pointer;
+  box-sizing: border-box;
+  font: inherit;
+  text-align: left;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+.sd-dropdown-button__menu-item--active {
+  background: var(--sd-dropdown-button-menu-item-active-bg);
+  color: var(--sd-dropdown-button-menu-item-active-color);
+}
+.sd-dropdown-button__menu-item--disabled {
+  color: var(--sd-dropdown-button-disabled-content);
+  cursor: not-allowed;
+}
+
+.sd-dropdown-button__menu-item-icon {
+  flex: 0 0 auto;
+}
+
+.sd-dropdown-button__menu-item-label {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+  white-space: nowrap;
+  font-size: 12px;
+}

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

@@ -0,0 +1,384 @@
+import { h, } from "@stencil/core";
+import { BaseDropdownEvent } from "../../utils/base-dropdown-event";
+import { BUTTON_FOCUS_RING_COLOR } from "../sd-button-v2/sd-button-v2.config";
+import { DROPDOWN_BUTTON_CONFIG, DROPDOWN_BUTTON_MIN_WIDTHS, DROPDOWN_DISABLED_BACKGROUND, DROPDOWN_DISABLED_BORDER, DROPDOWN_DISABLED_CONTENT, PRESET_BORDER_COLORS, PRESET_CONTENT_COLORS, PRESET_DIVIDER_COLORS, PRESET_HOVER_BACKGROUNDS, PRESET_MENU_ITEM_ACTIVE_BACKGROUNDS, PRESET_MENU_ITEM_ACTIVE_COLORS, PRESET_MENU_ITEM_COLORS, getDropdownButtonPreset, isDropdownButtonName, } from "./sd-dropdown-button.config";
+export class SdDropdownButton extends BaseDropdownEvent {
+    constructor() {
+        super();
+    }
+    el;
+    name = 'primary_sm';
+    label = '';
+    items = [];
+    disabled = false;
+    isOpen = false;
+    itemIndex = -1;
+    triggerRef;
+    menuRef;
+    click;
+    dropDownShow;
+    handleOpenChange(isOpen) {
+        this.onDropdownToggle(isOpen);
+        this.dropDownShow.emit({ isOpen });
+        if (!isOpen) {
+            this.itemIndex = -1;
+        }
+    }
+    componentWillLoad() {
+        this.initializeEvent();
+    }
+    disconnectedCallback() {
+        this.cleanupEvent();
+    }
+    async sdOpen() {
+        if (this.disabled || this.items.length === 0)
+            return;
+        this.isOpen = true;
+    }
+    async sdClose() {
+        this.closeDropdown();
+    }
+    closeDropdown = () => {
+        this.isOpen = false;
+    };
+    handleDocumentClick(event) {
+        const target = event.target;
+        if (!target)
+            return;
+        if (this.el.contains(target))
+            return;
+        if (this.menuRef?.contains(target))
+            return;
+        this.closeDropdown();
+    }
+    handleDocumentKeydown(event) {
+        if (!this.isOpen)
+            return;
+        const targetKeys = ['ArrowDown', 'ArrowUp', 'Enter', 'Escape'];
+        if (!targetKeys.includes(event.key))
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        switch (event.key) {
+            case 'ArrowDown':
+                this.itemIndex = this.getNextEnabledIndex(1);
+                break;
+            case 'ArrowUp':
+                this.itemIndex = this.getNextEnabledIndex(-1);
+                break;
+            case 'Enter':
+                if (this.itemIndex < 0)
+                    return;
+                this.selectItem(this.items[this.itemIndex]);
+                break;
+            case 'Escape':
+                this.closeDropdown();
+                break;
+        }
+    }
+    get resolvedConfig() {
+        if (!isDropdownButtonName(this.name)) {
+            throw new Error(`Invalid sd-dropdown-button name: ${this.name}`);
+        }
+        const config = DROPDOWN_BUTTON_CONFIG[this.name];
+        const preset = getDropdownButtonPreset(this.name);
+        return {
+            config,
+            preset,
+        };
+    }
+    getNextEnabledIndex(direction) {
+        const enabledIndices = this.items.reduce((acc, item, index) => {
+            if (!item.disabled) {
+                acc.push(index);
+            }
+            return acc;
+        }, []);
+        if (enabledIndices.length === 0) {
+            return -1;
+        }
+        const currentPosition = enabledIndices.indexOf(this.itemIndex);
+        if (currentPosition === -1) {
+            return direction === 1 ? enabledIndices[0] : enabledIndices[enabledIndices.length - 1];
+        }
+        const nextPosition = (currentPosition + direction + enabledIndices.length) % enabledIndices.length;
+        return enabledIndices[nextPosition];
+    }
+    toggleDropdown = (event) => {
+        event.stopPropagation();
+        if (this.disabled || this.items.length === 0) {
+            return;
+        }
+        this.isOpen = !this.isOpen;
+    };
+    selectItem(item, event) {
+        event?.stopPropagation();
+        if (!item || item.disabled) {
+            return;
+        }
+        this.click.emit(item.value);
+        this.closeDropdown();
+    }
+    getTriggerClasses(preset, size, disabled, isOpen) {
+        const classes = [
+            'sd-dropdown-button__trigger',
+            `sd-dropdown-button__trigger--${preset}`,
+            `sd-dropdown-button__trigger--${size}`,
+        ];
+        if (disabled) {
+            classes.push('sd-dropdown-button__trigger--disabled');
+        }
+        if (isOpen) {
+            classes.push('sd-dropdown-button__trigger--open');
+        }
+        return classes.join(' ');
+    }
+    getMenuItemClasses(isActive, isDisabled) {
+        const classes = ['sd-dropdown-button__menu-item'];
+        if (isActive) {
+            classes.push('sd-dropdown-button__menu-item--active');
+        }
+        if (isDisabled) {
+            classes.push('sd-dropdown-button__menu-item--disabled');
+        }
+        return classes.join(' ');
+    }
+    renderDropdown(preset) {
+        if (!this.isOpen || !this.triggerRef)
+            return null;
+        return (h("sd-portal", { open: this.isOpen, parentRef: this.triggerRef, onSdClose: this.closeDropdown }, h("div", { class: "sd-dropdown-button__menu", role: "menu", ref: el => (this.menuRef = el), style: {
+                '--sd-dropdown-button-menu-item-color': PRESET_MENU_ITEM_COLORS[preset],
+                '--sd-dropdown-button-menu-item-active-bg': PRESET_MENU_ITEM_ACTIVE_BACKGROUNDS[preset],
+                '--sd-dropdown-button-menu-item-active-color': PRESET_MENU_ITEM_ACTIVE_COLORS[preset],
+                '--sd-dropdown-button-menu-border': PRESET_BORDER_COLORS[preset] === 'transparent'
+                    ? PRESET_DIVIDER_COLORS[preset]
+                    : PRESET_BORDER_COLORS[preset],
+            } }, this.items.map((item, index) => {
+            const isActive = this.itemIndex === index && !item.disabled;
+            const iconColor = item.disabled
+                ? DROPDOWN_DISABLED_CONTENT
+                : isActive
+                    ? PRESET_MENU_ITEM_ACTIVE_COLORS[preset]
+                    : PRESET_MENU_ITEM_COLORS[preset];
+            return (h("button", { type: "button", role: "menuitem", class: this.getMenuItemClasses(isActive, Boolean(item.disabled)), disabled: item.disabled, onClick: event => this.selectItem(item, event), onMouseEnter: () => {
+                    if (!item.disabled) {
+                        this.itemIndex = index;
+                    }
+                } }, item.icon && (h("sd-icon", { class: "sd-dropdown-button__menu-item-icon", name: item.icon, size: 12, color: iconColor })), h("span", { class: "sd-dropdown-button__menu-item-label", innerHTML: item.label })));
+        }))));
+    }
+    render() {
+        const { config, preset } = this.resolvedConfig;
+        const chevronColor = this.disabled ? DROPDOWN_DISABLED_CONTENT : PRESET_CONTENT_COLORS[preset];
+        return (h("div", { key: '0bd454e599c8eb56b88f63a5f74e1d9db4b568f9', class: "sd-dropdown-button" }, h("button", { key: '804dd19dc0d49969e89d0742e71f61fe610e3f3d', type: "button", class: this.getTriggerClasses(preset, config.size, this.disabled, this.isOpen), disabled: this.disabled, "aria-haspopup": "menu", "aria-expanded": String(this.isOpen), onClick: this.toggleDropdown, ref: el => (this.triggerRef = el), style: {
+                '--sd-dropdown-button-min-width': `${DROPDOWN_BUTTON_MIN_WIDTHS[config.size]}px`,
+                '--sd-dropdown-button-bg': config.color,
+                '--sd-dropdown-button-bg-hover': PRESET_HOVER_BACKGROUNDS[preset],
+                '--sd-dropdown-button-border': PRESET_BORDER_COLORS[preset],
+                '--sd-dropdown-button-content': PRESET_CONTENT_COLORS[preset],
+                '--sd-dropdown-button-divider': PRESET_DIVIDER_COLORS[preset],
+                '--sd-dropdown-button-accent': BUTTON_FOCUS_RING_COLOR,
+                '--sd-dropdown-button-disabled-bg': DROPDOWN_DISABLED_BACKGROUND,
+                '--sd-dropdown-button-disabled-content': DROPDOWN_DISABLED_CONTENT,
+                '--sd-dropdown-button-disabled-border': DROPDOWN_DISABLED_BORDER,
+            } }, h("span", { key: '038dd3ad8c7c07d3ebb435a6fec27dd31b8fdba0', class: "sd-dropdown-button__trigger-label" }, this.label), h("span", { key: 'c5c2c0fffa200a4772d7e448e1a1b95745be4faa', class: "sd-dropdown-button__trigger-divider", "aria-hidden": "true" }), h("span", { key: 'a6f1db25929c10b9dc9ccbae2655eed3c67dff22', class: "sd-dropdown-button__trigger-icon", "aria-hidden": "true" }, h("sd-icon", { key: '4c1533a7efd5a7d695e460bad9dfc2b8a7fe5740', name: this.isOpen ? 'arrowUp' : 'arrowDown', size: 12, color: chevronColor }))), this.renderDropdown(preset)));
+    }
+    static get is() { return "sd-dropdown-button"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sd-dropdown-button.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sd-dropdown-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DropdownButtonName",
+                    "resolved": "\"danger_md\" | \"danger_outline_md\" | \"danger_outline_sm\" | \"danger_outline_xs\" | \"danger_sm\" | \"danger_xs\" | \"neutral_outline_md\" | \"neutral_outline_sm\" | \"neutral_outline_xs\" | \"primary_md\" | \"primary_outline_md\" | \"primary_outline_sm\" | \"primary_outline_xs\" | \"primary_sm\" | \"primary_xs\" | \"secondary_md\" | \"secondary_sm\" | \"secondary_xs\"",
+                    "references": {
+                        "DropdownButtonName": {
+                            "location": "import",
+                            "path": "./sd-dropdown-button.config",
+                            "id": "src/components/sd-dropdown-button/sd-dropdown-button.config.ts::DropdownButtonName",
+                            "referenceLocation": "DropdownButtonName"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name",
+                "defaultValue": "'primary_sm'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "items": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "DropdownButtonItem[]",
+                    "resolved": "DropdownButtonItem[]",
+                    "references": {
+                        "DropdownButtonItem": {
+                            "location": "import",
+                            "path": "./sd-dropdown-button.config",
+                            "id": "src/components/sd-dropdown-button/sd-dropdown-button.config.ts::DropdownButtonItem",
+                            "referenceLocation": "DropdownButtonItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {},
+            "itemIndex": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "click",
+                "name": "sdClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "DropdownButtonValue",
+                    "resolved": "number | string",
+                    "references": {
+                        "DropdownButtonValue": {
+                            "location": "import",
+                            "path": "./sd-dropdown-button.config",
+                            "id": "src/components/sd-dropdown-button/sd-dropdown-button.config.ts::DropdownButtonValue",
+                            "referenceLocation": "DropdownButtonValue"
+                        }
+                    }
+                }
+            }, {
+                "method": "dropDownShow",
+                "name": "sdDropDownShow",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ isOpen: boolean }",
+                    "resolved": "{ isOpen: boolean; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "sdOpen": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "sdClose": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "isOpen",
+                "methodName": "handleOpenChange"
+            }];
+    }
+}

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

@@ -114,15 +114,15 @@ export class SdField {
         }
     }
     render() {
-        return (h("div", { key: '3c69abe493110b5665795706a9ae0e525f213aca', class: {
+        return (h("div", { key: '83d20191373b759f18d25e25330ead65217dea4f', class: {
                 'sd-field': true,
                 'sd-field--has-label': !!this.label,
                 'sd-field--has-label-inside': !!this.label && this.insideLabel,
                 [this.fieldStatus]: !!this.fieldStatus,
-            } }, h("div", { key: 'decc6821b7172f5ecc2343472014c08674725904', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: 'ca5e93f049db10ecaaaab091fdf394ac4b55e292', class: {
+            } }, h("div", { key: '2f04e19997c077c32843173c85dc04840f8fa0f6', class: "sd-field__wrapper" }, this.renderLabel(this.label), h("div", { key: 'c7fa5c334cd4dc0b99919850b3059a35a77ea5c6', class: {
                 'sd-field__control': true,
                 'sd-field__control--label-inside ': !!this.label && this.insideLabel,
-            } }, h("slot", { key: '7ee38983d32985f4b4a035830bcdca0e14b2cf71' }))), this.errorMsg && h("div", { key: 'c2d6ef860ced48657b906806f2618594b094ea79', class: "sd-field__error-message" }, this.errorMsg)));
+            } }, h("slot", { key: '15f7bd40ca6ed1667f97f6362be914e203c491af' }))), this.errorMsg && h("div", { key: 'd940bca4d3074e8051bc5392aad36be4c58f88af', class: "sd-field__error-message" }, this.errorMsg)));
     }
     renderLabel(label) {
         if (!label)

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

@@ -91,15 +91,15 @@ export class SdFilePicker {
     render() {
         const hasFiles = this.hasFiles();
         const displayText = this.getDisplayText();
-        return (h("div", { key: '659ab6f0e1fedadfbef1838def391aab28ae6e62', class: {
+        return (h("div", { key: 'dfdb1f7cc4793c23cfb1ae97464981833263421e', class: {
                 'sd-file-picker': true,
                 [this.getStatusClass()]: true,
                 'sd-file-picker--inline': this.inline,
-            }, onClick: this.handleClick, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("input", { key: '55ffb6c1b3ff502b555cb48a31301ac9b30701a4', ref: el => (this.fileInputRef = el), type: "file", class: "sd-file-picker__input", disabled: this.disabled, multiple: this.multiple, accept: this.accept, onInput: this.handleFileChange, "aria-label": this.placeholder }), h("sd-icon", { key: 'b7755876e0f327d15a886a86592cd59bd3435202', name: "attachFile", size: 16, color: this.getIconColor(), class: "sd-file-picker__icon" }), h("div", { key: 'e1e2004c64166eb2b611c48ca51cc793fb90434c', ref: el => (this.fileNamesRef = el), class: {
+            }, onClick: this.handleClick, onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false) }, h("input", { key: 'bd4a072a517391b63116de1561aaf6606b1a8343', ref: el => (this.fileInputRef = el), type: "file", class: "sd-file-picker__input", disabled: this.disabled, multiple: this.multiple, accept: this.accept, onInput: this.handleFileChange, "aria-label": this.placeholder }), h("sd-icon", { key: '12280a64236d3fd9b63a9d15be11426efdd81629', name: "attachFile", size: 16, color: this.getIconColor(), class: "sd-file-picker__icon" }), h("div", { key: '935a7d98ee034d59f16b410eb1495cd009ce6024', ref: el => (this.fileNamesRef = el), class: {
                 'sd-file-picker__text': true,
                 'sd-file-picker__text--placeholder': !hasFiles,
                 'sd-file-picker__text--active': hasFiles,
-            } }, displayText), !this.disabled && hasFiles && (h("sd-icon", { key: '0a3c122382cab2148a88fbd4fdc9ff1f7cde757b', name: "close", size: 12, color: "#888888", class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (h("div", { key: '628717309bf16c0906e9ac21ecbf14a416eea8d8', class: "sd-file-picker__tooltip" }, displayText))));
+            } }, displayText), !this.disabled && hasFiles && (h("sd-icon", { key: '08f38161be5d1754b4f5b1bba185a29976ffd1dd', name: "close", size: 12, color: "#888888", class: "sd-file-picker__clear-icon", onClick: this.handleClear })), this.showTooltip && hasFiles && this.hovered && (h("div", { key: 'db6edfa98b3832276b320a6f3b4e195cfaeff4d6', class: "sd-file-picker__tooltip" }, displayText))));
     }
     static get is() { return "sd-file-picker"; }
     static get originalStyleUrls() {

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

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