@1money/component-ui 0.0.48 → 0.0.50

package/es/components/Table/style/Table.css

@@ -1 +1,370 @@
-.om-component-ui-table{position:relative;box-sizing:border-box;width:100%;overflow:clip;font-variant:tabular-nums;background:var(--om-bg-default,#fff);border:1px solid var(--om-border-neutral,#e3e4e4);border-radius:var(--om-radius-300,12px)}.om-component-ui-table table{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0}.om-component-ui-table-thead>tr>td,.om-component-ui-table-thead>tr>th{position:relative;padding:var(--om-spacing-300,12px) var(--om-spacing-400,16px);text-align:start;overflow-wrap:break-word;background:var(--om-bg-default-secondary,#f8f8f8);border-bottom:1px solid var(--om-border-neutral,#e3e4e4);font-size:var(--om-label-md-font-size);font-family:var(--om-label-md-font-family);line-height:var(--om-label-md-line-height);letter-spacing:var(--om-label-md-letter-spacing);font-weight:var(--om-label-md-font-weight)}.om-component-ui-table-tbody>tr>td{position:relative;padding:var(--om-spacing-300,12px) var(--om-spacing-400,16px);color:var(--om-text-default,#131313);vertical-align:middle;overflow-wrap:break-word;border-bottom:1px solid var(--om-bg-default-secondary,#f8f8f8);font-size:var(--om-body-md-font-size);font-family:var(--om-body-md-font-family);line-height:var(--om-body-md-line-height);letter-spacing:var(--om-body-md-letter-spacing);font-weight:var(--om-body-md-font-weight)}.om-component-ui-table-tbody>tr:last-child>td{border-bottom:0}.om-component-ui-table-tbody>tr:has(+.om-component-ui-table-expanded-row:last-child)>td{border-bottom:0}.om-component-ui-table-tbody>tr:hover>td{background:var(--om-bg-default-secondary,#f8f8f8);cursor:pointer}.om-component-ui-table-body,.om-component-ui-table-content{overflow:auto}.om-component-ui-table-header{overflow:hidden}.om-component-ui-table-sticky-holder{position:sticky;z-index:3;background:var(--om-bg-default,#fff)}.om-component-ui-table-fixed-header>.om-component-ui-table-header{overflow:hidden}.om-component-ui-table-fixed-header>.om-component-ui-table-body{overflow:auto scroll}.om-component-ui-table-cell-fix-end,.om-component-ui-table-cell-fix-start{position:sticky!important;z-index:calc(2 + var(--z-offset, 0));background:var(--om-bg-default,#fff)}.om-component-ui-table-tbody>tr:hover .om-component-ui-table-cell-fix-end,.om-component-ui-table-tbody>tr:hover .om-component-ui-table-cell-fix-start,.om-component-ui-table-thead .om-component-ui-table-cell-fix-end,.om-component-ui-table-thead .om-component-ui-table-cell-fix-start{background:var(--om-bg-default-secondary,#f8f8f8)}.om-component-ui-table-cell-fix-end-shadow:after,.om-component-ui-table-cell-fix-start-shadow:after{position:absolute;top:0;bottom:-1px;width:30px;transition:box-shadow .3s;content:"";pointer-events:none}.om-component-ui-table-cell-fix-start-shadow:after{right:0;transform:translateX(100%)}.om-component-ui-table-cell-fix-start-shadow-show:after{box-shadow:inset 10px 0 8px -8px rgba(0,0,0,.08)}.om-component-ui-table-cell-fix-end-shadow:after{left:0;transform:translateX(-100%)}.om-component-ui-table-cell-fix-end-shadow-show:after{box-shadow:inset -10px 0 8px -8px rgba(0,0,0,.08)}.om-component-ui-table-expanded-row .om-component-ui-table-cell{padding:var(--om-spacing-300,12px);background:var(--om-bg-default-secondary,#f8f8f8)}.om-component-ui-table-placeholder{text-align:center}.om-component-ui-table-tbody-virtual .om-component-ui-table-row{display:flex}.om-component-ui-table-tbody-virtual .om-component-ui-table-row:hover .om-component-ui-table-cell{background:var(--om-bg-default-secondary,#f8f8f8);cursor:pointer}.om-component-ui-table-tbody-virtual .om-component-ui-table-cell{padding:var(--om-spacing-300,12px) var(--om-spacing-400,16px);color:var(--om-text-default,#131313);overflow-wrap:break-word;border-bottom:1px solid var(--om-bg-default-secondary,#f8f8f8);font-size:var(--om-body-md-font-size);font-family:var(--om-body-md-font-family);line-height:var(--om-body-md-line-height);letter-spacing:var(--om-body-md-letter-spacing);font-weight:var(--om-body-md-font-weight)}.om-component-ui-table-body,.om-component-ui-table-container,.om-component-ui-table-content,.om-component-ui-table-header{background:inherit}.om-component-ui-table-pagination{display:flex;justify-content:flex-end;margin-top:var(--om-spacing-600,24px)}.om-component-ui-table-small{--table-row-height:56px;--table-header-height:40px}.om-component-ui-table-small .om-component-ui-table-tbody>tr>td,.om-component-ui-table-small .om-component-ui-table-thead>tr>td,.om-component-ui-table-small .om-component-ui-table-thead>tr>th{padding:var(--om-spacing-200,8px) var(--om-spacing-300,12px)}.om-component-ui-table-large{--table-row-height:66px;--table-header-height:48px}.om-component-ui-table-fill{border:0;border-radius:0}.om-component-ui-table-fill .om-component-ui-table-thead>tr>td,.om-component-ui-table-fill .om-component-ui-table-thead>tr>th{background:transparent}.om-component-ui-table-fill .om-component-ui-table-thead .om-component-ui-table-cell-fix-end,.om-component-ui-table-fill .om-component-ui-table-thead .om-component-ui-table-cell-fix-start{background:var(--om-bg-default,#fff)}.om-component-ui-table-stroke .om-component-ui-table-thead>tr>td,.om-component-ui-table-stroke .om-component-ui-table-thead>tr>th{border-bottom:none}.om-component-ui-table-stroke .om-component-ui-table-tbody>tr>td.om-component-ui-table-cell--spacer,.om-component-ui-table-stroke .om-component-ui-table-thead>tr>td.om-component-ui-table-cell--spacer,.om-component-ui-table-stroke .om-component-ui-table-thead>tr>th.om-component-ui-table-cell--spacer{padding:0;border-bottom:none}.om-component-ui-table .om-component-ui-table-header-cell{display:inline-flex;gap:4px;align-items:center}.om-component-ui-table .om-component-ui-table-header-cell__title{color:var(--om-text-default,#131313);white-space:nowrap}.om-component-ui-table .om-component-ui-table-header-cell--large .om-component-ui-table-header-cell__title{font-size:var(--om-title-lg-font-size);font-family:var(--om-title-lg-font-family);line-height:var(--om-title-lg-line-height);letter-spacing:var(--om-title-lg-letter-spacing);font-weight:var(--om-title-lg-font-weight)}.om-component-ui-table .om-component-ui-table-header-cell--small .om-component-ui-table-header-cell__title{font-size:var(--om-title-sm-font-size);font-family:var(--om-title-sm-font-family);line-height:var(--om-title-sm-line-height);letter-spacing:var(--om-title-sm-letter-spacing);font-weight:var(--om-title-sm-strong-font-weight)}.om-component-ui-table .om-component-ui-table-sort-trigger{display:inline-flex;align-items:center;justify-content:center;padding:0;color:var(--om-icon-default,#131313);line-height:0;background:transparent;border:0;cursor:pointer}.om-component-ui-table .om-component-ui-table-sort-trigger:focus-visible{outline:2px solid var(--om-border-default,#d1d2d2);outline-offset:2px}.om-component-ui-table .om-component-ui-table-sort-trigger--large{width:16px;height:16px}.om-component-ui-table .om-component-ui-table-sort-trigger--small{width:12px;height:12px}.om-component-ui-table .om-component-ui-table-filter-trigger{display:inline-flex;align-items:center;justify-content:center;margin-left:var(--om-spacing-100,4px);padding:0;color:var(--om-icon-default,#131313);line-height:0;background:transparent;border:0;border-radius:var(--om-radius-100,4px);cursor:pointer}.om-component-ui-table .om-component-ui-table-filter-trigger:hover{background:var(--om-bg-default-secondary,#f8f8f8)}.om-component-ui-table .om-component-ui-table-filter-trigger:focus-visible{outline:2px solid var(--om-border-default,#d1d2d2);outline-offset:2px}.om-component-ui-table .om-component-ui-table-filter-trigger--active{color:var(--om-icon-brand,#073387)}.om-component-ui-table .om-component-ui-table-filter-trigger--large{width:20px;height:20px}.om-component-ui-table .om-component-ui-table-filter-trigger--small{width:16px;height:16px}.om-component-ui-table-filter-dropdown{display:flex;flex-direction:column;gap:var(--om-spacing-200,8px);min-width:200px;padding:var(--om-spacing-200,8px);background:var(--om-bg-default,#fff);border-radius:var(--om-radius-200,8px);box-shadow:0 8px 24px hsla(0,0%,7%,.12)}.om-component-ui-table-filter-dropdown__item{display:flex;gap:var(--om-spacing-200,8px);align-items:center;padding:var(--om-spacing-100,4px) var(--om-spacing-200,8px);cursor:pointer}.om-component-ui-table-filter-dropdown__item:hover{background:var(--om-bg-default-secondary,#f8f8f8)}.om-component-ui-table-filter-dropdown__footer{display:flex;gap:var(--om-spacing-200,8px);justify-content:flex-end;padding-top:var(--om-spacing-100,4px);border-top:1px solid var(--om-border-neutral,#e3e4e4)}.om-component-ui-table .om-component-ui-table-expand-trigger{display:inline-flex;align-items:center;justify-content:center;width:var(--om-spacing-400,16px);height:var(--om-spacing-400,16px);padding:0;color:var(--om-icon-default,#131313);background:transparent;border:0;cursor:pointer;transition:color .2s ease}.om-component-ui-table .om-component-ui-table-expand-trigger:focus-visible{outline:2px solid var(--om-border-default,#d1d2d2);outline-offset:2px}.om-component-ui-table .om-component-ui-table-expand-trigger:hover{color:var(--om-icon-default-secondary,#404042)}.om-component-ui-table .om-component-ui-table-expand-trigger[aria-expanded=true]{color:var(--om-icon-default,#131313)}.om-component-ui-table .om-component-ui-table-expand-trigger[aria-expanded=true]:hover{color:var(--om-icon-default-secondary,#404042)}.om-component-ui-table .om-component-ui-table-expand-trigger__icon{transition:transform .2s ease}.om-component-ui-table .om-component-ui-table-cell-content{display:inline-flex;gap:8px;align-items:center}.om-component-ui-table .om-component-ui-table-cell-content__text{display:inline-flex;flex-direction:column;gap:0}.om-component-ui-table .om-component-ui-table-expanded-row{background:var(--om-bg-default,#fff)}.om-component-ui-table .om-component-ui-table-expanded-row__content{padding:var(--om-spacing-200,8px) 0}.om-component-ui-table-wrapper{position:relative}.om-component-ui-table-wrapper--loading>.om-component-ui-table{opacity:.6;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}.om-component-ui-table-loading-overlay{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center}
+/**
+  * Retrieves the spacing value for a given token key.
+  *
+  * @param {string} $key - The spacing token key (e.g., '100', '200').
+  * @return {length|null} The computed spacing value or null if the key is invalid.
+  * @example
+  *   .element {
+  *     padding: om-spacing-token('200'); // Returns 8px if $om-sys-spacing-unit is 4px
+  *   }
+  */
+/**
+  * Computes the spacing value based on a token key or a direct length value.
+  *
+  * @param {string|length} $value - The spacing token key (e.g., '100') or a direct length value (e.g., '16px').
+  * @return {length} The computed spacing value.
+  * @example
+  *   .element {
+  *     margin: om-spacing-value('300'); // Returns 12px if $om-sys-spacing-unit is 4px
+  *     padding: om-spacing-value(16px); // Returns 16px
+  *     gap: om-spacing-value(2); // Returns 8px if $om-sys-spacing-unit is 4px
+  *   }
+  */
+.om-component-ui-table {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  overflow: clip;
+  font-variant: tabular-nums;
+  background: var(--om-bg-default, #fff);
+  border: 1px solid var(--om-border-neutral, #e3e4e4);
+  border-radius: var(--om-radius-300, 12px);
+}
+.om-component-ui-table table {
+  width: 100%;
+  table-layout: fixed;
+  border-collapse: separate;
+  border-spacing: 0;
+}
+.om-component-ui-table-thead > tr > th, .om-component-ui-table-thead > tr > td {
+  position: relative;
+  padding: var(--om-spacing-300, 12px) var(--om-spacing-400, 16px);
+  text-align: start;
+  overflow-wrap: break-word;
+  background: var(--om-bg-default-secondary, #f8f8f8);
+  border-bottom: 1px solid var(--om-border-neutral, #e3e4e4);
+  font-size: var(--om-label-md-font-size);
+  font-family: var(--om-label-md-font-family);
+  line-height: var(--om-label-md-line-height);
+  letter-spacing: var(--om-label-md-letter-spacing);
+  font-weight: var(--om-label-md-font-weight);
+}
+.om-component-ui-table-tbody > tr > td {
+  position: relative;
+  padding: var(--om-spacing-300, 12px) var(--om-spacing-400, 16px);
+  color: var(--om-text-default, #131313);
+  vertical-align: middle;
+  overflow-wrap: break-word;
+  border-bottom: 1px solid var(--om-bg-default-secondary, #f8f8f8);
+  font-size: var(--om-body-md-font-size);
+  font-family: var(--om-body-md-font-family);
+  line-height: var(--om-body-md-line-height);
+  letter-spacing: var(--om-body-md-letter-spacing);
+  font-weight: var(--om-body-md-font-weight);
+}
+.om-component-ui-table-tbody > tr:last-child > td {
+  border-bottom: 0;
+}
+.om-component-ui-table-tbody > tr:has(+ .om-component-ui-table-expanded-row:last-child) > td {
+  border-bottom: 0;
+}
+.om-component-ui-table-tbody > tr:hover > td {
+  background: var(--om-bg-default-secondary, #f8f8f8);
+  cursor: pointer;
+}
+.om-component-ui-table-content {
+  overflow: auto;
+}
+.om-component-ui-table-body {
+  overflow: auto;
+}
+.om-component-ui-table-header {
+  overflow: hidden;
+}
+.om-component-ui-table-sticky-holder {
+  position: sticky;
+  z-index: 3;
+  background: var(--om-bg-default, #fff);
+}
+.om-component-ui-table-fixed-header > .om-component-ui-table-header {
+  overflow: hidden;
+}
+.om-component-ui-table-fixed-header > .om-component-ui-table-body {
+  overflow: auto scroll;
+}
+.om-component-ui-table-cell-fix-start, .om-component-ui-table-cell-fix-end {
+  position: sticky !important;
+  z-index: calc(2 + var(--z-offset, 0));
+  background: var(--om-bg-default, #fff);
+}
+.om-component-ui-table-tbody > tr:hover .om-component-ui-table-cell-fix-start, .om-component-ui-table-tbody > tr:hover .om-component-ui-table-cell-fix-end {
+  background: var(--om-bg-default-secondary, #f8f8f8);
+}
+.om-component-ui-table-thead .om-component-ui-table-cell-fix-start, .om-component-ui-table-thead .om-component-ui-table-cell-fix-end {
+  background: var(--om-bg-default-secondary, #f8f8f8);
+}
+.om-component-ui-table-cell-fix-start-shadow::after, .om-component-ui-table-cell-fix-end-shadow::after {
+  position: absolute;
+  top: 0;
+  bottom: -1px;
+  width: 30px;
+  transition: box-shadow 0.3s;
+  content: "";
+  pointer-events: none;
+}
+.om-component-ui-table-cell-fix-start-shadow::after {
+  right: 0;
+  transform: translateX(100%);
+}
+.om-component-ui-table-cell-fix-start-shadow-show::after {
+  box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.08);
+}
+.om-component-ui-table-cell-fix-end-shadow::after {
+  left: 0;
+  transform: translateX(-100%);
+}
+.om-component-ui-table-cell-fix-end-shadow-show::after {
+  box-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, 0.08);
+}
+.om-component-ui-table-expanded-row .om-component-ui-table-cell {
+  padding: var(--om-spacing-300, 12px);
+  background: var(--om-bg-default-secondary, #f8f8f8);
+}
+.om-component-ui-table-placeholder {
+  text-align: center;
+}
+.om-component-ui-table-tbody-virtual .om-component-ui-table-row {
+  display: flex;
+}
+.om-component-ui-table-tbody-virtual .om-component-ui-table-row:hover .om-component-ui-table-cell {
+  background: var(--om-bg-default-secondary, #f8f8f8);
+  cursor: pointer;
+}
+.om-component-ui-table-tbody-virtual .om-component-ui-table-cell {
+  padding: var(--om-spacing-300, 12px) var(--om-spacing-400, 16px);
+  color: var(--om-text-default, #131313);
+  overflow-wrap: break-word;
+  border-bottom: 1px solid var(--om-bg-default-secondary, #f8f8f8);
+  font-size: var(--om-body-md-font-size);
+  font-family: var(--om-body-md-font-family);
+  line-height: var(--om-body-md-line-height);
+  letter-spacing: var(--om-body-md-letter-spacing);
+  font-weight: var(--om-body-md-font-weight);
+}
+.om-component-ui-table-container, .om-component-ui-table-content, .om-component-ui-table-body, .om-component-ui-table-header {
+  background: inherit;
+}
+.om-component-ui-table-pagination {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: var(--om-spacing-600, 24px);
+}
+.om-component-ui-table-small {
+  --table-row-height: 56px;
+  --table-header-height: 40px;
+}
+.om-component-ui-table-small .om-component-ui-table-thead > tr > th,
+.om-component-ui-table-small .om-component-ui-table-thead > tr > td {
+  padding: var(--om-spacing-200, 8px) var(--om-spacing-300, 12px);
+}
+.om-component-ui-table-small .om-component-ui-table-tbody > tr > td {
+  padding: var(--om-spacing-200, 8px) var(--om-spacing-300, 12px);
+}
+.om-component-ui-table-large {
+  --table-row-height: 66px;
+  --table-header-height: 48px;
+}
+.om-component-ui-table-fill {
+  border: 0;
+  border-radius: 0;
+}
+.om-component-ui-table-fill .om-component-ui-table-thead > tr > th,
+.om-component-ui-table-fill .om-component-ui-table-thead > tr > td {
+  background: transparent;
+}
+.om-component-ui-table-fill .om-component-ui-table-thead .om-component-ui-table-cell-fix-start,
+.om-component-ui-table-fill .om-component-ui-table-thead .om-component-ui-table-cell-fix-end {
+  background: var(--om-bg-default, #fff);
+}
+.om-component-ui-table-stroke .om-component-ui-table-thead > tr > th,
+.om-component-ui-table-stroke .om-component-ui-table-thead > tr > td {
+  border-bottom: none;
+}
+.om-component-ui-table-stroke .om-component-ui-table-thead > tr > th.om-component-ui-table-cell--spacer,
+.om-component-ui-table-stroke .om-component-ui-table-thead > tr > td.om-component-ui-table-cell--spacer,
+.om-component-ui-table-stroke .om-component-ui-table-tbody > tr > td.om-component-ui-table-cell--spacer {
+  padding: 0;
+  border-bottom: none;
+}
+.om-component-ui-table .om-component-ui-table-header-cell {
+  display: inline-flex;
+  gap: 4px;
+  align-items: center;
+}
+.om-component-ui-table .om-component-ui-table-header-cell__title {
+  color: var(--om-text-default, #131313);
+  white-space: nowrap;
+}
+.om-component-ui-table .om-component-ui-table-header-cell--large .om-component-ui-table-header-cell__title {
+  font-size: var(--om-title-lg-font-size);
+  font-family: var(--om-title-lg-font-family);
+  line-height: var(--om-title-lg-line-height);
+  letter-spacing: var(--om-title-lg-letter-spacing);
+  font-weight: var(--om-title-lg-font-weight);
+}
+.om-component-ui-table .om-component-ui-table-header-cell--small .om-component-ui-table-header-cell__title {
+  font-size: var(--om-title-sm-font-size);
+  font-family: var(--om-title-sm-font-family);
+  line-height: var(--om-title-sm-line-height);
+  letter-spacing: var(--om-title-sm-letter-spacing);
+  font-weight: var(--om-title-sm-strong-font-weight);
+}
+.om-component-ui-table .om-component-ui-table-sort-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  color: var(--om-icon-default, #131313);
+  line-height: 0;
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+}
+.om-component-ui-table .om-component-ui-table-sort-trigger:focus-visible {
+  outline: 2px solid var(--om-border-default, #d1d2d2);
+  outline-offset: 2px;
+}
+.om-component-ui-table .om-component-ui-table-sort-trigger--large {
+  width: 16px;
+  height: 16px;
+}
+.om-component-ui-table .om-component-ui-table-sort-trigger--small {
+  width: 12px;
+  height: 12px;
+}
+.om-component-ui-table .om-component-ui-table-filter-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: var(--om-spacing-100, 4px);
+  padding: 0;
+  color: var(--om-icon-default, #131313);
+  line-height: 0;
+  background: transparent;
+  border: 0;
+  border-radius: var(--om-radius-100, 4px);
+  cursor: pointer;
+}
+.om-component-ui-table .om-component-ui-table-filter-trigger:hover {
+  background: var(--om-bg-default-secondary, #f8f8f8);
+}
+.om-component-ui-table .om-component-ui-table-filter-trigger:focus-visible {
+  outline: 2px solid var(--om-border-default, #d1d2d2);
+  outline-offset: 2px;
+}
+.om-component-ui-table .om-component-ui-table-filter-trigger--active {
+  color: var(--om-icon-brand, #073387);
+}
+.om-component-ui-table .om-component-ui-table-filter-trigger--large {
+  width: 20px;
+  height: 20px;
+}
+.om-component-ui-table .om-component-ui-table-filter-trigger--small {
+  width: 16px;
+  height: 16px;
+}
+
+.om-component-ui-table-filter-dropdown {
+  display: flex;
+  flex-direction: column;
+  gap: var(--om-spacing-200, 8px);
+  min-width: 200px;
+  padding: var(--om-spacing-200, 8px);
+  background: var(--om-bg-default, #fff);
+  border-radius: var(--om-radius-200, 8px);
+  box-shadow: 0 8px 24px rgba(19, 19, 19, 0.12);
+}
+.om-component-ui-table-filter-dropdown__item {
+  display: flex;
+  gap: var(--om-spacing-200, 8px);
+  align-items: center;
+  padding: var(--om-spacing-100, 4px) var(--om-spacing-200, 8px);
+  cursor: pointer;
+}
+.om-component-ui-table-filter-dropdown__item:hover {
+  background: var(--om-bg-default-secondary, #f8f8f8);
+}
+.om-component-ui-table-filter-dropdown__footer {
+  display: flex;
+  gap: var(--om-spacing-200, 8px);
+  justify-content: flex-end;
+  padding-top: var(--om-spacing-100, 4px);
+  border-top: 1px solid var(--om-border-neutral, #e3e4e4);
+}
+
+.om-component-ui-table .om-component-ui-table-expand-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--om-spacing-400, 16px);
+  height: var(--om-spacing-400, 16px);
+  padding: 0;
+  color: var(--om-icon-default, #131313);
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  transition: color 0.2s ease;
+}
+.om-component-ui-table .om-component-ui-table-expand-trigger:focus-visible {
+  outline: 2px solid var(--om-border-default, #d1d2d2);
+  outline-offset: 2px;
+}
+.om-component-ui-table .om-component-ui-table-expand-trigger:hover {
+  color: var(--om-icon-default-secondary, #404042);
+}
+.om-component-ui-table .om-component-ui-table-expand-trigger[aria-expanded=true] {
+  color: var(--om-icon-default, #131313);
+}
+.om-component-ui-table .om-component-ui-table-expand-trigger[aria-expanded=true]:hover {
+  color: var(--om-icon-default-secondary, #404042);
+}
+.om-component-ui-table .om-component-ui-table-expand-trigger__icon {
+  transition: transform 0.2s ease;
+}
+.om-component-ui-table .om-component-ui-table-cell-content {
+  display: inline-flex;
+  gap: 8px;
+  align-items: center;
+}
+.om-component-ui-table .om-component-ui-table-cell-content__text {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 0;
+}
+.om-component-ui-table .om-component-ui-table-expanded-row {
+  background: var(--om-bg-default, #fff);
+}
+.om-component-ui-table .om-component-ui-table-expanded-row__content {
+  padding: var(--om-spacing-200, 8px) 0 var(--om-spacing-200, 8px);
+}
+
+.om-component-ui-table-wrapper {
+  position: relative;
+}
+
+.om-component-ui-table-wrapper--loading > .om-component-ui-table {
+  opacity: 0.6;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  pointer-events: none;
+}
+
+.om-component-ui-table-loading-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 4;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

package/es/components/Tabs/style/Tabs.css

@@ -1 +1,118 @@
-.om-component-ui-tabs{display:flex;flex-direction:column;width:100%}.om-component-ui-tabs-header{position:relative;display:flex;gap:var(--om-spacing-0,0);align-items:center;overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none}.om-component-ui-tabs-header::-webkit-scrollbar{display:none}.om-component-ui-tabs-header-full-width{padding-bottom:1px}.om-component-ui-tabs-header-full-width:after{position:absolute;bottom:0;left:0;z-index:0;width:100%;height:1px;background-color:var(--om-border-neutral,#e3e4e4);content:""}.om-component-ui-tabs-header-full-width .om-component-ui-tabs-tab{border-bottom:none}.om-component-ui-tabs-header-full-width .om-component-ui-tabs-indicator{z-index:1}.om-component-ui-tabs-tab{display:inline-flex;flex-shrink:0;gap:var(--om-spacing-100,4px);align-items:center;justify-content:center;height:var(--om-component-height-2xl,52px);padding:var(--om-spacing-100,4px) var(--om-spacing-400,16px);color:var(--om-text-default-tertiary,#646465);background:none;border:none;border-bottom:1px solid var(--om-border-neutral,#e3e4e4);border-radius:var(--om-radius-100,4px) var(--om-radius-100,4px) 0 0;outline:none;cursor:pointer;transition:color .2s ease;font-size:var(--om-title-md-font-size);font-family:var(--om-title-md-font-family);line-height:var(--om-title-md-line-height);letter-spacing:var(--om-title-md-letter-spacing);font-weight:var(--om-title-md-strong-font-weight)}.om-component-ui-tabs-tab-active,.om-component-ui-tabs-tab:hover:not(.om-component-ui-tabs-tab-disabled):not(.om-component-ui-tabs-tab-active){color:var(--om-text-default,#131313)}.om-component-ui-tabs-tab-disabled{color:var(--om-text-disabled,#bbbdc1);cursor:not-allowed}.om-component-ui-tabs-indicator{position:absolute;bottom:0;left:0;height:2px;background-color:#000;transition:transform .3s cubic-bezier(.645,.045,.355,1),width .3s cubic-bezier(.645,.045,.355,1)}.om-component-ui-tabs-tab-label{white-space:nowrap}.om-component-ui-tabs-tab-badge{display:inline-flex;align-items:center;justify-content:center;padding:var(--om-spacing-100,4px) var(--om-spacing-200,8px);color:var(--om-text-default-tertiary,#646465);background-color:var(--om-bg-neutral-tertiary,#f0f0f0);border-radius:var(--om-radius-full,9999px);font-size:var(--om-body-sm-font-size);font-family:var(--om-body-sm-font-family);line-height:var(--om-body-sm-line-height);letter-spacing:var(--om-body-sm-letter-spacing);font-weight:var(--om-body-sm-strong-font-weight)}.om-component-ui-tabs-panel{padding:var(--om-spacing-400,16px) 0}
+/**
+  * Retrieves the spacing value for a given token key.
+  *
+  * @param {string} $key - The spacing token key (e.g., '100', '200').
+  * @return {length|null} The computed spacing value or null if the key is invalid.
+  * @example
+  *   .element {
+  *     padding: om-spacing-token('200'); // Returns 8px if $om-sys-spacing-unit is 4px
+  *   }
+  */
+/**
+  * Computes the spacing value based on a token key or a direct length value.
+  *
+  * @param {string|length} $value - The spacing token key (e.g., '100') or a direct length value (e.g., '16px').
+  * @return {length} The computed spacing value.
+  * @example
+  *   .element {
+  *     margin: om-spacing-value('300'); // Returns 12px if $om-sys-spacing-unit is 4px
+  *     padding: om-spacing-value(16px); // Returns 16px
+  *     gap: om-spacing-value(2); // Returns 8px if $om-sys-spacing-unit is 4px
+  *   }
+  */
+.om-component-ui-tabs {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.om-component-ui-tabs-header {
+  position: relative;
+  display: flex;
+  gap: var(--om-spacing-0, 0px);
+  align-items: center;
+  overflow-x: auto;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+.om-component-ui-tabs-header::-webkit-scrollbar {
+  display: none;
+}
+.om-component-ui-tabs-header-full-width {
+  padding-bottom: 1px;
+}
+.om-component-ui-tabs-header-full-width::after {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  z-index: 0;
+  width: 100%;
+  height: 1px;
+  background-color: var(--om-border-neutral, #e3e4e4);
+  content: "";
+}
+.om-component-ui-tabs-header-full-width .om-component-ui-tabs-tab {
+  border-bottom: none;
+}
+.om-component-ui-tabs-header-full-width .om-component-ui-tabs-indicator {
+  z-index: 1;
+}
+.om-component-ui-tabs-tab {
+  display: inline-flex;
+  flex-shrink: 0;
+  gap: var(--om-spacing-100, 4px);
+  align-items: center;
+  justify-content: center;
+  height: var(--om-component-height-2xl, 52px);
+  padding: var(--om-spacing-100, 4px) var(--om-spacing-400, 16px);
+  color: var(--om-text-default-tertiary, #646465);
+  background: none;
+  border: none;
+  border-bottom: 1px solid var(--om-border-neutral, #e3e4e4);
+  border-radius: var(--om-radius-100, 4px) var(--om-radius-100, 4px) 0 0;
+  outline: none;
+  cursor: pointer;
+  transition: color 0.2s ease;
+  font-size: var(--om-title-md-font-size);
+  font-family: var(--om-title-md-font-family);
+  line-height: var(--om-title-md-line-height);
+  letter-spacing: var(--om-title-md-letter-spacing);
+  font-weight: var(--om-title-md-strong-font-weight);
+}
+.om-component-ui-tabs-tab:hover:not(.om-component-ui-tabs-tab-disabled):not(.om-component-ui-tabs-tab-active) {
+  color: var(--om-text-default, #131313);
+}
+.om-component-ui-tabs-tab-active {
+  color: var(--om-text-default, #131313);
+}
+.om-component-ui-tabs-tab-disabled {
+  color: var(--om-text-disabled, #bbbdc1);
+  cursor: not-allowed;
+}
+.om-component-ui-tabs-indicator {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 2px;
+  background-color: #000;
+  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+.om-component-ui-tabs-tab-label {
+  white-space: nowrap;
+}
+.om-component-ui-tabs-tab-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--om-spacing-100, 4px) var(--om-spacing-200, 8px);
+  color: var(--om-text-default-tertiary, #646465);
+  background-color: var(--om-bg-neutral-tertiary, #f0f0f0);
+  border-radius: var(--om-radius-full, 9999px);
+  font-size: var(--om-body-sm-font-size);
+  font-family: var(--om-body-sm-font-family);
+  line-height: var(--om-body-sm-line-height);
+  letter-spacing: var(--om-body-sm-letter-spacing);
+  font-weight: var(--om-body-sm-strong-font-weight);
+}
+.om-component-ui-tabs-panel {
+  padding: var(--om-spacing-400, 16px) 0;
+}

package/es/components/Tag/style/Tag.css

@@ -1 +1,87 @@
-.om-component-ui-tag{--om-tag-text:var(--om-text-default-tertiary,#646465);--om-tag-bg:var(--om-bg-neutral-tertiary,#f0f0f0);display:inline-flex;gap:var(--om-spacing-100,4px);align-items:center;justify-content:center;height:24px;padding:0 var(--om-spacing-200,8px);color:var(--om-tag-text);background-color:var(--om-tag-bg);border:none;border-radius:var(--om-radius-full,9999px);cursor:default}.om-component-ui-tag-medium{height:20px}.om-component-ui-tag-small{gap:var(--om-spacing-050,2px);height:16px;padding:0 var(--om-spacing-100,4px)}.om-component-ui-tag-icon{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;color:inherit}.om-component-ui-tag-label{flex-shrink:0;white-space:nowrap}.om-component-ui-tag-remove{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;color:inherit;cursor:pointer}.om-component-ui-tag-remove:hover{opacity:.6}.om-component-ui-tag-warning{--om-tag-text:var(--om-text-warning,#db8600);--om-tag-bg:var(--om-bg-warning-secondary-hover,rgba(244,198,0,.2))}.om-component-ui-tag-negative{--om-tag-text:var(--om-text-danger,#ae0000);--om-tag-bg:var(--om-bg-danger-tertiary-hover,rgba(174,0,0,.1))}.om-component-ui-tag-success{--om-tag-text:var(--om-text-positive,#1f5800);--om-tag-bg:var(--om-bg-positive-tertiary-hover,rgba(31,88,0,.1))}.om-component-ui-tag-recommended{--om-tag-text:var(--om-text-brand,#073387);--om-tag-bg:var(--om-bg-brand-tertiary,#edf2f9)}.om-component-ui-tag-black{--om-tag-text:var(--om-text-default,#131313);--om-tag-bg:var(--om-bg-default-tertiary,#e3e4e4)}
+/**
+  * Retrieves the spacing value for a given token key.
+  *
+  * @param {string} $key - The spacing token key (e.g., '100', '200').
+  * @return {length|null} The computed spacing value or null if the key is invalid.
+  * @example
+  *   .element {
+  *     padding: om-spacing-token('200'); // Returns 8px if $om-sys-spacing-unit is 4px
+  *   }
+  */
+/**
+  * Computes the spacing value based on a token key or a direct length value.
+  *
+  * @param {string|length} $value - The spacing token key (e.g., '100') or a direct length value (e.g., '16px').
+  * @return {length} The computed spacing value.
+  * @example
+  *   .element {
+  *     margin: om-spacing-value('300'); // Returns 12px if $om-sys-spacing-unit is 4px
+  *     padding: om-spacing-value(16px); // Returns 16px
+  *     gap: om-spacing-value(2); // Returns 8px if $om-sys-spacing-unit is 4px
+  *   }
+  */
+.om-component-ui-tag {
+  --om-tag-text: var(--om-text-default-tertiary, #646465);
+  --om-tag-bg: var(--om-bg-neutral-tertiary, #f0f0f0);
+  display: inline-flex;
+  gap: var(--om-spacing-100, 4px);
+  align-items: center;
+  justify-content: center;
+  height: 24px;
+  padding: 0 var(--om-spacing-200, 8px);
+  color: var(--om-tag-text);
+  background-color: var(--om-tag-bg);
+  border: none;
+  border-radius: var(--om-radius-full, 9999px);
+  cursor: default;
+}
+.om-component-ui-tag-medium {
+  height: 20px;
+}
+.om-component-ui-tag-small {
+  gap: var(--om-spacing-050, 2px);
+  height: 16px;
+  padding: 0 var(--om-spacing-100, 4px);
+}
+.om-component-ui-tag-icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  color: inherit;
+}
+.om-component-ui-tag-label {
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+.om-component-ui-tag-remove {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  color: inherit;
+  cursor: pointer;
+}
+.om-component-ui-tag-remove:hover {
+  opacity: 0.6;
+}
+.om-component-ui-tag-warning {
+  --om-tag-text: var(--om-text-warning, #db8600);
+  --om-tag-bg: var(--om-bg-warning-secondary-hover, rgba(244, 198, 0, 0.2));
+}
+.om-component-ui-tag-negative {
+  --om-tag-text: var(--om-text-danger, #ae0000);
+  --om-tag-bg: var(--om-bg-danger-tertiary-hover, rgba(174, 0, 0, 0.1));
+}
+.om-component-ui-tag-success {
+  --om-tag-text: var(--om-text-positive, #1f5800);
+  --om-tag-bg: var(--om-bg-positive-tertiary-hover, rgba(31, 88, 0, 0.1));
+}
+.om-component-ui-tag-recommended {
+  --om-tag-text: var(--om-text-brand, #073387);
+  --om-tag-bg: var(--om-bg-brand-tertiary, #edf2f9);
+}
+.om-component-ui-tag-black {
+  --om-tag-text: var(--om-text-default, #131313);
+  --om-tag-bg: var(--om-bg-default-tertiary, #e3e4e4);
+}