@pathscale/ui 1.2.10 → 1.3.0

package/dist/components/table/Table.css

@@ -1,426 +1,426 @@
-/* ==========================================================================
-   Table — HeroUI-style data display component for structured tabular data.
-   ========================================================================== */
-
-@layer components {
-  /* --------------------------------------------------------------------------
-     Table Root — Outer container for table + optional footer.
-     -------------------------------------------------------------------------- */
-  .table-root {
-    position: relative;
-    display: grid;
-    width: 100%;
-    overflow: clip;
-    grid-template-columns: minmax(0, 1fr);
-  }
-
-  .table-root--primary {
-    background-color: var(--color-base-200);
-    padding-inline: 0.25rem;
-    padding-bottom: 0.25rem;
-    border-radius: calc(var(--radius-box, 1rem) + 0.25rem);
-  }
-
-  /* --------------------------------------------------------------------------
-     Scroll Container
-     -------------------------------------------------------------------------- */
-  .table__scroll-container {
-    overflow-x: auto;
-    scrollbar-width: thin;
-    scrollbar-color: oklch(0% 0 0 / 0.15) transparent;
-  }
-
-  .table__scroll-container::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
-  }
-
-  .table__scroll-container::-webkit-scrollbar-track {
-    background: transparent;
-  }
-
-  .table__scroll-container::-webkit-scrollbar-thumb {
-    background: oklch(0% 0 0 / 0.15);
-    border-radius: 3px;
-  }
-
-  .table__scroll-container::-webkit-scrollbar-thumb:hover {
-    background: oklch(0% 0 0 / 0.25);
-  }
-
-  :is([data-theme="dark"], .dark) .table__scroll-container {
-    scrollbar-color: oklch(100% 0 0 / 0.15) transparent;
-  }
-
-  :is([data-theme="dark"], .dark) .table__scroll-container::-webkit-scrollbar-thumb {
-    background: oklch(100% 0 0 / 0.15);
-  }
-
-  :is([data-theme="dark"], .dark) .table__scroll-container::-webkit-scrollbar-thumb:hover {
-    background: oklch(100% 0 0 / 0.25);
-  }
-
-  /* --------------------------------------------------------------------------
-     Table Content (<table>)
-     -------------------------------------------------------------------------- */
-  .table__content {
-    width: 100%;
-    border-collapse: separate;
-    border-spacing: 0;
-    font-size: 0.875rem;
-    text-align: left;
-  }
-
-  .table__content:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
-    text-align: right;
-  }
-
-  .table-root--primary .table__content {
-    overflow: clip;
-  }
-
-  /* --------------------------------------------------------------------------
-     Table Header (<thead>)
-     -------------------------------------------------------------------------- */
-  .table__header {
-    background-color: var(--color-base-200);
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .table__header {
-      border-bottom: 1px solid color-mix(in oklch, var(--color-base-content) 8%, transparent);
-    }
-  }
-
-  .table-root--secondary .table__header {
-    border-bottom: 0;
-    background: transparent;
-  }
-
-  .table-root--secondary .table__column {
-    background-color: var(--color-base-200);
-  }
-
-  .table-root--secondary .table__column:first-child {
-    border-top-left-radius: var(--radius-box, 1rem);
-    border-bottom-left-radius: var(--radius-box, 1rem);
-  }
-
-  .table-root--secondary .table__column:last-child {
-    border-top-right-radius: var(--radius-box, 1rem);
-    border-bottom-right-radius: var(--radius-box, 1rem);
-  }
-
-  .table-root--secondary .table__body tr:first-child td:first-child,
-  .table-root--secondary .table__body tr:first-child td:last-child,
-  .table-root--secondary .table__body tr:last-child td:first-child,
-  .table-root--secondary .table__body tr:last-child td:last-child {
-    border-radius: 0;
-  }
-
-  .table-root--secondary .table__row .table__cell {
-    background-color: transparent;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .table-root--secondary .table__row .table__cell {
-      border-bottom: 1px solid color-mix(in oklch, var(--color-base-content) 5%, transparent);
-    }
-  }
-
-  @media (hover: hover) {
-    .table-root--secondary .table__row:hover .table__cell {
-      background-color: var(--color-base-200);
-    }
-
-    .table-root--secondary .table__row:hover .table__cell:first-child {
-      border-top-left-radius: var(--radius-box, 1rem);
-      border-bottom-left-radius: var(--radius-box, 1rem);
-    }
-
-    .table-root--secondary .table__row:hover .table__cell:last-child {
-      border-top-right-radius: var(--radius-box, 1rem);
-      border-bottom-right-radius: var(--radius-box, 1rem);
-    }
-  }
-
-  /* --------------------------------------------------------------------------
-     Table Column (<th>)
-     -------------------------------------------------------------------------- */
-  .table__column {
-    position: relative;
-    overflow: hidden;
-    padding-inline: 1rem;
-    padding-block: 0.625rem;
-    text-align: left;
-    font-size: 0.75rem;
-    font-weight: 500;
-    white-space: nowrap;
-    vertical-align: middle;
-  }
-
-  .table__column > * {
-    min-width: 0;
-    max-width: 100%;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .table__column {
-      color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
-    }
-  }
-
-  .table__column::after {
-    content: "";
-    position: absolute;
-    top: 50%;
-    right: 0;
-    height: 1rem;
-    width: 1px;
-    transform: translateY(-50%);
-    border-radius: 1px;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .table__column::after {
-      background-color: color-mix(in oklch, var(--color-base-content) 10%, transparent);
-    }
-  }
-
-  .table__column:last-child:not(:only-child)::after {
-    content: none;
-  }
-
-  .table__column[data-allows-sorting="true"] {
-    cursor: pointer;
-  }
-
-  @media (hover: hover) {
-    .table__column[data-allows-sorting="true"]:hover {
-      color: var(--color-base-content);
-    }
-  }
-
-  .table__column[data-sort-direction="ascending"],
-  .table__column[data-sort-direction="descending"] {
-    color: var(--color-base-content);
-  }
-
-  .table__column:focus-visible {
-    border-radius: 0.5rem;
-    outline: none;
-    box-shadow: inset 0 0 0 2px var(--color-accent);
-  }
-
-  /* --------------------------------------------------------------------------
-     Table Body (<tbody>)
-     -------------------------------------------------------------------------- */
-  .table__body tr:first-child td:first-child {
-    border-top-left-radius: var(--radius-box, 1rem);
-  }
-
-  .table__body tr:first-child td:last-child {
-    border-top-right-radius: var(--radius-box, 1rem);
-  }
-
-  .table__body tr:last-child td:first-child {
-    border-bottom-left-radius: var(--radius-box, 1rem);
-  }
-
-  .table__body tr:last-child td:last-child {
-    border-bottom-right-radius: var(--radius-box, 1rem);
-  }
-
-  /* --------------------------------------------------------------------------
-     Table Row (<tr>)
-     -------------------------------------------------------------------------- */
-  .table__row {
-    position: relative;
-    height: 100%;
-  }
-
-  @media (hover: hover) {
-    .table__row:hover .table__cell {
-      background-color: var(--color-base-200);
-    }
-  }
-
-  .table__row[data-selected="true"] .table__cell {
-    background-color: var(--color-base-200);
-  }
-
-  .table__row[aria-disabled="true"],
-  .table__row[data-disabled="true"] {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  .table__row:focus-visible {
-    outline: none;
-    box-shadow: inset 0 0 0 2px var(--color-accent);
-  }
-
-  .table__row[data-hovered="true"] .table__cell {
-    background-color: var(--color-base-200);
-  }
-
-  /* --------------------------------------------------------------------------
-     Table Cell (<td>)
-     -------------------------------------------------------------------------- */
-  .table__cell {
-    height: 100%;
-    background-color: var(--color-base-100);
-    padding-inline: 1rem;
-    padding-block: 0.75rem;
-    vertical-align: middle;
-    font-size: 0.875rem;
-    color: var(--color-base-content);
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .table__cell {
-      border-bottom: 1px solid color-mix(in oklch, var(--color-base-content) 5%, transparent);
-    }
-  }
-
-  .table__body tr:last-child .table__cell {
-    border-bottom: none;
-  }
-
-  .table__cell:focus-visible {
-    border-radius: 0.5rem;
-    outline: none;
-    box-shadow: inset 0 0 0 2px var(--color-accent);
-  }
-
-  .table__expanded-row .table__expanded-cell {
-    background-color: color-mix(in oklch, var(--color-base-200) 75%, var(--color-base-100));
-  }
-
-  .table__expanded-cell {
-    padding-block: 0.875rem;
-  }
-
-  /* --------------------------------------------------------------------------
-     Table Footer (div outside <table>)
-     -------------------------------------------------------------------------- */
-  .table__footer {
-    display: flex;
-    align-items: center;
-    padding-inline: 1rem;
-    padding-block: 0.625rem;
-  }
-
-  .table__page-size {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.5rem;
-    font-size: 0.75rem;
-    font-weight: 600;
-    letter-spacing: 0.16em;
-    text-transform: uppercase;
-  }
-
-  .table__page-size-label {
-    opacity: 0.7;
-  }
-
-  .table__page-size-select {
-    min-width: 4.5rem;
-    border-radius: 0.75rem;
-    border: 1px solid color-mix(in oklch, var(--color-base-content) 10%, transparent);
-    background-color: var(--color-base-100);
-    padding-inline: 0.75rem;
-    padding-block: 0.5rem;
-    font-size: 0.875rem;
-    font-weight: 500;
-    letter-spacing: normal;
-    text-transform: none;
-    color: var(--color-base-content);
-  }
-
-  .table__page-size-select:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 2px var(--color-accent);
-  }
-
-  /* --------------------------------------------------------------------------
-     Resizable Container
-     -------------------------------------------------------------------------- */
-  .table__resizable-container {
-    position: relative;
-    overflow: auto;
-  }
-
-  /* --------------------------------------------------------------------------
-     Column Resizer
-     -------------------------------------------------------------------------- */
-  .table__column-resizer {
-    position: absolute;
-    top: 50%;
-    right: 0;
-    box-sizing: content-box;
-    height: 1rem;
-    width: 1px;
-    padding-inline: 0.5rem;
-    transform: translate(50%, -50%);
-    border: 0;
-    border-radius: 1px;
-    background-color: transparent;
-    background-clip: content-box;
-    cursor: col-resize;
-    touch-action: none;
-    outline: none;
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .table__column-resizer {
-      background-color: color-mix(in oklch, var(--color-base-content) 10%, transparent);
-    }
-  }
-
-  .table__column-resizer[data-hovered="true"],
-  .table__column-resizer:hover,
-  .table__column-resizer[data-resizing="true"] {
-    top: 0;
-    height: 100%;
-    width: 2px;
-    transform: translateX(50%);
-    background-color: var(--color-accent);
-  }
-
-  .table__column-resizer[data-focus-visible="true"],
-  .table__column-resizer:focus-visible {
-    top: 0;
-    height: 100%;
-    width: 2px;
-    transform: translateX(50%);
-    background-color: var(--color-focus, var(--color-accent));
-  }
-
-  .table__column:has(.table__column-resizer)::after {
-    content: none;
-  }
-
-  /* --------------------------------------------------------------------------
-     Load More
-     -------------------------------------------------------------------------- */
-  .table__load-more td,
-  .table__load-more [role="rowheader"] {
-    padding-block: 0.75rem;
-    text-align: center;
-  }
-
-  .table__load-more td > *,
-  .table__load-more [role="rowheader"] > * {
-    margin-inline: auto;
-  }
-
-  .table__load-more-content {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.5rem;
-    padding-block: 0.5rem;
-  }
-}
+/* ==========================================================================
+   Table — HeroUI-style data display component for structured tabular data.
+   ========================================================================== */
+
+@layer components {
+  /* --------------------------------------------------------------------------
+     Table Root — Outer container for table + optional footer.
+     -------------------------------------------------------------------------- */
+  .table-root {
+    position: relative;
+    display: grid;
+    width: 100%;
+    overflow: clip;
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .table-root--primary {
+    background-color: var(--color-base-200);
+    padding-inline: 0.25rem;
+    padding-bottom: 0.25rem;
+    border-radius: calc(var(--radius-box, 1rem) + 0.25rem);
+  }
+
+  /* --------------------------------------------------------------------------
+     Scroll Container
+     -------------------------------------------------------------------------- */
+  .table__scroll-container {
+    overflow-x: auto;
+    scrollbar-width: thin;
+    scrollbar-color: oklch(0% 0 0 / 0.15) transparent;
+  }
+
+  .table__scroll-container::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  .table__scroll-container::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .table__scroll-container::-webkit-scrollbar-thumb {
+    background: oklch(0% 0 0 / 0.15);
+    border-radius: 3px;
+  }
+
+  .table__scroll-container::-webkit-scrollbar-thumb:hover {
+    background: oklch(0% 0 0 / 0.25);
+  }
+
+  :is([data-theme="dark"], .dark) .table__scroll-container {
+    scrollbar-color: oklch(100% 0 0 / 0.15) transparent;
+  }
+
+  :is([data-theme="dark"], .dark) .table__scroll-container::-webkit-scrollbar-thumb {
+    background: oklch(100% 0 0 / 0.15);
+  }
+
+  :is([data-theme="dark"], .dark) .table__scroll-container::-webkit-scrollbar-thumb:hover {
+    background: oklch(100% 0 0 / 0.25);
+  }
+
+  /* --------------------------------------------------------------------------
+     Table Content (<table>)
+     -------------------------------------------------------------------------- */
+  .table__content {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    font-size: 0.875rem;
+    text-align: left;
+  }
+
+  .table__content:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+    text-align: right;
+  }
+
+  .table-root--primary .table__content {
+    overflow: clip;
+  }
+
+  /* --------------------------------------------------------------------------
+     Table Header (<thead>)
+     -------------------------------------------------------------------------- */
+  .table__header {
+    background-color: var(--color-base-200);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .table__header {
+      border-bottom: 1px solid color-mix(in oklch, var(--color-base-content) 8%, transparent);
+    }
+  }
+
+  .table-root--secondary .table__header {
+    border-bottom: 0;
+    background: transparent;
+  }
+
+  .table-root--secondary .table__column {
+    background-color: var(--color-base-200);
+  }
+
+  .table-root--secondary .table__column:first-child {
+    border-top-left-radius: var(--radius-box, 1rem);
+    border-bottom-left-radius: var(--radius-box, 1rem);
+  }
+
+  .table-root--secondary .table__column:last-child {
+    border-top-right-radius: var(--radius-box, 1rem);
+    border-bottom-right-radius: var(--radius-box, 1rem);
+  }
+
+  .table-root--secondary .table__body tr:first-child td:first-child,
+  .table-root--secondary .table__body tr:first-child td:last-child,
+  .table-root--secondary .table__body tr:last-child td:first-child,
+  .table-root--secondary .table__body tr:last-child td:last-child {
+    border-radius: 0;
+  }
+
+  .table-root--secondary .table__row .table__cell {
+    background-color: transparent;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .table-root--secondary .table__row .table__cell {
+      border-bottom: 1px solid color-mix(in oklch, var(--color-base-content) 5%, transparent);
+    }
+  }
+
+  @media (hover: hover) {
+    .table-root--secondary .table__row:hover .table__cell {
+      background-color: var(--color-base-200);
+    }
+
+    .table-root--secondary .table__row:hover .table__cell:first-child {
+      border-top-left-radius: var(--radius-box, 1rem);
+      border-bottom-left-radius: var(--radius-box, 1rem);
+    }
+
+    .table-root--secondary .table__row:hover .table__cell:last-child {
+      border-top-right-radius: var(--radius-box, 1rem);
+      border-bottom-right-radius: var(--radius-box, 1rem);
+    }
+  }
+
+  /* --------------------------------------------------------------------------
+     Table Column (<th>)
+     -------------------------------------------------------------------------- */
+  .table__column {
+    position: relative;
+    overflow: hidden;
+    padding-inline: 1rem;
+    padding-block: 0.625rem;
+    text-align: left;
+    font-size: 0.75rem;
+    font-weight: 500;
+    white-space: nowrap;
+    vertical-align: middle;
+  }
+
+  .table__column > * {
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .table__column {
+      color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
+    }
+  }
+
+  .table__column::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    right: 0;
+    height: 1rem;
+    width: 1px;
+    transform: translateY(-50%);
+    border-radius: 1px;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .table__column::after {
+      background-color: color-mix(in oklch, var(--color-base-content) 10%, transparent);
+    }
+  }
+
+  .table__column:last-child:not(:only-child)::after {
+    content: none;
+  }
+
+  .table__column[data-allows-sorting="true"] {
+    cursor: pointer;
+  }
+
+  @media (hover: hover) {
+    .table__column[data-allows-sorting="true"]:hover {
+      color: var(--color-base-content);
+    }
+  }
+
+  .table__column[data-sort-direction="ascending"],
+  .table__column[data-sort-direction="descending"] {
+    color: var(--color-base-content);
+  }
+
+  .table__column:focus-visible {
+    border-radius: 0.5rem;
+    outline: none;
+    box-shadow: inset 0 0 0 2px var(--color-accent);
+  }
+
+  /* --------------------------------------------------------------------------
+     Table Body (<tbody>)
+     -------------------------------------------------------------------------- */
+  .table__body tr:first-child td:first-child {
+    border-top-left-radius: var(--radius-box, 1rem);
+  }
+
+  .table__body tr:first-child td:last-child {
+    border-top-right-radius: var(--radius-box, 1rem);
+  }
+
+  .table__body tr:last-child td:first-child {
+    border-bottom-left-radius: var(--radius-box, 1rem);
+  }
+
+  .table__body tr:last-child td:last-child {
+    border-bottom-right-radius: var(--radius-box, 1rem);
+  }
+
+  /* --------------------------------------------------------------------------
+     Table Row (<tr>)
+     -------------------------------------------------------------------------- */
+  .table__row {
+    position: relative;
+    height: 100%;
+  }
+
+  @media (hover: hover) {
+    .table__row:hover .table__cell {
+      background-color: var(--color-base-200);
+    }
+  }
+
+  .table__row[data-selected="true"] .table__cell {
+    background-color: var(--color-base-200);
+  }
+
+  .table__row[aria-disabled="true"],
+  .table__row[data-disabled="true"] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .table__row:focus-visible {
+    outline: none;
+    box-shadow: inset 0 0 0 2px var(--color-accent);
+  }
+
+  .table__row[data-hovered="true"] .table__cell {
+    background-color: var(--color-base-200);
+  }
+
+  /* --------------------------------------------------------------------------
+     Table Cell (<td>)
+     -------------------------------------------------------------------------- */
+  .table__cell {
+    height: 100%;
+    background-color: var(--color-base-100);
+    padding-inline: 1rem;
+    padding-block: 0.75rem;
+    vertical-align: middle;
+    font-size: 0.875rem;
+    color: var(--color-base-content);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .table__cell {
+      border-bottom: 1px solid color-mix(in oklch, var(--color-base-content) 5%, transparent);
+    }
+  }
+
+  .table__body tr:last-child .table__cell {
+    border-bottom: none;
+  }
+
+  .table__cell:focus-visible {
+    border-radius: 0.5rem;
+    outline: none;
+    box-shadow: inset 0 0 0 2px var(--color-accent);
+  }
+
+  .table__expanded-row .table__expanded-cell {
+    background-color: color-mix(in oklch, var(--color-base-200) 75%, var(--color-base-100));
+  }
+
+  .table__expanded-cell {
+    padding-block: 0.875rem;
+  }
+
+  /* --------------------------------------------------------------------------
+     Table Footer (div outside <table>)
+     -------------------------------------------------------------------------- */
+  .table__footer {
+    display: flex;
+    align-items: center;
+    padding-inline: 1rem;
+    padding-block: 0.625rem;
+  }
+
+  .table__page-size {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.75rem;
+    font-weight: 600;
+    letter-spacing: 0.16em;
+    text-transform: uppercase;
+  }
+
+  .table__page-size-label {
+    opacity: 0.7;
+  }
+
+  .table__page-size-select {
+    min-width: 4.5rem;
+    border-radius: 0.75rem;
+    border: 1px solid color-mix(in oklch, var(--color-base-content) 10%, transparent);
+    background-color: var(--color-base-100);
+    padding-inline: 0.75rem;
+    padding-block: 0.5rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    letter-spacing: normal;
+    text-transform: none;
+    color: var(--color-base-content);
+  }
+
+  .table__page-size-select:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--color-accent);
+  }
+
+  /* --------------------------------------------------------------------------
+     Resizable Container
+     -------------------------------------------------------------------------- */
+  .table__resizable-container {
+    position: relative;
+    overflow: auto;
+  }
+
+  /* --------------------------------------------------------------------------
+     Column Resizer
+     -------------------------------------------------------------------------- */
+  .table__column-resizer {
+    position: absolute;
+    top: 50%;
+    right: 0;
+    box-sizing: content-box;
+    height: 1rem;
+    width: 1px;
+    padding-inline: 0.5rem;
+    transform: translate(50%, -50%);
+    border: 0;
+    border-radius: 1px;
+    background-color: transparent;
+    background-clip: content-box;
+    cursor: col-resize;
+    touch-action: none;
+    outline: none;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .table__column-resizer {
+      background-color: color-mix(in oklch, var(--color-base-content) 10%, transparent);
+    }
+  }
+
+  .table__column-resizer[data-hovered="true"],
+  .table__column-resizer:hover,
+  .table__column-resizer[data-resizing="true"] {
+    top: 0;
+    height: 100%;
+    width: 2px;
+    transform: translateX(50%);
+    background-color: var(--color-accent);
+  }
+
+  .table__column-resizer[data-focus-visible="true"],
+  .table__column-resizer:focus-visible {
+    top: 0;
+    height: 100%;
+    width: 2px;
+    transform: translateX(50%);
+    background-color: var(--color-focus, var(--color-accent));
+  }
+
+  .table__column:has(.table__column-resizer)::after {
+    content: none;
+  }
+
+  /* --------------------------------------------------------------------------
+     Load More
+     -------------------------------------------------------------------------- */
+  .table__load-more td,
+  .table__load-more [role="rowheader"] {
+    padding-block: 0.75rem;
+    text-align: center;
+  }
+
+  .table__load-more td > *,
+  .table__load-more [role="rowheader"] > * {
+    margin-inline: auto;
+  }
+
+  .table__load-more-content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    padding-block: 0.5rem;
+  }
+}