@kerfjs/ui 5.0.0-beta.85 → 5.0.0-beta.86

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.
Files changed (20) hide show
  1. package/ai/component-catalog.json +0 -1
  2. package/ai/component-composition.json +0 -1
  3. package/ai/components/value-table.md +1 -1
  4. package/ai/public-api-signatures-v1.md +1 -1
  5. package/ai/webawesome-jsx-signatures-v1.md +1 -1
  6. package/dist/{chunk-7TE6XDFI.js → chunk-B3TROLC2.js} +15 -2
  7. package/dist/chunk-B3TROLC2.js.map +1 -0
  8. package/dist/content-item.js +1 -1
  9. package/dist/index.js +1 -1
  10. package/dist/styles/components/data-display/value-table/value-table.css +5 -3
  11. package/dist/styles/value-table.css +5 -3
  12. package/dist/wire-content-items.js +29 -4
  13. package/dist/wire-content-items.js.map +1 -1
  14. package/docs/component-contract.md +7 -0
  15. package/docs/design/templates/value-table/details-dark.svg +1 -1
  16. package/docs/design/templates/value-table/details.svg +1 -1
  17. package/docs/design/templates/value-table-dark.svg +1 -1
  18. package/docs/design/templates/value-table.svg +1 -1
  19. package/package.json +2 -1
  20. package/dist/chunk-7TE6XDFI.js.map +0 -1
package/ai/component-catalog.json CHANGED
@@ -2504,7 +2504,6 @@
2504
2504
  "--kui-color-neutral-border-normal",
2505
2505
  "--kui-color-surface-lowered",
2506
2506
  "--kui-color-text",
2507
- "--kui-color-text-quiet",
2508
2507
  "--kui-font-weight-semibold",
2509
2508
  "--kui-layout-inline-margin",
2510
2509
  "--kui-layout-item-gap",
package/ai/component-composition.json CHANGED
@@ -2217,7 +2217,6 @@
2217
2217
  "--kui-color-neutral-border-normal",
2218
2218
  "--kui-color-surface-lowered",
2219
2219
  "--kui-color-text",
2220
- "--kui-color-text-quiet",
2221
2220
  "--kui-font-weight-semibold",
2222
2221
  "--kui-layout-inline-margin",
2223
2222
  "--kui-layout-item-gap",
package/ai/components/value-table.md CHANGED
@@ -62,7 +62,7 @@ Public class hooks (select for layout placement only, never to change the compon
62
62
 
63
63
  Never put `kui-value-table`, `kui-value-table__row`, `kui-value-table__icon`, `kui-value-table__label` on an element you write; render `ValueTable` instead (`KUI-L103`).
64
64
 
65
- Public tokens it reads: `--kui-color-neutral-border-normal`, `--kui-color-surface-lowered`, `--kui-color-text`, `--kui-color-text-quiet`, `--kui-font-weight-semibold`, `--kui-layout-inline-margin`, `--kui-layout-item-gap`, `--kui-layout-item-padding`, `--kui-space-2xs`, `--kui-value-table-background`, `--kui-value-table-border`, `--kui-value-table-icon-size`, `--kui-value-table-row-columns`, `--kui-value-table-row-padding-block`, `--kui-value-table-row-gap`. Set a token only where its public contract allows; prefer a prop.
65
+ Public tokens it reads: `--kui-color-neutral-border-normal`, `--kui-color-surface-lowered`, `--kui-color-text`, `--kui-font-weight-semibold`, `--kui-layout-inline-margin`, `--kui-layout-item-gap`, `--kui-layout-item-padding`, `--kui-space-2xs`, `--kui-value-table-background`, `--kui-value-table-border`, `--kui-value-table-icon-size`, `--kui-value-table-row-columns`, `--kui-value-table-row-padding-block`, `--kui-value-table-row-gap`. Set a token only where its public contract allows; prefer a prop.
66
66
 
67
67
  Everything else is internal: `kerf-ui-analyze` reports private or unknown `.kui-*` selectors (`KUI-L001`, `KUI-L010`), unknown or private tokens (`KUI-L002`, `KUI-L012`), and any application rule that restyles the component, forced dimensions included (`KUI-L019`).
68
68
 
package/ai/public-api-signatures-v1.md CHANGED
@@ -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.85` and `kerfjs@5.0.0-beta.85`. 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.86` and `kerfjs@5.0.0-beta.86`. 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
 
package/ai/webawesome-jsx-signatures-v1.md CHANGED
@@ -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.85` 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.86` 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/{chunk-7TE6XDFI.js → chunk-B3TROLC2.js} RENAMED
@@ -1,6 +1,17 @@
1
1
  import { filterDataAttributes } from './chunk-LAZLBC2Q.js';
2
2
  import { jsx } from 'kerfjs/jsx-runtime';
3
3
 
4
+ function roleForSelectionMode(mode) {
5
+ switch (mode) {
6
+ case "single":
7
+ return "option";
8
+ case "multiple":
9
+ return "row";
10
+ case "none":
11
+ case "toggle":
12
+ return "button";
13
+ }
14
+ }
4
15
  var contentItemProtectedAttributes = /* @__PURE__ */ new Set([
5
16
  "data-component",
6
17
  "data-appearance",
@@ -64,6 +75,8 @@ function ContentItem({
64
75
  "data-selected": selectionMode === "none" ? void 0 : String(selected),
65
76
  "data-disabled": disabled ? "true" : void 0
66
77
  } : {};
78
+ let role = ariaLabel ? "region" : void 0;
79
+ if (interactive) role = roleForSelectionMode(selectionMode);
67
80
  return /* @__PURE__ */ jsx(
68
81
  "div",
69
82
  {
@@ -74,7 +87,7 @@ function ContentItem({
74
87
  "data-component": "content-item",
75
88
  "data-appearance": appearance,
76
89
  "data-outlined": outlined ? "true" : void 0,
77
- role: interactive ? selectionMode === "single" ? "option" : selectionMode === "multiple" ? "row" : "button" : ariaLabel ? "region" : void 0,
90
+ role,
78
91
  "aria-label": ariaLabel,
79
92
  "aria-selected": interactive && (selectionMode === "single" || selectionMode === "multiple") ? String(selected) : void 0,
80
93
  "aria-pressed": interactive && selectionMode === "toggle" ? String(selected) : void 0,
@@ -88,4 +101,4 @@ function ContentItem({
88
101
 
89
102
  export { ContentItem };
90
103
 
91
- //# sourceMappingURL=chunk-7TE6XDFI.js.map
104
+ //# sourceMappingURL=chunk-B3TROLC2.js.map
package/dist/chunk-B3TROLC2.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/surfaces/content-item/content-item.tsx"],"names":[],"mappings":";;;AAkBA,SAAS,qBACP,IAAA,EAC6B;AAC7B,EAAA,QAAQ,IAAA;AAAM,IACZ,KAAK,QAAA;AACH,MAAA,OAAO,QAAA;AAAA,IACT,KAAK,UAAA;AACH,MAAA,OAAO,KAAA;AAAA,IACT,KAAK,MAAA;AAAA,IACL,KAAK,QAAA;AACH,MAAA,OAAO,QAAA;AAAA;AAEb;AAEA,IAAM,8BAAA,uBAAqC,GAAA,CAAI;AAAA,EAC7C,gBAAA;AAAA,EACA,iBAAA;AAAA,EACA;AACF,CAAC,CAAA;AACD,IAAM,8BAAA,uBAAqC,GAAA,CAAI;AAAA,EAC7C,gBAAA;AAAA,EACA,iBAAA;AAAA,EACA,eAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA,kBAAA;AAAA,EACA,eAAA;AAAA,EACA,eAAA;AAAA,EACA,qBAAA;AAAA,EACA;AACF,CAAC,CAAA;AAkGM,SAAS,WAAA,CAAY;AAAA,EAC1B,UAAA,GAAa,aAAA;AAAA,EACb,QAAA;AAAA,EACA,KAAA,GAAQ,MAAA;AAAA,EACR,KAAA,GAAQ,KAAA;AAAA,EACR,KAAA,GAAQ,SAAA;AAAA,EACR,KAAA;AAAA,EACA,SAAA;AAAA,EACA,WAAA,GAAc,KAAA;AAAA,EACd,QAAA,GAAW,KAAA;AAAA,EACX,QAAA;AAAA,EACA,WAAA,GAAc,KAAA;AAAA,EACd,MAAA;AAAA,EACA,MAAA;AAAA,EACA,aAAA,GAAgB,MAAA;AAAA,EAChB,QAAA,GAAW,KAAA;AAAA,EACX,QAAA,GAAW,KAAA;AAAA,EACX,SAAA,GAAY,EAAA;AAAA,EACZ,iBAAiB,EAAC;AAAA,EAClB;AACF,CAAA,EAAqB;AACnB,EAAA,MAAM,kBAAA,GAAqB,oBAAA;AAAA,IACzB,cAAA;AAAA,IACA,cACI,8BAAA,GACA;AAAA,GACN;AACA,EAAA,IAAI,WAAA,IAAe,CAAC,MAAA,EAAQ;AAC1B,IAAA,MAAM,IAAI,MAAM,4CAA4C,CAAA;AAAA,EAC9D;AACA,EAAA,IAAI,WAAA,IAAe,QAAA,IAAY,aAAA,KAAkB,MAAA,EAAQ;AACvD,IAAA,MAAM,IAAI,MAAM,+CAA+C,CAAA;AAAA,EACjE;AACA,EAAA,MAAM,GAAA,GAAM;AAAA,IACV,kBAAA;AAAA,IACA,KAAA,KAAU,SAAS,wBAAA,GAA2B,EAAA;AAAA,IAC9C,KAAA,KAAU,WAAW,0BAAA,GAA6B,EAAA;AAAA,IAClD,QAAQ,yBAAA,GAA4B,EAAA;AAAA,IACpC;AAAA,GACF,CACG,MAAA,CAAO,OAAO,CAAA,CACd,KAAK,GAAG,CAAA;AACX,EAAA,MAAM,wBAAwB,WAAA,GAC1B;AAAA,IACE,kBAAA,EAAoB,MAAA;AAAA,IACpB,aAAA,EAAe,WAAW,MAAA,GAAY,MAAA;AAAA,IACtC,cAAA,EAAgB,MAAA;AAAA,IAChB,qBAAA,EAAuB,aAAA;AAAA,IACvB,eAAA,EACE,aAAA,KAAkB,MAAA,GAAS,MAAA,GAAY,OAAO,QAAQ,CAAA;AAAA,IACxD,eAAA,EAAiB,WAAW,MAAA,GAAS;AAAA,MAEvC,EAAC;AACL,EAAA,IAAI,IAAA,GAA2D,YAC3D,QAAA,GACA,MAAA;AACJ,EAAA,IAAI,WAAA,EAAa,IAAA,GAAO,oBAAA,CAAqB,aAAa,CAAA;AAC1D,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,kBAAA;AAAA,MACH,GAAG,qBAAA;AAAA,MACJ,KAAA,EAAO,GAAA;AAAA,MACP,KAAA;AAAA,MACA,gBAAA,EAAe,cAAA;AAAA,MACf,iBAAA,EAAiB,UAAA;AAAA,MACjB,eAAA,EAAe,WAAW,MAAA,GAAS,MAAA;AAAA,MACnC,IAAA;AAAA,MACA,YAAA,EAAY,SAAA;AAAA,MACZ,eAAA,EACE,gBACC,aAAA,KAAkB,QAAA,IAAY,kBAAkB,UAAA,CAAA,GAC7C,MAAA,CAAO,QAAQ,CAAA,GACf,MAAA;AAAA,MAEN,gBACE,WAAA,IAAe,aAAA,KAAkB,QAAA,GAAW,MAAA,CAAO,QAAQ,CAAA,GAAI,MAAA;AAAA,MAEjE,eAAA,EAAe,WAAA,IAAe,QAAA,GAAW,MAAA,GAAS,MAAA;AAAA,MAClD,UACE,WAAA,GACI,QAAA,GACE,OACA,GAAA,GACD,QAAA,KAAa,cAAc,IAAA,GAAO,MAAA,CAAA;AAAA,MAEzC,IAAA;AAAA,MAEC,QAAA,EAAA,WAAA,IAAe,kBAAkB,UAAA,mBAChC,GAAA,CAAC,SAAI,IAAA,EAAK,UAAA,EAAY,UAAS,CAAA,GAE/B;AAAA;AAAA,GAEJ;AAEJ","file":"chunk-B3TROLC2.js","sourcesContent":["import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { filterDataAttributes } from '../../../shared/dom/extension-attributes.js';\nimport type { SemanticTone } from '../../../shared/styles/semantic-tone.js';\n\nexport type { SemanticTone } from '../../../shared/styles/semantic-tone.js';\n\n/** Base surface treatment or semantic status colors. */\nexport type ContentItemAppearance = 'transparent' | 'surface' | SemanticTone;\n\n/** Whether the item's always-reserved 1px border is transparent or visible. */\nexport type ContentItemFrame = 'none' | 'framed';\n\n/** Corner shape: the 12px rounded rectangle or the 22px pill. */\nexport type ContentItemShape = 'rounded' | 'pill';\n/** `single` uses an option; `multiple` uses a grid row; `toggle` uses a pressed button. */\nexport type ContentItemSelectionMode =\n 'none' | 'single' | 'multiple' | 'toggle';\n\nfunction roleForSelectionMode(\n mode: ContentItemSelectionMode,\n): 'option' | 'row' | 'button' {\n switch (mode) {\n case 'single':\n return 'option';\n case 'multiple':\n return 'row';\n case 'none':\n case 'toggle':\n return 'button';\n }\n}\n\nconst contentItemProtectedAttributes = new Set([\n 'data-component',\n 'data-appearance',\n 'data-outlined',\n]);\nconst interactiveProtectedAttributes = new Set([\n 'data-component',\n 'data-appearance',\n 'data-outlined',\n 'data-action',\n 'data-item-id',\n 'data-interactive',\n 'data-selected',\n 'data-disabled',\n 'data-selection-mode',\n 'data-kui-pressed',\n]);\n\ntype ContentItemRootAttributes = Readonly<\n Record<`data-${string}`, string | undefined> & {\n 'data-component'?: never;\n 'data-appearance'?: never;\n 'data-outlined'?: never;\n }\n>;\n\ntype ContentItemInteractiveRootAttributes = Readonly<\n Record<`data-${string}`, string | undefined> & {\n 'data-component'?: never;\n 'data-appearance'?: never;\n 'data-outlined'?: never;\n 'data-action'?: never;\n 'data-item-id'?: never;\n 'data-interactive'?: never;\n 'data-selected'?: never;\n 'data-disabled'?: never;\n 'data-selection-mode'?: never;\n 'data-kui-pressed'?: never;\n }\n>;\n\ninterface ContentItemBaseProps {\n /**\n * Coordinated background, border, and foreground colors. `transparent`\n * preserves the surrounding surface; `surface` paints the base surface;\n * semantic values match StateBanner. Defaults to `transparent`.\n */\n appearance?: ContentItemAppearance;\n /** Item content; a plain string is allowed for bare copy. */\n children?: KerfUiContent | string;\n /**\n * `framed` paints the standard neutral border in the 1px the item always\n * reserves, so framing never changes geometry. Frame only an item that\n * marks a real distinction. Defaults to `none` (transparent border).\n */\n frame?: ContentItemFrame;\n /** Remove block padding and block borders while retaining inline geometry. */\n flush?: boolean;\n /** Corner shape. Defaults to `rounded`. */\n shape?: ContentItemShape;\n /** Native hover tooltip. */\n title?: string;\n /**\n * Names the item as a distinct region (`role=\"region\"`). Omit it for an\n * ordinary item, which stays a non-landmark grouping.\n */\n ariaLabel?: string;\n /**\n * Makes the item a programmatic focus target (`tabindex=\"-1\"`, never a tab\n * stop), for example the preferred initial focus of a NavStack view when\n * combined with `data-nav-focus` in `rootAttributes`.\n */\n focusTarget?: boolean;\n /** Keep the standard focus outline visible, such as for a drop target. */\n outlined?: boolean;\n className?: string;\n /** Native named-slot assignment when composed inside a web component. */\n slot?: string;\n}\n\nexport type ContentItemProps = ContentItemBaseProps &\n (\n | {\n interactive?: false;\n action?: never;\n itemId?: never;\n selectionMode?: never;\n selected?: never;\n disabled?: never;\n /** Opt into keyboard (`0`) or programmatic (`-1`) focus. */\n tabIndex?: 0 | -1;\n /** Existing static `data-*` metadata remains available. */\n rootAttributes?: ContentItemRootAttributes;\n }\n | {\n /** Enable a keyboard reachable card; wire `wireContentItems` once on its containing root. */\n interactive: true;\n /** Delegated action dispatched by pointer, Enter, or Space. */\n action: string;\n itemId?: string;\n selectionMode?: ContentItemSelectionMode;\n selected?: boolean;\n disabled?: boolean;\n tabIndex?: never;\n /** Safe app metadata; interaction attributes are component-owned. */\n rootAttributes?: ContentItemInteractiveRootAttributes;\n }\n );\n\n/**\n * One self-contained `.kui-content` child: an 8px inline margin, a real 1px\n * border (transparent unless `framed`), 8px padding, and a rounded or pill\n * radius. It owns that whole geometry, so wrappers must not add more.\n */\nexport function ContentItem({\n appearance = 'transparent',\n children,\n frame = 'none',\n flush = false,\n shape = 'rounded',\n title,\n ariaLabel,\n focusTarget = false,\n outlined = false,\n tabIndex,\n interactive = false,\n action,\n itemId,\n selectionMode = 'none',\n selected = false,\n disabled = false,\n className = '',\n rootAttributes = {},\n slot,\n}: ContentItemProps) {\n const safeRootAttributes = filterDataAttributes(\n rootAttributes,\n interactive\n ? interactiveProtectedAttributes\n : contentItemProtectedAttributes,\n );\n if (interactive && !action) {\n throw new Error('Interactive ContentItem requires an action');\n }\n if (interactive && selected && selectionMode === 'none') {\n throw new Error('Selected ContentItem requires a selectionMode');\n }\n const cls = [\n 'kui-content-item',\n shape === 'pill' ? 'kui-content-item--pill' : '',\n frame === 'framed' ? 'kui-content-item--framed' : '',\n flush ? 'kui-content-item--flush' : '',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n const interactiveAttributes = interactive\n ? {\n 'data-interactive': 'true',\n 'data-action': disabled ? undefined : action,\n 'data-item-id': itemId,\n 'data-selection-mode': selectionMode,\n 'data-selected':\n selectionMode === 'none' ? undefined : String(selected),\n 'data-disabled': disabled ? 'true' : undefined,\n }\n : {};\n let role: 'option' | 'row' | 'button' | 'region' | undefined = ariaLabel\n ? 'region'\n : undefined;\n if (interactive) role = roleForSelectionMode(selectionMode);\n return (\n <div\n {...safeRootAttributes}\n {...interactiveAttributes}\n class={cls}\n title={title}\n data-component=\"content-item\"\n data-appearance={appearance}\n data-outlined={outlined ? 'true' : undefined}\n role={role}\n aria-label={ariaLabel}\n aria-selected={\n interactive &&\n (selectionMode === 'single' || selectionMode === 'multiple')\n ? String(selected)\n : undefined\n }\n aria-pressed={\n interactive && selectionMode === 'toggle' ? String(selected) : undefined\n }\n aria-disabled={interactive && disabled ? 'true' : undefined}\n tabindex={\n interactive\n ? disabled\n ? '-1'\n : '0'\n : (tabIndex ?? (focusTarget ? '-1' : undefined))\n }\n slot={slot}\n >\n {interactive && selectionMode === 'multiple' ? (\n <div role=\"gridcell\">{children}</div>\n ) : (\n children\n )}\n </div>\n );\n}\n"]}
package/dist/content-item.js CHANGED
@@ -1,4 +1,4 @@
1
- export { ContentItem } from './chunk-7TE6XDFI.js';
1
+ export { ContentItem } from './chunk-B3TROLC2.js';
2
2
 
3
3
 
4
4
  //# sourceMappingURL=content-item.js.map
package/dist/index.js CHANGED
@@ -43,7 +43,7 @@ export { LucideIcon } from './chunk-NP3FSLNX.js';
43
43
  export { LoadingSpinner } from './chunk-YOKEL75M.js';
44
44
 
45
45
  export { calc, colorVar, em, flex, foregroundColor, foregroundColorVar, lengthVar, pct, plus, px, rem, space, uiColor } from './chunk-U657IHFB.js';
46
- export { ContentItem } from './chunk-7TE6XDFI.js';
46
+ export { ContentItem } from './chunk-B3TROLC2.js';
47
47
 
48
48
 
49
49
  //# sourceMappingURL=index.js.map
package/dist/styles/components/data-display/value-table/value-table.css CHANGED
@@ -1,5 +1,4 @@
1
1
  .kui-value-table {
2
- --kui-value-table-background: var(--kui-color-surface-lowered);
3
2
  --kui-value-table-border: var(--kui-color-neutral-border-normal);
4
3
  --_kui-value-table-icon-size: var(--kui-value-table-icon-size, 1.5rem);
5
4
  display: grid;
@@ -8,7 +7,10 @@
8
7
  overflow: hidden;
9
8
  border: 1px solid var(--kui-value-table-border);
10
9
  border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
11
- background: var(--kui-value-table-background);
10
+ background: var(
11
+ --kui-value-table-background,
12
+ var(--kui-color-surface-lowered)
13
+ );
12
14
  }
13
15
  .kui-value-table__row {
14
16
  --_kui-value-table-inline-padding: var(
@@ -68,7 +70,7 @@
68
70
  max-width: 100%;
69
71
  min-width: 0;
70
72
  justify-self: start;
71
- color: var(--kui-color-text-quiet);
73
+ color: var(--kui-color-text);
72
74
  align-items: center;
73
75
  gap: var(--kui-layout-item-gap, 0.5rem);
74
76
  }
package/dist/styles/value-table.css CHANGED
@@ -1,5 +1,4 @@
1
1
  .kui-value-table {
2
- --kui-value-table-background: var(--kui-color-surface-lowered);
3
2
  --kui-value-table-border: var(--kui-color-neutral-border-normal);
4
3
  --_kui-value-table-icon-size: var(--kui-value-table-icon-size, 1.5rem);
5
4
  display: grid;
@@ -8,7 +7,10 @@
8
7
  overflow: hidden;
9
8
  border: 1px solid var(--kui-value-table-border);
10
9
  border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
11
- background: var(--kui-value-table-background);
10
+ background: var(
11
+ --kui-value-table-background,
12
+ var(--kui-color-surface-lowered)
13
+ );
12
14
  }
13
15
  .kui-value-table__row {
14
16
  --_kui-value-table-inline-padding: var(
@@ -68,7 +70,7 @@
68
70
  max-width: 100%;
69
71
  min-width: 0;
70
72
  justify-self: start;
71
- color: var(--kui-color-text-quiet);
73
+ color: var(--kui-color-text);
72
74
  align-items: center;
73
75
  gap: var(--kui-layout-item-gap, 0.5rem);
74
76
  }
package/dist/wire-content-items.js CHANGED
@@ -10,9 +10,18 @@ function nextTile(item, rows, key) {
10
10
  return { row, x: rect.left + rect.width / 2, y: rect.top };
11
11
  });
12
12
  const sameLine = (y) => Math.abs(y - current.top) < 1;
13
- const directed = candidates.filter(
14
- ({ x, y }) => key === "ArrowLeft" ? sameLine(y) && x < centerX : key === "ArrowRight" ? sameLine(y) && x > centerX : key === "ArrowUp" ? y < current.top - 1 : y > current.top + 1
15
- );
13
+ const directed = candidates.filter(({ x, y }) => {
14
+ switch (key) {
15
+ case "ArrowLeft":
16
+ return sameLine(y) && x < centerX;
17
+ case "ArrowRight":
18
+ return sameLine(y) && x > centerX;
19
+ case "ArrowUp":
20
+ return y < current.top - 1;
21
+ default:
22
+ return y > current.top + 1;
23
+ }
24
+ });
16
25
  directed.sort((a, b) => {
17
26
  if (key === "ArrowLeft") return b.x - a.x;
18
27
  if (key === "ArrowRight") return a.x - b.x;
@@ -66,7 +75,23 @@ function wireContentItems(root) {
66
75
  const index = rows.indexOf(item);
67
76
  if (index < 0) return;
68
77
  const isTileGrid = grid.getAttribute("data-component") === "grid";
69
- const next = event.key === "Home" ? rows[0] : event.key === "End" ? rows[rows.length - 1] : isTileGrid ? nextTile(item, rows, event.key) : event.key === "ArrowDown" || event.key === "ArrowUp" ? rows[index + (event.key === "ArrowDown" ? 1 : -1)] : void 0;
78
+ let next;
79
+ switch (event.key) {
80
+ case "Home":
81
+ next = rows[0];
82
+ break;
83
+ case "End":
84
+ next = rows[rows.length - 1];
85
+ break;
86
+ case "ArrowDown":
87
+ case "ArrowUp":
88
+ next = isTileGrid ? nextTile(item, rows, event.key) : rows[index + (event.key === "ArrowDown" ? 1 : -1)];
89
+ break;
90
+ case "ArrowLeft":
91
+ case "ArrowRight":
92
+ next = isTileGrid ? nextTile(item, rows, event.key) : void 0;
93
+ break;
94
+ }
70
95
  if (next) {
71
96
  event.preventDefault();
72
97
  next.focus();
package/dist/wire-content-items.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/surfaces/content-item/wiring/wire-content-items.ts"],"names":[],"mappings":"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","file":"wire-content-items.js","sourcesContent":["const ITEM_SELECTOR =\n '[data-component=\"content-item\"][data-interactive=\"true\"]';\nconst NESTED_CONTROL_SELECTOR =\n 'button, a[href], input, select, textarea, [contenteditable=\"true\"], [role=\"button\"]';\nconst MULTI_GRID_SELECTOR = '[role=\"grid\"][aria-multiselectable=\"true\"]';\n\nfunction nextTile(\n item: HTMLElement,\n rows: HTMLElement[],\n key: string,\n): HTMLElement | undefined {\n const current = item.getBoundingClientRect();\n const centerX = current.left + current.width / 2;\n const candidates = rows\n .filter((row) => row !== item)\n .map((row) => {\n const rect = row.getBoundingClientRect();\n return { row, x: rect.left + rect.width / 2, y: rect.top };\n });\n const sameLine = (y: number) => Math.abs(y - current.top) < 1;\n const directed = candidates.filter(({ x, y }) =>\n key === 'ArrowLeft'\n ? sameLine(y) && x < centerX\n : key === 'ArrowRight'\n ? sameLine(y) && x > centerX\n : key === 'ArrowUp'\n ? y < current.top - 1\n : y > current.top + 1,\n );\n directed.sort((a, b) => {\n if (key === 'ArrowLeft') return b.x - a.x;\n if (key === 'ArrowRight') return a.x - b.x;\n const vertical = Math.abs(a.y - current.top) - Math.abs(b.y - current.top);\n return vertical || Math.abs(a.x - centerX) - Math.abs(b.x - centerX);\n });\n return directed[0]?.row;\n}\n\nfunction actionItem(root: HTMLElement, event: Event) {\n const target = event.target;\n if (!(target instanceof Element)) return null;\n const item = target.closest<HTMLElement>(ITEM_SELECTOR);\n if (!item || !root.contains(item) || item.dataset.disabled === 'true')\n return null;\n // Composed events expose native controls inside a custom element's shadow\n // root even though event.target is retargeted to its host here.\n for (const node of event.composedPath()) {\n if (node === item) break;\n if (node instanceof Element && node.matches(NESTED_CONTROL_SELECTOR))\n return null;\n }\n return item;\n}\n\n/** True when a card action originated on the card rather than a nested control. */\nexport function isContentItemActivation(\n event: Event,\n item: HTMLElement,\n): boolean {\n return actionItem(item, event) === item;\n}\n\n/**\n * Give interactive ContentItems native-like Enter/Space activation with one\n * delegated listener pair. Space activates on release and is cancelled if\n * focus moves; the item's own `data-action` still goes through the app's\n * ordinary delegated click handler. Returns a disposer.\n */\nexport function wireContentItems(root: HTMLElement): () => void {\n let pendingSpace: HTMLElement | null = null;\n\n const clearSpace = () => {\n pendingSpace?.removeAttribute('data-kui-pressed');\n pendingSpace = null;\n };\n\n const keydown = (event: KeyboardEvent) => {\n if (\n event.defaultPrevented ||\n event.altKey ||\n event.ctrlKey ||\n event.metaKey\n )\n return;\n const item = actionItem(root, event);\n if (!item) return;\n if (\n item.dataset.selectionMode === 'multiple' &&\n [\n 'ArrowDown',\n 'ArrowUp',\n 'ArrowLeft',\n 'ArrowRight',\n 'Home',\n 'End',\n ].includes(event.key)\n ) {\n const grid = item.closest(MULTI_GRID_SELECTOR);\n if (!grid) return;\n const rows = Array.from(\n grid.querySelectorAll<HTMLElement>(\n `${ITEM_SELECTOR}[data-selection-mode=\"multiple\"]:not([data-disabled=\"true\"])`,\n ),\n ).filter((row) => row.closest(MULTI_GRID_SELECTOR) === grid);\n const index = rows.indexOf(item);\n if (index < 0) return;\n const isTileGrid = grid.getAttribute('data-component') === 'grid';\n const next =\n event.key === 'Home'\n ? rows[0]\n : event.key === 'End'\n ? rows[rows.length - 1]\n : isTileGrid\n ? nextTile(item, rows, event.key)\n : event.key === 'ArrowDown' || event.key === 'ArrowUp'\n ? rows[index + (event.key === 'ArrowDown' ? 1 : -1)]\n : undefined;\n if (next) {\n event.preventDefault();\n next.focus();\n }\n return;\n }\n if (event.key === 'Enter') {\n event.preventDefault();\n item.click();\n return;\n }\n if (event.key === ' ' || event.key === 'Spacebar') {\n event.preventDefault();\n if (event.repeat) return;\n clearSpace();\n pendingSpace = item;\n item.setAttribute('data-kui-pressed', 'true');\n }\n };\n\n const keyup = (event: KeyboardEvent) => {\n if (event.key !== ' ' && event.key !== 'Spacebar') return;\n const item = pendingSpace;\n if (!item) return;\n event.preventDefault();\n clearSpace();\n if (\n item === actionItem(root, event) &&\n item.ownerDocument.activeElement === item\n )\n item.click();\n };\n\n const focusout = (event: FocusEvent) => {\n if (event.target === pendingSpace) clearSpace();\n };\n\n root.addEventListener('keydown', keydown);\n root.addEventListener('keyup', keyup);\n root.addEventListener('focusout', focusout);\n return () => {\n clearSpace();\n root.removeEventListener('keydown', keydown);\n root.removeEventListener('keyup', keyup);\n root.removeEventListener('focusout', focusout);\n };\n}\n"]}
1
+ {"version":3,"sources":["../src/components/surfaces/content-item/wiring/wire-content-items.ts"],"names":[],"mappings":"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","file":"wire-content-items.js","sourcesContent":["const ITEM_SELECTOR =\n '[data-component=\"content-item\"][data-interactive=\"true\"]';\nconst NESTED_CONTROL_SELECTOR =\n 'button, a[href], input, select, textarea, [contenteditable=\"true\"], [role=\"button\"]';\nconst MULTI_GRID_SELECTOR = '[role=\"grid\"][aria-multiselectable=\"true\"]';\n\nfunction nextTile(\n item: HTMLElement,\n rows: HTMLElement[],\n key: string,\n): HTMLElement | undefined {\n const current = item.getBoundingClientRect();\n const centerX = current.left + current.width / 2;\n const candidates = rows\n .filter((row) => row !== item)\n .map((row) => {\n const rect = row.getBoundingClientRect();\n return { row, x: rect.left + rect.width / 2, y: rect.top };\n });\n const sameLine = (y: number) => Math.abs(y - current.top) < 1;\n const directed = candidates.filter(({ x, y }) => {\n switch (key) {\n case 'ArrowLeft':\n return sameLine(y) && x < centerX;\n case 'ArrowRight':\n return sameLine(y) && x > centerX;\n case 'ArrowUp':\n return y < current.top - 1;\n default:\n return y > current.top + 1;\n }\n });\n directed.sort((a, b) => {\n if (key === 'ArrowLeft') return b.x - a.x;\n if (key === 'ArrowRight') return a.x - b.x;\n const vertical = Math.abs(a.y - current.top) - Math.abs(b.y - current.top);\n return vertical || Math.abs(a.x - centerX) - Math.abs(b.x - centerX);\n });\n return directed[0]?.row;\n}\n\nfunction actionItem(root: HTMLElement, event: Event) {\n const target = event.target;\n if (!(target instanceof Element)) return null;\n const item = target.closest<HTMLElement>(ITEM_SELECTOR);\n if (!item || !root.contains(item) || item.dataset.disabled === 'true')\n return null;\n // Composed events expose native controls inside a custom element's shadow\n // root even though event.target is retargeted to its host here.\n for (const node of event.composedPath()) {\n if (node === item) break;\n if (node instanceof Element && node.matches(NESTED_CONTROL_SELECTOR))\n return null;\n }\n return item;\n}\n\n/** True when a card action originated on the card rather than a nested control. */\nexport function isContentItemActivation(\n event: Event,\n item: HTMLElement,\n): boolean {\n return actionItem(item, event) === item;\n}\n\n/**\n * Give interactive ContentItems native-like Enter/Space activation with one\n * delegated listener pair. Space activates on release and is cancelled if\n * focus moves; the item's own `data-action` still goes through the app's\n * ordinary delegated click handler. Returns a disposer.\n */\nexport function wireContentItems(root: HTMLElement): () => void {\n let pendingSpace: HTMLElement | null = null;\n\n const clearSpace = () => {\n pendingSpace?.removeAttribute('data-kui-pressed');\n pendingSpace = null;\n };\n\n const keydown = (event: KeyboardEvent) => {\n if (\n event.defaultPrevented ||\n event.altKey ||\n event.ctrlKey ||\n event.metaKey\n )\n return;\n const item = actionItem(root, event);\n if (!item) return;\n if (\n item.dataset.selectionMode === 'multiple' &&\n [\n 'ArrowDown',\n 'ArrowUp',\n 'ArrowLeft',\n 'ArrowRight',\n 'Home',\n 'End',\n ].includes(event.key)\n ) {\n const grid = item.closest(MULTI_GRID_SELECTOR);\n if (!grid) return;\n const rows = Array.from(\n grid.querySelectorAll<HTMLElement>(\n `${ITEM_SELECTOR}[data-selection-mode=\"multiple\"]:not([data-disabled=\"true\"])`,\n ),\n ).filter((row) => row.closest(MULTI_GRID_SELECTOR) === grid);\n const index = rows.indexOf(item);\n if (index < 0) return;\n const isTileGrid = grid.getAttribute('data-component') === 'grid';\n let next: HTMLElement | undefined;\n switch (event.key) {\n case 'Home':\n next = rows[0];\n break;\n case 'End':\n next = rows[rows.length - 1];\n break;\n case 'ArrowDown':\n case 'ArrowUp':\n next = isTileGrid\n ? nextTile(item, rows, event.key)\n : rows[index + (event.key === 'ArrowDown' ? 1 : -1)];\n break;\n case 'ArrowLeft':\n case 'ArrowRight':\n next = isTileGrid ? nextTile(item, rows, event.key) : undefined;\n break;\n }\n if (next) {\n event.preventDefault();\n next.focus();\n }\n return;\n }\n if (event.key === 'Enter') {\n event.preventDefault();\n item.click();\n return;\n }\n if (event.key === ' ' || event.key === 'Spacebar') {\n event.preventDefault();\n if (event.repeat) return;\n clearSpace();\n pendingSpace = item;\n item.setAttribute('data-kui-pressed', 'true');\n }\n };\n\n const keyup = (event: KeyboardEvent) => {\n if (event.key !== ' ' && event.key !== 'Spacebar') return;\n const item = pendingSpace;\n if (!item) return;\n event.preventDefault();\n clearSpace();\n if (\n item === actionItem(root, event) &&\n item.ownerDocument.activeElement === item\n )\n item.click();\n };\n\n const focusout = (event: FocusEvent) => {\n if (event.target === pendingSpace) clearSpace();\n };\n\n root.addEventListener('keydown', keydown);\n root.addEventListener('keyup', keyup);\n root.addEventListener('focusout', focusout);\n return () => {\n clearSpace();\n root.removeEventListener('keydown', keydown);\n root.removeEventListener('keyup', keyup);\n root.removeEventListener('focusout', focusout);\n };\n}\n"]}
package/docs/component-contract.md CHANGED
@@ -671,6 +671,13 @@ value rather than running under it. A short label keeps its width beside a
671
671
  long value, which wraps; when both are long they split the row, so neither is
672
672
  starved.
673
673
 
674
+ `ValueTable` defaults to the shared lowered surface and uses the normal text
675
+ color for normal-weight labels, including when nested in a
676
+ sunken `Pane`. Set `--kui-value-table-background` on an application-owned
677
+ ancestor to change that surface for its tables; the table reads the inherited
678
+ token and falls back to the lowered surface when it is absent. The application
679
+ is responsible for checking text contrast when it supplies a custom background.
680
+
674
681
  ## Imports and side effects
675
682
 
676
683
  Every component has an explicit JS and CSS subpath. In CSS-aware browser builds,
package/docs/design/templates/value-table/details-dark.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 460 220" width="460" height="220"><defs><clipPath id="cp0"><rect x="28" y="20" width="404" height="165.2"/></clipPath><clipPath id="ov1"><rect x="29" y="21" width="402" height="163.2" rx="11"/></clipPath><clipPath id="cp2"><rect x="37" y="32.4" width="46.5" height="18"/></clipPath><clipPath id="ct3"><rect x="37" y="32.4" width="46.5" height="18"/></clipPath><clipPath id="ct4"><rect x="241.7" y="32.4" width="181.3" height="18"/></clipPath><clipPath id="cp5"><rect x="37" y="70" width="24" height="24.2"/></clipPath><clipPath id="cp7"><rect x="69" y="73.2" width="90.6" height="18"/></clipPath><clipPath id="ct8"><rect x="69" y="73.2" width="90.6" height="18"/></clipPath><clipPath id="ct9"><rect x="253.1" y="73.2" width="169.9" height="18"/></clipPath><clipPath id="cp10"><rect x="37" y="114" width="50" height="18"/></clipPath><clipPath id="ct11"><rect x="37" y="114" width="50" height="18"/></clipPath><clipPath id="ct12"><rect x="222.2" y="114" width="200.8" height="18"/></clipPath><clipPath id="cp13"><rect x="37" y="154.8" width="83.7" height="18"/></clipPath><clipPath id="ct14"><rect x="37" y="154.8" width="83.7" height="18"/></clipPath><clipPath id="ct15"><rect x="230.9" y="154.8" width="192.1" height="18"/></clipPath></defs><g clip-path="url(#cp0)"><rect x="28" y="20" width="404" height="165.2" rx="12" fill="rgba(228,228,255,0.075)"/><rect x="28.5" y="20.5" width="403" height="164" rx="11.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/></g><g clip-path="url(#ov1)"><g clip-path="url(#cp2)"><g clip-path="url(#ct3)"><text x="37" y="47.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(174,174,178)">Status</text></g></g><text x="391.91" y="47.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(245,245,247)">Live</text></g><g clip-path="url(#ov1)"><g clip-path="url(#cp5)"><g color="rgb(174, 174, 178)"><clipPath id="svgic6"><rect x="37" y="70.2" width="24" height="24"/></clipPath><g clip-path="url(#svgic6)"><g transform="translate(37 70.188)"><path d="M12 15v5s3-.6 4-2c1-1.6 0-5 0-5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M4.5 16.5c-1.5 1.3-2 5-2 5s3.7-.5 5-2c.7-.8.7-2.1 0-3a2 2 0 0 0-3 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12a22 22 0 0 1 2-4 13 13 0 0 1 11-6c0 2.7-.8 7.5-6 11a22 22 0 0 1-4 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12H4s.5-3 2-4c1.6-1 5 0 5 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><g clip-path="url(#cp7)"><g clip-path="url(#ct8)"><text x="69" y="88.19" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(174,174,178)">Environment</text></g></g><text x="338.63" y="88.19" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(245,245,247)">Production</text><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::before" data-domotion-pseudo-owner="source-fragments"><g><line x1="69" y1="62.5" x2="423" y2="62.5" stroke="rgba(253, 253, 255, 0.196)" stroke-width="1"/></g></g></g><g clip-path="url(#ov1)"><g clip-path="url(#cp10)"><g clip-path="url(#ct11)"><text x="37" y="128.98" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(174,174,178)">Region</text></g></g><text x="349.39" y="128.98" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(245,245,247)">us-east-1</text><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::before" data-domotion-pseudo-owner="source-fragments"><g><line x1="37" y1="103.5" x2="423" y2="103.5" stroke="rgba(253, 253, 255, 0.196)" stroke-width="1"/></g></g></g><g clip-path="url(#ov1)"><g clip-path="url(#cp13)"><g clip-path="url(#ct14)"><text x="37" y="169.78" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(174,174,178)">Last deploy</text></g></g><text x="333.14" y="169.78" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(245,245,247)">2 hours ago</text><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::before" data-domotion-pseudo-owner="source-fragments"><g><line x1="37" y1="143.5" x2="423" y2="143.5" stroke="rgba(253, 253, 255, 0.196)" stroke-width="1"/></g></g></g></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 460 220" width="460" height="220"><defs><clipPath id="cp0"><rect x="28" y="20" width="404" height="165.2"/></clipPath><clipPath id="ov1"><rect x="29" y="21" width="402" height="163.2" rx="11"/></clipPath><clipPath id="cp2"><rect x="37" y="32.4" width="46.5" height="18"/></clipPath><clipPath id="ct3"><rect x="37" y="32.4" width="46.5" height="18"/></clipPath><clipPath id="ct4"><rect x="241.7" y="32.4" width="181.3" height="18"/></clipPath><clipPath id="cp5"><rect x="37" y="70" width="24" height="24.2"/></clipPath><clipPath id="cp7"><rect x="69" y="73.2" width="90.6" height="18"/></clipPath><clipPath id="ct8"><rect x="69" y="73.2" width="90.6" height="18"/></clipPath><clipPath id="ct9"><rect x="253.1" y="73.2" width="169.9" height="18"/></clipPath><clipPath id="cp10"><rect x="37" y="114" width="50" height="18"/></clipPath><clipPath id="ct11"><rect x="37" y="114" width="50" height="18"/></clipPath><clipPath id="ct12"><rect x="222.2" y="114" width="200.8" height="18"/></clipPath><clipPath id="cp13"><rect x="37" y="154.8" width="83.7" height="18"/></clipPath><clipPath id="ct14"><rect x="37" y="154.8" width="83.7" height="18"/></clipPath><clipPath id="ct15"><rect x="230.9" y="154.8" width="192.1" height="18"/></clipPath></defs><g clip-path="url(#cp0)"><rect x="28" y="20" width="404" height="165.2" rx="12" fill="rgba(228,228,255,0.075)"/><rect x="28.5" y="20.5" width="403" height="164" rx="11.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/></g><g clip-path="url(#ov1)"><g clip-path="url(#cp2)"><g clip-path="url(#ct3)"><text x="37" y="47.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Status</text></g></g><text x="391.91" y="47.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(245,245,247)">Live</text></g><g clip-path="url(#ov1)"><g clip-path="url(#cp5)"><g color="rgb(245, 245, 247)"><clipPath id="svgic6"><rect x="37" y="70.2" width="24" height="24"/></clipPath><g clip-path="url(#svgic6)"><g transform="translate(37 70.188)"><path d="M12 15v5s3-.6 4-2c1-1.6 0-5 0-5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M4.5 16.5c-1.5 1.3-2 5-2 5s3.7-.5 5-2c.7-.8.7-2.1 0-3a2 2 0 0 0-3 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12a22 22 0 0 1 2-4 13 13 0 0 1 11-6c0 2.7-.8 7.5-6 11a22 22 0 0 1-4 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12H4s.5-3 2-4c1.6-1 5 0 5 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><g clip-path="url(#cp7)"><g clip-path="url(#ct8)"><text x="69" y="88.19" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Environment</text></g></g><text x="338.63" y="88.19" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(245,245,247)">Production</text><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::before" data-domotion-pseudo-owner="source-fragments"><g><line x1="69" y1="62.5" x2="423" y2="62.5" stroke="rgba(253, 253, 255, 0.196)" stroke-width="1"/></g></g></g><g clip-path="url(#ov1)"><g clip-path="url(#cp10)"><g clip-path="url(#ct11)"><text x="37" y="128.98" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Region</text></g></g><text x="349.39" y="128.98" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(245,245,247)">us-east-1</text><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::before" data-domotion-pseudo-owner="source-fragments"><g><line x1="37" y1="103.5" x2="423" y2="103.5" stroke="rgba(253, 253, 255, 0.196)" stroke-width="1"/></g></g></g><g clip-path="url(#ov1)"><g clip-path="url(#cp13)"><g clip-path="url(#ct14)"><text x="37" y="169.78" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Last deploy</text></g></g><text x="333.14" y="169.78" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(245,245,247)">2 hours ago</text><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::before" data-domotion-pseudo-owner="source-fragments"><g><line x1="37" y1="143.5" x2="423" y2="143.5" stroke="rgba(253, 253, 255, 0.196)" stroke-width="1"/></g></g></g></svg>
package/docs/design/templates/value-table/details.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 460 220" width="460" height="220"><defs><clipPath id="cp0"><rect x="28" y="20" width="404" height="165.2"/></clipPath><clipPath id="ov1"><rect x="29" y="21" width="402" height="163.2" rx="11"/></clipPath><clipPath id="cp2"><rect x="37" y="32.4" width="46.5" height="18"/></clipPath><clipPath id="ct3"><rect x="37" y="32.4" width="46.5" height="18"/></clipPath><clipPath id="ct4"><rect x="241.7" y="32.4" width="181.3" height="18"/></clipPath><clipPath id="cp5"><rect x="37" y="70" width="24" height="24.2"/></clipPath><clipPath id="cp7"><rect x="69" y="73.2" width="90.6" height="18"/></clipPath><clipPath id="ct8"><rect x="69" y="73.2" width="90.6" height="18"/></clipPath><clipPath id="ct9"><rect x="253.1" y="73.2" width="169.9" height="18"/></clipPath><clipPath id="cp10"><rect x="37" y="114" width="50" height="18"/></clipPath><clipPath id="ct11"><rect x="37" y="114" width="50" height="18"/></clipPath><clipPath id="ct12"><rect x="222.2" y="114" width="200.8" height="18"/></clipPath><clipPath id="cp13"><rect x="37" y="154.8" width="83.7" height="18"/></clipPath><clipPath id="ct14"><rect x="37" y="154.8" width="83.7" height="18"/></clipPath><clipPath id="ct15"><rect x="230.9" y="154.8" width="192.1" height="18"/></clipPath></defs><g clip-path="url(#cp0)"><rect x="28" y="20" width="404" height="165.2" rx="12" fill="rgba(0,0,98,0.05)"/><rect x="28.5" y="20.5" width="403" height="164" rx="11.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/></g><g clip-path="url(#ov1)"><g clip-path="url(#cp2)"><g clip-path="url(#ct3)"><text x="37" y="47.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(110,110,115)">Status</text></g></g><text x="391.91" y="47.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(29,29,31)">Live</text></g><g clip-path="url(#ov1)"><g clip-path="url(#cp5)"><g color="rgb(110, 110, 115)"><clipPath id="svgic6"><rect x="37" y="70.2" width="24" height="24"/></clipPath><g clip-path="url(#svgic6)"><g transform="translate(37 70.188)"><path d="M12 15v5s3-.6 4-2c1-1.6 0-5 0-5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M4.5 16.5c-1.5 1.3-2 5-2 5s3.7-.5 5-2c.7-.8.7-2.1 0-3a2 2 0 0 0-3 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12a22 22 0 0 1 2-4 13 13 0 0 1 11-6c0 2.7-.8 7.5-6 11a22 22 0 0 1-4 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12H4s.5-3 2-4c1.6-1 5 0 5 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><g clip-path="url(#cp7)"><g clip-path="url(#ct8)"><text x="69" y="88.19" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(110,110,115)">Environment</text></g></g><text x="338.63" y="88.19" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(29,29,31)">Production</text><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::before" data-domotion-pseudo-owner="source-fragments"><g><line x1="69" y1="62.5" x2="423" y2="62.5" stroke="rgba(0, 0, 28, 0.18)" stroke-width="1"/></g></g></g><g clip-path="url(#ov1)"><g clip-path="url(#cp10)"><g clip-path="url(#ct11)"><text x="37" y="128.98" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(110,110,115)">Region</text></g></g><text x="349.39" y="128.98" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(29,29,31)">us-east-1</text><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::before" data-domotion-pseudo-owner="source-fragments"><g><line x1="37" y1="103.5" x2="423" y2="103.5" stroke="rgba(0, 0, 28, 0.18)" stroke-width="1"/></g></g></g><g clip-path="url(#ov1)"><g clip-path="url(#cp13)"><g clip-path="url(#ct14)"><text x="37" y="169.78" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(110,110,115)">Last deploy</text></g></g><text x="333.14" y="169.78" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(29,29,31)">2 hours ago</text><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::before" data-domotion-pseudo-owner="source-fragments"><g><line x1="37" y1="143.5" x2="423" y2="143.5" stroke="rgba(0, 0, 28, 0.18)" stroke-width="1"/></g></g></g></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 460 220" width="460" height="220"><defs><clipPath id="cp0"><rect x="28" y="20" width="404" height="165.2"/></clipPath><clipPath id="ov1"><rect x="29" y="21" width="402" height="163.2" rx="11"/></clipPath><clipPath id="cp2"><rect x="37" y="32.4" width="46.5" height="18"/></clipPath><clipPath id="ct3"><rect x="37" y="32.4" width="46.5" height="18"/></clipPath><clipPath id="ct4"><rect x="241.7" y="32.4" width="181.3" height="18"/></clipPath><clipPath id="cp5"><rect x="37" y="70" width="24" height="24.2"/></clipPath><clipPath id="cp7"><rect x="69" y="73.2" width="90.6" height="18"/></clipPath><clipPath id="ct8"><rect x="69" y="73.2" width="90.6" height="18"/></clipPath><clipPath id="ct9"><rect x="253.1" y="73.2" width="169.9" height="18"/></clipPath><clipPath id="cp10"><rect x="37" y="114" width="50" height="18"/></clipPath><clipPath id="ct11"><rect x="37" y="114" width="50" height="18"/></clipPath><clipPath id="ct12"><rect x="222.2" y="114" width="200.8" height="18"/></clipPath><clipPath id="cp13"><rect x="37" y="154.8" width="83.7" height="18"/></clipPath><clipPath id="ct14"><rect x="37" y="154.8" width="83.7" height="18"/></clipPath><clipPath id="ct15"><rect x="230.9" y="154.8" width="192.1" height="18"/></clipPath></defs><g clip-path="url(#cp0)"><rect x="28" y="20" width="404" height="165.2" rx="12" fill="rgba(0,0,98,0.05)"/><rect x="28.5" y="20.5" width="403" height="164" rx="11.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/></g><g clip-path="url(#ov1)"><g clip-path="url(#cp2)"><g clip-path="url(#ct3)"><text x="37" y="47.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Status</text></g></g><text x="391.91" y="47.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(29,29,31)">Live</text></g><g clip-path="url(#ov1)"><g clip-path="url(#cp5)"><g color="rgb(29, 29, 31)"><clipPath id="svgic6"><rect x="37" y="70.2" width="24" height="24"/></clipPath><g clip-path="url(#svgic6)"><g transform="translate(37 70.188)"><path d="M12 15v5s3-.6 4-2c1-1.6 0-5 0-5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M4.5 16.5c-1.5 1.3-2 5-2 5s3.7-.5 5-2c.7-.8.7-2.1 0-3a2 2 0 0 0-3 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12a22 22 0 0 1 2-4 13 13 0 0 1 11-6c0 2.7-.8 7.5-6 11a22 22 0 0 1-4 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12H4s.5-3 2-4c1.6-1 5 0 5 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><g clip-path="url(#cp7)"><g clip-path="url(#ct8)"><text x="69" y="88.19" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Environment</text></g></g><text x="338.63" y="88.19" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(29,29,31)">Production</text><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::before" data-domotion-pseudo-owner="source-fragments"><g><line x1="69" y1="62.5" x2="423" y2="62.5" stroke="rgba(0, 0, 28, 0.18)" stroke-width="1"/></g></g></g><g clip-path="url(#ov1)"><g clip-path="url(#cp10)"><g clip-path="url(#ct11)"><text x="37" y="128.98" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Region</text></g></g><text x="349.39" y="128.98" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(29,29,31)">us-east-1</text><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::before" data-domotion-pseudo-owner="source-fragments"><g><line x1="37" y1="103.5" x2="423" y2="103.5" stroke="rgba(0, 0, 28, 0.18)" stroke-width="1"/></g></g></g><g clip-path="url(#ov1)"><g clip-path="url(#cp13)"><g clip-path="url(#ct14)"><text x="37" y="169.78" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Last deploy</text></g></g><text x="333.14" y="169.78" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(29,29,31)">2 hours ago</text><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::before" data-domotion-pseudo-owner="source-fragments"><g><line x1="37" y1="143.5" x2="423" y2="143.5" stroke="rgba(0, 0, 28, 0.18)" stroke-width="1"/></g></g></g></svg>
package/docs/design/templates/value-table-dark.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 492 274" width="492" height="274"><defs><clipPath id="cp0"><rect x="16" y="38" width="460" height="220"/></clipPath><clipPath id="ct1"><rect x="16" y="16" width="460" height="22"/></clipPath><clipPath id="irc2"><rect x="16" y="38" width="460" height="220" rx="0"/></clipPath></defs><rect x="0" y="0" width="492" height="274" rx="0" fill="rgb(28,28,30)"/><text x="16" y="28" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Key/value detail rows</text><g clip-path="url(#cp0)"><g clip-path="url(#irc2)"><clipPath id="svgimg3vclip"><rect x="16" y="38" width="460" height="220"/></clipPath><g clip-path="url(#svgimg3vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg3cp0"><rect x="28" y="20" width="404" height="165.2"/></clipPath><clipPath id="svgimg3ov1"><rect x="29" y="21" width="402" height="163.2" rx="11"/></clipPath><clipPath id="svgimg3cp2"><rect x="37" y="32.4" width="46.5" height="18"/></clipPath><clipPath id="svgimg3ct3"><rect x="37" y="32.4" width="46.5" height="18"/></clipPath><clipPath id="svgimg3ct4"><rect x="241.7" y="32.4" width="181.3" height="18"/></clipPath><clipPath id="svgimg3cp5"><rect x="37" y="70" width="24" height="24.2"/></clipPath><clipPath id="svgimg3cp7"><rect x="69" y="73.2" width="90.6" height="18"/></clipPath><clipPath id="svgimg3ct8"><rect x="69" y="73.2" width="90.6" height="18"/></clipPath><clipPath id="svgimg3ct9"><rect x="253.1" y="73.2" width="169.9" height="18"/></clipPath><clipPath id="svgimg3cp10"><rect x="37" y="114" width="50" height="18"/></clipPath><clipPath id="svgimg3ct11"><rect x="37" y="114" width="50" height="18"/></clipPath><clipPath id="svgimg3ct12"><rect x="222.2" y="114" width="200.8" height="18"/></clipPath><clipPath id="svgimg3cp13"><rect x="37" y="154.8" width="83.7" height="18"/></clipPath><clipPath id="svgimg3ct14"><rect x="37" y="154.8" width="83.7" height="18"/></clipPath><clipPath id="svgimg3ct15"><rect x="230.9" y="154.8" width="192.1" height="18"/></clipPath></defs><g clip-path="url(#svgimg3cp0)"><rect x="28" y="20" width="404" height="165.2" rx="12" fill="rgba(228,228,255,0.075)"/><rect x="28.5" y="20.5" width="403" height="164" rx="11.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/></g><g clip-path="url(#svgimg3ov1)"><g clip-path="url(#svgimg3cp2)"><g clip-path="url(#svgimg3ct3)"><text x="37" y="47.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(174,174,178)">Status</text></g></g><text x="391.91" y="47.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(245,245,247)">Live</text></g><g clip-path="url(#svgimg3ov1)"><g clip-path="url(#svgimg3cp5)"><g color="rgb(174, 174, 178)"><clipPath id="svgimg3svgic6"><rect x="37" y="70.2" width="24" height="24"/></clipPath><g clip-path="url(#svgimg3svgic6)"><g transform="translate(37 70.188)"><path d="M12 15v5s3-.6 4-2c1-1.6 0-5 0-5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M4.5 16.5c-1.5 1.3-2 5-2 5s3.7-.5 5-2c.7-.8.7-2.1 0-3a2 2 0 0 0-3 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12a22 22 0 0 1 2-4 13 13 0 0 1 11-6c0 2.7-.8 7.5-6 11a22 22 0 0 1-4 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12H4s.5-3 2-4c1.6-1 5 0 5 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><g clip-path="url(#svgimg3cp7)"><g clip-path="url(#svgimg3ct8)"><text x="69" y="88.19" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(174,174,178)">Environment</text></g></g><text x="338.63" y="88.19" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(245,245,247)">Production</text><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::before" data-domotion-pseudo-owner="source-fragments"><g><line x1="69" y1="62.5" x2="423" y2="62.5" stroke="rgba(253, 253, 255, 0.196)" stroke-width="1"/></g></g></g><g clip-path="url(#svgimg3ov1)"><g clip-path="url(#svgimg3cp10)"><g clip-path="url(#svgimg3ct11)"><text x="37" y="128.98" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(174,174,178)">Region</text></g></g><text x="349.39" y="128.98" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(245,245,247)">us-east-1</text><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::before" data-domotion-pseudo-owner="source-fragments"><g><line x1="37" y1="103.5" x2="423" y2="103.5" stroke="rgba(253, 253, 255, 0.196)" stroke-width="1"/></g></g></g><g clip-path="url(#svgimg3ov1)"><g clip-path="url(#svgimg3cp13)"><g clip-path="url(#svgimg3ct14)"><text x="37" y="169.78" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(174,174,178)">Last deploy</text></g></g><text x="333.14" y="169.78" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(245,245,247)">2 hours ago</text><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::before" data-domotion-pseudo-owner="source-fragments"><g><line x1="37" y1="143.5" x2="423" y2="143.5" stroke="rgba(253, 253, 255, 0.196)" stroke-width="1"/></g></g></g></g></g></g></g></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 492 274" width="492" height="274"><defs><clipPath id="cp0"><rect x="16" y="38" width="460" height="220"/></clipPath><clipPath id="ct1"><rect x="16" y="16" width="460" height="22"/></clipPath><clipPath id="irc2"><rect x="16" y="38" width="460" height="220" rx="0"/></clipPath></defs><rect x="0" y="0" width="492" height="274" rx="0" fill="rgb(28,28,30)"/><text x="16" y="28" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Key/value detail rows</text><g clip-path="url(#cp0)"><g clip-path="url(#irc2)"><clipPath id="svgimg3vclip"><rect x="16" y="38" width="460" height="220"/></clipPath><g clip-path="url(#svgimg3vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg3cp0"><rect x="28" y="20" width="404" height="165.2"/></clipPath><clipPath id="svgimg3ov1"><rect x="29" y="21" width="402" height="163.2" rx="11"/></clipPath><clipPath id="svgimg3cp2"><rect x="37" y="32.4" width="46.5" height="18"/></clipPath><clipPath id="svgimg3ct3"><rect x="37" y="32.4" width="46.5" height="18"/></clipPath><clipPath id="svgimg3ct4"><rect x="241.7" y="32.4" width="181.3" height="18"/></clipPath><clipPath id="svgimg3cp5"><rect x="37" y="70" width="24" height="24.2"/></clipPath><clipPath id="svgimg3cp7"><rect x="69" y="73.2" width="90.6" height="18"/></clipPath><clipPath id="svgimg3ct8"><rect x="69" y="73.2" width="90.6" height="18"/></clipPath><clipPath id="svgimg3ct9"><rect x="253.1" y="73.2" width="169.9" height="18"/></clipPath><clipPath id="svgimg3cp10"><rect x="37" y="114" width="50" height="18"/></clipPath><clipPath id="svgimg3ct11"><rect x="37" y="114" width="50" height="18"/></clipPath><clipPath id="svgimg3ct12"><rect x="222.2" y="114" width="200.8" height="18"/></clipPath><clipPath id="svgimg3cp13"><rect x="37" y="154.8" width="83.7" height="18"/></clipPath><clipPath id="svgimg3ct14"><rect x="37" y="154.8" width="83.7" height="18"/></clipPath><clipPath id="svgimg3ct15"><rect x="230.9" y="154.8" width="192.1" height="18"/></clipPath></defs><g clip-path="url(#svgimg3cp0)"><rect x="28" y="20" width="404" height="165.2" rx="12" fill="rgba(228,228,255,0.075)"/><rect x="28.5" y="20.5" width="403" height="164" rx="11.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/></g><g clip-path="url(#svgimg3ov1)"><g clip-path="url(#svgimg3cp2)"><g clip-path="url(#svgimg3ct3)"><text x="37" y="47.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Status</text></g></g><text x="391.91" y="47.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(245,245,247)">Live</text></g><g clip-path="url(#svgimg3ov1)"><g clip-path="url(#svgimg3cp5)"><g color="rgb(245, 245, 247)"><clipPath id="svgimg3svgic6"><rect x="37" y="70.2" width="24" height="24"/></clipPath><g clip-path="url(#svgimg3svgic6)"><g transform="translate(37 70.188)"><path d="M12 15v5s3-.6 4-2c1-1.6 0-5 0-5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M4.5 16.5c-1.5 1.3-2 5-2 5s3.7-.5 5-2c.7-.8.7-2.1 0-3a2 2 0 0 0-3 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12a22 22 0 0 1 2-4 13 13 0 0 1 11-6c0 2.7-.8 7.5-6 11a22 22 0 0 1-4 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12H4s.5-3 2-4c1.6-1 5 0 5 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><g clip-path="url(#svgimg3cp7)"><g clip-path="url(#svgimg3ct8)"><text x="69" y="88.19" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Environment</text></g></g><text x="338.63" y="88.19" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(245,245,247)">Production</text><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::before" data-domotion-pseudo-owner="source-fragments"><g><line x1="69" y1="62.5" x2="423" y2="62.5" stroke="rgba(253, 253, 255, 0.196)" stroke-width="1"/></g></g></g><g clip-path="url(#svgimg3ov1)"><g clip-path="url(#svgimg3cp10)"><g clip-path="url(#svgimg3ct11)"><text x="37" y="128.98" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Region</text></g></g><text x="349.39" y="128.98" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(245,245,247)">us-east-1</text><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::before" data-domotion-pseudo-owner="source-fragments"><g><line x1="37" y1="103.5" x2="423" y2="103.5" stroke="rgba(253, 253, 255, 0.196)" stroke-width="1"/></g></g></g><g clip-path="url(#svgimg3ov1)"><g clip-path="url(#svgimg3cp13)"><g clip-path="url(#svgimg3ct14)"><text x="37" y="169.78" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Last deploy</text></g></g><text x="333.14" y="169.78" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(245,245,247)">2 hours ago</text><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::before" data-domotion-pseudo-owner="source-fragments"><g><line x1="37" y1="143.5" x2="423" y2="143.5" stroke="rgba(253, 253, 255, 0.196)" stroke-width="1"/></g></g></g></g></g></g></g></svg>
package/docs/design/templates/value-table.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 492 274" width="492" height="274"><defs><clipPath id="cp0"><rect x="16" y="38" width="460" height="220"/></clipPath><clipPath id="ct1"><rect x="16" y="16" width="460" height="22"/></clipPath><clipPath id="irc2"><rect x="16" y="38" width="460" height="220" rx="0"/></clipPath></defs><rect x="0" y="0" width="492" height="274" rx="0" fill="rgb(255,255,255)"/><text x="16" y="28" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Key/value detail rows</text><g clip-path="url(#cp0)"><g clip-path="url(#irc2)"><clipPath id="svgimg3vclip"><rect x="16" y="38" width="460" height="220"/></clipPath><g clip-path="url(#svgimg3vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg3cp0"><rect x="28" y="20" width="404" height="165.2"/></clipPath><clipPath id="svgimg3ov1"><rect x="29" y="21" width="402" height="163.2" rx="11"/></clipPath><clipPath id="svgimg3cp2"><rect x="37" y="32.4" width="46.5" height="18"/></clipPath><clipPath id="svgimg3ct3"><rect x="37" y="32.4" width="46.5" height="18"/></clipPath><clipPath id="svgimg3ct4"><rect x="241.7" y="32.4" width="181.3" height="18"/></clipPath><clipPath id="svgimg3cp5"><rect x="37" y="70" width="24" height="24.2"/></clipPath><clipPath id="svgimg3cp7"><rect x="69" y="73.2" width="90.6" height="18"/></clipPath><clipPath id="svgimg3ct8"><rect x="69" y="73.2" width="90.6" height="18"/></clipPath><clipPath id="svgimg3ct9"><rect x="253.1" y="73.2" width="169.9" height="18"/></clipPath><clipPath id="svgimg3cp10"><rect x="37" y="114" width="50" height="18"/></clipPath><clipPath id="svgimg3ct11"><rect x="37" y="114" width="50" height="18"/></clipPath><clipPath id="svgimg3ct12"><rect x="222.2" y="114" width="200.8" height="18"/></clipPath><clipPath id="svgimg3cp13"><rect x="37" y="154.8" width="83.7" height="18"/></clipPath><clipPath id="svgimg3ct14"><rect x="37" y="154.8" width="83.7" height="18"/></clipPath><clipPath id="svgimg3ct15"><rect x="230.9" y="154.8" width="192.1" height="18"/></clipPath></defs><g clip-path="url(#svgimg3cp0)"><rect x="28" y="20" width="404" height="165.2" rx="12" fill="rgba(0,0,98,0.05)"/><rect x="28.5" y="20.5" width="403" height="164" rx="11.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/></g><g clip-path="url(#svgimg3ov1)"><g clip-path="url(#svgimg3cp2)"><g clip-path="url(#svgimg3ct3)"><text x="37" y="47.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(110,110,115)">Status</text></g></g><text x="391.91" y="47.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(29,29,31)">Live</text></g><g clip-path="url(#svgimg3ov1)"><g clip-path="url(#svgimg3cp5)"><g color="rgb(110, 110, 115)"><clipPath id="svgimg3svgic6"><rect x="37" y="70.2" width="24" height="24"/></clipPath><g clip-path="url(#svgimg3svgic6)"><g transform="translate(37 70.188)"><path d="M12 15v5s3-.6 4-2c1-1.6 0-5 0-5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M4.5 16.5c-1.5 1.3-2 5-2 5s3.7-.5 5-2c.7-.8.7-2.1 0-3a2 2 0 0 0-3 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12a22 22 0 0 1 2-4 13 13 0 0 1 11-6c0 2.7-.8 7.5-6 11a22 22 0 0 1-4 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12H4s.5-3 2-4c1.6-1 5 0 5 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><g clip-path="url(#svgimg3cp7)"><g clip-path="url(#svgimg3ct8)"><text x="69" y="88.19" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(110,110,115)">Environment</text></g></g><text x="338.63" y="88.19" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(29,29,31)">Production</text><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::before" data-domotion-pseudo-owner="source-fragments"><g><line x1="69" y1="62.5" x2="423" y2="62.5" stroke="rgba(0, 0, 28, 0.18)" stroke-width="1"/></g></g></g><g clip-path="url(#svgimg3ov1)"><g clip-path="url(#svgimg3cp10)"><g clip-path="url(#svgimg3ct11)"><text x="37" y="128.98" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(110,110,115)">Region</text></g></g><text x="349.39" y="128.98" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(29,29,31)">us-east-1</text><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::before" data-domotion-pseudo-owner="source-fragments"><g><line x1="37" y1="103.5" x2="423" y2="103.5" stroke="rgba(0, 0, 28, 0.18)" stroke-width="1"/></g></g></g><g clip-path="url(#svgimg3ov1)"><g clip-path="url(#svgimg3cp13)"><g clip-path="url(#svgimg3ct14)"><text x="37" y="169.78" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(110,110,115)">Last deploy</text></g></g><text x="333.14" y="169.78" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(29,29,31)">2 hours ago</text><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::before" data-domotion-pseudo-owner="source-fragments"><g><line x1="37" y1="143.5" x2="423" y2="143.5" stroke="rgba(0, 0, 28, 0.18)" stroke-width="1"/></g></g></g></g></g></g></g></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 492 274" width="492" height="274"><defs><clipPath id="cp0"><rect x="16" y="38" width="460" height="220"/></clipPath><clipPath id="ct1"><rect x="16" y="16" width="460" height="22"/></clipPath><clipPath id="irc2"><rect x="16" y="38" width="460" height="220" rx="0"/></clipPath></defs><rect x="0" y="0" width="492" height="274" rx="0" fill="rgb(255,255,255)"/><text x="16" y="28" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Key/value detail rows</text><g clip-path="url(#cp0)"><g clip-path="url(#irc2)"><clipPath id="svgimg3vclip"><rect x="16" y="38" width="460" height="220"/></clipPath><g clip-path="url(#svgimg3vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg3cp0"><rect x="28" y="20" width="404" height="165.2"/></clipPath><clipPath id="svgimg3ov1"><rect x="29" y="21" width="402" height="163.2" rx="11"/></clipPath><clipPath id="svgimg3cp2"><rect x="37" y="32.4" width="46.5" height="18"/></clipPath><clipPath id="svgimg3ct3"><rect x="37" y="32.4" width="46.5" height="18"/></clipPath><clipPath id="svgimg3ct4"><rect x="241.7" y="32.4" width="181.3" height="18"/></clipPath><clipPath id="svgimg3cp5"><rect x="37" y="70" width="24" height="24.2"/></clipPath><clipPath id="svgimg3cp7"><rect x="69" y="73.2" width="90.6" height="18"/></clipPath><clipPath id="svgimg3ct8"><rect x="69" y="73.2" width="90.6" height="18"/></clipPath><clipPath id="svgimg3ct9"><rect x="253.1" y="73.2" width="169.9" height="18"/></clipPath><clipPath id="svgimg3cp10"><rect x="37" y="114" width="50" height="18"/></clipPath><clipPath id="svgimg3ct11"><rect x="37" y="114" width="50" height="18"/></clipPath><clipPath id="svgimg3ct12"><rect x="222.2" y="114" width="200.8" height="18"/></clipPath><clipPath id="svgimg3cp13"><rect x="37" y="154.8" width="83.7" height="18"/></clipPath><clipPath id="svgimg3ct14"><rect x="37" y="154.8" width="83.7" height="18"/></clipPath><clipPath id="svgimg3ct15"><rect x="230.9" y="154.8" width="192.1" height="18"/></clipPath></defs><g clip-path="url(#svgimg3cp0)"><rect x="28" y="20" width="404" height="165.2" rx="12" fill="rgba(0,0,98,0.05)"/><rect x="28.5" y="20.5" width="403" height="164" rx="11.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/></g><g clip-path="url(#svgimg3ov1)"><g clip-path="url(#svgimg3cp2)"><g clip-path="url(#svgimg3ct3)"><text x="37" y="47.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Status</text></g></g><text x="391.91" y="47.39" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(29,29,31)">Live</text></g><g clip-path="url(#svgimg3ov1)"><g clip-path="url(#svgimg3cp5)"><g color="rgb(29, 29, 31)"><clipPath id="svgimg3svgic6"><rect x="37" y="70.2" width="24" height="24"/></clipPath><g clip-path="url(#svgimg3svgic6)"><g transform="translate(37 70.188)"><path d="M12 15v5s3-.6 4-2c1-1.6 0-5 0-5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M4.5 16.5c-1.5 1.3-2 5-2 5s3.7-.5 5-2c.7-.8.7-2.1 0-3a2 2 0 0 0-3 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12a22 22 0 0 1 2-4 13 13 0 0 1 11-6c0 2.7-.8 7.5-6 11a22 22 0 0 1-4 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12H4s.5-3 2-4c1.6-1 5 0 5 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><g clip-path="url(#svgimg3cp7)"><g clip-path="url(#svgimg3ct8)"><text x="69" y="88.19" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Environment</text></g></g><text x="338.63" y="88.19" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(29,29,31)">Production</text><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::before" data-domotion-pseudo-owner="source-fragments"><g><line x1="69" y1="62.5" x2="423" y2="62.5" stroke="rgba(0, 0, 28, 0.18)" stroke-width="1"/></g></g></g><g clip-path="url(#svgimg3ov1)"><g clip-path="url(#svgimg3cp10)"><g clip-path="url(#svgimg3ct11)"><text x="37" y="128.98" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Region</text></g></g><text x="349.39" y="128.98" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(29,29,31)">us-east-1</text><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::before" data-domotion-pseudo-owner="source-fragments"><g><line x1="37" y1="103.5" x2="423" y2="103.5" stroke="rgba(0, 0, 28, 0.18)" stroke-width="1"/></g></g></g><g clip-path="url(#svgimg3ov1)"><g clip-path="url(#svgimg3cp13)"><g clip-path="url(#svgimg3ct14)"><text x="37" y="169.78" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Last deploy</text></g></g><text x="333.14" y="169.78" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(29,29,31)">2 hours ago</text><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::before" data-domotion-pseudo-owner="source-fragments"><g><line x1="37" y1="143.5" x2="423" y2="143.5" stroke="rgba(0, 0, 28, 0.18)" stroke-width="1"/></g></g></g></g></g></g></g></svg>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kerfjs/ui",
3
- "version": "5.0.0-beta.85",
3
+ "version": "5.0.0-beta.86",
4
4
  "description": "Accessible, composable UI primitives for kerf applications.",
5
5
  "type": "module",
6
6
  "license": "MIT",
@@ -504,6 +504,7 @@
504
504
  "@typescript-eslint/eslint-plugin": "^8.65.0",
505
505
  "@typescript-eslint/parser": "^8.65.0",
506
506
  "@vitest/coverage-v8": "4.1.11",
507
+ "axe-core": "^4.14.0",
507
508
  "domotion-svg": "^0.30.1",
508
509
  "esbuild": "^0.25.0",
509
510
  "eslint": "^10.8.0",
package/dist/chunk-7TE6XDFI.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/components/surfaces/content-item/content-item.tsx"],"names":[],"mappings":"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","file":"chunk-7TE6XDFI.js","sourcesContent":["import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { filterDataAttributes } from '../../../shared/dom/extension-attributes.js';\nimport type { SemanticTone } from '../../../shared/styles/semantic-tone.js';\n\nexport type { SemanticTone } from '../../../shared/styles/semantic-tone.js';\n\n/** Base surface treatment or semantic status colors. */\nexport type ContentItemAppearance = 'transparent' | 'surface' | SemanticTone;\n\n/** Whether the item's always-reserved 1px border is transparent or visible. */\nexport type ContentItemFrame = 'none' | 'framed';\n\n/** Corner shape: the 12px rounded rectangle or the 22px pill. */\nexport type ContentItemShape = 'rounded' | 'pill';\n/** `single` uses an option; `multiple` uses a grid row; `toggle` uses a pressed button. */\nexport type ContentItemSelectionMode =\n 'none' | 'single' | 'multiple' | 'toggle';\n\nconst contentItemProtectedAttributes = new Set([\n 'data-component',\n 'data-appearance',\n 'data-outlined',\n]);\nconst interactiveProtectedAttributes = new Set([\n 'data-component',\n 'data-appearance',\n 'data-outlined',\n 'data-action',\n 'data-item-id',\n 'data-interactive',\n 'data-selected',\n 'data-disabled',\n 'data-selection-mode',\n 'data-kui-pressed',\n]);\n\ntype ContentItemRootAttributes = Readonly<\n Record<`data-${string}`, string | undefined> & {\n 'data-component'?: never;\n 'data-appearance'?: never;\n 'data-outlined'?: never;\n }\n>;\n\ntype ContentItemInteractiveRootAttributes = Readonly<\n Record<`data-${string}`, string | undefined> & {\n 'data-component'?: never;\n 'data-appearance'?: never;\n 'data-outlined'?: never;\n 'data-action'?: never;\n 'data-item-id'?: never;\n 'data-interactive'?: never;\n 'data-selected'?: never;\n 'data-disabled'?: never;\n 'data-selection-mode'?: never;\n 'data-kui-pressed'?: never;\n }\n>;\n\ninterface ContentItemBaseProps {\n /**\n * Coordinated background, border, and foreground colors. `transparent`\n * preserves the surrounding surface; `surface` paints the base surface;\n * semantic values match StateBanner. Defaults to `transparent`.\n */\n appearance?: ContentItemAppearance;\n /** Item content; a plain string is allowed for bare copy. */\n children?: KerfUiContent | string;\n /**\n * `framed` paints the standard neutral border in the 1px the item always\n * reserves, so framing never changes geometry. Frame only an item that\n * marks a real distinction. Defaults to `none` (transparent border).\n */\n frame?: ContentItemFrame;\n /** Remove block padding and block borders while retaining inline geometry. */\n flush?: boolean;\n /** Corner shape. Defaults to `rounded`. */\n shape?: ContentItemShape;\n /** Native hover tooltip. */\n title?: string;\n /**\n * Names the item as a distinct region (`role=\"region\"`). Omit it for an\n * ordinary item, which stays a non-landmark grouping.\n */\n ariaLabel?: string;\n /**\n * Makes the item a programmatic focus target (`tabindex=\"-1\"`, never a tab\n * stop), for example the preferred initial focus of a NavStack view when\n * combined with `data-nav-focus` in `rootAttributes`.\n */\n focusTarget?: boolean;\n /** Keep the standard focus outline visible, such as for a drop target. */\n outlined?: boolean;\n className?: string;\n /** Native named-slot assignment when composed inside a web component. */\n slot?: string;\n}\n\nexport type ContentItemProps = ContentItemBaseProps &\n (\n | {\n interactive?: false;\n action?: never;\n itemId?: never;\n selectionMode?: never;\n selected?: never;\n disabled?: never;\n /** Opt into keyboard (`0`) or programmatic (`-1`) focus. */\n tabIndex?: 0 | -1;\n /** Existing static `data-*` metadata remains available. */\n rootAttributes?: ContentItemRootAttributes;\n }\n | {\n /** Enable a keyboard reachable card; wire `wireContentItems` once on its containing root. */\n interactive: true;\n /** Delegated action dispatched by pointer, Enter, or Space. */\n action: string;\n itemId?: string;\n selectionMode?: ContentItemSelectionMode;\n selected?: boolean;\n disabled?: boolean;\n tabIndex?: never;\n /** Safe app metadata; interaction attributes are component-owned. */\n rootAttributes?: ContentItemInteractiveRootAttributes;\n }\n );\n\n/**\n * One self-contained `.kui-content` child: an 8px inline margin, a real 1px\n * border (transparent unless `framed`), 8px padding, and a rounded or pill\n * radius. It owns that whole geometry, so wrappers must not add more.\n */\nexport function ContentItem({\n appearance = 'transparent',\n children,\n frame = 'none',\n flush = false,\n shape = 'rounded',\n title,\n ariaLabel,\n focusTarget = false,\n outlined = false,\n tabIndex,\n interactive = false,\n action,\n itemId,\n selectionMode = 'none',\n selected = false,\n disabled = false,\n className = '',\n rootAttributes = {},\n slot,\n}: ContentItemProps) {\n const safeRootAttributes = filterDataAttributes(\n rootAttributes,\n interactive\n ? interactiveProtectedAttributes\n : contentItemProtectedAttributes,\n );\n if (interactive && !action) {\n throw new Error('Interactive ContentItem requires an action');\n }\n if (interactive && selected && selectionMode === 'none') {\n throw new Error('Selected ContentItem requires a selectionMode');\n }\n const cls = [\n 'kui-content-item',\n shape === 'pill' ? 'kui-content-item--pill' : '',\n frame === 'framed' ? 'kui-content-item--framed' : '',\n flush ? 'kui-content-item--flush' : '',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n const interactiveAttributes = interactive\n ? {\n 'data-interactive': 'true',\n 'data-action': disabled ? undefined : action,\n 'data-item-id': itemId,\n 'data-selection-mode': selectionMode,\n 'data-selected':\n selectionMode === 'none' ? undefined : String(selected),\n 'data-disabled': disabled ? 'true' : undefined,\n }\n : {};\n return (\n <div\n {...safeRootAttributes}\n {...interactiveAttributes}\n class={cls}\n title={title}\n data-component=\"content-item\"\n data-appearance={appearance}\n data-outlined={outlined ? 'true' : undefined}\n role={\n interactive\n ? selectionMode === 'single'\n ? 'option'\n : selectionMode === 'multiple'\n ? 'row'\n : 'button'\n : ariaLabel\n ? 'region'\n : undefined\n }\n aria-label={ariaLabel}\n aria-selected={\n interactive &&\n (selectionMode === 'single' || selectionMode === 'multiple')\n ? String(selected)\n : undefined\n }\n aria-pressed={\n interactive && selectionMode === 'toggle' ? String(selected) : undefined\n }\n aria-disabled={interactive && disabled ? 'true' : undefined}\n tabindex={\n interactive\n ? disabled\n ? '-1'\n : '0'\n : (tabIndex ?? (focusTarget ? '-1' : undefined))\n }\n slot={slot}\n >\n {interactive && selectionMode === 'multiple' ? (\n <div role=\"gridcell\">{children}</div>\n ) : (\n children\n )}\n </div>\n );\n}\n"]}