@aparte/core 0.16.8 → 0.16.9

package/dist/elicitation/panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"panel.d.ts","sourceRoot":"","sources":["../../src/elicitation/panel.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EACR,uBAAuB,EAK1B,MAAM,YAAY,CAAC;AAWpB,MAAM,WAAW,qBAAqB;IAClC,QAAQ,CAAC,EAAE,EAAE,WAAW,CAAC;IACzB;;;;;;;;;;;;;;;OAeG;IACH,QAAQ,CAAC,OAAO,EAAE,WAAW,CAAC;IAC9B,gEAAgE;IAChE,UAAU,IAAI,OAAO,CAAC;IACtB,yDAAyD;IACzD,UAAU,IAAI,OAAO,CAAC;IACtB,kDAAkD;IAClD,KAAK,IAAI,IAAI,CAAC;IACd;;;;;;;;;;;;;;;;;;OAkBG;IACH,IAAI,IAAI,QAAQ,GAAG,MAAM,CAAC;IAC1B,wEAAwE;IACxE,UAAU,IAAI,OAAO,CAAC;IACtB,mGAAmG;IACnG,OAAO,IAAI,IAAI,CAAC;IAChB;;;;;;;;;;;;OAYG;IACH,QAAQ,CAAC,EAAE,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,GAAG,IAAI,CAAC;IAC/C;;;;;;;;;;;OAWG;IACH,OAAO,IAAI,IAAI,CAAC;CACnB;AAyCD;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,OAAO,GAAG,WAAW,CAalG;AA6ZD,wBAAgB,qBAAqB,CACjC,OAAO,EAAE,MAAM,GAAG,CAAC,MAAM,MAAM,CAAC,EAChC,MAAM,EAAE,uBAAuB,EAC/B,QAAQ,EAAE,MAAM,IAAI,GACrB,qBAAqB,CAevB"}
+{"version":3,"file":"panel.d.ts","sourceRoot":"","sources":["../../src/elicitation/panel.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EACR,uBAAuB,EAK1B,MAAM,YAAY,CAAC;AAWpB,MAAM,WAAW,qBAAqB;IAClC,QAAQ,CAAC,EAAE,EAAE,WAAW,CAAC;IACzB;;;;;;;;;;;;;;;OAeG;IACH,QAAQ,CAAC,OAAO,EAAE,WAAW,CAAC;IAC9B,gEAAgE;IAChE,UAAU,IAAI,OAAO,CAAC;IACtB,yDAAyD;IACzD,UAAU,IAAI,OAAO,CAAC;IACtB,kDAAkD;IAClD,KAAK,IAAI,IAAI,CAAC;IACd;;;;;;;;;;;;;;;;;;OAkBG;IACH,IAAI,IAAI,QAAQ,GAAG,MAAM,CAAC;IAC1B,wEAAwE;IACxE,UAAU,IAAI,OAAO,CAAC;IACtB,mGAAmG;IACnG,OAAO,IAAI,IAAI,CAAC;IAChB;;;;;;;;;;;;OAYG;IACH,QAAQ,CAAC,EAAE,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,GAAG,IAAI,CAAC;IAC/C;;;;;;;;;;;OAWG;IACH,OAAO,IAAI,IAAI,CAAC;CACnB;AAyCD;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,OAAO,GAAG,WAAW,CAalG;AA8aD,wBAAgB,qBAAqB,CACjC,OAAO,EAAE,MAAM,GAAG,CAAC,MAAM,MAAM,CAAC,EAChC,MAAM,EAAE,uBAAuB,EAC/B,QAAQ,EAAE,MAAM,IAAI,GACrB,qBAAqB,CAevB"}

package/dist/index.css

@@ -326,8 +326,12 @@
      and a 14px mark are a minimap's measures, not spacing steps. */
   --aparte-scroll-rail-tick-size: 14px;
   --aparte-scroll-rail-tick-thickness: 2px;
-
-  --aparte-scroll-rail-gap: 8px;
+  /* What a tick is to a POINTER, as opposed to what it is to the eye: WCAG 2.5.8's
+     24px minimum. The drawn line stays 14×2 — this sizes the pseudo-element around it,
+     and the gap below derives from it so the pitch rises with the zone. The rail is
+     `display: none` under `(pointer: coarse)`, so 2.5.8's 24px is the bar here and not
+     2.5.5's 44px. */
+  --aparte-scroll-rail-hit-size: 24px;
 
   /* Context gauge, ring variant — a diameter, and a stroke in the ring's own 36-unit
      box. Literals like the rail's: a 22px ring is a toolbar's measure, not a spacing step. */
@@ -721,7 +725,12 @@ aparte-chat {
   --aparte-viewport-padding: var(--aparte-space-8);
   --aparte-scrollbar-thumb: var(--aparte-neutral);
   --aparte-input-padding-x: var(--aparte-space-6);
-  --aparte-input-padding-y: var(--aparte-space-5);
+  /* The editor at rest is the control height: half of what the control size leaves once
+     one line of its own text is taken out. It used to be a flat 10px, which made the editor
+     44px beside 36px buttons and, the row aligning at the end, sat the send button 4px
+     below the editor's centre. Derived from the editor's own line (1lh), so a coarse
+     pointer's 44 and a changed font both keep the editor and its buttons on one centre. */
+  --aparte-input-padding-y: calc((var(--aparte-composer-control-size) - 1lh) / 2);
   --aparte-conv-list-gap: var(--aparte-space-1);
   --aparte-conv-item-gap: var(--aparte-space-3);
   --aparte-elic-option-radius: var(--aparte-radius-md);
@@ -841,8 +850,14 @@ aparte-chat {
   --aparte-track: color-mix(in srgb, var(--aparte-text) 8%, var(--aparte-bg));
   --aparte-skeleton-base: var(--aparte-track);
   /* The rail is as wide as its widest tick (the current one is 1.6× the resting size);
-     it used to be a 20px literal clipping a 22.4px tick. */
-  --aparte-scroll-rail-width: calc(var(--aparte-scroll-rail-tick-size) * 1.6);
+     it used to be a 20px literal clipping a 22.4px tick. The floor is one tick's
+     pressable zone: the rail clips, so a column narrower than the zone would cut the
+     target back below 24px on the very edge a reader aims at. */
+  --aparte-scroll-rail-width: max(var(--aparte-scroll-rail-hit-size), calc(var(--aparte-scroll-rail-tick-size) * 1.6));
+  /* The distance between two ticks IS the zone minus the line: gap + thickness = the
+     24px pitch, so the zones tile edge to edge. Growing the zone alone would have
+     overlapped them by 14px and left the z-order to decide every press. */
+  --aparte-scroll-rail-gap: calc(var(--aparte-scroll-rail-hit-size) - var(--aparte-scroll-rail-tick-thickness));
   --aparte-skeleton-shine: var(--aparte-surface-3);
   /* The line it stands for: as tall as the content type, and a gap that is the rest of
      the content line, so the text that replaces it lands where it was (T21). It was 12px
@@ -2932,9 +2947,15 @@ aparte-icon {
   --aparte-thumbnail-border: var(--aparte-attachment-chip-border);
 }
 
-/* Only an image tile the app declared it can preview is a button — see
-   aparteGlobalConfig.setHostHandlers(). Undeclared, it is a picture, not a control. */
-.aparte-thumb--image[role='button'] {
+/* Only an image the app declared it can preview is a button — see
+   aparteGlobalConfig.setHostHandlers(). Undeclared, it is a picture, not a control.
+
+   Two selectors because the two strips carry the role in two places, and both are
+   right. The sent-message strip has no ✕, so its TILE is the whole control. The
+   composer's tile wraps the remove button, so the control there is the IMAGE — a
+   button inside a button is what the role on the tile used to make. */
+.aparte-thumb--image[role='button'],
+.aparte-thumbnail__image[role='button'] {
   cursor: pointer;
 }
 
@@ -2943,6 +2964,15 @@ aparte-icon {
   outline-offset: var(--aparte-focus-outline-offset);
 }
 
+/* Inset, unlike the tile's. The image fills the tile edge to edge and the tile is the
+   frame (`overflow: hidden` above), so an outline drawn outward is cropped away — the
+   focus ring would simply not exist. Pulled in by its own width, it lands just inside
+   the border and stays whole. */
+.aparte-thumbnail__image[role='button']:focus-visible {
+  outline: var(--aparte-focus-outline-width) solid var(--aparte-border-focus);
+  outline-offset: calc(-1 * var(--aparte-focus-outline-width));
+}
+
 .aparte-thumb--file {
   display: flex;
   align-items: center;
@@ -3507,11 +3537,12 @@ aparte-icon {
  * script the caller owns: a <details open> toggling itself, a positioning library placing
  * a menu next to its trigger. Nothing here reaches for position:fixed on your behalf.
  *
- *     <div class="aparte-tabs" role="tablist">
- *       <button class="aparte-tabs__tab" role="tab" aria-selected="true">Preview</button>
- *       <button class="aparte-tabs__tab" role="tab" aria-selected="false">Code</button>
+ *     <div class="aparte-tabs" role="tablist" aria-label="Result view">
+ *       <button class="aparte-tabs__tab" role="tab" type="button" id="tabs-a-preview" aria-controls="tabs-a-preview-panel" aria-selected="true" tabindex="0">Preview</button>
+ *       <button class="aparte-tabs__tab" role="tab" type="button" id="tabs-a-code" aria-controls="tabs-a-code-panel" aria-selected="false" tabindex="-1">Code</button>
  *     </div>
- *     <div class="aparte-tabs__panel" role="tabpanel">The panel for the selected tab.</div>
+ *     <div class="aparte-tabs__panel" role="tabpanel" id="tabs-a-preview-panel" aria-labelledby="tabs-a-preview">The panel for the selected tab.</div>
+ *     <div class="aparte-tabs__panel" role="tabpanel" id="tabs-a-code-panel" aria-labelledby="tabs-a-code" hidden>The panel the other tab opens.</div>
  *
  *     <div class="aparte-accordion">
  *       <details class="aparte-accordion__item" open>
@@ -3558,17 +3589,29 @@ aparte-icon {
    the current tab, which reads as a control rather than as navigation. Neither moves
    anything: `aria-selected` is what says which tab is current, and the app owns it.
 
-       <div class="aparte-tabs aparte-tabs--underline" role="tablist">
-         <button class="aparte-tabs__tab" role="tab" aria-selected="true">Preview</button>
-         <button class="aparte-tabs__tab" role="tab" aria-selected="false">Code</button>
+   The markup below is the whole contract of the role, and all of it is yours to write:
+   ONE tab stop for the list (`tabindex="0"` on the selected tab, `-1` on the rest),
+   `aria-controls` from each tab to its `role="tabpanel"`, and `aria-labelledby` back.
+   The app also owns the ArrowLeft/ArrowRight/Home/End handler that moves the selection
+   and the stop together — `@aparte/plugin-artifacts`' card has a working one to copy.
+   A tablist without those is louder than plain buttons and says less: every tab a tab
+   stop, and none of them naming what it opens.
+
+       <div class="aparte-tabs aparte-tabs--underline" role="tablist" aria-label="Result view">
+         <button class="aparte-tabs__tab" role="tab" type="button" id="tabs-u-preview" aria-controls="tabs-u-preview-panel" aria-selected="true" tabindex="0">Preview</button>
+         <button class="aparte-tabs__tab" role="tab" type="button" id="tabs-u-code" aria-controls="tabs-u-code-panel" aria-selected="false" tabindex="-1">Code</button>
        </div>
-       <div class="aparte-tabs__panel" role="tabpanel">What the selected tab shows.</div>
+       <div class="aparte-tabs__panel" role="tabpanel" id="tabs-u-preview-panel" aria-labelledby="tabs-u-preview">What the selected tab shows.</div>
+       <div class="aparte-tabs__panel" role="tabpanel" id="tabs-u-code-panel" aria-labelledby="tabs-u-code" hidden>What the other tab shows.</div>
 
-       <div class="aparte-tabs aparte-tabs--segmented" role="tablist">
-         <button class="aparte-tabs__tab" role="tab" aria-selected="true">Light</button>
-         <button class="aparte-tabs__tab" role="tab" aria-selected="false">Dark</button>
-         <button class="aparte-tabs__tab" role="tab" aria-selected="false">System</button>
+       <div class="aparte-tabs aparte-tabs--segmented" role="tablist" aria-label="Theme">
+         <button class="aparte-tabs__tab" role="tab" type="button" id="tabs-s-light" aria-controls="tabs-s-light-panel" aria-selected="true" tabindex="0">Light</button>
+         <button class="aparte-tabs__tab" role="tab" type="button" id="tabs-s-dark" aria-controls="tabs-s-dark-panel" aria-selected="false" tabindex="-1">Dark</button>
+         <button class="aparte-tabs__tab" role="tab" type="button" id="tabs-s-system" aria-controls="tabs-s-system-panel" aria-selected="false" tabindex="-1">System</button>
        </div>
+       <div class="aparte-tabs__panel" role="tabpanel" id="tabs-s-light-panel" aria-labelledby="tabs-s-light">The light theme's settings.</div>
+       <div class="aparte-tabs__panel" role="tabpanel" id="tabs-s-dark-panel" aria-labelledby="tabs-s-dark" hidden>The dark theme's settings.</div>
+       <div class="aparte-tabs__panel" role="tabpanel" id="tabs-s-system-panel" aria-labelledby="tabs-s-system" hidden>Whatever the system asks for.</div>
    ========================================= */
 
 .aparte-tabs {
@@ -4792,7 +4835,10 @@ aparte-progress-spinner:not([value]) svg {
 
 /* Both host shapes core recognises get the same layout: the vanilla
    <aparte-chat> element AND a framework wrapper's `[data-aparte-chat]` root
-   (React/Vue/Svelte/Angular render `<div data-aparte-chat>`). `[data-aparte-chat]`
+   (React/Vue/Svelte render `<div data-aparte-chat class="aparte-chat-container">`;
+   Angular's host IS `<aparte-chat>` and its shell is the inner
+   `.aparte-chat-container`, which carries no attribute here — the overlay rules
+   below list that third shape for exactly that reason). `[data-aparte-chat]`
    is the SAME selector core uses to resolve the host (see aparte-client /
    aparte-chat-bubble), so one rule covers both — no wrapper-specific class. */
 aparte-chat,
@@ -4870,12 +4916,14 @@ aparte-chat[overlay-composer] > aparte-chat-viewport,
   z-index: 0;
 }
 
-/* The bottom stack paints over the absolutely positioned viewport. `:not()` is
-   exact here: the only child that is not the viewport IS the stack (the scroll
-   button lives inside the viewport). */
-aparte-chat[overlay-composer] > :not(aparte-chat-viewport),
-[data-aparte-chat][overlay-composer] > :not(aparte-chat-viewport),
-.aparte-chat-container[overlay-composer] > :not(aparte-chat-viewport) {
+/* The bottom stack paints over the absolutely positioned viewport. The `:not()` names
+   what is NOT the stack: the viewport (the scroll button lives inside it), and the
+   scroll rail, which is a child of the shell too. `position: relative` here beat the
+   rail's own `absolute`, so in overlay mode the floating rail dropped into the flow
+   and pushed the composer down — the one child that floats by design has to be named. */
+aparte-chat[overlay-composer] > :not(aparte-chat-viewport, aparte-scroll-rail),
+[data-aparte-chat][overlay-composer] > :not(aparte-chat-viewport, aparte-scroll-rail),
+.aparte-chat-container[overlay-composer] > :not(aparte-chat-viewport, aparte-scroll-rail) {
   position: relative;
   z-index: var(--aparte-z-raised);
 }
@@ -7221,12 +7269,30 @@ aparte-context[data-level="danger"] .aparte-context__value {
  * chat host. `:has()` gives the host its containing block only while a rail is inside
  * it — a bare `position: relative` on every chat would have moved any absolutely
  * positioned child a consumer already placed there.
+ *
+ * The three shell shapes shell.css already lays out, because an absolute element lands
+ * in the nearest POSITIONED ancestor and a shape missing from this list is a rail that
+ * escaped to the page: the vanilla `<aparte-chat>`, the `[data-aparte-chat]` div
+ * React/Vue/Svelte render, and Angular's inner `.aparte-chat-container` (its host IS
+ * `<aparte-chat>`, but the rail is a child of that inner div). The first two shapes are
+ * both true of the wrapper div, which carries the class and the attribute — listing all
+ * three costs one selector and closes the Angular hole.
  */
 aparte-chat:has(> aparte-scroll-rail),
-[data-aparte-chat]:has(> aparte-scroll-rail) {
+[data-aparte-chat]:has(> aparte-scroll-rail),
+.aparte-chat-container:has(> aparte-scroll-rail) {
   position: relative;
 }
 
+/* The block padding is the room the END zones need, and it is not decoration.
+   The rail clips (`overflow: hidden`, which cuts at the PADDING box) and the list has
+   none of its own, so with no padding here the first tick's top edge sits exactly on the
+   clip line. A zone grows symmetrically — half of `hit − thickness` above and below the
+   line — so the first tick would lose its upper half and the last tick its lower half,
+   to paint AND to hit-testing: 13px of the 24px, on the two ticks a reader aims at most
+   ("jump to the first message", "jump to the latest"). Padding by exactly that half puts
+   the clip line outside every zone instead of through the two end ones. `box-sizing`
+   keeps `max-height` measuring the same box it measured before. */
 aparte-scroll-rail {
   position: absolute;
   inset-inline-end: var(--aparte-space-2);
@@ -7234,7 +7300,9 @@ aparte-scroll-rail {
   transform: translateY(-50%);
   z-index: var(--aparte-z-floating);
   display: block;
+  box-sizing: border-box;
   width: var(--aparte-scroll-rail-width);
+  padding-block: calc((var(--aparte-scroll-rail-hit-size) - var(--aparte-scroll-rail-tick-thickness)) / 2);
   max-height: calc(100% - 2 * var(--aparte-space-8));
   overflow: hidden;
 }
@@ -7254,7 +7322,7 @@ aparte-scroll-rail[data-empty] {
   gap: var(--aparte-scroll-rail-gap);
 }
 
-/* A tick is a real button, drawn as a line. The hit area is the gap around it, drawn
+/* A tick is a real button, drawn as a line. The hit area is the zone around it, drawn
    by the pseudo-element so the line itself can stay two pixels. */
 .aparte-scroll-rail__tick {
   appearance: none;
@@ -7275,10 +7343,23 @@ aparte-scroll-rail[data-empty] {
     background var(--aparte-duration-fast) var(--aparte-ease);
 }
 
+/* The pressable zone: 24px square around a 14×2 line (WCAG 2.5.8). It used to be 22×10
+   — half the 8px gap in the block axis, one spacing step in the inline one — and no
+   spacing exemption covered it, because at a 10px pitch a neighbour's 24px circle
+   overlaps this one's.
+   Block: grow symmetrically to the hit size. The gap is `hit − thickness`, so the pitch
+   is exactly the hit size and two zones meet without overlapping — and the rail pads its
+   block axis by the same half-growth, so the clip does not eat the first and last zone.
+   Inline: grow INWARD only. The rail clips (`overflow: hidden`) and ticks are
+   end-aligned, so a centred zone would hang past the end edge and come back cut to
+   19px; anchored to the tick's end edge it stays whole, and the rail's width carries
+   the hit size as its floor so the column has room for it. */
 .aparte-scroll-rail__tick::before {
   content: "";
   position: absolute;
-  inset: calc(-1 * var(--aparte-scroll-rail-gap) / 2) calc(-1 * var(--aparte-space-2));
+  inset-block: calc((var(--aparte-scroll-rail-tick-thickness) - var(--aparte-scroll-rail-hit-size)) / 2);
+  inset-inline-end: 0;
+  inset-inline-start: calc(var(--aparte-scroll-rail-tick-size) - var(--aparte-scroll-rail-hit-size));
 }
 
 .aparte-scroll-rail__tick:hover {
@@ -8240,9 +8321,16 @@ aparte-split[disabled] > .aparte-split__handle:hover {
     opacity: 1;
   }
 
-  /* Nor the ✕ on a pending attachment, which is the only way to remove one. */
+  /* Nor the ✕ on a pending attachment, which is the only way to remove one — and
+     seeing it is no use at 18px, under the 24 of WCAG 2.2 SC 2.5.8. 24 is not a new
+     number: it is the box `aparte-btn--sm` already draws, so this is the component
+     giving the recipe back its own size on touch rather than out-specifying it.
+     Not `--aparte-touch-target-size`: 44px inside a 72px tile would swallow the
+     picture, and full parity with the neighbouring controls needs the tile to grow
+     with it — a second decision, not this floor. */
   .aparte-thumb__remove {
     opacity: 1;
+    --aparte-thumb-remove-size: var(--aparte-btn-size-sm);
   }
 
   /* Hover cannot reveal the row's ⋯ on touch — keep it visible and tappable. */