@pinfold/css 0.1.0 → 0.2.0

package/README.md

@@ -19,8 +19,9 @@ import '@pinfold/css/packs.css';
 // <PinfoldProvider stylePack="glass">, or data-pinfold-style="glass" on any element
 ```
 
-`glass`, `bauhaus`, `brutalist`, `noise` and `soft` are token recipes (shape, depth, borders,
-surfaces, type), so every component follows them with no extra CSS. Each one yields to
+`glass`, `material`, `noise` and `brutalist` are token recipes (shape, depth, borders,
+surfaces, texture), so every component follows them with no extra CSS. They follow your palette
+instead of replacing it: every colour a pack sets is mixed from the palette tokens. Each one yields to
 `prefers-reduced-transparency`, `prefers-contrast: more` and `forced-colors`, and glass surfaces
 are tested to keep body text at WCAG AA over white, black and brand-coloured backdrops.
 

package/dist/accordion.css

@@ -1,25 +1,12 @@
-/* Pinfold — accordion.
-
-   Two-layer variables: the `size` preset writes the `*-base` vars, and the
-   `dimensions` config writes `--pinfold-accordion-*` which wins through the
-   var() fallback. Overriding one measurement keeps the preset for the rest.
-
-   Nothing clips. Rounded rows give their trigger the matching radius instead
-   of relying on `overflow: hidden`, because a clipping ancestor would also cut
-   off the focus ring. Collapse is pure CSS (`grid-template-rows`) — no height
-   measurement, no ResizeObserver, no layout thrash. */
 
 @layer pinfold.components {
-
   .pinfold-accordion {
-    /* preset layer (set by [data-size]) */
     --pinfold-acc-pad-x-base: var(--pinfold-space-4);
-    --pinfold-acc-pad-y-base: var(--pinfold-space-3);
+    --pinfold-acc-pad-y-base: var(--pinfold-space-4);
     --pinfold-acc-font-base: var(--pinfold-text-md);
-    --pinfold-acc-radius-base: var(--pinfold-radius-lg);
+    --pinfold-acc-radius-unit: 0.75rem;
+    --pinfold-acc-radius-base: calc(var(--pinfold-acc-radius-unit) * var(--pinfold-radius-scale, 1));
     --pinfold-acc-gap-base: 0px;
-
-    /* config layer (set by `dimensions`) */
     --pinfold-acc-pad-x: var(--pinfold-accordion-padding-x, var(--pinfold-acc-pad-x-base));
     --pinfold-acc-pad-y: var(--pinfold-accordion-padding-y, var(--pinfold-acc-pad-y-base));
     --pinfold-acc-panel-pad-x: var(--pinfold-accordion-panel-padding-x, var(--pinfold-acc-pad-x));
@@ -33,53 +20,43 @@
     --pinfold-acc-gap: var(--pinfold-accordion-gap, var(--pinfold-acc-gap-base));
     --pinfold-acc-border: var(--pinfold-accordion-border-width, var(--pinfold-border-width));
     --pinfold-acc-duration: var(--pinfold-accordion-duration, var(--pinfold-duration-md));
-
     --pinfold-acc-accent: var(--pinfold-color-accent);
-    --pinfold-acc-item-radius: 0px;
-
+    --pinfold-acc-item-radius: var(--pinfold-accordion-item-radius, 0px);
     display: flex;
     flex-direction: column;
     gap: var(--pinfold-acc-gap);
-    /* Responds to its own width, not the viewport (see "responsive" below). */
     container: pinfold-accordion / inline-size;
     width: var(--pinfold-accordion-width, 100%);
     min-width: var(--pinfold-accordion-min-width, 0);
     max-width: var(--pinfold-accordion-max-width, none);
     height: var(--pinfold-accordion-height, auto);
     max-height: var(--pinfold-accordion-max-height, none);
+    border-radius: var(--pinfold-acc-radius);
     font-size: var(--pinfold-acc-font);
     letter-spacing: var(--pinfold-tracking-tight);
     color: var(--pinfold-color-text);
   }
-
-  /* `dimensions.maxHeight` caps the root and scrolls the rows. */
   .pinfold-accordion[data-clamp] {
     overflow-y: auto;
     overscroll-behavior: contain;
   }
-
-  /* ------------------------------------------------------------------ sizes */
   .pinfold-accordion[data-size='sm'] {
     --pinfold-acc-pad-x-base: var(--pinfold-space-3);
-    --pinfold-acc-pad-y-base: var(--pinfold-space-2);
+    --pinfold-acc-pad-y-base: var(--pinfold-space-3);
     --pinfold-acc-font-base: var(--pinfold-text-sm);
-    --pinfold-acc-radius-base: var(--pinfold-radius-md);
+    --pinfold-acc-radius-unit: 0.5rem;
   }
   .pinfold-accordion[data-size='lg'] {
     --pinfold-acc-pad-x-base: var(--pinfold-space-5);
-    --pinfold-acc-pad-y-base: var(--pinfold-space-4);
+    --pinfold-acc-pad-y-base: var(--pinfold-space-5);
     --pinfold-acc-font-base: var(--pinfold-text-lg);
-    --pinfold-acc-radius-base: var(--pinfold-radius-xl);
+    --pinfold-acc-radius-unit: 1rem;
   }
-
-  /* ------------------------------------------------------------------ tones */
   .pinfold-accordion[data-tone='neutral'] { --pinfold-acc-accent: var(--pinfold-color-text); }
   .pinfold-accordion[data-tone='success'] { --pinfold-acc-accent: var(--pinfold-success-500); }
   .pinfold-accordion[data-tone='warning'] { --pinfold-acc-accent: var(--pinfold-warning-500); }
   .pinfold-accordion[data-tone='danger'] { --pinfold-acc-accent: var(--pinfold-danger-500); }
   .pinfold-accordion[data-tone='info'] { --pinfold-acc-accent: var(--pinfold-info-500); }
-
-  /* ------------------------------------------------------------------- item */
   .pinfold-accordion__item {
     position: relative;
     border-radius: var(--pinfold-acc-item-radius);
@@ -88,125 +65,89 @@
   .pinfold-accordion__trigger {
     border-radius: inherit;
   }
-
-  /* Accent edge on the open row. Scales from the centre, so it reads as the row
-     opening rather than a bar appearing. */
-  .pinfold-accordion__item::before {
+  .pinfold-accordion[data-dividers]:is([data-variant='solid'], [data-variant='outline'], [data-variant='ghost'], [data-joined])
+    .pinfold-accordion__item + .pinfold-accordion__item::before {
     content: '';
     position: absolute;
-    inset-block: 0;
-    inset-inline-start: 0;
-    width: 2px;
-    background: var(--pinfold-acc-accent);
-    border-start-start-radius: inherit;
-    border-end-start-radius: inherit;
-    transform: scaleY(0);
-    opacity: 0;
-    transition: transform var(--pinfold-acc-duration) var(--pinfold-ease-out),
-      opacity var(--pinfold-duration-fast) linear;
+    inset-block-start: calc(var(--pinfold-acc-gap) / -2);
+    inset-inline: var(--pinfold-acc-divider-inset, 0);
+    border-top: var(--pinfold-acc-border) solid var(--pinfold-accordion-divider-color, var(--pinfold-color-border));
     pointer-events: none;
   }
-  .pinfold-accordion__item[data-state='open']::before {
-    transform: scaleY(1);
-    opacity: 1;
-  }
-  /* Bordered rows already signal state through the border; the bar would double up. */
-  .pinfold-accordion[data-variant='outline'] .pinfold-accordion__item::before,
-  .pinfold-accordion[data-variant='separated'] .pinfold-accordion__item::before {
-    content: none;
+  .pinfold-accordion:is([data-variant='solid'], [data-variant='outline']) {
+    --pinfold-acc-divider-inset: var(--pinfold-acc-pad-x);
+    border: var(--pinfold-acc-border) solid var(--pinfold-color-border);
   }
-
-  /* --------------------------------------------------------------- variants */
-  /* solid — one card, hairline-divided rows. Corners are rounded on the parts
-     that touch them rather than clipped off the container. */
   .pinfold-accordion[data-variant='solid'] {
     background: var(--pinfold-color-surface);
     background-image: var(--pinfold-texture);
     -webkit-backdrop-filter: var(--pinfold-backdrop);
     backdrop-filter: var(--pinfold-backdrop);
-    border: var(--pinfold-acc-border) solid var(--pinfold-color-border);
-    border-radius: var(--pinfold-acc-radius);
-    box-shadow: var(--pinfold-shadow-sm), var(--pinfold-highlight);
-  }
-  .pinfold-accordion[data-variant='solid'][data-dividers] .pinfold-accordion__item + .pinfold-accordion__item {
-    border-top: var(--pinfold-acc-border) solid var(--pinfold-color-border);
+    box-shadow: var(--pinfold-shadow-md), var(--pinfold-highlight);
   }
-  .pinfold-accordion[data-variant='solid'] .pinfold-accordion__item:first-child .pinfold-accordion__trigger {
+  .pinfold-accordion:is([data-variant='solid'], [data-variant='outline']) .pinfold-accordion__item:first-child .pinfold-accordion__trigger {
     border-start-start-radius: var(--pinfold-acc-radius);
     border-start-end-radius: var(--pinfold-acc-radius);
   }
-  .pinfold-accordion[data-variant='solid'] .pinfold-accordion__item:last-child .pinfold-accordion__panel {
+  .pinfold-accordion:is([data-variant='solid'], [data-variant='outline']) .pinfold-accordion__item:last-child .pinfold-accordion__trigger[data-state='closed'] {
     border-end-start-radius: var(--pinfold-acc-radius);
     border-end-end-radius: var(--pinfold-acc-radius);
   }
-
-  /* outline — each row is its own bordered box */
-  .pinfold-accordion[data-variant='outline'] {
-    --pinfold-acc-gap-base: var(--pinfold-space-2);
-  }
-  .pinfold-accordion[data-variant='outline'] .pinfold-accordion__item {
-    --pinfold-acc-item-radius: var(--pinfold-acc-radius);
-    border: var(--pinfold-acc-border) solid var(--pinfold-color-border);
-    transition: border-color var(--pinfold-duration-md) var(--pinfold-ease);
-  }
-  .pinfold-accordion[data-variant='outline'] .pinfold-accordion__item[data-state='open'] {
-    border-color: var(--pinfold-color-border-accent);
-  }
-
-  /* separated — cards with air and elevation */
   .pinfold-accordion[data-variant='separated'] {
-    --pinfold-acc-gap-base: var(--pinfold-space-3);
+    --pinfold-acc-gap-base: var(--pinfold-space-2);
   }
   .pinfold-accordion[data-variant='separated'] .pinfold-accordion__item {
-    --pinfold-acc-item-radius: var(--pinfold-acc-radius);
+    --pinfold-acc-item-radius: var(--pinfold-accordion-item-radius, var(--pinfold-acc-radius));
     background: var(--pinfold-color-surface);
     background-image: var(--pinfold-texture);
     -webkit-backdrop-filter: var(--pinfold-backdrop);
     backdrop-filter: var(--pinfold-backdrop);
     border: var(--pinfold-acc-border) solid var(--pinfold-color-border);
     box-shadow: var(--pinfold-shadow-sm), var(--pinfold-highlight);
-    transition: box-shadow var(--pinfold-duration-md) var(--pinfold-ease),
-      border-color var(--pinfold-duration-md) var(--pinfold-ease),
-      transform var(--pinfold-duration-md) var(--pinfold-ease-out);
-  }
-  .pinfold-accordion[data-variant='separated'] .pinfold-accordion__item:hover {
-    box-shadow: var(--pinfold-shadow-md), var(--pinfold-highlight);
   }
-  .pinfold-accordion[data-variant='separated'] .pinfold-accordion__item[data-state='open'] {
-    border-color: var(--pinfold-color-border-accent);
-    box-shadow: var(--pinfold-shadow-md), var(--pinfold-highlight);
-  }
-
-  /* filled — tinted rows, no borders */
   .pinfold-accordion[data-variant='filled'] {
     --pinfold-acc-gap-base: var(--pinfold-space-2);
   }
   .pinfold-accordion[data-variant='filled'] .pinfold-accordion__item {
-    --pinfold-acc-item-radius: var(--pinfold-acc-radius);
+    --pinfold-acc-item-radius: var(--pinfold-accordion-item-radius, var(--pinfold-acc-radius));
     background: var(--pinfold-color-bg-subtle);
     background-image: var(--pinfold-texture);
     -webkit-backdrop-filter: var(--pinfold-backdrop);
     backdrop-filter: var(--pinfold-backdrop);
-    transition: background-color var(--pinfold-duration-md) var(--pinfold-ease);
   }
-  .pinfold-accordion[data-variant='filled'] .pinfold-accordion__item[data-state='open'] {
-    background-color: var(--pinfold-color-surface-selected);
+  .pinfold-accordion[data-joined] {
+    --pinfold-acc-divider-inset: var(--pinfold-acc-pad-x);
   }
-
-  /* ghost — text only, hover reveals the row */
-  .pinfold-accordion[data-variant='ghost'] .pinfold-accordion__item {
-    --pinfold-acc-item-radius: var(--pinfold-acc-radius);
+  .pinfold-accordion[data-joined] .pinfold-accordion__item {
+    --pinfold-acc-item-radius: 0px;
   }
-  .pinfold-accordion[data-variant='ghost'][data-dividers] .pinfold-accordion__item + .pinfold-accordion__item {
-    border-top: var(--pinfold-acc-border) solid var(--pinfold-color-border);
+  .pinfold-accordion[data-joined] .pinfold-accordion__item:first-child {
+    border-start-start-radius: var(--pinfold-acc-radius);
+    border-start-end-radius: var(--pinfold-acc-radius);
+  }
+  .pinfold-accordion[data-joined] .pinfold-accordion__item:last-child {
+    border-end-start-radius: var(--pinfold-acc-radius);
+    border-end-end-radius: var(--pinfold-acc-radius);
+  }
+  .pinfold-accordion[data-joined][data-variant='separated'] {
+    box-shadow: var(--pinfold-shadow-sm), var(--pinfold-highlight);
+  }
+  .pinfold-accordion[data-joined][data-variant='separated'] .pinfold-accordion__item {
+    box-shadow: none;
+  }
+  .pinfold-accordion[data-joined][data-variant='separated'] .pinfold-accordion__item:not(:last-child) {
+    border-bottom-width: 0;
+  }
+  .pinfold-accordion[data-joined][data-variant='separated'] .pinfold-accordion__item:not(:first-child) {
+    border-top-width: 0;
+  }
+  .pinfold-accordion[data-variant='ghost'] .pinfold-accordion__item {
+    --pinfold-acc-item-radius: var(--pinfold-accordion-item-radius, var(--pinfold-acc-radius));
   }
-
-  /* ----------------------------------------------------------------- header */
   .pinfold-accordion__header {
     display: flex;
     margin: 0;
   }
-
   .pinfold-accordion__trigger {
     display: flex;
     align-items: center;
@@ -218,44 +159,19 @@
     line-height: var(--pinfold-leading-tight);
     text-align: start;
     color: var(--pinfold-color-text);
-    transition: background-color var(--pinfold-duration-fast) var(--pinfold-ease),
-      color var(--pinfold-duration-fast) var(--pinfold-ease);
-  }
-
-  .pinfold-accordion__trigger:hover {
-    background: var(--pinfold-color-surface-hover);
+    cursor: pointer;
   }
-  .pinfold-accordion__trigger:active {
-    background: var(--pinfold-color-surface-active);
-  }
-
-  /* Text in the accent: pulled toward the text colour so every tone (500 steps included) clears
-     4.5:1 on every variant's open background, in light and dark mode (the a11y report checks). */
-  .pinfold-accordion__trigger[data-state='open'] {
-    color: color-mix(in oklch, var(--pinfold-acc-accent) 62%, var(--pinfold-color-text));
-  }
-
   .pinfold-accordion__trigger[data-disabled] {
     color: var(--pinfold-color-text-disabled);
     cursor: not-allowed;
   }
-  .pinfold-accordion__trigger[data-disabled]:hover,
-  .pinfold-accordion__trigger[data-disabled]:active {
-    background: none;
-  }
-
-  /* The ring is drawn by the core reset as a box-shadow; raise the focused row
-     so a neighbouring row's background cannot paint over it. */
   .pinfold-accordion__trigger:focus-visible {
     position: relative;
     z-index: 1;
   }
-
   .pinfold-accordion[data-indicator-position='start'] .pinfold-accordion__trigger {
     flex-direction: row-reverse;
   }
-
-  /* ------------------------------------------------------------------ parts */
   .pinfold-accordion__icon {
     display: inline-flex;
     flex: none;
@@ -265,7 +181,15 @@
     height: var(--pinfold-acc-icon);
     color: var(--pinfold-acc-accent);
   }
-
+  .pinfold-accordion__end-icon {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    width: var(--pinfold-acc-icon);
+    height: var(--pinfold-acc-icon);
+    color: var(--pinfold-color-text-muted);
+  }
   .pinfold-accordion__label {
     display: flex;
     flex: 1 1 auto;
@@ -273,13 +197,10 @@
     gap: 2px;
     min-width: 0;
   }
-
   .pinfold-accordion__title {
     font-size: var(--pinfold-acc-title);
     overflow-wrap: anywhere;
   }
-
-  /* Overflow policy per slot: wrap (default for titles), truncate, or clamp to n lines. */
   .pinfold-accordion [data-overflow='truncate'] {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -292,27 +213,22 @@
     line-clamp: var(--pinfold-lines, 2);
     overflow: hidden;
   }
-
   .pinfold-accordion__description {
     font-size: var(--pinfold-acc-desc);
     font-weight: var(--pinfold-weight-normal);
     letter-spacing: var(--pinfold-tracking-normal);
     color: var(--pinfold-color-text-muted);
   }
-
   .pinfold-accordion__badge {
     flex: none;
     padding: 2px var(--pinfold-space-2);
     font-size: var(--pinfold-text-xs);
     font-weight: var(--pinfold-weight-semibold);
     letter-spacing: var(--pinfold-tracking-wide);
-    /* Small text on a tint of its own colour: pulled halfway toward the text colour, so it
-       clears 4.5:1 in light and dark mode for every tone (checked by the a11y report). */
     color: color-mix(in oklch, var(--pinfold-acc-accent) 55%, var(--pinfold-color-text));
     background: color-mix(in oklch, var(--pinfold-acc-accent) 12%, transparent);
     border-radius: var(--pinfold-radius-full);
   }
-
   .pinfold-accordion__indicator {
     display: inline-flex;
     flex: none;
@@ -323,17 +239,22 @@
     transition: transform var(--pinfold-acc-duration) var(--pinfold-ease-out),
       color var(--pinfold-duration-fast) var(--pinfold-ease);
   }
-
-  .pinfold-accordion__trigger:hover .pinfold-accordion__indicator {
-    color: var(--pinfold-color-text-muted);
+  .pinfold-accordion__trigger:not([data-disabled]):hover .pinfold-accordion__indicator {
+    color: var(--pinfold-color-text);
   }
-
   .pinfold-accordion__trigger[data-state='open'] .pinfold-accordion__indicator {
     color: var(--pinfold-acc-accent);
     transform: rotate(180deg);
   }
-
-  /* The plus glyph morphs into a minus instead of spinning. */
+  .pinfold-accordion[data-static-indicator] .pinfold-accordion__trigger .pinfold-accordion__indicator {
+    transform: none;
+  }
+  .pinfold-accordion[data-static-indicator] .pinfold-accordion__indicator-bar {
+    transition: none;
+  }
+  .pinfold-accordion:not([data-animate]) :is(.pinfold-accordion__indicator, .pinfold-accordion__indicator-bar) {
+    transition: none;
+  }
   .pinfold-accordion__indicator .pinfold-accordion__indicator-bar {
     transform-origin: center;
     transition: opacity var(--pinfold-acc-duration) var(--pinfold-ease),
@@ -347,8 +268,6 @@
     opacity: 0;
     transform: rotate(90deg);
   }
-
-  /* ------------------------------------------------------------------ panel */
   .pinfold-accordion__panel {
     display: grid;
     grid-template-rows: 1fr;
@@ -357,21 +276,13 @@
     line-height: var(--pinfold-leading-normal);
     letter-spacing: var(--pinfold-tracking-normal);
   }
-
   .pinfold-accordion__panel[data-state='closed'] {
     grid-template-rows: 0fr;
-    /* Takes closed content out of the accessibility tree and the tab order once
-       the collapse finishes. */
     visibility: hidden;
   }
-
-  /* Find-in-page: once the inner box carries hidden="until-found", the browser
-     owns its visibility (content-visibility), so the panel itself must stay
-     visible for matches to be found. Before hydration the rule above applies. */
   .pinfold-accordion__panel[data-state='closed']:has(> [hidden='until-found']) {
     visibility: visible;
   }
-
   .pinfold-accordion[data-animate] .pinfold-accordion__panel {
     transition: grid-template-rows var(--pinfold-acc-duration) var(--pinfold-ease-out),
       visibility 0s linear 0s;
@@ -380,14 +291,10 @@
     transition: grid-template-rows var(--pinfold-acc-duration) var(--pinfold-ease),
       visibility 0s linear var(--pinfold-acc-duration);
   }
-
   .pinfold-accordion__panel-inner {
     min-height: 0;
     overflow: hidden;
   }
-
-  /* Content settles in slightly behind the row opening — the lag is what makes
-     the motion read as physical rather than mechanical. */
   .pinfold-accordion[data-animate] .pinfold-accordion__content {
     opacity: 0;
     transform: translateY(-4px);
@@ -399,57 +306,48 @@
     transform: none;
     transition-delay: calc(var(--pinfold-acc-duration) * 0.35);
   }
-
-  /* `dimensions.panelMaxHeight` caps the open panel and scrolls the rest. */
   .pinfold-accordion[data-scroll] .pinfold-accordion__panel[data-state='open'] .pinfold-accordion__panel-inner {
     max-height: var(--pinfold-accordion-panel-max-height);
     overflow-y: auto;
     overscroll-behavior: contain;
   }
-
   .pinfold-accordion__content {
     padding: 0 var(--pinfold-acc-panel-pad-x) var(--pinfold-acc-panel-pad-y);
   }
-
   .pinfold-accordion[data-indicator-position='start'] .pinfold-accordion__content {
     padding-inline-start: calc(var(--pinfold-acc-panel-pad-x) + var(--pinfold-acc-icon) + var(--pinfold-space-3));
   }
-
-  /* ------------------------------------------------------------- responsive */
-  /* Narrow containers: the badge drops under the title so the title keeps its
-     width; the indicator stays on the first line. */
   @container pinfold-accordion (max-width: 26rem) {
     .pinfold-accordion__trigger {
       flex-wrap: wrap;
       row-gap: var(--pinfold-space-1);
     }
-    /* Leaves room for the icon and indicator only, so the badge must wrap. */
     .pinfold-accordion__label {
       flex-basis: calc(100% - 4.5em);
     }
     .pinfold-accordion__indicator {
       order: 1;
     }
-    .pinfold-accordion__badge {
+    .pinfold-accordion__badge,
+    .pinfold-accordion__end-icon {
       order: 2;
+    }
+    .pinfold-accordion__badge,
+    .pinfold-accordion__trigger:not(:has(.pinfold-accordion__badge)) .pinfold-accordion__end-icon {
       margin-inline-start: calc(var(--pinfold-acc-icon) + var(--pinfold-space-3));
     }
-    .pinfold-accordion__trigger:not(:has(.pinfold-accordion__icon)) .pinfold-accordion__badge {
+    .pinfold-accordion__trigger:not(:has(.pinfold-accordion__icon)) :is(.pinfold-accordion__badge, .pinfold-accordion__end-icon) {
       margin-inline-start: 0;
     }
   }
-
-  /* Touch: every trigger is at least 44px tall (WCAG 2.5.5 / 2.5.8). */
   @media (pointer: coarse) {
     .pinfold-accordion__trigger {
       min-height: 44px;
     }
   }
-
   @supports not (color: color-mix(in oklch, red, blue)) {
     .pinfold-accordion__badge {
       background: var(--pinfold-color-bg-subtle);
     }
   }
-
 }