@varlet/ui 3.18.0-alpha.1781201095903 → 3.18.0

package/es/avatar/avatar.css

@@ -1 +1 @@
-:root { --avatar-text-color: #f5f5f5; --avatar-border-radius: 4px; --avatar-mini-size: 28px; --avatar-small-size: 36px; --avatar-normal-size: 48px; --avatar-large-size: 64px; --avatar-border: 2px solid #fff; --avatar-background-color: #bebebe; --avatar-hover-transform: scale(1.1);}.var-avatar { display: inline-flex; overflow: hidden; align-items: center; justify-content: center; color: var(--avatar-text-color); border-radius: var(--avatar-border-radius); background-color: var(--avatar-background-color); transition: background-color 0.25s; -webkit-tap-highlight-color: transparent;}.var-avatar img { width: 100%; height: 100%;}.var-avatar--mini { width: var(--avatar-mini-size); height: var(--avatar-mini-size);}.var-avatar--small { width: var(--avatar-small-size); height: var(--avatar-small-size);}.var-avatar--normal { width: var(--avatar-normal-size); height: var(--avatar-normal-size);}.var-avatar--large { width: var(--avatar-large-size); height: var(--avatar-large-size);}.var-avatar--round { border-radius: 50%;}.var-avatar--bordered { border: var(--avatar-border);}.var-avatar__text { padding: 0 4px; white-space: nowrap;}.var-avatar--hoverable { transition: transform 0.2s;}.var-avatar--hoverable:hover { transform: var(--avatar-hover-transform); cursor: pointer;}
+:root { --avatar-text-color: #f5f5f5; --avatar-border-radius: 4px; --avatar-mini-size: 28px; --avatar-small-size: 36px; --avatar-normal-size: 48px; --avatar-large-size: 64px; --avatar-border: 2px solid #fff; --avatar-background-color: #bebebe; --avatar-hover-transform: scale(1.1);}.var-avatar { display: inline-flex; overflow: hidden; align-items: center; justify-content: center; color: var(--avatar-text-color); border-radius: var(--avatar-border-radius); background-color: var(--avatar-background-color); transition: background-color 0.25s; -webkit-tap-highlight-color: transparent;}.var-avatar img { width: 100%; height: 100%;}.var-avatar--mini { width: var(--avatar-mini-size); height: var(--avatar-mini-size);}.var-avatar--small { width: var(--avatar-small-size); height: var(--avatar-small-size);}.var-avatar--normal { width: var(--avatar-normal-size); height: var(--avatar-normal-size);}.var-avatar--large { width: var(--avatar-large-size); height: var(--avatar-large-size);}.var-avatar--round { border-radius: 50%;}.var-avatar--bordered { border: var(--avatar-border);}.var-avatar__text { display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; white-space: nowrap;}.var-avatar--hoverable { transition: transform 0.2s;}.var-avatar--hoverable:hover { transform: var(--avatar-hover-transform); cursor: pointer;}

package/es/bottom-navigation/BottomNavigation.mjs

@@ -45,7 +45,7 @@ function __render__(_ctx, _cache) {
             _ctx.n(),
             _ctx.n("$--box"),
             [_ctx.fixed, _ctx.n("--fixed")],
-            [_ctx.border, _ctx.n("--border")],
+            [_ctx.bordered || _ctx.border, _ctx.n("--border")],
             [_ctx.safeArea, _ctx.n("--safe-area")],
             [_ctx.variant, _ctx.n("--variant")]
           ),

package/es/bottom-navigation/props.mjs

@@ -14,6 +14,7 @@ const props = {
   },
   fixed: Boolean,
   border: Boolean,
+  bordered: Boolean,
   variant: Boolean,
   safeArea: Boolean,
   activeColor: String,

package/es/card/card.css

@@ -1 +1 @@
-:root { --card-padding: 0 0 15px 0; --card-background: var(--color-surface-container-highest); --card-surface-low-background: var(--color-surface-container-highest); --card-filled-background: hsl(0, 0%, 93%); --card-outline-color: var(--color-outline); --card-border-radius: 4px; --card-image-width: 100%; --card-row-image-width: 140px; --card-image-height: 200px; --card-row-height: 140px; --card-title-color: #333; --card-title-font-size: 20px; --card-title-padding: 0 12px; --card-title-margin: 15px 0 0 0; --card-title-row-margin: 12px 0; --card-content-padding: 0 16px; --card-content-margin: 16px 0 0 0; --card-content-color: var(--color-on-surface-variant); --card-content-font-size: 14px; --card-content-row-margin: 16px 0 0 0; --card-subtitle-color: rgba(0, 0, 0, 0.6); --card-subtitle-font-size: 14px; --card-subtitle-padding: 0 12px; --card-subtitle-margin: 10px 0 0 0; --card-subtitle-row-margin: -8px 0 0 0; --card-description-color: rgba(0, 0, 0, 0.6); --card-description-font-size: 14px; --card-description-margin: 20px 0 0 0; --card-description-padding: 0 13px; --card-footer-padding: 0 12px; --card-footer-right: 13px; --card-footer-bottom: 9px; --card-footer-margin: 30px 0 0 0; --card-line-height: 22px; --card-row-line-height: 1.5; --card-floating-buttons-bottom: 16px; --card-floating-buttons-right: 16px; --card-floating-buttons-color: #fff; --card-close-button-icon-size: 24px; --card-close-button-size: 56px; --card-close-button-primary-color: #212121; --card-close-button-text-color: #fff; --card-close-button-border-radius: 50%;}.var-card { border-radius: var(--card-border-radius); overflow: hidden; width: 100%;}.var-card__floater { display: flex; flex-direction: column; position: relative; line-height: var(--card-line-height); background: var(--card-background); transition: background-color 0.25s, color 0.25s; transition-timing-function: cubic-bezier(0.45, 0.19, 0.06, 0.89);}.var-card__container { padding: var(--card-padding); flex-grow: 1; min-width: 0;}.var-card--layout-row .var-card__floater { min-height: var(--card-row-height); height: 100%; flex-direction: row; position: relative; line-height: var(--card-row-line-height);}.var-card__content { padding: var(--card-content-padding); margin: var(--card-content-margin); font-size: var(--card-content-font-size); color: var(--card-content-color); transition: padding 0.25s, margin 0.25s, font-size 0.25s;}.var-card--layout-row .var-card__content { max-width: 100%; margin: var(--card-title-row-margin);}.var-card__image { width: var(--card-image-width); height: var(--card-image-height); display: block; transition: all 0.25s;}.var-card--layout-row .var-card__image { width: var(--card-row-image-width); height: auto; display: block; flex-shrink: 0;}.var-card__title { font-size: var(--card-title-font-size); padding: var(--card-title-padding); margin: var(--card-title-margin); color: var(--card-title-color); word-break: break-word; transition: padding 0.25s, margin 0.25s, font-size 0.25s;}.var-card--layout-row .var-card__title { max-width: 100%; overflow: hidden; margin: var(--card-title-row-margin); text-overflow: ellipsis; white-space: nowrap;}.var-card__subtitle { font-size: var(--card-subtitle-font-size); color: var(--card-subtitle-color); padding: var(--card-subtitle-padding); margin: var(--card-subtitle-margin); word-break: break-word; transition: padding 0.25s, margin 0.25s, font-size 0.25s;}.var-card--layout-row .var-card__subtitle { margin: var(--card-subtitle-row-margin); text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}.var-card__description { font-size: var(--card-description-font-size); color: var(--card-description-color); margin: var(--card-description-margin); padding: var(--card-description-padding); word-break: break-all; transition: padding 0.25s, margin 0.25s, font-size 0.25s;}.var-card__footer { display: flex; justify-content: flex-end; padding: var(--card-footer-padding); margin: var(--card-footer-margin); transition: all 0.25s;}.var-card--layout-row .var-card__footer { position: absolute; padding: 0; right: var(--card-footer-right); bottom: var(--card-footer-bottom);}.var-card__floating-content { overflow: hidden; transition-timing-function: cubic-bezier(0.45, 0.19, 0.06, 0.89);}.var-card__floating-buttons { position: fixed; bottom: var(--card-floating-buttons-bottom); right: var(--card-floating-buttons-right); color: var(--card-floating-buttons-color);}.var-card__close-button[var-card-cover] { width: var(--card-close-button-size); height: var(--card-close-button-size); background-color: var(--card-close-button-primary-color); color: var(--card-close-button-text-color); border-radius: var(--card-close-button-border-radius);}.var-card__close-button-icon[var-card-cover] { font-size: var(--card-close-button-icon-size);}.var-card--outline { border: thin solid var(--card-outline-color);}.var-card--cursor { cursor: pointer;}.var-card--surface-low .var-card__floater { background-color: var(--card-surface-low-background);}.var-card--filled .var-card__floater { background-color: var(--card-filled-background);}
+:root { --card-padding: 0 0 15px 0; --card-background: var(--color-surface-container-highest); --card-surface-low-background: var(--color-surface-container-highest); --card-outlined-background: transparent; --card-filled-background: hsl(0, 0%, 93%); --card-outline-color: var(--color-outline); --card-border-radius: 4px; --card-image-width: 100%; --card-row-image-width: 140px; --card-image-height: 200px; --card-row-height: 140px; --card-title-color: #333; --card-title-font-size: 20px; --card-title-padding: 0 12px; --card-title-margin: 15px 0 0 0; --card-title-row-margin: 12px 0; --card-content-padding: 0 16px; --card-content-margin: 16px 0 0 0; --card-content-color: var(--color-on-surface-variant); --card-content-font-size: 14px; --card-content-row-margin: 16px 0 0 0; --card-subtitle-color: rgba(0, 0, 0, 0.6); --card-subtitle-font-size: 14px; --card-subtitle-padding: 0 12px; --card-subtitle-margin: 10px 0 0 0; --card-subtitle-row-margin: -8px 0 0 0; --card-description-color: rgba(0, 0, 0, 0.6); --card-description-font-size: 14px; --card-description-margin: 20px 0 0 0; --card-description-padding: 0 13px; --card-footer-padding: 0 12px; --card-footer-right: 13px; --card-footer-bottom: 9px; --card-footer-margin: 30px 0 0 0; --card-line-height: 22px; --card-row-line-height: 1.5; --card-floating-buttons-bottom: 16px; --card-floating-buttons-right: 16px; --card-floating-buttons-color: #fff; --card-close-button-icon-size: 24px; --card-close-button-size: 56px; --card-close-button-primary-color: #212121; --card-close-button-text-color: #fff; --card-close-button-border-radius: 50%;}.var-card { border-radius: var(--card-border-radius); overflow: hidden; width: 100%;}.var-card__floater { display: flex; flex-direction: column; position: relative; line-height: var(--card-line-height); background: var(--card-background); transition: background-color 0.25s, color 0.25s; transition-timing-function: cubic-bezier(0.45, 0.19, 0.06, 0.89);}.var-card__container { padding: var(--card-padding); flex-grow: 1; min-width: 0;}.var-card--layout-row .var-card__floater { min-height: var(--card-row-height); height: 100%; flex-direction: row; position: relative; line-height: var(--card-row-line-height);}.var-card__content { padding: var(--card-content-padding); margin: var(--card-content-margin); font-size: var(--card-content-font-size); color: var(--card-content-color); transition: padding 0.25s, margin 0.25s, font-size 0.25s;}.var-card--layout-row .var-card__content { max-width: 100%; margin: var(--card-title-row-margin);}.var-card__image { width: var(--card-image-width); height: var(--card-image-height); display: block; transition: all 0.25s;}.var-card--layout-row .var-card__image { width: var(--card-row-image-width); height: auto; display: block; flex-shrink: 0;}.var-card__title { font-size: var(--card-title-font-size); padding: var(--card-title-padding); margin: var(--card-title-margin); color: var(--card-title-color); word-break: break-word; transition: padding 0.25s, margin 0.25s, font-size 0.25s;}.var-card--layout-row .var-card__title { max-width: 100%; overflow: hidden; margin: var(--card-title-row-margin); text-overflow: ellipsis; white-space: nowrap;}.var-card__subtitle { font-size: var(--card-subtitle-font-size); color: var(--card-subtitle-color); padding: var(--card-subtitle-padding); margin: var(--card-subtitle-margin); word-break: break-word; transition: padding 0.25s, margin 0.25s, font-size 0.25s;}.var-card--layout-row .var-card__subtitle { margin: var(--card-subtitle-row-margin); text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}.var-card__description { font-size: var(--card-description-font-size); color: var(--card-description-color); margin: var(--card-description-margin); padding: var(--card-description-padding); word-break: break-all; transition: padding 0.25s, margin 0.25s, font-size 0.25s;}.var-card__footer { display: flex; justify-content: flex-end; padding: var(--card-footer-padding); margin: var(--card-footer-margin); transition: all 0.25s;}.var-card--layout-row .var-card__footer { position: absolute; padding: 0; right: var(--card-footer-right); bottom: var(--card-footer-bottom);}.var-card__floating-content { overflow: hidden; transition-timing-function: cubic-bezier(0.45, 0.19, 0.06, 0.89);}.var-card__floating-buttons { position: fixed; bottom: var(--card-floating-buttons-bottom); right: var(--card-floating-buttons-right); color: var(--card-floating-buttons-color);}.var-card__close-button[var-card-cover] { width: var(--card-close-button-size); height: var(--card-close-button-size); background-color: var(--card-close-button-primary-color); color: var(--card-close-button-text-color); border-radius: var(--card-close-button-border-radius);}.var-card__close-button-icon[var-card-cover] { font-size: var(--card-close-button-icon-size);}.var-card--outline { border: thin solid var(--card-outline-color);}.var-card--cursor { cursor: pointer;}.var-card--surface-low .var-card__floater { background-color: var(--card-surface-low-background);}.var-card--outline .var-card__floater { background-color: var(--card-outlined-background);}.var-card--filled .var-card__floater { background-color: var(--card-filled-background);}

package/es/data-table/DataTable.mjs

@@ -63,6 +63,7 @@ function __render__(_ctx, _cache) {
           [!_ctx.plain, _ctx.formatElevation(_ctx.elevation, 1)],
           _ctx.n("$--box"),
           [_ctx.surface === "low", _ctx.n("--surface-low")],
+          [_ctx.bordered, _ctx.n("--bordered")],
           [_ctx.cellBordered, _ctx.n("--cell-bordered")],
           [_ctx.plain, _ctx.n("--plain")],
           [_ctx.showPagination, _ctx.n("--with-footer")],

package/es/data-table/dataTable.css

@@ -1 +1 @@
-:root { --data-table-background: #fff; --data-table-surface-low-background: var(--color-surface-container-highest); --data-table-header-cell-background: #fff; --data-table-header-cell-text-color: rgba(0, 0, 0, 0.6); --data-table-body-cell-text-color: #555; --data-table-border-color: var(--color-outline); --data-table-row-hover-background: #f5f5f5; --data-table-surface-low-row-hover-background: var(--color-surface-container-highest); --data-table-plain-row-hover-background: hsla(var(--hsl-on-surface), 0.04); --data-table-sort-trigger-color: hsla(var(--hsl-on-surface), 0.42); --data-table-sort-trigger-active-color: var(--color-primary); --data-table-sort-trigger-hover-background: hsla(var(--hsl-primary), 0.08); --data-table-empty-text-color: var(--color-text-disabled); --data-table-resize-trigger-color: hsla(var(--hsl-on-surface-variant), 0.36); --data-table-fixed-shadow-color: rgba(0, 0, 0, 0.04); --data-table-border-radius: 2px; --data-table-cell-padding: 8px 16px; --data-table-selection-cell-padding: 8px 8px; --data-table-expand-cell-padding: 8px 8px; --data-table-cell-font-size: 14px; --data-table-header-font-size: 14px; --data-table-header-font-weight: 500; --data-table-row-height: 46px; --data-table-row-small-height: 40px; --data-table-row-large-height: 52px; --data-table-footer-padding: 12px 16px; --data-table-empty-padding: 48px 16px;}.var-data-table { --scrollbar-track-background: var(--data-table-background); width: 100%; border-radius: var(--data-table-border-radius); background: var(--data-table-background);}.var-data-table * { box-sizing: border-box;}.var-data-table__container { position: relative; width: 100%; max-width: 100%;}.var-data-table__table { min-width: 100%; border-spacing: 0; border-collapse: collapse; line-height: normal; table-layout: fixed;}.var-data-table__header-row { background: var(--data-table-header-cell-background);}.var-data-table__row { background: var(--data-table-background); border-bottom: 1px solid var(--data-table-border-color); transition: background-color 0.25s;}.var-data-table__row:hover { background: var(--data-table-row-hover-background);}.var-data-table__row:last-child { border-bottom: 0;}.var-data-table--surface-low { --data-table-background: var(--data-table-surface-low-background); --data-table-header-cell-background: var(--data-table-surface-low-background); --data-table-row-hover-background: var(--data-table-surface-low-row-hover-background);}.var-data-table--plain { --data-table-background: transparent; --data-table-header-cell-background: transparent; --data-table-row-hover-background: var(--data-table-plain-row-hover-background); border-radius: 0;}.var-data-table__cell { height: var(--data-table-row-height); padding: var(--data-table-cell-padding); font-size: var(--data-table-cell-font-size); vertical-align: middle;}.var-data-table--cell-bordered .var-data-table__cell:not(:last-child) { border-right: 1px solid var(--data-table-border-color);}.var-data-table__header-cell { color: var(--data-table-header-cell-text-color); font-size: var(--data-table-header-font-size); font-weight: var(--data-table-header-font-weight); background: var(--data-table-header-cell-background); box-shadow: inset 0 -1px 0 var(--data-table-border-color); position: sticky; top: 0;}.var-data-table__sort-trigger { display: flex; align-items: center; width: auto; height: auto; padding: var(--data-table-cell-padding); border: 0; border-radius: 0; background: transparent; color: var(--data-table-sort-trigger-color); cursor: pointer; text-align: inherit; transition: color 0.2s ease, background-color 0.2s ease;}.var-data-table__sort-trigger:hover,.var-data-table__sort-trigger:focus-visible { background: var(--data-table-sort-trigger-hover-background);}.var-data-table__sort-trigger:focus-visible { outline: none;}.var-data-table__sort-trigger--align-left { justify-content: flex-start;}.var-data-table__sort-trigger--align-center { justify-content: center;}.var-data-table__sort-trigger--align-right { justify-content: flex-end;}.var-data-table__sort-trigger--active { color: var(--data-table-sort-trigger-active-color);}.var-data-table__sort-trigger-text { display: inline-flex; align-items: center; min-width: 0;}.var-data-table__sort-trigger-icon { display: inline-flex; flex-direction: column; justify-content: center; gap: 0; margin-inline-start: 8px; vertical-align: middle; color: inherit; opacity: 0.72;}.var-data-table__sort-trigger-icon-up[var-data-table-cover],.var-data-table__sort-trigger-icon-down[var-data-table-cover] { display: block; line-height: 1; opacity: 0.45; transition: opacity 0.2s ease;}.var-data-table__sort-trigger-icon-up[var-data-table-cover] { margin-bottom: -5px;}.var-data-table__sort-trigger-icon-down[var-data-table-cover] { margin-top: -5px;}.var-data-table__sort-trigger-icon--active[var-data-table-cover] { opacity: 1;}.var-data-table__resize-trigger { position: absolute; top: 0; right: -5px; z-index: 1; width: 10px; height: 100%; padding: 0; border: 0; background: transparent; cursor: col-resize; touch-action: none;}.var-data-table__resize-trigger::before { content: ''; position: absolute; top: 10px; left: 50%; bottom: 10px; width: 2px; transform: translateX(-50%); background: var(--data-table-resize-trigger-color);}.var-data-table__body-cell { color: var(--data-table-body-cell-text-color); background: inherit; background-clip: padding-box;}.var-data-table__summary-row { background: var(--data-table-background); border-top: 1px solid var(--data-table-border-color);}.var-data-table__summary-cell { color: var(--data-table-body-cell-text-color); background: inherit; background-clip: padding-box; font-weight: 500;}.var-data-table__fixed-cell { background: inherit; background-clip: padding-box;}.var-data-table__fixed-cell--shadow-right::after { content: ''; position: absolute; top: 0; right: -14px; bottom: 0; width: 14px; pointer-events: none; background: linear-gradient(to right, var(--data-table-fixed-shadow-color), transparent);}.var-data-table__fixed-cell--shadow-left::before { content: ''; position: absolute; top: 0; left: -14px; bottom: 0; width: 14px; pointer-events: none; background: linear-gradient(to left, var(--data-table-fixed-shadow-color), transparent);}.var-data-table__selection-cell,.var-data-table__expand-cell { text-align: center; min-width: 52px;}.var-data-table__selection-cell { padding: var(--data-table-selection-cell-padding);}.var-data-table__expand-cell { padding: var(--data-table-expand-cell-padding);}.var-data-table__selection-cell .var-checkbox[var-data-table-cover],.var-data-table__selection-cell .var-radio[var-data-table-cover] { transform: none;}.var-data-table__selection-cell .var-checkbox[var-data-table-cover] .var-checkbox__wrap,.var-data-table__selection-cell .var-radio[var-data-table-cover] .var-radio__wrap { display: flex; align-items: center; justify-content: center; width: 100%;}.var-data-table__expand-trigger { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer;}.var-data-table__expand-trigger:disabled { opacity: 0.4; cursor: not-allowed;}.var-data-table__tree-cell { display: flex; align-items: center; min-width: 0;}.var-data-table__tree-trigger,.var-data-table__tree-indent { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; margin-right: 4px;}.var-data-table__tree-trigger { padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer;}.var-data-table__expanded-row { background: var(--data-table-background); border-bottom: 1px solid var(--data-table-border-color);}.var-data-table__expanded-cell { padding-top: 12px; padding-bottom: 12px;}.var-data-table__empty { display: flex; align-items: center; justify-content: center; width: 100%; color: var(--data-table-empty-text-color); padding: var(--data-table-empty-padding);}.var-data-table__footer { display: flex; align-items: center; justify-content: space-between; padding: var(--data-table-footer-padding); border-top: 1px solid var(--data-table-border-color); background: var(--data-table-background); overflow: auto;}.var-data-table__footer .var-pagination[var-data-table-cover] { margin-left: auto;}.var-data-table--small .var-data-table__cell { height: var(--data-table-row-small-height);}.var-data-table--large .var-data-table__cell { height: var(--data-table-row-large-height);}
+:root { --data-table-background: #fff; --data-table-surface-low-background: var(--color-surface-container-highest); --data-table-header-cell-background: #fff; --data-table-header-cell-text-color: rgba(0, 0, 0, 0.6); --data-table-body-cell-text-color: #555; --data-table-border-color: var(--color-outline); --data-table-row-hover-background: #f5f5f5; --data-table-surface-low-row-hover-background: var(--color-surface-container-highest); --data-table-plain-row-hover-background: hsla(var(--hsl-on-surface), 0.04); --data-table-sort-trigger-color: hsla(var(--hsl-on-surface), 0.42); --data-table-sort-trigger-active-color: var(--color-primary); --data-table-sort-trigger-hover-background: hsla(var(--hsl-primary), 0.08); --data-table-empty-text-color: var(--color-text-disabled); --data-table-resize-trigger-color: hsla(var(--hsl-on-surface-variant), 0.36); --data-table-fixed-shadow-color: rgba(0, 0, 0, 0.04); --data-table-border-radius: 2px; --data-table-cell-normal-padding: 8px 16px; --data-table-cell-small-padding: 4px 16px; --data-table-cell-large-padding: 11px 16px; --data-table-selection-cell-normal-padding: 8px 8px; --data-table-selection-cell-small-padding: 4px 8px; --data-table-selection-cell-large-padding: 11px 8px; --data-table-expand-cell-normal-padding: 8px 8px; --data-table-expand-cell-small-padding: 4px 8px; --data-table-expand-cell-large-padding: 11px 8px; --data-table-cell-font-size: 14px; --data-table-header-font-size: 14px; --data-table-header-font-weight: 500; --data-table-row-height: 46px; --data-table-row-small-height: 40px; --data-table-row-large-height: 52px; --data-table-footer-padding: 12px 16px; --data-table-empty-padding: 48px 16px;}.var-data-table { --scrollbar-track-background: var(--data-table-background); width: 100%; border-radius: var(--data-table-border-radius); background: var(--data-table-background);}.var-data-table * { box-sizing: border-box;}.var-data-table__container { position: relative; width: 100%; max-width: 100%;}.var-data-table__table { min-width: 100%; border-spacing: 0; border-collapse: collapse; line-height: normal; table-layout: fixed;}.var-data-table__header-row { background: var(--data-table-header-cell-background);}.var-data-table__row { background: var(--data-table-background); border-bottom: 1px solid var(--data-table-border-color); transition: background-color 0.25s;}.var-data-table__row:hover { background: var(--data-table-row-hover-background);}.var-data-table__row:last-child { border-bottom: 0;}.var-data-table--surface-low { --data-table-background: var(--data-table-surface-low-background); --data-table-header-cell-background: var(--data-table-surface-low-background); --data-table-row-hover-background: var(--data-table-surface-low-row-hover-background);}.var-data-table--plain { --data-table-background: transparent; --data-table-header-cell-background: transparent; --data-table-row-hover-background: var(--data-table-plain-row-hover-background); border-radius: 0;}.var-data-table--bordered { border: 1px solid var(--data-table-border-color);}.var-data-table--plain.var-data-table--bordered { border-radius: var(--data-table-border-radius);}.var-data-table__cell { height: var(--data-table-row-height); padding: var(--data-table-cell-normal-padding); font-size: var(--data-table-cell-font-size); vertical-align: middle;}.var-data-table--cell-bordered .var-data-table__cell:not(:last-child) { border-right: 1px solid var(--data-table-border-color);}.var-data-table__header-cell { color: var(--data-table-header-cell-text-color); font-size: var(--data-table-header-font-size); font-weight: var(--data-table-header-font-weight); background: var(--data-table-header-cell-background); box-shadow: inset 0 -1px 0 var(--data-table-border-color); position: sticky; top: 0;}.var-data-table__sort-trigger { display: flex; align-items: center; width: auto; height: auto; padding: var(--data-table-cell-normal-padding); border: 0; border-radius: 0; background: transparent; color: var(--data-table-sort-trigger-color); cursor: pointer; text-align: inherit; transition: color 0.2s ease, background-color 0.2s ease;}.var-data-table__sort-trigger:hover,.var-data-table__sort-trigger:focus-visible { background: var(--data-table-sort-trigger-hover-background);}.var-data-table__sort-trigger:focus-visible { outline: none;}.var-data-table__sort-trigger--align-left { justify-content: flex-start;}.var-data-table__sort-trigger--align-center { justify-content: center;}.var-data-table__sort-trigger--align-right { justify-content: flex-end;}.var-data-table__sort-trigger--active { color: var(--data-table-sort-trigger-active-color);}.var-data-table__sort-trigger-text { display: inline-flex; align-items: center; min-width: 0;}.var-data-table__sort-trigger-icon { display: inline-flex; flex-direction: column; justify-content: center; gap: 0; margin-inline-start: 8px; vertical-align: middle; color: inherit; opacity: 0.72;}.var-data-table__sort-trigger-icon-up[var-data-table-cover],.var-data-table__sort-trigger-icon-down[var-data-table-cover] { display: block; line-height: 1; opacity: 0.45; transition: opacity 0.2s ease;}.var-data-table__sort-trigger-icon-up[var-data-table-cover] { margin-bottom: -5px;}.var-data-table__sort-trigger-icon-down[var-data-table-cover] { margin-top: -5px;}.var-data-table__sort-trigger-icon--active[var-data-table-cover] { opacity: 1;}.var-data-table__resize-trigger { position: absolute; top: 0; right: -5px; z-index: 1; width: 10px; height: 100%; padding: 0; border: 0; background: transparent; cursor: col-resize; touch-action: none;}.var-data-table__resize-trigger::before { content: ''; position: absolute; top: 10px; left: 50%; bottom: 10px; width: 2px; transform: translateX(-50%); background: var(--data-table-resize-trigger-color);}.var-data-table__body-cell { color: var(--data-table-body-cell-text-color); background: inherit; background-clip: padding-box;}.var-data-table__summary-row { background: var(--data-table-background); border-top: 1px solid var(--data-table-border-color);}.var-data-table__summary-cell { color: var(--data-table-body-cell-text-color); background: inherit; background-clip: padding-box; font-weight: 500;}.var-data-table__fixed-cell { background: inherit; background-clip: padding-box;}.var-data-table__fixed-cell--shadow-right::after { content: ''; position: absolute; top: 0; right: -14px; bottom: 0; width: 14px; pointer-events: none; background: linear-gradient(to right, var(--data-table-fixed-shadow-color), transparent);}.var-data-table__fixed-cell--shadow-left::before { content: ''; position: absolute; top: 0; left: -14px; bottom: 0; width: 14px; pointer-events: none; background: linear-gradient(to left, var(--data-table-fixed-shadow-color), transparent);}.var-data-table__selection-cell,.var-data-table__expand-cell { text-align: center; min-width: 52px;}.var-data-table__selection-cell { padding: var(--data-table-selection-cell-normal-padding);}.var-data-table__expand-cell { padding: var(--data-table-expand-cell-normal-padding);}.var-data-table__selection-cell .var-checkbox[var-data-table-cover],.var-data-table__selection-cell .var-radio[var-data-table-cover] { transform: none;}.var-data-table__selection-cell .var-checkbox[var-data-table-cover] .var-checkbox__wrap,.var-data-table__selection-cell .var-radio[var-data-table-cover] .var-radio__wrap { display: flex; align-items: center; justify-content: center; width: 100%;}.var-data-table__expand-trigger { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer;}.var-data-table__expand-trigger:disabled { opacity: 0.4; cursor: not-allowed;}.var-data-table__tree-cell { display: flex; align-items: center; min-width: 0;}.var-data-table__tree-trigger,.var-data-table__tree-indent { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; margin-right: 4px;}.var-data-table__tree-trigger { padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer;}.var-data-table__expanded-row { background: var(--data-table-background); border-bottom: 1px solid var(--data-table-border-color);}.var-data-table__expanded-cell { padding-top: 12px; padding-bottom: 12px;}.var-data-table__empty { display: flex; align-items: center; justify-content: center; width: 100%; color: var(--data-table-empty-text-color); padding: var(--data-table-empty-padding);}.var-data-table__footer { display: flex; align-items: center; justify-content: space-between; padding: var(--data-table-footer-padding); border-top: 1px solid var(--data-table-border-color); background: var(--data-table-background); overflow: auto;}.var-data-table__footer .var-pagination[var-data-table-cover] { margin-left: auto;}.var-data-table--small .var-data-table__cell { height: var(--data-table-row-small-height); padding: var(--data-table-cell-small-padding);}.var-data-table--small .var-data-table__selection-cell { padding: var(--data-table-selection-cell-small-padding);}.var-data-table--small .var-data-table__expand-cell { padding: var(--data-table-expand-cell-small-padding);}.var-data-table--large .var-data-table__cell { height: var(--data-table-row-large-height); padding: var(--data-table-cell-large-padding);}.var-data-table--large .var-data-table__selection-cell { padding: var(--data-table-selection-cell-large-padding);}.var-data-table--large .var-data-table__expand-cell { padding: var(--data-table-expand-cell-large-padding);}

package/es/data-table/props.mjs

@@ -74,6 +74,7 @@ const props = {
     default: true
   },
   cellBordered: Boolean,
+  bordered: Boolean,
   tableLayout: {
     type: String,
     default: "auto"

package/es/dialog/Dialog.mjs

@@ -1,4 +1,6 @@
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -14,9 +16,10 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import { call } from "@varlet/shared";
 import { useVModel } from "@varlet/use";
-import { defineComponent, ref, watch } from "vue";
+import { computed, defineComponent, ref, watch } from "vue";
 import VarButton from "../button/index.mjs";
 import { t } from "../locale/index.mjs";
 import { injectLocaleProvider } from "../locale-provider/provide.mjs";
@@ -25,7 +28,7 @@ import { createNamespace } from "../utils/components.mjs";
 import { toSizeUnit } from "../utils/elements.mjs";
 import { props } from "./props.mjs";
 const { name, n, classes } = createNamespace("dialog");
-import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, resolveComponent as _resolveComponent, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, mergeProps as _mergeProps } from "vue";
+import { renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, normalizeClass as _normalizeClass, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, resolveComponent as _resolveComponent, mergeProps as _mergeProps, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode } from "vue";
 function __render__(_ctx, _cache) {
   const _component_var_button = _resolveComponent("var-button");
   const _component_var_popup = _resolveComponent("var-popup");
@@ -105,17 +108,11 @@ function __render__(_ctx, _cache) {
                 class: _normalizeClass(_ctx.n("actions"))
               },
               [
-                _ctx.cancelButton ? (_openBlock(), _createBlock(_component_var_button, {
-                  key: 0,
-                  class: _normalizeClass(_ctx.classes(_ctx.n("button"), _ctx.n("cancel-button"))),
+                _ctx.cancelButton ? (_openBlock(), _createBlock(_component_var_button, _mergeProps({ key: 0 }, _ctx.cancelButtonNormalizedProps, {
+                  class: _ctx.classes(_ctx.n("button"), _ctx.n("cancel-button"), [_ctx.cancelButtonProps != null, _ctx.n("--with-button-props")]),
                   "var-dialog-cover": "",
-                  text: "",
-                  "text-color": _ctx.cancelButtonTextColor,
-                  color: _ctx.cancelButtonColor,
-                  loading: _ctx.cancelButtonLoading,
-                  disabled: _ctx.cancelButtonDisabled,
                   onClick: _ctx.cancel
-                }, {
+                }), {
                   default: _withCtx(() => {
                     var _a;
                     return [
@@ -128,18 +125,12 @@ function __render__(_ctx, _cache) {
                   }),
                   _: 1
                   /* STABLE */
-                }, 8, ["class", "text-color", "color", "loading", "disabled", "onClick"])) : _createCommentVNode("v-if", true),
-                _ctx.confirmButton ? (_openBlock(), _createBlock(_component_var_button, {
-                  key: 1,
-                  class: _normalizeClass(_ctx.classes(_ctx.n("button"), _ctx.n("confirm-button"))),
+                }, 16, ["class", "onClick"])) : _createCommentVNode("v-if", true),
+                _ctx.confirmButton ? (_openBlock(), _createBlock(_component_var_button, _mergeProps({ key: 1 }, _ctx.confirmButtonNormalizedProps, {
+                  class: _ctx.classes(_ctx.n("button"), _ctx.n("confirm-button"), [_ctx.confirmButtonProps != null, _ctx.n("--with-button-props")]),
                   "var-dialog-cover": "",
-                  text: "",
-                  "text-color": _ctx.confirmButtonTextColor,
-                  color: _ctx.confirmButtonColor,
-                  loading: _ctx.confirmButtonLoading,
-                  disabled: _ctx.confirmButtonDisabled,
                   onClick: _ctx.confirm
-                }, {
+                }), {
                   default: _withCtx(() => {
                     var _a;
                     return [
@@ -152,7 +143,7 @@ function __render__(_ctx, _cache) {
                   }),
                   _: 1
                   /* STABLE */
-                }, 8, ["class", "text-color", "color", "loading", "disabled", "onClick"])) : _createCommentVNode("v-if", true)
+                }, 16, ["class", "onClick"])) : _createCommentVNode("v-if", true)
               ],
               2
               /* CLASS */
@@ -183,6 +174,28 @@ const __sfc__ = defineComponent({
     const cancelButtonLoading = useVModel(props2, "cancelButtonLoading");
     const confirmButtonDisabled = useVModel(props2, "confirmButtonDisabled");
     const cancelButtonDisabled = useVModel(props2, "cancelButtonDisabled");
+    const confirmButtonNormalizedProps = computed(() => {
+      var _a, _b, _c, _d, _e, _f;
+      return __spreadProps(__spreadValues({
+        text: true
+      }, props2.confirmButtonProps), {
+        textColor: (_b = props2.confirmButtonTextColor) != null ? _b : (_a = props2.confirmButtonProps) == null ? void 0 : _a.textColor,
+        color: (_d = props2.confirmButtonColor) != null ? _d : (_c = props2.confirmButtonProps) == null ? void 0 : _c.color,
+        loading: confirmButtonLoading.value || ((_e = props2.confirmButtonProps) == null ? void 0 : _e.loading),
+        disabled: confirmButtonDisabled.value || ((_f = props2.confirmButtonProps) == null ? void 0 : _f.disabled)
+      });
+    });
+    const cancelButtonNormalizedProps = computed(() => {
+      var _a, _b, _c, _d, _e, _f;
+      return __spreadProps(__spreadValues({
+        text: true
+      }, props2.cancelButtonProps), {
+        textColor: (_b = props2.cancelButtonTextColor) != null ? _b : (_a = props2.cancelButtonProps) == null ? void 0 : _a.textColor,
+        color: (_d = props2.cancelButtonColor) != null ? _d : (_c = props2.cancelButtonProps) == null ? void 0 : _c.color,
+        loading: cancelButtonLoading.value || ((_e = props2.cancelButtonProps) == null ? void 0 : _e.loading),
+        disabled: cancelButtonDisabled.value || ((_f = props2.cancelButtonProps) == null ? void 0 : _f.disabled)
+      });
+    });
     const exposedRefs = {
       confirmButtonLoading,
       cancelButtonLoading,
@@ -254,6 +267,8 @@ const __sfc__ = defineComponent({
       cancelButtonLoading,
       confirmButtonDisabled,
       cancelButtonDisabled,
+      confirmButtonNormalizedProps,
+      cancelButtonNormalizedProps,
       pt,
       t,
       n,

package/es/dialog/dialog.css

@@ -1 +1 @@
-:root { --dialog-width: 280px; --dialog-border-radius: 3px; --dialog-title-padding: 20px 20px 0; --dialog-message-color: #888; --dialog-message-padding: 12px 20px; --dialog-message-line-height: 24px; --dialog-message-font-size: var(--font-size-md); --dialog-title-font-size: var(--font-size-lg); --dialog-actions-padding: 0 12px 12px; --dialog-button-margin-left: 6px; --dialog-title-color: #555; --dialog-confirm-button-color: var(--color-primary); --dialog-cancel-button-color: var(--color-primary); --dialog-background: var(--color-surface-container-low);}.var-dialog { width: var(--dialog-width); background: var(--dialog-background); transition: 0.25s background-color;}.var-dialog__popup[var-dialog-cover] { background: transparent; border-radius: var(--dialog-border-radius);}.var-dialog__title { font-size: var(--dialog-title-font-size); font-weight: 400; padding: var(--dialog-title-padding); color: var(--dialog-title-color);}.var-dialog__message { padding: var(--dialog-message-padding); color: var(--dialog-message-color); line-height: var(--dialog-message-line-height); font-size: var(--dialog-message-font-size); word-wrap: break-word;}.var-dialog__actions { display: flex; justify-content: flex-end; padding: var(--dialog-actions-padding);}.var-dialog__button[var-dialog-cover] { margin-left: var(--dialog-button-margin-left); background-color: transparent; box-shadow: none;}.var-dialog__button[var-dialog-cover]:active { box-shadow: none;}.var-dialog__confirm-button[var-dialog-cover]:not(.var-button--disabled) { color: var(--dialog-confirm-button-color);}.var-dialog__cancel-button[var-dialog-cover]:not(.var-button--disabled) { color: var(--dialog-cancel-button-color);}
+:root { --dialog-width: 280px; --dialog-border-radius: 3px; --dialog-title-padding: 20px 20px 0; --dialog-message-color: #888; --dialog-message-padding: 12px 20px; --dialog-message-line-height: 24px; --dialog-message-font-size: var(--font-size-md); --dialog-title-font-size: var(--font-size-lg); --dialog-actions-padding: 0 12px 12px; --dialog-button-margin-left: 6px; --dialog-title-color: #555; --dialog-confirm-button-color: var(--color-primary); --dialog-cancel-button-color: var(--color-primary); --dialog-background: var(--color-surface-container-low);}.var-dialog { width: var(--dialog-width); background: var(--dialog-background); transition: 0.25s background-color;}.var-dialog__popup[var-dialog-cover] { background: transparent; border-radius: var(--dialog-border-radius);}.var-dialog__title { font-size: var(--dialog-title-font-size); font-weight: 400; padding: var(--dialog-title-padding); color: var(--dialog-title-color);}.var-dialog__message { padding: var(--dialog-message-padding); color: var(--dialog-message-color); line-height: var(--dialog-message-line-height); font-size: var(--dialog-message-font-size); word-wrap: break-word;}.var-dialog__actions { display: flex; justify-content: flex-end; padding: var(--dialog-actions-padding);}.var-dialog__button[var-dialog-cover] { margin-left: var(--dialog-button-margin-left);}.var-dialog__button[var-dialog-cover]:not(.var-dialog--with-button-props).var-dialog__confirm-button:not(.var-button--disabled) { color: var(--dialog-confirm-button-color);}.var-dialog__button[var-dialog-cover]:not(.var-dialog--with-button-props).var-dialog__cancel-button:not(.var-button--disabled) { color: var(--dialog-cancel-button-color);}

package/es/dialog/props.mjs

@@ -39,6 +39,8 @@ const props = __spreadValues({
   cancelButtonTextColor: String,
   confirmButtonColor: String,
   cancelButtonColor: String,
+  confirmButtonProps: Object,
+  cancelButtonProps: Object,
   confirmButtonLoading: Boolean,
   cancelButtonLoading: Boolean,
   confirmButtonDisabled: Boolean,

package/es/index.bundle.mjs

@@ -304,7 +304,7 @@ import './tree-menu/style/index.mjs'
 import './uploader/style/index.mjs'
 import './watermark/style/index.mjs'
 
-const version = '3.18.0-alpha.1781201095903'
+const version = '3.18.0'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/index.mjs

@@ -202,7 +202,7 @@ export * from './tree-menu/index.mjs'
 export * from './uploader/index.mjs'
 export * from './watermark/index.mjs'
 
-const version = '3.18.0-alpha.1781201095903'
+const version = '3.18.0'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/paper/Paper.mjs

@@ -19,10 +19,12 @@ function __render__(_ctx, _cache) {
         _ctx.classes(
           _ctx.n(),
           _ctx.n("$--box"),
-          _ctx.formatElevation(_ctx.elevation, 2),
+          [_ctx.variant === "standard", _ctx.formatElevation(_ctx.elevation, 2)],
           [_ctx.onClick || !_ctx.normalizedHoverable.disabled, _ctx.n("--cursor")],
           [_ctx.round, _ctx.n("--round")],
           [_ctx.surfaceLow, _ctx.n("--surface-low")],
+          [_ctx.variant === "outlined", _ctx.n("--outlined")],
+          [_ctx.variant === "filled", _ctx.n("--filled")],
           [_ctx.inline, _ctx.n("$--inline-flex")]
         )
       ),
@@ -55,7 +57,7 @@ const __sfc__ = defineComponent({
   },
   props,
   setup(props2) {
-    const surfaceLow = computed(() => props2.surface === "low");
+    const surfaceLow = computed(() => props2.surface === "low" && props2.variant !== "filled");
     const { hovering, handleHovering } = useHoverOverlay();
     const normalizedRipple = computed(() => normalizeRipple(props2.ripple));
     const normalizedHoverable = computed(() => normalizeHoverable(props2.hoverable));

package/es/paper/paper.css

@@ -1 +1 @@
-:root { --paper-background: var(--color-surface-container-highest); --paper-surface-low-background: var(--color-surface-container-highest); --paper-border-radius: 4px;}.var-paper { position: relative; background: var(--paper-background); transition: background-color 0.25s; overflow: hidden; border-radius: var(--paper-border-radius); -webkit-tap-highlight-color: transparent;}.var-paper--round { border-radius: 50%;}.var-paper--cursor { cursor: pointer;}.var-paper--surface-low { background: var(--paper-surface-low-background);}
+:root { --paper-background: var(--color-surface-container-highest); --paper-surface-low-background: var(--color-surface-container-highest); --paper-outlined-background: transparent; --paper-filled-background: hsl(0, 0%, 93%); --paper-outline-color: var(--color-outline); --paper-border-radius: 4px;}.var-paper { position: relative; background: var(--paper-background); transition: background-color 0.25s; overflow: hidden; border-radius: var(--paper-border-radius); -webkit-tap-highlight-color: transparent;}.var-paper--round { border-radius: 50%;}.var-paper--cursor { cursor: pointer;}.var-paper--surface-low { background: var(--paper-surface-low-background);}.var-paper--outlined { border: thin solid var(--paper-outline-color); background: var(--paper-outlined-background);}.var-paper--filled { background: var(--paper-filled-background);}

package/es/paper/props.mjs

@@ -13,6 +13,10 @@ const props = {
   height: [Number, String],
   round: Boolean,
   inline: Boolean,
+  variant: {
+    type: String,
+    default: "standard"
+  },
   surface: String,
   hoverable: {
     type: [Boolean, Object],

package/es/rail-navigation/RailNavigation.mjs

@@ -9,7 +9,7 @@ function __render__(_ctx, _cache) {
   return _openBlock(), _createElementBlock(
     "aside",
     _mergeProps({
-      class: _ctx.classes(_ctx.n(), _ctx.n("$--box"), [_ctx.border, _ctx.n("--border")])
+      class: _ctx.classes(_ctx.n(), _ctx.n("$--box"), [_ctx.bordered, _ctx.n("--border")])
     }, _ctx.$attrs),
     [
       _ctx.$slots.start ? (_openBlock(), _createElementBlock(

package/es/rail-navigation/props.mjs

@@ -12,7 +12,7 @@ const props = {
     type: Boolean,
     default: true
   },
-  border: Boolean,
+  bordered: Boolean,
   onChange: defineListenerProp(),
   "onUpdate:active": defineListenerProp()
 };

package/es/table/Table.mjs

@@ -14,6 +14,7 @@ function __render__(_ctx, _cache) {
           [!_ctx.plain, _ctx.formatElevation(_ctx.elevation, 1)],
           _ctx.n("$--box"),
           [_ctx.surfaceLow, _ctx.n("--surface-low")],
+          [_ctx.bordered, _ctx.n("--bordered")],
           [_ctx.plain, _ctx.n("--plain")]
         )
       )

package/es/table/props.mjs

@@ -11,7 +11,8 @@ const props = {
     default: true
   },
   surface: String,
-  plain: Boolean
+  plain: Boolean,
+  bordered: Boolean
 };
 export {
   props

package/es/table/table.css

@@ -1 +1 @@
-:root { --table-background: #fff; --table-surface-low-background: var(--color-surface-container-highest); --table-surface-low-row-hover-background: var(--color-surface-container-highest); --table-plain-row-hover-background: hsla(var(--hsl-on-surface), 0.04); --table-border-radius: 2px; --table-thead-border-bottom: thin solid var(--color-outline); --table-thead-th-text-color: rgba(0, 0, 0, 0.6); --table-thead-th-text-align: left; --table-thead-th-font-size: 14px; --table-thead-th-font-weight: 500; --table-thead-tr-border-bottom: thin solid var(--color-outline); --table-tbody-tr-hover-background: #f5f5f5; --table-tbody-tr-border-bottom: thin solid var(--color-outline); --table-tbody-td-text-color: #555; --table-tbody-td-font-size: 14px; --table-tbody-td-text-align: left; --table-row-height: 46px; --table-row-padding: 8px 16px; --table-footer-border-top: thin solid var(--color-outline);}.var-table { --scrollbar-track-background: var(--table-background); width: 100%; border-radius: var(--table-border-radius);}.var-table * { box-sizing: border-box;}.var-table__main { width: 100%; overflow: auto;}.var-table__main > table { min-width: 100%; display: table; border-spacing: 0; border-collapse: collapse; line-height: normal;}.var-table__main > table thead { display: table-header-group; border-bottom: var(--table-thead-border-bottom);}.var-table__main > table thead tr { background: var(--table-background);}.var-table__main > table thead tr th { color: var(--table-thead-th-text-color); font-size: var(--table-thead-th-font-size);}.var-table__main > table thead tr:not(:last-child) { border-bottom: var(--table-thead-tr-border-bottom);}.var-table__main > table tbody { display: table-row-group;}.var-table__main > table tbody tr { display: table-row; outline: 0; vertical-align: middle; background: var(--table-background);}.var-table__main > table tbody tr:hover { background: var(--table-tbody-tr-hover-background); transition: background-color 0.25s;}.var-table__main > table tbody tr:not(:last-child) { border-bottom: var(--table-tbody-tr-border-bottom);}.var-table__main > table tbody td { color: var(--table-tbody-td-text-color); font-size: var(--table-tbody-td-font-size); background: inherit; background-clip: padding-box;}.var-table__main > table th { display: table-cell; height: var(--table-row-height); padding: var(--table-row-padding); font-weight: var(--table-thead-th-font-weight); text-align: var(--table-thead-th-text-align);}.var-table__main > table td { display: table-cell; padding: var(--table-row-padding); height: var(--table-row-height); text-align: var(--table-tbody-td-text-align);}.var-table--surface-low { --table-background: var(--table-surface-low-background); --table-tbody-tr-hover-background: var(--table-surface-low-row-hover-background);}.var-table--plain { --table-background: transparent; --table-tbody-tr-hover-background: var(--table-plain-row-hover-background); border-radius: 0;}.var-table__footer { width: 100%; min-height: var(--table-row-height); border-top: var(--table-footer-border-top); background: var(--table-background);}
+:root { --table-background: #fff; --table-surface-low-background: var(--color-surface-container-highest); --table-surface-low-row-hover-background: var(--color-surface-container-highest); --table-plain-row-hover-background: hsla(var(--hsl-on-surface), 0.04); --table-border-radius: 2px; --table-border: thin solid var(--color-outline); --table-thead-border-bottom: thin solid var(--color-outline); --table-thead-th-text-color: rgba(0, 0, 0, 0.6); --table-thead-th-text-align: left; --table-thead-th-font-size: 14px; --table-thead-th-font-weight: 500; --table-thead-tr-border-bottom: thin solid var(--color-outline); --table-tbody-tr-hover-background: #f5f5f5; --table-tbody-tr-border-bottom: thin solid var(--color-outline); --table-tbody-td-text-color: #555; --table-tbody-td-font-size: 14px; --table-tbody-td-text-align: left; --table-row-height: 46px; --table-row-padding: 8px 16px; --table-footer-border-top: thin solid var(--color-outline);}.var-table { --scrollbar-track-background: var(--table-background); width: 100%; border-radius: var(--table-border-radius);}.var-table * { box-sizing: border-box;}.var-table__main { width: 100%; overflow: auto;}.var-table__main > table { min-width: 100%; display: table; border-spacing: 0; border-collapse: collapse; line-height: normal;}.var-table__main > table thead { display: table-header-group; border-bottom: var(--table-thead-border-bottom);}.var-table__main > table thead tr { background: var(--table-background);}.var-table__main > table thead tr th { color: var(--table-thead-th-text-color); font-size: var(--table-thead-th-font-size);}.var-table__main > table thead tr:not(:last-child) { border-bottom: var(--table-thead-tr-border-bottom);}.var-table__main > table tbody { display: table-row-group;}.var-table__main > table tbody tr { display: table-row; outline: 0; vertical-align: middle; background: var(--table-background);}.var-table__main > table tbody tr:hover { background: var(--table-tbody-tr-hover-background); transition: background-color 0.25s;}.var-table__main > table tbody tr:not(:last-child) { border-bottom: var(--table-tbody-tr-border-bottom);}.var-table__main > table tbody td { color: var(--table-tbody-td-text-color); font-size: var(--table-tbody-td-font-size); background: inherit; background-clip: padding-box;}.var-table__main > table th { display: table-cell; height: var(--table-row-height); padding: var(--table-row-padding); font-weight: var(--table-thead-th-font-weight); text-align: var(--table-thead-th-text-align);}.var-table__main > table td { display: table-cell; padding: var(--table-row-padding); height: var(--table-row-height); text-align: var(--table-tbody-td-text-align);}.var-table--surface-low { --table-background: var(--table-surface-low-background); --table-tbody-tr-hover-background: var(--table-surface-low-row-hover-background);}.var-table--plain { --table-background: transparent; --table-tbody-tr-hover-background: var(--table-plain-row-hover-background); border-radius: 0;}.var-table--bordered { border: var(--table-border);}.var-table--plain.var-table--bordered { border-radius: var(--table-border-radius);}.var-table__footer { width: 100%; min-height: var(--table-row-height); border-top: var(--table-footer-border-top); background: var(--table-background);}

package/es/themes/dark/card.mjs

@@ -4,6 +4,7 @@ var stdin_default = {
   "--card-description-color": "#aaaaaa",
   "--card-padding": "0 0 15px 0",
   "--card-background": "var(--color-surface-container-highest)",
+  "--card-outlined-background": "transparent",
   "--card-filled-background": "var(--color-surface-container-highest)",
   "--card-outline-color": "var(--color-outline)",
   "--card-border-radius": "4px",

package/es/themes/dark/dataTable.mjs

@@ -15,9 +15,15 @@ var stdin_default = {
   "--data-table-resize-trigger-color": "hsla(var(--hsl-on-surface-variant), 0.36)",
   "--data-table-fixed-shadow-color": "rgba(0, 0, 0, 0.04)",
   "--data-table-border-radius": "2px",
-  "--data-table-cell-padding": "8px 16px",
-  "--data-table-selection-cell-padding": "8px 8px",
-  "--data-table-expand-cell-padding": "8px 8px",
+  "--data-table-cell-normal-padding": "8px 16px",
+  "--data-table-cell-small-padding": "4px 16px",
+  "--data-table-cell-large-padding": "11px 16px",
+  "--data-table-selection-cell-normal-padding": "8px 8px",
+  "--data-table-selection-cell-small-padding": "4px 8px",
+  "--data-table-selection-cell-large-padding": "11px 8px",
+  "--data-table-expand-cell-normal-padding": "8px 8px",
+  "--data-table-expand-cell-small-padding": "4px 8px",
+  "--data-table-expand-cell-large-padding": "11px 8px",
   "--data-table-cell-font-size": "14px",
   "--data-table-header-font-size": "14px",
   "--data-table-header-font-weight": "500",

package/es/themes/dark/paper.mjs

@@ -1,5 +1,8 @@
 var stdin_default = {
   "--paper-background": "var(--color-surface-container-highest)",
+  "--paper-outlined-background": "transparent",
+  "--paper-filled-background": "var(--color-surface-container-highest)",
+  "--paper-outline-color": "var(--color-outline)",
   "--paper-border-radius": "4px"
 };
 export {

package/es/themes/dark/table.mjs

@@ -8,6 +8,7 @@ var stdin_default = {
   "--table-tbody-td-text-color": "#fff",
   "--table-tbody-tr-hover-background": "#3a3a3a",
   "--table-border-radius": "2px",
+  "--table-border": "thin solid var(--color-outline)",
   "--table-thead-border-bottom": "thin solid var(--color-outline)",
   "--table-thead-th-font-size": "14px",
   "--table-thead-th-font-weight": "500",

package/es/themes/dark/treeMenu.mjs

@@ -1,5 +1,6 @@
 var stdin_default = {
   "--tree-menu-background": "var(--color-surface-container-high)",
+  "--tree-menu-border-color": "var(--color-outline)",
   "--tree-menu-item-text-color": "var(--color-text)",
   "--tree-menu-padding": "8px 0",
   "--tree-menu-item-gap": "0px",

package/es/themes/md3-dark/card.mjs

@@ -2,6 +2,7 @@ var stdin_default = {
   "--card-border-radius": "12px",
   "--card-background": "var(--color-surface-container-highest)",
   "--card-surface-low-background": "#1c1b1d",
+  "--card-outlined-background": "transparent",
   "--card-filled-background": "var(--color-surface-container-highest)",
   "--card-image-height": "188px",
   "--card-title-color": "var(--color-inverse-surface)",

package/es/themes/md3-dark/dataTable.mjs

@@ -15,9 +15,15 @@ var stdin_default = {
   "--data-table-resize-trigger-color": "hsla(var(--hsl-on-surface-variant), 0.36)",
   "--data-table-fixed-shadow-color": "rgba(0, 0, 0, 0.04)",
   "--data-table-border-radius": "2px",
-  "--data-table-cell-padding": "8px 16px",
-  "--data-table-selection-cell-padding": "8px 8px",
-  "--data-table-expand-cell-padding": "8px 8px",
+  "--data-table-cell-normal-padding": "8px 16px",
+  "--data-table-cell-small-padding": "4px 16px",
+  "--data-table-cell-large-padding": "11px 16px",
+  "--data-table-selection-cell-normal-padding": "8px 8px",
+  "--data-table-selection-cell-small-padding": "4px 8px",
+  "--data-table-selection-cell-large-padding": "11px 8px",
+  "--data-table-expand-cell-normal-padding": "8px 8px",
+  "--data-table-expand-cell-small-padding": "4px 8px",
+  "--data-table-expand-cell-large-padding": "11px 8px",
   "--data-table-cell-font-size": "14px",
   "--data-table-header-font-size": "14px",
   "--data-table-header-font-weight": "500",

package/es/themes/md3-dark/paper.mjs

@@ -1,6 +1,9 @@
 var stdin_default = {
   "--paper-background": "var(--color-surface-container-highest)",
   "--paper-surface-low-background": "#1c1b1d",
+  "--paper-outlined-background": "transparent",
+  "--paper-filled-background": "var(--color-surface-container-highest)",
+  "--paper-outline-color": "var(--color-outline)",
   "--paper-border-radius": "12px"
 };
 export {

package/es/themes/md3-dark/table.mjs

@@ -8,6 +8,7 @@ var stdin_default = {
   "--table-tbody-td-text-color": "#fff",
   "--table-tbody-tr-hover-background": "var(--color-surface-container-high)",
   "--table-border-radius": "2px",
+  "--table-border": "thin solid var(--color-outline)",
   "--table-thead-border-bottom": "thin solid var(--color-outline)",
   "--table-thead-th-font-size": "14px",
   "--table-thead-th-font-weight": "500",

package/es/themes/md3-dark/treeMenu.mjs

@@ -1,5 +1,6 @@
 var stdin_default = {
   "--tree-menu-background": "var(--color-surface-container)",
+  "--tree-menu-border-color": "var(--color-outline)",
   "--tree-menu-item-text-color": "var(--color-on-surface-variant)",
   "--tree-menu-padding": "8px 8px",
   "--tree-menu-item-gap": "1px",

package/es/themes/md3-light/card.mjs

@@ -2,6 +2,7 @@ var stdin_default = {
   "--card-border-radius": "12px",
   "--card-background": "var(--color-surface-container-low)",
   "--card-surface-low-background": "var(--color-surface-container-low)",
+  "--card-outlined-background": "transparent",
   "--card-filled-background": "var(--color-surface-container-highest)",
   "--card-image-height": "188px",
   "--card-title-color": "#1D1B20",

package/es/themes/md3-light/dataTable.mjs

@@ -15,9 +15,15 @@ var stdin_default = {
   "--data-table-resize-trigger-color": "hsla(var(--hsl-on-surface-variant), 0.36)",
   "--data-table-fixed-shadow-color": "rgba(0, 0, 0, 0.04)",
   "--data-table-border-radius": "2px",
-  "--data-table-cell-padding": "8px 16px",
-  "--data-table-selection-cell-padding": "8px 8px",
-  "--data-table-expand-cell-padding": "8px 8px",
+  "--data-table-cell-normal-padding": "8px 16px",
+  "--data-table-cell-small-padding": "4px 16px",
+  "--data-table-cell-large-padding": "11px 16px",
+  "--data-table-selection-cell-normal-padding": "8px 8px",
+  "--data-table-selection-cell-small-padding": "4px 8px",
+  "--data-table-selection-cell-large-padding": "11px 8px",
+  "--data-table-expand-cell-normal-padding": "8px 8px",
+  "--data-table-expand-cell-small-padding": "4px 8px",
+  "--data-table-expand-cell-large-padding": "11px 8px",
   "--data-table-cell-font-size": "14px",
   "--data-table-header-font-size": "14px",
   "--data-table-header-font-weight": "500",

package/es/themes/md3-light/paper.mjs

@@ -1,6 +1,9 @@
 var stdin_default = {
   "--paper-background": "var(--color-surface-container-low)",
   "--paper-surface-low-background": "var(--color-surface-container-low)",
+  "--paper-outlined-background": "transparent",
+  "--paper-filled-background": "var(--color-surface-container-highest)",
+  "--paper-outline-color": "var(--color-outline)",
   "--paper-border-radius": "12px"
 };
 export {

package/es/themes/md3-light/table.mjs

@@ -5,6 +5,7 @@ var stdin_default = {
   "--table-surface-low-row-hover-background": "var(--color-surface-container-highest)",
   "--table-tbody-tr-hover-background": "var(--color-surface-container-high)",
   "--table-border-radius": "2px",
+  "--table-border": "thin solid var(--color-outline)",
   "--table-thead-border-bottom": "thin solid var(--color-outline)",
   "--table-thead-th-text-color": "rgba(0, 0, 0, 0.6)",
   "--table-thead-th-text-align": "left",

package/es/themes/md3-light/treeMenu.mjs

@@ -1,5 +1,6 @@
 var stdin_default = {
   "--tree-menu-background": "var(--color-surface-container)",
+  "--tree-menu-border-color": "var(--color-outline)",
   "--tree-menu-item-text-color": "var(--color-on-surface-variant)",
   "--tree-menu-padding": "8px 8px",
   "--tree-menu-item-gap": "1px",

package/es/tree-menu/TreeMenu.mjs

@@ -12,7 +12,7 @@ function __render__(_ctx, _cache) {
   return _openBlock(), _createElementBlock(
     "nav",
     {
-      class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box"))),
+      class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box"), [_ctx.bordered, _ctx.n("--border")])),
       style: _normalizeStyle(_ctx.styles)
     },
     [

package/es/tree-menu/props.mjs

@@ -30,6 +30,7 @@ const props = {
     type: Boolean,
     default: false
   },
+  bordered: Boolean,
   disabled: Boolean,
   onChange: defineListenerProp(),
   "onUpdate:active": defineListenerProp(),

package/es/tree-menu/treeMenu.css

@@ -1 +1 @@
-:root { --tree-menu-background: var(--color-surface-container-high); --tree-menu-item-text-color: var(--color-text); --tree-menu-padding: 8px 0; --tree-menu-item-gap: 0px; --tree-menu-item-height: 40px; --tree-menu-item-padding: 0 16px; --tree-menu-item-border-radius: 0; --tree-menu-item-indent: 16px; --tree-menu-item-icon-size: 22px; --tree-menu-item-icon-margin-right: 24px; --tree-menu-item-label-font-size: var(--font-size-md); --tree-menu-item-label-line-height: 1.5; --tree-menu-group-label-height: 32px; --tree-menu-group-label-padding: 0 16px; --tree-menu-group-label-color: var(--color-on-surface-variant); --tree-menu-group-label-font-size: var(--font-size-sm); --tree-menu-divider-margin: 8px 0; --tree-menu-divider-color: rgba(0, 0, 0, 0.12); --tree-menu-item-hover-background: rgba(85, 85, 85, 0.06); --tree-menu-item-pressed-background: rgba(85, 85, 85, 0.1); --tree-menu-item-active-background: hsla(var(--hsl-primary), 0.1); --tree-menu-item-active-text-color: var(--color-primary); --tree-menu-item-disabled-opacity: var(--opacity-disabled); --tree-menu-item-indicator-border-radius: 0; --tree-menu-item-indicator-active-transition-duration: 0ms; --tree-menu-expand-icon-color: var(--color-on-surface-variant); --tree-menu-expand-icon-size: 20px;}.var-tree-menu { display: block; min-width: 0; padding: var(--tree-menu-padding); color: var(--tree-menu-item-text-color); background: var(--tree-menu-background); -webkit-tap-highlight-color: transparent; transition: color 0.25s, background-color 0.25s;}.var-tree-menu__option + .var-tree-menu__option,.var-tree-menu__children > .var-tree-menu__option:first-child { margin-top: var(--tree-menu-item-gap);}.var-tree-menu__group-label { box-sizing: border-box; min-width: 0; height: var(--tree-menu-group-label-height); padding: var(--tree-menu-group-label-padding); display: flex; align-items: center; color: var(--tree-menu-group-label-color); font-size: var(--tree-menu-group-label-font-size); line-height: 1.5; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}.var-tree-menu__divider { height: 1px; margin: var(--tree-menu-divider-margin); background-color: var(--tree-menu-divider-color);}.var-tree-menu__item { position: relative; box-sizing: border-box; min-width: 0; height: var(--tree-menu-item-height); padding: var(--tree-menu-item-padding); display: flex; align-items: center; color: var(--tree-menu-item-text-color); cursor: pointer; overflow: hidden; border-radius: var(--tree-menu-item-border-radius); user-select: none; transition: color 0.25s;}.var-tree-menu__item-indicator { position: absolute; z-index: 0; top: 50%; left: 50%; width: 100%; height: 100%; border-radius: var(--tree-menu-item-indicator-border-radius); transform: translate(-50%, -50%); pointer-events: none;}.var-tree-menu__item-indicator::before,.var-tree-menu__item-indicator::after { content: ''; position: absolute; z-index: 0; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit;}.var-tree-menu__item-indicator::before { background-color: var(--tree-menu-item-hover-background); opacity: 0; transition: opacity 150ms, background-color 150ms;}.var-tree-menu__item-indicator::after { background: var(--tree-menu-item-active-background); transform: scaleX(0); transform-origin: center;}.var-tree-menu__item:hover .var-tree-menu__item-indicator::before { opacity: 1;}.var-tree-menu__item:active:not(.var-tree-menu--item-ripple-enabled):not(.var-tree-menu--item-disabled) .var-tree-menu__item-indicator::before { background-color: var(--tree-menu-item-pressed-background); opacity: 1;}.var-tree-menu--item-active,.var-tree-menu--item-active-path { color: var(--tree-menu-item-active-text-color);}.var-tree-menu--item-active .var-tree-menu__expand-icon,.var-tree-menu--item-active-path .var-tree-menu__expand-icon { color: var(--tree-menu-item-active-text-color);}.var-tree-menu--item-active .var-tree-menu__item-indicator::after { transform: scaleX(1); transition: transform var(--tree-menu-item-indicator-active-transition-duration) cubic-bezier(0.2, 0, 0, 1), background-color var(--tree-menu-item-indicator-active-transition-duration) cubic-bezier(0.2, 0, 0, 1);}.var-tree-menu--item-ripple-enabled.var-tree-menu--item-active .var-tree-menu__item-indicator::after { transition: none;}.var-tree-menu--item-active:hover .var-tree-menu__item-indicator::before { opacity: 0;}.var-tree-menu--item-disabled { cursor: not-allowed; opacity: var(--tree-menu-item-disabled-opacity);}.var-tree-menu--item-disabled:hover .var-tree-menu__item-indicator::before { opacity: 0;}.var-tree-menu__item-content { position: relative; z-index: 1; min-width: 0; flex: 1; margin-left: calc(var(--tree-menu-item-indent) * var(--tree-menu-level)); display: flex; align-items: center;}.var-tree-menu__icon-container { width: var(--tree-menu-item-icon-size); min-width: var(--tree-menu-item-icon-size); height: var(--tree-menu-item-icon-size); display: inline-flex; align-items: center; justify-content: center; margin-right: var(--tree-menu-item-icon-margin-right);}.var-tree-menu__icon { font-size: var(--tree-menu-item-icon-size);}.var-tree-menu__label { min-width: 0; height: var(--tree-menu-item-height); flex: 1; display: flex; align-items: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--tree-menu-item-label-font-size); line-height: var(--tree-menu-item-label-line-height);}.var-tree-menu__expand-icon,.var-tree-menu__expand-placeholder { width: var(--tree-menu-expand-icon-size); min-width: var(--tree-menu-expand-icon-size); height: var(--tree-menu-expand-icon-size); margin-left: 8px;}.var-tree-menu__expand-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--tree-menu-expand-icon-color); font-size: var(--tree-menu-expand-icon-size); transform: rotate(-90deg); transition: color 0.25s, transform 0.25s;}.var-tree-menu--expand-icon-expanded { transform: rotate(0deg);}
+:root { --tree-menu-background: var(--color-surface-container-high); --tree-menu-border-color: var(--color-outline); --tree-menu-item-text-color: var(--color-text); --tree-menu-padding: 8px 0; --tree-menu-item-gap: 0px; --tree-menu-item-height: 40px; --tree-menu-item-padding: 0 16px; --tree-menu-item-border-radius: 0; --tree-menu-item-indent: 16px; --tree-menu-item-icon-size: 22px; --tree-menu-item-icon-margin-right: 24px; --tree-menu-item-label-font-size: var(--font-size-md); --tree-menu-item-label-line-height: 1.5; --tree-menu-group-label-height: 32px; --tree-menu-group-label-padding: 0 16px; --tree-menu-group-label-color: var(--color-on-surface-variant); --tree-menu-group-label-font-size: var(--font-size-sm); --tree-menu-divider-margin: 8px 0; --tree-menu-divider-color: rgba(0, 0, 0, 0.12); --tree-menu-item-hover-background: rgba(85, 85, 85, 0.06); --tree-menu-item-pressed-background: rgba(85, 85, 85, 0.1); --tree-menu-item-active-background: hsla(var(--hsl-primary), 0.1); --tree-menu-item-active-text-color: var(--color-primary); --tree-menu-item-disabled-opacity: var(--opacity-disabled); --tree-menu-item-indicator-border-radius: 0; --tree-menu-item-indicator-active-transition-duration: 0ms; --tree-menu-expand-icon-color: var(--color-on-surface-variant); --tree-menu-expand-icon-size: 20px;}.var-tree-menu { display: block; min-width: 0; padding: var(--tree-menu-padding); color: var(--tree-menu-item-text-color); background: var(--tree-menu-background); -webkit-tap-highlight-color: transparent; transition: color 0.25s, background-color 0.25s, border-color 0.25s;}.var-tree-menu--border { border-right: 1px solid var(--tree-menu-border-color);}.var-tree-menu__option + .var-tree-menu__option,.var-tree-menu__children > .var-tree-menu__option:first-child { margin-top: var(--tree-menu-item-gap);}.var-tree-menu__group-label { box-sizing: border-box; min-width: 0; height: var(--tree-menu-group-label-height); padding: var(--tree-menu-group-label-padding); display: flex; align-items: center; color: var(--tree-menu-group-label-color); font-size: var(--tree-menu-group-label-font-size); line-height: 1.5; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}.var-tree-menu__divider { height: 1px; margin: var(--tree-menu-divider-margin); background-color: var(--tree-menu-divider-color);}.var-tree-menu__item { position: relative; box-sizing: border-box; min-width: 0; height: var(--tree-menu-item-height); padding: var(--tree-menu-item-padding); display: flex; align-items: center; color: var(--tree-menu-item-text-color); cursor: pointer; overflow: hidden; border-radius: var(--tree-menu-item-border-radius); user-select: none; transition: color 0.25s;}.var-tree-menu__item-indicator { position: absolute; z-index: 0; top: 50%; left: 50%; width: 100%; height: 100%; border-radius: var(--tree-menu-item-indicator-border-radius); transform: translate(-50%, -50%); pointer-events: none;}.var-tree-menu__item-indicator::before,.var-tree-menu__item-indicator::after { content: ''; position: absolute; z-index: 0; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit;}.var-tree-menu__item-indicator::before { background-color: var(--tree-menu-item-hover-background); opacity: 0; transition: opacity 150ms, background-color 150ms;}.var-tree-menu__item-indicator::after { background: var(--tree-menu-item-active-background); transform: scaleX(0); transform-origin: center;}.var-tree-menu__item:hover .var-tree-menu__item-indicator::before { opacity: 1;}.var-tree-menu__item:active:not(.var-tree-menu--item-ripple-enabled):not(.var-tree-menu--item-disabled) .var-tree-menu__item-indicator::before { background-color: var(--tree-menu-item-pressed-background); opacity: 1;}.var-tree-menu--item-active,.var-tree-menu--item-active-path { color: var(--tree-menu-item-active-text-color);}.var-tree-menu--item-active .var-tree-menu__expand-icon,.var-tree-menu--item-active-path .var-tree-menu__expand-icon { color: var(--tree-menu-item-active-text-color);}.var-tree-menu--item-active .var-tree-menu__item-indicator::after { transform: scaleX(1); transition: transform var(--tree-menu-item-indicator-active-transition-duration) cubic-bezier(0.2, 0, 0, 1), background-color var(--tree-menu-item-indicator-active-transition-duration) cubic-bezier(0.2, 0, 0, 1);}.var-tree-menu--item-ripple-enabled.var-tree-menu--item-active .var-tree-menu__item-indicator::after { transition: none;}.var-tree-menu--item-active:hover .var-tree-menu__item-indicator::before { opacity: 0;}.var-tree-menu--item-disabled { cursor: not-allowed; opacity: var(--tree-menu-item-disabled-opacity);}.var-tree-menu--item-disabled:hover .var-tree-menu__item-indicator::before { opacity: 0;}.var-tree-menu__item-content { position: relative; z-index: 1; min-width: 0; flex: 1; margin-left: calc(var(--tree-menu-item-indent) * var(--tree-menu-level)); display: flex; align-items: center;}.var-tree-menu__icon-container { width: var(--tree-menu-item-icon-size); min-width: var(--tree-menu-item-icon-size); height: var(--tree-menu-item-icon-size); display: inline-flex; align-items: center; justify-content: center; margin-right: var(--tree-menu-item-icon-margin-right);}.var-tree-menu__icon { font-size: var(--tree-menu-item-icon-size);}.var-tree-menu__label { min-width: 0; height: var(--tree-menu-item-height); flex: 1; display: flex; align-items: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--tree-menu-item-label-font-size); line-height: var(--tree-menu-item-label-line-height);}.var-tree-menu__expand-icon,.var-tree-menu__expand-placeholder { width: var(--tree-menu-expand-icon-size); min-width: var(--tree-menu-expand-icon-size); height: var(--tree-menu-expand-icon-size); margin-left: 8px;}.var-tree-menu__expand-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--tree-menu-expand-icon-color); font-size: var(--tree-menu-expand-icon-size); transform: rotate(-90deg); transition: color 0.25s, transform 0.25s;}.var-tree-menu--expand-icon-expanded { transform: rotate(0deg);}