@kerfjs/ui 5.0.0-beta.55 → 5.0.0-beta.56
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 +12 -10
- package/ai/compile-time-contracts-v1.json +2 -2
- package/ai/component-catalog-v2.json +149 -39
- package/ai/component-catalog.json +202 -51
- package/ai/public-api-signatures-v1.md +439 -97
- package/ai/skill.md +43 -40
- package/ai/webawesome-jsx-signatures-v1.md +8 -2
- package/dist/app-tab.js +1 -1
- package/dist/badge.d.ts +35 -7
- package/dist/badge.js +1 -1
- package/dist/browser/content-item.js +3 -0
- package/dist/browser/select.js +1 -0
- package/dist/catalog-resources.d.ts +12 -1
- package/dist/catalog.d.ts +14 -3
- package/dist/catalog.js +52 -43
- package/dist/catalog.js.map +1 -1
- package/dist/{chunk-WZ2GLEY4.js → chunk-2G2ZJQYK.js} +2 -14
- package/dist/chunk-2G2ZJQYK.js.map +1 -0
- package/dist/{chunk-D7GWXIAS.js → chunk-5I7QGQVT.js} +1 -1
- package/dist/chunk-5I7QGQVT.js.map +1 -0
- package/dist/{chunk-RNRUVPJ3.js → chunk-63ZWBGE3.js} +3 -2
- package/dist/chunk-63ZWBGE3.js.map +1 -0
- package/dist/{chunk-44IG7PFV.js → chunk-6CINWX2E.js} +3 -3
- package/dist/{chunk-44IG7PFV.js.map → chunk-6CINWX2E.js.map} +1 -1
- package/dist/{chunk-C2FAYFDE.js → chunk-AGXQQFKZ.js} +2 -2
- package/dist/{chunk-C2FAYFDE.js.map → chunk-AGXQQFKZ.js.map} +1 -1
- package/dist/{chunk-ATHXW6RP.js → chunk-AHEG27M7.js} +2 -2
- package/dist/{chunk-ATHXW6RP.js.map → chunk-AHEG27M7.js.map} +1 -1
- package/dist/{chunk-7GUQYHKA.js → chunk-AK67F6QN.js} +4 -1
- package/dist/chunk-AK67F6QN.js.map +1 -0
- package/dist/chunk-BFPBS5Y4.js +250 -0
- package/dist/chunk-BFPBS5Y4.js.map +1 -0
- package/dist/{chunk-5OLVUEND.js → chunk-DG6G5EPF.js} +4 -6
- package/dist/chunk-DG6G5EPF.js.map +1 -0
- package/dist/{chunk-MTM43SJO.js → chunk-G33XC2NB.js} +1 -1
- package/dist/chunk-G33XC2NB.js.map +1 -0
- package/dist/{chunk-TZ5IHWB2.js → chunk-K6UNVKDK.js} +3 -3
- package/dist/{chunk-TZ5IHWB2.js.map → chunk-K6UNVKDK.js.map} +1 -1
- package/dist/{chunk-HMQ2ZDGG.js → chunk-KROD7KZK.js} +3 -2
- package/dist/chunk-KROD7KZK.js.map +1 -0
- package/dist/{chunk-5NDQABWK.js → chunk-M7QV3IHH.js} +3 -1
- package/dist/chunk-M7QV3IHH.js.map +1 -0
- package/dist/{chunk-RNZAKSME.js → chunk-MA6Z6EIM.js} +3 -3
- package/dist/{chunk-RNZAKSME.js.map → chunk-MA6Z6EIM.js.map} +1 -1
- package/dist/chunk-MA73TA6D.js +42 -0
- package/dist/chunk-MA73TA6D.js.map +1 -0
- package/dist/{chunk-ZMBU522F.js → chunk-MEY33VWB.js} +2 -2
- package/dist/{chunk-ZMBU522F.js.map → chunk-MEY33VWB.js.map} +1 -1
- package/dist/{chunk-T22EM4ET.js → chunk-MOBRFZH3.js} +81 -31
- package/dist/chunk-MOBRFZH3.js.map +1 -0
- package/dist/chunk-MP2GDBQZ.js +50 -0
- package/dist/chunk-MP2GDBQZ.js.map +1 -0
- package/dist/{chunk-3NBL3OUQ.js → chunk-NAPE7WUS.js} +2 -2
- package/dist/chunk-NAPE7WUS.js.map +1 -0
- package/dist/{chunk-BSKEH3UC.js → chunk-NBYTIVHS.js} +2 -2
- package/dist/{chunk-BSKEH3UC.js.map → chunk-NBYTIVHS.js.map} +1 -1
- package/dist/chunk-O3EXIBEZ.js +114 -0
- package/dist/chunk-O3EXIBEZ.js.map +1 -0
- package/dist/{chunk-R754MHXX.js → chunk-PK4N5QTO.js} +7 -6
- package/dist/chunk-PK4N5QTO.js.map +1 -0
- package/dist/{chunk-EAX2GSS4.js → chunk-QQOTQTDD.js} +51 -20
- package/dist/chunk-QQOTQTDD.js.map +1 -0
- package/dist/{chunk-LZXQVUGN.js → chunk-T4UZTNZ4.js} +4 -4
- package/dist/{chunk-LZXQVUGN.js.map → chunk-T4UZTNZ4.js.map} +1 -1
- package/dist/{chunk-N7FHFNT6.js → chunk-V65EOWNF.js} +33 -5
- package/dist/chunk-V65EOWNF.js.map +1 -0
- package/dist/{chunk-GUIHMIT2.js → chunk-VNPQDCQZ.js} +3 -3
- package/dist/{chunk-GUIHMIT2.js.map → chunk-VNPQDCQZ.js.map} +1 -1
- package/dist/{chunk-5I22LMCV.js → chunk-VZOFZPSO.js} +2 -2
- package/dist/chunk-VZOFZPSO.js.map +1 -0
- package/dist/{chunk-4BIMLITI.js → chunk-WLG6SSNT.js} +5 -3
- package/dist/chunk-WLG6SSNT.js.map +1 -0
- package/dist/{chunk-NE5JAOQS.js → chunk-WOUF7YXM.js} +3 -3
- package/dist/{chunk-NE5JAOQS.js.map → chunk-WOUF7YXM.js.map} +1 -1
- package/dist/collapsible-panel.d.ts +14 -3
- package/dist/collapsible-panel.js +13 -16
- package/dist/collapsible-panel.js.map +1 -1
- package/dist/content-item.d.ts +46 -0
- package/dist/content-item.js +4 -0
- package/dist/content-item.js.map +1 -0
- package/dist/css-values.d.ts +5 -11
- package/dist/css-values.js +1 -1
- package/dist/disclosure-arrow.d.ts +4 -1
- package/dist/disclosure-arrow.js +1 -1
- package/dist/floating-toolbar.d.ts +17 -6
- package/dist/floating-toolbar.js +1 -1
- package/dist/grid.js +1 -1
- package/dist/help-tags-register.d.ts +13 -0
- package/dist/help-tags-register.js +9 -0
- package/dist/help-tags-register.js.map +1 -0
- package/dist/index.d.ts +6 -5
- package/dist/index.js +27 -26
- package/dist/list-action-row.js +1 -1
- package/dist/list-header.d.ts +14 -1
- package/dist/list-header.js +1 -1
- package/dist/list-inset-control.d.ts +1 -1
- package/dist/list-inset-control.js +1 -1
- package/dist/list-inset-text.d.ts +3 -10
- package/dist/list-inset-text.js +1 -1
- package/dist/list-item.js +1 -1
- package/dist/list.d.ts +10 -3
- package/dist/list.js +1 -1
- package/dist/nav-stack.d.ts +38 -5
- package/dist/nav-stack.js +4 -1
- package/dist/pane.d.ts +20 -2
- package/dist/pane.js +1 -1
- package/dist/{panel-toolbar-BFQxFITu.d.ts → panel-toolbar-C8sF-YZC.d.ts} +12 -1
- package/dist/popup-menu-register.js +3 -2
- package/dist/popup-menu-register.js.map +1 -1
- package/dist/popup-menu.js +1 -1
- package/dist/row.d.ts +1 -1
- package/dist/row.js +1 -1
- package/dist/select-register.js +70 -3
- package/dist/select-register.js.map +1 -1
- package/dist/select.d.ts +46 -8
- package/dist/select.js +2 -1
- package/dist/{divider-sides-BzB6rphT.d.ts → sides-BPSWde0A.d.ts} +1 -3
- package/dist/skeleton.js +1 -1
- package/dist/spacer.js +1 -1
- package/dist/split-view.d.ts +31 -3
- package/dist/split-view.js +33 -5
- package/dist/split-view.js.map +1 -1
- package/dist/state-banner.js +1 -1
- package/dist/styles/badge.css +13 -0
- package/dist/styles/catalog/components/catalog-example.css +1 -1
- package/dist/styles/catalog/components/catalog-stage.css +1 -1
- package/dist/styles/collapsible-panel.css +192 -39
- package/dist/styles/content-item.css +30 -0
- package/dist/styles/floating-toolbar.css +5 -0
- package/dist/styles/foundation.css +28 -19
- package/dist/styles/layout.css +1 -21
- package/dist/styles/list-action-row.css +13 -1
- package/dist/styles/list-inset-text.css +1 -2
- package/dist/styles/list-item.css +14 -1
- package/dist/styles/list.css +1 -1
- package/dist/styles/nav-stack.css +29 -64
- package/dist/styles/pane.css +33 -1
- package/dist/styles/popup-menu.css +78 -0
- package/dist/styles/resizable-region.css +53 -10
- package/dist/styles/select.css +39 -12
- package/dist/styles/split-view.css +21 -25
- package/dist/styles/tab-scaffold.css +36 -14
- package/dist/styles/text.css +1 -1
- package/dist/styles/token-search-field.css +4 -4
- package/dist/styles/toolbar-control-group.css +31 -12
- package/dist/styles/toolbar.css +14 -5
- package/dist/styles/value-table.css +19 -2
- package/dist/styles/webawesome.css +3 -1
- package/dist/styles/workbench.css +134 -31
- package/dist/tab-scaffold.d.ts +35 -1
- package/dist/tab-scaffold.js +50 -16
- package/dist/tab-scaffold.js.map +1 -1
- package/dist/token-search-field.d.ts +4 -2
- package/dist/token-search-field.js +1 -1
- package/dist/toolbar-text.js +1 -1
- package/dist/toolbar.d.ts +12 -4
- package/dist/toolbar.js +1 -1
- package/dist/{types-D6vzj-VT.d.ts → types-DXAGogOS.d.ts} +39 -6
- package/dist/value-table.js +1 -1
- package/dist/webawesome.d.ts +7 -1
- package/dist/wire-catalog.d.ts +12 -1
- package/dist/wire-catalog.js +10 -2
- package/dist/wire-catalog.js.map +1 -1
- package/dist/wire-token-search-fields.js +1 -1
- package/dist/workbench.d.ts +59 -22
- package/dist/workbench.js +1 -1
- package/docs/accessibility.md +116 -7
- package/docs/app-layouts.md +9 -7
- package/docs/catalog.md +17 -3
- package/docs/collapsible-panel.md +26 -7
- package/docs/component-contract.md +36 -10
- package/docs/component-selection.md +41 -40
- package/docs/design/templates/empty-state/with-action-dark.svg +1 -1
- package/docs/design/templates/empty-state/with-action.svg +1 -1
- package/docs/design/templates/empty-state-dark.svg +1 -1
- package/docs/design/templates/empty-state.svg +1 -1
- package/docs/design/templates/list/compact-dark.svg +1 -1
- package/docs/design/templates/list/compact.svg +1 -1
- package/docs/design/templates/list/stack-dark.svg +1 -1
- package/docs/design/templates/list/stack.svg +1 -1
- package/docs/design/templates/list-action-row/default-dark.svg +1 -1
- package/docs/design/templates/list-action-row/default.svg +1 -1
- package/docs/design/templates/list-action-row/selected-dark.svg +1 -1
- package/docs/design/templates/list-action-row/selected.svg +1 -1
- package/docs/design/templates/list-action-row-dark.svg +1 -1
- package/docs/design/templates/list-action-row.svg +1 -1
- package/docs/design/templates/list-dark.svg +1 -1
- package/docs/design/templates/list-item/default-dark.svg +1 -1
- package/docs/design/templates/list-item/default.svg +1 -1
- package/docs/design/templates/list-item/selected-dark.svg +1 -1
- package/docs/design/templates/list-item/selected.svg +1 -1
- package/docs/design/templates/list-item/trailing-dark.svg +1 -1
- package/docs/design/templates/list-item/trailing.svg +1 -1
- package/docs/design/templates/list-item-dark.svg +1 -1
- package/docs/design/templates/list-item.svg +1 -1
- package/docs/design/templates/list.svg +1 -1
- package/docs/design/templates/value-table/details-dark.svg +1 -1
- package/docs/design/templates/value-table/details.svg +1 -1
- package/docs/design/templates/value-table-dark.svg +1 -1
- package/docs/design/templates/value-table.svg +1 -1
- package/docs/design-philosophy.md +1 -1
- package/docs/examples/command-palette-adapter.tsx +3 -2
- package/docs/layout.md +69 -29
- package/docs/nav-stack.md +45 -1
- package/docs/recipes.md +4 -3
- package/docs/split-view.md +46 -2
- package/docs/tab-scaffold.md +50 -1
- package/docs/type-contracts.md +17 -17
- package/docs/ux-demo.md +2 -2
- package/docs/webawesome-theme.md +1 -2
- package/docs/workbench.md +45 -9
- package/llms.txt +32 -4
- package/package.json +13 -2
- package/ux-demo/recipes/collapsible-sidebar.tsx +3 -2
- package/ux-demo/recipes/navigation-sidebar.tsx +3 -2
- package/ux-demo/recipes/navigation-stack.tsx +3 -2
- package/dist/chunk-3NBL3OUQ.js.map +0 -1
- package/dist/chunk-4BIMLITI.js.map +0 -1
- package/dist/chunk-5I22LMCV.js.map +0 -1
- package/dist/chunk-5NDQABWK.js.map +0 -1
- package/dist/chunk-5OLVUEND.js.map +0 -1
- package/dist/chunk-7GUQYHKA.js.map +0 -1
- package/dist/chunk-D7GWXIAS.js.map +0 -1
- package/dist/chunk-DQA5FMOX.js +0 -85
- package/dist/chunk-DQA5FMOX.js.map +0 -1
- package/dist/chunk-EAX2GSS4.js.map +0 -1
- package/dist/chunk-HMQ2ZDGG.js.map +0 -1
- package/dist/chunk-MTM43SJO.js.map +0 -1
- package/dist/chunk-N7FHFNT6.js.map +0 -1
- package/dist/chunk-R754MHXX.js.map +0 -1
- package/dist/chunk-RNRUVPJ3.js.map +0 -1
- package/dist/chunk-T22EM4ET.js.map +0 -1
- package/dist/chunk-WZ2GLEY4.js.map +0 -1
- package/dist/chunk-XD7DWYXG.js +0 -34
- package/dist/chunk-XD7DWYXG.js.map +0 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kerfjs/ui",
|
|
3
|
-
"version": "5.0.0-beta.
|
|
3
|
+
"version": "5.0.0-beta.56",
|
|
4
4
|
"description": "Accessible, composable UI primitives for kerf applications.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
@@ -38,7 +38,8 @@
|
|
|
38
38
|
"**/*.css",
|
|
39
39
|
"./dist/browser/*.js",
|
|
40
40
|
"./dist/select-register.js",
|
|
41
|
-
"./dist/popup-menu-register.js"
|
|
41
|
+
"./dist/popup-menu-register.js",
|
|
42
|
+
"./dist/help-tags-register.js"
|
|
42
43
|
],
|
|
43
44
|
"exports": {
|
|
44
45
|
".": {
|
|
@@ -139,6 +140,11 @@
|
|
|
139
140
|
"browser": "./dist/browser/list-inset-text.js",
|
|
140
141
|
"import": "./dist/list-inset-text.js"
|
|
141
142
|
},
|
|
143
|
+
"./content-item": {
|
|
144
|
+
"types": "./dist/content-item.d.ts",
|
|
145
|
+
"browser": "./dist/browser/content-item.js",
|
|
146
|
+
"import": "./dist/content-item.js"
|
|
147
|
+
},
|
|
142
148
|
"./resizable-region": {
|
|
143
149
|
"types": "./dist/resizable-region.d.ts",
|
|
144
150
|
"browser": "./dist/browser/resizable-region.js",
|
|
@@ -282,6 +288,10 @@
|
|
|
282
288
|
"types": "./dist/select-register.d.ts",
|
|
283
289
|
"import": "./dist/select-register.js"
|
|
284
290
|
},
|
|
291
|
+
"./help-tags/register": {
|
|
292
|
+
"types": "./dist/help-tags-register.d.ts",
|
|
293
|
+
"import": "./dist/help-tags-register.js"
|
|
294
|
+
},
|
|
285
295
|
"./webawesome": {
|
|
286
296
|
"types": "./dist/webawesome.d.ts",
|
|
287
297
|
"import": "./dist/webawesome.js"
|
|
@@ -328,6 +338,7 @@
|
|
|
328
338
|
"./list-header.css": "./dist/styles/list-header.css",
|
|
329
339
|
"./list-inset-control.css": "./dist/styles/list-inset-control.css",
|
|
330
340
|
"./list-inset-text.css": "./dist/styles/list-inset-text.css",
|
|
341
|
+
"./content-item.css": "./dist/styles/content-item.css",
|
|
331
342
|
"./resizable-region.css": "./dist/styles/resizable-region.css",
|
|
332
343
|
"./app-tab.css": "./dist/styles/app-tab.css",
|
|
333
344
|
"./catalog.css": "./dist/styles/catalog.css",
|
|
@@ -7,6 +7,7 @@ import {
|
|
|
7
7
|
CollapsiblePanelRelocated,
|
|
8
8
|
type CollapsiblePanelToolbar,
|
|
9
9
|
} from '@kerfjs/ui/collapsible-panel';
|
|
10
|
+
import { ContentItem } from '@kerfjs/ui/content-item';
|
|
10
11
|
import { deviceClass } from '@kerfjs/ui/device-class';
|
|
11
12
|
import { FloatingToolbar } from '@kerfjs/ui/floating-toolbar';
|
|
12
13
|
import { Grid } from '@kerfjs/ui/grid';
|
|
@@ -152,7 +153,7 @@ export const createRecipe: RecipeFactory = (announce) => {
|
|
|
152
153
|
/>
|
|
153
154
|
}
|
|
154
155
|
>
|
|
155
|
-
<
|
|
156
|
+
<ContentItem>
|
|
156
157
|
<List gap="2xs">
|
|
157
158
|
<Text variant="span">
|
|
158
159
|
<strong>Narrow the window to a compact width</strong>
|
|
@@ -162,7 +163,7 @@ export const createRecipe: RecipeFactory = (announce) => {
|
|
|
162
163
|
a backdrop, Escape, and a trapped Tab ring, all managed by the wire.
|
|
163
164
|
</Text>
|
|
164
165
|
</List>
|
|
165
|
-
</
|
|
166
|
+
</ContentItem>
|
|
166
167
|
</Pane>
|
|
167
168
|
);
|
|
168
169
|
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import '@kerfjs/ui/layout.css';
|
|
2
2
|
|
|
3
|
+
import { ContentItem } from '@kerfjs/ui/content-item';
|
|
3
4
|
import { List } from '@kerfjs/ui/list';
|
|
4
5
|
import { ListHeader } from '@kerfjs/ui/list-header';
|
|
5
6
|
import { ListItem } from '@kerfjs/ui/list-item';
|
|
@@ -120,7 +121,7 @@ export const createRecipe: RecipeFactory = (announce) => {
|
|
|
120
121
|
disabled
|
|
121
122
|
title="Available to administrators"
|
|
122
123
|
/>
|
|
123
|
-
<
|
|
124
|
+
<ContentItem>
|
|
124
125
|
<List gap="2xs">
|
|
125
126
|
<Text variant="span">
|
|
126
127
|
<strong>Quarterly goal</strong>
|
|
@@ -129,7 +130,7 @@ export const createRecipe: RecipeFactory = (announce) => {
|
|
|
129
130
|
Ship accessible navigation patterns to every workspace.
|
|
130
131
|
</Text>
|
|
131
132
|
</List>
|
|
132
|
-
</
|
|
133
|
+
</ContentItem>
|
|
133
134
|
</>
|
|
134
135
|
)}
|
|
135
136
|
</section>
|
|
@@ -2,6 +2,7 @@ import '@kerfjs/ui/layout.css';
|
|
|
2
2
|
import '@kerfjs/ui/nav-stack.css';
|
|
3
3
|
import '@kerfjs/ui/toolbar-text.css';
|
|
4
4
|
|
|
5
|
+
import { ContentItem } from '@kerfjs/ui/content-item';
|
|
5
6
|
import { List } from '@kerfjs/ui/list';
|
|
6
7
|
import { ListHeader } from '@kerfjs/ui/list-header';
|
|
7
8
|
import { ListItem } from '@kerfjs/ui/list-item';
|
|
@@ -81,7 +82,7 @@ export const createRecipe: RecipeFactory = (announce) => {
|
|
|
81
82
|
title: item.label,
|
|
82
83
|
content: (
|
|
83
84
|
<List controlInsets="t">
|
|
84
|
-
<
|
|
85
|
+
<ContentItem>
|
|
85
86
|
<Row gap="xs">
|
|
86
87
|
<LucideIcon icon={FileText} name="file-text" />
|
|
87
88
|
<List gap="2xs">
|
|
@@ -93,7 +94,7 @@ export const createRecipe: RecipeFactory = (announce) => {
|
|
|
93
94
|
</Text>
|
|
94
95
|
</List>
|
|
95
96
|
</Row>
|
|
96
|
-
</
|
|
97
|
+
</ContentItem>
|
|
97
98
|
</List>
|
|
98
99
|
),
|
|
99
100
|
});
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/list.tsx"],"names":[],"mappings":";;;;;AAiBA,IAAM,uBAAA,uBAA8B,GAAA,CAAI;AAAA,EACtC,gBAAA;AAAA,EACA,UAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA,cAAA;AAAA,EACA,cAAA;AAAA,EACA,iBAAA;AAAA,EACA,kBAAA;AAAA,EACA;AACF,CAAC,CAAA;AAgBD,IAAM,UAAA,GAAqC;AAAA,EACzC,MAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,GAAA;AAAA,EACA,GAAA;AAAA,EACA,GAAA;AAAA,EACA;AACF,CAAA;AAkCO,SAAS,IAAA,CAAK;AAAA,EACnB,QAAA;AAAA,EACA,GAAA,GAAM,KAAA;AAAA,EACN,IAAA,GAAO,KAAA;AAAA,EACP,IAAA,GAAO,KAAA;AAAA,EACP,MAAA,GAAS,MAAA;AAAA,EACT,MAAA,GAAS,KAAA;AAAA,EACT,UAAA,GAAa,KAAA;AAAA,EACb,YAAA,GAAe,EAAA;AAAA,EACf,UAAA,GAAa,EAAA;AAAA,EACb,aAAA,GAAgB,EAAA;AAAA,EAChB,SAAA,GAAY,EAAA;AAAA,EACZ,iBAAiB,EAAC;AAAA,EAClB;AACF,CAAA,EAAc;AACZ,EAAA,MAAM,kBAAA,GAAqB,oBAAA;AAAA,IACzB,cAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM,QAAA,GACJ,GAAA,KAAQ,IAAA,GACJ,qBAAA,GACA,UAAA,CAAW,QAAA,CAAS,GAAkB,CAAA,GACpC,KAAA,CAAM,GAAkB,CAAA,GACxB,GAAA,IAAO,MAAA;AACf,EAAA,MAAM,SAAA,GAAY,IAAA,KAAS,IAAA,GAAO,UAAA,GAAa,IAAA,IAAQ,MAAA;AACvD,EAAA,MAAM,KAAA,GAAQ;AAAA,IACZ,QAAA,GAAW,CAAA,gBAAA,EAAmB,QAAQ,CAAA,CAAA,GAAK,EAAA;AAAA,IAC3C,SAAA,GAAY,CAAA,iBAAA,EAAoB,SAAS,CAAA,CAAA,GAAK;AAAA,GAChD,CACG,MAAA,CAAO,OAAO,CAAA,CACd,KAAK,GAAG,CAAA;AAEX,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,kBAAA;AAAA,MACJ,KAAA,EAAO,CAAA,SAAA,EAAY,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACpC,gBAAA,EAAe,MAAA;AAAA,MACf,UAAA,EAAU,MAAA,CAAO,OAAA,CAAQ,GAAG,CAAC,CAAA;AAAA,MAC7B,WAAA,EAAW,MAAA,CAAO,OAAA,CAAQ,IAAI,CAAC,CAAA;AAAA,MAC/B,WAAA,EAAW,OAAO,MAAA,GAAS,MAAA;AAAA,MAC3B,cAAA,EAAc,oBAAoB,MAAM,CAAA;AAAA,MACxC,cAAA,EAAc,kBAAkB,MAAM,CAAA;AAAA,MACtC,iBAAA,EAAiB,OAAO,UAAU,CAAA;AAAA,MAClC,iBAAe,YAAA,IAAgB,MAAA;AAAA,MAC/B,oBAAkB,UAAA,IAAc,MAAA;AAAA,MAChC,uBAAqB,aAAA,IAAiB,MAAA;AAAA,MACtC,OAAO,KAAA,IAAS,MAAA;AAAA,MAChB,IAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ","file":"chunk-3NBL3OUQ.js","sourcesContent":["import {\n type CssFlex,\n type CssFlexKeyword,\n type CssLength,\n space,\n type UiSpaceName,\n} from './css-values.js';\nimport type { DividerSides, Sides } from './divider-sides.js';\nimport { filterDataAttributes } from './extension-attributes.js';\nimport {\n type HorizontalAlignment,\n horizontalAlignment,\n type ListVerticalAlignment,\n verticalAlignment,\n} from './flex-alignment.js';\nimport type { KerfUiContent } from './semantic-content.js';\n\nconst listProtectedAttributes = new Set([\n 'data-component',\n 'data-gap',\n 'data-flex',\n 'data-fill',\n 'data-h-align',\n 'data-v-align',\n 'data-scrollable',\n 'data-text-insets',\n 'data-control-insets',\n]);\n\ntype ListRootAttributes = Readonly<\n Record<`data-${string}`, string | undefined> & {\n 'data-component'?: never;\n 'data-gap'?: never;\n 'data-flex'?: never;\n 'data-fill'?: never;\n 'data-h-align'?: never;\n 'data-v-align'?: never;\n 'data-scrollable'?: never;\n 'data-text-insets'?: never;\n 'data-control-insets'?: never;\n }\n>;\n\nconst spaceNames: readonly UiSpaceName[] = [\n 'none',\n '2xs',\n 'xs',\n 's',\n 'm',\n 'l',\n 'xl',\n];\n\nexport interface ListProps {\n children?: KerfUiContent;\n /** Use the standard item gap, a named UI spacing token, or a typed CSS length. Defaults to no gap. */\n gap?: boolean | UiSpaceName | CssLength;\n /** Allow this list to grow/shrink, use a keyword, or supply a typed CSS flex shorthand. */\n flex?: boolean | CssFlexKeyword | CssFlex;\n /**\n * Fill the height of a parent with a definite height, such as an app root or\n * a fixed-height frame, when this list is that parent's layout root. Inside a\n * flex layout use `flex` instead. Defaults to false.\n */\n fill?: boolean;\n /** Horizontal alignment. Defaults to full to preserve stretch-aligned list children. */\n hAlign?: HorizontalAlignment;\n /** Vertical distribution. Defaults to top. */\n vAlign?: ListVerticalAlignment;\n /** Own vertical scrolling and overscroll containment. */\n scrollable?: boolean;\n /** Physical divider edges in canonical top/right/bottom/left order. */\n dividerSides?: DividerSides;\n /** Physical sides that receive the standard 17px text inset. */\n textInsets?: Sides;\n /** Physical sides that receive the standard 8px control inset. Text insets win on overlap. */\n controlInsets?: Sides;\n className?: string;\n /** Safe `data-*` metadata; List-owned structural attributes remain protected. */\n rootAttributes?: ListRootAttributes;\n /** Native named-slot assignment when composed inside a web component. */\n slot?: string;\n}\n\n/** A stretch-aligned vertical stack with optional gap, flex, fill, scroll, and dividers. */\nexport function List({\n children,\n gap = false,\n flex = false,\n fill = false,\n hAlign = 'full',\n vAlign = 'top',\n scrollable = false,\n dividerSides = '',\n textInsets = '',\n controlInsets = '',\n className = '',\n rootAttributes = {},\n slot,\n}: ListProps) {\n const safeRootAttributes = filterDataAttributes(\n rootAttributes,\n listProtectedAttributes,\n );\n const gapValue =\n gap === true\n ? 'var(--kui-list-gap)'\n : spaceNames.includes(gap as UiSpaceName)\n ? space(gap as UiSpaceName)\n : gap || undefined;\n const flexValue = flex === true ? '1 1 auto' : flex || undefined;\n const style = [\n gapValue ? `--_kui-list-gap:${gapValue}` : '',\n flexValue ? `--_kui-list-flex:${flexValue}` : '',\n ]\n .filter(Boolean)\n .join(';');\n\n return (\n <div\n {...safeRootAttributes}\n class={`kui-list ${className}`.trim()}\n data-component=\"list\"\n data-gap={String(Boolean(gap))}\n data-flex={String(Boolean(flex))}\n data-fill={fill ? 'true' : undefined}\n data-h-align={horizontalAlignment(hAlign)}\n data-v-align={verticalAlignment(vAlign)}\n data-scrollable={String(scrollable)}\n divider-sides={dividerSides || undefined}\n data-text-insets={textInsets || undefined}\n data-control-insets={controlInsets || undefined}\n style={style || undefined}\n slot={slot}\n >\n {children}\n </div>\n );\n}\n\nexport type {\n CssFlex,\n CssFlexKeyword,\n CssLength,\n UiSpaceName,\n} from './css-values.js';\nexport type { DividerSides, Sides } from './divider-sides.js';\nexport type {\n HorizontalAlignment,\n ListVerticalAlignment,\n VerticalAlignment,\n} from './flex-alignment.js';\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/popup-menu.tsx"],"names":[],"mappings":"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","file":"chunk-4BIMLITI.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport type { KerfUiContent } from './semantic-content.js';\n\nexport type PopupMenuPlacement =\n 'bottom-start' | 'bottom' | 'bottom-end' | 'top-start' | 'top' | 'top-end';\n\ntype PopupMenuDataAttributes = Readonly<\n Record<`data-${string}`, string | undefined> & {\n 'data-action'?: never;\n 'data-component'?: never;\n 'data-key'?: never;\n 'data-morph-skip-children'?: never;\n }\n>;\n\n/** One command in the menu. */\nexport interface PopupMenuItem {\n kind?: 'item';\n label: string;\n /** Delegated `data-action` the app handles when the item is chosen. */\n action?: string;\n /** Native `wa-dropdown-item` value, reported by its `wa-select` event. */\n value?: string;\n /** Leading icon, typically a `LucideIcon`; it is placed in the item's icon slot. */\n icon?: SafeHtml;\n disabled?: boolean;\n /** Application `data-*` metadata such as a record id. */\n attributes?: PopupMenuDataAttributes;\n}\n\n/** A labeled group heading; items that follow it belong to the group. */\nexport interface PopupMenuHeading {\n kind: 'heading';\n label: string;\n}\n\n/** A separator between groups of items. */\nexport interface PopupMenuDivider {\n kind: 'divider';\n}\n\nexport type PopupMenuEntry =\n PopupMenuItem | PopupMenuHeading | PopupMenuDivider;\n\ntype PopupMenuTriggerName =\n | {\n /** Visible trigger text, which is also its accessible name. */\n text: string;\n label?: never;\n }\n | {\n text?: never;\n /**\n * Accessible name of an icon-only trigger, rendered as visually hidden\n * slotted text (a Web Awesome button takes its name from its content).\n */\n label: string;\n };\n\nexport type PopupMenuProps = PopupMenuTriggerName & {\n /** Trigger icon, typically a `LucideIcon`, before any visible text. */\n icon?: KerfUiContent;\n items: readonly PopupMenuEntry[];\n /** Where the menu opens relative to its trigger. Defaults to `bottom-start`. */\n placement?: PopupMenuPlacement;\n /** Show the disclosure caret after the trigger content. Defaults to true. */\n caret?: boolean;\n disabled?: boolean;\n /** Application `data-*` metadata on the menu root. */\n rootAttributes?: PopupMenuDataAttributes;\n /** Native named-slot assignment when composed inside a web component. */\n slot?: string;\n};\n\n/** A short, stable FNV-1a digest of the trigger and item structure. */\nfunction contentKey(parts: readonly string[]): string {\n let hash = 0x811c9dc5;\n for (const character of parts.join('\\u0000')) {\n hash ^= character.codePointAt(0)!;\n hash = Math.imul(hash, 0x01000193);\n }\n return (hash >>> 0).toString(36);\n}\n\nfunction entryKey(entry: PopupMenuEntry): string {\n if (entry.kind === 'divider') return '-';\n if (entry.kind === 'heading') return `#${entry.label}`;\n return [\n entry.label,\n entry.action ?? '',\n entry.value ?? '',\n entry.disabled ? '1' : '0',\n String(entry.icon ?? ''),\n JSON.stringify(entry.attributes ?? {}),\n ].join('\\u0001');\n}\n\nfunction renderEntry(entry: PopupMenuEntry) {\n if (entry.kind === 'divider') return <wa-divider></wa-divider>;\n // Web Awesome styles a slotted heading as a menu group label.\n if (entry.kind === 'heading') return <h3>{entry.label}</h3>;\n return (\n <wa-dropdown-item\n {...(entry.attributes ?? {})}\n data-action={entry.action}\n value={entry.value}\n disabled={entry.disabled}\n >\n {entry.icon ? <span slot=\"icon\">{entry.icon}</span> : null}\n {entry.label}\n </wa-dropdown-item>\n );\n}\n\n/**\n * An action menu: a trigger button that opens a list of commands. Renders the\n * `wa-dropdown` root directly, so a `single` `ToolbarControlGroup` (with\n * `nestedDropdown`) or a `PopupSurface` sizes and insets it as usual. Items\n * dispatch through delegated `data-action`s; the app owns the commands and any\n * open-state reaction. Import `@kerfjs/ui/popup-menu/register` once to register\n * the Web Awesome elements.\n */\nexport function PopupMenu({\n text,\n label,\n icon,\n items,\n placement = 'bottom-start',\n caret = true,\n disabled = false,\n rootAttributes = {},\n slot,\n}: PopupMenuProps) {\n // Web Awesome owns the trigger and item DOM once upgraded, so the morph\n // skips the children; the content key rebuilds the menu when they change.\n const key = `kui-popup-menu-${contentKey([\n text ?? '',\n label ?? '',\n String(icon ?? ''),\n String(caret),\n String(disabled),\n ...items.map(entryKey),\n ])}`;\n return (\n <wa-dropdown\n {...rootAttributes}\n class=\"kui-popup-menu\"\n data-component=\"popup-menu\"\n data-key={key}\n data-morph-skip-children\n placement={placement}\n slot={slot}\n >\n <wa-button\n slot=\"trigger\"\n appearance=\"plain\"\n with-caret={caret}\n disabled={disabled}\n >\n {icon}\n {text ? (\n <span>{text}</span>\n ) : (\n <span class=\"kui-popup-menu__label\">{label}</span>\n )}\n </wa-button>\n {items.map(renderEntry)}\n </wa-dropdown>\n );\n}\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/row.tsx"],"names":[],"mappings":";;;;;AAiBA,IAAM,sBAAA,uBAA6B,GAAA,CAAI;AAAA,EACrC,gBAAA;AAAA,EACA,cAAA;AAAA,EACA,cAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA,kBAAA;AAAA,EACA;AACF,CAAC,CAAA;AAeD,IAAM,UAAA,GAAqC;AAAA,EACzC,MAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,GAAA;AAAA,EACA,GAAA;AAAA,EACA,GAAA;AAAA,EACA;AACF,CAAA;AAgCO,SAAS,GAAA,CAAI;AAAA,EAClB,QAAA;AAAA,EACA,MAAA,GAAS,MAAA;AAAA,EACT,MAAA,GAAS,MAAA;AAAA,EACT,GAAA,GAAM,IAAA;AAAA,EACN,IAAA,GAAO,KAAA;AAAA,EACP,IAAA,GAAO,KAAA;AAAA,EACP,IAAA,GAAO,KAAA;AAAA,EACP,UAAA,GAAa,EAAA;AAAA,EACb,aAAA,GAAgB,EAAA;AAAA,EAChB,SAAA,GAAY,EAAA;AAAA,EACZ,iBAAiB,EAAC;AAAA,EAClB;AACF,CAAA,EAAa;AACX,EAAA,MAAM,kBAAA,GAAqB,oBAAA;AAAA,IACzB,cAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM,WAAW,UAAA,CAAW,QAAA,CAAS,GAAkB,CAAA,GACnD,KAAA,CAAM,GAAkB,CAAA,GACxB,GAAA;AACJ,EAAA,MAAM,SAAA,GAAY,IAAA,KAAS,IAAA,GAAO,UAAA,GAAa,IAAA,IAAQ,MAAA;AACvD,EAAA,MAAM,KAAA,GAAQ;AAAA,IACZ,kBAAkB,QAAQ,CAAA,CAAA;AAAA,IAC1B,SAAA,GAAY,CAAA,gBAAA,EAAmB,SAAS,CAAA,CAAA,GAAK;AAAA,GAC/C,CACG,MAAA,CAAO,OAAO,CAAA,CACd,KAAK,GAAG,CAAA;AAEX,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,kBAAA;AAAA,MACJ,KAAA,EAAO,CAAA,QAAA,EAAW,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACnC,gBAAA,EAAe,KAAA;AAAA,MACf,cAAA,EAAc,oBAAoB,MAAM,CAAA;AAAA,MACxC,cAAA,EAAc,kBAAkB,MAAM,CAAA;AAAA,MACtC,WAAA,EAAW,MAAA,CAAO,OAAA,CAAQ,IAAI,CAAC,CAAA;AAAA,MAC/B,WAAA,EAAW,OAAO,MAAA,GAAS,MAAA;AAAA,MAC3B,WAAA,EAAW,OAAO,IAAI,CAAA;AAAA,MACtB,oBAAkB,UAAA,IAAc,MAAA;AAAA,MAChC,uBAAqB,aAAA,IAAiB,MAAA;AAAA,MACtC,KAAA;AAAA,MACA,IAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ","file":"chunk-5I22LMCV.js","sourcesContent":["import {\n type CssFlex,\n type CssFlexKeyword,\n type CssLength,\n space,\n type UiSpaceName,\n} from './css-values.js';\nimport type { Sides } from './divider-sides.js';\nimport { filterDataAttributes } from './extension-attributes.js';\nimport {\n type HorizontalAlignment,\n horizontalAlignment,\n type VerticalAlignment,\n verticalAlignment,\n} from './flex-alignment.js';\nimport type { KerfUiContent } from './semantic-content.js';\n\nconst rowProtectedAttributes = new Set([\n 'data-component',\n 'data-h-align',\n 'data-v-align',\n 'data-flex',\n 'data-fill',\n 'data-wrap',\n 'data-text-insets',\n 'data-control-insets',\n]);\n\ntype RowRootAttributes = Readonly<\n Record<`data-${string}`, string | undefined> & {\n 'data-component'?: never;\n 'data-h-align'?: never;\n 'data-v-align'?: never;\n 'data-flex'?: never;\n 'data-fill'?: never;\n 'data-wrap'?: never;\n 'data-text-insets'?: never;\n 'data-control-insets'?: never;\n }\n>;\n\nconst spaceNames: readonly UiSpaceName[] = [\n 'none',\n '2xs',\n 'xs',\n 's',\n 'm',\n 'l',\n 'xl',\n];\n\nexport interface RowProps {\n children?: KerfUiContent;\n /** Horizontal distribution. Defaults to left. */\n hAlign?: HorizontalAlignment;\n /** Vertical alignment and wrapped-line distribution. Defaults to full. */\n vAlign?: VerticalAlignment;\n /** A named UI spacing token or typed CSS length. Defaults to xs. */\n gap?: UiSpaceName | CssLength;\n /** Allow this row to grow/shrink, use a keyword, or supply a typed CSS flex shorthand. */\n flex?: boolean | CssFlexKeyword | CssFlex;\n /**\n * Fill the height of a parent with a definite height, such as an app root or\n * a fixed-height frame, when this row is that parent's layout root. Inside a\n * flex layout use `flex` instead. Defaults to false.\n */\n fill?: boolean;\n /** Allow children to wrap onto additional lines. */\n wrap?: boolean;\n /** Physical sides that receive the standard 17px text inset. */\n textInsets?: Sides;\n /** Physical sides that receive the standard 8px control inset. Text insets win on overlap. */\n controlInsets?: Sides;\n className?: string;\n /** Safe `data-*` metadata; Row-owned structural attributes remain protected. */\n rootAttributes?: RowRootAttributes;\n /** Native named-slot assignment when composed inside a web component. */\n slot?: string;\n}\n\n/** A horizontal flex row with explicit physical-axis alignment and spacing. */\nexport function Row({\n children,\n hAlign = 'left',\n vAlign = 'full',\n gap = 'xs',\n flex = false,\n fill = false,\n wrap = false,\n textInsets = '',\n controlInsets = '',\n className = '',\n rootAttributes = {},\n slot,\n}: RowProps) {\n const safeRootAttributes = filterDataAttributes(\n rootAttributes,\n rowProtectedAttributes,\n );\n const gapValue = spaceNames.includes(gap as UiSpaceName)\n ? space(gap as UiSpaceName)\n : gap;\n const flexValue = flex === true ? '1 1 auto' : flex || undefined;\n const style = [\n `--_kui-row-gap:${gapValue}`,\n flexValue ? `--_kui-row-flex:${flexValue}` : '',\n ]\n .filter(Boolean)\n .join(';');\n\n return (\n <div\n {...safeRootAttributes}\n class={`kui-row ${className}`.trim()}\n data-component=\"row\"\n data-h-align={horizontalAlignment(hAlign)}\n data-v-align={verticalAlignment(vAlign)}\n data-flex={String(Boolean(flex))}\n data-fill={fill ? 'true' : undefined}\n data-wrap={String(wrap)}\n data-text-insets={textInsets || undefined}\n data-control-insets={controlInsets || undefined}\n style={style}\n slot={slot}\n >\n {children}\n </div>\n );\n}\n\nexport type {\n CssFlex,\n CssFlexKeyword,\n CssLength,\n UiSpaceName,\n} from './css-values.js';\nexport type { Sides } from './divider-sides.js';\nexport type {\n HorizontalAlignment,\n VerticalAlignment,\n} from './flex-alignment.js';\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/floating-toolbar.tsx"],"names":[],"mappings":";;;AAiCO,SAAS,eAAA,CAAgB;AAAA,EAC9B,QAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA,GAAW,YAAA;AAAA,EACX,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,CAAA,EAAyB;AACvB,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,qBAAA,EAAwB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAChD,gBAAA,EAAe,kBAAA;AAAA,MACf,eAAA,EAAe,QAAA;AAAA,MACf,IAAA,EAAK,SAAA;AAAA,MACL,YAAA,EAAY,KAAA;AAAA,MACZ,IAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ","file":"chunk-5NDQABWK.js","sourcesContent":["import type { KerfUiContent } from './semantic-content.js';\n\n/** Where a {@link FloatingToolbar} floats within its positioned container. */\nexport type FloatingToolbarPosition =\n 'bottom' | 'bottom-start' | 'bottom-end' | 'top' | 'top-start' | 'top-end';\n\nexport interface FloatingToolbarProps {\n /** Toolbar contents — normally one or more `ToolbarControlGroup`s. */\n children: KerfUiContent;\n /** Accessible name for the toolbar (required — it exposes `role=\"toolbar\"`). */\n label: string;\n /**\n * Corner or edge it floats to inside its nearest positioned ancestor.\n * Default: `'bottom-end'`.\n */\n position?: FloatingToolbarPosition;\n className?: string;\n /** Native named-slot assignment when composed inside a web component. */\n slot?: string;\n}\n\n/**\n * A toolbar that floats above the main content of its nearest positioned\n * ancestor — a transparent, forced-dark cluster of controls (e.g. a drawer\n * restore button) that sits over the content but NOT over dialogs or overlays\n * (it is not in the top layer). It is inset from the container edges by\n * `--kui-floating-toolbar-inset` (default `--kui-space-m`, i.e. 8px more than a\n * top toolbar's own inset); override that token, on the toolbar or an\n * ancestor, to move it. Inside a `Workbench`, `CollapsiblePanel`, or\n * `ResizableRegion` restore corner the corner owns the inset, so the toolbar\n * floats from the corner's own position. The app owns the controls and their\n * behavior — wire them with `delegate()` as usual.\n */\nexport function FloatingToolbar({\n children,\n label,\n position = 'bottom-end',\n className = '',\n slot,\n}: FloatingToolbarProps) {\n return (\n <div\n class={`kui-floating-toolbar ${className}`.trim()}\n data-component=\"floating-toolbar\"\n data-position={position}\n role=\"toolbar\"\n aria-label={label}\n slot={slot}\n >\n {children}\n </div>\n );\n}\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/list-inset-text.tsx"],"names":[],"mappings":";;;AAIA,IAAM,gCAAA,uBAAuC,GAAA,CAAI;AAAA,EAC/C,gBAAA;AAAA,EACA;AACF,CAAC,CAAA;AAoCM,SAAS,aAAA,CAAc;AAAA,EAC5B,QAAA;AAAA,EACA,KAAA;AAAA,EACA,cAAA,GAAiB,KAAA;AAAA,EACjB,SAAA,GAAY,EAAA;AAAA,EACZ,iBAAiB,EAAC;AAAA,EAClB;AACF,CAAA,EAAuB;AACrB,EAAA,MAAM,kBAAA,GAAqB,oBAAA;AAAA,IACzB,cAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM,aAAA,GAAgB,KAAA,KAAU,cAAA,GAAiB,IAAA,GAAO,MAAA,CAAA;AACxD,EAAA,MAAM,GAAA,GACJ,sBAAsB,cAAA,GAAiB,kCAAA,GAAqC,EAAE,CAAA,CAAA,EAAI,SAAS,GAAG,IAAA,EAAK;AACrG,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,kBAAA;AAAA,MACJ,KAAA,EAAO,GAAA;AAAA,MACP,gBAAA,EAAe,iBAAA;AAAA,MACf,YAAA,EAAY,aAAA;AAAA,MACZ,IAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ","file":"chunk-5OLVUEND.js","sourcesContent":["import type { Sides } from './divider-sides.js';\nimport { filterDataAttributes } from './extension-attributes.js';\nimport type { KerfUiContent } from './semantic-content.js';\n\nconst listInsetTextProtectedAttributes = new Set([\n 'data-component',\n 'data-sides',\n]);\n\ntype ListInsetTextRootAttributes = Readonly<\n Record<`data-${string}`, string | undefined> & {\n 'data-component'?: never;\n 'data-sides'?: never;\n }\n>;\n\nexport interface ListInsetTextProps {\n /** Text (or inline content) that carries no margin, border, or padding of its own. */\n children: KerfUiContent | string;\n /** Physical inset sides in canonical top/right/bottom/left order. Defaults to all sides. */\n sides?: Sides;\n /**\n * @deprecated Pass `sides=\"rl\"` instead. Keep only the horizontal geometry (inline margin, left/right border, and\n * left/right padding) and drop the vertical margin, border, and padding. Use it\n * when the text edge must still align with bordered items but the line should not\n * add its own vertical box space — tight text layout inside a content region.\n */\n horizontalOnly?: boolean;\n className?: string;\n /** Safe `data-*` metadata; component-owned structural attributes stay protected. */\n rootAttributes?: ListInsetTextRootAttributes;\n /** Native named-slot assignment when composed inside a web component. */\n slot?: string;\n}\n\n/**\n * Gives bare text the content-item geometry — an 8px inline margin, a 1px\n * transparent border, and 8px padding — so a plain string lines up with\n * bordered `.kui-content` items (its text edge lands at the same 17px inset).\n * Use it for text elements that have no margin, border, or padding of their own.\n * Pass `horizontalOnly` to keep the horizontal inset but drop the vertical box\n * space for tight text layout.\n */\nexport function ListInsetText({\n children,\n sides,\n horizontalOnly = false,\n className = '',\n rootAttributes = {},\n slot,\n}: ListInsetTextProps) {\n const safeRootAttributes = filterDataAttributes(\n rootAttributes,\n listInsetTextProtectedAttributes,\n );\n const resolvedSides = sides ?? (horizontalOnly ? 'rl' : 'trbl');\n const cls =\n `kui-list-inset-text${horizontalOnly ? ' kui-list-inset-text--horizontal' : ''} ${className}`.trim();\n return (\n <div\n {...safeRootAttributes}\n class={cls}\n data-component=\"list-inset-text\"\n data-sides={resolvedSides}\n slot={slot}\n >\n {children}\n </div>\n );\n}\n\nexport type { Sides } from './divider-sides.js';\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/pane.tsx"],"names":[],"mappings":"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","file":"chunk-7GUQYHKA.js","sourcesContent":["import { filterDataAttributes } from './extension-attributes.js';\nimport type { KerfUiContent } from './semantic-content.js';\n\n/**\n * Logical pane sides: where a {@link Pane} can show a separator and where it can\n * compensate for a device safe-area inset.\n */\nexport type PaneSeparatorSide =\n 'block-start' | 'block-end' | 'inline-start' | 'inline-end';\n\n/** Semantic root elements supported by {@link Pane}. */\nexport type PaneElement = 'article' | 'aside' | 'div' | 'main' | 'section';\n\n/** Semantic elements supported by the scrolling content slot. */\nexport type PaneContentElement = 'div' | 'main' | 'nav' | 'section';\n\nconst paneProtectedAttributes = new Set([\n 'data-component',\n 'data-separator-block-start',\n 'data-separator-block-end',\n 'data-separator-inline-start',\n 'data-separator-inline-end',\n 'data-safe-area-block-start',\n 'data-safe-area-block-end',\n 'data-safe-area-inline-start',\n 'data-safe-area-inline-end',\n]);\n\nconst allPaneSides: readonly PaneSeparatorSide[] = [\n 'block-start',\n 'block-end',\n 'inline-start',\n 'inline-end',\n];\n\ntype PaneRootAttributes = Readonly<\n Record<`data-${string}`, string | undefined> & {\n 'data-component'?: never;\n 'data-separator-block-start'?: never;\n 'data-separator-block-end'?: never;\n 'data-separator-inline-start'?: never;\n 'data-separator-inline-end'?: never;\n 'data-safe-area-block-start'?: never;\n 'data-safe-area-block-end'?: never;\n 'data-safe-area-inline-start'?: never;\n 'data-safe-area-inline-end'?: never;\n }\n>;\n\nexport interface PaneProps {\n /** Optional fixed chrome above the scrolling content, arranged vertically. */\n header?: KerfUiContent;\n /** The pane's primary vertical, scrolling content stack. */\n children?: KerfUiContent;\n /** Optional fixed chrome below the scrolling content. */\n footer?: KerfUiContent;\n /** Root semantics. Defaults to `div`. */\n element?: PaneElement;\n /** Scrolling content semantics. Defaults to `div`. */\n contentElement?: PaneContentElement;\n /** Independent logical-edge separator lines. Defaults to none. */\n separators?: readonly PaneSeparatorSide[];\n /**\n * Sides on which the pane may compensate for a device safe-area inset.\n * Defaults to every side: the pane pads its slots for each side that still\n * reaches an unsafe screen edge, as its surrounding layout reports, while its\n * background and separators paint through. List only the sides an app-owned\n * layout places at a screen edge, or pass `[]` to opt out.\n */\n safeAreaEdges?: readonly PaneSeparatorSide[];\n id?: string;\n /** Accessible name for a landmark root such as `aside` or `main`. */\n label?: string;\n /** Accessible name for a landmark scrolling slot such as `nav`. */\n contentLabel?: string;\n className?: string;\n headerClassName?: string;\n contentClassName?: string;\n footerClassName?: string;\n /** Safe `data-*` metadata; Pane-owned structural attributes remain protected. */\n rootAttributes?: PaneRootAttributes;\n /** Native named-slot assignment when composed inside a web component. */\n slot?: string;\n}\n\nfunction paneContent(\n element: PaneContentElement,\n children: KerfUiContent,\n className: string,\n label: string | undefined,\n) {\n const attributes = {\n class: `kui-pane__content kui-content ${className}`.trim(),\n 'aria-label': label,\n };\n if (element === 'main') return <main {...attributes}>{children}</main>;\n if (element === 'nav') return <nav {...attributes}>{children}</nav>;\n if (element === 'section')\n return <section {...attributes}>{children}</section>;\n return <div {...attributes}>{children}</div>;\n}\n\n/**\n * An unpadded application column with optional fixed header/footer slots and one\n * scrolling vertical content owner. Separator lines are independently opt-in on\n * each logical edge, so the same component works as a sidebar, main area,\n * inspector, or dialog column.\n */\nexport function Pane({\n header,\n children,\n footer,\n element = 'div',\n contentElement = 'div',\n separators = [],\n safeAreaEdges = allPaneSides,\n id,\n label,\n contentLabel,\n className = '',\n headerClassName = '',\n contentClassName = '',\n footerClassName = '',\n rootAttributes = {},\n slot,\n}: PaneProps) {\n const safeRootAttributes = filterDataAttributes(\n rootAttributes,\n paneProtectedAttributes,\n );\n const content = paneContent(\n contentElement,\n children,\n contentClassName,\n contentLabel,\n );\n const body = (\n <>\n {header === undefined ? null : (\n <header\n class={`kui-pane__header kui-pane__toolbar ${headerClassName}`.trim()}\n >\n {header}\n </header>\n )}\n {content}\n {footer === undefined ? null : (\n <footer class={`kui-pane__footer ${footerClassName}`.trim()}>\n {footer}\n </footer>\n )}\n </>\n );\n const attributes = {\n ...safeRootAttributes,\n class: `kui-pane ${className}`.trim(),\n id,\n 'data-component': 'pane',\n 'data-separator-block-start': String(separators.includes('block-start')),\n 'data-separator-block-end': String(separators.includes('block-end')),\n 'data-separator-inline-start': String(separators.includes('inline-start')),\n 'data-separator-inline-end': String(separators.includes('inline-end')),\n 'data-safe-area-block-start': String(safeAreaEdges.includes('block-start')),\n 'data-safe-area-block-end': String(safeAreaEdges.includes('block-end')),\n 'data-safe-area-inline-start': String(\n safeAreaEdges.includes('inline-start'),\n ),\n 'data-safe-area-inline-end': String(safeAreaEdges.includes('inline-end')),\n 'aria-label': label,\n slot,\n };\n\n if (element === 'article') return <article {...attributes}>{body}</article>;\n if (element === 'aside') return <aside {...attributes}>{body}</aside>;\n if (element === 'main') return <main {...attributes}>{body}</main>;\n if (element === 'section') return <section {...attributes}>{body}</section>;\n return <div {...attributes}>{body}</div>;\n}\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/list-inset-control.tsx"],"names":[],"mappings":";;;AAmBO,SAAS,gBAAA,CAAiB;AAAA,EAC/B,QAAA;AAAA,EACA,KAAA,GAAQ,MAAA;AAAA,EACR,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,CAAA,EAA0B;AACxB,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,uBAAA,EAA0B,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAClD,gBAAA,EAAe,oBAAA;AAAA,MACf,YAAA,EAAY,KAAA;AAAA,MACZ,IAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ","file":"chunk-D7GWXIAS.js","sourcesContent":["import type { Sides } from './divider-sides.js';\nimport type { KerfUiContent } from './semantic-content.js';\n\nexport interface ListInsetControlProps {\n /** Control(s) that own their own border and padding (e.g. an input, a `wa-*`). */\n children: KerfUiContent;\n /** Physical inset sides in canonical top/right/bottom/left order. Defaults to all sides. */\n sides?: Sides;\n className?: string;\n /** Native named-slot assignment when composed inside a web component. */\n slot?: string;\n}\n\n/**\n * Insets a control into a pane/list content region: an 8px inline margin (so its\n * edges line up with `.kui-content` items) and a stretch flex row with an 8px gap.\n * Use it for controls that carry their own border and padding but no outer margin\n * — the wrapper adds only the alignment margin and layout, not a second inset.\n */\nexport function ListInsetControl({\n children,\n sides = 'trbl',\n className = '',\n slot,\n}: ListInsetControlProps) {\n return (\n <div\n class={`kui-list-inset-control ${className}`.trim()}\n data-component=\"list-inset-control\"\n data-sides={sides}\n slot={slot}\n >\n {children}\n </div>\n );\n}\n\nexport type { Sides } from './divider-sides.js';\n"]}
|
package/dist/chunk-DQA5FMOX.js
DELETED
|
@@ -1,85 +0,0 @@
|
|
|
1
|
-
import { ToolbarText } from './chunk-TZ5IHWB2.js';
|
|
2
|
-
import { jsxs, jsx } from 'kerfjs/jsx-runtime';
|
|
3
|
-
|
|
4
|
-
function NavStack({
|
|
5
|
-
id,
|
|
6
|
-
label,
|
|
7
|
-
views,
|
|
8
|
-
backLabel = "Back",
|
|
9
|
-
hideToolbar = false,
|
|
10
|
-
bottomToolbar,
|
|
11
|
-
className = "",
|
|
12
|
-
slot
|
|
13
|
-
}) {
|
|
14
|
-
const topIndex = views.length - 1;
|
|
15
|
-
const top = views[topIndex];
|
|
16
|
-
const canPop = views.length > 1;
|
|
17
|
-
return /* @__PURE__ */ jsxs(
|
|
18
|
-
"section",
|
|
19
|
-
{
|
|
20
|
-
class: `kui-nav-stack ${className}`.trim(),
|
|
21
|
-
id,
|
|
22
|
-
"data-component": "nav-stack",
|
|
23
|
-
"data-nav-stack-id": id,
|
|
24
|
-
"data-depth": String(views.length),
|
|
25
|
-
"aria-label": label,
|
|
26
|
-
slot,
|
|
27
|
-
children: [
|
|
28
|
-
!hideToolbar && /* @__PURE__ */ jsxs("header", { class: "kui-nav-stack__chrome", "data-nav-stack-chrome": true, children: [
|
|
29
|
-
/* @__PURE__ */ jsxs("div", { class: "kui-nav-stack__lead", children: [
|
|
30
|
-
canPop && /* @__PURE__ */ jsx(
|
|
31
|
-
"button",
|
|
32
|
-
{
|
|
33
|
-
type: "button",
|
|
34
|
-
class: "kui-nav-stack__back",
|
|
35
|
-
"data-nav-back": true,
|
|
36
|
-
"aria-label": backLabel,
|
|
37
|
-
children: /* @__PURE__ */ jsx(
|
|
38
|
-
"svg",
|
|
39
|
-
{
|
|
40
|
-
class: "kui-nav-stack__back-icon",
|
|
41
|
-
viewBox: "0 0 24 24",
|
|
42
|
-
width: "18",
|
|
43
|
-
height: "18",
|
|
44
|
-
"aria-hidden": "true",
|
|
45
|
-
fill: "none",
|
|
46
|
-
stroke: "currentColor",
|
|
47
|
-
"stroke-width": "2",
|
|
48
|
-
"stroke-linecap": "round",
|
|
49
|
-
"stroke-linejoin": "round",
|
|
50
|
-
children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" })
|
|
51
|
-
}
|
|
52
|
-
)
|
|
53
|
-
}
|
|
54
|
-
),
|
|
55
|
-
/* @__PURE__ */ jsx(
|
|
56
|
-
ToolbarText,
|
|
57
|
-
{
|
|
58
|
-
text: top?.title ?? "",
|
|
59
|
-
size: "large",
|
|
60
|
-
className: "kui-nav-stack__title"
|
|
61
|
-
}
|
|
62
|
-
)
|
|
63
|
-
] }),
|
|
64
|
-
top?.toolbar && /* @__PURE__ */ jsx("div", { class: "kui-nav-stack__actions", children: top.toolbar })
|
|
65
|
-
] }),
|
|
66
|
-
/* @__PURE__ */ jsx("div", { class: "kui-nav-stack__viewport", "data-nav-stack-viewport": true, children: views.map((view, index) => /* @__PURE__ */ jsx(
|
|
67
|
-
"article",
|
|
68
|
-
{
|
|
69
|
-
class: "kui-nav-stack__view",
|
|
70
|
-
"data-key": view.key,
|
|
71
|
-
"data-nav-key": view.key,
|
|
72
|
-
"data-nav-active": String(index === topIndex),
|
|
73
|
-
"aria-hidden": String(index !== topIndex),
|
|
74
|
-
children: view.content
|
|
75
|
-
}
|
|
76
|
-
)) }),
|
|
77
|
-
(top?.bottomToolbar ?? bottomToolbar) && /* @__PURE__ */ jsx("footer", { class: "kui-nav-stack__bottom", "data-nav-stack-bottom": true, children: top?.bottomToolbar ?? bottomToolbar })
|
|
78
|
-
]
|
|
79
|
-
}
|
|
80
|
-
);
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
export { NavStack };
|
|
84
|
-
|
|
85
|
-
//# sourceMappingURL=chunk-DQA5FMOX.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/nav-stack.tsx"],"names":[],"mappings":"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","file":"chunk-DQA5FMOX.js","sourcesContent":["import type { KerfUiContent } from './semantic-content.js';\nimport { ToolbarText } from './toolbar-text.js';\n\n/**\n * One entry in a {@link NavStack}. The app owns the stack as an array (usually a\n * signal); `NavStack` renders it and `wireNavStack` animates the transitions.\n */\nexport interface NavStackView {\n /** Stable identity for keyed reconcile and transition direction. */\n key: string;\n content: KerfUiContent;\n /** Title shown in the top toolbar for this view. */\n title?: string;\n /** Trailing actions for this view's top toolbar. */\n toolbar?: KerfUiContent;\n /** Bottom toolbar for this view. Cross-fades with the top chrome on navigation. */\n bottomToolbar?: KerfUiContent;\n}\n\nexport interface NavStackProps {\n id: string;\n /** Accessible name for the stack region. */\n label: string;\n /** The stack, root first; the last entry is the active top view. */\n views: NavStackView[];\n /** Accessible label for the back control (default \"Back\"). */\n backLabel?: string;\n /** Hide the top toolbar entirely (rare — a fully custom-chrome view). */\n hideToolbar?: boolean;\n /** Optional persistent bottom toolbar used when the active view does not provide one. */\n bottomToolbar?: KerfUiContent;\n className?: string;\n /** Native named-slot assignment when composed inside a web component. */\n slot?: string;\n}\n\n/**\n * A navigation stack (iOS-style push/pop). Renders every entry stacked, the last\n * one active; `@kerfjs/ui/wire-nav-stack`'s `wireNavStack` slides the content and\n * cross-fades the chrome across a change. A single-pane layout is a `NavStack`\n * with one entry. See `docs/23-app-layouts.md` §3.1.\n */\nexport function NavStack({\n id,\n label,\n views,\n backLabel = 'Back',\n hideToolbar = false,\n bottomToolbar,\n className = '',\n slot,\n}: NavStackProps) {\n const topIndex = views.length - 1;\n const top = views[topIndex];\n const canPop = views.length > 1;\n return (\n <section\n class={`kui-nav-stack ${className}`.trim()}\n id={id}\n data-component=\"nav-stack\"\n data-nav-stack-id={id}\n data-depth={String(views.length)}\n aria-label={label}\n slot={slot}\n >\n {!hideToolbar && (\n <header class=\"kui-nav-stack__chrome\" data-nav-stack-chrome>\n <div class=\"kui-nav-stack__lead\">\n {canPop && (\n <button\n type=\"button\"\n class=\"kui-nav-stack__back\"\n data-nav-back\n aria-label={backLabel}\n >\n <svg\n class=\"kui-nav-stack__back-icon\"\n viewBox=\"0 0 24 24\"\n width=\"18\"\n height=\"18\"\n aria-hidden=\"true\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <path d=\"m15 18-6-6 6-6\" />\n </svg>\n </button>\n )}\n <ToolbarText\n text={top?.title ?? ''}\n size=\"large\"\n className=\"kui-nav-stack__title\"\n />\n </div>\n {top?.toolbar && (\n <div class=\"kui-nav-stack__actions\">{top.toolbar}</div>\n )}\n </header>\n )}\n <div class=\"kui-nav-stack__viewport\" data-nav-stack-viewport>\n {views.map((view, index) => (\n <article\n class=\"kui-nav-stack__view\"\n data-key={view.key}\n data-nav-key={view.key}\n data-nav-active={String(index === topIndex)}\n aria-hidden={String(index !== topIndex)}\n >\n {view.content}\n </article>\n ))}\n </div>\n {(top?.bottomToolbar ?? bottomToolbar) && (\n <footer class=\"kui-nav-stack__bottom\" data-nav-stack-bottom>\n {top?.bottomToolbar ?? bottomToolbar}\n </footer>\n )}\n </section>\n );\n}\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/workbench-toolbars.tsx","../src/workbench.tsx"],"names":["jsx","jsxs"],"mappings":"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","file":"chunk-EAX2GSS4.js","sourcesContent":["import { FloatingToolbar } from './floating-toolbar.js';\nimport { List } from './list.js';\nimport { Pane } from './pane.js';\nimport {\n composedPanelToolbar,\n type PanelSide,\n type PanelToggle,\n type PanelToggleAttributes,\n type PanelToolbar,\n relocatedPanelGroups,\n} from './panel-toolbar.js';\nimport type { KerfUiContent } from './semantic-content.js';\nimport { Toolbar, type ToolbarProps } from './toolbar.js';\nimport {\n type WorkbenchPanelKey,\n workbenchRegionId,\n} from './workbench-resize.js';\n\n/** The standard toggle a Workbench renders for a panel (see {@link PanelToggle}). */\nexport type WorkbenchPanelToggle = PanelToggle;\n\n/**\n * A Workbench panel's top toolbar, composed by the Workbench so its groups can\n * follow the panel's open state (see {@link PanelToolbar} for the roles).\n * A collapsed rail's `constant` groups and toggle go to the leading edge of\n * `mainToolbar` (left rail) or its trailing edge (right rail); a collapsed\n * drawer's go to the trailing edge of `mainBottomToolbar`, else to a\n * `FloatingToolbar` in the work area's bottom-end corner.\n */\nexport type WorkbenchPanelToolbar = PanelToolbar;\n\n/** The work area's top toolbar; collapsed rails add their groups to it. */\nexport interface WorkbenchMainToolbar {\n label: string;\n /** The work area's title, usually an extra-large `ToolbarText`. */\n title?: KerfUiContent;\n /** Groups after the title. */\n leading?: KerfUiContent;\n center?: KerfUiContent;\n /** Groups at the trailing edge, before a collapsed right rail's groups. */\n trailing?: KerfUiContent;\n /** The toolbar's narrow-width policy (see `Toolbar.responsive`). */\n responsive?: ToolbarProps['responsive'];\n responsiveAt?: ToolbarProps['responsiveAt'];\n}\n\n/** The work area's bottom toolbar; a collapsed drawer adds its groups to it. */\nexport interface WorkbenchMainBottomToolbar {\n label: string;\n leading?: KerfUiContent;\n trailing?: KerfUiContent;\n}\n\nconst SIDES: Record<WorkbenchPanelKey, PanelSide> = {\n leftRail: 'left',\n rightRail: 'right',\n bottomDrawer: 'bottom',\n};\n\n/** A panel as far as its toolbar is concerned. */\nexport interface WorkbenchToolbarPanel {\n toolbar?: WorkbenchPanelToolbar;\n footer?: KerfUiContent;\n content: KerfUiContent;\n collapsed?: boolean;\n}\n\n/** A Workbench toggle's wiring hooks: its side, morph key, and panel. */\nconst toggleAttributes = (\n workbenchId: string,\n key: WorkbenchPanelKey,\n): PanelToggleAttributes => ({\n 'data-workbench-toggle': SIDES[key],\n // Keyed, so the morph removes a toggle that leaves a toolbar instead of\n // reusing its (possibly focused) button for a different control.\n 'data-key': `${workbenchRegionId(workbenchId, key)}-toggle`,\n 'aria-controls': workbenchRegionId(workbenchId, key),\n});\n\n/**\n * The groups a collapsed panel hands to the work area: its `constant` groups,\n * then its toggle. Empty while the panel is open or has no toolbar.\n */\nexport function relocatedGroups(\n workbenchId: string,\n key: WorkbenchPanelKey,\n panel: WorkbenchToolbarPanel | undefined,\n): KerfUiContent[] {\n return relocatedPanelGroups(\n panel?.toolbar,\n SIDES[key],\n Boolean(panel?.collapsed),\n toggleAttributes(workbenchId, key),\n );\n}\n\n/**\n * A panel's content, wrapped in a `Pane` under its composed toolbar when it\n * has one (with its optional `footer` below). Without a toolbar the content\n * renders as given.\n */\nexport function panelBody(\n workbenchId: string,\n key: WorkbenchPanelKey,\n panel: WorkbenchToolbarPanel,\n) {\n const toolbar = panel.toolbar;\n if (!toolbar) return panel.content;\n return (\n <Pane\n header={composedPanelToolbar(\n toolbar,\n SIDES[key],\n Boolean(panel.collapsed),\n toggleAttributes(workbenchId, key),\n )}\n footer={panel.footer}\n >\n {panel.content}\n </Pane>\n );\n}\n\n/**\n * The work area: the app's `main` under `mainToolbar` (and above\n * `mainBottomToolbar`), with each collapsed panel's groups added to the\n * toolbar on its side. Without either toolbar, `main` renders as given.\n */\n/**\n * Whether the work area's header or footer chrome stays pinned (`fixed`) or\n * scrolls away with the content (`scroll`).\n */\nexport type WorkbenchChromePlacement = 'fixed' | 'scroll';\n\nexport function mainBody({\n workbenchId,\n main,\n mainToolbar,\n mainHeader,\n mainFooter,\n mainBottomToolbar,\n mainHeaderPlacement = 'fixed',\n mainFooterPlacement = 'fixed',\n leftRail,\n rightRail,\n bottomDrawer,\n}: {\n workbenchId: string;\n main: KerfUiContent;\n mainToolbar?: WorkbenchMainToolbar;\n mainHeader?: KerfUiContent;\n mainFooter?: KerfUiContent;\n mainBottomToolbar?: WorkbenchMainBottomToolbar;\n mainHeaderPlacement?: WorkbenchChromePlacement;\n mainFooterPlacement?: WorkbenchChromePlacement;\n leftRail?: WorkbenchToolbarPanel;\n rightRail?: WorkbenchToolbarPanel;\n bottomDrawer?: WorkbenchToolbarPanel;\n}) {\n if (!mainToolbar && !mainBottomToolbar && !mainHeader && !mainFooter)\n return main;\n const left = relocatedGroups(workbenchId, 'leftRail', leftRail);\n const right = relocatedGroups(workbenchId, 'rightRail', rightRail);\n const drawer = mainBottomToolbar\n ? relocatedGroups(workbenchId, 'bottomDrawer', bottomDrawer)\n : [];\n // One divider under the header chrome and one over the footer chrome,\n // wherever that chrome ends.\n const header =\n !mainToolbar && !mainHeader ? undefined : (\n <>\n {mainToolbar ? (\n <Toolbar\n label={mainToolbar.label}\n dividerSides={mainHeader ? '' : 'b'}\n responsive={mainToolbar.responsive}\n responsiveAt={mainToolbar.responsiveAt}\n leading={\n <>\n {left}\n {mainToolbar.title}\n {mainToolbar.leading}\n </>\n }\n center={mainToolbar.center}\n trailing={\n <>\n {mainToolbar.trailing}\n {right}\n </>\n }\n />\n ) : null}\n {mainHeader ? <List dividerSides=\"b\">{mainHeader}</List> : null}\n </>\n );\n const footer =\n !mainFooter && !mainBottomToolbar ? undefined : (\n <>\n {mainFooter ? (\n <List dividerSides={mainBottomToolbar ? '' : 't'}>{mainFooter}</List>\n ) : null}\n {mainBottomToolbar ? (\n <Toolbar\n label={mainBottomToolbar.label}\n dividerSides={mainFooter ? '' : 't'}\n leading={mainBottomToolbar.leading}\n trailing={\n <>\n {mainBottomToolbar.trailing}\n {drawer}\n </>\n }\n />\n ) : null}\n </>\n );\n const scrollHeader = mainHeaderPlacement === 'scroll';\n const scrollFooter = mainFooterPlacement === 'scroll';\n return (\n <Pane\n header={scrollHeader ? undefined : header}\n footer={scrollFooter ? undefined : footer}\n >\n {scrollHeader || scrollFooter ? (\n // Chrome that scrolls joins the content in one gapless column that\n // fills the scroller, so it scrolls away with the content.\n <List flex>\n {scrollHeader ? header : null}\n {main}\n {scrollFooter ? footer : null}\n </List>\n ) : (\n main\n )}\n </Pane>\n );\n}\n\n/**\n * A collapsed panel's groups when the work area has no toolbar on its side\n * to take them: a `FloatingToolbar` for the panel's restore corner, so the\n * panel can always be reopened.\n */\nexport function floatingRestore(\n workbenchId: string,\n key: WorkbenchPanelKey,\n panel: WorkbenchToolbarPanel | undefined,\n hasTargetToolbar: boolean,\n) {\n if (hasTargetToolbar) return undefined;\n const groups = relocatedGroups(workbenchId, key, panel);\n if (groups.length === 0) return undefined;\n return (\n <FloatingToolbar\n label={panel!.toolbar!.label}\n position={key === 'leftRail' ? 'bottom-start' : 'bottom-end'}\n >\n {groups}\n </FloatingToolbar>\n );\n}\n","import type { SafeHtml } from 'kerfjs';\n\nimport {\n clampRegionSize,\n type ResizableRegionAxis,\n type ResizableRegionCollapseMotion,\n type ResizableRegionContentOverflow,\n type ResizableRegionEdge,\n type ResizableRegionPresentation,\n type ResizableRegionRestorePosition,\n type ResizableRegionSeparator,\n} from './resizable-region.js';\nimport { ResizeGrip } from './resize-grip.js';\nimport type { KerfUiContent } from './semantic-content.js';\nimport {\n WORKBENCH_MAIN_MIN_HEIGHT,\n WORKBENCH_MAIN_MIN_SIZE,\n WORKBENCH_RESIZE_DEFAULTS,\n type WorkbenchPanelKey,\n workbenchRegionId,\n} from './workbench-resize.js';\nimport {\n floatingRestore,\n mainBody,\n panelBody,\n type WorkbenchChromePlacement,\n type WorkbenchMainBottomToolbar,\n type WorkbenchMainToolbar,\n type WorkbenchPanelToolbar,\n} from './workbench-toolbars.js';\n\nexport type {\n WorkbenchChromePlacement,\n WorkbenchMainBottomToolbar,\n WorkbenchMainToolbar,\n WorkbenchPanelToggle,\n WorkbenchPanelToolbar,\n} from './workbench-toolbars.js';\n\n/**\n * The Workbench container breakpoint below which a panel presents as an\n * overlay: `narrow` (704px or less) or `compact` (448px or less) — the same\n * breakpoints as `ResizableRegion`'s `responsiveFillAt` — or `never` to keep\n * it inline at every width.\n */\nexport type WorkbenchResponsiveOverlayAt = 'compact' | 'narrow' | 'never';\n\n/**\n * How wide a rail's overlay is in a compact (448px or less) Workbench: `inset`\n * fills the Workbench less a dismiss margin on the side away from the rail's\n * edge, so a press beside it closes it; `full` fills the Workbench.\n */\nexport type WorkbenchCompactOverlay = 'inset' | 'full';\n\n/** Drag-resize limits for a resizable Workbench panel, in px. */\nexport interface WorkbenchPanelResizable {\n /** Smallest size (default 180 for a rail, 120 for the drawer). */\n min?: number;\n /** Largest size (default 480). */\n max?: number;\n}\n\n/** A collapsible Workbench panel — a side rail or the bottom drawer. */\nexport interface WorkbenchPanel {\n content: KerfUiContent;\n /**\n * The panel's top toolbar, composed by the Workbench: its `constant` groups\n * and standard `toggle` move to the work area's toolbar while the panel is\n * collapsed. With it, `content` renders in a `Pane` below the toolbar.\n */\n toolbar?: WorkbenchPanelToolbar;\n /** Optional bottom toolbar under a `toolbar` panel's content. */\n footer?: KerfUiContent;\n /** Whether the panel is currently collapsed (the app owns this). */\n collapsed?: boolean;\n /**\n * Rail width, or drawer height, in px. Overrides the CSS default. For a\n * resizable panel it is the current size (default 280 for a rail, 220 for\n * the drawer), clamped to the limits; the app owns it and `wireWorkbench`\n * reports each resize.\n */\n size?: number;\n /**\n * Opt in to drag and keyboard resizing on the panel's inner separator:\n * `true` for the default limits, or `{ min, max }`. Off by default. Pair it\n * with `wireWorkbench` from `@kerfjs/ui/wire-workbench`.\n */\n resizable?: boolean | WorkbenchPanelResizable;\n /** Accessible name for the panel region. */\n label?: string;\n separator?: ResizableRegionSeparator;\n collapseMotion?: ResizableRegionCollapseMotion;\n contentOverflow?: ResizableRegionContentOverflow;\n presentation?: ResizableRegionPresentation;\n /**\n * Present the panel as an overlay, without a separator, below a Workbench\n * container breakpoint, and inline above it — the CSS decides, so the app\n * needs no device-class check. A rail overlays from its side at full\n * height, over the work area and an open drawer; the bottom drawer\n * overlays the bottom of the work-area column. Rails default to `narrow`\n * (pass `never` to keep one inline); the drawer defaults to inline.\n */\n responsiveOverlayAt?: WorkbenchResponsiveOverlayAt;\n /**\n * A rail's overlay width in a compact Workbench (default `inset`: the\n * Workbench less `--kui-workbench-overlay-dismiss-margin`, 44px). Ignored\n * by the drawer.\n */\n compactOverlay?: WorkbenchCompactOverlay;\n /**\n * Control shown while collapsed, in a safe-area-aware corner of the\n * Workbench (not the viewport); the bottom drawer's sits in the work-area\n * column. Prefer `toolbar.toggle`, which the Workbench relocates into the\n * work area's toolbar (or this corner when that toolbar is absent).\n */\n restoreControl?: SafeHtml;\n restorePosition?: ResizableRegionRestorePosition;\n}\n\nexport interface WorkbenchProps {\n /**\n * The Workbench's `id`. Each panel's `id` derives from it —\n * `<id>-left-rail`, `<id>-right-rail`, `<id>-bottom-drawer` — so a toggle\n * can name the panel it shows and hides with `aria-controls`.\n */\n id: string;\n label: string;\n /** The central work area. */\n main: KerfUiContent;\n /**\n * The work area's top toolbar. A collapsed left rail's `constant` groups\n * and toggle lead it; a collapsed right rail's trail it. With it, `main`\n * renders in a `Pane` below the toolbar.\n */\n mainToolbar?: WorkbenchMainToolbar;\n /**\n * Fixed content under `mainToolbar` — supporting copy such as a\n * description — divided from the scrolling `main` below it.\n */\n mainHeader?: KerfUiContent;\n /**\n * Fixed content over `mainBottomToolbar` — a status line or a resource\n * toolbar — divided from the scrolling `main` above it.\n */\n mainFooter?: KerfUiContent;\n /**\n * The work area's bottom toolbar. A collapsed drawer's `constant` groups and\n * toggle trail it; without it they float in the work area's corner.\n */\n mainBottomToolbar?: WorkbenchMainBottomToolbar;\n /**\n * Whether `mainToolbar` and `mainHeader` stay pinned (`fixed`, default) or\n * scroll away with `main` (`scroll`) — useful where large text would leave\n * pinned chrome little room.\n */\n mainHeaderPlacement?: WorkbenchChromePlacement;\n /** The same for `mainFooter` and `mainBottomToolbar` (default `fixed`). */\n mainFooterPlacement?: WorkbenchChromePlacement;\n leftRail?: WorkbenchPanel;\n rightRail?: WorkbenchPanel;\n bottomDrawer?: WorkbenchPanel;\n /**\n * Minimum width, in px, the work area keeps beside the inline rails, fixed\n * or `resizable` (default 320; `0` turns it off). Resizing a rail stops\n * where the work area would drop below it, and inline rails shrink\n * proportionally when the Workbench gets narrower. Workbenches without a\n * rail ignore it.\n */\n mainMinSize?: number;\n /**\n * Minimum height, in px, the work area keeps above an inline bottom drawer,\n * fixed or `resizable` (default 120; `0` turns it off) — the drawer's\n * counterpart of `mainMinSize`. Resizing the drawer stops where the work\n * area would drop below it, and the drawer shrinks when the Workbench gets\n * shorter. Workbenches without a drawer ignore it.\n */\n mainMinHeight?: number;\n className?: string;\n /** Native named-slot assignment when composed inside a web component. */\n slot?: string;\n}\n\ninterface ResolvedResize {\n regionId: string;\n axis: ResizableRegionAxis;\n edge: ResizableRegionEdge;\n size: number;\n min: number;\n max: number;\n}\n\n/**\n * Each panel's separator is its inner edge. Growing the left rail moves that\n * edge toward the inline end; growing the right rail or the drawer moves it\n * toward the start — the same edge vocabulary `ResizableRegion` uses.\n */\nconst EDGES: Record<WorkbenchPanelKey, ResizableRegionEdge> = {\n leftRail: 'end',\n rightRail: 'start',\n bottomDrawer: 'start',\n};\n\nconst DEFAULT_LABELS: Record<WorkbenchPanelKey, string> = {\n leftRail: 'left rail',\n rightRail: 'right rail',\n bottomDrawer: 'bottom drawer',\n};\n\nfunction resolveResize(\n id: string,\n key: WorkbenchPanelKey,\n panel: WorkbenchPanel,\n): ResolvedResize | undefined {\n if (!panel.resizable) return undefined;\n const defaults = WORKBENCH_RESIZE_DEFAULTS[key];\n const limits = panel.resizable === true ? {} : panel.resizable;\n const min = limits.min ?? defaults.min;\n const max = Math.max(min, limits.max ?? defaults.max);\n return {\n regionId: workbenchRegionId(id, key),\n axis: key === 'bottomDrawer' ? 'vertical' : 'horizontal',\n edge: EDGES[key],\n size: clampRegionSize(panel.size ?? defaults.size, min, max),\n min,\n max,\n };\n}\n\n/** The attributes a resizable panel adds for the resize wiring to read. */\nconst resizeAttributes = (resize: ResolvedResize | undefined) =>\n resize\n ? {\n 'data-resizable': 'true',\n 'data-region-id': resize.regionId,\n 'data-axis': resize.axis,\n 'data-edge': resize.edge,\n }\n : {};\n\n/**\n * A resizable panel's size lives in the resize wiring's track property, so a\n * drag or key press resizes the panel before the app re-renders; the CSS maps\n * it onto the rail width or drawer height.\n */\nfunction panelStyle(\n panel: WorkbenchPanel,\n resize: ResolvedResize | undefined,\n sizeProperty: string,\n) {\n if (resize) return `--kui-resizable-region-size:${resize.size}px`;\n return panel.size ? `${sizeProperty}: ${panel.size}px` : undefined;\n}\n\n/**\n * The separator a resizable panel owns: the same focusable `role=\"separator\"`\n * contract a `ResizableRegion` handle carries, so one resize wiring drives\n * both. It leaves the tab order while the panel is collapsed or not inline.\n */\nfunction PanelHandle({\n panel,\n resize,\n label,\n}: {\n panel: WorkbenchPanel;\n resize: ResolvedResize;\n label: string;\n}) {\n const inert =\n Boolean(panel.collapsed) || (panel.presentation ?? 'inline') !== 'inline';\n return (\n <div\n class=\"kui-workbench__handle\"\n role=\"separator\"\n tabindex={inert ? '-1' : '0'}\n aria-label={`Resize ${label}`}\n aria-orientation={\n resize.axis === 'horizontal' ? 'vertical' : 'horizontal'\n }\n aria-valuemin={resize.min}\n aria-valuemax={resize.max}\n aria-valuenow={resize.size}\n aria-hidden={inert ? 'true' : undefined}\n data-kui-resize-handle\n data-region-id={resize.regionId}\n >\n <span class=\"kui-workbench__handle-icon\" aria-hidden=\"true\">\n <ResizeGrip axis={resize.axis} />\n </span>\n </div>\n );\n}\n\n/**\n * A collapsed panel leaves the accessibility tree as a whole, like a collapsed\n * `CollapsiblePanel`: its content and separator are already inert or hidden,\n * so the labeled landmark would otherwise stay behind, empty, for a screen\n * reader to land on. Its restore control renders outside it and stays\n * reachable.\n */\nfunction hiddenFromAccessibility(panel: WorkbenchPanel) {\n return panel.collapsed || panel.presentation === 'hidden'\n ? ('true' as const)\n : undefined;\n}\n\n/** A breakpoint's attribute value; `never` (or none) renders no attribute. */\nconst responsiveAt = (at: WorkbenchResponsiveOverlayAt | undefined) =>\n at === 'never' ? undefined : at;\n\nfunction Rail({\n id,\n side,\n panel,\n}: {\n id: string;\n side: 'left' | 'right';\n panel: WorkbenchPanel;\n}) {\n const key: WorkbenchPanelKey = side === 'left' ? 'leftRail' : 'rightRail';\n const resize = resolveResize(id, key, panel);\n return (\n <aside\n id={workbenchRegionId(id, key)}\n class={`kui-workbench__rail kui-workbench__rail--${side}`}\n data-workbench-rail={side}\n data-collapsed={String(panel.collapsed ?? false)}\n data-separator={panel.separator ?? 'auto'}\n data-collapse-motion={panel.collapseMotion ?? 'slide'}\n data-content-overflow={panel.contentOverflow ?? 'clip'}\n data-presentation={panel.presentation ?? 'inline'}\n data-responsive-overlay-at={responsiveAt(\n panel.responsiveOverlayAt ?? 'narrow',\n )}\n data-compact-overlay={panel.compactOverlay ?? 'inset'}\n {...resizeAttributes(resize)}\n aria-label={panel.label || undefined}\n aria-hidden={hiddenFromAccessibility(panel)}\n inert={Boolean(panel.collapsed)}\n style={panelStyle(panel, resize, '--kui-workbench-rail-width')}\n >\n <div\n class=\"kui-workbench__panel-content\"\n inert={Boolean(panel.collapsed)}\n >\n {panelBody(id, key, panel)}\n </div>\n {resize && (\n <PanelHandle\n panel={panel}\n resize={resize}\n label={panel.label || DEFAULT_LABELS[key]}\n />\n )}\n </aside>\n );\n}\n\nfunction Drawer({ id, panel }: { id: string; panel: WorkbenchPanel }) {\n const resize = resolveResize(id, 'bottomDrawer', panel);\n return (\n <section\n id={workbenchRegionId(id, 'bottomDrawer')}\n class=\"kui-workbench__drawer\"\n data-workbench-drawer\n data-collapsed={String(panel.collapsed ?? false)}\n data-separator={panel.separator ?? 'auto'}\n data-collapse-motion={panel.collapseMotion ?? 'slide'}\n data-content-overflow={panel.contentOverflow ?? 'clip'}\n data-presentation={panel.presentation ?? 'inline'}\n data-responsive-overlay-at={responsiveAt(panel.responsiveOverlayAt)}\n {...resizeAttributes(resize)}\n aria-label={panel.label || undefined}\n aria-hidden={hiddenFromAccessibility(panel)}\n inert={Boolean(panel.collapsed)}\n style={panelStyle(panel, resize, '--kui-workbench-drawer-height')}\n >\n <div\n class=\"kui-workbench__panel-content\"\n inert={Boolean(panel.collapsed)}\n >\n {panelBody(id, 'bottomDrawer', panel)}\n </div>\n {resize && (\n <PanelHandle\n panel={panel}\n resize={resize}\n label={panel.label || DEFAULT_LABELS.bottomDrawer}\n />\n )}\n </section>\n );\n}\n\n/** A collapsed panel's restore control, outside the clipped panel. */\nfunction restore(\n panel: WorkbenchPanel | undefined,\n side: 'left' | 'right' | 'bottom',\n position: ResizableRegionRestorePosition,\n generated: SafeHtml | undefined,\n) {\n const control = panel?.restoreControl ?? generated;\n if (!panel?.collapsed || !control || panel.presentation === 'hidden')\n return '';\n return (\n <div\n class=\"kui-workbench__restore\"\n data-panel={side}\n data-position={panel.restorePosition ?? position}\n >\n {control}\n </div>\n );\n}\n\n/**\n * The Xcode-like multi-panel workspace: a collapsible left rail, right rail, and\n * bottom drawer around a central work area (any absent). Collapsing snaps the\n * panel's track to zero in one reflow while its fixed-size content slides out via\n * a composited transform — the instant-width / sliding-content technique, so the\n * work area relayouts once, not per frame. Bottom-drawer content stays anchored\n * to the shell's stable bottom edge throughout that transition. The app owns\n * each `collapsed` flag; the collapse is pure CSS. A collapsed panel renders\n * `inert` and `aria-hidden`, so neither Tab nor assistive technology reaches\n * controls that have slid out of view or an empty landmark (its restore control\n * lives outside it and stays reachable). A panel may opt in to drag and keyboard resizing with\n * `resizable`, which `wireWorkbench` drives. See `docs/23-app-layouts.md` §3.3.\n */\nexport function Workbench({\n id,\n label,\n main,\n leftRail,\n rightRail,\n bottomDrawer,\n mainToolbar,\n mainHeader,\n mainFooter,\n mainBottomToolbar,\n mainHeaderPlacement,\n mainFooterPlacement,\n mainMinSize = WORKBENCH_MAIN_MIN_SIZE,\n mainMinHeight = WORKBENCH_MAIN_MIN_HEIGHT,\n className = '',\n slot,\n}: WorkbenchProps) {\n // Each work-area minimum applies only on an axis a panel shares with it:\n // the width beside a rail, the height above the drawer.\n const px = (value: number) => Math.max(0, Math.round(value));\n const mainMin = leftRail || rightRail ? px(mainMinSize) : undefined;\n const mainMinBlock = bottomDrawer ? px(mainMinHeight) : undefined;\n const style = [\n mainMin === undefined ? '' : `--_kui-workbench-main-min-width:${mainMin}px`,\n mainMinBlock === undefined\n ? ''\n : `--_kui-workbench-main-min-height:${mainMinBlock}px`,\n ]\n .filter(Boolean)\n .join(';');\n return (\n <section\n class={`kui-workbench ${className}`.trim()}\n id={id}\n data-component=\"workbench\"\n data-main-min-size={mainMin === undefined ? undefined : String(mainMin)}\n data-main-min-height={\n mainMinBlock === undefined ? undefined : String(mainMinBlock)\n }\n style={style || undefined}\n aria-label={label}\n slot={slot}\n >\n {leftRail && <Rail id={id} side=\"left\" panel={leftRail} />}\n {restore(\n leftRail,\n 'left',\n 'bottom-start',\n floatingRestore(id, 'leftRail', leftRail, Boolean(mainToolbar)),\n )}\n <div class=\"kui-workbench__center\">\n <div class=\"kui-workbench__main\" data-workbench-main>\n {mainBody({\n workbenchId: id,\n main,\n mainToolbar,\n mainHeader,\n mainFooter,\n mainBottomToolbar,\n mainHeaderPlacement,\n mainFooterPlacement,\n leftRail,\n rightRail,\n bottomDrawer,\n })}\n </div>\n {bottomDrawer && <Drawer id={id} panel={bottomDrawer} />}\n {restore(\n bottomDrawer,\n 'bottom',\n 'bottom-end',\n floatingRestore(\n id,\n 'bottomDrawer',\n bottomDrawer,\n Boolean(mainBottomToolbar),\n ),\n )}\n </div>\n {rightRail && <Rail id={id} side=\"right\" panel={rightRail} />}\n {restore(\n rightRail,\n 'right',\n 'bottom-end',\n floatingRestore(id, 'rightRail', rightRail, Boolean(mainToolbar)),\n )}\n </section>\n );\n}\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/disclosure-arrow.tsx"],"names":[],"mappings":";;;;AAkBA,IAAM,kBAAA,GAA0D;AAAA,EAC9D,KAAA,EAAO,CAAA;AAAA,EACP,IAAA,EAAM,EAAA;AAAA,EACN,IAAA,EAAM,GAAA;AAAA,EACN,EAAA,EAAI;AACN,CAAA;AAEA,SAAS,gBAAA,CACP,IAAA,EACA,aAAA,EACA,eAAA,EACA;AACA,EAAA,MAAM,cAAA,GAAiB,mBAAmB,eAAe,CAAA;AACzD,EAAA,IAAI,CAAC,MAAM,OAAO,cAAA;AAElB,EAAA,MAAM,YAAA,GAAe,mBAAmB,aAAa,CAAA;AACrD,EAAA,MAAM,aAAA,GAAA,CAAkB,YAAA,GAAe,cAAA,GAAiB,GAAA,IAAO,GAAA,GAAO,GAAA;AACtE,EAAA,OAAO,cAAA,GAAiB,aAAA;AAC1B;AAEO,SAAS,eAAA,CAAgB;AAAA,EAC9B,IAAA;AAAA,EACA,aAAA,GAAgB,MAAA;AAAA,EAChB,eAAA,GAAkB,OAAA;AAAA,EAClB,IAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,CAAA,EAAyB;AACvB,EAAA,MAAM,SAAA,GAAY,OAAO,aAAA,GAAgB,eAAA;AACzC,EAAA,MAAM,QAAA,GAAW,gBAAA,CAAiB,IAAA,EAAM,aAAA,EAAe,eAAe,CAAA;AACtE,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,qBAAA,EAAwB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAChD,KAAA,EAAO,oCAAoC,QAAQ,CAAA,GAAA,CAAA;AAAA,MACnD,gBAAA,EAAe,kBAAA;AAAA,MACf,WAAA,EAAW,OAAO,IAAI,CAAA;AAAA,MACtB,gBAAA,EAAgB,SAAA;AAAA,MAChB,aAAA,EAAY,MAAA;AAAA,MACZ,IAAA;AAAA,MAEC,kCAAQ,GAAA,CAAC,UAAA,EAAA,EAAW,IAAA,EAAM,YAAA,EAAc,MAAK,eAAA,EAAgB;AAAA;AAAA,GAChE;AAEJ","file":"chunk-HMQ2ZDGG.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\nimport { ChevronRight } from 'lucide';\n\nimport { LucideIcon } from './lucide-icon.js';\n\nexport type DisclosureDirection = 'up' | 'down' | 'left' | 'right';\n\nexport interface DisclosureArrowProps {\n open: boolean;\n openDirection?: DisclosureDirection;\n closedDirection?: DisclosureDirection;\n /** Replacement icons should use right as their unrotated orientation. */\n icon?: SafeHtml;\n className?: string;\n /** Native named-slot assignment when composed inside a web component. */\n slot?: string;\n}\n\nconst directionRotations: Record<DisclosureDirection, number> = {\n right: 0,\n down: 90,\n left: 180,\n up: 270,\n};\n\nfunction rotationForState(\n open: boolean,\n openDirection: DisclosureDirection,\n closedDirection: DisclosureDirection,\n) {\n const closedRotation = directionRotations[closedDirection];\n if (!open) return closedRotation;\n\n const openRotation = directionRotations[openDirection];\n const shortestDelta = ((openRotation - closedRotation + 540) % 360) - 180;\n return closedRotation + shortestDelta;\n}\n\nexport function DisclosureArrow({\n open,\n openDirection = 'down',\n closedDirection = 'right',\n icon,\n className = '',\n slot,\n}: DisclosureArrowProps) {\n const direction = open ? openDirection : closedDirection;\n const rotation = rotationForState(open, openDirection, closedDirection);\n return (\n <span\n class={`kui-disclosure-arrow ${className}`.trim()}\n style={`--_kui-disclosure-arrow-rotation:${rotation}deg`}\n data-component=\"disclosure-arrow\"\n data-open={String(open)}\n data-direction={direction}\n aria-hidden=\"true\"\n slot={slot}\n >\n {icon ?? <LucideIcon icon={ChevronRight} name=\"chevron-right\" />}\n </span>\n );\n}\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/toolbar.tsx"],"names":[],"mappings":";;;AA0CA,IAAM,KAAA,GAAQ,CACZ,KAAA,EACA,IAAA,KACI,OAAO,QAAA,CAAS,IAAI,IAAI,MAAA,GAAS,MAAA;AAEhC,SAAS,OAAA,CAAQ;AAAA,EACtB,OAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,YAAA,GAAe,GAAA;AAAA,EACf,WAAA,GAAc,QAAA;AAAA,EACd,UAAA,GAAa,MAAA;AAAA,EACb,YAAA,GAAe,QAAA;AAAA,EACf,aAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,CAAA,EAAiB;AACf,EAAA,uBACE,IAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,YAAA,EAAe,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACvC,gBAAA,EAAe,SAAA;AAAA,MACf,iBAAe,YAAA,IAAgB,MAAA;AAAA,MAC/B,iBAAA,EAAiB,MAAA,CAAO,OAAA,CAAQ,MAAM,CAAC,CAAA;AAAA,MACvC,mBAAA,EAAmB,WAAA;AAAA,MACnB,iBAAA,EAAiB,UAAA;AAAA,MACjB,oBAAA,EAAoB,YAAA;AAAA,MACpB,4BAAA,EAA4B,KAAA,CAAM,aAAA,EAAe,aAAa,CAAA;AAAA,MAC9D,0BAAA,EAA0B,KAAA,CAAM,aAAA,EAAe,WAAW,CAAA;AAAA,MAC1D,6BAAA,EAA6B,KAAA,CAAM,aAAA,EAAe,cAAc,CAAA;AAAA,MAChE,2BAAA,EAA2B,KAAA,CAAM,aAAA,EAAe,YAAY,CAAA;AAAA,MAC5D,YAAA,EAAY,KAAA;AAAA,MACZ,IAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,sBAAA,EAAwB,QAAA,EAAA,OAAA,EAAQ,CAAA;AAAA,wBAC3C,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,qBAAA,EAAuB,QAAA,EAAA,MAAA,EAAO,CAAA;AAAA,wBACzC,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,uBAAA,EAAyB,QAAA,EAAA,QAAA,EAAS;AAAA;AAAA;AAAA,GAC/C;AAEJ","file":"chunk-MTM43SJO.js","sourcesContent":["import type { DividerSides } from './divider-sides.js';\nimport type { PaneSeparatorSide } from './pane.js';\nimport type { KerfUiContent } from './semantic-content.js';\n\nexport interface ToolbarProps {\n leading?: KerfUiContent;\n center?: KerfUiContent;\n trailing?: KerfUiContent;\n label?: string;\n /** Physical divider edges in canonical top/right/bottom/left order. Defaults to bottom. */\n dividerSides?: DividerSides;\n /** Horizontal treatment of the center zone. Defaults to centered content. */\n centerAlign?: 'center' | 'stretch';\n /**\n * Component-owned responsive layout; applications choose the policy rather\n * than restyling toolbar internals. Under every policy the trailing zone\n * wraps its groups instead of clipping an action.\n * - `none` keeps one row; the leading identity truncates first.\n * - `stack` stacks the zones at `responsiveAt`, wrapping stacked control\n * groups onto further rows.\n * - `wrap` keeps one row while every zone fits at its natural width, and\n * otherwise moves the trailing zone below a whole leading identity.\n * - `center-priority` gives an expanded center control the full row.\n */\n responsive?: 'none' | 'stack' | 'wrap' | 'center-priority';\n /** Container width at which `responsive=\"stack\"` activates. */\n responsiveAt?: 'compact' | 'narrow';\n /**\n * Screen edges this toolbar claims for device safe-area compensation, for an\n * app bar or bottom bar that sits directly at a screen edge rather than in a\n * Pane header or footer. Each listed side pads by the inset its surrounding\n * layout reports through `--kui-edge-inset-*`, or the full device inset when\n * nothing routes that edge, while the toolbar's box and dividers paint\n * through. Omitted, the toolbar pads only the inline edges an owner such as\n * a Pane header hands it, and never a block edge.\n */\n safeAreaEdges?: readonly PaneSeparatorSide[];\n className?: string;\n /** Native named-slot assignment when composed inside a web component. */\n slot?: string;\n}\n\nconst claim = (\n edges: readonly PaneSeparatorSide[] | undefined,\n side: PaneSeparatorSide,\n) => (edges?.includes(side) ? 'true' : undefined);\n\nexport function Toolbar({\n leading,\n center,\n trailing,\n label,\n dividerSides = 'b',\n centerAlign = 'center',\n responsive = 'none',\n responsiveAt = 'narrow',\n safeAreaEdges,\n className = '',\n slot,\n}: ToolbarProps) {\n return (\n <header\n class={`kui-toolbar ${className}`.trim()}\n data-component=\"toolbar\"\n divider-sides={dividerSides || undefined}\n data-has-center={String(Boolean(center))}\n data-center-align={centerAlign}\n data-responsive={responsive}\n data-responsive-at={responsiveAt}\n data-safe-area-block-start={claim(safeAreaEdges, 'block-start')}\n data-safe-area-block-end={claim(safeAreaEdges, 'block-end')}\n data-safe-area-inline-start={claim(safeAreaEdges, 'inline-start')}\n data-safe-area-inline-end={claim(safeAreaEdges, 'inline-end')}\n aria-label={label}\n slot={slot}\n >\n <div class=\"kui-toolbar__leading\">{leading}</div>\n <div class=\"kui-toolbar__center\">{center}</div>\n <div class=\"kui-toolbar__trailing\">{trailing}</div>\n </header>\n );\n}\n\nexport type { DividerSides } from './divider-sides.js';\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/panel-toolbar.tsx"],"names":[],"mappings":";;;;;;AAyBO,SAAS,0BAAA,CACd,MACA,SAAA,EACkE;AAClE,EAAA,IAAI,IAAA,KAAS,MAAA;AACX,IAAA,OAAO,SAAA,GACH,EAAE,IAAA,EAAM,aAAA,EAAe,IAAA,EAAM,iBAAA,EAAkB,GAC/C,EAAE,IAAA,EAAM,cAAA,EAAgB,IAAA,EAAM,kBAAA,EAAmB;AACvD,EAAA,IAAI,IAAA,KAAS,OAAA;AACX,IAAA,OAAO,SAAA,GACH,EAAE,IAAA,EAAM,cAAA,EAAgB,IAAA,EAAM,kBAAA,EAAmB,GACjD,EAAE,IAAA,EAAM,eAAA,EAAiB,IAAA,EAAM,mBAAA,EAAoB;AACzD,EAAA,OAAO,SAAA,GACH,EAAE,IAAA,EAAM,eAAA,EAAiB,IAAA,EAAM,mBAAA,EAAoB,GACnD,EAAE,IAAA,EAAM,gBAAA,EAAkB,IAAA,EAAM,oBAAA,EAAqB;AAC3D;AA0CO,SAAS,gBAAA,CACd,IAAA,EACA,MAAA,EACA,SAAA,EACA,UAAA,EACU;AACV,EAAA,MAAM,KAAA,GAAQ,0BAAA,CAA2B,IAAA,EAAM,SAAS,CAAA;AACxD,EAAA,uBACE,GAAA,CAAC,uBAAoB,KAAA,EAAO,MAAA,CAAO,MAAM,UAAA,EAAW,YAAA,EAAa,QAAM,IAAA,EACrE,QAAA,kBAAA,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,QAAA;AAAA,MACJ,GAAG,UAAA;AAAA,MACJ,eAAa,MAAA,CAAO,MAAA;AAAA,MACpB,eAAA,EAAe,MAAA,CAAO,CAAC,SAAS,CAAA;AAAA,MAChC,cAAY,CAAA,EAAG,SAAA,GAAY,SAAS,MAAM,CAAA,CAAA,EAAI,OAAO,IAAI,CAAA,CAAA;AAAA,MAEzD,8BAAC,UAAA,EAAA,EAAW,IAAA,EAAM,MAAM,IAAA,EAAM,IAAA,EAAM,MAAM,IAAA,EAAM;AAAA;AAAA,GAClD,EACF,CAAA;AAEJ;AAMO,SAAS,oBAAA,CACd,OAAA,EACA,IAAA,EACA,SAAA,EACA,UAAA,EACU;AACV,EAAA,uBACE,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,OAAO,OAAA,CAAQ,KAAA;AAAA,MACf,YAAA,EAAa,GAAA;AAAA,MACb,yBACE,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,QAAA,OAAA,CAAQ,KAAA;AAAA,QACR,OAAA,CAAQ;AAAA,OAAA,EACX,CAAA;AAAA,MAEF,0BACE,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,QAAA,OAAA,CAAQ,QAAA;AAAA,QACR,OAAA,CAAQ,SACL,gBAAA,CAAiB,IAAA,EAAM,QAAQ,MAAA,EAAQ,SAAA,EAAW,UAAU,CAAA,GAC5D;AAAA,OAAA,EACN;AAAA;AAAA,GAEJ;AAEJ;AAMO,SAAS,oBAAA,CACd,OAAA,EACA,IAAA,EACA,SAAA,EACA,UAAA,EACiB;AACjB,EAAA,IAAI,CAAC,SAAA,IAAa,CAAC,OAAA,SAAgB,EAAC;AACpC,EAAA,OAAO;AAAA,IACL,OAAA,CAAQ,QAAA;AAAA,IACR,OAAA,CAAQ,SACJ,gBAAA,CAAiB,IAAA,EAAM,QAAQ,MAAA,EAAQ,IAAA,EAAM,UAAU,CAAA,GACvD;AAAA,GACN,CAAE,OAAO,CAAC,KAAA,KAAU,UAAU,MAAA,IAAa,KAAA,KAAU,IAAA,IAAQ,KAAA,KAAU,KAAK,CAAA;AAC9E","file":"chunk-N7FHFNT6.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\nimport {\n PanelBottomClose,\n PanelBottomOpen,\n PanelLeftClose,\n PanelLeftOpen,\n PanelRightClose,\n PanelRightOpen,\n} from 'lucide';\n\nimport { LucideIcon } from './lucide-icon.js';\nimport type { KerfUiContent } from './semantic-content.js';\nimport { Toolbar } from './toolbar.js';\nimport { ToolbarControlGroup } from './toolbar-control-group.js';\n\n/** Which edge a collapsible panel docks to. */\nexport type PanelSide = 'left' | 'right' | 'bottom';\n\n/**\n * The standard collapse/expand icon for a panel `side` and `collapsed` state,\n * so every app's sidebars and drawers use one recognizable convention:\n * `PanelLeft*` for a left rail, `PanelRight*` for a right rail, `PanelBottom*`\n * for a bottom drawer — the `Close` glyph while open, the `Open` glyph while\n * collapsed. Exposed so an app can render its own toggle affordance.\n */\nexport function collapsiblePanelToggleIcon(\n side: PanelSide,\n collapsed: boolean,\n): { icon: Parameters<typeof LucideIcon>[0]['icon']; name: string } {\n if (side === 'left')\n return collapsed\n ? { icon: PanelLeftOpen, name: 'panel-left-open' }\n : { icon: PanelLeftClose, name: 'panel-left-close' };\n if (side === 'right')\n return collapsed\n ? { icon: PanelRightOpen, name: 'panel-right-open' }\n : { icon: PanelRightClose, name: 'panel-right-close' };\n return collapsed\n ? { icon: PanelBottomOpen, name: 'panel-bottom-open' }\n : { icon: PanelBottomClose, name: 'panel-bottom-close' };\n}\n\n/**\n * The standard collapse toggle a panel toolbar renders. The app handles the\n * button's `data-action` and flips its own `collapsed` flag.\n */\nexport interface PanelToggle {\n /** The `data-action` the toggle button carries. */\n action: string;\n /** The panel's short name, for the accessible \"Show …\" / \"Hide …\" label. */\n name: string;\n}\n\n/**\n * A collapsible panel's top toolbar, composed so its groups follow the\n * panel's open state.\n *\n * - `title` (a `ToolbarText`) and `panelOnly` groups lead the toolbar and are\n * available only while the panel is open.\n * - `constant` groups stay available either way: they trail the panel's\n * toolbar while it is open and move to the work area's toolbar while it is\n * collapsed.\n * - `toggle` is always the last group: in the panel's toolbar while it is\n * open, and right after the `constant` groups in the work area's toolbar\n * while it is collapsed.\n *\n * `constant` content renders in both places while the panel is collapsed (the\n * panel's copy is inert), so give it no `id`s.\n */\nexport interface PanelToolbar {\n /** Accessible name of the panel's toolbar. */\n label: string;\n title?: KerfUiContent;\n panelOnly?: KerfUiContent;\n constant?: KerfUiContent;\n toggle?: PanelToggle;\n}\n\n/** Owner-specific attributes a toggle button carries (its wiring hooks). */\nexport type PanelToggleAttributes = Readonly<Record<string, string>>;\n\n/** The standard toggle, alone in a borderless group. */\nexport function panelToggleGroup(\n side: PanelSide,\n toggle: PanelToggle,\n collapsed: boolean,\n attributes: PanelToggleAttributes,\n): SafeHtml {\n const glyph = collapsiblePanelToggleIcon(side, collapsed);\n return (\n <ToolbarControlGroup label={toggle.name} appearance=\"borderless\" single>\n <button\n type=\"button\"\n {...attributes}\n data-action={toggle.action}\n aria-expanded={String(!collapsed)}\n aria-label={`${collapsed ? 'Show' : 'Hide'} ${toggle.name}`}\n >\n <LucideIcon icon={glyph.icon} name={glyph.name} />\n </button>\n </ToolbarControlGroup>\n );\n}\n\n/**\n * The panel's own toolbar: title and panel-only groups lead, constant groups\n * and the toggle trail.\n */\nexport function composedPanelToolbar(\n toolbar: PanelToolbar,\n side: PanelSide,\n collapsed: boolean,\n attributes: PanelToggleAttributes,\n): SafeHtml {\n return (\n <Toolbar\n label={toolbar.label}\n dividerSides=\"b\"\n leading={\n <>\n {toolbar.title}\n {toolbar.panelOnly}\n </>\n }\n trailing={\n <>\n {toolbar.constant}\n {toolbar.toggle\n ? panelToggleGroup(side, toolbar.toggle, collapsed, attributes)\n : null}\n </>\n }\n />\n );\n}\n\n/**\n * The groups a collapsed panel hands to the work area: its `constant` groups,\n * then its toggle. Empty while the panel is open or has no toolbar.\n */\nexport function relocatedPanelGroups(\n toolbar: PanelToolbar | undefined,\n side: PanelSide,\n collapsed: boolean,\n attributes: PanelToggleAttributes,\n): KerfUiContent[] {\n if (!collapsed || !toolbar) return [];\n return [\n toolbar.constant,\n toolbar.toggle\n ? panelToggleGroup(side, toolbar.toggle, true, attributes)\n : null,\n ].filter((group) => group !== undefined && group !== null && group !== false);\n}\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/list-header.tsx"],"names":[],"mappings":"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","file":"chunk-R754MHXX.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { Badge, type BadgeTone } from './badge.js';\nimport { em } from './css-values.js';\nimport { DisclosureArrow } from './disclosure-arrow.js';\nimport {\n filterControlAttributes,\n filterDataAttributes,\n} from './extension-attributes.js';\nimport { Skeleton } from './skeleton.js';\nimport { Text } from './text.js';\n\nconst PROTECTED_ROOT_DATA_ATTRIBUTES = new Set([\n 'data-component',\n 'data-action',\n 'data-has-badge',\n 'data-has-count',\n 'data-density',\n 'data-divider',\n 'data-inline',\n 'data-width',\n 'data-indicator-tone',\n 'data-toggle',\n]);\nconst PROTECTED_TRIGGER_DATA_ATTRIBUTES = new Set([\n 'data-action',\n 'data-kui-disabled',\n]);\n\ntype ListHeaderRootAttributes = Readonly<\n Record<`data-${string}`, string | undefined> & {\n 'data-component'?: never;\n 'data-action'?: never;\n 'data-has-badge'?: never;\n 'data-has-count'?: never;\n 'data-density'?: never;\n 'data-divider'?: never;\n 'data-inline'?: never;\n 'data-width'?: never;\n 'data-indicator-tone'?: never;\n 'data-toggle'?: never;\n }\n>;\n\ntype ListHeaderTriggerAttributes = Readonly<\n Record<`data-${string}`, string | undefined> & {\n 'data-action'?: never;\n 'data-kui-disabled'?: never;\n popoverTarget?: string;\n popoverTargetAction?: 'toggle' | 'show' | 'hide';\n 'aria-controls'?: string;\n 'aria-haspopup'?: 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid' | 'true';\n }\n>;\n\ninterface ListHeaderBaseProps {\n label: string;\n density?: 'standard' | 'compact';\n divider?: 'none' | 'before' | 'after' | 'both';\n /** Shrink-wrap the header without its default outer margin, border, or padding. */\n inline?: boolean;\n /** Fill the available row or shrink-wrap while retaining normal header geometry. */\n width?: 'fill' | 'content';\n indicatorTone?: 'neutral' | 'accent' | 'pop' | 'danger';\n /** Render as an unanimated loading skeleton: keep the label and action affordance, disable interaction. */\n placeholder?: boolean;\n rootAttributes?: ListHeaderRootAttributes;\n triggerAttributes?: ListHeaderTriggerAttributes;\n /** Native named-slot assignment when composed inside a web component. */\n slot?: string;\n}\n\ntype ListHeaderModeProps =\n | {\n /** Render the title as a controlled disclosure trigger. */\n toggle: true;\n action: string;\n expanded: boolean;\n actionIcon?: SafeHtml;\n actionLabel?: never;\n actionDisabled?: boolean;\n disabledReason?: string;\n }\n | {\n /** Render a separately named trailing action. */\n toggle?: false;\n action: string;\n actionLabel: string;\n actionIcon: SafeHtml;\n expanded?: never;\n actionDisabled?: boolean;\n disabledReason?: string;\n }\n | {\n /** Render a passive section heading. */\n toggle?: false;\n action?: never;\n actionLabel?: never;\n actionIcon?: never;\n expanded?: never;\n actionDisabled?: never;\n disabledReason?: never;\n };\n\ntype ListHeaderIndicatorProps =\n | { count: number; countLabel: string; badge?: never; status?: never }\n | { count?: never; countLabel?: never; badge: SafeHtml; status?: never }\n | { count?: never; countLabel?: never; badge?: never; status?: SafeHtml };\n\nexport type ListHeaderProps = ListHeaderBaseProps &\n ListHeaderIndicatorProps &\n ListHeaderModeProps;\n\nexport function ListHeader({\n label,\n count,\n countLabel,\n badge,\n status,\n density = 'standard',\n divider = 'none',\n inline = false,\n width = 'fill',\n indicatorTone = 'neutral',\n action,\n actionLabel,\n actionIcon,\n actionDisabled = false,\n disabledReason,\n expanded,\n toggle = false,\n placeholder = false,\n rootAttributes = {},\n triggerAttributes = {},\n slot,\n}: ListHeaderProps) {\n const extensionRootAttributes = filterDataAttributes(\n rootAttributes,\n PROTECTED_ROOT_DATA_ATTRIBUTES,\n );\n const extensionTriggerAttributes = filterControlAttributes(\n triggerAttributes,\n PROTECTED_TRIGGER_DATA_ATTRIBUTES,\n );\n const normalizedCount =\n typeof count === 'number' && Number.isSafeInteger(count) && count >= 0\n ? count\n : undefined;\n const normalizedCountLabel =\n normalizedCount === undefined\n ? undefined\n : typeof countLabel === 'string' && countLabel.trim()\n ? countLabel\n : String(normalizedCount);\n const renderedBadge =\n normalizedCount === undefined ? (status ?? badge) : undefined;\n const renderedActionIcon =\n actionIcon ??\n (toggle ? <DisclosureArrow open={Boolean(expanded)} /> : undefined);\n const accessibleLabel =\n normalizedCount === undefined\n ? undefined\n : `${label}, ${normalizedCountLabel}`;\n const badgeTone: BadgeTone =\n indicatorTone === 'accent' ? 'brand' : indicatorTone;\n const indicator = placeholder ? (\n (normalizedCount !== undefined || renderedBadge) && (\n <Badge size=\"compact\" tone={badgeTone}>\n <Skeleton width={em(1.75)} />\n </Badge>\n )\n ) : normalizedCount === undefined ? (\n renderedBadge && (\n <Badge size=\"compact\" tone={badgeTone}>\n {renderedBadge}\n </Badge>\n )\n ) : (\n <Badge size=\"compact\" tone={badgeTone} ariaHidden>\n {normalizedCount}\n </Badge>\n );\n const busy = placeholder ? ('true' as const) : undefined;\n if (toggle) {\n return (\n <header\n {...extensionRootAttributes}\n class=\"kui-list-header\"\n data-component=\"list-header\"\n data-has-badge={String(Boolean(renderedBadge))}\n data-has-count={String(normalizedCount !== undefined)}\n data-density={density}\n data-divider={divider}\n data-inline={String(inline)}\n data-width={width}\n data-indicator-tone={indicatorTone}\n data-toggle=\"true\"\n data-placeholder={placeholder ? 'true' : undefined}\n aria-busy={busy}\n slot={slot}\n >\n <button\n {...extensionTriggerAttributes}\n type=\"button\"\n class=\"kui-list-header__title kui-list-header__toggle\"\n data-action={placeholder ? undefined : action}\n title={actionDisabled ? disabledReason : undefined}\n disabled={actionDisabled || placeholder || undefined}\n data-kui-disabled={actionDisabled ? 'true' : undefined}\n aria-label={accessibleLabel}\n aria-expanded={String(Boolean(expanded))}\n >\n <span class=\"kui-list-header__label\">{label}</span>\n {indicator}\n {renderedActionIcon && (\n <span class=\"kui-list-header__action-layer\">\n {renderedActionIcon}\n </span>\n )}\n </button>\n </header>\n );\n }\n return (\n <header\n {...extensionRootAttributes}\n class=\"kui-list-header\"\n data-component=\"list-header\"\n data-has-badge={String(Boolean(renderedBadge))}\n data-has-count={String(normalizedCount !== undefined)}\n data-density={density}\n data-divider={divider}\n data-inline={String(inline)}\n data-width={width}\n data-indicator-tone={indicatorTone}\n data-toggle=\"false\"\n data-placeholder={placeholder ? 'true' : undefined}\n aria-busy={busy}\n slot={slot}\n >\n <div class=\"kui-list-header__title\">\n <Text\n variant=\"h2\"\n class=\"kui-list-header__label\"\n border=\"none\"\n aria-label={accessibleLabel}\n >\n {label}\n </Text>\n {indicator}\n </div>\n {action && (\n <button\n {...extensionTriggerAttributes}\n type=\"button\"\n class=\"kui-list-header__action\"\n data-action={placeholder ? undefined : action}\n aria-label={actionLabel}\n title={actionDisabled ? disabledReason : actionLabel}\n disabled={actionDisabled || placeholder || undefined}\n data-kui-disabled={actionDisabled ? 'true' : undefined}\n >\n {renderedActionIcon}\n </button>\n )}\n </header>\n );\n}\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/token-search-field.tsx"],"names":[],"mappings":"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","file":"chunk-RNRUVPJ3.js","sourcesContent":["import { Search, X } from 'lucide';\n\nimport { LucideIcon } from './lucide-icon.js';\nimport type { KerfUiContent } from './semantic-content.js';\n\nexport interface TokenSearchToken {\n value: string;\n label: string;\n offset?: number;\n accessibleLabel?: string;\n}\n\nexport type TokenSearchEditorAttributes = Readonly<\n Record<`data-${string}`, string | undefined> & {\n 'data-component'?: never;\n 'data-key'?: never;\n 'data-morph-skip'?: never;\n 'data-token-search-editor'?: never;\n 'data-token-count'?: never;\n 'data-placeholder'?: never;\n }\n>;\n\ninterface TokenSearchFieldBaseProps {\n id: string;\n label: string;\n query?: string;\n tokens?: readonly TokenSearchToken[];\n /**\n * Editor identity for a programmatic text replacement. The editor's text is\n * DOM-owned between token changes, so a new `query` with the same tokens\n * does not re-render it (that would reset the caret on every keystroke).\n * Change `revision` when the app replaces the text itself — reseeding a\n * persistent dialog's field on reopen, applying a saved search — and the\n * editor is rebuilt from `query` and `tokens`.\n */\n revision?: string | number;\n placeholder?: string;\n tokenPlaceholder?: string;\n disabled?: boolean;\n autofocus?: boolean;\n leading?: KerfUiContent;\n trailing?: KerfUiContent;\n /** Standalone field chrome or the inset visual layer of a configured toolbar group. */\n presentation?: 'standalone' | 'toolbar-group';\n editAction?: string;\n removeAction?: string;\n clearAction?: string;\n clearLabel?: string;\n className?: string;\n editorAttributes?: TokenSearchEditorAttributes;\n /** Native named-slot assignment when composed inside a web component. */\n slot?: string;\n}\n\ntype TokenSearchCollapsibleProps =\n | {\n /** Allow an empty field to render as one iconic action. */\n collapsible: true;\n /** Keep an empty collapsible field open while the application owns focus. */\n expanded?: boolean;\n expandAction?: string;\n expandLabel?: string;\n }\n | {\n collapsible?: false;\n expanded?: never;\n expandAction?: never;\n expandLabel?: never;\n };\n\nexport type TokenSearchFieldProps = TokenSearchFieldBaseProps &\n TokenSearchCollapsibleProps;\n\nexport interface TokenSearchFieldValue {\n query: string;\n tokens: TokenSearchToken[];\n}\n\ntype TokenSearchPart =\n { kind: 'text'; value: string } | { kind: 'token'; token: TokenSearchToken };\n\nfunction orderedParts(\n query: string,\n tokens: readonly TokenSearchToken[],\n): TokenSearchPart[] {\n const ordered = tokens\n .map((token, index) => ({\n token,\n index,\n offset: Math.max(0, Math.min(query.length, token.offset ?? query.length)),\n }))\n .sort(\n (left, right) => left.offset - right.offset || left.index - right.index,\n );\n const parts: TokenSearchPart[] = [];\n let cursor = 0;\n for (const { token, offset } of ordered) {\n parts.push({ kind: 'text', value: query.slice(cursor, offset) });\n parts.push({ kind: 'token', token: { ...token, offset } });\n cursor = offset;\n }\n parts.push({ kind: 'text', value: query.slice(cursor) });\n return parts;\n}\n\nfunction CloseIcon() {\n return <LucideIcon icon={X} name=\"x\" />;\n}\n\nexport function TokenSearchField({\n id,\n label,\n query = '',\n tokens = [],\n revision,\n placeholder = 'Search',\n tokenPlaceholder = 'Add search…',\n disabled = false,\n autofocus = false,\n collapsible = false,\n expanded = false,\n expandAction = 'expand-token-search',\n expandLabel,\n leading,\n trailing,\n presentation = 'standalone',\n editAction = 'edit-search-token',\n removeAction = 'remove-search-token',\n clearAction = 'clear-token-search',\n clearLabel = 'Clear search',\n className = '',\n editorAttributes = {},\n slot,\n}: TokenSearchFieldProps) {\n const parts = orderedParts(query, tokens);\n const tokenKey = tokens.map((token) => token.value).join('|');\n const key =\n revision === undefined\n ? `${id}:${tokenKey}`\n : `${id}@${String(revision)}:${tokenKey}`;\n const resolvedExpanded =\n !collapsible || expanded || query.length > 0 || tokens.length > 0;\n return (\n <div\n class={`kui-token-search ${className}`.trim()}\n data-component=\"token-search-field\"\n data-token-search-id={id}\n data-disabled={String(disabled)}\n data-collapsible={String(collapsible)}\n data-expanded={String(resolvedExpanded)}\n data-has-trailing={String(Boolean(trailing))}\n data-presentation={presentation}\n slot={slot}\n >\n {!resolvedExpanded ? (\n <button\n type=\"button\"\n class=\"kui-token-search__expand\"\n data-action={expandAction}\n aria-label={expandLabel ?? label}\n title={expandLabel ?? label}\n disabled={disabled}\n >\n <LucideIcon icon={Search} name=\"search\" />\n </button>\n ) : (\n <>\n <span class=\"kui-token-search__leading\" aria-hidden=\"true\">\n {leading ?? <LucideIcon icon={Search} name=\"search\" />}\n </span>\n <div\n {...editorAttributes}\n class=\"kui-token-search__editor\"\n data-key={key}\n data-morph-skip\n data-token-search-editor={id}\n data-token-count={tokens.length}\n data-placeholder={tokens.length ? tokenPlaceholder : placeholder}\n role=\"searchbox\"\n aria-label={label}\n aria-disabled={disabled ? 'true' : undefined}\n contenteditable={disabled ? 'false' : 'true'}\n spellcheck=\"false\"\n autofocus={autofocus}\n >\n {parts.map((part) =>\n part.kind === 'text' ? (\n <span\n data-token-search-text\n data-empty={String(part.value.length === 0)}\n >\n {part.value || (tokens.length ? '\\u200b' : '')}\n </span>\n ) : (\n <span\n class=\"kui-token-search__token\"\n contenteditable=\"false\"\n data-component=\"token-search-token\"\n data-token-value={part.token.value}\n >\n <button\n type=\"button\"\n class=\"kui-token-search__token-edit\"\n data-action={editAction}\n data-token-value={part.token.value}\n aria-label={`Edit ${part.token.accessibleLabel ?? part.token.label}`}\n disabled={disabled}\n >\n {part.token.label}\n </button>\n <button\n type=\"button\"\n class=\"kui-token-search__token-remove\"\n data-action={removeAction}\n data-token-value={part.token.value}\n aria-label={`Remove ${part.token.accessibleLabel ?? part.token.label}`}\n disabled={disabled}\n >\n <CloseIcon />\n </button>\n </span>\n ),\n )}\n </div>\n {(query || tokens.length > 0) && (\n <button\n type=\"button\"\n class=\"kui-token-search__clear\"\n data-action={clearAction}\n aria-label={clearLabel}\n title={clearLabel}\n disabled={disabled}\n >\n <CloseIcon />\n </button>\n )}\n {trailing && (\n <span class=\"kui-token-search__trailing\">{trailing}</span>\n )}\n </>\n )}\n </div>\n );\n}\n\n/** Read editable text and ordered token offsets from a rendered TokenSearchField editor. */\nexport function readTokenSearchField(\n editor: HTMLElement,\n knownTokens: readonly TokenSearchToken[] = [],\n): TokenSearchFieldValue {\n let query = '';\n const tokens: TokenSearchToken[] = [];\n const visit = (node: Node): void => {\n if (node.nodeType === Node.TEXT_NODE) {\n query += (node.textContent ?? '')\n .replaceAll('\\u00a0', ' ')\n .replaceAll('\\u200b', '');\n return;\n }\n if (!(node instanceof HTMLElement)) return;\n if (node.matches('[data-component=\"token-search-token\"]')) {\n const value = node.dataset.tokenValue;\n const known = knownTokens.find((token) => token.value === value);\n if (known) tokens.push({ ...known, offset: query.length });\n else if (value)\n tokens.push({ value, label: value, offset: query.length });\n return;\n }\n if (node.tagName === 'BR') {\n query += ' ';\n return;\n }\n for (const child of node.childNodes) visit(child);\n };\n for (const child of editor.childNodes) visit(child);\n return { query, tokens };\n}\n\n/** Focus an editor and place its caret at a text offset, skipping atomic token chips. */\nexport function placeTokenSearchCaret(\n editor: HTMLElement,\n offset?: number,\n): void {\n editor.focus({ preventScroll: true });\n const selection = globalThis.getSelection();\n if (!selection) return;\n const range = document.createRange();\n if (offset === undefined) {\n range.selectNodeContents(editor);\n range.collapse(false);\n } else {\n let remaining = Math.max(0, offset);\n let found = false;\n const walker = document.createTreeWalker(editor, NodeFilter.SHOW_TEXT, {\n acceptNode: (node) =>\n node.parentElement?.closest('[data-component=\"token-search-token\"]')\n ? NodeFilter.FILTER_REJECT\n : NodeFilter.FILTER_ACCEPT,\n });\n for (let node = walker.nextNode(); node; node = walker.nextNode()) {\n const source = node.textContent ?? '';\n const length = source.replaceAll('\\u200b', '').length;\n if (remaining <= length) {\n range.setStart(\n node,\n source === '\\u200b' ? 0 : Math.min(remaining, source.length),\n );\n range.collapse(true);\n found = true;\n break;\n }\n remaining -= length;\n }\n if (!found) {\n range.selectNodeContents(editor);\n range.collapse(false);\n }\n }\n selection.removeAllRanges();\n selection.addRange(range);\n}\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/select.tsx"],"names":[],"mappings":";;;;;AAsEA,SAAS,aAAA,GAAgB;AACvB,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,OAAA,EAAQ,aAAA,EAAc,aAAA,EAAY,QACrC,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,0KAAA,EAA2K,CAAA,EACrL,CAAA;AAEJ;AAEO,SAAS,MAAA,CAA6B;AAAA,EAC3C,IAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,eAAA;AAAA,EACA,IAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,OAAA,GAAU,KAAA;AAAA,EACV,cAAA;AAAA,EACA,WAAA,GAAc,KAAA;AAAA,EACd,YAAA,GAAe,MAAA;AAAA,EACf,IAAA,GAAO,SAAA;AAAA,EACP,oBAAA,GAAuB,OAAA;AAAA,EACvB,cAAA,GAAiB,QAAA;AAAA,EACjB,aAAA;AAAA,EACA;AACF,CAAA,EAAuB;AACrB,EAAA,IAAI,WAAA,EAAa;AACf,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAO,CAAA,mCAAA,EAAsC,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,QAC9D,gBAAA,EAAe,QAAA;AAAA,QACf,kBAAA,EAAiB,MAAA;AAAA,QACjB,mBAAA,EAAmB,YAAA;AAAA,QACnB,WAAA,EAAW,IAAA;AAAA,QACX,4BAAA,EAA4B,oBAAA;AAAA,QAC5B,uBAAA,EAAuB,cAAA;AAAA,QACvB,WAAA,EAAU,MAAA;AAAA,QACV,KAAA,EACE,aAAA,KAAkB,MAAA,GACd,MAAA,GACA,gCAAgC,aAAa,CAAA,EAAA,CAAA;AAAA,QAEnD,IAAA;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,KAAA,oBAAS,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,+BAAA,EAAiC,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,0BAC7D,IAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,KAAA,EAAM,6BAAA;AAAA,cACN,YAAA,EAAY,SAAA;AAAA,cACZ,IAAA,EAAK,KAAA;AAAA,cAEL,QAAA,EAAA;AAAA,gCAAA,GAAA,CAAC,QAAA,EAAA,EAAS,KAAA,EAAO,EAAA,CAAG,EAAE,CAAA,EAAG,CAAA;AAAA,gCACzB,GAAA,CAAC,UAAK,KAAA,EAAM,iCAAA,EAAkC,eAAY,MAAA,EACxD,QAAA,kBAAA,GAAA,CAAC,iBAAc,CAAA,EACjB;AAAA;AAAA;AAAA,WACF;AAAA,UACC,IAAA,oBAAQ,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,gCAAgC,QAAA,EAAA,IAAA,EAAK;AAAA;AAAA;AAAA,KAC5D;AAAA,EAEJ;AACA,EAAA,MAAM,WAAW,OAAA,CAAQ,IAAA,CAAK,CAAC,MAAA,KAAW,MAAA,CAAO,UAAU,KAAK,CAAA;AAChE,EAAA,MAAM,IAAA,GAAO,CAAC,MAAA,EAA6B,YAAA,GAAe,KAAA,qBACxD,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,UAAA,EAAU,GAAG,IAAI,CAAA,CAAA,EAAI,OAAO,KAAK,CAAA,CAAA,EAAI,YAAA,GAAe,UAAA,GAAa,QAAQ,CAAA,CAAA;AAAA,MACzE,iBAAA,EAAe,IAAA;AAAA,MACf,IAAA,EAAK,OAAA;AAAA,MACL,KAAA,EAAO,CAAA,gBAAA,EAAmB,YAAA,GAAe,6BAAA,GAAgC,EAAE,CAAA,CAAA;AAAA,MAC3E,OAAO,MAAA,CAAO,KAAA,GAAQ,CAAA,MAAA,EAAS,MAAA,CAAO,KAAK,CAAA,CAAA,GAAK,MAAA;AAAA,MAE/C,iBAAO,IAAA,mBACN,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,MAAM,MAAA,CAAO,IAAA;AAAA,UACb,IAAA,EACE,OAAO,QAAA,IAAY,MAAA,CAAO,MAAM,WAAA,EAAY,CAAE,UAAA,CAAW,GAAA,EAAK,GAAG;AAAA;AAAA,OAErE,GACE;AAAA;AAAA,GACN;AAEF,EAAA,MAAM,MAAA,GAAS,CAAC,MAAA,EAA6B,KAAA,qBAC3C,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,MAAA,CAAO,eAAA,IAAmB,KAAA,GAAQ,CAAA,oBAAK,GAAA,CAAC,YAAA,EAAA,EAAW,CAAA;AAAA,oBACpD,IAAA,CAAC,WAAA,EAAA,EAAU,KAAA,EAAO,MAAA,CAAO,KAAA,EACtB,QAAA,EAAA;AAAA,MAAA,MAAA,CAAO,IAAA,GAAO,IAAA,CAAK,MAAM,CAAA,GAAI,IAAA;AAAA,MAC7B,MAAA,CAAO;AAAA,KAAA,EACV;AAAA,GAAA,EACF,CAAA;AAEF,EAAA,MAAM,MAAA,GAAS;AAAA,IACb,GAAG,IAAI,GAAA;AAAA,MACL,OAAA,CACG,GAAA,CAAI,CAAC,MAAA,KAAW,MAAA,CAAO,KAAK,CAAA,CAC5B,MAAA,CAAO,CAAC,KAAA,KAA2B,OAAA,CAAQ,KAAK,CAAC;AAAA;AACtD,GACF;AACA,EAAA,MAAM,YAAY,OAAA,CAAQ,MAAA,CAAO,CAAC,MAAA,KAAW,CAAC,OAAO,KAAK,CAAA;AAG1D,EAAA,uBACE,IAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,OAAO,CAAA,UAAA,EAAa,cAAA,GAAiB,8BAAA,GAAiC,EAAE,GAAG,OAAA,GAAU,uBAAA,GAA0B,EAAE,CAAA,EAAG,CAAC,KAAA,GAAQ,2BAAA,GAA8B,EAAE,CAAA,CAAA,EAAI,SAAS,GAAG,IAAA,EAAK;AAAA,MAClL,gBAAA,EAAe,QAAA;AAAA,MACf,mBAAA,EAAmB,YAAA;AAAA,MACnB,WAAA,EAAW,IAAA;AAAA,MACX,4BAAA,EAA4B,oBAAA;AAAA,MAC5B,uBAAA,EAAuB,cAAA;AAAA,MACvB,IAAA;AAAA,MACA,OAAO,KAAA,IAAS,SAAA;AAAA,MAChB,YAAA,EAAY,SAAA;AAAA,MACZ,KAAA;AAAA,MACA,WAAA,EAAa,eAAA;AAAA,MACb,IAAA;AAAA,MACA,QAAA;AAAA,MACA,KAAA,EACE,aAAA,KAAkB,MAAA,GACd,MAAA,GACA,gCAAgC,aAAa,CAAA,EAAA,CAAA;AAAA,MAEnD,IAAA;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,QAAA,KACE,cAAA,mBACC,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,UAAA,EAAU,CAAA,EAAG,IAAI,CAAA,CAAA,EAAI,KAAK,CAAA,gBAAA,CAAA;AAAA,YAC1B,IAAA,EAAK,OAAA;AAAA,YACL,KAAA,EAAM,6BAAA;AAAA,YAEL,yBAAe,QAAQ;AAAA;AAAA,YAExB,QAAA,CAAS,IAAA,GACX,IAAA,CAAK,QAAA,EAAU,IAAI,CAAA,GACjB,IAAA,CAAA;AAAA,QACL,SAAA,CAAU,IAAI,MAAM,CAAA;AAAA,QACpB,MAAA,CAAO,GAAA,CAAI,CAAC,KAAA,EAAO,KAAA,qBAClB,IAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAO,oBAAoB,KAAA,GAAQ,CAAA,IAAK,UAAU,MAAA,GAAS,CAAA,GAAI,kCAAkC,EAAE,CAAA,CAAA;AAAA,YACnG,IAAA,EAAK,OAAA;AAAA,YACL,YAAA,EAAY,KAAA;AAAA,YAEZ,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,yBAAA,EAA2B,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,cAC5C,OAAA,CAAQ,OAAO,CAAC,MAAA,KAAW,OAAO,KAAA,KAAU,KAAK,CAAA,CAAE,GAAA,CAAI,MAAM;AAAA;AAAA;AAAA,SAEjE;AAAA;AAAA;AAAA,GACH;AAEJ","file":"chunk-T22EM4ET.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { type CssForegroundColor, em } from './css-values.js';\nimport { LucideIcon, type LucideNode } from './lucide-icon.js';\nimport { Skeleton } from './skeleton.js';\n\nexport interface SelectChoice<Value extends string = string> {\n value: Value;\n label: string;\n icon?: LucideNode;\n iconName?: string;\n /**\n * Foreground color for the optional icon: a semantic foreground token such\n * as `uiColor('success-on-quiet')`, or an application-owned\n * `foregroundColorVar('--app-icon-color')`. Fill tokens such as\n * `uiColor('success')` are pale background tints and do not type-check.\n */\n color?: CssForegroundColor;\n group?: string;\n /**\n * Draw a divider between this choice and the previous choice in the same\n * list. A group boundary is already a separator, so the first choice of a\n * group (or of the whole menu) never draws a second one.\n */\n separatorBefore?: boolean;\n}\n\ntype SelectAccessibleName =\n { label: string; ariaLabel?: string } | { label?: never; ariaLabel: string };\n\nexport type SelectPresentation = 'form' | 'toolbar-borderless' | 'navigation';\nexport type SelectSize = 'default' | 'compact';\nexport type SelectSelectedPresentation = 'label' | 'icon-only';\nexport type SelectFocusRingOwner = 'select' | 'group';\n\ninterface SelectBaseProps<Value extends string = string> {\n name: string;\n value: NoInfer<Value>;\n choices: readonly SelectChoice<Value>[];\n className?: string;\n /** Empty-value hint text shown in the closed control (the native select placeholder). */\n placeholderText?: string;\n /** Supporting text shown below the control and associated with its combobox. */\n hint?: string;\n disabled?: boolean;\n fitMenu?: boolean;\n renderSelected?: (choice: SelectChoice<Value>) => SafeHtml;\n /** Render as an unanimated loading skeleton: the label above a static, empty control box. */\n placeholder?: boolean;\n /** Form (default), borderless toolbar, or intrinsic navigation chrome. */\n presentation?: SelectPresentation;\n size?: SelectSize;\n /** Show only the selected choice icon while retaining the Select's accessible name. */\n selectedPresentation?: SelectSelectedPresentation;\n /** Let an enclosing ToolbarControlGroup paint the composed focus ring. */\n focusRingOwner?: SelectFocusRingOwner;\n /** Maximum closed-control label width in CSS pixels before ellipsis. */\n labelMaxWidth?: number;\n /** Native named-slot assignment when composed inside a web component. */\n slot?: string;\n}\n\nexport type SelectProps<Value extends string = string> =\n SelectBaseProps<Value> & SelectAccessibleName;\n\n// The closed wa-select's disclosure glyph: Web Awesome's system `chevron-down`,\n// Font Awesome Free 7.0.0 by @fontawesome (https://fontawesome.com), licensed\n// CC BY 4.0 (https://fontawesome.com/license/free). The placeholder draws the\n// same path so the loading box matches the live control without registering\n// Web Awesome.\nfunction SelectChevron() {\n return (\n <svg viewBox=\"0 0 448 512\" aria-hidden=\"true\">\n <path d=\"M201.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 338.7 54.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z\"></path>\n </svg>\n );\n}\n\nexport function Select<Value extends string>({\n name,\n value,\n label,\n ariaLabel,\n choices,\n className = '',\n placeholderText,\n hint,\n disabled = false,\n fitMenu = false,\n renderSelected,\n placeholder = false,\n presentation = 'form',\n size = 'default',\n selectedPresentation = 'label',\n focusRingOwner = 'select',\n labelMaxWidth,\n slot,\n}: SelectProps<Value>) {\n if (placeholder) {\n return (\n <div\n class={`kui-select kui-select--placeholder ${className}`.trim()}\n data-component=\"select\"\n data-placeholder=\"true\"\n data-presentation={presentation}\n data-size={size}\n data-selected-presentation={selectedPresentation}\n data-focus-ring-owner={focusRingOwner}\n aria-busy=\"true\"\n style={\n labelMaxWidth === undefined\n ? undefined\n : `--kui-select-label-max-width:${labelMaxWidth}px`\n }\n slot={slot}\n >\n {label && <span class=\"kui-select__placeholder-label\">{label}</span>}\n <span\n class=\"kui-select__placeholder-box\"\n aria-label={ariaLabel}\n role=\"img\"\n >\n <Skeleton width={em(10)} />\n <span class=\"kui-select__placeholder-chevron\" aria-hidden=\"true\">\n <SelectChevron />\n </span>\n </span>\n {hint && <span class=\"kui-select__placeholder-hint\">{hint}</span>}\n </div>\n );\n }\n const selected = choices.find((choice) => choice.value === value);\n const icon = (choice: SelectChoice<Value>, selectedIcon = false) => (\n <span\n data-key={`${name}:${choice.value}:${selectedIcon ? 'selected' : 'option'}`}\n data-morph-skip\n slot=\"start\"\n class={`kui-select__icon${selectedIcon ? ' kui-select__icon--selected' : ''}`}\n style={choice.color ? `color:${choice.color}` : undefined}\n >\n {choice.icon ? (\n <LucideIcon\n icon={choice.icon}\n name={\n choice.iconName ?? choice.label.toLowerCase().replaceAll(' ', '-')\n }\n />\n ) : null}\n </span>\n );\n const option = (choice: SelectChoice<Value>, index: number) => (\n <>\n {choice.separatorBefore && index > 0 && <wa-divider></wa-divider>}\n <wa-option value={choice.value}>\n {choice.icon ? icon(choice) : null}\n {choice.label}\n </wa-option>\n </>\n );\n const groups = [\n ...new Set(\n choices\n .map((choice) => choice.group)\n .filter((group): group is string => Boolean(group)),\n ),\n ];\n const ungrouped = choices.filter((choice) => !choice.group);\n // Web Awesome names its shadow combobox from the label, not the host's\n // aria-label. Keep ariaLabel-only names available without visible chrome.\n return (\n <wa-select\n class={`kui-select${renderSelected ? ' kui-select--custom-selected' : ''}${fitMenu ? ' kui-select--fit-menu' : ''}${!label ? ' kui-select--label-hidden' : ''} ${className}`.trim()}\n data-component=\"select\"\n data-presentation={presentation}\n data-size={size}\n data-selected-presentation={selectedPresentation}\n data-focus-ring-owner={focusRingOwner}\n name={name}\n label={label || ariaLabel}\n aria-label={ariaLabel}\n value={value}\n placeholder={placeholderText}\n hint={hint}\n disabled={disabled}\n style={\n labelMaxWidth === undefined\n ? undefined\n : `--kui-select-label-max-width:${labelMaxWidth}px`\n }\n slot={slot}\n >\n {selected &&\n (renderSelected ? (\n <span\n data-key={`${name}:${value}:custom-selected`}\n slot=\"start\"\n class=\"kui-select__custom-selected\"\n >\n {renderSelected(selected)}\n </span>\n ) : selected.icon ? (\n icon(selected, true)\n ) : null)}\n {ungrouped.map(option)}\n {groups.map((group, index) => (\n <div\n class={`kui-select__group${index > 0 || ungrouped.length > 0 ? ' kui-select__group--separated' : ''}`}\n role=\"group\"\n aria-label={group}\n >\n <span class=\"kui-select__group-title\">{group}</span>\n {choices.filter((choice) => choice.group === group).map(option)}\n </div>\n ))}\n </wa-select>\n );\n}\n"]}
|