@kerfjs/ui 5.0.0-beta.110 → 5.0.0-beta.112
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 +3 -0
- package/ai/component-catalog.json +161 -8
- package/ai/component-composition.json +119 -2
- package/ai/components/README.md +2 -0
- package/ai/components/backdrop-image.md +1 -0
- package/ai/components/button.md +5 -2
- package/ai/components/content-item.md +1 -0
- package/ai/components/editor-frame.md +80 -0
- package/ai/components/summary-row.md +5 -2
- package/ai/components/surface-scaffold.md +3 -0
- package/ai/components/value-preview.md +75 -0
- package/ai/public-api-signatures-v1.md +207 -50
- package/ai/skill.md +17 -0
- package/ai/webawesome-jsx-signatures-v1.md +1 -1
- package/dist/backdrop-image.d.ts +11 -0
- package/dist/backdrop-image.js +1 -1
- package/dist/browser/content-item.js +1 -0
- package/dist/browser/editor-frame.js +3 -0
- package/dist/browser/value-preview.js +3 -0
- package/dist/button.d.ts +4 -2
- package/dist/button.js +1 -1
- package/dist/catalog-resources.d.ts +2 -1
- package/dist/catalog.d.ts +2 -1
- package/dist/catalog.js +6 -4
- package/dist/catalog.js.map +1 -1
- package/dist/{chunk-JCCN3U6X.js → chunk-2J7XKAZX.js} +3 -2
- package/dist/chunk-2J7XKAZX.js.map +1 -0
- package/dist/chunk-3KFMLOTH.js +201 -0
- package/dist/chunk-3KFMLOTH.js.map +1 -0
- package/dist/{chunk-ATGAJVZ6.js → chunk-3OP66VXU.js} +64 -4
- package/dist/chunk-3OP66VXU.js.map +1 -0
- package/dist/{chunk-ZNROKDSZ.js → chunk-3V4OCDTL.js} +2 -8
- package/dist/chunk-3V4OCDTL.js.map +1 -0
- package/dist/{chunk-3GLYIIFR.js → chunk-3WWX2O4G.js} +3 -2
- package/dist/chunk-3WWX2O4G.js.map +1 -0
- package/dist/{chunk-SCDWURBO.js → chunk-5CLMV5YU.js} +21 -3
- package/dist/chunk-5CLMV5YU.js.map +1 -0
- package/dist/{chunk-P7EJ4CAD.js → chunk-ETFP7HAR.js} +2 -2
- package/dist/{chunk-P7EJ4CAD.js.map → chunk-ETFP7HAR.js.map} +1 -1
- package/dist/chunk-F653O57X.js +41 -0
- package/dist/chunk-F653O57X.js.map +1 -0
- package/dist/{chunk-SOFPUW3O.js → chunk-IIQ2XIMU.js} +4 -3
- package/dist/chunk-IIQ2XIMU.js.map +1 -0
- package/dist/chunk-IRC5N7FA.js +16 -0
- package/dist/chunk-IRC5N7FA.js.map +1 -0
- package/dist/{chunk-SQ5DH66U.js → chunk-ITENVZ6Q.js} +2 -15
- package/dist/chunk-ITENVZ6Q.js.map +1 -0
- package/dist/{chunk-4UB5Z3ZZ.js → chunk-K67XBCHG.js} +8 -4
- package/dist/chunk-K67XBCHG.js.map +1 -0
- package/dist/chunk-OK7FUK7U.js +9 -0
- package/dist/chunk-OK7FUK7U.js.map +1 -0
- package/dist/{chunk-WSEJ2FDE.js → chunk-OUCHU7JB.js} +2 -2
- package/dist/{chunk-WSEJ2FDE.js.map → chunk-OUCHU7JB.js.map} +1 -1
- package/dist/{chunk-KPINJHIC.js → chunk-PS24PVR6.js} +3 -1
- package/dist/chunk-PS24PVR6.js.map +1 -0
- package/dist/{chunk-6CDILXF4.js → chunk-S3DCRI2M.js} +31 -5
- package/dist/chunk-S3DCRI2M.js.map +1 -0
- package/dist/chunk-V6N3YLTM.js +56 -0
- package/dist/chunk-V6N3YLTM.js.map +1 -0
- package/dist/{chunk-HQZG3OFL.js → chunk-XRZSK2WC.js} +3 -2
- package/dist/chunk-XRZSK2WC.js.map +1 -0
- package/dist/{chunk-CPSGUGAY.js → chunk-YPAQFBMN.js} +4 -4
- package/dist/{chunk-CPSGUGAY.js.map → chunk-YPAQFBMN.js.map} +1 -1
- package/dist/collapsible-panel.d.ts +1 -0
- package/dist/collapsible-panel.js +3 -2
- package/dist/collapsible-panel.js.map +1 -1
- package/dist/content-item.d.ts +46 -2
- package/dist/content-item.js +4 -1
- package/dist/editor-frame.d.ts +41 -0
- package/dist/editor-frame.js +3 -0
- package/dist/editor-frame.js.map +1 -0
- package/dist/index.d.ts +5 -2
- package/dist/index.js +27 -23
- package/dist/list-action-row.js +2 -1
- package/dist/list-detail-dialog.d.ts +2 -1
- package/dist/list-detail-dialog.js +5 -4
- package/dist/list-detail-dialog.js.map +1 -1
- package/dist/list-item.js +2 -1
- package/dist/{nav-stack-CU_0dKtI.d.ts → nav-stack-CrZF95VO.d.ts} +2 -1
- package/dist/nav-stack.d.ts +2 -1
- package/dist/nav-stack.js +2 -1
- package/dist/pane.d.ts +3 -23
- package/dist/pane.js +2 -1
- package/dist/split-view.d.ts +2 -1
- package/dist/split-view.js +2 -1
- package/dist/styles/backdrop-image.css +24 -1
- package/dist/styles/components/actions/popup-menu/popup-menu.css +1 -1
- package/dist/styles/components/collections/summary-row/summary-row.css +7 -3
- package/dist/styles/components/data-display/value-preview/value-preview.css +18 -0
- package/dist/styles/components/surfaces/backdrop-image/backdrop-image.css +24 -1
- package/dist/styles/components/surfaces/content-item/content-item.css +52 -0
- package/dist/styles/components/surfaces/editor-frame/editor-frame.css +121 -0
- package/dist/styles/components/surfaces/surface-scaffold/surface-scaffold.css +25 -1
- package/dist/styles/content-item.css +3 -168
- package/dist/styles/editor-frame.css +121 -0
- package/dist/styles/foundation.css +9 -4
- package/dist/styles/popup-menu.css +1 -1
- package/dist/styles/styles.css +2 -0
- package/dist/styles/summary-row.css +7 -3
- package/dist/styles/surface-scaffold.css +25 -1
- package/dist/styles/value-preview.css +18 -0
- package/dist/styles/webawesome.css +2 -2
- package/dist/summary-row.d.ts +20 -11
- package/dist/summary-row.js +2 -1
- package/dist/surface-scaffold-register.js +1 -1
- package/dist/surface-scaffold.d.ts +30 -2
- package/dist/surface-scaffold.js +2 -2
- package/dist/surface-tint-DQgYCaP9.d.ts +25 -0
- package/dist/tab-navigator.d.ts +2 -1
- package/dist/tab-navigator.js +2 -1
- package/dist/tab-navigator.js.map +1 -1
- package/dist/toolbar.d.ts +1 -0
- package/dist/value-preview.d.ts +21 -0
- package/dist/value-preview.js +3 -0
- package/dist/value-preview.js.map +1 -0
- package/dist/wire-catalog.d.ts +2 -1
- package/dist/wire-catalog.js +1 -1
- package/dist/wire-content-items.js +88 -0
- package/dist/wire-content-items.js.map +1 -1
- package/dist/workbench-dialog.d.ts +2 -1
- package/dist/workbench-dialog.js +4 -3
- package/dist/workbench-dialog.js.map +1 -1
- package/dist/workbench.d.ts +2 -1
- package/dist/workbench.js +2 -1
- package/docs/accessibility.md +6 -0
- package/docs/backdrop-image.md +4 -0
- package/docs/button.md +15 -0
- package/docs/component-contract.md +34 -4
- package/docs/component-selection.md +16 -1
- package/docs/design/templates/button/emphasis-dark.svg +1 -1
- package/docs/design/templates/button-dark.svg +1 -1
- package/docs/design/templates/checkbox/error-dark.svg +1 -1
- package/docs/design/templates/checkbox/states.svg +1 -1
- package/docs/design/templates/checkbox-dark.svg +1 -1
- package/docs/design/templates/checkbox-group/horizontal-dark.svg +1 -1
- package/docs/design/templates/checkbox-group/vertical.svg +1 -1
- package/docs/design/templates/checkbox-group-dark.svg +1 -1
- package/docs/design/templates/checkbox-group.svg +1 -1
- package/docs/design/templates/checkbox.svg +1 -1
- package/docs/design/templates/choice-chips/color-palette-dark.svg +1 -1
- package/docs/design/templates/choice-chips-dark.svg +1 -1
- package/docs/design/templates/color-field/error-dark.svg +1 -1
- package/docs/design/templates/color-field/hint.svg +1 -1
- package/docs/design/templates/color-field-dark.svg +1 -1
- package/docs/design/templates/color-field.svg +1 -1
- package/docs/design/templates/color-picker/gray.svg +1 -1
- package/docs/design/templates/color-picker/hsb.svg +1 -1
- package/docs/design/templates/color-picker/rgb.svg +1 -1
- package/docs/design/templates/color-picker.svg +1 -1
- package/docs/design/templates/color-swatches/palette-dark.svg +1 -1
- package/docs/design/templates/color-swatches-dark.svg +1 -1
- package/docs/design/templates/disclosure/embedded.svg +1 -1
- package/docs/design/templates/disclosure/framed-sunken.svg +1 -1
- package/docs/design/templates/disclosure/plain.svg +1 -1
- package/docs/design/templates/disclosure.svg +1 -1
- package/docs/design/templates/message-composer/chat.svg +1 -1
- package/docs/design/templates/message-composer.svg +1 -1
- package/docs/design/templates/progress-bar/determinate.svg +1 -1
- package/docs/design/templates/progress-bar/tones.svg +1 -1
- package/docs/design/templates/progress-bar.svg +1 -1
- package/docs/design/templates/radio-group/horizontal-dark.svg +1 -1
- package/docs/design/templates/radio-group/vertical.svg +1 -1
- package/docs/design/templates/radio-group-dark.svg +1 -1
- package/docs/design/templates/radio-group.svg +1 -1
- package/docs/design/templates/search-field/empty.svg +1 -1
- package/docs/design/templates/search-field/tokens.svg +1 -1
- package/docs/design/templates/search-field.svg +1 -1
- package/docs/design/templates/select/form.svg +1 -1
- package/docs/design/templates/select.svg +1 -1
- package/docs/design/templates/slider/compact.svg +1 -1
- package/docs/design/templates/slider/readout.svg +1 -1
- package/docs/design/templates/slider/ticks.svg +1 -1
- package/docs/design/templates/slider.svg +1 -1
- package/docs/design/templates/switch/states.svg +1 -1
- package/docs/design/templates/switch.svg +1 -1
- package/docs/design/templates/tag-field/error-dark.svg +1 -1
- package/docs/design/templates/tag-field/error.svg +1 -1
- package/docs/design/templates/tag-field/tags.svg +1 -1
- package/docs/design/templates/tag-field-dark.svg +1 -1
- package/docs/design/templates/tag-field.svg +1 -1
- package/docs/design/templates/text-field/error-dark.svg +1 -1
- package/docs/design/templates/text-field/labeled.svg +1 -1
- package/docs/design/templates/text-field/multiline.svg +1 -1
- package/docs/design/templates/text-field/search.svg +1 -1
- package/docs/design/templates/text-field-dark.svg +1 -1
- package/docs/design/templates/text-field.svg +1 -1
- package/docs/design/templates/toolbar-control-group/icon-tile-danger-dark.svg +1 -1
- package/docs/design/templates/toolbar-control-group-dark.svg +1 -1
- package/docs/design/templates.md +3 -1
- package/docs/editor-frame.md +47 -0
- package/docs/investigations/content-item-media-scroll-performance.md +26 -0
- package/docs/layout.md +34 -0
- package/docs/manual-test-plan.md +27 -1
- package/docs/recipes.md +9 -0
- package/docs/surface-scaffold.md +50 -1
- package/docs/value-preview.md +16 -0
- package/llms.txt +10 -1
- package/package.json +13 -1
- package/dist/chunk-3GLYIIFR.js.map +0 -1
- package/dist/chunk-4UB5Z3ZZ.js.map +0 -1
- package/dist/chunk-5USKCWGL.js +0 -113
- package/dist/chunk-5USKCWGL.js.map +0 -1
- package/dist/chunk-6CDILXF4.js.map +0 -1
- package/dist/chunk-ATGAJVZ6.js.map +0 -1
- package/dist/chunk-HQZG3OFL.js.map +0 -1
- package/dist/chunk-JCCN3U6X.js.map +0 -1
- package/dist/chunk-KPINJHIC.js.map +0 -1
- package/dist/chunk-SCDWURBO.js.map +0 -1
- package/dist/chunk-SOFPUW3O.js.map +0 -1
- package/dist/chunk-SQ5DH66U.js.map +0 -1
- package/dist/chunk-ZNROKDSZ.js.map +0 -1
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/collections/list-action-row/list-action-row.tsx"],"names":[],"mappings":"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","file":"chunk-JCCN3U6X.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 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/actions/button/button.tsx"],"names":[],"mappings":"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","file":"chunk-KPINJHIC.js","sourcesContent":["import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport { filterDataAttributes } from '../../../shared/dom/extension-attributes.js';\nimport { Badge, type BadgeTone } from '../../feedback/badge/badge.js';\nimport { LoadingSpinner } from '../../feedback/loading-spinner/loading-spinner.js';\n\n/** The color family: `neutral` (default), `brand` for the main action, `success` for a positive one, `danger` for a destructive one. */\nexport type ButtonTone = 'neutral' | 'brand' | 'success' | 'danger';\n\n/**\n * How loudly it asks: `primary` (default) fills the button, `secondary`\n * outlines it, and `plain` shows only its text until hovered.\n */\nexport type ButtonEmphasis = 'primary' | 'secondary' | 'plain';\n\n/** `default` is the 44px control height; `compact` is 33px with smaller text. */\nexport type ButtonSize = 'default' | 'compact';\n\n/** Corner shape: the shared `rounded` control radius (default) or a full `pill`. */\nexport type ButtonShape = 'rounded' | 'pill';\n/** What a form button does: `button` (default), `submit`, or `reset`. */\nexport type ButtonType = 'button' | 'submit' | 'reset';\n\nconst BUTTON_PROTECTED = new Set([\n 'data-component',\n 'data-action',\n 'data-tone',\n 'data-emphasis',\n 'data-size',\n 'data-loading',\n 'data-icon-only',\n 'data-shape',\n 'data-fill',\n 'data-focus-ring-inset',\n]);\n\n/** Application `data-*` metadata; the Button's own markers stay protected. */\nexport type ButtonRootAttributes = Readonly<\n Record<`data-${string}`, string | undefined>\n>;\n\n/** A Button's visible label: text or rendered content, never empty. */\nexport type ButtonLabel =\n string | Exclude<KerfUiContent, null | undefined | boolean>;\n\n/**\n * A labeled button (its label names it; `ariaLabel` only when the label is\n * not enough), or an icon-only square named by `ariaLabel`.\n */\nexport type ButtonContent =\n | {\n /** The label. */\n children: ButtonLabel;\n /** A leading icon, such as a `LucideIcon`; it is decorative. */\n icon?: KerfUiContent;\n ariaLabel?: string;\n }\n | {\n children?: undefined;\n /** The icon of an icon-only square button. */\n icon: KerfUiContent;\n /** The accessible name an icon-only button needs. */\n ariaLabel: string;\n };\n\nexport type ButtonProps = ButtonContent & ButtonOptions;\n\nexport interface ButtonOptions {\n tone?: ButtonTone;\n emphasis?: ButtonEmphasis;\n size?: ButtonSize;\n /** Corner shape (default `rounded`). */\n shape?: ButtonShape;\n /**\n * Span the full width of the parent instead of sizing to the label, as on\n * `SplitButton`. The label stays centered and ellipsizes when it no longer\n * fits.\n */\n fill?: boolean;\n /**\n * Make it a toggle: `aria-pressed` reports the state, and a pressed look is\n * drawn on top of the tone and emphasis. The application owns the state and\n * flips it in its `action` handler. A link (`href`) cannot be a toggle.\n */\n pressed?: boolean;\n /**\n * Busy: a spinner replaces the label (which still names it) and the button\n * reports `aria-busy`. Presses still reach it; the application decides\n * what a press does while it is busy.\n */\n loading?: boolean;\n disabled?: boolean;\n /** A form button's behavior (default `button`, which never submits). */\n type?: ButtonType;\n name?: string;\n value?: string;\n /** The id of the form it belongs to, when it sits outside that form. */\n form?: string;\n /** Render a link with button styling instead of a `<button>`. */\n href?: string;\n /** Where a link opens. */\n target?: '_self' | '_blank' | '_parent' | '_top';\n /** Delegated `data-action` the application handles. */\n action?: string;\n /**\n * Keep the button's focus ring inside its box when an ancestor clips\n * overflow. The inset ring is two-tone, a surface-colored line inside the\n * ring color, so it stays visible on a loud fill of the ring's own hue.\n */\n focusRingInset?: boolean;\n /**\n * A count, short text, or `true` for a text-free dot over the button's\n * top-trailing corner, such as how many items a filter hides. It stays out\n * of the accessible name unless `badgeLabel` names it.\n */\n badge?: number | string | true;\n /** Words for the badge (\"3 hidden\"), added to the button's name. */\n badgeLabel?: string;\n /** The badge's tone (default `danger`). */\n badgeTone?: BadgeTone;\n /**\n * Native hover text that says more than the name, such as \"More Actions\n * for report.pdf\". An icon-only Button already gets a help tag with its\n * `ariaLabel` (with `@kerfjs/ui/help-tags-register`); a `title` replaces\n * that tag.\n */\n title?: string;\n id?: string;\n className?: string;\n /** Safe `data-*` metadata (a `data-key`, `data-dialog-close`). */\n rootAttributes?: ButtonRootAttributes;\n /** Native named-slot assignment when composed inside a web component. */\n slot?: string;\n}\n\n/**\n * A standalone action button: a native `<button>` (or a link with `href`)\n * in one of four tones and three emphases, at the 44px control height or\n * compact, with a label or as an icon-only square, rounded or pill-shaped,\n * sized to its label or filling its parent's width, and optionally a\n * `pressed` toggle. Inside a\n * `ToolbarControlGroup`, use a plain `<button>`, which the group styles; use\n * Button for a dialog footer, a form, or a standalone action beside other\n * content.\n */\nexport function Button({\n children,\n tone = 'neutral',\n emphasis = 'primary',\n size = 'default',\n shape = 'rounded',\n fill = false,\n pressed,\n icon,\n loading = false,\n disabled = false,\n type = 'button',\n name,\n value,\n form,\n href,\n target,\n action,\n focusRingInset = false,\n badge,\n badgeLabel,\n badgeTone = 'danger',\n ariaLabel,\n title,\n id,\n className = '',\n rootAttributes = {},\n slot,\n}: ButtonProps) {\n const shared = {\n ...filterDataAttributes(rootAttributes, BUTTON_PROTECTED),\n id,\n class: `kui-button ${className}`.trim(),\n 'data-component': 'button',\n 'data-tone': tone,\n 'data-emphasis': emphasis,\n 'data-size': size,\n 'data-loading': loading ? '' : undefined,\n 'data-icon-only': children === undefined ? '' : undefined,\n 'data-shape': shape === 'pill' ? 'pill' : undefined,\n 'data-fill': fill ? 'true' : undefined,\n 'data-focus-ring-inset': focusRingInset ? 'true' : undefined,\n 'data-action': action,\n 'aria-label':\n ariaLabel && badge !== undefined && badgeLabel\n ? `${ariaLabel}, ${badgeLabel}`\n : ariaLabel,\n title,\n 'aria-busy': loading ? 'true' : undefined,\n slot,\n };\n const content = (\n <>\n {icon === undefined ? null : (\n <span class=\"kui-button__icon\" aria-hidden=\"true\">\n {icon}\n </span>\n )}\n {children === undefined ? null : (\n <span class=\"kui-button__label\">{children}</span>\n )}\n {badge === undefined || badge === '' ? null : badge === true ? (\n <Badge\n tone={badgeTone}\n size=\"dot\"\n placement=\"corner\"\n {...(ariaLabel || !badgeLabel\n ? { ariaHidden: true as const }\n : { label: badgeLabel })}\n />\n ) : (\n <Badge\n tone={badgeTone}\n appearance=\"solid\"\n size=\"compact\"\n placement=\"corner\"\n {...(ariaLabel || !badgeLabel\n ? { ariaHidden: true as const }\n : { label: badgeLabel })}\n >\n {String(badge)}\n </Badge>\n )}\n {loading ? (\n <span class=\"kui-button__spinner\" aria-hidden=\"true\">\n <LoadingSpinner />\n </span>\n ) : null}\n </>\n );\n // A disabled link has no destination and is announced as disabled.\n if (href !== undefined) {\n if (pressed !== undefined)\n throw new TypeError('A link Button cannot be a toggle (pressed).');\n return (\n <a\n {...shared}\n href={disabled ? undefined : href}\n target={disabled ? undefined : target}\n role={disabled ? 'link' : undefined}\n aria-disabled={disabled ? 'true' : undefined}\n >\n {content}\n </a>\n );\n }\n return (\n <button\n {...shared}\n type={type}\n name={name}\n value={value}\n form={form}\n disabled={disabled}\n aria-pressed={pressed === undefined ? undefined : String(pressed)}\n >\n {content}\n </button>\n );\n}\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/surfaces/backdrop-image/backdrop-image.tsx"],"names":["className"],"mappings":"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","file":"chunk-SCDWURBO.js","sourcesContent":["import type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport {\n filterRootAttributes,\n type StructuralRootAttributes,\n} from '../../../shared/dom/extension-attributes.js';\nimport {\n type CssColor,\n type CssLength,\n remify,\n} from '../../../shared/styles/css-values.js';\n\n/** How a single image fills the backdrop (`object-fit`). */\nexport type BackdropImageFit = 'cover' | 'contain' | 'fill';\n\n/** Which part of the image stays in view when it is cropped. */\nexport type BackdropImagePosition =\n | 'center'\n | 'top'\n | 'bottom'\n | 'left'\n | 'right'\n | 'top left'\n | 'top right'\n | 'bottom left'\n | 'bottom right';\n\n/** Tile the image as a background instead of fitting one copy. */\nexport type BackdropImageRepeat = 'repeat' | 'repeat-x' | 'repeat-y';\n\n/**\n * How far the image lags the scroll: `none` scrolls with the content,\n * `subtle` lags by 35%, and a number from 0 to 1 is the lag factor (0.5\n * moves the image at half the scroll speed).\n */\nexport type BackdropImageParallax = 'none' | 'subtle' | number;\n\n/**\n * A dimming layer under `overlay` content: `bottom` darkens toward the\n * block end where a title sits, `full` dims the whole image evenly.\n */\nexport type BackdropImageScrim = 'none' | 'bottom' | 'full';\n\n/**\n * A scroll-linked progressive blur: a statically blurred copy of the image\n * fades in as the image block scrolls away. Only the copy's opacity (and the\n * optional dim layer's) animates; the blur itself is set once.\n */\nexport interface BackdropImageBlur {\n /**\n * CSS blur radius applied once to the copy. Default 24px; with\n * `blurredSrc` the default is no filter, since that asset is already soft.\n */\n radius?: CssLength;\n /**\n * An app-supplied pre-blurred or low-resolution copy of the image, used\n * instead of filtering `src`.\n */\n blurredSrc?: string;\n /**\n * Peak opacity, from 0 to 1, of a black dim layer that ramps in with the\n * blur. Default 0 (no dim layer).\n */\n dim?: number;\n}\n\nconst backdropImageProtected = new Set([\n 'data-component',\n 'data-blur',\n 'data-parallax',\n 'data-scrim',\n 'data-fade',\n 'data-repeat',\n 'data-under-chrome',\n]);\n\ntype BackdropImageRootAttributes = StructuralRootAttributes &\n Readonly<{\n 'data-component'?: never;\n 'data-blur'?: never;\n 'data-parallax'?: never;\n 'data-scrim'?: never;\n 'data-fade'?: never;\n 'data-repeat'?: never;\n 'data-under-chrome'?: never;\n }>;\n\ninterface BackdropImageCommonProps {\n /** Image URL. */\n src: string;\n /**\n * Accessible description of the image. Pass `''` for a decorative image\n * that only sets a mood; assistive technology then skips it.\n */\n alt: string;\n /** Which part of a cropped image stays in view. Default `center`. */\n position?: BackdropImagePosition;\n /** Height of the image block. Default 320px (`remify(320)`). */\n height?: CssLength;\n /** How far the image lags the scroll. Default `none`. */\n parallax?: BackdropImageParallax;\n /**\n * The color the image fades into at its block end. It also paints the\n * whole surface, so `children` below the image sit on the same color and\n * the page reads as one surface. Omit for a hard edge with no surface.\n */\n fadeTo?: CssColor;\n /**\n * Blur the image progressively as it scrolls away, by cross-fading a\n * statically blurred copy. Static (unblurred) wherever parallax is.\n */\n blur?: BackdropImageBlur;\n /**\n * Run the image up beneath the scroller's block-start inset: an overlay or\n * clear Pane header, NavStack chrome handed to a view's Pane, and the top\n * safe area, the way a media page's artwork fills the screen behind\n * transparent chrome. The visible image keeps `height` below that inset,\n * and `overlay` content stays clear of the chrome. Place the image first in\n * the Pane's content; it reads the Pane's\n * `--kui-pane-content-inset-block-start`. Default `false`.\n */\n underChrome?: boolean;\n /** Dim the image under `overlay` content. Default `none`. */\n scrim?: BackdropImageScrim;\n /** Content laid over the image's block end, such as a title and actions. */\n overlay?: KerfUiContent;\n /** Content that continues below the image on the `fadeTo` surface. */\n children?: KerfUiContent;\n id?: string;\n className?: string;\n /** Safe `data-*`, `aria-*`, and structural `role` metadata on the root. */\n rootAttributes?: BackdropImageRootAttributes;\n /** Native named-slot assignment when composed inside a web component. */\n slot?: string;\n}\n\n/** One fitted image, with optional responsive candidates. */\nexport interface BackdropImageSingleProps extends BackdropImageCommonProps {\n repeat?: undefined;\n /** Responsive image candidates (`srcset`). */\n srcset?: string;\n /** Rendered-size hints for `srcset` (`sizes`). */\n sizes?: string;\n /** How the image fills the block. Default `cover`. */\n fit?: BackdropImageFit;\n}\n\n/** A tiled background image at its natural size. */\nexport interface BackdropImageTiledProps extends BackdropImageCommonProps {\n repeat: BackdropImageRepeat;\n srcset?: never;\n sizes?: never;\n fit?: never;\n}\n\nexport type BackdropImageProps =\n BackdropImageSingleProps | BackdropImageTiledProps;\n\nconst SUBTLE_PARALLAX = 0.35;\n\nfunction parallaxFactor(parallax: BackdropImageParallax): number {\n if (parallax === 'none') return 0;\n if (parallax === 'subtle') return SUBTLE_PARALLAX;\n if (!Number.isFinite(parallax) || parallax < 0 || parallax > 1)\n throw new RangeError(\n 'BackdropImage parallax must be none, subtle, or a number from 0 to 1.',\n );\n return parallax;\n}\n\nfunction blurDim(dim: number | undefined): number {\n if (dim === undefined) return 0;\n if (!Number.isFinite(dim) || dim < 0 || dim > 1)\n throw new RangeError('BackdropImage blur.dim must be from 0 to 1.');\n return dim;\n}\n\nconst unsafeStyleValue = /[;{}<>\"'\\\\]|\\p{Cc}/u;\n\nfunction styleValue(value: string, prop: string): string {\n const trimmed = value.trim();\n if (!trimmed || unsafeStyleValue.test(trimmed))\n throw new TypeError(`BackdropImage ${prop} requires one CSS value.`);\n return trimmed;\n}\n\n/** A CSS `url(\"…\")` for the tiled form; quotes and backslashes are escaped. */\nfunction cssUrl(src: string): string {\n if (/\\p{Cc}/u.test(src))\n throw new TypeError(\n 'BackdropImage src must not contain control characters.',\n );\n return `url(\"${src.replace(/[\"\\\\]/g, (char) => `\\\\${char}`)}\")`;\n}\n\n/**\n * An image backdrop at the top of a scrolling Pane or NavStack view: the\n * image can lag the scroll (parallax on a scroll-driven, compositor-only\n * transform), fade through a mask into `fadeTo`, and that color keeps\n * painting under `children` so the page reads as one surface. Kerf owns the\n * static fallbacks: no parallax without scroll-driven animation support,\n * under reduced motion, under `data-kui-effects=\"static\"`, or on a\n * slow-update display, and a hard edge onto solid `fadeTo` under reduced\n * transparency.\n */\nexport function BackdropImage(props: BackdropImageProps) {\n const {\n src,\n alt,\n position = 'center',\n height,\n parallax = 'none',\n blur,\n fadeTo,\n scrim = 'none',\n underChrome = false,\n overlay,\n children,\n id,\n className = '',\n rootAttributes = {},\n slot,\n } = props;\n const factor = parallaxFactor(parallax);\n const dim = blurDim(blur?.dim);\n const blurRadius =\n blur === undefined\n ? undefined\n : (blur.radius ??\n (blur.blurredSrc === undefined ? remify(24) : undefined));\n const style = [\n height === undefined\n ? ''\n : `--_kui-backdrop-image-height:${styleValue(height, 'height')}`,\n fadeTo === undefined\n ? ''\n : `--_kui-backdrop-image-fade-to:${styleValue(fadeTo, 'fadeTo')}`,\n factor === 0 ? '' : `--_kui-backdrop-image-parallax:${String(factor)}`,\n position === 'center' ? '' : `--_kui-backdrop-image-position:${position}`,\n props.fit === undefined || props.fit === 'cover'\n ? ''\n : `--_kui-backdrop-image-fit:${props.fit}`,\n blurRadius === undefined\n ? ''\n : `--_kui-backdrop-image-blur:${styleValue(blurRadius, 'blur.radius')}`,\n dim === 0 ? '' : `--_kui-backdrop-image-dim:${String(dim)}`,\n ]\n .filter(Boolean)\n .join(';');\n const image = (className: string, source: string, copy: boolean) =>\n props.repeat === undefined ? (\n <img\n class={className}\n src={source}\n srcSet={source === src ? props.srcset : undefined}\n sizes={source === src ? props.sizes : undefined}\n alt={copy ? '' : alt}\n aria-hidden={copy ? 'true' : undefined}\n decoding=\"async\"\n />\n ) : (\n <div\n class={className}\n role={!copy && alt ? 'img' : undefined}\n aria-label={!copy && alt ? alt : undefined}\n aria-hidden={copy ? 'true' : undefined}\n style={`background-image:${cssUrl(source)};background-repeat:${props.repeat}`}\n />\n );\n const hasOverlay =\n overlay !== undefined && overlay !== null && overlay !== false;\n const hasChildren =\n children !== undefined && children !== null && children !== false;\n return (\n <div\n {...filterRootAttributes(rootAttributes, backdropImageProtected)}\n id={id}\n class={`kui-backdrop-image ${className}`.trim()}\n data-component=\"backdrop-image\"\n data-parallax={factor === 0 ? 'none' : 'scroll'}\n data-blur={\n blur === undefined\n ? undefined\n : blurRadius === undefined\n ? 'asset'\n : 'filter'\n }\n data-fade={fadeTo === undefined ? undefined : 'true'}\n data-scrim={scrim === 'none' ? undefined : scrim}\n data-repeat={props.repeat}\n data-under-chrome={underChrome ? 'true' : undefined}\n style={style || undefined}\n slot={slot}\n >\n <div class=\"kui-backdrop-image__hero\">\n <div class=\"kui-backdrop-image__backdrop\">\n <div class=\"kui-backdrop-image__layers\">\n {image('kui-backdrop-image__media', src, false)}\n {blur === undefined\n ? null\n : image(\n 'kui-backdrop-image__blurred',\n blur.blurredSrc ?? src,\n true,\n )}\n </div>\n {dim === 0 ? null : <div class=\"kui-backdrop-image__dim\" />}\n {scrim === 'none' ? null : <div class=\"kui-backdrop-image__scrim\" />}\n </div>\n {hasOverlay ? (\n <div class=\"kui-backdrop-image__overlay\">{overlay}</div>\n ) : null}\n </div>\n {hasChildren ? (\n <div class=\"kui-backdrop-image__content\">{children}</div>\n ) : null}\n </div>\n );\n}\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/navigation/nav-stack/nav-stack.tsx"],"names":[],"mappings":"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","file":"chunk-SOFPUW3O.js","sourcesContent":["import { ChevronLeft } from 'lucide';\n\nimport type { KerfUiContent } from '../../../shared/content/semantic-content.js';\nimport {\n type ScrollEdge,\n scrollEdgeAttributes,\n} from '../../../shared/layout/scroll-edge.js';\nimport type { NavPane } from '../../../shared/panels/nav-pane.js';\nimport type { PanelBottomToolbar } from '../../../shared/panels/panel-toolbar.js';\nimport type { CssColor } from '../../../shared/styles/css-values.js';\nimport {\n joinStyles,\n type SurfaceTint,\n surfaceTintAttributes,\n} from '../../../shared/styles/surface-tint.js';\nimport { Toolbar, type ToolbarConfig } from '../../actions/toolbar/toolbar.js';\nimport { ToolbarControlGroup } from '../../actions/toolbar-control-group/toolbar-control-group.js';\nimport {\n type HeadingLevel,\n ToolbarText,\n type ToolbarTextSize,\n} from '../../actions/toolbar-text/toolbar-text.js';\nimport { List, type ListConfig } from '../../collections/list/list.js';\nimport { paneConfigProps } from '../../layout/pane/internal/pane-config-props.js';\nimport { Pane } from '../../layout/pane/pane.js';\nimport { LucideIcon } from '../../media/lucide-icon/lucide-icon.js';\n\n/**\n * One entry in a {@link NavStack}. The app owns the stack as an array (usually a\n * signal); `NavStack` renders it and `wireNavStack` animates the transitions.\n */\nexport interface NavStackView extends NavPane<\n NavStackViewToolbar,\n PanelBottomToolbar\n> {\n /** Stable identity for keyed reconcile and transition direction. */\n key: string;\n}\n\n/** Per-view top toolbar. The stack supplies its back control before `leading`. */\nexport interface NavStackViewToolbar extends NavStackToolbarConfig {\n title?: string;\n leading?: KerfUiContent;\n center?: KerfUiContent;\n trailing?: KerfUiContent;\n}\n\n/** A view's structured bottom toolbar; it cross-fades on navigation. */\nexport type NavStackViewBottomToolbar = PanelBottomToolbar;\n\n/**\n * The top toolbar's configuration. Its `ToolbarConfig` forwards to the real\n * `Toolbar` the stack renders; by default that toolbar draws no divider and\n * claims the top and side safe-area edges the stack still touches.\n */\nexport interface NavStackToolbarConfig extends ToolbarConfig {\n /** Accessible name of the top toolbar (default: none). */\n label?: string;\n /**\n * Size of the view title's `ToolbarText`. Default `xlarge` at the root,\n * where the title is the page heading, and `large` once a back control\n * shares the bar.\n */\n titleSize?: ToolbarTextSize;\n /** Expose the view title as a heading at this level (default: a plain span). */\n headingLevel?: HeadingLevel;\n}\n\n/**\n * How a {@link NavStack}'s top chrome relates to the active view: `docked`\n * above it, or `overlay` laid over its top edge on the translucent chrome\n * material, so the view's content scrolls visibly beneath it.\n * `clear` lays it over\n * the same edge fully transparent, for chrome over imagery: legibility comes\n * from glass control groups or a scrim, and with `scrollEdge=\"material\"` the\n * chrome material fades in once content scrolls beneath it.\n */\nexport type NavStackChromePresentation = 'docked' | 'overlay' | 'clear';\n\n/**\n * How a {@link NavStack}'s bottom toolbar relates to the active view:\n * `docked` below it, or `overlay` laid over its bottom edge on the\n * translucent chrome material, so the view's content scrolls visibly beneath\n * it.\n * `clear` lays it over\n * the same edge fully transparent, for chrome over imagery: legibility comes\n * from glass control groups or a scrim, and with `scrollEdge=\"material\"` the\n * chrome material fades in once content scrolls beneath\n * it, until the view scrolls to its end.\n */\nexport type NavStackBottomToolbarPresentation = 'docked' | 'overlay' | 'clear';\n\nexport interface NavStackProps {\n id: string;\n /** Accessible name for the stack region. */\n label: string;\n /** The stack, root first; the last entry is the active top view. */\n views: NavStackView[];\n /** Accessible label for the icon-only back control (default \"Back\"). */\n backLabel?: string;\n /** The back control's icon (default a chevron-left `LucideIcon`). */\n backIcon?: KerfUiContent;\n /**\n * Visible text beside the back icon, such as the previous view's title\n * (default: icon only). When set, the text names the control and\n * `backLabel` is not used.\n */\n backText?: string;\n /** The top toolbar's configuration, forwarded to its `Toolbar`. */\n toolbarConfig?: NavStackToolbarConfig;\n /** Persistent last group in every view's top toolbar, supplied by a hosting panel. */\n panelToggle?: KerfUiContent;\n /** Hide the top toolbar entirely (rare — a fully custom-chrome view). */\n hideToolbar?: boolean;\n /** Optional persistent bottom toolbar used when the active view does not provide one. */\n bottomToolbar?: NavStackViewBottomToolbar;\n /**\n * Stack chrome separator. `auto` (default) draws both available edges\n * against a sunken active Pane and otherwise follows `chromeDividers`;\n * `hidden` suppresses the stack-owned edges.\n */\n separator?: 'auto' | 'hidden';\n /**\n * The line under the top chrome and over the bottom toolbar, where they\n * meet the active view. `scroll` (default) shows the chrome's line only\n * while the view's content is scrolled beneath it, and the bottom\n * toolbar's only while more content lies below — never when the content\n * fits — once `wireScrollDividers` (`@kerfjs/ui/wire-scroll-dividers`) is\n * wired above the stack; unwired, neither shows. `always` shows both\n * without the wiring; `none` neither, even when wired. The line is drawn\n * inside the chrome, so no state moves the chrome or the content. A\n * A sunken active Pane still draws the separator unless\n * `separator=\"hidden\"`. A `toolbarConfig.dividerSides` edge is the Toolbar's\n * own and is unaffected.\n */\n chromeDividers?: 'scroll' | 'always' | 'none';\n /**\n * `docked` (default) gives the top chrome its own band above the active\n * view. `overlay` lays the chrome over the view's top edge on the\n * translucent chrome material (`--kui-chrome-material`, opaque under\n * `prefers-reduced-transparency`, `prefers-contrast: more`, forced colors,\n * or without `backdrop-filter`), so content scrolls visibly beneath it, as\n * an iOS navigation bar does. `wireNavStack` measures the live chrome and\n * hands its height (top safe area included) to the viewport as the\n * block-start `--kui-edge-inset-*` context, so every view clears it with no\n * prop: a plain view, a sole `Pane`'s content (or header), and a nested\n * layout all pad and `scroll-padding` by it, so the first item, and anything\n * focused or scrolled into view, rests clear of the bar. Until then, and\n * with `hideToolbar`, the chrome stays docked. An untoned `ToolbarText` in\n * the chrome lifts its title and description to AA over the content passing\n * beneath it; keep any other quiet copy in the view. With `clear`, the\n * stack's own back control sits in a glass control group\n * (`material=\"glass\"`), so it stays legible over imagery.\n */\n chromePresentation?: NavStackChromePresentation;\n /**\n * `docked` (default) gives the bottom toolbar its own band below the\n * active view. `overlay` lays it over the view's bottom edge on the\n * translucent chrome material (opaque under the same preferences as\n * `chromePresentation`), so content scrolls visibly beneath it, as under\n * an iOS toolbar. `wireNavStack` measures the live bottom toolbar (never a\n * cross-fading copy) and hands its height (bottom safe area included) to\n * the viewport as the block-end `--kui-edge-inset-*` context, so a plain\n * view, a sole `Pane`'s content (or footer), and a nested layout rest their\n * last item, and anything focused or scrolled into view, clear of it. Until\n * then, and while no bottom toolbar is shown, it stays docked. Independent\n * of `chromePresentation`, which governs only the top chrome. An untoned\n * `ToolbarText` in the toolbar lifts to AA over the content beneath it.\n */\n bottomToolbarPresentation?: NavStackBottomToolbarPresentation;\n /**\n * For `clear` chrome or bottom toolbar, `material` fades the chrome\n * material in while the active view's content lies beneath it (default\n * `none`).\n */\n scrollEdge?: ScrollEdge;\n /**\n * The scroll distance, in CSS pixels, over which the scroll edge fades in\n * (default 60).\n */\n scrollEdgeDistance?: number;\n /**\n * Paint the stack, its docked chrome and bottom toolbar, and every view in\n * an app-chosen color (a `@kerfjs/ui/css-values` color builder) instead of\n * the surface. Overlay chrome keeps the chrome material; one view's own\n * color goes in its `pane: { background }`. Forced colors paint `Canvas`.\n */\n background?: CssColor;\n /**\n * A scoped tint (`{ color, scheme }`) for the stack, its chrome, bottom toolbar, and views: its surfaces and every\n * descendant re-derive their surface and text tokens from the app's color\n * in the declared scheme, with lightness clamped to keep text at WCAG AA.\n */\n tint?: SurfaceTint;\n className?: string;\n /** Native named-slot assignment when composed inside a web component. */\n slot?: string;\n}\n\nconst DEFAULT_SAFE_AREA_EDGES = [\n 'block-start',\n 'inline-start',\n 'inline-end',\n] as const;\n\nconst DEFAULT_BOTTOM_SAFE_AREA_EDGES = [\n 'block-end',\n 'inline-start',\n 'inline-end',\n] as const;\n\nfunction chromeList(content: KerfUiContent, config?: ListConfig) {\n return (\n <List\n dividerSides={config?.dividerSides}\n gap={config?.gap}\n hAlign={config?.hAlign}\n vAlign={config?.vAlign}\n textInsets={config?.textInsets}\n controlInsets={config?.controlInsets}\n >\n {content}\n </List>\n );\n}\n\n/**\n * A navigation stack (iOS-style push/pop). Renders every entry stacked, the last\n * one active; `@kerfjs/ui/wire-nav-stack`'s `wireNavStack` slides the content and\n * cross-fades the chrome across a change. Its top chrome is a real `Toolbar`: the\n * back control and title lead, the active view's `toolbar` fills the zones,\n * and `toolbarConfig` supplies defaults. A single-pane\n * layout is a `NavStack` with one entry. See `docs/23-app-layouts.md` §3.1.\n */\nexport function NavStack({\n id,\n label,\n views,\n backLabel = 'Back',\n backIcon,\n backText,\n toolbarConfig = {},\n panelToggle,\n hideToolbar = false,\n bottomToolbar,\n separator = 'auto',\n chromeDividers = 'scroll',\n chromePresentation = 'docked',\n bottomToolbarPresentation = 'docked',\n scrollEdge = 'none',\n scrollEdgeDistance,\n background,\n tint,\n className = '',\n slot,\n}: NavStackProps) {\n const tinted = surfaceTintAttributes(tint);\n const topIndex = views.length - 1;\n const top = views[topIndex];\n const topToolbar = top?.toolbar;\n const bottom = top?.bottomToolbar ?? bottomToolbar;\n const canPop = views.length > 1;\n const topDensity = topToolbar?.density ?? toolbarConfig.density;\n // With a back control, the title centers on the bar (iOS-style) unless the\n // view owns the center zone; at the root it leads and fills, left-aligned.\n const centerTitle = canPop && topToolbar?.center === undefined;\n const title = (\n <ToolbarText\n text={topToolbar?.title ?? ''}\n size={\n topToolbar?.titleSize ??\n toolbarConfig.titleSize ??\n (canPop ? 'large' : 'xlarge')\n }\n headingLevel={topToolbar?.headingLevel ?? toolbarConfig.headingLevel}\n fill={!centerTitle}\n />\n );\n return (\n <section\n class={`kui-nav-stack ${tinted.className} ${className}`\n .replace(/\\s+/g, ' ')\n .trim()}\n id={id}\n data-component=\"nav-stack\"\n data-nav-stack-id={id}\n data-depth={String(views.length)}\n data-separator={separator}\n data-chrome-dividers={\n chromeDividers === 'always' || chromeDividers === 'none'\n ? chromeDividers\n : undefined\n }\n data-chrome-presentation={\n chromePresentation !== 'docked' && !hideToolbar ? 'overlay' : undefined\n }\n data-chrome-material={\n chromePresentation === 'clear' && !hideToolbar ? 'clear' : undefined\n }\n data-bottom-toolbar-presentation={\n bottomToolbarPresentation !== 'docked' ? 'overlay' : undefined\n }\n data-bottom-toolbar-material={\n bottomToolbarPresentation === 'clear' ? 'clear' : undefined\n }\n {...scrollEdgeAttributes(\n scrollEdge,\n scrollEdgeDistance,\n (chromePresentation === 'clear' && !hideToolbar) ||\n bottomToolbarPresentation === 'clear',\n )}\n data-background={background === undefined ? undefined : ''}\n data-kui-tint={tinted['data-kui-tint']}\n data-kui-tint-accent={tinted['data-kui-tint-accent']}\n style={joinStyles(\n background === undefined\n ? undefined\n : `--_kui-nav-stack-background:${background}`,\n tinted.style,\n )}\n aria-label={label}\n slot={slot}\n >\n {!hideToolbar && (\n <div class=\"kui-nav-stack__chrome\" data-nav-stack-chrome>\n <Toolbar\n label={topToolbar?.label ?? toolbarConfig.label}\n density={topDensity}\n dividerSides={\n topToolbar?.dividerSides ?? toolbarConfig.dividerSides\n }\n centerAlign={\n centerTitle\n ? 'balanced'\n : (topToolbar?.centerAlign ?? toolbarConfig.centerAlign)\n }\n responsive={topToolbar?.responsive ?? toolbarConfig.responsive}\n responsiveAt={\n topToolbar?.responsiveAt ?? toolbarConfig.responsiveAt\n }\n safeAreaEdges={\n topToolbar?.safeAreaEdges ??\n toolbarConfig.safeAreaEdges ??\n DEFAULT_SAFE_AREA_EDGES\n }\n leading={\n <>\n {canPop && (\n <ToolbarControlGroup\n content={backText ? 'mixed' : 'icon'}\n size={topDensity === 'compact' ? 'compact' : 'default'}\n material={\n chromePresentation === 'clear' ? 'glass' : undefined\n }\n single\n >\n <button\n type=\"button\"\n class=\"kui-nav-stack__back\"\n data-nav-back\n aria-label={backText ? undefined : backLabel}\n >\n {backIcon ?? (\n <LucideIcon\n icon={ChevronLeft}\n name=\"chevron-left\"\n className=\"kui-nav-stack__back-icon\"\n />\n )}\n {backText ? <span>{backText}</span> : null}\n </button>\n </ToolbarControlGroup>\n )}\n {topToolbar?.leading}\n {centerTitle ? null : title}\n </>\n }\n center={centerTitle ? title : topToolbar?.center}\n trailing={\n <>\n {topToolbar?.trailing}\n {panelToggle}\n </>\n }\n />\n </div>\n )}\n <div class=\"kui-nav-stack__viewport\" data-nav-stack-viewport>\n {views.map((view, index) => (\n <article\n class=\"kui-nav-stack__view\"\n data-key={view.key}\n data-nav-key={view.key}\n data-nav-active={String(index === topIndex)}\n aria-hidden={String(index !== topIndex)}\n >\n {view.pane ||\n view.header !== undefined ||\n view.footer !== undefined ? (\n <Pane\n {...paneConfigProps(view.pane)}\n header={\n view.header === undefined ? undefined : (\n <div data-nav-stack-header>\n {chromeList(view.header, view.headerList)}\n </div>\n )\n }\n footer={\n view.footer === undefined ? undefined : (\n <div data-nav-stack-footer>\n {chromeList(view.footer, view.footerList)}\n </div>\n )\n }\n >\n {view.content}\n </Pane>\n ) : (\n view.content\n )}\n </article>\n ))}\n </div>\n {bottom && (\n <footer class=\"kui-nav-stack__bottom\" data-nav-stack-bottom>\n <Toolbar\n position=\"footer\"\n label={bottom.label}\n density={bottom.density}\n dividerSides={bottom.dividerSides}\n centerAlign={bottom.centerAlign}\n responsive={bottom.responsive}\n responsiveAt={bottom.responsiveAt}\n safeAreaEdges={\n bottom.safeAreaEdges ?? DEFAULT_BOTTOM_SAFE_AREA_EDGES\n }\n leading={bottom.leading}\n center={bottom.center}\n trailing={bottom.trailing}\n />\n </footer>\n )}\n </section>\n );\n}\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/shared/layout/scroll-edge.ts","../src/shared/styles/surface-tint.ts"],"names":[],"mappings":";AAaO,SAAS,oBAAA,CACd,IAAA,EACA,QAAA,EACA,OAAA,EAIA;AACA,EAAA,IAAI,CAAC,WAAW,IAAA,KAAS,MAAA;AACvB,IAAA,OAAO;AAAA,MACL,kBAAA,EAAoB,MAAA;AAAA,MACpB,2BAAA,EAA6B;AAAA,KAC/B;AACF,EAAA,OAAO;AAAA,IACL,kBAAA,EAAoB,IAAA;AAAA,IACpB,2BAAA,EACE,aAAa,MAAA,IAAa,EAAE,WAAW,CAAA,CAAA,GAAK,MAAA,GAAY,OAAO,QAAQ;AAAA,GAC3E;AACF;;;ACLO,SAAS,sBAAsB,IAAA,EAOpC;AACA,EAAA,IAAI,IAAA,KAAS,MAAA;AACX,IAAA,OAAO;AAAA,MACL,eAAA,EAAiB,MAAA;AAAA,MACjB,sBAAA,EAAwB,MAAA;AAAA,MACxB,SAAA,EAAW,EAAA;AAAA,MACX,KAAA,EAAO;AAAA,KACT;AACF,EAAA,OAAO;AAAA,IACL,iBAAiB,IAAA,CAAK,MAAA;AAAA,IACtB,sBAAA,EAAwB,IAAA,CAAK,MAAA,KAAW,MAAA,GAAY,MAAA,GAAY,EAAA;AAAA,IAChE,SAAA,EAAW,CAAA,GAAA,EAAM,IAAA,CAAK,MAAM,CAAA,CAAA;AAAA,IAC5B,KAAA,EACE,IAAA,CAAK,MAAA,KAAW,MAAA,GACZ,CAAA,kBAAA,EAAqB,IAAA,CAAK,KAAK,CAAA,CAAA,GAC/B,CAAA,kBAAA,EAAqB,IAAA,CAAK,KAAK,CAAA,oBAAA,EAAuB,KAAK,MAAM,CAAA;AAAA,GACzE;AACF;AAGO,SAAS,cACX,YAAA,EACiB;AACpB,EAAA,MAAM,UAAU,YAAA,CAAa,MAAA,CAAO,CAAC,KAAA,KAAU,UAAU,MAAS,CAAA;AAClE,EAAA,OAAO,QAAQ,MAAA,KAAW,CAAA,GAAI,MAAA,GAAY,OAAA,CAAQ,KAAK,GAAG,CAAA;AAC5D","file":"chunk-SQ5DH66U.js","sourcesContent":["/**\n * What clear (fully transparent) chrome fades in as content scrolls beneath\n * it: `none` stays clear; `material` fades in the translucent chrome\n * material; `surface` fades in the opaque surface. The fade tracks the scroll\n * over `scrollEdgeDistance` (opacity only), from the scroll state\n * `wireScrollDividers` reports; unwired, the chrome stays clear.\n */\nexport type ScrollEdge = 'none' | 'material' | 'surface';\n\n/** The default scroll distance, in CSS pixels, a scroll edge fades in over. */\nexport const DEFAULT_SCROLL_EDGE_DISTANCE = 60;\n\n/** The root attributes a component with a scroll edge renders. */\nexport function scrollEdgeAttributes(\n edge: ScrollEdge,\n distance: number | undefined,\n enabled: boolean,\n): {\n 'data-scroll-edge': 'material' | 'surface' | undefined;\n 'data-scroll-edge-distance': string | undefined;\n} {\n if (!enabled || edge === 'none')\n return {\n 'data-scroll-edge': undefined,\n 'data-scroll-edge-distance': undefined,\n };\n return {\n 'data-scroll-edge': edge,\n 'data-scroll-edge-distance':\n distance === undefined || !(distance > 0) ? undefined : String(distance),\n };\n}\n","import type { CssColor } from './css-values.js';\n\n/** The color scheme an app declares for a {@link SurfaceTint}'s color. */\nexport type SurfaceTintScheme = 'light' | 'dark';\n\n/**\n * A scoped tint for a layout surface: the app's color (usually sampled from\n * artwork it already knows) and the scheme that color belongs to. Kerf does no\n * color detection; `scheme` says whether the color reads as a light or a dark\n * surface. Inside the scope the surface, raised surface, text, quiet text, and\n * everything built on them (quiet fills, separators' backdrop, the chrome\n * material) re-derive from the color, with lightness clamped so text keeps\n * WCAG AA over any color.\n */\nexport interface SurfaceTint {\n color: CssColor;\n scheme: SurfaceTintScheme;\n /**\n * An optional accent (usually the artwork's most vivid color). The scope's\n * brand ramp re-derives from it: loud fills and their text, brand text and\n * links, text on brand fills, and the focus ring, each clamped to keep AA.\n */\n accent?: CssColor;\n}\n\n/** The root attributes a tinted surface renders. */\nexport function surfaceTintAttributes(tint: SurfaceTint | undefined): {\n 'data-kui-tint': SurfaceTintScheme | undefined;\n 'data-kui-tint-accent': '' | undefined;\n /** The Web Awesome scheme class, so its theme re-derives in the scope. */\n className: string;\n /** The inline declaration carrying the color, or `undefined`. */\n style: string | undefined;\n} {\n if (tint === undefined)\n return {\n 'data-kui-tint': undefined,\n 'data-kui-tint-accent': undefined,\n className: '',\n style: undefined,\n };\n return {\n 'data-kui-tint': tint.scheme,\n 'data-kui-tint-accent': tint.accent === undefined ? undefined : '',\n className: `wa-${tint.scheme}`,\n style:\n tint.accent === undefined\n ? `--_kui-tint-color:${tint.color}`\n : `--_kui-tint-color:${tint.color};--_kui-tint-accent:${tint.accent}`,\n };\n}\n\n/** Join inline declarations, omitting absent ones. */\nexport function joinStyles(\n ...declarations: (string | undefined)[]\n): string | undefined {\n const present = declarations.filter((value) => value !== undefined);\n return present.length === 0 ? undefined : present.join(';');\n}\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/shared/content/list-icon-tile.ts","../src/shared/dom/draggable.ts","../src/shared/text/word-breaks.tsx"],"names":[],"mappings":";;;AAoBA,IAAM,SAAA,GAAyC;AAAA,EAC7C,SAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA;AACA,IAAM,WAAA,GAAc,qBAAA;AAEpB,SAAS,gBAAA,CAAiB,OAAe,QAAA,EAA0B;AACjE,EAAA,MAAM,KAAA,GAAQ,MAAM,IAAA,EAAK;AACzB,EAAA,IAAI,CAAC,KAAA,IAAS,WAAA,CAAY,IAAA,CAAK,KAAK,CAAA;AAClC,IAAA,MAAM,IAAI,SAAA,CAAU,CAAA,SAAA,EAAY,QAAQ,CAAA,8BAAA,CAAgC,CAAA;AAC1E,EAAA,OAAO,KAAA;AACT;AAUO,SAAS,wBAAA,CACd,MACA,SAAA,EAC0B;AAC1B,EAAA,IAAI,IAAA,KAAS,MAAA;AACX,IAAA,OAAO,EAAE,IAAA,EAAM,MAAA,EAAW,IAAA,EAAM,MAAA,EAAW,OAAO,MAAA,EAAU;AAC9D,EAAA,IAAI,OAAO,SAAS,QAAA,EAAU;AAC5B,IAAA,IAAI,CAAC,SAAA,CAAU,QAAA,CAAS,IAAI,CAAA;AAC1B,MAAA,MAAM,IAAI,UAAA,CAAW,CAAA,+BAAA,EAAkC,MAAA,CAAO,IAAI,CAAC,CAAA,CAAA,CAAG,CAAA;AACxE,IAAA,OAAO,EAAE,IAAA,EAAM,MAAA,EAAQ,IAAA,EAAM,IAAA,EAAM,OAAO,MAAA,EAAU;AAAA,EACtD;AACA,EAAA,MAAM,YAAA,GAAe;AAAA,IACnB,UAAU,SAAS,CAAA,iBAAA,EAAoB,iBAAiB,IAAA,CAAK,KAAA,EAAO,OAAO,CAAC,CAAA;AAAA,GAC9E;AACA,EAAA,IAAI,KAAK,UAAA,KAAe,MAAA;AACtB,IAAA,YAAA,CAAa,IAAA;AAAA,MACX,UAAU,SAAS,CAAA,uBAAA,EAA0B,iBAAiB,IAAA,CAAK,UAAA,EAAY,YAAY,CAAC,CAAA;AAAA,KAC9F;AACF,EAAA,OAAO,EAAE,MAAM,OAAA,EAAS,IAAA,EAAM,QAAW,KAAA,EAAO,YAAA,CAAa,IAAA,CAAK,IAAI,CAAA,EAAE;AAC1E;;;AC3DO,SAAS,eAAA,CACd,WACA,WAAA,EAC8B;AAC9B,EAAA,IAAI,SAAA,KAAc,QAAW,OAAO,MAAA;AACpC,EAAA,OAAO,SAAA,IAAa,CAAC,WAAA,GAAc,MAAA,GAAS,OAAA;AAC9C;ACNA,IAAM,cAAA,GACJ,2DAAA;AAQK,SAAS,eAAe,KAAA,EAA6C;AAC1E,EAAA,IAAI,OAAO,KAAA,KAAU,QAAA,EAAU,OAAO,KAAA;AACtC,EAAA,MAAM,KAAA,GAAQ,KAAA,CAAM,KAAA,CAAM,cAAc,CAAA;AACxC,EAAA,IAAI,KAAA,CAAM,MAAA,GAAS,CAAA,EAAG,OAAO,KAAA;AAC7B,EAAA,uCAEK,QAAA,EAAA,KAAA,CAAM,GAAA,CAAI,CAAC,IAAA,EAAM,0BAChB,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,KAAA,GAAQ,CAAA,mBAAI,GAAA,CAAC,KAAA,EAAA,EAAI,CAAA,GAAK,IAAA;AAAA,IACtB;AAAA,GAAA,EACH,CACD,CAAA,EACH,CAAA;AAEJ","file":"chunk-ZNROKDSZ.js","sourcesContent":["import type { CssColor, CssForegroundColor } from '../styles/css-values.js';\n\n/**\n * Quiet tile palette for a list row's leading icon: the same fill, border, and\n * foreground roles as `ToolbarControlGroup`'s `tileTone`.\n */\nexport type ListIconTileTone =\n 'neutral' | 'brand' | 'success' | 'warning' | 'danger';\n\n/** A list row's leading icon tile filled with an application-chosen color. */\nexport interface ListIconTileColor {\n /** The tile fill: `uiColor()`, `colorVar()`, or `fillColor()` for an app color such as `#e5484d`. */\n color: CssColor;\n /** The glyph color over the fill. Defaults to black or white, whichever contrasts with `color`. */\n foreground?: CssForegroundColor;\n}\n\n/** A filled leading icon tile: a quiet tone preset or an application color. */\nexport type ListIconTile = ListIconTileTone | ListIconTileColor;\n\nconst tileTones: readonly ListIconTileTone[] = [\n 'neutral',\n 'brand',\n 'success',\n 'warning',\n 'danger',\n];\nconst unsafeColor = /[;{}<>\"'\\\\]|\\p{Cc}/u;\n\nfunction colorDeclaration(value: string, property: string): string {\n const color = value.trim();\n if (!color || unsafeColor.test(color))\n throw new TypeError(`iconTile ${property} requires one CSS color value.`);\n return color;\n}\n\n/** Root data attributes and the icon slot's custom properties for a tile. */\nexport interface ListIconTilePresentation {\n tile: 'tone' | 'color' | undefined;\n tone: ListIconTileTone | undefined;\n style: string | undefined;\n}\n\n/** Validate a row's `iconTile` and resolve how its icon slot renders it. */\nexport function listIconTilePresentation(\n tile: ListIconTile | undefined,\n component: 'list-item' | 'list-action-row',\n): ListIconTilePresentation {\n if (tile === undefined)\n return { tile: undefined, tone: undefined, style: undefined };\n if (typeof tile === 'string') {\n if (!tileTones.includes(tile))\n throw new RangeError(`iconTile received unknown tone ${String(tile)}.`);\n return { tile: 'tone', tone: tile, style: undefined };\n }\n const declarations = [\n `--_kui-${component}-icon-tile-fill: ${colorDeclaration(tile.color, 'color')}`,\n ];\n if (tile.foreground !== undefined)\n declarations.push(\n `--_kui-${component}-icon-tile-foreground: ${colorDeclaration(tile.foreground, 'foreground')}`,\n );\n return { tile: 'color', tone: undefined, style: declarations.join('; ') };\n}\n","/**\n * The native `draggable` attribute value for a component root: omitted unless\n * the author set it, and never `\"true\"` on an inert loading placeholder.\n */\nexport function nativeDraggable(\n draggable: boolean | undefined,\n placeholder: boolean,\n): 'true' | 'false' | undefined {\n if (draggable === undefined) return undefined;\n return draggable && !placeholder ? 'true' : 'false';\n}\n","import type { SafeHtml } from 'kerfjs';\n\n// A lowercase letter or digit followed by an uppercase letter (\"ticketBoard\"),\n// or an acronym followed by a capitalized word (\"HTMLParser\" → \"HTML|Parser\").\nconst CAMEL_BOUNDARY =\n /(?<=[\\p{Ll}\\p{N}])(?=\\p{Lu})|(?<=\\p{Lu})(?=\\p{Lu}\\p{Ll})/u;\n\n/**\n * A label with line-break opportunities (`<wbr>`) at camelCase boundaries, so a\n * wrapping row breaks a long identifier-like name (`QuickTicketComposer`) at a\n * word boundary instead of mid-word. The text, and so the accessible name, is\n * unchanged; a `SafeHtml` label is returned as given.\n */\nexport function withWordBreaks(label: string | SafeHtml): string | SafeHtml {\n if (typeof label !== 'string') return label;\n const parts = label.split(CAMEL_BOUNDARY);\n if (parts.length < 2) return label;\n return (\n <>\n {parts.map((part, index) => (\n <>\n {index > 0 ? <wbr /> : null}\n {part}\n </>\n ))}\n </>\n );\n}\n"]}
|