@godxjp/ui 31.7.0 → 31.9.0

package/dist/i18n/messages/ja.json

@@ -56,7 +56,8 @@
     },
     "colorPicker": {
       "ariaLabel": "色を選択",
-      "hexLabel": "カラーコード（HEX）"
+      "hexLabel": "カラーコード（HEX）",
+      "presetEmpty": "空"
     },
     "upload": {
       "dropzoneLabel": "ファイルをアップロード",
@@ -123,7 +124,8 @@
       "clear": "選択をクリア",
       "loading": "読み込み中…",
       "empty": "該当なし",
-      "error": "選択肢を読み込めませんでした"
+      "error": "選択肢を読み込めませんでした",
+      "create": "「{value}」を作成"
     },
     "selection": {
       "overflow": "他{count}件"

package/dist/i18n/messages/vi.json

@@ -56,7 +56,8 @@
     },
     "colorPicker": {
       "ariaLabel": "Chọn màu",
-      "hexLabel": "Mã màu hex"
+      "hexLabel": "Mã màu hex",
+      "presetEmpty": "Trống"
     },
     "upload": {
       "dropzoneLabel": "Tải file lên",
@@ -123,7 +124,8 @@
       "clear": "Xóa lựa chọn",
       "loading": "Đang tải…",
       "empty": "Không có kết quả",
-      "error": "Không tải được lựa chọn"
+      "error": "Không tải được lựa chọn",
+      "create": "Tạo “{value}”"
     },
     "selection": {
       "overflow": "+{count}"

package/dist/lib/ime.d.ts

@@ -0,0 +1,12 @@
+import type * as React from "react";
+/**
+ * TRUE WHILE AN IME IS COMPOSING (gh#1054). Between `compositionstart` and `compositionend` a
+ * Japanese / Chinese / Korean IME holds a CANDIDATE, and the Enter that confirms the conversion is
+ * delivered as an ordinary `keydown` — acting on it creates a tag, submits a form or picks an option
+ * from a half-typed reading. Every Enter (and Escape/Tab) handler in the kit asks this first.
+ *
+ * `isComposing` is the standards answer; `keyCode === 229` is the legacy one some browsers
+ * (Safari after `compositionend`, older Chromium on Windows) still report instead. Accepts a React
+ * synthetic event or a native `KeyboardEvent`.
+ */
+export declare function isImeComposing(event: React.KeyboardEvent | KeyboardEvent): boolean;

package/dist/lib/ime.js

@@ -0,0 +1,7 @@
+function isImeComposing(event) {
+  const native = "nativeEvent" in event ? event.nativeEvent : event;
+  return native.isComposing || native.keyCode === 229;
+}
+export {
+  isImeComposing
+};

package/dist/props/components/data-entry.prop.d.ts

@@ -1114,6 +1114,39 @@ export type ColorPickerProp = FieldA11yProps & {
     className?: ClassNameProp;
     id?: IdProp;
     showHexInput?: boolean;
+    /**
+     * antd `presets` (gh#1055) — named groups of fixed swatches under the picker. Each group is a
+     * collapsible section (antd renders a ghost `Collapse`); `defaultOpen` (default `true`) is its
+     * initial state and `key` its stable identity (falls back to the index). Each swatch is a radio
+     * named by its hex; the one equal to `value` (case- and shorthand-insensitive) is checked.
+     * Colours are hex strings (`#rgb`/`#rrggbb`) because the value is — antd also takes a colour
+     * object or a gradient, which this picker has no model for.
+     */
+    presets?: ColorPickerPresetProp[];
+    /**
+     * antd `panelRender` — replace the picker's body. `panel` is the default body (the swatch + hex
+     * row, then the presets); `extra.components` hands back each part on its own, so
+     * `panelRender={(_, { components: { Presets } }) => <Presets />}` is the PRESETS-ONLY mode —
+     * the palette with no free-colour entry (antd's own recipe for it). The hidden `name` input
+     * is outside the panel and always submits.
+     */
+    panelRender?: (panel: React.ReactNode, extra: {
+        components: {
+            Picker: React.FC;
+            Presets: React.FC;
+        };
+    }) => React.ReactNode;
+};
+/** One `ColorPicker presets` group — antd `PresetsItem` (gh#1055). */
+export type ColorPickerPresetProp = {
+    /** Group heading; also names the group's radiogroup. */
+    label: LabelProp;
+    /** Hex colours (`#rgb` / `#rrggbb`), in display order. Empty → antd's "Empty" line. */
+    colors: string[];
+    /** Initial expanded state of the group (antd default `true`). */
+    defaultOpen?: DefaultOpenProp;
+    /** Stable identity of the group (antd `key`); defaults to its index. */
+    key?: React.Key;
 };
 /** A SearchSelect option row. `group` buckets it under an optgroup-style heading. */
 export type SearchSelectOptionProp = {
@@ -1503,6 +1536,14 @@ export type SearchSelectBaseProp = {
      * every call site that has ever relied on the default expects a label search.
      */
     optionFilterProp?: "label" | "value" | "sublabel";
+    /**
+     * Match typed text case-SENSITIVELY (gh#1053). Default `false`: the built-in filter, the
+     * `mode="tags"` create row and a `tokenSeparators` run all compare case-folded, so typing "bug"
+     * when "Bug" exists finds "Bug" and never offers a duplicate. antd's filter folds case too; its
+     * create row compares exactly, which is the deviation `true` restores. A custom `filterOption`
+     * owns its own comparison and is not affected.
+     */
+    caseSensitive?: boolean;
 };
 /**
  * Single-select (the default): one `string` in, one `string` out — `""` means nothing selected.
@@ -1578,7 +1619,7 @@ export type SearchSelectMultipleProp = {
      * a token only counts when it matches a row; in `mode="tags"` it is accepted as it stands.
      */
     tokenSeparators?: string[];
-};
+} & SelectTagsCreateProp;
 /**
  * antd `labelInValue`, single. The value carries its own label, so a screen that never sees the
  * option list can still render what was picked.
@@ -1612,6 +1653,30 @@ export type SelectLabelInValueMultipleProp = {
         index: number;
         disabled: boolean;
     }) => React.ReactNode;
+} & SelectTagsCreateProp;
+/**
+ * `mode="tags"` — how typed text becomes a NEW value (gh#1052). antd has no equivalent of these
+ * three: its create row is the bare text and nothing reports that a value was invented. Ignored in
+ * `mode="multiple"`, which never creates.
+ */
+export type SelectTagsCreateProp = {
+    /**
+     * Whether typed text may become a new value. `false` (or a predicate returning `false` for the
+     * text) hides the create row and drops unknown `tokenSeparators` tokens — values already held
+     * stay listed so they can still be removed. Default `true`.
+     */
+    allowCreate?: boolean | ((text: string) => boolean);
+    /**
+     * The create row's content. Default: the localised `Create "{text}"` (「{text}」を作成). The
+     * value committed is the text itself either way; this only changes what the row says.
+     */
+    createLabel?: (text: string) => React.ReactNode;
+    /**
+     * Fired when a value that is NOT one of the options joins the selection — from the create row,
+     * Enter on it, or a `tokenSeparators` run. Fires beside `onSelect`/`onValueChange`, so a consumer
+     * can tell invented text apart from an option id.
+     */
+    onCreate?: (text: string) => void;
 };
 /** @see Select — the searchable engine. Single by default; `mode="multiple"` switches the shape. */
 export type SearchSelectProp = SearchSelectBaseProp & (SearchSelectSingleProp | SearchSelectMultipleProp);

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

@@ -1,6 +1,6 @@
 export type { AppLauncherApp, AppLauncherGroup, AppLauncherLabels, AppLauncherProp, AppShellProp, AuthFooterProp, AuthIdentityProp, OrgSwitcherLabels, OrgSwitcherOrganization, OrgSwitcherProp, DragAxisProp, DragBoundsProp, DraggablePanelLabels, DraggablePanelPlacementProp, DraggablePanelPositionProp, DraggablePanelProp, PageContainerExtraProp, PageContainerProp, PageInsetProp, SidebarItemProp, SidebarProductProp, SidebarProp, SidebarSectionProp, TopbarProp, } from "./layout.prop.js";
 export type { ButtonProp } from "./general.prop.js";
-export type { CommandProp, InputProp, TextareaProp, FormFieldProp, SearchInputProp, CheckboxProp, CheckboxGroupProp, ChoiceOptionProp, RadioProp, RadioGroupProp, SwitchProp, SliderProp, CalendarProp, DatePickerProp, TimePickerProp, ColorPickerProp, UploadProp, UploadFileItemProp, UploadVariantProp, TreeOptionProp, TreeFieldNamesProp, CascaderProp, TreeSelectProp, ShowCheckedStrategyProp, TransferProp, TransferItemProp, } from "./data-entry.prop.js";
+export type { CommandProp, InputProp, TextareaProp, FormFieldProp, SearchInputProp, CheckboxProp, CheckboxGroupProp, ChoiceOptionProp, RadioProp, RadioGroupProp, SwitchProp, SliderProp, CalendarProp, DatePickerProp, TimePickerProp, ColorPickerProp, ColorPickerPresetProp, UploadProp, UploadFileItemProp, UploadVariantProp, TreeOptionProp, TreeFieldNamesProp, CascaderProp, TreeSelectProp, ShowCheckedStrategyProp, TransferProp, TransferItemProp, } from "./data-entry.prop.js";
 export type { AvatarProp, EmptyStateProp, DescriptionsProp, DescriptionsItemProp, BadgeProp, DataTableProp, QrCodeProp, } from "./data-display.prop.js";
 export type { ChartDatum, ChartSeriesProp, LineChartProp, BarChartProp, AreaChartProp, PieChartProp, } from "./charts.prop.js";
 export type { AlertQueryErrorProp, AuthExpiryProviderProp, AlertProp, DialogProp, DialogContentProp, AlertTitleProp, AlertContentProp, AlertDescriptionProp, AlertActionsProp, SheetResponsiveProp, SkeletonRowsProp, } from "./feedback.prop.js";

package/dist/props/registry.d.ts

@@ -1744,6 +1744,11 @@ export declare const COMPONENT_PROP_REGISTRY: {
         readonly file: "components/data-entry.prop.ts";
         readonly vocabulary: readonly ["ValueProp", "OnValueChangeProp", "DisabledProp", "IdProp"];
     };
+    readonly ColorPickerPresetProp: {
+        readonly group: "data-entry";
+        readonly file: "components/data-entry.prop.ts";
+        readonly vocabulary: readonly ["LabelProp", "DefaultOpenProp"];
+    };
     readonly SearchSelectBaseProp: {
         readonly group: "data-entry";
         readonly file: "components/data-entry.prop.ts";
@@ -1762,6 +1767,16 @@ export declare const COMPONENT_PROP_REGISTRY: {
         readonly vocabulary: readonly ["ValueProp", "DefaultValueProp", "OnValueChangeProp", "MaxTagCountProp", "MaxTagPlaceholderProp"];
         readonly note: 'Internal — the `mode="multiple"` value shape of `<Select options>`; use Select.';
     };
+    readonly SelectTagsCreateProp: {
+        readonly group: "data-entry";
+        readonly file: "components/data-entry.prop.ts";
+        readonly vocabulary: readonly [{
+            readonly field: "onCreate";
+            readonly local: true;
+            readonly reason: "An EVENT, not a value channel: fires once per invented text as it joins the selection, beside onSelect/onValueChange, so a consumer can tell typed-new text from an option id (antd has no equivalent, gh#1052).";
+        }];
+        readonly note: 'Internal — `mode="tags"` create-row knobs (allowCreate / createLabel / onCreate, gh#1052) shared by both multi-value shapes of `<Select options>`.';
+    };
     readonly SearchSelectProp: {
         readonly group: "data-entry";
         readonly file: "components/data-entry.prop.ts";

package/dist/props/registry.js

@@ -2013,6 +2013,11 @@ const COMPONENT_PROP_REGISTRY = {
     file: "components/data-entry.prop.ts",
     vocabulary: ["ValueProp", "OnValueChangeProp", "DisabledProp", "IdProp"]
   },
+  ColorPickerPresetProp: {
+    group: "data-entry",
+    file: "components/data-entry.prop.ts",
+    vocabulary: ["LabelProp", "DefaultOpenProp"]
+  },
   SearchSelectBaseProp: {
     group: "data-entry",
     file: "components/data-entry.prop.ts",
@@ -2054,6 +2059,18 @@ const COMPONENT_PROP_REGISTRY = {
     ],
     note: 'Internal \u2014 the `mode="multiple"` value shape of `<Select options>`; use Select.'
   },
+  SelectTagsCreateProp: {
+    group: "data-entry",
+    file: "components/data-entry.prop.ts",
+    vocabulary: [
+      {
+        field: "onCreate",
+        local: true,
+        reason: "An EVENT, not a value channel: fires once per invented text as it joins the selection, beside onSelect/onValueChange, so a consumer can tell typed-new text from an option id (antd has no equivalent, gh#1052)."
+      }
+    ],
+    note: 'Internal \u2014 `mode="tags"` create-row knobs (allowCreate / createLabel / onCreate, gh#1052) shared by both multi-value shapes of `<Select options>`.'
+  },
   SearchSelectProp: {
     group: "data-entry",
     file: "components/data-entry.prop.ts",

package/dist/styles/control.css

@@ -738,6 +738,85 @@
     text-transform: uppercase;
   }
 
+  .ui-color-picker[data-panel] {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .ui-color-picker-picker {
+    display: flex;
+    align-items: center;
+    gap: var(--control-gap);
+  }
+
+  .ui-color-picker-presets {
+    display: flex;
+    flex-direction: column;
+    gap: var(--color-picker-presets-gap);
+  }
+
+  .ui-color-picker-presets-trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+    min-block-size: var(--touch-target-min);
+    color: hsl(var(--muted-foreground));
+    font-size: var(--color-picker-presets-font-size);
+    text-align: start;
+  }
+
+  .ui-color-picker-presets-chevron {
+    width: var(--control-icon-size);
+    height: var(--control-icon-size);
+    flex-shrink: 0;
+    transition: rotate 150ms;
+  }
+
+  .ui-color-picker-presets-trigger[data-state="closed"] .ui-color-picker-presets-chevron {
+    rotate: -90deg;
+  }
+
+  .ui-color-picker-presets-trigger[data-state="closed"]:dir(rtl) .ui-color-picker-presets-chevron {
+    rotate: 90deg;
+  }
+
+  .ui-color-picker-presets-items {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--color-picker-preset-gap);
+    padding-block: var(--space-1);
+  }
+
+  .ui-color-picker-presets-color {
+    display: inline-block;
+    flex-shrink: 0;
+    inline-size: var(--color-picker-preset-size);
+    block-size: var(--color-picker-preset-size);
+    border: var(--stroke-hairline) solid hsl(var(--input) / var(--input-alpha, 100%));
+    border-radius: var(--control-radius);
+    background-color: var(--color-picker-preset-color, transparent);
+    cursor: pointer;
+    forced-color-adjust: none;
+  }
+
+  .ui-color-picker-presets-color[data-selected] {
+    box-shadow:
+      0 0 0 var(--stroke-md) hsl(var(--background)),
+      0 0 0 calc(var(--stroke-md) * 2) hsl(var(--foreground));
+  }
+
+  .ui-color-picker-presets-color[data-disabled] {
+    cursor: not-allowed;
+    opacity: var(--disabled-opacity);
+  }
+
+  .ui-color-picker-presets-empty {
+    display: block;
+    padding-block: var(--space-1);
+    color: hsl(var(--muted-foreground));
+    font-size: var(--color-picker-presets-font-size);
+  }
+
   .ui-query-refetch-icon[data-fetching="true"] {
     animation: spin 1s linear infinite;
   }

package/dist/styles/layers.json

@@ -1,5 +1,5 @@
 {
-  "version": "31.7.0",
+  "version": "31.9.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

@@ -608,6 +608,10 @@
     min-block-size: 0;
   }
 
+  .ui-split-pane[data-fill="true"][data-stack-order="aside-first"]:not([data-aside="closed"]) {
+    grid-template-rows: auto minmax(0, 1fr);
+  }
+
   .ui-resizable-panel-group {
     display: flex;
     min-height: 0;
@@ -662,12 +666,53 @@
     .ui-split-pane[data-aside-width="md"] {
       grid-template-columns: minmax(0, 1fr) 22rem;
     }
+
+    .ui-split-pane[data-stack-order="aside-first"]:is(
+        [data-aside-width="sm"],
+        [data-aside-width="md"]
+      )
+      > .ui-split-pane-main {
+      grid-column: 1;
+      grid-row: 1;
+    }
+
+    .ui-split-pane[data-stack-order="aside-first"]:is(
+        [data-aside-width="sm"],
+        [data-aside-width="md"]
+      )
+      > .ui-split-pane-aside {
+      grid-column: 2;
+      grid-row: 1;
+    }
+
+    .ui-split-pane[data-fill="true"][data-stack-order="aside-first"]:is(
+        [data-aside-width="sm"],
+        [data-aside-width="md"]
+      ):not([data-aside="closed"]) {
+      grid-template-rows: minmax(0, 1fr);
+    }
   }
 
   @container split-pane (min-width: 64rem) {
     .ui-split-pane[data-aside-width="lg"] {
       grid-template-columns: minmax(0, 1fr) 30rem;
     }
+
+    .ui-split-pane[data-stack-order="aside-first"][data-aside-width="lg"] > .ui-split-pane-main {
+      grid-column: 1;
+      grid-row: 1;
+    }
+
+    .ui-split-pane[data-stack-order="aside-first"][data-aside-width="lg"] > .ui-split-pane-aside {
+      grid-column: 2;
+      grid-row: 1;
+    }
+
+    .ui-split-pane[data-fill="true"][data-stack-order="aside-first"][data-aside-width="lg"]:not(
+        [data-aside="closed"]
+      ) {
+      grid-template-rows: minmax(0, 1fr);
+    }
   }
 
   .ui-split-pane-main,

package/dist/tokens/components/control.css

@@ -157,6 +157,10 @@
 
   --color-picker-input-width: 6.5rem;
 
+  --color-picker-preset-size: var(--touch-target-min);
+  --color-picker-preset-gap: var(--space-2);
+  --color-picker-presets-gap: var(--space-1);
+
   --command-list-max-height: min(300px, 50vh);
   --command-input-padding-x: var(--space-3);
   --command-group-padding: var(--space-1);
@@ -192,6 +196,10 @@
     --font-size-xs,
     calc(var(--font-size-base) / var(--font-size-ratio))
   );
+  --color-picker-presets-font-size: var(
+    --font-size-xs,
+    calc(var(--font-size-base) / var(--font-size-ratio))
+  );
   --command-group-heading-font-size: var(
     --font-size-xs,
     calc(var(--font-size-base) / var(--font-size-ratio))

package/docs/data-entry/color-picker.tsx

@@ -3,19 +3,33 @@ import { useState } from "react";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
 import { ColorPicker, FormField } from "@godxjp/ui/data-entry";
 import { Text } from "@godxjp/ui/general";
+import { useTranslation } from "@godxjp/ui/i18n";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
 
+/** A fixed tag palette (gh#1055): tags pick from it, never from free hex. */
+const TAG_PALETTE = ["#dc2626", "#ea580c", "#ca8a04", "#16a34a", "#0891b2", "#2563eb", "#9333ea"];
+
 /**
  * ColorPicker — hex color swatch + optional editable hex input.
  * Always initialize state to a valid 3- or 6-digit hex string.
  * Use controlled mode (value + onValueChange); no uncontrolled path.
  * Composed only from real @godxjp/ui components.
+ *
+ * `presets` / `panelRender` port antd ColorPicker (gh#1055). Deviations from antd, on purpose:
+ * - `colors` are hex strings only — the value is hex; antd also takes colour objects/gradients.
+ * - There is no popover: the picker is inline, so `panelRender` replaces the inline body. The
+ *   presets-only recipe is antd's own: `panelRender={(_, { components: { Presets } }) => <Presets />}`.
+ * - Each swatch is a real radio (APG radio group, named by its hex, arrow keys select); antd's
+ *   preset blocks are click-only divs.
  */
 export default function Demo() {
   const [brandColor, setBrandColor] = useState("#2563eb");
   const [accentColor, setAccentColor] = useState("#16a34a");
   const [categoryColor, setCategoryColor] = useState("#dc2626");
   const [validatedColor, setValidatedColor] = useState("#9333ea");
+  const [labelColor, setLabelColor] = useState("#16a34a");
+  const [tagColor, setTagColor] = useState("#2563eb");
+  const { t } = useTranslation();
 
   return (
     <PageContainer title="ColorPicker" subtitle="カラーピッカー · スウォッチ＋Hex入力">
@@ -75,6 +89,64 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>{t("showcase.colorPicker.presetsTitle")}</CardTitle>
+            <CardDescription>{t("showcase.colorPicker.presetsDescription")}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField id="label-color" label={t("showcase.colorPicker.paletteLabel")}>
+              <ColorPicker
+                id="label-color"
+                value={labelColor}
+                onValueChange={setLabelColor}
+                presets={[
+                  {
+                    key: "recommended",
+                    label: t("showcase.colorPicker.recommendedGroup"),
+                    colors: TAG_PALETTE,
+                  },
+                  {
+                    key: "recent",
+                    label: t("showcase.colorPicker.recentGroup"),
+                    colors: ["#2563eb", "#16a34a"],
+                    defaultOpen: false,
+                  },
+                ]}
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>{t("showcase.colorPicker.presetsOnlyTitle")}</CardTitle>
+            <CardDescription>{t("showcase.colorPicker.presetsOnlyDescription")}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField
+              id="tag-color"
+              label={t("showcase.colorPicker.tagColorLabel")}
+              helper={t("showcase.colorPicker.tagColorHelper")}
+            >
+              <ColorPicker
+                id="tag-color"
+                name="tag_color"
+                value={tagColor}
+                onValueChange={setTagColor}
+                presets={[
+                  {
+                    key: "tags",
+                    label: t("showcase.colorPicker.recommendedGroup"),
+                    colors: TAG_PALETTE,
+                  },
+                ]}
+                panelRender={(_, { components: { Presets } }) => <Presets />}
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>Hex バリデーションと確定動作</CardTitle>

package/docs/data-entry/select.tsx

@@ -23,6 +23,7 @@ import {
   SelectValue,
 } from "@godxjp/ui/data-entry";
 import { Button } from "@godxjp/ui/general";
+import { useTranslation } from "@godxjp/ui/i18n";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
 import { X } from "lucide-react";
 
@@ -32,6 +33,7 @@ import { X } from "lucide-react";
  * trigger. Never a raw <select>. Composed only from real @godxjp/ui components.
  */
 export default function Demo() {
+  const { t, locale } = useTranslation();
   const [status, setStatus] = useState("paid");
   const [currency, setCurrency] = useState("JPY");
   const [priority, setPriority] = useState("medium");
@@ -43,6 +45,8 @@ export default function Demo() {
   const [reviewerLabel, setReviewerLabel] = useState("tanaka");
   const [prefixed, setPrefixed] = useState("JPY");
   const [tags, setTags] = useState<string[]>(["至急", "社内便"]);
+  const [labels, setLabels] = useState<string[]>([]);
+  const [created, setCreated] = useState<string[]>([]);
   // antd `labelInValue`: the record arrives carrying its own label, before any option list loads.
   const [assignedTo, setAssignedTo] = useState<
     { value: string; label: React.ReactNode } | undefined
@@ -481,6 +485,40 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>{t("showcase.select.createTitle")}</CardTitle>
+            <CardDescription>{t("showcase.select.createDescription")}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <FormField
+              id="issue-labels"
+              label={t("showcase.select.createField")}
+              helper={
+                created.length
+                  ? t("showcase.select.createdHelper", {
+                      list: new Intl.ListFormat(locale).format(created),
+                    })
+                  : t("showcase.select.createdNone")
+              }
+            >
+              <Select
+                id="issue-labels"
+                mode="tags"
+                value={labels}
+                onValueChange={setLabels}
+                onCreate={(text) => setCreated((previous) => [...previous, text])}
+                allowCreate={(text) => text.length <= 12}
+                options={[
+                  { value: "bug", label: "Bug" },
+                  { value: "feature", label: "Feature" },
+                  { value: "docs", label: "Docs" },
+                ]}
+              />
+            </FormField>
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>labelInValue · 読み込み前でも名前が出る</CardTitle>

package/docs/i18n/messages/en.json

@@ -543,6 +543,34 @@
       "longIdTitle": "Long identifiers and +N",
       "ledgerLabel": "Ledger ID",
       "ledgerHelper": "A 71-character identifier still stays inside the control"
+    },
+    "select": {
+      "createTitle": "Tags: create row, onCreate and case-insensitive matching",
+      "createDescription": "Typed text that matches no option is offered as an explicit “Create” row. onCreate reports only invented text, never an option id. Typing “bug” finds “Bug” instead of creating a duplicate (caseSensitive restores exact matching). Unlike antd, the create row is labelled and text longer than 12 characters is refused through allowCreate.",
+      "createField": "Labels",
+      "createdHelper": "Created in this session: {list}",
+      "createdNone": "Nothing created yet"
+    },
+    "colorPicker": {
+      "presetsTitle": "Tag colour from a palette",
+      "presetsDescription": "presets — fixed swatch groups under the picker; each group collapses, and the free picker stays available.",
+      "paletteLabel": "Label colour",
+      "recommendedGroup": "Recommended",
+      "recentGroup": "Recently used",
+      "presetsOnlyTitle": "Palette only",
+      "presetsOnlyDescription": "panelRender returns only Presets — people pick from the palette and cannot type an arbitrary hex.",
+      "tagColorLabel": "Tag colour",
+      "tagColorHelper": "Arrow keys move between swatches; the selected one is announced."
+    },
+    "splitPaneStackOrder": {
+      "title": "stackOrder — the aside first when the panes stack",
+      "lead": "stackOrder=\"aside-first\" puts the aside above main once the pane is too narrow to split, and first in the DOM, so Tab reaches it first too. Wide enough to split, it sits in the trailing column exactly as it does by default. The embed below is narrower than the split width, so the properties card sits above the thread.",
+      "propertiesTitle": "Properties",
+      "status": "Status",
+      "statusValue": "In progress",
+      "assignee": "Assignee",
+      "threadTitle": "Comments",
+      "threadLead": "Long threads no longer push the properties below the fold on a phone."
     }
   },
   "serviceLauncherShowcase": {

package/docs/i18n/messages/ja.json

@@ -537,6 +537,34 @@
       "longIdTitle": "長い識別子と「+N」",
       "ledgerLabel": "台帳ID",
       "ledgerHelper": "71文字の識別子でも行からはみ出さない"
+    },
+    "select": {
+      "createTitle": "タグ: 作成行・onCreate・大文字小文字を区別しない照合",
+      "createDescription": "どの選択肢にも一致しない入力は「作成」行として明示されます。onCreate は新しく作られたテキストだけを通知し、選択肢の ID では発火しません。「bug」と入力すると「Bug」が見つかり、重複は作られません（caseSensitive で完全一致に戻せます）。antd と異なり作成行にはラベルが付き、12 文字を超える入力は allowCreate で拒否しています。",
+      "createField": "ラベル",
+      "createdHelper": "このセッションで作成: {list}",
+      "createdNone": "まだ作成されていません"
+    },
+    "colorPicker": {
+      "presetsTitle": "パレットからタグの色を選ぶ",
+      "presetsDescription": "presets — ピッカーの下に固定スウォッチのグループを表示。グループは折りたためて、自由入力も残る。",
+      "paletteLabel": "ラベルの色",
+      "recommendedGroup": "おすすめ",
+      "recentGroup": "最近使った色",
+      "presetsOnlyTitle": "パレットのみ",
+      "presetsOnlyDescription": "panelRender で Presets だけを返すと、パレットからの選択のみになり任意の HEX は入力できない。",
+      "tagColorLabel": "タグの色",
+      "tagColorHelper": "矢印キーでスウォッチ間を移動し、選択中の色が読み上げられる。"
+    },
+    "splitPaneStackOrder": {
+      "title": "stackOrder — 縦積み時にサイドを先頭へ",
+      "lead": "stackOrder=\"aside-first\" は、分割できない幅になったときにサイドをメインの上に置き、DOM でも先頭にするため Tab でも先に届きます。分割できる幅では既定と同じく後方の列に並びます。下の埋め込みは分割幅より狭いため、プロパティがスレッドの上に来ます。",
+      "propertiesTitle": "プロパティ",
+      "status": "ステータス",
+      "statusValue": "対応中",
+      "assignee": "担当者",
+      "threadTitle": "コメント",
+      "threadLead": "スマートフォンでも、長いスレッドがプロパティを画面外へ押し出しません。"
     }
   },
   "serviceLauncherShowcase": {