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

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

@@ -2,9 +2,13 @@ import { css } from '@oddkin/core/styles';
 import { token } from '@oddkin/tokens/refs';
 /**
  * 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 const sideNavStyles = css `
+  :host {
+    contain-intrinsic-inline-size: ${token('layout.sidebar-width')};
+  }
   .root {
     color: ${token('color.text.primary')};
     font-family: ${token('type.ui.family')};
@@ -21,7 +25,6 @@ export const sideNavStyles = css `
     gap: ${token('navigation.item.gap')};
     min-block-size: max(${token('navigation.item.min-height')}, ${token('target.min')});
     padding: ${token('navigation.item.padding.block')} ${token('navigation.item.padding.inline')};
-    border-inline-start: ${token('border.width.strong')} solid transparent;
     border-radius: ${token('control.radius')};
     transition-property: background-color, color;
     transition-duration: ${token('motion.duration.fast')};
@@ -34,10 +37,14 @@ export const sideNavStyles = css `
   }
   /* The current page is marked by a bar and weight, not colour alone. */
   ::slotted(a[aria-current='page']) {
-    border-inline-start-color: ${token('color.action.default')};
     background: ${token('color.surface.hover')};
     font-weight: ${token('font.weight.semibold')};
   }
+  ::slotted(a[aria-current='page'])::before {
+    inset-block: ${token('navigation.item.padding.block')};
+    inline-size: ${token('border.width.strong')};
+    background: ${token('color.action.default')};
+  }
   .badge {
     flex: none;
     padding-inline: ${token('space.xs')};

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

@@ -1 +1 @@
-{"version":3,"file":"side-nav.styles.js","sourceRoot":"","sources":["../../src/side-nav/side-nav.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAE5C;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;;aAEnB,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;;;0BAG3B,KAAK,CAAC,qBAAqB,CAAC;4BAC1B,KAAK,CAAC,mBAAmB,CAAC;;;WAG3C,KAAK,CAAC,qBAAqB,CAAC;0BACb,KAAK,CAAC,4BAA4B,CAAC,KAAK,KAAK,CAAC,YAAY,CAAC;eACtE,KAAK,CAAC,+BAA+B,CAAC,IAAI,KAAK,CAAC,gCAAgC,CAAC;2BACrE,KAAK,CAAC,qBAAqB,CAAC;qBAClC,KAAK,CAAC,gBAAgB,CAAC;;2BAEjB,KAAK,CAAC,sBAAsB,CAAC;kCACtB,KAAK,CAAC,wBAAwB,CAAC;;;;oBAI7C,KAAK,CAAC,qBAAqB,CAAC;;;;;iCAKf,KAAK,CAAC,sBAAsB,CAAC;kBAC5C,KAAK,CAAC,qBAAqB,CAAC;mBAC3B,KAAK,CAAC,sBAAsB,CAAC;;;;sBAI1B,KAAK,CAAC,UAAU,CAAC;qBAClB,KAAK,CAAC,aAAa,CAAC;kBACvB,KAAK,CAAC,sBAAsB,CAAC;aAClC,KAAK,CAAC,sBAAsB,CAAC;iBACzB,KAAK,CAAC,iBAAiB,CAAC;mBACtB,KAAK,CAAC,wBAAwB,CAAC;;;;;;;yBAOzB,KAAK,CAAC,qBAAqB,CAAC;wBAC7B,KAAK,CAAC,qBAAqB,CAAC;;4BAExB,KAAK,CAAC,sBAAsB,CAAC,IAAI,KAAK,CAAC,wBAAwB,CAAC;;;;;CAK3F,CAAC"}
+{"version":3,"file":"side-nav.styles.js","sourceRoot":"","sources":["../../src/side-nav/side-nav.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,aAAa,GAAG,GAAG,CAAA;;qCAEK,KAAK,CAAC,sBAAsB,CAAC;;;aAGrD,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;;;0BAG3B,KAAK,CAAC,qBAAqB,CAAC;4BAC1B,KAAK,CAAC,mBAAmB,CAAC;;;WAG3C,KAAK,CAAC,qBAAqB,CAAC;0BACb,KAAK,CAAC,4BAA4B,CAAC,KAAK,KAAK,CAAC,YAAY,CAAC;eACtE,KAAK,CAAC,+BAA+B,CAAC,IAAI,KAAK,CAAC,gCAAgC,CAAC;qBAC3E,KAAK,CAAC,gBAAgB,CAAC;;2BAEjB,KAAK,CAAC,sBAAsB,CAAC;kCACtB,KAAK,CAAC,wBAAwB,CAAC;;;;oBAI7C,KAAK,CAAC,qBAAqB,CAAC;;;;;kBAK9B,KAAK,CAAC,qBAAqB,CAAC;mBAC3B,KAAK,CAAC,sBAAsB,CAAC;;;mBAG7B,KAAK,CAAC,+BAA+B,CAAC;mBACtC,KAAK,CAAC,qBAAqB,CAAC;kBAC7B,KAAK,CAAC,sBAAsB,CAAC;;;;sBAIzB,KAAK,CAAC,UAAU,CAAC;qBAClB,KAAK,CAAC,aAAa,CAAC;kBACvB,KAAK,CAAC,sBAAsB,CAAC;aAClC,KAAK,CAAC,sBAAsB,CAAC;iBACzB,KAAK,CAAC,iBAAiB,CAAC;mBACtB,KAAK,CAAC,wBAAwB,CAAC;;;;;;;yBAOzB,KAAK,CAAC,qBAAqB,CAAC;wBAC7B,KAAK,CAAC,qBAAqB,CAAC;;4BAExB,KAAK,CAAC,sBAAsB,CAAC,IAAI,KAAK,CAAC,wBAAwB,CAAC;;;;;CAK3F,CAAC"}

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

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

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

@@ -39,6 +39,7 @@ export const controlIndicatorStructuralStyles = css `
     cursor: inherit;
   }
   .indicator-mark {
+    display: grid;
     pointer-events: none;
     visibility: hidden;
   }

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

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

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

@@ -1,6 +1,7 @@
 /**
  * Layout of the field anatomy every Oddkin form control renders (`.field` holding `.label`,
  * `.description`, `.control`, and `.error`): stacked, wrapping, the control filling the field.
+ * Adornments are positioned, so they paint above a positioned control box (combobox).
  * No brand tokens. The `.odd-field` recipe is generated from these rules.
  */
 export declare const fieldStructuralStyles: import("@oddkin/core/styles").CSSResult;

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

@@ -1 +1 @@
-{"version":3,"file":"field.structural.styles.d.ts","sourceRoot":"","sources":["../../src/styles/field.structural.styles.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,yCA6CjC,CAAC"}
+{"version":3,"file":"field.structural.styles.d.ts","sourceRoot":"","sources":["../../src/styles/field.structural.styles.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,yCA8CjC,CAAC"}

package/dist/styles/field.structural.styles.js

@@ -2,6 +2,7 @@ import { css } from '@oddkin/core/styles';
 /**
  * Layout of the field anatomy every Oddkin form control renders (`.field` holding `.label`,
  * `.description`, `.control`, and `.error`): stacked, wrapping, the control filling the field.
+ * Adornments are positioned, so they paint above a positioned control box (combobox).
  * No brand tokens. The `.odd-field` recipe is generated from these rules.
  */
 export const fieldStructuralStyles = css `
@@ -29,6 +30,7 @@ export const fieldStructuralStyles = css `
   .control-start,
   .control-end {
     display: flex;
+    position: relative;
     pointer-events: none;
   }
   .control-start {

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

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

package/dist/styles/nav-row.structural.styles.d.ts

@@ -1,8 +1,10 @@
 /**
  * Navigation rows (component-catalog.md §6 "nav-row"), shared by `odd-side-nav` and `odd-tree`:
  * full-width `.entry` rows (a link, a button, or a treeitem) with a `.label` that wraps long text.
- * Structural rules here; the look is `navRowStyles`. The forced-colours markers are prefixed with
- * `.root` (the element's container) to outrank a skin's state rules, which load later.
+ * Structural rules here; the look is `navRowStyles`. The current or selected row's marker is a
+ * `::before` bar at the inline start, sized and coloured by the skin. The forced-colours markers
+ * are prefixed with `.root` (the element's container) to outrank a skin's state rules, which load
+ * later.
  */
 export declare const navRowStructuralStyles: import("@oddkin/core/styles").CSSResult;
 //# sourceMappingURL=nav-row.structural.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"nav-row.structural.styles.d.ts","sourceRoot":"","sources":["../../src/styles/nav-row.structural.styles.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB,yCAmClC,CAAC"}
+{"version":3,"file":"nav-row.structural.styles.d.ts","sourceRoot":"","sources":["../../src/styles/nav-row.structural.styles.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AACH,eAAO,MAAM,sBAAsB,yCAwClC,CAAC"}

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

@@ -2,11 +2,14 @@ import { css } from '@oddkin/core/styles';
 /**
  * Navigation rows (component-catalog.md §6 "nav-row"), shared by `odd-side-nav` and `odd-tree`:
  * full-width `.entry` rows (a link, a button, or a treeitem) with a `.label` that wraps long text.
- * Structural rules here; the look is `navRowStyles`. The forced-colours markers are prefixed with
- * `.root` (the element's container) to outrank a skin's state rules, which load later.
+ * Structural rules here; the look is `navRowStyles`. The current or selected row's marker is a
+ * `::before` bar at the inline start, sized and coloured by the skin. The forced-colours markers
+ * are prefixed with `.root` (the element's container) to outrank a skin's state rules, which load
+ * later.
  */
 export const navRowStructuralStyles = css `
   .entry {
+    position: relative;
     box-sizing: border-box;
     display: flex;
     align-items: center;
@@ -30,10 +33,14 @@ export const navRowStructuralStyles = css `
   .entry[aria-disabled='true'] {
     cursor: not-allowed;
   }
+  .entry:is([aria-current='page'], [aria-selected='true'])::before {
+    content: '';
+    position: absolute;
+    inset-inline-start: 0;
+  }
   @media (forced-colors: active) {
-    .root .entry[aria-current='page'],
-    .root .entry[aria-selected='true'] {
-      border-inline-start-color: Highlight;
+    .root .entry:is([aria-current='page'], [aria-selected='true'])::before {
+      background: Highlight;
     }
     .root .entry:disabled,
     .root .entry[aria-disabled='true'] {

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

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

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

@@ -1,6 +1,8 @@
 /**
  * The navigation-row look through the `navigation.*` roles: padding, minimum target size, hover,
  * and the current or selected row marked by an inline-start bar and weight, not colour alone.
+ * The bar is straight and inset by the row's block padding (Figma NavigationItem, State=Current),
+ * so the row's rounded corners never bend it.
  */
 export declare const navRowStyles: import("@oddkin/core/styles").CSSResult;
 //# sourceMappingURL=nav-row.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"nav-row.styles.d.ts","sourceRoot":"","sources":["../../src/styles/nav-row.styles.ts"],"names":[],"mappings":"AAGA;;;GAGG;AACH,eAAO,MAAM,YAAY,yCA0BxB,CAAC"}
+{"version":3,"file":"nav-row.styles.d.ts","sourceRoot":"","sources":["../../src/styles/nav-row.styles.ts"],"names":[],"mappings":"AAGA;;;;;GAKG;AACH,eAAO,MAAM,YAAY,yCA4BxB,CAAC"}

package/dist/styles/nav-row.styles.js

@@ -3,13 +3,14 @@ import { token } from '@oddkin/tokens/refs';
 /**
  * The navigation-row look through the `navigation.*` roles: padding, minimum target size, hover,
  * and the current or selected row marked by an inline-start bar and weight, not colour alone.
+ * The bar is straight and inset by the row's block padding (Figma NavigationItem, State=Current),
+ * so the row's rounded corners never bend it.
  */
 export const navRowStyles = css `
   .entry {
     gap: ${token('navigation.item.gap')};
     min-block-size: max(${token('navigation.item.min-height')}, ${token('target.min')});
     padding: ${token('navigation.item.padding.block')} ${token('navigation.item.padding.inline')};
-    border-inline-start: ${token('border.width.strong')} solid transparent;
     border-radius: ${token('control.radius')};
     transition-property: background-color, color;
     transition-duration: ${token('motion.duration.fast')};
@@ -20,12 +21,15 @@ export const navRowStyles = css `
       background: ${token('color.surface.hover')};
     }
   }
-  .entry[aria-current='page'],
-  .entry[aria-selected='true'] {
-    border-inline-start-color: ${token('color.action.default')};
+  .entry:is([aria-current='page'], [aria-selected='true']) {
     background: ${token('color.surface.hover')};
     font-weight: ${token('font.weight.semibold')};
   }
+  .entry:is([aria-current='page'], [aria-selected='true'])::before {
+    inset-block: ${token('navigation.item.padding.block')};
+    inline-size: ${token('border.width.strong')};
+    background: ${token('color.action.default')};
+  }
   .entry:disabled,
   .entry[aria-disabled='true'] {
     color: ${token('color.text.disabled')};

package/dist/styles/nav-row.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"nav-row.styles.js","sourceRoot":"","sources":["../../src/styles/nav-row.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAE5C;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;WAEpB,KAAK,CAAC,qBAAqB,CAAC;0BACb,KAAK,CAAC,4BAA4B,CAAC,KAAK,KAAK,CAAC,YAAY,CAAC;eACtE,KAAK,CAAC,+BAA+B,CAAC,IAAI,KAAK,CAAC,gCAAgC,CAAC;2BACrE,KAAK,CAAC,qBAAqB,CAAC;qBAClC,KAAK,CAAC,gBAAgB,CAAC;;2BAEjB,KAAK,CAAC,sBAAsB,CAAC;kCACtB,KAAK,CAAC,wBAAwB,CAAC;;;;oBAI7C,KAAK,CAAC,qBAAqB,CAAC;;;;;iCAKf,KAAK,CAAC,sBAAsB,CAAC;kBAC5C,KAAK,CAAC,qBAAqB,CAAC;mBAC3B,KAAK,CAAC,sBAAsB,CAAC;;;;aAInC,KAAK,CAAC,qBAAqB,CAAC;;CAExC,CAAC"}
+{"version":3,"file":"nav-row.styles.js","sourceRoot":"","sources":["../../src/styles/nav-row.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,YAAY,GAAG,GAAG,CAAA;;WAEpB,KAAK,CAAC,qBAAqB,CAAC;0BACb,KAAK,CAAC,4BAA4B,CAAC,KAAK,KAAK,CAAC,YAAY,CAAC;eACtE,KAAK,CAAC,+BAA+B,CAAC,IAAI,KAAK,CAAC,gCAAgC,CAAC;qBAC3E,KAAK,CAAC,gBAAgB,CAAC;;2BAEjB,KAAK,CAAC,sBAAsB,CAAC;kCACtB,KAAK,CAAC,wBAAwB,CAAC;;;;oBAI7C,KAAK,CAAC,qBAAqB,CAAC;;;;kBAI9B,KAAK,CAAC,qBAAqB,CAAC;mBAC3B,KAAK,CAAC,sBAAsB,CAAC;;;mBAG7B,KAAK,CAAC,+BAA+B,CAAC;mBACtC,KAAK,CAAC,qBAAqB,CAAC;kBAC7B,KAAK,CAAC,sBAAsB,CAAC;;;;aAIlC,KAAK,CAAC,qBAAqB,CAAC;;CAExC,CAAC"}

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

@@ -1,6 +1,7 @@
 /**
  * A row of tabs above the panels (a column beside them when vertical); tabs wrap rather than
- * overflow. No brand or visual tokens.
+ * overflow. A vertical list takes up to 40% of the width, and at least its longest word, so tab
+ * labels wrap between words. No brand or visual tokens.
  */
 export declare const tabsStructuralStyles: import("@oddkin/core/styles").CSSResult;
 //# sourceMappingURL=tabs.structural.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"tabs.structural.styles.d.ts","sourceRoot":"","sources":["../../src/tabs/tabs.structural.styles.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,eAAO,MAAM,oBAAoB,yCAmEhC,CAAC"}
+{"version":3,"file":"tabs.structural.styles.d.ts","sourceRoot":"","sources":["../../src/tabs/tabs.structural.styles.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,yCAuEhC,CAAC"}

package/dist/tabs/tabs.structural.styles.js

@@ -1,7 +1,8 @@
 import { css } from '@oddkin/core/styles';
 /**
  * A row of tabs above the panels (a column beside them when vertical); tabs wrap rather than
- * overflow. No brand or visual tokens.
+ * overflow. A vertical list takes up to 40% of the width, and at least its longest word, so tab
+ * labels wrap between words. No brand or visual tokens.
  */
 export const tabsStructuralStyles = css `
   :host {
@@ -53,8 +54,12 @@ export const tabsStructuralStyles = css `
     flex: none;
     flex-direction: column;
     flex-wrap: nowrap;
+    min-inline-size: min-content;
     max-inline-size: 40%;
   }
+  :host([orientation='vertical']) .tab {
+    overflow-wrap: break-word;
+  }
   :host([orientation='vertical']) .panel {
     flex: 1 1 auto;
   }

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

@@ -1 +1 @@
-{"version":3,"file":"tabs.structural.styles.js","sourceRoot":"","sources":["../../src/tabs/tabs.structural.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAE1C;;;GAGG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmEtC,CAAC"}
+{"version":3,"file":"tabs.structural.styles.js","sourceRoot":"","sources":["../../src/tabs/tabs.structural.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAE1C;;;;GAIG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuEtC,CAAC"}

package/dist/toolbar/toolbar.recipe.d.ts

@@ -0,0 +1,3 @@
+/** Arrangement of the toolbar (layout-recipes.md §14): the controls in a row that wraps, or with `orientation="vertical"` in a column that does not. */
+export declare const toolbarRecipe: import("../layout/index.js").LayoutRecipe;
+//# sourceMappingURL=toolbar.recipe.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar.recipe.d.ts","sourceRoot":"","sources":["../../src/toolbar/toolbar.recipe.ts"],"names":[],"mappings":"AAGA,wJAAwJ;AACxJ,eAAO,MAAM,aAAa,2CAexB,CAAC"}

package/dist/toolbar/toolbar.recipe.js

@@ -0,0 +1,20 @@
+import { token } from '@oddkin/tokens/refs';
+import { declarations, defineLayoutRecipe, row, stack } from '../layout/index.js';
+/** Arrangement of the toolbar (layout-recipes.md §14): the controls in a row that wraps, or with `orientation="vertical"` in a column that does not. */
+export const toolbarRecipe = defineLayoutRecipe({
+    name: 'toolbar',
+    regions: {
+        toolbar: row({ gap: token('space.sm'), wrap: true }),
+    },
+    variants: {
+        orientation: {
+            vertical: {
+                toolbar: [
+                    stack({ gap: token('space.sm'), align: 'stretch' }),
+                    declarations({ 'flex-wrap': 'nowrap' }),
+                ],
+            },
+        },
+    },
+});
+//# sourceMappingURL=toolbar.recipe.js.map

package/dist/toolbar/toolbar.recipe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar.recipe.js","sourceRoot":"","sources":["../../src/toolbar/toolbar.recipe.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,kBAAkB,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAElF,wJAAwJ;AACxJ,MAAM,CAAC,MAAM,aAAa,GAAG,kBAAkB,CAAC;IAC9C,IAAI,EAAE,SAAS;IACf,OAAO,EAAE;QACP,OAAO,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,UAAU,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;KACrD;IACD,QAAQ,EAAE;QACR,WAAW,EAAE;YACX,QAAQ,EAAE;gBACR,OAAO,EAAE;oBACP,KAAK,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,UAAU,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC;oBACnD,YAAY,CAAC,EAAE,WAAW,EAAE,QAAQ,EAAE,CAAC;iBACxC;aACF;SACF;KACF;CACF,CAAC,CAAC"}

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

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

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

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

package/dist/toolbar/toolbar.recipe.styles.js

@@ -0,0 +1,5 @@
+// Generated from ./toolbar.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 toolbarRecipeStyles = unsafeCSS('@layer odd.layout.base, odd.layout.variant, odd.layout.condition;\n@layer odd.layout.base {\n  .toolbar {\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  }\n}\n@layer odd.layout.variant {\n  :host(:where([orientation="vertical"])) .toolbar {\n    flex-direction: column;\n    align-items: stretch;\n    flex-wrap: nowrap;\n  }\n}\n');
+//# sourceMappingURL=toolbar.recipe.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar.recipe.styles.js","sourceRoot":"","sources":["../../src/toolbar/toolbar.recipe.styles.ts"],"names":[],"mappings":"AAAA,sGAAsG;AACtG,iDAAiD;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEhD,MAAM,CAAC,MAAM,mBAAmB,GAAG,SAAS,CAC1C,sbAAsb,CACvb,CAAC"}

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

@@ -1,6 +1,6 @@
 /**
- * Controls in a wrapping row (a column when vertical); an `<hr>` child is a line across the row.
- * No brand or visual tokens.
+ * Controls in a wrapping row (a column when vertical: the layout recipe in `toolbar.recipe.ts`);
+ * an `<hr>` child is a line across the row. No brand or visual tokens.
  */
 export declare const toolbarStructuralStyles: import("@oddkin/core/styles").CSSResult;
 //# sourceMappingURL=toolbar.structural.styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"toolbar.structural.styles.d.ts","sourceRoot":"","sources":["../../src/toolbar/toolbar.structural.styles.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,eAAO,MAAM,uBAAuB,yCA6BnC,CAAC"}
+{"version":3,"file":"toolbar.structural.styles.d.ts","sourceRoot":"","sources":["../../src/toolbar/toolbar.structural.styles.ts"],"names":[],"mappings":"AAGA;;;GAGG;AACH,eAAO,MAAM,uBAAuB,yCAmBnC,CAAC"}

package/dist/toolbar/toolbar.structural.styles.js

@@ -1,23 +1,14 @@
 import { css } from '@oddkin/core/styles';
+import { toolbarRecipeStyles } from './toolbar.recipe.styles.js';
 /**
- * Controls in a wrapping row (a column when vertical); an `<hr>` child is a line across the row.
- * No brand or visual tokens.
+ * Controls in a wrapping row (a column when vertical: the layout recipe in `toolbar.recipe.ts`);
+ * an `<hr>` child is a line across the row. No brand or visual tokens.
  */
 export const toolbarStructuralStyles = css `
+  ${toolbarRecipeStyles}
   :host {
     display: block;
   }
-  .toolbar {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    min-inline-size: 0;
-  }
-  :host([orientation='vertical']) .toolbar {
-    flex-direction: column;
-    flex-wrap: nowrap;
-    align-items: stretch;
-  }
   ::slotted(hr) {
     align-self: stretch;
     margin: 0;

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

@@ -1 +1 @@
-{"version":3,"file":"toolbar.structural.styles.js","sourceRoot":"","sources":["../../src/toolbar/toolbar.structural.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAE1C;;;GAGG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BzC,CAAC"}
+{"version":3,"file":"toolbar.structural.styles.js","sourceRoot":"","sources":["../../src/toolbar/toolbar.structural.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAEjE;;;GAGG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CAAA;IACtC,mBAAmB;;;;;;;;;;;;;;;;;;CAkBtB,CAAC"}

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

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

package/dist/toolbar/toolbar.styles.js

@@ -6,7 +6,6 @@ import { token } from '@oddkin/tokens/refs';
  */
 export const toolbarStyles = css `
   .toolbar {
-    gap: ${token('space.sm')};
     padding: ${token('space.md')};
     border: ${token('border.width.default')} solid ${token('color.border.default')};
     border-radius: var(--odd-toolbar-radius, ${token('card.radius')});

package/dist/toolbar/toolbar.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"toolbar.styles.js","sourceRoot":"","sources":["../../src/toolbar/toolbar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAE5C;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;;WAErB,KAAK,CAAC,UAAU,CAAC;eACb,KAAK,CAAC,UAAU,CAAC;cAClB,KAAK,CAAC,sBAAsB,CAAC,UAAU,KAAK,CAAC,sBAAsB,CAAC;+CACnC,KAAK,CAAC,aAAa,CAAC;gDACnB,KAAK,CAAC,uBAAuB,CAAC;aACjE,KAAK,CAAC,oBAAoB,CAAC;mBACrB,KAAK,CAAC,gBAAgB,CAAC;iBACzB,KAAK,CAAC,cAAc,CAAC;mBACnB,KAAK,CAAC,gBAAgB,CAAC;mBACvB,KAAK,CAAC,qBAAqB,CAAC;;;mBAG5B,KAAK,CAAC,sBAAsB,CAAC;kBAC9B,KAAK,CAAC,sBAAsB,CAAC;;;;kBAI7B,KAAK,CAAC,sBAAsB,CAAC;;CAE9C,CAAC"}
+{"version":3,"file":"toolbar.styles.js","sourceRoot":"","sources":["../../src/toolbar/toolbar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAE5C;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;;eAEjB,KAAK,CAAC,UAAU,CAAC;cAClB,KAAK,CAAC,sBAAsB,CAAC,UAAU,KAAK,CAAC,sBAAsB,CAAC;+CACnC,KAAK,CAAC,aAAa,CAAC;gDACnB,KAAK,CAAC,uBAAuB,CAAC;aACjE,KAAK,CAAC,oBAAoB,CAAC;mBACrB,KAAK,CAAC,gBAAgB,CAAC;iBACzB,KAAK,CAAC,cAAc,CAAC;mBACnB,KAAK,CAAC,gBAAgB,CAAC;mBACvB,KAAK,CAAC,qBAAqB,CAAC;;;mBAG5B,KAAK,CAAC,sBAAsB,CAAC;kBAC9B,KAAK,CAAC,sBAAsB,CAAC;;;;kBAI7B,KAAK,CAAC,sBAAsB,CAAC;;CAE9C,CAAC"}

package/dist/validation-summary/validation-summary.recipe.d.ts

@@ -0,0 +1,3 @@
+/** Arrangement of the validation summary (layout-recipes.md §14): the summary and its list in columns, and the heading row with its marker. */
+export declare const validationSummaryRecipe: import("../layout/index.js").LayoutRecipe;
+//# sourceMappingURL=validation-summary.recipe.d.ts.map

package/dist/validation-summary/validation-summary.recipe.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation-summary.recipe.d.ts","sourceRoot":"","sources":["../../src/validation-summary/validation-summary.recipe.ts"],"names":[],"mappings":"AAGA,+IAA+I;AAC/I,eAAO,MAAM,uBAAuB,2CAOlC,CAAC"}

package/dist/validation-summary/validation-summary.recipe.js

@@ -0,0 +1,12 @@
+import { token } from '@oddkin/tokens/refs';
+import { defineLayoutRecipe, row, stack } from '../layout/index.js';
+/** Arrangement of the validation summary (layout-recipes.md §14): the summary and its list in columns, and the heading row with its marker. */
+export const validationSummaryRecipe = defineLayoutRecipe({
+    name: 'validation-summary',
+    regions: {
+        summary: stack({ gap: token('space.sm') }),
+        header: row({ gap: token('space.xs'), align: 'start' }),
+        list: stack({ gap: token('space.sm') }),
+    },
+});
+//# sourceMappingURL=validation-summary.recipe.js.map

package/dist/validation-summary/validation-summary.recipe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation-summary.recipe.js","sourceRoot":"","sources":["../../src/validation-summary/validation-summary.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,+IAA+I;AAC/I,MAAM,CAAC,MAAM,uBAAuB,GAAG,kBAAkB,CAAC;IACxD,IAAI,EAAE,oBAAoB;IAC1B,OAAO,EAAE;QACP,OAAO,EAAE,KAAK,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,UAAU,CAAC,EAAE,CAAC;QAC1C,MAAM,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,UAAU,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC;QACvD,IAAI,EAAE,KAAK,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,UAAU,CAAC,EAAE,CAAC;KACxC;CACF,CAAC,CAAC"}

package/dist/validation-summary/validation-summary.recipe.styles.d.ts

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

package/dist/validation-summary/validation-summary.recipe.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation-summary.recipe.styles.d.ts","sourceRoot":"","sources":["../../src/validation-summary/validation-summary.recipe.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,6BAA6B,yCAEzC,CAAC"}

package/dist/validation-summary/validation-summary.recipe.styles.js

@@ -0,0 +1,5 @@
+// Generated from ./validation-summary.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 validationSummaryRecipeStyles = unsafeCSS('@layer odd.layout.base, odd.layout.variant, odd.layout.condition;\n@layer odd.layout.base {\n  .summary {\n    display: flex;\n    flex-direction: column;\n    gap: var(--odd-space-sm);\n    min-inline-size: 0;\n  }\n  .header {\n    display: flex;\n    flex-direction: row;\n    align-items: start;\n    gap: var(--odd-space-xs);\n    flex-wrap: nowrap;\n    min-inline-size: 0;\n  }\n  .list {\n    display: flex;\n    flex-direction: column;\n    gap: var(--odd-space-sm);\n    min-inline-size: 0;\n  }\n}\n');
+//# sourceMappingURL=validation-summary.recipe.styles.js.map

package/dist/validation-summary/validation-summary.recipe.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation-summary.recipe.styles.js","sourceRoot":"","sources":["../../src/validation-summary/validation-summary.recipe.styles.ts"],"names":[],"mappings":"AAAA,iHAAiH;AACjH,iDAAiD;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEhD,MAAM,CAAC,MAAM,6BAA6B,GAAG,SAAS,CACpD,ggBAAggB,CACjgB,CAAC"}

package/dist/validation-summary/validation-summary.structural.styles.d.ts

@@ -1,6 +1,6 @@
 /**
- * The heading row (glyph and heading) above the list, in one column that wraps long text. No
- * brand or visual tokens.
+ * The heading row (glyph and heading) above the list, in one column that wraps long text (the
+ * layout recipe in `validation-summary.recipe.ts`). No brand or visual tokens.
  */
 export declare const validationSummaryStructuralStyles: import("@oddkin/core/styles").CSSResult;
 //# sourceMappingURL=validation-summary.structural.styles.d.ts.map

package/dist/validation-summary/validation-summary.structural.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"validation-summary.structural.styles.d.ts","sourceRoot":"","sources":["../../src/validation-summary/validation-summary.structural.styles.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,eAAO,MAAM,iCAAiC,yCA4B7C,CAAC"}
+{"version":3,"file":"validation-summary.structural.styles.d.ts","sourceRoot":"","sources":["../../src/validation-summary/validation-summary.structural.styles.ts"],"names":[],"mappings":"AAGA;;;GAGG;AACH,eAAO,MAAM,iCAAiC,yCAoB7C,CAAC"}

package/dist/validation-summary/validation-summary.structural.styles.js

@@ -1,22 +1,17 @@
 import { css } from '@oddkin/core/styles';
+import { validationSummaryRecipeStyles } from './validation-summary.recipe.styles.js';
 /**
- * The heading row (glyph and heading) above the list, in one column that wraps long text. No
- * brand or visual tokens.
+ * The heading row (glyph and heading) above the list, in one column that wraps long text (the
+ * layout recipe in `validation-summary.recipe.ts`). No brand or visual tokens.
  */
 export const validationSummaryStructuralStyles = css `
+  ${validationSummaryRecipeStyles}
   :host {
     display: block;
   }
   .summary {
-    display: flex;
-    flex-direction: column;
-    min-inline-size: 0;
     overflow-wrap: anywhere;
   }
-  .header {
-    display: flex;
-    align-items: flex-start;
-  }
   .marker {
     display: inline-flex;
     flex: none;
@@ -25,8 +20,6 @@ export const validationSummaryStructuralStyles = css `
     margin: 0;
   }
   .list {
-    display: flex;
-    flex-direction: column;
     margin: 0;
     padding: 0;
     list-style: none;

package/dist/validation-summary/validation-summary.structural.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"validation-summary.structural.styles.js","sourceRoot":"","sources":["../../src/validation-summary/validation-summary.structural.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAE1C;;;GAGG;AACH,MAAM,CAAC,MAAM,iCAAiC,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BnD,CAAC"}
+{"version":3,"file":"validation-summary.structural.styles.js","sourceRoot":"","sources":["../../src/validation-summary/validation-summary.structural.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,6BAA6B,EAAE,MAAM,uCAAuC,CAAC;AAEtF;;;GAGG;AACH,MAAM,CAAC,MAAM,iCAAiC,GAAG,GAAG,CAAA;IAChD,6BAA6B;;;;;;;;;;;;;;;;;;;CAmBhC,CAAC"}

package/dist/validation-summary/validation-summary.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"validation-summary.styles.d.ts","sourceRoot":"","sources":["../../src/validation-summary/validation-summary.styles.ts"],"names":[],"mappings":"AAGA;;;GAGG;AACH,eAAO,MAAM,uBAAuB,yCAqCnC,CAAC"}
+{"version":3,"file":"validation-summary.styles.d.ts","sourceRoot":"","sources":["../../src/validation-summary/validation-summary.styles.ts"],"names":[],"mappings":"AAGA;;;GAGG;AACH,eAAO,MAAM,uBAAuB,yCA8BnC,CAAC"}

package/dist/validation-summary/validation-summary.styles.js

@@ -6,16 +6,12 @@ import { token } from '@oddkin/tokens/refs';
  */
 export const validationSummaryStyles = css `
   .summary {
-    gap: ${token('space.sm')};
     padding: ${token('space.md')};
     border: ${token('border.width.default')} solid var(--_tone-foreground);
     border-radius: ${token('control.radius')};
     background: var(--_tone-surface);
     color: ${token('color.text.primary')};
   }
-  .header {
-    gap: ${token('space.xs')};
-  }
   .marker,
   .label {
     color: var(--_tone-foreground);
@@ -29,9 +25,6 @@ export const validationSummaryStyles = css `
     font-weight: ${token('type.ui.weight')};
     line-height: ${token('type.ui.line-height')};
   }
-  .list {
-    gap: ${token('space.sm')};
-  }
   .link {
     color: ${token('color.link')};
     font-family: ${token('type.body.family')};

package/dist/validation-summary/validation-summary.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"validation-summary.styles.js","sourceRoot":"","sources":["../../src/validation-summary/validation-summary.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAE5C;;;GAGG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CAAA;;WAE/B,KAAK,CAAC,UAAU,CAAC;eACb,KAAK,CAAC,UAAU,CAAC;cAClB,KAAK,CAAC,sBAAsB,CAAC;qBACtB,KAAK,CAAC,gBAAgB,CAAC;;aAE/B,KAAK,CAAC,oBAAoB,CAAC;;;WAG7B,KAAK,CAAC,UAAU,CAAC;;;;;;;iBAOX,KAAK,CAAC,cAAc,CAAC;;;mBAGnB,KAAK,CAAC,gBAAgB,CAAC;iBACzB,KAAK,CAAC,cAAc,CAAC;mBACnB,KAAK,CAAC,gBAAgB,CAAC;mBACvB,KAAK,CAAC,qBAAqB,CAAC;;;WAGpC,KAAK,CAAC,UAAU,CAAC;;;aAGf,KAAK,CAAC,YAAY,CAAC;mBACb,KAAK,CAAC,kBAAkB,CAAC;iBAC3B,KAAK,CAAC,gBAAgB,CAAC;mBACrB,KAAK,CAAC,kBAAkB,CAAC;mBACzB,KAAK,CAAC,uBAAuB,CAAC;;;;CAIhD,CAAC"}
+{"version":3,"file":"validation-summary.styles.js","sourceRoot":"","sources":["../../src/validation-summary/validation-summary.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAE5C;;;GAGG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CAAA;;eAE3B,KAAK,CAAC,UAAU,CAAC;cAClB,KAAK,CAAC,sBAAsB,CAAC;qBACtB,KAAK,CAAC,gBAAgB,CAAC;;aAE/B,KAAK,CAAC,oBAAoB,CAAC;;;;;;;iBAOvB,KAAK,CAAC,cAAc,CAAC;;;mBAGnB,KAAK,CAAC,gBAAgB,CAAC;iBACzB,KAAK,CAAC,cAAc,CAAC;mBACnB,KAAK,CAAC,gBAAgB,CAAC;mBACvB,KAAK,CAAC,qBAAqB,CAAC;;;aAGlC,KAAK,CAAC,YAAY,CAAC;mBACb,KAAK,CAAC,kBAAkB,CAAC;iBAC3B,KAAK,CAAC,gBAAgB,CAAC;mBACrB,KAAK,CAAC,kBAAkB,CAAC;mBACzB,KAAK,CAAC,uBAAuB,CAAC;;;;CAIhD,CAAC"}