@kerfjs/ui 5.0.0-beta.97 → 5.0.0-beta.99
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 +42 -1
- package/ai/application-ui-diagnostic-ids-v1.json +1 -0
- package/ai/component-catalog.json +487 -66
- package/ai/component-catalog.schema.json +1 -1
- package/ai/component-composition-rules.json +22 -2
- package/ai/component-composition.json +360 -33
- package/ai/component-composition.schema.json +1 -1
- package/ai/components/README.md +18 -17
- package/ai/components/anchored-surface.md +13 -0
- package/ai/components/application-tabs.md +1 -1
- package/ai/components/chip.md +9 -5
- package/ai/components/choice-chips.md +15 -8
- package/ai/components/collapsible-panel.md +3 -2
- package/ai/components/composer.md +83 -0
- package/ai/components/content-item.md +2 -2
- package/ai/components/corner-status.md +1 -1
- package/ai/components/document-baseline.md +3 -3
- package/ai/components/foundation.md +2 -2
- package/ai/components/layout.md +1 -1
- package/ai/components/list-action-row.md +5 -1
- package/ai/components/list-item.md +5 -1
- package/ai/components/list.md +19 -3
- package/ai/components/nav-stack.md +11 -2
- package/ai/components/pane.md +13 -4
- package/ai/components/popup-menu.md +4 -4
- package/ai/components/recipe-app-shell.md +3 -3
- package/ai/components/recipe-collapsible-sidebar.md +3 -3
- package/ai/components/recipe-compact-toolbar.md +1 -1
- package/ai/components/recipe-composer-form.md +3 -3
- package/ai/components/recipe-list-detail-dialog.md +2 -2
- package/ai/components/recipe-list-workspace-states.md +3 -3
- package/ai/components/recipe-loading-inspector.md +1 -1
- package/ai/components/recipe-navigation-sidebar.md +3 -3
- package/ai/components/recipe-navigation-stack.md +3 -3
- package/ai/components/recipe-workspace-header.md +3 -3
- package/ai/components/resize.md +2 -2
- package/ai/components/split-view.md +4 -2
- package/ai/components/sunken-panel.md +2 -2
- package/ai/components/surface-scaffold.md +15 -3
- package/ai/components/tab-bar.md +1 -0
- package/ai/components/tab-navigator.md +4 -0
- package/ai/components/toolbar-control-group.md +2 -0
- package/ai/components/toolbar-text.md +1 -0
- package/ai/components/toolbar.md +1 -0
- package/ai/components/workbench.md +1 -0
- package/ai/public-api-signatures-v1.md +504 -80
- package/ai/skill.md +41 -14
- package/ai/webawesome-jsx-signatures-v1.md +1 -1
- package/analyzer/component-ownership.mjs +1 -1
- package/analyzer/index.mjs +41 -14
- package/dist/anchored-surface.d.ts +30 -2
- package/dist/anchored-surface.js +1 -1
- package/dist/app-tab.js +1 -1
- package/dist/browser/composer.js +4 -0
- package/dist/catalog-resources.d.ts +3 -2
- package/dist/catalog-resources.js +4 -4
- package/dist/catalog-resources.js.map +1 -1
- package/dist/catalog.d.ts +39 -8
- package/dist/catalog.js +55 -32
- package/dist/catalog.js.map +1 -1
- package/dist/chip.d.ts +41 -9
- package/dist/chip.js +1 -1
- package/dist/choice-chips.d.ts +40 -16
- package/dist/choice-chips.js +1 -1
- package/dist/chunk-34U4ANDJ.js +119 -0
- package/dist/chunk-34U4ANDJ.js.map +1 -0
- package/dist/{chunk-36TL6BCR.js → chunk-3GLYIIFR.js} +34 -6
- package/dist/chunk-3GLYIIFR.js.map +1 -0
- package/dist/{chunk-HWY4BSLS.js → chunk-3VXDSIBJ.js} +2 -2
- package/dist/{chunk-HWY4BSLS.js.map → chunk-3VXDSIBJ.js.map} +1 -1
- package/dist/chunk-3WYREXW4.js +120 -0
- package/dist/chunk-3WYREXW4.js.map +1 -0
- package/dist/chunk-AV7CPAPT.js +82 -0
- package/dist/chunk-AV7CPAPT.js.map +1 -0
- package/dist/{chunk-XK4E225T.js → chunk-B53PS2LE.js} +2 -2
- package/dist/{chunk-XK4E225T.js.map → chunk-B53PS2LE.js.map} +1 -1
- package/dist/{chunk-R42D2BAO.js → chunk-CA7LNX3J.js} +2 -2
- package/dist/{chunk-R42D2BAO.js.map → chunk-CA7LNX3J.js.map} +1 -1
- package/dist/{chunk-AYHC62OZ.js → chunk-CMETHPKR.js} +26 -29
- package/dist/chunk-CMETHPKR.js.map +1 -0
- package/dist/{chunk-Y43B6DS3.js → chunk-CVD5IZGB.js} +2 -2
- package/dist/{chunk-Y43B6DS3.js.map → chunk-CVD5IZGB.js.map} +1 -1
- package/dist/{chunk-6STQXRT4.js → chunk-CXZXHZTR.js} +121 -12
- package/dist/chunk-CXZXHZTR.js.map +1 -0
- package/dist/{chunk-GZE2XVKC.js → chunk-DZJ4GBSP.js} +3 -3
- package/dist/{chunk-GZE2XVKC.js.map → chunk-DZJ4GBSP.js.map} +1 -1
- package/dist/chunk-ELCMSQNJ.js +49 -0
- package/dist/chunk-ELCMSQNJ.js.map +1 -0
- package/dist/{chunk-P74VXMB6.js → chunk-EOO6PYGF.js} +7 -14
- package/dist/chunk-EOO6PYGF.js.map +1 -0
- package/dist/{chunk-PRG4CL3Q.js → chunk-FR76ZJQC.js} +21 -19
- package/dist/chunk-FR76ZJQC.js.map +1 -0
- package/dist/{chunk-QQ3TTWFH.js → chunk-G3J7JDP6.js} +1 -1
- package/dist/{chunk-QQ3TTWFH.js.map → chunk-G3J7JDP6.js.map} +1 -1
- package/dist/{chunk-IGTWXPTN.js → chunk-HGV7J4T6.js} +3 -3
- package/dist/{chunk-IGTWXPTN.js.map → chunk-HGV7J4T6.js.map} +1 -1
- package/dist/{chunk-YWQGSUF2.js → chunk-HLDRH23D.js} +3 -3
- package/dist/{chunk-YWQGSUF2.js.map → chunk-HLDRH23D.js.map} +1 -1
- package/dist/{chunk-PBT3CPPY.js → chunk-HQZYKJ56.js} +24 -4
- package/dist/chunk-HQZYKJ56.js.map +1 -0
- package/dist/{chunk-V6W56V3N.js → chunk-HZPHCSCS.js} +16 -3
- package/dist/chunk-HZPHCSCS.js.map +1 -0
- package/dist/{chunk-GJYQ27C2.js → chunk-INI4WDWC.js} +8 -1
- package/dist/chunk-INI4WDWC.js.map +1 -0
- package/dist/{chunk-U657IHFB.js → chunk-IQSRHXZR.js} +10 -4
- package/dist/chunk-IQSRHXZR.js.map +1 -0
- package/dist/{chunk-KQDU7Z7P.js → chunk-K4AT3V3J.js} +2 -1
- package/dist/chunk-K4AT3V3J.js.map +1 -0
- package/dist/{chunk-QIAPOWHH.js → chunk-KCS6NJ3O.js} +2 -2
- package/dist/{chunk-QIAPOWHH.js.map → chunk-KCS6NJ3O.js.map} +1 -1
- package/dist/{chunk-UKKRPP56.js → chunk-LOSRXZAH.js} +2 -2
- package/dist/{chunk-UKKRPP56.js.map → chunk-LOSRXZAH.js.map} +1 -1
- package/dist/{chunk-ROZLJULF.js → chunk-MF6ZUUJZ.js} +8 -3
- package/dist/chunk-MF6ZUUJZ.js.map +1 -0
- package/dist/{chunk-6IVNMC6R.js → chunk-MHMWQ7RB.js} +2 -2
- package/dist/{chunk-6IVNMC6R.js.map → chunk-MHMWQ7RB.js.map} +1 -1
- package/dist/{chunk-JYD7G4RG.js → chunk-PIVY32AE.js} +15 -5
- package/dist/chunk-PIVY32AE.js.map +1 -0
- package/dist/{chunk-BU23Z5HZ.js → chunk-PYBBYSZ3.js} +13 -18
- package/dist/chunk-PYBBYSZ3.js.map +1 -0
- package/dist/chunk-QDSZTQXL.js +28 -0
- package/dist/chunk-QDSZTQXL.js.map +1 -0
- package/dist/{chunk-YXOMI7ES.js → chunk-QIG4IGUP.js} +2 -2
- package/dist/{chunk-YXOMI7ES.js.map → chunk-QIG4IGUP.js.map} +1 -1
- package/dist/{chunk-6BRRUPJY.js → chunk-QROYYGWU.js} +3 -3
- package/dist/chunk-QROYYGWU.js.map +1 -0
- package/dist/{chunk-FOQK4F3L.js → chunk-RHD7RKGI.js} +28 -7
- package/dist/chunk-RHD7RKGI.js.map +1 -0
- package/dist/{chunk-BBU2SPRE.js → chunk-T4WJ5VGP.js} +4 -4
- package/dist/{chunk-BBU2SPRE.js.map → chunk-T4WJ5VGP.js.map} +1 -1
- package/dist/{chunk-6NOLL5KG.js → chunk-TGLUDQP2.js} +3 -3
- package/dist/{chunk-6NOLL5KG.js.map → chunk-TGLUDQP2.js.map} +1 -1
- package/dist/{chunk-HO6FU3G7.js → chunk-TLMMFQWM.js} +4 -4
- package/dist/{chunk-HO6FU3G7.js.map → chunk-TLMMFQWM.js.map} +1 -1
- package/dist/chunk-UMKV7YVQ.js +20 -0
- package/dist/chunk-UMKV7YVQ.js.map +1 -0
- package/dist/{chunk-M2NRCFRO.js → chunk-VFYO3UGZ.js} +2 -2
- package/dist/{chunk-M2NRCFRO.js.map → chunk-VFYO3UGZ.js.map} +1 -1
- package/dist/{chunk-YOKEL75M.js → chunk-WVS6CUCT.js} +2 -2
- package/dist/{chunk-YOKEL75M.js.map → chunk-WVS6CUCT.js.map} +1 -1
- package/dist/{chunk-MN3POJFN.js → chunk-YMUIQRWK.js} +2 -2
- package/dist/{chunk-MN3POJFN.js.map → chunk-YMUIQRWK.js.map} +1 -1
- package/dist/{chunk-Y3LC7JQO.js → chunk-YOA5W5ZH.js} +2 -2
- package/dist/{chunk-Y3LC7JQO.js.map → chunk-YOA5W5ZH.js.map} +1 -1
- package/dist/{chunk-44A6LP54.js → chunk-YQ2AC4E2.js} +2 -2
- package/dist/{chunk-44A6LP54.js.map → chunk-YQ2AC4E2.js.map} +1 -1
- package/dist/chunk-ZNROKDSZ.js +54 -0
- package/dist/chunk-ZNROKDSZ.js.map +1 -0
- package/dist/collapsible-panel.d.ts +3 -2
- package/dist/collapsible-panel.js +4 -3
- package/dist/collapsible-panel.js.map +1 -1
- package/dist/composer.d.ts +62 -0
- package/dist/composer.js +5 -0
- package/dist/composer.js.map +1 -0
- package/dist/corner-status.d.ts +1 -1
- package/dist/corner-status.js +1 -1
- package/dist/css-values.d.ts +9 -1
- package/dist/css-values.js +1 -1
- package/dist/disclosure-arrow.js +1 -1
- package/dist/empty-state.js +1 -1
- package/dist/grid.js +1 -1
- package/dist/icon-button.js +1 -1
- package/dist/icon-toggle-button.js +1 -1
- package/dist/index.d.ts +10 -5
- package/dist/index.js +40 -37
- package/dist/list-action-row.d.ts +10 -2
- package/dist/list-action-row.js +1 -1
- package/dist/list-header.js +1 -1
- package/dist/list-icon-tile-B8dr97OW.d.ts +18 -0
- package/dist/list-item.d.ts +10 -3
- package/dist/list-item.js +1 -1
- package/dist/list.d.ts +36 -4
- package/dist/list.js +1 -1
- package/dist/loading-spinner.js +1 -1
- package/dist/lucide-icon.js +1 -1
- package/dist/{nav-stack-BvSKY448.d.ts → nav-stack-VXTumzKa.d.ts} +53 -4
- package/dist/nav-stack.d.ts +3 -2
- package/dist/nav-stack.js +2 -1
- package/dist/pane.d.ts +40 -3
- package/dist/pane.js +1 -1
- package/dist/{panel-toolbar-CL9tYOkh.d.ts → panel-toolbar-vg6Ir5Dy.d.ts} +6 -1
- package/dist/popup-menu-register.d.ts +2 -1
- package/dist/popup-menu-register.js +97 -22
- package/dist/popup-menu-register.js.map +1 -1
- package/dist/popup-menu.js +1 -1
- package/dist/row.js +1 -1
- package/dist/scroll-clearance-BikHljTc.d.ts +14 -0
- package/dist/select-register.js +11 -0
- package/dist/select-register.js.map +1 -1
- package/dist/select.js +1 -1
- package/dist/skeleton.js +1 -1
- package/dist/spacer.js +1 -1
- package/dist/split-button.js +1 -1
- package/dist/split-view.d.ts +7 -5
- package/dist/split-view.js +6 -3
- package/dist/split-view.js.map +1 -1
- package/dist/state-banner.d.ts +6 -1
- package/dist/state-banner.js +1 -1
- package/dist/styles/anchored-surface.css +27 -1
- package/dist/styles/catalog/components/catalog-example-stack.css +5 -0
- package/dist/styles/catalog/components/catalog-example.css +33 -0
- package/dist/styles/catalog/components/catalog-stage.css +7 -0
- package/dist/styles/chip.css +70 -0
- package/dist/styles/components/actions/popup-menu/popup-menu.css +21 -4
- package/dist/styles/components/actions/toolbar/toolbar.css +19 -0
- package/dist/styles/components/actions/toolbar-control-group/toolbar-control-group.css +75 -1
- package/dist/styles/components/actions/toolbar-text/toolbar-text.css +75 -0
- package/dist/styles/components/collections/list/list.css +77 -7
- package/dist/styles/components/collections/list-action-row/list-action-row.css +177 -22
- package/dist/styles/components/collections/list-item/list-item.css +158 -11
- package/dist/styles/components/feedback/anchored-surface/anchored-surface.css +27 -1
- package/dist/styles/components/feedback/chip/chip.css +70 -0
- package/dist/styles/components/feedback/state-banner/state-banner.css +24 -13
- package/dist/styles/components/forms/composer/composer.css +100 -0
- package/dist/styles/components/forms/select/select.css +1 -0
- package/dist/styles/components/forms/token-search-field/token-search-field.css +13 -2
- package/dist/styles/components/layout/pane/pane.css +81 -2
- package/dist/styles/components/navigation/nav-stack/nav-stack.css +84 -0
- package/dist/styles/components/navigation/tab-bar/tab-bar.css +15 -4
- package/dist/styles/components/navigation/tab-navigator/tab-navigator.css +79 -4
- package/dist/styles/components/surfaces/surface-scaffold/surface-scaffold.css +195 -0
- package/dist/styles/composer.css +100 -0
- package/dist/styles/foundation.css +66 -0
- package/dist/styles/list-action-row.css +177 -22
- package/dist/styles/list-item.css +158 -11
- package/dist/styles/list.css +77 -7
- package/dist/styles/nav-stack.css +84 -0
- package/dist/styles/pane.css +81 -2
- package/dist/styles/popup-menu.css +21 -4
- package/dist/styles/select.css +1 -0
- package/dist/styles/state-banner.css +24 -13
- package/dist/styles/styles.css +1 -0
- package/dist/styles/surface-scaffold.css +195 -0
- package/dist/styles/tab-bar.css +15 -4
- package/dist/styles/tab-navigator.css +79 -4
- package/dist/styles/token-search-field.css +13 -2
- package/dist/styles/toolbar-control-group.css +75 -1
- package/dist/styles/toolbar-text.css +75 -0
- package/dist/styles/toolbar.css +19 -0
- package/dist/styles/webawesome.css +18 -0
- package/dist/surface-scaffold-register.d.ts +6 -1
- package/dist/surface-scaffold-register.js +89 -3
- package/dist/surface-scaffold-register.js.map +1 -1
- package/dist/surface-scaffold.d.ts +66 -7
- package/dist/surface-scaffold.js +1 -1
- package/dist/tab-navigator.d.ts +23 -2
- package/dist/tab-navigator.js +2 -0
- package/dist/tab-navigator.js.map +1 -1
- package/dist/token-search-field.d.ts +1 -1
- package/dist/token-search-field.js +1 -1
- package/dist/{token-search-model-DTcTXWMS.d.ts → token-search-model-aYR0YAei.d.ts} +32 -2
- package/dist/token-search-model.d.ts +1 -1
- package/dist/toolbar-control-group.js +1 -1
- package/dist/toolbar-text.js +1 -1
- package/dist/toolbar.d.ts +1 -0
- package/dist/value-table.js +1 -1
- package/dist/wire-catalog.d.ts +3 -2
- package/dist/wire-catalog.js +2 -2
- package/dist/wire-composers.d.ts +16 -0
- package/dist/wire-composers.js +3 -0
- package/dist/wire-composers.js.map +1 -0
- package/dist/wire-list-focus-scroll.d.ts +16 -0
- package/dist/wire-list-focus-scroll.js +3 -0
- package/dist/wire-list-focus-scroll.js.map +1 -0
- package/dist/wire-nav-stack.js +135 -0
- package/dist/wire-nav-stack.js.map +1 -1
- package/dist/wire-scroll-dividers.d.ts +9 -0
- package/dist/wire-scroll-dividers.js +1 -1
- package/dist/wire-tab-bars.js +1 -1
- package/dist/wire-tab-navigator.d.ts +3 -1
- package/dist/wire-tab-navigator.js +133 -1
- package/dist/wire-tab-navigator.js.map +1 -1
- package/dist/wire-token-search-fields.d.ts +1 -1
- package/dist/wire-token-search-fields.js +1 -1
- package/dist/workbench.d.ts +8 -3
- package/dist/workbench.js +2 -1
- package/docs/accessibility.md +132 -3
- package/docs/anchored-surface.md +46 -4
- package/docs/app-layouts.md +23 -2
- package/docs/apple-hig.md +1 -0
- package/docs/catalog.md +61 -9
- package/docs/collapsible-panel.md +9 -6
- package/docs/component-contract.md +46 -13
- package/docs/component-selection.md +147 -20
- package/docs/composer.md +143 -0
- package/docs/design/templates/choice-chips/multiple-dark.svg +1 -0
- package/docs/design/templates/choice-chips/multiple.svg +1 -0
- package/docs/design/templates/choice-chips-dark.svg +1 -1
- package/docs/design/templates/choice-chips.svg +1 -1
- package/docs/design/templates/composer/chat-dark.svg +1 -0
- package/docs/design/templates/composer/chat.svg +1 -0
- package/docs/design/templates/composer/prompt-dark.svg +1 -0
- package/docs/design/templates/composer/prompt.svg +1 -0
- package/docs/design/templates/composer-dark.svg +1 -0
- package/docs/design/templates/composer.svg +1 -0
- package/docs/design/templates/empty-state/filtered-dark.svg +1 -1
- package/docs/design/templates/empty-state/filtered.svg +1 -1
- package/docs/design/templates/empty-state/with-action-dark.svg +1 -1
- package/docs/design/templates/empty-state/with-action.svg +1 -1
- package/docs/design/templates/empty-state-dark.svg +1 -1
- package/docs/design/templates/empty-state.svg +1 -1
- package/docs/design/templates/list/compact-dark.svg +1 -1
- package/docs/design/templates/list/compact.svg +1 -1
- package/docs/design/templates/list-action-row/default-dark.svg +1 -1
- package/docs/design/templates/list-action-row/default.svg +1 -1
- package/docs/design/templates/list-action-row/icon-tile-dark.svg +1 -0
- package/docs/design/templates/list-action-row/icon-tile.svg +1 -0
- package/docs/design/templates/list-action-row/selected-dark.svg +1 -1
- package/docs/design/templates/list-action-row/selected.svg +1 -1
- package/docs/design/templates/list-action-row/trailing-menu-dark.svg +1 -1
- package/docs/design/templates/list-action-row/trailing-menu.svg +1 -1
- package/docs/design/templates/list-action-row-dark.svg +1 -1
- package/docs/design/templates/list-action-row.svg +1 -1
- package/docs/design/templates/list-dark.svg +1 -1
- package/docs/design/templates/list-header/size-l-dark.svg +1 -1
- package/docs/design/templates/list-header/size-l.svg +1 -1
- package/docs/design/templates/list-header/size-m-dark.svg +1 -1
- package/docs/design/templates/list-header/size-m.svg +1 -1
- package/docs/design/templates/list-header/size-xl-dark.svg +1 -1
- package/docs/design/templates/list-header/size-xl.svg +1 -1
- package/docs/design/templates/list-header-dark.svg +1 -1
- package/docs/design/templates/list-header.svg +1 -1
- package/docs/design/templates/list-item/icon-tile-dark.svg +1 -0
- package/docs/design/templates/list-item/icon-tile.svg +1 -0
- package/docs/design/templates/list-item/selected-dark.svg +1 -1
- package/docs/design/templates/list-item/selected.svg +1 -1
- package/docs/design/templates/list-item-dark.svg +1 -1
- package/docs/design/templates/list-item.svg +1 -1
- package/docs/design/templates/list.svg +1 -1
- package/docs/design/templates/segmented-control-dark.svg +1 -1
- package/docs/design/templates/segmented-control.svg +1 -1
- package/docs/design/templates/skeleton-dark.svg +1 -1
- package/docs/design/templates/skeleton.svg +1 -1
- package/docs/design/templates/state-banner/danger-dark.svg +1 -1
- package/docs/design/templates/state-banner/danger.svg +1 -1
- package/docs/design/templates/state-banner/info-badge-dark.svg +1 -1
- package/docs/design/templates/state-banner/info-badge.svg +1 -1
- package/docs/design/templates/state-banner/info-dark.svg +1 -1
- package/docs/design/templates/state-banner/info.svg +1 -1
- package/docs/design/templates/state-banner/strip-dark.svg +1 -1
- package/docs/design/templates/state-banner/strip.svg +1 -1
- package/docs/design/templates/state-banner/success-dark.svg +1 -1
- package/docs/design/templates/state-banner/success.svg +1 -1
- package/docs/design/templates/state-banner/warning-dark.svg +1 -1
- package/docs/design/templates/state-banner/warning.svg +1 -1
- package/docs/design/templates/state-banner-dark.svg +1 -1
- package/docs/design/templates/state-banner.svg +1 -1
- package/docs/design/templates/tab-bar-dark.svg +1 -1
- package/docs/design/templates/tab-bar.svg +1 -1
- package/docs/design/templates/token-search-field-dark.svg +1 -1
- package/docs/design/templates/token-search-field.svg +1 -1
- package/docs/design/templates/toolbar-control-group-dark.svg +1 -1
- package/docs/design/templates/toolbar-control-group.svg +1 -1
- package/docs/design/templates/toolbar-dark.svg +1 -1
- package/docs/design/templates/toolbar-text/default-dark.svg +1 -1
- package/docs/design/templates/toolbar-text/default.svg +1 -1
- package/docs/design/templates/toolbar-text/large-dark.svg +1 -1
- package/docs/design/templates/toolbar-text/large.svg +1 -1
- package/docs/design/templates/toolbar-text-dark.svg +1 -1
- package/docs/design/templates/toolbar-text.svg +1 -1
- package/docs/design/templates/toolbar.svg +1 -1
- package/docs/design/templates/value-table/details-dark.svg +1 -1
- package/docs/design/templates/value-table/details.svg +1 -1
- package/docs/design/templates/value-table-dark.svg +1 -1
- package/docs/design/templates/value-table.svg +1 -1
- package/docs/design-philosophy.md +9 -1
- package/docs/examples/command-palette-adapter.tsx +3 -3
- package/docs/layout.md +147 -14
- package/docs/nav-stack.md +132 -8
- package/docs/recipes.md +9 -9
- package/docs/split-view.md +3 -3
- package/docs/sunken-panel.md +2 -2
- package/docs/surface-scaffold.md +138 -7
- package/docs/tab-navigator.md +38 -1
- package/docs/type-contracts.md +16 -16
- package/docs/ui-analyzer.md +3 -1
- package/docs/ui-doctor.md +71 -0
- package/docs/ux-demo.md +6 -6
- package/docs/webawesome-theme.md +7 -0
- package/docs/workbench.md +10 -6
- package/docs/writing.md +152 -0
- package/doctor/copy-capitalization-checks.mjs +591 -0
- package/doctor/index.mjs +17 -8
- package/llms.txt +105 -11
- package/package.json +15 -1
- package/ux-demo/recipes/app-shell.tsx +11 -11
- package/ux-demo/recipes/collapsible-sidebar.tsx +12 -11
- package/ux-demo/recipes/compact-toolbar.tsx +10 -10
- package/ux-demo/recipes/composer-form.tsx +8 -8
- package/ux-demo/recipes/list-detail-dialog.tsx +13 -13
- package/ux-demo/recipes/list-workspace-states.tsx +13 -13
- package/ux-demo/recipes/loading-inspector.tsx +10 -10
- package/ux-demo/recipes/navigation-sidebar.tsx +7 -7
- package/ux-demo/recipes/navigation-stack.tsx +5 -5
- package/ux-demo/recipes/workspace-header.tsx +5 -5
- package/dist/chunk-36TL6BCR.js.map +0 -1
- package/dist/chunk-4LOK4634.js +0 -21
- package/dist/chunk-4LOK4634.js.map +0 -1
- package/dist/chunk-6BRRUPJY.js.map +0 -1
- package/dist/chunk-6STQXRT4.js.map +0 -1
- package/dist/chunk-76PWEN5Y.js +0 -64
- package/dist/chunk-76PWEN5Y.js.map +0 -1
- package/dist/chunk-AYHC62OZ.js.map +0 -1
- package/dist/chunk-BU23Z5HZ.js.map +0 -1
- package/dist/chunk-DQDTZE4W.js +0 -70
- package/dist/chunk-DQDTZE4W.js.map +0 -1
- package/dist/chunk-FOQK4F3L.js.map +0 -1
- package/dist/chunk-GJYQ27C2.js.map +0 -1
- package/dist/chunk-JYD7G4RG.js.map +0 -1
- package/dist/chunk-KQDU7Z7P.js.map +0 -1
- package/dist/chunk-P74VXMB6.js.map +0 -1
- package/dist/chunk-PBT3CPPY.js.map +0 -1
- package/dist/chunk-PRG4CL3Q.js.map +0 -1
- package/dist/chunk-ROZLJULF.js.map +0 -1
- package/dist/chunk-U657IHFB.js.map +0 -1
- package/dist/chunk-V6W56V3N.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/layout/collapsible-panel/collapsible-panel.tsx"],"names":[],"mappings":"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","file":"collapsible-panel.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport {\n collapsiblePanelToggleIcon,\n composedPanelBody,\n groupSizeFor,\n type PanelBottomToolbar,\n type PanelChromePlacement,\n type PanelSide,\n type PanelToggle,\n type PanelToggleAttributes,\n type PanelToolbar,\n relocatedPanelGroups,\n} from '../../../shared/panels/panel-toolbar.js';\nimport type { ToolbarConfig } from '../../actions/toolbar/toolbar.js';\nimport type { ListConfig } from '../../collections/list/list.js';\nimport { LucideIcon } from '../../media/lucide-icon/lucide-icon.js';\nimport type { PaneConfig } from '../pane/pane.js';\nimport type {\n ResizableRegionCollapseMotion,\n ResizableRegionContentOverflow,\n ResizableRegionPresentation,\n ResizableRegionRestorePosition,\n ResizableRegionSeparator,\n} from '../resizable-region/resizable-region.js';\n\nexport { collapsiblePanelToggleIcon } from '../../../shared/panels/panel-toolbar.js';\n\n/** Which edge a {@link CollapsiblePanel} docks to. */\nexport type CollapsiblePanelSide = PanelSide;\n\n/** The standard toggle a panel toolbar renders (see {@link CollapsiblePanelToolbar}). */\nexport type CollapsiblePanelToolbarToggle = PanelToggle;\n\n/**\n * A panel's composed top toolbar. Its groups occupy `leading`, `center`, and\n * `trailing` while open; groups marked `relocateOnCollapse` and the standard\n * toggle move to the work-area toolbar through\n * {@link CollapsiblePanelRelocated} while it is collapsed.\n */\nexport type CollapsiblePanelToolbar = PanelToolbar;\nexport type CollapsiblePanelBottomToolbar = PanelBottomToolbar;\nexport type CollapsiblePanelChromePlacement = PanelChromePlacement;\n\n/** A CollapsiblePanel toggle's `wireSidebar` hook. */\nconst toggleAttributes = (panelId: string): PanelToggleAttributes => ({\n 'data-collapsible-target': panelId,\n // Keyed, so the morph never reuses a (possibly focused) toggle's button for\n // another control as the toggle moves between toolbars.\n 'data-key': `${panelId}-toggle`,\n});\n\nexport interface CollapsiblePanelToggleProps {\n /** The panel this toggle controls. */\n side: CollapsiblePanelSide;\n /** The panel's current collapsed state (drives the icon direction). */\n collapsed: boolean;\n /** `data-action` the button carries so `wireSidebar` can delegate its click. */\n action: string;\n /** The panel id the button targets (`data-tab-panel`-style: `data-collapsible-panel`). */\n panelId?: string;\n /** Accessible label; defaults to \"Collapse\"/\"Expand\". */\n label?: string;\n className?: string;\n /** Native named-slot assignment when composed inside a web component. */\n slot?: string;\n}\n\n/**\n * A standard collapse/expand toggle button for a {@link CollapsiblePanel}: the\n * recognizable per-side icon (see {@link collapsiblePanelToggleIcon}) plus the\n * `data-action` / `aria-expanded` `wireSidebar` reads. Placement is the app's —\n * put it in the panel's own header (to collapse) and somewhere always-visible\n * (to expand while collapsed).\n */\nexport function CollapsiblePanelToggle({\n side,\n collapsed,\n action,\n panelId,\n label,\n className = '',\n slot,\n}: CollapsiblePanelToggleProps) {\n const glyph = collapsiblePanelToggleIcon(side, collapsed);\n const accessible = label ?? (collapsed ? 'Expand' : 'Collapse');\n return (\n <button\n type=\"button\"\n class={`kui-collapsible-panel__toggle ${className}`.trim()}\n data-action={action}\n data-collapsible-target={panelId}\n aria-expanded={String(!collapsed)}\n aria-label={accessible}\n slot={slot}\n >\n <LucideIcon icon={glyph.icon} name={glyph.name} />\n </button>\n );\n}\n\nexport interface CollapsiblePanelProps {\n /** A stable id for the panel — `wireSidebar` targets it and toggles reference it. */\n id: string;\n /** Which edge the panel docks to: a left/right rail or a bottom drawer. */\n side: CollapsiblePanelSide;\n /** Whether the panel is currently collapsed (the app owns this signal). */\n collapsed?: boolean;\n /** Rail width or drawer height in px. Overrides the CSS default. */\n size?: number;\n /** Accessible label for the panel region. */\n label?: string;\n /** Opt into keyboard (`0`) or programmatic (`-1`) focus on the panel region. */\n tabIndex?: 0 | -1;\n /** Keep the standard focus outline visible while the panel is expanded. */\n outlined?: boolean;\n /** Panel content. */\n children?: KerfUiContent;\n /**\n * The panel's top toolbar, composed so its groups follow the panel's open\n * state. With it, `children` renders in a `Pane` below the toolbar; render\n * {@link CollapsiblePanelRelocated} in the app's work-area toolbar so the\n * marked groups and toggle stay reachable while the panel is collapsed.\n */\n toolbar?: CollapsiblePanelToolbar;\n /** Fixed content below a toolbar panel's top toolbar. */\n header?: KerfUiContent;\n headerList?: ListConfig;\n headerPlacement?: CollapsiblePanelChromePlacement;\n /** Fixed content above a toolbar panel's bottom toolbar. */\n footer?: KerfUiContent;\n footerList?: ListConfig;\n bottomToolbar?: CollapsiblePanelBottomToolbar;\n footerPlacement?: CollapsiblePanelChromePlacement;\n /**\n * Configuration for a `toolbar` panel's `Pane` (`contentElement`,\n * `contentLabel`, `separators`, `safeAreaEdges`, `chromeDividers`) — for example\n * `{ contentElement: 'nav', contentLabel: 'Sections' }` for a navigation\n * rail. Omitted or `undefined` fields keep the `Pane` defaults. Ignored\n * without a `toolbar`, where `children` renders as given.\n */\n pane?: PaneConfig;\n separator?: ResizableRegionSeparator;\n collapseMotion?: ResizableRegionCollapseMotion;\n contentOverflow?: ResizableRegionContentOverflow;\n presentation?: ResizableRegionPresentation;\n /** Control shown while collapsed, in a safe-area-aware corner of the panel's container (not the viewport). */\n restoreControl?: SafeHtml;\n restorePosition?: ResizableRegionRestorePosition;\n className?: string;\n}\n\n/**\n * A standalone collapsible side rail or bottom drawer, outside the full\n * {@link Workbench} shell. It owns only the presentation: a fixed-size content\n * area that stays laid out while the panel's track snaps to zero and the content\n * slides out via `transform` (one reflow, composited — the same technique\n * `Workbench` and the catalog sidebar use). Bottom-drawer content stays anchored\n * to the panel's fixed bottom edge, so the track cannot move its layout origin\n * underneath the transform transition. A collapsed panel renders `inert` (with\n * `aria-hidden`), so neither Tab, pointer, nor assistive technology reaches\n * content that has slid out of view; its `restoreControl` renders outside the\n * panel and stays reachable.\n * The app owns the `collapsed` signal;\n * pair it with `wireSidebar` for the toggle, focus, compact-overlay, keyboard,\n * and persistence semantics, and with `CollapsiblePanelToggle` for the standard\n * affordance. See `ui/docs/collapsible-panel.md` and `docs/23-app-layouts.md`.\n */\nexport function CollapsiblePanel({\n id,\n side,\n collapsed = false,\n size,\n label,\n tabIndex,\n outlined = false,\n children,\n toolbar,\n header,\n headerList,\n headerPlacement,\n footer,\n footerList,\n bottomToolbar,\n footerPlacement,\n pane,\n separator = 'auto',\n collapseMotion = 'slide',\n contentOverflow = 'clip',\n presentation = 'inline',\n restoreControl,\n restorePosition = side === 'left' ? 'bottom-start' : 'bottom-end',\n className = '',\n}: CollapsiblePanelProps) {\n const sizeVar =\n side === 'bottom'\n ? '--kui-collapsible-panel-height'\n : '--kui-collapsible-panel-width';\n return (\n <>\n <aside\n class={`kui-collapsible-panel kui-collapsible-panel--${side} ${className}`.trim()}\n data-component=\"collapsible-panel\"\n data-collapsible-panel={id}\n data-side={side}\n data-collapsed={String(collapsed)}\n data-outlined={\n !collapsed && presentation !== 'hidden' && outlined\n ? 'true'\n : undefined\n }\n data-separator={separator}\n data-collapse-motion={collapseMotion}\n data-content-overflow={contentOverflow}\n data-presentation={presentation}\n aria-label={label || undefined}\n aria-hidden={\n collapsed || presentation === 'hidden' ? 'true' : undefined\n }\n tabindex={\n collapsed || presentation === 'hidden'\n ? tabIndex === undefined\n ? undefined\n : -1\n : tabIndex\n }\n inert={collapsed}\n style={size ? `${sizeVar}: ${size}px` : undefined}\n >\n <div class=\"kui-collapsible-panel__content\">\n {toolbar\n ? composedPanelBody({\n toolbar,\n side,\n collapsed,\n attributes: toggleAttributes(id),\n pane,\n header,\n headerList,\n headerPlacement,\n footer,\n footerList,\n bottomToolbar,\n footerPlacement,\n content: children,\n })\n : children}\n </div>\n </aside>\n {collapsed && restoreControl && presentation !== 'hidden' && (\n <div\n class=\"kui-collapsible-panel__restore\"\n data-panel-restore={id}\n data-position={restorePosition}\n >\n {restoreControl}\n </div>\n )}\n </>\n );\n}\n\nexport interface CollapsiblePanelRelocatedProps {\n /** The panel's `id`. */\n panelId: string;\n side: CollapsiblePanelSide;\n /** The panel's current collapsed state. */\n collapsed: boolean;\n /** The same `toolbar` the panel receives. */\n toolbar: CollapsiblePanelToolbar;\n /**\n * Density of the toolbar the groups are placed in, so the standard toggle\n * fits it (`compact` in a `density=\"compact\"` toolbar). Defaults to\n * `default`.\n */\n density?: ToolbarConfig['density'];\n}\n\n/**\n * A collapsed {@link CollapsiblePanel}'s marked groups and standard\n * toggle, for the app's work-area toolbar — nothing while the panel is open.\n * Put it first in the leading zone for a left rail, last in the trailing zone\n * for a right rail, and last in a bottom toolbar (or a `FloatingToolbar`\n * `restoreControl`) for a bottom drawer. `wireSidebar` hands focus to it when\n * the panel closes from its own toggle.\n */\nexport function CollapsiblePanelRelocated({\n panelId,\n side,\n collapsed,\n toolbar,\n density,\n}: CollapsiblePanelRelocatedProps) {\n return (\n <>\n {relocatedPanelGroups(\n toolbar,\n side,\n collapsed,\n toggleAttributes(panelId),\n groupSizeFor(density),\n )}\n </>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/components/layout/collapsible-panel/collapsible-panel.tsx"],"names":[],"mappings":"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","file":"collapsible-panel.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport {\n collapsiblePanelToggleIcon,\n composedPanelBody,\n groupSizeFor,\n type PanelBottomToolbar,\n type PanelChromePlacement,\n type PanelSide,\n type PanelToggle,\n type PanelToggleAttributes,\n type PanelToolbar,\n relocatedPanelGroups,\n} from '../../../shared/panels/panel-toolbar.js';\nimport type { ToolbarConfig } from '../../actions/toolbar/toolbar.js';\nimport type { ListConfig } from '../../collections/list/list.js';\nimport { LucideIcon } from '../../media/lucide-icon/lucide-icon.js';\nimport type { PaneConfig } from '../pane/pane.js';\nimport type {\n ResizableRegionCollapseMotion,\n ResizableRegionContentOverflow,\n ResizableRegionPresentation,\n ResizableRegionRestorePosition,\n ResizableRegionSeparator,\n} from '../resizable-region/resizable-region.js';\n\nexport { collapsiblePanelToggleIcon } from '../../../shared/panels/panel-toolbar.js';\n\n/** Which edge a {@link CollapsiblePanel} docks to. */\nexport type CollapsiblePanelSide = PanelSide;\n\n/** The standard toggle a panel toolbar renders (see {@link CollapsiblePanelToolbar}). */\nexport type CollapsiblePanelToolbarToggle = PanelToggle;\n\n/**\n * A panel's composed top toolbar. Its groups occupy `leading`, `center`, and\n * `trailing` while open; groups marked `relocateOnCollapse` and the standard\n * toggle move to the work-area toolbar through\n * {@link CollapsiblePanelRelocated} while it is collapsed.\n */\nexport type CollapsiblePanelToolbar = PanelToolbar;\nexport type CollapsiblePanelBottomToolbar = PanelBottomToolbar;\nexport type CollapsiblePanelChromePlacement = PanelChromePlacement;\n\n/** A CollapsiblePanel toggle's `wireSidebar` hook. */\nconst toggleAttributes = (panelId: string): PanelToggleAttributes => ({\n 'data-collapsible-target': panelId,\n // Keyed, so the morph never reuses a (possibly focused) toggle's button for\n // another control as the toggle moves between toolbars.\n 'data-key': `${panelId}-toggle`,\n});\n\nexport interface CollapsiblePanelToggleProps {\n /** The panel this toggle controls. */\n side: CollapsiblePanelSide;\n /** The panel's current collapsed state (drives the icon direction). */\n collapsed: boolean;\n /** `data-action` the button carries so `wireSidebar` can delegate its click. */\n action: string;\n /** The panel id the button targets (`data-tab-panel`-style: `data-collapsible-panel`). */\n panelId?: string;\n /** Accessible label; defaults to \"Collapse\"/\"Expand\". */\n label?: string;\n className?: string;\n /** Native named-slot assignment when composed inside a web component. */\n slot?: string;\n}\n\n/**\n * A standard collapse/expand toggle button for a {@link CollapsiblePanel}: the\n * recognizable per-side icon (see {@link collapsiblePanelToggleIcon}) plus the\n * `data-action` / `aria-expanded` `wireSidebar` reads. Placement is the app's —\n * put it in the panel's own header (to collapse) and somewhere always-visible\n * (to expand while collapsed).\n */\nexport function CollapsiblePanelToggle({\n side,\n collapsed,\n action,\n panelId,\n label,\n className = '',\n slot,\n}: CollapsiblePanelToggleProps) {\n const glyph = collapsiblePanelToggleIcon(side, collapsed);\n const accessible = label ?? (collapsed ? 'Expand' : 'Collapse');\n return (\n <button\n type=\"button\"\n class={`kui-collapsible-panel__toggle ${className}`.trim()}\n data-action={action}\n data-collapsible-target={panelId}\n aria-expanded={String(!collapsed)}\n aria-label={accessible}\n slot={slot}\n >\n <LucideIcon icon={glyph.icon} name={glyph.name} />\n </button>\n );\n}\n\nexport interface CollapsiblePanelProps {\n /** A stable id for the panel — `wireSidebar` targets it and toggles reference it. */\n id: string;\n /** Which edge the panel docks to: a left/right rail or a bottom drawer. */\n side: CollapsiblePanelSide;\n /** Whether the panel is currently collapsed (the app owns this signal). */\n collapsed?: boolean;\n /** Rail width or drawer height in px. Overrides the CSS default. */\n size?: number;\n /** Accessible label for the panel region. */\n label?: string;\n /** Opt into keyboard (`0`) or programmatic (`-1`) focus on the panel region. */\n tabIndex?: 0 | -1;\n /** Keep the standard focus outline visible while the panel is expanded. */\n outlined?: boolean;\n /** Panel content. */\n children?: KerfUiContent;\n /**\n * The panel's top toolbar, composed so its groups follow the panel's open\n * state. With it, `children` renders in a `Pane` below the toolbar; render\n * {@link CollapsiblePanelRelocated} in the app's work-area toolbar so the\n * marked groups and toggle stay reachable while the panel is collapsed.\n */\n toolbar?: CollapsiblePanelToolbar;\n /** Fixed content below a toolbar panel's top toolbar. */\n header?: KerfUiContent;\n headerList?: ListConfig;\n headerPlacement?: CollapsiblePanelChromePlacement;\n /** Fixed content above a toolbar panel's bottom toolbar. */\n footer?: KerfUiContent;\n footerList?: ListConfig;\n bottomToolbar?: CollapsiblePanelBottomToolbar;\n footerPlacement?: CollapsiblePanelChromePlacement;\n /**\n * Configuration for a `toolbar` panel's `Pane` (`contentElement`,\n * `contentLabel`, `separators`, `safeAreaEdges`, `chromeDividers`) — for example\n * `{ contentElement: 'nav', contentLabel: 'Sections' }` for a navigation\n * rail. Omitted or `undefined` fields keep the `Pane` defaults. Ignored\n * without a `toolbar`, where `children` renders as given.\n */\n pane?: PaneConfig;\n separator?: ResizableRegionSeparator;\n collapseMotion?: ResizableRegionCollapseMotion;\n contentOverflow?: ResizableRegionContentOverflow;\n presentation?: ResizableRegionPresentation;\n /** Control shown while collapsed, in a safe-area-aware corner of the panel's container (not the viewport). */\n restoreControl?: SafeHtml;\n restorePosition?: ResizableRegionRestorePosition;\n className?: string;\n}\n\n/**\n * A standalone collapsible side rail or bottom drawer, outside the full\n * {@link Workbench} shell. It owns only the presentation: a fixed-size content\n * area that stays laid out while the panel's track snaps to zero and the content\n * slides out via `transform` (one reflow, composited — the same technique\n * `Workbench` and the catalog sidebar use). Bottom-drawer content stays anchored\n * to the panel's fixed bottom edge, so the track cannot move its layout origin\n * underneath the transform transition. A collapsed panel renders `inert` (with\n * `aria-hidden`), so neither Tab, pointer, nor assistive technology reaches\n * content that has slid out of view; its `restoreControl` renders outside the\n * panel and stays reachable.\n * The app owns the `collapsed` signal;\n * pair it with `wireSidebar` for the toggle, focus, compact-overlay, keyboard,\n * and persistence semantics, and with `CollapsiblePanelToggle` for the standard\n * affordance. See `ui/docs/collapsible-panel.md` and `docs/23-app-layouts.md`.\n */\nexport function CollapsiblePanel({\n id,\n side,\n collapsed = false,\n size,\n label,\n tabIndex,\n outlined = false,\n children,\n toolbar,\n header,\n headerList,\n headerPlacement,\n footer,\n footerList,\n bottomToolbar,\n footerPlacement,\n pane,\n separator = 'auto',\n collapseMotion = 'slide',\n contentOverflow = 'clip',\n presentation = 'inline',\n restoreControl,\n restorePosition = side === 'left' ? 'bottom-start' : 'bottom-end',\n className = '',\n}: CollapsiblePanelProps) {\n const sizeVar =\n side === 'bottom'\n ? '--kui-collapsible-panel-height'\n : '--kui-collapsible-panel-width';\n return (\n <>\n <aside\n class={`kui-collapsible-panel kui-collapsible-panel--${side} ${className}`.trim()}\n data-component=\"collapsible-panel\"\n data-collapsible-panel={id}\n data-side={side}\n data-collapsed={String(collapsed)}\n data-outlined={\n !collapsed && presentation !== 'hidden' && outlined\n ? 'true'\n : undefined\n }\n data-separator={separator}\n data-collapse-motion={collapseMotion}\n data-content-overflow={contentOverflow}\n data-presentation={presentation}\n aria-label={label || undefined}\n aria-hidden={\n collapsed || presentation === 'hidden' ? 'true' : undefined\n }\n tabindex={\n collapsed || presentation === 'hidden'\n ? tabIndex === undefined\n ? undefined\n : -1\n : tabIndex\n }\n inert={collapsed}\n style={size ? `${sizeVar}: ${size}px` : undefined}\n >\n <div class=\"kui-collapsible-panel__content\">\n {toolbar\n ? composedPanelBody({\n toolbar,\n side,\n collapsed,\n attributes: toggleAttributes(id),\n pane,\n header,\n headerList,\n headerPlacement,\n footer,\n footerList,\n bottomToolbar,\n footerPlacement,\n content: children,\n })\n : children}\n </div>\n </aside>\n {collapsed && restoreControl && presentation !== 'hidden' && (\n <div\n class=\"kui-collapsible-panel__restore\"\n data-panel-restore={id}\n data-position={restorePosition}\n >\n {restoreControl}\n </div>\n )}\n </>\n );\n}\n\nexport interface CollapsiblePanelRelocatedProps {\n /** The panel's `id`. */\n panelId: string;\n side: CollapsiblePanelSide;\n /** The panel's current collapsed state. */\n collapsed: boolean;\n /** The same `toolbar` the panel receives. */\n toolbar: CollapsiblePanelToolbar;\n /**\n * Density of the toolbar the groups are placed in, so the standard toggle\n * fits it (`compact` in a `density=\"compact\"` toolbar). Defaults to\n * `default`.\n */\n density?: ToolbarConfig['density'];\n}\n\n/**\n * A collapsed {@link CollapsiblePanel}'s marked groups and standard\n * toggle, for the app's work-area toolbar — nothing while the panel is open.\n * Put it first in the leading zone for a left rail, last in the trailing zone\n * for a right rail, and last in a bottom toolbar (or a `FloatingToolbar`\n * `restoreControl`) for a bottom drawer. `wireSidebar` hands focus to it when\n * the panel closes from its own toggle.\n */\nexport function CollapsiblePanelRelocated({\n panelId,\n side,\n collapsed,\n toolbar,\n density,\n}: CollapsiblePanelRelocatedProps) {\n return (\n <>\n {relocatedPanelGroups(\n toolbar,\n side,\n collapsed,\n toggleAttributes(panelId),\n groupSizeFor(density),\n )}\n </>\n );\n}\n"]}
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import * as kerfjs from 'kerfjs';
|
|
2
|
+
import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Application `data-*` identity on the Composer root, such as `data-key`;
|
|
6
|
+
* the composer's own configuration attributes stay protected.
|
|
7
|
+
*/
|
|
8
|
+
type ComposerRootAttributes = Readonly<Record<`data-${string}`, string | undefined>>;
|
|
9
|
+
interface ComposerProps {
|
|
10
|
+
/** The message field's accessible name, in title style ("Message"). */
|
|
11
|
+
label: string;
|
|
12
|
+
/** Native textarea `name`: the form field the message submits under. */
|
|
13
|
+
name: string;
|
|
14
|
+
/**
|
|
15
|
+
* The textarea id. With a `hint`, the hint takes `<id>-hint` and becomes
|
|
16
|
+
* the field's accessible description.
|
|
17
|
+
*/
|
|
18
|
+
id?: string;
|
|
19
|
+
/** The field's text: a draft to restore, or `''` after sending. */
|
|
20
|
+
value?: string;
|
|
21
|
+
/** Sentence-style example of what to write ("Ask about this build"). */
|
|
22
|
+
placeholder?: string;
|
|
23
|
+
/**
|
|
24
|
+
* Visible lines while the field is empty or short (default 1). The field
|
|
25
|
+
* grows with its content from here.
|
|
26
|
+
*/
|
|
27
|
+
minRows?: number;
|
|
28
|
+
/**
|
|
29
|
+
* Lines the field grows to before it scrolls (default 8). At least
|
|
30
|
+
* `minRows`.
|
|
31
|
+
*/
|
|
32
|
+
maxRows?: number;
|
|
33
|
+
/** Quiet, sentence-style supporting copy at the start of the action row. */
|
|
34
|
+
hint?: string;
|
|
35
|
+
/** Trailing controls in the action row, normally one brand Send button. */
|
|
36
|
+
actions: KerfUiContent;
|
|
37
|
+
/** Disable the field; the app disables its own actions. */
|
|
38
|
+
disabled?: boolean;
|
|
39
|
+
/**
|
|
40
|
+
* Opt in to Enter-to-send: with `wireComposers` running over an ancestor,
|
|
41
|
+
* Enter (or Cmd/Ctrl+Enter) in the field activates the first trailing
|
|
42
|
+
* action, Shift+Enter inserts a newline, and an Enter that commits an IME
|
|
43
|
+
* composition or meets an empty message does not send. The field announces
|
|
44
|
+
* the shortcut with `aria-keyshortcuts`.
|
|
45
|
+
*/
|
|
46
|
+
submitOnEnter?: boolean;
|
|
47
|
+
/** Safe `data-*` identity on the root. */
|
|
48
|
+
rootAttributes?: ComposerRootAttributes;
|
|
49
|
+
className?: string;
|
|
50
|
+
/** Native named-slot assignment, such as a `wa-dialog`'s `footer`. */
|
|
51
|
+
slot?: string;
|
|
52
|
+
}
|
|
53
|
+
/**
|
|
54
|
+
* A chat or prompt composer: a raised frame whose border turns brand while
|
|
55
|
+
* focus is within, holding a borderless message field that grows with its
|
|
56
|
+
* content between `minRows` and `maxRows` lines, above an action row with an
|
|
57
|
+
* optional hint and trailing actions. The app owns the value and sending;
|
|
58
|
+
* `submitOnEnter` with `wireComposers` adds Enter-to-send.
|
|
59
|
+
*/
|
|
60
|
+
declare function Composer({ label, name, id, value, placeholder, minRows, maxRows, hint, actions, disabled, submitOnEnter, rootAttributes, className, slot, }: ComposerProps): kerfjs.SafeHtml;
|
|
61
|
+
|
|
62
|
+
export { Composer, type ComposerProps, type ComposerRootAttributes };
|
package/dist/composer.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"composer.js"}
|
package/dist/corner-status.d.ts
CHANGED
|
@@ -25,7 +25,7 @@ interface CornerStatusProps {
|
|
|
25
25
|
}
|
|
26
26
|
/**
|
|
27
27
|
* A non-dismissible status surface pinned to a viewport corner — "Loading…",
|
|
28
|
-
* "Updating
|
|
28
|
+
* "Updating Tickets… 3 of 12" — for app-level progress that has no better
|
|
29
29
|
* home beside the affected work. The application owns its lifetime: render it
|
|
30
30
|
* while the work runs and remove it when the work ends. It carries no role of
|
|
31
31
|
* its own; the composed `StateBanner` is the polite live region. Use a toast
|
package/dist/corner-status.js
CHANGED
package/dist/css-values.d.ts
CHANGED
|
@@ -115,5 +115,13 @@ declare function foregroundColorVar(name: `--${string}`, fallback?: CssForegroun
|
|
|
115
115
|
* resolves the color syntax; this checks only that it is one declaration value.
|
|
116
116
|
*/
|
|
117
117
|
declare function foregroundColor(value: string): CssForegroundColor;
|
|
118
|
+
/**
|
|
119
|
+
* Use an application-chosen CSS color as a fill: a `ChoiceChips` swatch, a list
|
|
120
|
+
* row's `iconTile` color, or any other prop that takes a plain
|
|
121
|
+
* {@link CssColor}. It returns a `CssColor`, not a {@link CssForegroundColor},
|
|
122
|
+
* so a fill literal cannot reach a prop that paints text or an icon. The browser
|
|
123
|
+
* resolves the color syntax; this checks only that it is one declaration value.
|
|
124
|
+
*/
|
|
125
|
+
declare function fillColor(value: string): CssColor;
|
|
118
126
|
|
|
119
|
-
export { type CssColor, type CssFlex, type CssFlexBasis, type CssFlexKeyword, type CssForegroundColor, type CssLength, type CssLengthExpression, type CssSize, type CssSizeKeyword, type CssValue, type UiColor, type UiColorName, type UiForegroundColorName, type UiGap, type UiGapValue, type UiSpaceName, calc, colorVar, em, flex, foregroundColor, foregroundColorVar, lengthVar, pct, plus, px, rem, remify, space, uiColor };
|
|
127
|
+
export { type CssColor, type CssFlex, type CssFlexBasis, type CssFlexKeyword, type CssForegroundColor, type CssLength, type CssLengthExpression, type CssSize, type CssSizeKeyword, type CssValue, type UiColor, type UiColorName, type UiForegroundColorName, type UiGap, type UiGapValue, type UiSpaceName, calc, colorVar, em, fillColor, flex, foregroundColor, foregroundColorVar, lengthVar, pct, plus, px, rem, remify, space, uiColor };
|
package/dist/css-values.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export { calc, colorVar, em, flex, foregroundColor, foregroundColorVar, lengthVar, pct, plus, px, rem, remify, space, uiColor } from './chunk-
|
|
1
|
+
export { calc, colorVar, em, fillColor, flex, foregroundColor, foregroundColorVar, lengthVar, pct, plus, px, rem, remify, space, uiColor } from './chunk-IQSRHXZR.js';
|
|
2
2
|
|
|
3
3
|
//# sourceMappingURL=css-values.js.map
|
package/dist/disclosure-arrow.js
CHANGED
package/dist/empty-state.js
CHANGED
package/dist/grid.js
CHANGED
package/dist/icon-button.js
CHANGED
package/dist/index.d.ts
CHANGED
|
@@ -8,6 +8,7 @@ export { ToolbarActionLink, ToolbarActionLinkProps, ToolbarControlGroup, Toolbar
|
|
|
8
8
|
export { HeadingLevel, ToolbarText, ToolbarTextProps, ToolbarTextSize, ToolbarTextTone } from './toolbar-text.js';
|
|
9
9
|
export { FramedList, FramedListProps, FramedListRow, FramedListRowProps, FramedListSurface } from './framed-list.js';
|
|
10
10
|
export { List, ListConfig, ListInset, ListProps, ListSurface } from './list.js';
|
|
11
|
+
export { wireListFocusScroll } from './wire-list-focus-scroll.js';
|
|
11
12
|
export { ListActionRow, ListActionRowProps } from './list-action-row.js';
|
|
12
13
|
export { ListHeader, ListHeaderProps } from './list-header.js';
|
|
13
14
|
export { ListInsetControl, ListInsetControlProps } from './list-inset-control.js';
|
|
@@ -17,7 +18,7 @@ export { SummaryRow, SummaryRowListEdge, SummaryRowPresentation, SummaryRowProps
|
|
|
17
18
|
export { ValueTable, ValueTablePresentation, ValueTableProps, ValueTableRow, ValueTableRowProps, ValueTableStackBelow } from './value-table.js';
|
|
18
19
|
export { AnchoredSurfaceOptions, AnchoredSurfacePoint, openAnchoredSurface, openAnchoredSurfaceAt } from './anchored-surface.js';
|
|
19
20
|
export { Badge, BadgeAppearance, BadgeDotProps, BadgeProps, BadgeShape, BadgeSize, BadgeTextProps, BadgeTone } from './badge.js';
|
|
20
|
-
export { Chip, ChipProps } from './chip.js';
|
|
21
|
+
export { Chip, ChipProps, ChipTone } from './chip.js';
|
|
21
22
|
export { CornerStatus, CornerStatusPlacement, CornerStatusPresentation, CornerStatusProps } from './corner-status.js';
|
|
22
23
|
export { wireCornerStatus } from './wire-corner-status.js';
|
|
23
24
|
export { EdgeActivityIndicator, EdgeActivityIndicatorProps } from './edge-activity-indicator.js';
|
|
@@ -28,17 +29,19 @@ export { StateBanner, StateBannerProps, StateBannerTone, StateBannerUrgency } fr
|
|
|
28
29
|
export { ChoiceChips, ChoiceChipsChoice, ChoiceChipsProps, ChoiceChipsSize, ChoiceChipsSwatch } from './choice-chips.js';
|
|
29
30
|
export { Combobox, ComboboxProps, ComboboxSuggestion } from './combobox.js';
|
|
30
31
|
export { ComboboxCommit, WireComboboxesOptions, wireComboboxes } from './wire-comboboxes.js';
|
|
32
|
+
export { Composer, ComposerProps, ComposerRootAttributes } from './composer.js';
|
|
33
|
+
export { wireComposers } from './wire-composers.js';
|
|
31
34
|
export { FieldLabel, FieldLabelProps, Text, TextContent, TextFont, TextProps, TextSize, TextTone, TextVariant } from './text.js';
|
|
32
35
|
export { FileDropZone, FileDropZoneProps, FilePickerTrigger, FilePickerTriggerProps } from './file-picker.js';
|
|
33
36
|
export { FilePickerSelection, WireFilePickersOptions, fileMatchesAccept, wireFilePickers } from './wire-file-pickers.js';
|
|
34
37
|
export { SegmentedControl, SegmentedControlAppearance, SegmentedControlChoice, SegmentedControlLayout, SegmentedControlProps, SegmentedControlShape, SegmentedControlSize } from './segmented-control.js';
|
|
35
38
|
export { Select, SelectChoice, SelectFocusRingOwner, SelectPresentation, SelectProps, SelectSelectedPresentation, SelectSize } from './select.js';
|
|
36
|
-
export { T as TokenSearchEditorAttributes, a as TokenSearchField, b as TokenSearchFieldProps, c as TokenSearchFieldValue, d as TokenSearchModel, e as TokenSearchModelOptions, f as TokenSearchResolvedToken, g as TokenSearchRule, h as TokenSearchState, i as TokenSearchSuggestion, j as TokenSearchToken, k as TokenSearchTrailingAction, l as createTokenSearchModel, p as placeTokenSearchCaret, r as readTokenSearchField } from './token-search-model-
|
|
39
|
+
export { T as TokenSearchEditorAttributes, a as TokenSearchField, b as TokenSearchFieldProps, c as TokenSearchFieldValue, d as TokenSearchModel, e as TokenSearchModelOptions, f as TokenSearchResolvedToken, g as TokenSearchRule, h as TokenSearchState, i as TokenSearchSuggestion, j as TokenSearchToken, k as TokenSearchTrailingAction, l as TokenSearchTrailingActionAttributes, m as createTokenSearchModel, p as placeTokenSearchCaret, r as readTokenSearchField } from './token-search-model-aYR0YAei.js';
|
|
37
40
|
export { TokenSearchCollapsibleOptions, TokenSearchEdit, TokenSearchFieldsHandle, TokenSearchSubmit, WireTokenSearchFieldsOptions, wireTokenSearchFields } from './wire-token-search-fields.js';
|
|
38
41
|
export { ColumnTrack, ColumnTrackLayout, ColumnTrackProps } from './column-track.js';
|
|
39
42
|
export { ContentSwap, ContentSwapDirection, ContentSwapProps, ContentSwapSide, ContentSwapTransition } from './content-swap.js';
|
|
40
43
|
export { Grid, GridProps } from './grid.js';
|
|
41
|
-
export { Pane, PaneAppearance, PaneChromeDividers, PaneChromePlacement, PaneConfig, PaneContentElement, PaneElement, PaneProps, PaneSeparatorSide } from './pane.js';
|
|
44
|
+
export { Pane, PaneAppearance, PaneChromeDividers, PaneChromePlacement, PaneConfig, PaneContentElement, PaneElement, PaneHeaderPresentation, PaneProps, PaneSeparatorSide } from './pane.js';
|
|
42
45
|
export { ResizableRegion, ResizableRegionAxis, ResizableRegionCollapseMotion, ResizableRegionContentOverflow, ResizableRegionEdge, ResizableRegionPresentation, ResizableRegionProps, ResizableRegionResponsiveFillAt, ResizableRegionRestorePosition, ResizableRegionSeparator, clampRegionSize, resizeRegionFromPointer } from './resizable-region.js';
|
|
43
46
|
export { ResizeCommit, WireResizableRegionsOptions, wireResizableRegions } from './wire-resizable-regions.js';
|
|
44
47
|
export { Row, RowProps } from './row.js';
|
|
@@ -50,13 +53,15 @@ export { TabActivation, TabBar, TabBarAllocation, TabBarPresentation, TabBarProp
|
|
|
50
53
|
export { TabDropPosition, TabReorder, TabReorderSource, WireTabBarsOptions, reorderTabs, wireTabBars } from './wire-tab-bars.js';
|
|
51
54
|
export { ContentItem, ContentItemAppearance, ContentItemBubble, ContentItemFrame, ContentItemProps, ContentItemSelectionMode, ContentItemShape } from './content-item.js';
|
|
52
55
|
export { SunkenPanel, SunkenPanelProps, SunkenPanelShape, ensureSunkenTexture } from './sunken-panel.js';
|
|
53
|
-
export { DialogSurface, DialogSurfaceBodyLayout, DialogSurfaceHeight, DialogSurfaceMaxHeight, DialogSurfacePresentation, DialogSurfaceProps, DialogSurfaceRootAttributes, DialogSurfaceSize, PopoverDialogSurface, PopoverDialogSurfaceDataAttributes, PopoverDialogSurfacePresentation, PopoverDialogSurfaceProps, PopupSurface, PopupSurfaceInset, PopupSurfaceProps, SurfaceInset } from './surface-scaffold.js';
|
|
56
|
+
export { DialogSurface, DialogSurfaceBodyLayout, DialogSurfaceFooterPresentation, DialogSurfaceHeaderPresentation, DialogSurfaceHeight, DialogSurfaceMaxHeight, DialogSurfacePresentation, DialogSurfaceProps, DialogSurfaceRootAttributes, DialogSurfaceSize, PopoverDialogSurface, PopoverDialogSurfaceDataAttributes, PopoverDialogSurfacePresentation, PopoverDialogSurfaceProps, PopupSurface, PopupSurfaceInset, PopupSurfaceProps, SurfaceInset } from './surface-scaffold.js';
|
|
54
57
|
export { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
|
|
55
|
-
export { CssColor, CssFlex, CssFlexBasis, CssFlexKeyword, CssForegroundColor, CssLength, CssLengthExpression, CssSize, CssSizeKeyword, CssValue, UiColor, UiColorName, UiForegroundColorName, UiSpaceName, calc, colorVar, em, flex, foregroundColor, foregroundColorVar, lengthVar, pct, plus, px, rem, space, uiColor } from './css-values.js';
|
|
58
|
+
export { CssColor, CssFlex, CssFlexBasis, CssFlexKeyword, CssForegroundColor, CssLength, CssLengthExpression, CssSize, CssSizeKeyword, CssValue, UiColor, UiColorName, UiForegroundColorName, UiSpaceName, calc, colorVar, em, fillColor, flex, foregroundColor, foregroundColorVar, lengthVar, pct, plus, px, rem, space, uiColor } from './css-values.js';
|
|
56
59
|
export { ListDropPosition, ListReorder, ListReorderSource, ListReorderTarget, WireListReorderOptions, reorderListItems, wireListReorder } from './wire-list-reorder.js';
|
|
57
60
|
export { ScrollDividerTarget, WireScrollDividersOptions, wireScrollDividers } from './wire-scroll-dividers.js';
|
|
58
61
|
export { wireToolbarVisibility } from './wire-toolbar-visibility.js';
|
|
59
62
|
export { H as HorizontalAlignment, L as ListVerticalAlignment, V as VerticalAlignment } from './flex-alignment-4ms8ZbV8.js';
|
|
63
|
+
export { L as ListIconTile, a as ListIconTileColor, b as ListIconTileTone } from './list-icon-tile-B8dr97OW.js';
|
|
64
|
+
export { S as ScrollClearance } from './scroll-clearance-BikHljTc.js';
|
|
60
65
|
export { S as SemanticTone } from './semantic-tone-CdW013KF.js';
|
|
61
66
|
export { S as Sides } from './sides-BPSWde0A.js';
|
|
62
67
|
import 'kerfjs';
|
package/dist/index.js
CHANGED
|
@@ -1,66 +1,69 @@
|
|
|
1
|
-
export {
|
|
2
|
-
export {
|
|
1
|
+
export { wireResizableRegions } from './chunk-GS2QD3N7.js';
|
|
2
|
+
export { reorderTabs, wireTabBars } from './chunk-K4AT3V3J.js';
|
|
3
|
+
export { wireTokenSearchFields } from './chunk-YOA5W5ZH.js';
|
|
3
4
|
export { wireToolbarVisibility } from './chunk-2GOCOLQL.js';
|
|
5
|
+
export { wireComboboxes } from './chunk-FDZNYD4C.js';
|
|
6
|
+
export { wireComposers } from './chunk-ELCMSQNJ.js';
|
|
4
7
|
export { wireCornerStatus } from './chunk-ZKKO4MHC.js';
|
|
5
8
|
export { fileMatchesAccept, wireFilePickers } from './chunk-2MSPNRWJ.js';
|
|
9
|
+
export { wireListFocusScroll } from './chunk-QDSZTQXL.js';
|
|
6
10
|
export { reorderListItems, wireListReorder } from './chunk-MJ5RU6XT.js';
|
|
7
|
-
export { wireResizableRegions } from './chunk-GS2QD3N7.js';
|
|
8
11
|
export { createTokenSearchModel } from './chunk-IM3GKYOG.js';
|
|
9
|
-
export { ValueTable, ValueTableRow } from './chunk-
|
|
12
|
+
export { ValueTable, ValueTableRow } from './chunk-DZJ4GBSP.js';
|
|
13
|
+
export { wireScrollDividers } from './chunk-CXZXHZTR.js';
|
|
10
14
|
|
|
11
|
-
export {
|
|
12
|
-
export { wireComboboxes } from './chunk-FDZNYD4C.js';
|
|
15
|
+
export { StateBanner } from './chunk-QROYYGWU.js';
|
|
13
16
|
export { SummaryRow } from './chunk-4UB5Z3ZZ.js';
|
|
14
17
|
export { SunkenPanel } from './chunk-D5RGM3XA.js';
|
|
15
|
-
export { DialogSurface, PopoverDialogSurface, PopupSurface } from './chunk-
|
|
18
|
+
export { DialogSurface, PopoverDialogSurface, PopupSurface } from './chunk-PIVY32AE.js';
|
|
16
19
|
export { TabBar } from './chunk-JOR5LGYE.js';
|
|
17
20
|
export { SegmentedControl } from './chunk-NS2TBYM4.js';
|
|
18
|
-
export { Select } from './chunk-
|
|
19
|
-
export { Spacer } from './chunk-
|
|
20
|
-
export { SplitButton } from './chunk-
|
|
21
|
-
export {
|
|
22
|
-
export { IconToggleButton } from './chunk-
|
|
23
|
-
export { ListActionRow } from './chunk-
|
|
21
|
+
export { Select } from './chunk-TLMMFQWM.js';
|
|
22
|
+
export { Spacer } from './chunk-YMUIQRWK.js';
|
|
23
|
+
export { SplitButton } from './chunk-HLDRH23D.js';
|
|
24
|
+
export { IconButton } from './chunk-VFYO3UGZ.js';
|
|
25
|
+
export { IconToggleButton } from './chunk-CA7LNX3J.js';
|
|
26
|
+
export { ListActionRow } from './chunk-RHD7RKGI.js';
|
|
24
27
|
export { EdgeActivityIndicator } from './chunk-QH5KOFNS.js';
|
|
25
|
-
export { EmptyState } from './chunk-
|
|
28
|
+
export { EmptyState } from './chunk-B53PS2LE.js';
|
|
26
29
|
export { FileDropZone, FilePickerTrigger } from './chunk-W4IK7AWD.js';
|
|
27
30
|
export { FramedList, FramedListRow } from './chunk-S2XULQEK.js';
|
|
28
|
-
export { Grid } from './chunk-
|
|
29
|
-
export { IconButton } from './chunk-M2NRCFRO.js';
|
|
31
|
+
export { Grid } from './chunk-KCS6NJ3O.js';
|
|
30
32
|
export { ColumnTrack } from './chunk-QYMJHS4K.js';
|
|
31
33
|
export { Combobox } from './chunk-ETCWQLJV.js';
|
|
34
|
+
export { Composer } from './chunk-AV7CPAPT.js';
|
|
32
35
|
export { ContentItem } from './chunk-7IUEBNCO.js';
|
|
33
36
|
export { ContentSwap } from './chunk-EIET4QLK.js';
|
|
34
|
-
export { CornerStatus } from './chunk-
|
|
35
|
-
export { openAnchoredSurface, openAnchoredSurfaceAt } from './chunk-
|
|
36
|
-
export { AppTab } from './chunk-
|
|
37
|
-
export { TokenSearchField, placeTokenSearchCaret, readTokenSearchField } from './chunk-
|
|
38
|
-
export {
|
|
37
|
+
export { CornerStatus } from './chunk-G3J7JDP6.js';
|
|
38
|
+
export { openAnchoredSurface, openAnchoredSurfaceAt } from './chunk-3WYREXW4.js';
|
|
39
|
+
export { AppTab } from './chunk-TGLUDQP2.js';
|
|
40
|
+
export { TokenSearchField, placeTokenSearchCaret, readTokenSearchField } from './chunk-MF6ZUUJZ.js';
|
|
41
|
+
export { Row } from './chunk-YQ2AC4E2.js';
|
|
42
|
+
export { ToolbarText } from './chunk-HGV7J4T6.js';
|
|
39
43
|
export { ResizableRegion, clampRegionSize, resizeRegionFromPointer } from './chunk-Y6KT7ZTR.js';
|
|
40
|
-
export {
|
|
41
|
-
export {
|
|
42
|
-
export { ListHeader } from './chunk-BBU2SPRE.js';
|
|
43
|
-
export { FieldLabel, Text } from './chunk-LL45C7BB.js';
|
|
44
|
+
export { PopupMenu, closePopupMenu, openPopupMenu, openPopupMenuAt } from './chunk-HQZYKJ56.js';
|
|
45
|
+
export { ListHeader } from './chunk-T4WJ5VGP.js';
|
|
44
46
|
export { ListInsetControl } from './chunk-AN5IWMTM.js';
|
|
45
47
|
export { ListInsetText } from './chunk-S4Y3YTAI.js';
|
|
46
|
-
export { ListItem, ListItemLink } from './chunk-
|
|
48
|
+
export { ListItem, ListItemLink } from './chunk-3GLYIIFR.js';
|
|
47
49
|
|
|
50
|
+
export { DisclosureArrow } from './chunk-3VXDSIBJ.js';
|
|
48
51
|
export { FloatingToolbar } from './chunk-S3ECMF23.js';
|
|
49
|
-
export {
|
|
50
|
-
export { Skeleton } from './chunk-
|
|
52
|
+
export { FieldLabel, Text } from './chunk-LL45C7BB.js';
|
|
53
|
+
export { Skeleton } from './chunk-CVD5IZGB.js';
|
|
51
54
|
export { Badge } from './chunk-U6QYTMDB.js';
|
|
52
|
-
export { Chip } from './chunk-
|
|
53
|
-
export { ChoiceChips } from './chunk-
|
|
54
|
-
export { ToolbarActionLink, ToolbarControlGroup } from './chunk-
|
|
55
|
+
export { Chip } from './chunk-34U4ANDJ.js';
|
|
56
|
+
export { ChoiceChips } from './chunk-FR76ZJQC.js';
|
|
57
|
+
export { ToolbarActionLink, ToolbarControlGroup } from './chunk-QIG4IGUP.js';
|
|
55
58
|
export { Toolbar } from './chunk-CMLPFIC5.js';
|
|
56
|
-
export {
|
|
57
|
-
export { ensureSunkenTexture } from './chunk-IKS72C6P.js';
|
|
58
|
-
export { List } from './chunk-V6W56V3N.js';
|
|
59
|
+
export { List } from './chunk-HZPHCSCS.js';
|
|
59
60
|
|
|
60
|
-
export {
|
|
61
|
+
export { Pane } from './chunk-INI4WDWC.js';
|
|
62
|
+
export { ensureSunkenTexture } from './chunk-IKS72C6P.js';
|
|
63
|
+
export { LucideIcon } from './chunk-LOSRXZAH.js';
|
|
64
|
+
export { LoadingSpinner } from './chunk-WVS6CUCT.js';
|
|
61
65
|
|
|
62
|
-
export {
|
|
63
|
-
export { calc, colorVar, em, flex, foregroundColor, foregroundColorVar, lengthVar, pct, plus, px, rem, space, uiColor } from './chunk-U657IHFB.js';
|
|
66
|
+
export { calc, colorVar, em, fillColor, flex, foregroundColor, foregroundColorVar, lengthVar, pct, plus, px, rem, space, uiColor } from './chunk-IQSRHXZR.js';
|
|
64
67
|
|
|
65
68
|
|
|
66
69
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
import { SafeHtml } from 'kerfjs';
|
|
2
|
+
import { L as ListIconTile } from './list-icon-tile-B8dr97OW.js';
|
|
3
|
+
export { a as ListIconTileColor, b as ListIconTileTone } from './list-icon-tile-B8dr97OW.js';
|
|
2
4
|
import { PopupMenuEntry, PopupMenuPlacement } from './popup-menu.js';
|
|
5
|
+
import './css-values.js';
|
|
3
6
|
import './semantic-content-BbzjvSu9.js';
|
|
4
7
|
|
|
5
8
|
type ListActionRowRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
|
|
@@ -7,6 +10,8 @@ type ListActionRowRootAttributes = Readonly<Record<`data-${string}`, string | un
|
|
|
7
10
|
'data-action'?: never;
|
|
8
11
|
'data-item-id'?: never;
|
|
9
12
|
'data-has-icon'?: never;
|
|
13
|
+
'data-icon-tile'?: never;
|
|
14
|
+
'data-icon-tile-tone'?: never;
|
|
10
15
|
'data-multiline'?: never;
|
|
11
16
|
'data-density'?: never;
|
|
12
17
|
'data-divider'?: never;
|
|
@@ -66,10 +71,13 @@ interface ListActionRowCommonProps {
|
|
|
66
71
|
description?: string | SafeHtml;
|
|
67
72
|
status?: string | SafeHtml;
|
|
68
73
|
busy?: boolean;
|
|
74
|
+
/** Row height: `standard` is 44px; `compact` is 36px (42px with `iconTile`), the height of a compact `ListItem`. */
|
|
69
75
|
density?: 'standard' | 'compact';
|
|
70
76
|
divider?: 'none' | 'before' | 'after' | 'both';
|
|
71
77
|
/** Decorative dormant content for the primary button. Must not contain interactive descendants. */
|
|
72
78
|
icon?: SafeHtml;
|
|
79
|
+
/** Present `icon` in a filled 32px rounded tile with an 18px glyph: a quiet tone preset, or `{ color, foreground? }` for an application color. */
|
|
80
|
+
iconTile?: ListIconTile;
|
|
73
81
|
action: string;
|
|
74
82
|
itemId?: string;
|
|
75
83
|
selected?: boolean;
|
|
@@ -96,6 +104,6 @@ interface ListActionRowCommonProps {
|
|
|
96
104
|
}
|
|
97
105
|
/** Exactly one trailing control: a native button (`trailingAction*`) or an overflow menu (`trailingMenu`). */
|
|
98
106
|
type ListActionRowProps = ListActionRowCommonProps & (ListActionRowTrailingButtonProps | ListActionRowTrailingMenuProps);
|
|
99
|
-
declare function ListActionRow({ label, description, status, busy, density, divider, icon, action, itemId, selected, pressed, accessibleLabel, title, multiline, state, disabled, tabIndex, placeholder, draggable, dragging, dropPosition, trailingAction, trailingActionLabel, trailingActionIcon, trailingActionDisabled, trailingActionTitle, trailingActionVisibility, trailingMenu, className, rootAttributes, trailingActionAttributes, slot, }: ListActionRowProps): SafeHtml;
|
|
107
|
+
declare function ListActionRow({ label, description, status, busy, density, divider, icon, iconTile, action, itemId, selected, pressed, accessibleLabel, title, multiline, state, disabled, tabIndex, placeholder, draggable, dragging, dropPosition, trailingAction, trailingActionLabel, trailingActionIcon, trailingActionDisabled, trailingActionTitle, trailingActionVisibility, trailingMenu, className, rootAttributes, trailingActionAttributes, slot, }: ListActionRowProps): SafeHtml;
|
|
100
108
|
|
|
101
|
-
export { ListActionRow, type ListActionRowProps, type ListActionRowTrailingMenu };
|
|
109
|
+
export { ListActionRow, type ListActionRowProps, type ListActionRowTrailingMenu, ListIconTile };
|
package/dist/list-action-row.js
CHANGED
package/dist/list-header.js
CHANGED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { CssColor, CssForegroundColor } from './css-values.js';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Quiet tile palette for a list row's leading icon: the same fill, border, and
|
|
5
|
+
* foreground roles as `ToolbarControlGroup`'s `tileTone`.
|
|
6
|
+
*/
|
|
7
|
+
type ListIconTileTone = 'neutral' | 'brand' | 'success' | 'warning' | 'danger';
|
|
8
|
+
/** A list row's leading icon tile filled with an application-chosen color. */
|
|
9
|
+
interface ListIconTileColor {
|
|
10
|
+
/** The tile fill: `uiColor()`, `colorVar()`, or `fillColor()` for an app color such as `#e5484d`. */
|
|
11
|
+
color: CssColor;
|
|
12
|
+
/** The glyph color over the fill. Defaults to black or white, whichever contrasts with `color`. */
|
|
13
|
+
foreground?: CssForegroundColor;
|
|
14
|
+
}
|
|
15
|
+
/** A filled leading icon tile: a quiet tone preset or an application color. */
|
|
16
|
+
type ListIconTile = ListIconTileTone | ListIconTileColor;
|
|
17
|
+
|
|
18
|
+
export type { ListIconTile as L, ListIconTileColor as a, ListIconTileTone as b };
|
package/dist/list-item.d.ts
CHANGED
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
import { SafeHtml } from 'kerfjs';
|
|
2
|
+
import { L as ListIconTile } from './list-icon-tile-B8dr97OW.js';
|
|
3
|
+
export { a as ListIconTileColor, b as ListIconTileTone } from './list-icon-tile-B8dr97OW.js';
|
|
2
4
|
import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
|
|
5
|
+
import './css-values.js';
|
|
3
6
|
|
|
4
7
|
type ListItemRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
|
|
5
8
|
'data-component'?: never;
|
|
@@ -14,6 +17,8 @@ type ListItemRootAttributes = Readonly<Record<`data-${string}`, string | undefin
|
|
|
14
17
|
'data-state'?: never;
|
|
15
18
|
'data-kui-disabled'?: never;
|
|
16
19
|
'data-icon-align'?: never;
|
|
20
|
+
'data-icon-tile'?: never;
|
|
21
|
+
'data-icon-tile-tone'?: never;
|
|
17
22
|
'data-dragging'?: never;
|
|
18
23
|
'data-drop-position'?: never;
|
|
19
24
|
}>;
|
|
@@ -22,6 +27,8 @@ interface ListItemProps {
|
|
|
22
27
|
/** App-owned supporting text rendered in the component's stable label stack. */
|
|
23
28
|
description?: string | SafeHtml;
|
|
24
29
|
icon?: SafeHtml;
|
|
30
|
+
/** Present `icon` in a filled 32px rounded tile with an 18px glyph: a quiet tone preset, or `{ color, foreground? }` for an application color. */
|
|
31
|
+
iconTile?: ListIconTile;
|
|
25
32
|
/** Dormant author content at the row's end; a placeholder renders it as a skeleton. */
|
|
26
33
|
trailing?: KerfUiContent;
|
|
27
34
|
/** Dormant status metadata rendered before trailing content; a placeholder renders it as a skeleton. */
|
|
@@ -63,8 +70,8 @@ interface ListItemLinkProps extends Omit<ListItemProps, 'action' | 'pressed'> {
|
|
|
63
70
|
action?: never;
|
|
64
71
|
pressed?: never;
|
|
65
72
|
}
|
|
66
|
-
declare function ListItem({ label, description, icon, trailing, status, busy, density, divider, selected, action, itemId, className, pressed, accessibleLabel, title, multiline, multilineIconAlign, state, disabled, tabIndex, placeholder, draggable, dragging, dropPosition, rootAttributes, slot, }: ListItemProps): SafeHtml;
|
|
73
|
+
declare function ListItem({ label, description, icon, iconTile, trailing, status, busy, density, divider, selected, action, itemId, className, pressed, accessibleLabel, title, multiline, multilineIconAlign, state, disabled, tabIndex, placeholder, draggable, dragging, dropPosition, rootAttributes, slot, }: ListItemProps): SafeHtml;
|
|
67
74
|
/** A navigation row with native link activation and ListItem geometry. */
|
|
68
|
-
declare function ListItemLink({ href, external, label, description, icon, trailing, status, busy, density, divider, selected, itemId, className, accessibleLabel, title, multiline, multilineIconAlign, state, disabled, tabIndex, placeholder, draggable, dragging, dropPosition, rootAttributes, slot, }: ListItemLinkProps): SafeHtml;
|
|
75
|
+
declare function ListItemLink({ href, external, label, description, icon, iconTile, trailing, status, busy, density, divider, selected, itemId, className, accessibleLabel, title, multiline, multilineIconAlign, state, disabled, tabIndex, placeholder, draggable, dragging, dropPosition, rootAttributes, slot, }: ListItemLinkProps): SafeHtml;
|
|
69
76
|
|
|
70
|
-
export { ListItem, ListItemLink, type ListItemLinkProps, type ListItemProps };
|
|
77
|
+
export { ListIconTile, ListItem, ListItemLink, type ListItemLinkProps, type ListItemProps };
|
package/dist/list-item.js
CHANGED
package/dist/list.d.ts
CHANGED
|
@@ -3,9 +3,10 @@ import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
|
|
|
3
3
|
import { S as StructuralRootAttributes } from './extension-attributes-mu8MFUl0.js';
|
|
4
4
|
import { H as HorizontalAlignment, L as ListVerticalAlignment } from './flex-alignment-4ms8ZbV8.js';
|
|
5
5
|
export { V as VerticalAlignment } from './flex-alignment-4ms8ZbV8.js';
|
|
6
|
+
import { S as ScrollClearance } from './scroll-clearance-BikHljTc.js';
|
|
6
7
|
import { S as Sides } from './sides-BPSWde0A.js';
|
|
7
|
-
import { UiGap, CssFlexKeyword, CssFlex } from './css-values.js';
|
|
8
|
-
export {
|
|
8
|
+
import { UiGap, CssFlexKeyword, CssFlex, CssLength } from './css-values.js';
|
|
9
|
+
export { UiGapValue, UiSpaceName } from './css-values.js';
|
|
9
10
|
|
|
10
11
|
type ListRootAttributes = StructuralRootAttributes & Readonly<{
|
|
11
12
|
'data-component'?: never;
|
|
@@ -15,6 +16,8 @@ type ListRootAttributes = StructuralRootAttributes & Readonly<{
|
|
|
15
16
|
'data-h-align'?: never;
|
|
16
17
|
'data-v-align'?: never;
|
|
17
18
|
'data-scrollable'?: never;
|
|
19
|
+
'data-scroll-clearance'?: never;
|
|
20
|
+
'data-frame'?: never;
|
|
18
21
|
'data-surface'?: never;
|
|
19
22
|
'data-inset'?: never;
|
|
20
23
|
'data-text-insets'?: never;
|
|
@@ -59,6 +62,35 @@ interface ListProps {
|
|
|
59
62
|
* column and use `flex`; `fill` needs a definite-height parent.
|
|
60
63
|
*/
|
|
61
64
|
scrollable?: boolean;
|
|
65
|
+
/**
|
|
66
|
+
* Clear chrome that lies over this scrollable List's block-start and/or
|
|
67
|
+
* block-end edge, such as a `DialogSurface` floating footer. The List adds
|
|
68
|
+
* the inherited `--kui-scroll-clearance-block-*` context that chrome
|
|
69
|
+
* publishes to its own block padding and `scroll-padding`, so its rows
|
|
70
|
+
* scroll visibly beneath the chrome while the first and last rows (and any
|
|
71
|
+
* row focused or scrolled into view) can still rest clear of it. Opt in only
|
|
72
|
+
* the one scroller that reaches the covered edge. Defaults to none.
|
|
73
|
+
*/
|
|
74
|
+
scrollClearance?: ScrollClearance;
|
|
75
|
+
/**
|
|
76
|
+
* Draw a bordered, rounded frame around the stack: a 1px neutral border,
|
|
77
|
+
* the standard control radius, and a 4px inset on every side that keeps the
|
|
78
|
+
* first and last rows' focus rings inside a scrolling frame's clip. It
|
|
79
|
+
* replaces any `inset`/`textInsets`/`controlInsets`. With `scrollable` and
|
|
80
|
+
* `maxHeight` it is a bounded result picker of `ListItem` rows.
|
|
81
|
+
*/
|
|
82
|
+
frame?: boolean;
|
|
83
|
+
/**
|
|
84
|
+
* The List's maximum block size, a typed `CssLength` from
|
|
85
|
+
* `@kerfjs/ui/css-values` (such as `rem(14)`). Pair it with `scrollable` so
|
|
86
|
+
* rows beyond it scroll; it bounds the List without a flex-column ancestor.
|
|
87
|
+
*/
|
|
88
|
+
maxHeight?: CssLength;
|
|
89
|
+
/**
|
|
90
|
+
* The List's minimum block size, a typed `CssLength` (such as `rem(4.25)`),
|
|
91
|
+
* so a short or empty result set keeps a stable box. Defaults to no minimum.
|
|
92
|
+
*/
|
|
93
|
+
minHeight?: CssLength;
|
|
62
94
|
/**
|
|
63
95
|
* Paint a solid surface behind the stack, including its insets: for a strip
|
|
64
96
|
* of chrome (a banner above a sunken work area) that must not show the
|
|
@@ -91,6 +123,6 @@ interface ListProps {
|
|
|
91
123
|
*/
|
|
92
124
|
type ListConfig = Pick<ListProps, 'gap' | 'hAlign' | 'vAlign' | 'dividerSides' | 'textInsets' | 'controlInsets'>;
|
|
93
125
|
/** A stretch-aligned vertical stack with optional gap, flex, fill, scroll, and dividers. */
|
|
94
|
-
declare function List({ children, selectionMode, ariaLabel, gap, flex, fill, hAlign, vAlign, scrollable, surface, inset, dividerSides, textInsets, controlInsets, className, rootAttributes, slot, }: ListProps): kerfjs.SafeHtml;
|
|
126
|
+
declare function List({ children, selectionMode, ariaLabel, gap, flex, fill, hAlign, vAlign, scrollable, scrollClearance, frame, maxHeight, minHeight, surface, inset, dividerSides, textInsets, controlInsets, className, rootAttributes, slot, }: ListProps): kerfjs.SafeHtml;
|
|
95
127
|
|
|
96
|
-
export { CssFlex, CssFlexKeyword, HorizontalAlignment, List, type ListConfig, type ListInset, type ListProps, type ListSurface, ListVerticalAlignment, Sides, UiGap };
|
|
128
|
+
export { CssFlex, CssFlexKeyword, CssLength, HorizontalAlignment, List, type ListConfig, type ListInset, type ListProps, type ListSurface, ListVerticalAlignment, ScrollClearance, Sides, UiGap };
|
package/dist/list.js
CHANGED
package/dist/loading-spinner.js
CHANGED
package/dist/lucide-icon.js
CHANGED