@sellmate/design-system 1.0.62 → 1.0.64

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

@@ -0,0 +1,169 @@
+import { r as registerInstance, a as getElement, h, H as Host } from './index-BqHL8W3c.js';
+import { T as TABLE_ID_ATTR } from './constants-sZMi_32I.js';
+
+const sdTrCss = () => `sd-tr{display:contents}sd-tr *{box-sizing:border-box}.tr{display:table-row}.tr:hover .td{background-color:#F9F9F9}.td{display:table-cell;height:44px;padding:0 16px;border-bottom:1px solid #E1E1E1;background:white;vertical-align:middle;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.td--left{text-align:left}.td--center{text-align:center}.td--right{text-align:right}.td--selected{position:relative;width:52px !important;max-width:52px !important;min-width:52px !important;padding:0 10px 0 24px;text-align:left}.td--selected sd-checkbox label{position:relative}.td--selected sd-checkbox label:before{content:"";position:absolute;inset:-6px}.td.sticky-left{position:sticky;background-color:white;z-index:100 !important;left:var(--sticky-left-offset, 0)}.td.sticky-right{position:sticky;background-color:white;z-index:100 !important;right:var(--sticky-right-offset, 0)}.td.sticky-left-edge:after{content:"";position:absolute;top:0;left:100%;right:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset 12px 0 20px -25px;opacity:0;pointer-events:none;transition:opacity 0.2s}.td.sticky-right-edge:after{content:"";position:absolute;top:0;left:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset -12px 0 20px -25px;opacity:0;pointer-events:none;transition:opacity 0.2s}.td.sticky-left-edge.is-scrolled-left{overflow:visible}.td.sticky-left-edge.is-scrolled-left:after{opacity:1}.td.sticky-right-edge.is-scrolled-right{overflow:visible}.td.sticky-right-edge.is-scrolled-right:after{opacity:1}.tr:hover .td.sticky-left,.tr:hover .td.sticky-right{background-color:#F9F9F9}`;
+
+const SdTr = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    columns;
+    selectable;
+    stickyColumn;
+    rowKey = '';
+    row = {};
+    tableId = '';
+    columnWidths = [];
+    isVisible = true;
+    _columns = [];
+    _selectable = false;
+    _stickyColumn = { left: 0, right: 0 };
+    _scrolledLeft = false;
+    _scrolledRight = false;
+    tableEl = null;
+    componentWillLoad() {
+        this.syncTableContext();
+        this.columnWidths = this.columnWidths ?? [];
+        this.resolveConfig();
+        this.columnWidths = this._columns.map(c => parseInt(c.width || '120', 10));
+        this.updateVisibilitySync();
+    }
+    componentDidLoad() {
+        this.syncTableContext();
+    }
+    syncTableContext() {
+        const table = this.el.closest('sd-table');
+        this.tableEl = table;
+        const fromMethod = table?.getTableIdSync?.();
+        const fromAttr = table?.getAttribute(TABLE_ID_ATTR);
+        const resolvedTableId = (fromMethod && fromMethod !== 'undefined' ? fromMethod : null) ??
+            (fromAttr && fromAttr !== 'undefined' ? fromAttr : null) ??
+            '';
+        if (resolvedTableId && resolvedTableId !== this.tableId) {
+            this.tableId = resolvedTableId;
+        }
+    }
+    resolveConfig() {
+        const config = this.tableEl?.getConfigSync?.();
+        this._columns = this.columns ?? config?.columns ?? [];
+        this._selectable = this.selectable ?? config?.selectable ?? false;
+        this._stickyColumn = this.stickyColumn ?? config?.stickyColumn ?? { left: 0, right: 0 };
+        this._scrolledLeft = config?.scrolledLeft ?? false;
+        this._scrolledRight = config?.scrolledRight ?? false;
+        if (config?.columnWidths && (this.columnWidths ?? []).length === 0) {
+            this.columnWidths = [...config.columnWidths];
+        }
+    }
+    async refreshConfig() {
+        this.resolveConfig();
+    }
+    async updateVisibility() {
+        this.updateVisibilitySync();
+    }
+    updateVisibilitySync() {
+        const rowIndex = parseInt(this.rowKey, 10);
+        const pageInfo = this.tableEl?.getPaginationInfoSync?.();
+        if (!pageInfo) {
+            this.isVisible = true;
+            return;
+        }
+        this.isVisible = rowIndex >= pageInfo.startIndex && rowIndex < pageInfo.endIndex;
+    }
+    async setColumnWidths(widths) {
+        this.columnWidths = widths;
+    }
+    async refreshSelection() {
+        const checkbox = this.el.querySelector('sd-checkbox');
+        if (checkbox) {
+            checkbox.value = this.isSelected();
+        }
+    }
+    get visibleColumns() {
+        return this._columns.filter(col => col.visible !== false);
+    }
+    formatValue(value) {
+        if (value === null || value === undefined) {
+            return '';
+        }
+        if (typeof value === 'number') {
+            return value.toLocaleString();
+        }
+        return String(value);
+    }
+    getCellValue(column) {
+        const { field, format, name } = column;
+        const value = typeof field === 'function' ? field(this.row) : field ? this.row[field] : this.row[name];
+        return format ? format(value, this.row) : this.formatValue(value);
+    }
+    getStickyStyle(colIdx) {
+        if (this.tableEl?.getStickyStyleSync) {
+            return this.tableEl.getStickyStyleSync(colIdx);
+        }
+        const leftOffset = this.columnWidths.slice(0, colIdx).reduce((a, b) => a + b, 0) + (this._selectable ? 52 : 0);
+        const rightOffset = this.columnWidths
+            .filter((_, i) => i >= this.visibleColumns.length - (this._stickyColumn.right || 0) && i > colIdx)
+            .reduce((a, b) => a + b, 0);
+        return {
+            '--sticky-left-offset': `${leftOffset}px`,
+            '--sticky-right-offset': `${rightOffset}px`,
+            'width': `${this.columnWidths[colIdx]}px`,
+            'minWidth': `${this.columnWidths[colIdx]}px`,
+            'maxWidth': `${this.columnWidths[colIdx]}px`,
+        };
+    }
+    isSelected() {
+        if (this.tableEl?.isRowSelectedSync) {
+            return this.tableEl.isRowSelectedSync(this.row);
+        }
+        return false;
+    }
+    handleSelect() {
+        if (this.tableEl?.updateRowSelectSync) {
+            this.tableEl.updateRowSelectSync(this.row);
+        }
+    }
+    render() {
+        const stickyLeftCount = this._stickyColumn.left || 0;
+        const stickyRightCount = this._stickyColumn.right || 0;
+        const stickyLeftCols = this.visibleColumns.slice(0, stickyLeftCount);
+        const middleCols = this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
+        const stickyRightCols = this.visibleColumns.slice(this.visibleColumns.length - stickyRightCount);
+        return (h(Host, { key: 'e0b035db61ba424f4a33cdb470c839cb23c696cc', style: { display: this.isVisible ? '' : 'none' } }, h("tr", { key: '224e8c360e01f81dee44d8c93f9e6724c3e87b4f', class: "tr" }, this._selectable && (h("td", { key: '34afbe37ae3f86054cc6151c31a9de4f20296aef', class: {
+                'td': true,
+                'td--selected': true,
+                'sticky-left': true,
+                'sticky-left-edge': stickyLeftCount === 0,
+                'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
+            }, style: { '--sticky-left-offset': '0px' } }, h("sd-checkbox", { key: '29ad82d0b043964fdfc68cb250deddeda8029b39', value: this.isSelected(), onSdUpdate: () => this.handleSelect() }))), stickyLeftCols.map((col, idx) => (h("td", { key: col.name, class: {
+                'td': true,
+                [`td--${col.align || 'left'}`]: true,
+                'sticky-left': true,
+                'sticky-left-edge': idx === stickyLeftCount - 1,
+                'is-scrolled-left': idx === stickyLeftCount - 1 && this._scrolledLeft,
+                [`${col.tdClass}`]: Boolean(col.tdClass),
+            }, style: this.getStickyStyle(idx) }, h("slot", { name: `${this.tableId}-${typeof col.field === 'string' ? col.field : col.name}-${this.rowKey}` }, h("span", null, this.getCellValue(col)))))), middleCols.map((col, relativeIdx) => {
+            const actualColIdx = stickyLeftCount + relativeIdx;
+            const fieldName = typeof col.field === 'string' ? col.field : col.name;
+            return (h("td", { key: col.name, class: {
+                    td: true,
+                    [`td--${col.align || 'left'}`]: true,
+                    [`${col.tdClass}`]: Boolean(col.tdClass),
+                }, style: this.getStickyStyle(actualColIdx) }, h("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, h("span", null, this.getCellValue(col)))));
+        }), stickyRightCols.map((col, relativeIdx) => {
+            const actualColIdx = this.visibleColumns.length - stickyRightCount + relativeIdx;
+            const fieldName = typeof col.field === 'string' ? col.field : col.name;
+            return (h("td", { key: col.name, class: {
+                    'td': true,
+                    [`td--${col.align || 'left'}`]: true,
+                    'sticky-right': true,
+                    'sticky-right-edge': relativeIdx === 0,
+                    'is-scrolled-right': relativeIdx === 0 && this._scrolledRight,
+                    [`${col.tdClass}`]: Boolean(col.tdClass),
+                }, style: this.getStickyStyle(actualColIdx) }, h("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, h("span", null, this.getCellValue(col)))));
+        }))));
+    }
+};
+SdTr.style = sdTrCss();
+
+export { SdTr as sd_tr };

package/dist/esm/table-test.entry.js

@@ -0,0 +1,94 @@
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-BqHL8W3c.js';
+
+const tableTestCss = () => `:host{display:block}.table-wrapper{width:100%;overflow-x:auto}.templates-slot{display:none}.data-table{width:100%;border-collapse:collapse;font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;font-size:14px}.data-table th,.data-table td{padding:12px 16px;text-align:left;vertical-align:middle}.data-table th{font-weight:600;background-color:#f8f9fa;color:#333}.data-table.bordered th,.data-table.bordered td{border:1px solid #dee2e6}.data-table.striped tbody tr:nth-child(odd){background-color:#f8f9fa}.data-table tbody tr:hover{background-color:#e9ecef}.data-table .cell-flex{display:flex;align-items:center;gap:8px}.data-table .cell-image{width:24px;height:16px;object-fit:cover;border-radius:2px}`;
+
+const DataTable = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.tableReady = createEvent(this, "tableReady", 7);
+    }
+    get el() { return getElement(this); }
+    /** Column definitions array */
+    columns = [];
+    /** Row data array */
+    rows = [];
+    /** Show cell borders */
+    bordered = true;
+    /** Alternate row colors */
+    striped = false;
+    cellRenderers = new Map();
+    headerRenderers = new Map();
+    tableReady;
+    dataChanged() {
+        this.tableReady.emit();
+    }
+    componentDidLoad() {
+        this.tableReady.emit();
+    }
+    async setCellRenderer(field, renderer) {
+        this.cellRenderers = new Map(this.cellRenderers).set(field, renderer);
+    }
+    async setHeaderRenderer(field, renderer) {
+        this.headerRenderers = new Map(this.headerRenderers).set(field, renderer);
+    }
+    async removeCellRenderer(field) {
+        const newMap = new Map(this.cellRenderers);
+        newMap.delete(field);
+        this.cellRenderers = newMap;
+    }
+    async clearAllRenderers() {
+        this.cellRenderers = new Map();
+        this.headerRenderers = new Map();
+    }
+    renderCellContent(column, row, rowIndex) {
+        const value = row[column.field];
+        const renderer = this.cellRenderers.get(column.field);
+        if (renderer) {
+            const html = renderer({ field: column.field, value, row, rowIndex });
+            return h("span", { class: "cell-content", innerHTML: html });
+        }
+        const template = this.el.querySelector(`[slot="cell-${column.field}"]`);
+        if (template) {
+            const html = this.processTemplate(template.innerHTML, { value, row, rowIndex });
+            return h("span", { class: "cell-content", innerHTML: html });
+        }
+        return h("span", { class: "cell-content" }, value);
+    }
+    renderHeaderContent(column) {
+        const renderer = this.headerRenderers.get(column.field);
+        if (renderer) {
+            const html = renderer({ field: column.field, column });
+            return h("span", { innerHTML: html });
+        }
+        const template = this.el.querySelector(`[slot="header-${column.field}"]`);
+        if (template) {
+            return h("span", { innerHTML: template.innerHTML });
+        }
+        return column.header || column.field;
+    }
+    processTemplate(html, data) {
+        return html
+            .replace(/\{\{value\}\}/g, this.escapeHtml(String(data.value ?? '')))
+            .replace(/\{\{rowIndex\}\}/g, String(data.rowIndex))
+            .replace(/\{\{row\.(\w+)\}\}/g, (_, prop) => this.escapeHtml(String(data.row[prop] ?? '')));
+    }
+    escapeHtml(str) {
+        const el = document.createElement('div');
+        el.textContent = str;
+        return el.innerHTML;
+    }
+    render() {
+        return (h("div", { key: '6d2ff3676d082540cc70939363b0f07ff7252e8c', class: "table-wrapper" }, h("table", { key: '3995aead06dfce42ea4e918486b1473c1740b96e', class: { 'data-table': true, 'bordered': this.bordered, 'striped': this.striped } }, h("thead", { key: '9cbe03cbe1f69d7546ba5037489d20d85bd4a534' }, h("tr", { key: '7ab64e3e3ef214a19a010501d3ec9778c5594990' }, this.columns.map(column => (h("th", { key: column.field, style: { width: column.width } }, this.renderHeaderContent(column)))))), h("tbody", { key: '660707fb4d5075b98698718e8cfa8ed903f3d1e2' }, this.rows.map((row, rowIndex) => (h("tr", { key: rowIndex }, this.columns.map(column => (h("td", { key: `${rowIndex}-${column.field}` }, this.renderCellContent(column, row, rowIndex))))))))), h("div", { key: '9aabf030b814c340b2f4a1d66644516ed320f31b', class: "templates-slot", hidden: true }, h("slot", { key: '532e40bf658706a99b57dc89c056d977db3e4d83' }))));
+    }
+    static get watchers() { return {
+        "columns": [{
+                "dataChanged": 0
+            }],
+        "rows": [{
+                "dataChanged": 0
+            }]
+    }; }
+};
+DataTable.style = tableTestCss();
+
+export { DataTable as table_test };

package/dist/esm/{tooltipArrow-CJuzsrdH.js → tooltipArrow-BcsrQx1U.js}

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

package/dist/types/__mocks__/nanoid-non-secure.d.ts

@@ -0,0 +1,2 @@
+export declare const nanoid: (size?: number) => string;
+export declare const customAlphabet: (_alphabet: string, size?: number) => () => string;

package/dist/types/__mocks__/nanoid.d.ts

@@ -0,0 +1 @@
+export { nanoid, customAlphabet } from './nanoid-non-secure';

package/dist/types/components/sd-barcode-input/sd-barcode-input.d.ts

@@ -22,6 +22,7 @@ export declare class SdBarcodeInput {
     focused: boolean;
     hovered: boolean;
     label?: string;
+    labelWidth: string | number;
     icon?: IconProps;
     labelTooltip: string;
     labelTooltipProps: SdTooltipProps | null;

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

@@ -4,6 +4,7 @@ export declare class SdButtonV2 {
     name: ButtonV2Name;
     label: string;
     icon?: IconName;
+    rightIcon?: IconName;
     ariaLabel: string;
     disabled: boolean;
     type: ButtonV2Type;

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

@@ -21,8 +21,11 @@ export declare const CHECKBOX_COLORS: {
         bg: string;
         icon: string;
         iconDisabled: string;
+        iconInverse: string;
+        borderInverse: string;
     };
     label: string;
+    labelInverse: string;
     disabled: {
         bg: string;
         border: string;

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

@@ -8,6 +8,8 @@ export declare class SdCheckbox {
     val?: any;
     /** 비활성화 여부 */
     disabled: boolean;
+    /** 어두운 배경 위에서 사용하는 inverse(흰색) 스타일 */
+    inverse: boolean;
     /** 표시할 라벨 텍스트 */
     label: string;
     /** 내부 체크 상태 */

package/dist/types/components/sd-circle-progress/sd-circle-progress.config.d.ts

@@ -0,0 +1,9 @@
+export type CircleProgressType = 'primary' | 'inverse' | 'error' | 'complete';
+export declare const CIRCLE_PROGRESS_COLOR_MAP: Record<CircleProgressType, {
+    arc: string;
+    track: string;
+}>;
+export declare const CIRCLE_PROGRESS_VIEWBOX_SIZE = 80;
+export declare const CIRCLE_PROGRESS_RADIUS = 34;
+export declare const CIRCLE_PROGRESS_STROKE_WIDTH = 12;
+export declare const CIRCLE_PROGRESS_CIRCUMFERENCE: number;

package/dist/types/components/sd-circle-progress/sd-circle-progress.d.ts

@@ -0,0 +1,8 @@
+import { type CircleProgressType } from './sd-circle-progress.config';
+export declare class SdCircleProgress {
+    indeterminate: boolean;
+    value: number;
+    type: CircleProgressType;
+    private get clampedValue();
+    render(): any;
+}

package/dist/types/components/sd-date-picker/sd-date-picker.d.ts

@@ -12,6 +12,7 @@ export declare class SdDatePicker {
     disabled: boolean;
     width: string | number;
     label: string;
+    labelWidth: string | number;
     addonLabel: string;
     hint: string;
     errorMessage: string;

package/dist/types/components/sd-date-range-picker/sd-date-range-picker.d.ts

@@ -14,6 +14,7 @@ export declare class SdDateRangePicker {
     disabled: boolean;
     width: string | number;
     label: string;
+    labelWidth: string | number;
     addonLabel: string;
     hint: string;
     errorMessage: string;

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

@@ -43,6 +43,7 @@ export declare const PRESET_DIVIDER_COLORS: Record<DropdownButtonPreset, string>
 export declare const PRESET_MENU_ITEM_COLORS: Record<DropdownButtonPreset, string>;
 export declare const PRESET_MENU_ITEM_ACTIVE_BACKGROUNDS: Record<DropdownButtonPreset, string>;
 export declare const PRESET_MENU_ITEM_ACTIVE_COLORS: Record<DropdownButtonPreset, string>;
+export declare const DROPDOWN_CHEVRON_ICON_SIZE: Record<DropdownButtonSize, number>;
 export declare const DROPDOWN_DISABLED_BACKGROUND: string;
 export declare const DROPDOWN_DISABLED_TEXT: string;
 export declare const DROPDOWN_DISABLED_ICON: string;

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

@@ -0,0 +1,9 @@
+export type FieldSize = 'sm' | 'md';
+export declare const FIELD_LABEL_SIZE_MAP: Record<FieldSize, {
+    height: string;
+    gap: string;
+    icon: string;
+    fontSize: string;
+    lineHeight: string;
+    fontWeight: string;
+}>;

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

@@ -1,6 +1,7 @@
 import { ValidatableField } from '../sd-form/sd-form';
 import { Rule } from '../../types/form';
 import { SdTooltipProps } from '../sd-tooltip/sd-tooltip.config';
+import { type FieldSize } from './sd-field.config';
 export declare class SdField implements ValidatableField {
     el: HTMLElement;
     name: string;
@@ -13,7 +14,9 @@ export declare class SdField implements ValidatableField {
     hint: string;
     errorMessage: string;
     width: string | number;
+    size: FieldSize;
     label: string;
+    labelWidth: string | number;
     addonLabel: string;
     icon?: IconProps;
     labelTooltip: string;

package/dist/types/components/sd-file-picker/sd-file-picker.d.ts

@@ -14,6 +14,7 @@ export declare class SdFilePicker implements ComponentInterface {
     maxFiles?: number | string;
     name: string;
     label: string;
+    labelWidth: string | number;
     addonLabel: string;
     hint: string;
     errorMessage: string;

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

@@ -5,7 +5,7 @@ export declare const GHOST_BUTTON_SIZES: Record<GhostButtonSize, {
     size: number;
     icon: number;
 }>;
-export declare const GHOST_BUTTON_RADIUS: number;
+export declare const GHOST_BUTTON_RADIUS: Record<GhostButtonSize, number>;
 export declare const GHOST_BUTTON_HOVER_OPACITY: string;
 export declare const GHOST_BUTTON_CONTENT_COLORS: Record<GhostButtonIntent, string>;
 export declare const GHOST_BUTTON_HOVER_BG_COLORS: Record<GhostButtonIntent, string>;

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

@@ -29,6 +29,7 @@ export declare class SdInput {
     focused: boolean;
     hovered: boolean;
     label?: string;
+    labelWidth: string | number;
     icon?: IconProps;
     labelTooltip: string;
     labelTooltipProps: SdTooltipProps | null;

package/dist/types/components/sd-loading-container/sd-loading-container.config.d.ts

@@ -0,0 +1,4 @@
+export declare const LOADING_CONTAINER_DEFAULT_Z_INDEX = 10000;
+export interface SdLoadingShowArgs {
+    message?: string;
+}

package/dist/types/components/sd-loading-container/sd-loading-container.d.ts

@@ -0,0 +1,8 @@
+import type { SdLoadingShowArgs } from './sd-loading-container.config';
+export declare class SdLoadingContainer {
+    visible: boolean;
+    message: string;
+    show(options?: SdLoadingShowArgs): Promise<void>;
+    hide(): Promise<void>;
+    render(): any;
+}

package/dist/types/components/sd-loading-modal/sd-loading-modal.config.d.ts

@@ -0,0 +1,25 @@
+import type { ButtonV2Name } from '../sd-button-v2/sd-button-v2.config';
+export type LoadingModalState = 'loading' | 'error';
+export declare const LOADING_MODAL_LAYOUT: {
+    minWidth: number;
+    minHeight: number;
+    gap: number;
+    contentSize: number;
+    radius: number;
+};
+export declare const LOADING_MODAL_COLORS: {
+    bg: string;
+    messageColor: string;
+    errorIcon: string;
+    spinnerTrack: string;
+    spinnerArc: string;
+};
+export declare const LOADING_MODAL_TYPOGRAPHY: {
+    fontFamily: string;
+    fontSize: number;
+    fontWeight: number;
+    lineHeight: number;
+};
+export declare const LOADING_MODAL_DEFAULT_MESSAGE: Record<LoadingModalState, string>;
+export declare const LOADING_MODAL_DEFAULT_BUTTON_LABEL: Record<LoadingModalState, string>;
+export declare const LOADING_MODAL_BUTTON_PRESET: ButtonV2Name;

package/dist/types/components/sd-loading-modal/sd-loading-modal.d.ts

@@ -0,0 +1,15 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { type LoadingModalState } from './sd-loading-modal.config';
+export declare class SdLoadingModal {
+    state: LoadingModalState;
+    message: string;
+    buttonLabel: string;
+    width?: string | number;
+    height?: string | number;
+    click: EventEmitter<void>;
+    private get resolvedMessage();
+    private get resolvedButtonLabel();
+    private handleClick;
+    private toCssSize;
+    render(): any;
+}

package/dist/types/components/sd-modal-container/sd-modal-container.config.d.ts

@@ -1,4 +1,5 @@
 import type { ConfirmModalType, ConfirmModalMainButton } from '../sd-confirm-modal/sd-confirm-modal.config';
+import type { LoadingModalState } from '../sd-loading-modal/sd-loading-modal.config';
 import type { TagName } from '../sd-tag/sd-tag.config';
 export interface ConfirmModalOptions {
     type?: ConfirmModalType;
@@ -15,6 +16,14 @@ export interface ConfirmModalOptions {
     tagContents?: HTMLElement;
     persistent?: boolean;
 }
+export interface LoadingModalOptions {
+    state?: LoadingModalState;
+    message?: string;
+    buttonLabel?: string;
+    width?: string | number;
+    height?: string | number;
+    persistent?: boolean;
+}
 export interface ModalEntry {
     id: string;
     modalEl: HTMLElement;
@@ -42,6 +51,7 @@ export interface ModalDialogRefLike {
     _triggerCancel(): void;
     _triggerClose(): void;
     _triggerDismissed(): void;
+    _triggerClick?(): void;
 }
 export interface SdModalGlobalOptions {
     zIndex?: number;

package/dist/types/components/sd-modal-container/sd-modal-container.d.ts

@@ -1,4 +1,4 @@
-import type { ConfirmModalOptions, ModalEntry, ModalDialogRefLike, SdModalCreateOptions } from './sd-modal-container.config';
+import type { ConfirmModalOptions, LoadingModalOptions, ModalEntry, ModalDialogRefLike, SdModalCreateOptions } from './sd-modal-container.config';
 export declare class SdModalContainer {
     el: HTMLElement;
     entries: ModalEntry[];
@@ -10,13 +10,17 @@ export declare class SdModalContainer {
     private bodyScrollLocked;
     handleKeydown(e: KeyboardEvent): void;
     open(options: ConfirmModalOptions, modalRef: ModalDialogRefLike): Promise<string>;
+    openLoading(options: LoadingModalOptions, modalRef: ModalDialogRefLike): Promise<string>;
     createCustom(element: HTMLElement, options: SdModalCreateOptions, modalRef: ModalDialogRefLike): Promise<string>;
     private attachModalEventListeners;
+    private attachLoadingModalEventListeners;
     private dispatchClose;
     private registerEntry;
     dismissById(id: string, reason?: 'confirm' | 'cancel' | 'close'): Promise<void>;
-    update(id: string, props: Partial<ConfirmModalOptions>): Promise<void>;
+    update(id: string, props: Partial<ConfirmModalOptions> | Partial<LoadingModalOptions>): Promise<void>;
     private createConfirmModal;
+    private createLoadingModal;
+    private applyLoadingProps;
     private applyProps;
     private handleBackdropClick;
     private shakeModal;

package/dist/types/components/sd-number-input/sd-number-input.config.d.ts

@@ -2,7 +2,6 @@ export type NumberInputSize = 'sm' | 'md';
 export declare const NUMBER_INPUT_SIZE_MAP: Record<NumberInputSize, {
     height: string;
     paddingX: string;
-    gap: string;
     radius: string;
     fontSize: string;
     lineHeight: string;

package/dist/types/components/sd-number-input/sd-number-input.d.ts

@@ -11,6 +11,7 @@ export declare class SdNumberInput {
     useDecimal: boolean;
     value?: string | number | null;
     label?: string;
+    labelWidth: string | number;
     addonLabel: string;
     placeholder: string;
     disabled: boolean;

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

@@ -0,0 +1,44 @@
+export declare const RADIO_BUTTON_SIZES: {
+    xs: {
+        height: number;
+        paddingX: number;
+        fontSize: number;
+        lineHeight: number;
+        fontWeight: string;
+        fontFamily: string;
+        textDecoration: string;
+    };
+    sm: {
+        height: number;
+        paddingX: number;
+        fontSize: number;
+        lineHeight: number;
+        fontWeight: string;
+        fontFamily: string;
+        textDecoration: string;
+    };
+};
+export declare const RADIO_BUTTON_LAYOUT: {
+    radius: number;
+    borderWidth: number;
+    groupGap: number;
+};
+export declare const RADIO_BUTTON_COLORS: {
+    border: {
+        default: string;
+        select: string;
+        disabled: string;
+    };
+    bg: {
+        default: string;
+        hover: string;
+        select: string;
+        disabled: string;
+    };
+    content: {
+        default: string;
+        hover: string;
+        select: string;
+        disabled: string;
+    };
+};

package/dist/types/components/{sd-radio-button-group/sd-radio-button-group.d.ts → sd-radio-button/sd-radio-button.d.ts}

@@ -5,10 +5,10 @@ export type RadioOption = {
     value: RadioValue;
     disabled?: boolean;
 };
-export declare class SdRadioButtonGroup {
+export declare class SdRadioButton {
     value: RadioValue;
     options: RadioOption[];
-    size: 'sm' | 'md';
+    size: 'xs' | 'sm';
     disabled: boolean;
     name?: string;
     change: EventEmitter<RadioValue>;
@@ -17,6 +17,7 @@ export declare class SdRadioButtonGroup {
     private isOptionDisabled;
     private getButtonClasses;
     private getGroupClasses;
-    private groupName;
+    private _groupName?;
+    private get groupName();
     render(): any;
 }

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

@@ -57,6 +57,7 @@ export declare class SdSelect extends BaseDropdownEvent {
     clearable: boolean;
     searchable: boolean;
     label: string;
+    labelWidth: string | number;
     addonLabel: string;
     icon?: IconProps;
     labelTooltip: string;

package/dist/types/components/sd-select-group/sd-select-group.d.ts

@@ -19,6 +19,7 @@ export declare class SdSelectGroup extends BaseDropdownEvent {
     clearable: boolean;
     searchable: boolean;
     label: string;
+    labelWidth: string | number;
     addonLabel: string;
     icon?: IconProps;
     labelTooltip: string;

package/dist/types/components/sd-select-multiple/sd-select-multiple.d.ts

@@ -20,6 +20,7 @@ export declare class SdSelectMultiple extends BaseDropdownEvent {
     useAll: boolean;
     useCheckbox: boolean;
     label: string;
+    labelWidth: string | number;
     icon?: IconProps;
     labelTooltip: string;
     labelTooltipProps: SdTooltipProps | null;