@sellmate/design-system 1.0.67 → 1.0.69

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

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-BpT5VmKY.js');
+var index = require('./index-B2QvhbC3.js');
 var index$1 = require('./index-BUvXpPc3.js');
-var component_textinput = require('./component.textinput-C4SsDjA1.js');
+var component_textinput = require('./component.textinput-BpXDeZPD.js');
 
 const TEXTAREA_TOKENS = {
     paddingX: component_textinput.inputTokens.textinput.sm.paddingX,
@@ -43,6 +43,7 @@ const SdTextarea = class {
     label = '';
     labelWidth = '';
     addonLabel = '';
+    addonAlign = 'start';
     hint = '';
     errorMessage = '';
     icon = undefined;
@@ -129,7 +130,7 @@ const SdTextarea = class {
             '--sd-system-size-field-sm-height': 'auto',
             '--sd-system-radius-field-sm': `${TEXTAREA_TOKENS.radius}px`,
         };
-        return (index.h("sd-field", { key: '6b2360f01a356db14659e1ebc53d8c4d8c4f671f', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, index.h("div", { key: 'f43279ee861d3502c9130f1de0c47cba61ad0866', class: "sd-textarea__content" }, index.h("textarea", { key: '0600b577417019ae36a0daba637168ebc5685220', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, autofocus: this.autoFocus, maxLength: this.maxLength, rows: this.rows, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.textareaStyle }))));
+        return (index.h("sd-field", { key: '9f456eb1b18d0d83fb40f0b6b66125d587bcb4c6', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, index.h("div", { key: 'f201962ed64908c97d24923b62e97c33b356170a', class: "sd-textarea__content" }, index.h("textarea", { key: '826e4b3c4743dbf16387b68317bd09ca7c75746d', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, autofocus: this.autoFocus, maxLength: this.maxLength, rows: this.rows, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.textareaStyle }))));
     }
     static get watchers() { return {
         "value": [{

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BpT5VmKY.js');
+var index = require('./index-B2QvhbC3.js');
 var constants = require('./constants-DJRV1upE.js');
 
 const sdTheadCss = () => `sd-thead{display:contents}sd-thead *{box-sizing:border-box}.thead{display:table-header-group;height:36px}.thead--sticky{position:sticky;top:0;z-index:120}.tr{display:table-row;width:100%}.th{display:table-cell;background:#F5FAFF;height:36px;padding:0 16px;font-weight:500;vertical-align:middle;border-bottom:1px solid #E1E1E1;-webkit-user-select:none;user-select:none;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.th--selected{position:relative;width:52px !important;max-width:52px !important;min-width:52px !important;padding:0 10px 0 24px;text-align:left}.th--selected sd-checkbox label{position:relative}.th--selected sd-checkbox label:before{content:"";position:absolute;inset:-6px}.th.sticky-left{position:sticky;background-color:#F5FAFF;z-index:110 !important;left:var(--sticky-left-offset, 0)}.th.sticky-right{position:sticky;background-color:#F5FAFF;z-index:110 !important;right:var(--sticky-right-offset, 0)}.th.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}.th.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}.th.sticky-left-edge.is-scrolled-left{overflow:visible}.th.sticky-left-edge.is-scrolled-left:after{opacity:1}.th.sticky-right-edge.is-scrolled-right{overflow:visible}.th.sticky-right-edge.is-scrolled-right:after{opacity:1}.th__content{display:flex;flex-flow:row nowrap;align-items:center;gap:4px}.th__content--left{justify-content:flex-start}.th__content--center{justify-content:center}.th__content--right{justify-content:flex-end}.th__content--label{white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.th__resizer{position:absolute;top:50%;right:0;transform:translateY(-50%);width:4px;height:16px;cursor:col-resize;z-index:3;border-left:1px solid #CCCCCC;border-right:1px solid #CCCCCC}.th__resizer--left{right:auto;left:0}`;
@@ -136,16 +136,16 @@ const SdThead = class {
         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: '5ccdb84a8876df2af0d73424be3f5a7fdb1979a5', slot: `${this.tableId}-head` }, index.h("thead", { key: '6517b6f3baf56173f27b8194de7bd1de625ea304', class: {
+        return (index.h(index.Host, { key: '97badde9634e2e7363eace5a402fc49a587459c3', slot: `${this.tableId}-head` }, index.h("thead", { key: 'd1ce731f6082679d8d61f4b74ac122f28f344909', class: {
                 'thead': true,
                 'thead--sticky': this._stickyHeader,
-            } }, index.h("tr", { key: '8a9c268a3195376a8c9986411b29724896ff36d8', class: "tr" }, this._selectable && (index.h("th", { key: 'f0fae86684bbef173019ddb1dd23a5f57956fb04', class: {
+            } }, index.h("tr", { key: 'd0f8b1e8b8a7174cc9b39fabf782eddf2e2accaa', class: "tr" }, this._selectable && (index.h("th", { key: 'c422f5bd9f9a045785d2d91dd9e2dee6e8f91185', class: {
                 'th': true,
                 'th--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: 'cde120ec02f8bf03fa869eadbc0d91b4fde8e1ba', value: this.getIsAllChecked(), disabled: !safeRows.length, onSdUpdate: (e) => this.handleSelectAll(e.detail) }))), stickyLeftCols.map((col, idx) => (index.h("th", { key: col.name, class: {
+            }, style: { '--sticky-left-offset': '0px' } }, index.h("sd-checkbox", { key: '32cea740457b21d4d6fd53a8f1c10b505a24a481', value: this.getIsAllChecked(), disabled: !safeRows.length, onSdUpdate: (e) => this.handleSelectAll(e.detail) }))), stickyLeftCols.map((col, idx) => (index.h("th", { key: col.name, class: {
                 'th': true,
                 [`${col.thClass}`]: Boolean(col.thClass),
                 'sticky-left': true,

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

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-BpT5VmKY.js');
+var index = require('./index-B2QvhbC3.js');
 
 const DEFAULT_DURATION = 4000;
 const DEFAULT_MAX_VISIBLE = 3;
 const DEFAULT_GAP = 8;
-const DEFAULT_Z_INDEX = 10000;
+const DEFAULT_Z_INDEX = 999;
 const TRANSITION_DURATION = 400;
 const TRANSITION_FALLBACK_BUFFER = 100;
 const COLLAPSED_SCALE_STEP = 0.05;
@@ -234,7 +234,7 @@ const SdToastContainer = class {
         const activeToasts = toasts.filter(t => t.state !== 'exiting').reverse();
         const indexMap = new Map();
         activeToasts.forEach((t, i) => indexMap.set(t.id, i));
-        return (index.h("div", { key: '8a63cb5f1e62fea7f562eac000743bb59ec69fda', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
+        return (index.h("div", { key: '4660dd2f2626d391bbcca7da59e16e6c4204d80d', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
                 this.expanded = true;
                 this.pauseTimers();
             }, onMouseLeave: () => {

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BpT5VmKY.js');
+var index = require('./index-B2QvhbC3.js');
 
 const toast = {
 	icon: "16",
@@ -57,10 +57,10 @@ const SdToast = class {
     render() {
         const typeConfig = TOAST_TYPE_CONFIG[this.type] ?? TOAST_TYPE_CONFIG.default;
         const iconSize = Number(TOAST_LAYOUT.iconSize);
-        return (index.h("div", { key: '0ae35299510680fdb91dcb7c6ef841cba1287c1a', style: {
+        return (index.h("div", { key: 'a041d5561d09ef56f4afd722e141b0a2e3a9453f', style: {
                 '--sd-toast-bg': typeConfig.bg,
                 '--sd-toast-text': typeConfig.content,
-            } }, index.h("div", { key: 'c0b4fb4e820e7e2435ce5516cebab1c3132dfe75', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: '7c0b531a069b6fde7895b886603ceaf54f0a0a50', class: "sd-toast__icon" }, index.h("sd-icon", { key: '059de7e478b66a7e12c3e0560341311333e83b90', name: this.icon, size: iconSize, color: typeConfig.content }))), index.h("div", { key: '46911d81bc1cd24b541b6da71ec45a90237ea5a9', class: "sd-toast__content" }, index.h("span", { key: 'e5e80c82cda36042ad078bf35d2fdcf1d8556497', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: '95882e33b93d391fc00a92540c5f85d1235c0b8a', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.useClose && (index.h("sd-ghost-button", { key: 'e65eede91a5160ec3a0f4cab9f1f4bb02dc695f3', class: "sd-toast__close", icon: "close", intent: this.type === 'caution' ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
+            } }, index.h("div", { key: 'bf2a397484ec5938c0442ee0ee98f0ce00ad1ec0', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (index.h("div", { key: '4ea8468b31909e3aea1a293c393621e1815dea5c', class: "sd-toast__icon" }, index.h("sd-icon", { key: '407a0be71e36a6dca30f5cfb300f2c9ebf6b32c2', name: this.icon, size: iconSize, color: typeConfig.content }))), index.h("div", { key: '756ca54899ec4d6c3543f8fb1f681d09181674c9', class: "sd-toast__content" }, index.h("span", { key: 'f0e66dbd5e99bc3921a354ac51294a3c29fe9ea0', class: "sd-toast__message" }, this.message)), this.link && (index.h("a", { key: '9f4a1a938b7559b03d7dd824c7f2fdbcb093e6fe', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.useClose && (index.h("sd-ghost-button", { key: '03d64765901bc8a93f09642b09ae733fa9da0db4', class: "sd-toast__close", icon: "close", intent: this.type === 'caution' ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
     }
 };
 SdToast.style = sdToastCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BpT5VmKY.js');
+var index = require('./index-B2QvhbC3.js');
 
 const toggle = {
 	height: "28",
@@ -120,7 +120,7 @@ const SdToggle = class {
             '--sd-toggle-content-select': TOGGLE_COLORS.content.select,
             '--sd-toggle-content-disabled': TOGGLE_COLORS.content.disabled,
         };
-        return (index.h("label", { key: 'ec38c0ca834e5208d2cc5eb1fc32f959eacbb46d', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, index.h("input", { key: '2b47036dbd0cb880a7b7973523c985ae13e0cf22', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (index.h("label", { key: '1e0864450b0447ec08643290d1050e4d0ee0c4a4', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, index.h("input", { key: '7e44e8569de24839c41e8c28f579923e3a837366', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
 };
 SdToggle.style = sdToggleCss();

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BpT5VmKY.js');
+var index = require('./index-B2QvhbC3.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}`;
@@ -131,13 +131,13 @@ const SdTr = class {
         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: {
+        return (index.h(index.Host, { key: '3bc910f3afa801d7824eee2e73456ef152c7dc93', style: { display: this.isVisible ? '' : 'none' } }, index.h("tr", { key: '93b1f4113ae63aa1c0cf79addaa9e8d15c9e8287', class: "tr" }, this._selectable && (index.h("td", { key: '0caba47c216126f4b7407dfe26afb9f0c75f6450', 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: {
+            }, style: { '--sticky-left-offset': '0px' } }, index.h("sd-checkbox", { key: '2e41b3902f489877b624266e588221698aaa8f12', 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,

package/dist/cjs/system-C89o3A9Z.js

@@ -0,0 +1,16 @@
+'use strict';
+
+const color = {
+	bg: {
+		accent: {
+			"default": "#0075FF"}},
+	content: {
+		primary: "#222222",
+		secondary: "#555555",
+		inverse: "#FFFFFF"
+	}};
+var systemTokens = {
+	color: color
+};
+
+exports.systemTokens = systemTokens;

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BpT5VmKY.js');
+var index = require('./index-B2QvhbC3.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}`;
 
@@ -80,7 +80,7 @@ const DataTable = class {
         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' }))));
+        return (index.h("div", { key: 'eb6246d49bb46a1c2b2b9d93cff90e7c0d6788b4', class: "table-wrapper" }, index.h("table", { key: '584d752e51f252f2dd7a29868ae4300b55c47065', class: { 'data-table': true, 'bordered': this.bordered, 'striped': this.striped } }, index.h("thead", { key: 'fd35de9ad1cb79cf77ab9f7a806d2d7258d8b11b' }, index.h("tr", { key: '39a42d9fc76571aa5ef6073ec554471d5fd1b4c1' }, this.columns.map(column => (index.h("th", { key: column.field, style: { width: column.width } }, this.renderHeaderContent(column)))))), index.h("tbody", { key: '5c3a2b5853f619666b20145e0f7a221c75969071' }, 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: 'bbbd15c2d1b517774340dbcdfb59338f260df21b', class: "templates-slot", hidden: true }, index.h("slot", { key: '28733f09dd4a90976d9bb60102039981c736cf87' }))));
     }
     static get watchers() { return {
         "columns": [{

package/dist/cjs/{tooltipArrow-C9i0ZsG_.js → tooltipArrow-Xkv-p1bY.js}

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

package/dist/collection/collection-manifest.json

@@ -6,6 +6,7 @@
     "components/sd-date-box/sd-date-box.js",
     "components/sd-date-range-picker/sd-date-range-picker.js",
     "components/sd-form/sd-form.js",
+    "components/sd-guide/sd-guide.js",
     "components/sd-radio/sd-radio.js",
     "components/sd-radio-button/sd-radio-button.js",
     "components/sd-radio-group/sd-radio-group.js",
@@ -18,6 +19,7 @@
     "components/sd-barcode-input/sd-barcode-input.js",
     "components/sd-button-v2/sd-button-v2.js",
     "components/sd-card/sd-card.js",
+    "components/sd-chip/sd-chip.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",
@@ -30,7 +32,6 @@
     "components/sd-file-picker/sd-file-picker.js",
     "components/sd-floating-portal/sd-floating-portal.js",
     "components/sd-ghost-button/sd-ghost-button.js",
-    "components/sd-guide/sd-guide.js",
     "components/sd-icon/sd-icon.js",
     "components/sd-input/sd-input.js",
     "components/sd-loading-container/sd-loading-container.js",

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

@@ -39,7 +39,7 @@ export class SdActionModal {
         if (this.height != null && this.height !== '') {
             sizeStyle.height = typeof this.height === 'number' ? `${this.height}px` : this.height;
         }
-        return (h("div", { key: 'e741d601fd1c079ebee5b0c527bdf9ec62c43e65', class: "sd-action-modal", style: { ...cssVars, ...sizeStyle } }, h("header", { key: '9a083fe0d0f8d2b9509cb80af2e8091f4cb23c26', class: "sd-action-modal__header" }, h("h2", { key: '1c91eecc04e5c70267ab571a5a7e8dab8fc97fa4', class: "sd-action-modal__title" }, this.modalTitle), h("div", { key: '67eba3fbada5580c5741387248d803d0299612e2', class: "sd-action-modal__header-sub" }, h("slot", { key: '769583cdfdb8c5d1e2eb2bd1c240c9956f1530e3', name: "header-sub-title" })), h("sd-ghost-button", { key: '05cb596931da687dd2fbf961bdbe116b0a83ee87', class: "sd-action-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), h("div", { key: 'ecf3346b28bdf29d13fedb1d58f2119af73932a2', class: "sd-action-modal__body" }, h("slot", { key: '276aa6ced63b887cda3b8a9790b4d5064763f556', name: "body" })), (this.buttonProps != null || this.buttonProps != undefined) && (h("footer", { key: 'fcf62d04efe0cfa46c3ceadda2314606a1e3588c', class: "sd-action-modal__footer" }, h("div", { key: '61948bdf02737aed99420533f5fb9ab4e28be676', class: "sd-action-modal__footer-sub" }, h("slot", { key: '761a6a38ba2a86f932564a7d1e03e3277f9f917b', name: "bottom-sub-content" })), h("sd-button-v2", { key: '242531f04700bea06c93c25a7eaf3e0b03dd628d', ...DEFAULT_BUTTON_PROPS, ...this.buttonProps, onSdClick: () => this.ok.emit() })))));
+        return (h("div", { key: '85e107137d01ef0a8fd8a839d7223c5163cb1a30', class: "sd-action-modal", style: { ...cssVars, ...sizeStyle } }, h("header", { key: '00d31be3a53866ecb5b72e76550c9501cdf6a106', class: "sd-action-modal__header" }, h("h2", { key: '4e4d000f6261ee2147a3d943d5aedc41afe1b30c', class: "sd-action-modal__title" }, this.modalTitle), h("div", { key: 'f6df02450472e1969f5a96822058d2384af78a8a', class: "sd-action-modal__header-sub" }, h("slot", { key: 'ffb45a725e9e3c8ee56534ba3286897eaf33b844', name: "header-sub-title" })), h("sd-ghost-button", { key: '26f68005c1b1ae18991a4da802cbfbd027af8536', class: "sd-action-modal__close", icon: "close", ariaLabel: "close", onClick: () => this.close.emit() })), h("div", { key: 'ebc57d5a90530acf465fef3866d63d95e8bf8311', class: "sd-action-modal__body" }, h("slot", { key: 'a55744951a9812373adabbb7d3db8c06b25f5c72', name: "body" })), (this.buttonProps != null || this.buttonProps != undefined) && (h("footer", { key: '1aef0ac810ba08682c9b8cea47a48e4679a17ee0', class: "sd-action-modal__footer" }, h("div", { key: 'eeeec98e930aa71fcfdd28a1d76a842083c6a185', class: "sd-action-modal__footer-sub" }, h("slot", { key: '7015d9593c5567824f40ab4c60ca2be8ac5f5989', name: "bottom-sub-content" })), h("sd-button-v2", { key: 'c35ea44b195fd7725cb914cf3f04db9389abdfe3', ...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: '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)));
+        return (h("div", { key: 'a4b84e172a57763fbef2feedaf52c1e8c219250d', class: "sd-badge", style: { '--sd-badge-color': resolvedColor } }, h("div", { key: '723edda0c397241af91ccfc62d14cbfc131456cf', class: "sd-badge__dot" }), h("div", { key: '80415403bea863a62ad5d8139cfcf8951bedee49', 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.js

@@ -6,6 +6,7 @@ export class SdBarcodeInput {
     value = null;
     size = 'sm';
     addonLabel = '';
+    addonAlign = 'start';
     placeholder = '입력해 주세요.';
     disabled = false;
     clearable = false;
@@ -101,7 +102,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: 'bba439856e0cbaedc7b54411dac904f9c845b50c', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, 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: '8553cfb4b5ef9535608abc1f2987ce08970c318a', class: "sd-barcode-input__content" }, h("slot", { key: '93db2b38e8d674230f48e3b9496a7221d8477da6', name: "prefix" }), h("input", { key: '30997bea593052322a2d29fc1e517b00cf19b1fb', 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: '690daa6c1daa6058713ee09b0efe976557cde3ab', name: "suffix" }), this.clearable && this.internalValue && (h("sd-ghost-button", { key: '8ab4e45a23d1b06dc415d969e25ed5ea59540643', icon: "close", ariaLabel: "close", size: "xxs", disabled: this.disabled, class: "sd-barcode-input__clear-icon", onClick: async () => {
+        return (h("sd-field", { key: '876c4e2cd41e62cd5486b7dec5ca1b34d10704b9', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, 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: 'e01920c2565e1f4487ccd516f864b9f68fa0cfd8', class: "sd-barcode-input__content" }, h("slot", { key: 'd7be8745d6b0f510a11c88e1ca629f78fbc77348', name: "prefix" }), h("input", { key: 'f214f2930fc54a0466a10ce295e46885352e0e88', 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: 'a226a2c7ec43951ab9f048f8da25542784233e65', name: "suffix" }), this.clearable && this.internalValue && (h("sd-ghost-button", { key: 'ff7f8853b43401f3bf4be051e69d8c459ca418aa', icon: "close", ariaLabel: "clear", size: "xxs", disabled: this.disabled, class: "sd-barcode-input__clear-icon", onClick: async () => {
                 if (this.disabled)
                     return;
                 this.internalValue = '';
@@ -188,6 +189,33 @@ export class SdBarcodeInput {
                 "attribute": "addon-label",
                 "defaultValue": "''"
             },
+            "addonAlign": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "FieldAddonAlign",
+                    "resolved": "\"center\" | \"end\" | \"start\"",
+                    "references": {
+                        "FieldAddonAlign": {
+                            "location": "import",
+                            "path": "../sd-field/sd-field.config",
+                            "id": "src/components/sd-field/sd-field.config.ts::FieldAddonAlign",
+                            "referenceLocation": "FieldAddonAlign"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "addon-align",
+                "defaultValue": "'start'"
+            },
             "placeholder": {
                 "type": "string",
                 "mutable": false,

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

@@ -62,13 +62,13 @@ export class SdButtonV2 {
         const hasLabel = Boolean(this.label);
         const iconOnly = !this.label && (Boolean(this.icon) !== Boolean(this.rightIcon));
         const accessibleName = iconOnly && this.ariaLabel.trim() ? this.ariaLabel : undefined;
-        return (h("button", { key: '50bb61cfbf36d2f002b6937603640ea585d42a0e', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type, disabled: this.disabled, "aria-label": accessibleName, style: {
+        return (h("button", { key: '61dde2ec51ac5099909d38a7420568bfd4fcde0b', class: this.getButtonClasses(preset, config.size, hasLabel, iconOnly), type: this.type, disabled: this.disabled, "aria-label": accessibleName, style: {
                 '--sd-button-v2-bg': config.color,
                 '--sd-button-v2-bg-hover': PRESET_HOVER_BACKGROUNDS[preset],
                 '--sd-button-v2-border': PRESET_BORDER_COLORS[preset],
                 '--sd-button-v2-content': PRESET_CONTENT_COLORS[preset],
                 '--sd-button-v2-accent': BUTTON_FOCUS_RING_COLOR,
-            }, onClick: this.handleClick }, h("span", { key: 'a1f34337cc33a6eba29547ff7df39109739bb06c', class: "sd-button-v2__content" }, this.icon && (h("sd-icon", { key: 'fb4b8c87c57979f3c39eaa893626e6c3f5e56b08', class: "sd-button-v2__icon", name: this.icon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-v2-current-icon)" })), this.label && h("span", { key: '00e78a17818e7c286b33ca45e37eac78102cf590', class: "sd-button-v2__label" }, this.label), this.rightIcon && (h("sd-icon", { key: '9e146585df41a6784a09e8239b28c8e8b4f30516', class: "sd-button-v2__icon sd-button-v2__icon--right", name: this.rightIcon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-v2-current-icon)" })))));
+            }, onClick: this.handleClick }, h("span", { key: 'dc433a47ace0d074503a2c0e5c47c4c8bfa6cb8c', class: "sd-button-v2__content" }, this.icon && (h("sd-icon", { key: '95e941490d78f1950f9f7759112fb714f191a504', class: "sd-button-v2__icon", name: this.icon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-v2-current-icon)" })), this.label && h("span", { key: 'c13f3fb5bec105d7737ef1f9db7dcd4ca93ce5be', class: "sd-button-v2__label" }, this.label), this.rightIcon && (h("sd-icon", { key: 'fb20dde72eaab014ae0e658477db228c23eddea3', class: "sd-button-v2__icon sd-button-v2__icon--right", name: this.rightIcon, size: BUTTON_ICON_SIZES[config.size], color: "var(--sd-button-v2-current-icon)" })))));
     }
     static get is() { return "sd-button-v2"; }
     static get originalStyleUrls() {

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

@@ -3,7 +3,7 @@ export class SdCard {
     bordered = false;
     sdClass = '';
     render() {
-        return (h(Fragment, { key: 'dd37653555ffeab3b249575c8a1cbe9aa70498b1' }, h("div", { key: 'eb0cea509b62fe1942d8ddfb955fee920b5c51a5', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, h("slot", { key: 'a792a49e58b1b1756f11d0bb6e7441674c63455e' }))));
+        return (h(Fragment, { key: 'ce09898d7396b093f0f292700d5d6bd8b6249ad3' }, h("div", { key: 'df584d42ecf16b8ea3618238fb58e77cb7e80d9e', class: `sd-card ${this.bordered ? 'sd-card--bordered' : ''} ${this.sdClass}` }, h("slot", { key: 'e031effb829371ca8c001bcc5596b4c9d01c8951' }))));
     }
     static get is() { return "sd-card"; }
     static get originalStyleUrls() {

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

@@ -0,0 +1,37 @@
+import chipTokens from "../../tokens/generated/component.chip.json";
+export const CHIP_LAYOUT = {
+    height: `${chipTokens.chip.height}px`,
+    paddingX: `${chipTokens.chip.paddingX}px`,
+    gap: `${chipTokens.chip.gap}px`,
+    radius: `${chipTokens.chip.radius}px`,
+    borderWidth: `${chipTokens.chip.border.width}px`,
+};
+export const CHIP_COLORS = {
+    bg: {
+        default: chipTokens.chip.bg.default,
+        error: chipTokens.chip.bg.error,
+        focus: chipTokens.chip.bg.focus,
+    },
+    content: {
+        default: chipTokens.chip.content.default,
+        error: chipTokens.chip.content.error,
+        focus: chipTokens.chip.content.focus,
+    },
+    border: {
+        focus: chipTokens.chip.border.focus,
+    },
+};
+export const CHIP_TYPOGRAPHY = {
+    default: {
+        fontFamily: chipTokens.chip.typography.default.fontFamily,
+        fontSize: `${chipTokens.chip.typography.default.fontSize}px`,
+        fontWeight: chipTokens.chip.typography.default.fontWeight,
+        lineHeight: `${chipTokens.chip.typography.default.lineHeight}px`,
+    },
+    focus: {
+        fontFamily: chipTokens.chip.typography.focus.fontFamily,
+        fontSize: `${chipTokens.chip.typography.focus.fontSize}px`,
+        fontWeight: chipTokens.chip.typography.focus.fontWeight,
+        lineHeight: `${chipTokens.chip.typography.focus.lineHeight}px`,
+    },
+};

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

@@ -0,0 +1,56 @@
+sd-chip {
+  display: inline-flex;
+  width: fit-content;
+  height: fit-content;
+}
+sd-chip .sd-chip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--sd-chip-gap);
+  height: var(--sd-chip-height);
+  padding: 0 var(--sd-chip-padding-x);
+  border-radius: var(--sd-chip-radius);
+  background: var(--sd-chip-bg);
+  color: var(--sd-chip-content);
+  border: var(--sd-chip-border-width) solid var(--sd-chip-border-color);
+  font-family: var(--sd-chip-font-family);
+  font-size: var(--sd-chip-font-size);
+  font-weight: var(--sd-chip-font-weight);
+  line-height: var(--sd-chip-line-height);
+  box-sizing: border-box;
+  white-space: nowrap;
+  -webkit-user-select: none;
+  user-select: none;
+}
+sd-chip .sd-chip--editable:not(.sd-chip--focus) {
+  cursor: text;
+}
+sd-chip .sd-chip--disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+sd-chip .sd-chip__label {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+}
+sd-chip .sd-chip__input {
+  display: inline-block;
+  min-width: 1ch;
+  outline: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  white-space: nowrap;
+  cursor: text;
+}
+sd-chip .sd-chip__input:empty::before {
+  content: attr(data-placeholder);
+  color: inherit;
+  opacity: 0.6;
+  pointer-events: none;
+}
+sd-chip .sd-chip__remove {
+  flex-shrink: 0;
+}