@kerfjs/ui 5.0.0-beta.42 → 5.0.0-beta.45

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -137,6 +137,8 @@ mistakes but are not sanitizers.
137
137
  Use `Row` for horizontal flex composition and `List` for vertical composition.
138
138
  Both accept `hAlign` (`left`, `center`, `right`, `full`) and `vAlign` (`top`,
139
139
  `middle`, `bottom`, `full`), plus their documented short/CSS aliases. `Row`
140
+ also accepts `vAlign="baseline"` for cross-axis text alignment; baseline is not
141
+ available on `List`, whose vertical axis uses `justify-content`. `Row`
140
142
  defaults to left/full alignment, the `xs` gap, and `wrap={false}`; List keeps
141
143
  its existing full/top alignment and zero-gap defaults. Set `textInsets` or
142
144
  `controlInsets` with canonical physical sides in `t`/`r`/`b`/`l` order (for
@@ -1699,7 +1699,7 @@
1699
1699
  "source": "kerf",
1700
1700
  "description": "A horizontal flex row with physical-axis alignment, side-selectable text/control insets, a typed xs gap by default, flex participation, and opt-in wrapping.",
1701
1701
  "uses": [],
1702
- "purpose": "Arrange related content horizontally with consistent spacing, optional physical-side text/control insets, and explicit left/center/right/full plus top/middle/bottom/full alignment instead of application-owned flex wrappers.",
1702
+ "purpose": "Arrange related content horizontally with consistent spacing, optional physical-side text/control insets, and explicit left/center/right/full plus top/middle/bottom/full/baseline alignment instead of application-owned flex wrappers.",
1703
1703
  "publicExports": ["Row"],
1704
1704
  "cssValueProps": [
1705
1705
  {
@@ -1755,7 +1755,7 @@
1755
1755
  ],
1756
1756
  "variants": [
1757
1757
  "left/center/right/full horizontal alignment with l/c/r/f and flex aliases",
1758
- "top/middle/bottom/full vertical alignment with t/m/c/b/f and flex aliases",
1758
+ "top/middle/bottom/full vertical alignment with t/m/c/b/f and flex aliases, plus baseline alignment",
1759
1759
  "named none/2xs/xs/s/m/l/xl token gap",
1760
1760
  "typed CssLength gap",
1761
1761
  "boolean, finite-keyword, or typed CssFlex flex",
@@ -1,6 +1,6 @@
1
1
  # Public API signatures for the UI authoring corpus
2
2
 
3
- Generated from emitted declarations for `@kerfjs/ui@5.0.0-beta.42` and `kerfjs@5.0.0-beta.42`. This bounded reference covers only APIs used by the seven-task corpus. It is interface evidence, not an implementation or runtime guarantee.
3
+ Generated from emitted declarations for `@kerfjs/ui@5.0.0-beta.45` and `kerfjs@5.0.0-beta.45`. This bounded reference covers only APIs used by the seven-task corpus. It is interface evidence, not an implementation or runtime guarantee.
4
4
 
5
5
  ## `@kerfjs/ui/css-values`
6
6
 
@@ -336,7 +336,8 @@ export { ListHeader, type ListHeaderProps };
336
336
  import * as kerfjs from 'kerfjs';
337
337
  import { UiSpaceName, CssLength, CssFlexKeyword, CssFlex } from './css-values.js';
338
338
  import { D as DividerSides, S as Sides } from './divider-sides-BzB6rphT.js';
339
- import { H as HorizontalAlignment, V as VerticalAlignment } from './flex-alignment-CF8NLj7i.js';
339
+ import { H as HorizontalAlignment, L as ListVerticalAlignment } from './flex-alignment-4ms8ZbV8.js';
340
+ export { V as VerticalAlignment } from './flex-alignment-4ms8ZbV8.js';
340
341
  import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
341
342
 
342
343
  interface ListProps {
@@ -348,7 +349,7 @@ interface ListProps {
348
349
  /** Horizontal alignment. Defaults to full to preserve stretch-aligned list children. */
349
350
  hAlign?: HorizontalAlignment;
350
351
  /** Vertical distribution. Defaults to top. */
351
- vAlign?: VerticalAlignment;
352
+ vAlign?: ListVerticalAlignment;
352
353
  /** Own vertical scrolling and overscroll containment. */
353
354
  scrollable?: boolean;
354
355
  /** Physical divider edges in canonical top/right/bottom/left order. */
@@ -362,7 +363,7 @@ interface ListProps {
362
363
  /** A stretch-aligned vertical stack with optional gap, flex, scroll, and dividers. */
363
364
  declare function List({ children, gap, flex, hAlign, vAlign, scrollable, dividerSides, textInsets, controlInsets, className, }: ListProps): kerfjs.SafeHtml;
364
365
 
365
- export { CssFlex, CssFlexKeyword, CssLength, DividerSides, HorizontalAlignment, List, type ListProps, Sides, UiSpaceName, VerticalAlignment };
366
+ export { CssFlex, CssFlexKeyword, CssLength, DividerSides, HorizontalAlignment, List, type ListProps, ListVerticalAlignment, Sides, UiSpaceName };
366
367
  ```
367
368
 
368
369
  ## `@kerfjs/ui/list-action-row`
@@ -2035,7 +2036,7 @@ export { Text, type TextContent, type TextProps, type TextVariant };
2035
2036
  import * as kerfjs from 'kerfjs';
2036
2037
  import { UiSpaceName, CssLength, CssFlexKeyword, CssFlex } from './css-values.js';
2037
2038
  import { S as Sides } from './divider-sides-BzB6rphT.js';
2038
- import { H as HorizontalAlignment, V as VerticalAlignment } from './flex-alignment-CF8NLj7i.js';
2039
+ import { H as HorizontalAlignment, V as VerticalAlignment } from './flex-alignment-4ms8ZbV8.js';
2039
2040
  import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
2040
2041
 
2041
2042
  interface RowProps {
@@ -1,6 +1,6 @@
1
1
  # Web Awesome JSX signatures for the UI authoring corpus
2
2
 
3
- Generated from the emitted `@kerfjs/ui@5.0.0-beta.42` declaration boundary. Import `@kerfjs/ui/webawesome` for type effects when authoring direct `wa-*` JSX. The module emits no runtime behavior and does not register custom elements.
3
+ Generated from the emitted `@kerfjs/ui@5.0.0-beta.45` declaration boundary. Import `@kerfjs/ui/webawesome` for type effects when authoring direct `wa-*` JSX. The module emits no runtime behavior and does not register custom elements.
4
4
 
5
5
  ```ts
6
6
  import { KerfCustomElement } from 'kerfjs/jsx-runtime';
package/dist/catalog.js CHANGED
@@ -4,7 +4,7 @@ import { Pane } from './chunk-I4V3UDSA.js';
4
4
  import { ListHeader } from './chunk-SE7MQMW7.js';
5
5
  import { Text } from './chunk-QM4GQ7W3.js';
6
6
  import { ListItem } from './chunk-I45QO2IZ.js';
7
- import { List } from './chunk-C34NZOLJ.js';
7
+ import { List } from './chunk-WVLMZ5SG.js';
8
8
 
9
9
  import { filterDataAttributes } from './chunk-SRSJO5QE.js';
10
10
 
@@ -38,9 +38,11 @@ function verticalAlignment(value) {
38
38
  case "f":
39
39
  case "space-between":
40
40
  return "full";
41
+ case "baseline":
42
+ return "baseline";
41
43
  }
42
44
  }
43
45
 
44
46
  export { horizontalAlignment, verticalAlignment };
45
47
 
46
- //# sourceMappingURL=chunk-R3EBGEAW.js.map
48
+ //# sourceMappingURL=chunk-AYUHMAI6.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/flex-alignment.ts"],"names":[],"mappings":";AAoCO,SAAS,oBACd,KAAA,EAC8B;AAC9B,EAAA,QAAQ,KAAA;AAAO,IACb,KAAK,MAAA;AAAA,IACL,KAAK,GAAA;AAAA,IACL,KAAK,YAAA;AACH,MAAA,OAAO,MAAA;AAAA,IACT,KAAK,QAAA;AAAA,IACL,KAAK,GAAA;AAAA,IACL,KAAK,cAAA;AACH,MAAA,OAAO,QAAA;AAAA,IACT,KAAK,OAAA;AAAA,IACL,KAAK,GAAA;AAAA,IACL,KAAK,UAAA;AACH,MAAA,OAAO,OAAA;AAAA,IACT,KAAK,MAAA;AAAA,IACL,KAAK,GAAA;AAAA,IACL,KAAK,eAAA;AACH,MAAA,OAAO,MAAA;AAAA;AAEb;AAEO,SAAS,kBACd,KAAA,EAC4B;AAC5B,EAAA,QAAQ,KAAA;AAAO,IACb,KAAK,KAAA;AAAA,IACL,KAAK,GAAA;AAAA,IACL,KAAK,YAAA;AACH,MAAA,OAAO,KAAA;AAAA,IACT,KAAK,QAAA;AAAA,IACL,KAAK,GAAA;AAAA,IACL,KAAK,GAAA;AAAA,IACL,KAAK,cAAA;AACH,MAAA,OAAO,QAAA;AAAA,IACT,KAAK,QAAA;AAAA,IACL,KAAK,GAAA;AAAA,IACL,KAAK,UAAA;AACH,MAAA,OAAO,QAAA;AAAA,IACT,KAAK,MAAA;AAAA,IACL,KAAK,GAAA;AAAA,IACL,KAAK,eAAA;AACH,MAAA,OAAO,MAAA;AAAA,IACT,KAAK,UAAA;AACH,MAAA,OAAO,UAAA;AAAA;AAEb","file":"chunk-AYUHMAI6.js","sourcesContent":["export type HorizontalAlignment =\n | 'left'\n | 'l'\n | 'flex-start'\n | 'center'\n | 'c'\n | 'space-around'\n | 'right'\n | 'r'\n | 'flex-end'\n | 'full'\n | 'f'\n | 'space-between';\n\nexport type VerticalAlignment =\n | 'top'\n | 't'\n | 'flex-start'\n | 'middle'\n | 'm'\n | 'c'\n | 'space-around'\n | 'bottom'\n | 'b'\n | 'flex-end'\n | 'full'\n | 'f'\n | 'space-between'\n | 'baseline';\n\nexport type ListVerticalAlignment = Exclude<VerticalAlignment, 'baseline'>;\n\nexport type CanonicalHorizontalAlignment = 'left' | 'center' | 'right' | 'full';\nexport type CanonicalVerticalAlignment =\n 'top' | 'middle' | 'bottom' | 'full' | 'baseline';\n\nexport function horizontalAlignment(\n value: HorizontalAlignment,\n): CanonicalHorizontalAlignment {\n switch (value) {\n case 'left':\n case 'l':\n case 'flex-start':\n return 'left';\n case 'center':\n case 'c':\n case 'space-around':\n return 'center';\n case 'right':\n case 'r':\n case 'flex-end':\n return 'right';\n case 'full':\n case 'f':\n case 'space-between':\n return 'full';\n }\n}\n\nexport function verticalAlignment(\n value: VerticalAlignment,\n): CanonicalVerticalAlignment {\n switch (value) {\n case 'top':\n case 't':\n case 'flex-start':\n return 'top';\n case 'middle':\n case 'm':\n case 'c':\n case 'space-around':\n return 'middle';\n case 'bottom':\n case 'b':\n case 'flex-end':\n return 'bottom';\n case 'full':\n case 'f':\n case 'space-between':\n return 'full';\n case 'baseline':\n return 'baseline';\n }\n}\n"]}
@@ -1,4 +1,4 @@
1
- import { verticalAlignment, horizontalAlignment } from './chunk-R3EBGEAW.js';
1
+ import { verticalAlignment, horizontalAlignment } from './chunk-AYUHMAI6.js';
2
2
  import { space } from './chunk-OL4TC3U2.js';
3
3
  import { jsx } from 'kerfjs/jsx-runtime';
4
4
 
@@ -47,4 +47,4 @@ function Row({
47
47
 
48
48
  export { Row };
49
49
 
50
- //# sourceMappingURL=chunk-X5GRDQ7V.js.map
50
+ //# sourceMappingURL=chunk-OGNE3OFT.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/row.tsx"],"names":[],"mappings":";;;;AAgBA,IAAM,UAAA,GAAqC;AAAA,EACzC,MAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,GAAA;AAAA,EACA,GAAA;AAAA,EACA,GAAA;AAAA,EACA;AACF,CAAA;AAsBO,SAAS,GAAA,CAAI;AAAA,EAClB,QAAA;AAAA,EACA,MAAA,GAAS,MAAA;AAAA,EACT,MAAA,GAAS,MAAA;AAAA,EACT,GAAA,GAAM,IAAA;AAAA,EACN,IAAA,GAAO,KAAA;AAAA,EACP,IAAA,GAAO,KAAA;AAAA,EACP,UAAA,GAAa,EAAA;AAAA,EACb,aAAA,GAAgB,EAAA;AAAA,EAChB,SAAA,GAAY;AACd,CAAA,EAAa;AACX,EAAA,MAAM,WAAW,UAAA,CAAW,QAAA,CAAS,GAAkB,CAAA,GACnD,KAAA,CAAM,GAAkB,CAAA,GACxB,GAAA;AACJ,EAAA,MAAM,SAAA,GAAY,IAAA,KAAS,IAAA,GAAO,UAAA,GAAa,IAAA,IAAQ,MAAA;AACvD,EAAA,MAAM,KAAA,GAAQ;AAAA,IACZ,kBAAkB,QAAQ,CAAA,CAAA;AAAA,IAC1B,SAAA,GAAY,CAAA,gBAAA,EAAmB,SAAS,CAAA,CAAA,GAAK;AAAA,GAC/C,CACG,MAAA,CAAO,OAAO,CAAA,CACd,KAAK,GAAG,CAAA;AAEX,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,QAAA,EAAW,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACnC,gBAAA,EAAe,KAAA;AAAA,MACf,cAAA,EAAc,oBAAoB,MAAM,CAAA;AAAA,MACxC,cAAA,EAAc,kBAAkB,MAAM,CAAA;AAAA,MACtC,WAAA,EAAW,MAAA,CAAO,OAAA,CAAQ,IAAI,CAAC,CAAA;AAAA,MAC/B,WAAA,EAAW,OAAO,IAAI,CAAA;AAAA,MACtB,oBAAkB,UAAA,IAAc,MAAA;AAAA,MAChC,uBAAqB,aAAA,IAAiB,MAAA;AAAA,MACtC,KAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ","file":"chunk-X5GRDQ7V.js","sourcesContent":["import {\n type CssFlex,\n type CssFlexKeyword,\n type CssLength,\n space,\n type UiSpaceName,\n} from './css-values.js';\nimport type { Sides } from './divider-sides.js';\nimport {\n type HorizontalAlignment,\n horizontalAlignment,\n type VerticalAlignment,\n verticalAlignment,\n} from './flex-alignment.js';\nimport type { KerfUiContent } from './semantic-content.js';\n\nconst spaceNames: readonly UiSpaceName[] = [\n 'none',\n '2xs',\n 'xs',\n 's',\n 'm',\n 'l',\n 'xl',\n];\n\nexport interface RowProps {\n children?: KerfUiContent;\n /** Horizontal distribution. Defaults to left. */\n hAlign?: HorizontalAlignment;\n /** Vertical alignment and wrapped-line distribution. Defaults to full. */\n vAlign?: VerticalAlignment;\n /** A named UI spacing token or typed CSS length. Defaults to xs. */\n gap?: UiSpaceName | CssLength;\n /** Allow this row to grow/shrink, use a keyword, or supply a typed CSS flex shorthand. */\n flex?: boolean | CssFlexKeyword | CssFlex;\n /** Allow children to wrap onto additional lines. */\n wrap?: boolean;\n /** Physical sides that receive the standard 17px text inset. */\n textInsets?: Sides;\n /** Physical sides that receive the standard 8px control inset. Text insets win on overlap. */\n controlInsets?: Sides;\n className?: string;\n}\n\n/** A horizontal flex row with explicit physical-axis alignment and spacing. */\nexport function Row({\n children,\n hAlign = 'left',\n vAlign = 'full',\n gap = 'xs',\n flex = false,\n wrap = false,\n textInsets = '',\n controlInsets = '',\n className = '',\n}: RowProps) {\n const gapValue = spaceNames.includes(gap as UiSpaceName)\n ? space(gap as UiSpaceName)\n : gap;\n const flexValue = flex === true ? '1 1 auto' : flex || undefined;\n const style = [\n `--_kui-row-gap:${gapValue}`,\n flexValue ? `--_kui-row-flex:${flexValue}` : '',\n ]\n .filter(Boolean)\n .join(';');\n\n return (\n <div\n class={`kui-row ${className}`.trim()}\n data-component=\"row\"\n data-h-align={horizontalAlignment(hAlign)}\n data-v-align={verticalAlignment(vAlign)}\n data-flex={String(Boolean(flex))}\n data-wrap={String(wrap)}\n data-text-insets={textInsets || undefined}\n data-control-insets={controlInsets || undefined}\n style={style}\n >\n {children}\n </div>\n );\n}\n\nexport type {\n CssFlex,\n CssFlexKeyword,\n CssLength,\n UiSpaceName,\n} from './css-values.js';\nexport type { Sides } from './divider-sides.js';\nexport type {\n HorizontalAlignment,\n VerticalAlignment,\n} from './flex-alignment.js';\n"]}
1
+ {"version":3,"sources":["../src/row.tsx"],"names":[],"mappings":";;;;AAgBA,IAAM,UAAA,GAAqC;AAAA,EACzC,MAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,GAAA;AAAA,EACA,GAAA;AAAA,EACA,GAAA;AAAA,EACA;AACF,CAAA;AAsBO,SAAS,GAAA,CAAI;AAAA,EAClB,QAAA;AAAA,EACA,MAAA,GAAS,MAAA;AAAA,EACT,MAAA,GAAS,MAAA;AAAA,EACT,GAAA,GAAM,IAAA;AAAA,EACN,IAAA,GAAO,KAAA;AAAA,EACP,IAAA,GAAO,KAAA;AAAA,EACP,UAAA,GAAa,EAAA;AAAA,EACb,aAAA,GAAgB,EAAA;AAAA,EAChB,SAAA,GAAY;AACd,CAAA,EAAa;AACX,EAAA,MAAM,WAAW,UAAA,CAAW,QAAA,CAAS,GAAkB,CAAA,GACnD,KAAA,CAAM,GAAkB,CAAA,GACxB,GAAA;AACJ,EAAA,MAAM,SAAA,GAAY,IAAA,KAAS,IAAA,GAAO,UAAA,GAAa,IAAA,IAAQ,MAAA;AACvD,EAAA,MAAM,KAAA,GAAQ;AAAA,IACZ,kBAAkB,QAAQ,CAAA,CAAA;AAAA,IAC1B,SAAA,GAAY,CAAA,gBAAA,EAAmB,SAAS,CAAA,CAAA,GAAK;AAAA,GAC/C,CACG,MAAA,CAAO,OAAO,CAAA,CACd,KAAK,GAAG,CAAA;AAEX,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,QAAA,EAAW,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACnC,gBAAA,EAAe,KAAA;AAAA,MACf,cAAA,EAAc,oBAAoB,MAAM,CAAA;AAAA,MACxC,cAAA,EAAc,kBAAkB,MAAM,CAAA;AAAA,MACtC,WAAA,EAAW,MAAA,CAAO,OAAA,CAAQ,IAAI,CAAC,CAAA;AAAA,MAC/B,WAAA,EAAW,OAAO,IAAI,CAAA;AAAA,MACtB,oBAAkB,UAAA,IAAc,MAAA;AAAA,MAChC,uBAAqB,aAAA,IAAiB,MAAA;AAAA,MACtC,KAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ","file":"chunk-OGNE3OFT.js","sourcesContent":["import {\n type CssFlex,\n type CssFlexKeyword,\n type CssLength,\n space,\n type UiSpaceName,\n} from './css-values.js';\nimport type { Sides } from './divider-sides.js';\nimport {\n type HorizontalAlignment,\n horizontalAlignment,\n type VerticalAlignment,\n verticalAlignment,\n} from './flex-alignment.js';\nimport type { KerfUiContent } from './semantic-content.js';\n\nconst spaceNames: readonly UiSpaceName[] = [\n 'none',\n '2xs',\n 'xs',\n 's',\n 'm',\n 'l',\n 'xl',\n];\n\nexport interface RowProps {\n children?: KerfUiContent;\n /** Horizontal distribution. Defaults to left. */\n hAlign?: HorizontalAlignment;\n /** Vertical alignment and wrapped-line distribution. Defaults to full. */\n vAlign?: VerticalAlignment;\n /** A named UI spacing token or typed CSS length. Defaults to xs. */\n gap?: UiSpaceName | CssLength;\n /** Allow this row to grow/shrink, use a keyword, or supply a typed CSS flex shorthand. */\n flex?: boolean | CssFlexKeyword | CssFlex;\n /** Allow children to wrap onto additional lines. */\n wrap?: boolean;\n /** Physical sides that receive the standard 17px text inset. */\n textInsets?: Sides;\n /** Physical sides that receive the standard 8px control inset. Text insets win on overlap. */\n controlInsets?: Sides;\n className?: string;\n}\n\n/** A horizontal flex row with explicit physical-axis alignment and spacing. */\nexport function Row({\n children,\n hAlign = 'left',\n vAlign = 'full',\n gap = 'xs',\n flex = false,\n wrap = false,\n textInsets = '',\n controlInsets = '',\n className = '',\n}: RowProps) {\n const gapValue = spaceNames.includes(gap as UiSpaceName)\n ? space(gap as UiSpaceName)\n : gap;\n const flexValue = flex === true ? '1 1 auto' : flex || undefined;\n const style = [\n `--_kui-row-gap:${gapValue}`,\n flexValue ? `--_kui-row-flex:${flexValue}` : '',\n ]\n .filter(Boolean)\n .join(';');\n\n return (\n <div\n class={`kui-row ${className}`.trim()}\n data-component=\"row\"\n data-h-align={horizontalAlignment(hAlign)}\n data-v-align={verticalAlignment(vAlign)}\n data-flex={String(Boolean(flex))}\n data-wrap={String(wrap)}\n data-text-insets={textInsets || undefined}\n data-control-insets={controlInsets || undefined}\n style={style}\n >\n {children}\n </div>\n );\n}\n\nexport type {\n CssFlex,\n CssFlexKeyword,\n CssLength,\n UiSpaceName,\n} from './css-values.js';\nexport type { Sides } from './divider-sides.js';\nexport type {\n HorizontalAlignment,\n VerticalAlignment,\n} from './flex-alignment.js';\n"]}
@@ -1,4 +1,4 @@
1
- import { verticalAlignment, horizontalAlignment } from './chunk-R3EBGEAW.js';
1
+ import { verticalAlignment, horizontalAlignment } from './chunk-AYUHMAI6.js';
2
2
  import { space } from './chunk-OL4TC3U2.js';
3
3
  import { jsx } from 'kerfjs/jsx-runtime';
4
4
 
@@ -50,4 +50,4 @@ function List({
50
50
 
51
51
  export { List };
52
52
 
53
- //# sourceMappingURL=chunk-C34NZOLJ.js.map
53
+ //# sourceMappingURL=chunk-WVLMZ5SG.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/list.tsx"],"names":[],"mappings":";;;;AAgBA,IAAM,UAAA,GAAqC;AAAA,EACzC,MAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,GAAA;AAAA,EACA,GAAA;AAAA,EACA,GAAA;AAAA,EACA;AACF,CAAA;AAwBO,SAAS,IAAA,CAAK;AAAA,EACnB,QAAA;AAAA,EACA,GAAA,GAAM,KAAA;AAAA,EACN,IAAA,GAAO,KAAA;AAAA,EACP,MAAA,GAAS,MAAA;AAAA,EACT,MAAA,GAAS,KAAA;AAAA,EACT,UAAA,GAAa,KAAA;AAAA,EACb,YAAA,GAAe,EAAA;AAAA,EACf,UAAA,GAAa,EAAA;AAAA,EACb,aAAA,GAAgB,EAAA;AAAA,EAChB,SAAA,GAAY;AACd,CAAA,EAAc;AACZ,EAAA,MAAM,QAAA,GACJ,GAAA,KAAQ,IAAA,GACJ,qBAAA,GACA,UAAA,CAAW,QAAA,CAAS,GAAkB,CAAA,GACpC,KAAA,CAAM,GAAkB,CAAA,GACxB,GAAA,IAAO,MAAA;AACf,EAAA,MAAM,SAAA,GAAY,IAAA,KAAS,IAAA,GAAO,UAAA,GAAa,IAAA,IAAQ,MAAA;AACvD,EAAA,MAAM,KAAA,GAAQ;AAAA,IACZ,QAAA,GAAW,CAAA,gBAAA,EAAmB,QAAQ,CAAA,CAAA,GAAK,EAAA;AAAA,IAC3C,SAAA,GAAY,CAAA,iBAAA,EAAoB,SAAS,CAAA,CAAA,GAAK;AAAA,GAChD,CACG,MAAA,CAAO,OAAO,CAAA,CACd,KAAK,GAAG,CAAA;AAEX,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,SAAA,EAAY,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACpC,gBAAA,EAAe,MAAA;AAAA,MACf,UAAA,EAAU,MAAA,CAAO,OAAA,CAAQ,GAAG,CAAC,CAAA;AAAA,MAC7B,WAAA,EAAW,MAAA,CAAO,OAAA,CAAQ,IAAI,CAAC,CAAA;AAAA,MAC/B,cAAA,EAAc,oBAAoB,MAAM,CAAA;AAAA,MACxC,cAAA,EAAc,kBAAkB,MAAM,CAAA;AAAA,MACtC,iBAAA,EAAiB,OAAO,UAAU,CAAA;AAAA,MAClC,iBAAe,YAAA,IAAgB,MAAA;AAAA,MAC/B,oBAAkB,UAAA,IAAc,MAAA;AAAA,MAChC,uBAAqB,aAAA,IAAiB,MAAA;AAAA,MACtC,OAAO,KAAA,IAAS,MAAA;AAAA,MAEf;AAAA;AAAA,GACH;AAEJ","file":"chunk-WVLMZ5SG.js","sourcesContent":["import {\n type CssFlex,\n type CssFlexKeyword,\n type CssLength,\n space,\n type UiSpaceName,\n} from './css-values.js';\nimport type { DividerSides, Sides } from './divider-sides.js';\nimport {\n type HorizontalAlignment,\n horizontalAlignment,\n type ListVerticalAlignment,\n verticalAlignment,\n} from './flex-alignment.js';\nimport type { KerfUiContent } from './semantic-content.js';\n\nconst spaceNames: readonly UiSpaceName[] = [\n 'none',\n '2xs',\n 'xs',\n 's',\n 'm',\n 'l',\n 'xl',\n];\n\nexport interface ListProps {\n children?: KerfUiContent;\n /** Use the standard item gap, a named UI spacing token, or a typed CSS length. Defaults to no gap. */\n gap?: boolean | UiSpaceName | CssLength;\n /** Allow this list to grow/shrink, use a keyword, or supply a typed CSS flex shorthand. */\n flex?: boolean | CssFlexKeyword | CssFlex;\n /** Horizontal alignment. Defaults to full to preserve stretch-aligned list children. */\n hAlign?: HorizontalAlignment;\n /** Vertical distribution. Defaults to top. */\n vAlign?: ListVerticalAlignment;\n /** Own vertical scrolling and overscroll containment. */\n scrollable?: boolean;\n /** Physical divider edges in canonical top/right/bottom/left order. */\n dividerSides?: DividerSides;\n /** Physical sides that receive the standard 17px text inset. */\n textInsets?: Sides;\n /** Physical sides that receive the standard 8px control inset. Text insets win on overlap. */\n controlInsets?: Sides;\n className?: string;\n}\n\n/** A stretch-aligned vertical stack with optional gap, flex, scroll, and dividers. */\nexport function List({\n children,\n gap = false,\n flex = false,\n hAlign = 'full',\n vAlign = 'top',\n scrollable = false,\n dividerSides = '',\n textInsets = '',\n controlInsets = '',\n className = '',\n}: ListProps) {\n const gapValue =\n gap === true\n ? 'var(--kui-list-gap)'\n : spaceNames.includes(gap as UiSpaceName)\n ? space(gap as UiSpaceName)\n : gap || undefined;\n const flexValue = flex === true ? '1 1 auto' : flex || undefined;\n const style = [\n gapValue ? `--_kui-list-gap:${gapValue}` : '',\n flexValue ? `--_kui-list-flex:${flexValue}` : '',\n ]\n .filter(Boolean)\n .join(';');\n\n return (\n <div\n class={`kui-list ${className}`.trim()}\n data-component=\"list\"\n data-gap={String(Boolean(gap))}\n data-flex={String(Boolean(flex))}\n data-h-align={horizontalAlignment(hAlign)}\n data-v-align={verticalAlignment(vAlign)}\n data-scrollable={String(scrollable)}\n divider-sides={dividerSides || undefined}\n data-text-insets={textInsets || undefined}\n data-control-insets={controlInsets || undefined}\n style={style || undefined}\n >\n {children}\n </div>\n );\n}\n\nexport type {\n CssFlex,\n CssFlexKeyword,\n CssLength,\n UiSpaceName,\n} from './css-values.js';\nexport type { DividerSides, Sides } from './divider-sides.js';\nexport type {\n HorizontalAlignment,\n ListVerticalAlignment,\n VerticalAlignment,\n} from './flex-alignment.js';\n"]}
@@ -1,4 +1,5 @@
1
1
  type HorizontalAlignment = 'left' | 'l' | 'flex-start' | 'center' | 'c' | 'space-around' | 'right' | 'r' | 'flex-end' | 'full' | 'f' | 'space-between';
2
- type VerticalAlignment = 'top' | 't' | 'flex-start' | 'middle' | 'm' | 'c' | 'space-around' | 'bottom' | 'b' | 'flex-end' | 'full' | 'f' | 'space-between';
2
+ type VerticalAlignment = 'top' | 't' | 'flex-start' | 'middle' | 'm' | 'c' | 'space-around' | 'bottom' | 'b' | 'flex-end' | 'full' | 'f' | 'space-between' | 'baseline';
3
+ type ListVerticalAlignment = Exclude<VerticalAlignment, 'baseline'>;
3
4
 
4
- export type { HorizontalAlignment as H, VerticalAlignment as V };
5
+ export type { HorizontalAlignment as H, ListVerticalAlignment as L, VerticalAlignment as V };
package/dist/index.d.ts CHANGED
@@ -33,7 +33,7 @@ export { ResizeCommit, WireResizableRegionsOptions, wireResizableRegions } from
33
33
  export { TabDropPosition, TabReorder, TabReorderSource, WireTabBarsOptions, reorderTabs, wireTabBars } from './wire-tab-bars.js';
34
34
  export { TokenSearchCollapsibleOptions, TokenSearchEdit, TokenSearchFieldsHandle, TokenSearchSubmit, WireTokenSearchFieldsOptions, wireTokenSearchFields } from './wire-token-search-fields.js';
35
35
  export { D as DividerSides, S as Sides } from './divider-sides-BzB6rphT.js';
36
- export { H as HorizontalAlignment, V as VerticalAlignment } from './flex-alignment-CF8NLj7i.js';
36
+ export { H as HorizontalAlignment, L as ListVerticalAlignment, V as VerticalAlignment } from './flex-alignment-4ms8ZbV8.js';
37
37
  import 'kerfjs';
38
38
  import 'lucide';
39
39
  import 'kerfjs/jsx-runtime';
package/dist/index.js CHANGED
@@ -11,7 +11,7 @@ export { DialogSurface, PopupSurface } from './chunk-WSXUPSID.js';
11
11
  export { TabBar } from './chunk-ZPWZIVI6.js';
12
12
  export { ToolbarText } from './chunk-V6GQKOX2.js';
13
13
  export { ResizableRegion, clampRegionSize, resizeRegionFromPointer } from './chunk-CAB6NQ2T.js';
14
- export { Row } from './chunk-X5GRDQ7V.js';
14
+ export { Row } from './chunk-OGNE3OFT.js';
15
15
  export { SegmentedControl } from './chunk-E34TE2ZI.js';
16
16
  export { FloatingToolbar } from './chunk-DYBPI5O2.js';
17
17
  export { ListActionRow } from './chunk-DAO2VFTT.js';
@@ -24,7 +24,7 @@ export { Pane } from './chunk-I4V3UDSA.js';
24
24
  export { ListHeader } from './chunk-SE7MQMW7.js';
25
25
  export { Text } from './chunk-QM4GQ7W3.js';
26
26
  export { ListItem } from './chunk-I45QO2IZ.js';
27
- export { List } from './chunk-C34NZOLJ.js';
27
+ export { List } from './chunk-WVLMZ5SG.js';
28
28
 
29
29
 
30
30
  export { Skeleton } from './chunk-T7DOWS6T.js';
package/dist/list.d.ts CHANGED
@@ -1,7 +1,8 @@
1
1
  import * as kerfjs from 'kerfjs';
2
2
  import { UiSpaceName, CssLength, CssFlexKeyword, CssFlex } from './css-values.js';
3
3
  import { D as DividerSides, S as Sides } from './divider-sides-BzB6rphT.js';
4
- import { H as HorizontalAlignment, V as VerticalAlignment } from './flex-alignment-CF8NLj7i.js';
4
+ import { H as HorizontalAlignment, L as ListVerticalAlignment } from './flex-alignment-4ms8ZbV8.js';
5
+ export { V as VerticalAlignment } from './flex-alignment-4ms8ZbV8.js';
5
6
  import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
6
7
 
7
8
  interface ListProps {
@@ -13,7 +14,7 @@ interface ListProps {
13
14
  /** Horizontal alignment. Defaults to full to preserve stretch-aligned list children. */
14
15
  hAlign?: HorizontalAlignment;
15
16
  /** Vertical distribution. Defaults to top. */
16
- vAlign?: VerticalAlignment;
17
+ vAlign?: ListVerticalAlignment;
17
18
  /** Own vertical scrolling and overscroll containment. */
18
19
  scrollable?: boolean;
19
20
  /** Physical divider edges in canonical top/right/bottom/left order. */
@@ -27,4 +28,4 @@ interface ListProps {
27
28
  /** A stretch-aligned vertical stack with optional gap, flex, scroll, and dividers. */
28
29
  declare function List({ children, gap, flex, hAlign, vAlign, scrollable, dividerSides, textInsets, controlInsets, className, }: ListProps): kerfjs.SafeHtml;
29
30
 
30
- export { CssFlex, CssFlexKeyword, CssLength, DividerSides, HorizontalAlignment, List, type ListProps, Sides, UiSpaceName, VerticalAlignment };
31
+ export { CssFlex, CssFlexKeyword, CssLength, DividerSides, HorizontalAlignment, List, type ListProps, ListVerticalAlignment, Sides, UiSpaceName };
package/dist/list.js CHANGED
@@ -1,4 +1,4 @@
1
- export { List } from './chunk-C34NZOLJ.js';
1
+ export { List } from './chunk-WVLMZ5SG.js';
2
2
 
3
3
 
4
4
 
package/dist/row.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as kerfjs from 'kerfjs';
2
2
  import { UiSpaceName, CssLength, CssFlexKeyword, CssFlex } from './css-values.js';
3
3
  import { S as Sides } from './divider-sides-BzB6rphT.js';
4
- import { H as HorizontalAlignment, V as VerticalAlignment } from './flex-alignment-CF8NLj7i.js';
4
+ import { H as HorizontalAlignment, V as VerticalAlignment } from './flex-alignment-4ms8ZbV8.js';
5
5
  import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
6
6
 
7
7
  interface RowProps {
package/dist/row.js CHANGED
@@ -1,4 +1,4 @@
1
- export { Row } from './chunk-X5GRDQ7V.js';
1
+ export { Row } from './chunk-OGNE3OFT.js';
2
2
 
3
3
 
4
4
 
@@ -53,11 +53,13 @@
53
53
  }
54
54
 
55
55
  .kui-catalog__identity h1,
56
- .kui-catalog__subtitle {
56
+ .kui-catalog__subtitle.kui-text {
57
57
  margin: 0;
58
58
  }
59
59
 
60
60
  .kui-catalog__identity h1 {
61
+ padding: 0;
62
+ border: 0;
61
63
  overflow: hidden;
62
64
  font-size: var(--kui-font-m);
63
65
  letter-spacing: 0.07em;
@@ -67,8 +69,9 @@
67
69
  white-space: nowrap;
68
70
  }
69
71
 
70
- .kui-catalog__subtitle {
72
+ .kui-catalog__subtitle.kui-text {
71
73
  overflow: hidden;
74
+ border: 0;
72
75
  margin-block-start: calc(-1 * var(--kui-space-xs));
73
76
  padding-block-end: var(--kui-space-xs);
74
77
  padding-inline: calc(
@@ -96,6 +96,13 @@
96
96
  white-space: nowrap;
97
97
  }
98
98
 
99
+ /* Passive labels use Text for semantic heading markup. The title wrapper
100
+ already owns the transparent alignment border, so avoid counting a second
101
+ border before Text's standard content padding. */
102
+ .kui-list-header__label.kui-text {
103
+ border: 0;
104
+ }
105
+
99
106
  .kui-list-header__badge {
100
107
  display: inline-flex;
101
108
  min-height: 1.5rem;
@@ -90,3 +90,8 @@
90
90
  align-items: flex-end;
91
91
  align-content: flex-end;
92
92
  }
93
+
94
+ .kui-row[data-v-align="baseline"] {
95
+ align-items: baseline;
96
+ align-content: baseline;
97
+ }
package/docs/layout.md CHANGED
@@ -166,18 +166,22 @@ insets.
166
166
  Use `Row` for a horizontal flex layout and `List` for a vertical one. `Row`
167
167
  defaults to `hAlign="left"`, `vAlign="full"`, `gap="xs"`, and no wrapping;
168
168
  `List` retains its existing full-width, top-aligned defaults and zero gap.
169
- Both components accept the same physical-axis vocabulary:
169
+ Both components accept the same physical-axis vocabulary, with baseline
170
+ alignment additionally available on the horizontal `Row` cross axis:
170
171
 
171
- | Axis | Values and aliases | Flex behavior |
172
- | ---------- | ------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------- |
173
- | Horizontal | `left` / `l` / `flex-start`; `center` / `c` / `space-around`; `right` / `r` / `flex-end`; `full` / `f` / `space-between` | Distributes a Row's children; aligns a List's children across its width. |
174
- | Vertical | `top` / `t` / `flex-start`; `middle` / `m` / `c` / `space-around`; `bottom` / `b` / `flex-end`; `full` / `f` / `space-between` | Aligns a Row's children across its height; distributes a List's children. |
172
+ | Axis | Values and aliases | Flex behavior |
173
+ | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------- |
174
+ | Horizontal | `left` / `l` / `flex-start`; `center` / `c` / `space-around`; `right` / `r` / `flex-end`; `full` / `f` / `space-between` | Distributes a Row's children; aligns a List's children across its width. |
175
+ | Vertical | `top` / `t` / `flex-start`; `middle` / `m` / `c` / `space-around`; `bottom` / `b` / `flex-end`; `full` / `f` / `space-between`; Row-only `baseline` | Aligns a Row's children across its height; distributes a List's children. |
175
176
 
176
177
  Cross-axis `space-around` and `space-between` are not valid `align-items`
177
178
  values. Kerf therefore maps `middle` to centered items and `full` to stretched
178
179
  items, while applying the requested distribution to `align-content` when a
179
180
  Row wraps. Prefer the descriptive values in application code; the short and
180
181
  CSS-shaped aliases are provided for compact or migrated call sites.
182
+ `baseline` is Row-only because CSS baseline alignment applies to a flex
183
+ container's cross axis; a vertical List's `vAlign` controls main-axis
184
+ distribution through `justify-content`, which has no baseline value.
181
185
 
182
186
  `Row.flex` and `List.flex` share one typed participation contract. Omit the prop
183
187
  for the CSS initial value, pass `true` for `1 1 auto`, select the finite
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kerfjs/ui",
3
- "version": "5.0.0-beta.42",
3
+ "version": "5.0.0-beta.45",
4
4
  "description": "Accessible, composable UI primitives for kerf applications.",
5
5
  "type": "module",
6
6
  "license": "MIT",
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/list.tsx"],"names":[],"mappings":";;;;AAgBA,IAAM,UAAA,GAAqC;AAAA,EACzC,MAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,GAAA;AAAA,EACA,GAAA;AAAA,EACA,GAAA;AAAA,EACA;AACF,CAAA;AAwBO,SAAS,IAAA,CAAK;AAAA,EACnB,QAAA;AAAA,EACA,GAAA,GAAM,KAAA;AAAA,EACN,IAAA,GAAO,KAAA;AAAA,EACP,MAAA,GAAS,MAAA;AAAA,EACT,MAAA,GAAS,KAAA;AAAA,EACT,UAAA,GAAa,KAAA;AAAA,EACb,YAAA,GAAe,EAAA;AAAA,EACf,UAAA,GAAa,EAAA;AAAA,EACb,aAAA,GAAgB,EAAA;AAAA,EAChB,SAAA,GAAY;AACd,CAAA,EAAc;AACZ,EAAA,MAAM,QAAA,GACJ,GAAA,KAAQ,IAAA,GACJ,qBAAA,GACA,UAAA,CAAW,QAAA,CAAS,GAAkB,CAAA,GACpC,KAAA,CAAM,GAAkB,CAAA,GACxB,GAAA,IAAO,MAAA;AACf,EAAA,MAAM,SAAA,GAAY,IAAA,KAAS,IAAA,GAAO,UAAA,GAAa,IAAA,IAAQ,MAAA;AACvD,EAAA,MAAM,KAAA,GAAQ;AAAA,IACZ,QAAA,GAAW,CAAA,gBAAA,EAAmB,QAAQ,CAAA,CAAA,GAAK,EAAA;AAAA,IAC3C,SAAA,GAAY,CAAA,iBAAA,EAAoB,SAAS,CAAA,CAAA,GAAK;AAAA,GAChD,CACG,MAAA,CAAO,OAAO,CAAA,CACd,KAAK,GAAG,CAAA;AAEX,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,SAAA,EAAY,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACpC,gBAAA,EAAe,MAAA;AAAA,MACf,UAAA,EAAU,MAAA,CAAO,OAAA,CAAQ,GAAG,CAAC,CAAA;AAAA,MAC7B,WAAA,EAAW,MAAA,CAAO,OAAA,CAAQ,IAAI,CAAC,CAAA;AAAA,MAC/B,cAAA,EAAc,oBAAoB,MAAM,CAAA;AAAA,MACxC,cAAA,EAAc,kBAAkB,MAAM,CAAA;AAAA,MACtC,iBAAA,EAAiB,OAAO,UAAU,CAAA;AAAA,MAClC,iBAAe,YAAA,IAAgB,MAAA;AAAA,MAC/B,oBAAkB,UAAA,IAAc,MAAA;AAAA,MAChC,uBAAqB,aAAA,IAAiB,MAAA;AAAA,MACtC,OAAO,KAAA,IAAS,MAAA;AAAA,MAEf;AAAA;AAAA,GACH;AAEJ","file":"chunk-C34NZOLJ.js","sourcesContent":["import {\n type CssFlex,\n type CssFlexKeyword,\n type CssLength,\n space,\n type UiSpaceName,\n} from './css-values.js';\nimport type { DividerSides, Sides } from './divider-sides.js';\nimport {\n type HorizontalAlignment,\n horizontalAlignment,\n type VerticalAlignment,\n verticalAlignment,\n} from './flex-alignment.js';\nimport type { KerfUiContent } from './semantic-content.js';\n\nconst spaceNames: readonly UiSpaceName[] = [\n 'none',\n '2xs',\n 'xs',\n 's',\n 'm',\n 'l',\n 'xl',\n];\n\nexport interface ListProps {\n children?: KerfUiContent;\n /** Use the standard item gap, a named UI spacing token, or a typed CSS length. Defaults to no gap. */\n gap?: boolean | UiSpaceName | CssLength;\n /** Allow this list to grow/shrink, use a keyword, or supply a typed CSS flex shorthand. */\n flex?: boolean | CssFlexKeyword | CssFlex;\n /** Horizontal alignment. Defaults to full to preserve stretch-aligned list children. */\n hAlign?: HorizontalAlignment;\n /** Vertical distribution. Defaults to top. */\n vAlign?: VerticalAlignment;\n /** Own vertical scrolling and overscroll containment. */\n scrollable?: boolean;\n /** Physical divider edges in canonical top/right/bottom/left order. */\n dividerSides?: DividerSides;\n /** Physical sides that receive the standard 17px text inset. */\n textInsets?: Sides;\n /** Physical sides that receive the standard 8px control inset. Text insets win on overlap. */\n controlInsets?: Sides;\n className?: string;\n}\n\n/** A stretch-aligned vertical stack with optional gap, flex, scroll, and dividers. */\nexport function List({\n children,\n gap = false,\n flex = false,\n hAlign = 'full',\n vAlign = 'top',\n scrollable = false,\n dividerSides = '',\n textInsets = '',\n controlInsets = '',\n className = '',\n}: ListProps) {\n const gapValue =\n gap === true\n ? 'var(--kui-list-gap)'\n : spaceNames.includes(gap as UiSpaceName)\n ? space(gap as UiSpaceName)\n : gap || undefined;\n const flexValue = flex === true ? '1 1 auto' : flex || undefined;\n const style = [\n gapValue ? `--_kui-list-gap:${gapValue}` : '',\n flexValue ? `--_kui-list-flex:${flexValue}` : '',\n ]\n .filter(Boolean)\n .join(';');\n\n return (\n <div\n class={`kui-list ${className}`.trim()}\n data-component=\"list\"\n data-gap={String(Boolean(gap))}\n data-flex={String(Boolean(flex))}\n data-h-align={horizontalAlignment(hAlign)}\n data-v-align={verticalAlignment(vAlign)}\n data-scrollable={String(scrollable)}\n divider-sides={dividerSides || undefined}\n data-text-insets={textInsets || undefined}\n data-control-insets={controlInsets || undefined}\n style={style || undefined}\n >\n {children}\n </div>\n );\n}\n\nexport type {\n CssFlex,\n CssFlexKeyword,\n CssLength,\n UiSpaceName,\n} from './css-values.js';\nexport type { DividerSides, Sides } from './divider-sides.js';\nexport type {\n HorizontalAlignment,\n VerticalAlignment,\n} from './flex-alignment.js';\n"]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/flex-alignment.ts"],"names":[],"mappings":";AAgCO,SAAS,oBACd,KAAA,EAC8B;AAC9B,EAAA,QAAQ,KAAA;AAAO,IACb,KAAK,MAAA;AAAA,IACL,KAAK,GAAA;AAAA,IACL,KAAK,YAAA;AACH,MAAA,OAAO,MAAA;AAAA,IACT,KAAK,QAAA;AAAA,IACL,KAAK,GAAA;AAAA,IACL,KAAK,cAAA;AACH,MAAA,OAAO,QAAA;AAAA,IACT,KAAK,OAAA;AAAA,IACL,KAAK,GAAA;AAAA,IACL,KAAK,UAAA;AACH,MAAA,OAAO,OAAA;AAAA,IACT,KAAK,MAAA;AAAA,IACL,KAAK,GAAA;AAAA,IACL,KAAK,eAAA;AACH,MAAA,OAAO,MAAA;AAAA;AAEb;AAEO,SAAS,kBACd,KAAA,EAC4B;AAC5B,EAAA,QAAQ,KAAA;AAAO,IACb,KAAK,KAAA;AAAA,IACL,KAAK,GAAA;AAAA,IACL,KAAK,YAAA;AACH,MAAA,OAAO,KAAA;AAAA,IACT,KAAK,QAAA;AAAA,IACL,KAAK,GAAA;AAAA,IACL,KAAK,GAAA;AAAA,IACL,KAAK,cAAA;AACH,MAAA,OAAO,QAAA;AAAA,IACT,KAAK,QAAA;AAAA,IACL,KAAK,GAAA;AAAA,IACL,KAAK,UAAA;AACH,MAAA,OAAO,QAAA;AAAA,IACT,KAAK,MAAA;AAAA,IACL,KAAK,GAAA;AAAA,IACL,KAAK,eAAA;AACH,MAAA,OAAO,MAAA;AAAA;AAEb","file":"chunk-R3EBGEAW.js","sourcesContent":["export type HorizontalAlignment =\n | 'left'\n | 'l'\n | 'flex-start'\n | 'center'\n | 'c'\n | 'space-around'\n | 'right'\n | 'r'\n | 'flex-end'\n | 'full'\n | 'f'\n | 'space-between';\n\nexport type VerticalAlignment =\n | 'top'\n | 't'\n | 'flex-start'\n | 'middle'\n | 'm'\n | 'c'\n | 'space-around'\n | 'bottom'\n | 'b'\n | 'flex-end'\n | 'full'\n | 'f'\n | 'space-between';\n\nexport type CanonicalHorizontalAlignment = 'left' | 'center' | 'right' | 'full';\nexport type CanonicalVerticalAlignment = 'top' | 'middle' | 'bottom' | 'full';\n\nexport function horizontalAlignment(\n value: HorizontalAlignment,\n): CanonicalHorizontalAlignment {\n switch (value) {\n case 'left':\n case 'l':\n case 'flex-start':\n return 'left';\n case 'center':\n case 'c':\n case 'space-around':\n return 'center';\n case 'right':\n case 'r':\n case 'flex-end':\n return 'right';\n case 'full':\n case 'f':\n case 'space-between':\n return 'full';\n }\n}\n\nexport function verticalAlignment(\n value: VerticalAlignment,\n): CanonicalVerticalAlignment {\n switch (value) {\n case 'top':\n case 't':\n case 'flex-start':\n return 'top';\n case 'middle':\n case 'm':\n case 'c':\n case 'space-around':\n return 'middle';\n case 'bottom':\n case 'b':\n case 'flex-end':\n return 'bottom';\n case 'full':\n case 'f':\n case 'space-between':\n return 'full';\n }\n}\n"]}