@aceshooting/lyra-ui 14.3.2 → 15.0.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.
Files changed (216) hide show
  1. package/CHANGELOG.md +103 -0
  2. package/custom-elements.json +1 -1
  3. package/design-tokens.json +1 -1
  4. package/dist/cli/migration-contract.json +1 -1
  5. package/dist/components/agent-tools/activity-feed/activity-feed.class.d.ts +4 -0
  6. package/dist/components/agent-tools/activity-feed/activity-feed.class.js +3 -3
  7. package/dist/components/agent-tools/approval-queue/approval-queue.class.js +3 -2
  8. package/dist/components/agent-tools/artifact-panel/artifact-panel.styles.js +1 -1
  9. package/dist/components/agent-tools/commit-card/commit-card.styles.js +1 -1
  10. package/dist/components/agent-tools/compare-panel/compare-panel.styles.js +1 -1
  11. package/dist/components/agent-tools/confirm-bar/confirm-bar.class.js +8 -3
  12. package/dist/components/agent-tools/eval-dataset/eval-dataset.class.d.ts +3 -1
  13. package/dist/components/agent-tools/eval-dataset/eval-dataset.class.js +10 -1
  14. package/dist/components/agent-tools/eval-dataset/eval-dataset.styles.js +1 -1
  15. package/dist/components/agent-tools/span-waterfall/span-waterfall.class.js +1 -1
  16. package/dist/components/agent-tools/subagent-panel/subagent-panel.class.d.ts +19 -1
  17. package/dist/components/agent-tools/subagent-panel/subagent-panel.class.js +4 -4
  18. package/dist/components/agent-tools/subagent-panel/subagent-panel.styles.js +1 -1
  19. package/dist/components/agent-tools/task-list/task-list.class.d.ts +5 -0
  20. package/dist/components/agent-tools/task-list/task-list.class.js +3 -3
  21. package/dist/components/agent-tools/terminal/terminal.class.d.ts +1 -1
  22. package/dist/components/agent-tools/terminal/terminal.styles.js +1 -1
  23. package/dist/components/agent-tools/test-results/test-results.class.js +1 -1
  24. package/dist/components/agent-tools/tool-param-form/tool-param-form.class.d.ts +10 -7
  25. package/dist/components/agent-tools/tool-param-form/tool-param-form.class.js +15 -14
  26. package/dist/components/agent-tools/tool-param-form/tool-param-form.d.ts +1 -1
  27. package/dist/components/agent-tools/tool-param-form/tool-param-form.js +1 -1
  28. package/dist/components/agent-tools/tool-param-form/tool-param-form.styles.js +1 -1
  29. package/dist/components/agent-tools/tool-result-dialog/tool-result-dialog.class.d.ts +5 -2
  30. package/dist/components/agent-tools/tool-result-dialog/tool-result-dialog.class.js +1 -1
  31. package/dist/components/agent-tools/tool-select-dialog/tool-select-dialog.class.d.ts +3 -1
  32. package/dist/components/agent-tools/tool-select-dialog/tool-select-dialog.class.js +9 -1
  33. package/dist/components/agent-tools/tool-select-dialog/tool-select-dialog.styles.js +1 -1
  34. package/dist/components/charts/chart/box-plot.class.d.ts +64 -4
  35. package/dist/components/charts/chart/box-plot.class.js +5 -5
  36. package/dist/components/charts/chart/chart-colors.d.ts +10 -0
  37. package/dist/components/charts/chart/chart-colors.js +1 -1
  38. package/dist/components/charts/chart/chart.class.d.ts +35 -10
  39. package/dist/components/charts/chart/chart.class.js +4 -4
  40. package/dist/components/charts/chart/lite-chart.class.d.ts +10 -2
  41. package/dist/components/charts/chart/lite-chart.styles.js +1 -1
  42. package/dist/components/conversation/markdown/markdown.class.d.ts +9 -1
  43. package/dist/components/conversation/markdown/markdown.class.js +1 -1
  44. package/dist/components/conversation/message-parts/message-parts.class.d.ts +18 -1
  45. package/dist/components/conversation/message-parts/message-parts.class.js +4 -4
  46. package/dist/components/conversation/model-select/model-select.class.d.ts +6 -2
  47. package/dist/components/conversation/model-select/model-select.class.js +3 -3
  48. package/dist/components/conversation/prompt-input/prompt-input.styles.js +1 -1
  49. package/dist/components/conversation/selection-toolbar/selection-toolbar.class.d.ts +5 -1
  50. package/dist/components/conversation/selection-toolbar/selection-toolbar.class.js +1 -1
  51. package/dist/components/data/calendar/calendar.class.js +2 -2
  52. package/dist/components/data/context-meter/context-meter.styles.js +1 -1
  53. package/dist/components/data/data-grid/data-grid-types.d.ts +8 -2
  54. package/dist/components/data/data-grid/data-grid.class.d.ts +16 -3
  55. package/dist/components/data/data-grid/data-grid.class.js +3 -2
  56. package/dist/components/data/env-list/env-list.styles.js +1 -1
  57. package/dist/components/data/flow-canvas/flow-canvas.class.d.ts +22 -2
  58. package/dist/components/data/flow-canvas/flow-canvas.class.js +1 -1
  59. package/dist/components/data/flow-minimap/flow-minimap.class.d.ts +12 -4
  60. package/dist/components/data/flow-minimap/flow-minimap.class.js +2 -2
  61. package/dist/components/data/flow-minimap/flow-minimap.styles.js +1 -1
  62. package/dist/components/data/graph-query-builder/graph-query-builder.class.d.ts +5 -1
  63. package/dist/components/data/graph-query-builder/graph-query-builder.class.js +1 -1
  64. package/dist/components/data/heatmap/heatmap.class.d.ts +12 -1
  65. package/dist/components/data/heatmap/heatmap.class.js +3 -3
  66. package/dist/components/data/heatmap/heatmap.styles.js +1 -1
  67. package/dist/components/forms/code-editor/code-editor.class.js +1 -1
  68. package/dist/components/forms/combobox/combobox.class.js +1 -1
  69. package/dist/components/forms/combobox/combobox.styles.js +1 -1
  70. package/dist/components/forms/date-picker/date-input.class.js +1 -1
  71. package/dist/components/forms/date-picker/date-picker.class.d.ts +12 -1
  72. package/dist/components/forms/date-picker/date-picker.class.js +1 -1
  73. package/dist/components/forms/icon-button/icon-button.class.d.ts +27 -5
  74. package/dist/components/forms/icon-button/icon-button.class.js +7 -3
  75. package/dist/components/forms/input/input.styles.js +1 -1
  76. package/dist/components/forms/input/time-input.class.d.ts +13 -2
  77. package/dist/components/forms/input/time-input.class.js +1 -1
  78. package/dist/components/forms/otp-input/otp-input.class.d.ts +8 -1
  79. package/dist/components/forms/otp-input/otp-input.class.js +1 -1
  80. package/dist/components/forms/rubric-form/rubric-form.class.d.ts +1 -1
  81. package/dist/components/forms/rubric-form/rubric-form.class.js +1 -1
  82. package/dist/components/forms/select/select.class.d.ts +1 -1
  83. package/dist/components/forms/select/select.class.js +1 -1
  84. package/dist/components/forms/slider/slider.class.d.ts +4 -1
  85. package/dist/components/forms/slider/slider.class.js +1 -1
  86. package/dist/components/forms/textarea/textarea.class.d.ts +9 -4
  87. package/dist/components/forms/textarea/textarea.class.js +1 -1
  88. package/dist/components/forms/time-range/time-range.class.js +1 -1
  89. package/dist/components/layout/app-rail/app-rail.class.d.ts +7 -2
  90. package/dist/components/layout/app-rail/app-rail.class.js +1 -1
  91. package/dist/components/layout/card/card.class.js +2 -2
  92. package/dist/components/layout/card/card.styles.js +1 -1
  93. package/dist/components/layout/control-group/control-group.class.js +1 -1
  94. package/dist/components/layout/dashboard-grid/dashboard-grid.styles.js +1 -1
  95. package/dist/components/layout/details/details.styles.js +1 -1
  96. package/dist/components/layout/filter-bar/filter-bar.class.d.ts +13 -3
  97. package/dist/components/layout/filter-bar/filter-bar.class.js +1 -1
  98. package/dist/components/layout/menu/dropdown-item.class.d.ts +2 -0
  99. package/dist/components/layout/menu/menu-item.class.d.ts +28 -1
  100. package/dist/components/layout/menu/menu-item.class.js +45 -35
  101. package/dist/components/layout/menu/menu-item.styles.js +1 -1
  102. package/dist/components/layout/menu/menu.class.js +1 -1
  103. package/dist/components/layout/multi-split/multi-split.class.d.ts +12 -2
  104. package/dist/components/layout/multi-split/multi-split.class.js +1 -1
  105. package/dist/components/layout/page/page.class.js +2 -1
  106. package/dist/components/layout/page/page.styles.js +1 -1
  107. package/dist/components/layout/responsive-panel/responsive-panel.class.d.ts +6 -4
  108. package/dist/components/layout/responsive-panel/responsive-panel.class.js +2 -2
  109. package/dist/components/layout/responsive-panel/responsive-panel.styles.js +1 -1
  110. package/dist/components/layout/stepper/stepper.class.js +2 -2
  111. package/dist/components/layout/virtual-list/virtual-list.class.js +2 -2
  112. package/dist/components/layout/widget/widget.class.d.ts +12 -2
  113. package/dist/components/layout/widget/widget.class.js +2 -2
  114. package/dist/components/media/attachment-trigger/attachment-trigger.class.d.ts +1 -1
  115. package/dist/components/media/attachment-trigger/attachment-trigger.class.js +3 -3
  116. package/dist/components/media/file-icon/file-icon.class.d.ts +3 -1
  117. package/dist/components/media/file-icon/file-icon.class.js +1 -1
  118. package/dist/components/media/file-input/file-input.class.d.ts +1 -1
  119. package/dist/components/media/file-input/file-input.class.js +1 -1
  120. package/dist/components/media/flag/flag.styles.js +1 -1
  121. package/dist/components/media/image-comparer/image-comparer.class.d.ts +5 -5
  122. package/dist/components/media/image-comparer/image-comparer.class.js +1 -1
  123. package/dist/components/media/image-comparer/image-comparer.styles.js +1 -1
  124. package/dist/components/media/lightbox/lightbox.styles.js +1 -1
  125. package/dist/components/media/map/map.styles.js +1 -1
  126. package/dist/components/media/sequence-playback/sequence-playback.class.js +1 -1
  127. package/dist/components/media/video-playlist/video-playlist.class.js +1 -1
  128. package/dist/components/media/video-playlist/video-playlist.styles.js +1 -1
  129. package/dist/components/overlays/alert/alert.class.d.ts +6 -0
  130. package/dist/components/overlays/alert/alert.styles.js +1 -1
  131. package/dist/components/overlays/empty/empty.class.js +2 -2
  132. package/dist/components/overlays/kbd/kbd.styles.js +1 -1
  133. package/dist/components/overlays/progress/progress-ring.class.d.ts +4 -1
  134. package/dist/components/overlays/progress/progress.styles.js +1 -1
  135. package/dist/components/overlays/toast/toast.styles.js +1 -1
  136. package/dist/components/retrieval/graph/graph-canvas.js +1 -1
  137. package/dist/components/retrieval/graph/graph.class.d.ts +10 -3
  138. package/dist/components/retrieval/graph/graph.class.js +1 -1
  139. package/dist/components/retrieval/graph/graph.styles.js +1 -1
  140. package/dist/components/retrieval/ingestion-queue/ingestion-queue.class.d.ts +1 -1
  141. package/dist/components/retrieval/ingestion-queue/ingestion-queue.class.js +6 -6
  142. package/dist/components/retrieval/knowledge-base-admin/knowledge-base-admin.class.js +2 -2
  143. package/dist/components/retrieval/mind-map/mind-map.styles.js +1 -1
  144. package/dist/components/retrieval/neighbor-list/neighbor-list.class.d.ts +3 -3
  145. package/dist/components/retrieval/neighbor-list/neighbor-list.class.js +3 -3
  146. package/dist/components/retrieval/node-palette/node-palette.class.d.ts +7 -1
  147. package/dist/components/retrieval/node-palette/node-palette.class.js +23 -13
  148. package/dist/components/retrieval/node-palette/node-palette.styles.js +1 -1
  149. package/dist/components/retrieval/rag-eval-dashboard/rag-eval-dashboard.class.d.ts +4 -1
  150. package/dist/components/retrieval/rag-eval-dashboard/rag-eval-dashboard.class.js +1 -1
  151. package/dist/components/retrieval/retrieval-results/retrieval-results.class.js +1 -1
  152. package/dist/components/retrieval/retrieval-search/retrieval-search.class.js +4 -3
  153. package/dist/components/retrieval/retrieval-trace/retrieval-trace.class.js +1 -1
  154. package/dist/components/retrieval/source-list/source-list.class.d.ts +7 -1
  155. package/dist/components/retrieval/source-list/source-list.class.js +1 -1
  156. package/dist/components/utility/export-button/export-button.class.d.ts +14 -2
  157. package/dist/components/utility/export-button/export-button.class.js +3 -3
  158. package/dist/components/utility/export-button/export-button.styles.js +1 -1
  159. package/dist/components/utility/json-viewer/json-viewer.styles.js +1 -1
  160. package/dist/components/utility/known-date/known-date.class.js +1 -1
  161. package/dist/components/utility/mention-popover/mention-popover.class.d.ts +4 -2
  162. package/dist/components/utility/mention-popover/mention-popover.class.js +1 -1
  163. package/dist/components/viewers/csv-viewer/csv-viewer.class.d.ts +9 -1
  164. package/dist/components/viewers/csv-viewer/csv-viewer.class.js +4 -4
  165. package/dist/components/viewers/dataset-viewer/dataset-viewer.class.d.ts +1 -1
  166. package/dist/components/viewers/dataset-viewer/dataset-viewer.class.js +4 -4
  167. package/dist/components/viewers/document-compare/document-compare.class.d.ts +5 -0
  168. package/dist/components/viewers/document-compare/document-compare.class.js +9 -4
  169. package/dist/components/viewers/document-compare/document-compare.styles.js +1 -1
  170. package/dist/components/viewers/document-preview/document-preview.class.d.ts +9 -1
  171. package/dist/components/viewers/document-preview/document-preview.class.js +2 -1
  172. package/dist/components/viewers/notebook-viewer/notebook-viewer.class.d.ts +5 -0
  173. package/dist/components/viewers/notebook-viewer/notebook-viewer.class.js +1 -1
  174. package/dist/components/viewers/pdf-viewer/pdf-viewer.class.d.ts +5 -0
  175. package/dist/components/viewers/spreadsheet-viewer/spreadsheet-viewer.class.d.ts +1 -1
  176. package/dist/components/viewers/spreadsheet-viewer/spreadsheet-viewer.class.js +3 -3
  177. package/dist/components/viewers/xml-viewer/xml-viewer.styles.js +1 -1
  178. package/dist/custom-elements-jsx.d.ts +1 -1
  179. package/dist/events.d.ts +5 -4
  180. package/dist/internal/package-metadata.d.ts +1 -1
  181. package/dist/internal/package-metadata.js +1 -1
  182. package/dist/lyra.d.ts +1 -1
  183. package/dist/svelte.d.ts +1 -1
  184. package/dist/vue.d.ts +1 -1
  185. package/llms/components/lr-alert.md +11 -3
  186. package/llms/components/lr-box-plot.md +21 -4
  187. package/llms/components/lr-chart.md +13 -4
  188. package/llms/components/lr-code-block.md +5 -4
  189. package/llms/components/lr-data-grid.md +24 -10
  190. package/llms/components/lr-document-compare.md +5 -0
  191. package/llms/components/lr-dropdown-item.md +24 -0
  192. package/llms/components/lr-eval-dataset.md +5 -4
  193. package/llms/components/lr-export-button.md +10 -5
  194. package/llms/components/lr-filter-bar.md +4 -1
  195. package/llms/components/lr-flow-minimap.md +7 -1
  196. package/llms/components/lr-icon-button.md +6 -1
  197. package/llms/components/lr-lite-chart.md +2 -1
  198. package/llms/components/lr-markdown.md +2 -2
  199. package/llms/components/lr-menu-item.md +24 -0
  200. package/llms/components/lr-menu.md +24 -0
  201. package/llms/components/lr-message-parts.md +7 -0
  202. package/llms/components/lr-model-settings-panel.md +4 -1
  203. package/llms/components/lr-node-palette.md +5 -4
  204. package/llms/components/lr-pdf-viewer.md +7 -0
  205. package/llms/components/lr-responsive-panel.md +2 -2
  206. package/llms/components/lr-subagent-panel.md +17 -2
  207. package/llms/components/lr-thinking-panel.md +4 -0
  208. package/llms/components/lr-timeline-item.md +1 -1
  209. package/llms/components/lr-timeline.md +1 -1
  210. package/llms/components/lr-tool-select-dialog.md +4 -3
  211. package/llms/components/lr-virtual-list.md +11 -11
  212. package/llms-full.txt +205 -59
  213. package/package.json +3 -3
  214. package/vscode-css-data.json +1 -1
  215. package/vscode-html-data.json +1 -1
  216. package/web-types.json +1 -1
@@ -1,4 +1,4 @@
1
- import{type TemplateResult}from'lit';import{LyraElement}from'../../../internal/lyra-element.js';import type{LyraOrientation}from'../../../internal/shared-unions.js';export type LyraImageComparerOrientation=LyraOrientation;export interface LyraImageComparerEventMap{input:Event;change:Event;blur:FocusEvent;focus:FocusEvent;}
1
+ import{type PropertyValues,type TemplateResult}from'lit';import{LyraElement}from'../../../internal/lyra-element.js';import type{LyraOrientation}from'../../../internal/shared-unions.js';export type LyraImageComparerOrientation=LyraOrientation;export interface LyraImageComparerEventMap{input:Event;change:Event;blur:FocusEvent;focus:FocusEvent;}
2
2
  /**
3
3
  * `<lr-image-comparer>` — compares two slotted surfaces with a keyboard-
4
4
  * accessible range divider.
@@ -24,9 +24,9 @@ import{type TemplateResult}from'lit';import{LyraElement}from'../../../internal/l
24
24
  * @csspart divider - The visible divider line.
25
25
  * @csspart handle - Wrapper around the native range interaction surface and visible handle.
26
26
  * @csspart input - The transparent native range input.
27
- * @cssprop [--lr-image-comparer-divider-width=var(--divider-width, var(--lr-size-1px))] - Width of
28
- * the dividing line. The canonical, namespaced override; prefer it over the bare compat name,
29
- * which inherits and so retunes every element in the subtree reading that generic name.
27
+ * @cssprop [--lr-image-comparer-divider-width=var(--divider-width, var(--lr-size-1px))] -
28
+ * Width of the dividing line. The canonical, namespaced override; prefer it over the bare compat
29
+ * name, which inherits and so retunes every element in the subtree reading that generic name.
30
30
  * @cssprop [--lr-image-comparer-handle-size=var(--handle-size, var(--lr-icon-button-size))] - Inline
31
31
  * and block size of the visible compare handle. Canonical, namespaced override.
32
32
  * @cssprop [--divider-width=var(--lr-size-1px)] - Retained Shoelace-compat source for
@@ -37,7 +37,7 @@ import{type TemplateResult}from'lit';import{LyraElement}from'../../../internal/l
37
37
  * @status stable
38
38
  * @since 4.0.0
39
39
  */
40
- export declare class LyraImageComparer extends LyraElement<LyraImageComparerEventMap>{static styles:import("lit").CSSResultGroup[];private readonly internals;private _position;get position():number;set position(value:number);private _orientation;get orientation():LyraImageComparerOrientation;set orientation(value:LyraImageComparerOrientation);beforeLabel:string;afterLabel:string;accessibleLabel:string|null;private handleEl?;private activePointerId?;private keyboardDirty;private get normalizedPosition();private onInput;private onChange;private onPointerDown;private onPointerEnd;private keyboardPosition;private onKeyDown;private onKeyUp;private onFocus;private onBlur;disconnectedCallback():void;
40
+ export declare class LyraImageComparer extends LyraElement<LyraImageComparerEventMap>{static styles:import("lit").CSSResultGroup[];private readonly internals;private _position;get position():number;set position(value:number);private _orientation;get orientation():LyraImageComparerOrientation;set orientation(value:LyraImageComparerOrientation);beforeLabel:string;afterLabel:string;accessibleLabel:string|null;private handleEl?;private hasSyncedDescribedByElements;private activePointerId?;private keyboardDirty;private get normalizedPosition();private onInput;private onChange;private onPointerDown;private onPointerEnd;private keyboardPosition;private onKeyDown;private onKeyUp;private onFocus;private onBlur;disconnectedCallback():void;protected updated(changed:PropertyValues<this>):void;
41
41
  /** Focus the internal native range handle; a pre-render call is a no-op. */
42
42
  focus(options?:FocusOptions):void;
43
43
  /** Blur the internal native range handle; a pre-render call is a no-op. */
@@ -1,4 +1,4 @@
1
- var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html}from"lit";import{property,query}from"lit/decorators.js";import{setCustomState}from"../../../internal/custom-states.js";import{attachInternalsSafely}from"../../../internal/form-associated.js";import{chevronIcon}from"../../../internal/icons.js";import{LyraElement}from"../../../internal/lyra-element.js";import{dispatchNativeEvent,relayNativeEvent}from"../../../internal/native-event-relay.js";import{finiteRange,isSliderKey}from"../../../internal/numbers.js";import{styles}from"./image-comparer.styles.js";import{LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_imageComparerLabel}from"../../../internal/default-strings.generated.js";const IMAGE_COMPARER_ORIENTATIONS=new Set(["horizontal","vertical"]);function normalizeOrientation(value){return IMAGE_COMPARER_ORIENTATIONS.has(value)?value:"horizontal"}class LyraImageComparer extends LyraElement{constructor(){super(...arguments),this.internals=attachInternalsSafely(this),this._position=50,this._orientation="horizontal",this.beforeLabel="",this.afterLabel="",this.accessibleLabel=null,this.keyboardDirty=!1,this.onInput=event=>{const input=event.currentTarget;this.position=Number(input.value),relayNativeEvent(this,event)},this.onChange=event=>{this.position=Number(event.currentTarget.value),relayNativeEvent(this,event)},this.onPointerDown=event=>{if(!(!event.isPrimary||event.button!==0||this.activePointerId!==void 0)){this.activePointerId=event.pointerId,setCustomState(this.internals,"dragging",!0);try{event.currentTarget.setPointerCapture(event.pointerId)}catch{}}},this.onPointerEnd=event=>{event&&this.activePointerId!==void 0&&event.pointerId!==this.activePointerId||(this.activePointerId=void 0,setCustomState(this.internals,"dragging",!1))},this.onKeyDown=event=>{if(!isSliderKey(event.key))return;const next=this.keyboardPosition(event.key);if(next===void 0)return;event.preventDefault();const normalized=finiteRange(next,this.normalizedPosition,0,100);normalized!==this.normalizedPosition&&(this.position=normalized,this.keyboardDirty=!0,dispatchNativeEvent(this,"input"))},this.onKeyUp=event=>{!isSliderKey(event.key)||!this.keyboardDirty||(event.preventDefault(),this.keyboardDirty=!1,dispatchNativeEvent(this,"change"))},this.onFocus=event=>{relayNativeEvent(this,event)},this.onBlur=event=>{this.onPointerEnd(),this.keyboardDirty&&(this.keyboardDirty=!1,dispatchNativeEvent(this,"change")),relayNativeEvent(this,event)}}static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired,imageComparerLabel:LYRA_DEFAULT_imageComparerLabel}}static{this.styles=[LyraElement.styles,styles]}get position(){return this._position}set position(value){const old=this._position;this._position=finiteRange(value,50,0,100),this.requestUpdate("position",old)}get orientation(){return this._orientation}set orientation(value){const old=this._orientation;this._orientation=normalizeOrientation(value),this.requestUpdate("orientation",old)}get normalizedPosition(){return finiteRange(this.position,50,0,100)}keyboardPosition(key){if(key==="Home")return 0;if(key==="End")return 100;if(key==="PageUp")return this.normalizedPosition+10;if(key==="PageDown")return this.normalizedPosition-10;const rtl=this.effectiveDirection==="rtl";if(this.orientation==="vertical")return key==="ArrowUp"||key==="ArrowLeft"?this.normalizedPosition-1:key==="ArrowDown"||key==="ArrowRight"?this.normalizedPosition+1:void 0;if(key==="ArrowLeft")return this.normalizedPosition+(rtl?1:-1);if(key==="ArrowRight")return this.normalizedPosition+(rtl?-1:1);if(key==="ArrowUp")return this.normalizedPosition+1;if(key==="ArrowDown")return this.normalizedPosition-1}disconnectedCallback(){this.onPointerEnd(),super.disconnectedCallback()}focus(options){this.handleEl?.focus(options)}blur(){this.handleEl?.blur()}click(){this.handleEl?.click()}render(){const position=`${this.normalizedPosition}%`,label=this.accessibleLabel??this.localize("imageComparerLabel");return html`<div
1
+ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html}from"lit";import{property,query}from"lit/decorators.js";import{syncAriaDescribedByElements}from"../../../internal/aria-controls.js";import{setCustomState}from"../../../internal/custom-states.js";import{attachInternalsSafely}from"../../../internal/form-associated.js";import{chevronIcon}from"../../../internal/icons.js";import{LyraElement}from"../../../internal/lyra-element.js";import{dispatchNativeEvent,relayNativeEvent}from"../../../internal/native-event-relay.js";import{finiteRange,isSliderKey}from"../../../internal/numbers.js";import{styles}from"./image-comparer.styles.js";import{LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_imageComparerLabel}from"../../../internal/default-strings.generated.js";const IMAGE_COMPARER_ORIENTATIONS=new Set(["horizontal","vertical"]);function normalizeOrientation(value){return IMAGE_COMPARER_ORIENTATIONS.has(value)?value:"horizontal"}class LyraImageComparer extends LyraElement{constructor(){super(...arguments),this.internals=attachInternalsSafely(this),this._position=50,this._orientation="horizontal",this.beforeLabel="",this.afterLabel="",this.accessibleLabel=null,this.hasSyncedDescribedByElements=!1,this.keyboardDirty=!1,this.onInput=event=>{const input=event.currentTarget;this.position=Number(input.value),relayNativeEvent(this,event)},this.onChange=event=>{this.position=Number(event.currentTarget.value),relayNativeEvent(this,event)},this.onPointerDown=event=>{if(!(!event.isPrimary||event.button!==0||this.activePointerId!==void 0)){this.activePointerId=event.pointerId,setCustomState(this.internals,"dragging",!0);try{event.currentTarget.setPointerCapture(event.pointerId)}catch{}}},this.onPointerEnd=event=>{event&&this.activePointerId!==void 0&&event.pointerId!==this.activePointerId||(this.activePointerId=void 0,setCustomState(this.internals,"dragging",!1))},this.onKeyDown=event=>{if(!isSliderKey(event.key))return;const next=this.keyboardPosition(event.key);if(next===void 0)return;event.preventDefault();const normalized=finiteRange(next,this.normalizedPosition,0,100);normalized!==this.normalizedPosition&&(this.position=normalized,this.keyboardDirty=!0,dispatchNativeEvent(this,"input"))},this.onKeyUp=event=>{!isSliderKey(event.key)||!this.keyboardDirty||(event.preventDefault(),this.keyboardDirty=!1,dispatchNativeEvent(this,"change"))},this.onFocus=event=>{relayNativeEvent(this,event)},this.onBlur=event=>{this.onPointerEnd(),this.keyboardDirty&&(this.keyboardDirty=!1,dispatchNativeEvent(this,"change")),relayNativeEvent(this,event)}}static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired,imageComparerLabel:LYRA_DEFAULT_imageComparerLabel}}static{this.styles=[LyraElement.styles,styles]}get position(){return this._position}set position(value){const old=this._position;this._position=finiteRange(value,50,0,100),this.requestUpdate("position",old)}get orientation(){return this._orientation}set orientation(value){const old=this._orientation;this._orientation=normalizeOrientation(value),this.requestUpdate("orientation",old)}get normalizedPosition(){return finiteRange(this.position,50,0,100)}keyboardPosition(key){if(key==="Home")return 0;if(key==="End")return 100;if(key==="PageUp")return this.normalizedPosition+10;if(key==="PageDown")return this.normalizedPosition-10;const rtl=this.effectiveDirection==="rtl";if(this.orientation==="vertical")return key==="ArrowUp"||key==="ArrowLeft"?this.normalizedPosition-1:key==="ArrowDown"||key==="ArrowRight"?this.normalizedPosition+1:void 0;if(key==="ArrowLeft")return this.normalizedPosition+(rtl?1:-1);if(key==="ArrowRight")return this.normalizedPosition+(rtl?-1:1);if(key==="ArrowUp")return this.normalizedPosition+1;if(key==="ArrowDown")return this.normalizedPosition-1}disconnectedCallback(){this.onPointerEnd(),super.disconnectedCallback()}updated(changed){super.updated(changed);const hostDescribedBy=this.getAttribute("aria-describedby");(hostDescribedBy||this.hasSyncedDescribedByElements)&&(this.hasSyncedDescribedByElements=syncAriaDescribedByElements(this,this.handleEl,hostDescribedBy))}focus(options){this.handleEl?.focus(options)}blur(){this.handleEl?.blur()}click(){this.handleEl?.click()}render(){const position=`${this.normalizedPosition}%`,label=this.accessibleLabel??this.localize("imageComparerLabel");return html`<div
2
2
  part="base comparison"
3
3
  data-orientation=${this.orientation}
4
4
  style="--lr-comparer-position: ${position}"
@@ -1 +1 @@
1
- import{css}from"lit";const styles=css`:host{--_lr-image-comparer-divider-width:var(--divider-width,var(--lr-size-1px));--_lr-image-comparer-handle-size:var(--handle-size,var(--lr-icon-button-size));min-inline-size:0;display:block}[part~=base]{isolation:isolate;block-size:100%;min-inline-size:0;min-block-size:var(--lr-icon-button-size);background:var(--lr-color-surface-raised);position:relative;overflow:hidden}[part=before],[part=after]{min-inline-size:0;display:block}[part=before]{z-index:var(--lr-layer-content);clip-path:inset(0 calc(100% - var(--lr-comparer-position,50%)) 0 0);position:absolute;inset:0}[part~=base][data-orientation=vertical] [part=before]{clip-path:inset(0 0 calc(100% - var(--lr-comparer-position,50%)) 0)}:host(:dir(rtl)) [part=before]{clip-path:inset(0 0 0 calc(100% - var(--lr-comparer-position,50%)))}:host(:dir(rtl)) [part~=base][data-orientation=vertical] [part=before]{clip-path:inset(0 0 calc(100% - var(--lr-comparer-position,50%)) 0)}[part=before] ::slotted(*),[part=after] ::slotted(*){box-sizing:border-box;overflow-wrap:anywhere;inline-size:100%;min-inline-size:0;max-inline-size:100%;display:block}[part=before] ::slotted([hidden]:not([hidden=until-found i])),[part=after] ::slotted([hidden]:not([hidden=until-found i])){display:none}[part=divider]{z-index:var(--lr-layer-popover);inline-size:var(--lr-image-comparer-divider-width,var(--_lr-image-comparer-divider-width));background:var(--lr-color-surface);box-shadow:var(--lr-shadow-s);pointer-events:none;position:absolute;inset-block:0;inset-inline-start:var(--lr-comparer-position,50%)}[part~=base][data-orientation=vertical] [part=divider]{inset-block:auto;inset-inline:0;inline-size:auto;block-size:var(--lr-image-comparer-divider-width,var(--_lr-image-comparer-divider-width));inset-block-start:var(--lr-comparer-position,50%)}[part=handle]{z-index:var(--lr-layer-popover);position:absolute;inset:0}[part=input]{opacity:0;cursor:ew-resize;block-size:100%;inline-size:100%;margin:0;position:absolute;inset:0}[part~=base][data-orientation=vertical] [part=input]{writing-mode:vertical-lr;cursor:ns-resize;direction:ltr}.handle-visual{inline-size:var(--lr-image-comparer-handle-size,var(--_lr-image-comparer-handle-size));block-size:var(--lr-image-comparer-handle-size,var(--_lr-image-comparer-handle-size));border:var(--lr-border-width-thin) solid var(--lr-color-border);border-radius:var(--lr-radius-pill);background:var(--lr-color-surface);color:var(--lr-color-text);box-shadow:var(--lr-shadow-s);pointer-events:none;justify-content:center;align-items:center;display:inline-flex;position:absolute;inset-block-start:50%;inset-inline-start:var(--lr-comparer-position,50%);transform:translate(-50%,-50%)}:host(:dir(rtl)) .handle-visual{transform:translate(50%,-50%)}[part~=base][data-orientation=vertical] .handle-visual{inset-block-start:var(--lr-comparer-position,50%);inset-inline-start:50%}.handle-fallback{direction:ltr;flex-direction:row;justify-content:center;align-items:center;display:inline-flex}.handle-fallback svg{inline-size:var(--lr-size-0-75rem);block-size:var(--lr-size-0-75rem)}.handle-fallback svg:first-child{transform:rotate(180deg)}[part~=base][data-orientation=vertical] .handle-fallback{transform:rotate(90deg)}[part=input]:hover{opacity:.01}[part=input]:focus-visible{opacity:.01;outline:none}[part=handle]:has([part=input]:focus-visible) .handle-visual{outline:var(--lr-focus-ring);outline-offset:var(--lr-focus-ring-offset)}[part~=base]:has([part=input]:hover) [part=divider]{background:var(--lr-color-brand)}[part~=base]:has([part=input]:active) [part=divider]{background:color-mix(in oklab, var(--lr-color-brand), var(--lr-color-mix-partner) var(--lr-color-mix-active))}`;export{styles};
1
+ import{css}from"lit";const styles=css`:host{--_lr-image-comparer-divider-width:var(--divider-width,var(--lr-size-1px));--_lr-image-comparer-handle-size:var(--handle-size,var(--lr-icon-button-size));min-inline-size:0;display:block}[part~=base]{isolation:isolate;block-size:100%;min-inline-size:0;min-block-size:var(--lr-icon-button-size);background:var(--lr-color-surface-raised);position:relative;overflow:hidden}[part=before],[part=after]{min-inline-size:0;display:block}[part=before]{z-index:var(--lr-layer-content);clip-path:inset(0 calc(100% - var(--lr-comparer-position,50%)) 0 0);position:absolute;inset:0}[part~=base][data-orientation=vertical] [part=before]{clip-path:inset(0 0 calc(100% - var(--lr-comparer-position,50%)) 0)}:host(:dir(rtl)) [part=before]{clip-path:inset(0 0 0 calc(100% - var(--lr-comparer-position,50%)))}:host(:dir(rtl)) [part~=base][data-orientation=vertical] [part=before]{clip-path:inset(0 0 calc(100% - var(--lr-comparer-position,50%)) 0)}[part=before] ::slotted(*),[part=after] ::slotted(*){box-sizing:border-box;overflow-wrap:anywhere;inline-size:100%;min-inline-size:0;max-inline-size:100%;display:block}[part=before] ::slotted([hidden]:not([hidden=until-found i])),[part=after] ::slotted([hidden]:not([hidden=until-found i])){display:none}[part=divider]{z-index:var(--lr-layer-popover);inline-size:var(--lr-image-comparer-divider-width,var(--_lr-image-comparer-divider-width));background:var(--lr-color-surface);box-shadow:var(--lr-shadow-s);pointer-events:none;position:absolute;inset-block:0;inset-inline-start:var(--lr-comparer-position,50%)}[part~=base][data-orientation=vertical] [part=divider]{inset-block:auto;inset-inline:0;inline-size:auto;block-size:var(--lr-image-comparer-divider-width,var(--_lr-image-comparer-divider-width));inset-block-start:var(--lr-comparer-position,50%)}[part=handle]{z-index:var(--lr-layer-popover);position:absolute;inset:0}[part=input]{opacity:0;cursor:ew-resize;block-size:100%;inline-size:100%;margin:0;position:absolute;inset:0}[part~=base][data-orientation=vertical] [part=input]{writing-mode:vertical-lr;cursor:ns-resize;direction:ltr}.handle-visual{inline-size:var(--lr-image-comparer-handle-size,var(--_lr-image-comparer-handle-size));block-size:var(--lr-image-comparer-handle-size,var(--_lr-image-comparer-handle-size));border:var(--lr-size-1px) solid var(--lr-color-border);border-radius:var(--lr-radius-pill);background:var(--lr-color-surface);color:var(--lr-color-text);box-shadow:var(--lr-shadow-s);pointer-events:none;justify-content:center;align-items:center;display:inline-flex;position:absolute;inset-block-start:50%;inset-inline-start:var(--lr-comparer-position,50%);transform:translate(-50%,-50%)}:host(:dir(rtl)) .handle-visual{transform:translate(50%,-50%)}[part~=base][data-orientation=vertical] .handle-visual{inset-block-start:var(--lr-comparer-position,50%);inset-inline-start:50%}.handle-fallback{direction:ltr;flex-direction:row;justify-content:center;align-items:center;display:inline-flex}.handle-fallback svg{inline-size:var(--lr-size-0-75rem);block-size:var(--lr-size-0-75rem)}.handle-fallback svg:first-child{transform:rotate(180deg)}[part~=base][data-orientation=vertical] .handle-fallback{transform:rotate(90deg)}[part=input]:hover{opacity:.01}[part=input]:focus-visible{opacity:.01;outline:none}[part=handle]:has([part=input]:focus-visible) .handle-visual{outline:var(--lr-focus-ring);outline-offset:var(--lr-focus-ring-offset)}[part~=base]:has([part=input]:hover) [part=divider]{background:var(--lr-color-brand)}[part~=base]:has([part=input]:active) [part=divider]{background:color-mix(in oklab, var(--lr-color-brand), var(--lr-color-mix-partner) var(--lr-color-mix-active))}`;export{styles};
@@ -1 +1 @@
1
- import{css}from"lit";const styles=css`:host{--_lr-lightbox-overlay-color:var(--lr-color-overlay-strong);--_lr-lightbox-control-bg:var(--lr-color-neutral);--_lr-lightbox-control-color:var(--lr-color-on-neutral);z-index:var(--lr-overlay-stack-index,var(--lr-layer-modal));contain-intrinsic-inline-size:var(--lr-size-20rem);padding-block-start:max(var(--lr-space-l), var(--lr-safe-area-top));padding-block-end:max(var(--lr-space-l), var(--lr-safe-area-bottom));padding-inline-start:max(var(--lr-space-l), var(--lr-safe-area-inline-start));padding-inline-end:max(var(--lr-space-l), var(--lr-safe-area-inline-end));display:none;position:fixed;inset:0;container-type:inline-size}:host([open]){display:flex}[part=backdrop]{background:var(--lr-lightbox-overlay-color,var(--_lr-lightbox-overlay-color));position:absolute;inset:0}[part=panel]{gap:var(--lr-space-s);outline:none;flex-direction:column;block-size:100%;min-block-size:0;inline-size:100%;min-inline-size:0;display:flex;position:relative}[part=toolbar]{align-items:center;gap:var(--lr-space-s);flex-wrap:wrap;flex:none;display:flex}[part=counter]{text-overflow:ellipsis;white-space:nowrap;min-inline-size:0;max-inline-size:60%;padding:var(--lr-space-xs) var(--lr-space-s);border-radius:var(--lr-radius);background:var(--lr-lightbox-control-bg,var(--_lr-lightbox-control-bg));color:var(--lr-lightbox-control-color,var(--_lr-lightbox-control-color));font-size:var(--lr-font-size-sm);display:inline-block;overflow:hidden}[part=actions]{justify-content:flex-end;align-items:center;gap:var(--lr-space-xs);flex-wrap:wrap;flex:1 1 0;min-inline-size:0;max-inline-size:100%;margin-inline-start:auto;display:flex}slot[name=actions]::slotted(*){box-sizing:border-box;overflow-wrap:anywhere;min-inline-size:0;max-inline-size:100%}[part=actions][hidden]{display:none}[part=close-button],[part=previous-button],[part=next-button]{font:inherit;min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);border-radius:var(--lr-radius-pill);background:var(--lr-lightbox-control-bg,var(--_lr-lightbox-control-bg));color:var(--lr-lightbox-control-color,var(--_lr-lightbox-control-color));cursor:pointer;border:none;flex:none;justify-content:center;align-items:center;display:inline-flex}[part=close-button]{margin-inline-start:var(--lr-space-xs)}:where([part=close-button]):hover,:where([part=previous-button]):hover:where(:not(:disabled)),:where([part=next-button]):hover:where(:not(:disabled)){background:var(--lr-color-brand-quiet);color:var(--lr-color-brand)}:where([part=close-button]):active,:where([part=previous-button]):active:where(:not(:disabled)),:where([part=next-button]):active:where(:not(:disabled)){background:color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active));color:var(--lr-color-brand)}[part=close-button]:focus-visible,[part=previous-button]:focus-visible,[part=next-button]:focus-visible{outline:var(--lr-focus-ring);outline-offset:var(--lr-focus-ring-offset)}[part=previous-button]:disabled,[part=next-button]:disabled{opacity:var(--lr-opacity-disabled);cursor:not-allowed}[part=close-button] svg,[part=previous-glyph],[part=next-glyph]{display:block}[part=stage]{flex:auto;min-block-size:0;min-inline-size:0;position:relative}lr-pan-zoom[part=frame]{block-size:100%;inline-size:100%;display:block}lr-pan-zoom[part=frame]::part(base),lr-pan-zoom[part=frame]::part(viewport){block-size:100%}[part=previous-button],[part=next-button]{z-index:var(--lr-layer-content);position:absolute;inset-block-start:50%;transform:translateY(-50%)}[part=previous-button]{inset-inline-start:var(--lr-space-s)}[part=next-button]{inset-inline-end:var(--lr-space-s)}[part=previous-glyph]{transform:rotate(180deg)}[part=next-glyph],:host(:dir(rtl)) [part=previous-glyph]{transform:rotate(0)}:host(:dir(rtl)) [part=next-glyph]{transform:rotate(180deg)}[part=caption]{max-inline-size:100%;max-block-size:var(--lr-size-8rem);padding:var(--lr-space-xs) var(--lr-space-s);border-radius:var(--lr-radius);background:var(--lr-lightbox-control-bg,var(--_lr-lightbox-control-bg));color:var(--lr-lightbox-control-color,var(--_lr-lightbox-control-color));text-align:center;overflow-wrap:anywhere;flex:none;align-self:center;margin:0;overflow-y:auto}@container (inline-size<=20rem){[part=counter]{max-inline-size:45%}}`;export{styles};
1
+ import{css}from"lit";const styles=css`:host{--_lr-lightbox-overlay-color:var(--lr-color-overlay-strong);--_lr-lightbox-control-bg:var(--lr-color-neutral);--_lr-lightbox-control-color:var(--lr-color-on-neutral);z-index:var(--lr-overlay-stack-index,var(--lr-layer-modal));contain-intrinsic-inline-size:var(--lr-size-20rem);padding-block-start:max(var(--lr-space-l), var(--lr-safe-area-top));padding-block-end:max(var(--lr-space-l), var(--lr-safe-area-bottom));padding-inline-start:max(var(--lr-space-l), var(--lr-safe-area-inline-start));padding-inline-end:max(var(--lr-space-l), var(--lr-safe-area-inline-end));display:none;position:fixed;inset:0;container-type:inline-size}:host([open]){display:flex}[part=backdrop]{background:var(--lr-lightbox-overlay-color,var(--_lr-lightbox-overlay-color));position:absolute;inset:0}[part=panel]{gap:var(--lr-space-s);outline:none;flex-direction:column;block-size:100%;min-block-size:0;inline-size:100%;min-inline-size:0;display:flex;position:relative}[part=toolbar]{align-items:center;gap:var(--lr-space-s);flex-wrap:wrap;flex:none;display:flex}[part=counter]{text-overflow:ellipsis;white-space:nowrap;min-inline-size:0;max-inline-size:60%;padding:var(--lr-space-xs) var(--lr-space-s);border-radius:var(--lr-radius);background:var(--lr-lightbox-control-bg,var(--_lr-lightbox-control-bg));color:var(--lr-lightbox-control-color,var(--_lr-lightbox-control-color));font-size:var(--lr-font-size-sm);display:inline-block;overflow:hidden}[part=actions]{justify-content:flex-end;align-items:center;gap:var(--lr-space-xs);flex-wrap:wrap;flex:1 1 0;min-inline-size:0;max-inline-size:100%;margin-inline-start:auto;display:flex}slot[name=actions]::slotted(*){box-sizing:border-box;overflow-wrap:anywhere;min-inline-size:0;max-inline-size:100%}[part=actions][hidden]{display:none}[part=close-button],[part=previous-button],[part=next-button]{font:inherit;min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);border-radius:var(--lr-radius-pill);background:var(--lr-lightbox-control-bg,var(--_lr-lightbox-control-bg));color:var(--lr-lightbox-control-color,var(--_lr-lightbox-control-color));cursor:pointer;border:none;flex:none;justify-content:center;align-items:center;display:inline-flex}[part=close-button]{margin-inline-start:var(--lr-space-xs)}:where([part=close-button]):hover,:where([part=previous-button]):hover:where(:not(:disabled)),:where([part=next-button]):hover:where(:not(:disabled)){background:var(--lr-color-brand-quiet);color:var(--lr-color-brand)}:where([part=close-button]):active,:where([part=previous-button]):active:where(:not(:disabled)),:where([part=next-button]):active:where(:not(:disabled)){background:color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active));color:var(--lr-color-brand)}[part=close-button]:focus-visible,[part=previous-button]:focus-visible,[part=next-button]:focus-visible{outline:var(--lr-focus-ring);outline-offset:var(--lr-focus-ring-offset)}[part=previous-button]:disabled,[part=next-button]:disabled{opacity:var(--lr-opacity-disabled);cursor:not-allowed}[part=close-button] svg,[part=previous-glyph],[part=next-glyph]{display:block}[part=stage]{flex:auto;min-block-size:0;min-inline-size:0;position:relative}lr-pan-zoom[part=frame]{block-size:100%;inline-size:100%;display:block}lr-pan-zoom[part=frame]::part(base),lr-pan-zoom[part=frame]::part(viewport){block-size:100%}[part=previous-button],[part=next-button]{z-index:var(--lr-layer-content);position:absolute;inset-block-start:50%;transform:translateY(-50%)}[part=previous-button]{inset-inline-start:var(--lr-space-s)}[part=next-button]{inset-inline-end:var(--lr-space-s)}[part=previous-glyph]{transform:rotate(180deg)}[part=next-glyph],:host(:dir(rtl)) [part=previous-glyph]{transform:rotate(0)}:host(:dir(rtl)) [part=next-glyph]{transform:rotate(180deg)}[part=caption]{max-inline-size:100%;max-block-size:var(--lr-size-8rem);padding:var(--lr-space-xs) var(--lr-space-s);border-radius:var(--lr-radius);background:var(--lr-lightbox-control-bg,var(--_lr-lightbox-control-bg));color:var(--lr-lightbox-control-color,var(--_lr-lightbox-control-color));text-align:center;overflow-wrap:anywhere;flex:none;align-self:center;margin:0;overflow:hidden auto}@container (inline-size<=20rem){[part=counter]{max-inline-size:45%}}`;export{styles};
@@ -1 +1 @@
1
- import{css}from"lit";const styles=css`:host{inline-size:100%;block-size:var(--lr-map-height,var(--lr-size-24rem));display:block;position:relative}[part=base]{block-size:100%;inline-size:100%;position:relative}lr-skeleton{--lr-skeleton-w:100%;--lr-skeleton-h:100%}[part=container]{block-size:100%;inline-size:100%;position:absolute;inset:0;overflow:hidden}.maplibregl-canvas-container{block-size:100%;inline-size:100%}.maplibregl-canvas{position:absolute;inset-block-start:0;inset-inline-start:0}.maplibregl-canvas-container.maplibregl-interactive{cursor:grab;user-select:none}.maplibregl-canvas-container.maplibregl-interactive:active{cursor:grabbing}.maplibregl-canvas-container.maplibregl-touch-zoom-rotate,.maplibregl-canvas-container.maplibregl-touch-zoom-rotate .maplibregl-canvas{touch-action:pan-x pan-y}.maplibregl-canvas-container.maplibregl-touch-drag-pan,.maplibregl-canvas-container.maplibregl-touch-drag-pan .maplibregl-canvas{touch-action:pinch-zoom}.maplibregl-canvas-container.maplibregl-touch-zoom-rotate.maplibregl-touch-drag-pan,.maplibregl-canvas-container.maplibregl-touch-zoom-rotate.maplibregl-touch-drag-pan .maplibregl-canvas{touch-action:none}.maplibregl-marker{inline-size:max-content;min-inline-size:var(--lr-size-1-5rem);min-block-size:var(--lr-size-1-5rem);box-sizing:border-box;will-change:transform;position:absolute;top:0;left:0}.maplibregl-popup{z-index:var(--lr-layer-content);will-change:transform;pointer-events:none;color:var(--lr-color-text);font-family:var(--lr-font);font-size:var(--lr-font-size-sm);line-height:var(--lr-line-height-normal);display:flex;position:absolute;top:0;left:0}.maplibregl-popup-anchor-top,.maplibregl-popup-anchor-top-left,.maplibregl-popup-anchor-top-right{flex-direction:column}.maplibregl-popup-anchor-bottom,.maplibregl-popup-anchor-bottom-left,.maplibregl-popup-anchor-bottom-right{flex-direction:column-reverse}.maplibregl-popup-anchor-left{flex-direction:row}.maplibregl-popup-anchor-right{flex-direction:row-reverse}.maplibregl-popup-tip{border:var(--lr-size-0-625rem) solid transparent;block-size:0;inline-size:0;z-index:var(--lr-layer-content)}.maplibregl-popup-anchor-top .maplibregl-popup-tip{border-block-start:none;border-block-end-color:var(--lr-color-surface-overlay);align-self:center}.maplibregl-popup-anchor-top-left .maplibregl-popup-tip{border-block-start:none;border-inline-start:none;border-block-end-color:var(--lr-color-surface-overlay);align-self:flex-start}.maplibregl-popup-anchor-top-right .maplibregl-popup-tip{border-block-start:none;border-inline-end:none;border-block-end-color:var(--lr-color-surface-overlay);align-self:flex-end}.maplibregl-popup-anchor-bottom .maplibregl-popup-tip{border-block-end:none;border-block-start-color:var(--lr-color-surface-overlay);align-self:center}.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip{border-block-end:none;border-inline-start:none;border-block-start-color:var(--lr-color-surface-overlay);align-self:flex-start}.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip{border-block-end:none;border-inline-end:none;border-block-start-color:var(--lr-color-surface-overlay);align-self:flex-end}.maplibregl-popup-anchor-left .maplibregl-popup-tip{border-inline-start:none;border-inline-end-color:var(--lr-color-surface-overlay);align-self:center}.maplibregl-popup-anchor-right .maplibregl-popup-tip{border-inline-end:none;border-inline-start-color:var(--lr-color-surface-overlay);align-self:center}.maplibregl-popup-content{min-inline-size:var(--lr-icon-button-size);padding:var(--lr-space-m);border:var(--lr-border-width-thin) solid var(--lr-color-border);border-radius:var(--lr-radius);background:var(--lr-color-surface-overlay);box-shadow:var(--lr-shadow-m);pointer-events:auto;overflow-wrap:anywhere;padding-inline-end:calc(var(--lr-icon-button-size) + var(--lr-space-xs));position:relative}.maplibregl-popup-close-button{min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);border-radius:var(--lr-radius);color:var(--lr-color-text-quiet);font:inherit;cursor:pointer;background:0 0;border:0;justify-content:center;align-items:center;padding:0;display:inline-flex;position:absolute;inset-block-start:0;inset-inline-end:0}.maplibregl-popup-close-button:where(:hover){background:var(--lr-map-popup-close-button-hover-bg,var(--lr-color-brand-quiet));color:var(--lr-map-popup-close-button-hover-color,var(--lr-color-brand))}.maplibregl-popup-close-button:where(:active){background:var(--lr-map-popup-close-button-active-bg,color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active)));color:var(--lr-map-popup-close-button-active-color,var(--lr-color-brand))}.maplibregl-popup-close-button:where(:focus-visible){outline:var(--lr-focus-ring);outline-offset:calc(-1 * var(--lr-focus-ring-offset))}[part=error]{padding:var(--lr-space-l);color:var(--lr-color-danger);font-size:var(--lr-font-size-md-sm);text-align:center;margin:0}[part=legend]{z-index:var(--lr-layer-content);min-inline-size:0;max-inline-size:calc(100% - var(--lr-space-s) - var(--lr-space-s));max-block-size:calc(100% - var(--lr-space-s) - var(--lr-space-s) - var(--_lr-map-controls-bottom,calc(var(--lr-space-xs) * 0)) - var(--_lr-map-controls-top,calc(var(--lr-space-xs) * 0)));box-sizing:border-box;gap:var(--lr-space-xs);padding:var(--lr-space-xs) var(--lr-space-s);background:var(--lr-color-surface);border:var(--lr-border-width-thin) solid var(--lr-color-border);border-radius:var(--lr-radius);box-shadow:var(--lr-shadow-m);font-size:var(--lr-font-size-xs);flex-direction:column;display:flex;position:absolute;inset-block-end:calc(var(--lr-space-s) + var(--_lr-map-controls-bottom,calc(var(--lr-space-xs) * 0)));inset-inline-start:var(--lr-space-s);overflow:auto}.legend-list{gap:var(--lr-space-xs);flex-direction:column;min-inline-size:0;display:flex}.legend-gradient{align-items:center;gap:var(--lr-space-xs);min-inline-size:0;display:flex}.legend-gradient .gradient-bar{flex:1 1 var(--lr-size-6rem);inline-size:var(--lr-size-6rem);min-inline-size:0;block-size:var(--lr-size-0-5rem);border-radius:var(--lr-size-2px)}[part=legend-lo],[part=legend-hi]{white-space:nowrap;flex:none}:host(:dir(rtl)) .legend-gradient .gradient-bar{transform:scaleX(-1)}.legend-row{align-items:center;gap:var(--lr-space-xs);min-inline-size:0;display:flex}.legend-row>span:last-child{overflow-wrap:anywhere;min-inline-size:0}[part=legend-swatch]{inline-size:var(--lr-size-0-75rem);block-size:var(--lr-size-0-75rem);box-sizing:border-box;border:var(--lr-border-width-thin) solid currentColor;border-radius:var(--lr-size-2px);flex:none;position:relative;overflow:hidden}[part=legend-swatch][data-pattern=diagonal]{border-style:dashed}[part=legend-swatch][data-pattern=dots]{border-style:dotted;border-radius:50%}[part=legend-swatch][data-pattern=crosshatch]{border-style:double;border-radius:0}[part=legend-swatch][data-pattern=diagonal]:before,[part=legend-swatch][data-pattern=crosshatch]:before,[part=legend-swatch][data-pattern=crosshatch]:after,[part=legend-swatch][data-pattern=dots]:before{content:"";inline-size:150%;block-size:var(--lr-border-width-thin);background:currentColor;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)rotate(-45deg)}[part=legend-swatch][data-pattern=crosshatch]:after{transform:translate(-50%,-50%)rotate(45deg)}[part=legend-swatch][data-pattern=dots]:before{inline-size:var(--lr-size-2px);block-size:var(--lr-size-2px);border-radius:50%;transform:translate(-50%,-50%)}[part=legend-limit]{min-inline-size:0;border-block-start:var(--lr-border-width-thin) solid var(--lr-color-border);color:var(--lr-color-text-quiet);overflow-wrap:anywhere;padding-block-start:var(--lr-space-xs)}.maplibregl-ctrl-top-left,.maplibregl-ctrl-top-right,.maplibregl-ctrl-bottom-left,.maplibregl-ctrl-bottom-right{max-inline-size:100%;z-index:var(--lr-layer-content);pointer-events:none;flex-direction:column;align-items:flex-start;display:flex;position:absolute}.maplibregl-ctrl-top-right,.maplibregl-ctrl-bottom-right{align-items:flex-end}.maplibregl-control-container:where(:has(.maplibregl-ctrl-top-left:not(:empty))):where(:has(.maplibregl-ctrl-top-right:not(:empty))) :where(.maplibregl-ctrl-top-left,.maplibregl-ctrl-top-right),.maplibregl-control-container:where(:has(.maplibregl-ctrl-bottom-left:not(:empty))):where(:has(.maplibregl-ctrl-bottom-right:not(:empty))) :where(.maplibregl-ctrl-bottom-left,.maplibregl-ctrl-bottom-right){max-inline-size:50%}.maplibregl-ctrl-top-left{inset-block-start:0;inset-inline-start:0}.maplibregl-ctrl-top-right{inset-block-start:0;inset-inline-end:0}.maplibregl-ctrl-bottom-left{inset-block-end:0;inset-inline-start:0}.maplibregl-ctrl-bottom-right{inset-block-end:0;inset-inline-end:0}.maplibregl-ctrl{box-sizing:border-box;max-inline-size:calc(100% - 2 * var(--lr-space-xs));margin:var(--lr-space-xs);pointer-events:auto;flex-shrink:0;transform:translate(0)}.maplibregl-ctrl-attrib{padding:0 var(--lr-space-xs);border-radius:var(--lr-radius);background:var(--lr-color-surface);color:var(--lr-color-text-quiet);font-size:var(--lr-font-size-xs)}.maplibregl-ctrl-group{border:var(--lr-size-1px) solid var(--lr-color-border);border-radius:var(--lr-radius);background:var(--lr-color-surface);inline-size:fit-content;box-shadow:var(--lr-shadow);color:var(--lr-color-text);flex-direction:column;display:flex}.maplibregl-ctrl-group button{min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);padding:var(--lr-space-xs);border-radius:inherit;color:inherit;font:inherit;cursor:pointer;background:0 0;border:0;place-items:center;display:grid}.maplibregl-ctrl-group button:where(:not(:first-child)){border-block-start:var(--lr-size-1px) solid var(--lr-color-border)}.maplibregl-ctrl-group button:hover:where(:not(:disabled)){background:var(--lr-color-brand-quiet);color:var(--lr-color-brand)}.maplibregl-ctrl-group button:active:where(:not(:disabled)){background:var(--lr-color-brand);color:var(--lr-color-on-brand)}.maplibregl-ctrl-group button:focus-visible{outline:var(--lr-focus-ring);outline-offset:calc(-1 * var(--lr-focus-ring-offset))}.maplibregl-ctrl-group button:disabled{opacity:var(--lr-opacity-disabled);cursor:not-allowed}.maplibregl-ctrl-icon{inline-size:var(--lr-size-1em);block-size:var(--lr-size-1em);font-size:var(--lr-font-size-lg);line-height:var(--lr-line-height-none);place-items:center;display:grid}.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon:before{content:"+"}.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon:before{content:"−"}.maplibregl-ctrl-compass .maplibregl-ctrl-icon:before{content:"▲"}.maplibregl-ctrl-scale{box-sizing:border-box;min-inline-size:max-content;padding:var(--lr-space-2xs) var(--lr-space-xs);background:var(--lr-color-surface);color:var(--lr-color-text);font-family:var(--lr-font);font-size:var(--lr-font-size-xs);text-align:center;white-space:nowrap;padding-block-end:calc(var(--lr-space-2xs) + var(--lr-space-xs));position:relative}.maplibregl-ctrl-scale:after{content:"";box-sizing:border-box;inline-size:var(--_lr-map-scale-width,100%);block-size:var(--lr-space-xs);border:var(--lr-size-2px) solid currentColor;pointer-events:none;border-block-start:0;position:absolute;inset-block-end:0;inset-inline-start:0}.maplibregl-ctrl-attrib a{color:var(--lr-color-text-quiet);text-decoration:none}.maplibregl-ctrl-attrib a:hover{text-decoration:underline}.maplibregl-ctrl-attrib-inner{overflow-wrap:anywhere}.maplibregl-ctrl-attrib-button{inline-size:var(--lr-icon-button-size);block-size:var(--lr-icon-button-size);border-radius:var(--lr-radius-pill);color:var(--lr-color-text);cursor:pointer;background:0 0;border:0;place-items:center;padding:0;display:none;position:absolute;inset-block-start:0;inset-inline-end:0}.maplibregl-ctrl-attrib-button:before{content:"";inline-size:var(--lr-size-1rem);block-size:var(--lr-size-1rem);background:currentColor;display:block;mask:url("data:image/svg+xml,%3Csvg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\"%3E%3Ccircle cx=\\"12\\" cy=\\"12\\" r=\\"9\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\"/%3E%3Cpath d=\\"M12 10v7m0-10v.5\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\"/%3E%3C/svg%3E") 50%/contain no-repeat}.maplibregl-ctrl-attrib.maplibregl-compact{min-block-size:var(--lr-icon-button-size);padding-inline-end:var(--lr-icon-button-size);position:relative}.maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-inner{display:none}.maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-button{display:grid}.maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-inner{display:block}.maplibregl-ctrl-attrib-button:hover,.maplibregl-ctrl-attrib-button:active,.maplibregl-ctrl-attrib:where([open]) .maplibregl-ctrl-attrib-button{background:var(--lr-color-brand-quiet)}.maplibregl-ctrl-attrib-button:focus-visible{outline:var(--lr-focus-ring);outline-offset:calc(-1 * var(--lr-focus-ring-offset))}.maplibregl-ctrl-attrib summary{-webkit-appearance:none;appearance:none;list-style:none}.maplibregl-ctrl-attrib summary::-webkit-details-marker{display:none}.maplibregl-ctrl-attrib summary::marker{content:""}@media (forced-colors:active){.maplibregl-ctrl-attrib-button{color:buttontext}.maplibregl-ctrl-attrib-button:before{forced-color-adjust:none}[part=legend-swatch]{color:canvastext;border-color:canvastext;background:canvas!important}[part=legend-swatch][data-pattern=solid]{background:canvastext!important}}`;export{styles};
1
+ import{css}from"lit";const styles=css`:host{inline-size:100%;block-size:var(--lr-map-height,var(--lr-size-24rem));display:block;position:relative}[part=base]{block-size:100%;inline-size:100%;position:relative}lr-skeleton{--lr-skeleton-w:100%;--lr-skeleton-h:100%}[part=container]{block-size:100%;inline-size:100%;position:absolute;inset:0;overflow:hidden}.maplibregl-canvas-container{block-size:100%;inline-size:100%}.maplibregl-canvas{position:absolute;inset-block-start:0;inset-inline-start:0}.maplibregl-canvas-container.maplibregl-interactive{cursor:grab;user-select:none}.maplibregl-canvas-container.maplibregl-interactive:active{cursor:grabbing}.maplibregl-canvas-container.maplibregl-touch-zoom-rotate,.maplibregl-canvas-container.maplibregl-touch-zoom-rotate .maplibregl-canvas{touch-action:pan-x pan-y}.maplibregl-canvas-container.maplibregl-touch-drag-pan,.maplibregl-canvas-container.maplibregl-touch-drag-pan .maplibregl-canvas{touch-action:pinch-zoom}.maplibregl-canvas-container.maplibregl-touch-zoom-rotate.maplibregl-touch-drag-pan,.maplibregl-canvas-container.maplibregl-touch-zoom-rotate.maplibregl-touch-drag-pan .maplibregl-canvas{touch-action:none}.maplibregl-marker{inline-size:max-content;min-inline-size:var(--lr-size-1-5rem);min-block-size:var(--lr-size-1-5rem);box-sizing:border-box;will-change:transform;position:absolute;top:0;left:0}.maplibregl-marker[role=button]{cursor:pointer}.maplibregl-marker[role=button]:hover{filter:brightness(.9)}.maplibregl-marker[role=button]:focus-visible{outline:var(--lr-focus-ring);outline-offset:calc(-1 * var(--lr-focus-ring-offset))}.maplibregl-popup{z-index:var(--lr-layer-content);will-change:transform;pointer-events:none;color:var(--lr-color-text);font-family:var(--lr-font);font-size:var(--lr-font-size-sm);line-height:var(--lr-line-height-normal);display:flex;position:absolute;top:0;left:0}.maplibregl-popup-anchor-top,.maplibregl-popup-anchor-top-left,.maplibregl-popup-anchor-top-right{flex-direction:column}.maplibregl-popup-anchor-bottom,.maplibregl-popup-anchor-bottom-left,.maplibregl-popup-anchor-bottom-right{flex-direction:column-reverse}.maplibregl-popup-anchor-left{flex-direction:row}.maplibregl-popup-anchor-right{flex-direction:row-reverse}.maplibregl-popup-tip{border:var(--lr-size-0-625rem) solid transparent;block-size:0;inline-size:0;z-index:var(--lr-layer-content)}.maplibregl-popup-anchor-top .maplibregl-popup-tip{border-block-start:none;border-block-end-color:var(--lr-color-surface-overlay);align-self:center}.maplibregl-popup-anchor-top-left .maplibregl-popup-tip{border-block-start:none;border-inline-start:none;border-block-end-color:var(--lr-color-surface-overlay);align-self:flex-start}.maplibregl-popup-anchor-top-right .maplibregl-popup-tip{border-block-start:none;border-inline-end:none;border-block-end-color:var(--lr-color-surface-overlay);align-self:flex-end}.maplibregl-popup-anchor-bottom .maplibregl-popup-tip{border-block-end:none;border-block-start-color:var(--lr-color-surface-overlay);align-self:center}.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip{border-block-end:none;border-inline-start:none;border-block-start-color:var(--lr-color-surface-overlay);align-self:flex-start}.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip{border-block-end:none;border-inline-end:none;border-block-start-color:var(--lr-color-surface-overlay);align-self:flex-end}.maplibregl-popup-anchor-left .maplibregl-popup-tip{border-inline-start:none;border-inline-end-color:var(--lr-color-surface-overlay);align-self:center}.maplibregl-popup-anchor-right .maplibregl-popup-tip{border-inline-end:none;border-inline-start-color:var(--lr-color-surface-overlay);align-self:center}.maplibregl-popup-content{min-inline-size:var(--lr-icon-button-size);padding:var(--lr-space-m);border:var(--lr-border-width-thin) solid var(--lr-color-border);border-radius:var(--lr-radius);background:var(--lr-color-surface-overlay);box-shadow:var(--lr-shadow-m);pointer-events:auto;overflow-wrap:anywhere;padding-inline-end:calc(var(--lr-icon-button-size) + var(--lr-space-xs));position:relative}.maplibregl-popup-close-button{min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);border-radius:var(--lr-radius);color:var(--lr-color-text-quiet);font:inherit;cursor:pointer;background:0 0;border:0;justify-content:center;align-items:center;padding:0;display:inline-flex;position:absolute;inset-block-start:0;inset-inline-end:0}.maplibregl-popup-close-button:where(:hover){background:var(--lr-map-popup-close-button-hover-bg,var(--lr-color-brand-quiet));color:var(--lr-map-popup-close-button-hover-color,var(--lr-color-brand))}.maplibregl-popup-close-button:where(:active){background:var(--lr-map-popup-close-button-active-bg,color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active)));color:var(--lr-map-popup-close-button-active-color,var(--lr-color-brand))}.maplibregl-popup-close-button:where(:focus-visible){outline:var(--lr-focus-ring);outline-offset:calc(-1 * var(--lr-focus-ring-offset))}[part=error]{padding:var(--lr-space-l);color:var(--lr-color-danger);font-size:var(--lr-font-size-md-sm);text-align:center;margin:0}[part=legend]{z-index:var(--lr-layer-content);min-inline-size:0;max-inline-size:calc(100% - var(--lr-space-s) - var(--lr-space-s));max-block-size:calc(100% - var(--lr-space-s) - var(--lr-space-s) - var(--_lr-map-controls-bottom,calc(var(--lr-space-xs) * 0)) - var(--_lr-map-controls-top,calc(var(--lr-space-xs) * 0)));box-sizing:border-box;gap:var(--lr-space-xs);padding:var(--lr-space-xs) var(--lr-space-s);background:var(--lr-color-surface);border:var(--lr-border-width-thin) solid var(--lr-color-border);border-radius:var(--lr-radius);box-shadow:var(--lr-shadow-m);font-size:var(--lr-font-size-xs);flex-direction:column;display:flex;position:absolute;inset-block-end:calc(var(--lr-space-s) + var(--_lr-map-controls-bottom,calc(var(--lr-space-xs) * 0)));inset-inline-start:var(--lr-space-s);overflow:auto}.legend-list{gap:var(--lr-space-xs);flex-direction:column;min-inline-size:0;display:flex}.legend-gradient{align-items:center;gap:var(--lr-space-xs);min-inline-size:0;display:flex}.legend-gradient .gradient-bar{flex:1 1 var(--lr-size-6rem);inline-size:var(--lr-size-6rem);min-inline-size:0;block-size:var(--lr-size-0-5rem);border-radius:var(--lr-size-2px)}[part=legend-lo],[part=legend-hi]{white-space:nowrap;flex:none}:host(:dir(rtl)) .legend-gradient .gradient-bar{transform:scaleX(-1)}.legend-row{align-items:center;gap:var(--lr-space-xs);min-inline-size:0;display:flex}.legend-row>span:last-child{overflow-wrap:anywhere;min-inline-size:0}[part=legend-swatch]{inline-size:var(--lr-size-0-75rem);block-size:var(--lr-size-0-75rem);box-sizing:border-box;border:var(--lr-border-width-thin) solid currentColor;border-radius:var(--lr-size-2px);flex:none;position:relative;overflow:hidden}[part=legend-swatch][data-pattern=diagonal]{border-style:dashed}[part=legend-swatch][data-pattern=dots]{border-style:dotted;border-radius:50%}[part=legend-swatch][data-pattern=crosshatch]{border-style:double;border-radius:0}[part=legend-swatch][data-pattern=diagonal]:before,[part=legend-swatch][data-pattern=crosshatch]:before,[part=legend-swatch][data-pattern=crosshatch]:after,[part=legend-swatch][data-pattern=dots]:before{content:"";inline-size:150%;block-size:var(--lr-border-width-thin);background:currentColor;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)rotate(-45deg)}[part=legend-swatch][data-pattern=crosshatch]:after{transform:translate(-50%,-50%)rotate(45deg)}[part=legend-swatch][data-pattern=dots]:before{inline-size:var(--lr-size-2px);block-size:var(--lr-size-2px);border-radius:50%;transform:translate(-50%,-50%)}[part=legend-limit]{min-inline-size:0;border-block-start:var(--lr-border-width-thin) solid var(--lr-color-border);color:var(--lr-color-text-quiet);overflow-wrap:anywhere;padding-block-start:var(--lr-space-xs)}.maplibregl-ctrl-top-left,.maplibregl-ctrl-top-right,.maplibregl-ctrl-bottom-left,.maplibregl-ctrl-bottom-right{max-inline-size:100%;z-index:var(--lr-layer-content);pointer-events:none;flex-direction:column;align-items:flex-start;display:flex;position:absolute}.maplibregl-ctrl-top-right,.maplibregl-ctrl-bottom-right{align-items:flex-end}.maplibregl-control-container:where(:has(.maplibregl-ctrl-top-left:not(:empty))):where(:has(.maplibregl-ctrl-top-right:not(:empty))) :where(.maplibregl-ctrl-top-left,.maplibregl-ctrl-top-right),.maplibregl-control-container:where(:has(.maplibregl-ctrl-bottom-left:not(:empty))):where(:has(.maplibregl-ctrl-bottom-right:not(:empty))) :where(.maplibregl-ctrl-bottom-left,.maplibregl-ctrl-bottom-right){max-inline-size:50%}.maplibregl-ctrl-top-left{inset-block-start:0;inset-inline-start:0}.maplibregl-ctrl-top-right{inset-block-start:0;inset-inline-end:0}.maplibregl-ctrl-bottom-left{inset-block-end:0;inset-inline-start:0}.maplibregl-ctrl-bottom-right{inset-block-end:0;inset-inline-end:0}.maplibregl-ctrl{box-sizing:border-box;max-inline-size:calc(100% - 2 * var(--lr-space-xs));margin:var(--lr-space-xs);pointer-events:auto;flex-shrink:0;transform:translate(0)}.maplibregl-ctrl-attrib{padding:0 var(--lr-space-xs);border-radius:var(--lr-radius);background:var(--lr-color-surface);color:var(--lr-color-text-quiet);font-size:var(--lr-font-size-xs)}.maplibregl-ctrl-group{border:var(--lr-border-width-thin) solid var(--lr-color-border);border-radius:var(--lr-radius);background:var(--lr-color-surface);inline-size:fit-content;box-shadow:var(--lr-shadow);color:var(--lr-color-text);flex-direction:column;display:flex}.maplibregl-ctrl-group button{min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);padding:var(--lr-space-xs);border-radius:inherit;color:inherit;font:inherit;cursor:pointer;background:0 0;border:0;place-items:center;display:grid}.maplibregl-ctrl-group button:where(:not(:first-child)){border-block-start:var(--lr-border-width-thin) solid var(--lr-color-border)}.maplibregl-ctrl-group button:hover:where(:not(:disabled)){background:var(--lr-color-brand-quiet);color:var(--lr-color-brand)}.maplibregl-ctrl-group button:active:where(:not(:disabled)){background:var(--lr-color-brand);color:var(--lr-color-on-brand)}.maplibregl-ctrl-group button:focus-visible{outline:var(--lr-focus-ring);outline-offset:calc(-1 * var(--lr-focus-ring-offset))}.maplibregl-ctrl-group button:disabled{opacity:var(--lr-opacity-disabled);cursor:not-allowed}.maplibregl-ctrl-icon{inline-size:var(--lr-size-1em);block-size:var(--lr-size-1em);font-size:var(--lr-font-size-lg);line-height:var(--lr-line-height-none);place-items:center;display:grid}.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon:before{content:"+"}.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon:before{content:"−"}.maplibregl-ctrl-compass .maplibregl-ctrl-icon:before{content:"▲"}.maplibregl-ctrl-scale{box-sizing:border-box;min-inline-size:max-content;padding:var(--lr-space-2xs) var(--lr-space-xs);background:var(--lr-color-surface);color:var(--lr-color-text);font-family:var(--lr-font);font-size:var(--lr-font-size-xs);text-align:center;white-space:nowrap;padding-block-end:calc(var(--lr-space-2xs) + var(--lr-space-xs));position:relative}.maplibregl-ctrl-scale:after{content:"";box-sizing:border-box;inline-size:var(--_lr-map-scale-width,100%);block-size:var(--lr-space-xs);border:var(--lr-border-width-medium) solid currentColor;pointer-events:none;border-block-start:0;position:absolute;inset-block-end:0;inset-inline-start:0}.maplibregl-ctrl-attrib a{color:var(--lr-color-text-quiet);text-decoration:none}.maplibregl-ctrl-attrib a:hover{text-decoration:underline}.maplibregl-ctrl-attrib-inner{overflow-wrap:anywhere}.maplibregl-ctrl-attrib-button{inline-size:var(--lr-icon-button-size);block-size:var(--lr-icon-button-size);border-radius:var(--lr-radius-pill);color:var(--lr-color-text);cursor:pointer;background:0 0;border:0;place-items:center;padding:0;display:none;position:absolute;inset-block-start:0;inset-inline-end:0}.maplibregl-ctrl-attrib-button:before{content:"";inline-size:var(--lr-size-1rem);block-size:var(--lr-size-1rem);background:currentColor;display:block;mask:url("data:image/svg+xml,%3Csvg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\"%3E%3Ccircle cx=\\"12\\" cy=\\"12\\" r=\\"9\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\"/%3E%3Cpath d=\\"M12 10v7m0-10v.5\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\"/%3E%3C/svg%3E") 50%/contain no-repeat}.maplibregl-ctrl-attrib.maplibregl-compact{min-block-size:var(--lr-icon-button-size);padding-inline-end:var(--lr-icon-button-size);position:relative}.maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-inner{display:none}.maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-button{display:grid}.maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-inner{display:block}.maplibregl-ctrl-attrib-button:hover,.maplibregl-ctrl-attrib-button:active,.maplibregl-ctrl-attrib:where([open]) .maplibregl-ctrl-attrib-button{background:var(--lr-color-brand-quiet)}.maplibregl-ctrl-attrib-button:focus-visible{outline:var(--lr-focus-ring);outline-offset:calc(-1 * var(--lr-focus-ring-offset))}.maplibregl-ctrl-attrib summary{-webkit-appearance:none;appearance:none;list-style:none}.maplibregl-ctrl-attrib summary::-webkit-details-marker{display:none}.maplibregl-ctrl-attrib summary::marker{content:""}@media (forced-colors:active){.maplibregl-ctrl-attrib-button{color:buttontext}.maplibregl-ctrl-attrib-button:before{forced-color-adjust:none}[part=legend-swatch]{color:canvastext;border-color:canvastext;background:canvas!important}[part=legend-swatch][data-pattern=solid]{background:canvastext!important}}`;export{styles};
@@ -1,4 +1,4 @@
1
- var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html}from"lit";import{property,query}from"lit/decorators.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{LyraElement}from"../../../internal/lyra-element.js";import{playIcon,pauseIcon}from"../../../internal/icons.js";import{devWarnOnce}from"../../../internal/dev-mode-attribute-warning.js";import{finiteCount,finiteDuration}from"../../../internal/numbers.js";import{relayNativeEvent}from"../../../internal/native-event-relay.js";import{styles}from"./sequence-playback.styles.js";import{presenceTrueDefaultBooleanConverter as trueDefaultBooleanConverter}from"../../../internal/converters.js";import{LYRA_DEFAULT_pause,LYRA_DEFAULT_play,LYRA_DEFAULT_playbackPosition,LYRA_DEFAULT_playbackStepPosition}from"../../../internal/default-strings.generated.js";const MIN_INTERVAL_MS=16,INVALID_INTERVAL_WARNING_KEY="lyra-sequence-playback-invalid-interval",INVALID_INTERVAL_WARNING="<lr-sequence-playback>: interval-ms is outside the supported timer range and the timer delay was clamped.";function warnInvalidInterval(){devWarnOnce(INVALID_INTERVAL_WARNING_KEY,INVALID_INTERVAL_WARNING)}class LyraSequencePlayback extends LyraElement{constructor(){super(...arguments),this.itemCount=0,this.currentIndex=0,this.intervalMs=900,this.loop=!0,this.hidden=!1,this._playing=!1,this.running=!1,this.onControlFocus=event=>{relayNativeEvent(this,event)},this.onControlBlur=event=>{relayNativeEvent(this,event)},this.onSliderKeyDown=event=>{const delta=this.keyboardStepDelta(event.key);delta!==void 0&&(event.preventDefault(),this.goTo(finiteCount(this.currentIndex,0,this.maxIndex)+delta))}}static{this.defaultStrings={...super.defaultStrings,pause:LYRA_DEFAULT_pause,play:LYRA_DEFAULT_play,playbackPosition:LYRA_DEFAULT_playbackPosition,playbackStepPosition:LYRA_DEFAULT_playbackStepPosition}}static{this.styles=[LyraElement.styles,styles]}static{this.properties={playing:{type:Boolean,reflect:!0,noAccessor:!0},loop:{type:Boolean,converter:trueDefaultBooleanConverter}}}get playing(){return this._playing}set playing(next){if(next&&this.hasUpdated&&finiteCount(this.itemCount)<=1){this.hasAttribute("playing")&&this.removeAttribute("playing");return}const old=this._playing,requested=!!next;requested!==old&&(this._playing=requested,this.requestUpdate("playing",old),requested?this.startIfPossible():this.stopRunning())}startIfPossible(){this.running||!this._playing||finiteCount(this.itemCount)<=1||(this.running=!0,this.emit("lr-play"),this.running&&this._playing&&this.scheduleTick())}stopRunning(){this.clearTimer(),this.running&&(this.running=!1,this.emit("lr-pause"))}rejectInvalidPlayingRequest(){if(!this._playing)return;const old=this._playing;this._playing=!1,this.stopRunning(),this.requestUpdate("playing",old)}get maxIndex(){return Math.max(0,finiteCount(this.itemCount)-1)}disconnectedCallback(){this.pause(),this.clearTimer(),super.disconnectedCallback()}willUpdate(changed){super.willUpdate(changed),changed.has("hidden")&&this.hidden&&this.pause();const itemCount=finiteCount(this.itemCount),currentIndex=finiteCount(this.currentIndex);itemCount!==this.itemCount&&(this.itemCount=itemCount),currentIndex!==this.currentIndex&&(this.currentIndex=currentIndex),(changed.has("itemCount")||changed.has("playing"))&&(this.itemCount<=1?this.rejectInvalidPlayingRequest():this.startIfPossible(),this.currentIndex>this.maxIndex&&(this.currentIndex=this.maxIndex))}play(){this.playing||finiteCount(this.itemCount)<=1||(this.playing=!0)}pause(){this.playing&&(this.playing=!1)}toggle(){this.playing=!this.playing}scheduleTick(){const rawDelay=this.intervalMs,delay=finiteDuration(rawDelay,MIN_INTERVAL_MS,MIN_INTERVAL_MS);delay!==rawDelay&&warnInvalidInterval();const timerWindow=this.ownerDocument.defaultView;if(!timerWindow)return;const id=timerWindow.setTimeout(()=>{this.timer!==id||this.timerWindow!==timerWindow||(this.tick(),this.running&&this.playing&&this.timer===id&&this.timerWindow===timerWindow&&this.scheduleTick())},delay);this.timer=id,this.timerWindow=timerWindow}clearTimer(){this.timer!==void 0&&this.timerWindow?.clearTimeout(this.timer),this.timer=void 0,this.timerWindow=void 0}tick(){const itemCount=finiteCount(this.itemCount),next=finiteCount(this.currentIndex)+1;next>=itemCount?this.loop?this.setIndex(0):(this.setIndex(itemCount-1),this.pause()):this.setIndex(next)}setIndex(i){this.currentIndex=finiteCount(i,0,this.maxIndex),this.emit("lr-sequence-step",{currentIndex:this.currentIndex})}next(){const currentIndex=finiteCount(this.currentIndex);currentIndex+1<finiteCount(this.itemCount)&&this.setIndex(currentIndex+1)}previous(){const currentIndex=finiteCount(this.currentIndex);currentIndex>0&&this.setIndex(currentIndex-1)}goTo(currentIndex){this.pause(),this.setIndex(finiteCount(currentIndex,0,this.maxIndex))}focus(options){this.playButton?.focus(options)}blur(){this.playButton?.blur()}click(){this.playButton?.click()}keyboardStepDelta(key){const rtl=this.effectiveDirection==="rtl";if(key==="ArrowLeft")return rtl?1:-1;if(key==="ArrowRight")return rtl?-1:1}render(){const maxIndex=this.maxIndex,currentIndex=finiteCount(this.currentIndex,0,maxIndex),disabled=finiteCount(this.itemCount)<=1;return html`
1
+ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html}from"lit";import{property,query}from"lit/decorators.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{LyraElement}from"../../../internal/lyra-element.js";import{playIcon,pauseIcon}from"../../../internal/icons.js";import{devWarnOnce}from"../../../internal/dev-mode-attribute-warning.js";import{finiteCount,finiteDuration}from"../../../internal/numbers.js";import{relayNativeEvent}from"../../../internal/native-event-relay.js";import{styles}from"./sequence-playback.styles.js";import{presenceTrueDefaultBooleanConverter as trueDefaultBooleanConverter}from"../../../internal/converters.js";import{LYRA_DEFAULT_pause,LYRA_DEFAULT_play,LYRA_DEFAULT_playbackPosition,LYRA_DEFAULT_playbackStepPosition}from"../../../internal/default-strings.generated.js";const MIN_INTERVAL_MS=16,INVALID_INTERVAL_WARNING_KEY="lyra-sequence-playback-invalid-interval",INVALID_INTERVAL_WARNING="<lr-sequence-playback>: interval-ms is outside the supported timer range and the timer delay was clamped.";function warnInvalidInterval(){devWarnOnce(INVALID_INTERVAL_WARNING_KEY,INVALID_INTERVAL_WARNING)}class LyraSequencePlayback extends LyraElement{constructor(){super(...arguments),this.itemCount=0,this.currentIndex=0,this.intervalMs=900,this.loop=!0,this.hidden=!1,this._playing=!1,this.running=!1,this.onControlFocus=event=>{relayNativeEvent(this,event)},this.onControlBlur=event=>{relayNativeEvent(this,event)},this.onSliderKeyDown=event=>{const delta=this.keyboardStepDelta(event.key);delta!==void 0&&(event.preventDefault(),this.goTo(finiteCount(this.currentIndex,0,this.maxIndex)+delta))}}static{this.defaultStrings={...super.defaultStrings,pause:LYRA_DEFAULT_pause,play:LYRA_DEFAULT_play,playbackPosition:LYRA_DEFAULT_playbackPosition,playbackStepPosition:LYRA_DEFAULT_playbackStepPosition}}static{this.styles=[LyraElement.styles,styles]}static{this.properties={playing:{type:Boolean,reflect:!0,noAccessor:!0},loop:{type:Boolean,converter:trueDefaultBooleanConverter}}}get playing(){return this._playing}set playing(next){if(next&&this.hasUpdated&&finiteCount(this.itemCount)<=1){this.hasAttribute("playing")&&this.removeAttribute("playing");return}const old=this._playing,requested=!!next;requested!==old&&(this._playing=requested,this.requestUpdate("playing",old),requested?this.startIfPossible():this.stopRunning())}startIfPossible(){this.running||!this._playing||finiteCount(this.itemCount)<=1||(this.running=!0,this.emit("lr-play"),this.running&&this._playing&&this.scheduleTick())}stopRunning(){this.clearTimer(),this.running&&(this.running=!1,this.emit("lr-pause"))}rejectInvalidPlayingRequest(){if(!this._playing)return;const old=this._playing;this._playing=!1,this.stopRunning(),this.requestUpdate("playing",old)}get maxIndex(){return Math.max(0,finiteCount(this.itemCount)-1)}disconnectedCallback(){this.pause(),this.clearTimer(),super.disconnectedCallback()}willUpdate(changed){super.willUpdate(changed),changed.has("hidden")&&this.hidden&&this.pause();const itemCount=finiteCount(this.itemCount),currentIndex=finiteCount(this.currentIndex);itemCount!==this.itemCount&&(this.itemCount=itemCount),currentIndex!==this.currentIndex&&(this.currentIndex=currentIndex),(changed.has("itemCount")||changed.has("playing"))&&(this.itemCount<=1?this.rejectInvalidPlayingRequest():this.startIfPossible(),this.currentIndex>this.maxIndex&&this.setIndex(this.maxIndex))}play(){this.playing||finiteCount(this.itemCount)<=1||(this.playing=!0)}pause(){this.playing&&(this.playing=!1)}toggle(){this.playing=!this.playing}scheduleTick(){const rawDelay=this.intervalMs,delay=finiteDuration(rawDelay,MIN_INTERVAL_MS,MIN_INTERVAL_MS);delay!==rawDelay&&warnInvalidInterval();const timerWindow=this.ownerDocument.defaultView;if(!timerWindow)return;const id=timerWindow.setTimeout(()=>{this.timer!==id||this.timerWindow!==timerWindow||(this.tick(),this.running&&this.playing&&this.timer===id&&this.timerWindow===timerWindow&&this.scheduleTick())},delay);this.timer=id,this.timerWindow=timerWindow}clearTimer(){this.timer!==void 0&&this.timerWindow?.clearTimeout(this.timer),this.timer=void 0,this.timerWindow=void 0}tick(){const itemCount=finiteCount(this.itemCount),next=finiteCount(this.currentIndex)+1;next>=itemCount?this.loop?this.setIndex(0):(this.setIndex(itemCount-1),this.pause()):this.setIndex(next)}setIndex(i){this.currentIndex=finiteCount(i,0,this.maxIndex),this.emit("lr-sequence-step",{currentIndex:this.currentIndex})}next(){const currentIndex=finiteCount(this.currentIndex);currentIndex+1<finiteCount(this.itemCount)&&this.setIndex(currentIndex+1)}previous(){const currentIndex=finiteCount(this.currentIndex);currentIndex>0&&this.setIndex(currentIndex-1)}goTo(currentIndex){this.pause(),this.setIndex(finiteCount(currentIndex,0,this.maxIndex))}focus(options){this.playButton?.focus(options)}blur(){this.playButton?.blur()}click(){this.playButton?.click()}keyboardStepDelta(key){const rtl=this.effectiveDirection==="rtl";if(key==="ArrowLeft")return rtl?1:-1;if(key==="ArrowRight")return rtl?-1:1}render(){const maxIndex=this.maxIndex,currentIndex=finiteCount(this.currentIndex,0,maxIndex),disabled=finiteCount(this.itemCount)<=1;return html`
2
2
  <div part="base">
3
3
  <button
4
4
  part="play-button"
@@ -1,4 +1,4 @@
1
- var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{trueDefaultBooleanConverter}from"../../../internal/converters.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{LyraElement}from"../../../internal/lyra-element.js";import{hostAriaLabel}from"../../../internal/a11y.js";import{MAX_NATIVE_PLAYBACK_RATE,MIN_NATIVE_PLAYBACK_RATE}from"../../../internal/media-controller.js";import{finiteRange}from"../../../internal/numbers.js";import{relayNativeEvent}from"../../../internal/native-event-relay.js";import{tag}from"../../../internal/prefix.js";import{safeMediaSrc}from"../../../internal/safe-url.js";import{styles}from"./video-playlist.styles.js";import{LYRA_DEFAULT_videoPlaylistLabel,LYRA_DEFAULT_videoPlaylistUntitled}from"../../../internal/default-strings.generated.js";function safeControls(value){return value==="none"||value==="standard"?value:"full"}function safeRepeat(value){return value==="one"||value==="all"?value:"none"}function sameVideos(left,right){return left.length===right.length&&left.every((video,index)=>video===right[index])}function textTracks(media){const result=[];if(!media)return result;for(let index=0;index<media.textTracks.length;index+=1){const track=media.textTracks[index];track&&result.push(track)}return result}function isSelectableTrack(track){return track.kind==="subtitles"||track.kind==="captions"||track.kind==="descriptions"}function validVolume(value){return typeof value=="number"&&Number.isFinite(value)&&value>=0&&value<=1}function validPlaybackRate(value){return typeof value=="number"&&Number.isFinite(value)&&value>=MIN_NATIVE_PLAYBACK_RATE&&value<=MAX_NATIVE_PLAYBACK_RATE}function formatDuration(seconds,locale){const total=Math.floor(finiteRange(seconds,0,0)),hours=Math.floor(total/3600),minutes=Math.floor(total%3600/60),remaining=total%60,regular=getNumberFormat(locale,{maximumFractionDigits:0,useGrouping:!1}),padded=getNumberFormat(locale,{maximumFractionDigits:0,minimumIntegerDigits:2,useGrouping:!1});return hours>0?`${regular.format(hours)}:${padded.format(minutes)}:${padded.format(remaining)}`:`${regular.format(minutes)}:${padded.format(remaining)}`}function sourceSnapshot(src,type,media){return{src,type,media}}function trackSnapshot(src,kind,srclang,label,isDefault){return{src,kind,srclang,label,default:isDefault}}class LyraVideoPlaylist extends LyraElement{constructor(){super(...arguments),this.controls="full",this.iconLibrary="system",this.autoAdvance=!0,this.repeat="none",this.items=[],this.playlistVideos=[],this.liveChildrenReady=!1,this.activeIndex=-1,this.navigationIndex=-1,this.listeners=new Map,this.lastKnownPlaying=new WeakMap,this.nativeVideos=new WeakMap,this.needsReload=new WeakSet,this.ownedVideoState=new WeakMap,this.preferences={},this.activationGeneration=0,this.reconcileGeneration=0,this.onSlotChange=()=>this.reconcileChildren(),this.onItemFocus=event=>{relayNativeEvent(this,event)},this.onItemBlur=event=>{relayNativeEvent(this,event)}}static{this.defaultStrings={...super.defaultStrings,videoPlaylistLabel:LYRA_DEFAULT_videoPlaylistLabel,videoPlaylistUntitled:LYRA_DEFAULT_videoPlaylistUntitled}}static{this.immutableEventDetails=Object.freeze(["lr-video-change"])}static{this.styles=[LyraElement.styles,styles]}connectedCallback(){super.connectedCallback(),this.observeChildren(),this.hasUpdated?this.scheduleAfterUpdate(()=>this.reconcileChildren(),"video-playlist-reconcile"):this.seedFirstRenderState(()=>{this.directVideos().length>0&&this.reconcileChildren()})}disconnectedCallback(){this.activationGeneration+=1,this.reconcileGeneration+=1,this.pendingPlay=void 0,this.mutationObserver?.disconnect(),this.mutationObserver=void 0;for(const video of this.playlistVideos)this.unbindVideo(video),video.hidden=!0,this.pauseAndUnload(video);super.disconnectedCallback()}willUpdate(changed){super.willUpdate(changed),changed.has("controls")&&(this.controls=safeControls(this.controls)),changed.has("repeat")&&(this.repeat=safeRepeat(this.repeat)),(changed.has("controls")||changed.has("iconLibrary"))&&this.scheduleAfterUpdate(()=>this.reconcileChildren(),"video-playlist-reconcile")}observeChildren(){this.mutationObserver?.disconnect(),this.mutationObserver=void 0;const MutationObserverCtor=this.ownerDocument.defaultView?.MutationObserver;MutationObserverCtor&&(this.mutationObserver=new MutationObserverCtor(()=>{this.scheduleAfterUpdate(()=>{this.reconcileChildren(),this.requestUpdate()},"video-playlist-reconcile")}),this.mutationObserver.observe(this,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["default","inert","kind","label","media","poster","src","srclang","title","type"]}))}directVideos(){const videoTag=tag("video");return[...this.children].filter(child=>child.localName===videoTag)}isEnabled(video){return!video.inert}nearestEnabledIndex(videos,preferred){if(!videos.length)return-1;const start=Math.min(Math.max(preferred,0),videos.length-1);for(let index=start;index<videos.length;index+=1)if(this.isEnabled(videos[index]))return index;for(let index=start-1;index>=0;index-=1)if(this.isEnabled(videos[index]))return index;return-1}reconcileChildren(){if(!this.isConnected)return;const previousVideos=this.playlistVideos,previousActive=this.activeVideo,previousIndex=this.activeIndex,previousNavigation=previousVideos[this.navigationIndex],navigationHadFocus=this.shadowRoot?.activeElement?.getAttribute("part")==="playlist-item",videos=this.directVideos();(videos.length>0||this.liveChildrenReady)&&(this.liveChildrenReady=!0);let active=previousActive&&videos.includes(previousActive)&&this.isEnabled(previousActive)?previousActive:void 0,nextIndex=active?videos.indexOf(active):this.nearestEnabledIndex(videos,previousIndex);!active&&nextIndex>=0&&(active=videos[nextIndex]),active||(nextIndex=-1);const activeChanged=active!==previousActive,outgoingWasRemoved=!!(previousActive&&!videos.includes(previousActive)),resumePlayback=activeChanged&&previousActive?outgoingWasRemoved?this.lastKnownPlaying.get(previousActive)??previousActive.getState().playing:previousActive.getState().playing:!1,outgoingPreferences=activeChanged&&previousActive?outgoingWasRemoved?this.capturePreferences(previousActive,this.nativeVideos.get(previousActive)):this.capturePreferences(previousActive):void 0;for(const video of previousVideos)videos.includes(video)||this.releaseVideo(video);for(const video of videos)this.claimVideo(video),this.bindVideo(video);activeChanged&&previousActive?(this.preferences=outgoingPreferences??{},outgoingWasRemoved||this.pauseAndUnload(previousActive),this.activationGeneration+=1):activeChanged&&(this.activationGeneration+=1),this.activeVideo=active,this.activeIndex=nextIndex,sameVideos(previousVideos,videos)||(this.playlistVideos=videos);for(const video of videos){video.controls!==this.controls&&(video.controls=this.controls),video.iconLibrary!==this.iconLibrary&&(video.iconLibrary=this.iconLibrary);const isActive=video===active;video.hidden=!isActive,isActive||this.pauseAndUnload(video)}active?(activeChanged||this.needsReload.has(active))&&this.activateVideo(active,resumePlayback,this.activationGeneration):this.pendingPlay=void 0;const keptNavigation=previousNavigation&&videos.includes(previousNavigation)&&this.isEnabled(previousNavigation)?videos.indexOf(previousNavigation):-1;this.navigationIndex=keptNavigation>=0?keptNavigation:nextIndex,navigationHadFocus&&keptNavigation<0&&this.navigationIndex>=0&&this.focusItem(this.navigationIndex),activeChanged&&previousActive&&active&&this.emitChange(previousIndex,nextIndex,active),this.scheduleChildrenReady(videos)}scheduleChildrenReady(videos){const reconcileGeneration=++this.reconcileGeneration;Promise.all(videos.map(video=>video.updateComplete)).then(()=>{if(!this.isConnected||reconcileGeneration!==this.reconcileGeneration)return;for(const video of this.playlistVideos)this.rememberNativeVideo(video);for(const video of this.playlistVideos)video!==this.activeVideo&&this.pauseAndUnload(video);const active=this.activeVideo;if(!active||!this.needsReload.has(active))return;const shouldPlay=this.pendingPlay?.video===active&&this.pendingPlay.generation===this.activationGeneration;this.activateVideo(active,shouldPlay,this.activationGeneration)})}bindVideo(video){if(this.listeners.has(video))return;const listeners={ended:()=>{this.rememberNativeVideo(video),this.lastKnownPlaying.set(video,!1),this.handleCompletion(video)},error:()=>{this.rememberNativeVideo(video),this.lastKnownPlaying.set(video,!1)},loadedmetadata:()=>{this.rememberNativeVideo(video),this.handleLoadedMetadata(video)},pause:()=>{this.rememberNativeVideo(video),this.lastKnownPlaying.set(video,!1)},play:()=>{this.rememberNativeVideo(video),this.lastKnownPlaying.set(video,!0),video!==this.activeVideo&&this.pauseAndUnload(video)}};this.lastKnownPlaying.set(video,video.getState().playing),this.rememberNativeVideo(video),this.listeners.set(video,listeners),video.addEventListener("ended",listeners.ended),video.addEventListener("error",listeners.error),video.addEventListener("loadedmetadata",listeners.loadedmetadata),video.addEventListener("pause",listeners.pause),video.addEventListener("play",listeners.play)}unbindVideo(video){const listeners=this.listeners.get(video);listeners&&(video.removeEventListener("ended",listeners.ended),video.removeEventListener("error",listeners.error),video.removeEventListener("loadedmetadata",listeners.loadedmetadata),video.removeEventListener("pause",listeners.pause),video.removeEventListener("play",listeners.play),this.listeners.delete(video))}claimVideo(video){this.ownedVideoState.has(video)||this.ownedVideoState.set(video,{controls:video.controls,iconLibrary:video.iconLibrary,hidden:!!video.hidden})}releaseVideo(video){const authored=this.ownedVideoState.get(video);this.unbindVideo(video),this.pauseAndUnload(video),authored&&(video.controls=authored.controls,video.iconLibrary=authored.iconLibrary,video.hidden=authored.hidden,this.ownedVideoState.delete(video),video.isConnected&&video.load())}rememberNativeVideo(video){const native=video.getVideoElement();native&&this.nativeVideos.set(video,native)}pauseAndUnload(video){video.pause(),video.hidden=!0,this.needsReload.add(video);const native=video.getVideoElement();if(!native)return;const mediaChildren=[...native.children].filter(child=>child.localName==="source"||child.localName==="track");if(!(!native.hasAttribute("src")&&mediaChildren.length===0)){native.removeAttribute("src");for(const child of mediaChildren)child.remove();native.load()}}activateVideo(video,shouldPlay,generation){if(video.hidden=!1,!video.getVideoElement()){this.needsReload.add(video),shouldPlay&&(this.pendingPlay={video,generation});return}if(this.rememberNativeVideo(video),video.load(),this.needsReload.delete(video),this.applyPreferences(video,this.preferences),!shouldPlay){this.pendingPlay?.video===video&&(this.pendingPlay=void 0);return}this.pendingPlay=void 0,video.play().catch(()=>{generation!==this.activationGeneration||this.activeVideo})}capturePreferences(video,native=video.getVideoElement()){const state2=video.getState(),preferences={};validVolume(state2.volume)&&(preferences.volume=state2.volume),typeof state2.muted=="boolean"&&(preferences.muted=state2.muted),validPlaybackRate(state2.playbackRate)&&(preferences.playbackRate=state2.playbackRate);const tracks=textTracks(native),showingIndex=tracks.findIndex(track=>isSelectableTrack(track)&&track.mode!=="disabled");if(showingIndex<0)preferences.textTrack=null;else{const track=tracks[showingIndex];preferences.textTrack={index:showingIndex,kind:track.kind,label:track.label,language:track.language}}return preferences}applyPreferences(video,preferences){validVolume(preferences.volume)&&video.setVolume(preferences.volume),validPlaybackRate(preferences.playbackRate)&&video.setPlaybackRate(preferences.playbackRate),typeof preferences.muted=="boolean"&&video.getState().muted!==preferences.muted&&video.toggleMute(),this.applyTextTrackPreference(video.getVideoElement(),preferences.textTrack)}applyTextTrackPreference(native,preference){if(!native||preference===void 0)return;const tracks=textTracks(native);if(preference===null){for(const track of tracks)isSelectableTrack(track)&&(track.mode="disabled");return}const exact=tracks.find(track=>track.kind===preference.kind&&track.label===preference.label&&track.language===preference.language),indexed=tracks[preference.index],selected=exact??(indexed?.kind===preference.kind?indexed:void 0);if(selected)for(const track of tracks)isSelectableTrack(track)&&(track.mode=track===selected?"hidden":"disabled")}handleLoadedMetadata(video){video===this.activeVideo&&(this.applyPreferences(video,this.preferences),this.requestUpdate())}handleCompletion(video){if(video!==this.activeVideo||!this.autoAdvance)return;if(this.repeat==="one"){video.seek(0);const generation=this.activationGeneration;video.play().catch(()=>{generation!==this.activationGeneration||this.activeVideo});return}const nextIndex=this.nearestEnabledIndex(this.playlistVideos,this.activeIndex+1);if(nextIndex>this.activeIndex){this.switchTo(nextIndex,!0);return}if(this.repeat==="all"){const first=this.nearestEnabledIndex(this.playlistVideos,0);if(first>=0&&first!==this.activeIndex)this.switchTo(first,!0);else if(first===this.activeIndex){video.seek(0);const generation=this.activationGeneration;video.play().catch(()=>{generation!==this.activationGeneration||this.activeVideo})}}}snapshotVideo(video){const sources=[],directSrc=video.src.trim();directSrc&&sources.push(sourceSnapshot(directSrc,"",""));const tracks=[];for(const child of video.children)if(child.localName==="source"){const src=child.getAttribute("src")?.trim()??"";src&&sources.push(sourceSnapshot(src,child.getAttribute("type")??"",child.getAttribute("media")??""))}else if(child.localName==="track"){const src=child.getAttribute("src")?.trim()??"";src&&tracks.push(trackSnapshot(src,child.getAttribute("kind")??"",child.getAttribute("srclang")??"",child.getAttribute("label")??"",child.hasAttribute("default")))}return{title:video.title,poster:video.poster,sources,tracks}}emitChange(previousIndex,currentIndex,video){this.emit("lr-video-change",{previousIndex,currentIndex,video:this.snapshotVideo(video)})}switchTo(index,forcePlay=!1){const incoming=this.playlistVideos[index];if(!incoming||!this.isEnabled(incoming))return;const previousIndex=this.activeIndex,outgoing=this.activeVideo;if(incoming===outgoing){if(this.navigationIndex=index,this.requestUpdate(),forcePlay){const generation=this.activationGeneration;incoming.play().catch(()=>{generation!==this.activationGeneration||this.activeVideo})}this.emitChange(previousIndex,index,incoming);return}const wasPlaying=forcePlay||!!outgoing?.getState().playing;outgoing&&(this.preferences=this.capturePreferences(outgoing),this.pauseAndUnload(outgoing)),this.activationGeneration+=1,this.activeVideo=incoming,this.activeIndex=index,this.navigationIndex=index;for(const video of this.playlistVideos){const isActive=video===incoming;video.hidden=!isActive,!isActive&&video!==outgoing&&this.pauseAndUnload(video)}this.activateVideo(incoming,wasPlaying,this.activationGeneration),this.requestUpdate(),this.emitChange(previousIndex,index,incoming)}goTo(index){!Number.isFinite(index)||!Number.isInteger(index)||index<0||index>=this.playlistVideos.length||this.switchTo(index)}next(){const index=this.nearestEnabledIndex(this.playlistVideos,this.activeIndex+1);index>this.activeIndex&&this.switchTo(index)}previous(){for(let index=this.activeIndex-1;index>=0;index-=1)if(this.isEnabled(this.playlistVideos[index])){this.switchTo(index);return}}onItemClick(event){const button=event.currentTarget,index=Number(button.dataset.index);Number.isInteger(index)&&(this.navigationIndex=index,this.goTo(index))}enabledIndices(){const result=[];for(let index=0;index<this.playlistVideos.length;index+=1)this.isEnabled(this.playlistVideos[index])&&result.push(index);return result}moveNavigation(from,direction){const enabled=this.enabledIndices(),position=enabled.indexOf(from);if(position<0)return;const next=enabled[position+direction];next!==void 0&&this.focusItem(next)}get navigationItem(){const rows=[...this.renderRoot.querySelectorAll('[part~="playlist-item"]')];return rows.find(row=>!row.disabled&&row.getAttribute("aria-current")==="true")??rows.find(row=>!row.disabled)??null}focus(options){this.navigationItem?.focus(options)}blur(){this.navigationItem?.blur()}click(){this.navigationItem?.click()}focusItem(index){this.isEnabled(this.playlistVideos[index])&&(this.navigationIndex=index,this.requestUpdate(),this.updateComplete.then(()=>{this.navigationIndex===index&&this.shadowRoot?.querySelector(`[data-index="${index}"]`)?.focus()}))}onItemKeyDown(event){const button=event.currentTarget,index=Number(button.dataset.index);if(!Number.isInteger(index)||button.disabled)return;const forward=this.effectiveDirection==="rtl"?"ArrowLeft":"ArrowRight",backward=this.effectiveDirection==="rtl"?"ArrowRight":"ArrowLeft";if(event.key==="Enter"||event.key===" ")event.preventDefault(),this.navigationIndex=index,this.goTo(index);else if(event.key==="ArrowDown"||event.key===forward)event.preventDefault(),this.moveNavigation(index,1);else if(event.key==="ArrowUp"||event.key===backward)event.preventDefault(),this.moveNavigation(index,-1);else if(event.key==="Home"){event.preventDefault();const first=this.enabledIndices()[0];first!==void 0&&this.focusItem(first)}else if(event.key==="End"){event.preventDefault();const enabled=this.enabledIndices(),last=enabled[enabled.length-1];last!==void 0&&this.focusItem(last)}}itemTitle(value,index){const title=typeof value=="string"?value.trim():"";if(title)return title;const position=getNumberFormat(this.effectiveLocale).format(index+1);return this.localize("videoPlaylistUntitled",void 0,{position})}renderItem(item,index,current,disabled){const title=this.itemTitle(item.title,index),poster=safeMediaSrc(typeof item.poster=="string"?item.poster:""),duration=finiteRange(typeof item.duration=="number"?item.duration:0,0,0),durationId=`playlist-duration-${index}`;return html`
1
+ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{trueDefaultBooleanConverter}from"../../../internal/converters.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{LyraElement}from"../../../internal/lyra-element.js";import{hostAriaLabel}from"../../../internal/a11y.js";import{activeElementIn}from"../../../internal/active-element.js";import{MAX_NATIVE_PLAYBACK_RATE,MIN_NATIVE_PLAYBACK_RATE}from"../../../internal/media-controller.js";import{finiteRange}from"../../../internal/numbers.js";import{relayNativeEvent}from"../../../internal/native-event-relay.js";import{tag}from"../../../internal/prefix.js";import{safeMediaSrc}from"../../../internal/safe-url.js";import{styles}from"./video-playlist.styles.js";import{LYRA_DEFAULT_videoPlaylistLabel,LYRA_DEFAULT_videoPlaylistUntitled}from"../../../internal/default-strings.generated.js";function safeControls(value){return value==="none"||value==="standard"?value:"full"}function safeRepeat(value){return value==="one"||value==="all"?value:"none"}function sameVideos(left,right){return left.length===right.length&&left.every((video,index)=>video===right[index])}function textTracks(media){const result=[];if(!media)return result;for(let index=0;index<media.textTracks.length;index+=1){const track=media.textTracks[index];track&&result.push(track)}return result}function isSelectableTrack(track){return track.kind==="subtitles"||track.kind==="captions"||track.kind==="descriptions"}function validVolume(value){return typeof value=="number"&&Number.isFinite(value)&&value>=0&&value<=1}function validPlaybackRate(value){return typeof value=="number"&&Number.isFinite(value)&&value>=MIN_NATIVE_PLAYBACK_RATE&&value<=MAX_NATIVE_PLAYBACK_RATE}function formatDuration(seconds,locale){const total=Math.floor(finiteRange(seconds,0,0)),hours=Math.floor(total/3600),minutes=Math.floor(total%3600/60),remaining=total%60,regular=getNumberFormat(locale,{maximumFractionDigits:0,useGrouping:!1}),padded=getNumberFormat(locale,{maximumFractionDigits:0,minimumIntegerDigits:2,useGrouping:!1});return hours>0?`${regular.format(hours)}:${padded.format(minutes)}:${padded.format(remaining)}`:`${regular.format(minutes)}:${padded.format(remaining)}`}function sourceSnapshot(src,type,media){return{src,type,media}}function trackSnapshot(src,kind,srclang,label,isDefault){return{src,kind,srclang,label,default:isDefault}}class LyraVideoPlaylist extends LyraElement{constructor(){super(...arguments),this.controls="full",this.iconLibrary="system",this.autoAdvance=!0,this.repeat="none",this.items=[],this.playlistVideos=[],this.liveChildrenReady=!1,this.activeIndex=-1,this.navigationIndex=-1,this.listeners=new Map,this.lastKnownPlaying=new WeakMap,this.nativeVideos=new WeakMap,this.needsReload=new WeakSet,this.ownedVideoState=new WeakMap,this.preferences={},this.activationGeneration=0,this.reconcileGeneration=0,this.onSlotChange=()=>this.reconcileChildren(),this.onItemFocus=event=>{relayNativeEvent(this,event)},this.onItemBlur=event=>{relayNativeEvent(this,event)}}static{this.defaultStrings={...super.defaultStrings,videoPlaylistLabel:LYRA_DEFAULT_videoPlaylistLabel,videoPlaylistUntitled:LYRA_DEFAULT_videoPlaylistUntitled}}static{this.immutableEventDetails=Object.freeze(["lr-video-change"])}static{this.styles=[LyraElement.styles,styles]}connectedCallback(){super.connectedCallback(),this.observeChildren(),this.hasUpdated?this.scheduleAfterUpdate(()=>this.reconcileChildren(),"video-playlist-reconcile"):this.seedFirstRenderState(()=>{this.directVideos().length>0&&this.reconcileChildren()})}disconnectedCallback(){this.activationGeneration+=1,this.reconcileGeneration+=1,this.pendingPlay=void 0,this.mutationObserver?.disconnect(),this.mutationObserver=void 0;for(const video of this.playlistVideos)this.unbindVideo(video),video.hidden=!0,this.pauseAndUnload(video);super.disconnectedCallback()}willUpdate(changed){super.willUpdate(changed),changed.has("controls")&&(this.controls=safeControls(this.controls)),changed.has("repeat")&&(this.repeat=safeRepeat(this.repeat)),(changed.has("controls")||changed.has("iconLibrary"))&&this.scheduleAfterUpdate(()=>this.reconcileChildren(),"video-playlist-reconcile")}observeChildren(){this.mutationObserver?.disconnect(),this.mutationObserver=void 0;const MutationObserverCtor=this.ownerDocument.defaultView?.MutationObserver;MutationObserverCtor&&(this.mutationObserver=new MutationObserverCtor(()=>{this.scheduleAfterUpdate(()=>{this.reconcileChildren(),this.requestUpdate()},"video-playlist-reconcile")}),this.mutationObserver.observe(this,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["default","inert","kind","label","media","poster","src","srclang","title","type"]}))}directVideos(){const videoTag=tag("video");return[...this.children].filter(child=>child.localName===videoTag)}isEnabled(video){return!video.inert}nearestEnabledIndex(videos,preferred){if(!videos.length)return-1;const start=Math.min(Math.max(preferred,0),videos.length-1);for(let index=start;index<videos.length;index+=1)if(this.isEnabled(videos[index]))return index;for(let index=start-1;index>=0;index-=1)if(this.isEnabled(videos[index]))return index;return-1}reconcileChildren(){if(!this.isConnected)return;const previousVideos=this.playlistVideos,previousActive=this.activeVideo,previousIndex=this.activeIndex,previousNavigation=previousVideos[this.navigationIndex],navigationHadFocus=activeElementIn(this.shadowRoot)?.getAttribute("part")==="playlist-item",videos=this.directVideos();(videos.length>0||this.liveChildrenReady)&&(this.liveChildrenReady=!0);let active=previousActive&&videos.includes(previousActive)&&this.isEnabled(previousActive)?previousActive:void 0,nextIndex=active?videos.indexOf(active):this.nearestEnabledIndex(videos,previousIndex);!active&&nextIndex>=0&&(active=videos[nextIndex]),active||(nextIndex=-1);const activeChanged=active!==previousActive,outgoingWasRemoved=!!(previousActive&&!videos.includes(previousActive)),resumePlayback=activeChanged&&previousActive?outgoingWasRemoved?this.lastKnownPlaying.get(previousActive)??previousActive.getState().playing:previousActive.getState().playing:!1,outgoingPreferences=activeChanged&&previousActive?outgoingWasRemoved?this.capturePreferences(previousActive,this.nativeVideos.get(previousActive)):this.capturePreferences(previousActive):void 0;for(const video of previousVideos)videos.includes(video)||this.releaseVideo(video);for(const video of videos)this.claimVideo(video),this.bindVideo(video);activeChanged&&previousActive?(this.preferences=outgoingPreferences??{},outgoingWasRemoved||this.pauseAndUnload(previousActive),this.activationGeneration+=1):activeChanged&&(this.activationGeneration+=1),this.activeVideo=active,this.activeIndex=nextIndex,sameVideos(previousVideos,videos)||(this.playlistVideos=videos);for(const video of videos){video.controls!==this.controls&&(video.controls=this.controls),video.iconLibrary!==this.iconLibrary&&(video.iconLibrary=this.iconLibrary);const isActive=video===active;video.hidden=!isActive,isActive||this.pauseAndUnload(video)}active?(activeChanged||this.needsReload.has(active))&&this.activateVideo(active,resumePlayback,this.activationGeneration):this.pendingPlay=void 0;const keptNavigation=previousNavigation&&videos.includes(previousNavigation)&&this.isEnabled(previousNavigation)?videos.indexOf(previousNavigation):-1;this.navigationIndex=keptNavigation>=0?keptNavigation:nextIndex,navigationHadFocus&&keptNavigation<0&&this.navigationIndex>=0&&this.focusItem(this.navigationIndex),activeChanged&&previousActive&&active&&this.emitChange(previousIndex,nextIndex,active),this.scheduleChildrenReady(videos)}scheduleChildrenReady(videos){const reconcileGeneration=++this.reconcileGeneration;Promise.all(videos.map(video=>video.updateComplete)).then(()=>{if(!this.isConnected||reconcileGeneration!==this.reconcileGeneration)return;for(const video of this.playlistVideos)this.rememberNativeVideo(video);for(const video of this.playlistVideos)video!==this.activeVideo&&this.pauseAndUnload(video);const active=this.activeVideo;if(!active||!this.needsReload.has(active))return;const shouldPlay=this.pendingPlay?.video===active&&this.pendingPlay.generation===this.activationGeneration;this.activateVideo(active,shouldPlay,this.activationGeneration)})}bindVideo(video){if(this.listeners.has(video))return;const listeners={ended:()=>{this.rememberNativeVideo(video),this.lastKnownPlaying.set(video,!1),this.handleCompletion(video)},error:()=>{this.rememberNativeVideo(video),this.lastKnownPlaying.set(video,!1)},loadedmetadata:()=>{this.rememberNativeVideo(video),this.handleLoadedMetadata(video)},pause:()=>{this.rememberNativeVideo(video),this.lastKnownPlaying.set(video,!1)},play:()=>{this.rememberNativeVideo(video),this.lastKnownPlaying.set(video,!0),video!==this.activeVideo&&this.pauseAndUnload(video)}};this.lastKnownPlaying.set(video,video.getState().playing),this.rememberNativeVideo(video),this.listeners.set(video,listeners),video.addEventListener("ended",listeners.ended),video.addEventListener("error",listeners.error),video.addEventListener("loadedmetadata",listeners.loadedmetadata),video.addEventListener("pause",listeners.pause),video.addEventListener("play",listeners.play)}unbindVideo(video){const listeners=this.listeners.get(video);listeners&&(video.removeEventListener("ended",listeners.ended),video.removeEventListener("error",listeners.error),video.removeEventListener("loadedmetadata",listeners.loadedmetadata),video.removeEventListener("pause",listeners.pause),video.removeEventListener("play",listeners.play),this.listeners.delete(video))}claimVideo(video){this.ownedVideoState.has(video)||this.ownedVideoState.set(video,{controls:video.controls,iconLibrary:video.iconLibrary,hidden:!!video.hidden})}releaseVideo(video){const authored=this.ownedVideoState.get(video);this.unbindVideo(video),this.pauseAndUnload(video),authored&&(video.controls=authored.controls,video.iconLibrary=authored.iconLibrary,video.hidden=authored.hidden,this.ownedVideoState.delete(video),video.isConnected&&video.load())}rememberNativeVideo(video){const native=video.getVideoElement();native&&this.nativeVideos.set(video,native)}pauseAndUnload(video){video.pause(),video.hidden=!0,this.needsReload.add(video);const native=video.getVideoElement();if(!native)return;const mediaChildren=[...native.children].filter(child=>child.localName==="source"||child.localName==="track");if(!(!native.hasAttribute("src")&&mediaChildren.length===0)){native.removeAttribute("src");for(const child of mediaChildren)child.remove();native.load()}}activateVideo(video,shouldPlay,generation){if(video.hidden=!1,!video.getVideoElement()){this.needsReload.add(video),shouldPlay&&(this.pendingPlay={video,generation});return}if(this.rememberNativeVideo(video),video.load(),this.needsReload.delete(video),this.applyPreferences(video,this.preferences),!shouldPlay){this.pendingPlay?.video===video&&(this.pendingPlay=void 0);return}this.pendingPlay=void 0,video.play().catch(()=>{generation!==this.activationGeneration||this.activeVideo})}capturePreferences(video,native=video.getVideoElement()){const state2=video.getState(),preferences={};validVolume(state2.volume)&&(preferences.volume=state2.volume),typeof state2.muted=="boolean"&&(preferences.muted=state2.muted),validPlaybackRate(state2.playbackRate)&&(preferences.playbackRate=state2.playbackRate);const tracks=textTracks(native),showingIndex=tracks.findIndex(track=>isSelectableTrack(track)&&track.mode!=="disabled");if(showingIndex<0)preferences.textTrack=null;else{const track=tracks[showingIndex];preferences.textTrack={index:showingIndex,kind:track.kind,label:track.label,language:track.language}}return preferences}applyPreferences(video,preferences){validVolume(preferences.volume)&&video.setVolume(preferences.volume),validPlaybackRate(preferences.playbackRate)&&video.setPlaybackRate(preferences.playbackRate),typeof preferences.muted=="boolean"&&video.getState().muted!==preferences.muted&&video.toggleMute(),this.applyTextTrackPreference(video.getVideoElement(),preferences.textTrack)}applyTextTrackPreference(native,preference){if(!native||preference===void 0)return;const tracks=textTracks(native);if(preference===null){for(const track of tracks)isSelectableTrack(track)&&(track.mode="disabled");return}const exact=tracks.find(track=>track.kind===preference.kind&&track.label===preference.label&&track.language===preference.language),indexed=tracks[preference.index],selected=exact??(indexed?.kind===preference.kind?indexed:void 0);if(selected)for(const track of tracks)isSelectableTrack(track)&&(track.mode=track===selected?"hidden":"disabled")}handleLoadedMetadata(video){video===this.activeVideo&&(this.applyPreferences(video,this.preferences),this.requestUpdate())}handleCompletion(video){if(video!==this.activeVideo||!this.autoAdvance)return;if(this.repeat==="one"){video.seek(0);const generation=this.activationGeneration;video.play().catch(()=>{generation!==this.activationGeneration||this.activeVideo});return}const nextIndex=this.nearestEnabledIndex(this.playlistVideos,this.activeIndex+1);if(nextIndex>this.activeIndex){this.switchTo(nextIndex,!0);return}if(this.repeat==="all"){const first=this.nearestEnabledIndex(this.playlistVideos,0);if(first>=0&&first!==this.activeIndex)this.switchTo(first,!0);else if(first===this.activeIndex){video.seek(0);const generation=this.activationGeneration;video.play().catch(()=>{generation!==this.activationGeneration||this.activeVideo})}}}snapshotVideo(video){const sources=[],directSrc=video.src.trim();directSrc&&sources.push(sourceSnapshot(directSrc,"",""));const tracks=[];for(const child of video.children)if(child.localName==="source"){const src=child.getAttribute("src")?.trim()??"";src&&sources.push(sourceSnapshot(src,child.getAttribute("type")??"",child.getAttribute("media")??""))}else if(child.localName==="track"){const src=child.getAttribute("src")?.trim()??"";src&&tracks.push(trackSnapshot(src,child.getAttribute("kind")??"",child.getAttribute("srclang")??"",child.getAttribute("label")??"",child.hasAttribute("default")))}return{title:video.title,poster:video.poster,sources,tracks}}emitChange(previousIndex,currentIndex,video){this.emit("lr-video-change",{previousIndex,currentIndex,video:this.snapshotVideo(video)})}switchTo(index,forcePlay=!1){const incoming=this.playlistVideos[index];if(!incoming||!this.isEnabled(incoming))return;const previousIndex=this.activeIndex,outgoing=this.activeVideo;if(incoming===outgoing){if(this.navigationIndex=index,this.requestUpdate(),forcePlay){const generation=this.activationGeneration;incoming.play().catch(()=>{generation!==this.activationGeneration||this.activeVideo})}this.emitChange(previousIndex,index,incoming);return}const wasPlaying=forcePlay||!!outgoing?.getState().playing;outgoing&&(this.preferences=this.capturePreferences(outgoing),this.pauseAndUnload(outgoing)),this.activationGeneration+=1,this.activeVideo=incoming,this.activeIndex=index,this.navigationIndex=index;for(const video of this.playlistVideos){const isActive=video===incoming;video.hidden=!isActive,!isActive&&video!==outgoing&&this.pauseAndUnload(video)}this.activateVideo(incoming,wasPlaying,this.activationGeneration),this.requestUpdate(),this.emitChange(previousIndex,index,incoming)}goTo(index){!Number.isFinite(index)||!Number.isInteger(index)||index<0||index>=this.playlistVideos.length||this.switchTo(index)}next(){const index=this.nearestEnabledIndex(this.playlistVideos,this.activeIndex+1);index>this.activeIndex&&this.switchTo(index)}previous(){for(let index=this.activeIndex-1;index>=0;index-=1)if(this.isEnabled(this.playlistVideos[index])){this.switchTo(index);return}}onItemClick(event){const button=event.currentTarget,index=Number(button.dataset.index);Number.isInteger(index)&&(this.navigationIndex=index,this.goTo(index))}enabledIndices(){const result=[];for(let index=0;index<this.playlistVideos.length;index+=1)this.isEnabled(this.playlistVideos[index])&&result.push(index);return result}moveNavigation(from,direction){const enabled=this.enabledIndices(),position=enabled.indexOf(from);if(position<0)return;const next=enabled[position+direction];next!==void 0&&this.focusItem(next)}get navigationItem(){const rows=[...this.renderRoot.querySelectorAll('[part~="playlist-item"]')];return rows.find(row=>!row.disabled&&row.getAttribute("aria-current")==="true")??rows.find(row=>!row.disabled)??null}focus(options){this.navigationItem?.focus(options)}blur(){this.navigationItem?.blur()}click(){this.navigationItem?.click()}focusItem(index){this.isEnabled(this.playlistVideos[index])&&(this.navigationIndex=index,this.requestUpdate(),this.updateComplete.then(()=>{this.navigationIndex===index&&this.shadowRoot?.querySelector(`[data-index="${index}"]`)?.focus()}))}onItemKeyDown(event){const button=event.currentTarget,index=Number(button.dataset.index);if(!Number.isInteger(index)||button.disabled)return;const forward=this.effectiveDirection==="rtl"?"ArrowLeft":"ArrowRight",backward=this.effectiveDirection==="rtl"?"ArrowRight":"ArrowLeft";if(event.key==="Enter"||event.key===" ")event.preventDefault(),this.navigationIndex=index,this.goTo(index);else if(event.key==="ArrowDown"||event.key===forward)event.preventDefault(),this.moveNavigation(index,1);else if(event.key==="ArrowUp"||event.key===backward)event.preventDefault(),this.moveNavigation(index,-1);else if(event.key==="Home"){event.preventDefault();const first=this.enabledIndices()[0];first!==void 0&&this.focusItem(first)}else if(event.key==="End"){event.preventDefault();const enabled=this.enabledIndices(),last=enabled[enabled.length-1];last!==void 0&&this.focusItem(last)}}itemTitle(value,index){const title=typeof value=="string"?value.trim():"";if(title)return title;const position=getNumberFormat(this.effectiveLocale).format(index+1);return this.localize("videoPlaylistUntitled",void 0,{position})}renderItem(item,index,current,disabled){const title=this.itemTitle(item.title,index),poster=safeMediaSrc(typeof item.poster=="string"?item.poster:""),duration=finiteRange(typeof item.duration=="number"?item.duration:0,0,0),durationId=`playlist-duration-${index}`;return html`
2
2
  <li>
3
3
  <button
4
4
  type="button"
@@ -1 +1 @@
1
- import{css}from"lit";const styles=css`:host{contain-intrinsic-inline-size:var(--lr-size-20rem);color:var(--lr-color-text);display:block;container-type:inline-size}:host([hidden]){display:none}[part~=video-playlist]{grid-template-columns:minmax(0, 2fr) minmax(var(--lr-size-15rem), 1fr);gap:var(--lr-space-m);align-items:start;display:grid}[data-video-stage]{min-inline-size:0}[part=playlist]{max-block-size:var(--lr-size-30rem);gap:var(--lr-space-xs);padding:var(--lr-space-xs);border:var(--lr-border-width-thin) solid var(--lr-color-border);border-radius:var(--lr-radius);background:var(--lr-color-surface);margin:0;list-style:none;display:grid;overflow:auto}[part=playlist-item]{inline-size:100%;min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);grid-template-columns:var(--lr-size-7rem) minmax(0, 1fr);gap:var(--lr-space-s);padding:var(--lr-space-xs);border:var(--lr-border-width-thin) solid transparent;border-radius:var(--lr-radius-xs);color:inherit;font:inherit;text-align:start;cursor:pointer;background:0 0;align-items:center;display:grid}[part=playlist-item]:hover{border-color:var(--lr-color-border-strong);background:color-mix(in oklab, var(--lr-color-surface), var(--lr-color-mix-partner) var(--lr-color-mix-hover))}[part=playlist-item]:active{background:color-mix(in oklab, var(--lr-color-surface), var(--lr-color-mix-partner) var(--lr-color-mix-active))}[part=playlist-item]:focus-visible{outline:var(--lr-focus-ring);outline-offset:var(--lr-focus-ring-offset)}[part=playlist-item]:where([aria-current=true]){border-color:var(--lr-video-playlist-item-current-border-color,var(--lr-color-brand));background:var(--lr-video-playlist-item-current-background,var(--lr-color-brand-fill-quiet))}[part=playlist-item]:where(:disabled){color:var(--lr-color-text-quiet);cursor:not-allowed;opacity:var(--lr-opacity-disabled)}[part=playlist-item]:where(:disabled):hover{background:0 0;border-color:#0000}[part=playlist-thumbnail]{aspect-ratio:16/9;border-radius:var(--lr-radius-xs);background:var(--lr-color-surface-raised);inline-size:100%;display:block;overflow:hidden}[part=playlist-thumbnail] img{object-fit:cover;block-size:100%;inline-size:100%;display:block}[part=playlist-thumbnail] lr-icon{block-size:100%;inline-size:100%;color:var(--lr-color-text-quiet);font-size:var(--lr-font-size-lg);place-items:center;display:grid}[data-item-copy]{gap:var(--lr-space-2xs);min-inline-size:0;display:grid}[part=playlist-title]{min-inline-size:0;color:var(--lr-color-text);font-size:var(--lr-font-size-sm);font-weight:var(--lr-font-weight-semibold);line-height:var(--lr-line-height-snug);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}[part=playlist-duration]{color:var(--lr-color-text-quiet);font-size:var(--lr-font-size-xs);line-height:var(--lr-line-height-normal)}@container (width<=40rem){[part~=video-playlist]{grid-template-columns:minmax(0,1fr)}[part=playlist]{max-block-size:var(--lr-size-18rem)}}`;export{styles};
1
+ import{css}from"lit";const styles=css`:host{contain-intrinsic-inline-size:var(--lr-size-20rem);color:var(--lr-color-text);display:block;container-type:inline-size}:host([hidden]){display:none}[part~=video-playlist]{grid-template-columns:minmax(0, 2fr) minmax(var(--lr-size-15rem), 1fr);gap:var(--lr-space-m);align-items:start;display:grid}[data-video-stage]{min-inline-size:0}[part=playlist]{max-block-size:var(--lr-size-30rem);gap:var(--lr-space-xs);padding:var(--lr-space-xs);border:var(--lr-border-width-thin) solid var(--lr-color-border);border-radius:var(--lr-radius);background:var(--lr-color-surface);margin:0;list-style:none;display:grid;overflow:auto}[part=playlist-item]{inline-size:100%;min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);grid-template-columns:var(--lr-size-7rem) minmax(0, 1fr);gap:var(--lr-space-s);padding:var(--lr-space-xs);border:var(--lr-border-width-thin) solid transparent;border-radius:var(--lr-radius-xs);color:inherit;font:inherit;text-align:start;cursor:pointer;background:0 0;align-items:center;display:grid}[part=playlist-item]:hover{border-color:var(--lr-color-border-strong);background:color-mix(in oklab, var(--lr-color-surface), var(--lr-color-mix-partner) var(--lr-color-mix-hover))}[part=playlist-item]:active{background:color-mix(in oklab, var(--lr-color-surface), var(--lr-color-mix-partner) var(--lr-color-mix-active))}[part=playlist-item]:focus-visible{outline:var(--lr-focus-ring);outline-offset:var(--lr-focus-ring-offset)}[part=playlist-item]:where([aria-current=true]){border-color:var(--lr-video-playlist-item-current-border-color,var(--lr-color-brand));background:var(--lr-video-playlist-item-current-background,var(--lr-color-brand-fill-quiet))}[part=playlist-item]:where(:disabled){color:var(--lr-color-text-quiet);cursor:not-allowed;opacity:var(--lr-opacity-disabled)}[part=playlist-item]:where(:disabled):hover{background:0 0;border-color:#0000}[part=playlist-thumbnail]{aspect-ratio:16/9;border-radius:var(--lr-radius-xs);background:var(--lr-color-surface-raised);inline-size:100%;display:block;overflow:hidden}[part=playlist-thumbnail] img{object-fit:cover;block-size:100%;inline-size:100%;display:block}[part=playlist-thumbnail] lr-icon{block-size:100%;inline-size:100%;color:var(--lr-color-text-quiet);font-size:var(--lr-font-size-lg);place-items:center;display:grid}[data-item-copy]{gap:var(--lr-space-2xs);min-inline-size:0;display:grid}[part=playlist-title]{min-inline-size:0;color:var(--lr-color-text);font-size:var(--lr-font-size-sm);font-weight:var(--lr-font-weight-semibold);line-height:var(--lr-line-height-snug);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}[part=playlist-duration]{color:var(--lr-color-text-quiet);font-size:var(--lr-font-size-xs);line-height:var(--lr-line-height-normal)}@container (inline-size<=40rem){[part~=video-playlist]{grid-template-columns:minmax(0,1fr)}[part=playlist]{max-block-size:var(--lr-size-18rem)}}`;export{styles};
@@ -31,6 +31,12 @@ export type AlertVariant=Exclude<LyraVariant,'brand'> |'primary';export interfac
31
31
  * the same native button as `close-button`.
32
32
  * @csspart icon - The optional inert, aria-hidden icon wrapper.
33
33
  * @csspart message - The alert's main-content wrapper.
34
+ * @cssprop [--lr-alert-close-hover-bg=color-mix(in oklab,transparent,var(--lr-color-mix-partner) var(--lr-color-mix-hover))] -
35
+ * The close button's hover background, scoped so a consumer can retint just this control
36
+ * without touching the shared `--lr-color-mix-partner`/`--lr-color-mix-hover` tokens every
37
+ * other interactive surface in the library also reads.
38
+ * @cssprop [--lr-alert-close-active-bg=color-mix(in oklab,transparent,var(--lr-color-mix-partner) var(--lr-color-mix-active))] -
39
+ * The close button's pressed background, independently scoped from `--lr-alert-close-hover-bg`.
34
40
  * @status stable
35
41
  * @since 8.0.0
36
42
  */
@@ -1 +1 @@
1
- import{css}from"lit";const styles=css`:host{min-inline-size:0;max-inline-size:100%;display:none}:host([open]),:host([data-alert-showing]),:host([data-alert-hiding]){display:block}:host([variant=primary]){--lr-color-fill-quiet:var(--lr-color-brand-fill-quiet);--lr-color-fill-normal:var(--lr-color-brand-fill-normal);--lr-color-fill-loud:var(--lr-color-brand-fill-loud);--lr-color-border-quiet:var(--lr-color-brand-border-quiet);--lr-color-border-normal:var(--lr-color-brand-border-normal);--lr-color-border-loud:var(--lr-color-brand-border-loud);--lr-color-on-quiet:var(--lr-color-brand-on-quiet);--lr-color-on-normal:var(--lr-color-brand-on-normal);--lr-color-on-loud:var(--lr-color-brand-on-loud)}[part=base]{align-items:start;gap:var(--lr-space-s);box-sizing:border-box;inline-size:100%;min-inline-size:0;max-inline-size:100%;padding:var(--lr-space-m);border:var(--lr-border-width-thin) solid var(--lr-color-border-normal);border-radius:var(--lr-radius);background:var(--lr-color-fill-quiet);color:var(--lr-color-on-quiet);box-shadow:var(--lr-shadow-s);opacity:1;transition:opacity var(--lr-duration-fast) var(--lr-easing-standard), transform var(--lr-duration-fast) var(--lr-easing-standard);grid-template-columns:auto minmax(0,1fr) auto;display:grid;position:relative;overflow:hidden;transform:none}[part=base][hidden]{display:none}:host([data-alert-showing]) [part=base],:host([data-alert-hiding]) [part=base]{opacity:0;transform:translateY(var(--lr-size-neg-8px))}[part=icon]{color:var(--lr-color-fill-loud);font-size:var(--lr-font-size-lg);line-height:var(--lr-line-height-none);min-inline-size:0;max-inline-size:var(--lr-icon-button-size);grid-column:1;display:inline-flex;overflow:hidden}[part=icon] ::slotted(*){max-inline-size:100%}[part=icon][hidden]{display:none}[part=message]{overflow-wrap:anywhere;unicode-bidi:plaintext;grid-column:2;min-inline-size:0}[part~=close-button]{min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);margin-block:calc(-1 * var(--lr-space-xs));padding:var(--lr-space-xs);border-radius:var(--lr-radius-pill);color:inherit;font:inherit;cursor:pointer;background:0 0;border:0;grid-column:3;justify-content:center;align-items:center;margin-inline-end:calc(-1 * var(--lr-space-xs));display:inline-flex}[part~=close-button]:where(:hover){background:color-mix(in oklab, transparent, var(--lr-color-mix-partner) var(--lr-color-mix-hover))}[part~=close-button]:where(:active){background:color-mix(in oklab, transparent, var(--lr-color-mix-partner) var(--lr-color-mix-active))}[part~=close-button]:where(:focus-visible){outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:var(--lr-focus-ring-offset)}.countdown{block-size:var(--lr-size-4px);background:var(--lr-color-fill-loud);position:absolute;inset-block-end:0;inset-inline:0;transform:scaleX(1)}@media (prefers-reduced-motion:reduce){[part=base]{transition:none}.countdown{display:none}}`;export{styles};
1
+ import{css}from"lit";const styles=css`:host{min-inline-size:0;max-inline-size:100%;display:none}:host([open]),:host([data-alert-showing]),:host([data-alert-hiding]){display:block}:host([variant=primary]){--lr-color-fill-quiet:var(--lr-color-brand-fill-quiet);--lr-color-fill-normal:var(--lr-color-brand-fill-normal);--lr-color-fill-loud:var(--lr-color-brand-fill-loud);--lr-color-border-quiet:var(--lr-color-brand-border-quiet);--lr-color-border-normal:var(--lr-color-brand-border-normal);--lr-color-border-loud:var(--lr-color-brand-border-loud);--lr-color-on-quiet:var(--lr-color-brand-on-quiet);--lr-color-on-normal:var(--lr-color-brand-on-normal);--lr-color-on-loud:var(--lr-color-brand-on-loud)}[part=base]{align-items:start;gap:var(--lr-space-s);box-sizing:border-box;inline-size:100%;min-inline-size:0;max-inline-size:100%;padding:var(--lr-space-m);border:var(--lr-border-width-thin) solid var(--lr-color-border-normal);border-radius:var(--lr-radius);background:var(--lr-color-fill-quiet);color:var(--lr-color-on-quiet);box-shadow:var(--lr-shadow-s);opacity:1;transition:opacity var(--lr-duration-fast) var(--lr-easing-standard), transform var(--lr-duration-fast) var(--lr-easing-standard);grid-template-columns:auto minmax(0,1fr) auto;display:grid;position:relative;overflow:hidden;transform:none}[part=base][hidden]{display:none}:host([data-alert-showing]) [part=base],:host([data-alert-hiding]) [part=base]{opacity:0;transform:translateY(var(--lr-size-neg-8px))}[part=icon]{color:var(--lr-color-fill-loud);font-size:var(--lr-font-size-lg);line-height:var(--lr-line-height-none);min-inline-size:0;max-inline-size:var(--lr-icon-button-size);grid-column:1;display:inline-flex;overflow:hidden}[part=icon] ::slotted(*){max-inline-size:100%}[part=icon][hidden]{display:none}[part=message]{overflow-wrap:anywhere;unicode-bidi:plaintext;grid-column:2;min-inline-size:0}[part~=close-button]{min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);margin-block:calc(-1 * var(--lr-space-xs));padding:var(--lr-space-xs);border-radius:var(--lr-radius-pill);color:inherit;font:inherit;cursor:pointer;background:0 0;border:0;grid-column:3;justify-content:center;align-items:center;margin-inline-end:calc(-1 * var(--lr-space-xs));display:inline-flex}[part~=close-button]:where(:hover){background:var(--lr-alert-close-hover-bg,color-mix(in oklab, transparent, var(--lr-color-mix-partner) var(--lr-color-mix-hover)))}[part~=close-button]:where(:active){background:var(--lr-alert-close-active-bg,color-mix(in oklab, transparent, var(--lr-color-mix-partner) var(--lr-color-mix-active)))}[part~=close-button]:where(:focus-visible){outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:var(--lr-focus-ring-offset)}.countdown{block-size:var(--lr-size-4px);background:var(--lr-color-fill-loud);position:absolute;inset-block-end:0;inset-inline:0;transform:scaleX(1)}@media (prefers-reduced-motion:reduce){[part=base]{transition:none}.countdown{display:none}}`;export{styles};
@@ -1,6 +1,6 @@
1
- var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property}from"lit/decorators.js";import{acquireAnnouncementSink}from"../../../internal/announcer.js";import{isAccessibilityVisible}from"../../../internal/accessibility-visibility.js";import{composedAccessibilityText}from"../../../internal/announcement-text.js";import{LyraElement}from"../../../internal/lyra-element.js";import{resolveHeadingLevel}from"../../../internal/heading-level.js";import{SlotPresenceController}from"../../../internal/slot-presence-controller.js";import{hasRealContent}from"../../../internal/a11y.js";import{styles}from"./empty.styles.js";class LyraEmpty extends LyraElement{constructor(){super(...arguments),this.heading="",this.headingLevel="3",this.description="",this.compact=!1,this.slotPresence=new SlotPresenceController(this),this.announcementsArmed=!1,this.announcementGeneration=0,this.lastAnnouncementText="",this.onForwardedSlotChange=event=>{const slot=event.target;this.announcementForwardingSlots().includes(slot)&&(this.observeAnnouncementContent(),this.scheduleAnnouncement())}}static{this.styles=[LyraElement.styles,styles]}connectedCallback(){super.connectedCallback(),this.addEventListener("slotchange",this.onForwardedSlotChange),this.announcementSink??=acquireAnnouncementSink("polite",{document:this.ownerDocument,source:this}),this.announcementsArmed=!1,this.lastAnnouncementText="";const generation=++this.announcementGeneration,MutationObserverCtor=this.ownerDocument.defaultView?.MutationObserver;MutationObserverCtor&&(this.contentObserver=new MutationObserverCtor(()=>{this.observeAnnouncementContent(),this.scheduleAnnouncement()}),this.observeAnnouncementContent()),this.updateComplete.then(()=>{!this.isConnected||generation!==this.announcementGeneration||(this.lastAnnouncementText=this.announcementText(),this.announcementsArmed=!0)})}disconnectedCallback(){this.announcementGeneration+=1,this.contentObserver?.disconnect(),this.contentObserver=void 0,this.removeEventListener("slotchange",this.onForwardedSlotChange),this.announcementSink?.release(),this.announcementSink=void 0,this.announcementsArmed=!1,this.lastAnnouncementText="",super.disconnectedCallback()}updated(changed){super.updated(changed),this.announcementsArmed&&(changed.has("heading")||changed.has("description"))&&this.announceCurrentContent()}firstUpdated(changed){super.firstUpdated(changed),this.updateBrowserDerivedState(()=>{this.reconcileSlotHidden(this.shadowRoot.querySelector("slot:not([name])"),this.shadowRoot.querySelector('[part="icon"]')),this.reconcileSlotHidden(this.shadowRoot.querySelector('slot[name="actions"]'),this.shadowRoot.querySelector('[part="actions"]')),this.reconcileSlotHidden(this.shadowRoot.querySelector('slot[name="heading"]'),this.shadowRoot.querySelector('[part="heading"]'),this.heading.length>0),this.reconcileSlotHidden(this.shadowRoot.querySelector('slot[name="description"]'),this.shadowRoot.querySelector('[part="description"]'),this.description.length>0)})}reconcileSlotHidden(slot,wrapper,hasFallbackContent=!1){wrapper.toggleAttribute("hidden",!hasFallbackContent&&!hasRealContent(slot.assignedNodes({flatten:!0})))}announcementObservationOptions(){return{attributes:!0,attributeFilter:["alt","aria-hidden","aria-label","class","hidden","inert","open","slot","style"],childList:!0,characterData:!0,subtree:!0}}announcementForwardingSlots(){return Array.from(this.querySelectorAll("slot")).filter(slot=>{let top=slot;for(;top.parentNode&&top.parentNode!==this;)top=top.parentNode;if(top.parentNode!==this||top.nodeType!==1)return!1;const slotName=top.getAttribute("slot");return slotName==="heading"||slotName==="description"})}observeAnnouncementContent(){const observer=this.contentObserver;if(!observer)return;observer.disconnect();const options=this.announcementObservationOptions();observer.observe(this,options);for(const slot of this.announcementForwardingSlots())if(slot.assignedNodes().length!==0)for(const assigned of slot.assignedNodes({flatten:!0}))observer.observe(assigned,options)}scheduleAnnouncement(){if(!this.announcementsArmed)return;const headingSlot=this.shadowRoot?.querySelector('slot[name="heading"]'),headingWrapper=this.shadowRoot?.querySelector('[part="heading"]');headingSlot&&headingWrapper&&this.reconcileSlotHidden(headingSlot,headingWrapper,this.heading.length>0);const descriptionSlot=this.shadowRoot?.querySelector('slot[name="description"]'),descriptionWrapper=this.shadowRoot?.querySelector('[part="description"]');descriptionSlot&&descriptionWrapper&&this.reconcileSlotHidden(descriptionSlot,descriptionWrapper,this.description.length>0),this.announceCurrentContent()}slotContent(name){const selector=name?`slot[name="${name}"]`:"slot:not([name])",slot=this.shadowRoot?.querySelector(selector);return{assigned:(slot?.assignedNodes()??[]).length>0,text:(slot?.assignedNodes({flatten:!0})??[]).map(node=>composedAccessibilityText(node)).join(" ")}}announcementText(){if(!isAccessibilityVisible(this))return"";const headingSlot=this.slotContent("heading"),descriptionSlot=this.slotContent("description");return[headingSlot.assigned?headingSlot.text:this.heading,descriptionSlot.assigned?descriptionSlot.text:this.description].join(" ").replace(/\s+/g," ").trim()}announceCurrentContent(){if(!this.announcementsArmed||!this.isConnected)return;const text=this.announcementText();text!==this.lastAnnouncementText&&(this.lastAnnouncementText=text,text&&this.announcementSink?.announce(text))}render(){const hasHeading=this.slotPresence.has("heading")||(this.heading??"").length>0,hasDescription=this.slotPresence.has("description")||(this.description??"").length>0,headingLevel=resolveHeadingLevel(this.headingLevel);return html`
1
+ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property}from"lit/decorators.js";import{acquireAnnouncementSink}from"../../../internal/announcer.js";import{renderInertPresentation}from"../../../internal/inert-presentation.js";import{isAccessibilityVisible}from"../../../internal/accessibility-visibility.js";import{composedAccessibilityText}from"../../../internal/announcement-text.js";import{LyraElement}from"../../../internal/lyra-element.js";import{resolveHeadingLevel}from"../../../internal/heading-level.js";import{SlotPresenceController}from"../../../internal/slot-presence-controller.js";import{hasRealContent}from"../../../internal/a11y.js";import{styles}from"./empty.styles.js";class LyraEmpty extends LyraElement{constructor(){super(...arguments),this.heading="",this.headingLevel="3",this.description="",this.compact=!1,this.slotPresence=new SlotPresenceController(this),this.announcementsArmed=!1,this.announcementGeneration=0,this.lastAnnouncementText="",this.onForwardedSlotChange=event=>{const slot=event.target;this.announcementForwardingSlots().includes(slot)&&(this.observeAnnouncementContent(),this.scheduleAnnouncement())}}static{this.styles=[LyraElement.styles,styles]}connectedCallback(){super.connectedCallback(),this.addEventListener("slotchange",this.onForwardedSlotChange),this.announcementSink??=acquireAnnouncementSink("polite",{document:this.ownerDocument,source:this}),this.announcementsArmed=!1,this.lastAnnouncementText="";const generation=++this.announcementGeneration,MutationObserverCtor=this.ownerDocument.defaultView?.MutationObserver;MutationObserverCtor&&(this.contentObserver=new MutationObserverCtor(()=>{this.observeAnnouncementContent(),this.scheduleAnnouncement()}),this.observeAnnouncementContent()),this.updateComplete.then(()=>{!this.isConnected||generation!==this.announcementGeneration||(this.lastAnnouncementText=this.announcementText(),this.announcementsArmed=!0)})}disconnectedCallback(){this.announcementGeneration+=1,this.contentObserver?.disconnect(),this.contentObserver=void 0,this.removeEventListener("slotchange",this.onForwardedSlotChange),this.announcementSink?.release(),this.announcementSink=void 0,this.announcementsArmed=!1,this.lastAnnouncementText="",super.disconnectedCallback()}updated(changed){super.updated(changed),this.announcementsArmed&&(changed.has("heading")||changed.has("description"))&&this.announceCurrentContent()}firstUpdated(changed){super.firstUpdated(changed),this.updateBrowserDerivedState(()=>{this.reconcileSlotHidden(this.shadowRoot.querySelector("slot:not([name])"),this.shadowRoot.querySelector('[part="icon"]')),this.reconcileSlotHidden(this.shadowRoot.querySelector('slot[name="actions"]'),this.shadowRoot.querySelector('[part="actions"]')),this.reconcileSlotHidden(this.shadowRoot.querySelector('slot[name="heading"]'),this.shadowRoot.querySelector('[part="heading"]'),this.heading.length>0),this.reconcileSlotHidden(this.shadowRoot.querySelector('slot[name="description"]'),this.shadowRoot.querySelector('[part="description"]'),this.description.length>0)})}reconcileSlotHidden(slot,wrapper,hasFallbackContent=!1){wrapper.toggleAttribute("hidden",!hasFallbackContent&&!hasRealContent(slot.assignedNodes({flatten:!0})))}announcementObservationOptions(){return{attributes:!0,attributeFilter:["alt","aria-hidden","aria-label","class","hidden","inert","open","slot","style"],childList:!0,characterData:!0,subtree:!0}}announcementForwardingSlots(){return Array.from(this.querySelectorAll("slot")).filter(slot=>{let top=slot;for(;top.parentNode&&top.parentNode!==this;)top=top.parentNode;if(top.parentNode!==this||top.nodeType!==1)return!1;const slotName=top.getAttribute("slot");return slotName==="heading"||slotName==="description"})}observeAnnouncementContent(){const observer=this.contentObserver;if(!observer)return;observer.disconnect();const options=this.announcementObservationOptions();observer.observe(this,options);for(const slot of this.announcementForwardingSlots())if(slot.assignedNodes().length!==0)for(const assigned of slot.assignedNodes({flatten:!0}))observer.observe(assigned,options)}scheduleAnnouncement(){if(!this.announcementsArmed)return;const headingSlot=this.shadowRoot?.querySelector('slot[name="heading"]'),headingWrapper=this.shadowRoot?.querySelector('[part="heading"]');headingSlot&&headingWrapper&&this.reconcileSlotHidden(headingSlot,headingWrapper,this.heading.length>0);const descriptionSlot=this.shadowRoot?.querySelector('slot[name="description"]'),descriptionWrapper=this.shadowRoot?.querySelector('[part="description"]');descriptionSlot&&descriptionWrapper&&this.reconcileSlotHidden(descriptionSlot,descriptionWrapper,this.description.length>0),this.announceCurrentContent()}slotContent(name){const selector=name?`slot[name="${name}"]`:"slot:not([name])",slot=this.shadowRoot?.querySelector(selector);return{assigned:(slot?.assignedNodes()??[]).length>0,text:(slot?.assignedNodes({flatten:!0})??[]).map(node=>composedAccessibilityText(node)).join(" ")}}announcementText(){if(!isAccessibilityVisible(this))return"";const headingSlot=this.slotContent("heading"),descriptionSlot=this.slotContent("description");return[headingSlot.assigned?headingSlot.text:this.heading,descriptionSlot.assigned?descriptionSlot.text:this.description].join(" ").replace(/\s+/g," ").trim()}announceCurrentContent(){if(!this.announcementsArmed||!this.isConnected)return;const text=this.announcementText();text!==this.lastAnnouncementText&&(this.lastAnnouncementText=text,text&&this.announcementSink?.announce(text))}render(){const hasHeading=this.slotPresence.has("heading")||(this.heading??"").length>0,hasDescription=this.slotPresence.has("description")||(this.description??"").length>0,headingLevel=resolveHeadingLevel(this.headingLevel);return html`
2
2
  <div part="base">
3
- <div part="icon" ?hidden=${!this.slotPresence.has()}><slot></slot></div>
3
+ ${renderInertPresentation(html`<slot></slot>`,{part:"icon",hidden:!this.slotPresence.has()})}
4
4
  <p
5
5
  part="heading"
6
6
  role=${headingLevel?"heading":nothing}
@@ -1 +1 @@
1
- import{css}from"lit";const styles=css`:host{vertical-align:middle;max-inline-size:100%;display:inline-flex}[part=base]{overflow-wrap:anywhere;min-inline-size:0;max-inline-size:100%;font-family:var(--lr-font);font-size:var(--lr-font-size-sm);line-height:var(--lr-line-height-snug);color:var(--lr-color-text-quiet);flex-wrap:wrap;align-items:center;display:inline-flex}[part=key]{box-sizing:border-box;min-inline-size:var(--lr-size-1-5em);overflow-wrap:anywhere;max-inline-size:100%;padding:var(--lr-size-0-0625rem) var(--lr-space-xs);border:var(--lr-border-width-thin) solid var(--lr-color-border);border-radius:calc(var(--lr-radius) * .6);background:var(--lr-color-surface);color:var(--lr-color-text);font-weight:var(--lr-font-weight-medium);box-shadow:inset 0 var(--lr-size-neg-1px) 0 var(--lr-color-border);justify-content:center;align-items:center;display:inline-flex}.sep{margin-inline:var(--lr-size-0-1875rem);color:var(--lr-color-text-quiet);font-size:var(--lr-size-0-75em);user-select:none}::slotted(*){overflow-wrap:anywhere;vertical-align:middle;min-inline-size:0;max-inline-size:100%}`;export{styles};
1
+ import{css}from"lit";const styles=css`:host{vertical-align:middle;max-inline-size:100%;display:inline-flex}[part=base]{overflow-wrap:anywhere;min-inline-size:0;max-inline-size:100%;font-family:var(--lr-font);font-size:var(--lr-font-size-sm);line-height:var(--lr-line-height-snug);color:var(--lr-color-text-quiet);flex-wrap:wrap;align-items:center;display:inline-flex}[part=key]{box-sizing:border-box;min-inline-size:var(--lr-size-1-5em);overflow-wrap:anywhere;max-inline-size:100%;padding:var(--lr-size-0-0625rem) var(--lr-space-xs);border:var(--lr-border-width-thin) solid var(--lr-color-border);border-radius:calc(var(--lr-radius) * .6);background:var(--lr-color-surface);color:var(--lr-color-text);font-weight:var(--lr-font-weight-medium);box-shadow:inset 0 calc(-1 * var(--lr-border-width-thin)) 0 var(--lr-color-border);justify-content:center;align-items:center;display:inline-flex}.sep{margin-inline:var(--lr-size-0-1875rem);color:var(--lr-color-text-quiet);font-size:var(--lr-size-0-75em);user-select:none}::slotted(*){overflow-wrap:anywhere;vertical-align:middle;min-inline-size:0;max-inline-size:100%}`;export{styles};
@@ -17,7 +17,10 @@ import{type TemplateResult}from'lit';import{LyraElement}from'../../../internal/l
17
17
  * @csspart indicator - The SVG indicator.
18
18
  * @csspart label - The center label.
19
19
  * @cssprop [--lr-progress-ring-size=var(--lr-size-2-5rem)] - Outer diameter of the ring.
20
- * @cssprop [--lr-progress-ring-track-width=var(--lr-size-4px)] - Track stroke width.
20
+ * @cssprop [--lr-progress-ring-track-width=var(--lr-theme-border-width-thick,var(--lr-size-4px))] - Track stroke
21
+ * width. Bridges the shared border-width theme input directly (not the `--lr-border-width-*`
22
+ * alias, whose own literal default is a different value) so retuning it moves this ring's
23
+ * stroke the same way it moves every other bordered/ringed surface in the family.
21
24
  * @cssprop [--lr-progress-ring-track-color=var(--lr-color-brand-quiet)] - Track stroke color.
22
25
  * @cssprop [--lr-progress-ring-indicator-width=var(--lr-progress-ring-track-width)] - Indicator stroke width.
23
26
  * @cssprop [--lr-progress-ring-indicator-color=var(--lr-progress-ring-indicator-variant-color)] -
@@ -1 +1 @@
1
- import{css}from"lit";const styles=css`:host{color:var(--lr-color-brand);--_lr-progress-indicator-variant-color:var(--lr-color-brand);display:block}:host([variant]){--_lr-progress-indicator-variant-color:var(--lr-color-fill-loud)}[part~=base]{display:block}[part=track]{inline-size:100%;block-size:var(--lr-progress-track-height,var(--lr-progress-height,var(--track-height,var(--height,var(--lr-size-1rem)))));border-radius:var(--lr-radius-pill);background:var(--lr-progress-track-color,var(--track-color,var(--lr-color-brand-quiet)));overflow:hidden}[part=indicator]{border-radius:inherit;background:var(--lr-progress-indicator-color,var(--indicator-color,var(--lr-progress-indicator-variant-color,var(--_lr-progress-indicator-variant-color))));block-size:100%;transition:inline-size var(--lr-transition-base)}:host([indeterminate]) [part=indicator]{animation:lr-progress-slide var(--lr-progress-duration,var(--lr-transition-ambient)) infinite alternate}[part=label]{justify-content:space-between;gap:var(--lr-space-s);overflow-wrap:anywhere;min-inline-size:0;color:var(--lr-progress-label-color,var(--label-color,var(--lr-color-text)));font-size:var(--lr-font-size-sm);flex-wrap:wrap;margin-block-end:var(--lr-space-xs);display:flex}[part=label][hidden]{display:none}@keyframes lr-progress-slide{0%{transform:translate(-100%)}to{transform:translate(250%)}}:host([indeterminate]:dir(rtl)) [part=indicator]{animation-name:lr-progress-slide-rtl}@keyframes lr-progress-slide-rtl{0%{transform:translate(100%)}to{transform:translate(-250%)}}@media (prefers-reduced-motion:reduce){[part=indicator]{transition:none;animation:none!important}}`,ringStyles=css`:host{color:var(--lr-color-brand);--_lr-progress-ring-indicator-variant-color:var(--lr-color-brand);display:inline-block}:host([variant]){--_lr-progress-ring-indicator-variant-color:var(--lr-color-fill-loud)}[part~=base]{inline-size:var(--lr-progress-ring-size,var(--size,var(--lr-size-2-5rem)));block-size:var(--lr-progress-ring-size,var(--size,var(--lr-size-2-5rem)));justify-content:center;align-items:center;display:inline-flex;position:relative}svg{block-size:100%;inline-size:100%;transform:rotate(-90deg)}circle{fill:none;stroke-linecap:round}[part=track]{stroke:var(--lr-progress-ring-track-color,var(--track-color,var(--lr-color-brand-quiet)));stroke-width:var(--lr-progress-ring-track-width,var(--track-width,var(--lr-size-4px)))}[part=indicator]{stroke:var(--lr-progress-ring-indicator-color,var(--indicator-color,var(--lr-progress-ring-indicator-variant-color,var(--_lr-progress-ring-indicator-variant-color))));stroke-width:var(--lr-progress-ring-indicator-width,var(--indicator-width,var(--lr-progress-ring-track-width,var(--track-width,var(--lr-size-4px)))));transition:stroke-dashoffset var(--lr-progress-ring-indicator-transition-duration,var(--indicator-transition-duration,var(--lr-transition-base)))}:host([indeterminate]) [part=indicator]{transform-box:fill-box;transform-origin:50%;animation:lr-progress-ring-spin var(--lr-progress-duration,var(--lr-transition-ambient)) infinite}[part=label]{padding-inline:var(--lr-space-2xs);text-align:center;text-overflow:ellipsis;white-space:nowrap;color:var(--lr-color-text);font-size:var(--lr-font-size-sm);position:absolute;inset-inline:0;overflow:hidden}@keyframes lr-progress-ring-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){[part=indicator]{transition:none;animation:none!important}}`;export{ringStyles,styles};
1
+ import{css}from"lit";const styles=css`:host{color:var(--lr-color-brand);--_lr-progress-indicator-variant-color:var(--lr-color-brand);display:block}:host([variant]){--_lr-progress-indicator-variant-color:var(--lr-color-fill-loud)}[part~=base]{display:block}[part=track]{inline-size:100%;block-size:var(--lr-progress-track-height,var(--lr-progress-height,var(--track-height,var(--height,var(--lr-size-1rem)))));border-radius:var(--lr-radius-pill);background:var(--lr-progress-track-color,var(--track-color,var(--lr-color-brand-quiet)));overflow:hidden}[part=indicator]{border-radius:inherit;background:var(--lr-progress-indicator-color,var(--indicator-color,var(--lr-progress-indicator-variant-color,var(--_lr-progress-indicator-variant-color))));block-size:100%;transition:inline-size var(--lr-transition-base)}:host([indeterminate]) [part=indicator]{animation:lr-progress-slide var(--lr-progress-duration,var(--lr-transition-ambient)) infinite alternate}[part=label]{justify-content:space-between;gap:var(--lr-space-s);overflow-wrap:anywhere;min-inline-size:0;color:var(--lr-progress-label-color,var(--label-color,var(--lr-color-text)));font-size:var(--lr-font-size-sm);flex-wrap:wrap;margin-block-end:var(--lr-space-xs);display:flex}[part=label][hidden]{display:none}@keyframes lr-progress-slide{0%{transform:translate(-100%)}to{transform:translate(250%)}}:host([indeterminate]:dir(rtl)) [part=indicator]{animation-name:lr-progress-slide-rtl}@keyframes lr-progress-slide-rtl{0%{transform:translate(100%)}to{transform:translate(-250%)}}@media (prefers-reduced-motion:reduce){[part=indicator]{transition:none;animation:none!important}}`,ringStyles=css`:host{color:var(--lr-color-brand);--_lr-progress-ring-indicator-variant-color:var(--lr-color-brand);display:inline-block}:host([variant]){--_lr-progress-ring-indicator-variant-color:var(--lr-color-fill-loud)}[part~=base]{inline-size:var(--lr-progress-ring-size,var(--size,var(--lr-size-2-5rem)));block-size:var(--lr-progress-ring-size,var(--size,var(--lr-size-2-5rem)));justify-content:center;align-items:center;display:inline-flex;position:relative}svg{block-size:100%;inline-size:100%;transform:rotate(-90deg)}circle{fill:none;stroke-linecap:round}[part=track]{stroke:var(--lr-progress-ring-track-color,var(--track-color,var(--lr-color-brand-quiet)));stroke-width:var(--lr-progress-ring-track-width,var(--track-width,var(--lr-theme-border-width-thick,var(--lr-size-4px))))}[part=indicator]{stroke:var(--lr-progress-ring-indicator-color,var(--indicator-color,var(--lr-progress-ring-indicator-variant-color,var(--_lr-progress-ring-indicator-variant-color))));stroke-width:var(--lr-progress-ring-indicator-width,var(--indicator-width,var(--lr-progress-ring-track-width,var(--track-width,var(--lr-theme-border-width-thick,var(--lr-size-4px))))));transition:stroke-dashoffset var(--lr-progress-ring-indicator-transition-duration,var(--indicator-transition-duration,var(--lr-transition-base)))}:host([indeterminate]) [part=indicator]{transform-box:fill-box;transform-origin:50%;animation:lr-progress-ring-spin var(--lr-progress-duration,var(--lr-transition-ambient)) infinite}[part=label]{padding-inline:var(--lr-space-2xs);text-align:center;text-overflow:ellipsis;white-space:nowrap;color:var(--lr-color-text);font-size:var(--lr-font-size-sm);position:absolute;inset-inline:0;overflow:hidden}@keyframes lr-progress-ring-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){[part=indicator]{transition:none;animation:none!important}}`;export{ringStyles,styles};
@@ -1 +1 @@
1
- import{css}from"lit";const styles=css`:host{z-index:var(--lr-layer-toast);--_lr-toast-gap:var(--gap,var(--lr-space-s));--_lr-toast-width:var(--width,var(--lr-size-28rem));pointer-events:none;display:grid;position:fixed;inset-block-start:max(var(--lr-space-l), var(--lr-safe-area-top));inset-block-end:max(var(--lr-space-l), var(--lr-safe-area-bottom));inset-inline-start:max(var(--lr-space-l), var(--lr-safe-area-inline-start));inset-inline-end:max(var(--lr-space-l), var(--lr-safe-area-inline-end))}[part=stack]{gap:var(--lr-toast-gap,var(--_lr-toast-gap));inline-size:min(var(--lr-toast-width,var(--_lr-toast-width)), 100%);overscroll-behavior:contain;flex-direction:column;min-block-size:0;max-block-size:100%;max-inline-size:100%;display:flex;overflow-y:auto}::slotted(*){pointer-events:auto}::slotted([data-toast-queued]){pointer-events:none;display:none!important}:host([placement^=top]) [part=stack]{align-self:start}:host([placement^=bottom]) [part=stack]{flex-direction:column-reverse;align-self:end}:host([placement$=start]) [part=stack]{justify-self:start}:host([placement$=center]) [part=stack]{justify-self:center}:host([placement$=end]) [part=stack]{justify-self:end}`;export{styles};
1
+ import{css}from"lit";const styles=css`:host{z-index:var(--lr-layer-toast);--_lr-toast-gap:var(--gap,var(--lr-space-s));--_lr-toast-width:var(--width,var(--lr-size-28rem));pointer-events:none;display:grid;position:fixed;inset-block-start:max(var(--lr-space-l), var(--lr-safe-area-top));inset-block-end:max(var(--lr-space-l), var(--lr-safe-area-bottom));inset-inline-start:max(var(--lr-space-l), var(--lr-safe-area-inline-start));inset-inline-end:max(var(--lr-space-l), var(--lr-safe-area-inline-end))}[part=stack]{gap:var(--lr-toast-gap,var(--_lr-toast-gap));inline-size:min(var(--lr-toast-width,var(--_lr-toast-width)), 100%);overscroll-behavior:contain;flex-direction:column;min-block-size:0;max-block-size:100%;max-inline-size:100%;display:flex;overflow:hidden auto}::slotted(*){pointer-events:auto}::slotted([data-toast-queued]){pointer-events:none;display:none!important}:host([placement^=top]) [part=stack]{align-self:start}:host([placement^=bottom]) [part=stack]{flex-direction:column-reverse;align-self:end}:host([placement$=start]) [part=stack]{justify-self:start}:host([placement$=center]) [part=stack]{justify-self:center}:host([placement$=end]) [part=stack]{justify-self:end}`;export{styles};
@@ -1 +1 @@
1
- const HULL_STROKE_WIDTH=48,MIN_PICK_TARGET_PX=24,PICK_RASTER_GUARD_PX=2,LABEL_HALO_WIDTH=3,EXPAND_BADGE_R=5,EXPAND_BADGE_OFFSET=Math.SQRT1_2;function pathForShape(x,y,r,shape){const path=new Path2D;if(shape==="circle")return path.arc(x,y,r,0,Math.PI*2),path;const s=r*Math.sqrt(Math.PI)/2;if(shape==="square")return path.rect(x-s,y-s,s*2,s*2),path;const d=s*Math.SQRT2;return path.moveTo(x,y-d),path.lineTo(x+d,y),path.lineTo(x,y+d),path.lineTo(x-d,y),path.closePath(),path}function drawArrowhead(ctx,link){const dx=link.x2-link.x1,dy=link.y2-link.y1,len=Math.hypot(dx,dy)||1,ux=dx/len,uy=dy/len,size=Math.max(6,link.width*3),bx=link.x2-ux*size,by=link.y2-uy*size,px=-uy,py=ux;ctx.beginPath(),ctx.moveTo(link.x2,link.y2),ctx.lineTo(bx+px*size*.4,by+py*size*.4),ctx.lineTo(bx-px*size*.4,by-py*size*.4),ctx.closePath(),ctx.fillStyle=ctx.strokeStyle,ctx.fill()}function drawRing(ctx,ring,color){ctx.strokeStyle=color,ctx.lineWidth=2,ctx.beginPath(),ctx.arc(ring.x,ring.y,ring.r,0,Math.PI*2),ctx.stroke()}function drawKeyboardFocusCue(ctx,scene){if(ctx.strokeStyle=scene.haloColor,ctx.setLineDash([4,3]),scene.keyboardFocusLink){const link=scene.keyboardFocusLink;ctx.lineWidth=Math.max(4,link.width+4),ctx.beginPath(),ctx.moveTo(link.x1,link.y1),ctx.lineTo(link.x2,link.y2),ctx.stroke()}scene.keyboardFocusHull&&(ctx.lineWidth=4,ctx.stroke(new Path2D(scene.keyboardFocusHull.d))),ctx.setLineDash([]),scene.keyboardFocusRing&&drawRing(ctx,scene.keyboardFocusRing,scene.haloColor)}function drawGraphScene(ctx,camera,scene){ctx.save(),ctx.transform(camera.k,0,0,camera.k,camera.x,camera.y);const hullOpacity=scene.hullOpacity??.12;for(const hull of scene.hulls){const path=new Path2D(hull.d);ctx.globalAlpha=hullOpacity,ctx.fillStyle=hull.fill,ctx.strokeStyle=hull.fill,ctx.lineWidth=48,ctx.lineJoin="round",ctx.lineCap="round",ctx.fill(path),ctx.stroke(path),ctx.globalAlpha=1}const dimmedOpacity=scene.dimmedOpacity??1;for(const link of scene.links)link.width<=0||(ctx.strokeStyle=link.selected?scene.selectedColor:link.color,ctx.lineWidth=link.width,ctx.setLineDash(link.dash?[...link.dash]:[]),ctx.globalAlpha=link.dimmed?dimmedOpacity:1,ctx.beginPath(),ctx.moveTo(link.x1,link.y1),ctx.lineTo(link.x2,link.y2),ctx.stroke(),link.directed&&drawArrowhead(ctx,link));if(ctx.globalAlpha=1,ctx.setLineDash([]),scene.edgeLabels.length){ctx.font=scene.font,ctx.textAlign="center",ctx.textBaseline="middle",ctx.lineWidth=3;for(const label of scene.edgeLabels)ctx.strokeStyle=scene.labelHaloColor,ctx.strokeText(label.text,label.x,label.y),ctx.fillStyle=scene.labelColor,ctx.fillText(label.text,label.x,label.y)}for(const node of scene.nodes){const path=pathForShape(node.x,node.y,node.r,node.shape);ctx.globalAlpha=node.dimmed?dimmedOpacity:1,ctx.fillStyle=node.fill,ctx.fill(path),node.selected&&(ctx.strokeStyle=scene.selectedColor,ctx.lineWidth=2,ctx.stroke(path))}if(ctx.globalAlpha=1,scene.showNodeLabels&&scene.nodeLabels.length){ctx.font=scene.font,ctx.textAlign="left",ctx.textBaseline="middle",ctx.fillStyle=scene.labelColor;for(const label of scene.nodeLabels)ctx.fillText(label.text,label.x,label.y)}const expandIndicators=scene.expandIndicators??[];if(expandIndicators.length){ctx.lineWidth=1;for(const indicator of expandIndicators){const bx=indicator.x+indicator.r*EXPAND_BADGE_OFFSET,by=indicator.y-indicator.r*EXPAND_BADGE_OFFSET,path=new Path2D;path.arc(bx,by,5,0,Math.PI*2),ctx.fillStyle=scene.expandBadgeFill??"",ctx.fill(path),ctx.strokeStyle=scene.expandBadgeStroke??"",ctx.stroke(path),ctx.strokeStyle=scene.labelColor,ctx.beginPath(),ctx.moveTo(bx-5/2,by),ctx.lineTo(bx+5/2,by),ctx.moveTo(bx,by-5/2),ctx.lineTo(bx,by+5/2),ctx.stroke()}}scene.focusHalo&&drawRing(ctx,scene.focusHalo,scene.haloColor),drawKeyboardFocusCue(ctx,scene),ctx.restore()}function indexToPickColor(index){const v=index+1;return`rgb(${v>>16&255},${v>>8&255},${v&255})`}function pickColorToIndex(r,g,b){return(r<<16|g<<8|b)-1}function drawPickingScene(ctx,camera,scene){ctx.imageSmoothingEnabled=!1,ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height),ctx.save(),ctx.transform(camera.k,0,0,camera.k,camera.x,camera.y);const minimumWorldStroke=26/(Number.isFinite(camera.k)&&Math.abs(camera.k)>0?Math.abs(camera.k):1);let idx=0;for(const hull of scene.hulls){const color=indexToPickColor(idx++),path=new Path2D(hull.d);ctx.fillStyle=color,ctx.strokeStyle=color,ctx.lineWidth=Math.max(48,minimumWorldStroke),ctx.lineJoin="round",ctx.lineCap="round",ctx.fill(path),ctx.stroke(path)}for(const link of scene.links)ctx.strokeStyle=indexToPickColor(idx++),ctx.lineWidth=Math.max(link.width+6,8,minimumWorldStroke),ctx.lineCap="round",ctx.beginPath(),ctx.moveTo(link.x1,link.y1),ctx.lineTo(link.x2,link.y2),ctx.stroke();for(const node of scene.nodes)ctx.fillStyle=indexToPickColor(idx++),ctx.fill(pathForShape(node.x,node.y,Math.max(node.r,minimumWorldStroke/2),node.shape));ctx.restore()}export{drawGraphScene,drawPickingScene,indexToPickColor,pickColorToIndex};
1
+ const HULL_STROKE_WIDTH=48,MIN_PICK_TARGET_PX=24,PICK_RASTER_GUARD_PX=2,LABEL_HALO_WIDTH=3,SELECTED_LINK_STROKE_WIDTH=3,EXPAND_BADGE_R=5,EXPAND_BADGE_OFFSET=Math.SQRT1_2;function pathForShape(x,y,r,shape){const path=new Path2D;if(shape==="circle")return path.arc(x,y,r,0,Math.PI*2),path;const s=r*Math.sqrt(Math.PI)/2;if(shape==="square")return path.rect(x-s,y-s,s*2,s*2),path;const d=s*Math.SQRT2;return path.moveTo(x,y-d),path.lineTo(x+d,y),path.lineTo(x,y+d),path.lineTo(x-d,y),path.closePath(),path}function drawArrowhead(ctx,link){const dx=link.x2-link.x1,dy=link.y2-link.y1,len=Math.hypot(dx,dy)||1,ux=dx/len,uy=dy/len,size=Math.max(6,link.width*3),bx=link.x2-ux*size,by=link.y2-uy*size,px=-uy,py=ux;ctx.beginPath(),ctx.moveTo(link.x2,link.y2),ctx.lineTo(bx+px*size*.4,by+py*size*.4),ctx.lineTo(bx-px*size*.4,by-py*size*.4),ctx.closePath(),ctx.fillStyle=ctx.strokeStyle,ctx.fill()}function drawRing(ctx,ring,color){ctx.strokeStyle=color,ctx.lineWidth=2,ctx.beginPath(),ctx.arc(ring.x,ring.y,ring.r,0,Math.PI*2),ctx.stroke()}function drawKeyboardFocusCue(ctx,scene){if(ctx.strokeStyle=scene.haloColor,ctx.setLineDash([4,3]),scene.keyboardFocusLink){const link=scene.keyboardFocusLink;ctx.lineWidth=Math.max(4,link.width+4),ctx.beginPath(),ctx.moveTo(link.x1,link.y1),ctx.lineTo(link.x2,link.y2),ctx.stroke()}scene.keyboardFocusHull&&(ctx.lineWidth=4,ctx.stroke(new Path2D(scene.keyboardFocusHull.d))),ctx.setLineDash([]),scene.keyboardFocusRing&&drawRing(ctx,scene.keyboardFocusRing,scene.haloColor)}function drawGraphScene(ctx,camera,scene){ctx.save(),ctx.transform(camera.k,0,0,camera.k,camera.x,camera.y);const hullOpacity=scene.hullOpacity??.12;for(const hull of scene.hulls){const path=new Path2D(hull.d);ctx.globalAlpha=hullOpacity,ctx.fillStyle=hull.fill,ctx.strokeStyle=hull.fill,ctx.lineWidth=48,ctx.lineJoin="round",ctx.lineCap="round",ctx.fill(path),ctx.stroke(path),ctx.globalAlpha=1}const dimmedOpacity=scene.dimmedOpacity??1;for(const link of scene.links)link.width<=0||(ctx.strokeStyle=link.selected?scene.selectedColor:link.color,ctx.lineWidth=link.selected?3:link.width,ctx.setLineDash(link.dash?[...link.dash]:[]),ctx.globalAlpha=link.dimmed?dimmedOpacity:1,ctx.beginPath(),ctx.moveTo(link.x1,link.y1),ctx.lineTo(link.x2,link.y2),ctx.stroke(),link.directed&&drawArrowhead(ctx,link));if(ctx.globalAlpha=1,ctx.setLineDash([]),scene.edgeLabels.length){ctx.font=scene.font,ctx.textAlign="center",ctx.textBaseline="middle",ctx.lineWidth=3;for(const label of scene.edgeLabels)ctx.strokeStyle=scene.labelHaloColor,ctx.strokeText(label.text,label.x,label.y),ctx.fillStyle=scene.labelColor,ctx.fillText(label.text,label.x,label.y)}for(const node of scene.nodes){const path=pathForShape(node.x,node.y,node.r,node.shape);ctx.globalAlpha=node.dimmed?dimmedOpacity:1,ctx.fillStyle=node.fill,ctx.fill(path),node.selected&&(ctx.strokeStyle=scene.selectedColor,ctx.lineWidth=2,ctx.stroke(path))}if(ctx.globalAlpha=1,scene.showNodeLabels&&scene.nodeLabels.length){ctx.font=scene.font,ctx.textAlign="left",ctx.textBaseline="middle",ctx.fillStyle=scene.labelColor;for(const label of scene.nodeLabels)ctx.fillText(label.text,label.x,label.y)}const expandIndicators=scene.expandIndicators??[];if(expandIndicators.length){ctx.lineWidth=1;for(const indicator of expandIndicators){const bx=indicator.x+indicator.r*EXPAND_BADGE_OFFSET,by=indicator.y-indicator.r*EXPAND_BADGE_OFFSET,path=new Path2D;path.arc(bx,by,5,0,Math.PI*2),ctx.fillStyle=scene.expandBadgeFill??"",ctx.fill(path),ctx.strokeStyle=scene.expandBadgeStroke??"",ctx.stroke(path),ctx.strokeStyle=scene.labelColor,ctx.beginPath(),ctx.moveTo(bx-5/2,by),ctx.lineTo(bx+5/2,by),ctx.moveTo(bx,by-5/2),ctx.lineTo(bx,by+5/2),ctx.stroke()}}scene.focusHalo&&drawRing(ctx,scene.focusHalo,scene.haloColor),drawKeyboardFocusCue(ctx,scene),ctx.restore()}function indexToPickColor(index){const v=index+1;return`rgb(${v>>16&255},${v>>8&255},${v&255})`}function pickColorToIndex(r,g,b){return(r<<16|g<<8|b)-1}function drawPickingScene(ctx,camera,scene){ctx.imageSmoothingEnabled=!1,ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height),ctx.save(),ctx.transform(camera.k,0,0,camera.k,camera.x,camera.y);const minimumWorldStroke=26/(Number.isFinite(camera.k)&&Math.abs(camera.k)>0?Math.abs(camera.k):1);let idx=0;for(const hull of scene.hulls){const color=indexToPickColor(idx++),path=new Path2D(hull.d);ctx.fillStyle=color,ctx.strokeStyle=color,ctx.lineWidth=Math.max(48,minimumWorldStroke),ctx.lineJoin="round",ctx.lineCap="round",ctx.fill(path),ctx.stroke(path)}for(const link of scene.links)ctx.strokeStyle=indexToPickColor(idx++),ctx.lineWidth=Math.max(link.width+6,8,minimumWorldStroke),ctx.lineCap="round",ctx.beginPath(),ctx.moveTo(link.x1,link.y1),ctx.lineTo(link.x2,link.y2),ctx.stroke();for(const node of scene.nodes)ctx.fillStyle=indexToPickColor(idx++),ctx.fill(pathForShape(node.x,node.y,Math.max(node.r,minimumWorldStroke/2),node.shape));ctx.restore()}export{drawGraphScene,drawPickingScene,indexToPickColor,pickColorToIndex};
@@ -406,10 +406,17 @@ private get safeChargeStrength();
406
406
  * `distance()`, the layered layout's `gapY`, and the neighbor-jitter spawn radius, none of
407
407
  * which have a sane meaning for a negative/non-finite value. */
408
408
  private get safeLinkDistance();private resolveNodeType;private nodeShape;
409
+ /** `nodeTypes` filtered to a non-blank `label`, in the same order `lr-graph-legend` renders its
410
+ * rows in (its `render()` applies an identical filter before assigning a row its palette
411
+ * index). Keeping this filter in sync here is what keeps a node's categorical fallback color
412
+ * matching the swatch color a paired legend shows for the same type. */
413
+ private labeledNodeTypes;
409
414
  /** Resolution precedence: `node.color` (existing, most specific) > matched `LyraNodeTypeStyle.color`
410
- * > the ordered categorical fallback palette by the type's index in `nodeTypes` > (returns
411
- * `undefined`, letting the untyped `--lr-node-fill` token default apply). Both data-driven
412
- * color sources pass the existing `sanitizeNodeColor()`. */
415
+ * > the ordered categorical fallback palette by the type's index among label-bearing `nodeTypes`
416
+ * entries, matching `lr-graph-legend`'s own row order > (returns `undefined`, letting the
417
+ * untyped `--lr-node-fill` token default apply). Both data-driven color sources pass the
418
+ * existing `sanitizeNodeColor()`. A blank-label type itself (never shown as its own legend row)
419
+ * falls back to its raw `nodeTypes` position, since there is no legend row to stay in sync with. */
413
420
  private nodeFill;
414
421
  /** `this.nodes` filtered down to the ids `hiddenTypes` doesn't hide -- an untyped node (`type ==
415
422
  * null`) is never hidden, regardless of `hiddenTypes`' contents. */