@fusion.dev/helix-styles 0.183.0 → 0.185.0

package/dist/elements.css

@@ -343,37 +343,96 @@ helix-data-table:not(:defined):has(> helix-table-row) {
   overflow-x: auto;
 }
 helix-data-table:not(:defined) {
-  --data-table-template: repeat(var(--_data-table-count, 1), minmax(max-content, 1fr));
+  --data-table-template: var(--_data-table-lead,) repeat(var(--_table-count, 1), minmax(max-content, 1fr));
 }
-helix-data-table:not(:defined):has(> helix-table-column:nth-of-type(1):last-of-type) {
-  --_data-table-count: 1;
+:is(helix-data-table, helix-table):not(:defined):has(> helix-table-column:nth-of-type(1):last-of-type) {
+  --_table-count: 1;
 }
-helix-data-table:not(:defined):has(> helix-table-column:nth-of-type(2):last-of-type) {
-  --_data-table-count: 2;
+:is(helix-data-table, helix-table):not(:defined):has(> helix-table-column:nth-of-type(2):last-of-type) {
+  --_table-count: 2;
 }
-helix-data-table:not(:defined):has(> helix-table-column:nth-of-type(3):last-of-type) {
-  --_data-table-count: 3;
+:is(helix-data-table, helix-table):not(:defined):has(> helix-table-column:nth-of-type(3):last-of-type) {
+  --_table-count: 3;
 }
-helix-data-table:not(:defined):has(> helix-table-column:nth-of-type(4):last-of-type) {
-  --_data-table-count: 4;
+:is(helix-data-table, helix-table):not(:defined):has(> helix-table-column:nth-of-type(4):last-of-type) {
+  --_table-count: 4;
 }
-helix-data-table:not(:defined):has(> helix-table-column:nth-of-type(5):last-of-type) {
-  --_data-table-count: 5;
+:is(helix-data-table, helix-table):not(:defined):has(> helix-table-column:nth-of-type(5):last-of-type) {
+  --_table-count: 5;
 }
-helix-data-table:not(:defined):has(> helix-table-column:nth-of-type(6):last-of-type) {
-  --_data-table-count: 6;
+:is(helix-data-table, helix-table):not(:defined):has(> helix-table-column:nth-of-type(6):last-of-type) {
+  --_table-count: 6;
 }
-helix-data-table:not(:defined):has(> helix-table-column:nth-of-type(7):last-of-type) {
-  --_data-table-count: 7;
+:is(helix-data-table, helix-table):not(:defined):has(> helix-table-column:nth-of-type(7):last-of-type) {
+  --_table-count: 7;
 }
-helix-data-table:not(:defined):has(> helix-table-column:nth-of-type(8):last-of-type) {
-  --_data-table-count: 8;
+:is(helix-data-table, helix-table):not(:defined):has(> helix-table-column:nth-of-type(8):last-of-type) {
+  --_table-count: 8;
 }
-helix-data-table:not(:defined):has(> helix-table-column:nth-of-type(9):last-of-type) {
-  --_data-table-count: 9;
+:is(helix-data-table, helix-table):not(:defined):has(> helix-table-column:nth-of-type(9):last-of-type) {
+  --_table-count: 9;
 }
-helix-data-table:not(:defined):has(> helix-table-column:nth-of-type(10):last-of-type) {
-  --_data-table-count: 10;
+:is(helix-data-table, helix-table):not(:defined):has(> helix-table-column:nth-of-type(10):last-of-type) {
+  --_table-count: 10;
+}
+@supports (grid-template-columns: attr(columns type(*))) {
+  helix-data-table:not(:defined)[columns] {
+    --data-table-template: var(--_data-table-lead,) attr(columns type(*));
+  }
+}
+helix-data-table:not(:defined):is([selectable], [reorderable-rows]:not([child-field])) {
+  --_data-table-lead: max-content;
+}
+helix-data-table:not(:defined)[selectable][reorderable-rows]:not([child-field]) {
+  --_data-table-lead: calc(1em + 2 * var(--data-table-padding-inline, var(--helix-space-sm)))
+    calc(var(--checkbox-size, var(--helix-size-checkbox)) + 2 * var(--data-table-padding-inline, var(--helix-space-sm)));
+}
+helix-data-table:not(:defined):has(> helix-table-row):is([selectable], [reorderable-rows]:not([child-field]))::before,
+helix-data-table:is([selectable], [reorderable-rows]:not([child-field])) > helix-table-row:not([hidden])::before {
+  border-block-end: var(--helix-border-thin) solid
+    var(--data-table-rule-color, var(--helix-color-border));
+  content: '';
+  grid-column: 1;
+}
+helix-data-table:is([selectable], [reorderable-rows]:not([child-field])) > helix-table-row:last-of-type::before {
+  border-block-end-color: transparent;
+}
+helix-data-table:where([selectable], [reorderable-rows]:not([child-field])) > helix-table-row:not([hidden])::before {
+  block-size: 1em;
+  box-sizing: content-box;
+  inline-size: 1em;
+  padding-block: var(--data-table-padding-block, var(--helix-space-sm));
+  padding-inline: var(--data-table-padding-inline, var(--helix-space-sm));
+}
+helix-data-table[selectable] > helix-table-row:not([hidden])::before {
+  block-size: var(--checkbox-size, var(--helix-size-checkbox));
+  inline-size: var(--checkbox-size, var(--helix-size-checkbox));
+}
+helix-data-table:not(:defined):has(> helix-table-row)[selectable][reorderable-rows]:not([child-field])::before,
+helix-data-table[selectable][reorderable-rows]:not([child-field]) > helix-table-row:not([hidden])::before {
+  grid-column: 1 / span 2;
+  inline-size: auto;
+}
+helix-table:not(:defined):has(> helix-table-column) {
+  --table-template: var(--_table-lead,) repeat(var(--_table-count, 1), minmax(max-content, 1fr));
+}
+helix-table:not(:defined)[reorderable] {
+  --_table-lead: calc(var(--helix-space-2xs) + 1em + var(--helix-space-sm));
+}
+helix-table:not(:defined)[selectable] {
+  --_table-lead: calc(var(--checkbox-size, var(--helix-size-checkbox)) + var(--helix-space-md));
+}
+helix-table:not(:defined)[reorderable][selectable] {
+  --_table-lead: calc(var(--helix-space-2xs) + 1em + var(--helix-space-sm))
+    calc(var(--checkbox-size, var(--helix-size-checkbox)) + var(--helix-space-md));
+}
+helix-table:not(:defined):is([reorderable], [selectable]) > helix-table-row:not([hidden])::before {
+  border-block-end: var(--helix-border-thin) solid var(--helix-color-border);
+  content: '';
+  grid-column: 1;
+}
+helix-table:not(:defined)[reorderable][selectable] > helix-table-row:not([hidden])::before {
+  grid-column: 1 / span 2;
 }
 helix-data-table:not(:defined):has(> helix-table-row) > helix-table-column:not([hidden]) {
   align-items: center;
@@ -434,10 +493,12 @@ helix-data-table:has(> helix-table-column:nth-of-type(9)[text-align="end"]) > he
 helix-data-table:has(> helix-table-column:nth-of-type(10)[text-align="end"]) > helix-table-row > :nth-child(10) {
   text-align: end;
 }
-helix-data-table:defined:is([selectable], [reorderable-rows]) > helix-table-row > :first-child {
+helix-data-table:not(:defined):has(> helix-table-row):is([selectable], [reorderable-rows]:not([child-field])) > helix-table-column:first-of-type,
+helix-data-table:is([selectable], [reorderable-rows]:not([child-field])) > helix-table-row > :first-child {
   grid-column-start: 2;
 }
-helix-data-table:defined[selectable][reorderable-rows] > helix-table-row > :first-child {
+helix-data-table:not(:defined):has(> helix-table-row)[selectable][reorderable-rows]:not([child-field]) > helix-table-column:first-of-type,
+helix-data-table[selectable][reorderable-rows]:not([child-field]) > helix-table-row > :first-child {
   grid-column-start: 3;
 }
 helix-data-table:not(:defined):has(> helix-table-row) > [slot="toolbar"] {
@@ -456,6 +517,17 @@ helix-data-table:not(:defined):has(> helix-table-row) > [slot="footer"] {
 helix-data-table:not(:defined):has(> helix-table-row):has(> [slot="footer"])::part(footer) {
   padding-block-start: 0;
 }
+helix-data-table:not(:defined):has(> helix-table-row):is([page-size]:not([page-size="0"]), [paginated]):not(:has(> [slot="footer"]))::after {
+  block-size: var(--pagination-size, var(--helix-size-control-tight));
+  content: '';
+  grid-column: 1 / -1;
+  margin-block-start: var(--data-table-footer-gap, var(--helix-space-sm));
+  order: 1;
+}
+helix-data-table:not(:defined):has(> helix-table-row):is([page-size]:not([page-size="0"]), [paginated]) > [slot="footer"] {
+  align-content: center;
+  min-block-size: var(--pagination-size, var(--helix-size-control-tight));
+}
 helix-data-table:not(:defined):has(> helix-table-row) > :is([slot="empty"], [slot="error"], [slot="loading"]) {
   display: none;
 }

package/dist/primitives.css

@@ -122,7 +122,7 @@
   --_helix-size-18: 1.125rem;
   --_helix-size-24: 1.5rem;
   --_helix-size-32: 2rem;
-  --_helix-size-44: 2.75rem;
+  --_helix-size-42: 2.625rem;
   --_helix-ms-120: 120ms;
   --_helix-ms-200: 200ms;
   --_helix-ms-320: 320ms;

package/dist/tokens.css

@@ -453,7 +453,7 @@
   --helix-text-lg: var(--_helix-size-18);
   --helix-text-xl: var(--_helix-size-24);
   --helix-text-2xl: var(--_helix-size-32);
-  --helix-text-3xl: var(--_helix-size-44);
+  --helix-text-3xl: var(--_helix-size-42);
   --helix-weight-regular: 400;
   --helix-weight-medium: 500;
   --helix-weight-semibold: 600;

package/dist/tokens.json

@@ -583,7 +583,7 @@
     {
       "category": "text",
       "name": "--helix-text-3xl",
-      "value": "var(--_helix-size-44)"
+      "value": "var(--_helix-size-42)"
     },
     {
       "category": "weight",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-styles",
   "description": "Design tokens and base layer. Pure CSS, no JavaScript.",
-  "version": "0.183.0",
+  "version": "0.185.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {