@kerfjs/ui 5.0.0-beta.4 → 5.0.0-beta.7
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 +9 -8
- package/ai/component-catalog.json +379 -174
- package/ai/public-api-signatures-v1.md +387 -33
- package/ai/skill.md +15 -7
- package/ai/webawesome-jsx-signatures-v1.md +1 -1
- package/dist/app-tab.d.ts +3 -1
- package/dist/app-tab.js +2 -1
- package/dist/browser/app-tab.js +1 -0
- package/dist/browser/menu-action-row.js +1 -0
- package/dist/browser/menu-header.js +1 -0
- package/dist/browser/menu-item.js +1 -0
- package/dist/browser/panel-header.js +7 -0
- package/dist/browser/segmented-control.js +1 -0
- package/dist/browser/select.js +1 -0
- package/dist/browser/skeleton.js +3 -0
- package/dist/browser/state-banner.js +1 -0
- package/dist/browser/toolbar-text.js +1 -0
- package/dist/browser/value-table.js +1 -0
- package/dist/chunk-2RJBFNB6.js +172 -0
- package/dist/chunk-2RJBFNB6.js.map +1 -0
- package/dist/{chunk-XZXRLY5Q.js → chunk-2Z5TWHKQ.js} +7 -6
- package/dist/chunk-2Z5TWHKQ.js.map +1 -0
- package/dist/{chunk-EGHL5S4P.js → chunk-3YD6ZNRA.js} +8 -7
- package/dist/chunk-3YD6ZNRA.js.map +1 -0
- package/dist/chunk-B24C4A6T.js +22 -0
- package/dist/chunk-B24C4A6T.js.map +1 -0
- package/dist/{chunk-NPPD2A6O.js → chunk-H6URQGJI.js} +8 -6
- package/dist/chunk-H6URQGJI.js.map +1 -0
- package/dist/chunk-I7INRJO4.js +17 -0
- package/dist/chunk-I7INRJO4.js.map +1 -0
- package/dist/chunk-KJYXOTG3.js +10 -0
- package/dist/chunk-KJYXOTG3.js.map +1 -0
- package/dist/{chunk-CTQKI2XL.js → chunk-LC3YSAZC.js} +14 -3
- package/dist/chunk-LC3YSAZC.js.map +1 -0
- package/dist/chunk-N3SUXLLS.js +23 -0
- package/dist/chunk-N3SUXLLS.js.map +1 -0
- package/dist/{chunk-R6JHHBKQ.js → chunk-PONXLV5U.js} +5 -5
- package/dist/chunk-PONXLV5U.js.map +1 -0
- package/dist/chunk-TZNCCM5H.js +20 -0
- package/dist/chunk-TZNCCM5H.js.map +1 -0
- package/dist/{chunk-TRNBHPNW.js → chunk-YGN7OMLT.js} +11 -8
- package/dist/chunk-YGN7OMLT.js.map +1 -0
- package/dist/chunk-YKUUZPED.js +24 -0
- package/dist/chunk-YKUUZPED.js.map +1 -0
- package/dist/device-class.d.ts +62 -0
- package/dist/device-class.js +75 -0
- package/dist/device-class.js.map +1 -0
- package/dist/index.d.ts +3 -3
- package/dist/index.js +15 -15
- package/dist/menu-action-row.d.ts +3 -1
- package/dist/menu-action-row.js +2 -1
- package/dist/menu-header.d.ts +3 -1
- package/dist/menu-header.js +2 -1
- package/dist/menu-item.d.ts +3 -1
- package/dist/menu-item.js +2 -1
- package/dist/nav-stack.d.ts +38 -0
- package/dist/nav-stack.js +5 -0
- package/dist/nav-stack.js.map +1 -0
- package/dist/panel-header.d.ts +28 -0
- package/dist/panel-header.js +7 -0
- package/dist/panel-header.js.map +1 -0
- package/dist/segmented-control.d.ts +3 -1
- package/dist/segmented-control.js +2 -1
- package/dist/select.d.ts +5 -2
- package/dist/select.js +2 -1
- package/dist/skeleton.d.ts +24 -0
- package/dist/skeleton.js +3 -0
- package/dist/skeleton.js.map +1 -0
- package/dist/split-view.d.ts +42 -0
- package/dist/split-view.js +21 -0
- package/dist/split-view.js.map +1 -0
- package/dist/state-banner.d.ts +3 -1
- package/dist/state-banner.js +2 -1
- package/dist/styles/foundation.css +21 -0
- package/dist/styles/menu-header.css +19 -2
- package/dist/styles/nav-stack.css +112 -0
- package/dist/styles/panel-header.css +64 -0
- package/dist/styles/select.css +42 -0
- package/dist/styles/skeleton.css +31 -0
- package/dist/styles/split-view.css +35 -0
- package/dist/styles/styles.css +2 -2
- package/dist/styles/tab-scaffold.css +84 -0
- package/dist/styles/toolbar-control-group.css +52 -2
- package/dist/styles/toolbar-text.css +11 -0
- package/dist/styles/toolbar.css +9 -0
- package/dist/styles/workbench.css +94 -0
- package/dist/tab-scaffold.d.ts +30 -0
- package/dist/tab-scaffold.js +16 -0
- package/dist/tab-scaffold.js.map +1 -0
- package/dist/toolbar-text.d.ts +6 -2
- package/dist/toolbar-text.js +2 -1
- package/dist/value-table.d.ts +3 -1
- package/dist/value-table.js +2 -1
- package/dist/wire-nav-stack.d.ts +15 -0
- package/dist/wire-nav-stack.js +88 -0
- package/dist/wire-nav-stack.js.map +1 -0
- package/dist/wire-tab-scaffold.d.ts +11 -0
- package/dist/wire-tab-scaffold.js +16 -0
- package/dist/wire-tab-scaffold.js.map +1 -0
- package/dist/wire-token-search-fields.d.ts +46 -4
- package/dist/wire-token-search-fields.js +1 -1
- package/dist/workbench.d.ts +33 -0
- package/dist/workbench.js +17 -0
- package/dist/workbench.js.map +1 -0
- package/docs/accessibility.md +10 -10
- package/docs/app-layouts.md +57 -0
- package/docs/component-contract.md +46 -9
- package/docs/component-selection.md +57 -7
- package/docs/design-philosophy.md +23 -1
- package/docs/device-class.md +54 -0
- package/docs/layout.md +33 -8
- package/docs/nav-stack.md +47 -0
- package/docs/recipes.md +17 -5
- package/docs/split-view.md +49 -0
- package/docs/tab-scaffold.md +41 -0
- package/docs/ux-demo.md +3 -3
- package/docs/workbench.md +47 -0
- package/llms.txt +116 -43
- package/package.json +43 -11
- package/ux-demo/recipes/app-shell.tsx +3 -3
- package/ux-demo/recipes/composer-form.tsx +2 -2
- package/ux-demo/recipes/list-workspace-states.tsx +2 -2
- package/ux-demo/recipes/loaders.ts +2 -0
- package/ux-demo/recipes/master-detail-dialog.tsx +2 -2
- package/ux-demo/recipes/mount-recipe.ts +3 -0
- package/ux-demo/recipes/navigation-stack.tsx +76 -0
- package/ux-demo/recipes/recipes.css +19 -8
- package/ux-demo/recipes/workspace-header.tsx +2 -2
- package/dist/browser/dialog-header.js +0 -5
- package/dist/browser/page-header.js +0 -3
- package/dist/chunk-2PES33HS.js +0 -13
- package/dist/chunk-2PES33HS.js.map +0 -1
- package/dist/chunk-CTQKI2XL.js.map +0 -1
- package/dist/chunk-EGHL5S4P.js.map +0 -1
- package/dist/chunk-GY5WH7TO.js +0 -10
- package/dist/chunk-GY5WH7TO.js.map +0 -1
- package/dist/chunk-H5AGGVU5.js +0 -75
- package/dist/chunk-H5AGGVU5.js.map +0 -1
- package/dist/chunk-K3G72I6D.js +0 -24
- package/dist/chunk-K3G72I6D.js.map +0 -1
- package/dist/chunk-NPPD2A6O.js.map +0 -1
- package/dist/chunk-R6JHHBKQ.js.map +0 -1
- package/dist/chunk-S3TPM2LP.js +0 -23
- package/dist/chunk-S3TPM2LP.js.map +0 -1
- package/dist/chunk-TRNBHPNW.js.map +0 -1
- package/dist/chunk-VHW5YNIB.js +0 -17
- package/dist/chunk-VHW5YNIB.js.map +0 -1
- package/dist/chunk-XZXRLY5Q.js.map +0 -1
- package/dist/dialog-header.d.ts +0 -15
- package/dist/dialog-header.js +0 -5
- package/dist/dialog-header.js.map +0 -1
- package/dist/page-header.d.ts +0 -9
- package/dist/page-header.js +0 -3
- package/dist/page-header.js.map +0 -1
- package/dist/styles/dialog-header.css +0 -87
- package/dist/styles/page-header.css +0 -33
|
@@ -113,9 +113,6 @@
|
|
|
113
113
|
.recipe-header__context {
|
|
114
114
|
margin: 0;
|
|
115
115
|
}
|
|
116
|
-
.recipe-header .kui-page-header__action {
|
|
117
|
-
max-width: 100%;
|
|
118
|
-
}
|
|
119
116
|
|
|
120
117
|
.recipe-master-detail {
|
|
121
118
|
display: grid;
|
|
@@ -140,7 +137,7 @@
|
|
|
140
137
|
--spacing: 0;
|
|
141
138
|
--width: min(62rem, calc(100vw - 2rem));
|
|
142
139
|
}
|
|
143
|
-
.recipe-dialog .kui-
|
|
140
|
+
.recipe-dialog .kui-panel-header {
|
|
144
141
|
margin-inline: 0;
|
|
145
142
|
}
|
|
146
143
|
|
|
@@ -206,8 +203,11 @@
|
|
|
206
203
|
gap: var(--kui-layout-content-gap);
|
|
207
204
|
}
|
|
208
205
|
.recipe-compact-toolbar__guide {
|
|
206
|
+
/* Span the toolbar's full width instead of the 8px content-item inset — under a
|
|
207
|
+
full-bleed toolbar/divider the inset read as the boxes floating too far in. */
|
|
209
208
|
display: grid;
|
|
210
209
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
210
|
+
margin-inline: 0;
|
|
211
211
|
gap: var(--kui-layout-control-gap);
|
|
212
212
|
}
|
|
213
213
|
.recipe-compact-toolbar__guide > div {
|
|
@@ -321,10 +321,6 @@
|
|
|
321
321
|
.recipe-compact-toolbar__guide {
|
|
322
322
|
grid-template-columns: 1fr;
|
|
323
323
|
}
|
|
324
|
-
.recipe-header .kui-page-header {
|
|
325
|
-
align-items: flex-start;
|
|
326
|
-
flex-direction: column;
|
|
327
|
-
}
|
|
328
324
|
}
|
|
329
325
|
|
|
330
326
|
@media (forced-colors: active) {
|
|
@@ -342,3 +338,18 @@
|
|
|
342
338
|
transition-duration: 1ms !important;
|
|
343
339
|
}
|
|
344
340
|
}
|
|
341
|
+
|
|
342
|
+
.recipe-navstack {
|
|
343
|
+
display: flex;
|
|
344
|
+
width: min(28rem, 100%);
|
|
345
|
+
margin-inline: auto;
|
|
346
|
+
flex-direction: column;
|
|
347
|
+
}
|
|
348
|
+
.recipe-navstack__stage {
|
|
349
|
+
height: 24rem;
|
|
350
|
+
}
|
|
351
|
+
.recipe-navstack__view {
|
|
352
|
+
/* The view is a .kui-content stack whose rows own their 8px margins; add only a
|
|
353
|
+
little block breathing room, not an inline pad that would double-inset them. */
|
|
354
|
+
padding-block: var(--kui-space-2xs);
|
|
355
|
+
}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import '@kerfjs/ui/layout.css';
|
|
2
2
|
import './recipes.css';
|
|
3
3
|
|
|
4
|
-
import {
|
|
4
|
+
import { PanelHeader } from '@kerfjs/ui/panel-header';
|
|
5
5
|
import { StateBanner } from '@kerfjs/ui/state-banner';
|
|
6
6
|
|
|
7
7
|
import type { RecipeFactory } from './types.js';
|
|
8
8
|
|
|
9
9
|
export const createRecipe: RecipeFactory = (announce) => ({
|
|
10
|
-
render: () => <section class="kui-recipe recipe-header kui-recipe__surface kui-content" data-recipe="recipe-workspace-header"><p class="recipe-header__context kui-inline-metadata kui-content-item"><span>Northstar workspace</span><span>·</span><span>Product planning</span></p><
|
|
10
|
+
render: () => <section class="kui-recipe recipe-header kui-recipe__surface kui-content" data-recipe="recipe-workspace-header"><p class="recipe-header__context kui-inline-metadata kui-content-item"><span>Northstar workspace</span><span>·</span><span>Product planning</span></p><PanelHeader title="Accessibility readiness and responsive navigation rollout" titleId="recipe-workspace-title" actions={<div class="kui-control-cluster"><button class="kui-recipe__button" type="button" data-action="recipe-action" data-recipe-command="share">Share</button><button class="kui-recipe__button" type="button" data-action="recipe-action" data-recipe-command="more">More actions</button><button class="kui-recipe__button" data-primary="true" type="button" data-action="recipe-action" data-recipe-command="publish">Publish update</button></div>} /><StateBanner title="Ready for review" detail="All required checks passed 18 minutes ago." tone="success" /><p class="kui-recipe__ownership kui-content-item">The recipe owns page hierarchy and action relocation. The app owns authorization, command behavior, breadcrumbs, and product copy.</p></section>,
|
|
11
11
|
action(command) { announce(`${command} requested`); },
|
|
12
12
|
});
|
package/dist/chunk-2PES33HS.js
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { jsxs, jsx } from 'kerfjs/jsx-runtime';
|
|
2
|
-
|
|
3
|
-
// src/page-header.tsx
|
|
4
|
-
function PageHeader({ title, action }) {
|
|
5
|
-
return /* @__PURE__ */ jsxs("header", { class: "kui-page-header", "data-component": "page-header", children: [
|
|
6
|
-
/* @__PURE__ */ jsx("h1", { children: title }),
|
|
7
|
-
action && /* @__PURE__ */ jsx("div", { class: "kui-page-header__action", children: action })
|
|
8
|
-
] });
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
export { PageHeader };
|
|
12
|
-
|
|
13
|
-
//# sourceMappingURL=chunk-2PES33HS.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/page-header.tsx"],"names":[],"mappings":";;;AAOO,SAAS,UAAA,CAAW,EAAE,KAAA,EAAO,MAAA,EAAO,EAAoB;AAC7D,EAAA,uBAAO,IAAA,CAAC,QAAA,EAAA,EAAO,KAAA,EAAM,iBAAA,EAAkB,kBAAe,aAAA,EAAc,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,QAAI,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,IAAM,MAAA,oBAAU,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,2BAA2B,QAAA,EAAA,MAAA,EAAO;AAAA,GAAA,EAAO,CAAA;AACrJ","file":"chunk-2PES33HS.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nexport interface PageHeaderProps {\n title: string | SafeHtml;\n action?: SafeHtml;\n}\n\nexport function PageHeader({ title, action }: PageHeaderProps) {\n return <header class=\"kui-page-header\" data-component=\"page-header\"><h1>{title}</h1>{action && <div class=\"kui-page-header__action\">{action}</div>}</header>;\n}\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/select.tsx"],"names":[],"mappings":"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","file":"chunk-CTQKI2XL.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { LucideIcon, type LucideNode } from './lucide-icon.js';\n\nexport interface SelectChoice<Value extends string = string> {\n value: Value;\n label: string;\n icon?: LucideNode;\n iconName?: string;\n color?: string;\n group?: string;\n separatorBefore?: boolean;\n}\n\nexport interface SelectProps<Value extends string = string> {\n name: string;\n value: Value;\n label?: string;\n ariaLabel?: string;\n choices: readonly SelectChoice<Value>[];\n className?: string;\n placeholder?: string;\n disabled?: boolean;\n fitMenu?: boolean;\n renderSelected?: (choice: SelectChoice<Value>) => SafeHtml;\n}\n\nexport function Select<Value extends string>({ name, value, label, ariaLabel, choices, className = '', placeholder, disabled = false, fitMenu = false, renderSelected }: SelectProps<Value>) {\n const selected = choices.find((choice) => choice.value === value);\n const icon = (choice: SelectChoice<Value>, selectedIcon = false) => <span data-key={`${name}:${choice.value}:${selectedIcon ? 'selected' : 'option'}`} data-morph-skip slot=\"start\" class={`kui-select__icon${selectedIcon ? ' kui-select__icon--selected' : ''}`} style={choice.color ? `color:${choice.color}` : undefined}>{choice.icon ? <LucideIcon icon={choice.icon} name={choice.iconName ?? choice.label.toLowerCase().replaceAll(' ', '-')} /> : null}</span>;\n const option = (choice: SelectChoice<Value>) => <>{choice.separatorBefore && <wa-divider></wa-divider>}<wa-option value={choice.value}>{choice.icon ? icon(choice) : null}{choice.label}</wa-option></>;\n const groups = [...new Set(choices.map((choice) => choice.group).filter((group): group is string => Boolean(group)))];\n const ungrouped = choices.filter((choice) => !choice.group);\n return <wa-select class={`kui-select${renderSelected ? ' kui-select--custom-selected' : ''}${fitMenu ? ' kui-select--fit-menu' : ''} ${className}`.trim()} data-component=\"select\" name={name} label={label} aria-label={ariaLabel} value={value} placeholder={placeholder} disabled={disabled}>\n {selected && (renderSelected ? <span data-key={`${name}:${value}:custom-selected`} slot=\"start\" class=\"kui-select__custom-selected\">{renderSelected(selected)}</span> : selected.icon ? icon(selected, true) : null)}\n {ungrouped.map(option)}\n {groups.map((group, index) => <div class={`kui-select__group${index > 0 || ungrouped.length > 0 ? ' kui-select__group--separated' : ''}`} role=\"group\" aria-label={group}><span class=\"kui-select__group-title\">{group}</span>{choices.filter((choice) => choice.group === group).map(option)}</div>)}\n </wa-select>;\n}\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/menu-action-row.tsx"],"names":[],"mappings":";;;AAIA,IAAM,8BAAA,uBAAqC,GAAA,CAAI;AAAA,EAC7C,gBAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,YAAA;AAAA,EACA,eAAA;AAAA,EACA;AACF,CAAC,CAAA;AACD,IAAM,kCAAA,uBAAyC,GAAA,CAAI;AAAA,EACjD,gBAAA;AAAA,EACA,aAAA;AAAA,EACA;AACF,CAAC,CAAA;AAsDM,SAAS,aAAA,CAAc,EAAE,KAAA,EAAO,IAAA,EAAM,QAAQ,MAAA,EAAQ,QAAA,GAAW,KAAA,EAAO,OAAA,EAAS,eAAA,EAAiB,KAAA,EAAO,SAAA,GAAY,KAAA,EAAO,OAAO,QAAA,GAAW,KAAA,EAAO,QAAA,EAAU,cAAA,EAAgB,mBAAA,EAAqB,kBAAA,EAAoB,sBAAA,GAAyB,KAAA,EAAO,qBAAqB,SAAA,GAAY,EAAA,EAAI,KAAA,EAAO,cAAA,GAAiB,EAAC,EAAG,wBAAA,GAA2B,IAAG,EAAuB;AACnX,EAAA,MAAM,uBAAA,GAA0B,oBAAA,CAAqB,cAAA,EAAgB,8BAA8B,CAAA;AACnG,EAAA,MAAM,2BAAA,GAA8B,uBAAA,CAAwB,wBAAA,EAA0B,kCAAkC,CAAA;AAExH,EAAA,4BAAQ,KAAA,EAAA,EAAK,GAAG,uBAAA,EAAyB,KAAA,EAAO,uBAAuB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK,EAAG,OAAc,gBAAA,EAAe,iBAAA,EAAkB,cAAA,EAAc,MAAA,EAAQ,iBAAe,MAAA,CAAO,OAAA,CAAQ,IAAI,CAAC,GAAG,gBAAA,EAAgB,SAAA,GAAY,MAAA,GAAS,MAAA,EAAW,cAAY,KAAA,EAAO,eAAA,EAAe,MAAA,CAAO,QAAQ,GAAG,cAAA,EAAc,OAAA,KAAY,SAAY,MAAA,GAAY,MAAA,CAAO,OAAO,CAAA,EACxW,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,QAAA,EAAA,EAAO,IAAA,EAAK,QAAA,EAAS,KAAA,EAAM,8BAAA,EAA+B,OAAc,QAAA,EAAoB,QAAA,EAAU,QAAA,EAAU,aAAA,EAAa,MAAA,EAAQ,cAAA,EAAc,QAAQ,YAAA,EAAY,eAAA,EAAiB,cAAA,EAAc,QAAA,GAAW,MAAA,GAAS,MAAA,EAAW,cAAA,EAAc,OAAA,KAAY,MAAA,GAAY,MAAA,GAAY,MAAA,CAAO,OAAO,CAAA,EACnS,QAAA,EAAA;AAAA,MAAA,IAAA,oBAAQ,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,2BAAA,EAA6B,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,sBACvD,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,4BAAA,EAA8B,QAAA,EAAA,KAAA,EAAM;AAAA,KAAA,EAClD,CAAA;AAAA,oBACA,GAAA,CAAC,YAAQ,GAAG,2BAAA,EAA6B,MAAK,QAAA,EAAS,KAAA,EAAM,wCAAuC,aAAA,EAAa,cAAA,EAAgB,gBAAc,MAAA,EAAQ,YAAA,EAAY,qBAAqB,KAAA,EAAO,mBAAA,IAAuB,qBAAqB,QAAA,EAAU,sBAAA,IAA0B,QAAY,QAAA,EAAA,kBAAA,EAAmB;AAAA,GAAA,EAChT,CAAA;AACF","file":"chunk-EGHL5S4P.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { filterControlAttributes, filterDataAttributes } from './extension-attributes.js';\n\nconst PROTECTED_ROOT_DATA_ATTRIBUTES = new Set([\n 'data-component',\n 'data-action',\n 'data-item-id',\n 'data-has-icon',\n 'data-multiline',\n 'data-state',\n 'data-selected',\n 'data-pressed',\n]);\nconst PROTECTED_TRAILING_DATA_ATTRIBUTES = new Set([\n 'data-component',\n 'data-action',\n 'data-item-id',\n]);\n\ntype MenuActionRowRootAttributes = Readonly<\n Record<`data-${string}`, string | undefined> & {\n 'data-component'?: never;\n 'data-action'?: never;\n 'data-item-id'?: never;\n 'data-has-icon'?: never;\n 'data-multiline'?: never;\n 'data-state'?: never;\n 'data-selected'?: never;\n 'data-pressed'?: never;\n }\n>;\n\ntype MenuActionRowTrailingAttributes = Readonly<\n Record<`data-${string}`, string | undefined> & {\n 'data-component'?: never;\n 'data-action'?: never;\n 'data-item-id'?: 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\nexport interface MenuActionRowProps {\n /** Visible dormant content for the primary button. Must not contain interactive descendants. */\n label: string | SafeHtml;\n /** Decorative dormant content for the primary button. Must not contain interactive descendants. */\n icon?: SafeHtml;\n action: string;\n itemId?: string;\n selected?: boolean;\n pressed?: boolean;\n accessibleLabel?: string;\n title?: string;\n multiline?: boolean;\n state?: string;\n disabled?: boolean;\n tabIndex?: number;\n trailingAction: string;\n trailingActionLabel: string;\n /** Decorative dormant content for the trailing button. Must not contain interactive descendants. */\n trailingActionIcon: SafeHtml;\n trailingActionDisabled?: boolean;\n trailingActionTitle?: string;\n className?: string;\n style?: string;\n rootAttributes?: MenuActionRowRootAttributes;\n trailingActionAttributes?: MenuActionRowTrailingAttributes;\n}\n\nexport function MenuActionRow({ label, icon, action, itemId, selected = false, pressed, accessibleLabel, title, multiline = false, state, disabled = false, tabIndex, trailingAction, trailingActionLabel, trailingActionIcon, trailingActionDisabled = false, trailingActionTitle, className = '', style, rootAttributes = {}, trailingActionAttributes = {} }: MenuActionRowProps) {\n const extensionRootAttributes = filterDataAttributes(rootAttributes, PROTECTED_ROOT_DATA_ATTRIBUTES);\n const extensionTrailingAttributes = filterControlAttributes(trailingActionAttributes, PROTECTED_TRAILING_DATA_ATTRIBUTES);\n\n return <div {...extensionRootAttributes} class={`kui-menu-action-row ${className}`.trim()} style={style} data-component=\"menu-action-row\" data-item-id={itemId} data-has-icon={String(Boolean(icon))} data-multiline={multiline ? 'true' : undefined} data-state={state} data-selected={String(selected)} data-pressed={pressed === undefined ? undefined : String(pressed)}>\n <button type=\"button\" class=\"kui-menu-action-row__primary\" title={title} disabled={disabled} tabindex={tabIndex} data-action={action} data-item-id={itemId} aria-label={accessibleLabel} aria-current={selected ? 'page' : undefined} aria-pressed={pressed === undefined ? undefined : String(pressed)}>\n {icon && <span class=\"kui-menu-action-row__icon\">{icon}</span>}\n <span class=\"kui-menu-action-row__label\">{label}</span>\n </button>\n <button {...extensionTrailingAttributes} type=\"button\" class=\"kui-menu-action-row__trailing-action\" data-action={trailingAction} data-item-id={itemId} aria-label={trailingActionLabel} title={trailingActionTitle ?? trailingActionLabel} disabled={trailingActionDisabled || undefined}>{trailingActionIcon}</button>\n </div>;\n}\n"]}
|
package/dist/chunk-GY5WH7TO.js
DELETED
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { jsx } from 'kerfjs/jsx-runtime';
|
|
2
|
-
|
|
3
|
-
// src/toolbar-text.tsx
|
|
4
|
-
function ToolbarText({ text, size = "default", className = "" }) {
|
|
5
|
-
return /* @__PURE__ */ jsx("span", { class: `kui-toolbar-text ${className}`.trim(), "data-component": "toolbar-text", "data-size": size, children: text });
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
export { ToolbarText };
|
|
9
|
-
|
|
10
|
-
//# sourceMappingURL=chunk-GY5WH7TO.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/toolbar-text.tsx"],"names":[],"mappings":";;;AAQO,SAAS,YAAY,EAAE,IAAA,EAAM,OAAO,SAAA,EAAW,SAAA,GAAY,IAAG,EAAqB;AACxF,EAAA,uBAAO,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAO,CAAA,iBAAA,EAAoB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK,EAAG,gBAAA,EAAe,cAAA,EAAe,WAAA,EAAW,IAAA,EAAO,QAAA,EAAA,IAAA,EAAK,CAAA;AACnH","file":"chunk-GY5WH7TO.js","sourcesContent":["export type ToolbarTextSize = 'large' | 'default' | 'small';\n\nexport interface ToolbarTextProps {\n text: string;\n size?: ToolbarTextSize;\n className?: string;\n}\n\nexport function ToolbarText({ text, size = 'default', className = '' }: ToolbarTextProps) {\n return <span class={`kui-toolbar-text ${className}`.trim()} data-component=\"toolbar-text\" data-size={size}>{text}</span>;\n}\n"]}
|
package/dist/chunk-H5AGGVU5.js
DELETED
|
@@ -1,75 +0,0 @@
|
|
|
1
|
-
import { placeTokenSearchCaret, readTokenSearchField } from './chunk-7LDCTU7D.js';
|
|
2
|
-
import { delegate } from 'kerfjs';
|
|
3
|
-
|
|
4
|
-
function editorFromEvent(root, event) {
|
|
5
|
-
const target = event.target;
|
|
6
|
-
if (!(target instanceof Element)) return;
|
|
7
|
-
const editor = target.closest("[data-token-search-editor]");
|
|
8
|
-
return editor && root.contains(editor) ? editor : void 0;
|
|
9
|
-
}
|
|
10
|
-
function caretQueryOffset(editor) {
|
|
11
|
-
const selection = editor.ownerDocument.getSelection();
|
|
12
|
-
if (!selection || selection.rangeCount === 0) return;
|
|
13
|
-
const selectionRange = selection.getRangeAt(0);
|
|
14
|
-
if (!editor.contains(selectionRange.startContainer)) return;
|
|
15
|
-
const prefixRange = editor.ownerDocument.createRange();
|
|
16
|
-
prefixRange.selectNodeContents(editor);
|
|
17
|
-
prefixRange.setEnd(selectionRange.startContainer, selectionRange.startOffset);
|
|
18
|
-
const prefix = editor.ownerDocument.createElement("div");
|
|
19
|
-
prefix.append(prefixRange.cloneContents());
|
|
20
|
-
return readTokenSearchField(prefix).query.length;
|
|
21
|
-
}
|
|
22
|
-
function replacementEditor(root, id) {
|
|
23
|
-
return [...root.querySelectorAll("[data-token-search-editor]")].find((editor) => editor.dataset.tokenSearchEditor === id);
|
|
24
|
-
}
|
|
25
|
-
function wireTokenSearchFields(root, { onSubmit }) {
|
|
26
|
-
const pending = /* @__PURE__ */ new WeakMap();
|
|
27
|
-
const onBeforeInput = (event) => {
|
|
28
|
-
const inputEvent = event;
|
|
29
|
-
const editor = editorFromEvent(root, event);
|
|
30
|
-
if (!editor || !inputEvent.inputType.startsWith("delete") || editor.ownerDocument.activeElement !== editor) return;
|
|
31
|
-
const field = editor.closest('[data-component="token-search-field"]');
|
|
32
|
-
const id = field?.dataset.tokenSearchId;
|
|
33
|
-
const offset = caretQueryOffset(editor);
|
|
34
|
-
if (!id || offset === void 0 || field?.dataset.disabled === "true") return;
|
|
35
|
-
pending.set(editor, {
|
|
36
|
-
id,
|
|
37
|
-
offset,
|
|
38
|
-
tokenCount: editor.querySelectorAll('[data-component="token-search-token"]').length
|
|
39
|
-
});
|
|
40
|
-
};
|
|
41
|
-
const onInput = (event) => {
|
|
42
|
-
const editor = editorFromEvent(root, event);
|
|
43
|
-
if (!editor) return;
|
|
44
|
-
const deletion = pending.get(editor);
|
|
45
|
-
pending.delete(editor);
|
|
46
|
-
if (!deletion || editor.querySelectorAll('[data-component="token-search-token"]').length >= deletion.tokenCount) return;
|
|
47
|
-
editor.ownerDocument.defaultView.requestAnimationFrame(() => {
|
|
48
|
-
const replacement = replacementEditor(root, deletion.id);
|
|
49
|
-
if (!replacement) return;
|
|
50
|
-
const active = replacement.ownerDocument.activeElement;
|
|
51
|
-
if (active !== editor && active !== replacement && active !== replacement.ownerDocument.body) return;
|
|
52
|
-
placeTokenSearchCaret(replacement, deletion.offset);
|
|
53
|
-
});
|
|
54
|
-
};
|
|
55
|
-
root.addEventListener("beforeinput", onBeforeInput, true);
|
|
56
|
-
root.addEventListener("input", onInput, true);
|
|
57
|
-
const stopSubmit = delegate(root, "keydown", "[data-token-search-editor]", (event, element) => {
|
|
58
|
-
const keyboardEvent = event;
|
|
59
|
-
const editor = element;
|
|
60
|
-
const field = editor.closest('[data-component="token-search-field"]');
|
|
61
|
-
const id = field?.dataset.tokenSearchId;
|
|
62
|
-
if (keyboardEvent.key !== "Enter" || keyboardEvent.isComposing || !id || field?.dataset.disabled === "true") return;
|
|
63
|
-
keyboardEvent.preventDefault();
|
|
64
|
-
onSubmit({ id, editor });
|
|
65
|
-
});
|
|
66
|
-
return () => {
|
|
67
|
-
root.removeEventListener("beforeinput", onBeforeInput, true);
|
|
68
|
-
root.removeEventListener("input", onInput, true);
|
|
69
|
-
stopSubmit();
|
|
70
|
-
};
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
export { wireTokenSearchFields };
|
|
74
|
-
|
|
75
|
-
//# sourceMappingURL=chunk-H5AGGVU5.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/wire-token-search-fields.ts"],"names":[],"mappings":"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","file":"chunk-H5AGGVU5.js","sourcesContent":["import { delegate } from 'kerfjs';\n\nimport { placeTokenSearchCaret, readTokenSearchField } from './token-search-field.js';\n\nexport interface TokenSearchSubmit {\n id: string;\n editor: HTMLElement;\n}\n\nexport interface WireTokenSearchFieldsOptions {\n onSubmit: (submission: TokenSearchSubmit) => void;\n}\n\ninterface PendingTokenDeletion {\n id: string;\n offset: number;\n tokenCount: number;\n}\n\nfunction editorFromEvent(root: HTMLElement, event: Event): HTMLElement | undefined {\n const target = event.target;\n if (!(target instanceof Element)) return;\n const editor = target.closest<HTMLElement>('[data-token-search-editor]');\n return editor && root.contains(editor) ? editor : undefined;\n}\n\nfunction caretQueryOffset(editor: HTMLElement): number | undefined {\n const selection = editor.ownerDocument.getSelection();\n if (!selection || selection.rangeCount === 0) return;\n const selectionRange = selection.getRangeAt(0);\n if (!editor.contains(selectionRange.startContainer)) return;\n const prefixRange = editor.ownerDocument.createRange();\n prefixRange.selectNodeContents(editor);\n prefixRange.setEnd(selectionRange.startContainer, selectionRange.startOffset);\n const prefix = editor.ownerDocument.createElement('div');\n prefix.append(prefixRange.cloneContents());\n return readTokenSearchField(prefix).query.length;\n}\n\nfunction replacementEditor(root: HTMLElement, id: string): HTMLElement | undefined {\n return [...root.querySelectorAll<HTMLElement>('[data-token-search-editor]')]\n .find((editor) => editor.dataset.tokenSearchEditor === id);\n}\n\n/** Keep TokenSearchField wrapping, submit Enter, and preserve its caret across controlled token deletion. */\nexport function wireTokenSearchFields(root: HTMLElement, { onSubmit }: WireTokenSearchFieldsOptions) {\n const pending = new WeakMap<HTMLElement, PendingTokenDeletion>();\n const onBeforeInput = (event: Event) => {\n const inputEvent = event as InputEvent;\n const editor = editorFromEvent(root, event);\n if (!editor || !inputEvent.inputType.startsWith('delete') || editor.ownerDocument.activeElement !== editor) return;\n const field = editor.closest<HTMLElement>('[data-component=\"token-search-field\"]');\n const id = field?.dataset.tokenSearchId;\n const offset = caretQueryOffset(editor);\n if (!id || offset === undefined || field?.dataset.disabled === 'true') return;\n pending.set(editor, {\n id,\n offset,\n tokenCount: editor.querySelectorAll('[data-component=\"token-search-token\"]').length,\n });\n };\n const onInput = (event: Event) => {\n const editor = editorFromEvent(root, event);\n if (!editor) return;\n const deletion = pending.get(editor);\n pending.delete(editor);\n if (!deletion || editor.querySelectorAll('[data-component=\"token-search-token\"]').length >= deletion.tokenCount) return;\n editor.ownerDocument.defaultView!.requestAnimationFrame(() => {\n const replacement = replacementEditor(root, deletion.id);\n if (!replacement) return;\n const active = replacement.ownerDocument.activeElement;\n if (active !== editor && active !== replacement && active !== replacement.ownerDocument.body) return;\n placeTokenSearchCaret(replacement, deletion.offset);\n });\n };\n root.addEventListener('beforeinput', onBeforeInput, true);\n root.addEventListener('input', onInput, true);\n\n const stopSubmit = delegate(root, 'keydown', '[data-token-search-editor]', (event, element) => {\n const keyboardEvent = event as KeyboardEvent;\n const editor = element as HTMLElement;\n const field = editor.closest<HTMLElement>('[data-component=\"token-search-field\"]');\n const id = field?.dataset.tokenSearchId;\n if (keyboardEvent.key !== 'Enter' || keyboardEvent.isComposing || !id || field?.dataset.disabled === 'true') return;\n keyboardEvent.preventDefault();\n onSubmit({ id, editor });\n });\n return () => {\n root.removeEventListener('beforeinput', onBeforeInput, true);\n root.removeEventListener('input', onInput, true);\n stopSubmit();\n };\n}\n"]}
|
package/dist/chunk-K3G72I6D.js
DELETED
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import { ToolbarControlGroup } from './chunk-MFKMHK5W.js';
|
|
2
|
-
import { Toolbar } from './chunk-DAFFDO33.js';
|
|
3
|
-
import { jsxs, jsx } from 'kerfjs/jsx-runtime';
|
|
4
|
-
|
|
5
|
-
function DialogHeader({ title, titleId, summary, summaryId, icon, iconClassName = "", actions, actionsLabel }) {
|
|
6
|
-
const titleContent = /* @__PURE__ */ jsx("div", { class: "kui-dialog-header__copy", children: /* @__PURE__ */ jsx("h2", { id: titleId, children: title }) });
|
|
7
|
-
const identity = /* @__PURE__ */ jsx(
|
|
8
|
-
ToolbarControlGroup,
|
|
9
|
-
{
|
|
10
|
-
appearance: "borderless",
|
|
11
|
-
className: "kui-dialog-header__identity",
|
|
12
|
-
children: icon ? [/* @__PURE__ */ jsx("span", { class: `kui-dialog-header__icon ${iconClassName}`.trim(), children: icon }), titleContent] : titleContent
|
|
13
|
-
}
|
|
14
|
-
);
|
|
15
|
-
const actionGroup = actions && /* @__PURE__ */ jsx(ToolbarControlGroup, { className: "kui-dialog-header__actions", label: actionsLabel, children: actions });
|
|
16
|
-
return /* @__PURE__ */ jsxs("div", { class: "kui-dialog-header", "data-component": "dialog-header", "data-has-icon": String(Boolean(icon)), "data-has-actions": String(Boolean(actions)), "data-has-summary": String(Boolean(summary)), children: [
|
|
17
|
-
/* @__PURE__ */ jsx(Toolbar, { leading: identity, trailing: actionGroup, divider: false, className: "kui-dialog-header__toolbar" }),
|
|
18
|
-
summary && /* @__PURE__ */ jsx("p", { class: "kui-dialog-header__summary", id: summaryId, children: summary })
|
|
19
|
-
] });
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
export { DialogHeader };
|
|
23
|
-
|
|
24
|
-
//# sourceMappingURL=chunk-K3G72I6D.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/dialog-header.tsx"],"names":[],"mappings":";;;;AAgBO,SAAS,YAAA,CAAa,EAAE,KAAA,EAAO,OAAA,EAAS,OAAA,EAAS,SAAA,EAAW,IAAA,EAAM,aAAA,GAAgB,EAAA,EAAI,OAAA,EAAS,YAAA,EAAa,EAAsB;AACvI,EAAA,MAAM,YAAA,mBAAe,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,yBAAA,EAA0B,8BAAC,IAAA,EAAA,EAAG,EAAA,EAAI,OAAA,EAAU,QAAA,EAAA,KAAA,EAAM,CAAA,EAAK,CAAA;AACvF,EAAA,MAAM,QAAA,mBAAW,GAAA;AAAA,IAAC,mBAAA;AAAA,IAAA;AAAA,MAChB,UAAA,EAAW,YAAA;AAAA,MACX,SAAA,EAAU,6BAAA;AAAA,MACV,QAAA,EAAU,IAAA,GAAO,iBAAC,GAAA,CAAC,UAAK,KAAA,EAAO,CAAA,wBAAA,EAA2B,aAAa,CAAA,CAAA,CAAG,IAAA,EAAK,EAAI,QAAA,EAAA,IAAA,EAAK,CAAA,EAAS,YAAY,CAAA,GAAI;AAAA;AAAA,GACnH;AACA,EAAA,MAAM,WAAA,GAAc,2BAAW,GAAA,CAAC,mBAAA,EAAA,EAAoB,WAAU,4BAAA,EAA6B,KAAA,EAAO,cAAe,QAAA,EAAA,OAAA,EAAQ,CAAA;AAEzH,EAAA,uBAAO,IAAA,CAAC,SAAI,KAAA,EAAM,mBAAA,EAAoB,kBAAe,eAAA,EAAgB,eAAA,EAAe,MAAA,CAAO,OAAA,CAAQ,IAAI,CAAC,GAAG,kBAAA,EAAkB,MAAA,CAAO,OAAA,CAAQ,OAAO,CAAC,CAAA,EAAG,oBAAkB,MAAA,CAAO,OAAA,CAAQ,OAAO,CAAC,CAAA,EAC9L,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,OAAA,EAAA,EAAQ,SAAS,QAAA,EAAU,QAAA,EAAU,aAAa,OAAA,EAAS,KAAA,EAAO,WAAU,4BAAA,EAA6B,CAAA;AAAA,IACzG,2BAAW,GAAA,CAAC,GAAA,EAAA,EAAE,OAAM,4BAAA,EAA6B,EAAA,EAAI,WAAY,QAAA,EAAA,OAAA,EAAQ;AAAA,GAAA,EAC5E,CAAA;AACF","file":"chunk-K3G72I6D.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { Toolbar } from './toolbar.js';\nimport { ToolbarControlGroup } from './toolbar-control-group.js';\n\nexport interface DialogHeaderProps {\n title: string;\n titleId: string;\n summary?: string;\n summaryId?: string;\n icon?: SafeHtml;\n iconClassName?: string;\n actions?: SafeHtml;\n actionsLabel?: string;\n}\n\nexport function DialogHeader({ title, titleId, summary, summaryId, icon, iconClassName = '', actions, actionsLabel }: DialogHeaderProps) {\n const titleContent = <div class=\"kui-dialog-header__copy\"><h2 id={titleId}>{title}</h2></div>;\n const identity = <ToolbarControlGroup\n appearance=\"borderless\"\n className=\"kui-dialog-header__identity\"\n children={icon ? [<span class={`kui-dialog-header__icon ${iconClassName}`.trim()}>{icon}</span>, titleContent] : titleContent}\n />;\n const actionGroup = actions && <ToolbarControlGroup className=\"kui-dialog-header__actions\" label={actionsLabel}>{actions}</ToolbarControlGroup>;\n\n return <div class=\"kui-dialog-header\" data-component=\"dialog-header\" data-has-icon={String(Boolean(icon))} data-has-actions={String(Boolean(actions))} data-has-summary={String(Boolean(summary))}>\n <Toolbar leading={identity} trailing={actionGroup} divider={false} className=\"kui-dialog-header__toolbar\" />\n {summary && <p class=\"kui-dialog-header__summary\" id={summaryId}>{summary}</p>}\n </div>;\n}\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/menu-header.tsx"],"names":[],"mappings":"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","file":"chunk-NPPD2A6O.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { DisclosureArrow } from './disclosure-arrow.js';\nimport { filterControlAttributes, filterDataAttributes } from './extension-attributes.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-toggle',\n]);\nconst PROTECTED_TRIGGER_DATA_ATTRIBUTES = new Set(['data-action']);\n\ntype MenuHeaderRootAttributes = 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-toggle'?: never;\n }\n>;\n\ntype MenuHeaderTriggerAttributes = Readonly<\n Record<`data-${string}`, string | undefined> & {\n 'data-action'?: 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 MenuHeaderBaseProps {\n label: string;\n action?: string;\n actionLabel?: string;\n actionIcon?: SafeHtml;\n actionDisabled?: boolean;\n disabledReason?: string;\n expanded?: boolean;\n toggle?: boolean;\n rootAttributes?: MenuHeaderRootAttributes;\n triggerAttributes?: MenuHeaderTriggerAttributes;\n}\n\ntype MenuHeaderIndicatorProps =\n | { count: number; countLabel: string; badge?: never }\n | { count?: never; countLabel?: never; badge?: SafeHtml };\n\nexport type MenuHeaderProps = MenuHeaderBaseProps & MenuHeaderIndicatorProps;\n\nexport function MenuHeader({ label, count, countLabel, badge, action, actionLabel, actionIcon, actionDisabled = false, disabledReason, expanded, toggle = false, rootAttributes = {}, triggerAttributes = {} }: MenuHeaderProps) {\n const extensionRootAttributes = filterDataAttributes(rootAttributes, PROTECTED_ROOT_DATA_ATTRIBUTES);\n const extensionTriggerAttributes = filterControlAttributes(triggerAttributes, PROTECTED_TRIGGER_DATA_ATTRIBUTES);\n const normalizedCount = typeof count === 'number' && Number.isSafeInteger(count) && count >= 0 ? count : undefined;\n const normalizedCountLabel = normalizedCount === undefined\n ? undefined\n : typeof countLabel === 'string' && countLabel.trim() ? countLabel : String(normalizedCount);\n const renderedBadge = normalizedCount === undefined ? badge : undefined;\n const renderedActionIcon = actionIcon ?? (toggle ? <DisclosureArrow open={Boolean(expanded)} /> : undefined);\n const accessibleLabel = normalizedCount === undefined ? undefined : `${label}, ${normalizedCountLabel}`;\n const indicator = normalizedCount === undefined\n ? renderedBadge && <span class=\"kui-menu-header__badge\">{renderedBadge}</span>\n : <span class=\"kui-menu-header__count\" aria-hidden=\"true\">{normalizedCount}</span>;\n if (toggle) {\n return <header {...extensionRootAttributes} class=\"kui-menu-header\" data-component=\"menu-header\" data-has-badge={String(Boolean(renderedBadge))} data-has-count={String(normalizedCount !== undefined)} data-toggle=\"true\"><button {...extensionTriggerAttributes} type=\"button\" class=\"kui-menu-header__title kui-menu-header__toggle\" data-action={action} aria-label={accessibleLabel} aria-expanded={String(Boolean(expanded))}><span class=\"kui-menu-header__label\">{label}</span>{indicator}{renderedActionIcon && <span class=\"kui-menu-header__action-layer\">{renderedActionIcon}</span>}</button></header>;\n }\n return <header {...extensionRootAttributes} class=\"kui-menu-header\" data-component=\"menu-header\" data-has-badge={String(Boolean(renderedBadge))} data-has-count={String(normalizedCount !== undefined)} data-toggle=\"false\"><div class=\"kui-menu-header__title\"><h2 class=\"kui-menu-header__label\" aria-label={accessibleLabel}>{label}</h2>{indicator}</div>{action && <button {...extensionTriggerAttributes} type=\"button\" class=\"kui-menu-header__action\" data-action={action} aria-label={actionLabel} title={actionDisabled ? disabledReason : actionLabel} disabled={actionDisabled || undefined}>{renderedActionIcon}</button>}</header>;\n}\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/value-table-row.tsx","../src/value-table.tsx"],"names":["jsx"],"mappings":";;;AASO,SAAS,cAAc,EAAE,KAAA,EAAO,OAAO,IAAA,EAAM,SAAA,GAAY,IAAG,EAAuB;AACxF,EAAA,uBAAO,IAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAO,CAAA,qBAAA,EAAwB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK,EAAG,eAAA,EAAe,MAAA,CAAO,OAAA,CAAQ,IAAI,CAAC,CAAA,EAChG,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,IAAA,EAAA,EACE,QAAA,EAAA;AAAA,MAAA,IAAA,oBAAQ,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,uBAAA,EAAyB,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,sBACnD,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,wBAAA,EAA0B,QAAA,EAAA,KAAA,EAAM;AAAA,KAAA,EAC9C,CAAA;AAAA,oBACA,GAAA,CAAC,QAAI,QAAA,EAAA,KAAA,EAAM;AAAA,GAAA,EACb,CAAA;AACF;ACPO,SAAS,WAAW,EAAE,KAAA,EAAO,SAAA,GAAY,EAAA,EAAI,UAAS,EAAoB;AAC/E,EAAA,uBAAOA,GAAAA,CAAC,IAAA,EAAA,EAAG,KAAA,EAAO,CAAA,gBAAA,EAAmB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK,EAAG,gBAAA,EAAe,aAAA,EAAc,YAAA,EAAY,OAAQ,QAAA,EAAS,CAAA;AACrH","file":"chunk-R6JHHBKQ.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nexport interface ValueTableRowProps {\n label: string | SafeHtml;\n value: string | SafeHtml;\n icon?: SafeHtml;\n className?: string;\n}\n\nexport function ValueTableRow({ label, value, icon, className = '' }: ValueTableRowProps) {\n return <div class={`kui-value-table__row ${className}`.trim()} data-has-icon={String(Boolean(icon))}>\n <dt>\n {icon && <span class=\"kui-value-table__icon\">{icon}</span>}\n <span class=\"kui-value-table__label\">{label}</span>\n </dt>\n <dd>{value}</dd>\n </div>;\n}\n","import type { SafeHtml } from 'kerfjs';\n\nexport { ValueTableRow, type ValueTableRowProps } from './value-table-row.js';\n\nexport interface ValueTableProps {\n label: string;\n className?: string;\n children: SafeHtml | readonly SafeHtml[];\n}\n\nexport function ValueTable({ label, className = '', children }: ValueTableProps) {\n return <dl class={`kui-value-table ${className}`.trim()} data-component=\"value-table\" aria-label={label}>{children}</dl>;\n}\n"]}
|
package/dist/chunk-S3TPM2LP.js
DELETED
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import { filterDataAttributes } from './chunk-7BR3DO2A.js';
|
|
2
|
-
import { jsxs, jsx } from 'kerfjs/jsx-runtime';
|
|
3
|
-
|
|
4
|
-
var PROTECTED_ROOT_DATA_ATTRIBUTES = /* @__PURE__ */ new Set([
|
|
5
|
-
"data-component",
|
|
6
|
-
"data-action",
|
|
7
|
-
"data-item-id",
|
|
8
|
-
"data-has-icon",
|
|
9
|
-
"data-multiline",
|
|
10
|
-
"data-state"
|
|
11
|
-
]);
|
|
12
|
-
function MenuItem({ label, icon, trailing, selected = false, action, itemId, className = "", style, pressed, accessibleLabel, title, multiline = false, state, disabled = false, tabIndex, rootAttributes = {} }) {
|
|
13
|
-
const extensionAttributes = filterDataAttributes(rootAttributes, PROTECTED_ROOT_DATA_ATTRIBUTES);
|
|
14
|
-
return /* @__PURE__ */ jsxs("button", { ...extensionAttributes, type: "button", class: `kui-menu-item ${className}`.trim(), style, title, disabled, tabindex: tabIndex, "data-component": "menu-item", "data-action": action, "data-item-id": itemId, "data-has-icon": String(Boolean(icon)), "data-multiline": multiline ? "true" : void 0, "data-state": state, "aria-label": accessibleLabel, "aria-current": selected ? "page" : void 0, "aria-pressed": pressed === void 0 ? void 0 : String(pressed), children: [
|
|
15
|
-
icon && /* @__PURE__ */ jsx("span", { class: "kui-menu-item__icon", children: icon }),
|
|
16
|
-
/* @__PURE__ */ jsx("span", { class: "kui-menu-item__label", children: label }),
|
|
17
|
-
trailing && /* @__PURE__ */ jsx("span", { class: "kui-menu-item__trailing", children: trailing })
|
|
18
|
-
] });
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
export { MenuItem };
|
|
22
|
-
|
|
23
|
-
//# sourceMappingURL=chunk-S3TPM2LP.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/menu-item.tsx"],"names":[],"mappings":";;;AAIA,IAAM,8BAAA,uBAAqC,GAAA,CAAI;AAAA,EAC7C,gBAAA;AAAA,EACA,aAAA;AAAA,EACA,cAAA;AAAA,EACA,eAAA;AAAA,EACA,gBAAA;AAAA,EACA;AACF,CAAC,CAAA;AAgCM,SAAS,QAAA,CAAS,EAAE,KAAA,EAAO,IAAA,EAAM,QAAA,EAAU,WAAW,KAAA,EAAO,MAAA,EAAQ,MAAA,EAAQ,SAAA,GAAY,EAAA,EAAI,KAAA,EAAO,SAAS,eAAA,EAAiB,KAAA,EAAO,SAAA,GAAY,KAAA,EAAO,KAAA,EAAO,QAAA,GAAW,OAAO,QAAA,EAAU,cAAA,GAAiB,EAAC,EAAE,EAAkB;AACtO,EAAA,MAAM,mBAAA,GAAsB,oBAAA,CAAqB,cAAA,EAAgB,8BAA8B,CAAA;AAC/F,EAAA,uBAAO,IAAA,CAAC,YAAQ,GAAG,mBAAA,EAAqB,MAAK,QAAA,EAAS,KAAA,EAAO,iBAAiB,SAAS,CAAA,CAAA,CAAG,MAAK,EAAG,KAAA,EAAc,OAAc,QAAA,EAAoB,QAAA,EAAU,UAAU,gBAAA,EAAe,WAAA,EAAY,aAAA,EAAa,MAAA,EAAQ,cAAA,EAAc,MAAA,EAAQ,iBAAe,MAAA,CAAO,OAAA,CAAQ,IAAI,CAAC,CAAA,EAAG,kBAAgB,SAAA,GAAY,MAAA,GAAS,MAAA,EAAW,YAAA,EAAY,KAAA,EAAO,YAAA,EAAY,iBAAiB,cAAA,EAAc,QAAA,GAAW,SAAS,MAAA,EAAW,cAAA,EAAc,YAAY,MAAA,GAAY,MAAA,GAAY,MAAA,CAAO,OAAO,CAAA,EAC5d,QAAA,EAAA;AAAA,IAAA,IAAA,oBAAQ,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,qBAAA,EAAuB,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,oBACjD,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,sBAAA,EAAwB,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,IACzC,QAAA,oBAAY,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,2BAA2B,QAAA,EAAA,QAAA,EAAS;AAAA,GAAA,EAC/D,CAAA;AACF","file":"chunk-S3TPM2LP.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { filterDataAttributes } from './extension-attributes.js';\n\nconst PROTECTED_ROOT_DATA_ATTRIBUTES = new Set([\n 'data-component',\n 'data-action',\n 'data-item-id',\n 'data-has-icon',\n 'data-multiline',\n 'data-state',\n]);\n\ntype MenuItemRootAttributes = Readonly<\n Record<`data-${string}`, string | undefined> & {\n 'data-component'?: never;\n 'data-action'?: never;\n 'data-item-id'?: never;\n 'data-has-icon'?: never;\n 'data-multiline'?: never;\n 'data-state'?: never;\n }\n>;\n\nexport interface MenuItemProps {\n label: string | SafeHtml;\n icon?: SafeHtml;\n trailing?: SafeHtml;\n selected?: boolean;\n action: string;\n itemId?: string;\n className?: string;\n style?: string;\n pressed?: boolean;\n accessibleLabel?: string;\n title?: string;\n multiline?: boolean;\n state?: string;\n disabled?: boolean;\n tabIndex?: number;\n rootAttributes?: MenuItemRootAttributes;\n}\n\nexport function MenuItem({ label, icon, trailing, selected = false, action, itemId, className = '', style, pressed, accessibleLabel, title, multiline = false, state, disabled = false, tabIndex, rootAttributes = {} }: MenuItemProps) {\n const extensionAttributes = filterDataAttributes(rootAttributes, PROTECTED_ROOT_DATA_ATTRIBUTES);\n return <button {...extensionAttributes} type=\"button\" class={`kui-menu-item ${className}`.trim()} style={style} title={title} disabled={disabled} tabindex={tabIndex} data-component=\"menu-item\" data-action={action} data-item-id={itemId} data-has-icon={String(Boolean(icon))} data-multiline={multiline ? 'true' : undefined} data-state={state} aria-label={accessibleLabel} aria-current={selected ? 'page' : undefined} aria-pressed={pressed === undefined ? undefined : String(pressed)}>\n {icon && <span class=\"kui-menu-item__icon\">{icon}</span>}\n <span class=\"kui-menu-item__label\">{label}</span>\n {trailing && <span class=\"kui-menu-item__trailing\">{trailing}</span>}\n </button>;\n}\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/segmented-control.tsx"],"names":[],"mappings":";;;AA4BO,SAAS,gBAAA,CAAiB;AAAA,EAC/B,EAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA,GAAS,gBAAA;AAAA,EACT,UAAA,GAAa,QAAA;AAAA,EACb,KAAA,GAAQ,SAAA;AAAA,EACR,IAAA,GAAO,SAAA;AAAA,EACP,MAAA,GAAS,SAAA;AAAA,EACT,SAAA,GAAY;AACd,CAAA,EAA0B;AACxB,EAAA,uBAAO,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACN,KAAA,EAAO,CAAA,sBAAA,EAAyB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACjD,gBAAA,EAAe,mBAAA;AAAA,MACf,2BAAA,EAA2B,EAAA;AAAA,MAC3B,YAAA,EAAY,KAAA;AAAA,MACZ,iBAAA,EAAiB,UAAA;AAAA,MACjB,YAAA,EAAY,KAAA;AAAA,MACZ,WAAA,EAAW,IAAA;AAAA,MACX,aAAA,EAAa,MAAA;AAAA,MACb,IAAA,EAAK,OAAA;AAAA,MACL,YAAA,EAAY,KAAA;AAAA,MAEX,QAAA,EAAA,OAAA,CAAQ,GAAA,CAAI,CAAC,MAAA,KAAW;AACvB,QAAA,MAAM,QAAA,GAAW,OAAO,KAAA,KAAU,KAAA;AAClC,QAAA,uBAAO,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACN,IAAA,EAAK,QAAA;AAAA,YACL,KAAA,EAAM,6BAAA;AAAA,YACN,aAAA,EAAa,MAAA;AAAA,YACb,sBAAoB,MAAA,CAAO,KAAA;AAAA,YAC3B,eAAA,EAAe,OAAO,QAAQ,CAAA;AAAA,YAC9B,cAAY,MAAA,CAAO,KAAA;AAAA,YACnB,cAAA,EAAc,OAAO,QAAQ,CAAA;AAAA,YAC7B,OAAO,MAAA,CAAO,KAAA;AAAA,YACd,UAAU,MAAA,CAAO,QAAA;AAAA,YACjB,QAAA,EAAS,GAAA;AAAA,YACT,QAAA,EAAA,MAAA,CAAO,OAAA,oBAAW,GAAA,CAAC,MAAA,EAAA,EAAM,iBAAO,KAAA,EAAM;AAAA;AAAA,SAAQ;AAAA,MAClD,CAAC;AAAA;AAAA,GACH;AACF","file":"chunk-TRNBHPNW.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nexport type SegmentedControlAppearance = 'filled' | 'outlined' | 'toolbar';\nexport type SegmentedControlShape = 'rounded' | 'pill';\nexport type SegmentedControlSize = 'small' | 'default';\nexport type SegmentedControlLayout = 'content' | 'equal';\n\nexport interface SegmentedControlChoice {\n value: string;\n label: string;\n content?: SafeHtml;\n title?: string;\n disabled?: boolean;\n}\n\nexport interface SegmentedControlProps {\n id: string;\n label: string;\n value: string;\n choices: readonly SegmentedControlChoice[];\n action?: string;\n appearance?: SegmentedControlAppearance;\n shape?: SegmentedControlShape;\n size?: SegmentedControlSize;\n layout?: SegmentedControlLayout;\n className?: string;\n}\n\nexport function SegmentedControl({\n id,\n label,\n value,\n choices,\n action = 'select-segment',\n appearance = 'filled',\n shape = 'rounded',\n size = 'default',\n layout = 'content',\n className = '',\n}: SegmentedControlProps) {\n return <div\n class={`kui-segmented-control ${className}`.trim()}\n data-component=\"segmented-control\"\n data-segmented-control-id={id}\n data-value={value}\n data-appearance={appearance}\n data-shape={shape}\n data-size={size}\n data-layout={layout}\n role=\"group\"\n aria-label={label}\n >\n {choices.map((choice) => {\n const selected = choice.value === value;\n return <button\n type=\"button\"\n class=\"kui-segmented-control__item\"\n data-action={action}\n data-segment-value={choice.value}\n data-selected={String(selected)}\n aria-label={choice.label}\n aria-pressed={String(selected)}\n title={choice.title}\n disabled={choice.disabled}\n tabindex=\"0\"\n >{choice.content ?? <span>{choice.label}</span>}</button>;\n })}\n </div>;\n}\n"]}
|
package/dist/chunk-VHW5YNIB.js
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { jsxs, jsx } from 'kerfjs/jsx-runtime';
|
|
2
|
-
|
|
3
|
-
// src/state-banner.tsx
|
|
4
|
-
function StateBanner({ title, detail, icon, action, tone = "info", urgency = "status", className = "" }) {
|
|
5
|
-
return /* @__PURE__ */ jsxs("section", { class: `kui-state-banner ${className}`.trim(), "data-component": "state-banner", "data-tone": tone, role: urgency, "aria-live": urgency === "alert" ? "assertive" : "polite", children: [
|
|
6
|
-
icon && /* @__PURE__ */ jsx("span", { class: "kui-state-banner__icon", children: icon }),
|
|
7
|
-
/* @__PURE__ */ jsxs("div", { class: "kui-state-banner__copy", children: [
|
|
8
|
-
/* @__PURE__ */ jsx("strong", { children: title }),
|
|
9
|
-
detail && /* @__PURE__ */ jsx("span", { children: detail })
|
|
10
|
-
] }),
|
|
11
|
-
action && /* @__PURE__ */ jsx("div", { class: "kui-state-banner__action", children: action })
|
|
12
|
-
] });
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
export { StateBanner };
|
|
16
|
-
|
|
17
|
-
//# sourceMappingURL=chunk-VHW5YNIB.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/state-banner.tsx"],"names":[],"mappings":";;;AAcO,SAAS,WAAA,CAAY,EAAE,KAAA,EAAO,MAAA,EAAQ,IAAA,EAAM,MAAA,EAAQ,IAAA,GAAO,MAAA,EAAQ,OAAA,GAAU,QAAA,EAAU,SAAA,GAAY,EAAA,EAAG,EAAqB;AAChI,EAAA,4BAAQ,SAAA,EAAA,EAAQ,KAAA,EAAO,oBAAoB,SAAS,CAAA,CAAA,CAAG,MAAK,EAAG,gBAAA,EAAe,cAAA,EAAe,WAAA,EAAW,MAAM,IAAA,EAAM,OAAA,EAAS,aAAW,OAAA,KAAY,OAAA,GAAU,cAAc,QAAA,EACzK,QAAA,EAAA;AAAA,IAAA,IAAA,oBAAQ,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,wBAAA,EAA0B,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,oBACpD,IAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,wBAAA,EAAyB,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,YAAQ,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,MAAU,MAAA,oBAAU,GAAA,CAAC,MAAA,EAAA,EAAM,QAAA,EAAA,MAAA,EAAO;AAAA,KAAA,EAAQ,CAAA;AAAA,IAC5F,MAAA,oBAAU,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,4BAA4B,QAAA,EAAA,MAAA,EAAO;AAAA,GAAA,EAC3D,CAAA;AACF","file":"chunk-VHW5YNIB.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nexport type StateBannerTone = 'neutral' | 'info' | 'success' | 'warning' | 'danger';\n\nexport interface StateBannerProps {\n title: string;\n detail?: string;\n icon?: SafeHtml;\n action?: SafeHtml;\n tone?: StateBannerTone;\n urgency?: 'status' | 'alert';\n className?: string;\n}\n\nexport function StateBanner({ title, detail, icon, action, tone = 'info', urgency = 'status', className = '' }: StateBannerProps) {\n return <section class={`kui-state-banner ${className}`.trim()} data-component=\"state-banner\" data-tone={tone} role={urgency} aria-live={urgency === 'alert' ? 'assertive' : 'polite'}>\n {icon && <span class=\"kui-state-banner__icon\">{icon}</span>}\n <div class=\"kui-state-banner__copy\"><strong>{title}</strong>{detail && <span>{detail}</span>}</div>\n {action && <div class=\"kui-state-banner__action\">{action}</div>}\n </section>;\n}\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/app-tab.tsx"],"names":[],"mappings":";;;AAIA,IAAM,8BAAA,uBAAqC,GAAA,CAAI;AAAA,EAC7C,gBAAA;AAAA,EACA,aAAA;AAAA,EACA,aAAA;AAAA,EACA,eAAA;AAAA,EACA,mBAAA;AAAA,EACA;AACF,CAAC,CAAA;AA6BD,SAAS,SAAA,GAAY;AACnB,EAAA,uBAAO,IAAA,CAAC,KAAA,EAAA,EAAI,aAAA,EAAY,MAAA,EAAO,OAAA,EAAQ,WAAA,EAAY,IAAA,EAAK,MAAA,EAAO,MAAA,EAAO,cAAA,EAAe,cAAA,EAAa,MAAA,EAAO,kBAAe,OAAA,EAAQ,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,GAAE,YAAA,EAAa,CAAA;AAAA,oBAAO,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,YAAA,EAAa;AAAA,GAAA,EAAO,CAAA;AAC1L;AAEO,SAAS,MAAA,CAAO,EAAE,EAAA,EAAI,IAAA,EAAM,WAAW,KAAA,EAAO,QAAA,GAAW,IAAA,EAAM,SAAA,GAAY,KAAA,EAAO,OAAA,EAAS,UAAU,SAAA,EAAW,YAAA,GAAe,cAAc,WAAA,GAAc,WAAA,EAAa,YAAY,EAAA,EAAI,cAAA,GAAiB,EAAC,EAAE,EAAgB;AACjO,EAAA,MAAM,YAAA,GAAe,CAAC,QAAA,GAAW,kBAAA,GAAqB,EAAA,EAAI,SAAA,GAAY,0CAAA,GAA6C,EAAE,CAAA,CAAE,MAAA,CAAO,OAAO,CAAA,CAAE,KAAK,GAAG,CAAA;AAC/I,EAAA,MAAM,mBAAA,GAAsB,oBAAA,CAAqB,cAAA,EAAgB,8BAA8B,CAAA;AAC/F,EAAA,uBAAO,IAAA,CAAC,SAAK,GAAG,mBAAA,EAAqB,OAAO,CAAA,YAAA,EAAe,SAAS,GAAG,IAAA,EAAK,EAAG,kBAAe,SAAA,EAAU,aAAA,EAAa,IAAI,eAAA,EAAe,MAAA,CAAO,QAAQ,CAAA,EAAG,SAAA,EAAW,SAAA,GAAY,MAAA,GAAS,OAAA,EACvL,QAAA,EAAA;AAAA,IAAA,QAAA,oBAAY,GAAA,CAAC,QAAA,EAAA,EAAO,IAAA,EAAK,QAAA,EAAS,QAAA,EAAS,IAAA,EAAK,KAAA,EAAM,oBAAA,EAAqB,aAAA,EAAa,WAAA,EAAa,aAAA,EAAa,EAAA,EAAI,cAAY,CAAA,MAAA,EAAS,IAAI,CAAA,CAAA,EAAI,KAAA,EAAO,CAAA,MAAA,EAAS,IAAI,CAAA,CAAA,EAAI,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,yBAAA,EAA0B,aAAA,EAAY,MAAA,EAAQ,QAAA,EAAA,SAAA,oBAAa,GAAA,CAAC,SAAA,EAAA,EAAU,GAAG,CAAA,EAAO,CAAA;AAAA,oBACxQ,IAAA,CAAC,YAAO,IAAA,EAAK,QAAA,EAAS,OAAM,qBAAA,EAAsB,IAAA,EAAK,KAAA,EAAM,eAAA,EAAe,MAAA,CAAO,QAAQ,GAAG,mBAAA,EAAmB,YAAA,IAAgB,QAAW,aAAA,EAAa,YAAA,EAAc,eAAa,EAAA,EAAI,QAAA,EAAU,QAAA,GAAW,GAAA,GAAM,IAAA,EAChN,QAAA,EAAA;AAAA,MAAA,OAAA;AAAA,sBAAQ,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,mBAAA,EAAqB,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,MAAQ,YAAY,QAAA,mBAAW,GAAA,CAAC,UAAK,KAAA,EAAM,uBAAA,EAAyB,oBAAS,CAAA,GAAU;AAAA,KAAA,EACxI;AAAA,GAAA,EACF,CAAA;AACF","file":"chunk-XZXRLY5Q.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { filterDataAttributes } from './extension-attributes.js';\n\nconst PROTECTED_ROOT_DATA_ATTRIBUTES = new Set([\n 'data-component',\n 'data-action',\n 'data-tab-id',\n 'data-selected',\n 'data-tab-dragging',\n 'data-tab-drop-position',\n]);\n\ntype AppTabRootAttributes = Readonly<\n Record<`data-${string}`, string | undefined> & {\n 'data-component'?: never;\n 'data-action'?: never;\n 'data-tab-id'?: never;\n 'data-selected'?: never;\n 'data-tab-dragging'?: never;\n 'data-tab-drop-position'?: never;\n }\n>;\n\nexport interface AppTabProps {\n id: string;\n name: string;\n selected?: boolean;\n closable?: boolean;\n draggable?: boolean;\n leading?: SafeHtml;\n trailing?: SafeHtml;\n /** Decorative dormant content for the close button. Must not contain interactive descendants. */\n closeIcon?: SafeHtml;\n selectAction?: string;\n closeAction?: string;\n className?: string;\n rootAttributes?: AppTabRootAttributes;\n}\n\nfunction CloseIcon() {\n return <svg aria-hidden=\"true\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.25\" stroke-linecap=\"round\"><path d=\"m7 7 10 10\"></path><path d=\"M17 7 7 17\"></path></svg>;\n}\n\nexport function AppTab({ id, name, selected = false, closable = true, draggable = false, leading, trailing, closeIcon, selectAction = 'select-tab', closeAction = 'close-tab', className = '', rootAttributes = {} }: AppTabProps) {\n const keyshortcuts = [closable ? 'Delete Backspace' : '', draggable ? 'Alt+Shift+ArrowLeft Alt+Shift+ArrowRight' : ''].filter(Boolean).join(' ');\n const extensionAttributes = filterDataAttributes(rootAttributes, PROTECTED_ROOT_DATA_ATTRIBUTES);\n return <div {...extensionAttributes} class={`kui-app-tab ${className}`.trim()} data-component=\"app-tab\" data-tab-id={id} data-selected={String(selected)} draggable={draggable ? 'true' : 'false'}>\n {closable && <button type=\"button\" tabindex=\"-1\" class=\"kui-app-tab__close\" data-action={closeAction} data-tab-id={id} aria-label={`Close ${name}`} title={`Close ${name}`}><span class=\"kui-app-tab__close-icon\" aria-hidden=\"true\">{closeIcon ?? <CloseIcon />}</span></button>}\n <button type=\"button\" class=\"kui-app-tab__select\" role=\"tab\" aria-selected={String(selected)} aria-keyshortcuts={keyshortcuts || undefined} data-action={selectAction} data-tab-id={id} tabindex={selected ? '0' : '-1'}>\n {leading}<span class=\"kui-app-tab__name\">{name}</span>{closable || trailing ? <span class=\"kui-app-tab__trailing\">{trailing}</span> : undefined}\n </button>\n </div>;\n}\n"]}
|
package/dist/dialog-header.d.ts
DELETED
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { SafeHtml } from 'kerfjs';
|
|
2
|
-
|
|
3
|
-
interface DialogHeaderProps {
|
|
4
|
-
title: string;
|
|
5
|
-
titleId: string;
|
|
6
|
-
summary?: string;
|
|
7
|
-
summaryId?: string;
|
|
8
|
-
icon?: SafeHtml;
|
|
9
|
-
iconClassName?: string;
|
|
10
|
-
actions?: SafeHtml;
|
|
11
|
-
actionsLabel?: string;
|
|
12
|
-
}
|
|
13
|
-
declare function DialogHeader({ title, titleId, summary, summaryId, icon, iconClassName, actions, actionsLabel }: DialogHeaderProps): SafeHtml;
|
|
14
|
-
|
|
15
|
-
export { DialogHeader, type DialogHeaderProps };
|
package/dist/dialog-header.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":[],"names":[],"mappings":"","file":"dialog-header.js"}
|
package/dist/page-header.d.ts
DELETED
package/dist/page-header.js
DELETED
package/dist/page-header.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":[],"names":[],"mappings":"","file":"page-header.js"}
|
|
@@ -1,87 +0,0 @@
|
|
|
1
|
-
.kui-dialog-header {
|
|
2
|
-
--kui-dialog-header-border: transparent;
|
|
3
|
-
--kui-dialog-header-icon-background: var(--kui-color-brand-fill-quiet);
|
|
4
|
-
--kui-dialog-header-icon-foreground: var(--kui-color-brand-on-quiet);
|
|
5
|
-
--kui-dialog-header-title-inset: 2px;
|
|
6
|
-
display: grid;
|
|
7
|
-
min-height: 2.75rem;
|
|
8
|
-
margin-inline: var(--kui-layout-inline-margin, 0.5rem);
|
|
9
|
-
padding: var(--kui-layout-item-padding, 0.5rem);
|
|
10
|
-
box-sizing: border-box;
|
|
11
|
-
border: 1px solid var(--kui-dialog-header-border);
|
|
12
|
-
border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
|
|
13
|
-
gap: 0;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
.kui-dialog-header[data-has-icon="true"] {
|
|
17
|
-
--kui-dialog-header-title-inset: calc(
|
|
18
|
-
2px + 2.125rem + var(--kui-layout-item-gap, 0.5rem)
|
|
19
|
-
);
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
.kui-dialog-header__toolbar {
|
|
23
|
-
min-height: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
|
|
24
|
-
padding: 0;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
.kui-dialog-header__identity {
|
|
28
|
-
max-width: 100%;
|
|
29
|
-
border-color: transparent;
|
|
30
|
-
background: transparent;
|
|
31
|
-
gap: var(--kui-layout-item-gap, 0.5rem);
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
.kui-dialog-header__icon {
|
|
35
|
-
display: grid;
|
|
36
|
-
width: 2.125rem;
|
|
37
|
-
height: 2.125rem;
|
|
38
|
-
border-radius: var(--kui-radius-circle);
|
|
39
|
-
color: var(--kui-dialog-header-icon-foreground);
|
|
40
|
-
background: var(--kui-dialog-header-icon-background);
|
|
41
|
-
flex: none;
|
|
42
|
-
place-items: center;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
.kui-dialog-header__icon svg {
|
|
46
|
-
width: 1.5rem;
|
|
47
|
-
height: 1.5rem;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
.kui-dialog-header__copy {
|
|
51
|
-
min-width: 0;
|
|
52
|
-
overflow: hidden;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
.kui-dialog-header h2,
|
|
56
|
-
.kui-dialog-header__summary {
|
|
57
|
-
margin: 0;
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
.kui-dialog-header h2 {
|
|
61
|
-
overflow: hidden;
|
|
62
|
-
color: var(--kui-color-text);
|
|
63
|
-
font-size: var(--kui-font-l);
|
|
64
|
-
line-height: 1.2;
|
|
65
|
-
text-overflow: ellipsis;
|
|
66
|
-
white-space: nowrap;
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
.kui-dialog-header__summary {
|
|
70
|
-
min-width: 0;
|
|
71
|
-
margin-block-start: calc(-1 * var(--kui-layout-item-padding, 0.5rem));
|
|
72
|
-
padding-inline: var(--kui-layout-item-padding, 0.5rem);
|
|
73
|
-
padding-inline-start: var(--kui-dialog-header-title-inset);
|
|
74
|
-
color: var(--kui-color-text-quiet);
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
.kui-dialog-header__actions {
|
|
78
|
-
gap: 0;
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
.kui-dialog-header__actions:has(> .kui-toolbar-control-group) {
|
|
82
|
-
height: var(--kui-toolbar-group-size, calc(2px + 2.625rem));
|
|
83
|
-
padding: 0;
|
|
84
|
-
border-color: transparent;
|
|
85
|
-
background: transparent;
|
|
86
|
-
gap: var(--kui-layout-item-gap, 0.5rem);
|
|
87
|
-
}
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
.kui-page-header {
|
|
2
|
-
--kui-page-header-background: transparent;
|
|
3
|
-
--kui-page-header-border: transparent;
|
|
4
|
-
--kui-page-header-foreground: var(--kui-color-text);
|
|
5
|
-
display: flex;
|
|
6
|
-
min-height: 2.75rem;
|
|
7
|
-
margin-inline: var(--kui-layout-inline-margin, 0.5rem);
|
|
8
|
-
padding: var(--kui-layout-item-padding, 0.5rem);
|
|
9
|
-
box-sizing: border-box;
|
|
10
|
-
border: 1px solid var(--kui-page-header-border);
|
|
11
|
-
border-radius: var(--kui-layout-rounded-radius, calc(1px + 0.6875rem));
|
|
12
|
-
color: var(--kui-page-header-foreground);
|
|
13
|
-
background: var(--kui-page-header-background);
|
|
14
|
-
align-items: center;
|
|
15
|
-
justify-content: space-between;
|
|
16
|
-
gap: var(--kui-layout-item-gap, 0.5rem);
|
|
17
|
-
}
|
|
18
|
-
.kui-page-header h1 {
|
|
19
|
-
margin: 0;
|
|
20
|
-
color: inherit;
|
|
21
|
-
font-size: clamp(var(--kui-font-l), 2.3vw, var(--kui-font-2xl));
|
|
22
|
-
letter-spacing: -0.025em;
|
|
23
|
-
}
|
|
24
|
-
.kui-page-header__action {
|
|
25
|
-
margin-inline-end: calc(
|
|
26
|
-
-1 *
|
|
27
|
-
(
|
|
28
|
-
var(--kui-layout-item-padding, 0.5rem) +
|
|
29
|
-
var(--kui-layout-item-border-width, 1px)
|
|
30
|
-
)
|
|
31
|
-
);
|
|
32
|
-
flex: none;
|
|
33
|
-
}
|