@oddkin/components 1.0.0-beta.0 → 1.0.0-beta.1

package/dist/disclosure/disclosure.structural.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"disclosure.structural.styles.d.ts","sourceRoot":"","sources":["../../src/disclosure/disclosure.structural.styles.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,eAAO,MAAM,0BAA0B,yCAgDtC,CAAC"}
+{"version":3,"file":"disclosure.structural.styles.d.ts","sourceRoot":"","sources":["../../src/disclosure/disclosure.structural.styles.ts"],"names":[],"mappings":"AAGA;;;;GAIG;AACH,eAAO,MAAM,0BAA0B,yCA+CtC,CAAC"}

package/dist/disclosure/disclosure.structural.styles.js

@@ -1,15 +1,16 @@
 import { css } from '@oddkin/core/styles';
+import { disclosureRecipeStyles } from './disclosure.recipe.styles.js';
 /**
- * A summary row (text, then the chevron at the inline end) above the content. Disclosures joined
+ * A summary row (text, then the chevron at the inline end; the layout recipe in
+ * `disclosure.recipe.ts`) above the content. Disclosures joined
  * in a group share their borders. No brand or visual tokens.
  */
 export const disclosureStructuralStyles = css `
+  ${disclosureRecipeStyles}
   :host {
     display: block;
   }
   .summary {
-    display: flex;
-    align-items: center;
     list-style: none;
     cursor: pointer;
   }

package/dist/disclosure/disclosure.structural.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"disclosure.structural.styles.js","sourceRoot":"","sources":["../../src/disclosure/disclosure.structural.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAE1C;;;GAGG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgD5C,CAAC"}
+{"version":3,"file":"disclosure.structural.styles.js","sourceRoot":"","sources":["../../src/disclosure/disclosure.structural.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAEvE;;;;GAIG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,GAAG,CAAA;IACzC,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8CzB,CAAC"}

package/dist/disclosure/disclosure.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"disclosure.styles.d.ts","sourceRoot":"","sources":["../../src/disclosure/disclosure.styles.ts"],"names":[],"mappings":"AAGA;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,yCA8C5B,CAAC"}
+{"version":3,"file":"disclosure.styles.d.ts","sourceRoot":"","sources":["../../src/disclosure/disclosure.styles.ts"],"names":[],"mappings":"AAGA;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,yCA6C5B,CAAC"}

package/dist/disclosure/disclosure.styles.js

@@ -21,7 +21,6 @@ export const disclosureStyles = css `
     outline-offset: ${token('focus.offset')};
   }
   .summary {
-    gap: ${token('space.sm')};
     padding: ${token('space.md')};
   }
   .marker {

package/dist/disclosure/disclosure.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"disclosure.styles.js","sourceRoot":"","sources":["../../src/disclosure/disclosure.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAE5C;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;cAErB,KAAK,CAAC,sBAAsB,CAAC,UAAU,KAAK,CAAC,sBAAsB,CAAC;kDAChC,KAAK,CAAC,aAAa,CAAC;mDACnB,KAAK,CAAC,uBAAuB,CAAC;aACpE,KAAK,CAAC,oBAAoB,CAAC;mBACrB,KAAK,CAAC,gBAAgB,CAAC;iBACzB,KAAK,CAAC,cAAc,CAAC;mBACnB,KAAK,CAAC,gBAAgB,CAAC;mBACvB,KAAK,CAAC,qBAAqB,CAAC;;;eAGhC,KAAK,CAAC,aAAa,CAAC,UAAU,KAAK,CAAC,kBAAkB,CAAC;sBAChD,KAAK,CAAC,cAAc,CAAC;;;WAGhC,KAAK,CAAC,UAAU,CAAC;eACb,KAAK,CAAC,UAAU,CAAC;;;iBAGf,KAAK,CAAC,cAAc,CAAC;;;iBAGrB,KAAK,CAAC,UAAU,CAAC,IAAI,KAAK,CAAC,UAAU,CAAC;aAC1C,KAAK,CAAC,sBAAsB,CAAC;;;;;;kBAMxB,KAAK,CAAC,sBAAsB,CAAC;kBAC7B,KAAK,CAAC,sBAAsB,CAAC;;;wBAGvB,KAAK,CAAC,UAAU,CAAC;;;qBAGpB,KAAK,CAAC,UAAU,CAAC;;;;;;;aAOzB,KAAK,CAAC,qBAAqB,CAAC;;CAExC,CAAC"}
+{"version":3,"file":"disclosure.styles.js","sourceRoot":"","sources":["../../src/disclosure/disclosure.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAE5C;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;cAErB,KAAK,CAAC,sBAAsB,CAAC,UAAU,KAAK,CAAC,sBAAsB,CAAC;kDAChC,KAAK,CAAC,aAAa,CAAC;mDACnB,KAAK,CAAC,uBAAuB,CAAC;aACpE,KAAK,CAAC,oBAAoB,CAAC;mBACrB,KAAK,CAAC,gBAAgB,CAAC;iBACzB,KAAK,CAAC,cAAc,CAAC;mBACnB,KAAK,CAAC,gBAAgB,CAAC;mBACvB,KAAK,CAAC,qBAAqB,CAAC;;;eAGhC,KAAK,CAAC,aAAa,CAAC,UAAU,KAAK,CAAC,kBAAkB,CAAC;sBAChD,KAAK,CAAC,cAAc,CAAC;;;eAG5B,KAAK,CAAC,UAAU,CAAC;;;iBAGf,KAAK,CAAC,cAAc,CAAC;;;iBAGrB,KAAK,CAAC,UAAU,CAAC,IAAI,KAAK,CAAC,UAAU,CAAC;aAC1C,KAAK,CAAC,sBAAsB,CAAC;;;;;;kBAMxB,KAAK,CAAC,sBAAsB,CAAC;kBAC7B,KAAK,CAAC,sBAAsB,CAAC;;;wBAGvB,KAAK,CAAC,UAAU,CAAC;;;qBAGpB,KAAK,CAAC,UAAU,CAAC;;;;;;;aAOzB,KAAK,CAAC,qBAAqB,CAAC;;CAExC,CAAC"}

package/dist/file-input/file-input.recipe.d.ts

@@ -0,0 +1,3 @@
+/** Arrangement of the file input (layout-recipes.md §14): the drop surface in a column, its header and each file in rows, the file list, and each file's name over its size. */
+export declare const fileInputRecipe: import("../layout/index.js").LayoutRecipe;
+//# sourceMappingURL=file-input.recipe.d.ts.map

package/dist/file-input/file-input.recipe.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-input.recipe.d.ts","sourceRoot":"","sources":["../../src/file-input/file-input.recipe.ts"],"names":[],"mappings":"AAGA,gLAAgL;AAChL,eAAO,MAAM,eAAe,2CAS1B,CAAC"}

package/dist/file-input/file-input.recipe.js

@@ -0,0 +1,14 @@
+import { token } from '@oddkin/tokens/refs';
+import { defineLayoutRecipe, row, stack } from '../layout/index.js';
+/** Arrangement of the file input (layout-recipes.md §14): the drop surface in a column, its header and each file in rows, the file list, and each file's name over its size. */
+export const fileInputRecipe = defineLayoutRecipe({
+    name: 'file-input',
+    regions: {
+        surface: stack({ gap: token('space.xs'), align: 'start' }),
+        header: row({ gap: token('space.md') }),
+        file: row({ gap: token('space.md') }),
+        files: stack({ gap: token('space.sm') }),
+        'file-text': stack({ gap: token('space.none') }),
+    },
+});
+//# sourceMappingURL=file-input.recipe.js.map

package/dist/file-input/file-input.recipe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-input.recipe.js","sourceRoot":"","sources":["../../src/file-input/file-input.recipe.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAC5C,OAAO,EAAE,kBAAkB,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAEpE,gLAAgL;AAChL,MAAM,CAAC,MAAM,eAAe,GAAG,kBAAkB,CAAC;IAChD,IAAI,EAAE,YAAY;IAClB,OAAO,EAAE;QACP,OAAO,EAAE,KAAK,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,UAAU,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC;QAC1D,MAAM,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,UAAU,CAAC,EAAE,CAAC;QACvC,IAAI,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,UAAU,CAAC,EAAE,CAAC;QACrC,KAAK,EAAE,KAAK,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,UAAU,CAAC,EAAE,CAAC;QACxC,WAAW,EAAE,KAAK,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,YAAY,CAAC,EAAE,CAAC;KACjD;CACF,CAAC,CAAC"}

package/dist/file-input/file-input.recipe.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const fileInputRecipeStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=file-input.recipe.styles.d.ts.map

package/dist/file-input/file-input.recipe.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-input.recipe.styles.d.ts","sourceRoot":"","sources":["../../src/file-input/file-input.recipe.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,qBAAqB,yCAEjC,CAAC"}

package/dist/file-input/file-input.recipe.styles.js

@@ -0,0 +1,5 @@
+// Generated from ./file-input.recipe.ts by packages/components/test/recipes.test.ts (UPDATE_FIXTURES=1).
+// Do not edit: change the recipe and regenerate.
+import { unsafeCSS } from '@oddkin/core/styles';
+export const fileInputRecipeStyles = unsafeCSS('@layer odd.layout.base, odd.layout.variant, odd.layout.condition;\n@layer odd.layout.base {\n  .surface {\n    display: flex;\n    flex-direction: column;\n    gap: var(--odd-space-xs);\n    min-inline-size: 0;\n    align-items: start;\n  }\n  .header {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--odd-space-md);\n    flex-wrap: nowrap;\n    min-inline-size: 0;\n  }\n  .file {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--odd-space-md);\n    flex-wrap: nowrap;\n    min-inline-size: 0;\n  }\n  .files {\n    display: flex;\n    flex-direction: column;\n    gap: var(--odd-space-sm);\n    min-inline-size: 0;\n  }\n  .file-text {\n    display: flex;\n    flex-direction: column;\n    gap: var(--odd-space-none);\n    min-inline-size: 0;\n  }\n}\n');
+//# sourceMappingURL=file-input.recipe.styles.js.map

package/dist/file-input/file-input.recipe.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-input.recipe.styles.js","sourceRoot":"","sources":["../../src/file-input/file-input.recipe.styles.ts"],"names":[],"mappings":"AAAA,yGAAyG;AACzG,iDAAiD;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEhD,MAAM,CAAC,MAAM,qBAAqB,GAAG,SAAS,CAC5C,m0BAAm0B,CACp0B,CAAC"}

package/dist/file-input/file-input.structural.styles.d.ts

@@ -1,7 +1,8 @@
 /**
  * The drop zone under the label: the glyph and title in a row, then the description, the picker
  * button, and the file rows, indented under the title; each row a glyph, the name over the size,
- * and the remove button. The native input shows only its button: its own file-count text is
+ * and the remove button (the layout recipe in `file-input.recipe.ts`). The native input shows
+ * only its button: its own file-count text is
  * sized out, since the rows list the files. No brand or visual tokens.
  */
 export declare const fileInputStructuralStyles: import("@oddkin/core/styles").CSSResult;

package/dist/file-input/file-input.structural.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"file-input.structural.styles.d.ts","sourceRoot":"","sources":["../../src/file-input/file-input.structural.styles.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,eAAO,MAAM,yBAAyB,yCAsDrC,CAAC"}
+{"version":3,"file":"file-input.structural.styles.d.ts","sourceRoot":"","sources":["../../src/file-input/file-input.structural.styles.ts"],"names":[],"mappings":"AAGA;;;;;;GAMG;AACH,eAAO,MAAM,yBAAyB,yCAyCrC,CAAC"}

package/dist/file-input/file-input.structural.styles.js

@@ -1,25 +1,20 @@
 import { css } from '@oddkin/core/styles';
+import { fileInputRecipeStyles } from './file-input.recipe.styles.js';
 /**
  * The drop zone under the label: the glyph and title in a row, then the description, the picker
  * button, and the file rows, indented under the title; each row a glyph, the name over the size,
- * and the remove button. The native input shows only its button: its own file-count text is
+ * and the remove button (the layout recipe in `file-input.recipe.ts`). The native input shows
+ * only its button: its own file-count text is
  * sized out, since the rows list the files. No brand or visual tokens.
  */
 export const fileInputStructuralStyles = css `
+  ${fileInputRecipeStyles}
   :host {
     display: block;
   }
-  .surface {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-  }
   .header,
   .file {
-    display: flex;
-    align-items: center;
     align-self: stretch;
-    min-inline-size: 0;
   }
   .header-glyph,
   .file-glyph {
@@ -38,16 +33,10 @@ export const fileInputStructuralStyles = css `
     font-size: initial;
   }
   .files {
-    display: flex;
-    flex-direction: column;
     align-self: stretch;
     margin: 0;
     padding: 0;
   }
-  .file-text {
-    display: flex;
-    flex-direction: column;
-  }
   .remove {
     display: inline-flex;
     flex: none;

package/dist/file-input/file-input.structural.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-input.structural.styles.js","sourceRoot":"","sources":["../../src/file-input/file-input.structural.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAE1C;;;;;GAKG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsD3C,CAAC"}
+{"version":3,"file":"file-input.structural.styles.js","sourceRoot":"","sources":["../../src/file-input/file-input.structural.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAEtE;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,GAAG,CAAA;IACxC,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCxB,CAAC"}

package/dist/file-input/file-input.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"file-input.styles.d.ts","sourceRoot":"","sources":["../../src/file-input/file-input.styles.ts"],"names":[],"mappings":"AAGA;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,yCA8G3B,CAAC"}
+{"version":3,"file":"file-input.styles.d.ts","sourceRoot":"","sources":["../../src/file-input/file-input.styles.ts"],"names":[],"mappings":"AAGA;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,yCAsG3B,CAAC"}

package/dist/file-input/file-input.styles.js

@@ -10,7 +10,6 @@ import { token } from '@oddkin/tokens/refs';
  */
 export const fileInputStyles = css `
   .surface {
-    gap: ${token('space.xs')};
     padding: ${token('card.padding')};
     border: ${token('border.width.default')} solid ${token('color.border.strong')};
     border-radius: ${token('card.radius')};
@@ -23,10 +22,6 @@ export const fileInputStyles = css `
     border-color: ${token('color.action.default')};
     background: ${token('color.selection.surface')};
   }
-  .header,
-  .file {
-    gap: ${token('space.md')};
-  }
   .header-glyph,
   .file-glyph {
     color: ${token('color.text.secondary')};
@@ -92,9 +87,6 @@ export const fileInputStyles = css `
   .field:has(.picker:disabled) :is(.label, .title) {
     color: ${token('color.text.disabled')};
   }
-  .files {
-    gap: ${token('space.sm')};
-  }
   .file-size {
     color: ${token('color.text.secondary')};
     font-size: ${token('type.small.size')};

package/dist/file-input/file-input.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-input.styles.js","sourceRoot":"","sources":["../../src/file-input/file-input.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAE5C;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;;WAEvB,KAAK,CAAC,UAAU,CAAC;eACb,KAAK,CAAC,cAAc,CAAC;cACtB,KAAK,CAAC,sBAAsB,CAAC,UAAU,KAAK,CAAC,qBAAqB,CAAC;qBAC5D,KAAK,CAAC,aAAa,CAAC;kBACvB,KAAK,CAAC,uBAAuB,CAAC;;2BAErB,KAAK,CAAC,sBAAsB,CAAC;kCACtB,KAAK,CAAC,wBAAwB,CAAC;;;oBAG7C,KAAK,CAAC,sBAAsB,CAAC;kBAC/B,KAAK,CAAC,yBAAyB,CAAC;;;;WAIvC,KAAK,CAAC,UAAU,CAAC;;;;aAIf,KAAK,CAAC,sBAAsB,CAAC;iBACzB,KAAK,CAAC,cAAc,CAAC;;;;;mBAKnB,KAAK,CAAC,gBAAgB,CAAC;iBACzB,KAAK,CAAC,cAAc,CAAC;mBACnB,KAAK,CAAC,gBAAgB,CAAC;mBACvB,KAAK,CAAC,qBAAqB,CAAC;sBACzB,KAAK,CAAC,wBAAwB,CAAC;;;;aAIxC,KAAK,CAAC,oBAAoB,CAAC;;;;gCAIR,KAAK,CAAC,cAAc,CAAC,MAAM,KAAK,CAAC,UAAU,CAAC;;;mCAGzC,KAAK,CAAC,cAAc,CAAC,MAAM,KAAK,CAAC,UAAU,CAAC;0BACrD,KAAK,CAAC,UAAU,CAAC;aAC9B,KAAK,CAAC,oBAAoB,CAAC;;;;;0BAKd,KAAK,CAAC,mBAAmB,CAAC,KAAK,KAAK,CAAC,YAAY,CAAC;cAC9D,KAAK,CAAC,YAAY,CAAC;qBACZ,KAAK,CAAC,YAAY,CAAC;sBAClB,KAAK,CAAC,2BAA2B,CAAC;cAC1C,KAAK,CAAC,sBAAsB,CAAC,UAAU,KAAK,CAAC,qBAAqB,CAAC;qBAC5D,KAAK,CAAC,gBAAgB,CAAC;kBAC1B,KAAK,CAAC,uBAAuB,CAAC;aACnC,KAAK,CAAC,oBAAoB,CAAC;mBACrB,KAAK,CAAC,gBAAgB,CAAC;iBACzB,KAAK,CAAC,cAAc,CAAC;mBACnB,KAAK,CAAC,gBAAgB,CAAC;mBACvB,KAAK,CAAC,qBAAqB,CAAC;sBACzB,KAAK,CAAC,wBAAwB,CAAC;;;2BAG1B,KAAK,CAAC,sBAAsB,CAAC;kCACtB,KAAK,CAAC,wBAAwB,CAAC;;;;oBAI7C,KAAK,CAAC,qBAAqB,CAAC;;;;kBAI9B,KAAK,CAAC,sBAAsB,CAAC;;;;kBAI7B,KAAK,CAAC,sBAAsB,CAAC;aAClC,KAAK,CAAC,qBAAqB,CAAC;;;;aAI5B,KAAK,CAAC,qBAAqB,CAAC;;;WAG9B,KAAK,CAAC,UAAU,CAAC;;;aAGf,KAAK,CAAC,sBAAsB,CAAC;iBACzB,KAAK,CAAC,iBAAiB,CAAC;mBACtB,KAAK,CAAC,wBAAwB,CAAC;;;2BAGvB,KAAK,CAAC,mBAAmB,CAAC,KAAK,KAAK,CAAC,YAAY,CAAC;0BACnD,KAAK,CAAC,mBAAmB,CAAC,KAAK,KAAK,CAAC,YAAY,CAAC;qBACvD,KAAK,CAAC,gBAAgB,CAAC;;aAE/B,KAAK,CAAC,sBAAsB,CAAC;iBACzB,KAAK,CAAC,cAAc,CAAC;;;;oBAIlB,KAAK,CAAC,qBAAqB,CAAC;eACjC,KAAK,CAAC,oBAAoB,CAAC;;;;aAI7B,KAAK,CAAC,qBAAqB,CAAC;;;CAGxC,CAAC"}
+{"version":3,"file":"file-input.styles.js","sourceRoot":"","sources":["../../src/file-input/file-input.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAE5C;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;;eAEnB,KAAK,CAAC,cAAc,CAAC;cACtB,KAAK,CAAC,sBAAsB,CAAC,UAAU,KAAK,CAAC,qBAAqB,CAAC;qBAC5D,KAAK,CAAC,aAAa,CAAC;kBACvB,KAAK,CAAC,uBAAuB,CAAC;;2BAErB,KAAK,CAAC,sBAAsB,CAAC;kCACtB,KAAK,CAAC,wBAAwB,CAAC;;;oBAG7C,KAAK,CAAC,sBAAsB,CAAC;kBAC/B,KAAK,CAAC,yBAAyB,CAAC;;;;aAIrC,KAAK,CAAC,sBAAsB,CAAC;iBACzB,KAAK,CAAC,cAAc,CAAC;;;;;mBAKnB,KAAK,CAAC,gBAAgB,CAAC;iBACzB,KAAK,CAAC,cAAc,CAAC;mBACnB,KAAK,CAAC,gBAAgB,CAAC;mBACvB,KAAK,CAAC,qBAAqB,CAAC;sBACzB,KAAK,CAAC,wBAAwB,CAAC;;;;aAIxC,KAAK,CAAC,oBAAoB,CAAC;;;;gCAIR,KAAK,CAAC,cAAc,CAAC,MAAM,KAAK,CAAC,UAAU,CAAC;;;mCAGzC,KAAK,CAAC,cAAc,CAAC,MAAM,KAAK,CAAC,UAAU,CAAC;0BACrD,KAAK,CAAC,UAAU,CAAC;aAC9B,KAAK,CAAC,oBAAoB,CAAC;;;;;0BAKd,KAAK,CAAC,mBAAmB,CAAC,KAAK,KAAK,CAAC,YAAY,CAAC;cAC9D,KAAK,CAAC,YAAY,CAAC;qBACZ,KAAK,CAAC,YAAY,CAAC;sBAClB,KAAK,CAAC,2BAA2B,CAAC;cAC1C,KAAK,CAAC,sBAAsB,CAAC,UAAU,KAAK,CAAC,qBAAqB,CAAC;qBAC5D,KAAK,CAAC,gBAAgB,CAAC;kBAC1B,KAAK,CAAC,uBAAuB,CAAC;aACnC,KAAK,CAAC,oBAAoB,CAAC;mBACrB,KAAK,CAAC,gBAAgB,CAAC;iBACzB,KAAK,CAAC,cAAc,CAAC;mBACnB,KAAK,CAAC,gBAAgB,CAAC;mBACvB,KAAK,CAAC,qBAAqB,CAAC;sBACzB,KAAK,CAAC,wBAAwB,CAAC;;;2BAG1B,KAAK,CAAC,sBAAsB,CAAC;kCACtB,KAAK,CAAC,wBAAwB,CAAC;;;;oBAI7C,KAAK,CAAC,qBAAqB,CAAC;;;;kBAI9B,KAAK,CAAC,sBAAsB,CAAC;;;;kBAI7B,KAAK,CAAC,sBAAsB,CAAC;aAClC,KAAK,CAAC,qBAAqB,CAAC;;;;aAI5B,KAAK,CAAC,qBAAqB,CAAC;;;aAG5B,KAAK,CAAC,sBAAsB,CAAC;iBACzB,KAAK,CAAC,iBAAiB,CAAC;mBACtB,KAAK,CAAC,wBAAwB,CAAC;;;2BAGvB,KAAK,CAAC,mBAAmB,CAAC,KAAK,KAAK,CAAC,YAAY,CAAC;0BACnD,KAAK,CAAC,mBAAmB,CAAC,KAAK,KAAK,CAAC,YAAY,CAAC;qBACvD,KAAK,CAAC,gBAAgB,CAAC;;aAE/B,KAAK,CAAC,sBAAsB,CAAC;iBACzB,KAAK,CAAC,cAAc,CAAC;;;;oBAIlB,KAAK,CAAC,qBAAqB,CAAC;eACjC,KAAK,CAAC,oBAAoB,CAAC;;;;aAI7B,KAAK,CAAC,qBAAqB,CAAC;;;CAGxC,CAAC"}

package/dist/input/input.styles.d.ts

@@ -2,7 +2,9 @@
  * Oddkin's default input look beyond the shared control module: the search field's clear button,
  * a round target of the minimum size around its 1em glyph, in secondary text; and Figma
  * `number`'s stepper, a sunken segment inside the field's border at its end, of two buttons a
- * control height wide, the text kept clear of it by `space.xs`.
+ * control height wide, the text kept clear of it by `space.xs`. The control takes the focus ring
+ * on `:focus`: a text field matches `:focus-visible` on any focus anyway, and WebKit focuses a date
+ * or time field's own segments, so there the input never matches it.
  */
 export declare const inputStyles: import("@oddkin/core/styles").CSSResult;
 //# sourceMappingURL=input.styles.d.ts.map

package/dist/input/input.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input.styles.d.ts","sourceRoot":"","sources":["../../src/input/input.styles.ts"],"names":[],"mappings":"AAGA;;;;;GAKG;AACH,eAAO,MAAM,WAAW,yCAuCvB,CAAC"}
+{"version":3,"file":"input.styles.d.ts","sourceRoot":"","sources":["../../src/input/input.styles.ts"],"names":[],"mappings":"AAGA;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,yCA2CvB,CAAC"}

package/dist/input/input.styles.js

@@ -4,9 +4,15 @@ import { token } from '@oddkin/tokens/refs';
  * Oddkin's default input look beyond the shared control module: the search field's clear button,
  * a round target of the minimum size around its 1em glyph, in secondary text; and Figma
  * `number`'s stepper, a sunken segment inside the field's border at its end, of two buttons a
- * control height wide, the text kept clear of it by `space.xs`.
+ * control height wide, the text kept clear of it by `space.xs`. The control takes the focus ring
+ * on `:focus`: a text field matches `:focus-visible` on any focus anyway, and WebKit focuses a date
+ * or time field's own segments, so there the input never matches it.
  */
 export const inputStyles = css `
+  .control:focus {
+    outline: ${token('focus.width')} solid ${token('color.focus.ring')};
+    outline-offset: ${token('focus.offset')};
+  }
   .clear {
     inline-size: ${token('target.min')};
     block-size: ${token('target.min')};

package/dist/input/input.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.styles.js","sourceRoot":"","sources":["../../src/input/input.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAE5C;;;;;GAKG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;mBAEX,KAAK,CAAC,YAAY,CAAC;kBACpB,KAAK,CAAC,YAAY,CAAC;0BACX,KAAK,CAAC,YAAY,CAAC;qBACxB,KAAK,CAAC,aAAa,CAAC;aAC5B,KAAK,CAAC,sBAAsB,CAAC;;;;oBAItB,KAAK,CAAC,qBAAqB,CAAC;eACjC,KAAK,CAAC,oBAAoB,CAAC;;;oBAGtB,KAAK,CAAC,qBAAqB,CAAC;;;;cAIlC,KAAK,CAAC,sBAAsB,CAAC;;;gCAGX,KAAK,CAAC,gBAAgB,CAAC,OAAO,KAAK,CAAC,sBAAsB,CAAC;;;gCAG3D,KAAK,CAAC,gBAAgB,CAAC,OAAO,KAAK,CAAC,sBAAsB,CAAC;;kBAEzE,KAAK,CAAC,sBAAsB,CAAC;;;mBAG5B,KAAK,CAAC,mBAAmB,CAAC;;;aAGhC,KAAK,CAAC,qBAAqB,CAAC;;;;YAI7B,KAAK,CAAC,mBAAmB,CAAC,MAAM,KAAK,CAAC,sBAAsB,CAAC,MAAM,KAAK,CAAC,UAAU,CAAC;;;CAG/F,CAAC"}
+{"version":3,"file":"input.styles.js","sourceRoot":"","sources":["../../src/input/input.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAE5C;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;eAEf,KAAK,CAAC,aAAa,CAAC,UAAU,KAAK,CAAC,kBAAkB,CAAC;sBAChD,KAAK,CAAC,cAAc,CAAC;;;mBAGxB,KAAK,CAAC,YAAY,CAAC;kBACpB,KAAK,CAAC,YAAY,CAAC;0BACX,KAAK,CAAC,YAAY,CAAC;qBACxB,KAAK,CAAC,aAAa,CAAC;aAC5B,KAAK,CAAC,sBAAsB,CAAC;;;;oBAItB,KAAK,CAAC,qBAAqB,CAAC;eACjC,KAAK,CAAC,oBAAoB,CAAC;;;oBAGtB,KAAK,CAAC,qBAAqB,CAAC;;;;cAIlC,KAAK,CAAC,sBAAsB,CAAC;;;gCAGX,KAAK,CAAC,gBAAgB,CAAC,OAAO,KAAK,CAAC,sBAAsB,CAAC;;;gCAG3D,KAAK,CAAC,gBAAgB,CAAC,OAAO,KAAK,CAAC,sBAAsB,CAAC;;kBAEzE,KAAK,CAAC,sBAAsB,CAAC;;;mBAG5B,KAAK,CAAC,mBAAmB,CAAC;;;aAGhC,KAAK,CAAC,qBAAqB,CAAC;;;;YAI7B,KAAK,CAAC,mBAAmB,CAAC,MAAM,KAAK,CAAC,sBAAsB,CAAC,MAAM,KAAK,CAAC,UAAU,CAAC;;;CAG/F,CAAC"}

package/dist/pagination/pagination.recipe.d.ts

@@ -0,0 +1,3 @@
+/** Arrangement of the pagination (layout-recipes.md §14): the position and the page list apart in a row that wraps, and the pages in a row that wraps. */
+export declare const paginationRecipe: import("../layout/index.js").LayoutRecipe;
+//# sourceMappingURL=pagination.recipe.d.ts.map

package/dist/pagination/pagination.recipe.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.recipe.d.ts","sourceRoot":"","sources":["../../src/pagination/pagination.recipe.ts"],"names":[],"mappings":"AAGA,0JAA0J;AAC1J,eAAO,MAAM,gBAAgB,2CAM3B,CAAC"}

package/dist/pagination/pagination.recipe.js

@@ -0,0 +1,11 @@
+import { token } from '@oddkin/tokens/refs';
+import { defineLayoutRecipe, row } from '../layout/index.js';
+/** Arrangement of the pagination (layout-recipes.md §14): the position and the page list apart in a row that wraps, and the pages in a row that wraps. */
+export const paginationRecipe = defineLayoutRecipe({
+    name: 'pagination',
+    regions: {
+        pagination: row({ gap: token('space.sm'), wrap: true, justify: 'space-between' }),
+        list: row({ gap: token('space.xs'), wrap: true }),
+    },
+});
+//# sourceMappingURL=pagination.recipe.js.map

package/dist/pagination/pagination.recipe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.recipe.js","sourceRoot":"","sources":["../../src/pagination/pagination.recipe.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAC5C,OAAO,EAAE,kBAAkB,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AAE7D,0JAA0J;AAC1J,MAAM,CAAC,MAAM,gBAAgB,GAAG,kBAAkB,CAAC;IACjD,IAAI,EAAE,YAAY;IAClB,OAAO,EAAE;QACP,UAAU,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,UAAU,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,eAAe,EAAE,CAAC;QACjF,IAAI,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,UAAU,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;KAClD;CACF,CAAC,CAAC"}

package/dist/pagination/pagination.recipe.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const paginationRecipeStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=pagination.recipe.styles.d.ts.map

package/dist/pagination/pagination.recipe.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.recipe.styles.d.ts","sourceRoot":"","sources":["../../src/pagination/pagination.recipe.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,sBAAsB,yCAElC,CAAC"}

package/dist/pagination/pagination.recipe.styles.js

@@ -0,0 +1,5 @@
+// Generated from ./pagination.recipe.ts by packages/components/test/recipes.test.ts (UPDATE_FIXTURES=1).
+// Do not edit: change the recipe and regenerate.
+import { unsafeCSS } from '@oddkin/core/styles';
+export const paginationRecipeStyles = unsafeCSS('@layer odd.layout.base, odd.layout.variant, odd.layout.condition;\n@layer odd.layout.base {\n  .pagination {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--odd-space-sm);\n    flex-wrap: wrap;\n    min-inline-size: 0;\n    justify-content: space-between;\n  }\n  .list {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--odd-space-xs);\n    flex-wrap: wrap;\n    min-inline-size: 0;\n  }\n}\n');
+//# sourceMappingURL=pagination.recipe.styles.js.map

package/dist/pagination/pagination.recipe.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.recipe.styles.js","sourceRoot":"","sources":["../../src/pagination/pagination.recipe.styles.ts"],"names":[],"mappings":"AAAA,yGAAyG;AACzG,iDAAiD;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEhD,MAAM,CAAC,MAAM,sBAAsB,GAAG,SAAS,CAC7C,ydAAyd,CAC1d,CAAC"}

package/dist/pagination/pagination.structural.styles.d.ts

@@ -1,6 +1,6 @@
 /**
- * The position text at the start and the controls at the end of one row, wrapping when narrow.
- * No brand or visual tokens.
+ * The position text at the start and the controls at the end of one row, wrapping when narrow:
+ * the layout recipe in `pagination.recipe.ts`. No brand or visual tokens.
  */
 export declare const paginationStructuralStyles: import("@oddkin/core/styles").CSSResult;
 //# sourceMappingURL=pagination.structural.styles.d.ts.map

package/dist/pagination/pagination.structural.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.structural.styles.d.ts","sourceRoot":"","sources":["../../src/pagination/pagination.structural.styles.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,eAAO,MAAM,0BAA0B,yCAuDtC,CAAC"}
+{"version":3,"file":"pagination.structural.styles.d.ts","sourceRoot":"","sources":["../../src/pagination/pagination.structural.styles.ts"],"names":[],"mappings":"AAGA;;;GAGG;AACH,eAAO,MAAM,0BAA0B,yCA8CtC,CAAC"}

package/dist/pagination/pagination.structural.styles.js

@@ -1,26 +1,18 @@
 import { css } from '@oddkin/core/styles';
+import { paginationRecipeStyles } from './pagination.recipe.styles.js';
 /**
- * The position text at the start and the controls at the end of one row, wrapping when narrow.
- * No brand or visual tokens.
+ * The position text at the start and the controls at the end of one row, wrapping when narrow:
+ * the layout recipe in `pagination.recipe.ts`. No brand or visual tokens.
  */
 export const paginationStructuralStyles = css `
+  ${paginationRecipeStyles}
   :host {
     display: block;
   }
-  .pagination {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: space-between;
-    min-inline-size: 0;
-  }
   .status {
     margin: 0;
   }
   .list {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
     margin: 0;
     padding: 0;
     list-style: none;

package/dist/pagination/pagination.structural.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.structural.styles.js","sourceRoot":"","sources":["../../src/pagination/pagination.structural.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAE1C;;;GAGG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuD5C,CAAC"}
+{"version":3,"file":"pagination.structural.styles.js","sourceRoot":"","sources":["../../src/pagination/pagination.structural.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AAEvE;;;GAGG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,GAAG,CAAA;IACzC,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CzB,CAAC"}

package/dist/pagination/pagination.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.styles.d.ts","sourceRoot":"","sources":["../../src/pagination/pagination.styles.ts"],"names":[],"mappings":"AAGA;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,yCAkD5B,CAAC"}
+{"version":3,"file":"pagination.styles.d.ts","sourceRoot":"","sources":["../../src/pagination/pagination.styles.ts"],"names":[],"mappings":"AAGA;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,yCA8C5B,CAAC"}

package/dist/pagination/pagination.styles.js

@@ -7,7 +7,6 @@ import { token } from '@oddkin/tokens/refs';
  */
 export const paginationStyles = css `
   .pagination {
-    gap: ${token('space.sm')};
     padding: ${token('space.xs')};
     border-radius: var(--odd-pagination-radius, ${token('control.radius')});
     background: ${token('color.surface.default')};
@@ -20,9 +19,6 @@ export const paginationStyles = css `
   .status {
     color: ${token('color.text.secondary')};
   }
-  .list {
-    gap: ${token('space.xs')};
-  }
   .tile {
     min-inline-size: ${token('control.height.md')};
     min-block-size: ${token('control.height.md')};

package/dist/pagination/pagination.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.styles.js","sourceRoot":"","sources":["../../src/pagination/pagination.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAE5C;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;WAExB,KAAK,CAAC,UAAU,CAAC;eACb,KAAK,CAAC,UAAU,CAAC;kDACkB,KAAK,CAAC,gBAAgB,CAAC;kBACvD,KAAK,CAAC,uBAAuB,CAAC;aACnC,KAAK,CAAC,oBAAoB,CAAC;mBACrB,KAAK,CAAC,gBAAgB,CAAC;iBACzB,KAAK,CAAC,cAAc,CAAC;mBACnB,KAAK,CAAC,gBAAgB,CAAC;mBACvB,KAAK,CAAC,qBAAqB,CAAC;;;aAGlC,KAAK,CAAC,sBAAsB,CAAC;;;WAG/B,KAAK,CAAC,UAAU,CAAC;;;uBAGL,KAAK,CAAC,mBAAmB,CAAC;sBAC3B,KAAK,CAAC,mBAAmB,CAAC;sBAC1B,KAAK,CAAC,UAAU,CAAC;oBACnB,KAAK,CAAC,sBAAsB,CAAC;oBAC7B,KAAK,CAAC,sBAAsB,CAAC;qBAC5B,KAAK,CAAC,gBAAgB,CAAC;kBAC1B,KAAK,CAAC,uBAAuB,CAAC;aACnC,KAAK,CAAC,oBAAoB,CAAC;;;oBAGpB,KAAK,CAAC,qBAAqB,CAAC;iBAC/B,KAAK,CAAC,cAAc,CAAC;;;;kBAIpB,KAAK,CAAC,4BAA4B,CAAC;aACxC,KAAK,CAAC,4BAA4B,CAAC;;;;aAInC,KAAK,CAAC,qBAAqB,CAAC;;;aAG5B,KAAK,CAAC,sBAAsB,CAAC;iBACzB,KAAK,CAAC,cAAc,CAAC;;;;oBAIlB,KAAK,CAAC,qBAAqB,CAAC;;;CAG/C,CAAC"}
+{"version":3,"file":"pagination.styles.js","sourceRoot":"","sources":["../../src/pagination/pagination.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAE5C;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;eAEpB,KAAK,CAAC,UAAU,CAAC;kDACkB,KAAK,CAAC,gBAAgB,CAAC;kBACvD,KAAK,CAAC,uBAAuB,CAAC;aACnC,KAAK,CAAC,oBAAoB,CAAC;mBACrB,KAAK,CAAC,gBAAgB,CAAC;iBACzB,KAAK,CAAC,cAAc,CAAC;mBACnB,KAAK,CAAC,gBAAgB,CAAC;mBACvB,KAAK,CAAC,qBAAqB,CAAC;;;aAGlC,KAAK,CAAC,sBAAsB,CAAC;;;uBAGnB,KAAK,CAAC,mBAAmB,CAAC;sBAC3B,KAAK,CAAC,mBAAmB,CAAC;sBAC1B,KAAK,CAAC,UAAU,CAAC;oBACnB,KAAK,CAAC,sBAAsB,CAAC;oBAC7B,KAAK,CAAC,sBAAsB,CAAC;qBAC5B,KAAK,CAAC,gBAAgB,CAAC;kBAC1B,KAAK,CAAC,uBAAuB,CAAC;aACnC,KAAK,CAAC,oBAAoB,CAAC;;;oBAGpB,KAAK,CAAC,qBAAqB,CAAC;iBAC/B,KAAK,CAAC,cAAc,CAAC;;;;kBAIpB,KAAK,CAAC,4BAA4B,CAAC;aACxC,KAAK,CAAC,4BAA4B,CAAC;;;;aAInC,KAAK,CAAC,qBAAqB,CAAC;;;aAG5B,KAAK,CAAC,sBAAsB,CAAC;iBACzB,KAAK,CAAC,cAAc,CAAC;;;;oBAIlB,KAAK,CAAC,qBAAqB,CAAC;;;CAG/C,CAAC"}

package/dist/segmented-control/segmented-control.structural.styles.d.ts

@@ -1,8 +1,10 @@
 /**
  * The control is a block; its label, description, and error use the shared field layout. The
- * track lines up equal segments; each segment stacks its radio, drawn as the segment's surface
- * (`appearance: none`), under its text, which lets pointer events through to the radio. No
- * brand tokens.
+ * track is a row of equal columns, each at least as wide as its option's longest word, so an
+ * option's text wraps between words, never inside one (a control sized to its content gets room
+ * for its widest option in every column). Each segment stacks its radio, drawn as the segment's
+ * surface (`appearance: none`), under its text, which lets pointer events through to the radio.
+ * No brand tokens.
  */
 export declare const segmentedControlStructuralStyles: import("@oddkin/core/styles").CSSResult;
 //# sourceMappingURL=segmented-control.structural.styles.d.ts.map

package/dist/segmented-control/segmented-control.structural.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"segmented-control.structural.styles.d.ts","sourceRoot":"","sources":["../../src/segmented-control/segmented-control.structural.styles.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,eAAO,MAAM,gCAAgC,yCAkD5C,CAAC"}
+{"version":3,"file":"segmented-control.structural.styles.d.ts","sourceRoot":"","sources":["../../src/segmented-control/segmented-control.structural.styles.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AACH,eAAO,MAAM,gCAAgC,yCAkD5C,CAAC"}

package/dist/segmented-control/segmented-control.structural.styles.js

@@ -1,21 +1,23 @@
 import { css } from '@oddkin/core/styles';
 /**
  * The control is a block; its label, description, and error use the shared field layout. The
- * track lines up equal segments; each segment stacks its radio, drawn as the segment's surface
- * (`appearance: none`), under its text, which lets pointer events through to the radio. No
- * brand tokens.
+ * track is a row of equal columns, each at least as wide as its option's longest word, so an
+ * option's text wraps between words, never inside one (a control sized to its content gets room
+ * for its widest option in every column). Each segment stacks its radio, drawn as the segment's
+ * surface (`appearance: none`), under its text, which lets pointer events through to the radio.
+ * No brand tokens.
  */
 export const segmentedControlStructuralStyles = css `
   :host {
     display: block;
   }
   .track {
-    display: flex;
+    display: grid;
+    grid-auto-columns: 1fr;
+    grid-auto-flow: column;
   }
   .segment {
     display: grid;
-    flex: 1 1 0;
-    min-inline-size: 0;
     cursor: pointer;
   }
   .segment:has(:disabled) {
@@ -37,8 +39,8 @@ export const segmentedControlStructuralStyles = css `
     display: flex;
     align-items: center;
     justify-content: center;
-    min-inline-size: 0;
     text-align: center;
+    overflow-wrap: break-word;
     pointer-events: none;
   }
   @media (forced-colors: active) {

package/dist/segmented-control/segmented-control.structural.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"segmented-control.structural.styles.js","sourceRoot":"","sources":["../../src/segmented-control/segmented-control.structural.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAE1C;;;;;GAKG;AACH,MAAM,CAAC,MAAM,gCAAgC,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkDlD,CAAC"}
+{"version":3,"file":"segmented-control.structural.styles.js","sourceRoot":"","sources":["../../src/segmented-control/segmented-control.structural.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAE1C;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,gCAAgC,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkDlD,CAAC"}

package/dist/select/select.structural.styles.d.ts

@@ -1,10 +1,12 @@
 /**
  * The select is a block; its field layout is the shared `fieldStructuralStyles`. Where
  * `appearance: base-select` and `::picker(select)` are supported, the select and its picker opt
- * into the customizable select: the engine's arrow gives way to the element's chevron and each
- * option's check moves to the row's end, as on the option rows. Rows size their borders in; a
- * placeholder stays out of the open picker; in forced colours the chosen option and disabled text
- * keep system colours, as on the option rows. No brand tokens.
+ * into the customizable select: the engine's arrow gives way to the element's chevron, the chosen
+ * option's text stays in the middle of the field as in a native select (Chromium lays a
+ * `base-select` box's content at its top), and each option's check moves to the row's end, as on
+ * the option rows. Rows size their borders in; a placeholder stays out of the open picker; in
+ * forced colours the chosen option and disabled text keep system colours, as on the option rows.
+ * No brand tokens.
  */
 export declare const selectStructuralStyles: import("@oddkin/core/styles").CSSResult;
 //# sourceMappingURL=select.structural.styles.d.ts.map

package/dist/select/select.structural.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.structural.styles.d.ts","sourceRoot":"","sources":["../../src/select/select.structural.styles.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AACH,eAAO,MAAM,sBAAsB,yCAoClC,CAAC"}
+{"version":3,"file":"select.structural.styles.d.ts","sourceRoot":"","sources":["../../src/select/select.structural.styles.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AACH,eAAO,MAAM,sBAAsB,yCAuClC,CAAC"}

package/dist/select/select.structural.styles.js

@@ -2,10 +2,12 @@ import { css } from '@oddkin/core/styles';
 /**
  * The select is a block; its field layout is the shared `fieldStructuralStyles`. Where
  * `appearance: base-select` and `::picker(select)` are supported, the select and its picker opt
- * into the customizable select: the engine's arrow gives way to the element's chevron and each
- * option's check moves to the row's end, as on the option rows. Rows size their borders in; a
- * placeholder stays out of the open picker; in forced colours the chosen option and disabled text
- * keep system colours, as on the option rows. No brand tokens.
+ * into the customizable select: the engine's arrow gives way to the element's chevron, the chosen
+ * option's text stays in the middle of the field as in a native select (Chromium lays a
+ * `base-select` box's content at its top), and each option's check moves to the row's end, as on
+ * the option rows. Rows size their borders in; a placeholder stays out of the open picker; in
+ * forced colours the chosen option and disabled text keep system colours, as on the option rows.
+ * No brand tokens.
  */
 export const selectStructuralStyles = css `
   :host {
@@ -16,6 +18,9 @@ export const selectStructuralStyles = css `
     .control::picker(select) {
       appearance: base-select;
     }
+    .control-box > select.control {
+      align-items: center;
+    }
     .control option {
       box-sizing: border-box;
     }

package/dist/select/select.structural.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.structural.styles.js","sourceRoot":"","sources":["../../src/select/select.structural.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAE1C;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCxC,CAAC"}
+{"version":3,"file":"select.structural.styles.js","sourceRoot":"","sources":["../../src/select/select.structural.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAE1C;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuCxC,CAAC"}

package/dist/side-nav/side-nav.structural.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"side-nav.structural.styles.d.ts","sourceRoot":"","sources":["../../src/side-nav/side-nav.structural.styles.ts"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,eAAO,MAAM,uBAAuB,yCAoBnC,CAAC"}
+{"version":3,"file":"side-nav.structural.styles.d.ts","sourceRoot":"","sources":["../../src/side-nav/side-nav.structural.styles.ts"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,eAAO,MAAM,uBAAuB,yCA0BnC,CAAC"}

package/dist/side-nav/side-nav.structural.styles.js

@@ -14,6 +14,7 @@ export const sideNavStructuralStyles = css `
     list-style: none;
   }
   ::slotted(a) {
+    position: relative;
     box-sizing: border-box;
     display: flex;
     align-items: center;
@@ -21,9 +22,14 @@ export const sideNavStructuralStyles = css `
     text-decoration: none;
     overflow-wrap: anywhere;
   }
+  ::slotted(a[aria-current='page'])::before {
+    content: '';
+    position: absolute;
+    inset-inline-start: 0;
+  }
   @media (forced-colors: active) {
-    .root ::slotted(a[aria-current='page']) {
-      border-inline-start-color: Highlight;
+    .root ::slotted(a[aria-current='page'])::before {
+      background: Highlight;
     }
   }
 `;

package/dist/side-nav/side-nav.structural.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"side-nav.structural.styles.js","sourceRoot":"","sources":["../../src/side-nav/side-nav.structural.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAE1C;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;CAoBzC,CAAC"}
+{"version":3,"file":"side-nav.structural.styles.js","sourceRoot":"","sources":["../../src/side-nav/side-nav.structural.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAE1C;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BzC,CAAC"}

package/dist/side-nav/side-nav.styles.d.ts

@@ -1,6 +1,7 @@
 /**
  * Oddkin's default visual styles for the side navigation, through `navigation.*` roles. Entry
- * rows look as `navRowStyles` draws them; slotted native links take the same look here.
+ * rows look as `navRowStyles` draws them; slotted native links take the same look here. A size
+ * container reports no content width, so in a shrink-to-fit parent the host takes a sidebar's.
  */
 export declare const sideNavStyles: import("@oddkin/core/styles").CSSResult;
 //# sourceMappingURL=side-nav.styles.d.ts.map

package/dist/side-nav/side-nav.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"side-nav.styles.d.ts","sourceRoot":"","sources":["../../src/side-nav/side-nav.styles.ts"],"names":[],"mappings":"AAGA;;;GAGG;AACH,eAAO,MAAM,aAAa,yCAwDzB,CAAC"}
+{"version":3,"file":"side-nav.styles.d.ts","sourceRoot":"","sources":["../../src/side-nav/side-nav.styles.ts"],"names":[],"mappings":"AAGA;;;;GAIG;AACH,eAAO,MAAM,aAAa,yCA8DzB,CAAC"}