@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/shared/panels/panel-toolbar-group.ts","../src/components/actions/toolbar-control-group/toolbar-control-group.tsx"],"names":[],"mappings":"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","file":"chunk-YXOMI7ES.js","sourcesContent":["import { isSafeHtml, type SafeHtml } from 'kerfjs';\n\n// A render-time annotation, shared across separately bundled UI subpaths.\n// It never appears in the DOM or changes the group's visual treatment.\nconst RELOCATE_ON_COLLAPSE = Symbol.for(\n '@kerfjs/ui.ToolbarControlGroup.relocateOnCollapse',\n);\n\nexport function markRelocatableGroup(group: SafeHtml): SafeHtml {\n Object.defineProperty(group, RELOCATE_ON_COLLAPSE, { value: true });\n return group;\n}\n\nexport function isRelocatableGroup(value: unknown): value is SafeHtml {\n return (\n isSafeHtml(value) &&\n (value as SafeHtml & { [RELOCATE_ON_COLLAPSE]?: boolean })[\n RELOCATE_ON_COLLAPSE\n ] === true\n );\n}\n","import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { markRelocatableGroup } from '../../../shared/panels/panel-toolbar-group.js';\nimport type { CssLength } from '../../../shared/styles/css-values.js';\nimport { LoadingSpinner } from '../../feedback/loading-spinner/loading-spinner.js';\n\nexport type ToolbarControlGroupAppearance = 'contained' | 'borderless';\nexport type ToolbarControlGroupTone = 'default' | 'dark';\n/** Quiet palette for a contained, single decorative icon tile. */\nexport type ToolbarControlGroupTileTone =\n 'neutral' | 'brand' | 'success' | 'warning' | 'danger';\nexport type ToolbarControlGroupButtonAppearance = 'plain' | 'push';\nexport type ToolbarControlGroupShape = 'pill' | 'rounded';\nexport type ToolbarControlGroupSize = 'default' | 'compact';\nexport type ToolbarControlGroupDensity = 'comfortable' | 'tight';\nexport type ToolbarControlGroupContent =\n 'icon' | 'text' | 'mixed' | 'avatar' | 'search';\nexport type ToolbarControlGroupFocusRing = 'control' | 'outline' | 'halo';\nexport type ToolbarControlGroupSelectedChrome =\n 'raised' | 'filled' | 'outline' | 'none';\nexport type ToolbarControlGroupSelectedTone = 'brand' | 'neutral' | 'pop';\nexport type ToolbarControlGroupOverflow = 'visible' | 'scroll' | 'wrap';\nexport type ToolbarControlGroupExpandedOverflow = 'clip' | 'visible';\nexport type ToolbarControlGroupMenuInset = 'standard' | 'compact' | 'list-zero';\nexport type ToolbarControlGroupVisibility =\n | 'always'\n | 'compact-only'\n | 'hide-collapsed-tiny'\n | 'yield-to-expanded-sibling';\nexport type ToolbarControlGroupSizing = 'content' | 'grow' | 'fill';\nexport type ToolbarControlGroupPlacement = 'start' | 'end';\n\nexport interface ToolbarActionLinkProps {\n href: string;\n label: string;\n icon?: KerfUiContent;\n /** Optional machine-readable detail hidden visually but included in the default accessible name. */\n detail?: string;\n /** Override the accessible name when surrounding context is needed. */\n ariaLabel?: string;\n /** Open in a new tab with a safe rel and announce that behavior. */\n external?: boolean;\n className?: string;\n /** Native named-slot assignment when composed inside a web component. */\n slot?: string;\n}\n\n/** A semantic anchor with ToolbarControlGroup-owned action geometry. */\nexport function ToolbarActionLink({\n href,\n label,\n icon,\n detail,\n ariaLabel,\n external = false,\n className = '',\n slot,\n}: ToolbarActionLinkProps) {\n const accessibleLabel =\n ariaLabel ??\n `${label}${detail ? `, ${detail}` : ''}${external ? ' (opens in new tab)' : ''}`;\n return (\n <a\n class={`kui-toolbar-action-link ${className}`.trim()}\n data-component=\"toolbar-action-link\"\n href={href}\n target={external ? '_blank' : undefined}\n rel={external ? 'noopener noreferrer' : undefined}\n aria-label={accessibleLabel}\n slot={slot}\n >\n {icon}\n <span>{label}</span>\n {detail ? <code aria-hidden=\"true\">{detail}</code> : null}\n </a>\n );\n}\n\nexport interface ToolbarControlGroupProps {\n children: KerfUiContent;\n label?: string;\n className?: string;\n expanded?: boolean;\n single?: boolean;\n appearance?: ToolbarControlGroupAppearance;\n tone?: ToolbarControlGroupTone;\n /** Quiet fill, matching border and foreground for a contained single group whose only child is a decorative SVG. Ignored for interactive or mixed content. */\n tileTone?: ToolbarControlGroupTileTone;\n buttonAppearance?: ToolbarControlGroupButtonAppearance;\n /** Corner shape: fully round `pill` (default) or a softer `rounded` rectangle. */\n shape?: ToolbarControlGroupShape;\n size?: ToolbarControlGroupSize;\n density?: ToolbarControlGroupDensity;\n content?: ToolbarControlGroupContent;\n /** Whether controls paint focus individually or the group paints an outline/halo on focus-within. */\n focusRing?: ToolbarControlGroupFocusRing;\n /**\n * Chrome a pressed (`aria-pressed=\"true\"`) control paints. `none` keeps a\n * pressed control looking like its neighbors, for an icon-state toggle whose\n * glyph already shows the state (an empty or filled star); hover and the\n * focus ring are unchanged. One control can opt out alone with\n * `data-selected-chrome=\"none\"` on its own button.\n */\n selectedChrome?: ToolbarControlGroupSelectedChrome;\n selectedTone?: ToolbarControlGroupSelectedTone;\n /** Size a nested Web Awesome dropdown trigger as part of this group. */\n nestedDropdown?: boolean;\n /** Configure the nested dropdown menu inset without consumer ::part() CSS. */\n menuInset?: ToolbarControlGroupMenuInset;\n /** Keep an overlong row inside the available width by scrolling or wrapping. */\n overflow?: ToolbarControlGroupOverflow;\n /** Let app-owned anchored surfaces extend outside an expanded search group. Collapsed searches retain their clipping. */\n expandedOverflow?: ToolbarControlGroupExpandedOverflow;\n /** Responsive visibility owned by the enclosing Toolbar container. */\n visibility?: ToolbarControlGroupVisibility;\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 /** Intrinsic (default), grow from a basis, or occupy a full wrapping row. */\n sizing?: ToolbarControlGroupSizing;\n /** Place this group at the end of its flex row in a wrapping Toolbar zone. */\n placement?: ToolbarControlGroupPlacement;\n /** CSS length used as the minimum width and flex basis for `sizing=\"grow\"`; defaults to 19rem. */\n growBasis?: string;\n /** Move this group into the work-area toolbar when its panel collapses. */\n relocateOnCollapse?: boolean;\n /** Add contrast behind photo-backed avatar content. */\n scrim?: boolean;\n /** Block the group's controls and show a spinner without changing its dimensions. */\n busy?: boolean;\n /** Announced status while busy; defaults to “Working”. */\n busyLabel?: string;\n /**\n * Avatar image URL. A single-control group paints it on the group; a\n * multi-control group paints it only on the pressed selection highlight.\n */\n avatarImage?: string;\n /** Native named-slot assignment when composed inside a web component. */\n slot?: string;\n}\n\nexport function ToolbarControlGroup({\n children,\n label,\n className = '',\n expanded = false,\n single = false,\n appearance = 'contained',\n tone = 'default',\n tileTone,\n buttonAppearance = 'plain',\n shape = 'pill',\n size = 'default',\n density = 'comfortable',\n content = 'icon',\n focusRing = 'control',\n selectedChrome = 'raised',\n selectedTone = 'brand',\n nestedDropdown = false,\n menuInset = 'standard',\n overflow = 'visible',\n expandedOverflow = 'clip',\n visibility = 'always',\n hideBelow,\n showBelow,\n sizing = 'content',\n placement = 'start',\n growBasis,\n relocateOnCollapse = false,\n scrim = false,\n busy = false,\n busyLabel = 'Working',\n avatarImage,\n slot,\n}: ToolbarControlGroupProps) {\n const inlineStyles = [\n avatarImage\n ? `--kui-toolbar-avatar-image:url(${JSON.stringify(avatarImage)})`\n : '',\n growBasis ? `--kui-toolbar-group-grow-basis:${growBasis}` : '',\n ].filter(Boolean);\n const group = (\n <div\n class={`kui-toolbar-control-group ${className}`.trim()}\n data-component=\"toolbar-control-group\"\n role={label ? 'group' : undefined}\n aria-label={label}\n data-appearance={appearance}\n data-tone={tone}\n data-tile-tone={tileTone}\n data-button-appearance={buttonAppearance}\n data-expanded={String(expanded)}\n data-single={String(single)}\n data-shape={shape}\n data-size={size}\n data-density={density}\n data-content={content}\n data-focus-ring={focusRing}\n data-selected-chrome={selectedChrome}\n data-selected-tone={selectedTone}\n data-nested-dropdown={String(nestedDropdown)}\n data-menu-inset={menuInset}\n data-overflow={overflow}\n data-expanded-overflow={\n expandedOverflow === 'visible' ? 'visible' : undefined\n }\n data-visibility={visibility}\n data-hide-below={hideBelow}\n data-show-below={showBelow}\n data-sizing={sizing}\n data-placement={placement}\n data-scrim={String(scrim)}\n data-busy={String(busy)}\n aria-busy={busy ? 'true' : undefined}\n inert={busy}\n style={inlineStyles.length ? inlineStyles.join(';') : undefined}\n slot={slot}\n >\n {children}\n {busy ? (\n <span\n class=\"kui-toolbar-control-group__busy-spinner\"\n aria-hidden=\"true\"\n >\n <LoadingSpinner />\n </span>\n ) : null}\n </div>\n );\n const renderedGroup = busy ? (\n <>\n {group}\n <span class=\"kui-toolbar-control-group__busy-status\" role=\"status\">\n {busyLabel}\n </span>\n </>\n ) : (\n group\n );\n return relocateOnCollapse\n ? markRelocatableGroup(renderedGroup)\n : renderedGroup;\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/shared/panels/panel-toolbar-group.ts","../src/components/actions/toolbar-control-group/toolbar-control-group.tsx"],"names":[],"mappings":";;;;AAIA,IAAM,uCAAuB,MAAA,CAAO,GAAA;AAAA,EAClC;AACF,CAAA;AAEO,SAAS,qBAAqB,KAAA,EAA2B;AAC9D,EAAA,MAAA,CAAO,eAAe,KAAA,EAAO,oBAAA,EAAsB,EAAE,KAAA,EAAO,MAAM,CAAA;AAClE,EAAA,OAAO,KAAA;AACT;AAEO,SAAS,mBAAmB,KAAA,EAAmC;AACpE,EAAA,OACE,UAAA,CAAW,KAAK,CAAA,IACf,KAAA,CACC,oBACF,CAAA,KAAM,IAAA;AAEV;AC2BO,SAAS,iBAAA,CAAkB;AAAA,EAChC,IAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,CAAA,EAA2B;AACzB,EAAA,MAAM,eAAA,GACJ,SAAA,IACA,CAAA,EAAG,KAAK,CAAA,EAAG,MAAA,GAAS,CAAA,EAAA,EAAK,MAAM,CAAA,CAAA,GAAK,EAAE,CAAA,EAAG,QAAA,GAAW,wBAAwB,EAAE,CAAA,CAAA;AAChF,EAAA,uBACE,IAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,wBAAA,EAA2B,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACnD,gBAAA,EAAe,qBAAA;AAAA,MACf,IAAA;AAAA,MACA,MAAA,EAAQ,WAAW,QAAA,GAAW,MAAA;AAAA,MAC9B,GAAA,EAAK,WAAW,qBAAA,GAAwB,MAAA;AAAA,MACxC,YAAA,EAAY,eAAA;AAAA,MACZ,IAAA;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,IAAA;AAAA,wBACD,GAAA,CAAC,UAAM,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,QACZ,yBAAS,GAAA,CAAC,MAAA,EAAA,EAAK,aAAA,EAAY,MAAA,EAAQ,kBAAO,CAAA,GAAU;AAAA;AAAA;AAAA,GACvD;AAEJ;AAkEO,SAAS,mBAAA,CAAoB;AAAA,EAClC,QAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA,GAAW,KAAA;AAAA,EACX,MAAA,GAAS,KAAA;AAAA,EACT,UAAA,GAAa,WAAA;AAAA,EACb,IAAA,GAAO,SAAA;AAAA,EACP,QAAA;AAAA,EACA,gBAAA,GAAmB,OAAA;AAAA,EACnB,KAAA,GAAQ,MAAA;AAAA,EACR,IAAA,GAAO,SAAA;AAAA,EACP,OAAA,GAAU,aAAA;AAAA,EACV,OAAA,GAAU,MAAA;AAAA,EACV,SAAA,GAAY,SAAA;AAAA,EACZ,cAAA,GAAiB,QAAA;AAAA,EACjB,YAAA,GAAe,OAAA;AAAA,EACf,cAAA,GAAiB,KAAA;AAAA,EACjB,SAAA,GAAY,UAAA;AAAA,EACZ,QAAA,GAAW,SAAA;AAAA,EACX,gBAAA,GAAmB,MAAA;AAAA,EACnB,UAAA,GAAa,QAAA;AAAA,EACb,SAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA,GAAS,SAAA;AAAA,EACT,SAAA,GAAY,OAAA;AAAA,EACZ,SAAA;AAAA,EACA,kBAAA,GAAqB,KAAA;AAAA,EACrB,KAAA,GAAQ,KAAA;AAAA,EACR,IAAA,GAAO,KAAA;AAAA,EACP,SAAA,GAAY,SAAA;AAAA,EACZ,WAAA;AAAA,EACA;AACF,CAAA,EAA6B;AAC3B,EAAA,MAAM,YAAA,GAAe;AAAA,IACnB,cACI,CAAA,+BAAA,EAAkC,IAAA,CAAK,SAAA,CAAU,WAAW,CAAC,CAAA,CAAA,CAAA,GAC7D,EAAA;AAAA,IACJ,SAAA,GAAY,CAAA,+BAAA,EAAkC,SAAS,CAAA,CAAA,GAAK;AAAA,GAC9D,CAAE,OAAO,OAAO,CAAA;AAChB,EAAA,MAAM,KAAA,mBACJ,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,0BAAA,EAA6B,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MACrD,gBAAA,EAAe,uBAAA;AAAA,MACf,IAAA,EAAM,QAAQ,OAAA,GAAU,MAAA;AAAA,MACxB,YAAA,EAAY,KAAA;AAAA,MACZ,iBAAA,EAAiB,UAAA;AAAA,MACjB,WAAA,EAAW,IAAA;AAAA,MACX,gBAAA,EAAgB,QAAA;AAAA,MAChB,wBAAA,EAAwB,gBAAA;AAAA,MACxB,eAAA,EAAe,OAAO,QAAQ,CAAA;AAAA,MAC9B,aAAA,EAAa,OAAO,MAAM,CAAA;AAAA,MAC1B,YAAA,EAAY,KAAA;AAAA,MACZ,WAAA,EAAW,IAAA;AAAA,MACX,cAAA,EAAc,OAAA;AAAA,MACd,cAAA,EAAc,OAAA;AAAA,MACd,iBAAA,EAAiB,SAAA;AAAA,MACjB,sBAAA,EAAsB,cAAA;AAAA,MACtB,oBAAA,EAAoB,YAAA;AAAA,MACpB,sBAAA,EAAsB,OAAO,cAAc,CAAA;AAAA,MAC3C,iBAAA,EAAiB,SAAA;AAAA,MACjB,eAAA,EAAe,QAAA;AAAA,MACf,wBAAA,EACE,gBAAA,KAAqB,SAAA,GAAY,SAAA,GAAY,MAAA;AAAA,MAE/C,iBAAA,EAAiB,UAAA;AAAA,MACjB,iBAAA,EAAiB,SAAA;AAAA,MACjB,iBAAA,EAAiB,SAAA;AAAA,MACjB,aAAA,EAAa,MAAA;AAAA,MACb,gBAAA,EAAgB,SAAA;AAAA,MAChB,YAAA,EAAY,OAAO,KAAK,CAAA;AAAA,MACxB,WAAA,EAAW,OAAO,IAAI,CAAA;AAAA,MACtB,WAAA,EAAW,OAAO,MAAA,GAAS,MAAA;AAAA,MAC3B,KAAA,EAAO,IAAA;AAAA,MACP,OAAO,YAAA,CAAa,MAAA,GAAS,YAAA,CAAa,IAAA,CAAK,GAAG,CAAA,GAAI,MAAA;AAAA,MACtD,IAAA;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,QACA,IAAA,mBACC,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAM,yCAAA;AAAA,YACN,aAAA,EAAY,MAAA;AAAA,YAEZ,8BAAC,cAAA,EAAA,EAAe;AAAA;AAAA,SAClB,GACE;AAAA;AAAA;AAAA,GACN;AAEF,EAAA,MAAM,aAAA,GAAgB,uBACpB,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,KAAA;AAAA,wBACA,MAAA,EAAA,EAAK,KAAA,EAAM,wCAAA,EAAyC,IAAA,EAAK,UACvD,QAAA,EAAA,SAAA,EACH;AAAA,GAAA,EACF,CAAA,GAEA,KAAA;AAEF,EAAA,OAAO,kBAAA,GACH,oBAAA,CAAqB,aAAa,CAAA,GAClC,aAAA;AACN","file":"chunk-QIG4IGUP.js","sourcesContent":["import { isSafeHtml, type SafeHtml } from 'kerfjs';\n\n// A render-time annotation, shared across separately bundled UI subpaths.\n// It never appears in the DOM or changes the group's visual treatment.\nconst RELOCATE_ON_COLLAPSE = Symbol.for(\n '@kerfjs/ui.ToolbarControlGroup.relocateOnCollapse',\n);\n\nexport function markRelocatableGroup(group: SafeHtml): SafeHtml {\n Object.defineProperty(group, RELOCATE_ON_COLLAPSE, { value: true });\n return group;\n}\n\nexport function isRelocatableGroup(value: unknown): value is SafeHtml {\n return (\n isSafeHtml(value) &&\n (value as SafeHtml & { [RELOCATE_ON_COLLAPSE]?: boolean })[\n RELOCATE_ON_COLLAPSE\n ] === true\n );\n}\n","import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { markRelocatableGroup } from '../../../shared/panels/panel-toolbar-group.js';\nimport type { CssLength } from '../../../shared/styles/css-values.js';\nimport { LoadingSpinner } from '../../feedback/loading-spinner/loading-spinner.js';\n\nexport type ToolbarControlGroupAppearance = 'contained' | 'borderless';\nexport type ToolbarControlGroupTone = 'default' | 'dark';\n/** Quiet palette for a contained, single decorative icon tile. */\nexport type ToolbarControlGroupTileTone =\n 'neutral' | 'brand' | 'success' | 'warning' | 'danger';\nexport type ToolbarControlGroupButtonAppearance = 'plain' | 'push';\nexport type ToolbarControlGroupShape = 'pill' | 'rounded';\nexport type ToolbarControlGroupSize = 'default' | 'compact';\nexport type ToolbarControlGroupDensity = 'comfortable' | 'tight';\nexport type ToolbarControlGroupContent =\n 'icon' | 'text' | 'mixed' | 'avatar' | 'search';\nexport type ToolbarControlGroupFocusRing = 'control' | 'outline' | 'halo';\nexport type ToolbarControlGroupSelectedChrome =\n 'raised' | 'filled' | 'outline' | 'none';\nexport type ToolbarControlGroupSelectedTone = 'brand' | 'neutral' | 'pop';\nexport type ToolbarControlGroupOverflow = 'visible' | 'scroll' | 'wrap';\nexport type ToolbarControlGroupExpandedOverflow = 'clip' | 'visible';\nexport type ToolbarControlGroupMenuInset = 'standard' | 'compact' | 'list-zero';\nexport type ToolbarControlGroupVisibility =\n | 'always'\n | 'compact-only'\n | 'hide-collapsed-tiny'\n | 'yield-to-expanded-sibling';\nexport type ToolbarControlGroupSizing = 'content' | 'grow' | 'fill';\nexport type ToolbarControlGroupPlacement = 'start' | 'end';\n\nexport interface ToolbarActionLinkProps {\n href: string;\n label: string;\n icon?: KerfUiContent;\n /** Optional machine-readable detail hidden visually but included in the default accessible name. */\n detail?: string;\n /** Override the accessible name when surrounding context is needed. */\n ariaLabel?: string;\n /** Open in a new tab with a safe rel and announce that behavior. */\n external?: boolean;\n className?: string;\n /** Native named-slot assignment when composed inside a web component. */\n slot?: string;\n}\n\n/** A semantic anchor with ToolbarControlGroup-owned action geometry. */\nexport function ToolbarActionLink({\n href,\n label,\n icon,\n detail,\n ariaLabel,\n external = false,\n className = '',\n slot,\n}: ToolbarActionLinkProps) {\n const accessibleLabel =\n ariaLabel ??\n `${label}${detail ? `, ${detail}` : ''}${external ? ' (opens in new tab)' : ''}`;\n return (\n <a\n class={`kui-toolbar-action-link ${className}`.trim()}\n data-component=\"toolbar-action-link\"\n href={href}\n target={external ? '_blank' : undefined}\n rel={external ? 'noopener noreferrer' : undefined}\n aria-label={accessibleLabel}\n slot={slot}\n >\n {icon}\n <span>{label}</span>\n {detail ? <code aria-hidden=\"true\">{detail}</code> : null}\n </a>\n );\n}\n\nexport interface ToolbarControlGroupProps {\n children: KerfUiContent;\n label?: string;\n className?: string;\n expanded?: boolean;\n single?: boolean;\n appearance?: ToolbarControlGroupAppearance;\n tone?: ToolbarControlGroupTone;\n /** Quiet fill, matching border and foreground for a contained single group whose only child is a decorative SVG. Ignored for interactive or mixed content. */\n tileTone?: ToolbarControlGroupTileTone;\n buttonAppearance?: ToolbarControlGroupButtonAppearance;\n /** Corner shape: fully round `pill` (default) or a softer `rounded` rectangle. */\n shape?: ToolbarControlGroupShape;\n size?: ToolbarControlGroupSize;\n density?: ToolbarControlGroupDensity;\n content?: ToolbarControlGroupContent;\n /** Whether controls paint focus individually or the group paints an outline/halo on focus-within. */\n focusRing?: ToolbarControlGroupFocusRing;\n /**\n * Chrome a pressed (`aria-pressed=\"true\"`) control paints. `none` keeps a\n * pressed control looking like its neighbors, for an icon-state toggle whose\n * glyph already shows the state (an empty or filled star); hover and the\n * focus ring are unchanged. One control can opt out alone with\n * `data-selected-chrome=\"none\"` on its own button.\n */\n selectedChrome?: ToolbarControlGroupSelectedChrome;\n selectedTone?: ToolbarControlGroupSelectedTone;\n /** Size a nested Web Awesome dropdown trigger as part of this group. */\n nestedDropdown?: boolean;\n /** Configure the nested dropdown menu inset without consumer ::part() CSS. */\n menuInset?: ToolbarControlGroupMenuInset;\n /** Keep an overlong row inside the available width by scrolling or wrapping. */\n overflow?: ToolbarControlGroupOverflow;\n /** Let app-owned anchored surfaces extend outside an expanded search group. Collapsed searches retain their clipping. */\n expandedOverflow?: ToolbarControlGroupExpandedOverflow;\n /** Responsive visibility owned by the enclosing Toolbar container. */\n visibility?: ToolbarControlGroupVisibility;\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 /** Intrinsic (default), grow from a basis, or occupy a full wrapping row. */\n sizing?: ToolbarControlGroupSizing;\n /** Place this group at the end of its flex row in a wrapping Toolbar zone. */\n placement?: ToolbarControlGroupPlacement;\n /** CSS length used as the minimum width and flex basis for `sizing=\"grow\"`; defaults to 19rem. */\n growBasis?: string;\n /** Move this group into the work-area toolbar when its panel collapses. */\n relocateOnCollapse?: boolean;\n /** Add contrast behind photo-backed avatar content. */\n scrim?: boolean;\n /** Block the group's controls and show a spinner without changing its dimensions. */\n busy?: boolean;\n /** Announced status while busy; defaults to “Working”. */\n busyLabel?: string;\n /**\n * Avatar image URL. A single-control group paints it on the group; a\n * multi-control group paints it only on the pressed selection highlight.\n */\n avatarImage?: string;\n /** Native named-slot assignment when composed inside a web component. */\n slot?: string;\n}\n\nexport function ToolbarControlGroup({\n children,\n label,\n className = '',\n expanded = false,\n single = false,\n appearance = 'contained',\n tone = 'default',\n tileTone,\n buttonAppearance = 'plain',\n shape = 'pill',\n size = 'default',\n density = 'comfortable',\n content = 'icon',\n focusRing = 'control',\n selectedChrome = 'raised',\n selectedTone = 'brand',\n nestedDropdown = false,\n menuInset = 'standard',\n overflow = 'visible',\n expandedOverflow = 'clip',\n visibility = 'always',\n hideBelow,\n showBelow,\n sizing = 'content',\n placement = 'start',\n growBasis,\n relocateOnCollapse = false,\n scrim = false,\n busy = false,\n busyLabel = 'Working',\n avatarImage,\n slot,\n}: ToolbarControlGroupProps) {\n const inlineStyles = [\n avatarImage\n ? `--kui-toolbar-avatar-image:url(${JSON.stringify(avatarImage)})`\n : '',\n growBasis ? `--kui-toolbar-group-grow-basis:${growBasis}` : '',\n ].filter(Boolean);\n const group = (\n <div\n class={`kui-toolbar-control-group ${className}`.trim()}\n data-component=\"toolbar-control-group\"\n role={label ? 'group' : undefined}\n aria-label={label}\n data-appearance={appearance}\n data-tone={tone}\n data-tile-tone={tileTone}\n data-button-appearance={buttonAppearance}\n data-expanded={String(expanded)}\n data-single={String(single)}\n data-shape={shape}\n data-size={size}\n data-density={density}\n data-content={content}\n data-focus-ring={focusRing}\n data-selected-chrome={selectedChrome}\n data-selected-tone={selectedTone}\n data-nested-dropdown={String(nestedDropdown)}\n data-menu-inset={menuInset}\n data-overflow={overflow}\n data-expanded-overflow={\n expandedOverflow === 'visible' ? 'visible' : undefined\n }\n data-visibility={visibility}\n data-hide-below={hideBelow}\n data-show-below={showBelow}\n data-sizing={sizing}\n data-placement={placement}\n data-scrim={String(scrim)}\n data-busy={String(busy)}\n aria-busy={busy ? 'true' : undefined}\n inert={busy}\n style={inlineStyles.length ? inlineStyles.join(';') : undefined}\n slot={slot}\n >\n {children}\n {busy ? (\n <span\n class=\"kui-toolbar-control-group__busy-spinner\"\n aria-hidden=\"true\"\n >\n <LoadingSpinner />\n </span>\n ) : null}\n </div>\n );\n const renderedGroup = busy ? (\n <>\n {group}\n <span class=\"kui-toolbar-control-group__busy-status\" role=\"status\">\n {busyLabel}\n </span>\n </>\n ) : (\n group\n );\n return relocateOnCollapse\n ? markRelocatableGroup(renderedGroup)\n : renderedGroup;\n}\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { Skeleton } from './chunk-
|
|
1
|
+
import { Skeleton } from './chunk-CVD5IZGB.js';
|
|
2
2
|
import { Badge } from './chunk-U6QYTMDB.js';
|
|
3
|
-
import { em } from './chunk-
|
|
3
|
+
import { em } from './chunk-IQSRHXZR.js';
|
|
4
4
|
import { jsxs, jsx } from 'kerfjs/jsx-runtime';
|
|
5
5
|
|
|
6
6
|
function StateBanner({
|
|
@@ -49,4 +49,4 @@ function StateBanner({
|
|
|
49
49
|
|
|
50
50
|
export { StateBanner };
|
|
51
51
|
|
|
52
|
-
//# sourceMappingURL=chunk-
|
|
52
|
+
//# sourceMappingURL=chunk-QROYYGWU.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/feedback/state-banner/state-banner.tsx"],"names":[],"mappings":";;;;;AAuDO,SAAS,WAAA,CAAY;AAAA,EAC1B,KAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,IAAA,GAAO,MAAA;AAAA,EACP,OAAA,GAAU,QAAA;AAAA,EACV,UAAA,GAAa,QAAA;AAAA,EACb,eAAA,GAAkB,UAAA;AAAA,EAClB,YAAA,GAAe,MAAA;AAAA,EACf,YAAA,GAAe,GAAA;AAAA,EACf,SAAA,GAAY,EAAA;AAAA,EACZ,WAAA,GAAc,KAAA;AAAA,EACd;AACF,CAAA,EAAqB;AACnB,EAAA,uBACE,IAAA;AAAA,IAAC,SAAA;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,kBAAA,EAAkB,UAAA;AAAA,MAClB,uBAAA,EAAuB,eAAA;AAAA,MACvB,mBAAA,EAAmB,YAAA;AAAA,MACnB,eAAA,EACE,YAAA,KAAiB,OAAA,GAAU,YAAA,IAAgB,MAAA,GAAY,MAAA;AAAA,MAEzD,kBAAA,EAAkB,cAAc,MAAA,GAAS,MAAA;AAAA,MACzC,IAAA,EAAM,OAAA;AAAA,MACN,WAAA,EAAW,OAAA,KAAY,OAAA,GAAU,WAAA,GAAc,QAAA;AAAA,MAC/C,WAAA,EAAW,cAAc,MAAA,GAAS,MAAA;AAAA,MAClC,IAAA;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,IAAA,oBAAQ,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,wBAAA,EAA0B,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,wBACpD,IAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,wBAAA,EACT,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,QAAA,EAAA,EAAQ,wCAAc,GAAA,CAAC,QAAA,EAAA,EAAS,OAAO,EAAA,CAAG,EAAE,CAAA,EAAG,CAAA,GAAK,KAAA,EAAM,CAAA;AAAA,UAC1D,yBACC,GAAA,CAAC,KAAA,EAAA,EAAM,UAAA,EAAW,OAAA,EAAQ,MAAK,SAAA,EAAU,IAAA,EACtC,QAAA,EAAA,WAAA,mBAAc,GAAA,CAAC,YAAS,KAAA,EAAO,EAAA,CAAG,IAAI,CAAA,EAAG,IAAK,KAAA,EACjD,CAAA;AAAA,UAED,0BACC,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,0BAAA,EACV,8BAAC,MAAA,EAAA,EAAM,QAAA,EAAA,WAAA,mBAAc,GAAA,CAAC,QAAA,EAAA,EAAS,OAAO,EAAA,CAAG,EAAE,CAAA,EAAG,CAAA,GAAK,QAAO,CAAA,EAC5D;AAAA,SAAA,EAEJ,CAAA;AAAA,QACC,MAAA,oBAAU,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,4BAA4B,QAAA,EAAA,MAAA,EAAO;AAAA;AAAA;AAAA,GAC3D;AAEJ","file":"chunk-QROYYGWU.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport type { Sides } from '../../../shared/layout/sides.js';\nimport { em } from '../../../shared/styles/css-values.js';\nimport type { SemanticTone } from '../../../shared/styles/semantic-tone.js';\nimport { Badge } from '../badge/badge.js';\nimport { Skeleton } from '../skeleton/skeleton.js';\n\nexport type { SemanticTone } from '../../../shared/styles/semantic-tone.js';\n/** @deprecated Use SemanticTone. */\nexport type StateBannerTone = SemanticTone;\nexport type StateBannerUrgency = 'status' | 'alert';\nexport type StateBannerCopyLayout = 'inline' | 'stacked';\nexport type StateBannerActionPlacement = 'trailing' | 'below';\nexport type StateBannerPresentation = 'card' | 'strip';\n\nexport interface StateBannerProps {\n title: string;\n detail?: string;\n /** Optional compact status or count shown beside the title. */\n badge?: string;\n icon?: SafeHtml;\n action?: KerfUiContent;\n tone?: SemanticTone;\n urgency?: StateBannerUrgency;\n /** Keep the detail beside the title, or give it its own line. */\n copyLayout?: StateBannerCopyLayout;\n /**\n * `trailing` (the default) puts the action beside the copy while the copy\n * keeps its minimum readable width, and otherwise wraps it onto its own\n * end-aligned trailing row, at any viewport or container width. `below`\n * always gives the action that separate trailing row.\n */\n actionPlacement?: StateBannerActionPlacement;\n /**\n * `card` (the default) is an inset, rounded, fully bordered banner beside\n * the affected work. `strip` is a full-width band at a layout edge, such as\n * above a workspace: square corners, no inline margin, inline padding on the\n * shared content-text column, and only the tone-colored `dividerSides` edges.\n */\n presentation?: StateBannerPresentation;\n /**\n * Physical tone-colored divider edges of a `strip`, in canonical\n * top/right/bottom/left order. Defaults to the bottom edge; `''` draws none.\n * A `card` keeps its full border and ignores this.\n */\n dividerSides?: Sides;\n className?: string;\n /** Render the title, badge, and detail as unanimated loading skeletons, keeping the icon and tone. The detail line appears only when `detail` is set, as in the live banner. */\n placeholder?: boolean;\n /** Native named-slot assignment when composed inside a web component. */\n slot?: string;\n}\n\nexport function StateBanner({\n title,\n detail,\n badge,\n icon,\n action,\n tone = 'info',\n urgency = 'status',\n copyLayout = 'inline',\n actionPlacement = 'trailing',\n presentation = 'card',\n dividerSides = 'b',\n className = '',\n placeholder = false,\n slot,\n}: StateBannerProps) {\n return (\n <section\n class={`kui-state-banner ${className}`.trim()}\n data-component=\"state-banner\"\n data-tone={tone}\n data-copy-layout={copyLayout}\n data-action-placement={actionPlacement}\n data-presentation={presentation}\n divider-sides={\n presentation === 'strip' ? dividerSides || undefined : undefined\n }\n data-placeholder={placeholder ? 'true' : undefined}\n role={urgency}\n aria-live={urgency === 'alert' ? 'assertive' : 'polite'}\n aria-busy={placeholder ? 'true' : undefined}\n slot={slot}\n >\n {icon && <span class=\"kui-state-banner__icon\">{icon}</span>}\n <div class=\"kui-state-banner__copy\">\n <strong>{placeholder ? <Skeleton width={em(10)} /> : title}</strong>\n {badge && (\n <Badge appearance=\"solid\" size=\"compact\" tone={tone}>\n {placeholder ? <Skeleton width={em(1.75)} /> : badge}\n </Badge>\n )}\n {detail && (\n <span class=\"kui-state-banner__detail\">\n <span>{placeholder ? <Skeleton width={em(16)} /> : detail}</span>\n </span>\n )}\n </div>\n {action && <div class=\"kui-state-banner__action\">{action}</div>}\n </section>\n );\n}\n"]}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { PopupMenu } from './chunk-
|
|
2
|
-
import { withWordBreaks, nativeDraggable } from './chunk-
|
|
3
|
-
import { Skeleton } from './chunk-
|
|
4
|
-
import { LoadingSpinner } from './chunk-
|
|
5
|
-
import { remify, em } from './chunk-
|
|
1
|
+
import { PopupMenu } from './chunk-HQZYKJ56.js';
|
|
2
|
+
import { listIconTilePresentation, withWordBreaks, nativeDraggable } from './chunk-ZNROKDSZ.js';
|
|
3
|
+
import { Skeleton } from './chunk-CVD5IZGB.js';
|
|
4
|
+
import { LoadingSpinner } from './chunk-WVS6CUCT.js';
|
|
5
|
+
import { remify, em } from './chunk-IQSRHXZR.js';
|
|
6
6
|
import { filterDataAttributes, filterControlAttributes } from './chunk-KH4KEMSP.js';
|
|
7
7
|
import { jsxs, jsx } from 'kerfjs/jsx-runtime';
|
|
8
8
|
|
|
@@ -11,6 +11,8 @@ var PROTECTED_ROOT_DATA_ATTRIBUTES = /* @__PURE__ */ new Set([
|
|
|
11
11
|
"data-action",
|
|
12
12
|
"data-item-id",
|
|
13
13
|
"data-has-icon",
|
|
14
|
+
"data-icon-tile",
|
|
15
|
+
"data-icon-tile-tone",
|
|
14
16
|
"data-multiline",
|
|
15
17
|
"data-density",
|
|
16
18
|
"data-divider",
|
|
@@ -36,6 +38,7 @@ function ListActionRow({
|
|
|
36
38
|
density = "standard",
|
|
37
39
|
divider = "none",
|
|
38
40
|
icon,
|
|
41
|
+
iconTile,
|
|
39
42
|
action,
|
|
40
43
|
itemId,
|
|
41
44
|
selected = false,
|
|
@@ -70,6 +73,8 @@ function ListActionRow({
|
|
|
70
73
|
trailingActionAttributes,
|
|
71
74
|
PROTECTED_TRAILING_DATA_ATTRIBUTES
|
|
72
75
|
);
|
|
76
|
+
const tile = icon ? listIconTilePresentation(iconTile, "list-action-row") : null;
|
|
77
|
+
const iconSize = tile?.tile ? 32 : 18;
|
|
73
78
|
return /* @__PURE__ */ jsxs(
|
|
74
79
|
"div",
|
|
75
80
|
{
|
|
@@ -78,6 +83,8 @@ function ListActionRow({
|
|
|
78
83
|
"data-component": "list-action-row",
|
|
79
84
|
"data-item-id": itemId,
|
|
80
85
|
"data-has-icon": String(Boolean(icon)),
|
|
86
|
+
"data-icon-tile": tile?.tile,
|
|
87
|
+
"data-icon-tile-tone": tile?.tone,
|
|
81
88
|
"data-multiline": multiline ? "true" : void 0,
|
|
82
89
|
"data-density": density,
|
|
83
90
|
"data-divider": divider,
|
|
@@ -108,7 +115,21 @@ function ListActionRow({
|
|
|
108
115
|
"aria-current": selected ? "page" : void 0,
|
|
109
116
|
"aria-pressed": pressed === void 0 ? void 0 : String(pressed),
|
|
110
117
|
children: [
|
|
111
|
-
icon && /* @__PURE__ */ jsx(
|
|
118
|
+
icon && /* @__PURE__ */ jsx(
|
|
119
|
+
"span",
|
|
120
|
+
{
|
|
121
|
+
class: "kui-list-action-row__icon",
|
|
122
|
+
style: placeholder ? void 0 : tile?.style,
|
|
123
|
+
children: placeholder ? /* @__PURE__ */ jsx(
|
|
124
|
+
Skeleton,
|
|
125
|
+
{
|
|
126
|
+
block: true,
|
|
127
|
+
width: remify(iconSize),
|
|
128
|
+
height: remify(iconSize)
|
|
129
|
+
}
|
|
130
|
+
) : icon
|
|
131
|
+
}
|
|
132
|
+
),
|
|
112
133
|
/* @__PURE__ */ jsxs("span", { class: "kui-list-action-row__label", children: [
|
|
113
134
|
/* @__PURE__ */ jsx("span", { class: "kui-list-action-row__primary-label", children: placeholder ? /* @__PURE__ */ jsx(Skeleton, { width: em(9) }) : multiline ? withWordBreaks(label) : label }),
|
|
114
135
|
description && /* @__PURE__ */ jsx("span", { class: "kui-list-action-row__description", children: placeholder ? /* @__PURE__ */ jsx(Skeleton, { width: em(11) }) : description }),
|
|
@@ -152,4 +173,4 @@ function ListActionRow({
|
|
|
152
173
|
|
|
153
174
|
export { ListActionRow };
|
|
154
175
|
|
|
155
|
-
//# sourceMappingURL=chunk-
|
|
176
|
+
//# sourceMappingURL=chunk-RHD7RKGI.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/collections/list-action-row/list-action-row.tsx"],"names":[],"mappings":"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","file":"chunk-RHD7RKGI.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport {\n type ListIconTile,\n listIconTilePresentation,\n} from '../../../shared/content/list-icon-tile.js';\nimport { nativeDraggable } from '../../../shared/dom/draggable.js';\nimport {\n filterControlAttributes,\n filterDataAttributes,\n} from '../../../shared/dom/extension-attributes.js';\nimport { em, remify } from '../../../shared/styles/css-values.js';\nimport { withWordBreaks } from '../../../shared/text/word-breaks.js';\nimport {\n PopupMenu,\n type PopupMenuEntry,\n type PopupMenuPlacement,\n} from '../../actions/popup-menu/popup-menu.js';\nimport { LoadingSpinner } from '../../feedback/loading-spinner/loading-spinner.js';\nimport { Skeleton } from '../../feedback/skeleton/skeleton.js';\n\nexport type {\n ListIconTile,\n ListIconTileColor,\n ListIconTileTone,\n} from '../../../shared/content/list-icon-tile.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-icon-tile',\n 'data-icon-tile-tone',\n 'data-multiline',\n 'data-density',\n 'data-divider',\n 'data-busy',\n 'data-trailing-visibility',\n 'data-state',\n 'data-selected',\n 'data-pressed',\n 'data-dragging',\n 'data-drop-position',\n]);\nconst PROTECTED_TRAILING_DATA_ATTRIBUTES = new Set([\n 'data-component',\n 'data-action',\n 'data-item-id',\n 'data-kui-disabled',\n]);\n\ntype ListActionRowRootAttributes = 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-icon-tile'?: never;\n 'data-icon-tile-tone'?: never;\n 'data-multiline'?: never;\n 'data-density'?: never;\n 'data-divider'?: never;\n 'data-busy'?: never;\n 'data-trailing-visibility'?: never;\n 'data-state'?: never;\n 'data-selected'?: never;\n 'data-pressed'?: never;\n 'data-dragging'?: never;\n 'data-drop-position'?: never;\n }\n>;\n\ntype ListActionRowTrailingAttributes = Readonly<\n Record<`data-${string}`, string | undefined> & {\n 'data-component'?: never;\n 'data-action'?: never;\n 'data-item-id'?: never;\n 'data-kui-disabled'?: never;\n popoverTarget?: string;\n popoverTargetAction?: 'toggle' | 'show' | 'hide';\n 'aria-controls'?: string;\n 'aria-haspopup'?: 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid' | 'true';\n }\n>;\n\n/** A trailing overflow `PopupMenu` rendered as the row's sibling trailing control. */\nexport interface ListActionRowTrailingMenu {\n /** Accessible name of the icon-only menu trigger, such as `Actions for report.json`. */\n label: string;\n /** Decorative trigger icon, typically a `MoreHorizontal` `LucideIcon`. */\n icon: SafeHtml;\n /** The menu's commands, headings, and dividers; items dispatch their own `data-action`s. */\n items: readonly PopupMenuEntry[];\n /** Where the menu opens relative to its trigger. Defaults to `bottom-end`. */\n placement?: PopupMenuPlacement;\n disabled?: boolean;\n}\n\ninterface ListActionRowTrailingButtonProps {\n trailingAction: string;\n trailingActionLabel: string;\n /** Decorative dormant content for the trailing button. Must not contain interactive descendants. */\n trailingActionIcon: SafeHtml;\n trailingActionDisabled?: boolean;\n trailingActionTitle?: string;\n trailingActionAttributes?: ListActionRowTrailingAttributes;\n trailingMenu?: never;\n}\n\ninterface ListActionRowTrailingMenuProps {\n /** A trailing overflow menu in place of the trailing button. Import `@kerfjs/ui/popup-menu/register` once. */\n trailingMenu: ListActionRowTrailingMenu;\n trailingAction?: never;\n trailingActionLabel?: never;\n trailingActionIcon?: never;\n trailingActionDisabled?: never;\n trailingActionTitle?: never;\n trailingActionAttributes?: never;\n}\n\ninterface ListActionRowCommonProps {\n /** Visible dormant content for the primary button. Must not contain interactive descendants. */\n label: string | SafeHtml;\n description?: string | SafeHtml;\n status?: string | SafeHtml;\n busy?: boolean;\n /** Row height: `standard` is 44px; `compact` is 36px (42px with `iconTile`), the height of a compact `ListItem`. */\n density?: 'standard' | 'compact';\n divider?: 'none' | 'before' | 'after' | 'both';\n /** Decorative dormant content for the primary button. Must not contain interactive descendants. */\n icon?: SafeHtml;\n /** Present `icon` in a filled 32px rounded tile with an 18px glyph: a quiet tone preset, or `{ color, foreground? }` for an application color. */\n iconTile?: ListIconTile;\n action: string;\n itemId?: string;\n selected?: boolean;\n pressed?: boolean;\n accessibleLabel?: string;\n title?: string;\n multiline?: boolean;\n state?: string;\n disabled?: boolean;\n tabIndex?: number;\n /** Render as an unanimated loading skeleton, disabling both actions: label, description, icon, and status text become skeletons; the `busy` indicator stays live. */\n placeholder?: boolean;\n /** Native HTML drag source (`draggable=\"true\"` on the row root); a placeholder is never draggable. Pair with `wireListReorder` for pointer and keyboard reordering. */\n draggable?: boolean;\n /** Dim this row as one of the rows being dragged. */\n dragging?: boolean;\n /** Draw the insertion line at this row's leading (`before`) or trailing (`after`) block edge. */\n dropPosition?: 'before' | 'after';\n trailingActionVisibility?: 'always' | 'interaction';\n className?: string;\n rootAttributes?: ListActionRowRootAttributes;\n /** Native named-slot assignment when composed inside a web component. */\n slot?: string;\n}\n\n/** Exactly one trailing control: a native button (`trailingAction*`) or an overflow menu (`trailingMenu`). */\nexport type ListActionRowProps = ListActionRowCommonProps &\n (ListActionRowTrailingButtonProps | ListActionRowTrailingMenuProps);\n\nexport function ListActionRow({\n label,\n description,\n status,\n busy = false,\n density = 'standard',\n divider = 'none',\n icon,\n iconTile,\n action,\n itemId,\n selected = false,\n pressed,\n accessibleLabel,\n title,\n multiline = false,\n state,\n disabled = false,\n tabIndex,\n placeholder = false,\n draggable,\n dragging = false,\n dropPosition,\n trailingAction,\n trailingActionLabel,\n trailingActionIcon,\n trailingActionDisabled = false,\n trailingActionTitle,\n trailingActionVisibility = 'always',\n trailingMenu,\n className = '',\n rootAttributes = {},\n trailingActionAttributes = {},\n slot,\n}: ListActionRowProps) {\n const extensionRootAttributes = filterDataAttributes(\n rootAttributes,\n PROTECTED_ROOT_DATA_ATTRIBUTES,\n );\n const extensionTrailingAttributes = filterControlAttributes(\n trailingActionAttributes,\n PROTECTED_TRAILING_DATA_ATTRIBUTES,\n );\n const tile = icon\n ? listIconTilePresentation(iconTile, 'list-action-row')\n : null;\n const iconSize = tile?.tile ? 32 : 18;\n\n return (\n <div\n {...extensionRootAttributes}\n class={`kui-list-action-row ${className}`.trim()}\n data-component=\"list-action-row\"\n data-item-id={itemId}\n data-has-icon={String(Boolean(icon))}\n data-icon-tile={tile?.tile}\n data-icon-tile-tone={tile?.tone}\n data-multiline={multiline ? 'true' : undefined}\n data-density={density}\n data-divider={divider}\n data-busy={busy ? 'true' : undefined}\n data-trailing-visibility={trailingActionVisibility}\n data-state={state}\n data-selected={String(selected)}\n data-pressed={pressed === undefined ? undefined : String(pressed)}\n data-placeholder={placeholder ? 'true' : undefined}\n draggable={nativeDraggable(draggable, placeholder)}\n data-dragging={dragging ? 'true' : undefined}\n data-drop-position={dropPosition}\n aria-busy={placeholder || busy ? 'true' : undefined}\n slot={slot}\n >\n <button\n type=\"button\"\n class=\"kui-list-action-row__primary\"\n title={placeholder ? undefined : title}\n disabled={disabled || placeholder}\n tabindex={placeholder ? -1 : tabIndex}\n data-kui-disabled={disabled ? 'true' : undefined}\n data-action={placeholder ? undefined : action}\n data-item-id={itemId}\n aria-label={accessibleLabel}\n aria-current={selected ? 'page' : undefined}\n aria-pressed={pressed === undefined ? undefined : String(pressed)}\n >\n {icon && (\n <span\n class=\"kui-list-action-row__icon\"\n style={placeholder ? undefined : tile?.style}\n >\n {placeholder ? (\n <Skeleton\n block\n width={remify(iconSize)}\n height={remify(iconSize)}\n />\n ) : (\n icon\n )}\n </span>\n )}\n <span class=\"kui-list-action-row__label\">\n <span class=\"kui-list-action-row__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-action-row__description\">\n {placeholder ? <Skeleton width={em(11)} /> : description}\n </span>\n )}\n {(busy || status) && (\n <span class=\"kui-list-action-row__status\">\n {/* The busy spinner is component-owned chrome drawn from a\n known prop, so a placeholder keeps it live; only the status\n text is a value and becomes a skeleton. */}\n {busy && <LoadingSpinner />}\n {status && (placeholder ? <Skeleton width={em(6)} /> : status)}\n </span>\n )}\n </span>\n </button>\n {trailingMenu ? (\n <PopupMenu\n label={trailingMenu.label}\n icon={trailingMenu.icon}\n items={trailingMenu.items}\n placement={trailingMenu.placement ?? 'bottom-end'}\n caret={false}\n disabled={Boolean(trailingMenu.disabled) || placeholder}\n />\n ) : (\n <button\n {...extensionTrailingAttributes}\n type=\"button\"\n class=\"kui-list-action-row__trailing-action\"\n data-action={placeholder ? undefined : trailingAction}\n data-item-id={itemId}\n aria-label={trailingActionLabel}\n title={trailingActionTitle ?? trailingActionLabel}\n disabled={trailingActionDisabled || placeholder || undefined}\n data-kui-disabled={trailingActionDisabled ? 'true' : undefined}\n >\n {trailingActionIcon}\n </button>\n )}\n </div>\n );\n}\n"]}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
+
import { DisclosureArrow } from './chunk-3VXDSIBJ.js';
|
|
1
2
|
import { Text } from './chunk-LL45C7BB.js';
|
|
2
|
-
import {
|
|
3
|
-
import { Skeleton } from './chunk-Y43B6DS3.js';
|
|
3
|
+
import { Skeleton } from './chunk-CVD5IZGB.js';
|
|
4
4
|
import { Badge } from './chunk-U6QYTMDB.js';
|
|
5
|
-
import { em } from './chunk-
|
|
5
|
+
import { em } from './chunk-IQSRHXZR.js';
|
|
6
6
|
import { filterDataAttributes, filterControlAttributes } from './chunk-KH4KEMSP.js';
|
|
7
7
|
import { jsx, jsxs, Fragment } from 'kerfjs/jsx-runtime';
|
|
8
8
|
|
|
@@ -162,4 +162,4 @@ function ListHeader({
|
|
|
162
162
|
|
|
163
163
|
export { ListHeader };
|
|
164
164
|
|
|
165
|
-
//# sourceMappingURL=chunk-
|
|
165
|
+
//# sourceMappingURL=chunk-T4WJ5VGP.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/collections/list-header/list-header.tsx"],"names":[],"mappings":"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","file":"chunk-BBU2SPRE.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport {\n filterControlAttributes,\n filterDataAttributes,\n} from '../../../shared/dom/extension-attributes.js';\nimport { em } from '../../../shared/styles/css-values.js';\nimport type { SemanticTone } from '../../../shared/styles/semantic-tone.js';\nimport type { HeadingLevel } from '../../actions/toolbar-text/toolbar-text.js';\nimport { Badge } from '../../feedback/badge/badge.js';\nimport { Skeleton } from '../../feedback/skeleton/skeleton.js';\nimport { DisclosureArrow } from '../../navigation/disclosure-arrow/disclosure-arrow.js';\nimport { Text } from '../../typography/text/text.js';\n\nconst PROTECTED_ROOT_DATA_ATTRIBUTES = new Set([\n 'data-component',\n 'data-action',\n 'data-has-badge',\n 'data-has-count',\n 'data-density',\n 'data-size',\n 'data-divider',\n 'data-inline',\n 'data-width',\n 'data-indicator-tone',\n 'data-toggle',\n]);\nconst PROTECTED_TRIGGER_DATA_ATTRIBUTES = new Set([\n 'data-action',\n 'data-kui-disabled',\n]);\n\ntype ListHeaderRootAttributes = Readonly<\n Record<`data-${string}`, string | undefined> & {\n 'data-component'?: never;\n 'data-action'?: never;\n 'data-has-badge'?: never;\n 'data-has-count'?: never;\n 'data-density'?: never;\n 'data-size'?: never;\n 'data-divider'?: never;\n 'data-inline'?: never;\n 'data-width'?: never;\n 'data-indicator-tone'?: never;\n 'data-toggle'?: never;\n }\n>;\n\ntype ListHeaderTriggerAttributes = Readonly<\n Record<`data-${string}`, string | undefined> & {\n 'data-action'?: never;\n 'data-kui-disabled'?: never;\n popoverTarget?: string;\n popoverTargetAction?: 'toggle' | 'show' | 'hide';\n 'aria-controls'?: string;\n 'aria-haspopup'?: 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid' | 'true';\n }\n>;\n\ninterface ListHeaderBaseProps {\n label: string;\n /** Visual label size, independent of the native heading level. Default `sm`. */\n size?: 'xs' | 'sm' | 'm' | 'l' | 'xl';\n density?: 'standard' | 'compact';\n divider?: 'none' | 'before' | 'after' | 'both';\n /** Shrink-wrap the header without its default outer margin, border, or padding. */\n inline?: boolean;\n /** Fill the available row or shrink-wrap while retaining normal header geometry. */\n width?: 'fill' | 'content';\n indicatorTone?: 'neutral' | 'accent' | 'pop' | 'danger';\n /** Render as an unanimated loading skeleton: keep the label and action affordance, disable interaction. */\n placeholder?: boolean;\n rootAttributes?: ListHeaderRootAttributes;\n triggerAttributes?: ListHeaderTriggerAttributes;\n /** Native named-slot assignment when composed inside a web component. */\n slot?: string;\n}\n\ntype ListHeaderModeProps =\n | {\n /** Render the title as a controlled disclosure trigger. */\n toggle: true;\n /** A toggle's label is its button text, not a heading. */\n headingLevel?: never;\n action: string;\n expanded: boolean;\n actionIcon?: SafeHtml;\n actionLabel?: never;\n actionDisabled?: boolean;\n disabledReason?: string;\n }\n | {\n /** Render a separately named trailing action. */\n toggle?: false;\n /**\n * Native heading level (`h1`–`h6`) of the label. Default `2`. Match the\n * document outline; the visual treatment does not change.\n */\n headingLevel?: HeadingLevel;\n action: string;\n actionLabel: string;\n actionIcon: SafeHtml;\n expanded?: never;\n actionDisabled?: boolean;\n disabledReason?: string;\n }\n | {\n /** Render a passive section heading. */\n toggle?: false;\n /**\n * Native heading level (`h1`–`h6`) of the label. Default `2`. Match the\n * document outline; the visual treatment does not change.\n */\n headingLevel?: HeadingLevel;\n action?: never;\n actionLabel?: never;\n actionIcon?: never;\n expanded?: never;\n actionDisabled?: never;\n disabledReason?: never;\n };\n\ntype ListHeaderIndicatorProps =\n | { count: number; countLabel: string; badge?: never; status?: never }\n | {\n count?: never;\n countLabel?: never;\n badge?: SafeHtml | undefined;\n status?: SafeHtml | undefined;\n };\n\nexport type ListHeaderProps = ListHeaderBaseProps &\n ListHeaderIndicatorProps &\n ListHeaderModeProps;\n\nexport function ListHeader({\n label,\n size = 'sm',\n headingLevel = 2,\n count,\n countLabel,\n badge,\n status,\n density = 'standard',\n divider = 'none',\n inline = false,\n width = 'fill',\n indicatorTone = 'neutral',\n action,\n actionLabel,\n actionIcon,\n actionDisabled = false,\n disabledReason,\n expanded,\n toggle = false,\n placeholder = false,\n rootAttributes = {},\n triggerAttributes = {},\n slot,\n}: ListHeaderProps) {\n const extensionRootAttributes = filterDataAttributes(\n rootAttributes,\n PROTECTED_ROOT_DATA_ATTRIBUTES,\n );\n const extensionTriggerAttributes = filterControlAttributes(\n triggerAttributes,\n PROTECTED_TRIGGER_DATA_ATTRIBUTES,\n );\n const normalizedCount =\n typeof count === 'number' && Number.isSafeInteger(count) && count >= 0\n ? count\n : undefined;\n const normalizedCountLabel =\n normalizedCount === undefined\n ? undefined\n : typeof countLabel === 'string' && countLabel.trim()\n ? countLabel\n : String(normalizedCount);\n const renderedBadge = normalizedCount === undefined ? badge : undefined;\n const renderedStatus = normalizedCount === undefined ? status : undefined;\n const hasBadge = Boolean(renderedBadge || renderedStatus);\n const renderedActionIcon =\n actionIcon ??\n (toggle ? <DisclosureArrow open={Boolean(expanded)} /> : undefined);\n const accessibleLabel =\n normalizedCount === undefined\n ? undefined\n : `${label}, ${normalizedCountLabel}`;\n const badgeTone: SemanticTone =\n indicatorTone === 'accent' ? 'info' : indicatorTone;\n const indicator =\n normalizedCount !== undefined ? (\n <Badge size=\"compact\" tone={badgeTone} ariaHidden={!placeholder}>\n {placeholder ? <Skeleton width={em(1.75)} /> : normalizedCount}\n </Badge>\n ) : (\n <>\n {renderedBadge && (\n <Badge size=\"compact\" tone={badgeTone}>\n {placeholder ? <Skeleton width={em(1.75)} /> : renderedBadge}\n </Badge>\n )}\n {renderedStatus && (\n <Badge size=\"compact\" tone={badgeTone}>\n {placeholder ? <Skeleton width={em(1.75)} /> : renderedStatus}\n </Badge>\n )}\n </>\n );\n const busy = placeholder ? ('true' as const) : undefined;\n if (toggle) {\n return (\n <header\n {...extensionRootAttributes}\n class=\"kui-list-header\"\n data-component=\"list-header\"\n data-has-badge={String(hasBadge)}\n data-has-count={String(normalizedCount !== undefined)}\n data-density={density}\n data-size={size}\n data-divider={divider}\n data-inline={String(inline)}\n data-width={width}\n data-indicator-tone={indicatorTone}\n data-toggle=\"true\"\n data-placeholder={placeholder ? 'true' : undefined}\n aria-busy={busy}\n slot={slot}\n >\n <button\n {...extensionTriggerAttributes}\n type=\"button\"\n class=\"kui-list-header__title kui-list-header__toggle\"\n data-action={placeholder ? undefined : action}\n title={actionDisabled ? disabledReason : undefined}\n disabled={actionDisabled || placeholder || undefined}\n data-kui-disabled={actionDisabled ? 'true' : undefined}\n aria-label={accessibleLabel}\n aria-expanded={String(Boolean(expanded))}\n >\n <Text variant=\"span\">{label}</Text>\n {indicator}\n {renderedActionIcon && (\n <span class=\"kui-list-header__action-layer\">\n {renderedActionIcon}\n </span>\n )}\n </button>\n </header>\n );\n }\n return (\n <header\n {...extensionRootAttributes}\n class=\"kui-list-header\"\n data-component=\"list-header\"\n data-has-badge={String(hasBadge)}\n data-has-count={String(normalizedCount !== undefined)}\n data-density={density}\n data-size={size}\n data-divider={divider}\n data-inline={String(inline)}\n data-width={width}\n data-indicator-tone={indicatorTone}\n data-toggle=\"false\"\n data-placeholder={placeholder ? 'true' : undefined}\n aria-busy={busy}\n slot={slot}\n >\n <div class=\"kui-list-header__title\">\n <Text\n variant={`h${headingLevel}`}\n border=\"none\"\n aria-label={accessibleLabel}\n >\n {label}\n </Text>\n {indicator}\n </div>\n {action && (\n <button\n {...extensionTriggerAttributes}\n type=\"button\"\n class=\"kui-list-header__action\"\n data-action={placeholder ? undefined : action}\n aria-label={actionLabel}\n title={actionDisabled ? disabledReason : actionLabel}\n disabled={actionDisabled || placeholder || undefined}\n data-kui-disabled={actionDisabled ? 'true' : undefined}\n >\n {renderedActionIcon}\n </button>\n )}\n </header>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/components/collections/list-header/list-header.tsx"],"names":[],"mappings":";;;;;;;;AAcA,IAAM,8BAAA,uBAAqC,GAAA,CAAI;AAAA,EAC7C,gBAAA;AAAA,EACA,aAAA;AAAA,EACA,gBAAA;AAAA,EACA,gBAAA;AAAA,EACA,cAAA;AAAA,EACA,WAAA;AAAA,EACA,cAAA;AAAA,EACA,aAAA;AAAA,EACA,YAAA;AAAA,EACA,qBAAA;AAAA,EACA;AACF,CAAC,CAAA;AACD,IAAM,iCAAA,uBAAwC,GAAA,CAAI;AAAA,EAChD,aAAA;AAAA,EACA;AACF,CAAC,CAAA;AAyGM,SAAS,UAAA,CAAW;AAAA,EACzB,KAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP,YAAA,GAAe,CAAA;AAAA,EACf,KAAA;AAAA,EACA,UAAA;AAAA,EACA,KAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA,GAAU,UAAA;AAAA,EACV,OAAA,GAAU,MAAA;AAAA,EACV,MAAA,GAAS,KAAA;AAAA,EACT,KAAA,GAAQ,MAAA;AAAA,EACR,aAAA,GAAgB,SAAA;AAAA,EAChB,MAAA;AAAA,EACA,WAAA;AAAA,EACA,UAAA;AAAA,EACA,cAAA,GAAiB,KAAA;AAAA,EACjB,cAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA,GAAS,KAAA;AAAA,EACT,WAAA,GAAc,KAAA;AAAA,EACd,iBAAiB,EAAC;AAAA,EAClB,oBAAoB,EAAC;AAAA,EACrB;AACF,CAAA,EAAoB;AAClB,EAAA,MAAM,uBAAA,GAA0B,oBAAA;AAAA,IAC9B,cAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM,0BAAA,GAA6B,uBAAA;AAAA,IACjC,iBAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM,eAAA,GACJ,OAAO,KAAA,KAAU,QAAA,IAAY,MAAA,CAAO,cAAc,KAAK,CAAA,IAAK,KAAA,IAAS,CAAA,GACjE,KAAA,GACA,MAAA;AACN,EAAA,MAAM,oBAAA,GACJ,eAAA,KAAoB,MAAA,GAChB,MAAA,GACA,OAAO,UAAA,KAAe,QAAA,IAAY,UAAA,CAAW,IAAA,EAAK,GAChD,UAAA,GACA,MAAA,CAAO,eAAe,CAAA;AAC9B,EAAA,MAAM,aAAA,GAAgB,eAAA,KAAoB,MAAA,GAAY,KAAA,GAAQ,MAAA;AAC9D,EAAA,MAAM,cAAA,GAAiB,eAAA,KAAoB,MAAA,GAAY,MAAA,GAAS,MAAA;AAChE,EAAA,MAAM,QAAA,GAAW,OAAA,CAAQ,aAAA,IAAiB,cAAc,CAAA;AACxD,EAAA,MAAM,kBAAA,GACJ,eACC,MAAA,mBAAS,GAAA,CAAC,mBAAgB,IAAA,EAAM,OAAA,CAAQ,QAAQ,CAAA,EAAG,CAAA,GAAK,MAAA,CAAA;AAC3D,EAAA,MAAM,kBACJ,eAAA,KAAoB,MAAA,GAChB,SACA,CAAA,EAAG,KAAK,KAAK,oBAAoB,CAAA,CAAA;AACvC,EAAA,MAAM,SAAA,GACJ,aAAA,KAAkB,QAAA,GAAW,MAAA,GAAS,aAAA;AACxC,EAAA,MAAM,SAAA,GACJ,oBAAoB,MAAA,mBAClB,GAAA,CAAC,SAAM,IAAA,EAAK,SAAA,EAAU,IAAA,EAAM,SAAA,EAAW,UAAA,EAAY,CAAC,aACjD,QAAA,EAAA,WAAA,mBAAc,GAAA,CAAC,YAAS,KAAA,EAAO,EAAA,CAAG,IAAI,CAAA,EAAG,CAAA,GAAK,eAAA,EACjD,CAAA,mBAEA,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,aAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAM,IAAA,EAAK,SAAA,EAAU,MAAM,SAAA,EACzB,QAAA,EAAA,WAAA,mBAAc,GAAA,CAAC,QAAA,EAAA,EAAS,KAAA,EAAO,EAAA,CAAG,IAAI,CAAA,EAAG,IAAK,aAAA,EACjD,CAAA;AAAA,IAED,cAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAM,IAAA,EAAK,WAAU,IAAA,EAAM,SAAA,EACzB,QAAA,EAAA,WAAA,mBAAc,GAAA,CAAC,YAAS,KAAA,EAAO,EAAA,CAAG,IAAI,CAAA,EAAG,IAAK,cAAA,EACjD;AAAA,GAAA,EAEJ,CAAA;AAEJ,EAAA,MAAM,IAAA,GAAO,cAAe,MAAA,GAAmB,MAAA;AAC/C,EAAA,IAAI,MAAA,EAAQ;AACV,IAAA,uBACE,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACE,GAAG,uBAAA;AAAA,QACJ,KAAA,EAAM,iBAAA;AAAA,QACN,gBAAA,EAAe,aAAA;AAAA,QACf,gBAAA,EAAgB,OAAO,QAAQ,CAAA;AAAA,QAC/B,gBAAA,EAAgB,MAAA,CAAO,eAAA,KAAoB,MAAS,CAAA;AAAA,QACpD,cAAA,EAAc,OAAA;AAAA,QACd,WAAA,EAAW,IAAA;AAAA,QACX,cAAA,EAAc,OAAA;AAAA,QACd,aAAA,EAAa,OAAO,MAAM,CAAA;AAAA,QAC1B,YAAA,EAAY,KAAA;AAAA,QACZ,qBAAA,EAAqB,aAAA;AAAA,QACrB,aAAA,EAAY,MAAA;AAAA,QACZ,kBAAA,EAAkB,cAAc,MAAA,GAAS,MAAA;AAAA,QACzC,WAAA,EAAW,IAAA;AAAA,QACX,IAAA;AAAA,QAEA,QAAA,kBAAA,IAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACE,GAAG,0BAAA;AAAA,YACJ,IAAA,EAAK,QAAA;AAAA,YACL,KAAA,EAAM,gDAAA;AAAA,YACN,aAAA,EAAa,cAAc,MAAA,GAAY,MAAA;AAAA,YACvC,KAAA,EAAO,iBAAiB,cAAA,GAAiB,MAAA;AAAA,YACzC,QAAA,EAAU,kBAAkB,WAAA,IAAe,MAAA;AAAA,YAC3C,mBAAA,EAAmB,iBAAiB,MAAA,GAAS,MAAA;AAAA,YAC7C,YAAA,EAAY,eAAA;AAAA,YACZ,eAAA,EAAe,MAAA,CAAO,OAAA,CAAQ,QAAQ,CAAC,CAAA;AAAA,YAEvC,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,IAAA,EAAA,EAAK,OAAA,EAAQ,MAAA,EAAQ,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,cAC3B,SAAA;AAAA,cACA,kBAAA,oBACC,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,iCACT,QAAA,EAAA,kBAAA,EACH;AAAA;AAAA;AAAA;AAEJ;AAAA,KACF;AAAA,EAEJ;AACA,EAAA,uBACE,IAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACE,GAAG,uBAAA;AAAA,MACJ,KAAA,EAAM,iBAAA;AAAA,MACN,gBAAA,EAAe,aAAA;AAAA,MACf,gBAAA,EAAgB,OAAO,QAAQ,CAAA;AAAA,MAC/B,gBAAA,EAAgB,MAAA,CAAO,eAAA,KAAoB,MAAS,CAAA;AAAA,MACpD,cAAA,EAAc,OAAA;AAAA,MACd,WAAA,EAAW,IAAA;AAAA,MACX,cAAA,EAAc,OAAA;AAAA,MACd,aAAA,EAAa,OAAO,MAAM,CAAA;AAAA,MAC1B,YAAA,EAAY,KAAA;AAAA,MACZ,qBAAA,EAAqB,aAAA;AAAA,MACrB,aAAA,EAAY,OAAA;AAAA,MACZ,kBAAA,EAAkB,cAAc,MAAA,GAAS,MAAA;AAAA,MACzC,WAAA,EAAW,IAAA;AAAA,MACX,IAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,OAAM,wBAAA,EACT,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,IAAA;AAAA,YAAA;AAAA,cACC,OAAA,EAAS,IAAI,YAAY,CAAA,CAAA;AAAA,cACzB,MAAA,EAAO,MAAA;AAAA,cACP,YAAA,EAAY,eAAA;AAAA,cAEX,QAAA,EAAA;AAAA;AAAA,WACH;AAAA,UACC;AAAA,SAAA,EACH,CAAA;AAAA,QACC,MAAA,oBACC,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACE,GAAG,0BAAA;AAAA,YACJ,IAAA,EAAK,QAAA;AAAA,YACL,KAAA,EAAM,yBAAA;AAAA,YACN,aAAA,EAAa,cAAc,MAAA,GAAY,MAAA;AAAA,YACvC,YAAA,EAAY,WAAA;AAAA,YACZ,KAAA,EAAO,iBAAiB,cAAA,GAAiB,WAAA;AAAA,YACzC,QAAA,EAAU,kBAAkB,WAAA,IAAe,MAAA;AAAA,YAC3C,mBAAA,EAAmB,iBAAiB,MAAA,GAAS,MAAA;AAAA,YAE5C,QAAA,EAAA;AAAA;AAAA;AACH;AAAA;AAAA,GAEJ;AAEJ","file":"chunk-T4WJ5VGP.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport {\n filterControlAttributes,\n filterDataAttributes,\n} from '../../../shared/dom/extension-attributes.js';\nimport { em } from '../../../shared/styles/css-values.js';\nimport type { SemanticTone } from '../../../shared/styles/semantic-tone.js';\nimport type { HeadingLevel } from '../../actions/toolbar-text/toolbar-text.js';\nimport { Badge } from '../../feedback/badge/badge.js';\nimport { Skeleton } from '../../feedback/skeleton/skeleton.js';\nimport { DisclosureArrow } from '../../navigation/disclosure-arrow/disclosure-arrow.js';\nimport { Text } from '../../typography/text/text.js';\n\nconst PROTECTED_ROOT_DATA_ATTRIBUTES = new Set([\n 'data-component',\n 'data-action',\n 'data-has-badge',\n 'data-has-count',\n 'data-density',\n 'data-size',\n 'data-divider',\n 'data-inline',\n 'data-width',\n 'data-indicator-tone',\n 'data-toggle',\n]);\nconst PROTECTED_TRIGGER_DATA_ATTRIBUTES = new Set([\n 'data-action',\n 'data-kui-disabled',\n]);\n\ntype ListHeaderRootAttributes = Readonly<\n Record<`data-${string}`, string | undefined> & {\n 'data-component'?: never;\n 'data-action'?: never;\n 'data-has-badge'?: never;\n 'data-has-count'?: never;\n 'data-density'?: never;\n 'data-size'?: never;\n 'data-divider'?: never;\n 'data-inline'?: never;\n 'data-width'?: never;\n 'data-indicator-tone'?: never;\n 'data-toggle'?: never;\n }\n>;\n\ntype ListHeaderTriggerAttributes = Readonly<\n Record<`data-${string}`, string | undefined> & {\n 'data-action'?: never;\n 'data-kui-disabled'?: never;\n popoverTarget?: string;\n popoverTargetAction?: 'toggle' | 'show' | 'hide';\n 'aria-controls'?: string;\n 'aria-haspopup'?: 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid' | 'true';\n }\n>;\n\ninterface ListHeaderBaseProps {\n label: string;\n /** Visual label size, independent of the native heading level. Default `sm`. */\n size?: 'xs' | 'sm' | 'm' | 'l' | 'xl';\n density?: 'standard' | 'compact';\n divider?: 'none' | 'before' | 'after' | 'both';\n /** Shrink-wrap the header without its default outer margin, border, or padding. */\n inline?: boolean;\n /** Fill the available row or shrink-wrap while retaining normal header geometry. */\n width?: 'fill' | 'content';\n indicatorTone?: 'neutral' | 'accent' | 'pop' | 'danger';\n /** Render as an unanimated loading skeleton: keep the label and action affordance, disable interaction. */\n placeholder?: boolean;\n rootAttributes?: ListHeaderRootAttributes;\n triggerAttributes?: ListHeaderTriggerAttributes;\n /** Native named-slot assignment when composed inside a web component. */\n slot?: string;\n}\n\ntype ListHeaderModeProps =\n | {\n /** Render the title as a controlled disclosure trigger. */\n toggle: true;\n /** A toggle's label is its button text, not a heading. */\n headingLevel?: never;\n action: string;\n expanded: boolean;\n actionIcon?: SafeHtml;\n actionLabel?: never;\n actionDisabled?: boolean;\n disabledReason?: string;\n }\n | {\n /** Render a separately named trailing action. */\n toggle?: false;\n /**\n * Native heading level (`h1`–`h6`) of the label. Default `2`. Match the\n * document outline; the visual treatment does not change.\n */\n headingLevel?: HeadingLevel;\n action: string;\n actionLabel: string;\n actionIcon: SafeHtml;\n expanded?: never;\n actionDisabled?: boolean;\n disabledReason?: string;\n }\n | {\n /** Render a passive section heading. */\n toggle?: false;\n /**\n * Native heading level (`h1`–`h6`) of the label. Default `2`. Match the\n * document outline; the visual treatment does not change.\n */\n headingLevel?: HeadingLevel;\n action?: never;\n actionLabel?: never;\n actionIcon?: never;\n expanded?: never;\n actionDisabled?: never;\n disabledReason?: never;\n };\n\ntype ListHeaderIndicatorProps =\n | { count: number; countLabel: string; badge?: never; status?: never }\n | {\n count?: never;\n countLabel?: never;\n badge?: SafeHtml | undefined;\n status?: SafeHtml | undefined;\n };\n\nexport type ListHeaderProps = ListHeaderBaseProps &\n ListHeaderIndicatorProps &\n ListHeaderModeProps;\n\nexport function ListHeader({\n label,\n size = 'sm',\n headingLevel = 2,\n count,\n countLabel,\n badge,\n status,\n density = 'standard',\n divider = 'none',\n inline = false,\n width = 'fill',\n indicatorTone = 'neutral',\n action,\n actionLabel,\n actionIcon,\n actionDisabled = false,\n disabledReason,\n expanded,\n toggle = false,\n placeholder = false,\n rootAttributes = {},\n triggerAttributes = {},\n slot,\n}: ListHeaderProps) {\n const extensionRootAttributes = filterDataAttributes(\n rootAttributes,\n PROTECTED_ROOT_DATA_ATTRIBUTES,\n );\n const extensionTriggerAttributes = filterControlAttributes(\n triggerAttributes,\n PROTECTED_TRIGGER_DATA_ATTRIBUTES,\n );\n const normalizedCount =\n typeof count === 'number' && Number.isSafeInteger(count) && count >= 0\n ? count\n : undefined;\n const normalizedCountLabel =\n normalizedCount === undefined\n ? undefined\n : typeof countLabel === 'string' && countLabel.trim()\n ? countLabel\n : String(normalizedCount);\n const renderedBadge = normalizedCount === undefined ? badge : undefined;\n const renderedStatus = normalizedCount === undefined ? status : undefined;\n const hasBadge = Boolean(renderedBadge || renderedStatus);\n const renderedActionIcon =\n actionIcon ??\n (toggle ? <DisclosureArrow open={Boolean(expanded)} /> : undefined);\n const accessibleLabel =\n normalizedCount === undefined\n ? undefined\n : `${label}, ${normalizedCountLabel}`;\n const badgeTone: SemanticTone =\n indicatorTone === 'accent' ? 'info' : indicatorTone;\n const indicator =\n normalizedCount !== undefined ? (\n <Badge size=\"compact\" tone={badgeTone} ariaHidden={!placeholder}>\n {placeholder ? <Skeleton width={em(1.75)} /> : normalizedCount}\n </Badge>\n ) : (\n <>\n {renderedBadge && (\n <Badge size=\"compact\" tone={badgeTone}>\n {placeholder ? <Skeleton width={em(1.75)} /> : renderedBadge}\n </Badge>\n )}\n {renderedStatus && (\n <Badge size=\"compact\" tone={badgeTone}>\n {placeholder ? <Skeleton width={em(1.75)} /> : renderedStatus}\n </Badge>\n )}\n </>\n );\n const busy = placeholder ? ('true' as const) : undefined;\n if (toggle) {\n return (\n <header\n {...extensionRootAttributes}\n class=\"kui-list-header\"\n data-component=\"list-header\"\n data-has-badge={String(hasBadge)}\n data-has-count={String(normalizedCount !== undefined)}\n data-density={density}\n data-size={size}\n data-divider={divider}\n data-inline={String(inline)}\n data-width={width}\n data-indicator-tone={indicatorTone}\n data-toggle=\"true\"\n data-placeholder={placeholder ? 'true' : undefined}\n aria-busy={busy}\n slot={slot}\n >\n <button\n {...extensionTriggerAttributes}\n type=\"button\"\n class=\"kui-list-header__title kui-list-header__toggle\"\n data-action={placeholder ? undefined : action}\n title={actionDisabled ? disabledReason : undefined}\n disabled={actionDisabled || placeholder || undefined}\n data-kui-disabled={actionDisabled ? 'true' : undefined}\n aria-label={accessibleLabel}\n aria-expanded={String(Boolean(expanded))}\n >\n <Text variant=\"span\">{label}</Text>\n {indicator}\n {renderedActionIcon && (\n <span class=\"kui-list-header__action-layer\">\n {renderedActionIcon}\n </span>\n )}\n </button>\n </header>\n );\n }\n return (\n <header\n {...extensionRootAttributes}\n class=\"kui-list-header\"\n data-component=\"list-header\"\n data-has-badge={String(hasBadge)}\n data-has-count={String(normalizedCount !== undefined)}\n data-density={density}\n data-size={size}\n data-divider={divider}\n data-inline={String(inline)}\n data-width={width}\n data-indicator-tone={indicatorTone}\n data-toggle=\"false\"\n data-placeholder={placeholder ? 'true' : undefined}\n aria-busy={busy}\n slot={slot}\n >\n <div class=\"kui-list-header__title\">\n <Text\n variant={`h${headingLevel}`}\n border=\"none\"\n aria-label={accessibleLabel}\n >\n {label}\n </Text>\n {indicator}\n </div>\n {action && (\n <button\n {...extensionTriggerAttributes}\n type=\"button\"\n class=\"kui-list-header__action\"\n data-action={placeholder ? undefined : action}\n aria-label={actionLabel}\n title={actionDisabled ? disabledReason : actionLabel}\n disabled={actionDisabled || placeholder || undefined}\n data-kui-disabled={actionDisabled ? 'true' : undefined}\n >\n {renderedActionIcon}\n </button>\n )}\n </header>\n );\n}\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { Skeleton } from './chunk-
|
|
2
|
-
import { em } from './chunk-
|
|
1
|
+
import { Skeleton } from './chunk-CVD5IZGB.js';
|
|
2
|
+
import { em } from './chunk-IQSRHXZR.js';
|
|
3
3
|
import { filterDataAttributes } from './chunk-KH4KEMSP.js';
|
|
4
4
|
import { jsxs, jsx } from 'kerfjs/jsx-runtime';
|
|
5
5
|
|
|
@@ -135,4 +135,4 @@ function AppTab({
|
|
|
135
135
|
|
|
136
136
|
export { AppTab };
|
|
137
137
|
|
|
138
|
-
//# sourceMappingURL=chunk-
|
|
138
|
+
//# sourceMappingURL=chunk-TGLUDQP2.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/navigation/app-tab/app-tab.tsx"],"names":[],"mappings":"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","file":"chunk-6NOLL5KG.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 } from '../../../shared/styles/css-values.js';\nimport { Skeleton } from '../../feedback/skeleton/skeleton.js';\n\nconst PROTECTED_ROOT_DATA_ATTRIBUTES = new Set([\n 'data-component',\n 'data-action',\n 'data-tab-id',\n 'data-selected',\n 'data-tab-dragging',\n 'data-tab-drop-position',\n 'data-attention',\n 'data-drop-target',\n 'data-name-overflow',\n 'data-pinned',\n]);\n\ntype AppTabRootAttributes = Readonly<\n Record<`data-${string}`, string | undefined> & {\n 'data-component'?: never;\n 'data-action'?: never;\n 'data-tab-id'?: never;\n 'data-selected'?: never;\n 'data-tab-dragging'?: never;\n 'data-tab-drop-position'?: never;\n 'data-attention'?: never;\n 'data-drop-target'?: never;\n 'data-name-overflow'?: never;\n 'data-pinned'?: never;\n }\n>;\n\nexport type AppTabPresentation = 'pill' | 'segmented' | 'icon-only';\nexport type AppTabSize = 'default' | 'compact';\nexport type AppTabNameOverflow = 'ellipsis' | 'visible';\n\nexport interface AppTabProps {\n id: string;\n name: string;\n selected?: boolean;\n /** Emphasize the visible tab name with the attention color token. */\n attention?: boolean;\n /** Highlight this tab as the target of a drag over its content. */\n dropTarget?: boolean;\n /** Keep the leading tab visible within its TabBar tablist while peers scroll. */\n pinned?: boolean;\n closable?: boolean;\n draggable?: boolean;\n leading?: KerfUiContent;\n trailing?: KerfUiContent;\n /** Visual treatment within a TabBar. Icon-only tabs retain `name` as their accessible name. */\n presentation?: AppTabPresentation;\n /** Compact tabs use the 32px application-rail height. */\n size?: AppTabSize;\n /** Maximum visible label width in CSS pixels before ellipsis. */\n labelMaxWidth?: number;\n /** Keep the full name visible for an inline loading treatment. */\n nameOverflow?: AppTabNameOverflow;\n /** Decorative dormant content for the close button. Must not contain interactive descendants. */\n closeIcon?: SafeHtml;\n selectAction?: string;\n closeAction?: string;\n className?: string;\n /** Render as an unanimated loading skeleton, disabling select/close and dragging. */\n placeholder?: boolean;\n /**\n * Named and still opening: the tab is known but its content is loading.\n * Keeps `name` visible in the quiet text color and as the tab's accessible\n * name, shows `trailing` (for example a `LoadingSpinner`), and marks the\n * tab `aria-busy`. Unlike `placeholder` it stays selectable — the\n * application shows placeholder content in its panel until loading\n * completes — while close and dragging stay disabled. Same pill geometry\n * as the live tab, so swapping it in place does not shift the bar.\n * `placeholder` wins when both are set.\n */\n pending?: boolean;\n rootAttributes?: AppTabRootAttributes;\n /** Native named-slot assignment when composed inside a web component. */\n slot?: string;\n}\n\nfunction CloseIcon() {\n return (\n <svg\n aria-hidden=\"true\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2.25\"\n stroke-linecap=\"round\"\n >\n <path d=\"m7 7 10 10\" />\n <path d=\"M17 7 7 17\" />\n </svg>\n );\n}\n\nexport function AppTab({\n id,\n name,\n selected = false,\n attention = false,\n dropTarget = false,\n pinned = false,\n closable = true,\n draggable = false,\n leading,\n trailing,\n presentation = 'pill',\n size = 'default',\n labelMaxWidth,\n nameOverflow = 'ellipsis',\n closeIcon,\n selectAction = 'select-tab',\n closeAction = 'close-tab',\n className = '',\n placeholder = false,\n pending = false,\n rootAttributes = {},\n slot,\n}: AppTabProps) {\n // Both loading states disable close and dragging; a `placeholder` (unknown\n // tab) is also unselectable and hides its name, while a `pending` (known,\n // still opening) tab stays selectable so its panel can show placeholders.\n const dormant = placeholder || pending;\n const named = pending && !placeholder;\n const keyshortcuts = [\n closable && !dormant ? 'Delete Backspace' : '',\n draggable && !dormant ? 'Alt+Shift+ArrowLeft Alt+Shift+ArrowRight' : '',\n ]\n .filter(Boolean)\n .join(' ');\n const extensionAttributes = filterDataAttributes(\n rootAttributes,\n PROTECTED_ROOT_DATA_ATTRIBUTES,\n );\n return (\n <div\n {...extensionAttributes}\n class={`kui-app-tab ${className}`.trim()}\n data-component=\"app-tab\"\n data-tab-id={id}\n data-selected={String(selected)}\n data-attention={attention ? 'true' : undefined}\n data-drop-target={dropTarget ? 'true' : undefined}\n data-pinned={pinned ? 'true' : undefined}\n data-name-overflow={nameOverflow}\n data-presentation={presentation}\n data-size={size}\n data-placeholder={placeholder ? 'true' : undefined}\n data-pending={named ? 'true' : undefined}\n draggable={dormant ? 'false' : draggable ? 'true' : 'false'}\n aria-busy={dormant ? 'true' : undefined}\n style={\n labelMaxWidth === undefined\n ? undefined\n : `--kui-app-tab-label-max-width:${labelMaxWidth}px`\n }\n slot={slot}\n >\n {closable && (\n <button\n type=\"button\"\n tabindex=\"-1\"\n class=\"kui-app-tab__close\"\n data-action={dormant ? undefined : closeAction}\n data-tab-id={id}\n disabled={dormant || undefined}\n aria-label={`Close ${name}`}\n title={`Close ${name}`}\n >\n <span class=\"kui-app-tab__close-icon\" aria-hidden=\"true\">\n {closeIcon ?? <CloseIcon />}\n </span>\n </button>\n )}\n <button\n type=\"button\"\n class=\"kui-app-tab__select\"\n role=\"tab\"\n aria-selected={String(selected)}\n aria-label={presentation === 'icon-only' || named ? name : undefined}\n aria-keyshortcuts={keyshortcuts || undefined}\n data-action={placeholder ? undefined : selectAction}\n data-tab-id={id}\n disabled={placeholder || undefined}\n tabindex={!placeholder && selected ? '0' : '-1'}\n >\n {leading}\n <span\n class=\"kui-app-tab__name\"\n aria-hidden={presentation === 'icon-only' ? 'true' : undefined}\n >\n {placeholder ? <Skeleton width={em(7)} /> : name}\n </span>\n {closable || trailing ? (\n <span class=\"kui-app-tab__trailing\">{trailing}</span>\n ) : undefined}\n </button>\n </div>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/components/navigation/app-tab/app-tab.tsx"],"names":[],"mappings":"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","file":"chunk-TGLUDQP2.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 } from '../../../shared/styles/css-values.js';\nimport { Skeleton } from '../../feedback/skeleton/skeleton.js';\n\nconst PROTECTED_ROOT_DATA_ATTRIBUTES = new Set([\n 'data-component',\n 'data-action',\n 'data-tab-id',\n 'data-selected',\n 'data-tab-dragging',\n 'data-tab-drop-position',\n 'data-attention',\n 'data-drop-target',\n 'data-name-overflow',\n 'data-pinned',\n]);\n\ntype AppTabRootAttributes = Readonly<\n Record<`data-${string}`, string | undefined> & {\n 'data-component'?: never;\n 'data-action'?: never;\n 'data-tab-id'?: never;\n 'data-selected'?: never;\n 'data-tab-dragging'?: never;\n 'data-tab-drop-position'?: never;\n 'data-attention'?: never;\n 'data-drop-target'?: never;\n 'data-name-overflow'?: never;\n 'data-pinned'?: never;\n }\n>;\n\nexport type AppTabPresentation = 'pill' | 'segmented' | 'icon-only';\nexport type AppTabSize = 'default' | 'compact';\nexport type AppTabNameOverflow = 'ellipsis' | 'visible';\n\nexport interface AppTabProps {\n id: string;\n name: string;\n selected?: boolean;\n /** Emphasize the visible tab name with the attention color token. */\n attention?: boolean;\n /** Highlight this tab as the target of a drag over its content. */\n dropTarget?: boolean;\n /** Keep the leading tab visible within its TabBar tablist while peers scroll. */\n pinned?: boolean;\n closable?: boolean;\n draggable?: boolean;\n leading?: KerfUiContent;\n trailing?: KerfUiContent;\n /** Visual treatment within a TabBar. Icon-only tabs retain `name` as their accessible name. */\n presentation?: AppTabPresentation;\n /** Compact tabs use the 32px application-rail height. */\n size?: AppTabSize;\n /** Maximum visible label width in CSS pixels before ellipsis. */\n labelMaxWidth?: number;\n /** Keep the full name visible for an inline loading treatment. */\n nameOverflow?: AppTabNameOverflow;\n /** Decorative dormant content for the close button. Must not contain interactive descendants. */\n closeIcon?: SafeHtml;\n selectAction?: string;\n closeAction?: string;\n className?: string;\n /** Render as an unanimated loading skeleton, disabling select/close and dragging. */\n placeholder?: boolean;\n /**\n * Named and still opening: the tab is known but its content is loading.\n * Keeps `name` visible in the quiet text color and as the tab's accessible\n * name, shows `trailing` (for example a `LoadingSpinner`), and marks the\n * tab `aria-busy`. Unlike `placeholder` it stays selectable — the\n * application shows placeholder content in its panel until loading\n * completes — while close and dragging stay disabled. Same pill geometry\n * as the live tab, so swapping it in place does not shift the bar.\n * `placeholder` wins when both are set.\n */\n pending?: boolean;\n rootAttributes?: AppTabRootAttributes;\n /** Native named-slot assignment when composed inside a web component. */\n slot?: string;\n}\n\nfunction CloseIcon() {\n return (\n <svg\n aria-hidden=\"true\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2.25\"\n stroke-linecap=\"round\"\n >\n <path d=\"m7 7 10 10\" />\n <path d=\"M17 7 7 17\" />\n </svg>\n );\n}\n\nexport function AppTab({\n id,\n name,\n selected = false,\n attention = false,\n dropTarget = false,\n pinned = false,\n closable = true,\n draggable = false,\n leading,\n trailing,\n presentation = 'pill',\n size = 'default',\n labelMaxWidth,\n nameOverflow = 'ellipsis',\n closeIcon,\n selectAction = 'select-tab',\n closeAction = 'close-tab',\n className = '',\n placeholder = false,\n pending = false,\n rootAttributes = {},\n slot,\n}: AppTabProps) {\n // Both loading states disable close and dragging; a `placeholder` (unknown\n // tab) is also unselectable and hides its name, while a `pending` (known,\n // still opening) tab stays selectable so its panel can show placeholders.\n const dormant = placeholder || pending;\n const named = pending && !placeholder;\n const keyshortcuts = [\n closable && !dormant ? 'Delete Backspace' : '',\n draggable && !dormant ? 'Alt+Shift+ArrowLeft Alt+Shift+ArrowRight' : '',\n ]\n .filter(Boolean)\n .join(' ');\n const extensionAttributes = filterDataAttributes(\n rootAttributes,\n PROTECTED_ROOT_DATA_ATTRIBUTES,\n );\n return (\n <div\n {...extensionAttributes}\n class={`kui-app-tab ${className}`.trim()}\n data-component=\"app-tab\"\n data-tab-id={id}\n data-selected={String(selected)}\n data-attention={attention ? 'true' : undefined}\n data-drop-target={dropTarget ? 'true' : undefined}\n data-pinned={pinned ? 'true' : undefined}\n data-name-overflow={nameOverflow}\n data-presentation={presentation}\n data-size={size}\n data-placeholder={placeholder ? 'true' : undefined}\n data-pending={named ? 'true' : undefined}\n draggable={dormant ? 'false' : draggable ? 'true' : 'false'}\n aria-busy={dormant ? 'true' : undefined}\n style={\n labelMaxWidth === undefined\n ? undefined\n : `--kui-app-tab-label-max-width:${labelMaxWidth}px`\n }\n slot={slot}\n >\n {closable && (\n <button\n type=\"button\"\n tabindex=\"-1\"\n class=\"kui-app-tab__close\"\n data-action={dormant ? undefined : closeAction}\n data-tab-id={id}\n disabled={dormant || undefined}\n aria-label={`Close ${name}`}\n title={`Close ${name}`}\n >\n <span class=\"kui-app-tab__close-icon\" aria-hidden=\"true\">\n {closeIcon ?? <CloseIcon />}\n </span>\n </button>\n )}\n <button\n type=\"button\"\n class=\"kui-app-tab__select\"\n role=\"tab\"\n aria-selected={String(selected)}\n aria-label={presentation === 'icon-only' || named ? name : undefined}\n aria-keyshortcuts={keyshortcuts || undefined}\n data-action={placeholder ? undefined : selectAction}\n data-tab-id={id}\n disabled={placeholder || undefined}\n tabindex={!placeholder && selected ? '0' : '-1'}\n >\n {leading}\n <span\n class=\"kui-app-tab__name\"\n aria-hidden={presentation === 'icon-only' ? 'true' : undefined}\n >\n {placeholder ? <Skeleton width={em(7)} /> : name}\n </span>\n {closable || trailing ? (\n <span class=\"kui-app-tab__trailing\">{trailing}</span>\n ) : undefined}\n </button>\n </div>\n );\n}\n"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { Skeleton } from './chunk-
|
|
1
|
+
import { Skeleton } from './chunk-CVD5IZGB.js';
|
|
2
2
|
import { Badge } from './chunk-U6QYTMDB.js';
|
|
3
|
-
import { LucideIcon } from './chunk-
|
|
4
|
-
import { em } from './chunk-
|
|
3
|
+
import { LucideIcon } from './chunk-LOSRXZAH.js';
|
|
4
|
+
import { em } from './chunk-IQSRHXZR.js';
|
|
5
5
|
import { jsxs, jsx, Fragment } from 'kerfjs/jsx-runtime';
|
|
6
6
|
|
|
7
7
|
function SelectChevron() {
|
|
@@ -219,4 +219,4 @@ function Select(props) {
|
|
|
219
219
|
|
|
220
220
|
export { Select };
|
|
221
221
|
|
|
222
|
-
//# sourceMappingURL=chunk-
|
|
222
|
+
//# sourceMappingURL=chunk-TLMMFQWM.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/forms/select/select.tsx"],"names":[],"mappings":"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","file":"chunk-HO6FU3G7.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport {\n type CssForegroundColor,\n em,\n} from '../../../shared/styles/css-values.js';\nimport { Badge } from '../../feedback/badge/badge.js';\nimport { Skeleton } from '../../feedback/skeleton/skeleton.js';\nimport {\n LucideIcon,\n type LucideNode,\n} from '../../media/lucide-icon/lucide-icon.js';\n\nexport interface SelectChoice<Value extends string = string> {\n value: Value;\n label: string;\n icon?: LucideNode;\n iconName?: string;\n /**\n * Foreground color for the optional icon: a semantic foreground token such\n * as `uiColor('success-on-quiet')`, or an application-owned\n * `foregroundColorVar('--app-icon-color')`. Fill tokens such as\n * `uiColor('success-fill-quiet')` are pale background tints and do not\n * type-check.\n */\n color?: CssForegroundColor;\n group?: string;\n /** Keep an unavailable choice visible but prevent selection. */\n disabled?: boolean;\n /** Optional explanation exposed as the disabled option's native tooltip. */\n disabledReason?: string;\n /**\n * Draw a divider between this choice and the previous choice in the same\n * list. A group boundary is already a separator, so the first choice of a\n * group (or of the whole menu) never draws a second one.\n */\n separatorBefore?: boolean;\n}\n\ntype SelectAccessibleName =\n { label: string; ariaLabel?: string } | { label?: never; ariaLabel: string };\n\nexport type SelectPresentation =\n 'form' | 'toolbar-borderless' | 'navigation' | 'inline' | 'title';\nexport type SelectSize = 'default' | 'compact';\nexport type SelectSelectedPresentation = 'label' | 'icon-only';\nexport type SelectFocusRingOwner = 'select' | 'group';\nexport type SelectTriggerWidth = 'fit-content' | 'max-content' | 'fill';\n\ninterface SelectBaseProps<Value extends string = string> {\n name: string;\n choices: readonly SelectChoice<Value>[];\n className?: string;\n /** Empty-value hint text shown in the closed control (the native select placeholder). */\n placeholderText?: string;\n /** Supporting text shown below the control and associated with its combobox. */\n hint?: string;\n disabled?: boolean;\n /** Match menu width to the trigger; default menus grow to content within viewport gutters. */\n fitMenu?: boolean;\n /** Render as an unanimated loading skeleton: the label above a static, empty control box. */\n placeholder?: boolean;\n /** Form (default), borderless toolbar, intrinsic navigation, inline, or view-title chrome. */\n presentation?: SelectPresentation;\n size?: SelectSize;\n /** Closed trigger width; omit to keep the presentation's default. */\n triggerWidth?: SelectTriggerWidth;\n /** Show the disclosure caret (default); omit it for a compact icon-only trigger. */\n caret?: boolean;\n /** Let an enclosing ToolbarControlGroup paint the composed focus ring. */\n focusRingOwner?: SelectFocusRingOwner;\n /** Keep the trigger's focus ring inside its box when an ancestor clips overflow. */\n focusRingInset?: boolean;\n /** Maximum closed-control label width in CSS pixels before ellipsis. */\n labelMaxWidth?: number;\n /** Native named-slot assignment when composed inside a web component. */\n slot?: string;\n}\n\n/** One chosen value (the default). */\nexport interface SelectSingleValueProps<Value extends string = string> {\n multiple?: false;\n value: NoInfer<Value>;\n renderSelected?: (choice: SelectChoice<Value>) => SafeHtml;\n /** Show only the selected choice icon while retaining the Select's accessible name. */\n selectedPresentation?: SelectSelectedPresentation;\n triggerIcon?: never;\n selectAllLabel?: never;\n clearLabel?: never;\n}\n\n/**\n * Any number of chosen values. The popup stays open while the person toggles\n * choices and closes on an outside click, Escape, or focus leaving; the closed\n * control summarizes the chosen labels in choice order.\n */\nexport interface SelectMultipleLabelProps<Value extends string = string> {\n multiple: true;\n value: readonly NoInfer<Value>[];\n renderSelected?: never;\n selectedPresentation?: 'label';\n triggerIcon?: never;\n /** Opt in to a footer action that selects every enabled choice. */\n selectAllLabel?: string;\n /** Opt in to a footer action that clears the current selection. */\n clearLabel?: string;\n}\n\n/**\n * A multiple Select drawn as an icon-only toolbar trigger, such as a\n * \"Filter by label\" funnel. No single choice is selected, so the trigger shows\n * a fixed `triggerIcon` naming the menu's purpose; while any choice is chosen\n * a count badge sits beside it, and the combobox's accessible name ends with\n * the chosen labels in choice order.\n */\nexport interface SelectMultipleIconProps<Value extends string = string> {\n multiple: true;\n value: readonly NoInfer<Value>[];\n renderSelected?: never;\n selectedPresentation: 'icon-only';\n /**\n * The trigger's fixed icon, typically a `LucideIcon` naming the menu's\n * purpose (a funnel for a filter), independent of the selection.\n */\n triggerIcon: KerfUiContent;\n /** Opt in to a footer action that selects every enabled choice. */\n selectAllLabel?: string;\n /** Opt in to a footer action that clears the current selection. */\n clearLabel?: string;\n}\n\nexport type SelectMultipleValueProps<Value extends string = string> =\n SelectMultipleLabelProps<Value> | SelectMultipleIconProps<Value>;\n\nexport type SelectProps<Value extends string = string> =\n SelectBaseProps<Value> &\n SelectAccessibleName &\n (SelectSingleValueProps<Value> | SelectMultipleValueProps<Value>);\n\n// The closed wa-select's disclosure glyph: Web Awesome's system `chevron-down`,\n// Font Awesome Free 7.0.0 by @fontawesome (https://fontawesome.com), licensed\n// CC BY 4.0 (https://fontawesome.com/license/free). The placeholder draws the\n// same path so the loading box matches the live control without registering\n// Web Awesome.\nfunction SelectChevron() {\n return (\n <svg viewBox=\"0 0 448 512\" aria-hidden=\"true\">\n <path d=\"M201.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 338.7 54.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z\" />\n </svg>\n );\n}\n\nexport function Select<Value extends string>(props: SelectProps<Value>) {\n const {\n name,\n label,\n ariaLabel,\n choices,\n className = '',\n placeholderText,\n hint,\n disabled = false,\n fitMenu = false,\n placeholder = false,\n presentation = 'form',\n size = 'default',\n triggerWidth,\n caret = true,\n focusRingOwner = 'select',\n focusRingInset = false,\n labelMaxWidth,\n slot,\n } = props;\n const multiple = props.multiple === true;\n const values: readonly Value[] = props.multiple ? props.value : [props.value];\n const renderSelected = props.multiple ? undefined : props.renderSelected;\n const selectedPresentation: SelectSelectedPresentation =\n props.selectedPresentation ?? 'label';\n // A multiple icon-only trigger shows a fixed icon naming the menu's\n // purpose instead of a selected choice's icon.\n const iconTrigger =\n props.multiple && props.selectedPresentation === 'icon-only';\n const triggerIcon = iconTrigger ? props.triggerIcon : undefined;\n if (placeholder) {\n return (\n <div\n class={`kui-select kui-select--placeholder ${className}`.trim()}\n data-component=\"select\"\n data-placeholder=\"true\"\n data-presentation={presentation}\n data-size={size}\n data-trigger-width={triggerWidth}\n data-caret={caret ? undefined : 'false'}\n data-selected-presentation={selectedPresentation}\n data-focus-ring-owner={focusRingOwner}\n data-focus-ring-inset={focusRingInset ? 'true' : undefined}\n aria-busy=\"true\"\n style={\n labelMaxWidth === undefined\n ? undefined\n : `--kui-select-label-max-width:${labelMaxWidth}px`\n }\n slot={slot}\n >\n {label && <span class=\"kui-select__placeholder-label\">{label}</span>}\n <span\n class=\"kui-select__placeholder-box\"\n aria-label={ariaLabel}\n role=\"img\"\n >\n <Skeleton width={em(10)} />\n <span class=\"kui-select__placeholder-chevron\" aria-hidden=\"true\">\n <SelectChevron />\n </span>\n </span>\n {hint && <span class=\"kui-select__placeholder-hint\">{hint}</span>}\n </div>\n );\n }\n // A multiple Select summarizes its choices in the display text instead of\n // leading with one selected icon.\n const selected = multiple\n ? undefined\n : choices.find((choice) => choice.value === values[0] && !choice.disabled);\n const chosenCount = iconTrigger\n ? choices.filter(\n (choice) => !choice.disabled && values.includes(choice.value),\n ).length\n : 0;\n const icon = (choice: SelectChoice<Value>, selectedIcon = false) => (\n <span\n data-key={`${name}:${choice.value}:${selectedIcon ? 'selected' : 'option'}`}\n data-morph-skip\n slot=\"start\"\n class={`kui-select__icon${selectedIcon ? ' kui-select__icon--selected' : ''}`}\n style={choice.color ? `color:${choice.color}` : undefined}\n >\n {choice.icon ? (\n <LucideIcon\n icon={choice.icon}\n name={\n choice.iconName ?? choice.label.toLowerCase().replaceAll(' ', '-')\n }\n />\n ) : null}\n </span>\n );\n const option = (choice: SelectChoice<Value>, index: number) => (\n <>\n {/* Web Awesome sets the divider's role and aria-orientation on its\n host once, so a template that omits them would lose them to the\n next kerf re-render's morph for good. Render them explicitly, with\n the orientation it reflects (see the wa-select note below). */}\n {choice.separatorBefore && index > 0 && (\n <wa-divider\n orientation=\"horizontal\"\n role=\"separator\"\n aria-orientation=\"horizontal\"\n />\n )}\n <wa-option\n value={choice.value}\n selected={multiple && !choice.disabled && values.includes(choice.value)}\n disabled={choice.disabled}\n title={choice.disabled ? choice.disabledReason : undefined}\n >\n {choice.icon ? icon(choice) : null}\n {choice.label}\n </wa-option>\n </>\n );\n const groups = [\n ...new Set(\n choices\n .map((choice) => choice.group)\n .filter((group): group is string => Boolean(group)),\n ),\n ];\n const ungrouped = choices.filter((choice) => !choice.group);\n // Web Awesome names its shadow combobox from the label, not the host's\n // aria-label. Keep ariaLabel-only names available without visible chrome.\n // A multiple Select's value is its selected options (the value attribute\n // holds only one string), kept in sync by @kerfjs/ui/select/register.\n // size/appearance/placement are Web Awesome's defaults, which it reflects\n // onto the host; rendering them keeps a re-render's morph from stripping\n // them and forcing a Lit update to put them back.\n return (\n <wa-select\n size=\"m\"\n appearance=\"outlined\"\n placement=\"bottom\"\n class={`kui-select${renderSelected ? ' kui-select--custom-selected' : ''}${fitMenu ? ' kui-select--fit-menu' : ''}${!label ? ' kui-select--label-hidden' : ''} ${className}`.trim()}\n data-component=\"select\"\n data-presentation={presentation}\n data-size={size}\n data-trigger-width={triggerWidth}\n data-caret={caret ? undefined : 'false'}\n data-selected-presentation={selectedPresentation}\n data-focus-ring-owner={focusRingOwner}\n data-focus-ring-inset={focusRingInset ? 'true' : undefined}\n name={name}\n label={label || ariaLabel}\n aria-label={ariaLabel}\n multiple={multiple}\n value={multiple ? undefined : values[0]}\n placeholder={placeholderText}\n hint={hint}\n disabled={disabled}\n style={\n labelMaxWidth === undefined\n ? undefined\n : `--kui-select-label-max-width:${labelMaxWidth}px`\n }\n slot={slot}\n >\n {iconTrigger && (\n <>\n {/* The accessible name ends with the chosen labels, which\n @kerfjs/ui/select/register writes into the summary. */}\n <span slot=\"label\" data-key={`${name}:trigger-label`}>\n {label || ariaLabel}\n <span class=\"kui-select__name-summary\" data-morph-skip />\n </span>\n <span\n data-key={`${name}:trigger-icon`}\n slot=\"start\"\n class=\"kui-select__icon kui-select__icon--selected kui-select__trigger-icon\"\n >\n {triggerIcon}\n </span>\n {chosenCount > 0 && (\n <Badge slot=\"end\" tone=\"info\" size=\"compact\" ariaHidden>\n {chosenCount}\n </Badge>\n )}\n </>\n )}\n {selected &&\n (renderSelected ? (\n <span\n data-key={`${name}:${values[0]}:custom-selected`}\n slot=\"start\"\n class=\"kui-select__custom-selected\"\n >\n <span class=\"kui-select__custom-selected-content\">\n {renderSelected(selected)}\n </span>\n </span>\n ) : selected.icon ? (\n icon(selected, true)\n ) : null)}\n {ungrouped.map(option)}\n {groups.map((group, index) => (\n <div\n class={`kui-select__group${index > 0 || ungrouped.length > 0 ? ' kui-select__group--separated' : ''}`}\n role=\"group\"\n aria-label={group}\n >\n <span class=\"kui-select__group-title\">{group}</span>\n {choices.filter((choice) => choice.group === group).map(option)}\n </div>\n ))}\n {props.multiple && (props.selectAllLabel || props.clearLabel) && (\n <div\n class=\"kui-select__actions\"\n role=\"group\"\n aria-label={label || ariaLabel}\n >\n {props.selectAllLabel && (\n <button\n class=\"kui-select__action\"\n type=\"button\"\n data-select-action=\"all\"\n >\n {props.selectAllLabel}\n </button>\n )}\n {props.clearLabel && (\n <button\n class=\"kui-select__action\"\n type=\"button\"\n data-select-action=\"clear\"\n >\n {props.clearLabel}\n </button>\n )}\n </div>\n )}\n </wa-select>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/components/forms/select/select.tsx"],"names":[],"mappings":"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","file":"chunk-TLMMFQWM.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport {\n type CssForegroundColor,\n em,\n} from '../../../shared/styles/css-values.js';\nimport { Badge } from '../../feedback/badge/badge.js';\nimport { Skeleton } from '../../feedback/skeleton/skeleton.js';\nimport {\n LucideIcon,\n type LucideNode,\n} from '../../media/lucide-icon/lucide-icon.js';\n\nexport interface SelectChoice<Value extends string = string> {\n value: Value;\n label: string;\n icon?: LucideNode;\n iconName?: string;\n /**\n * Foreground color for the optional icon: a semantic foreground token such\n * as `uiColor('success-on-quiet')`, or an application-owned\n * `foregroundColorVar('--app-icon-color')`. Fill tokens such as\n * `uiColor('success-fill-quiet')` are pale background tints and do not\n * type-check.\n */\n color?: CssForegroundColor;\n group?: string;\n /** Keep an unavailable choice visible but prevent selection. */\n disabled?: boolean;\n /** Optional explanation exposed as the disabled option's native tooltip. */\n disabledReason?: string;\n /**\n * Draw a divider between this choice and the previous choice in the same\n * list. A group boundary is already a separator, so the first choice of a\n * group (or of the whole menu) never draws a second one.\n */\n separatorBefore?: boolean;\n}\n\ntype SelectAccessibleName =\n { label: string; ariaLabel?: string } | { label?: never; ariaLabel: string };\n\nexport type SelectPresentation =\n 'form' | 'toolbar-borderless' | 'navigation' | 'inline' | 'title';\nexport type SelectSize = 'default' | 'compact';\nexport type SelectSelectedPresentation = 'label' | 'icon-only';\nexport type SelectFocusRingOwner = 'select' | 'group';\nexport type SelectTriggerWidth = 'fit-content' | 'max-content' | 'fill';\n\ninterface SelectBaseProps<Value extends string = string> {\n name: string;\n choices: readonly SelectChoice<Value>[];\n className?: string;\n /** Empty-value hint text shown in the closed control (the native select placeholder). */\n placeholderText?: string;\n /** Supporting text shown below the control and associated with its combobox. */\n hint?: string;\n disabled?: boolean;\n /** Match menu width to the trigger; default menus grow to content within viewport gutters. */\n fitMenu?: boolean;\n /** Render as an unanimated loading skeleton: the label above a static, empty control box. */\n placeholder?: boolean;\n /** Form (default), borderless toolbar, intrinsic navigation, inline, or view-title chrome. */\n presentation?: SelectPresentation;\n size?: SelectSize;\n /** Closed trigger width; omit to keep the presentation's default. */\n triggerWidth?: SelectTriggerWidth;\n /** Show the disclosure caret (default); omit it for a compact icon-only trigger. */\n caret?: boolean;\n /** Let an enclosing ToolbarControlGroup paint the composed focus ring. */\n focusRingOwner?: SelectFocusRingOwner;\n /** Keep the trigger's focus ring inside its box when an ancestor clips overflow. */\n focusRingInset?: boolean;\n /** Maximum closed-control label width in CSS pixels before ellipsis. */\n labelMaxWidth?: number;\n /** Native named-slot assignment when composed inside a web component. */\n slot?: string;\n}\n\n/** One chosen value (the default). */\nexport interface SelectSingleValueProps<Value extends string = string> {\n multiple?: false;\n value: NoInfer<Value>;\n renderSelected?: (choice: SelectChoice<Value>) => SafeHtml;\n /** Show only the selected choice icon while retaining the Select's accessible name. */\n selectedPresentation?: SelectSelectedPresentation;\n triggerIcon?: never;\n selectAllLabel?: never;\n clearLabel?: never;\n}\n\n/**\n * Any number of chosen values. The popup stays open while the person toggles\n * choices and closes on an outside click, Escape, or focus leaving; the closed\n * control summarizes the chosen labels in choice order.\n */\nexport interface SelectMultipleLabelProps<Value extends string = string> {\n multiple: true;\n value: readonly NoInfer<Value>[];\n renderSelected?: never;\n selectedPresentation?: 'label';\n triggerIcon?: never;\n /** Opt in to a footer action that selects every enabled choice. */\n selectAllLabel?: string;\n /** Opt in to a footer action that clears the current selection. */\n clearLabel?: string;\n}\n\n/**\n * A multiple Select drawn as an icon-only toolbar trigger, such as a\n * \"Filter by label\" funnel. No single choice is selected, so the trigger shows\n * a fixed `triggerIcon` naming the menu's purpose; while any choice is chosen\n * a count badge sits beside it, and the combobox's accessible name ends with\n * the chosen labels in choice order.\n */\nexport interface SelectMultipleIconProps<Value extends string = string> {\n multiple: true;\n value: readonly NoInfer<Value>[];\n renderSelected?: never;\n selectedPresentation: 'icon-only';\n /**\n * The trigger's fixed icon, typically a `LucideIcon` naming the menu's\n * purpose (a funnel for a filter), independent of the selection.\n */\n triggerIcon: KerfUiContent;\n /** Opt in to a footer action that selects every enabled choice. */\n selectAllLabel?: string;\n /** Opt in to a footer action that clears the current selection. */\n clearLabel?: string;\n}\n\nexport type SelectMultipleValueProps<Value extends string = string> =\n SelectMultipleLabelProps<Value> | SelectMultipleIconProps<Value>;\n\nexport type SelectProps<Value extends string = string> =\n SelectBaseProps<Value> &\n SelectAccessibleName &\n (SelectSingleValueProps<Value> | SelectMultipleValueProps<Value>);\n\n// The closed wa-select's disclosure glyph: Web Awesome's system `chevron-down`,\n// Font Awesome Free 7.0.0 by @fontawesome (https://fontawesome.com), licensed\n// CC BY 4.0 (https://fontawesome.com/license/free). The placeholder draws the\n// same path so the loading box matches the live control without registering\n// Web Awesome.\nfunction SelectChevron() {\n return (\n <svg viewBox=\"0 0 448 512\" aria-hidden=\"true\">\n <path d=\"M201.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 338.7 54.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z\" />\n </svg>\n );\n}\n\nexport function Select<Value extends string>(props: SelectProps<Value>) {\n const {\n name,\n label,\n ariaLabel,\n choices,\n className = '',\n placeholderText,\n hint,\n disabled = false,\n fitMenu = false,\n placeholder = false,\n presentation = 'form',\n size = 'default',\n triggerWidth,\n caret = true,\n focusRingOwner = 'select',\n focusRingInset = false,\n labelMaxWidth,\n slot,\n } = props;\n const multiple = props.multiple === true;\n const values: readonly Value[] = props.multiple ? props.value : [props.value];\n const renderSelected = props.multiple ? undefined : props.renderSelected;\n const selectedPresentation: SelectSelectedPresentation =\n props.selectedPresentation ?? 'label';\n // A multiple icon-only trigger shows a fixed icon naming the menu's\n // purpose instead of a selected choice's icon.\n const iconTrigger =\n props.multiple && props.selectedPresentation === 'icon-only';\n const triggerIcon = iconTrigger ? props.triggerIcon : undefined;\n if (placeholder) {\n return (\n <div\n class={`kui-select kui-select--placeholder ${className}`.trim()}\n data-component=\"select\"\n data-placeholder=\"true\"\n data-presentation={presentation}\n data-size={size}\n data-trigger-width={triggerWidth}\n data-caret={caret ? undefined : 'false'}\n data-selected-presentation={selectedPresentation}\n data-focus-ring-owner={focusRingOwner}\n data-focus-ring-inset={focusRingInset ? 'true' : undefined}\n aria-busy=\"true\"\n style={\n labelMaxWidth === undefined\n ? undefined\n : `--kui-select-label-max-width:${labelMaxWidth}px`\n }\n slot={slot}\n >\n {label && <span class=\"kui-select__placeholder-label\">{label}</span>}\n <span\n class=\"kui-select__placeholder-box\"\n aria-label={ariaLabel}\n role=\"img\"\n >\n <Skeleton width={em(10)} />\n <span class=\"kui-select__placeholder-chevron\" aria-hidden=\"true\">\n <SelectChevron />\n </span>\n </span>\n {hint && <span class=\"kui-select__placeholder-hint\">{hint}</span>}\n </div>\n );\n }\n // A multiple Select summarizes its choices in the display text instead of\n // leading with one selected icon.\n const selected = multiple\n ? undefined\n : choices.find((choice) => choice.value === values[0] && !choice.disabled);\n const chosenCount = iconTrigger\n ? choices.filter(\n (choice) => !choice.disabled && values.includes(choice.value),\n ).length\n : 0;\n const icon = (choice: SelectChoice<Value>, selectedIcon = false) => (\n <span\n data-key={`${name}:${choice.value}:${selectedIcon ? 'selected' : 'option'}`}\n data-morph-skip\n slot=\"start\"\n class={`kui-select__icon${selectedIcon ? ' kui-select__icon--selected' : ''}`}\n style={choice.color ? `color:${choice.color}` : undefined}\n >\n {choice.icon ? (\n <LucideIcon\n icon={choice.icon}\n name={\n choice.iconName ?? choice.label.toLowerCase().replaceAll(' ', '-')\n }\n />\n ) : null}\n </span>\n );\n const option = (choice: SelectChoice<Value>, index: number) => (\n <>\n {/* Web Awesome sets the divider's role and aria-orientation on its\n host once, so a template that omits them would lose them to the\n next kerf re-render's morph for good. Render them explicitly, with\n the orientation it reflects (see the wa-select note below). */}\n {choice.separatorBefore && index > 0 && (\n <wa-divider\n orientation=\"horizontal\"\n role=\"separator\"\n aria-orientation=\"horizontal\"\n />\n )}\n <wa-option\n value={choice.value}\n selected={multiple && !choice.disabled && values.includes(choice.value)}\n disabled={choice.disabled}\n title={choice.disabled ? choice.disabledReason : undefined}\n >\n {choice.icon ? icon(choice) : null}\n {choice.label}\n </wa-option>\n </>\n );\n const groups = [\n ...new Set(\n choices\n .map((choice) => choice.group)\n .filter((group): group is string => Boolean(group)),\n ),\n ];\n const ungrouped = choices.filter((choice) => !choice.group);\n // Web Awesome names its shadow combobox from the label, not the host's\n // aria-label. Keep ariaLabel-only names available without visible chrome.\n // A multiple Select's value is its selected options (the value attribute\n // holds only one string), kept in sync by @kerfjs/ui/select/register.\n // size/appearance/placement are Web Awesome's defaults, which it reflects\n // onto the host; rendering them keeps a re-render's morph from stripping\n // them and forcing a Lit update to put them back.\n return (\n <wa-select\n size=\"m\"\n appearance=\"outlined\"\n placement=\"bottom\"\n class={`kui-select${renderSelected ? ' kui-select--custom-selected' : ''}${fitMenu ? ' kui-select--fit-menu' : ''}${!label ? ' kui-select--label-hidden' : ''} ${className}`.trim()}\n data-component=\"select\"\n data-presentation={presentation}\n data-size={size}\n data-trigger-width={triggerWidth}\n data-caret={caret ? undefined : 'false'}\n data-selected-presentation={selectedPresentation}\n data-focus-ring-owner={focusRingOwner}\n data-focus-ring-inset={focusRingInset ? 'true' : undefined}\n name={name}\n label={label || ariaLabel}\n aria-label={ariaLabel}\n multiple={multiple}\n value={multiple ? undefined : values[0]}\n placeholder={placeholderText}\n hint={hint}\n disabled={disabled}\n style={\n labelMaxWidth === undefined\n ? undefined\n : `--kui-select-label-max-width:${labelMaxWidth}px`\n }\n slot={slot}\n >\n {iconTrigger && (\n <>\n {/* The accessible name ends with the chosen labels, which\n @kerfjs/ui/select/register writes into the summary. */}\n <span slot=\"label\" data-key={`${name}:trigger-label`}>\n {label || ariaLabel}\n <span class=\"kui-select__name-summary\" data-morph-skip />\n </span>\n <span\n data-key={`${name}:trigger-icon`}\n slot=\"start\"\n class=\"kui-select__icon kui-select__icon--selected kui-select__trigger-icon\"\n >\n {triggerIcon}\n </span>\n {chosenCount > 0 && (\n <Badge slot=\"end\" tone=\"info\" size=\"compact\" ariaHidden>\n {chosenCount}\n </Badge>\n )}\n </>\n )}\n {selected &&\n (renderSelected ? (\n <span\n data-key={`${name}:${values[0]}:custom-selected`}\n slot=\"start\"\n class=\"kui-select__custom-selected\"\n >\n <span class=\"kui-select__custom-selected-content\">\n {renderSelected(selected)}\n </span>\n </span>\n ) : selected.icon ? (\n icon(selected, true)\n ) : null)}\n {ungrouped.map(option)}\n {groups.map((group, index) => (\n <div\n class={`kui-select__group${index > 0 || ungrouped.length > 0 ? ' kui-select__group--separated' : ''}`}\n role=\"group\"\n aria-label={group}\n >\n <span class=\"kui-select__group-title\">{group}</span>\n {choices.filter((choice) => choice.group === group).map(option)}\n </div>\n ))}\n {props.multiple && (props.selectAllLabel || props.clearLabel) && (\n <div\n class=\"kui-select__actions\"\n role=\"group\"\n aria-label={label || ariaLabel}\n >\n {props.selectAllLabel && (\n <button\n class=\"kui-select__action\"\n type=\"button\"\n data-select-action=\"all\"\n >\n {props.selectAllLabel}\n </button>\n )}\n {props.clearLabel && (\n <button\n class=\"kui-select__action\"\n type=\"button\"\n data-select-action=\"clear\"\n >\n {props.clearLabel}\n </button>\n )}\n </div>\n )}\n </wa-select>\n );\n}\n"]}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
// src/components/layout/pane/internal/pane-config-props.ts
|
|
2
|
+
function paneConfigProps(config) {
|
|
3
|
+
return {
|
|
4
|
+
contentElement: config?.contentElement,
|
|
5
|
+
contentLabel: config?.contentLabel,
|
|
6
|
+
separators: config?.separators,
|
|
7
|
+
safeAreaEdges: config?.safeAreaEdges,
|
|
8
|
+
chromeDividers: config?.chromeDividers,
|
|
9
|
+
headerPresentation: config?.headerPresentation,
|
|
10
|
+
appearance: config?.appearance,
|
|
11
|
+
deepInset: config?.deepInset,
|
|
12
|
+
scrollClearance: config?.scrollClearance,
|
|
13
|
+
tabIndex: config?.tabIndex,
|
|
14
|
+
outlined: config?.outlined
|
|
15
|
+
};
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
export { paneConfigProps };
|
|
19
|
+
|
|
20
|
+
//# sourceMappingURL=chunk-UMKV7YVQ.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/layout/pane/internal/pane-config-props.ts"],"names":[],"mappings":";AAgBO,SAAS,gBACd,MAAA,EACqB;AACrB,EAAA,OAAO;AAAA,IACL,gBAAgB,MAAA,EAAQ,cAAA;AAAA,IACxB,cAAc,MAAA,EAAQ,YAAA;AAAA,IACtB,YAAY,MAAA,EAAQ,UAAA;AAAA,IACpB,eAAe,MAAA,EAAQ,aAAA;AAAA,IACvB,gBAAgB,MAAA,EAAQ,cAAA;AAAA,IACxB,oBAAoB,MAAA,EAAQ,kBAAA;AAAA,IAC5B,YAAY,MAAA,EAAQ,UAAA;AAAA,IACpB,WAAW,MAAA,EAAQ,SAAA;AAAA,IACnB,iBAAiB,MAAA,EAAQ,eAAA;AAAA,IACzB,UAAU,MAAA,EAAQ,QAAA;AAAA,IAClB,UAAU,MAAA,EAAQ;AAAA,GACpB;AACF","file":"chunk-UMKV7YVQ.js","sourcesContent":["import type { PaneConfig } from '../pane.js';\n\n/**\n * Every {@link PaneConfig} field, each present (possibly `undefined`). The\n * mapped type makes a new `PaneConfig` field a type error here until it is\n * forwarded, so a composite can never silently drop pane configuration.\n */\ntype ForwardedPaneConfig = {\n [K in keyof Required<PaneConfig>]: PaneConfig[K];\n};\n\n/**\n * The `Pane` props a composite (a Workbench panel or work area, a\n * CollapsiblePanel, a NavStack view) forwards from the app's `PaneConfig`. An\n * omitted or `undefined` field stays `undefined`, so the Pane keeps its default.\n */\nexport function paneConfigProps(\n config: PaneConfig | undefined,\n): ForwardedPaneConfig {\n return {\n contentElement: config?.contentElement,\n contentLabel: config?.contentLabel,\n separators: config?.separators,\n safeAreaEdges: config?.safeAreaEdges,\n chromeDividers: config?.chromeDividers,\n headerPresentation: config?.headerPresentation,\n appearance: config?.appearance,\n deepInset: config?.deepInset,\n scrollClearance: config?.scrollClearance,\n tabIndex: config?.tabIndex,\n outlined: config?.outlined,\n };\n}\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { LucideIcon } from './chunk-
|
|
1
|
+
import { LucideIcon } from './chunk-LOSRXZAH.js';
|
|
2
2
|
import { filterDataAttributes } from './chunk-KH4KEMSP.js';
|
|
3
3
|
import { jsx } from 'kerfjs/jsx-runtime';
|
|
4
4
|
|
|
@@ -42,4 +42,4 @@ function IconButton({
|
|
|
42
42
|
|
|
43
43
|
export { IconButton };
|
|
44
44
|
|
|
45
|
-
//# sourceMappingURL=chunk-
|
|
45
|
+
//# sourceMappingURL=chunk-VFYO3UGZ.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/actions/icon-button/icon-button.tsx"],"names":[],"mappings":";;;;AAYA,IAAM,6BAAA,uBAAoC,GAAA,CAAI;AAAA,EAC5C,gBAAA;AAAA,EACA;AACF,CAAC,CAAA;AAyCM,SAAS,UAAA,CAAW;AAAA,EACzB,IAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,MAAA;AAAA,EACA,UAAA;AAAA,EACA,OAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA,GAAO,QAAA;AAAA,EACP,QAAA,GAAW,KAAA;AAAA,EACX,EAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,iBAAiB,EAAC;AAAA,EAClB;AACF,CAAA,EAAoB;AAClB,EAAA,uBACE,GAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACE,GAAG,oBAAA,CAAqB,cAAA,EAAgB,6BAA6B,CAAA;AAAA,MACtE,EAAA;AAAA,MACA,KAAA,EAAO,CAAA,gBAAA,EAAmB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC3C,gBAAA,EAAe,aAAA;AAAA,MACf,aAAA,EAAa,MAAA;AAAA,MACb,UAAA;AAAA,MACA,OAAA;AAAA,MACA,IAAA;AAAA,MACA,IAAA;AAAA,MACA,UAAU,QAAA,IAAY,MAAA;AAAA,MACtB,IAAA;AAAA,MAEA,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,IAAA,EAAY,IAAA,EAAM,UAAU,KAAA,EAAc;AAAA;AAAA,GACxD;AAEJ","file":"chunk-
|
|
1
|
+
{"version":3,"sources":["../src/components/actions/icon-button/icon-button.tsx"],"names":[],"mappings":";;;;AAYA,IAAM,6BAAA,uBAAoC,GAAA,CAAI;AAAA,EAC5C,gBAAA;AAAA,EACA;AACF,CAAC,CAAA;AAyCM,SAAS,UAAA,CAAW;AAAA,EACzB,IAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,MAAA;AAAA,EACA,UAAA;AAAA,EACA,OAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA,GAAO,QAAA;AAAA,EACP,QAAA,GAAW,KAAA;AAAA,EACX,EAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,iBAAiB,EAAC;AAAA,EAClB;AACF,CAAA,EAAoB;AAClB,EAAA,uBACE,GAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACE,GAAG,oBAAA,CAAqB,cAAA,EAAgB,6BAA6B,CAAA;AAAA,MACtE,EAAA;AAAA,MACA,KAAA,EAAO,CAAA,gBAAA,EAAmB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC3C,gBAAA,EAAe,aAAA;AAAA,MACf,aAAA,EAAa,MAAA;AAAA,MACb,UAAA;AAAA,MACA,OAAA;AAAA,MACA,IAAA;AAAA,MACA,IAAA;AAAA,MACA,UAAU,QAAA,IAAY,MAAA;AAAA,MACtB,IAAA;AAAA,MAEA,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,IAAA,EAAY,IAAA,EAAM,UAAU,KAAA,EAAc;AAAA;AAAA,GACxD;AAEJ","file":"chunk-VFYO3UGZ.js","sourcesContent":["import { filterDataAttributes } from '../../../shared/dom/extension-attributes.js';\nimport {\n LucideIcon,\n type LucideNode,\n} from '../../media/lucide-icon/lucide-icon.js';\n\nexport type IconButtonAppearance =\n 'accent' | 'filled' | 'outlined' | 'filled-outlined' | 'plain';\nexport type IconButtonVariant =\n 'neutral' | 'brand' | 'success' | 'warning' | 'danger';\nexport type IconButtonSize = 'xs' | 's' | 'm' | 'l' | 'xl';\n\nconst iconButtonProtectedAttributes = new Set([\n 'data-component',\n 'data-action',\n]);\n\ntype IconButtonRootAttributes = Readonly<\n Record<`data-${string}`, string | undefined> & {\n 'data-component'?: never;\n 'data-action'?: never;\n }\n>;\n\nexport interface IconButtonProps {\n /** The Lucide-compatible icon node shown alone in the button. */\n icon: LucideNode;\n /** The icon's stable name, as `LucideIcon` takes it. */\n iconName: string;\n /** Accessible name; the button has no visible text, so it is required. */\n label: string;\n /** Delegated `data-action` the application handles. */\n action?: string;\n /** Web Awesome appearance; defaults to Web Awesome's own. */\n appearance?: IconButtonAppearance;\n /** Web Awesome semantic variant; defaults to Web Awesome's own. */\n variant?: IconButtonVariant;\n /** Web Awesome control size; the square follows its control height. */\n size?: IconButtonSize;\n type?: 'button' | 'submit' | 'reset';\n disabled?: boolean;\n id?: string;\n className?: string;\n /** Safe `data-*` metadata; `data-component` and `data-action` stay owned. */\n rootAttributes?: IconButtonRootAttributes;\n /** Native named-slot assignment when composed inside a web component. */\n slot?: string;\n}\n\n/**\n * An icon-only Web Awesome button with a `LucideIcon`: square, one form\n * control height on each side, so it matches an adjacent `wa-input` or\n * `Select`. Web Awesome squares a button only for a lone `wa-icon`; this is\n * the Kerf form for Lucide icons. Register `wa-button` once\n * (`@awesome.me/webawesome/dist/components/button/button.js`).\n */\nexport function IconButton({\n icon,\n iconName,\n label,\n action,\n appearance,\n variant,\n size,\n type = 'button',\n disabled = false,\n id,\n className = '',\n rootAttributes = {},\n slot,\n}: IconButtonProps) {\n return (\n <wa-button\n {...filterDataAttributes(rootAttributes, iconButtonProtectedAttributes)}\n id={id}\n class={`kui-icon-button ${className}`.trim()}\n data-component=\"icon-button\"\n data-action={action}\n appearance={appearance}\n variant={variant}\n size={size}\n type={type}\n disabled={disabled || undefined}\n slot={slot}\n >\n <LucideIcon icon={icon} name={iconName} label={label} />\n </wa-button>\n );\n}\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { remify } from './chunk-
|
|
1
|
+
import { remify } from './chunk-IQSRHXZR.js';
|
|
2
2
|
import { jsx } from 'kerfjs/jsx-runtime';
|
|
3
3
|
|
|
4
4
|
var spinnerSizePixels = {
|
|
@@ -45,4 +45,4 @@ function LoadingSpinner({
|
|
|
45
45
|
|
|
46
46
|
export { LoadingSpinner };
|
|
47
47
|
|
|
48
|
-
//# sourceMappingURL=chunk-
|
|
48
|
+
//# sourceMappingURL=chunk-WVS6CUCT.js.map
|