@aceshooting/lyra-ui 13.0.1 → 14.0.0

package/dist/components/forms/select/select.styles.js

@@ -1 +1 @@
-import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/form-control.styles.js";const styles=css` :host { display: block; --_lr-select-trigger-padding: var(--lr-form-control-padding-block) var(--lr-form-control-padding-inline); --_lr-select-trigger-min-height: var(--lr-form-control-height); --_lr-select-font-size: var(--lr-form-control-font-size); --_lr-select-expand-size: var(--lr-size-1-75rem); --_lr-select-gap: var(--lr-space-xs); --_lr-select-radius: var(--lr-form-control-radius); --_lr-select-tag-padding: var(--lr-space-2xs) var(--lr-space-xs); --_lr-select-tag-font-size: var(--lr-font-size-sm); } :host([size="2xs"]), :host([size="xs"]) { --_lr-select-expand-size: var(--lr-size-1rem); } :host([size="s"]), :host([size="small"]) { --_lr-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} :host([pill]) { --_lr-select-radius: var(--lr-radius-pill); } :host([filled]) [part="trigger"] { background: var(--lr-color-surface-raised); border-color: transparent; } .control { position: relative; display: grid; } .control > [part="trigger"], .control > [part="tags"] { grid-area: 1 / 1; } [part="trigger"] { display: flex; align-items: center; justify-content: space-between; gap: var(--lr-select-gap, var(--_lr-select-gap)); inline-size: 100%; min-inline-size: 0; min-block-size: var( --lr-select-trigger-height, var(--lr-select-trigger-min-height, var(--_lr-select-trigger-min-height)) ); box-sizing: border-box; block-size: var(--lr-select-trigger-height, auto); padding: var( --lr-select-trigger-padding, var(--_lr-select-trigger-padding) ); border: var(--lr-border-width-thin) solid var(--lr-color-border); border-radius: var(--lr-select-radius, var(--_lr-select-radius)); background: var(--lr-color-surface); color: inherit; font: inherit; font-size: var(--lr-select-font-size, var(--_lr-select-font-size)); text-align: start; cursor: pointer; } [part="trigger"]:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } :where([part="trigger"]):hover:where(:not(:disabled)) { background: var(--lr-select-trigger-hover-bg, var(--lr-color-brand-quiet)); } :where([part="trigger"]):active:where(:not(:disabled)) { background: var( --lr-select-trigger-active-bg, color-mix( in oklab, var(--lr-select-trigger-hover-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ); } :host([appearance="filled"]) [part="trigger"] { background: var(--lr-color-surface-raised); border-color: transparent; } :host([appearance="filled-outlined"]) [part="trigger"] { background: var(--lr-color-surface-raised); } :host([appearance="plain"]) [part="trigger"] { background: transparent; border-color: transparent; } :host([appearance="accent"]) [part="trigger"] { background: var(--lr-color-brand); border-color: transparent; color: var(--lr-color-on-brand); } :host([appearance="accent"]) [part="trigger"] .trigger-label[data-placeholder], :host([appearance="accent"]) [part="trigger"] [part="expand-icon"], :host([appearance="accent"]) [part="trigger"] [part="start"], :host([appearance="accent"]) [part="trigger"] [part="end"] { color: inherit; } :host([appearance="accent"]) [part~="tag"] { background: color-mix(in srgb, currentColor 20%, transparent); } :host([appearance="filled"]) :where([part="trigger"]):hover:where(:not(:disabled)), :host([appearance="filled-outlined"]) :where([part="trigger"]):hover:where(:not(:disabled)), :host([filled]) :where([part="trigger"]):hover:where(:not(:disabled)), :host([appearance="plain"]) :where([part="trigger"]):hover:where(:not(:disabled)) { background: var(--lr-select-trigger-hover-bg, var(--lr-color-brand-quiet)); } :host([appearance="filled"]) :where([part="trigger"]):active:where(:not(:disabled)), :host([appearance="filled-outlined"]) :where([part="trigger"]):active:where(:not(:disabled)), :host([filled]) :where([part="trigger"]):active:where(:not(:disabled)), :host([appearance="plain"]) :where([part="trigger"]):active:where(:not(:disabled)) { background: var( --lr-select-trigger-active-bg, color-mix( in oklab, var(--lr-select-trigger-hover-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ); } :host([appearance="accent"]) :where([part="trigger"]):hover:where(:not(:disabled)) { background: var( --lr-select-trigger-hover-bg, color-mix( in oklab, var(--lr-color-brand), var(--lr-color-mix-partner) var(--lr-color-mix-hover) ) ); } :host([appearance="accent"]) :where([part="trigger"]):active:where(:not(:disabled)) { background: var( --lr-select-trigger-active-bg, color-mix( in oklab, var(--lr-color-brand), var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ); } :host([open]) [part="trigger"] { border-color: var(--lr-select-open-border-color, var(--lr-color-brand)); } :host(:disabled) [part="trigger"] { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part="start"], [part="end"] { flex: 0 0 auto; display: inline-flex; align-items: center; color: var(--lr-color-text-quiet); pointer-events: none; } [part="start"][hidden], [part="end"][hidden] { display: none; } .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="tags"] { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: var(--lr-space-2xs); min-inline-size: 0; } .control > [part="tags"] { z-index: var(--lr-layer-content); align-self: center; margin-inline-start: var(--lr-form-control-padding-inline); margin-inline-end: calc( var(--lr-select-expand-size, var(--_lr-select-expand-size)) + var(--lr-form-control-padding-inline) ); padding-block: var(--lr-form-control-padding-block); pointer-events: none; } [part~="tag"] { display: inline-flex; align-items: center; box-sizing: border-box; max-inline-size: min(100%, var(--tag-max-size, var(--lr-size-12rem))); padding: var(--lr-select-tag-padding, var(--_lr-select-tag-padding)); border-radius: var(--lr-radius-xs); background: var(--lr-color-surface-raised); font-size: var(--lr-select-tag-font-size, var(--_lr-select-tag-font-size)); line-height: var(--lr-line-height-none); pointer-events: auto; } [part="tag-label"] { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [part~="tag-overflow"] { color: var(--lr-color-text-quiet); white-space: nowrap; } [part~="tag__remove-button"] { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); margin-block: calc(var(--lr-space-2xs) * -1); margin-inline-end: calc(var(--lr-space-xs) * -1); padding: var(--lr-space-2xs); border: none; border-radius: var(--lr-radius-xs); background: transparent; color: var(--lr-color-text-quiet); cursor: pointer; } [part~="tag__remove-button"]:hover { color: var(--lr-color-text); background: var(--lr-color-brand-quiet); } [part~="tag__remove-button"]:active { background: color-mix( in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part~="tag__remove-button"]:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part~="tag__remove-button"]:disabled { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part="clear-button"] { position: absolute; z-index: var(--lr-layer-content); inset-inline-end: 0; inset-block-start: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); padding: var(--lr-space-2xs); border: none; border-radius: var(--lr-select-radius, var(--_lr-select-radius)); background: none; color: var(--lr-color-text-quiet); line-height: var(--lr-line-height-none); cursor: pointer; } .control[data-clearable] [part="trigger"] { padding-inline-end: var(--lr-icon-button-size); } [part="clear-button"]:hover { color: var(--lr-color-text); } [part="clear-button"]:active { color: var(--lr-color-text); background: color-mix( in oklab, var(--lr-color-surface), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part="clear-button"]:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part="clear-button"]:disabled { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [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-select-expand-size, var(--_lr-select-expand-size)) ); min-block-size: min( var(--lr-icon-button-size), var(--lr-select-expand-size, var(--_lr-select-expand-size)) ); line-height: var(--lr-line-height-none); } [part="expand-icon"] svg { transform: rotate(90deg); } [part="listbox"] { position: absolute; z-index: var(--lr-overlay-stack-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); background: var(--lr-color-surface); border: var(--lr-border-width-thin) solid var(--lr-color-border); border-radius: var(--lr-radius); box-shadow: var(--lr-shadow-m); visibility: hidden; opacity: 0; transform: translateY(var(--lr-size-neg-0-25rem)); transition: opacity var(--hide-duration, var(--lr-transition-fast)), transform var(--hide-duration, var(--lr-transition-fast)), visibility var(--hide-duration, var(--lr-transition-fast)); } :host([hoist]) [part="listbox"] { position: fixed; } :host([open]) [part="listbox"] { visibility: visible; opacity: 1; transform: translateY(0); transition: opacity var(--show-duration, var(--lr-transition-fast)), transform var(--show-duration, var(--lr-transition-fast)), visibility var(--show-duration, var(--lr-transition-fast)); } :host(:disabled) [part="listbox"] { visibility: hidden; opacity: 0; pointer-events: none; transition: none; } @media (prefers-reduced-motion: reduce) { [part="listbox"] { transition: none !important; } } [part="option"] { display: flex; flex-direction: row; align-items: center; gap: var(--lr-space-xs); inline-size: 100%; padding: var(--lr-space-xs) var(--lr-space-s); border: var(--lr-border-width-thin) solid transparent; border-radius: var(--lr-radius); background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; } [part="option"][aria-selected="true"] { background: var(--lr-select-option-selected-bg, transparent); border-color: var( --lr-select-option-selected-border, var(--lr-color-brand) ); color: var(--lr-select-option-selected-color, var(--lr-color-brand)); font-weight: var( --lr-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-select-option-active-bg, var(--lr-color-brand-quiet)); } [part="option"]:where(:not([aria-disabled="true"])):active { background: color-mix( in oklab, var(--lr-select-option-active-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part="option"][aria-disabled="true"] { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part="option-dot"] { inline-size: var(--lr-size-0-5rem); block-size: var(--lr-size-0-5rem); border-radius: 50%; flex: 0 0 auto; } [part="option-label"] { display: flex; flex-direction: column; min-inline-size: 0; } [part="option-sub"] { font-size: var(--lr-font-size-xs); color: var(--lr-color-text-quiet); } [part="form-control"], [part="form-control-label"], [part~="hint"], [part="error"] { min-inline-size: 0; max-inline-size: 100%; overflow-wrap: anywhere; } [part="option"] { box-sizing: border-box; min-inline-size: 0; max-inline-size: 100%; } [part="option-label"] { max-inline-size: 100%; overflow-wrap: anywhere; } [part="option-sub"], .group-label { overflow-wrap: anywhere; } .group-label { padding: var(--lr-space-xs) var(--lr-space-s) 0; 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); } [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};
+import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/form-control.styles.js";const styles=css` :host { display: block; --_lr-select-trigger-padding: var(--lr-form-control-padding-block) var(--lr-form-control-padding-inline); --_lr-select-trigger-min-height: var(--lr-form-control-height); --_lr-select-font-size: var(--lr-form-control-font-size); --_lr-select-expand-size: var(--lr-size-1-75rem); --_lr-select-gap: var(--lr-space-xs); --_lr-select-radius: var(--lr-form-control-radius); --_lr-select-tag-padding: var(--lr-space-2xs) var(--lr-space-xs); --_lr-select-tag-font-size: var(--lr-font-size-sm); } :host([size="2xs"]), :host([size="xs"]) { --_lr-select-expand-size: var(--lr-size-1rem); } :host([size="s"]), :host([size="small"]) { --_lr-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} :host([pill]) { --_lr-select-radius: var(--lr-radius-pill); } :host([filled]) [part="trigger"] { background: var(--lr-color-surface-raised); border-color: transparent; } .control { position: relative; display: grid; } .control > [part="trigger"], .control > [part="tags"] { grid-area: 1 / 1; } [part="trigger"] { display: flex; align-items: center; justify-content: space-between; gap: var(--lr-select-gap, var(--_lr-select-gap)); inline-size: 100%; min-inline-size: 0; min-block-size: var( --lr-select-trigger-height, var(--lr-select-trigger-min-height, var(--_lr-select-trigger-min-height)) ); box-sizing: border-box; block-size: var(--lr-select-trigger-height, auto); padding: var( --lr-select-trigger-padding, var(--_lr-select-trigger-padding) ); border: var(--lr-border-width-thin) solid var(--lr-color-border); border-radius: var(--lr-select-radius, var(--_lr-select-radius)); background: var(--lr-color-surface); color: inherit; font: inherit; font-size: var(--lr-select-font-size, var(--_lr-select-font-size)); text-align: start; cursor: pointer; } [part="trigger"]:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } :where([part="trigger"]):hover:where(:not(:disabled)) { background: var(--lr-select-trigger-hover-bg, var(--lr-color-brand-quiet)); } :where([part="trigger"]):active:where(:not(:disabled)) { background: var( --lr-select-trigger-active-bg, color-mix( in oklab, var(--lr-select-trigger-hover-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ); } :host([appearance="filled"]) [part="trigger"] { background: var(--lr-color-surface-raised); border-color: transparent; } :host([appearance="filled-outlined"]) [part="trigger"] { background: var(--lr-color-surface-raised); } :host([appearance="plain"]) [part="trigger"] { background: transparent; border-color: transparent; } :host([appearance="accent"]) [part="trigger"] { background: var(--lr-color-brand); border-color: transparent; color: var(--lr-color-on-brand); } :host([appearance="accent"]) [part="trigger"] .trigger-label[data-placeholder], :host([appearance="accent"]) [part="trigger"] [part="expand-icon"], :host([appearance="accent"]) [part="trigger"] [part="start"], :host([appearance="accent"]) [part="trigger"] [part="end"] { color: inherit; } :host([appearance="accent"]) [part~="tag"] { background: color-mix(in srgb, currentColor 20%, transparent); } :host([appearance="filled"]) :where([part="trigger"]):hover:where(:not(:disabled)), :host([appearance="filled-outlined"]) :where([part="trigger"]):hover:where(:not(:disabled)), :host([filled]) :where([part="trigger"]):hover:where(:not(:disabled)), :host([appearance="plain"]) :where([part="trigger"]):hover:where(:not(:disabled)) { background: var(--lr-select-trigger-hover-bg, var(--lr-color-brand-quiet)); } :host([appearance="filled"]) :where([part="trigger"]):active:where(:not(:disabled)), :host([appearance="filled-outlined"]) :where([part="trigger"]):active:where(:not(:disabled)), :host([filled]) :where([part="trigger"]):active:where(:not(:disabled)), :host([appearance="plain"]) :where([part="trigger"]):active:where(:not(:disabled)) { background: var( --lr-select-trigger-active-bg, color-mix( in oklab, var(--lr-select-trigger-hover-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ); } :host([appearance="accent"]) :where([part="trigger"]):hover:where(:not(:disabled)) { background: var( --lr-select-trigger-hover-bg, color-mix( in oklab, var(--lr-color-brand), var(--lr-color-mix-partner) var(--lr-color-mix-hover) ) ); } :host([appearance="accent"]) :where([part="trigger"]):active:where(:not(:disabled)) { background: var( --lr-select-trigger-active-bg, color-mix( in oklab, var(--lr-color-brand), var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ); } :host([open]) [part="trigger"] { border-color: var(--lr-select-open-border-color, var(--lr-color-brand)); } :host(:disabled) [part="trigger"] { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part="start"], [part="end"] { flex: 0 0 auto; display: inline-flex; align-items: center; color: var(--lr-color-text-quiet); pointer-events: none; } [part="start"][hidden], [part="end"][hidden] { display: none; } .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="tags"] { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: var(--lr-space-2xs); min-inline-size: 0; } .control > [part="tags"] { z-index: var(--lr-layer-content); align-self: center; margin-inline-start: var(--lr-form-control-padding-inline); margin-inline-end: calc( var(--lr-select-expand-size, var(--_lr-select-expand-size)) + var(--lr-form-control-padding-inline) ); padding-block: var(--lr-form-control-padding-block); pointer-events: none; } [part~="tag"] { display: inline-flex; align-items: center; box-sizing: border-box; max-inline-size: min(100%, var(--tag-max-size, var(--lr-size-12rem))); padding: var(--lr-select-tag-padding, var(--_lr-select-tag-padding)); border-radius: var(--lr-radius-xs); background: var(--lr-color-surface-raised); font-size: var(--lr-select-tag-font-size, var(--_lr-select-tag-font-size)); line-height: var(--lr-line-height-none); pointer-events: auto; } [part="tag-label"] { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [part~="tag-overflow"] { color: var(--lr-color-text-quiet); white-space: nowrap; } [part~="tag__remove-button"] { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); margin-block: calc(var(--lr-space-2xs) * -1); margin-inline-end: calc(var(--lr-space-xs) * -1); padding: var(--lr-space-2xs); border: none; border-radius: var(--lr-radius-xs); background: transparent; color: var(--lr-color-text-quiet); font: inherit; cursor: pointer; } [part~="tag__remove-button"]:hover { color: var(--lr-color-text); background: var(--lr-color-brand-quiet); } [part~="tag__remove-button"]:active { background: color-mix( in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part~="tag__remove-button"]:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part~="tag__remove-button"]:disabled { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part="clear-button"] { position: absolute; z-index: var(--lr-layer-content); inset-inline-end: 0; inset-block-start: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); padding: var(--lr-space-2xs); border: none; border-radius: var(--lr-select-radius, var(--_lr-select-radius)); background: none; color: var(--lr-color-text-quiet); font: inherit; line-height: var(--lr-line-height-none); cursor: pointer; } .control[data-clearable] [part="trigger"] { padding-inline-end: var(--lr-icon-button-size); } [part="clear-button"]:hover { color: var(--lr-color-text); } [part="clear-button"]:active { color: var(--lr-color-text); background: color-mix( in oklab, var(--lr-color-surface), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part="clear-button"]:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part="clear-button"]:disabled { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [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-select-expand-size, var(--_lr-select-expand-size)) ); min-block-size: min( var(--lr-icon-button-size), var(--lr-select-expand-size, var(--_lr-select-expand-size)) ); line-height: var(--lr-line-height-none); } [part="expand-icon"] svg { transform: rotate(90deg); } [part="listbox"] { position: absolute; z-index: var(--lr-overlay-stack-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); background: var(--lr-color-surface); border: var(--lr-border-width-thin) solid var(--lr-color-border); border-radius: var(--lr-radius); box-shadow: var(--lr-shadow-m); visibility: hidden; opacity: 0; transform: translateY(var(--lr-size-neg-0-25rem)); transition: opacity var(--hide-duration, var(--lr-transition-fast)), transform var(--hide-duration, var(--lr-transition-fast)), visibility var(--hide-duration, var(--lr-transition-fast)); } :host([hoist]) [part="listbox"] { position: fixed; } :host([open]) [part="listbox"] { visibility: visible; opacity: 1; transform: translateY(0); transition: opacity var(--show-duration, var(--lr-transition-fast)), transform var(--show-duration, var(--lr-transition-fast)), visibility var(--show-duration, var(--lr-transition-fast)); } :host(:disabled) [part="listbox"] { visibility: hidden; opacity: 0; pointer-events: none; transition: none; } @media (prefers-reduced-motion: reduce) { [part="listbox"] { transition: none !important; } } [part="option"] { display: flex; flex-direction: row; align-items: center; gap: var(--lr-space-xs); inline-size: 100%; padding: var(--lr-space-xs) var(--lr-space-s); border: var(--lr-border-width-thin) solid transparent; border-radius: var(--lr-radius); background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; } [part="option"][aria-selected="true"] { background: var(--lr-select-option-selected-bg, transparent); border-color: var( --lr-select-option-selected-border, var(--lr-color-brand) ); color: var(--lr-select-option-selected-color, var(--lr-color-brand)); font-weight: var( --lr-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-select-option-active-bg, var(--lr-color-brand-quiet)); } [part="option"]:where(:not([aria-disabled="true"])):active { background: color-mix( in oklab, var(--lr-select-option-active-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part="option"][aria-disabled="true"] { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part="option-dot"] { inline-size: var(--lr-size-0-5rem); block-size: var(--lr-size-0-5rem); border-radius: 50%; flex: 0 0 auto; } [part="option-label"] { display: flex; flex-direction: column; min-inline-size: 0; } [part="option-sub"] { font-size: var(--lr-font-size-xs); color: var(--lr-color-text-quiet); } [part="form-control"], [part="form-control-label"], [part~="hint"], [part="error"] { min-inline-size: 0; max-inline-size: 100%; overflow-wrap: anywhere; } [part="option"] { box-sizing: border-box; min-inline-size: 0; max-inline-size: 100%; } [part="option-label"] { max-inline-size: 100%; overflow-wrap: anywhere; } [part="option-sub"], .group-label { overflow-wrap: anywhere; } .group-label { padding: var(--lr-space-xs) var(--lr-space-s) 0; 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); } [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};

package/dist/components/forms/slider/slider.class.js

@@ -1,4 +1,4 @@
-var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{installFormControlLabelSupport}from"../../../internal/form-control-labels.js";installFormControlLabelSupport();import{attachInternalsSafely,getFormOwner,installCustomErrorProperty,isBarredFromValidation,setFormOwner}from"../../../internal/form-associated.js";import{AnchoredValidityController,VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{syncValidityStates}from"../../../internal/custom-states.js";import{installInvalidEventAlias}from"../../../internal/invalid-event-alias.js";import{sizes}from"../../../internal/sizes.styles.js";import{isRtl}from"../../../internal/rtl.js";import{decimalPlaces,finiteInterpolate,finiteNumber,finiteRange,finiteRatio,isSliderKey}from"../../../internal/numbers.js";import{styles}from"./slider.styles.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{dispatchNativeEvent,dispatchNativeInputEvent,relayNativeEvent}from"../../../internal/native-event-relay.js";import{activeElementIn}from"../../../internal/active-element.js";import{currentValidityValidator}from"../form-validator.js";import{LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_rangeEnd,LYRA_DEFAULT_rangeStart,LYRA_DEFAULT_sliderLabel}from"../../../internal/default-strings.generated.js";const PAGE_STEP_MULTIPLIER=10,MAX_MARKER_INTERVALS=100,falseDefaultBooleanConverter={fromAttribute:value=>value!==null&&value!=="false"},HINT_ID="slider-hint",ERROR_ID="slider-error",LABEL_ID="slider-label";class LyraSliderBase extends LyraElement{}class LyraSlider extends LyraSliderBase{static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired,rangeEnd:LYRA_DEFAULT_rangeEnd,rangeStart:LYRA_DEFAULT_rangeStart,sliderLabel:LYRA_DEFAULT_sliderLabel}}static get validators(){return[currentValidityValidator("required","disabled","value","min","max","step")]}static{this.formAssociated=!0}static{this.styles=[LyraElement.styles,sizes,styles]}static{this.properties={customError:{attribute:"custom-error",reflect:!0,noAccessor:!0},value:{attribute:!1,noAccessor:!0},defaultValue:{attribute:"value",type:Number,reflect:!0,useDefault:!0,noAccessor:!0},name:{reflect:!0,noAccessor:!0},required:{type:Boolean,reflect:!0,noAccessor:!0},disabled:{type:Boolean,reflect:!0,noAccessor:!0},min:{type:Number,noAccessor:!0},max:{type:Number,noAccessor:!0},step:{type:Number,noAccessor:!0},range:{type:Boolean,reflect:!0,noAccessor:!0},minValue:{type:Number,attribute:"min-value",noAccessor:!0},maxValue:{type:Number,attribute:"max-value",noAccessor:!0},size:{reflect:!0}}}constructor(){super(),this.size="m",this._value=0,this._defaultValue=0,this._valueDirty=!1,this.settingDefaultValue=!1,this.reflectingDefaultValue=!1,this._name=null,this._required=!1,this._disabled=!1,this._fieldsetDisabled=!1,this._hasInteracted=!1,this._min=0,this._max=100,this._step=1,this._range=!1,this._minValue=0,this._maxValue=50,this._minValueDirty=!1,this._maxValueDirty=!1,this.applyingRangeValueAttribute=!1,this._defaultMinValue=0,this._defaultMaxValue=50,this.label="",this.hint="",this.helpText="",this.errorText="",this.withLabel=!1,this.withHint=!1,this.autofocus=!1,this.orientation="horizontal",this.readonly=!1,this.withMarkers=!1,this.withTooltip=!1,this.tooltipPlacement="top",this.tooltipDistance=8,this.tooltip="none",this.showValue=!1,this.hasHintSlot=!1,this.hasErrorSlot=!1,this.hasLabelSlot=!1,this.hasReferenceSlot=!1,this.drags=new Map,this.pendingKeyHandle=null,this.focusedHandle=null,this.rangeFocusGeneration=0,this.markInteracted=()=>{this._hasInteracted||(this._hasInteracted=!0,this.syncValidityStates())},this.markFocusoutInteracted=()=>{this.effectiveDisabled||this.markInteracted()},this.onKeyDown=(handle,e)=>{if(!this.interactive)return;const current=this.valueForHandle(handle),rtl=isRtl(this),forwardKey=rtl?"ArrowLeft":"ArrowRight",backwardKey=rtl?"ArrowRight":"ArrowLeft",bounds=this.reachableBounds(handle),move=next=>{e.preventDefault(),this.setValueFor(handle,next,!1)&&(this.pendingKeyHandle=handle)};e.key===forwardKey||e.key==="ArrowUp"?move(this.directionalStep(current,1)):e.key===backwardKey||e.key==="ArrowDown"?move(this.directionalStep(current,-1)):e.key==="PageUp"?move(this.directionalStep(current,PAGE_STEP_MULTIPLIER)):e.key==="PageDown"?move(this.directionalStep(current,-PAGE_STEP_MULTIPLIER)):e.key==="Home"?move(bounds.min):e.key==="End"&&move(bounds.max)},this.onKeyUp=e=>{if(!this.interactive||!isSliderKey(e.key))return;const handle=this.pendingKeyHandle;handle!==null&&(this.pendingKeyHandle=null,this.emitChange(handle))},this.onPointerDown=(handle,e)=>{this.interactive&&this.beginDrag(e.pointerId,handle,e.target,this.trackRect(),isRtl(this))},this.onBasePointerDown=e=>{if(!this.interactive)return;const thumbs=Array.from(this.renderRoot.querySelectorAll('[part~="thumb"]'));if(thumbs.length===0||thumbs.includes(e.target))return;const rect=this.trackRect();if(!rect)return;const rtl=isRtl(this),{lo,hi}=this.domain(),target=finiteInterpolate(lo,hi,this.ratioFromPointer(e,rect,rtl)),handle=this.range?this.nearestHandle(target):"value",thumb=this.handleElement(handle)??thumbs[0];if(!thumb)return;const drag=this.beginDrag(e.pointerId,handle,thumb,rect,rtl);drag&&(this.setValueFor(handle,target,!1)&&(drag.changed=!0),thumb.focus())},this.onPointerMove=e=>{const drag=this.drags.get(e.pointerId);if(drag===void 0)return;if(!this.interactive){this.endDrag(e.pointerId,!1);return}if(!drag.rect)return;const{lo,hi}=this.domain(),value=finiteInterpolate(lo,hi,this.ratioFromPointer(e,drag.rect,drag.rtl));this.setValueFor(drag.handle,value,!1)&&(drag.changed=!0)},this.onPointerUp=e=>{this.endDrag(e.pointerId,e.type==="pointerup")},this.onSlotChange=event=>{const slot=event.target;(slot.name==="hint"||slot.name==="help-text")&&(this.hasHintSlot=this.slotsHaveContent(["hint","help-text"])),slot.name==="error"&&(this.hasErrorSlot=this.slotsHaveContent(["error"])),slot.name==="label"&&(this.hasLabelSlot=this.slotsHaveContent(["label"])),slot.name==="reference"&&(this.hasReferenceSlot=this.slotsHaveContent(["reference"]))},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)),this.internals.setFormValue("0","0"),this.addEventListener("input",this.markInteracted),this.addEventListener("change",this.markInteracted),this.addEventListener("focusout",this.markFocusoutInteracted),this.syncValidityStates()}get value(){return this._value}set value(next){const old=this._value;this.settingDefaultValue||(this._valueDirty=!0),this._value=this.clampValue(finiteNumber(Number(next),this.defaultNumericValue())),this.syncFormValue(),this.requestUpdate("value",old)}get defaultValue(){return this._defaultValue}set defaultValue(next){if(this.reflectingDefaultValue)return;const old=this._defaultValue;this._defaultValue=next==null?0:finiteNumber(Number(next),0),this.reflectingDefaultValue=!0;try{next==null?this.removeAttribute("value"):this.setAttribute("value",String(this._defaultValue))}finally{this.reflectingDefaultValue=!1}this._valueDirty||this.restoreLiveValueFromDefault(),this.requestUpdate("defaultValue",old)}get valueAsNumber(){return this.value}set valueAsNumber(next){this.value=next}get valueAsString(){return String(this.value)}set valueAsString(next){this.value=next}get name(){return this._name}set name(next){const old=this._name;this._name=next||null,this._name?this.setAttribute("name",this._name):this.removeAttribute("name"),this.syncFormValue(),this.requestUpdate("name",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 disabled(){return this._disabled}set disabled(next){const old=this._disabled;this._disabled=!!next,this.toggleAttribute("disabled",this._disabled),this._disabled&&(this.pendingKeyHandle=null),this.syncInteractionStates(),this.syncValidityStates(),this.requestUpdate("disabled",old)}get effectiveDisabled(){return this.disabled||this._fieldsetDisabled}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}get min(){return this._min}set min(next){const old=this._min;this._min=finiteNumber(next,0),this.requestUpdate("min",old),this.sanitizeCurrentValue()}get max(){return this._max}set max(next){const old=this._max;this._max=finiteNumber(next,100),this.requestUpdate("max",old),this.sanitizeCurrentValue()}get step(){return this._step}set step(next){const old=this._step;this._step=next==null?1:finiteRange(next,0,0),this.requestUpdate("step",old),this.sanitizeCurrentValue()}get range(){return this._range}set range(next){const old=this._range;this._range=!!next,this.requestUpdate("range",old),this.syncFormValue()}get isRange(){return this.range}get minValue(){return this._minValue}set minValue(next){const old=this._minValue;if(this.applyingRangeValueAttribute||(this._minValueDirty=!0),this._minValue=this.clampValue(finiteNumber(next,0)),this._minValue>this._maxValue){const oldMax=this._maxValue;this._maxValue=this._minValue,this.applyingRangeValueAttribute||(this._maxValueDirty=!0),this.requestUpdate("maxValue",oldMax)}this.syncFormValue(),this.requestUpdate("minValue",old)}get maxValue(){return this._maxValue}set maxValue(next){const old=this._maxValue;if(this.applyingRangeValueAttribute||(this._maxValueDirty=!0),this._maxValue=this.clampValue(finiteNumber(next,50)),this._maxValue<this._minValue){const oldMin=this._minValue;this._minValue=this._maxValue,this.applyingRangeValueAttribute||(this._minValueDirty=!0),this.requestUpdate("minValue",oldMin)}this.syncFormValue(),this.requestUpdate("maxValue",old)}connectedCallback(){super.connectedCallback(),this._valueDirty?this.sanitizeCurrentValue():this.restoreLiveValueFromDefault(),this._minValueDirty||(this._minValue=this.clampValue(this._defaultMinValue)),this._maxValueDirty||(this._maxValue=this.clampValue(this._defaultMaxValue)),this.sanitizeHandles();const slots=Array.from(this.children??[],child=>child.getAttribute("slot"));this.hasHintSlot=slots.some(slot=>slot==="hint"||slot==="help-text"),this.hasErrorSlot=slots.includes("error"),this.hasLabelSlot=slots.includes("label"),this.hasReferenceSlot=slots.includes("reference"),this.syncFormValue(),this.updateValidity(),this.syncInteractionStates()}willUpdate(changed){if(super.willUpdate(changed),!changed.has("range")||!this.hasUpdated)return;const active=activeElementIn(this.shadowRoot);if(active?.matches('[part~="thumb"]')){const target=this.range?"min":"value";this.rangeFocusTransfer={origin:active,target},this.focusedHandle=target,this.syncInteractionStates(),this.rangeFocusGeneration++}this.pendingKeyHandle=null,this.abortActiveDrags()}updated(changed){if(super.updated(changed),changed.has("readonly")&&this.syncValidityStates(),!changed.has("range"))return;const transfer=this.rangeFocusTransfer;if(this.rangeFocusTransfer=void 0,!transfer)return;const generation=this.rangeFocusGeneration;this.scheduleAfterUpdate(()=>{if(generation!==this.rangeFocusGeneration||!this.isConnected||this.effectiveDisabled)return;const internalActive=activeElementIn(this.shadowRoot),documentActive=activeElementIn(this.ownerDocument),focusStayedAtOrigin=internalActive===transfer.origin,originWasRemovedWithoutReplacement=internalActive===null&&(documentActive===null||documentActive===this||documentActive===this.ownerDocument.body);if(!focusStayedAtOrigin&&!originWasRemovedWithoutReplacement)return;this.handleElement(transfer.target)?.focus()},"slider-range-focus")}firstUpdated(changed){if(super.firstUpdated(changed),!this.autofocus)return;const owner=this.ownerDocument.defaultView;if(!owner)return;const handle=owner.requestAnimationFrame(()=>{this.autofocusFrame?.owner!==owner||this.autofocusFrame.handle!==handle||(this.autofocusFrame=void 0,this.isConnected&&this.ownerDocument.defaultView===owner&&this.autofocus&&this.focus())});this.autofocusFrame={owner,handle}}disconnectedCallback(){super.disconnectedCallback(),this.rangeFocusGeneration++,this.rangeFocusTransfer=void 0,this.abortActiveDrags(),this.pendingKeyHandle=null,this.focusedHandle=null,this.syncInteractionStates(),this.teardownDragWindow(),this.cancelAutofocusFrame()}adoptedCallback(){super.adoptedCallback(),this.rangeFocusGeneration++,this.rangeFocusTransfer=void 0,this.abortActiveDrags(),this.pendingKeyHandle=null,this.focusedHandle=null,this.syncInteractionStates(),this.teardownDragWindow(),this.cancelAutofocusFrame()}cancelAutofocusFrame(){const autofocusFrame=this.autofocusFrame;this.autofocusFrame=void 0,autofocusFrame&&autofocusFrame.owner.cancelAnimationFrame(autofocusFrame.handle)}attributeChangedCallback(name,old,value){const isRangeValue=name==="min-value"||name==="max-value";isRangeValue&&(this.applyingRangeValueAttribute=!0);try{super.attributeChangedCallback(name,old,value)}finally{isRangeValue&&(this.applyingRangeValueAttribute=!1)}name==="min-value"&&(this._defaultMinValue=value===null?0:finiteNumber(Number(value),0)),name==="max-value"&&(this._defaultMaxValue=value===null?50:finiteNumber(Number(value),50))}formDisabledCallback(fieldsetDisabled){this._fieldsetDisabled=fieldsetDisabled,fieldsetDisabled&&(this.pendingKeyHandle=null),this.syncInteractionStates(),this.syncValidityStates(),this.requestUpdate()}[VALIDITY_ANCHOR](){return this.firstThumb()}checkValidity(){return this.internals.checkValidity()}reportValidity(){return this.markInteracted(),this.internals.reportValidity()}setCustomValidity(message){this.validityController.setCustomValidity(message??""),this.syncValidityStates(),this.requestUpdate()}resetValidity(){this.setCustomValidity("")}formResetCallback(){this.restoreLiveValueFromDefault(),this._minValue=this._defaultMinValue,this._maxValue=this._defaultMaxValue,this._minValueDirty=!1,this._maxValueDirty=!1,this.sanitizeHandles(),this._hasInteracted=!1,this.syncFormValue(),this.syncValidityStates(),this.requestUpdate()}formStateRestoreCallback(state2,reason){const values=this.readFormDataStrings(state2);if(values){values.length>=2&&(this.minValue=finiteNumber(Number(values[0]),this._defaultMinValue),this.maxValue=finiteNumber(Number(values[1]),this._defaultMaxValue));return}this.value=typeof state2=="string"?state2:this._defaultValue}readFormDataStrings(value){if(value===null||typeof value!="object")return null;const FormDataCtor=this.ownerDocument.defaultView?.FormData;if(!FormDataCtor)return null;try{const iterator=FormDataCtor.prototype.values.call(value),strings=[];for(const entry of iterator)typeof entry=="string"&&strings.push(entry);return strings}catch{return null}}restoreLiveValueFromDefault(){this.settingDefaultValue=!0;try{this.value=this._defaultValue}finally{this.settingDefaultValue=!1}this._valueDirty=!1}updateValidity(){this.validityController.setValidity({}),this.syncValidityStates()}get barredFromValidation(){return isBarredFromValidation(this,this.internals)}syncValidityStates(){syncValidityStates(this.internals,{required:this.required,hasInteracted:this._hasInteracted,barred:this.barredFromValidation})}syncInteractionStates(){const states=this.internals.states,set=(name,active)=>{active?states.add(name):states.delete(name)};set("disabled",this.effectiveDisabled),set("dragging",this.drags.size>0),set("focused",this.focusedHandle!==null)}click(){this.effectiveDisabled||this.firstThumb()?.click()}focus(options){this.effectiveDisabled||this.firstThumb()?.focus(options)}blur(){const active=activeElementIn(this.shadowRoot);active?.nodeType===1&&typeof active.matches=="function"&&typeof active.blur=="function"&&active.matches('[part~="thumb"]')?active.blur():this.firstThumb()?.blur()}stepUp(steps=1){this.stepBy(steps)}stepDown(steps=1){this.stepBy(-steps)}stepBy(steps){if(!this.interactive||finiteRange(this.step,0,0)<=0)return;const count=Math.trunc(finiteNumber(steps,1));if(count===0)return;const handle=this.range&&this.focusedHandle!=="max"?"min":this.focusedHandle??"value";this.assignValueFor(handle,this.directionalStep(this.valueForHandle(handle),count))}directionalStep(current,count){const{lo,hi}=this.domain();if(count===0)return current;const direction=Math.sign(count),magnitude=this.step*Math.abs(count);if(!Number.isFinite(magnitude))return direction>0?hi:lo;const candidate=current+direction*magnitude;return Number.isFinite(candidate)?candidate:direction>0?hi:lo}firstThumb(){return this.renderRoot?.querySelector('[part~="thumb"]')??null}handleElement(handle){const selector={value:'[part~="thumb"]',min:'[part~="thumb-min"]',max:'[part~="thumb-max"]'}[handle];return this.renderRoot?.querySelector(selector)??null}get interactive(){return!this.effectiveDisabled&&!this.readonly}sanitizeCurrentValue(){this.sanitizeHandles();const old=this._value;this._value=this.clampValue(this._value),this._value!==old&&this.requestUpdate("value",old),this.syncFormValue()}sanitizeHandles(){this._minValue=this.clampValue(this._minValue),this._maxValue=this.clampValue(this._maxValue),this._minValue>this._maxValue&&(this._maxValue=this._minValue)}syncFormValue(){if(!this.internals)return;if(!this.range){const serialized=String(this.value);this.internals.setFormValue(serialized,serialized),this.updateValidity();return}const FormDataCtor=this.ownerDocument?.defaultView?.FormData;if(!FormDataCtor){this.internals.setFormValue(null),this.updateValidity();return}const state2=new FormDataCtor,stateKey=this.name||"value";if(state2.append(stateKey,String(this.minValue)),state2.append(stateKey,String(this.maxValue)),!this.name)this.internals.setFormValue(null,state2);else{const submission=new FormDataCtor;submission.append(this.name,String(this.minValue)),submission.append(this.name,String(this.maxValue)),this.internals.setFormValue(submission,state2)}this.updateValidity()}domain(){const min=finiteNumber(this.min,0),max=finiteNumber(this.max,100);return{lo:Math.min(min,max),hi:Math.max(min,max)}}defaultNumericValue(){return this.clampValue(0)}percentOf(value){const{lo,hi}=this.domain(),safeValue=finiteRange(value,lo,lo,hi);return finiteRatio(safeValue,lo,hi)*100}clampValue(raw){const{lo,hi}=this.domain();raw=finiteNumber(raw,lo);const step=finiteRange(this.step,0,0),hasStep=step>0;let stepped=raw;if(hasStep){const stepsFromLo=Math.round((raw-lo)/step);if(Number.isFinite(stepsFromLo)){const candidate=lo+stepsFromLo*step,factor=10**Math.min(decimalPlaces(step),15);Number.isFinite(candidate)&&(stepped=Number.isFinite(candidate*factor)?Math.round(candidate*factor)/factor:candidate)}}return Math.min(hi,Math.max(lo,stepped))}valueForHandle(handle){return handle==="min"?this.minValue:handle==="max"?this.maxValue:this.valueAsNumber}reachableBounds(handle){const{lo,hi}=this.domain();return{min:lo,max:hi}}detailFor(handle){return{value:this.valueForHandle(handle),minValue:this.minValue,maxValue:this.maxValue,handle}}emitInput(handle){dispatchNativeInputEvent(this),this.emit("lr-input",this.detailFor(handle))}emitChange(handle){dispatchNativeEvent(this,"change"),this.emit("lr-change",this.detailFor(handle))}assignValueFor(handle,raw){const previous=this.valueForHandle(handle),stepped=this.clampValue(raw);if(stepped===previous)return!1;if(handle==="min"){if(this._minValueDirty=!0,this._minValue=stepped,this.requestUpdate("minValue",previous),this._minValue>this._maxValue){const previousMax=this._maxValue;this._maxValueDirty=!0,this._maxValue=this._minValue,this.requestUpdate("maxValue",previousMax)}}else if(handle==="max"){if(this._maxValueDirty=!0,this._maxValue=stepped,this.requestUpdate("maxValue",previous),this._maxValue<this._minValue){const previousMin=this._minValue;this._minValueDirty=!0,this._minValue=this._maxValue,this.requestUpdate("minValue",previousMin)}}else this.value=stepped;return handle!=="value"&&this.syncFormValue(),!0}setValueFor(handle,raw,commit){return this.assignValueFor(handle,raw)?(this.emitInput(handle),commit&&this.emitChange(handle),!0):!1}ratioFromPointer(e,rect,rtl){if(this.orientation==="vertical"){const raw2=rect.height===0?0:(e.clientY-rect.top)/rect.height;return Math.min(1,Math.max(0,1-raw2))}const raw=rect.width===0?0:(e.clientX-rect.left)/rect.width;return Math.min(1,Math.max(0,rtl?1-raw:raw))}nearestHandle(target){const toMin=Math.abs(target-this.minValue),toMax=Math.abs(target-this.maxValue);return toMin<toMax?"min":toMax<toMin?"max":target<this.minValue?"min":"max"}beginDrag(pointerId,handle,captureTarget,rect,rtl){const dragWindow=captureTarget.ownerDocument.defaultView;if(!this.isConnected||!dragWindow)return;const firstDrag=this.drags.size===0;if(!firstDrag&&this.dragWindow!==dragWindow)return;captureTarget.setPointerCapture(pointerId);const drag={handle,changed:!1,captureTarget,rect,rtl};return this.drags.set(pointerId,drag),firstDrag&&(this.dragWindow=dragWindow,dragWindow.addEventListener("pointermove",this.onPointerMove),dragWindow.addEventListener("pointerup",this.onPointerUp),dragWindow.addEventListener("pointercancel",this.onPointerUp),dragWindow.addEventListener("lostpointercapture",this.onPointerUp)),this.syncInteractionStates(),this.requestUpdate(),drag}trackRect(){return this.renderRoot.querySelector('[part="track"]')?.getBoundingClientRect()??null}endDrag(pointerId,commit){const drag=this.drags.get(pointerId);drag!==void 0&&(this.drags.delete(pointerId),commit&&drag.changed&&this.emitChange(drag.handle),this.drags.size===0&&this.teardownDragWindow(),this.syncInteractionStates(),this.requestUpdate())}teardownDragWindow(){const dragWindow=this.dragWindow;this.dragWindow=void 0,dragWindow?.removeEventListener("pointermove",this.onPointerMove),dragWindow?.removeEventListener("pointerup",this.onPointerUp),dragWindow?.removeEventListener("pointercancel",this.onPointerUp),dragWindow?.removeEventListener("lostpointercapture",this.onPointerUp)}abortActiveDrags(){const activeDrags=[...this.drags.entries()];if(activeDrags.length!==0){this.drags.clear(),this.teardownDragWindow();for(const[pointerId,drag]of activeDrags)try{drag.captureTarget.hasPointerCapture(pointerId)&&drag.captureTarget.releasePointerCapture(pointerId)}catch{}this.syncInteractionStates()}}onHandleFocus(handle,event){this.focusedHandle!==handle&&(this.focusedHandle=handle,this.syncInteractionStates(),this.requestUpdate()),relayNativeEvent(this,event)}onHandleBlur(handle,event){this.focusedHandle===handle&&(this.focusedHandle=null,this.syncInteractionStates(),this.requestUpdate()),relayNativeEvent(this,event)}slotsHaveContent(names){return names.some(name=>this.renderRoot.querySelector(`slot[name="${name}"]`)?.assignedNodes({flatten:!0}).some(node=>node.nodeType===1||!!node.textContent?.trim())??!1)}formatValue(value){return getNumberFormat(this.effectiveLocale,{maximumFractionDigits:20}).format(value)}readoutText(){return this.range?`${this.formatValue(this.minValue)}\u2013${this.formatValue(this.maxValue)}`:this.formatValue(this.valueAsNumber)}resolvedLabel(){const hostLabel=this.getAttribute("aria-label");return hostLabel!==null?hostLabel:this.label||this.localize("sliderLabel")}offsetStyle(percent){return this.orientation==="vertical"?`inset-block-end:${percent}%`:`inset-inline-start:${percent}%`}markerPercents(){if(!this.withMarkers)return[];const step=finiteRange(this.step,0,0);if(step<=0)return[];const{lo,hi}=this.domain(),span=hi-lo;if(!Number.isFinite(span)||span<=0)return[];const ratio=span/step,intervals=Math.floor(ratio+Number.EPSILON*Math.max(1,Math.abs(ratio))*4);return!Number.isFinite(intervals)||intervals<1||intervals>MAX_MARKER_INTERVALS?[]:Array.from({length:intervals+1},(_unused,index)=>{const value=lo+index*step;return finiteRatio(value,lo,hi)*100})}renderHandle(handle,describedBy,labelledBy){const value=this.valueForHandle(handle),bounds=this.reachableBounds(handle),percent=this.percentOf(value),numeric=this.formatValue(value),valueText=this.valueFormatter?this.valueFormatter(value,handle):this.tooltipFormatter?this.tooltipFormatter(value):numeric,partName={value:"thumb",min:"thumb thumb-min",max:"thumb thumb-max"}[handle],handleLabel={value:this.resolvedLabel(),min:this.localize("rangeStart"),max:this.localize("rangeEnd")}[handle],tooltipPart=this.focusedHandle===handle||Array.from(this.drags.values()).some(drag=>drag.handle===handle)?"tooltip tooltip__tooltip tooltip-visible":"tooltip tooltip__tooltip",showTooltip=this.withTooltip||this.tooltip!=="none",placement=this.tooltip==="none"?this.tooltipPlacement:this.tooltip,tooltipStyle=`${this.offsetStyle(percent)};--lr-slider-tooltip-distance:${finiteRange(this.tooltipDistance,8,0)}`;return html`
+var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{installFormControlLabelSupport}from"../../../internal/form-control-labels.js";installFormControlLabelSupport();import{attachInternalsSafely,getFormOwner,installCustomErrorProperty,isBarredFromValidation,setFormOwner}from"../../../internal/form-associated.js";import{AnchoredValidityController,VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{syncValidityStates}from"../../../internal/custom-states.js";import{installInvalidEventAlias}from"../../../internal/invalid-event-alias.js";import{sizes}from"../../../internal/sizes.styles.js";import{isRtl}from"../../../internal/rtl.js";import{finiteInterpolate,finiteNumber,finiteRange,finiteRatio,isSliderKey}from"../../../internal/numbers.js";import{clampSteppedValue}from"../../../internal/step-value.js";import{styles}from"./slider.styles.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{dispatchNativeEvent,dispatchNativeInputEvent,relayNativeEvent}from"../../../internal/native-event-relay.js";import{activeElementIn}from"../../../internal/active-element.js";import{currentValidityValidator}from"../form-validator.js";import{LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_rangeEnd,LYRA_DEFAULT_rangeStart,LYRA_DEFAULT_sliderLabel}from"../../../internal/default-strings.generated.js";const PAGE_STEP_MULTIPLIER=10,MAX_MARKER_INTERVALS=100,falseDefaultBooleanConverter={fromAttribute:value=>value!==null&&value!=="false"},HINT_ID="slider-hint",ERROR_ID="slider-error",LABEL_ID="slider-label";class LyraSliderBase extends LyraElement{}class LyraSlider extends LyraSliderBase{static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired,rangeEnd:LYRA_DEFAULT_rangeEnd,rangeStart:LYRA_DEFAULT_rangeStart,sliderLabel:LYRA_DEFAULT_sliderLabel}}static get validators(){return[currentValidityValidator("required","disabled","value","min","max","step")]}static{this.formAssociated=!0}static{this.styles=[LyraElement.styles,sizes,styles]}static{this.properties={customError:{attribute:"custom-error",reflect:!0,noAccessor:!0},value:{attribute:!1,noAccessor:!0},defaultValue:{attribute:"value",type:Number,reflect:!0,useDefault:!0,noAccessor:!0},name:{reflect:!0,noAccessor:!0},required:{type:Boolean,reflect:!0,noAccessor:!0},disabled:{type:Boolean,reflect:!0,noAccessor:!0},min:{type:Number,noAccessor:!0},max:{type:Number,noAccessor:!0},step:{type:Number,noAccessor:!0},range:{type:Boolean,reflect:!0,noAccessor:!0},minValue:{type:Number,attribute:"min-value",noAccessor:!0},maxValue:{type:Number,attribute:"max-value",noAccessor:!0},size:{reflect:!0}}}constructor(){super(),this.size="m",this._value=0,this._defaultValue=0,this._valueDirty=!1,this.settingDefaultValue=!1,this.reflectingDefaultValue=!1,this._name=null,this._required=!1,this._disabled=!1,this._fieldsetDisabled=!1,this._hasInteracted=!1,this._min=0,this._max=100,this._step=1,this._range=!1,this._minValue=0,this._maxValue=50,this._minValueDirty=!1,this._maxValueDirty=!1,this.applyingRangeValueAttribute=!1,this._defaultMinValue=0,this._defaultMaxValue=50,this.label="",this.hint="",this.helpText="",this.errorText="",this.withLabel=!1,this.withHint=!1,this.autofocus=!1,this.orientation="horizontal",this.readonly=!1,this.withMarkers=!1,this.withTooltip=!1,this.tooltipPlacement="top",this.tooltipDistance=8,this.tooltip="none",this.showValue=!1,this.hasHintSlot=!1,this.hasErrorSlot=!1,this.hasLabelSlot=!1,this.hasReferenceSlot=!1,this.drags=new Map,this.pendingKeyHandle=null,this.focusedHandle=null,this.rangeFocusGeneration=0,this.markInteracted=()=>{this._hasInteracted||(this._hasInteracted=!0,this.syncValidityStates())},this.markFocusoutInteracted=()=>{this.effectiveDisabled||this.markInteracted()},this.onKeyDown=(handle,e)=>{if(!this.interactive)return;const current=this.valueForHandle(handle),rtl=isRtl(this),forwardKey=rtl?"ArrowLeft":"ArrowRight",backwardKey=rtl?"ArrowRight":"ArrowLeft",bounds=this.reachableBounds(handle),move=next=>{e.preventDefault(),this.setValueFor(handle,next,!1)&&(this.pendingKeyHandle=handle)};e.key===forwardKey||e.key==="ArrowUp"?move(this.directionalStep(current,1)):e.key===backwardKey||e.key==="ArrowDown"?move(this.directionalStep(current,-1)):e.key==="PageUp"?move(this.directionalStep(current,PAGE_STEP_MULTIPLIER)):e.key==="PageDown"?move(this.directionalStep(current,-PAGE_STEP_MULTIPLIER)):e.key==="Home"?move(bounds.min):e.key==="End"&&move(bounds.max)},this.onKeyUp=e=>{if(!this.interactive||!isSliderKey(e.key))return;const handle=this.pendingKeyHandle;handle!==null&&(this.pendingKeyHandle=null,this.emitChange(handle))},this.onPointerDown=(handle,e)=>{this.interactive&&this.beginDrag(e.pointerId,handle,e.target,this.trackRect(),isRtl(this))},this.onBasePointerDown=e=>{if(!this.interactive)return;const thumbs=Array.from(this.renderRoot.querySelectorAll('[part~="thumb"]'));if(thumbs.length===0||thumbs.includes(e.target))return;const rect=this.trackRect();if(!rect)return;const rtl=isRtl(this),{lo,hi}=this.domain(),target=finiteInterpolate(lo,hi,this.ratioFromPointer(e,rect,rtl)),handle=this.range?this.nearestHandle(target):"value",thumb=this.handleElement(handle)??thumbs[0];if(!thumb)return;const drag=this.beginDrag(e.pointerId,handle,thumb,rect,rtl);drag&&(this.setValueFor(handle,target,!1)&&(drag.changed=!0),thumb.focus())},this.onPointerMove=e=>{const drag=this.drags.get(e.pointerId);if(drag===void 0)return;if(!this.interactive){this.endDrag(e.pointerId,!1);return}if(!drag.rect)return;const{lo,hi}=this.domain(),value=finiteInterpolate(lo,hi,this.ratioFromPointer(e,drag.rect,drag.rtl));this.setValueFor(drag.handle,value,!1)&&(drag.changed=!0)},this.onPointerUp=e=>{this.endDrag(e.pointerId,e.type==="pointerup")},this.onSlotChange=event=>{const slot=event.target;(slot.name==="hint"||slot.name==="help-text")&&(this.hasHintSlot=this.slotsHaveContent(["hint","help-text"])),slot.name==="error"&&(this.hasErrorSlot=this.slotsHaveContent(["error"])),slot.name==="label"&&(this.hasLabelSlot=this.slotsHaveContent(["label"])),slot.name==="reference"&&(this.hasReferenceSlot=this.slotsHaveContent(["reference"]))},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)),this.internals.setFormValue("0","0"),this.addEventListener("input",this.markInteracted),this.addEventListener("change",this.markInteracted),this.addEventListener("focusout",this.markFocusoutInteracted),this.syncValidityStates()}get value(){return this._value}set value(next){const old=this._value;this.settingDefaultValue||(this._valueDirty=!0),this._value=this.clampValue(finiteNumber(Number(next),this.defaultNumericValue())),this.syncFormValue(),this.requestUpdate("value",old)}get defaultValue(){return this._defaultValue}set defaultValue(next){if(this.reflectingDefaultValue)return;const old=this._defaultValue;this._defaultValue=next==null?0:finiteNumber(Number(next),0),this.reflectingDefaultValue=!0;try{next==null?this.removeAttribute("value"):this.setAttribute("value",String(this._defaultValue))}finally{this.reflectingDefaultValue=!1}this._valueDirty||this.restoreLiveValueFromDefault(),this.requestUpdate("defaultValue",old)}get valueAsNumber(){return this.value}set valueAsNumber(next){this.value=next}get valueAsString(){return String(this.value)}set valueAsString(next){this.value=next}get name(){return this._name}set name(next){const old=this._name;this._name=next||null,this._name?this.setAttribute("name",this._name):this.removeAttribute("name"),this.syncFormValue(),this.requestUpdate("name",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 disabled(){return this._disabled}set disabled(next){const old=this._disabled;this._disabled=!!next,this.toggleAttribute("disabled",this._disabled),this._disabled&&(this.pendingKeyHandle=null),this.syncInteractionStates(),this.syncValidityStates(),this.requestUpdate("disabled",old)}get effectiveDisabled(){return this.disabled||this._fieldsetDisabled}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}get min(){return this._min}set min(next){const old=this._min;this._min=finiteNumber(next,0),this.requestUpdate("min",old),this.sanitizeCurrentValue()}get max(){return this._max}set max(next){const old=this._max;this._max=finiteNumber(next,100),this.requestUpdate("max",old),this.sanitizeCurrentValue()}get step(){return this._step}set step(next){const old=this._step;this._step=next==null?1:finiteRange(next,0,0),this.requestUpdate("step",old),this.sanitizeCurrentValue()}get range(){return this._range}set range(next){const old=this._range;this._range=!!next,this.requestUpdate("range",old),this.syncFormValue()}get isRange(){return this.range}get minValue(){return this._minValue}set minValue(next){const old=this._minValue;if(this.applyingRangeValueAttribute||(this._minValueDirty=!0),this._minValue=this.clampValue(finiteNumber(next,0)),this._minValue>this._maxValue){const oldMax=this._maxValue;this._maxValue=this._minValue,this.applyingRangeValueAttribute||(this._maxValueDirty=!0),this.requestUpdate("maxValue",oldMax)}this.syncFormValue(),this.requestUpdate("minValue",old)}get maxValue(){return this._maxValue}set maxValue(next){const old=this._maxValue;if(this.applyingRangeValueAttribute||(this._maxValueDirty=!0),this._maxValue=this.clampValue(finiteNumber(next,50)),this._maxValue<this._minValue){const oldMin=this._minValue;this._minValue=this._maxValue,this.applyingRangeValueAttribute||(this._minValueDirty=!0),this.requestUpdate("minValue",oldMin)}this.syncFormValue(),this.requestUpdate("maxValue",old)}connectedCallback(){super.connectedCallback(),this._valueDirty?this.sanitizeCurrentValue():this.restoreLiveValueFromDefault(),this._minValueDirty||(this._minValue=this.clampValue(this._defaultMinValue)),this._maxValueDirty||(this._maxValue=this.clampValue(this._defaultMaxValue)),this.sanitizeHandles();const slots=Array.from(this.children??[],child=>child.getAttribute("slot"));this.hasHintSlot=slots.some(slot=>slot==="hint"||slot==="help-text"),this.hasErrorSlot=slots.includes("error"),this.hasLabelSlot=slots.includes("label"),this.hasReferenceSlot=slots.includes("reference"),this.syncFormValue(),this.updateValidity(),this.syncInteractionStates()}willUpdate(changed){if(super.willUpdate(changed),!changed.has("range")||!this.hasUpdated)return;const active=activeElementIn(this.shadowRoot);if(active?.matches('[part~="thumb"]')){const target=this.range?"min":"value";this.rangeFocusTransfer={origin:active,target},this.focusedHandle=target,this.syncInteractionStates(),this.rangeFocusGeneration++}this.pendingKeyHandle=null,this.abortActiveDrags()}updated(changed){if(super.updated(changed),changed.has("readonly")&&this.syncValidityStates(),!changed.has("range"))return;const transfer=this.rangeFocusTransfer;if(this.rangeFocusTransfer=void 0,!transfer)return;const generation=this.rangeFocusGeneration;this.scheduleAfterUpdate(()=>{if(generation!==this.rangeFocusGeneration||!this.isConnected||this.effectiveDisabled)return;const internalActive=activeElementIn(this.shadowRoot),documentActive=activeElementIn(this.ownerDocument),focusStayedAtOrigin=internalActive===transfer.origin,originWasRemovedWithoutReplacement=internalActive===null&&(documentActive===null||documentActive===this||documentActive===this.ownerDocument.body);if(!focusStayedAtOrigin&&!originWasRemovedWithoutReplacement)return;this.handleElement(transfer.target)?.focus()},"slider-range-focus")}firstUpdated(changed){if(super.firstUpdated(changed),!this.autofocus)return;const owner=this.ownerDocument.defaultView;if(!owner)return;const handle=owner.requestAnimationFrame(()=>{this.autofocusFrame?.owner!==owner||this.autofocusFrame.handle!==handle||(this.autofocusFrame=void 0,this.isConnected&&this.ownerDocument.defaultView===owner&&this.autofocus&&this.focus())});this.autofocusFrame={owner,handle}}disconnectedCallback(){super.disconnectedCallback(),this.rangeFocusGeneration++,this.rangeFocusTransfer=void 0,this.abortActiveDrags(),this.pendingKeyHandle=null,this.focusedHandle=null,this.syncInteractionStates(),this.teardownDragWindow(),this.cancelAutofocusFrame()}adoptedCallback(){super.adoptedCallback(),this.rangeFocusGeneration++,this.rangeFocusTransfer=void 0,this.abortActiveDrags(),this.pendingKeyHandle=null,this.focusedHandle=null,this.syncInteractionStates(),this.teardownDragWindow(),this.cancelAutofocusFrame()}cancelAutofocusFrame(){const autofocusFrame=this.autofocusFrame;this.autofocusFrame=void 0,autofocusFrame&&autofocusFrame.owner.cancelAnimationFrame(autofocusFrame.handle)}attributeChangedCallback(name,old,value){const isRangeValue=name==="min-value"||name==="max-value";isRangeValue&&(this.applyingRangeValueAttribute=!0);try{super.attributeChangedCallback(name,old,value)}finally{isRangeValue&&(this.applyingRangeValueAttribute=!1)}name==="min-value"&&(this._defaultMinValue=value===null?0:finiteNumber(Number(value),0)),name==="max-value"&&(this._defaultMaxValue=value===null?50:finiteNumber(Number(value),50))}formDisabledCallback(fieldsetDisabled){this._fieldsetDisabled=fieldsetDisabled,fieldsetDisabled&&(this.pendingKeyHandle=null),this.syncInteractionStates(),this.syncValidityStates(),this.requestUpdate()}[VALIDITY_ANCHOR](){return this.firstThumb()}checkValidity(){return this.internals.checkValidity()}reportValidity(){return this.markInteracted(),this.internals.reportValidity()}setCustomValidity(message){this.validityController.setCustomValidity(message??""),this.syncValidityStates(),this.requestUpdate()}resetValidity(){this.setCustomValidity("")}formResetCallback(){this.restoreLiveValueFromDefault(),this._minValue=this._defaultMinValue,this._maxValue=this._defaultMaxValue,this._minValueDirty=!1,this._maxValueDirty=!1,this.sanitizeHandles(),this._hasInteracted=!1,this.syncFormValue(),this.syncValidityStates(),this.requestUpdate()}formStateRestoreCallback(state2,reason){const values=this.readFormDataStrings(state2);if(values){values.length>=2&&(this.minValue=finiteNumber(Number(values[0]),this._defaultMinValue),this.maxValue=finiteNumber(Number(values[1]),this._defaultMaxValue));return}this.value=typeof state2=="string"?state2:this._defaultValue}readFormDataStrings(value){if(value===null||typeof value!="object")return null;const FormDataCtor=this.ownerDocument.defaultView?.FormData;if(!FormDataCtor)return null;try{const iterator=FormDataCtor.prototype.values.call(value),strings=[];for(const entry of iterator)typeof entry=="string"&&strings.push(entry);return strings}catch{return null}}restoreLiveValueFromDefault(){this.settingDefaultValue=!0;try{this.value=this._defaultValue}finally{this.settingDefaultValue=!1}this._valueDirty=!1}updateValidity(){this.validityController.setValidity({}),this.syncValidityStates()}get barredFromValidation(){return isBarredFromValidation(this,this.internals)}syncValidityStates(){syncValidityStates(this.internals,{required:this.required,hasInteracted:this._hasInteracted,barred:this.barredFromValidation})}syncInteractionStates(){const states=this.internals.states,set=(name,active)=>{active?states.add(name):states.delete(name)};set("disabled",this.effectiveDisabled),set("dragging",this.drags.size>0),set("focused",this.focusedHandle!==null)}click(){this.effectiveDisabled||this.firstThumb()?.click()}focus(options){this.effectiveDisabled||this.firstThumb()?.focus(options)}blur(){const active=activeElementIn(this.shadowRoot);active?.nodeType===1&&typeof active.matches=="function"&&typeof active.blur=="function"&&active.matches('[part~="thumb"]')?active.blur():this.firstThumb()?.blur()}stepUp(steps=1){this.stepBy(steps)}stepDown(steps=1){this.stepBy(-steps)}stepBy(steps){if(!this.interactive||finiteRange(this.step,0,0)<=0)return;const count=Math.trunc(finiteNumber(steps,1));if(count===0)return;const handle=this.range&&this.focusedHandle!=="max"?"min":this.focusedHandle??"value";this.assignValueFor(handle,this.directionalStep(this.valueForHandle(handle),count))}directionalStep(current,count){const{lo,hi}=this.domain();if(count===0)return current;const direction=Math.sign(count),magnitude=this.step*Math.abs(count);if(!Number.isFinite(magnitude))return direction>0?hi:lo;const candidate=current+direction*magnitude;return Number.isFinite(candidate)?candidate:direction>0?hi:lo}firstThumb(){return this.renderRoot?.querySelector('[part~="thumb"]')??null}handleElement(handle){const selector={value:'[part~="thumb"]',min:'[part~="thumb-min"]',max:'[part~="thumb-max"]'}[handle];return this.renderRoot?.querySelector(selector)??null}get interactive(){return!this.effectiveDisabled&&!this.readonly}sanitizeCurrentValue(){this.sanitizeHandles();const old=this._value;this._value=this.clampValue(this._value),this._value!==old&&this.requestUpdate("value",old),this.syncFormValue()}sanitizeHandles(){this._minValue=this.clampValue(this._minValue),this._maxValue=this.clampValue(this._maxValue),this._minValue>this._maxValue&&(this._maxValue=this._minValue)}syncFormValue(){if(!this.internals)return;if(!this.range){const serialized=String(this.value);this.internals.setFormValue(serialized,serialized),this.updateValidity();return}const FormDataCtor=this.ownerDocument?.defaultView?.FormData;if(!FormDataCtor){this.internals.setFormValue(null),this.updateValidity();return}const state2=new FormDataCtor,stateKey=this.name||"value";if(state2.append(stateKey,String(this.minValue)),state2.append(stateKey,String(this.maxValue)),!this.name)this.internals.setFormValue(null,state2);else{const submission=new FormDataCtor;submission.append(this.name,String(this.minValue)),submission.append(this.name,String(this.maxValue)),this.internals.setFormValue(submission,state2)}this.updateValidity()}domain(){const min=finiteNumber(this.min,0),max=finiteNumber(this.max,100);return{lo:Math.min(min,max),hi:Math.max(min,max)}}defaultNumericValue(){return this.clampValue(0)}percentOf(value){const{lo,hi}=this.domain(),safeValue=finiteRange(value,lo,lo,hi);return finiteRatio(safeValue,lo,hi)*100}clampValue(raw){const{lo,hi}=this.domain();return clampSteppedValue(raw,lo,hi,this.step)}valueForHandle(handle){return handle==="min"?this.minValue:handle==="max"?this.maxValue:this.valueAsNumber}reachableBounds(handle){const{lo,hi}=this.domain();return{min:lo,max:hi}}detailFor(handle){return{value:this.valueForHandle(handle),minValue:this.minValue,maxValue:this.maxValue,handle}}emitInput(handle){dispatchNativeInputEvent(this),this.emit("lr-input",this.detailFor(handle))}emitChange(handle){dispatchNativeEvent(this,"change"),this.emit("lr-change",this.detailFor(handle))}assignValueFor(handle,raw){const previous=this.valueForHandle(handle),stepped=this.clampValue(raw);if(stepped===previous)return!1;if(handle==="min"){if(this._minValueDirty=!0,this._minValue=stepped,this.requestUpdate("minValue",previous),this._minValue>this._maxValue){const previousMax=this._maxValue;this._maxValueDirty=!0,this._maxValue=this._minValue,this.requestUpdate("maxValue",previousMax)}}else if(handle==="max"){if(this._maxValueDirty=!0,this._maxValue=stepped,this.requestUpdate("maxValue",previous),this._maxValue<this._minValue){const previousMin=this._minValue;this._minValueDirty=!0,this._minValue=this._maxValue,this.requestUpdate("minValue",previousMin)}}else this.value=stepped;return handle!=="value"&&this.syncFormValue(),!0}setValueFor(handle,raw,commit){return this.assignValueFor(handle,raw)?(this.emitInput(handle),commit&&this.emitChange(handle),!0):!1}ratioFromPointer(e,rect,rtl){if(this.orientation==="vertical"){const raw2=rect.height===0?0:(e.clientY-rect.top)/rect.height;return Math.min(1,Math.max(0,1-raw2))}const raw=rect.width===0?0:(e.clientX-rect.left)/rect.width;return Math.min(1,Math.max(0,rtl?1-raw:raw))}nearestHandle(target){const toMin=Math.abs(target-this.minValue),toMax=Math.abs(target-this.maxValue);return toMin<toMax?"min":toMax<toMin?"max":target<this.minValue?"min":"max"}beginDrag(pointerId,handle,captureTarget,rect,rtl){const dragWindow=captureTarget.ownerDocument.defaultView;if(!this.isConnected||!dragWindow)return;const firstDrag=this.drags.size===0;if(!firstDrag&&this.dragWindow!==dragWindow)return;captureTarget.setPointerCapture(pointerId);const drag={handle,changed:!1,captureTarget,rect,rtl};return this.drags.set(pointerId,drag),firstDrag&&(this.dragWindow=dragWindow,dragWindow.addEventListener("pointermove",this.onPointerMove),dragWindow.addEventListener("pointerup",this.onPointerUp),dragWindow.addEventListener("pointercancel",this.onPointerUp),dragWindow.addEventListener("lostpointercapture",this.onPointerUp)),this.syncInteractionStates(),this.requestUpdate(),drag}trackRect(){return this.renderRoot.querySelector('[part="track"]')?.getBoundingClientRect()??null}endDrag(pointerId,commit){const drag=this.drags.get(pointerId);drag!==void 0&&(this.drags.delete(pointerId),commit&&drag.changed&&this.emitChange(drag.handle),this.drags.size===0&&this.teardownDragWindow(),this.syncInteractionStates(),this.requestUpdate())}teardownDragWindow(){const dragWindow=this.dragWindow;this.dragWindow=void 0,dragWindow?.removeEventListener("pointermove",this.onPointerMove),dragWindow?.removeEventListener("pointerup",this.onPointerUp),dragWindow?.removeEventListener("pointercancel",this.onPointerUp),dragWindow?.removeEventListener("lostpointercapture",this.onPointerUp)}abortActiveDrags(){const activeDrags=[...this.drags.entries()];if(activeDrags.length!==0){this.drags.clear(),this.teardownDragWindow();for(const[pointerId,drag]of activeDrags)try{drag.captureTarget.hasPointerCapture(pointerId)&&drag.captureTarget.releasePointerCapture(pointerId)}catch{}this.syncInteractionStates()}}onHandleFocus(handle,event){this.focusedHandle!==handle&&(this.focusedHandle=handle,this.syncInteractionStates(),this.requestUpdate()),relayNativeEvent(this,event)}onHandleBlur(handle,event){this.focusedHandle===handle&&(this.focusedHandle=null,this.syncInteractionStates(),this.requestUpdate()),relayNativeEvent(this,event)}slotsHaveContent(names){return names.some(name=>this.renderRoot.querySelector(`slot[name="${name}"]`)?.assignedNodes({flatten:!0}).some(node=>node.nodeType===1||!!node.textContent?.trim())??!1)}formatValue(value){return getNumberFormat(this.effectiveLocale,{maximumFractionDigits:20}).format(value)}readoutText(){return this.range?`${this.formatValue(this.minValue)}–${this.formatValue(this.maxValue)}`:this.formatValue(this.valueAsNumber)}resolvedLabel(){const hostLabel=this.getAttribute("aria-label");return hostLabel!==null?hostLabel:this.label||this.localize("sliderLabel")}offsetStyle(percent){return this.orientation==="vertical"?`inset-block-end:${percent}%`:`inset-inline-start:${percent}%`}markerPercents(){if(!this.withMarkers)return[];const step=finiteRange(this.step,0,0);if(step<=0)return[];const{lo,hi}=this.domain(),span=hi-lo;if(!Number.isFinite(span)||span<=0)return[];const ratio=span/step,intervals=Math.floor(ratio+Number.EPSILON*Math.max(1,Math.abs(ratio))*4);return!Number.isFinite(intervals)||intervals<1||intervals>MAX_MARKER_INTERVALS?[]:Array.from({length:intervals+1},(_unused,index)=>{const value=lo+index*step;return finiteRatio(value,lo,hi)*100})}renderHandle(handle,describedBy,labelledBy){const value=this.valueForHandle(handle),bounds=this.reachableBounds(handle),percent=this.percentOf(value),numeric=this.formatValue(value),valueText=this.valueFormatter?this.valueFormatter(value,handle):this.tooltipFormatter?this.tooltipFormatter(value):numeric,partName={value:"thumb",min:"thumb thumb-min",max:"thumb thumb-max"}[handle],handleLabel={value:this.resolvedLabel(),min:this.localize("rangeStart"),max:this.localize("rangeEnd")}[handle],tooltipPart=this.focusedHandle===handle||Array.from(this.drags.values()).some(drag=>drag.handle===handle)?"tooltip tooltip__tooltip tooltip-visible":"tooltip tooltip__tooltip",showTooltip=this.withTooltip||this.tooltip!=="none",placement=this.tooltip==="none"?this.tooltipPlacement:this.tooltip,tooltipStyle=`${this.offsetStyle(percent)};--lr-slider-tooltip-distance:${finiteRange(this.tooltipDistance,8,0)}`;return html`
       <div
         part=${partName}
         role="slider"

package/dist/components/forms/swatch-picker/swatch-picker.class.js

@@ -1,4 +1,4 @@
-var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property}from"lit/decorators.js";import{repeat}from"lit/directives/repeat.js";import{styleMap}from"lit/directives/style-map.js";import{LyraElement}from"../../../internal/lyra-element.js";import{renderInertPresentation}from"../../../internal/inert-presentation.js";import{isRtl}from"../../../internal/rtl.js";import{gemstoneGlyph}from"../../../theme/gemstones.js";import{styles}from"./swatch-picker.styles.js";import{sanitizeCssColor}from"../../../internal/safe-css.js";import{literalSetConverter}from"../../../internal/converters.js";const SWATCH_PICKER_MODE=literalSetConverter(["swatch","gemstone"],"swatch");class LyraSwatchPicker extends LyraElement{constructor(){super(...arguments),this._items=Object.freeze([]),this.itemSnapshots=new WeakMap,this.value=null,this.size="m",this._mode="swatch",this.accessibleLabel="",this.disabled=!1,this.selectedIndex=-1,this.fallbackTabbableIndex=0,this.onKeyDown=e=>{if(this.disabled)return;const navigable=this.items;if(navigable.length===0)return;const currentIndex=this.keyboardOriginIndex(e),rtl=isRtl(this),forwardKey=rtl?"ArrowLeft":"ArrowRight",backwardKey=rtl?"ArrowRight":"ArrowLeft";let targetIndex;switch(e.key){case forwardKey:targetIndex=currentIndex<0?0:(currentIndex+1)%navigable.length;break;case backwardKey:targetIndex=currentIndex<0?navigable.length-1:(currentIndex-1+navigable.length)%navigable.length;break;case"Home":targetIndex=0;break;case"End":targetIndex=navigable.length-1;break;default:return}e.preventDefault();const target=navigable[targetIndex];this.select(target,targetIndex),this.focusSwatch(targetIndex)}}static{this.styles=[LyraElement.styles,styles]}static{this.properties={items:{attribute:!1,noAccessor:!0}}}get items(){return this._items}set items(next){const old=this._items,snapshots=[];if(Array.isArray(next))for(let index=0;index<Math.min(next.length,512);index+=1)try{const raw=next[index];if(raw===null||typeof raw!="object")continue;const cached=this.itemSnapshots.get(raw);if(cached){snapshots.push(cached);continue}const value=raw.value,color=raw.color,label=raw.label;if(typeof value!="string"||typeof color!="string"||typeof label!="string"||label.trim()==="")continue;const snapshot=Object.freeze({value,color,label,...raw.icon===void 0?{}:{icon:raw.icon},...raw.gemstone===void 0?{}:{gemstone:raw.gemstone}});this.itemSnapshots.set(raw,snapshot),snapshots.push(snapshot)}catch{}this._items=Object.freeze(snapshots),this.requestUpdate("items",old)}get mode(){return this._mode}set mode(next){const normalized=SWATCH_PICKER_MODE.normalizeReflected(this,"mode",next),old=this._mode;old!==normalized&&(this._mode=normalized,this.requestUpdate("mode",old))}resolveSelectedIndex(){if(this.value===null)return this.selectedOption=void 0,this.selectedIndex=-1,-1;if(this.selectedIndex>=0&&this.items[this.selectedIndex]===this.selectedOption&&this.selectedOption?.value===this.value)return this.selectedIndex;const identityIndex=this.selectedOption?this.items.indexOf(this.selectedOption):-1;return this.selectedIndex=identityIndex>=0&&this.items[identityIndex]?.value===this.value?identityIndex:this.items.findIndex(option=>option.value===this.value),this.selectedOption=this.selectedIndex>=0?this.items[this.selectedIndex]:void 0,this.selectedIndex}select(option,index){const previousIndex=this.resolveSelectedIndex();if(index===previousIndex&&option.value===this.value)return;const previousValue=this.value;this.selectedOption=option,this.selectedIndex=index,this.value=option.value,previousValue===option.value&&this.requestUpdate(),this.emit("lr-change",{value:option.value})}focusSwatch(index){this.renderRoot.querySelector(`[part="swatch"][data-index="${index}"]`)?.focus()}willUpdate(changed){if(super.willUpdate(changed),!changed.has("items"))return;const active=this.shadowRoot?.activeElement;if(active?.getAttribute("part")!=="swatch")return;const previousOptions=changed.get("items"),previousIndex=Number(active.dataset.index);if(!Number.isInteger(previousIndex)||previousIndex<0)return;const focusedOption=previousOptions?.[previousIndex],identityIndex=focusedOption===void 0?-1:this.items.indexOf(focusedOption),nextIndex=identityIndex>=0?identityIndex:Math.min(previousIndex,this.items.length-1);if(nextIndex<0){this.pendingFocusIndex=void 0,this.fallbackTabbableIndex=0;return}this.pendingFocusIndex=nextIndex,this.fallbackTabbableIndex=nextIndex}updated(changed){super.updated(changed),!(!changed.has("items")||this.pendingFocusIndex===void 0)&&this.scheduleAfterUpdate(()=>{const pendingIndex=this.pendingFocusIndex;this.pendingFocusIndex=void 0,!(pendingIndex===void 0||this.items.length===0)&&this.focusSwatch(Math.min(pendingIndex,this.items.length-1))},"restore-swatch-picker-focus")}tabbableSwatch(){const selectedIndex=this.resolveSelectedIndex(),tabbableIndex=selectedIndex!==-1?selectedIndex:Math.min(this.fallbackTabbableIndex,Math.max(0,this.items.length-1));return this.renderRoot?.querySelector(`[part="swatch"][data-index="${tabbableIndex}"]`)??null}click(){this.tabbableSwatch()?.click()}focus(options){this.tabbableSwatch()?.focus(options)}blur(){this.tabbableSwatch()?.blur()}keyboardOriginIndex(event){const fromEvent=event.composedPath().find(candidate2=>candidate2.nodeType===1&&candidate2.getAttribute?.("part")==="swatch"&&candidate2.getRootNode()===this.renderRoot),focused=this.shadowRoot?.activeElement,candidate=fromEvent??(focused?.getAttribute("part")==="swatch"?focused:void 0),index=Number(candidate?.dataset.index);return Number.isInteger(index)&&index>=0&&index<this.items.length?index:this.resolveSelectedIndex()}render(){const hostLabel=this.getAttribute("aria-label"),ariaLabel=hostLabel!==null?hostLabel:this.accessibleLabel||nothing,selectedIndex=this.resolveSelectedIndex(),tabbableIndex=selectedIndex!==-1?selectedIndex:Math.min(this.fallbackTabbableIndex,Math.max(0,this.items.length-1));return html`
+var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property}from"lit/decorators.js";import{repeat}from"lit/directives/repeat.js";import{styleMap}from"lit/directives/style-map.js";import{LyraElement}from"../../../internal/lyra-element.js";import{renderInertPresentation}from"../../../internal/inert-presentation.js";import{isRtl}from"../../../internal/rtl.js";import{gemstoneGlyph}from"../../../theme/gemstones.js";import{styles}from"./swatch-picker.styles.js";import{sanitizeCssColor}from"../../../internal/safe-css.js";import{literalSetConverter}from"../../../internal/converters.js";import{activeElementIn}from"../../../internal/active-element.js";const SWATCH_PICKER_MODE=literalSetConverter(["swatch","gemstone"],"swatch");class LyraSwatchPicker extends LyraElement{constructor(){super(...arguments),this._items=Object.freeze([]),this.itemSnapshots=new WeakMap,this.value=null,this.size="m",this._mode="swatch",this.accessibleLabel="",this.disabled=!1,this.selectedIndex=-1,this.fallbackTabbableIndex=0,this.onKeyDown=e=>{if(this.disabled)return;const navigable=this.items;if(navigable.length===0)return;const currentIndex=this.keyboardOriginIndex(e),rtl=isRtl(this),forwardKey=rtl?"ArrowLeft":"ArrowRight",backwardKey=rtl?"ArrowRight":"ArrowLeft";let targetIndex;switch(e.key){case forwardKey:targetIndex=currentIndex<0?0:(currentIndex+1)%navigable.length;break;case backwardKey:targetIndex=currentIndex<0?navigable.length-1:(currentIndex-1+navigable.length)%navigable.length;break;case"Home":targetIndex=0;break;case"End":targetIndex=navigable.length-1;break;default:return}e.preventDefault();const target=navigable[targetIndex];this.select(target,targetIndex),this.focusSwatch(targetIndex)}}static{this.styles=[LyraElement.styles,styles]}static{this.properties={items:{attribute:!1,noAccessor:!0}}}get items(){return this._items}set items(next){const old=this._items,snapshots=[];if(Array.isArray(next))for(let index=0;index<Math.min(next.length,512);index+=1)try{const raw=next[index];if(raw===null||typeof raw!="object")continue;const cached=this.itemSnapshots.get(raw);if(cached){snapshots.push(cached);continue}const value=raw.value,color=raw.color,label=raw.label;if(typeof value!="string"||typeof color!="string"||typeof label!="string"||label.trim()==="")continue;const snapshot=Object.freeze({value,color,label,...raw.icon===void 0?{}:{icon:raw.icon},...raw.gemstone===void 0?{}:{gemstone:raw.gemstone}});this.itemSnapshots.set(raw,snapshot),snapshots.push(snapshot)}catch{}this._items=Object.freeze(snapshots),this.requestUpdate("items",old)}get mode(){return this._mode}set mode(next){const normalized=SWATCH_PICKER_MODE.normalizeReflected(this,"mode",next),old=this._mode;old!==normalized&&(this._mode=normalized,this.requestUpdate("mode",old))}resolveSelectedIndex(){if(this.value===null)return this.selectedOption=void 0,this.selectedIndex=-1,-1;if(this.selectedIndex>=0&&this.items[this.selectedIndex]===this.selectedOption&&this.selectedOption?.value===this.value)return this.selectedIndex;const identityIndex=this.selectedOption?this.items.indexOf(this.selectedOption):-1;return this.selectedIndex=identityIndex>=0&&this.items[identityIndex]?.value===this.value?identityIndex:this.items.findIndex(option=>option.value===this.value),this.selectedOption=this.selectedIndex>=0?this.items[this.selectedIndex]:void 0,this.selectedIndex}select(option,index){const previousIndex=this.resolveSelectedIndex();if(index===previousIndex&&option.value===this.value)return;const previousValue=this.value;this.selectedOption=option,this.selectedIndex=index,this.value=option.value,previousValue===option.value&&this.requestUpdate(),this.emit("lr-change",{value:option.value})}focusSwatch(index){this.renderRoot.querySelector(`[part="swatch"][data-index="${index}"]`)?.focus()}willUpdate(changed){if(super.willUpdate(changed),!changed.has("items"))return;const active=activeElementIn(this.shadowRoot);if(typeof active?.getAttribute!="function"||active.getAttribute("part")!=="swatch")return;const previousOptions=changed.get("items"),previousIndex=Number(active.dataset.index);if(!Number.isInteger(previousIndex)||previousIndex<0)return;const focusedOption=previousOptions?.[previousIndex],identityIndex=focusedOption===void 0?-1:this.items.indexOf(focusedOption),nextIndex=identityIndex>=0?identityIndex:Math.min(previousIndex,this.items.length-1);if(nextIndex<0){this.pendingFocusIndex=void 0,this.fallbackTabbableIndex=0;return}this.pendingFocusIndex=nextIndex,this.fallbackTabbableIndex=nextIndex}updated(changed){super.updated(changed),!(!changed.has("items")||this.pendingFocusIndex===void 0)&&this.scheduleAfterUpdate(()=>{const pendingIndex=this.pendingFocusIndex;this.pendingFocusIndex=void 0,!(pendingIndex===void 0||this.items.length===0)&&this.focusSwatch(Math.min(pendingIndex,this.items.length-1))},"restore-swatch-picker-focus")}tabbableSwatch(){const selectedIndex=this.resolveSelectedIndex(),tabbableIndex=selectedIndex!==-1?selectedIndex:Math.min(this.fallbackTabbableIndex,Math.max(0,this.items.length-1));return this.renderRoot?.querySelector(`[part="swatch"][data-index="${tabbableIndex}"]`)??null}click(){this.tabbableSwatch()?.click()}focus(options){this.tabbableSwatch()?.focus(options)}blur(){this.tabbableSwatch()?.blur()}keyboardOriginIndex(event){const fromEvent=event.composedPath().find(candidate2=>candidate2.nodeType===1&&candidate2.getAttribute?.("part")==="swatch"&&candidate2.getRootNode()===this.renderRoot),focused=activeElementIn(this.shadowRoot),candidate=fromEvent??(typeof focused?.getAttribute=="function"&&focused.getAttribute("part")==="swatch"?focused:void 0),index=Number(candidate?.dataset.index);return Number.isInteger(index)&&index>=0&&index<this.items.length?index:this.resolveSelectedIndex()}render(){const hostLabel=this.getAttribute("aria-label"),ariaLabel=hostLabel!==null?hostLabel:this.accessibleLabel||nothing,selectedIndex=this.resolveSelectedIndex(),tabbableIndex=selectedIndex!==-1?selectedIndex:Math.min(this.fallbackTabbableIndex,Math.max(0,this.items.length-1));return html`
       <div
         part="base"
         role="radiogroup"

package/dist/components/forms/token-input/token-input.class.js

@@ -1,4 +1,4 @@
-var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{installFormControlLabelSupport}from"../../../internal/form-control-labels.js";installFormControlLabelSupport();import{activeElementIn}from"../../../internal/active-element.js";import{captureComposedFocusRepair,applyComposedFocusRepair}from"../../../internal/focus-navigation.js";import{AnchoredValidityController,VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{syncValidityStates}from"../../../internal/custom-states.js";import{nextId}from"../../../internal/a11y.js";import{closeIcon}from"../../../internal/icons.js";import{autocorrectConverter,normalizeAutocorrect,spellcheckConverter}from"../../../internal/converters.js";import{submitOnEnter}from"../../../internal/submit-on-enter.js";import{dispatchNativeEvent,dispatchNativeInputEvent,relayNativeEvent}from"../../../internal/native-event-relay.js";import{sizes}from"../../../internal/sizes.styles.js";import{styles}from"./token-input.styles.js";import{attachInternalsSafely,createStringArrayFormDataState,getFormOwner,installCustomErrorProperty,isBarredFromValidation,readStringArrayFormDataState,setFormOwner}from"../../../internal/form-associated.js";import{installInvalidEventAlias}from"../../../internal/invalid-event-alias.js";import{LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_removeWithContext,LYRA_DEFAULT_tokenInputEditWithContext,LYRA_DEFAULT_tokenInputRequired}from"../../../internal/default-strings.generated.js";const delimiterConverter={fromAttribute:value=>value===null?",":value===""||value==="none"?null:value};function normalizeStringArray(value){if(!Array.isArray(value))return Object.freeze([]);try{const normalized=[];for(const entry of value)typeof entry=="string"&&normalized.push(entry);return Object.freeze(normalized)}catch{return Object.freeze([])}}const stringArrayConverter={fromAttribute:value=>{if(value===null)return null;try{const parsed=JSON.parse(value);return normalizeStringArray(parsed)}catch{return[]}},toAttribute:value=>value==null?null:JSON.stringify(value)};class LyraTokenInput extends LyraElement{static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired,removeWithContext:LYRA_DEFAULT_removeWithContext,tokenInputEditWithContext:LYRA_DEFAULT_tokenInputEditWithContext,tokenInputRequired:LYRA_DEFAULT_tokenInputRequired}}static{this.formAssociated=!0}static{this.styles=[LyraElement.styles,sizes,styles]}static{this.properties={customError:{attribute:"custom-error",reflect:!0,noAccessor:!0},name:{reflect:!0,noAccessor:!0},required:{type:Boolean,reflect:!0,noAccessor:!0},disabled:{type:Boolean,reflect:!0,noAccessor:!0},defaultValue:{attribute:"value",reflect:!0,useDefault:!0,converter:stringArrayConverter,noAccessor:!0}}}get autocorrect(){return this.autocorrectValue}set autocorrect(next){this.autocorrectValue=normalizeAutocorrect(next),this.requestUpdate()}get editable(){return this._editable}set editable(next){const old=this._editable;this._editable=!!next,this._editable||this.discardTransientState(!1),this.requestUpdate("editable",old)}get value(){return this._value}set value(next){const old=this._value;this.settingDefaultValue||(this._valueDirty=!0);const normalized=normalizeStringArray(next);this.captureTokenFocusRepair(normalized),this.editingIndex>=0&&normalized!==old&&(this.editingIndex=-1,this.editDraft="",this.focusEditorPending=!1),this._value=normalized,this.requestUpdate("value",old),this.internals&&this.syncValidity()}get defaultValue(){return this._defaultValue}set defaultValue(next){if(this.reflectingDefaultValue)return;const old=this._defaultValue;this._defaultValue=normalizeStringArray(next),this.reflectingDefaultValue=!0;try{next==null?this.removeAttribute("value"):this.setAttribute("value",JSON.stringify(this._defaultValue))}finally{this.reflectingDefaultValue=!1}this._valueDirty||this.restoreLiveValueFromDefault(),this.requestUpdate("defaultValue",old)}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.syncValidity(),this.requestUpdate("name",old)}get required(){return this._required}set required(next){const old=this._required;this._required=!!next,this.toggleAttribute("required",this._required),this.syncValidity(),this.requestUpdate("required",old)}get disabled(){return this._disabled}set disabled(next){const old=this._disabled,wasEffectivelyDisabled=this.effectiveDisabled;this._disabled=!!next,!wasEffectivelyDisabled&&this.effectiveDisabled&&this.retireDisabledInteraction(),this.toggleAttribute("disabled",this._disabled),this.syncValidity(),this.requestUpdate("disabled",old)}constructor(){super(),this.label="",this.hint="",this.errorText="",this.placeholder="",this.spellcheck=!0,this.autocapitalize="",this.autocorrectValue=!0,this.accessibleLabel="",this.size="m",this.pill=!1,this.allowDuplicates=!1,this._editable=!1,this.delimiter=",",this.draft="",this.touched=!1,this.editingIndex=-1,this.editDraft="",this.rovingIndex=0,this.focusEditorPending=!1,this.focusTokenPending=-1,this.editorBlurRelayed=!1,this.hasLabelSlot=!1,this.hasHintSlot=!1,this.hasErrorSlot=!1,this.hasStartSlot=!1,this.hasEndSlot=!1,this.labelId=nextId("token-input-label"),this.hintId=nextId("token-input-hint"),this.errorId=nextId("token-input-error"),this._value=Object.freeze([]),this._defaultValue=Object.freeze([]),this._valueDirty=!1,this.settingDefaultValue=!1,this.reflectingDefaultValue=!1,this._fieldsetDisabled=!1,this._name="",this._required=!1,this._disabled=!1,this.onEditInput=event=>{event.stopPropagation(),!this.liveDisabled&&(this.editDraft=event.target.value)},this.onEditFocus=event=>{if(this.liveDisabled){event.stopPropagation();return}this.editorBlurRelayed=!1,relayNativeEvent(this,event)},this.onEditKeyDown=event=>{event.key==="Enter"?(event.preventDefault(),this.commitEdit(!0)):event.key==="Escape"&&(event.preventDefault(),event.stopPropagation(),this.cancelEdit())},this.onEditBlur=event=>{if(this.editorBlurRelayed){event.stopPropagation();return}this.editorBlurRelayed=!0,event.stopPropagation(),queueMicrotask(()=>{!this.isConnected||!this.editable||this.liveDisabled?this.discardTransientState(!1):this.commitEdit(!1),relayNativeEvent(this,event)})},this.onInput=event=>{event.stopPropagation(),!this.liveDisabled&&(this.draft=event.target.value)},this.onKeyDown=event=>{this.liveDisabled||(event.key==="Enter"||this.delimiter!==null&&event.key===this.delimiter?this.draft.trim()?(event.preventDefault(),this.addDraft()):event.key==="Enter"&&submitOnEnter(this,event):event.key==="Tab"?this.draft.trim()&&this.addDraft():event.key==="Backspace"&&!this.draft&&this.value.length&&this.editingIndex<0&&this.removeToken(this.value.length-1))},this.onBlur=event=>{this.liveDisabled||(this.draft.trim()&&this.addDraft(),this.touched=!0),this.syncValidity(),relayNativeEvent(this,event)},this.onFocus=event=>{if(this.liveDisabled){event.stopPropagation();return}relayNativeEvent(this,event)},this.onLabelSlotChange=e=>{this.hasLabelSlot=e.target.assignedElements({flatten:!0}).length>0},this.onHintSlotChange=e=>{this.hasHintSlot=e.target.assignedElements({flatten:!0}).length>0},this.onErrorSlotChange=e=>{this.hasErrorSlot=e.target.assignedElements({flatten:!0}).length>0},this.onStartSlotChange=e=>{this.hasStartSlot=e.target.assignedElements({flatten:!0}).length>0},this.onEndSlotChange=e=>{this.hasEndSlot=e.target.assignedElements({flatten:!0}).length>0},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))}connectedCallback(){super.connectedCallback(),this.syncValidity()}disconnectedCallback(){this.tokenFocusRepairPending=void 0,this.discardTransientState(!0),super.disconnectedCallback()}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}get effectiveDisabled(){return this.disabled||this._fieldsetDisabled}formDisabledCallback(disabled){const wasEffectivelyDisabled=this.effectiveDisabled;this._fieldsetDisabled=disabled,!wasEffectivelyDisabled&&this.effectiveDisabled&&this.retireDisabledInteraction(),this.syncValidity(),this.requestUpdate()}[VALIDITY_ANCHOR](){return this.inputEl??this.renderRoot?.querySelector('[part="input-wrapper"]')??null}checkValidity(){return this.internals.checkValidity()}reportValidity(){return this.touched=!0,this.syncValidity(),this.internals.reportValidity()}setCustomValidity(message){this.validityController.setCustomValidity(message??""),this.syncValidity()}get liveDisabled(){return this.effectiveDisabled||this.matches(":disabled")}focus(options){this.liveDisabled||this.inputEl?.focus(options)}blur(){const active=this.shadowRoot?.activeElement;active&&typeof active.blur=="function"&&active.blur()}click(){this.liveDisabled||this.inputEl?.focus()}select(){this.inputEl?.select()}get selectionStart(){return this.inputEl?.selectionStart??null}set selectionStart(value){this.inputEl&&(this.inputEl.selectionStart=value??0)}get selectionEnd(){return this.inputEl?.selectionEnd??null}set selectionEnd(value){this.inputEl&&(this.inputEl.selectionEnd=value??0)}get selectionDirection(){return this.inputEl?.selectionDirection??null}set selectionDirection(value){this.inputEl&&(this.inputEl.selectionDirection=value??"none")}setSelectionRange(selectionStart,selectionEnd,selectionDirection="none"){this.inputEl?.setSelectionRange(selectionStart,selectionEnd,selectionDirection??"none")}setRangeText(replacement,start,end,selectMode="preserve"){const input=this.inputEl;input&&(start===void 0||end===void 0?input.setRangeText(replacement):input.setRangeText(replacement,start,end,selectMode),this.draft=input.value)}willUpdate(changed){super.willUpdate(changed),this.hasUpdated||(this.hasLabelSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="label"),this.hasHintSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="hint"),this.hasErrorSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="error"),this.hasStartSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="start"),this.hasEndSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="end"))}get barredFromValidation(){return isBarredFromValidation(this,this.internals)}syncValidity(){const barred=this.barredFromValidation,missing=!barred&&this.required&&this.value.length===0;this.validityController.setValidity(missing?{valueMissing:!0}:{},missing?this.localize("tokenInputRequired"):""),this.toggleAttribute("data-invalid",!barred&&this.touched&&!this.internals.validity.valid),syncValidityStates(this.internals,{required:this.required,hasInteracted:this.touched,barred});const data=new FormData;this.name&&this.value.forEach(token=>data.append(this.name,token)),this.internals.setFormValue(this.name?data:null,createStringArrayFormDataState(this.name,this.value))}updateValue(next){this.value=next,this.syncValidity(),dispatchNativeInputEvent(this),this.emit("lr-input",Object.freeze({value:Object.freeze([...this.value])})),dispatchNativeEvent(this,"change"),this.emit("lr-change",Object.freeze({value:Object.freeze([...this.value])}))}addDraft(){if(this.liveDisabled)return;const candidates=(this.delimiter?this.draft.split(this.delimiter):[this.draft]).map(token=>token.trim()).filter(Boolean),next=[...this.value],seen=this.allowDuplicates?null:new Set(next),added=[];for(const token of candidates)seen?.has(token)||(seen?.add(token),next.push(token),added.push(token));if(added.length===0){this.draft="";return}this.emit("lr-add",Object.freeze({value:added[added.length-1],values:Object.freeze([...added])}),{cancelable:!0}).defaultPrevented||(this.updateValue(next),this.draft="")}discardTransientState(clearDraft){this.editingIndex=-1,this.editDraft="",this.focusEditorPending=!1,this.focusTokenPending=-1,clearDraft&&(this.draft="",this.inputEl&&(this.inputEl.value=""))}retireDisabledInteraction(){this.tokenFocusRepairPending=void 0,this.discardTransientState(!0);const active=this.shadowRoot?.activeElement;active&&typeof active.blur=="function"&&active.blur()}captureTokenFocusRepair(next){this.tokenFocusRepairPending=void 0;const tokens=[...this.renderRoot?.querySelectorAll('[part~="token"]')??[]];if(next.length>=tokens.length)return;const active=activeElementIn(this.shadowRoot),token=active?.closest('[part~="token"]');if(!active||!token)return;const index=tokens.indexOf(token);if(index<0)return;const repair=captureComposedFocusRepair(this,active);if(!repair)return;const targetIndex=Math.min(index,Math.max(0,next.length-1));this.rovingIndex=targetIndex,this.tokenFocusRepairPending={index:targetIndex,surface:active.matches('[part~="remove"]')?"remove":"label",repair}}removeToken(index){if(this.liveDisabled)return;const removed=this.value[index];removed===void 0||this.emit("lr-remove",{value:removed,index},{cancelable:!0}).defaultPrevented||(this.editingIndex>=0&&(this.editingIndex=-1,this.editDraft=""),this.updateValue(this.value.filter((_token,i)=>i!==index)))}get activeTokenIndex(){return this.value.length?Math.min(Math.max(this.rovingIndex,0),this.value.length-1):-1}startEdit(index){this.liveDisabled||!this.editable||index<0||index>=this.value.length||(this.editingIndex=index,this.editDraft=this.value[index],this.rovingIndex=index,this.editorBlurRelayed=!1,this.focusEditorPending=!0)}cancelEdit(){this.editingIndex<0||(this.focusTokenPending=this.editingIndex,this.editingIndex=-1,this.editDraft="")}commitEdit(restoreFocus){if(this.liveDisabled){this.discardTransientState(!1);return}const index=this.editingIndex;if(index<0)return;const previousValue=this.value[index],next=this.editDraft.trim();if(previousValue===void 0||!next||next===previousValue||!this.allowDuplicates&&this.value.some((token,i)=>i!==index&&token===next)){restoreFocus&&(this.focusTokenPending=index),this.editingIndex=-1,this.editDraft="";return}this.emit("lr-token-edit",{value:next,previousValue,index},{cancelable:!0}).defaultPrevented||(restoreFocus&&(this.focusTokenPending=index),this.editingIndex=-1,this.editDraft="",this.updateValue(this.value.map((token,i)=>i===index?next:token)))}moveRovingFocus(index){if(!this.value.length)return;const clamped=Math.min(Math.max(index,0),this.value.length-1);this.rovingIndex=clamped,this.focusTokenPending=clamped}onTokenKeyDown(event,index){if(this.liveDisabled)return;const rtl=this.effectiveDirection==="rtl",forward=rtl?"ArrowLeft":"ArrowRight",backward=rtl?"ArrowRight":"ArrowLeft";event.key==="Enter"||event.key===" "||event.key==="F2"?(event.preventDefault(),this.startEdit(index)):event.key===forward?(event.preventDefault(),this.moveRovingFocus(index+1)):event.key===backward?(event.preventDefault(),this.moveRovingFocus(index-1)):event.key==="Home"?(event.preventDefault(),this.moveRovingFocus(0)):event.key==="End"&&(event.preventDefault(),this.moveRovingFocus(this.value.length-1))}stopInternalChange(event){event.stopPropagation()}formResetCallback(){this.restoreLiveValueFromDefault(),this.discardTransientState(!0),this.rovingIndex=0,this.touched=!1,this.syncValidity()}restoreLiveValueFromDefault(){this.settingDefaultValue=!0;try{this.value=[...this._defaultValue]}finally{this.settingDefaultValue=!1}this._valueDirty=!1}formStateRestoreCallback(state2,_mode){this.value=readStringArrayFormDataState(state2),this.discardTransientState(!0),this.rovingIndex=0,this.touched=!1,this.syncValidity()}updated(changed){if(super.updated(changed),this.focusEditorPending){this.focusEditorPending=!1;const editor=this.renderRoot?.querySelector('[part="token-editor"]');editor?.focus(),editor?.select()}if(this.focusTokenPending>=0){const index=this.focusTokenPending;this.focusTokenPending=-1;const label=this.renderRoot?.querySelectorAll('[part="token-label"]')?.[index];label?.focus(),label?.scrollIntoView({block:"nearest",inline:"nearest"})}const pending=this.tokenFocusRepairPending;if(this.tokenFocusRepairPending=void 0,pending){const token=[...this.renderRoot.querySelectorAll('[part~="token"]')][pending.index],target=(pending.surface==="remove"?token?.querySelector('[part~="remove"]'):token?.querySelector('[part~="token-label"]'))??token?.querySelector('[part~="remove"]')??this.inputEl??null;applyComposedFocusRepair(pending.repair,target)&&target?.scrollIntoView({block:"nearest",inline:"nearest"})}}renderRemoveButton(token,index){return html`<button
+var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{installFormControlLabelSupport}from"../../../internal/form-control-labels.js";installFormControlLabelSupport();import{activeElementIn}from"../../../internal/active-element.js";import{captureComposedFocusRepair,applyComposedFocusRepair}from"../../../internal/focus-navigation.js";import{AnchoredValidityController,VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{syncValidityStates}from"../../../internal/custom-states.js";import{nextId}from"../../../internal/a11y.js";import{closeIcon}from"../../../internal/icons.js";import{autocorrectConverter,normalizeAutocorrect,spellcheckConverter}from"../../../internal/converters.js";import{submitOnEnter}from"../../../internal/submit-on-enter.js";import{dispatchNativeEvent,dispatchNativeInputEvent,relayNativeEvent}from"../../../internal/native-event-relay.js";import{sizes}from"../../../internal/sizes.styles.js";import{styles}from"./token-input.styles.js";import{attachInternalsSafely,createStringArrayFormDataState,getFormOwner,installCustomErrorProperty,isBarredFromValidation,readStringArrayFormDataState,setFormOwner}from"../../../internal/form-associated.js";import{installInvalidEventAlias}from"../../../internal/invalid-event-alias.js";import{LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_removeWithContext,LYRA_DEFAULT_tokenInputEditWithContext,LYRA_DEFAULT_tokenInputRequired}from"../../../internal/default-strings.generated.js";const delimiterConverter={fromAttribute:value=>value===null?",":value===""||value==="none"?null:value};function normalizeStringArray(value){if(!Array.isArray(value))return Object.freeze([]);try{const normalized=[];for(const entry of value)typeof entry=="string"&&normalized.push(entry);return Object.freeze(normalized)}catch{return Object.freeze([])}}const stringArrayConverter={fromAttribute:value=>{if(value===null)return null;try{const parsed=JSON.parse(value);return normalizeStringArray(parsed)}catch{return[]}},toAttribute:value=>value==null?null:JSON.stringify(value)};class LyraTokenInput extends LyraElement{static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired,removeWithContext:LYRA_DEFAULT_removeWithContext,tokenInputEditWithContext:LYRA_DEFAULT_tokenInputEditWithContext,tokenInputRequired:LYRA_DEFAULT_tokenInputRequired}}static{this.formAssociated=!0}static{this.styles=[LyraElement.styles,sizes,styles]}static{this.properties={customError:{attribute:"custom-error",reflect:!0,noAccessor:!0},name:{reflect:!0,noAccessor:!0},required:{type:Boolean,reflect:!0,noAccessor:!0},disabled:{type:Boolean,reflect:!0,noAccessor:!0},defaultValue:{attribute:"value",reflect:!0,useDefault:!0,converter:stringArrayConverter,noAccessor:!0}}}get autocorrect(){return this.autocorrectValue}set autocorrect(next){this.autocorrectValue=normalizeAutocorrect(next),this.requestUpdate()}get editable(){return this._editable}set editable(next){const old=this._editable;this._editable=!!next,this._editable||this.discardTransientState(!1),this.requestUpdate("editable",old)}get value(){return this._value}set value(next){const old=this._value;this.settingDefaultValue||(this._valueDirty=!0);const normalized=normalizeStringArray(next);this.captureTokenFocusRepair(normalized),this.editingIndex>=0&&normalized!==old&&(this.editingIndex=-1,this.editDraft="",this.focusEditorPending=!1),this._value=normalized,this.requestUpdate("value",old),this.internals&&this.syncValidity()}get defaultValue(){return this._defaultValue}set defaultValue(next){if(this.reflectingDefaultValue)return;const old=this._defaultValue;this._defaultValue=normalizeStringArray(next),this.reflectingDefaultValue=!0;try{next==null?this.removeAttribute("value"):this.setAttribute("value",JSON.stringify(this._defaultValue))}finally{this.reflectingDefaultValue=!1}this._valueDirty||this.restoreLiveValueFromDefault(),this.requestUpdate("defaultValue",old)}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.syncValidity(),this.requestUpdate("name",old)}get required(){return this._required}set required(next){const old=this._required;this._required=!!next,this.toggleAttribute("required",this._required),this.syncValidity(),this.requestUpdate("required",old)}get disabled(){return this._disabled}set disabled(next){const old=this._disabled,wasEffectivelyDisabled=this.effectiveDisabled;this._disabled=!!next,!wasEffectivelyDisabled&&this.effectiveDisabled&&this.retireDisabledInteraction(),this.toggleAttribute("disabled",this._disabled),this.syncValidity(),this.requestUpdate("disabled",old)}constructor(){super(),this.label="",this.hint="",this.errorText="",this.placeholder="",this.spellcheck=!0,this.autocapitalize="",this.autocorrectValue=!0,this.accessibleLabel="",this.size="m",this.pill=!1,this.allowDuplicates=!1,this._editable=!1,this.delimiter=",",this.draft="",this.touched=!1,this.editingIndex=-1,this.editDraft="",this.rovingIndex=0,this.focusEditorPending=!1,this.focusTokenPending=-1,this.editorBlurRelayed=!1,this.hasLabelSlot=!1,this.hasHintSlot=!1,this.hasErrorSlot=!1,this.hasStartSlot=!1,this.hasEndSlot=!1,this.labelId=nextId("token-input-label"),this.hintId=nextId("token-input-hint"),this.errorId=nextId("token-input-error"),this._value=Object.freeze([]),this._defaultValue=Object.freeze([]),this._valueDirty=!1,this.settingDefaultValue=!1,this.reflectingDefaultValue=!1,this._fieldsetDisabled=!1,this._name="",this._required=!1,this._disabled=!1,this.onEditInput=event=>{event.stopPropagation(),!this.liveDisabled&&(this.editDraft=event.target.value)},this.onEditFocus=event=>{if(this.liveDisabled){event.stopPropagation();return}this.editorBlurRelayed=!1,relayNativeEvent(this,event)},this.onEditKeyDown=event=>{event.key==="Enter"?(event.preventDefault(),this.commitEdit(!0)):event.key==="Escape"&&(event.preventDefault(),event.stopPropagation(),this.cancelEdit())},this.onEditBlur=event=>{if(this.editorBlurRelayed){event.stopPropagation();return}this.editorBlurRelayed=!0,event.stopPropagation(),queueMicrotask(()=>{!this.isConnected||!this.editable||this.liveDisabled?this.discardTransientState(!1):this.commitEdit(!1),relayNativeEvent(this,event)})},this.onInput=event=>{event.stopPropagation(),!this.liveDisabled&&(this.draft=event.target.value)},this.onKeyDown=event=>{this.liveDisabled||(event.key==="Enter"||this.delimiter!==null&&event.key===this.delimiter?this.draft.trim()?(event.preventDefault(),this.addDraft()):event.key==="Enter"&&submitOnEnter(this,event):event.key==="Tab"?this.draft.trim()&&this.addDraft():event.key==="Backspace"&&!this.draft&&this.value.length&&this.editingIndex<0&&this.removeToken(this.value.length-1))},this.onBlur=event=>{this.liveDisabled||(this.draft.trim()&&this.addDraft(),this.touched=!0),this.syncValidity(),relayNativeEvent(this,event)},this.onFocus=event=>{if(this.liveDisabled){event.stopPropagation();return}relayNativeEvent(this,event)},this.onLabelSlotChange=e=>{this.hasLabelSlot=e.target.assignedElements({flatten:!0}).length>0},this.onHintSlotChange=e=>{this.hasHintSlot=e.target.assignedElements({flatten:!0}).length>0},this.onErrorSlotChange=e=>{this.hasErrorSlot=e.target.assignedElements({flatten:!0}).length>0},this.onStartSlotChange=e=>{this.hasStartSlot=e.target.assignedElements({flatten:!0}).length>0},this.onEndSlotChange=e=>{this.hasEndSlot=e.target.assignedElements({flatten:!0}).length>0},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))}connectedCallback(){super.connectedCallback(),this.syncValidity()}disconnectedCallback(){this.tokenFocusRepairPending=void 0,this.discardTransientState(!0),super.disconnectedCallback()}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}get effectiveDisabled(){return this.disabled||this._fieldsetDisabled}formDisabledCallback(disabled){const wasEffectivelyDisabled=this.effectiveDisabled;this._fieldsetDisabled=disabled,!wasEffectivelyDisabled&&this.effectiveDisabled&&this.retireDisabledInteraction(),this.syncValidity(),this.requestUpdate()}[VALIDITY_ANCHOR](){return this.inputEl??this.renderRoot?.querySelector('[part="input-wrapper"]')??null}checkValidity(){return this.internals.checkValidity()}reportValidity(){return this.touched=!0,this.syncValidity(),this.internals.reportValidity()}setCustomValidity(message){this.validityController.setCustomValidity(message??""),this.syncValidity()}get liveDisabled(){return this.effectiveDisabled||this.matches(":disabled")}focus(options){this.liveDisabled||this.inputEl?.focus(options)}blur(){const active=activeElementIn(this.shadowRoot);active&&typeof active.blur=="function"&&active.blur()}click(){this.liveDisabled||this.inputEl?.focus()}select(){this.inputEl?.select()}get selectionStart(){return this.inputEl?.selectionStart??null}set selectionStart(value){this.inputEl&&(this.inputEl.selectionStart=value??0)}get selectionEnd(){return this.inputEl?.selectionEnd??null}set selectionEnd(value){this.inputEl&&(this.inputEl.selectionEnd=value??0)}get selectionDirection(){return this.inputEl?.selectionDirection??null}set selectionDirection(value){this.inputEl&&(this.inputEl.selectionDirection=value??"none")}setSelectionRange(selectionStart,selectionEnd,selectionDirection="none"){this.inputEl?.setSelectionRange(selectionStart,selectionEnd,selectionDirection??"none")}setRangeText(replacement,start,end,selectMode="preserve"){const input=this.inputEl;input&&(start===void 0||end===void 0?input.setRangeText(replacement):input.setRangeText(replacement,start,end,selectMode),this.draft=input.value)}willUpdate(changed){super.willUpdate(changed),this.hasUpdated||(this.hasLabelSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="label"),this.hasHintSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="hint"),this.hasErrorSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="error"),this.hasStartSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="start"),this.hasEndSlot=Array.from(this.children??[]).some(el=>el.getAttribute("slot")==="end"))}get barredFromValidation(){return isBarredFromValidation(this,this.internals)}syncValidity(){const barred=this.barredFromValidation,missing=!barred&&this.required&&this.value.length===0;this.validityController.setValidity(missing?{valueMissing:!0}:{},missing?this.localize("tokenInputRequired"):""),this.toggleAttribute("data-invalid",!barred&&this.touched&&!this.internals.validity.valid),syncValidityStates(this.internals,{required:this.required,hasInteracted:this.touched,barred});const data=new FormData;this.name&&this.value.forEach(token=>data.append(this.name,token)),this.internals.setFormValue(this.name?data:null,createStringArrayFormDataState(this.name,this.value))}updateValue(next){this.value=next,this.syncValidity(),dispatchNativeInputEvent(this),this.emit("lr-input",Object.freeze({value:Object.freeze([...this.value])})),dispatchNativeEvent(this,"change"),this.emit("lr-change",Object.freeze({value:Object.freeze([...this.value])}))}addDraft(){if(this.liveDisabled)return;const candidates=(this.delimiter?this.draft.split(this.delimiter):[this.draft]).map(token=>token.trim()).filter(Boolean),next=[...this.value],seen=this.allowDuplicates?null:new Set(next),added=[];for(const token of candidates)seen?.has(token)||(seen?.add(token),next.push(token),added.push(token));if(added.length===0){this.draft="";return}this.emit("lr-add",Object.freeze({value:added[added.length-1],values:Object.freeze([...added])}),{cancelable:!0}).defaultPrevented||(this.updateValue(next),this.draft="")}discardTransientState(clearDraft){this.editingIndex=-1,this.editDraft="",this.focusEditorPending=!1,this.focusTokenPending=-1,clearDraft&&(this.draft="",this.inputEl&&(this.inputEl.value=""))}retireDisabledInteraction(){this.tokenFocusRepairPending=void 0,this.discardTransientState(!0);const active=activeElementIn(this.shadowRoot);active&&typeof active.blur=="function"&&active.blur()}captureTokenFocusRepair(next){this.tokenFocusRepairPending=void 0;const tokens=[...this.renderRoot?.querySelectorAll('[part~="token"]')??[]];if(next.length>=tokens.length)return;const active=activeElementIn(this.shadowRoot),token=typeof active?.closest=="function"?active.closest('[part~="token"]'):null;if(!active||!token)return;const index=tokens.indexOf(token);if(index<0)return;const repair=captureComposedFocusRepair(this,active);if(!repair)return;const targetIndex=Math.min(index,Math.max(0,next.length-1));this.rovingIndex=targetIndex,this.tokenFocusRepairPending={index:targetIndex,surface:active.matches('[part~="remove"]')?"remove":"label",repair}}removeToken(index){if(this.liveDisabled)return;const removed=this.value[index];removed===void 0||this.emit("lr-remove",{value:removed,index},{cancelable:!0}).defaultPrevented||(this.editingIndex>=0&&(this.editingIndex=-1,this.editDraft=""),this.updateValue(this.value.filter((_token,i)=>i!==index)))}get activeTokenIndex(){return this.value.length?Math.min(Math.max(this.rovingIndex,0),this.value.length-1):-1}startEdit(index){this.liveDisabled||!this.editable||index<0||index>=this.value.length||(this.editingIndex=index,this.editDraft=this.value[index],this.rovingIndex=index,this.editorBlurRelayed=!1,this.focusEditorPending=!0)}cancelEdit(){this.editingIndex<0||(this.focusTokenPending=this.editingIndex,this.editingIndex=-1,this.editDraft="")}commitEdit(restoreFocus){if(this.liveDisabled){this.discardTransientState(!1);return}const index=this.editingIndex;if(index<0)return;const previousValue=this.value[index],next=this.editDraft.trim();if(previousValue===void 0||!next||next===previousValue||!this.allowDuplicates&&this.value.some((token,i)=>i!==index&&token===next)){restoreFocus&&(this.focusTokenPending=index),this.editingIndex=-1,this.editDraft="";return}this.emit("lr-token-edit",{value:next,previousValue,index},{cancelable:!0}).defaultPrevented||(restoreFocus&&(this.focusTokenPending=index),this.editingIndex=-1,this.editDraft="",this.updateValue(this.value.map((token,i)=>i===index?next:token)))}moveRovingFocus(index){if(!this.value.length)return;const clamped=Math.min(Math.max(index,0),this.value.length-1);this.rovingIndex=clamped,this.focusTokenPending=clamped}onTokenKeyDown(event,index){if(this.liveDisabled)return;const rtl=this.effectiveDirection==="rtl",forward=rtl?"ArrowLeft":"ArrowRight",backward=rtl?"ArrowRight":"ArrowLeft";event.key==="Enter"||event.key===" "||event.key==="F2"?(event.preventDefault(),this.startEdit(index)):event.key===forward?(event.preventDefault(),this.moveRovingFocus(index+1)):event.key===backward?(event.preventDefault(),this.moveRovingFocus(index-1)):event.key==="Home"?(event.preventDefault(),this.moveRovingFocus(0)):event.key==="End"&&(event.preventDefault(),this.moveRovingFocus(this.value.length-1))}stopInternalChange(event){event.stopPropagation()}formResetCallback(){this.restoreLiveValueFromDefault(),this.discardTransientState(!0),this.rovingIndex=0,this.touched=!1,this.syncValidity()}restoreLiveValueFromDefault(){this.settingDefaultValue=!0;try{this.value=[...this._defaultValue]}finally{this.settingDefaultValue=!1}this._valueDirty=!1}formStateRestoreCallback(state2,_mode){this.value=readStringArrayFormDataState(state2),this.discardTransientState(!0),this.rovingIndex=0,this.touched=!1,this.syncValidity()}updated(changed){if(super.updated(changed),this.focusEditorPending){this.focusEditorPending=!1;const editor=this.renderRoot?.querySelector('[part="token-editor"]');editor?.focus(),editor?.select()}if(this.focusTokenPending>=0){const index=this.focusTokenPending;this.focusTokenPending=-1;const label=this.renderRoot?.querySelectorAll('[part="token-label"]')?.[index];label?.focus(),label?.scrollIntoView({block:"nearest",inline:"nearest"})}const pending=this.tokenFocusRepairPending;if(this.tokenFocusRepairPending=void 0,pending){const token=[...this.renderRoot.querySelectorAll('[part~="token"]')][pending.index],target=(pending.surface==="remove"?token?.querySelector('[part~="remove"]'):token?.querySelector('[part~="token-label"]'))??token?.querySelector('[part~="remove"]')??this.inputEl??null;applyComposedFocusRepair(pending.repair,target)&&target?.scrollIntoView({block:"nearest",inline:"nearest"})}}renderRemoveButton(token,index){return html`<button
       part="remove"
       type="button"
       aria-label=${this.localize("removeWithContext",void 0,{label:token})}

package/dist/components/forms/token-input/token-input.styles.js

@@ -1 +1 @@
-import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/form-control.styles.js";const styles=css` :host { display: block; min-inline-size: 0; max-inline-size: 100%; box-sizing: border-box; --_lr-token-input-min-input-inline-size: var(--lr-size-4rem); --_lr-token-input-padding: var(--lr-form-control-padding-block) var(--lr-space-xs); --_lr-token-input-font-size: var(--lr-font-size-md-sm); --_lr-token-input-token-padding: var(--lr-space-2xs) var(--lr-space-xs); --_lr-token-input-gap: var(--lr-space-xs); --_lr-token-input-token-gap: var(--lr-space-2xs); --_lr-token-input-radius: var(--lr-radius); --_lr-token-input-control-min-height: var(--lr-form-control-height); } :host([pill]) { --_lr-token-input-radius: var(--lr-radius-pill); } :host([size="2xs"]) { --_lr-token-input-padding: var(--lr-form-control-padding-block) var(--lr-size-0-0625rem); --_lr-token-input-font-size: var(--lr-font-size-2xs); --_lr-token-input-token-padding: 0 var(--lr-space-2xs); } :host([size="xs"]) { --_lr-token-input-padding: var(--lr-form-control-padding-block) var(--lr-size-0-125rem); --_lr-token-input-font-size: var(--lr-font-size-xs); --_lr-token-input-token-padding: var(--lr-size-1px) var(--lr-space-2xs); } :host([size="s"]), :host([size="small"]) { --_lr-token-input-padding: var(--lr-form-control-padding-block) var(--lr-space-xs); --_lr-token-input-font-size: var(--lr-font-size-sm); --_lr-token-input-token-padding: var(--lr-space-2xs) var(--lr-space-xs); } :host([size="l"]), :host([size="large"]) { --_lr-token-input-padding: var(--lr-form-control-padding-block) var(--lr-space-m); --_lr-token-input-font-size: var(--lr-font-size-lg); --_lr-token-input-token-padding: var(--lr-space-xs) var(--lr-space-s); } :host([size="xl"]) { --_lr-token-input-padding: var(--lr-form-control-padding-block) var(--lr-space-l); --_lr-token-input-font-size: var(--lr-font-size-xl); --_lr-token-input-token-padding: var(--lr-space-s) var(--lr-space-m); } [part="form-control"] { display: grid; min-inline-size: 0; max-inline-size: 100%; gap: var(--lr-token-input-gap, var(--_lr-token-input-gap)); } [part="form-control-label"] { color: var(--lr-color-text); font-weight: var(--lr-font-weight-semibold); } :host([required]) [part="form-control-label"] > span[aria-hidden="true"] { display: none; } ${formControlRequiredMarker} [part='input-wrapper'] { display: flex; flex-wrap: wrap; min-inline-size: 0; max-inline-size: 100%; overflow-x: hidden; overflow-y: auto; align-items: center; gap: var(--lr-token-input-gap, var(--_lr-token-input-gap)); min-block-size: var( --lr-token-input-control-height, var( --lr-token-input-control-min-height, var(--_lr-token-input-control-min-height) ) ); block-size: var(--lr-token-input-control-height, auto); padding: var(--lr-token-input-padding, var(--_lr-token-input-padding)); font-size: var( --lr-token-input-font-size, var(--_lr-token-input-font-size) ); border: var(--lr-border-width-thin) solid var(--lr-color-border); border-radius: var(--lr-token-input-radius, var(--_lr-token-input-radius)); background: var(--lr-color-surface); } [part="input-wrapper"]:focus-within { border-color: var( --lr-token-input-focus-border-color, var(--lr-color-brand) ); outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part="input"] { flex: 1 1 var(--lr-token-input-input-inline-size, var(--lr-size-8rem)); min-inline-size: var( --lr-token-input-min-input-inline-size, var(--_lr-token-input-min-input-inline-size) ); padding-block: 0; border: 0; outline: 0; background: transparent; color: var(--lr-color-text); font: inherit; } [part="input"]::placeholder { color: var(--lr-color-text-quiet); } [part="start"], [part="end"] { flex: 0 0 auto; display: inline-flex; align-items: center; color: var(--lr-color-text-quiet); } [part="start"][hidden], [part="end"][hidden] { display: none; } [part="token"] { display: inline-flex; min-inline-size: 0; max-inline-size: 100%; overflow: hidden; align-items: center; gap: var(--lr-token-input-token-gap, var(--_lr-token-input-token-gap)); padding: var( --lr-token-input-token-padding, var(--_lr-token-input-token-padding) ); border-radius: var(--lr-token-input-radius, var(--_lr-token-input-radius)); background: var(--lr-token-input-token-bg, var(--lr-color-brand-quiet)); color: var(--lr-color-text); } [part="token"] > span:first-child { min-inline-size: 0; } [part="token"] > span:first-child, [part="token-label"] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [part="remove"] { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); border: 0; padding: 0; background: transparent; color: inherit; cursor: pointer; } [part="remove"]:hover { background: var( --lr-token-input-remove-hover-bg, var(--lr-token-input-action-hover-bg, var(--lr-color-brand-quiet)) ); } [part="remove"]:active { background: var( --lr-token-input-remove-pressed-bg, color-mix( in oklab, var( --lr-token-input-remove-hover-bg, var(--lr-token-input-action-hover-bg, var(--lr-color-brand-quiet)) ), var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ); } [part="remove"]:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part="token-label"] { min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); border-radius: var(--lr-token-input-radius, var(--_lr-token-input-radius)); cursor: pointer; } :host(:where(:not(:disabled))) [part="token-label"]:hover { background: var( --lr-token-input-edit-hover-bg, var(--lr-token-input-action-hover-bg, var(--lr-color-brand-quiet)) ); } :host(:where(:not(:disabled))) [part="token-label"]:active { background: var( --lr-token-input-edit-pressed-bg, color-mix( in oklab, var( --lr-token-input-edit-hover-bg, var(--lr-token-input-action-hover-bg, var(--lr-color-brand-quiet)) ), var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ); } [part="token-label"]:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } :host(:disabled) [part="token-label"] { cursor: default; } [part="token-editor"] { inline-size: var(--lr-token-input-editor-inline-size, var(--lr-size-6rem)); max-inline-size: 100%; border: 0; outline: 0; padding: 0; background: transparent; color: inherit; font: inherit; } [part="token-editor"]::placeholder { color: var(--lr-color-text-quiet); } [part="hint"], [part="error"] { color: var(--lr-color-text-quiet); font-size: var(--lr-font-size-sm); } [part="error"] { color: var(--lr-color-danger); } :host([data-invalid]) [part="input-wrapper"] { border-color: var( --lr-token-input-invalid-border-color, var(--lr-color-danger) ); } :host(:disabled) { opacity: var(--lr-opacity-disabled); } [part="form-control-label"], [part="hint"], [part="error"] { min-inline-size: 0; max-inline-size: 100%; overflow-wrap: anywhere; } `;export{styles};
+import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/form-control.styles.js";const styles=css` :host { display: block; min-inline-size: 0; max-inline-size: 100%; box-sizing: border-box; --_lr-token-input-min-input-inline-size: var(--lr-size-4rem); --_lr-token-input-padding: var(--lr-form-control-padding-block) var(--lr-space-xs); --_lr-token-input-font-size: var(--lr-font-size-md-sm); --_lr-token-input-token-padding: var(--lr-space-2xs) var(--lr-space-xs); --_lr-token-input-gap: var(--lr-space-xs); --_lr-token-input-token-gap: var(--lr-space-2xs); --_lr-token-input-radius: var(--lr-radius); --_lr-token-input-control-min-height: var(--lr-form-control-height); } :host([pill]) { --_lr-token-input-radius: var(--lr-radius-pill); } :host([size="2xs"]) { --_lr-token-input-padding: var(--lr-form-control-padding-block) var(--lr-size-0-0625rem); --_lr-token-input-font-size: var(--lr-font-size-2xs); --_lr-token-input-token-padding: 0 var(--lr-space-2xs); } :host([size="xs"]) { --_lr-token-input-padding: var(--lr-form-control-padding-block) var(--lr-size-0-125rem); --_lr-token-input-font-size: var(--lr-font-size-xs); --_lr-token-input-token-padding: var(--lr-size-1px) var(--lr-space-2xs); } :host([size="s"]), :host([size="small"]) { --_lr-token-input-padding: var(--lr-form-control-padding-block) var(--lr-space-xs); --_lr-token-input-font-size: var(--lr-font-size-sm); --_lr-token-input-token-padding: var(--lr-space-2xs) var(--lr-space-xs); } :host([size="l"]), :host([size="large"]) { --_lr-token-input-padding: var(--lr-form-control-padding-block) var(--lr-space-m); --_lr-token-input-font-size: var(--lr-font-size-lg); --_lr-token-input-token-padding: var(--lr-space-xs) var(--lr-space-s); } :host([size="xl"]) { --_lr-token-input-padding: var(--lr-form-control-padding-block) var(--lr-space-l); --_lr-token-input-font-size: var(--lr-font-size-xl); --_lr-token-input-token-padding: var(--lr-space-s) var(--lr-space-m); } [part="form-control"] { display: grid; min-inline-size: 0; max-inline-size: 100%; gap: var(--lr-token-input-gap, var(--_lr-token-input-gap)); } [part="form-control-label"] { color: var(--lr-color-text); font-weight: var(--lr-font-weight-semibold); } :host([required]) [part="form-control-label"] > span[aria-hidden="true"] { display: none; } ${formControlRequiredMarker} [part='input-wrapper'] { display: flex; flex-wrap: wrap; min-inline-size: 0; max-inline-size: 100%; overflow-x: hidden; overflow-y: auto; align-items: center; gap: var(--lr-token-input-gap, var(--_lr-token-input-gap)); min-block-size: var( --lr-token-input-control-height, var( --lr-token-input-control-min-height, var(--_lr-token-input-control-min-height) ) ); block-size: var(--lr-token-input-control-height, auto); padding: var(--lr-token-input-padding, var(--_lr-token-input-padding)); font-size: var( --lr-token-input-font-size, var(--_lr-token-input-font-size) ); border: var(--lr-border-width-thin) solid var(--lr-color-border); border-radius: var(--lr-token-input-radius, var(--_lr-token-input-radius)); background: var(--lr-color-surface); } [part="input-wrapper"]:focus-within { border-color: var( --lr-token-input-focus-border-color, var(--lr-color-brand) ); outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part="input"] { flex: 1 1 var(--lr-token-input-input-inline-size, var(--lr-size-8rem)); min-inline-size: var( --lr-token-input-min-input-inline-size, var(--_lr-token-input-min-input-inline-size) ); padding-block: 0; border: 0; outline: 0; background: transparent; color: var(--lr-color-text); font: inherit; } [part="input"]::placeholder { color: var(--lr-color-text-quiet); } [part="start"], [part="end"] { flex: 0 0 auto; display: inline-flex; align-items: center; color: var(--lr-color-text-quiet); } [part="start"][hidden], [part="end"][hidden] { display: none; } [part="token"] { display: inline-flex; min-inline-size: 0; max-inline-size: 100%; overflow: hidden; align-items: center; gap: var(--lr-token-input-token-gap, var(--_lr-token-input-token-gap)); padding: var( --lr-token-input-token-padding, var(--_lr-token-input-token-padding) ); border-radius: var(--lr-token-input-radius, var(--_lr-token-input-radius)); background: var(--lr-token-input-token-bg, var(--lr-color-brand-quiet)); color: var(--lr-color-text); } [part="token"] > span:first-child { min-inline-size: 0; } [part="token"] > span:first-child, [part="token-label"] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [part="remove"] { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); border: 0; padding: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; } [part="remove"]:hover { background: var( --lr-token-input-remove-hover-bg, var(--lr-token-input-action-hover-bg, var(--lr-color-brand-quiet)) ); } [part="remove"]:active { background: var( --lr-token-input-remove-pressed-bg, color-mix( in oklab, var( --lr-token-input-remove-hover-bg, var(--lr-token-input-action-hover-bg, var(--lr-color-brand-quiet)) ), var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ); } [part="remove"]:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part="token-label"] { min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); border-radius: var(--lr-token-input-radius, var(--_lr-token-input-radius)); cursor: pointer; } :host(:where(:not(:disabled))) [part="token-label"]:hover { background: var( --lr-token-input-edit-hover-bg, var(--lr-token-input-action-hover-bg, var(--lr-color-brand-quiet)) ); } :host(:where(:not(:disabled))) [part="token-label"]:active { background: var( --lr-token-input-edit-pressed-bg, color-mix( in oklab, var( --lr-token-input-edit-hover-bg, var(--lr-token-input-action-hover-bg, var(--lr-color-brand-quiet)) ), var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ); } [part="token-label"]:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } :host(:disabled) [part="token-label"] { cursor: default; } [part="token-editor"] { inline-size: var(--lr-token-input-editor-inline-size, var(--lr-size-6rem)); max-inline-size: 100%; border: 0; outline: 0; padding: 0; background: transparent; color: inherit; font: inherit; } [part="token-editor"]::placeholder { color: var(--lr-color-text-quiet); } [part="hint"], [part="error"] { color: var(--lr-color-text-quiet); font-size: var(--lr-font-size-sm); } [part="error"] { color: var(--lr-color-danger); } :host([data-invalid]) [part="input-wrapper"] { border-color: var( --lr-token-input-invalid-border-color, var(--lr-color-danger) ); } :host(:disabled) { opacity: var(--lr-opacity-disabled); } [part="form-control-label"], [part="hint"], [part="error"] { min-inline-size: 0; max-inline-size: 100%; overflow-wrap: anywhere; } `;export{styles};

package/dist/components/layout/app-rail/app-rail.class.d.ts

@@ -82,14 +82,16 @@ export declare function computeAppRailMode(iconOnlyMatches:boolean,mobileMatches
 * @csspart nav - The wrapper around the default (nav items) slot.
 * @csspart footer - The wrapper around the `footer` slot.
 * @csspart toggle - The mobile hamburger/close toggle button. Hidden via
-*   CSS outside `'mobile'` mode, or entirely via `hideToggle`.
+*   CSS outside `'mobile'` mode, or entirely via `hideToggle`; it inherits the rail's typography
+*   and its glyph scales at 1em.
 * @csspart backdrop - The mobile overlay's scrim. Only rendered while open.
 * @csspart panel - The mobile overlay's floating panel — see the class doc
 *   for why it's the same element as `base`, never both at once.
 * @csspart resizer - The `resizable` opt-in's drag handle -- its interactive hit target, sized to
 *   the shared minimum tappable size (`--lr-icon-button-size`), independent of the slimmer
-*   visible line rendered by its `resizer-track` child. Only rendered while `resizable` and `mode`
-*   is `'full'`.
+*   visible line rendered by its `resizer-track` child. Its numeric ARIA range remains in CSS
+*   pixels while `aria-valuetext` reports the current width through the effective locale. Only
+*   rendered while `resizable` and `mode` is `'full'`.
 * @csspart resizer-track - The resizer's slim visible drag line, centered inside `[part="resizer"]`'s
 *   larger hit target (mirrors `<lr-swatch-picker>`'s `[part="swatch"]`/`[part="swatch-fill"]`
 *   split). Colors on hover/focus the same way the whole handle previously did.
@@ -248,7 +250,7 @@ private get safeMaxRailWidthPx();
 *  `[safeMinRailWidthPx, safeMaxRailWidthPx]` here -- a NaN/negative/out-of-bounds direct
 *  assignment would otherwise reach `updated()`'s inline-size write and this resizer's own
 *  `aria-valuenow` exactly as given. */
-private get effectiveRailWidthPx();private get storageFullKey();private get persistFields();
+private get effectiveRailWidthPx();private resizeValueText;private get storageFullKey();private get persistFields();
 /** Restore the selected persisted fields. Runs once, before the first render. Effective `mode`
 *  remains breakpoint-derived; only the optional non-mobile `preferredMode` input is restorable. */
 private loadPersisted;private persistState;protected willUpdate(changed:PropertyValues):void;protected updated(changed:PropertyValues):void;connectedCallback():void;disconnectedCallback():void;adoptedCallback():void;private activateMobileOverlay;private deactivateMobileOverlay;private setupMediaQueries;private teardownMediaQueries;private onIconOnlyChange;private onMobileChange;private applyComputedMode;private setEffectiveMode;private setOpen;private onToggleClick;private onBackdropClick;private onNavItemClick;private onHeaderSlotChange;private onFooterSlotChange;private onNavSlotChange;private onResizerPointerDown;private onResizerPointerMove;private onResizerPointerUp;private endResizerGesture;

package/dist/components/layout/app-rail/app-rail.class.js

@@ -1,4 +1,4 @@
-var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing,svg}from"lit";import{property,query,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{activateOverlay,composedContains,deepActiveElement}from"../../../internal/overlay-manager.js";import{nextId}from"../../../internal/a11y.js";import{closeIcon}from"../../../internal/icons.js";import{tag}from"../../../internal/prefix.js";import{isRtl}from"../../../internal/rtl.js";import{finiteRange}from"../../../internal/numbers.js";import{readPersistedState,writePersistedState}from"../../../internal/persisted-state.js";import{styles}from"./app-rail.styles.js";import"./app-rail-item.class.js";import{LYRA_DEFAULT_closeNavigation,LYRA_DEFAULT_navigation,LYRA_DEFAULT_openNavigation,LYRA_DEFAULT_resizeNavigation}from"../../../internal/default-strings.generated.js";const APP_RAIL_PERSIST_FIELDS=new Set(["open","width","preferred-mode"]);function menuIcon(){return svg`
+var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing,svg}from"lit";import{property,query,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{activateOverlay,composedContains,deepActiveElement}from"../../../internal/overlay-manager.js";import{nextId}from"../../../internal/a11y.js";import{closeIcon}from"../../../internal/icons.js";import{tag}from"../../../internal/prefix.js";import{isRtl}from"../../../internal/rtl.js";import{finiteRange}from"../../../internal/numbers.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{readPersistedState,writePersistedState}from"../../../internal/persisted-state.js";import{styles}from"./app-rail.styles.js";import"./app-rail-item.class.js";import{LYRA_DEFAULT_closeNavigation,LYRA_DEFAULT_navigation,LYRA_DEFAULT_openNavigation,LYRA_DEFAULT_resizeNavigation,LYRA_DEFAULT_resizeValuePixels}from"../../../internal/default-strings.generated.js";const APP_RAIL_PERSIST_FIELDS=new Set(["open","width","preferred-mode"]);function menuIcon(){return svg`
     <svg
       width="1em"
       height="1em"
@@ -15,7 +15,7 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
       <line x1="4" y1="12" x2="20" y2="12"></line>
       <line x1="4" y1="17" x2="20" y2="17"></line>
     </svg>
-  `}function computeAppRailMode(iconOnlyMatches,mobileMatches,preferredMode){return mobileMatches?"mobile":preferredMode||(iconOnlyMatches?"icon-only":"full")}class LyraAppRail extends LyraElement{constructor(){super(...arguments),this.iconOnlyBreakpoint="960px",this.mobileBreakpoint="600px",this.open=!1,this.accessibleLabel=null,this.hideToggle=!1,this.resizable=!1,this.persist="open width",this.minRailWidthPx=190,this.maxRailWidthPx=440,this._dragging=!1,this.hasHeaderSlot=!1,this.hasFooterSlot=!1,this.persistReady=!1,this._mode="full",this.forced=!1,this.iconOnlyMatches=!1,this.mobileMatches=!1,this.overlayActive=!1,this.justOpened=!1,this.recoverInlineFocusAfterResponsiveClose=!1,this.navId=nextId("app-rail-nav"),this.resizeStartX=0,this.resizeStartWidth=0,this.resizeGestureChanged=!1,this.managedItems=new Set,this.onIconOnlyChange=e=>{this.iconOnlyMatches=e.matches,this.forced||this.applyComputedMode()},this.onMobileChange=e=>{this.mobileMatches=e.matches,this.forced||this.applyComputedMode()},this.onToggleClick=e=>{this.open||(this.explicitTrigger=e.currentTarget),this.setOpen(!this.open)},this.onBackdropClick=()=>{this.overlayHandle?.dismissBackdrop()},this.onNavItemClick=()=>{this.overlayActive&&this.setOpen(!1)},this.onHeaderSlotChange=e=>{this.hasHeaderSlot=e.target.assignedElements({flatten:!0}).length>0},this.onFooterSlotChange=e=>{this.hasFooterSlot=e.target.assignedElements({flatten:!0}).length>0},this.onNavSlotChange=()=>{this.syncSlottedItems()},this.onResizerPointerDown=e=>{if(!e.isPrimary||e.button!==0||!this.resizable||this._mode!=="full"||this.resizePointerId!==void 0)return;const resizer=e.currentTarget,ownerWindow=resizer.ownerDocument.defaultView;ownerWindow&&(this.resizePointerId=e.pointerId,this.resizeOwnerWindow=ownerWindow,this.resizeStartX=e.clientX,this.resizeStartWidth=this.effectiveRailWidthPx,this.resizeGestureChanged=!1,resizer.setPointerCapture(e.pointerId),ownerWindow.addEventListener("pointermove",this.onResizerPointerMove),ownerWindow.addEventListener("pointerup",this.onResizerPointerUp),ownerWindow.addEventListener("pointercancel",this.onResizerPointerUp),ownerWindow.addEventListener("lostpointercapture",this.onResizerPointerUp),this.setDragging(!0))},this.onResizerPointerMove=e=>{if(e.pointerId!==this.resizePointerId)return;if(!this.resizable||this._mode!=="full"){this.endResizerGesture();return}let delta=e.clientX-this.resizeStartX;isRtl(this)&&(delta=-delta);const next=Math.min(this.safeMaxRailWidthPx,Math.max(this.safeMinRailWidthPx,this.resizeStartWidth+delta));this.requestRailResize(next,!1)},this.onResizerPointerUp=e=>{e.pointerId===this.resizePointerId&&this.endResizerGesture(e.type==="pointerup")},this.onResizerKeyDown=e=>{const rtl=isRtl(this),forwardKey=rtl?"ArrowLeft":"ArrowRight",backwardKey=rtl?"ArrowRight":"ArrowLeft",step=8;if(e.key===forwardKey){const next=Math.min(this.safeMaxRailWidthPx,this.effectiveRailWidthPx+step);next!==this.effectiveRailWidthPx&&(e.preventDefault(),this.requestRailResize(next))}else if(e.key===backwardKey){const next=Math.max(this.safeMinRailWidthPx,this.effectiveRailWidthPx-step);next!==this.effectiveRailWidthPx&&(e.preventDefault(),this.requestRailResize(next))}}}static{this.defaultStrings={...super.defaultStrings,closeNavigation:LYRA_DEFAULT_closeNavigation,navigation:LYRA_DEFAULT_navigation,openNavigation:LYRA_DEFAULT_openNavigation,resizeNavigation:LYRA_DEFAULT_resizeNavigation}}static{this.knownUnobservedAttributes=["mode","dragging"]}static{this.styles=[LyraElement.styles,styles]}get forceMode(){return this._forceMode}set forceMode(next){if(next!=null&&next!=="auto"&&next!=="full"&&next!=="icon-only")return;const old=this._forceMode;if(this._forceMode=next??void 0,this.requestUpdate("forceMode",old),next==null||next==="auto"){if(!this.forced)return;this.forced=!1,this.applyComputedMode();return}this.forced=!0,this.setEffectiveMode(next)}get dragging(){return this._dragging}setDragging(next){this._dragging=next,this.toggleAttribute("dragging",next)}syncSlottedItems(){const slot=this.shadowRoot?.querySelector('[part="nav"] > slot'),itemTag=tag("app-rail-item"),railTag=tag("app-rail"),next=new Set((slot?.assignedElements({flatten:!0})??[]).filter(item=>item.localName===itemTag));for(const item of this.managedItems){if(next.has(item))continue;const newOwner=item.closest(railTag);newOwner&&newOwner!==this&&item.parentElement===newOwner&&!item.hasAttribute("slot")?item.toggleAttribute("icon-only",newOwner.mode==="icon-only"):item.removeAttribute("icon-only")}for(const item of next)item.toggleAttribute("icon-only",this._mode==="icon-only");this.managedItems=next}get mode(){return this._mode}get safeMinRailWidthPx(){return finiteRange(this.minRailWidthPx,190,0)}get safeMaxRailWidthPx(){return Math.max(this.safeMinRailWidthPx,finiteRange(this.maxRailWidthPx,440,0))}get effectiveRailWidthPx(){return this.railWidthPx!=null?finiteRange(this.railWidthPx,this.safeMinRailWidthPx,this.safeMinRailWidthPx,this.safeMaxRailWidthPx):this.baseEl?.getBoundingClientRect().width??240}get storageFullKey(){return this.storageKey?`lr-app-rail:${this.storageKey}`:void 0}get persistFields(){const persist=typeof this.persist=="string"?this.persist:"";return new Set(persist.split(/\s+/).filter(field=>APP_RAIL_PERSIST_FIELDS.has(field)))}loadPersisted(){const parsed=readPersistedState(this.storageFullKey,v=>typeof v=="object"&&v!==null);if(!parsed)return!1;const fields=this.persistFields;return fields.has("open")&&typeof parsed.open=="boolean"&&(this.open=parsed.open),fields.has("width")&&typeof parsed.railWidthPx=="number"&&Number.isFinite(parsed.railWidthPx)&&(this.railWidthPx=parsed.railWidthPx),fields.has("preferred-mode")&&(parsed.preferredMode==="full"||parsed.preferredMode==="icon-only")?(this.preferredMode=parsed.preferredMode,!0):!1}persistState(){const fields=this.persistFields;if(fields.size===0)return;const state2={};fields.has("open")&&(state2.open=this.open),fields.has("width")&&(state2.railWidthPx=this.railWidthPx),fields.has("preferred-mode")&&(state2.preferredMode=this.preferredMode??null),writePersistedState(this.storageFullKey,state2)}willUpdate(changed){if(super.willUpdate(changed),(changed.has("resizable")||changed.has("mode"))&&(!this.resizable||this._mode!=="full")&&this.endResizerGesture(),this.hasUpdated||(this.hasHeaderSlot=Array.from(this.children).some(el=>el.getAttribute("slot")==="header"),this.hasFooterSlot=Array.from(this.children).some(el=>el.getAttribute("slot")==="footer"),this.loadPersisted()&&!this.forced&&(this._mode=computeAppRailMode(this.iconOnlyMatches,this.mobileMatches,this.preferredMode))),this.hasUpdated&&(changed.has("iconOnlyBreakpoint")||changed.has("mobileBreakpoint"))&&(this.teardownMediaQueries(),this.setupMediaQueries()),this.hasUpdated&&changed.has("preferredMode")&&!this.forced&&this.applyComputedMode(),changed.has("open")||changed.has("mode")){const next=this._mode==="mobile"&&this.open;next!==this.overlayActive&&(this.overlayActive=next,next?(this.justOpened=!0,this.activateMobileOverlay()):this.deactivateMobileOverlay(this._mode==="mobile"))}}updated(changed){if(super.updated(changed),this._lastReflectedMode!==this._mode&&(this._lastReflectedMode=this._mode,this.setAttribute("mode",this._mode)),this.syncSlottedItems(),this.recoverInlineFocusAfterResponsiveClose){this.recoverInlineFocusAfterResponsiveClose=!1;const active=deepActiveElement(this.ownerDocument);this.baseEl&&!composedContains(this.baseEl,active)&&this.baseEl.focus()}this.justOpened&&(this.justOpened=!1,this.overlayHandle?.focusInitial()),this.persistReady&&(changed.has("open")||changed.has("railWidthPx")&&!this.dragging||changed.has("preferredMode")||changed.has("persist"))&&this.persistState(),this.persistReady=!0,(changed.has("railWidthPx")||changed.has("resizable")||changed.has("mode")||!this.hasUpdated)&&this.baseEl&&(this.resizable&&this.railWidthPx!=null&&this._mode==="full"?this.baseEl.style.setProperty("inline-size",`${this.effectiveRailWidthPx}px`):this.baseEl.style.removeProperty("inline-size"))}connectedCallback(){super.connectedCallback(),this.setupMediaQueries(),this.hasUpdated&&this._mode==="mobile"&&this.open&&(this.overlayHandle?.isActive()?this.overlayHandle.resume():this.activateMobileOverlay(),queueMicrotask(()=>this.overlayHandle?.focusInitial())),this.hasUpdated&&queueMicrotask(()=>{this.isConnected&&this.syncSlottedItems()})}disconnectedCallback(){super.disconnectedCallback(),this.teardownMediaQueries(),this.overlayHandle?.suspend(),this.endResizerGesture()}adoptedCallback(){super.adoptedCallback(),this.teardownMediaQueries(),this.endResizerGesture()}activateMobileOverlay(){this.overlayHandle=activateOverlay({host:this,panel:()=>this.shadowRoot?.querySelector('[part="panel"]')??null,onEscape:()=>this.setOpen(!1),onBackdrop:()=>this.setOpen(!1),restoreFocusTo:this.explicitTrigger,lockScroll:!0,suspendWhenUnrendered:!0}),this.explicitTrigger=void 0}deactivateMobileOverlay(restoreFocus=!0){this.overlayHandle?.deactivate({restoreFocus}),this.overlayHandle=void 0}setupMediaQueries(){if(!this.isConnected)return;const view=this.ownerDocument.defaultView;if(!view?.matchMedia)return;const iconOnlyQuery=view.matchMedia(`(max-width: ${this.iconOnlyBreakpoint})`),mobileQuery=view.matchMedia(`(max-width: ${this.mobileBreakpoint})`),iconOnlyListener=event=>{this.mqIconOnly!==iconOnlyQuery||!this.isConnected||this.ownerDocument.defaultView!==view||this.onIconOnlyChange(event)},mobileListener=event=>{this.mqMobile!==mobileQuery||!this.isConnected||this.ownerDocument.defaultView!==view||this.onMobileChange(event)};this.mqIconOnly=iconOnlyQuery,this.mqMobile=mobileQuery,this.mqIconOnlyListener=iconOnlyListener,this.mqMobileListener=mobileListener,iconOnlyQuery.addEventListener("change",iconOnlyListener),mobileQuery.addEventListener("change",mobileListener),this.iconOnlyMatches=iconOnlyQuery.matches,this.mobileMatches=mobileQuery.matches,this.forced||this.applyComputedMode()}teardownMediaQueries(){this.mqIconOnly&&this.mqIconOnlyListener&&this.mqIconOnly.removeEventListener("change",this.mqIconOnlyListener),this.mqMobile&&this.mqMobileListener&&this.mqMobile.removeEventListener("change",this.mqMobileListener),this.mqIconOnly=void 0,this.mqMobile=void 0,this.mqIconOnlyListener=void 0,this.mqMobileListener=void 0}applyComputedMode(){this.setEffectiveMode(computeAppRailMode(this.iconOnlyMatches,this.mobileMatches,this.preferredMode))}setEffectiveMode(next){if(this._mode===next)return;const old=this._mode;old==="mobile"&&next!=="mobile"&&this.open&&(this.recoverInlineFocusAfterResponsiveClose=!0),this._mode=next,this.requestUpdate("mode",old),this.emit("lr-mode-change",{mode:next}),next!=="mobile"&&this.open&&this.setOpen(!1,{force:!0})}setOpen(next,options){if(this.open===next)return;if(options?.force){this.open=next,this.emit("lr-toggle",{open:next});return}const mode=this._mode,open=this.open;this.emit("lr-toggle",{open:next},{cancelable:!0}).defaultPrevented||this._mode!==mode||this.open!==open||(this.open=next)}endResizerGesture(commit=!1){const ownerWindow=this.resizeOwnerWindow,changed=this.resizeGestureChanged,widthPx=this.effectiveRailWidthPx;this.resizePointerId=void 0,this.resizeOwnerWindow=void 0,this.resizeGestureChanged=!1,this.setDragging(!1),ownerWindow?.removeEventListener("pointermove",this.onResizerPointerMove),ownerWindow?.removeEventListener("pointerup",this.onResizerPointerUp),ownerWindow?.removeEventListener("pointercancel",this.onResizerPointerUp),ownerWindow?.removeEventListener("lostpointercapture",this.onResizerPointerUp),commit&&changed&&(this.emit("lr-rail-resize",{widthPx}),this.persistReady&&this.persistState())}requestRailResize(next,commit=!0){return next===this.effectiveRailWidthPx||this.emit("lr-rail-resize-request",{widthPx:next},{cancelable:!0}).defaultPrevented?!1:(this.railWidthPx=next,commit?this.emit("lr-rail-resize",{widthPx:next}):this.resizeGestureChanged=!0,!0)}render(){const mobile=this._mode==="mobile";return html`
+  `}function computeAppRailMode(iconOnlyMatches,mobileMatches,preferredMode){return mobileMatches?"mobile":preferredMode||(iconOnlyMatches?"icon-only":"full")}class LyraAppRail extends LyraElement{constructor(){super(...arguments),this.iconOnlyBreakpoint="960px",this.mobileBreakpoint="600px",this.open=!1,this.accessibleLabel=null,this.hideToggle=!1,this.resizable=!1,this.persist="open width",this.minRailWidthPx=190,this.maxRailWidthPx=440,this._dragging=!1,this.hasHeaderSlot=!1,this.hasFooterSlot=!1,this.persistReady=!1,this._mode="full",this.forced=!1,this.iconOnlyMatches=!1,this.mobileMatches=!1,this.overlayActive=!1,this.justOpened=!1,this.recoverInlineFocusAfterResponsiveClose=!1,this.navId=nextId("app-rail-nav"),this.resizeStartX=0,this.resizeStartWidth=0,this.resizeGestureChanged=!1,this.managedItems=new Set,this.onIconOnlyChange=e=>{this.iconOnlyMatches=e.matches,this.forced||this.applyComputedMode()},this.onMobileChange=e=>{this.mobileMatches=e.matches,this.forced||this.applyComputedMode()},this.onToggleClick=e=>{this.open||(this.explicitTrigger=e.currentTarget),this.setOpen(!this.open)},this.onBackdropClick=()=>{this.overlayHandle?.dismissBackdrop()},this.onNavItemClick=()=>{this.overlayActive&&this.setOpen(!1)},this.onHeaderSlotChange=e=>{this.hasHeaderSlot=e.target.assignedElements({flatten:!0}).length>0},this.onFooterSlotChange=e=>{this.hasFooterSlot=e.target.assignedElements({flatten:!0}).length>0},this.onNavSlotChange=()=>{this.syncSlottedItems()},this.onResizerPointerDown=e=>{if(!e.isPrimary||e.button!==0||!this.resizable||this._mode!=="full"||this.resizePointerId!==void 0)return;const resizer=e.currentTarget,ownerWindow=resizer.ownerDocument.defaultView;ownerWindow&&(this.resizePointerId=e.pointerId,this.resizeOwnerWindow=ownerWindow,this.resizeStartX=e.clientX,this.resizeStartWidth=this.effectiveRailWidthPx,this.resizeGestureChanged=!1,resizer.setPointerCapture(e.pointerId),ownerWindow.addEventListener("pointermove",this.onResizerPointerMove),ownerWindow.addEventListener("pointerup",this.onResizerPointerUp),ownerWindow.addEventListener("pointercancel",this.onResizerPointerUp),ownerWindow.addEventListener("lostpointercapture",this.onResizerPointerUp),this.setDragging(!0))},this.onResizerPointerMove=e=>{if(e.pointerId!==this.resizePointerId)return;if(!this.resizable||this._mode!=="full"){this.endResizerGesture();return}let delta=e.clientX-this.resizeStartX;isRtl(this)&&(delta=-delta);const next=Math.min(this.safeMaxRailWidthPx,Math.max(this.safeMinRailWidthPx,this.resizeStartWidth+delta));this.requestRailResize(next,!1)},this.onResizerPointerUp=e=>{e.pointerId===this.resizePointerId&&this.endResizerGesture(e.type==="pointerup")},this.onResizerKeyDown=e=>{const rtl=isRtl(this),forwardKey=rtl?"ArrowLeft":"ArrowRight",backwardKey=rtl?"ArrowRight":"ArrowLeft",step=8;if(e.key===forwardKey){const next=Math.min(this.safeMaxRailWidthPx,this.effectiveRailWidthPx+step);next!==this.effectiveRailWidthPx&&(e.preventDefault(),this.requestRailResize(next))}else if(e.key===backwardKey){const next=Math.max(this.safeMinRailWidthPx,this.effectiveRailWidthPx-step);next!==this.effectiveRailWidthPx&&(e.preventDefault(),this.requestRailResize(next))}}}static{this.defaultStrings={...super.defaultStrings,closeNavigation:LYRA_DEFAULT_closeNavigation,navigation:LYRA_DEFAULT_navigation,openNavigation:LYRA_DEFAULT_openNavigation,resizeNavigation:LYRA_DEFAULT_resizeNavigation,resizeValuePixels:LYRA_DEFAULT_resizeValuePixels}}static{this.knownUnobservedAttributes=["mode","dragging"]}static{this.styles=[LyraElement.styles,styles]}get forceMode(){return this._forceMode}set forceMode(next){if(next!=null&&next!=="auto"&&next!=="full"&&next!=="icon-only")return;const old=this._forceMode;if(this._forceMode=next??void 0,this.requestUpdate("forceMode",old),next==null||next==="auto"){if(!this.forced)return;this.forced=!1,this.applyComputedMode();return}this.forced=!0,this.setEffectiveMode(next)}get dragging(){return this._dragging}setDragging(next){this._dragging=next,this.toggleAttribute("dragging",next)}syncSlottedItems(){const slot=this.shadowRoot?.querySelector('[part="nav"] > slot'),itemTag=tag("app-rail-item"),railTag=tag("app-rail"),next=new Set((slot?.assignedElements({flatten:!0})??[]).filter(item=>item.localName===itemTag));for(const item of this.managedItems){if(next.has(item))continue;const newOwner=item.closest(railTag);newOwner&&newOwner!==this&&item.parentElement===newOwner&&!item.hasAttribute("slot")?item.toggleAttribute("icon-only",newOwner.mode==="icon-only"):item.removeAttribute("icon-only")}for(const item of next)item.toggleAttribute("icon-only",this._mode==="icon-only");this.managedItems=next}get mode(){return this._mode}get safeMinRailWidthPx(){return finiteRange(this.minRailWidthPx,190,0)}get safeMaxRailWidthPx(){return Math.max(this.safeMinRailWidthPx,finiteRange(this.maxRailWidthPx,440,0))}get effectiveRailWidthPx(){return this.railWidthPx!=null?finiteRange(this.railWidthPx,this.safeMinRailWidthPx,this.safeMinRailWidthPx,this.safeMaxRailWidthPx):this.baseEl?.getBoundingClientRect().width??240}resizeValueText(widthPx){return this.localize("resizeValuePixels",void 0,{value:getNumberFormat(this.effectiveLocale).format(Math.round(widthPx))})}get storageFullKey(){return this.storageKey?`lr-app-rail:${this.storageKey}`:void 0}get persistFields(){const persist=typeof this.persist=="string"?this.persist:"";return new Set(persist.split(/\s+/).filter(field=>APP_RAIL_PERSIST_FIELDS.has(field)))}loadPersisted(){const parsed=readPersistedState(this.storageFullKey,v=>typeof v=="object"&&v!==null);if(!parsed)return!1;const fields=this.persistFields;return fields.has("open")&&typeof parsed.open=="boolean"&&(this.open=parsed.open),fields.has("width")&&typeof parsed.railWidthPx=="number"&&Number.isFinite(parsed.railWidthPx)&&(this.railWidthPx=parsed.railWidthPx),fields.has("preferred-mode")&&(parsed.preferredMode==="full"||parsed.preferredMode==="icon-only")?(this.preferredMode=parsed.preferredMode,!0):!1}persistState(){const fields=this.persistFields;if(fields.size===0)return;const state2={};fields.has("open")&&(state2.open=this.open),fields.has("width")&&(state2.railWidthPx=this.railWidthPx),fields.has("preferred-mode")&&(state2.preferredMode=this.preferredMode??null),writePersistedState(this.storageFullKey,state2)}willUpdate(changed){if(super.willUpdate(changed),(changed.has("resizable")||changed.has("mode"))&&(!this.resizable||this._mode!=="full")&&this.endResizerGesture(),this.hasUpdated||(this.hasHeaderSlot=Array.from(this.children).some(el=>el.getAttribute("slot")==="header"),this.hasFooterSlot=Array.from(this.children).some(el=>el.getAttribute("slot")==="footer"),this.loadPersisted()&&!this.forced&&(this._mode=computeAppRailMode(this.iconOnlyMatches,this.mobileMatches,this.preferredMode))),this.hasUpdated&&(changed.has("iconOnlyBreakpoint")||changed.has("mobileBreakpoint"))&&(this.teardownMediaQueries(),this.setupMediaQueries()),this.hasUpdated&&changed.has("preferredMode")&&!this.forced&&this.applyComputedMode(),changed.has("open")||changed.has("mode")){const next=this._mode==="mobile"&&this.open;next!==this.overlayActive&&(this.overlayActive=next,next?(this.justOpened=!0,this.activateMobileOverlay()):this.deactivateMobileOverlay(this._mode==="mobile"))}}updated(changed){if(super.updated(changed),this._lastReflectedMode!==this._mode&&(this._lastReflectedMode=this._mode,this.setAttribute("mode",this._mode)),this.syncSlottedItems(),this.recoverInlineFocusAfterResponsiveClose){this.recoverInlineFocusAfterResponsiveClose=!1;const active=deepActiveElement(this.ownerDocument);this.baseEl&&!composedContains(this.baseEl,active)&&this.baseEl.focus()}this.justOpened&&(this.justOpened=!1,this.overlayHandle?.focusInitial()),this.persistReady&&(changed.has("open")||changed.has("railWidthPx")&&!this.dragging||changed.has("preferredMode")||changed.has("persist"))&&this.persistState(),this.persistReady=!0,(changed.has("railWidthPx")||changed.has("resizable")||changed.has("mode")||!this.hasUpdated)&&this.baseEl&&(this.resizable&&this.railWidthPx!=null&&this._mode==="full"?this.baseEl.style.setProperty("inline-size",`${this.effectiveRailWidthPx}px`):this.baseEl.style.removeProperty("inline-size"))}connectedCallback(){super.connectedCallback(),this.setupMediaQueries(),this.hasUpdated&&this._mode==="mobile"&&this.open&&(this.overlayHandle?.isActive()?this.overlayHandle.resume():this.activateMobileOverlay(),queueMicrotask(()=>this.overlayHandle?.focusInitial())),this.hasUpdated&&queueMicrotask(()=>{this.isConnected&&this.syncSlottedItems()})}disconnectedCallback(){super.disconnectedCallback(),this.teardownMediaQueries(),this.overlayHandle?.suspend(),this.endResizerGesture()}adoptedCallback(){super.adoptedCallback(),this.teardownMediaQueries(),this.endResizerGesture()}activateMobileOverlay(){this.overlayHandle=activateOverlay({host:this,panel:()=>this.shadowRoot?.querySelector('[part="panel"]')??null,onEscape:()=>this.setOpen(!1),onBackdrop:()=>this.setOpen(!1),restoreFocusTo:this.explicitTrigger,lockScroll:!0,suspendWhenUnrendered:!0}),this.explicitTrigger=void 0}deactivateMobileOverlay(restoreFocus=!0){this.overlayHandle?.deactivate({restoreFocus}),this.overlayHandle=void 0}setupMediaQueries(){if(!this.isConnected)return;const view=this.ownerDocument.defaultView;if(!view?.matchMedia)return;const iconOnlyQuery=view.matchMedia(`(max-width: ${this.iconOnlyBreakpoint})`),mobileQuery=view.matchMedia(`(max-width: ${this.mobileBreakpoint})`),iconOnlyListener=event=>{this.mqIconOnly!==iconOnlyQuery||!this.isConnected||this.ownerDocument.defaultView!==view||this.onIconOnlyChange(event)},mobileListener=event=>{this.mqMobile!==mobileQuery||!this.isConnected||this.ownerDocument.defaultView!==view||this.onMobileChange(event)};this.mqIconOnly=iconOnlyQuery,this.mqMobile=mobileQuery,this.mqIconOnlyListener=iconOnlyListener,this.mqMobileListener=mobileListener,iconOnlyQuery.addEventListener("change",iconOnlyListener),mobileQuery.addEventListener("change",mobileListener),this.iconOnlyMatches=iconOnlyQuery.matches,this.mobileMatches=mobileQuery.matches,this.forced||this.applyComputedMode()}teardownMediaQueries(){this.mqIconOnly&&this.mqIconOnlyListener&&this.mqIconOnly.removeEventListener("change",this.mqIconOnlyListener),this.mqMobile&&this.mqMobileListener&&this.mqMobile.removeEventListener("change",this.mqMobileListener),this.mqIconOnly=void 0,this.mqMobile=void 0,this.mqIconOnlyListener=void 0,this.mqMobileListener=void 0}applyComputedMode(){this.setEffectiveMode(computeAppRailMode(this.iconOnlyMatches,this.mobileMatches,this.preferredMode))}setEffectiveMode(next){if(this._mode===next)return;const old=this._mode;old==="mobile"&&next!=="mobile"&&this.open&&(this.recoverInlineFocusAfterResponsiveClose=!0),this._mode=next,this.requestUpdate("mode",old),this.emit("lr-mode-change",{mode:next}),next!=="mobile"&&this.open&&this.setOpen(!1,{force:!0})}setOpen(next,options){if(this.open===next)return;if(options?.force){this.open=next,this.emit("lr-toggle",{open:next});return}const mode=this._mode,open=this.open;this.emit("lr-toggle",{open:next},{cancelable:!0}).defaultPrevented||this._mode!==mode||this.open!==open||(this.open=next)}endResizerGesture(commit=!1){const ownerWindow=this.resizeOwnerWindow,changed=this.resizeGestureChanged,widthPx=this.effectiveRailWidthPx;this.resizePointerId=void 0,this.resizeOwnerWindow=void 0,this.resizeGestureChanged=!1,this.setDragging(!1),ownerWindow?.removeEventListener("pointermove",this.onResizerPointerMove),ownerWindow?.removeEventListener("pointerup",this.onResizerPointerUp),ownerWindow?.removeEventListener("pointercancel",this.onResizerPointerUp),ownerWindow?.removeEventListener("lostpointercapture",this.onResizerPointerUp),commit&&changed&&(this.emit("lr-rail-resize",{widthPx}),this.persistReady&&this.persistState())}requestRailResize(next,commit=!0){return next===this.effectiveRailWidthPx||this.emit("lr-rail-resize-request",{widthPx:next},{cancelable:!0}).defaultPrevented?!1:(this.railWidthPx=next,commit?this.emit("lr-rail-resize",{widthPx:next}):this.resizeGestureChanged=!0,!0)}render(){const mobile=this._mode==="mobile",railWidthPx=this.effectiveRailWidthPx;return html`
       <button
         part="toggle"
         type="button"
@@ -51,7 +51,8 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
             role="separator"
             aria-orientation="vertical"
             aria-label=${this.localize("resizeNavigation")}
-            aria-valuenow=${Math.round(this.effectiveRailWidthPx)}
+            aria-valuenow=${Math.round(railWidthPx)}
+            aria-valuetext=${this.resizeValueText(railWidthPx)}
             aria-valuemin=${this.safeMinRailWidthPx}
             aria-valuemax=${this.safeMaxRailWidthPx}
             tabindex="0"

package/dist/components/layout/app-rail/app-rail.styles.js

@@ -1 +1 @@
-import{css}from"lit";const styles=css`:host{--_lr-app-rail-width:var(--lr-size-15rem);--_lr-app-rail-icon-width:var(--lr-size-4rem);--_lr-app-rail-mobile-width:var(--lr-size-18rem);--_lr-app-rail-overlay-color:var(--lr-color-overlay);display:block;position:relative}[part=toggle]{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-radius);background:var(--lr-color-surface);color:var(--lr-color-text);cursor:pointer;justify-content:center;align-items:center;display:none}:host([mode=mobile]) [part=toggle]{display:inline-flex}:host([hide-toggle][mode=mobile]) [part=toggle]{display:none}:host([mode=mobile][open]) [part=toggle]{z-index:calc(var(--lr-overlay-stack-index,var(--lr-layer-modal)) + 2);position:relative}[part=toggle]:hover{background:var(--lr-app-rail-toggle-hover-bg,var(--lr-color-brand-quiet));color:var(--lr-app-rail-toggle-hover-color,var(--lr-color-brand))}[part=toggle]:active{background:var(--lr-app-rail-toggle-active-bg,color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active)));color:var(--lr-app-rail-toggle-active-color,var(--lr-color-brand))}[part=toggle]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:var(--lr-focus-ring-offset)}[part=backdrop]{z-index:var(--lr-overlay-stack-index,var(--lr-layer-modal));background:var(--lr-app-rail-overlay-color,var(--_lr-app-rail-overlay-color));position:fixed;inset:0}[part=base]{inline-size:var(--lr-app-rail-width,var(--_lr-app-rail-width));border-inline-end:var(--lr-border-width-thin) solid var(--lr-color-border);background:var(--lr-color-surface);block-size:100%;transition:inline-size var(--lr-transition-base);flex-direction:column;padding-block-end:var(--lr-safe-area-bottom);display:flex;position:relative;overflow:clip auto}:host([mode=icon-only]) [part=base]{inline-size:var(--lr-app-rail-icon-width,var(--_lr-app-rail-icon-width))}:host([dragging]) [part=base]{transition:none}[part=resizer]{inline-size:var(--lr-icon-button-size);min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);cursor:col-resize;touch-action:none;background:0 0;justify-content:center;align-items:stretch;display:flex;position:absolute;inset-block:0;inset-inline-end:calc(var(--lr-icon-button-size) * -.5)}[part=resizer-track]{inline-size:var(--lr-size-3px);transition:background-color var(--lr-transition-fast);background:0 0}[part=resizer]:hover [part=resizer-track]{background:var(--lr-app-rail-resizer-hover-bg,var(--lr-color-brand))}[part=resizer]:active [part=resizer-track]{background:var(--lr-app-rail-resizer-active-bg,color-mix(in oklab, var(--lr-color-brand), var(--lr-color-mix-partner) var(--lr-color-mix-active)))}[part=resizer]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:var(--lr-focus-ring-offset)}[part=panel]{z-index:calc(var(--lr-overlay-stack-index,var(--lr-layer-modal)) + 1);inline-size:min(var(--lr-app-rail-mobile-width,var(--_lr-app-rail-mobile-width)), 85vw);background:var(--lr-color-surface-overlay);box-shadow:var(--lr-shadow-l);transition:transform var(--lr-transition-base);flex-direction:column;padding-block-end:var(--lr-safe-area-bottom);display:flex;position:fixed;inset-block:0;inset-inline-start:0;overflow:clip auto;transform:translate(-100%)}:host(:dir(rtl)) [part=panel]{transform:translate(100%)}:host([mode=mobile][open]) [part=panel]{transform:none}[part=header]{padding:var(--lr-space-m);border-block-end:var(--lr-border-width-thin) solid var(--lr-color-border)}[part=header][hidden]{display:none}[part=footer]{padding:var(--lr-space-m);border-block-start:var(--lr-border-width-thin) solid var(--lr-color-border)}[part=footer][hidden]{display:none}[part=nav]{padding:var(--lr-space-s);gap:var(--lr-space-xs);flex-direction:column;flex:auto;display:flex;overflow:clip auto}:host([mode=icon-only]) [part=nav]{align-items:center}:host([mode=icon-only]) ::slotted(lr-app-rail-item){max-inline-size:var(--lr-app-rail-icon-width,var(--_lr-app-rail-icon-width))}@media (prefers-reduced-motion:reduce){[part=base],[part=panel],[part=resizer-track]{transition:none!important}}`;export{styles};
+import{css}from"lit";const styles=css`:host{--_lr-app-rail-width:var(--lr-size-15rem);--_lr-app-rail-icon-width:var(--lr-size-4rem);--_lr-app-rail-mobile-width:var(--lr-size-18rem);--_lr-app-rail-overlay-color:var(--lr-color-overlay);display:block;position:relative}[part=toggle]{font:inherit;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-radius);background:var(--lr-color-surface);color:var(--lr-color-text);cursor:pointer;justify-content:center;align-items:center;display:none}:host([mode=mobile]) [part=toggle]{display:inline-flex}:host([hide-toggle][mode=mobile]) [part=toggle]{display:none}:host([mode=mobile][open]) [part=toggle]{z-index:calc(var(--lr-overlay-stack-index,var(--lr-layer-modal)) + 2);position:relative}[part=toggle]:hover{background:var(--lr-app-rail-toggle-hover-bg,var(--lr-color-brand-quiet));color:var(--lr-app-rail-toggle-hover-color,var(--lr-color-brand))}[part=toggle]:active{background:var(--lr-app-rail-toggle-active-bg,color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active)));color:var(--lr-app-rail-toggle-active-color,var(--lr-color-brand))}[part=toggle]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:var(--lr-focus-ring-offset)}[part=backdrop]{z-index:var(--lr-overlay-stack-index,var(--lr-layer-modal));background:var(--lr-app-rail-overlay-color,var(--_lr-app-rail-overlay-color));position:fixed;inset:0}[part=base]{inline-size:var(--lr-app-rail-width,var(--_lr-app-rail-width));border-inline-end:var(--lr-border-width-thin) solid var(--lr-color-border);background:var(--lr-color-surface);block-size:100%;transition:inline-size var(--lr-transition-base);flex-direction:column;padding-block-end:var(--lr-safe-area-bottom);display:flex;position:relative;overflow:clip auto}:host([mode=icon-only]) [part=base]{inline-size:var(--lr-app-rail-icon-width,var(--_lr-app-rail-icon-width))}:host([dragging]) [part=base]{transition:none}[part=resizer]{inline-size:var(--lr-icon-button-size);min-inline-size:var(--lr-icon-button-size);min-block-size:var(--lr-icon-button-size);cursor:col-resize;touch-action:none;background:0 0;justify-content:center;align-items:stretch;display:flex;position:absolute;inset-block:0;inset-inline-end:calc(var(--lr-icon-button-size) * -.5)}[part=resizer-track]{inline-size:var(--lr-size-3px);transition:background-color var(--lr-transition-fast);background:0 0}[part=resizer]:hover [part=resizer-track]{background:var(--lr-app-rail-resizer-hover-bg,var(--lr-color-brand))}[part=resizer]:active [part=resizer-track]{background:var(--lr-app-rail-resizer-active-bg,color-mix(in oklab, var(--lr-color-brand), var(--lr-color-mix-partner) var(--lr-color-mix-active)))}[part=resizer]:focus-visible{outline:var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);outline-offset:var(--lr-focus-ring-offset)}[part=panel]{z-index:calc(var(--lr-overlay-stack-index,var(--lr-layer-modal)) + 1);inline-size:min(var(--lr-app-rail-mobile-width,var(--_lr-app-rail-mobile-width)), 85vw);background:var(--lr-color-surface-overlay);box-shadow:var(--lr-shadow-l);transition:transform var(--lr-transition-base);flex-direction:column;padding-block-end:var(--lr-safe-area-bottom);display:flex;position:fixed;inset-block:0;inset-inline-start:0;overflow:clip auto;transform:translate(-100%)}:host(:dir(rtl)) [part=panel]{transform:translate(100%)}:host([mode=mobile][open]) [part=panel]{transform:none}[part=header]{padding:var(--lr-space-m);border-block-end:var(--lr-border-width-thin) solid var(--lr-color-border)}[part=header][hidden]{display:none}[part=footer]{padding:var(--lr-space-m);border-block-start:var(--lr-border-width-thin) solid var(--lr-color-border)}[part=footer][hidden]{display:none}[part=nav]{padding:var(--lr-space-s);gap:var(--lr-space-xs);flex-direction:column;flex:auto;display:flex;overflow:clip auto}:host([mode=icon-only]) [part=nav]{align-items:center}:host([mode=icon-only]) ::slotted(lr-app-rail-item){max-inline-size:var(--lr-app-rail-icon-width,var(--_lr-app-rail-icon-width))}@media (prefers-reduced-motion:reduce){[part=base],[part=panel],[part=resizer-track]{transition:none!important}}`;export{styles};

package/dist/components/layout/command-palette/command-palette.class.d.ts

@@ -76,10 +76,10 @@ hotkey:string;
 accessibleLabel?:string;private queryText;private activeIndex;private listScrollTop;private listViewportHeight;private rowPitch;private groupPitch;private listId;private overlay?;private activeCommandId?;private listResizeObserver?;private observedList?;private observedRow?;private observedGroup?;private rowPitchFrame?;private listScrollFrame?;
 /** Window that owns listeners, observers, and animation frames for the current connection. */
 private runtimeWindow?;
-/** The `commands` array `haystacks` was built from -- reference-keyed memo, since `commands`
+/** The canonical command view `haystacks` was built from -- reference-keyed memo, since `commands`
 *  only ever changes by reassignment (it's `attribute: false`; in-place mutation wouldn't
 *  trigger a re-render either). */
-private haystacksFor?;private haystacksLocale;private haystacks;private filteredForCommands?;private filteredForQuery;private filteredForLocale;private filteredRows;private normalizedForCommands?;private normalizedRows;private normalizedCommandIds;private resultModelFor?;private resultModelRowPitch?;private resultModelGroupPitch?;private resultModelCache?;private openRequestTarget?;
+private haystacksFor?;private haystacksLocale;private haystacks;private filteredForCommands?;private filteredForQuery;private filteredForLocale;private filteredRows;private normalizedForCommands?;private normalizedRows;private resultModelFor?;private resultModelRowPitch?;private resultModelGroupPitch?;private resultModelCache?;private openRequestTarget?;
 /** Canonical command collection consumed by search, focus, rendering, and activation. Keeping
 *  the first valid occurrence makes duplicate handling deterministic while retaining caller
 *  object identity in `lr-select` and `onSelect`. */