@sellmate/design-system 1.0.67 → 1.0.68

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-Dcpqhs6V.js';
+import { r as registerInstance, c as createEvent, h } from './index-BGyJgVXm.js';
 
 const toast = {
 	icon: "16",
@@ -55,10 +55,10 @@ const SdToast = class {
     render() {
         const typeConfig = TOAST_TYPE_CONFIG[this.type] ?? TOAST_TYPE_CONFIG.default;
         const iconSize = Number(TOAST_LAYOUT.iconSize);
-        return (h("div", { key: '0ae35299510680fdb91dcb7c6ef841cba1287c1a', style: {
+        return (h("div", { key: 'a041d5561d09ef56f4afd722e141b0a2e3a9453f', style: {
                 '--sd-toast-bg': typeConfig.bg,
                 '--sd-toast-text': typeConfig.content,
-            } }, h("div", { key: 'c0b4fb4e820e7e2435ce5516cebab1c3132dfe75', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (h("div", { key: '7c0b531a069b6fde7895b886603ceaf54f0a0a50', class: "sd-toast__icon" }, h("sd-icon", { key: '059de7e478b66a7e12c3e0560341311333e83b90', name: this.icon, size: iconSize, color: typeConfig.content }))), h("div", { key: '46911d81bc1cd24b541b6da71ec45a90237ea5a9', class: "sd-toast__content" }, h("span", { key: 'e5e80c82cda36042ad078bf35d2fdcf1d8556497', class: "sd-toast__message" }, this.message)), this.link && (h("a", { key: '95882e33b93d391fc00a92540c5f85d1235c0b8a', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.useClose && (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() })))));
+            } }, h("div", { key: 'bf2a397484ec5938c0442ee0ee98f0ce00ad1ec0', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (h("div", { key: '4ea8468b31909e3aea1a293c393621e1815dea5c', class: "sd-toast__icon" }, h("sd-icon", { key: '407a0be71e36a6dca30f5cfb300f2c9ebf6b32c2', name: this.icon, size: iconSize, color: typeConfig.content }))), h("div", { key: '756ca54899ec4d6c3543f8fb1f681d09181674c9', class: "sd-toast__content" }, h("span", { key: 'f0e66dbd5e99bc3921a354ac51294a3c29fe9ea0', class: "sd-toast__message" }, this.message)), this.link && (h("a", { key: '9f4a1a938b7559b03d7dd824c7f2fdbcb093e6fe', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.useClose && (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/esm/sd-toggle.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-Dcpqhs6V.js';
+import { r as registerInstance, c as createEvent, h } from './index-BGyJgVXm.js';
 
 const toggle = {
 	height: "28",
@@ -118,7 +118,7 @@ const SdToggle = class {
             '--sd-toggle-content-select': TOGGLE_COLORS.content.select,
             '--sd-toggle-content-disabled': TOGGLE_COLORS.content.disabled,
         };
-        return (h("label", { key: 'ec38c0ca834e5208d2cc5eb1fc32f959eacbb46d', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, h("input", { key: '2b47036dbd0cb880a7b7973523c985ae13e0cf22', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (h("label", { key: '1e0864450b0447ec08643290d1050e4d0ee0c4a4', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, h("input", { key: '7e44e8569de24839c41e8c28f579923e3a837366', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
 };
 SdToggle.style = sdToggleCss();

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, a as getElement, h, H as Host } from './index-Dcpqhs6V.js';
+import { r as registerInstance, a as getElement, h, H as Host } from './index-BGyJgVXm.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}`;
@@ -129,13 +129,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 (h(Host, { key: 'e0b035db61ba424f4a33cdb470c839cb23c696cc', style: { display: this.isVisible ? '' : 'none' } }, h("tr", { key: '224e8c360e01f81dee44d8c93f9e6724c3e87b4f', class: "tr" }, this._selectable && (h("td", { key: '34afbe37ae3f86054cc6151c31a9de4f20296aef', class: {
+        return (h(Host, { key: '3bc910f3afa801d7824eee2e73456ef152c7dc93', style: { display: this.isVisible ? '' : 'none' } }, h("tr", { key: '93b1f4113ae63aa1c0cf79addaa9e8d15c9e8287', class: "tr" }, this._selectable && (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' } }, h("sd-checkbox", { key: '29ad82d0b043964fdfc68cb250deddeda8029b39', value: this.isSelected(), onSdUpdate: () => this.handleSelect() }))), stickyLeftCols.map((col, idx) => (h("td", { key: col.name, class: {
+            }, style: { '--sticky-left-offset': '0px' } }, h("sd-checkbox", { key: '2e41b3902f489877b624266e588221698aaa8f12', 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,

package/dist/esm/system-C-txBx-h.js

@@ -0,0 +1,14 @@
+const color = {
+	bg: {
+		accent: {
+			"default": "#0075FF"}},
+	content: {
+		primary: "#222222",
+		secondary: "#555555",
+		inverse: "#FFFFFF"
+	}};
+var systemTokens = {
+	color: color
+};
+
+export { systemTokens as s };

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-Dcpqhs6V.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-BGyJgVXm.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}`;
 
@@ -78,7 +78,7 @@ const DataTable = class {
         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' }))));
+        return (h("div", { key: 'eb6246d49bb46a1c2b2b9d93cff90e7c0d6788b4', class: "table-wrapper" }, h("table", { key: '584d752e51f252f2dd7a29868ae4300b55c47065', class: { 'data-table': true, 'bordered': this.bordered, 'striped': this.striped } }, h("thead", { key: 'fd35de9ad1cb79cf77ab9f7a806d2d7258d8b11b' }, h("tr", { key: '39a42d9fc76571aa5ef6073ec554471d5fd1b4c1' }, this.columns.map(column => (h("th", { key: column.field, style: { width: column.width } }, this.renderHeaderContent(column)))))), h("tbody", { key: '5c3a2b5853f619666b20145e0f7a221c75969071' }, 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: 'bbbd15c2d1b517774340dbcdfb59338f260df21b', class: "templates-slot", hidden: true }, h("slot", { key: '28733f09dd4a90976d9bb60102039981c736cf87' }))));
     }
     static get watchers() { return {
         "columns": [{

package/dist/esm/{tooltipArrow-fP-ISMAm.js → tooltipArrow-BAjP9_Hx.js}

@@ -1,4 +1,4 @@
-import { h } from './index-Dcpqhs6V.js';
+import { h } from './index-BGyJgVXm.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/components/sd-chip/sd-chip.config.d.ts

@@ -0,0 +1,36 @@
+export declare const CHIP_LAYOUT: {
+    height: string;
+    paddingX: string;
+    gap: string;
+    radius: string;
+    borderWidth: string;
+};
+export declare const CHIP_COLORS: {
+    bg: {
+        default: string;
+        error: string;
+        focus: string;
+    };
+    content: {
+        default: string;
+        error: string;
+        focus: string;
+    };
+    border: {
+        focus: string;
+    };
+};
+export declare const CHIP_TYPOGRAPHY: {
+    default: {
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+    };
+    focus: {
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+    };
+};

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

@@ -0,0 +1,47 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { ValidatableField } from '../sd-form/sd-form';
+import { Rule } from '../../types/form';
+export declare class SdChip implements ValidatableField {
+    el: HTMLElement;
+    name: string;
+    value: string;
+    error: boolean;
+    disabled: boolean;
+    placeholder: string;
+    rules?: Rule[];
+    internalValue: string;
+    isEditing: boolean;
+    update: EventEmitter<string>;
+    remove: EventEmitter<void>;
+    focus: EventEmitter<void>;
+    blur: EventEmitter<void>;
+    private inputEl?;
+    private draftValue;
+    private shouldInitInput;
+    valueChanged(newValue: string): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    sdValidate(): Promise<boolean>;
+    sdReset(): Promise<void>;
+    sdResetValidate(): Promise<void>;
+    sdResetValidation(): Promise<void>;
+    sdFocus(): Promise<void>;
+    sdGetNativeElement(): Promise<HTMLSpanElement | null>;
+    private enterEditMode;
+    private commitEdit;
+    private cancelEdit;
+    private handleChipClick;
+    private handleChipKeyDown;
+    private handleInputChange;
+    private handleInputKeyDown;
+    private handleInputBlur;
+    private handlePaste;
+    private handleRemoveClick;
+    private syncInputValue;
+    private registerToForm;
+    private unregisterFromForm;
+    componentDidUpdate(): void;
+    private resolveState;
+    render(): any;
+}

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

@@ -0,0 +1,44 @@
+export declare const GUIDE_CONFIG: {
+    readonly gap: `${string}px`;
+    readonly button: {
+        readonly height: `${string}px`;
+        readonly paddingX: `${string}px`;
+        readonly radius: `${string}px`;
+        readonly gap: `${string}px`;
+        readonly fontFamily: string;
+        readonly fontSize: `${string}px`;
+        readonly fontWeight: string;
+        readonly lineHeight: `${string}px`;
+        readonly iconSize: number;
+        readonly iconColorDefault: string;
+        readonly iconColorActive: string;
+        readonly iconColorNotion: string;
+        readonly borderWidth: `${string}px`;
+        readonly borderColor: string;
+        readonly bgDefault: string;
+        readonly bgTip: string;
+        readonly bgNotion: string;
+        readonly textDefault: string;
+        readonly textActive: string;
+    };
+    readonly contents: {
+        readonly paddingX: `${string}px`;
+        readonly paddingY: `${string}px`;
+        readonly gap: `${string}px`;
+        readonly rowGap: `${string}px`;
+        readonly bodyGap: `${string}px`;
+        readonly titleGap: `${string}px`;
+        readonly radius: `${string}px`;
+        readonly iconColor: string;
+        readonly iconColorNotion: string;
+        readonly titleFontFamily: string;
+        readonly titleFontSize: `${string}px`;
+        readonly titleFontWeight: string;
+        readonly titleLineHeight: `${string}px`;
+        readonly bodyFontFamily: string;
+        readonly bodyFontSize: `${string}px`;
+        readonly bodyFontWeight: string;
+        readonly bodyLineHeight: `${string}px`;
+        readonly textColor: string;
+    };
+};

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

@@ -1,19 +1,18 @@
-type GuideType = 'help' | 'pdf' | 'youtube' | 'notion' | 'event';
+export type GuideType = 'tip' | 'notion';
 export declare class SdGuide {
     el: HTMLElement;
     type: GuideType;
     label: string;
     message: string | string[];
-    guideUrl: string;
+    url: string;
     popupTitle: string;
     popupWidth?: number;
     popupShow: boolean;
     private guideRef?;
     private handleClickGuide;
-    private get guideClass();
     closeDropdown: () => void;
+    private get guideStyle();
     render(): any;
     renderListItem(message: string | string[], depth?: number): HTMLElement[];
     renderLi: (message: string, depth: number) => any;
 }
-export {};

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

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

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

@@ -1,34 +1,30 @@
-import type { ConfirmModalOptions, LoadingModalOptions, ModalEntry, ModalDialogRefLike, SdModalCreateOptions } from './sd-modal-container.config';
+import type { ConfirmModalOptions, LoadingModalOptions, ModalDialogRefLike, ModalEntry, SdModalCreateOptions } from './sd-modal-container.config';
 export declare class SdModalContainer {
     el: HTMLElement;
-    entries: ModalEntry[];
+    autoRemove: boolean;
+    entry?: ModalEntry;
     isVisible: boolean;
-    isBackdropVisible: boolean;
-    private contentRef?;
-    private containerDismissTimerId?;
-    private previousBodyOverflow;
-    private bodyScrollLocked;
-    handleKeydown(e: KeyboardEvent): void;
+    backdropVisible: boolean;
+    private layerRef?;
     open(options: ConfirmModalOptions, modalRef: ModalDialogRefLike): Promise<string>;
     openLoading(options: LoadingModalOptions, modalRef: ModalDialogRefLike): Promise<string>;
     createCustom(element: HTMLElement, options: SdModalCreateOptions, modalRef: ModalDialogRefLike): Promise<string>;
+    componentDidRender(): void;
+    disconnectedCallback(): void;
+    dismissById(id: string, reason?: 'confirm' | 'cancel' | 'close'): Promise<void>;
+    update(id: string, props: Partial<ConfirmModalOptions> | Partial<LoadingModalOptions>): Promise<void>;
+    private mountEntry;
     private attachModalEventListeners;
     private attachLoadingModalEventListeners;
     private dispatchClose;
-    private registerEntry;
-    dismissById(id: string, reason?: 'confirm' | 'cancel' | 'close'): Promise<void>;
-    update(id: string, props: Partial<ConfirmModalOptions> | Partial<LoadingModalOptions>): Promise<void>;
+    private requestDismiss;
+    private finalizeDismiss;
     private createConfirmModal;
     private createLoadingModal;
     private applyLoadingProps;
     private applyProps;
     private handleBackdropClick;
     private shakeModal;
-    disconnectedCallback(): void;
-    private setBodyScrollLock;
-    private getTopEntry;
-    private requestDismiss;
-    private finalizeDismiss;
     private waitForModalReady;
     private hasOwnProp;
     private setAttr;

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

@@ -0,0 +1,23 @@
+export declare const PAGINATION_LAYOUT: {
+    height: string;
+    paddingX: string;
+    radius: string;
+    gap: string;
+    moveGap: string;
+    iconSize: number;
+};
+export declare const PAGINATION_TYPOGRAPHY: {
+    fontFamily: string;
+    fontSize: string;
+    lineHeight: string;
+    fontWeightDefault: string;
+    fontWeightSelected: string;
+};
+export declare const PAGINATION_COLORS: {
+    contentDefault: string;
+    contentHover: string;
+    contentSelected: string;
+    bgHover: string;
+    bgSelected: string;
+    iconDefault: string;
+};

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

@@ -4,13 +4,13 @@ export declare class SdPagination {
     lastPage: number;
     simple: boolean;
     pageChange: EventEmitter<number>;
-    private get paginationClasses();
     private get pageNumbers();
     private get buttonWidth();
-    private handlePageChange;
-    private handleGroupChange;
     private get isFirstGroup();
     private get isLastGroup();
+    private handlePageChange;
+    private handleGroupChange;
+    private renderNavButton;
     private renderPrevButtons;
     private renderNextButtons;
     render(): any;

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

@@ -88,7 +88,6 @@ export declare const LIST_ITEM_COLORS: {
 };
 export declare const LIST_BOX_LAYOUT: {
     radius: string;
-    paddingBottom: string;
 };
 export declare const SEARCH_THRESHOLD = 11;
 export declare const SEARCH_DEBOUNCE_MS = 1000;

package/dist/types/components/sd-table/sd-table.stories.helpers.d.ts

@@ -0,0 +1,29 @@
+import { LitElement, nothing, type TemplateResult } from 'lit';
+import type { Row, SdTableColumn, SdTableStickyColumn } from './constants';
+export declare class StoryVirtualTable extends LitElement {
+    static styles: import("lit").CSSResult;
+    columns: SdTableColumn[];
+    rows: Row[];
+    stickyColumn: SdTableStickyColumn;
+    stickyHeader: boolean;
+    selectable: boolean;
+    resizable: boolean;
+    height: string;
+    width: string;
+    rowHeight: number;
+    rowKey: string;
+    renderRow?: (row: Row, absoluteIndex: number) => TemplateResult | typeof nothing;
+    private range;
+    private tableRef;
+    private detachListener?;
+    private syncRafId;
+    constructor();
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    render(): TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'story-virtual-table': StoryVirtualTable;
+    }
+}

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

@@ -19,7 +19,7 @@ export interface ToastEntry {
 export declare const DEFAULT_DURATION = 4000;
 export declare const DEFAULT_MAX_VISIBLE = 3;
 export declare const DEFAULT_GAP = 8;
-export declare const DEFAULT_Z_INDEX = 10000;
+export declare const DEFAULT_Z_INDEX = 999;
 export declare const TRANSITION_DURATION = 400;
 export declare const TRANSITION_FALLBACK_BUFFER = 100;
 export declare const COLLAPSED_SCALE_STEP = 0.05;