@kerfjs/ui 5.0.0-beta.73 → 5.0.0-beta.75
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/ai/component-catalog.json +34 -6
- package/ai/component-composition.json +10 -3
- package/ai/components/foundation.md +1 -1
- package/ai/components/list-header.md +2 -1
- package/ai/components/list.md +3 -2
- package/ai/components/lucide-icon.md +9 -1
- package/ai/components/select.md +5 -4
- package/ai/public-api-signatures-v1.md +16 -4
- package/ai/skill.md +4 -0
- package/ai/webawesome-jsx-signatures-v1.md +1 -1
- package/dist/app-tab.js +1 -1
- package/dist/catalog.js +66 -28
- package/dist/catalog.js.map +1 -1
- package/dist/{chunk-W2AC6Q2A.js → chunk-4FEVHE7C.js} +2 -2
- package/dist/{chunk-W2AC6Q2A.js.map → chunk-4FEVHE7C.js.map} +1 -1
- package/dist/{chunk-2IGHGE3M.js → chunk-5TTZPGUY.js} +4 -4
- package/dist/{chunk-2IGHGE3M.js.map → chunk-5TTZPGUY.js.map} +1 -1
- package/dist/{chunk-RT5WKYX3.js → chunk-5UGLKFBF.js} +3 -3
- package/dist/{chunk-RT5WKYX3.js.map → chunk-5UGLKFBF.js.map} +1 -1
- package/dist/{chunk-KFJSNWO4.js → chunk-DA3HS64I.js} +3 -3
- package/dist/{chunk-KFJSNWO4.js.map → chunk-DA3HS64I.js.map} +1 -1
- package/dist/{chunk-WTSNV5RG.js → chunk-DUBUXJA3.js} +7 -3
- package/dist/chunk-DUBUXJA3.js.map +1 -0
- package/dist/{chunk-B2ZMR7NY.js → chunk-EHIMH4J7.js} +2 -2
- package/dist/{chunk-B2ZMR7NY.js.map → chunk-EHIMH4J7.js.map} +1 -1
- package/dist/{chunk-RVERAFFY.js → chunk-FKPKGP2H.js} +2 -2
- package/dist/{chunk-RVERAFFY.js.map → chunk-FKPKGP2H.js.map} +1 -1
- package/dist/{chunk-2RMDP7HQ.js → chunk-GRHJQWV2.js} +4 -4
- package/dist/{chunk-2RMDP7HQ.js.map → chunk-GRHJQWV2.js.map} +1 -1
- package/dist/{chunk-IJNYCPAU.js → chunk-HKVJ5MW3.js} +3 -3
- package/dist/{chunk-IJNYCPAU.js.map → chunk-HKVJ5MW3.js.map} +1 -1
- package/dist/{chunk-6LAQWWEX.js → chunk-HXTAPIHQ.js} +4 -4
- package/dist/{chunk-6LAQWWEX.js.map → chunk-HXTAPIHQ.js.map} +1 -1
- package/dist/{chunk-KZRR7NNV.js → chunk-JA4J7Y4C.js} +2 -2
- package/dist/{chunk-KZRR7NNV.js.map → chunk-JA4J7Y4C.js.map} +1 -1
- package/dist/{chunk-TT5ROTQK.js → chunk-JGIV6ZDA.js} +2 -2
- package/dist/{chunk-TT5ROTQK.js.map → chunk-JGIV6ZDA.js.map} +1 -1
- package/dist/{chunk-3DOHW3K4.js → chunk-LHSUPNSE.js} +2 -2
- package/dist/{chunk-3DOHW3K4.js.map → chunk-LHSUPNSE.js.map} +1 -1
- package/dist/{chunk-DB5ADJKF.js → chunk-NPNSKX3K.js} +2 -2
- package/dist/{chunk-DB5ADJKF.js.map → chunk-NPNSKX3K.js.map} +1 -1
- package/dist/{chunk-33EOFAUN.js → chunk-O5GM2JAM.js} +4 -4
- package/dist/{chunk-33EOFAUN.js.map → chunk-O5GM2JAM.js.map} +1 -1
- package/dist/{chunk-L67OYMGE.js → chunk-OYQIONQF.js} +4 -4
- package/dist/{chunk-L67OYMGE.js.map → chunk-OYQIONQF.js.map} +1 -1
- package/dist/{chunk-HFBI4ZGP.js → chunk-PL26TKNK.js} +8 -4
- package/dist/chunk-PL26TKNK.js.map +1 -0
- package/dist/{chunk-2G2ZJQYK.js → chunk-RFGW735Q.js} +8 -2
- package/dist/chunk-RFGW735Q.js.map +1 -0
- package/dist/{chunk-I6FTU27I.js → chunk-SVLDRGPJ.js} +2 -2
- package/dist/{chunk-I6FTU27I.js.map → chunk-SVLDRGPJ.js.map} +1 -1
- package/dist/{chunk-VZOFZPSO.js → chunk-SX7FJXPJ.js} +2 -2
- package/dist/{chunk-VZOFZPSO.js.map → chunk-SX7FJXPJ.js.map} +1 -1
- package/dist/{chunk-ZSJOLL3S.js → chunk-TCXDZNCX.js} +4 -4
- package/dist/{chunk-ZSJOLL3S.js.map → chunk-TCXDZNCX.js.map} +1 -1
- package/dist/{chunk-BGD7EHUE.js → chunk-TOICTHR2.js} +2 -2
- package/dist/{chunk-BGD7EHUE.js.map → chunk-TOICTHR2.js.map} +1 -1
- package/dist/{chunk-7KHKLG5C.js → chunk-V4GAQ74C.js} +3 -3
- package/dist/{chunk-7KHKLG5C.js.map → chunk-V4GAQ74C.js.map} +1 -1
- package/dist/{chunk-G4S2QU6V.js → chunk-VA5TN5PR.js} +2 -2
- package/dist/{chunk-G4S2QU6V.js.map → chunk-VA5TN5PR.js.map} +1 -1
- package/dist/collapsible-panel.js +3 -3
- package/dist/css-values.d.ts +6 -1
- package/dist/css-values.js +1 -1
- package/dist/disclosure-arrow.js +1 -1
- package/dist/empty-state.js +1 -1
- package/dist/grid.js +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +21 -21
- package/dist/list-action-row.js +1 -1
- package/dist/list-header.d.ts +4 -1
- package/dist/list-header.js +1 -1
- package/dist/list-item.js +1 -1
- package/dist/list.js +1 -1
- package/dist/loading-spinner.d.ts +1 -0
- package/dist/loading-spinner.js +1 -1
- package/dist/lucide-icon.d.ts +4 -1
- package/dist/lucide-icon.js +1 -1
- package/dist/nav-stack.js +1 -1
- package/dist/row.js +1 -1
- package/dist/select.js +1 -1
- package/dist/skeleton.js +1 -1
- package/dist/spacer.js +1 -1
- package/dist/split-view.js +1 -1
- package/dist/state-banner.js +1 -1
- package/dist/styles/catalog/components/catalog.css +38 -0
- package/dist/styles/foundation.css +1 -0
- package/dist/styles/text.css +27 -0
- package/dist/token-search-field.js +1 -1
- package/dist/toolbar-control-group.js +1 -1
- package/dist/toolbar-text.js +1 -1
- package/dist/value-table.js +1 -1
- package/dist/wire-catalog.js +80 -0
- package/dist/wire-catalog.js.map +1 -1
- package/dist/wire-token-search-fields.js +1 -1
- package/dist/workbench.js +1 -1
- package/docs/catalog.md +13 -3
- package/docs/component-selection.md +1 -1
- package/docs/design/templates/list-header/size-l-dark.svg +1 -0
- package/docs/design/templates/list-header/size-l.svg +1 -0
- package/docs/design/templates/list-header/size-m-dark.svg +1 -0
- package/docs/design/templates/list-header/size-m.svg +1 -0
- package/docs/design/templates/list-header/size-xl-dark.svg +1 -0
- package/docs/design/templates/list-header/size-xl.svg +1 -0
- package/docs/design/templates/list-header/size-xs-dark.svg +1 -0
- package/docs/design/templates/list-header/size-xs.svg +1 -0
- package/docs/design/templates/list-header-dark.svg +1 -1
- package/docs/design/templates/list-header.svg +1 -1
- package/docs/layout.md +7 -0
- package/docs/type-contracts.md +17 -17
- package/docs/ux-demo.md +4 -1
- package/llms.txt +6 -3
- package/package.json +1 -1
- package/dist/chunk-2G2ZJQYK.js.map +0 -1
- package/dist/chunk-HFBI4ZGP.js.map +0 -1
- package/dist/chunk-WTSNV5RG.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/list-action-row.tsx"],"names":[],"mappings":"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","file":"chunk-ZSJOLL3S.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { em, remify } from './css-values.js';\nimport {\n filterControlAttributes,\n filterDataAttributes,\n} from './extension-attributes.js';\nimport { LoadingSpinner } from './loading-spinner.js';\nimport { Skeleton } from './skeleton.js';\nimport { withWordBreaks } from './word-breaks.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-multiline',\n 'data-density',\n 'data-divider',\n 'data-busy',\n 'data-trailing-visibility',\n 'data-state',\n 'data-selected',\n 'data-pressed',\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-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 }\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\nexport interface ListActionRowProps {\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 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 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 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 trailingActionVisibility?: 'always' | 'interaction';\n className?: string;\n rootAttributes?: ListActionRowRootAttributes;\n trailingActionAttributes?: ListActionRowTrailingAttributes;\n /** Native named-slot assignment when composed inside a web component. */\n slot?: string;\n}\n\nexport function ListActionRow({\n label,\n description,\n status,\n busy = false,\n density = 'standard',\n divider = 'none',\n icon,\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 trailingAction,\n trailingActionLabel,\n trailingActionIcon,\n trailingActionDisabled = false,\n trailingActionTitle,\n trailingActionVisibility = 'always',\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\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-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 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 class=\"kui-list-action-row__icon\">\n {placeholder ? (\n <Skeleton block width={remify(18)} height={remify(18)} />\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 <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 </div>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/list-action-row.tsx"],"names":[],"mappings":"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","file":"chunk-TCXDZNCX.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { em, remify } from './css-values.js';\nimport {\n filterControlAttributes,\n filterDataAttributes,\n} from './extension-attributes.js';\nimport { LoadingSpinner } from './loading-spinner.js';\nimport { Skeleton } from './skeleton.js';\nimport { withWordBreaks } from './word-breaks.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-multiline',\n 'data-density',\n 'data-divider',\n 'data-busy',\n 'data-trailing-visibility',\n 'data-state',\n 'data-selected',\n 'data-pressed',\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-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 }\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\nexport interface ListActionRowProps {\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 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 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 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 trailingActionVisibility?: 'always' | 'interaction';\n className?: string;\n rootAttributes?: ListActionRowRootAttributes;\n trailingActionAttributes?: ListActionRowTrailingAttributes;\n /** Native named-slot assignment when composed inside a web component. */\n slot?: string;\n}\n\nexport function ListActionRow({\n label,\n description,\n status,\n busy = false,\n density = 'standard',\n divider = 'none',\n icon,\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 trailingAction,\n trailingActionLabel,\n trailingActionIcon,\n trailingActionDisabled = false,\n trailingActionTitle,\n trailingActionVisibility = 'always',\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\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-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 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 class=\"kui-list-action-row__icon\">\n {placeholder ? (\n <Skeleton block width={remify(18)} height={remify(18)} />\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 <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 </div>\n );\n}\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { LoadingSpinner } from './chunk-
|
|
1
|
+
import { LoadingSpinner } from './chunk-SVLDRGPJ.js';
|
|
2
2
|
import { isSafeHtml } from 'kerfjs';
|
|
3
3
|
import { jsxs, jsx, Fragment } from 'kerfjs/jsx-runtime';
|
|
4
4
|
|
|
@@ -128,4 +128,4 @@ function ToolbarControlGroup({
|
|
|
128
128
|
|
|
129
129
|
export { ToolbarActionLink, ToolbarControlGroup, isRelocatableGroup };
|
|
130
130
|
|
|
131
|
-
//# sourceMappingURL=chunk-
|
|
131
|
+
//# sourceMappingURL=chunk-TOICTHR2.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/panel-toolbar-group.ts","../src/toolbar-control-group.tsx"],"names":[],"mappings":"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","file":"chunk-BGD7EHUE.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 { LoadingSpinner } from './loading-spinner.js';\nimport { markRelocatableGroup } from './panel-toolbar-group.js';\nimport type { KerfUiContent } from './semantic-content.js';\n\nexport type ToolbarControlGroupAppearance = 'contained' | 'borderless';\nexport type ToolbarControlGroupTone = 'default' | 'dark';\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 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 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 /** Responsive visibility owned by the enclosing Toolbar container. */\n visibility?: ToolbarControlGroupVisibility;\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 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 visibility = 'always',\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-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-visibility={visibility}\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 = relocateOnCollapse\n ? markRelocatableGroup(group)\n : group;\n return busy ? (\n <>\n {renderedGroup}\n <span class=\"kui-toolbar-control-group__busy-status\" role=\"status\">\n {busyLabel}\n </span>\n </>\n ) : (\n renderedGroup\n );\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/panel-toolbar-group.ts","../src/toolbar-control-group.tsx"],"names":[],"mappings":"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","file":"chunk-TOICTHR2.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 { LoadingSpinner } from './loading-spinner.js';\nimport { markRelocatableGroup } from './panel-toolbar-group.js';\nimport type { KerfUiContent } from './semantic-content.js';\n\nexport type ToolbarControlGroupAppearance = 'contained' | 'borderless';\nexport type ToolbarControlGroupTone = 'default' | 'dark';\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 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 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 /** Responsive visibility owned by the enclosing Toolbar container. */\n visibility?: ToolbarControlGroupVisibility;\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 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 visibility = 'always',\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-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-visibility={visibility}\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 = relocateOnCollapse\n ? markRelocatableGroup(group)\n : group;\n return busy ? (\n <>\n {renderedGroup}\n <span class=\"kui-toolbar-control-group__busy-status\" role=\"status\">\n {busyLabel}\n </span>\n </>\n ) : (\n renderedGroup\n );\n}\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { Skeleton } from './chunk-
|
|
1
|
+
import { Skeleton } from './chunk-JGIV6ZDA.js';
|
|
2
2
|
import { filterDataAttributes } from './chunk-SRSJO5QE.js';
|
|
3
|
-
import { em } from './chunk-
|
|
3
|
+
import { em } from './chunk-RFGW735Q.js';
|
|
4
4
|
import { jsxs, jsx } from 'kerfjs/jsx-runtime';
|
|
5
5
|
|
|
6
6
|
var PROTECTED_ROOT_DATA_ATTRIBUTES = /* @__PURE__ */ new Set([
|
|
@@ -135,4 +135,4 @@ function AppTab({
|
|
|
135
135
|
|
|
136
136
|
export { AppTab };
|
|
137
137
|
|
|
138
|
-
//# sourceMappingURL=chunk-
|
|
138
|
+
//# sourceMappingURL=chunk-V4GAQ74C.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/app-tab.tsx"],"names":[],"mappings":"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","file":"chunk-7KHKLG5C.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { em } from './css-values.js';\nimport { filterDataAttributes } from './extension-attributes.js';\nimport type { KerfUiContent } from './semantic-content.js';\nimport { Skeleton } from './skeleton.js';\n\nconst PROTECTED_ROOT_DATA_ATTRIBUTES = new Set([\n 'data-component',\n 'data-action',\n 'data-tab-id',\n 'data-selected',\n 'data-tab-dragging',\n 'data-tab-drop-position',\n 'data-attention',\n 'data-drop-target',\n 'data-name-overflow',\n 'data-pinned',\n]);\n\ntype AppTabRootAttributes = Readonly<\n Record<`data-${string}`, string | undefined> & {\n 'data-component'?: never;\n 'data-action'?: never;\n 'data-tab-id'?: never;\n 'data-selected'?: never;\n 'data-tab-dragging'?: never;\n 'data-tab-drop-position'?: never;\n 'data-attention'?: never;\n 'data-drop-target'?: never;\n 'data-name-overflow'?: never;\n 'data-pinned'?: never;\n }\n>;\n\nexport type AppTabPresentation = 'pill' | 'segmented' | 'icon-only';\nexport type AppTabSize = 'default' | 'compact';\nexport type AppTabNameOverflow = 'ellipsis' | 'visible';\n\nexport interface AppTabProps {\n id: string;\n name: string;\n selected?: boolean;\n /** Emphasize the visible tab name with the attention color token. */\n attention?: boolean;\n /** Highlight this tab as the target of a drag over its content. */\n dropTarget?: boolean;\n /** Keep the leading tab visible within its TabBar tablist while peers scroll. */\n pinned?: boolean;\n closable?: boolean;\n draggable?: boolean;\n leading?: KerfUiContent;\n trailing?: KerfUiContent;\n /** Visual treatment within a TabBar. Icon-only tabs retain `name` as their accessible name. */\n presentation?: AppTabPresentation;\n /** Compact tabs use the 32px application-rail height. */\n size?: AppTabSize;\n /** Maximum visible label width in CSS pixels before ellipsis. */\n labelMaxWidth?: number;\n /** Keep the full name visible for an inline loading treatment. */\n nameOverflow?: AppTabNameOverflow;\n /** Decorative dormant content for the close button. Must not contain interactive descendants. */\n closeIcon?: SafeHtml;\n selectAction?: string;\n closeAction?: string;\n className?: string;\n /** Render as an unanimated loading skeleton, disabling select/close and dragging. */\n placeholder?: boolean;\n /**\n * Named and still opening: the tab is known but its content is loading.\n * Keeps `name` visible in the quiet text color and as the tab's accessible\n * name, shows `trailing` (for example a `LoadingSpinner`), and marks the\n * tab `aria-busy`. Unlike `placeholder` it stays selectable — the\n * application shows placeholder content in its panel until loading\n * completes — while close and dragging stay disabled. Same pill geometry\n * as the live tab, so swapping it in place does not shift the bar.\n * `placeholder` wins when both are set.\n */\n pending?: boolean;\n rootAttributes?: AppTabRootAttributes;\n /** Native named-slot assignment when composed inside a web component. */\n slot?: string;\n}\n\nfunction CloseIcon() {\n return (\n <svg\n aria-hidden=\"true\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2.25\"\n stroke-linecap=\"round\"\n >\n <path d=\"m7 7 10 10\" />\n <path d=\"M17 7 7 17\" />\n </svg>\n );\n}\n\nexport function AppTab({\n id,\n name,\n selected = false,\n attention = false,\n dropTarget = false,\n pinned = false,\n closable = true,\n draggable = false,\n leading,\n trailing,\n presentation = 'pill',\n size = 'default',\n labelMaxWidth,\n nameOverflow = 'ellipsis',\n closeIcon,\n selectAction = 'select-tab',\n closeAction = 'close-tab',\n className = '',\n placeholder = false,\n pending = false,\n rootAttributes = {},\n slot,\n}: AppTabProps) {\n // Both loading states disable close and dragging; a `placeholder` (unknown\n // tab) is also unselectable and hides its name, while a `pending` (known,\n // still opening) tab stays selectable so its panel can show placeholders.\n const dormant = placeholder || pending;\n const named = pending && !placeholder;\n const keyshortcuts = [\n closable && !dormant ? 'Delete Backspace' : '',\n draggable && !dormant ? 'Alt+Shift+ArrowLeft Alt+Shift+ArrowRight' : '',\n ]\n .filter(Boolean)\n .join(' ');\n const extensionAttributes = filterDataAttributes(\n rootAttributes,\n PROTECTED_ROOT_DATA_ATTRIBUTES,\n );\n return (\n <div\n {...extensionAttributes}\n class={`kui-app-tab ${className}`.trim()}\n data-component=\"app-tab\"\n data-tab-id={id}\n data-selected={String(selected)}\n data-attention={attention ? 'true' : undefined}\n data-drop-target={dropTarget ? 'true' : undefined}\n data-pinned={pinned ? 'true' : undefined}\n data-name-overflow={nameOverflow}\n data-presentation={presentation}\n data-size={size}\n data-placeholder={placeholder ? 'true' : undefined}\n data-pending={named ? 'true' : undefined}\n draggable={dormant ? 'false' : draggable ? 'true' : 'false'}\n aria-busy={dormant ? 'true' : undefined}\n style={\n labelMaxWidth === undefined\n ? undefined\n : `--kui-app-tab-label-max-width:${labelMaxWidth}px`\n }\n slot={slot}\n >\n {closable && (\n <button\n type=\"button\"\n tabindex=\"-1\"\n class=\"kui-app-tab__close\"\n data-action={dormant ? undefined : closeAction}\n data-tab-id={id}\n disabled={dormant || undefined}\n aria-label={`Close ${name}`}\n title={`Close ${name}`}\n >\n <span class=\"kui-app-tab__close-icon\" aria-hidden=\"true\">\n {closeIcon ?? <CloseIcon />}\n </span>\n </button>\n )}\n <button\n type=\"button\"\n class=\"kui-app-tab__select\"\n role=\"tab\"\n aria-selected={String(selected)}\n aria-label={presentation === 'icon-only' || named ? name : undefined}\n aria-keyshortcuts={keyshortcuts || undefined}\n data-action={placeholder ? undefined : selectAction}\n data-tab-id={id}\n disabled={placeholder || undefined}\n tabindex={!placeholder && selected ? '0' : '-1'}\n >\n {leading}\n <span\n class=\"kui-app-tab__name\"\n aria-hidden={presentation === 'icon-only' ? 'true' : undefined}\n >\n {placeholder ? <Skeleton width={em(7)} /> : name}\n </span>\n {closable || trailing ? (\n <span class=\"kui-app-tab__trailing\">{trailing}</span>\n ) : undefined}\n </button>\n </div>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/app-tab.tsx"],"names":[],"mappings":"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","file":"chunk-V4GAQ74C.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nimport { em } from './css-values.js';\nimport { filterDataAttributes } from './extension-attributes.js';\nimport type { KerfUiContent } from './semantic-content.js';\nimport { Skeleton } from './skeleton.js';\n\nconst PROTECTED_ROOT_DATA_ATTRIBUTES = new Set([\n 'data-component',\n 'data-action',\n 'data-tab-id',\n 'data-selected',\n 'data-tab-dragging',\n 'data-tab-drop-position',\n 'data-attention',\n 'data-drop-target',\n 'data-name-overflow',\n 'data-pinned',\n]);\n\ntype AppTabRootAttributes = Readonly<\n Record<`data-${string}`, string | undefined> & {\n 'data-component'?: never;\n 'data-action'?: never;\n 'data-tab-id'?: never;\n 'data-selected'?: never;\n 'data-tab-dragging'?: never;\n 'data-tab-drop-position'?: never;\n 'data-attention'?: never;\n 'data-drop-target'?: never;\n 'data-name-overflow'?: never;\n 'data-pinned'?: never;\n }\n>;\n\nexport type AppTabPresentation = 'pill' | 'segmented' | 'icon-only';\nexport type AppTabSize = 'default' | 'compact';\nexport type AppTabNameOverflow = 'ellipsis' | 'visible';\n\nexport interface AppTabProps {\n id: string;\n name: string;\n selected?: boolean;\n /** Emphasize the visible tab name with the attention color token. */\n attention?: boolean;\n /** Highlight this tab as the target of a drag over its content. */\n dropTarget?: boolean;\n /** Keep the leading tab visible within its TabBar tablist while peers scroll. */\n pinned?: boolean;\n closable?: boolean;\n draggable?: boolean;\n leading?: KerfUiContent;\n trailing?: KerfUiContent;\n /** Visual treatment within a TabBar. Icon-only tabs retain `name` as their accessible name. */\n presentation?: AppTabPresentation;\n /** Compact tabs use the 32px application-rail height. */\n size?: AppTabSize;\n /** Maximum visible label width in CSS pixels before ellipsis. */\n labelMaxWidth?: number;\n /** Keep the full name visible for an inline loading treatment. */\n nameOverflow?: AppTabNameOverflow;\n /** Decorative dormant content for the close button. Must not contain interactive descendants. */\n closeIcon?: SafeHtml;\n selectAction?: string;\n closeAction?: string;\n className?: string;\n /** Render as an unanimated loading skeleton, disabling select/close and dragging. */\n placeholder?: boolean;\n /**\n * Named and still opening: the tab is known but its content is loading.\n * Keeps `name` visible in the quiet text color and as the tab's accessible\n * name, shows `trailing` (for example a `LoadingSpinner`), and marks the\n * tab `aria-busy`. Unlike `placeholder` it stays selectable — the\n * application shows placeholder content in its panel until loading\n * completes — while close and dragging stay disabled. Same pill geometry\n * as the live tab, so swapping it in place does not shift the bar.\n * `placeholder` wins when both are set.\n */\n pending?: boolean;\n rootAttributes?: AppTabRootAttributes;\n /** Native named-slot assignment when composed inside a web component. */\n slot?: string;\n}\n\nfunction CloseIcon() {\n return (\n <svg\n aria-hidden=\"true\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2.25\"\n stroke-linecap=\"round\"\n >\n <path d=\"m7 7 10 10\" />\n <path d=\"M17 7 7 17\" />\n </svg>\n );\n}\n\nexport function AppTab({\n id,\n name,\n selected = false,\n attention = false,\n dropTarget = false,\n pinned = false,\n closable = true,\n draggable = false,\n leading,\n trailing,\n presentation = 'pill',\n size = 'default',\n labelMaxWidth,\n nameOverflow = 'ellipsis',\n closeIcon,\n selectAction = 'select-tab',\n closeAction = 'close-tab',\n className = '',\n placeholder = false,\n pending = false,\n rootAttributes = {},\n slot,\n}: AppTabProps) {\n // Both loading states disable close and dragging; a `placeholder` (unknown\n // tab) is also unselectable and hides its name, while a `pending` (known,\n // still opening) tab stays selectable so its panel can show placeholders.\n const dormant = placeholder || pending;\n const named = pending && !placeholder;\n const keyshortcuts = [\n closable && !dormant ? 'Delete Backspace' : '',\n draggable && !dormant ? 'Alt+Shift+ArrowLeft Alt+Shift+ArrowRight' : '',\n ]\n .filter(Boolean)\n .join(' ');\n const extensionAttributes = filterDataAttributes(\n rootAttributes,\n PROTECTED_ROOT_DATA_ATTRIBUTES,\n );\n return (\n <div\n {...extensionAttributes}\n class={`kui-app-tab ${className}`.trim()}\n data-component=\"app-tab\"\n data-tab-id={id}\n data-selected={String(selected)}\n data-attention={attention ? 'true' : undefined}\n data-drop-target={dropTarget ? 'true' : undefined}\n data-pinned={pinned ? 'true' : undefined}\n data-name-overflow={nameOverflow}\n data-presentation={presentation}\n data-size={size}\n data-placeholder={placeholder ? 'true' : undefined}\n data-pending={named ? 'true' : undefined}\n draggable={dormant ? 'false' : draggable ? 'true' : 'false'}\n aria-busy={dormant ? 'true' : undefined}\n style={\n labelMaxWidth === undefined\n ? undefined\n : `--kui-app-tab-label-max-width:${labelMaxWidth}px`\n }\n slot={slot}\n >\n {closable && (\n <button\n type=\"button\"\n tabindex=\"-1\"\n class=\"kui-app-tab__close\"\n data-action={dormant ? undefined : closeAction}\n data-tab-id={id}\n disabled={dormant || undefined}\n aria-label={`Close ${name}`}\n title={`Close ${name}`}\n >\n <span class=\"kui-app-tab__close-icon\" aria-hidden=\"true\">\n {closeIcon ?? <CloseIcon />}\n </span>\n </button>\n )}\n <button\n type=\"button\"\n class=\"kui-app-tab__select\"\n role=\"tab\"\n aria-selected={String(selected)}\n aria-label={presentation === 'icon-only' || named ? name : undefined}\n aria-keyshortcuts={keyshortcuts || undefined}\n data-action={placeholder ? undefined : selectAction}\n data-tab-id={id}\n disabled={placeholder || undefined}\n tabindex={!placeholder && selected ? '0' : '-1'}\n >\n {leading}\n <span\n class=\"kui-app-tab__name\"\n aria-hidden={presentation === 'icon-only' ? 'true' : undefined}\n >\n {placeholder ? <Skeleton width={em(7)} /> : name}\n </span>\n {closable || trailing ? (\n <span class=\"kui-app-tab__trailing\">{trailing}</span>\n ) : undefined}\n </button>\n </div>\n );\n}\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { LucideIcon } from './chunk-
|
|
1
|
+
import { LucideIcon } from './chunk-DUBUXJA3.js';
|
|
2
2
|
import { ChevronRight } from 'lucide';
|
|
3
3
|
import { jsx } from 'kerfjs/jsx-runtime';
|
|
4
4
|
|
|
@@ -43,4 +43,4 @@ function DisclosureArrow({
|
|
|
43
43
|
|
|
44
44
|
export { DisclosureArrow };
|
|
45
45
|
|
|
46
|
-
//# sourceMappingURL=chunk-
|
|
46
|
+
//# sourceMappingURL=chunk-VA5TN5PR.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/disclosure-arrow.tsx"],"names":[],"mappings":";;;;AAqBA,IAAM,kBAAA,GAA0D;AAAA,EAC9D,KAAA,EAAO,CAAA;AAAA,EACP,IAAA,EAAM,EAAA;AAAA,EACN,IAAA,EAAM,GAAA;AAAA,EACN,EAAA,EAAI;AACN,CAAA;AAEA,SAAS,gBAAA,CACP,IAAA,EACA,aAAA,EACA,eAAA,EACA;AACA,EAAA,MAAM,cAAA,GAAiB,mBAAmB,eAAe,CAAA;AACzD,EAAA,IAAI,CAAC,MAAM,OAAO,cAAA;AAElB,EAAA,MAAM,YAAA,GAAe,mBAAmB,aAAa,CAAA;AACrD,EAAA,MAAM,aAAA,GAAA,CAAkB,YAAA,GAAe,cAAA,GAAiB,GAAA,IAAO,GAAA,GAAO,GAAA;AACtE,EAAA,OAAO,cAAA,GAAiB,aAAA;AAC1B;AAEO,SAAS,eAAA,CAAgB;AAAA,EAC9B,IAAA;AAAA,EACA,aAAA,GAAgB,MAAA;AAAA,EAChB,eAAA,GAAkB,OAAA;AAAA,EAClB,IAAA;AAAA,EACA,IAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,CAAA,EAAyB;AACvB,EAAA,MAAM,SAAA,GAAY,OAAO,aAAA,GAAgB,eAAA;AACzC,EAAA,MAAM,QAAA,GAAW,gBAAA,CAAiB,IAAA,EAAM,aAAA,EAAe,eAAe,CAAA;AACtE,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,qBAAA,EAAwB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAChD,KAAA,EAAO,oCAAoC,QAAQ,CAAA,GAAA,EAAM,OAAO,CAAA,6BAAA,EAAgC,IAAI,KAAK,EAAE,CAAA,CAAA;AAAA,MAC3G,gBAAA,EAAe,kBAAA;AAAA,MACf,WAAA,EAAW,OAAO,IAAI,CAAA;AAAA,MACtB,gBAAA,EAAgB,SAAA;AAAA,MAChB,aAAA,EAAY,MAAA;AAAA,MACZ,IAAA;AAAA,MAEC,kCAAQ,GAAA,CAAC,UAAA,EAAA,EAAW,IAAA,EAAM,YAAA,EAAc,MAAK,eAAA,EAAgB;AAAA;AAAA,GAChE;AAEJ","file":"chunk-
|
|
1
|
+
{"version":3,"sources":["../src/disclosure-arrow.tsx"],"names":[],"mappings":";;;;AAqBA,IAAM,kBAAA,GAA0D;AAAA,EAC9D,KAAA,EAAO,CAAA;AAAA,EACP,IAAA,EAAM,EAAA;AAAA,EACN,IAAA,EAAM,GAAA;AAAA,EACN,EAAA,EAAI;AACN,CAAA;AAEA,SAAS,gBAAA,CACP,IAAA,EACA,aAAA,EACA,eAAA,EACA;AACA,EAAA,MAAM,cAAA,GAAiB,mBAAmB,eAAe,CAAA;AACzD,EAAA,IAAI,CAAC,MAAM,OAAO,cAAA;AAElB,EAAA,MAAM,YAAA,GAAe,mBAAmB,aAAa,CAAA;AACrD,EAAA,MAAM,aAAA,GAAA,CAAkB,YAAA,GAAe,cAAA,GAAiB,GAAA,IAAO,GAAA,GAAO,GAAA;AACtE,EAAA,OAAO,cAAA,GAAiB,aAAA;AAC1B;AAEO,SAAS,eAAA,CAAgB;AAAA,EAC9B,IAAA;AAAA,EACA,aAAA,GAAgB,MAAA;AAAA,EAChB,eAAA,GAAkB,OAAA;AAAA,EAClB,IAAA;AAAA,EACA,IAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ;AACF,CAAA,EAAyB;AACvB,EAAA,MAAM,SAAA,GAAY,OAAO,aAAA,GAAgB,eAAA;AACzC,EAAA,MAAM,QAAA,GAAW,gBAAA,CAAiB,IAAA,EAAM,aAAA,EAAe,eAAe,CAAA;AACtE,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,qBAAA,EAAwB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,MAChD,KAAA,EAAO,oCAAoC,QAAQ,CAAA,GAAA,EAAM,OAAO,CAAA,6BAAA,EAAgC,IAAI,KAAK,EAAE,CAAA,CAAA;AAAA,MAC3G,gBAAA,EAAe,kBAAA;AAAA,MACf,WAAA,EAAW,OAAO,IAAI,CAAA;AAAA,MACtB,gBAAA,EAAgB,SAAA;AAAA,MAChB,aAAA,EAAY,MAAA;AAAA,MACZ,IAAA;AAAA,MAEC,kCAAQ,GAAA,CAAC,UAAA,EAAA,EAAW,IAAA,EAAM,YAAA,EAAc,MAAK,eAAA,EAAgB;AAAA;AAAA,GAChE;AAEJ","file":"chunk-VA5TN5PR.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\nimport { ChevronRight } from 'lucide';\n\nimport type { CssLength } from './css-values.js';\nimport { LucideIcon } from './lucide-icon.js';\n\nexport type DisclosureDirection = 'up' | 'down' | 'left' | 'right';\n\nexport interface DisclosureArrowProps {\n open: boolean;\n openDirection?: DisclosureDirection;\n closedDirection?: DisclosureDirection;\n /** Replacement icons should use right as their unrotated orientation. */\n icon?: SafeHtml;\n /** Typed box size for the square visual. Default: `remify(18px)`. */\n size?: CssLength;\n className?: string;\n /** Native named-slot assignment when composed inside a web component. */\n slot?: string;\n}\n\nconst directionRotations: Record<DisclosureDirection, number> = {\n right: 0,\n down: 90,\n left: 180,\n up: 270,\n};\n\nfunction rotationForState(\n open: boolean,\n openDirection: DisclosureDirection,\n closedDirection: DisclosureDirection,\n) {\n const closedRotation = directionRotations[closedDirection];\n if (!open) return closedRotation;\n\n const openRotation = directionRotations[openDirection];\n const shortestDelta = ((openRotation - closedRotation + 540) % 360) - 180;\n return closedRotation + shortestDelta;\n}\n\nexport function DisclosureArrow({\n open,\n openDirection = 'down',\n closedDirection = 'right',\n icon,\n size,\n className = '',\n slot,\n}: DisclosureArrowProps) {\n const direction = open ? openDirection : closedDirection;\n const rotation = rotationForState(open, openDirection, closedDirection);\n return (\n <span\n class={`kui-disclosure-arrow ${className}`.trim()}\n style={`--_kui-disclosure-arrow-rotation:${rotation}deg${size ? `;--kui-disclosure-arrow-size:${size}` : ''}`}\n data-component=\"disclosure-arrow\"\n data-open={String(open)}\n data-direction={direction}\n aria-hidden=\"true\"\n slot={slot}\n >\n {icon ?? <LucideIcon icon={ChevronRight} name=\"chevron-right\" />}\n </span>\n );\n}\n"]}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { collapsiblePanelToggleIcon, composedPanelBody, relocatedPanelGroups } from './chunk-
|
|
2
|
-
export { collapsiblePanelToggleIcon } from './chunk-
|
|
1
|
+
import { collapsiblePanelToggleIcon, composedPanelBody, relocatedPanelGroups } from './chunk-GRHJQWV2.js';
|
|
2
|
+
export { collapsiblePanelToggleIcon } from './chunk-GRHJQWV2.js';
|
|
3
3
|
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
|
|
7
7
|
|
|
8
|
-
import { LucideIcon } from './chunk-
|
|
8
|
+
import { LucideIcon } from './chunk-DUBUXJA3.js';
|
|
9
9
|
|
|
10
10
|
|
|
11
11
|
|
package/dist/css-values.d.ts
CHANGED
|
@@ -103,5 +103,10 @@ declare function colorVar(name: `--${string}`, fallback?: CssColor): CssColor;
|
|
|
103
103
|
* accepts only {@link CssForegroundColor}, such as `SelectChoice.color`.
|
|
104
104
|
*/
|
|
105
105
|
declare function foregroundColorVar(name: `--${string}`, fallback?: CssForegroundColor): CssForegroundColor;
|
|
106
|
+
/**
|
|
107
|
+
* Use an application-chosen CSS color for foreground content. The browser
|
|
108
|
+
* resolves the color syntax; this checks only that it is one declaration value.
|
|
109
|
+
*/
|
|
110
|
+
declare function foregroundColor(value: string): CssForegroundColor;
|
|
106
111
|
|
|
107
|
-
export { type CssColor, type CssFlex, type CssFlexBasis, type CssFlexKeyword, type CssForegroundColor, type CssLength, type CssLengthExpression, type CssSize, type CssSizeKeyword, type CssValue, type UiColor, type UiColorName, type UiForegroundColorName, type UiSpaceName, calc, colorVar, em, flex, foregroundColorVar, lengthVar, pct, plus, px, rem, remify, space, uiColor };
|
|
112
|
+
export { type CssColor, type CssFlex, type CssFlexBasis, type CssFlexKeyword, type CssForegroundColor, type CssLength, type CssLengthExpression, type CssSize, type CssSizeKeyword, type CssValue, type UiColor, type UiColorName, type UiForegroundColorName, type UiSpaceName, calc, colorVar, em, flex, foregroundColor, foregroundColorVar, lengthVar, pct, plus, px, rem, remify, space, uiColor };
|
package/dist/css-values.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export { calc, colorVar, em, flex, foregroundColorVar, lengthVar, pct, plus, px, rem, remify, space, uiColor } from './chunk-
|
|
1
|
+
export { calc, colorVar, em, flex, foregroundColor, foregroundColorVar, lengthVar, pct, plus, px, rem, remify, space, uiColor } from './chunk-RFGW735Q.js';
|
|
2
2
|
|
|
3
3
|
//# sourceMappingURL=css-values.js.map
|
package/dist/disclosure-arrow.js
CHANGED
package/dist/empty-state.js
CHANGED
package/dist/grid.js
CHANGED
package/dist/index.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ export { AppTab, AppTabNameOverflow, AppTabPresentation, AppTabProps, AppTabSize
|
|
|
2
2
|
export { Badge, BadgeAppearance, BadgeDotProps, BadgeProps, BadgeShape, BadgeSize, BadgeTextProps, BadgeTone } from './badge.js';
|
|
3
3
|
export { Chip, ChipProps } from './chip.js';
|
|
4
4
|
export { ContentItem, ContentItemFrame, ContentItemProps, ContentItemSelectionMode, ContentItemShape } from './content-item.js';
|
|
5
|
-
export { CssColor, CssFlex, CssFlexBasis, CssFlexKeyword, CssForegroundColor, CssLength, CssLengthExpression, CssSize, CssSizeKeyword, CssValue, UiColor, UiColorName, UiForegroundColorName, UiSpaceName, calc, colorVar, em, flex, foregroundColorVar, lengthVar, pct, plus, px, rem, space, uiColor } from './css-values.js';
|
|
5
|
+
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';
|
|
6
6
|
export { DisclosureArrow, DisclosureArrowProps, DisclosureDirection } from './disclosure-arrow.js';
|
|
7
7
|
export { EmptyState, EmptyStateProps } from './empty-state.js';
|
|
8
8
|
export { FloatingToolbar, FloatingToolbarPosition, FloatingToolbarProps } from './floating-toolbar.js';
|
package/dist/index.js
CHANGED
|
@@ -1,46 +1,46 @@
|
|
|
1
|
-
export { wireTokenSearchFields } from './chunk-
|
|
1
|
+
export { wireTokenSearchFields } from './chunk-NPNSKX3K.js';
|
|
2
2
|
export { wireResizableRegions } from './chunk-DPAUKNB6.js';
|
|
3
3
|
|
|
4
4
|
export { wireScrollDividers } from './chunk-6DFDTWGG.js';
|
|
5
5
|
export { reorderTabs, wireTabBars } from './chunk-SLWCCHNP.js';
|
|
6
|
-
export { TokenSearchField, placeTokenSearchCaret, readTokenSearchField } from './chunk-
|
|
6
|
+
export { TokenSearchField, placeTokenSearchCaret, readTokenSearchField } from './chunk-FKPKGP2H.js';
|
|
7
7
|
export { createTokenSearchModel } from './chunk-4SQK27MR.js';
|
|
8
|
-
export { ValueTable, ValueTableRow } from './chunk-
|
|
9
|
-
export { Spacer } from './chunk-
|
|
10
|
-
export { StateBanner } from './chunk-
|
|
8
|
+
export { ValueTable, ValueTableRow } from './chunk-DA3HS64I.js';
|
|
9
|
+
export { Spacer } from './chunk-JA4J7Y4C.js';
|
|
10
|
+
export { StateBanner } from './chunk-5UGLKFBF.js';
|
|
11
11
|
export { SunkenPanel } from './chunk-WF75U3V4.js';
|
|
12
12
|
export { DialogSurface, PopupSurface } from './chunk-NN6GYOA2.js';
|
|
13
13
|
export { TabBar } from './chunk-OXO2QJWV.js';
|
|
14
14
|
export { SegmentedControl } from './chunk-X5QSICJ3.js';
|
|
15
|
-
export { Select } from './chunk-
|
|
15
|
+
export { Select } from './chunk-5TTZPGUY.js';
|
|
16
16
|
export { ListInsetControl } from './chunk-5I7QGQVT.js';
|
|
17
|
-
export { EmptyState } from './chunk-
|
|
18
|
-
export { Grid } from './chunk-
|
|
19
|
-
export { ListActionRow } from './chunk-
|
|
20
|
-
export { AppTab } from './chunk-
|
|
17
|
+
export { EmptyState } from './chunk-LHSUPNSE.js';
|
|
18
|
+
export { Grid } from './chunk-EHIMH4J7.js';
|
|
19
|
+
export { ListActionRow } from './chunk-TCXDZNCX.js';
|
|
20
|
+
export { AppTab } from './chunk-V4GAQ74C.js';
|
|
21
21
|
export { PopupMenu, closePopupMenu, openPopupMenuAt } from './chunk-4NG4Y2Q6.js';
|
|
22
22
|
export { ResizableRegion, clampRegionSize, resizeRegionFromPointer } from './chunk-TDN5EE3S.js';
|
|
23
|
-
export { Row } from './chunk-
|
|
24
|
-
export { ListHeader } from './chunk-
|
|
23
|
+
export { Row } from './chunk-SX7FJXPJ.js';
|
|
24
|
+
export { ListHeader } from './chunk-PL26TKNK.js';
|
|
25
25
|
export { FieldLabel, Text } from './chunk-YDGNU2OD.js';
|
|
26
26
|
export { ListInsetText } from './chunk-DG6G5EPF.js';
|
|
27
|
-
export { ListItem, ListItemLink } from './chunk-
|
|
28
|
-
export { ToolbarText } from './chunk-
|
|
29
|
-
export { DisclosureArrow } from './chunk-
|
|
27
|
+
export { ListItem, ListItemLink } from './chunk-HXTAPIHQ.js';
|
|
28
|
+
export { ToolbarText } from './chunk-HKVJ5MW3.js';
|
|
29
|
+
export { DisclosureArrow } from './chunk-VA5TN5PR.js';
|
|
30
30
|
export { FloatingToolbar } from './chunk-I3Q7KKYM.js';
|
|
31
31
|
|
|
32
|
-
export { Skeleton } from './chunk-
|
|
32
|
+
export { Skeleton } from './chunk-JGIV6ZDA.js';
|
|
33
33
|
export { Badge } from './chunk-ALGYHYXP.js';
|
|
34
34
|
export { Chip } from './chunk-SMZGAPCU.js';
|
|
35
35
|
export { Pane } from './chunk-3BYFWTP3.js';
|
|
36
|
-
export { List } from './chunk-
|
|
36
|
+
export { List } from './chunk-4FEVHE7C.js';
|
|
37
37
|
|
|
38
|
-
export { ToolbarActionLink, ToolbarControlGroup } from './chunk-
|
|
38
|
+
export { ToolbarActionLink, ToolbarControlGroup } from './chunk-TOICTHR2.js';
|
|
39
39
|
export { Toolbar } from './chunk-RGS4WX2M.js';
|
|
40
|
-
export { LucideIcon } from './chunk-
|
|
41
|
-
export { LoadingSpinner } from './chunk-
|
|
40
|
+
export { LucideIcon } from './chunk-DUBUXJA3.js';
|
|
41
|
+
export { LoadingSpinner } from './chunk-SVLDRGPJ.js';
|
|
42
42
|
export { ContentItem } from './chunk-NCSWXG7G.js';
|
|
43
43
|
|
|
44
|
-
export { calc, colorVar, em, flex, foregroundColorVar, lengthVar, pct, plus, px, rem, space, uiColor } from './chunk-
|
|
44
|
+
export { calc, colorVar, em, flex, foregroundColor, foregroundColorVar, lengthVar, pct, plus, px, rem, space, uiColor } from './chunk-RFGW735Q.js';
|
|
45
45
|
|
|
46
46
|
//# sourceMappingURL=index.js.map
|
package/dist/list-action-row.js
CHANGED
package/dist/list-header.d.ts
CHANGED
|
@@ -7,6 +7,7 @@ type ListHeaderRootAttributes = Readonly<Record<`data-${string}`, string | undef
|
|
|
7
7
|
'data-has-badge'?: never;
|
|
8
8
|
'data-has-count'?: never;
|
|
9
9
|
'data-density'?: never;
|
|
10
|
+
'data-size'?: never;
|
|
10
11
|
'data-divider'?: never;
|
|
11
12
|
'data-inline'?: never;
|
|
12
13
|
'data-width'?: never;
|
|
@@ -23,6 +24,8 @@ type ListHeaderTriggerAttributes = Readonly<Record<`data-${string}`, string | un
|
|
|
23
24
|
}>;
|
|
24
25
|
interface ListHeaderBaseProps {
|
|
25
26
|
label: string;
|
|
27
|
+
/** Visual label size, independent of the native heading level. Default `sm`. */
|
|
28
|
+
size?: 'xs' | 'sm' | 'm' | 'l' | 'xl';
|
|
26
29
|
density?: 'standard' | 'compact';
|
|
27
30
|
divider?: 'none' | 'before' | 'after' | 'both';
|
|
28
31
|
/** Shrink-wrap the header without its default outer margin, border, or padding. */
|
|
@@ -94,6 +97,6 @@ type ListHeaderIndicatorProps = {
|
|
|
94
97
|
status?: SafeHtml;
|
|
95
98
|
};
|
|
96
99
|
type ListHeaderProps = ListHeaderBaseProps & ListHeaderIndicatorProps & ListHeaderModeProps;
|
|
97
|
-
declare function ListHeader({ label, headingLevel, count, countLabel, badge, status, density, divider, inline, width, indicatorTone, action, actionLabel, actionIcon, actionDisabled, disabledReason, expanded, toggle, placeholder, rootAttributes, triggerAttributes, slot, }: ListHeaderProps): SafeHtml;
|
|
100
|
+
declare function ListHeader({ label, size, headingLevel, count, countLabel, badge, status, density, divider, inline, width, indicatorTone, action, actionLabel, actionIcon, actionDisabled, disabledReason, expanded, toggle, placeholder, rootAttributes, triggerAttributes, slot, }: ListHeaderProps): SafeHtml;
|
|
98
101
|
|
|
99
102
|
export { ListHeader, type ListHeaderProps };
|
package/dist/list-header.js
CHANGED
package/dist/list-item.js
CHANGED
package/dist/list.js
CHANGED
package/dist/loading-spinner.js
CHANGED
package/dist/lucide-icon.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as kerfjs from 'kerfjs';
|
|
2
2
|
import { IconNode } from 'lucide';
|
|
3
|
+
import { CssForegroundColor } from './css-values.js';
|
|
3
4
|
|
|
4
5
|
type LucideNode = IconNode;
|
|
5
6
|
type LucideIconSize = 'xs' | 's' | 'm' | 'l' | 'xl' | number;
|
|
@@ -9,6 +10,8 @@ interface LucideIconProps {
|
|
|
9
10
|
/** Outline by default; solid fills compatible glyphs with the current text color. */
|
|
10
11
|
appearance?: 'outline' | 'solid';
|
|
11
12
|
className?: string;
|
|
13
|
+
/** Foreground color; omit to inherit the surrounding text color. */
|
|
14
|
+
color?: CssForegroundColor;
|
|
12
15
|
label?: string;
|
|
13
16
|
/** Named icon scale or positive pixel size, converted to rem. Omit for 1em. */
|
|
14
17
|
size?: LucideIconSize;
|
|
@@ -16,6 +19,6 @@ interface LucideIconProps {
|
|
|
16
19
|
slot?: string;
|
|
17
20
|
}
|
|
18
21
|
/** Render a Lucide-compatible icon node without copying icon SVG strings. */
|
|
19
|
-
declare function LucideIcon({ icon, name, appearance, className, label, size, slot, }: LucideIconProps): kerfjs.SafeHtml;
|
|
22
|
+
declare function LucideIcon({ icon, name, appearance, className, color, label, size, slot, }: LucideIconProps): kerfjs.SafeHtml;
|
|
20
23
|
|
|
21
24
|
export { LucideIcon, type LucideIconProps, type LucideIconSize, type LucideNode };
|
package/dist/lucide-icon.js
CHANGED
package/dist/nav-stack.js
CHANGED
package/dist/row.js
CHANGED
package/dist/select.js
CHANGED
package/dist/skeleton.js
CHANGED
package/dist/spacer.js
CHANGED
package/dist/split-view.js
CHANGED
package/dist/state-banner.js
CHANGED
|
@@ -10,3 +10,41 @@
|
|
|
10
10
|
width: 2.125rem;
|
|
11
11
|
height: 2.125rem;
|
|
12
12
|
}
|
|
13
|
+
|
|
14
|
+
.kui-catalog__filter {
|
|
15
|
+
width: 100%;
|
|
16
|
+
min-width: 0;
|
|
17
|
+
box-sizing: border-box;
|
|
18
|
+
padding: 0.5rem 0.625rem;
|
|
19
|
+
border: 1px solid var(--kui-color-neutral-border-normal);
|
|
20
|
+
border-radius: var(--kui-layout-rounded-radius);
|
|
21
|
+
color: var(--kui-color-text);
|
|
22
|
+
background: var(--kui-color-surface);
|
|
23
|
+
font: inherit;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.kui-catalog__filter:focus-visible {
|
|
27
|
+
outline: 2px solid var(--kui-color-focus);
|
|
28
|
+
outline-offset: 2px;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.kui-catalog [data-catalog-filter-empty],
|
|
32
|
+
.kui-catalog [data-catalog-section][hidden],
|
|
33
|
+
.kui-catalog [data-catalog-entry-name][hidden],
|
|
34
|
+
.kui-catalog [data-catalog-secondary-group][hidden] {
|
|
35
|
+
display: none;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.kui-catalog [data-catalog-filter-empty][data-visible="true"] {
|
|
39
|
+
display: block;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.kui-catalog [data-catalog-secondary-collapsed="true"] {
|
|
43
|
+
display: none;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.kui-catalog
|
|
47
|
+
[data-catalog-filter-active="true"]
|
|
48
|
+
[data-catalog-secondary-collapsed="true"] {
|
|
49
|
+
display: flex;
|
|
50
|
+
}
|
|
@@ -22,6 +22,7 @@
|
|
|
22
22
|
--kui-font-s: var(--wa-font-size-s, 14px);
|
|
23
23
|
--kui-font-m: var(--wa-font-size-m, 16px);
|
|
24
24
|
--kui-font-l: var(--wa-font-size-l, 20px);
|
|
25
|
+
--kui-font-xl: var(--wa-font-size-xl, 25px);
|
|
25
26
|
--kui-font-2xl: var(--wa-font-size-2xl, 32px);
|
|
26
27
|
--kui-font-weight-semibold: var(--wa-font-weight-semibold, 650);
|
|
27
28
|
/* Official spacing scale (see docs/layout.md "Spacing scale"). Five canonical
|
package/dist/styles/text.css
CHANGED
|
@@ -110,3 +110,30 @@ span.kui-text {
|
|
|
110
110
|
text-transform: uppercase;
|
|
111
111
|
white-space: nowrap;
|
|
112
112
|
}
|
|
113
|
+
|
|
114
|
+
.kui-list-header[data-size="xs"] .kui-list-header__title > .kui-text {
|
|
115
|
+
font-size: var(--kui-font-2xs);
|
|
116
|
+
text-transform: capitalize;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.kui-list-header:is([data-size="m"], [data-size="l"], [data-size="xl"])
|
|
120
|
+
.kui-list-header__title
|
|
121
|
+
> .kui-text {
|
|
122
|
+
font-family: var(--wa-font-family-heading, var(--kui-font-sans));
|
|
123
|
+
font-weight: var(--wa-font-weight-heading, 600);
|
|
124
|
+
letter-spacing: normal;
|
|
125
|
+
line-height: var(--wa-line-height-condensed, 1.2);
|
|
126
|
+
text-transform: none;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.kui-list-header[data-size="m"] .kui-list-header__title > .kui-text {
|
|
130
|
+
font-size: var(--kui-font-m);
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.kui-list-header[data-size="l"] .kui-list-header__title > .kui-text {
|
|
134
|
+
font-size: var(--kui-font-l);
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.kui-list-header[data-size="xl"] .kui-list-header__title > .kui-text {
|
|
138
|
+
font-size: var(--kui-font-xl);
|
|
139
|
+
}
|