style(storybook): refine form component stories

src/components/select.stories.tsx

@@ -1,7 +1,7 @@
 import { useId, type ReactNode } from "react"
 import type { Meta, StoryObj } from "@storybook/react-vite"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, type SelectSize } from "@hm-design/ui"
-import { StateBoard } from "@/components/story-board"
+import { StateBoard, type BoardState } from "@/components/story-board"
 import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
 
 // Story structure follows ui_viz (implementations/web/storybook/Select.stories.jsx and SelectSizes.stories.jsx):
@@ -42,9 +42,11 @@ type SpecimenProps = {
 
 function SelectSpecimen({ listSize, label = "Select", placeholder = "Choose a status", size, defaultValue, defaultOpen, disabled, "aria-invalid": ariaInvalid, options = statusOptions }: SpecimenProps) {
   const id = useId()
+  // A Label next to an enabled Select uses the default text color; disabled keeps the secondary color at 0.6.
+  const labelTone = disabled ? "text-muted-foreground opacity-60" : "text-foreground"
   return (
     <div className="grid gap-2">
-      <label htmlFor={id} className={`justify-self-start text-sm font-medium text-muted-foreground${disabled ? " opacity-60" : ""}`}>
+      <label htmlFor={id} className={`justify-self-start text-sm font-medium ${labelTone}`}>
         {label}
       </label>
       <Select defaultValue={defaultValue} defaultOpen={defaultOpen} disabled={disabled}>
@@ -109,6 +111,23 @@ function SizeComparison({ showSpec = true }: { showSpec?: boolean }) {
   )
 }
 
+// Representative-page layout (Storybook presentation only): equal columns on PC (iframe width 1000px and up), shrinking to
+// fit below that. Each specimen sits in its own single-column StateBoard (min larger than any column), so StateBoard's
+// auto-fill grid cannot leave an empty track. Full class names are listed so Tailwind can see them.
+const specimenColumns = {
+  3: "min-[1000px]:grid-cols-3",
+} as const
+
+function SpecimenGrid({ states, columns }: { states: BoardState[]; columns: keyof typeof specimenColumns }) {
+  return (
+    <div className={`grid items-start gap-6 [grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))] ${specimenColumns[columns]}`}>
+      {states.map((state) => (
+        <StateBoard key={state.id} min={10000} states={[state]} />
+      ))}
+    </div>
+  )
+}
+
 function DisabledStates() {
   return (
     <div className="grid max-w-[480px] gap-6">
@@ -157,11 +176,16 @@ export const All: Story = {
     <StoryPage>
       <StoryPageHeader title="Select" />
       <StorySection title="Sizes">
-        <SizeComparison showSpec={false} />
+        {/* Same 3-column track as States / Validation: Medium and Large take the first two columns, the third stays empty. */}
+        <div className="grid items-start gap-6 [grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))] min-[1000px]:grid-cols-3">
+          {sizes.map((spec) => (
+            <SizeCard key={spec.size} spec={spec} showSpec={false} />
+          ))}
+        </div>
       </StorySection>
       <StorySection title="States">
-        <StateBoard
-          fixed
+        <SpecimenGrid
+          columns={3}
           states={[
             { id: "selected", label: "Selected", children: <SelectSpecimen size="medium" label="Status" defaultValue="active" /> },
             { id: "disabled", label: "Disabled", children: <SelectSpecimen size="medium" label="Status" defaultValue="active" disabled /> },
@@ -169,9 +193,10 @@ export const All: Story = {
           ]}
         />
       </StorySection>
-      <StorySection title="Invalid / Focus">
-        <StateBoard
-          fixed
+      <StorySection title="Validation">
+        {/* Same 3-column track as States: the two specimens take the first two columns (same Select width) and the third stays empty. */}
+        <SpecimenGrid
+          columns={3}
           states={[
             { id: "invalid", label: "Invalid", children: <SelectSpecimen size="medium" aria-invalid label="Status" defaultValue="active" /> },
             { id: "invalid-disabled", label: "Invalid · Disabled", children: <SelectSpecimen size="medium" aria-invalid disabled label="Status" /> },