@godxjp/ui 33.16.0 → 33.18.0

package/dist/props/registry.d.ts

@@ -464,6 +464,11 @@ export declare const VOCABULARY_REGISTRY: {
         readonly category: "interaction";
         readonly description: "Heading level 1-4 — the semantic element, and the --heading-h* size it takes unless `size` (TextSizeProp) overrides it";
     };
+    readonly HeadingFamilyProp: {
+        readonly file: "vocabulary/interaction.prop.ts";
+        readonly category: "interaction";
+        readonly description: "Heading face display | editorial — editorial reads --font-family-editorial (an opt-in serif for a hero or a public page section), falling back to --font-family-display";
+    };
     readonly TextAlignProp: {
         readonly file: "vocabulary/interaction.prop.ts";
         readonly category: "interaction";
@@ -1686,7 +1691,7 @@ export declare const COMPONENT_PROP_REGISTRY: {
     readonly HeadingProp: {
         readonly group: "general";
         readonly file: "components/general.prop.ts";
-        readonly vocabulary: readonly ["HeadingLevelProp", "TextSizeProp", "TextToneProp", "TextAlignProp", "ClassNameProp"];
+        readonly vocabulary: readonly ["HeadingLevelProp", "HeadingFamilyProp", "TextSizeProp", "TextToneProp", "TextAlignProp", "ClassNameProp"];
     };
     readonly TypographyBlockProp: {
         readonly group: "general";

package/dist/props/registry.js

@@ -463,6 +463,11 @@ const VOCABULARY_REGISTRY = {
     category: "interaction",
     description: "Heading level 1-4 \u2014 the semantic element, and the --heading-h* size it takes unless `size` (TextSizeProp) overrides it"
   },
+  HeadingFamilyProp: {
+    file: "vocabulary/interaction.prop.ts",
+    category: "interaction",
+    description: "Heading face display | editorial \u2014 editorial reads --font-family-editorial (an opt-in serif for a hero or a public page section), falling back to --font-family-display"
+  },
   TextAlignProp: {
     file: "vocabulary/interaction.prop.ts",
     category: "interaction",
@@ -1885,6 +1890,7 @@ const COMPONENT_PROP_REGISTRY = {
     file: "components/general.prop.ts",
     vocabulary: [
       "HeadingLevelProp",
+      "HeadingFamilyProp",
       "TextSizeProp",
       "TextToneProp",
       "TextAlignProp",

package/dist/props/vocabulary/index.d.ts

@@ -2,6 +2,6 @@
 export type { ClassNameProp, ChildrenProp, IdProp, OpenProp, DefaultOpenProp, OnOpenChangeProp, HandlerProp, PendingProp, RequiredProp, DisabledProp, LabelProp, HelperProp, ErrorProp, ErrorBagProp, PlaceholderProp, NameProp, ValueProp, DefaultValueProp, OnValueChangeProp, OnChangeProp, OnClickProp, AsChildProp, FlushProp, WidthProp, ControlWidthProp, AllowClearProp, MaxTagCountProp, MaxTagPlaceholderProp, NotFoundContentProp, PopupMatchWidthProp, } from "./shared.prop.js";
 export type { TitleProp, SubtitleProp, StatusProp, DescriptionProp, ExtraProp, FooterProp, ActionProp, IconProp, ConfirmLabelProp, CancelLabelProp, ActionsProp, EmptyMessageProp, } from "./content.prop.js";
 export type { PageDensityProp, PageContainerVariantProp, CenteredShellWidthProp, CenteredShellAlignProp, CenteredShellPresetProp, ErrorSurfaceModeProp, ErrorSurfaceStatusProp, AuthShellPresetProp, MobileShellHeightProp, MobileShellWidthProp, OrientationProp, TableDensityProp, DensityProp, GapNameProp, PadProp, PadRawProp, PadSides, GapProp, GapStepProp, } from "./layout.prop.js";
-export type { ButtonVariantProp, ButtonSizeProp, BadgeVariantProp, AppSettingPickerAppearanceProp, AppSettingCycleAppearanceProp, ShapeProp, AvatarShapeProp, TextSizeProp, TextToneProp, FontWeightProp, HeadingLevelProp, TextAlignProp, TextWhitespaceProp, TextBreakProp, TypographyTypeProp, TypographyCopyConfigProp, TypographyEditConfigProp, TypographyEllipsisConfigProp, TypographyActionsConfigProp, SizeProp, ControlStatusProp, ControlVariantProp, FormLayoutProp, DescriptionsLayoutProp, BreakpointProp, ConfirmVariantProp, ToneProp, AlertVariantProp, CalloutKindProp, SortDirectionProp, ColumnAlignProp, SortStateProp, RevealDelayProp, RevealTriggerProp, InViewAmountProp, ActivityVariantProp, ActivityAnnounceProp, IconSizeProp, } from "./interaction.prop.js";
+export type { ButtonVariantProp, ButtonSizeProp, BadgeVariantProp, AppSettingPickerAppearanceProp, AppSettingCycleAppearanceProp, ShapeProp, AvatarShapeProp, TextSizeProp, TextToneProp, FontWeightProp, HeadingLevelProp, HeadingFamilyProp, TextAlignProp, TextWhitespaceProp, TextBreakProp, TypographyTypeProp, TypographyCopyConfigProp, TypographyEditConfigProp, TypographyEllipsisConfigProp, TypographyActionsConfigProp, SizeProp, ControlStatusProp, ControlVariantProp, FormLayoutProp, DescriptionsLayoutProp, BreakpointProp, ConfirmVariantProp, ToneProp, AlertVariantProp, CalloutKindProp, SortDirectionProp, ColumnAlignProp, SortStateProp, RevealDelayProp, RevealTriggerProp, InViewAmountProp, ActivityVariantProp, ActivityAnnounceProp, IconSizeProp, } from "./interaction.prop.js";
 export type { BreadcrumbItemProp, BreadcrumbProp, BreadcrumbCurrentItemProp, BreadcrumbItemMenuProp, BreadcrumbItemEllipsisProp, BreadcrumbItemMenuEntryProp, BreadcrumbSeparatorProp, BreadcrumbItemRenderProp, } from "./navigation.prop.js";
 export type { GetRowIdProp, GetRowLabelProp, OnRowClickProp, ColumnDefProp, TablePresetProp, TableColumnPriorityProp, TableCellIndentProp, SelectedIdsProp, OnSelectChangeProp, OnTableDensityChangeProp, TableRowToneProp, RowToneProp, OnSortChangeProp, OnSearchChangeProp, OnClearFiltersProp, HasActiveFiltersProp, StickyProp, ColumnFixedProp, ColumnFilterValueProp, ColumnFilterItemProp, ColumnFilterStateProp, OnColumnFilterChangeProp, ColumnCompareProp, ColumnSorterProp, TableSelectionItemProp, TableSelectionBuiltInProp, TableSelectAllMatchingProp, TableRowSelectionProp, TableExpandableProp, TableSummaryProp, TableScrollProp, TableStickyProp, OnRowProp, TablePaginationProp, TablePaginationPositionProp, DescriptionsColumnProp, DescriptionsSpanProp, DescriptionsItemsProp, } from "./data.prop.js";

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

@@ -82,6 +82,12 @@ export type TextToneProp = "default" | "muted" | "primary" | "success" | "warnin
 export type FontWeightProp = "regular" | "medium" | "semibold" | "bold";
 /** Heading level — drives both the `--heading-h*` size token and the semantic `<h1..h4>` element. */
 export type HeadingLevelProp = 1 | 2 | 3 | 4;
+/**
+ * Which heading face — `display` (default: --font-family-display, every heading) or `editorial`
+ * (--font-family-editorial: an opt-in magazine/serif face for a hero or a public page section,
+ * falling back to the display face until a theme names one).
+ */
+export type HeadingFamilyProp = "display" | "editorial";
 /** Inline text alignment (logical, RTL-safe). */
 export type TextAlignProp = "start" | "center" | "end";
 /**

package/dist/styles/badge-layout.css

@@ -42,6 +42,7 @@
 
   [data-slot="badge"][data-tabular] {
     font-variant-numeric: tabular-nums;
+    font-family: var(--font-family-tabular, inherit);
   }
 
   [data-slot="badge"][data-tinted] {

package/dist/styles/base.css

@@ -251,3 +251,11 @@
     font-family: var(--font-family-mono);
   }
 }
+
+@layer base {
+  @media print {
+    :root {
+      color-scheme: light;
+    }
+  }
+}

package/dist/styles/card-layout.css

@@ -734,3 +734,11 @@
     border-block: var(--stroke-hairline) solid hsl(var(--border));
   }
 }
+
+@layer components {
+  @media print {
+    [data-slot="card"] {
+      break-inside: avoid;
+    }
+  }
+}

package/dist/styles/dialog-layout.css

@@ -53,7 +53,9 @@
 
   [data-slot="dialog-content"] {
     position: fixed;
-    inset-inline-start: 50%;
+
+    inset-inline: 0;
+    margin-inline: auto;
     top: 50%;
     z-index: var(--overlay-z-index);
 
@@ -67,12 +69,14 @@
 
     --tw-animation-duration: var(--dialog-motion-duration, var(--duration-fast));
     max-width: none;
-    transform: translate(-50%, -50%);
+    transform: translateY(-50%);
     gap: var(--dialog-space-gap);
     border: var(--stroke-hairline) solid hsl(var(--border));
 
     background-color: var(--dialog-surface-background, hsl(var(--background)));
 
+    border-radius: var(--dialog-radius, 0px);
+
     color: hsl(var(--foreground));
     padding: var(--dialog-space-inset);
 
@@ -82,7 +86,7 @@
 
   @media (min-width: 640px) {
     [data-slot="dialog-content"] {
-      border-radius: var(--radius-lg, var(--radius));
+      border-radius: var(--dialog-radius, var(--radius-lg, var(--radius)));
     }
   }
 

package/dist/styles/layers.json

@@ -1,5 +1,5 @@
 {
-  "version": "33.16.0",
+  "version": "33.18.0",
   "generatedBy": "scripts/gen-style-layers.mjs — do not edit by hand; run `pnpm gen:style-layers`",
   "base": "base.css",
   "fonts": "fonts.css",

package/dist/styles/layout.css

@@ -951,6 +951,8 @@
     );
     font-weight: var(--font-weight-semibold);
     line-height: var(--page-title-line-height-display);
+
+    font-family: var(--font-family-editorial, var(--font-family-display));
     text-wrap: balance;
     overflow-wrap: normal;
   }

package/dist/styles/logo-layout.css

@@ -225,21 +225,27 @@
   display: none;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root:not([data-theme="light"]) [data-slot="logo-artwork"][data-scheme="light"] {
-    display: none;
-  }
-  :root:not([data-theme="light"]) [data-slot="logo-artwork"][data-scheme="dark"] {
-    display: block;
+@media not print {
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]) [data-slot="logo-artwork"][data-scheme="light"] {
+      display: none;
+    }
+    :root:not([data-theme="light"]) [data-slot="logo-artwork"][data-scheme="dark"] {
+      display: block;
+    }
   }
 }
 
-.dark [data-slot="logo-artwork"][data-scheme="light"],
-:root[data-theme="dark"] [data-slot="logo-artwork"][data-scheme="light"] {
-  display: none;
+@media not print {
+  .dark [data-slot="logo-artwork"][data-scheme="light"],
+  :root[data-theme="dark"] [data-slot="logo-artwork"][data-scheme="light"] {
+    display: none;
+  }
 }
 
-.dark [data-slot="logo-artwork"][data-scheme="dark"],
-:root[data-theme="dark"] [data-slot="logo-artwork"][data-scheme="dark"] {
-  display: block;
+@media not print {
+  .dark [data-slot="logo-artwork"][data-scheme="dark"],
+  :root[data-theme="dark"] [data-slot="logo-artwork"][data-scheme="dark"] {
+    display: block;
+  }
 }

package/dist/styles/shell-layout.css

@@ -2086,7 +2086,14 @@
     min-inline-size: var(--topbar-item-min-width);
   }
 
-  .ui-topbar-start > :last-child:not(:is(button, a, [role="button"], .ui-button)) {
+  .ui-topbar-start:has(
+    > :last-child:is(button, a, [role="button"], .ui-button, .ui-topbar-search)
+  ) {
+    min-inline-size: min-content;
+  }
+
+  .ui-topbar-start
+    > :last-child:not(:is(button, a, [role="button"], .ui-button, .ui-topbar-search)) {
     max-width: 100%;
     min-width: 0;
     flex: 0 1 auto;
@@ -2804,3 +2811,35 @@
     grid-template-areas: "topbar" "main" "footer";
   }
 }
+
+@layer components {
+  @media print {
+    html,
+    body,
+    .app-root,
+    .app-root > .app-main {
+      background: hsl(var(--background));
+    }
+    .app-root {
+      display: block;
+      height: auto;
+      min-height: 0;
+      overflow: visible;
+    }
+    .app-root[data-responsive-navigation]
+      > :is(.app-sidebar, .app-topbar, .app-nav-rail, .app-footer),
+    .app-breadcrumb,
+    .app-mobile-nav-drawer {
+      display: none;
+    }
+    .app-root > .app-main {
+      width: auto;
+      max-width: none;
+      height: auto;
+      min-height: 0;
+      overflow: visible;
+      contain: none;
+      background-image: none;
+    }
+  }
+}

package/dist/styles/table-layout.css

@@ -189,9 +189,19 @@
     vertical-align: middle;
   }
 
+  [data-slot="table-caption"] {
+    caption-side: top;
+    padding-block: var(--table-caption-space-y, var(--space-2));
+    padding-inline: var(--table-cell-space-x, var(--space-section-active));
+    color: hsl(var(--table-caption-color, var(--muted-foreground)));
+    font-size: var(--table-caption-font-size, var(--font-size-sm, var(--font-size-base)));
+    text-align: start;
+  }
+
   :is([data-slot="table-head"], [data-slot="table-cell"])[data-numeric] {
     font-variant-numeric: tabular-nums;
     text-align: end;
+    font-family: var(--font-family-tabular, inherit);
   }
 
   :is([data-slot="table-head"], [data-slot="table-cell"])[data-align="start"] {
@@ -1048,6 +1058,11 @@
       display: none;
     }
 
+    [data-collapse-below="sm"] [data-slot="table-caption"] {
+      display: block;
+      padding-inline: var(--table-stacked-collection-card-padding-x, var(--card-space-inset));
+    }
+
     [data-collapse-below="sm"] [data-slot="table"] > tbody {
       display: block;
     }
@@ -1107,6 +1122,11 @@
       display: none;
     }
 
+    [data-collapse-below="md"] [data-slot="table-caption"] {
+      display: block;
+      padding-inline: var(--table-stacked-collection-card-padding-x, var(--card-space-inset));
+    }
+
     [data-collapse-below="md"] [data-slot="table"] > tbody {
       display: block;
     }
@@ -1164,6 +1184,11 @@
       display: none;
     }
 
+    [data-collapse-below="lg"] [data-slot="table-caption"] {
+      display: block;
+      padding-inline: var(--table-stacked-collection-card-padding-x, var(--card-space-inset));
+    }
+
     [data-collapse-below="lg"] [data-slot="table"] > tbody {
       display: block;
     }
@@ -1221,6 +1246,11 @@
       display: none;
     }
 
+    [data-collapse-below="xl"] [data-slot="table-caption"] {
+      display: block;
+      padding-inline: var(--table-stacked-collection-card-padding-x, var(--card-space-inset));
+    }
+
     [data-collapse-below="xl"] [data-slot="table"] > tbody {
       display: block;
     }

package/dist/styles/text-layout.css

@@ -211,6 +211,7 @@
 
   [data-slot="text"][data-tabular] {
     font-variant-numeric: tabular-nums;
+    font-family: var(--font-family-tabular, inherit);
   }
   [data-slot="text"][data-mono] {
     font-family: var(--font-family-mono, ui-monospace, "SFMono-Regular", monospace);
@@ -223,6 +224,10 @@
     line-height: var(--line-height-tight);
   }
 
+  [data-slot="heading"][data-family="editorial"] {
+    font-family: var(--font-family-editorial, var(--font-family-display));
+  }
+
   [data-slot="heading"][data-level="1"]:not([data-size]) {
     font-size: var(
       --heading-h1,