@lmfaole/basics 0.4.0 → 0.5.0

package/basic-styling/components/basic-summary-table.css

@@ -2,6 +2,11 @@ basic-summary-table {
     --basic-summary-table-caption-gap: var(--basic-flow-space);
     --basic-summary-table-cell-padding-block: var(--basic-space-3);
     --basic-summary-table-cell-padding-inline: var(--basic-space-4);
+    --basic-summary-table-row-background-zebra: color-mix(
+        in oklch,
+        var(--basic-color-surface-muted) 48%,
+        var(--basic-color-surface)
+    );
 
     display: block;
     overflow-x: auto;
@@ -33,10 +38,19 @@ basic-summary-table tr {
 basic-summary-table th,
 basic-summary-table td {
     padding: var(--basic-summary-table-cell-padding-block) var(--basic-summary-table-cell-padding-inline);
-    border-block-end: var(--basic-border-width) solid var(--basic-color-border);
+    border: 0 solid var(--basic-color-border);
     vertical-align: top;
 }
 
+basic-summary-table:is(:not([data-separators]), [data-separators="rows"], [data-separators="both"]) th,
+basic-summary-table:is(:not([data-separators]), [data-separators="rows"], [data-separators="both"]) td {
+    border-block-end-width: var(--basic-border-width);
+}
+
+basic-summary-table:is([data-separators="columns"], [data-separators="both"]) tr > :is(th, td):not(:last-child) {
+    border-inline-end-width: var(--basic-border-width);
+}
+
 basic-summary-table td {
     font-variant-numeric: tabular-nums;
 }
@@ -46,27 +60,35 @@ basic-summary-table thead th {
     font-weight: 700;
 }
 
-basic-summary-table tbody tr:last-child th,
-basic-summary-table tbody tr:last-child td {
-    border-block-end: 0;
+basic-summary-table:is(:not([data-separators]), [data-separators="rows"], [data-separators="both"]) tbody tr:last-child th,
+basic-summary-table:is(:not([data-separators]), [data-separators="rows"], [data-separators="both"]) tbody tr:last-child td {
+    border-block-end-width: 0;
 }
 
 basic-summary-table tbody th {
     font-weight: 600;
 }
 
+basic-summary-table[data-zebra] tbody tr:nth-child(even) > :is(th, td) {
+    background: var(--basic-summary-table-row-background-zebra);
+}
+
 basic-summary-table tbody td {
     color: var(--basic-color-text-muted);
 }
 
 basic-summary-table tfoot th,
 basic-summary-table tfoot td {
-    border-block-start: calc(var(--basic-border-width) * 2) solid var(--basic-color-border);
     border-block-end: 0;
     background: var(--basic-color-surface-muted);
     font-weight: 700;
 }
 
+basic-summary-table:is(:not([data-separators]), [data-separators="rows"], [data-separators="both"]) tfoot th,
+basic-summary-table:is(:not([data-separators]), [data-separators="rows"], [data-separators="both"]) tfoot td {
+    border-block-start: calc(var(--basic-border-width) * 2) solid var(--basic-color-border);
+}
+
 basic-summary-table tfoot td[data-summary-empty] {
     color: var(--basic-color-text-muted);
 }

package/basic-styling/components/basic-table.css

@@ -2,6 +2,11 @@ basic-table {
     --basic-table-caption-gap: var(--basic-flow-space);
     --basic-table-cell-padding-block: var(--basic-space-3);
     --basic-table-cell-padding-inline: var(--basic-space-4);
+    --basic-table-row-background-zebra: color-mix(
+        in oklch,
+        var(--basic-color-surface-muted) 48%,
+        var(--basic-color-surface)
+    );
     display: block;
     overflow-x: auto;
 }
@@ -24,25 +29,38 @@ basic-table caption {
 basic-table th,
 basic-table td {
     padding: var(--basic-table-cell-padding-block) var(--basic-table-cell-padding-inline);
-    border-block-end: var(--basic-border-width) solid var(--basic-color-border);
+    border: 0 solid var(--basic-color-border);
     vertical-align: top;
     text-align: left;
 }
 
+basic-table:is(:not([data-separators]), [data-separators="rows"], [data-separators="both"]) th,
+basic-table:is(:not([data-separators]), [data-separators="rows"], [data-separators="both"]) td {
+    border-block-end-width: var(--basic-border-width);
+}
+
+basic-table:is([data-separators="columns"], [data-separators="both"]) tr > :is(th, td):not(:last-child) {
+    border-inline-end-width: var(--basic-border-width);
+}
+
 basic-table thead th {
     background: var(--basic-color-surface-muted);
     font-weight: 700;
 }
 
-basic-table tbody tr:last-child th,
-basic-table tbody tr:last-child td {
-    border-block-end: 0;
+basic-table:is(:not([data-separators]), [data-separators="rows"], [data-separators="both"]) tbody tr:last-child th,
+basic-table:is(:not([data-separators]), [data-separators="rows"], [data-separators="both"]) tbody tr:last-child td {
+    border-block-end-width: 0;
 }
 
 basic-table tbody th {
     font-weight: 600;
 }
 
+basic-table[data-zebra] tbody tr:nth-child(even) > :is(th, td) {
+    background: var(--basic-table-row-background-zebra);
+}
+
 basic-table tbody td {
     color: var(--basic-color-text-muted);
 }

package/basic-styling/components/basic-tabs.css

@@ -1,39 +1,55 @@
 basic-tabs {
-    --basic-tabs-gap: var(--basic-stack-gap);
+    --basic-tabs-list-gap: var(--basic-space-1);
+    --basic-tabs-list-padding-inline: var(--basic-space-2);
+    --basic-tabs-list-padding-block-start: var(--basic-space-2);
     --basic-tabs-panel-padding: var(--basic-panel-padding);
+    --basic-tabs-panel-background: var(--basic-color-surface-selected);
+    --basic-tabs-panel-border: var(--basic-color-border-selected);
     display: grid;
-    gap: var(--basic-tabs-gap);
+    gap: 0;
 }
 
 basic-tabs [data-tabs-list] {
     display: flex;
     flex-wrap: wrap;
-    gap: var(--basic-space-2);
+    align-items: flex-end;
+    gap: var(--basic-tabs-list-gap);
+    padding-inline: var(--basic-tabs-list-padding-inline);
+    padding-block-start: var(--basic-tabs-list-padding-block-start);
 }
 
 basic-tabs [data-tab] {
+    --basic-interaction-text-rest: var(--basic-color-text-muted);
+    --basic-interaction-text-hover: var(--basic-color-text);
+    --basic-interaction-text-active: var(--basic-color-text);
+    --basic-interaction-text-selected: var(--basic-color-text);
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    margin: 0;
     padding: var(--basic-control-padding-block) var(--basic-control-padding-inline);
     border: var(--basic-border-width) solid var(--basic-color-border);
-    border-radius: var(--basic-radius);
-    background: var(--basic-color-surface);
-    color: var(--basic-color-text-muted);
+    border-radius: var(--basic-radius) var(--basic-radius) 0 0;
+    background: transparent;
     cursor: pointer;
+    position: relative;
+    z-index: 1;
 }
 
 basic-tabs [data-tab][aria-selected="true"] {
-    background: var(--basic-color-surface-muted);
-    color: inherit;
+    border-bottom-color: var(--basic-tabs-panel-background);
     font-weight: 600;
+    z-index: 2;
 }
 
 basic-tabs [data-tab-panel] {
+    margin-block-start: calc(var(--basic-border-width) * -1);
     padding: var(--basic-tabs-panel-padding);
-    border: var(--basic-border-width) solid var(--basic-color-border);
+    border: var(--basic-border-width) solid var(--basic-tabs-panel-border);
     border-radius: var(--basic-radius);
-    background: var(--basic-color-surface);
+    background: var(--basic-tabs-panel-background);
+    position: relative;
+    z-index: 0;
 }
 
 basic-tabs [data-tab-panel] > :where(*) {

package/basic-styling/components.css

@@ -1,5 +1,6 @@
 @import "./components/basic-alert.css";
 @import "./components/basic-accordion.css";
+@import "./components/basic-carousel.css";
 @import "./components/basic-dialog.css";
 @import "./components/basic-popover.css";
 @import "./components/basic-table.css";
@@ -7,3 +8,4 @@
 @import "./components/basic-tabs.css";
 @import "./components/basic-toc.css";
 @import "./components/basic-toast.css";
+@import "./interaction.css";

package/basic-styling/forms.css

@@ -0,0 +1,55 @@
+:where(label):has(> input:is([type="checkbox"], [type="radio"])[data-panel]) {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: var(--basic-space-3);
+    align-items: start;
+    padding: var(--basic-space-4);
+    border: var(--basic-border-width) solid var(--basic-color-border);
+    background: var(--basic-color-surface);
+    color: inherit;
+    cursor: pointer;
+}
+
+:where(label):has(> input:is([type="checkbox"], [type="radio"])[data-panel]:enabled):where(:hover) {
+    border-color: var(--basic-color-border-hover);
+    background: var(--basic-color-surface-hover);
+}
+
+:where(label):has(> input:is([type="checkbox"], [type="radio"])[data-panel]:checked) {
+    border-color: var(--basic-color-border-selected);
+    background: var(--basic-color-surface-selected);
+}
+
+:where(label):has(> input:is([type="checkbox"], [type="radio"])[data-panel]:disabled) {
+    opacity: 0.7;
+    cursor: not-allowed;
+}
+
+:where(label):has(> input:is([type="checkbox"], [type="radio"])[data-panel]:focus-visible) {
+    outline: 3px solid var(--basic-color-focus);
+    outline-offset: 2px;
+}
+
+:where(label):has(> input:is([type="checkbox"], [type="radio"])[data-panel]) > input:is([type="checkbox"], [type="radio"])[data-panel] {
+    width: auto;
+    margin-top: 0.15rem;
+}
+
+:where(label):has(> input:is([type="checkbox"], [type="radio"])[data-panel]) > :not(input:is([type="checkbox"], [type="radio"])[data-panel]) {
+    min-width: 0;
+}
+
+:where(label):has(> input:is([type="checkbox"], [type="radio"])[data-panel]) > :not(input:is([type="checkbox"], [type="radio"])[data-panel]):where(span, div) {
+    display: grid;
+    gap: var(--basic-space-1);
+}
+
+:where(label):has(> input:is([type="checkbox"], [type="radio"])[data-panel]) strong {
+    display: block;
+    color: var(--basic-color-text);
+}
+
+:where(label):has(> input:is([type="checkbox"], [type="radio"])[data-panel]) :is(p, small) {
+    margin: 0;
+    color: var(--basic-color-text-muted);
+}

package/basic-styling/global.css

@@ -1,5 +1,6 @@
 @import "./tokens/base.css";
 @import "./tokens/palette.css";
+@import "./forms.css";
 
 html {
     color-scheme: light dark;

package/basic-styling/interaction.css

@@ -0,0 +1,90 @@
+:where(
+    basic-alert [data-alert-close],
+    basic-dialog :is([data-dialog-open], [data-dialog-close]),
+    basic-popover :is([data-popover-open], [data-popover-close]),
+    basic-toast :is([data-toast-open], [data-toast-close]),
+    basic-tabs [data-tab],
+    basic-accordion > details > summary
+) {
+    --basic-interaction-state: rest;
+    --basic-interaction-surface-rest: var(--basic-color-surface);
+    --basic-interaction-surface-hover: var(--basic-color-surface-hover);
+    --basic-interaction-surface-active: var(--basic-color-surface-active);
+    --basic-interaction-surface-selected: var(--basic-color-surface-selected);
+    --basic-interaction-surface-checked: var(--basic-color-surface-checked);
+    --basic-interaction-border-rest: var(--basic-color-border);
+    --basic-interaction-border-hover: var(--basic-color-border-hover);
+    --basic-interaction-border-active: var(--basic-color-border-active);
+    --basic-interaction-border-selected: var(--basic-color-border-selected);
+    --basic-interaction-border-checked: var(--basic-color-border-checked);
+    --basic-interaction-text-rest: inherit;
+    --basic-interaction-text-hover: var(--basic-interaction-text-rest);
+    --basic-interaction-text-active: var(--basic-interaction-text-hover);
+    --basic-interaction-text-selected: var(--basic-interaction-text-rest);
+    --basic-interaction-text-checked: var(--basic-interaction-text-rest);
+
+    position: relative;
+    isolation: isolate;
+    container-type: normal;
+    background: transparent;
+    border-color: transparent;
+    color: var(--basic-interaction-text-rest);
+
+    &::before {
+        content: "";
+        position: absolute;
+        inset: 0;
+        z-index: -1;
+        border-radius: inherit;
+        background: var(--basic-interaction-surface-rest);
+        box-shadow: 0 0 0 var(--basic-border-width) var(--basic-interaction-border-rest);
+        pointer-events: none;
+    }
+
+    &:where(:hover, :focus-visible) {
+        --basic-interaction-state: hover;
+        color: var(--basic-interaction-text-hover);
+    }
+
+    &:active {
+        --basic-interaction-state: active;
+        color: var(--basic-interaction-text-active);
+    }
+
+    @container style(--basic-interaction-state: hover) {
+        &::before {
+            background: var(--basic-interaction-surface-hover);
+            box-shadow: 0 0 0 var(--basic-border-width) var(--basic-interaction-border-hover);
+        }
+    }
+
+    @container style(--basic-interaction-state: active) {
+        &::before {
+            background: var(--basic-interaction-surface-active);
+            box-shadow: 0 0 0 var(--basic-border-width) var(--basic-interaction-border-active);
+        }
+    }
+
+    @container style(--basic-interaction-state: selected) {
+        &::before {
+            background: var(--basic-interaction-surface-selected);
+            box-shadow: 0 0 0 var(--basic-border-width) var(--basic-interaction-border-selected);
+        }
+    }
+
+    @container style(--basic-interaction-state: checked) {
+        &::before {
+            background: var(--basic-interaction-surface-checked);
+            box-shadow: 0 0 0 var(--basic-border-width) var(--basic-interaction-border-checked);
+        }
+    }
+}
+
+:where(
+    basic-accordion > details[open] > summary,
+    basic-popover [data-popover-open][aria-expanded="true"],
+    basic-tabs [data-tab][aria-selected="true"]
+) {
+    --basic-interaction-state: selected;
+    color: var(--basic-interaction-text-selected);
+}

package/basic-styling/tokens/palette.css

@@ -58,6 +58,46 @@
         var(--basic-palette-accent-dark) 18%,
         var(--basic-palette-surface-dark)
     );
+    --basic-palette-surface-hover-light: color-mix(
+        in oklch,
+        var(--basic-palette-accent-light) 12%,
+        var(--basic-palette-surface-light)
+    );
+    --basic-palette-surface-hover-dark: color-mix(
+        in oklch,
+        var(--basic-palette-accent-dark) 20%,
+        var(--basic-palette-surface-dark)
+    );
+    --basic-palette-surface-active-light: color-mix(
+        in oklch,
+        var(--basic-palette-accent-light) 16%,
+        var(--basic-palette-surface-light)
+    );
+    --basic-palette-surface-active-dark: color-mix(
+        in oklch,
+        var(--basic-palette-accent-dark) 26%,
+        var(--basic-palette-surface-dark)
+    );
+    --basic-palette-surface-selected-light: color-mix(
+        in oklch,
+        var(--basic-palette-accent-light) 14%,
+        var(--basic-palette-surface-light)
+    );
+    --basic-palette-surface-selected-dark: color-mix(
+        in oklch,
+        var(--basic-palette-accent-dark) 24%,
+        var(--basic-palette-surface-dark)
+    );
+    --basic-palette-surface-checked-light: color-mix(
+        in oklch,
+        var(--basic-palette-accent-light) 18%,
+        var(--basic-palette-surface-light)
+    );
+    --basic-palette-surface-checked-dark: color-mix(
+        in oklch,
+        var(--basic-palette-accent-dark) 30%,
+        var(--basic-palette-surface-dark)
+    );
     --basic-palette-text-muted-light: color-mix(
         in oklch,
         var(--basic-palette-text-light) 68%,
@@ -78,6 +118,46 @@
         var(--basic-palette-text-dark) 24%,
         var(--basic-palette-surface-dark)
     );
+    --basic-palette-border-hover-light: color-mix(
+        in oklch,
+        var(--basic-palette-accent-light) 18%,
+        var(--basic-palette-border-light)
+    );
+    --basic-palette-border-hover-dark: color-mix(
+        in oklch,
+        var(--basic-palette-accent-dark) 28%,
+        var(--basic-palette-border-dark)
+    );
+    --basic-palette-border-active-light: color-mix(
+        in oklch,
+        var(--basic-palette-accent-light) 24%,
+        var(--basic-palette-border-light)
+    );
+    --basic-palette-border-active-dark: color-mix(
+        in oklch,
+        var(--basic-palette-accent-dark) 36%,
+        var(--basic-palette-border-dark)
+    );
+    --basic-palette-border-selected-light: color-mix(
+        in oklch,
+        var(--basic-palette-accent-light) 22%,
+        var(--basic-palette-border-light)
+    );
+    --basic-palette-border-selected-dark: color-mix(
+        in oklch,
+        var(--basic-palette-accent-dark) 34%,
+        var(--basic-palette-border-dark)
+    );
+    --basic-palette-border-checked-light: color-mix(
+        in oklch,
+        var(--basic-palette-accent-light) 28%,
+        var(--basic-palette-border-light)
+    );
+    --basic-palette-border-checked-dark: color-mix(
+        in oklch,
+        var(--basic-palette-accent-dark) 40%,
+        var(--basic-palette-border-dark)
+    );
     --basic-palette-overlay-light: color-mix(
         in oklch,
         var(--basic-palette-text-light) 24%,
@@ -106,12 +186,44 @@
         var(--basic-palette-surface-muted-light),
         var(--basic-palette-surface-muted-dark)
     );
+    --basic-color-surface-hover: light-dark(
+        var(--basic-palette-surface-hover-light),
+        var(--basic-palette-surface-hover-dark)
+    );
+    --basic-color-surface-active: light-dark(
+        var(--basic-palette-surface-active-light),
+        var(--basic-palette-surface-active-dark)
+    );
+    --basic-color-surface-selected: light-dark(
+        var(--basic-palette-surface-selected-light),
+        var(--basic-palette-surface-selected-dark)
+    );
+    --basic-color-surface-checked: light-dark(
+        var(--basic-palette-surface-checked-light),
+        var(--basic-palette-surface-checked-dark)
+    );
     --basic-color-text: light-dark(var(--basic-palette-text-light), var(--basic-palette-text-dark));
     --basic-color-text-muted: light-dark(
         var(--basic-palette-text-muted-light),
         var(--basic-palette-text-muted-dark)
     );
     --basic-color-border: light-dark(var(--basic-palette-border-light), var(--basic-palette-border-dark));
+    --basic-color-border-hover: light-dark(
+        var(--basic-palette-border-hover-light),
+        var(--basic-palette-border-hover-dark)
+    );
+    --basic-color-border-active: light-dark(
+        var(--basic-palette-border-active-light),
+        var(--basic-palette-border-active-dark)
+    );
+    --basic-color-border-selected: light-dark(
+        var(--basic-palette-border-selected-light),
+        var(--basic-palette-border-selected-dark)
+    );
+    --basic-color-border-checked: light-dark(
+        var(--basic-palette-border-checked-light),
+        var(--basic-palette-border-checked-dark)
+    );
     --basic-color-overlay: light-dark(var(--basic-palette-overlay-light), var(--basic-palette-overlay-dark));
     --basic-color-focus: light-dark(var(--basic-palette-focus-light), var(--basic-palette-focus-dark));
 }