@k8ordo/ui 1.0.0

package/dist/integrations/openui/library.d.mts

@@ -0,0 +1,151 @@
+import { AccordionProps, AlertProps, AnchorProps, AvatarProps, BadgeProps, BreadcrumbProps, ButtonProps, CardProps, ChevronIconProps, CodeProps, DialogProps, DrawerProps, DropdownMenuProps, FileFieldProps, FormControlProps, FormProps, GridProps, HeadingProps, IconButtonProps, IconProps, ModalProps, PopoverProps, ProgressProps, ScrollLinkedProps, SeparatorProps, SkeletonProps, SpinnerProps, StackProps, StatusIconProps, TableProps, TabsProps, ToastProps, TooltipProps } from "../_shared/schemas.mjs";
+import { ReactNode } from "react";
+import { ComponentRenderProps } from "@openuidev/react-lang";
+//#region src/integrations/openui/library.d.ts
+/**
+ * `@k8ordo/ui/openui`（'use client'）
+ *
+ * `<Renderer library={library} response={openuiLang} />` に渡すライブラリ。
+ * スキーマ・説明・子要素の構成は React 非依存の共有ファクトリ
+ * （`../_shared/openui-defs`）が持ち、ここでは描画関数だけを差し込む。
+ *
+ * サーバーでシステムプロンプトだけ生成したい場合は、
+ * サーバー安全な `@k8ordo/ui/openui/prompt` を使う。
+ *
+ * 合成モデルの違い: 子要素は json-render の slots ではなく、
+ * `z.array(Child.ref)` という型付きサブコンポーネントの prop で表す。
+ * NOTE: OpenUI は自己参照スキーマを安定して扱えないため、Stack/Grid 自身の
+ * 入れ子は非対応（Card には Stack/Grid を入れられる）。
+ */
+type ContainerRenderProps<P> = ComponentRenderProps<P & {
+  children: ReadonlyArray<{
+    typeName: string;
+  }>;
+}>;
+declare const library: import("@openuidev/lang-core").Library<import("react").FC<ComponentRenderProps<{
+  name: string;
+  placeholder?: string | undefined;
+  defaultValue?: string | undefined;
+  invalid?: boolean | undefined;
+  disabled?: boolean | undefined;
+  readOnly?: boolean | undefined;
+}>> | import("react").FC<ComponentRenderProps<{
+  name: string;
+  placeholder?: string | undefined;
+  defaultValue?: string | undefined;
+  invalid?: boolean | undefined;
+  disabled?: boolean | undefined;
+  readOnly?: boolean | undefined;
+  rows?: number | undefined;
+  autoResize?: boolean | undefined;
+}>> | import("react").FC<ComponentRenderProps<{
+  name: string;
+  placeholder?: string | undefined;
+  defaultValue?: string | undefined;
+  invalid?: boolean | undefined;
+  disabled?: boolean | undefined;
+}>> | import("react").FC<ComponentRenderProps<{
+  name: string;
+  defaultValue?: number | undefined;
+  min?: number | undefined;
+  max?: number | undefined;
+  step?: number | undefined;
+  invalid?: boolean | undefined;
+  disabled?: boolean | undefined;
+}>> | import("react").FC<ComponentRenderProps<{
+  name: string;
+  defaultValue?: number | undefined;
+  step?: number | undefined;
+  invalid?: boolean | undefined;
+  disabled?: boolean | undefined;
+  min?: number | undefined;
+  max?: number | undefined;
+}>> | import("react").FC<ComponentRenderProps<{
+  name: string;
+  label: string;
+  defaultChecked?: boolean | undefined;
+  disabled?: boolean | undefined;
+}>> | import("react").FC<ComponentRenderProps<{
+  name: string;
+  label: string;
+  defaultChecked?: boolean | undefined;
+  disabled?: boolean | undefined;
+  invalid?: boolean | undefined;
+  required?: boolean | undefined;
+}>> | import("react").FC<ComponentRenderProps<{
+  name: string;
+  options: {
+    value: string;
+    label: string;
+  }[];
+  defaultValue?: string | undefined;
+  invalid?: boolean | undefined;
+  disabled?: boolean | undefined;
+}>> | import("react").FC<ComponentRenderProps<{
+  name: string;
+  label: string;
+  options: {
+    value: string;
+    label: string;
+  }[];
+  defaultValue?: string | undefined;
+  disabled?: boolean | undefined;
+}>> | import("react").FC<ComponentRenderProps<{
+  name: string;
+  label: string;
+  options: {
+    value: string;
+    label: string;
+    description?: string | undefined;
+    disabled?: boolean | undefined;
+  }[];
+  defaultValue?: string | undefined;
+  invalid?: boolean | undefined;
+  disabled?: boolean | undefined;
+}>> | import("react").FC<ComponentRenderProps<{
+  name: string;
+  options: {
+    value: string;
+    label: string;
+    description?: string | undefined;
+    disabled?: boolean | undefined;
+  }[];
+  defaultValue?: string[] | undefined;
+  invalid?: boolean | undefined;
+  disabled?: boolean | undefined;
+  label: string;
+}>> | import("react").FC<ComponentRenderProps<{
+  name: string;
+  totalPages: number;
+  defaultPage?: number | undefined;
+  prevLabel?: string | undefined;
+  nextLabel?: string | undefined;
+  disabled?: boolean | undefined;
+}>> | import("react").FC<ComponentRenderProps<{
+  name: string;
+  options: {
+    value: string;
+    label: string;
+  }[];
+  defaultValue?: string | undefined;
+  label?: string | undefined;
+}>> | import("react").FC<ComponentRenderProps<{
+  name: string;
+  options: {
+    value: string;
+    label: string;
+  }[];
+  defaultValue?: string[] | undefined;
+  label: string;
+}>> | import("react").FC<ComponentRenderProps<{
+  name: string;
+  options: {
+    value: string;
+    label: string;
+  }[];
+  defaultValue?: string[] | undefined;
+  invalid?: boolean | undefined;
+  disabled?: boolean | undefined;
+}>> | (({ props, renderNode }: ContainerRenderProps<StackProps>) => ReactNode) | (({ props, renderNode }: ContainerRenderProps<GridProps>) => ReactNode) | (({ props, renderNode }: ContainerRenderProps<CardProps>) => ReactNode) | (({ props, renderNode }: ContainerRenderProps<FormProps>) => ReactNode) | (({ props, renderNode }: ContainerRenderProps<ModalProps>) => import("react").JSX.Element) | (({ props, renderNode }: ContainerRenderProps<DialogProps>) => import("react").JSX.Element) | (({ props, renderNode }: ContainerRenderProps<DrawerProps>) => import("react").JSX.Element) | (({ props, renderNode }: ContainerRenderProps<PopoverProps>) => ReactNode) | (({ props }: ComponentRenderProps<TooltipProps>) => ReactNode) | (({ props }: ComponentRenderProps<DropdownMenuProps>) => ReactNode) | (({ props }: ComponentRenderProps<ToastProps>) => import("react").JSX.Element) | (({ props }: ComponentRenderProps<ButtonProps>) => ReactNode) | (({ props }: ComponentRenderProps<IconButtonProps>) => ReactNode) | (({ props }: ComponentRenderProps<BadgeProps>) => ReactNode) | (({ props }: ComponentRenderProps<HeadingProps>) => ReactNode) | (({ props }: ComponentRenderProps<AnchorProps>) => ReactNode) | (({ props }: ComponentRenderProps<AvatarProps>) => ReactNode) | (({ props }: ComponentRenderProps<CodeProps>) => ReactNode) | (({ props }: ComponentRenderProps<IconProps>) => ReactNode) | (({ props }: ComponentRenderProps<ChevronIconProps>) => ReactNode) | (({ props }: ComponentRenderProps<StatusIconProps>) => ReactNode) | (({ props }: ComponentRenderProps<AlertProps>) => ReactNode) | (({ props }: ComponentRenderProps<SpinnerProps>) => ReactNode) | (({ props }: ComponentRenderProps<ProgressProps>) => ReactNode) | (({ props }: ComponentRenderProps<SkeletonProps>) => ReactNode) | (({ props }: ComponentRenderProps<SeparatorProps>) => ReactNode) | (({ props }: ComponentRenderProps<ScrollLinkedProps>) => ReactNode) | (({ props }: ComponentRenderProps<TabsProps>) => ReactNode) | (({ props }: ComponentRenderProps<AccordionProps>) => ReactNode) | (({ props }: ComponentRenderProps<BreadcrumbProps>) => ReactNode) | (({ props }: ComponentRenderProps<TableProps>) => ReactNode) | (({ props }: ComponentRenderProps<FileFieldProps>) => import("react").JSX.Element) | (({ props }: ComponentRenderProps<FormControlProps>) => import("react").JSX.Element)>;
+//#endregion
+export { library };

package/dist/integrations/openui/library.mjs

@@ -0,0 +1,69 @@
+"use client";
+import { buildComponentLibrary } from "../_shared/openui-defs.mjs";
+import { DialogWidget, DrawerWidget, FileFieldWidget, FormControlWidget, ModalWidget, ToastWidget, renderAccordion, renderAlert, renderAnchor, renderAvatar, renderBadge, renderBreadcrumb, renderButton, renderCard, renderChevronIcon, renderCode, renderDropdownMenu, renderForm, renderGrid, renderHeading, renderIcon, renderIconButton, renderPopover, renderProgress, renderScrollLinked, renderSeparator, renderSkeleton, renderSpinner, renderStack, renderStatusIcon, renderTable, renderTabs, renderTooltip } from "../_shared/renderers.mjs";
+import { AutocompleteView, CheckboxCardView, CheckboxGroupView, CheckboxView, ListBoxView, NumberFieldView, PaginationView, PasswordInputView, RadioCardView, RadioView, SelectView, SliderView, SwitchView, TextFieldView, TextareaView } from "./form-views.mjs";
+import { Fragment } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/integrations/openui/library.tsx
+const renderChildren = (children, renderNode) => children.map((child, index) => /* @__PURE__ */ jsx(Fragment, { children: renderNode(child) }, `${child.typeName}-${index}`));
+const library = buildComponentLibrary({
+	Stack: ({ props, renderNode }) => renderStack(props, renderChildren(props.children, renderNode)),
+	Grid: ({ props, renderNode }) => renderGrid(props, renderChildren(props.children, renderNode)),
+	Card: ({ props, renderNode }) => renderCard(props, renderChildren(props.children, renderNode)),
+	Form: ({ props, renderNode }) => renderForm(props, renderChildren(props.children, renderNode)),
+	Modal: ({ props, renderNode }) => /* @__PURE__ */ jsx(ModalWidget, {
+		props,
+		children: renderChildren(props.children, renderNode)
+	}),
+	Dialog: ({ props, renderNode }) => /* @__PURE__ */ jsx(DialogWidget, {
+		props,
+		children: renderChildren(props.children, renderNode)
+	}),
+	Drawer: ({ props, renderNode }) => /* @__PURE__ */ jsx(DrawerWidget, {
+		props,
+		children: renderChildren(props.children, renderNode)
+	}),
+	Popover: ({ props, renderNode }) => renderPopover(props, renderChildren(props.children, renderNode)),
+	Tooltip: ({ props }) => renderTooltip(props),
+	DropdownMenu: ({ props }) => renderDropdownMenu(props),
+	Toast: ({ props }) => /* @__PURE__ */ jsx(ToastWidget, { props }),
+	Button: ({ props }) => renderButton(props),
+	IconButton: ({ props }) => renderIconButton(props),
+	Badge: ({ props }) => renderBadge(props),
+	Heading: ({ props }) => renderHeading(props),
+	Anchor: ({ props }) => renderAnchor(props),
+	Avatar: ({ props }) => renderAvatar(props),
+	Code: ({ props }) => renderCode(props),
+	Icon: ({ props }) => renderIcon(props),
+	ChevronIcon: ({ props }) => renderChevronIcon(props),
+	StatusIcon: ({ props }) => renderStatusIcon(props),
+	Alert: ({ props }) => renderAlert(props),
+	Spinner: ({ props }) => renderSpinner(props),
+	Progress: ({ props }) => renderProgress(props),
+	Skeleton: ({ props }) => renderSkeleton(props),
+	Separator: ({ props }) => renderSeparator(props),
+	ScrollLinked: ({ props }) => renderScrollLinked(props),
+	Tabs: ({ props }) => renderTabs(props),
+	Accordion: ({ props }) => renderAccordion(props),
+	Breadcrumb: ({ props }) => renderBreadcrumb(props),
+	Table: ({ props }) => renderTable(props),
+	TextField: TextFieldView,
+	Textarea: TextareaView,
+	PasswordInput: PasswordInputView,
+	NumberField: NumberFieldView,
+	Slider: SliderView,
+	Checkbox: CheckboxView,
+	Switch: SwitchView,
+	Select: SelectView,
+	Radio: RadioView,
+	RadioCard: RadioCardView,
+	CheckboxCard: CheckboxCardView,
+	Pagination: PaginationView,
+	ListBox: ListBoxView,
+	CheckboxGroup: CheckboxGroupView,
+	Autocomplete: AutocompleteView,
+	FileField: ({ props }) => /* @__PURE__ */ jsx(FileFieldWidget, { props }),
+	FormControl: ({ props }) => /* @__PURE__ */ jsx(FormControlWidget, { props })
+});
+//#endregion
+export { library };

package/dist/integrations/openui/prompt.d.mts

@@ -0,0 +1,5 @@
+import { PromptOptions } from "@openuidev/lang-core";
+//#region src/integrations/openui/prompt.d.ts
+declare const prompt: (options?: PromptOptions) => string;
+//#endregion
+export { prompt };

package/dist/integrations/openui/prompt.mjs

@@ -0,0 +1,19 @@
+import { buildComponentLibrary } from "../_shared/openui-defs.mjs";
+//#region src/integrations/openui/prompt.ts
+/**
+* `@k8ordo/ui/openui/prompt`（サーバー安全）
+*
+* OpenUI のシステムプロンプトを生成するためだけのエントリ。React にも描画
+* コードにも依存しないので、RSC のサーバーコンポーネントや API ルートから
+* import して呼べる（json-render の `catalog.prompt()` と対称）。
+*
+* 実際の描画は 'use client' な `@k8ordo/ui/openui`（library）を使う。
+*
+* @example
+* import { prompt } from '@k8ordo/ui/openui/prompt';
+* const systemPrompt = prompt();
+*/
+const promptLibrary = buildComponentLibrary({});
+const prompt = (options) => promptLibrary.prompt(options);
+//#endregion
+export { prompt };

package/dist/internal/clamp.d.mts

@@ -0,0 +1,4 @@
+//#region src/internal/clamp.d.ts
+declare const clamp: (value: number, min: number, max: number) => number;
+//#endregion
+export { clamp };

package/dist/internal/clamp.mjs

@@ -0,0 +1,15 @@
+//#region src/internal/clamp.ts
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+if (import.meta.vitest) describe("clamp", () => {
+	it("minとmaxの間の値の場合はそのまま返す", () => {
+		expect(clamp(5, 0, 10)).toBe(5);
+	});
+	it("minより小さい場合はminを返す", () => {
+		expect(clamp(-5, 0, 10)).toBe(0);
+	});
+	it("maxより大きい場合はmaxを返す", () => {
+		expect(clamp(15, 0, 10)).toBe(10);
+	});
+});
+//#endregion
+export { clamp };

package/dist/internal/to-precision.d.mts

@@ -0,0 +1,4 @@
+//#region src/internal/to-precision.d.ts
+declare const toPrecision: (value: number, precision?: number) => number;
+//#endregion
+export { toPrecision };

package/dist/internal/to-precision.mjs

@@ -0,0 +1,15 @@
+//#region src/internal/to-precision.ts
+const toPrecision = (value, precision) => {
+	const scaleFactor = 10 ** (precision ?? 10);
+	return Math.round(value * scaleFactor) / scaleFactor;
+};
+if (import.meta.vitest) it("数値を指定した桁数に丸める", () => {
+	expect(toPrecision(1.2345, 0)).toBe(1);
+	expect(toPrecision(1.2345, 1)).toBe(1.2);
+	expect(toPrecision(1.2345, 2)).toBe(1.23);
+	expect(toPrecision(1.2345, 3)).toBe(1.235);
+	expect(toPrecision(1.2345, 4)).toBe(1.2345);
+	expect(toPrecision(1.2345, 5)).toBe(1.2345);
+});
+//#endregion
+export { toPrecision };

package/dist/styles/base.css

@@ -0,0 +1,315 @@
+/**
+ * Base layer & custom variants.
+ *
+ * Imported by `index.css`. Part of the token source of truth —
+ * run `pnpm generate:tokens` after editing.
+ */
+
+@layer base {
+  body:has(dialog[open]) {
+    overflow: hidden;
+  }
+
+  dialog,
+  [popover] {
+    overscroll-behavior-block: contain;
+    color: var(--color-fg-base);
+  }
+
+  body {
+    text-spacing-trim: trim-start;
+    text-autospace: normal;
+    line-break: strict;
+    overflow-wrap: anywhere;
+    scrollbar-gutter: stable;
+    font-size: var(--text-md);
+    line-height: var(--text-md--line-height);
+  }
+
+  pre {
+    text-spacing-trim: space-all;
+    text-autospace: no-autospace;
+  }
+
+  time {
+    text-autospace: no-autospace;
+  }
+
+  input:not([type='button'], [type='submit'], [type='reset']),
+  textarea,
+  [contenteditable] {
+    text-autospace: no-autospace;
+  }
+
+  b,
+  strong,
+  em {
+    font-weight: unset;
+  }
+
+  i,
+  cite,
+  em,
+  dfn,
+  var,
+  address {
+    font-style: unset;
+  }
+
+  button,
+  [type='button'],
+  [type='submit'],
+  [type='reset'],
+  ::file-selector-button {
+    touch-action: manipulation;
+  }
+}
+
+@custom-variant dark (&:where(.dark, .dark *));
+@custom-variant light (&:where(.light, .light *));
+
+/* 縦書きモード。`.writing-v` 配下に適用し、`.writing-h` 配下のアイランドでは無効化する */
+@custom-variant vertical (
+  &:where(.writing-v, .writing-v *):not(.writing-h, .writing-h *)
+);
+
+/*
+ * 以下の .ao-* ルールは @layer components に置く。レイヤー外に置くと、
+ * 「ライブラリのルールはすべて @layer 内にあり、レイヤー外の利用側 CSS が
+ * 常に優先される」という styles.css の公開契約（GUIDE.md / changeset /
+ * examples/css-modules）が破れる。utilities レイヤーより弱くなるが、
+ * .ao-* が設定するプロパティは同じ要素の utilities と重複しない。
+ */
+@layer components {
+  /*
+ * Popover（top-layer）の開く時のアニメーション。
+ * :popover-open になった瞬間に keyframe を再生する。安静時の値は上書きしない
+ * （natural=opacity:1）ため固着しない。閉じる時は display:none で即時。
+ * scale は transform ではなく `scale` プロパティを使い、CSS Anchor Positioning
+ * （inset で配置）と干渉させない。
+ */
+  .ao-anim-scale:popover-open {
+    animation: ao-pop-in 0.18s ease;
+  }
+  .ao-anim-fade:popover-open {
+    animation: ao-fade-in 0.15s ease;
+  }
+
+  @keyframes ao-pop-in {
+    from {
+      scale: 0.92;
+    }
+    to {
+      scale: 1;
+    }
+  }
+
+  @keyframes ao-fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  /*
+ * Toast の出入り。出現は下からのスライドイン、退出は data-closing で
+ * 高さ(0fr)・間隔(padding)・不透明度を同時に畳み、後続トーストの詰めも
+ * 1 つの transition で表現する（JS 側は EXIT_MS 経過後に DOM から除去）。
+ */
+  .ao-toast-item {
+    display: grid;
+    grid-template-rows: 1fr;
+    padding-block-start: 1rem;
+    transition:
+      grid-template-rows 0.2s ease,
+      opacity 0.2s ease,
+      padding-block-start 0.2s ease;
+  }
+  .ao-toast-item > * {
+    min-block-size: 0;
+  }
+  .ao-toast-item[data-closing] {
+    grid-template-rows: 0fr;
+    opacity: 0;
+    padding-block-start: 0;
+  }
+  /* 安静時は影(shadow-lg)を切り抜かないよう、畳む間だけ overflow を隠す */
+  .ao-toast-item[data-closing] > * {
+    overflow: hidden;
+  }
+  .ao-toast-enter {
+    animation: ao-toast-in 0.2s ease;
+  }
+
+  @keyframes ao-toast-in {
+    from {
+      opacity: 0;
+      translate: 0 1.5rem;
+    }
+  }
+
+  /*
+ * Modal（<dialog>）の出入り。入場は @starting-style からの transition、
+ * 退場は transition-behavior: allow-discrete による display の遅延で表現する。
+ * overlay を transition に含めることで、退場中も top layer に留まる
+ * （overlay 未対応ブラウザでは退場が即時になる、という段階的劣化）。
+ * scale / translate は transform ではなく個別プロパティを使う（Popover 同様）。
+ */
+  /* allow-discrete は per-transition で指定する。ショートハンド後の別行
+   transition-behavior は lightningcss の宣言並べ替えでリセットされ、
+   本番ビルドだけ退場アニメーションが消える */
+  .ao-modal {
+    opacity: 0;
+    transition:
+      opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+      scale 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+      translate 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+      display 0.2s allow-discrete,
+      overlay 0.2s allow-discrete;
+  }
+  .ao-modal[open] {
+    opacity: 1;
+  }
+  .ao-modal[open]::backdrop {
+    opacity: 1;
+  }
+  .ao-modal::backdrop {
+    opacity: 0;
+    transition:
+      opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+      display 0.2s allow-discrete,
+      overlay 0.2s allow-discrete;
+  }
+  /* overlay 未対応ブラウザ(Safari / Firefox)では close で top layer から即座に
+   外れるため、display の遅延だけが残ると位置がジャンプしたゴーストが
+   0.2s クリック可能なまま残る。退場を本当に即時にする(入場は影響なし) */
+  @supports not (overlay: auto) {
+    .ao-modal:not([open]),
+    .ao-modal:not([open])::backdrop {
+      transition: none;
+    }
+  }
+  @starting-style {
+    .ao-modal[open],
+    .ao-modal[open]::backdrop {
+      opacity: 0;
+    }
+  }
+
+  .ao-modal-center {
+    scale: 0.9;
+  }
+  .ao-modal-center[open] {
+    scale: 1;
+  }
+  .ao-modal-bottom {
+    translate: 0 100%;
+  }
+  .ao-modal-right {
+    translate: 100% 0;
+  }
+  .ao-modal-left {
+    translate: -100% 0;
+  }
+  .ao-modal-bottom[open],
+  .ao-modal-right[open],
+  .ao-modal-left[open] {
+    translate: 0 0;
+  }
+  .ao-modal-right,
+  .ao-modal-left {
+    transition-duration: 0.3s;
+  }
+  @starting-style {
+    .ao-modal-center[open] {
+      scale: 0.9;
+    }
+    .ao-modal-bottom[open] {
+      translate: 0 100%;
+    }
+    .ao-modal-right[open] {
+      translate: 100% 0;
+    }
+    .ao-modal-left[open] {
+      translate: -100% 0;
+    }
+  }
+
+  /*
+ * Tabs の選択インジケータ。選択中のタブを anchor にした単一要素を
+ * inset の transition でスライドさせる（旧 motion layoutId の置き換え）。
+ * position-area は transition できないため inset + anchor() を使う。
+ * self-* キーワードは論理プロパティと合わせて縦書きでも正しい辺に解決される。
+ */
+  .ao-tab-indicator {
+    position: absolute;
+    inset-inline-start: anchor(self-start);
+    inset-inline-end: anchor(self-end);
+    inset-block-start: calc(anchor(self-end) - 0.125rem);
+    block-size: 0.25rem;
+    /* 純装飾。タブ下端やスライド通過中のクリックを横取りしない */
+    pointer-events: none;
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .ao-tab-indicator {
+      transition: inset 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+  }
+  /* anchor positioning 未対応ブラウザでは anchor() が無効になり迷子のバーが
+   残るため隠し、選択タブ側の静的な下線で選択表示を維持する（スライドなし）。
+   box-shadow だと utilities レイヤーの focus-visible リングを潰すため
+   擬似要素 + 論理プロパティで描く（.ao-tab は Tabs.Tab だけに付く） */
+  @supports not (anchor-name: --a) {
+    .ao-tab-indicator {
+      display: none;
+    }
+    .ao-tab[aria-selected='true']::after {
+      content: '';
+      position: absolute;
+      inset-inline: 0;
+      inset-block-end: -0.125rem;
+      block-size: 0.25rem;
+      background: var(--primary-border);
+    }
+  }
+
+  /*
+ * スクロール進捗バー。ルートスクローラーの進捗を scale x に写像する。
+ * @supports 外（Firefox）と container 指定時はコンポーネント側の
+ * scroll リスナーが inline の scale を更新する。ユーザーのスクロールに
+ * 1:1 で追従する機能的表示のため prefers-reduced-motion では無効化しない。
+ */
+  @supports (animation-timeline: scroll()) {
+    .ao-scroll-progress {
+      animation: ao-scroll-grow auto linear;
+      animation-timeline: scroll(root);
+    }
+    @keyframes ao-scroll-grow {
+      from {
+        scale: 0 1;
+      }
+      to {
+        scale: 1 1;
+      }
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ao-anim-scale:popover-open,
+    .ao-anim-fade:popover-open {
+      animation: none;
+    }
+    .ao-toast-enter {
+      animation: none;
+    }
+    .ao-toast-item {
+      transition: none;
+    }
+    .ao-modal,
+    .ao-modal::backdrop {
+      transition: none;
+    }
+  }
+}