morya-ui 0.3.7 → 0.4.0

package/dist/table/style.css

@@ -1,60 +1,79 @@
 :root {
-    --m-color-primary: #2563eb;
-    --m-color-primary-hover: #1d4ed8;
+    /* Default morya palette (--m-* token names) */
+    --m-color-primary: #1677ff;
+    --m-color-primary-hover: #4096ff;
+    --m-color-primary-active: #0958d9;
     --m-color-surface: #ffffff;
-    --m-color-text: #0f172a;
-    --m-color-text-muted: #64748b;
-    --m-color-border: #e2e8f0;
-    --m-color-focus-ring: #2563eb;
-    /* Naive-inspired control sizing (tiny omitted; medium = default) */
-    --m-control-height-small: 28px;
-    --m-control-height-medium: 34px;
+    --m-color-text: rgba(0, 0, 0, 0.88);
+    --m-color-text-muted: rgba(0, 0, 0, 0.45);
+    --m-color-border: #d9d9d9;
+    --m-color-split: #f0f0f0;
+    --m-color-focus-ring: #1677ff;
+    /* Control sizing: medium control height 32px */
+    --m-control-height-small: 24px;
+    --m-control-height-medium: 32px;
     --m-control-height-large: 40px;
     --m-control-font-small: 14px;
     --m-control-font-medium: 14px;
     --m-control-font-large: 15px;
     --m-control-padding-x-small: 10px;
-    --m-control-padding-x-medium: 12px;
-    --m-control-padding-x-large: 14px;
+    --m-control-padding-x-medium: 15px;
+    --m-control-padding-x-large: 16px;
 
-    --m-radius-control: 3px;
+    --m-radius-control: 6px;
     --m-border-width: 1px;
     --m-focus-shadow: 0 0 0 2px
-        color-mix(in srgb, var(--m-color-primary) 20%, transparent);
+        color-mix(in srgb, var(--m-color-primary) 45%, transparent);
     --m-focus-shadow-danger: 0 0 0 2px
-        color-mix(in srgb, var(--m-color-danger) 20%, transparent);
-    --m-color-success: #159570;
-    --m-color-info: #2563eb;
-    --m-color-warning: #d97706;
+        color-mix(in srgb, var(--m-color-danger) 45%, transparent);
+    --m-focus-shadow-warning: 0 0 0 2px
+        color-mix(in srgb, var(--m-color-warning) 45%, transparent);
+    --m-color-success: #52c41a;
+    --m-color-info: #1677ff;
+    --m-color-warning: #faad14;
     --m-color-warn: var(--m-color-warning);
     --m-color-help: #9333ea;
-    --m-color-danger: #dc2626;
-    --m-color-contrast: #0f172a;
+    --m-color-danger: #ff4d4f;
+    --m-color-contrast: rgba(0, 0, 0, 0.88);
     --m-color-contrast-fg: #ffffff;
-    --m-color-contrast-hover: #1e293b;
-    --m-color-contrast-active: #020617;
+    --m-color-contrast-hover: #1f1f1f;
+    --m-color-contrast-active: #141414;
     --m-color-on-emphasis: #ffffff;
-    --m-overlay-scrim: rgb(15 23 42 / 0.55);
-    --m-shadow-sm: 0 0 6px rgba(0, 0, 0, 0.12);
-    --m-shadow-md: 0 0 12px rgba(0, 0, 0, 0.12);
-    --m-shadow-lg: 0 12px 32px 4px rgba(0, 0, 0, 0.04), 0 8px 20px rgba(0, 0, 0, 0.08);
-    --m-shadow-raised: 0 0.25rem 0.75rem
-        color-mix(in srgb, var(--m-color-text) 14%, transparent);
-    --m-shadow-sticky: 4px 0 8px
-        color-mix(in srgb, var(--m-color-text) 6%, transparent);
-    --m-shadow-sticky-end: -4px 0 8px
-        color-mix(in srgb, var(--m-color-text) 6%, transparent);
+    --m-color-on-primary: var(--m-color-on-emphasis);
+    --m-overlay-scrim: rgb(0 0 0 / 0.45);
+    --m-shadow-sm:
+        0 1px 2px 0 rgb(0 0 0 / 0.03), 0 1px 6px -1px rgb(0 0 0 / 0.02),
+        0 2px 4px 0 rgb(0 0 0 / 0.02);
+    --m-shadow-md:
+        0 6px 16px 0 rgb(0 0 0 / 0.08), 0 3px 6px -4px rgb(0 0 0 / 0.12),
+        0 9px 28px 8px rgb(0 0 0 / 0.05);
+    --m-shadow-lg:
+        0 6px 16px 0 rgb(0 0 0 / 0.08), 0 3px 6px -4px rgb(0 0 0 / 0.12),
+        0 9px 28px 8px rgb(0 0 0 / 0.05);
+    --m-shadow-raised:
+        0 1px 2px -2px rgb(0 0 0 / 0.16), 0 3px 6px 0 rgb(0 0 0 / 0.12),
+        0 5px 12px 4px rgb(0 0 0 / 0.09);
+    --m-shadow-sticky: 6px 0 16px -8px rgb(0 0 0 / 0.08);
+    --m-shadow-sticky-end: -6px 0 16px -8px rgb(0 0 0 / 0.08);
 
     /* Typography scale (component text, not control-height fonts) */
     --m-font-size-xs: 0.75rem;
     --m-font-size-sm: 0.8125rem;
     --m-font-size-md: 0.875rem;
     --m-font-size-lg: 1.125rem;
+    --m-line-height-sm: 1.6667;
+    --m-line-height-md: 1.5714;
+    --m-line-height-lg: 1.5;
     /* Display scale (page titles, KPI figures) */
     --m-font-size-xl: 1.25rem;
     --m-font-size-2xl: 1.5rem;
     --m-font-size-3xl: 1.75rem;
     --m-opacity-disabled: 0.55;
+    --m-color-text-disabled: rgba(0, 0, 0, 0.25);
+    --m-color-bg-disabled: rgba(0, 0, 0, 0.04);
+    --m-font-weight: 400;
+    --m-font-weight-medium: 500;
+    --m-font-weight-strong: 600;
     /* Layering: override --m-z-base via ConfigProvider / createMoryaUI */
     --m-z-base: 1000;
     --m-z-overlay: var(--m-z-base);
@@ -63,6 +82,7 @@
     --m-z-tooltip: calc(var(--m-z-base) + 60);
     --m-z-toast: calc(var(--m-z-base) + 100);
     --m-z-popper: 40;
+    --m-z-sticky: 10;
 
     /* Affix hitbox tracks control height so small/compact shells do not overflow */
     --m-control-affix-size: calc(
@@ -73,7 +93,7 @@
     --m-meter-track-height: var(--m-space-5);
     --m-tree-toggler-size: var(--m-checkbox-control-size);
     --m-nav-rail-width: 12.5rem;
-    --m-nav-rail-collapsed-width: 4rem;
+    --m-nav-rail-collapsed-width: 5rem;
     --m-layout-header-height: calc(
         var(--m-control-height-medium) + 2 * var(--m-space-3)
     );
@@ -89,15 +109,19 @@
     --m-space-8: 2rem;
     --m-radius-sm: 0.25rem;
     --m-radius-md: 0.5rem;
-    --m-radius-lg: 0.75rem;
+    --m-radius-lg: 0.5rem;
     --m-radius-full: 9999px;
-    --m-font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
+    --m-radius-pill: var(--m-radius-full);
+    --m-font-sans:
+        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
+        Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+        "Segoe UI Symbol", "Noto Color Emoji";
     --m-motion-fast: 150ms;
     --m-motion-normal: 250ms;
-    --m-motion-ease: cubic-bezier(0.2, 0, 0, 1);
-    --m-motion-enter: 180ms;
-    --m-motion-exit: 130ms;
-    --m-motion-distance: 1rem;
+    --m-motion-ease: cubic-bezier(0.215, 0.61, 0.355, 1);
+    --m-motion-enter: 200ms;
+    --m-motion-exit: 150ms;
+    --m-motion-distance: 0.5rem;
     --m-motion-spin: 1s;
     --m-motion-spin-dash: 1.5s;
     --m-motion-spin-fast: 0.8s;
@@ -135,7 +159,7 @@
     /* Table */
     --m-color-fill-light: color-mix(in srgb, var(--m-color-text) 6%, var(--m-color-surface));
     --m-color-fill-lighter: color-mix(in srgb, var(--m-color-text) 3.5%, var(--m-color-surface));
-    --m-table-border-color: var(--m-color-border);
+    --m-table-border-color: var(--m-color-split);
     --m-table-header-bg: var(--m-color-fill-light);
     --m-table-header-text: var(--m-color-text);
     --m-table-text: var(--m-color-text);
@@ -243,7 +267,7 @@
     --m-control-affix-gap: 2rem;
     --m-checkbox-control-size: 1rem;
     --m-nav-rail-width: 15rem;
-    --m-nav-rail-collapsed-width: 3.25rem;
+    --m-nav-rail-collapsed-width: 4rem;
     --m-space-1: 0.2rem;
     --m-space-2: 0.4rem;
     --m-space-3: 0.6rem;
@@ -272,7 +296,7 @@
     --m-control-affix-gap: 2.65rem;
     --m-checkbox-control-size: 1.25rem;
     --m-nav-rail-width: 18rem;
-    --m-nav-rail-collapsed-width: 4.5rem;
+    --m-nav-rail-collapsed-width: 5.5rem;
     --m-space-1: 0.3rem;
     --m-space-2: 0.6rem;
     --m-space-3: 0.9rem;
@@ -312,40 +336,52 @@
 }
 
 [data-theme="dark"] {
-    --m-color-primary: #60a5fa;
-    --m-color-primary-hover: #93c5fd;
-    --m-color-surface: #0f172a;
-    --m-color-text: #f8fafc;
-    --m-color-text-muted: #94a3b8;
-    --m-color-border: #334155;
-    --m-color-focus-ring: #93c5fd;
+    /* Dark theme solids on dark surfaces (readable mid tones) */
+    --m-color-primary: #1668dc;
+    --m-color-primary-hover: #3c89e8;
+    --m-color-primary-active: #1554ad;
+    --m-color-surface: #141414;
+    --m-color-text: rgba(255, 255, 255, 0.85);
+    --m-color-text-muted: rgba(255, 255, 255, 0.45);
+    --m-color-text-disabled: rgba(255, 255, 255, 0.3);
+    --m-color-bg-disabled: rgba(255, 255, 255, 0.08);
+    --m-color-border: #424242;
+    --m-color-split: #303030;
+    --m-color-focus-ring: #3c89e8;
     --m-focus-shadow: 0 0 0 2px
-        color-mix(in srgb, var(--m-color-primary) 28%, transparent);
+        color-mix(in srgb, var(--m-color-primary) 50%, transparent);
     --m-focus-shadow-danger: 0 0 0 2px
-        color-mix(in srgb, var(--m-color-danger) 28%, transparent);
+        color-mix(in srgb, var(--m-color-danger) 50%, transparent);
+    --m-focus-shadow-warning: 0 0 0 2px
+        color-mix(in srgb, var(--m-color-warning) 50%, transparent);
     /* Mid solids: keep ≥~4.5:1 with --m-color-on-emphasis on dark surfaces */
-    --m-color-success: #0f766e;
-    --m-color-info: #1d4ed8;
-    --m-color-warning: #b45309;
+    --m-color-success: #49aa19;
+    --m-color-info: #1668dc;
+    --m-color-warning: #d89614;
     --m-color-warn: var(--m-color-warning);
     --m-color-help: #7e22ce;
-    --m-color-danger: #dc2626;
-    --m-color-contrast: #f8fafc;
-    --m-color-contrast-fg: #0f172a;
-    --m-color-contrast-hover: #e2e8f0;
-    --m-color-contrast-active: #cbd5e1;
-    --m-overlay-scrim: rgb(2 6 23 / 0.72);
-    --m-shadow-sm: 0 0 6px rgba(0, 0, 0, 0.12);
-    --m-shadow-md: 0 0 12px rgba(0, 0, 0, 0.12);
-    --m-shadow-lg: 0 12px 32px 4px rgba(0, 0, 0, 0.04), 0 8px 20px rgba(0, 0, 0, 0.08);
-    --m-shadow-raised: 0 0.25rem 0.75rem
-        color-mix(in srgb, var(--m-color-text) 22%, transparent);
-    --m-shadow-sticky: 4px 0 8px
-        color-mix(in srgb, #000 35%, transparent);
-    --m-shadow-sticky-end: -4px 0 8px
-        color-mix(in srgb, #000 35%, transparent);
-
-    --m-table-border-color: color-mix(in srgb, var(--m-color-border) 88%, var(--m-color-text));
+    --m-color-danger: #dc4446;
+    --m-color-contrast: rgba(255, 255, 255, 0.85);
+    --m-color-contrast-fg: #141414;
+    --m-color-contrast-hover: #f5f5f5;
+    --m-color-contrast-active: #d9d9d9;
+    --m-overlay-scrim: rgb(0 0 0 / 0.65);
+    --m-shadow-sm:
+        0 1px 2px 0 rgb(0 0 0 / 0.16), 0 1px 6px -1px rgb(0 0 0 / 0.12),
+        0 2px 4px 0 rgb(0 0 0 / 0.08);
+    --m-shadow-md:
+        0 6px 16px 0 rgb(0 0 0 / 0.32), 0 3px 6px -4px rgb(0 0 0 / 0.48),
+        0 9px 28px 8px rgb(0 0 0 / 0.2);
+    --m-shadow-lg:
+        0 6px 16px 0 rgb(0 0 0 / 0.32), 0 3px 6px -4px rgb(0 0 0 / 0.48),
+        0 9px 28px 8px rgb(0 0 0 / 0.2);
+    --m-shadow-raised:
+        0 1px 2px -2px rgb(0 0 0 / 0.64), 0 3px 6px 0 rgb(0 0 0 / 0.48),
+        0 5px 12px 4px rgb(0 0 0 / 0.36);
+    --m-shadow-sticky: 6px 0 16px -8px rgb(0 0 0 / 0.45);
+    --m-shadow-sticky-end: -6px 0 16px -8px rgb(0 0 0 / 0.45);
+
+    --m-table-border-color: var(--m-color-split);
     --m-color-fill-light: color-mix(in srgb, var(--m-color-text) 10%, var(--m-color-surface));
     --m-color-fill-lighter: color-mix(in srgb, var(--m-color-text) 6%, var(--m-color-surface));
     --m-table-header-bg: var(--m-color-fill-light);
@@ -440,16 +476,18 @@
     box-sizing: border-box;
 }
 
-.m-button:disabled,
 .m-input:disabled,
+.m-textarea:disabled,
 .m-password__input:disabled,
 .m-inputnumber__input:disabled,
 .m-inputotp__input:disabled,
 .m-inputcolor__text:disabled,
 .m-inputcolor__swatch:disabled,
 .m-inputtags--disabled {
+    background-color: var(--m-color-bg-disabled);
+    color: var(--m-color-text-disabled);
     cursor: not-allowed;
-    opacity: var(--m-opacity-disabled);
+    opacity: 1;
 }
 
 .m-input-field__control--prefixed .m-input:disabled,
@@ -735,16 +773,16 @@
     display: inline-flex;
     font-family: var(--m-font-sans);
     gap: var(--m-space-2);
-    /* 避免绝对定位 input 挂到上层 MScrollbar，聚焦时把滚动容器拽回顶部 */
+    /* 与输入框圆角保持一致，配合 MScrollbar 使用 */
     position: relative;
 }
 
 .m-checkbox--disabled,
 .m-radio--disabled,
 .m-switch--disabled {
-    color: var(--m-color-text-muted);
+    color: var(--m-color-text-disabled);
     cursor: not-allowed;
-    opacity: var(--m-opacity-disabled);
+    opacity: 1;
 }
 
 .m-checkbox--invalid .m-checkbox__control,
@@ -827,7 +865,7 @@
     color: var(--m-color-text);
     font-family: var(--m-font-sans);
     font-size: var(--m-font-size-md);
-    font-weight: 600;
+    font-weight: 500;
 }
 
 .m-textarea-field__help,
@@ -865,8 +903,10 @@
 .m-textarea:disabled,
 .m-select:disabled,
 .m-select--disabled {
+    background-color: var(--m-color-bg-disabled);
+    color: var(--m-color-text-disabled);
     cursor: not-allowed;
-    opacity: var(--m-opacity-disabled);
+    opacity: 1;
 }
 
 .m-inputgroup > .m-input,
@@ -1041,7 +1081,7 @@
 .m-picklist__item--selected {
     background: color-mix(in srgb, var(--m-color-primary) 14%, var(--m-color-surface));
     color: var(--m-color-primary);
-    font-weight: 600;
+    font-weight: 500;
 }
 
 .m-carousel__nav,
@@ -1526,6 +1566,9 @@
 }
 
 .m-pagination {
+    --m-pagination-height: var(--m-control-height-medium);
+    --m-pagination-font: var(--m-control-font-medium);
+    --m-pagination-padding-x: var(--m-control-padding-x-medium);
     --m-pagination-simple-width: 3.5rem;
     --m-pagination-jumper-width: 5.5rem;
     align-items: center;
@@ -1534,6 +1577,18 @@
     gap: var(--m-space-1);
 }
 
+.m-pagination--small {
+    --m-pagination-height: var(--m-control-height-small);
+    --m-pagination-font: var(--m-control-font-small);
+    --m-pagination-padding-x: var(--m-control-padding-x-small);
+}
+
+.m-pagination--large {
+    --m-pagination-height: var(--m-control-height-large);
+    --m-pagination-font: var(--m-control-font-large);
+    --m-pagination-padding-x: var(--m-control-padding-x-large);
+}
+
 .m-pagination__button {
     background: var(--m-color-surface);
     border: var(--m-border-width) solid var(--m-color-border);
@@ -1541,10 +1596,10 @@
     color: var(--m-color-text);
     cursor: pointer;
     font: inherit;
-    font-size: var(--m-control-font-small);
-    min-height: var(--m-control-height-small);
-    min-width: var(--m-control-height-small);
-    padding: 0 var(--m-control-padding-x-small);
+    font-size: var(--m-pagination-font);
+    min-height: var(--m-pagination-height);
+    min-width: var(--m-pagination-height);
+    padding: 0 var(--m-pagination-padding-x);
     transition:
         background-color var(--m-motion-fast) var(--m-motion-ease),
         border-color var(--m-motion-fast) var(--m-motion-ease),
@@ -1558,8 +1613,9 @@
 }
 
 .m-pagination__button:disabled {
+    color: var(--m-color-text-disabled);
     cursor: not-allowed;
-    opacity: var(--m-opacity-disabled);
+    opacity: 1;
 }
 
 .m-pagination__button:hover:not(:disabled):not(.m-pagination__button--active) {
@@ -1581,7 +1637,7 @@
 
 .m-pagination__simple {
     color: var(--m-color-text);
-    font-size: var(--m-font-size-sm);
+    font-size: var(--m-pagination-font);
     min-width: var(--m-pagination-simple-width);
     text-align: center;
 }
@@ -1591,7 +1647,7 @@
     align-items: center;
     color: var(--m-color-text-muted);
     display: inline-flex;
-    font-size: var(--m-font-size-sm);
+    font-size: var(--m-pagination-font);
     gap: var(--m-space-1);
     margin-left: var(--m-space-2);
 }
@@ -1602,8 +1658,8 @@
     border-radius: var(--m-radius-control);
     color: var(--m-color-text);
     font-family: var(--m-font-sans);
-    font-size: var(--m-font-size-sm);
-    height: var(--m-control-height-small);
+    font-size: var(--m-pagination-font);
+    height: var(--m-pagination-height);
     padding: 0 var(--m-space-2);
     transition:
         border-color var(--m-motion-fast) var(--m-motion-ease),
@@ -1622,8 +1678,10 @@
 }
 
 .m-pagination__select:disabled {
+    background-color: var(--m-color-bg-disabled);
+    color: var(--m-color-text-disabled);
     cursor: not-allowed;
-    opacity: var(--m-opacity-disabled);
+    opacity: 1;
 }
 
 .m-pagination__jumper-select {
@@ -1763,9 +1821,7 @@
     transition: none;
 }
 
-/**
- * MTable — Morya UI design tokens and table interaction patterns.
- */
+/* --- MTable Morya UI design tokens and table interaction patterns. --- */
 
 .m-table {
     --m-table-cell-padding-block: var(--m-space-2);
@@ -1782,11 +1838,13 @@
 
 .m-table--small {
     --m-table-cell-padding-block: var(--m-space-1);
+    --m-table-cell-padding-inline: var(--m-space-2);
     --m-table-font-size: var(--m-font-size-sm);
 }
 
 .m-table--large {
     --m-table-cell-padding-block: var(--m-space-3);
+    --m-table-cell-padding-inline: var(--m-space-4);
     --m-table-font-size: var(--m-font-size-lg);
 }
 
@@ -1930,7 +1988,7 @@
     border-bottom: var(--m-border-width) solid var(--m-table-border-color);
     color: inherit;
     font-size: var(--m-table-font-size);
-    font-weight: 600;
+    font-weight: 500;
     text-align: left;
     background: var(--m-table-header-bg);
     vertical-align: middle;
@@ -2328,10 +2386,17 @@
     display: flex;
     flex-direction: column;
     gap: var(--m-space-2);
-    min-width: 10rem;
+    min-width: 12rem;
     padding: var(--m-space-2);
 }
 
+.m-table__filter-title {
+    color: var(--m-color-text);
+    font-size: var(--m-font-size-sm);
+    font-weight: 500;
+    margin: 0;
+}
+
 .m-table__filter-options {
     display: flex;
     flex-direction: column;
@@ -2350,9 +2415,12 @@
 }
 
 .m-table__filter-actions {
+    border-top: var(--m-border-width) solid var(--m-color-border);
     display: flex;
-    justify-content: flex-end;
-    gap: var(--m-space-1);
+    justify-content: space-between;
+    gap: var(--m-space-2);
+    margin-top: var(--m-space-1);
+    padding-top: var(--m-space-2);
 }
 
 .m-table__virtual-spacer td {
@@ -2367,7 +2435,7 @@
     border-top: var(--m-border-width) solid var(--m-table-border-color);
     color: var(--m-table-header-text);
     font-size: var(--m-table-font-size);
-    font-weight: 600;
+    font-weight: 500;
     background: var(--m-table-header-bg);
     vertical-align: middle;
 }
@@ -2382,7 +2450,7 @@
     border-right: 0;
 }
 
-/* —— Tree mode —— */
+/* —�?Tree mode —�?*/
 .m-table__tree-cell {
     align-items: center;
     display: flex;

package/dist/tabs/index.js

@@ -1,8 +1,8 @@
 import { a as e } from "../useComponentAttrs-e-5QAjdw.js";
-import { t } from "../Icon-od9Ob-Ay.js";
-import { t as n } from "../useMId-BXFYayPP.js";
+import { t } from "../useMId-BXFYayPP.js";
+import { t as n } from "../Icon-od9Ob-Ay.js";
 import { t as r } from "../Scrollbar-DTeJ8P5b.js";
-import { n as i } from "../locale-xavS6-Hw.js";
+import { n as i } from "../locale-Dnk0UIie.js";
 import "./style.js";
 import { Fragment as a, computed as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createVNode as u, defineComponent as d, mergeProps as f, nextTick as p, normalizeClass as m, onBeforeUnmount as h, onMounted as g, openBlock as _, ref as v, renderList as y, renderSlot as b, toDisplayString as x, unref as S, useAttrs as C, watch as w, withCtx as T, withModifiers as E } from "vue";
 //#region src/components/Tabs/Tabs.vue?vue&type=script&setup=true&lang.ts
@@ -28,6 +28,11 @@ var D = { class: "m-tabs__bar" }, O = ["aria-label"], k = [
 		modelValue: {},
 		tabs: {},
 		type: { default: "line" },
+		size: { default: "medium" },
+		centered: {
+			type: Boolean,
+			default: !1
+		},
 		closable: {
 			type: Boolean,
 			default: !1
@@ -44,7 +49,7 @@ var D = { class: "m-tabs__bar" }, O = ["aria-label"], k = [
 		"add"
 	],
 	setup(d, { emit: F }) {
-		let I = d, L = F, R = C(), { rootAttrs: z } = e(R, () => I.pt), B = i(), V = n(), H = v(null);
+		let I = d, L = F, R = C(), { rootAttrs: z } = e(R, () => I.pt), B = i(), V = t(), H = v(null);
 		function U() {
 			return H.value?.wrapRef ?? null;
 		}
@@ -91,14 +96,18 @@ var D = { class: "m-tabs__bar" }, O = ["aria-label"], k = [
 			!e || typeof ResizeObserver > "u" || (Q = new ResizeObserver(() => X()), Q.observe(e));
 		}), w(() => I.tabs, () => {
 			p(X);
-		}, { deep: !0 }), h(() => Q?.disconnect()), (e, n) => (_(), c("div", f(S(z), { class: ["m-tabs", `m-tabs--${d.type}`] }), [l("div", D, [
+		}, { deep: !0 }), h(() => Q?.disconnect()), (e, t) => (_(), c("div", f(S(z), { class: ["m-tabs", [
+			`m-tabs--${d.type}`,
+			`m-tabs--${d.size}`,
+			{ "m-tabs--centered": d.centered }
+		]] }), [l("div", D, [
 			W.value ? (_(), c("button", {
 				key: 0,
 				type: "button",
 				class: "m-tabs__scroll",
 				"aria-label": S(B).prev,
-				onClick: n[0] ||= (e) => Z(-1)
-			}, [u(t, {
+				onClick: t[0] ||= (e) => Z(-1)
+			}, [u(n, {
 				name: "chevron-left",
 				size: "sm"
 			})], 8, O)) : s("", !0),
@@ -112,7 +121,7 @@ var D = { class: "m-tabs__bar" }, O = ["aria-label"], k = [
 				role: "tablist",
 				"aria-label": S(B).tabs
 			}, {
-				default: T(() => [(_(!0), c(a, null, y(d.tabs, (e, n) => (_(), c("div", {
+				default: T(() => [(_(!0), c(a, null, y(d.tabs, (e, t) => (_(), c("div", {
 					key: e.value,
 					class: m(["m-tabs__item", { "m-tabs__item--active": G.value === e.value }])
 				}, [l("button", {
@@ -124,7 +133,7 @@ var D = { class: "m-tabs__bar" }, O = ["aria-label"], k = [
 					"aria-controls": `${S(V)}-panel-${e.value}`,
 					disabled: e.disabled,
 					onClick: (t) => K(e.value),
-					onKeydown: (e) => Y(e, n)
+					onKeydown: (e) => Y(e, t)
 				}, x(e.label), 43, k), q(e) ? (_(), c("button", {
 					key: 0,
 					type: "button",
@@ -132,7 +141,7 @@ var D = { class: "m-tabs__bar" }, O = ["aria-label"], k = [
 					"aria-label": S(B).closeTab,
 					disabled: e.disabled,
 					onClick: E((t) => J(e), ["stop"])
-				}, [u(t, {
+				}, [u(n, {
 					name: "close",
 					size: "sm"
 				})], 8, A)) : s("", !0)], 2))), 128))]),
@@ -143,8 +152,8 @@ var D = { class: "m-tabs__bar" }, O = ["aria-label"], k = [
 				type: "button",
 				class: "m-tabs__scroll",
 				"aria-label": S(B).next,
-				onClick: n[1] ||= (e) => Z(1)
-			}, [u(t, {
+				onClick: t[1] ||= (e) => Z(1)
+			}, [u(n, {
 				name: "chevron-right",
 				size: "sm"
 			})], 8, j)) : s("", !0),
@@ -153,8 +162,8 @@ var D = { class: "m-tabs__bar" }, O = ["aria-label"], k = [
 				type: "button",
 				class: "m-tabs__add",
 				"aria-label": S(B).addTab,
-				onClick: n[2] ||= (e) => L("add")
-			}, [u(t, {
+				onClick: t[2] ||= (e) => L("add")
+			}, [u(n, {
 				name: "plus",
 				size: "sm"
 			})], 8, M)) : s("", !0),