@godxjp/ui 18.15.4 → 19.0.0

package/dist/styles/data-display-layout.css

@@ -61,6 +61,125 @@
     background: var(--avatar-background, hsl(var(--muted)));
   }
 
+  /* PRESENCE (gh#309) — the realtime reachability dot on the mark itself.
+   *
+   * Opt-in ONLY: with no `presence` prop the avatar emits neither the attribute nor the node, so
+   * every existing call site keeps today's DOM and today's clip. WITH it the ROOT stops clipping —
+   * the dot straddles the mark's edge, which is exactly why a consumer could never place it from
+   * outside — and the clip moves down onto the image/fallback, which is where it was doing the real
+   * work. `border-radius: inherit` keeps that clip correct for both shapes: --radius-pill for a
+   * person, --avatar-square-radius for an entity mark. */
+  .ui-avatar[data-presence] {
+    overflow: visible;
+  }
+
+  .ui-avatar[data-presence] > .ui-avatar-image,
+  .ui-avatar[data-presence] > .ui-avatar-fallback {
+    overflow: hidden;
+    border-radius: inherit;
+  }
+
+  /* NEVER COLOUR-ALONE (WCAG 1.4.1). Three independent encodings ride together: the localized
+   * sr-only string inside this span, a semantic ROLE colour, and a SHAPE — filled · half-filled ·
+   * barred · hollow — so the four states stay apart in greyscale, for a deuteranope, and under
+   * forced colors. `box-sizing: border-box` makes --avatar-presence-size the OUTER diameter, so the
+   * state stroke never changes the dot's footprint between states.
+   *
+   * The dot is a state, not an event: nothing here animates, so there is nothing for
+   * prefers-reduced-motion to switch off. Presence is deliberately NOT a live region either — a
+   * roster of 40 avatars resyncing over a socket would flood a screen reader; announcing a CHANGE is
+   * the consumer's call, in the consumer's own live region. */
+  [data-slot="avatar-presence"] {
+    position: absolute;
+    inset-block-end: var(--avatar-presence-inset);
+    inset-inline-end: var(--avatar-presence-inset);
+    display: block;
+    box-sizing: border-box;
+    inline-size: var(--avatar-presence-size);
+    block-size: var(--avatar-presence-size);
+    min-inline-size: var(--avatar-presence-min-size);
+    min-block-size: var(--avatar-presence-min-size);
+    border: var(--avatar-presence-stroke-width) solid transparent;
+    border-radius: var(--radius-pill);
+    background-origin: border-box;
+    /* Separator ring — chrome, therefore a knob (#44). It is what keeps the dot legible over a busy
+     * photo; a service that puts the avatar on a coloured surface retunes the colour once. */
+    box-shadow: 0 0 0 var(--avatar-presence-ring-width)
+      hsl(var(--avatar-presence-ring-color, var(--background)));
+  }
+
+  /* ONLINE — a SOLID disc. */
+  [data-slot="avatar-presence"][data-presence="online"] {
+    border-color: hsl(var(--avatar-presence-online-color, var(--success)));
+    background-color: hsl(var(--avatar-presence-online-color, var(--success)));
+  }
+
+  /* AWAY — a HALF-FILLED disc (block-end half), the one silhouette that survives greyscale next to
+   * both the solid and the hollow states. */
+  [data-slot="avatar-presence"][data-presence="away"] {
+    border-color: hsl(var(--avatar-presence-away-color, var(--warning)));
+    background-color: hsl(var(--avatar-presence-ring-color, var(--background)));
+    background-image: linear-gradient(
+      to bottom,
+      transparent 0 50%,
+      hsl(var(--avatar-presence-away-color, var(--warning))) 50%
+    );
+  }
+
+  /* BUSY (do-not-disturb) — a solid disc CUT by a horizontal bar. */
+  [data-slot="avatar-presence"][data-presence="busy"] {
+    border-color: hsl(var(--avatar-presence-busy-color, var(--destructive)));
+    background-color: hsl(var(--avatar-presence-busy-color, var(--destructive)));
+  }
+
+  /* `inset: 0; margin: auto` centres the bar in BOTH axes with no translate, so it stays centred
+   * under dir="rtl" (a start-anchored `translate(-50%)` would slide it off-centre when the inline
+   * axis flips). */
+  [data-slot="avatar-presence"][data-presence="busy"]::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    margin: auto;
+    inline-size: var(--avatar-presence-bar-inline-size);
+    block-size: var(--avatar-presence-bar-block-size);
+    border-radius: var(--radius-pill);
+    background: hsl(var(--avatar-presence-ring-color, var(--background)));
+  }
+
+  /* OFFLINE — a HOLLOW ring. Distinct from an ABSENT `presence`, which draws nothing at all: absent
+   * means "this entity has no presence concept" (an organization mark), offline means "known to be
+   * unreachable" — the same distinction ListRow draws between an omitted and a `false` `unread`. */
+  [data-slot="avatar-presence"][data-presence="offline"] {
+    border-color: hsl(var(--avatar-presence-offline-color, var(--muted-foreground)));
+    background-color: hsl(var(--avatar-presence-ring-color, var(--background)));
+  }
+
+  /* FORCED COLORS — the UA replaces author colours, and box-shadow is dropped outright, so the
+   * separator ring would vanish into the mark and all four states would collapse to one swatch.
+   * System-colour keywords ARE honoured inside this block, so re-draw the ring as an outline and
+   * re-state each silhouette in Canvas / CanvasText: the shape encoding survives, which is the half
+   * of WCAG 1.4.1 that a colour-only dot loses here first. */
+  @media (forced-colors: active) {
+    [data-slot="avatar-presence"] {
+      border-color: CanvasText;
+      background-color: CanvasText;
+      background-image: none;
+      outline: var(--avatar-presence-ring-width) solid Canvas;
+    }
+
+    [data-slot="avatar-presence"][data-presence="away"] {
+      background-image: linear-gradient(to bottom, Canvas 0 50%, CanvasText 50%);
+    }
+
+    [data-slot="avatar-presence"][data-presence="offline"] {
+      background-color: Canvas;
+    }
+
+    [data-slot="avatar-presence"][data-presence="busy"]::before {
+      background: Canvas;
+    }
+  }
+
   .ui-progress {
     display: flex;
     flex-direction: column;
@@ -305,8 +424,6 @@
   text-decoration: underline;
 }
 .ui-accordion-trigger:focus-visible {
-  outline: var(--focus-ring-width) solid hsl(var(--focus-ring-color, var(--ring)));
-  outline-offset: 2px;
   border-radius: var(--radius-sm);
 }
 .ui-accordion-trigger:disabled,
@@ -316,8 +433,8 @@
   pointer-events: none;
 }
 .ui-accordion-chevron {
-  width: 1rem;
-  height: 1rem;
+  width: var(--accordion-chevron-size);
+  height: var(--accordion-chevron-size);
   color: hsl(var(--muted-foreground));
   transition: transform 0.2s ease;
   flex-shrink: 0;
@@ -397,8 +514,8 @@
 }
 
 .ui-carousel-arrow {
-  width: 1rem;
-  height: 1rem;
+  width: var(--carousel-arrow-icon-size);
+  height: var(--carousel-arrow-icon-size);
 }
 
 /* Dot indicators — horizontal, centered row of round dots; the active one fills + widens. */
@@ -431,11 +548,6 @@
   background: hsl(var(--primary));
 }
 
-.ui-carousel-dot:focus-visible {
-  outline: var(--focus-ring-width) solid hsl(var(--focus-ring-color, var(--ring)));
-  outline-offset: 2px;
-}
-
 /* Vertical orientation — stack the dots into a column beside the track. */
 .ui-carousel[data-orientation="vertical"] .ui-carousel-dots {
   flex-direction: column;
@@ -642,3 +754,65 @@
     inline-size: var(--qr-code-size-lg);
   }
 }
+
+@layer components {
+  /* PERMISSION MATRIX — `.ui-permission-matrix` was a bare hook with no rule anywhere, so every
+   * constant sat on the component (#319). */
+  .ui-permission-matrix-table {
+    min-inline-size: var(--permission-matrix-min-width);
+  }
+
+  /* Sticky first column: the scrolling grid passes UNDER it, so it needs an opaque ground.
+   * Scoped through the matrix root because `[data-slot="table-head"]` sets its own background at
+   * the same specificity — an unscoped rule would win only by import order, which is not a
+   * property worth depending on. */
+  .ui-permission-matrix .ui-permission-matrix-pin {
+    position: sticky;
+    inset-inline-start: 0;
+    /* Above the scrolling cells, below any portaled overlay (--overlay-z-index). */
+    z-index: 20;
+    background-color: inherit;
+    border-inline-end: 1px solid hsl(var(--border));
+    inline-size: var(--permission-matrix-label-width);
+    min-inline-size: var(--permission-matrix-label-width);
+  }
+
+  .ui-permission-matrix-role {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--permission-matrix-role-space-gap);
+  }
+
+  .ui-permission-matrix-name {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--permission-matrix-name-space-gap);
+  }
+
+  .ui-permission-matrix-cell-icon {
+    inline-size: var(--permission-matrix-cell-icon-size);
+    block-size: var(--permission-matrix-cell-icon-size);
+  }
+}
+
+@layer components {
+  /* SCROLL AREA — the custom scrollbar rail (#319). There was no `.ui-scroll*` rule anywhere: the
+   * rail's whole geometry lived on the component as Tailwind literals, so a service could not
+   * retune it. Logical sizing (inline-/block-size) keeps the rail correct in RTL and in vertical
+   * writing modes; the thumb radius is a knob so a sharp-cornered theme squares it once. */
+  .ui-scroll-area-bar {
+    padding: var(--scroll-area-bar-padding);
+  }
+
+  .ui-scroll-area-bar--vertical {
+    inline-size: var(--scroll-area-bar-size);
+  }
+
+  .ui-scroll-area-bar--horizontal {
+    block-size: var(--scroll-area-bar-size);
+  }
+
+  .ui-scroll-area-thumb {
+    border-radius: var(--scroll-area-thumb-radius);
+  }
+}

package/dist/styles/data-entry-layout.css

@@ -84,7 +84,6 @@
 
   .ui-time-input:focus-visible {
     border-color: hsl(var(--focus-ring-color, var(--ring)));
-    box-shadow: 0 0 0 3px hsl(var(--focus-ring-color, var(--ring)) / 0.3);
   }
 
   .ui-time-input[aria-invalid="true"] {
@@ -162,3 +161,355 @@
     color: hsl(var(--destructive));
   }
 }
+
+@layer components {
+  /* UPLOAD — five variants (dropzone · button · picture · picture-card · avatar) that used to
+   * carry their entire box as Tailwind literals on the component: 66 of them, the worst file in
+   * the library (#319). A service could not resize the avatar, dial back the dropzone's generous
+   * inset, or align the file row to its own grid without forking. Every constant is now a knob
+   * (rule #45); colour scrims are role-mirror knobs resolved at the CALL SITE so a scoped
+   * [data-tenant]/.dark override reaches them (docs/TOKENS.md). */
+
+  .ui-upload-dropzone {
+    cursor: pointer;
+    padding: var(--upload-dropzone-space-inset);
+    border-radius: var(--upload-dropzone-radius);
+    border: var(--upload-dropzone-border-width) dashed hsl(var(--border));
+    text-align: center;
+    transition: border-color 150ms ease;
+  }
+
+  .ui-upload-dropzone[data-drag-active] {
+    border-color: hsl(var(--primary));
+    background-color: hsl(var(--primary) / 0.05);
+  }
+
+  .ui-upload-dropzone:not([data-drag-active]):hover {
+    border-color: hsl(var(--primary) / 0.5);
+  }
+
+  .ui-upload-dropzone-icon {
+    display: block;
+    margin-inline: auto;
+    inline-size: var(--upload-dropzone-icon-size);
+    block-size: var(--upload-dropzone-icon-size);
+    color: hsl(var(--muted-foreground));
+  }
+
+  .ui-upload-dropzone-hint {
+    margin-block-start: var(--upload-dropzone-hint-space-block-start);
+    font-size: var(--upload-dropzone-hint-font-size);
+  }
+
+  .ui-upload-dropzone-meta {
+    margin-block-start: var(--upload-dropzone-meta-space-block-start);
+    font-size: var(--upload-dropzone-meta-font-size);
+    color: hsl(var(--muted-foreground));
+  }
+
+  .ui-upload-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--upload-tile-space-gap);
+  }
+
+  .ui-upload-tile {
+    position: relative;
+    inline-size: var(--upload-tile-size);
+    block-size: var(--upload-tile-size);
+    overflow: hidden;
+    border-radius: var(--upload-tile-radius);
+    border: 1px solid hsl(var(--border));
+    background-color: hsl(var(--muted));
+  }
+
+  .ui-upload-tile-add {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--upload-tile-size);
+    block-size: var(--upload-tile-size);
+    border-radius: var(--upload-tile-radius);
+    border: 1px dashed hsl(var(--border));
+    color: hsl(var(--muted-foreground));
+    transition:
+      border-color 150ms ease,
+      color 150ms ease;
+  }
+
+  .ui-upload-tile-add:hover {
+    border-color: hsl(var(--primary));
+    color: hsl(var(--primary));
+  }
+
+  .ui-upload-tile-add-icon {
+    inline-size: var(--upload-tile-icon-size);
+    block-size: var(--upload-tile-icon-size);
+  }
+
+  .ui-upload-tile-add-label {
+    margin-block-start: var(--upload-tile-label-space-block-start);
+    font-size: var(--upload-tile-label-font-size);
+  }
+
+  /* Busy scrim — one share of the surface role, resolved here so a scoped theme reaches it. */
+  .ui-upload-overlay {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(
+      --upload-overlay-background,
+      color-mix(in srgb, hsl(var(--background)) var(--upload-overlay-alpha), transparent)
+    );
+    font-size: var(--upload-tile-overlay-font-size);
+  }
+
+  .ui-upload-tile-placeholder {
+    display: flex;
+    inline-size: 100%;
+    block-size: 100%;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--upload-tile-overlay-font-size);
+    color: hsl(var(--muted-foreground));
+  }
+
+  .ui-upload-tile-remove {
+    position: absolute;
+    inset-block-start: var(--upload-remove-offset);
+    inset-inline-end: var(--upload-remove-offset);
+    padding: calc(var(--upload-remove-space-inset) / 2);
+    border-radius: var(--radius-pill);
+    background-color: hsl(var(--background) / 0.9);
+    box-shadow: var(--shadow-sm);
+  }
+
+  .ui-upload-tile-remove:hover {
+    background-color: hsl(var(--destructive));
+    color: hsl(var(--destructive-foreground));
+  }
+
+  .ui-upload-remove-icon {
+    inline-size: var(--upload-remove-icon-size);
+    block-size: var(--upload-remove-icon-size);
+  }
+
+  .ui-upload-picture {
+    max-inline-size: var(--upload-picture-max-width);
+  }
+
+  .ui-upload-picture-frame {
+    position: relative;
+    overflow: hidden;
+    border-radius: var(--upload-picture-radius);
+    border: 1px solid hsl(var(--border));
+  }
+
+  .ui-upload-picture-img {
+    inline-size: 100%;
+    max-block-size: var(--upload-picture-preview-max-height);
+    object-fit: cover;
+  }
+
+  .ui-upload-picture-overlay {
+    font-size: var(--upload-picture-overlay-font-size);
+  }
+
+  .ui-upload-picture-badge {
+    position: absolute;
+    inset-block-start: var(--upload-picture-badge-offset);
+    inset-inline-start: var(--upload-picture-badge-offset);
+    padding-inline: var(--upload-picture-badge-space-inline);
+    padding-block: var(--upload-picture-badge-space-block);
+    border-radius: var(--upload-picture-badge-radius);
+    background-color: hsl(var(--warning));
+    color: hsl(var(--warning-foreground));
+    font-size: var(--upload-picture-badge-font-size);
+  }
+
+  .ui-upload-picture-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    inline-size: 100%;
+    block-size: var(--upload-picture-empty-height);
+    border-radius: var(--upload-picture-radius);
+    border: 1px dashed hsl(var(--border));
+    color: hsl(var(--muted-foreground));
+  }
+
+  .ui-upload-picture-empty:hover {
+    border-color: hsl(var(--primary));
+  }
+
+  .ui-upload-picture-empty-label {
+    margin-block-start: var(--upload-picture-empty-label-space-block-start);
+    font-size: var(--upload-picture-empty-label-font-size);
+  }
+
+  .ui-upload-avatar {
+    position: relative;
+    inline-size: var(--upload-avatar-size);
+    block-size: var(--upload-avatar-size);
+    overflow: hidden;
+    border-radius: var(--radius-pill);
+    border: var(--upload-avatar-border-width) solid hsl(var(--border));
+    background-color: hsl(var(--muted));
+  }
+
+  .ui-upload-avatar[data-pending-delete] {
+    opacity: var(--upload-avatar-pending-delete-alpha);
+  }
+
+  .ui-upload-avatar-image {
+    inline-size: 100%;
+    block-size: 100%;
+    object-fit: cover;
+  }
+
+  .ui-upload-avatar-placeholder {
+    display: flex;
+    inline-size: 100%;
+    block-size: 100%;
+    align-items: center;
+    justify-content: center;
+    color: hsl(var(--muted-foreground));
+  }
+
+  /* Sits ON the photo, so the wash is a fixed dark scrim rather than a surface role — it must
+   * stay legible over an arbitrary user image in either theme. */
+  .ui-upload-avatar-change {
+    position: absolute;
+    inset-inline: 0;
+    inset-block-end: 0;
+    padding-block: var(--upload-avatar-change-space-block);
+    background-color: var(--upload-avatar-change-background);
+    color: var(--upload-avatar-change-foreground);
+    text-align: center;
+  }
+
+  .ui-upload-avatar-remove {
+    position: absolute;
+    inset-block-start: calc(var(--upload-remove-offset) * -1);
+    inset-inline-end: calc(var(--upload-remove-offset) * -1);
+    padding: var(--upload-remove-space-inset);
+    border-radius: var(--radius-pill);
+    border: 1px solid hsl(var(--border));
+    background-color: hsl(var(--background));
+    box-shadow: var(--shadow-sm);
+  }
+
+  .ui-upload-avatar-remove:hover {
+    background-color: hsl(var(--destructive));
+    color: hsl(var(--destructive-foreground));
+  }
+
+  .ui-upload-draft-undo {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--upload-draft-space-gap);
+    padding-inline: var(--upload-draft-space-inline);
+    padding-block: var(--upload-draft-space-block);
+    border-radius: var(--upload-draft-radius);
+    border: 1px dashed hsl(var(--destructive) / 0.4);
+    background-color: hsl(var(--destructive) / 0.05);
+    font-size: var(--upload-draft-font-size);
+  }
+
+  .ui-upload-draft-hint {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--upload-draft-space-gap);
+    font-size: var(--upload-draft-font-size);
+    color: hsl(var(--muted-foreground));
+  }
+
+  .ui-upload-draft-icon {
+    margin-inline-end: calc(var(--upload-draft-space-gap) / 2);
+    inline-size: var(--upload-draft-icon-size);
+    block-size: var(--upload-draft-icon-size);
+  }
+
+  .ui-upload-row {
+    display: flex;
+    align-items: center;
+    gap: var(--upload-row-space-gap);
+    padding-inline: var(--upload-row-space-inline);
+    padding-block: var(--upload-row-space-block);
+    border-radius: var(--upload-row-radius);
+    border: 1px solid hsl(var(--border));
+    font-size: var(--upload-row-font-size);
+  }
+
+  .ui-upload-row-main {
+    min-inline-size: 0;
+    flex: 1 1 0%;
+  }
+
+  .ui-upload-row-icon {
+    inline-size: var(--upload-row-icon-size);
+    block-size: var(--upload-row-icon-size);
+  }
+
+  .ui-upload-trigger-icon {
+    inline-size: var(--upload-row-icon-size);
+    block-size: var(--upload-row-icon-size);
+  }
+
+  .ui-upload-trigger-icon[data-with-label] {
+    margin-inline-end: var(--space-2);
+  }
+
+  /* Disabled affordances share the one system alpha rather than a per-variant literal. */
+  .ui-upload-dropzone[data-disabled],
+  .ui-upload-tile-add[data-disabled],
+  .ui-upload-avatar[data-disabled] {
+    pointer-events: none;
+    opacity: var(--disabled-opacity);
+  }
+
+  /* ── BranchScopePicker (gh#319) ────────────────────────────────────────────────
+   * `.ui-branch-scope-picker` shipped as a bare hook: the class existed but no rule did, so all
+   * of the control's geometry sat on the component as Tailwind literals. It composes RadioGroup +
+   * CheckboxGroup + SearchInput and has no field box of its own, so none of the control-affix
+   * machinery applies — these four rules are the whole surface. Every measure is a documented
+   * token (#45); see tokens/components/data-entry.css for why each default is a flat rem. */
+  .ui-branch-scope-picker {
+    display: flex;
+    flex-direction: column;
+    gap: var(--branch-scope-picker-gap);
+  }
+
+  .ui-branch-scope-picker-badges {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--branch-scope-picker-badges-gap);
+  }
+
+  /* The `mode="selected"` subset, indented under its radio by a rule on the inline-start edge.
+   * Logical properties throughout, so the indent flips with the writing direction (the utilities
+   * this replaces, `border-s-2 ps-4`, already did). The colour is left to the global
+   * `* { border-color: hsl(var(--border)) }` so a scoped [data-tenant]/.dark override of
+   * `--border` still reaches it. */
+  .ui-branch-scope-picker-subset {
+    display: flex;
+    flex-direction: column;
+    gap: var(--branch-scope-picker-subset-gap);
+    padding-inline-start: var(--branch-scope-picker-subset-padding-inline);
+    border-inline-start-width: var(--branch-scope-picker-subset-border-width);
+  }
+
+  /* A bounded scroll region — the component gives it `tabIndex={0}` + a group name so it stays
+   * keyboard-reachable (WCAG 2.1.1 / axe scrollable-region-focusable) even when every checkbox
+   * in it is disabled. The cap is the token; the overflow is not negotiable. */
+  .ui-branch-scope-picker-list {
+    max-block-size: var(--branch-scope-picker-list-max-height);
+    overflow-y: auto;
+  }
+}

package/dist/styles/density.css

@@ -61,8 +61,8 @@
   --control-height-sm: calc(var(--control-height) - calc(0.25rem * var(--scaling)));
   --control-height-lg: calc(var(--control-height) + calc(0.25rem * var(--scaling)));
   --control-height-xs: calc(var(--control-height) - calc(0.5rem * var(--scaling)));
-  --control-icon-size: calc(1rem * var(--scaling));
-  --control-icon-size-sm: calc(0.875rem * var(--scaling));
+  --control-icon-size: calc(var(--icon-size-md) * var(--scaling));
+  --control-icon-size-sm: calc(var(--icon-size-sm) * var(--scaling));
   --control-padding-x: var(--space-3);
   --control-gap: var(--space-2);
   --control-gap-sm: var(--space-1);