@aceshooting/lyra-ui 5.0.0 → 5.1.0
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 +30 -12
- package/custom-elements.json +2150 -220
- package/dist/components/agent-tools/activity-feed/activity-feed.class.d.ts +2 -0
- package/dist/components/agent-tools/activity-feed/activity-feed.class.d.ts.map +1 -1
- package/dist/components/agent-tools/activity-feed/activity-feed.class.js +2 -0
- package/dist/components/agent-tools/activity-feed/activity-feed.class.js.map +1 -1
- package/dist/components/agent-tools/agent-run/agent-run.class.d.ts +1 -0
- package/dist/components/agent-tools/agent-run/agent-run.class.d.ts.map +1 -1
- package/dist/components/agent-tools/agent-run/agent-run.class.js +1 -0
- package/dist/components/agent-tools/agent-run/agent-run.class.js.map +1 -1
- package/dist/components/agent-tools/compare-panel/compare-panel.class.d.ts +2 -0
- package/dist/components/agent-tools/compare-panel/compare-panel.class.d.ts.map +1 -1
- package/dist/components/agent-tools/compare-panel/compare-panel.class.js +2 -0
- package/dist/components/agent-tools/compare-panel/compare-panel.class.js.map +1 -1
- package/dist/components/agent-tools/stack-trace/stack-trace.class.d.ts +5 -0
- package/dist/components/agent-tools/stack-trace/stack-trace.class.d.ts.map +1 -1
- package/dist/components/agent-tools/stack-trace/stack-trace.class.js +5 -0
- package/dist/components/agent-tools/stack-trace/stack-trace.class.js.map +1 -1
- package/dist/components/agent-tools/terminal/terminal.class.d.ts +3 -0
- package/dist/components/agent-tools/terminal/terminal.class.d.ts.map +1 -1
- package/dist/components/agent-tools/terminal/terminal.class.js +3 -0
- package/dist/components/agent-tools/terminal/terminal.class.js.map +1 -1
- package/dist/components/agent-tools/thinking-panel/thinking-panel.class.d.ts +2 -0
- package/dist/components/agent-tools/thinking-panel/thinking-panel.class.d.ts.map +1 -1
- package/dist/components/agent-tools/thinking-panel/thinking-panel.class.js +2 -0
- package/dist/components/agent-tools/thinking-panel/thinking-panel.class.js.map +1 -1
- package/dist/components/agent-tools/tool-approval-dialog/tool-approval-dialog.class.d.ts +2 -0
- package/dist/components/agent-tools/tool-approval-dialog/tool-approval-dialog.class.d.ts.map +1 -1
- package/dist/components/agent-tools/tool-approval-dialog/tool-approval-dialog.class.js +2 -0
- package/dist/components/agent-tools/tool-approval-dialog/tool-approval-dialog.class.js.map +1 -1
- package/dist/components/agent-tools/tool-call-chip/tool-call-chip.class.d.ts +3 -0
- package/dist/components/agent-tools/tool-call-chip/tool-call-chip.class.d.ts.map +1 -1
- package/dist/components/agent-tools/tool-call-chip/tool-call-chip.class.js +3 -0
- package/dist/components/agent-tools/tool-call-chip/tool-call-chip.class.js.map +1 -1
- package/dist/components/agent-tools/tool-result-view/tool-result-view.class.d.ts +1 -0
- package/dist/components/agent-tools/tool-result-view/tool-result-view.class.d.ts.map +1 -1
- package/dist/components/agent-tools/tool-result-view/tool-result-view.class.js +1 -0
- package/dist/components/agent-tools/tool-result-view/tool-result-view.class.js.map +1 -1
- package/dist/components/agent-tools/tool-select-dialog/tool-select-dialog.class.d.ts +1 -0
- package/dist/components/agent-tools/tool-select-dialog/tool-select-dialog.class.d.ts.map +1 -1
- package/dist/components/agent-tools/tool-select-dialog/tool-select-dialog.class.js +1 -0
- package/dist/components/agent-tools/tool-select-dialog/tool-select-dialog.class.js.map +1 -1
- package/dist/components/agent-tools/tool-timeline/tool-timeline.class.d.ts +2 -0
- package/dist/components/agent-tools/tool-timeline/tool-timeline.class.d.ts.map +1 -1
- package/dist/components/agent-tools/tool-timeline/tool-timeline.class.js +2 -0
- package/dist/components/agent-tools/tool-timeline/tool-timeline.class.js.map +1 -1
- package/dist/components/charts/chart/chart.class.d.ts +15 -0
- package/dist/components/charts/chart/chart.class.d.ts.map +1 -1
- package/dist/components/charts/chart/chart.class.js +15 -0
- package/dist/components/charts/chart/chart.class.js.map +1 -1
- package/dist/components/conversation/audio-visualizer/audio-visualizer.class.d.ts +2 -0
- package/dist/components/conversation/audio-visualizer/audio-visualizer.class.d.ts.map +1 -1
- package/dist/components/conversation/audio-visualizer/audio-visualizer.class.js +2 -0
- package/dist/components/conversation/audio-visualizer/audio-visualizer.class.js.map +1 -1
- package/dist/components/conversation/branch-picker/branch-picker.class.d.ts +2 -0
- package/dist/components/conversation/branch-picker/branch-picker.class.d.ts.map +1 -1
- package/dist/components/conversation/branch-picker/branch-picker.class.js +2 -0
- package/dist/components/conversation/branch-picker/branch-picker.class.js.map +1 -1
- package/dist/components/conversation/chat-message/chat-message.class.d.ts +5 -1
- package/dist/components/conversation/chat-message/chat-message.class.d.ts.map +1 -1
- package/dist/components/conversation/chat-message/chat-message.class.js +5 -1
- package/dist/components/conversation/chat-message/chat-message.class.js.map +1 -1
- package/dist/components/conversation/chat-message/chat-message.styles.d.ts.map +1 -1
- package/dist/components/conversation/chat-message/chat-message.styles.js +15 -2
- package/dist/components/conversation/chat-message/chat-message.styles.js.map +1 -1
- package/dist/components/conversation/code-block/code-block.class.d.ts +4 -0
- package/dist/components/conversation/code-block/code-block.class.d.ts.map +1 -1
- package/dist/components/conversation/code-block/code-block.class.js +4 -0
- package/dist/components/conversation/code-block/code-block.class.js.map +1 -1
- package/dist/components/conversation/conversation-item/conversation-item.class.d.ts +2 -0
- package/dist/components/conversation/conversation-item/conversation-item.class.d.ts.map +1 -1
- package/dist/components/conversation/conversation-item/conversation-item.class.js +2 -0
- package/dist/components/conversation/conversation-item/conversation-item.class.js.map +1 -1
- package/dist/components/conversation/markdown/markdown.class.d.ts +2 -0
- package/dist/components/conversation/markdown/markdown.class.d.ts.map +1 -1
- package/dist/components/conversation/markdown/markdown.class.js +2 -0
- package/dist/components/conversation/markdown/markdown.class.js.map +1 -1
- package/dist/components/conversation/push-to-talk/push-to-talk.class.d.ts +2 -0
- package/dist/components/conversation/push-to-talk/push-to-talk.class.d.ts.map +1 -1
- package/dist/components/conversation/push-to-talk/push-to-talk.class.js +2 -0
- package/dist/components/conversation/push-to-talk/push-to-talk.class.js.map +1 -1
- package/dist/components/conversation/stream-status/stream-status.class.d.ts +5 -0
- package/dist/components/conversation/stream-status/stream-status.class.d.ts.map +1 -1
- package/dist/components/conversation/stream-status/stream-status.class.js +5 -0
- package/dist/components/conversation/stream-status/stream-status.class.js.map +1 -1
- package/dist/components/conversation/streaming-text/streaming-text.class.d.ts +2 -0
- package/dist/components/conversation/streaming-text/streaming-text.class.d.ts.map +1 -1
- package/dist/components/conversation/streaming-text/streaming-text.class.js +2 -0
- package/dist/components/conversation/streaming-text/streaming-text.class.js.map +1 -1
- package/dist/components/conversation/transcript-feed/transcript-feed.class.d.ts +1 -0
- package/dist/components/conversation/transcript-feed/transcript-feed.class.d.ts.map +1 -1
- package/dist/components/conversation/transcript-feed/transcript-feed.class.js +1 -0
- package/dist/components/conversation/transcript-feed/transcript-feed.class.js.map +1 -1
- package/dist/components/data/calendar/calendar.class.d.ts +6 -0
- package/dist/components/data/calendar/calendar.class.d.ts.map +1 -1
- package/dist/components/data/calendar/calendar.class.js +6 -0
- package/dist/components/data/calendar/calendar.class.js.map +1 -1
- package/dist/components/data/context-meter/context-meter.class.d.ts +1 -0
- package/dist/components/data/context-meter/context-meter.class.d.ts.map +1 -1
- package/dist/components/data/context-meter/context-meter.class.js +1 -0
- package/dist/components/data/context-meter/context-meter.class.js.map +1 -1
- package/dist/components/data/data-grid/data-grid.class.d.ts +1 -0
- package/dist/components/data/data-grid/data-grid.class.d.ts.map +1 -1
- package/dist/components/data/data-grid/data-grid.class.js +1 -0
- package/dist/components/data/data-grid/data-grid.class.js.map +1 -1
- package/dist/components/data/flow-canvas/flow-canvas.class.d.ts +3 -1
- package/dist/components/data/flow-canvas/flow-canvas.class.d.ts.map +1 -1
- package/dist/components/data/flow-canvas/flow-canvas.class.js +3 -1
- package/dist/components/data/flow-canvas/flow-canvas.class.js.map +1 -1
- package/dist/components/data/flow-minimap/flow-minimap.class.d.ts +2 -2
- package/dist/components/data/flow-minimap/flow-minimap.class.js +2 -2
- package/dist/components/data/flow-node/flow-node.class.d.ts +1 -1
- package/dist/components/data/flow-node/flow-node.class.js +1 -1
- package/dist/components/data/heatmap/heatmap.class.d.ts +51 -2
- package/dist/components/data/heatmap/heatmap.class.d.ts.map +1 -1
- package/dist/components/data/heatmap/heatmap.class.js +42 -6
- package/dist/components/data/heatmap/heatmap.class.js.map +1 -1
- package/dist/components/data/heatmap/heatmap.styles.d.ts.map +1 -1
- package/dist/components/data/heatmap/heatmap.styles.js +19 -0
- package/dist/components/data/heatmap/heatmap.styles.js.map +1 -1
- package/dist/components/data/sequence-strip/sequence-strip.class.d.ts +20 -0
- package/dist/components/data/sequence-strip/sequence-strip.class.d.ts.map +1 -1
- package/dist/components/data/sequence-strip/sequence-strip.class.js +35 -0
- package/dist/components/data/sequence-strip/sequence-strip.class.js.map +1 -1
- package/dist/components/data/sequence-strip/sequence-strip.styles.d.ts.map +1 -1
- package/dist/components/data/sequence-strip/sequence-strip.styles.js +29 -0
- package/dist/components/data/sequence-strip/sequence-strip.styles.js.map +1 -1
- package/dist/components/data/table/table.class.d.ts +11 -0
- package/dist/components/data/table/table.class.d.ts.map +1 -1
- package/dist/components/data/table/table.class.js +11 -0
- package/dist/components/data/table/table.class.js.map +1 -1
- package/dist/components/data/timeline/timeline-item.class.d.ts +17 -0
- package/dist/components/data/timeline/timeline-item.class.d.ts.map +1 -1
- package/dist/components/data/timeline/timeline-item.class.js +17 -0
- package/dist/components/data/timeline/timeline-item.class.js.map +1 -1
- package/dist/components/data/timeline/timeline.styles.d.ts.map +1 -1
- package/dist/components/data/timeline/timeline.styles.js +6 -3
- package/dist/components/data/timeline/timeline.styles.js.map +1 -1
- package/dist/components/data/tree/tree-node.class.d.ts +3 -0
- package/dist/components/data/tree/tree-node.class.d.ts.map +1 -1
- package/dist/components/data/tree/tree-node.class.js +3 -0
- package/dist/components/data/tree/tree-node.class.js.map +1 -1
- package/dist/components/forms/button/button.class.d.ts +24 -0
- package/dist/components/forms/button/button.class.d.ts.map +1 -1
- package/dist/components/forms/button/button.class.js +24 -0
- package/dist/components/forms/button/button.class.js.map +1 -1
- package/dist/components/forms/code-editor/code-editor.class.d.ts +28 -12
- package/dist/components/forms/code-editor/code-editor.class.d.ts.map +1 -1
- package/dist/components/forms/code-editor/code-editor.class.js +44 -14
- package/dist/components/forms/code-editor/code-editor.class.js.map +1 -1
- package/dist/components/forms/code-editor/code-editor.styles.d.ts.map +1 -1
- package/dist/components/forms/code-editor/code-editor.styles.js +4 -0
- package/dist/components/forms/code-editor/code-editor.styles.js.map +1 -1
- package/dist/components/forms/combobox/combobox.class.d.ts +10 -0
- package/dist/components/forms/combobox/combobox.class.d.ts.map +1 -1
- package/dist/components/forms/combobox/combobox.class.js +16 -0
- package/dist/components/forms/combobox/combobox.class.js.map +1 -1
- package/dist/components/forms/combobox/option.class.d.ts +3 -3
- package/dist/components/forms/combobox/option.class.d.ts.map +1 -1
- package/dist/components/forms/combobox/option.class.js +9 -0
- package/dist/components/forms/combobox/option.class.js.map +1 -1
- package/dist/components/forms/date-picker/date-input.class.d.ts +3 -0
- package/dist/components/forms/date-picker/date-input.class.d.ts.map +1 -1
- package/dist/components/forms/date-picker/date-input.class.js +3 -0
- package/dist/components/forms/date-picker/date-input.class.js.map +1 -1
- package/dist/components/forms/emoji-picker/emoji-picker.class.d.ts +37 -2
- package/dist/components/forms/emoji-picker/emoji-picker.class.d.ts.map +1 -1
- package/dist/components/forms/emoji-picker/emoji-picker.class.js +113 -10
- package/dist/components/forms/emoji-picker/emoji-picker.class.js.map +1 -1
- package/dist/components/forms/emoji-picker/emoji-picker.styles.d.ts.map +1 -1
- package/dist/components/forms/emoji-picker/emoji-picker.styles.js +30 -0
- package/dist/components/forms/emoji-picker/emoji-picker.styles.js.map +1 -1
- package/dist/components/forms/icon-button/icon-button.class.d.ts +4 -0
- package/dist/components/forms/icon-button/icon-button.class.d.ts.map +1 -1
- package/dist/components/forms/icon-button/icon-button.class.js +4 -0
- package/dist/components/forms/icon-button/icon-button.class.js.map +1 -1
- package/dist/components/forms/input/input.class.d.ts +11 -3
- package/dist/components/forms/input/input.class.d.ts.map +1 -1
- package/dist/components/forms/input/input.class.js +3 -0
- package/dist/components/forms/input/input.class.js.map +1 -1
- package/dist/components/forms/input/time-input.class.d.ts +12 -0
- package/dist/components/forms/input/time-input.class.d.ts.map +1 -1
- package/dist/components/forms/input/time-input.class.js +27 -0
- package/dist/components/forms/input/time-input.class.js.map +1 -1
- package/dist/components/forms/rubric-form/rubric-form.class.d.ts +7 -0
- package/dist/components/forms/rubric-form/rubric-form.class.d.ts.map +1 -1
- package/dist/components/forms/rubric-form/rubric-form.class.js +7 -0
- package/dist/components/forms/rubric-form/rubric-form.class.js.map +1 -1
- package/dist/components/forms/select/select.class.d.ts +8 -0
- package/dist/components/forms/select/select.class.d.ts.map +1 -1
- package/dist/components/forms/select/select.class.js +8 -0
- package/dist/components/forms/select/select.class.js.map +1 -1
- package/dist/components/forms/swatch-picker/swatch-picker.class.d.ts +1 -1
- package/dist/components/forms/swatch-picker/swatch-picker.class.js +1 -1
- package/dist/components/forms/switch/switch.class.d.ts +6 -0
- package/dist/components/forms/switch/switch.class.d.ts.map +1 -1
- package/dist/components/forms/switch/switch.class.js +6 -0
- package/dist/components/forms/switch/switch.class.js.map +1 -1
- package/dist/components/forms/token-input/token-input.class.d.ts +2 -0
- package/dist/components/forms/token-input/token-input.class.d.ts.map +1 -1
- package/dist/components/forms/token-input/token-input.class.js +2 -0
- package/dist/components/forms/token-input/token-input.class.js.map +1 -1
- package/dist/components/layout/app-rail/app-rail.class.d.ts +8 -0
- package/dist/components/layout/app-rail/app-rail.class.d.ts.map +1 -1
- package/dist/components/layout/app-rail/app-rail.class.js +8 -0
- package/dist/components/layout/app-rail/app-rail.class.js.map +1 -1
- package/dist/components/layout/button-group/button-group.class.d.ts +1 -1
- package/dist/components/layout/button-group/button-group.class.js +1 -1
- package/dist/components/layout/command-palette/command-palette.class.d.ts +12 -0
- package/dist/components/layout/command-palette/command-palette.class.d.ts.map +1 -1
- package/dist/components/layout/command-palette/command-palette.class.js +12 -0
- package/dist/components/layout/command-palette/command-palette.class.js.map +1 -1
- package/dist/components/layout/control-group/control-group.class.d.ts +1 -1
- package/dist/components/layout/control-group/control-group.class.js +1 -1
- package/dist/components/layout/dashboard-grid/dashboard-grid.class.d.ts +7 -0
- package/dist/components/layout/dashboard-grid/dashboard-grid.class.d.ts.map +1 -1
- package/dist/components/layout/dashboard-grid/dashboard-grid.class.js +7 -0
- package/dist/components/layout/dashboard-grid/dashboard-grid.class.js.map +1 -1
- package/dist/components/layout/dock-panel/dock-panel.class.d.ts +3 -0
- package/dist/components/layout/dock-panel/dock-panel.class.d.ts.map +1 -1
- package/dist/components/layout/dock-panel/dock-panel.class.js +3 -0
- package/dist/components/layout/dock-panel/dock-panel.class.js.map +1 -1
- package/dist/components/layout/responsive-panel/responsive-panel.class.d.ts +2 -0
- package/dist/components/layout/responsive-panel/responsive-panel.class.d.ts.map +1 -1
- package/dist/components/layout/responsive-panel/responsive-panel.class.js +2 -0
- package/dist/components/layout/responsive-panel/responsive-panel.class.js.map +1 -1
- package/dist/components/layout/scroller/scroller.class.d.ts +2 -2
- package/dist/components/layout/scroller/scroller.class.js +2 -2
- package/dist/components/layout/segmented/segmented.class.d.ts +6 -0
- package/dist/components/layout/segmented/segmented.class.d.ts.map +1 -1
- package/dist/components/layout/segmented/segmented.class.js +6 -0
- package/dist/components/layout/segmented/segmented.class.js.map +1 -1
- package/dist/components/layout/split/split.class.d.ts +68 -15
- package/dist/components/layout/split/split.class.d.ts.map +1 -1
- package/dist/components/layout/split/split.class.js +80 -21
- package/dist/components/layout/split/split.class.js.map +1 -1
- package/dist/components/layout/stepper/stepper.class.d.ts +52 -11
- package/dist/components/layout/stepper/stepper.class.d.ts.map +1 -1
- package/dist/components/layout/stepper/stepper.class.js +69 -17
- package/dist/components/layout/stepper/stepper.class.js.map +1 -1
- package/dist/components/layout/virtual-list/virtual-list.class.d.ts +3 -0
- package/dist/components/layout/virtual-list/virtual-list.class.d.ts.map +1 -1
- package/dist/components/layout/virtual-list/virtual-list.class.js +3 -0
- package/dist/components/layout/virtual-list/virtual-list.class.js.map +1 -1
- package/dist/components/layout/widget/widget.class.d.ts +6 -0
- package/dist/components/layout/widget/widget.class.d.ts.map +1 -1
- package/dist/components/layout/widget/widget.class.js +6 -0
- package/dist/components/layout/widget/widget.class.js.map +1 -1
- package/dist/components/media/attachment-chip/attachment-chip.class.d.ts +13 -0
- package/dist/components/media/attachment-chip/attachment-chip.class.d.ts.map +1 -1
- package/dist/components/media/attachment-chip/attachment-chip.class.js +13 -0
- package/dist/components/media/attachment-chip/attachment-chip.class.js.map +1 -1
- package/dist/components/media/avatar/avatar.class.d.ts +6 -0
- package/dist/components/media/avatar/avatar.class.d.ts.map +1 -1
- package/dist/components/media/avatar/avatar.class.js +6 -0
- package/dist/components/media/avatar/avatar.class.js.map +1 -1
- package/dist/components/media/media-card/media-card.class.d.ts +2 -0
- package/dist/components/media/media-card/media-card.class.d.ts.map +1 -1
- package/dist/components/media/media-card/media-card.class.js +2 -0
- package/dist/components/media/media-card/media-card.class.js.map +1 -1
- package/dist/components/media/playback/playback.class.d.ts +2 -0
- package/dist/components/media/playback/playback.class.d.ts.map +1 -1
- package/dist/components/media/playback/playback.class.js +2 -0
- package/dist/components/media/playback/playback.class.js.map +1 -1
- package/dist/components/media/zoomable-frame/zoomable-frame.class.d.ts +3 -0
- package/dist/components/media/zoomable-frame/zoomable-frame.class.d.ts.map +1 -1
- package/dist/components/media/zoomable-frame/zoomable-frame.class.js +3 -0
- package/dist/components/media/zoomable-frame/zoomable-frame.class.js.map +1 -1
- package/dist/components/overlays/badge/badge.class.d.ts +6 -0
- package/dist/components/overlays/badge/badge.class.d.ts.map +1 -1
- package/dist/components/overlays/badge/badge.class.js +6 -0
- package/dist/components/overlays/badge/badge.class.js.map +1 -1
- package/dist/components/overlays/callout/callout.class.d.ts +6 -0
- package/dist/components/overlays/callout/callout.class.d.ts.map +1 -1
- package/dist/components/overlays/callout/callout.class.js +6 -0
- package/dist/components/overlays/callout/callout.class.js.map +1 -1
- package/dist/components/overlays/chip/chip.class.d.ts +18 -0
- package/dist/components/overlays/chip/chip.class.d.ts.map +1 -1
- package/dist/components/overlays/chip/chip.class.js +18 -0
- package/dist/components/overlays/chip/chip.class.js.map +1 -1
- package/dist/components/overlays/dialog/dialog.class.d.ts +6 -0
- package/dist/components/overlays/dialog/dialog.class.d.ts.map +1 -1
- package/dist/components/overlays/dialog/dialog.class.js +6 -0
- package/dist/components/overlays/dialog/dialog.class.js.map +1 -1
- package/dist/components/overlays/drawer/drawer.class.d.ts +6 -0
- package/dist/components/overlays/drawer/drawer.class.d.ts.map +1 -1
- package/dist/components/overlays/drawer/drawer.class.js +6 -0
- package/dist/components/overlays/drawer/drawer.class.js.map +1 -1
- package/dist/components/overlays/progress/progress-ring.class.d.ts +1 -0
- package/dist/components/overlays/progress/progress-ring.class.d.ts.map +1 -1
- package/dist/components/overlays/progress/progress-ring.class.js +1 -0
- package/dist/components/overlays/progress/progress-ring.class.js.map +1 -1
- package/dist/components/overlays/skeleton/skeleton.class.d.ts +2 -0
- package/dist/components/overlays/skeleton/skeleton.class.d.ts.map +1 -1
- package/dist/components/overlays/skeleton/skeleton.class.js +2 -0
- package/dist/components/overlays/skeleton/skeleton.class.js.map +1 -1
- package/dist/components/overlays/spinner/spinner.class.d.ts +4 -0
- package/dist/components/overlays/spinner/spinner.class.d.ts.map +1 -1
- package/dist/components/overlays/spinner/spinner.class.js +4 -0
- package/dist/components/overlays/spinner/spinner.class.js.map +1 -1
- package/dist/components/overlays/toast/toast-item.class.d.ts +11 -0
- package/dist/components/overlays/toast/toast-item.class.d.ts.map +1 -1
- package/dist/components/overlays/toast/toast-item.class.js +11 -0
- package/dist/components/overlays/toast/toast-item.class.js.map +1 -1
- package/dist/components/overlays/toast/toast.class.d.ts +15 -0
- package/dist/components/overlays/toast/toast.class.d.ts.map +1 -1
- package/dist/components/overlays/toast/toast.class.js +15 -0
- package/dist/components/overlays/toast/toast.class.js.map +1 -1
- package/dist/components/retrieval/citation-badge/citation-badge.class.d.ts +8 -0
- package/dist/components/retrieval/citation-badge/citation-badge.class.d.ts.map +1 -1
- package/dist/components/retrieval/citation-badge/citation-badge.class.js +8 -0
- package/dist/components/retrieval/citation-badge/citation-badge.class.js.map +1 -1
- package/dist/components/retrieval/entity-chip/entity-chip.class.d.ts +1 -0
- package/dist/components/retrieval/entity-chip/entity-chip.class.d.ts.map +1 -1
- package/dist/components/retrieval/entity-chip/entity-chip.class.js +1 -0
- package/dist/components/retrieval/entity-chip/entity-chip.class.js.map +1 -1
- package/dist/components/retrieval/ingestion-queue/ingestion-queue.class.d.ts +2 -0
- package/dist/components/retrieval/ingestion-queue/ingestion-queue.class.d.ts.map +1 -1
- package/dist/components/retrieval/ingestion-queue/ingestion-queue.class.js +2 -0
- package/dist/components/retrieval/ingestion-queue/ingestion-queue.class.js.map +1 -1
- package/dist/components/retrieval/retrieval-trace/retrieval-trace.class.d.ts +1 -0
- package/dist/components/retrieval/retrieval-trace/retrieval-trace.class.d.ts.map +1 -1
- package/dist/components/retrieval/retrieval-trace/retrieval-trace.class.js +1 -0
- package/dist/components/retrieval/retrieval-trace/retrieval-trace.class.js.map +1 -1
- package/dist/components/utility/diff-view/diff-view.class.d.ts +1 -0
- package/dist/components/utility/diff-view/diff-view.class.d.ts.map +1 -1
- package/dist/components/utility/diff-view/diff-view.class.js +1 -0
- package/dist/components/utility/diff-view/diff-view.class.js.map +1 -1
- package/dist/components/utility/icon/icon.class.d.ts +1 -0
- package/dist/components/utility/icon/icon.class.d.ts.map +1 -1
- package/dist/components/utility/icon/icon.class.js +1 -0
- package/dist/components/utility/icon/icon.class.js.map +1 -1
- package/dist/components/utility/json-viewer/json-viewer.class.d.ts +3 -0
- package/dist/components/utility/json-viewer/json-viewer.class.d.ts.map +1 -1
- package/dist/components/utility/json-viewer/json-viewer.class.js +3 -0
- package/dist/components/utility/json-viewer/json-viewer.class.js.map +1 -1
- package/dist/components/utility/known-date/known-date.class.d.ts +11 -0
- package/dist/components/utility/known-date/known-date.class.d.ts.map +1 -1
- package/dist/components/utility/known-date/known-date.class.js +11 -0
- package/dist/components/utility/known-date/known-date.class.js.map +1 -1
- package/dist/components/viewers/calendar-viewer/calendar-viewer.class.d.ts +2 -0
- package/dist/components/viewers/calendar-viewer/calendar-viewer.class.d.ts.map +1 -1
- package/dist/components/viewers/calendar-viewer/calendar-viewer.class.js +2 -0
- package/dist/components/viewers/calendar-viewer/calendar-viewer.class.js.map +1 -1
- package/dist/components/viewers/dataset-viewer/dataset-viewer.class.d.ts +5 -0
- package/dist/components/viewers/dataset-viewer/dataset-viewer.class.d.ts.map +1 -1
- package/dist/components/viewers/dataset-viewer/dataset-viewer.class.js +5 -0
- package/dist/components/viewers/dataset-viewer/dataset-viewer.class.js.map +1 -1
- package/dist/components/viewers/document-compare/document-compare.class.d.ts +1 -1
- package/dist/components/viewers/document-compare/document-compare.class.js +1 -1
- package/dist/components/viewers/document-preview/document-preview.class.d.ts +3 -0
- package/dist/components/viewers/document-preview/document-preview.class.d.ts.map +1 -1
- package/dist/components/viewers/document-preview/document-preview.class.js +3 -0
- package/dist/components/viewers/document-preview/document-preview.class.js.map +1 -1
- package/dist/components/viewers/email-viewer/email-viewer.class.d.ts +2 -0
- package/dist/components/viewers/email-viewer/email-viewer.class.d.ts.map +1 -1
- package/dist/components/viewers/email-viewer/email-viewer.class.js +2 -0
- package/dist/components/viewers/email-viewer/email-viewer.class.js.map +1 -1
- package/dist/components/viewers/html-viewer/html-viewer.class.d.ts +2 -0
- package/dist/components/viewers/html-viewer/html-viewer.class.d.ts.map +1 -1
- package/dist/components/viewers/html-viewer/html-viewer.class.js +2 -0
- package/dist/components/viewers/html-viewer/html-viewer.class.js.map +1 -1
- package/dist/components/viewers/pdf-viewer/pdf-viewer.class.d.ts.map +1 -1
- package/dist/components/viewers/pdf-viewer/pdf-viewer.class.js +41 -9
- package/dist/components/viewers/pdf-viewer/pdf-viewer.class.js.map +1 -1
- package/dist/internal/css-length.d.ts +40 -0
- package/dist/internal/css-length.d.ts.map +1 -0
- package/dist/internal/css-length.js +72 -0
- package/dist/internal/css-length.js.map +1 -0
- package/dist/internal/orientation-breakpoint.d.ts +12 -0
- package/dist/internal/orientation-breakpoint.d.ts.map +1 -0
- package/dist/internal/orientation-breakpoint.js +127 -0
- package/dist/internal/orientation-breakpoint.js.map +1 -0
- package/dist/lyra.d.ts +2 -2
- package/dist/lyra.d.ts.map +1 -1
- package/dist/lyra.js.map +1 -1
- package/llms/components/lr-accordion-item.md +23 -0
- package/llms/components/lr-accordion.md +23 -0
- package/llms/components/lr-activity-feed.md +45 -0
- package/llms/components/lr-agent-run.md +66 -0
- package/llms/components/lr-agent-trace.md +42 -0
- package/llms/components/lr-agent-workspace.md +109 -0
- package/llms/components/lr-animated-image.md +66 -0
- package/llms/components/lr-animation.md +73 -0
- package/llms/components/lr-app-rail-item.md +218 -0
- package/llms/components/lr-app-rail.md +218 -0
- package/llms/components/lr-archive-viewer.md +36 -0
- package/llms/components/lr-artifact-panel.md +60 -0
- package/llms/components/lr-attachment-chip.md +131 -0
- package/llms/components/lr-attachment-trigger.md +90 -0
- package/llms/components/lr-audio-visualizer.md +43 -0
- package/llms/components/lr-av-player.md +50 -0
- package/llms/components/lr-avatar-group.md +69 -0
- package/llms/components/lr-avatar.md +69 -0
- package/llms/components/lr-badge.md +25 -0
- package/llms/components/lr-bar-chart.md +70 -0
- package/llms/components/lr-box-plot.md +67 -0
- package/llms/components/lr-branch-picker.md +32 -0
- package/llms/components/lr-breadcrumb-item.md +30 -0
- package/llms/components/lr-breadcrumb.md +30 -0
- package/llms/components/lr-browser-frame.md +51 -0
- package/llms/components/lr-bubble-chart.md +70 -0
- package/llms/components/lr-button-group.md +30 -0
- package/llms/components/lr-button.md +89 -0
- package/llms/components/lr-calendar-viewer.md +32 -0
- package/llms/components/lr-calendar.md +52 -0
- package/llms/components/lr-callout.md +37 -0
- package/llms/components/lr-card.md +67 -0
- package/llms/components/lr-carousel-item.md +29 -0
- package/llms/components/lr-carousel.md +43 -0
- package/llms/components/lr-chart.md +148 -0
- package/llms/components/lr-chat-composer.md +139 -0
- package/llms/components/lr-chat-message.md +145 -0
- package/llms/components/lr-chat-viewport.md +70 -0
- package/llms/components/lr-checkbox-group.md +21 -0
- package/llms/components/lr-checkbox.md +79 -0
- package/llms/components/lr-checkpoint.md +48 -0
- package/llms/components/lr-chip-group.md +152 -0
- package/llms/components/lr-chip.md +152 -0
- package/llms/components/lr-chunk-inspector.md +66 -0
- package/llms/components/lr-citation-badge.md +102 -0
- package/llms/components/lr-code-block-core.md +113 -0
- package/llms/components/lr-code-block.md +146 -0
- package/llms/components/lr-code-editor.md +72 -0
- package/llms/components/lr-color-picker.md +21 -0
- package/llms/components/lr-combobox.md +196 -0
- package/llms/components/lr-command-palette.md +50 -0
- package/llms/components/lr-commit-card.md +33 -0
- package/llms/components/lr-community-card.md +54 -0
- package/llms/components/lr-compare-panel.md +38 -0
- package/llms/components/lr-confirm-bar.md +48 -0
- package/llms/components/lr-contact-viewer.md +34 -0
- package/llms/components/lr-context-inspector.md +50 -0
- package/llms/components/lr-context-meter.md +92 -0
- package/llms/components/lr-control-group.md +46 -0
- package/llms/components/lr-conversation-item.md +118 -0
- package/llms/components/lr-copy-button.md +52 -0
- package/llms/components/lr-csv-viewer.md +49 -0
- package/llms/components/lr-dashboard-grid.md +34 -0
- package/llms/components/lr-data-grid.md +47 -0
- package/llms/components/lr-dataset-viewer.md +60 -0
- package/llms/components/lr-date-input.md +201 -0
- package/llms/components/lr-date-picker.md +201 -0
- package/llms/components/lr-details.md +23 -0
- package/llms/components/lr-dialog.md +185 -0
- package/llms/components/lr-diff-view.md +86 -0
- package/llms/components/lr-divider.md +28 -0
- package/llms/components/lr-dock-panel.md +110 -0
- package/llms/components/lr-document-compare.md +22 -0
- package/llms/components/lr-document-library.md +21 -0
- package/llms/components/lr-document-preview.md +179 -0
- package/llms/components/lr-document-viewer.md +84 -0
- package/llms/components/lr-docx-viewer.md +63 -0
- package/llms/components/lr-doughnut-chart.md +70 -0
- package/llms/components/lr-drawer.md +48 -0
- package/llms/components/lr-drilldown-panel.md +25 -0
- package/llms/components/lr-dropdown-item.md +171 -0
- package/llms/components/lr-dropdown.md +24 -0
- package/llms/components/lr-ebook-viewer.md +60 -0
- package/llms/components/lr-email-viewer.md +51 -0
- package/llms/components/lr-emoji-picker.md +71 -0
- package/llms/components/lr-empty.md +56 -0
- package/llms/components/lr-entity-card.md +64 -0
- package/llms/components/lr-entity-chip.md +50 -0
- package/llms/components/lr-entity-dossier.md +71 -0
- package/llms/components/lr-env-list.md +27 -0
- package/llms/components/lr-eval-dataset.md +45 -0
- package/llms/components/lr-eval-result.md +45 -0
- package/llms/components/lr-evaluation-run.md +50 -0
- package/llms/components/lr-export-button.md +104 -0
- package/llms/components/lr-file-icon.md +34 -0
- package/llms/components/lr-file-input.md +104 -0
- package/llms/components/lr-file-tree.md +29 -0
- package/llms/components/lr-filter-bar.md +20 -0
- package/llms/components/lr-flag.md +122 -0
- package/llms/components/lr-flow-canvas.md +112 -0
- package/llms/components/lr-flow-controls.md +47 -0
- package/llms/components/lr-flow-minimap.md +52 -0
- package/llms/components/lr-flow-node.md +56 -0
- package/llms/components/lr-flow-run-overlay.md +56 -0
- package/llms/components/lr-format-bytes.md +31 -0
- package/llms/components/lr-format-date.md +33 -0
- package/llms/components/lr-format-number.md +41 -0
- package/llms/components/lr-gauge.md +65 -0
- package/llms/components/lr-generation-status.md +105 -0
- package/llms/components/lr-geojson-view.md +43 -0
- package/llms/components/lr-graph-legend.md +64 -0
- package/llms/components/lr-graph-query-builder.md +27 -0
- package/llms/components/lr-graph.md +224 -0
- package/llms/components/lr-grounding-summary.md +57 -0
- package/llms/components/lr-handoff-divider.md +27 -0
- package/llms/components/lr-heatmap.md +232 -0
- package/llms/components/lr-highlight-layer.md +31 -0
- package/llms/components/lr-histogram.md +69 -0
- package/llms/components/lr-html-viewer.md +30 -0
- package/llms/components/lr-icon-button.md +39 -0
- package/llms/components/lr-icon.md +36 -0
- package/llms/components/lr-image-comparer.md +38 -0
- package/llms/components/lr-image-viewer.md +35 -0
- package/llms/components/lr-include.md +53 -0
- package/llms/components/lr-ingestion-queue.md +60 -0
- package/llms/components/lr-input.md +82 -0
- package/llms/components/lr-intersection-observer.md +25 -0
- package/llms/components/lr-json-viewer.md +98 -0
- package/llms/components/lr-kbd.md +74 -0
- package/llms/components/lr-knowledge-base.md +64 -0
- package/llms/components/lr-knowledge-graph-explorer.md +92 -0
- package/llms/components/lr-known-date.md +84 -0
- package/llms/components/lr-lightbox.md +79 -0
- package/llms/components/lr-line-chart.md +70 -0
- package/llms/components/lr-lite-chart.md +143 -0
- package/llms/components/lr-live-region.md +105 -0
- package/llms/components/lr-map.md +127 -0
- package/llms/components/lr-markdown-core.md +70 -0
- package/llms/components/lr-markdown.md +171 -0
- package/llms/components/lr-media-card.md +106 -0
- package/llms/components/lr-memory-panel.md +67 -0
- package/llms/components/lr-mention-popover.md +139 -0
- package/llms/components/lr-menu-item.md +171 -0
- package/llms/components/lr-menu.md +171 -0
- package/llms/components/lr-message-actions.md +48 -0
- package/llms/components/lr-message-feedback.md +37 -0
- package/llms/components/lr-mind-map.md +64 -0
- package/llms/components/lr-model-select.md +144 -0
- package/llms/components/lr-model-settings-panel.md +99 -0
- package/llms/components/lr-mutation-observer.md +27 -0
- package/llms/components/lr-neighbor-list.md +56 -0
- package/llms/components/lr-node-palette.md +67 -0
- package/llms/components/lr-notebook-viewer.md +65 -0
- package/llms/components/lr-number-input.md +44 -0
- package/llms/components/lr-option.md +196 -0
- package/llms/components/lr-page-rail.md +37 -0
- package/llms/components/lr-pagination.md +88 -0
- package/llms/components/lr-path-strip.md +55 -0
- package/llms/components/lr-pdf-viewer.md +78 -0
- package/llms/components/lr-phone-input.md +162 -0
- package/llms/components/lr-pie-chart.md +70 -0
- package/llms/components/lr-playback.md +74 -0
- package/llms/components/lr-polar-area-chart.md +70 -0
- package/llms/components/lr-policy-summary.md +33 -0
- package/llms/components/lr-poll-status.md +71 -0
- package/llms/components/lr-popover.md +31 -0
- package/llms/components/lr-pptx-viewer.md +35 -0
- package/llms/components/lr-progress-bar.md +22 -0
- package/llms/components/lr-progress-ring.md +26 -0
- package/llms/components/lr-provenance-panel.md +58 -0
- package/llms/components/lr-push-to-talk.md +50 -0
- package/llms/components/lr-qr-code.md +20 -0
- package/llms/components/lr-query-builder.md +21 -0
- package/llms/components/lr-radar-chart.md +70 -0
- package/llms/components/lr-radio-group.md +25 -0
- package/llms/components/lr-radio.md +31 -0
- package/llms/components/lr-random-content.md +62 -0
- package/llms/components/lr-rating.md +21 -0
- package/llms/components/lr-relative-time.md +31 -0
- package/llms/components/lr-resize-observer.md +25 -0
- package/llms/components/lr-responsive-panel.md +112 -0
- package/llms/components/lr-result-card.md +88 -0
- package/llms/components/lr-result-field.md +88 -0
- package/llms/components/lr-retrieval-results.md +84 -0
- package/llms/components/lr-retrieval-search.md +70 -0
- package/llms/components/lr-retrieval-trace.md +59 -0
- package/llms/components/lr-rubric-form.md +37 -0
- package/llms/components/lr-scatter-chart.md +70 -0
- package/llms/components/lr-scroller.md +47 -0
- package/llms/components/lr-segmented.md +74 -0
- package/llms/components/lr-select.md +113 -0
- package/llms/components/lr-sequence-strip.md +95 -0
- package/llms/components/lr-skeleton.md +53 -0
- package/llms/components/lr-slider.md +92 -0
- package/llms/components/lr-source-card.md +131 -0
- package/llms/components/lr-source-list.md +131 -0
- package/llms/components/lr-source-picker.md +63 -0
- package/llms/components/lr-span-waterfall.md +42 -0
- package/llms/components/lr-sparkline.md +60 -0
- package/llms/components/lr-spinner.md +32 -0
- package/llms/components/lr-split.md +191 -0
- package/llms/components/lr-spreadsheet-viewer.md +47 -0
- package/llms/components/lr-stack-trace.md +77 -0
- package/llms/components/lr-stat.md +89 -0
- package/llms/components/lr-stepper.md +118 -0
- package/llms/components/lr-stream-status.md +128 -0
- package/llms/components/lr-streaming-text.md +101 -0
- package/llms/components/lr-suggestion-chips.md +40 -0
- package/llms/components/lr-svg-viewer.md +47 -0
- package/llms/components/lr-swatch-picker.md +91 -0
- package/llms/components/lr-switch.md +82 -0
- package/llms/components/lr-table.md +201 -0
- package/llms/components/lr-tabs.md +80 -0
- package/llms/components/lr-tag.md +25 -0
- package/llms/components/lr-task-list.md +42 -0
- package/llms/components/lr-terminal.md +44 -0
- package/llms/components/lr-test-results.md +38 -0
- package/llms/components/lr-textarea.md +111 -0
- package/llms/components/lr-thinking-panel.md +93 -0
- package/llms/components/lr-thread-list.md +97 -0
- package/llms/components/lr-time-input.md +53 -0
- package/llms/components/lr-time-range.md +91 -0
- package/llms/components/lr-timeline-item.md +65 -0
- package/llms/components/lr-timeline.md +65 -0
- package/llms/components/lr-toast-item.md +123 -0
- package/llms/components/lr-toast.md +123 -0
- package/llms/components/lr-token-input.md +31 -0
- package/llms/components/lr-tool-approval-dialog.md +131 -0
- package/llms/components/lr-tool-call-chip.md +101 -0
- package/llms/components/lr-tool-param-form.md +148 -0
- package/llms/components/lr-tool-result-dialog.md +106 -0
- package/llms/components/lr-tool-result-view.md +162 -0
- package/llms/components/lr-tool-select-dialog.md +124 -0
- package/llms/components/lr-tool-timeline.md +56 -0
- package/llms/components/lr-tooltip.md +47 -0
- package/llms/components/lr-tour.md +100 -0
- package/llms/components/lr-trace-tree.md +35 -0
- package/llms/components/lr-transcript-feed.md +45 -0
- package/llms/components/lr-tree-node.md +133 -0
- package/llms/components/lr-tree.md +133 -0
- package/llms/components/lr-typing-indicator.md +80 -0
- package/llms/components/lr-usage-badge.md +44 -0
- package/llms/components/lr-virtual-list.md +145 -0
- package/llms/components/lr-voice-picker.md +78 -0
- package/llms/components/lr-widget-renderer.md +78 -0
- package/llms/components/lr-widget.md +104 -0
- package/llms/components/lr-word-cloud.md +112 -0
- package/llms/components/lr-xml-viewer.md +58 -0
- package/llms/components/lr-zoomable-frame.md +57 -0
- package/llms/index.md +301 -0
- package/llms/migration.md +86 -0
- package/llms/peers.md +41 -0
- package/llms/shared.md +321 -0
- package/llms/tokens.md +533 -0
- package/llms-full.txt +10731 -8563
- package/llms.txt +64 -121
- package/package.json +14 -2
- package/vscode-css-data.json +1424 -185
- package/vscode-html-data.json +128 -107
- package/web-types.json +853 -118
package/vscode-html-data.json
CHANGED
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
"name": "lr-activity-feed",
|
|
66
66
|
"description": {
|
|
67
67
|
"kind": "markdown",
|
|
68
|
-
"value": "`<lr-activity-feed>` — an append-only streaming log of granular agent actions (\"Searching the\nweb…\", \"Read src/index.ts\"), collapsing to a localized \"Completed N steps\" summary once the run\nis over. Entries never change state once added (a step whose status mutates in place belongs to\n`<lr-task-list>` instead). Implements the shared follow (stick-to-bottom) contract: `follow`\nis a component-managed, host-assignable property, released on user scroll-up and re-engaged at\nthe bottom, firing `lr-follow-change` on every transition (mount excluded). At/above\n`virtualizeThreshold` entries, the body renders through an internal `<lr-virtual-list>`\ninstead of a plain keyed list — same list semantics either way, keyed by `id`.\n\nEach entry's `text` renders as plain text by default; a host needing richer per-entry content\n(rendered markdown, a trailing tool-call chip list, etc.) sets `renderText` to fully replace it,\nidentically whether or not the feed is currently virtualized.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The outer container. |\n| `body` | The scrollable region containing the entries (or the internal virtual-list). |\n| `entry` | One entry row; carries `data-tone`. |\n| `entry-icon` | The literal `icon` hint, or a tone dot when unset. |\n| `entry-text` | The entry's `text`. Not rendered while `renderText` is set — its returned content replaces this part entirely. |\n| `entry-timestamp` | The formatted timestamp, only rendered while `showTimestamps` and a valid `timestamp` is set. |\n| `header` | The clickable header (`<button>`). |\n| `status-dot` | The decorative mode indicator dot; pulses while `mode=\"live\"`. |\n| `summary` | The header's one-line ticker (`live`) or completed-count summary (`post-hoc`). |\n| `toggle` | The chevron indicator inside the header. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-activity-feed-max-height` (default: `16rem`) — Cap on how tall the expanded body grows before it scrolls internally (non-virtualized mode); also sizes the internal virtual-list."
|
|
68
|
+
"value": "`<lr-activity-feed>` — an append-only streaming log of granular agent actions (\"Searching the\nweb…\", \"Read src/index.ts\"), collapsing to a localized \"Completed N steps\" summary once the run\nis over. Entries never change state once added (a step whose status mutates in place belongs to\n`<lr-task-list>` instead). Implements the shared follow (stick-to-bottom) contract: `follow`\nis a component-managed, host-assignable property, released on user scroll-up and re-engaged at\nthe bottom, firing `lr-follow-change` on every transition (mount excluded). At/above\n`virtualizeThreshold` entries, the body renders through an internal `<lr-virtual-list>`\ninstead of a plain keyed list — same list semantics either way, keyed by `id`.\n\nEach entry's `text` renders as plain text by default; a host needing richer per-entry content\n(rendered markdown, a trailing tool-call chip list, etc.) sets `renderText` to fully replace it,\nidentically whether or not the feed is currently virtualized.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The outer container. |\n| `body` | The scrollable region containing the entries (or the internal virtual-list). |\n| `entry` | One entry row; carries `data-tone`. |\n| `entry-icon` | The literal `icon` hint, or a tone dot when unset. |\n| `entry-text` | The entry's `text`. Not rendered while `renderText` is set — its returned content replaces this part entirely. |\n| `entry-timestamp` | The formatted timestamp, only rendered while `showTimestamps` and a valid `timestamp` is set. |\n| `header` | The clickable header (`<button>`). |\n| `label` | The header's title text — `label`, or its localized default when `label` is left at `'Activity'`. |\n| `status-dot` | The decorative mode indicator dot; pulses while `mode=\"live\"`. |\n| `summary` | The header's one-line ticker (`live`) or completed-count summary (`post-hoc`). |\n| `toggle` | The chevron indicator inside the header. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-activity-feed-max-height` (default: `16rem`) — Cap on how tall the expanded body grows before it scrolls internally (non-virtualized mode); also sizes the internal virtual-list."
|
|
69
69
|
},
|
|
70
70
|
"attributes": [
|
|
71
71
|
{
|
|
@@ -123,7 +123,7 @@
|
|
|
123
123
|
"name": "lr-agent-run",
|
|
124
124
|
"description": {
|
|
125
125
|
"kind": "markdown",
|
|
126
|
-
"value": "`<lr-agent-run>` — the top-level shell for one `AgentRun`: lifecycle-status badge, elapsed\ntime, current step, model/cost summary, and built-in Cancel/Retry controls in a header, plus\nfour named composition slots (`tasks`/`tools`/`reasoning`/`output`) for the run's actual\ncontent. This is deliberately a SHELL, not a new step-rendering surface — every piece of\nper-step or per-invocation rendering routes through an existing primitive:\n\n- **Elapsed time**: composes `<lr-generation-status>` (`active`/`started-at`, its own built-in\n Stop button hidden via `show-stop=\"false\"` since this component renders its own Cancel/Retry\n pair instead) for the *live, ticking* readout while the run is genuinely in progress\n (`running`/`collecting`/`waiting-input`/`waiting-approval`). `<lr-stream-status>` doesn't fit:\n its `phase` vocabulary\n (`idle`/`connecting`/`streaming`/`stalled`) models transport/connection health, not an agent\n run's nine built-in lifecycle statuses (plus application-defined extensions), and it exposes no elapsed-time readout at all — exactly the\n distinction `<lr-generation-status>`'s own class doc already draws between the two. Once the\n run reaches a terminal state (`done`/`error`/`cancelled`) with both a `startedAt` and an\n `endedAt`, this component instead renders a small locally-formatted static duration\n (`endedAt - startedAt`): `<lr-generation-status>`'s freeze-on-`active=false` semantics only\n ever freeze at whatever it last computed *live*, so mounting it directly against a completed\n run loaded from history (e.g. `startedAt` yesterday, `endedAt` five minutes later, loaded\n today) would either show a stale zero or the wrong multi-hour span — it has no way to render a\n fixed historical span on demand. That static fallback reuses the same small `formatDuration()`\n algorithm `<lr-usage-badge>` and `<lr-tool-call-chip>` already duplicate locally for the same\n reason (see this file's own copy).\n- **Model + cost summary**: composes `<lr-usage-badge>`, fed `run.costEstimate` (formatted via\n `formatCost`, or a plain `Intl.NumberFormat` by default — this library never assumes a\n currency, see `<lr-format-number>`'s own explicit `currency` prop) as its `cost-text`.\n `run.model` (a plain string with no analogous `<lr-usage-badge>` property) renders alongside\n as plain text.\n- **Current step**: a single-line summary of whichever `run.steps` entry currently has\n `status.kind === 'running'` (the last such entry, if more than one) — a plain text line, not a\n list, so it doesn't duplicate `<lr-task-list>`'s own per-item rendering.\n- **Tasks slot default content**: when the host doesn't slot anything into `tasks` and\n `run.steps` is non-empty, this component's own `<slot>` fallback renders a `<lr-task-list>`\n populated by mapping every `AgentStep` to a `TaskItem` (see `toTaskItem()`) — a plain data\n adapter between the two existing shapes, not new rendering.\n- **Status badge**: composes `<lr-badge>`. **Empty state**: composes `<lr-empty>` when `run` is\n `null`.\n\n`tools`/`reasoning`/`output` are plain named slots with no default content — entirely the\nhost's own composition (typically `<lr-tool-call-chip>`/`<lr-tool-result-view>` rows,\nreasoning/streaming text, and final output respectively). An `actions` slot adds extra header\ncontrols alongside the built-in Cancel/Retry pair. The `header` and `summary` slots replace the\nbuilt-in lifecycle header and model/usage/metrics summary respectively. `statusLabels` and\n`statusVariants` make application-defined lifecycle kinds first-class, while `metrics` renders\narbitrary labeled values such as prompt and completion token counts.\n\nThe built-in Cancel button renders while `showCancel` is true and the run's status is one of\n`TICKING_KINDS` (still genuinely in progress); Retry renders while `showRetry` is true and the\nstatus is `error` or `cancelled`. Clicking either fires `lr-cancel`/`lr-retry` with\n`CancelEventDetail`/`RetryEventDetail` from `src/ai/types.ts` — this component never cancels or\nretries anything itself, it only requests. `RetryEventDetail.attempt` is a 1-based counter\nlocal to this component, incremented on every `lr-retry` click and reset to `0` whenever\n`run.id` changes (a genuinely new run replacing the old one, as opposed to the same run's status\nmerely updating in place).\n\nLifecycle transitions into an attention-needing or terminal state (`waiting-input`,\n`waiting-approval`, `done`, `error`, `cancelled`) are announced through an internal\n`<lr-live-region>`, mirroring `<lr-stream-status>`'s own stall/recover announcements —\n`running`/`idle` transitions are frequent and not independently actionable, so they stay\nsilent, and whatever status a freshly-assigned `run` (a new `run.id`) happens to already carry\nis never itself treated as an eventful transition, only a later in-place change is.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| `actions` | Extra header actions alongside the built-in Cancel/Retry buttons. |\n| `header` | Replaces the built-in lifecycle header and its built-in actions. |\n| `output` | The run's final output content. No default content. |\n| `reasoning` | Reasoning/thinking content. No default content. |\n| `summary` | Replaces the built-in model, usage, and metrics summary. |\n| `tasks` | Task/plan content. Falls back to a `<lr-task-list>` built from `run.steps` when nothing is slotted and `run.steps` is non-empty. |\n| `tools` | Tool-call content (e.g. `<lr-tool-call-chip>`/`<lr-tool-result-view>` rows). No default content. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `actions` | Wrapper around the `actions` slot and the built-in Cancel/Retry buttons. |\n| `base` | The root container. |\n| `body` | Wrapper around the four composition slots. |\n| `cancel-button` | The built-in Cancel button. Only rendered while cancelable (see the class doc). |\n| `current-step` | Wrapper around the current-step icon and label. Only rendered while a step has `status.kind === 'running'`. |\n| `current-step-icon` | The spinning current-step icon. |\n| `current-step-label` | The current step's `label` text. |\n| `elapsed` | The composed `<lr-generation-status>`, only rendered while the run is actively ticking (see the class doc). |\n| `elapsed-static` | The static formatted duration for a terminal run with both `startedAt` and `endedAt`. |\n| `empty` | The `<lr-empty>` shown when `run` is `null`. |\n| `header` | The header row wrapping status, elapsed time, current step, summary, and actions. |\n| `metric` | One arbitrary metric in the built-in summary. |\n| `metric-label` | The metric's label. |\n| `metric-value` | The metric's value. |\n| `model` | `run.model`, when set. |\n| `output` | The `output` slot. |\n| `reasoning` | The `reasoning` slot. |\n| `retry-button` | The built-in Retry button. Only rendered while retryable. |\n| `status` | Wrapper around the status badge and optional status message. |\n| `status-badge` | The resolved `<lr-badge>` lifecycle-status pill. |\n| `status-message` | `run.status.message`, when set. |\n| `summary` | Wrapper around the model text and the composed `<lr-usage-badge>`. Only rendered while `run.model` or a valid `run.costEstimate` is present. |\n| `tasks` | The `tasks` slot. |\n| `tools` | The `tools` slot. |\n| `usage` | The composed `<lr-usage-badge>`.
|
|
126
|
+
"value": "`<lr-agent-run>` — the top-level shell for one `AgentRun`: lifecycle-status badge, elapsed\ntime, current step, model/cost summary, and built-in Cancel/Retry controls in a header, plus\nfour named composition slots (`tasks`/`tools`/`reasoning`/`output`) for the run's actual\ncontent. This is deliberately a SHELL, not a new step-rendering surface — every piece of\nper-step or per-invocation rendering routes through an existing primitive:\n\n- **Elapsed time**: composes `<lr-generation-status>` (`active`/`started-at`, its own built-in\n Stop button hidden via `show-stop=\"false\"` since this component renders its own Cancel/Retry\n pair instead) for the *live, ticking* readout while the run is genuinely in progress\n (`running`/`collecting`/`waiting-input`/`waiting-approval`). `<lr-stream-status>` doesn't fit:\n its `phase` vocabulary\n (`idle`/`connecting`/`streaming`/`stalled`) models transport/connection health, not an agent\n run's nine built-in lifecycle statuses (plus application-defined extensions), and it exposes no elapsed-time readout at all — exactly the\n distinction `<lr-generation-status>`'s own class doc already draws between the two. Once the\n run reaches a terminal state (`done`/`error`/`cancelled`) with both a `startedAt` and an\n `endedAt`, this component instead renders a small locally-formatted static duration\n (`endedAt - startedAt`): `<lr-generation-status>`'s freeze-on-`active=false` semantics only\n ever freeze at whatever it last computed *live*, so mounting it directly against a completed\n run loaded from history (e.g. `startedAt` yesterday, `endedAt` five minutes later, loaded\n today) would either show a stale zero or the wrong multi-hour span — it has no way to render a\n fixed historical span on demand. That static fallback reuses the same small `formatDuration()`\n algorithm `<lr-usage-badge>` and `<lr-tool-call-chip>` already duplicate locally for the same\n reason (see this file's own copy).\n- **Model + cost summary**: composes `<lr-usage-badge>`, fed `run.costEstimate` (formatted via\n `formatCost`, or a plain `Intl.NumberFormat` by default — this library never assumes a\n currency, see `<lr-format-number>`'s own explicit `currency` prop) as its `cost-text`.\n `run.model` (a plain string with no analogous `<lr-usage-badge>` property) renders alongside\n as plain text.\n- **Current step**: a single-line summary of whichever `run.steps` entry currently has\n `status.kind === 'running'` (the last such entry, if more than one) — a plain text line, not a\n list, so it doesn't duplicate `<lr-task-list>`'s own per-item rendering.\n- **Tasks slot default content**: when the host doesn't slot anything into `tasks` and\n `run.steps` is non-empty, this component's own `<slot>` fallback renders a `<lr-task-list>`\n populated by mapping every `AgentStep` to a `TaskItem` (see `toTaskItem()`) — a plain data\n adapter between the two existing shapes, not new rendering.\n- **Status badge**: composes `<lr-badge>`. **Empty state**: composes `<lr-empty>` when `run` is\n `null`.\n\n`tools`/`reasoning`/`output` are plain named slots with no default content — entirely the\nhost's own composition (typically `<lr-tool-call-chip>`/`<lr-tool-result-view>` rows,\nreasoning/streaming text, and final output respectively). An `actions` slot adds extra header\ncontrols alongside the built-in Cancel/Retry pair. The `header` and `summary` slots replace the\nbuilt-in lifecycle header and model/usage/metrics summary respectively. `statusLabels` and\n`statusVariants` make application-defined lifecycle kinds first-class, while `metrics` renders\narbitrary labeled values such as prompt and completion token counts.\n\nThe built-in Cancel button renders while `showCancel` is true and the run's status is one of\n`TICKING_KINDS` (still genuinely in progress); Retry renders while `showRetry` is true and the\nstatus is `error` or `cancelled`. Clicking either fires `lr-cancel`/`lr-retry` with\n`CancelEventDetail`/`RetryEventDetail` from `src/ai/types.ts` — this component never cancels or\nretries anything itself, it only requests. `RetryEventDetail.attempt` is a 1-based counter\nlocal to this component, incremented on every `lr-retry` click and reset to `0` whenever\n`run.id` changes (a genuinely new run replacing the old one, as opposed to the same run's status\nmerely updating in place).\n\nLifecycle transitions into an attention-needing or terminal state (`waiting-input`,\n`waiting-approval`, `done`, `error`, `cancelled`) are announced through an internal\n`<lr-live-region>`, mirroring `<lr-stream-status>`'s own stall/recover announcements —\n`running`/`idle` transitions are frequent and not independently actionable, so they stay\nsilent, and whatever status a freshly-assigned `run` (a new `run.id`) happens to already carry\nis never itself treated as an eventful transition, only a later in-place change is.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| `actions` | Extra header actions alongside the built-in Cancel/Retry buttons. |\n| `header` | Replaces the built-in lifecycle header and its built-in actions. |\n| `output` | The run's final output content. No default content. |\n| `reasoning` | Reasoning/thinking content. No default content. |\n| `summary` | Replaces the built-in model, usage, and metrics summary. |\n| `tasks` | Task/plan content. Falls back to a `<lr-task-list>` built from `run.steps` when nothing is slotted and `run.steps` is non-empty. |\n| `tools` | Tool-call content (e.g. `<lr-tool-call-chip>`/`<lr-tool-result-view>` rows). No default content. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `actions` | Wrapper around the `actions` slot and the built-in Cancel/Retry buttons. |\n| `base` | The root container. |\n| `body` | Wrapper around the four composition slots. |\n| `cancel-button` | The built-in Cancel button. Only rendered while cancelable (see the class doc). |\n| `current-step` | Wrapper around the current-step icon and label. Only rendered while a step has `status.kind === 'running'`. |\n| `current-step-icon` | The spinning current-step icon. |\n| `current-step-label` | The current step's `label` text. |\n| `elapsed` | The composed `<lr-generation-status>`, only rendered while the run is actively ticking (see the class doc). |\n| `elapsed-static` | The static formatted duration for a terminal run with both `startedAt` and `endedAt`. |\n| `empty` | The `<lr-empty>` shown when `run` is `null`. |\n| `header` | The header row wrapping status, elapsed time, current step, summary, and actions. |\n| `metric` | One arbitrary metric in the built-in summary. |\n| `metric-label` | The metric's label. |\n| `metric-value` | The metric's value. |\n| `model` | `run.model`, when set. |\n| `output` | The `output` slot. |\n| `reasoning` | The `reasoning` slot. |\n| `retry-button` | The built-in Retry button. Only rendered while retryable. |\n| `status` | Wrapper around the status badge and optional status message. |\n| `status-badge` | The resolved `<lr-badge>` lifecycle-status pill. |\n| `status-message` | `run.status.message`, when set. |\n| `summary` | Wrapper around the model text and the composed `<lr-usage-badge>`. Only rendered while `run.model` or a valid `run.costEstimate` is present. |\n| `tasks` | The `tasks` slot. |\n| `tools` | The `tools` slot. |\n| `usage` | The composed `<lr-usage-badge>`. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-agent-run-spin` (default: `1s linear`) — Current-step icon spin animation duration and timing."
|
|
127
127
|
},
|
|
128
128
|
"attributes": [
|
|
129
129
|
{
|
|
@@ -504,7 +504,7 @@
|
|
|
504
504
|
"name": "lr-app-rail",
|
|
505
505
|
"description": {
|
|
506
506
|
"kind": "markdown",
|
|
507
|
-
"value": "`<lr-app-rail>` — a responsive navigation rail that adapts across three\npresentations as the *viewport* narrows (not this element's own inline\nsize — see the `mode` accessor doc for why): `'full'` (nav items show\nicon + label, inline), `'icon-only'` (a narrower inline rail, icons only),\nand `'mobile'` (hidden behind a toggle button; opening it shows a\nfocus-trapped floating overlay over the page).\n\nBreakpoints are viewport-width `matchMedia()` queries against\n`icon-only-breakpoint`/`mobile-breakpoint`, not a `ResizeObserver` on this\nelement — a nav rail's presentation should track the actual device/window\nwidth the way a native OS shell's navigation does, not however much\nhorizontal space a particular layout happens to give it.\n\nThe `'mobile'` state participates in the library's shared overlay stack,\nwhich supplies focus trapping, Escape/backdrop dismissal, inerting, and\nfocus restoration without nesting a `<lr-dialog>` in this component's\nshadow template. `[part=\"base\"]` (the inline\n`'full'`/`'icon-only'` presentation) and `[part=\"panel\"]` (the mobile\noverlay) are the *same* element promoted in place across modes (mirrors\n`<lr-widget>`'s fullscreen mode) — never both at once, and never two\nseparate copies of the slotted content, which slot projection can't\nproduce anyway (a light-DOM node is only ever assigned to one `<slot>`).\nIt's a plain `<div>` with an explicit `role=\"navigation\"` rather than a\nliteral `<nav>` tag: a `<nav>`'s implicit role can't be overridden to\n`role=\"dialog\"` while the overlay is modal without an `aria-allowed-role`\nviolation (verified against axe), whereas an explicit `role=\"navigation\"`\non a generic element can be swapped for `role=\"dialog\"` freely.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | Nav items. Use `<lr-app-rail-item>` for the explicit icon/label contract that automatically hides labels in `'icon-only'` mode. Generic links and buttons remain supported, but their compact presentation is the consumer's responsibility. While the mobile overlay is open, clicking anywhere inside this slot closes it. |\n| `footer` | A trailing user/settings trigger, shown below the nav items. |\n| `header` | Logo/brand content, shown above the nav items in every mode. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `backdrop` | The mobile overlay's scrim. Only rendered while open. |\n| `base` | The rail root while inline (`'full'`/`'icon-only'` modes). |\n| `footer` | The wrapper around the `footer` slot. |\n| `header` | The wrapper around the `header` slot. |\n| `nav` | The wrapper around the default (nav items) slot. |\n| `panel` | The mobile overlay's floating panel — see the class doc for why it's the same element as `base`, never both at once. |\n| `resizer` | The `resizable` opt-in's drag handle -- its interactive hit target, sized to the shared minimum tappable size (`--lr-icon-button-size`), independent of the slimmer visible line rendered by its `resizer-track` child. Only rendered while `resizable` and `mode` is `'full'`. |\n| `resizer-track` | The resizer's slim visible drag line, centered inside `[part=\"resizer\"]`'s larger hit target (mirrors `<lr-swatch-picker>`'s `[part=\"swatch\"]`/`[part=\"swatch-fill\"]` split). Colors on hover/focus the same way the whole handle previously did. |\n| `toggle` | The mobile hamburger/close toggle button. Hidden via CSS outside `'mobile'` mode, or entirely via `hideToggle`.
|
|
507
|
+
"value": "`<lr-app-rail>` — a responsive navigation rail that adapts across three\npresentations as the *viewport* narrows (not this element's own inline\nsize — see the `mode` accessor doc for why): `'full'` (nav items show\nicon + label, inline), `'icon-only'` (a narrower inline rail, icons only),\nand `'mobile'` (hidden behind a toggle button; opening it shows a\nfocus-trapped floating overlay over the page).\n\nBreakpoints are viewport-width `matchMedia()` queries against\n`icon-only-breakpoint`/`mobile-breakpoint`, not a `ResizeObserver` on this\nelement — a nav rail's presentation should track the actual device/window\nwidth the way a native OS shell's navigation does, not however much\nhorizontal space a particular layout happens to give it.\n\nThe `'mobile'` state participates in the library's shared overlay stack,\nwhich supplies focus trapping, Escape/backdrop dismissal, inerting, and\nfocus restoration without nesting a `<lr-dialog>` in this component's\nshadow template. `[part=\"base\"]` (the inline\n`'full'`/`'icon-only'` presentation) and `[part=\"panel\"]` (the mobile\noverlay) are the *same* element promoted in place across modes (mirrors\n`<lr-widget>`'s fullscreen mode) — never both at once, and never two\nseparate copies of the slotted content, which slot projection can't\nproduce anyway (a light-DOM node is only ever assigned to one `<slot>`).\nIt's a plain `<div>` with an explicit `role=\"navigation\"` rather than a\nliteral `<nav>` tag: a `<nav>`'s implicit role can't be overridden to\n`role=\"dialog\"` while the overlay is modal without an `aria-allowed-role`\nviolation (verified against axe), whereas an explicit `role=\"navigation\"`\non a generic element can be swapped for `role=\"dialog\"` freely.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | Nav items. Use `<lr-app-rail-item>` for the explicit icon/label contract that automatically hides labels in `'icon-only'` mode. Generic links and buttons remain supported, but their compact presentation is the consumer's responsibility. While the mobile overlay is open, clicking anywhere inside this slot closes it. |\n| `footer` | A trailing user/settings trigger, shown below the nav items. |\n| `header` | Logo/brand content, shown above the nav items in every mode. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `backdrop` | The mobile overlay's scrim. Only rendered while open. |\n| `base` | The rail root while inline (`'full'`/`'icon-only'` modes). |\n| `footer` | The wrapper around the `footer` slot. |\n| `header` | The wrapper around the `header` slot. |\n| `nav` | The wrapper around the default (nav items) slot. |\n| `panel` | The mobile overlay's floating panel — see the class doc for why it's the same element as `base`, never both at once. |\n| `resizer` | The `resizable` opt-in's drag handle -- its interactive hit target, sized to the shared minimum tappable size (`--lr-icon-button-size`), independent of the slimmer visible line rendered by its `resizer-track` child. Only rendered while `resizable` and `mode` is `'full'`. |\n| `resizer-track` | The resizer's slim visible drag line, centered inside `[part=\"resizer\"]`'s larger hit target (mirrors `<lr-swatch-picker>`'s `[part=\"swatch\"]`/`[part=\"swatch-fill\"]` split). Colors on hover/focus the same way the whole handle previously did. |\n| `toggle` | The mobile hamburger/close toggle button. Hidden via CSS outside `'mobile'` mode, or entirely via `hideToggle`. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-app-rail-width` (default: `var(--lr-size-15rem)`) — The inline rail's width in `'full'` mode. Overridden by an inline width while a `resizable` rail has an explicit `railWidthPx`.\n- `--lr-app-rail-icon-width` (default: `var(--lr-size-4rem)`) — The inline rail's width in `'icon-only'` mode, and the maximum width of each slotted `<lr-app-rail-item>` in that mode.\n- `--lr-app-rail-mobile-width` (default: `var(--lr-size-18rem)`) — The mobile overlay panel's width, capped at `85vw`.\n- `--lr-app-rail-overlay-color` (default: `var(--lr-color-overlay)`) — The mobile overlay scrim's background."
|
|
508
508
|
},
|
|
509
509
|
"attributes": [
|
|
510
510
|
{
|
|
@@ -780,7 +780,7 @@
|
|
|
780
780
|
"name": "lr-attachment-chip",
|
|
781
781
|
"description": {
|
|
782
782
|
"kind": "markdown",
|
|
783
|
-
"value": "`<lr-attachment-chip>` — a compact chip representing one file queued for\n(or already part of) a chat message: a composer's pre-send attachment\ntray, or a sent message's `attachments` slot (see `<lr-chat-message>`).\n\nTwo independent ways to populate it, matching the two points in a message's\nlifecycle this is used at:\n - Set `file` to a real `File` (fresh from a picker/drop) — `name`, `size`,\n `mime-type` and the image thumbnail are all auto-derived from it.\n - Set the plain `name`/`size`/`mime-type`/`thumbnail-src` props instead,\n for reconstructing a chip from server-persisted attachment metadata\n (e.g. after a page reload, when no real `File` object exists any more).\n\n`file` always wins when both are present — see each accessor's own doc.\nThe image thumbnail for a real `File` is a cached `URL.createObjectURL()`\nblob URL, created in the update lifecycle immediately before the thumbnail\nrenders and revoked automatically once `file`\nchanges away from the object it was created for, and on disconnect — this\ncomponent never leaks a blob URL.\n\nIdentifying *which* attachment a `lr-remove`/`lr-retry` event is about:\nthis deliberately reuses the platform's own `id`/`id` attribute (every\nelement already has one; there's no need to shadow it with a second,\ndifferently-named Lit property, unlike e.g. `<lr-tool-call-chip>`'s\n`call-id` which identifies a *call*, a concept distinct from the chip\nelement itself). Set `id=\"...\"` when you have a stable server-side\nattachment id. When `id` is left unset and `file` is set, a stable id is\nderived from `` `${file.name}:${file.size}:${file.lastModified}` `` — stable\nacross re-renders of the *same* `File` object without requiring the\nconsumer to invent one. When neither is available, a generated internal id\nis used as a last resort so the event always has *some* id.\n\ni18n/locale: complete contextual messages (including filename/percentage\nplacement and punctuation) route through the shared localization registry.\n`removeLabel`/`retryLabel`/`uploadingLabel`/`uploadFailedLabel` remain as\nsimple per-instance copy overrides; use the component's `.strings` map or a\nregistered locale when a translation needs to reorder the interpolated\nvalues. These are plain properties, not slots — this component still\nexposes no slots.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The chip's root container. |\n| `meta` | Wrapper around `name` and `size`. |\n| `name` | The filename (ellipsis-truncated via CSS; the untruncated name is always available via the native `title` tooltip). |\n| `preview-button` | The preview affordance, rendered when a file or `preview-src` is available. |\n| `progress` | The numeric upload progress bar (`role=\"progressbar\"`), shown only while `status=\"uploading\"` and `progress` is a meaningful (>0) number. |\n| `progress-fill` | The filled portion of `progress`. |\n| `remove-button` | The remove (×) affordance, only rendered while `removable`. |\n| `retry-button` | The retry affordance, only rendered while `status=\"error\"`. |\n| `size` | The human-readable formatted file size. Hidden when no size is known. |\n| `spinner` | The indeterminate upload spinner, shown instead of `progress` while `status=\"uploading\"` and `progress` is unset/0. |\n| `status-text` | The visible text twin of the status accent color — carries the state in text, not just color. Empty/hidden for `pending`/`done`. Gets `role=\"alert\"` for `status=\"error\"` only, so a screen-reader user not already focused on the chip still hears an upload failure; the ticking `'uploading'` readout deliberately stays out of the accessibility tree the same way `<lr-generation-status>`'s per-second elapsed/token readout does — a live region re-announcing every progress tick would be noise, not information, while a one-shot failure is exactly the kind of infrequent, actionable transition a live region exists for. |\n| `thumbnail` | The leading image thumbnail / generic file glyph. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-attachment-chip-spinner-duration` (default: `0.8s`) — Duration of one indeterminate upload-spinner rotation. The ambient loop stops under reduced motion."
|
|
783
|
+
"value": "`<lr-attachment-chip>` — a compact chip representing one file queued for\n(or already part of) a chat message: a composer's pre-send attachment\ntray, or a sent message's `attachments` slot (see `<lr-chat-message>`).\n\nTwo independent ways to populate it, matching the two points in a message's\nlifecycle this is used at:\n - Set `file` to a real `File` (fresh from a picker/drop) — `name`, `size`,\n `mime-type` and the image thumbnail are all auto-derived from it.\n - Set the plain `name`/`size`/`mime-type`/`thumbnail-src` props instead,\n for reconstructing a chip from server-persisted attachment metadata\n (e.g. after a page reload, when no real `File` object exists any more).\n\n`file` always wins when both are present — see each accessor's own doc.\nThe image thumbnail for a real `File` is a cached `URL.createObjectURL()`\nblob URL, created in the update lifecycle immediately before the thumbnail\nrenders and revoked automatically once `file`\nchanges away from the object it was created for, and on disconnect — this\ncomponent never leaks a blob URL.\n\nIdentifying *which* attachment a `lr-remove`/`lr-retry` event is about:\nthis deliberately reuses the platform's own `id`/`id` attribute (every\nelement already has one; there's no need to shadow it with a second,\ndifferently-named Lit property, unlike e.g. `<lr-tool-call-chip>`'s\n`call-id` which identifies a *call*, a concept distinct from the chip\nelement itself). Set `id=\"...\"` when you have a stable server-side\nattachment id. When `id` is left unset and `file` is set, a stable id is\nderived from `` `${file.name}:${file.size}:${file.lastModified}` `` — stable\nacross re-renders of the *same* `File` object without requiring the\nconsumer to invent one. When neither is available, a generated internal id\nis used as a last resort so the event always has *some* id.\n\ni18n/locale: complete contextual messages (including filename/percentage\nplacement and punctuation) route through the shared localization registry.\n`removeLabel`/`retryLabel`/`uploadingLabel`/`uploadFailedLabel` remain as\nsimple per-instance copy overrides; use the component's `.strings` map or a\nregistered locale when a translation needs to reorder the interpolated\nvalues. These are plain properties, not slots — this component still\nexposes no slots.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The chip's root container. |\n| `meta` | Wrapper around `name` and `size`. |\n| `name` | The filename (ellipsis-truncated via CSS; the untruncated name is always available via the native `title` tooltip). |\n| `preview-button` | The preview affordance, rendered when a file or `preview-src` is available. |\n| `progress` | The numeric upload progress bar (`role=\"progressbar\"`), shown only while `status=\"uploading\"` and `progress` is a meaningful (>0) number. |\n| `progress-fill` | The filled portion of `progress`. |\n| `remove-button` | The remove (×) affordance, only rendered while `removable`. |\n| `retry-button` | The retry affordance, only rendered while `status=\"error\"`. |\n| `size` | The human-readable formatted file size. Hidden when no size is known. |\n| `spinner` | The indeterminate upload spinner, shown instead of `progress` while `status=\"uploading\"` and `progress` is unset/0. |\n| `status-text` | The visible text twin of the status accent color — carries the state in text, not just color. Empty/hidden for `pending`/`done`. Gets `role=\"alert\"` for `status=\"error\"` only, so a screen-reader user not already focused on the chip still hears an upload failure; the ticking `'uploading'` readout deliberately stays out of the accessibility tree the same way `<lr-generation-status>`'s per-second elapsed/token readout does — a live region re-announcing every progress tick would be noise, not information, while a one-shot failure is exactly the kind of infrequent, actionable transition a live region exists for. |\n| `thumbnail` | The leading image thumbnail / generic file glyph. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-attachment-chip-spinner-duration` (default: `0.8s`) — Duration of one indeterminate upload-spinner rotation. The ambient loop stops under reduced motion.\n- `--lr-attachment-chip-accent` (default: `var(--lr-color-text-quiet)`) — Accent color used for the status text, spinner, and progress fill. Auto-swapped per `status` (`uploading`/`error`/`done`); the default is the neutral `pending` tone.\n- `--lr-attachment-chip-bg` (default: `var(--lr-color-surface)`) — Chip background, auto-swapped per `status` to that status's `-quiet` tint.\n- `--lr-attachment-chip-border` (default: `var(--lr-color-border)`) — Chip border color. Every non-`pending` `status` sets it to `transparent`.\n- `--lr-attachment-chip-compact-thumbnail-size` (default: `var(--lr-size-1-75rem)`) — Thumbnail size while `compact`, rethemeable independently of `--lr-icon-button-size`.\n- `--lr-attachment-chip-compact-font-size` (default: `var(--lr-font-size-xs)`) — Font size of `[part=\"base\"]` while `compact`.\n- `--lr-attachment-chip-compact-gap` (default: `var(--lr-size-0-25rem)`) — Gap between the chip's parts while `compact`."
|
|
784
784
|
},
|
|
785
785
|
"attributes": [
|
|
786
786
|
{
|
|
@@ -959,7 +959,7 @@
|
|
|
959
959
|
"name": "lr-audio-visualizer",
|
|
960
960
|
"description": {
|
|
961
961
|
"kind": "markdown",
|
|
962
|
-
"value": "`<lr-audio-visualizer>` — a presentational, canvas-drawn voice-activity visualization (bars or\nwaveform), the LiveKit-BarVisualizer counterpart for this library. Driven by a `MediaStream`\n(lazily wired to a WebAudio `AnalyserNode`), a numeric `level` for hosts that already compute\nlevels (e.g. `lr-push-to-talk`'s `lr-level`), or `state` alone for an ambient animation when no\nreal signal exists. A real signal (`stream` or `level`) always drives amplitude regardless of\n`prefers-reduced-motion` — that is live, user-controlled feedback, not decorative motion; only the\nsignal-less ambient animation is throttled and simplified under reduced motion.\n\nAnimation frames are only scheduled while the drawn output is actually time-varying (live analyser\ndata, or a non-reduced ambient pulse/sweep). Static output — a constant `level`, idle bars, or the\nflattened reduced-motion ambient patterns — draws once and stops; any change that could alter the\nnext frame (properties, stream/`AudioContext` state, size, theme, motion preference) re-enters the\nloop via `scheduleDraw()`.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The root wrapper. |\n| `canvas` | The drawing surface (`aria-hidden`; the host itself carries `role=\"img\"` and the accessible name). |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-audio-visualizer-color` (default: `var(--lr-color-brand)`) — Active bar/waveform color.\n- `--lr-audio-visualizer-quiet-color` (default: `var(--lr-color-brand-quiet)`) — Inactive/idle color
|
|
962
|
+
"value": "`<lr-audio-visualizer>` — a presentational, canvas-drawn voice-activity visualization (bars or\nwaveform), the LiveKit-BarVisualizer counterpart for this library. Driven by a `MediaStream`\n(lazily wired to a WebAudio `AnalyserNode`), a numeric `level` for hosts that already compute\nlevels (e.g. `lr-push-to-talk`'s `lr-level`), or `state` alone for an ambient animation when no\nreal signal exists. A real signal (`stream` or `level`) always drives amplitude regardless of\n`prefers-reduced-motion` — that is live, user-controlled feedback, not decorative motion; only the\nsignal-less ambient animation is throttled and simplified under reduced motion.\n\nAnimation frames are only scheduled while the drawn output is actually time-varying (live analyser\ndata, or a non-reduced ambient pulse/sweep). Static output — a constant `level`, idle bars, or the\nflattened reduced-motion ambient patterns — draws once and stops; any change that could alter the\nnext frame (properties, stream/`AudioContext` state, size, theme, motion preference) re-enters the\nloop via `scheduleDraw()`.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The root wrapper. |\n| `canvas` | The drawing surface (`aria-hidden`; the host itself carries `role=\"img\"` and the accessible name). |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-audio-visualizer-color` (default: `var(--lr-color-brand)`) — Active bar/waveform color.\n- `--lr-audio-visualizer-quiet-color` (default: `var(--lr-color-brand-quiet)`) — Inactive/idle color.\n- `--lr-audio-visualizer-height` (default: `var(--lr-size-3rem)`) — The host's block size, which the canvas fills at 100%."
|
|
963
963
|
},
|
|
964
964
|
"attributes": [
|
|
965
965
|
{
|
|
@@ -1107,7 +1107,7 @@
|
|
|
1107
1107
|
"name": "lr-avatar",
|
|
1108
1108
|
"description": {
|
|
1109
1109
|
"kind": "markdown",
|
|
1110
|
-
"value": "`<lr-avatar>` — a small, fixed-size identity marker: default-slotted icon/glyph content, an\nimage, or an initials fallback, in that priority order (whichever's set takes over from the\nnext). First-party invention (no Web Awesome equivalent) -- purely presentational, no built-in\ninteractivity; a consumer wraps it in their own `<button>`/`<lr-menu>` trigger for a\nuser-menu affordance.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | Icon/glyph content (e.g. an inline SVG) shown in place of the image/initials, e.g. to mark a chat message avatar as \"AI\" vs. \"user\" with a role glyph instead of a photo or initials. Takes priority over both `src` and `initials`. The glyph itself is treated as decorative (`aria-hidden`); set `alt` alongside it for an accessible name. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The outer circle/square container. |\n| `icon` | Wrapper around the default-slotted icon/glyph content. Only rendered while the slot has assigned content. |\n| `image` | The `<img>`, only rendered while `src` is set and has not failed to load (and no icon content is slotted). |\n| `initials` | The fallback initials text, rendered whenever neither slotted content nor `image` is.
|
|
1110
|
+
"value": "`<lr-avatar>` — a small, fixed-size identity marker: default-slotted icon/glyph content, an\nimage, or an initials fallback, in that priority order (whichever's set takes over from the\nnext). First-party invention (no Web Awesome equivalent) -- purely presentational, no built-in\ninteractivity; a consumer wraps it in their own `<button>`/`<lr-menu>` trigger for a\nuser-menu affordance.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | Icon/glyph content (e.g. an inline SVG) shown in place of the image/initials, e.g. to mark a chat message avatar as \"AI\" vs. \"user\" with a role glyph instead of a photo or initials. Takes priority over both `src` and `initials`. The glyph itself is treated as decorative (`aria-hidden`); set `alt` alongside it for an accessible name. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The outer circle/square container. |\n| `icon` | Wrapper around the default-slotted icon/glyph content. Only rendered while the slot has assigned content. |\n| `image` | The `<img>`, only rendered while `src` is set and has not failed to load (and no icon content is slotted). |\n| `initials` | The fallback initials text, rendered whenever neither slotted content nor `image` is. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-avatar-size` (default: `var(--lr-size-2rem)`) — Inline and block size of the container. `size` swaps it to `var(--lr-size-1-5rem)` (`sm`) or `var(--lr-size-2-5rem)` (`lg`).\n- `--lr-avatar-bg` (default: `var(--lr-color-border)`) — Container background. Each non-neutral `tone` sets it to that tone's `-quiet` tint.\n- `--lr-avatar-color` (default: `var(--lr-color-text)`) — Initials/glyph color. Each non-neutral `tone` sets it to that tone's loud color."
|
|
1111
1111
|
},
|
|
1112
1112
|
"attributes": [
|
|
1113
1113
|
{
|
|
@@ -1216,7 +1216,7 @@
|
|
|
1216
1216
|
"name": "lr-badge",
|
|
1217
1217
|
"description": {
|
|
1218
1218
|
"kind": "markdown",
|
|
1219
|
-
"value": "`<lr-badge>` — a compact status label.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | Badge content. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The badge surface.
|
|
1219
|
+
"value": "`<lr-badge>` — a compact status label.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | Badge content. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The badge surface. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-badge-background` (default: `var(--lr-color-surface)`) — The badge's background. Each non-neutral `variant` sets it to that variant's `-quiet` tint.\n- `--lr-badge-border` (default: `var(--lr-color-border)`) — The badge's border color. Each non-neutral `variant` sets it to that variant's loud color.\n- `--lr-badge-color` (default: `var(--lr-color-text)`) — The badge's text color. Each non-neutral `variant` sets it to that variant's loud color."
|
|
1220
1220
|
},
|
|
1221
1221
|
"attributes": [
|
|
1222
1222
|
{
|
|
@@ -1239,7 +1239,7 @@
|
|
|
1239
1239
|
"name": "lr-bar-chart",
|
|
1240
1240
|
"description": {
|
|
1241
1241
|
"kind": "markdown",
|
|
1242
|
-
"value": "`<lr-bar-chart>` — `<lr-chart>` with `type` locked to `\"bar\"`.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| `center` | Optional overlay content positioned at the chart area's center. Useful for doughnut and pie totals. |\n| `data-table` | An optional consumer-provided accessible table alternative. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The chart wrapper. |\n| `canvas` | The Chart.js canvas. |\n| `center` | The chart-area-centered overlay wrapper for the `center` slot. |\n| `data-table` | The optional generated or slotted data table. |\n| `description` | The accessible chart summary. |\n| `reset-zoom-button` | The reset-zoom control when zoom is active.
|
|
1242
|
+
"value": "`<lr-bar-chart>` — `<lr-chart>` with `type` locked to `\"bar\"`.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| `center` | Optional overlay content positioned at the chart area's center. Useful for doughnut and pie totals. |\n| `data-table` | An optional consumer-provided accessible table alternative. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The chart wrapper. |\n| `canvas` | The Chart.js canvas. |\n| `center` | The chart-area-centered overlay wrapper for the `center` slot. |\n| `data-table` | The optional generated or slotted data table. |\n| `description` | The accessible chart summary. |\n| `reset-zoom-button` | The reset-zoom control when zoom is active. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-chart-height` (default: `var(--lr-size-280px)`) — The host's `block-size`. Set on the host element from the `height` property on every change (custom properties only cascade downward, so it cannot be set from inside the shadow root); a host-level override is overwritten the next time `height` changes.\n- `--lr-chart-grid-color` (default: `var(--lr-color-border)`) — Grid-line color. Resolved via `getComputedStyle` on every draw (Chart.js paints to canvas and cannot consume `var()`).\n- `--lr-chart-tick-color` (default: `var(--lr-color-text-quiet)`) — Axis tick-label color; also used for the `xLabel`/`yLabel`/`y2Label` axis-title text (there is no separate title-color token). Resolved via `getComputedStyle` on every draw.\n- `--lr-chart-legend-color` (default: `var(--lr-color-text)`) — Legend label color. Resolved via `getComputedStyle` on every draw.\n- `--lr-chart-tooltip-bg` (default: `var(--lr-color-surface)`) — Tooltip background color. Resolved via `getComputedStyle` on every draw.\n- `--lr-chart-tooltip-text` (default: `var(--lr-color-text)`) — Tooltip text color. Resolved via `getComputedStyle` on every draw."
|
|
1243
1243
|
},
|
|
1244
1244
|
"attributes": [
|
|
1245
1245
|
{
|
|
@@ -1425,7 +1425,7 @@
|
|
|
1425
1425
|
"name": "lr-branch-picker",
|
|
1426
1426
|
"description": {
|
|
1427
1427
|
"kind": "markdown",
|
|
1428
|
-
"value": "`<lr-branch-picker>` — the \"‹ 2 / 5 ›\" navigator across regenerated/edited variants of one\nmessage. Pure controlled: it never mutates its own `index` — the same contract `<lr-pagination>`\nalready establishes for `page`. The host listens for `lr-branch-change`, swaps the displayed\nbranch content, and applies the new `index` back.\n\nRenders nothing at all while `count < 2`, so a host can bind it unconditionally on every message\nregardless of whether that message actually has multiple branches yet.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The group wrapper (`role=\"group\"`). |\n| `next-button` | The next-branch chevron button. |\n| `position` | The visible \"2 / 5\" text. |\n| `previous-button` | The previous-branch chevron button. |"
|
|
1428
|
+
"value": "`<lr-branch-picker>` — the \"‹ 2 / 5 ›\" navigator across regenerated/edited variants of one\nmessage. Pure controlled: it never mutates its own `index` — the same contract `<lr-pagination>`\nalready establishes for `page`. The host listens for `lr-branch-change`, swaps the displayed\nbranch content, and applies the new `index` back.\n\nRenders nothing at all while `count < 2`, so a host can bind it unconditionally on every message\nregardless of whether that message actually has multiple branches yet.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The group wrapper (`role=\"group\"`). |\n| `next-button` | The next-branch chevron button. |\n| `next-glyph` | The chevron glyph wrapper inside `next-button`. |\n| `position` | The visible \"2 / 5\" text. |\n| `previous-button` | The previous-branch chevron button. |\n| `previous-glyph` | The chevron glyph wrapper inside `previous-button`. |"
|
|
1429
1429
|
},
|
|
1430
1430
|
"attributes": [
|
|
1431
1431
|
{
|
|
@@ -1588,7 +1588,7 @@
|
|
|
1588
1588
|
"name": "lr-bubble-chart",
|
|
1589
1589
|
"description": {
|
|
1590
1590
|
"kind": "markdown",
|
|
1591
|
-
"value": "`<lr-bubble-chart>` — `<lr-chart>` with `type` locked to `\"bubble\"`. Feed\npoints via `Series.points`, each needing an `x`/`y`/`r` (radius) triple —\ncast the array through `as unknown as Series['points']` (or a local\n`BubblePoint` type) when constructing it, since `Series.points` itself is\ntyped as `{ x; y; label? }[]` with no `r` field.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| `center` | Optional overlay content positioned at the chart area's center. Useful for doughnut and pie totals. |\n| `data-table` | An optional consumer-provided accessible table alternative. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The chart wrapper. |\n| `canvas` | The Chart.js canvas. |\n| `center` | The chart-area-centered overlay wrapper for the `center` slot. |\n| `data-table` | The optional generated or slotted data table. |\n| `description` | The accessible chart summary. |\n| `reset-zoom-button` | The reset-zoom control when zoom is active.
|
|
1591
|
+
"value": "`<lr-bubble-chart>` — `<lr-chart>` with `type` locked to `\"bubble\"`. Feed\npoints via `Series.points`, each needing an `x`/`y`/`r` (radius) triple —\ncast the array through `as unknown as Series['points']` (or a local\n`BubblePoint` type) when constructing it, since `Series.points` itself is\ntyped as `{ x; y; label? }[]` with no `r` field.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| `center` | Optional overlay content positioned at the chart area's center. Useful for doughnut and pie totals. |\n| `data-table` | An optional consumer-provided accessible table alternative. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The chart wrapper. |\n| `canvas` | The Chart.js canvas. |\n| `center` | The chart-area-centered overlay wrapper for the `center` slot. |\n| `data-table` | The optional generated or slotted data table. |\n| `description` | The accessible chart summary. |\n| `reset-zoom-button` | The reset-zoom control when zoom is active. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-chart-height` (default: `var(--lr-size-280px)`) — The host's `block-size`. Set on the host element from the `height` property on every change (custom properties only cascade downward, so it cannot be set from inside the shadow root); a host-level override is overwritten the next time `height` changes.\n- `--lr-chart-grid-color` (default: `var(--lr-color-border)`) — Grid-line color. Resolved via `getComputedStyle` on every draw (Chart.js paints to canvas and cannot consume `var()`).\n- `--lr-chart-tick-color` (default: `var(--lr-color-text-quiet)`) — Axis tick-label color; also used for the `xLabel`/`yLabel`/`y2Label` axis-title text (there is no separate title-color token). Resolved via `getComputedStyle` on every draw.\n- `--lr-chart-legend-color` (default: `var(--lr-color-text)`) — Legend label color. Resolved via `getComputedStyle` on every draw.\n- `--lr-chart-tooltip-bg` (default: `var(--lr-color-surface)`) — Tooltip background color. Resolved via `getComputedStyle` on every draw.\n- `--lr-chart-tooltip-text` (default: `var(--lr-color-text)`) — Tooltip text color. Resolved via `getComputedStyle` on every draw."
|
|
1592
1592
|
},
|
|
1593
1593
|
"attributes": [
|
|
1594
1594
|
{
|
|
@@ -1709,7 +1709,7 @@
|
|
|
1709
1709
|
"name": "lr-button",
|
|
1710
1710
|
"description": {
|
|
1711
1711
|
"kind": "markdown",
|
|
1712
|
-
"value": "`<lr-button>` — a generic action-button primitive. Renders an internal native\n`<button part=\"base\">`. `type=\"submit\"`/`type=\"reset\"`\nare handled by this component itself via the host's own `closest('form')` — a shadow-internal\nnative `<button type=\"submit\">` does not participate in an ancestor light-DOM form's submission\non its own, since form-submitter semantics don't cross the shadow boundary.\n\nA host `aria-label` is forwarded to the internal button as a literal string (for an icon-only\nbutton with no visible label); external `aria-labelledby`/`aria-describedby` idrefs are not\ncopied across the shadow boundary.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | Default slot: the button's label content. |\n| `end` | Trailing icon/content, rendered after the label. |\n| `start` | Leading icon/content, rendered before the label. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The internal native `<button>`. |\n| `end` | The `end` slot wrapper. |\n| `label` | The default-slot label wrapper. |\n| `spinner` | The loading spinner, present only while `loading` is `true`. |\n| `start` | The `start` slot wrapper. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-button-width` (default: `100%`) — Inline size of the internal button. The host defaults it to `100%` so the native button follows the host's own width; override to `auto` (or any other value) for a compact inline composition.\n- `--lr-button-hover-brightness` (default: `1.08`) — `filter: brightness()` multiplier applied while hovering a non-disabled button.\n- `--lr-button-active-scale` (default: `0.9875`) — `transform: scale()` factor applied while a non-disabled button is pressed.\n- `--lr-button-spinner-duration` (default: `1s`) — Rotation period of the `loading` spinner."
|
|
1712
|
+
"value": "`<lr-button>` — a generic action-button primitive. Renders an internal native\n`<button part=\"base\">`. `type=\"submit\"`/`type=\"reset\"`\nare handled by this component itself via the host's own `closest('form')` — a shadow-internal\nnative `<button type=\"submit\">` does not participate in an ancestor light-DOM form's submission\non its own, since form-submitter semantics don't cross the shadow boundary.\n\nA host `aria-label` is forwarded to the internal button as a literal string (for an icon-only\nbutton with no visible label); external `aria-labelledby`/`aria-describedby` idrefs are not\ncopied across the shadow boundary.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | Default slot: the button's label content. |\n| `end` | Trailing icon/content, rendered after the label. |\n| `start` | Leading icon/content, rendered before the label. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The internal native `<button>`. |\n| `end` | The `end` slot wrapper. |\n| `label` | The default-slot label wrapper. |\n| `spinner` | The loading spinner, present only while `loading` is `true`. |\n| `start` | The `start` slot wrapper. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-button-width` (default: `100%`) — Inline size of the internal button. The host defaults it to `100%` so the native button follows the host's own width; override to `auto` (or any other value) for a compact inline composition.\n- `--lr-button-hover-brightness` (default: `1.08`) — `filter: brightness()` multiplier applied while hovering a non-disabled button.\n- `--lr-button-active-scale` (default: `0.9875`) — `transform: scale()` factor applied while a non-disabled button is pressed.\n- `--lr-button-spinner-duration` (default: `1s`) — Rotation period of the `loading` spinner.\n- `--lr-button-accent` (default: `var(--lr-color-text)`) — Text/glyph color for the chrome-less appearances (`outlined`, `plain`, `link`). Swapped per `variant` to that variant's semantic color.\n- `--lr-button-fill` (default: `var(--lr-color-surface)`) — Background of `appearance=\"filled\"`. Swapped per `variant` to that variant's semantic color.\n- `--lr-button-on-fill` (default: `var(--lr-color-text)`) — Text color on top of `--lr-button-fill`. Swapped per `variant` to that variant's `on-*` color.\n- `--lr-button-accent-fill` (default: `var(--lr-color-neutral)`) — Background of `appearance=\"accent\"` (and its border color). Swapped per `variant` to that variant's semantic color.\n- `--lr-button-accent-on-fill` (default: `var(--lr-color-on-neutral)`) — Text color on top of `--lr-button-accent-fill`. Swapped per `variant` to that variant's `on-*` color.\n- `--lr-button-border` (default: `var(--lr-color-border)`) — Border color of the internal button. Swapped per `variant` to that variant's semantic color.\n- `--lr-button-outlined-border` (default: `var(--lr-color-border-strong)`) — Border color of `appearance=\"outlined\"`, which overrides `--lr-button-border`.\n- `--lr-button-quiet-border` (default: `var(--lr-color-border)`) — Border color of `appearance=\"quiet\"`.\n- `--lr-button-quiet-text` (default: `var(--lr-color-text-quiet)`) — Text color of `appearance=\"quiet\"`.\n- `--lr-button-size-2xs` (default: `var(--lr-size-1-25rem)`) — `min-block-size` at `size=\"2xs\"`.\n- `--lr-button-size-xs` (default: `var(--lr-size-1-5rem)`) — `min-block-size` at `size=\"xs\"`.\n- `--lr-button-size-s` (default: `var(--lr-size-1-75rem)`) — `min-block-size` at `size=\"s\"`.\n- `--lr-button-size-m` (default: `var(--lr-size-2rem)`) — `min-block-size` at `size=\"m\"`.\n- `--lr-button-size-l` (default: `var(--lr-size-2-5rem)`) — `min-block-size` at `size=\"l\"`.\n- `--lr-button-size-xl` (default: `var(--lr-size-3rem)`) — `min-block-size` at `size=\"xl\"`."
|
|
1713
1713
|
},
|
|
1714
1714
|
"attributes": [
|
|
1715
1715
|
{
|
|
@@ -1767,7 +1767,7 @@
|
|
|
1767
1767
|
"name": "lr-button-group",
|
|
1768
1768
|
"description": {
|
|
1769
1769
|
"kind": "markdown",
|
|
1770
|
-
"value": "`<lr-button-group>` — a responsive grouping primitive for related actions.\nIt preserves the consumer's button elements and exposes the group semantics\non the element that owns the label.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | Buttons or other action controls. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The group wrapper. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-button-group-gap` — Gap between grouped controls."
|
|
1770
|
+
"value": "`<lr-button-group>` — a responsive grouping primitive for related actions.\nIt preserves the consumer's button elements and exposes the group semantics\non the element that owns the label.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | Buttons or other action controls. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The group wrapper. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-button-group-gap` (default: `var(--lr-space-2xs)`) — Gap between grouped controls."
|
|
1771
1771
|
},
|
|
1772
1772
|
"attributes": [
|
|
1773
1773
|
{
|
|
@@ -1797,7 +1797,7 @@
|
|
|
1797
1797
|
"name": "lr-calendar",
|
|
1798
1798
|
"description": {
|
|
1799
1799
|
"kind": "markdown",
|
|
1800
|
-
"value": "`<lr-calendar>` — responsive month calendar with event markers and agenda mode.\n\nMonth-view event markers are a mouse-only quick-select affordance layered on\ntop of the focusable day cell: the day grid's own roving-tabindex/arrow-key\nnavigation already targets the day `<button>`, and nesting a second\nfocusable control inside that same native `<button>` is not valid (a\n`<button>` element must not contain interactive/tabindex descendants, and\n`role=\"button\"` itself forbids focusable descendants regardless). Agenda\nview renders each event as its own real `<button part=\"agenda-event\">` and\nis the fully keyboard-accessible way to reach `lr-event-select`.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `agenda` | Agenda list. |\n| `day` | Day cell. |\n| `event` | Event marker. |\n| `grid` | Month grid. |\n| `header` | Calendar header. |\n| `nav-glyph` | The previous/next chevron glyph, mirrored under RTL. |\n| `week` | One week row within the month grid. |\n| `weekday` | One weekday header cell. |\n| `weekdays` | Weekday header row.
|
|
1800
|
+
"value": "`<lr-calendar>` — responsive month calendar with event markers and agenda mode.\n\nMonth-view event markers are a mouse-only quick-select affordance layered on\ntop of the focusable day cell: the day grid's own roving-tabindex/arrow-key\nnavigation already targets the day `<button>`, and nesting a second\nfocusable control inside that same native `<button>` is not valid (a\n`<button>` element must not contain interactive/tabindex descendants, and\n`role=\"button\"` itself forbids focusable descendants regardless). Agenda\nview renders each event as its own real `<button part=\"agenda-event\">` and\nis the fully keyboard-accessible way to reach `lr-event-select`.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `agenda` | Agenda list. |\n| `agenda-event` | One focusable event button in agenda view (`view=\"agenda\"` only). |\n| `date` | The day-of-month number inside a day cell. |\n| `day` | Day cell. |\n| `event` | Event marker. |\n| `grid` | Month grid. |\n| `header` | Calendar header. |\n| `nav` | A previous/next navigation control in the header (the previous button, and the wrapper around the next button). |\n| `nav-glyph` | The previous/next chevron glyph, mirrored under RTL. |\n| `title` | The header's month/year title. |\n| `week` | One week row within the month grid. |\n| `weekday` | One weekday header cell. |\n| `weekdays` | Weekday header row. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-calendar-day-min-block-size` (default: `var(--lr-size-6rem)`) — Minimum block size of a day cell.\n- `--lr-calendar-day-min-block-size-narrow` (default: `4rem`) — Minimum block size of a day cell once the host is narrower than 28rem."
|
|
1801
1801
|
},
|
|
1802
1802
|
"attributes": [
|
|
1803
1803
|
{
|
|
@@ -1852,7 +1852,7 @@
|
|
|
1852
1852
|
"name": "lr-calendar-viewer",
|
|
1853
1853
|
"description": {
|
|
1854
1854
|
"kind": "markdown",
|
|
1855
|
-
"value": "Parses `.ics` calendars with the optional `ical.js` peer and renders each\nVEVENT as plain text, preserving summaries, times, locations, and details.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The root container. |\n| `body` | The scrollable calendar body. |\n| `error` | The error region. |\n| `event` | One calendar event. |\n| `event-description` | The event description. |\n| `event-list` | The event list. |\n| `event-location` | The event location. |\n| `event-summary` | The event title. |\n| `event-time` | The formatted event time. |\n| `spinner` | The loading region.
|
|
1855
|
+
"value": "Parses `.ics` calendars with the optional `ical.js` peer and renders each\nVEVENT as plain text, preserving summaries, times, locations, and details.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The root container. |\n| `body` | The scrollable calendar body. |\n| `error` | The error region. |\n| `event` | One calendar event. |\n| `event-description` | The event description. |\n| `event-list` | The event list. |\n| `event-location` | The event location. |\n| `event-summary` | The event title. |\n| `event-time` | The formatted event time. |\n| `spinner` | The loading region. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-calendar-viewer-max-height` (default: `none`) — Maximum block size of `[part=\"body\"]` before it scrolls internally. The `maxHeight` property sets this token inline on `[part=\"base\"]`."
|
|
1856
1856
|
},
|
|
1857
1857
|
"attributes": [
|
|
1858
1858
|
{
|
|
@@ -1889,7 +1889,7 @@
|
|
|
1889
1889
|
"name": "lr-callout",
|
|
1890
1890
|
"description": {
|
|
1891
1891
|
"kind": "markdown",
|
|
1892
|
-
"value": "`<lr-callout>` — an inline message surface for status, warning, and error content.\nSet `inline` for lightweight reactive status/error text: it removes the panel chrome while\npreserving the semantic role, optional leading icon, and close action.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | Message content. |\n| `heading` | Optional heading. |\n| `icon` | Optional icon. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The callout surface. |\n| `close-button` | The close button's interactive hit target, sized to the shared minimum tappable size (`--lr-icon-button-size`) in both the default panel and the compact `inline` variant. |\n| `close-icon` | The close button's visible \"×\" glyph, independent of `close-button`'s hit target size -- shrinks in the `inline` variant while the hit target stays full-size. |\n| `content` | The message content. |\n| `heading` | The heading wrapper. |\n| `icon` | The icon wrapper. |\n| `message` | The message content wrapper.
|
|
1892
|
+
"value": "`<lr-callout>` — an inline message surface for status, warning, and error content.\nSet `inline` for lightweight reactive status/error text: it removes the panel chrome while\npreserving the semantic role, optional leading icon, and close action.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | Message content. |\n| `heading` | Optional heading. |\n| `icon` | Optional icon. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The callout surface. |\n| `close-button` | The close button's interactive hit target, sized to the shared minimum tappable size (`--lr-icon-button-size`) in both the default panel and the compact `inline` variant. |\n| `close-icon` | The close button's visible \"×\" glyph, independent of `close-button`'s hit target size -- shrinks in the `inline` variant while the hit target stays full-size. |\n| `content` | The message content. |\n| `heading` | The heading wrapper. |\n| `icon` | The icon wrapper. |\n| `message` | The message content wrapper. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-callout-background` (default: `var(--lr-color-surface)`) — The callout surface's background. Each non-neutral `variant` sets it to that variant's `-quiet` tint.\n- `--lr-callout-border` (default: `var(--lr-color-border)`) — The callout surface's border color. Each non-neutral `variant` sets it to that variant's loud color.\n- `--lr-callout-color` (default: `var(--lr-color-text)`) — The callout's text color. Each non-neutral `variant` sets it to that variant's loud color."
|
|
1893
1893
|
},
|
|
1894
1894
|
"attributes": [
|
|
1895
1895
|
{
|
|
@@ -2065,7 +2065,7 @@
|
|
|
2065
2065
|
"name": "lr-chart",
|
|
2066
2066
|
"description": {
|
|
2067
2067
|
"kind": "markdown",
|
|
2068
|
-
"value": "`<lr-chart>` — the core Chart.js wrapper every other `lr-*-chart` tag\nsubclasses. Requires the optional peer deps `chart.js` + `chartjs-plugin-zoom`.\n\n**API mirror note:** the real `wa-chart` docs page\n(https://webawesome.com/docs/components/chart/) documents a `config:\nChartJS['config']` property alongside its simplified attributes — \"a\nflexible wrapper around Chart.js\" supporting *both* simplified attributes\nand full Chart.js configuration passthrough, not a `data`/`options` prop\npair. `lr-chart` mirrors that dual surface: the `Series`-based\n`datasets`/`labels`/`type`/`legend`/`xLabel`/`yLabel`/`zoom` attributes\nbelow are the simplified surface (compatible with WA's `type`, `xLabel`,\n`yLabel`, `withoutLegend`-equivalent `legend`, etc.), and the additional\n`config` property is the raw-passthrough escape hatch — a\n`Partial<ChartConfiguration>` deep-merged over the generated config in\n`buildConfig()`, mirroring WA's `config` property without discarding the\n`Series` shape the rest of this component family (subclasses, box-plot,\nhistogram) is built on.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| `center` | Optional overlay content positioned at the chart area's center. Useful for doughnut and pie totals. |\n| `data-table` | An optional consumer-provided accessible table alternative. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The chart wrapper. |\n| `canvas` | The Chart.js canvas. |\n| `center` | The chart-area-centered overlay wrapper for the `center` slot. |\n| `data-table` | The optional generated or slotted data table. |\n| `description` | The accessible chart summary. |\n| `reset-zoom-button` | The reset-zoom control when zoom is active.
|
|
2068
|
+
"value": "`<lr-chart>` — the core Chart.js wrapper every other `lr-*-chart` tag\nsubclasses. Requires the optional peer deps `chart.js` + `chartjs-plugin-zoom`.\n\n**API mirror note:** the real `wa-chart` docs page\n(https://webawesome.com/docs/components/chart/) documents a `config:\nChartJS['config']` property alongside its simplified attributes — \"a\nflexible wrapper around Chart.js\" supporting *both* simplified attributes\nand full Chart.js configuration passthrough, not a `data`/`options` prop\npair. `lr-chart` mirrors that dual surface: the `Series`-based\n`datasets`/`labels`/`type`/`legend`/`xLabel`/`yLabel`/`zoom` attributes\nbelow are the simplified surface (compatible with WA's `type`, `xLabel`,\n`yLabel`, `withoutLegend`-equivalent `legend`, etc.), and the additional\n`config` property is the raw-passthrough escape hatch — a\n`Partial<ChartConfiguration>` deep-merged over the generated config in\n`buildConfig()`, mirroring WA's `config` property without discarding the\n`Series` shape the rest of this component family (subclasses, box-plot,\nhistogram) is built on.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| `center` | Optional overlay content positioned at the chart area's center. Useful for doughnut and pie totals. |\n| `data-table` | An optional consumer-provided accessible table alternative. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The chart wrapper. |\n| `canvas` | The Chart.js canvas. |\n| `center` | The chart-area-centered overlay wrapper for the `center` slot. |\n| `data-table` | The optional generated or slotted data table. |\n| `description` | The accessible chart summary. |\n| `reset-zoom-button` | The reset-zoom control when zoom is active. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-chart-height` (default: `var(--lr-size-280px)`) — The host's `block-size`. Set on the host element from the `height` property on every change (custom properties only cascade downward, so it cannot be set from inside the shadow root); a host-level override is overwritten the next time `height` changes.\n- `--lr-chart-grid-color` (default: `var(--lr-color-border)`) — Grid-line color. Resolved via `getComputedStyle` on every draw (Chart.js paints to canvas and cannot consume `var()`).\n- `--lr-chart-tick-color` (default: `var(--lr-color-text-quiet)`) — Axis tick-label color; also used for the `xLabel`/`yLabel`/`y2Label` axis-title text (there is no separate title-color token). Resolved via `getComputedStyle` on every draw.\n- `--lr-chart-legend-color` (default: `var(--lr-color-text)`) — Legend label color. Resolved via `getComputedStyle` on every draw.\n- `--lr-chart-tooltip-bg` (default: `var(--lr-color-surface)`) — Tooltip background color. Resolved via `getComputedStyle` on every draw.\n- `--lr-chart-tooltip-text` (default: `var(--lr-color-text)`) — Tooltip text color. Resolved via `getComputedStyle` on every draw."
|
|
2069
2069
|
},
|
|
2070
2070
|
"attributes": [
|
|
2071
2071
|
{
|
|
@@ -2307,7 +2307,7 @@
|
|
|
2307
2307
|
"name": "lr-chat-message",
|
|
2308
2308
|
"description": {
|
|
2309
2309
|
"kind": "markdown",
|
|
2310
|
-
"value": "`<lr-chat-message>` — a role-based message bubble *shell* for a chat/\nagent conversation surface. It renders none of the message content itself:\nthe default slot carries whatever a consumer wants to display (plain\ntext, a `<lr-markdown>`, a custom template, anything at all) and this\ncomponent only supplies the surrounding chrome — alignment/coloring by\n`role`, an avatar/badges header row, an optional collapse toggle, an\nattachments strip, and a status-aware footer (a live-updating status dot +\ntext, the formatted `timestamp`, a built-in retry affordance for\n`status=\"failed\"`, and an `actions` slot for everything else).\n\nNo built-in copy button is rendered. Deciding what \"the copyable text\" of\nan arbitrary slotted message even means (plain text? the rendered\nmarkdown source? something else?) is exactly the kind of content\ninterpretation this shell deliberately stays out of — slot a copy control\ninto `actions` instead. Firing `lr-copy` (`detail: { text }`) from that\ncontrol keeps the event name consistent with `<lr-json-viewer>`'s own\ncopy affordance, for anything listening at the conversation-surface level.\n\nAccessibility of `status`: the current status is always available as\nplain visible text (`[part=\"status-text\"]`), never color alone. A\ntransition *to* `\"failed\"`, or *from* `\"streaming\"` to `\"sent\"` (a stream\nfinishing), is additionally announced through an internal\n`<lr-live-region>` (see that component's header for the throttled-\nannouncement wiring this composes) so a screen-reader user who isn't\ncurrently focused on this message still learns about it — *unless* the\n`failure` slot has content, in which case this internal announcement is\nskipped: the host's own `role=\"alert\"` failure content is expected to\nannounce itself, and firing both would double-announce the same failure\nwith two different (and differently specific) messages. This differs\nfrom `<lr-typing-indicator>`'s deliberately simpler `role=\"status\"`\napproach — that component only ever has one thing to announce (its own\nmount); this one has a `status` that can flip between several values\nacross a single element's lifetime, which is exactly the coalescing job\n`<lr-live-region>` exists for.\n\n`role` is a message-author role (`user`/`assistant`/`system`, matching\nthe vocabulary of every chat/completion API), *not* a WAI-ARIA role, so\nit reflects to a `data-role` attribute rather than the bare `role`\nattribute — `role=\"user\"` would collide with `Element`'s own ARIA `role`\naccessor and is not a valid ARIA role token to begin with.\n\n`actionsOutsideBubble` allows the `actions` slot to render as a sibling\nimmediately after the message bubble instead of nested inside the footer —\nuseful for consumers whose action row (e.g., a hover-reveal copy button)\nmust sit visually outside the bubble's chrome.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | The message body. |\n| `actions` | Action controls (e.g. copy, retry), rendered at the end of the footer. |\n| `attachments` | File/image attachment chips, rendered below the message body by default; see `attachments-position`. |\n| `avatar` | An avatar/icon for the message author. |\n| `badges` | Small status/metric chips (e.g. token count, latency, model name) — entirely app-supplied; this component computes none of that itself. |\n| `failure` | Only ever rendered while `status=\"failed\"`. Empty (the default), the footer keeps its built-in `[part=\"status-text\"]`/`[part=\"retry-button\"]` exactly as before. The moment this slot has assigned content, that built-in status text and retry button are suppressed — the host is now fully responsible for presenting its own failure UI, and the built-in `chatFailedAnnounce` live-region announcement is suppressed too (see `@event lr-retry` below for the effect on that event, and the \"Accessibility of `status`\" paragraph above for the built-in announcement this replaces). Content assigned here should carry `role=\"alert\"` itself when it represents an actionable send failure — this component does not add that role on the host's behalf, since it has no way to know what markup the host puts in this slot. This mirrors `lr-flow-node`'s `header` slot, which replaces that component's own built-in heading row the same way. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `actions` | The wrapper around the `actions` slot. Rendered inside the footer by default; a sibling immediately after `bubble` when `actionsOutsideBubble` is set. |\n| `attachments` | The wrapper around the `attachments` slot. |\n| `avatar` | The wrapper around the `avatar` slot. |\n| `badges` | The wrapper around the `badges` slot. |\n| `body` | The wrapper around the default slot (the message content). Hidden while `collapsed`. |\n| `bubble` | The message bubble root. Programmatically focusable (`tabindex=\"-1\"`) so focus has a stable place to land when the built-in retry button is removed (e.g. a `lr-retry` listener flipping `status` away from `\"failed\"`). |\n| `collapse-button` | The built-in collapse/expand toggle (only rendered when `collapsible`). |\n| `failure` | The `failure` slot itself (`display: contents` — it contributes no box of its own, so the host's own content lays out exactly as if it were a direct child of `bubble`, with no `::part(failure)` override needed to get there). Only present in the DOM while `status=\"failed\"`. |\n| `footer` | The row below the message body — status, timestamp, retry, and actions. Hidden entirely when none of those have anything to show. |\n| `header` | The row above the message body — avatar, badges, and the collapse toggle. Hidden entirely when none of those have anything to show. |\n| `retry-button` | The built-in retry button (only rendered when `status=\"failed\"`). |\n| `status-indicator` | A small decorative (`aria-hidden`) dot reflecting `status`; absent while `status=\"sent\"`. |\n| `status-text` | The visible text twin of `status-indicator` — carries the state in text, not just color. |\n| `timestamp` | The formatted `timestamp`, rendered in a `<time>` element. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-chat-message-max-width` (default: `80%`) — Maximum inline size of the message bubble.\n- `--lr-transition-ambient` (default: `1.8s ease-in-out`) — Streaming-indicator animation duration and timing function."
|
|
2310
|
+
"value": "`<lr-chat-message>` — a role-based message bubble *shell* for a chat/\nagent conversation surface. It renders none of the message content itself:\nthe default slot carries whatever a consumer wants to display (plain\ntext, a `<lr-markdown>`, a custom template, anything at all) and this\ncomponent only supplies the surrounding chrome — alignment/coloring by\n`role`, an avatar/badges header row, an optional collapse toggle, an\nattachments strip, and a status-aware footer (a live-updating status dot +\ntext, the formatted `timestamp`, a built-in retry affordance for\n`status=\"failed\"`, and an `actions` slot for everything else).\n\nNo built-in copy button is rendered. Deciding what \"the copyable text\" of\nan arbitrary slotted message even means (plain text? the rendered\nmarkdown source? something else?) is exactly the kind of content\ninterpretation this shell deliberately stays out of — slot a copy control\ninto `actions` instead. Firing `lr-copy` (`detail: { text }`) from that\ncontrol keeps the event name consistent with `<lr-json-viewer>`'s own\ncopy affordance, for anything listening at the conversation-surface level.\n\nAccessibility of `status`: the current status is always available as\nplain visible text (`[part=\"status-text\"]`), never color alone. A\ntransition *to* `\"failed\"`, or *from* `\"streaming\"` to `\"sent\"` (a stream\nfinishing), is additionally announced through an internal\n`<lr-live-region>` (see that component's header for the throttled-\nannouncement wiring this composes) so a screen-reader user who isn't\ncurrently focused on this message still learns about it — *unless* the\n`failure` slot has content, in which case this internal announcement is\nskipped: the host's own `role=\"alert\"` failure content is expected to\nannounce itself, and firing both would double-announce the same failure\nwith two different (and differently specific) messages. This differs\nfrom `<lr-typing-indicator>`'s deliberately simpler `role=\"status\"`\napproach — that component only ever has one thing to announce (its own\nmount); this one has a `status` that can flip between several values\nacross a single element's lifetime, which is exactly the coalescing job\n`<lr-live-region>` exists for.\n\n`role` is a message-author role (`user`/`assistant`/`system`, matching\nthe vocabulary of every chat/completion API), *not* a WAI-ARIA role, so\nit reflects to a `data-role` attribute rather than the bare `role`\nattribute — `role=\"user\"` would collide with `Element`'s own ARIA `role`\naccessor and is not a valid ARIA role token to begin with.\n\n`actionsOutsideBubble` allows the `actions` slot to render as a sibling\nimmediately after the message bubble instead of nested inside the footer —\nuseful for consumers whose action row (e.g., a hover-reveal copy button)\nmust sit visually outside the bubble's chrome.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | The message body. |\n| `actions` | Action controls (e.g. copy, retry), rendered at the end of the footer. |\n| `attachments` | File/image attachment chips, rendered below the message body by default; see `attachments-position`. |\n| `avatar` | An avatar/icon for the message author. |\n| `badges` | Small status/metric chips (e.g. token count, latency, model name) — entirely app-supplied; this component computes none of that itself. |\n| `failure` | Only ever rendered while `status=\"failed\"`. Empty (the default), the footer keeps its built-in `[part=\"status-text\"]`/`[part=\"retry-button\"]` exactly as before. The moment this slot has assigned content, that built-in status text and retry button are suppressed — the host is now fully responsible for presenting its own failure UI, and the built-in `chatFailedAnnounce` live-region announcement is suppressed too (see `@event lr-retry` below for the effect on that event, and the \"Accessibility of `status`\" paragraph above for the built-in announcement this replaces). Content assigned here should carry `role=\"alert\"` itself when it represents an actionable send failure — this component does not add that role on the host's behalf, since it has no way to know what markup the host puts in this slot. This mirrors `lr-flow-node`'s `header` slot, which replaces that component's own built-in heading row the same way. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `actions` | The wrapper around the `actions` slot. Rendered inside the footer by default; a sibling immediately after `bubble` when `actionsOutsideBubble` is set. |\n| `attachments` | The wrapper around the `attachments` slot. |\n| `avatar` | The wrapper around the `avatar` slot. |\n| `badges` | The wrapper around the `badges` slot. |\n| `body` | The wrapper around the default slot (the message content). Hidden while `collapsed`. |\n| `bubble` | The message bubble root. Programmatically focusable (`tabindex=\"-1\"`) so focus has a stable place to land when the built-in retry button is removed (e.g. a `lr-retry` listener flipping `status` away from `\"failed\"`). Its fill/text derive from `--lr-chat-message-bubble-bg`/`--lr-chat-message-bubble-color` for every role except `user`, which derives from `--lr-chat-message-user-bubble-bg`/`--lr-chat-message-user-bubble-color` instead — override those cssprops rather than the shared `--lr-color-*` tokens they default to. |\n| `collapse-button` | The built-in collapse/expand toggle (only rendered when `collapsible`). |\n| `failure` | The `failure` slot itself (`display: contents` — it contributes no box of its own, so the host's own content lays out exactly as if it were a direct child of `bubble`, with no `::part(failure)` override needed to get there). Only present in the DOM while `status=\"failed\"`. |\n| `footer` | The row below the message body — status, timestamp, retry, and actions. Hidden entirely when none of those have anything to show. |\n| `header` | The row above the message body — avatar, badges, and the collapse toggle. Hidden entirely when none of those have anything to show. |\n| `retry-button` | The built-in retry button (only rendered when `status=\"failed\"`). |\n| `status-indicator` | A small decorative (`aria-hidden`) dot reflecting `status`; absent while `status=\"sent\"`. |\n| `status-text` | The visible text twin of `status-indicator` — carries the state in text, not just color. |\n| `timestamp` | The formatted `timestamp`, rendered in a `<time>` element. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-chat-message-max-width` (default: `80%`) — Maximum inline size of the message bubble.\n- `--lr-chat-message-bubble-bg` (default: `var(--lr-color-surface)`) — Bubble fill for every role except `user`.\n- `--lr-chat-message-bubble-color` (default: `var(--lr-color-text)`) — Bubble text color for every role except `user`.\n- `--lr-chat-message-user-bubble-bg` (default: `var(--lr-color-brand-quiet)`) — Bubble fill for `data-role=\"user\"`.\n- `--lr-chat-message-user-bubble-color` (default: `var(--lr-color-text)`) — Bubble text color for `data-role=\"user\"`.\n- `--lr-transition-ambient` (default: `1.8s ease-in-out`) — Streaming-indicator animation duration and timing function."
|
|
2311
2311
|
},
|
|
2312
2312
|
"attributes": [
|
|
2313
2313
|
{
|
|
@@ -2612,7 +2612,7 @@
|
|
|
2612
2612
|
"name": "lr-chip",
|
|
2613
2613
|
"description": {
|
|
2614
2614
|
"kind": "markdown",
|
|
2615
|
-
"value": "`<lr-chip>` — a small, content-agnostic pill for a short label: a tag, an\nactive-filter/scope indicator, etc. Distinct from `<lr-attachment-chip>`\n(specifically file-shaped, with a thumbnail/size/upload-progress) — this\none carries no domain assumptions at all, just a label and an optional\nleading icon/dot.\n\n`tone` tints the whole pill using the same loud-color-on-quiet-tint\nconvention `<lr-tool-call-chip>`/`<lr-citation-badge>` already\nestablish for status coloring: background is the tone's `-quiet` tint,\ntext/icon is the tone's loud color. `neutral` (the default) has no\ndedicated token pair of its own, so it falls back to a plain\nbordered-surface look — the same \"no signal\" treatment\n`<lr-citation-badge>`'s `default` status and `<lr-tool-call-chip>`'s\n`pending` status already use.\n\nThis is a controlled component: clicking the remove (×) button only fires\n`lr-remove` — the chip never removes itself from the DOM on its own\ninteraction, the same contract `<lr-attachment-chip>`/\n`<lr-conversation-item>` already follow. A consumer owns the underlying\nlist and decides whether/how the click actually removes anything.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | The chip's label content. |\n| `icon` | Optional leading icon or status dot. Nothing is reserved for it (no extra gap) when left empty. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The pill's root container. |\n| `icon` | Wrapper around the `icon` slot. Hidden entirely while empty. |\n| `label` | Wrapper around the default slot. |\n| `remove-button` | The remove (×) affordance, only rendered while `removable`. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-chip-pressed-bg` (default: `var(--lr-chip-bg)`) — Background while a toggleable chip is selected, independently themeable from its resting background."
|
|
2615
|
+
"value": "`<lr-chip>` — a small, content-agnostic pill for a short label: a tag, an\nactive-filter/scope indicator, etc. Distinct from `<lr-attachment-chip>`\n(specifically file-shaped, with a thumbnail/size/upload-progress) — this\none carries no domain assumptions at all, just a label and an optional\nleading icon/dot.\n\n`tone` tints the whole pill using the same loud-color-on-quiet-tint\nconvention `<lr-tool-call-chip>`/`<lr-citation-badge>` already\nestablish for status coloring: background is the tone's `-quiet` tint,\ntext/icon is the tone's loud color. `neutral` (the default) has no\ndedicated token pair of its own, so it falls back to a plain\nbordered-surface look — the same \"no signal\" treatment\n`<lr-citation-badge>`'s `default` status and `<lr-tool-call-chip>`'s\n`pending` status already use.\n\nThis is a controlled component: clicking the remove (×) button only fires\n`lr-remove` — the chip never removes itself from the DOM on its own\ninteraction, the same contract `<lr-attachment-chip>`/\n`<lr-conversation-item>` already follow. A consumer owns the underlying\nlist and decides whether/how the click actually removes anything.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | The chip's label content. |\n| `icon` | Optional leading icon or status dot. Nothing is reserved for it (no extra gap) when left empty. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The pill's root container. |\n| `icon` | Wrapper around the `icon` slot. Hidden entirely while empty. |\n| `label` | Wrapper around the default slot. |\n| `remove-button` | The remove (×) affordance, only rendered while `removable`. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-chip-accent` (default: `var(--lr-color-text)`) — Text/icon color of the pill. Each `tone` sets it to that tone's loud color.\n- `--lr-chip-bg` (default: `var(--lr-color-surface)`) — Background of the pill. Each `tone` sets it to that tone's `-quiet` tint.\n- `--lr-chip-border` (default: `var(--lr-color-border)`) — Border color of the pill. Every non-neutral `tone` sets it to `transparent`.\n- `--lr-chip-font-size` (default: `var(--lr-font-size-sm)`) — Label font size. Each `size` sets it to that step's font size.\n- `--lr-chip-gap` (default: `var(--lr-space-xs)`) — Gap between the icon, label, and remove button. Each `size` sets it to that step's gap.\n- `--lr-chip-icon-size` (default: `var(--lr-font-size-sm)`) — Font size of the `icon` slot wrapper. Each `size` sets it to that step's icon size.\n- `--lr-chip-padding-block` (default: `var(--lr-size-0-25rem)`) — Block padding of the pill. Each `size` sets it to that step's block padding.\n- `--lr-chip-padding-inline` (default: `var(--lr-space-s)`) — Inline padding of the pill. Each `size` sets it to that step's inline padding.\n- `--lr-chip-pressed-bg` (default: `var(--lr-chip-bg)`) — Background while a toggleable chip is selected, independently themeable from its resting background.\n- `--lr-chip-pressed-border` (default: `var(--lr-chip-accent)`) — Border color while a toggleable chip is selected, independently themeable from the label/icon color."
|
|
2616
2616
|
},
|
|
2617
2617
|
"attributes": [
|
|
2618
2618
|
{
|
|
@@ -2752,7 +2752,7 @@
|
|
|
2752
2752
|
"name": "lr-citation-badge",
|
|
2753
2753
|
"description": {
|
|
2754
2754
|
"kind": "markdown",
|
|
2755
|
-
"value": "`<lr-citation-badge>` — an inline `[n]` citation marker with a hover/\nfocus preview popover and confidence/verification-status coloring. Used\nfor an agent response's inline citations, each carrying a `source-id`\nthat matches a corresponding `<lr-source-card>` shown elsewhere on the\npage (a sibling component in this same family — this component doesn't\nimport or know anything about it, only carries the id through its\nevents).\n\nThe default slot is *not* the badge's visible content — the badge always\nrenders `[index]` — it's reserved for optional rich preview content (e.g.\na filename + short excerpt) shown in a floating popover on hover/focus,\npositioned with `internal/positioner.js`'s `place()` the same way\n`<lr-tool-call-chip>` positions its own detail tooltip. No popover shows\nat all when the slot carries no content, and the popover never traps\nfocus — it's supplementary preview content, not a modal, so Tab continues\npast the badge normally even while it happens to be visible from a mouse\nhover. When preview content exists, the button keeps a stable\n`aria-describedby` relationship to the `role=\"tooltip\"` panel while it is\nboth hidden and visible, so assistive technology can resolve the preview\nas soon as focus causes it to open.\n\nTwo distinct signals fire from the same badge: `lr-citation-activate`\n(click, or Enter while focused — native `<button>` behavior, no listener\nneeded for the Enter case) is the lightweight \"jump to this source\"\nsignal a host wires to scrolling/highlighting the matching\n`<lr-source-card>`. `lr-citation-open` (dblclick, or Space while\nfocused) is a distinct \"full preview\" signal — `href` in its detail is\n`undefined` when the `href` prop isn't set; the consumer decides what\n\"open\" means (a new tab, a dialog, etc). A double-click still fires two\n`lr-citation-activate` events (one per constituent click — standard\nbrowser `dblclick` behavior) in addition to the one `lr-citation-open`;\na consumer that only cares about the richer signal on a double-click\nshould ignore the paired activate events in that case.\n\nStatus coloring: `verified`/`high` use the success tones (a claim that's\nbeen checked out, or the model is confident in). `medium`/`low` use\nwarning (progressively less certain, but still a real citation).\n`unverified` uses danger — deliberately distinct from `low`: \"hasn't been\nchecked at all\" is a different (arguably riskier) claim than \"checked but\nuncertain\". `default` renders as plain neutral text with no background\ntint, for citations that carry no confidence/verification signal at all.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | Rich preview/tooltip content (e.g. a filename + excerpt), shown in a floating popover on hover/focus. Nothing renders (no hover affordance at all) when this slot is empty. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The clickable badge (`<button>`). |\n| `bracket` | Each of the two literal `[`/`]` glyphs. |\n| `index` | The citation number. |\n| `popover` | The floating preview panel (only meaningful while open).
|
|
2755
|
+
"value": "`<lr-citation-badge>` — an inline `[n]` citation marker with a hover/\nfocus preview popover and confidence/verification-status coloring. Used\nfor an agent response's inline citations, each carrying a `source-id`\nthat matches a corresponding `<lr-source-card>` shown elsewhere on the\npage (a sibling component in this same family — this component doesn't\nimport or know anything about it, only carries the id through its\nevents).\n\nThe default slot is *not* the badge's visible content — the badge always\nrenders `[index]` — it's reserved for optional rich preview content (e.g.\na filename + short excerpt) shown in a floating popover on hover/focus,\npositioned with `internal/positioner.js`'s `place()` the same way\n`<lr-tool-call-chip>` positions its own detail tooltip. No popover shows\nat all when the slot carries no content, and the popover never traps\nfocus — it's supplementary preview content, not a modal, so Tab continues\npast the badge normally even while it happens to be visible from a mouse\nhover. When preview content exists, the button keeps a stable\n`aria-describedby` relationship to the `role=\"tooltip\"` panel while it is\nboth hidden and visible, so assistive technology can resolve the preview\nas soon as focus causes it to open.\n\nTwo distinct signals fire from the same badge: `lr-citation-activate`\n(click, or Enter while focused — native `<button>` behavior, no listener\nneeded for the Enter case) is the lightweight \"jump to this source\"\nsignal a host wires to scrolling/highlighting the matching\n`<lr-source-card>`. `lr-citation-open` (dblclick, or Space while\nfocused) is a distinct \"full preview\" signal — `href` in its detail is\n`undefined` when the `href` prop isn't set; the consumer decides what\n\"open\" means (a new tab, a dialog, etc). A double-click still fires two\n`lr-citation-activate` events (one per constituent click — standard\nbrowser `dblclick` behavior) in addition to the one `lr-citation-open`;\na consumer that only cares about the richer signal on a double-click\nshould ignore the paired activate events in that case.\n\nStatus coloring: `verified`/`high` use the success tones (a claim that's\nbeen checked out, or the model is confident in). `medium`/`low` use\nwarning (progressively less certain, but still a real citation).\n`unverified` uses danger — deliberately distinct from `low`: \"hasn't been\nchecked at all\" is a different (arguably riskier) claim than \"checked but\nuncertain\". `default` renders as plain neutral text with no background\ntint, for citations that carry no confidence/verification signal at all.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | Rich preview/tooltip content (e.g. a filename + excerpt), shown in a floating popover on hover/focus. Nothing renders (no hover affordance at all) when this slot is empty. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The clickable badge (`<button>`). |\n| `bracket` | Each of the two literal `[`/`]` glyphs. |\n| `index` | The citation number. |\n| `popover` | The floating preview panel (only meaningful while open). |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-citation-badge-accent` (default: `var(--lr-color-text-quiet)`) — Text color of `base`, and its hover border color. Swapped by the reflected `status`: `var(--lr-color-success)` for `high`/`verified`, `var(--lr-color-warning)` for `medium`/`low`, `var(--lr-color-danger)` for `unverified`.\n- `--lr-citation-badge-bg` (default: `transparent`) — Background of `base`. Swapped by the reflected `status` to the matching `-quiet` tone (`success`/`warning`/`danger`).\n- `--lr-citation-badge-border` (default: `transparent`) — Resting border color of `base`; no `status` changes it, so it stays transparent unless a host overrides it."
|
|
2756
2756
|
},
|
|
2757
2757
|
"attributes": [
|
|
2758
2758
|
{
|
|
@@ -2803,7 +2803,7 @@
|
|
|
2803
2803
|
"name": "lr-code-block",
|
|
2804
2804
|
"description": {
|
|
2805
2805
|
"kind": "markdown",
|
|
2806
|
-
"value": "`<lr-code-block>` — fenced code display with optional lazy syntax\nhighlighting and a copy button. No highlighting grammar ships in this\ncomponent itself: it lazy-loads the optional peer dependency `shiki` (see\n`code-loader.ts`) for the actual tokenizing, and degrades to a plain\n`<pre><code>` when that peer isn't installed or `language` is unset/\nunrecognized — the exact same optional-peer shape `<lr-markdown>` and\n`<lr-chart>` already establish. That fallback is the *default* rendering\npath, not a degraded one: unhighlighted code is perfectly usable, and it's\nwhat every instance renders at zero extra bytes until shiki resolves.\n\nA `<lr-skeleton>` placeholder stands in only while shiki itself is\nloading for the very first time on the page (cached — see\n`loadShikiHighlighter()`) and `language` is set. It's deliberately *not*\nshown again for a subsequent per-language grammar load (e.g. a second\n`<lr-code-block>` requesting a language no earlier instance has used\nyet) — that grammar fetch is typically fast, and the plain-text fallback\nis already a perfectly readable placeholder for it, so a second\nloading-chrome state would add complexity for little practical benefit.\n\nSet a host `aria-label` (or the matching `accessibleLabel` property) to\noverride the filename/language-derived name on the internal focusable code\nregion. The name is forwarded to the element that owns `role=\"group\"`, not\nleft only on the custom-element host across the shadow boundary.\n\n`languages` is an additive, opt-in escape hatch from that default path for\na consumer whose language set is fixed and known ahead of time: a map of\nlanguage id to an already-imported shiki grammar module (e.g. `import bash\nfrom 'shiki/langs/bash.mjs'`). When `language` matches a key in `languages`,\nthis component seeds a fine-grained `createHighlighterCore()` highlighter\nwith *only* the pre-supplied grammars (see `code-loader.ts`'s\n`loadShikiHighlighterCore()`) instead of waiting on `loadShikiHighlighter()`\nand its dynamic per-language `loadLanguage()` import. The payoff isn't\nruntime cost — the default dynamic-import path is already well-optimized\nfor that — it's *build output*: shiki's main entry point bundles a dynamic\n`import()` per bundled language (~200 of them) because a bundler can't\nstatically narrow which of those a `loadLanguage(lang: string)` call might\nrequest at runtime, so it conservatively emits a build-output chunk for\nevery one of them. `shiki/core`'s fine-grained API has no such table — a\nbundler only ever sees the exact grammar modules `languages` itself\n`import`s, so a consumer who pins its full language set this way trades a\nhand-maintained list for a build output scoped to just those languages\ninstead of shiki's entire bundled set. A language requested but absent\nfrom `languages` still falls back to the ordinary dynamic-import path\nunchanged, so this is a partial opt-in, not a replacement for it.\n\nAdopts the `line-range` slice of this library's shared anchor-target contract:\n`highlights`/`activeHighlightId` paint (and `highlight-lines` additionally marks) per-line\nemphasis in both the shiki and plain-text-fallback rendering paths identically, and\n`scrollToAnchor()` resolves a `line-range` anchor. `interactive-lines` is a separate, purely\nlocal affordance that turns the (`line-numbers`-gated) gutter into a keyboard-navigable,\nclickable roving-tabindex group emitting `lr-line-click` — it doesn't require `highlights` to\nbe set.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The outer container. |\n| `body` | The scrollable region wrapping the code (or the loading skeleton); respects `max-height`, `hidden` while `collapsible` and `collapsed`. |\n| `code` | The rendered `<code>`, same split as `pre` above. |\n| `copy-button` | The copy-to-clipboard button, when `copyable`. |\n| `filename` | The `filename` text, when set. |\n| `header` | The row above the code (filename/language/copy/toggle), present whenever there's anything to put in it. |\n| `language` | The `language` badge, when set, so the language is exposed to assistive tech as visible text rather than only a `language` attribute a screen reader would never announce. |\n| `line-button` | A gutter line-number button, only rendered while `interactive-lines` and `line-numbers` are both set. |\n| `line-highlight` | A line marked by `highlight-lines` or a `line-range` entry in `highlights`. |\n| `pre` | The rendered `<pre>` — shiki's own in the highlighted path, this component's own plain one in the fallback path. |\n| `toggle` | The collapse/expand chevron button, when `collapsible`.
|
|
2806
|
+
"value": "`<lr-code-block>` — fenced code display with optional lazy syntax\nhighlighting and a copy button. No highlighting grammar ships in this\ncomponent itself: it lazy-loads the optional peer dependency `shiki` (see\n`code-loader.ts`) for the actual tokenizing, and degrades to a plain\n`<pre><code>` when that peer isn't installed or `language` is unset/\nunrecognized — the exact same optional-peer shape `<lr-markdown>` and\n`<lr-chart>` already establish. That fallback is the *default* rendering\npath, not a degraded one: unhighlighted code is perfectly usable, and it's\nwhat every instance renders at zero extra bytes until shiki resolves.\n\nA `<lr-skeleton>` placeholder stands in only while shiki itself is\nloading for the very first time on the page (cached — see\n`loadShikiHighlighter()`) and `language` is set. It's deliberately *not*\nshown again for a subsequent per-language grammar load (e.g. a second\n`<lr-code-block>` requesting a language no earlier instance has used\nyet) — that grammar fetch is typically fast, and the plain-text fallback\nis already a perfectly readable placeholder for it, so a second\nloading-chrome state would add complexity for little practical benefit.\n\nSet a host `aria-label` (or the matching `accessibleLabel` property) to\noverride the filename/language-derived name on the internal focusable code\nregion. The name is forwarded to the element that owns `role=\"group\"`, not\nleft only on the custom-element host across the shadow boundary.\n\n`languages` is an additive, opt-in escape hatch from that default path for\na consumer whose language set is fixed and known ahead of time: a map of\nlanguage id to an already-imported shiki grammar module (e.g. `import bash\nfrom 'shiki/langs/bash.mjs'`). When `language` matches a key in `languages`,\nthis component seeds a fine-grained `createHighlighterCore()` highlighter\nwith *only* the pre-supplied grammars (see `code-loader.ts`'s\n`loadShikiHighlighterCore()`) instead of waiting on `loadShikiHighlighter()`\nand its dynamic per-language `loadLanguage()` import. The payoff isn't\nruntime cost — the default dynamic-import path is already well-optimized\nfor that — it's *build output*: shiki's main entry point bundles a dynamic\n`import()` per bundled language (~200 of them) because a bundler can't\nstatically narrow which of those a `loadLanguage(lang: string)` call might\nrequest at runtime, so it conservatively emits a build-output chunk for\nevery one of them. `shiki/core`'s fine-grained API has no such table — a\nbundler only ever sees the exact grammar modules `languages` itself\n`import`s, so a consumer who pins its full language set this way trades a\nhand-maintained list for a build output scoped to just those languages\ninstead of shiki's entire bundled set. A language requested but absent\nfrom `languages` still falls back to the ordinary dynamic-import path\nunchanged, so this is a partial opt-in, not a replacement for it.\n\nAdopts the `line-range` slice of this library's shared anchor-target contract:\n`highlights`/`activeHighlightId` paint (and `highlight-lines` additionally marks) per-line\nemphasis in both the shiki and plain-text-fallback rendering paths identically, and\n`scrollToAnchor()` resolves a `line-range` anchor. `interactive-lines` is a separate, purely\nlocal affordance that turns the (`line-numbers`-gated) gutter into a keyboard-navigable,\nclickable roving-tabindex group emitting `lr-line-click` — it doesn't require `highlights` to\nbe set.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The outer container. |\n| `body` | The scrollable region wrapping the code (or the loading skeleton); respects `max-height`, `hidden` while `collapsible` and `collapsed`. |\n| `code` | The rendered `<code>`, same split as `pre` above. |\n| `copy-button` | The copy-to-clipboard button, when `copyable`. |\n| `filename` | The `filename` text, when set. |\n| `header` | The row above the code (filename/language/copy/toggle), present whenever there's anything to put in it. |\n| `language` | The `language` badge, when set, so the language is exposed to assistive tech as visible text rather than only a `language` attribute a screen reader would never announce. |\n| `line-button` | A gutter line-number button, only rendered while `interactive-lines` and `line-numbers` are both set. |\n| `line-highlight` | A line marked by `highlight-lines` or a `line-range` entry in `highlights`. |\n| `pre` | The rendered `<pre>` — shiki's own in the highlighted path, this component's own plain one in the fallback path. |\n| `toggle` | The collapse/expand chevron button, when `collapsible`. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-code-block-max-height` (default: `none`) — Scroll cap applied to `body`. The `max-height` attribute, when set, writes this same property inline on `body` and therefore wins.\n- `--lr-code-block-font` (default: `var(--lr-font-mono)`) — Monospace family for the rendered `pre` and `code`."
|
|
2807
2807
|
},
|
|
2808
2808
|
"attributes": [
|
|
2809
2809
|
{
|
|
@@ -3010,7 +3010,7 @@
|
|
|
3010
3010
|
"name": "lr-code-editor",
|
|
3011
3011
|
"description": {
|
|
3012
3012
|
"kind": "markdown",
|
|
3013
|
-
"value": "`<lr-code-editor>` — dependency-free multiline code editing surface with optional line numbers.\n\nKeyboard contract (no keyboard trap, WCAG 2.1.2): Tab inserts
|
|
3013
|
+
"value": "`<lr-code-editor>` — dependency-free multiline code editing surface with optional line numbers.\n\nKeyboard contract (no keyboard trap, WCAG 2.1.2): Tab inserts one indent unit of spaces at the\ncaret. Shift+Tab is never captured, so it always performs native reverse focus traversal.\nPressing Escape releases the next Tab for native forward traversal instead of indenting; typing\nany other key, or focus leaving the editor, re-arms Tab indentation.\n\nTab-width precedence, highest first: an explicitly assigned `tabSize` (property or `tab-size`\nattribute) wins over everything; otherwise a host-level `--lr-code-editor-tab-size` override\nwins; otherwise the stylesheet's `:host` default of `2` applies. The property therefore stays the\nprimary knob, but it no longer silently shadows the token while it sits at its default -- see\n`indentWidth` for how the same order drives the Tab key, not just the rendered tab stops.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| `error` | Validation message. |\n| `hint` | Supporting text. |\n| `label` | Visible label content. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `editor` | Editor frame. |\n| `error` | Validation message. |\n| `form-control` | Outer wrapper. |\n| `gutter` | Line-number gutter. |\n| `hint` | Supporting text. |\n| `label` | Label. |\n| `textarea` | Native textarea. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-code-editor-min-block-size` (default: `var(--lr-size-8rem)`) — Minimum block size of the editor frame and its textarea.\n- `--lr-code-editor-line-height` (default: `1.5`) — Line height shared by the gutter and the textarea, so line numbers stay aligned with their lines.\n- `--lr-code-editor-tab-size` (default: `2`) — The textarea's `tab-size`. The single channel for tab width — the class writes this token rather than setting `tab-size` directly."
|
|
3014
3014
|
},
|
|
3015
3015
|
"attributes": [
|
|
3016
3016
|
{
|
|
@@ -3122,7 +3122,7 @@
|
|
|
3122
3122
|
"name": "tab-size",
|
|
3123
3123
|
"description": {
|
|
3124
3124
|
"kind": "markdown",
|
|
3125
|
-
"value": "Spaces inserted per Tab keypress, and the
|
|
3125
|
+
"value": "Spaces inserted per Tab keypress, and the rendered `tab-size`. Assigning it (or setting the\n`tab-size` attribute) pins both, overriding any `--lr-code-editor-tab-size` the host set;\nleaving it alone lets that token drive them instead. Confirmed-crash history: this used to\nfeed `' '.repeat(Math.max(1, this.tabSize))` directly in `onKeyDown` below --\n`String.prototype.repeat()` throws a `RangeError` for a count of `+Infinity` specifically\n(e.g. a literal `tab-size=\"Infinity\"` attribute, which `Number(\"Infinity\")` happily converts\nto), and `Math.max(1, NaN)` is itself `NaN`, silently producing an empty, non-indenting insert\nfor a NaN `tabSize`. Sanitized to a finite integer in `[1, 16]` at assignment time instead, so\nboth the `repeat()` call and the emitted tab-width style always see a safe value.\n\nType: `number`"
|
|
3126
3126
|
}
|
|
3127
3127
|
},
|
|
3128
3128
|
{
|
|
@@ -3377,7 +3377,7 @@
|
|
|
3377
3377
|
"name": "lr-command-palette",
|
|
3378
3378
|
"description": {
|
|
3379
3379
|
"kind": "markdown",
|
|
3380
|
-
"value": "`<lr-command-palette>` — searchable application command menu with keyboard navigation.\nShared overlay infrastructure (the same one `<lr-dialog>` uses) coordinates focus-trapping\nTab, Escape dismissal, and document scroll-locking for as long as the palette is open.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `backdrop` | Modal backdrop. |\n| `command` | A command button. |\n| `dialog` | Palette dialog. |\n| `input` | Search input. |\n| `list` | Command list. |"
|
|
3380
|
+
"value": "`<lr-command-palette>` — searchable application command menu with keyboard navigation.\nShared overlay infrastructure (the same one `<lr-dialog>` uses) coordinates focus-trapping\nTab, Escape dismissal, and document scroll-locking for as long as the palette is open.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `backdrop` | Modal backdrop. |\n| `command` | A command button. |\n| `description` | A command's secondary description text. Rendered for every command; empty when the command has no `description`. |\n| `dialog` | Palette dialog. |\n| `empty` | The \"no results\" message. Only rendered when the filter matches no command. |\n| `group` | A group heading, rendered before the first command of each `group`. |\n| `input` | Search input. |\n| `list` | Command list. |\n| `search` | The search row wrapping the leading icon and the `input`. |\n| `shortcut` | A command's trailing shortcut hint. Only rendered when the command has a `shortcut`. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-command-palette-z-index` (default: `var(--lr-overlay-stack-index, var(--lr-layer-modal))`) — Stacking index of the backdrop.\n- `--lr-command-palette-max-inline-size` (default: `var(--lr-size-48rem)`) — Maximum dialog width.\n- `--lr-command-palette-max-block-size` (default: `70vh`) — Maximum dialog height.\n- `--lr-command-palette-list-max-block-size` (default: `50vh`) — Maximum height of the scrolling command list.\n- `--lr-command-palette-offset-block-start` (default: `12vh`) — Gap between the viewport top and the dialog."
|
|
3381
3381
|
},
|
|
3382
3382
|
"attributes": [
|
|
3383
3383
|
{
|
|
@@ -3495,7 +3495,7 @@
|
|
|
3495
3495
|
"name": "lr-compare-panel",
|
|
3496
3496
|
"description": {
|
|
3497
3497
|
"kind": "markdown",
|
|
3498
|
-
"value": "`<lr-compare-panel>` — side-by-side A/B output comparison with a winner\nvote (LMSYS-arena / LangSmith-pairwise style): two slotted panes, a vote\nbar, synchronized reading.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| `a` | The first output (any content — a chat message, markdown, a viewer). |\n| `b` | The second output. |\n| `prompt` | Optional shared-input header above both panes. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The outer wrapper. |\n| `live-region` | The internal vote-announcement live region. |\n| `pane-a` | The first pane's labeled scroll region. |\n| `pane-b` | The second pane's labeled scroll region. |\n| `pane-header` | A pane's visible heading. |\n| `panes` | The row (or, under 640px, column) wrapping both panes. |\n| `prompt` | The optional prompt header, hidden when the `prompt` slot is empty. |\n| `vote-bar` | The `role=\"group\"` row of vote buttons. |\n| `vote-button` | One vote button.
|
|
3498
|
+
"value": "`<lr-compare-panel>` — side-by-side A/B output comparison with a winner\nvote (LMSYS-arena / LangSmith-pairwise style): two slotted panes, a vote\nbar, synchronized reading.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| `a` | The first output (any content — a chat message, markdown, a viewer). |\n| `b` | The second output. |\n| `prompt` | Optional shared-input header above both panes. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The outer wrapper. |\n| `live-region` | The internal vote-announcement live region. |\n| `pane-a` | The first pane's labeled scroll region. |\n| `pane-b` | The second pane's labeled scroll region. |\n| `pane-header` | A pane's visible heading. |\n| `panes` | The row (or, under 640px, column) wrapping both panes. |\n| `prompt` | The optional prompt header, hidden when the `prompt` slot is empty. |\n| `vote-bar` | The `role=\"group\"` row of vote buttons. |\n| `vote-button` | One vote button. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-compare-panel-max-height` (default: `var(--lr-size-24rem)`) — Cap on how tall each pane's scroll region grows before it scrolls internally."
|
|
3499
3499
|
},
|
|
3500
3500
|
"attributes": [
|
|
3501
3501
|
{
|
|
@@ -3685,7 +3685,7 @@
|
|
|
3685
3685
|
"name": "lr-context-meter",
|
|
3686
3686
|
"description": {
|
|
3687
3687
|
"kind": "markdown",
|
|
3688
|
-
"value": "`<lr-context-meter>` — a segmented occupancy meter (bar or ring) for\nshowing how a fixed capacity (a model's context window, a token budget,\nany consumable quota) is divided across labeled categories. First-party\ninvention; no equivalent exists in Web Awesome.\n\nPure data visualization: it renders `segments`/`total` as given and never\ncomputes token counts, costs, or any other domain-specific estimate\nitself — the one exception is the plain arithmetic sum of the segment\nvalues used to build the accessible \"X of Y used\" summary below.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The component's root wrapper (a `<div>` for `bar`, an `<svg>` for `ring`). |\n| `label` | The visible caption, when `label` is set. |\n| `segment` | One occupied segment. Carries `data-tone` for styling and `--lr-context-meter-segment-color` when `color` is set. |\n| `track` | The unfilled/empty capacity track.
|
|
3688
|
+
"value": "`<lr-context-meter>` — a segmented occupancy meter (bar or ring) for\nshowing how a fixed capacity (a model's context window, a token budget,\nany consumable quota) is divided across labeled categories. First-party\ninvention; no equivalent exists in Web Awesome.\n\nPure data visualization: it renders `segments`/`total` as given and never\ncomputes token counts, costs, or any other domain-specific estimate\nitself — the one exception is the plain arithmetic sum of the segment\nvalues used to build the accessible \"X of Y used\" summary below.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The component's root wrapper (a `<div>` for `bar`, an `<svg>` for `ring`). |\n| `label` | The visible caption, when `label` is set. |\n| `segment` | One occupied segment. Carries `data-tone` for styling and `--lr-context-meter-segment-color` when `color` is set. |\n| `track` | The unfilled/empty capacity track. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-context-meter-segment-color` — Per-segment color. Set inline on `[part=\"segment\"]` by the component itself whenever that segment supplies a `color`; unset (and the token unread) otherwise, leaving the `data-tone` palette in charge."
|
|
3689
3689
|
},
|
|
3690
3690
|
"attributes": [
|
|
3691
3691
|
{
|
|
@@ -3722,7 +3722,7 @@
|
|
|
3722
3722
|
"name": "lr-control-group",
|
|
3723
3723
|
"description": {
|
|
3724
3724
|
"kind": "markdown",
|
|
3725
|
-
"value": "`<lr-control-group>` — a responsive layout primitive for a row of mixed form\ncontrols and action buttons (e.g. a segmented metric switcher beside a compact\nselect and an export button in a dashboard toolbar). Unlike `<lr-button-group>`\n(a uniform-height row of `<lr-button>`s that stretches every child to the row's\nfull height), this centers children of differing intrinsic heights and does not\nassume any particular child type.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | Form controls, buttons, or any other action content. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The group wrapper (`role=\"group\"`). |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-control-group-gap` — Gap between grouped controls."
|
|
3725
|
+
"value": "`<lr-control-group>` — a responsive layout primitive for a row of mixed form\ncontrols and action buttons (e.g. a segmented metric switcher beside a compact\nselect and an export button in a dashboard toolbar). Unlike `<lr-button-group>`\n(a uniform-height row of `<lr-button>`s that stretches every child to the row's\nfull height), this centers children of differing intrinsic heights and does not\nassume any particular child type.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | Form controls, buttons, or any other action content. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The group wrapper (`role=\"group\"`). |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-control-group-gap` (default: `var(--lr-space-xs)`) — Gap between grouped controls."
|
|
3726
3726
|
},
|
|
3727
3727
|
"attributes": [
|
|
3728
3728
|
{
|
|
@@ -3745,7 +3745,7 @@
|
|
|
3745
3745
|
"name": "lr-conversation-item",
|
|
3746
3746
|
"description": {
|
|
3747
3747
|
"kind": "markdown",
|
|
3748
|
-
"value": "`<lr-conversation-item>` — a selectable row representing one chat\nsession in a history sidebar list. Usable standalone or as the\n`renderItem()` payload of a sibling virtualized-list component; this\nmodule has no dependency on that (or any) other component.\n\nTakes `title`/`excerpt`/`timestamp` as individual primitive props rather\nthan one opaque bound object, deliberately consistent with how\n`<lr-chat-message>` takes individual props instead of a single\n`.message` blob -- every other component in this family follows that\nshape, so this one does too even though a single bound `.session` object\nwould also have been a reasonable design.\n\nIdentifying *which* session a `lr-select` click/keypress was about: this\nreuses the platform's own `id` attribute (every element already has one)\nrather than inventing a second, differently-named id-carrying prop --\nconsumers already have the event's `target`/`currentTarget` (and thus\n`.id`), the same reasoning `<lr-attachment-chip>` documents for its own\nidentically-shaped choice. `lr-select` therefore carries no detail\npayload at all.\n\n`role=\"button\"` on `[part=\"option\"]` so the item has valid semantics both\nstandalone and when placed in a larger history-list layout. A conversation\nrow activates one current session; it is not itself a listbox option and\ntherefore does not require a particular owner role.\n\n`role=\"button\"` forbids focusable\ndescendants -- verified against axe-core's `nested-interactive` rule,\nwhich flags it. That's why the rename button and the `actions` slot are\nrendered as DOM *siblings* of `[part=\"option\"]` (both inside\n`[part=\"base\"]`) rather than nested inside it: `[part=\"option\"]` only ever\ncontains plain text/`<time>` content. The in-place rename `<input>` is the\nsame problem one level deeper -- it replaces the title *inside*\n`[part=\"option\"]` while renaming -- so `[part=\"option\"]` sheds its\n`role`/`tabindex`/`aria-current`/`aria-label` entirely for the duration\nof an edit. A row mid-edit is a text field, so suspending the button\nsemantics is also the more accurate\ndescription of what's on screen.\n\nInline rename is a dedicated pencil/edit icon button (not a double-click\non the title) -- double-click has no keyboard/screen-reader equivalent\nand would silently swallow the row's own single-click `lr-select`,\nwhereas a button is independently focusable, has its own accessible name,\nand composes cleanly with click-to-select.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| `actions` | Overflow/icon-button controls (for example a pin/delete button or a `lr-menu` trigger) rendered at the trailing edge of the row. |\n| `content` | Replaces the built-in title, excerpt, and meta content area with host-supplied non-interactive row content. |\n| `excerpt` | Full override of the excerpt presentation (e.g. a search-hit snippet with `<mark>` highlighting). Wins over the `excerpt` property whenever it has assigned content, even if `excerpt` is also set. Only non-focusable content should be slotted here — see the `excerpt` property's own doc for why. |\n| `leading` | Non-interactive leading content such as an avatar, purpose icon, or status indicator. It is rendered inside the selectable region before the title/excerpt content. |\n| `meta` | Small, non-focusable structured fields for the row (e.g. a day label, cost, request count) rendered below the title/excerpt. Entirely app-supplied; this component computes none of it. Only non-focusable content should be slotted here, for the same `nested-interactive` reason as `excerpt`. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `actions` | The wrapper around the `actions` slot. |\n| `base` | The outer row wrapper (plain, no ARIA role) laying out `[part=\"option\"]`, the rename button, and `actions`. |\n| `content` | Wrapper around the title and excerpt. |\n| `excerpt` | The last-message preview snippet. Only rendered when `excerpt` is non-empty. |\n| `option` | The selectable region (`role=\"button\"`, removed while renaming -- see the class doc). Wraps `content` and `timestamp`. |\n| `rename-button` | The pencil/edit affordance that starts a rename (only rendered while `editable` and not already renaming). |\n| `timestamp` | The formatted `timestamp`, rendered in a `<time>` element. Only rendered when `timestamp` is set and valid. |\n| `title` | The title text, shown while not renaming. |\n| `title-input` | The in-place rename `<input>`, shown only while renaming. |"
|
|
3748
|
+
"value": "`<lr-conversation-item>` — a selectable row representing one chat\nsession in a history sidebar list. Usable standalone or as the\n`renderItem()` payload of a sibling virtualized-list component; this\nmodule has no dependency on that (or any) other component.\n\nTakes `title`/`excerpt`/`timestamp` as individual primitive props rather\nthan one opaque bound object, deliberately consistent with how\n`<lr-chat-message>` takes individual props instead of a single\n`.message` blob -- every other component in this family follows that\nshape, so this one does too even though a single bound `.session` object\nwould also have been a reasonable design.\n\nIdentifying *which* session a `lr-select` click/keypress was about: this\nreuses the platform's own `id` attribute (every element already has one)\nrather than inventing a second, differently-named id-carrying prop --\nconsumers already have the event's `target`/`currentTarget` (and thus\n`.id`), the same reasoning `<lr-attachment-chip>` documents for its own\nidentically-shaped choice. `lr-select` therefore carries no detail\npayload at all.\n\n`role=\"button\"` on `[part=\"option\"]` so the item has valid semantics both\nstandalone and when placed in a larger history-list layout. A conversation\nrow activates one current session; it is not itself a listbox option and\ntherefore does not require a particular owner role.\n\n`role=\"button\"` forbids focusable\ndescendants -- verified against axe-core's `nested-interactive` rule,\nwhich flags it. That's why the rename button and the `actions` slot are\nrendered as DOM *siblings* of `[part=\"option\"]` (both inside\n`[part=\"base\"]`) rather than nested inside it: `[part=\"option\"]` only ever\ncontains plain text/`<time>` content. The in-place rename `<input>` is the\nsame problem one level deeper -- it replaces the title *inside*\n`[part=\"option\"]` while renaming -- so `[part=\"option\"]` sheds its\n`role`/`tabindex`/`aria-current`/`aria-label` entirely for the duration\nof an edit. A row mid-edit is a text field, so suspending the button\nsemantics is also the more accurate\ndescription of what's on screen.\n\nInline rename is a dedicated pencil/edit icon button (not a double-click\non the title) -- double-click has no keyboard/screen-reader equivalent\nand would silently swallow the row's own single-click `lr-select`,\nwhereas a button is independently focusable, has its own accessible name,\nand composes cleanly with click-to-select.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| `actions` | Overflow/icon-button controls (for example a pin/delete button or a `lr-menu` trigger) rendered at the trailing edge of the row. |\n| `content` | Replaces the built-in title, excerpt, and meta content area with host-supplied non-interactive row content. |\n| `excerpt` | Full override of the excerpt presentation (e.g. a search-hit snippet with `<mark>` highlighting). Wins over the `excerpt` property whenever it has assigned content, even if `excerpt` is also set. Only non-focusable content should be slotted here — see the `excerpt` property's own doc for why. |\n| `leading` | Non-interactive leading content such as an avatar, purpose icon, or status indicator. It is rendered inside the selectable region before the title/excerpt content. |\n| `meta` | Small, non-focusable structured fields for the row (e.g. a day label, cost, request count) rendered below the title/excerpt. Entirely app-supplied; this component computes none of it. Only non-focusable content should be slotted here, for the same `nested-interactive` reason as `excerpt`. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `actions` | The wrapper around the `actions` slot. |\n| `base` | The outer row wrapper (plain, no ARIA role) laying out `[part=\"option\"]`, the rename button, and `actions`. |\n| `content` | Wrapper around the title and excerpt. |\n| `excerpt` | The last-message preview snippet. Only rendered when `excerpt` is non-empty. |\n| `leading` | The wrapper around the `leading` slot, inside `option`. Always rendered, but `hidden` while that slot is empty. |\n| `meta` | The wrapper around the `meta` slot. Only rendered in the built-in content path (not when the `content` slot is used), and `hidden` while the `meta` slot is empty. |\n| `option` | The selectable region (`role=\"button\"`, removed while renaming -- see the class doc). Wraps `content` and `timestamp`. |\n| `rename-button` | The pencil/edit affordance that starts a rename (only rendered while `editable` and not already renaming). |\n| `timestamp` | The formatted `timestamp`, rendered in a `<time>` element. Only rendered when `timestamp` is set and valid. |\n| `title` | The title text, shown while not renaming. |\n| `title-input` | The in-place rename `<input>`, shown only while renaming. |"
|
|
3749
3749
|
},
|
|
3750
3750
|
"attributes": [
|
|
3751
3751
|
{
|
|
@@ -3891,7 +3891,7 @@
|
|
|
3891
3891
|
"name": "lr-dashboard-grid",
|
|
3892
3892
|
"description": {
|
|
3893
3893
|
"kind": "markdown",
|
|
3894
|
-
"value": "`<lr-dashboard-grid>` — a responsive, keyboard-accessible widget grid: positions `layout`\nentries (`DashboardCell`: `x`/`y`/`w`/`h` grid units + a widget descriptor) on a CSS Grid,\ncomposing `<lr-widget>` + `<lr-widget-renderer>` for each cell's default content, and owns all\ndrag/resize/collision interaction as controlled events -- it never mutates `layout` itself, nor\never touches `localStorage`/network; the host applies (or ignores) every emitted event and owns\npersistence entirely, mirroring `lr-flow-canvas`/`lr-table`'s own controlled-component\nconvention. Readonly (viewer) by default; opt into editor gestures individually via\n`cells-draggable`/`cells-resizable`, or lock the whole grid via `locked`.\n\nCell content: a `layout` entry with no matching light-DOM child (matched by `cell-id`) gets a\ndefault `<lr-widget label=\"...\">` wrapping an `<lr-widget-renderer .tree=${cell.widget}>`\nauto-created and adopted into `slot=\"cell-{id}\"` -- this component's own job is the grid\nlayout/drag/resize/collision/persistence-event mechanics *around* that content, not widget\nrendering itself (see `lr-widget-renderer`'s own doc for its declarative-tree contract). A\nconsumer wanting full control over one cell's markup can instead author\n`<div cell-id=\"...\">...</div>` as a direct child; it is adopted in place of the default cell.\n\nKeyboard: cells share one roving tabindex, in row-major (`sortSpatial`) order. Arrow\nkeys/Home/End move the roving focus (RTL-aware: physical Left/Right always match what the\ncursor visually does, matching `lr-flow-canvas`'s own convention). While a cell has focus,\nCtrl/Cmd+Arrow moves it by one grid unit and Ctrl/Cmd+Shift+Arrow resizes it by one grid unit\n(Right/Down grow, Left/Up shrink) -- the full keyboard-operable equivalent of the pointer\ndrag/resize gestures below, per this library's accessibility bar (no pointer-only interaction).\n\nCollision: every move/resize request -- pointer or keyboard -- is resolved through `collision`\n(`'reject'` the default, `'push'`, or `'overlap'`; see `resolvePlacement()` in `layout.ts` for\nthe exact rule). A rejected request leaves `layout` untouched and only announces; an accepted\none emits `lr-cell-move`/`lr-cell-resize` plus a `lr-layout-change` snapshot of the full\nproposed layout (including any `'push'` cascade) -- the host's one persistence hook: listen for\nit and persist `event.detail.layout` however it likes (`localStorage`, a network call, neither).\n\nResponsive: below a ~40rem container allocation (`@container`, not the viewport -- a dashboard\ngrid is commonly embedded in a panel of varying width), cells stack into a single flowing\ncolumn in the same row-major order the grid itself renders them in, instead of overflowing or\nshrinking columns unreadably.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| `cell-{id}` | A `layout` entry's cell content; auto-populated by a default composed `<lr-widget>`/`<lr-widget-renderer>` pair unless a light-DOM `[cell-id=\"{id}\"]` child is authored instead. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The grid root. |\n| `cell` | A single cell's positioned wrapper. |\n| `empty` | The `lr-empty` shown when `layout` is empty. |\n| `live-region` | The current move/resize/collision announcement. |\n| `resize-handle` | The pointer resize grip in a cell's trailing/bottom corner (only rendered while `cells-resizable`); the Ctrl/Cmd+Shift+Arrow keyboard path is the resize handle's full accessible equivalent, so the handle itself is `aria-hidden`.
|
|
3894
|
+
"value": "`<lr-dashboard-grid>` — a responsive, keyboard-accessible widget grid: positions `layout`\nentries (`DashboardCell`: `x`/`y`/`w`/`h` grid units + a widget descriptor) on a CSS Grid,\ncomposing `<lr-widget>` + `<lr-widget-renderer>` for each cell's default content, and owns all\ndrag/resize/collision interaction as controlled events -- it never mutates `layout` itself, nor\never touches `localStorage`/network; the host applies (or ignores) every emitted event and owns\npersistence entirely, mirroring `lr-flow-canvas`/`lr-table`'s own controlled-component\nconvention. Readonly (viewer) by default; opt into editor gestures individually via\n`cells-draggable`/`cells-resizable`, or lock the whole grid via `locked`.\n\nCell content: a `layout` entry with no matching light-DOM child (matched by `cell-id`) gets a\ndefault `<lr-widget label=\"...\">` wrapping an `<lr-widget-renderer .tree=${cell.widget}>`\nauto-created and adopted into `slot=\"cell-{id}\"` -- this component's own job is the grid\nlayout/drag/resize/collision/persistence-event mechanics *around* that content, not widget\nrendering itself (see `lr-widget-renderer`'s own doc for its declarative-tree contract). A\nconsumer wanting full control over one cell's markup can instead author\n`<div cell-id=\"...\">...</div>` as a direct child; it is adopted in place of the default cell.\n\nKeyboard: cells share one roving tabindex, in row-major (`sortSpatial`) order. Arrow\nkeys/Home/End move the roving focus (RTL-aware: physical Left/Right always match what the\ncursor visually does, matching `lr-flow-canvas`'s own convention). While a cell has focus,\nCtrl/Cmd+Arrow moves it by one grid unit and Ctrl/Cmd+Shift+Arrow resizes it by one grid unit\n(Right/Down grow, Left/Up shrink) -- the full keyboard-operable equivalent of the pointer\ndrag/resize gestures below, per this library's accessibility bar (no pointer-only interaction).\n\nCollision: every move/resize request -- pointer or keyboard -- is resolved through `collision`\n(`'reject'` the default, `'push'`, or `'overlap'`; see `resolvePlacement()` in `layout.ts` for\nthe exact rule). A rejected request leaves `layout` untouched and only announces; an accepted\none emits `lr-cell-move`/`lr-cell-resize` plus a `lr-layout-change` snapshot of the full\nproposed layout (including any `'push'` cascade) -- the host's one persistence hook: listen for\nit and persist `event.detail.layout` however it likes (`localStorage`, a network call, neither).\n\nResponsive: below a ~40rem container allocation (`@container`, not the viewport -- a dashboard\ngrid is commonly embedded in a panel of varying width), cells stack into a single flowing\ncolumn in the same row-major order the grid itself renders them in, instead of overflowing or\nshrinking columns unreadably.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| `cell-{id}` | A `layout` entry's cell content; auto-populated by a default composed `<lr-widget>`/`<lr-widget-renderer>` pair unless a light-DOM `[cell-id=\"{id}\"]` child is authored instead. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The grid root. |\n| `cell` | A single cell's positioned wrapper. |\n| `empty` | The `lr-empty` shown when `layout` is empty. |\n| `live-region` | The current move/resize/collision announcement. |\n| `resize-handle` | The pointer resize grip in a cell's trailing/bottom corner (only rendered while `cells-resizable`); the Ctrl/Cmd+Shift+Arrow keyboard path is the resize handle's full accessible equivalent, so the handle itself is `aria-hidden`. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-dashboard-grid-columns` (default: `12`) — Column count of the underlying CSS Grid. Written inline on `[part=\"base\"]` from the `columns` property on every render, so the fallback only applies to a `[part=\"base\"]` this component has not rendered yet.\n- `--lr-dashboard-grid-row-height` (default: `var(--lr-size-5rem)`) — Row track height. Written inline on `[part=\"base\"]` from the `rowHeight` property (in px) on every render.\n- `--lr-dashboard-grid-gap` (default: `var(--lr-space-m)`) — Gap between cells on both axes. Written inline on `[part=\"base\"]` from the `gap` property (in px) on every render."
|
|
3895
3895
|
},
|
|
3896
3896
|
"attributes": [
|
|
3897
3897
|
{
|
|
@@ -3963,7 +3963,7 @@
|
|
|
3963
3963
|
"name": "lr-data-grid",
|
|
3964
3964
|
"description": {
|
|
3965
3965
|
"kind": "markdown",
|
|
3966
|
-
"value": "`<lr-data-grid>` — keyboard-navigable, responsive data grid with sortable columns.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `cell` | Body cell. |\n| `grid` | Native table grid. |\n| `header` | Header cell. |\n| `row` | Body row. |\n| `viewport` | Scrollable grid viewport. |"
|
|
3966
|
+
"value": "`<lr-data-grid>` — keyboard-navigable, responsive data grid with sortable columns.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `cell` | Body cell. |\n| `empty` | The single full-width cell rendered in place of body rows while `loading`, or when `rows` is empty. |\n| `grid` | Native table grid. |\n| `header` | Header cell. |\n| `row` | Body row. |\n| `viewport` | Scrollable grid viewport. |"
|
|
3967
3967
|
},
|
|
3968
3968
|
"attributes": [
|
|
3969
3969
|
{
|
|
@@ -4000,7 +4000,7 @@
|
|
|
4000
4000
|
"name": "lr-dataset-viewer",
|
|
4001
4001
|
"description": {
|
|
4002
4002
|
"kind": "markdown",
|
|
4003
|
-
"value": "Fetches delimited text and renders a virtualized, accessible data table: a `role=\"table\"`\ncontainer with a sticky `role=\"row\"` header, composed with `<lr-virtual-list item-role=\"row\">`\nfor the body so files far larger than a real synchronous `<table>` can render without locking the\nmain thread.\n\nAdopts `DocumentAnchorTarget`: a `cell-range` anchor addresses the raw file grid, 1-based, with\nthe header row always occupying row 1 (this component always parses with PapaParse's `header:\ntrue`, so the first row is never part of the virtualized body) -- `scrollToAnchor()` scrolls the\naddressed row into view via the virtualized list's `active-id`. A `sheet`-qualified anchor never\nresolves here -- this viewer has no sheets. `highlights` paint as a `part=\"cell-highlight\"` cell\nwrapping a focusable `part=\"cell-highlight-action\"` native button (keeping the ARIA table tree\nintact) on membership, recomputed per row inside `renderRow()` so a row scrolled out and back\nin reconstructs its highlight for free, with no persistent DOM to keep in sync. `search()` is a\ncase-insensitive substring match over every body cell's raw string value, ordered row then column.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The root wrapper. |\n| `body` | The scrollable body wrapper. |\n| `cell` | One rendered cell (`role=\"cell\"`). |\n| `cell-highlight` | A cell (`role=\"cell\"`) covered by a `highlights` entry; wraps the `cell-highlight-action` button. |\n| `cell-highlight-action` | The native button filling a highlighted cell -- focusable, emits `lr-highlight-activate` on click or Enter/Space. |\n| `data-row` | One virtualized data row. |\n| `error` | The error message region. |\n| `header-cell` | A header cell (`role=\"columnheader\"`). |\n| `header-row` | The sticky header row (`role=\"row\"`). |\n| `spinner` | The loading status region. |\n| `table` | The `role=\"table\"` container (accessible name via `aria-label`).
|
|
4003
|
+
"value": "Fetches delimited text and renders a virtualized, accessible data table: a `role=\"table\"`\ncontainer with a sticky `role=\"row\"` header, composed with `<lr-virtual-list item-role=\"row\">`\nfor the body so files far larger than a real synchronous `<table>` can render without locking the\nmain thread.\n\nAdopts `DocumentAnchorTarget`: a `cell-range` anchor addresses the raw file grid, 1-based, with\nthe header row always occupying row 1 (this component always parses with PapaParse's `header:\ntrue`, so the first row is never part of the virtualized body) -- `scrollToAnchor()` scrolls the\naddressed row into view via the virtualized list's `active-id`. A `sheet`-qualified anchor never\nresolves here -- this viewer has no sheets. `highlights` paint as a `part=\"cell-highlight\"` cell\nwrapping a focusable `part=\"cell-highlight-action\"` native button (keeping the ARIA table tree\nintact) on membership, recomputed per row inside `renderRow()` so a row scrolled out and back\nin reconstructs its highlight for free, with no persistent DOM to keep in sync. `search()` is a\ncase-insensitive substring match over every body cell's raw string value, ordered row then column.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The root wrapper. |\n| `body` | The scrollable body wrapper. |\n| `cell` | One rendered cell (`role=\"cell\"`). |\n| `cell-highlight` | A cell (`role=\"cell\"`) covered by a `highlights` entry; wraps the `cell-highlight-action` button. |\n| `cell-highlight-action` | The native button filling a highlighted cell -- focusable, emits `lr-highlight-activate` on click or Enter/Space. |\n| `data-row` | One virtualized data row. |\n| `error` | The error message region. |\n| `header-cell` | A header cell (`role=\"columnheader\"`). |\n| `header-row` | The sticky header row (`role=\"row\"`). |\n| `spinner` | The loading status region. |\n| `table` | The `role=\"table\"` container (accessible name via `aria-label`). |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-dataset-viewer-max-height` (default: `none`) — Maximum block size of `[part=\"body\"]` before it scrolls internally. The `maxHeight` property sets this token inline on `[part=\"base\"]`.\n- `--lr-dataset-viewer-highlight-color` (default: `var(--lr-color-brand)`) — Outline color of a highlighted cell. The active highlight sets it inline to `var(--lr-color-warning, var(--lr-color-brand))`."
|
|
4004
4004
|
},
|
|
4005
4005
|
"attributes": [
|
|
4006
4006
|
{
|
|
@@ -4037,7 +4037,7 @@
|
|
|
4037
4037
|
"name": "lr-date-input",
|
|
4038
4038
|
"description": {
|
|
4039
4039
|
"kind": "markdown",
|
|
4040
|
-
"value": "`<lr-date-input>` — a date field with an attached calendar popover.\nMirrors the core `<wa-date-input>` API under `lr-`. Value is ISO 8601\n(`YYYY-MM-DD`, or `YYYY-MM-DD/YYYY-MM-DD` in range mode). Form-associated.\n\nThis component uses a single text field; typing accepts ISO or a\nlocale-parseable date.\n\n`size` uses the same `2xs`–`xl` scale as `lr-input`/`lr-select`/`lr-combobox`'s own `size`,\ndefault `m`. The calendar-toggle and clear buttons keep a constant touch-target size at every\ntier (mirroring `lr-input`'s own password-toggle button), so only the field's density scales.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| `error` | Custom error content. |\n| `hint` | Custom hint content. |\n| `label` | Custom label content. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `clear-button` | The clear control. |\n| `date-picker` | The nested date picker. |\n| `error` | The validation message. |\n| `expand-button` | The calendar popup toggle. |\n| `expand-icon` | The calendar icon. |\n| `form-control` | The outer form-control wrapper. |\n| `form-control-label` | The label wrapper. |\n| `hint` | The hint message. |\n| `input` | The text input. |\n| `input-wrapper` | The input and button wrapper. |\n| `popup` | The positioned calendar popup.
|
|
4040
|
+
"value": "`<lr-date-input>` — a date field with an attached calendar popover.\nMirrors the core `<wa-date-input>` API under `lr-`. Value is ISO 8601\n(`YYYY-MM-DD`, or `YYYY-MM-DD/YYYY-MM-DD` in range mode). Form-associated.\n\nThis component uses a single text field; typing accepts ISO or a\nlocale-parseable date.\n\n`size` uses the same `2xs`–`xl` scale as `lr-input`/`lr-select`/`lr-combobox`'s own `size`,\ndefault `m`. The calendar-toggle and clear buttons keep a constant touch-target size at every\ntier (mirroring `lr-input`'s own password-toggle button), so only the field's density scales.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| `error` | Custom error content. |\n| `hint` | Custom hint content. |\n| `label` | Custom label content. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `clear-button` | The clear control. |\n| `date-picker` | The nested date picker. |\n| `error` | The validation message. |\n| `expand-button` | The calendar popup toggle. |\n| `expand-icon` | The calendar icon. |\n| `form-control` | The outer form-control wrapper. |\n| `form-control-label` | The label wrapper. |\n| `hint` | The hint message. |\n| `input` | The text input. |\n| `input-wrapper` | The input and button wrapper. |\n| `popup` | The positioned calendar popup. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-date-input-padding-block` (default: `var(--lr-space-xs)`) — Block padding of the input row, scaled by `size`.\n- `--lr-date-input-padding-inline` (default: `var(--lr-space-s)`) — Inline padding of the input row, scaled by `size`.\n- `--lr-date-input-font-size` (default: `inherit`) — Font size of the text input, scaled by `size`."
|
|
4041
4041
|
},
|
|
4042
4042
|
"attributes": [
|
|
4043
4043
|
{
|
|
@@ -4417,7 +4417,7 @@
|
|
|
4417
4417
|
"name": "lr-dialog",
|
|
4418
4418
|
"description": {
|
|
4419
4419
|
"kind": "markdown",
|
|
4420
|
-
"value": "`<lr-dialog>` — a general-purpose modal/overlay. `role=\"dialog\"`,\nfocus-trapped while open, dismissible via Escape or a backdrop click, and\nscroll-locks the document for as long as it's open. Chrome stays minimal by\ndefault — no built-in title bar or close button; a consumer supplies a\nheading and any close affordance itself via the default/`footer` slots.\n`heading`/`closable` are an opt-in convenience for the common case where\nhand-building that chrome isn't worth it (see below).\n\nAccessible name / visible header, in priority order:\n0. If the host element itself has an `aria-label` attribute set, its value\n becomes `aria-label` on the panel outright, overriding every source\n below (including a slotted heading) — the standard ARIA convention for\n a consumer that wants full control over the announced name regardless\n of whatever `heading`/`label` props are also set. Also suppresses the\n visible header/`heading` row and the sr-only `label` element from\n rendering at all, same as case 1 already does to cases 2/3 below.\n1. Otherwise, if a heading element (`h1`–`h6` or `[role=\"heading\"]`) is a *direct\n child* (not inside `slot=\"footer\"`), its text content becomes\n `aria-label` on the panel — unchanged, and takes priority over `heading`\n below so an existing consumer that already slots its own heading keeps\n rendering it exactly as before.\n2. Otherwise, when `heading` is set, a visible header row (`part=\"header\"`)\n renders containing that text (`part=\"heading\"`), which becomes the\n `aria-labelledby` target.\n3. Otherwise, when `label` is set, an invisible (`.sr-only`, exposed as the\n `label` part) element carrying that text is rendered inside the panel\n and `aria-labelledby` points at it instead.\nOnly one of cases 2/3 ever renders at a time, so exactly one element ever\nclaims `aria-labelledby`. `label` itself never renders visible chrome on\nits own — `::part(label)` can be restyled to make the sr-only text visible,\nor `heading` can be set instead, if a consumer wants visible chrome without\nslotting a real heading element.\n\nThe slotted-heading case deliberately uses `aria-label` (a copied string)\nrather than `aria-labelledby` pointing at the heading's `id`: the heading is\n*light-DOM* content while `[part=\"panel\"]` lives in this element's\n*shadow* tree, and an ID-reference attribute can't resolve across that\nboundary (verified against axe's `aria-dialog-name` rule) — unlike the\n`heading`/`label`-prop cases above, where the target element is rendered\ninside the same shadow root it labels, so `aria-labelledby` there is safe.\n\n`closable` renders a close (X) button in the header row (creating one, with\nno heading text, if `heading` is unset) that closes the dialog via the same\n`close()` path as Escape/backdrop-dismiss, with reason `'close-button'`.\n\nStacking: opening one `<lr-dialog>` while another is already open (e.g. a\n`confirm()` launched from within an already-open dialog) is supported --\nEscape and the Tab focus trap only ever act on the topmost open dialog, so\ndialogs beneath it stay open and untouched until the one on top closes.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | The dialog body. |\n| `footer` | Action buttons, rendered in a bottom row. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `backdrop` | The full-viewport scrim behind the panel. |\n| `body` | The wrapper around the default slot. |\n| `close-button` | The built-in close button, rendered inside `header` only when `closable` is `true`. |\n| `footer` | The wrapper around the `footer` slot. |\n| `header` | The header row, rendered when `heading` is set (and no heading is slotted) and/or `closable` is `true`. |\n| `heading` | The visible `heading`-text element inside `header`, rendered only when `heading` is set and no heading is slotted. |\n| `label` | The invisible `label`-text element used for `aria-labelledby` when no heading is slotted and `heading` is unset. |\n| `panel` | The dialog panel itself (`role=\"dialog\"` while open). Shrink-wraps to its content by default, capped at `--lr-dialog-max-width` (default `32rem`); set `--lr-dialog-width` for an assertive width instead of only a cap.
|
|
4420
|
+
"value": "`<lr-dialog>` — a general-purpose modal/overlay. `role=\"dialog\"`,\nfocus-trapped while open, dismissible via Escape or a backdrop click, and\nscroll-locks the document for as long as it's open. Chrome stays minimal by\ndefault — no built-in title bar or close button; a consumer supplies a\nheading and any close affordance itself via the default/`footer` slots.\n`heading`/`closable` are an opt-in convenience for the common case where\nhand-building that chrome isn't worth it (see below).\n\nAccessible name / visible header, in priority order:\n0. If the host element itself has an `aria-label` attribute set, its value\n becomes `aria-label` on the panel outright, overriding every source\n below (including a slotted heading) — the standard ARIA convention for\n a consumer that wants full control over the announced name regardless\n of whatever `heading`/`label` props are also set. Also suppresses the\n visible header/`heading` row and the sr-only `label` element from\n rendering at all, same as case 1 already does to cases 2/3 below.\n1. Otherwise, if a heading element (`h1`–`h6` or `[role=\"heading\"]`) is a *direct\n child* (not inside `slot=\"footer\"`), its text content becomes\n `aria-label` on the panel — unchanged, and takes priority over `heading`\n below so an existing consumer that already slots its own heading keeps\n rendering it exactly as before.\n2. Otherwise, when `heading` is set, a visible header row (`part=\"header\"`)\n renders containing that text (`part=\"heading\"`), which becomes the\n `aria-labelledby` target.\n3. Otherwise, when `label` is set, an invisible (`.sr-only`, exposed as the\n `label` part) element carrying that text is rendered inside the panel\n and `aria-labelledby` points at it instead.\nOnly one of cases 2/3 ever renders at a time, so exactly one element ever\nclaims `aria-labelledby`. `label` itself never renders visible chrome on\nits own — `::part(label)` can be restyled to make the sr-only text visible,\nor `heading` can be set instead, if a consumer wants visible chrome without\nslotting a real heading element.\n\nThe slotted-heading case deliberately uses `aria-label` (a copied string)\nrather than `aria-labelledby` pointing at the heading's `id`: the heading is\n*light-DOM* content while `[part=\"panel\"]` lives in this element's\n*shadow* tree, and an ID-reference attribute can't resolve across that\nboundary (verified against axe's `aria-dialog-name` rule) — unlike the\n`heading`/`label`-prop cases above, where the target element is rendered\ninside the same shadow root it labels, so `aria-labelledby` there is safe.\n\n`closable` renders a close (X) button in the header row (creating one, with\nno heading text, if `heading` is unset) that closes the dialog via the same\n`close()` path as Escape/backdrop-dismiss, with reason `'close-button'`.\n\nStacking: opening one `<lr-dialog>` while another is already open (e.g. a\n`confirm()` launched from within an already-open dialog) is supported --\nEscape and the Tab focus trap only ever act on the topmost open dialog, so\ndialogs beneath it stay open and untouched until the one on top closes.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | The dialog body. |\n| `footer` | Action buttons, rendered in a bottom row. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `backdrop` | The full-viewport scrim behind the panel. |\n| `body` | The wrapper around the default slot. |\n| `close-button` | The built-in close button, rendered inside `header` only when `closable` is `true`. |\n| `footer` | The wrapper around the `footer` slot. |\n| `header` | The header row, rendered when `heading` is set (and no heading is slotted) and/or `closable` is `true`. |\n| `heading` | The visible `heading`-text element inside `header`, rendered only when `heading` is set and no heading is slotted. |\n| `label` | The invisible `label`-text element used for `aria-labelledby` when no heading is slotted and `heading` is unset. |\n| `panel` | The dialog panel itself (`role=\"dialog\"` while open). Shrink-wraps to its content by default, capped at `--lr-dialog-max-width` (default `32rem`); set `--lr-dialog-width` for an assertive width instead of only a cap. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-dialog-overlay-color` (default: `var(--lr-color-overlay)`) — Backdrop scrim color.\n- `--lr-dialog-width` (default: `auto`) — Assertive inline size for the panel. Left at `auto` the panel shrink-wraps to its content.\n- `--lr-dialog-max-width` (default: `var(--lr-dialog-width, var(--lr-size-32rem))`) — Cap on the panel's inline size. Falls back to `--lr-dialog-width` when that is set, so an assertive width is not clipped by the 32rem default; the viewport (`100%`) is always a hard limit on top."
|
|
4421
4421
|
},
|
|
4422
4422
|
"attributes": [
|
|
4423
4423
|
{
|
|
@@ -4475,7 +4475,7 @@
|
|
|
4475
4475
|
"name": "lr-diff-view",
|
|
4476
4476
|
"description": {
|
|
4477
4477
|
"kind": "markdown",
|
|
4478
|
-
"value": "`<lr-diff-view>` — a real two-string line diff (Myers/LCS-style alignment), rendered as\ninterleaved unified-diff output -- not diff-flavored syntax highlighting over an\nalready-formatted string (`lr-code-block`'s `language=\"diff\"` only lexically colors a string\nthe consumer already unified-diffed; it has no two-string-compare entry point). First-party\ninvention (no Web Awesome equivalent).\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The root wrapper. |\n| `copy-button` | The copy affordance, only rendered while `copyable`. |\n| `line` | A single line. Carries `data-type=\"equal\"\\|\"add\"\\|\"remove\"\\|\"empty\"\\|\"fold\"` (`\"empty\"` is an unbalanced-replace placeholder cell in `layout=\"split\"` and never carries a `+`/`-` prefix; `\"fold\"` is the collapsed-unchanged-lines marker `contextLines` produces). |\n| `side` | One column in `layout=\"split\"` (`data-side=\"old\"\\|\"new\"`).
|
|
4478
|
+
"value": "`<lr-diff-view>` — a real two-string line diff (Myers/LCS-style alignment), rendered as\ninterleaved unified-diff output -- not diff-flavored syntax highlighting over an\nalready-formatted string (`lr-code-block`'s `language=\"diff\"` only lexically colors a string\nthe consumer already unified-diffed; it has no two-string-compare entry point). First-party\ninvention (no Web Awesome equivalent).\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The root wrapper. |\n| `copy-button` | The copy affordance, only rendered while `copyable`. |\n| `line` | A single line. Carries `data-type=\"equal\"\\|\"add\"\\|\"remove\"\\|\"empty\"\\|\"fold\"` (`\"empty\"` is an unbalanced-replace placeholder cell in `layout=\"split\"` and never carries a `+`/`-` prefix; `\"fold\"` is the collapsed-unchanged-lines marker `contextLines` produces). |\n| `side` | One column in `layout=\"split\"` (`data-side=\"old\"\\|\"new\"`). |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-diff-view-font` (default: `var(--lr-font-mono)`) — Font family used for the diff lines."
|
|
4479
4479
|
},
|
|
4480
4480
|
"attributes": [
|
|
4481
4481
|
{
|
|
@@ -4550,7 +4550,7 @@
|
|
|
4550
4550
|
"name": "lr-dock-panel",
|
|
4551
4551
|
"description": {
|
|
4552
4552
|
"kind": "markdown",
|
|
4553
|
-
"value": "`<lr-dock-panel>` — a single panel docked to one edge of whatever\ncontains it, resizable by dragging its inner edge. Unlike `<lr-split>`\n(which owns and lays out N sibling panels, and requires restructuring a\nlayout so every panel becomes its direct child), this is one self-\ncontained element you drop next to your existing content -- typically as\nan absolutely-positioned child of a `position: relative` parent, or as a\nflex item alongside a main-content sibling. It deliberately imposes no\n`position`/`inset` of its own (see the styles module): it only manages its\nown size along the resize axis (`inline-size` for `start`/`end`,\n`block-size` for `top`/`bottom`) and fills 100% of the cross axis, leaving\nwhere it sits in the page entirely up to the consumer's own layout.\n\n`lr-split` stays the right primitive for the multi-sibling-panel case;\nthis is the primitive for the single-edge-docked case, kept as a separate\ncomponent rather than a second mode bolted onto `lr-split`'s API.\n\nPointer-drag-resize mirrors `lr-split`'s pointer-capture technique\n(pointerdown captures the pointer on the handle, pointermove computes a\nnew size, pointerup/pointercancel/lostpointercapture all release it) but\nfor a single draggable edge instead of N-1 dividers between N panels, and\nreasons in raw pixels throughout rather than percent -- `size` is a CSS\nlength, and pointer movement is naturally pixels, so there's no percent\ndomain to convert through here. Every resize (drag step, drag release, or\nkeyboard step) always commits `size` as a `px` string regardless of what\nunit `size`/`min-size`/`max-size` were originally expressed in -- a drag\ninherently produces a pixel-precise result, so re-expressing it in the\ncaller's original unit (e.g. back into `rem`) would just be lossy\nre-derivation for no benefit.\n\nCollapsing hides the slotted content but keeps the panel itself at a\nsmall persistent \"rail\" width/height (`--lr-dock-panel-collapsed-size`,\ndefault `var(--lr-icon-button-size)`) rather than collapsing to zero --\na zero-size collapsed panel would have nowhere left to host the toggle\nbutton that re-expands it. `size` itself is left untouched while\ncollapsed, so re-expanding restores exactly what it was.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | The panel's own content. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The panel root. |\n| `collapse-toggle` | The collapse/expand toggle button. Only rendered when `collapsible`. |\n| `content` | The wrapper around the default slot; hidden while `collapsed`. |\n| `handle` | The draggable resize handle on the panel's inner edge. Only rendered when `resizable` and not `collapsed`.
|
|
4553
|
+
"value": "`<lr-dock-panel>` — a single panel docked to one edge of whatever\ncontains it, resizable by dragging its inner edge. Unlike `<lr-split>`\n(which owns and lays out N sibling panels, and requires restructuring a\nlayout so every panel becomes its direct child), this is one self-\ncontained element you drop next to your existing content -- typically as\nan absolutely-positioned child of a `position: relative` parent, or as a\nflex item alongside a main-content sibling. It deliberately imposes no\n`position`/`inset` of its own (see the styles module): it only manages its\nown size along the resize axis (`inline-size` for `start`/`end`,\n`block-size` for `top`/`bottom`) and fills 100% of the cross axis, leaving\nwhere it sits in the page entirely up to the consumer's own layout.\n\n`lr-split` stays the right primitive for the multi-sibling-panel case;\nthis is the primitive for the single-edge-docked case, kept as a separate\ncomponent rather than a second mode bolted onto `lr-split`'s API.\n\nPointer-drag-resize mirrors `lr-split`'s pointer-capture technique\n(pointerdown captures the pointer on the handle, pointermove computes a\nnew size, pointerup/pointercancel/lostpointercapture all release it) but\nfor a single draggable edge instead of N-1 dividers between N panels, and\nreasons in raw pixels throughout rather than percent -- `size` is a CSS\nlength, and pointer movement is naturally pixels, so there's no percent\ndomain to convert through here. Every resize (drag step, drag release, or\nkeyboard step) always commits `size` as a `px` string regardless of what\nunit `size`/`min-size`/`max-size` were originally expressed in -- a drag\ninherently produces a pixel-precise result, so re-expressing it in the\ncaller's original unit (e.g. back into `rem`) would just be lossy\nre-derivation for no benefit.\n\nCollapsing hides the slotted content but keeps the panel itself at a\nsmall persistent \"rail\" width/height (`--lr-dock-panel-collapsed-size`,\ndefault `var(--lr-icon-button-size)`) rather than collapsing to zero --\na zero-size collapsed panel would have nowhere left to host the toggle\nbutton that re-expands it. `size` itself is left untouched while\ncollapsed, so re-expanding restores exactly what it was.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | The panel's own content. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The panel root. |\n| `collapse-toggle` | The collapse/expand toggle button. Only rendered when `collapsible`. |\n| `content` | The wrapper around the default slot; hidden while `collapsed`. |\n| `handle` | The draggable resize handle on the panel's inner edge. Only rendered when `resizable` and not `collapsed`. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-dock-panel-collapsed-size` (default: `var(--lr-icon-button-size)`) — The extent the panel keeps along its resize axis while `collapsed` -- enough to still host the toggle button that re-expands it."
|
|
4554
4554
|
},
|
|
4555
4555
|
"attributes": [
|
|
4556
4556
|
{
|
|
@@ -4615,7 +4615,7 @@
|
|
|
4615
4615
|
"name": "lr-document-compare",
|
|
4616
4616
|
"description": {
|
|
4617
4617
|
"kind": "markdown",
|
|
4618
|
-
"value": "`<lr-document-compare>` — side-by-side or inline comparison of two document versions, composed\nentirely from two existing primitives rather than reimplementing either: `<lr-diff-view>` is the\nreal two-string line diff (`view=\"diff\"`, the default), and `<lr-document-preview>` renders each\nversion's own actual content in `view=\"side-by-side\"`.\n\n**Synchronized anchors.** `<lr-diff-view>`'s own `layout=\"split\"` needs no scroll-sync of its\nown -- both columns already live inside one shared scrolling container, so they move together\nfor free. `view=\"side-by-side\"` is different: it renders two *independent*\n`<lr-document-preview>` panes, each with its own scrollbar, so nothing keeps them aligned on its\nown. This component adds exactly two minimal, purpose-built coordination mechanisms for that\ncase (mirroring `<lr-compare-panel>`'s own proven proportional-scroll algorithm rather than\ninventing a new one):\n- **Continuous scroll sync** (`syncScroll`, default `true`): scrolling either pane\n proportionally scrolls the other to the same *fraction* of its own scrollable range, not the\n same pixel offset -- the two versions can have very different lengths. A re-entrancy guard\n stops the mirrored write from bouncing back.\n- **Highlight-anchor sync**: activating a region highlight in one pane (`lr-highlight-activate`)\n that shares its `id` with a highlight in the *other* version's `highlights` scrolls that pane\n to its own matching highlight via `<lr-document-preview>`'s own `scrollToAnchor()`. The\n `lr-highlight-activate` event itself still bubbles through unchanged (`detail: { id }`, no\n side discriminator) so an existing listener contract stays exactly what\n `<lr-document-preview>` already documents.\n- A shared `anchor` property (same declarative shape as `<lr-document-viewer>`'s own `anchor`)\n drives both panes to the same target at once via their own `scrollToAnchor()`.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The root wrapper. |\n| `diff` | The internal `<lr-diff-view>`, rendered while `view=\"diff\"`. |\n| `pane-empty` | The placeholder shown in a pane whose version is unset. |\n| `pane-header` | A pane's visible label. |\n| `pane-new` | The second (new/after) version's labeled, independently-scrollable pane. |\n| `pane-old` | The first (old/before) version's labeled, independently-scrollable pane. |\n| `panes` | The row (or, under 640px, column) wrapping both panes, rendered while `view=\"side-by-side\"`. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-document-compare-pane-max-height` (default: `24rem`) — Maximum block size of a side-by-side pane before it scrolls internally."
|
|
4618
|
+
"value": "`<lr-document-compare>` — side-by-side or inline comparison of two document versions, composed\nentirely from two existing primitives rather than reimplementing either: `<lr-diff-view>` is the\nreal two-string line diff (`view=\"diff\"`, the default), and `<lr-document-preview>` renders each\nversion's own actual content in `view=\"side-by-side\"`.\n\n**Synchronized anchors.** `<lr-diff-view>`'s own `layout=\"split\"` needs no scroll-sync of its\nown -- both columns already live inside one shared scrolling container, so they move together\nfor free. `view=\"side-by-side\"` is different: it renders two *independent*\n`<lr-document-preview>` panes, each with its own scrollbar, so nothing keeps them aligned on its\nown. This component adds exactly two minimal, purpose-built coordination mechanisms for that\ncase (mirroring `<lr-compare-panel>`'s own proven proportional-scroll algorithm rather than\ninventing a new one):\n- **Continuous scroll sync** (`syncScroll`, default `true`): scrolling either pane\n proportionally scrolls the other to the same *fraction* of its own scrollable range, not the\n same pixel offset -- the two versions can have very different lengths. A re-entrancy guard\n stops the mirrored write from bouncing back.\n- **Highlight-anchor sync**: activating a region highlight in one pane (`lr-highlight-activate`)\n that shares its `id` with a highlight in the *other* version's `highlights` scrolls that pane\n to its own matching highlight via `<lr-document-preview>`'s own `scrollToAnchor()`. The\n `lr-highlight-activate` event itself still bubbles through unchanged (`detail: { id }`, no\n side discriminator) so an existing listener contract stays exactly what\n `<lr-document-preview>` already documents.\n- A shared `anchor` property (same declarative shape as `<lr-document-viewer>`'s own `anchor`)\n drives both panes to the same target at once via their own `scrollToAnchor()`.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The root wrapper. |\n| `diff` | The internal `<lr-diff-view>`, rendered while `view=\"diff\"`. |\n| `pane-empty` | The placeholder shown in a pane whose version is unset. |\n| `pane-header` | A pane's visible label. |\n| `pane-new` | The second (new/after) version's labeled, independently-scrollable pane. |\n| `pane-old` | The first (old/before) version's labeled, independently-scrollable pane. |\n| `panes` | The row (or, under 640px, column) wrapping both panes, rendered while `view=\"side-by-side\"`. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-document-compare-pane-max-height` (default: `var(--lr-size-24rem)`) — Maximum block size of a side-by-side pane before it scrolls internally."
|
|
4619
4619
|
},
|
|
4620
4620
|
"attributes": [
|
|
4621
4621
|
{
|
|
@@ -4734,7 +4734,7 @@
|
|
|
4734
4734
|
"name": "lr-document-preview",
|
|
4735
4735
|
"description": {
|
|
4736
4736
|
"kind": "markdown",
|
|
4737
|
-
"value": "`<lr-document-preview>` — a format-dispatching viewer for one document/\nattachment, plus the visual state machine for an async server-side\nconversion a host app runs in front of it.\n\nFormat dispatch is intentionally minimal (see this family's scope\nguidance): only `text/*`/`application/json` (plain, scrollable `<pre>` —\nno syntax highlighting; compose `<lr-code-block>` yourself via the\n`unsupported` slot for that) and `image/*` (a contained `<img>`) render\ninline. Everything else — PDF, office documents, video, audio, or any\nunrecognized MIME type — falls back to a generic \"can't preview this\"\nstate: a file glyph, a short message, and (when `src` is set) a native\n`<a download>` link. This is a deliberate ceiling, not a gap: this\ncomponent ships a dispatch *shell*, not a format registry. The\n`unsupported` slot is the escape hatch for every format left out of the\nbuilt-in three — plug in a PDF.js viewer, an office-doc renderer, a\n`<lr-code-block>`, or anything else keyed off `mime-type` yourself.\n\n`status=\"converting\"` is a second, independent axis from format dispatch.\nThis component does not know your backend's conversion API shape and\ntherefore owns none of the actual polling/fetch — a host that's converting\na non-natively-previewable format server-side (e.g. .docx → .pdf) polls\nits own backend and updates `status`/`progress`/`src` here as that\nproceeds. This component only *visualizes* that state: an indeterminate\nspinner, or a determinate one once `progress` is supplied. Once the host\nflips `status` to `\"ready\"` (typically alongside a new `src`/`mime-type`\npointing at the converted artifact), normal format dispatch resumes.\n\nThe one piece of async work this component *does* own is fetching a\n`text/*`/`application/json` `src` itself (there's no other way to get a\n`<pre>`'s text content from a URL) — gated behind the same generation-\ncounter guard `<lr-tool-result-view>`'s `resolve()` uses, plus an\n`AbortController`, so a `src` reassigned mid-fetch cancels the obsolete\nrequest and can't have a stale response clobber a newer one. A\nfailure here (network error, non-2xx response) renders inline via\n`[part=\"error\"]` and fires `lr-render-error`, independently of the\nhost-owned `status` prop — mirrors `<lr-markdown>`'s identical stance\nthat a *rendering* failure and a host's own state machine are different\nconcerns.\n\nEvery `src` is validated for the DOM/API sink that consumes it. Text\nfetches and image sources allow relative URLs plus `http:`, `https:`,\n`blob:`, and `data:`. Download links deliberately exclude `data:` because\nfollowing a `data:text/html` URL can create an active document. Unsafe or\nmalformed URLs never reach `fetch()`, an image `src`, or an anchor `href`;\nthey render a non-interactive fallback/error instead.\n\nAccessibility: the `\"converting\"` state (no numeric `progress`) is a\n`role=\"status\"` region wrapping a visually-hidden \"Converting document…\"\nstring. This is a *plain* static region, not routed through\n`<lr-live-region>`/`Announcer` — like `<lr-typing-indicator>`'s\nidentical judgement call (see that component's class doc), this only ever\nhas one thing to announce (entering the state), not a rapidly-repeating\nstream of updates, so the coalescing machinery a high-frequency component\nneeds would be pure overhead here. Once real `progress` is available, the\nregion becomes a standard `role=\"progressbar\"` instead, which is\nself-describing via `aria-valuenow` with no extra live-region wiring\nneeded. `status=\"error\"` renders `[part=\"error\"]` as `role=\"alert\"` — an\nassertive, one-shot failure notice, the same native-role shortcut\n`<lr-live-region>`'s own `mode=\"assertive\"` maps to, without requiring\nthe announcer machinery here either.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| `unsupported` | Escape hatch: when populated, its content renders *instead of* the generic download fallback for any `mime-type` this component doesn't natively support (i.e. whenever format dispatch would otherwise fall through to \"generic\"). Ignored while `mime-type` resolves to `text`/`image` dispatch, or while `status` is `\"converting\"`/`\"error\"`. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The root container. |\n| `body` | The wrapper around whichever content is currently showing (text/image preview, the generic fallback, the spinner, or the error message). |\n| `download-link` | The `<a download>` affordance in the generic fallback. Only rendered when `src` is set and safe for link navigation. |\n| `error` | The error message region (`role=\"alert\"`) — used both for `status=\"error\"` and for a failed text fetch. |\n| `filename` | The filename text. |\n| `frame-content` | Forwarded from the internal `<lr-zoomable-frame>` when `zoomable` (image format only). |\n| `frame-controls` | Forwarded from the internal `<lr-zoomable-frame>` when `zoomable` (image format only). |\n| `frame-reset` | Forwarded from the internal `<lr-zoomable-frame>` when `zoomable` (image format only). |\n| `frame-viewport` | Forwarded from the internal `<lr-zoomable-frame>` when `zoomable` (image format only). |\n| `frame-zoom-in` | Forwarded from the internal `<lr-zoomable-frame>` when `zoomable` (image format only). |\n| `frame-zoom-out` | Forwarded from the internal `<lr-zoomable-frame>` when `zoomable` (image format only). |\n| `header` | The row above the body, holding `filename`. Hidden entirely when `filename` is unset. |\n| `highlight-layer` | The wrapper around every rendered region highlight (image format only). |\n| `region-highlight` | One region highlight (`data-tone`, `data-active`) (image format only). |\n| `spinner` | The converting/loading indicator — indeterminate (`role=\"status\"`) or, once numeric progress is known, a determinate `role=\"progressbar\"`. Used both for `status=\"converting\"` and for this component's own in-flight text fetch. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-document-preview-max-height` (default: `none`) — Maximum body block size before the preview scrolls internally.\n- `--lr-document-preview-font` (default: `var(--lr-font-mono)`) — Font used for plain-text previews.\n- `--lr-document-preview-spin-duration` (default: `0.8s`) — Duration of one indeterminate loading-indicator rotation."
|
|
4737
|
+
"value": "`<lr-document-preview>` — a format-dispatching viewer for one document/\nattachment, plus the visual state machine for an async server-side\nconversion a host app runs in front of it.\n\nFormat dispatch is intentionally minimal (see this family's scope\nguidance): only `text/*`/`application/json` (plain, scrollable `<pre>` —\nno syntax highlighting; compose `<lr-code-block>` yourself via the\n`unsupported` slot for that) and `image/*` (a contained `<img>`) render\ninline. Everything else — PDF, office documents, video, audio, or any\nunrecognized MIME type — falls back to a generic \"can't preview this\"\nstate: a file glyph, a short message, and (when `src` is set) a native\n`<a download>` link. This is a deliberate ceiling, not a gap: this\ncomponent ships a dispatch *shell*, not a format registry. The\n`unsupported` slot is the escape hatch for every format left out of the\nbuilt-in three — plug in a PDF.js viewer, an office-doc renderer, a\n`<lr-code-block>`, or anything else keyed off `mime-type` yourself.\n\n`status=\"converting\"` is a second, independent axis from format dispatch.\nThis component does not know your backend's conversion API shape and\ntherefore owns none of the actual polling/fetch — a host that's converting\na non-natively-previewable format server-side (e.g. .docx → .pdf) polls\nits own backend and updates `status`/`progress`/`src` here as that\nproceeds. This component only *visualizes* that state: an indeterminate\nspinner, or a determinate one once `progress` is supplied. Once the host\nflips `status` to `\"ready\"` (typically alongside a new `src`/`mime-type`\npointing at the converted artifact), normal format dispatch resumes.\n\nThe one piece of async work this component *does* own is fetching a\n`text/*`/`application/json` `src` itself (there's no other way to get a\n`<pre>`'s text content from a URL) — gated behind the same generation-\ncounter guard `<lr-tool-result-view>`'s `resolve()` uses, plus an\n`AbortController`, so a `src` reassigned mid-fetch cancels the obsolete\nrequest and can't have a stale response clobber a newer one. A\nfailure here (network error, non-2xx response) renders inline via\n`[part=\"error\"]` and fires `lr-render-error`, independently of the\nhost-owned `status` prop — mirrors `<lr-markdown>`'s identical stance\nthat a *rendering* failure and a host's own state machine are different\nconcerns.\n\nEvery `src` is validated for the DOM/API sink that consumes it. Text\nfetches and image sources allow relative URLs plus `http:`, `https:`,\n`blob:`, and `data:`. Download links deliberately exclude `data:` because\nfollowing a `data:text/html` URL can create an active document. Unsafe or\nmalformed URLs never reach `fetch()`, an image `src`, or an anchor `href`;\nthey render a non-interactive fallback/error instead.\n\nAccessibility: the `\"converting\"` state (no numeric `progress`) is a\n`role=\"status\"` region wrapping a visually-hidden \"Converting document…\"\nstring. This is a *plain* static region, not routed through\n`<lr-live-region>`/`Announcer` — like `<lr-typing-indicator>`'s\nidentical judgement call (see that component's class doc), this only ever\nhas one thing to announce (entering the state), not a rapidly-repeating\nstream of updates, so the coalescing machinery a high-frequency component\nneeds would be pure overhead here. Once real `progress` is available, the\nregion becomes a standard `role=\"progressbar\"` instead, which is\nself-describing via `aria-valuenow` with no extra live-region wiring\nneeded. `status=\"error\"` renders `[part=\"error\"]` as `role=\"alert\"` — an\nassertive, one-shot failure notice, the same native-role shortcut\n`<lr-live-region>`'s own `mode=\"assertive\"` maps to, without requiring\nthe announcer machinery here either.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| `unsupported` | Escape hatch: when populated, its content renders *instead of* the generic download fallback for any `mime-type` this component doesn't natively support (i.e. whenever format dispatch would otherwise fall through to \"generic\"). Ignored while `mime-type` resolves to `text`/`image` dispatch, or while `status` is `\"converting\"`/`\"error\"`. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The root container. |\n| `body` | The wrapper around whichever content is currently showing (text/image preview, the generic fallback, the spinner, or the error message). |\n| `download-link` | The `<a download>` affordance in the generic fallback. Only rendered when `src` is set and safe for link navigation. |\n| `error` | The error message region (`role=\"alert\"`) — used both for `status=\"error\"` and for a failed text fetch. |\n| `filename` | The filename text. |\n| `frame-content` | Forwarded from the internal `<lr-zoomable-frame>` when `zoomable` (image format only). |\n| `frame-controls` | Forwarded from the internal `<lr-zoomable-frame>` when `zoomable` (image format only). |\n| `frame-reset` | Forwarded from the internal `<lr-zoomable-frame>` when `zoomable` (image format only). |\n| `frame-viewport` | Forwarded from the internal `<lr-zoomable-frame>` when `zoomable` (image format only). |\n| `frame-zoom-in` | Forwarded from the internal `<lr-zoomable-frame>` when `zoomable` (image format only). |\n| `frame-zoom-out` | Forwarded from the internal `<lr-zoomable-frame>` when `zoomable` (image format only). |\n| `header` | The row above the body, holding `filename`. Hidden entirely when `filename` is unset. |\n| `highlight-layer` | The wrapper around every rendered region highlight (image format only). |\n| `region-highlight` | One region highlight (`data-tone`, `data-active`) (image format only). |\n| `spinner` | The converting/loading indicator — indeterminate (`role=\"status\"`) or, once numeric progress is known, a determinate `role=\"progressbar\"`. Used both for `status=\"converting\"` and for this component's own in-flight text fetch. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-document-preview-max-height` (default: `none`) — Maximum body block size before the preview scrolls internally.\n- `--lr-document-preview-font` (default: `var(--lr-font-mono)`) — Font used for plain-text previews.\n- `--lr-document-preview-spin-duration` (default: `0.8s`) — Duration of one indeterminate loading-indicator rotation.\n- `--lr-document-preview-progress` (default: `0`) — Unitless 0-100 completion of the determinate loading ring (multiplied by `1%` in its conic gradient). Written inline by the component from the clamped `progress` value, so it is a read-out rather than a consumer knob."
|
|
4738
4738
|
},
|
|
4739
4739
|
"attributes": [
|
|
4740
4740
|
{
|
|
@@ -4908,7 +4908,7 @@
|
|
|
4908
4908
|
"name": "lr-doughnut-chart",
|
|
4909
4909
|
"description": {
|
|
4910
4910
|
"kind": "markdown",
|
|
4911
|
-
"value": "`<lr-doughnut-chart>` — `<lr-chart>` with `type` locked to `\"doughnut\"`.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| `center` | Optional overlay content positioned at the chart area's center. Useful for doughnut and pie totals. |\n| `data-table` | An optional consumer-provided accessible table alternative. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The chart wrapper. |\n| `canvas` | The Chart.js canvas. |\n| `center` | The chart-area-centered overlay wrapper for the `center` slot. |\n| `data-table` | The optional generated or slotted data table. |\n| `description` | The accessible chart summary. |\n| `reset-zoom-button` | The reset-zoom control when zoom is active.
|
|
4911
|
+
"value": "`<lr-doughnut-chart>` — `<lr-chart>` with `type` locked to `\"doughnut\"`.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| `center` | Optional overlay content positioned at the chart area's center. Useful for doughnut and pie totals. |\n| `data-table` | An optional consumer-provided accessible table alternative. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The chart wrapper. |\n| `canvas` | The Chart.js canvas. |\n| `center` | The chart-area-centered overlay wrapper for the `center` slot. |\n| `data-table` | The optional generated or slotted data table. |\n| `description` | The accessible chart summary. |\n| `reset-zoom-button` | The reset-zoom control when zoom is active. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-chart-height` (default: `var(--lr-size-280px)`) — The host's `block-size`. Set on the host element from the `height` property on every change (custom properties only cascade downward, so it cannot be set from inside the shadow root); a host-level override is overwritten the next time `height` changes.\n- `--lr-chart-grid-color` (default: `var(--lr-color-border)`) — Grid-line color. Resolved via `getComputedStyle` on every draw (Chart.js paints to canvas and cannot consume `var()`).\n- `--lr-chart-tick-color` (default: `var(--lr-color-text-quiet)`) — Axis tick-label color; also used for the `xLabel`/`yLabel`/`y2Label` axis-title text (there is no separate title-color token). Resolved via `getComputedStyle` on every draw.\n- `--lr-chart-legend-color` (default: `var(--lr-color-text)`) — Legend label color. Resolved via `getComputedStyle` on every draw.\n- `--lr-chart-tooltip-bg` (default: `var(--lr-color-surface)`) — Tooltip background color. Resolved via `getComputedStyle` on every draw.\n- `--lr-chart-tooltip-text` (default: `var(--lr-color-text)`) — Tooltip text color. Resolved via `getComputedStyle` on every draw."
|
|
4912
4912
|
},
|
|
4913
4913
|
"attributes": [
|
|
4914
4914
|
{
|
|
@@ -5029,7 +5029,7 @@
|
|
|
5029
5029
|
"name": "lr-drawer",
|
|
5030
5030
|
"description": {
|
|
5031
5031
|
"kind": "markdown",
|
|
5032
|
-
"value": "`<lr-drawer>` — a modal panel anchored to one logical edge of the\nviewport. It shares Lyra's dialog focus trap, Escape/backdrop dismissal,\nscroll lock, stacking, accessible naming, and cancelable close event.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | The drawer body. |\n| `footer` | Action buttons rendered in the footer row. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `backdrop` | The full-viewport scrim behind the panel. |\n| `body` | The wrapper around the default slot. |\n| `close-button` | The built-in close button, rendered inside `header` only when `closable` is `true`. |\n| `footer` | The wrapper around the `footer` slot. |\n| `header` | The header row, rendered when `heading` is set (and no heading is slotted) and/or `closable` is `true`. |\n| `heading` | The visible `heading`-text element inside `header`, rendered only when `heading` is set and no heading is slotted. |\n| `label` | The invisible `label`-text element used for `aria-labelledby` when no heading is slotted and `heading` is unset. |\n| `panel` | The dialog panel itself (`role=\"dialog\"` while open). Shrink-wraps to its content by default, capped at `--lr-dialog-max-width` (default `32rem`); set `--lr-dialog-width` for an assertive width instead of only a cap. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-drawer-width` — Inline size for start/end drawers.\n- `--lr-drawer-height` — Block size for top/bottom drawers."
|
|
5032
|
+
"value": "`<lr-drawer>` — a modal panel anchored to one logical edge of the\nviewport. It shares Lyra's dialog focus trap, Escape/backdrop dismissal,\nscroll lock, stacking, accessible naming, and cancelable close event.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | The drawer body. |\n| `footer` | Action buttons rendered in the footer row. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `backdrop` | The full-viewport scrim behind the panel. |\n| `body` | The wrapper around the default slot. |\n| `close-button` | The built-in close button, rendered inside `header` only when `closable` is `true`. |\n| `footer` | The wrapper around the `footer` slot. |\n| `header` | The header row, rendered when `heading` is set (and no heading is slotted) and/or `closable` is `true`. |\n| `heading` | The visible `heading`-text element inside `header`, rendered only when `heading` is set and no heading is slotted. |\n| `label` | The invisible `label`-text element used for `aria-labelledby` when no heading is slotted and `heading` is unset. |\n| `panel` | The dialog panel itself (`role=\"dialog\"` while open). Shrink-wraps to its content by default, capped at `--lr-dialog-max-width` (default `32rem`); set `--lr-dialog-width` for an assertive width instead of only a cap. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-drawer-width` — Inline size for start/end drawers.\n- `--lr-drawer-height` — Block size for top/bottom drawers.\n- `--lr-drawer-enter-x` (default: `calc(-1 * var(--lr-size-1rem))`) — Horizontal offset the panel animates in from for start/end drawers. Set per placement (and flipped under RTL) by the stylesheet; only read when `prefers-reduced-motion` is `no-preference`.\n- `--lr-drawer-enter-y` (default: `calc(-1 * var(--lr-size-1rem))`) — Vertical offset the panel animates in from for top/bottom drawers. Set to `var(--lr-size-1rem)` for `bottom`; only read when `prefers-reduced-motion` is `no-preference`.\n- `--lr-dialog-overlay-color` (default: `var(--lr-color-overlay)`) — Backdrop scrim color.\n- `--lr-dialog-width` (default: `auto`) — Assertive inline size for the panel. Left at `auto` the panel shrink-wraps to its content.\n- `--lr-dialog-max-width` (default: `var(--lr-dialog-width, var(--lr-size-32rem))`) — Cap on the panel's inline size. Falls back to `--lr-dialog-width` when that is set, so an assertive width is not clipped by the 32rem default; the viewport (`100%`) is always a hard limit on top."
|
|
5033
5033
|
},
|
|
5034
5034
|
"attributes": [
|
|
5035
5035
|
{
|
|
@@ -5285,7 +5285,7 @@
|
|
|
5285
5285
|
"name": "lr-email-viewer",
|
|
5286
5286
|
"description": {
|
|
5287
5287
|
"kind": "markdown",
|
|
5288
|
-
"value": "Parses `.eml` messages with the optional `postal-mime` peer and renders\ntheir HTML body only after DOMPurify sanitization. Plain-text messages remain\nuseful without DOMPurify. Attachment rows are real buttons that emit\n`lr-attachment-open` with the attachment's decoded bytes -- this component itself never\nopens, downloads, or object-URLs the content; a host routes the event into e.g.\n`URL.createObjectURL(new Blob([content], { type: mimeType }))` -> `lr-document-viewer` ->\nrevoke on `lr-close`. `fold-quotes` collapses trailing quoted-reply text/HTML behind a\nlocalized toggle.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `attachment-button` | An attachment's open button. |\n| `attachment-item` | An attachment metadata item. |\n| `attachment-list` | The attachment list. |\n| `attachments` | The attachment region. |\n| `attachments-label` | The localized attachment heading. |\n| `base` | The root container. |\n| `body` | The scrollable message body. |\n| `body-html` | The sanitized HTML body. |\n| `body-text` | The plain-text body. |\n| `date` | The message date. |\n| `date-label` | The localized date label. |\n| `error` | The error region. |\n| `from` | The sender address. |\n| `from-label` | The localized sender label. |\n| `headers` | Message metadata. |\n| `quote-toggle` | The show/hide-quoted-text toggle button. |\n| `quoted` | A folded quoted-text block (hidden until expanded). |\n| `spinner` | The loading region. |\n| `subject` | The message subject. |\n| `subject-label` | The localized subject label. |\n| `to` | The recipient addresses. |\n| `to-label` | The localized recipient label.
|
|
5288
|
+
"value": "Parses `.eml` messages with the optional `postal-mime` peer and renders\ntheir HTML body only after DOMPurify sanitization. Plain-text messages remain\nuseful without DOMPurify. Attachment rows are real buttons that emit\n`lr-attachment-open` with the attachment's decoded bytes -- this component itself never\nopens, downloads, or object-URLs the content; a host routes the event into e.g.\n`URL.createObjectURL(new Blob([content], { type: mimeType }))` -> `lr-document-viewer` ->\nrevoke on `lr-close`. `fold-quotes` collapses trailing quoted-reply text/HTML behind a\nlocalized toggle.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `attachment-button` | An attachment's open button. |\n| `attachment-item` | An attachment metadata item. |\n| `attachment-list` | The attachment list. |\n| `attachments` | The attachment region. |\n| `attachments-label` | The localized attachment heading. |\n| `base` | The root container. |\n| `body` | The scrollable message body. |\n| `body-html` | The sanitized HTML body. |\n| `body-text` | The plain-text body. |\n| `date` | The message date. |\n| `date-label` | The localized date label. |\n| `error` | The error region. |\n| `from` | The sender address. |\n| `from-label` | The localized sender label. |\n| `headers` | Message metadata. |\n| `quote-toggle` | The show/hide-quoted-text toggle button. |\n| `quoted` | A folded quoted-text block (hidden until expanded). |\n| `spinner` | The loading region. |\n| `subject` | The message subject. |\n| `subject-label` | The localized subject label. |\n| `to` | The recipient addresses. |\n| `to-label` | The localized recipient label. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-email-viewer-max-height` (default: `none`) — Maximum block size of `[part=\"body\"]` before it scrolls internally. The `maxHeight` property sets this token inline on `[part=\"base\"]`."
|
|
5289
5289
|
},
|
|
5290
5290
|
"attributes": [
|
|
5291
5291
|
{
|
|
@@ -5329,7 +5329,7 @@
|
|
|
5329
5329
|
"name": "lr-emoji-picker",
|
|
5330
5330
|
"description": {
|
|
5331
5331
|
"kind": "markdown",
|
|
5332
|
-
"value": "`<lr-emoji-picker>` — a searchable, keyboard-navigable, form-associated emoji picker. In the\nsame \"zero/optional-peer dependency\" spirit as `<lr-lite-chart>`/`<lr-heatmap>`: `groups` is\nfully consumer-suppliable (this component ships no emoji data of its own), with an *optional*\nconvenience auto-loader for a default set — see `emoji-data-loader.ts` and the class doc there for\nexactly what that covers.\n\nKeyboard model: the grid is a roving-tabindex listbox (a single Tab stop — only the active emoji\nis tabbable). Arrow keys move the active option (Left/Right follow reading direction and swap\nunder RTL; Up/Down move by one visual row, measured from the live wrap layout), Home/End jump to\nthe first/last option, and Enter/Space picks. The search input doubles as a `role=\"combobox\"`\nover the same listbox: the arrow keys and Enter also work there while focus stays in the input,\nwith `aria-activedescendant` tracking the active option. Large data sets automatically window\ntheir visible rows so scrolling does not create one button per supplied emoji in the DOM.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The root wrapper. |\n| `emoji` | Each emoji's own `<button>`; meets the shared minimum tappable size (`--lr-icon-button-size`) without enlarging the rendered emoji glyph itself. |\n| `empty` | The empty-state message, shown when the search matches nothing. |\n| `grid` | The keyboard-navigable emoji grid. |\n| `group-label` | Each group's heading, rendered above its emojis. |\n| `search` | The search/filter `<input>` (`role=\"combobox\"` over the grid). |"
|
|
5332
|
+
"value": "`<lr-emoji-picker>` — a searchable, keyboard-navigable, form-associated emoji picker. In the\nsame \"zero/optional-peer dependency\" spirit as `<lr-lite-chart>`/`<lr-heatmap>`: `groups` is\nfully consumer-suppliable (this component ships no emoji data of its own), with an *optional*\nconvenience auto-loader for a default set — see `emoji-data-loader.ts` and the class doc there for\nexactly what that covers.\n\nKeyboard model: the grid is a roving-tabindex listbox (a single Tab stop — only the active emoji\nis tabbable). Arrow keys move the active option (Left/Right follow reading direction and swap\nunder RTL; Up/Down move by one visual row, measured from the live wrap layout), Home/End jump to\nthe first/last option, and Enter/Space picks. The search input doubles as a `role=\"combobox\"`\nover the same listbox: the arrow keys and Enter also work there while focus stays in the input,\nwith `aria-activedescendant` tracking the active option. Large data sets automatically window\ntheir visible rows so scrolling does not create one button per supplied emoji in the DOM.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The root wrapper. |\n| `emoji` | Each emoji's own `<button>`; meets the shared minimum tappable size (`--lr-icon-button-size`) without enlarging the rendered emoji glyph itself. |\n| `empty` | The empty-state message, shown when the search matches nothing. |\n| `grid` | The keyboard-navigable emoji grid. |\n| `group-label` | Each group's heading, rendered above its emojis. |\n| `search` | The search/filter `<input>` (`role=\"combobox\"` over the grid). |\n| `virtual-items` | The flex row holding one windowed row's emoji buttons. |\n| `virtual-label` | The `aria-hidden` placeholder that reserves a row's group-label band when that row has no label, keeping every row the same height. Rendered on the windowed path only. |\n| `virtual-row` | One windowed row, absolutely positioned at the `--lr-emoji-picker-row-height` pitch. Rendered on the windowed path only. |\n| `virtual-spacer` | The full-height scroll spacer that gives the grid its scrollbar while only the visible rows exist in the DOM. Rendered on the windowed path only. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-emoji-picker-item-size` (default: `var(--lr-icon-button-size)`) — Each emoji button's box. Clamped up to `--lr-icon-button-size`: a smaller value does not shrink the button.\n- `--lr-emoji-picker-gap` (default: `var(--lr-space-2xs)`) — Gap between emoji within a windowed row.\n- `--lr-emoji-picker-row-height` (default: `calc(var(--lr-emoji-picker-item-size) + var(--lr-space-l))`) — One windowed row's height. Must stay at or above the item size plus the group-label band, or consecutive absolutely-positioned rows overlap."
|
|
5333
5333
|
},
|
|
5334
5334
|
"attributes": [
|
|
5335
5335
|
{
|
|
@@ -5419,7 +5419,7 @@
|
|
|
5419
5419
|
"name": "lr-entity-chip",
|
|
5420
5420
|
"description": {
|
|
5421
5421
|
"kind": "markdown",
|
|
5422
|
-
"value": "`<lr-entity-chip>` — an inline `@entity` mention for agent prose: flow content,\nkeyboard-focusable, with a hover/focus preview popover. The knowledge-graph sibling of\n`lr-citation-badge`, reusing its interaction contract wholesale. Carries ids through events\nonly -- no entity data resolution, no navigation.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | Rich preview content (typically a compact `lr-entity-card`), shown in a floating popover on hover/focus. No content -> no popover and no hover affordance at all. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The clickable chip (`<button>`). |\n| `label` | The chip's visible label text. |\n| `popover` | The floating preview panel. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-entity-chip-color` (default: `var(--lr-color-brand)`) — Text/accent color. Reflected `type` lets a host theme per type from CSS, e.g. `lr-entity-chip[type='person'] { --lr-entity-chip-color: ... }`.\n- `--lr-entity-chip-bg` (default: `var(--lr-color-brand-quiet)`) — Background color."
|
|
5422
|
+
"value": "`<lr-entity-chip>` — an inline `@entity` mention for agent prose: flow content,\nkeyboard-focusable, with a hover/focus preview popover. The knowledge-graph sibling of\n`lr-citation-badge`, reusing its interaction contract wholesale. Carries ids through events\nonly -- no entity data resolution, no navigation.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | Rich preview content (typically a compact `lr-entity-card`), shown in a floating popover on hover/focus. No content -> no popover and no hover affordance at all. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The clickable chip (`<button>`). |\n| `label` | The chip's visible label text. |\n| `popover` | The floating preview panel. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-entity-chip-color` (default: `var(--lr-color-brand)`) — Text/accent color. Reflected `type` lets a host theme per type from CSS, e.g. `lr-entity-chip[type='person'] { --lr-entity-chip-color: ... }`.\n- `--lr-entity-chip-bg` (default: `var(--lr-color-brand-quiet)`) — Background color.\n- `--lr-entity-chip-border` (default: `transparent`) — Border color of the chip."
|
|
5423
5423
|
},
|
|
5424
5424
|
"attributes": [
|
|
5425
5425
|
{
|
|
@@ -6010,7 +6010,7 @@
|
|
|
6010
6010
|
"name": "lr-flow-canvas",
|
|
6011
6011
|
"description": {
|
|
6012
6012
|
"kind": "markdown",
|
|
6013
|
-
"value": "`<lr-flow-canvas>` — a pannable/zoomable DAG workflow canvas: positions HTML node cards, draws\nSVG edges between their handles, runs a shared layered auto-layout for unpositioned nodes, and owns\nall selection/drag/connect interaction as controlled events. Readonly (viewer) by default; opt into\neditor gestures individually via `nodes-draggable`, `connectable`, `droppable`. Never mutates `nodes`\nor `edges` itself — every edit intent is an event the host applies, mirroring `lr-stepper`/\n`lr-table`'s controlled-component contract.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | `lr-flow-node` children to adopt by `node-id`; non-matching children are ignored with a console warning. |\n| `bottom-end` | Floating corner overlay (e.g. `lr-flow-minimap`). |\n| `bottom-start` | Floating corner overlay (e.g. `lr-flow-controls`). |\n| `top-end` | Floating corner overlay. |\n| `top-start` | Floating corner overlay (e.g. `lr-flow-run-overlay`). |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `arrowhead` | The shared directed-edge arrowhead marker. |\n| `background` | The dotted background grid. |\n| `base` | The root wrapper. |\n| `connection-line` | The in-progress connect-gesture path. |\n| `edge` | A single edge path. |\n| `edge-label` | An edge's drawn label. |\n| `edge-list` | A visually hidden list of every edge. |\n| `edges` | The edges SVG. |\n| `empty` | The `lr-empty` shown when `nodes` is empty. |\n| `live-region` | The current item/gesture announcement. |\n| `node` | A node's positioned wrapper. |\n| `stub` | A dangling-edge stub line. |\n| `viewport` | The focusable pan/zoom surface. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-flow-canvas-grid-size` (default: `
|
|
6013
|
+
"value": "`<lr-flow-canvas>` — a pannable/zoomable DAG workflow canvas: positions HTML node cards, draws\nSVG edges between their handles, runs a shared layered auto-layout for unpositioned nodes, and owns\nall selection/drag/connect interaction as controlled events. Readonly (viewer) by default; opt into\neditor gestures individually via `nodes-draggable`, `connectable`, `droppable`. Never mutates `nodes`\nor `edges` itself — every edit intent is an event the host applies, mirroring `lr-stepper`/\n`lr-table`'s controlled-component contract.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | `lr-flow-node` children to adopt by `node-id`; non-matching children are ignored with a console warning. |\n| `bottom-end` | Floating corner overlay (e.g. `lr-flow-minimap`). |\n| `bottom-start` | Floating corner overlay (e.g. `lr-flow-controls`). |\n| `top-end` | Floating corner overlay. |\n| `top-start` | Floating corner overlay (e.g. `lr-flow-run-overlay`). |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `arrowhead` | The shared directed-edge arrowhead marker. |\n| `background` | The dotted background grid. |\n| `base` | The root wrapper. |\n| `connection-line` | The in-progress connect-gesture path. |\n| `edge` | A single edge path. |\n| `edge-label` | An edge's drawn label. |\n| `edge-list` | A visually hidden list of every edge. |\n| `edges` | The edges SVG. |\n| `empty` | The `lr-empty` shown when `nodes` is empty. |\n| `live-region` | The current item/gesture announcement. |\n| `node` | A node's positioned wrapper. |\n| `stub` | A dangling-edge stub line. |\n| `viewport` | The focusable pan/zoom surface. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-flow-canvas-grid-size` (default: `var(--lr-size-0-5rem)`) — Dotted background spacing. The canvas also writes it inline as `${grid}px` from the `grid` property, which wins over the stylesheet fallback whenever a grid is in effect.\n- `--lr-flow-canvas-march-duration` (default: `var(--lr-transition-ambient)`) — Running-edge march animation duration."
|
|
6014
6014
|
},
|
|
6015
6015
|
"attributes": [
|
|
6016
6016
|
{
|
|
@@ -6156,7 +6156,7 @@
|
|
|
6156
6156
|
"name": "lr-flow-minimap",
|
|
6157
6157
|
"description": {
|
|
6158
6158
|
"kind": "markdown",
|
|
6159
|
-
"value": "`<lr-flow-minimap>` — a corner overview map of a `lr-flow-canvas`: scaled node rectangles plus\na draggable viewport rectangle, for orientation and fast navigation on canvases larger than the\nscreen. Draws no edges (nodes only, matching the React Flow/n8n minimap convention) and never\nreads `nodes` itself — geometry always comes from the canvas's `registerCompanion()` snapshots, so\nthe two can never disagree.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The root wrapper. |\n| `map` | The scaled SVG. |\n| `node` | One rect per node. |\n| `viewport` | The draggable, focusable view rectangle. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-flow-minimap-inline-size` (default: `12rem`) — Map inline size.\n- `--lr-flow-minimap-block-size` (default: `8rem`) — Map block size."
|
|
6159
|
+
"value": "`<lr-flow-minimap>` — a corner overview map of a `lr-flow-canvas`: scaled node rectangles plus\na draggable viewport rectangle, for orientation and fast navigation on canvases larger than the\nscreen. Draws no edges (nodes only, matching the React Flow/n8n minimap convention) and never\nreads `nodes` itself — geometry always comes from the canvas's `registerCompanion()` snapshots, so\nthe two can never disagree.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The root wrapper. |\n| `map` | The scaled SVG. |\n| `node` | One rect per node. |\n| `viewport` | The draggable, focusable view rectangle. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-flow-minimap-inline-size` (default: `var(--lr-size-12rem)`) — Map inline size.\n- `--lr-flow-minimap-block-size` (default: `var(--lr-size-8rem)`) — Map block size."
|
|
6160
6160
|
},
|
|
6161
6161
|
"attributes": [
|
|
6162
6162
|
{
|
|
@@ -6186,7 +6186,7 @@
|
|
|
6186
6186
|
"name": "lr-flow-node",
|
|
6187
6187
|
"description": {
|
|
6188
6188
|
"kind": "markdown",
|
|
6189
|
-
"value": "`<lr-flow-node>` — the card a workflow node renders as: header/body/toolbar chrome,\ntool-lifecycle status tones, and the named connection-handle elements edges anchor to. Used as\n`lr-flow-canvas`'s default card and as a slotted override; also renders standalone (palette\npreviews, docs). Purely presentational — activation, selection, movement, and connection are all\n`lr-flow-canvas` events; this component owns none of that.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | Body content. |\n| `header` | Replaces the built-in heading row entirely. |\n| `icon` | Leading header glyph. |\n| `toolbar` | Action row at the block-end edge. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The card root. |\n| `body` | The default-slot body wrapper. |\n| `handle` | Every handle dot (input or output). |\n| `handle-input` | An input handle dot (also carries the shared `handle` part). |\n| `handle-output` | An output handle dot (also carries the shared `handle` part). |\n| `header` | The built-in header row (omitted when the `header` slot has content). |\n| `heading` | The heading text. |\n| `icon` | The wrapper around the `icon` slot. |\n| `progress` | The determinate progress bar. |\n| `status` | The visible status chip (status is never color-only). |\n| `toolbar` | The toolbar row wrapper. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-flow-node-min-inline-size` (default: `
|
|
6189
|
+
"value": "`<lr-flow-node>` — the card a workflow node renders as: header/body/toolbar chrome,\ntool-lifecycle status tones, and the named connection-handle elements edges anchor to. Used as\n`lr-flow-canvas`'s default card and as a slotted override; also renders standalone (palette\npreviews, docs). Purely presentational — activation, selection, movement, and connection are all\n`lr-flow-canvas` events; this component owns none of that.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | Body content. |\n| `header` | Replaces the built-in heading row entirely. |\n| `icon` | Leading header glyph. |\n| `toolbar` | Action row at the block-end edge. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The card root. |\n| `body` | The default-slot body wrapper. |\n| `handle` | Every handle dot (input or output). |\n| `handle-input` | An input handle dot (also carries the shared `handle` part). |\n| `handle-output` | An output handle dot (also carries the shared `handle` part). |\n| `header` | The built-in header row (omitted when the `header` slot has content). |\n| `heading` | The heading text. |\n| `icon` | The wrapper around the `icon` slot. |\n| `progress` | The determinate progress bar. |\n| `status` | The visible status chip (status is never color-only). |\n| `toolbar` | The toolbar row wrapper. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-flow-node-min-inline-size` (default: `calc(var(--lr-size-10rem) + var(--lr-size-1rem))`) — Minimum card inline size."
|
|
6190
6190
|
},
|
|
6191
6191
|
"attributes": [
|
|
6192
6192
|
{
|
|
@@ -6877,7 +6877,7 @@
|
|
|
6877
6877
|
"name": "lr-heatmap",
|
|
6878
6878
|
"description": {
|
|
6879
6879
|
"kind": "markdown",
|
|
6880
|
-
"value": "`<lr-heatmap>` — a Canvas heatmap with a DPR-aware, resize-aware redraw\nloop, in one of two `mode`s:\n\n- `\"matrix\"` (default): a `rowLabels` x `colLabels` grid of `values`. `-1`\n (or any non-finite value) is treated as \"no data\". `scale=\"sqrt\"`\n compresses the ramp via `sqrtStep()` so one heavy cell doesn't wash out\n the rest; the default `\"linear\"` scale maps linearly instead.\n- `\"calendar\"`: a GitHub-style Sunday-Saturday (or `firstDayOfWeek`-anchored\n — see below) x week grid built from `days`. `scale` governs its\n bucketing too: the default `\"linear\"` buckets by `quartileBucket()`\n (today's original behavior, unchanged); `\"sqrt\"` instead compresses via\n the same `sqrtStep()` magnitude compression matrix mode uses, so one\n heavy day doesn't wash out the rest. As in matrix mode, a cell whose\n `value` is negative or non-finite is treated as \"no data\" rather than\n being bucketed — as is a grid position with no matching entry in `days`\n at all (a gap in a sparse calendar).\n\nThe sequential color ramp's endpoints are read from the\n`--lr-heatmap-scale-lo`/`-hi` custom properties (declared in\n`heatmap.styles.ts`) so hosts can retheme it — canvas can't consume\n`var()` directly, so they're resolved once per draw via\n`getComputedStyle`, then normalized to RGB by `resolveRgb()` (any valid\nCSS color syntax, not just hex — see its doc comment).\n\nEvery cell is independently addressable: a `pointermove` hit test over the\ncanvas shows `[part=\"tooltip\"]` with that cell's label + value (hidden on\n`pointerleave`); the canvas is `tabindex=\"0\"` with arrow-key roving focus\n(a stroked ring redrawn over the focused cell on every draw, plus a\nvisually-hidden `aria-live=\"polite\"` status announcement — avoids a\nDOM-node-per-cell overlay, which would be hundreds of nodes for a year\ncalendar); and a click, or Enter/Space on the focused cell, fires\n`lr-cell-click`. `annotations` additionally strokes a ring around\nspecific cells (e.g. to call out an anomaly), each one optionally\nsurfaced in the legend too via `[part=\"legend-annotation\"]`.\nSet `accessibleCells` when each cell needs a persistent DOM control for\nassistive technology. The opt-in overlay uses native buttons with a\nroving tabindex, localized `aria-label`, and explicit `aria-pressed` state\nderived from the controlled `selectedCell` property; the canvas remains the\nvisual rendering surface underneath.\n\n`columnX` (calendar mode only) overrides the x-origin computed for each\nweek column — drawing, hit-testing, the focus ring, and month-label\npositioning all consult it consistently, so a consumer can pixel-align a\ncalendar's week columns with a sibling chart's coordinate system. Unset\n(the default) keeps the original evenly-spaced formula. `rowY` is its\ncalendar-mode vertical analogue — overrides the y-origin computed for each\nweekday row, consulted consistently by drawing, hit-testing, and the focus\nring via the private `rowYFor()` helper (mirroring `columnXFor()` exactly).\n\n`firstDayOfWeek` (calendar mode only, default `0`/Sunday, no-op in matrix\nmode) anchors the calendar grid at a different weekday — `0`-`6`, same\nnumbering as `CalendarCellPos.weekday` (`0` Sunday .. `6` Saturday) —\nthreaded into `buildCalendarGrid()`.\n\n`cellSize`/`fitToWidth` (previously matrix-mode only) also drive calendar\nmode's per-cell size: unset, calendar mode keeps today's original 11px\ncell size unchanged; explicitly set, the same fixed size (or, with\n`fitToWidth`, the same host-width-derived size matrix mode already\nsupports) governs calendar mode's grid too.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The heatmap wrapper. |\n| `canvas` | The heatmap canvas. |\n| `cell` | An opt-in native button for one matrix or calendar cell. |\n| `cells` | The opt-in per-cell accessibility overlay. |\n| `legend` | The color legend. |\n| `legend-annotation` | An annotation label. |\n| `legend-hi` | The high legend endpoint. |\n| `legend-lo` | The low legend endpoint. |\n| `live-region` | The visually hidden keyboard announcement region. |\n| `tooltip` | The hover tooltip. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-heatmap-scale-lo` (default: `var(--lr-color-brand-quiet)`) — Low endpoint of the sequential color ramp.\n- `--lr-heatmap-scale-hi` (default: `var(--lr-color-brand)`) — High endpoint of the sequential color ramp.\n- `--lr-heatmap-no-data-fill` (default: `var(--lr-color-no-data)`) — Fill for cells with no value.\n- `--lr-heatmap-label-font` — Font for axis/legend labels drawn on the canvas.\n- `--lr-heatmap-tooltip-bg` (default: `var(--lr-color-surface)`) — Hover tooltip background.\n- `--lr-heatmap-tooltip-text` (default: `var(--lr-color-text)`) — Hover tooltip text color.\n- `--lr-heatmap-focus-ring-color` (default: `var(--lr-focus-ring-color)`) — Focus ring around a focused cell.\n- `--lr-heatmap-annotation-color` (default: `var(--lr-color-danger)`) — Border color for an annotated cell.\n- `--lr-heatmap-selected-color` (default: `var(--lr-color-success)`) — Border color for the selected cell."
|
|
6880
|
+
"value": "`<lr-heatmap>` — a Canvas heatmap with a DPR-aware, resize-aware redraw\nloop, in one of two `mode`s:\n\n- `\"matrix\"` (default): a `rowLabels` x `colLabels` grid of `values`. `-1`\n (or any non-finite value) is treated as \"no data\". `scale=\"sqrt\"`\n compresses the ramp via `sqrtStep()` so one heavy cell doesn't wash out\n the rest; the default `\"linear\"` scale maps linearly instead.\n- `\"calendar\"`: a GitHub-style Sunday-Saturday (or `firstDayOfWeek`-anchored\n — see below) x week grid built from `days`. `scale` governs its\n bucketing too: the default `\"linear\"` buckets by `quartileBucket()`\n (today's original behavior, unchanged); `\"sqrt\"` instead compresses via\n the same `sqrtStep()` magnitude compression matrix mode uses, so one\n heavy day doesn't wash out the rest. As in matrix mode, a cell whose\n `value` is negative or non-finite is treated as \"no data\" rather than\n being bucketed — as is a grid position with no matching entry in `days`\n at all (a gap in a sparse calendar).\n\nThe sequential color ramp's endpoints are read from the\n`--lr-heatmap-scale-lo`/`-hi` custom properties (declared in\n`heatmap.styles.ts`) so hosts can retheme it — canvas can't consume\n`var()` directly, so they're resolved once per draw via\n`getComputedStyle`, then normalized to RGB by `resolveRgb()` (any valid\nCSS color syntax, not just hex — see its doc comment).\n\nEvery cell is independently addressable: a `pointermove` hit test over the\ncanvas shows `[part=\"tooltip\"]` with that cell's label + value (hidden on\n`pointerleave`); the canvas is `tabindex=\"0\"` with arrow-key roving focus\n(a stroked ring redrawn over the focused cell on every draw, plus a\nvisually-hidden `aria-live=\"polite\"` status announcement — avoids a\nDOM-node-per-cell overlay, which would be hundreds of nodes for a year\ncalendar); and a click, or Enter/Space on the focused cell, fires\n`lr-cell-click`. `annotations` additionally strokes a ring around\nspecific cells (e.g. to call out an anomaly), each one optionally\nsurfaced in the legend too via `[part=\"legend-annotation\"]`.\n\n`legendStops` swaps the legend's two-endpoint gradient bar for a discrete\nkey of swatches, so a consumer whose `cellColor` callback paints an\nentirely different domain than the `--lr-heatmap-scale-lo`/`-hi` ramp can\nkeep the built-in legend (labels, number formatting, annotation entries)\ninstead of hiding `[part=\"legend\"]` and hand-rolling swatches. It is\npresentation only — it never feeds back into the cell colors.\n\nSet `accessibleCells` when each cell needs a persistent DOM control for\nassistive technology. The opt-in overlay uses native buttons with a\nroving tabindex, localized `aria-label`, and explicit `aria-pressed` state\nderived from the controlled `selectedCell` property; the canvas remains the\nvisual rendering surface underneath.\n\n`columnX` (calendar mode only) overrides the x-origin computed for each\nweek column — drawing, hit-testing, the focus ring, and month-label\npositioning all consult it consistently, so a consumer can pixel-align a\ncalendar's week columns with a sibling chart's coordinate system. Unset\n(the default) keeps the original evenly-spaced formula. `rowY` is its\ncalendar-mode vertical analogue — overrides the y-origin computed for each\nweekday row, consulted consistently by drawing, hit-testing, and the focus\nring via the private `rowYFor()` helper (mirroring `columnXFor()` exactly).\n\n`firstDayOfWeek` (calendar mode only, default `0`/Sunday, no-op in matrix\nmode) anchors the calendar grid at a different weekday — `0`-`6`, same\nnumbering as `CalendarCellPos.weekday` (`0` Sunday .. `6` Saturday) —\nthreaded into `buildCalendarGrid()`.\n\n`cellSize`/`fitToWidth` (previously matrix-mode only) also drive calendar\nmode's per-cell size: unset, calendar mode keeps today's original 11px\ncell size unchanged; explicitly set, the same fixed size (or, with\n`fitToWidth`, the same host-width-derived size matrix mode already\nsupports) governs calendar mode's grid too.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The heatmap wrapper. |\n| `canvas` | The heatmap canvas. |\n| `cell` | An opt-in native button for one matrix or calendar cell. |\n| `cells` | The opt-in per-cell accessibility overlay. |\n| `legend` | The color legend. |\n| `legend-annotation` | An annotation label. |\n| `legend-hi` | The high legend endpoint (omitted when `legendStops` is supplied). |\n| `legend-lo` | The low legend endpoint (omitted when `legendStops` is supplied). |\n| `legend-stop` | One discrete `legendStops` entry — swatch plus label. |\n| `legend-stop-label` | The text of one `legendStops` entry. |\n| `legend-swatch` | The color swatch of one `legendStops` entry. |\n| `live-region` | The visually hidden keyboard announcement region. |\n| `tooltip` | The hover tooltip. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-heatmap-scale-lo` (default: `var(--lr-color-brand-quiet)`) — Low endpoint of the sequential color ramp.\n- `--lr-heatmap-scale-hi` (default: `var(--lr-color-brand)`) — High endpoint of the sequential color ramp.\n- `--lr-heatmap-no-data-fill` (default: `var(--lr-color-no-data)`) — Fill for cells with no value.\n- `--lr-heatmap-label-font` — Font for axis/legend labels drawn on the canvas.\n- `--lr-heatmap-tooltip-bg` (default: `var(--lr-color-surface)`) — Hover tooltip background.\n- `--lr-heatmap-tooltip-text` (default: `var(--lr-color-text)`) — Hover tooltip text color.\n- `--lr-heatmap-focus-ring-color` (default: `var(--lr-focus-ring-color)`) — Focus ring around a focused cell.\n- `--lr-heatmap-annotation-color` (default: `var(--lr-color-danger)`) — Border color for an annotated cell.\n- `--lr-heatmap-selected-color` (default: `var(--lr-color-success)`) — Border color for the selected cell.\n- `--lr-heatmap-color-steps-gradient` (default: `linear-gradient(to right, var(--lr-heatmap-scale-lo), var(--lr-heatmap-scale-hi))`) — Gradient painted on the continuous legend bar. Set on the host by the component itself while `colorSteps` is supplied, and removed again when it is not; the fallback is the two-endpoint scale ramp."
|
|
6881
6881
|
},
|
|
6882
6882
|
"attributes": [
|
|
6883
6883
|
{
|
|
@@ -6995,7 +6995,7 @@
|
|
|
6995
6995
|
"name": "lr-histogram",
|
|
6996
6996
|
"description": {
|
|
6997
6997
|
"kind": "markdown",
|
|
6998
|
-
"value": "`<lr-histogram>` — bins `values` into `bins` equal-width buckets and\nrenders them as a bar chart. Chart.js has no built-in histogram\ncontroller; this composes `binValues()` with the plain `bar` type.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| `center` | Optional overlay content positioned at the chart area's center. Useful for doughnut and pie totals. |\n| `data-table` | An optional consumer-provided accessible table alternative. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The chart wrapper. |\n| `canvas` | The Chart.js canvas. |\n| `center` | The chart-area-centered overlay wrapper for the `center` slot. |\n| `data-table` | The optional generated or slotted data table. |\n| `description` | The accessible chart summary. |\n| `reset-zoom-button` | The reset-zoom control when zoom is active.
|
|
6998
|
+
"value": "`<lr-histogram>` — bins `values` into `bins` equal-width buckets and\nrenders them as a bar chart. Chart.js has no built-in histogram\ncontroller; this composes `binValues()` with the plain `bar` type.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| `center` | Optional overlay content positioned at the chart area's center. Useful for doughnut and pie totals. |\n| `data-table` | An optional consumer-provided accessible table alternative. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The chart wrapper. |\n| `canvas` | The Chart.js canvas. |\n| `center` | The chart-area-centered overlay wrapper for the `center` slot. |\n| `data-table` | The optional generated or slotted data table. |\n| `description` | The accessible chart summary. |\n| `reset-zoom-button` | The reset-zoom control when zoom is active. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-chart-height` (default: `var(--lr-size-280px)`) — The host's `block-size`. Set on the host element from the `height` property on every change (custom properties only cascade downward, so it cannot be set from inside the shadow root); a host-level override is overwritten the next time `height` changes.\n- `--lr-chart-grid-color` (default: `var(--lr-color-border)`) — Grid-line color. Resolved via `getComputedStyle` on every draw (Chart.js paints to canvas and cannot consume `var()`).\n- `--lr-chart-tick-color` (default: `var(--lr-color-text-quiet)`) — Axis tick-label color; also used for the `xLabel`/`yLabel`/`y2Label` axis-title text (there is no separate title-color token). Resolved via `getComputedStyle` on every draw.\n- `--lr-chart-legend-color` (default: `var(--lr-color-text)`) — Legend label color. Resolved via `getComputedStyle` on every draw.\n- `--lr-chart-tooltip-bg` (default: `var(--lr-color-surface)`) — Tooltip background color. Resolved via `getComputedStyle` on every draw.\n- `--lr-chart-tooltip-text` (default: `var(--lr-color-text)`) — Tooltip text color. Resolved via `getComputedStyle` on every draw."
|
|
6999
6999
|
},
|
|
7000
7000
|
"attributes": [
|
|
7001
7001
|
{
|
|
@@ -7130,7 +7130,7 @@
|
|
|
7130
7130
|
"name": "lr-html-viewer",
|
|
7131
7131
|
"description": {
|
|
7132
7132
|
"kind": "markdown",
|
|
7133
|
-
"value": "Fetches and safely renders an inline HTML document.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The root container. |\n| `body` | The wrapper around the fetched-state content. |\n| `error` | The error region. |\n| `html` | The sanitized HTML document, once loaded. |\n| `spinner` | The loading region.
|
|
7133
|
+
"value": "Fetches and safely renders an inline HTML document.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The root container. |\n| `body` | The wrapper around the fetched-state content. |\n| `error` | The error region. |\n| `html` | The sanitized HTML document, once loaded. |\n| `spinner` | The loading region. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-html-viewer-max-height` (default: `none`) — Maximum block size of `[part=\"body\"]` before it scrolls internally. The `maxHeight` property sets this token inline on `[part=\"base\"]`."
|
|
7134
7134
|
},
|
|
7135
7135
|
"attributes": [
|
|
7136
7136
|
{
|
|
@@ -7167,7 +7167,7 @@
|
|
|
7167
7167
|
"name": "lr-icon",
|
|
7168
7168
|
"description": {
|
|
7169
7169
|
"kind": "markdown",
|
|
7170
|
-
"value": "`<lr-icon>` — a tiny dependency-free SVG icon primitive using a named path set.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | Optional custom SVG/path content when `name` is not supplied. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `svg` | The rendered SVG.
|
|
7170
|
+
"value": "`<lr-icon>` — a tiny dependency-free SVG icon primitive using a named path set.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | Optional custom SVG/path content when `name` is not supplied. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `svg` | The rendered SVG. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-icon-size` (default: `var(--lr-size-1-25rem)`) — Inline and block size of the icon box."
|
|
7171
7171
|
},
|
|
7172
7172
|
"attributes": [
|
|
7173
7173
|
{
|
|
@@ -7204,7 +7204,7 @@
|
|
|
7204
7204
|
"name": "lr-icon-button",
|
|
7205
7205
|
"description": {
|
|
7206
7206
|
"kind": "markdown",
|
|
7207
|
-
"value": "`<lr-icon-button>` — an accessible icon-only action button.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | Optional custom icon content. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `button` | Native button.
|
|
7207
|
+
"value": "`<lr-icon-button>` — an accessible icon-only action button.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | Optional custom icon content. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `button` | Native button. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-icon-button-size` (default: `2.5rem`) — Inline and block size of the native button. A library-wide token (declared on `:root` by `tokens.styles.ts`, and the shared minimum tappable size several other components size their icon controls against), so overriding it globally resizes all of them together."
|
|
7208
7208
|
},
|
|
7209
7209
|
"attributes": [
|
|
7210
7210
|
{
|
|
@@ -7412,7 +7412,7 @@
|
|
|
7412
7412
|
"name": "lr-ingestion-queue",
|
|
7413
7413
|
"description": {
|
|
7414
7414
|
"kind": "markdown",
|
|
7415
|
-
"value": "`<lr-ingestion-queue>` — a controlled list of documents moving through an ingestion pipeline\n(upload → text extraction → chunking → embedding → indexing), each row showing its stage,\nprogress, chunk/embedding counts, and a retry or cancel affordance. Presentation only: this\ncomponent runs no ingestion itself, persists nothing, and never mutates `items` -- retrying or\ncancelling a row fires a controlled `lr-retry`/`lr-cancel` request event and waits for the host\nto supply an updated `items` array, the same request/response convention `<lr-thread-list>`'s\n`lr-thread-pin`/`-archive`/`-delete` events already establish.\n\nAt or above `virtualizeThreshold` items, the list renders through an internal\n`<lr-virtual-list>` instead of a plain keyed list (same precedent as `<lr-thread-list>`'s data\nmode and `<lr-activity-feed>`'s `virtualizeThreshold`) -- identical row markup and behavior\neither way, keyed by `id`.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The root region. |\n| `cancel-button` | Fires `lr-cancel`. Only rendered for non-terminal rows. |\n| `empty` | The `<lr-empty>` zero-items state. |\n| `item` | One queue item row; carries `data-stage`. When virtualized, reached from this component's own stylesheet via `lr-virtual-list::part(item)` (renders inside the internal `<lr-virtual-list>`'s own shadow root, not this component's). |\n| `item-actions` | Wrapper around the retry/cancel buttons. |\n| `item-attempts` | The attempt count, only rendered once `attempts` is greater than 0. |\n| `item-chunk-count` | The chunk count, only rendered once `chunkCount` is set. |\n| `item-embedding-status` | The \"N of M chunks embedded\" text, only rendered once both `chunkCount` and `embeddedChunkCount` are set. |\n| `item-error` | The failure message, only rendered for `stage=\"failed\"` with `error` set. |\n| `item-header` | The row's name/stage-badge line. |\n| `item-meta` | Wrapper around the chunk-count/embedding-status/attempt-count text. |\n| `item-name` | The document's `name`. |\n| `item-progress` | The row's `<lr-progress-bar>`, only rendered for an active (uploading through indexing) stage. |\n| `list` | The row container in non-virtualized mode (`role=\"list\"`). |\n| `retry-button` | Fires `lr-retry`. Only rendered for `stage=\"failed\"` rows. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-ingestion-queue-max-height` (default: `none`) — Non-virtualized mode only: caps how tall the list grows before it scrolls internally. Has no effect once virtualized -- the internal `<lr-virtual-list>`'s own viewport keeps its independent, fixed default height (retheme it directly via `<lr-ingestion-queue>`'s own `lr-virtual-list { --lr-virtual-list-height: ... }` if needed)."
|
|
7415
|
+
"value": "`<lr-ingestion-queue>` — a controlled list of documents moving through an ingestion pipeline\n(upload → text extraction → chunking → embedding → indexing), each row showing its stage,\nprogress, chunk/embedding counts, and a retry or cancel affordance. Presentation only: this\ncomponent runs no ingestion itself, persists nothing, and never mutates `items` -- retrying or\ncancelling a row fires a controlled `lr-retry`/`lr-cancel` request event and waits for the host\nto supply an updated `items` array, the same request/response convention `<lr-thread-list>`'s\n`lr-thread-pin`/`-archive`/`-delete` events already establish.\n\nAt or above `virtualizeThreshold` items, the list renders through an internal\n`<lr-virtual-list>` instead of a plain keyed list (same precedent as `<lr-thread-list>`'s data\nmode and `<lr-activity-feed>`'s `virtualizeThreshold`) -- identical row markup and behavior\neither way, keyed by `id`.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The root region. |\n| `cancel-button` | Fires `lr-cancel`. Only rendered for non-terminal rows. |\n| `empty` | The `<lr-empty>` zero-items state. |\n| `item` | One queue item row; carries `data-stage`. When virtualized, reached from this component's own stylesheet via `lr-virtual-list::part(item)` (renders inside the internal `<lr-virtual-list>`'s own shadow root, not this component's). |\n| `item-actions` | Wrapper around the retry/cancel buttons. |\n| `item-attempts` | The attempt count, only rendered once `attempts` is greater than 0. |\n| `item-chunk-count` | The chunk count, only rendered once `chunkCount` is set. |\n| `item-embedding-status` | The \"N of M chunks embedded\" text, only rendered once both `chunkCount` and `embeddedChunkCount` are set. |\n| `item-error` | The failure message, only rendered for `stage=\"failed\"` with `error` set. |\n| `item-header` | The row's name/stage-badge line. |\n| `item-meta` | Wrapper around the chunk-count/embedding-status/attempt-count text. |\n| `item-name` | The document's `name`. |\n| `item-progress` | The row's `<lr-progress-bar>`, only rendered for an active (uploading through indexing) stage. |\n| `item-stage` | The row's `<lr-badge>` showing the localized stage label; its `variant` tracks `stage`. |\n| `list` | The row container in non-virtualized mode (`role=\"list\"`). |\n| `retry-button` | Fires `lr-retry`. Only rendered for `stage=\"failed\"` rows. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-ingestion-queue-max-height` (default: `none`) — Non-virtualized mode only: caps how tall the list grows before it scrolls internally. Has no effect once virtualized -- the internal `<lr-virtual-list>`'s own viewport keeps its independent, fixed default height (retheme it directly via `<lr-ingestion-queue>`'s own `lr-virtual-list { --lr-virtual-list-height: ... }` if needed)."
|
|
7416
7416
|
},
|
|
7417
7417
|
"attributes": [
|
|
7418
7418
|
{
|
|
@@ -7442,7 +7442,7 @@
|
|
|
7442
7442
|
"name": "lr-input",
|
|
7443
7443
|
"description": {
|
|
7444
7444
|
"kind": "markdown",
|
|
7445
|
-
"value": "`<lr-input>` — a single-line plain-text input primitive, the `lr-*` equivalent of a plain\n`wa-input`, form-associated via the `FormAssociated` mixin (same shape as `<lr-textarea>`).\n\nShips the same opt-in `label`/`hint`/`errorText` form-control chrome as `<lr-textarea>`/\n`<lr-select>` (props + matching named slots + `form-control`/`form-control-label`/`hint`/`error`\nparts) — left unset, the chrome stays hidden. `size` uses the same `xs`–`xl` scale as\n`<lr-select>`/`<lr-combobox>`. `type=\"password\"` always renders a\n`password-toggle` eye-icon button that flips the internal native input between\n`type=\"password\"`/`type=\"text\"` and tracks `passwordVisible`. `type=\"email\"`/`type=\"number\"`\n(with `min`/`max`/`step`) delegate constraint validation to the internal native `<input>`'s own\nbrowser-computed `validity`, bridged into this element's `ElementInternals` by `updateValidity()`.\n`type=\"search\"`/`type=\"time\"` forward straight through to the native input with no additional\nchrome or validation, the same as `type=\"text\"`.\n\nA host `aria-label` is forwarded to the internal textbox via the typed `accessibleLabel` property;\nexternal `aria-labelledby`/`aria-describedby` idrefs are not copied across the shadow boundary.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| `end` | Adornment after the native input and built-in actions. |\n| `error` | Custom error content. |\n| `hint` | Custom hint content. |\n| `label` | Custom label content. |\n| `start` | Adornment before the native input. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `clear-button` | The clear action, rendered for non-empty clearable text/search inputs. |\n| `end` | Wrapper around the `end` adornment slot. |\n| `error` | The error message. |\n| `form-control` | The outer wrapper around label, input, error and hint. |\n| `form-control-label` | The `<label>` element. |\n| `hint` | The hint message. |\n| `input` | The native `<input>` element. |\n| `input-wrapper` | The row wrapping the native input and the password-toggle button. |\n| `password-toggle` | The show/hide-password button, present only when `type=\"password\"`. |\n| `start` | Wrapper around the `start` adornment slot. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-input-control-min-height` — Outer control height floor, scaled by `size`."
|
|
7445
|
+
"value": "`<lr-input>` — a single-line plain-text input primitive, the `lr-*` equivalent of a plain\n`wa-input`, form-associated via the `FormAssociated` mixin (same shape as `<lr-textarea>`).\n\nShips the same opt-in `label`/`hint`/`errorText` form-control chrome as `<lr-textarea>`/\n`<lr-select>` (props + matching named slots + `form-control`/`form-control-label`/`hint`/`error`\nparts) — left unset, the chrome stays hidden. `size` uses the same `xs`–`xl` scale as\n`<lr-select>`/`<lr-combobox>`. `type=\"password\"` always renders a\n`password-toggle` eye-icon button that flips the internal native input between\n`type=\"password\"`/`type=\"text\"` and tracks `passwordVisible`. `type=\"email\"`/`type=\"number\"`\n(with `min`/`max`/`step`) delegate constraint validation to the internal native `<input>`'s own\nbrowser-computed `validity`, bridged into this element's `ElementInternals` by `updateValidity()`.\n`type=\"search\"`/`type=\"time\"` forward straight through to the native input with no additional\nchrome or validation, the same as `type=\"text\"`.\n\nA host `aria-label` is forwarded to the internal textbox via the typed `accessibleLabel` property;\nexternal `aria-labelledby`/`aria-describedby` idrefs are not copied across the shadow boundary.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| `end` | Adornment after the native input and built-in actions. |\n| `error` | Custom error content. |\n| `hint` | Custom hint content. |\n| `label` | Custom label content. |\n| `start` | Adornment before the native input. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `clear-button` | The clear action, rendered for non-empty clearable text/search inputs. |\n| `end` | Wrapper around the `end` adornment slot. |\n| `error` | The error message. |\n| `form-control` | The outer wrapper around label, input, error and hint. |\n| `form-control-label` | The `<label>` element. |\n| `hint` | The hint message. |\n| `input` | The native `<input>` element. |\n| `input-wrapper` | The row wrapping the native input and the password-toggle button. |\n| `password-toggle` | The show/hide-password button, present only when `type=\"password\"`. |\n| `start` | Wrapper around the `start` adornment slot. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-input-control-min-height` — Outer control height floor, scaled by `size`.\n- `--lr-input-padding-block` — Block padding of the native input, scaled by `size`.\n- `--lr-input-padding-inline` — Inline padding of the control row, scaled by `size`.\n- `--lr-input-font-size` — Font size of the native input, scaled by `size`."
|
|
7446
7446
|
},
|
|
7447
7447
|
"attributes": [
|
|
7448
7448
|
{
|
|
@@ -7526,14 +7526,14 @@
|
|
|
7526
7526
|
"name": "max",
|
|
7527
7527
|
"description": {
|
|
7528
7528
|
"kind": "markdown",
|
|
7529
|
-
"value": "
|
|
7529
|
+
"value": "Upper counterpart of `min`, with the same parsing and the same default of `undefined`.\n\nType: `number | string | undefined`"
|
|
7530
7530
|
}
|
|
7531
7531
|
},
|
|
7532
7532
|
{
|
|
7533
7533
|
"name": "min",
|
|
7534
7534
|
"description": {
|
|
7535
7535
|
"kind": "markdown",
|
|
7536
|
-
"value": "`type=\"number\"` only — forwarded to the internal native `<input>`'s own `min`/`max`/`step`\nand consulted by that same native input's constraint validation (see `updateValidity()`).\n\nType: `number | undefined`"
|
|
7536
|
+
"value": "`type=\"number\"` only — forwarded to the internal native `<input>`'s own `min`/`max`/`step`\nand consulted by that same native input's constraint validation (see `updateValidity()`).\nDefaults to `undefined` (no lower bound). The `min` attribute is parsed as a number here; the\ndeclared type also admits a string so a subclass bound to a non-numeric native input type can\nnarrow the attribute parsing to that type's own literal form (`<lr-time-input>`'s `09:00`)\nwithout redeclaring the whole property surface.\n\nType: `number | string | undefined`"
|
|
7537
7537
|
}
|
|
7538
7538
|
},
|
|
7539
7539
|
{
|
|
@@ -7621,7 +7621,7 @@
|
|
|
7621
7621
|
"name": "lr-json-viewer",
|
|
7622
7622
|
"description": {
|
|
7623
7623
|
"kind": "markdown",
|
|
7624
|
-
"value": "`<lr-json-viewer>` — a collapsible, copyable tree view for an arbitrary\nJSON-serializable value (object/array/string/number/boolean/null/\nundefined). Serves as the fallback renderer wherever a raw payload (tool\ncall arguments, a tool result, an API response) needs inspecting without a\nbespoke view.\n\nExpand/collapse state is keyed by structural path (not by object identity),\nso it survives a `data` reassignment that keeps the same shape -- e.g. a\nstreaming tool result being patched in place.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The root scroll container; respects `max-height`. |\n| `bracket` | A `{`, `}`, `[`, or `]` delimiter. |\n| `copy-button` | A copy-to-clipboard button -- the top-level one (in `toolbar`, labelled \"Copy JSON to clipboard\") or a per-node one (only rendered when `copyable`; labelled with its own key/type, e.g. \"Copy age\", so assistive tech can tell rows apart). |\n| `key` | An object property key or array index label. |\n| `toggle` | A container node's expand/collapse button (hidden, but present for row alignment, on leaf/empty nodes). |\n| `toolbar` | The wrapper around the top-level copy button (only rendered when `copyable`). |\n| `tree` | The wrapper around the rendered node tree. |\n| `value` | A primitive value's text -- carries `data-type` (`string`/`number`/`boolean`/`null`/`undefined`, or `circular` for a self-reference marker in place of a re-visited container's subtree) for per-type coloring, `data-match` while it matches `search`, and `data-active` while it is the current `searchNext()`/`searchPrevious()` cursor position.
|
|
7624
|
+
"value": "`<lr-json-viewer>` — a collapsible, copyable tree view for an arbitrary\nJSON-serializable value (object/array/string/number/boolean/null/\nundefined). Serves as the fallback renderer wherever a raw payload (tool\ncall arguments, a tool result, an API response) needs inspecting without a\nbespoke view.\n\nExpand/collapse state is keyed by structural path (not by object identity),\nso it survives a `data` reassignment that keeps the same shape -- e.g. a\nstreaming tool result being patched in place.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The root scroll container; respects `max-height`. |\n| `bracket` | A `{`, `}`, `[`, or `]` delimiter. |\n| `copy-button` | A copy-to-clipboard button -- the top-level one (in `toolbar`, labelled \"Copy JSON to clipboard\") or a per-node one (only rendered when `copyable`; labelled with its own key/type, e.g. \"Copy age\", so assistive tech can tell rows apart). |\n| `key` | An object property key or array index label. |\n| `toggle` | A container node's expand/collapse button (hidden, but present for row alignment, on leaf/empty nodes). |\n| `toolbar` | The wrapper around the top-level copy button (only rendered when `copyable`). |\n| `tree` | The wrapper around the rendered node tree. |\n| `value` | A primitive value's text -- carries `data-type` (`string`/`number`/`boolean`/`null`/`undefined`, or `circular` for a self-reference marker in place of a re-visited container's subtree) for per-type coloring, `data-match` while it matches `search`, and `data-active` while it is the current `searchNext()`/`searchPrevious()` cursor position. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-json-viewer-max-height` (default: `none`) — Cap on `[part=\"base\"]`'s block size, past which the viewer scrolls internally. The `maxHeight` property sets this token inline on `[part=\"base\"]`.\n- `--lr-json-viewer-font` (default: `var(--lr-font-mono)`) — Font family used for the rendered tree."
|
|
7625
7625
|
},
|
|
7626
7626
|
"attributes": [
|
|
7627
7627
|
{
|
|
@@ -7802,7 +7802,7 @@
|
|
|
7802
7802
|
"name": "lr-known-date",
|
|
7803
7803
|
"description": {
|
|
7804
7804
|
"kind": "markdown",
|
|
7805
|
-
"value": "`<lr-known-date>` — a date a user already knows (a birthdate, a passport\nissue/expiry date) collected as three plain, labeled day/month/year number\nfields in the locale's natural field order, rather than a calendar popup.\nForm-associated; the submitted form value is always canonical ISO 8601\n(`YYYY-MM-DD`), or `''` while any field is blank or the combination isn't a\nreal calendar date. Mirrors Web Awesome's `wa-known-date` API surface under\n`lr-`, with `appearance`/`pill`/`form` dropped and `size` normalized to\nthis library's own `xs`–`xl` scale, matching every other lyra form control\nmirrored from a Web Awesome counterpart.\n\nA field's own `<input>` shows exactly what was typed (never reformatted or\nreverted) -- only the composite `value` is zero-padded. Auto-advance\n(typing a field's last digit moves focus to the next field) and\nbackspace-to-previous-field-when-empty are this library's own additions on\ntop of Web Awesome's bare typing model, which documents no auto-advance;\ndon't remove them to \"restore\" WA parity. Arrow-key field-to-field\nnavigation at a field's text boundary is RTL-aware: the *physical* key that\nmeans \"toward the next field\" flips under an inherited `dir=\"rtl\"`, while\nthe field order itself (locale-derived) does not. Non-digit keystrokes are\nrejected before they reach a field's state -- no locale-specific numeral\ninput (e.g. Arabic-Indic digits) is supported.\n\nNo resizable text-editing surface exists (three fixed-width digit fields),\nso resize forwarding doesn't apply, and `spellcheck`/`autocapitalize`/\n`autocorrect`/`wrap` don't meaningfully apply to 2–4-digit numeric fields\neither -- the same carve-out `lr-input[type=\"number\"]` already documents.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| `error` | Custom error content, alongside the `errorText` attribute. |\n| `hint` | Custom hint content, alongside the `hint` attribute. |\n| `label` | Custom label/legend content, alongside the `label` attribute. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `error` | The validation message. |\n| `field` | Each field block (label + input), repeated three times; distinguished by `data-field=\"day\"\\|\"month\"\\|\"year\"`. |\n| `field-input` | The native per-field `<input type=\"text\" inputmode=\"numeric\">`, repeated three times; distinguished by `data-field=\"day\"\\|\"month\"\\|\"year\"`. |\n| `field-label` | The small visible per-field text label (\"Day\"/\"Month\"/\"Year\"). |\n| `fields` | The row wrapping the three field blocks. |\n| `fieldset` | The `<fieldset>` grouping the three fields. |\n| `form-control` | The outer wrapper around legend, fieldset, hint, and error. |\n| `hint` | The hint message. |\n| `legend` | The `<legend>` element.
|
|
7805
|
+
"value": "`<lr-known-date>` — a date a user already knows (a birthdate, a passport\nissue/expiry date) collected as three plain, labeled day/month/year number\nfields in the locale's natural field order, rather than a calendar popup.\nForm-associated; the submitted form value is always canonical ISO 8601\n(`YYYY-MM-DD`), or `''` while any field is blank or the combination isn't a\nreal calendar date. Mirrors Web Awesome's `wa-known-date` API surface under\n`lr-`, with `appearance`/`pill`/`form` dropped and `size` normalized to\nthis library's own `xs`–`xl` scale, matching every other lyra form control\nmirrored from a Web Awesome counterpart.\n\nA field's own `<input>` shows exactly what was typed (never reformatted or\nreverted) -- only the composite `value` is zero-padded. Auto-advance\n(typing a field's last digit moves focus to the next field) and\nbackspace-to-previous-field-when-empty are this library's own additions on\ntop of Web Awesome's bare typing model, which documents no auto-advance;\ndon't remove them to \"restore\" WA parity. Arrow-key field-to-field\nnavigation at a field's text boundary is RTL-aware: the *physical* key that\nmeans \"toward the next field\" flips under an inherited `dir=\"rtl\"`, while\nthe field order itself (locale-derived) does not. Non-digit keystrokes are\nrejected before they reach a field's state -- no locale-specific numeral\ninput (e.g. Arabic-Indic digits) is supported.\n\nNo resizable text-editing surface exists (three fixed-width digit fields),\nso resize forwarding doesn't apply, and `spellcheck`/`autocapitalize`/\n`autocorrect`/`wrap` don't meaningfully apply to 2–4-digit numeric fields\neither -- the same carve-out `lr-input[type=\"number\"]` already documents.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| `error` | Custom error content, alongside the `errorText` attribute. |\n| `hint` | Custom hint content, alongside the `hint` attribute. |\n| `label` | Custom label/legend content, alongside the `label` attribute. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `error` | The validation message. |\n| `field` | Each field block (label + input), repeated three times; distinguished by `data-field=\"day\"\\|\"month\"\\|\"year\"`. |\n| `field-input` | The native per-field `<input type=\"text\" inputmode=\"numeric\">`, repeated three times; distinguished by `data-field=\"day\"\\|\"month\"\\|\"year\"`. |\n| `field-label` | The small visible per-field text label (\"Day\"/\"Month\"/\"Year\"). |\n| `fields` | The row wrapping the three field blocks. |\n| `fieldset` | The `<fieldset>` grouping the three fields. |\n| `form-control` | The outer wrapper around legend, fieldset, hint, and error. |\n| `hint` | The hint message. |\n| `legend` | The `<legend>` element. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-known-date-field-padding-block` (default: `var(--lr-space-s)`) — Block padding of each `field-input`, auto-swapped per `size`.\n- `--lr-known-date-field-padding-inline` (default: `var(--lr-space-s)`) — Inline padding of each `field-input`, auto-swapped per `size`.\n- `--lr-known-date-field-font-size` (default: `var(--lr-font-size-md-sm)`) — Font size of each `field-input`, auto-swapped per `size`.\n- `--lr-known-date-field-gap` (default: `var(--lr-space-s)`) — Gap between the three field blocks.\n- `--lr-known-date-day-field-width` (default: `var(--lr-size-3-5em)`) — Inline size of the day field.\n- `--lr-known-date-month-field-width` (default: `var(--lr-size-3-5em)`) — Inline size of the month field.\n- `--lr-known-date-year-field-width` (default: `var(--lr-size-5em)`) — Inline size of the year field."
|
|
7806
7806
|
},
|
|
7807
7807
|
"attributes": [
|
|
7808
7808
|
{
|
|
@@ -7981,7 +7981,7 @@
|
|
|
7981
7981
|
"name": "lr-line-chart",
|
|
7982
7982
|
"description": {
|
|
7983
7983
|
"kind": "markdown",
|
|
7984
|
-
"value": "`<lr-line-chart>` — `<lr-chart>` with `type` locked to `\"line\"`.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| `center` | Optional overlay content positioned at the chart area's center. Useful for doughnut and pie totals. |\n| `data-table` | An optional consumer-provided accessible table alternative. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The chart wrapper. |\n| `canvas` | The Chart.js canvas. |\n| `center` | The chart-area-centered overlay wrapper for the `center` slot. |\n| `data-table` | The optional generated or slotted data table. |\n| `description` | The accessible chart summary. |\n| `reset-zoom-button` | The reset-zoom control when zoom is active.
|
|
7984
|
+
"value": "`<lr-line-chart>` — `<lr-chart>` with `type` locked to `\"line\"`.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| `center` | Optional overlay content positioned at the chart area's center. Useful for doughnut and pie totals. |\n| `data-table` | An optional consumer-provided accessible table alternative. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The chart wrapper. |\n| `canvas` | The Chart.js canvas. |\n| `center` | The chart-area-centered overlay wrapper for the `center` slot. |\n| `data-table` | The optional generated or slotted data table. |\n| `description` | The accessible chart summary. |\n| `reset-zoom-button` | The reset-zoom control when zoom is active. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-chart-height` (default: `var(--lr-size-280px)`) — The host's `block-size`. Set on the host element from the `height` property on every change (custom properties only cascade downward, so it cannot be set from inside the shadow root); a host-level override is overwritten the next time `height` changes.\n- `--lr-chart-grid-color` (default: `var(--lr-color-border)`) — Grid-line color. Resolved via `getComputedStyle` on every draw (Chart.js paints to canvas and cannot consume `var()`).\n- `--lr-chart-tick-color` (default: `var(--lr-color-text-quiet)`) — Axis tick-label color; also used for the `xLabel`/`yLabel`/`y2Label` axis-title text (there is no separate title-color token). Resolved via `getComputedStyle` on every draw.\n- `--lr-chart-legend-color` (default: `var(--lr-color-text)`) — Legend label color. Resolved via `getComputedStyle` on every draw.\n- `--lr-chart-tooltip-bg` (default: `var(--lr-color-surface)`) — Tooltip background color. Resolved via `getComputedStyle` on every draw.\n- `--lr-chart-tooltip-text` (default: `var(--lr-color-text)`) — Tooltip text color. Resolved via `getComputedStyle` on every draw."
|
|
7985
7985
|
},
|
|
7986
7986
|
"attributes": [
|
|
7987
7987
|
{
|
|
@@ -8319,7 +8319,7 @@
|
|
|
8319
8319
|
"name": "lr-markdown",
|
|
8320
8320
|
"description": {
|
|
8321
8321
|
"kind": "markdown",
|
|
8322
|
-
"value": "`<lr-markdown>` — sanitized Markdown-to-HTML rendering (GFM tables,\nfenced code blocks, links, blockquotes) built on the optional peer\ndependencies `marked` (parsing) and `dompurify` (sanitizing), both\nlazy-loaded via `markdown-loader.ts` on first connect.\n\nRendering never ships unsanitized or broken markup silently:\n- If `marked` fails to load, or throws while parsing malformed input, the\n component falls back to plain text (`white-space: pre-wrap`, no HTML\n parsing at all) and fires `lr-render-error`.\n- If `sanitize` is `true` (the default) and `dompurify` fails to load, the\n component *also* falls back to plain text + `lr-render-error` — it\n never renders marked's raw HTML output when sanitization was requested\n (or defaulted to) but is unavailable, even though `marked` itself loaded\n fine.\n- If `sanitize` is explicitly `false`, marked's raw output renders as-is\n regardless of whether `dompurify` is installed — the consumer opted out\n of sanitization, so `dompurify`'s absence is irrelevant to that path.\n\nThat same plain-text fallback rendering (`data-fallback` on the `content`\npart) is also, unconditionally and by default, a brief *transient* state on\nevery connect, not just a failure path: `connectedCallback()`'s dynamic\n`import()` of `marked`/`dompurify` (see `markdown-loader.ts`) is\nasynchronous, so the very first paint of any `<lr-markdown>` on a page\nshows plain text for at least one microtask — even when both peers are\nalready installed and load without error — until that import resolves and\na second render replaces it with the real Markdown output. Set\n`eager-load` to skip that window once the shared dependency cache is\nalready warm; see that property's doc for exactly what \"warm\" requires.\n\n`heading`/`code`/`blockquote`/`table`/`link`/`image` tokens are rendered\nthrough a `marked` renderer override that injects `part=\"...\"` attributes\ndirectly into the produced HTML — a single pass, not a second DOM walk\nafter insertion.\n\nFenced code blocks are syntax-highlighted via the same optional `shiki` peer `<lr-code-block>`\nuses (`highlightCode`, default `true` — a pure upgrade gated by whether `shiki` is installed at\nall, not a separate opt-in). `languages`/`languagesOnly` mirror `<lr-code-block>`'s own\nfine-grained bundle-size controls. The very first render of any content is always plain\n(identical to today's output); highlighting arrives as an asynchronous upgrade one render later,\nonce shiki resolves. No highlighting is attempted while `streaming` is `true` — it applies once a\nstream settles, so there is no added per-chunk cost while content is still arriving.\n\nWhen `heading-anchors` is set, every rendered heading's slug (computed via the shared\nGitHub-slugger-style `Slugger`) is stamped as its `id`; `getHeadingTree()` computes that same\noutline on every parse regardless of `heading-anchors`, so a host can build a table of contents\neven while ids aren't in the DOM yet. `scrollToAnchor()` (from the adopted `DocumentAnchorTarget`\nmixin) resolves `fragment` anchors against that outline and `text-quote` anchors via\n`internal/text-quote.ts`'s shared scope/resolve helpers; `highlights` re-resolve by quote after\nevery render (never by node identity), so a highlight painted before a `streaming` update\nfinishes still finds its quote once the matching text arrives. Highlight painting uses\n`internal/text-highlights.ts`'s `acquireHighlightHandle()` -- the CSS Custom Highlight API where\nthe browser supports it (no DOM mutation at all), a `<mark>`-wrap fallback otherwise.\n\n`math` renders `$...$`/`$$...$$` TeX as MathML via the optional `katex` peer's\n`renderToString(tex, { output: 'mathml' })` -- MathML Core renders natively and accessibly in\nevergreen browsers with no extra stylesheet or webfont needing to cross the shadow boundary. A\nmissing `katex` peer renders the literal, unparsed TeX source (delimiters included) and fires one\n`lr-render-error`.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `blockquote` | Every rendered `<blockquote>`. |\n| `code-block` | Every rendered fenced/indented `<pre>`. |\n| `content` | The wrapper around the rendered (or plain-text fallback) output. |\n| `heading` | Every rendered `<h1>`–`<h6>` (shifted by `heading-offset`). |\n| `img` | Every rendered `<img>`. |\n| `inline-code` | Every rendered inline `<code>` span (backtick spans, not fenced blocks). |\n| `link` | Every rendered `<a>`. |\n| `list` | Every rendered `<ul>`/`<ol>`. |\n| `math` | A rendered inline or block math span (`data-display=\"inline\"\\|\"block\"`). |\n| `paragraph` | Every rendered `<p>`. |\n| `table` | Every rendered `<table>`.
|
|
8322
|
+
"value": "`<lr-markdown>` — sanitized Markdown-to-HTML rendering (GFM tables,\nfenced code blocks, links, blockquotes) built on the optional peer\ndependencies `marked` (parsing) and `dompurify` (sanitizing), both\nlazy-loaded via `markdown-loader.ts` on first connect.\n\nRendering never ships unsanitized or broken markup silently:\n- If `marked` fails to load, or throws while parsing malformed input, the\n component falls back to plain text (`white-space: pre-wrap`, no HTML\n parsing at all) and fires `lr-render-error`.\n- If `sanitize` is `true` (the default) and `dompurify` fails to load, the\n component *also* falls back to plain text + `lr-render-error` — it\n never renders marked's raw HTML output when sanitization was requested\n (or defaulted to) but is unavailable, even though `marked` itself loaded\n fine.\n- If `sanitize` is explicitly `false`, marked's raw output renders as-is\n regardless of whether `dompurify` is installed — the consumer opted out\n of sanitization, so `dompurify`'s absence is irrelevant to that path.\n\nThat same plain-text fallback rendering (`data-fallback` on the `content`\npart) is also, unconditionally and by default, a brief *transient* state on\nevery connect, not just a failure path: `connectedCallback()`'s dynamic\n`import()` of `marked`/`dompurify` (see `markdown-loader.ts`) is\nasynchronous, so the very first paint of any `<lr-markdown>` on a page\nshows plain text for at least one microtask — even when both peers are\nalready installed and load without error — until that import resolves and\na second render replaces it with the real Markdown output. Set\n`eager-load` to skip that window once the shared dependency cache is\nalready warm; see that property's doc for exactly what \"warm\" requires.\n\n`heading`/`code`/`blockquote`/`table`/`link`/`image` tokens are rendered\nthrough a `marked` renderer override that injects `part=\"...\"` attributes\ndirectly into the produced HTML — a single pass, not a second DOM walk\nafter insertion.\n\nFenced code blocks are syntax-highlighted via the same optional `shiki` peer `<lr-code-block>`\nuses (`highlightCode`, default `true` — a pure upgrade gated by whether `shiki` is installed at\nall, not a separate opt-in). `languages`/`languagesOnly` mirror `<lr-code-block>`'s own\nfine-grained bundle-size controls. The very first render of any content is always plain\n(identical to today's output); highlighting arrives as an asynchronous upgrade one render later,\nonce shiki resolves. No highlighting is attempted while `streaming` is `true` — it applies once a\nstream settles, so there is no added per-chunk cost while content is still arriving.\n\nWhen `heading-anchors` is set, every rendered heading's slug (computed via the shared\nGitHub-slugger-style `Slugger`) is stamped as its `id`; `getHeadingTree()` computes that same\noutline on every parse regardless of `heading-anchors`, so a host can build a table of contents\neven while ids aren't in the DOM yet. `scrollToAnchor()` (from the adopted `DocumentAnchorTarget`\nmixin) resolves `fragment` anchors against that outline and `text-quote` anchors via\n`internal/text-quote.ts`'s shared scope/resolve helpers; `highlights` re-resolve by quote after\nevery render (never by node identity), so a highlight painted before a `streaming` update\nfinishes still finds its quote once the matching text arrives. Highlight painting uses\n`internal/text-highlights.ts`'s `acquireHighlightHandle()` -- the CSS Custom Highlight API where\nthe browser supports it (no DOM mutation at all), a `<mark>`-wrap fallback otherwise.\n\n`math` renders `$...$`/`$$...$$` TeX as MathML via the optional `katex` peer's\n`renderToString(tex, { output: 'mathml' })` -- MathML Core renders natively and accessibly in\nevergreen browsers with no extra stylesheet or webfont needing to cross the shadow boundary. A\nmissing `katex` peer renders the literal, unparsed TeX source (delimiters included) and fires one\n`lr-render-error`.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `blockquote` | Every rendered `<blockquote>`. |\n| `code-block` | Every rendered fenced/indented `<pre>`. |\n| `content` | The wrapper around the rendered (or plain-text fallback) output. |\n| `heading` | Every rendered `<h1>`–`<h6>` (shifted by `heading-offset`). |\n| `img` | Every rendered `<img>`. |\n| `inline-code` | Every rendered inline `<code>` span (backtick spans, not fenced blocks). |\n| `link` | Every rendered `<a>`. |\n| `list` | Every rendered `<ul>`/`<ol>`. |\n| `math` | A rendered inline or block math span (`data-display=\"inline\"\\|\"block\"`). |\n| `paragraph` | Every rendered `<p>`. |\n| `table` | Every rendered `<table>`. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-markdown-font-mono` (default: `var(--lr-font-mono)`) — Monospace family for rendered `<code>` inside `content`."
|
|
8323
8323
|
},
|
|
8324
8324
|
"attributes": [
|
|
8325
8325
|
{
|
|
@@ -8526,7 +8526,7 @@
|
|
|
8526
8526
|
"name": "lr-media-card",
|
|
8527
8527
|
"description": {
|
|
8528
8528
|
"kind": "markdown",
|
|
8529
|
-
"value": "`<lr-media-card>` — a lightweight inline preview for one already-sent,\nalready-available attachment inside a rendered chat message body (e.g.\nplugged into `<lr-chat-message>`'s `attachments` slot, or embedded\ndirectly by a markdown/message renderer). Distinct from two other,\nsimilarly-named components in this family: `<lr-document-preview>` is a\nfuller viewer with header chrome and an async server-side-conversion\nstate machine (`status=\"converting\"`), and `<lr-attachment-chip>` is a\npre-send queued-file chip with upload progress. This component has\nneither concern — it only ever shows a `src` that's already final.\n\n**Format dispatch.** `kind` selects `'image'` (a plain `<img>`), `'video'`\n(a plain `<video controls>`), or `'file'` (an icon + filename chip with a\ndownload/open affordance). Leave `kind` unset to auto-detect from\n`mime-type` (`image/*` / `video/*` / anything else -> `'file'`);\nexplicitly setting `kind` always wins over detection.\n\n**Safe-URL checking.** `src` is validated before it's ever assigned to an\n`<img>`/`<video>` `src` or an `<a href>` — only `http:`/`https:`/`blob:`\n(plus `data:` for a *media* `src` only) or a scheme-relative/relative URL\nwith no scheme at all pass; anything else (`javascript:`, `vbscript:`,\nand similarly suspicious schemes) is rejected. `safeMediaSrc()` and\n`safeLinkHref()` share a platform-URL-based validator; their sink-specific\nallowlists explain why `data:` gets two different answers depending on\nwhere it is used. An `image`/`video` `kind` whose `src` fails the\nmedia-src check falls back to the generic file-chip rendering — this is\nthe \"plain preview unavailable state\" a dangerous URL degrades to, rather\nthan ever reaching a real media/anchor sink. That fallback also re-checks\n`src` against the stricter href allowlist for its own download affordance,\nbut since the href allowlist is a strict subset of the media-src allowlist,\nthat re-check can only ever change the outcome for a direct/auto-detected\n`kind=\"file\"` `src` — an `image`/`video` `src` that already failed the\nwider media-src check necessarily fails the narrower href check too, so\nthe fallback for those two kinds is always the plain, unclickable `span`.\n\n**The `video` case renders its open affordance separately from `base`.**\n`image`/`file` wrap their *entire* card in one native `<button>`/`<a>` —\nsafe because an `<img>` and a plain icon+text chip have no interactive\ncontent of their own to conflict with. A `<video controls>` element is\nitself interactive content (its own play/seek/volume controls), and HTML\nforbids nesting interactive content inside a `<button>`/`<a>` — doing so\nanyway would also make every click on the video's own controls bubble up\nand spuriously fire `lr-open`. So for `kind=\"video\"`, `base` is a plain,\nnon-interactive wrapper around `[part=\"media\"]`, and a small separate\n`[part=\"open-button\"]` (not one of this component's originally-scoped\nparts, added as the \"explicit view/open affordance\" the class is free to\nprovide) is the thing that actually fires `lr-open`.\n\n**Navigation.** This component never navigates on its own for `image`/\n`video` — activating the card only fires `lr-open`; a host decides what\n\"open\" means (a lightbox, a new tab, whatever). The `file`-chip case is\nthe one exception: when `src` passes the (stricter) href safety check, the\nchip is a real `<a href download>` so a bare drop-in still does something\nuseful — but `lr-open` fires first and is `cancelable`; a host that\ncalls `preventDefault()` on it suppresses that default download/open so it\ncan substitute its own handling instead.\n\n**Accessible action name.** The host `aria-label` maps to\n`accessibleLabel` and overrides the filename/alt/per-kind action name on\nwhichever internal element is actionable for the resolved kind. The name\nis therefore applied directly to the button or link across the shadow\nboundary; it does not replace the image alt text or the video control's\nown label.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The root interactive/container element. A `<button>` for `kind=\"image\"`, a plain wrapper `<div>` for `kind=\"video\"`, and either an `<a>` (when `src` passes the href safety check) or a plain `<span>` (otherwise) for the `file`-chip fallback. |\n| `file-icon` | The generic file glyph, shown only in the file-chip fallback. |\n| `filename` | The filename text, shown only in the file-chip fallback. |\n| `media` | The `<img>` or `<video>` element. |\n| `open-button` | The explicit \"open\" affordance rendered next to `[part=\"media\"]` for `kind=\"video\"` only — see the class doc.
|
|
8529
|
+
"value": "`<lr-media-card>` — a lightweight inline preview for one already-sent,\nalready-available attachment inside a rendered chat message body (e.g.\nplugged into `<lr-chat-message>`'s `attachments` slot, or embedded\ndirectly by a markdown/message renderer). Distinct from two other,\nsimilarly-named components in this family: `<lr-document-preview>` is a\nfuller viewer with header chrome and an async server-side-conversion\nstate machine (`status=\"converting\"`), and `<lr-attachment-chip>` is a\npre-send queued-file chip with upload progress. This component has\nneither concern — it only ever shows a `src` that's already final.\n\n**Format dispatch.** `kind` selects `'image'` (a plain `<img>`), `'video'`\n(a plain `<video controls>`), or `'file'` (an icon + filename chip with a\ndownload/open affordance). Leave `kind` unset to auto-detect from\n`mime-type` (`image/*` / `video/*` / anything else -> `'file'`);\nexplicitly setting `kind` always wins over detection.\n\n**Safe-URL checking.** `src` is validated before it's ever assigned to an\n`<img>`/`<video>` `src` or an `<a href>` — only `http:`/`https:`/`blob:`\n(plus `data:` for a *media* `src` only) or a scheme-relative/relative URL\nwith no scheme at all pass; anything else (`javascript:`, `vbscript:`,\nand similarly suspicious schemes) is rejected. `safeMediaSrc()` and\n`safeLinkHref()` share a platform-URL-based validator; their sink-specific\nallowlists explain why `data:` gets two different answers depending on\nwhere it is used. An `image`/`video` `kind` whose `src` fails the\nmedia-src check falls back to the generic file-chip rendering — this is\nthe \"plain preview unavailable state\" a dangerous URL degrades to, rather\nthan ever reaching a real media/anchor sink. That fallback also re-checks\n`src` against the stricter href allowlist for its own download affordance,\nbut since the href allowlist is a strict subset of the media-src allowlist,\nthat re-check can only ever change the outcome for a direct/auto-detected\n`kind=\"file\"` `src` — an `image`/`video` `src` that already failed the\nwider media-src check necessarily fails the narrower href check too, so\nthe fallback for those two kinds is always the plain, unclickable `span`.\n\n**The `video` case renders its open affordance separately from `base`.**\n`image`/`file` wrap their *entire* card in one native `<button>`/`<a>` —\nsafe because an `<img>` and a plain icon+text chip have no interactive\ncontent of their own to conflict with. A `<video controls>` element is\nitself interactive content (its own play/seek/volume controls), and HTML\nforbids nesting interactive content inside a `<button>`/`<a>` — doing so\nanyway would also make every click on the video's own controls bubble up\nand spuriously fire `lr-open`. So for `kind=\"video\"`, `base` is a plain,\nnon-interactive wrapper around `[part=\"media\"]`, and a small separate\n`[part=\"open-button\"]` (not one of this component's originally-scoped\nparts, added as the \"explicit view/open affordance\" the class is free to\nprovide) is the thing that actually fires `lr-open`.\n\n**Navigation.** This component never navigates on its own for `image`/\n`video` — activating the card only fires `lr-open`; a host decides what\n\"open\" means (a lightbox, a new tab, whatever). The `file`-chip case is\nthe one exception: when `src` passes the (stricter) href safety check, the\nchip is a real `<a href download>` so a bare drop-in still does something\nuseful — but `lr-open` fires first and is `cancelable`; a host that\ncalls `preventDefault()` on it suppresses that default download/open so it\ncan substitute its own handling instead.\n\n**Accessible action name.** The host `aria-label` maps to\n`accessibleLabel` and overrides the filename/alt/per-kind action name on\nwhichever internal element is actionable for the resolved kind. The name\nis therefore applied directly to the button or link across the shadow\nboundary; it does not replace the image alt text or the video control's\nown label.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The root interactive/container element. A `<button>` for `kind=\"image\"`, a plain wrapper `<div>` for `kind=\"video\"`, and either an `<a>` (when `src` passes the href safety check) or a plain `<span>` (otherwise) for the `file`-chip fallback. |\n| `file-icon` | The generic file glyph, shown only in the file-chip fallback. |\n| `filename` | The filename text, shown only in the file-chip fallback. |\n| `media` | The `<img>` or `<video>` element. |\n| `open-button` | The explicit \"open\" affordance rendered next to `[part=\"media\"]` for `kind=\"video\"` only — see the class doc. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-media-card-max-height` (default: `var(--lr-size-20rem)`) — Cap on the block size of the `<img>`/`<video>` in `[part=\"media\"]`."
|
|
8530
8530
|
},
|
|
8531
8531
|
"attributes": [
|
|
8532
8532
|
{
|
|
@@ -9285,7 +9285,7 @@
|
|
|
9285
9285
|
"name": "lr-number-input",
|
|
9286
9286
|
"description": {
|
|
9287
9287
|
"kind": "markdown",
|
|
9288
|
-
"value": "`<lr-number-input>` — a numeric-input alias with the complete `lr-input`\nform, validation, and native editing contract.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| `end` | Adornment after the native input and built-in actions. |\n| `error` | Custom error content. |\n| `hint` | Custom hint content. |\n| `label` | Custom label content. |\n| `start` | Adornment before the native input. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `clear-button` | The clear action, rendered for non-empty clearable text/search inputs. |\n| `end` | Wrapper around the `end` adornment slot. |\n| `error` | The error message. |\n| `form-control` | The outer wrapper around label, input, error and hint. |\n| `form-control-label` | The `<label>` element. |\n| `hint` | The hint message. |\n| `input` | The native `<input>` element. |\n| `input-wrapper` | The row wrapping the native input and the password-toggle button. |\n| `password-toggle` | The show/hide-password button, present only when `type=\"password\"`. |\n| `start` | Wrapper around the `start` adornment slot. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-input-control-min-height` — Outer control height floor, scaled by `size`."
|
|
9288
|
+
"value": "`<lr-number-input>` — a numeric-input alias with the complete `lr-input`\nform, validation, and native editing contract.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| `end` | Adornment after the native input and built-in actions. |\n| `error` | Custom error content. |\n| `hint` | Custom hint content. |\n| `label` | Custom label content. |\n| `start` | Adornment before the native input. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `clear-button` | The clear action, rendered for non-empty clearable text/search inputs. |\n| `end` | Wrapper around the `end` adornment slot. |\n| `error` | The error message. |\n| `form-control` | The outer wrapper around label, input, error and hint. |\n| `form-control-label` | The `<label>` element. |\n| `hint` | The hint message. |\n| `input` | The native `<input>` element. |\n| `input-wrapper` | The row wrapping the native input and the password-toggle button. |\n| `password-toggle` | The show/hide-password button, present only when `type=\"password\"`. |\n| `start` | Wrapper around the `start` adornment slot. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-input-control-min-height` — Outer control height floor, scaled by `size`.\n- `--lr-input-padding-block` — Block padding of the native input, scaled by `size`.\n- `--lr-input-padding-inline` — Inline padding of the control row, scaled by `size`.\n- `--lr-input-font-size` — Font size of the native input, scaled by `size`."
|
|
9289
9289
|
},
|
|
9290
9290
|
"attributes": [
|
|
9291
9291
|
{
|
|
@@ -9369,14 +9369,14 @@
|
|
|
9369
9369
|
"name": "max",
|
|
9370
9370
|
"description": {
|
|
9371
9371
|
"kind": "markdown",
|
|
9372
|
-
"value": "
|
|
9372
|
+
"value": "Upper counterpart of `min`, with the same parsing and the same default of `undefined`.\n\nType: `number | string | undefined`"
|
|
9373
9373
|
}
|
|
9374
9374
|
},
|
|
9375
9375
|
{
|
|
9376
9376
|
"name": "min",
|
|
9377
9377
|
"description": {
|
|
9378
9378
|
"kind": "markdown",
|
|
9379
|
-
"value": "`type=\"number\"` only — forwarded to the internal native `<input>`'s own `min`/`max`/`step`\nand consulted by that same native input's constraint validation (see `updateValidity()`).\n\nType: `number | undefined`"
|
|
9379
|
+
"value": "`type=\"number\"` only — forwarded to the internal native `<input>`'s own `min`/`max`/`step`\nand consulted by that same native input's constraint validation (see `updateValidity()`).\nDefaults to `undefined` (no lower bound). The `min` attribute is parsed as a number here; the\ndeclared type also admits a string so a subclass bound to a non-numeric native input type can\nnarrow the attribute parsing to that type's own literal form (`<lr-time-input>`'s `09:00`)\nwithout redeclaring the whole property surface.\n\nType: `number | string | undefined`"
|
|
9380
9380
|
}
|
|
9381
9381
|
},
|
|
9382
9382
|
{
|
|
@@ -9434,7 +9434,7 @@
|
|
|
9434
9434
|
"name": "lr-option",
|
|
9435
9435
|
"description": {
|
|
9436
9436
|
"kind": "markdown",
|
|
9437
|
-
"value": "`<lr-option>`
|
|
9437
|
+
"value": "`<lr-option>` — a selectable option for `<lr-combobox>`.\nMirrors `<wa-option>`. Acts as the data source; the combobox renders the\ninteractive rows in its own shadow root and filters/caps them.\n\nThe label is the element's text content (or an explicit `label` attribute)."
|
|
9438
9438
|
},
|
|
9439
9439
|
"attributes": [
|
|
9440
9440
|
{
|
|
@@ -9870,7 +9870,7 @@
|
|
|
9870
9870
|
"name": "lr-pie-chart",
|
|
9871
9871
|
"description": {
|
|
9872
9872
|
"kind": "markdown",
|
|
9873
|
-
"value": "`<lr-pie-chart>` — `<lr-chart>` with `type` locked to `\"pie\"`. Single-series:\none `Series` with `data: number[]` and `color: string[]` as the slice palette.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| `center` | Optional overlay content positioned at the chart area's center. Useful for doughnut and pie totals. |\n| `data-table` | An optional consumer-provided accessible table alternative. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The chart wrapper. |\n| `canvas` | The Chart.js canvas. |\n| `center` | The chart-area-centered overlay wrapper for the `center` slot. |\n| `data-table` | The optional generated or slotted data table. |\n| `description` | The accessible chart summary. |\n| `reset-zoom-button` | The reset-zoom control when zoom is active.
|
|
9873
|
+
"value": "`<lr-pie-chart>` — `<lr-chart>` with `type` locked to `\"pie\"`. Single-series:\none `Series` with `data: number[]` and `color: string[]` as the slice palette.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| `center` | Optional overlay content positioned at the chart area's center. Useful for doughnut and pie totals. |\n| `data-table` | An optional consumer-provided accessible table alternative. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The chart wrapper. |\n| `canvas` | The Chart.js canvas. |\n| `center` | The chart-area-centered overlay wrapper for the `center` slot. |\n| `data-table` | The optional generated or slotted data table. |\n| `description` | The accessible chart summary. |\n| `reset-zoom-button` | The reset-zoom control when zoom is active. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-chart-height` (default: `var(--lr-size-280px)`) — The host's `block-size`. Set on the host element from the `height` property on every change (custom properties only cascade downward, so it cannot be set from inside the shadow root); a host-level override is overwritten the next time `height` changes.\n- `--lr-chart-grid-color` (default: `var(--lr-color-border)`) — Grid-line color. Resolved via `getComputedStyle` on every draw (Chart.js paints to canvas and cannot consume `var()`).\n- `--lr-chart-tick-color` (default: `var(--lr-color-text-quiet)`) — Axis tick-label color; also used for the `xLabel`/`yLabel`/`y2Label` axis-title text (there is no separate title-color token). Resolved via `getComputedStyle` on every draw.\n- `--lr-chart-legend-color` (default: `var(--lr-color-text)`) — Legend label color. Resolved via `getComputedStyle` on every draw.\n- `--lr-chart-tooltip-bg` (default: `var(--lr-color-surface)`) — Tooltip background color. Resolved via `getComputedStyle` on every draw.\n- `--lr-chart-tooltip-text` (default: `var(--lr-color-text)`) — Tooltip text color. Resolved via `getComputedStyle` on every draw."
|
|
9874
9874
|
},
|
|
9875
9875
|
"attributes": [
|
|
9876
9876
|
{
|
|
@@ -9991,7 +9991,7 @@
|
|
|
9991
9991
|
"name": "lr-playback",
|
|
9992
9992
|
"description": {
|
|
9993
9993
|
"kind": "markdown",
|
|
9994
|
-
"value": "`<lr-playback>` — steps an index through `[0, length)` on a fixed\ninterval (play/pause), the common building block behind ad-hoc\nplay-timers in time-series dashboards.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The playback controls wrapper. |\n| `play-button` | The play/pause button. |\n| `slider` | The playback position slider.
|
|
9994
|
+
"value": "`<lr-playback>` — steps an index through `[0, length)` on a fixed\ninterval (play/pause), the common building block behind ad-hoc\nplay-timers in time-series dashboards.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The playback controls wrapper. |\n| `play-button` | The play/pause button. |\n| `slider` | The playback position slider. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-playback-icon-size` (default: `calc(var(--lr-icon-button-size) * 0.35)`) — Font size of the play/pause glyph, derived from the shared icon-button hit-target size."
|
|
9995
9995
|
},
|
|
9996
9996
|
"attributes": [
|
|
9997
9997
|
{
|
|
@@ -10049,7 +10049,7 @@
|
|
|
10049
10049
|
"name": "lr-polar-area-chart",
|
|
10050
10050
|
"description": {
|
|
10051
10051
|
"kind": "markdown",
|
|
10052
|
-
"value": "`<lr-polar-area-chart>` — `<lr-chart>` with `type` locked to `\"polarArea\"`.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| `center` | Optional overlay content positioned at the chart area's center. Useful for doughnut and pie totals. |\n| `data-table` | An optional consumer-provided accessible table alternative. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The chart wrapper. |\n| `canvas` | The Chart.js canvas. |\n| `center` | The chart-area-centered overlay wrapper for the `center` slot. |\n| `data-table` | The optional generated or slotted data table. |\n| `description` | The accessible chart summary. |\n| `reset-zoom-button` | The reset-zoom control when zoom is active.
|
|
10052
|
+
"value": "`<lr-polar-area-chart>` — `<lr-chart>` with `type` locked to `\"polarArea\"`.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| `center` | Optional overlay content positioned at the chart area's center. Useful for doughnut and pie totals. |\n| `data-table` | An optional consumer-provided accessible table alternative. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The chart wrapper. |\n| `canvas` | The Chart.js canvas. |\n| `center` | The chart-area-centered overlay wrapper for the `center` slot. |\n| `data-table` | The optional generated or slotted data table. |\n| `description` | The accessible chart summary. |\n| `reset-zoom-button` | The reset-zoom control when zoom is active. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-chart-height` (default: `var(--lr-size-280px)`) — The host's `block-size`. Set on the host element from the `height` property on every change (custom properties only cascade downward, so it cannot be set from inside the shadow root); a host-level override is overwritten the next time `height` changes.\n- `--lr-chart-grid-color` (default: `var(--lr-color-border)`) — Grid-line color. Resolved via `getComputedStyle` on every draw (Chart.js paints to canvas and cannot consume `var()`).\n- `--lr-chart-tick-color` (default: `var(--lr-color-text-quiet)`) — Axis tick-label color; also used for the `xLabel`/`yLabel`/`y2Label` axis-title text (there is no separate title-color token). Resolved via `getComputedStyle` on every draw.\n- `--lr-chart-legend-color` (default: `var(--lr-color-text)`) — Legend label color. Resolved via `getComputedStyle` on every draw.\n- `--lr-chart-tooltip-bg` (default: `var(--lr-color-surface)`) — Tooltip background color. Resolved via `getComputedStyle` on every draw.\n- `--lr-chart-tooltip-text` (default: `var(--lr-color-text)`) — Tooltip text color. Resolved via `getComputedStyle` on every draw."
|
|
10053
10053
|
},
|
|
10054
10054
|
"attributes": [
|
|
10055
10055
|
{
|
|
@@ -10377,7 +10377,7 @@
|
|
|
10377
10377
|
"name": "lr-progress-ring",
|
|
10378
10378
|
"description": {
|
|
10379
10379
|
"kind": "markdown",
|
|
10380
|
-
"value": "`<lr-progress-ring>` — a circular determinate or indeterminate progress indicator.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | Optional center label. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The progress wrapper. |\n| `indicator` | The SVG indicator. |\n| `label` | The center label. |\n| `track` | The SVG track.
|
|
10380
|
+
"value": "`<lr-progress-ring>` — a circular determinate or indeterminate progress indicator.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | Optional center label. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The progress wrapper. |\n| `indicator` | The SVG indicator. |\n| `label` | The center label. |\n| `track` | The SVG track. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-progress-ring-size` (default: `var(--lr-size-2-5rem)`) — Outer diameter of the ring."
|
|
10381
10381
|
},
|
|
10382
10382
|
"attributes": [
|
|
10383
10383
|
{
|
|
@@ -10444,7 +10444,7 @@
|
|
|
10444
10444
|
"name": "lr-push-to-talk",
|
|
10445
10445
|
"description": {
|
|
10446
10446
|
"kind": "markdown",
|
|
10447
|
-
"value": "`<lr-push-to-talk>` — a mic capture button owning the full `getUserMedia` + `MediaRecorder`\nlifecycle: permission request, recording, optional chunked streaming, teardown. The one place in\nthis library that touches the microphone — no SDK, no LiveKit/ElevenLabs import, native browser\nAPIs only.\n\n`mode=\"hold\"` (the default) is a press-and-hold gesture: pointerdown/Enter-or-Space-keydown starts,\npointerup/keyup/blur stops. `mode=\"toggle\"` is click-to-start/click-to-stop with `aria-pressed`.\nEscape cancels the in-progress take in either mode (discarding it — `lr-record-cancel`, never\n`lr-record-stop`). `state` is a read-only lifecycle reflected to the `data-state` attribute (not\n`state`, avoiding any ambiguity with a native form-control `state`): `'idle' | 'requesting' |\n'denied' | 'recording' | 'error'`. A host-level `aria-label` (set on `<lr-push-to-talk>` itself)\noverrides the computed trigger label.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| `icon` | Replaces the default mic glyph. |\n| `recording-icon` | Replaces the default recording-state pulse glyph. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `icon` | Wrapper around the `icon` slot / default mic glyph. |\n| `pulse` | Wrapper around the `recording-icon` slot / default pulse glyph, rendered only while recording. |\n| `status` | Visible status text for the `requesting`/`denied`/`error`/unsupported states. |\n| `timer` | The `M:SS` elapsed-time readout, rendered only while recording and `show-timer`. |\n| `trigger` | The capture button.
|
|
10447
|
+
"value": "`<lr-push-to-talk>` — a mic capture button owning the full `getUserMedia` + `MediaRecorder`\nlifecycle: permission request, recording, optional chunked streaming, teardown. The one place in\nthis library that touches the microphone — no SDK, no LiveKit/ElevenLabs import, native browser\nAPIs only.\n\n`mode=\"hold\"` (the default) is a press-and-hold gesture: pointerdown/Enter-or-Space-keydown starts,\npointerup/keyup/blur stops. `mode=\"toggle\"` is click-to-start/click-to-stop with `aria-pressed`.\nEscape cancels the in-progress take in either mode (discarding it — `lr-record-cancel`, never\n`lr-record-stop`). `state` is a read-only lifecycle reflected to the `data-state` attribute (not\n`state`, avoiding any ambiguity with a native form-control `state`): `'idle' | 'requesting' |\n'denied' | 'recording' | 'error'`. A host-level `aria-label` (set on `<lr-push-to-talk>` itself)\noverrides the computed trigger label.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| `icon` | Replaces the default mic glyph. |\n| `recording-icon` | Replaces the default recording-state pulse glyph. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `icon` | Wrapper around the `icon` slot / default mic glyph. |\n| `pulse` | Wrapper around the `recording-icon` slot / default pulse glyph, rendered only while recording. |\n| `status` | Visible status text for the `requesting`/`denied`/`error`/unsupported states. |\n| `timer` | The `M:SS` elapsed-time readout, rendered only while recording and `show-timer`. |\n| `trigger` | The capture button. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-push-to-talk-size` (default: `var(--lr-size-3rem)`) — Inline and block size of the circular `trigger` button."
|
|
10448
10448
|
},
|
|
10449
10449
|
"attributes": [
|
|
10450
10450
|
{
|
|
@@ -10590,7 +10590,7 @@
|
|
|
10590
10590
|
"name": "lr-radar-chart",
|
|
10591
10591
|
"description": {
|
|
10592
10592
|
"kind": "markdown",
|
|
10593
|
-
"value": "`<lr-radar-chart>` — `<lr-chart>` with `type` locked to `\"radar\"`.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| `center` | Optional overlay content positioned at the chart area's center. Useful for doughnut and pie totals. |\n| `data-table` | An optional consumer-provided accessible table alternative. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The chart wrapper. |\n| `canvas` | The Chart.js canvas. |\n| `center` | The chart-area-centered overlay wrapper for the `center` slot. |\n| `data-table` | The optional generated or slotted data table. |\n| `description` | The accessible chart summary. |\n| `reset-zoom-button` | The reset-zoom control when zoom is active.
|
|
10593
|
+
"value": "`<lr-radar-chart>` — `<lr-chart>` with `type` locked to `\"radar\"`.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| `center` | Optional overlay content positioned at the chart area's center. Useful for doughnut and pie totals. |\n| `data-table` | An optional consumer-provided accessible table alternative. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The chart wrapper. |\n| `canvas` | The Chart.js canvas. |\n| `center` | The chart-area-centered overlay wrapper for the `center` slot. |\n| `data-table` | The optional generated or slotted data table. |\n| `description` | The accessible chart summary. |\n| `reset-zoom-button` | The reset-zoom control when zoom is active. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-chart-height` (default: `var(--lr-size-280px)`) — The host's `block-size`. Set on the host element from the `height` property on every change (custom properties only cascade downward, so it cannot be set from inside the shadow root); a host-level override is overwritten the next time `height` changes.\n- `--lr-chart-grid-color` (default: `var(--lr-color-border)`) — Grid-line color. Resolved via `getComputedStyle` on every draw (Chart.js paints to canvas and cannot consume `var()`).\n- `--lr-chart-tick-color` (default: `var(--lr-color-text-quiet)`) — Axis tick-label color; also used for the `xLabel`/`yLabel`/`y2Label` axis-title text (there is no separate title-color token). Resolved via `getComputedStyle` on every draw.\n- `--lr-chart-legend-color` (default: `var(--lr-color-text)`) — Legend label color. Resolved via `getComputedStyle` on every draw.\n- `--lr-chart-tooltip-bg` (default: `var(--lr-color-surface)`) — Tooltip background color. Resolved via `getComputedStyle` on every draw.\n- `--lr-chart-tooltip-text` (default: `var(--lr-color-text)`) — Tooltip text color. Resolved via `getComputedStyle` on every draw."
|
|
10594
10594
|
},
|
|
10595
10595
|
"attributes": [
|
|
10596
10596
|
{
|
|
@@ -11018,7 +11018,7 @@
|
|
|
11018
11018
|
"name": "lr-responsive-panel",
|
|
11019
11019
|
"description": {
|
|
11020
11020
|
"kind": "markdown",
|
|
11021
|
-
"value": "`<lr-responsive-panel>` — the same slotted content either docked inline\nin the page's normal layout flow (desktop) or presented as a full-screen/\nbottom-sheet overlay (mobile), depending on viewport width. Typical uses:\na settings panel or a conversation-history sidebar that's a permanent\ndocked pane on a wide screen but a modal on a phone.\n\nBreakpoint detection uses `matchMedia('(max-width: ' + mobileBreakpoint +\n')')`, re-evaluated live while connected -- resizing/rotating a device\nthat crosses the breakpoint while `mode=\"auto\"` (the default) updates the\neffective presentation without unmounting or re-creating the slotted\ncontent: inline and overlay presentation share the exact same shadow DOM\nstructure (only a css class, and the overlay-only `role`/`aria-modal`\nattributes and backdrop element, differ), so lit-html's diffing keeps\n`[part=\"body\"]` and its `<slot>` as the same DOM node across the\ntransition -- scroll position and focus inside the slotted content survive\nit for free. When an open inline panel becomes modal, focus already inside\nis preserved and outside focus moves to the first available target. Closing\nstill returns to the opener captured by the original inline open.\n\nThe overlay presentation uses the library's shared overlay coordinator for\nfocus trapping, Escape/backdrop dismissal, inerting, and stack ordering,\nwhile retaining this component's own responsive rendering and close event.\n\nAccessible name (overlay presentation only -- the inline presentation has\nno dialog semantics to name), in priority order: if the host element itself\nhas an `aria-label` attribute set, its value wins outright, overriding\nevery source below -- the standard ARIA convention for a consumer that\nwants full control over the announced name, matching lr-dialog's\n`accessibleLabel` pattern. Otherwise `label`, when set, is used verbatim.\nWhen both are empty, this falls back to the `header` slot's content -- a\nheading element (`h1`–`h6` or `[role=\"heading\"]`) among the slotted header\ncontent wins if present, otherwise the header slot's full text content is\nused, mirroring lr-dialog's `detectHeading()`/`headingText` fallback (see\ndialog.ts's module doc for why this uses `aria-label`, a copied string,\nrather than `aria-labelledby`: the header content is light DOM while\n`[part=\"panel\"]` lives in this element's shadow tree, and an ID-reference\nattribute can't resolve across that boundary). A panel opened without a\nhost `aria-label`, `label`, or header content still renders `role=\"dialog\"`\nwith no accessible name -- set one of those to avoid that.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | The panel body. |\n| `footer` | Optional footer content (e.g. action buttons), rendered below the body. |\n| `header` | Optional header content, rendered above the body. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `backdrop` | The full-viewport scrim behind the panel -- only rendered in the overlay presentation. |\n| `base` | The root wrapper; `display: none` while closed, positioned `fixed` while open and in the overlay presentation. |\n| `body` | The wrapper around the default slot. |\n| `footer` | The wrapper around the `footer` slot. |\n| `header` | The wrapper around the `header` slot. |\n| `panel` | The panel surface itself (`role=\"dialog\"` while open and in the overlay presentation).
|
|
11021
|
+
"value": "`<lr-responsive-panel>` — the same slotted content either docked inline\nin the page's normal layout flow (desktop) or presented as a full-screen/\nbottom-sheet overlay (mobile), depending on viewport width. Typical uses:\na settings panel or a conversation-history sidebar that's a permanent\ndocked pane on a wide screen but a modal on a phone.\n\nBreakpoint detection uses `matchMedia('(max-width: ' + mobileBreakpoint +\n')')`, re-evaluated live while connected -- resizing/rotating a device\nthat crosses the breakpoint while `mode=\"auto\"` (the default) updates the\neffective presentation without unmounting or re-creating the slotted\ncontent: inline and overlay presentation share the exact same shadow DOM\nstructure (only a css class, and the overlay-only `role`/`aria-modal`\nattributes and backdrop element, differ), so lit-html's diffing keeps\n`[part=\"body\"]` and its `<slot>` as the same DOM node across the\ntransition -- scroll position and focus inside the slotted content survive\nit for free. When an open inline panel becomes modal, focus already inside\nis preserved and outside focus moves to the first available target. Closing\nstill returns to the opener captured by the original inline open.\n\nThe overlay presentation uses the library's shared overlay coordinator for\nfocus trapping, Escape/backdrop dismissal, inerting, and stack ordering,\nwhile retaining this component's own responsive rendering and close event.\n\nAccessible name (overlay presentation only -- the inline presentation has\nno dialog semantics to name), in priority order: if the host element itself\nhas an `aria-label` attribute set, its value wins outright, overriding\nevery source below -- the standard ARIA convention for a consumer that\nwants full control over the announced name, matching lr-dialog's\n`accessibleLabel` pattern. Otherwise `label`, when set, is used verbatim.\nWhen both are empty, this falls back to the `header` slot's content -- a\nheading element (`h1`–`h6` or `[role=\"heading\"]`) among the slotted header\ncontent wins if present, otherwise the header slot's full text content is\nused, mirroring lr-dialog's `detectHeading()`/`headingText` fallback (see\ndialog.ts's module doc for why this uses `aria-label`, a copied string,\nrather than `aria-labelledby`: the header content is light DOM while\n`[part=\"panel\"]` lives in this element's shadow tree, and an ID-reference\nattribute can't resolve across that boundary). A panel opened without a\nhost `aria-label`, `label`, or header content still renders `role=\"dialog\"`\nwith no accessible name -- set one of those to avoid that.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | The panel body. |\n| `footer` | Optional footer content (e.g. action buttons), rendered below the body. |\n| `header` | Optional header content, rendered above the body. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `backdrop` | The full-viewport scrim behind the panel -- only rendered in the overlay presentation. |\n| `base` | The root wrapper; `display: none` while closed, positioned `fixed` while open and in the overlay presentation. |\n| `body` | The wrapper around the default slot. |\n| `footer` | The wrapper around the `footer` slot. |\n| `header` | The wrapper around the `header` slot. |\n| `panel` | The panel surface itself (`role=\"dialog\"` while open and in the overlay presentation). |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-responsive-panel-overlay-color` (default: `var(--lr-color-overlay)`) — The overlay presentation's scrim color, applied to `[part=\"backdrop\"]`."
|
|
11022
11022
|
},
|
|
11023
11023
|
"attributes": [
|
|
11024
11024
|
{
|
|
@@ -11318,7 +11318,7 @@
|
|
|
11318
11318
|
"name": "lr-retrieval-trace",
|
|
11319
11319
|
"description": {
|
|
11320
11320
|
"kind": "markdown",
|
|
11321
|
-
"value": "`<lr-retrieval-trace>` — a retrieval pipeline's stage timeline (query rewriting, embedding,\nretrieval, reranking, filtering), rendered through `<lr-span-waterfall>`'s existing\ntime-scaled bar rendering, plus a disclosure list below it exposing each stage's evidence:\nfree-form text, retrieved/reranked/filtered chunks via `<lr-chunk-inspector>`, and/or arbitrary\nstage metadata. Never fetches, ranks, or computes retrieval results itself.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The root wrapper. |\n| `evidence-body` | A stage's evidence content wrapper, hidden while collapsed. |\n| `evidence-list` | The wrapper around every stage's evidence disclosure row. Omitted when no stage has evidence. |\n| `evidence-metadata` | A stage's key/value metadata list (a `<dl>`). |\n| `evidence-metadata-key` | One metadata entry's key (a `<dt>`). |\n| `evidence-metadata-value` | One metadata entry's value (a `<dd>`). |\n| `evidence-row` | One stage's evidence disclosure row. Omitted for a stage with no evidence. |\n| `evidence-text` | A stage's free-form text evidence. |\n| `evidence-toggle` | A stage's evidence disclosure `<button>`. |\n| `evidence-toggle-icon` | The disclosure button's chevron glyph. |\n| `timeline` | The internal `<lr-span-waterfall>` element. |"
|
|
11321
|
+
"value": "`<lr-retrieval-trace>` — a retrieval pipeline's stage timeline (query rewriting, embedding,\nretrieval, reranking, filtering), rendered through `<lr-span-waterfall>`'s existing\ntime-scaled bar rendering, plus a disclosure list below it exposing each stage's evidence:\nfree-form text, retrieved/reranked/filtered chunks via `<lr-chunk-inspector>`, and/or arbitrary\nstage metadata. Never fetches, ranks, or computes retrieval results itself.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The root wrapper. |\n| `evidence-body` | A stage's evidence content wrapper, hidden while collapsed. |\n| `evidence-list` | The wrapper around every stage's evidence disclosure row. Omitted when no stage has evidence. |\n| `evidence-metadata` | A stage's key/value metadata list (a `<dl>`). |\n| `evidence-metadata-key` | One metadata entry's key (a `<dt>`). |\n| `evidence-metadata-row` | One metadata entry's `<dt>`/`<dd>` pair wrapper, inside `evidence-metadata`. |\n| `evidence-metadata-value` | One metadata entry's value (a `<dd>`). |\n| `evidence-row` | One stage's evidence disclosure row. Omitted for a stage with no evidence. |\n| `evidence-text` | A stage's free-form text evidence. |\n| `evidence-toggle` | A stage's evidence disclosure `<button>`. |\n| `evidence-toggle-icon` | The disclosure button's chevron glyph. |\n| `timeline` | The internal `<lr-span-waterfall>` element. |"
|
|
11322
11322
|
},
|
|
11323
11323
|
"attributes": [
|
|
11324
11324
|
{
|
|
@@ -11399,7 +11399,7 @@
|
|
|
11399
11399
|
"name": "lr-scatter-chart",
|
|
11400
11400
|
"description": {
|
|
11401
11401
|
"kind": "markdown",
|
|
11402
|
-
"value": "`<lr-scatter-chart>` — `<lr-chart>` with `type` locked to `\"scatter\"`. Feed\npoints via `Series.points`.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| `center` | Optional overlay content positioned at the chart area's center. Useful for doughnut and pie totals. |\n| `data-table` | An optional consumer-provided accessible table alternative. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The chart wrapper. |\n| `canvas` | The Chart.js canvas. |\n| `center` | The chart-area-centered overlay wrapper for the `center` slot. |\n| `data-table` | The optional generated or slotted data table. |\n| `description` | The accessible chart summary. |\n| `reset-zoom-button` | The reset-zoom control when zoom is active.
|
|
11402
|
+
"value": "`<lr-scatter-chart>` — `<lr-chart>` with `type` locked to `\"scatter\"`. Feed\npoints via `Series.points`.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| `center` | Optional overlay content positioned at the chart area's center. Useful for doughnut and pie totals. |\n| `data-table` | An optional consumer-provided accessible table alternative. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The chart wrapper. |\n| `canvas` | The Chart.js canvas. |\n| `center` | The chart-area-centered overlay wrapper for the `center` slot. |\n| `data-table` | The optional generated or slotted data table. |\n| `description` | The accessible chart summary. |\n| `reset-zoom-button` | The reset-zoom control when zoom is active. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-chart-height` (default: `var(--lr-size-280px)`) — The host's `block-size`. Set on the host element from the `height` property on every change (custom properties only cascade downward, so it cannot be set from inside the shadow root); a host-level override is overwritten the next time `height` changes.\n- `--lr-chart-grid-color` (default: `var(--lr-color-border)`) — Grid-line color. Resolved via `getComputedStyle` on every draw (Chart.js paints to canvas and cannot consume `var()`).\n- `--lr-chart-tick-color` (default: `var(--lr-color-text-quiet)`) — Axis tick-label color; also used for the `xLabel`/`yLabel`/`y2Label` axis-title text (there is no separate title-color token). Resolved via `getComputedStyle` on every draw.\n- `--lr-chart-legend-color` (default: `var(--lr-color-text)`) — Legend label color. Resolved via `getComputedStyle` on every draw.\n- `--lr-chart-tooltip-bg` (default: `var(--lr-color-surface)`) — Tooltip background color. Resolved via `getComputedStyle` on every draw.\n- `--lr-chart-tooltip-text` (default: `var(--lr-color-text)`) — Tooltip text color. Resolved via `getComputedStyle` on every draw."
|
|
11403
11403
|
},
|
|
11404
11404
|
"attributes": [
|
|
11405
11405
|
{
|
|
@@ -11520,7 +11520,7 @@
|
|
|
11520
11520
|
"name": "lr-scroller",
|
|
11521
11521
|
"description": {
|
|
11522
11522
|
"kind": "markdown",
|
|
11523
|
-
"value": "`<lr-scroller>` — a responsive overflow surface with optional previous\nand next controls. Content remains in the default slot, so cards, tabs, and\nany consumer-owned interactive elements retain their own semantics.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | Scrollable content. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The overall scroller layout. |\n| `content` | The slotted content wrapper. |\n| `control` | Shared part on both `previous` and `next`. |\n| `next` | The next/end control. |\n| `next-glyph` | The chevron glyph inside `next`, mirrored under RTL. |\n| `previous` | The previous/start control. |\n| `previous-glyph` | The chevron glyph inside `previous`, mirrored under RTL. |\n| `viewport` | The native scroll container. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-scroller-control-size` — Control size.\n- `--lr-scroller-min-block-size` — Minimum vertical scroller size."
|
|
11523
|
+
"value": "`<lr-scroller>` — a responsive overflow surface with optional previous\nand next controls. Content remains in the default slot, so cards, tabs, and\nany consumer-owned interactive elements retain their own semantics.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | Scrollable content. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The overall scroller layout. |\n| `content` | The slotted content wrapper. |\n| `control` | Shared part on both `previous` and `next`. |\n| `next` | The next/end control. |\n| `next-glyph` | The chevron glyph inside `next`, mirrored under RTL. |\n| `previous` | The previous/start control. |\n| `previous-glyph` | The chevron glyph inside `previous`, mirrored under RTL. |\n| `viewport` | The native scroll container. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-scroller-control-size` (default: `var(--lr-size-2rem)`) — Control size.\n- `--lr-scroller-min-block-size` (default: `var(--lr-size-10rem)`) — Minimum vertical scroller size."
|
|
11524
11524
|
},
|
|
11525
11525
|
"attributes": [
|
|
11526
11526
|
{
|
|
@@ -11571,7 +11571,7 @@
|
|
|
11571
11571
|
"name": "lr-segmented",
|
|
11572
11572
|
"description": {
|
|
11573
11573
|
"kind": "markdown",
|
|
11574
|
-
"value": "`<lr-segmented>` — a single-select button row with the WAI-ARIA APG `radiogroup` contract\nbuilt in: `role=\"radiogroup\"`/`role=\"radio\"`, roving tabindex, automatic activation (click or\narrow-key move both select immediately, like a native radio group), cyclic Arrow/Home/End\nnavigation among non-disabled items. First-party invention --\n\"choose exactly one of N labeled options, rendered as a button row\" is ubiquitous\nsettings/filter-panel UI. Supports the same `2xs`-`xl` compact-form-control `size` scale as\n`<lr-select>`/`<lr-combobox>`/`<lr-input>`, so it can sit flush beside those controls in a\ntoolbar at a matching height.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The `role=\"radiogroup\"` root. |\n| `segment` | A single `role=\"radio\"` button. |\n| `segment-icon` | Optional leading visual supplied by the item's `icon` field; content may have a natural aspect ratio and is not restricted to a square icon. |\n| `segment-label` | The segment's label text. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-scroll-fade-size` (default: `2rem`) — Width of the static fade at each horizontal scroll edge."
|
|
11574
|
+
"value": "`<lr-segmented>` — a single-select button row with the WAI-ARIA APG `radiogroup` contract\nbuilt in: `role=\"radiogroup\"`/`role=\"radio\"`, roving tabindex, automatic activation (click or\narrow-key move both select immediately, like a native radio group), cyclic Arrow/Home/End\nnavigation among non-disabled items. First-party invention --\n\"choose exactly one of N labeled options, rendered as a button row\" is ubiquitous\nsettings/filter-panel UI. Supports the same `2xs`-`xl` compact-form-control `size` scale as\n`<lr-select>`/`<lr-combobox>`/`<lr-input>`, so it can sit flush beside those controls in a\ntoolbar at a matching height.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The `role=\"radiogroup\"` root. |\n| `segment` | A single `role=\"radio\"` button. |\n| `segment-icon` | Optional leading visual supplied by the item's `icon` field; content may have a natural aspect ratio and is not restricted to a square icon. |\n| `segment-label` | The segment's label text. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-scroll-fade-size` (default: `2rem`) — Width of the static fade at each horizontal scroll edge.\n- `--lr-segmented-track-min-height` (default: `auto`) — Minimum height of the `base` track. Re-set per `size` (`2xs` through `xl`); the `auto` default applies at the unset/`m` size.\n- `--lr-segmented-segment-padding` (default: `var(--lr-size-0-125rem) var(--lr-space-s)`) — Each segment's padding. Re-set per `size`; this default applies at the unset/`m` size.\n- `--lr-segmented-font-size` (default: `var(--lr-font-size-sm)`) — Each segment's font size. Re-set per `size`; this default applies at the unset/`m` size."
|
|
11575
11575
|
},
|
|
11576
11576
|
"attributes": [
|
|
11577
11577
|
{
|
|
@@ -11608,7 +11608,7 @@
|
|
|
11608
11608
|
"name": "lr-select",
|
|
11609
11609
|
"description": {
|
|
11610
11610
|
"kind": "markdown",
|
|
11611
|
-
"value": "`<lr-select>` — a plain closed-list dropdown: a direct `<lr-*>`\ncounterpart to `<wa-select>`/`<wa-option>`. Trigger is a button (not a text\ninput) -- click/Enter/Space/ArrowDown opens it, there's no typing-to-filter.\nA printable keypress instead jumps (or, while closed, directly selects) the\nnext option whose label starts with what's been typed, like a native\n`<select>`'s type-ahead.\n\nOptions are `<lr-option value>` children, the same element `<lr-combobox>`\nuses. Unlike `lr-combobox` this is single-select only, with no filter/\nsource/with-clear/max-options-visible/empty-text/max-render/multiple surface\n-- see `<lr-combobox>` for the filterable/multi-select case.\n\nReuses `lr-combobox`'s popup positioning (`internal/positioner.js`) and\nclick-outside/Escape/Home/End/Arrow-key listbox navigation patterns,\nadapted to a trigger button that keeps DOM focus throughout (the listbox's\n\"active\" row is conveyed via `aria-activedescendant`, never actual focus),\nmatching the WAI-ARIA \"select-only combobox\" pattern.\n\nWhen `autoCommitSingleOption` is set and exactly one option is enabled\n(regardless of how many disabled ones exist alongside it), the popup never\nopens at all: a click, Enter, Space, ArrowDown, or ArrowUp on the trigger\ncommits that sole option directly, and the trigger renders as a plain\n`role=\"button\"` with no chevron/`aria-haspopup`/`aria-expanded` rather than\na combobox with a permanently inert popup state — opening a one-row list to\npick the only available choice is pure friction with no real decision\nbehind it. This never changes `value`/validity defaults on its own — an\nunselected single-option select stays unselected (and a `required` one\nstays invalid) exactly like the multi-option case, until the trigger is\nactually activated. `autoCommitSingleOption` defaults to `false`: by\ndefault a select always renders the normal combobox/listbox/chevron\ntrigger no matter how many options are enabled, matching pre-1.3.0\nbehavior — opt in explicitly if a narrowing-to-one option list should\nauto-commit.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | `<lr-option>` elements. |\n| `error` | Custom error content. |\n| `hint` | Custom hint content. |\n| `label` | Custom label content. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `error` | The error message. |\n| `expand-icon` | The dropdown indicator. |\n| `form-control` | The outer wrapper around label, trigger, listbox, error and hint. |\n| `form-control-label` | The `<label>` element. |\n| `group-label` | An option group's heading row (shown when any option declares a `group`). |\n| `hint` | The hint message. |\n| `listbox` | The options popover. |\n| `option` | An option row. |\n| `option-dot` | An option row's leading status dot (when `dot-color` is set). |\n| `option-label` | An option row's label/sub wrapper. |\n| `option-sub` | An option row's secondary line (when `sub` is set). |\n| `trigger` | The trigger button (positioning anchor). |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-select-expand-size` — Decorative expand-icon box size, scaled by `size`."
|
|
11611
|
+
"value": "`<lr-select>` — a plain closed-list dropdown: a direct `<lr-*>`\ncounterpart to `<wa-select>`/`<wa-option>`. Trigger is a button (not a text\ninput) -- click/Enter/Space/ArrowDown opens it, there's no typing-to-filter.\nA printable keypress instead jumps (or, while closed, directly selects) the\nnext option whose label starts with what's been typed, like a native\n`<select>`'s type-ahead.\n\nOptions are `<lr-option value>` children, the same element `<lr-combobox>`\nuses. Unlike `lr-combobox` this is single-select only, with no filter/\nsource/with-clear/max-options-visible/empty-text/max-render/multiple surface\n-- see `<lr-combobox>` for the filterable/multi-select case.\n\nReuses `lr-combobox`'s popup positioning (`internal/positioner.js`) and\nclick-outside/Escape/Home/End/Arrow-key listbox navigation patterns,\nadapted to a trigger button that keeps DOM focus throughout (the listbox's\n\"active\" row is conveyed via `aria-activedescendant`, never actual focus),\nmatching the WAI-ARIA \"select-only combobox\" pattern.\n\nWhen `autoCommitSingleOption` is set and exactly one option is enabled\n(regardless of how many disabled ones exist alongside it), the popup never\nopens at all: a click, Enter, Space, ArrowDown, or ArrowUp on the trigger\ncommits that sole option directly, and the trigger renders as a plain\n`role=\"button\"` with no chevron/`aria-haspopup`/`aria-expanded` rather than\na combobox with a permanently inert popup state — opening a one-row list to\npick the only available choice is pure friction with no real decision\nbehind it. This never changes `value`/validity defaults on its own — an\nunselected single-option select stays unselected (and a `required` one\nstays invalid) exactly like the multi-option case, until the trigger is\nactually activated. `autoCommitSingleOption` defaults to `false`: by\ndefault a select always renders the normal combobox/listbox/chevron\ntrigger no matter how many options are enabled, matching pre-1.3.0\nbehavior — opt in explicitly if a narrowing-to-one option list should\nauto-commit.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | `<lr-option>` elements. |\n| `error` | Custom error content. |\n| `hint` | Custom hint content. |\n| `label` | Custom label content. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `error` | The error message. |\n| `expand-icon` | The dropdown indicator. |\n| `form-control` | The outer wrapper around label, trigger, listbox, error and hint. |\n| `form-control-label` | The `<label>` element. |\n| `group-label` | An option group's heading row (shown when any option declares a `group`). |\n| `hint` | The hint message. |\n| `listbox` | The options popover. |\n| `option` | An option row. |\n| `option-dot` | An option row's leading status dot (when `dot-color` is set). |\n| `option-label` | An option row's label/sub wrapper. |\n| `option-sub` | An option row's secondary line (when `sub` is set). |\n| `trigger` | The trigger button (positioning anchor). |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-select-expand-size` — Decorative expand-icon box size, scaled by `size`.\n- `--lr-select-trigger-padding` — Trigger padding shorthand, scaled by `size`.\n- `--lr-select-trigger-min-height` — Trigger block-size floor, scaled by `size`. Applied only for the `xs`/`s`/`l`/`xl` tiers — see the stylesheet note; the default tier stays floor-free.\n- `--lr-select-font-size` — Trigger font size, scaled by `size`.\n- `--lr-select-trigger-height` (default: `auto`) — Exact trigger height. Left at `auto` the trigger is floored only; set it to a length to both floor and cap the trigger (e.g. to pixel-match a sibling field in the same row)."
|
|
11612
11612
|
},
|
|
11613
11613
|
"attributes": [
|
|
11614
11614
|
{
|
|
@@ -11701,7 +11701,7 @@
|
|
|
11701
11701
|
"name": "lr-sequence-strip",
|
|
11702
11702
|
"description": {
|
|
11703
11703
|
"kind": "markdown",
|
|
11704
|
-
"value": "`<lr-sequence-strip>` — a compact, one-thin-cell-per-item strip visualizing a sequence of\ncategorical states, with an optional secondary per-cell marker. Pure CSS/flex, no chart.js/SVG/\ncanvas — sized/named consistently with the sparkline/heatmap family, but a glanceable aggregate\nvisualization (`role=\"img\"`, one summarizing `aria-label`), not a `role=\"list\"` of\nseparately-operable items: no per-cell keyboard focus, no per-cell click event, matching\n`<lr-sparkline>`'s accessibility model rather than `<lr-heatmap>`'s heavier canvas +\nkeyboard-roving one.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The root strip wrapper (`role=\"img\"`). |\n| `cell` | Each item's cell, background-colored by its category. |\n| `marker` | The small bottom marker on a cell whose item sets `marker: true`. |\n| `tooltip` | The hover tooltip showing the hovered item's label.
|
|
11704
|
+
"value": "`<lr-sequence-strip>` — a compact, one-thin-cell-per-item strip visualizing a sequence of\ncategorical states, with an optional secondary per-cell marker. Pure CSS/flex, no chart.js/SVG/\ncanvas — sized/named consistently with the sparkline/heatmap family, but a glanceable aggregate\nvisualization (`role=\"img\"`, one summarizing `aria-label`), not a `role=\"list\"` of\nseparately-operable items: no per-cell keyboard focus, no per-cell click event, matching\n`<lr-sparkline>`'s accessibility model rather than `<lr-heatmap>`'s heavier canvas +\nkeyboard-roving one.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The root strip wrapper (`role=\"img\"`). |\n| `cell` | Each item's cell, background-colored by its category. |\n| `legend` | The static category key rendered below the strip when `showLegend` is set (`aria-hidden` — it repeats the strip's own `aria-label` visually). |\n| `legend-item` | One swatch + label pair in the legend, one per `categories` entry. |\n| `legend-label` | The text of a legend item (the category's `label`, or its `key`). |\n| `legend-swatch` | The color chip of a legend item, matching that category's cell color. |\n| `marker` | The small bottom marker on a cell whose item sets `marker: true`. |\n| `tooltip` | The hover tooltip showing the hovered item's label. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-sequence-strip-height` (default: `var(--lr-size-1-5rem)`) — Block size of the strip.\n- `--lr-sequence-strip-marker-color` (default: `var(--lr-color-text)`) — Color of the bottom marker on a `marker: true` cell.\n- `--lr-sequence-strip-legend-swatch-size` (default: `var(--lr-size-0-625rem)`) — Inline and block size of a legend swatch."
|
|
11705
11705
|
},
|
|
11706
11706
|
"attributes": [
|
|
11707
11707
|
{
|
|
@@ -11729,6 +11729,13 @@
|
|
|
11729
11729
|
"name": "horizontal"
|
|
11730
11730
|
}
|
|
11731
11731
|
]
|
|
11732
|
+
},
|
|
11733
|
+
{
|
|
11734
|
+
"name": "show-legend",
|
|
11735
|
+
"description": {
|
|
11736
|
+
"kind": "markdown",
|
|
11737
|
+
"value": "Renders a static `[part=\"legend\"]` key of every `categories` entry below the strip, so the\ncolor-to-category mapping is readable without hovering each cell. Deliberately\nnon-interactive: unlike `<lr-graph-legend>` this toggles nothing and emits nothing — the\nstrip is a presentational aggregate, and the key describes the scheme, not the current data\n(a category with no matching item still gets a row).\n\nType: `boolean` \nDefault: `false`"
|
|
11738
|
+
}
|
|
11732
11739
|
}
|
|
11733
11740
|
]
|
|
11734
11741
|
},
|
|
@@ -11736,7 +11743,7 @@
|
|
|
11736
11743
|
"name": "lr-skeleton",
|
|
11737
11744
|
"description": {
|
|
11738
11745
|
"kind": "markdown",
|
|
11739
|
-
"value": "`<lr-skeleton>` — a loading placeholder. First-party invention, standing\nin for the bespoke `animate-pulse` div most dashboards hand-roll.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The placeholder shape. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-transition-ambient` (default: `1.8s ease-in-out`) — Animation duration and timing function shared by the pulse and sheen effects."
|
|
11746
|
+
"value": "`<lr-skeleton>` — a loading placeholder. First-party invention, standing\nin for the bespoke `animate-pulse` div most dashboards hand-roll.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The placeholder shape. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-transition-ambient` (default: `1.8s ease-in-out`) — Animation duration and timing function shared by the pulse and sheen effects.\n- `--lr-skeleton-w` (default: `100%`) — Inline size of the placeholder.\n- `--lr-skeleton-h` (default: `var(--lr-size-1em)`) — Block size of the placeholder."
|
|
11740
11747
|
},
|
|
11741
11748
|
"attributes": [
|
|
11742
11749
|
{
|
|
@@ -12083,7 +12090,7 @@
|
|
|
12083
12090
|
"name": "lr-spinner",
|
|
12084
12091
|
"description": {
|
|
12085
12092
|
"kind": "markdown",
|
|
12086
|
-
"value": "`<lr-spinner>` — an indeterminate busy indicator.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | Optional visible label. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The wrapper. |\n| `label` | The accessible/visible label wrapper. |\n| `spinner` | The animated indicator.
|
|
12093
|
+
"value": "`<lr-spinner>` — an indeterminate busy indicator.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | Optional visible label. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The wrapper. |\n| `label` | The accessible/visible label wrapper. |\n| `spinner` | The animated indicator. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-spinner-size` (default: `var(--lr-size-1-25rem)`) — Outer diameter of the indicator.\n- `--lr-spinner-track-width` (default: `var(--lr-border-width-medium)`) — Thickness of the ring track.\n- `--lr-spinner-duration` (default: `800ms`) — Duration of one rotation. Not read under `prefers-reduced-motion: reduce`, where the animation is disabled entirely."
|
|
12087
12094
|
},
|
|
12088
12095
|
"attributes": [
|
|
12089
12096
|
{
|
|
@@ -12113,7 +12120,7 @@
|
|
|
12113
12120
|
"name": "lr-split",
|
|
12114
12121
|
"description": {
|
|
12115
12122
|
"kind": "markdown",
|
|
12116
|
-
"value": "`<lr-split>` — resizable panels for dashboard layouts. Direct light-DOM\nchildren are the panels; a divider is auto-inserted between each pair.\n\nOptionally, one pane can opt in to responsive collapse via `collapse`\n(`\"start\"`/`\"end\"`, default `\"none\"` — no behavior change when unset): as\nthe split's own container narrows past `railBreakpoint` that pane clamps\nto a fixed `railWidth`, and past the narrower `floatBreakpoint` it instead\nbecomes an absolutely-positioned overlay \"floating card\" above the other\npane. This component only handles the width-collapse mechanics and\nsignals the current state — via the `collapseState`-derived\n`data-collapse-state` attribute (set on both the host and the collapsing\npanel itself) and the `lr-split-collapse-change` event — it renders no\nicon-only/collapsed UI of its own; slotted content is expected to adapt to\nits own clamped width (e.g. via its own container query).\n\n`collapseState` is a public accessor with force/auto semantics mirroring\n`<lr-app-rail>`'s `mode`: it's normally derived automatically from the\nmeasured container width (via a `ResizeObserver` on `[part=\"base\"]`)\nwhenever it crosses `railBreakpoint`/`floatBreakpoint`, but assigning it a\nconcrete `'wide'`/`'rail'`/`'floating'` value pins it there and stops that\nautomatic tracking — useful for a consumer-driven toggle (e.g. a button\nthat forces `'floating'` regardless of width). Assigning the write-only\n`'auto'` sentinel releases the pin and immediately re-derives the state\nfrom the current measured width, resuming automatic tracking. `'auto'` is\nnever a value this getter returns.\n\nThe `'floating'` state is a hidden-by-default drawer, gated by `open`\n(mirrors `<lr-app-rail>`'s mobile overlay): while `collapseState` is\n`'floating'` and `open` is `false` (the default), the collapsing panel\nrenders nothing — `hidden`, out of the accessibility tree, not just\nvisually hidden — instead of the always-visible overlay card this state\nrendered before `open` existed. Setting `open = true` reveals it as a\nfocus-trapped floating panel with a `[part=\"backdrop\"]` scrim; Escape or a\nbackdrop click set `open` back to `false`. `open` is preserved (not reset)\nwhile `collapseState` isn't `'floating'`, but no drawer chrome renders\nuntil it is again — except that leaving `'floating'` while `open` is\n`true` (a breakpoint crossing back to `'wide'`/`'rail'`, or a forced\nreassignment) also closes it, the same way `<lr-app-rail>` closes its\nmobile overlay when leaving `'mobile'` while open.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | Panels to arrange side by side (or stacked, when `orientation=\"vertical\"`); each direct child becomes one resizable panel. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `backdrop` | The `'floating'` drawer's scrim. Only rendered while `collapseState === 'floating'` and `open`. |\n| `base` | The flex layout wrapper (`position: relative`, so the `'floating'` collapse state can anchor to it). |\n| `divider` | Each divider between two panels; carries `aria-disabled=\"true\"` and is drag/keyboard-inert while its adjacent panel is collapsed (`'rail'`/`'floating'`).
|
|
12123
|
+
"value": "`<lr-split>` — resizable panels for dashboard layouts. Direct light-DOM\nchildren are the panels; a divider is auto-inserted between each pair.\n\nOptionally, one pane can opt in to responsive collapse via `collapse`\n(`\"start\"`/`\"end\"`, default `\"none\"` — no behavior change when unset): as\nthe split's own container narrows past `railBreakpoint` that pane clamps\nto a fixed `railWidth`, and past the narrower `floatBreakpoint` it instead\nbecomes an absolutely-positioned overlay \"floating card\" above the other\npane. This component only handles the width-collapse mechanics and\nsignals the current state — via the `collapseState`-derived\n`data-collapse-state` attribute (set on both the host and the collapsing\npanel itself) and the `lr-split-collapse-change` event — it renders no\nicon-only/collapsed UI of its own; slotted content is expected to adapt to\nits own clamped width (e.g. via its own container query).\n\n`collapseState` is a public accessor with force/auto semantics mirroring\n`<lr-app-rail>`'s `mode`: it's normally derived automatically from the\nmeasured container width (via a `ResizeObserver` on `[part=\"base\"]`)\nwhenever it crosses `railBreakpoint`/`floatBreakpoint`, but assigning it a\nconcrete `'wide'`/`'rail'`/`'floating'` value pins it there and stops that\nautomatic tracking — useful for a consumer-driven toggle (e.g. a button\nthat forces `'floating'` regardless of width). Assigning the write-only\n`'auto'` sentinel releases the pin and immediately re-derives the state\nfrom the current measured width, resuming automatic tracking. `'auto'` is\nnever a value this getter returns.\n\nThe `'floating'` state is a hidden-by-default drawer, gated by `open`\n(mirrors `<lr-app-rail>`'s mobile overlay): while `collapseState` is\n`'floating'` and `open` is `false` (the default), the collapsing panel\nrenders nothing — `hidden`, out of the accessibility tree, not just\nvisually hidden — instead of the always-visible overlay card this state\nrendered before `open` existed. Setting `open = true` reveals it as a\nfocus-trapped floating panel with a `[part=\"backdrop\"]` scrim; Escape or a\nbackdrop click set `open` back to `false`. `open` is preserved (not reset)\nwhile `collapseState` isn't `'floating'`, but no drawer chrome renders\nuntil it is again — except that leaving `'floating'` while `open` is\n`true` (a breakpoint crossing back to `'wide'`/`'rail'`, or a forced\nreassignment) also closes it, the same way `<lr-app-rail>` closes its\nmobile overlay when leaving `'mobile'` while open.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | Panels to arrange side by side (or stacked, when `orientation=\"vertical\"`); each direct child becomes one resizable panel. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `backdrop` | The `'floating'` drawer's scrim. Only rendered while `collapseState === 'floating'` and `open`. |\n| `base` | The flex layout wrapper (`position: relative`, so the `'floating'` collapse state can anchor to it). |\n| `divider` | Each divider between two panels; carries `aria-disabled=\"true\"` and is drag/keyboard-inert while its adjacent panel is collapsed (`'rail'`/`'floating'`). |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-split-overlay-color` (default: `var(--lr-color-overlay)`) — The `'floating'` drawer scrim's color, applied to `[part=\"backdrop\"]`."
|
|
12117
12124
|
},
|
|
12118
12125
|
"attributes": [
|
|
12119
12126
|
{
|
|
@@ -12176,7 +12183,14 @@
|
|
|
12176
12183
|
"name": "orientation-breakpoint",
|
|
12177
12184
|
"description": {
|
|
12178
12185
|
"kind": "markdown",
|
|
12179
|
-
"value": "Opt-in inline-size breakpoint
|
|
12186
|
+
"value": "Opt-in inline-size breakpoint for this component's *own* measured allocation. Below it,\n`narrowOrientation` becomes effective. Unset by default — the whole responsive-orientation\nfeature (and its `ResizeObserver`) is off, and `effectiveOrientation` just tracks\n`orientation`.\n\nAccepts a bare pixel number (`900`, `orientation-breakpoint=\"900\"` — the original form) or a\nCSS length string: `'900px'`, `'56.25rem'`, `'3em'`. Under the default\n`orientationBreakpointBasis=\"container\"`, `rem` resolves against the *document root*'s\ncomputed font size — the rule a `@container` query follows, not a `@media` query's — and `em`\nagainst this element's own computed font size. The length is re-resolved on every measurement,\nnever cached at first render, so a root font-size change moves the crossing width with no\ninvalidation step. To stay in step with a sibling `@media (max-width: 56.25rem)` rule, use\n`orientationBreakpointBasis=\"viewport\"`, which hands the length to the browser instead; see\nthat property for why the two resolve `rem` differently.\n\nAnything else — `''`, `'auto'`, garbage, a non-finite number, and deliberately `%`/`vw`/`vh`/\n`calc()` (which would mix reference boxes against an element-relative measurement) — behaves\nexactly as unset. Set `orientationBreakpointBasis=\"viewport\"` for a viewport-relative\nbreakpoint instead.\n\nType: `number | string | undefined`"
|
|
12187
|
+
}
|
|
12188
|
+
},
|
|
12189
|
+
{
|
|
12190
|
+
"name": "orientation-breakpoint-basis",
|
|
12191
|
+
"description": {
|
|
12192
|
+
"kind": "markdown",
|
|
12193
|
+
"value": "Which box `orientationBreakpoint` measures. `'container'` (the default) observes this\ncomponent's own `[part=\"base\"]` inline size via `ResizeObserver`, comparing strictly `<`.\n`'viewport'` instead evaluates `matchMedia('(max-width: <breakpoint>)')`, which is inclusive\n(`<=`) — native `max-width` semantics, deliberately, so the crossing point matches a CSS\n`@media` rule authored with the same length exactly.\n\nUse `'viewport'` when two siblings in one row must flip together at a shared breakpoint: a row\nthat stacks via a pure-CSS `@media` rule makes each sibling's own width non-monotonic across\nthe transition, so no self-measured threshold can express it. `'viewport'` also lets the\nbrowser resolve a `rem` breakpoint with real `@media` semantics, keeping it in step with such\na rule across browser zoom and user font-size preferences.\n\nType: `OrientationBreakpointBasis` \nDefault: `'container'`"
|
|
12180
12194
|
}
|
|
12181
12195
|
},
|
|
12182
12196
|
{
|
|
@@ -12236,7 +12250,7 @@
|
|
|
12236
12250
|
"name": "lr-stack-trace",
|
|
12237
12251
|
"description": {
|
|
12238
12252
|
"kind": "markdown",
|
|
12239
|
-
"value": "`<lr-stack-trace>` — parses common V8/JS-TS, Firefox/Safari, and Python stack traces into a\nleading message plus activatable frames, splitting chained/caused-by errors into separate\ngroups. Frames matching `internalPatterns` (`node_modules/`, `node:internal`,\n`site-packages/`, ... by default) fold behind a count-labeled toggle. Falls back to verbatim\nraw text when nothing parses. First-party invention (no Web Awesome equivalent).\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The root wrapper; respects `max-height`. |\n| `copy-button` | The copy-to-clipboard button, only rendered while `copyable`. |\n| `frame` | A single frame button; carries `data-internal` for internal frames. |\n| `frame-function` | The frame's function name. |\n| `frame-location` | The frame's `file:line:col` text. |\n| `group` | One chained-error group of frames. |\n| `internal-toggle` | The collapse/expand toggle for a run of internal frames. |\n| `message` | The leading error message text for a group. |\n| `raw` | The verbatim `<pre>` fallback when zero structured frames parsed.
|
|
12253
|
+
"value": "`<lr-stack-trace>` — parses common V8/JS-TS, Firefox/Safari, and Python stack traces into a\nleading message plus activatable frames, splitting chained/caused-by errors into separate\ngroups. Frames matching `internalPatterns` (`node_modules/`, `node:internal`,\n`site-packages/`, ... by default) fold behind a count-labeled toggle. Falls back to verbatim\nraw text when nothing parses. First-party invention (no Web Awesome equivalent).\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The root wrapper; respects `max-height`. |\n| `copy-button` | The copy-to-clipboard button, only rendered while `copyable`. |\n| `frame` | A single frame button; carries `data-internal` for internal frames. |\n| `frame-function` | The frame's function name. |\n| `frame-location` | The frame's `file:line:col` text. |\n| `group` | One chained-error group of frames. |\n| `internal-toggle` | The collapse/expand toggle for a run of internal frames. |\n| `message` | The leading error message text for a group. |\n| `raw` | The verbatim `<pre>` fallback when zero structured frames parsed. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-stack-trace-max-height` (default: `none`) — Cap on how tall `[part=\"base\"]` grows before it scrolls internally. `none` lets the component grow with its content; the `max-height` attribute sets this token.\n- `--lr-stack-trace-font` (default: `var(--lr-font-mono)`) — Font family for the parsed frames and the verbatim raw fallback."
|
|
12240
12254
|
},
|
|
12241
12255
|
"attributes": [
|
|
12242
12256
|
{
|
|
@@ -12401,7 +12415,7 @@
|
|
|
12401
12415
|
"name": "lr-stepper",
|
|
12402
12416
|
"description": {
|
|
12403
12417
|
"kind": "markdown",
|
|
12404
|
-
"value": "`<lr-stepper>` — ordered multi-step wizard/form navigation: label + index per step,\ncurrent/completed/locked/error state, click-to-jump. First-party invention (no Web Awesome\nequivalent). Fully data-driven and controlled, like `lr-table`'s `columns`/`rows` -- it never\nmutates `steps` itself; a click or Enter/Space on a non-disabled step fires a cancelable\n`lr-step-select`, and the host decides whether/how `steps` changes in response (mirroring\n`lr-dialog-close`'s cancelable-event convention).\n\nAn opt-in `orientationBreakpoint` (unset by default -- no behavior change) makes the effective\nlayout/navigation axis respond to
|
|
12418
|
+
"value": "`<lr-stepper>` — ordered multi-step wizard/form navigation: label + index per step,\ncurrent/completed/locked/error state, click-to-jump. First-party invention (no Web Awesome\nequivalent). Fully data-driven and controlled, like `lr-table`'s `columns`/`rows` -- it never\nmutates `steps` itself; a click or Enter/Space on a non-disabled step fires a cancelable\n`lr-step-select`, and the host decides whether/how `steps` changes in response (mirroring\n`lr-dialog-close`'s cancelable-event convention).\n\nAn opt-in `orientationBreakpoint` (unset by default -- no behavior change) makes the effective\nlayout/navigation axis respond to a measured inline size instead of only the authored\n`orientation`: below that width (a pixel number or a `px`/`rem`/`em` CSS length), `narrowOrientation`\nbecomes effective; at/above it, `orientation` does. This mirrors `<lr-split>`'s identically-named\n`orientationBreakpoint`/`narrowOrientation`/`orientationBreakpointBasis` contract. Under the default\n`orientationBreakpointBasis=\"container\"` the breakpoint is measured on this stepper's own\n`[part=\"base\"]` inline size via `ResizeObserver`, so a stepper placed in a narrow split pane or\ndialog still responds correctly even in a wide window; `orientationBreakpointBasis=\"viewport\"`\ninstead evaluates `matchMedia('(max-width: <breakpoint>)')`, needed when the stepper has a fixed\nwidth in a row that stacks at a shared breakpoint. The effective axis is exposed via the\n`effectiveOrientation` getter, a `data-effective-orientation` host attribute (only present while\nthe breakpoint feature is active), and `lr-stepper-orientation-change`.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The root wrapper. |\n| `step` | A single step button. |\n| `step-check` | The completed-checkmark glyph, shown for `completed` steps instead of `step-index`. |\n| `step-index` | The numbered index chip, shown for `pending`/`current`/`error` steps. |\n| `step-label` | The step's label text. |"
|
|
12405
12419
|
},
|
|
12406
12420
|
"attributes": [
|
|
12407
12421
|
{
|
|
@@ -12436,7 +12450,14 @@
|
|
|
12436
12450
|
"name": "orientation-breakpoint",
|
|
12437
12451
|
"description": {
|
|
12438
12452
|
"kind": "markdown",
|
|
12439
|
-
"value": "Opt-in inline-size breakpoint
|
|
12453
|
+
"value": "Opt-in inline-size breakpoint, measured on `[part=\"base\"]`. Below it, `narrowOrientation`\nbecomes effective instead of `orientation`. Unset (the default): no behavior change, the\nauthored `orientation` always applies.\n\nAccepts a bare pixel number (`500`, `'500'`), an explicit `px` length (`'500px'`), a `rem`\nlength (`'31.25rem'`) or an `em` length (`'3em'`). Under the default\n`orientationBreakpointBasis=\"container\"`, `rem` resolves against the **document root**'s\ncomputed font size -- the rule a `@container` query follows, and *not* a `@media` query's --\nwhile `em` resolves against this element's own computed font size. The length is re-resolved\non every measurement, never cached, so browser zoom, a user font-size preference or an app\nbase-size token change are picked up with no invalidation step. To stay in step with a\nsibling `@media (max-width: …rem)` rule, use `orientationBreakpointBasis=\"viewport\"`, which\nhands the length to the browser instead; see that property for why the two differ.\n\nAny other value -- `%`, `vw`, `calc()`, `'auto'`, an unparseable string -- behaves exactly as\nunset (no responsive observation at all), rather than as an armed breakpoint that can never\nbe crossed. Set `orientationBreakpointBasis=\"viewport\"` for a viewport-relative breakpoint\ninstead.\n\nType: `number | string | undefined`"
|
|
12454
|
+
}
|
|
12455
|
+
},
|
|
12456
|
+
{
|
|
12457
|
+
"name": "orientation-breakpoint-basis",
|
|
12458
|
+
"description": {
|
|
12459
|
+
"kind": "markdown",
|
|
12460
|
+
"value": "Which box `orientationBreakpoint` measures. `'container'` (the default) observes this\nstepper's own `[part=\"base\"]` inline size via `ResizeObserver`, comparing strictly `<`.\n`'viewport'` instead evaluates `matchMedia('(max-width: <breakpoint>)')`, which is inclusive\n(`<=`) -- native `max-width` semantics, deliberately, so the crossing point matches a CSS\n`@media` rule authored with the same length exactly.\n\nA stepper given a fixed width in a row layout cannot react to that row stacking by measuring\nitself -- its own width never changes. That case requires `'viewport'`, which also lets the\nbrowser resolve a `rem` breakpoint with real `@media` semantics.\n\nType: `OrientationBreakpointBasis` \nDefault: `'container'`"
|
|
12440
12461
|
}
|
|
12441
12462
|
}
|
|
12442
12463
|
]
|
|
@@ -12445,7 +12466,7 @@
|
|
|
12445
12466
|
"name": "lr-stream-status",
|
|
12446
12467
|
"description": {
|
|
12447
12468
|
"kind": "markdown",
|
|
12448
|
-
"value": "`<lr-stream-status>` — a compact status indicator for a single streaming\nconnection (SSE, WebSocket, long-poll, …), with built-in heartbeat-aware\nstall detection.\n\nThe host drives `phase` directly for `idle`/`connecting`/`streaming`, and\ncalls `recordActivity()` on every *semantic* frame received while\nstreaming — a real content chunk, never a transport-level keep-alive ping.\nThis component has no payload-inspection logic of its own: \"ignore\nheartbeats\" is entirely a call-site discipline — the host simply never\ncalls `recordActivity()` for a ping, so pings never reset the stall timer\nand a connection that's only sending keep-alives (no real content) for\nlonger than `stall-threshold-ms` correctly reads as stalled.\n\nInternally, an inactivity timer runs only while `phase === 'streaming'`.\nIt's (re)armed whenever the phase transitions to `'streaming'` (directly,\nor via `recordActivity()` recovering from `'stalled'`), on every\nsubsequent `recordActivity()` call while already streaming, whenever\n`stall-threshold-ms` itself changes while already streaming (the new\nvalue takes effect immediately, the same way `<lr-toast-item>`'s\n`duration` re-applies mid-flight, rather than waiting for the next\n`recordActivity()`/phase change), and whenever this element (re)connects\nto the DOM while `phase` is still `'streaming'` (a disconnect always\ndisarms it, so moving the element elsewhere in the page — disconnect then\nreconnect with `phase` unchanged — must resume detection rather than\nsilently disabling it for the rest of the streaming session). It's\ndisarmed the instant `phase` becomes anything else, including a\nhost-driven reassignment away from `'streaming'` — so a stale timer can\nnever fire a stall transition after the host has already moved on. If it\never fires, `phase` becomes `'stalled'` and `lr-stall` is dispatched.\n\n`phase` remains a fully public, directly settable property at all times —\na host can assign `'stalled'` (or any other phase) itself as a manual\noverride, and this component never fights that assignment. `lr-stall`/\n`lr-recover` fire on *any* transition into/out of `'stalled'`\nrespectively, whether timer-driven or host-driven, and never for a\nreassignment to the same value (Lit's default `hasChanged` already skips a\nno-op set, same as every other reflected `@property` in this library).\nLike `<lr-chat-message>`'s `status`, whatever phase this element happens\nto *mount* with is never itself treated as an eventful transition — only a\nlater change fires an event or an announcement.\n\nAccessibility: phase transitions into/out of `'stalled'` are announced\nthrough an internal `<lr-live-region>` (see that component for the\nthrottled/coalesced-announcement machinery this composes) rather than a\nhand-rolled `aria-live` region. `recordActivity()` itself never announces\nanything, no matter how often the host calls it — only the *transition*\nannounces, exactly once per transition, which is the entire point of\nrouting through the throttled announcer instead of writing to a live\nregion on every call. Entering `'stalled'` announces with `mode=\"assertive\"`\n(a stall can need the user's attention, e.g. before they give up and\nnavigate away); leaving `'stalled'` always announces with `mode=\"polite\"`\n(good news doesn't need to interrupt), but the *wording* depends on where\nit lands: `\"Connection restored.\"` only when the destination is\n`'streaming'` (a genuine recovery), or a neutral `\"No longer stalled.\"`\nwhen the destination is `'idle'`/`'connecting'` instead — that's the host\ngiving up on the stream, not the stream recovering, and a screen-reader\nuser must never be told the opposite of what a sighted user sees on\nscreen. The decorative indicator dot is `aria-hidden` — it's a\ncolor/motion cue only, never the sole carrier of state.\n\nVisual: `'stalled'` is styled as a warning, not a danger — a stall is\nusually recoverable (the stream may resume on its own, or the host's own\nretry logic may kick in), so treating it as an actionable warning rather\nthan a hard failure keeps the tone proportionate. A host that wants to\nescalate to danger styling after N stalls can scope its own CSS off\n`[phase=\"stalled\"]`, or simply stop rendering this component and show its\nown danger-styled error state instead.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | Custom copy shown only while `phase=\"stalled\"` (e.g. \"Taking longer than usual…\"). A sensible built-in default is used when nothing is slotted. |\n| `actions` | A stop/retry button row. Always present in the template regardless of `phase` — visibility is driven purely by whether anything is slotted, not by `phase`; what to put here, and when, is entirely the host's call. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `actions` | Wrapper around the `actions` slot. |\n| `base` | The root layout container. |\n| `indicator` | The decorative (`aria-hidden`) status dot. |\n| `message` | Wrapper around the default slot; only rendered while `phase=\"stalled\"`.
|
|
12469
|
+
"value": "`<lr-stream-status>` — a compact status indicator for a single streaming\nconnection (SSE, WebSocket, long-poll, …), with built-in heartbeat-aware\nstall detection.\n\nThe host drives `phase` directly for `idle`/`connecting`/`streaming`, and\ncalls `recordActivity()` on every *semantic* frame received while\nstreaming — a real content chunk, never a transport-level keep-alive ping.\nThis component has no payload-inspection logic of its own: \"ignore\nheartbeats\" is entirely a call-site discipline — the host simply never\ncalls `recordActivity()` for a ping, so pings never reset the stall timer\nand a connection that's only sending keep-alives (no real content) for\nlonger than `stall-threshold-ms` correctly reads as stalled.\n\nInternally, an inactivity timer runs only while `phase === 'streaming'`.\nIt's (re)armed whenever the phase transitions to `'streaming'` (directly,\nor via `recordActivity()` recovering from `'stalled'`), on every\nsubsequent `recordActivity()` call while already streaming, whenever\n`stall-threshold-ms` itself changes while already streaming (the new\nvalue takes effect immediately, the same way `<lr-toast-item>`'s\n`duration` re-applies mid-flight, rather than waiting for the next\n`recordActivity()`/phase change), and whenever this element (re)connects\nto the DOM while `phase` is still `'streaming'` (a disconnect always\ndisarms it, so moving the element elsewhere in the page — disconnect then\nreconnect with `phase` unchanged — must resume detection rather than\nsilently disabling it for the rest of the streaming session). It's\ndisarmed the instant `phase` becomes anything else, including a\nhost-driven reassignment away from `'streaming'` — so a stale timer can\nnever fire a stall transition after the host has already moved on. If it\never fires, `phase` becomes `'stalled'` and `lr-stall` is dispatched.\n\n`phase` remains a fully public, directly settable property at all times —\na host can assign `'stalled'` (or any other phase) itself as a manual\noverride, and this component never fights that assignment. `lr-stall`/\n`lr-recover` fire on *any* transition into/out of `'stalled'`\nrespectively, whether timer-driven or host-driven, and never for a\nreassignment to the same value (Lit's default `hasChanged` already skips a\nno-op set, same as every other reflected `@property` in this library).\nLike `<lr-chat-message>`'s `status`, whatever phase this element happens\nto *mount* with is never itself treated as an eventful transition — only a\nlater change fires an event or an announcement.\n\nAccessibility: phase transitions into/out of `'stalled'` are announced\nthrough an internal `<lr-live-region>` (see that component for the\nthrottled/coalesced-announcement machinery this composes) rather than a\nhand-rolled `aria-live` region. `recordActivity()` itself never announces\nanything, no matter how often the host calls it — only the *transition*\nannounces, exactly once per transition, which is the entire point of\nrouting through the throttled announcer instead of writing to a live\nregion on every call. Entering `'stalled'` announces with `mode=\"assertive\"`\n(a stall can need the user's attention, e.g. before they give up and\nnavigate away); leaving `'stalled'` always announces with `mode=\"polite\"`\n(good news doesn't need to interrupt), but the *wording* depends on where\nit lands: `\"Connection restored.\"` only when the destination is\n`'streaming'` (a genuine recovery), or a neutral `\"No longer stalled.\"`\nwhen the destination is `'idle'`/`'connecting'` instead — that's the host\ngiving up on the stream, not the stream recovering, and a screen-reader\nuser must never be told the opposite of what a sighted user sees on\nscreen. The decorative indicator dot is `aria-hidden` — it's a\ncolor/motion cue only, never the sole carrier of state.\n\nVisual: `'stalled'` is styled as a warning, not a danger — a stall is\nusually recoverable (the stream may resume on its own, or the host's own\nretry logic may kick in), so treating it as an actionable warning rather\nthan a hard failure keeps the tone proportionate. A host that wants to\nescalate to danger styling after N stalls can scope its own CSS off\n`[phase=\"stalled\"]`, or simply stop rendering this component and show its\nown danger-styled error state instead.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | Custom copy shown only while `phase=\"stalled\"` (e.g. \"Taking longer than usual…\"). A sensible built-in default is used when nothing is slotted. |\n| `actions` | A stop/retry button row. Always present in the template regardless of `phase` — visibility is driven purely by whether anything is slotted, not by `phase`; what to put here, and when, is entirely the host's call. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `actions` | Wrapper around the `actions` slot. |\n| `base` | The root layout container. |\n| `indicator` | The decorative (`aria-hidden`) status dot. |\n| `message` | Wrapper around the default slot; only rendered while `phase=\"stalled\"`. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-stream-status-dot-color` (default: `var(--lr-color-text-quiet)`) — `indicator` dot color. Swapped by the reflected `phase`: `var(--lr-color-brand)` for `connecting`/`streaming`, `var(--lr-color-warning)` for `stalled`.\n- `--lr-stream-status-dot-opacity` (default: `0.35`) — `indicator` dot opacity. Swapped by the reflected `phase`: `0.6` for `connecting`, `1` for `streaming` and `stalled`."
|
|
12449
12470
|
},
|
|
12450
12471
|
"attributes": [
|
|
12451
12472
|
{
|
|
@@ -12475,7 +12496,7 @@
|
|
|
12475
12496
|
"name": "lr-streaming-text",
|
|
12476
12497
|
"description": {
|
|
12477
12498
|
"kind": "markdown",
|
|
12478
|
-
"value": "`<lr-streaming-text>` — a token-coalescing incremental text renderer for\nstreaming assistant output, with an optional blinking cursor and\nauto-detected Markdown rendering.\n\nThe host is expected to assign the *entire* current text on every update\nto `content`, not a delta -- this component does no accumulation or\nordering of its own. That matches how most streaming-UI state (SSE/\nWebSocket token accumulation into a growing string in application state)\nis already managed.\n\nToken-by-token streaming can update `content` far faster than a human can\nusefully perceive a re-render -- dozens of times a second for a fast\nmodel. Re-rendering on every single assignment thrashes layout for no\nvisible benefit, so updates funnel through `Announcer`\n(`../../internal/announcer.js`), reused here purely as the generic\n\"coalesce rapid calls, flush the latest\" timing primitive its own class\ndoc says other components should reuse -- with none of its usual\nDOM/ARIA plumbing (that's `<lr-live-region>`'s job, not this\ncomponent's). Within any `coalesce-ms` window, only the *last* `content`\nvalue assigned actually reaches the rendered DOM. Two cases always bypass\nthe throttle and flush immediately instead of waiting out the window: the\nvery first `content` assignment after mount (so an already-complete\nmessage never shows an artificial startup delay), and any transition of\n`streaming` between `true` and `false` in either direction (so the final\nchunk of a finished stream can never be left stranded mid-window, and a\nstream restarting on a reused element can never keep showing the\nprevious stream's stale final content for the length of the window).\n\n`markdown` is a tri-state property, not a plain boolean: left unset (the\ndefault), it auto-detects via a lightweight regex heuristic (see\n`looksLikeMarkdown`) run against whatever text is currently displayed --\ngood enough to route obviously-Markdown output through `<lr-markdown>`\nwithout the host needing to know or declare it up front, at the cost of\nan occasional one-time mode flip if Markdown syntax only appears partway\nthrough a stream. Explicitly setting `markdown` to `true`/`false` always\nwins over the heuristic. Rendering itself is never reimplemented here:\nMarkdown mode composes `<lr-markdown>` (`../markdown/markdown.js`)\ndirectly, forwarding this component's own `streaming` through as that\ncomponent's own forward-compatible `streaming` hint prop; plain-text mode\nrenders into a `white-space: pre-wrap` span instead.\n\nThe blinking cursor (shown only while `streaming` is `true`) degrades to\na static, always-visible bar under `prefers-reduced-motion: reduce`\nrather than disabling the animation into an invisible frozen frame --\nthe same pattern `<lr-typing-indicator>`'s own `cursor` variant uses. In\nplain-text mode the cursor sits inline at the tail of the final\ncharacter, since the text is one continuous inline flow; in Markdown\nmode it renders as its own trailing block below the rendered content\ninstead of attempting to splice into whatever nested block Markdown\nhappens to end with (a paragraph, a table cell, a list item, a fenced\ncode block, …) -- genuinely interleaving into arbitrary rendered Markdown\nwithout reaching across `<lr-markdown>`'s own shadow boundary isn't a\ntractable general solution, so this component doesn't attempt it.\n\nPurely presentational: no events, driven entirely by its properties. It\nalso doesn't announce anything to assistive tech itself -- a host that\nneeds streamed text announced already has `<lr-live-region>` for that\n(composed, for example, inside `<lr-chat-message>`).\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The root container. |\n| `cursor` | The blinking (or, under reduced motion, static) cursor bar. Only rendered while `streaming` is `true`.
|
|
12499
|
+
"value": "`<lr-streaming-text>` — a token-coalescing incremental text renderer for\nstreaming assistant output, with an optional blinking cursor and\nauto-detected Markdown rendering.\n\nThe host is expected to assign the *entire* current text on every update\nto `content`, not a delta -- this component does no accumulation or\nordering of its own. That matches how most streaming-UI state (SSE/\nWebSocket token accumulation into a growing string in application state)\nis already managed.\n\nToken-by-token streaming can update `content` far faster than a human can\nusefully perceive a re-render -- dozens of times a second for a fast\nmodel. Re-rendering on every single assignment thrashes layout for no\nvisible benefit, so updates funnel through `Announcer`\n(`../../internal/announcer.js`), reused here purely as the generic\n\"coalesce rapid calls, flush the latest\" timing primitive its own class\ndoc says other components should reuse -- with none of its usual\nDOM/ARIA plumbing (that's `<lr-live-region>`'s job, not this\ncomponent's). Within any `coalesce-ms` window, only the *last* `content`\nvalue assigned actually reaches the rendered DOM. Two cases always bypass\nthe throttle and flush immediately instead of waiting out the window: the\nvery first `content` assignment after mount (so an already-complete\nmessage never shows an artificial startup delay), and any transition of\n`streaming` between `true` and `false` in either direction (so the final\nchunk of a finished stream can never be left stranded mid-window, and a\nstream restarting on a reused element can never keep showing the\nprevious stream's stale final content for the length of the window).\n\n`markdown` is a tri-state property, not a plain boolean: left unset (the\ndefault), it auto-detects via a lightweight regex heuristic (see\n`looksLikeMarkdown`) run against whatever text is currently displayed --\ngood enough to route obviously-Markdown output through `<lr-markdown>`\nwithout the host needing to know or declare it up front, at the cost of\nan occasional one-time mode flip if Markdown syntax only appears partway\nthrough a stream. Explicitly setting `markdown` to `true`/`false` always\nwins over the heuristic. Rendering itself is never reimplemented here:\nMarkdown mode composes `<lr-markdown>` (`../markdown/markdown.js`)\ndirectly, forwarding this component's own `streaming` through as that\ncomponent's own forward-compatible `streaming` hint prop; plain-text mode\nrenders into a `white-space: pre-wrap` span instead.\n\nThe blinking cursor (shown only while `streaming` is `true`) degrades to\na static, always-visible bar under `prefers-reduced-motion: reduce`\nrather than disabling the animation into an invisible frozen frame --\nthe same pattern `<lr-typing-indicator>`'s own `cursor` variant uses. In\nplain-text mode the cursor sits inline at the tail of the final\ncharacter, since the text is one continuous inline flow; in Markdown\nmode it renders as its own trailing block below the rendered content\ninstead of attempting to splice into whatever nested block Markdown\nhappens to end with (a paragraph, a table cell, a list item, a fenced\ncode block, …) -- genuinely interleaving into arbitrary rendered Markdown\nwithout reaching across `<lr-markdown>`'s own shadow boundary isn't a\ntractable general solution, so this component doesn't attempt it.\n\nPurely presentational: no events, driven entirely by its properties. It\nalso doesn't announce anything to assistive tech itself -- a host that\nneeds streamed text announced already has `<lr-live-region>` for that\n(composed, for example, inside `<lr-chat-message>`).\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The root container. |\n| `cursor` | The blinking (or, under reduced motion, static) cursor bar. Only rendered while `streaming` is `true`. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-streaming-text-cursor-width` (default: `var(--lr-size-0-125rem)`) — Width of the `cursor` bar (also its border radius).\n- `--lr-streaming-text-cursor-height` (default: `var(--lr-size-1em)`) — Height of the `cursor` bar."
|
|
12479
12500
|
},
|
|
12480
12501
|
"attributes": [
|
|
12481
12502
|
{
|
|
@@ -12600,7 +12621,7 @@
|
|
|
12600
12621
|
"name": "lr-swatch-picker",
|
|
12601
12622
|
"description": {
|
|
12602
12623
|
"kind": "markdown",
|
|
12603
|
-
"value": "`<lr-swatch-picker>` -- a single-select picker over a small, fixed set of color swatches with\nthe WAI-ARIA APG `radiogroup` contract built in: `role=\"radiogroup\"`/`role=\"radio\"`, roving\ntabindex, automatic activation (click or arrow-key move both select immediately, like a native\nradio group), cyclic Arrow/Home/End navigation. Distinct from `<lr-color-picker>`'s freeform\nnative color input -- this picks exactly one of N designer-chosen named colors, the shape apps\notherwise hand-roll as a row of round accent-color buttons.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The `role=\"radiogroup\"` root. |\n| `swatch` | A single `role=\"radio\"` color swatch's interactive hit target; sized to the shared minimum tappable size (`--lr-icon-button-size`), independent of the smaller visible fill/icon rendered inside it. The selected one is `[part='swatch'][aria-checked='true']`. |\n| `swatch-fill` | The compact filled circle rendered when the option has no custom `icon`. |\n| `swatch-icon` | Optional custom shape supplied by the option's `icon` field; when present it replaces `swatch-fill` and the swatch renders unfilled/unbordered behind it. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-swatch-picker-selected-color` (default: `var(--lr-color-brand)`) — Ring color drawn around the selected swatch, themeable independently of the focus ring and every other ring color.\n- `--lr-swatch-picker-selected-blur` (default: `
|
|
12624
|
+
"value": "`<lr-swatch-picker>` -- a single-select picker over a small, fixed set of color swatches with\nthe WAI-ARIA APG `radiogroup` contract built in: `role=\"radiogroup\"`/`role=\"radio\"`, roving\ntabindex, automatic activation (click or arrow-key move both select immediately, like a native\nradio group), cyclic Arrow/Home/End navigation. Distinct from `<lr-color-picker>`'s freeform\nnative color input -- this picks exactly one of N designer-chosen named colors, the shape apps\notherwise hand-roll as a row of round accent-color buttons.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The `role=\"radiogroup\"` root. |\n| `swatch` | A single `role=\"radio\"` color swatch's interactive hit target; sized to the shared minimum tappable size (`--lr-icon-button-size`), independent of the smaller visible fill/icon rendered inside it. The selected one is `[part='swatch'][aria-checked='true']`. |\n| `swatch-fill` | The compact filled circle rendered when the option has no custom `icon`. |\n| `swatch-icon` | Optional custom shape supplied by the option's `icon` field; when present it replaces `swatch-fill` and the swatch renders unfilled/unbordered behind it. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-swatch-picker-selected-color` (default: `var(--lr-color-brand)`) — Ring color drawn around the selected swatch, themeable independently of the focus ring and every other ring color.\n- `--lr-swatch-picker-selected-blur` (default: `0`) — Blur radius of that same ring. 0 by default (a crisp ring); set a real length (e.g. 0.4rem) for a soft glow instead.\n- `--lr-swatch-picker-shine-duration` (default: `0s`) — Duration of a rhythmic brighten-and-settle \"shine\" on the selected swatch. `0s` (the default) is a no-op -- today's static look for every existing consumer. Set a real duration (e.g. 1.6s) for a pulsing shine; disabled outright under `prefers-reduced-motion: reduce`. Independent of `--lr-swatch-picker-selected-blur` (a separate `filter: brightness()` animation, not `box-shadow`), so the two compose freely, and works identically for a plain color circle and an icon swatch alike."
|
|
12604
12625
|
},
|
|
12605
12626
|
"attributes": [
|
|
12606
12627
|
{
|
|
@@ -12630,7 +12651,7 @@
|
|
|
12630
12651
|
"name": "lr-switch",
|
|
12631
12652
|
"description": {
|
|
12632
12653
|
"kind": "markdown",
|
|
12633
|
-
"value": "`<lr-switch>` — a boolean toggle-switch form control. Structurally the\nsame idea as a checkbox (form-associated via `ElementInternals`, click and\nSpace/Enter both toggle) but with switch semantics: `role=\"switch\"` +\n`aria-checked` read to assistive tech as an on/off state rather than a\nchecked/unchecked one, and there is no indeterminate state.\n\n`checked` is not a plain string, so this attaches `ElementInternals`\ndirectly and implements its own `updateValidity()` rather than using the\n`FormAssociated` mixin (that mixin's `value` accessor assumes a string —\nsee `<lr-combobox>` for the same direct-`ElementInternals` shape with a\nnon-string value).\n\nShips an opt-in `hint`/`errorText` form-control chrome (props + matching named slots +\n`hint`/`error` CSS parts), mirroring `<lr-select>`'s pattern for those two pieces -- left\nunset, neither renders. Deliberately no separate top-of-field `label` prop/slot/part mirroring\n`<lr-select>`'s `form-control-label`: the default slot already *is* this control's visible,\nclickable label (same as `<lr-checkbox>`), so a second label surface would be redundant.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | Label text, rendered next to the track. Clicking it toggles the switch, the same as clicking a checkbox's associated `<label>`. If left empty, set `aria-label` on the host so the control still has an accessible name. |\n| `error` | Custom error content. |\n| `hint` | Custom hint content. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The whole interactive control (`role=\"switch\"`); wraps the track and label. |\n| `error` | The error message. |\n| `form-control` | The outer wrapper around the switch, error and hint. |\n| `hint` | The hint message. |\n| `label` | The wrapper around the default slot. |\n| `thumb` | The circular knob that slides across the track. |\n| `track` | The pill-shaped background.
|
|
12654
|
+
"value": "`<lr-switch>` — a boolean toggle-switch form control. Structurally the\nsame idea as a checkbox (form-associated via `ElementInternals`, click and\nSpace/Enter both toggle) but with switch semantics: `role=\"switch\"` +\n`aria-checked` read to assistive tech as an on/off state rather than a\nchecked/unchecked one, and there is no indeterminate state.\n\n`checked` is not a plain string, so this attaches `ElementInternals`\ndirectly and implements its own `updateValidity()` rather than using the\n`FormAssociated` mixin (that mixin's `value` accessor assumes a string —\nsee `<lr-combobox>` for the same direct-`ElementInternals` shape with a\nnon-string value).\n\nShips an opt-in `hint`/`errorText` form-control chrome (props + matching named slots +\n`hint`/`error` CSS parts), mirroring `<lr-select>`'s pattern for those two pieces -- left\nunset, neither renders. Deliberately no separate top-of-field `label` prop/slot/part mirroring\n`<lr-select>`'s `form-control-label`: the default slot already *is* this control's visible,\nclickable label (same as `<lr-checkbox>`), so a second label surface would be redundant.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | Label text, rendered next to the track. Clicking it toggles the switch, the same as clicking a checkbox's associated `<label>`. If left empty, set `aria-label` on the host so the control still has an accessible name. |\n| `error` | Custom error content. |\n| `hint` | Custom hint content. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The whole interactive control (`role=\"switch\"`); wraps the track and label. |\n| `error` | The error message. |\n| `form-control` | The outer wrapper around the switch, error and hint. |\n| `hint` | The hint message. |\n| `label` | The wrapper around the default slot. |\n| `thumb` | The circular knob that slides across the track. |\n| `track` | The pill-shaped background. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-switch-track-inline-size` (default: `var(--lr-size-2-25rem)`) — Inline size of the track, and (with the block size) the distance the thumb travels when checked.\n- `--lr-switch-track-block-size` (default: `var(--lr-size-1-25rem)`) — Block size of the track; the thumb's diameter is derived from it minus twice `--lr-switch-thumb-offset`.\n- `--lr-switch-thumb-offset` (default: `var(--lr-size-2px)`) — Inset of the thumb from the track's edges."
|
|
12634
12655
|
},
|
|
12635
12656
|
"attributes": [
|
|
12636
12657
|
{
|
|
@@ -12695,7 +12716,7 @@
|
|
|
12695
12716
|
"name": "lr-table",
|
|
12696
12717
|
"description": {
|
|
12697
12718
|
"kind": "markdown",
|
|
12698
|
-
"value": "`<lr-table>` — a presentational, sort/select-aware data table.\n\nHeader/row activation is delegated: one `click` and one `keydown`\nlistener on `<table>` resolve the target via `closest('[data-col-key]'\n| '[data-row-key]')` and a key→object lookup map, instead of allocating\nfresh per-column/per-row closures on every render. Both listeners guard\nagainst nested interactive `cell()` content first (see\n`INTERACTIVE_SELECTOR`) so a button/link/input inside a cell owns its own\nactivation instead of triggering `lr-row-click`.\n\nKeyboard focus follows a roving-tabindex pattern (one `tabindex=\"0\"` stop\namong the header cells, one among the body rows — see `focusedColKey()` /\n`focusedRowKey()`), matching this repo's other `role=\"grid\"`/composite\nwidgets. Left/Right/Home/End move within the header row; Up/Down/Home/End\nmove within the body; Down from the header enters the body's roving stop,\nand Up from the body's first row returns to the header's roving stop.\nEnter/Space still only sort/activate (see `activateColumn()` /\n`activateRow()`).\n\nSet `aria-label` on the host to give the `role=\"grid\"` element an\naccessible name; it's forwarded into the shadow DOM's `<table>`.\n\n`columns[].priority` ('medium' | 'low') hides that column under\n`[part='base']`'s `@container` breakpoints; `[part='reveal-columns-button']`\nforces them all back into view. Rather than a *static* check of whether any\ncolumn merely declares a `priority`, the button (and the public\n`columnsHidden` property, see below) reflects whether a `priority` column\nis *actually* hidden right now — measured via `ResizeObserver` on\n`[part='base']` plus a post-render DOM check — or the public `showAllColumns`\nforce-visible mode is currently active (so there's still a way to toggle\nit back off). `showAllColumns` defaults to `false` and toggles itself on\n`[part='reveal-columns-button']` activation with no external wiring\nrequired, but is also settable up front (property or the reflected\n`show-all-columns` attribute) to restore a previously-persisted\npreference, and readable back — directly or via the `lr-columns-revealed`\nevent — to persist the current one. `columns[].sticky` pins a column's\nheader/cells to the inline-start (default/`true`) or inline-end (`'end'`)\nedge while the table scrolls horizontally.\n\n`expandedContent` (a table-level `(row: T) => unknown`, not a per-column\nhook, since the resulting panel spans every column via `colspan`) makes\nevery row render a leading chevron-toggle cell before its data columns.\n`canExpand` optionally gates which rows actually get an interactive\ntoggle — a row that fails it still gets a blank leading cell for column\nalignment. Which rows are currently open is fully consumer-owned via\n`expandedKeys` (a `Set<string | number>` of row keys, per `rowKey`/\n`keyOf()`) — the table only reads it and emits `lr-row-expand-toggle`\non activation, mirroring `sortKey`/`selectedKey`'s existing\npresentational-only convention.\n\nSelection is opt-in through the `selectionMode` property. Use `single` or\n`multiple` to self-manage row selection; the default `none` remains\npresentational. `selectedKeys` contains the raw keys selected in multiple\nmode.\n\n`filterable` adds a compact search field above the grid. `filterText` is\ncontrolled and emits `lr-filter-change`; `filter` can provide a typed\npredicate, otherwise the row is matched against its JSON representation.\n`pageSize` enables controlled pagination through the existing\n`<lr-pagination>` primitive. Client mode slices `rows`; server mode\nrenders the supplied page unchanged while using `totalItems` for the\nnavigation summary. `loading` keeps the table shell busy and renders an\nindeterminate spinner.\nColumns with `editable: true` open a native text/number editor on\ndouble-click and emit `lr-cell-edit`; row mutation remains consumer-owned.\n`spellcheck`/`autocapitalize`/`autoCorrect` forward to the filter input and, for a `'text'`\n(the default) `editType`, the inline cell editor -- no effect on a `'number'` cell editor.\n`groupBy` inserts non-focusable group header rows before each group; use\n`groupLabel` when the raw group key needs custom content.\n\n`columns[].heatValue` opts a column into heat-tint mode: its numeric return value is normalized\nagainst a shared scale spanning every `heatValue`-defining column across every currently-rendered\nrow (auto-derived, or overridden via `heatTintScale`) and painted as a `color-mix()` background via\nthe retheme-able `--lr-table-heat-tint-lo`/`-hi` custom properties (matching `lr-heatmap`'s own\nramp-token convention). `rowTotal`/`grandTotal` add a trailing column mirroring `expandedContent`'s\nleading one: `rowTotal(row)` renders per-row, `grandTotal(rows)` renders at its intersection with\nthe footer row (only when a column also defines `footer`) — both share `footer`'s own\n\"consumer computes/renders\" contract rather than assuming addition.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The root wrapper around the `<table>` and its footer controls. |\n| `cell` | Each body `<td>`. |\n| `cell-editor` | The native inline cell editor, shown after a double-click on an editable cell. |\n| `expand-toggle-cell` | Each row's (and the header's) leading chevron-toggle cell, rendered only when `expandedContent` is set. |\n| `expanded-cell` | The single `colspan`-spanning `<td>` inside `expanded-row`, containing `expandedContent(row)`. |\n| `expanded-row` | The full-width panel `<tr>` rendered beneath a row whose key is in `expandedKeys`. |\n| `filter` | The optional row-filter input. |\n| `filter-label` | The `<label>` wrapping the filter input. |\n| `foot` | The `<tfoot>`, only rendered when at least one column defines `footer`. |\n| `footer-cell` | A single footer cell. |\n| `footer-row` | The single footer row. |\n| `group-cell` | The full-width group header cell. |\n| `group-row` | A non-focusable group header row. |\n| `head` | The `<thead>` element. |\n| `header-cell` | Each `<th>` header cell. |\n| `loading` | The loading-state wrapper. |\n| `more-button` | The \"load more\" control, shown when `hasMore` is true. |\n| `pagination` | The optional pagination component. |\n| `resize-handle` | The focusable separator used to resize a `resizable` column. |\n| `reveal-columns-button` | The button that toggles `priority`-hidden columns back into view. |\n| `row` | Each body `<tr>`. |\n| `row-expand-icon` | The chevron icon inside `row-expand-toggle`. |\n| `row-expand-toggle` | The `<button>` inside `expand-toggle-cell`, absent for a row that fails `canExpand`. |\n| `row-total-cell` | Each body row's trailing `<td>` holding `rowTotal(row)`, rendered only when `rowTotal` is set. The corresponding footer-row cell (holding `grandTotal`) is a `footer-cell` instead, matching every other footer cell. |\n| `sort-icon` | The chevron shown in the active sortable column's header cell. |\n| `table` | The `<table role=\"grid\">` element. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-table-resize-min-width` (default: `var(--lr-size-3rem)`) — Default minimum width for a resizable column without an explicit pixel `minWidth`.\n- `--lr-table-resize-handle-opacity` (default: `0.12`) — Hover/focus opacity of the resize handle."
|
|
12719
|
+
"value": "`<lr-table>` — a presentational, sort/select-aware data table.\n\nHeader/row activation is delegated: one `click` and one `keydown`\nlistener on `<table>` resolve the target via `closest('[data-col-key]'\n| '[data-row-key]')` and a key→object lookup map, instead of allocating\nfresh per-column/per-row closures on every render. Both listeners guard\nagainst nested interactive `cell()` content first (see\n`INTERACTIVE_SELECTOR`) so a button/link/input inside a cell owns its own\nactivation instead of triggering `lr-row-click`.\n\nKeyboard focus follows a roving-tabindex pattern (one `tabindex=\"0\"` stop\namong the header cells, one among the body rows — see `focusedColKey()` /\n`focusedRowKey()`), matching this repo's other `role=\"grid\"`/composite\nwidgets. Left/Right/Home/End move within the header row; Up/Down/Home/End\nmove within the body; Down from the header enters the body's roving stop,\nand Up from the body's first row returns to the header's roving stop.\nEnter/Space still only sort/activate (see `activateColumn()` /\n`activateRow()`).\n\nSet `aria-label` on the host to give the `role=\"grid\"` element an\naccessible name; it's forwarded into the shadow DOM's `<table>`.\n\n`columns[].priority` ('medium' | 'low') hides that column under\n`[part='base']`'s `@container` breakpoints; `[part='reveal-columns-button']`\nforces them all back into view. Rather than a *static* check of whether any\ncolumn merely declares a `priority`, the button (and the public\n`columnsHidden` property, see below) reflects whether a `priority` column\nis *actually* hidden right now — measured via `ResizeObserver` on\n`[part='base']` plus a post-render DOM check — or the public `showAllColumns`\nforce-visible mode is currently active (so there's still a way to toggle\nit back off). `showAllColumns` defaults to `false` and toggles itself on\n`[part='reveal-columns-button']` activation with no external wiring\nrequired, but is also settable up front (property or the reflected\n`show-all-columns` attribute) to restore a previously-persisted\npreference, and readable back — directly or via the `lr-columns-revealed`\nevent — to persist the current one. `columns[].sticky` pins a column's\nheader/cells to the inline-start (default/`true`) or inline-end (`'end'`)\nedge while the table scrolls horizontally.\n\n`expandedContent` (a table-level `(row: T) => unknown`, not a per-column\nhook, since the resulting panel spans every column via `colspan`) makes\nevery row render a leading chevron-toggle cell before its data columns.\n`canExpand` optionally gates which rows actually get an interactive\ntoggle — a row that fails it still gets a blank leading cell for column\nalignment. Which rows are currently open is fully consumer-owned via\n`expandedKeys` (a `Set<string | number>` of row keys, per `rowKey`/\n`keyOf()`) — the table only reads it and emits `lr-row-expand-toggle`\non activation, mirroring `sortKey`/`selectedKey`'s existing\npresentational-only convention.\n\nSelection is opt-in through the `selectionMode` property. Use `single` or\n`multiple` to self-manage row selection; the default `none` remains\npresentational. `selectedKeys` contains the raw keys selected in multiple\nmode.\n\n`filterable` adds a compact search field above the grid. `filterText` is\ncontrolled and emits `lr-filter-change`; `filter` can provide a typed\npredicate, otherwise the row is matched against its JSON representation.\n`pageSize` enables controlled pagination through the existing\n`<lr-pagination>` primitive. Client mode slices `rows`; server mode\nrenders the supplied page unchanged while using `totalItems` for the\nnavigation summary. `loading` keeps the table shell busy and renders an\nindeterminate spinner.\nColumns with `editable: true` open a native text/number editor on\ndouble-click and emit `lr-cell-edit`; row mutation remains consumer-owned.\n`spellcheck`/`autocapitalize`/`autoCorrect` forward to the filter input and, for a `'text'`\n(the default) `editType`, the inline cell editor -- no effect on a `'number'` cell editor.\n`groupBy` inserts non-focusable group header rows before each group; use\n`groupLabel` when the raw group key needs custom content.\n\n`columns[].heatValue` opts a column into heat-tint mode: its numeric return value is normalized\nagainst a shared scale spanning every `heatValue`-defining column across every currently-rendered\nrow (auto-derived, or overridden via `heatTintScale`) and painted as a `color-mix()` background via\nthe retheme-able `--lr-table-heat-tint-lo`/`-hi` custom properties (matching `lr-heatmap`'s own\nramp-token convention). `rowTotal`/`grandTotal` add a trailing column mirroring `expandedContent`'s\nleading one: `rowTotal(row)` renders per-row, `grandTotal(rows)` renders at its intersection with\nthe footer row (only when a column also defines `footer`) — both share `footer`'s own\n\"consumer computes/renders\" contract rather than assuming addition.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The root wrapper around the `<table>` and its footer controls. |\n| `cell` | Each body `<td>`. |\n| `cell-editor` | The native inline cell editor, shown after a double-click on an editable cell. |\n| `expand-toggle-cell` | Each row's (and the header's) leading chevron-toggle cell, rendered only when `expandedContent` is set. |\n| `expanded-cell` | The single `colspan`-spanning `<td>` inside `expanded-row`, containing `expandedContent(row)`. |\n| `expanded-row` | The full-width panel `<tr>` rendered beneath a row whose key is in `expandedKeys`. |\n| `filter` | The optional row-filter input. |\n| `filter-label` | The `<label>` wrapping the filter input. |\n| `foot` | The `<tfoot>`, only rendered when at least one column defines `footer`. |\n| `footer-cell` | A single footer cell. |\n| `footer-row` | The single footer row. |\n| `group-cell` | The full-width group header cell. |\n| `group-row` | A non-focusable group header row. |\n| `head` | The `<thead>` element. |\n| `header-cell` | Each `<th>` header cell. |\n| `loading` | The loading-state wrapper. |\n| `more-button` | The \"load more\" control, shown when `hasMore` is true. |\n| `pagination` | The optional pagination component. |\n| `resize-handle` | The focusable separator used to resize a `resizable` column. |\n| `reveal-columns-button` | The button that toggles `priority`-hidden columns back into view. |\n| `row` | Each body `<tr>`. |\n| `row-expand-icon` | The chevron icon inside `row-expand-toggle`. |\n| `row-expand-toggle` | The `<button>` inside `expand-toggle-cell`, absent for a row that fails `canExpand`. |\n| `row-total-cell` | Each body row's trailing `<td>` holding `rowTotal(row)`, rendered only when `rowTotal` is set. The corresponding footer-row cell (holding `grandTotal`) is a `footer-cell` instead, matching every other footer cell. |\n| `sort-icon` | The chevron shown in the active sortable column's header cell. |\n| `table` | The `<table role=\"grid\">` element. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-table-resize-min-width` (default: `var(--lr-size-3rem)`) — Default minimum width for a resizable column without an explicit pixel `minWidth`.\n- `--lr-table-resize-handle-opacity` (default: `0.12`) — Hover/focus opacity of the resize handle.\n- `--lr-table-max-height` (default: `none`) — Cap on the scroll container's block size, past which the table body scrolls.\n- `--lr-table-heat-tint-lo` (default: `var(--lr-color-brand-quiet)`) — Low endpoint of the heat-tint ramp used by `heatValue` columns.\n- `--lr-table-heat-tint-hi` (default: `var(--lr-color-brand)`) — High endpoint of the heat-tint ramp used by `heatValue` columns.\n- `--lr-table-heat-t` — This cell's position on the heat-tint ramp, as a percentage string. Set inline by the component on each `[data-heat]` cell; not consumer-settable.\n- `--lr-table-sticky-offset` (default: `0`) — Distance a `sticky` column pins from the inline edge. Measured and set inline per column by the component so multiple sticky columns stack instead of overlapping; falls back to `0` for the first one, or before the first measurement pass."
|
|
12699
12720
|
},
|
|
12700
12721
|
"attributes": [
|
|
12701
12722
|
{
|
|
@@ -12950,7 +12971,7 @@
|
|
|
12950
12971
|
"name": "lr-tag",
|
|
12951
12972
|
"description": {
|
|
12952
12973
|
"kind": "markdown",
|
|
12953
|
-
"value": "`<lr-tag>` — a semantic alias for the compact badge treatment.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | Badge content. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The badge surface.
|
|
12974
|
+
"value": "`<lr-tag>` — a semantic alias for the compact badge treatment.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | Badge content. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The badge surface. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-badge-background` (default: `var(--lr-color-surface)`) — The badge's background. Each non-neutral `variant` sets it to that variant's `-quiet` tint.\n- `--lr-badge-border` (default: `var(--lr-color-border)`) — The badge's border color. Each non-neutral `variant` sets it to that variant's loud color.\n- `--lr-badge-color` (default: `var(--lr-color-text)`) — The badge's text color. Each non-neutral `variant` sets it to that variant's loud color."
|
|
12954
12975
|
},
|
|
12955
12976
|
"attributes": [
|
|
12956
12977
|
{
|
|
@@ -13010,7 +13031,7 @@
|
|
|
13010
13031
|
"name": "lr-terminal",
|
|
13011
13032
|
"description": {
|
|
13012
13033
|
"kind": "markdown",
|
|
13013
|
-
"value": "`<lr-terminal>` — read-only ANSI console for streamed agent/tool output. Not a PTY: no\nstdin/keystroke handling, no cursor-addressed full-screen apps.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `announcer` | The visually-hidden `role=\"status\"` region used when `announce-output` is set. |\n| `base` | The outer container. |\n| `copy-button` | The copy-to-clipboard button. |\n| `download-button` | The download button. |\n| `jump-to-latest` | The pill shown while `follow` is disengaged and new output has arrived. |\n| `line` | One rendered line; carries `data-line-number`, `data-match`, `data-highlight-tone`. Rendered through `<lr-virtual-list>`'s `renderItem`, so it lives inside that element's own shadow root rather than this component's -- this component's own stylesheet reaches it via `lr-virtual-list::part(line)`, one hop of the standard CSS Shadow Parts selector. |\n| `toolbar` | The header row, only rendered when copy/download are enabled. |\n| `viewport` | The `role=\"log\"` scrollable region wrapping the virtualized line list.
|
|
13034
|
+
"value": "`<lr-terminal>` — read-only ANSI console for streamed agent/tool output. Not a PTY: no\nstdin/keystroke handling, no cursor-addressed full-screen apps.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `announcer` | The visually-hidden `role=\"status\"` region used when `announce-output` is set. |\n| `base` | The outer container. |\n| `copy-button` | The copy-to-clipboard button. |\n| `download-button` | The download button. |\n| `jump-to-latest` | The pill shown while `follow` is disengaged and new output has arrived. |\n| `line` | One rendered line; carries `data-line-number`, `data-match`, `data-highlight-tone`. Rendered through `<lr-virtual-list>`'s `renderItem`, so it lives inside that element's own shadow root rather than this component's -- this component's own stylesheet reaches it via `lr-virtual-list::part(line)`, one hop of the standard CSS Shadow Parts selector. |\n| `toolbar` | The header row, only rendered when copy/download are enabled. |\n| `viewport` | The `role=\"log\"` scrollable region wrapping the virtualized line list. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-terminal-height` (default: `var(--lr-size-20rem)`) — Block size of `[part=\"viewport\"]`, the scrollable log region. Not declared on `:host`, so it is inherited — set it on the host or any ancestor."
|
|
13014
13035
|
},
|
|
13015
13036
|
"attributes": [
|
|
13016
13037
|
{
|
|
@@ -13226,7 +13247,7 @@
|
|
|
13226
13247
|
"name": "lr-thinking-panel",
|
|
13227
13248
|
"description": {
|
|
13228
13249
|
"kind": "markdown",
|
|
13229
|
-
"value": "`<lr-thinking-panel>` — a collapsible panel for an AI agent's\nintermediate reasoning/\"thinking\" transcript, kept visually and\nsemantically distinct from its final response. Same collapsible\nheader-button-plus-region shape as `<lr-source-list>`; the default slot\nis entirely free-form (a consumer-composed `<lr-streaming-text>`,\n`<lr-markdown>`, or plain text) — this component has no dependency on\neither and imposes no structure on what's slotted.\n\n`mode` (`'live'` while reasoning is actively streaming in, `'post-hoc'`\nonce it's complete and being reviewed after the fact) drives two concrete\nbehavior differences, not just a styling hook:\n- **Header hint.** While `duration-ms` is unset, `'live'` shows a pulsing\n \"Thinking…\" placeholder in `[part=\"duration\"]`; `'post-hoc'` shows\n nothing there instead (a finished review with no known duration has\n nothing useful to say in that slot). Once `duration-ms` is set, both\n modes show the same static `\"Thought for …\"` text — a `'post-hoc'`\n consumer that captured a duration is free to supply it too.\n- **Auto-scroll.** Only `'live'` mode auto-follows new content appended to\n the default slot while `expanded` (see below); `'post-hoc'` never\n scrolls on its own, since reviewing finished reasoning is expected to\n start from the top like reading any other completed document. This\n library otherwise defaults to *not* editorializing about a host's data\n (see `<lr-empty>`'s plain-`description` stance), but scroll position\n is presentation, not data, so this one behavior difference earns its\n keep rather than being left as a bare visual/semantic hint the host\n would have to reimplement identically itself.\n\nLive-mode auto-scroll (\"stick to bottom\") is the classic chat-transcript\nconvention: while `mode=\"live\"` and `expanded`, new content keeps the\npanel scrolled to its latest line — *unless* the user has manually\nscrolled up to (re-)read earlier content, in which case their position is\nnever yanked away from them. This is tracked continuously via a `scroll`\nlistener on `[part=\"body\"]` (not recomputed from the mutation itself,\nwhich necessarily observes the DOM only *after* it has already changed):\nevery user-driven scroll records whether the body was left within\n`NEAR_BOTTOM_PX` of its own max scroll position, and only a mutation that\narrives while that's still true triggers a follow-up scroll-to-bottom.\nOpening an already-`'live'` panel (or one that later becomes `'live'`)\nalways resets this to \"anchored\" and jumps to the latest content, the same\nway a chat app's own transcript does when you re-open it.\n\nNew content is detected via a `MutationObserver` on this element's own\nlight DOM (`childList`+`subtree`+`characterData`) rather than the default\nslot's `slotchange` event, because `slotchange` only fires when the set of\ntop-level assigned nodes changes — never for a text node mutating *inside*\nan already-slotted element, which is the more likely shape for streamed\nreasoning (a consumer appending chunks to an existing node's `textContent`\nrather than re-slotting a whole new element per token). The one thing this\ncan't see is a mutation entirely inside a slotted custom element's own\nshadow root (e.g. a `<lr-markdown>` re-rendering its shadow tree after a\n`content` property change) — Shadow DOM encapsulation blocks that by\ndesign, and there is no way for this component to reach across that\nboundary. A slotted element whose *own* internal updates should drive this\npanel's auto-scroll needs to append/mutate visible light-DOM text itself\n(as `<lr-streaming-text>` is expected to), or the host can call this\npanel's own `scrollToBottom()` directly.\n\n`aria-controls` linking the header to the body region uses `nextId()`\n(`../../internal/a11y.js`) for a collision-safe id, the same convention\n`<lr-source-list>` and `<lr-widget>` already establish for every\ntoggle-controls-region pairing in this library.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | The reasoning/thinking content. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The outer container. |\n| `body` | The wrapper around the default slot, `hidden` while collapsed. Independently keyboard-focusable (`tabindex=\"0\"`, `role=\"group\"` named from `label`) since it's its own capped-height scrollable region. |\n| `duration` | The formatted duration / \"Thinking…\" placeholder, when shown. |\n| `header` | The clickable header (`<button>`) toggling `expanded`. |\n| `label` | The `label` text. |\n| `toggle` | The chevron indicator inside the header.
|
|
13250
|
+
"value": "`<lr-thinking-panel>` — a collapsible panel for an AI agent's\nintermediate reasoning/\"thinking\" transcript, kept visually and\nsemantically distinct from its final response. Same collapsible\nheader-button-plus-region shape as `<lr-source-list>`; the default slot\nis entirely free-form (a consumer-composed `<lr-streaming-text>`,\n`<lr-markdown>`, or plain text) — this component has no dependency on\neither and imposes no structure on what's slotted.\n\n`mode` (`'live'` while reasoning is actively streaming in, `'post-hoc'`\nonce it's complete and being reviewed after the fact) drives two concrete\nbehavior differences, not just a styling hook:\n- **Header hint.** While `duration-ms` is unset, `'live'` shows a pulsing\n \"Thinking…\" placeholder in `[part=\"duration\"]`; `'post-hoc'` shows\n nothing there instead (a finished review with no known duration has\n nothing useful to say in that slot). Once `duration-ms` is set, both\n modes show the same static `\"Thought for …\"` text — a `'post-hoc'`\n consumer that captured a duration is free to supply it too.\n- **Auto-scroll.** Only `'live'` mode auto-follows new content appended to\n the default slot while `expanded` (see below); `'post-hoc'` never\n scrolls on its own, since reviewing finished reasoning is expected to\n start from the top like reading any other completed document. This\n library otherwise defaults to *not* editorializing about a host's data\n (see `<lr-empty>`'s plain-`description` stance), but scroll position\n is presentation, not data, so this one behavior difference earns its\n keep rather than being left as a bare visual/semantic hint the host\n would have to reimplement identically itself.\n\nLive-mode auto-scroll (\"stick to bottom\") is the classic chat-transcript\nconvention: while `mode=\"live\"` and `expanded`, new content keeps the\npanel scrolled to its latest line — *unless* the user has manually\nscrolled up to (re-)read earlier content, in which case their position is\nnever yanked away from them. This is tracked continuously via a `scroll`\nlistener on `[part=\"body\"]` (not recomputed from the mutation itself,\nwhich necessarily observes the DOM only *after* it has already changed):\nevery user-driven scroll records whether the body was left within\n`NEAR_BOTTOM_PX` of its own max scroll position, and only a mutation that\narrives while that's still true triggers a follow-up scroll-to-bottom.\nOpening an already-`'live'` panel (or one that later becomes `'live'`)\nalways resets this to \"anchored\" and jumps to the latest content, the same\nway a chat app's own transcript does when you re-open it.\n\nNew content is detected via a `MutationObserver` on this element's own\nlight DOM (`childList`+`subtree`+`characterData`) rather than the default\nslot's `slotchange` event, because `slotchange` only fires when the set of\ntop-level assigned nodes changes — never for a text node mutating *inside*\nan already-slotted element, which is the more likely shape for streamed\nreasoning (a consumer appending chunks to an existing node's `textContent`\nrather than re-slotting a whole new element per token). The one thing this\ncan't see is a mutation entirely inside a slotted custom element's own\nshadow root (e.g. a `<lr-markdown>` re-rendering its shadow tree after a\n`content` property change) — Shadow DOM encapsulation blocks that by\ndesign, and there is no way for this component to reach across that\nboundary. A slotted element whose *own* internal updates should drive this\npanel's auto-scroll needs to append/mutate visible light-DOM text itself\n(as `<lr-streaming-text>` is expected to), or the host can call this\npanel's own `scrollToBottom()` directly.\n\n`aria-controls` linking the header to the body region uses `nextId()`\n(`../../internal/a11y.js`) for a collision-safe id, the same convention\n`<lr-source-list>` and `<lr-widget>` already establish for every\ntoggle-controls-region pairing in this library.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | The reasoning/thinking content. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The outer container. |\n| `body` | The wrapper around the default slot, `hidden` while collapsed. Independently keyboard-focusable (`tabindex=\"0\"`, `role=\"group\"` named from `label`) since it's its own capped-height scrollable region. |\n| `duration` | The formatted duration / \"Thinking…\" placeholder, when shown. |\n| `header` | The clickable header (`<button>`) toggling `expanded`. |\n| `label` | The `label` text. |\n| `toggle` | The chevron indicator inside the header. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-thinking-panel-max-block-size` (default: `var(--lr-size-16rem)`) — Cap on how tall the expanded reasoning transcript grows before `[part=\"body\"]` scrolls internally."
|
|
13230
13251
|
},
|
|
13231
13252
|
"attributes": [
|
|
13232
13253
|
{
|
|
@@ -13339,7 +13360,7 @@
|
|
|
13339
13360
|
"name": "lr-time-input",
|
|
13340
13361
|
"description": {
|
|
13341
13362
|
"kind": "markdown",
|
|
13342
|
-
"value": "`<lr-time-input>` — a native time-input alias with Lyra form chrome and events.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| `end` | Adornment after the native input and built-in actions. |\n| `error` | Custom error content. |\n| `hint` | Custom hint content. |\n| `label` | Custom label content. |\n| `start` | Adornment before the native input. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `clear-button` | The clear action, rendered for non-empty clearable text/search inputs. |\n| `end` | Wrapper around the `end` adornment slot. |\n| `error` | The error message. |\n| `form-control` | The outer wrapper around label, input, error and hint. |\n| `form-control-label` | The `<label>` element. |\n| `hint` | The hint message. |\n| `input` | The native `<input>` element. |\n| `input-wrapper` | The row wrapping the native input and the password-toggle button. |\n| `password-toggle` | The show/hide-password button, present only when `type=\"password\"`. |\n| `start` | Wrapper around the `start` adornment slot. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-input-control-min-height` — Outer control height floor, scaled by `size`."
|
|
13363
|
+
"value": "`<lr-time-input>` — a native time-input alias with Lyra form chrome and events.\n\nAdds no API of its own beyond re-typing the inherited `min`/`max` bounds for time values; every\nother property, event, slot and part is `<lr-input>`'s.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| `end` | Adornment after the native input and built-in actions. |\n| `error` | Custom error content. |\n| `hint` | Custom hint content. |\n| `label` | Custom label content. |\n| `start` | Adornment before the native input. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `clear-button` | The clear action, rendered for non-empty clearable text/search inputs. |\n| `end` | Wrapper around the `end` adornment slot. |\n| `error` | The error message. |\n| `form-control` | The outer wrapper around label, input, error and hint. |\n| `form-control-label` | The `<label>` element. |\n| `hint` | The hint message. |\n| `input` | The native `<input>` element. |\n| `input-wrapper` | The row wrapping the native input and the password-toggle button. |\n| `password-toggle` | The show/hide-password button, present only when `type=\"password\"`. |\n| `start` | Wrapper around the `start` adornment slot. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-input-control-min-height` — Outer control height floor, scaled by `size`.\n- `--lr-input-padding-block` — Block padding of the native input, scaled by `size`.\n- `--lr-input-padding-inline` — Inline padding of the control row, scaled by `size`.\n- `--lr-input-font-size` — Font size of the native input, scaled by `size`."
|
|
13343
13364
|
},
|
|
13344
13365
|
"attributes": [
|
|
13345
13366
|
{
|
|
@@ -13423,14 +13444,14 @@
|
|
|
13423
13444
|
"name": "max",
|
|
13424
13445
|
"description": {
|
|
13425
13446
|
"kind": "markdown",
|
|
13426
|
-
"value": "
|
|
13447
|
+
"value": "Latest selectable time, in the same form as `min`, reported by the native input as\n`rangeOverflow`. Defaults to `undefined` (no upper bound).\n\nType: `number | string | undefined`"
|
|
13427
13448
|
}
|
|
13428
13449
|
},
|
|
13429
13450
|
{
|
|
13430
13451
|
"name": "min",
|
|
13431
13452
|
"description": {
|
|
13432
13453
|
"kind": "markdown",
|
|
13433
|
-
"value": "
|
|
13454
|
+
"value": "Earliest selectable time, as the native `<input type=\"time\">` spells it (`HH:MM`, or\n`HH:MM:SS` alongside a seconds-precision `step`). Forwarded verbatim to that native input,\nwhose own constraint validation reports `rangeUnderflow`. Defaults to `undefined` (no lower\nbound). Unlike `<lr-input type=\"number\">`'s numeric `min`, the attribute form is *not*\nparsed as a number.\n\nType: `number | string | undefined`"
|
|
13434
13455
|
}
|
|
13435
13456
|
},
|
|
13436
13457
|
{
|
|
@@ -13590,7 +13611,7 @@
|
|
|
13590
13611
|
"name": "lr-timeline-item",
|
|
13591
13612
|
"description": {
|
|
13592
13613
|
"kind": "markdown",
|
|
13593
|
-
"value": "`<lr-timeline-item>` — one marker + title + optional timestamp + optional description row inside\n`<lr-timeline>`'s default slot. See that component's class doc for the overall shape; this class\ndoc covers the rail-connecting mechanism this item's own `[part=\"track\"]`/`[part=\"rail\"]`\nimplement.\n\nEach item owns and renders *its own trailing rail segment*, not the whole connecting line — think\nof it as a linked list of line segments, one per item, each reaching toward the next item's marker.\n`[part=\"track\"]` (marker then rail) is a flex sibling of `[part=\"content\"]` inside `[part=\"base\"]`,\nwith `[part=\"base\"]`'s default `align-items: stretch` left alone — so `[part=\"track\"]`'s\ncross-axis size automatically equals `[part=\"content\"]`'s own size, including any content-driven\nheight from a long slotted description. `[part=\"rail\"]` is `flex: 1 1 auto` inside `[part=\"track\"]`,\nso once the marker (fixed size) takes its share, the rail fills the rest — no JS measurement, no\n`ResizeObserver`, no absolute positioning. `[part=\"content\"]` carries a trailing logical padding\n(block-end in vertical mode, inline-end in horizontal mode) equal to `<lr-timeline>`'s\n`--lr-timeline-gap`, so the stretched rail visually reaches *into* the gap before the next item's\nmarker with no seam. The last item's rail is suppressed by `<lr-timeline>`'s own pure-CSS\n`::slotted(:last-child)` rule (see that component's stylesheet) — no JS coordination between the\ntwo components is needed anywhere in this mechanism.\n\nA pure display row: no events, no keyboard interaction, and no selection/expansion state of its\nown — a deliberate scope decision, not an oversight. An earlier \"interactive row\" design (mirroring\n`<lr-conversation-item>`'s clickable `role=\"button\"` row) was considered and dropped: this\ncomponent's `title` and `description` are slots that routinely contain focusable content of their\nown (a link, a button) — wrapping them in an ancestor `role=\"button\"` would trip axe's\n`nested-interactive` rule the moment a consumer slots one in, unlike `<lr-conversation-item>`,\nwhich keeps its own focusable content in a sibling `actions` slot specifically to avoid that. A\nconsumer who wants a clickable entry slots an actual interactive element inside `description`\nthemselves — `role=\"listitem\"` places no restriction on focusable descendants. Not a\nform-associated control — no value to submit, no label/hint/error chrome.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | The item's primary heading/title content. Rich content allowed (inline code, a badge, a link) — nothing renders when this slot is empty, a valid if unusual usage. |\n| `description` | Secondary/body content below the title (explanatory text, a diff snippet, a \"view details\" affordance). `[part=\"description\"]` is hidden entirely when this slot is empty. |\n| `icon` | Leading marker/glyph override (e.g. a `<lr-icon>`, an emoji, a small avatar-like element). Falls back to a plain color-coded dot (driven by `variant`) when empty. |\n| `timestamp` | Full override of the timestamp presentation (e.g. `<lr-format-date slot=\"timestamp\">`, a custom string, a differently-configured `<lr-relative-time>`). Wins over the `timestamp` property whenever it has assigned content, even if `timestamp` is also set. Falls back to an internally-rendered `<lr-relative-time>` (driven by the `timestamp` property) wrapped in a `<time>`, or renders nothing at all (`[part=\"timestamp\"]` hidden) when neither the slot nor a valid `timestamp` is present. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The root wrapper. Flex container; `flex-direction` is driven by the `--lr-timeline-item-direction` custom property inherited from `<lr-timeline>`'s `:host` -- `row` in vertical-timeline mode (marker beside content), `column` in horizontal-timeline mode (marker above content). |\n| `content` | Wrapper around `header` and `description`. |\n| `description` | Wrapper around the `description` slot. Hidden entirely when the slot is empty. |\n| `header` | Flex row wrapping `title` and `timestamp`; wraps at narrow widths rather than truncating either. |\n| `marker` | The dot/icon circle. Always `aria-hidden=\"true\"` -- purely decorative, the item's accessible content is its title/timestamp/description text. |\n| `rail` | The connecting line segment extending from this item's marker toward the next item's marker. Hidden (`visibility: hidden`, not removed) for the last item in a `<lr-timeline>` -- see the class doc. |\n| `timestamp` | Wrapper around the `timestamp` slot / the internally-rendered `<time>` fallback. Hidden entirely when there's nothing to show. |\n| `title` | Wrapper around the default (title) slot. |\n| `track` | Wrapper around the marker and rail (the \"spine\"). Always the opposite axis from `[part=\"base\"]` -- see the class doc's rail-mechanism note. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-timeline-marker-size` (default: `var(--lr-size-1-25rem)`) — Diameter of the marker circle (both inline-size and block-size, so the default dot stays circular).\n- `--lr-timeline-rail-width` (default: `var(--lr-border-width-medium)`) — Thickness of the connecting rail line.\n- `--lr-timeline-rail-color` (default: `var(--lr-color-border)`) — Color of the connecting rail line. A component-scoped property (not just inlining `var(--lr-color-border)` at every use site) so a consumer can retint just the rail without touching the library-wide border color elsewhere.\n- `--lr-timeline-marker-color` (default: `var(--lr-color-text-quiet)`) — Marker fill/accent color. Swapped per `variant` (see the class doc's variant table); a consumer overriding this directly on one item wins over the variant default via normal CSS cascade/specificity."
|
|
13614
|
+
"value": "`<lr-timeline-item>` — one marker + title + optional timestamp + optional description row inside\n`<lr-timeline>`'s default slot. See that component's class doc for the overall shape; this class\ndoc covers the rail-connecting mechanism this item's own `[part=\"track\"]`/`[part=\"rail\"]`\nimplement.\n\nEach item owns and renders *its own trailing rail segment*, not the whole connecting line — think\nof it as a linked list of line segments, one per item, each reaching toward the next item's marker.\n`[part=\"track\"]` (marker then rail) is a flex sibling of `[part=\"content\"]` inside `[part=\"base\"]`,\nwith `[part=\"base\"]`'s default `align-items: stretch` left alone — so `[part=\"track\"]`'s\ncross-axis size automatically equals `[part=\"content\"]`'s own size, including any content-driven\nheight from a long slotted description. `[part=\"rail\"]` is `flex: 1 1 auto` inside `[part=\"track\"]`,\nso once the marker (fixed size) takes its share, the rail fills the rest — no JS measurement, no\n`ResizeObserver`, no absolute positioning. `[part=\"content\"]` carries a trailing logical padding\n(block-end in vertical mode, inline-end in horizontal mode) equal to `<lr-timeline>`'s\n`--lr-timeline-gap`, so the stretched rail visually reaches *into* the gap before the next item's\nmarker with no seam. The last item's rail is suppressed by `<lr-timeline>`'s own pure-CSS\n`::slotted(:last-child)` rule (see that component's stylesheet) — no JS coordination between the\ntwo components is needed anywhere in this mechanism.\n\nA pure display row: no events, no keyboard interaction, and no selection/expansion state of its\nown — a deliberate scope decision, not an oversight. An earlier \"interactive row\" design (mirroring\n`<lr-conversation-item>`'s clickable `role=\"button\"` row) was considered and dropped: this\ncomponent's `title` and `description` are slots that routinely contain focusable content of their\nown (a link, a button) — wrapping them in an ancestor `role=\"button\"` would trip axe's\n`nested-interactive` rule the moment a consumer slots one in, unlike `<lr-conversation-item>`,\nwhich keeps its own focusable content in a sibling `actions` slot specifically to avoid that. A\nconsumer who wants a clickable entry slots an actual interactive element inside `description`\nthemselves — `role=\"listitem\"` places no restriction on focusable descendants. Not a\nform-associated control — no value to submit, no label/hint/error chrome.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | The item's primary heading/title content. Rich content allowed (inline code, a badge, a link) — nothing renders when this slot is empty, a valid if unusual usage. |\n| `description` | Secondary/body content below the title (explanatory text, a diff snippet, a \"view details\" affordance). `[part=\"description\"]` is hidden entirely when this slot is empty. |\n| `icon` | Leading marker/glyph override (e.g. a `<lr-icon>`, an emoji, a small avatar-like element). Falls back to a plain color-coded dot (driven by `variant`) when empty. |\n| `timestamp` | Full override of the timestamp presentation (e.g. `<lr-format-date slot=\"timestamp\">`, a custom string, a differently-configured `<lr-relative-time>`). Wins over the `timestamp` property whenever it has assigned content, even if `timestamp` is also set. Falls back to an internally-rendered `<lr-relative-time>` (driven by the `timestamp` property) wrapped in a `<time>`, or renders nothing at all (`[part=\"timestamp\"]` hidden) when neither the slot nor a valid `timestamp` is present. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The root wrapper. Flex container; `flex-direction` is driven by the `--lr-timeline-item-direction` custom property inherited from `<lr-timeline>`'s `:host` -- `row` in vertical-timeline mode (marker beside content), `column` in horizontal-timeline mode (marker above content). |\n| `content` | Wrapper around `header` and `description`. |\n| `description` | Wrapper around the `description` slot. Hidden entirely when the slot is empty. |\n| `header` | Flex row wrapping `title` and `timestamp`; wraps at narrow widths rather than truncating either. |\n| `marker` | The dot/icon circle. Always `aria-hidden=\"true\"` -- purely decorative, the item's accessible content is its title/timestamp/description text. |\n| `rail` | The connecting line segment extending from this item's marker toward the next item's marker. Hidden (`visibility: hidden`, not removed) for the last item in a `<lr-timeline>` -- see the class doc. |\n| `timestamp` | Wrapper around the `timestamp` slot / the internally-rendered `<time>` fallback. Hidden entirely when there's nothing to show. |\n| `title` | Wrapper around the default (title) slot. |\n| `track` | Wrapper around the marker and rail (the \"spine\"). Always the opposite axis from `[part=\"base\"]` -- see the class doc's rail-mechanism note. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-timeline-marker-size` (default: `var(--lr-size-1-25rem)`) — Diameter of the marker circle (both inline-size and block-size, so the default dot stays circular).\n- `--lr-timeline-rail-width` (default: `var(--lr-border-width-medium)`) — Thickness of the connecting rail line.\n- `--lr-timeline-rail-color` (default: `var(--lr-color-border)`) — Color of the connecting rail line. A component-scoped property (not just inlining `var(--lr-color-border)` at every use site) so a consumer can retint just the rail without touching the library-wide border color elsewhere.\n- `--lr-timeline-marker-color` (default: `var(--lr-color-text-quiet)`) — Marker fill/accent color. Swapped per `variant` (see the class doc's variant table); a consumer overriding this directly on one item wins over the variant default via normal CSS cascade/specificity.\n- `--lr-timeline-item-direction` (default: `row`) — Internal orientation plumbing, not a retheming knob: `[part=\"base\"]`'s `flex-direction`, set by an ancestor `<lr-timeline>`'s `:host` and inherited across the slot boundary (`row` vertical, `column` horizontal). The `row` fallback applies when the item is used standalone.\n- `--lr-timeline-item-track-direction` (default: `column`) — Internal orientation plumbing, not a retheming knob: `[part=\"track\"]`'s `flex-direction`, always the opposite axis from `--lr-timeline-item-direction` and set alongside it by `<lr-timeline>`.\n- `--lr-timeline-item-gap-block-end` (default: `0`) — Internal orientation plumbing, not a retheming knob: `[part=\"content\"]`'s `padding-block-end`, set by a vertical `<lr-timeline>` so the rail reaches the next item's marker. `0` when standalone or horizontal; retheme `--lr-timeline-gap` on `<lr-timeline>` instead.\n- `--lr-timeline-item-gap-inline-end` (default: `0`) — Internal orientation plumbing, not a retheming knob: the inline-axis counterpart of `--lr-timeline-item-gap-block-end`, non-zero only under a horizontal `<lr-timeline>`.\n- `--lr-timeline-item-rail-visibility` (default: `visible`) — Internal plumbing, not a retheming knob: `[part=\"rail\"]`'s `visibility`, set to `hidden` by `<lr-timeline>`'s `::slotted(:last-child)` rule so the final item has no trailing rail."
|
|
13594
13615
|
},
|
|
13595
13616
|
"attributes": [
|
|
13596
13617
|
{
|
|
@@ -13627,7 +13648,7 @@
|
|
|
13627
13648
|
"name": "lr-toast",
|
|
13628
13649
|
"description": {
|
|
13629
13650
|
"kind": "markdown",
|
|
13630
|
-
"value": "`<lr-toast>` — the stacking toast region. One per page is recommended.\nMirrors the Web Awesome `<wa-toast>` API under the `lr-` prefix.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | `<lr-toast-item>` elements. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `stack` | The fl-column container holding the items.
|
|
13651
|
+
"value": "`<lr-toast>` — the stacking toast region. One per page is recommended.\nMirrors the Web Awesome `<wa-toast>` API under the `lr-` prefix.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | `<lr-toast-item>` elements. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `stack` | The fl-column container holding the items. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-toast-gap` (default: `var(--lr-space-s)`) — Gap between stacked items.\n- `--lr-toast-width` (default: `var(--lr-size-28rem)`) — Inline size of the stack, capped by the viewport minus the placement insets.\n- `--lr-toast-accent-width` (default: `var(--lr-size-4px)`) — Width of a slotted item's accent bar. Read by `<lr-toast-item>`'s own stylesheet, so set it on the item.\n- `--lr-toast-accent-color` (default: `var(--lr-color-border)`) — Accent bar / icon color of a slotted item, auto-swapped per its `variant`. Read by `<lr-toast-item>`, so set it on the item.\n- `--lr-toast-padding` (default: `var(--lr-space-m)`) — Padding of a slotted item, auto-swapped per its `size`. Read by `<lr-toast-item>`, so set it on the item.\n- `--lr-toast-font-size` (default: `var(--lr-font-size-md)`) — Font size of a slotted item, auto-swapped per its `size`. Read by `<lr-toast-item>`, so set it on the item.\n- `--lr-toast-show-duration` (default: `var(--lr-transition-base, 180ms ease-out)`) — Show transition of a slotted item. Read by `<lr-toast-item>`, so set it on the item.\n- `--lr-toast-hide-duration` (default: `var(--lr-transition-base, 180ms ease-out)`) — Hide transition of a slotted item. Read by `<lr-toast-item>`, so set it on the item."
|
|
13631
13652
|
},
|
|
13632
13653
|
"attributes": [
|
|
13633
13654
|
{
|
|
@@ -13650,7 +13671,7 @@
|
|
|
13650
13671
|
"name": "lr-toast-item",
|
|
13651
13672
|
"description": {
|
|
13652
13673
|
"kind": "markdown",
|
|
13653
|
-
"value": "`<lr-toast-item>` — a single toast notification.\nMirrors the Web Awesome `<wa-toast-item>` API under the `lr-` prefix.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | The message content. |\n| `icon` | Optional icon shown at the start. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `accent` | The colored accent bar. |\n| `close-button` | The dismiss button. |\n| `content` | The message wrapper. |\n| `icon` | The icon wrapper. |\n| `toast-item` | The outer container.
|
|
13674
|
+
"value": "`<lr-toast-item>` — a single toast notification.\nMirrors the Web Awesome `<wa-toast-item>` API under the `lr-` prefix.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | The message content. |\n| `icon` | Optional icon shown at the start. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `accent` | The colored accent bar. |\n| `close-button` | The dismiss button. |\n| `content` | The message wrapper. |\n| `icon` | The icon wrapper. |\n| `toast-item` | The outer container. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-toast-accent-width` (default: `var(--lr-size-4px)`) — Width of the accent bar, and the extra inline-start padding reserved for it.\n- `--lr-toast-accent-color` (default: `var(--lr-color-border)`) — Color of the accent bar and the icon, auto-swapped per `variant`.\n- `--lr-toast-padding` (default: `var(--lr-space-m)`) — Padding of the item, auto-swapped per `size`.\n- `--lr-toast-font-size` (default: `var(--lr-font-size-md)`) — Font size of the item, auto-swapped per `size`.\n- `--lr-toast-show-duration` (default: `var(--lr-transition-base, 180ms ease-out)`) — Opacity/transform transition used while showing.\n- `--lr-toast-hide-duration` (default: `var(--lr-transition-base, 180ms ease-out)`) — Opacity/transform transition used while hiding."
|
|
13654
13675
|
},
|
|
13655
13676
|
"attributes": [
|
|
13656
13677
|
{
|
|
@@ -13694,7 +13715,7 @@
|
|
|
13694
13715
|
"name": "lr-token-input",
|
|
13695
13716
|
"description": {
|
|
13696
13717
|
"kind": "markdown",
|
|
13697
|
-
"value": "`<lr-token-input>` — an editable, form-associated list of removable tokens.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| `error` | Validation message. |\n| `hint` | Supporting text. |\n| `label` | Visible label content. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `error` | Validation message. |\n| `form-control` | Outer control wrapper. |\n| `form-control-label` | Label. |\n| `hint` | Supporting text. |\n| `input` | Native text input. |\n| `input-wrapper` | Token and input row. |\n| `remove` | Token remove button. |\n| `token` | Individual token.
|
|
13718
|
+
"value": "`<lr-token-input>` — an editable, form-associated list of removable tokens.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| `error` | Validation message. |\n| `hint` | Supporting text. |\n| `label` | Visible label content. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `error` | Validation message. |\n| `form-control` | Outer control wrapper. |\n| `form-control-label` | Label. |\n| `hint` | Supporting text. |\n| `input` | Native text input. |\n| `input-wrapper` | Token and input row. |\n| `remove` | Token remove button. |\n| `token` | Individual token. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-token-input-input-inline-size` (default: `var(--lr-size-8rem)`) — `flex-basis` of the native text input within the token row.\n- `--lr-token-input-min-input-inline-size` (default: `var(--lr-size-4rem)`) — Inline-size floor of the native text input, so it stays usable once tokens wrap."
|
|
13698
13719
|
},
|
|
13699
13720
|
"attributes": [
|
|
13700
13721
|
{
|
|
@@ -13780,7 +13801,7 @@
|
|
|
13780
13801
|
"name": "lr-tool-approval-dialog",
|
|
13781
13802
|
"description": {
|
|
13782
13803
|
"kind": "markdown",
|
|
13783
|
-
"value": "`<lr-tool-approval-dialog>` — a human-in-the-loop gate: presents one\nproposed tool/function call (`toolName` + `args`) and blocks an agent from\nexecuting it until a person explicitly approves or denies it, with an\noptional inline \"edit the arguments before approving\" step.\n\nThis renders its own dialog panel rather than nesting a `<lr-dialog>` in\nits shadow template. Shared overlay infrastructure coordinates stacking,\nfocus trapping, Escape/backdrop dismissal, and focus return with every\nother overlay in the same document.\n\nApprove/Deny/Edit are built-in chrome (not a `footer` slot a consumer must\nassemble) — this component's interaction shape is fixed enough (there is\nexactly one correct set of actions for \"approve this call\") that requiring\nevery consumer to re-build it would just be boilerplate. A `footer` slot is\nstill offered for *supplementary* content a consumer wants alongside those\nbuttons (e.g. a \"remember this choice for this tool\" checkbox) — its\ncontent renders to the start of the action row, before Deny/Edit/Approve.\n\nEditing: while `editable`, an Edit button swaps the read-only\n`<lr-json-viewer>` for a plain `<textarea>` pre-filled with\n`JSON.stringify(args, null, 2)`. Every keystroke is re-validated with\n`JSON.parse` — the Approve button is `disabled` for as long as the current\ntextarea content fails to parse, so a malformed edit can never be silently\napproved as either the broken text or a stale copy of the original args.\nThe editor defaults to `spellcheck=\"false\"`, `autocapitalize=\"off\"`,\n`autocorrect=\"off\"`, and `autocomplete=\"off\"` because its content is raw\nJSON, never prose. The corresponding native editing properties remain\nconfigurable for integrations that need different browser behavior.\nThe same button relabels to \"Cancel\" while editing; clicking it discards\nthe draft entirely and returns to the read-only view of the *original*\n`args` — there is no separate \"save\" step independent of Approve itself.\nBoth `editing` and any in-progress draft reset back to the read-only view\nevery time the dialog transitions from closed to open, so a reused\ninstance never leaks one proposal's half-finished edit into the next.\n`editable` flipping to `false` mid-edit does the same (see `willUpdate()`)\nand, if the textarea it unmounts still held focus, `updated()` refocuses\nDeny so the focus trap keeps engaging instead of silently letting focus\nfall through to the document.\n\nInitial focus deliberately does *not* land on Approve:\napproving a tool call is a consequential, potentially irreversible action,\nso a user who opens this dialog and reflexively presses Enter/Space before\nreading anything should deny, not approve. Deny gets the initial focus\ninstead — the same \"focus the safe action\" convention a native destructive-\nconfirmation dialog (delete, discard, etc.) typically follows for its own\nCancel button — rather than the inert dialog panel, which would need an\nextra Tab press before *any* action is reachable at all.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| `footer` | Optional supplementary content (e.g. a \"remember this choice\" checkbox), rendered before the built-in Deny/Edit/Approve buttons. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `approve-button` | The built-in Approve button — `disabled` while an in-progress edit is invalid JSON. |\n| `args-editor` | The raw-JSON `<textarea>` shown while editing. |\n| `args-view` | The read-only `<lr-json-viewer>` shown while not editing. |\n| `backdrop` | The full-viewport scrim behind the panel. |\n| `body` | The wrapper around the args view/editor. |\n| `deny-button` | The built-in Deny button. |\n| `edit-button` | The built-in Edit/Cancel toggle button (only rendered while `editable`). |\n| `error` | The inline \"invalid JSON\" message, shown only while editing with unparseable content. |\n| `footer` | The action row wrapping the `footer` slot and the built-in buttons. |\n| `header` | The wrapper around the heading. |\n| `panel` | The dialog panel itself (`role=\"dialog\"` while open). |\n| `tool-name` | The `toolName` text within the heading.
|
|
13804
|
+
"value": "`<lr-tool-approval-dialog>` — a human-in-the-loop gate: presents one\nproposed tool/function call (`toolName` + `args`) and blocks an agent from\nexecuting it until a person explicitly approves or denies it, with an\noptional inline \"edit the arguments before approving\" step.\n\nThis renders its own dialog panel rather than nesting a `<lr-dialog>` in\nits shadow template. Shared overlay infrastructure coordinates stacking,\nfocus trapping, Escape/backdrop dismissal, and focus return with every\nother overlay in the same document.\n\nApprove/Deny/Edit are built-in chrome (not a `footer` slot a consumer must\nassemble) — this component's interaction shape is fixed enough (there is\nexactly one correct set of actions for \"approve this call\") that requiring\nevery consumer to re-build it would just be boilerplate. A `footer` slot is\nstill offered for *supplementary* content a consumer wants alongside those\nbuttons (e.g. a \"remember this choice for this tool\" checkbox) — its\ncontent renders to the start of the action row, before Deny/Edit/Approve.\n\nEditing: while `editable`, an Edit button swaps the read-only\n`<lr-json-viewer>` for a plain `<textarea>` pre-filled with\n`JSON.stringify(args, null, 2)`. Every keystroke is re-validated with\n`JSON.parse` — the Approve button is `disabled` for as long as the current\ntextarea content fails to parse, so a malformed edit can never be silently\napproved as either the broken text or a stale copy of the original args.\nThe editor defaults to `spellcheck=\"false\"`, `autocapitalize=\"off\"`,\n`autocorrect=\"off\"`, and `autocomplete=\"off\"` because its content is raw\nJSON, never prose. The corresponding native editing properties remain\nconfigurable for integrations that need different browser behavior.\nThe same button relabels to \"Cancel\" while editing; clicking it discards\nthe draft entirely and returns to the read-only view of the *original*\n`args` — there is no separate \"save\" step independent of Approve itself.\nBoth `editing` and any in-progress draft reset back to the read-only view\nevery time the dialog transitions from closed to open, so a reused\ninstance never leaks one proposal's half-finished edit into the next.\n`editable` flipping to `false` mid-edit does the same (see `willUpdate()`)\nand, if the textarea it unmounts still held focus, `updated()` refocuses\nDeny so the focus trap keeps engaging instead of silently letting focus\nfall through to the document.\n\nInitial focus deliberately does *not* land on Approve:\napproving a tool call is a consequential, potentially irreversible action,\nso a user who opens this dialog and reflexively presses Enter/Space before\nreading anything should deny, not approve. Deny gets the initial focus\ninstead — the same \"focus the safe action\" convention a native destructive-\nconfirmation dialog (delete, discard, etc.) typically follows for its own\nCancel button — rather than the inert dialog panel, which would need an\nextra Tab press before *any* action is reachable at all.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| `footer` | Optional supplementary content (e.g. a \"remember this choice\" checkbox), rendered before the built-in Deny/Edit/Approve buttons. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `approve-button` | The built-in Approve button — `disabled` while an in-progress edit is invalid JSON. |\n| `args-editor` | The raw-JSON `<textarea>` shown while editing. |\n| `args-view` | The read-only `<lr-json-viewer>` shown while not editing. |\n| `backdrop` | The full-viewport scrim behind the panel. |\n| `body` | The wrapper around the args view/editor. |\n| `deny-button` | The built-in Deny button. |\n| `edit-button` | The built-in Edit/Cancel toggle button (only rendered while `editable`). |\n| `error` | The inline \"invalid JSON\" message, shown only while editing with unparseable content. |\n| `footer` | The action row wrapping the `footer` slot and the built-in buttons. |\n| `header` | The wrapper around the heading. |\n| `panel` | The dialog panel itself (`role=\"dialog\"` while open). |\n| `tool-name` | The `toolName` text within the heading. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-tool-approval-dialog-overlay-color` (default: `var(--lr-color-overlay)`) — Backdrop scrim color.\n- `--lr-tool-approval-dialog-mono-font` (default: `var(--lr-font-mono)`) — Font family for the tool name and the raw-JSON args editor."
|
|
13784
13805
|
},
|
|
13785
13806
|
"attributes": [
|
|
13786
13807
|
{
|
|
@@ -13866,7 +13887,7 @@
|
|
|
13866
13887
|
"name": "lr-tool-call-chip",
|
|
13867
13888
|
"description": {
|
|
13868
13889
|
"kind": "markdown",
|
|
13869
|
-
"value": "`<lr-tool-call-chip>` — a compact inline pill representing one tool/\nfunction call an agent made mid-conversation, e.g.\n`web_search: Searching web…` with a `running` spinner. It owns no detail\nsurface of its own: clicking (or Enter/Space-activating) it only fires\n`lr-tool-call-chip-select` (plus, for one minor cycle, the deprecated\n`lr-tool-chip-select` alias) — a consumer wires that to opening a\n`<lr-tool-result-dialog>` (or anything else) at the call site. Keeping\nthe two decoupled means a chip can be reused wherever a compact call\nsummary is useful, with or without a detail surface behind it.\n\nThe default slot is *not* the chip's visible content — the chip's own\nlabel is always built from `name`/`summary`/`status`/`duration-ms`. It's\nreserved for optional rich detail content (e.g. the tool's raw arguments,\na short preview) shown in a floating tooltip on hover/focus, positioned\nwith `internal/positioner.js`'s `place()` the same way `<lr-combobox>`\npositions its listbox. No tooltip is shown at all when the slot carries no\ncontent — hovering an empty chip does nothing. Hover and keyboard focus are\ntracked as independent reasons to keep the tooltip open (mirrors\n`<lr-citation-badge>`'s popover), so releasing one modality while the\nother is still active doesn't close it, and the trigger button's\n`aria-describedby` points at the tooltip's id whenever it's open and has\ncontent, so the association reaches assistive tech too.\n\nThe `icon` slot overrides the built-in per-status glyph entirely via the\nplatform's own slot-fallback-content mechanism (`<slot\nname=\"icon\">${fallback}</slot>` — the same pattern `<lr-stat>`'s\n`caption` slot and `<lr-file-input>`'s default slot already use):\nwhatever is assigned to `slot=\"icon\"` wins; otherwise the `icon` prop is\nrendered as a literal hint (e.g. an emoji); otherwise the built-in glyph\nfor the current `status` is used.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | Rich tooltip/detail content, shown on hover/focus. Nothing renders (no hover affordance at all) when this slot is empty. |\n| `icon` | Overrides the built-in status glyph entirely. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The clickable pill (`<button>`). |\n| `category` | The optional grouping label. |\n| `duration` | The formatted `duration-ms`, when set. |\n| `icon` | Wrapper around the status glyph / `icon` slot. |\n| `label` | Wrapper around `category`, `name` and `summary`. |\n| `meta` | Wrapper around `status-text` and `duration`. |\n| `name` | The tool/function name. |\n| `status-text` | The visible text twin of the status glyph/color — carries the state in text, not just color. |\n| `summary` | The short status text. |\n| `tooltip` | The floating detail popup (only meaningful while open). |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-tool-call-chip-spin` (default: `1s linear`) — Running-icon animation duration and timing.\n- `--lr-transition-ambient` (default: `1.8s ease-in-out`) — Pending-icon pulse duration and timing."
|
|
13890
|
+
"value": "`<lr-tool-call-chip>` — a compact inline pill representing one tool/\nfunction call an agent made mid-conversation, e.g.\n`web_search: Searching web…` with a `running` spinner. It owns no detail\nsurface of its own: clicking (or Enter/Space-activating) it only fires\n`lr-tool-call-chip-select` (plus, for one minor cycle, the deprecated\n`lr-tool-chip-select` alias) — a consumer wires that to opening a\n`<lr-tool-result-dialog>` (or anything else) at the call site. Keeping\nthe two decoupled means a chip can be reused wherever a compact call\nsummary is useful, with or without a detail surface behind it.\n\nThe default slot is *not* the chip's visible content — the chip's own\nlabel is always built from `name`/`summary`/`status`/`duration-ms`. It's\nreserved for optional rich detail content (e.g. the tool's raw arguments,\na short preview) shown in a floating tooltip on hover/focus, positioned\nwith `internal/positioner.js`'s `place()` the same way `<lr-combobox>`\npositions its listbox. No tooltip is shown at all when the slot carries no\ncontent — hovering an empty chip does nothing. Hover and keyboard focus are\ntracked as independent reasons to keep the tooltip open (mirrors\n`<lr-citation-badge>`'s popover), so releasing one modality while the\nother is still active doesn't close it, and the trigger button's\n`aria-describedby` points at the tooltip's id whenever it's open and has\ncontent, so the association reaches assistive tech too.\n\nThe `icon` slot overrides the built-in per-status glyph entirely via the\nplatform's own slot-fallback-content mechanism (`<slot\nname=\"icon\">${fallback}</slot>` — the same pattern `<lr-stat>`'s\n`caption` slot and `<lr-file-input>`'s default slot already use):\nwhatever is assigned to `slot=\"icon\"` wins; otherwise the `icon` prop is\nrendered as a literal hint (e.g. an emoji); otherwise the built-in glyph\nfor the current `status` is used.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | Rich tooltip/detail content, shown on hover/focus. Nothing renders (no hover affordance at all) when this slot is empty. |\n| `icon` | Overrides the built-in status glyph entirely. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The clickable pill (`<button>`). |\n| `category` | The optional grouping label. |\n| `duration` | The formatted `duration-ms`, when set. |\n| `icon` | Wrapper around the status glyph / `icon` slot. |\n| `label` | Wrapper around `category`, `name` and `summary`. |\n| `meta` | Wrapper around `status-text` and `duration`. |\n| `name` | The tool/function name. |\n| `status-text` | The visible text twin of the status glyph/color — carries the state in text, not just color. |\n| `summary` | The short status text. |\n| `tooltip` | The floating detail popup (only meaningful while open). |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-tool-call-chip-spin` (default: `1s linear`) — Running-icon animation duration and timing.\n- `--lr-transition-ambient` (default: `1.8s ease-in-out`) — Pending-icon pulse duration and timing.\n- `--lr-tool-call-chip-accent` (default: `var(--lr-color-text-quiet)`) — Per-status accent color for the status glyph and status text. Reassigned by this component's own `:host([status=\"…\"])` rules (`running` → brand, `success` → success, `error` → danger, `denied` → warning), so a page-level override only wins for the default/`pending` tone.\n- `--lr-tool-call-chip-bg` (default: `var(--lr-color-surface)`) — Per-status chip background. Reassigned by the same `:host([status=\"…\"])` rules (each status's `-quiet` tint).\n- `--lr-tool-call-chip-border` (default: `var(--lr-color-border)`) — Per-status chip border color. Reassigned by the same `:host([status=\"…\"])` rules (`transparent` for every non-`pending` status)."
|
|
13870
13891
|
},
|
|
13871
13892
|
"attributes": [
|
|
13872
13893
|
{
|
|
@@ -14019,7 +14040,7 @@
|
|
|
14019
14040
|
"name": "lr-tool-result-view",
|
|
14020
14041
|
"description": {
|
|
14021
14042
|
"kind": "markdown",
|
|
14022
|
-
"value": "`<lr-tool-result-view>` — renders a tool call's result via whichever\ncustom renderer a host app has registered for it (see `registerToolRenderer()`\nin `registry.ts`), falling back to `<lr-json-viewer>` whenever no\nrenderer matches, a candidate renderer's `matches()` predicate throws during\ndispatch, a renderer's optional `load()` rejects, or its `render()` throws.\nThis component owns none of the actual visual weight of a\npopulated tool result — that's entirely whatever the registered renderer\nreturns; this is just the dispatch + fallback + loading-state shell.\n\nDispatch runs against `registry` when set, otherwise against the\nmodule-level default registry `registerToolRenderer()` writes to — see\n`findToolRenderer()`'s two-step (exact name, then shape-based `matches()`)\nlookup order for the full rule.\n\n`fallback` implements two kinds: `\"json\"` (the default, an unconditional `<lr-json-viewer>`)\nand `\"text\"`, which renders a *string* `result` as preformatted text instead — falling back to\nthe `\"json\"` behavior when `result` isn't a string, so setting `fallback=\"text\"` defensively\nagainst an unpredictable result shape never renders broken output. `copyable` adds a\ncopy-to-clipboard affordance to either fallback kind (forwarded to `<lr-json-viewer>`'s own\n`copyable` for `\"json\"`; a `<lr-copy-button>` alongside the text for `\"text\"`).\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The root wrapper around the resolved renderer's output (or the loading/fallback view). |\n| `fallback-copy` | The `<lr-copy-button>` shown when `copyable` is set alongside the `fallback=\"text\"` kind (only present when both are set). |\n| `fallback-text` | The `<pre>` element for the `fallback=\"text\"` kind's preformatted result text (only present in that mode).
|
|
14043
|
+
"value": "`<lr-tool-result-view>` — renders a tool call's result via whichever\ncustom renderer a host app has registered for it (see `registerToolRenderer()`\nin `registry.ts`), falling back to `<lr-json-viewer>` whenever no\nrenderer matches, a candidate renderer's `matches()` predicate throws during\ndispatch, a renderer's optional `load()` rejects, or its `render()` throws.\nThis component owns none of the actual visual weight of a\npopulated tool result — that's entirely whatever the registered renderer\nreturns; this is just the dispatch + fallback + loading-state shell.\n\nDispatch runs against `registry` when set, otherwise against the\nmodule-level default registry `registerToolRenderer()` writes to — see\n`findToolRenderer()`'s two-step (exact name, then shape-based `matches()`)\nlookup order for the full rule.\n\n`fallback` implements two kinds: `\"json\"` (the default, an unconditional `<lr-json-viewer>`)\nand `\"text\"`, which renders a *string* `result` as preformatted text instead — falling back to\nthe `\"json\"` behavior when `result` isn't a string, so setting `fallback=\"text\"` defensively\nagainst an unpredictable result shape never renders broken output. `copyable` adds a\ncopy-to-clipboard affordance to either fallback kind (forwarded to `<lr-json-viewer>`'s own\n`copyable` for `\"json\"`; a `<lr-copy-button>` alongside the text for `\"text\"`).\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The root wrapper around the resolved renderer's output (or the loading/fallback view). |\n| `fallback-copy` | The `<lr-copy-button>` shown when `copyable` is set alongside the `fallback=\"text\"` kind (only present when both are set). |\n| `fallback-text` | The `<pre>` element for the `fallback=\"text\"` kind's preformatted result text (only present in that mode). |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-tool-result-view-font` (default: `var(--lr-font-mono)`) — Font family for the `fallback=\"text\"` preformatted output."
|
|
14023
14044
|
},
|
|
14024
14045
|
"attributes": [
|
|
14025
14046
|
{
|
|
@@ -14056,7 +14077,7 @@
|
|
|
14056
14077
|
"name": "lr-tool-select-dialog",
|
|
14057
14078
|
"description": {
|
|
14058
14079
|
"kind": "markdown",
|
|
14059
|
-
"value": "`<lr-tool-select-dialog>` — a category-grouped, filterable, searchable\ntool-enablement dialog for picking which agent tools are available in a\nconversation.\n\nThis renders its own dialog panel rather than nesting a `<lr-dialog>` in\nits shadow template. Shared overlay infrastructure coordinates stacking,\nfocus trapping, Escape/backdrop dismissal, and focus return with every\nother overlay in the same document.\n\n`useDefaults` is a single top-level switch: while `true`, every per-tool\ncheckbox below renders disabled (still reflecting whatever `selected`\nholds — a consumer should populate that with its own default tool set\nwhenever `useDefaults` is true) and a hint explains that turning the\nswitch off is how to customize. Turning it off is the \"customize\"\naffordance — it's the only thing that both flips `useDefaults` to `false`\n*and* unlocks the per-tool checkboxes for editing, so there's exactly one\ncontrol for that transition rather than a separate button duplicating it.\n\nThere is no built-in footer/close button — like `<lr-dialog>`, dismissal\nhappens via Escape, a backdrop click, or a consumer's own `footer`-slotted\naction calling `close()`. This also means the search input is the very\nfirst focusable element in the panel with no special-casing needed, so\nit's what receives focus on open (see `updated()`).\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| `footer` | Optional action buttons (e.g. a \"Done\" button), rendered in a bottom row. Changes already apply live via `lr-change`, so this is optional. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `backdrop` | The full-viewport scrim behind the panel. |\n| `body` | The scrollable wrapper around the grouped tool list. |\n| `category` | A single category's wrapper (`role=\"group\"`). |\n| `category-count` | The terse, `aria-hidden` tool count next to a category heading (the heading's accessible name gets the full sentence from an sr-only sibling instead). |\n| `category-heading` | A category's heading. |\n| `category-list` | The `<ul>` of tool rows within a category. |\n| `defaults-hint` | The \"turn off to customize\" hint, shown only while `useDefaults` is true. |\n| `defaults-row` | The wrapper around the use-defaults switch and its hint. |\n| `defaults-toggle` | The built-in `<lr-switch>` bound to `useDefaults`. |\n| `empty` | The \"no tools\" / \"no matches\" message. |\n| `footer` | The wrapper around the `footer` slot. |\n| `header` | The wrapper around the title/subtitle. |\n| `panel` | The dialog panel itself (`role=\"dialog\"` while open). |\n| `search-input` | The filter text input. |\n| `search-row` | The wrapper around the search input. |\n| `subtitle` | The \"N of M tools enabled\" summary line. |\n| `title` | The dialog's heading. |\n| `tool-checkbox` | A row's `<lr-checkbox>`. |\n| `tool-description` | A row's optional description text. |\n| `tool-disabled-reason` | A disabled row's `disabledReason` text, slotted inside `tool-checkbox` (alongside `tool-name`/`tool-description`) so it contributes to the checkbox's accessible name/description instead of going unannounced. |\n| `tool-icon` | A row's leading icon glyph, when `icon` is set. |\n| `tool-name` | A row's name text (plus its `icon`, if set). |\n| `tool-row` | A single tool's `<li>` row.
|
|
14080
|
+
"value": "`<lr-tool-select-dialog>` — a category-grouped, filterable, searchable\ntool-enablement dialog for picking which agent tools are available in a\nconversation.\n\nThis renders its own dialog panel rather than nesting a `<lr-dialog>` in\nits shadow template. Shared overlay infrastructure coordinates stacking,\nfocus trapping, Escape/backdrop dismissal, and focus return with every\nother overlay in the same document.\n\n`useDefaults` is a single top-level switch: while `true`, every per-tool\ncheckbox below renders disabled (still reflecting whatever `selected`\nholds — a consumer should populate that with its own default tool set\nwhenever `useDefaults` is true) and a hint explains that turning the\nswitch off is how to customize. Turning it off is the \"customize\"\naffordance — it's the only thing that both flips `useDefaults` to `false`\n*and* unlocks the per-tool checkboxes for editing, so there's exactly one\ncontrol for that transition rather than a separate button duplicating it.\n\nThere is no built-in footer/close button — like `<lr-dialog>`, dismissal\nhappens via Escape, a backdrop click, or a consumer's own `footer`-slotted\naction calling `close()`. This also means the search input is the very\nfirst focusable element in the panel with no special-casing needed, so\nit's what receives focus on open (see `updated()`).\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| `footer` | Optional action buttons (e.g. a \"Done\" button), rendered in a bottom row. Changes already apply live via `lr-change`, so this is optional. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `backdrop` | The full-viewport scrim behind the panel. |\n| `body` | The scrollable wrapper around the grouped tool list. |\n| `category` | A single category's wrapper (`role=\"group\"`). |\n| `category-count` | The terse, `aria-hidden` tool count next to a category heading (the heading's accessible name gets the full sentence from an sr-only sibling instead). |\n| `category-heading` | A category's heading. |\n| `category-list` | The `<ul>` of tool rows within a category. |\n| `defaults-hint` | The \"turn off to customize\" hint, shown only while `useDefaults` is true. |\n| `defaults-row` | The wrapper around the use-defaults switch and its hint. |\n| `defaults-toggle` | The built-in `<lr-switch>` bound to `useDefaults`. |\n| `empty` | The \"no tools\" / \"no matches\" message. |\n| `footer` | The wrapper around the `footer` slot. |\n| `header` | The wrapper around the title/subtitle. |\n| `panel` | The dialog panel itself (`role=\"dialog\"` while open). |\n| `search-input` | The filter text input. |\n| `search-row` | The wrapper around the search input. |\n| `subtitle` | The \"N of M tools enabled\" summary line. |\n| `title` | The dialog's heading. |\n| `tool-checkbox` | A row's `<lr-checkbox>`. |\n| `tool-description` | A row's optional description text. |\n| `tool-disabled-reason` | A disabled row's `disabledReason` text, slotted inside `tool-checkbox` (alongside `tool-name`/`tool-description`) so it contributes to the checkbox's accessible name/description instead of going unannounced. |\n| `tool-icon` | A row's leading icon glyph, when `icon` is set. |\n| `tool-name` | A row's name text (plus its `icon`, if set). |\n| `tool-row` | A single tool's `<li>` row. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-tool-select-dialog-overlay-color` (default: `var(--lr-color-overlay)`) — Backdrop scrim color."
|
|
14060
14081
|
},
|
|
14061
14082
|
"attributes": [
|
|
14062
14083
|
{
|
|
@@ -14149,7 +14170,7 @@
|
|
|
14149
14170
|
"name": "lr-tool-timeline",
|
|
14150
14171
|
"description": {
|
|
14151
14172
|
"kind": "markdown",
|
|
14152
|
-
"value": "`<lr-tool-timeline>` — a chronological list of an agent run's tool/function calls, each\nrendered through `<lr-tool-call-chip>` (name/status/duration) and `<lr-tool-result-view>`\n(args/result), with per-entry retry counts, sensitive-field redaction, and a shared\n`<lr-tool-approval-dialog>` for entries gated behind a human approval decision. This component\nowns none of the actual per-call rendering -- that is entirely those three existing\nprimitives -- its own job is ordering `entries` chronologically, computing each entry's\nduration from `startedAt`/`endedAt`, masking `redactedFields` before handing `args`/`result` to\n`<lr-tool-result-view>`, and opening/closing the one shared approval dialog for whichever entry\nis currently pending a decision.\n\nOrdering: `entries` is sorted ascending by `startedAt`; an entry with no `startedAt` sorts after\nevery timed entry, keeping its position relative to any other untimed entries stable (input\norder is preserved among ties) — a still-pending call with no timestamp yet naturally lands at\nthe end without needing to be pre-sorted by the host.\n\nRedaction only ever affects the read-only detail view: the copy of `args` handed to the\napproval dialog is always the entry's real, unmasked value. Approving a masked-args call must\nlet the reviewer see (and, if `approvalEditable`, edit) what will actually be sent — handing the\ndialog a placeholder string in place of a real field would silently corrupt the decision.\n\nApproval: activating the chip (`lr-tool-call-chip-select`) of an entry with `needsApproval` and\nan undecided `approved` opens the shared dialog for that entry; approving or denying emits this\ncomponent's own `lr-tool-approval-decide` and closes the dialog. This component never mutates\n`entries` itself — a host applies the decision (and any resulting status change) and re-assigns\n`entries`; if the entry currently under review disappears or no longer qualifies as pending\n(its `approved` was resolved some other way) by the time `entries` changes, the dialog closes on\nits own rather than staying open over stale data. A chip belonging to an entry that isn't\npending approval is left alone — its own `lr-tool-call-chip-select` (and deprecated\n`lr-tool-chip-select` alias) still bubble out normally for a host that wants to react to raw\nchip selection for its own purposes.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `approval-dialog` | The single shared `<lr-tool-approval-dialog>` instance. |\n| `base` | The root `<ol>`. |\n| `entry` | One entry's `<li>`; carries `data-status` (the entry's `status`) and `data-pending-approval` (`\"true\"`/`\"false\"`). |\n| `entry-approval-status` | The \"Approved\"/\"Denied\" badge, only rendered once `approved` is set; carries `data-decision` (`\"approved\"`/`\"denied\"`). |\n| `entry-body` | Wrapper around one entry's header and details. |\n| `entry-details` | The `<lr-details>` disclosure wrapping the entry's result view. |\n| `entry-error` | The entry's `error` text, only rendered when set. |\n| `entry-header` | Wrapper around the timestamp, chip, retry badge, and approval status. |\n| `entry-marker` | The decorative rail dot/connector for one entry. |\n| `entry-redacted-indicator` | A decorative marker shown when `redactedFields` is non-empty for that entry. |\n| `entry-result` | The entry's `<lr-tool-result-view>`. |\n| `entry-retries` | The retry-count badge, only rendered while `retryCount > 0`. |\n| `entry-retries-count` | The formatted retry count within the retry badge. |\n| `entry-retries-label` | The localized \"Retry\" text within the retry badge. |\n| `entry-timestamp` | The formatted `startedAt`, only rendered while it's set. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-tool-timeline-gap` (default: `var(--lr-space-l)`) — Vertical gap between entries."
|
|
14173
|
+
"value": "`<lr-tool-timeline>` — a chronological list of an agent run's tool/function calls, each\nrendered through `<lr-tool-call-chip>` (name/status/duration) and `<lr-tool-result-view>`\n(args/result), with per-entry retry counts, sensitive-field redaction, and a shared\n`<lr-tool-approval-dialog>` for entries gated behind a human approval decision. This component\nowns none of the actual per-call rendering -- that is entirely those three existing\nprimitives -- its own job is ordering `entries` chronologically, computing each entry's\nduration from `startedAt`/`endedAt`, masking `redactedFields` before handing `args`/`result` to\n`<lr-tool-result-view>`, and opening/closing the one shared approval dialog for whichever entry\nis currently pending a decision.\n\nOrdering: `entries` is sorted ascending by `startedAt`; an entry with no `startedAt` sorts after\nevery timed entry, keeping its position relative to any other untimed entries stable (input\norder is preserved among ties) — a still-pending call with no timestamp yet naturally lands at\nthe end without needing to be pre-sorted by the host.\n\nRedaction only ever affects the read-only detail view: the copy of `args` handed to the\napproval dialog is always the entry's real, unmasked value. Approving a masked-args call must\nlet the reviewer see (and, if `approvalEditable`, edit) what will actually be sent — handing the\ndialog a placeholder string in place of a real field would silently corrupt the decision.\n\nApproval: activating the chip (`lr-tool-call-chip-select`) of an entry with `needsApproval` and\nan undecided `approved` opens the shared dialog for that entry; approving or denying emits this\ncomponent's own `lr-tool-approval-decide` and closes the dialog. This component never mutates\n`entries` itself — a host applies the decision (and any resulting status change) and re-assigns\n`entries`; if the entry currently under review disappears or no longer qualifies as pending\n(its `approved` was resolved some other way) by the time `entries` changes, the dialog closes on\nits own rather than staying open over stale data. A chip belonging to an entry that isn't\npending approval is left alone — its own `lr-tool-call-chip-select` (and deprecated\n`lr-tool-chip-select` alias) still bubble out normally for a host that wants to react to raw\nchip selection for its own purposes.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `approval-dialog` | The single shared `<lr-tool-approval-dialog>` instance. |\n| `base` | The root `<ol>`. |\n| `entry` | One entry's `<li>`; carries `data-status` (the entry's `status`) and `data-pending-approval` (`\"true\"`/`\"false\"`). |\n| `entry-approval-status` | The \"Approved\"/\"Denied\" badge, only rendered once `approved` is set; carries `data-decision` (`\"approved\"`/`\"denied\"`). |\n| `entry-body` | Wrapper around one entry's header and details. |\n| `entry-details` | The `<lr-details>` disclosure wrapping the entry's result view. |\n| `entry-error` | The entry's `error` text, only rendered when set. |\n| `entry-header` | Wrapper around the timestamp, chip, retry badge, and approval status. |\n| `entry-marker` | The decorative rail dot/connector for one entry. |\n| `entry-redacted-indicator` | A decorative marker shown when `redactedFields` is non-empty for that entry. |\n| `entry-result` | The entry's `<lr-tool-result-view>`. |\n| `entry-retries` | The retry-count badge, only rendered while `retryCount > 0`. |\n| `entry-retries-count` | The formatted retry count within the retry badge. |\n| `entry-retries-label` | The localized \"Retry\" text within the retry badge. |\n| `entry-timestamp` | The formatted `startedAt`, only rendered while it's set. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-tool-timeline-gap` (default: `var(--lr-space-l)`) — Vertical gap between entries.\n- `--lr-tool-timeline-marker-size` (default: `var(--lr-size-0-625rem)`) — Diameter of an entry's rail dot; also the width of the marker gutter column."
|
|
14153
14174
|
},
|
|
14154
14175
|
"attributes": [
|
|
14155
14176
|
{
|
|
@@ -14360,7 +14381,7 @@
|
|
|
14360
14381
|
"name": "lr-transcript-feed",
|
|
14361
14382
|
"description": {
|
|
14362
14383
|
"kind": "markdown",
|
|
14363
|
-
"value": "`<lr-transcript-feed>` — live captions for an in-progress voice session: speaker-grouped\nentries, interim-vs-final styling with in-place upgrades keyed by `id`, and a stick-to-bottom\nauto-scroll with release, the same `follow`/`lr-follow-change` contract `lr-terminal` uses.\n\nRendering reconciles `entries` keyed by `id` via Lit's `repeat()`: a same-`id` entry with new\n`text` replaces in place; a same-`id` entry whose `interim` flips from `true` to unset/`false`\nmoves from the interim area into the `role=\"log\"` region and announces exactly once. Interim\nentries render *after* the log container, visible but structurally outside it, so per-token\nmutations are never spoken by assistive tech.\n\nLive captions only: recorded-media transcript sync — clickable cues, seek-on-select — is a\nseparate concern from this component.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| `empty` | Custom empty state. Default: the localized \"No transcript yet\". |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The scroll container. |\n| `empty` | The empty-state wrapper. |\n| `entry` | One entry row (final or interim). |\n| `interim` | Present (alongside `entry`) on an interim row. |\n| `jump-button` | The \"jump to latest\" affordance, shown only while `follow` is `false`. |\n| `log` | The `role=\"log\"` region wrapping final entries only. |\n| `speaker` | An entry's speaker label (omitted for a row that repeats the previous row's speaker). |\n| `text` | An entry's text (`dir=\"auto\"`, for mixed-language captions). |\n| `timestamp` | An entry's timestamp, shown only when `show-timestamps` is set. |"
|
|
14384
|
+
"value": "`<lr-transcript-feed>` — live captions for an in-progress voice session: speaker-grouped\nentries, interim-vs-final styling with in-place upgrades keyed by `id`, and a stick-to-bottom\nauto-scroll with release, the same `follow`/`lr-follow-change` contract `lr-terminal` uses.\n\nRendering reconciles `entries` keyed by `id` via Lit's `repeat()`: a same-`id` entry with new\n`text` replaces in place; a same-`id` entry whose `interim` flips from `true` to unset/`false`\nmoves from the interim area into the `role=\"log\"` region and announces exactly once. Interim\nentries render *after* the log container, visible but structurally outside it, so per-token\nmutations are never spoken by assistive tech.\n\nLive captions only: recorded-media transcript sync — clickable cues, seek-on-select — is a\nseparate concern from this component.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| `empty` | Custom empty state. Default: the localized \"No transcript yet\". |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The scroll container. |\n| `empty` | The empty-state wrapper. |\n| `entry` | One entry row (final or interim). |\n| `interim` | Present (alongside `entry`) on an interim row. |\n| `interim-area` | The wrapper around the interim (not-yet-final) entries, rendered as a sibling of `log`. Only rendered while at least one interim entry exists. |\n| `jump-button` | The \"jump to latest\" affordance, shown only while `follow` is `false`. |\n| `log` | The `role=\"log\"` region wrapping final entries only. |\n| `speaker` | An entry's speaker label (omitted for a row that repeats the previous row's speaker). |\n| `text` | An entry's text (`dir=\"auto\"`, for mixed-language captions). |\n| `timestamp` | An entry's timestamp, shown only when `show-timestamps` is set. |"
|
|
14364
14385
|
},
|
|
14365
14386
|
"attributes": [
|
|
14366
14387
|
{
|
|
@@ -14434,7 +14455,7 @@
|
|
|
14434
14455
|
"name": "lr-tree-node",
|
|
14435
14456
|
"description": {
|
|
14436
14457
|
"kind": "markdown",
|
|
14437
|
-
"value": "`<lr-tree-node>` — internal recursive renderer for `<lr-tree>`.\n\n`role=\"treeitem\"` (plus `aria-expanded`/`aria-level`/`aria-setsize`/\n`aria-posinset` and the roving `tabindex`, driven by `<lr-tree>`) live on\nthe *host* element, not the internal `[part=\"row\"]` div — that makes this\nnode's own nested children (rendered in *its own* shadow root as further\n`role=\"group\"` content) genuine DOM descendants of the treeitem, which is\nwhat the WAI-ARIA treeitem pattern requires (previously a shadow-root\nsibling).\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `badge` | The optional node badge (the legacy `item.badge`, and/or one chip per `item.badges` entry, tone-mapped via `data-tone`). |\n| `content` | The primary and secondary text wrapper. |\n| `description` | The optional secondary description. |\n| `group` | The wrapper around a node's expanded child items. |\n| `icon` | The optional decorative leading icon. |\n| `label` | The node label. |\n| `row` | The tree row. |\n| `toggle` | The expand/collapse button.
|
|
14458
|
+
"value": "`<lr-tree-node>` — internal recursive renderer for `<lr-tree>`.\n\n`role=\"treeitem\"` (plus `aria-expanded`/`aria-level`/`aria-setsize`/\n`aria-posinset` and the roving `tabindex`, driven by `<lr-tree>`) live on\nthe *host* element, not the internal `[part=\"row\"]` div — that makes this\nnode's own nested children (rendered in *its own* shadow root as further\n`role=\"group\"` content) genuine DOM descendants of the treeitem, which is\nwhat the WAI-ARIA treeitem pattern requires (previously a shadow-root\nsibling).\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `badge` | The optional node badge (the legacy `item.badge`, and/or one chip per `item.badges` entry, tone-mapped via `data-tone`). |\n| `content` | The primary and secondary text wrapper. |\n| `description` | The optional secondary description. |\n| `group` | The wrapper around a node's expanded child items. |\n| `icon` | The optional decorative leading icon. |\n| `label` | The node label. |\n| `row` | The tree row. |\n| `toggle` | The expand/collapse button. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-tree-depth` (default: `0`) — Internal indent plumbing, not a retheming knob: this node's `depth`, written inline onto `[part=\"row\"]` by the component and multiplied by `--lr-space-l` (capped at `--lr-size-8rem`) to produce the row's `padding-inline-start`."
|
|
14438
14459
|
},
|
|
14439
14460
|
"attributes": [
|
|
14440
14461
|
{
|
|
@@ -14552,7 +14573,7 @@
|
|
|
14552
14573
|
"name": "lr-virtual-list",
|
|
14553
14574
|
"description": {
|
|
14554
14575
|
"kind": "markdown",
|
|
14555
|
-
"value": "`<lr-virtual-list>` — a generic windowed/virtualized list host. Renders\nonly the items within the current viewport (plus `overscan` padding rows\non each side) as real DOM, regardless of how large `items` is, so a\nmulti-thousand-row chat history sidebar or long message thread stays cheap\nto scroll.\n\nContent is entirely caller-supplied: `renderItem(item, index)` returns\nwhatever `lit-html` value should represent that row (typically a\n`TemplateResult`), and `keyFunction(item, index)` gives it a stable\nidentity for `repeat()`'s DOM-reconciliation key, so scroll position and\nany per-row state (e.g. an `<audio>` element's playback position) survive\nan `items` mutation instead of every row remounting from scratch.\n\n**Windowing math.** Every row — in both `row-height` modes — is positioned\nby a `transform: translateY(offset)` computed from a single cumulative\n`offsets` array (`offsets[i]` = the pixel top of row `i`), rather than by\npage flow. This is what lets only a small DOM window exist while the\nscrollbar still reflects the *true* total content height:\n- **`row-height=\"auto\"` (default).** Each currently-rendered row is\n watched by a `ResizeObserver`; its real height lands in a per-key\n `Map`, and any row not yet measured contributes `DEFAULT_ROW_ESTIMATE_PX`\n to the offsets array until it has been. `offsets` is *not* the same\n thing as a page-count-based `padding-top`/`padding-bottom` spacer pair —\n that approach reflows every unmeasured row's position on every new\n measurement, which is exactly what per-row transform offsets avoid: only\n the rows *after* a newly-measured one shift, and even that shift is a\n cheap style recompute, not a layout-affecting padding change.\n- **Fixed numeric `row-height`.** No measurement needed — `offsets[i]` is\n just `i * rowHeightPx`, computed by the exact same cumulative-array code\n path (a dedicated \"single spacer + start-index\" special case was\n considered and would work too, but reusing one code path for both modes\n avoids maintaining two parallel rendering strategies for a difference\n that's otherwise just \"how is row *i*'s height looked up\").\n\nThe `offsets` array is rebuilt only when `items`, `row-height`, or\n`keyFunction` change, or a row's measured height changes -- not on every\nupdate, so a pure scroll-position tick (potentially every rAF while\nscrolling) only re-runs the cheap range/visibility math in\n`computeRange()`, never the `O(n)` offsets rebuild (which, in\n`row-height=\"auto\"` mode, also means a `keyFunction` call per item). For\nthe list sizes this component is meant for (a scrollable history sidebar,\nrealistically hundreds to a few thousand rows) that rebuild is a trivial\n`O(n)` arithmetic loop even when it does run; it is *not* the right\napproach for a hundred-thousand-row list without further work (e.g. a\nFenwick/segment tree for `O(log n)` offset queries+updates), which is out\nof scope here.\n\n**Accessibility.** The scroll container is `role=\"list\"` and each rendered\nrow is `role=\"listitem\"`, deliberately *not* `listbox`/`option` — this\ncomponent only provides windowing, not the roving-tabindex/\n`aria-activedescendant` keyboard-interaction contract ARIA requires\nalongside a real `listbox`. A consumer that wants full single-select\nlistbox semantics on top of this should compose that behavior itself (see\n`<lr-select>`'s pattern), the same way this component's `active-id`\nonly *scrolls* the matching row into view and marks it `aria-current` —\nit never claims to be a selection widget. `aria-setsize`/`aria-posinset`\nare computed from the row's real index in the full `items` array (not its\nposition among the currently-rendered DOM window), so a screen reader\nstill announces e.g. \"item 12 of 340\" correctly. `[part=\"base\"]` itself\ncarries `tabindex=\"0\"` — `renderItem`'s content is caller-supplied and not\nguaranteed to contain a focusable element, and a scrollable region with no\nfocusable content of its own is otherwise unreachable by keyboard (native\narrow/Page Up/Page Down scrolling included).\n\n**Grouping.** When supplied, `groups` renders a labeled group marker at the\ncorresponding `startIndex`. Group markers are positioned independently of\nthe row window, so they remain available when the first row in a group is\noutside the current overscanned range.\n\n**Programmatic scrolling.** `scrollToIndex()` is the public counterpart to `active-id`'s automatic\nscroll-into-view -- used by `<lr-chat-viewport>`'s virtual mode and any other host that needs to\nscroll to a specific row without also changing which row is \"active.\"\n\n**`item-role=\"row\"` mode.** Additive to the default `'listitem'` mapping above: `[part=\"base\"]`\nbecomes `role=\"rowgroup\"`, `[part=\"spacer\"]` becomes `role=\"presentation\"`, and each row becomes\n`role=\"row\"` with `aria-rowindex` (the row's 1-based index plus `row-index-offset`) instead of\n`aria-setsize`/`aria-posinset`. For a consumer composing its own `role=\"table\"` wrapper and header\nrow around this component (see `<lr-dataset-viewer>`), where `row-index-offset=\"1\"` accounts for\nthat external header row occupying `aria-rowindex=\"1\"`.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The scrollable container (`role=\"list\"`). |\n| `group` | A positioned group label. |\n| `row` | One rendered row's absolutely-positioned wrapper (`role=\"listitem\"`); `renderItem`'s return value renders inside it. |\n| `spacer` | The full-content-height inner element that gives the container its true scrollable extent.
|
|
14576
|
+
"value": "`<lr-virtual-list>` — a generic windowed/virtualized list host. Renders\nonly the items within the current viewport (plus `overscan` padding rows\non each side) as real DOM, regardless of how large `items` is, so a\nmulti-thousand-row chat history sidebar or long message thread stays cheap\nto scroll.\n\nContent is entirely caller-supplied: `renderItem(item, index)` returns\nwhatever `lit-html` value should represent that row (typically a\n`TemplateResult`), and `keyFunction(item, index)` gives it a stable\nidentity for `repeat()`'s DOM-reconciliation key, so scroll position and\nany per-row state (e.g. an `<audio>` element's playback position) survive\nan `items` mutation instead of every row remounting from scratch.\n\n**Windowing math.** Every row — in both `row-height` modes — is positioned\nby a `transform: translateY(offset)` computed from a single cumulative\n`offsets` array (`offsets[i]` = the pixel top of row `i`), rather than by\npage flow. This is what lets only a small DOM window exist while the\nscrollbar still reflects the *true* total content height:\n- **`row-height=\"auto\"` (default).** Each currently-rendered row is\n watched by a `ResizeObserver`; its real height lands in a per-key\n `Map`, and any row not yet measured contributes `DEFAULT_ROW_ESTIMATE_PX`\n to the offsets array until it has been. `offsets` is *not* the same\n thing as a page-count-based `padding-top`/`padding-bottom` spacer pair —\n that approach reflows every unmeasured row's position on every new\n measurement, which is exactly what per-row transform offsets avoid: only\n the rows *after* a newly-measured one shift, and even that shift is a\n cheap style recompute, not a layout-affecting padding change.\n- **Fixed numeric `row-height`.** No measurement needed — `offsets[i]` is\n just `i * rowHeightPx`, computed by the exact same cumulative-array code\n path (a dedicated \"single spacer + start-index\" special case was\n considered and would work too, but reusing one code path for both modes\n avoids maintaining two parallel rendering strategies for a difference\n that's otherwise just \"how is row *i*'s height looked up\").\n\nThe `offsets` array is rebuilt only when `items`, `row-height`, or\n`keyFunction` change, or a row's measured height changes -- not on every\nupdate, so a pure scroll-position tick (potentially every rAF while\nscrolling) only re-runs the cheap range/visibility math in\n`computeRange()`, never the `O(n)` offsets rebuild (which, in\n`row-height=\"auto\"` mode, also means a `keyFunction` call per item). For\nthe list sizes this component is meant for (a scrollable history sidebar,\nrealistically hundreds to a few thousand rows) that rebuild is a trivial\n`O(n)` arithmetic loop even when it does run; it is *not* the right\napproach for a hundred-thousand-row list without further work (e.g. a\nFenwick/segment tree for `O(log n)` offset queries+updates), which is out\nof scope here.\n\n**Accessibility.** The scroll container is `role=\"list\"` and each rendered\nrow is `role=\"listitem\"`, deliberately *not* `listbox`/`option` — this\ncomponent only provides windowing, not the roving-tabindex/\n`aria-activedescendant` keyboard-interaction contract ARIA requires\nalongside a real `listbox`. A consumer that wants full single-select\nlistbox semantics on top of this should compose that behavior itself (see\n`<lr-select>`'s pattern), the same way this component's `active-id`\nonly *scrolls* the matching row into view and marks it `aria-current` —\nit never claims to be a selection widget. `aria-setsize`/`aria-posinset`\nare computed from the row's real index in the full `items` array (not its\nposition among the currently-rendered DOM window), so a screen reader\nstill announces e.g. \"item 12 of 340\" correctly. `[part=\"base\"]` itself\ncarries `tabindex=\"0\"` — `renderItem`'s content is caller-supplied and not\nguaranteed to contain a focusable element, and a scrollable region with no\nfocusable content of its own is otherwise unreachable by keyboard (native\narrow/Page Up/Page Down scrolling included).\n\n**Grouping.** When supplied, `groups` renders a labeled group marker at the\ncorresponding `startIndex`. Group markers are positioned independently of\nthe row window, so they remain available when the first row in a group is\noutside the current overscanned range.\n\n**Programmatic scrolling.** `scrollToIndex()` is the public counterpart to `active-id`'s automatic\nscroll-into-view -- used by `<lr-chat-viewport>`'s virtual mode and any other host that needs to\nscroll to a specific row without also changing which row is \"active.\"\n\n**`item-role=\"row\"` mode.** Additive to the default `'listitem'` mapping above: `[part=\"base\"]`\nbecomes `role=\"rowgroup\"`, `[part=\"spacer\"]` becomes `role=\"presentation\"`, and each row becomes\n`role=\"row\"` with `aria-rowindex` (the row's 1-based index plus `row-index-offset`) instead of\n`aria-setsize`/`aria-posinset`. For a consumer composing its own `role=\"table\"` wrapper and header\nrow around this component (see `<lr-dataset-viewer>`), where `row-index-offset=\"1\"` accounts for\nthat external header row occupying `aria-rowindex=\"1\"`.\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The scrollable container (`role=\"list\"`). |\n| `group` | A positioned group label. |\n| `row` | One rendered row's absolutely-positioned wrapper (`role=\"listitem\"`); `renderItem`'s return value renders inside it. |\n| `spacer` | The full-content-height inner element that gives the container its true scrollable extent. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-virtual-list-height` (default: `var(--lr-size-24rem)`) — The scroll viewport's height. A virtualized list needs a bounded scroll extent, so this ships a default rather than collapsing to zero when a caller does not size the host."
|
|
14556
14577
|
},
|
|
14557
14578
|
"attributes": [
|
|
14558
14579
|
{
|
|
@@ -14767,7 +14788,7 @@
|
|
|
14767
14788
|
"name": "lr-widget",
|
|
14768
14789
|
"description": {
|
|
14769
14790
|
"kind": "markdown",
|
|
14770
|
-
"value": "`<lr-widget>` — a titled panel shell with an optional collapse toggle and\nan optional fullscreen-expand toggle. Fullscreen promotes the same host\nelement in place (a CSS state, not a clone/portal), so slotted content\n(a chart, a running simulation, scroll position) survives the transition.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | The panel body. |\n| `actions` | Header action controls, rendered before the collapse/expand buttons. |\n| `collapse-icon` | Overrides the built-in chevron glyph inside the collapse/expand toggle button entirely, via the platform's own slot-fallback-content mechanism (same convention as `<lr-tool-call-chip>`'s `icon` slot): whatever is assigned wins, otherwise the default chevron renders. Only meaningful while `collapsible`. |\n| `fullscreen-icon` | Overrides the built-in expand/close glyph inside the fullscreen toggle button entirely, using the same mechanism -- the override replaces *both* the \"expand\" and \"exit fullscreen\" default icons, so a consumer supplying one is responsible for its own expand/exit distinction (e.g. by reading the `fullscreen` attribute). Only meaningful while `expandable`. |\n| `icon` | Optional leading icon in the title row. |\n| `label` | Rich label content (overrides the `label` attribute). |\n| `sublabel` | Rich sublabel content (overrides the `sublabel` attribute). |\n| `view-{id}` | Content for the view whose `WidgetView.id` matches `{id}`, rendered when `views` is non-empty. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `actions` | The wrapper around the `actions` slot. |\n| `backdrop` | The fullscreen scrim behind the panel.
|
|
14791
|
+
"value": "`<lr-widget>` — a titled panel shell with an optional collapse toggle and\nan optional fullscreen-expand toggle. Fullscreen promotes the same host\nelement in place (a CSS state, not a clone/portal), so slotted content\n(a chart, a running simulation, scroll position) survives the transition.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | The panel body. |\n| `actions` | Header action controls, rendered before the collapse/expand buttons. |\n| `collapse-icon` | Overrides the built-in chevron glyph inside the collapse/expand toggle button entirely, via the platform's own slot-fallback-content mechanism (same convention as `<lr-tool-call-chip>`'s `icon` slot): whatever is assigned wins, otherwise the default chevron renders. Only meaningful while `collapsible`. |\n| `fullscreen-icon` | Overrides the built-in expand/close glyph inside the fullscreen toggle button entirely, using the same mechanism -- the override replaces *both* the \"expand\" and \"exit fullscreen\" default icons, so a consumer supplying one is responsible for its own expand/exit distinction (e.g. by reading the `fullscreen` attribute). Only meaningful while `expandable`. |\n| `icon` | Optional leading icon in the title row. |\n| `label` | Rich label content (overrides the `label` attribute). |\n| `sublabel` | Rich sublabel content (overrides the `sublabel` attribute). |\n| `view-{id}` | Content for the view whose `WidgetView.id` matches `{id}`, rendered when `views` is non-empty. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `actions` | The wrapper around the `actions` slot. |\n| `backdrop` | The fullscreen scrim behind the panel. |\n| `base` | The panel root (dialog role + backdrop when fullscreen). |\n| `body` | The wrapper around the default slot (the panel body). |\n| `collapse-button` | The collapse/expand toggle button. |\n| `fullscreen-button` | The fullscreen toggle button. |\n| `header` | The header row containing the title, actions, and toggle buttons. |\n| `icon` | Wrapper around the `icon` slot. Hidden entirely when empty. |\n| `label` | The panel title text. |\n| `label-group` | Wrapper around the label and sublabel. |\n| `sublabel` | The panel subtitle text. |\n| `title` | The wrapper around the label/sublabel. |\n| `view-toggle` | A single view toggle button. |\n| `view-toggles` | The header toggle-button group, only rendered when `views` is non-empty. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-widget-overlay-color` (default: `var(--lr-color-overlay)`) — The fullscreen scrim's color, applied to `[part=\"backdrop\"]`.\n- `--lr-widget-fullscreen-inset` (default: `max(var(--lr-space-l), var(--lr-safe-area-top)) max(var(--lr-space-l), var(--lr-safe-area-inline-end)) max(var(--lr-space-l), var(--lr-safe-area-bottom)) max(var(--lr-space-l), var(--lr-safe-area-inline-start))`) — The `inset` applied to `[part=\"base\"]` while `fullscreen`. Also set inline from the `fullscreen-inset` attribute.\n- `--lr-widget-backdrop-inset` (default: `var(--lr-widget-fullscreen-inset)`) — The `inset` applied to `[part=\"backdrop\"]`, so the scrim can be pulled back independently of the panel. Also set inline from the `backdrop-inset` attribute (falling back to `fullscreen-inset`). `fullscreen-inset` overrides the default `var(--lr-space-l)` inset applied to `[part=\"base\"]` and `[part=\"backdrop\"]` while fullscreen (e.g. `\"0 0 0 240px\"` to leave a persistent sidebar visible). `compact` tightens header/body padding — same convention as `lr-empty`'s `compact`."
|
|
14771
14792
|
},
|
|
14772
14793
|
"attributes": [
|
|
14773
14794
|
{
|
|
@@ -14980,7 +15001,7 @@
|
|
|
14980
15001
|
"name": "lr-zoomable-frame",
|
|
14981
15002
|
"description": {
|
|
14982
15003
|
"kind": "markdown",
|
|
14983
|
-
"value": "`<lr-zoomable-frame>` — a scrollable frame for inspecting slotted or\nimage content at a bounded zoom level. Scrolling provides panning when the\ncontent exceeds the frame; the controls and keyboard shortcuts change zoom.\n\nTwo public reset methods cover different needs: `resetZoom()` (also wired to the built-in\nreset button and the `0` keyboard shortcut) returns zoom to 1 while intentionally preserving\nthe current pan/scroll position; `resetView()` additionally returns pan to the origin, for a\ncaller (e.g. `<lr-lightbox>`) that wants a fully clean view, such as when swapping to new\ncontent entirely.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | Content to inspect; when `src` is set, an image is rendered instead. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The frame wrapper. |\n| `content` | The transformed content wrapper. |\n| `controls` | Zoom controls. |\n| `reset` | Reset-to-100-percent button. |\n| `viewport` | The scrollable viewport. |\n| `zoom-in` | Zoom-in button. |\n| `zoom-out` | Zoom-out button. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-zoomable-frame-min-block-size` — Minimum viewport block size."
|
|
15004
|
+
"value": "`<lr-zoomable-frame>` — a scrollable frame for inspecting slotted or\nimage content at a bounded zoom level. Scrolling provides panning when the\ncontent exceeds the frame; the controls and keyboard shortcuts change zoom.\n\nTwo public reset methods cover different needs: `resetZoom()` (also wired to the built-in\nreset button and the `0` keyboard shortcut) returns zoom to 1 while intentionally preserving\nthe current pan/scroll position; `resetView()` additionally returns pan to the origin, for a\ncaller (e.g. `<lr-lightbox>`) that wants a fully clean view, such as when swapping to new\ncontent entirely.\n\n---\n\n**Slots**\n\n| Name | Description |\n| --- | --- |\n| (default) | Content to inspect; when `src` is set, an image is rendered instead. |\n\n---\n\n**CSS Shadow Parts**\n\n| Name | Description |\n| --- | --- |\n| `base` | The frame wrapper. |\n| `content` | The transformed content wrapper. |\n| `controls` | Zoom controls. |\n| `reset` | Reset-to-100-percent button. |\n| `viewport` | The scrollable viewport. |\n| `zoom-in` | Zoom-in button. |\n| `zoom-out` | Zoom-out button. |\n\n---\n\n**CSS Custom Properties**\n\n- `--lr-zoomable-frame-min-block-size` — Minimum viewport block size.\n- `--lr-zoomable-frame-zoom` (default: `1`) — The scale factor applied to `[part=\"content\"]`. Written by the component itself on every render from the current `zoom`, so it is a read-out rather than a consumer knob; set the `zoom` property instead."
|
|
14984
15005
|
},
|
|
14985
15006
|
"attributes": [
|
|
14986
15007
|
{
|