@sellmate/design-system 1.10.0 → 1.11.0

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, F as Fragment } from './index-BpO2YWvq.js';
+import { r as registerInstance, h, F as Fragment } from './index-D3yCWQNg.js';
 
 const sdCardCss = () => `sd-card{display:block;height:fit-content}sd-card .sd-card{border-radius:8px;background:white}sd-card .sd-card--bordered{border:1px solid #E1E1E1}`;
 

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-BpO2YWvq.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-D3yCWQNg.js';
 
 const checkbox = {
 	size: "16",

package/dist/esm/sd-chip-input.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-BpO2YWvq.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-D3yCWQNg.js';
 import { n as nanoid } from './index-CCwNgVmC.js';
 import { C as CHIP_TYPOGRAPHY, a as CHIP_COLORS, b as CHIP_LAYOUT } from './sd-chip.config-DDj5KTBF.js';
 

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-BpO2YWvq.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-D3yCWQNg.js';
 import { C as CHIP_TYPOGRAPHY, a as CHIP_COLORS, b as CHIP_LAYOUT } from './sd-chip.config-DDj5KTBF.js';
 
 const sdChipCss = () => `sd-chip{display:inline-flex;width:fit-content;max-width:100%;height:fit-content}sd-chip .sd-chip{display:inline-flex;align-items:center;justify-content:center;gap:var(--sd-chip-gap);max-width:100%;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;overflow:hidden;-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;overflow:hidden;text-overflow:ellipsis}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}`;

package/dist/esm/sd-circle-progress.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-BpO2YWvq.js';
+import { r as registerInstance, h, H as Host } from './index-D3yCWQNg.js';
 import { p as progressTokens } from './component.progress-D1vaasIp.js';
 import { s as systemTokens } from './system-j2khhcHY.js';
 

package/dist/esm/sd-confirm-modal_2.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-BpO2YWvq.js';
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-D3yCWQNg.js';
 import { s as sanitizeInlineHtml } from './sanitize-inline-html-BE4tnQ2Z.js';
 import { m as modalTokens } from './component.modal-DOXMJi-V.js';
 

package/dist/esm/sd-date-box.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-BpO2YWvq.js';
+import { r as registerInstance, c as createEvent, h } from './index-D3yCWQNg.js';
 
 const sdDateBoxCss = () => `.sd-date-box.sc-sd-date-box{display:flex;align-items:center;justify-content:center;width:38px;height:36px;font-size:14px;position:relative;box-sizing:border-box;text-align:center;transition:background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);border-radius:14px}.sd-date-box.sc-sd-date-box .sd-date-box__content.sc-sd-date-box{width:28px;height:28px;border-radius:14px;position:relative}.sd-date-box.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box{position:relative;z-index:2;-webkit-user-select:none;user-select:none;line-height:28px}.sd-date-box.sd-date-box--disabled.sc-sd-date-box{color:#CCCCCC;cursor:default !important;pointer-events:none}.sd-date-box.sc-sd-date-box:not(.sd-date-box--disabled){color:#333333;cursor:pointer}.sd-date-box.sd-hoverable.sc-sd-date-box:hover .sd-date-box__content.sc-sd-date-box{background:#D9EAFF}.sd-date-box.sd-date-box--in-range.sc-sd-date-box:not(.sd-date-box--disabled) .sd-date-box__content.sc-sd-date-box::before{content:"";position:absolute;top:0;left:-5px;width:calc(100% + 10px);height:100%;background:#D9EAFF}.sd-date-box.sd-date-box--in-range.sd-date-box--type-start.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::before{left:auto !important;width:19px !important;right:-5px}.sd-date-box.sd-date-box--in-range.sd-date-box--type-end.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::before{width:19px !important}.sd-date-box.sd-date-box--in-range.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box{font-weight:500}.sd-date-box.sd-date-box--selected.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::after,.sd-date-box.sd-date-box--type-start.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::after,.sd-date-box.sd-date-box--type-end.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::after{content:"";position:absolute;inset:0;background:#0075FF;border-radius:14px;z-index:1}.sd-date-box.sd-date-box--selected.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box,.sd-date-box.sd-date-box--type-start.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box,.sd-date-box.sd-date-box--type-end.sc-sd-date-box .sd-date-box__content.sc-sd-date-box .sd-date-box__label.sc-sd-date-box{color:white;font-weight:700}.sd-date-box.sd-date-box--start-date.sd-date-box--end-date.sc-sd-date-box .sd-date-box__content.sc-sd-date-box::before{display:none !important}.sd-date-box.sd-date-box--today.sc-sd-date-box:not(.sd-date-box--selected) .sd-date-box__content.sc-sd-date-box::after{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:28px;height:28px;border:1px solid #E1E1E1 !important;border-radius:14px}`;
 

package/dist/esm/sd-date-picker_7.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-BpO2YWvq.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-D3yCWQNg.js';
 import { n as nanoid } from './index-CCwNgVmC.js';
 import { D as DATEPICKER_COLORS, a as DATEPICKER_SIZE_MAP } from './sd-date-picker.config-6dvDZPGx.js';
 import { i as inputTokens } from './component.textinput-e0ABNkP6.js';

package/dist/esm/sd-date-range-picker-calendar.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment } from './index-BpO2YWvq.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment } from './index-D3yCWQNg.js';
 import { u as useDatePicker, t as today, W as WEEK_LABELS, C as CALENDAR_LAYOUT } from './useDatePicker-DoUg--aq.js';
 import { d as datepickerTokens } from './component.datepicker-laVsm9VM.js';
 

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-BpO2YWvq.js';
+import { r as registerInstance, h, H as Host } from './index-D3yCWQNg.js';
 import { s as systemTokens } from './system-j2khhcHY.js';
 
 const DIVIDER_COLORS = {

package/dist/esm/sd-dropdown-button.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-BpO2YWvq.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-D3yCWQNg.js';
 import { s as sanitizeInlineHtml } from './sanitize-inline-html-BE4tnQ2Z.js';
 import { B as BUTTON_CONFIG, g as getPresetName, f as buttonTokens, d as PRESET_BORDER_COLORS$1, P as PRESET_ICON_COLORS$1, c as PRESET_TEXT_COLORS$1, e as PRESET_HOVER_BACKGROUNDS$1, b as BUTTON_FOCUS_RING_COLOR } from './sd-button.config-DjcjlPt7.js';
 import { s as systemTokens } from './system-j2khhcHY.js';

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, a as getElement, h, c as createEvent, F as Fragment } from './index-BpO2YWvq.js';
+import { r as registerInstance, a as getElement, h, c as createEvent, F as Fragment } from './index-D3yCWQNg.js';
 import { f as fieldTokens } from './component.field-BOJJ_sQS.js';
-import { T as TooltipArrow } from './tooltipArrow-DrrY_fPj.js';
+import { T as TooltipArrow } from './tooltipArrow-CUCfrch1.js';
 
 const FIELD_ADDON_ALIGN_MAP = {
     start: 'flex-start',

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-BpO2YWvq.js';
+import { r as registerInstance, c as createEvent, h } from './index-D3yCWQNg.js';
 
 const SdForm = class {
     constructor(hostRef) {

package/dist/esm/sd-ghost-button_2.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-BpO2YWvq.js';
+import { r as registerInstance, c as createEvent, h } from './index-D3yCWQNg.js';
 
 const ghostButton = {
 	xxs: {

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, a as getElement, h } from './index-BpO2YWvq.js';
+import { r as registerInstance, a as getElement, h } from './index-D3yCWQNg.js';
 import { s as systemTokens } from './system-j2khhcHY.js';
 import { s as sanitizeInlineHtml } from './sanitize-inline-html-BE4tnQ2Z.js';
 

package/dist/esm/sd-key-value-table.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-BpO2YWvq.js';
+import { r as registerInstance, c as createEvent, h } from './index-D3yCWQNg.js';
 import { s as systemTokens } from './system-j2khhcHY.js';
 import { t as tableTokens } from './component.table-D6GUzecR.js';
 

package/dist/esm/sd-linear-progress.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-BpO2YWvq.js';
+import { r as registerInstance, h, H as Host } from './index-D3yCWQNg.js';
 import { p as progressTokens } from './component.progress-D1vaasIp.js';
 import { s as systemTokens } from './system-j2khhcHY.js';
 

package/dist/esm/sd-loading-container.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-BpO2YWvq.js';
+import { r as registerInstance, h } from './index-D3yCWQNg.js';
 
 const sdLoadingContainerCss = () => `sd-loading-container .sd-loading-container{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:var(--sd-loading-container-z-index, 999);opacity:0;visibility:hidden;transition:opacity 0.2s ease, visibility 0s linear 0.2s;pointer-events:none}sd-loading-container .sd-loading-container--visible{opacity:1;visibility:visible;transition:opacity 0.2s ease, visibility 0s linear 0s;pointer-events:auto}sd-loading-container .sd-loading-container__backdrop{position:absolute;inset:0;background:rgba(0, 0, 0, 0.4)}sd-loading-container .sd-loading-container__content{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px}sd-loading-container .sd-loading-container__message{margin:0;color:#ffffff;font-size:14px;font-weight:500;line-height:22px;text-align:center;max-width:400px;word-break:keep-all}`;
 

package/dist/esm/sd-modal-container.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, a as getElement, h } from './index-BpO2YWvq.js';
+import { r as registerInstance, a as getElement, h } from './index-D3yCWQNg.js';
 import { u as unregisterModal, r as registerModal, s as setModalInteractive, i as isTopInteractiveModal, a as requestCloseForModal } from './modal-stack-DRVnqiWc.js';
 
 const sdModalContainerCss = () => `sd-modal-container{display:block}sd-modal-container .sd-modal-container{position:fixed;inset:0;z-index:var(--sd-modal-container-z-index, 997);pointer-events:none}sd-modal-container .sd-modal-container__layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}sd-modal-container .sd-modal-container__backdrop{position:absolute;inset:0;background:rgba(0, 0, 0, 0.4);opacity:0;transition:opacity 0.3s ease-out;pointer-events:none}sd-modal-container .sd-modal-container__backdrop--visible{opacity:1;pointer-events:auto}sd-modal-container .sd-modal-container__modal{position:relative;z-index:1;opacity:0;transform:scale(0);pointer-events:auto;transition:opacity 0.3s ease-out, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)}sd-modal-container .sd-modal-container__modal--visible{opacity:1;transform:scale(1)}sd-modal-container .sd-modal-container__modal--shake{animation:modal-shake 0.3s ease-out}@keyframes modal-shake{0%,100%{transform:scale(1)}25%{transform:scale(1.03)}50%{transform:scale(0.97)}75%{transform:scale(1.01)}}`;

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment, a as getElement, H as Host } from './index-BpO2YWvq.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, a as getElement, H as Host } from './index-D3yCWQNg.js';
 import { T as TABLE_ID_ATTR } from './constants-sZMi_32I.js';
 import { a as TABLE_SELECTABLE_COLUMN_WIDTH, r as resolveTableIconColor, e as resolveSortIconName, c as TABLE_BORDER, f as TABLE_HEADER_RESIZING_BAR, g as TABLE_HEADER_TYPOGRAPHY, h as TABLE_HEADER_COLORS, i as TABLE_HEADER_LAYOUT, T as TABLE_BODY_LAYOUT, j as TABLE_SEPARATOR, b as TABLE_BODY_TYPOGRAPHY } from './sd-table.config-D9meRqTx.js';
 import './component.table-D6GUzecR.js';

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, a as getElement, h, F as Fragment } from './index-BpO2YWvq.js';
-import { T as TooltipArrow } from './tooltipArrow-DrrY_fPj.js';
+import { r as registerInstance, c as createEvent, a as getElement, h, F as Fragment } from './index-D3yCWQNg.js';
+import { T as TooltipArrow } from './tooltipArrow-CUCfrch1.js';
 
 const popover = {
 	"default": {

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-BpO2YWvq.js';
+import { r as registerInstance, c as createEvent, h } from './index-D3yCWQNg.js';
 import { s as systemTokens } from './system-j2khhcHY.js';
 
 const popup$1 = {

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-BpO2YWvq.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-D3yCWQNg.js';
 
 const SdPortal = class {
     constructor(hostRef) {

package/dist/esm/sd-radio-button.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-BpO2YWvq.js';
+import { r as registerInstance, c as createEvent, h } from './index-D3yCWQNg.js';
 
 const radioButton = {
 	xs: {

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-BpO2YWvq.js';
+import { r as registerInstance, c as createEvent, h } from './index-D3yCWQNg.js';
 
 const radio = {
 	size: "16",

package/dist/esm/sd-select-list-item_2.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-BpO2YWvq.js';
+import { r as registerInstance, c as createEvent, h } from './index-D3yCWQNg.js';
 import { g as LIST_ITEM_LAYOUT, i as isHtmlLabel, h as LIST_ITEM_TYPOGRAPHY, j as LIST_ITEM_COLORS, k as SEARCH_DEBOUNCE_MS } from './sd-select.config-DtrsLG0Z.js';
 import { s as sanitizeInlineHtml } from './sanitize-inline-html-BE4tnQ2Z.js';
 

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-BpO2YWvq.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-D3yCWQNg.js';
 import { n as nanoid } from './index-CCwNgVmC.js';
 import { c as countLeaves, S as SEARCH_THRESHOLD, f as filterTree, i as isHtmlLabel, e as extractText, E as EMPTY_MESSAGE, L as LIST_BOX_LAYOUT, a as SELECT_COLORS, b as SELECT_TYPOGRAPHY, d as SELECT_LAYOUT } from './sd-select.config-DtrsLG0Z.js';
 import { s as sanitizeInlineHtml } from './sanitize-inline-html-BE4tnQ2Z.js';

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-BpO2YWvq.js';
+import { r as registerInstance, c as createEvent, h } from './index-D3yCWQNg.js';
 
 var switchTokens = {
 	"switch": {

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, d as readTask, f as forceUpdate, h, H as Host } from './index-BpO2YWvq.js';
+import { r as registerInstance, c as createEvent, a as getElement, d as readTask, f as forceUpdate, h, H as Host } from './index-D3yCWQNg.js';
 import { T as TABLE_ID_ATTR } from './constants-sZMi_32I.js';
 import { T as TABLE_BODY_LAYOUT, a as TABLE_SELECTABLE_COLUMN_WIDTH, b as TABLE_BODY_TYPOGRAPHY, c as TABLE_BORDER, d as TABLE_RADIUS } from './sd-table.config-D9meRqTx.js';
 import './component.table-D6GUzecR.js';

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-BpO2YWvq.js';
+import { r as registerInstance, c as createEvent, h } from './index-D3yCWQNg.js';
 
 const tab = {
 	main: {
@@ -54,9 +54,15 @@ const tab = {
 		border: {
 			width: "1"
 		},
-		gap: "24",
+		gap: {
+			horizontal: "24",
+			vertical: "16"
+		},
 		content: {
 			gap: "4"
+		},
+		item: {
+			height: "20"
 		}
 	}
 };
@@ -95,9 +101,11 @@ const TAB_MAIN_TYPOGRAPHY = {
     default: tabTokens.tab.main.default.typography,
 };
 const TAB_SUB_LAYOUT = {
-    gap: Number(tabTokens.tab.sub.gap),
+    gapHorizontal: Number(tabTokens.tab.sub.gap.horizontal),
+    gapVertical: Number(tabTokens.tab.sub.gap.vertical),
     contentGap: Number(tabTokens.tab.sub.content.gap),
     borderWidth: Number(tabTokens.tab.sub.border.width),
+    itemHeight: Number(tabTokens.tab.sub.item.height),
 };
 const TAB_SUB_COLORS = {
     selected: {
@@ -113,7 +121,7 @@ const TAB_SUB_TYPOGRAPHY = {
     default: tabTokens.tab.sub.default.typography,
 };
 
-const sdTabsCss = () => `sd-tabs{display:inline-block;width:100%}sd-tabs .sd-tabs{display:flex;flex-direction:row;gap:var(--sd-tabs-main-container-gap);border-bottom:var(--sd-tabs-main-border-width) solid var(--sd-tabs-main-selected-border);font-family:var(--sd-tabs-main-font-family)}sd-tabs .sd-tabs__tab{display:flex;align-items:center;justify-content:center;gap:var(--sd-tabs-main-gap);cursor:pointer;box-sizing:border-box;height:var(--sd-tabs-main-height);padding:0 var(--sd-tabs-main-padding-x);border:var(--sd-tabs-main-border-width) solid var(--sd-tabs-main-default-border);border-bottom:none;border-top-left-radius:var(--sd-tabs-main-radius);border-top-right-radius:var(--sd-tabs-main-radius);background-color:var(--sd-tabs-main-default-bg);color:var(--sd-tabs-main-default-text);font-size:var(--sd-tabs-main-font-size);line-height:var(--sd-tabs-main-line-height);font-weight:var(--sd-tabs-main-font-weight-default);transition:all 0.2s ease;position:relative;user-select:none}sd-tabs .sd-tabs__tab::before{content:"";position:absolute;inset:0;opacity:0;transition:all 0.2s;pointer-events:none}sd-tabs .sd-tabs__tab--selected{border-color:var(--sd-tabs-main-selected-border);color:var(--sd-tabs-main-selected-text);background-color:var(--sd-tabs-main-selected-bg)}sd-tabs .sd-tabs__tab--selected .sd-tabs__label::before{font-weight:var(--sd-tabs-main-font-weight-selected)}sd-tabs .sd-tabs__tab--selected:hover::before{background-color:var(--sd-tabs-main-selected-border);opacity:0.15}sd-tabs .sd-tabs__tab--unselected:hover::before{background-color:var(--sd-tabs-main-default-text);opacity:0.15}sd-tabs .sd-tabs__label{user-select:none;font-weight:var(--sd-tabs-main-font-weight-selected);visibility:hidden;position:relative;white-space:nowrap}sd-tabs .sd-tabs__label::before{content:attr(data-label);visibility:visible;position:absolute;inset:0;font-weight:var(--sd-tabs-main-font-weight-default);transition:font-weight 0.2s ease}sd-tabs .sd-tabs--sub{gap:var(--sd-tabs-sub-gap);border-bottom:none;font-family:var(--sd-tabs-sub-font-family)}sd-tabs .sd-tabs--sub .sd-tabs__tab{height:auto;padding:0 0 var(--sd-tabs-sub-content-gap) 0;border:none;border-radius:0;background-color:transparent;color:var(--sd-tabs-sub-default-text);font-size:var(--sd-tabs-sub-font-size);line-height:var(--sd-tabs-sub-line-height);font-weight:var(--sd-tabs-sub-font-weight-default)}sd-tabs .sd-tabs--sub .sd-tabs__tab::before{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--sd-tabs-sub-border-width);width:100%;background-color:var(--sd-tabs-sub-selected-line);opacity:0;transition:opacity 0.2s ease;inset:auto 0 0 0;pointer-events:none}sd-tabs .sd-tabs--sub .sd-tabs__tab--selected{color:var(--sd-tabs-sub-selected-text);background-color:transparent}sd-tabs .sd-tabs--sub .sd-tabs__tab--selected::before{opacity:1}sd-tabs .sd-tabs--sub .sd-tabs__tab--selected .sd-tabs__label::before{font-weight:var(--sd-tabs-sub-font-weight-selected)}sd-tabs .sd-tabs--sub .sd-tabs__label{font-weight:var(--sd-tabs-sub-font-weight-selected)}sd-tabs .sd-tabs--sub .sd-tabs__label::before{font-weight:var(--sd-tabs-sub-font-weight-default)}sd-tabs .sd-tabs--vertical{flex-direction:column;align-items:stretch;width:fit-content;border-bottom:none;border-right:var(--sd-tabs-main-border-width) solid var(--sd-tabs-main-selected-border)}sd-tabs .sd-tabs--vertical .sd-tabs__tab{justify-content:flex-start;border-bottom:var(--sd-tabs-main-border-width) solid var(--sd-tabs-main-default-border);border-right:none;border-top-right-radius:0;border-bottom-left-radius:var(--sd-tabs-main-radius)}sd-tabs .sd-tabs--vertical .sd-tabs__tab--selected{border-color:var(--sd-tabs-main-selected-border)}sd-tabs .sd-tabs--vertical.sd-tabs--sub{gap:16px;border-right:none}sd-tabs .sd-tabs--vertical.sd-tabs--sub .sd-tabs__tab{justify-content:center;width:100%;border:none;border-radius:0}`;
+const sdTabsCss = () => `sd-tabs{display:inline-block;width:100%}sd-tabs .sd-tabs{display:flex;flex-direction:row;gap:var(--sd-tabs-main-container-gap);border-bottom:var(--sd-tabs-main-border-width) solid var(--sd-tabs-main-selected-border);font-family:var(--sd-tabs-main-font-family)}sd-tabs .sd-tabs__tab{display:flex;align-items:center;justify-content:center;gap:var(--sd-tabs-main-gap);cursor:pointer;box-sizing:border-box;height:var(--sd-tabs-main-height);padding:0 var(--sd-tabs-main-padding-x);border:var(--sd-tabs-main-border-width) solid var(--sd-tabs-main-default-border);border-bottom:none;border-top-left-radius:var(--sd-tabs-main-radius);border-top-right-radius:var(--sd-tabs-main-radius);background-color:var(--sd-tabs-main-default-bg);color:var(--sd-tabs-main-default-text);font-size:var(--sd-tabs-main-font-size);line-height:var(--sd-tabs-main-line-height);font-weight:var(--sd-tabs-main-font-weight-default);transition:all 0.2s ease;position:relative;user-select:none}sd-tabs .sd-tabs__tab::before{content:"";position:absolute;inset:0;opacity:0;transition:all 0.2s;pointer-events:none}sd-tabs .sd-tabs__tab--selected{border-color:var(--sd-tabs-main-selected-border);color:var(--sd-tabs-main-selected-text);background-color:var(--sd-tabs-main-selected-bg)}sd-tabs .sd-tabs__tab--selected .sd-tabs__label::before{font-weight:var(--sd-tabs-main-font-weight-selected)}sd-tabs .sd-tabs__tab--selected:hover::before{background-color:var(--sd-tabs-main-selected-border);opacity:0.15}sd-tabs .sd-tabs__tab--unselected:hover::before{background-color:var(--sd-tabs-main-default-text);opacity:0.15}sd-tabs .sd-tabs__label{user-select:none;font-weight:var(--sd-tabs-main-font-weight-selected);visibility:hidden;position:relative;white-space:nowrap}sd-tabs .sd-tabs__label::before{content:attr(data-label);visibility:visible;position:absolute;inset:0;font-weight:var(--sd-tabs-main-font-weight-default);transition:font-weight 0.2s ease}sd-tabs .sd-tabs--sub{gap:var(--sd-tabs-sub-gap-horizontal);border-bottom:none;font-family:var(--sd-tabs-sub-font-family)}sd-tabs .sd-tabs--sub .sd-tabs__tab{height:var(--sd-tabs-sub-item-height);padding:0 0 var(--sd-tabs-sub-content-gap) 0;border:none;border-radius:0;background-color:transparent;color:var(--sd-tabs-sub-default-text);font-size:var(--sd-tabs-sub-font-size);line-height:var(--sd-tabs-sub-line-height);font-weight:var(--sd-tabs-sub-font-weight-default)}sd-tabs .sd-tabs--sub .sd-tabs__tab::before{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--sd-tabs-sub-border-width);width:100%;background-color:var(--sd-tabs-sub-selected-line);opacity:0;transition:opacity 0.2s ease;inset:auto 0 0 0;pointer-events:none}sd-tabs .sd-tabs--sub .sd-tabs__tab--selected{color:var(--sd-tabs-sub-selected-text);background-color:transparent}sd-tabs .sd-tabs--sub .sd-tabs__tab--selected::before{opacity:1}sd-tabs .sd-tabs--sub .sd-tabs__tab--selected .sd-tabs__label::before{font-weight:var(--sd-tabs-sub-font-weight-selected)}sd-tabs .sd-tabs--sub .sd-tabs__label{font-weight:var(--sd-tabs-sub-font-weight-selected)}sd-tabs .sd-tabs--sub .sd-tabs__label::before{font-weight:var(--sd-tabs-sub-font-weight-default)}sd-tabs .sd-tabs--vertical{flex-direction:column;align-items:stretch;width:fit-content;border-bottom:none;border-right:var(--sd-tabs-main-border-width) solid var(--sd-tabs-main-selected-border)}sd-tabs .sd-tabs--vertical .sd-tabs__tab{justify-content:flex-start;border-bottom:var(--sd-tabs-main-border-width) solid var(--sd-tabs-main-default-border);border-right:none;border-top-right-radius:0;border-bottom-left-radius:var(--sd-tabs-main-radius)}sd-tabs .sd-tabs--vertical .sd-tabs__tab--selected{border-color:var(--sd-tabs-main-selected-border)}sd-tabs .sd-tabs--vertical.sd-tabs--sub{gap:var(--sd-tabs-sub-gap-vertical);border-right:none}sd-tabs .sd-tabs--vertical.sd-tabs--sub .sd-tabs__tab{justify-content:center;width:100%;border:none;border-radius:0}`;
 
 const SdTabs = class {
     constructor(hostRef) {
@@ -175,7 +183,9 @@ const SdTabs = class {
             '--sd-tabs-main-line-height': `${TAB_MAIN_TYPOGRAPHY.default.lineHeight}px`,
             '--sd-tabs-main-font-weight-default': TAB_MAIN_TYPOGRAPHY.default.fontWeight,
             '--sd-tabs-main-font-weight-selected': TAB_MAIN_TYPOGRAPHY.selected.fontWeight,
-            '--sd-tabs-sub-gap': `${TAB_SUB_LAYOUT.gap}px`,
+            '--sd-tabs-sub-gap-horizontal': `${TAB_SUB_LAYOUT.gapHorizontal}px`,
+            '--sd-tabs-sub-gap-vertical': `${TAB_SUB_LAYOUT.gapVertical}px`,
+            '--sd-tabs-sub-item-height': `${TAB_SUB_LAYOUT.itemHeight}px`,
             '--sd-tabs-sub-content-gap': `${TAB_SUB_LAYOUT.contentGap}px`,
             '--sd-tabs-sub-border-width': `${TAB_SUB_LAYOUT.borderWidth}px`,
             '--sd-tabs-sub-selected-text': TAB_SUB_COLORS.selected.text,
@@ -189,7 +199,7 @@ const SdTabs = class {
         };
     }
     render() {
-        return (h("div", { key: '277188138dd50992b468b35f723cc3f852ad38c3', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
+        return (h("div", { key: '1c670c50ff7f5489a77043bc030fe3a65eb894ab', class: this.getContainerClasses(), style: this.buildCssVars() }, this.tabs.map((tab, index) => {
             const badgeName = this.getBadgeName(tab);
             return (h("div", { key: `tab-${index}`, role: "tab", tabindex: 0, "aria-selected": tab.value === this.value ? 'true' : 'false', class: this.getTabClasses(tab), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab), onKeyDown: e => {
                     if (e.key === 'Enter' || e.key === ' ') {

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, a as getElement, f as forceUpdate, h, H as Host } from './index-BpO2YWvq.js';
+import { r as registerInstance, a as getElement, f as forceUpdate, h, H as Host } from './index-D3yCWQNg.js';
 import { T as TABLE_ID_ATTR } from './constants-sZMi_32I.js';
 
 const sdTdCss = () => `sd-td *{box-sizing:border-box}sd-td{display:contents}sd-td.align-left{text-align:left}sd-td.align-center{text-align:center}sd-td.align-right{text-align:right}`;

package/dist/esm/sd-text-link.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-BpO2YWvq.js';
+import { r as registerInstance, c as createEvent, h } from './index-D3yCWQNg.js';
 
 const textLink = {
 	sm: {

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, a as getElement, h } from './index-BpO2YWvq.js';
+import { r as registerInstance, c as createEvent, a as getElement, h } from './index-D3yCWQNg.js';
 
 const DEFAULT_DURATION = 4000;
 const DEFAULT_MAX_VISIBLE = 3;

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-BpO2YWvq.js';
+import { r as registerInstance, c as createEvent, h } from './index-D3yCWQNg.js';
 
 const toast = {
 	icon: "16",

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-BpO2YWvq.js';
+import { r as registerInstance, c as createEvent, h } from './index-D3yCWQNg.js';
 
 const toggle = {
 	height: "28",

package/dist/esm/{tooltipArrow-DrrY_fPj.js → tooltipArrow-CUCfrch1.js}

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

@@ -47,9 +47,11 @@ export declare const TAB_MAIN_TYPOGRAPHY: {
     };
 };
 export declare const TAB_SUB_LAYOUT: {
-    gap: number;
+    gapHorizontal: number;
+    gapVertical: number;
     contentGap: number;
     borderWidth: number;
+    itemHeight: number;
 };
 export declare const TAB_SUB_COLORS: {
     selected: {