@kerfjs/ui 5.0.0-beta.76 → 5.0.0-beta.78
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 +15 -0
- package/ai/application-ui-diagnostic-ids-v1.json +3 -0
- package/ai/component-catalog.json +333 -28
- package/ai/component-composition.json +224 -17
- package/ai/components/nav-stack.md +4 -3
- package/ai/components/select.md +1 -0
- package/ai/components/split-view.md +1 -0
- package/ai/components/surface-scaffold.md +11 -2
- package/ai/components/text.md +4 -2
- package/ai/components/toolbar-control-group.md +22 -3
- package/ai/components/toolbar-text.md +21 -4
- package/ai/components/toolbar.md +12 -4
- package/ai/public-api-signatures-v1.md +99 -127
- package/ai/skill.md +37 -3
- package/ai/webawesome-jsx-signatures-v1.md +1 -1
- package/dist/browser/nav-stack.js +2 -0
- package/dist/browser/split-view.js +2 -0
- package/dist/catalog-resources.d.ts +3 -3
- package/dist/catalog.d.ts +3 -3
- package/dist/catalog.js +6 -6
- package/dist/chunk-2GOCOLQL.js +270 -0
- package/dist/chunk-2GOCOLQL.js.map +1 -0
- package/dist/{chunk-ZVYA6TLR.js → chunk-4Y4L5YEI.js} +3 -1
- package/dist/chunk-4Y4L5YEI.js.map +1 -0
- package/dist/{chunk-XIZRXI7N.js → chunk-A7DYEERU.js} +13 -1
- package/dist/chunk-A7DYEERU.js.map +1 -0
- package/dist/{chunk-7QWIJEK5.js → chunk-DSLRNR43.js} +9 -8
- package/dist/chunk-DSLRNR43.js.map +1 -0
- package/dist/{chunk-AOAW55JN.js → chunk-DXQZ3BEO.js} +4 -1
- package/dist/chunk-DXQZ3BEO.js.map +1 -0
- package/dist/chunk-IKCUPTR2.js +170 -0
- package/dist/chunk-IKCUPTR2.js.map +1 -0
- package/dist/{chunk-HGSTMZZ6.js → chunk-JL4BBZP4.js} +5 -4
- package/dist/chunk-JL4BBZP4.js.map +1 -0
- package/dist/{chunk-IVLTEBBT.js → chunk-M6BWQMQY.js} +2 -2
- package/dist/{chunk-IVLTEBBT.js.map → chunk-M6BWQMQY.js.map} +1 -1
- package/dist/{chunk-72LLWYP2.js → chunk-NVKRZ5DI.js} +1 -1
- package/dist/chunk-NVKRZ5DI.js.map +1 -0
- package/dist/{chunk-GO2CZX4M.js → chunk-RRCD3A6G.js} +13 -5
- package/dist/chunk-RRCD3A6G.js.map +1 -0
- package/dist/{chunk-5PAVAR4B.js → chunk-VHXHLZ6R.js} +10 -1
- package/dist/chunk-VHXHLZ6R.js.map +1 -0
- package/dist/collapsible-panel.js +2 -2
- package/dist/index.d.ts +4 -3
- package/dist/index.js +9 -8
- package/dist/list-header.d.ts +1 -0
- package/dist/list-header.js +1 -1
- package/dist/nav-stack-B1Qc2e5q.d.ts +101 -0
- package/dist/nav-stack.d.ts +12 -93
- package/dist/nav-stack.js +5 -1
- package/dist/pane.d.ts +5 -2
- package/dist/pane.js +1 -1
- package/dist/select-register.js +3 -0
- package/dist/select-register.js.map +1 -1
- package/dist/select.d.ts +1 -0
- package/dist/select.js +1 -1
- package/dist/split-view.d.ts +9 -4
- package/dist/split-view.js +7 -3
- package/dist/split-view.js.map +1 -1
- package/dist/styles/components/actions/toolbar/toolbar.css +32 -0
- package/dist/styles/components/actions/toolbar-control-group/toolbar-control-group.css +105 -7
- package/dist/styles/components/actions/toolbar-text/toolbar-text.css +17 -0
- package/dist/styles/components/layout/pane/pane.css +7 -0
- package/dist/styles/components/navigation/nav-stack/nav-stack.css +17 -12
- package/dist/styles/components/navigation/tab-scaffold/tab-scaffold.css +17 -0
- package/dist/styles/components/surfaces/surface-scaffold/surface-scaffold.css +55 -0
- package/dist/styles/components/typography/text/text.css +19 -0
- package/dist/styles/nav-stack.css +17 -12
- package/dist/styles/pane.css +7 -0
- package/dist/styles/surface-scaffold.css +55 -0
- package/dist/styles/tab-scaffold.css +17 -0
- package/dist/styles/text.css +19 -0
- package/dist/styles/toolbar-control-group.css +105 -7
- package/dist/styles/toolbar-text.css +17 -0
- package/dist/styles/toolbar.css +32 -0
- package/dist/surface-scaffold-register.d.ts +4 -0
- package/dist/surface-scaffold-register.js +59 -0
- package/dist/surface-scaffold-register.js.map +1 -0
- package/dist/surface-scaffold.d.ts +10 -2
- package/dist/surface-scaffold.js +1 -1
- package/dist/tab-scaffold.d.ts +2 -0
- package/dist/tab-scaffold.js +1 -0
- package/dist/tab-scaffold.js.map +1 -1
- package/dist/text.d.ts +5 -2
- package/dist/text.js +1 -1
- package/dist/toolbar-control-group.d.ts +14 -2
- package/dist/toolbar-control-group.js +1 -1
- package/dist/toolbar-text.d.ts +10 -2
- package/dist/toolbar-text.js +1 -1
- package/dist/wire-nav-stack.js +58 -22
- package/dist/wire-nav-stack.js.map +1 -1
- package/dist/wire-toolbar-visibility.d.ts +13 -0
- package/dist/wire-toolbar-visibility.js +3 -0
- package/dist/wire-toolbar-visibility.js.map +1 -0
- package/dist/workbench.d.ts +5 -13
- package/dist/workbench.js +1 -1
- package/docs/accessibility.md +15 -0
- package/docs/collapsible-panel.md +4 -0
- package/docs/component-contract.md +38 -0
- package/docs/component-selection.md +56 -2
- package/docs/design/templates/toolbar/width-visibility-320-dark.svg +1 -0
- package/docs/design/templates/toolbar/width-visibility-320.svg +1 -0
- package/docs/design/templates/toolbar/width-visibility-600-dark.svg +1 -0
- package/docs/design/templates/toolbar/width-visibility-600.svg +1 -0
- package/docs/design/templates/toolbar-control-group/icon-tile-brand-dark.svg +1 -0
- package/docs/design/templates/toolbar-control-group/icon-tile-brand.svg +1 -0
- package/docs/design/templates/toolbar-control-group/icon-tile-danger-dark.svg +1 -0
- package/docs/design/templates/toolbar-control-group/icon-tile-danger.svg +1 -0
- package/docs/design/templates/toolbar-control-group/icon-tile-neutral-dark.svg +1 -0
- package/docs/design/templates/toolbar-control-group/icon-tile-neutral.svg +1 -0
- package/docs/design/templates/toolbar-control-group/icon-tile-success-dark.svg +1 -0
- package/docs/design/templates/toolbar-control-group/icon-tile-success.svg +1 -0
- package/docs/design/templates/toolbar-control-group/icon-tile-warning-dark.svg +1 -0
- package/docs/design/templates/toolbar-control-group/icon-tile-warning.svg +1 -0
- 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/dark-tone-dark.svg +1 -0
- package/docs/design/templates/toolbar-text/dark-tone.svg +1 -0
- 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.md +2 -0
- package/docs/layout.md +32 -1
- package/docs/nav-stack.md +35 -19
- package/docs/recipes.md +5 -1
- package/docs/split-view.md +7 -4
- package/docs/surface-scaffold.md +46 -0
- package/docs/tab-scaffold.md +57 -0
- package/docs/ui-doctor.md +23 -0
- package/docs/workbench.md +3 -2
- package/doctor/component-style-checks.mjs +224 -0
- package/doctor/index.mjs +42 -13
- package/llms.txt +34 -0
- package/package.json +11 -2
- package/ux-demo/recipes/list-detail-dialog.tsx +4 -0
- package/ux-demo/recipes/navigation-stack.tsx +2 -2
- package/dist/chunk-5PAVAR4B.js.map +0 -1
- package/dist/chunk-72LLWYP2.js.map +0 -1
- package/dist/chunk-7QWIJEK5.js.map +0 -1
- package/dist/chunk-AOAW55JN.js.map +0 -1
- package/dist/chunk-GO2CZX4M.js.map +0 -1
- package/dist/chunk-HGSTMZZ6.js.map +0 -1
- package/dist/chunk-SJY7KC45.js +0 -123
- package/dist/chunk-SJY7KC45.js.map +0 -1
- package/dist/chunk-XIZRXI7N.js.map +0 -1
- package/dist/chunk-ZVYA6TLR.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/collections/list-header/list-header.tsx"],"names":[],"mappings":"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","file":"chunk-IVLTEBBT.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 | { count?: never; countLabel?: never; badge: SafeHtml; status?: never }\n | { count?: never; countLabel?: never; badge?: never; status?: SafeHtml };\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 =\n normalizedCount === undefined ? (status ?? badge) : undefined;\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 = placeholder ? (\n (normalizedCount !== undefined || renderedBadge) && (\n <Badge size=\"compact\" tone={badgeTone}>\n <Skeleton width={em(1.75)} />\n </Badge>\n )\n ) : normalizedCount === undefined ? (\n renderedBadge && (\n <Badge size=\"compact\" tone={badgeTone}>\n {renderedBadge}\n </Badge>\n )\n ) : (\n <Badge size=\"compact\" tone={badgeTone} ariaHidden>\n {normalizedCount}\n </Badge>\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(Boolean(renderedBadge))}\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(Boolean(renderedBadge))}\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":"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","file":"chunk-M6BWQMQY.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 | { count?: never; countLabel?: never; badge: SafeHtml; status?: never }\n | { count?: never; countLabel?: never; badge?: never; status?: SafeHtml };\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 =\n normalizedCount === undefined ? (status ?? badge) : undefined;\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 = placeholder ? (\n (normalizedCount !== undefined || renderedBadge) && (\n <Badge size=\"compact\" tone={badgeTone}>\n <Skeleton width={em(1.75)} />\n </Badge>\n )\n ) : normalizedCount === undefined ? (\n renderedBadge && (\n <Badge size=\"compact\" tone={badgeTone}>\n {renderedBadge}\n </Badge>\n )\n ) : (\n <Badge size=\"compact\" tone={badgeTone} ariaHidden>\n {normalizedCount}\n </Badge>\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(Boolean(renderedBadge))}\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(Boolean(renderedBadge))}\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"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/forms/select/select.tsx"],"names":[],"mappings":"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","file":"chunk-NVKRZ5DI.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"]}
|
|
@@ -49,6 +49,7 @@ function ToolbarControlGroup({
|
|
|
49
49
|
single = false,
|
|
50
50
|
appearance = "contained",
|
|
51
51
|
tone = "default",
|
|
52
|
+
tileTone,
|
|
52
53
|
buttonAppearance = "plain",
|
|
53
54
|
shape = "pill",
|
|
54
55
|
size = "default",
|
|
@@ -60,7 +61,10 @@ function ToolbarControlGroup({
|
|
|
60
61
|
nestedDropdown = false,
|
|
61
62
|
menuInset = "standard",
|
|
62
63
|
overflow = "visible",
|
|
64
|
+
expandedOverflow = "clip",
|
|
63
65
|
visibility = "always",
|
|
66
|
+
hideBelow,
|
|
67
|
+
showBelow,
|
|
64
68
|
sizing = "content",
|
|
65
69
|
placement = "start",
|
|
66
70
|
growBasis,
|
|
@@ -84,6 +88,7 @@ function ToolbarControlGroup({
|
|
|
84
88
|
"aria-label": label,
|
|
85
89
|
"data-appearance": appearance,
|
|
86
90
|
"data-tone": tone,
|
|
91
|
+
"data-tile-tone": tileTone,
|
|
87
92
|
"data-button-appearance": buttonAppearance,
|
|
88
93
|
"data-expanded": String(expanded),
|
|
89
94
|
"data-single": String(single),
|
|
@@ -97,7 +102,10 @@ function ToolbarControlGroup({
|
|
|
97
102
|
"data-nested-dropdown": String(nestedDropdown),
|
|
98
103
|
"data-menu-inset": menuInset,
|
|
99
104
|
"data-overflow": overflow,
|
|
105
|
+
"data-expanded-overflow": expandedOverflow === "visible" ? "visible" : void 0,
|
|
100
106
|
"data-visibility": visibility,
|
|
107
|
+
"data-hide-below": hideBelow,
|
|
108
|
+
"data-show-below": showBelow,
|
|
101
109
|
"data-sizing": sizing,
|
|
102
110
|
"data-placement": placement,
|
|
103
111
|
"data-scrim": String(scrim),
|
|
@@ -119,13 +127,13 @@ function ToolbarControlGroup({
|
|
|
119
127
|
]
|
|
120
128
|
}
|
|
121
129
|
);
|
|
122
|
-
const renderedGroup =
|
|
123
|
-
|
|
124
|
-
renderedGroup,
|
|
130
|
+
const renderedGroup = busy ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
131
|
+
group,
|
|
125
132
|
/* @__PURE__ */ jsx("span", { class: "kui-toolbar-control-group__busy-status", role: "status", children: busyLabel })
|
|
126
|
-
] }) :
|
|
133
|
+
] }) : group;
|
|
134
|
+
return relocateOnCollapse ? markRelocatableGroup(renderedGroup) : renderedGroup;
|
|
127
135
|
}
|
|
128
136
|
|
|
129
137
|
export { ToolbarActionLink, ToolbarControlGroup, isRelocatableGroup };
|
|
130
138
|
|
|
131
|
-
//# sourceMappingURL=chunk-
|
|
139
|
+
//# sourceMappingURL=chunk-RRCD3A6G.js.map
|
|
@@ -0,0 +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-RRCD3A6G.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 = 'raised' | 'filled' | 'outline';\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 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"]}
|
|
@@ -5,6 +5,9 @@ import { jsx } from 'kerfjs/jsx-runtime';
|
|
|
5
5
|
function ToolbarText({
|
|
6
6
|
text,
|
|
7
7
|
size = "default",
|
|
8
|
+
tone = "default",
|
|
9
|
+
hideBelow,
|
|
10
|
+
showBelow,
|
|
8
11
|
className = "",
|
|
9
12
|
id,
|
|
10
13
|
headingLevel,
|
|
@@ -25,6 +28,9 @@ function ToolbarText({
|
|
|
25
28
|
class: `kui-toolbar-text ${className}`.trim(),
|
|
26
29
|
"data-component": "toolbar-text",
|
|
27
30
|
"data-size": size,
|
|
31
|
+
"data-hide-below": hideBelow,
|
|
32
|
+
"data-show-below": showBelow,
|
|
33
|
+
"data-tone": tone === "default" ? void 0 : tone,
|
|
28
34
|
"data-fill": fill ? "true" : void 0,
|
|
29
35
|
"data-ellipsis": ellipsis ? void 0 : "false",
|
|
30
36
|
"data-action": action,
|
|
@@ -39,6 +45,9 @@ function ToolbarText({
|
|
|
39
45
|
class: `kui-toolbar-text ${className}`.trim(),
|
|
40
46
|
"data-component": "toolbar-text",
|
|
41
47
|
"data-size": size,
|
|
48
|
+
"data-hide-below": hideBelow,
|
|
49
|
+
"data-show-below": showBelow,
|
|
50
|
+
"data-tone": tone === "default" ? void 0 : tone,
|
|
42
51
|
"data-fill": fill ? "true" : void 0,
|
|
43
52
|
"data-wrap": wrap ? "true" : void 0,
|
|
44
53
|
"data-ellipsis": ellipsis ? void 0 : "false",
|
|
@@ -57,4 +66,4 @@ function ToolbarText({
|
|
|
57
66
|
|
|
58
67
|
export { ToolbarText };
|
|
59
68
|
|
|
60
|
-
//# sourceMappingURL=chunk-
|
|
69
|
+
//# sourceMappingURL=chunk-VHXHLZ6R.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/actions/toolbar-text/toolbar-text.tsx"],"names":[],"mappings":";;;;AAsEO,SAAS,WAAA,CAAY;AAAA,EAC1B,IAAA;AAAA,EACA,IAAA,GAAO,SAAA;AAAA,EACP,IAAA,GAAO,SAAA;AAAA,EACP,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,EAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA,GAAc,KAAA;AAAA,EACd,IAAA,GAAO,KAAA;AAAA,EACP,QAAA,GAAW,IAAA;AAAA,EACX,QAAA,GAAW,IAAA;AAAA,EACX,IAAA,GAAO,KAAA;AAAA,EACP,IAAA;AAAA,EACA;AACF,CAAA,EAAqB;AACnB,EAAA,MAAM,MAAA,GAAS,IAAA,IAAQ,QAAA,IAAY,IAAA,IAAQ,QAAA,GAAW,CAAA;AACtD,EAAA,IAAI,MAAA,KAAW,MAAA;AACb,IAAA,uBACE,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAK,QAAA;AAAA,QACL,KAAA,EAAO,CAAA,iBAAA,EAAoB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,QAC5C,gBAAA,EAAe,cAAA;AAAA,QACf,WAAA,EAAW,IAAA;AAAA,QACX,iBAAA,EAAiB,SAAA;AAAA,QACjB,iBAAA,EAAiB,SAAA;AAAA,QACjB,WAAA,EAAW,IAAA,KAAS,SAAA,GAAY,MAAA,GAAY,IAAA;AAAA,QAC5C,WAAA,EAAW,OAAO,MAAA,GAAS,MAAA;AAAA,QAC3B,eAAA,EAAe,WAAW,MAAA,GAAY,OAAA;AAAA,QACtC,aAAA,EAAa,MAAA;AAAA,QACb,EAAA;AAAA,QACA,IAAA;AAAA,QAEA,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,wBAAA,EAA0B,QAAA,EAAA,IAAA,EAAK;AAAA;AAAA,KAC7C;AAEJ,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,iBAAA,EAAoB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAC5C,gBAAA,EAAe,cAAA;AAAA,MACf,WAAA,EAAW,IAAA;AAAA,MACX,iBAAA,EAAiB,SAAA;AAAA,MACjB,iBAAA,EAAiB,SAAA;AAAA,MACjB,WAAA,EAAW,IAAA,KAAS,SAAA,GAAY,MAAA,GAAY,IAAA;AAAA,MAC5C,WAAA,EAAW,OAAO,MAAA,GAAS,MAAA;AAAA,MAC3B,WAAA,EAAW,OAAO,MAAA,GAAS,MAAA;AAAA,MAC3B,eAAA,EAAe,WAAW,MAAA,GAAY,OAAA;AAAA,MACtC,gBAAA,EAAgB,MAAA,GAAS,MAAA,CAAO,QAAQ,CAAA,GAAI,MAAA;AAAA,MAC5C,KAAA,EAAO,MAAA,GAAS,CAAA,6BAAA,EAAgC,QAAQ,CAAA,CAAA,GAAK,MAAA;AAAA,MAC7D,kBAAA,EAAkB,cAAc,MAAA,GAAS,MAAA;AAAA,MACzC,EAAA;AAAA,MACA,IAAA,EAAM,eAAe,SAAA,GAAY,MAAA;AAAA,MACjC,YAAA,EAAY,YAAA,GAAe,MAAA,CAAO,YAAY,CAAA,GAAI,MAAA;AAAA,MAClD,WAAA,EAAW,cAAc,MAAA,GAAS,MAAA;AAAA,MAClC,IAAA;AAAA,MAEC,QAAA,EAAA,WAAA,mBACC,GAAA,CAAC,QAAA,EAAA,EAAS,KAAA,EAAO,EAAA,CAAG,CAAC,CAAA,EAAG,CAAA,mBAExB,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAM,wBAAA,EAA0B,QAAA,EAAA,IAAA,EAAK;AAAA;AAAA,GAE/C;AAEJ","file":"chunk-VHXHLZ6R.js","sourcesContent":["import { type CssLength, em } from '../../../shared/styles/css-values.js';\nimport { Skeleton } from '../../feedback/skeleton/skeleton.js';\n\nexport type ToolbarTextSize =\n 'xlarge' | 'xlarge-fixed' | 'large' | 'default' | 'small' | 'xsmall';\n\nexport type ToolbarTextTone = 'default' | 'dark';\n\n/** ARIA heading level for a title exposed as a heading landmark. */\nexport type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;\n\ninterface ToolbarTextBaseProps {\n text: string;\n size?: ToolbarTextSize;\n /** Use dark-toolbar foregrounds on a dark or photo-backed toolbar. */\n tone?: ToolbarTextTone;\n /** Hide below this Toolbar content width; requires wireToolbarVisibility. */\n hideBelow?: CssLength;\n /** Show only below this Toolbar content width; requires wireToolbarVisibility. */\n showBelow?: CssLength;\n className?: string;\n /** Optional id, e.g. so a dialog can reference the title via aria-labelledby. */\n id?: string;\n /**\n * Show a trailing ellipsis (…) where the text is truncated — on the single line\n * (default), or at the `maxLines` boundary when wrapping. Set false to hard-clip\n * instead. Default true.\n */\n ellipsis?: boolean;\n /**\n * Grow to fill the free space of the flex row it sits in (a Toolbar zone),\n * truncating at the space left by its siblings instead of taking only its\n * text's width. Default false.\n */\n fill?: boolean;\n /** Native named-slot assignment when composed inside a web component. */\n slot?: string;\n /**\n * Cap wrapped text to this many lines, truncating past it. Only takes effect with\n * `wrap`; ignored on a single line. `null`/omitted wraps without a line cap. Default null.\n */\n}\n\ntype ToolbarTextWrappingProps =\n | {\n /** Wrap onto multiple lines; combine with `maxLines` to cap them. */\n wrap: true;\n maxLines?: number | null;\n }\n | { wrap?: false; maxLines?: never };\n\nexport type ToolbarTextProps = ToolbarTextBaseProps &\n (\n | ({\n action?: never;\n /** Expose `role=\"heading\"` and `aria-level` on read-only text. */\n headingLevel?: HeadingLevel;\n /** Render an unanimated loading skeleton instead of the text. */\n placeholder?: boolean;\n } & ToolbarTextWrappingProps)\n | {\n /** Render a native button with this delegated action; the app owns editing. */\n action: string;\n headingLevel?: never;\n placeholder?: never;\n wrap?: never;\n maxLines?: never;\n }\n );\n\nexport function ToolbarText({\n text,\n size = 'default',\n tone = 'default',\n hideBelow,\n showBelow,\n className = '',\n id,\n headingLevel,\n placeholder = false,\n wrap = false,\n ellipsis = true,\n maxLines = null,\n fill = false,\n slot,\n action,\n}: ToolbarTextProps) {\n const capped = wrap && maxLines != null && maxLines > 0;\n if (action !== undefined)\n return (\n <button\n type=\"button\"\n class={`kui-toolbar-text ${className}`.trim()}\n data-component=\"toolbar-text\"\n data-size={size}\n data-hide-below={hideBelow}\n data-show-below={showBelow}\n data-tone={tone === 'default' ? undefined : tone}\n data-fill={fill ? 'true' : undefined}\n data-ellipsis={ellipsis ? undefined : 'false'}\n data-action={action}\n id={id}\n slot={slot}\n >\n <span class=\"kui-toolbar-text__text\">{text}</span>\n </button>\n );\n return (\n <span\n class={`kui-toolbar-text ${className}`.trim()}\n data-component=\"toolbar-text\"\n data-size={size}\n data-hide-below={hideBelow}\n data-show-below={showBelow}\n data-tone={tone === 'default' ? undefined : tone}\n data-fill={fill ? 'true' : undefined}\n data-wrap={wrap ? 'true' : undefined}\n data-ellipsis={ellipsis ? undefined : 'false'}\n data-max-lines={capped ? String(maxLines) : undefined}\n style={capped ? `--kui-toolbar-text-max-lines:${maxLines}` : undefined}\n data-placeholder={placeholder ? 'true' : undefined}\n id={id}\n role={headingLevel ? 'heading' : undefined}\n aria-level={headingLevel ? String(headingLevel) : undefined}\n aria-busy={placeholder ? 'true' : undefined}\n slot={slot}\n >\n {placeholder ? (\n <Skeleton width={em(8)} />\n ) : (\n <span class=\"kui-toolbar-text__text\">{text}</span>\n )}\n </span>\n );\n}\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { collapsiblePanelToggleIcon, composedPanelBody, relocatedPanelGroups } from './chunk-
|
|
2
|
-
export { collapsiblePanelToggleIcon } from './chunk-
|
|
1
|
+
import { collapsiblePanelToggleIcon, composedPanelBody, relocatedPanelGroups } from './chunk-JL4BBZP4.js';
|
|
2
|
+
export { collapsiblePanelToggleIcon } from './chunk-JL4BBZP4.js';
|
|
3
3
|
|
|
4
4
|
|
|
5
5
|
|
package/dist/index.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
export { FloatingToolbar, FloatingToolbarPosition, FloatingToolbarProps } from './floating-toolbar.js';
|
|
2
2
|
export { PopupMenu, PopupMenuDivider, PopupMenuElement, PopupMenuEntry, PopupMenuHeading, PopupMenuItem, PopupMenuPlacement, PopupMenuProps, closePopupMenu, openPopupMenuAt } from './popup-menu.js';
|
|
3
3
|
export { Toolbar, ToolbarConfig, ToolbarPosition, ToolbarProps } from './toolbar.js';
|
|
4
|
-
export { ToolbarActionLink, ToolbarActionLinkProps, ToolbarControlGroup, ToolbarControlGroupAppearance, ToolbarControlGroupButtonAppearance, ToolbarControlGroupContent, ToolbarControlGroupDensity, ToolbarControlGroupMenuInset, ToolbarControlGroupOverflow, ToolbarControlGroupProps, ToolbarControlGroupSelectedChrome, ToolbarControlGroupSelectedTone, ToolbarControlGroupShape, ToolbarControlGroupSize, ToolbarControlGroupTone, ToolbarControlGroupVisibility } from './toolbar-control-group.js';
|
|
5
|
-
export { HeadingLevel, ToolbarText, ToolbarTextProps, ToolbarTextSize } from './toolbar-text.js';
|
|
4
|
+
export { ToolbarActionLink, ToolbarActionLinkProps, ToolbarControlGroup, ToolbarControlGroupAppearance, ToolbarControlGroupButtonAppearance, ToolbarControlGroupContent, ToolbarControlGroupDensity, ToolbarControlGroupExpandedOverflow, ToolbarControlGroupMenuInset, ToolbarControlGroupOverflow, ToolbarControlGroupProps, ToolbarControlGroupSelectedChrome, ToolbarControlGroupSelectedTone, ToolbarControlGroupShape, ToolbarControlGroupSize, ToolbarControlGroupTileTone, ToolbarControlGroupTone, ToolbarControlGroupVisibility } from './toolbar-control-group.js';
|
|
5
|
+
export { HeadingLevel, ToolbarText, ToolbarTextProps, ToolbarTextSize, ToolbarTextTone } from './toolbar-text.js';
|
|
6
6
|
export { List, ListConfig, ListProps } from './list.js';
|
|
7
7
|
export { ListActionRow, ListActionRowProps } from './list-action-row.js';
|
|
8
8
|
export { ListHeader, ListHeaderProps } from './list-header.js';
|
|
@@ -34,10 +34,11 @@ export { TabActivation, TabBar, TabBarAllocation, TabBarPresentation, TabBarProp
|
|
|
34
34
|
export { TabDropPosition, TabReorder, TabReorderSource, WireTabBarsOptions, reorderTabs, wireTabBars } from './wire-tab-bars.js';
|
|
35
35
|
export { ContentItem, ContentItemAppearance, ContentItemFrame, ContentItemProps, ContentItemSelectionMode, ContentItemShape } from './content-item.js';
|
|
36
36
|
export { SunkenPanel, SunkenPanelProps, SunkenPanelShape } from './sunken-panel.js';
|
|
37
|
-
export { DialogSurface, DialogSurfacePresentation, DialogSurfaceProps, DialogSurfaceSize, PopupSurface, PopupSurfaceInset, PopupSurfaceProps, SurfaceInset } from './surface-scaffold.js';
|
|
37
|
+
export { DialogSurface, DialogSurfaceMaxHeight, DialogSurfacePresentation, DialogSurfaceProps, DialogSurfaceSize, PopupSurface, PopupSurfaceInset, PopupSurfaceProps, SurfaceInset } from './surface-scaffold.js';
|
|
38
38
|
export { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
|
|
39
39
|
export { CssColor, CssFlex, CssFlexBasis, CssFlexKeyword, CssForegroundColor, CssLength, CssLengthExpression, CssSize, CssSizeKeyword, CssValue, UiColor, UiColorName, UiForegroundColorName, UiSpaceName, calc, colorVar, em, flex, foregroundColor, foregroundColorVar, lengthVar, pct, plus, px, rem, space, uiColor } from './css-values.js';
|
|
40
40
|
export { ScrollDividerTarget, WireScrollDividersOptions, wireScrollDividers } from './wire-scroll-dividers.js';
|
|
41
|
+
export { wireToolbarVisibility } from './wire-toolbar-visibility.js';
|
|
41
42
|
export { H as HorizontalAlignment, L as ListVerticalAlignment, V as VerticalAlignment } from './flex-alignment-4ms8ZbV8.js';
|
|
42
43
|
export { S as SemanticTone } from './semantic-tone-CdW013KF.js';
|
|
43
44
|
export { S as Sides } from './sides-BPSWde0A.js';
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export { wireTokenSearchFields } from './chunk-VLPE6OPN.js';
|
|
2
|
+
export { wireToolbarVisibility } from './chunk-2GOCOLQL.js';
|
|
2
3
|
export { wireResizableRegions } from './chunk-GS2QD3N7.js';
|
|
3
4
|
|
|
4
5
|
export { wireScrollDividers } from './chunk-QYXKMLHO.js';
|
|
@@ -9,10 +10,10 @@ export { ValueTable, ValueTableRow } from './chunk-H7ZJEI3H.js';
|
|
|
9
10
|
export { Spacer } from './chunk-75I3SNUJ.js';
|
|
10
11
|
export { StateBanner } from './chunk-ARZ4RSQO.js';
|
|
11
12
|
export { SunkenPanel } from './chunk-HPREYDKV.js';
|
|
12
|
-
export { DialogSurface, PopupSurface } from './chunk-
|
|
13
|
+
export { DialogSurface, PopupSurface } from './chunk-A7DYEERU.js';
|
|
13
14
|
export { TabBar } from './chunk-JOR5LGYE.js';
|
|
14
15
|
export { SegmentedControl } from './chunk-NS2TBYM4.js';
|
|
15
|
-
export { Select } from './chunk-
|
|
16
|
+
export { Select } from './chunk-NVKRZ5DI.js';
|
|
16
17
|
export { ListInsetControl } from './chunk-AN5IWMTM.js';
|
|
17
18
|
export { EmptyState } from './chunk-YLJ6X3AC.js';
|
|
18
19
|
export { Grid } from './chunk-VR7MWD2X.js';
|
|
@@ -21,22 +22,22 @@ export { AppTab } from './chunk-HFLGWMG3.js';
|
|
|
21
22
|
export { PopupMenu, closePopupMenu, openPopupMenuAt } from './chunk-NJZMR7HM.js';
|
|
22
23
|
export { ResizableRegion, clampRegionSize, resizeRegionFromPointer } from './chunk-Y6KT7ZTR.js';
|
|
23
24
|
export { Row } from './chunk-5D3WDMIK.js';
|
|
24
|
-
export { ListHeader } from './chunk-
|
|
25
|
-
export { FieldLabel, Text } from './chunk-
|
|
25
|
+
export { ListHeader } from './chunk-M6BWQMQY.js';
|
|
26
|
+
export { FieldLabel, Text } from './chunk-4Y4L5YEI.js';
|
|
26
27
|
export { ListInsetText } from './chunk-NMWDHZVM.js';
|
|
27
28
|
export { ListItem, ListItemLink } from './chunk-HFQDSSED.js';
|
|
28
|
-
export { ToolbarText } from './chunk-
|
|
29
|
+
export { ToolbarText } from './chunk-VHXHLZ6R.js';
|
|
29
30
|
export { DisclosureArrow } from './chunk-I4SDIMFA.js';
|
|
30
31
|
export { FloatingToolbar } from './chunk-S3ECMF23.js';
|
|
31
32
|
|
|
32
33
|
export { Skeleton } from './chunk-EFDCALR3.js';
|
|
33
34
|
export { Badge } from './chunk-J3AWE5I4.js';
|
|
34
35
|
export { Chip } from './chunk-DQDTZE4W.js';
|
|
35
|
-
export {
|
|
36
|
+
export { ToolbarActionLink, ToolbarControlGroup } from './chunk-RRCD3A6G.js';
|
|
37
|
+
export { Toolbar } from './chunk-BYHGRKC3.js';
|
|
38
|
+
export { Pane } from './chunk-DXQZ3BEO.js';
|
|
36
39
|
export { List } from './chunk-NVRJ7C3W.js';
|
|
37
40
|
|
|
38
|
-
export { ToolbarActionLink, ToolbarControlGroup } from './chunk-GO2CZX4M.js';
|
|
39
|
-
export { Toolbar } from './chunk-BYHGRKC3.js';
|
|
40
41
|
export { LucideIcon } from './chunk-PQQQXJGV.js';
|
|
41
42
|
export { LoadingSpinner } from './chunk-3RE2JMZU.js';
|
|
42
43
|
export { ContentItem } from './chunk-VLQUXZKA.js';
|
package/dist/list-header.d.ts
CHANGED
package/dist/list-header.js
CHANGED
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
import * as kerfjs from 'kerfjs';
|
|
2
|
+
import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
|
|
3
|
+
import { ListConfig } from './list.js';
|
|
4
|
+
import { PaneConfig } from './pane.js';
|
|
5
|
+
import { c as PanelBottomToolbar } from './panel-toolbar-CL9tYOkh.js';
|
|
6
|
+
import { ToolbarConfig } from './toolbar.js';
|
|
7
|
+
import { ToolbarTextSize, HeadingLevel } from './toolbar-text.js';
|
|
8
|
+
|
|
9
|
+
/** Content and chrome shared by a navigation view and a static workbench panel. */
|
|
10
|
+
interface NavPane<TToolbar, TBottomToolbar> {
|
|
11
|
+
content: KerfUiContent;
|
|
12
|
+
toolbar?: TToolbar;
|
|
13
|
+
header?: KerfUiContent;
|
|
14
|
+
headerList?: ListConfig;
|
|
15
|
+
footer?: KerfUiContent;
|
|
16
|
+
footerList?: ListConfig;
|
|
17
|
+
bottomToolbar?: TBottomToolbar;
|
|
18
|
+
pane?: PaneConfig;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
/**
|
|
22
|
+
* One entry in a {@link NavStack}. The app owns the stack as an array (usually a
|
|
23
|
+
* signal); `NavStack` renders it and `wireNavStack` animates the transitions.
|
|
24
|
+
*/
|
|
25
|
+
interface NavStackView extends NavPane<NavStackViewToolbar, PanelBottomToolbar> {
|
|
26
|
+
/** Stable identity for keyed reconcile and transition direction. */
|
|
27
|
+
key: string;
|
|
28
|
+
}
|
|
29
|
+
/** Per-view top toolbar. The stack supplies its back control before `leading`. */
|
|
30
|
+
interface NavStackViewToolbar extends NavStackToolbarConfig {
|
|
31
|
+
title?: string;
|
|
32
|
+
leading?: KerfUiContent;
|
|
33
|
+
center?: KerfUiContent;
|
|
34
|
+
trailing?: KerfUiContent;
|
|
35
|
+
}
|
|
36
|
+
/** A view's structured bottom toolbar; it cross-fades on navigation. */
|
|
37
|
+
type NavStackViewBottomToolbar = PanelBottomToolbar;
|
|
38
|
+
/**
|
|
39
|
+
* The top toolbar's configuration. Its `ToolbarConfig` forwards to the real
|
|
40
|
+
* `Toolbar` the stack renders; by default that toolbar draws no divider and
|
|
41
|
+
* claims the top and side safe-area edges the stack still touches.
|
|
42
|
+
*/
|
|
43
|
+
interface NavStackToolbarConfig extends ToolbarConfig {
|
|
44
|
+
/** Accessible name of the top toolbar (default: none). */
|
|
45
|
+
label?: string;
|
|
46
|
+
/** Size of the view title's `ToolbarText` (default `large`). */
|
|
47
|
+
titleSize?: ToolbarTextSize;
|
|
48
|
+
/** Expose the view title as a heading at this level (default: a plain span). */
|
|
49
|
+
headingLevel?: HeadingLevel;
|
|
50
|
+
}
|
|
51
|
+
interface NavStackProps {
|
|
52
|
+
id: string;
|
|
53
|
+
/** Accessible name for the stack region. */
|
|
54
|
+
label: string;
|
|
55
|
+
/** The stack, root first; the last entry is the active top view. */
|
|
56
|
+
views: NavStackView[];
|
|
57
|
+
/** Accessible label for the icon-only back control (default "Back"). */
|
|
58
|
+
backLabel?: string;
|
|
59
|
+
/** The back control's icon (default a chevron-left `LucideIcon`). */
|
|
60
|
+
backIcon?: KerfUiContent;
|
|
61
|
+
/**
|
|
62
|
+
* Visible text beside the back icon, such as the previous view's title
|
|
63
|
+
* (default: icon only). When set, the text names the control and
|
|
64
|
+
* `backLabel` is not used.
|
|
65
|
+
*/
|
|
66
|
+
backText?: string;
|
|
67
|
+
/** The top toolbar's configuration, forwarded to its `Toolbar`. */
|
|
68
|
+
toolbarConfig?: NavStackToolbarConfig;
|
|
69
|
+
/** Persistent last group in every view's top toolbar, supplied by a hosting panel. */
|
|
70
|
+
panelToggle?: KerfUiContent;
|
|
71
|
+
/** Hide the top toolbar entirely (rare — a fully custom-chrome view). */
|
|
72
|
+
hideToolbar?: boolean;
|
|
73
|
+
/** Optional persistent bottom toolbar used when the active view does not provide one. */
|
|
74
|
+
bottomToolbar?: NavStackViewBottomToolbar;
|
|
75
|
+
/**
|
|
76
|
+
* The line under the top chrome and over the bottom toolbar, where they
|
|
77
|
+
* meet the active view. `scroll` (default) shows the chrome's line only
|
|
78
|
+
* while the view's content is scrolled beneath it, and the bottom
|
|
79
|
+
* toolbar's only while more content lies below — never when the content
|
|
80
|
+
* fits — once `wireScrollDividers` (`@kerfjs/ui/wire-scroll-dividers`) is
|
|
81
|
+
* wired above the stack; unwired, neither shows. `always` shows both
|
|
82
|
+
* without the wiring; `none` neither, even when wired. The line is drawn
|
|
83
|
+
* inside the chrome, so no state moves the chrome or the content. A
|
|
84
|
+
* `toolbarConfig.dividerSides` edge is the Toolbar's own and is unaffected.
|
|
85
|
+
*/
|
|
86
|
+
chromeDividers?: 'scroll' | 'always' | 'none';
|
|
87
|
+
className?: string;
|
|
88
|
+
/** Native named-slot assignment when composed inside a web component. */
|
|
89
|
+
slot?: string;
|
|
90
|
+
}
|
|
91
|
+
/**
|
|
92
|
+
* A navigation stack (iOS-style push/pop). Renders every entry stacked, the last
|
|
93
|
+
* one active; `@kerfjs/ui/wire-nav-stack`'s `wireNavStack` slides the content and
|
|
94
|
+
* cross-fades the chrome across a change. Its top chrome is a real `Toolbar`: the
|
|
95
|
+
* back control and title lead, the active view's `toolbar` fills the zones,
|
|
96
|
+
* and `toolbarConfig` supplies defaults. A single-pane
|
|
97
|
+
* layout is a `NavStack` with one entry. See `docs/23-app-layouts.md` §3.1.
|
|
98
|
+
*/
|
|
99
|
+
declare function NavStack({ id, label, views, backLabel, backIcon, backText, toolbarConfig, panelToggle, hideToolbar, bottomToolbar, chromeDividers, className, slot, }: NavStackProps): kerfjs.SafeHtml;
|
|
100
|
+
|
|
101
|
+
export { type NavStackProps as N, type NavStackView as a, type NavPane as b, NavStack as c, type NavStackToolbarConfig as d, type NavStackViewBottomToolbar as e, type NavStackViewToolbar as f };
|
package/dist/nav-stack.d.ts
CHANGED
|
@@ -1,94 +1,13 @@
|
|
|
1
|
-
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
1
|
+
export { c as NavStack, N as NavStackProps, d as NavStackToolbarConfig, a as NavStackView, e as NavStackViewBottomToolbar, f as NavStackViewToolbar } from './nav-stack-B1Qc2e5q.js';
|
|
2
|
+
import 'kerfjs';
|
|
3
|
+
import './semantic-content-BbzjvSu9.js';
|
|
4
|
+
import './list.js';
|
|
5
|
+
import './flex-alignment-4ms8ZbV8.js';
|
|
6
6
|
import './sides-BPSWde0A.js';
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
key: string;
|
|
15
|
-
content: KerfUiContent;
|
|
16
|
-
/** Background of this view's scrolling work surface. */
|
|
17
|
-
appearance?: PaneAppearance;
|
|
18
|
-
/** Title shown in the top toolbar for this view. */
|
|
19
|
-
title?: string;
|
|
20
|
-
/** Leading groups for this view's top toolbar, after the back control and before the title. */
|
|
21
|
-
leading?: KerfUiContent;
|
|
22
|
-
/** Center content for this view's top toolbar (placed per `toolbarConfig.centerAlign`). */
|
|
23
|
-
center?: KerfUiContent;
|
|
24
|
-
/** Trailing actions for this view's top toolbar. */
|
|
25
|
-
toolbar?: KerfUiContent;
|
|
26
|
-
/** Fixed chrome below this view's toolbar, above its scrolling content. */
|
|
27
|
-
header?: KerfUiContent;
|
|
28
|
-
/** Bottom toolbar for this view. Cross-fades with the top chrome on navigation. */
|
|
29
|
-
bottomToolbar?: KerfUiContent;
|
|
30
|
-
}
|
|
31
|
-
/**
|
|
32
|
-
* The top toolbar's configuration. Its `ToolbarConfig` forwards to the real
|
|
33
|
-
* `Toolbar` the stack renders; by default that toolbar draws no divider and
|
|
34
|
-
* claims the top and side safe-area edges the stack still touches.
|
|
35
|
-
*/
|
|
36
|
-
interface NavStackToolbarConfig extends ToolbarConfig {
|
|
37
|
-
/** Accessible name of the top toolbar (default: none). */
|
|
38
|
-
label?: string;
|
|
39
|
-
/** Size of the view title's `ToolbarText` (default `large`). */
|
|
40
|
-
titleSize?: ToolbarTextSize;
|
|
41
|
-
/** Expose the view title as a heading at this level (default: a plain span). */
|
|
42
|
-
headingLevel?: HeadingLevel;
|
|
43
|
-
}
|
|
44
|
-
interface NavStackProps {
|
|
45
|
-
id: string;
|
|
46
|
-
/** Accessible name for the stack region. */
|
|
47
|
-
label: string;
|
|
48
|
-
/** The stack, root first; the last entry is the active top view. */
|
|
49
|
-
views: NavStackView[];
|
|
50
|
-
/** Accessible label for the icon-only back control (default "Back"). */
|
|
51
|
-
backLabel?: string;
|
|
52
|
-
/** The back control's icon (default a chevron-left `LucideIcon`). */
|
|
53
|
-
backIcon?: KerfUiContent;
|
|
54
|
-
/**
|
|
55
|
-
* Visible text beside the back icon, such as the previous view's title
|
|
56
|
-
* (default: icon only). When set, the text names the control and
|
|
57
|
-
* `backLabel` is not used.
|
|
58
|
-
*/
|
|
59
|
-
backText?: string;
|
|
60
|
-
/** The top toolbar's configuration, forwarded to its `Toolbar`. */
|
|
61
|
-
toolbarConfig?: NavStackToolbarConfig;
|
|
62
|
-
/** Persistent last group in every view's top toolbar, supplied by a hosting panel. */
|
|
63
|
-
panelToggle?: KerfUiContent;
|
|
64
|
-
/** Hide the top toolbar entirely (rare — a fully custom-chrome view). */
|
|
65
|
-
hideToolbar?: boolean;
|
|
66
|
-
/** Optional persistent bottom toolbar used when the active view does not provide one. */
|
|
67
|
-
bottomToolbar?: KerfUiContent;
|
|
68
|
-
/**
|
|
69
|
-
* The line under the top chrome and over the bottom toolbar, where they
|
|
70
|
-
* meet the active view. `scroll` (default) shows the chrome's line only
|
|
71
|
-
* while the view's content is scrolled beneath it, and the bottom
|
|
72
|
-
* toolbar's only while more content lies below — never when the content
|
|
73
|
-
* fits — once `wireScrollDividers` (`@kerfjs/ui/wire-scroll-dividers`) is
|
|
74
|
-
* wired above the stack; unwired, neither shows. `always` shows both
|
|
75
|
-
* without the wiring; `none` neither, even when wired. The line is drawn
|
|
76
|
-
* inside the chrome, so no state moves the chrome or the content. A
|
|
77
|
-
* `toolbarConfig.dividerSides` edge is the Toolbar's own and is unaffected.
|
|
78
|
-
*/
|
|
79
|
-
chromeDividers?: 'scroll' | 'always' | 'none';
|
|
80
|
-
className?: string;
|
|
81
|
-
/** Native named-slot assignment when composed inside a web component. */
|
|
82
|
-
slot?: string;
|
|
83
|
-
}
|
|
84
|
-
/**
|
|
85
|
-
* A navigation stack (iOS-style push/pop). Renders every entry stacked, the last
|
|
86
|
-
* one active; `@kerfjs/ui/wire-nav-stack`'s `wireNavStack` slides the content and
|
|
87
|
-
* cross-fades the chrome across a change. Its top chrome is a real `Toolbar`: the
|
|
88
|
-
* back control and title lead, the active view's `leading` / `center` / `toolbar`
|
|
89
|
-
* content fills the zones, and `toolbarConfig` configures it. A single-pane
|
|
90
|
-
* layout is a `NavStack` with one entry. See `docs/23-app-layouts.md` §3.1.
|
|
91
|
-
*/
|
|
92
|
-
declare function NavStack({ id, label, views, backLabel, backIcon, backText, toolbarConfig, panelToggle, hideToolbar, bottomToolbar, chromeDividers, className, slot, }: NavStackProps): kerfjs.SafeHtml;
|
|
93
|
-
|
|
94
|
-
export { NavStack, type NavStackProps, type NavStackToolbarConfig, type NavStackView };
|
|
7
|
+
import './css-values.js';
|
|
8
|
+
import './pane.js';
|
|
9
|
+
import './panel-toolbar-CL9tYOkh.js';
|
|
10
|
+
import './toolbar.js';
|
|
11
|
+
import './lucide-icon.js';
|
|
12
|
+
import 'lucide';
|
|
13
|
+
import './toolbar-text.js';
|