@duskmoon-dev/core 1.18.4 → 1.18.5

package/dist/esm/components/table.js

@@ -14,6 +14,11 @@ export const css = `/**
     color: var(--color-on-surface);
   }
 
+  /* Surface Variant */
+  .table-surface {
+    background-color: var(--color-surface);
+  }
+
   /* Table Head */
   .table thead,
   .table-header {
@@ -61,7 +66,9 @@ export const css = `/**
 
   /* Zebra Striping */
   .table-zebra tbody tr:nth-child(even),
-  .table-zebra .table-row:nth-child(even) {
+  .table-zebra .table-row:nth-child(even),
+  .table-striped tbody tr:nth-child(even),
+  .table-striped .table-row:nth-child(even) {
     background-color: var(--color-surface-container-low);
   }
 
@@ -83,6 +90,16 @@ export const css = `/**
     border: 1px solid var(--color-outline-variant);
   }
 
+  /* Borderless Table */
+  .table-borderless,
+  .table-borderless th,
+  .table-borderless td,
+  .table-borderless tfoot td,
+  .table-borderless .table-header-cell,
+  .table-borderless .table-cell {
+    border: none;
+  }
+
   /* Compact Table */
   .table-compact th,
   .table-compact td {
@@ -101,6 +118,16 @@ export const css = `/**
     table-layout: fixed;
   }
 
+  /* Sticky Header */
+  .table-sticky thead,
+  .table-sticky .table-header {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    background-color: var(--color-surface-container);
+    box-shadow: var(--shadow-xs);
+  }
+
   /* Sortable Header */
   .table-sortable th {
     cursor: pointer;
@@ -121,9 +148,24 @@ export const css = `/**
     opacity: 0.7;
   }
 
+  /* Selectable Rows */
+  .table-selectable tbody tr,
+  .table-selectable .table-row {
+    cursor: pointer;
+  }
+
+  .table-selectable tbody tr:hover,
+  .table-selectable .table-row:hover {
+    background-color: color-mix(in oklch, var(--color-on-surface) 8%, transparent);
+  }
+
   /* Selected Row */
   .table-row-selected,
-  .table tr.selected {
+  .table tr.selected,
+  .table-selectable tbody tr.table-row-selected,
+  .table-selectable .table-row.table-row-selected,
+  .table-selectable tbody tr.selected,
+  .table-selectable .table-row.selected {
     background-color: var(--color-primary-container);
     color: var(--color-on-primary-container);
   }

package/dist/index.css

@@ -1651,6 +1651,25 @@ html {
   }
 
   /* Icon Button */
+  .btn-icon {
+    padding: 0.75rem;
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: var(--radius-full);
+  }
+
+  .btn-icon-sm {
+    padding: 0.5rem;
+    width: 2rem;
+    height: 2rem;
+  }
+
+  .btn-icon-lg {
+    padding: 1rem;
+    width: 3rem;
+    height: 3rem;
+  }
+
   .btn-circle {
     --btn-p: 0.625rem;
     --btn-py: 0.625rem;
@@ -4215,112 +4234,141 @@ html {
   }
 
   /* Outlined Variants */
+  .badge-outlined,
+  .badge-outlined-secondary,
+  .badge-outlined-tertiary,
   .badge-outline {
     background-color: transparent;
     border: 1px solid currentColor;
   }
 
+  .badge-outlined,
+  .badge-outlined.badge-primary,
   .badge-outline.badge-primary {
     color: var(--color-primary);
     border-color: var(--color-primary);
   }
 
+  .badge-outlined.badge-secondary,
+  .badge-outlined-secondary,
   .badge-outline.badge-secondary {
     color: var(--color-secondary);
     border-color: var(--color-secondary);
   }
 
+  .badge-outlined.badge-tertiary,
+  .badge-outlined-tertiary,
   .badge-outline.badge-tertiary {
     color: var(--color-tertiary);
     border-color: var(--color-tertiary);
   }
 
+  .badge-outlined.badge-accent,
   .badge-outline.badge-accent {
     color: var(--color-accent);
     border-color: var(--color-accent);
   }
 
+  .badge-outlined.badge-neutral,
   .badge-outline.badge-neutral {
     color: var(--color-neutral);
     border-color: var(--color-neutral);
   }
 
+  .badge-outlined.badge-base,
   .badge-outline.badge-base {
     color: var(--color-base-content);
     border-color: var(--color-base-content);
   }
 
+  .badge-outlined.badge-info,
   .badge-outline.badge-info {
     color: var(--color-info);
     border-color: var(--color-info);
   }
 
+  .badge-outlined.badge-success,
   .badge-outline.badge-success {
     color: var(--color-success);
     border-color: var(--color-success);
   }
 
+  .badge-outlined.badge-warning,
   .badge-outline.badge-warning {
     color: var(--color-warning);
     border-color: var(--color-warning);
   }
 
+  .badge-outlined.badge-error,
   .badge-outline.badge-error {
     color: var(--color-error);
     border-color: var(--color-error);
   }
 
   /* Soft/Tonal Variants */
+  .badge-tonal,
   .badge-soft {
     background-color: var(--color-primary-container);
     color: var(--color-on-primary-container);
   }
 
+  .badge-tonal.badge-primary,
   .badge-soft.badge-primary {
     background-color: var(--color-primary-container);
     color: var(--color-on-primary-container);
   }
 
+  .badge-tonal.badge-secondary,
+  .badge-tonal-secondary,
   .badge-soft.badge-secondary {
     background-color: var(--color-secondary-container);
     color: var(--color-on-secondary-container);
   }
 
+  .badge-tonal.badge-tertiary,
+  .badge-tonal-tertiary,
   .badge-soft.badge-tertiary {
     background-color: var(--color-tertiary-container);
     color: var(--color-on-tertiary-container);
   }
 
+  .badge-tonal.badge-accent,
   .badge-soft.badge-accent {
     background-color: color-mix(in oklch, var(--color-accent) 15%, var(--color-surface));
     color: var(--color-on-surface);
   }
 
+  .badge-tonal.badge-neutral,
   .badge-soft.badge-neutral {
     background-color: color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface));
     color: var(--color-on-surface);
   }
 
+  .badge-tonal.badge-base,
   .badge-soft.badge-base {
     background-color: var(--color-base-200);
     color: var(--color-base-content);
   }
 
+  .badge-tonal.badge-info,
   .badge-soft.badge-info {
     background-color: var(--color-info-container);
     color: var(--color-on-info-container);
   }
 
+  .badge-tonal.badge-success,
   .badge-soft.badge-success {
     background-color: var(--color-success-container);
     color: var(--color-on-success-container);
   }
 
+  .badge-tonal.badge-warning,
   .badge-soft.badge-warning {
     background-color: var(--color-warning-container);
     color: var(--color-on-warning-container);
   }
 
+  .badge-tonal.badge-error,
   .badge-soft.badge-error {
     background-color: var(--color-error-container);
     color: var(--color-on-error-container);
@@ -5815,6 +5863,11 @@ html {
     color: var(--color-on-surface);
   }
 
+  /* Surface Variant */
+  .table-surface {
+    background-color: var(--color-surface);
+  }
+
   /* Table Head */
   .table thead,
   .table-header {
@@ -5862,7 +5915,9 @@ html {
 
   /* Zebra Striping */
   .table-zebra tbody tr:nth-child(even),
-  .table-zebra .table-row:nth-child(even) {
+  .table-zebra .table-row:nth-child(even),
+  .table-striped tbody tr:nth-child(even),
+  .table-striped .table-row:nth-child(even) {
     background-color: var(--color-surface-container-low);
   }
 
@@ -5884,6 +5939,16 @@ html {
     border: 1px solid var(--color-outline-variant);
   }
 
+  /* Borderless Table */
+  .table-borderless,
+  .table-borderless th,
+  .table-borderless td,
+  .table-borderless tfoot td,
+  .table-borderless .table-header-cell,
+  .table-borderless .table-cell {
+    border: none;
+  }
+
   /* Compact Table */
   .table-compact th,
   .table-compact td {
@@ -5902,6 +5967,16 @@ html {
     table-layout: fixed;
   }
 
+  /* Sticky Header */
+  .table-sticky thead,
+  .table-sticky .table-header {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    background-color: var(--color-surface-container);
+    box-shadow: var(--shadow-xs);
+  }
+
   /* Sortable Header */
   .table-sortable th {
     cursor: pointer;
@@ -5922,9 +5997,24 @@ html {
     opacity: 0.7;
   }
 
+  /* Selectable Rows */
+  .table-selectable tbody tr,
+  .table-selectable .table-row {
+    cursor: pointer;
+  }
+
+  .table-selectable tbody tr:hover,
+  .table-selectable .table-row:hover {
+    background-color: color-mix(in oklch, var(--color-on-surface) 8%, transparent);
+  }
+
   /* Selected Row */
   .table-row-selected,
-  .table tr.selected {
+  .table tr.selected,
+  .table-selectable tbody tr.table-row-selected,
+  .table-selectable .table-row.table-row-selected,
+  .table-selectable tbody tr.selected,
+  .table-selectable .table-row.selected {
     background-color: var(--color-primary-container);
     color: var(--color-on-primary-container);
   }