@f-ewald/components 1.20.0 → 1.22.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 +1 -0
- package/custom-elements.json +115 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/status-banner.d.ts +35 -0
- package/dist/status-banner.d.ts.map +1 -0
- package/dist/status-banner.js +134 -0
- package/dist/status-banner.js.map +1 -0
- package/dist/timeline-entry.d.ts +12 -3
- package/dist/timeline-entry.d.ts.map +1 -1
- package/dist/timeline-entry.js +62 -4
- package/dist/timeline-entry.js.map +1 -1
- package/docs/status-banner.md +55 -0
- package/docs/timeline-entry.md +7 -3
- package/llms.txt +34 -4
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -103,6 +103,7 @@ import "@f-ewald/components/roman-numeral.js";
|
|
|
103
103
|
| `<slide-panel>` | [API reference](https://f-ewald.github.io/components/docs/slide-panel.html) |
|
|
104
104
|
| `<split-hero>` | [API reference](https://f-ewald.github.io/components/docs/split-hero.html) |
|
|
105
105
|
| `<stat-meter>` | [API reference](https://f-ewald.github.io/components/docs/stat-meter.html) |
|
|
106
|
+
| `<status-banner>` | [API reference](https://f-ewald.github.io/components/docs/status-banner.html) |
|
|
106
107
|
| `<status-pill>` | [API reference](https://f-ewald.github.io/components/docs/status-pill.html) |
|
|
107
108
|
| `<tab-bar>` | [API reference](https://f-ewald.github.io/components/docs/tab-bar.html) |
|
|
108
109
|
| `<tab-item>` | [API reference](https://f-ewald.github.io/components/docs/tab-item.html) |
|
package/custom-elements.json
CHANGED
|
@@ -6793,6 +6793,22 @@
|
|
|
6793
6793
|
"module": "./stat-meter.js"
|
|
6794
6794
|
}
|
|
6795
6795
|
},
|
|
6796
|
+
{
|
|
6797
|
+
"kind": "js",
|
|
6798
|
+
"name": "StatusBanner",
|
|
6799
|
+
"declaration": {
|
|
6800
|
+
"name": "StatusBanner",
|
|
6801
|
+
"module": "./status-banner.js"
|
|
6802
|
+
}
|
|
6803
|
+
},
|
|
6804
|
+
{
|
|
6805
|
+
"kind": "js",
|
|
6806
|
+
"name": "StatusBannerVariant",
|
|
6807
|
+
"declaration": {
|
|
6808
|
+
"name": "StatusBannerVariant",
|
|
6809
|
+
"module": "./status-banner.js"
|
|
6810
|
+
}
|
|
6811
|
+
},
|
|
6796
6812
|
{
|
|
6797
6813
|
"kind": "js",
|
|
6798
6814
|
"name": "StatusPill",
|
|
@@ -13435,6 +13451,84 @@
|
|
|
13435
13451
|
}
|
|
13436
13452
|
]
|
|
13437
13453
|
},
|
|
13454
|
+
{
|
|
13455
|
+
"kind": "javascript-module",
|
|
13456
|
+
"path": "src/status-banner.ts",
|
|
13457
|
+
"declarations": [
|
|
13458
|
+
{
|
|
13459
|
+
"kind": "class",
|
|
13460
|
+
"description": "Full-width, app-level status bar for a persistent condition — \"Reconnecting…\",\n\"Read-only mode\", \"New version available\". Unlike `toast-notification` (which\nis transient, imperative, and stacks in a corner) this stays put for as long\nas the condition holds, so the consumer controls its presence by rendering it\nor not.\n\nColors mirror `status-pill`: a tinted background with accent-colored text.\nAnnounced to assistive tech via `role=\"status\"` (or `role=\"alert\"` for the\n`danger` variant, matching `toast-notification`'s split).",
|
|
13461
|
+
"name": "StatusBanner",
|
|
13462
|
+
"slots": [
|
|
13463
|
+
{
|
|
13464
|
+
"description": "The message text.",
|
|
13465
|
+
"name": ""
|
|
13466
|
+
},
|
|
13467
|
+
{
|
|
13468
|
+
"description": "Optional trailing controls, e.g. a \"Retry\" button.",
|
|
13469
|
+
"name": "actions"
|
|
13470
|
+
}
|
|
13471
|
+
],
|
|
13472
|
+
"members": [
|
|
13473
|
+
{
|
|
13474
|
+
"kind": "field",
|
|
13475
|
+
"name": "variant",
|
|
13476
|
+
"type": {
|
|
13477
|
+
"text": "StatusBannerVariant"
|
|
13478
|
+
},
|
|
13479
|
+
"default": "\"info\"",
|
|
13480
|
+
"description": "Visual style; also selects the accent color.",
|
|
13481
|
+
"attribute": "variant",
|
|
13482
|
+
"reflects": true
|
|
13483
|
+
},
|
|
13484
|
+
{
|
|
13485
|
+
"kind": "field",
|
|
13486
|
+
"name": "icon",
|
|
13487
|
+
"type": {
|
|
13488
|
+
"text": "TemplateResult | null"
|
|
13489
|
+
},
|
|
13490
|
+
"default": "null",
|
|
13491
|
+
"description": "Optional leading icon, pre-rendered by the consumer (e.g. `iconInfo(14)`),\nmatching `nav-item`/`icon-button` — icons are passed in, not named, so the\ncomponent never has to know the icon catalog."
|
|
13492
|
+
}
|
|
13493
|
+
],
|
|
13494
|
+
"attributes": [
|
|
13495
|
+
{
|
|
13496
|
+
"name": "variant",
|
|
13497
|
+
"type": {
|
|
13498
|
+
"text": "StatusBannerVariant"
|
|
13499
|
+
},
|
|
13500
|
+
"default": "\"info\"",
|
|
13501
|
+
"description": "Visual style; also selects the accent color.",
|
|
13502
|
+
"fieldName": "variant"
|
|
13503
|
+
}
|
|
13504
|
+
],
|
|
13505
|
+
"superclass": {
|
|
13506
|
+
"name": "LitElement",
|
|
13507
|
+
"package": "lit"
|
|
13508
|
+
},
|
|
13509
|
+
"tagName": "status-banner",
|
|
13510
|
+
"customElement": true
|
|
13511
|
+
}
|
|
13512
|
+
],
|
|
13513
|
+
"exports": [
|
|
13514
|
+
{
|
|
13515
|
+
"kind": "js",
|
|
13516
|
+
"name": "StatusBanner",
|
|
13517
|
+
"declaration": {
|
|
13518
|
+
"name": "StatusBanner",
|
|
13519
|
+
"module": "src/status-banner.ts"
|
|
13520
|
+
}
|
|
13521
|
+
},
|
|
13522
|
+
{
|
|
13523
|
+
"kind": "custom-element-definition",
|
|
13524
|
+
"name": "status-banner",
|
|
13525
|
+
"declaration": {
|
|
13526
|
+
"name": "StatusBanner",
|
|
13527
|
+
"module": "src/status-banner.ts"
|
|
13528
|
+
}
|
|
13529
|
+
}
|
|
13530
|
+
]
|
|
13531
|
+
},
|
|
13438
13532
|
{
|
|
13439
13533
|
"kind": "javascript-module",
|
|
13440
13534
|
"path": "src/status-pill.ts",
|
|
@@ -14249,7 +14343,7 @@
|
|
|
14249
14343
|
"declarations": [
|
|
14250
14344
|
{
|
|
14251
14345
|
"kind": "class",
|
|
14252
|
-
"description": "One event on a `timeline-container`: a dot on the vertical line, an optional\nheadline, a relative timestamp (\"3 hours ago\"), and freely nested content.\nThe connecting line is drawn here — its segment above the dot is hidden on\nthe first entry and the segment below is hidden on the last, so the line caps\nexactly at the first and last dots. Only meaningful inside a\n`timeline-container`; demonstrated through it.\n\n`datetime` is the entry's one timestamp. A nested element that has its own\ntimestamp prop (e.g. `chat-message`'s `timestamp`) should leave it unset —\nsetting both renders the same time twice.\n\nThe dot's `color` types the entry using the shared status-pill palette —\n`primary` by default, plus `neutral`, `info`, `success`, `warning`, and\n`danger`.\n\nSet `compact` for dense, one-line system-status entries
|
|
14346
|
+
"description": "One event on a `timeline-container`: a dot on the vertical line, an optional\nheadline, a relative timestamp (\"3 hours ago\"), and freely nested content.\nThe connecting line is drawn here — its segment above the dot is hidden on\nthe first entry and the segment below is hidden on the last, so the line caps\nexactly at the first and last dots. Only meaningful inside a\n`timeline-container`; demonstrated through it.\n\n`datetime` is the entry's one timestamp. A nested element that has its own\ntimestamp prop (e.g. `chat-message`'s `timestamp`) should leave it unset —\nsetting both renders the same time twice.\n\nThe dot's `color` types the entry using the shared status-pill palette —\n`primary` by default, plus `neutral`, `info`, `success`, `warning`, and\n`danger`.\n\nSet `compact` for dense, one-line system-status entries: it tightens the\nvertical spacing and renders the content smaller and muted.\n\nSet `running` to replace the dot with an animated gray ring spinner,\nindicating the entry represents in-progress work; `color` has no visible\neffect while `running` is set.",
|
|
14253
14347
|
"name": "TimelineEntry",
|
|
14254
14348
|
"slots": [
|
|
14255
14349
|
{
|
|
@@ -14293,6 +14387,17 @@
|
|
|
14293
14387
|
"attribute": "compact",
|
|
14294
14388
|
"reflects": true
|
|
14295
14389
|
},
|
|
14390
|
+
{
|
|
14391
|
+
"kind": "field",
|
|
14392
|
+
"name": "running",
|
|
14393
|
+
"type": {
|
|
14394
|
+
"text": "boolean"
|
|
14395
|
+
},
|
|
14396
|
+
"default": "false",
|
|
14397
|
+
"description": "Shows an animated ring spinner in place of the dot, indicating the entry\nrepresents in-progress work. Overrides `color` while set — the spinner\nalways uses the muted/gray palette.",
|
|
14398
|
+
"attribute": "running",
|
|
14399
|
+
"reflects": true
|
|
14400
|
+
},
|
|
14296
14401
|
{
|
|
14297
14402
|
"kind": "field",
|
|
14298
14403
|
"name": "_hasHeadline",
|
|
@@ -14350,6 +14455,15 @@
|
|
|
14350
14455
|
"default": "false",
|
|
14351
14456
|
"description": "Dense, one-line presentation for system-status entries: tighter vertical\nspacing and smaller, muted content.",
|
|
14352
14457
|
"fieldName": "compact"
|
|
14458
|
+
},
|
|
14459
|
+
{
|
|
14460
|
+
"name": "running",
|
|
14461
|
+
"type": {
|
|
14462
|
+
"text": "boolean"
|
|
14463
|
+
},
|
|
14464
|
+
"default": "false",
|
|
14465
|
+
"description": "Shows an animated ring spinner in place of the dot, indicating the entry\nrepresents in-progress work. Overrides `color` while set — the spinner\nalways uses the muted/gray palette.",
|
|
14466
|
+
"fieldName": "running"
|
|
14353
14467
|
}
|
|
14354
14468
|
],
|
|
14355
14469
|
"superclass": {
|
package/dist/index.d.ts
CHANGED
|
@@ -29,6 +29,7 @@ export { RangeSlider } from "./range-slider.js";
|
|
|
29
29
|
export { ButtonGroup, type ButtonGroupOption } from "./button-group.js";
|
|
30
30
|
export { UiButton, type ButtonVariant } from "./ui-button.js";
|
|
31
31
|
export { StatMeter } from "./stat-meter.js";
|
|
32
|
+
export { StatusBanner, type StatusBannerVariant } from "./status-banner.js";
|
|
32
33
|
export { StatusPill, type StatusPillColor } from "./status-pill.js";
|
|
33
34
|
export { EditableText } from "./editable-text.js";
|
|
34
35
|
export { LiveTimer } from "./live-timer.js";
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -29,6 +29,7 @@ export { RangeSlider } from "./range-slider.js";
|
|
|
29
29
|
export { ButtonGroup } from "./button-group.js";
|
|
30
30
|
export { UiButton } from "./ui-button.js";
|
|
31
31
|
export { StatMeter } from "./stat-meter.js";
|
|
32
|
+
export { StatusBanner } from "./status-banner.js";
|
|
32
33
|
export { StatusPill } from "./status-pill.js";
|
|
33
34
|
export { EditableText } from "./editable-text.js";
|
|
34
35
|
export { LiveTimer } from "./live-timer.js";
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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","sourcesContent":["export { AnimateConfetti } from \"./animate-confetti.js\";\nexport { GalleryItem } from \"./gallery-item.js\";\nexport { GalleryItemVariant } from \"./gallery-item-variant.js\";\nexport {\n PhotoGallery,\n type PhotoGalleryChangeReason,\n type PhotoGalleryObjectFit,\n type PhotoGallerySlideChangeDetail,\n} from \"./photo-gallery.js\";\nexport { RevealButton } from \"./reveal-button.js\";\nexport { RomanNumeral } from \"./roman-numeral.js\";\nexport { ConfirmDialog } from \"./confirm-dialog.js\";\nexport { ContentDivider } from \"./content-divider.js\";\nexport {\n ToastNotification,\n notifySuccess,\n notifyError,\n notifyInfo,\n notifyWarning,\n type ToastVariant,\n} from \"./toast-notification.js\";\nexport { ScrollToBottom } from \"./scroll-to-bottom.js\";\nexport { ScrollToTop } from \"./scroll-to-top.js\";\nexport { SlidePanel } from \"./slide-panel.js\";\nexport { CopyLinkButton } from \"./copy-link-button.js\";\nexport { RelativeTime } from \"./relative-time.js\";\nexport { DistanceValue } from \"./distance-value.js\";\nexport { PriceHistoryChart, type PricePoint } from \"./price-history-chart.js\";\nexport { DistributionChart, type DistributionValue } from \"./distribution-chart.js\";\nexport { PercentBarChart, type PercentBarGroup } from \"./percent-bar-chart.js\";\nexport { WeightBarChart, type WeightBarItem } from \"./weight-bar-chart.js\";\nexport {\n AddressAutocomplete,\n type AddressSuggestion,\n} from \"./address-autocomplete.js\";\nexport {\n AutocompleteInput,\n type AutocompleteOption,\n} from \"./autocomplete-input.js\";\nexport { UserAvatar } from \"./user-avatar.js\";\nexport { MapPin } from \"./map-pin.js\";\nexport { MapCircle } from \"./map-circle.js\";\nexport { MapboxMap } from \"./mapbox-map.js\";\nexport { RadioCards, type RadioCardOption } from \"./radio-cards.js\";\nexport { RadioPills, type RadioPillOption } from \"./radio-pills.js\";\nexport { RangeSlider } from \"./range-slider.js\";\nexport { ButtonGroup, type ButtonGroupOption } from \"./button-group.js\";\nexport { UiButton, type ButtonVariant } from \"./ui-button.js\";\nexport { StatMeter } from \"./stat-meter.js\";\nexport { StatusPill, type StatusPillColor } from \"./status-pill.js\";\nexport { EditableText } from \"./editable-text.js\";\nexport { LiveTimer } from \"./live-timer.js\";\nexport { LoadMore } from \"./load-more.js\";\nexport { LoadingSpinner } from \"./loading-spinner.js\";\nexport { LoadingDots } from \"./loading-dots.js\";\nexport {\n ChatMessage,\n type ChatMessageRole,\n type ChatMessageVariant,\n} from \"./chat-message.js\";\nexport { UiCheckbox } from \"./ui-checkbox.js\";\nexport { FormField } from \"./form-field.js\";\nexport { FormSelect, type SelectOption } from \"./form-select.js\";\nexport {\n MultiSelect,\n type MultiSelectOption,\n type MultiSelectVariant,\n} from \"./multi-select.js\";\nexport { DataTable, type DataTableColumn } from \"./data-table.js\";\nexport { TileGrid } from \"./tile-grid.js\";\nexport { TreeView, type TreeNode } from \"./tree-view.js\";\nexport { PopoverPanel } from \"./popover-panel.js\";\nexport { DropdownButton, type DropdownOption } from \"./dropdown-button.js\";\nexport { IconButton } from \"./icon-button.js\";\nexport { KbdHint, type KbdPlatform } from \"./kbd-hint.js\";\nexport { FrameBox } from \"./frame-box.js\";\nexport { AppShell, type SidebarToggleDetail } from \"./app-shell.js\";\nexport { AppSidebar } from \"./app-sidebar.js\";\nexport { ActionBar } from \"./action-bar.js\";\nexport { PageHeader } from \"./page-header.js\";\nexport { PaginationNav, type PageChangeDetail } from \"./pagination-nav.js\";\nexport { FormActions } from \"./form-actions.js\";\nexport { TimelineContainer } from \"./timeline-container.js\";\nexport { TimelineEntry } from \"./timeline-entry.js\";\nexport { CalendarEntry } from \"./calendar-entry.js\";\nexport { CalendarMonth } from \"./calendar-month.js\";\nexport { CalendarYear } from \"./calendar-year.js\";\nexport {\n KanbanBoard,\n type KanbanCardData,\n type KanbanColumnData,\n type KanbanCardMoveDetail,\n type KanbanCardOpenDetail,\n} from \"./kanban-board.js\";\nexport { KanbanColumn } from \"./kanban-column.js\";\nexport { KanbanCard } from \"./kanban-card.js\";\nexport { TextArea } from \"./text-area.js\";\nexport { LinkCard, type LinkCardStatus } from \"./link-card.js\";\nexport { CardGrid } from \"./card-grid.js\";\nexport { MarkdownView } from \"./markdown-view.js\";\nexport { AutoScroll } from \"./auto-scroll.js\";\nexport { SplitHero } from \"./split-hero.js\";\nexport { TabBar, type TabChangeDetail } from \"./tab-bar.js\";\nexport { TabItem } from \"./tab-item.js\";\nexport { MarkdownEditor } from \"./markdown-editor.js\";\nexport {\n parseFrontMatter,\n formatFrontMatterValue,\n type FrontMatterResult,\n} from \"./utils/front-matter.js\";\nexport { formatDuration, type DurationFormat } from \"./utils/duration.js\";\nexport { tokens, tokenValues, darkTokenValues } from \"./tokens.js\";\nexport * from \"./icons.js\";\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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","sourcesContent":["export { AnimateConfetti } from \"./animate-confetti.js\";\nexport { GalleryItem } from \"./gallery-item.js\";\nexport { GalleryItemVariant } from \"./gallery-item-variant.js\";\nexport {\n PhotoGallery,\n type PhotoGalleryChangeReason,\n type PhotoGalleryObjectFit,\n type PhotoGallerySlideChangeDetail,\n} from \"./photo-gallery.js\";\nexport { RevealButton } from \"./reveal-button.js\";\nexport { RomanNumeral } from \"./roman-numeral.js\";\nexport { ConfirmDialog } from \"./confirm-dialog.js\";\nexport { ContentDivider } from \"./content-divider.js\";\nexport {\n ToastNotification,\n notifySuccess,\n notifyError,\n notifyInfo,\n notifyWarning,\n type ToastVariant,\n} from \"./toast-notification.js\";\nexport { ScrollToBottom } from \"./scroll-to-bottom.js\";\nexport { ScrollToTop } from \"./scroll-to-top.js\";\nexport { SlidePanel } from \"./slide-panel.js\";\nexport { CopyLinkButton } from \"./copy-link-button.js\";\nexport { RelativeTime } from \"./relative-time.js\";\nexport { DistanceValue } from \"./distance-value.js\";\nexport { PriceHistoryChart, type PricePoint } from \"./price-history-chart.js\";\nexport { DistributionChart, type DistributionValue } from \"./distribution-chart.js\";\nexport { PercentBarChart, type PercentBarGroup } from \"./percent-bar-chart.js\";\nexport { WeightBarChart, type WeightBarItem } from \"./weight-bar-chart.js\";\nexport {\n AddressAutocomplete,\n type AddressSuggestion,\n} from \"./address-autocomplete.js\";\nexport {\n AutocompleteInput,\n type AutocompleteOption,\n} from \"./autocomplete-input.js\";\nexport { UserAvatar } from \"./user-avatar.js\";\nexport { MapPin } from \"./map-pin.js\";\nexport { MapCircle } from \"./map-circle.js\";\nexport { MapboxMap } from \"./mapbox-map.js\";\nexport { RadioCards, type RadioCardOption } from \"./radio-cards.js\";\nexport { RadioPills, type RadioPillOption } from \"./radio-pills.js\";\nexport { RangeSlider } from \"./range-slider.js\";\nexport { ButtonGroup, type ButtonGroupOption } from \"./button-group.js\";\nexport { UiButton, type ButtonVariant } from \"./ui-button.js\";\nexport { StatMeter } from \"./stat-meter.js\";\nexport { StatusBanner, type StatusBannerVariant } from \"./status-banner.js\";\nexport { StatusPill, type StatusPillColor } from \"./status-pill.js\";\nexport { EditableText } from \"./editable-text.js\";\nexport { LiveTimer } from \"./live-timer.js\";\nexport { LoadMore } from \"./load-more.js\";\nexport { LoadingSpinner } from \"./loading-spinner.js\";\nexport { LoadingDots } from \"./loading-dots.js\";\nexport {\n ChatMessage,\n type ChatMessageRole,\n type ChatMessageVariant,\n} from \"./chat-message.js\";\nexport { UiCheckbox } from \"./ui-checkbox.js\";\nexport { FormField } from \"./form-field.js\";\nexport { FormSelect, type SelectOption } from \"./form-select.js\";\nexport {\n MultiSelect,\n type MultiSelectOption,\n type MultiSelectVariant,\n} from \"./multi-select.js\";\nexport { DataTable, type DataTableColumn } from \"./data-table.js\";\nexport { TileGrid } from \"./tile-grid.js\";\nexport { TreeView, type TreeNode } from \"./tree-view.js\";\nexport { PopoverPanel } from \"./popover-panel.js\";\nexport { DropdownButton, type DropdownOption } from \"./dropdown-button.js\";\nexport { IconButton } from \"./icon-button.js\";\nexport { KbdHint, type KbdPlatform } from \"./kbd-hint.js\";\nexport { FrameBox } from \"./frame-box.js\";\nexport { AppShell, type SidebarToggleDetail } from \"./app-shell.js\";\nexport { AppSidebar } from \"./app-sidebar.js\";\nexport { ActionBar } from \"./action-bar.js\";\nexport { PageHeader } from \"./page-header.js\";\nexport { PaginationNav, type PageChangeDetail } from \"./pagination-nav.js\";\nexport { FormActions } from \"./form-actions.js\";\nexport { TimelineContainer } from \"./timeline-container.js\";\nexport { TimelineEntry } from \"./timeline-entry.js\";\nexport { CalendarEntry } from \"./calendar-entry.js\";\nexport { CalendarMonth } from \"./calendar-month.js\";\nexport { CalendarYear } from \"./calendar-year.js\";\nexport {\n KanbanBoard,\n type KanbanCardData,\n type KanbanColumnData,\n type KanbanCardMoveDetail,\n type KanbanCardOpenDetail,\n} from \"./kanban-board.js\";\nexport { KanbanColumn } from \"./kanban-column.js\";\nexport { KanbanCard } from \"./kanban-card.js\";\nexport { TextArea } from \"./text-area.js\";\nexport { LinkCard, type LinkCardStatus } from \"./link-card.js\";\nexport { CardGrid } from \"./card-grid.js\";\nexport { MarkdownView } from \"./markdown-view.js\";\nexport { AutoScroll } from \"./auto-scroll.js\";\nexport { SplitHero } from \"./split-hero.js\";\nexport { TabBar, type TabChangeDetail } from \"./tab-bar.js\";\nexport { TabItem } from \"./tab-item.js\";\nexport { MarkdownEditor } from \"./markdown-editor.js\";\nexport {\n parseFrontMatter,\n formatFrontMatterValue,\n type FrontMatterResult,\n} from \"./utils/front-matter.js\";\nexport { formatDuration, type DurationFormat } from \"./utils/duration.js\";\nexport { tokens, tokenValues, darkTokenValues } from \"./tokens.js\";\nexport * from \"./icons.js\";\n"]}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { LitElement, type TemplateResult } from "lit";
|
|
2
|
+
export type StatusBannerVariant = "neutral" | "info" | "success" | "warning" | "danger";
|
|
3
|
+
/**
|
|
4
|
+
* Full-width, app-level status bar for a persistent condition — "Reconnecting…",
|
|
5
|
+
* "Read-only mode", "New version available". Unlike `toast-notification` (which
|
|
6
|
+
* is transient, imperative, and stacks in a corner) this stays put for as long
|
|
7
|
+
* as the condition holds, so the consumer controls its presence by rendering it
|
|
8
|
+
* or not.
|
|
9
|
+
*
|
|
10
|
+
* Colors mirror `status-pill`: a tinted background with accent-colored text.
|
|
11
|
+
* Announced to assistive tech via `role="status"` (or `role="alert"` for the
|
|
12
|
+
* `danger` variant, matching `toast-notification`'s split).
|
|
13
|
+
*
|
|
14
|
+
* @element status-banner
|
|
15
|
+
* @slot - The message text.
|
|
16
|
+
* @slot actions - Optional trailing controls, e.g. a "Retry" button.
|
|
17
|
+
*/
|
|
18
|
+
export declare class StatusBanner extends LitElement {
|
|
19
|
+
static styles: import("lit").CSSResult[];
|
|
20
|
+
/** Visual style; also selects the accent color. */
|
|
21
|
+
variant: StatusBannerVariant;
|
|
22
|
+
/**
|
|
23
|
+
* Optional leading icon, pre-rendered by the consumer (e.g. `iconInfo(14)`),
|
|
24
|
+
* matching `nav-item`/`icon-button` — icons are passed in, not named, so the
|
|
25
|
+
* component never has to know the icon catalog.
|
|
26
|
+
*/
|
|
27
|
+
icon: TemplateResult | null;
|
|
28
|
+
render(): TemplateResult<1>;
|
|
29
|
+
}
|
|
30
|
+
declare global {
|
|
31
|
+
interface HTMLElementTagNameMap {
|
|
32
|
+
"status-banner": StatusBanner;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
//# sourceMappingURL=status-banner.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"status-banner.d.ts","sourceRoot":"","sources":["../src/status-banner.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,KAAK,cAAc,EAAsB,MAAM,KAAK,CAAC;AAI1E,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAExF;;;;;;;;;;;;;;GAcG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,4BA0EpB;IAEF,mDAAmD;IACtB,OAAO,EAAE,mBAAmB,CAAU;IAEnE;;;;OAIG;IAC6B,IAAI,EAAE,cAAc,GAAG,IAAI,CAAQ;IAE1D,MAAM,sBAUd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAC;KAC/B;CACF"}
|
|
@@ -0,0 +1,134 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
import { LitElement, css, html, nothing } from "lit";
|
|
8
|
+
import { customElement, property } from "lit/decorators.js";
|
|
9
|
+
import { tokens } from "./tokens.js";
|
|
10
|
+
/**
|
|
11
|
+
* Full-width, app-level status bar for a persistent condition — "Reconnecting…",
|
|
12
|
+
* "Read-only mode", "New version available". Unlike `toast-notification` (which
|
|
13
|
+
* is transient, imperative, and stacks in a corner) this stays put for as long
|
|
14
|
+
* as the condition holds, so the consumer controls its presence by rendering it
|
|
15
|
+
* or not.
|
|
16
|
+
*
|
|
17
|
+
* Colors mirror `status-pill`: a tinted background with accent-colored text.
|
|
18
|
+
* Announced to assistive tech via `role="status"` (or `role="alert"` for the
|
|
19
|
+
* `danger` variant, matching `toast-notification`'s split).
|
|
20
|
+
*
|
|
21
|
+
* @element status-banner
|
|
22
|
+
* @slot - The message text.
|
|
23
|
+
* @slot actions - Optional trailing controls, e.g. a "Retry" button.
|
|
24
|
+
*/
|
|
25
|
+
let StatusBanner = class StatusBanner extends LitElement {
|
|
26
|
+
constructor() {
|
|
27
|
+
super(...arguments);
|
|
28
|
+
/** Visual style; also selects the accent color. */
|
|
29
|
+
this.variant = "info";
|
|
30
|
+
/**
|
|
31
|
+
* Optional leading icon, pre-rendered by the consumer (e.g. `iconInfo(14)`),
|
|
32
|
+
* matching `nav-item`/`icon-button` — icons are passed in, not named, so the
|
|
33
|
+
* component never has to know the icon catalog.
|
|
34
|
+
*/
|
|
35
|
+
this.icon = null;
|
|
36
|
+
}
|
|
37
|
+
static { this.styles = [
|
|
38
|
+
tokens,
|
|
39
|
+
css `
|
|
40
|
+
:host {
|
|
41
|
+
display: block;
|
|
42
|
+
}
|
|
43
|
+
.bar {
|
|
44
|
+
display: flex;
|
|
45
|
+
align-items: center;
|
|
46
|
+
justify-content: center;
|
|
47
|
+
gap: 0.5rem;
|
|
48
|
+
padding: 0.5rem 0.75rem;
|
|
49
|
+
/* Deliberately taller than the 2rem control target: this is a passive
|
|
50
|
+
page-level notice competing with real content, so it needs presence.
|
|
51
|
+
Expressed against the type token so it keeps the 4x relationship if a
|
|
52
|
+
consumer scales the font. */
|
|
53
|
+
min-height: calc(var(--ui-font-size-sm, 0.75rem) * 4);
|
|
54
|
+
box-sizing: border-box;
|
|
55
|
+
font-family: var(
|
|
56
|
+
--ui-font,
|
|
57
|
+
ui-sans-serif,
|
|
58
|
+
system-ui,
|
|
59
|
+
sans-serif,
|
|
60
|
+
"Apple Color Emoji",
|
|
61
|
+
"Segoe UI Emoji",
|
|
62
|
+
"Segoe UI Symbol",
|
|
63
|
+
"Noto Color Emoji"
|
|
64
|
+
);
|
|
65
|
+
font-size: var(--ui-font-size-sm, 0.75rem);
|
|
66
|
+
line-height: var(--ui-line-height-normal, 1.5);
|
|
67
|
+
}
|
|
68
|
+
/* Keep the message centered while actions sit at the trailing edge. */
|
|
69
|
+
.message {
|
|
70
|
+
display: inline-flex;
|
|
71
|
+
align-items: center;
|
|
72
|
+
gap: 0.25rem;
|
|
73
|
+
text-align: center;
|
|
74
|
+
}
|
|
75
|
+
.actions {
|
|
76
|
+
margin-left: auto;
|
|
77
|
+
display: inline-flex;
|
|
78
|
+
align-items: center;
|
|
79
|
+
gap: 0.25rem;
|
|
80
|
+
}
|
|
81
|
+
.icon {
|
|
82
|
+
display: inline-flex;
|
|
83
|
+
line-height: 0;
|
|
84
|
+
}
|
|
85
|
+
.bar.neutral {
|
|
86
|
+
background: color-mix(in srgb, var(--ui-text-muted, #64748b) 15%, transparent);
|
|
87
|
+
color: var(--ui-text-muted, #64748b);
|
|
88
|
+
}
|
|
89
|
+
.bar.info {
|
|
90
|
+
background: color-mix(in srgb, var(--ui-info, #0ea5e9) 15%, transparent);
|
|
91
|
+
color: var(--ui-info, #0ea5e9);
|
|
92
|
+
}
|
|
93
|
+
.bar.success {
|
|
94
|
+
background: color-mix(in srgb, var(--ui-success, #16a34a) 15%, transparent);
|
|
95
|
+
color: var(--ui-success, #16a34a);
|
|
96
|
+
}
|
|
97
|
+
.bar.warning {
|
|
98
|
+
background: color-mix(in srgb, var(--ui-warning, #d97706) 15%, transparent);
|
|
99
|
+
color: var(--ui-warning, #d97706);
|
|
100
|
+
}
|
|
101
|
+
.bar.danger {
|
|
102
|
+
background: color-mix(in srgb, var(--ui-danger, #dc2626) 15%, transparent);
|
|
103
|
+
color: var(--ui-danger, #dc2626);
|
|
104
|
+
}
|
|
105
|
+
@media (forced-colors: active) {
|
|
106
|
+
.bar {
|
|
107
|
+
border-bottom: 1px solid CanvasText;
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
`,
|
|
111
|
+
]; }
|
|
112
|
+
render() {
|
|
113
|
+
return html `
|
|
114
|
+
<div class="bar ${this.variant}" role=${this.variant === "danger" ? "alert" : "status"}>
|
|
115
|
+
<span class="message">
|
|
116
|
+
${this.icon ? html `<span class="icon">${this.icon}</span>` : nothing}
|
|
117
|
+
<slot></slot>
|
|
118
|
+
</span>
|
|
119
|
+
<span class="actions"><slot name="actions"></slot></span>
|
|
120
|
+
</div>
|
|
121
|
+
`;
|
|
122
|
+
}
|
|
123
|
+
};
|
|
124
|
+
__decorate([
|
|
125
|
+
property({ reflect: true })
|
|
126
|
+
], StatusBanner.prototype, "variant", void 0);
|
|
127
|
+
__decorate([
|
|
128
|
+
property({ attribute: false })
|
|
129
|
+
], StatusBanner.prototype, "icon", void 0);
|
|
130
|
+
StatusBanner = __decorate([
|
|
131
|
+
customElement("status-banner")
|
|
132
|
+
], StatusBanner);
|
|
133
|
+
export { StatusBanner };
|
|
134
|
+
//# sourceMappingURL=status-banner.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"status-banner.js","sourceRoot":"","sources":["../src/status-banner.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAuB,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAIrC;;;;;;;;;;;;;;GAcG;AAEI,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAArC;;QA6EL,mDAAmD;QACtB,YAAO,GAAwB,MAAM,CAAC;QAEnE;;;;WAIG;QAC6B,SAAI,GAA0B,IAAI,CAAC;IAarE,CAAC;aAjGiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuEF;KACF,AA1EqB,CA0EpB;IAYO,MAAM;QACb,OAAO,IAAI,CAAA;wBACS,IAAI,CAAC,OAAO,UAAU,IAAI,CAAC,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ;;YAEhF,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,sBAAsB,IAAI,CAAC,IAAI,SAAS,CAAC,CAAC,CAAC,OAAO;;;;;KAKzE,CAAC;IACJ,CAAC;CACF,CAAA;AApB8B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAAuC;AAOnC;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;0CAAoC;AArFxD,YAAY;IADxB,aAAa,CAAC,eAAe,CAAC;GAClB,YAAY,CAkGxB","sourcesContent":["import { LitElement, type TemplateResult, css, html, nothing } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { tokens } from \"./tokens.js\";\n\nexport type StatusBannerVariant = \"neutral\" | \"info\" | \"success\" | \"warning\" | \"danger\";\n\n/**\n * Full-width, app-level status bar for a persistent condition — \"Reconnecting…\",\n * \"Read-only mode\", \"New version available\". Unlike `toast-notification` (which\n * is transient, imperative, and stacks in a corner) this stays put for as long\n * as the condition holds, so the consumer controls its presence by rendering it\n * or not.\n *\n * Colors mirror `status-pill`: a tinted background with accent-colored text.\n * Announced to assistive tech via `role=\"status\"` (or `role=\"alert\"` for the\n * `danger` variant, matching `toast-notification`'s split).\n *\n * @element status-banner\n * @slot - The message text.\n * @slot actions - Optional trailing controls, e.g. a \"Retry\" button.\n */\n@customElement(\"status-banner\")\nexport class StatusBanner extends LitElement {\n static override styles = [\n tokens,\n css`\n :host {\n display: block;\n }\n .bar {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n padding: 0.5rem 0.75rem;\n /* Deliberately taller than the 2rem control target: this is a passive\n page-level notice competing with real content, so it needs presence.\n Expressed against the type token so it keeps the 4x relationship if a\n consumer scales the font. */\n min-height: calc(var(--ui-font-size-sm, 0.75rem) * 4);\n box-sizing: border-box;\n font-family: var(\n --ui-font,\n ui-sans-serif,\n system-ui,\n sans-serif,\n \"Apple Color Emoji\",\n \"Segoe UI Emoji\",\n \"Segoe UI Symbol\",\n \"Noto Color Emoji\"\n );\n font-size: var(--ui-font-size-sm, 0.75rem);\n line-height: var(--ui-line-height-normal, 1.5);\n }\n /* Keep the message centered while actions sit at the trailing edge. */\n .message {\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n text-align: center;\n }\n .actions {\n margin-left: auto;\n display: inline-flex;\n align-items: center;\n gap: 0.25rem;\n }\n .icon {\n display: inline-flex;\n line-height: 0;\n }\n .bar.neutral {\n background: color-mix(in srgb, var(--ui-text-muted, #64748b) 15%, transparent);\n color: var(--ui-text-muted, #64748b);\n }\n .bar.info {\n background: color-mix(in srgb, var(--ui-info, #0ea5e9) 15%, transparent);\n color: var(--ui-info, #0ea5e9);\n }\n .bar.success {\n background: color-mix(in srgb, var(--ui-success, #16a34a) 15%, transparent);\n color: var(--ui-success, #16a34a);\n }\n .bar.warning {\n background: color-mix(in srgb, var(--ui-warning, #d97706) 15%, transparent);\n color: var(--ui-warning, #d97706);\n }\n .bar.danger {\n background: color-mix(in srgb, var(--ui-danger, #dc2626) 15%, transparent);\n color: var(--ui-danger, #dc2626);\n }\n @media (forced-colors: active) {\n .bar {\n border-bottom: 1px solid CanvasText;\n }\n }\n `,\n ];\n\n /** Visual style; also selects the accent color. */\n @property({ reflect: true }) variant: StatusBannerVariant = \"info\";\n\n /**\n * Optional leading icon, pre-rendered by the consumer (e.g. `iconInfo(14)`),\n * matching `nav-item`/`icon-button` — icons are passed in, not named, so the\n * component never has to know the icon catalog.\n */\n @property({ attribute: false }) icon: TemplateResult | null = null;\n\n override render() {\n return html`\n <div class=\"bar ${this.variant}\" role=${this.variant === \"danger\" ? \"alert\" : \"status\"}>\n <span class=\"message\">\n ${this.icon ? html`<span class=\"icon\">${this.icon}</span>` : nothing}\n <slot></slot>\n </span>\n <span class=\"actions\"><slot name=\"actions\"></slot></span>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"status-banner\": StatusBanner;\n }\n}\n"]}
|
package/dist/timeline-entry.d.ts
CHANGED
|
@@ -17,9 +17,12 @@ import type { StatusPillColor } from "./status-pill.js";
|
|
|
17
17
|
* `primary` by default, plus `neutral`, `info`, `success`, `warning`, and
|
|
18
18
|
* `danger`.
|
|
19
19
|
*
|
|
20
|
-
* Set `compact` for dense, one-line system-status entries
|
|
21
|
-
*
|
|
22
|
-
*
|
|
20
|
+
* Set `compact` for dense, one-line system-status entries: it tightens the
|
|
21
|
+
* vertical spacing and renders the content smaller and muted.
|
|
22
|
+
*
|
|
23
|
+
* Set `running` to replace the dot with an animated gray ring spinner,
|
|
24
|
+
* indicating the entry represents in-progress work; `color` has no visible
|
|
25
|
+
* effect while `running` is set.
|
|
23
26
|
*
|
|
24
27
|
* @element timeline-entry
|
|
25
28
|
* @slot headline - Optional headline/title for the event.
|
|
@@ -38,6 +41,12 @@ export declare class TimelineEntry extends LitElement {
|
|
|
38
41
|
* spacing and smaller, muted content.
|
|
39
42
|
*/
|
|
40
43
|
compact: boolean;
|
|
44
|
+
/**
|
|
45
|
+
* Shows an animated ring spinner in place of the dot, indicating the entry
|
|
46
|
+
* represents in-progress work. Overrides `color` while set — the spinner
|
|
47
|
+
* always uses the muted/gray palette.
|
|
48
|
+
*/
|
|
49
|
+
running: boolean;
|
|
41
50
|
/** Whether the headline slot currently has assigned content. */
|
|
42
51
|
private _hasHeadline;
|
|
43
52
|
static styles: import("lit").CSSResult[];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"timeline-entry.d.ts","sourceRoot":"","sources":["../src/timeline-entry.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAErD,OAAO,oBAAoB,CAAC;AAE5B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAExD
|
|
1
|
+
{"version":3,"file":"timeline-entry.d.ts","sourceRoot":"","sources":["../src/timeline-entry.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAErD,OAAO,oBAAoB,CAAC;AAE5B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAExD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,uEAAuE;IAC3D,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAQ;IAE3C;;;OAGG;IACS,KAAK,EAAE,eAAe,CAAa;IAE/C;;;OAGG;IACyC,OAAO,UAAS;IAE5D;;;;OAIG;IACyC,OAAO,UAAS;IAE5D,gEAAgE;IACvD,OAAO,CAAC,YAAY,CAAS;IAEtC,OAAgB,MAAM,4BAsKpB;IAEO,iBAAiB,IAAI,IAAI,CAGjC;IAED,6EAA6E;IAC7E,OAAO,CAAC,qBAAqB;IAIpB,MAAM,yCA4Bd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,aAAa,CAAC;KACjC;CACF"}
|
package/dist/timeline-entry.js
CHANGED
|
@@ -24,9 +24,12 @@ import { tokens } from "./tokens.js";
|
|
|
24
24
|
* `primary` by default, plus `neutral`, `info`, `success`, `warning`, and
|
|
25
25
|
* `danger`.
|
|
26
26
|
*
|
|
27
|
-
* Set `compact` for dense, one-line system-status entries
|
|
28
|
-
*
|
|
29
|
-
*
|
|
27
|
+
* Set `compact` for dense, one-line system-status entries: it tightens the
|
|
28
|
+
* vertical spacing and renders the content smaller and muted.
|
|
29
|
+
*
|
|
30
|
+
* Set `running` to replace the dot with an animated gray ring spinner,
|
|
31
|
+
* indicating the entry represents in-progress work; `color` has no visible
|
|
32
|
+
* effect while `running` is set.
|
|
30
33
|
*
|
|
31
34
|
* @element timeline-entry
|
|
32
35
|
* @slot headline - Optional headline/title for the event.
|
|
@@ -47,6 +50,12 @@ let TimelineEntry = class TimelineEntry extends LitElement {
|
|
|
47
50
|
* spacing and smaller, muted content.
|
|
48
51
|
*/
|
|
49
52
|
this.compact = false;
|
|
53
|
+
/**
|
|
54
|
+
* Shows an animated ring spinner in place of the dot, indicating the entry
|
|
55
|
+
* represents in-progress work. Overrides `color` while set — the spinner
|
|
56
|
+
* always uses the muted/gray palette.
|
|
57
|
+
*/
|
|
58
|
+
this.running = false;
|
|
50
59
|
/** Whether the headline slot currently has assigned content. */
|
|
51
60
|
this._hasHeadline = false;
|
|
52
61
|
}
|
|
@@ -125,6 +134,45 @@ let TimelineEntry = class TimelineEntry extends LitElement {
|
|
|
125
134
|
.dot.danger {
|
|
126
135
|
--_dot: var(--ui-danger, #dc2626);
|
|
127
136
|
}
|
|
137
|
+
.spinner {
|
|
138
|
+
position: absolute;
|
|
139
|
+
top: 0.125rem;
|
|
140
|
+
left: 50%;
|
|
141
|
+
width: 0.75rem;
|
|
142
|
+
height: 0.75rem;
|
|
143
|
+
transform: translateX(-50%);
|
|
144
|
+
animation: spin 0.8s linear infinite;
|
|
145
|
+
}
|
|
146
|
+
.spinner-track {
|
|
147
|
+
fill: none;
|
|
148
|
+
stroke: color-mix(in srgb, var(--ui-text-muted, #64748b) 25%, transparent);
|
|
149
|
+
stroke-width: 3;
|
|
150
|
+
}
|
|
151
|
+
.spinner-arc {
|
|
152
|
+
fill: none;
|
|
153
|
+
stroke: var(--ui-text-muted, #64748b);
|
|
154
|
+
stroke-width: 3;
|
|
155
|
+
stroke-linecap: round;
|
|
156
|
+
stroke-dasharray: 42 100;
|
|
157
|
+
}
|
|
158
|
+
@keyframes spin {
|
|
159
|
+
to {
|
|
160
|
+
transform: rotate(360deg);
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
@media (prefers-reduced-motion: reduce) {
|
|
164
|
+
.spinner {
|
|
165
|
+
animation: none;
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
@media (forced-colors: active) {
|
|
169
|
+
.spinner-track {
|
|
170
|
+
stroke: GrayText;
|
|
171
|
+
}
|
|
172
|
+
.spinner-arc {
|
|
173
|
+
stroke: CanvasText;
|
|
174
|
+
}
|
|
175
|
+
}
|
|
128
176
|
:host(:first-child) .line-top {
|
|
129
177
|
display: none;
|
|
130
178
|
}
|
|
@@ -193,7 +241,14 @@ let TimelineEntry = class TimelineEntry extends LitElement {
|
|
|
193
241
|
<div class="rail" aria-hidden="true">
|
|
194
242
|
<span class="line line-top"></span>
|
|
195
243
|
<span class="line line-bottom"></span>
|
|
196
|
-
|
|
244
|
+
${this.running
|
|
245
|
+
? html `
|
|
246
|
+
<svg class="spinner" viewBox="0 0 24 24">
|
|
247
|
+
<circle class="spinner-track" cx="12" cy="12" r="9"></circle>
|
|
248
|
+
<circle class="spinner-arc" cx="12" cy="12" r="9"></circle>
|
|
249
|
+
</svg>
|
|
250
|
+
`
|
|
251
|
+
: html `<span class="dot ${this.color}"></span>`}
|
|
197
252
|
</div>
|
|
198
253
|
<div class="body">
|
|
199
254
|
<div class="head">
|
|
@@ -219,6 +274,9 @@ __decorate([
|
|
|
219
274
|
__decorate([
|
|
220
275
|
property({ type: Boolean, reflect: true })
|
|
221
276
|
], TimelineEntry.prototype, "compact", void 0);
|
|
277
|
+
__decorate([
|
|
278
|
+
property({ type: Boolean, reflect: true })
|
|
279
|
+
], TimelineEntry.prototype, "running", void 0);
|
|
222
280
|
__decorate([
|
|
223
281
|
state()
|
|
224
282
|
], TimelineEntry.prototype, "_hasHeadline", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"timeline-entry.js","sourceRoot":"","sources":["../src/timeline-entry.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,oBAAoB,CAAC;AAC5B,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAGrC;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEI,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QACL,uEAAuE;QAC3D,aAAQ,GAAkB,IAAI,CAAC;QAE3C;;;WAGG;QACS,UAAK,GAAoB,SAAS,CAAC;QAE/C;;;WAGG;QACyC,YAAO,GAAG,KAAK,CAAC;QAE5D,gEAAgE;QAC/C,iBAAY,GAAG,KAAK,CAAC;IAmKxC,CAAC;aAjKiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4HF;KACF,AA/HqB,CA+HpB;IAEO,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC;YAAE,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IACxE,CAAC;IAED,6EAA6E;IACrE,qBAAqB,CAAC,KAAY;QACxC,IAAI,CAAC,YAAY,GAAI,KAAK,CAAC,MAA0B,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;IACpG,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;;;;;6BAKc,IAAI,CAAC,KAAK;;;;oCAIH,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO;kDAClB,IAAI,CAAC,qBAAqB;;cAE9D,IAAI,CAAC,QAAQ;YACb,CAAC,CAAC,IAAI,CAAA,wCAAwC,IAAI,CAAC,QAAQ,mBAAmB;YAC9E,CAAC,CAAC,OAAO;;;;;KAKlB,CAAC;IACJ,CAAC;CACF,CAAA;AAlLa;IAAX,QAAQ,EAAE;+CAAgC;AAM/B;IAAX,QAAQ,EAAE;4CAAoC;AAMH;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAAiB;AAG3C;IAAhB,KAAK,EAAE;mDAA8B;AAjB3B,aAAa;IADzB,aAAa,CAAC,gBAAgB,CAAC;GACnB,aAAa,CAoLzB","sourcesContent":["import { LitElement, css, html, nothing } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport \"./relative-time.js\";\nimport { tokens } from \"./tokens.js\";\nimport type { StatusPillColor } from \"./status-pill.js\";\n\n/**\n * One event on a `timeline-container`: a dot on the vertical line, an optional\n * headline, a relative timestamp (\"3 hours ago\"), and freely nested content.\n * The connecting line is drawn here — its segment above the dot is hidden on\n * the first entry and the segment below is hidden on the last, so the line caps\n * exactly at the first and last dots. Only meaningful inside a\n * `timeline-container`; demonstrated through it.\n *\n * `datetime` is the entry's one timestamp. A nested element that has its own\n * timestamp prop (e.g. `chat-message`'s `timestamp`) should leave it unset —\n * setting both renders the same time twice.\n *\n * The dot's `color` types the entry using the shared status-pill palette —\n * `primary` by default, plus `neutral`, `info`, `success`, `warning`, and\n * `danger`.\n *\n * Set `compact` for dense, one-line system-status entries (running spinners,\n * state changes): it tightens the vertical spacing and renders the content\n * smaller and muted.\n *\n * @element timeline-entry\n * @slot headline - Optional headline/title for the event.\n * @slot - The event content; nest any elements here.\n */\n@customElement(\"timeline-entry\")\nexport class TimelineEntry extends LitElement {\n /** ISO 8601 or SQLite datetime string, rendered as a relative time. */\n @property() datetime: string | null = null;\n\n /**\n * Visual type of the entry's dot, from the shared status-pill palette:\n * `primary` (default), `neutral`, `info`, `success`, `warning`, or `danger`.\n */\n @property() color: StatusPillColor = \"primary\";\n\n /**\n * Dense, one-line presentation for system-status entries: tighter vertical\n * spacing and smaller, muted content.\n */\n @property({ type: Boolean, reflect: true }) compact = false;\n\n /** Whether the headline slot currently has assigned content. */\n @state() private _hasHeadline = false;\n\n static override styles = [\n tokens,\n css`\n :host {\n display: block;\n font-family: var(\n --ui-font,\n ui-sans-serif,\n system-ui,\n sans-serif,\n \"Apple Color Emoji\",\n \"Segoe UI Emoji\",\n \"Segoe UI Symbol\",\n \"Noto Color Emoji\"\n );\n }\n .entry {\n display: flex;\n gap: 0.75rem;\n }\n .rail {\n position: relative;\n flex: 0 0 auto;\n width: 0.75rem;\n }\n .line {\n position: absolute;\n left: 50%;\n width: 2px;\n transform: translateX(-50%);\n background: var(--ui-border, #e2e8f0);\n }\n .line-top {\n top: 0;\n height: 0.5rem;\n }\n .line-bottom {\n top: 0.5rem;\n bottom: 0;\n }\n .dot {\n position: absolute;\n top: 0.125rem;\n left: 50%;\n width: 0.75rem;\n height: 0.75rem;\n transform: translateX(-50%);\n border-radius: 9999px;\n /* Same lighter-on-top token gradient as map-circle/user-avatar; the\n base color is swapped per the color property via the private\n --_dot var. */\n background: linear-gradient(\n to bottom,\n color-mix(in srgb, var(--_dot, var(--ui-primary, #4f46e5)) 70%, #ffffff) 0%,\n color-mix(in srgb, var(--_dot, var(--ui-primary, #4f46e5)) 70%, #000000) 100%\n );\n }\n .dot.neutral {\n --_dot: var(--ui-text-muted, #64748b);\n }\n .dot.info {\n --_dot: var(--ui-info, #0ea5e9);\n }\n .dot.primary {\n --_dot: var(--ui-primary, #4f46e5);\n }\n .dot.success {\n --_dot: var(--ui-success, #16a34a);\n }\n .dot.warning {\n --_dot: var(--ui-warning, #d97706);\n }\n .dot.danger {\n --_dot: var(--ui-danger, #dc2626);\n }\n :host(:first-child) .line-top {\n display: none;\n }\n :host(:last-child) .line-bottom {\n display: none;\n }\n .body {\n flex: 1 1 auto;\n min-width: 0;\n padding-bottom: 1.5rem;\n }\n :host(:last-child) .body {\n padding-bottom: 0;\n }\n .head {\n display: flex;\n align-items: baseline;\n gap: 0.5rem;\n flex-wrap: wrap;\n }\n .headline {\n font-weight: var(--ui-font-weight-semibold, 600);\n font-size: var(--ui-font-size, 0.875rem);\n line-height: var(--ui-line-height-tight, 1.25);\n color: var(--ui-text, #0f172a);\n }\n .headline.empty {\n display: none;\n }\n .time {\n font-size: var(--ui-font-size-sm, 0.75rem);\n line-height: var(--ui-line-height-tight, 1.25);\n color: var(--ui-text-muted, #64748b);\n }\n .content {\n margin-top: 0.25rem;\n font-size: var(--ui-font-size, 0.875rem);\n line-height: var(--ui-line-height-normal, 1.5);\n color: var(--ui-text, #0f172a);\n }\n :host([compact]) .body {\n padding-bottom: 0.5rem;\n }\n :host([compact]:last-child) .body {\n padding-bottom: 0;\n }\n :host([compact]) .content {\n margin-top: 0.125rem;\n font-size: var(--ui-font-size-sm, 0.75rem);\n color: var(--ui-text-muted, #64748b);\n }\n `,\n ];\n\n override connectedCallback(): void {\n super.connectedCallback();\n if (!this.hasAttribute(\"role\")) this.setAttribute(\"role\", \"listitem\");\n }\n\n /** Collapses the headline when nothing is slotted so the time sits alone. */\n private _onHeadlineSlotChange(event: Event): void {\n this._hasHeadline = (event.target as HTMLSlotElement).assignedNodes({ flatten: true }).length > 0;\n }\n\n override render() {\n return html`\n <div class=\"entry\">\n <div class=\"rail\" aria-hidden=\"true\">\n <span class=\"line line-top\"></span>\n <span class=\"line line-bottom\"></span>\n <span class=\"dot ${this.color}\"></span>\n </div>\n <div class=\"body\">\n <div class=\"head\">\n <span class=\"headline ${this._hasHeadline ? \"\" : \"empty\"}\">\n <slot name=\"headline\" @slotchange=${this._onHeadlineSlotChange}></slot>\n </span>\n ${this.datetime\n ? html`<relative-time class=\"time\" datetime=${this.datetime}></relative-time>`\n : nothing}\n </div>\n <div class=\"content\"><slot></slot></div>\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"timeline-entry\": TimelineEntry;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"timeline-entry.js","sourceRoot":"","sources":["../src/timeline-entry.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,oBAAoB,CAAC;AAC5B,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAGrC;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEI,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QACL,uEAAuE;QAC3D,aAAQ,GAAkB,IAAI,CAAC;QAE3C;;;WAGG;QACS,UAAK,GAAoB,SAAS,CAAC;QAE/C;;;WAGG;QACyC,YAAO,GAAG,KAAK,CAAC;QAE5D;;;;WAIG;QACyC,YAAO,GAAG,KAAK,CAAC;QAE5D,gEAAgE;QAC/C,iBAAY,GAAG,KAAK,CAAC;IAiNxC,CAAC;aA/MiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmKF;KACF,AAtKqB,CAsKpB;IAEO,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC;YAAE,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IACxE,CAAC;IAED,6EAA6E;IACrE,qBAAqB,CAAC,KAAY;QACxC,IAAI,CAAC,YAAY,GAAI,KAAK,CAAC,MAA0B,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC;IACpG,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;;;;;YAKH,IAAI,CAAC,OAAO;YACZ,CAAC,CAAC,IAAI,CAAA;;;;;eAKH;YACH,CAAC,CAAC,IAAI,CAAA,oBAAoB,IAAI,CAAC,KAAK,WAAW;;;;oCAIvB,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO;kDAClB,IAAI,CAAC,qBAAqB;;cAE9D,IAAI,CAAC,QAAQ;YACb,CAAC,CAAC,IAAI,CAAA,wCAAwC,IAAI,CAAC,QAAQ,mBAAmB;YAC9E,CAAC,CAAC,OAAO;;;;;KAKlB,CAAC;IACJ,CAAC;CACF,CAAA;AAvOa;IAAX,QAAQ,EAAE;+CAAgC;AAM/B;IAAX,QAAQ,EAAE;4CAAoC;AAMH;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAAiB;AAOhB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAAiB;AAG3C;IAAhB,KAAK,EAAE;mDAA8B;AAxB3B,aAAa;IADzB,aAAa,CAAC,gBAAgB,CAAC;GACnB,aAAa,CAyOzB","sourcesContent":["import { LitElement, css, html, nothing } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport \"./relative-time.js\";\nimport { tokens } from \"./tokens.js\";\nimport type { StatusPillColor } from \"./status-pill.js\";\n\n/**\n * One event on a `timeline-container`: a dot on the vertical line, an optional\n * headline, a relative timestamp (\"3 hours ago\"), and freely nested content.\n * The connecting line is drawn here — its segment above the dot is hidden on\n * the first entry and the segment below is hidden on the last, so the line caps\n * exactly at the first and last dots. Only meaningful inside a\n * `timeline-container`; demonstrated through it.\n *\n * `datetime` is the entry's one timestamp. A nested element that has its own\n * timestamp prop (e.g. `chat-message`'s `timestamp`) should leave it unset —\n * setting both renders the same time twice.\n *\n * The dot's `color` types the entry using the shared status-pill palette —\n * `primary` by default, plus `neutral`, `info`, `success`, `warning`, and\n * `danger`.\n *\n * Set `compact` for dense, one-line system-status entries: it tightens the\n * vertical spacing and renders the content smaller and muted.\n *\n * Set `running` to replace the dot with an animated gray ring spinner,\n * indicating the entry represents in-progress work; `color` has no visible\n * effect while `running` is set.\n *\n * @element timeline-entry\n * @slot headline - Optional headline/title for the event.\n * @slot - The event content; nest any elements here.\n */\n@customElement(\"timeline-entry\")\nexport class TimelineEntry extends LitElement {\n /** ISO 8601 or SQLite datetime string, rendered as a relative time. */\n @property() datetime: string | null = null;\n\n /**\n * Visual type of the entry's dot, from the shared status-pill palette:\n * `primary` (default), `neutral`, `info`, `success`, `warning`, or `danger`.\n */\n @property() color: StatusPillColor = \"primary\";\n\n /**\n * Dense, one-line presentation for system-status entries: tighter vertical\n * spacing and smaller, muted content.\n */\n @property({ type: Boolean, reflect: true }) compact = false;\n\n /**\n * Shows an animated ring spinner in place of the dot, indicating the entry\n * represents in-progress work. Overrides `color` while set — the spinner\n * always uses the muted/gray palette.\n */\n @property({ type: Boolean, reflect: true }) running = false;\n\n /** Whether the headline slot currently has assigned content. */\n @state() private _hasHeadline = false;\n\n static override styles = [\n tokens,\n css`\n :host {\n display: block;\n font-family: var(\n --ui-font,\n ui-sans-serif,\n system-ui,\n sans-serif,\n \"Apple Color Emoji\",\n \"Segoe UI Emoji\",\n \"Segoe UI Symbol\",\n \"Noto Color Emoji\"\n );\n }\n .entry {\n display: flex;\n gap: 0.75rem;\n }\n .rail {\n position: relative;\n flex: 0 0 auto;\n width: 0.75rem;\n }\n .line {\n position: absolute;\n left: 50%;\n width: 2px;\n transform: translateX(-50%);\n background: var(--ui-border, #e2e8f0);\n }\n .line-top {\n top: 0;\n height: 0.5rem;\n }\n .line-bottom {\n top: 0.5rem;\n bottom: 0;\n }\n .dot {\n position: absolute;\n top: 0.125rem;\n left: 50%;\n width: 0.75rem;\n height: 0.75rem;\n transform: translateX(-50%);\n border-radius: 9999px;\n /* Same lighter-on-top token gradient as map-circle/user-avatar; the\n base color is swapped per the color property via the private\n --_dot var. */\n background: linear-gradient(\n to bottom,\n color-mix(in srgb, var(--_dot, var(--ui-primary, #4f46e5)) 70%, #ffffff) 0%,\n color-mix(in srgb, var(--_dot, var(--ui-primary, #4f46e5)) 70%, #000000) 100%\n );\n }\n .dot.neutral {\n --_dot: var(--ui-text-muted, #64748b);\n }\n .dot.info {\n --_dot: var(--ui-info, #0ea5e9);\n }\n .dot.primary {\n --_dot: var(--ui-primary, #4f46e5);\n }\n .dot.success {\n --_dot: var(--ui-success, #16a34a);\n }\n .dot.warning {\n --_dot: var(--ui-warning, #d97706);\n }\n .dot.danger {\n --_dot: var(--ui-danger, #dc2626);\n }\n .spinner {\n position: absolute;\n top: 0.125rem;\n left: 50%;\n width: 0.75rem;\n height: 0.75rem;\n transform: translateX(-50%);\n animation: spin 0.8s linear infinite;\n }\n .spinner-track {\n fill: none;\n stroke: color-mix(in srgb, var(--ui-text-muted, #64748b) 25%, transparent);\n stroke-width: 3;\n }\n .spinner-arc {\n fill: none;\n stroke: var(--ui-text-muted, #64748b);\n stroke-width: 3;\n stroke-linecap: round;\n stroke-dasharray: 42 100;\n }\n @keyframes spin {\n to {\n transform: rotate(360deg);\n }\n }\n @media (prefers-reduced-motion: reduce) {\n .spinner {\n animation: none;\n }\n }\n @media (forced-colors: active) {\n .spinner-track {\n stroke: GrayText;\n }\n .spinner-arc {\n stroke: CanvasText;\n }\n }\n :host(:first-child) .line-top {\n display: none;\n }\n :host(:last-child) .line-bottom {\n display: none;\n }\n .body {\n flex: 1 1 auto;\n min-width: 0;\n padding-bottom: 1.5rem;\n }\n :host(:last-child) .body {\n padding-bottom: 0;\n }\n .head {\n display: flex;\n align-items: baseline;\n gap: 0.5rem;\n flex-wrap: wrap;\n }\n .headline {\n font-weight: var(--ui-font-weight-semibold, 600);\n font-size: var(--ui-font-size, 0.875rem);\n line-height: var(--ui-line-height-tight, 1.25);\n color: var(--ui-text, #0f172a);\n }\n .headline.empty {\n display: none;\n }\n .time {\n font-size: var(--ui-font-size-sm, 0.75rem);\n line-height: var(--ui-line-height-tight, 1.25);\n color: var(--ui-text-muted, #64748b);\n }\n .content {\n margin-top: 0.25rem;\n font-size: var(--ui-font-size, 0.875rem);\n line-height: var(--ui-line-height-normal, 1.5);\n color: var(--ui-text, #0f172a);\n }\n :host([compact]) .body {\n padding-bottom: 0.5rem;\n }\n :host([compact]:last-child) .body {\n padding-bottom: 0;\n }\n :host([compact]) .content {\n margin-top: 0.125rem;\n font-size: var(--ui-font-size-sm, 0.75rem);\n color: var(--ui-text-muted, #64748b);\n }\n `,\n ];\n\n override connectedCallback(): void {\n super.connectedCallback();\n if (!this.hasAttribute(\"role\")) this.setAttribute(\"role\", \"listitem\");\n }\n\n /** Collapses the headline when nothing is slotted so the time sits alone. */\n private _onHeadlineSlotChange(event: Event): void {\n this._hasHeadline = (event.target as HTMLSlotElement).assignedNodes({ flatten: true }).length > 0;\n }\n\n override render() {\n return html`\n <div class=\"entry\">\n <div class=\"rail\" aria-hidden=\"true\">\n <span class=\"line line-top\"></span>\n <span class=\"line line-bottom\"></span>\n ${this.running\n ? html`\n <svg class=\"spinner\" viewBox=\"0 0 24 24\">\n <circle class=\"spinner-track\" cx=\"12\" cy=\"12\" r=\"9\"></circle>\n <circle class=\"spinner-arc\" cx=\"12\" cy=\"12\" r=\"9\"></circle>\n </svg>\n `\n : html`<span class=\"dot ${this.color}\"></span>`}\n </div>\n <div class=\"body\">\n <div class=\"head\">\n <span class=\"headline ${this._hasHeadline ? \"\" : \"empty\"}\">\n <slot name=\"headline\" @slotchange=${this._onHeadlineSlotChange}></slot>\n </span>\n ${this.datetime\n ? html`<relative-time class=\"time\" datetime=${this.datetime}></relative-time>`\n : nothing}\n </div>\n <div class=\"content\"><slot></slot></div>\n </div>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"timeline-entry\": TimelineEntry;\n }\n}\n"]}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
# `<status-banner>`
|
|
2
|
+
|
|
3
|
+
Full-width, app-level status bar for a persistent condition — "Reconnecting…",
|
|
4
|
+
"Read-only mode", "New version available". Unlike `toast-notification` (which
|
|
5
|
+
is transient, imperative, and stacks in a corner) this stays put for as long
|
|
6
|
+
as the condition holds, so the consumer controls its presence by rendering it
|
|
7
|
+
or not.
|
|
8
|
+
|
|
9
|
+
Colors mirror `status-pill`: a tinted background with accent-colored text.
|
|
10
|
+
Announced to assistive tech via `role="status"` (or `role="alert"` for the
|
|
11
|
+
`danger` variant, matching `toast-notification`'s split).
|
|
12
|
+
|
|
13
|
+
## Install
|
|
14
|
+
|
|
15
|
+
```js
|
|
16
|
+
import "@f-ewald/components/status-banner.js";
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Usage
|
|
20
|
+
|
|
21
|
+
```html
|
|
22
|
+
<status-banner variant="warning">Reconnecting… — data may be stale</status-banner>
|
|
23
|
+
<status-banner variant="info">
|
|
24
|
+
A new version is available.
|
|
25
|
+
<button slot="actions">Reload</button>
|
|
26
|
+
</status-banner>
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
## Attributes / properties
|
|
30
|
+
|
|
31
|
+
| Property | Attribute | Type | Default | Description |
|
|
32
|
+
| --- | --- | --- | --- | --- |
|
|
33
|
+
| `variant` | `variant` | `StatusBannerVariant` | `"info"` | Visual style; also selects the accent color. |
|
|
34
|
+
| `icon` | _(JS property only)_ | `TemplateResult | null` | `null` | Optional leading icon, pre-rendered by the consumer (e.g. `iconInfo(14)`), matching `nav-item`/`icon-button` — icons are passed in, not named, so the component never has to know the icon catalog. |
|
|
35
|
+
|
|
36
|
+
## Events
|
|
37
|
+
|
|
38
|
+
_None._
|
|
39
|
+
|
|
40
|
+
## Slots
|
|
41
|
+
|
|
42
|
+
_None._
|
|
43
|
+
|
|
44
|
+
## CSS custom properties
|
|
45
|
+
|
|
46
|
+
| Custom property |
|
|
47
|
+
| --- |
|
|
48
|
+
| `--ui-danger` |
|
|
49
|
+
| `--ui-font` |
|
|
50
|
+
| `--ui-font-size-sm` |
|
|
51
|
+
| `--ui-info` |
|
|
52
|
+
| `--ui-line-height-normal` |
|
|
53
|
+
| `--ui-success` |
|
|
54
|
+
| `--ui-text-muted` |
|
|
55
|
+
| `--ui-warning` |
|
package/docs/timeline-entry.md
CHANGED
|
@@ -15,9 +15,12 @@ The dot's `color` types the entry using the shared status-pill palette —
|
|
|
15
15
|
`primary` by default, plus `neutral`, `info`, `success`, `warning`, and
|
|
16
16
|
`danger`.
|
|
17
17
|
|
|
18
|
-
Set `compact` for dense, one-line system-status entries
|
|
19
|
-
|
|
20
|
-
|
|
18
|
+
Set `compact` for dense, one-line system-status entries: it tightens the
|
|
19
|
+
vertical spacing and renders the content smaller and muted.
|
|
20
|
+
|
|
21
|
+
Set `running` to replace the dot with an animated gray ring spinner,
|
|
22
|
+
indicating the entry represents in-progress work; `color` has no visible
|
|
23
|
+
effect while `running` is set.
|
|
21
24
|
|
|
22
25
|
## Install
|
|
23
26
|
|
|
@@ -41,6 +44,7 @@ import "@f-ewald/components/timeline-entry.js";
|
|
|
41
44
|
| `datetime` | `datetime` | `string | null` | `null` | ISO 8601 or SQLite datetime string, rendered as a relative time. |
|
|
42
45
|
| `color` | `color` | `StatusPillColor` | `"primary"` | Visual type of the entry's dot, from the shared status-pill palette: `primary` (default), `neutral`, `info`, `success`, `warning`, or `danger`. |
|
|
43
46
|
| `compact` | `compact` | `boolean` | `false` | Dense, one-line presentation for system-status entries: tighter vertical spacing and smaller, muted content. |
|
|
47
|
+
| `running` | `running` | `boolean` | `false` | Shows an animated ring spinner in place of the dot, indicating the entry represents in-progress work. Overrides `color` while set — the spinner always uses the muted/gray palette. |
|
|
44
48
|
|
|
45
49
|
## Events
|
|
46
50
|
|
package/llms.txt
CHANGED
|
@@ -1696,6 +1696,33 @@ Example:
|
|
|
1696
1696
|
<stat-meter label="GPU" percent="88" color="#dc2626"></stat-meter>
|
|
1697
1697
|
```
|
|
1698
1698
|
|
|
1699
|
+
## <status-banner>
|
|
1700
|
+
|
|
1701
|
+
Full-width, app-level status bar for a persistent condition — "Reconnecting…",
|
|
1702
|
+
"Read-only mode", "New version available". Unlike `toast-notification` (which
|
|
1703
|
+
is transient, imperative, and stacks in a corner) this stays put for as long
|
|
1704
|
+
as the condition holds, so the consumer controls its presence by rendering it
|
|
1705
|
+
or not.
|
|
1706
|
+
|
|
1707
|
+
Colors mirror `status-pill`: a tinted background with accent-colored text.
|
|
1708
|
+
Announced to assistive tech via `role="status"` (or `role="alert"` for the
|
|
1709
|
+
`danger` variant, matching `toast-notification`'s split).
|
|
1710
|
+
|
|
1711
|
+
Import: `import "@f-ewald/components/status-banner.js";`
|
|
1712
|
+
|
|
1713
|
+
Properties: `variant` (attribute `variant`) : StatusBannerVariant, default "info"; `icon` (JS property only) : TemplateResult | null, default null
|
|
1714
|
+
Events: none
|
|
1715
|
+
CSS custom properties: `--ui-danger`, `--ui-font`, `--ui-font-size-sm`, `--ui-info`, `--ui-line-height-normal`, `--ui-success`, `--ui-text-muted`, `--ui-warning`
|
|
1716
|
+
|
|
1717
|
+
Example:
|
|
1718
|
+
```html
|
|
1719
|
+
<status-banner variant="warning">Reconnecting… — data may be stale</status-banner>
|
|
1720
|
+
<status-banner variant="info">
|
|
1721
|
+
A new version is available.
|
|
1722
|
+
<button slot="actions">Reload</button>
|
|
1723
|
+
</status-banner>
|
|
1724
|
+
```
|
|
1725
|
+
|
|
1699
1726
|
## <status-pill>
|
|
1700
1727
|
|
|
1701
1728
|
Small colored status pill, optionally with a spinning icon — for task/run
|
|
@@ -1866,13 +1893,16 @@ The dot's `color` types the entry using the shared status-pill palette —
|
|
|
1866
1893
|
`primary` by default, plus `neutral`, `info`, `success`, `warning`, and
|
|
1867
1894
|
`danger`.
|
|
1868
1895
|
|
|
1869
|
-
Set `compact` for dense, one-line system-status entries
|
|
1870
|
-
|
|
1871
|
-
|
|
1896
|
+
Set `compact` for dense, one-line system-status entries: it tightens the
|
|
1897
|
+
vertical spacing and renders the content smaller and muted.
|
|
1898
|
+
|
|
1899
|
+
Set `running` to replace the dot with an animated gray ring spinner,
|
|
1900
|
+
indicating the entry represents in-progress work; `color` has no visible
|
|
1901
|
+
effect while `running` is set.
|
|
1872
1902
|
|
|
1873
1903
|
Import: `import "@f-ewald/components/timeline-entry.js";`
|
|
1874
1904
|
|
|
1875
|
-
Properties: `datetime` (attribute `datetime`) : string | null, default null; `color` (attribute `color`) : StatusPillColor, default "primary"; `compact` (attribute `compact`) : boolean, default false
|
|
1905
|
+
Properties: `datetime` (attribute `datetime`) : string | null, default null; `color` (attribute `color`) : StatusPillColor, default "primary"; `compact` (attribute `compact`) : boolean, default false; `running` (attribute `running`) : boolean, default false
|
|
1876
1906
|
Events: none
|
|
1877
1907
|
CSS custom properties: `--ui-border`, `--ui-danger`, `--ui-font`, `--ui-font-size`, `--ui-font-size-sm`, `--ui-font-weight-semibold`, `--ui-info`, `--ui-line-height-normal`, `--ui-line-height-tight`, `--ui-primary`, `--ui-success`, `--ui-text`, `--ui-text-muted`, `--ui-warning`
|
|
1878
1908
|
|