@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.
Files changed (156) hide show
  1. package/README.md +9 -8
  2. package/ai/component-catalog.json +379 -174
  3. package/ai/public-api-signatures-v1.md +387 -33
  4. package/ai/skill.md +15 -7
  5. package/ai/webawesome-jsx-signatures-v1.md +1 -1
  6. package/dist/app-tab.d.ts +3 -1
  7. package/dist/app-tab.js +2 -1
  8. package/dist/browser/app-tab.js +1 -0
  9. package/dist/browser/menu-action-row.js +1 -0
  10. package/dist/browser/menu-header.js +1 -0
  11. package/dist/browser/menu-item.js +1 -0
  12. package/dist/browser/panel-header.js +7 -0
  13. package/dist/browser/segmented-control.js +1 -0
  14. package/dist/browser/select.js +1 -0
  15. package/dist/browser/skeleton.js +3 -0
  16. package/dist/browser/state-banner.js +1 -0
  17. package/dist/browser/toolbar-text.js +1 -0
  18. package/dist/browser/value-table.js +1 -0
  19. package/dist/chunk-2RJBFNB6.js +172 -0
  20. package/dist/chunk-2RJBFNB6.js.map +1 -0
  21. package/dist/{chunk-XZXRLY5Q.js → chunk-2Z5TWHKQ.js} +7 -6
  22. package/dist/chunk-2Z5TWHKQ.js.map +1 -0
  23. package/dist/{chunk-EGHL5S4P.js → chunk-3YD6ZNRA.js} +8 -7
  24. package/dist/chunk-3YD6ZNRA.js.map +1 -0
  25. package/dist/chunk-B24C4A6T.js +22 -0
  26. package/dist/chunk-B24C4A6T.js.map +1 -0
  27. package/dist/{chunk-NPPD2A6O.js → chunk-H6URQGJI.js} +8 -6
  28. package/dist/chunk-H6URQGJI.js.map +1 -0
  29. package/dist/chunk-I7INRJO4.js +17 -0
  30. package/dist/chunk-I7INRJO4.js.map +1 -0
  31. package/dist/chunk-KJYXOTG3.js +10 -0
  32. package/dist/chunk-KJYXOTG3.js.map +1 -0
  33. package/dist/{chunk-CTQKI2XL.js → chunk-LC3YSAZC.js} +14 -3
  34. package/dist/chunk-LC3YSAZC.js.map +1 -0
  35. package/dist/chunk-N3SUXLLS.js +23 -0
  36. package/dist/chunk-N3SUXLLS.js.map +1 -0
  37. package/dist/{chunk-R6JHHBKQ.js → chunk-PONXLV5U.js} +5 -5
  38. package/dist/chunk-PONXLV5U.js.map +1 -0
  39. package/dist/chunk-TZNCCM5H.js +20 -0
  40. package/dist/chunk-TZNCCM5H.js.map +1 -0
  41. package/dist/{chunk-TRNBHPNW.js → chunk-YGN7OMLT.js} +11 -8
  42. package/dist/chunk-YGN7OMLT.js.map +1 -0
  43. package/dist/chunk-YKUUZPED.js +24 -0
  44. package/dist/chunk-YKUUZPED.js.map +1 -0
  45. package/dist/device-class.d.ts +62 -0
  46. package/dist/device-class.js +75 -0
  47. package/dist/device-class.js.map +1 -0
  48. package/dist/index.d.ts +3 -3
  49. package/dist/index.js +15 -15
  50. package/dist/menu-action-row.d.ts +3 -1
  51. package/dist/menu-action-row.js +2 -1
  52. package/dist/menu-header.d.ts +3 -1
  53. package/dist/menu-header.js +2 -1
  54. package/dist/menu-item.d.ts +3 -1
  55. package/dist/menu-item.js +2 -1
  56. package/dist/nav-stack.d.ts +38 -0
  57. package/dist/nav-stack.js +5 -0
  58. package/dist/nav-stack.js.map +1 -0
  59. package/dist/panel-header.d.ts +28 -0
  60. package/dist/panel-header.js +7 -0
  61. package/dist/panel-header.js.map +1 -0
  62. package/dist/segmented-control.d.ts +3 -1
  63. package/dist/segmented-control.js +2 -1
  64. package/dist/select.d.ts +5 -2
  65. package/dist/select.js +2 -1
  66. package/dist/skeleton.d.ts +24 -0
  67. package/dist/skeleton.js +3 -0
  68. package/dist/skeleton.js.map +1 -0
  69. package/dist/split-view.d.ts +42 -0
  70. package/dist/split-view.js +21 -0
  71. package/dist/split-view.js.map +1 -0
  72. package/dist/state-banner.d.ts +3 -1
  73. package/dist/state-banner.js +2 -1
  74. package/dist/styles/foundation.css +21 -0
  75. package/dist/styles/menu-header.css +19 -2
  76. package/dist/styles/nav-stack.css +112 -0
  77. package/dist/styles/panel-header.css +64 -0
  78. package/dist/styles/select.css +42 -0
  79. package/dist/styles/skeleton.css +31 -0
  80. package/dist/styles/split-view.css +35 -0
  81. package/dist/styles/styles.css +2 -2
  82. package/dist/styles/tab-scaffold.css +84 -0
  83. package/dist/styles/toolbar-control-group.css +52 -2
  84. package/dist/styles/toolbar-text.css +11 -0
  85. package/dist/styles/toolbar.css +9 -0
  86. package/dist/styles/workbench.css +94 -0
  87. package/dist/tab-scaffold.d.ts +30 -0
  88. package/dist/tab-scaffold.js +16 -0
  89. package/dist/tab-scaffold.js.map +1 -0
  90. package/dist/toolbar-text.d.ts +6 -2
  91. package/dist/toolbar-text.js +2 -1
  92. package/dist/value-table.d.ts +3 -1
  93. package/dist/value-table.js +2 -1
  94. package/dist/wire-nav-stack.d.ts +15 -0
  95. package/dist/wire-nav-stack.js +88 -0
  96. package/dist/wire-nav-stack.js.map +1 -0
  97. package/dist/wire-tab-scaffold.d.ts +11 -0
  98. package/dist/wire-tab-scaffold.js +16 -0
  99. package/dist/wire-tab-scaffold.js.map +1 -0
  100. package/dist/wire-token-search-fields.d.ts +46 -4
  101. package/dist/wire-token-search-fields.js +1 -1
  102. package/dist/workbench.d.ts +33 -0
  103. package/dist/workbench.js +17 -0
  104. package/dist/workbench.js.map +1 -0
  105. package/docs/accessibility.md +10 -10
  106. package/docs/app-layouts.md +57 -0
  107. package/docs/component-contract.md +46 -9
  108. package/docs/component-selection.md +57 -7
  109. package/docs/design-philosophy.md +23 -1
  110. package/docs/device-class.md +54 -0
  111. package/docs/layout.md +33 -8
  112. package/docs/nav-stack.md +47 -0
  113. package/docs/recipes.md +17 -5
  114. package/docs/split-view.md +49 -0
  115. package/docs/tab-scaffold.md +41 -0
  116. package/docs/ux-demo.md +3 -3
  117. package/docs/workbench.md +47 -0
  118. package/llms.txt +116 -43
  119. package/package.json +43 -11
  120. package/ux-demo/recipes/app-shell.tsx +3 -3
  121. package/ux-demo/recipes/composer-form.tsx +2 -2
  122. package/ux-demo/recipes/list-workspace-states.tsx +2 -2
  123. package/ux-demo/recipes/loaders.ts +2 -0
  124. package/ux-demo/recipes/master-detail-dialog.tsx +2 -2
  125. package/ux-demo/recipes/mount-recipe.ts +3 -0
  126. package/ux-demo/recipes/navigation-stack.tsx +76 -0
  127. package/ux-demo/recipes/recipes.css +19 -8
  128. package/ux-demo/recipes/workspace-header.tsx +2 -2
  129. package/dist/browser/dialog-header.js +0 -5
  130. package/dist/browser/page-header.js +0 -3
  131. package/dist/chunk-2PES33HS.js +0 -13
  132. package/dist/chunk-2PES33HS.js.map +0 -1
  133. package/dist/chunk-CTQKI2XL.js.map +0 -1
  134. package/dist/chunk-EGHL5S4P.js.map +0 -1
  135. package/dist/chunk-GY5WH7TO.js +0 -10
  136. package/dist/chunk-GY5WH7TO.js.map +0 -1
  137. package/dist/chunk-H5AGGVU5.js +0 -75
  138. package/dist/chunk-H5AGGVU5.js.map +0 -1
  139. package/dist/chunk-K3G72I6D.js +0 -24
  140. package/dist/chunk-K3G72I6D.js.map +0 -1
  141. package/dist/chunk-NPPD2A6O.js.map +0 -1
  142. package/dist/chunk-R6JHHBKQ.js.map +0 -1
  143. package/dist/chunk-S3TPM2LP.js +0 -23
  144. package/dist/chunk-S3TPM2LP.js.map +0 -1
  145. package/dist/chunk-TRNBHPNW.js.map +0 -1
  146. package/dist/chunk-VHW5YNIB.js +0 -17
  147. package/dist/chunk-VHW5YNIB.js.map +0 -1
  148. package/dist/chunk-XZXRLY5Q.js.map +0 -1
  149. package/dist/dialog-header.d.ts +0 -15
  150. package/dist/dialog-header.js +0 -5
  151. package/dist/dialog-header.js.map +0 -1
  152. package/dist/page-header.d.ts +0 -9
  153. package/dist/page-header.js +0 -3
  154. package/dist/page-header.js.map +0 -1
  155. package/dist/styles/dialog-header.css +0 -87
  156. 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-dialog-header {
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 { PageHeader } from '@kerfjs/ui/page-header';
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><PageHeader title="Accessibility readiness and responsive navigation rollout" action={<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>,
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
  });
@@ -1,5 +0,0 @@
1
- import '../styles/foundation.css';
2
- import '../styles/toolbar.css';
3
- import '../styles/toolbar-control-group.css';
4
- import '../styles/dialog-header.css';
5
- export * from '../dialog-header.js';
@@ -1,3 +0,0 @@
1
- import '../styles/foundation.css';
2
- import '../styles/page-header.css';
3
- export * from '../page-header.js';
@@ -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"]}
@@ -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"]}
@@ -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"]}
@@ -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"]}
@@ -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"]}
@@ -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"]}
@@ -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 };
@@ -1,5 +0,0 @@
1
- export { DialogHeader } from './chunk-K3G72I6D.js';
2
-
3
-
4
-
5
- //# sourceMappingURL=dialog-header.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":[],"names":[],"mappings":"","file":"dialog-header.js"}
@@ -1,9 +0,0 @@
1
- import { SafeHtml } from 'kerfjs';
2
-
3
- interface PageHeaderProps {
4
- title: string | SafeHtml;
5
- action?: SafeHtml;
6
- }
7
- declare function PageHeader({ title, action }: PageHeaderProps): SafeHtml;
8
-
9
- export { PageHeader, type PageHeaderProps };
@@ -1,3 +0,0 @@
1
- export { PageHeader } from './chunk-2PES33HS.js';
2
-
3
- //# sourceMappingURL=page-header.js.map
@@ -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
- }