@ponchia/ui 0.6.9 → 0.6.11

package/connectors/index.js

@@ -230,14 +230,15 @@ export function curvePath(from, to, opts = {}) {
 
 /**
  * Build a path between two points by `shape` (`straight` | `elbow` | `curve`).
- * @param {ConnectorPathOptions} [opts]
+ * @param {ConnectorPathOptions} opts
  * @returns {string}
  */
-export function connectorPath(opts = {}) {
-  const { from, to } = opts;
-  const shape = connectorShape(opts.shape);
-  if (shape === 'elbow') return elbowPath(from, to, opts);
-  if (shape === 'curve') return curvePath(from, to, opts);
+export function connectorPath(opts) {
+  const options = opts ?? {};
+  const { from, to } = options;
+  const shape = connectorShape(options.shape);
+  if (shape === 'elbow') return elbowPath(from, to, options);
+  if (shape === 'curve') return curvePath(from, to, options);
   return straightPath(from, to);
 }
 
@@ -332,17 +333,18 @@ export function endTangentAngle(from, to, shape = 'straight') {
  * Connect two rects. Resolves anchor points (explicit `fromSide`/`toSide`, else
  * auto), builds the path, and returns `{ d, from, to, angle }` so the caller can
  * place an arrowhead/dot at `to` rotated by `angle`.
- * @param {ConnectRectsOptions} [opts]
+ * @param {ConnectRectsOptions} opts
  * @returns {ConnectRectsResult}
  */
-export function connectRects(opts = {}) {
-  const { fromRect, toRect, curvature, mid } = opts;
-  const shape = connectorShape(opts.shape);
+export function connectRects(opts) {
+  const options = opts ?? {};
+  const { fromRect, toRect, curvature, mid } = options;
+  const shape = connectorShape(options.shape);
   // Honor each side override independently; auto-pick whichever is unset.
   const auto = autoSides(fromRect, toRect);
   const sides = {
-    from: opts.fromSide == null ? auto.from : sideValue(opts.fromSide),
-    to: opts.toSide == null ? auto.to : sideValue(opts.toSide),
+    from: options.fromSide == null ? auto.from : sideValue(options.fromSide),
+    to: options.toSide == null ? auto.to : sideValue(options.toSide),
   };
   const from = anchorPoint(fromRect, sides.from);
   const to = anchorPoint(toRect, sides.to);

package/css/annotations.css

@@ -275,6 +275,7 @@
   .ui-annotation__note,
   .ui-annotation__note-line,
   .ui-annotation__badge {
+    /* Intentional !important: print must freeze opt-in draw/reveal animations. */
     animation: none !important;
     opacity: 1;
     stroke-dashoffset: 0;

package/css/app.css

@@ -184,6 +184,13 @@
   z-index: var(--z-raised);
 }
 
+@media (prefers-reduced-transparency: reduce) {
+  .ui-app-topbar {
+    backdrop-filter: none;
+    background: var(--surface-1);
+  }
+}
+
 .ui-app-topbar__title {
   color: var(--text);
   font-family: var(--display);

package/css/base.css

@@ -267,6 +267,7 @@ textarea:focus-visible,
   .ui-dotloader,
   .ui-dotspinner,
   dialog.ui-modal::backdrop {
+    /* Intentional !important: print chrome must stay hidden across component display rules. */
     display: none !important;
   }
 
@@ -274,6 +275,7 @@ textarea:focus-visible,
   *,
   *::before,
   *::after {
+    /* Intentional !important: print output drops decorative shadows globally. */
     box-shadow: none !important;
     text-shadow: none !important;
   }
@@ -291,6 +293,7 @@ textarea:focus-visible,
   .ui-prose table,
   .ui-tabs__list,
   pre {
+    /* Intentional !important: print must spill scroll containers even if component rules clip. */
     overflow: visible !important;
   }
 

package/css/bullet.css

@@ -10,14 +10,35 @@
    SSR-static, print-survivable. Not imported by core.css.
 
    Boundary: the HOST normalises EVERY value to 0..1 and sets custom props —
-   `--v` (measure), `--t` (target), `--b1`/`--b2` (the band boundaries). Bronto
-   only paints geometry; it refuses raw values and min/max/scale computation —
-   the same contract as `ui-spark`. A bare bullet is opaque to assistive tech, so
-   `.ui-bullet` MUST carry a host-written `role="img"` + `aria-label` text
-   equivalent (e.g. "uptime 99.62%, inside target 99.9%, in the warning band").
-   Colour is never the only channel — the reading lives in that label.
+   `--v` (measure), `--t` (target), `--band-lo`/`--band-hi` (the band
+   boundaries). Bronto only paints geometry; it refuses raw values and
+   min/max/scale computation — the same contract as `ui-spark`. A bare bullet is
+   opaque to assistive tech, so `.ui-bullet` MUST carry a host-written
+   `role="img"` + `aria-label` text equivalent (e.g. "uptime 99.62%, inside
+   target 99.9%, in the warning band"). Colour is never the only channel — the
+   reading lives in that label.
    ========================================================================== */
 
+/* Register only bullet-specific numeric geometry plus the target. Generic
+   `--v` stays unregistered because interval/spark/dot fallbacks depend on it. */
+@property --band-lo {
+  syntax: '<number>';
+  inherits: true;
+  initial-value: 0.5;
+}
+
+@property --band-hi {
+  syntax: '<number>';
+  inherits: true;
+  initial-value: 0.8;
+}
+
+@property --t {
+  syntax: '<number>';
+  inherits: true;
+  initial-value: 0;
+}
+
 .ui-bullet {
   --band-lo: 0.5;
   --band-hi: 0.8;
@@ -34,12 +55,21 @@
   position: relative;
 }
 
+.ui-bullet:dir(rtl) {
+  background: linear-gradient(
+    to left,
+    var(--surface-4) 0 calc(var(--band-lo) * 100%),
+    var(--surface-3) calc(var(--band-lo) * 100%) calc(var(--band-hi) * 100%),
+    var(--surface-2) calc(var(--band-hi) * 100%) 100%
+  );
+}
+
 /* The measure bar — a thinner dark bar centred in the track, the primary value.
    `--v` is the normalised reading; with none it collapses to a hairline. */
 .ui-bullet__measure {
   background: var(--text);
   border-radius: var(--radius-sm);
-  inline-size: max(2px, calc(var(--v, 0) * 100%));
+  inline-size: max(calc(sign(var(--v, 1)) * 2px), calc(var(--v, 0) * 100%));
   inset-block: 30%;
   inset-inline-start: 0;
   position: absolute;
@@ -70,6 +100,10 @@
   transform: translateX(-50%);
 }
 
+.ui-bullet:dir(rtl) .ui-bullet__target {
+  transform: translateX(50%);
+}
+
 /* Optional caption row beneath the track — label + reading in mono, matching
    the report meter's value treatment. */
 .ui-bullet__label {

package/css/code.css

@@ -28,7 +28,21 @@
   display: flex;
   gap: var(--space-sm);
   justify-content: space-between;
+  min-inline-size: 0;
+  overflow: hidden;
   padding: var(--space-2xs) var(--space-sm);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ui-code__head > * {
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ui-code__head > :last-child {
+  flex-shrink: 0;
 }
 
 .ui-code__body {

package/css/command.css

@@ -57,9 +57,17 @@
   cursor: pointer;
   display: flex;
   gap: 0.6rem;
+  min-inline-size: 0;
   padding: 0.5rem 0.6rem;
 }
 
+.ui-command__item > :not(.ui-command__shortcut, .ui-command__meta) {
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 /* `display: flex` would otherwise beat the UA `[hidden]` rule, so a
    filtered-out item stays visible — re-assert none for hidden items/groups. */
 .ui-command__item[hidden],
@@ -74,11 +82,13 @@
 
 .ui-command__shortcut {
   color: var(--text-dim);
+  flex-shrink: 0;
   margin-inline-start: auto;
 }
 
 .ui-command__meta {
   color: var(--text-dim);
+  flex-shrink: 0;
   font-family: var(--mono);
   font-size: var(--text-2xs);
   margin-inline-start: auto;

package/css/dataviz.css

@@ -98,3 +98,30 @@
   --chart-div-7: oklch(80% 0.12 55deg);
   --chart-pattern-ink: rgb(255 255 255 / 0.42);
 }
+
+@media print {
+  :root:not([data-theme='light']) {
+    --chart-1: var(--accent);
+    --chart-2: #e69f00;
+    --chart-3: #56b4e9;
+    --chart-4: #009e73;
+    --chart-5: #f0e442;
+    --chart-6: #0072b2;
+    --chart-7: #cc79a7;
+    --chart-8: #4d5358;
+    --chart-seq-1: oklch(94% 0.03 25deg);
+    --chart-seq-2: oklch(85% 0.07 25deg);
+    --chart-seq-3: oklch(74% 0.12 25deg);
+    --chart-seq-4: oklch(62% 0.16 25deg);
+    --chart-seq-5: oklch(50% 0.16 25deg);
+    --chart-seq-6: oklch(38% 0.13 25deg);
+    --chart-div-1: oklch(45% 0.14 255deg);
+    --chart-div-2: oklch(62% 0.1 250deg);
+    --chart-div-3: oklch(82% 0.05 245deg);
+    --chart-div-4: oklch(90% 0.01 250deg);
+    --chart-div-5: oklch(80% 0.07 60deg);
+    --chart-div-6: oklch(66% 0.13 55deg);
+    --chart-div-7: oklch(56% 0.15 45deg);
+    --chart-pattern-ink: rgb(0 0 0 / 0.34);
+  }
+}

package/css/diff.css

@@ -72,6 +72,8 @@
   background: var(--surface-2);
   color: var(--text-dim);
   grid-column: 1 / -1;
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
   padding: var(--space-2xs) var(--space-sm);
 }
 

package/css/disclosure.css

@@ -527,6 +527,14 @@
   position: absolute;
 }
 
+@media (prefers-reduced-transparency: reduce) {
+  .ui-carousel__prev,
+  .ui-carousel__next,
+  .ui-carousel__status {
+    background: var(--surface-3);
+  }
+}
+
 /* Thumbnail strip — clicking a thumb jumps the track; active = accent. */
 .ui-carousel__thumbs {
   display: flex;

package/css/dots.css

@@ -505,7 +505,7 @@
   container: dotfit / inline-size;
 }
 
-@container dotfit (width < 18rem) {
+@container dotfit (inline-size < 18rem) {
   .ui-dotfit .ui-dotgrid {
     --dot-gap: 8px;
   }

package/css/feedback.css

@@ -345,6 +345,15 @@
   transform: translate(-50%, 0);
 }
 
+.ui-tooltip:dir(rtl) .ui-tooltip__bubble {
+  transform: translate(50%, 4px);
+}
+
+.ui-tooltip:dir(rtl):hover .ui-tooltip__bubble,
+.ui-tooltip:dir(rtl):focus-within .ui-tooltip__bubble {
+  transform: translate(50%, 0);
+}
+
 /* Popover surface — a top-layer panel positioned by initPopover (JS
    collision-aware, dependency-free). Uses the native [popover] top
    layer when available so it never clips; the class styles it either

package/css/interval.css

@@ -8,6 +8,20 @@
    core.css.
    ========================================================================== */
 
+/* `--lo` / `--hi` are inherited 0..1 endpoints for range geometry. The optional
+   `--v` stays unregistered so its `var(--v, var(--lo))` fallback remains intact. */
+@property --lo {
+  syntax: '<number>';
+  inherits: true;
+  initial-value: 0;
+}
+
+@property --hi {
+  syntax: '<number>';
+  inherits: true;
+  initial-value: 1;
+}
+
 .ui-interval {
   --lo: 0;
   --hi: 1;
@@ -31,9 +45,9 @@
   background: color-mix(in srgb, var(--accent) 26%, transparent);
   border: 1px solid color-mix(in srgb, var(--accent) 58%, var(--line));
   border-radius: var(--radius-pill);
-  inline-size: max(2px, calc((var(--hi) - var(--lo)) * 100%));
+  inline-size: max(2px, calc((max(var(--lo), var(--hi)) - min(var(--lo), var(--hi))) * 100%));
   inset-block: 18%;
-  inset-inline-start: calc(var(--lo) * 100%);
+  inset-inline-start: calc(min(var(--lo), var(--hi)) * 100%);
   position: absolute;
 }
 
@@ -50,6 +64,10 @@
   transform: translate(-50%, -50%);
 }
 
+.ui-interval:dir(rtl) .ui-interval__point {
+  transform: translate(50%, -50%);
+}
+
 .ui-interval__label,
 .ui-interval__bounds {
   color: var(--text-dim);

package/css/legend.css

@@ -104,37 +104,38 @@
 /* Categorical index helpers: exactly one per palette series (gated against
    tokens/charts.js by check-legend). They set only the colour, so a swatch
    stays a faithful key — add `--chart-pattern` (inline, or from dataviz.css)
-   only where the chart mark itself is patterned. */
+   only where the chart mark itself is patterned. The accent fallback keeps the
+   live custom property resolvable when dataviz.css is not present. */
 .ui-legend__swatch--1 {
-  --chart-color: var(--chart-1);
+  --chart-color: var(--chart-1, var(--accent));
 }
 
 .ui-legend__swatch--2 {
-  --chart-color: var(--chart-2);
+  --chart-color: var(--chart-2, var(--accent));
 }
 
 .ui-legend__swatch--3 {
-  --chart-color: var(--chart-3);
+  --chart-color: var(--chart-3, var(--accent));
 }
 
 .ui-legend__swatch--4 {
-  --chart-color: var(--chart-4);
+  --chart-color: var(--chart-4, var(--accent));
 }
 
 .ui-legend__swatch--5 {
-  --chart-color: var(--chart-5);
+  --chart-color: var(--chart-5, var(--accent));
 }
 
 .ui-legend__swatch--6 {
-  --chart-color: var(--chart-6);
+  --chart-color: var(--chart-6, var(--accent));
 }
 
 .ui-legend__swatch--7 {
-  --chart-color: var(--chart-7);
+  --chart-color: var(--chart-7, var(--accent));
 }
 
 .ui-legend__swatch--8 {
-  --chart-color: var(--chart-8);
+  --chart-color: var(--chart-8, var(--accent));
 }
 
 /* Continuous colour ramp. Author supplies the min/mid/max tick *text*; the

package/css/marks.css

@@ -30,6 +30,7 @@
   background-repeat: no-repeat;
   background-size: 100% 100%;
   border-radius: 0.12em;
+  -webkit-box-decoration-break: clone; /* stylelint-disable-line property-no-vendor-prefix -- Safari/WebKit keeps wrapped mark backgrounds continuous. */
   box-decoration-break: clone;
   color: inherit;
   padding-block: 0.05em;

package/css/motion.css

@@ -384,6 +384,7 @@
   ::view-transition-group(*),
   ::view-transition-old(*),
   ::view-transition-new(*) {
+    /* Intentional !important: view-transition pseudos sit outside the global reset. */
     animation: none !important;
   }
 }
@@ -419,6 +420,7 @@
   }
 
   .ui-reveal {
+    /* Intentional !important: reveal content must not remain hidden for reduced-motion users. */
     opacity: 1 !important;
     transform: none !important;
   }

package/css/overlay.css

@@ -425,8 +425,9 @@ html:has(.ui-modal.is-open) {
   }
 
   .ui-menu {
-    inset-inline: 0;
-    min-inline-size: 0;
+    inline-size: max-content;
+    max-inline-size: calc(100vw - (2 * var(--space-sm)));
+    min-inline-size: min(11rem, calc(100vw - (2 * var(--space-sm))));
   }
 
   /* Let the combobox shed its 14rem floor and span the viewport so the input
@@ -450,6 +451,17 @@ html:has(.ui-modal.is-open) {
   }
 }
 
+@media (prefers-reduced-transparency: reduce) {
+  .ui-modal::backdrop {
+    backdrop-filter: none;
+    background: var(--surface-1);
+  }
+
+  .ui-lightbox::backdrop {
+    background: var(--surface-1);
+  }
+}
+
 /* Forced-colors drops both `backdrop-filter: blur()` and the `color-mix()`
    scrim, so the dialog/lightbox would float over an undimmed page with no
    separation. Re-assert a translucent scrim with `forced-color-adjust: none`

package/css/primitives.css

@@ -543,7 +543,7 @@
 @media (pointer: coarse) {
   .ui-link--arrow,
   .ui-link--cta {
-    min-block-size: 1.5rem;
+    min-block-size: max(24px, 1.6rem);
   }
 }
 

package/css/report.css

@@ -665,6 +665,7 @@
    `.ui-report__figure` with a `.ui-report__caption` + a `.ui-legend` key. */
 
 .ui-print-only {
+  /* Intentional !important: keep print-only utilities hidden from screen styles. */
   display: none !important;
 }
 
@@ -758,10 +759,12 @@
   }
 
   .ui-print-only {
+    /* Intentional !important: this must override the screen-only utility value. */
     display: var(--print-display, block) !important;
   }
 
   .ui-screen-only {
+    /* Intentional !important: print output must not leak screen-only chrome. */
     display: none !important;
   }
 

package/css/sources.css

@@ -229,12 +229,12 @@
 }
 
 /* Print: an inline citation marker points into the references list, so never
-   expand its href inline. base.css expands `.ui-prose a[href^="http"]` with a
-   trailing "(url)"; on a superscript marker that dumps a full URL mid-sentence.
-   !important + print-scoped because base's rule is more specific. */
+   expand its href inline. Match base's `.ui-prose a[href^="http"]` specificity
+   without `!important`. */
 @media print {
+  .ui-prose .ui-citation[href]::after,
   .ui-citation[href]::after {
-    content: none !important;
+    content: none;
   }
 
   .ui-source-card,

package/css/spotlight.css

@@ -51,6 +51,12 @@
   }
 }
 
+@media (prefers-reduced-transparency: reduce) {
+  .ui-spotlight {
+    --spot-backdrop: var(--surface-1);
+  }
+}
+
 .ui-spotlight--ring .ui-spotlight__hole {
   outline: 2px solid var(--accent);
   outline-offset: 0;

package/css/table.css

@@ -132,6 +132,25 @@
   inline-size: 100%;
 }
 
+@media (pointer: coarse) {
+  .ui-table__sort {
+    box-sizing: border-box;
+    margin-block: -0.7rem;
+    min-block-size: 24px;
+    padding-block: 0.7rem;
+  }
+
+  .ui-table--dense .ui-table__sort {
+    margin-block: -0.42rem;
+    padding-block: 0.42rem;
+  }
+
+  .ui-table--comfortable .ui-table__sort {
+    margin-block: -0.95rem;
+    padding-block: 0.95rem;
+  }
+}
+
 .ui-table__sort::after {
   content: '↕';
   opacity: 0.4;

package/css/term.css

@@ -78,7 +78,7 @@
   border-block-start: 1px solid var(--line);
   display: grid;
   gap: var(--space-2xs) var(--space-md);
-  grid-template-columns: minmax(6rem, max-content) 1fr;
+  grid-template-columns: fit-content(45%) minmax(0, 1fr);
   margin: 0;
   padding-block-start: var(--space-md);
 }
@@ -89,12 +89,15 @@
   font-size: var(--text-xs);
   font-weight: 600;
   letter-spacing: var(--tracking-wide);
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
 }
 
 .ui-glossary__def {
   color: var(--text-dim);
   font-size: var(--text-sm);
   margin: 0;
+  min-inline-size: 0;
 }
 
 /* Narrow viewports: stack each term over its definition. */

package/css/tokens.css

@@ -275,13 +275,7 @@
 /* High contrast — manual opt-in and the OS `prefers-contrast` signal.
    Both collapse the soft greys toward the strong end; theme-agnostic
    because they reference the per-theme *-strong / -soft tokens. */
-[data-contrast='high'] {
-  --line: var(--line-strong);
-  --text-dim: var(--text-soft);
-  --focus-ring: var(--accent);
-  --shadow-raised: 0 0 0 1px var(--text);
-}
-
+[data-contrast='high'],
 :root[data-contrast='high'] {
   --line: var(--line-strong);
   --text-dim: var(--text-soft);
@@ -335,18 +329,19 @@
    Lives here, in the exempt tier-definition file, because it is a token-value
    override (ADR-0001), not component styling. CSS-only, like the presets above.
 
-   Selector is `:root:root:root` (specificity 0,3,0), not a bare `:root`: a media
+   Selector is `:root:root:root:root` (specificity 0,4,0), not a bare `:root`: a media
    query adds NO specificity, so a bare `:root` (0,1,0) loses the cascade to the
    on-screen dark palette at `:root[data-theme='dark']` (0,2,0) and the OLED
    surface at `:root[data-theme='dark'][data-surface='oled']` (0,3,0) — i.e. a
    dark-mode user would print a near-black `.ui-card` on white paper, the exact
-   opposite of what this block promises. Tripling `:root` matches the OLED rule's
-   specificity and wins on source order (this block is last), so the remap also
-   beats the `prefers-color-scheme: dark` blocks. Neutralise the OLED-only dark
-   surfaces (--bg / --bg-elevated / --panel-strong) too, or they'd leak through.
+   opposite of what this block promises. Quadrupling `:root` also beats later
+   opt-in skin selectors at 0,3,0 when css/skins.css is loaded after the default
+   bundle, so the print-safe accent survives colorways. Neutralise the OLED-only
+   dark surfaces (--bg / --bg-elevated / --panel-strong) too, or they'd leak
+   through.
    -------------------------------------------------------------------------- */
 @media print {
-  :root:root:root {
+  :root:root:root:root {
     color-scheme: light;
 
     --text: #111;