@godxjp/ui 24.1.0 → 25.0.0

package/dist/components/data-display/badge.js

@@ -112,10 +112,13 @@ function Badge({
   const resolvedChildren = children ?? (status ? status in STATUS_MAP ? t(`status.${status}`) : status : void 0);
   const tinted = color != null && color !== "";
   const removeLabel = typeof children === "string" ? children : typeof resolvedChildren === "string" ? resolvedChildren : void 0;
+  const named = props["aria-label"] != null || props["aria-labelledby"] != null;
+  const nameRole = named && props.role === void 0 && !onRemove ? "img" : void 0;
   return /* @__PURE__ */ jsxs(
     Element,
     {
       "data-slot": "badge",
+      role: nameRole,
       "data-tone": tinted ? void 0 : resolvedTone,
       "data-tinted": tinted ? "" : void 0,
       "data-shape": shape ?? "default",

package/dist/components/data-entry/select.js

@@ -579,6 +579,10 @@ function DataSelect(props) {
   const showSearchConfig = typeof props.showSearch === "object" && props.showSearch !== null ? props.showSearch : void 0;
   const showSearch = showSearchConfig ? true : props.showSearch;
   const searchable = showSearch ?? (Boolean(props.loadOptions) || props.mode !== void 0);
+  const inheritedName = useFieldNameFallback({
+    "aria-label": props["aria-label"],
+    "aria-labelledby": props["aria-labelledby"]
+  });
   if (props.mode !== void 0 || searchable) {
     const antdFilter = showSearchConfig?.filterOption;
     const filterOption = antdFilter === void 0 ? props.filterOption : antdFilter === false ? () => true : antdFilter === true ? void 0 : (option, query) => antdFilter(query, option);
@@ -643,6 +647,8 @@ function DataSelect(props) {
   const ariaProps = Object.fromEntries(
     Object.entries(rest).filter(([key]) => key.startsWith("aria-"))
   );
+  const placeholderName = typeof placeholder === "string" ? placeholder : void 0;
+  const nameFromPlaceholder = ariaProps["aria-label"] === void 0 && ariaProps["aria-labelledby"] === void 0 && inheritedName["aria-label"] === void 0 && inheritedName["aria-labelledby"] === void 0 ? placeholderName : void 0;
   const optionTestId = (optionValue) => dataTestId ? `${dataTestId}-option-${optionValue}` : void 0;
   let flatIndex = 0;
   const renderItem = (option) => {
@@ -700,6 +706,7 @@ function DataSelect(props) {
             status,
             width,
             "aria-busy": loading || void 0,
+            "aria-label": nameFromPlaceholder,
             className: cn(
               prefix === void 0 || prefix === null ? void 0 : "ui-select-trigger-prefixed",
               (showClear || loading) && "ui-control-trigger-affixed",

package/dist/components/general/logo.d.ts

@@ -39,6 +39,22 @@ export interface LogoProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "
      * (a string, or a node when the name needs its own markup).
      */
     wordmark?: React.ReactNode;
+    /**
+     * The PRODUCT name that follows the brand, set off by the lockup's own rule — "GoDX | ID",
+     * "GoDX | Console", "GoDX | Admin" (gh#649). Pass the localized product name; it renders after
+     * `wordmark` when both are set.
+     *
+     * It is TEXT, in the lockup's own type scale, not artwork. The kit's flattened "GoDX | ID" file
+     * is a SECOND master (`0 0 1234 242` against this package's `30 30 871.29 182`) with its own
+     * hardcoded ink, its own global `id="title"`/`id="desc"` and a `#C5C8D6` rule; drawing the
+     * suffix would mean one more of those, one more dark variant and one more release per product
+     * name, and no localization at all. The brand's own construction — the G, the arrow, the "GoDX"
+     * logotype — stays untouched inside `mark="godx-lockup"`; a product name is not part of it.
+     *
+     * The rule's colour/width/height and the gap around it are `--logo-divider-*` /
+     * `--logo-product-suffix-*` tokens, so a service retunes them once rather than per page.
+     */
+    productSuffix?: React.ReactNode;
     /**
      * Accessible name for the mark. When set, the logo is exposed to assistive tech as an image with
      * this name; when omitted the mark is decorative (`aria-hidden`) — the correct default when a

package/dist/components/general/logo.js

@@ -10,6 +10,7 @@ import {
 } from "../../brand/godx-artwork.generated.js";
 import { Slot } from "../../lib/slot.js";
 import { cn } from "../../lib/utils.js";
+import { VisuallyHidden } from "./visually-hidden.js";
 const X_HEIGHT_TOP = /^[acegmnopqrsuvwxyz]+$/;
 const LATIN_DESCENDER = /[gjpqy]/;
 function logoGlyphInk(glyph) {
@@ -86,6 +87,7 @@ function MarkArtwork({ mark, glyph }) {
     scheme
   )) });
 }
+const GODX_LOGOTYPE_TEXT = "GoDX";
 const Logo = React.forwardRef(
   ({
     glyph = "g",
@@ -93,6 +95,7 @@ const Logo = React.forwardRef(
     size = "md",
     tone = "primary",
     wordmark,
+    productSuffix,
     label,
     asChild,
     children,
@@ -100,7 +103,10 @@ const Logo = React.forwardRef(
     ...props
   }, ref) => {
     const hasWordmark = wordmark !== void 0 && wordmark !== null && wordmark !== false;
+    const hasProductSuffix = productSuffix !== void 0 && productSuffix !== null && productSuffix !== false;
     const identity = { "data-mark": mark, "data-size": size, "data-tone": tone };
+    const drawnWordmark = mark === "godx-lockup" && !hasWordmark;
+    const suffixNamePrefix = drawnWordmark ? GODX_LOGOTYPE_TEXT : "";
     const renderRoot = (rootProps, content) => {
       if (!asChild) {
         return /* @__PURE__ */ jsx("span", { ref, ...rootProps, children: content });
@@ -108,7 +114,7 @@ const Logo = React.forwardRef(
       const borrowed = React.Children.only(children);
       return /* @__PURE__ */ jsx(Slot, { ...rootProps, ref, children: React.cloneElement(borrowed, void 0, content) });
     };
-    if (hasWordmark) {
+    if (hasWordmark || hasProductSuffix) {
       return renderRoot(
         {
           "data-slot": "logo-lockup",
@@ -120,7 +126,9 @@ const Logo = React.forwardRef(
         },
         /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx("span", { "data-slot": "logo", ...identity, className: "ui-logo", "aria-hidden": "true", children: /* @__PURE__ */ jsx(MarkArtwork, { mark, glyph }) }),
-          /* @__PURE__ */ jsx("span", { "data-slot": "logo-wordmark", "data-logotype": true, className: "ui-logo-wordmark", children: wordmark })
+          hasWordmark ? /* @__PURE__ */ jsx("span", { "data-slot": "logo-wordmark", "data-logotype": true, className: "ui-logo-wordmark", children: wordmark }) : null,
+          hasProductSuffix ? /* @__PURE__ */ jsx(VisuallyHidden, { style: { display: "block" }, children: suffixNamePrefix }) : null,
+          hasProductSuffix ? /* @__PURE__ */ jsx("span", { "data-slot": "logo-product-suffix", className: "ui-logo-product-suffix", children: productSuffix }) : null
         ] })
       );
     }

package/dist/components/layout/auth-identity.d.ts

@@ -2,4 +2,4 @@ import type { AuthIdentityProp } from "../../props/components/layout.prop.js";
 export type { AuthIdentityProp } from "../../props/components/layout.prop.js";
 export type { AuthIdentityProp as AuthIdentityProps } from "../../props/components/layout.prop.js";
 /** Canonical hosted-identity mark, heading and optional real requesting-client context. */
-export declare function AuthIdentity({ title, requester, className }: AuthIdentityProp): import("react").JSX.Element;
+export declare function AuthIdentity({ title, brand, requester, className }: AuthIdentityProp): import("react").JSX.Element;

package/dist/components/layout/auth-identity.js

@@ -1,10 +1,13 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Clock } from "lucide-react";
+import { isValidElement } from "react";
+import { Slot } from "../../lib/slot.js";
 import { cn } from "../../lib/utils.js";
 import { Heading, Logo, Text } from "../general/index.js";
-function AuthIdentity({ title, requester, className }) {
+function AuthIdentity({ title, brand, requester, className }) {
+  const artwork = brand === void 0 || brand === null ? /* @__PURE__ */ jsx(Logo, { mark: "godx", tone: "success" }) : isValidElement(brand) ? /* @__PURE__ */ jsx(Slot, { "aria-hidden": "true", children: brand }) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: brand });
   return /* @__PURE__ */ jsxs("div", { "data-slot": "auth-identity", className: cn("ui-auth-identity", className), children: [
-    /* @__PURE__ */ jsx(Logo, { mark: "godx", tone: "success" }),
+    artwork,
     /* @__PURE__ */ jsx(Heading, { level: 1, children: title }),
     requester !== void 0 && requester !== null ? /* @__PURE__ */ jsxs("div", { "data-slot": "auth-requester", className: "ui-auth-requester", children: [
       /* @__PURE__ */ jsx("span", { "data-slot": "auth-requester-icon", className: "ui-auth-requester-icon", children: /* @__PURE__ */ jsx(Clock, { "aria-hidden": "true" }) }),

package/dist/components/navigation/tabs.js

@@ -22,6 +22,8 @@ import {
   useTabsOverflowValues,
   useTabsScrollReporter
 } from "./tabs-scroll.js";
+const TabsPanelRegistryContext = React.createContext(null);
+const NO_PANELS = /* @__PURE__ */ new Set();
 function triggerSizeClassName(size) {
   return cn(
     size === "sm" && "min-h-[var(--tabs-trigger-height-sm)] px-[var(--tabs-trigger-padding-x-sm)] text-[length:var(--tabs-trigger-font-size-sm)]",
@@ -32,7 +34,8 @@ function triggerSizeClassName(size) {
 const TabsFrameContext = React.createContext({
   orientation: "horizontal",
   selectionSuppressed: false,
-  size: "md"
+  size: "md",
+  panels: null
 });
 function resolveFallbackTabValue(items, requested) {
   if (!items || items.length === 0) return requested;
@@ -127,9 +130,19 @@ function Tabs({
     narrow
   );
   const selectionSuppressed = value === void 0 && items != null && items.length > 0 && resolvedDefault === void 0;
+  const [panels, setPanels] = React.useState(NO_PANELS);
+  const registerPanel = React.useCallback((panelValue) => {
+    setPanels((prev) => prev.has(panelValue) ? prev : new Set(prev).add(panelValue));
+    return () => setPanels((prev) => {
+      if (!prev.has(panelValue)) return prev;
+      const next = new Set(prev);
+      next.delete(panelValue);
+      return next;
+    });
+  }, []);
   const frame = React.useMemo(
-    () => ({ orientation: resolvedOrientation, selectionSuppressed, size }),
-    [resolvedOrientation, selectionSuppressed, size]
+    () => ({ orientation: resolvedOrientation, selectionSuppressed, size, panels }),
+    [resolvedOrientation, selectionSuppressed, size, panels]
   );
   const editable = variant === "editable-card";
   const collapsible = items != null && overflow === "menu";
@@ -312,7 +325,7 @@ function Tabs({
       })
     }
   ) : null;
-  return /* @__PURE__ */ jsx(TabsFrameContext.Provider, { value: frame, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(TabsFrameContext.Provider, { value: frame, children: /* @__PURE__ */ jsx(TabsPanelRegistryContext.Provider, { value: registerPanel, children: /* @__PURE__ */ jsx(
     AriaTabs,
     {
       "data-slot": "tabs",
@@ -408,7 +421,7 @@ function Tabs({
         })
       ] }) : children
     }
-  ) });
+  ) }) });
 }
 const TabsList = React.forwardRef(
   ({ className, variant = "default", loop: _loop, children, ...props }, ref) => {
@@ -453,7 +466,8 @@ const TabsList = React.forwardRef(
 TabsList.displayName = "TabsList";
 const TabsTrigger = React.forwardRef(
   ({ className, value, disabled, children, onKeyDown, onClick, ...props }, ref) => {
-    const { orientation, selectionSuppressed, size } = React.useContext(TabsFrameContext);
+    const { orientation, selectionSuppressed, size, panels } = React.useContext(TabsFrameContext);
+    const controlsAPanel = panels === null || panels.has(value);
     return /* @__PURE__ */ jsx(
       AriaTab,
       {
@@ -490,6 +504,8 @@ const TabsTrigger = React.forwardRef(
           // here for BOTH states, exactly as Radix did.
           "data-state": renderProps.isSelected && !selectionSuppressed ? "active" : "inactive",
           "aria-selected": renderProps.isSelected && !selectionSuppressed,
+          // RAC writes this unconditionally; see `TabsFrame.panels` (gh#643).
+          "aria-controls": controlsAPanel ? domProps["aria-controls"] : void 0,
           "data-orientation": orientation,
           disabled,
           // CHAINED, not spread — the same reason `onKeyDown` below is. `withDomProps` lays the
@@ -523,6 +539,8 @@ TabsTrigger.displayName = "TabsTrigger";
 const TabsContent = React.forwardRef(
   ({ className, value, forceMount, children, ...props }, ref) => {
     const { orientation, selectionSuppressed } = React.useContext(TabsFrameContext);
+    const registerPanel = React.useContext(TabsPanelRegistryContext);
+    React.useEffect(() => registerPanel?.(value), [registerPanel, value]);
     if (selectionSuppressed && !forceMount) return null;
     return /* @__PURE__ */ jsx(
       AriaTabPanel,

package/dist/contracts/measurement.json

@@ -1,6 +1,6 @@
 {
   "$comment": "AUTO-GENERATED by scripts/gen-measurement-contract.mjs — do not edit. Read this instead of guessing: docs/MEASUREMENT-CONTRACT.md.",
-  "version": "24.1.0",
+  "version": "25.0.0",
   "targetSize": {
     "standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
     "min": 24,

package/dist/email/tokens.generated.d.ts

@@ -61,7 +61,7 @@ export declare const EMAIL_COLOR_SOURCE: {
     };
     readonly urgencyForeground: {
         readonly cssVar: "--attention-foreground";
-        readonly hsl: "60 33% 99%";
+        readonly hsl: "48 8% 13%";
     };
 };
 /** Dark-scheme colour sources, for `@media (prefers-color-scheme: dark)` overrides. */

package/dist/email/tokens.generated.js

@@ -53,7 +53,7 @@ const EMAIL_COLOR_SOURCE = {
   },
   "urgencyForeground": {
     "cssVar": "--attention-foreground",
-    "hsl": "60 33% 99%"
+    "hsl": "48 8% 13%"
   }
 };
 const EMAIL_COLOR_SOURCE_DARK = {

package/dist/props/components/layout.prop.d.ts

@@ -630,8 +630,39 @@ export type AuthFooterProp = {
  * (`--auth-identity-gap` / `--auth-requester-*`) — a consumer never re-centres or re-spaces it.
  */
 export type AuthIdentityProp = {
-    /** Primary auth heading, rendered as the page `h1`. */
+    /**
+     * Primary auth heading, rendered as the page `h1`. With `brand` set it is still the `h1` and
+     * still the block's accessible NAME; it simply stops being painted — see `brand`.
+     */
     title: ReactNode;
+    /**
+     * Brand artwork rendered in the mark's place, for a service whose design supplies a real
+     * lockup (mark + wordmark, sometimes a product suffix) rather than the bare GoDX mark. Leave
+     * it out and the canonical `<Logo mark="godx">` renders, which is right for every plain
+     * hosted-GoDX surface.
+     *
+     * The node takes the MARK's slot only: `data-slot="auth-identity"`, the `.ui-auth-identity`
+     * spacing and the `h1` contract are untouched, so a consumer swapping artwork does not fork
+     * the identity block to do it. Pass an inline `<svg>`, never a bitmap.
+     *
+     * IT IS RENDERED DECORATIVE, and that is measured rather than assumed (gh#652). The mark it
+     * replaces was always `aria-hidden` — the `h1` names this block — but a real LOCKUP is not a
+     * mark: `Logo mark="godx-lockup" productSuffix="ID"` puts "GoDX ID" into the accessibility tree
+     * as real text (gh#649's sr-only logotype plus the suffix), so left exposed beside an `h1` named
+     * "GoDX ID" the block announces the product TWICE — measured "GoDXIDGoDX ID" against the
+     * "GoDX ID" it has announced since it shipped. `aria-hidden` is merged ONTO the supplied element
+     * through `Slot` rather than onto a wrapper: a wrapper would be the flex item, and an
+     * `inline-flex` lockup inside a block box is back on a LINE BOX, whose strut descender lifts the
+     * mark a few px — the measured defect `Logo`'s own `asChild` prop exists to remove. A `brand`
+     * that is not a single element cannot take a merged prop and is wrapped instead; artwork always
+     * is one, which is why the doc above says to pass an inline `<svg>`.
+     *
+     * Keep `brand` NON-INTERACTIVE: `aria-hidden` over a focusable child is a WCAG failure.
+     *
+     * The painted `h1` stays. A lockup that already draws the product name therefore shows it twice
+     * on screen; that half of gh#652 is a separate decision and is not taken here.
+     */
+    brand?: ReactNode;
     /**
      * Optional real requesting-client context ("Attendance is requesting sign in"). Pass it ONLY
      * when the client identity is authoritative — never a placeholder.

package/dist/props/registry.d.ts

@@ -938,6 +938,10 @@ export declare const COMPONENT_PROP_REGISTRY: {
         readonly group: "layout";
         readonly file: "components/layout.prop.ts";
         readonly vocabulary: readonly ["TitleProp", "ClassNameProp", {
+            readonly field: "brand";
+            readonly local: true;
+            readonly reason: "The product's own identity artwork (a Logo lockup), replacing the package mark AND the painted h1; a single element, because the block marks it decorative by merging aria-hidden onto it.";
+        }, {
             readonly field: "requester";
             readonly local: true;
             readonly reason: "Authoritative requesting-client context for a delegated auth flow (device grant / consent).";

package/dist/props/registry.js

@@ -978,6 +978,11 @@ const COMPONENT_PROP_REGISTRY = {
     vocabulary: [
       "TitleProp",
       "ClassNameProp",
+      {
+        field: "brand",
+        local: true,
+        reason: "The product's own identity artwork (a Logo lockup), replacing the package mark AND the painted h1; a single element, because the block marks it decorative by merging aria-hidden onto it."
+      },
       {
         field: "requester",
         local: true,

package/dist/props/vocabulary/interaction.prop.d.ts

@@ -32,7 +32,16 @@ export type AvatarShapeProp = "circle" | "square";
 /** Text size — steps of the golden-ratio type scale (NEVER an arbitrary px). `sm` = base. */
 export type TextSizeProp = "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
 /** Text colour intent — maps to semantic foreground tokens (no raw palette). */
-export type TextToneProp = "default" | "muted" | "primary" | "success" | "warning" | "destructive" | "info";
+/**
+ * `inherit` is the one that is NOT a colour: it takes whatever the surface already set (gh#643).
+ *
+ * Every other member paints an ABSOLUTE token, which is right on a page surface and wrong the
+ * moment the text sits on a coloured one — a brand fill, a tinted calendar block, a status band.
+ * There was no way to say "use this surface's own foreground", so `Text` on `bg-primary` painted
+ * `--foreground` over `--primary` and measured 2.45:1. Found by check:frame-axe on this package's
+ * OWN colour-token page, of all places, and on two showcases besides.
+ */
+export type TextToneProp = "default" | "muted" | "primary" | "success" | "warning" | "destructive" | "info" | "inherit";
 /** Font weight — the reference-design canon is THREE weights only: `regular` (400 body), `medium` (500
  *  heading/label), `bold` (700 emphasis). 600/`semibold` is forbidden. */
 export type FontWeightProp = "regular" | "medium" | "semibold" | "bold";

package/dist/styles/control.css

@@ -847,10 +847,14 @@
 
   .ui-search-input-clear {
     position: absolute;
+    display: grid;
+    min-inline-size: var(--touch-target-min);
+    min-block-size: var(--touch-target-min);
     inset-inline-end: var(--search-input-edge-inset);
     top: 50%;
-    transform: translateY(-50%);
+    place-items: center;
     color: hsl(var(--muted-foreground));
+    transform: translateY(-50%);
   }
 
   .ui-search-input-clear:hover {

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

@@ -636,14 +636,25 @@
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
-  gap: var(--space-2);
+
+  gap: 0;
   padding-top: var(--space-4);
 }
 
 .ui-carousel-dot {
+  display: grid;
+  min-inline-size: var(--touch-target-min);
+  min-block-size: var(--touch-target-min);
+  flex-shrink: 0;
+  place-items: center;
+  background: transparent;
+}
+
+.ui-carousel-dot::after {
+  content: "";
+  display: block;
   width: var(--space-2);
   height: var(--space-2);
-  flex-shrink: 0;
   border-radius: var(--radius-pill);
   background: hsl(var(--border));
   transition:
@@ -651,11 +662,11 @@
     background-color 150ms ease;
 }
 
-.ui-carousel-dot:hover {
+.ui-carousel-dot:hover::after {
   background: hsl(var(--muted-foreground));
 }
 
-.ui-carousel-dot[data-active] {
+.ui-carousel-dot[data-active]::after {
   width: var(--space-5);
   background: hsl(var(--primary));
 }
@@ -664,7 +675,7 @@
   flex-direction: column;
 }
 
-.ui-carousel[data-orientation="vertical"] .ui-carousel-dot[data-active] {
+.ui-carousel[data-orientation="vertical"] .ui-carousel-dot[data-active]::after {
   width: var(--space-2);
   height: var(--space-5);
 }

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

@@ -1,4 +1,9 @@
 @layer components {
+
+  .ui-attachments-input {
+    min-block-size: var(--touch-target-min);
+  }
+
   .ui-combobox-content {
     min-width: 14rem;
     width: min(22rem, 90vw);

package/dist/styles/layout.css

@@ -79,6 +79,11 @@
     --separator-label-color: var(--separator-tone-info-label-color, var(--info));
   }
 
+  .ui-separator[data-tone="inherit"] {
+    --separator-rule-color: currentcolor;
+    --separator-label-color: currentcolor;
+  }
+
   .ui-aspect-ratio {
     overflow: clip;
     overflow-clip-margin: var(--focus-ring-clip-margin);

package/dist/styles/logo-layout.css

@@ -163,15 +163,18 @@
     white-space: nowrap;
   }
 
-  .ui-logo-lockup[data-size="xs"] .ui-logo-wordmark {
+  .ui-logo-lockup[data-size="xs"] .ui-logo-wordmark,
+  .ui-logo-lockup[data-size="xs"] .ui-logo-product-suffix {
     font-size: var(--logo-wordmark-font-size-xs);
   }
 
-  .ui-logo-lockup[data-size="sm"] .ui-logo-wordmark {
+  .ui-logo-lockup[data-size="sm"] .ui-logo-wordmark,
+  .ui-logo-lockup[data-size="sm"] .ui-logo-product-suffix {
     font-size: var(--logo-wordmark-font-size-sm);
   }
 
-  .ui-logo-lockup[data-size="lg"] .ui-logo-wordmark {
+  .ui-logo-lockup[data-size="lg"] .ui-logo-wordmark,
+  .ui-logo-lockup[data-size="lg"] .ui-logo-product-suffix {
     font-size: var(--logo-wordmark-font-size-lg);
   }
 
@@ -179,6 +182,30 @@
   .ui-logo-lockup[data-tone="success"] .ui-logo-wordmark {
     color: hsl(var(--logo-wordmark-color, var(--logo-godx-color, var(--brand))));
   }
+
+  .ui-logo-lockup .ui-logo-product-suffix {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--logo-product-suffix-gap);
+    font-family: var(--logo-wordmark-font-family, var(--font-family-display));
+    font-size: var(--logo-wordmark-font-size-md);
+    font-weight: var(--logo-product-suffix-font-weight);
+    letter-spacing: var(--logo-wordmark-letter-spacing);
+    line-height: 1;
+    color: hsl(var(--logo-product-suffix-color, var(--foreground)));
+    white-space: nowrap;
+  }
+
+  .ui-logo-lockup .ui-logo-product-suffix::before {
+    content: "";
+    flex: 0 0 auto;
+    inline-size: var(--logo-divider-width);
+    block-size: var(--logo-divider-height);
+    border-radius: var(--logo-divider-width);
+    background: hsl(
+      var(--logo-divider-color, var(--logo-godx-ink-color)) / var(--logo-divider-alpha)
+    );
+  }
 }
 
 [data-slot="logo-artwork"][data-scheme="dark"] {

package/dist/styles/motion.css

@@ -88,6 +88,10 @@
     color: hsl(var(--text-info));
   }
 
+  .ui-activity[data-tone="inherit"] .ui-activity-mark {
+    color: inherit;
+  }
+
   .ui-activity-dot {
     inline-size: var(--activity-mark-size);
     block-size: var(--activity-mark-size);

package/dist/styles/shell-layout.css

@@ -1640,8 +1640,15 @@
   }
 
   .sb-nav-item[data-active="true"] {
-    background: var(--sidebar-item-active-background, hsl(var(--accent)));
-    color: var(--sidebar-item-active-foreground, hsl(var(--foreground)));
+    background: var(
+      --sidebar-item-active-background,
+      color-mix(
+        in srgb,
+        hsl(var(--primary)) var(--sidebar-item-active-background-alpha),
+        transparent
+      )
+    );
+    color: var(--sidebar-item-active-foreground, hsl(var(--primary)));
     font-weight: var(--font-weight-medium);
   }
 
@@ -1758,8 +1765,8 @@
 
   .sb-nav-item--sub[data-active="true"] {
     background: transparent;
-    color: var(--sidebar-item-active-color, hsl(var(--primary)));
-    font-weight: 500;
+    color: var(--sidebar-item-active-foreground, hsl(var(--primary)));
+    font-weight: var(--font-weight-medium);
   }
 
   .sb-nav-item--sub[data-active="true"]::before {

package/dist/styles/text-layout.css

@@ -58,6 +58,11 @@
   [data-slot="heading"][data-tone="muted"] {
     color: hsl(var(--muted-foreground));
   }
+
+  [data-slot="text"][data-tone="inherit"],
+  [data-slot="heading"][data-tone="inherit"] {
+    color: inherit;
+  }
   [data-slot="text"][data-tone="primary"],
   [data-slot="heading"][data-tone="primary"] {
     color: hsl(var(--primary));

package/dist/tokens/components/logo.css

@@ -46,6 +46,14 @@
   --logo-wordmark-letter-spacing: -0.01em;
   --logo-wordmark-font-family: initial;
   --logo-wordmark-color: initial;
+
+  --logo-divider-width: var(--stroke-hairline);
+  --logo-divider-height: 1em;
+  --logo-divider-alpha: 0.25;
+  --logo-divider-color: initial;
+  --logo-product-suffix-gap: var(--space-2);
+  --logo-product-suffix-font-weight: 500;
+  --logo-product-suffix-color: initial;
 }
 
 .dark,

package/dist/tokens/components/shell.css

@@ -211,12 +211,14 @@
   --app-launcher-launchpad-title-letter-spacing: 0.08em;
   --app-launcher-launchpad-close-space-padding: var(--space-2);
 
-  --sidebar-item-active-color: initial;
-  --sidebar-item-active-tint: initial;
-
   --sidebar-item-active-background: initial;
+
   --sidebar-item-active-foreground: initial;
 
+  --sidebar-item-active-tint: initial;
+
+  --sidebar-item-active-background-alpha: 12%;
+
   --auth-shell-control-height: var(--control-height-comfortable);
   --auth-shell-heading-size: var(--font-size-2xl);
   --auth-shell-card-max-width: 24rem;

package/dist/tokens/derived.css

@@ -2,15 +2,15 @@
 
 :root {
 
-  --primary-hover: 206 100% 29.4%;
+  --primary-hover: 268.7 100% 41.6%;
 
-  --primary-active: 208 100% 22%;
+  --primary-active: 268.7 100% 34.5%;
 
-  --primary-border: 198 68% 66%;
+  --primary-border: 268.7 68% 66%;
   --destructive-hover: 359 50.6% 53.1%;
   --destructive-active: 355 70.6% 33.3%;
 
-  --control-outline: 192.1 100% 44.7%;
+  --control-outline: 268.7 100% 44.7%;
   --control-outline-alpha: 0.11;
 
   --control-outline-error: 4.3 87.6% 34.7%;
@@ -22,15 +22,15 @@
 .dark,
 :root[data-theme="dark"] {
 
-  --primary-hover: 202.2 74.6% 64.5%;
+  --primary-hover: 268.7 100% 92.7%;
 
-  --primary-active: 200.2 81.3% 74.9%;
+  --primary-active: 268.7 100% 81.1%;
 
-  --primary-border: 204.6 46.7% 23.5%;
+  --primary-border: 268.7 46.7% 23.5%;
   --destructive-hover: 358.8 42.3% 53.1%;
   --destructive-active: 357.3 50.6% 34.1%;
 
-  --control-outline: 204.6 99% 61.8%;
+  --control-outline: 268.7 99% 61.8%;
   --control-outline-alpha: 0.29;
 
   --control-outline-error: 351.5 98.3% 53.5%;

package/dist/tokens/foundation.css

@@ -26,13 +26,13 @@
   --input: 30 7% 53%;
 
   --success: 146 40% 58%;
-  --success-foreground: 60 33% 99%;
+  --success-foreground: 48 8% 13%;
   --warning: 44 100% 49%;
   --warning-foreground: 48 8% 13%;
   --info: 221 40% 50%;
   --info-foreground: 60 33% 99%;
   --attention: 25 99% 46%;
-  --attention-foreground: 60 33% 99%;
+  --attention-foreground: 48 8% 13%;
 
   --brand: 268.7 100% 50%;
   --brand-foreground: 60 33% 99%;