@kerfjs/ui 5.0.0-beta.95 → 5.0.0-beta.96
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 +95 -55
- package/ai/component-catalog.json +1328 -94
- package/ai/component-composition-rules.json +11 -0
- package/ai/component-composition.d.ts +3 -0
- package/ai/component-composition.json +955 -23
- package/ai/component-composition.schema.json +4 -0
- package/ai/components/README.md +12 -0
- package/ai/components/badge.md +6 -2
- package/ai/components/choice-chips.md +80 -0
- package/ai/components/column-track.md +78 -0
- package/ai/components/combobox.md +88 -0
- package/ai/components/content-item.md +2 -0
- package/ai/components/content-swap.md +78 -0
- package/ai/components/corner-status.md +88 -0
- package/ai/components/document-baseline.md +3 -1
- package/ai/components/edge-activity-indicator.md +81 -0
- package/ai/components/file-picker.md +88 -0
- package/ai/components/foundation.md +1 -1
- package/ai/components/framed-list.md +80 -0
- package/ai/components/grid.md +2 -1
- package/ai/components/icon-button.md +82 -0
- package/ai/components/icon-toggle-button.md +80 -0
- package/ai/components/list-action-row.md +19 -7
- package/ai/components/list-item.md +16 -7
- package/ai/components/list.md +5 -2
- package/ai/components/nav-stack.md +2 -1
- package/ai/components/popup-menu.md +2 -2
- package/ai/components/row.md +1 -1
- package/ai/components/select.md +2 -1
- package/ai/components/split-button.md +80 -0
- package/ai/components/split-view.md +1 -1
- package/ai/components/state-banner.md +4 -2
- package/ai/components/summary-row.md +85 -0
- package/ai/components/sunken-panel.md +1 -1
- package/ai/components/surface-scaffold.md +8 -2
- package/ai/components/text.md +3 -0
- package/ai/components/toolbar-control-group.md +4 -2
- package/ai/components/toolbar-text.md +1 -0
- package/ai/components/toolbar.md +1 -0
- package/ai/components/value-table.md +9 -2
- package/ai/components/wa-button-group.md +2 -1
- package/ai/components/wa-button.md +5 -1
- package/ai/public-api-signatures-v1.md +1063 -52
- package/ai/skill.md +54 -52
- package/ai/webawesome-jsx-signatures-v1.md +1 -1
- package/dist/anchored-surface.d.ts +13 -2
- package/dist/anchored-surface.js +1 -1
- package/dist/app-tab.js +1 -1
- package/dist/badge.d.ts +31 -2
- package/dist/badge.js +2 -1
- package/dist/browser/choice-chips.js +3 -0
- package/dist/browser/column-track.js +3 -0
- package/dist/browser/combobox.js +3 -0
- package/dist/browser/content-swap.js +3 -0
- package/dist/browser/corner-status.js +3 -0
- package/dist/browser/edge-activity-indicator.js +3 -0
- package/dist/browser/file-picker.js +3 -0
- package/dist/browser/framed-list.js +3 -0
- package/dist/browser/icon-button.js +4 -0
- package/dist/browser/icon-toggle-button.js +4 -0
- package/dist/browser/list-action-row.js +1 -0
- package/dist/browser/split-button.js +5 -0
- package/dist/browser/summary-row.js +3 -0
- package/dist/catalog-resources.d.ts +1 -0
- package/dist/catalog.d.ts +1 -0
- package/dist/catalog.js +16 -13
- package/dist/catalog.js.map +1 -1
- package/dist/chip.d.ts +1 -0
- package/dist/choice-chips.d.ts +58 -0
- package/dist/choice-chips.js +3 -0
- package/dist/choice-chips.js.map +1 -0
- package/dist/chunk-2MSPNRWJ.js +82 -0
- package/dist/chunk-2MSPNRWJ.js.map +1 -0
- package/dist/{chunk-3PO7JEK7.js → chunk-36TL6BCR.js} +18 -4
- package/dist/chunk-36TL6BCR.js.map +1 -0
- package/dist/{chunk-MORVLMDG.js → chunk-44A6LP54.js} +3 -3
- package/dist/chunk-44A6LP54.js.map +1 -0
- package/dist/{chunk-7QQ3HE47.js → chunk-4LOK4634.js} +7 -3
- package/dist/chunk-4LOK4634.js.map +1 -0
- package/dist/chunk-4UB5Z3ZZ.js +68 -0
- package/dist/chunk-4UB5Z3ZZ.js.map +1 -0
- package/dist/{chunk-PGL6TXFW.js → chunk-6BRRUPJY.js} +6 -2
- package/dist/chunk-6BRRUPJY.js.map +1 -0
- package/dist/{chunk-KAJVVN7Q.js → chunk-6NOLL5KG.js} +2 -2
- package/dist/{chunk-KAJVVN7Q.js.map → chunk-6NOLL5KG.js.map} +1 -1
- package/dist/{chunk-IOS2NXW7.js → chunk-76PWEN5Y.js} +13 -2
- package/dist/chunk-76PWEN5Y.js.map +1 -0
- package/dist/{chunk-B3TROLC2.js → chunk-7IUEBNCO.js} +7 -3
- package/dist/chunk-7IUEBNCO.js.map +1 -0
- package/dist/{chunk-75YOTZ25.js → chunk-AYHC62OZ.js} +10 -6
- package/dist/chunk-AYHC62OZ.js.map +1 -0
- package/dist/{chunk-RZYQFGMM.js → chunk-BBU2SPRE.js} +4 -4
- package/dist/{chunk-RZYQFGMM.js.map → chunk-BBU2SPRE.js.map} +1 -1
- package/dist/{chunk-QCLLBMLA.js → chunk-BU23Z5HZ.js} +37 -12
- package/dist/chunk-BU23Z5HZ.js.map +1 -0
- package/dist/{chunk-BYHGRKC3.js → chunk-CMLPFIC5.js} +3 -1
- package/dist/chunk-CMLPFIC5.js.map +1 -0
- package/dist/{chunk-3XPGJUUQ.js → chunk-D5RGM3XA.js} +3 -2
- package/dist/chunk-D5RGM3XA.js.map +1 -0
- package/dist/chunk-EIET4QLK.js +51 -0
- package/dist/chunk-EIET4QLK.js.map +1 -0
- package/dist/chunk-ETCWQLJV.js +85 -0
- package/dist/chunk-ETCWQLJV.js.map +1 -0
- package/dist/chunk-FDZNYD4C.js +138 -0
- package/dist/chunk-FDZNYD4C.js.map +1 -0
- package/dist/{chunk-XKZPBRU7.js → chunk-FOQK4F3L.js} +25 -5
- package/dist/chunk-FOQK4F3L.js.map +1 -0
- package/dist/{chunk-FL6J644M.js → chunk-GJYQ27C2.js} +4 -2
- package/dist/chunk-GJYQ27C2.js.map +1 -0
- package/dist/{chunk-DL55BSQX.js → chunk-GZE2XVKC.js} +8 -1
- package/dist/chunk-GZE2XVKC.js.map +1 -0
- package/dist/{chunk-YP2G67S7.js → chunk-HO6FU3G7.js} +2 -2
- package/dist/{chunk-YP2G67S7.js.map → chunk-HO6FU3G7.js.map} +1 -1
- package/dist/{chunk-3DXHNLME.js → chunk-IGTWXPTN.js} +25 -8
- package/dist/chunk-IGTWXPTN.js.map +1 -0
- package/dist/chunk-IKS72C6P.js +53 -0
- package/dist/chunk-IKS72C6P.js.map +1 -0
- package/dist/chunk-JYD7G4RG.js +130 -0
- package/dist/chunk-JYD7G4RG.js.map +1 -0
- package/dist/{chunk-LAZLBC2Q.js → chunk-KH4KEMSP.js} +33 -2
- package/dist/chunk-KH4KEMSP.js.map +1 -0
- package/dist/chunk-LL45C7BB.js +122 -0
- package/dist/chunk-LL45C7BB.js.map +1 -0
- package/dist/chunk-M2NRCFRO.js +45 -0
- package/dist/chunk-M2NRCFRO.js.map +1 -0
- package/dist/chunk-MJ5RU6XT.js +173 -0
- package/dist/chunk-MJ5RU6XT.js.map +1 -0
- package/dist/{chunk-GIUOXAVL.js → chunk-P74VXMB6.js} +39 -19
- package/dist/chunk-P74VXMB6.js.map +1 -0
- package/dist/{chunk-TKDDTLG5.js → chunk-PBT3CPPY.js} +31 -3
- package/dist/chunk-PBT3CPPY.js.map +1 -0
- package/dist/chunk-PRG4CL3Q.js +88 -0
- package/dist/chunk-PRG4CL3Q.js.map +1 -0
- package/dist/chunk-QH5KOFNS.js +39 -0
- package/dist/chunk-QH5KOFNS.js.map +1 -0
- package/dist/{chunk-CD5TOO22.js → chunk-QIAPOWHH.js} +2 -2
- package/dist/{chunk-CD5TOO22.js.map → chunk-QIAPOWHH.js.map} +1 -1
- package/dist/chunk-QQ3TTWFH.js +29 -0
- package/dist/chunk-QQ3TTWFH.js.map +1 -0
- package/dist/chunk-QYMJHS4K.js +36 -0
- package/dist/chunk-QYMJHS4K.js.map +1 -0
- package/dist/chunk-R42D2BAO.js +44 -0
- package/dist/chunk-R42D2BAO.js.map +1 -0
- package/dist/chunk-S2XULQEK.js +52 -0
- package/dist/chunk-S2XULQEK.js.map +1 -0
- package/dist/{chunk-NMWDHZVM.js → chunk-S4Y3YTAI.js} +2 -2
- package/dist/{chunk-NMWDHZVM.js.map → chunk-S4Y3YTAI.js.map} +1 -1
- package/dist/{chunk-O27D24CA.js → chunk-TDMHA7C3.js} +3 -2
- package/dist/chunk-TDMHA7C3.js.map +1 -0
- package/dist/chunk-U6QYTMDB.js +85 -0
- package/dist/chunk-U6QYTMDB.js.map +1 -0
- package/dist/{chunk-QQICWWNX.js → chunk-V6W56V3N.js} +18 -7
- package/dist/chunk-V6W56V3N.js.map +1 -0
- package/dist/chunk-W4IK7AWD.js +73 -0
- package/dist/chunk-W4IK7AWD.js.map +1 -0
- package/dist/{chunk-TNG3XKHB.js → chunk-Y3LC7JQO.js} +26 -8
- package/dist/chunk-Y3LC7JQO.js.map +1 -0
- package/dist/chunk-YWQGSUF2.js +84 -0
- package/dist/chunk-YWQGSUF2.js.map +1 -0
- package/dist/{chunk-MTCTX25G.js → chunk-YXOMI7ES.js} +1 -1
- package/dist/chunk-YXOMI7ES.js.map +1 -0
- package/dist/chunk-ZKKO4MHC.js +25 -0
- package/dist/chunk-ZKKO4MHC.js.map +1 -0
- package/dist/collapsible-panel.d.ts +10 -3
- package/dist/collapsible-panel.js +8 -5
- package/dist/collapsible-panel.js.map +1 -1
- package/dist/column-track.d.ts +41 -0
- package/dist/column-track.js +4 -0
- package/dist/column-track.js.map +1 -0
- package/dist/combobox.d.ts +40 -0
- package/dist/combobox.js +3 -0
- package/dist/combobox.js.map +1 -0
- package/dist/content-item.d.ts +21 -4
- package/dist/content-item.js +1 -1
- package/dist/content-swap.d.ts +34 -0
- package/dist/content-swap.js +3 -0
- package/dist/content-swap.js.map +1 -0
- package/dist/corner-status.d.ts +36 -0
- package/dist/corner-status.js +3 -0
- package/dist/corner-status.js.map +1 -0
- package/dist/edge-activity-indicator.d.ts +28 -0
- package/dist/edge-activity-indicator.js +3 -0
- package/dist/edge-activity-indicator.js.map +1 -0
- package/dist/extension-attributes-mu8MFUl0.d.ts +13 -0
- package/dist/file-picker.d.ts +47 -0
- package/dist/file-picker.js +3 -0
- package/dist/file-picker.js.map +1 -0
- package/dist/framed-list.d.ts +47 -0
- package/dist/framed-list.js +4 -0
- package/dist/framed-list.js.map +1 -0
- package/dist/grid.js +1 -1
- package/dist/help-tags-register.js +1 -1
- package/dist/icon-button.d.ts +46 -0
- package/dist/icon-button.js +6 -0
- package/dist/icon-button.js.map +1 -0
- package/dist/icon-toggle-button.d.ts +42 -0
- package/dist/icon-toggle-button.js +6 -0
- package/dist/icon-toggle-button.js.map +1 -0
- package/dist/index.d.ts +23 -6
- package/dist/index.js +44 -27
- package/dist/list-action-row.d.ts +47 -10
- package/dist/list-action-row.js +2 -1
- package/dist/list-header.js +1 -1
- package/dist/list-inset-text.js +1 -1
- package/dist/list-item.d.ts +10 -2
- package/dist/list-item.js +1 -1
- package/dist/list.d.ts +37 -5
- package/dist/list.js +1 -1
- package/dist/nav-stack.d.ts +1 -0
- package/dist/nav-stack.js +2 -1
- package/dist/pane.js +2 -1
- package/dist/popup-menu-register.js +18 -1
- package/dist/popup-menu-register.js.map +1 -1
- package/dist/popup-menu.d.ts +28 -3
- package/dist/popup-menu.js +1 -1
- package/dist/row.d.ts +6 -2
- package/dist/row.js +1 -1
- package/dist/select-register.js +1 -1
- package/dist/select.js +2 -1
- package/dist/split-button.d.ts +57 -0
- package/dist/split-button.js +7 -0
- package/dist/split-button.js.map +1 -0
- package/dist/split-view.d.ts +20 -2
- package/dist/split-view.js +22 -1
- package/dist/split-view.js.map +1 -1
- package/dist/state-banner.d.ts +17 -2
- package/dist/state-banner.js +2 -1
- package/dist/styles/badge.css +27 -0
- package/dist/styles/catalog/components/catalog-example.css +7 -3
- package/dist/styles/choice-chips.css +154 -0
- package/dist/styles/column-track.css +57 -0
- package/dist/styles/combobox.css +113 -0
- package/dist/styles/components/actions/icon-button/icon-button.css +22 -0
- package/dist/styles/components/actions/icon-toggle-button/icon-toggle-button.css +83 -0
- package/dist/styles/components/actions/popup-menu/popup-menu.css +69 -1
- package/dist/styles/components/actions/split-button/split-button.css +95 -0
- package/dist/styles/components/actions/toolbar/toolbar.css +16 -9
- package/dist/styles/components/actions/toolbar-control-group/toolbar-control-group.css +144 -48
- package/dist/styles/components/actions/toolbar-text/toolbar-text.css +23 -0
- package/dist/styles/components/collections/framed-list/framed-list.css +47 -0
- package/dist/styles/components/collections/list/list.css +44 -0
- package/dist/styles/components/collections/list-action-row/list-action-row.css +39 -0
- package/dist/styles/components/collections/list-item/list-item.css +45 -0
- package/dist/styles/components/collections/summary-row/summary-row.css +161 -0
- package/dist/styles/components/data-display/value-table/value-table.css +76 -0
- package/dist/styles/components/feedback/badge/badge.css +27 -0
- package/dist/styles/components/feedback/corner-status/corner-status.css +60 -0
- package/dist/styles/components/feedback/edge-activity-indicator/edge-activity-indicator.css +127 -0
- package/dist/styles/components/feedback/state-banner/state-banner.css +38 -0
- package/dist/styles/components/forms/choice-chips/choice-chips.css +154 -0
- package/dist/styles/components/forms/combobox/combobox.css +113 -0
- package/dist/styles/components/forms/file-picker/file-picker.css +81 -0
- package/dist/styles/components/forms/token-search-field/token-search-field.css +12 -1
- package/dist/styles/components/layout/column-track/column-track.css +57 -0
- package/dist/styles/components/layout/content-swap/content-swap.css +154 -0
- package/dist/styles/components/layout/pane/pane.css +2 -8
- package/dist/styles/components/layout/workbench/workbench.css +2 -8
- package/dist/styles/components/navigation/tab-navigator/tab-navigator.css +1 -4
- package/dist/styles/components/surfaces/content-item/content-item.css +18 -0
- package/dist/styles/components/surfaces/sunken-panel/sunken-panel.css +1 -4
- package/dist/styles/components/surfaces/surface-scaffold/surface-scaffold.css +119 -0
- package/dist/styles/components/typography/text/text.css +62 -0
- package/dist/styles/content-item.css +18 -0
- package/dist/styles/content-swap.css +154 -0
- package/dist/styles/corner-status.css +60 -0
- package/dist/styles/document.css +65 -0
- package/dist/styles/edge-activity-indicator.css +127 -0
- package/dist/styles/file-picker.css +81 -0
- package/dist/styles/foundation.css +8 -0
- package/dist/styles/framed-list.css +47 -0
- package/dist/styles/icon-button.css +22 -0
- package/dist/styles/icon-toggle-button.css +83 -0
- package/dist/styles/list-action-row.css +39 -0
- package/dist/styles/list-item.css +45 -0
- package/dist/styles/list.css +44 -0
- package/dist/styles/pane.css +2 -8
- package/dist/styles/popup-menu.css +69 -1
- package/dist/styles/split-button.css +95 -0
- package/dist/styles/state-banner.css +38 -0
- package/dist/styles/styles.css +12 -0
- package/dist/styles/summary-row.css +161 -0
- package/dist/styles/sunken-panel.css +1 -4
- package/dist/styles/surface-scaffold.css +119 -0
- package/dist/styles/tab-navigator.css +1 -4
- package/dist/styles/text.css +62 -0
- package/dist/styles/token-search-field.css +12 -1
- package/dist/styles/toolbar-control-group.css +144 -48
- package/dist/styles/toolbar-text.css +23 -0
- package/dist/styles/toolbar.css +16 -9
- package/dist/styles/value-table.css +76 -0
- package/dist/styles/webawesome.css +4 -4
- package/dist/styles/workbench.css +2 -8
- package/dist/summary-row.d.ts +56 -0
- package/dist/summary-row.js +4 -0
- package/dist/summary-row.js.map +1 -0
- package/dist/sunken-panel.d.ts +8 -1
- package/dist/sunken-panel.js +2 -1
- package/dist/surface-scaffold-register.js +7 -1
- package/dist/surface-scaffold-register.js.map +1 -1
- package/dist/surface-scaffold.d.ts +75 -2
- package/dist/surface-scaffold.js +2 -1
- package/dist/tab-navigator.js +4 -1
- package/dist/tab-navigator.js.map +1 -1
- package/dist/text.d.ts +39 -4
- package/dist/text.js +1 -1
- package/dist/toolbar-control-group.d.ts +8 -1
- package/dist/toolbar-control-group.js +1 -1
- package/dist/toolbar-text.d.ts +14 -1
- package/dist/toolbar-text.js +1 -1
- package/dist/toolbar.d.ts +14 -3
- package/dist/toolbar.js +1 -1
- package/dist/value-table.d.ts +20 -2
- package/dist/value-table.js +1 -1
- package/dist/wire-catalog.d.ts +1 -0
- package/dist/wire-comboboxes.d.ts +26 -0
- package/dist/wire-comboboxes.js +3 -0
- package/dist/wire-comboboxes.js.map +1 -0
- package/dist/wire-corner-status.d.ts +11 -0
- package/dist/wire-corner-status.js +3 -0
- package/dist/wire-corner-status.js.map +1 -0
- package/dist/wire-file-pickers.d.ts +26 -0
- package/dist/wire-file-pickers.js +3 -0
- package/dist/wire-file-pickers.js.map +1 -0
- package/dist/wire-list-reorder.d.ts +41 -0
- package/dist/wire-list-reorder.js +3 -0
- package/dist/wire-list-reorder.js.map +1 -0
- package/dist/wire-token-search-fields.js +1 -1
- package/dist/workbench.d.ts +1 -0
- package/dist/workbench.js +2 -1
- package/docs/accessibility.md +45 -2
- package/docs/anchored-surface.md +15 -7
- package/docs/app-layouts.md +2 -1
- package/docs/component-contract.md +26 -6
- package/docs/component-selection.md +149 -13
- package/docs/design/templates/choice-chips/color-palette-dark.svg +1 -0
- package/docs/design/templates/choice-chips/color-palette.svg +1 -0
- package/docs/design/templates/choice-chips/compact-icons-dark.svg +1 -0
- package/docs/design/templates/choice-chips/compact-icons.svg +1 -0
- package/docs/design/templates/choice-chips-dark.svg +1 -0
- package/docs/design/templates/choice-chips.svg +1 -0
- package/docs/design/templates/list-action-row/trailing-menu-dark.svg +1 -0
- package/docs/design/templates/list-action-row/trailing-menu.svg +1 -0
- package/docs/design/templates/list-action-row-dark.svg +1 -1
- package/docs/design/templates/list-action-row.svg +1 -1
- package/docs/design/templates/state-banner/strip-dark.svg +1 -0
- package/docs/design/templates/state-banner/strip.svg +1 -0
- package/docs/design/templates/state-banner-dark.svg +1 -1
- package/docs/design/templates/state-banner.svg +1 -1
- package/docs/design/templates.md +1 -1
- package/docs/document-baseline.md +51 -0
- package/docs/layout.md +52 -1
- package/docs/split-view.md +20 -2
- package/docs/sunken-panel.md +13 -0
- package/docs/surface-scaffold.md +66 -1
- package/docs/ux-demo.md +1 -0
- package/docs/webawesome-theme.md +6 -2
- package/llms.txt +125 -16
- package/package.json +89 -1
- package/dist/chunk-3DXHNLME.js.map +0 -1
- package/dist/chunk-3PO7JEK7.js.map +0 -1
- package/dist/chunk-3XPGJUUQ.js.map +0 -1
- package/dist/chunk-4Y4L5YEI.js +0 -66
- package/dist/chunk-4Y4L5YEI.js.map +0 -1
- package/dist/chunk-75YOTZ25.js.map +0 -1
- package/dist/chunk-7QQ3HE47.js.map +0 -1
- package/dist/chunk-A7DYEERU.js +0 -59
- package/dist/chunk-A7DYEERU.js.map +0 -1
- package/dist/chunk-B3TROLC2.js.map +0 -1
- package/dist/chunk-BYHGRKC3.js.map +0 -1
- package/dist/chunk-DL55BSQX.js.map +0 -1
- package/dist/chunk-FL6J644M.js.map +0 -1
- package/dist/chunk-GIUOXAVL.js.map +0 -1
- package/dist/chunk-IOS2NXW7.js.map +0 -1
- package/dist/chunk-J3AWE5I4.js +0 -50
- package/dist/chunk-J3AWE5I4.js.map +0 -1
- package/dist/chunk-LAZLBC2Q.js.map +0 -1
- package/dist/chunk-MORVLMDG.js.map +0 -1
- package/dist/chunk-MTCTX25G.js.map +0 -1
- package/dist/chunk-O27D24CA.js.map +0 -1
- package/dist/chunk-PGL6TXFW.js.map +0 -1
- package/dist/chunk-QCLLBMLA.js.map +0 -1
- package/dist/chunk-QQICWWNX.js.map +0 -1
- package/dist/chunk-TKDDTLG5.js.map +0 -1
- package/dist/chunk-TNG3XKHB.js.map +0 -1
- package/dist/chunk-XKZPBRU7.js.map +0 -1
package/llms.txt
CHANGED
|
@@ -27,6 +27,8 @@ twice. Check contrast in both color schemes over the actual backdrop. See
|
|
|
27
27
|
For arbitrary interactive help or popup content, use `openAnchoredSurface` or
|
|
28
28
|
`openAnchoredSurfaceAt` from `@kerfjs/ui/anchored-surface`; see
|
|
29
29
|
[AnchoredSurface](./docs/anchored-surface.md). The app owns content and actions.
|
|
30
|
+
Inside a native `<dialog>`, `wa-dialog`, or `wa-drawer`, the surface stays
|
|
31
|
+
interactive and closes with the dialog.
|
|
30
32
|
For a public subpath containing several visual components, use a folder with one
|
|
31
33
|
component per source file and one owned stylesheet per visual component. Keep its
|
|
32
34
|
compatibility entrypoints implementation-free: JavaScript/TypeScript only re-exports
|
|
@@ -201,17 +203,24 @@ headingLevel`, `TokenSearchField clearIcon`, `ContentItem frame="framed"` for a
|
|
|
201
203
|
own the geometry (8px inline margin + 1px border + 8px padding). Render an
|
|
202
204
|
ordinary surface-like child as `ContentItem` (`@kerfjs/ui/content-item`) with
|
|
203
205
|
typed `frame` (`none`/`framed`) and `shape` (`rounded`/`pill`) props instead
|
|
204
|
-
of hand-writing `<div class="kui-content-item">`.
|
|
206
|
+
of hand-writing `<div class="kui-content-item">`. For a chat transcript, set
|
|
207
|
+
`bubble="start"` (other participants) or `bubble="end"` with
|
|
208
|
+
`appearance="brand-loud"` (the person's own messages): the item fits its
|
|
209
|
+
message up to 80% of the row. Do not add a
|
|
205
210
|
container padding on top of a content-item's own margin — pick one owner. Use
|
|
206
211
|
`.kui-content` for 24px major vertical rhythm.
|
|
207
212
|
- **Opt into document globals explicitly.** Import `@kerfjs/ui/document.css`
|
|
208
213
|
once for border-box sizing, token-backed body/link presentation, inherited
|
|
209
|
-
native table-cell and form-control font metrics,
|
|
210
|
-
|
|
214
|
+
native table-cell and form-control font metrics, zero body margin, and
|
|
215
|
+
zero-specificity semantic cursors for native controls (pointer, not-allowed
|
|
216
|
+
when disabled, text on text inputs). Put `.kui-app-root` on the one direct mount container only when a
|
|
211
217
|
percentage-height shell needs the provided `html` → `body` → app-root height
|
|
212
|
-
chain.
|
|
218
|
+
chain. Add `data-viewport="locked"` to that body-child root for a
|
|
219
|
+
full-viewport shell whose document never scrolls (`100dvh` and
|
|
220
|
+
`overflow: clip` on `html`, `body`, and the root). The baseline is not part of `styles.css` or component browser imports.
|
|
213
221
|
- **Use compact layout options where needed.** `Text flush lineHeight="tight"`
|
|
214
|
-
fits short dialog copy
|
|
222
|
+
fits short dialog copy, and `Text align="center"` centers wrapping status
|
|
223
|
+
copy; `ValueTable density="compact"` reduces row spacing,
|
|
215
224
|
with public row column, padding, and gap tokens for specific metadata layouts.
|
|
216
225
|
`ToolbarText size="xsmall"` suits a dense rail heading. The
|
|
217
226
|
`TokenSearchField` editor shrinks in narrow groups; its minimum width can be
|
|
@@ -229,7 +238,13 @@ headingLevel`, `TokenSearchField clearIcon`, `ContentItem frame="framed"` for a
|
|
|
229
238
|
full row and a reduced-motion-aware downward entrance.
|
|
230
239
|
`--kui-toolbar-inset: 0px` removes an embedded Toolbar's outer padding and
|
|
231
240
|
corresponding minimum-height allowance while preserving its zone gap and
|
|
232
|
-
safe-area compensation.
|
|
241
|
+
safe-area compensation. For a shorter header embedded in a panel or card,
|
|
242
|
+
pass `density="compact"` (40px: a 34px control band and 3px block insets)
|
|
243
|
+
and give its groups `size="compact"`; never shrink a Toolbar with CSS.
|
|
244
|
+
Composites forward `density` from their `ToolbarConfig` (Workbench panel,
|
|
245
|
+
main, and bottom toolbars, CollapsiblePanel, NavStack, SplitView) and size
|
|
246
|
+
the groups they compose (panel toggles, the back button) to match; pass
|
|
247
|
+
`density` to `CollapsiblePanelRelocated` when its toolbar is compact.
|
|
233
248
|
- **Position region restore controls declaratively.** A ResizableRegion has a
|
|
234
249
|
background token, `contentOverflow="visible"` for an anchored popup,
|
|
235
250
|
top/bottom `restorePosition`, typed `restoreInset`, and
|
|
@@ -239,7 +254,13 @@ headingLevel`, `TokenSearchField clearIcon`, `ContentItem frame="framed"` for a
|
|
|
239
254
|
gives option rows more room. `multiline` wraps labels, with
|
|
240
255
|
`multilineIconAlign="center"` when the icon should center on the whole copy.
|
|
241
256
|
`divider` owns row separators and `state="drag-target"` paints the drop
|
|
242
|
-
target.
|
|
257
|
+
target. For a reorderable list, set `draggable` + `itemId` on `ListItem`,
|
|
258
|
+
`ListItemLink`, or `ListActionRow` rows and call `wireListReorder` (from
|
|
259
|
+
`@kerfjs/ui/wire-list-reorder`) once; it paints the dimmed dragging rows and
|
|
260
|
+
the before/after insertion line, supports Alt+Shift+ArrowUp/ArrowDown, and
|
|
261
|
+
reports `{ listId, sourceIds, target: { id, position }, source }` for
|
|
262
|
+
`reorderListItems`. The `dragging` / `dropPosition` props render the same
|
|
263
|
+
states from app-owned drag state. Public ListItem tokens set row, icon, label, and trailing geometry;
|
|
243
264
|
ListHeader `size="xs|sm|m|l|xl"` sets label scale independently of
|
|
244
265
|
`headingLevel` (`sm` keeps the current FieldLabel-sized uppercase style;
|
|
245
266
|
`m`/`l`/`xl` match themed h5/h4/h3). Its height, title padding, and border
|
|
@@ -362,8 +383,13 @@ headingLevel`, `TokenSearchField clearIcon`, `ContentItem frame="framed"` for a
|
|
|
362
383
|
row, as in the catalog resource footer. `PopupMenu` items also support nested `submenu`
|
|
363
384
|
actions, headings, dividers, checked or trailing choice marks, danger tone,
|
|
364
385
|
and disabled reasons; nested headings/dividers stay out of keyboard choices;
|
|
365
|
-
use `context` with `
|
|
366
|
-
|
|
386
|
+
use `context` with `anchor` + `openPopupMenu` (or `openPopupMenuAt`) and
|
|
387
|
+
`closePopupMenu` for pointer-anchored row menus; the menu owns its
|
|
388
|
+
zero-footprint anchor host, so add no wrapper or CSS. `openPopupMenuAt`
|
|
389
|
+
also opens a button-triggered menu at the pointer for one opening. A row's
|
|
390
|
+
trailing "…" overflow menu is `ListActionRow`'s `trailingMenu` (`label`,
|
|
391
|
+
`icon`, `items`, optional `placement` and `disabled`), which renders a
|
|
392
|
+
`PopupMenu` as the row's sibling trailing control. Do not force a dropdown or button width. Nothing
|
|
367
393
|
wraps inside a group: an icon sits beside its label on one row, and a
|
|
368
394
|
`ToolbarText` is one ellipsized line unless you opt into `wrap`/`maxLines`. A
|
|
369
395
|
Select or PopupMenu trigger drops its focus ring while its popup is open and
|
|
@@ -378,8 +404,11 @@ headingLevel`, `TokenSearchField clearIcon`, `ContentItem frame="framed"` for a
|
|
|
378
404
|
divider to make it look right.
|
|
379
405
|
- **Use one direct toolbar composition for panel/dialog/page headings.** Put an
|
|
380
406
|
optional icon in a `ToolbarControlGroup`, an extra-large `ToolbarText` directly
|
|
381
|
-
in the leading zone, and actions in a trailing group.
|
|
382
|
-
|
|
407
|
+
in the leading zone, and actions in a trailing group. A short supporting
|
|
408
|
+
line ("Changes save automatically.") is the `ToolbarText` `description`:
|
|
409
|
+
quiet, one truncating line under the title, aligned with its text, with
|
|
410
|
+
`descriptionId` for `aria-describedby`. Longer copy is app-owned content
|
|
411
|
+
below. Do not create a private heading wrapper or restyle the
|
|
383
412
|
toolbar. A narrow peripheral rail or drawer, where extra-large would truncate
|
|
384
413
|
at its minimum size, names itself with the default `ToolbarText` size.
|
|
385
414
|
`ToolbarText size="xlarge-fixed"` keeps the 20px `--kui-font-l` heading step;
|
|
@@ -494,6 +523,10 @@ headingLevel`, `TokenSearchField clearIcon`, `ContentItem frame="framed"` for a
|
|
|
494
523
|
`onRemoveToken`, ArrowRight moves the caret past a trailing chip), and an
|
|
495
524
|
`onEdit({id, editor, event})` input callback (the `InputEvent` lets you gate on `inputType`/`data`) — so the app can drop its own keydown/input
|
|
496
525
|
boilerplate while still owning parsing and controlled token state.
|
|
526
|
+
When `onEdit` or `onRemoveToken` changes tokens and the controlled render
|
|
527
|
+
replaces the focused editor, the helper hands focus and caret to the new
|
|
528
|
+
editor in the same task (end stays at end), so do not add a refocus
|
|
529
|
+
`MutationObserver` or `requestAnimationFrame`.
|
|
497
530
|
- **Placeholder loading state, don't rebuild it.** For a value or component that is
|
|
498
531
|
still loading, set `placeholder` on the component (`Select`, `ListHeader`,
|
|
499
532
|
`ListItem`, `ValueTableRow`, `SegmentedControl`, `StateBanner`,
|
|
@@ -523,6 +556,69 @@ headingLevel`, `TokenSearchField clearIcon`, `ContentItem frame="framed"` for a
|
|
|
523
556
|
- **Configure StateBanner copy and action placement.** `copyLayout="stacked"`
|
|
524
557
|
puts detail below the title and badge; `actionPlacement="below"` gives the
|
|
525
558
|
action a separate trailing row. The inline defaults remain compact.
|
|
559
|
+
`presentation="strip"` renders a flush, square, full-width band for a
|
|
560
|
+
layout edge with tone-colored `dividerSides` (bottom by default) instead of
|
|
561
|
+
the inset rounded card; never restyle a card into a strip.
|
|
562
|
+
- **Use `SplitButton` for a primary action with options.** One loud semantic
|
|
563
|
+
fill with a native primary button and an options trigger (`aria-expanded`,
|
|
564
|
+
`aria-haspopup`); `tone`, `fill`, `busy`, and `disabled` are props. Never
|
|
565
|
+
build one from `wa-button-group` or app CSS on native buttons.
|
|
566
|
+
- **Use `IconToggleButton` for an icon toggle outside a Toolbar.** In content or a
|
|
567
|
+
pane footer, `IconToggleButton({ icon, iconName, label, pressed, action })`
|
|
568
|
+
gives a native `aria-pressed` button the single contained toolbar group's
|
|
569
|
+
geometry; never wrap a `ToolbarControlGroup` outside a toolbar or restyle a
|
|
570
|
+
button to match it.
|
|
571
|
+
- **Let an icon-state toggle skip selected chrome.** When a pressed toggle's
|
|
572
|
+
glyph already shows its state (an empty or filled star), set
|
|
573
|
+
`data-selected-chrome="none"` on that button, or `selectedChrome="none"` on
|
|
574
|
+
its `ToolbarControlGroup`; never override the group's pressed-button styles.
|
|
575
|
+
- **Lay out a `ValueTable` through its props.** `labelWidth` sets a minimum
|
|
576
|
+
label column, `presentation="stacked"` puts values under labels, and
|
|
577
|
+
`stackBelow="compact" | "narrow"` stacks only while the table is narrower
|
|
578
|
+
than 512px/576px; do not override `--kui-value-table-row-columns`.
|
|
579
|
+
- **Show selectable item summaries with `SummaryRow`.** One `role="option"`
|
|
580
|
+
per item as a list `row` or board `card`, with a state `rail`, a clamped
|
|
581
|
+
`title`, `trailingMeta`, a `metadata` line, `selected`, `dimmed`, and
|
|
582
|
+
`listEdge` rounding; the app owns the listbox and keyboard movement. Never
|
|
583
|
+
hand-roll ticket-row chrome.
|
|
584
|
+
- **Group settings rows in `FramedList`.** For rows of arbitrary content in
|
|
585
|
+
one rounded frame with dividers between them (settings, account cards,
|
|
586
|
+
shortcut lists), compose `FramedListRow`s; `ValueTable` is the same frame for
|
|
587
|
+
label/value facts. Never hand-roll a `ul` with borders and row padding.
|
|
588
|
+
- **Square an icon-only button with `IconButton`.** Web Awesome squares a
|
|
589
|
+
`wa-button` only for a lone `wa-icon`; with a `LucideIcon` use
|
|
590
|
+
`IconButton({ icon, iconName, label })` (label required) instead of
|
|
591
|
+
overriding `wa-button::part(base)`. Inside a `ToolbarControlGroup` keep a
|
|
592
|
+
native `button`; the group owns its geometry.
|
|
593
|
+
- **Paint a strip's surface with `List surface`.** `surface="base"` or
|
|
594
|
+
`"raised"` fills a List and its insets with a solid surface (a banner strip
|
|
595
|
+
above a sunken work area); never wrap it in app CSS that sets a background.
|
|
596
|
+
- **Use `Combobox` to pick or create a value by typing.** A themed native
|
|
597
|
+
input on the ARIA combobox pattern with filtered suggestions and an optional
|
|
598
|
+
create option; `wireComboboxes(root, { onCommit })` reports `{ id, value,
|
|
599
|
+
created, input }`. Never use a hand-styled `<input list>` + `<datalist>`.
|
|
600
|
+
- **Pick or drop files with `FilePickerTrigger` / `FileDropZone`.** Both wrap
|
|
601
|
+
a real, visually hidden file input; `wireFilePickers(root, { onFiles })`
|
|
602
|
+
reports browsed and dropped files and highlights the zone while dragging.
|
|
603
|
+
Never hand-style a file input, its label, or a dashed drop target.
|
|
604
|
+
- **Swap content in place with `ContentSwap`.** Two sides share one cell;
|
|
605
|
+
`active`, `transition` (`push`, `crossfade`, `none`), and `direction` drive
|
|
606
|
+
Kerf-owned motion with an inert, hidden inactive side and reduced-motion
|
|
607
|
+
fallback. Use `NavStack` for full views with toolbars.
|
|
608
|
+
- **Lay out a kanban board with `ColumnTrack`.** Equal columns that never
|
|
609
|
+
narrow below `minColumnWidth` scroll sideways; `layout="paged"` pages one
|
|
610
|
+
column at a time with a peek and snapping. Never re-track a `Grid` or
|
|
611
|
+
hand-roll scroll-snap CSS.
|
|
612
|
+
- **Show ambient activity with `EdgeActivityIndicator`.** A layout-free,
|
|
613
|
+
pointer-inert top-edge strip whose bars ripple while `busy`, with an optional
|
|
614
|
+
polite `message` pill; Kerf owns the wave and reduced motion. Never hand-roll
|
|
615
|
+
fixed bars, keyframes, or a hanging pill in app CSS.
|
|
616
|
+
- **Host app-level progress in `CornerStatus`.** For a non-dismissible
|
|
617
|
+
"Loading…" or "Updating… N of M" with no home beside the affected work, put
|
|
618
|
+
a `StateBanner` (`urgency="status"`) inside `CornerStatus` and call
|
|
619
|
+
`wireCornerStatus` once: a top-layer manual popover at a safe-area-aware
|
|
620
|
+
corner, with no close button, light dismiss, Escape, or focus change. Never
|
|
621
|
+
position a banner with fixed-position CSS or hide a toast's close part.
|
|
526
622
|
- **Size a Select through its API.** `triggerWidth` chooses `fit-content`,
|
|
527
623
|
`max-content`, or `fill`; `--kui-select-trigger-max-width` caps it. For custom
|
|
528
624
|
selected text, use the public color, font-size, and font-weight tokens; the
|
|
@@ -548,17 +644,30 @@ headingLevel`, `TokenSearchField clearIcon`, `ContentItem frame="framed"` for a
|
|
|
548
644
|
For new content without a count, use the text-free `size="dot"` form: it
|
|
549
645
|
takes no children, and needs a `label` (announced as an image) or
|
|
550
646
|
`ariaHidden` when its owner announces it. A `TabNavigator` tab shows the dot
|
|
551
|
-
with `badge: true` plus its required `badgeLabel`.
|
|
647
|
+
with `badge: true` plus its required `badgeLabel`. A text badge takes a
|
|
648
|
+
decorative leading `icon`, a `title` tooltip, and `data-*` `rootAttributes`
|
|
649
|
+
for app identity; never wrap a Badge or nest a `Row` in it for those.
|
|
650
|
+
For app-supplied text that can run long (a tag or category name), set
|
|
651
|
+
`maxWidth` (a `CssLength`, such as `px(160)`): the label truncates with an
|
|
652
|
+
ellipsis and string or number content becomes the hover `title`.
|
|
552
653
|
- **Use `Chip` for removable tags.** Give the native remove button a delegated
|
|
553
654
|
`removeAction` and a specific `removeLabel`; the application updates the tag
|
|
554
655
|
list. `itemId` identifies the chip to the action handler. `size="compact"`
|
|
555
656
|
gives a 20px chip and 16px remove button; `disabled` disables removal.
|
|
657
|
+
- **Use `ChoiceChips` for a wrapping exclusive choice.** When one value comes
|
|
658
|
+
from a visible set too large for a `SegmentedControl` track (a nine-color
|
|
659
|
+
palette in a 560px dialog), render separate pills backed by native radios:
|
|
660
|
+
one Tab stop, arrow-key selection, and a real form value under `name`. Name
|
|
661
|
+
the group with `label` or `labelledBy`, lead choices with a `swatch`
|
|
662
|
+
(`CssColor`, or `'transparent'` for the struck-through no-color dot) or an
|
|
663
|
+
`icon`, and handle the delegated `action` on `change`. Never wrap a
|
|
664
|
+
`SegmentedControl` or button-appearance `wa-radio` set instead.
|
|
556
665
|
|
|
557
666
|
## Public exports
|
|
558
667
|
|
|
559
668
|
`Badge`, `LucideIcon`, `DisclosureArrow`, `Toolbar`, `ToolbarControlGroup`, `ToolbarActionLink`, `FloatingToolbar`, `ToolbarText`, `Text`,
|
|
560
|
-
`ListItem`, `ListActionRow`, `ListHeader`, `ListInsetControl`,
|
|
561
|
-
`ListInsetText`, `SegmentedControl`,
|
|
669
|
+
`ListItem`, `ListActionRow` (+ `wireListReorder`, `reorderListItems`), `ListHeader`, `ListInsetControl`,
|
|
670
|
+
`ListInsetText`, `SegmentedControl`, `ChoiceChips`,
|
|
562
671
|
`Select`, `TokenSearchField` (+ `readTokenSearchField`, `placeTokenSearchCaret`,
|
|
563
672
|
`wireTokenSearchFields`), `AppTab`, `TabBar` (+ `wireTabBars`, `reorderTabs`),
|
|
564
673
|
`wireScrollDividers` (scroll-state dividers for every `Pane`, `NavStack`,
|
|
@@ -628,8 +737,8 @@ details.
|
|
|
628
737
|
|
|
629
738
|
Select menus use native viewport shifting with 10px gutters: default menus grow to content (up to 20rem), while `fitMenu` matches trigger width and long labels wrap. Keep popup sizing and position repairs out of consumer CSS.
|
|
630
739
|
|
|
631
|
-
Modal `DialogSurface` bounds use typed `viewportGutter` and `maxHeight` (`CssLength` or `"viewport"`); explicit caps stay within the dynamic viewport minus both gutters. Omitted props preserve Web Awesome defaults. Application render state chooses responsive values, and preview layout remains application-owned.
|
|
740
|
+
Key sibling `DialogSurface`s that render conditionally with `rootAttributes={{ "data-key": "…" }}` so a re-render morphs each dialog into itself; never wrap one in a keyed app `div`. Modal `DialogSurface` bounds use typed `viewportGutter` and `maxHeight` (`CssLength` or `"viewport"`); explicit caps stay within the dynamic viewport minus both gutters. Omitted props preserve Web Awesome defaults. Application render state chooses responsive values, and preview layout remains application-owned. `height` sets a definite bounded modal size and `bodyLayout="fill"` lets one child fill the body. `PopoverDialogSurface` is the non-modal, light-dismiss counterpart on the native Popover API, with the same size props and an `embedded` in-flow presentation.
|
|
632
741
|
|
|
633
|
-
Import `@kerfjs/ui/surface-scaffold/register` once when using `DialogSurface`: it registers `wa-dialog` and repairs Web Awesome 3.12 native dialog names before the first modal opening. Headed dialogs reference the rendered title, including live slotted labels; headerless dialogs use the public `label`. Explicit host `aria-label` and pre-existing native names are preserved. Geometry-only markup stays CSS-free and does not register Web Awesome implicitly.
|
|
742
|
+
Import `@kerfjs/ui/surface-scaffold/register` once when using `DialogSurface`: it registers `wa-dialog` and repairs Web Awesome 3.12 native dialog names before the first modal opening. Headed dialogs reference the rendered title, including live slotted labels; headerless dialogs use the public `label`. Explicit host `aria-label` and pre-existing native names are preserved. A host that is itself an explicit dialog (`role="dialog"` or `"alertdialog"` with its own name) keeps that name alone: the native panel is left unnamed, so one dialog carries the name. Geometry-only markup stays CSS-free and does not register Web Awesome implicitly.
|
|
634
743
|
|
|
635
744
|
Toolbar visibility measurement probes and invisible state children are helper-owned and survive Kerf rerenders through `data-morph-preserve`. Actual CSS visibility stays stable while rendering removes transient parent markers, preventing geometry-driven render feedback and repeated probe recreation. Toolbar replacement, explicit internal-node removal and disposal retain their existing behavior.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kerfjs/ui",
|
|
3
|
-
"version": "5.0.0-beta.
|
|
3
|
+
"version": "5.0.0-beta.96",
|
|
4
4
|
"description": "Accessible, composable UI primitives for kerf applications.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
@@ -224,6 +224,10 @@
|
|
|
224
224
|
"types": "./dist/wire-scroll-dividers.d.ts",
|
|
225
225
|
"import": "./dist/wire-scroll-dividers.js"
|
|
226
226
|
},
|
|
227
|
+
"./wire-list-reorder": {
|
|
228
|
+
"types": "./dist/wire-list-reorder.d.ts",
|
|
229
|
+
"import": "./dist/wire-list-reorder.js"
|
|
230
|
+
},
|
|
227
231
|
"./wire-toolbar-visibility": {
|
|
228
232
|
"types": "./dist/wire-toolbar-visibility.d.ts",
|
|
229
233
|
"import": "./dist/wire-toolbar-visibility.js"
|
|
@@ -303,6 +307,11 @@
|
|
|
303
307
|
"browser": "./dist/browser/segmented-control.js",
|
|
304
308
|
"import": "./dist/segmented-control.js"
|
|
305
309
|
},
|
|
310
|
+
"./choice-chips": {
|
|
311
|
+
"types": "./dist/choice-chips.d.ts",
|
|
312
|
+
"browser": "./dist/browser/choice-chips.js",
|
|
313
|
+
"import": "./dist/choice-chips.js"
|
|
314
|
+
},
|
|
306
315
|
"./token-search-field": {
|
|
307
316
|
"types": "./dist/token-search-field.d.ts",
|
|
308
317
|
"browser": "./dist/browser/token-search-field.js",
|
|
@@ -342,6 +351,73 @@
|
|
|
342
351
|
"types": "./dist/webawesome.d.ts",
|
|
343
352
|
"import": "./dist/webawesome.js"
|
|
344
353
|
},
|
|
354
|
+
"./summary-row": {
|
|
355
|
+
"types": "./dist/summary-row.d.ts",
|
|
356
|
+
"browser": "./dist/browser/summary-row.js",
|
|
357
|
+
"import": "./dist/summary-row.js"
|
|
358
|
+
},
|
|
359
|
+
"./framed-list": {
|
|
360
|
+
"types": "./dist/framed-list.d.ts",
|
|
361
|
+
"browser": "./dist/browser/framed-list.js",
|
|
362
|
+
"import": "./dist/framed-list.js"
|
|
363
|
+
},
|
|
364
|
+
"./split-button": {
|
|
365
|
+
"types": "./dist/split-button.d.ts",
|
|
366
|
+
"browser": "./dist/browser/split-button.js",
|
|
367
|
+
"import": "./dist/split-button.js"
|
|
368
|
+
},
|
|
369
|
+
"./icon-toggle-button": {
|
|
370
|
+
"types": "./dist/icon-toggle-button.d.ts",
|
|
371
|
+
"browser": "./dist/browser/icon-toggle-button.js",
|
|
372
|
+
"import": "./dist/icon-toggle-button.js"
|
|
373
|
+
},
|
|
374
|
+
"./icon-button": {
|
|
375
|
+
"types": "./dist/icon-button.d.ts",
|
|
376
|
+
"browser": "./dist/browser/icon-button.js",
|
|
377
|
+
"import": "./dist/icon-button.js"
|
|
378
|
+
},
|
|
379
|
+
"./edge-activity-indicator": {
|
|
380
|
+
"types": "./dist/edge-activity-indicator.d.ts",
|
|
381
|
+
"browser": "./dist/browser/edge-activity-indicator.js",
|
|
382
|
+
"import": "./dist/edge-activity-indicator.js"
|
|
383
|
+
},
|
|
384
|
+
"./combobox": {
|
|
385
|
+
"types": "./dist/combobox.d.ts",
|
|
386
|
+
"browser": "./dist/browser/combobox.js",
|
|
387
|
+
"import": "./dist/combobox.js"
|
|
388
|
+
},
|
|
389
|
+
"./wire-comboboxes": {
|
|
390
|
+
"types": "./dist/wire-comboboxes.d.ts",
|
|
391
|
+
"import": "./dist/wire-comboboxes.js"
|
|
392
|
+
},
|
|
393
|
+
"./file-picker": {
|
|
394
|
+
"types": "./dist/file-picker.d.ts",
|
|
395
|
+
"browser": "./dist/browser/file-picker.js",
|
|
396
|
+
"import": "./dist/file-picker.js"
|
|
397
|
+
},
|
|
398
|
+
"./wire-file-pickers": {
|
|
399
|
+
"types": "./dist/wire-file-pickers.d.ts",
|
|
400
|
+
"import": "./dist/wire-file-pickers.js"
|
|
401
|
+
},
|
|
402
|
+
"./content-swap": {
|
|
403
|
+
"types": "./dist/content-swap.d.ts",
|
|
404
|
+
"browser": "./dist/browser/content-swap.js",
|
|
405
|
+
"import": "./dist/content-swap.js"
|
|
406
|
+
},
|
|
407
|
+
"./column-track": {
|
|
408
|
+
"types": "./dist/column-track.d.ts",
|
|
409
|
+
"browser": "./dist/browser/column-track.js",
|
|
410
|
+
"import": "./dist/column-track.js"
|
|
411
|
+
},
|
|
412
|
+
"./corner-status": {
|
|
413
|
+
"types": "./dist/corner-status.d.ts",
|
|
414
|
+
"browser": "./dist/browser/corner-status.js",
|
|
415
|
+
"import": "./dist/corner-status.js"
|
|
416
|
+
},
|
|
417
|
+
"./wire-corner-status": {
|
|
418
|
+
"types": "./dist/wire-corner-status.d.ts",
|
|
419
|
+
"import": "./dist/wire-corner-status.js"
|
|
420
|
+
},
|
|
345
421
|
"./state-banner": {
|
|
346
422
|
"types": "./dist/state-banner.d.ts",
|
|
347
423
|
"browser": "./dist/browser/state-banner.js",
|
|
@@ -403,8 +479,20 @@
|
|
|
403
479
|
"./skeleton.css": "./dist/styles/skeleton.css",
|
|
404
480
|
"./sunken-panel.css": "./dist/styles/sunken-panel.css",
|
|
405
481
|
"./segmented-control.css": "./dist/styles/segmented-control.css",
|
|
482
|
+
"./choice-chips.css": "./dist/styles/choice-chips.css",
|
|
406
483
|
"./token-search-field.css": "./dist/styles/token-search-field.css",
|
|
407
484
|
"./state-banner.css": "./dist/styles/state-banner.css",
|
|
485
|
+
"./corner-status.css": "./dist/styles/corner-status.css",
|
|
486
|
+
"./column-track.css": "./dist/styles/column-track.css",
|
|
487
|
+
"./content-swap.css": "./dist/styles/content-swap.css",
|
|
488
|
+
"./file-picker.css": "./dist/styles/file-picker.css",
|
|
489
|
+
"./combobox.css": "./dist/styles/combobox.css",
|
|
490
|
+
"./edge-activity-indicator.css": "./dist/styles/edge-activity-indicator.css",
|
|
491
|
+
"./icon-button.css": "./dist/styles/icon-button.css",
|
|
492
|
+
"./icon-toggle-button.css": "./dist/styles/icon-toggle-button.css",
|
|
493
|
+
"./split-button.css": "./dist/styles/split-button.css",
|
|
494
|
+
"./framed-list.css": "./dist/styles/framed-list.css",
|
|
495
|
+
"./summary-row.css": "./dist/styles/summary-row.css",
|
|
408
496
|
"./empty-state.css": "./dist/styles/empty-state.css",
|
|
409
497
|
"./value-table.css": "./dist/styles/value-table.css",
|
|
410
498
|
"./ai/*": "./ai/*",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/actions/toolbar-text/toolbar-text.tsx"],"names":[],"mappings":";;;;AAsEO,SAAS,WAAA,CAAY;AAAA,EAC1B,IAAA;AAAA,EACA,IAAA,GAAO,SAAA;AAAA,EACP,IAAA,GAAO,SAAA;AAAA,EACP,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,EAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA,GAAc,KAAA;AAAA,EACd,IAAA,GAAO,KAAA;AAAA,EACP,QAAA,GAAW,IAAA;AAAA,EACX,QAAA,GAAW,IAAA;AAAA,EACX,IAAA,GAAO,KAAA;AAAA,EACP,IAAA;AAAA,EACA;AACF,CAAA,EAAqB;AACnB,EAAA,MAAM,MAAA,GAAS,IAAA,IAAQ,QAAA,IAAY,IAAA,IAAQ,QAAA,GAAW,CAAA;AACtD,EAAA,IAAI,MAAA,KAAW,MAAA;AACb,IAAA,uBACE,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAK,QAAA;AAAA,QACL,KAAA,EAAO,CAAA,iBAAA,EAAoB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,QAC5C,gBAAA,EAAe,cAAA;AAAA,QACf,WAAA,EAAW,IAAA;AAAA,QACX,iBAAA,EAAiB,SAAA;AAAA,QACjB,iBAAA,EAAiB,SAAA;AAAA,QACjB,WAAA,EAAW,IAAA,KAAS,SAAA,GAAY,MAAA,GAAY,IAAA;AAAA,QAC5C,WAAA,EAAW,OAAO,MAAA,GAAS,MAAA;AAAA,QAC3B,eAAA,EAAe,WAAW,MAAA,GAAY,OAAA;AAAA,QACtC,aAAA,EAAa,MAAA;AAAA,QACb,EAAA;AAAA,QACA,IAAA;AAAA,QAEA,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,wBAAA,EAA0B,QAAA,EAAA,IAAA,EAAK;AAAA;AAAA,KAC7C;AAEJ,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,iBAAA,EAAoB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC5C,gBAAA,EAAe,cAAA;AAAA,MACf,WAAA,EAAW,IAAA;AAAA,MACX,iBAAA,EAAiB,SAAA;AAAA,MACjB,iBAAA,EAAiB,SAAA;AAAA,MACjB,WAAA,EAAW,IAAA,KAAS,SAAA,GAAY,MAAA,GAAY,IAAA;AAAA,MAC5C,WAAA,EAAW,OAAO,MAAA,GAAS,MAAA;AAAA,MAC3B,WAAA,EAAW,OAAO,MAAA,GAAS,MAAA;AAAA,MAC3B,eAAA,EAAe,WAAW,MAAA,GAAY,OAAA;AAAA,MACtC,gBAAA,EAAgB,MAAA,GAAS,MAAA,CAAO,QAAQ,CAAA,GAAI,MAAA;AAAA,MAC5C,KAAA,EAAO,MAAA,GAAS,CAAA,6BAAA,EAAgC,QAAQ,CAAA,CAAA,GAAK,MAAA;AAAA,MAC7D,kBAAA,EAAkB,cAAc,MAAA,GAAS,MAAA;AAAA,MACzC,EAAA;AAAA,MACA,IAAA,EAAM,eAAe,SAAA,GAAY,MAAA;AAAA,MACjC,YAAA,EAAY,YAAA,GAAe,MAAA,CAAO,YAAY,CAAA,GAAI,MAAA;AAAA,MAClD,WAAA,EAAW,cAAc,MAAA,GAAS,MAAA;AAAA,MAClC,IAAA;AAAA,MAEC,QAAA,EAAA,WAAA,mBACC,GAAA,CAAC,QAAA,EAAA,EAAS,KAAA,EAAO,EAAA,CAAG,CAAC,CAAA,EAAG,CAAA,mBAExB,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,wBAAA,EAA0B,QAAA,EAAA,IAAA,EAAK;AAAA;AAAA,GAE/C;AAEJ","file":"chunk-3DXHNLME.js","sourcesContent":["import { type CssLength, em } from '../../../shared/styles/css-values.js';\nimport { Skeleton } from '../../feedback/skeleton/skeleton.js';\n\nexport type ToolbarTextSize =\n 'xlarge' | 'xlarge-fixed' | 'large' | 'default' | 'small' | 'xsmall';\n\nexport type ToolbarTextTone = 'default' | 'dark';\n\n/** ARIA heading level for a title exposed as a heading landmark. */\nexport type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\ninterface ToolbarTextBaseProps {\n text: string;\n size?: ToolbarTextSize;\n /** Use dark-toolbar foregrounds on a dark or photo-backed toolbar. */\n tone?: ToolbarTextTone;\n /** Hide below this Toolbar content width; requires wireToolbarVisibility. */\n hideBelow?: CssLength;\n /** Show only below this Toolbar content width; requires wireToolbarVisibility. */\n showBelow?: CssLength;\n className?: string;\n /** Optional id, e.g. so a dialog can reference the title via aria-labelledby. */\n id?: string;\n /**\n * Show a trailing ellipsis (…) where the text is truncated — on the single line\n * (default), or at the `maxLines` boundary when wrapping. Set false to hard-clip\n * instead. Default true.\n */\n ellipsis?: boolean;\n /**\n * Grow to fill the free space of the flex row it sits in (a Toolbar zone),\n * truncating at the space left by its siblings instead of taking only its\n * text's width. Default false.\n */\n fill?: boolean;\n /** Native named-slot assignment when composed inside a web component. */\n slot?: string;\n /**\n * Cap wrapped text to this many lines, truncating past it. Only takes effect with\n * `wrap`; ignored on a single line. `null`/omitted wraps without a line cap. Default null.\n */\n}\n\ntype ToolbarTextWrappingProps =\n | {\n /** Wrap onto multiple lines; combine with `maxLines` to cap them. */\n wrap: true;\n maxLines?: number | null;\n }\n | { wrap?: false; maxLines?: never };\n\nexport type ToolbarTextProps = ToolbarTextBaseProps &\n (\n | ({\n action?: never;\n /** Expose `role=\"heading\"` and `aria-level` on read-only text. */\n headingLevel?: HeadingLevel;\n /** Render an unanimated loading skeleton instead of the text. */\n placeholder?: boolean;\n } & ToolbarTextWrappingProps)\n | {\n /** Render a native button with this delegated action; the app owns editing. */\n action: string;\n headingLevel?: never;\n placeholder?: never;\n wrap?: never;\n maxLines?: never;\n }\n );\n\nexport function ToolbarText({\n text,\n size = 'default',\n tone = 'default',\n hideBelow,\n showBelow,\n className = '',\n id,\n headingLevel,\n placeholder = false,\n wrap = false,\n ellipsis = true,\n maxLines = null,\n fill = false,\n slot,\n action,\n}: ToolbarTextProps) {\n const capped = wrap && maxLines != null && maxLines > 0;\n if (action !== undefined)\n return (\n <button\n type=\"button\"\n class={`kui-toolbar-text ${className}`.trim()}\n data-component=\"toolbar-text\"\n data-size={size}\n data-hide-below={hideBelow}\n data-show-below={showBelow}\n data-tone={tone === 'default' ? undefined : tone}\n data-fill={fill ? 'true' : undefined}\n data-ellipsis={ellipsis ? undefined : 'false'}\n data-action={action}\n id={id}\n slot={slot}\n >\n <span class=\"kui-toolbar-text__text\">{text}</span>\n </button>\n );\n return (\n <span\n class={`kui-toolbar-text ${className}`.trim()}\n data-component=\"toolbar-text\"\n data-size={size}\n data-hide-below={hideBelow}\n data-show-below={showBelow}\n data-tone={tone === 'default' ? undefined : tone}\n data-fill={fill ? 'true' : undefined}\n data-wrap={wrap ? 'true' : undefined}\n data-ellipsis={ellipsis ? undefined : 'false'}\n data-max-lines={capped ? String(maxLines) : undefined}\n style={capped ? `--kui-toolbar-text-max-lines:${maxLines}` : undefined}\n data-placeholder={placeholder ? 'true' : undefined}\n id={id}\n role={headingLevel ? 'heading' : undefined}\n aria-level={headingLevel ? String(headingLevel) : undefined}\n aria-busy={placeholder ? 'true' : undefined}\n slot={slot}\n >\n {placeholder ? (\n <Skeleton width={em(8)} />\n ) : (\n <span class=\"kui-toolbar-text__text\">{text}</span>\n )}\n </span>\n );\n}\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/collections/list-item/list-item.tsx"],"names":[],"mappings":"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","file":"chunk-3PO7JEK7.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { filterDataAttributes } from '../../../shared/dom/extension-attributes.js';\nimport { em, remify } from '../../../shared/styles/css-values.js';\nimport { withWordBreaks } from '../../../shared/text/word-breaks.js';\nimport { LoadingSpinner } from '../../feedback/loading-spinner/loading-spinner.js';\nimport { Skeleton } from '../../feedback/skeleton/skeleton.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-has-description',\n 'data-multiline',\n 'data-density',\n 'data-divider',\n 'data-busy',\n 'data-state',\n 'data-kui-disabled',\n 'data-icon-align',\n]);\n\ntype ListItemRootAttributes = 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-has-description'?: never;\n 'data-multiline'?: never;\n 'data-density'?: never;\n 'data-divider'?: never;\n 'data-busy'?: never;\n 'data-state'?: never;\n 'data-kui-disabled'?: never;\n 'data-icon-align'?: never;\n }\n>;\n\nexport interface ListItemProps {\n label: string | SafeHtml;\n /** App-owned supporting text rendered in the component's stable label stack. */\n description?: string | SafeHtml;\n icon?: SafeHtml;\n /** Dormant author content at the row's end; a placeholder renders it as a skeleton. */\n trailing?: KerfUiContent;\n /** Dormant status metadata rendered before trailing content; a placeholder renders it as a skeleton. */\n status?: string | SafeHtml;\n /** Show a progress indicator and expose the row as busy without replacing its content; a placeholder keeps the indicator. */\n busy?: boolean;\n density?: 'standard' | 'compact' | 'spacious';\n divider?: 'none' | 'before' | 'after' | 'both';\n selected?: boolean;\n action: string;\n itemId?: string;\n className?: string;\n pressed?: boolean;\n accessibleLabel?: string;\n title?: string;\n multiline?: boolean;\n /** Alignment of an icon beside a wrapped label. Defaults to its first line. */\n multilineIconAlign?: 'first-line' | 'center';\n state?: string;\n disabled?: boolean;\n tabIndex?: number;\n /** Render the row as an unanimated loading skeleton, disabling its action: label, description, icon, status, and trailing content become skeletons; the `busy` indicator stays live. */\n placeholder?: boolean;\n rootAttributes?: ListItemRootAttributes;\n /** Native named-slot assignment when composed inside a web component. */\n slot?: string;\n}\n\nexport interface ListItemLinkProps extends Omit<\n ListItemProps,\n 'action' | 'pressed'\n> {\n /** Native destination for this navigation row. */\n href: string;\n /** Open in a new tab with a safe rel and announce that behavior. */\n external?: boolean;\n action?: never;\n pressed?: never;\n}\n\nfunction listItemContent({\n label,\n description,\n icon,\n trailing,\n status,\n busy = false,\n multiline = false,\n placeholder = false,\n}: Pick<\n ListItemProps,\n | 'label'\n | 'description'\n | 'icon'\n | 'trailing'\n | 'status'\n | 'busy'\n | 'multiline'\n | 'placeholder'\n>) {\n return (\n <>\n {icon && (\n <span class=\"kui-list-item__icon\">\n {placeholder ? (\n <Skeleton block width={remify(18)} height={remify(18)} />\n ) : (\n icon\n )}\n </span>\n )}\n <span class=\"kui-list-item__label\">\n <span class=\"kui-list-item__primary-label\">\n {placeholder ? (\n <Skeleton width={em(9)} />\n ) : multiline ? (\n withWordBreaks(label)\n ) : (\n label\n )}\n </span>\n {description && (\n <span class=\"kui-list-item__description\">\n {placeholder ? <Skeleton width={em(11)} /> : description}\n </span>\n )}\n </span>\n {(busy || status || trailing) && (\n <span class=\"kui-list-item__trailing\">\n {/* The busy spinner is component-owned chrome drawn from a known\n prop, so a placeholder keeps it live. Status text and\n author-supplied trailing content are values: skeletons. */}\n {busy && <LoadingSpinner />}\n {status && (\n <span class=\"kui-list-item__status\">\n {placeholder ? <Skeleton width={em(3.5)} /> : status}\n </span>\n )}\n {trailing && (placeholder ? <Skeleton width={em(1.5)} /> : trailing)}\n </span>\n )}\n </>\n );\n}\n\nexport function ListItem({\n label,\n description,\n icon,\n trailing,\n status,\n busy = false,\n density = 'standard',\n divider = 'none',\n selected = false,\n action,\n itemId,\n className = '',\n pressed,\n accessibleLabel,\n title,\n multiline = false,\n multilineIconAlign = 'first-line',\n state,\n disabled = false,\n tabIndex,\n placeholder = false,\n rootAttributes = {},\n slot,\n}: ListItemProps) {\n const extensionAttributes = filterDataAttributes(\n rootAttributes,\n PROTECTED_ROOT_DATA_ATTRIBUTES,\n );\n return (\n <button\n {...extensionAttributes}\n type=\"button\"\n class={`kui-list-item ${className}`.trim()}\n title={placeholder ? undefined : title}\n disabled={disabled || placeholder}\n tabindex={placeholder ? -1 : tabIndex}\n data-component=\"list-item\"\n data-action={placeholder ? undefined : action}\n data-item-id={itemId}\n data-has-icon={String(Boolean(icon))}\n data-has-description={String(Boolean(description))}\n data-multiline={multiline ? 'true' : undefined}\n data-icon-align={multiline ? multilineIconAlign : undefined}\n data-density={density}\n data-divider={divider}\n data-busy={busy ? 'true' : undefined}\n data-state={state}\n data-kui-disabled={disabled ? 'true' : undefined}\n data-placeholder={placeholder ? 'true' : undefined}\n aria-label={accessibleLabel}\n aria-current={selected ? 'page' : undefined}\n aria-pressed={pressed === undefined ? undefined : String(pressed)}\n aria-busy={placeholder || busy ? 'true' : undefined}\n slot={slot}\n >\n {listItemContent({\n label,\n description,\n icon,\n trailing,\n status,\n busy,\n multiline,\n placeholder,\n })}\n </button>\n );\n}\n\n/** A navigation row with native link activation and ListItem geometry. */\nexport function ListItemLink({\n href,\n external = false,\n label,\n description,\n icon,\n trailing,\n status,\n busy = false,\n density = 'standard',\n divider = 'none',\n selected = false,\n itemId,\n className = '',\n accessibleLabel,\n title,\n multiline = false,\n multilineIconAlign = 'first-line',\n state,\n disabled = false,\n tabIndex,\n placeholder = false,\n rootAttributes = {},\n slot,\n}: ListItemLinkProps) {\n const extensionAttributes = filterDataAttributes(\n rootAttributes,\n PROTECTED_ROOT_DATA_ATTRIBUTES,\n );\n const inactive = disabled || placeholder;\n const linkLabel =\n accessibleLabel ??\n (external && typeof label === 'string'\n ? `${label} (opens in new tab)`\n : undefined);\n return (\n <a\n {...extensionAttributes}\n class={`kui-list-item ${className}`.trim()}\n href={inactive ? undefined : href}\n target={inactive || !external ? undefined : '_blank'}\n rel={inactive || !external ? undefined : 'noopener noreferrer'}\n title={placeholder ? undefined : title}\n tabindex={inactive ? -1 : tabIndex}\n data-component=\"list-item-link\"\n data-item-id={itemId}\n data-has-icon={String(Boolean(icon))}\n data-has-description={String(Boolean(description))}\n data-multiline={multiline ? 'true' : undefined}\n data-icon-align={multiline ? multilineIconAlign : undefined}\n data-density={density}\n data-divider={divider}\n data-busy={busy ? 'true' : undefined}\n data-state={state}\n data-kui-disabled={disabled ? 'true' : undefined}\n data-placeholder={placeholder ? 'true' : undefined}\n aria-label={linkLabel}\n aria-current={selected ? 'page' : undefined}\n aria-disabled={inactive ? 'true' : undefined}\n aria-busy={placeholder || busy ? 'true' : undefined}\n slot={slot}\n >\n {listItemContent({\n label,\n description,\n icon,\n trailing,\n status,\n busy,\n multiline,\n placeholder,\n })}\n </a>\n );\n}\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/surfaces/sunken-panel/sunken-panel.tsx"],"names":[],"mappings":";;;AAgCO,SAAS,WAAA,CAAY;AAAA,EAC1B,QAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA,GAAQ,SAAA;AAAA,EACR,IAAA,GAAO,KAAA;AAAA,EACP,IAAA,GAAO,KAAA;AAAA,EACP,QAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,CAAA,EAAqB;AACnB,EAAA,MAAM,SAAA,GAAY,IAAA,KAAS,IAAA,GAAO,UAAA,GAAa,IAAA,IAAQ,MAAA;AACvD,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,iBAAA,EAAoB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC5C,gBAAA,EAAe,cAAA;AAAA,MACf,YAAA,EAAY,KAAA;AAAA,MACZ,WAAA,EAAW,MAAA,CAAO,OAAA,CAAQ,IAAI,CAAC,CAAA;AAAA,MAC/B,WAAA,EAAW,OAAO,MAAA,GAAS,MAAA;AAAA,MAC3B,eAAA,EAAe,WAAW,MAAA,GAAS,MAAA;AAAA,MACnC,KAAA,EAAO,SAAA,GAAY,CAAA,yBAAA,EAA4B,SAAS,CAAA,CAAA,GAAK,MAAA;AAAA,MAC7D,IAAA,EAAM,YAAY,QAAA,GAAW,MAAA;AAAA,MAC7B,YAAA,EAAY,SAAA;AAAA,MACZ,QAAA,EAAU,QAAA;AAAA,MACV,IAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ","file":"chunk-3XPGJUUQ.js","sourcesContent":["import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport type {\n CssFlex,\n CssFlexKeyword,\n} from '../../../shared/styles/css-values.js';\n\nexport type SunkenPanelShape = 'rounded' | 'square';\n\nexport interface SunkenPanelProps {\n children?: KerfUiContent;\n /** Optional accessible landmark name for a distinct application region. */\n ariaLabel?: string;\n /** Corner shape: a rounded rectangle (default) or square corners. */\n shape?: SunkenPanelShape;\n /** Grow or shrink within a flex parent, using Grid's typed flex contract. */\n flex?: boolean | CssFlexKeyword | CssFlex;\n /** Fill a parent with a definite height; use flex inside a flex layout. */\n fill?: boolean;\n /** Opt into keyboard (`0`) or programmatic (`-1`) focus on the panel. */\n tabIndex?: 0 | -1;\n /** Keep the standard focus outline visible, such as for a drop target. */\n outlined?: boolean;\n className?: string;\n /** Native named-slot assignment when composed inside a web component. */\n slot?: string;\n}\n\n/**\n * A lowered application surface with one compact inset and a vertical content\n * stack. The panel owns its background and padding; children own their own\n * borders and internal geometry.\n */\nexport function SunkenPanel({\n children,\n ariaLabel,\n shape = 'rounded',\n flex = false,\n fill = false,\n tabIndex,\n outlined = false,\n className = '',\n slot,\n}: SunkenPanelProps) {\n const flexValue = flex === true ? '1 1 auto' : flex || undefined;\n return (\n <div\n class={`kui-sunken-panel ${className}`.trim()}\n data-component=\"sunken-panel\"\n data-shape={shape}\n data-flex={String(Boolean(flex))}\n data-fill={fill ? 'true' : undefined}\n data-outlined={outlined ? 'true' : undefined}\n style={flexValue ? `--_kui-sunken-panel-flex:${flexValue}` : undefined}\n role={ariaLabel ? 'region' : undefined}\n aria-label={ariaLabel}\n tabindex={tabIndex}\n slot={slot}\n >\n {children}\n </div>\n );\n}\n"]}
|
package/dist/chunk-4Y4L5YEI.js
DELETED
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
import { jsx } from 'kerfjs/jsx-runtime';
|
|
2
|
-
|
|
3
|
-
// src/components/forms/field-label/field-label.tsx
|
|
4
|
-
function FieldLabel({
|
|
5
|
-
children,
|
|
6
|
-
class: classValue = "",
|
|
7
|
-
className = "",
|
|
8
|
-
...attributes
|
|
9
|
-
}) {
|
|
10
|
-
const classes = ["kui-text__field-label", classValue, className].filter(Boolean).join(" ");
|
|
11
|
-
return /* @__PURE__ */ jsx("div", { ...attributes, class: classes, "data-component": "field-label", children });
|
|
12
|
-
}
|
|
13
|
-
function Text({
|
|
14
|
-
variant: Variant = "p",
|
|
15
|
-
tone = "default",
|
|
16
|
-
color,
|
|
17
|
-
size = "default",
|
|
18
|
-
font = "default",
|
|
19
|
-
border = "transparent",
|
|
20
|
-
flush = false,
|
|
21
|
-
controlMargins = "",
|
|
22
|
-
lineHeight = "default",
|
|
23
|
-
wrap = "normal",
|
|
24
|
-
maxLines,
|
|
25
|
-
children,
|
|
26
|
-
class: classValue = "",
|
|
27
|
-
className = "",
|
|
28
|
-
style,
|
|
29
|
-
...attributes
|
|
30
|
-
}) {
|
|
31
|
-
if (maxLines !== void 0 && (!Number.isSafeInteger(maxLines) || maxLines < 1 || wrap === "nowrap" || wrap === "truncate"))
|
|
32
|
-
throw new RangeError(
|
|
33
|
-
"Text maxLines requires a positive integer and wrapping"
|
|
34
|
-
);
|
|
35
|
-
const classes = ["kui-text", classValue, className].filter(Boolean).join(" ");
|
|
36
|
-
return /* @__PURE__ */ jsx(
|
|
37
|
-
Variant,
|
|
38
|
-
{
|
|
39
|
-
...attributes,
|
|
40
|
-
class: classes,
|
|
41
|
-
"data-component": "text",
|
|
42
|
-
"data-tone": tone,
|
|
43
|
-
"data-size": size,
|
|
44
|
-
"data-font": font,
|
|
45
|
-
"data-border": border,
|
|
46
|
-
"data-control-margins": controlMargins || void 0,
|
|
47
|
-
"data-flush": flush ? "true" : void 0,
|
|
48
|
-
"data-line-height": lineHeight === "tight" ? "tight" : void 0,
|
|
49
|
-
"data-wrap": wrap === "normal" ? void 0 : wrap,
|
|
50
|
-
"data-max-lines": maxLines === void 0 ? void 0 : String(maxLines),
|
|
51
|
-
style: color === void 0 ? style : `${style === void 0 || style === null ? "" : `${style};`}color:${color}`,
|
|
52
|
-
children: maxLines === void 0 ? children : /* @__PURE__ */ jsx(
|
|
53
|
-
"span",
|
|
54
|
-
{
|
|
55
|
-
class: "kui-text__clamp",
|
|
56
|
-
style: `--_kui-text-max-lines:${maxLines}`,
|
|
57
|
-
children
|
|
58
|
-
}
|
|
59
|
-
)
|
|
60
|
-
}
|
|
61
|
-
);
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
export { FieldLabel, Text };
|
|
65
|
-
|
|
66
|
-
//# sourceMappingURL=chunk-4Y4L5YEI.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/forms/field-label/field-label.tsx","../src/components/typography/text/text.tsx"],"names":["jsx"],"mappings":";;;AAYO,SAAS,UAAA,CAAW;AAAA,EACzB,QAAA;AAAA,EACA,OAAO,UAAA,GAAa,EAAA;AAAA,EACpB,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,EAAoB;AAClB,EAAA,MAAM,OAAA,GAAU,CAAC,uBAAA,EAAyB,UAAA,EAAY,SAAS,EAC5D,MAAA,CAAO,OAAO,CAAA,CACd,IAAA,CAAK,GAAG,CAAA;AACX,EAAA,uBACE,GAAA,CAAC,SAAK,GAAG,UAAA,EAAY,OAAO,OAAA,EAAS,gBAAA,EAAe,eACjD,QAAA,EACH,CAAA;AAEJ;AC4CO,SAAS,IAAA,CAAK;AAAA,EACnB,SAAS,OAAA,GAAU,GAAA;AAAA,EACnB,IAAA,GAAO,SAAA;AAAA,EACP,KAAA;AAAA,EACA,IAAA,GAAO,SAAA;AAAA,EACP,IAAA,GAAO,SAAA;AAAA,EACP,MAAA,GAAS,aAAA;AAAA,EACT,KAAA,GAAQ,KAAA;AAAA,EACR,cAAA,GAAiB,EAAA;AAAA,EACjB,UAAA,GAAa,SAAA;AAAA,EACb,IAAA,GAAO,QAAA;AAAA,EACP,QAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAO,UAAA,GAAa,EAAA;AAAA,EACpB,SAAA,GAAY,EAAA;AAAA,EACZ,KAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAc;AACZ,EAAA,IACE,QAAA,KAAa,MAAA,KACZ,CAAC,MAAA,CAAO,aAAA,CAAc,QAAQ,CAAA,IAC7B,QAAA,GAAW,CAAA,IACX,IAAA,KAAS,QAAA,IACT,IAAA,KAAS,UAAA,CAAA;AAEX,IAAA,MAAM,IAAI,UAAA;AAAA,MACR;AAAA,KACF;AACF,EAAA,MAAM,OAAA,GAAU,CAAC,UAAA,EAAY,UAAA,EAAY,SAAS,EAAE,MAAA,CAAO,OAAO,CAAA,CAAE,IAAA,CAAK,GAAG,CAAA;AAC5E,EAAA,uBACEA,GAAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACE,GAAG,UAAA;AAAA,MACJ,KAAA,EAAO,OAAA;AAAA,MACP,gBAAA,EAAe,MAAA;AAAA,MACf,WAAA,EAAW,IAAA;AAAA,MACX,WAAA,EAAW,IAAA;AAAA,MACX,WAAA,EAAW,IAAA;AAAA,MACX,aAAA,EAAa,MAAA;AAAA,MACb,wBAAsB,cAAA,IAAkB,MAAA;AAAA,MACxC,YAAA,EAAY,QAAQ,MAAA,GAAS,MAAA;AAAA,MAC7B,kBAAA,EAAkB,UAAA,KAAe,OAAA,GAAU,OAAA,GAAU,MAAA;AAAA,MACrD,WAAA,EAAW,IAAA,KAAS,QAAA,GAAW,MAAA,GAAY,IAAA;AAAA,MAC3C,gBAAA,EAAgB,QAAA,KAAa,MAAA,GAAY,MAAA,GAAY,OAAO,QAAQ,CAAA;AAAA,MACpE,KAAA,EACE,KAAA,KAAU,MAAA,GACN,KAAA,GACA,GAAG,KAAA,KAAU,MAAA,IAAa,KAAA,KAAU,IAAA,GAAO,EAAA,GAAK,CAAA,EAAG,KAAK,CAAA,CAAA,CAAG,SAAS,KAAK,CAAA,CAAA;AAAA,MAG9E,QAAA,EAAA,QAAA,KAAa,MAAA,GACZ,QAAA,mBAEAA,GAAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,KAAA,EAAM,iBAAA;AAAA,UACN,KAAA,EAAO,yBAAyB,QAAQ,CAAA,CAAA;AAAA,UAEvC;AAAA;AAAA;AACH;AAAA,GAEJ;AAEJ","file":"chunk-4Y4L5YEI.js","sourcesContent":["import type { KerfBaseAttrs } from 'kerfjs/jsx-runtime';\n\nexport type FieldLabelProps = Omit<\n KerfBaseAttrs,\n 'children' | 'class' | 'className'\n> & {\n children: string;\n class?: string;\n className?: string;\n};\n\n/** Visible field heading for a read-only preview; use its id with aria-labelledby on the preview group. */\nexport function FieldLabel({\n children,\n class: classValue = '',\n className = '',\n ...attributes\n}: FieldLabelProps) {\n const classes = ['kui-text__field-label', classValue, className]\n .filter(Boolean)\n .join(' ');\n return (\n <div {...attributes} class={classes} data-component=\"field-label\">\n {children}\n </div>\n );\n}\n","import type { KerfBaseAttrs } from 'kerfjs/jsx-runtime';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport type { Sides } from '../../../shared/layout/sides.js';\nimport type { CssForegroundColor } from '../../../shared/styles/css-values.js';\n\nexport {\n FieldLabel,\n type FieldLabelProps,\n} from '../../forms/field-label/field-label.js';\n\nexport type TextVariant =\n 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';\nexport type TextTone = 'default' | 'quiet' | 'danger';\nexport type TextSize = 'compact' | 'default' | 'large' | 'xlarge';\nexport type TextFont = 'default' | 'monospace';\nexport type TextBorder = 'transparent' | 'none';\nexport type TextLineHeight = 'default' | 'tight';\nexport type TextWrap = 'normal' | 'anywhere' | 'nowrap' | 'truncate';\n\nexport type TextContent =\n KerfUiContent | string | number | readonly TextContent[];\n\ntype TextCommonProps = Omit<\n KerfBaseAttrs,\n 'children' | 'class' | 'className'\n> & {\n /** Native heading, paragraph, or inline span element to render. Defaults to `p`. */\n variant?: TextVariant;\n /** Semantic foreground treatment. Defaults to the inherited foreground. */\n tone?: TextTone;\n /** Foreground color; overrides tone when supplied, or inherits when omitted. */\n color?: CssForegroundColor;\n /** Text sizing independent of the native semantic element. */\n size?: TextSize;\n /** Font family independent of the native semantic element. */\n font?: TextFont;\n /** Transparent alignment border or no border when embedded in owner chrome. */\n border?: TextBorder;\n /** Add the shared control gutter outside selected physical edges. */\n controlMargins?: Sides;\n /** Remove the block variant's item padding and border in compact content. */\n flush?: boolean;\n /** Use compact leading for short dialog or metadata copy. */\n lineHeight?: TextLineHeight;\n children: TextContent;\n class?: string;\n className?: string;\n};\n\nexport type TextProps = TextCommonProps &\n (\n | {\n /** Wrap normally or break long unbroken strings. Defaults to normal. */\n wrap?: 'normal' | 'anywhere';\n /** Cap wrapped text to this positive number of lines. */\n maxLines?: number;\n }\n | {\n /** Keep one line, with or without an ellipsis. */\n wrap: 'nowrap' | 'truncate';\n maxLines?: never;\n }\n );\n\n/**\n * Semantic heading, paragraph, or inline text. Block variants use the standard\n * content-item padding; `span` adds no box geometry.\n * All ordinary native heading/paragraph attributes pass through to the element.\n */\nexport function Text({\n variant: Variant = 'p',\n tone = 'default',\n color,\n size = 'default',\n font = 'default',\n border = 'transparent',\n flush = false,\n controlMargins = '',\n lineHeight = 'default',\n wrap = 'normal',\n maxLines,\n children,\n class: classValue = '',\n className = '',\n style,\n ...attributes\n}: TextProps) {\n if (\n maxLines !== undefined &&\n (!Number.isSafeInteger(maxLines) ||\n maxLines < 1 ||\n wrap === 'nowrap' ||\n wrap === 'truncate')\n )\n throw new RangeError(\n 'Text maxLines requires a positive integer and wrapping',\n );\n const classes = ['kui-text', classValue, className].filter(Boolean).join(' ');\n return (\n <Variant\n {...attributes}\n class={classes}\n data-component=\"text\"\n data-tone={tone}\n data-size={size}\n data-font={font}\n data-border={border}\n data-control-margins={controlMargins || undefined}\n data-flush={flush ? 'true' : undefined}\n data-line-height={lineHeight === 'tight' ? 'tight' : undefined}\n data-wrap={wrap === 'normal' ? undefined : wrap}\n data-max-lines={maxLines === undefined ? undefined : String(maxLines)}\n style={\n color === undefined\n ? style\n : `${style === undefined || style === null ? '' : `${style};`}color:${color}`\n }\n >\n {maxLines === undefined ? (\n children\n ) : (\n <span\n class=\"kui-text__clamp\"\n style={`--_kui-text-max-lines:${maxLines}`}\n >\n {children}\n </span>\n )}\n </Variant>\n );\n}\n\nexport type { Sides } from '../../../shared/layout/sides.js';\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/navigation/nav-stack/nav-stack.tsx"],"names":[],"mappings":"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","file":"chunk-75YOTZ25.js","sourcesContent":["import { ChevronLeft } from 'lucide';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport type { NavPane } from '../../../shared/panels/nav-pane.js';\nimport type { PanelBottomToolbar } from '../../../shared/panels/panel-toolbar.js';\nimport { Toolbar, type ToolbarConfig } from '../../actions/toolbar/toolbar.js';\nimport { ToolbarControlGroup } from '../../actions/toolbar-control-group/toolbar-control-group.js';\nimport {\n type HeadingLevel,\n ToolbarText,\n type ToolbarTextSize,\n} from '../../actions/toolbar-text/toolbar-text.js';\nimport { List, type ListConfig } from '../../collections/list/list.js';\nimport { Pane } from '../../layout/pane/pane.js';\nimport { LucideIcon } from '../../media/lucide-icon/lucide-icon.js';\n\n/**\n * One entry in a {@link NavStack}. The app owns the stack as an array (usually a\n * signal); `NavStack` renders it and `wireNavStack` animates the transitions.\n */\nexport interface NavStackView extends NavPane<\n NavStackViewToolbar,\n PanelBottomToolbar\n> {\n /** Stable identity for keyed reconcile and transition direction. */\n key: string;\n}\n\n/** Per-view top toolbar. The stack supplies its back control before `leading`. */\nexport interface NavStackViewToolbar extends NavStackToolbarConfig {\n title?: string;\n leading?: KerfUiContent;\n center?: KerfUiContent;\n trailing?: KerfUiContent;\n}\n\n/** A view's structured bottom toolbar; it cross-fades on navigation. */\nexport type NavStackViewBottomToolbar = PanelBottomToolbar;\n\n/**\n * The top toolbar's configuration. Its `ToolbarConfig` forwards to the real\n * `Toolbar` the stack renders; by default that toolbar draws no divider and\n * claims the top and side safe-area edges the stack still touches.\n */\nexport interface NavStackToolbarConfig extends ToolbarConfig {\n /** Accessible name of the top toolbar (default: none). */\n label?: string;\n /** Size of the view title's `ToolbarText` (default `large`). */\n titleSize?: ToolbarTextSize;\n /** Expose the view title as a heading at this level (default: a plain span). */\n headingLevel?: HeadingLevel;\n}\n\nexport interface NavStackProps {\n id: string;\n /** Accessible name for the stack region. */\n label: string;\n /** The stack, root first; the last entry is the active top view. */\n views: NavStackView[];\n /** Accessible label for the icon-only back control (default \"Back\"). */\n backLabel?: string;\n /** The back control's icon (default a chevron-left `LucideIcon`). */\n backIcon?: KerfUiContent;\n /**\n * Visible text beside the back icon, such as the previous view's title\n * (default: icon only). When set, the text names the control and\n * `backLabel` is not used.\n */\n backText?: string;\n /** The top toolbar's configuration, forwarded to its `Toolbar`. */\n toolbarConfig?: NavStackToolbarConfig;\n /** Persistent last group in every view's top toolbar, supplied by a hosting panel. */\n panelToggle?: KerfUiContent;\n /** Hide the top toolbar entirely (rare — a fully custom-chrome view). */\n hideToolbar?: boolean;\n /** Optional persistent bottom toolbar used when the active view does not provide one. */\n bottomToolbar?: NavStackViewBottomToolbar;\n /**\n * Stack chrome separator. `auto` (default) draws both available edges\n * against a sunken active Pane and otherwise follows `chromeDividers`;\n * `hidden` suppresses the stack-owned edges.\n */\n separator?: 'auto' | 'hidden';\n /**\n * The line under the top chrome and over the bottom toolbar, where they\n * meet the active view. `scroll` (default) shows the chrome's line only\n * while the view's content is scrolled beneath it, and the bottom\n * toolbar's only while more content lies below — never when the content\n * fits — once `wireScrollDividers` (`@kerfjs/ui/wire-scroll-dividers`) is\n * wired above the stack; unwired, neither shows. `always` shows both\n * without the wiring; `none` neither, even when wired. The line is drawn\n * inside the chrome, so no state moves the chrome or the content. A\n * A sunken active Pane still draws the separator unless\n * `separator=\"hidden\"`. A `toolbarConfig.dividerSides` edge is the Toolbar's\n * own and is unaffected.\n */\n chromeDividers?: 'scroll' | 'always' | 'none';\n className?: string;\n /** Native named-slot assignment when composed inside a web component. */\n slot?: string;\n}\n\nconst DEFAULT_SAFE_AREA_EDGES = [\n 'block-start',\n 'inline-start',\n 'inline-end',\n] as const;\n\nconst DEFAULT_BOTTOM_SAFE_AREA_EDGES = [\n 'block-end',\n 'inline-start',\n 'inline-end',\n] as const;\n\nfunction chromeList(content: KerfUiContent, config?: ListConfig) {\n return (\n <List\n dividerSides={config?.dividerSides}\n gap={config?.gap}\n hAlign={config?.hAlign}\n vAlign={config?.vAlign}\n textInsets={config?.textInsets}\n controlInsets={config?.controlInsets}\n >\n {content}\n </List>\n );\n}\n\n/**\n * A navigation stack (iOS-style push/pop). Renders every entry stacked, the last\n * one active; `@kerfjs/ui/wire-nav-stack`'s `wireNavStack` slides the content and\n * cross-fades the chrome across a change. Its top chrome is a real `Toolbar`: the\n * back control and title lead, the active view's `toolbar` fills the zones,\n * and `toolbarConfig` supplies defaults. A single-pane\n * layout is a `NavStack` with one entry. See `docs/23-app-layouts.md` §3.1.\n */\nexport function NavStack({\n id,\n label,\n views,\n backLabel = 'Back',\n backIcon,\n backText,\n toolbarConfig = {},\n panelToggle,\n hideToolbar = false,\n bottomToolbar,\n separator = 'auto',\n chromeDividers = 'scroll',\n className = '',\n slot,\n}: NavStackProps) {\n const topIndex = views.length - 1;\n const top = views[topIndex];\n const topToolbar = top?.toolbar;\n const bottom = top?.bottomToolbar ?? bottomToolbar;\n const canPop = views.length > 1;\n return (\n <section\n class={`kui-nav-stack ${className}`.trim()}\n id={id}\n data-component=\"nav-stack\"\n data-nav-stack-id={id}\n data-depth={String(views.length)}\n data-separator={separator}\n data-chrome-dividers={\n chromeDividers === 'always' || chromeDividers === 'none'\n ? chromeDividers\n : undefined\n }\n aria-label={label}\n slot={slot}\n >\n {!hideToolbar && (\n <div class=\"kui-nav-stack__chrome\" data-nav-stack-chrome>\n <Toolbar\n label={topToolbar?.label ?? toolbarConfig.label}\n dividerSides={\n topToolbar?.dividerSides ?? toolbarConfig.dividerSides\n }\n centerAlign={topToolbar?.centerAlign ?? toolbarConfig.centerAlign}\n responsive={topToolbar?.responsive ?? toolbarConfig.responsive}\n responsiveAt={\n topToolbar?.responsiveAt ?? toolbarConfig.responsiveAt\n }\n safeAreaEdges={\n topToolbar?.safeAreaEdges ??\n toolbarConfig.safeAreaEdges ??\n DEFAULT_SAFE_AREA_EDGES\n }\n leading={\n <>\n {canPop && (\n <ToolbarControlGroup\n appearance=\"borderless\"\n shape=\"rounded\"\n content={backText ? 'mixed' : 'icon'}\n single\n >\n <button\n type=\"button\"\n class=\"kui-nav-stack__back\"\n data-nav-back\n aria-label={backText ? undefined : backLabel}\n >\n {backIcon ?? (\n <LucideIcon\n icon={ChevronLeft}\n name=\"chevron-left\"\n className=\"kui-nav-stack__back-icon\"\n />\n )}\n {backText ? <span>{backText}</span> : null}\n </button>\n </ToolbarControlGroup>\n )}\n {topToolbar?.leading}\n <ToolbarText\n text={topToolbar?.title ?? ''}\n size={\n topToolbar?.titleSize ?? toolbarConfig.titleSize ?? 'large'\n }\n headingLevel={\n topToolbar?.headingLevel ?? toolbarConfig.headingLevel\n }\n fill\n />\n </>\n }\n center={topToolbar?.center}\n trailing={\n <>\n {topToolbar?.trailing}\n {panelToggle}\n </>\n }\n />\n </div>\n )}\n <div class=\"kui-nav-stack__viewport\" data-nav-stack-viewport>\n {views.map((view, index) => (\n <article\n class=\"kui-nav-stack__view\"\n data-key={view.key}\n data-nav-key={view.key}\n data-nav-active={String(index === topIndex)}\n aria-hidden={String(index !== topIndex)}\n >\n {view.pane ||\n view.header !== undefined ||\n view.footer !== undefined ? (\n <Pane\n appearance={view.pane?.appearance}\n deepInset={view.pane?.deepInset}\n tabIndex={view.pane?.tabIndex}\n outlined={view.pane?.outlined}\n contentElement={view.pane?.contentElement}\n contentLabel={view.pane?.contentLabel}\n separators={view.pane?.separators}\n safeAreaEdges={view.pane?.safeAreaEdges}\n chromeDividers={view.pane?.chromeDividers}\n header={\n view.header === undefined ? undefined : (\n <div data-nav-stack-header>\n {chromeList(view.header, view.headerList)}\n </div>\n )\n }\n footer={\n view.footer === undefined ? undefined : (\n <div data-nav-stack-footer>\n {chromeList(view.footer, view.footerList)}\n </div>\n )\n }\n >\n {view.content}\n </Pane>\n ) : (\n view.content\n )}\n </article>\n ))}\n </div>\n {bottom && (\n <footer class=\"kui-nav-stack__bottom\" data-nav-stack-bottom>\n <Toolbar\n position=\"footer\"\n label={bottom.label}\n dividerSides={bottom.dividerSides}\n centerAlign={bottom.centerAlign}\n responsive={bottom.responsive}\n responsiveAt={bottom.responsiveAt}\n safeAreaEdges={\n bottom.safeAreaEdges ?? DEFAULT_BOTTOM_SAFE_AREA_EDGES\n }\n leading={bottom.leading}\n center={bottom.center}\n trailing={bottom.trailing}\n />\n </footer>\n )}\n </section>\n );\n}\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/shared/text/word-breaks.tsx"],"names":[],"mappings":";;;AAIA,IAAM,cAAA,GACJ,2DAAA;AAQK,SAAS,eAAe,KAAA,EAA6C;AAC1E,EAAA,IAAI,OAAO,KAAA,KAAU,QAAA,EAAU,OAAO,KAAA;AACtC,EAAA,MAAM,KAAA,GAAQ,KAAA,CAAM,KAAA,CAAM,cAAc,CAAA;AACxC,EAAA,IAAI,KAAA,CAAM,MAAA,GAAS,CAAA,EAAG,OAAO,KAAA;AAC7B,EAAA,uCAEK,QAAA,EAAA,KAAA,CAAM,GAAA,CAAI,CAAC,IAAA,EAAM,0BAChB,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,KAAA,GAAQ,CAAA,mBAAI,GAAA,CAAC,KAAA,EAAA,EAAI,CAAA,GAAK,IAAA;AAAA,IACtB;AAAA,GAAA,EACH,CACD,CAAA,EACH,CAAA;AAEJ","file":"chunk-7QQ3HE47.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\n// A lowercase letter or digit followed by an uppercase letter (\"ticketBoard\"),\n// or an acronym followed by a capitalized word (\"HTMLParser\" → \"HTML|Parser\").\nconst CAMEL_BOUNDARY =\n /(?<=[\\p{Ll}\\p{N}])(?=\\p{Lu})|(?<=\\p{Lu})(?=\\p{Lu}\\p{Ll})/u;\n\n/**\n * A label with line-break opportunities (`<wbr>`) at camelCase boundaries, so a\n * wrapping row breaks a long identifier-like name (`QuickTicketComposer`) at a\n * word boundary instead of mid-word. The text, and so the accessible name, is\n * unchanged; a `SafeHtml` label is returned as given.\n */\nexport function withWordBreaks(label: string | SafeHtml): string | SafeHtml {\n if (typeof label !== 'string') return label;\n const parts = label.split(CAMEL_BOUNDARY);\n if (parts.length < 2) return label;\n return (\n <>\n {parts.map((part, index) => (\n <>\n {index > 0 ? <wbr /> : null}\n {part}\n </>\n ))}\n </>\n );\n}\n"]}
|
package/dist/chunk-A7DYEERU.js
DELETED
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
import { jsx } from 'kerfjs/jsx-runtime';
|
|
2
|
-
|
|
3
|
-
// src/components/surfaces/surface-scaffold/surface-scaffold.tsx
|
|
4
|
-
function DialogSurface({
|
|
5
|
-
children,
|
|
6
|
-
size = "medium",
|
|
7
|
-
presentation = "modal",
|
|
8
|
-
preferredWidth,
|
|
9
|
-
bodyInset = "compact",
|
|
10
|
-
footerInset = "comfortable",
|
|
11
|
-
viewportGutter,
|
|
12
|
-
maxHeight,
|
|
13
|
-
className = "",
|
|
14
|
-
slot
|
|
15
|
-
}) {
|
|
16
|
-
const style = [
|
|
17
|
-
preferredWidth === void 0 ? "" : `--_kui-dialog-surface-preferred-width:${preferredWidth}`,
|
|
18
|
-
viewportGutter === void 0 ? "" : `--_kui-dialog-surface-gutter:${viewportGutter}`,
|
|
19
|
-
maxHeight === void 0 || maxHeight === "viewport" ? "" : `--_kui-dialog-surface-max-height:${maxHeight}`
|
|
20
|
-
].filter(Boolean).join(";");
|
|
21
|
-
return /* @__PURE__ */ jsx(
|
|
22
|
-
"div",
|
|
23
|
-
{
|
|
24
|
-
class: `kui-dialog-surface ${className}`.trim(),
|
|
25
|
-
"data-component": "dialog-surface",
|
|
26
|
-
"data-size": size,
|
|
27
|
-
"data-presentation": presentation,
|
|
28
|
-
"data-preferred-width": preferredWidth === void 0 ? void 0 : "",
|
|
29
|
-
"data-body-inset": bodyInset,
|
|
30
|
-
"data-footer-inset": footerInset,
|
|
31
|
-
"data-viewport-gutter": viewportGutter === void 0 ? void 0 : "",
|
|
32
|
-
"data-max-height": maxHeight === void 0 ? void 0 : "",
|
|
33
|
-
style: style || void 0,
|
|
34
|
-
slot,
|
|
35
|
-
children
|
|
36
|
-
}
|
|
37
|
-
);
|
|
38
|
-
}
|
|
39
|
-
function PopupSurface({
|
|
40
|
-
children,
|
|
41
|
-
inset = "standard",
|
|
42
|
-
className = "",
|
|
43
|
-
slot
|
|
44
|
-
}) {
|
|
45
|
-
return /* @__PURE__ */ jsx(
|
|
46
|
-
"span",
|
|
47
|
-
{
|
|
48
|
-
class: `kui-popup-surface ${className}`.trim(),
|
|
49
|
-
"data-component": "popup-surface",
|
|
50
|
-
"data-inset": inset,
|
|
51
|
-
slot,
|
|
52
|
-
children
|
|
53
|
-
}
|
|
54
|
-
);
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
export { DialogSurface, PopupSurface };
|
|
58
|
-
|
|
59
|
-
//# sourceMappingURL=chunk-A7DYEERU.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/surfaces/surface-scaffold/surface-scaffold.tsx"],"names":[],"mappings":";;;AA0BO,SAAS,aAAA,CAAc;AAAA,EAC5B,QAAA;AAAA,EACA,IAAA,GAAO,QAAA;AAAA,EACP,YAAA,GAAe,OAAA;AAAA,EACf,cAAA;AAAA,EACA,SAAA,GAAY,SAAA;AAAA,EACZ,WAAA,GAAc,aAAA;AAAA,EACd,cAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,CAAA,EAAuB;AACrB,EAAA,MAAM,KAAA,GAAQ;AAAA,IACZ,cAAA,KAAmB,MAAA,GACf,EAAA,GACA,CAAA,sCAAA,EAAyC,cAAc,CAAA,CAAA;AAAA,IAC3D,cAAA,KAAmB,MAAA,GACf,EAAA,GACA,CAAA,6BAAA,EAAgC,cAAc,CAAA,CAAA;AAAA,IAClD,cAAc,MAAA,IAAa,SAAA,KAAc,UAAA,GACrC,EAAA,GACA,oCAAoC,SAAS,CAAA;AAAA,GACnD,CACG,MAAA,CAAO,OAAO,CAAA,CACd,KAAK,GAAG,CAAA;AACX,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,mBAAA,EAAsB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC9C,gBAAA,EAAe,gBAAA;AAAA,MACf,WAAA,EAAW,IAAA;AAAA,MACX,mBAAA,EAAmB,YAAA;AAAA,MACnB,sBAAA,EAAsB,cAAA,KAAmB,MAAA,GAAY,MAAA,GAAY,EAAA;AAAA,MACjE,iBAAA,EAAiB,SAAA;AAAA,MACjB,mBAAA,EAAmB,WAAA;AAAA,MACnB,sBAAA,EAAsB,cAAA,KAAmB,MAAA,GAAY,MAAA,GAAY,EAAA;AAAA,MACjE,iBAAA,EAAiB,SAAA,KAAc,MAAA,GAAY,MAAA,GAAY,EAAA;AAAA,MACvD,OAAO,KAAA,IAAS,MAAA;AAAA,MAChB,IAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ;AAaO,SAAS,YAAA,CAAa;AAAA,EAC3B,QAAA;AAAA,EACA,KAAA,GAAQ,UAAA;AAAA,EACR,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,CAAA,EAAsB;AACpB,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,kBAAA,EAAqB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC7C,gBAAA,EAAe,eAAA;AAAA,MACf,YAAA,EAAY,KAAA;AAAA,MACZ,IAAA;AAAA,MAEC;AAAA;AAAA,GACH;AAEJ","file":"chunk-A7DYEERU.js","sourcesContent":["import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport type { CssLength } from '../../../shared/styles/css-values.js';\n\nexport type DialogSurfaceSize = 'small' | 'medium' | 'large';\nexport type DialogSurfacePresentation = 'modal' | 'side-sheet' | 'fullscreen';\nexport type SurfaceInset = 'none' | 'compact' | 'comfortable';\nexport type DialogSurfaceMaxHeight = CssLength | 'viewport';\n\nexport interface DialogSurfaceProps {\n children: KerfUiContent;\n size?: DialogSurfaceSize;\n presentation?: DialogSurfacePresentation;\n /** Modal preferred width. Takes precedence over size, within the viewport cap. */\n preferredWidth?: CssLength;\n bodyInset?: SurfaceInset;\n footerInset?: SurfaceInset;\n /** Modal edge clearance. Omit to retain Web Awesome's default viewport cap. */\n viewportGutter?: CssLength;\n /** Modal height cap, bounded by the dynamic viewport minus both gutters. */\n maxHeight?: DialogSurfaceMaxHeight;\n className?: string;\n /** Native named-slot assignment when composed inside a web component. */\n slot?: string;\n}\n\n/** Configure recurring Web Awesome dialog geometry without consumer ::part() CSS. */\nexport function DialogSurface({\n children,\n size = 'medium',\n presentation = 'modal',\n preferredWidth,\n bodyInset = 'compact',\n footerInset = 'comfortable',\n viewportGutter,\n maxHeight,\n className = '',\n slot,\n}: DialogSurfaceProps) {\n const style = [\n preferredWidth === undefined\n ? ''\n : `--_kui-dialog-surface-preferred-width:${preferredWidth}`,\n viewportGutter === undefined\n ? ''\n : `--_kui-dialog-surface-gutter:${viewportGutter}`,\n maxHeight === undefined || maxHeight === 'viewport'\n ? ''\n : `--_kui-dialog-surface-max-height:${maxHeight}`,\n ]\n .filter(Boolean)\n .join(';');\n return (\n <div\n class={`kui-dialog-surface ${className}`.trim()}\n data-component=\"dialog-surface\"\n data-size={size}\n data-presentation={presentation}\n data-preferred-width={preferredWidth === undefined ? undefined : ''}\n data-body-inset={bodyInset}\n data-footer-inset={footerInset}\n data-viewport-gutter={viewportGutter === undefined ? undefined : ''}\n data-max-height={maxHeight === undefined ? undefined : ''}\n style={style || undefined}\n slot={slot}\n >\n {children}\n </div>\n );\n}\n\nexport type PopupSurfaceInset = 'standard' | 'compact' | 'list-zero';\n\nexport interface PopupSurfaceProps {\n children: KerfUiContent;\n inset?: PopupSurfaceInset;\n className?: string;\n /** Native named-slot assignment when composed inside a web component. */\n slot?: string;\n}\n\n/** Configure recurring Web Awesome dropdown-menu geometry without consumer ::part() CSS. */\nexport function PopupSurface({\n children,\n inset = 'standard',\n className = '',\n slot,\n}: PopupSurfaceProps) {\n return (\n <span\n class={`kui-popup-surface ${className}`.trim()}\n data-component=\"popup-surface\"\n data-inset={inset}\n slot={slot}\n >\n {children}\n </span>\n );\n}\n"]}
|