@astryxdesign/cli 0.7.1-canary.ff40b78 → 0.7.2-canary.c68f5e8

package/assets/docs/tree/migration-setup.doc.mjs

@@ -129,15 +129,31 @@ export function AppRoot({children}: {children: React.ReactNode}) {
         },
         {
           type: 'prose',
-          text: 'On Tailwind v3 there is no preflight.css to import, so wrap the @tailwind base directive in a named layer instead. Keep utilities unlayered so existing app utility classes still win everywhere.',
+          text: 'A layer\'s rank is set by the first stylesheet on the page that names it, so the global CSS file (or a `layers.css` holding only the `@layer` line) must be the first import in the root layout or app entry. Import it before any module that imports Astryx or theme CSS, including the `astryx-themes` module generated by `astryx theme add` and a root component like the `AppRoot` above that imports `theme.css`. If a theme stylesheet loads first, Tailwind preflight overrides Astryx base styles and theme overrides lose.',
         },
         {
           type: 'code',
-          lang: 'css',
-          label: 'Tailwind v3 coexistence',
-          code: `@layer reset, tw-preflight, astryx-base, astryx-theme;
+          lang: 'tsx',
+          label: 'Root layout or app entry',
+          code: `import './globals.css'; // first: declares the cascade-layer order
 
-@import "@astryxdesign/core/reset.css";
+import {AppRoot} from './AppRoot';`,
+        },
+        {
+          type: 'prose',
+          text: 'On Tailwind v3 there is no preflight.css to import, so wrap the @tailwind base directive in a named layer instead. Keep utilities unlayered so existing app utility classes still win everywhere. Put the `@layer` order line in its own `layers.css` and import it first, before `globals.css`: Next.js (webpack or Turbopack) and other bundlers that hoist CSS imports move the imported files above an inline `@layer` line, so the order would arrive too late.',
+        },
+        {
+          type: 'code',
+          lang: 'css',
+          label: 'layers.css (imported first)',
+          code: `@layer reset, tw-preflight, astryx-base, astryx-theme;`,
+        },
+        {
+          type: 'code',
+          lang: 'css',
+          label: 'globals.css (Tailwind v3 coexistence)',
+          code: `@import "@astryxdesign/core/reset.css";
 @import "@astryxdesign/core/astryx.css";
 @import "@astryxdesign/theme-neutral/theme.css";
 
@@ -147,6 +163,15 @@ export function AppRoot({children}: {children: React.ReactNode}) {
 @tailwind components;
 @tailwind utilities; /* unlayered: legacy utility classes keep winning */`,
         },
+        {
+          type: 'code',
+          lang: 'tsx',
+          label: 'Root layout or app entry (Tailwind v3)',
+          code: `import './layers.css'; // first: declares the cascade-layer order
+import './globals.css';
+
+import {AppRoot} from './AppRoot';`,
+        },
       ],
     },
     {
@@ -186,7 +211,7 @@ export function AppRoot({children}: {children: React.ReactNode}) {
           type: 'list',
           style: 'unordered',
           items: [
-            'Declare the canonical @layer order once, before any @import. With webpack-based bundlers (including Next.js) the order declaration must live in its own CSS file imported first, such as layers.css, because webpack hoists @import content above the inline CSS that follows it.',
+            'Declare the canonical @layer order once, before any @import. With Next.js (webpack or Turbopack) and other bundlers that hoist CSS imports, the order declaration must live in its own CSS file imported first, such as layers.css, because the bundler hoists @import content above the inline CSS that follows it.',
             'Audit every pre-existing global or reset stylesheet and assign each one to a layer deliberately. Top-level imports without layer() stay unlayered and beat every layer; imports nested inside a layered file inherit that layer.',
             'Remove or demote the app legacy reset. The design system ships its own :where() reset in the lowest layer, so any app reset belongs in that same reset layer and never in a layer above astryx-base.',
             'Layer Tailwind preflight. On Tailwind v4, import preflight.css with layer(base). On Tailwind v3, wrap the @tailwind base directive in a named layer (see the snippet in Theme and CSS Setup). Unlayered preflight overrides theme CSS silently.',

package/assets/docs/tree/responsive.doc.mjs

@@ -21,6 +21,9 @@ export const docs = {
     'Dialog',
     'BottomSheet',
     'contract',
+    'Grid',
+    'columns',
+    'minWidth',
   ],
 
   sections: [
@@ -94,5 +97,39 @@ const isNarrow = useMediaQuery('(max-width: 1024px)');
         },
       ],
     },
+    {
+      id: 'columns-that-reflow',
+      title: 'Columns that reflow',
+      content: [
+        {
+          type: 'prose',
+          text: 'For columns that reflow on small screens, use `Grid columns={{minWidth, max}}`. A numeric `columns` is exactly N columns at every width and never reflows: `columns={4}` on a 390px phone renders four tracks under 100px wide, and the row overflows the page as soon as their content cannot shrink to fit. `{minWidth: 240, max: 4}` renders at most four columns, each at least 240px, and drops to one full-width column when the container is narrow; `max` is what lets that last column shrink to the container, and `gap` counts toward the room the columns need.',
+        },
+        {
+          type: 'code',
+          lang: 'tsx',
+          label: 'Reflowing stat row versus a fixed week row',
+          code: `// Reflows: 4 columns on desktop, 3 in a 768px-wide grid, 1 on a phone.
+<Grid columns={{minWidth: 240, max: 4}} gap={3}>
+  {stats.map(stat => <StatCard key={stat.id} {...stat} />)}
+</Grid>
+
+// Fixed: exactly 7 columns at every width (a number never reflows).
+<Grid columns={7} gap={1}>
+  {days.map(day => <DayCell key={day} day={day} />)}
+</Grid>`,
+        },
+        {
+          type: 'list',
+          style: 'unordered',
+          items: [
+            '`{minWidth}` alone: as many columns as fit at the floor, no cap; a container narrower than `minWidth` overflows, so add `max` for anything that reaches a phone',
+            "`{minWidth, repeat: 'fit'}`: empty tracks collapse so present items stretch",
+            "A numeric `GridSpan` wider than the grid's current columns adds implicit columns to the whole grid; items placed before and after the span flow into them, and `columns='full'` then covers only the explicit columns. In a reflowing grid keep spans within the smallest count it can reach, or use `'full'`, which adds none",
+            'Styling that changes the room columns have to fit changes the count a reflowing shape reaches: a `columnGap` or `gap` step, inline padding on the grid, or `grid-auto-flow: column` through `xstyle`, which places items into extra implicit columns. A `className` rule replaces the computed track list only when it wins the cascade against the generated styles; prefer `xstyle` for overrides',
+          ],
+        },
+      ],
+    },
   ],
 };

package/assets/docs/tree/tailwind.doc.mjs

@@ -47,6 +47,18 @@ export const docs = {
           type: 'prose',
           text: 'Pre-declare every layer before any imports. This keeps reset lowest, Tailwind preflight above reset, component/theme styles in the middle, and Tailwind utilities last so utility classes on `className` can intentionally override component defaults.',
         },
+        {
+          type: 'prose',
+          text: 'A layer\'s rank is set by the first stylesheet on the page that names it, so this order only holds when `globals.css` loads first. Make it the first import in the root layout or app entry, before any module that imports Astryx or theme CSS. That includes the `astryx-themes` module generated by `astryx theme add` and any root component that imports a theme\'s `theme.css`. If a theme stylesheet loads first, Tailwind preflight overrides Astryx base styles and theme overrides lose. If `globals.css` cannot come first, move the `@layer` line into its own `layers.css` and import that first instead.',
+        },
+        {
+          type: 'code',
+          lang: 'tsx',
+          label: 'Root layout or app entry',
+          code: `import './globals.css'; // first: declares the cascade-layer order
+
+import {themes, defaultThemeSlug} from './astryx-themes';`,
+        },
         {
           type: 'code',
           lang: 'tsx',

package/assets/docs/tree/tokens-and-setup.doc.mjs

@@ -77,7 +77,7 @@ const styles = stylex.create({
       content: [
         {
           type: 'prose',
-          text: 'Astryx components ship pre-compiled, so consuming the published package needs no StyleX setup. But `astryx swizzle <Component>` copies the raw StyleX *source* into your app, and StyleX source requires a build-time StyleX compiler to produce atomic CSS. Without one the component compiles but renders completely unstyled: no error, no warning. If a swizzled component looks unstyled, a missing StyleX compiler is almost always why. The same applies if you author your own StyleX with `stylex.create()`.',
+          text: 'Astryx components ship pre-compiled: `astryx.css` and each package\'s own stylesheet hold all of their styles, so consuming the published packages needs no StyleX setup. But `astryx swizzle <Component>` copies the raw StyleX *source* into your app, and StyleX source requires a build-time StyleX compiler to produce atomic CSS. Without one the component compiles but renders completely unstyled: no error, no warning. If a swizzled component looks unstyled, a missing StyleX compiler is almost always why. The same applies if you author your own StyleX with `stylex.create()`.',
         },
         {
           type: 'table',
@@ -105,7 +105,7 @@ const styles = stylex.create({
 
 export default stylexPlugin({
   rsOptions: {
-    // Resolve @astryxdesign/core's StyleX so swizzled component source compiles.
+    // Resolve the Astryx token modules that swizzled source imports.
     aliases: {'@/*': ['./src/*']},
     unstable_moduleResolution: {type: 'commonJS'},
   },
@@ -120,6 +120,7 @@ export default stylexPlugin({
             'Symptom of a missing compiler: swizzled component renders with no styles, but no build or runtime error.',
             'A Babel config turns off SWC in Next.js; skip it if you need `next/font`.',
             'Pure theming (defineTheme + astryx theme build) needs NO StyleX compiler; only swizzled/authored StyleX source does.',
+            'Keep loading `astryx.css` with a StyleX compiler in place. The compiler builds your own and swizzled source only; never add `node_modules/@astryxdesign` to its inputs.',
           ],
         },
       ],

package/assets/docs/tree/tokens-syntax.doc.mjs

@@ -88,6 +88,26 @@ export const docs = {
             [
               "--color-syntax-background",
               "var(--color-background-muted)"
+            ],
+            [
+              "--color-syntax-added",
+              "color-mix(in srgb, var(--color-success-muted) 25%, transparent)"
+            ],
+            [
+              "--color-syntax-removed",
+              "color-mix(in srgb, var(--color-error-muted) 25%, transparent)"
+            ],
+            [
+              "--color-syntax-diff-header",
+              "var(--color-background-muted)"
+            ],
+            [
+              "--color-syntax-added-marker",
+              "var(--color-text-green)"
+            ],
+            [
+              "--color-syntax-removed-marker",
+              "var(--color-text-red)"
             ]
           ]
         }

package/assets/docs/tree/tokens.doc.mjs

@@ -2,7 +2,7 @@
 
 // AUTO-GENERATED — do not edit manually.
 // Run: node scripts/generate-token-docs.mjs
-// Total: 258 tokens across 15 categories.
+// Total: 263 tokens across 15 categories.
 
 /** @type {import('@astryxdesign/cli/authoring').NamespaceDoc} */
 export const docs = {

package/assets/templates/blocks/components/CommandPalette/CommandPaletteAsyncSearch.tsx

@@ -39,7 +39,12 @@ export default function CommandPaletteAsyncSearch() {
       isInline
       onOpenChange={() => {}}
       searchSource={source}
-      input={<CommandPaletteInput placeholder="Search files..." />}
+      input={
+        <CommandPaletteInput
+          label="Search files"
+          placeholder="Search files..."
+        />
+      }
       emptyBootstrapText="Type a filename to search"
       emptySearchText="No files found"
     />

package/assets/templates/pages/table-filter/page.tsx

@@ -4099,7 +4099,7 @@ export default function TableFilterTemplate() {
             restates the selected tab word for word, and the strip already
             marks which one that is. On a phone that is a line of vertical
             space spent saying it twice. The panel keeps the name for anyone
-            not seeing the strip, as its accessible label. */}
+            not seeing the strip: its selected tab labels it. */}
         <TabList
           value={viewSection}
           onChange={value => setViewSection(value as ViewSection)}
@@ -4109,6 +4109,7 @@ export default function TableFilterTemplate() {
           {VIEW_SECTIONS.map(section => (
             <Tab
               key={section.key}
+              id={`${viewPanelId}-tab-${section.key}`}
               value={section.key}
               label={section.label}
               icon={section.icon}
@@ -4126,7 +4127,7 @@ export default function TableFilterTemplate() {
           gap={0}
           id={viewPanelId}
           role="tabpanel"
-          aria-label={activeSection?.title}
+          aria-labelledby={`${viewPanelId}-tab-${viewSection}`}
           paddingBlockStart={3}>
           {viewPanelBody()}
         </VStack>

package/assets/templates/themes/butter/butterTheme.ts

@@ -43,6 +43,55 @@ const butterSyntax = defineSyntaxTheme({
   },
 });
 
+/**
+ * The secondary Button treatment. Selector, MultiSelector, and ComplexSelector
+ * reuse it for their `secondary` trigger so every secondary control in this
+ * theme matches (AST-079 FR2).
+ *
+ * Secondary: blue outline + label in light, butter yellow in dark.
+ */
+const SECONDARY_BUTTON = {
+  backgroundColor: 'transparent',
+  borderWidth: '1.5px',
+  borderStyle: 'solid',
+  borderColor: 'light-dark(#225BFF, #FDEE8C)',
+  color: 'light-dark(#225BFF, #FDEE8C)',
+  ':hover': {
+    backgroundColor: 'light-dark(#225BFF14, #FDEE8C14)',
+  },
+} as const;
+
+/**
+ * The secondary Button treatment on Selector and MultiSelector triggers
+ * (AST-079 FR2). Inside an InputGroup a trigger keeps the neutral fill and the
+ * group's edges instead (FR6). The hover stays off disabled and read-only
+ * triggers, which carry `data-disabled` and `data-readonly`.
+ */
+const SECONDARY_SELECTOR = {
+  ':not(.astryx-input-group *)': {
+    backgroundColor: SECONDARY_BUTTON.backgroundColor,
+    borderWidth: SECONDARY_BUTTON.borderWidth,
+    borderStyle: SECONDARY_BUTTON.borderStyle,
+    borderColor: SECONDARY_BUTTON.borderColor,
+    color: SECONDARY_BUTTON.color,
+  },
+  ':hover:not([data-disabled], [data-readonly], .astryx-input-group *)':
+    SECONDARY_BUTTON[':hover'],
+} as const;
+
+/**
+ * The secondary Button treatment on ComplexSelector triggers (AST-079 FR2), with
+ * the hover kept off a disabled trigger, whose inner button is disabled.
+ */
+const SECONDARY_COMPLEX_SELECTOR = {
+  backgroundColor: SECONDARY_BUTTON.backgroundColor,
+  borderWidth: SECONDARY_BUTTON.borderWidth,
+  borderStyle: SECONDARY_BUTTON.borderStyle,
+  borderColor: SECONDARY_BUTTON.borderColor,
+  color: SECONDARY_BUTTON.color,
+  ':hover:not(:has(> :disabled))': SECONDARY_BUTTON[':hover'],
+} as const;
+
 export const butterTheme = defineTheme({
   name: 'butter',
 
@@ -276,17 +325,7 @@ export const butterTheme = defineTheme({
         paddingBlock: 'var(--spacing-3)',
         paddingInline: 'var(--spacing-4)',
       },
-      // Secondary: blue outline + label in light, butter yellow in dark.
-      'variant:secondary': {
-        backgroundColor: 'transparent',
-        borderWidth: '1.5px',
-        borderStyle: 'solid',
-        borderColor: 'light-dark(#225BFF, #FDEE8C)',
-        color: 'light-dark(#225BFF, #FDEE8C)',
-        ':hover': {
-          backgroundColor: 'light-dark(#225BFF14, #FDEE8C14)',
-        },
-      },
+      'variant:secondary': SECONDARY_BUTTON,
       // Ghost: same accent color as secondary, no background.
       'variant:ghost': {
         color: 'light-dark(#225BFF, #FDEE8C)',
@@ -534,6 +573,7 @@ export const butterTheme = defineTheme({
       'status:success': {'--color-success': '#91D143'},
       'status:warning': {'--color-warning': '#ffc502'},
       'status:error': {'--color-error': '#fc473b'},
+      'variant:secondary': SECONDARY_SELECTOR,
     },
     'multi-selector': {
       base: {
@@ -544,7 +584,9 @@ export const butterTheme = defineTheme({
       'status:success': {'--color-success': '#91D143'},
       'status:warning': {'--color-warning': '#ffc502'},
       'status:error': {'--color-error': '#fc473b'},
+      'variant:secondary': SECONDARY_SELECTOR,
     },
+    'complex-selector': {'variant:secondary': SECONDARY_COMPLEX_SELECTOR},
     typeahead: {
       base: {
         paddingBlock: 'var(--spacing-2)',

package/assets/templates/themes/chocolate/chocolateTheme.ts

@@ -34,6 +34,30 @@ const chocolateSyntax = defineSyntaxTheme({
   },
 });
 
+/**
+ * The secondary Button treatment. Selector, MultiSelector, and ComplexSelector
+ * reuse it for their `secondary` trigger so every secondary control in this
+ * theme matches (AST-079 FR2).
+ */
+const SECONDARY_BUTTON = {
+  borderWidth: '1px',
+  borderStyle: 'solid',
+  borderColor: 'var(--color-border-emphasized)',
+} as const;
+
+/**
+ * The secondary Button treatment on Selector and MultiSelector triggers
+ * (AST-079 FR2). Inside an InputGroup a trigger keeps the neutral fill and the
+ * group's edges instead (FR6).
+ */
+const SECONDARY_SELECTOR = {
+  ':not(.astryx-input-group *)': {
+    borderWidth: SECONDARY_BUTTON.borderWidth,
+    borderStyle: SECONDARY_BUTTON.borderStyle,
+    borderColor: SECONDARY_BUTTON.borderColor,
+  },
+} as const;
+
 export const chocolateTheme = defineTheme({
   name: 'chocolate',
 
@@ -219,12 +243,12 @@ export const chocolateTheme = defineTheme({
       base: {
         borderRadius: 'var(--radius-full)',
       },
-      'variant:secondary': {
-        borderWidth: '1px',
-        borderStyle: 'solid',
-        borderColor: 'var(--color-border-emphasized)',
-      },
+      'variant:secondary': SECONDARY_BUTTON,
     },
+    // Secondary selector triggers match the secondary Button (AST-079 FR2).
+    selector: {'variant:secondary': SECONDARY_SELECTOR},
+    'multi-selector': {'variant:secondary': SECONDARY_SELECTOR},
+    'complex-selector': {'variant:secondary': SECONDARY_BUTTON},
 
     card: {
       base: {

package/assets/templates/themes/gothic/gothicTheme.ts

@@ -40,9 +40,48 @@ const gothicSyntax = defineSyntaxTheme({
     property: '#7cc5b3', // Verdigris
     punctuation: '#7a8290', // Mid neutral
     background: '#101314',
+    // Diff rows on the near-black background: any lighter wash lowers every
+    // light token's contrast, so the rows take opaque hues at the
+    // background's own luminance — a deep green and a deep red that read as
+    // colour, not brightness — and every token keeps the contrast it has on
+    // the plain background. Markers: forest moss and blood crimson.
+    added: '#081408',
+    removed: '#1e0a0a',
+    'added-marker': '#a3c987',
+    'removed-marker': '#d97580',
   },
 });
 
+/**
+ * The secondary Button treatment. Selector, MultiSelector, and ComplexSelector
+ * reuse it for their `secondary` trigger so every secondary control in this
+ * theme matches (AST-079 FR2).
+ *
+ * Primary inherits default — light pill with dark text via
+ * --color-accent / --color-on-accent (matches the cream badge).
+ * Secondary uses the dark-slate "neutral" badge treatment.
+ */
+const SECONDARY_BUTTON = {
+  backgroundColor: 'var(--color-background-gray)',
+  color: 'var(--color-text-gray)',
+  borderColor: 'transparent',
+  borderWidth: '0',
+} as const;
+
+/**
+ * The secondary Button treatment on Selector and MultiSelector triggers
+ * (AST-079 FR2). Inside an InputGroup a trigger keeps the neutral fill and the
+ * group's edges instead (FR6).
+ */
+const SECONDARY_SELECTOR = {
+  ':not(.astryx-input-group *)': {
+    backgroundColor: SECONDARY_BUTTON.backgroundColor,
+    color: SECONDARY_BUTTON.color,
+    borderColor: SECONDARY_BUTTON.borderColor,
+    borderWidth: SECONDARY_BUTTON.borderWidth,
+  },
+} as const;
+
 export const gothicTheme = defineTheme({
   name: 'gothic',
 
@@ -227,15 +266,7 @@ export const gothicTheme = defineTheme({
 
   components: {
     button: {
-      // Primary inherits default — light pill with dark text via
-      // --color-accent / --color-on-accent (matches the cream badge).
-      // Secondary uses the dark-slate "neutral" badge treatment.
-      'variant:secondary': {
-        backgroundColor: 'var(--color-background-gray)',
-        color: 'var(--color-text-gray)',
-        borderColor: 'transparent',
-        borderWidth: '0',
-      },
+      'variant:secondary': SECONDARY_BUTTON,
       'variant:ghost': {
         ':hover': {
           backgroundColor: 'var(--color-overlay-hover)',
@@ -248,6 +279,10 @@ export const gothicTheme = defineTheme({
         color: 'var(--color-text-red)',
       },
     },
+    // Secondary selector triggers match the secondary Button (AST-079 FR2).
+    selector: {'variant:secondary': SECONDARY_SELECTOR},
+    'multi-selector': {'variant:secondary': SECONDARY_SELECTOR},
+    'complex-selector': {'variant:secondary': SECONDARY_BUTTON},
 
     badge: {
       base: {

package/assets/templates/themes/stone/stoneTheme.ts

@@ -56,9 +56,60 @@ const stoneSyntax = defineSyntaxTheme({
     property: ['#4e6357', '#94b2a0'], // Teal T40 / T70
     punctuation: ['#5e5e5e', '#ababb0'], // Stone Neutral T40 / T70
     background: ['#f3f3f5', '#171719'],
+    // Diff rows: the muted green/red at 25% in light and 20% in dark keep
+    // every token at or above 4.5:1 on the tint; the markers are the tinted
+    // text tokens (8.1:1 light, 8.8:1 dark on their tints).
+    added: ['#d0e9ce40', '#b4cdb233'],
+    removed: ['#f9dcd740', '#dcc0bc33'],
+    'added-marker': ['#374c36', '#d0e9ce'],
+    'removed-marker': ['#58413e', '#f9dcd7'],
   },
 });
 
+/**
+ * The secondary Button treatment. Selector, MultiSelector, and ComplexSelector
+ * reuse it for their `secondary` trigger so every secondary control in this
+ * theme matches (AST-079 FR2).
+ */
+const SECONDARY_BUTTON = {
+  backgroundColor: 'transparent',
+  borderWidth: '1.5px',
+  borderStyle: 'solid',
+  borderColor: 'var(--color-border-emphasized)',
+  ':hover': {
+    backgroundColor: 'var(--color-neutral)',
+  },
+} as const;
+
+/**
+ * The secondary Button treatment on Selector and MultiSelector triggers
+ * (AST-079 FR2). Inside an InputGroup a trigger keeps the neutral fill and the
+ * group's edges instead (FR6). The hover stays off disabled and read-only
+ * triggers, which carry `data-disabled` and `data-readonly`.
+ */
+const SECONDARY_SELECTOR = {
+  ':not(.astryx-input-group *)': {
+    backgroundColor: SECONDARY_BUTTON.backgroundColor,
+    borderWidth: SECONDARY_BUTTON.borderWidth,
+    borderStyle: SECONDARY_BUTTON.borderStyle,
+    borderColor: SECONDARY_BUTTON.borderColor,
+  },
+  ':hover:not([data-disabled], [data-readonly], .astryx-input-group *)':
+    SECONDARY_BUTTON[':hover'],
+} as const;
+
+/**
+ * The secondary Button treatment on ComplexSelector triggers (AST-079 FR2), with
+ * the hover kept off a disabled trigger, whose inner button is disabled.
+ */
+const SECONDARY_COMPLEX_SELECTOR = {
+  backgroundColor: SECONDARY_BUTTON.backgroundColor,
+  borderWidth: SECONDARY_BUTTON.borderWidth,
+  borderStyle: SECONDARY_BUTTON.borderStyle,
+  borderColor: SECONDARY_BUTTON.borderColor,
+  ':hover:not(:has(> :disabled))': SECONDARY_BUTTON[':hover'],
+} as const;
+
 export const stoneTheme = defineTheme({
   name: 'stone',
 
@@ -262,15 +313,7 @@ export const stoneTheme = defineTheme({
       base: {
         borderRadius: 'var(--radius-full)',
       },
-      'variant:secondary': {
-        backgroundColor: 'transparent',
-        borderWidth: '1.5px',
-        borderStyle: 'solid',
-        borderColor: 'var(--color-border-emphasized)',
-        ':hover': {
-          backgroundColor: 'var(--color-neutral)',
-        },
-      },
+      'variant:secondary': SECONDARY_BUTTON,
       'variant:destructive': {
         backgroundColor: 'var(--color-background-red)',
         color: 'var(--color-text-red)',
@@ -389,8 +432,12 @@ export const stoneTheme = defineTheme({
     'number-input': INPUT_STATUS_VARS,
     'date-input': INPUT_STATUS_VARS,
     'time-input': INPUT_STATUS_VARS,
-    selector: INPUT_STATUS_VARS,
-    'multi-selector': INPUT_STATUS_VARS,
+    selector: {...INPUT_STATUS_VARS, 'variant:secondary': SECONDARY_SELECTOR},
+    'multi-selector': {
+      ...INPUT_STATUS_VARS,
+      'variant:secondary': SECONDARY_SELECTOR,
+    },
+    'complex-selector': {'variant:secondary': SECONDARY_COMPLEX_SELECTOR},
     typeahead: INPUT_STATUS_VARS,
     tokenizer: INPUT_STATUS_VARS,
 

package/assets/templates/themes/y2k/y2kTheme.ts

@@ -29,9 +29,64 @@ const y2kSyntax = defineSyntaxTheme({
     property: ['#3c6755', '#87b5a1'],
     punctuation: ['#5e5e5e', '#ababab'],
     background: ['#FFF6ED', '#190f00'],
+    // Diff rows: the muted green/red at 25% in light and 20% in dark keep
+    // every token at or above 4.5:1 on the tint. Markers: the tinted text
+    // tokens in light (7.3:1 / 7.9:1); in dark those tokens are near-black,
+    // so the string and tag colours mark the rows (5.1:1 each).
+    added: ['#C5E17A40', '#C5E17A33'],
+    removed: ['#FFC5C340', '#FFC5C333'],
+    'added-marker': ['#3a5500', '#a5af8b'],
+    'removed-marker': ['#8b1d24', '#d19f9d'],
   },
 });
 
+/**
+ * The secondary Button treatment. Selector, MultiSelector, and ComplexSelector
+ * reuse it for their `secondary` trigger so every secondary control in this
+ * theme matches (AST-079 FR2).
+ */
+const SECONDARY_BUTTON = {
+  backgroundColor: 'var(--color-background-green)',
+  borderWidth: '1px',
+  borderStyle: 'solid',
+  borderColor: 'var(--color-text-green)',
+  color: 'var(--color-text-green)',
+  ':hover': {
+    backgroundColor: 'var(--color-border-green)',
+  },
+} as const;
+
+/**
+ * The secondary Button treatment on Selector and MultiSelector triggers
+ * (AST-079 FR2). Inside an InputGroup a trigger keeps the neutral fill and the
+ * group's edges instead (FR6). The hover stays off disabled and read-only
+ * triggers, which carry `data-disabled` and `data-readonly`.
+ */
+const SECONDARY_SELECTOR = {
+  ':not(.astryx-input-group *)': {
+    backgroundColor: SECONDARY_BUTTON.backgroundColor,
+    borderWidth: SECONDARY_BUTTON.borderWidth,
+    borderStyle: SECONDARY_BUTTON.borderStyle,
+    borderColor: SECONDARY_BUTTON.borderColor,
+    color: SECONDARY_BUTTON.color,
+  },
+  ':hover:not([data-disabled], [data-readonly], .astryx-input-group *)':
+    SECONDARY_BUTTON[':hover'],
+} as const;
+
+/**
+ * The secondary Button treatment on ComplexSelector triggers (AST-079 FR2), with
+ * the hover kept off a disabled trigger, whose inner button is disabled.
+ */
+const SECONDARY_COMPLEX_SELECTOR = {
+  backgroundColor: SECONDARY_BUTTON.backgroundColor,
+  borderWidth: SECONDARY_BUTTON.borderWidth,
+  borderStyle: SECONDARY_BUTTON.borderStyle,
+  borderColor: SECONDARY_BUTTON.borderColor,
+  color: SECONDARY_BUTTON.color,
+  ':hover:not(:has(> :disabled))': SECONDARY_BUTTON[':hover'],
+} as const;
+
 export const y2kTheme = defineTheme({
   name: 'y2k',
 
@@ -256,16 +311,7 @@ export const y2kTheme = defineTheme({
         color: 'var(--color-background-body)',
         borderColor: 'transparent',
       },
-      'variant:secondary': {
-        backgroundColor: 'var(--color-background-green)',
-        borderWidth: '1px',
-        borderStyle: 'solid',
-        borderColor: 'var(--color-text-green)',
-        color: 'var(--color-text-green)',
-        ':hover': {
-          backgroundColor: 'var(--color-border-green)',
-        },
-      },
+      'variant:secondary': SECONDARY_BUTTON,
       'variant:ghost': {
         borderColor: 'transparent',
       },
@@ -277,6 +323,10 @@ export const y2kTheme = defineTheme({
         borderColor: 'var(--color-text-red)',
       },
     },
+    // Secondary selector triggers match the secondary Button (AST-079 FR2).
+    selector: {'variant:secondary': SECONDARY_SELECTOR},
+    'multi-selector': {'variant:secondary': SECONDARY_SELECTOR},
+    'complex-selector': {'variant:secondary': SECONDARY_COMPLEX_SELECTOR},
 
     badge: {
       base: {