@godxjp/ui 31.31.8 → 32.0.1

package/dist/components/layout/separator.js

@@ -1,4 +1,74 @@
-import { Separator } from "../ui/separator.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Separator as AriaSeparator } from "react-aria-components";
+import { padStepToken } from "../../lib/variants.js";
+import { cn } from "../../lib/utils.js";
+import { isDevelopment } from "../../lib/dev.js";
+const Separator = React.forwardRef(
+  ({
+    className,
+    labelSize,
+    space,
+    hideBelow,
+    hideFrom,
+    style,
+    orientation = "horizontal",
+    decorative,
+    label,
+    labelAlign = "center",
+    tone = "default",
+    ...props
+  }, ref) => {
+    const hasLabel = typeof label === "string" && label.trim() !== "";
+    const labelled = hasLabel && orientation === "horizontal";
+    if (isDevelopment()) {
+      if (hasLabel && orientation === "vertical") {
+        console.warn(
+          'Separator: `label` is rendered on orientation="horizontal" only; it was ignored. Use a horizontal rule for a day divider / unread watermark.'
+        );
+      }
+    }
+    const isDecorative = decorative ?? !labelled;
+    return /* @__PURE__ */ jsx(
+      AriaSeparator,
+      {
+        ref,
+        elementType: "div",
+        "data-slot": "separator",
+        "data-label-size": labelSize,
+        "data-hide-below": hideBelow,
+        "data-hide-from": hideFrom,
+        style: {
+          ...style,
+          ...space === void 0 ? void 0 : { marginBlock: padStepToken(space) }
+        },
+        "data-orientation": orientation,
+        "data-tone": tone,
+        "data-labelled": labelled ? "" : void 0,
+        "data-label-align": labelled ? labelAlign : void 0,
+        orientation,
+        "aria-label": labelled && !isDecorative ? label : void 0,
+        className: cn("ui-separator", className),
+        ...props,
+        render: ({ role, "aria-orientation": ariaOrientation, ...domProps }) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: isDecorative ? "none" : role,
+            "aria-orientation": isDecorative ? void 0 : ariaOrientation,
+            ...props,
+            ...domProps,
+            children: labelled ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { className: "ui-separator-rule", "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx("span", { className: "ui-separator-label", "aria-hidden": isDecorative ? void 0 : true, children: label }),
+              /* @__PURE__ */ jsx("span", { className: "ui-separator-rule", "aria-hidden": "true" })
+            ] }) : null
+          }
+        )
+      }
+    );
+  }
+);
+Separator.displayName = "Separator";
 export {
   Separator
 };

package/dist/components/navigation/{app-setting-toggle.d.ts → app-setting-cycle.d.ts}

@@ -1,8 +1,7 @@
 import * as React from "react";
-import type { AppSettingToggleProp } from "../../props/components/app.prop.js";
-export type { AppSettingToggleKind, AppSettingToggleProp, AppSettingToggleProp as AppSettingToggleProps, } from "../../props/components/app.prop.js";
+import type { AppSettingPickerCycleProp } from "../../props/components/app.prop.js";
 /**
- * AppSettingToggle — ONE button that steps a single AppProvider setting to its next value.
+ * `AppSettingPicker menu={false}` (the former AppSettingToggle, v32 #1223) — ONE button that steps a single AppProvider setting to its next value.
  *
  * The no-menu counterpart to {@link AppSettingPicker}: same binding contract, same option order,
  * one tap instead of open-then-choose. Reach for it when the value set is closed and short (theme,
@@ -13,4 +12,4 @@ export type { AppSettingToggleKind, AppSettingToggleProp, AppSettingToggleProp a
  * glyph is the only visible state and a screen-reader user would otherwise be told only which
  * setting they are standing on, never where it currently is.
  */
-export declare const AppSettingToggle: React.ForwardRefExoticComponent<AppSettingToggleProp & React.RefAttributes<HTMLButtonElement>>;
+export declare const AppSettingCycle: React.ForwardRefExoticComponent<AppSettingPickerCycleProp & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/navigation/{app-setting-toggle.js → app-setting-cycle.js}

@@ -45,8 +45,8 @@ const ARIA_KEY = {
   fontSize: "navigation.fontSizePicker.ariaLabel",
   timeFormat: "navigation.timeFormatPicker.ariaLabel"
 };
-const AppSettingToggle = React.forwardRef(
-  function AppSettingToggle2({ kind, appearance = "bar", className, disabled, id, value, onValueChange }, ref) {
+const AppSettingCycle = React.forwardRef(
+  function AppSettingCycle2({ kind, appearance = "bar", className, disabled, id, value, onValueChange }, ref) {
     const ctx = useOptionalAppContext();
     const { t, locale, fallbackLocale } = useTranslation();
     const raw = value ?? ctx?.[kind];
@@ -92,5 +92,5 @@ const AppSettingToggle = React.forwardRef(
   }
 );
 export {
-  AppSettingToggle
+  AppSettingCycle
 };

package/dist/components/navigation/app-setting-picker.d.ts

@@ -1,10 +1,14 @@
 import * as React from "react";
 import type { AppSettingPickerProp } from "../../props/components/app.prop.js";
-export type { AppSettingKind, AppSettingPickerProp, AppSettingPickerProp as AppSettingPickerProps, } from "../../props/components/app.prop.js";
+export type { AppSettingKind, AppSettingCycleKind, AppSettingPickerProp, AppSettingPickerProp as AppSettingPickerProps, AppSettingPickerMenuProp, AppSettingPickerCycleProp, } from "../../props/components/app.prop.js";
 /**
- * One provider-bound Select for any single AppProvider setting — locale / timezone /
+ * One provider-bound control for any single AppProvider setting — locale / timezone /
  * date-format / time-format and the four theme axes (theme / brand / density / fontSize).
  * Mount under `<AppProvider>` and it reads/writes the matching context (`kind`); or pass
  * value + onValueChange to control it.
+ *
+ * `menu={false}` (theme / density / fontSize / timeFormat only) swaps the open-then-choose menu
+ * for ONE button that steps to the next value on each tap and shows that value as its glyph — the
+ * former `AppSettingToggle` (v32 #1223).
  */
 export declare const AppSettingPicker: React.ForwardRefExoticComponent<AppSettingPickerProp & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/navigation/app-setting-picker.js

@@ -14,6 +14,7 @@ import {
 import { APP_DATE_FORMAT_OPTIONS, getDateFormatLabel } from "../../app/date-format-labels.js";
 import { APP_TIME_FORMAT_OPTIONS, getTimeFormatLabel } from "../../app/time-format-labels.js";
 import { getTimezoneLabel, resolveTimezonePickerOptions } from "../../app/timezones.js";
+import { getRegisteredLocales } from "../../app/locales.js";
 import { APP_LOCALES } from "../../app/types.js";
 import {
   APP_BRANDS,
@@ -24,6 +25,7 @@ import {
 import { useOptionalAppContext } from "../../app/app-provider.js";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { cn } from "../../lib/utils.js";
+import { AppSettingCycle } from "./app-setting-cycle.js";
 import {
   Select,
   SelectContent,
@@ -31,6 +33,14 @@ import {
   SelectTrigger,
   SelectValue
 } from "../data-entry/select.js";
+function localeEndonym(code) {
+  try {
+    const name = new Intl.DisplayNames([code], { type: "language" }).of(code);
+    return name ? name.charAt(0).toLocaleUpperCase(code) + name.slice(1) : void 0;
+  } catch {
+    return void 0;
+  }
+}
 const ICON = {
   locale: Languages,
   timezone: Globe,
@@ -53,7 +63,12 @@ const ARIA_KEY = {
 };
 const BRAND_NONE = "__app__";
 const AppSettingPicker = React.forwardRef(
-  function AppSettingPicker2({ kind, appearance, compact = false, className, disabled, id, name, value, onValueChange }, ref) {
+  function AppSettingPicker2(props, ref) {
+    return props.menu === false ? /* @__PURE__ */ jsx(AppSettingCycle, { ref, ...props }) : /* @__PURE__ */ jsx(AppSettingMenu, { ref, ...props });
+  }
+);
+const AppSettingMenu = React.forwardRef(
+  function AppSettingMenu2({ kind, appearance, compact = false, className, disabled, id, name, value, onValueChange }, ref) {
     const resolvedAppearance = appearance ?? (kind === "locale" ? "icon" : "labeled");
     const ctx = useOptionalAppContext();
     const { t, locale, fallbackLocale } = useTranslation();
@@ -73,7 +88,10 @@ const AppSettingPicker = React.forwardRef(
     const items = React.useMemo(() => {
       switch (kind) {
         case "locale":
-          return APP_LOCALES.map((code) => ({ value: code, label: t(`locale.${code}`) }));
+          return getRegisteredLocales().map((code) => ({
+            value: code,
+            label: APP_LOCALES.includes(code) ? t(`locale.${code}`) : localeEndonym(code) ?? code
+          }));
         case "timezone":
           return resolveTimezonePickerOptions(ctx?.timezoneOptions, current ?? "").map((tz) => ({
             value: tz,

package/dist/components/navigation/index.d.ts

@@ -1,17 +1,9 @@
 export { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs.js";
 export { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationEllipsis, PaginationPrevious, PaginationNext, } from "./pagination.js";
 export { Steps } from "./steps.js";
-export { FilterBar, FilterBarGroup, Toolbar, ToolbarGroup } from "./filter-bar.js";
-export type { FilterBarChipProp, FilterBarChipProps, FilterBarFilterProp, FilterBarFilterProps, FilterBarGroupProp, FilterBarGroupProps, FilterBarOverflowProp, FilterBarProp, FilterBarProps, FilterBarSearchProp, FilterBarSearchProps, ToolbarGroupProps, ToolbarProps, } from "./filter-bar.js";
+export { FilterBar, FilterBarGroup, Toolbar, ToolbarGroup } from "./toolbar.js";
+export type { FilterBarChipProp, FilterBarChipProps, FilterBarFilterProp, FilterBarFilterProps, FilterBarGroupProp, FilterBarGroupProps, FilterBarOverflowProp, FilterBarProp, FilterBarProps, FilterBarSearchProp, FilterBarSearchProps, ToolbarGroupProps, ToolbarProps, } from "./toolbar.js";
 export { AppSettingPicker } from "./app-setting-picker.js";
-export type { AppSettingPickerProp, AppSettingPickerProps, AppSettingKind, } from "./app-setting-picker.js";
-export { AppSettingToggle } from "./app-setting-toggle.js";
-export type { AppSettingToggleProp, AppSettingToggleProps, AppSettingToggleKind, } from "./app-setting-toggle.js";
+export type { AppSettingPickerProp, AppSettingPickerProps, AppSettingPickerMenuProp, AppSettingPickerCycleProp, AppSettingKind, AppSettingCycleKind, } from "./app-setting-picker.js";
 export type { BreadcrumbItemProp as BreadcrumbItem } from "../../props/vocabulary/navigation.prop.js";
 export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from "./dropdown-menu.js";
-export { MegaMenu } from "./mega-menu.js";
-export type { MegaMenuProp, MegaMenuProps, MegaMenuItemProp, MegaMenuItemProps, MegaMenuPanelProp, MegaMenuPanelProps, MegaMenuGroupProp, MegaMenuGroupProps, MegaMenuLinkProp, MegaMenuLinkProps, MegaMenuLinkComponentProp, MegaMenuLinkComponentProps, MegaMenuTriggerActionProp, MegaMenuTriggerActionProps, } from "./mega-menu.js";
-export { Conversations } from "./conversations.js";
-export type { ConversationsProp, ConversationsProps, ConversationsItemProp, ConversationsDividerProp, ConversationsEntryProp, ConversationsMenuProp, ConversationsMenuItemProp, ConversationsGroupableProp, ConversationsCreationProp, } from "./conversations.js";
-export { Anchor } from "./anchor.js";
-export type { AnchorContainerProp, AnchorDirectionProp, AnchorItemProp, AnchorProp, AnchorProps, } from "./anchor.js";

package/dist/components/navigation/index.js

@@ -9,9 +9,8 @@ import {
   PaginationNext
 } from "./pagination.js";
 import { Steps } from "./steps.js";
-import { FilterBar, FilterBarGroup, Toolbar, ToolbarGroup } from "./filter-bar.js";
+import { FilterBar, FilterBarGroup, Toolbar, ToolbarGroup } from "./toolbar.js";
 import { AppSettingPicker } from "./app-setting-picker.js";
-import { AppSettingToggle } from "./app-setting-toggle.js";
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -29,14 +28,8 @@ import {
   DropdownMenuSubTrigger,
   DropdownMenuTrigger
 } from "./dropdown-menu.js";
-import { MegaMenu } from "./mega-menu.js";
-import { Conversations } from "./conversations.js";
-import { Anchor } from "./anchor.js";
 export {
-  Anchor,
   AppSettingPicker,
-  AppSettingToggle,
-  Conversations,
   DropdownMenu,
   DropdownMenuCheckboxItem,
   DropdownMenuContent,
@@ -54,7 +47,6 @@ export {
   DropdownMenuTrigger,
   FilterBar,
   FilterBarGroup,
-  MegaMenu,
   Pagination,
   PaginationContent,
   PaginationEllipsis,

package/dist/components/navigation/tabs.js

@@ -8,7 +8,7 @@ import {
   Tabs as AriaTabs
 } from "react-aria-components";
 import { MoreHorizontal, Plus, X } from "lucide-react";
-import { useCounterPill } from "../ui/toggle.js";
+import { useCounterPill } from "../data-entry/toggle.js";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { useMaxWidthBreakpoint } from "../../lib/breakpoint-token.js";
 import { cn } from "../../lib/utils.js";

package/dist/components/ui/carousel.d.ts

@@ -1 +1 @@
-export * from "../data-display/carousel.js";
+export * from "../../lab/carousel.js";

package/dist/components/ui/carousel.js

@@ -1,2 +1,2 @@
 "use client";
-export * from "../data-display/carousel.js";
+export * from "../../lab/carousel.js";

package/dist/components/ui/index.d.ts

@@ -1,7 +1,13 @@
+/**
+ * @deprecated `@godxjp/ui/ui` is the v31 shadcn-style alias, kept in v32 as RE-EXPORTS ONLY
+ * (#1223): every implementation lives in its group (`@godxjp/ui/general`, `/data-entry`,
+ * `/data-display`, `/feedback`, `/layout`, `/navigation`) — import from there. No file under
+ * `src/components/ui/` may hold an implementation again.
+ */
 export * from "./alert.js";
 export * from "./alert-dialog.js";
-export * from "./aspect-ratio.js";
-export * from "./avatar.js";
+export * from "../layout/aspect-ratio.js";
+export * from "../data-display/avatar.js";
 export * from "./badge.js";
 export * from "./button.js";
 export * from "./calendar.js";
@@ -13,7 +19,7 @@ export * from "./command.js";
 export * from "./resizable.js";
 export * from "./date-picker.js";
 export * from "./dialog.js";
-export { Separator } from "./separator.js";
+export { Separator } from "../layout/separator.js";
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "../feedback/tooltip.js";
 export * from "./dropdown-menu.js";
 export * from "./input.js";
@@ -33,6 +39,6 @@ export * from "./table.js";
 export * from "./tabs.js";
 export * from "./textarea.js";
 export * from "./time-picker.js";
-export * from "./toggle.js";
-export * from "./toggle-group.js";
+export * from "../data-entry/toggle.js";
+export * from "../data-entry/toggle-group.js";
 export * from "./upload.js";

package/dist/components/ui/index.js

@@ -1,8 +1,8 @@
 "use client";
 export * from "./alert.js";
 export * from "./alert-dialog.js";
-export * from "./aspect-ratio.js";
-export * from "./avatar.js";
+export * from "../layout/aspect-ratio.js";
+export * from "../data-display/avatar.js";
 export * from "./badge.js";
 export * from "./button.js";
 export * from "./calendar.js";
@@ -14,7 +14,7 @@ export * from "./command.js";
 export * from "./resizable.js";
 export * from "./date-picker.js";
 export * from "./dialog.js";
-import { Separator } from "./separator.js";
+import { Separator } from "../layout/separator.js";
 import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "../feedback/tooltip.js";
 export * from "./dropdown-menu.js";
 export * from "./input.js";
@@ -34,8 +34,8 @@ export * from "./table.js";
 export * from "./tabs.js";
 export * from "./textarea.js";
 export * from "./time-picker.js";
-export * from "./toggle.js";
-export * from "./toggle-group.js";
+export * from "../data-entry/toggle.js";
+export * from "../data-entry/toggle-group.js";
 export * from "./upload.js";
 export {
   Separator,

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": "31.31.8",
+  "version": "32.0.1",
   "targetSize": {
     "standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
     "min": 24,
@@ -17,7 +17,7 @@
           "badge",
           "date-picker",
           "input",
-          "tag-input",
+          "select-tags-inline",
           "textarea",
           "time-picker"
         ]

package/dist/email/brand-mark.d.ts

@@ -32,8 +32,9 @@ export interface EmailBrandMarkOptions {
     /** Internal glyph fill. Default `EMAIL_COLORS.brandForeground`. */
     glyphColor?: EmailHex;
     /**
-     * Accessible name. Pass `""` for a decorative mark that sits next to a readable wordmark — the
-     * markup then carries `alt=""` / `aria-hidden` instead of a redundant announcement.
+     * Accessible name — the product name, from the caller or the active preset's `emailBrandLabel`.
+     * There is no default name (v32, gh#1220): omitted or `""`, the mark is decorative and carries
+     * `aria-hidden` instead of an announcement, which is right beside a readable wordmark.
      */
     label?: string;
 }

package/dist/email/brand-mark.js

@@ -32,7 +32,7 @@ function options(o = {}) {
     height: o.height ?? DEFAULT_HEIGHT,
     color: o.color ?? EMAIL_COLORS.brand,
     glyphColor: o.glyphColor ?? EMAIL_COLORS.brandForeground,
-    label: o.label ?? "GoDX"
+    label: o.label ?? ""
   };
 }
 const attr = (value) => value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");

package/dist/email/color.d.ts

@@ -41,3 +41,10 @@ export declare const EMAIL_COLORS: Readonly<Record<EmailColorToken, EmailHex>>;
  * that honour it — never as the only palette, since most clients do not.
  */
 export declare const EMAIL_COLORS_DARK: Readonly<Record<EmailColorToken, EmailHex>>;
+/**
+ * The GoDX preset's email palette (v32.0.1, gh#1228): the same roles as {@link EMAIL_COLORS}, with
+ * primary / brand / focus taken from `src/themes/godx-tokens.css` — what the GoDX web preset paints.
+ */
+export declare const EMAIL_COLORS_GODX: Readonly<Record<EmailColorToken, EmailHex>>;
+/** The GoDX preset's dark email palette. */
+export declare const EMAIL_COLORS_GODX_DARK: Readonly<Record<EmailColorToken, EmailHex>>;

package/dist/email/color.js

@@ -1,4 +1,9 @@
-import { EMAIL_COLOR_SOURCE, EMAIL_COLOR_SOURCE_DARK } from "./tokens.generated.js";
+import {
+  EMAIL_COLOR_SOURCE,
+  EMAIL_COLOR_SOURCE_DARK,
+  EMAIL_COLOR_SOURCE_GODX,
+  EMAIL_COLOR_SOURCE_GODX_DARK
+} from "./tokens.generated.js";
 const TRIPLET = /^\s*(-?\d+(?:\.\d+)?)\s+(\d+(?:\.\d+)?)%\s+(\d+(?:\.\d+)?)%\s*$/;
 const channel = (n) => Math.round(Math.min(255, Math.max(0, n * 255))).toString(16).padStart(2, "0");
 function hslToHex(triplet) {
@@ -30,8 +35,16 @@ const EMAIL_COLORS = resolve(
 const EMAIL_COLORS_DARK = resolve(
   EMAIL_COLOR_SOURCE_DARK
 );
+const EMAIL_COLORS_GODX = resolve(
+  EMAIL_COLOR_SOURCE_GODX
+);
+const EMAIL_COLORS_GODX_DARK = resolve(
+  EMAIL_COLOR_SOURCE_GODX_DARK
+);
 export {
   EMAIL_COLORS,
   EMAIL_COLORS_DARK,
+  EMAIL_COLORS_GODX,
+  EMAIL_COLORS_GODX_DARK,
   hslToHex
 };

package/dist/email/index.d.ts

@@ -5,12 +5,12 @@
  * data export of literal `#rrggbb` / `px` values plus the canonical brand-mark markup. ## The
  * no-drift guarantee Nothing here is hand-typed.
  */
-export { hslToHex, EMAIL_COLORS, EMAIL_COLORS_DARK, type EmailColorToken, type EmailHex, } from "./color.js";
+export { hslToHex, EMAIL_COLORS, EMAIL_COLORS_DARK, EMAIL_COLORS_GODX, EMAIL_COLORS_GODX_DARK, type EmailColorToken, type EmailHex, } from "./color.js";
 export { EMAIL_SHELL, EMAIL_TYPOGRAPHY, EMAIL_CTA, EMAIL_FOOTER, EMAIL_FOCUS, EMAIL_MOBILE, type EmailTokenName, type EmailShellTokens, type EmailTypographyTokens, type EmailCtaTokens, type EmailFooterTokens, type EmailFocusTokens, type EmailMobileTokens, } from "./geometry.js";
 export { EMAIL_BRAND_MARK, EMAIL_BRAND_MARK_VIEWBOX, EMAIL_BRAND_MARK_CAPSULE, EMAIL_BRAND_MARK_GLYPH, emailBrandMarkSvg, emailBrandMarkDataUri, emailBrandMarkTableHtml, roundedRectPath, type EmailBrandMark, type EmailBrandMarkOptions, type EmailBrandMarkRect, } from "./brand-mark.js";
 export { emailInlineStyle, type EmailStyleDeclarations } from "./inline-style.js";
 export { EMAIL_URGENCY, EMAIL_URGENCY_DARK, type EmailUrgencyTokens } from "./urgency.js";
-export { EMAIL_COLOR_SOURCE, EMAIL_COLOR_SOURCE_DARK, EMAIL_GEOMETRY_SOURCE, type EmailColorSource, } from "./tokens.generated.js";
+export { EMAIL_COLOR_SOURCE, EMAIL_COLOR_SOURCE_DARK, EMAIL_COLOR_SOURCE_GODX, EMAIL_COLOR_SOURCE_GODX_DARK, EMAIL_GEOMETRY_SOURCE, type EmailColorSource, } from "./tokens.generated.js";
 import { EMAIL_COLORS, EMAIL_COLORS_DARK } from "./color.js";
 import { EMAIL_SHELL, EMAIL_TYPOGRAPHY, EMAIL_CTA, EMAIL_FOOTER, EMAIL_FOCUS, EMAIL_MOBILE } from "./geometry.js";
 import { EMAIL_BRAND_MARK } from "./brand-mark.js";
@@ -36,4 +36,12 @@ export declare const EMAIL_TOKENS: EmailTokens;
  * cannot import ES modules (Blade, Twig, Liquid, Handlebars on another runtime). Write it to a
  * file in the build step and read it from the template layer.
  */
+/**
+ * The GoDX preset for email (v32.0.1, gh#1228): the email counterpart of `godxPreset` +
+ * `themes/godx.css`. Same geometry; colours from {@link EMAIL_COLORS_GODX}. The brand mark's label
+ * has no default since v32 — pass {@link EMAIL_BRAND_LABEL_GODX} as `label` for the GoDX mark.
+ */
+export declare const EMAIL_TOKENS_GODX: EmailTokens;
+/** The GoDX mark's accessible name: `emailBrandMarkSvg({ label: EMAIL_BRAND_LABEL_GODX, color: EMAIL_COLORS_GODX.brand })`. */
+export declare const EMAIL_BRAND_LABEL_GODX = "GoDX";
 export declare const EMAIL_TOKENS_JSON: string;

package/dist/email/index.js

@@ -1,7 +1,9 @@
 import {
   hslToHex,
   EMAIL_COLORS,
-  EMAIL_COLORS_DARK
+  EMAIL_COLORS_DARK,
+  EMAIL_COLORS_GODX,
+  EMAIL_COLORS_GODX_DARK
 } from "./color.js";
 import {
   EMAIL_SHELL,
@@ -26,9 +28,16 @@ import { EMAIL_URGENCY, EMAIL_URGENCY_DARK } from "./urgency.js";
 import {
   EMAIL_COLOR_SOURCE,
   EMAIL_COLOR_SOURCE_DARK,
+  EMAIL_COLOR_SOURCE_GODX,
+  EMAIL_COLOR_SOURCE_GODX_DARK,
   EMAIL_GEOMETRY_SOURCE
 } from "./tokens.generated.js";
-import { EMAIL_COLORS as EMAIL_COLORS2, EMAIL_COLORS_DARK as EMAIL_COLORS_DARK2 } from "./color.js";
+import {
+  EMAIL_COLORS as EMAIL_COLORS2,
+  EMAIL_COLORS_DARK as EMAIL_COLORS_DARK2,
+  EMAIL_COLORS_GODX as EMAIL_COLORS_GODX2,
+  EMAIL_COLORS_GODX_DARK as EMAIL_COLORS_GODX_DARK2
+} from "./color.js";
 import {
   EMAIL_SHELL as EMAIL_SHELL2,
   EMAIL_TYPOGRAPHY as EMAIL_TYPOGRAPHY2,
@@ -52,16 +61,27 @@ const EMAIL_TOKENS = Object.freeze({
   mobile: EMAIL_MOBILE2,
   brandMark: EMAIL_BRAND_MARK2
 });
+const EMAIL_TOKENS_GODX = Object.freeze({
+  ...EMAIL_TOKENS,
+  colors: EMAIL_COLORS_GODX2,
+  colorsDark: EMAIL_COLORS_GODX_DARK2
+});
+const EMAIL_BRAND_LABEL_GODX = "GoDX";
 const EMAIL_TOKENS_JSON = JSON.stringify(EMAIL_TOKENS, null, 2);
 export {
+  EMAIL_BRAND_LABEL_GODX,
   EMAIL_BRAND_MARK,
   EMAIL_BRAND_MARK_CAPSULE,
   EMAIL_BRAND_MARK_GLYPH,
   EMAIL_BRAND_MARK_VIEWBOX,
   EMAIL_COLORS,
   EMAIL_COLORS_DARK,
+  EMAIL_COLORS_GODX,
+  EMAIL_COLORS_GODX_DARK,
   EMAIL_COLOR_SOURCE,
   EMAIL_COLOR_SOURCE_DARK,
+  EMAIL_COLOR_SOURCE_GODX,
+  EMAIL_COLOR_SOURCE_GODX_DARK,
   EMAIL_CTA,
   EMAIL_FOCUS,
   EMAIL_FOOTER,
@@ -69,6 +89,7 @@ export {
   EMAIL_MOBILE,
   EMAIL_SHELL,
   EMAIL_TOKENS,
+  EMAIL_TOKENS_GODX,
   EMAIL_TOKENS_JSON,
   EMAIL_TYPOGRAPHY,
   EMAIL_URGENCY,

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

@@ -7,6 +7,124 @@ export interface EmailColorSource {
 }
 /** Light-scheme colour sources — the canonical transactional-email palette. */
 export declare const EMAIL_COLOR_SOURCE: {
+    readonly background: {
+        readonly cssVar: "--background";
+        readonly hsl: "60 33% 99%";
+    };
+    readonly foreground: {
+        readonly cssVar: "--foreground";
+        readonly hsl: "48 8% 13%";
+    };
+    readonly surface: {
+        readonly cssVar: "--card";
+        readonly hsl: "60 33% 99%";
+    };
+    readonly surfaceForeground: {
+        readonly cssVar: "--card-foreground";
+        readonly hsl: "48 8% 13%";
+    };
+    readonly muted: {
+        readonly cssVar: "--muted";
+        readonly hsl: "45 15% 95%";
+    };
+    readonly mutedForeground: {
+        readonly cssVar: "--muted-foreground";
+        readonly hsl: "44 5% 39%";
+    };
+    readonly border: {
+        readonly cssVar: "--border";
+        readonly hsl: "30 7% 93%";
+    };
+    readonly primary: {
+        readonly cssVar: "--primary";
+        readonly hsl: "240 6% 10%";
+    };
+    readonly primaryForeground: {
+        readonly cssVar: "--primary-foreground";
+        readonly hsl: "60 33% 99%";
+    };
+    readonly focus: {
+        readonly cssVar: "--primary";
+        readonly hsl: "240 6% 10%";
+    };
+    readonly brand: {
+        readonly cssVar: "--brand";
+        readonly hsl: "240 6% 10%";
+    };
+    readonly brandForeground: {
+        readonly cssVar: "--brand-foreground";
+        readonly hsl: "60 33% 99%";
+    };
+    readonly urgency: {
+        readonly cssVar: "--attention";
+        readonly hsl: "25 99% 46%";
+    };
+    readonly urgencyForeground: {
+        readonly cssVar: "--attention-foreground";
+        readonly hsl: "48 8% 13%";
+    };
+};
+/** Dark-scheme colour sources, for `@media (prefers-color-scheme: dark)` overrides. */
+export declare const EMAIL_COLOR_SOURCE_DARK: {
+    readonly background: {
+        readonly cssVar: "--background";
+        readonly hsl: "48 9% 9%";
+    };
+    readonly foreground: {
+        readonly cssVar: "--foreground";
+        readonly hsl: "60 20% 96%";
+    };
+    readonly surface: {
+        readonly cssVar: "--card";
+        readonly hsl: "48 8% 12%";
+    };
+    readonly surfaceForeground: {
+        readonly cssVar: "--card-foreground";
+        readonly hsl: "60 20% 96%";
+    };
+    readonly muted: {
+        readonly cssVar: "--muted";
+        readonly hsl: "45 6% 18%";
+    };
+    readonly mutedForeground: {
+        readonly cssVar: "--muted-foreground";
+        readonly hsl: "44 6% 64%";
+    };
+    readonly border: {
+        readonly cssVar: "--border";
+        readonly hsl: "45 6% 19%";
+    };
+    readonly primary: {
+        readonly cssVar: "--primary";
+        readonly hsl: "0 0% 98%";
+    };
+    readonly primaryForeground: {
+        readonly cssVar: "--primary-foreground";
+        readonly hsl: "48 9% 9%";
+    };
+    readonly focus: {
+        readonly cssVar: "--primary";
+        readonly hsl: "0 0% 98%";
+    };
+    readonly brand: {
+        readonly cssVar: "--brand";
+        readonly hsl: "0 0% 98%";
+    };
+    readonly brandForeground: {
+        readonly cssVar: "--brand-foreground";
+        readonly hsl: "48 9% 9%";
+    };
+    readonly urgency: {
+        readonly cssVar: "--attention";
+        readonly hsl: "25 95% 56%";
+    };
+    readonly urgencyForeground: {
+        readonly cssVar: "--attention-foreground";
+        readonly hsl: "48 9% 9%";
+    };
+};
+/** The GoDX preset's palette for email: foundation :root with src/themes/godx-tokens.css laid over it. */
+export declare const EMAIL_COLOR_SOURCE_GODX: {
     readonly background: {
         readonly cssVar: "--background";
         readonly hsl: "60 33% 99%";
@@ -64,8 +182,8 @@ export declare const EMAIL_COLOR_SOURCE: {
         readonly hsl: "48 8% 13%";
     };
 };
-/** Dark-scheme colour sources, for `@media (prefers-color-scheme: dark)` overrides. */
-export declare const EMAIL_COLOR_SOURCE_DARK: {
+/** The GoDX preset's dark palette for email. */
+export declare const EMAIL_COLOR_SOURCE_GODX_DARK: {
     readonly background: {
         readonly cssVar: "--background";
         readonly hsl: "48 9% 9%";