@godxjp/ui 28.1.0 → 28.2.0

package/dist/components/feedback/alert.d.ts

@@ -1,9 +1,9 @@
 import * as React from "react";
-import type { ToneProp } from "../../props/vocabulary/index.js";
+import type { AlertVariantProp, ToneProp } from "../../props/vocabulary/index.js";
 import type { AlertQueryErrorProp } from "../../props/components/feedback.prop.js";
 export type { AlertProp, AlertProp as AlertProps, AlertTitleProp, AlertTitleProp as AlertTitleProps, AlertContentProp, AlertContentProp as AlertContentProps, AlertDescriptionProp, AlertDescriptionProp as AlertDescriptionProps, AlertActionsProp, AlertActionsProp as AlertActionsProps, AlertQueryErrorProp, AlertQueryErrorProp as AlertQueryErrorProps, } from "../../props/components/feedback.prop.js";
 declare const AlertBase: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-    variant?: import("../../props/index.js").AlertVariantProp;
+    variant?: AlertVariantProp;
     tone?: ToneProp;
     icon?: import("../../props/index.js").IconProp | false;
     onDismiss?: import("../../props/index.js").HandlerProp;
@@ -38,7 +38,7 @@ export declare const AlertActions: React.ForwardRefExoticComponent<React.HTMLAtt
  */
 export declare function AlertQueryError({ error, category, onRetry, onAuthAction, className, }: AlertQueryErrorProp): React.JSX.Element;
 export declare const Alert: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-    variant?: import("../../props/index.js").AlertVariantProp;
+    variant?: AlertVariantProp;
     tone?: ToneProp;
     icon?: import("../../props/index.js").IconProp | false;
     onDismiss?: import("../../props/index.js").HandlerProp;

package/dist/components/feedback/alert.js

@@ -16,6 +16,10 @@ import { Flex } from "../layout/flex.js";
 import { Button } from "../general/button.js";
 const AlertContext = React.createContext("default");
 const ASSERTIVE_TONES = /* @__PURE__ */ new Set(["destructive", "warning"]);
+const roleFor = (variant, tone) => {
+  if (variant === "callout") return "note";
+  return ASSERTIVE_TONES.has(tone) ? "alert" : "status";
+};
 const DEFAULT_ICONS = {
   default: Info,
   destructive: AlertCircle,
@@ -33,7 +37,7 @@ const AlertBase = React.forwardRef(
       "div",
       {
         ref,
-        role: ASSERTIVE_TONES.has(tone) ? "alert" : "status",
+        role: roleFor(variant, tone),
         "data-slot": "alert",
         "data-variant": variant,
         "data-tone": tone,

package/dist/components/feedback/callout.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+import type { CalloutKindProp } from "../../props/vocabulary/index.js";
+export type { CalloutProp, CalloutProp as CalloutProps, } from "../../props/components/feedback.prop.js";
+export declare const Callout: React.ForwardRefExoticComponent<Omit<import("./alert.js").AlertProp, "onDismiss" | "variant"> & {
+    kind?: CalloutKindProp;
+} & React.RefAttributes<HTMLDivElement>> & {
+    Title: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & {
+        className?: import("../../props/index.js").ClassNameProp;
+        children?: import("../../props/index.js").ChildrenProp;
+    } & React.RefAttributes<HTMLParagraphElement>>;
+    Content: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+        className?: import("../../props/index.js").ClassNameProp;
+        children?: import("../../props/index.js").ChildrenProp;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Description: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & {
+        className?: import("../../props/index.js").ClassNameProp;
+        children?: import("../../props/index.js").ChildrenProp;
+    } & React.RefAttributes<HTMLParagraphElement>>;
+    Actions: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+        className?: import("../../props/index.js").ClassNameProp;
+        children?: import("../../props/index.js").ChildrenProp;
+    } & React.RefAttributes<HTMLDivElement>>;
+};

package/dist/components/feedback/callout.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Info, Lightbulb, MessageSquareWarning, OctagonAlert, TriangleAlert } from "lucide-react";
+import { AlertActions, AlertBase, AlertContent, AlertDescription, AlertTitle } from "./alert.js";
+const KINDS = {
+  note: { tone: "info", icon: Info },
+  tip: { tone: "success", icon: Lightbulb },
+  important: { tone: "neutral", icon: MessageSquareWarning },
+  warning: { tone: "warning", icon: TriangleAlert },
+  caution: { tone: "destructive", icon: OctagonAlert }
+};
+const CalloutBase = React.forwardRef(
+  ({ kind = "note", tone, icon, ...props }, ref) => {
+    const preset = KINDS[kind];
+    return (
+      // `variant` sits AFTER the spread, as on Banner: the type already excludes it, and the
+      // runtime half of the same guarantee means a spread of leftover Alert props can never
+      // silently turn this aside back into a live region.
+      /* @__PURE__ */ jsx(
+        AlertBase,
+        {
+          ref,
+          tone: tone ?? preset.tone,
+          icon: icon ?? preset.icon,
+          ...props,
+          variant: "callout"
+        }
+      )
+    );
+  }
+);
+CalloutBase.displayName = "Callout";
+const Callout = Object.assign(CalloutBase, {
+  Title: AlertTitle,
+  Content: AlertContent,
+  Description: AlertDescription,
+  Actions: AlertActions
+});
+export {
+  Callout
+};

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

@@ -10,6 +10,8 @@ export { Skeleton, SkeletonForm, SkeletonRows, SkeletonTable, SkeletonDetail, Sk
 export type { SkeletonProp, SkeletonProps, SkeletonWidth, SkeletonArticleProp, SkeletonArticleProps, SkeletonAvatarProp, SkeletonAvatarProps, SkeletonButtonProp, SkeletonButtonProps, SkeletonFormProp, SkeletonFormProps, SkeletonInputProp, SkeletonInputProps, SkeletonNodeProp, SkeletonNodeProps, SkeletonImageProp, SkeletonImageProps, } from "./skeleton.js";
 export { Banner } from "./banner.js";
 export type { BannerProp, BannerProps } from "./banner.js";
+export { Callout } from "./callout.js";
+export type { CalloutProp, CalloutProps } from "./callout.js";
 export { Alert, AlertTitle, AlertContent, AlertDescription, AlertActions, AlertQueryError, } from "./alert.js";
 export type { AlertProp, AlertProps, AlertTitleProp, AlertTitleProps, AlertContentProp, AlertContentProps, AlertDescriptionProp, AlertDescriptionProps, AlertActionsProp, AlertActionsProps, AlertQueryErrorProp, AlertQueryErrorProps, } from "./alert.js";
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "./tooltip.js";

package/dist/components/feedback/index.js

@@ -57,6 +57,7 @@ import {
   SkeletonImage
 } from "./skeleton.js";
 import { Banner } from "./banner.js";
+import { Callout } from "./callout.js";
 import {
   Alert,
   AlertTitle,
@@ -86,6 +87,7 @@ export {
   AlertQueryError,
   AlertTitle,
   Banner,
+  Callout,
   Dialog,
   DialogAction,
   DialogBody,

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": "28.1.0",
+  "version": "28.2.0",
   "targetSize": {
     "standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
     "min": 24,

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

@@ -1,7 +1,7 @@
 /** Feedback component prop types — @see docs/COMPONENTS.md#feedback */
 import type * as React from "react";
 import type { QueryErrorCategory } from "../../lib/query-error.js";
-import type { AlertVariantProp, AvatarShapeProp, CancelLabelProp, ChildrenProp, ClassNameProp, ConfirmLabelProp, ConfirmVariantProp, DefaultOpenProp, DescriptionProp, HandlerProp, IconProp, OpenProp, OnOpenChangeProp, PendingProp, ShapeProp, SizeProp, ToneProp, TitleProp } from "../vocabulary/index.js";
+import type { AlertVariantProp, AvatarShapeProp, CalloutKindProp, CancelLabelProp, ChildrenProp, ClassNameProp, ConfirmLabelProp, ConfirmVariantProp, DefaultOpenProp, DescriptionProp, HandlerProp, IconProp, OpenProp, OnOpenChangeProp, PendingProp, ShapeProp, SizeProp, ToneProp, TitleProp } from "../vocabulary/index.js";
 /**
  * @see Dialog — the compound modal ROOT.
  *
@@ -87,6 +87,17 @@ export type AlertProp = React.HTMLAttributes<HTMLDivElement> & {
  * `icon`/`icon={false}` owns the leading glyph, `onDismiss` renders the built-in dismiss button.
  */
 export type BannerProp = Omit<AlertProp, "variant">;
+/**
+ * @see Callout — the in-prose aside (`<Alert variant="callout">` with the variant fixed).
+ *
+ * Same contract as {@link AlertProp} minus `variant` and `onDismiss`: a callout is part of the
+ * document the reader is reading, so it is never a live region and never dismissible. `kind` is
+ * the GitHub/Obsidian admonition preset and resolves `tone` + the leading glyph; pass `tone` or
+ * `icon` to override either per instance (gh#765).
+ */
+export type CalloutProp = Omit<AlertProp, "variant" | "onDismiss"> & {
+    kind?: CalloutKindProp;
+};
 /** @see AlertTitle */
 export type AlertTitleProp = React.HTMLAttributes<HTMLParagraphElement> & {
     className?: ClassNameProp;

package/dist/props/registry.d.ts

@@ -537,7 +537,12 @@ export declare const VOCABULARY_REGISTRY: {
     readonly AlertVariantProp: {
         readonly file: "vocabulary/interaction.prop.ts";
         readonly category: "interaction";
-        readonly description: "Alert structural axis: default inline card | banner full-bleed strip";
+        readonly description: "Alert structural axis: default inline card | banner full-bleed strip | callout in-prose aside";
+    };
+    readonly CalloutKindProp: {
+        readonly file: "vocabulary/interaction.prop.ts";
+        readonly category: "interaction";
+        readonly description: "Callout admonition preset: note | tip | important | warning | caution";
     };
     readonly SortDirectionProp: {
         readonly file: "vocabulary/interaction.prop.ts";
@@ -2168,6 +2173,11 @@ export declare const COMPONENT_PROP_REGISTRY: {
         readonly file: "components/feedback.prop.ts";
         readonly vocabulary: readonly ["ToneProp", "IconProp", "OnValueChangeProp", "ClassNameProp", "ChildrenProp"];
     };
+    readonly CalloutProp: {
+        readonly group: "feedback";
+        readonly file: "components/feedback.prop.ts";
+        readonly vocabulary: readonly ["CalloutKindProp", "ToneProp", "IconProp", "ClassNameProp", "ChildrenProp"];
+    };
     readonly AlertTitleProp: {
         readonly group: "feedback";
         readonly file: "components/feedback.prop.ts";

package/dist/props/registry.js

@@ -536,7 +536,12 @@ const VOCABULARY_REGISTRY = {
   AlertVariantProp: {
     file: "vocabulary/interaction.prop.ts",
     category: "interaction",
-    description: "Alert structural axis: default inline card | banner full-bleed strip"
+    description: "Alert structural axis: default inline card | banner full-bleed strip | callout in-prose aside"
+  },
+  CalloutKindProp: {
+    file: "vocabulary/interaction.prop.ts",
+    category: "interaction",
+    description: "Callout admonition preset: note | tip | important | warning | caution"
   },
   SortDirectionProp: {
     file: "vocabulary/interaction.prop.ts",
@@ -2545,6 +2550,11 @@ const COMPONENT_PROP_REGISTRY = {
     file: "components/feedback.prop.ts",
     vocabulary: ["ToneProp", "IconProp", "OnValueChangeProp", "ClassNameProp", "ChildrenProp"]
   },
+  CalloutProp: {
+    group: "feedback",
+    file: "components/feedback.prop.ts",
+    vocabulary: ["CalloutKindProp", "ToneProp", "IconProp", "ClassNameProp", "ChildrenProp"]
+  },
   AlertTitleProp: {
     group: "feedback",
     file: "components/feedback.prop.ts",

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, AppSettingToggleAppearanceProp, ShapeProp, AvatarShapeProp, TextSizeProp, TextToneProp, FontWeightProp, HeadingLevelProp, TextAlignProp, TextWhitespaceProp, TypographyTypeProp, TitleLevelProp, TypographyCopyConfigProp, TypographyEditConfigProp, TypographyEllipsisConfigProp, TypographyActionsConfigProp, SizeProp, ControlStatusProp, ControlVariantProp, FormLayoutProp, DescriptionsLayoutProp, BreakpointProp, ConfirmVariantProp, ToneProp, AlertVariantProp, SortDirectionProp, ColumnAlignProp, SortStateProp, RevealDelayProp, ActivityVariantProp, ActivityAnnounceProp, IconSizeProp, } from "./interaction.prop.js";
+export type { ButtonVariantProp, ButtonSizeProp, BadgeVariantProp, AppSettingPickerAppearanceProp, AppSettingToggleAppearanceProp, ShapeProp, AvatarShapeProp, TextSizeProp, TextToneProp, FontWeightProp, HeadingLevelProp, TextAlignProp, TextWhitespaceProp, TypographyTypeProp, TitleLevelProp, TypographyCopyConfigProp, TypographyEditConfigProp, TypographyEllipsisConfigProp, TypographyActionsConfigProp, SizeProp, ControlStatusProp, ControlVariantProp, FormLayoutProp, DescriptionsLayoutProp, BreakpointProp, ConfirmVariantProp, ToneProp, AlertVariantProp, CalloutKindProp, SortDirectionProp, ColumnAlignProp, SortStateProp, RevealDelayProp, ActivityVariantProp, ActivityAnnounceProp, IconSizeProp, } from "./interaction.prop.js";
 export type { BreadcrumbItemProp, BreadcrumbProp, BreadcrumbItemMenuProp, 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, TableRowSelectionProp, TableExpandableProp, TableSummaryProp, TableScrollProp, TableStickyProp, OnRowProp, TablePaginationProp, TablePaginationPositionProp, DescriptionsColumnProp, DescriptionsSpanProp, DescriptionsItemsProp, } from "./data.prop.js";

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

@@ -258,9 +258,19 @@ export type ToneProp = "default" | "success" | "warning" | "destructive" | "info
  * Alert STRUCTURAL axis (orthogonal to `tone`, which owns colour/semantics):
  * `default` — the inline card (rounded, framed on all sides);
  * `banner` — the full-bleed page/shell attention strip the `Banner` export renders
- * (square corners, hairline block-end rule only, `--banner-*` token geometry).
+ * (square corners, hairline block-end rule only, `--banner-*` token geometry);
+ * `callout` — the in-prose aside the `Callout` export renders (leading rail, `--callout-*`
+ * geometry) and, uniquely, the one value that is NOT a live region: it carries `role="note"`
+ * because it is part of the document being read, not an update to it (gh#765).
  */
-export type AlertVariantProp = "default" | "banner";
+export type AlertVariantProp = "default" | "banner" | "callout";
+/**
+ * Callout kind — the five admonitions GitHub documents (`> [!NOTE]`, `[!TIP]`, `[!IMPORTANT]`,
+ * `[!WARNING]`, `[!CAUTION]`), which Obsidian's lower-case spelling maps onto one-for-one. It is a
+ * PRESET, not a second colour axis: each kind resolves to a `tone` and a leading glyph that
+ * `tone`/`icon` still override per instance.
+ */
+export type CalloutKindProp = "note" | "tip" | "important" | "warning" | "caution";
 /** Sort direction for table columns. */
 export type SortDirectionProp = "asc" | "desc";
 /** Table column text alignment. */

package/dist/styles/alert-layout.css

@@ -62,6 +62,34 @@
     padding-inline-end: calc(var(--banner-space-inset-inline) + var(--space-8));
   }
 
+  [data-slot="alert"][data-variant="callout"] {
+    border-radius: var(--callout-radius);
+    border-block-width: 0;
+    border-inline-end-width: 0;
+    border-inline-start-width: var(--callout-rail-width);
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+    padding-block: var(--callout-space-inset-block);
+    padding-inline: var(--callout-space-inset-inline);
+    margin-block: var(--callout-space-stack);
+  }
+
+  [data-slot="alert"][data-variant="callout"][data-tone="destructive"] {
+    border-color: hsl(var(--destructive));
+  }
+
+  [data-slot="alert"][data-variant="callout"][data-tone="warning"] {
+    border-color: hsl(var(--warning));
+  }
+
+  [data-slot="alert"][data-variant="callout"][data-tone="success"] {
+    border-color: hsl(var(--success));
+  }
+
+  [data-slot="alert"][data-variant="callout"][data-tone="info"] {
+    border-color: hsl(var(--info));
+  }
+
   [data-slot="alert-icon"] {
     width: var(--alert-icon-size);
     height: var(--alert-icon-size);

package/dist/styles/navigation-layout.css

@@ -220,27 +220,27 @@
   }
 
   [data-slot="tabs"][data-variant="card"][data-placement="start"] [data-slot="tabs-list"],
-  [data-slot="tabs"][data-variant="editable-card"][data-placement="start"]
-    [data-slot="tabs-list"] {
+  [data-slot="tabs"][data-variant="editable-card"][data-placement="start"] [data-slot="tabs-list"] {
     box-shadow: inset calc(-1 * var(--tabs-card-rail-border-width)) 0 0 hsl(var(--border));
   }
 
   [data-slot="tabs"][data-variant="card"][data-placement="end"] [data-slot="tabs-list"],
-  [data-slot="tabs"][data-variant="editable-card"][data-placement="end"]
-    [data-slot="tabs-list"] {
+  [data-slot="tabs"][data-variant="editable-card"][data-placement="end"] [data-slot="tabs-list"] {
     box-shadow: inset var(--tabs-card-rail-border-width) 0 0 hsl(var(--border));
   }
 
-  [dir="rtl"] [data-slot="tabs"][data-variant="card"][data-placement="start"]
+  [dir="rtl"]
+    [data-slot="tabs"][data-variant="card"][data-placement="start"]
     [data-slot="tabs-list"],
-  [dir="rtl"] [data-slot="tabs"][data-variant="editable-card"][data-placement="start"]
+  [dir="rtl"]
+    [data-slot="tabs"][data-variant="editable-card"][data-placement="start"]
     [data-slot="tabs-list"] {
     box-shadow: inset var(--tabs-card-rail-border-width) 0 0 hsl(var(--border));
   }
 
-  [dir="rtl"] [data-slot="tabs"][data-variant="card"][data-placement="end"]
-    [data-slot="tabs-list"],
-  [dir="rtl"] [data-slot="tabs"][data-variant="editable-card"][data-placement="end"]
+  [dir="rtl"] [data-slot="tabs"][data-variant="card"][data-placement="end"] [data-slot="tabs-list"],
+  [dir="rtl"]
+    [data-slot="tabs"][data-variant="editable-card"][data-placement="end"]
     [data-slot="tabs-list"] {
     box-shadow: inset calc(-1 * var(--tabs-card-rail-border-width)) 0 0 hsl(var(--border));
   }
@@ -266,6 +266,17 @@
     align-items: flex-start;
   }
 
+  [data-slot="tabs"][data-bodied="true"][data-placement="top"] .ui-tabs-extra[data-side="end"],
+  [data-slot="tabs"][data-bodied="true"][data-placement="bottom"] .ui-tabs-extra[data-side="end"] {
+    margin-inline-end: calc(var(--tabs-panel-space-inset) + var(--tabs-panel-border-width));
+  }
+
+  [data-slot="tabs"][data-bodied="true"][data-placement="top"] .ui-tabs-extra[data-side="start"],
+  [data-slot="tabs"][data-bodied="true"][data-placement="bottom"]
+    .ui-tabs-extra[data-side="start"] {
+    margin-inline-start: calc(var(--tabs-panel-space-inset) + var(--tabs-panel-border-width));
+  }
+
   [data-slot="tabs"][data-bodied="true"] > [data-slot="tabs-panel"],
   [data-slot="tabs"][data-bodied="true"] > [data-slot="tabs-content"] {
     border: var(--tabs-panel-border-width) solid hsl(var(--border));

package/dist/tokens/base.css

@@ -16,6 +16,7 @@
 @import "./components/table.css";
 @import "./components/feedback.css";
 @import "./components/banner.css";
+@import "./components/callout.css";
 @import "./components/sheet.css";
 @import "./components/badge.css";
 @import "./components/navigation.css";

package/dist/tokens/components/callout.css

@@ -0,0 +1,13 @@
+
+
+:root {
+
+  --callout-rail-width: var(--space-1);
+
+  --callout-radius: var(--alert-radius);
+
+  --callout-space-inset-block: var(--space-3);
+  --callout-space-inset-inline: var(--space-4);
+
+  --callout-space-stack: var(--space-4);
+}

package/docs/FRAME-COVERAGE-REPORT.md

@@ -3,8 +3,8 @@
 > Generated by `scripts/frame-coverage.mjs` (issue #163). Do not edit by hand — run `pnpm check:frame-coverage`.
 > Standard: [FRAME-COVERAGE-STANDARD.md](./FRAME-COVERAGE-STANDARD.md). A missing dimension is **UNTESTED**, never a pass.
 
-- Public components: **164**
-- With ≥1 frame: **143** · zero-frame: **21**
+- Public components: **165**
+- With ≥1 frame: **144** · zero-frame: **21**
 - Fully covered (every contract axis declared): **0**
 
 ## UNTESTED — no `/frame/**` route
@@ -118,6 +118,7 @@ Legend: ✓ covered · N/A reasoned skip · · UNTESTED (blank cell = UNTESTED).
 | Sheet | ✓ | N/A | N/A | · | · | · | · | · | · | · |
 | Alert | ✓ | ✓ | N/A | N/A | · | · | · | · | · | · |
 | Banner | ✓ | ✓ | N/A | N/A | · | · | · | · | · | · |
+| Callout | ✓ | · | N/A | N/A | · | · | · | · | · | · |
 | SkeletonTable | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |
 | SkeletonRows | **✗** | N/A | N/A | N/A | · | · | · | · | · | · |
 | Toaster | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |

package/docs/data-entry/toggle-count.tsx

@@ -130,7 +130,10 @@ export default function Demo() {
               Badge variant="secondary" と同じ塗り）、shape="pill" が角、count
               が件数、押下が選択。variant / size / shape はグループに一度だけ書けば context
               で全アイテムに届く。default や outline
-              だとチップは押されるまで透明に見えるので、チップ列にはこの組み合わせを使う。
+              だとチップは押されるまで透明に見えるので、チップ列にはこの組み合わせを使う。タグ列は
+              件数ぶん伸びて桁を越えるので wrap を付ける（320px
+              の桁で計測：無しだと最後のチップが枠の外に 21.41px はみ出し、各ラベルが min-content
+              まで潰れて 129.13px · 有りで 3 行 80.00px、scrollWidth 267→212）。
             </CardDescription>
           </CardHeader>
           <CardContent>
@@ -140,6 +143,7 @@ export default function Demo() {
                 variant="soft"
                 shape="pill"
                 size="xs"
+                wrap
                 value={tags}
                 onValueChange={setTags}
                 aria-label="タグで絞り込み"

package/docs/feedback/callout.tsx

@@ -0,0 +1,220 @@
+import { Callout } from "@godxjp/ui/feedback";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Prose,
+} from "@godxjp/ui/data-display";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+/**
+ * Callout · the aside INSIDE a document body — the Alert primitive with the
+ * structural axis fixed to variant="callout". It is the one variant that is NOT a
+ * live region: role="note", so a page carrying three of them stays silent on load.
+ * kind is the GitHub/Obsidian admonition preset (note/tip/important/warning/caution)
+ * and resolves tone + glyph; tone and icon still override per instance. Geometry —
+ * the leading rail, the prose insets, the block margin — is owned by the --callout-*
+ * tokens, never consumer CSS.
+ */
+export default function Demo() {
+  return (
+    <PageContainer
+      title="Callout"
+      subtitle="kind × tone × icon · the static aside in prose (the announcing presentations are Alert and Banner)"
+    >
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>The five admonitions · every kind</CardTitle>
+            <CardDescription>
+              GitHub&apos;s documented set, which Obsidian&apos;s lower-case spelling maps onto
+              one-for-one. Each kind resolves a tone and its OWN glyph, so the five are told apart
+              without colour (WCAG 1.4.1). important takes the neutral tone on purpose. This system
+              has no purple role, and borrowing info would make it indistinguishable from note.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Callout kind="note">
+                <Callout.Title>補足</Callout.Title>
+                <Callout.Description>
+                  この設定は次回のログインから有効になります。
+                </Callout.Description>
+              </Callout>
+              <Callout kind="tip">
+                <Callout.Title>ヒント</Callout.Title>
+                <Callout.Description>
+                  ⌘K でどの画面からでもコマンドパレットを開けます。
+                </Callout.Description>
+              </Callout>
+              <Callout kind="important">
+                <Callout.Title>重要</Callout.Title>
+                <Callout.Description>
+                  組織の所有者だけが請求情報を変更できます。
+                </Callout.Description>
+              </Callout>
+              <Callout kind="warning">
+                <Callout.Title>注意</Callout.Title>
+                <Callout.Description>
+                  APIキーを再発行すると、既存のキーは直ちに無効になります。
+                </Callout.Description>
+              </Callout>
+              <Callout kind="caution">
+                <Callout.Title>警告</Callout.Title>
+                <Callout.Description>
+                  リポジトリを削除すると、Issue と Pull Request
+                  も一緒に削除されます。この操作は取り消せません。
+                </Callout.Description>
+              </Callout>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>In prose · what it is actually for</CardTitle>
+            <CardDescription>
+              A callout is part of the document being read, not an update to it, which is why it
+              carries role=&quot;note&quot; and never announces. Read this card with a screen
+              reader: the three callouts are reached in document order, and none of them interrupts.
+              An Alert in the same place would announce all three the moment the page loaded.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Prose>
+              <h3>APIキーの再発行</h3>
+              <p>
+                APIキーは組織ごとに発行され、すべての連携サービスで共有されます。ローテーションは四半期ごとを推奨しています。
+              </p>
+              <Callout kind="tip">
+                <Callout.Description>
+                  再発行の前に、連携中のサービス一覧を書き出しておくと復旧が早くなります。
+                </Callout.Description>
+              </Callout>
+              <p>
+                再発行すると新しいキーが即座に有効になり、古いキーは同じ瞬間に失効します。猶予期間はありません。
+              </p>
+              <Callout kind="warning">
+                <Callout.Title>停止時間が発生します</Callout.Title>
+                <Callout.Description>
+                  古いキーを使っている連携は、新しいキーを設定するまで認証に失敗します。
+                </Callout.Description>
+              </Callout>
+              <p>設定画面の「セキュリティ」タブから、いつでも再発行の履歴を確認できます。</p>
+              <Callout kind="note">
+                <Callout.Description>
+                  履歴は90日間保持されます。それより古い記録は監査ログからのみ参照できます。
+                </Callout.Description>
+              </Callout>
+            </Prose>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Title-less · a single paragraph</CardTitle>
+            <CardDescription>
+              Callout.Title is optional, exactly as on Alert. With one line of copy the glyph and
+              the rail carry the kind on their own, and the aside stays the height of its text.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Callout kind="note">
+                <Callout.Description>
+                  Rates are shown in the organization&apos;s billing currency, not the viewer&apos;s
+                  locale.
+                </Callout.Description>
+              </Callout>
+              <Callout kind="caution">
+                <Callout.Description>
+                  Exporting includes personal data; the download link expires after one hour.
+                </Callout.Description>
+              </Callout>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Overrides · tone and icon, per instance</CardTitle>
+            <CardDescription>
+              kind is a preset, not a second colour axis. Pass tone to recolour one aside without
+              changing which admonition it is, or icon={false} to drop the glyph entirely. The tone
+              vocabulary is the SAME one Alert and Banner use.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Callout kind="note" tone="muted">
+                <Callout.Title>Quieter than the default note</Callout.Title>
+                <Callout.Description>
+                  tone=&quot;muted&quot; keeps the note glyph and drops the colour to the neutral
+                  surface.
+                </Callout.Description>
+              </Callout>
+              <Callout kind="important" icon={false}>
+                <Callout.Title>Glyphless</Callout.Title>
+                <Callout.Description>
+                  icon={"{false}"} removes the leading glyph; the rail alone carries the tone.
+                </Callout.Description>
+              </Callout>
+              <Callout kind="tip" tone="info">
+                <Callout.Title>A tip in the note colour</Callout.Title>
+                <Callout.Description>
+                  The lightbulb stays, so this is still readable as a tip without relying on the
+                  hue.
+                </Callout.Description>
+              </Callout>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Long JA / EN / VI copy · 390px wrapping</CardTitle>
+            <CardDescription>
+              The text column wraps inside min-width 0 and the rail stays on the START edge in both
+              directions (logical properties throughout). Narrow this frame to 390px: nothing clips
+              and nothing overflows horizontally.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Callout kind="important">
+                <Callout.Title>
+                  ご契約中のプランでは、組織あたりのAPIリクエスト数に上限が設定されており、上限を超えた分は翌月の請求に自動的に加算されます
+                </Callout.Title>
+                <Callout.Description>
+                  現在の消費量は請求ダッシュボードで確認できます。上限の引き上げをご希望の場合は、担当者にご連絡ください。
+                </Callout.Description>
+              </Callout>
+              <Callout kind="caution">
+                <Callout.Title>
+                  Deleting an organization removes every project, dataset and audit record it owns,
+                  and this cannot be undone by support
+                </Callout.Title>
+                <Callout.Description>
+                  Members lose access immediately. Export anything you need to keep before you
+                  confirm. The deletion runs as soon as the dialog closes.
+                </Callout.Description>
+              </Callout>
+              <Callout kind="tip">
+                <Callout.Title>
+                  Bạn có thể gán vai trò cho cả một nhóm thay vì từng thành viên, và mọi thay đổi về
+                  thành viên của nhóm sẽ tự động áp dụng
+                </Callout.Title>
+                <Callout.Description>
+                  Cách này giữ cho danh sách phân quyền ngắn gọn và dễ kiểm toán hơn nhiều so với
+                  việc cấp quyền riêng lẻ.
+                </Callout.Description>
+              </Callout>
+            </Flex>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "28.1.0",
-  "godxUiMcp": "28.1.0",
+  "version": "28.2.0",
+  "godxUiMcp": "28.2.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",