@sellmate/design-system 1.0.61 → 1.0.63

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

@@ -0,0 +1,171 @@
+'use strict';
+
+var index = require('./index-nsQP24mV.js');
+var constants = require('./constants-DJRV1upE.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) {
+        index.registerInstance(this, hostRef);
+    }
+    get el() { return index.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(constants.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 (index.h(index.Host, { key: 'e0b035db61ba424f4a33cdb470c839cb23c696cc', style: { display: this.isVisible ? '' : 'none' } }, index.h("tr", { key: '224e8c360e01f81dee44d8c93f9e6724c3e87b4f', class: "tr" }, this._selectable && (index.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' } }, index.h("sd-checkbox", { key: '29ad82d0b043964fdfc68cb250deddeda8029b39', value: this.isSelected(), onSdUpdate: () => this.handleSelect() }))), stickyLeftCols.map((col, idx) => (index.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) }, index.h("slot", { name: `${this.tableId}-${typeof col.field === 'string' ? col.field : col.name}-${this.rowKey}` }, index.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 (index.h("td", { key: col.name, class: {
+                    td: true,
+                    [`td--${col.align || 'left'}`]: true,
+                    [`${col.tdClass}`]: Boolean(col.tdClass),
+                }, style: this.getStickyStyle(actualColIdx) }, index.h("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, index.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 (index.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) }, index.h("slot", { name: `${this.tableId}-${fieldName}-${this.rowKey}` }, index.h("span", null, this.getCellValue(col)))));
+        }))));
+    }
+};
+SdTr.style = sdTrCss();
+
+exports.sd_tr = SdTr;

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

@@ -0,0 +1,96 @@
+'use strict';
+
+var index = require('./index-nsQP24mV.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) {
+        index.registerInstance(this, hostRef);
+        this.tableReady = index.createEvent(this, "tableReady", 7);
+    }
+    get el() { return index.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 index.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 index.h("span", { class: "cell-content", innerHTML: html });
+        }
+        return index.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 index.h("span", { innerHTML: html });
+        }
+        const template = this.el.querySelector(`[slot="header-${column.field}"]`);
+        if (template) {
+            return index.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 (index.h("div", { key: '6d2ff3676d082540cc70939363b0f07ff7252e8c', class: "table-wrapper" }, index.h("table", { key: '3995aead06dfce42ea4e918486b1473c1740b96e', class: { 'data-table': true, 'bordered': this.bordered, 'striped': this.striped } }, index.h("thead", { key: '9cbe03cbe1f69d7546ba5037489d20d85bd4a534' }, index.h("tr", { key: '7ab64e3e3ef214a19a010501d3ec9778c5594990' }, this.columns.map(column => (index.h("th", { key: column.field, style: { width: column.width } }, this.renderHeaderContent(column)))))), index.h("tbody", { key: '660707fb4d5075b98698718e8cfa8ed903f3d1e2' }, this.rows.map((row, rowIndex) => (index.h("tr", { key: rowIndex }, this.columns.map(column => (index.h("td", { key: `${rowIndex}-${column.field}` }, this.renderCellContent(column, row, rowIndex))))))))), index.h("div", { key: '9aabf030b814c340b2f4a1d66644516ed320f31b', class: "templates-slot", hidden: true }, index.h("slot", { key: '532e40bf658706a99b57dc89c056d977db3e4d83' }))));
+    }
+    static get watchers() { return {
+        "columns": [{
+                "dataChanged": 0
+            }],
+        "rows": [{
+                "dataChanged": 0
+            }]
+    }; }
+};
+DataTable.style = tableTestCss();
+
+exports.table_test = DataTable;

package/dist/cjs/{tooltipArrow-CRCpqOYA.js → tooltipArrow-DhevfDPX.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BQt-JC6r.js');
+var index = require('./index-nsQP24mV.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/__mocks__/nanoid-non-secure.js

@@ -0,0 +1,13 @@
+let counter = 0;
+export const nanoid = (size = 21) => {
+    counter += 1;
+    const base = `test-nanoid-${counter}`;
+    return base.padEnd(size, '0').slice(0, size);
+};
+export const customAlphabet = (_alphabet, size = 21) => {
+    return () => {
+        counter += 1;
+        const base = `test-custom-${counter}`;
+        return base.padEnd(size, '0').slice(0, size);
+    };
+};

package/dist/collection/__mocks__/nanoid.js

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

package/dist/collection/collection-manifest.json

@@ -7,17 +7,18 @@
     "components/sd-date-range-picker/sd-date-range-picker.js",
     "components/sd-form/sd-form.js",
     "components/sd-radio/sd-radio.js",
-    "components/sd-radio-button-group/sd-radio-button-group.js",
+    "components/sd-radio-button/sd-radio-button.js",
     "components/sd-radio-group/sd-radio-group.js",
     "components/sd-select/sd-select.js",
     "components/sd-select-multiple-group/sd-select-multiple-group.js",
-    "components/sd-table/sd-table.js",
     "components/sd-tabs/sd-tabs.js",
+    "components/table-test/table-test.js",
     "components/sd-action-modal/sd-action-modal.js",
     "components/sd-badge/sd-badge.js",
     "components/sd-barcode-input/sd-barcode-input.js",
     "components/sd-button-v2/sd-button-v2.js",
     "components/sd-card/sd-card.js",
+    "components/sd-circle-progress/sd-circle-progress.js",
     "components/sd-confirm-modal/sd-confirm-modal.js",
     "components/sd-date-picker/sd-date-picker.js",
     "components/sd-date-picker/sd-date-picker-calendar/sd-date-picker-calendar.js",
@@ -32,7 +33,8 @@
     "components/sd-guide/sd-guide.js",
     "components/sd-icon/sd-icon.js",
     "components/sd-input/sd-input.js",
-    "components/sd-loading-spinner/sd-loading-spinner.js",
+    "components/sd-loading-container/sd-loading-container.js",
+    "components/sd-loading-modal/sd-loading-modal.js",
     "components/sd-modal-container/sd-modal-container.js",
     "components/sd-number-input/sd-number-input.js",
     "components/sd-pagination/sd-pagination.js",
@@ -49,13 +51,18 @@
     "components/sd-select-v2/sd-select-v2-list-item-search/sd-select-v2-list-item-search.js",
     "components/sd-select-v2/sd-select-v2-listbox/sd-select-v2-listbox.js",
     "components/sd-select-v2/sd-select-v2-trigger/sd-select-v2-trigger.js",
+    "components/sd-switch/sd-switch.js",
+    "components/sd-table/sd-table.js",
+    "components/sd-table/sd-tbody/sd-tbody.js",
+    "components/sd-table/sd-td/sd-td.js",
+    "components/sd-table/sd-thead/sd-thead.js",
+    "components/sd-table/sd-tr/sd-tr.js",
     "components/sd-tag/sd-tag.js",
     "components/sd-text-link/sd-text-link.js",
     "components/sd-textarea/sd-textarea.js",
     "components/sd-toast/sd-toast.js",
     "components/sd-toast-container/sd-toast-container.js",
     "components/sd-toggle/sd-toggle.js",
-    "components/sd-toggle-button/sd-toggle-button.js",
     "components/sd-tooltip/sd-tooltip.js"
   ],
   "mixins": [],

package/dist/collection/components/sd-action-modal/sd-action-modal.js

@@ -29,7 +29,7 @@ export class SdActionModal {
             '--sd-action-modal-title-font-size': `${ACTION_MODAL_TITLE.fontSize}px`,
             '--sd-action-modal-title-line-height': `${ACTION_MODAL_TITLE.lineHeight}px`,
         };
-        return (h("div", { key: 'a49f78c558f14d89b18569388c9f63899b2d8584', class: "sd-action-modal", style: cssVars }, h("header", { key: 'b03ed5b4eed300a78711eae2b7491e46340c4f61', class: "sd-action-modal__header" }, h("h2", { key: '05a21b4f9fb2be6149c46de6f3a2f1ea6e33e95d', class: "sd-action-modal__title" }, this.modalTitle), h("div", { key: '641524d22a46c5da6c8ed1265a4f6bf311be4603', class: "sd-action-modal__header-sub" }, h("slot", { key: 'b45fc41c0d895beadcd67314d56fb36f361f24b6', name: "header-sub-title" })), h("sd-ghost-button", { key: 'aaeb806bab195f18cfa9c7af87c47ca8e63a6716', class: "sd-action-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), h("div", { key: '248af7a4bb179a9077a54534cb7c590eacde29fb', class: "sd-action-modal__body" }, h("slot", { key: 'af91ab4ad191c29ed3e72e05e6265d48781ed2e9', name: "body" })), h("footer", { key: '938ccf2283d70a152c598c03e62af8ff17192f74', class: "sd-action-modal__footer" }, h("div", { key: '28e18ee211a61cec38259459d9deb3a80e99d4ff', class: "sd-action-modal__footer-sub" }, h("slot", { key: 'e3f2cafeb9978cb46f94c09692a924544cf1630a', name: "bottom-sub-content" })), h("sd-button-v2", { key: '765bc516e06d757c728f5d68b371c07061be61e0', ...DEFAULT_BUTTON_PROPS, ...this.buttonProps, onSdClick: () => this.ok.emit() }))));
+        return (h("div", { key: 'b306dc102137e9b76faeeb19587dce32d670163c', class: "sd-action-modal", style: cssVars }, h("header", { key: 'e6b9699e9943d1f4001b4cd23f99975474c3e86e', class: "sd-action-modal__header" }, h("h2", { key: '4d30b98d01a191e4bdc3fb1ff772483dfd3a8397', class: "sd-action-modal__title" }, this.modalTitle), h("div", { key: 'f1083fe5c2643d09dc4bad4c50064ffda2db65ab', class: "sd-action-modal__header-sub" }, h("slot", { key: 'a11c9a13ae11569226ac11fb4be6b782667defeb', name: "header-sub-title" })), h("sd-ghost-button", { key: 'e8a76ecd5d1388a79ac19705d634f40c05e6c2fc', class: "sd-action-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), h("div", { key: 'eb615713a8fbfdd1c40c805e3146fc8341686c72', class: "sd-action-modal__body" }, h("slot", { key: 'd56a3331bc2e94748f150c11dba9e5bd1fad8043', name: "body" })), h("footer", { key: 'd80ad9de537846b01f79588e363bb40e76c64fba', class: "sd-action-modal__footer" }, h("div", { key: '49187df32a64d18b2492995a80ce49df02e9303e', class: "sd-action-modal__footer-sub" }, h("slot", { key: 'd73e66710152c0718d7cab6bbcbd1ab2cebf1f87', name: "bottom-sub-content" })), h("sd-button-v2", { key: '03d2f2a0fa6960983c46e47460f623dfd42811a3', ...DEFAULT_BUTTON_PROPS, ...this.buttonProps, onSdClick: () => this.ok.emit() }))));
     }
     static get is() { return "sd-action-modal"; }
     static get originalStyleUrls() {

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

@@ -5,7 +5,7 @@ export class SdBadge {
     label = '';
     render() {
         const resolvedColor = BADGE_COLOR_MAP[this.color] ?? BADGE_COLOR_MAP.blue;
-        return (h("div", { key: 'ba4351faddf17a489fd4419e265d11279734a475', class: "sd-badge", style: { '--sd-badge-color': resolvedColor } }, h("div", { key: '84fbfecbd5ae7fd68941817891b91b68aee1d9e2', class: "sd-badge__dot" }), h("div", { key: 'ef53189b37a82d8daa3cce3b6cd9052d8352c8e7', class: "sd-badge__label" }, this.label)));
+        return (h("div", { key: '7535760a065f5b0afa35d58c6f3017cacb31f507', class: "sd-badge", style: { '--sd-badge-color': resolvedColor } }, h("div", { key: '1a42bf60039e469b0676b0266f9cbde168e8c27e', class: "sd-badge__dot" }), h("div", { key: '2296c4187b5222849dbe0472d19669376b53350f', class: "sd-badge__label" }, this.label)));
     }
     static get is() { return "sd-badge"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-barcode-input/sd-barcode-input.css

@@ -63,6 +63,9 @@ sd-barcode-input .sd-barcode-input__content .sd-barcode-input__native[disabled]
   cursor: not-allowed;
   color: var(--sd-barcode-input-disabled-color);
 }
+sd-barcode-input .sd-barcode-input__content .sd-barcode-input__native[readonly] {
+  color: var(--sd-barcode-input-disabled-color);
+}
 sd-barcode-input .sd-barcode-input__content .sd-barcode-input__native::placeholder {
   color: var(--sd-barcode-input-placeholder-color);
 }

package/dist/collection/components/sd-barcode-input/sd-barcode-input.js

@@ -100,7 +100,7 @@ export class SdBarcodeInput {
             '--sd-system-radius-field-sm': `${sizeTokens.radius}px`,
             '--sd-system-color-field-bg-default': BARCODE_INPUT_COLORS.bg.barcode,
         };
-        return (h("sd-field", { key: 'b9f59f804f48888086fb49e46e4bcbacaff57205', name: this.name, label: this.label, 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 }, h("label", { key: 'eebe928e88c814817d172688af675b753db96d0b', class: "sd-barcode-input__content" }, h("slot", { key: '5046c4bf4010d4ccbbb91d42e1c83f28674c19e5', name: "prefix" }), h("input", { key: '0887d9587d834624e6a756299d00383a3ffd44b5', name: this.name, ref: el => (this.nativeEl = el), class: `sd-barcode-input__native ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: 'c5140b914ea57234ed6babf26265cc7556f48e15', name: "suffix" }), this.clearable && this.internalValue && (h("sd-ghost-button", { key: '45862d80442c826152bf5a8ac01e598a1222de42', icon: "close", ariaLabel: "close", size: "xxs", disabled: this.disabled, class: "sd-barcode-input__clear-icon", onClick: async () => {
+        return (h("sd-field", { key: 'ea17ae1c54890e57be4f582b3e993f370646b81a', name: this.name, label: this.label, 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, 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("label", { key: 'c96462ac8db261a31681744585a4f396b6561abb', class: "sd-barcode-input__content" }, h("slot", { key: 'fde26b71059c79ef6911ab7a185bacda19b2800a', name: "prefix" }), h("input", { key: 'a015944a0396a2fc3ab1c1ea401f79f25a260764', name: this.name, ref: el => (this.nativeEl = el), class: `sd-barcode-input__native ${this.inputClass}`, type: "text", value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.inputStyle }), h("slot", { key: '45958b98d96ad527cfb9b59491e48e6f5c75e990', name: "suffix" }), this.clearable && this.internalValue && (h("sd-ghost-button", { key: '7bf3f5e3ffcb35def3576e5f07d2af6392ce0c59', icon: "close", ariaLabel: "close", size: "xxs", disabled: this.disabled, class: "sd-barcode-input__clear-icon", onClick: async () => {
                 if (this.disabled)
                     return;
                 this.internalValue = '';

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

@@ -16,7 +16,7 @@ sd-button {
   --sd-button-icon-only-size: var(--sd-button-height);
   text-decoration: none;
   cursor: pointer;
-  border-radius: var(--sd-button-radius-sm, 4px);
+  border-radius: var(--sd-button-button-radius-sm, 4px);
   transition: all 0.2s ease-in-out;
   position: relative;
   overflow: hidden;
@@ -37,51 +37,51 @@ sd-button {
   text-decoration: var(--sd-button-text-decoration);
 }
 .sd-button--xs {
-  --sd-button-height: var(--sd-button-xs-height, 24px);
-  --sd-button-padding-x: var(--sd-button-xs-padding-x, 8px);
-  --sd-button-gap: var(--sd-button-xs-gap, 4px);
-  --sd-button-font-family: var(--sd-button-xs-typography-font-family, inherit);
-  --sd-button-font-size: var(--sd-button-xs-typography-font-size, 12px);
-  --sd-button-font-weight: var(--sd-button-xs-typography-font-weight, 500);
-  --sd-button-text-decoration: var(--sd-button-xs-typography-text-decoration, none);
+  --sd-button-height: var(--sd-button-button-xs-height, 24px);
+  --sd-button-padding-x: var(--sd-button-button-xs-padding-x, 8px);
+  --sd-button-gap: var(--sd-button-button-xs-gap, 4px);
+  --sd-button-font-family: var(--sd-button-button-xs-typography-font-family, inherit);
+  --sd-button-font-size: var(--sd-button-button-xs-typography-font-size, 12px);
+  --sd-button-font-weight: var(--sd-button-button-xs-typography-font-weight, 500);
+  --sd-button-text-decoration: var(--sd-button-button-xs-typography-text-decoration, none);
   --sd-button-label-min-width: var(--sd-button-label-xs-min-width, auto);
-  --sd-button-icon-only-size: var(--sd-button-icon-only-xs-width, var(--sd-button-height));
+  --sd-button-icon-only-size: var(--sd-button-button-icon-only-xs-width, var(--sd-button-height));
   line-height: 20px;
 }
 .sd-button--sm {
-  --sd-button-height: var(--sd-button-sm-height, 28px);
-  --sd-button-padding-x: var(--sd-button-sm-padding-x, 12px);
-  --sd-button-gap: var(--sd-button-sm-gap, 6px);
-  --sd-button-font-family: var(--sd-button-sm-typography-font-family, inherit);
-  --sd-button-font-size: var(--sd-button-sm-typography-font-size, 12px);
-  --sd-button-font-weight: var(--sd-button-sm-typography-font-weight, 500);
-  --sd-button-text-decoration: var(--sd-button-sm-typography-text-decoration, none);
+  --sd-button-height: var(--sd-button-button-sm-height, 28px);
+  --sd-button-padding-x: var(--sd-button-button-sm-padding-x, 12px);
+  --sd-button-gap: var(--sd-button-button-sm-gap, 6px);
+  --sd-button-font-family: var(--sd-button-button-sm-typography-font-family, inherit);
+  --sd-button-font-size: var(--sd-button-button-sm-typography-font-size, 12px);
+  --sd-button-font-weight: var(--sd-button-button-sm-typography-font-weight, 500);
+  --sd-button-text-decoration: var(--sd-button-button-sm-typography-text-decoration, none);
   --sd-button-label-min-width: var(--sd-button-label-sm-min-width, auto);
-  --sd-button-icon-only-size: var(--sd-button-icon-only-sm-width, var(--sd-button-height));
+  --sd-button-icon-only-size: var(--sd-button-button-icon-only-sm-width, var(--sd-button-height));
   line-height: 20px;
 }
 .sd-button--md {
-  --sd-button-height: var(--sd-button-md-height, 34px);
-  --sd-button-padding-x: var(--sd-button-md-padding-x, 20px);
-  --sd-button-gap: var(--sd-button-md-gap, 8px);
-  --sd-button-font-family: var(--sd-button-md-typography-font-family, inherit);
-  --sd-button-font-size: var(--sd-button-md-typography-font-size, 16px);
-  --sd-button-font-weight: var(--sd-button-md-typography-font-weight, 500);
-  --sd-button-text-decoration: var(--sd-button-md-typography-text-decoration, none);
+  --sd-button-height: var(--sd-button-button-md-height, 34px);
+  --sd-button-padding-x: var(--sd-button-button-md-padding-x, 20px);
+  --sd-button-gap: var(--sd-button-button-md-gap, 8px);
+  --sd-button-font-family: var(--sd-button-button-md-typography-font-family, inherit);
+  --sd-button-font-size: var(--sd-button-button-md-typography-font-size, 16px);
+  --sd-button-font-weight: var(--sd-button-button-md-typography-font-weight, 500);
+  --sd-button-text-decoration: var(--sd-button-button-md-typography-text-decoration, none);
   --sd-button-label-min-width: var(--sd-button-label-md-min-width, auto);
-  --sd-button-icon-only-size: var(--sd-button-icon-only-md-width, var(--sd-button-height));
+  --sd-button-icon-only-size: var(--sd-button-button-icon-only-md-width, var(--sd-button-height));
   line-height: 26px;
 }
 .sd-button--lg {
-  --sd-button-height: var(--sd-button-lg-height, 62px);
-  --sd-button-padding-x: var(--sd-button-lg-padding-x, 28px);
-  --sd-button-gap: var(--sd-button-lg-gap, 12px);
-  --sd-button-font-family: var(--sd-button-lg-typography-font-family, inherit);
-  --sd-button-font-size: var(--sd-button-lg-typography-font-size, 18px);
-  --sd-button-font-weight: var(--sd-button-lg-typography-font-weight, 500);
-  --sd-button-text-decoration: var(--sd-button-lg-typography-text-decoration, none);
+  --sd-button-height: var(--sd-button-button-lg-height, 62px);
+  --sd-button-padding-x: var(--sd-button-button-lg-padding-x, 28px);
+  --sd-button-gap: var(--sd-button-button-lg-gap, 12px);
+  --sd-button-font-family: var(--sd-button-button-lg-typography-font-family, inherit);
+  --sd-button-font-size: var(--sd-button-button-lg-typography-font-size, 18px);
+  --sd-button-font-weight: var(--sd-button-button-lg-typography-font-weight, 500);
+  --sd-button-text-decoration: var(--sd-button-button-lg-typography-text-decoration, none);
   --sd-button-label-min-width: var(--sd-button-label-lg-min-width, auto);
-  --sd-button-icon-only-size: var(--sd-button-icon-only-lg-width, var(--sd-button-height));
+  --sd-button-icon-only-size: var(--sd-button-button-icon-only-lg-width, var(--sd-button-height));
   line-height: 30px;
 }
 .sd-button--has-label {
@@ -106,7 +106,7 @@ sd-button {
 }
 .sd-button--outline {
   background: white;
-  border: var(--sd-button-border-width-default, 1px) solid var(--button-color);
+  border: var(--sd-button-button-border-width-default, 1px) solid var(--button-color);
   color: var(--button-color);
 }
 .sd-button--outline::before {
@@ -147,9 +147,9 @@ sd-button {
   z-index: 1;
 }
 .sd-button--disabled {
-  border: var(--sd-button-border-width-default, 1px) solid var(--sd-button-border-disabled, #CCCCCC);
-  background: var(--sd-button-bg-disabled, #E1E1E1);
-  color: var(--sd-button-content-disabled, #888888);
+  border: var(--sd-button-button-border-width-default, 1px) solid var(--sd-button-button-border-disabled, #CCCCCC);
+  background: var(--sd-button-button-bg-disabled, #E1E1E1);
+  color: var(--sd-button-button-text-disabled, #888888);
   cursor: not-allowed !important;
 }
 .sd-button--icon-only {