@kerfjs/ui 5.0.0-beta.56 → 5.0.0-beta.58
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 +81 -37
- package/ai/application-ui-diagnostic-ids-v1.json +9 -1
- package/ai/application-ui-profile-sync.cjs +1 -1
- package/ai/application-ui-profile.defaults.json +63 -8
- package/ai/application-ui-profile.mjs +1 -1
- package/ai/component-catalog.json +211 -33
- package/ai/component-catalog.schema.json +2 -0
- package/ai/component-class-owners.cjs +83 -0
- package/ai/component-composition-extension.d.ts +7 -0
- package/ai/component-composition-extension.schema.json +7 -0
- package/ai/{component-catalog-v2-overrides.json → component-composition-rules.json} +2 -1
- package/ai/{component-catalog-v2.d.ts → component-composition.d.ts} +9 -5
- package/ai/{component-catalog-v2.json → component-composition.json} +155 -24
- package/ai/{component-catalog-v2.schema.json → component-composition.schema.json} +21 -5
- package/ai/components/README.md +170 -0
- package/ai/components/application-tabs.md +65 -0
- package/ai/components/badge.md +72 -0
- package/ai/components/collapsible-panel.md +102 -0
- package/ai/components/content-item.md +90 -0
- package/ai/components/disclosure-arrow.md +77 -0
- package/ai/components/document-baseline.md +75 -0
- package/ai/components/empty-state.md +80 -0
- package/ai/components/feedback.md +71 -0
- package/ai/components/floating-toolbar.md +80 -0
- package/ai/components/foundation.md +65 -0
- package/ai/components/grid.md +93 -0
- package/ai/components/headers.md +63 -0
- package/ai/components/layout.md +75 -0
- package/ai/components/list-action-row.md +91 -0
- package/ai/components/list-header.md +89 -0
- package/ai/components/list-inset-control.md +74 -0
- package/ai/components/list-inset-text.md +72 -0
- package/ai/components/list-item.md +88 -0
- package/ai/components/list.md +103 -0
- package/ai/components/loading-spinner.md +72 -0
- package/ai/components/lucide-icon.md +66 -0
- package/ai/components/nav-stack.md +103 -0
- package/ai/components/pane.md +100 -0
- package/ai/components/popup-menu.md +82 -0
- package/ai/components/recipe-app-shell.md +57 -0
- package/ai/components/recipe-collapsible-sidebar.md +57 -0
- package/ai/components/recipe-compact-toolbar.md +57 -0
- package/ai/components/recipe-composer-form.md +57 -0
- package/ai/components/recipe-list-detail-dialog.md +57 -0
- package/ai/components/recipe-list-workspace-states.md +57 -0
- package/ai/components/recipe-loading-inspector.md +57 -0
- package/ai/components/recipe-navigation-sidebar.md +57 -0
- package/ai/components/recipe-navigation-stack.md +57 -0
- package/ai/components/recipe-workspace-header.md +57 -0
- package/ai/components/resize.md +101 -0
- package/ai/components/row.md +96 -0
- package/ai/components/segmented-control.md +82 -0
- package/ai/components/select.md +107 -0
- package/ai/components/skeleton.md +84 -0
- package/ai/components/spacer.md +86 -0
- package/ai/components/split-view.md +102 -0
- package/ai/components/state-banner.md +92 -0
- package/ai/components/sunken-panel.md +79 -0
- package/ai/components/surface-scaffold.md +78 -0
- package/ai/components/tab-bar.md +112 -0
- package/ai/components/tab-scaffold.md +94 -0
- package/ai/components/tabs.md +90 -0
- package/ai/components/text.md +82 -0
- package/ai/components/token-search-field.md +101 -0
- package/ai/components/toolbar-control-group.md +102 -0
- package/ai/components/toolbar-text.md +76 -0
- package/ai/components/toolbar.md +95 -0
- package/ai/components/value-table.md +72 -0
- package/ai/components/wa-accordion-item.md +55 -0
- package/ai/components/wa-accordion.md +65 -0
- package/ai/components/wa-animated-image.md +55 -0
- package/ai/components/wa-animation.md +55 -0
- package/ai/components/wa-avatar.md +55 -0
- package/ai/components/wa-badge.md +55 -0
- package/ai/components/wa-breadcrumb-item.md +53 -0
- package/ai/components/wa-breadcrumb.md +55 -0
- package/ai/components/wa-button-group.md +59 -0
- package/ai/components/wa-button.md +55 -0
- package/ai/components/wa-callout.md +58 -0
- package/ai/components/wa-card.md +59 -0
- package/ai/components/wa-carousel-item.md +53 -0
- package/ai/components/wa-carousel.md +55 -0
- package/ai/components/wa-checkbox-group.md +55 -0
- package/ai/components/wa-checkbox.md +55 -0
- package/ai/components/wa-color-picker.md +55 -0
- package/ai/components/wa-comparison.md +55 -0
- package/ai/components/wa-copy-button.md +55 -0
- package/ai/components/wa-details.md +61 -0
- package/ai/components/wa-dialog.md +59 -0
- package/ai/components/wa-divider.md +53 -0
- package/ai/components/wa-drawer.md +55 -0
- package/ai/components/wa-dropdown-item.md +60 -0
- package/ai/components/wa-dropdown.md +60 -0
- package/ai/components/wa-format-bytes.md +53 -0
- package/ai/components/wa-format-date.md +53 -0
- package/ai/components/wa-format-number.md +53 -0
- package/ai/components/wa-icon.md +58 -0
- package/ai/components/wa-include.md +53 -0
- package/ai/components/wa-input.md +59 -0
- package/ai/components/wa-intersection-observer.md +53 -0
- package/ai/components/wa-known-date.md +53 -0
- package/ai/components/wa-markdown.md +53 -0
- package/ai/components/wa-mutation-observer.md +53 -0
- package/ai/components/wa-number-input.md +55 -0
- package/ai/components/wa-option.md +59 -0
- package/ai/components/wa-otp-input.md +53 -0
- package/ai/components/wa-page.md +53 -0
- package/ai/components/wa-pagination.md +55 -0
- package/ai/components/wa-popover.md +55 -0
- package/ai/components/wa-popup.md +53 -0
- package/ai/components/wa-progress-bar.md +53 -0
- package/ai/components/wa-progress-ring.md +53 -0
- package/ai/components/wa-qr-code.md +53 -0
- package/ai/components/wa-radio-group.md +59 -0
- package/ai/components/wa-radio.md +55 -0
- package/ai/components/wa-random-content.md +53 -0
- package/ai/components/wa-rating.md +55 -0
- package/ai/components/wa-relative-time.md +53 -0
- package/ai/components/wa-resize-observer.md +53 -0
- package/ai/components/wa-scroller.md +53 -0
- package/ai/components/wa-select.md +63 -0
- package/ai/components/wa-skeleton.md +53 -0
- package/ai/components/wa-slider.md +55 -0
- package/ai/components/wa-spinner.md +58 -0
- package/ai/components/wa-split-panel.md +58 -0
- package/ai/components/wa-switch.md +53 -0
- package/ai/components/wa-tab-group.md +69 -0
- package/ai/components/wa-tab-panel.md +60 -0
- package/ai/components/wa-tab.md +59 -0
- package/ai/components/wa-tag.md +59 -0
- package/ai/components/wa-textarea.md +53 -0
- package/ai/components/wa-time-input.md +55 -0
- package/ai/components/wa-toast-item.md +60 -0
- package/ai/components/wa-toast.md +60 -0
- package/ai/components/wa-tooltip.md +55 -0
- package/ai/components/wa-tree-item.md +55 -0
- package/ai/components/wa-tree.md +55 -0
- package/ai/components/wa-zoomable-frame.md +55 -0
- package/ai/components/workbench.md +114 -0
- package/ai/public-api-signatures-v1.md +174 -43
- package/ai/skill.md +100 -48
- package/ai/webawesome-jsx-signatures-v1.md +1 -1
- package/analyzer/component-ownership.d.mts +56 -0
- package/analyzer/component-ownership.mjs +184 -0
- package/analyzer/index.d.mts +3 -0
- package/analyzer/index.mjs +274 -20
- package/analyzer/selectors.d.mts +21 -0
- package/analyzer/selectors.mjs +212 -0
- package/dist/browser/catalog.js +25 -0
- package/dist/browser/collapsible-panel.js +7 -0
- package/dist/browser/nav-stack.js +8 -0
- package/dist/browser/split-view.js +10 -0
- package/dist/browser/tab-scaffold.js +4 -0
- package/dist/browser/workbench.js +10 -0
- package/dist/catalog-resources.d.ts +2 -2
- package/dist/catalog.d.ts +3 -3
- package/dist/catalog.js +8 -7
- package/dist/catalog.js.map +1 -1
- package/dist/{chunk-QQOTQTDD.js → chunk-2CCMJTVY.js} +13 -10
- package/dist/chunk-2CCMJTVY.js.map +1 -0
- package/dist/{chunk-PK4N5QTO.js → chunk-553ASUK6.js} +2 -3
- package/dist/chunk-553ASUK6.js.map +1 -0
- package/dist/{chunk-G33XC2NB.js → chunk-6YFHCLHG.js} +2 -2
- package/dist/chunk-6YFHCLHG.js.map +1 -0
- package/dist/{chunk-ZIYOJFZD.js → chunk-7JUBXOIV.js} +17 -4
- package/dist/chunk-7JUBXOIV.js.map +1 -0
- package/dist/{chunk-T4UZTNZ4.js → chunk-EVYKTVBQ.js} +2 -11
- package/dist/chunk-EVYKTVBQ.js.map +1 -0
- package/dist/{chunk-AK67F6QN.js → chunk-EZVNC4J6.js} +4 -1
- package/dist/chunk-EZVNC4J6.js.map +1 -0
- package/dist/{chunk-MA6Z6EIM.js → chunk-F4QMLOXJ.js} +3 -2
- package/dist/chunk-F4QMLOXJ.js.map +1 -0
- package/dist/chunk-JCV4GXWB.js +249 -0
- package/dist/chunk-JCV4GXWB.js.map +1 -0
- package/dist/chunk-K47P7QZC.js +17 -0
- package/dist/chunk-K47P7QZC.js.map +1 -0
- package/dist/{chunk-MOBRFZH3.js → chunk-OUK6QRDR.js} +2 -12
- package/dist/chunk-OUK6QRDR.js.map +1 -0
- package/dist/{chunk-VNPQDCQZ.js → chunk-QOWG4ZCL.js} +3 -2
- package/dist/chunk-QOWG4ZCL.js.map +1 -0
- package/dist/{chunk-V65EOWNF.js → chunk-QPUPLNNB.js} +20 -8
- package/dist/chunk-QPUPLNNB.js.map +1 -0
- package/dist/{chunk-O3EXIBEZ.js → chunk-W4XKTST6.js} +8 -7
- package/dist/chunk-W4XKTST6.js.map +1 -0
- package/dist/{chunk-K6UNVKDK.js → chunk-XDKAYSVD.js} +3 -1
- package/dist/chunk-XDKAYSVD.js.map +1 -0
- package/dist/collapsible-panel.d.ts +9 -9
- package/dist/collapsible-panel.js +2 -2
- package/dist/collapsible-panel.js.map +1 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.js +11 -9
- package/dist/list-action-row.js +2 -1
- package/dist/list-header.js +1 -1
- package/dist/list-item.js +2 -1
- package/dist/nav-stack.d.ts +13 -1
- package/dist/nav-stack.js +1 -1
- package/dist/pane.d.ts +20 -3
- package/dist/pane.js +1 -1
- package/dist/{panel-toolbar-C8sF-YZC.d.ts → panel-toolbar-DqwtBxQL.d.ts} +13 -13
- package/dist/select.js +1 -1
- package/dist/split-view.d.ts +3 -3
- package/dist/split-view.js +3 -2
- package/dist/split-view.js.map +1 -1
- package/dist/state-banner.js +1 -1
- package/dist/styles/app-tab.css +31 -0
- package/dist/styles/badge.css +19 -11
- package/dist/styles/collapsible-panel.css +13 -9
- package/dist/styles/floating-toolbar.css +25 -6
- package/dist/styles/list-header.css +0 -12
- package/dist/styles/list.css +4 -4
- package/dist/styles/nav-stack.css +46 -19
- package/dist/styles/pane.css +50 -0
- package/dist/styles/popup-menu.css +151 -0
- package/dist/styles/resizable-region.css +22 -10
- package/dist/styles/select.css +28 -14
- package/dist/styles/skeleton.css +30 -3
- package/dist/styles/split-view.css +10 -7
- package/dist/styles/state-banner.css +0 -19
- package/dist/styles/surface-scaffold.css +8 -3
- package/dist/styles/tab-bar.css +79 -28
- package/dist/styles/tab-scaffold.css +25 -1
- package/dist/styles/text.css +16 -0
- package/dist/styles/toolbar-control-group.css +121 -66
- package/dist/styles/toolbar-text.css +21 -0
- package/dist/styles/toolbar.css +8 -32
- package/dist/styles/workbench.css +18 -18
- package/dist/tab-scaffold.d.ts +11 -1
- package/dist/tab-scaffold.js +2 -0
- package/dist/tab-scaffold.js.map +1 -1
- package/dist/toolbar-control-group.d.ts +3 -1
- package/dist/toolbar-control-group.js +1 -1
- package/dist/toolbar-text.d.ts +7 -1
- package/dist/toolbar-text.js +1 -1
- package/dist/toolbar.d.ts +8 -1
- package/dist/toolbar.js +1 -1
- package/dist/{types-DXAGogOS.d.ts → types-BuHELdXR.d.ts} +1 -1
- package/dist/wire-catalog.d.ts +3 -1
- package/dist/wire-catalog.js +2 -0
- package/dist/wire-catalog.js.map +1 -1
- package/dist/wire-scroll-dividers.d.ts +69 -0
- package/dist/wire-scroll-dividers.js +3 -0
- package/dist/wire-scroll-dividers.js.map +1 -0
- package/dist/workbench.d.ts +17 -16
- package/dist/workbench.js +1 -1
- package/docs/app-layouts.md +9 -1
- package/docs/catalog.md +10 -5
- package/docs/collapsible-panel.md +22 -13
- package/docs/component-contract.md +147 -21
- package/docs/component-selection.md +21 -8
- package/docs/design/templates/tab-bar/workspace-tabs-dark.svg +1 -1
- package/docs/design/templates/tab-bar/workspace-tabs.svg +1 -1
- package/docs/design/templates/tab-bar-dark.svg +1 -1
- package/docs/design/templates/tab-bar.svg +1 -1
- package/docs/design-philosophy.md +30 -3
- package/docs/examples/application-ui-profile.json +4 -4
- package/docs/examples/{component-catalog-extension-v2.json → component-composition-extension.json} +3 -3
- package/docs/layout.md +82 -3
- package/docs/nav-stack.md +33 -3
- package/docs/split-view.md +10 -5
- package/docs/tab-scaffold.md +23 -1
- package/docs/type-contracts.md +4 -3
- package/docs/ui-analyzer.md +99 -5
- package/docs/ui-doctor.md +10 -0
- package/docs/workbench.md +31 -20
- package/doctor/index.mjs +6 -1
- package/llms.txt +85 -20
- package/package.json +17 -5
- package/ux-demo/recipes/collapsible-sidebar.tsx +0 -1
- package/ux-demo/recipes/composer-form.tsx +0 -1
- package/ux-demo/recipes/list-detail-dialog.tsx +0 -2
- package/ux-demo/recipes/list-workspace-states.tsx +0 -1
- package/ux-demo/recipes/loading-inspector.tsx +0 -1
- package/ux-demo/recipes/workspace-header.tsx +0 -1
- package/ai/component-catalog-extension-v2.d.ts +0 -7
- package/ai/component-catalog-extension-v2.schema.json +0 -7
- package/dist/chunk-AK67F6QN.js.map +0 -1
- package/dist/chunk-G33XC2NB.js.map +0 -1
- package/dist/chunk-K6UNVKDK.js.map +0 -1
- package/dist/chunk-MA6Z6EIM.js.map +0 -1
- package/dist/chunk-MOBRFZH3.js.map +0 -1
- package/dist/chunk-O3EXIBEZ.js.map +0 -1
- package/dist/chunk-PK4N5QTO.js.map +0 -1
- package/dist/chunk-QQOTQTDD.js.map +0 -1
- package/dist/chunk-T4UZTNZ4.js.map +0 -1
- package/dist/chunk-V65EOWNF.js.map +0 -1
- package/dist/chunk-VNPQDCQZ.js.map +0 -1
- package/dist/chunk-ZIYOJFZD.js.map +0 -1
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
# Pagination
|
|
2
|
+
|
|
3
|
+
<!-- Generated by scripts/sync-component-docs.mjs from ai/component-catalog.json and ai/component-composition.json. Do not edit; run `npm run catalog:sync`. -->
|
|
4
|
+
|
|
5
|
+
`@kerfjs/ui:wa-pagination` · Web Awesome · component · Navigation · recommendation: supported
|
|
6
|
+
|
|
7
|
+
## When to use
|
|
8
|
+
|
|
9
|
+
Experimental page navigation for a bounded result set.
|
|
10
|
+
|
|
11
|
+
**Not when:**
|
|
12
|
+
|
|
13
|
+
- Do not choose it from catalog presence alone; confirm that its semantic and interaction contract matches the product need.
|
|
14
|
+
|
|
15
|
+
## Imports
|
|
16
|
+
|
|
17
|
+
- Theme CSS: import `@kerfjs/ui/webawesome.css` once.
|
|
18
|
+
- Registration: import `@awesome.me/webawesome/dist/components/pagination/pagination.js` once (a side effect).
|
|
19
|
+
- Custom element: `<wa-pagination>`.
|
|
20
|
+
- Declared side effects: custom-element-registration.
|
|
21
|
+
|
|
22
|
+
## Props
|
|
23
|
+
|
|
24
|
+
Typed JSX attributes: [`webawesome-jsx-signatures-v1.md`](../webawesome-jsx-signatures-v1.md) (import `@kerfjs/ui/webawesome` for types only). Use the Web Awesome attribute API; do not reach into its shadow DOM.
|
|
25
|
+
|
|
26
|
+
## Composition
|
|
27
|
+
|
|
28
|
+
- Parents: any.
|
|
29
|
+
- Contexts: `application-ui`.
|
|
30
|
+
- Children: unrestricted.
|
|
31
|
+
- Built from: [Icon](./wa-icon.md).
|
|
32
|
+
|
|
33
|
+
## State and wiring
|
|
34
|
+
|
|
35
|
+
No wiring helper.
|
|
36
|
+
|
|
37
|
+
## Geometry
|
|
38
|
+
|
|
39
|
+
Margin: none · border: child · padding: child (layout role: navigation). `self` means the component already owns it — do not add wrapper padding, margin, or borders around it.
|
|
40
|
+
|
|
41
|
+
## Accessibility
|
|
42
|
+
|
|
43
|
+
No component-specific obligations beyond native semantics and a visible or accessible name for every control.
|
|
44
|
+
|
|
45
|
+
## Styling boundary
|
|
46
|
+
|
|
47
|
+
The component owns its own styles. Configure it through its props and variants; do not override its internals.
|
|
48
|
+
|
|
49
|
+
Theme it only through `@kerfjs/ui/webawesome.css` and cataloged tokens. Do not restyle its shadow DOM or uncataloged `::part()` targets (`KUI-L011`).
|
|
50
|
+
|
|
51
|
+
## Related
|
|
52
|
+
|
|
53
|
+
- Components: [Icon](./wa-icon.md).
|
|
54
|
+
- Docs: [`docs/webawesome-theme.md#coverage`](../../docs/webawesome-theme.md#coverage).
|
|
55
|
+
- UX catalog route: `?component=wa-pagination`.
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
# Popover
|
|
2
|
+
|
|
3
|
+
<!-- Generated by scripts/sync-component-docs.mjs from ai/component-catalog.json and ai/component-composition.json. Do not edit; run `npm run catalog:sync`. -->
|
|
4
|
+
|
|
5
|
+
`@kerfjs/ui:wa-popover` · Web Awesome · component · Helpers · recommendation: supported
|
|
6
|
+
|
|
7
|
+
## When to use
|
|
8
|
+
|
|
9
|
+
Anchored non-modal surface built on popup positioning.
|
|
10
|
+
|
|
11
|
+
**Not when:**
|
|
12
|
+
|
|
13
|
+
- Do not choose it from catalog presence alone; confirm that its semantic and interaction contract matches the product need.
|
|
14
|
+
|
|
15
|
+
## Imports
|
|
16
|
+
|
|
17
|
+
- Theme CSS: import `@kerfjs/ui/webawesome.css` once.
|
|
18
|
+
- Registration: import `@awesome.me/webawesome/dist/components/popover/popover.js` once (a side effect).
|
|
19
|
+
- Custom element: `<wa-popover>`.
|
|
20
|
+
- Declared side effects: custom-element-registration.
|
|
21
|
+
|
|
22
|
+
## Props
|
|
23
|
+
|
|
24
|
+
Typed JSX attributes: [`webawesome-jsx-signatures-v1.md`](../webawesome-jsx-signatures-v1.md) (import `@kerfjs/ui/webawesome` for types only). Use the Web Awesome attribute API; do not reach into its shadow DOM.
|
|
25
|
+
|
|
26
|
+
## Composition
|
|
27
|
+
|
|
28
|
+
- Parents: any.
|
|
29
|
+
- Contexts: `application-ui`.
|
|
30
|
+
- Children: unrestricted.
|
|
31
|
+
- Built from: [Popup](./wa-popup.md).
|
|
32
|
+
|
|
33
|
+
## State and wiring
|
|
34
|
+
|
|
35
|
+
No wiring helper.
|
|
36
|
+
|
|
37
|
+
## Geometry
|
|
38
|
+
|
|
39
|
+
Margin: none · border: self · padding: self (layout role: helpers). `self` means the component already owns it — do not add wrapper padding, margin, or borders around it.
|
|
40
|
+
|
|
41
|
+
## Accessibility
|
|
42
|
+
|
|
43
|
+
No component-specific obligations beyond native semantics and a visible or accessible name for every control.
|
|
44
|
+
|
|
45
|
+
## Styling boundary
|
|
46
|
+
|
|
47
|
+
The component owns its own styles. Configure it through its props and variants; do not override its internals.
|
|
48
|
+
|
|
49
|
+
Theme it only through `@kerfjs/ui/webawesome.css` and cataloged tokens. Do not restyle its shadow DOM or uncataloged `::part()` targets (`KUI-L011`).
|
|
50
|
+
|
|
51
|
+
## Related
|
|
52
|
+
|
|
53
|
+
- Components: [Popup](./wa-popup.md).
|
|
54
|
+
- Docs: [`docs/webawesome-theme.md#coverage`](../../docs/webawesome-theme.md#coverage).
|
|
55
|
+
- UX catalog route: `?component=wa-popover`.
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
# Popup
|
|
2
|
+
|
|
3
|
+
<!-- Generated by scripts/sync-component-docs.mjs from ai/component-catalog.json and ai/component-composition.json. Do not edit; run `npm run catalog:sync`. -->
|
|
4
|
+
|
|
5
|
+
`@kerfjs/ui:wa-popup` · Web Awesome · component · Helpers · recommendation: conditional
|
|
6
|
+
|
|
7
|
+
## When to use
|
|
8
|
+
|
|
9
|
+
Preferred low-level anchored positioning when Tooltip or Popover do not fit.
|
|
10
|
+
|
|
11
|
+
**Not when:**
|
|
12
|
+
|
|
13
|
+
- Do not choose it from catalog presence alone; confirm that its semantic and interaction contract matches the product need.
|
|
14
|
+
|
|
15
|
+
## Imports
|
|
16
|
+
|
|
17
|
+
- Theme CSS: import `@kerfjs/ui/webawesome.css` once.
|
|
18
|
+
- Registration: import `@awesome.me/webawesome/dist/components/popup/popup.js` once (a side effect).
|
|
19
|
+
- Custom element: `<wa-popup>`.
|
|
20
|
+
- Declared side effects: custom-element-registration.
|
|
21
|
+
|
|
22
|
+
## Props
|
|
23
|
+
|
|
24
|
+
Typed JSX attributes: [`webawesome-jsx-signatures-v1.md`](../webawesome-jsx-signatures-v1.md) (import `@kerfjs/ui/webawesome` for types only). Use the Web Awesome attribute API; do not reach into its shadow DOM.
|
|
25
|
+
|
|
26
|
+
## Composition
|
|
27
|
+
|
|
28
|
+
- Parents: any.
|
|
29
|
+
- Contexts: `application-ui`.
|
|
30
|
+
- Children: unrestricted.
|
|
31
|
+
|
|
32
|
+
## State and wiring
|
|
33
|
+
|
|
34
|
+
No wiring helper.
|
|
35
|
+
|
|
36
|
+
## Geometry
|
|
37
|
+
|
|
38
|
+
Margin: none · border: child · padding: child (layout role: helpers). `self` means the component already owns it — do not add wrapper padding, margin, or borders around it.
|
|
39
|
+
|
|
40
|
+
## Accessibility
|
|
41
|
+
|
|
42
|
+
No component-specific obligations beyond native semantics and a visible or accessible name for every control.
|
|
43
|
+
|
|
44
|
+
## Styling boundary
|
|
45
|
+
|
|
46
|
+
The component owns its own styles. Configure it through its props and variants; do not override its internals.
|
|
47
|
+
|
|
48
|
+
Theme it only through `@kerfjs/ui/webawesome.css` and cataloged tokens. Do not restyle its shadow DOM or uncataloged `::part()` targets (`KUI-L011`).
|
|
49
|
+
|
|
50
|
+
## Related
|
|
51
|
+
|
|
52
|
+
- Docs: [`docs/webawesome-theme.md#coverage`](../../docs/webawesome-theme.md#coverage), [`docs/component-selection.md#web-awesome-overlap-policy`](../../docs/component-selection.md#web-awesome-overlap-policy).
|
|
53
|
+
- UX catalog route: `?component=wa-popup`.
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
# Progress Bar
|
|
2
|
+
|
|
3
|
+
<!-- Generated by scripts/sync-component-docs.mjs from ai/component-catalog.json and ai/component-composition.json. Do not edit; run `npm run catalog:sync`. -->
|
|
4
|
+
|
|
5
|
+
`@kerfjs/ui:wa-progress-bar` · Web Awesome · component · Feedback · recommendation: supported
|
|
6
|
+
|
|
7
|
+
## When to use
|
|
8
|
+
|
|
9
|
+
Linear indicator for determinate or indeterminate progress.
|
|
10
|
+
|
|
11
|
+
**Not when:**
|
|
12
|
+
|
|
13
|
+
- Do not choose it from catalog presence alone; confirm that its semantic and interaction contract matches the product need.
|
|
14
|
+
|
|
15
|
+
## Imports
|
|
16
|
+
|
|
17
|
+
- Theme CSS: import `@kerfjs/ui/webawesome.css` once.
|
|
18
|
+
- Registration: import `@awesome.me/webawesome/dist/components/progress-bar/progress-bar.js` once (a side effect).
|
|
19
|
+
- Custom element: `<wa-progress-bar>`.
|
|
20
|
+
- Declared side effects: custom-element-registration.
|
|
21
|
+
|
|
22
|
+
## Props
|
|
23
|
+
|
|
24
|
+
Typed JSX attributes: [`webawesome-jsx-signatures-v1.md`](../webawesome-jsx-signatures-v1.md) (import `@kerfjs/ui/webawesome` for types only). Use the Web Awesome attribute API; do not reach into its shadow DOM.
|
|
25
|
+
|
|
26
|
+
## Composition
|
|
27
|
+
|
|
28
|
+
- Parents: any.
|
|
29
|
+
- Contexts: `application-ui`.
|
|
30
|
+
- Children: unrestricted.
|
|
31
|
+
|
|
32
|
+
## State and wiring
|
|
33
|
+
|
|
34
|
+
No wiring helper.
|
|
35
|
+
|
|
36
|
+
## Geometry
|
|
37
|
+
|
|
38
|
+
Margin: none · border: self · padding: self (layout role: feedback). `self` means the component already owns it — do not add wrapper padding, margin, or borders around it.
|
|
39
|
+
|
|
40
|
+
## Accessibility
|
|
41
|
+
|
|
42
|
+
No component-specific obligations beyond native semantics and a visible or accessible name for every control.
|
|
43
|
+
|
|
44
|
+
## Styling boundary
|
|
45
|
+
|
|
46
|
+
The component owns its own styles. Configure it through its props and variants; do not override its internals.
|
|
47
|
+
|
|
48
|
+
Theme it only through `@kerfjs/ui/webawesome.css` and cataloged tokens. Do not restyle its shadow DOM or uncataloged `::part()` targets (`KUI-L011`).
|
|
49
|
+
|
|
50
|
+
## Related
|
|
51
|
+
|
|
52
|
+
- Docs: [`docs/webawesome-theme.md#coverage`](../../docs/webawesome-theme.md#coverage).
|
|
53
|
+
- UX catalog route: `?component=wa-progress-bar`.
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
# Progress Ring
|
|
2
|
+
|
|
3
|
+
<!-- Generated by scripts/sync-component-docs.mjs from ai/component-catalog.json and ai/component-composition.json. Do not edit; run `npm run catalog:sync`. -->
|
|
4
|
+
|
|
5
|
+
`@kerfjs/ui:wa-progress-ring` · Web Awesome · component · Feedback · recommendation: supported
|
|
6
|
+
|
|
7
|
+
## When to use
|
|
8
|
+
|
|
9
|
+
Circular indicator for determinate or indeterminate progress.
|
|
10
|
+
|
|
11
|
+
**Not when:**
|
|
12
|
+
|
|
13
|
+
- Do not choose it from catalog presence alone; confirm that its semantic and interaction contract matches the product need.
|
|
14
|
+
|
|
15
|
+
## Imports
|
|
16
|
+
|
|
17
|
+
- Theme CSS: import `@kerfjs/ui/webawesome.css` once.
|
|
18
|
+
- Registration: import `@awesome.me/webawesome/dist/components/progress-ring/progress-ring.js` once (a side effect).
|
|
19
|
+
- Custom element: `<wa-progress-ring>`.
|
|
20
|
+
- Declared side effects: custom-element-registration.
|
|
21
|
+
|
|
22
|
+
## Props
|
|
23
|
+
|
|
24
|
+
Typed JSX attributes: [`webawesome-jsx-signatures-v1.md`](../webawesome-jsx-signatures-v1.md) (import `@kerfjs/ui/webawesome` for types only). Use the Web Awesome attribute API; do not reach into its shadow DOM.
|
|
25
|
+
|
|
26
|
+
## Composition
|
|
27
|
+
|
|
28
|
+
- Parents: any.
|
|
29
|
+
- Contexts: `application-ui`.
|
|
30
|
+
- Children: unrestricted.
|
|
31
|
+
|
|
32
|
+
## State and wiring
|
|
33
|
+
|
|
34
|
+
No wiring helper.
|
|
35
|
+
|
|
36
|
+
## Geometry
|
|
37
|
+
|
|
38
|
+
Margin: none · border: self · padding: self (layout role: feedback). `self` means the component already owns it — do not add wrapper padding, margin, or borders around it.
|
|
39
|
+
|
|
40
|
+
## Accessibility
|
|
41
|
+
|
|
42
|
+
No component-specific obligations beyond native semantics and a visible or accessible name for every control.
|
|
43
|
+
|
|
44
|
+
## Styling boundary
|
|
45
|
+
|
|
46
|
+
The component owns its own styles. Configure it through its props and variants; do not override its internals.
|
|
47
|
+
|
|
48
|
+
Theme it only through `@kerfjs/ui/webawesome.css` and cataloged tokens. Do not restyle its shadow DOM or uncataloged `::part()` targets (`KUI-L011`).
|
|
49
|
+
|
|
50
|
+
## Related
|
|
51
|
+
|
|
52
|
+
- Docs: [`docs/webawesome-theme.md#coverage`](../../docs/webawesome-theme.md#coverage).
|
|
53
|
+
- UX catalog route: `?component=wa-progress-ring`.
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
# QR Code
|
|
2
|
+
|
|
3
|
+
<!-- Generated by scripts/sync-component-docs.mjs from ai/component-catalog.json and ai/component-composition.json. Do not edit; run `npm run catalog:sync`. -->
|
|
4
|
+
|
|
5
|
+
`@kerfjs/ui:wa-qr-code` · Web Awesome · component · Media · recommendation: supported
|
|
6
|
+
|
|
7
|
+
## When to use
|
|
8
|
+
|
|
9
|
+
Scannable QR representation of a supplied value.
|
|
10
|
+
|
|
11
|
+
**Not when:**
|
|
12
|
+
|
|
13
|
+
- Do not choose it from catalog presence alone; confirm that its semantic and interaction contract matches the product need.
|
|
14
|
+
|
|
15
|
+
## Imports
|
|
16
|
+
|
|
17
|
+
- Theme CSS: import `@kerfjs/ui/webawesome.css` once.
|
|
18
|
+
- Registration: import `@awesome.me/webawesome/dist/components/qr-code/qr-code.js` once (a side effect).
|
|
19
|
+
- Custom element: `<wa-qr-code>`.
|
|
20
|
+
- Declared side effects: custom-element-registration.
|
|
21
|
+
|
|
22
|
+
## Props
|
|
23
|
+
|
|
24
|
+
Typed JSX attributes: [`webawesome-jsx-signatures-v1.md`](../webawesome-jsx-signatures-v1.md) (import `@kerfjs/ui/webawesome` for types only). Use the Web Awesome attribute API; do not reach into its shadow DOM.
|
|
25
|
+
|
|
26
|
+
## Composition
|
|
27
|
+
|
|
28
|
+
- Parents: any.
|
|
29
|
+
- Contexts: `application-ui`.
|
|
30
|
+
- Children: unrestricted.
|
|
31
|
+
|
|
32
|
+
## State and wiring
|
|
33
|
+
|
|
34
|
+
No wiring helper.
|
|
35
|
+
|
|
36
|
+
## Geometry
|
|
37
|
+
|
|
38
|
+
Margin: none · border: self · padding: self (layout role: media). `self` means the component already owns it — do not add wrapper padding, margin, or borders around it.
|
|
39
|
+
|
|
40
|
+
## Accessibility
|
|
41
|
+
|
|
42
|
+
No component-specific obligations beyond native semantics and a visible or accessible name for every control.
|
|
43
|
+
|
|
44
|
+
## Styling boundary
|
|
45
|
+
|
|
46
|
+
The component owns its own styles. Configure it through its props and variants; do not override its internals.
|
|
47
|
+
|
|
48
|
+
Theme it only through `@kerfjs/ui/webawesome.css` and cataloged tokens. Do not restyle its shadow DOM or uncataloged `::part()` targets (`KUI-L011`).
|
|
49
|
+
|
|
50
|
+
## Related
|
|
51
|
+
|
|
52
|
+
- Docs: [`docs/webawesome-theme.md#coverage`](../../docs/webawesome-theme.md#coverage).
|
|
53
|
+
- UX catalog route: `?component=wa-qr-code`.
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
# Radio Group
|
|
2
|
+
|
|
3
|
+
<!-- Generated by scripts/sync-component-docs.mjs from ai/component-catalog.json and ai/component-composition.json. Do not edit; run `npm run catalog:sync`. -->
|
|
4
|
+
|
|
5
|
+
`@kerfjs/ui:wa-radio-group` · Web Awesome · component · Forms · recommendation: supported
|
|
6
|
+
|
|
7
|
+
## When to use
|
|
8
|
+
|
|
9
|
+
Labels and manages a mutually exclusive set of radios.
|
|
10
|
+
|
|
11
|
+
**Not when:**
|
|
12
|
+
|
|
13
|
+
- Do not choose it from catalog presence alone; confirm that its semantic and interaction contract matches the product need.
|
|
14
|
+
|
|
15
|
+
## Imports
|
|
16
|
+
|
|
17
|
+
- Theme CSS: import `@kerfjs/ui/webawesome.css` once.
|
|
18
|
+
- Registration: import `@awesome.me/webawesome/dist/components/radio-group/radio-group.js` once (a side effect).
|
|
19
|
+
- Custom element: `<wa-radio-group>`.
|
|
20
|
+
- Declared side effects: custom-element-registration.
|
|
21
|
+
|
|
22
|
+
## Props
|
|
23
|
+
|
|
24
|
+
Typed JSX attributes: [`webawesome-jsx-signatures-v1.md`](../webawesome-jsx-signatures-v1.md) (import `@kerfjs/ui/webawesome` for types only). Use the Web Awesome attribute API; do not reach into its shadow DOM.
|
|
25
|
+
|
|
26
|
+
## Composition
|
|
27
|
+
|
|
28
|
+
- Parents: any.
|
|
29
|
+
- Contexts: `application-ui`.
|
|
30
|
+
- Children: only [Radio](./wa-radio.md) (required: [Radio](./wa-radio.md)).
|
|
31
|
+
- Built from: [Radio](./wa-radio.md).
|
|
32
|
+
|
|
33
|
+
Zones (a zone is bound to JSX only through its listed prop; never assume the zone id is a prop):
|
|
34
|
+
|
|
35
|
+
- `options` — no declared JSX prop; accepts [Radio](./wa-radio.md); at least 1.
|
|
36
|
+
|
|
37
|
+
## State and wiring
|
|
38
|
+
|
|
39
|
+
No wiring helper.
|
|
40
|
+
|
|
41
|
+
## Geometry
|
|
42
|
+
|
|
43
|
+
Margin: self · border: child · padding: child (layout role: forms). `self` means the component already owns it — do not add wrapper padding, margin, or borders around it.
|
|
44
|
+
|
|
45
|
+
## Accessibility
|
|
46
|
+
|
|
47
|
+
No component-specific obligations beyond native semantics and a visible or accessible name for every control.
|
|
48
|
+
|
|
49
|
+
## Styling boundary
|
|
50
|
+
|
|
51
|
+
The component owns its own styles. Configure it through its props and variants; do not override its internals.
|
|
52
|
+
|
|
53
|
+
Theme it only through `@kerfjs/ui/webawesome.css` and cataloged tokens. Do not restyle its shadow DOM or uncataloged `::part()` targets (`KUI-L011`).
|
|
54
|
+
|
|
55
|
+
## Related
|
|
56
|
+
|
|
57
|
+
- Components: [Radio](./wa-radio.md).
|
|
58
|
+
- Docs: [`docs/webawesome-theme.md#coverage`](../../docs/webawesome-theme.md#coverage).
|
|
59
|
+
- UX catalog route: `?component=wa-radio-group`.
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
# Radio
|
|
2
|
+
|
|
3
|
+
<!-- Generated by scripts/sync-component-docs.mjs from ai/component-catalog.json and ai/component-composition.json. Do not edit; run `npm run catalog:sync`. -->
|
|
4
|
+
|
|
5
|
+
`@kerfjs/ui:wa-radio` · Web Awesome · component · Forms · recommendation: supported
|
|
6
|
+
|
|
7
|
+
## When to use
|
|
8
|
+
|
|
9
|
+
Single-choice control used inside a radio group.
|
|
10
|
+
|
|
11
|
+
**Not when:**
|
|
12
|
+
|
|
13
|
+
- Do not choose it from catalog presence alone; confirm that its semantic and interaction contract matches the product need.
|
|
14
|
+
|
|
15
|
+
## Imports
|
|
16
|
+
|
|
17
|
+
- Theme CSS: import `@kerfjs/ui/webawesome.css` once.
|
|
18
|
+
- Registration: import `@awesome.me/webawesome/dist/components/radio/radio.js` once (a side effect).
|
|
19
|
+
- Custom element: `<wa-radio>`.
|
|
20
|
+
- Declared side effects: custom-element-registration.
|
|
21
|
+
|
|
22
|
+
## Props
|
|
23
|
+
|
|
24
|
+
Typed JSX attributes: [`webawesome-jsx-signatures-v1.md`](../webawesome-jsx-signatures-v1.md) (import `@kerfjs/ui/webawesome` for types only). Use the Web Awesome attribute API; do not reach into its shadow DOM.
|
|
25
|
+
|
|
26
|
+
## Composition
|
|
27
|
+
|
|
28
|
+
- Parents: any.
|
|
29
|
+
- Contexts: `application-ui`.
|
|
30
|
+
- Children: unrestricted.
|
|
31
|
+
- Built from: [Icon](./wa-icon.md).
|
|
32
|
+
|
|
33
|
+
## State and wiring
|
|
34
|
+
|
|
35
|
+
No wiring helper.
|
|
36
|
+
|
|
37
|
+
## Geometry
|
|
38
|
+
|
|
39
|
+
Margin: none · border: self · padding: self (layout role: forms). `self` means the component already owns it — do not add wrapper padding, margin, or borders around it.
|
|
40
|
+
|
|
41
|
+
## Accessibility
|
|
42
|
+
|
|
43
|
+
No component-specific obligations beyond native semantics and a visible or accessible name for every control.
|
|
44
|
+
|
|
45
|
+
## Styling boundary
|
|
46
|
+
|
|
47
|
+
The component owns its own styles. Configure it through its props and variants; do not override its internals.
|
|
48
|
+
|
|
49
|
+
Theme it only through `@kerfjs/ui/webawesome.css` and cataloged tokens. Do not restyle its shadow DOM or uncataloged `::part()` targets (`KUI-L011`).
|
|
50
|
+
|
|
51
|
+
## Related
|
|
52
|
+
|
|
53
|
+
- Components: [Icon](./wa-icon.md).
|
|
54
|
+
- Docs: [`docs/webawesome-theme.md#coverage`](../../docs/webawesome-theme.md#coverage).
|
|
55
|
+
- UX catalog route: `?component=wa-radio`.
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
# Random Content
|
|
2
|
+
|
|
3
|
+
<!-- Generated by scripts/sync-component-docs.mjs from ai/component-catalog.json and ai/component-composition.json. Do not edit; run `npm run catalog:sync`. -->
|
|
4
|
+
|
|
5
|
+
`@kerfjs/ui:wa-random-content` · Web Awesome · component · Helpers · recommendation: supported
|
|
6
|
+
|
|
7
|
+
## When to use
|
|
8
|
+
|
|
9
|
+
Experimental helper that selects one slotted item at random.
|
|
10
|
+
|
|
11
|
+
**Not when:**
|
|
12
|
+
|
|
13
|
+
- Do not choose it from catalog presence alone; confirm that its semantic and interaction contract matches the product need.
|
|
14
|
+
|
|
15
|
+
## Imports
|
|
16
|
+
|
|
17
|
+
- Theme CSS: import `@kerfjs/ui/webawesome.css` once.
|
|
18
|
+
- Registration: import `@awesome.me/webawesome/dist/components/random-content/random-content.js` once (a side effect).
|
|
19
|
+
- Custom element: `<wa-random-content>`.
|
|
20
|
+
- Declared side effects: custom-element-registration.
|
|
21
|
+
|
|
22
|
+
## Props
|
|
23
|
+
|
|
24
|
+
Typed JSX attributes: [`webawesome-jsx-signatures-v1.md`](../webawesome-jsx-signatures-v1.md) (import `@kerfjs/ui/webawesome` for types only). Use the Web Awesome attribute API; do not reach into its shadow DOM.
|
|
25
|
+
|
|
26
|
+
## Composition
|
|
27
|
+
|
|
28
|
+
- Parents: any.
|
|
29
|
+
- Contexts: `application-ui`.
|
|
30
|
+
- Children: unrestricted.
|
|
31
|
+
|
|
32
|
+
## State and wiring
|
|
33
|
+
|
|
34
|
+
No wiring helper.
|
|
35
|
+
|
|
36
|
+
## Geometry
|
|
37
|
+
|
|
38
|
+
Margin: none · border: child · padding: child (layout role: helpers). `self` means the component already owns it — do not add wrapper padding, margin, or borders around it.
|
|
39
|
+
|
|
40
|
+
## Accessibility
|
|
41
|
+
|
|
42
|
+
No component-specific obligations beyond native semantics and a visible or accessible name for every control.
|
|
43
|
+
|
|
44
|
+
## Styling boundary
|
|
45
|
+
|
|
46
|
+
The component owns its own styles. Configure it through its props and variants; do not override its internals.
|
|
47
|
+
|
|
48
|
+
Theme it only through `@kerfjs/ui/webawesome.css` and cataloged tokens. Do not restyle its shadow DOM or uncataloged `::part()` targets (`KUI-L011`).
|
|
49
|
+
|
|
50
|
+
## Related
|
|
51
|
+
|
|
52
|
+
- Docs: [`docs/webawesome-theme.md#coverage`](../../docs/webawesome-theme.md#coverage).
|
|
53
|
+
- UX catalog route: `?component=wa-random-content`.
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
# Rating
|
|
2
|
+
|
|
3
|
+
<!-- Generated by scripts/sync-component-docs.mjs from ai/component-catalog.json and ai/component-composition.json. Do not edit; run `npm run catalog:sync`. -->
|
|
4
|
+
|
|
5
|
+
`@kerfjs/ui:wa-rating` · Web Awesome · component · Forms · recommendation: supported
|
|
6
|
+
|
|
7
|
+
## When to use
|
|
8
|
+
|
|
9
|
+
Interactive rating control with accessible labeling.
|
|
10
|
+
|
|
11
|
+
**Not when:**
|
|
12
|
+
|
|
13
|
+
- Do not choose it from catalog presence alone; confirm that its semantic and interaction contract matches the product need.
|
|
14
|
+
|
|
15
|
+
## Imports
|
|
16
|
+
|
|
17
|
+
- Theme CSS: import `@kerfjs/ui/webawesome.css` once.
|
|
18
|
+
- Registration: import `@awesome.me/webawesome/dist/components/rating/rating.js` once (a side effect).
|
|
19
|
+
- Custom element: `<wa-rating>`.
|
|
20
|
+
- Declared side effects: custom-element-registration.
|
|
21
|
+
|
|
22
|
+
## Props
|
|
23
|
+
|
|
24
|
+
Typed JSX attributes: [`webawesome-jsx-signatures-v1.md`](../webawesome-jsx-signatures-v1.md) (import `@kerfjs/ui/webawesome` for types only). Use the Web Awesome attribute API; do not reach into its shadow DOM.
|
|
25
|
+
|
|
26
|
+
## Composition
|
|
27
|
+
|
|
28
|
+
- Parents: any.
|
|
29
|
+
- Contexts: `application-ui`.
|
|
30
|
+
- Children: unrestricted.
|
|
31
|
+
- Built from: [Icon](./wa-icon.md).
|
|
32
|
+
|
|
33
|
+
## State and wiring
|
|
34
|
+
|
|
35
|
+
No wiring helper.
|
|
36
|
+
|
|
37
|
+
## Geometry
|
|
38
|
+
|
|
39
|
+
Margin: none · border: none · padding: none (layout role: forms). `self` means the component already owns it — do not add wrapper padding, margin, or borders around it.
|
|
40
|
+
|
|
41
|
+
## Accessibility
|
|
42
|
+
|
|
43
|
+
No component-specific obligations beyond native semantics and a visible or accessible name for every control.
|
|
44
|
+
|
|
45
|
+
## Styling boundary
|
|
46
|
+
|
|
47
|
+
The component owns its own styles. Configure it through its props and variants; do not override its internals.
|
|
48
|
+
|
|
49
|
+
Theme it only through `@kerfjs/ui/webawesome.css` and cataloged tokens. Do not restyle its shadow DOM or uncataloged `::part()` targets (`KUI-L011`).
|
|
50
|
+
|
|
51
|
+
## Related
|
|
52
|
+
|
|
53
|
+
- Components: [Icon](./wa-icon.md).
|
|
54
|
+
- Docs: [`docs/webawesome-theme.md#coverage`](../../docs/webawesome-theme.md#coverage).
|
|
55
|
+
- UX catalog route: `?component=wa-rating`.
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
# Relative Time
|
|
2
|
+
|
|
3
|
+
<!-- Generated by scripts/sync-component-docs.mjs from ai/component-catalog.json and ai/component-composition.json. Do not edit; run `npm run catalog:sync`. -->
|
|
4
|
+
|
|
5
|
+
`@kerfjs/ui:wa-relative-time` · Web Awesome · component · Helpers · recommendation: supported
|
|
6
|
+
|
|
7
|
+
## When to use
|
|
8
|
+
|
|
9
|
+
Locale-aware human description of a date relative to now.
|
|
10
|
+
|
|
11
|
+
**Not when:**
|
|
12
|
+
|
|
13
|
+
- Do not choose it from catalog presence alone; confirm that its semantic and interaction contract matches the product need.
|
|
14
|
+
|
|
15
|
+
## Imports
|
|
16
|
+
|
|
17
|
+
- Theme CSS: import `@kerfjs/ui/webawesome.css` once.
|
|
18
|
+
- Registration: import `@awesome.me/webawesome/dist/components/relative-time/relative-time.js` once (a side effect).
|
|
19
|
+
- Custom element: `<wa-relative-time>`.
|
|
20
|
+
- Declared side effects: custom-element-registration.
|
|
21
|
+
|
|
22
|
+
## Props
|
|
23
|
+
|
|
24
|
+
Typed JSX attributes: [`webawesome-jsx-signatures-v1.md`](../webawesome-jsx-signatures-v1.md) (import `@kerfjs/ui/webawesome` for types only). Use the Web Awesome attribute API; do not reach into its shadow DOM.
|
|
25
|
+
|
|
26
|
+
## Composition
|
|
27
|
+
|
|
28
|
+
- Parents: any.
|
|
29
|
+
- Contexts: `application-ui`.
|
|
30
|
+
- Children: unrestricted.
|
|
31
|
+
|
|
32
|
+
## State and wiring
|
|
33
|
+
|
|
34
|
+
No wiring helper.
|
|
35
|
+
|
|
36
|
+
## Geometry
|
|
37
|
+
|
|
38
|
+
Margin: none · border: none · padding: none (layout role: helpers). `self` means the component already owns it — do not add wrapper padding, margin, or borders around it.
|
|
39
|
+
|
|
40
|
+
## Accessibility
|
|
41
|
+
|
|
42
|
+
No component-specific obligations beyond native semantics and a visible or accessible name for every control.
|
|
43
|
+
|
|
44
|
+
## Styling boundary
|
|
45
|
+
|
|
46
|
+
The component owns its own styles. Configure it through its props and variants; do not override its internals.
|
|
47
|
+
|
|
48
|
+
Theme it only through `@kerfjs/ui/webawesome.css` and cataloged tokens. Do not restyle its shadow DOM or uncataloged `::part()` targets (`KUI-L011`).
|
|
49
|
+
|
|
50
|
+
## Related
|
|
51
|
+
|
|
52
|
+
- Docs: [`docs/webawesome-theme.md#coverage`](../../docs/webawesome-theme.md#coverage).
|
|
53
|
+
- UX catalog route: `?component=wa-relative-time`.
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
# Resize Observer
|
|
2
|
+
|
|
3
|
+
<!-- Generated by scripts/sync-component-docs.mjs from ai/component-catalog.json and ai/component-composition.json. Do not edit; run `npm run catalog:sync`. -->
|
|
4
|
+
|
|
5
|
+
`@kerfjs/ui:wa-resize-observer` · Web Awesome · component · Helpers · recommendation: supported
|
|
6
|
+
|
|
7
|
+
## When to use
|
|
8
|
+
|
|
9
|
+
Declaratively emits size changes for slotted content.
|
|
10
|
+
|
|
11
|
+
**Not when:**
|
|
12
|
+
|
|
13
|
+
- Do not choose it from catalog presence alone; confirm that its semantic and interaction contract matches the product need.
|
|
14
|
+
|
|
15
|
+
## Imports
|
|
16
|
+
|
|
17
|
+
- Theme CSS: import `@kerfjs/ui/webawesome.css` once.
|
|
18
|
+
- Registration: import `@awesome.me/webawesome/dist/components/resize-observer/resize-observer.js` once (a side effect).
|
|
19
|
+
- Custom element: `<wa-resize-observer>`.
|
|
20
|
+
- Declared side effects: custom-element-registration.
|
|
21
|
+
|
|
22
|
+
## Props
|
|
23
|
+
|
|
24
|
+
Typed JSX attributes: [`webawesome-jsx-signatures-v1.md`](../webawesome-jsx-signatures-v1.md) (import `@kerfjs/ui/webawesome` for types only). Use the Web Awesome attribute API; do not reach into its shadow DOM.
|
|
25
|
+
|
|
26
|
+
## Composition
|
|
27
|
+
|
|
28
|
+
- Parents: any.
|
|
29
|
+
- Contexts: `application-ui`.
|
|
30
|
+
- Children: unrestricted.
|
|
31
|
+
|
|
32
|
+
## State and wiring
|
|
33
|
+
|
|
34
|
+
No wiring helper.
|
|
35
|
+
|
|
36
|
+
## Geometry
|
|
37
|
+
|
|
38
|
+
Margin: none · border: none · padding: none (layout role: helpers). `self` means the component already owns it — do not add wrapper padding, margin, or borders around it.
|
|
39
|
+
|
|
40
|
+
## Accessibility
|
|
41
|
+
|
|
42
|
+
No component-specific obligations beyond native semantics and a visible or accessible name for every control.
|
|
43
|
+
|
|
44
|
+
## Styling boundary
|
|
45
|
+
|
|
46
|
+
The component owns its own styles. Configure it through its props and variants; do not override its internals.
|
|
47
|
+
|
|
48
|
+
Theme it only through `@kerfjs/ui/webawesome.css` and cataloged tokens. Do not restyle its shadow DOM or uncataloged `::part()` targets (`KUI-L011`).
|
|
49
|
+
|
|
50
|
+
## Related
|
|
51
|
+
|
|
52
|
+
- Docs: [`docs/webawesome-theme.md#coverage`](../../docs/webawesome-theme.md#coverage).
|
|
53
|
+
- UX catalog route: `?component=wa-resize-observer`.
|