@cawalch/porchlight 0.1.0

package/src/06-components/data-table.css

@@ -0,0 +1,380 @@
+/*
+ * Porchlight  -  data table component
+ * ===========================================================================
+ * An enterprise data table: sticky headers, horizontal scroll with a stable
+ * scrollbar gutter, container-query padding, hover/selection affordances,
+ * sortable columns, row selection (checkbox column), expandable detail rows,
+ * sticky first column, and density modes.
+ *
+ * Structure: .c-table-wrap (the scroll container + query container) wraps a
+ * native <table class="c-table">. The wrap handles overflow + the gutter; the
+ * table sets column min-widths and cell geometry. Sticky headers stay pinned
+ * while the body scrolls.
+ *
+ * Density via [data-density] on .c-table-wrap:
+ *   compact: tighter rows for high information density
+ *   comfortable (default): standard spacing
+ */
+@layer porchlight.components {
+  @scope (.c-table-wrap) {
+    :scope {
+      --c-table-cell-pad: var(--pl-space-3) var(--pl-space-4);
+      --c-table-min: 48rem;
+
+      /* Consistent row height (touch-safe 48px default). Density modes
+         shrink this via the compact density override below. */
+      --c-table-row-min-block-size: 3rem;
+
+      /* Expose the wrap radius as a token so corner cells can inherit it
+         exactly (minus 1px for the border). */
+      --c-table-radius: var(--pl-radius-xl);
+
+      container: c-table-wrap / inline-size;
+      overflow: auto;
+
+      /* scrollbar-gutter: stable is intentionally omitted here.
+         "stable" unconditionally reserves inline-end space for the scrollbar
+         even when no scrollbar is present, which shows as a visible gap
+         between the last column and the right border. overflow: auto handles
+         layout-shift prevention on its own when the scrollbar actually appears. */
+      border: 1px solid color-mix(
+        in oklab,
+        var(--pl-color-border),
+        transparent 20%
+      );
+      border-radius: var(--c-table-radius);
+      background: var(--pl-color-surface);
+    }
+
+    /* Density modes. */
+    :scope[data-density="compact"] {
+      --c-table-cell-pad: var(--pl-space-1) var(--pl-space-3);
+      --c-table-row-min-block-size: 2.25rem;
+    }
+
+    .c-table {
+      inline-size: 100%;
+      min-inline-size: var(--c-table-min);
+      border-collapse: separate;
+      border-spacing: 0;
+    }
+
+    /* Corner radius: sticky <th> elements paint above the overflow container's
+       border-radius clip in WebKit/Blink, so their background bleeds into the
+       rounded corner making it appear square. Each corner cell gets an explicit
+       border-radius that matches the wrap (minus 1px for the wrap border).
+       This is the canonical fix for the "one side rounded, one side square"
+       artifact on bordered tables with sticky headers. */
+    .c-table thead tr:first-child th:first-child {
+      border-start-start-radius: calc(var(--c-table-radius) - 1px);
+    }
+
+    .c-table thead tr:first-child th:last-child {
+      border-start-end-radius: calc(var(--c-table-radius) - 1px);
+    }
+
+    .c-table tbody tr:last-child td:first-child {
+      border-end-start-radius: calc(var(--c-table-radius) - 1px);
+    }
+
+    .c-table tbody tr:last-child td:last-child {
+      border-end-end-radius: calc(var(--c-table-radius) - 1px);
+    }
+
+    .c-table :where(th, td) {
+      padding: var(--c-table-cell-pad);
+      border-block-end: 1px solid var(--pl-color-border);
+      text-align: start;
+      vertical-align: middle;
+      white-space: nowrap;
+
+      /* Enforce consistent row height. min-block-size lets content expand
+         beyond this (e.g. multi-line cells) without truncation. */
+      min-block-size: var(--c-table-row-min-block-size);
+    }
+
+    .c-table :where(td) {
+      color: var(--pl-color-text);
+    }
+
+    .c-table :where(th) {
+      position: sticky;
+      inset-block-start: 0;
+      z-index: var(--pl-z-raised);
+
+      /* surface-2 bg distinguishes the header row from data rows without
+         the heavy "band" look of older table designs. */
+      background: var(--pl-color-surface-2);
+      font-size: var(--pl-text-sm);
+      font-weight: var(--pl-font-weight-semibold);
+      color: var(--pl-color-text-muted);
+
+      /* 1px (not 2px)  -  the surface-2/surface step does the visual separation;
+         the border is a hairline accent, not structural weight. */
+      border-block-end: 1px solid var(--pl-color-border);
+    }
+
+    /* Tighten padding when the wrap is narrow. */
+    @container c-table-wrap (inline-size < 40rem) {
+      .c-table :where(th, td) {
+        padding-inline: var(--pl-space-2);
+      }
+    }
+
+    /* Numeric columns. */
+    .c-table :where([data-align="end"]) {
+      text-align: end;
+      font-variant-numeric: tabular-nums;
+    }
+
+    .c-table :where([data-align="center"]) {
+      text-align: center;
+    }
+
+    /* ---------------------------------------------------------------
+     * Sortable headers
+     * ---------------------------------------------------------------
+     * Add [data-sort="asc"|"desc"] to a <th> to show a direction arrow.
+     * Unsortable <th> (no data-sort) shows nothing. The arrow is a
+     * pure-CSS triangle via border.
+     */
+    .c-table th[data-sort] {
+      cursor: pointer;
+      user-select: none;
+
+      &:hover {
+        color: var(--pl-color-text);
+      }
+    }
+
+    /* Sort indicator: replaced the CSS border-triangle technique with a
+       pseudo-element approach. The neutral state (sortable but unsorted)
+       shows ⇅ so users can discover sortability without having to hover.
+       Active states use accent color for clear directionality. */
+    .c-table__sort-icon {
+      display: inline-flex;
+      align-items: center;
+      margin-inline-start: var(--pl-space-1);
+      font-size: 0.7em;
+      color: var(--pl-color-text-muted);
+      opacity: 0.4;
+      transition:
+        opacity var(--pl-duration-1) var(--pl-ease-standard),
+        color var(--pl-duration-1) var(--pl-ease-standard);
+    }
+
+    /* Neutral (sortable, no active direction): hint the user this is sortable. */
+    .c-table__sort-icon::before {
+      content: "\21C5"; /* ⇅ updown arrows */
+    }
+
+    /* Ascending: up arrow, full opacity, accent color. */
+    .c-table th[data-sort="asc"] .c-table__sort-icon {
+      opacity: 1;
+      color: var(--pl-color-accent);
+    }
+
+    .c-table th[data-sort="asc"] .c-table__sort-icon::before {
+      content: "\2191"; /* ↑ */
+    }
+
+    /* Descending: down arrow, full opacity, accent color. */
+    .c-table th[data-sort="desc"] .c-table__sort-icon {
+      opacity: 1;
+      color: var(--pl-color-accent);
+    }
+
+    .c-table th[data-sort="desc"] .c-table__sort-icon::before {
+      content: "\2193"; /* ↓ */
+    }
+
+    /* Active sort column header: full-contrast text so the sorted column
+       reads as primary. Unsorted columns stay muted. */
+    .c-table th[data-sort="asc"],
+    .c-table th[data-sort="desc"] {
+      color: var(--pl-color-text);
+    }
+
+    /* ---------------------------------------------------------------
+     * Checkbox column (row selection)
+     * ---------------------------------------------------------------
+     * Add .c-table__check to a <th> or <td> for a narrow centered cell
+     * containing a native checkbox. The header checkbox is select-all.
+     */
+    .c-table .c-table__check {
+      inline-size: 2.5rem;
+      min-inline-size: 2.5rem;
+      text-align: center;
+    }
+
+    .c-table .c-table__check input[type="checkbox"] {
+      inline-size: 1rem;
+      block-size: 1rem;
+      accent-color: var(--pl-color-accent);
+      cursor: pointer;
+    }
+
+    /* ---------------------------------------------------------------
+     * Expandable detail rows
+     * ---------------------------------------------------------------
+     * A row with .c-table__detail is collapsed by default. Add [open]
+     * (or data-open) to expand. Uses the grid-template-rows technique
+     * for smooth animation without interpolate-size.
+     */
+    .c-table .c-table__detail td {
+      padding: 0;
+      border-block-end: 1px solid var(--pl-color-border);
+
+      /* Slightly deeper tint than hover so the detail row reads as
+         subordinate content; left accent bar ties it to its parent row. */
+      background: color-mix(
+        in oklab,
+        var(--pl-color-surface-2),
+        var(--pl-color-text) 2%
+      );
+      box-shadow: inset var(--pl-accent-bar-width) 0 0 color-mix(
+        in oklab,
+        var(--pl-color-accent),
+        transparent 70%
+      );
+    }
+
+    .c-table__detail-inner {
+      display: grid;
+      grid-template-rows: 0fr;
+      overflow: hidden;
+      transition: grid-template-rows var(--pl-duration-3)
+        var(--pl-ease-standard);
+    }
+
+    .c-table .c-table__detail[open] .c-table__detail-inner {
+      grid-template-rows: 1fr;
+    }
+
+    .c-table__detail-content {
+      overflow: hidden;
+      padding: var(--pl-space-4);
+    }
+
+    /* The expand/collapse toggle button in a row. */
+    .c-table__expand {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      inline-size: 1.5rem;
+      block-size: 1.5rem;
+      padding: 0;
+      border: 0;
+      border-radius: var(--pl-radius-sm);
+      background: transparent;
+      color: var(--pl-color-text-muted);
+      cursor: pointer;
+      transition: background-color var(--pl-duration-1) var(--pl-ease-standard);
+    }
+
+    .c-table__expand:hover {
+      background: var(--pl-color-surface-2);
+      color: var(--pl-color-text);
+    }
+
+    .c-table__expand:focus-visible {
+      outline: var(--pl-focus-size) solid var(--pl-focus-color);
+      outline-offset: var(--pl-focus-offset);
+    }
+
+    .c-table__expand svg {
+      inline-size: 0.875rem;
+      block-size: 0.875rem;
+      transition: rotate var(--pl-duration-2) var(--pl-ease-standard);
+    }
+
+    .c-table__expand[aria-expanded="true"] svg {
+      rotate: 180deg;
+    }
+
+    /* Sticky first column  -  outward drop-shadow communicates "content scrolls
+       behind this column" (vs. the old inset-border which pointed inward and
+       read as a cell divider, not a depth separator). */
+    .c-table .c-table__sticky-col {
+      position: sticky;
+      inset-inline-start: 0;
+      z-index: calc(var(--pl-z-raised) + 1);
+      background: var(--pl-color-surface);
+    }
+
+    /* Sticky header + sticky column intersection needs higher z-index. */
+    .c-table th.c-table__sticky-col {
+      z-index: calc(var(--pl-z-raised) + 2);
+
+      /* Sticky col header: inherit the surface-2 header background so the
+         intersection cell matches the header row, not the body. */
+      background: var(--pl-color-surface-2);
+    }
+
+    /* Outward drop-shadow on the trailing edge: fades rightward to show
+       that body content scrolls underneath. */
+    .c-table .c-table__sticky-col:not(:last-child) {
+      box-shadow: 4px 0 8px -2px oklch(0% 0 0deg / 10%);
+    }
+
+    /* Inherit hover/selection background through the sticky column. */
+    :where(.c-table) tbody tr:hover .c-table__sticky-col,
+    :where(.c-table) tbody tr[aria-selected="true"] .c-table__sticky-col {
+      background: inherit;
+    }
+  }
+
+  /* Row hover  -  OUTSIDE @scope (live-state pseudo on tbody tr). */
+  :where(.c-table) tbody tr {
+    transition: background-color var(--pl-duration-1) var(--pl-ease-standard);
+  }
+
+  /* Stronger tint than plain surface-2 so the hover is clearly visible even
+     on high-brightness/low-contrast displays (surface-2 alone is ~3% step). */
+  :where(.c-table) tbody tr:hover {
+    background: color-mix(
+      in oklab,
+      var(--pl-color-surface-2),
+      var(--pl-color-text) 3.5%
+    );
+  }
+
+  /* Selection: left-bar accent (matching the nav active state language) +
+     stronger tint so the selected state is unmistakable at a glance. */
+  :where(.c-table) tbody tr[aria-selected="true"] {
+    background: color-mix(in oklab, var(--pl-color-accent), transparent 84%);
+    box-shadow: inset var(--pl-accent-bar-width) 0 0 var(--pl-color-accent);
+  }
+
+  /* Last data row: remove border-block-end so it doesn't double-up with the
+     table-wrap's own border on the bottom edge. */
+  :where(.c-table) tbody tr:last-child td {
+    border-block-end: none;
+  }
+
+  /* Opt-in zebra striping for extreme information density (financial data,
+     log tables). Very subtle at 50% transparent surface-2 so it doesn't
+     clash with hover/selection states. */
+  :where(.c-table-wrap[data-zebra]) .c-table tbody tr:nth-child(even) {
+    background: color-mix(
+      in oklab,
+      var(--pl-color-surface-2),
+      transparent 50%
+    );
+  }
+
+  /* Loading state: suppress hover effects on skeleton rows. */
+  :where(.c-table) tbody[data-loading] tr {
+    pointer-events: none;
+  }
+
+  @media (forced-colors: active) {
+    :where(.c-table) :where(th, td) {
+      border-block-end-color: CanvasText;
+    }
+
+    :where(.c-table__sticky-col) {
+      border-inline-end: 1px solid CanvasText;
+    }
+  }
+}

package/src/06-components/dialog.css

@@ -0,0 +1,148 @@
+/*
+ * Porchlight  -  dialog component
+ * ===========================================================================
+ * A modal dialog for confirmations, forms, and detail views. Uses the native
+ * <dialog> element with showModal() (top-layer, modal focus trap, Esc to
+ * close). The ::backdrop pseudo-element provides the scrim.
+ *
+ * Open state is styled via [open] (or :modal for showModal). Entry/exit
+ * animation uses @starting-style + transition-behavior: allow-discrete on
+ * overlay/display  -  the same pattern as .c-menu, so the EXIT transition runs
+ * (display: none normally kills transitions instantly).
+ *
+ * Header + body + footer slots (like .c-card). The close button in the header
+ * is a standard pattern. Open the dialog with el.showModal() in your app JS.
+ *
+ * Token-driven via --c-dialog-* aliases. Responsive by default:
+ * inline-size is min(100% - 2rem, --c-dialog-size) so it never overflows.
+ */
+@layer porchlight.components {
+  @scope (.c-dialog) {
+    :scope {
+      --c-dialog-size: 42rem;
+
+      inline-size: min(100% - 2rem, var(--c-dialog-size));
+      max-block-size: min(100dvb - 2rem, 80dvb);
+      padding: 0;
+      margin: auto;
+      overflow: auto;
+
+      /* Liquid Glass: no border; shadow + backdrop do the structural work. */
+      border: none;
+      border-radius: var(--pl-radius-2xl);
+      background: light-dark(
+        oklch(100% 0 0deg / 94%),
+        oklch(17% 0.04 250deg / 92%)
+      );
+      backdrop-filter: blur(var(--pl-backdrop-blur-strong)) saturate(var(--pl-backdrop-saturate-strong));
+      -webkit-backdrop-filter: blur(var(--pl-backdrop-blur-strong)) saturate(var(--pl-backdrop-saturate-strong));
+      color: var(--pl-color-text);
+      box-shadow: var(--pl-shadow-3);
+
+      /* Entry/exit: asymmetric timing — enter deliberate, exit snappy. */
+      opacity: 0;
+      transform: scale(0.97) translateY(10px);
+      transition:
+        opacity var(--pl-duration-enter) var(--pl-ease-decelerate),
+        transform var(--pl-duration-enter) var(--pl-ease-decelerate),
+        overlay var(--pl-duration-exit) var(--pl-ease-accelerate) allow-discrete,
+        display var(--pl-duration-exit) var(--pl-ease-accelerate) allow-discrete;
+    }
+
+    /* Open: settled state. :modal covers showModal(); [open] covers show(). */
+    :scope:modal,
+    :scope[open] {
+      opacity: 1;
+      transform: scale(1) translateY(0);
+    }
+
+    /* Enter: the initial state BEFORE the open transition. */
+    @starting-style {
+      :scope:modal,
+      :scope[open] {
+        opacity: 0;
+        transform: scale(0.97) translateY(10px);
+      }
+    }
+
+    /* Scrim  -  dim the page behind the dialog. Stronger blur + deeper tint
+       for the Liquid Glass treatment (the frosted dialog needs more contrast
+       against a busy background). */
+    :scope::backdrop {
+      background: var(--pl-color-scrim);
+      backdrop-filter: blur(var(--pl-backdrop-blur-scrim)) saturate(var(--pl-backdrop-saturate-scrim));
+    }
+
+    .c-dialog__header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--pl-space-3);
+      min-block-size: var(--pl-control-block-size);
+      padding: var(--pl-space-5);
+
+      /* Softer divider — the Liquid Glass surface is already visually separated */
+      border-block-end: 1px solid color-mix(
+        in oklab,
+        var(--pl-color-border),
+        transparent 40%
+      );
+    }
+
+    .c-dialog__title {
+      margin: 0;
+      font-size: var(--pl-text-lg);
+      font-weight: var(--pl-font-weight-bold);
+      line-height: var(--pl-leading-tight);
+      text-wrap: balance;
+    }
+
+    /* Close button  -  a ghost-icon button top-right. */
+    .c-dialog__close {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      inline-size: var(--pl-control-block-size);
+      block-size: var(--pl-control-block-size);
+      padding: 0;
+      border: 0;
+      border-radius: var(--pl-radius-md);
+      background: transparent;
+      color: var(--pl-color-text-muted);
+      font: inherit;
+      cursor: pointer;
+      transition:
+        background-color var(--pl-duration-1) var(--pl-ease-standard),
+        color var(--pl-duration-1) var(--pl-ease-standard);
+    }
+
+    .c-dialog__close:hover {
+      background: var(--pl-color-surface-2);
+      color: var(--pl-color-text);
+    }
+
+    .c-dialog__body {
+      padding: var(--pl-space-5);
+    }
+
+    .c-dialog__footer {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      gap: var(--pl-space-3);
+      padding: var(--pl-space-5);
+      border-block-start: 1px solid color-mix(
+        in oklab,
+        var(--pl-color-border),
+        transparent 40%
+      );
+    }
+
+    @media (forced-colors: active) {
+      :scope {
+        border-color: ButtonBorder;
+      }
+    }
+  }
+}

package/src/06-components/drawer.css

@@ -0,0 +1,137 @@
+/*
+ * Porchlight  -  drawer (slide-over panel) component
+ * ===========================================================================
+ * An off-canvas panel that slides in from a viewport edge. Uses the native
+ * Popover API for top-layer rendering + light-dismiss, combined with
+ * @starting-style for a smooth enter/exit animation (mirrors the dialog
+ * and popover-menu pattern).
+ *
+ * The drawer element MUST have the `popover` attribute in HTML:
+ *   <div popover class="c-drawer" id="my-drawer" data-side="end">
+ *     <header class="c-drawer__header">...</header>
+ *     <div class="c-drawer__body">...</div>
+ *   </div>
+ * The trigger uses `popovertarget="my-drawer"` to open it declaratively.
+ *
+ * [data-side="start"] slides from the inline-start edge (left in LTR).
+ * [data-side="end"] slides from the inline-end edge (right in LTR).
+ * Default is "end".
+ *
+ * A backdrop scrim is created via ::backdrop pseudo-element on the popover.
+ */
+@layer porchlight.components {
+  @scope (.c-drawer) {
+    :scope {
+      --c-drawer-inline: min(24rem, 100vi);
+      --c-drawer-block: 100vb;
+      --c-drawer-pad: var(--pl-space-4);
+      --c-drawer-gap: var(--pl-space-3);
+
+      /* Position: stretch from the side edge. */
+      inset-inline: auto 0;
+      inset-block: 0;
+      margin: 0;
+      padding: 0;
+      border: 0;
+
+      /* No hard side border  -  shadow-3 defines the edge cleanly. */
+      inline-size: var(--c-drawer-inline);
+      block-size: var(--c-drawer-block);
+
+      /* Liquid Glass: translucent surface with blur. */
+      background: light-dark(
+        oklch(100% 0 0deg / 96%),
+        oklch(17% 0.04 250deg / 94%)
+      );
+      backdrop-filter: blur(var(--pl-backdrop-blur)) saturate(var(--pl-backdrop-saturate));
+      -webkit-backdrop-filter: blur(var(--pl-backdrop-blur)) saturate(var(--pl-backdrop-saturate));
+      box-shadow: var(--pl-shadow-3);
+
+      /* Animation: slide + fade. Asymmetric: enters deliberately, exits snappily. */
+      opacity: 0;
+      transform: translateX(100%);
+      transition:
+        opacity var(--pl-duration-enter) var(--pl-ease-decelerate),
+        transform var(--pl-duration-enter) var(--pl-ease-decelerate),
+        overlay var(--pl-duration-exit) var(--pl-ease-accelerate) allow-discrete,
+        display var(--pl-duration-exit) var(--pl-ease-accelerate) allow-discrete;
+    }
+
+    /* Start side: slide from inline-start. */
+    :scope[data-side="start"] {
+      inset-inline: 0 auto;
+      transform: translateX(-100%);
+    }
+
+    /* Open state: visible + settled. */
+    :scope:popover-open {
+      opacity: 1;
+      transform: translateX(0);
+    }
+
+    /* Enter: initial state before the open transition starts. */
+    @starting-style {
+      :scope:popover-open {
+        opacity: 0;
+        transform: translateX(100%);
+      }
+
+      :scope[data-side="start"]:popover-open {
+        transform: translateX(-100%);
+      }
+    }
+
+    /* Backdrop scrim (native ::backdrop on popovers). Stronger tint + blur
+       contrasts against the translucent drawer surface. */
+    :scope::backdrop {
+      background: var(--pl-color-scrim);
+      backdrop-filter: blur(var(--pl-backdrop-blur-scrim)) saturate(var(--pl-backdrop-saturate-scrim));
+    }
+
+    /* Layout inside the drawer. */
+    .c-drawer__header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--c-drawer-gap);
+      padding: var(--c-drawer-pad);
+
+      /* Softer divider  -  the Liquid Glass surface is already visually separated. */
+      border-block-end: 1px solid color-mix(
+        in oklab,
+        var(--pl-color-border),
+        transparent 40%
+      );
+    }
+
+    .c-drawer__title {
+      font-size: var(--pl-text-lg);
+      font-weight: var(--pl-font-weight-semibold);
+    }
+
+    .c-drawer__body {
+      padding: var(--c-drawer-pad);
+      overflow-y: auto;
+    }
+
+    .c-drawer__footer {
+      display: flex;
+      gap: var(--c-drawer-gap);
+      padding: var(--c-drawer-pad);
+
+      /* Softer divider. */
+      border-block-start: 1px solid color-mix(
+        in oklab,
+        var(--pl-color-border),
+        transparent 40%
+      );
+    }
+  }
+
+  @media (forced-colors: active) {
+    :where(.c-drawer) {
+      border-color: ButtonBorder;
+      background: Canvas;
+    }
+  }
+}