@aceshooting/lyra-ui 24.1.0 → 25.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.
- package/CHANGELOG.md +29 -20
- package/README.md +24 -28
- package/custom-elements.json +1 -1
- package/design-tokens.json +1 -1
- package/dist/components/agent-tools/activity-feed/activity-feed.styles.js +1 -1
- package/dist/components/agent-tools/task-list/task-list.styles.js +1 -1
- package/dist/components/agent-tools/thinking-panel/thinking-panel.styles.js +1 -1
- package/dist/components/conversation/chat-viewport/chat-viewport.class.js +1 -1
- package/dist/components/conversation/code-block/code-block.styles.js +1 -1
- package/dist/components/conversation/markdown/markdown.styles.js +1 -1
- package/dist/components/conversation/model-select/model-select.class.js +2 -1
- package/dist/components/conversation/model-select/model-select.styles.js +1 -1
- package/dist/components/conversation/selection-toolbar/selection-toolbar.styles.js +1 -1
- package/dist/components/conversation/voice-picker/voice-picker.class.js +2 -1
- package/dist/components/conversation/voice-picker/voice-picker.styles.js +1 -1
- package/dist/components/data/document-library/document-library.class.js +1 -1
- package/dist/components/data/table/table.class.d.ts +14 -3
- package/dist/components/data/table/table.class.js +8 -6
- package/dist/components/data/table/table.styles.js +1 -1
- package/dist/components/forms/color-picker/color-picker.class.js +2 -1
- package/dist/components/forms/color-picker/color-picker.styles.js +1 -1
- package/dist/components/forms/combobox/combobox.class.js +2 -1
- package/dist/components/forms/combobox/combobox.styles.js +1 -1
- package/dist/components/forms/date-picker/date-input.class.d.ts +3 -0
- package/dist/components/forms/date-picker/date-input.class.js +2 -1
- package/dist/components/forms/date-picker/date-input.styles.js +1 -1
- package/dist/components/forms/input/time-input.class.js +2 -1
- package/dist/components/forms/input/time-input.styles.js +1 -1
- package/dist/components/forms/locale-picker/locale-picker.class.d.ts +2 -1
- package/dist/components/forms/locale-picker/locale-picker.class.js +2 -1
- package/dist/components/forms/locale-picker/locale-picker.styles.js +1 -1
- package/dist/components/forms/otp-input/otp-input.class.js +1 -1
- package/dist/components/forms/select/select.class.js +2 -1
- package/dist/components/forms/select/select.styles.js +1 -1
- package/dist/components/forms/swatch-picker/swatch-picker.class.d.ts +6 -1
- package/dist/components/forms/swatch-picker/swatch-picker.class.js +1 -1
- package/dist/components/layout/app-rail/app-rail.styles.js +1 -1
- package/dist/components/layout/menu/menu.styles.js +1 -1
- package/dist/components/layout/menubar/menubar.styles.js +1 -1
- package/dist/components/layout/navigation-menu-item/navigation-menu-item.class.js +2 -2
- package/dist/components/layout/navigation-menu-item/navigation-menu-item.styles.js +1 -1
- package/dist/components/layout/scroller/scroller.styles.js +1 -1
- package/dist/components/media/av-player/av-player.styles.js +1 -1
- package/dist/components/media/image-viewer/image-viewer.styles.js +1 -1
- package/dist/components/media/map/map.class.d.ts +5 -2
- package/dist/components/media/map/map.class.js +4 -3
- package/dist/components/media/map/map.styles.js +1 -1
- package/dist/components/overlays/dialog/dialog.class.d.ts +1 -1
- package/dist/components/overlays/dialog/dialog.class.js +2 -1
- package/dist/components/overlays/dialog/dialog.styles.js +1 -1
- package/dist/components/overlays/overlay/overlay.styles.d.ts +1 -1
- package/dist/components/overlays/overlay/overlay.styles.js +1 -1
- package/dist/components/overlays/overlay/popover-glass.styles.d.ts +1 -0
- package/dist/components/overlays/overlay/popover-glass.styles.js +1 -0
- package/dist/components/overlays/overlay/popover.class.d.ts +11 -3
- package/dist/components/overlays/overlay/popover.class.js +1 -1
- package/dist/components/retrieval/knowledge-base/knowledge-base.class.js +1 -1
- package/dist/components/retrieval/source-list/source-list.styles.js +1 -1
- package/dist/components/utility/export-button/export-button.class.d.ts +1 -1
- package/dist/components/utility/export-button/export-button.class.js +2 -1
- package/dist/components/utility/export-button/export-button.styles.js +1 -1
- package/dist/components/utility/mention-popover/mention-popover.class.d.ts +1 -1
- package/dist/components/utility/mention-popover/mention-popover.class.js +2 -1
- package/dist/components/utility/mention-popover/mention-popover.styles.js +1 -1
- package/dist/components/viewers/document-compare/document-compare.styles.js +1 -1
- package/dist/components/viewers/document-preview/document-preview.class.js +1 -1
- package/dist/framework-types.d.ts +1 -1
- package/dist/internal/default-strings.generated.d.ts +1 -1
- package/dist/internal/default-strings.generated.js +1 -1
- package/dist/internal/glass-independent-root.styles.d.ts +2 -0
- package/dist/internal/glass-independent-root.styles.js +1 -0
- package/dist/internal/glass-scroll-layer.d.ts +1 -1
- package/dist/internal/glass-scroll-layer.js +1 -1
- package/dist/internal/glass-scroll-layer.styles.d.ts +2 -0
- package/dist/internal/glass-scroll-layer.styles.js +1 -0
- package/dist/internal/glass-surface.styles.d.ts +0 -2
- package/dist/internal/glass-surface.styles.js +1 -1
- package/dist/internal/localization-types.d.ts +1 -1
- package/dist/internal/localization.js +1 -1
- package/dist/internal/native-modal-carrier.js +2 -2
- package/dist/internal/package-metadata.d.ts +1 -1
- package/dist/internal/package-metadata.js +1 -1
- package/dist/internal/positioner.js +1 -1
- package/dist/internal/sizes.styles.js +1 -1
- package/dist/internal/specialist-tokens.styles.js +1 -1
- package/dist/internal/theme-token-types.d.ts +16 -0
- package/dist/internal/tokens/palette.styles.js +1 -1
- package/dist/internal/tokens.styles.js +1 -1
- package/dist/looks/material.css +1 -1
- package/dist/styles/design-tokens.css +1 -1
- package/dist/styles/tokens-root.css +1 -1
- package/dist/surfaces/glass.css +1 -1
- package/dist/theme/gemstones.d.ts +7 -0
- package/dist/theme/gemstones.js +1 -1
- package/dist/theme/looks/material.d.ts +1 -1
- package/dist/theme/looks/material.js +1 -1
- package/dist/theme/startup-resolution.d.ts +1 -0
- package/dist/theme/startup-resolution.js +1 -0
- package/dist/theme/style-ownership.js +1 -1
- package/dist/theme/theme-bootstrap.js +1 -1
- package/dist/theme/theme.d.ts +6 -21
- package/dist/theme/theme.js +1 -1
- package/dist/theme.css +1 -1
- package/dist/translations/am/data.js +1 -1
- package/dist/translations/ar/data.js +1 -1
- package/dist/translations/bho/data.js +1 -1
- package/dist/translations/bn/data.js +1 -1
- package/dist/translations/cs/data.js +1 -1
- package/dist/translations/da/data.js +1 -1
- package/dist/translations/de/data.js +1 -1
- package/dist/translations/el/data.js +1 -1
- package/dist/translations/es/data.js +1 -1
- package/dist/translations/fa/data.js +1 -1
- package/dist/translations/fa-AF/data.js +1 -1
- package/dist/translations/fi/data.js +1 -1
- package/dist/translations/fr/data.js +1 -1
- package/dist/translations/gu/data.js +1 -1
- package/dist/translations/ha/data.js +1 -1
- package/dist/translations/he/data.js +1 -1
- package/dist/translations/hi/data.js +1 -1
- package/dist/translations/hr/data.js +1 -1
- package/dist/translations/hu/data.js +1 -1
- package/dist/translations/id/data.js +1 -1
- package/dist/translations/ig/data.js +1 -1
- package/dist/translations/it/data.js +1 -1
- package/dist/translations/ja/data.js +1 -1
- package/dist/translations/jv/data.js +1 -1
- package/dist/translations/kk/data.js +1 -1
- package/dist/translations/kn/data.js +1 -1
- package/dist/translations/ko/data.js +1 -1
- package/dist/translations/ln/data.js +1 -1
- package/dist/translations/ml/data.js +1 -1
- package/dist/translations/mr/data.js +1 -1
- package/dist/translations/ms/data.js +1 -1
- package/dist/translations/my/data.js +1 -1
- package/dist/translations/nb/data.js +1 -1
- package/dist/translations/ne/data.js +1 -1
- package/dist/translations/nl/data.js +1 -1
- package/dist/translations/nn/data.js +1 -1
- package/dist/translations/om/data.js +1 -1
- package/dist/translations/or/data.js +1 -1
- package/dist/translations/pa/data.js +1 -1
- package/dist/translations/pcm/data.js +1 -1
- package/dist/translations/pl/data.js +1 -1
- package/dist/translations/pnb/data.js +1 -1
- package/dist/translations/ps/data.js +1 -1
- package/dist/translations/pt-BR/data.js +1 -1
- package/dist/translations/pt-PT/data.js +1 -1
- package/dist/translations/ro/data.js +1 -1
- package/dist/translations/ru/data.js +1 -1
- package/dist/translations/sd/data.js +1 -1
- package/dist/translations/sl/data.js +1 -1
- package/dist/translations/su/data.js +1 -1
- package/dist/translations/sv/data.js +1 -1
- package/dist/translations/sw/data.js +1 -1
- package/dist/translations/ta/data.js +1 -1
- package/dist/translations/te/data.js +1 -1
- package/dist/translations/th/data.js +1 -1
- package/dist/translations/tl/data.js +1 -1
- package/dist/translations/tr/data.js +1 -1
- package/dist/translations/uk/data.js +1 -1
- package/dist/translations/ur/data.js +1 -1
- package/dist/translations/uz/data.js +1 -1
- package/dist/translations/vi/data.js +1 -1
- package/dist/translations/yo/data.js +1 -1
- package/dist/translations/zh-CN/data.js +1 -1
- package/dist/translations/zh-TW/data.js +1 -1
- package/dist/translations/zu/data.js +1 -1
- package/llms/components/lr-date-input.md +1 -1
- package/llms/components/lr-date-picker.md +6 -0
- package/llms/components/lr-dialog.md +3 -0
- package/llms/components/lr-export-button.md +2 -0
- package/llms/components/lr-icon.md +1 -1
- package/llms/components/lr-locale-picker.md +7 -1
- package/llms/components/lr-map.md +7 -0
- package/llms/components/lr-mention-popover.md +3 -0
- package/llms/components/lr-model-select.md +3 -0
- package/llms/components/lr-navigation-menu.md +3 -0
- package/llms/components/lr-otp-input.md +3 -1
- package/llms/components/lr-popover.md +15 -5
- package/llms/components/lr-select.md +3 -0
- package/llms/components/lr-swatch-picker.md +17 -5
- package/llms/components/lr-table.md +14 -1
- package/llms/components/lr-voice-picker.md +3 -0
- package/llms/shared/native-styles-and-utilities.md +40 -0
- package/llms/shared/styles-and-tokens.md +257 -60
- package/llms/shared/testing-and-utilities.md +4 -1
- package/llms/shared.md +300 -61
- package/llms/tokens.md +82 -82
- package/locales.json +138 -138
- package/package.json +2 -2
- package/registrations.json +1 -1
- package/vscode-css-data.json +1 -1
- package/vscode-html-data.json +1 -1
- package/web-types.json +1 -1
- package/dist/components/agent-tools/run-events.js +0 -1
- package/dist/components/agent-tools/tool-param-form/tool-param-types.js +0 -1
- package/dist/components/forms/emoji-picker/emoji-types.js +0 -1
- package/dist/components/layout/dashboard-grid/layout-types.js +0 -1
- package/dist/components/layout/details/accordion-types.js +0 -1
- package/dist/components/viewers/viewer-diagnostics.js +0 -1
- package/dist/internal/localization-types.js +0 -1
- package/dist/internal/node-type-style.js +0 -1
- package/dist/internal/picker-value.js +0 -1
- package/dist/internal/shared-unions.js +0 -1
- package/dist/internal/stream-phase.js +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
import{css}from"lit";const styles=css`:host{--_lr-activity-feed-max-height:var(--lr-size-16rem);display:block}[part=base]{border:var(--lr-border-width-thin) solid var(--lr-activity-feed-border-color,var(--lr-color-border-subtle));border-radius:var(--lr-activity-feed-radius,var(--lr-radius));background:var(--lr-activity-feed-bg,var(--lr-color-surface));overflow:hidden}:host(:is([size="2xs"],[size=xs],[size=s],[size=small])) [part=header]{padding:var(--lr-activity-feed-compact-header-padding,var(--lr-space-2xs) var(--lr-space-s));gap:var(--lr-activity-feed-compact-header-gap,var(--lr-space-2xs))}:host(:is([size="2xs"],[size=xs],[size=s],[size=small])) [part=entry],:host(:is([size="2xs"],[size=xs],[size=s],[size=small])) lr-virtual-list::part(entry){padding:var(--lr-activity-feed-compact-entry-padding,var(--lr-space-2xs) var(--lr-space-s));gap:var(--lr-activity-feed-compact-entry-gap,var(--lr-space-2xs))}:host([frame=plain]) [part=base]{background:0 0;border:0;border-radius:0}[part=header]{align-items:center;gap:var(--lr-space-xs);box-sizing:border-box;inline-size:100%;padding:var(--lr-space-s) var(--lr-space-m);color:var(--lr-color-text);font:inherit;text-align:start;cursor:pointer;background:0 0;border:none;display:flex}[part=header]:hover{background:var(--lr-color-brand-quiet);color:var(--lr-color-brand)}[part=header]:active{background:color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active))}[part=header]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:calc(-1 * var(--lr-focus-ring-offset))}[part=toggle]{transition:transform var(--lr-transition-fast);flex:none;display:inline-flex}:host([expanded]) [part=toggle]{transform:rotate(90deg)}:host(:not([expanded]):dir(rtl)) [part=toggle]{transform:scaleX(-1)}[part=status-dot]{inline-size:var(--lr-size-0-5rem);block-size:var(--lr-size-0-5rem);border-radius:var(--lr-radius-pill);background:var(--lr-color-text-quiet);flex:none}:host([mode=live]) [part=status-dot]{background:var(--lr-activity-feed-live-status-color,var(--lr-color-brand));animation:var(--_lr-motion-animation,lr-activity-feed-pulse var(--lr-transition-ambient) infinite)}[part=label]{text-overflow:ellipsis;white-space:nowrap;min-inline-size:0;max-inline-size:50%;font-weight:var(--lr-font-weight-semibold);flex:0 auto;overflow:hidden}[part=summary]{min-inline-size:var(--lr-size-3ch);text-overflow:ellipsis;white-space:nowrap;font-size:var(--lr-font-size-sm);color:var(--lr-color-text-quiet);text-align:start;flex:auto;overflow:hidden}[part=body]{max-block-size:var(--lr-activity-feed-max-height,var(--_lr-activity-feed-max-height));overscroll-behavior:contain;border-block-start:var(--lr-border-width-thin) solid var(--lr-activity-feed-border-color,var(--lr-color-border-subtle));flex-direction:column;display:flex;overflow:hidden auto}[part=body]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:calc(-1 * var(--lr-focus-ring-offset))}[part=body][hidden]{display:none}lr-virtual-list{inline-size:100%;block-size:var(--lr-activity-feed-max-height,var(--_lr-activity-feed-max-height));display:block}[part=entry],lr-virtual-list::part(entry){align-items:baseline;gap:var(--lr-space-xs);padding:var(--lr-space-2xs) var(--lr-space-m);flex-wrap:wrap;display:flex}[part=entry-icon],lr-virtual-list::part(entry-icon){inline-size:var(--lr-size-1em);flex:none;align-items:center;display:inline-flex}[part~=variant-dot],lr-virtual-list::part(variant-dot){inline-size:var(--lr-size-0-5rem);block-size:var(--lr-size-0-5rem);border-radius:var(--lr-radius-pill);display:block}[part~=variant-dot-neutral],lr-virtual-list::part(variant-dot-neutral){background:var(--lr-color-text-quiet)}[part~=variant-dot-brand],lr-virtual-list::part(variant-dot-brand){background:var(--lr-color-brand)}[part~=variant-dot-success],lr-virtual-list::part(variant-dot-success){background:var(--lr-color-success)}[part~=variant-dot-warning],lr-virtual-list::part(variant-dot-warning){background:var(--lr-color-warning)}[part~=variant-dot-danger],lr-virtual-list::part(variant-dot-danger){background:var(--lr-color-danger)}[part=entry-text],lr-virtual-list::part(entry-text){min-inline-size:var(--lr-size-3ch);overflow-wrap:anywhere;font-size:var(--lr-font-size-sm);flex:auto}[part=entry-text] a:where(:any-link){color:var(--lr-activity-feed-entry-text-link-color,var(--lr-color-brand))}[part=entry-timestamp],lr-virtual-list::part(entry-timestamp){font-size:var(--lr-font-size-xs);color:var(--lr-color-text-quiet);flex:none}@keyframes lr-activity-feed-pulse{0%,to{opacity:1}50%{opacity:.35}}@media (prefers-reduced-motion:reduce){[part=toggle]{transition:none!important}[part=status-dot]{animation:none!important}}`;export{styles};
|
|
1
|
+
import{css}from"lit";const styles=css`:host{--_lr-activity-feed-max-height:var(--lr-size-16rem);display:block}[part=base]{border:var(--lr-border-width-thin) solid var(--lr-activity-feed-border-color,var(--lr-color-border-subtle));border-radius:var(--lr-activity-feed-radius,var(--lr-radius));background:var(--lr-activity-feed-bg,var(--lr-color-surface));overflow:hidden}:host(:is([size="2xs"],[size=xs],[size=s],[size=small])) [part=header]{padding:var(--lr-activity-feed-compact-header-padding,var(--lr-space-2xs) var(--lr-space-s));gap:var(--lr-activity-feed-compact-header-gap,var(--lr-space-2xs))}:host(:is([size="2xs"],[size=xs],[size=s],[size=small])) [part=entry],:host(:is([size="2xs"],[size=xs],[size=s],[size=small])) lr-virtual-list::part(entry){padding:var(--lr-activity-feed-compact-entry-padding,var(--lr-space-2xs) var(--lr-space-s));gap:var(--lr-activity-feed-compact-entry-gap,var(--lr-space-2xs))}:host([frame=plain]) [part=base]{background:0 0;border:0;border-radius:0}[part=header]{align-items:center;gap:var(--lr-space-xs);box-sizing:border-box;inline-size:100%;padding:var(--lr-space-s) var(--lr-space-m);color:var(--lr-color-text);font:inherit;text-align:start;cursor:pointer;background:0 0;border:none;display:flex}[part=header]:hover{background:var(--lr-color-brand-quiet);color:var(--lr-color-brand)}[part=header]:active{background:color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active))}[part=header]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:calc(-1 * max(var(--lr-focus-ring-width), calc(var(--lr-focus-ring-width) + var(--lr-focus-ring-offset))))}[part=toggle]{transition:transform var(--lr-transition-fast);flex:none;display:inline-flex}:host([expanded]) [part=toggle]{transform:rotate(90deg)}:host(:not([expanded]):dir(rtl)) [part=toggle]{transform:scaleX(-1)}[part=status-dot]{inline-size:var(--lr-size-0-5rem);block-size:var(--lr-size-0-5rem);border-radius:var(--lr-radius-pill);background:var(--lr-color-text-quiet);flex:none}:host([mode=live]) [part=status-dot]{background:var(--lr-activity-feed-live-status-color,var(--lr-color-brand));animation:var(--_lr-motion-animation,lr-activity-feed-pulse var(--lr-transition-ambient) infinite)}[part=label]{text-overflow:ellipsis;white-space:nowrap;min-inline-size:0;max-inline-size:50%;font-weight:var(--lr-font-weight-semibold);flex:0 auto;overflow:hidden}[part=summary]{min-inline-size:var(--lr-size-3ch);text-overflow:ellipsis;white-space:nowrap;font-size:var(--lr-font-size-sm);color:var(--lr-color-text-quiet);text-align:start;flex:auto;overflow:hidden}[part=body]{max-block-size:var(--lr-activity-feed-max-height,var(--_lr-activity-feed-max-height));overscroll-behavior:contain;border-block-start:var(--lr-border-width-thin) solid var(--lr-activity-feed-border-color,var(--lr-color-border-subtle));flex-direction:column;display:flex;overflow:hidden auto}[part=body]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:calc(-1 * max(var(--lr-focus-ring-width), calc(var(--lr-focus-ring-width) + var(--lr-focus-ring-offset))))}[part=body][hidden]{display:none}lr-virtual-list{inline-size:100%;block-size:var(--lr-activity-feed-max-height,var(--_lr-activity-feed-max-height));display:block}[part=entry],lr-virtual-list::part(entry){align-items:baseline;gap:var(--lr-space-xs);padding:var(--lr-space-2xs) var(--lr-space-m);flex-wrap:wrap;display:flex}[part=entry-icon],lr-virtual-list::part(entry-icon){inline-size:var(--lr-size-1em);flex:none;align-items:center;display:inline-flex}[part~=variant-dot],lr-virtual-list::part(variant-dot){inline-size:var(--lr-size-0-5rem);block-size:var(--lr-size-0-5rem);border-radius:var(--lr-radius-pill);display:block}[part~=variant-dot-neutral],lr-virtual-list::part(variant-dot-neutral){background:var(--lr-color-text-quiet)}[part~=variant-dot-brand],lr-virtual-list::part(variant-dot-brand){background:var(--lr-color-brand)}[part~=variant-dot-success],lr-virtual-list::part(variant-dot-success){background:var(--lr-color-success)}[part~=variant-dot-warning],lr-virtual-list::part(variant-dot-warning){background:var(--lr-color-warning)}[part~=variant-dot-danger],lr-virtual-list::part(variant-dot-danger){background:var(--lr-color-danger)}[part=entry-text],lr-virtual-list::part(entry-text){min-inline-size:var(--lr-size-3ch);overflow-wrap:anywhere;font-size:var(--lr-font-size-sm);flex:auto}[part=entry-text] a:where(:any-link){color:var(--lr-activity-feed-entry-text-link-color,var(--lr-color-brand))}[part=entry-timestamp],lr-virtual-list::part(entry-timestamp){font-size:var(--lr-font-size-xs);color:var(--lr-color-text-quiet);flex:none}@keyframes lr-activity-feed-pulse{0%,to{opacity:1}50%{opacity:.35}}@media (prefers-reduced-motion:reduce){[part=toggle]{transition:none!important}[part=status-dot]{animation:none!important}}`;export{styles};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{css}from"lit";import{srOnly}from"../../../internal/a11y.js";const styles=[srOnly,css`:host{--_lr-task-list-spin:var(--lr-transition-ambient);display:block}[part=base]{border:var(--lr-border-width-thin) solid var(--lr-task-list-border-color,var(--lr-color-border));border-radius:var(--lr-task-list-radius,var(--lr-radius));background:var(--lr-task-list-bg,var(--lr-color-surface));overflow:hidden}:host(:is([size="2xs"],[size=xs],[size=s],[size=small])) [part=header]{padding:var(--lr-task-list-compact-header-padding,var(--lr-space-2xs) var(--lr-space-s));gap:var(--lr-task-list-compact-header-gap,var(--lr-space-2xs));font-size:var(--lr-task-list-compact-header-font-size,var(--lr-font-size-sm))}:host(:is([size="2xs"],[size=xs],[size=s],[size=small])) [part=body]{gap:var(--lr-task-list-compact-gap,var(--lr-space-2xs));padding:var(--lr-task-list-compact-body-padding,var(--lr-space-2xs) var(--lr-space-s) var(--lr-space-s))}:host([frame=plain]) [part=base]{background:0 0;border:0;border-radius:0}[part=header]{align-items:center;gap:var(--lr-space-xs);box-sizing:border-box;inline-size:100%;padding:var(--lr-space-s) var(--lr-space-m);color:var(--lr-color-text);font:inherit;font-weight:var(--lr-font-weight-semibold);font-size:var(--lr-font-size-md-sm);text-align:start;background:0 0;border:none;display:flex}button[part=header]{cursor:pointer}:where(button[part=header]):hover{background:var(--lr-color-brand-quiet);color:var(--lr-color-brand)}:where(button[part=header]):active{background:color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active));color:var(--lr-color-text)}:where(button[part=header]):hover [part=summary],:where(button[part=header]):active [part=summary]{color:inherit}button[part=header]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:calc(-1 * var(--lr-focus-ring-offset))}[part=toggle]{transition:transform var(--lr-transition-fast);flex:none;display:inline-flex}:host(:not([collapsed])) [part=toggle]{transform:rotate(90deg)}:host([collapsed]:dir(rtl)) [part=toggle]{transform:scaleX(-1)}[part=label]{overflow-wrap:anywhere;flex:auto;min-inline-size:0}[part=summary]{font-weight:var(--lr-font-weight-normal);font-size:var(--lr-font-size-sm);color:var(--lr-color-text-quiet);flex:none}[part=body]{gap:var(--lr-space-s);min-inline-size:0;max-inline-size:100%;padding:var(--lr-space-xs) var(--lr-space-m) var(--lr-space-m);border-block-start:var(--lr-border-width-thin) solid var(--lr-task-list-border-color,var(--lr-color-border));flex-direction:column;display:flex}[part=body][hidden]{display:none}[part=item]{align-items:baseline;gap:var(--lr-space-xs);flex-wrap:wrap;display:flex}[part=item][tabindex]{border-radius:var(--lr-radius)}:where([part=item][tabindex]):hover{background:var(--lr-color-brand-quiet)}:where([part=item][tabindex]):active{background:color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active))}[part=item][tabindex]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:calc(-1 * var(--lr-focus-ring-offset))}[part=item][data-depth="1"]{margin-inline-start:var(--lr-space-l)}[part=item-children]{gap:var(--lr-space-s);flex-direction:column;flex-basis:100%;margin-block-start:var(--lr-space-xs);display:flex}[part=status-icon]{color:var(--lr-task-list-pending-color,var(--lr-color-text-quiet));flex:none;display:inline-flex}[part=status-icon] svg{display:block}[part=item][data-status=running] [part=status-icon]{color:var(--lr-task-list-running-color,var(--lr-color-brand))}[part=item][data-status=running] [part=status-icon] svg{animation:var(--_lr-motion-animation,lr-task-list-spin var(--lr-task-list-spin,var(--_lr-task-list-spin)) infinite)}[part=item][data-status=success] [part=status-icon]{color:var(--lr-task-list-success-color,var(--lr-color-success))}[part=item][data-status=incomplete] [part=status-icon]{color:var(--lr-task-list-incomplete-color,var(--lr-color-text-quiet))}[part=item][data-status=error] [part=status-icon]{color:var(--lr-task-list-error-color,var(--lr-color-danger))}[part=item-label]{overflow-wrap:anywhere;flex:auto;min-inline-size:0;max-inline-size:100%}[part=item-detail]{overflow-wrap:anywhere;min-inline-size:0;max-inline-size:100%;font-size:var(--lr-font-size-sm);color:var(--lr-color-text-quiet);flex-basis:100%}@keyframes lr-task-list-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){[part=toggle]{transition:none!important}[part=item][data-status=running] [part=status-icon] svg{animation:none!important}}`];export{styles};
|
|
1
|
+
import{css}from"lit";import{srOnly}from"../../../internal/a11y.js";const styles=[srOnly,css`:host{--_lr-task-list-spin:var(--lr-transition-ambient);display:block}[part=base]{border:var(--lr-border-width-thin) solid var(--lr-task-list-border-color,var(--lr-color-border));border-radius:var(--lr-task-list-radius,var(--lr-radius));background:var(--lr-task-list-bg,var(--lr-color-surface));overflow:hidden}:host(:is([size="2xs"],[size=xs],[size=s],[size=small])) [part=header]{padding:var(--lr-task-list-compact-header-padding,var(--lr-space-2xs) var(--lr-space-s));gap:var(--lr-task-list-compact-header-gap,var(--lr-space-2xs));font-size:var(--lr-task-list-compact-header-font-size,var(--lr-font-size-sm))}:host(:is([size="2xs"],[size=xs],[size=s],[size=small])) [part=body]{gap:var(--lr-task-list-compact-gap,var(--lr-space-2xs));padding:var(--lr-task-list-compact-body-padding,var(--lr-space-2xs) var(--lr-space-s) var(--lr-space-s))}:host([frame=plain]) [part=base]{background:0 0;border:0;border-radius:0}[part=header]{align-items:center;gap:var(--lr-space-xs);box-sizing:border-box;inline-size:100%;padding:var(--lr-space-s) var(--lr-space-m);color:var(--lr-color-text);font:inherit;font-weight:var(--lr-font-weight-semibold);font-size:var(--lr-font-size-md-sm);text-align:start;background:0 0;border:none;display:flex}button[part=header]{cursor:pointer}:where(button[part=header]):hover{background:var(--lr-color-brand-quiet);color:var(--lr-color-brand)}:where(button[part=header]):active{background:color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active));color:var(--lr-color-text)}:where(button[part=header]):hover [part=summary],:where(button[part=header]):active [part=summary]{color:inherit}button[part=header]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:calc(-1 * max(var(--lr-focus-ring-width), calc(var(--lr-focus-ring-width) + var(--lr-focus-ring-offset))))}[part=toggle]{transition:transform var(--lr-transition-fast);flex:none;display:inline-flex}:host(:not([collapsed])) [part=toggle]{transform:rotate(90deg)}:host([collapsed]:dir(rtl)) [part=toggle]{transform:scaleX(-1)}[part=label]{overflow-wrap:anywhere;flex:auto;min-inline-size:0}[part=summary]{font-weight:var(--lr-font-weight-normal);font-size:var(--lr-font-size-sm);color:var(--lr-color-text-quiet);flex:none}[part=body]{gap:var(--lr-space-s);min-inline-size:0;max-inline-size:100%;padding:var(--lr-space-xs) var(--lr-space-m) var(--lr-space-m);border-block-start:var(--lr-border-width-thin) solid var(--lr-task-list-border-color,var(--lr-color-border));flex-direction:column;display:flex}[part=body][hidden]{display:none}[part=item]{align-items:baseline;gap:var(--lr-space-xs);flex-wrap:wrap;display:flex}[part=item][tabindex]{border-radius:var(--lr-radius)}:where([part=item][tabindex]):hover{background:var(--lr-color-brand-quiet)}:where([part=item][tabindex]):active{background:color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active))}[part=item][tabindex]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:calc(-1 * var(--lr-focus-ring-offset))}[part=item][data-depth="1"]{margin-inline-start:var(--lr-space-l)}[part=item-children]{gap:var(--lr-space-s);flex-direction:column;flex-basis:100%;margin-block-start:var(--lr-space-xs);display:flex}[part=status-icon]{color:var(--lr-task-list-pending-color,var(--lr-color-text-quiet));flex:none;display:inline-flex}[part=status-icon] svg{display:block}[part=item][data-status=running] [part=status-icon]{color:var(--lr-task-list-running-color,var(--lr-color-brand))}[part=item][data-status=running] [part=status-icon] svg{animation:var(--_lr-motion-animation,lr-task-list-spin var(--lr-task-list-spin,var(--_lr-task-list-spin)) infinite)}[part=item][data-status=success] [part=status-icon]{color:var(--lr-task-list-success-color,var(--lr-color-success))}[part=item][data-status=incomplete] [part=status-icon]{color:var(--lr-task-list-incomplete-color,var(--lr-color-text-quiet))}[part=item][data-status=error] [part=status-icon]{color:var(--lr-task-list-error-color,var(--lr-color-danger))}[part=item-label]{overflow-wrap:anywhere;flex:auto;min-inline-size:0;max-inline-size:100%}[part=item-detail]{overflow-wrap:anywhere;min-inline-size:0;max-inline-size:100%;font-size:var(--lr-font-size-sm);color:var(--lr-color-text-quiet);flex-basis:100%}@keyframes lr-task-list-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){[part=toggle]{transition:none!important}[part=item][data-status=running] [part=status-icon] svg{animation:none!important}}`];export{styles};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{css}from"lit";const styles=css`:host{--_lr-thinking-panel-max-block-size:var(--lr-size-16rem);display:block}[part=base]{border:var(--lr-border-width-thin) solid var(--lr-thinking-panel-border-color,var(--lr-color-border));border-radius:var(--lr-thinking-panel-radius,var(--lr-radius));background:var(--lr-thinking-panel-bg,var(--lr-color-surface));overflow:hidden}:host(:is([size="2xs"],[size=xs],[size=s],[size=small])) [part=header]{padding:var(--lr-thinking-panel-compact-header-padding,var(--lr-space-2xs) var(--lr-space-s));gap:var(--lr-thinking-panel-compact-header-gap,var(--lr-space-2xs));font-size:var(--lr-thinking-panel-compact-header-font-size,var(--lr-font-size-sm))}:host(:is([size="2xs"],[size=xs],[size=s],[size=small])) [part=body]{padding:var(--lr-thinking-panel-compact-body-padding,var(--lr-space-s));font-size:var(--lr-thinking-panel-compact-body-font-size,var(--lr-font-size-sm))}:host([frame=plain]) [part=base]{background:0 0;border:0;border-radius:0}[part=header]{align-items:center;gap:var(--lr-space-xs);inline-size:100%;padding:var(--lr-space-s) var(--lr-space-m);color:var(--lr-color-text);font:inherit;font-weight:var(--lr-font-weight-semibold);font-size:var(--lr-font-size-md-sm);text-align:start;cursor:pointer;background:0 0;border:none;flex-wrap:wrap;display:flex}[part=header]:hover{background:var(--lr-color-brand-quiet);color:var(--lr-color-brand)}[part=header]:active{background:color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active));color:var(--lr-color-text)}[part=header]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:calc(-1 * var(--lr-focus-ring-offset))}[part=toggle]{transition:transform var(--lr-transition-fast);flex:none;display:inline-flex}:host([expanded]) [part=toggle]{transform:rotate(90deg)}:host(:not([expanded]):dir(rtl)) [part=toggle]{transform:scaleX(-1)}[part=label]{min-inline-size:var(--lr-size-6ch);text-overflow:ellipsis;white-space:nowrap;flex:auto;overflow:hidden}[part=duration]{align-items:center;gap:var(--lr-size-0-35em);overflow-wrap:anywhere;text-align:end;min-inline-size:0;font-weight:var(--lr-font-weight-normal);font-size:var(--lr-font-size-sm);color:var(--lr-color-text-quiet);flex:0 auto;display:inline-flex}[part=duration][data-pending]{color:var(--lr-thinking-panel-pending-color,var(--lr-color-brand))}[part=header]:hover [part=duration],[part=header]:active [part=duration]{color:inherit}.pending-dot{inline-size:var(--lr-size-0-375rem);block-size:var(--lr-size-0-375rem);animation:var(--_lr-motion-animation,lr-thinking-panel-pulse var(--lr-transition-ambient) infinite);background:currentColor;border-radius:50%}@keyframes lr-thinking-panel-pulse{0%,to{opacity:.4;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}[part=body]{min-inline-size:0;max-inline-size:100%;max-block-size:var(--lr-thinking-panel-max-block-size,var(--_lr-thinking-panel-max-block-size));overflow-inline:hidden;overflow-block:auto;overflow-wrap:anywhere;overscroll-behavior:contain;padding:var(--lr-space-m);border-block-start:var(--lr-border-width-thin) solid var(--lr-thinking-panel-border-color,var(--lr-color-border));color:var(--lr-color-text-quiet);font-size:var(--lr-font-size-md-sm);line-height:var(--lr-line-height-normal)}[part=body]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:calc(-1 * var(--lr-focus-ring-offset))}[part=body]:hover:not(:focus-visible){outline-width:var(--lr-thinking-panel-body-hover-outline-width,var(--lr-focus-ring-width));outline-style:var(--lr-thinking-panel-body-hover-outline-style,solid);outline-color:var(--lr-thinking-panel-body-hover-outline-color,var(--lr-color-border));outline-offset:var(--lr-thinking-panel-body-hover-outline-offset,calc(-1 * var(--lr-focus-ring-offset)))}[part=body][hidden]{display:none}@media (prefers-reduced-motion:reduce){[part=toggle]{transition:none!important}.pending-dot{opacity:1;transform:none;animation:none!important}}`;export{styles};
|
|
1
|
+
import{css}from"lit";const styles=css`:host{--_lr-thinking-panel-max-block-size:var(--lr-size-16rem);display:block}[part=base]{border:var(--lr-border-width-thin) solid var(--lr-thinking-panel-border-color,var(--lr-color-border));border-radius:var(--lr-thinking-panel-radius,var(--lr-radius));background:var(--lr-thinking-panel-bg,var(--lr-color-surface));overflow:hidden}:host(:is([size="2xs"],[size=xs],[size=s],[size=small])) [part=header]{padding:var(--lr-thinking-panel-compact-header-padding,var(--lr-space-2xs) var(--lr-space-s));gap:var(--lr-thinking-panel-compact-header-gap,var(--lr-space-2xs));font-size:var(--lr-thinking-panel-compact-header-font-size,var(--lr-font-size-sm))}:host(:is([size="2xs"],[size=xs],[size=s],[size=small])) [part=body]{padding:var(--lr-thinking-panel-compact-body-padding,var(--lr-space-s));font-size:var(--lr-thinking-panel-compact-body-font-size,var(--lr-font-size-sm))}:host([frame=plain]) [part=base]{background:0 0;border:0;border-radius:0}[part=header]{align-items:center;gap:var(--lr-space-xs);inline-size:100%;padding:var(--lr-space-s) var(--lr-space-m);color:var(--lr-color-text);font:inherit;font-weight:var(--lr-font-weight-semibold);font-size:var(--lr-font-size-md-sm);text-align:start;cursor:pointer;background:0 0;border:none;flex-wrap:wrap;display:flex}[part=header]:hover{background:var(--lr-color-brand-quiet);color:var(--lr-color-brand)}[part=header]:active{background:color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active));color:var(--lr-color-text)}[part=header]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:calc(-1 * max(var(--lr-focus-ring-width), calc(var(--lr-focus-ring-width) + var(--lr-focus-ring-offset))))}[part=toggle]{transition:transform var(--lr-transition-fast);flex:none;display:inline-flex}:host([expanded]) [part=toggle]{transform:rotate(90deg)}:host(:not([expanded]):dir(rtl)) [part=toggle]{transform:scaleX(-1)}[part=label]{min-inline-size:var(--lr-size-6ch);text-overflow:ellipsis;white-space:nowrap;flex:auto;overflow:hidden}[part=duration]{align-items:center;gap:var(--lr-size-0-35em);overflow-wrap:anywhere;text-align:end;min-inline-size:0;font-weight:var(--lr-font-weight-normal);font-size:var(--lr-font-size-sm);color:var(--lr-color-text-quiet);flex:0 auto;display:inline-flex}[part=duration][data-pending]{color:var(--lr-thinking-panel-pending-color,var(--lr-color-brand))}[part=header]:hover [part=duration],[part=header]:active [part=duration]{color:inherit}.pending-dot{inline-size:var(--lr-size-0-375rem);block-size:var(--lr-size-0-375rem);animation:var(--_lr-motion-animation,lr-thinking-panel-pulse var(--lr-transition-ambient) infinite);background:currentColor;border-radius:50%}@keyframes lr-thinking-panel-pulse{0%,to{opacity:.4;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}[part=body]{min-inline-size:0;max-inline-size:100%;max-block-size:var(--lr-thinking-panel-max-block-size,var(--_lr-thinking-panel-max-block-size));overflow-inline:hidden;overflow-block:auto;overflow-wrap:anywhere;overscroll-behavior:contain;padding:var(--lr-space-m);border-block-start:var(--lr-border-width-thin) solid var(--lr-thinking-panel-border-color,var(--lr-color-border));color:var(--lr-color-text-quiet);font-size:var(--lr-font-size-md-sm);line-height:var(--lr-line-height-normal)}[part=body]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:calc(-1 * max(var(--lr-focus-ring-width), calc(var(--lr-focus-ring-width) + var(--lr-focus-ring-offset))))}[part=body]:hover:not(:focus-visible){outline-width:var(--lr-thinking-panel-body-hover-outline-width,var(--lr-focus-ring-width));outline-style:var(--lr-thinking-panel-body-hover-outline-style,solid);outline-color:var(--lr-thinking-panel-body-hover-outline-color,var(--lr-color-border));outline-offset:var(--lr-thinking-panel-body-hover-outline-offset,calc(-1 * var(--lr-focus-ring-offset)))}[part=body][hidden]{display:none}@media (prefers-reduced-motion:reduce){[part=toggle]{transition:none!important}.pending-dot{opacity:1;transform:none;animation:none!important}}`;export{styles};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{__decorate}from"tslib";import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.js";import{LyraElement}from"../../../internal/lyra-element.js";import{prefersReducedMotion}from"../../../internal/motion.js";import{finiteCount,finiteRange}from"../../../internal/numbers.js";import{LyraVirtualList}from"../../layout/virtual-list/virtual-list.class.js";import{styles}from"./chat-viewport.styles.js";import{getNumberFormat,getPluralRules}from"../../../internal/intl-cache.js";import{trueDefaultBooleanConverter}from"../../../internal/converters.js";import{acquireAnnouncementSink}from"../../../internal/announcer.js";import{composedAccessibilityText}from"../../../internal/accessibility-visibility.js";import{applyComposedFocusRepair,captureComposedFocusRepair,collectComposedFocusTargets}from"../../../internal/focus-navigation.js";import{LYRA_DEFAULT_chatViewportLabel,LYRA_DEFAULT_collapse,LYRA_DEFAULT_details,LYRA_DEFAULT_jumpToLatest,LYRA_DEFAULT_map,LYRA_DEFAULT_navigation,LYRA_DEFAULT_newMessageCount,LYRA_DEFAULT_newMessages,LYRA_DEFAULT_newMessagesCount,LYRA_DEFAULT_open,LYRA_DEFAULT_search,LYRA_DEFAULT_select}from"../../../internal/default-strings.generated.js";class LyraChatViewport extends LyraElement{constructor(){super(...arguments),this.follow=!0,this.live="off",this.bottomThreshold=24,this.unreadStartIndex=null,this.accessibleLabel=null,this.unreadDividerTop=null,this.pendingUserIntent=!1,this.pendingUserIntentExpiryFrame=null,this.scrollbarDragActive=!1,this.isMounting=!0,this.growthFrame=null,this.armedMode=null,this.armGeneration=0,this.followFocusRepair=null,this.knownProjectedNodes=new WeakSet,this.markUserIntent=()=>{this.pendingUserIntent=!0,this.cancelPendingUserIntentExpiry();const owner=this.ownerDocument.defaultView;if(!owner){this.pendingUserIntent=!1;return}const firstFrame={owner,handle:0};firstFrame.handle=owner.requestAnimationFrame(()=>{if(this.pendingUserIntentExpiryFrame!==firstFrame)return;if(!this.isConnected||this.ownerDocument.defaultView!==owner){this.pendingUserIntentExpiryFrame=null,this.pendingUserIntent=!1;return}const secondFrame={owner,handle:0};secondFrame.handle=owner.requestAnimationFrame(()=>{this.pendingUserIntentExpiryFrame===secondFrame&&(this.pendingUserIntentExpiryFrame=null,this.pendingUserIntent=!1)}),this.pendingUserIntentExpiryFrame=secondFrame}),this.pendingUserIntentExpiryFrame=firstFrame},this.onPointerDown=event=>{const scroll=this.scrollEl;if(!scroll||event.button!==0||event.target!==scroll)return;const computed=getComputedStyle(scroll),borderLeft=Number.parseFloat(computed.borderLeftWidth)||0,borderRight=Number.parseFloat(computed.borderRightWidth)||0,gutter=scroll.offsetWidth-scroll.clientWidth-borderLeft-borderRight;if(gutter<=0)return;const rect=scroll.getBoundingClientRect();if(!(computed.direction==="rtl"?event.clientX<=rect.left+borderLeft+gutter:event.clientX>=rect.right-borderRight-gutter))return;this.scrollbarDragActive=!0;const owner=this.ownerDocument.defaultView;!owner||this.scrollbarDragWindow===owner||(this.releaseScrollbarDragListeners(),this.scrollbarDragWindow=owner,owner.addEventListener("pointerup",this.onPointerUp),owner.addEventListener("pointercancel",this.onPointerUp),owner.addEventListener("lostpointercapture",this.onPointerUp))},this.onPointerUp=()=>{this.scrollbarDragActive=!1,this.releaseScrollbarDragListeners()},this.onKeyDown=e=>{(e.key==="PageUp"||e.key==="ArrowUp"||e.key==="Home")&&this.markUserIntent()},this.onScroll=()=>{const el=this.scrollEl;if(!el)return;if(el.scrollHeight-el.scrollTop-el.clientHeight<=this.effectiveBottomThreshold){this.clearUserIntent(),this.follow||(this.follow=!0);return}(this.consumeUserIntent()||this.scrollbarDragActive)&&this.follow&&(this.follow=!1)},this.onVirtualRangeChanged=e=>{const list=this.virtualListEl;if(!list||e.composedPath()[0]!==list)return;const detail=e.detail;if(!detail||!Number.isFinite(detail.start)||!Number.isFinite(detail.end)||detail.start<0||detail.end<detail.start)return;if(list.items.length>0&&detail.end>=list.items.length-1){this.clearUserIntent(),this.follow||(this.follow=!0);return}if(this.consumeUserIntent()||this.scrollbarDragActive){this.follow&&(this.follow=!1);return}this.follow&&this.performScrollToEnd("auto")},this.onSlotChange=()=>{this.announceNewProjectedNodes();const wasVirtual=this.armedMode==="virtual";this.armObservers(),this.armedMode==="virtual"!==wasVirtual&&this.requestUpdate()},this.onContentMutations=records=>{this.scheduleGrowthTick();const sink=this.announcementSink;if(sink)for(const record of records)for(const node of record.addedNodes)this.knownProjectedNodes.has(node)||node instanceof Element&&node.hasAttribute("data-lr-chat-viewport-unread-boundary")||(this.knownProjectedNodes.add(node),node.parentNode===this&&this.announceProjectedNode(node,sink))}}static{this.defaultStrings={...super.defaultStrings,chatViewportLabel:LYRA_DEFAULT_chatViewportLabel,collapse:LYRA_DEFAULT_collapse,details:LYRA_DEFAULT_details,jumpToLatest:LYRA_DEFAULT_jumpToLatest,map:LYRA_DEFAULT_map,navigation:LYRA_DEFAULT_navigation,newMessageCount:LYRA_DEFAULT_newMessageCount,newMessages:LYRA_DEFAULT_newMessages,newMessagesCount:LYRA_DEFAULT_newMessagesCount,open:LYRA_DEFAULT_open,search:LYRA_DEFAULT_search,select:LYRA_DEFAULT_select}}static{this.styles=[LyraElement.styles,styles]}get messageElements(){let elements=this.contentSlot?.assignedElements({flatten:!0})??Array.from(this.children);for(let depth=0;depth<4&&elements.some(element=>element.localName==="slot");depth++)elements=elements.flatMap(element=>element.localName==="slot"?element.assignedElements({flatten:!0}):[element]);return elements.filter(element=>!element.hasAttribute("data-lr-chat-viewport-unread-boundary"))}get virtualListEl(){const children=this.messageElements;return children.length===1&&children[0]instanceof LyraVirtualList?children[0]:null}get effectiveBottomThreshold(){return finiteRange(this.bottomThreshold,24,0)}get effectiveUnreadStartIndex(){return this.unreadStartIndex==null?null:finiteCount(this.unreadStartIndex)}connectedCallback(){super.connectedCallback(),this.syncAnnouncementSink(),this.hasUpdated&&this.armObservers()}disconnectedCallback(){super.disconnectedCallback(),this.releaseAnnouncementSink(),this.teardownObservers(),this.releaseScrollbarDragListeners(),this.clearUserIntent(),this.scrollbarDragActive=!1,this.followFocusRepair=null,this.unreadBoundaryEl?.remove(),this.unreadBoundaryEl=void 0}willUpdate(changed){if(super.willUpdate(changed),this.hasUpdated&&changed.has("follow")&&this.follow&&changed.get("follow")===!1){const pill=this.renderRoot.querySelector('[part="jump-pill"]');this.followFocusRepair=pill?captureComposedFocusRepair(pill,this.transcriptFocusOwner()):null}this.hasUpdated&&changed.has("unreadStartIndex")&&this.updateUnreadDividerPosition()}firstUpdated(changed){super.firstUpdated(changed),this.armObservers()}updated(changed){super.updated(changed),changed.has("live")&&this.syncAnnouncementSink(),this.unreadBoundaryEl?.setAttribute("aria-label",this.localize("newMessages"));const wasMounting=this.isMounting;if(this.isMounting=!1,changed.has("follow")){if(this.follow){const behavior=wasMounting?"auto":this.pendingScrollBehavior??(prefersReducedMotion(this)?"auto":"smooth");this.pendingScrollBehavior=void 0,this.performScrollToEnd(behavior)}wasMounting||this.emit("lr-follow-change",{following:this.follow})}const focusRepair=this.followFocusRepair;this.followFocusRepair=null,focusRepair&&applyComposedFocusRepair(focusRepair)}transcriptFocusOwner(){const list=this.virtualListEl;return list?collectComposedFocusTargets(list,{includeRoot:!1,mode:"programmatic"}).elements[0]??null:this.scrollEl??null}scrollToBottom(options){const behavior=prefersReducedMotion(this)?"auto":options?.behavior??"smooth";this.follow?this.performScrollToEnd(behavior):(this.pendingScrollBehavior=behavior,this.follow=!0)}scrollToUnread(options){const unreadStartIndex=this.effectiveUnreadStartIndex;if(unreadStartIndex==null)return!1;const behavior=prefersReducedMotion(this)?"auto":options?.behavior??"smooth",list=this.virtualListEl;if(list)return unreadStartIndex>=list.items.length?!1:(list.scrollToIndex(unreadStartIndex,{align:"start",behavior}),!0);const scrollEl=this.scrollEl;return!scrollEl||this.unreadDividerTop==null?!1:(scrollEl.scrollTo({top:this.unreadDividerTop,behavior}),!0)}performScrollToEnd(behavior){const list=this.virtualListEl;if(list){list.items.length>0&&list.scrollToIndex(list.items.length-1,{align:"end",behavior});return}const el=this.scrollEl;el&&el.scrollTo({top:el.scrollHeight,behavior})}get totalCount(){const list=this.virtualListEl;return list?list.items.length:this.messageElements.length}get unreadCount(){const unreadStartIndex=this.effectiveUnreadStartIndex;return unreadStartIndex==null?0:Math.max(0,this.totalCount-unreadStartIndex)}pillLabel(){const count=this.unreadCount;if(count<=0)return this.localize("jumpToLatest");const key=getPluralRules(this.effectiveLocale).select(count)==="one"?"newMessageCount":"newMessagesCount";return this.localize(key,void 0,{count:getNumberFormat(this.effectiveLocale).format(count)})}updateUnreadDividerPosition(){const unreadStartIndex=this.effectiveUnreadStartIndex;if(this.virtualListEl||unreadStartIndex==null){this.unreadDividerTop=null,this.syncSemanticUnreadBoundary();return}const content=this.contentEl,target=this.messageElements[unreadStartIndex];if(!target||!content){this.unreadDividerTop=null,this.syncSemanticUnreadBoundary();return}this.syncSemanticUnreadBoundary(target),this.unreadDividerTop=target.getBoundingClientRect().top-content.getBoundingClientRect().top}syncSemanticUnreadBoundary(target){if(!target||this.virtualListEl){this.unreadBoundaryEl?.remove(),this.unreadBoundaryEl=void 0;return}const parent=target.parentNode;if(!parent)return;const boundary=this.unreadBoundaryEl??this.ownerDocument.createElement("div");boundary.setAttribute("data-lr-chat-viewport-unread-boundary",""),boundary.setAttribute("role","separator"),boundary.setAttribute("aria-label",this.localize("newMessages"));const targetSlot=target.getAttribute("slot");targetSlot===null?boundary.removeAttribute("slot"):boundary.setAttribute("slot",targetSlot),(boundary.parentNode!==parent||boundary.nextSibling!==target)&&parent.insertBefore(boundary,target),this.unreadBoundaryEl=boundary,this.knownProjectedNodes.add(boundary)}cancelPendingUserIntentExpiry(){const frame=this.pendingUserIntentExpiryFrame;frame&&frame.owner.cancelAnimationFrame(frame.handle),this.pendingUserIntentExpiryFrame=null}clearUserIntent(){this.pendingUserIntent=!1,this.cancelPendingUserIntentExpiry()}consumeUserIntent(){const wasPending=this.pendingUserIntent;return this.clearUserIntent(),wasPending}releaseScrollbarDragListeners(){const owner=this.scrollbarDragWindow;owner&&(owner.removeEventListener("pointerup",this.onPointerUp),owner.removeEventListener("pointercancel",this.onPointerUp),owner.removeEventListener("lostpointercapture",this.onPointerUp),this.scrollbarDragWindow=void 0)}scheduleGrowthTick(){if(this.growthFrame)return;const owner=this.ownerDocument.defaultView;if(!owner)return;const frame={owner,handle:0};frame.handle=owner.requestAnimationFrame(()=>{this.growthFrame===frame&&(this.growthFrame=null,!(!this.isConnected||this.ownerDocument.defaultView!==owner)&&(this.updateUnreadDividerPosition(),this.follow&&this.performScrollToEnd("auto")))}),this.growthFrame=frame}releaseAnnouncementSink(){this.announcementSink?.release(),this.announcementSink=void 0}syncAnnouncementSink(){const politeness=this.live==="polite"||this.live==="assertive"?this.live:void 0;if(!this.isConnected||politeness===void 0){this.releaseAnnouncementSink();return}this.announcementSink?.politeness===politeness&&this.announcementSink.element.ownerDocument===this.ownerDocument||(this.releaseAnnouncementSink(),this.announcementSink=acquireAnnouncementSink(politeness,{document:this.ownerDocument,source:this}))}announcementTextFor(node){const primary=composedAccessibilityText(node);if(!(node instanceof Element)||!node.shadowRoot)return primary;const content=composedAccessibilityText(node.childNodes),normalizedPrimary=primary.replace(/\s+/g," ").trim(),normalizedContent=content.replace(/\s+/g," ").trim();return!normalizedContent||normalizedPrimary.includes(normalizedContent)?primary:primary?`${primary} ${content}`:content}announceProjectedNode(node,sink){const text=this.announcementTextFor(node).replace(/\s+/g," ").trim();if(text){sink.announce(text);return}node instanceof Element&&node.localName.includes("-")&&this.announceAfterRender(node)}async announceAfterRender(node){const registry=node.ownerDocument.defaultView?.customElements;registry&&!registry.get(node.localName)&&await registry.whenDefined(node.localName);const pending=node.updateComplete;if(!(pending instanceof Promise))return;try{await pending}catch{return}const sink=this.announcementSink;if(!sink||!this.isConnected||node.parentNode!==this)return;const text=this.announcementTextFor(node).replace(/\s+/g," ").trim();text&&sink.announce(text)}announceNewProjectedNodes(){const sink=this.announcementSink;for(const node of this.messageElements)this.knownProjectedNodes.has(node)||(this.knownProjectedNodes.add(node),!(!sink||!this.hasUpdated)&&this.announceProjectedNode(node,sink))}armObservers(){const owner=this.ownerDocument.defaultView,list=this.virtualListEl,mode=list?"virtual":"slotted";for(const node of this.messageElements)this.knownProjectedNodes.add(node);if(this.observerWindow===owner&&this.armedMode===mode&&(mode==="slotted"||this.listenedVirtualList===list))return;if(this.teardownObservers(),this.observerWindow=owner??void 0,this.armedMode=mode,list)this.listenedVirtualList=list,list.addEventListener("lr-visible-range-change",this.onVirtualRangeChanged);else{const content=this.contentEl;if(content){let baselineSeen=!1;const ResizeObserverCtor=owner?.ResizeObserver;if(ResizeObserverCtor){let observer;observer=new ResizeObserverCtor(()=>{if(!(!this.isConnected||this.ownerDocument.defaultView!==owner||this.contentResizeObserver!==observer)){if(!baselineSeen){baselineSeen=!0;return}this.scheduleGrowthTick()}}),this.contentResizeObserver=observer,this.contentResizeObserver.observe(content)}}const MutationObserverCtor=owner?.MutationObserver;if(MutationObserverCtor){let observer;observer=new MutationObserverCtor(records=>{!this.isConnected||this.ownerDocument.defaultView!==owner||this.contentMutationObserver!==observer||this.onContentMutations(records)}),this.contentMutationObserver=observer,this.contentMutationObserver.observe(this,{childList:!0})}}const scrollEl=this.scrollEl;if(scrollEl){let baselineSeen=!1;const ResizeObserverCtor=owner?.ResizeObserver;if(ResizeObserverCtor){let observer;observer=new ResizeObserverCtor(()=>{if(!(!this.isConnected||this.ownerDocument.defaultView!==owner||this.scrollResizeObserver!==observer)){if(!baselineSeen){baselineSeen=!0;return}this.follow&&this.performScrollToEnd("auto")}}),this.scrollResizeObserver=observer,this.scrollResizeObserver.observe(scrollEl)}}const generation=++this.armGeneration;queueMicrotask(()=>{!this.isConnected||generation!==this.armGeneration||this.updateUnreadDividerPosition()})}teardownObservers(){this.scrollResizeObserver?.disconnect(),this.scrollResizeObserver=void 0,this.contentResizeObserver?.disconnect(),this.contentResizeObserver=void 0,this.contentMutationObserver?.disconnect(),this.contentMutationObserver=void 0,this.listenedVirtualList?.removeEventListener("lr-visible-range-change",this.onVirtualRangeChanged),this.listenedVirtualList=void 0,this.observerWindow=void 0,this.armedMode=null,this.armGeneration++;const frame=this.growthFrame;frame&&frame.owner.cancelAnimationFrame(frame.handle),this.growthFrame=null}render(){const label=this.accessibleLabel??(this.label==null?this.localize("chatViewportLabel"):this.label),virtual=this.virtualListEl!==null;return html`
|
|
1
|
+
import{__decorate}from"tslib";import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.js";import{LyraElement}from"../../../internal/lyra-element.js";import{prefersReducedMotion}from"../../../internal/motion.js";import{finiteCount,finiteRange}from"../../../internal/numbers.js";import{LyraVirtualList}from"../../layout/virtual-list/virtual-list.class.js";import{styles}from"./chat-viewport.styles.js";import{getNumberFormat,getPluralRules}from"../../../internal/intl-cache.js";import{trueDefaultBooleanConverter}from"../../../internal/converters.js";import{acquireAnnouncementSink}from"../../../internal/announcer.js";import{composedAccessibilityText}from"../../../internal/accessibility-visibility.js";import{applyComposedFocusRepair,captureComposedFocusRepair,collectComposedFocusTargets}from"../../../internal/focus-navigation.js";import{LYRA_DEFAULT_chatViewportLabel,LYRA_DEFAULT_collapse,LYRA_DEFAULT_details,LYRA_DEFAULT_jumpToLatest,LYRA_DEFAULT_map,LYRA_DEFAULT_navigation,LYRA_DEFAULT_newMessageCount,LYRA_DEFAULT_newMessages,LYRA_DEFAULT_newMessagesCount,LYRA_DEFAULT_open,LYRA_DEFAULT_search,LYRA_DEFAULT_select}from"../../../internal/default-strings.generated.js";class LyraChatViewport extends LyraElement{constructor(){super(...arguments),this.follow=!0,this.live="off",this.bottomThreshold=24,this.unreadStartIndex=null,this.accessibleLabel=null,this.unreadDividerTop=null,this.pendingUserIntent=!1,this.pendingUserIntentExpiryFrame=null,this.scrollbarDragActive=!1,this.isMounting=!0,this.growthFrame=null,this.armedMode=null,this.armGeneration=0,this.followFocusRepair=null,this.knownProjectedNodes=new WeakSet,this.markUserIntent=()=>{this.pendingUserIntent=!0,this.cancelPendingUserIntentExpiry();const owner=this.ownerDocument.defaultView;if(!owner){this.pendingUserIntent=!1;return}const firstFrame={owner,handle:0};firstFrame.handle=owner.requestAnimationFrame(()=>{if(this.pendingUserIntentExpiryFrame!==firstFrame)return;if(!this.isConnected||this.ownerDocument.defaultView!==owner){this.pendingUserIntentExpiryFrame=null,this.pendingUserIntent=!1;return}const secondFrame={owner,handle:0};secondFrame.handle=owner.requestAnimationFrame(()=>{this.pendingUserIntentExpiryFrame===secondFrame&&(this.pendingUserIntentExpiryFrame=null,this.pendingUserIntent=!1)}),this.pendingUserIntentExpiryFrame=secondFrame}),this.pendingUserIntentExpiryFrame=firstFrame},this.onPointerDown=event=>{const scroll=this.scrollEl;if(!scroll||event.button!==0||event.target!==scroll)return;const computed=getComputedStyle(scroll),borderLeft=Number.parseFloat(computed.borderLeftWidth)||0,borderRight=Number.parseFloat(computed.borderRightWidth)||0,gutter=scroll.offsetWidth-scroll.clientWidth-borderLeft-borderRight;if(gutter<=0)return;const rect=scroll.getBoundingClientRect();if(!(computed.direction==="rtl"?event.clientX<=rect.left+borderLeft+gutter:event.clientX>=rect.right-borderRight-gutter))return;this.scrollbarDragActive=!0;const owner=this.ownerDocument.defaultView;!owner||this.scrollbarDragWindow===owner||(this.releaseScrollbarDragListeners(),this.scrollbarDragWindow=owner,owner.addEventListener("pointerup",this.onPointerUp),owner.addEventListener("pointercancel",this.onPointerUp),owner.addEventListener("lostpointercapture",this.onPointerUp))},this.onPointerUp=()=>{this.scrollbarDragActive=!1,this.releaseScrollbarDragListeners()},this.onKeyDown=e=>{(e.key==="PageUp"||e.key==="ArrowUp"||e.key==="Home")&&this.markUserIntent()},this.onScroll=()=>{const el=this.scrollEl;if(!el)return;if(el.scrollHeight-el.scrollTop-el.clientHeight<=this.effectiveBottomThreshold){this.clearUserIntent(),this.follow||(this.follow=!0);return}(this.consumeUserIntent()||this.scrollbarDragActive)&&this.follow&&(this.follow=!1)},this.onVirtualRangeChanged=e=>{const list=this.virtualListEl;if(!list||e.composedPath()[0]!==list)return;const detail=e.detail;if(!detail||!Number.isFinite(detail.start)||!Number.isFinite(detail.end)||detail.start<0||detail.end<detail.start)return;if(list.items.length>0&&detail.end>=list.items.length-1){this.clearUserIntent(),this.follow||(this.follow=!0);return}if(this.consumeUserIntent()||this.scrollbarDragActive){this.follow&&(this.follow=!1);return}this.follow&&this.performScrollToEnd("auto")},this.onSlotChange=()=>{this.announceNewProjectedNodes();const wasVirtual=this.armedMode==="virtual";this.armObservers(),this.armedMode==="virtual"!==wasVirtual&&this.requestUpdate()},this.onContentMutations=records=>{this.scheduleGrowthTick();const sink=this.announcementSink;if(sink)for(const record of records)for(const node of record.addedNodes)this.knownProjectedNodes.has(node)||node instanceof Element&&node.hasAttribute("data-lr-chat-viewport-unread-boundary")||(this.knownProjectedNodes.add(node),node.parentNode===this&&this.announceProjectedNode(node,sink))}}static{this.defaultStrings={...super.defaultStrings,chatViewportLabel:LYRA_DEFAULT_chatViewportLabel,collapse:LYRA_DEFAULT_collapse,details:LYRA_DEFAULT_details,jumpToLatest:LYRA_DEFAULT_jumpToLatest,map:LYRA_DEFAULT_map,navigation:LYRA_DEFAULT_navigation,newMessageCount:LYRA_DEFAULT_newMessageCount,newMessages:LYRA_DEFAULT_newMessages,newMessagesCount:LYRA_DEFAULT_newMessagesCount,open:LYRA_DEFAULT_open,search:LYRA_DEFAULT_search,select:LYRA_DEFAULT_select}}static{this.styles=[LyraElement.styles,styles]}get messageElements(){let elements=this.contentSlot?.assignedElements({flatten:!0})??Array.from(this.children);for(let depth=0;depth<4&&elements.some(element=>element.localName==="slot");depth++)elements=elements.flatMap(element=>element.localName==="slot"?element.assignedElements({flatten:!0}):[element]);return elements.filter(element=>!element.hasAttribute("data-lr-chat-viewport-unread-boundary"))}get virtualListEl(){const children=this.messageElements;return children.length===1&&children[0]instanceof LyraVirtualList?children[0]:null}get effectiveBottomThreshold(){return finiteRange(this.bottomThreshold,24,0)}get effectiveUnreadStartIndex(){return this.unreadStartIndex==null?null:finiteCount(this.unreadStartIndex)}connectedCallback(){super.connectedCallback(),this.syncAnnouncementSink(),this.hasUpdated&&this.armObservers()}disconnectedCallback(){super.disconnectedCallback(),this.releaseAnnouncementSink(),this.teardownObservers(),this.releaseScrollbarDragListeners(),this.clearUserIntent(),this.scrollbarDragActive=!1,this.followFocusRepair=null,this.unreadBoundaryEl?.remove(),this.unreadBoundaryEl=void 0}willUpdate(changed){if(super.willUpdate(changed),this.hasUpdated&&changed.has("follow")&&this.follow&&changed.get("follow")===!1){const pill=this.renderRoot.querySelector('[part="jump-pill"]');this.followFocusRepair=pill?captureComposedFocusRepair(pill,this.transcriptFocusOwner()):null}this.hasUpdated&&changed.has("unreadStartIndex")&&this.updateUnreadDividerPosition()}firstUpdated(changed){super.firstUpdated(changed),this.armObservers()}updated(changed){super.updated(changed),changed.has("live")&&this.syncAnnouncementSink(),this.unreadBoundaryEl?.setAttribute("aria-label",this.localize("newMessages"));const wasMounting=this.isMounting;if(this.isMounting=!1,changed.has("follow")){if(this.follow){const behavior=wasMounting?"auto":this.pendingScrollBehavior??(prefersReducedMotion(this)?"auto":"smooth");this.pendingScrollBehavior=void 0,this.performScrollToEnd(behavior)}wasMounting||this.emit("lr-follow-change",{following:this.follow})}const focusRepair=this.followFocusRepair;this.followFocusRepair=null,focusRepair&&applyComposedFocusRepair(focusRepair)}transcriptFocusOwner(){const list=this.virtualListEl;return list?collectComposedFocusTargets(list,{includeRoot:!1,mode:"programmatic"}).elements[0]??null:this.scrollEl??null}scrollToBottom(options){const behavior=prefersReducedMotion(this)?"auto":options?.behavior??"smooth";this.follow?this.performScrollToEnd(behavior):(this.pendingScrollBehavior=behavior,this.follow=!0)}scrollToUnread(options){const unreadStartIndex=this.effectiveUnreadStartIndex;if(unreadStartIndex==null)return!1;const behavior=prefersReducedMotion(this)?"auto":options?.behavior??"smooth",list=this.virtualListEl;if(list)return unreadStartIndex>=list.items.length?!1:(list.scrollToIndex(unreadStartIndex,{align:"start",behavior}),!0);const scrollEl=this.scrollEl;return!scrollEl||this.unreadDividerTop==null?!1:(scrollEl.scrollTo({top:this.unreadDividerTop,behavior}),!0)}performScrollToEnd(behavior){const list=this.virtualListEl;if(list){list.items.length>0&&list.scrollToIndex(list.items.length-1,{align:"end",behavior});return}const el=this.scrollEl;el&&el.scrollTo({top:el.scrollHeight,behavior})}get totalCount(){const list=this.virtualListEl;return list?list.items.length:this.messageElements.length}get unreadCount(){const unreadStartIndex=this.effectiveUnreadStartIndex;return unreadStartIndex==null?0:Math.max(0,this.totalCount-unreadStartIndex)}pillLabel(){const count=this.unreadCount;if(count<=0)return this.localize("jumpToLatest");const key=getPluralRules(this.effectiveLocale).select(count)==="one"?"newMessageCount":"newMessagesCount";return this.localize(key,void 0,{count:getNumberFormat(this.effectiveLocale).format(count)})}updateUnreadDividerPosition(){const unreadStartIndex=this.effectiveUnreadStartIndex;if(this.virtualListEl||unreadStartIndex==null){this.unreadDividerTop=null,this.syncSemanticUnreadBoundary();return}const content=this.contentEl,target=this.messageElements[unreadStartIndex];if(!target||!content){this.unreadDividerTop=null,this.syncSemanticUnreadBoundary();return}this.syncSemanticUnreadBoundary(target),this.unreadDividerTop=target.getBoundingClientRect().top-content.getBoundingClientRect().top}syncSemanticUnreadBoundary(target){if(!target||this.virtualListEl){this.unreadBoundaryEl?.remove(),this.unreadBoundaryEl=void 0;return}const parent=target.parentNode;if(!parent)return;const boundary=this.unreadBoundaryEl??this.ownerDocument.createElement("div");boundary.setAttribute("data-lr-chat-viewport-unread-boundary",""),boundary.setAttribute("role","separator"),boundary.setAttribute("aria-label",this.localize("newMessages"));const targetSlot=target.getAttribute("slot");targetSlot===null?boundary.removeAttribute("slot"):boundary.setAttribute("slot",targetSlot),(boundary.parentNode!==parent||boundary.nextSibling!==target)&&parent.insertBefore(boundary,target),this.unreadBoundaryEl=boundary,this.knownProjectedNodes.add(boundary)}cancelPendingUserIntentExpiry(){const frame=this.pendingUserIntentExpiryFrame;frame&&frame.owner.cancelAnimationFrame(frame.handle),this.pendingUserIntentExpiryFrame=null}clearUserIntent(){this.pendingUserIntent=!1,this.cancelPendingUserIntentExpiry()}consumeUserIntent(){const wasPending=this.pendingUserIntent;return this.clearUserIntent(),wasPending}releaseScrollbarDragListeners(){const owner=this.scrollbarDragWindow;owner&&(owner.removeEventListener("pointerup",this.onPointerUp),owner.removeEventListener("pointercancel",this.onPointerUp),owner.removeEventListener("lostpointercapture",this.onPointerUp),this.scrollbarDragWindow=void 0)}scheduleGrowthTick(){if(this.growthFrame)return;const owner=this.ownerDocument.defaultView;if(!owner)return;const frame={owner,handle:0};frame.handle=owner.requestAnimationFrame(()=>{this.growthFrame===frame&&(this.growthFrame=null,!(!this.isConnected||this.ownerDocument.defaultView!==owner)&&(this.updateUnreadDividerPosition(),this.follow&&this.performScrollToEnd("auto")))}),this.growthFrame=frame}releaseAnnouncementSink(){this.announcementSink?.release(),this.announcementSink=void 0}syncAnnouncementSink(){const politeness=this.live==="polite"||this.live==="assertive"?this.live:void 0;if(!this.isConnected||politeness===void 0){this.releaseAnnouncementSink();return}this.announcementSink?.politeness===politeness&&this.announcementSink.element.ownerDocument===this.ownerDocument||(this.releaseAnnouncementSink(),this.announcementSink=acquireAnnouncementSink(politeness,{document:this.ownerDocument,source:this}))}announcementTextFor(node){const primary=composedAccessibilityText(node);if(node.nodeType!==Node.ELEMENT_NODE||!node.shadowRoot)return primary;const content=composedAccessibilityText(node.childNodes),normalizedPrimary=primary.replace(/\s+/g," ").trim(),normalizedContent=content.replace(/\s+/g," ").trim();return!normalizedContent||normalizedPrimary.includes(normalizedContent)?primary:primary?`${primary} ${content}`:content}announceProjectedNode(node,sink){const text=this.announcementTextFor(node).replace(/\s+/g," ").trim();if(text){sink.announce(text);return}node.nodeType===Node.ELEMENT_NODE&&node.localName.includes("-")&&this.announceAfterRender(node)}async announceAfterRender(node){const registry=node.ownerDocument.defaultView?.customElements;!node.matches(":defined")&®istry&&!registry.get(node.localName)&&await registry.whenDefined(node.localName);try{const pending=node.updateComplete;if(pending===null||typeof pending!="object"&&typeof pending!="function"||typeof pending.then!="function")return;await pending}catch{return}const sink=this.announcementSink;if(!sink||!this.isConnected||node.parentNode!==this)return;const text=this.announcementTextFor(node).replace(/\s+/g," ").trim();text&&sink.announce(text)}announceNewProjectedNodes(){const sink=this.announcementSink;for(const node of this.messageElements)this.knownProjectedNodes.has(node)||(this.knownProjectedNodes.add(node),!(!sink||!this.hasUpdated)&&this.announceProjectedNode(node,sink))}armObservers(){const owner=this.ownerDocument.defaultView,list=this.virtualListEl,mode=list?"virtual":"slotted";for(const node of this.messageElements)this.knownProjectedNodes.add(node);if(this.observerWindow===owner&&this.armedMode===mode&&(mode==="slotted"||this.listenedVirtualList===list))return;if(this.teardownObservers(),this.observerWindow=owner??void 0,this.armedMode=mode,list)this.listenedVirtualList=list,list.addEventListener("lr-visible-range-change",this.onVirtualRangeChanged);else{const content=this.contentEl;if(content){let baselineSeen=!1;const ResizeObserverCtor=owner?.ResizeObserver;if(ResizeObserverCtor){let observer;observer=new ResizeObserverCtor(()=>{if(!(!this.isConnected||this.ownerDocument.defaultView!==owner||this.contentResizeObserver!==observer)){if(!baselineSeen){baselineSeen=!0;return}this.scheduleGrowthTick()}}),this.contentResizeObserver=observer,this.contentResizeObserver.observe(content)}}const MutationObserverCtor=owner?.MutationObserver;if(MutationObserverCtor){let observer;observer=new MutationObserverCtor(records=>{!this.isConnected||this.ownerDocument.defaultView!==owner||this.contentMutationObserver!==observer||this.onContentMutations(records)}),this.contentMutationObserver=observer,this.contentMutationObserver.observe(this,{childList:!0})}}const scrollEl=this.scrollEl;if(scrollEl){let baselineSeen=!1;const ResizeObserverCtor=owner?.ResizeObserver;if(ResizeObserverCtor){let observer;observer=new ResizeObserverCtor(()=>{if(!(!this.isConnected||this.ownerDocument.defaultView!==owner||this.scrollResizeObserver!==observer)){if(!baselineSeen){baselineSeen=!0;return}this.follow&&this.performScrollToEnd("auto")}}),this.scrollResizeObserver=observer,this.scrollResizeObserver.observe(scrollEl)}}const generation=++this.armGeneration;queueMicrotask(()=>{!this.isConnected||generation!==this.armGeneration||this.updateUnreadDividerPosition()})}teardownObservers(){this.scrollResizeObserver?.disconnect(),this.scrollResizeObserver=void 0,this.contentResizeObserver?.disconnect(),this.contentResizeObserver=void 0,this.contentMutationObserver?.disconnect(),this.contentMutationObserver=void 0,this.listenedVirtualList?.removeEventListener("lr-visible-range-change",this.onVirtualRangeChanged),this.listenedVirtualList=void 0,this.observerWindow=void 0,this.armedMode=null,this.armGeneration++;const frame=this.growthFrame;frame&&frame.owner.cancelAnimationFrame(frame.handle),this.growthFrame=null}render(){const label=this.accessibleLabel??(this.label==null?this.localize("chatViewportLabel"):this.label),virtual=this.virtualListEl!==null;return html`
|
|
2
2
|
<div part="base" ?data-virtual=${virtual}>
|
|
3
3
|
<div
|
|
4
4
|
part="scroll"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{css}from"lit";const styles=css`:host{--_lr-code-block-copy-bg:transparent;--_lr-code-block-copy-bg-hover:var(--lr-color-brand-quiet);--_lr-code-block-copy-bg-active:color-mix(in oklab, var(--lr-icon-button-bg-hover,var(--lr-icon-button-background-hover,var(--lr-color-brand-quiet))), var(--lr-color-mix-partner) var(--lr-color-mix-active));--_lr-code-block-copy-color:var(--lr-color-text-quiet);--_lr-code-block-copy-color-hover:var(--lr-color-brand);--_lr-code-block-copy-color-active:var(--lr-icon-button-color-hover,var(--lr-color-brand));--_lr-code-block-copy-radius:var(--lr-radius);font-size:var(--lr-font-size-sm);display:block}[part=base]{box-sizing:border-box;border:var(--lr-border-width-thin) solid var(--lr-color-border-subtle);border-radius:var(--lr-radius);background:var(--lr-color-surface);flex-direction:column;block-size:100%;display:flex;overflow:hidden}[part=header]{align-items:center;gap:var(--lr-space-xs);min-inline-size:0;padding:var(--lr-space-xs) var(--lr-space-s);border-block-end:var(--lr-border-width-thin) solid var(--lr-color-border-subtle);background:var(--lr-color-surface);font-family:var(--lr-font);display:flex}[part=toggle]{font:inherit;inline-size:var(--lr-size-1-25rem);block-size:var(--lr-size-1-25rem);min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);color:var(--lr-color-text-quiet);border-radius:var(--lr-radius);cursor:pointer;background:0 0;border:none;flex:none;justify-content:center;align-items:center;padding:0;display:inline-flex}[part=toggle]:hover{background:var(--lr-color-brand-quiet);color:var(--lr-color-brand)}[part=toggle]:active{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=toggle] .chevron{transition:transform var(--lr-transition-fast);display:inline-flex}:host(:not([collapsed])) [part=toggle] .chevron{transform:rotate(90deg)}:host([collapsed]:dir(rtl)) [part=toggle] .chevron{transform:scaleX(-1)}[part=filename]{text-overflow:ellipsis;white-space:nowrap;min-inline-size:0;font-family:var(--lr-code-block-font,var(--lr-font-mono));font-size:var(--lr-font-size-xs);font-weight:var(--lr-font-weight-semibold);color:var(--lr-color-text);flex:auto;overflow:hidden}[part=language]{text-overflow:ellipsis;white-space:nowrap;min-inline-size:0;max-inline-size:100%;padding:var(--lr-size-0-0625rem) var(--lr-size-0-4375rem);border-radius:var(--lr-radius-pill);background:var(--lr-code-block-language-bg,var(--lr-color-brand-quiet));color:var(--lr-code-block-language-color,var(--lr-color-brand));font-size:var(--lr-size-0-6875rem);line-height:var(--lr-line-height-1-4);text-transform:uppercase;letter-spacing:var(--lr-size-0-02em);direction:ltr;unicode-bidi:isolate;flex:0 auto;overflow:hidden}[part~=copy-button]{font-size:var(--lr-font-size-xs);line-height:var(--lr-line-height-none);--_lr-icon-button-background-default:var(--_lr-code-block-copy-bg);--_lr-icon-button-background-hover-default:var(--_lr-code-block-copy-bg-hover);--_lr-icon-button-background-active-default:var(--_lr-code-block-copy-bg-active);--_lr-icon-button-color-default:var(--_lr-code-block-copy-color);--_lr-icon-button-color-hover-default:var(--_lr-code-block-copy-color-hover);--_lr-icon-button-color-active-default:var(--_lr-code-block-copy-color-active);--_lr-icon-button-radius-default:var(--_lr-code-block-copy-radius);flex:none;margin-inline-start:auto}[part~=copy-button-text]::part(button){padding:var(--lr-size-0-1875rem) var(--lr-space-xs)}[part=toggle]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:var(--lr-focus-ring-offset)}[part=header-actions]{align-items:center;gap:var(--lr-space-2xs);flex:none;display:inline-flex}[part=header-actions][hidden]{display:none}[part=body]{block-size:100%;max-block-size:var(--lr-code-block-max-height,none);scrollbar-width:var(--lr-theme-scrollbar-width,auto);scrollbar-gutter:var(--lr-theme-scrollbar-gutter,auto);direction:ltr;flex:auto;display:block;overflow:auto}[part=body][hidden]{display:none}[part=body]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:calc(-1 * var(--lr-focus-ring-offset))}[part=body] lr-skeleton{padding:var(--lr-space-s) var(--lr-space-m);--lr-skeleton-w:100%;--lr-skeleton-h:var(--lr-size-8rem);display:block}[part=pre]{padding:var(--lr-space-s) var(--lr-space-m);box-sizing:border-box;background:var(--lr-color-surface);inline-size:max-content;min-inline-size:100%;font-family:var(--lr-code-block-font,var(--lr-font-mono));font-size:inherit;line-height:var(--lr-line-height-normal);white-space:pre;tab-size:var(--lr-code-block-tab-size,2);direction:ltr;unicode-bidi:isolate;margin:0}[part=code]{font-family:inherit;display:grid}[part=pre] .line{display:block}[part=pre] .line-number{min-inline-size:var(--lr-size-2-5ch);color:var(--lr-color-text-quiet);text-align:end;user-select:none;margin-inline-end:var(--lr-space-s);display:inline-block}[part=pre] [data-highlighted]{background:var(--lr-code-block-highlighted-line-bg,var(--lr-color-warning-quiet))}[part=pre] [data-active]{outline:var(--lr-border-width-thin) solid var(--lr-code-block-active-line-outline-color,var(--lr-color-brand));outline-offset:calc(-1 * var(--lr-border-width-thin))}[part=pre] button.line-gutter{min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);color:inherit;font:inherit;text-align:start;cursor:pointer;background:0 0;border:none;justify-content:end;align-items:center;margin:0;margin-inline-end:var(--lr-space-s);padding:0;display:inline-flex}[part=pre] button.line-gutter:hover{background:var(--lr-color-brand-quiet)}[part=pre] button.line-gutter:active{background:color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active))}[part=pre] button.line-gutter:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:calc(-1 * var(--lr-focus-ring-offset))}[part=body][data-dark-theme=true] [part=pre],[part=body][data-dark-theme=true] [part=pre] span{color:var(--shiki-dark,inherit)!important;background-color:var(--shiki-dark-bg,transparent)!important}[part=body][data-dark-theme=true] [part=pre] .line-number,[part=body][data-dark-theme=true] [part=pre] button.line-gutter{color:var(--lr-color-text-quiet)!important}[part=body][data-dark-theme=true] [part=pre] [data-highlighted]{background:var(--lr-code-block-highlighted-line-bg,var(--lr-color-warning-quiet))!important}@media (prefers-reduced-motion:reduce){[part=toggle] .chevron{transition:none!important}}`;export{styles};
|
|
1
|
+
import{css}from"lit";const styles=css`:host{--_lr-code-block-copy-bg:transparent;--_lr-code-block-copy-bg-hover:var(--lr-color-brand-quiet);--_lr-code-block-copy-bg-active:color-mix(in oklab, var(--lr-icon-button-bg-hover,var(--lr-icon-button-background-hover,var(--lr-color-brand-quiet))), var(--lr-color-mix-partner) var(--lr-color-mix-active));--_lr-code-block-copy-color:var(--lr-color-text-quiet);--_lr-code-block-copy-color-hover:var(--lr-color-brand);--_lr-code-block-copy-color-active:var(--lr-icon-button-color-hover,var(--lr-color-brand));--_lr-code-block-copy-radius:var(--lr-radius);font-size:var(--lr-font-size-sm);display:block}[part=base]{box-sizing:border-box;border:var(--lr-border-width-thin) solid var(--lr-color-border-subtle);border-radius:var(--lr-radius);background:var(--lr-color-surface);flex-direction:column;block-size:100%;display:flex;overflow:hidden}[part=header]{align-items:center;gap:var(--lr-space-xs);min-inline-size:0;padding:var(--lr-space-xs) var(--lr-space-s);border-block-end:var(--lr-border-width-thin) solid var(--lr-color-border-subtle);background:var(--lr-color-surface);font-family:var(--lr-font);display:flex}[part=toggle]{font:inherit;inline-size:var(--lr-size-1-25rem);block-size:var(--lr-size-1-25rem);min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);color:var(--lr-color-text-quiet);border-radius:var(--lr-radius);cursor:pointer;background:0 0;border:none;flex:none;justify-content:center;align-items:center;padding:0;display:inline-flex}[part=toggle]:hover{background:var(--lr-color-brand-quiet);color:var(--lr-color-brand)}[part=toggle]:active{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=toggle] .chevron{transition:transform var(--lr-transition-fast);display:inline-flex}:host(:not([collapsed])) [part=toggle] .chevron{transform:rotate(90deg)}:host([collapsed]:dir(rtl)) [part=toggle] .chevron{transform:scaleX(-1)}[part=filename]{text-overflow:ellipsis;white-space:nowrap;min-inline-size:0;font-family:var(--lr-code-block-font,var(--lr-font-mono));font-size:var(--lr-font-size-xs);font-weight:var(--lr-font-weight-semibold);color:var(--lr-color-text);flex:auto;overflow:hidden}[part=language]{text-overflow:ellipsis;white-space:nowrap;min-inline-size:0;max-inline-size:100%;padding:var(--lr-size-0-0625rem) var(--lr-size-0-4375rem);border-radius:var(--lr-radius-pill);background:var(--lr-code-block-language-bg,var(--lr-color-brand-quiet));color:var(--lr-code-block-language-color,var(--lr-color-brand));font-size:var(--lr-size-0-6875rem);line-height:var(--lr-line-height-1-4);text-transform:uppercase;letter-spacing:var(--lr-size-0-02em);direction:ltr;unicode-bidi:isolate;flex:0 auto;overflow:hidden}[part~=copy-button]{font-size:var(--lr-font-size-xs);line-height:var(--lr-line-height-none);--_lr-icon-button-background-default:var(--_lr-code-block-copy-bg);--_lr-icon-button-background-hover-default:var(--_lr-code-block-copy-bg-hover);--_lr-icon-button-background-active-default:var(--_lr-code-block-copy-bg-active);--_lr-icon-button-color-default:var(--_lr-code-block-copy-color);--_lr-icon-button-color-hover-default:var(--_lr-code-block-copy-color-hover);--_lr-icon-button-color-active-default:var(--_lr-code-block-copy-color-active);--_lr-icon-button-radius-default:var(--_lr-code-block-copy-radius);flex:none;margin-inline-start:auto}[part~=copy-button-text]::part(button){padding:var(--lr-size-0-1875rem) var(--lr-space-xs)}[part=toggle]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:var(--lr-focus-ring-offset)}[part=header-actions]{align-items:center;gap:var(--lr-space-2xs);flex:none;display:inline-flex}[part=header-actions][hidden]{display:none}[part=body]{block-size:100%;max-block-size:var(--lr-code-block-max-height,none);scrollbar-width:var(--lr-theme-scrollbar-width,auto);scrollbar-gutter:var(--lr-theme-scrollbar-gutter,auto);direction:ltr;flex:auto;display:block;overflow:auto}[part=body][hidden]{display:none}[part=body]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:calc(-1 * max(var(--lr-focus-ring-width), calc(var(--lr-focus-ring-width) + var(--lr-focus-ring-offset))))}[part=body] lr-skeleton{padding:var(--lr-space-s) var(--lr-space-m);--lr-skeleton-w:100%;--lr-skeleton-h:var(--lr-size-8rem);display:block}[part=pre]{padding:var(--lr-space-s) var(--lr-space-m);box-sizing:border-box;background:var(--lr-color-surface);inline-size:max-content;min-inline-size:100%;font-family:var(--lr-code-block-font,var(--lr-font-mono));font-size:inherit;line-height:var(--lr-line-height-normal);white-space:pre;tab-size:var(--lr-code-block-tab-size,2);direction:ltr;unicode-bidi:isolate;margin:0}[part=code]{font-family:inherit;display:grid}[part=pre] .line{display:block}[part=pre] .line-number{min-inline-size:var(--lr-size-2-5ch);color:var(--lr-color-text-quiet);text-align:end;user-select:none;margin-inline-end:var(--lr-space-s);display:inline-block}[part=pre] [data-highlighted]{background:var(--lr-code-block-highlighted-line-bg,var(--lr-color-warning-quiet))}[part=pre] [data-active]{outline:var(--lr-border-width-thin) solid var(--lr-code-block-active-line-outline-color,var(--lr-color-brand));outline-offset:calc(-1 * var(--lr-border-width-thin))}[part=pre] button.line-gutter{min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);color:inherit;font:inherit;text-align:start;cursor:pointer;background:0 0;border:none;justify-content:end;align-items:center;margin:0;margin-inline-end:var(--lr-space-s);padding:0;display:inline-flex}[part=pre] button.line-gutter:hover{background:var(--lr-color-brand-quiet)}[part=pre] button.line-gutter:active{background:color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active))}[part=pre] button.line-gutter:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:calc(-1 * var(--lr-focus-ring-offset))}[part=body][data-dark-theme=true] [part=pre],[part=body][data-dark-theme=true] [part=pre] span{color:var(--shiki-dark,inherit)!important;background-color:var(--shiki-dark-bg,transparent)!important}[part=body][data-dark-theme=true] [part=pre] .line-number,[part=body][data-dark-theme=true] [part=pre] button.line-gutter{color:var(--lr-color-text-quiet)!important}[part=body][data-dark-theme=true] [part=pre] [data-highlighted]{background:var(--lr-code-block-highlighted-line-bg,var(--lr-color-warning-quiet))!important}@media (prefers-reduced-motion:reduce){[part=toggle] .chevron{transition:none!important}}`;export{styles};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{css}from"lit";const styles=css`:host{min-inline-size:0;max-inline-size:100%;line-height:var(--lr-line-height-loose);--_lr-markdown-max-height:none;display:block}[part=content]{min-block-size:var(--lr-icon-button-size);box-sizing:border-box;min-inline-size:var(--lr-icon-button-size);max-inline-size:100%;max-block-size:var(--lr-markdown-max-height,var(--_lr-markdown-max-height));overflow-inline:auto;overflow-block:hidden;overflow-wrap:anywhere}[part=content][data-unsanitized]{contain:paint}[part=streaming-tail]{white-space:pre-wrap;overflow-wrap:anywhere}[part=content]:focus-visible,[part=code-block]:focus-visible,[part=table-wrapper]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:calc(-1 * var(--lr-focus-ring-offset))}[part=content][data-fallback]{white-space:pre-wrap;font-family:inherit}[part=content]>:first-child{margin-block-start:0}[part=content]>:last-child{margin-block-end:0}[part=heading]{line-height:var(--lr-line-height-compact);margin-block:var(--lr-space-l) var(--lr-space-s)}[part=content] p,[part=content] ul,[part=content] ol{margin-block:0 var(--lr-space-s)}ul>[part~=task-item]{list-style:none}[part~=task-checkbox]{--_lr-markdown-task-box:var(--lr-markdown-task-checkbox-size,var(--lr-size-0-875em));appearance:none;box-sizing:border-box;inline-size:var(--_lr-markdown-task-box);block-size:var(--_lr-markdown-task-box);margin-block:0;margin-inline:0 var(--lr-space-s);vertical-align:middle;font-size:inherit;opacity:1;-webkit-print-color-adjust:exact;print-color-adjust:exact;border:var(--lr-border-width-thin) solid var(--lr-color-border);border-radius:var(--lr-radius-xs);background:var(--lr-color-surface);place-content:center;display:inline-grid}ul>[part~=task-item]>[part~=task-checkbox],ul>[part~=task-item]>p:first-child>[part~=task-checkbox]{margin-inline-start:calc(-1 * (var(--_lr-markdown-task-box) + var(--lr-space-s)))}[part~=task-checkbox]:where(:checked){background:var(--lr-color-brand);border-color:var(--lr-color-brand)}[part~=task-checkbox]:where(:checked):before{content:"";inline-size:var(--lr-size-0-3em);block-size:var(--lr-size-0-5em);border:0 solid var(--lr-color-on-brand);border-inline-end-width:var(--lr-border-width-medium);border-block-end-width:var(--lr-border-width-medium);direction:ltr;transform:translateY(-10%)rotate(45deg)}[part=content] code{font-family:var(--lr-markdown-font-mono,var(--lr-font-mono));font-size:var(--lr-size-0-875em);background:var(--lr-markdown-code-bg,var(--lr-color-brand-quiet));border-radius:var(--lr-markdown-code-radius,calc(var(--lr-radius) * .5));padding:var(--lr-markdown-code-padding,var(--lr-size-0-125rem) var(--lr-size-0-3125rem))}[part=code-block]{margin-block:0 var(--lr-space-s);padding:var(--lr-markdown-code-block-padding,var(--lr-space-s) var(--lr-space-m));border-radius:var(--lr-markdown-code-block-radius,var(--lr-radius));background:var(--lr-markdown-code-bg,var(--lr-color-brand-quiet));white-space:pre;overflow-wrap:normal;overflow-inline:auto;overflow-block:hidden;tab-size:var(--lr-code-block-tab-size,2);overflow:auto hidden}[part=content] :where(pre[part~=code-block]:not([dir]),code:not([dir],pre *)){text-align:start;direction:ltr;unicode-bidi:isolate}[part=content] :where(pre:not([part~=code-block],[dir])){unicode-bidi:plaintext}[part=content][data-fallback] :where(.fallback-code,.fallback-inline-code){direction:ltr;unicode-bidi:isolate}[part=content][data-fallback] .fallback-code{text-align:start;display:block}[part=code-block] code{font-size:var(--lr-font-size-sm);line-height:var(--lr-line-height-normal);background:0 0;padding:0}[part=content][data-dark-theme=true] [part=code-block],[part=content][data-dark-theme=true] [part=code-block] span{color:var(--shiki-dark,inherit)!important;background-color:var(--shiki-dark-bg,transparent)!important}[part=link]{color:var(--lr-color-brand);text-underline-offset:var(--lr-size-0-125rem)}[part=img]{max-inline-size:100%}[part=blockquote]{margin-block:0 var(--lr-space-s);border-inline-start:var(--lr-border-width-thick) solid var(--lr-color-border-subtle);color:var(--lr-color-text-quiet);margin-inline:0;padding-inline-start:var(--lr-space-m)}[part=table-wrapper]{margin-block:0 var(--lr-space-s);overflow-inline:auto;overflow-block:hidden;overflow:auto hidden}[part=table]{border-collapse:collapse;margin-block:0 var(--lr-space-s);inline-size:100%}[part=table-wrapper]>[part=table]{overflow-wrap:break-word;word-break:normal;margin-block:0}[part=table] th,[part=table] td{border:var(--lr-border-width-thin) solid var(--lr-color-border-subtle);padding:var(--lr-space-xs) var(--lr-space-s)}[part=table] th:not([align]),[part=table] td:not([align]){text-align:start}[part=table] th{background:var(--lr-markdown-table-header-bg,var(--lr-color-brand-quiet));font-weight:var(--lr-font-weight-semibold)}[part=math][data-display=block]{margin-block:var(--lr-space-s) var(--lr-space-s);white-space:pre;overflow-wrap:normal;overflow-inline:auto;overflow-block:hidden;text-align:center;display:block;overflow:auto hidden}[part=math][data-display=inline]{display:inline-block}::highlight(lr-highlight-accent){background-color:var(--lr-markdown-highlight-accent-bg,var(--lr-color-brand-quiet))}::highlight(lr-highlight-success){background-color:var(--lr-markdown-highlight-success-bg,var(--lr-color-success-quiet))}::highlight(lr-highlight-warning){background-color:var(--lr-markdown-highlight-warning-bg,var(--lr-color-warning-quiet))}::highlight(lr-highlight-danger){background-color:var(--lr-markdown-highlight-danger-bg,var(--lr-color-danger-quiet))}::highlight(lr-highlight-neutral){background-color:var(--lr-markdown-highlight-neutral-bg,var(--lr-color-surface))}::highlight(lr-highlight-active){background-color:var(--lr-markdown-highlight-active-bg,var(--lr-color-brand-quiet));text-decoration:underline}[part=content] mark[data-lr-highlight-tone]{background:var(--lr-markdown-highlight-accent-bg,var(--lr-color-brand-quiet));color:inherit;border-radius:calc(var(--lr-radius) * .5)}[part=content] mark[data-lr-highlight-tone=success]{background:var(--lr-markdown-highlight-success-bg,var(--lr-color-success-quiet))}[part=content] mark[data-lr-highlight-tone=warning]{background:var(--lr-markdown-highlight-warning-bg,var(--lr-color-warning-quiet))}[part=content] mark[data-lr-highlight-tone=danger]{background:var(--lr-markdown-highlight-danger-bg,var(--lr-color-danger-quiet))}[part=content] mark[data-lr-highlight-tone=neutral]{background:var(--lr-markdown-highlight-neutral-bg,var(--lr-color-surface))}[part=content] mark[data-lr-highlight-name=lr-highlight-active]{outline:var(--lr-border-width-thin) solid var(--lr-markdown-highlight-active-outline-color,var(--lr-color-brand));outline-offset:var(--lr-focus-ring-offset)}[part~=code-block-frame]:where([data-lr-code-chrome]){margin-block:0 var(--lr-space-s);border:var(--lr-border-width-thin) solid var(--lr-color-border-subtle);border-radius:var(--lr-markdown-code-block-radius,var(--lr-radius));overflow:clip}[part~=code-block-frame]:where([data-lr-code-chrome])>[part=code-block]{border-radius:0;margin:0}[part~=code-block-header]:where([data-lr-code-chrome]){align-items:center;gap:var(--lr-space-xs);min-inline-size:0;padding-inline:var(--lr-space-s) var(--lr-space-2xs);background:var(--lr-markdown-code-header-bg,var(--lr-color-surface));color:var(--lr-markdown-code-header-color,var(--lr-color-text-quiet));border-block-end:var(--lr-border-width-thin) solid var(--lr-color-border-subtle);font:var(--lr-font-size-xs)/var(--lr-line-height-normal) var(--lr-font);user-select:none;display:flex}[part~=code-block-language]:where([data-lr-code-chrome]){text-overflow:ellipsis;white-space:nowrap;direction:ltr;unicode-bidi:isolate;flex:0 auto;min-inline-size:0;overflow:hidden}[part~=code-block-language]:where([data-lr-code-chrome]):before{content:attr(data-language)}[part~=code-block-copy]:where([data-lr-code-chrome]){min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);border-radius:var(--lr-radius);color:inherit;font:inherit;cursor:pointer;transition:var(--lr-transition-interactive);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;margin-inline-start:auto;padding:0;display:inline-flex}[part~=code-block-copy]:where([data-lr-code-chrome]) svg{inline-size:var(--lr-size-1em);block-size:var(--lr-size-1em)}[part~=code-block-copy]:where([data-lr-code-chrome]:hover){background:var(--lr-color-brand-quiet);color:var(--lr-color-brand)}[part~=code-block-copy]:where([data-lr-code-chrome]:active){background:color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active))}[part~=code-block-copy]:where([data-lr-code-chrome]):focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:calc(-1 * var(--lr-focus-ring-offset))}@media (forced-colors:active){[part~=code-block-copy]:where([data-lr-code-chrome]){border:var(--lr-border-width-thin) solid ButtonText}}[part~=code-block-copy-success]:where([data-lr-code-chrome]){color:var(--lr-color-success)}[part~=code-block-copy-error]:where([data-lr-code-chrome]){color:var(--lr-color-danger)}`;export{styles};
|
|
1
|
+
import{css}from"lit";const styles=css`:host{min-inline-size:0;max-inline-size:100%;line-height:var(--lr-line-height-loose);--_lr-markdown-max-height:none;display:block}[part=content]{min-block-size:var(--lr-icon-button-size);box-sizing:border-box;min-inline-size:var(--lr-icon-button-size);max-inline-size:100%;max-block-size:var(--lr-markdown-max-height,var(--_lr-markdown-max-height));overflow-inline:auto;overflow-block:hidden;overflow-wrap:anywhere}[part=content][data-unsanitized]{contain:paint}[part=streaming-tail]{white-space:pre-wrap;overflow-wrap:anywhere}[part=content]:focus-visible,[part=code-block]:focus-visible,[part=table-wrapper]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:calc(-1 * var(--lr-focus-ring-offset))}[part=code-block]:focus-visible,[part=table-wrapper]:focus-visible{outline-offset:calc(-1 * max(var(--lr-focus-ring-width), calc(var(--lr-focus-ring-width) + var(--lr-focus-ring-offset))))}[part=content][data-fallback]{white-space:pre-wrap;font-family:inherit}[part=content]>:first-child{margin-block-start:0}[part=content]>:last-child{margin-block-end:0}[part=heading]{line-height:var(--lr-line-height-compact);margin-block:var(--lr-space-l) var(--lr-space-s)}[part=content] p,[part=content] ul,[part=content] ol{margin-block:0 var(--lr-space-s)}ul>[part~=task-item]{list-style:none}[part~=task-checkbox]{--_lr-markdown-task-box:var(--lr-markdown-task-checkbox-size,var(--lr-size-0-875em));appearance:none;box-sizing:border-box;inline-size:var(--_lr-markdown-task-box);block-size:var(--_lr-markdown-task-box);margin-block:0;margin-inline:0 var(--lr-space-s);vertical-align:middle;font-size:inherit;opacity:1;-webkit-print-color-adjust:exact;print-color-adjust:exact;border:var(--lr-border-width-thin) solid var(--lr-color-border);border-radius:var(--lr-radius-xs);background:var(--lr-color-surface);place-content:center;display:inline-grid}ul>[part~=task-item]>[part~=task-checkbox],ul>[part~=task-item]>p:first-child>[part~=task-checkbox]{margin-inline-start:calc(-1 * (var(--_lr-markdown-task-box) + var(--lr-space-s)))}[part~=task-checkbox]:where(:checked){background:var(--lr-color-brand);border-color:var(--lr-color-brand)}[part~=task-checkbox]:where(:checked):before{content:"";inline-size:var(--lr-size-0-3em);block-size:var(--lr-size-0-5em);border:0 solid var(--lr-color-on-brand);border-inline-end-width:var(--lr-border-width-medium);border-block-end-width:var(--lr-border-width-medium);direction:ltr;transform:translateY(-10%)rotate(45deg)}[part=content] code{font-family:var(--lr-markdown-font-mono,var(--lr-font-mono));font-size:var(--lr-size-0-875em);background:var(--lr-markdown-code-bg,var(--lr-color-brand-quiet));border-radius:var(--lr-markdown-code-radius,calc(var(--lr-radius) * .5));padding:var(--lr-markdown-code-padding,var(--lr-size-0-125rem) var(--lr-size-0-3125rem))}[part=code-block]{margin-block:0 var(--lr-space-s);padding:var(--lr-markdown-code-block-padding,var(--lr-space-s) var(--lr-space-m));border-radius:var(--lr-markdown-code-block-radius,var(--lr-radius));background:var(--lr-markdown-code-bg,var(--lr-color-brand-quiet));white-space:pre;overflow-wrap:normal;overflow-inline:auto;overflow-block:hidden;tab-size:var(--lr-code-block-tab-size,2);overflow:auto hidden}[part=content] :where(pre[part~=code-block]:not([dir]),code:not([dir],pre *)){text-align:start;direction:ltr;unicode-bidi:isolate}[part=content] :where(pre:not([part~=code-block],[dir])){unicode-bidi:plaintext}[part=content][data-fallback] :where(.fallback-code,.fallback-inline-code){direction:ltr;unicode-bidi:isolate}[part=content][data-fallback] .fallback-code{text-align:start;display:block}[part=code-block] code{font-size:var(--lr-font-size-sm);line-height:var(--lr-line-height-normal);background:0 0;padding:0}[part=content][data-dark-theme=true] [part=code-block],[part=content][data-dark-theme=true] [part=code-block] span{color:var(--shiki-dark,inherit)!important;background-color:var(--shiki-dark-bg,transparent)!important}[part=link]{color:var(--lr-color-brand);text-underline-offset:var(--lr-size-0-125rem)}[part=img]{max-inline-size:100%}[part=blockquote]{margin-block:0 var(--lr-space-s);border-inline-start:var(--lr-border-width-thick) solid var(--lr-color-border-subtle);color:var(--lr-color-text-quiet);margin-inline:0;padding-inline-start:var(--lr-space-m)}[part=table-wrapper]{margin-block:0 var(--lr-space-s);overflow-inline:auto;overflow-block:hidden;overflow:auto hidden}[part=table]{border-collapse:collapse;margin-block:0 var(--lr-space-s);inline-size:100%}[part=table-wrapper]>[part=table]{overflow-wrap:break-word;word-break:normal;margin-block:0}[part=table] th,[part=table] td{border:var(--lr-border-width-thin) solid var(--lr-color-border-subtle);padding:var(--lr-space-xs) var(--lr-space-s)}[part=table] th:not([align]),[part=table] td:not([align]){text-align:start}[part=table] th{background:var(--lr-markdown-table-header-bg,var(--lr-color-brand-quiet));font-weight:var(--lr-font-weight-semibold)}[part=math][data-display=block]{margin-block:var(--lr-space-s) var(--lr-space-s);white-space:pre;overflow-wrap:normal;overflow-inline:auto;overflow-block:hidden;text-align:center;display:block;overflow:auto hidden}[part=math][data-display=inline]{display:inline-block}::highlight(lr-highlight-accent){background-color:var(--lr-markdown-highlight-accent-bg,var(--lr-color-brand-quiet))}::highlight(lr-highlight-success){background-color:var(--lr-markdown-highlight-success-bg,var(--lr-color-success-quiet))}::highlight(lr-highlight-warning){background-color:var(--lr-markdown-highlight-warning-bg,var(--lr-color-warning-quiet))}::highlight(lr-highlight-danger){background-color:var(--lr-markdown-highlight-danger-bg,var(--lr-color-danger-quiet))}::highlight(lr-highlight-neutral){background-color:var(--lr-markdown-highlight-neutral-bg,var(--lr-color-surface))}::highlight(lr-highlight-active){background-color:var(--lr-markdown-highlight-active-bg,var(--lr-color-brand-quiet));text-decoration:underline}[part=content] mark[data-lr-highlight-tone]{background:var(--lr-markdown-highlight-accent-bg,var(--lr-color-brand-quiet));color:inherit;border-radius:calc(var(--lr-radius) * .5)}[part=content] mark[data-lr-highlight-tone=success]{background:var(--lr-markdown-highlight-success-bg,var(--lr-color-success-quiet))}[part=content] mark[data-lr-highlight-tone=warning]{background:var(--lr-markdown-highlight-warning-bg,var(--lr-color-warning-quiet))}[part=content] mark[data-lr-highlight-tone=danger]{background:var(--lr-markdown-highlight-danger-bg,var(--lr-color-danger-quiet))}[part=content] mark[data-lr-highlight-tone=neutral]{background:var(--lr-markdown-highlight-neutral-bg,var(--lr-color-surface))}[part=content] mark[data-lr-highlight-name=lr-highlight-active]{outline:var(--lr-border-width-thin) solid var(--lr-markdown-highlight-active-outline-color,var(--lr-color-brand));outline-offset:var(--lr-focus-ring-offset)}[part~=code-block-frame]:where([data-lr-code-chrome]){margin-block:0 var(--lr-space-s);border:var(--lr-border-width-thin) solid var(--lr-color-border-subtle);border-radius:var(--lr-markdown-code-block-radius,var(--lr-radius));overflow:clip}[part~=code-block-frame]:where([data-lr-code-chrome])>[part=code-block]{border-radius:0;margin:0}[part~=code-block-header]:where([data-lr-code-chrome]){align-items:center;gap:var(--lr-space-xs);min-inline-size:0;padding-inline:var(--lr-space-s) var(--lr-space-2xs);background:var(--lr-markdown-code-header-bg,var(--lr-color-surface));color:var(--lr-markdown-code-header-color,var(--lr-color-text-quiet));border-block-end:var(--lr-border-width-thin) solid var(--lr-color-border-subtle);font:var(--lr-font-size-xs)/var(--lr-line-height-normal) var(--lr-font);user-select:none;display:flex}[part~=code-block-language]:where([data-lr-code-chrome]){text-overflow:ellipsis;white-space:nowrap;direction:ltr;unicode-bidi:isolate;flex:0 auto;min-inline-size:0;overflow:hidden}[part~=code-block-language]:where([data-lr-code-chrome]):before{content:attr(data-language)}[part~=code-block-copy]:where([data-lr-code-chrome]){min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);border-radius:var(--lr-radius);color:inherit;font:inherit;cursor:pointer;transition:var(--lr-transition-interactive);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;margin-inline-start:auto;padding:0;display:inline-flex}[part~=code-block-copy]:where([data-lr-code-chrome]) svg{inline-size:var(--lr-size-1em);block-size:var(--lr-size-1em)}[part~=code-block-copy]:where([data-lr-code-chrome]:hover){background:var(--lr-color-brand-quiet);color:var(--lr-color-brand)}[part~=code-block-copy]:where([data-lr-code-chrome]:active){background:color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active))}[part~=code-block-copy]:where([data-lr-code-chrome]):focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:calc(-1 * max(var(--lr-focus-ring-width), calc(var(--lr-focus-ring-width) + var(--lr-focus-ring-offset))))}@media (forced-colors:active){[part~=code-block-copy]:where([data-lr-code-chrome]){border:var(--lr-border-width-thin) solid ButtonText}}[part~=code-block-copy-success]:where([data-lr-code-chrome]){color:var(--lr-color-success)}[part~=code-block-copy-error]:where([data-lr-code-chrome]){color:var(--lr-color-danger)}`;export{styles};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{__decorate}from"tslib";import{collectionSupport}from"../../../internal/collection-snapshot.js";import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{activeElementIn}from"../../../internal/active-element.js";import{applyComposedFocusRepair,captureComposedFocusRepair,isComposedFocusAvailable}from"../../../internal/focus-navigation.js";import{LyraElement}from"../../../internal/lyra-element.js";import{installFormControlLabelSupport}from"../../../internal/form-control-labels.js";installFormControlLabelSupport();import{sizes}from"../../../internal/sizes.styles.js";import{hostAriaLabel,nextId}from"../../../internal/a11y.js";import{syncAriaDescribedByElements}from"../../../internal/aria-reflection.js";import{chevronIcon}from"../../../internal/icons.js";import{AnchoredValidityController,VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{syncValidityStates}from"../../../internal/custom-states.js";import{styles}from"./model-select.styles.js";import{spellcheckFromAttributeConverter as spellcheckConverter}from"../../../internal/converters.js";import{attachInternalsSafely,getFormOwner,installCustomErrorProperty,isBarredFromValidation,setFormOwner}from"../../../internal/form-associated.js";import{installInteractionOnInvalid,installInvalidEventAlias,withStaticValidityCheck}from"../../../internal/invalid-event-alias.js";import{CatalogPickerController}from"../../../internal/catalog-picker.js";import{SlotPresenceController}from"../../../internal/slot-presence-controller.js";import{LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_model,LYRA_DEFAULT_modelSelectNoModels,LYRA_DEFAULT_modelSelectRequired,LYRA_DEFAULT_noMatches,LYRA_DEFAULT_notInCatalog}from"../../../internal/default-strings.generated.js";class LyraModelSelect extends LyraElement{static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired,model:LYRA_DEFAULT_model,modelSelectNoModels:LYRA_DEFAULT_modelSelectNoModels,modelSelectRequired:LYRA_DEFAULT_modelSelectRequired,noMatches:LYRA_DEFAULT_noMatches,notInCatalog:LYRA_DEFAULT_notInCatalog}}static{this.collectionSupport=collectionSupport}static{this.ownedCollectionProperties=Object.freeze(["catalog"])}static{this.formAssociated=!0}static{this.styles=[LyraElement.styles,sizes,styles]}static{this.properties={customError:{attribute:"custom-error",reflect:!0,noAccessor:!0},disabled:{type:Boolean,reflect:!0,noAccessor:!0},required:{type:Boolean,reflect:!0,noAccessor:!0},value:{attribute:!1,noAccessor:!0},defaultValue:{attribute:"value",reflect:!0,useDefault:!0,noAccessor:!0},name:{reflect:!0,noAccessor:!0}}}get open(){return this.catalogPicker.open}set open(next){this.catalogPicker.setOpen(next)}get activeIndex(){return this.catalogPicker.activeIndex}get query(){return this.catalogPicker.query}constructor(){super(),this.provider="",this.allowCustom=!1,this.readonly=!1,this.label="",this.hint="",this.errorText="",this.placeholder="",this.spellcheck=!0,this.autocapitalize="",this.autoCorrect="",this.autocomplete="off",this.inputMode="",this.enterKeyHint="",this.size="m",this.touched=!1,this.slotPresence=new SlotPresenceController(this),this.listId=nextId("model-select-list"),this.controlId=nextId("model-select-control"),this.hasSyncedDescribedByElements=!1,this._fieldsetDisabled=!1,this._name="",this._disabled=!1,this._required=!1,this.suppressControlBlur=!1,this.catalogPicker=new CatalogPickerController(this,{catalog:()=>this.catalog,allowCustom:()=>this.allowCustom,isReadonly:()=>this.readonly,locale:()=>this.effectiveLocale,searchableFields:entry=>[entry.id,entry.label],emitChange:detail=>this.emit("lr-change",detail),onValueChange:(value,oldValue)=>{this.internals.setFormValue(value),this.updateValidity(),this.requestUpdate("value",oldValue)},onDefaultValueChange:(_value,oldValue)=>this.requestUpdate("defaultValue",oldValue),onStateChange:(state2,oldValue)=>{state2==="open"?this.requestUpdate("open",oldValue):this.requestUpdate()},onControlFocus:event=>this.captureModeFocus(event),onControlBlur:event=>{this.effectiveDisabled||(this.touched=!0),this.retireModeFocusAfterBlur(event)},forwardFreeInputClick:!0}),this.markInteracted=()=>{this.touched||(this.touched=!0,this.publishValidityStates())},this.onTriggerClick=()=>{this.effectiveDisabled||(this.open?this.hide():this.show())},this.onTriggerBlur=event=>{this.catalogPicker.handleControlBlur(event)},this.onTriggerFocus=event=>{this.catalogPicker.handleControlFocus(event)},this.onTriggerKeyDown=e=>{this.catalogPicker.handleTriggerKeyDown(e)},this.onComboMouseDown=e=>{this.catalogPicker.handleComboMouseDown(e)},this.onInputFocus=event=>{this.catalogPicker.handleInputFocus(event)},this.onInput=e=>{this.catalogPicker.handleInput(e)},this.onInputBlur=event=>{this.catalogPicker.handleControlBlur(event)},this.onInputKeyDown=e=>{this.catalogPicker.handleInputKeyDown(e)},this.onListboxMouseDown=e=>{this.catalogPicker.handleListboxMouseDown(e)},this.onListboxClick=e=>{this.catalogPicker.handleListboxClick(e)},this.internals=attachInternalsSafely(this),this.validityController=new AnchoredValidityController(this,this.internals,()=>this[VALIDITY_ANCHOR]()),installCustomErrorProperty(this,()=>this.validityController.customValidityMessage),installInvalidEventAlias(this,init=>this.emit("lr-invalid",null,init)),installInteractionOnInvalid(this,this.markInteracted),this.internals.setFormValue("")}click(){this.catalogPicker.click()}focus(options){this.catalogPicker.focus(options)}blur(){this.catalogPicker.blur()}get input(){return this.catalogPicker.input}get selectionStart(){return this.input?.selectionStart??null}set selectionStart(value){this.input&&(this.input.selectionStart=value)}get selectionEnd(){return this.input?.selectionEnd??null}set selectionEnd(value){this.input&&(this.input.selectionEnd=value)}get selectionDirection(){return this.input?.selectionDirection??null}set selectionDirection(value){this.input&&(this.input.selectionDirection=value)}select(){this.catalogPicker.select()}setSelectionRange(start,end,direction){this.catalogPicker.setSelectionRange(start,end,direction)}setRangeText(replacement,start,end,selectMode){this.catalogPicker.setRangeText(replacement,start,end,selectMode)}get form(){return getFormOwner(this.internals)}set form(owner){setFormOwner(this,owner)}getForm(){return getFormOwner(this.internals)}get labels(){return this.internals.labels}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}get willValidate(){return this.internals.willValidate}[VALIDITY_ANCHOR](){return this.renderRoot?.querySelector('[part="trigger"], [part="combobox-input"]')??null}connectedCallback(){super.connectedCallback(),this.updateValidity(),this.catalogPicker.connected(this.hasUpdated)}willUpdate(changed){super.willUpdate(changed);let modeChanged=!1;if(this.hasUpdated){const renderedControl=this.renderRoot.querySelector('[part="trigger"], [part="combobox-input"]');modeChanged=renderedControl?.getAttribute("part")==="trigger"!==this.closedMode,this.suppressControlBlur=modeChanged,this.catalogPicker.suppressControlEvents=modeChanged,this.modeFocusRepair=modeChanged&&renderedControl!==null&&activeElementIn(this.shadowRoot)===renderedControl?captureComposedFocusRepair(this,this.modeFocusFallback()??renderedControl)??void 0:modeChanged?this.focusedModeRepair:void 0}this.open&&(changed.has("catalog")||changed.has("value")||changed.has("allowCustom"))&&this.catalogPicker.reconcileRows(void 0,changed.has("value")||changed.has("allowCustom")||modeChanged,!1)}disconnectedCallback(){super.disconnectedCallback(),this.modeFocusRepair=void 0,this.focusedModeRepair=void 0,this.focusReturnTarget=void 0,this.catalogPicker.disconnected()}adoptedCallback(){super.adoptedCallback(),this.modeFocusRepair=void 0,this.focusedModeRepair=void 0,this.focusReturnTarget=void 0,this.catalogPicker.adopted()}get value(){return this.catalogPicker.value}set value(next){this.catalogPicker.value=next}get defaultValue(){return this.catalogPicker.defaultValue}set defaultValue(next){this.catalogPicker.defaultValue=next}get name(){return this._name}set name(next){const old=this._name;this._name=next??"",this._name?this.setAttribute("name",this._name):this.removeAttribute("name"),this.requestUpdate("name",old)}get disabled(){return this._disabled}set disabled(next){const old=this._disabled;this._disabled=!!next,this.toggleAttribute("disabled",this._disabled),this._disabled&&this.hide(),this.updateValidity(),this.requestUpdate("disabled",old)}get required(){return this._required}set required(next){const old=this._required;this._required=!!next,this.toggleAttribute("required",this._required),this.updateValidity(),this.requestUpdate("required",old)}get effectiveDisabled(){return this.disabled||this._fieldsetDisabled}get barredFromValidation(){return isBarredFromValidation(this,this.internals)}updateValidity(){this.barredFromValidation?this.validityController.setValidity({}):this.required&&!this.value?this.validityController.setValidity({valueMissing:!0},this.localize("modelSelectRequired")):this.validityController.setValidity({}),this.publishValidityStates()}publishValidityStates(){syncValidityStates(this.internals,{required:this.required,hasInteracted:this.touched,barred:this.barredFromValidation})}formResetCallback(){this.touched=!1,this.catalogPicker.resetValue()}formStateRestoreCallback(state2,_mode){this.catalogPicker.restoreState(state2)}formDisabledCallback(disabled){this._fieldsetDisabled=disabled,disabled&&this.hide(),this.updateValidity(),this.requestUpdate()}checkValidity(){return withStaticValidityCheck(this,()=>this.internals.checkValidity())}reportValidity(){return this.touched=!0,this.publishValidityStates(),this.internals.reportValidity()}setCustomValidity(message){this.validityController.setCustomValidity(message??""),this.publishValidityStates()}get closedMode(){return this.catalogPicker.closedMode}get effectiveEntries(){return this.catalogPicker.effectiveEntries}get filteredEntries(){return this.catalogPicker.filteredEntries}labelFor(id){return this.catalogPicker.labelFor(id)}show(){this.catalogPicker.show()}hide(){this.catalogPicker.hide()}updated(changed){super.updated(changed);const hostDescribedBy=this.getAttribute("aria-describedby");if(hostDescribedBy||this.hasSyncedDescribedByElements){const control=this.renderRoot.querySelector(`#${CSS.escape(this.controlId)}`);this.hasSyncedDescribedByElements=syncAriaDescribedByElements(this,control??void 0,hostDescribedBy)}const reposition=changed.has("open")||this.open&&(changed.has("catalog")||changed.has("allowCustom"));this.catalogPicker.updated(reposition),(changed.has("required")||changed.has("readonly")||changed.has("touched")||changed.has("value"))&&(changed.has("readonly")&&this.updateValidity(),this.toggleAttribute("data-invalid",this.touched&&!this.internals.validity.valid)),this.publishValidityStates(),this.suppressControlBlur=!1,this.catalogPicker.suppressControlEvents=!1;const focusRepair=this.modeFocusRepair;this.modeFocusRepair=void 0,focusRepair&&this.scheduleAfterUpdate(()=>{const replacement=this[VALIDITY_ANCHOR](),target=replacement&&isComposedFocusAvailable(replacement)?replacement:this.modeFocusFallback();applyComposedFocusRepair(focusRepair,target),this.focusedModeRepair===focusRepair&&(this.focusedModeRepair=void 0)},"model-select-mode-focus")}rememberFocusReturn(event){const related=event.relatedTarget;related&&related.nodeType===1&&isComposedFocusAvailable(related)&&(this.focusReturnTarget=related)}captureModeFocus(event){this.rememberFocusReturn(event);const control=event.currentTarget;!control||control.nodeType!==1||(this.focusedModeRepair=captureComposedFocusRepair(this,this.modeFocusFallback()??control)??void 0)}retireModeFocusAfterBlur(event){const destination=event.relatedTarget;if(destination&&destination.nodeType===1){this.focusedModeRepair=void 0;return}queueMicrotask(()=>{!this.suppressControlBlur&&!this.effectiveDisabled&&!this.hasAttribute("inert")&&(this.focusedModeRepair=void 0)})}modeFocusFallback(){if(this.focusReturnTarget&&isComposedFocusAvailable(this.focusReturnTarget))return this.focusReturnTarget;const owner=this.renderRoot.querySelector('[part="form-control"]');return owner&&isComposedFocusAvailable(owner)?owner:null}renderRows(rows,activeId){return rows.map((entry,i)=>{const id=`${this.listId}-opt-${i}`,selected=entry.id===this.value,disabled=entry.disabled===!0;return html`<div
|
|
1
|
+
import{__decorate}from"tslib";import{GlassScrollLayer}from"../../../internal/glass-scroll-layer.js";import{collectionSupport}from"../../../internal/collection-snapshot.js";import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{activeElementIn}from"../../../internal/active-element.js";import{applyComposedFocusRepair,captureComposedFocusRepair,isComposedFocusAvailable}from"../../../internal/focus-navigation.js";import{LyraElement}from"../../../internal/lyra-element.js";import{installFormControlLabelSupport}from"../../../internal/form-control-labels.js";installFormControlLabelSupport();import{sizes}from"../../../internal/sizes.styles.js";import{hostAriaLabel,nextId}from"../../../internal/a11y.js";import{syncAriaDescribedByElements}from"../../../internal/aria-reflection.js";import{chevronIcon}from"../../../internal/icons.js";import{AnchoredValidityController,VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{syncValidityStates}from"../../../internal/custom-states.js";import{styles}from"./model-select.styles.js";import{spellcheckFromAttributeConverter as spellcheckConverter}from"../../../internal/converters.js";import{attachInternalsSafely,getFormOwner,installCustomErrorProperty,isBarredFromValidation,setFormOwner}from"../../../internal/form-associated.js";import{installInteractionOnInvalid,installInvalidEventAlias,withStaticValidityCheck}from"../../../internal/invalid-event-alias.js";import{CatalogPickerController}from"../../../internal/catalog-picker.js";import{SlotPresenceController}from"../../../internal/slot-presence-controller.js";import{LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_model,LYRA_DEFAULT_modelSelectNoModels,LYRA_DEFAULT_modelSelectRequired,LYRA_DEFAULT_noMatches,LYRA_DEFAULT_notInCatalog}from"../../../internal/default-strings.generated.js";class LyraModelSelect extends LyraElement{static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired,model:LYRA_DEFAULT_model,modelSelectNoModels:LYRA_DEFAULT_modelSelectNoModels,modelSelectRequired:LYRA_DEFAULT_modelSelectRequired,noMatches:LYRA_DEFAULT_noMatches,notInCatalog:LYRA_DEFAULT_notInCatalog}}static{this.collectionSupport=collectionSupport}static{this.ownedCollectionProperties=Object.freeze(["catalog"])}static{this.formAssociated=!0}static{this.styles=[LyraElement.styles,sizes,styles]}static{this.properties={customError:{attribute:"custom-error",reflect:!0,noAccessor:!0},disabled:{type:Boolean,reflect:!0,noAccessor:!0},required:{type:Boolean,reflect:!0,noAccessor:!0},value:{attribute:!1,noAccessor:!0},defaultValue:{attribute:"value",reflect:!0,useDefault:!0,noAccessor:!0},name:{reflect:!0,noAccessor:!0}}}get open(){return this.catalogPicker.open}set open(next){this.catalogPicker.setOpen(next)}get activeIndex(){return this.catalogPicker.activeIndex}get query(){return this.catalogPicker.query}constructor(){super(),this.provider="",this.allowCustom=!1,this.readonly=!1,this.label="",this.hint="",this.errorText="",this.placeholder="",this.spellcheck=!0,this.autocapitalize="",this.autoCorrect="",this.autocomplete="off",this.inputMode="",this.enterKeyHint="",this.size="m",this.touched=!1,this.slotPresence=new SlotPresenceController(this),this.listId=nextId("model-select-list"),this.controlId=nextId("model-select-control"),this.hasSyncedDescribedByElements=!1,this._fieldsetDisabled=!1,this._name="",this._disabled=!1,this._required=!1,this.suppressControlBlur=!1,this.catalogPicker=new CatalogPickerController(this,{catalog:()=>this.catalog,allowCustom:()=>this.allowCustom,isReadonly:()=>this.readonly,locale:()=>this.effectiveLocale,searchableFields:entry=>[entry.id,entry.label],emitChange:detail=>this.emit("lr-change",detail),onValueChange:(value,oldValue)=>{this.internals.setFormValue(value),this.updateValidity(),this.requestUpdate("value",oldValue)},onDefaultValueChange:(_value,oldValue)=>this.requestUpdate("defaultValue",oldValue),onStateChange:(state2,oldValue)=>{state2==="open"?this.requestUpdate("open",oldValue):this.requestUpdate()},onControlFocus:event=>this.captureModeFocus(event),onControlBlur:event=>{this.effectiveDisabled||(this.touched=!0),this.retireModeFocusAfterBlur(event)},forwardFreeInputClick:!0}),this.markInteracted=()=>{this.touched||(this.touched=!0,this.publishValidityStates())},this.onTriggerClick=()=>{this.effectiveDisabled||(this.open?this.hide():this.show())},this.onTriggerBlur=event=>{this.catalogPicker.handleControlBlur(event)},this.onTriggerFocus=event=>{this.catalogPicker.handleControlFocus(event)},this.onTriggerKeyDown=e=>{this.catalogPicker.handleTriggerKeyDown(e)},this.onComboMouseDown=e=>{this.catalogPicker.handleComboMouseDown(e)},this.onInputFocus=event=>{this.catalogPicker.handleInputFocus(event)},this.onInput=e=>{this.catalogPicker.handleInput(e)},this.onInputBlur=event=>{this.catalogPicker.handleControlBlur(event)},this.onInputKeyDown=e=>{this.catalogPicker.handleInputKeyDown(e)},this.onListboxMouseDown=e=>{this.catalogPicker.handleListboxMouseDown(e)},this.onListboxClick=e=>{this.catalogPicker.handleListboxClick(e)},new GlassScrollLayer(this,'[part="listbox"]',()=>this.open),this.internals=attachInternalsSafely(this),this.validityController=new AnchoredValidityController(this,this.internals,()=>this[VALIDITY_ANCHOR]()),installCustomErrorProperty(this,()=>this.validityController.customValidityMessage),installInvalidEventAlias(this,init=>this.emit("lr-invalid",null,init)),installInteractionOnInvalid(this,this.markInteracted),this.internals.setFormValue("")}click(){this.catalogPicker.click()}focus(options){this.catalogPicker.focus(options)}blur(){this.catalogPicker.blur()}get input(){return this.catalogPicker.input}get selectionStart(){return this.input?.selectionStart??null}set selectionStart(value){this.input&&(this.input.selectionStart=value)}get selectionEnd(){return this.input?.selectionEnd??null}set selectionEnd(value){this.input&&(this.input.selectionEnd=value)}get selectionDirection(){return this.input?.selectionDirection??null}set selectionDirection(value){this.input&&(this.input.selectionDirection=value)}select(){this.catalogPicker.select()}setSelectionRange(start,end,direction){this.catalogPicker.setSelectionRange(start,end,direction)}setRangeText(replacement,start,end,selectMode){this.catalogPicker.setRangeText(replacement,start,end,selectMode)}get form(){return getFormOwner(this.internals)}set form(owner){setFormOwner(this,owner)}getForm(){return getFormOwner(this.internals)}get labels(){return this.internals.labels}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}get willValidate(){return this.internals.willValidate}[VALIDITY_ANCHOR](){return this.renderRoot?.querySelector('[part="trigger"], [part="combobox-input"]')??null}connectedCallback(){super.connectedCallback(),this.updateValidity(),this.catalogPicker.connected(this.hasUpdated)}willUpdate(changed){super.willUpdate(changed);let modeChanged=!1;if(this.hasUpdated){const renderedControl=this.renderRoot.querySelector('[part="trigger"], [part="combobox-input"]');modeChanged=renderedControl?.getAttribute("part")==="trigger"!==this.closedMode,this.suppressControlBlur=modeChanged,this.catalogPicker.suppressControlEvents=modeChanged,this.modeFocusRepair=modeChanged&&renderedControl!==null&&activeElementIn(this.shadowRoot)===renderedControl?captureComposedFocusRepair(this,this.modeFocusFallback()??renderedControl)??void 0:modeChanged?this.focusedModeRepair:void 0}this.open&&(changed.has("catalog")||changed.has("value")||changed.has("allowCustom"))&&this.catalogPicker.reconcileRows(void 0,changed.has("value")||changed.has("allowCustom")||modeChanged,!1)}disconnectedCallback(){super.disconnectedCallback(),this.modeFocusRepair=void 0,this.focusedModeRepair=void 0,this.focusReturnTarget=void 0,this.catalogPicker.disconnected()}adoptedCallback(){super.adoptedCallback(),this.modeFocusRepair=void 0,this.focusedModeRepair=void 0,this.focusReturnTarget=void 0,this.catalogPicker.adopted()}get value(){return this.catalogPicker.value}set value(next){this.catalogPicker.value=next}get defaultValue(){return this.catalogPicker.defaultValue}set defaultValue(next){this.catalogPicker.defaultValue=next}get name(){return this._name}set name(next){const old=this._name;this._name=next??"",this._name?this.setAttribute("name",this._name):this.removeAttribute("name"),this.requestUpdate("name",old)}get disabled(){return this._disabled}set disabled(next){const old=this._disabled;this._disabled=!!next,this.toggleAttribute("disabled",this._disabled),this._disabled&&this.hide(),this.updateValidity(),this.requestUpdate("disabled",old)}get required(){return this._required}set required(next){const old=this._required;this._required=!!next,this.toggleAttribute("required",this._required),this.updateValidity(),this.requestUpdate("required",old)}get effectiveDisabled(){return this.disabled||this._fieldsetDisabled}get barredFromValidation(){return isBarredFromValidation(this,this.internals)}updateValidity(){this.barredFromValidation?this.validityController.setValidity({}):this.required&&!this.value?this.validityController.setValidity({valueMissing:!0},this.localize("modelSelectRequired")):this.validityController.setValidity({}),this.publishValidityStates()}publishValidityStates(){syncValidityStates(this.internals,{required:this.required,hasInteracted:this.touched,barred:this.barredFromValidation})}formResetCallback(){this.touched=!1,this.catalogPicker.resetValue()}formStateRestoreCallback(state2,_mode){this.catalogPicker.restoreState(state2)}formDisabledCallback(disabled){this._fieldsetDisabled=disabled,disabled&&this.hide(),this.updateValidity(),this.requestUpdate()}checkValidity(){return withStaticValidityCheck(this,()=>this.internals.checkValidity())}reportValidity(){return this.touched=!0,this.publishValidityStates(),this.internals.reportValidity()}setCustomValidity(message){this.validityController.setCustomValidity(message??""),this.publishValidityStates()}get closedMode(){return this.catalogPicker.closedMode}get effectiveEntries(){return this.catalogPicker.effectiveEntries}get filteredEntries(){return this.catalogPicker.filteredEntries}labelFor(id){return this.catalogPicker.labelFor(id)}show(){this.catalogPicker.show()}hide(){this.catalogPicker.hide()}updated(changed){super.updated(changed);const hostDescribedBy=this.getAttribute("aria-describedby");if(hostDescribedBy||this.hasSyncedDescribedByElements){const control=this.renderRoot.querySelector(`#${CSS.escape(this.controlId)}`);this.hasSyncedDescribedByElements=syncAriaDescribedByElements(this,control??void 0,hostDescribedBy)}const reposition=changed.has("open")||this.open&&(changed.has("catalog")||changed.has("allowCustom"));this.catalogPicker.updated(reposition),(changed.has("required")||changed.has("readonly")||changed.has("touched")||changed.has("value"))&&(changed.has("readonly")&&this.updateValidity(),this.toggleAttribute("data-invalid",this.touched&&!this.internals.validity.valid)),this.publishValidityStates(),this.suppressControlBlur=!1,this.catalogPicker.suppressControlEvents=!1;const focusRepair=this.modeFocusRepair;this.modeFocusRepair=void 0,focusRepair&&this.scheduleAfterUpdate(()=>{const replacement=this[VALIDITY_ANCHOR](),target=replacement&&isComposedFocusAvailable(replacement)?replacement:this.modeFocusFallback();applyComposedFocusRepair(focusRepair,target),this.focusedModeRepair===focusRepair&&(this.focusedModeRepair=void 0)},"model-select-mode-focus")}rememberFocusReturn(event){const related=event.relatedTarget;related&&related.nodeType===1&&isComposedFocusAvailable(related)&&(this.focusReturnTarget=related)}captureModeFocus(event){this.rememberFocusReturn(event);const control=event.currentTarget;!control||control.nodeType!==1||(this.focusedModeRepair=captureComposedFocusRepair(this,this.modeFocusFallback()??control)??void 0)}retireModeFocusAfterBlur(event){const destination=event.relatedTarget;if(destination&&destination.nodeType===1){this.focusedModeRepair=void 0;return}queueMicrotask(()=>{!this.suppressControlBlur&&!this.effectiveDisabled&&!this.hasAttribute("inert")&&(this.focusedModeRepair=void 0)})}modeFocusFallback(){if(this.focusReturnTarget&&isComposedFocusAvailable(this.focusReturnTarget))return this.focusReturnTarget;const owner=this.renderRoot.querySelector('[part="form-control"]');return owner&&isComposedFocusAvailable(owner)?owner:null}renderRows(rows,activeId){return rows.map((entry,i)=>{const id=`${this.listId}-opt-${i}`,selected=entry.id===this.value,disabled=entry.disabled===!0;return html`<div
|
|
2
2
|
part="option"
|
|
3
3
|
id=${id}
|
|
4
4
|
role="option"
|
|
@@ -20,6 +20,7 @@ import{__decorate}from"tslib";import{collectionSupport}from"../../../internal/co
|
|
|
20
20
|
@mousedown=${this.onListboxMouseDown}
|
|
21
21
|
@click=${this.onListboxClick}
|
|
22
22
|
>
|
|
23
|
+
<span class="glass-scroll-layer" aria-hidden="true"></span>
|
|
23
24
|
${rows.length===0?html`<div part="empty" role="option" aria-selected="false" aria-disabled="true">${emptyText}</div>`:this.renderRows(rows,activeId)}
|
|
24
25
|
</div>
|
|
25
26
|
`}get hasVisibleLabel(){return(this.label??"").length>0||this.slotPresence.has("label")}renderLabel(){return html`<label part="form-control-label" for=${this.controlId} ?hidden=${!this.hasVisibleLabel}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{css}from"lit";import{formControlFocusHalo,formControlRequiredMarker}from"../../../internal/form-control.styles.js";import{overlaySurfaceFill,overlaySurfaceControlEdge}from"../../../internal/overlay-surface.styles.js";const styles=css` :host { position: relative; display: inline-block; inline-size: 100%; min-inline-size: 0; max-inline-size: var(--lr-model-select-max-inline-size, var(--lr-size-24rem)); --_lr-model-select-trigger-padding: var(--lr-form-control-padding-block) var(--lr-form-control-padding-inline); --_lr-model-select-trigger-min-height: var(--lr-form-control-height); --_lr-model-select-font-size: var(--lr-form-control-font-size); --_lr-model-select-expand-size: var(--lr-size-1-75rem); --_lr-model-select-gap-default: var(--lr-space-xs); --_lr-model-select-radius-default: var(--lr-radius); --_lr-form-control-focus-shadow: var(--lr-form-control-focus-shadow, none); } :host(:disabled) { cursor: not-allowed; } :host([size="2xs"]), :host([size="xs"]) { --_lr-model-select-expand-size: var(--lr-size-1rem); } :host([size="s"]), :host([size="small"]) { --_lr-model-select-expand-size: var(--lr-size-1-25rem); } [part="form-control-label"] { display: block; margin-block-end: var(--lr-space-xs); font-size: var(--lr-font-size-md-sm); font-weight: var(--lr-font-weight-semibold); } [part="form-control-label"][hidden] { display: none; } ${formControlRequiredMarker} [part='trigger'], [part='combobox'] { display: flex; align-items: center; gap: var(--lr-model-select-gap, var(--_lr-model-select-gap-default)); inline-size: 100%; min-inline-size: 0; min-block-size: var( --lr-model-select-trigger-height, var( --lr-model-select-trigger-min-height, var(--_lr-model-select-trigger-min-height) ) ); block-size: var(--lr-model-select-trigger-height, auto); box-sizing: border-box; padding: var( --lr-model-select-trigger-padding, var(--_lr-model-select-trigger-padding) ); border: var(--lr-border-width-thin) solid var(--lr-model-select-trigger-border-color, var(--lr-color-border)); border-radius: var( --lr-model-select-radius, var(--_lr-model-select-radius-default) ); background: var(--lr-model-select-trigger-fill, var(--lr-color-surface)); color: inherit; font: inherit; font-size: var( --lr-model-select-font-size, var(--_lr-model-select-font-size) ); } [part="trigger"] { cursor: pointer; text-align: start; } [part="combobox"] { cursor: text; } [part="trigger"]:focus-visible, [part="combobox"]:focus-within { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part="trigger"]:focus, [part="combobox"]:focus-within { ${formControlFocusHalo} } :where([part="trigger"]):hover:where(:not(:disabled)) { background: var(--lr-color-brand-quiet); border-color: var( --lr-model-select-trigger-hover-border-color, var(--lr-model-select-trigger-border-color, var(--lr-color-border)) ); } :where([part="trigger"]):active:where(:not(:disabled)) { background: color-mix( in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } :host([open]) [part="trigger"] { border-color: var( --lr-model-select-open-border-color, var(--lr-color-brand) ); } :host(:disabled) [part="trigger"], :host(:disabled) [part="combobox"] { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part="provider-badge"] { flex: 0 1 auto; min-inline-size: 0; max-inline-size: 40%; overflow: hidden; text-overflow: ellipsis; padding-inline-end: var(--lr-space-xs); margin-inline-end: var(--lr-space-xs); border-inline-end: var(--lr-border-width-thin) solid var(--lr-color-border-subtle); font-size: var(--lr-size-0-6875rem); font-weight: var(--lr-font-weight-bold); text-transform: uppercase; letter-spacing: var(--lr-size-0-04em); color: var(--lr-color-text-quiet); white-space: nowrap; } .trigger-label { flex: 1 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .trigger-label[data-placeholder] { color: var(--lr-color-text-quiet); } [part="combobox-input"] { flex: 1 1 auto; min-inline-size: 0; border: none; outline: none; background: transparent; color: inherit; font: inherit; } [part="combobox-input"]::placeholder { color: var(--lr-color-text-quiet); } [part="expand-icon"] { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; color: var(--lr-color-text-quiet); min-inline-size: min( var(--lr-icon-button-size), var(--lr-model-select-expand-size, var(--_lr-model-select-expand-size)) ); min-block-size: min( var(--lr-icon-button-size), var(--lr-model-select-expand-size, var(--_lr-model-select-expand-size)) ); line-height: var(--lr-line-height-none); } [part="expand-icon"] svg { transform: rotate(90deg); } [part="listbox"][hidden] { display: none; } [part="listbox"] { position: fixed; z-index: var(--lr-layer-dropdown); box-sizing: border-box; max-block-size: var(--lr-size-18rem); overflow-y: auto; overflow-x: hidden; inline-size: max-content; min-inline-size: var(--lr-size-12rem); max-inline-size: min( var(--lr-popover-viewport-clamp), var(--lr-size-28rem) ); padding: var(--lr-space-xs); ${overlaySurfaceFill} ${overlaySurfaceControlEdge} border-radius: var( --lr-model-select-radius, var(--lr-overlay-radius, var(--_lr-model-select-radius-default)) ); box-shadow: var(--lr-overlay-shadow-anchored, var(--lr-shadow-m)); visibility: hidden; opacity: 0; transform: translateY(var(--lr-size-neg-0-25rem)); transition: opacity var(--lr-transition-fast), transform var(--lr-transition-fast), visibility var(--lr-transition-fast); } :host([open]) [part="listbox"] { visibility: visible; opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { [part="listbox"] { transition: none !important; } } [part="option"] { display: flex; align-items: center; gap: var(--lr-model-select-gap, var(--_lr-model-select-gap-default)); inline-size: 100%; box-sizing: border-box; padding: var(--lr-space-xs) var(--lr-space-s); border: var(--lr-border-width-thin) solid transparent; border-radius: var( --lr-model-select-radius, var(--_lr-model-select-radius-default) ); background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; } [part="option"][aria-selected="true"] { background: var(--lr-model-select-option-selected-bg, transparent); border-color: var( --lr-model-select-option-selected-border, var(--lr-color-brand) ); color: var(--lr-model-select-option-selected-color, var(--lr-color-brand)); font-weight: var( --lr-model-select-option-selected-font-weight, var(--lr-font-weight-semibold) ); } [part="option"]:where(:not([aria-disabled='true'])):hover, [part="option"][data-active] { background: var( --lr-model-select-option-active-bg, var(--lr-color-brand-quiet) ); } [part="option"]:where(:not([aria-disabled='true'])):active { background: color-mix( in oklab, var(--lr-model-select-option-active-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part="option"][aria-disabled='true'] { cursor: default; opacity: var(--lr-model-select-option-disabled-opacity, 0.5); } [part="option-icon"] { flex: 0 0 auto; line-height: var(--lr-line-height-1-4); } [part="option-label"] { flex: 1 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [part="option"][data-synthetic] { border-style: var(--lr-model-select-option-synthetic-border-style, dashed); border-color: var( --lr-model-select-option-synthetic-border-color, var(--lr-color-border) ); } [part="option"][data-synthetic] [part="option-label"] { font-style: italic; } [part="option-badge"] { flex: 0 0 auto; font-size: var(--lr-size-0-6875rem); font-style: normal; font-weight: var(--lr-font-weight-normal); color: var(--lr-color-text-quiet); white-space: nowrap; } [part="empty"] { padding: var(--lr-space-m); color: var(--lr-color-text-quiet); font-size: var(--lr-font-size-md-sm); } [part="hint"] { margin-block-start: var(--lr-space-xs); font-size: var(--lr-font-size-sm); color: var(--lr-color-text-quiet); } [part="hint"][hidden] { display: none; } [part="error"] { margin-block-start: var(--lr-space-xs); font-size: var(--lr-font-size-sm); color: var(--lr-color-danger); } [part="error"][hidden] { display: none; } `;export{styles};
|
|
1
|
+
import{css}from"lit";import{glassSurface}from"../../../internal/glass-surface.styles.js";import{glassScrollLayerStyles}from"../../../internal/glass-scroll-layer.styles.js";import{glassIndependentRootStyles}from"../../../internal/glass-independent-root.styles.js";import{formControlFocusHalo,formControlRequiredMarker}from"../../../internal/form-control.styles.js";import{overlaySurfaceFill,overlaySurfaceControlEdge}from"../../../internal/overlay-surface.styles.js";const styles=css` :host { position: relative; display: inline-block; inline-size: 100%; min-inline-size: 0; max-inline-size: var(--lr-model-select-max-inline-size, var(--lr-size-24rem)); --_lr-model-select-trigger-padding: var(--lr-form-control-padding-block) var(--lr-form-control-padding-inline); --_lr-model-select-trigger-min-height: var(--lr-form-control-height); --_lr-model-select-font-size: var(--lr-form-control-font-size); --_lr-model-select-expand-size: var(--lr-size-1-75rem); --_lr-model-select-gap-default: var(--lr-space-xs); --_lr-model-select-radius-default: var(--lr-radius); --_lr-form-control-focus-shadow: var(--lr-form-control-focus-shadow, none); } :host(:disabled) { cursor: not-allowed; } :host([size="2xs"]), :host([size="xs"]) { --_lr-model-select-expand-size: var(--lr-size-1rem); } :host([size="s"]), :host([size="small"]) { --_lr-model-select-expand-size: var(--lr-size-1-25rem); } [part="form-control-label"] { display: block; margin-block-end: var(--lr-space-xs); font-size: var(--lr-font-size-md-sm); font-weight: var(--lr-font-weight-semibold); } [part="form-control-label"][hidden] { display: none; } ${formControlRequiredMarker} [part='trigger'], [part='combobox'] { display: flex; align-items: center; gap: var(--lr-model-select-gap, var(--_lr-model-select-gap-default)); inline-size: 100%; min-inline-size: 0; min-block-size: var( --lr-model-select-trigger-height, var( --lr-model-select-trigger-min-height, var(--_lr-model-select-trigger-min-height) ) ); block-size: var(--lr-model-select-trigger-height, auto); box-sizing: border-box; padding: var( --lr-model-select-trigger-padding, var(--_lr-model-select-trigger-padding) ); border: var(--lr-border-width-thin) solid var(--lr-model-select-trigger-border-color, var(--lr-color-border)); border-radius: var( --lr-model-select-radius, var(--_lr-model-select-radius-default) ); background: var(--lr-model-select-trigger-fill, var(--lr-color-surface)); color: inherit; font: inherit; font-size: var( --lr-model-select-font-size, var(--_lr-model-select-font-size) ); } [part="trigger"] { cursor: pointer; text-align: start; } [part="combobox"] { cursor: text; } [part="trigger"]:focus-visible, [part="combobox"]:focus-within { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part="trigger"]:focus, [part="combobox"]:focus-within { ${formControlFocusHalo} } :where([part="trigger"]):hover:where(:not(:disabled)) { background: var(--lr-color-brand-quiet); border-color: var( --lr-model-select-trigger-hover-border-color, var(--lr-model-select-trigger-border-color, var(--lr-color-border)) ); } :where([part="trigger"]):active:where(:not(:disabled)) { background: color-mix( in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } :host([open]) [part="trigger"] { border-color: var( --lr-model-select-open-border-color, var(--lr-color-brand) ); } :host(:disabled) [part="trigger"], :host(:disabled) [part="combobox"] { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part="provider-badge"] { flex: 0 1 auto; min-inline-size: 0; max-inline-size: 40%; overflow: hidden; text-overflow: ellipsis; padding-inline-end: var(--lr-space-xs); margin-inline-end: var(--lr-space-xs); border-inline-end: var(--lr-border-width-thin) solid var(--lr-color-border-subtle); font-size: var(--lr-size-0-6875rem); font-weight: var(--lr-font-weight-bold); text-transform: uppercase; letter-spacing: var(--lr-size-0-04em); color: var(--lr-color-text-quiet); white-space: nowrap; } .trigger-label { flex: 1 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .trigger-label[data-placeholder] { color: var(--lr-color-text-quiet); } [part="combobox-input"] { flex: 1 1 auto; min-inline-size: 0; border: none; outline: none; background: transparent; color: inherit; font: inherit; } [part="combobox-input"]::placeholder { color: var(--lr-color-text-quiet); } [part="expand-icon"] { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; color: var(--lr-color-text-quiet); min-inline-size: min( var(--lr-icon-button-size), var(--lr-model-select-expand-size, var(--_lr-model-select-expand-size)) ); min-block-size: min( var(--lr-icon-button-size), var(--lr-model-select-expand-size, var(--_lr-model-select-expand-size)) ); line-height: var(--lr-line-height-none); } [part="expand-icon"] svg { transform: rotate(90deg); } [part="listbox"][hidden] { display: none; } [part="listbox"] { position: fixed; z-index: var(--lr-layer-dropdown); box-sizing: border-box; max-block-size: var(--lr-size-18rem); overflow-y: auto; overflow-x: hidden; inline-size: max-content; min-inline-size: var(--lr-size-12rem); max-inline-size: min( var(--lr-popover-viewport-clamp), var(--lr-size-28rem) ); padding: var(--lr-space-xs); ${overlaySurfaceFill} ${overlaySurfaceControlEdge} border-radius: var( --lr-model-select-radius, var(--lr-overlay-radius, var(--_lr-model-select-radius-default)) ); box-shadow: var(--lr-overlay-shadow-anchored, var(--lr-shadow-m)); visibility: hidden; opacity: 0; transform: translateY(var(--lr-size-neg-0-25rem)); transition: opacity var(--lr-transition-fast), transform var(--lr-transition-fast), visibility var(--lr-transition-fast); } :host([open]) [part="listbox"] { visibility: visible; opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { [part="listbox"] { transition: none !important; } } [part="option"] { display: flex; align-items: center; gap: var(--lr-model-select-gap, var(--_lr-model-select-gap-default)); inline-size: 100%; box-sizing: border-box; padding: var(--lr-space-xs) var(--lr-space-s); border: var(--lr-border-width-thin) solid transparent; border-radius: var( --lr-model-select-radius, var(--_lr-model-select-radius-default) ); background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; } [part="option"][aria-selected="true"] { background: var(--lr-model-select-option-selected-bg, transparent); border-color: var( --lr-model-select-option-selected-border, var(--lr-color-brand) ); color: var(--lr-model-select-option-selected-color, var(--lr-color-brand)); font-weight: var( --lr-model-select-option-selected-font-weight, var(--lr-font-weight-semibold) ); } [part="option"]:where(:not([aria-disabled='true'])):hover, [part="option"][data-active] { background: var( --lr-model-select-option-active-bg, var(--lr-color-brand-quiet) ); } [part="option"]:where(:not([aria-disabled='true'])):active { background: color-mix( in oklab, var(--lr-model-select-option-active-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part="option"][aria-disabled='true'] { cursor: default; opacity: var(--lr-model-select-option-disabled-opacity, 0.5); } [part="option-icon"] { flex: 0 0 auto; line-height: var(--lr-line-height-1-4); } [part="option-label"] { flex: 1 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [part="option"][data-synthetic] { border-style: var(--lr-model-select-option-synthetic-border-style, dashed); border-color: var( --lr-model-select-option-synthetic-border-color, var(--lr-color-border) ); } [part="option"][data-synthetic] [part="option-label"] { font-style: italic; } [part="option-badge"] { flex: 0 0 auto; font-size: var(--lr-size-0-6875rem); font-style: normal; font-weight: var(--lr-font-weight-normal); color: var(--lr-color-text-quiet); white-space: nowrap; } [part="empty"] { padding: var(--lr-space-m); color: var(--lr-color-text-quiet); font-size: var(--lr-font-size-md-sm); } [part="hint"] { margin-block-start: var(--lr-space-xs); font-size: var(--lr-font-size-sm); color: var(--lr-color-text-quiet); } [part="hint"][hidden] { display: none; } [part="error"] { margin-block-start: var(--lr-space-xs); font-size: var(--lr-font-size-sm); color: var(--lr-color-danger); } [part="error"][hidden] { display: none; } ${glassScrollLayerStyles} ${glassIndependentRootStyles} ${glassSurface('[part="listbox"]',css`var(--lr-overlay-surface, var(--_lr-overlay-surface, var(--lr-color-surface-container-high)))`,void 0,!0)} `;export{styles};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{css}from"lit";import{glassSurface
|
|
1
|
+
import{css}from"lit";import{glassSurface}from"../../../internal/glass-surface.styles.js";import{glassScrollLayerStyles}from"../../../internal/glass-scroll-layer.styles.js";import{overlaySurface}from"../../../internal/overlay-surface.styles.js";const styles=css` :host { display: contents; --_lr-selection-toolbar-placement-gap-default: var(--lr-space-s); } [part='toolbar'] { position: fixed; z-index: var(--lr-overlay-stack-index, var(--lr-layer-popover)); inset-inline-start: var(--_lr-selection-toolbar-inline-start); inset-block-start: var(--_lr-selection-toolbar-block-start); display: flex; flex-wrap: wrap; inline-size: max-content; max-inline-size: min( calc(100vw - var(--lr-space-m)), var(--_lr-selection-toolbar-max-inline-size, calc(100vw - var(--lr-space-m))) ); max-block-size: var(--_lr-selection-toolbar-max-block-size, calc(100vh - var(--lr-space-m))); overflow: auto; box-sizing: border-box; gap: var(--lr-space-2xs); padding: var(--lr-space-2xs); ${overlaySurface} box-shadow: var(--lr-overlay-shadow-anchored, var(--lr-shadow-m)); transform: translate( -50%, calc(-100% - var(--lr-selection-toolbar-placement-gap, var(--_lr-selection-toolbar-placement-gap-default))) ); } :host(:dir(rtl)) [part='toolbar'] { transform: translate( 50%, calc(-100% - var(--lr-selection-toolbar-placement-gap, var(--_lr-selection-toolbar-placement-gap-default))) ); } [part='toolbar'][data-positioned] { transform: translate( calc(-50% + var(--_lr-selection-toolbar-inline-shift)), calc(-100% + var(--_lr-selection-toolbar-block-shift)) ); } :host(:dir(rtl)) [part='toolbar'][data-positioned] { transform: translate( calc(50% + var(--_lr-selection-toolbar-inline-shift)), calc(-100% + var(--_lr-selection-toolbar-block-shift)) ); } [part~='action'] { display: inline-flex; align-items: center; justify-content: center; min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); max-inline-size: 100%; transition: color var(--lr-transition-fast); } [part~='action']::part(base) { min-inline-size: 0; max-inline-size: 100%; white-space: normal; overflow-wrap: anywhere; } [part~='action']:hover { color: var(--_lr-glass-brand-text, var(--lr-color-brand)); } [part~='action']:active { color: color-mix(in oklab, var(--_lr-glass-brand-text, var(--lr-color-brand)), var(--lr-color-mix-partner) var(--lr-color-mix-active)); } [part~='action']:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } ${glassScrollLayerStyles} .glass-scroll-layer { margin-inline-end: calc(-1 * var(--lr-space-2xs)); } ${glassSurface("[part='toolbar']",css`var(--lr-overlay-surface, var(--_lr-overlay-surface, var(--lr-color-surface-container-high)))`,void 0,!0)} `;export{styles};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{__decorate}from"tslib";import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{installFormControlLabelSupport}from"../../../internal/form-control-labels.js";installFormControlLabelSupport();import{sizes}from"../../../internal/sizes.styles.js";import{hostAriaLabel,nextId}from"../../../internal/a11y.js";import{syncAriaDescribedByElements}from"../../../internal/aria-reflection.js";import{chevronIcon,playIcon,pauseIcon}from"../../../internal/icons.js";import{AnchoredValidityController,VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{attachInternalsSafely,getFormOwner,installCustomErrorProperty,isBarredFromValidation,setFormOwner}from"../../../internal/form-associated.js";import{installInteractionOnInvalid,installInvalidEventAlias,withStaticValidityCheck}from"../../../internal/invalid-event-alias.js";import{syncValidityStates}from"../../../internal/custom-states.js";import{safeMediaSrc}from"../../../internal/safe-url.js";import{styles}from"./voice-picker.styles.js";import{trueDefaultSpellcheckConverter as spellcheckConverter}from"../../../internal/converters.js";import{CatalogPickerController}from"../../../internal/catalog-picker.js";import{activeElementIn}from"../../../internal/active-element.js";import{SlotPresenceController}from"../../../internal/slot-presence-controller.js";import{LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_noMatches,LYRA_DEFAULT_notInCatalog,LYRA_DEFAULT_voice,LYRA_DEFAULT_voicePickerNoVoices,LYRA_DEFAULT_voicePickerPreview,LYRA_DEFAULT_voicePickerRequired,LYRA_DEFAULT_voicePickerStopPreview}from"../../../internal/default-strings.generated.js";const MAX_VOICE_CATALOG_ENTRIES=1e4;function ownString(value,key){try{const descriptor=Object.getOwnPropertyDescriptor(value,key);return descriptor&&"value"in descriptor&&typeof descriptor.value=="string"?descriptor.value:void 0}catch{return}}function ownBoolean(value,key){try{const descriptor=Object.getOwnPropertyDescriptor(value,key);return descriptor&&"value"in descriptor&&typeof descriptor.value=="boolean"?descriptor.value:void 0}catch{return}}function snapshotVoiceCatalog(value){if(!Array.isArray(value))return;const stringSnapshot=[],entrySnapshot=[];let objectCatalog=!1,length=0;try{length=Math.min(value.length,MAX_VOICE_CATALOG_ENTRIES)}catch{return Object.freeze(stringSnapshot)}for(let index=0;index<length;index+=1){let descriptor;try{descriptor=Object.getOwnPropertyDescriptor(value,String(index))}catch{continue}if(!descriptor||!("value"in descriptor))continue;const candidate=descriptor.value;if(typeof candidate=="string"){objectCatalog?entrySnapshot.push(Object.freeze({id:candidate,label:candidate})):stringSnapshot.push(candidate);continue}if(candidate===null||typeof candidate!="object")continue;const id=ownString(candidate,"id"),label=ownString(candidate,"label");if(id===void 0||label===void 0)continue;objectCatalog||(entrySnapshot.push(...stringSnapshot.map(entry=>Object.freeze({id:entry,label:entry}))),objectCatalog=!0);const language=ownString(candidate,"language"),description=ownString(candidate,"description"),previewUrl=ownString(candidate,"previewUrl"),icon=ownString(candidate,"icon"),disabled=ownBoolean(candidate,"disabled");entrySnapshot.push(Object.freeze({id,label,...language===void 0?{}:{language},...description===void 0?{}:{description},...previewUrl===void 0?{}:{previewUrl},...icon===void 0?{}:{icon},...disabled===void 0?{}:{disabled}}))}return Object.freeze(objectCatalog?entrySnapshot:stringSnapshot)}class LyraVoicePicker extends LyraElement{static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired,noMatches:LYRA_DEFAULT_noMatches,notInCatalog:LYRA_DEFAULT_notInCatalog,voice:LYRA_DEFAULT_voice,voicePickerNoVoices:LYRA_DEFAULT_voicePickerNoVoices,voicePickerPreview:LYRA_DEFAULT_voicePickerPreview,voicePickerRequired:LYRA_DEFAULT_voicePickerRequired,voicePickerStopPreview:LYRA_DEFAULT_voicePickerStopPreview}}static{this.formAssociated=!0}static{this.styles=[LyraElement.styles,sizes,styles]}static{this.properties={customError:{attribute:"custom-error",reflect:!0,noAccessor:!0},disabled:{type:Boolean,reflect:!0,noAccessor:!0},required:{type:Boolean,reflect:!0,noAccessor:!0},value:{attribute:!1,noAccessor:!0},defaultValue:{attribute:"value",reflect:!1,useDefault:!0,noAccessor:!0},name:{reflect:!0,noAccessor:!0}}}get catalog(){return this._catalog}set catalog(next){const old=this._catalog;next!==old&&(this.internalPreviewTargetId!==null&&this.stopInternalPreview(),this._catalog=snapshotVoiceCatalog(next),this.requestUpdate("catalog",old))}get open(){return this.catalogPicker.open}set open(next){this.catalogPicker.setOpen(next)}get activeIndex(){return this.catalogPicker.activeIndex}get query(){return this.catalogPicker.query}constructor(){super(),this.provider="",this.allowCustom=!1,this.readonly=!1,this.withoutPreview=!1,this.label="",this.hint="",this.errorText="",this.placeholder="",this.spellcheck=!0,this.autocapitalize="",this.autoCorrect="",this.autocomplete="off",this.inputMode="",this.enterKeyHint="",this.size="m",this.touched=!1,this.slotPresence=new SlotPresenceController(this),this.previewingId=null,this.listId=nextId("voice-picker-list"),this.controlId=nextId("voice-picker-control"),this.hasSyncedDescribedByElements=!1,this.pendingPreviewId=null,this.previewGeneration=0,this._fieldsetDisabled=!1,this._name="",this._disabled=!1,this._required=!1,this.transferControlFocus=!1,this.catalogPicker=new CatalogPickerController(this,{catalog:()=>this.catalog,allowCustom:()=>this.allowCustom,isReadonly:()=>this.readonly,locale:()=>this.effectiveLocale,searchableFields:entry=>[entry.id,entry.label,entry.language??"",entry.description??""],emitChange:detail=>this.emit("lr-change",detail),beforeValueChange:value=>{const previewTarget=this.internalPreviewTargetId;previewTarget!==null&&previewTarget!==value&&this.stopInternalPreview()},beforeActiveIndexChange:next=>this.reconcilePreviewForActiveIndex(next),afterQueryChange:()=>this.reconcilePreviewVisibility(this.open,this.catalogPicker.filteredEntries),onValueChange:(value,oldValue)=>{this.internals.setFormValue(value),this.updateValidity(),this.requestUpdate("value",oldValue)},onDefaultValueChange:(_value,oldValue)=>this.requestUpdate("defaultValue",oldValue),onStateChange:(state2,oldValue)=>{state2==="open"?(this.catalogPicker.open||this.reconcilePreviewVisibility(!1,[]),this.requestUpdate("open",oldValue)):this.requestUpdate()},onControlBlur:()=>{this.effectiveDisabled||(this.touched=!0)}}),this.markInteracted=()=>{this.touched||(this.touched=!0,this.publishValidityStates())},this.onAudioEnded=event=>{event.currentTarget===this.audioEl&&this.stopInternalPreview()},this.onAudioLoadFailure=eventOrAudio=>{const direct=eventOrAudio,isDomErrorEvent=direct.localName!=="audio",audioLike=direct.localName==="audio"?eventOrAudio:eventOrAudio.currentTarget,failedAudio=audioLike?.localName==="audio"&&typeof audioLike.pause=="function"&&typeof audioLike.removeEventListener=="function"?audioLike:void 0;if(!failedAudio||(failedAudio.removeEventListener("ended",this.onAudioEnded),failedAudio.removeEventListener("error",this.onAudioLoadFailure),failedAudio.pause(),failedAudio!==this.audioEl))return;const pendingVoiceId=this.pendingPreviewId;this.previewGeneration++,this.audioEl=void 0,this.pendingPreviewId=null,isDomErrorEvent&&this.previewingId===null&&pendingVoiceId!==null&&(this.previewingId=pendingVoiceId,this.emit("lr-preview-change",{voiceId:pendingVoiceId})),this.previewingId!==null&&(this.previewingId=null,this.emit("lr-preview-change",{voiceId:null}))},this.onPreviewButtonClick=()=>{const candidate=this.previewCandidateId;candidate&&(this.internalPreviewTargetId===candidate?this.stopInternalPreview():this.requestPreview(candidate))},this.onOptionPreviewClick=(e,entry)=>{e.stopPropagation(),this.internalPreviewTargetId===entry.id?this.stopInternalPreview():this.requestPreview(entry.id)},this.onTriggerClick=()=>{this.effectiveDisabled||(this.open?this.hide():this.show())},this.onControlBlur=event=>{this.catalogPicker.handleControlBlur(event)},this.onControlFocus=event=>{this.catalogPicker.handleControlFocus(event)},this.onTriggerKeyDown=e=>{this.catalogPicker.handleTriggerKeyDown(e)},this.onComboMouseDown=e=>{this.catalogPicker.handleComboMouseDown(e)},this.onInputFocus=event=>{this.catalogPicker.handleInputFocus(event)},this.onInput=e=>{this.catalogPicker.handleInput(e)},this.onInputKeyDown=e=>{this.catalogPicker.handleInputKeyDown(e)},this.onListboxMouseDown=e=>{this.catalogPicker.handleListboxMouseDown(e)},this.onListboxClick=e=>{this.catalogPicker.handleListboxClick(e)},this.internals=attachInternalsSafely(this),this.validityController=new AnchoredValidityController(this,this.internals,()=>this[VALIDITY_ANCHOR]()),installCustomErrorProperty(this,()=>this.validityController.customValidityMessage),installInvalidEventAlias(this,init=>this.emit("lr-invalid",null,init)),installInteractionOnInvalid(this,this.markInteracted),this.internals.setFormValue("")}get form(){return getFormOwner(this.internals)}set form(owner){setFormOwner(this,owner)}getForm(){return getFormOwner(this.internals)}get labels(){return this.internals.labels}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}get willValidate(){return this.internals.willValidate}[VALIDITY_ANCHOR](){return this.renderRoot?.querySelector('[part="trigger"], [part="combobox-input"]')??null}click(){this.catalogPicker.click()}focus(options){this.catalogPicker.focus(options)}blur(){this.catalogPicker.blur()}get input(){return this.catalogPicker.input}get selectionStart(){return this.input?.selectionStart??null}set selectionStart(value){this.input&&(this.input.selectionStart=value)}get selectionEnd(){return this.input?.selectionEnd??null}set selectionEnd(value){this.input&&(this.input.selectionEnd=value)}get selectionDirection(){return this.input?.selectionDirection??null}set selectionDirection(value){this.input&&(this.input.selectionDirection=value)}select(){this.catalogPicker.select()}setSelectionRange(start,end,direction){this.catalogPicker.setSelectionRange(start,end,direction)}setRangeText(replacement,start,end,selectMode){this.catalogPicker.setRangeText(replacement,start,end,selectMode)}connectedCallback(){super.connectedCallback(),this.updateValidity(),this.catalogPicker.connected(this.hasUpdated)}willUpdate(changed){if(super.willUpdate(changed),this.hasUpdated){const switchingMode=this.renderRoot.querySelector('[part="trigger"]')!==null!==this.closedMode,focused=activeElementIn(this.shadowRoot??this.ownerDocument);this.catalogPicker.suppressControlEvents=switchingMode,this.transferControlFocus=switchingMode&&focused?.nodeType===1&&focused.matches('[part="trigger"], [part="combobox-input"]')}if(this.hasUpdated&&(changed.has("catalog")||changed.has("allowCustom")||changed.has("value"))){const activeValue=this.renderRoot.querySelector('[part="option"][data-active]')?.dataset.value,rows=this.closedMode?this.effectiveEntries:this.filteredEntries;this.catalogPicker.reconcileRows(activeValue,!1),this.reconcilePreviewVisibility(this.open,rows)}changed.has("withoutPreview")&&this.withoutPreview&&this.stopInternalPreview()}disconnectedCallback(){super.disconnectedCallback(),this.stopInternalPreview(),this.catalogPicker.disconnected()}adoptedCallback(){super.adoptedCallback(),this.stopInternalPreview(),this.catalogPicker.adopted()}get value(){return this.catalogPicker.value}set value(next){this.catalogPicker.value=next}get defaultValue(){return this.catalogPicker.defaultValue}set defaultValue(next){this.catalogPicker.defaultValue=next}get name(){return this._name}set name(next){const old=this._name;this._name=next??"",this._name?this.setAttribute("name",this._name):this.removeAttribute("name"),this.requestUpdate("name",old)}get disabled(){return this._disabled}set disabled(next){const old=this._disabled;this._disabled=!!next,this.toggleAttribute("disabled",this._disabled),this._disabled&&(this.hide(),this.stopInternalPreview()),this.updateValidity(),this.requestUpdate("disabled",old)}get required(){return this._required}set required(next){const old=this._required;this._required=!!next,this.toggleAttribute("required",this._required),this.updateValidity(),this.requestUpdate("required",old)}get effectiveDisabled(){return this.disabled||this._fieldsetDisabled}get barredFromValidation(){return isBarredFromValidation(this,this.internals)}updateValidity(){this.barredFromValidation?this.validityController.setValidity({}):this.required&&!this.value?this.validityController.setValidity({valueMissing:!0},this.localize("voicePickerRequired")):this.validityController.setValidity({}),this.publishValidityStates()}publishValidityStates(){syncValidityStates(this.internals,{required:this.required,hasInteracted:this.touched,barred:this.barredFromValidation})}formResetCallback(){this.touched=!1,this.catalogPicker.resetValue()}formStateRestoreCallback(state2,_mode){this.catalogPicker.restoreState(state2)}formDisabledCallback(disabled){this._fieldsetDisabled=disabled,disabled&&(this.hide(),this.stopInternalPreview()),this.updateValidity(),this.requestUpdate()}checkValidity(){return withStaticValidityCheck(this,()=>this.internals.checkValidity())}reportValidity(){return this.touched=!0,this.publishValidityStates(),this.internals.reportValidity()}setCustomValidity(message){this.validityController.setCustomValidity(message??""),this.publishValidityStates()}get closedMode(){return this.catalogPicker.closedMode}get effectiveEntries(){return this.catalogPicker.effectiveEntries}get filteredEntries(){return this.catalogPicker.filteredEntries}get malformedCatalogEntries(){const raw=this.catalog;if(!raw||raw.length===0)return[];const out=[];for(const item of raw){const record=typeof item=="string"?{id:item,label:item}:item;typeof record?.id=="string"&&record.id.trim()!==""||out.push({...record,id:"",synthetic:!1})}return out}labelFor(id){return this.catalogPicker.labelFor(id)}show(){this.catalogPicker.show()}hide(){this.catalogPicker.hide()}updated(changed){super.updated(changed);const hostDescribedBy=this.getAttribute("aria-describedby");if(hostDescribedBy||this.hasSyncedDescribedByElements){const control=this.renderRoot.querySelector(`#${CSS.escape(this.controlId)}`);this.hasSyncedDescribedByElements=syncAriaDescribedByElements(this,control??void 0,hostDescribedBy)}const reposition=changed.has("open")||this.open&&(changed.has("catalog")||changed.has("allowCustom"));this.catalogPicker.updated(reposition),(changed.has("required")||changed.has("readonly")||changed.has("touched")||changed.has("value"))&&(changed.has("readonly")&&this.updateValidity(),this.toggleAttribute("data-invalid",this.touched&&!this.internals.validity.valid)),this.publishValidityStates(),this.transferControlFocus&&(this.transferControlFocus=!1,this.renderRoot.querySelector('[part="trigger"], [part="combobox-input"]')?.focus()),this.catalogPicker.suppressControlEvents=!1}get internalPreviewTargetId(){return this.pendingPreviewId??this.previewingId}reconcilePreviewVisibility(open,rows){const target=this.internalPreviewTargetId;if(target===null)return;const standaloneCandidate=open&&this.activeIndex>=0?rows[this.activeIndex]?.id??this.value:this.value,hasVisibleRow=open&&rows.some(entry=>entry.id===target&&!!entry.previewUrl);target!==standaloneCandidate&&!hasVisibleRow&&this.stopInternalPreview()}reconcilePreviewForActiveIndex(next){const target=this.internalPreviewTargetId;if(target!==null){const rows=this.closedMode?this.effectiveEntries:this.filteredEntries,nextCandidate=this.open&&next>=0?rows[next]?.id??this.value:this.value;target!==nextCandidate&&this.stopInternalPreview()}}get previewCandidateId(){return this.open&&this.activeIndex>=0?(this.closedMode?this.effectiveEntries:this.filteredEntries)[this.activeIndex]?.id??this.value:this.value}requestPreview(voiceId){if(!voiceId)return;const currentTarget=this.internalPreviewTargetId;currentTarget!==null&¤tTarget!==voiceId&&this.stopInternalPreview();const previewUrl=this.effectiveEntries.find(e=>e.id===voiceId)?.previewUrl;!this.emit("lr-preview-request",{voiceId,previewUrl},{cancelable:!0}).defaultPrevented&&previewUrl&&this.playInternal(voiceId,previewUrl)}playInternal(voiceId,url){const safe=safeMediaSrc(url);if(!safe)return;this.stopInternalPreview();const audio=this.ownerDocument.createElement("audio");audio.src=safe,audio.addEventListener("ended",this.onAudioEnded),audio.addEventListener("error",this.onAudioLoadFailure);const generation=++this.previewGeneration;this.audioEl=audio,this.pendingPreviewId=voiceId;let playResult;try{playResult=audio.play()}catch{this.onAudioLoadFailure(audio);return}Promise.resolve(playResult).then(()=>{generation!==this.previewGeneration||audio!==this.audioEl||this.pendingPreviewId!==voiceId||(this.pendingPreviewId=null,this.previewingId=voiceId,this.emit("lr-preview-change",{voiceId}))},()=>this.onAudioLoadFailure(audio))}stopInternalPreview(){const hadTarget=this.internalPreviewTargetId!==null||this.audioEl!==void 0;this.audioEl&&(this.audioEl.removeEventListener("ended",this.onAudioEnded),this.audioEl.removeEventListener("error",this.onAudioLoadFailure),this.audioEl.pause(),this.audioEl=void 0),hadTarget&&this.previewGeneration++,this.pendingPreviewId=null,this.previewingId!==null&&(this.previewingId=null,this.emit("lr-preview-change",{voiceId:null}))}get previewButtonLabel(){const candidate=this.previewCandidateId,playing=this.previewingId!==null&&this.previewingId===candidate,name=this.labelFor(candidate)||candidate;return playing?this.localize("voicePickerStopPreview"):this.localize("voicePickerPreview",void 0,{name})}renderRows(rows,activeId){return rows.map((entry,i)=>{const id=`${this.listId}-opt-${i}`,selected=entry.id!==""&&entry.id===this.value,meta=[entry.language,entry.description].filter(Boolean).join(" · ");return html`<div
|
|
1
|
+
import{__decorate}from"tslib";import{GlassScrollLayer}from"../../../internal/glass-scroll-layer.js";import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{installFormControlLabelSupport}from"../../../internal/form-control-labels.js";installFormControlLabelSupport();import{sizes}from"../../../internal/sizes.styles.js";import{hostAriaLabel,nextId}from"../../../internal/a11y.js";import{syncAriaDescribedByElements}from"../../../internal/aria-reflection.js";import{chevronIcon,playIcon,pauseIcon}from"../../../internal/icons.js";import{AnchoredValidityController,VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{attachInternalsSafely,getFormOwner,installCustomErrorProperty,isBarredFromValidation,setFormOwner}from"../../../internal/form-associated.js";import{installInteractionOnInvalid,installInvalidEventAlias,withStaticValidityCheck}from"../../../internal/invalid-event-alias.js";import{syncValidityStates}from"../../../internal/custom-states.js";import{safeMediaSrc}from"../../../internal/safe-url.js";import{styles}from"./voice-picker.styles.js";import{trueDefaultSpellcheckConverter as spellcheckConverter}from"../../../internal/converters.js";import{CatalogPickerController}from"../../../internal/catalog-picker.js";import{activeElementIn}from"../../../internal/active-element.js";import{SlotPresenceController}from"../../../internal/slot-presence-controller.js";import{LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_noMatches,LYRA_DEFAULT_notInCatalog,LYRA_DEFAULT_voice,LYRA_DEFAULT_voicePickerNoVoices,LYRA_DEFAULT_voicePickerPreview,LYRA_DEFAULT_voicePickerRequired,LYRA_DEFAULT_voicePickerStopPreview}from"../../../internal/default-strings.generated.js";const MAX_VOICE_CATALOG_ENTRIES=1e4;function ownString(value,key){try{const descriptor=Object.getOwnPropertyDescriptor(value,key);return descriptor&&"value"in descriptor&&typeof descriptor.value=="string"?descriptor.value:void 0}catch{return}}function ownBoolean(value,key){try{const descriptor=Object.getOwnPropertyDescriptor(value,key);return descriptor&&"value"in descriptor&&typeof descriptor.value=="boolean"?descriptor.value:void 0}catch{return}}function snapshotVoiceCatalog(value){if(!Array.isArray(value))return;const stringSnapshot=[],entrySnapshot=[];let objectCatalog=!1,length=0;try{length=Math.min(value.length,MAX_VOICE_CATALOG_ENTRIES)}catch{return Object.freeze(stringSnapshot)}for(let index=0;index<length;index+=1){let descriptor;try{descriptor=Object.getOwnPropertyDescriptor(value,String(index))}catch{continue}if(!descriptor||!("value"in descriptor))continue;const candidate=descriptor.value;if(typeof candidate=="string"){objectCatalog?entrySnapshot.push(Object.freeze({id:candidate,label:candidate})):stringSnapshot.push(candidate);continue}if(candidate===null||typeof candidate!="object")continue;const id=ownString(candidate,"id"),label=ownString(candidate,"label");if(id===void 0||label===void 0)continue;objectCatalog||(entrySnapshot.push(...stringSnapshot.map(entry=>Object.freeze({id:entry,label:entry}))),objectCatalog=!0);const language=ownString(candidate,"language"),description=ownString(candidate,"description"),previewUrl=ownString(candidate,"previewUrl"),icon=ownString(candidate,"icon"),disabled=ownBoolean(candidate,"disabled");entrySnapshot.push(Object.freeze({id,label,...language===void 0?{}:{language},...description===void 0?{}:{description},...previewUrl===void 0?{}:{previewUrl},...icon===void 0?{}:{icon},...disabled===void 0?{}:{disabled}}))}return Object.freeze(objectCatalog?entrySnapshot:stringSnapshot)}class LyraVoicePicker extends LyraElement{static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired,noMatches:LYRA_DEFAULT_noMatches,notInCatalog:LYRA_DEFAULT_notInCatalog,voice:LYRA_DEFAULT_voice,voicePickerNoVoices:LYRA_DEFAULT_voicePickerNoVoices,voicePickerPreview:LYRA_DEFAULT_voicePickerPreview,voicePickerRequired:LYRA_DEFAULT_voicePickerRequired,voicePickerStopPreview:LYRA_DEFAULT_voicePickerStopPreview}}static{this.formAssociated=!0}static{this.styles=[LyraElement.styles,sizes,styles]}static{this.properties={customError:{attribute:"custom-error",reflect:!0,noAccessor:!0},disabled:{type:Boolean,reflect:!0,noAccessor:!0},required:{type:Boolean,reflect:!0,noAccessor:!0},value:{attribute:!1,noAccessor:!0},defaultValue:{attribute:"value",reflect:!1,useDefault:!0,noAccessor:!0},name:{reflect:!0,noAccessor:!0}}}get catalog(){return this._catalog}set catalog(next){const old=this._catalog;next!==old&&(this.internalPreviewTargetId!==null&&this.stopInternalPreview(),this._catalog=snapshotVoiceCatalog(next),this.requestUpdate("catalog",old))}get open(){return this.catalogPicker.open}set open(next){this.catalogPicker.setOpen(next)}get activeIndex(){return this.catalogPicker.activeIndex}get query(){return this.catalogPicker.query}constructor(){super(),this.provider="",this.allowCustom=!1,this.readonly=!1,this.withoutPreview=!1,this.label="",this.hint="",this.errorText="",this.placeholder="",this.spellcheck=!0,this.autocapitalize="",this.autoCorrect="",this.autocomplete="off",this.inputMode="",this.enterKeyHint="",this.size="m",this.touched=!1,this.slotPresence=new SlotPresenceController(this),this.previewingId=null,this.listId=nextId("voice-picker-list"),this.controlId=nextId("voice-picker-control"),this.hasSyncedDescribedByElements=!1,this.pendingPreviewId=null,this.previewGeneration=0,this._fieldsetDisabled=!1,this._name="",this._disabled=!1,this._required=!1,this.transferControlFocus=!1,this.catalogPicker=new CatalogPickerController(this,{catalog:()=>this.catalog,allowCustom:()=>this.allowCustom,isReadonly:()=>this.readonly,locale:()=>this.effectiveLocale,searchableFields:entry=>[entry.id,entry.label,entry.language??"",entry.description??""],emitChange:detail=>this.emit("lr-change",detail),beforeValueChange:value=>{const previewTarget=this.internalPreviewTargetId;previewTarget!==null&&previewTarget!==value&&this.stopInternalPreview()},beforeActiveIndexChange:next=>this.reconcilePreviewForActiveIndex(next),afterQueryChange:()=>this.reconcilePreviewVisibility(this.open,this.catalogPicker.filteredEntries),onValueChange:(value,oldValue)=>{this.internals.setFormValue(value),this.updateValidity(),this.requestUpdate("value",oldValue)},onDefaultValueChange:(_value,oldValue)=>this.requestUpdate("defaultValue",oldValue),onStateChange:(state2,oldValue)=>{state2==="open"?(this.catalogPicker.open||this.reconcilePreviewVisibility(!1,[]),this.requestUpdate("open",oldValue)):this.requestUpdate()},onControlBlur:()=>{this.effectiveDisabled||(this.touched=!0)}}),this.markInteracted=()=>{this.touched||(this.touched=!0,this.publishValidityStates())},this.onAudioEnded=event=>{event.currentTarget===this.audioEl&&this.stopInternalPreview()},this.onAudioLoadFailure=eventOrAudio=>{const direct=eventOrAudio,isDomErrorEvent=direct.localName!=="audio",audioLike=direct.localName==="audio"?eventOrAudio:eventOrAudio.currentTarget,failedAudio=audioLike?.localName==="audio"&&typeof audioLike.pause=="function"&&typeof audioLike.removeEventListener=="function"?audioLike:void 0;if(!failedAudio||(failedAudio.removeEventListener("ended",this.onAudioEnded),failedAudio.removeEventListener("error",this.onAudioLoadFailure),failedAudio.pause(),failedAudio!==this.audioEl))return;const pendingVoiceId=this.pendingPreviewId;this.previewGeneration++,this.audioEl=void 0,this.pendingPreviewId=null,isDomErrorEvent&&this.previewingId===null&&pendingVoiceId!==null&&(this.previewingId=pendingVoiceId,this.emit("lr-preview-change",{voiceId:pendingVoiceId})),this.previewingId!==null&&(this.previewingId=null,this.emit("lr-preview-change",{voiceId:null}))},this.onPreviewButtonClick=()=>{const candidate=this.previewCandidateId;candidate&&(this.internalPreviewTargetId===candidate?this.stopInternalPreview():this.requestPreview(candidate))},this.onOptionPreviewClick=(e,entry)=>{e.stopPropagation(),this.internalPreviewTargetId===entry.id?this.stopInternalPreview():this.requestPreview(entry.id)},this.onTriggerClick=()=>{this.effectiveDisabled||(this.open?this.hide():this.show())},this.onControlBlur=event=>{this.catalogPicker.handleControlBlur(event)},this.onControlFocus=event=>{this.catalogPicker.handleControlFocus(event)},this.onTriggerKeyDown=e=>{this.catalogPicker.handleTriggerKeyDown(e)},this.onComboMouseDown=e=>{this.catalogPicker.handleComboMouseDown(e)},this.onInputFocus=event=>{this.catalogPicker.handleInputFocus(event)},this.onInput=e=>{this.catalogPicker.handleInput(e)},this.onInputKeyDown=e=>{this.catalogPicker.handleInputKeyDown(e)},this.onListboxMouseDown=e=>{this.catalogPicker.handleListboxMouseDown(e)},this.onListboxClick=e=>{this.catalogPicker.handleListboxClick(e)},new GlassScrollLayer(this,'[part="listbox"]',()=>this.open),this.internals=attachInternalsSafely(this),this.validityController=new AnchoredValidityController(this,this.internals,()=>this[VALIDITY_ANCHOR]()),installCustomErrorProperty(this,()=>this.validityController.customValidityMessage),installInvalidEventAlias(this,init=>this.emit("lr-invalid",null,init)),installInteractionOnInvalid(this,this.markInteracted),this.internals.setFormValue("")}get form(){return getFormOwner(this.internals)}set form(owner){setFormOwner(this,owner)}getForm(){return getFormOwner(this.internals)}get labels(){return this.internals.labels}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}get willValidate(){return this.internals.willValidate}[VALIDITY_ANCHOR](){return this.renderRoot?.querySelector('[part="trigger"], [part="combobox-input"]')??null}click(){this.catalogPicker.click()}focus(options){this.catalogPicker.focus(options)}blur(){this.catalogPicker.blur()}get input(){return this.catalogPicker.input}get selectionStart(){return this.input?.selectionStart??null}set selectionStart(value){this.input&&(this.input.selectionStart=value)}get selectionEnd(){return this.input?.selectionEnd??null}set selectionEnd(value){this.input&&(this.input.selectionEnd=value)}get selectionDirection(){return this.input?.selectionDirection??null}set selectionDirection(value){this.input&&(this.input.selectionDirection=value)}select(){this.catalogPicker.select()}setSelectionRange(start,end,direction){this.catalogPicker.setSelectionRange(start,end,direction)}setRangeText(replacement,start,end,selectMode){this.catalogPicker.setRangeText(replacement,start,end,selectMode)}connectedCallback(){super.connectedCallback(),this.updateValidity(),this.catalogPicker.connected(this.hasUpdated)}willUpdate(changed){if(super.willUpdate(changed),this.hasUpdated){const switchingMode=this.renderRoot.querySelector('[part="trigger"]')!==null!==this.closedMode,focused=activeElementIn(this.shadowRoot??this.ownerDocument);this.catalogPicker.suppressControlEvents=switchingMode,this.transferControlFocus=switchingMode&&focused?.nodeType===1&&focused.matches('[part="trigger"], [part="combobox-input"]')}if(this.hasUpdated&&(changed.has("catalog")||changed.has("allowCustom")||changed.has("value"))){const activeValue=this.renderRoot.querySelector('[part="option"][data-active]')?.dataset.value,rows=this.closedMode?this.effectiveEntries:this.filteredEntries;this.catalogPicker.reconcileRows(activeValue,!1),this.reconcilePreviewVisibility(this.open,rows)}changed.has("withoutPreview")&&this.withoutPreview&&this.stopInternalPreview()}disconnectedCallback(){super.disconnectedCallback(),this.stopInternalPreview(),this.catalogPicker.disconnected()}adoptedCallback(){super.adoptedCallback(),this.stopInternalPreview(),this.catalogPicker.adopted()}get value(){return this.catalogPicker.value}set value(next){this.catalogPicker.value=next}get defaultValue(){return this.catalogPicker.defaultValue}set defaultValue(next){this.catalogPicker.defaultValue=next}get name(){return this._name}set name(next){const old=this._name;this._name=next??"",this._name?this.setAttribute("name",this._name):this.removeAttribute("name"),this.requestUpdate("name",old)}get disabled(){return this._disabled}set disabled(next){const old=this._disabled;this._disabled=!!next,this.toggleAttribute("disabled",this._disabled),this._disabled&&(this.hide(),this.stopInternalPreview()),this.updateValidity(),this.requestUpdate("disabled",old)}get required(){return this._required}set required(next){const old=this._required;this._required=!!next,this.toggleAttribute("required",this._required),this.updateValidity(),this.requestUpdate("required",old)}get effectiveDisabled(){return this.disabled||this._fieldsetDisabled}get barredFromValidation(){return isBarredFromValidation(this,this.internals)}updateValidity(){this.barredFromValidation?this.validityController.setValidity({}):this.required&&!this.value?this.validityController.setValidity({valueMissing:!0},this.localize("voicePickerRequired")):this.validityController.setValidity({}),this.publishValidityStates()}publishValidityStates(){syncValidityStates(this.internals,{required:this.required,hasInteracted:this.touched,barred:this.barredFromValidation})}formResetCallback(){this.touched=!1,this.catalogPicker.resetValue()}formStateRestoreCallback(state2,_mode){this.catalogPicker.restoreState(state2)}formDisabledCallback(disabled){this._fieldsetDisabled=disabled,disabled&&(this.hide(),this.stopInternalPreview()),this.updateValidity(),this.requestUpdate()}checkValidity(){return withStaticValidityCheck(this,()=>this.internals.checkValidity())}reportValidity(){return this.touched=!0,this.publishValidityStates(),this.internals.reportValidity()}setCustomValidity(message){this.validityController.setCustomValidity(message??""),this.publishValidityStates()}get closedMode(){return this.catalogPicker.closedMode}get effectiveEntries(){return this.catalogPicker.effectiveEntries}get filteredEntries(){return this.catalogPicker.filteredEntries}get malformedCatalogEntries(){const raw=this.catalog;if(!raw||raw.length===0)return[];const out=[];for(const item of raw){const record=typeof item=="string"?{id:item,label:item}:item;typeof record?.id=="string"&&record.id.trim()!==""||out.push({...record,id:"",synthetic:!1})}return out}labelFor(id){return this.catalogPicker.labelFor(id)}show(){this.catalogPicker.show()}hide(){this.catalogPicker.hide()}updated(changed){super.updated(changed);const hostDescribedBy=this.getAttribute("aria-describedby");if(hostDescribedBy||this.hasSyncedDescribedByElements){const control=this.renderRoot.querySelector(`#${CSS.escape(this.controlId)}`);this.hasSyncedDescribedByElements=syncAriaDescribedByElements(this,control??void 0,hostDescribedBy)}const reposition=changed.has("open")||this.open&&(changed.has("catalog")||changed.has("allowCustom"));this.catalogPicker.updated(reposition),(changed.has("required")||changed.has("readonly")||changed.has("touched")||changed.has("value"))&&(changed.has("readonly")&&this.updateValidity(),this.toggleAttribute("data-invalid",this.touched&&!this.internals.validity.valid)),this.publishValidityStates(),this.transferControlFocus&&(this.transferControlFocus=!1,this.renderRoot.querySelector('[part="trigger"], [part="combobox-input"]')?.focus()),this.catalogPicker.suppressControlEvents=!1}get internalPreviewTargetId(){return this.pendingPreviewId??this.previewingId}reconcilePreviewVisibility(open,rows){const target=this.internalPreviewTargetId;if(target===null)return;const standaloneCandidate=open&&this.activeIndex>=0?rows[this.activeIndex]?.id??this.value:this.value,hasVisibleRow=open&&rows.some(entry=>entry.id===target&&!!entry.previewUrl);target!==standaloneCandidate&&!hasVisibleRow&&this.stopInternalPreview()}reconcilePreviewForActiveIndex(next){const target=this.internalPreviewTargetId;if(target!==null){const rows=this.closedMode?this.effectiveEntries:this.filteredEntries,nextCandidate=this.open&&next>=0?rows[next]?.id??this.value:this.value;target!==nextCandidate&&this.stopInternalPreview()}}get previewCandidateId(){return this.open&&this.activeIndex>=0?(this.closedMode?this.effectiveEntries:this.filteredEntries)[this.activeIndex]?.id??this.value:this.value}requestPreview(voiceId){if(!voiceId)return;const currentTarget=this.internalPreviewTargetId;currentTarget!==null&¤tTarget!==voiceId&&this.stopInternalPreview();const previewUrl=this.effectiveEntries.find(e=>e.id===voiceId)?.previewUrl;!this.emit("lr-preview-request",{voiceId,previewUrl},{cancelable:!0}).defaultPrevented&&previewUrl&&this.playInternal(voiceId,previewUrl)}playInternal(voiceId,url){const safe=safeMediaSrc(url);if(!safe)return;this.stopInternalPreview();const audio=this.ownerDocument.createElement("audio");audio.src=safe,audio.addEventListener("ended",this.onAudioEnded),audio.addEventListener("error",this.onAudioLoadFailure);const generation=++this.previewGeneration;this.audioEl=audio,this.pendingPreviewId=voiceId;let playResult;try{playResult=audio.play()}catch{this.onAudioLoadFailure(audio);return}Promise.resolve(playResult).then(()=>{generation!==this.previewGeneration||audio!==this.audioEl||this.pendingPreviewId!==voiceId||(this.pendingPreviewId=null,this.previewingId=voiceId,this.emit("lr-preview-change",{voiceId}))},()=>this.onAudioLoadFailure(audio))}stopInternalPreview(){const hadTarget=this.internalPreviewTargetId!==null||this.audioEl!==void 0;this.audioEl&&(this.audioEl.removeEventListener("ended",this.onAudioEnded),this.audioEl.removeEventListener("error",this.onAudioLoadFailure),this.audioEl.pause(),this.audioEl=void 0),hadTarget&&this.previewGeneration++,this.pendingPreviewId=null,this.previewingId!==null&&(this.previewingId=null,this.emit("lr-preview-change",{voiceId:null}))}get previewButtonLabel(){const candidate=this.previewCandidateId,playing=this.previewingId!==null&&this.previewingId===candidate,name=this.labelFor(candidate)||candidate;return playing?this.localize("voicePickerStopPreview"):this.localize("voicePickerPreview",void 0,{name})}renderRows(rows,activeId){return rows.map((entry,i)=>{const id=`${this.listId}-opt-${i}`,selected=entry.id!==""&&entry.id===this.value,meta=[entry.language,entry.description].filter(Boolean).join(" · ");return html`<div
|
|
2
2
|
part="option"
|
|
3
3
|
id=${id}
|
|
4
4
|
role="option"
|
|
@@ -30,6 +30,7 @@ import{__decorate}from"tslib";import{html,nothing}from"lit";import{property,stat
|
|
|
30
30
|
@mousedown=${this.onListboxMouseDown}
|
|
31
31
|
@click=${this.onListboxClick}
|
|
32
32
|
>
|
|
33
|
+
<span class="glass-scroll-layer" aria-hidden="true"></span>
|
|
33
34
|
${rows.length===0?html`<div part="empty" role="option" aria-selected="false" aria-disabled="true">${emptyText}</div>`:this.renderRows(rows,activeId)}
|
|
34
35
|
</div>
|
|
35
36
|
`}get hasVisibleLabel(){return(this.label??"").length>0||this.slotPresence.has("label")}renderLabel(){return html`<label part="form-control-label" for=${this.controlId} ?hidden=${!this.hasVisibleLabel}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{css}from"lit";import{formControlFocusHalo,formControlRequiredMarker}from"../../../internal/form-control.styles.js";import{overlaySurfaceFill,overlaySurfaceControlEdge}from"../../../internal/overlay-surface.styles.js";const styles=css` :host { position: relative; display: inline-block; inline-size: 100%; min-inline-size: 0; max-inline-size: var(--lr-voice-picker-max-inline-size, var(--lr-size-24rem)); --_lr-voice-picker-gap-default: var(--lr-space-xs); --_lr-voice-picker-radius-default: var(--lr-form-control-radius); --_lr-voice-picker-trigger-min-height-default: var(--lr-form-control-height); --_lr-form-control-focus-shadow: var(--lr-form-control-focus-shadow, none); } :host(:disabled) { cursor: not-allowed; } [part='form-control-label'] { display: block; margin-block-end: var(--lr-space-xs); overflow-wrap: anywhere; font-size: var(--lr-font-size-md-sm); font-weight: var(--lr-font-weight-semibold); } [part='form-control-label'][hidden] { display: none; } ${formControlRequiredMarker} .control-row { display: flex; align-items: stretch; gap: var(--lr-voice-picker-gap, var(--_lr-voice-picker-gap-default)); } [part='trigger'], [part='combobox'] { display: flex; align-items: center; gap: var(--lr-voice-picker-gap, var(--_lr-voice-picker-gap-default)); flex: 1 1 auto; min-inline-size: 0; min-block-size: var( --lr-voice-picker-trigger-height, var( --lr-voice-picker-trigger-min-height, var(--_lr-voice-picker-trigger-min-height-default) ) ); block-size: var(--lr-voice-picker-trigger-height, auto); box-sizing: border-box; padding: var(--lr-form-control-padding-block) var(--lr-form-control-padding-inline); border: var(--lr-border-width-thin) solid var(--lr-voice-picker-trigger-border-color, var(--lr-color-border)); border-radius: var(--lr-voice-picker-radius, var(--_lr-voice-picker-radius-default)); background: var(--lr-voice-picker-trigger-fill, var(--lr-color-surface)); color: inherit; font: inherit; font-size: var(--lr-form-control-font-size); } [part='trigger'] { cursor: pointer; text-align: start; } [part='combobox'] { cursor: text; } [part='trigger']:hover:not(:disabled) { border-color: var(--lr-voice-picker-trigger-hover-border-color, var(--lr-color-brand)); } [part='trigger']:active:not(:disabled) { border-color: var(--lr-voice-picker-trigger-hover-border-color, var(--lr-color-brand)); background: color-mix(in oklab, var(--lr-color-surface), var(--lr-color-mix-partner) var(--lr-color-mix-active)); } [part='trigger']:focus-visible, [part='combobox']:focus-within { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part='trigger']:focus, [part='combobox']:focus-within { ${formControlFocusHalo} } :host([open]) [part='trigger'] { border-color: var(--lr-voice-picker-open-border-color, var(--lr-color-brand)); } :host(:disabled) [part='trigger'], :host(:disabled) [part='combobox'] { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part='provider-badge'] { flex: 0 1 auto; min-inline-size: 0; max-inline-size: 40%; overflow: hidden; text-overflow: ellipsis; padding-inline-end: var(--lr-space-xs); margin-inline-end: var(--lr-space-xs); border-inline-end: var(--lr-border-width-thin) solid var(--lr-color-border-subtle); font-size: var(--lr-size-0-6875rem); font-weight: var(--lr-font-weight-bold); text-transform: uppercase; letter-spacing: var(--lr-size-0-04em); color: var(--lr-color-text-quiet); white-space: nowrap; } .trigger-label { flex: 1 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .trigger-label[data-placeholder] { color: var(--lr-color-text-quiet); } [part='combobox-input'] { flex: 1 1 auto; min-inline-size: 0; border: none; outline: none; background: transparent; color: inherit; font: inherit; } [part='combobox-input']::placeholder { color: var(--lr-color-text-quiet); } [part='expand-icon'] { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; color: var(--lr-color-text-quiet); min-inline-size: min(var(--lr-icon-button-size), var(--lr-form-control-height)); min-block-size: min(var(--lr-icon-button-size), var(--lr-form-control-height)); line-height: var(--lr-line-height-none); } [part='expand-icon'] svg { transform: rotate(90deg); } [part='preview-button'] { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; inline-size: max(var(--lr-icon-button-size), var(--lr-form-control-height)); block-size: var( --lr-voice-picker-trigger-height, var( --lr-voice-picker-trigger-min-height, max(var(--lr-icon-button-size), var(--lr-form-control-height)) ) ); min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); border: var(--lr-border-width-thin) solid var(--lr-color-border); border-radius: var(--lr-voice-picker-radius, var(--_lr-voice-picker-radius-default)); background: var(--lr-color-surface); color: var(--lr-color-text); font: inherit; cursor: pointer; } [part='preview-button']:hover:not(:disabled) { background: var(--lr-voice-picker-preview-hover-bg, var(--lr-color-brand-quiet)); color: var(--lr-voice-picker-preview-hover-color, var(--lr-color-brand)); } [part='preview-button']:active:not(:disabled) { background: color-mix( in oklab, var(--lr-voice-picker-preview-hover-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); color: var(--lr-voice-picker-preview-hover-color, var(--lr-color-brand)); } [part='preview-button']:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part='preview-button']:disabled { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part='preview-button'][aria-pressed='true'] { border-color: var(--lr-voice-picker-preview-active-border, var(--lr-color-brand)); color: var(--lr-voice-picker-preview-active-color, var(--lr-color-brand)); } [part='listbox'][hidden] { display: none; } [part='listbox'] { position: fixed; z-index: var(--lr-layer-dropdown); box-sizing: border-box; max-block-size: min(var(--lr-size-18rem), var(--lr-positioner-available-block-size, var(--lr-size-18rem))); overflow-y: auto; overflow-x: hidden; inline-size: max-content; min-inline-size: min(var(--lr-size-12rem), var(--lr-positioner-available-inline-size, var(--lr-size-12rem))); max-inline-size: min(var(--lr-popover-viewport-clamp), var(--lr-size-28rem), var(--lr-positioner-available-inline-size, 100vw)); padding: var(--lr-space-xs); ${overlaySurfaceFill} ${overlaySurfaceControlEdge} border-radius: var( --lr-voice-picker-radius, var(--lr-overlay-radius, var(--_lr-voice-picker-radius-default)) ); box-shadow: var(--lr-overlay-shadow-anchored, var(--lr-shadow-m)); visibility: hidden; opacity: 0; transform: translateY(var(--lr-size-neg-0-25rem)); transition: opacity var(--lr-transition-fast), transform var(--lr-transition-fast), visibility var(--lr-transition-fast); } :host([open]) [part='listbox'] { visibility: visible; opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { [part='listbox'] { transition: none !important; } } [part='option'] { display: flex; align-items: center; gap: var(--lr-voice-picker-gap, var(--_lr-voice-picker-gap-default)); inline-size: 100%; box-sizing: border-box; padding: var(--lr-space-xs) var(--lr-space-s); border: var(--lr-border-width-thin) solid transparent; border-radius: var(--lr-voice-picker-radius, var(--_lr-voice-picker-radius-default)); background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; } [part='option'][aria-selected='true'] { border-color: var(--lr-voice-picker-option-selected-border, var(--lr-color-brand)); color: var(--lr-voice-picker-option-selected-color, var(--lr-color-brand)); background: var(--lr-voice-picker-option-selected-bg, transparent); font-weight: var( --lr-voice-picker-option-selected-font-weight, var(--lr-font-weight-semibold) ); } [part='option']:where(:not([aria-disabled='true'])):hover, [part='option'][data-active] { background: var(--lr-voice-picker-option-active-bg, var(--lr-color-brand-quiet)); } [part='option']:where(:not([aria-disabled='true'])):active { background: color-mix( in oklab, var(--lr-voice-picker-option-active-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part='option'][aria-disabled='true'] { cursor: default; opacity: var(--lr-voice-picker-option-disabled-opacity, 0.5); } [part='option-label'] { flex: 1 1 auto; min-inline-size: 0; display: flex; flex-direction: column; overflow: hidden; } [part='option-label'] > :first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [part='option-meta'] { font-size: var(--lr-size-0-6875rem); color: var(--lr-color-text-quiet); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [part='option']:where(:not([aria-disabled='true'])):hover [part='option-meta'], [part='option'][data-active] [part='option-meta'] { color: var(--lr-color-text); } [part='option'][data-synthetic] { border-style: var(--lr-voice-picker-option-synthetic-border-style, dashed); border-color: var(--lr-voice-picker-option-synthetic-border-color, var(--lr-color-border)); } [part='option'][data-synthetic] [part='option-label'] { font-style: var(--lr-voice-picker-option-synthetic-font-style, italic); } [part='option-badge'] { flex: 0 0 auto; font-size: var(--lr-size-0-6875rem); font-style: normal; font-weight: var(--lr-font-weight-normal); color: var(--lr-color-text-quiet); white-space: nowrap; } [part='option-preview'] { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); border-radius: var(--lr-voice-picker-radius, var(--_lr-voice-picker-radius-default)); color: var(--lr-color-text-quiet); cursor: pointer; } [part='option-preview']:hover { background: var(--lr-voice-picker-preview-hover-bg, var(--lr-color-brand-quiet)); color: var(--lr-voice-picker-preview-hover-color, var(--lr-color-brand)); } [part='option-preview']:active { background: color-mix( in oklab, var(--lr-voice-picker-preview-hover-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); color: var(--lr-voice-picker-preview-hover-color, var(--lr-color-brand)); } [part='empty'] { padding: var(--lr-space-m); color: var(--lr-color-text-quiet); font-size: var(--lr-font-size-md-sm); } [part='hint'] { margin-block-start: var(--lr-space-xs); overflow-wrap: anywhere; font-size: var(--lr-font-size-sm); color: var(--lr-color-text-quiet); } [part='hint'][hidden] { display: none; } [part='error'] { margin-block-start: var(--lr-space-xs); overflow-wrap: anywhere; font-size: var(--lr-font-size-sm); color: var(--lr-color-danger); } [part='error'][hidden] { display: none; } `;export{styles};
|
|
1
|
+
import{css}from"lit";import{glassSurface}from"../../../internal/glass-surface.styles.js";import{glassScrollLayerStyles}from"../../../internal/glass-scroll-layer.styles.js";import{glassIndependentRootStyles}from"../../../internal/glass-independent-root.styles.js";import{formControlFocusHalo,formControlRequiredMarker}from"../../../internal/form-control.styles.js";import{overlaySurfaceFill,overlaySurfaceControlEdge}from"../../../internal/overlay-surface.styles.js";const styles=css` :host { position: relative; display: inline-block; inline-size: 100%; min-inline-size: 0; max-inline-size: var(--lr-voice-picker-max-inline-size, var(--lr-size-24rem)); --_lr-voice-picker-gap-default: var(--lr-space-xs); --_lr-voice-picker-radius-default: var(--lr-form-control-radius); --_lr-voice-picker-trigger-min-height-default: var(--lr-form-control-height); --_lr-form-control-focus-shadow: var(--lr-form-control-focus-shadow, none); } :host(:disabled) { cursor: not-allowed; } [part='form-control-label'] { display: block; margin-block-end: var(--lr-space-xs); overflow-wrap: anywhere; font-size: var(--lr-font-size-md-sm); font-weight: var(--lr-font-weight-semibold); } [part='form-control-label'][hidden] { display: none; } ${formControlRequiredMarker} .control-row { display: flex; align-items: stretch; gap: var(--lr-voice-picker-gap, var(--_lr-voice-picker-gap-default)); } [part='trigger'], [part='combobox'] { display: flex; align-items: center; gap: var(--lr-voice-picker-gap, var(--_lr-voice-picker-gap-default)); flex: 1 1 auto; min-inline-size: 0; min-block-size: var( --lr-voice-picker-trigger-height, var( --lr-voice-picker-trigger-min-height, var(--_lr-voice-picker-trigger-min-height-default) ) ); block-size: var(--lr-voice-picker-trigger-height, auto); box-sizing: border-box; padding: var(--lr-form-control-padding-block) var(--lr-form-control-padding-inline); border: var(--lr-border-width-thin) solid var(--lr-voice-picker-trigger-border-color, var(--lr-color-border)); border-radius: var(--lr-voice-picker-radius, var(--_lr-voice-picker-radius-default)); background: var(--lr-voice-picker-trigger-fill, var(--lr-color-surface)); color: inherit; font: inherit; font-size: var(--lr-form-control-font-size); } [part='trigger'] { cursor: pointer; text-align: start; } [part='combobox'] { cursor: text; } [part='trigger']:hover:not(:disabled) { border-color: var(--lr-voice-picker-trigger-hover-border-color, var(--lr-color-brand)); } [part='trigger']:active:not(:disabled) { border-color: var(--lr-voice-picker-trigger-hover-border-color, var(--lr-color-brand)); background: color-mix(in oklab, var(--lr-color-surface), var(--lr-color-mix-partner) var(--lr-color-mix-active)); } [part='trigger']:focus-visible, [part='combobox']:focus-within { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part='trigger']:focus, [part='combobox']:focus-within { ${formControlFocusHalo} } :host([open]) [part='trigger'] { border-color: var(--lr-voice-picker-open-border-color, var(--lr-color-brand)); } :host(:disabled) [part='trigger'], :host(:disabled) [part='combobox'] { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part='provider-badge'] { flex: 0 1 auto; min-inline-size: 0; max-inline-size: 40%; overflow: hidden; text-overflow: ellipsis; padding-inline-end: var(--lr-space-xs); margin-inline-end: var(--lr-space-xs); border-inline-end: var(--lr-border-width-thin) solid var(--lr-color-border-subtle); font-size: var(--lr-size-0-6875rem); font-weight: var(--lr-font-weight-bold); text-transform: uppercase; letter-spacing: var(--lr-size-0-04em); color: var(--lr-color-text-quiet); white-space: nowrap; } .trigger-label { flex: 1 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .trigger-label[data-placeholder] { color: var(--lr-color-text-quiet); } [part='combobox-input'] { flex: 1 1 auto; min-inline-size: 0; border: none; outline: none; background: transparent; color: inherit; font: inherit; } [part='combobox-input']::placeholder { color: var(--lr-color-text-quiet); } [part='expand-icon'] { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; color: var(--lr-color-text-quiet); min-inline-size: min(var(--lr-icon-button-size), var(--lr-form-control-height)); min-block-size: min(var(--lr-icon-button-size), var(--lr-form-control-height)); line-height: var(--lr-line-height-none); } [part='expand-icon'] svg { transform: rotate(90deg); } [part='preview-button'] { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; inline-size: max(var(--lr-icon-button-size), var(--lr-form-control-height)); block-size: var( --lr-voice-picker-trigger-height, var( --lr-voice-picker-trigger-min-height, max(var(--lr-icon-button-size), var(--lr-form-control-height)) ) ); min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); border: var(--lr-border-width-thin) solid var(--lr-color-border); border-radius: var(--lr-voice-picker-radius, var(--_lr-voice-picker-radius-default)); background: var(--lr-color-surface); color: var(--lr-color-text); font: inherit; cursor: pointer; } [part='preview-button']:hover:not(:disabled) { background: var(--lr-voice-picker-preview-hover-bg, var(--lr-color-brand-quiet)); color: var(--lr-voice-picker-preview-hover-color, var(--lr-color-brand)); } [part='preview-button']:active:not(:disabled) { background: color-mix( in oklab, var(--lr-voice-picker-preview-hover-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); color: var(--lr-voice-picker-preview-hover-color, var(--lr-color-brand)); } [part='preview-button']:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part='preview-button']:disabled { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part='preview-button'][aria-pressed='true'] { border-color: var(--lr-voice-picker-preview-active-border, var(--lr-color-brand)); color: var(--lr-voice-picker-preview-active-color, var(--lr-color-brand)); } [part='listbox'][hidden] { display: none; } [part='listbox'] { position: fixed; z-index: var(--lr-layer-dropdown); box-sizing: border-box; max-block-size: min(var(--lr-size-18rem), var(--lr-positioner-available-block-size, var(--lr-size-18rem))); overflow-y: auto; overflow-x: hidden; inline-size: max-content; min-inline-size: min(var(--lr-size-12rem), var(--lr-positioner-available-inline-size, var(--lr-size-12rem))); max-inline-size: min(var(--lr-popover-viewport-clamp), var(--lr-size-28rem), var(--lr-positioner-available-inline-size, 100vw)); padding: var(--lr-space-xs); ${overlaySurfaceFill} ${overlaySurfaceControlEdge} border-radius: var( --lr-voice-picker-radius, var(--lr-overlay-radius, var(--_lr-voice-picker-radius-default)) ); box-shadow: var(--lr-overlay-shadow-anchored, var(--lr-shadow-m)); visibility: hidden; opacity: 0; transform: translateY(var(--lr-size-neg-0-25rem)); transition: opacity var(--lr-transition-fast), transform var(--lr-transition-fast), visibility var(--lr-transition-fast); } :host([open]) [part='listbox'] { visibility: visible; opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { [part='listbox'] { transition: none !important; } } [part='option'] { display: flex; align-items: center; gap: var(--lr-voice-picker-gap, var(--_lr-voice-picker-gap-default)); inline-size: 100%; box-sizing: border-box; padding: var(--lr-space-xs) var(--lr-space-s); border: var(--lr-border-width-thin) solid transparent; border-radius: var(--lr-voice-picker-radius, var(--_lr-voice-picker-radius-default)); background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; } [part='option'][aria-selected='true'] { border-color: var(--lr-voice-picker-option-selected-border, var(--lr-color-brand)); color: var(--lr-voice-picker-option-selected-color, var(--lr-color-brand)); background: var(--lr-voice-picker-option-selected-bg, transparent); font-weight: var( --lr-voice-picker-option-selected-font-weight, var(--lr-font-weight-semibold) ); } [part='option']:where(:not([aria-disabled='true'])):hover, [part='option'][data-active] { background: var(--lr-voice-picker-option-active-bg, var(--lr-color-brand-quiet)); } [part='option']:where(:not([aria-disabled='true'])):active { background: color-mix( in oklab, var(--lr-voice-picker-option-active-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part='option'][aria-disabled='true'] { cursor: default; opacity: var(--lr-voice-picker-option-disabled-opacity, 0.5); } [part='option-label'] { flex: 1 1 auto; min-inline-size: 0; display: flex; flex-direction: column; overflow: hidden; } [part='option-label'] > :first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [part='option-meta'] { font-size: var(--lr-size-0-6875rem); color: var(--lr-color-text-quiet); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [part='option']:where(:not([aria-disabled='true'])):hover [part='option-meta'], [part='option'][data-active] [part='option-meta'] { color: var(--lr-color-text); } [part='option'][data-synthetic] { border-style: var(--lr-voice-picker-option-synthetic-border-style, dashed); border-color: var(--lr-voice-picker-option-synthetic-border-color, var(--lr-color-border)); } [part='option'][data-synthetic] [part='option-label'] { font-style: var(--lr-voice-picker-option-synthetic-font-style, italic); } [part='option-badge'] { flex: 0 0 auto; font-size: var(--lr-size-0-6875rem); font-style: normal; font-weight: var(--lr-font-weight-normal); color: var(--lr-color-text-quiet); white-space: nowrap; } [part='option-preview'] { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); border-radius: var(--lr-voice-picker-radius, var(--_lr-voice-picker-radius-default)); color: var(--lr-color-text-quiet); cursor: pointer; } [part='option-preview']:hover { background: var(--lr-voice-picker-preview-hover-bg, var(--lr-color-brand-quiet)); color: var(--lr-voice-picker-preview-hover-color, var(--lr-color-brand)); } [part='option-preview']:active { background: color-mix( in oklab, var(--lr-voice-picker-preview-hover-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); color: var(--lr-voice-picker-preview-hover-color, var(--lr-color-brand)); } [part='empty'] { padding: var(--lr-space-m); color: var(--lr-color-text-quiet); font-size: var(--lr-font-size-md-sm); } [part='hint'] { margin-block-start: var(--lr-space-xs); overflow-wrap: anywhere; font-size: var(--lr-font-size-sm); color: var(--lr-color-text-quiet); } [part='hint'][hidden] { display: none; } [part='error'] { margin-block-start: var(--lr-space-xs); overflow-wrap: anywhere; font-size: var(--lr-font-size-sm); color: var(--lr-color-danger); } [part='error'][hidden] { display: none; } ${glassScrollLayerStyles} ${glassIndependentRootStyles} ${glassSurface('[part="listbox"]',css`var(--lr-overlay-surface, var(--_lr-overlay-surface, var(--lr-color-surface-container-high)))`,void 0,!0)} `;export{styles};
|