@aceshooting/lyra-ui 28.1.3 → 28.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +28 -0
- package/design-tokens.json +1 -1
- package/dist/components/data/pagination/pagination.styles.js +1 -1
- package/dist/components/forms/textarea/textarea.styles.js +1 -1
- package/dist/components/layout/tab-group/tab-group.class.d.ts +1 -1
- package/dist/components/layout/tab-group/tab-group.class.js +4 -3
- package/dist/components/layout/tab-group/tab-group.styles.js +1 -1
- package/dist/components/utility/copy-button/copy-button.styles.js +1 -1
- package/dist/components/utility/visually-hidden/visually-hidden.styles.js +1 -1
- package/dist/internal/a11y.d.ts +7 -5
- package/dist/internal/a11y.js +1 -1
- package/dist/internal/announcer.js +1 -1
- package/dist/internal/package-metadata.js +1 -1
- package/dist/styles/utilities.css +1 -1
- package/llms/peers.md +1 -1
- package/locales.json +2 -2
- package/package.json +2 -2
- package/skills/lyra-ui/SKILL.md +3 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
import{visuallyHidden}from"../../../internal/a11y.js";import{focusRing}from"../../../internal/interactive-control.styles.js";import{css}from"lit";import{compactContainerQuery}from"../../../internal/container-breakpoints.styles.js";const styles=css` :host { display: block; min-inline-size: 0; container-type: inline-size; contain-intrinsic-inline-size: var(--lr-size-20rem); --_lr-pagination-control-size: var( --lr-form-control-height, var(--lr-size-2-5rem) ); --_lr-pagination-font-size: var( --lr-form-control-font-size, var(--lr-font-size-m) ); --_lr-pagination-control-radius: var(--lr-radius); --_lr-pagination-control-padding: var(--lr-space-xs); --_lr-pagination-control-bg-default: var(--lr-color-surface); --_lr-pagination-control-border-color-default: var(--lr-color-border); } :host([appearance="filled"]) { --_lr-pagination-control-bg-default: var(--lr-color-surface-raised); --_lr-pagination-control-border-color-default: transparent; } :host([appearance="filled-outlined"]) { --_lr-pagination-control-bg-default: var(--lr-color-surface-raised); --_lr-pagination-control-border-color-default: var(--lr-color-border); } :host([appearance="plain"]) { --_lr-pagination-control-bg-default: transparent; --_lr-pagination-control-border-color-default: transparent; } :host([appearance="accent"]) { --_lr-pagination-control-bg-default: var(--lr-color-brand-quiet); --_lr-pagination-control-border-color-default: var(--lr-color-brand); } [part~="base"] { display: flex; align-items: center; justify-content: space-between; gap: var(--lr-pagination-base-gap, var(--lr-space-m)); min-inline-size: 0; font-size: var(--lr-pagination-font-size, var(--_lr-pagination-font-size)); } [part="summary"] { min-inline-size: 0; color: var(--lr-color-text-quiet); overflow-wrap: anywhere; } [part="controls"] { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; gap: var(--lr-pagination-controls-gap, var(--lr-space-xs)); } [part="pages"] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lr-pagination-pages-gap, var(--lr-space-xs)); min-inline-size: 0; margin: 0; padding: 0; list-style: none; } [part="pages"] > li { display: flex; } [part~="first-button"], [part~="previous-button"], [part~="next-button"], [part~="last-button"], [part~="ellipsis"], [part~="page"] { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; inline-size: max( var(--lr-pagination-control-size, var(--_lr-pagination-control-size)), var(--lr-icon-button-size) ); min-inline-size: var(--lr-icon-button-size); block-size: max( var(--lr-pagination-control-size, var(--_lr-pagination-control-size)), var(--lr-icon-button-size) ); min-block-size: var(--lr-icon-button-size); padding: var( --lr-pagination-control-padding, var(--_lr-pagination-control-padding) ); border: var(--lr-border-width-thin) solid var( --lr-pagination-control-border-color, var(--_lr-pagination-control-border-color-default) ); border-radius: var( --lr-pagination-control-radius, var(--_lr-pagination-control-radius) ); background: var( --lr-pagination-control-bg, var(--_lr-pagination-control-bg-default) ); color: var(--lr-pagination-control-color, var(--lr-color-text)); font: inherit; text-decoration: none; cursor: pointer; transition: background-color var(--lr-transition-fast), border-color var(--lr-transition-fast); } [part~="page"] { inline-size: auto; } [part~="page-current"] { border-color: var(--lr-pagination-current-border-color, transparent); background: var(--lr-pagination-current-bg, var(--lr-color-brand)); color: var(--lr-pagination-current-color, var(--lr-color-on-brand)); font-weight: var(--lr-font-weight-bold); transition: background-color var(--lr-transition-fast), border-color var(--lr-transition-fast); } [part~="ellipsis"] { color: var(--lr-color-text-quiet); } [part~="first-button"]:where(:hover):where(:not(:disabled)):where( :not([aria-disabled="true"]) ), [part~="previous-button"]:where(:hover):where(:not(:disabled)):where( :not([aria-disabled="true"]) ), [part~="next-button"]:where(:hover):where(:not(:disabled)):where( :not([aria-disabled="true"]) ), [part~="last-button"]:where(:hover):where(:not(:disabled)):where( :not([aria-disabled="true"]) ), [part~="ellipsis"]:where(:hover):where(:not(:disabled)):where( :not([aria-disabled="true"]) ), [part~="page"]:where(:hover):where(:not(:disabled)):where( :not([aria-disabled="true"]) ):where(:not([part~="page-current"])) { background: var(--lr-pagination-hover-bg, var(--lr-color-brand-quiet)); border-color: var( --lr-pagination-hover-border-color, var(--lr-color-brand) ); } [part~="first-button"]:where(:active):where(:not(:disabled)):where( :not([aria-disabled="true"]) ), [part~="previous-button"]:where(:active):where(:not(:disabled)):where( :not([aria-disabled="true"]) ), [part~="next-button"]:where(:active):where(:not(:disabled)):where( :not([aria-disabled="true"]) ), [part~="last-button"]:where(:active):where(:not(:disabled)):where( :not([aria-disabled="true"]) ), [part~="ellipsis"]:where(:active):where(:not(:disabled)):where( :not([aria-disabled="true"]) ), [part~="page"]:where(:active):where(:not(:disabled)):where( :not([aria-disabled="true"]) ):where(:not([part~="page-current"])) { background: var( --lr-pagination-active-bg, color-mix( in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ); border-color: var( --lr-pagination-active-border-color, var(--lr-color-brand) ); } [part~="page-current"]:where(:hover) { background: var( --lr-pagination-current-hover-bg, var(--lr-pagination-current-bg, var(--lr-color-brand)) ); border-color: var( --lr-pagination-current-hover-border-color, var(--lr-pagination-current-border-color, transparent) ); } [part~="page-current"]:where(:active) { background: var( --lr-pagination-current-active-bg, color-mix( in oklab, var(--lr-pagination-current-bg, var(--lr-color-brand)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ); border-color: var( --lr-pagination-current-active-border-color, var(--lr-pagination-current-border-color, transparent) ); } [part~="first-button"]:where(:focus-visible), [part~="previous-button"]:where(:focus-visible), [part~="next-button"]:where(:focus-visible), [part~="last-button"]:where(:focus-visible), [part~="ellipsis"]:where(:focus-visible), [part~="page"]:where(:focus-visible), [part="page-input"]:where(:focus-visible) { ${focusRing} } [part~="first-button"]:where(:disabled), [part~="previous-button"]:where(:disabled), [part~="next-button"]:where(:disabled), [part~="last-button"]:where(:disabled), [part~="ellipsis"]:where(:disabled), [part~="page"]:where(:disabled), [part="page-input"]:where(:disabled) { cursor: not-allowed; opacity: var(--lr-opacity-disabled); } [part~="button"]:where([aria-disabled="true"]) { cursor: not-allowed; opacity: var(--lr-opacity-disabled); } [part="first-icon"], [part="previous-icon"], [part="next-icon"], [part="last-icon"] { display: inline-flex; align-items: center; justify-content: center; line-height: var(--lr-line-height-none); } [part="first-icon"] slot > svg + svg, [part="last-icon"] slot > svg + svg { margin-inline-start: var(--lr-size-neg-4px); } [part="first-icon"], [part="previous-icon"] { transform: rotate(180deg); } [part="next-icon"], [part="last-icon"] { transform: rotate(0deg); } :host(:dir(rtl)) [part="first-icon"], :host(:dir(rtl)) [part="previous-icon"] { transform: rotate(0deg); } :host(:dir(rtl)) [part="next-icon"], :host(:dir(rtl)) [part="last-icon"] { transform: rotate(180deg); } [part~="page-field"] { display: inline-flex; align-items: center; gap: var(--lr-pagination-page-field-gap, var(--lr-space-2xs)); color: var(--lr-color-text-quiet); white-space: nowrap; } [part="page-input"] { box-sizing: border-box; inline-size: max( var(--lr-pagination-control-size, var(--_lr-pagination-control-size)), var(--lr-icon-button-size) ); min-inline-size: var(--lr-icon-button-size); block-size: max( var(--lr-pagination-control-size, var(--_lr-pagination-control-size)), var(--lr-icon-button-size) ); min-block-size: var(--lr-icon-button-size); padding: var( --lr-pagination-control-padding, var(--_lr-pagination-control-padding) ); border: var(--lr-border-width-thin) solid var(--lr-color-border); border-radius: var( --lr-pagination-control-radius, var(--_lr-pagination-control-radius) ); background: var(--lr-color-surface); color: var(--lr-pagination-control-color, var(--lr-color-text)); font: inherit; text-align: center; transition: background-color var(--lr-transition-fast), border-color var(--lr-transition-fast); } [part="page-input"] { appearance: textfield; } [part="page-input"]::-webkit-inner-spin-button, [part="page-input"]::-webkit-outer-spin-button { appearance: none; margin: 0; } [part="page-input"]:where(:hover):where(:not(:disabled)) { background: var(--lr-pagination-hover-bg, var(--lr-color-brand-quiet)); border-color: var( --lr-pagination-hover-border-color, var(--lr-color-brand) ); } [part="page-input"]:where(:active):where(:not(:disabled)) { background: var( --lr-pagination-active-bg, color-mix( in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ); border-color: var( --lr-pagination-active-border-color, var(--lr-color-brand) ); } [part="page-input"]:where([aria-invalid="true"]) { border-color: var(--lr-pagination-invalid-border, var(--lr-color-danger)); } [part="live-region"].sr-only { ${visuallyHidden}
|
|
1
|
+
import{visuallyHidden}from"../../../internal/a11y.js";import{focusRing}from"../../../internal/interactive-control.styles.js";import{css}from"lit";import{compactContainerQuery}from"../../../internal/container-breakpoints.styles.js";const styles=css` :host { display: block; min-inline-size: 0; container-type: inline-size; contain-intrinsic-inline-size: var(--lr-size-20rem); --_lr-pagination-control-size: var( --lr-form-control-height, var(--lr-size-2-5rem) ); --_lr-pagination-font-size: var( --lr-form-control-font-size, var(--lr-font-size-m) ); --_lr-pagination-control-radius: var(--lr-radius); --_lr-pagination-control-padding: var(--lr-space-xs); --_lr-pagination-control-bg-default: var(--lr-color-surface); --_lr-pagination-control-border-color-default: var(--lr-color-border); } :host([appearance="filled"]) { --_lr-pagination-control-bg-default: var(--lr-color-surface-raised); --_lr-pagination-control-border-color-default: transparent; } :host([appearance="filled-outlined"]) { --_lr-pagination-control-bg-default: var(--lr-color-surface-raised); --_lr-pagination-control-border-color-default: var(--lr-color-border); } :host([appearance="plain"]) { --_lr-pagination-control-bg-default: transparent; --_lr-pagination-control-border-color-default: transparent; } :host([appearance="accent"]) { --_lr-pagination-control-bg-default: var(--lr-color-brand-quiet); --_lr-pagination-control-border-color-default: var(--lr-color-brand); } [part~="base"] { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--lr-pagination-base-gap, var(--lr-space-m)); min-inline-size: 0; font-size: var(--lr-pagination-font-size, var(--_lr-pagination-font-size)); } [part="summary"] { min-inline-size: 0; color: var(--lr-color-text-quiet); overflow-wrap: anywhere; } [part="controls"] { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; gap: var(--lr-pagination-controls-gap, var(--lr-space-xs)); } [part="pages"] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lr-pagination-pages-gap, var(--lr-space-xs)); min-inline-size: 0; margin: 0; padding: 0; list-style: none; } [part="pages"] > li { display: flex; } [part~="first-button"], [part~="previous-button"], [part~="next-button"], [part~="last-button"], [part~="ellipsis"], [part~="page"] { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; inline-size: max( var(--lr-pagination-control-size, var(--_lr-pagination-control-size)), var(--lr-icon-button-size) ); min-inline-size: var(--lr-icon-button-size); block-size: max( var(--lr-pagination-control-size, var(--_lr-pagination-control-size)), var(--lr-icon-button-size) ); min-block-size: var(--lr-icon-button-size); padding: var( --lr-pagination-control-padding, var(--_lr-pagination-control-padding) ); border: var(--lr-border-width-thin) solid var( --lr-pagination-control-border-color, var(--_lr-pagination-control-border-color-default) ); border-radius: var( --lr-pagination-control-radius, var(--_lr-pagination-control-radius) ); background: var( --lr-pagination-control-bg, var(--_lr-pagination-control-bg-default) ); color: var(--lr-pagination-control-color, var(--lr-color-text)); font: inherit; text-decoration: none; cursor: pointer; transition: background-color var(--lr-transition-fast), border-color var(--lr-transition-fast); } [part~="page"] { inline-size: auto; } [part~="page-current"] { border-color: var(--lr-pagination-current-border-color, transparent); background: var(--lr-pagination-current-bg, var(--lr-color-brand)); color: var(--lr-pagination-current-color, var(--lr-color-on-brand)); font-weight: var(--lr-font-weight-bold); transition: background-color var(--lr-transition-fast), border-color var(--lr-transition-fast); } [part~="ellipsis"] { color: var(--lr-color-text-quiet); } [part~="first-button"]:where(:hover):where(:not(:disabled)):where( :not([aria-disabled="true"]) ), [part~="previous-button"]:where(:hover):where(:not(:disabled)):where( :not([aria-disabled="true"]) ), [part~="next-button"]:where(:hover):where(:not(:disabled)):where( :not([aria-disabled="true"]) ), [part~="last-button"]:where(:hover):where(:not(:disabled)):where( :not([aria-disabled="true"]) ), [part~="ellipsis"]:where(:hover):where(:not(:disabled)):where( :not([aria-disabled="true"]) ), [part~="page"]:where(:hover):where(:not(:disabled)):where( :not([aria-disabled="true"]) ):where(:not([part~="page-current"])) { background: var(--lr-pagination-hover-bg, var(--lr-color-brand-quiet)); border-color: var( --lr-pagination-hover-border-color, var(--lr-color-brand) ); } [part~="first-button"]:where(:active):where(:not(:disabled)):where( :not([aria-disabled="true"]) ), [part~="previous-button"]:where(:active):where(:not(:disabled)):where( :not([aria-disabled="true"]) ), [part~="next-button"]:where(:active):where(:not(:disabled)):where( :not([aria-disabled="true"]) ), [part~="last-button"]:where(:active):where(:not(:disabled)):where( :not([aria-disabled="true"]) ), [part~="ellipsis"]:where(:active):where(:not(:disabled)):where( :not([aria-disabled="true"]) ), [part~="page"]:where(:active):where(:not(:disabled)):where( :not([aria-disabled="true"]) ):where(:not([part~="page-current"])) { background: var( --lr-pagination-active-bg, color-mix( in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ); border-color: var( --lr-pagination-active-border-color, var(--lr-color-brand) ); } [part~="page-current"]:where(:hover) { background: var( --lr-pagination-current-hover-bg, var(--lr-pagination-current-bg, var(--lr-color-brand)) ); border-color: var( --lr-pagination-current-hover-border-color, var(--lr-pagination-current-border-color, transparent) ); } [part~="page-current"]:where(:active) { background: var( --lr-pagination-current-active-bg, color-mix( in oklab, var(--lr-pagination-current-bg, var(--lr-color-brand)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ); border-color: var( --lr-pagination-current-active-border-color, var(--lr-pagination-current-border-color, transparent) ); } [part~="first-button"]:where(:focus-visible), [part~="previous-button"]:where(:focus-visible), [part~="next-button"]:where(:focus-visible), [part~="last-button"]:where(:focus-visible), [part~="ellipsis"]:where(:focus-visible), [part~="page"]:where(:focus-visible), [part="page-input"]:where(:focus-visible) { ${focusRing} } [part~="first-button"]:where(:disabled), [part~="previous-button"]:where(:disabled), [part~="next-button"]:where(:disabled), [part~="last-button"]:where(:disabled), [part~="ellipsis"]:where(:disabled), [part~="page"]:where(:disabled), [part="page-input"]:where(:disabled) { cursor: not-allowed; opacity: var(--lr-opacity-disabled); } [part~="button"]:where([aria-disabled="true"]) { cursor: not-allowed; opacity: var(--lr-opacity-disabled); } [part="first-icon"], [part="previous-icon"], [part="next-icon"], [part="last-icon"] { display: inline-flex; align-items: center; justify-content: center; line-height: var(--lr-line-height-none); } [part="first-icon"] slot > svg + svg, [part="last-icon"] slot > svg + svg { margin-inline-start: var(--lr-size-neg-4px); } [part="first-icon"], [part="previous-icon"] { transform: rotate(180deg); } [part="next-icon"], [part="last-icon"] { transform: rotate(0deg); } :host(:dir(rtl)) [part="first-icon"], :host(:dir(rtl)) [part="previous-icon"] { transform: rotate(0deg); } :host(:dir(rtl)) [part="next-icon"], :host(:dir(rtl)) [part="last-icon"] { transform: rotate(180deg); } [part~="page-field"] { display: inline-flex; align-items: center; gap: var(--lr-pagination-page-field-gap, var(--lr-space-2xs)); color: var(--lr-color-text-quiet); white-space: nowrap; } [part="page-input"] { box-sizing: border-box; inline-size: max( var(--lr-pagination-control-size, var(--_lr-pagination-control-size)), var(--lr-icon-button-size) ); min-inline-size: var(--lr-icon-button-size); block-size: max( var(--lr-pagination-control-size, var(--_lr-pagination-control-size)), var(--lr-icon-button-size) ); min-block-size: var(--lr-icon-button-size); padding: var( --lr-pagination-control-padding, var(--_lr-pagination-control-padding) ); border: var(--lr-border-width-thin) solid var(--lr-color-border); border-radius: var( --lr-pagination-control-radius, var(--_lr-pagination-control-radius) ); background: var(--lr-color-surface); color: var(--lr-pagination-control-color, var(--lr-color-text)); font: inherit; text-align: center; transition: background-color var(--lr-transition-fast), border-color var(--lr-transition-fast); } [part="page-input"] { appearance: textfield; } [part="page-input"]::-webkit-inner-spin-button, [part="page-input"]::-webkit-outer-spin-button { appearance: none; margin: 0; } [part="page-input"]:where(:hover):where(:not(:disabled)) { background: var(--lr-pagination-hover-bg, var(--lr-color-brand-quiet)); border-color: var( --lr-pagination-hover-border-color, var(--lr-color-brand) ); } [part="page-input"]:where(:active):where(:not(:disabled)) { background: var( --lr-pagination-active-bg, color-mix( in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ); border-color: var( --lr-pagination-active-border-color, var(--lr-color-brand) ); } [part="page-input"]:where([aria-invalid="true"]) { border-color: var(--lr-pagination-invalid-border, var(--lr-color-danger)); } [part="live-region"].sr-only { ${visuallyHidden} } @container ${compactContainerQuery} { [part~="base"] { flex-direction: column; align-items: stretch; } [part="controls"] { justify-content: space-between; } } `;export{styles};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{visuallyHidden}from"../../../internal/a11y.js";import{css}from"lit";import{formControlTextWrap,formControlChrome,formControlAppearance,formControlFocusHalo,formControlRequiredMarker}from"../../../internal/form-control.styles.js";const styles=css` :host { display: block; --_lr-textarea-max-block-size: none; --_lr-textarea-padding: var(--lr-form-control-padding-inline); --_lr-textarea-font-size: var(--lr-form-control-font-size); --_lr-textarea-radius: var(--lr-form-control-radius); --_lr-textarea-fill: var(--_lr-form-control-fill); --_lr-textarea-border-color: var(--_lr-form-control-border-color); --_lr-form-control-focus-shadow: var(--lr-form-control-focus-shadow, none); } :host([pill]) { --_lr-textarea-radius: var(--lr-radius-pill); } ${formControlAppearance} [part="form-control"] { display: flex; flex-direction: column; min-inline-size: 0; block-size: 100%; } ${formControlChrome} ${formControlRequiredMarker} [part~='textarea-wrapper'] { display: flex; flex-direction: column; flex: 1 1 auto; min-inline-size: 0; min-block-size: 0; block-size: 100%; } [part="textarea"] { display: block; flex: 0 1 auto; min-block-size: 0; inline-size: 100%; block-size: 100%; box-sizing: border-box; padding: var(--lr-textarea-padding, var(--_lr-textarea-padding)); border: var(--lr-border-width-thin) solid var(--lr-textarea-border-color, var(--_lr-textarea-border-color)); border-radius: var(--lr-textarea-radius, var(--_lr-textarea-radius)); background: var(--lr-textarea-fill, var(--_lr-textarea-fill)); color: var(--lr-color-text); font: inherit; font-size: var(--lr-textarea-font-size, var(--_lr-textarea-font-size)); line-height: var(--lr-line-height-normal); transition: border-color var(--lr-transition-fast); } [part="textarea"][data-auto-resize] { max-block-size: var( --lr-textarea-max-block-size, var(--_lr-textarea-max-block-size) ); } [part="textarea"]:focus { outline: none; border-color: var(--lr-textarea-focus-border-color, var(--lr-color-brand)); ${formControlFocusHalo} } :host(:not(:disabled)) [part="textarea"]:hover { border-color: var(--lr-textarea-hover-border-color, var(--lr-color-brand)); } [part="textarea"]:disabled { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part="textarea"]::placeholder { color: var(--lr-color-text-quiet); } [part="footer"] { display: flex; justify-content: flex-end; margin-block-start: var(--lr-space-xs); } [part="footer"][hidden] { display: none; } [part="count"] { font-size: var(--lr-font-size-sm); color: var(--lr-color-text-quiet); } .count-announcement { ${visuallyHidden}
|
|
1
|
+
import{visuallyHidden}from"../../../internal/a11y.js";import{css}from"lit";import{formControlTextWrap,formControlChrome,formControlAppearance,formControlFocusHalo,formControlRequiredMarker}from"../../../internal/form-control.styles.js";const styles=css` :host { display: block; --_lr-textarea-max-block-size: none; --_lr-textarea-padding: var(--lr-form-control-padding-inline); --_lr-textarea-font-size: var(--lr-form-control-font-size); --_lr-textarea-radius: var(--lr-form-control-radius); --_lr-textarea-fill: var(--_lr-form-control-fill); --_lr-textarea-border-color: var(--_lr-form-control-border-color); --_lr-form-control-focus-shadow: var(--lr-form-control-focus-shadow, none); } :host([pill]) { --_lr-textarea-radius: var(--lr-radius-pill); } ${formControlAppearance} [part="form-control"] { display: flex; flex-direction: column; min-inline-size: 0; block-size: 100%; } ${formControlChrome} ${formControlRequiredMarker} [part~='textarea-wrapper'] { display: flex; flex-direction: column; flex: 1 1 auto; min-inline-size: 0; min-block-size: 0; block-size: 100%; } [part="textarea"] { display: block; flex: 0 1 auto; min-block-size: 0; inline-size: 100%; block-size: 100%; box-sizing: border-box; padding: var(--lr-textarea-padding, var(--_lr-textarea-padding)); border: var(--lr-border-width-thin) solid var(--lr-textarea-border-color, var(--_lr-textarea-border-color)); border-radius: var(--lr-textarea-radius, var(--_lr-textarea-radius)); background: var(--lr-textarea-fill, var(--_lr-textarea-fill)); color: var(--lr-color-text); font: inherit; font-size: var(--lr-textarea-font-size, var(--_lr-textarea-font-size)); line-height: var(--lr-line-height-normal); transition: border-color var(--lr-transition-fast); } [part="textarea"][data-auto-resize] { max-block-size: var( --lr-textarea-max-block-size, var(--_lr-textarea-max-block-size) ); } [part="textarea"]:focus { outline: none; border-color: var(--lr-textarea-focus-border-color, var(--lr-color-brand)); ${formControlFocusHalo} } :host(:not(:disabled)) [part="textarea"]:hover { border-color: var(--lr-textarea-hover-border-color, var(--lr-color-brand)); } [part="textarea"]:disabled { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part="textarea"]::placeholder { color: var(--lr-color-text-quiet); } [part="footer"] { display: flex; justify-content: flex-end; margin-block-start: var(--lr-space-xs); } [part="footer"][hidden] { display: none; } [part="count"] { font-size: var(--lr-font-size-sm); color: var(--lr-color-text-quiet); } .count-announcement { ${visuallyHidden} } [part="form-control"], [part="form-control-label"], [part~="hint"], [part="error"], [part="footer"] { ${formControlTextWrap} } `;export{styles};
|
|
@@ -163,7 +163,7 @@ fixedScrollControls:boolean;
|
|
|
163
163
|
* writable `@query` field rather than a readonly `get`: `wa-tab-group` declares it writable, and
|
|
164
164
|
* check-pinned-upstream-manifests treats a readonly-vs-writable difference on a mirrored member
|
|
165
165
|
* as an `unsupported` surface drift -- a release blocker. */
|
|
166
|
-
defaultSlot:HTMLSlotElement;private tabs;private focusedTab;private baseId;private nextOpaqueId;private readonly idsBySlot;private mutationObserver?;private mutationObserverDocument?;private mutationObserverGeneration;private readonly projectedSourceSnapshots;private readonly projectedSlotSnapshots;private projectedSourceObserver?;private projectedSourceObserverDocument?;private projectedSourceObserverGeneration;private rehomeTabFocus;private scrollStartAvailable;private scrollEndAvailable;private scrollOverflow;connectedCallback():void;disconnectedCallback():void;adoptedCallback():void;private resetMutationObserver;private syncTabs;private readElementModel;private readElementLabel;private libraryOwnsSourceInert;private isTabLabelSubtreeExcluded;private snapshotProjectedSource;private adoptProjectedSourceInert;private makeProjectedSourceInert;private restoreProjectedSource;private restoreProjectedSources;private resetProjectedSourceObserver;private observeProjectedSources;private projectedSources;private syncProjectedSources;private adoptProjectedSourceInertStates;private snapshotProjectedSlot;private adoptProjectedSlot;private projectSlot;private restoreProjectedSlot;private syncProjectedSlots;private restoreProjectedSlots;private adoptProjectedSlotStates;private isNavigable;
|
|
166
|
+
defaultSlot:HTMLSlotElement;private tabs;private focusedTab;private baseId;private nextOpaqueId;private readonly idsBySlot;private mutationObserver?;private mutationObserverDocument?;private mutationObserverGeneration;private projectionGeneration;private projectionTimer?;private projectionTimerWindow?;private projectionPending;private projectionSettlement?;private resolveProjectionSettlement?;private stagingSlotName;private pendingDescriptorUpdates;private readonly excludedUnnamedDescriptors;private readonly descriptorUpgrades;private readonly restoredSourceInertWrites;private readonly restoredSlotWrites;private readonly projectedSourceSnapshots;private readonly projectedSlotSnapshots;private projectedSourceObserver?;private projectedSourceObserverDocument?;private projectedSourceObserverGeneration;private rehomeTabFocus;private scrollStartAvailable;private scrollEndAvailable;private scrollOverflow;connectedCallback():void;disconnectedCallback():void;adoptedCallback():void;private resetProjectionReconciliation;private beginProjectionSettlement;private settleProjection;private queueProjectionReconciliation;private waitForDescriptorUpdate;private resetMutationObserver;private syncTabs;private readElementModel;private readElementLabel;private libraryOwnsSourceInert;private isTabLabelSubtreeExcluded;private snapshotProjectedSource;private adoptProjectedSourceInert;private makeProjectedSourceInert;private restoreProjectedSource;private restoreProjectedSources;private resetProjectedSourceObserver;private observeProjectedSources;private projectedSources;private syncProjectedSources;private adoptProjectedSourceInertStates;private snapshotProjectedSlot;private adoptProjectedSlot;private projectSlot;private restoreProjectedSlot;private syncProjectedSlots;private restoreProjectedSlots;private adoptProjectedSlotStates;private isNavigable;
|
|
167
167
|
/** Keeps `active` resolved to a real, navigable tab -- covers the initial default, a tab disappearing/becoming disabled or inert underneath the current selection, and a consumer assigning `.active` directly. Only a rendered selection displaced by its tab leaving reports `lr-tab-hide`/`lr-tab-show`, moving to the following tab (else the preceding one); the initial default and a direct `.active` write stay silent. Reading the focused element *before* the render that marks the outgoing button `inert` is what lets `updated()` rehome real focus rather than leaving it stranded on `<body>`. */
|
|
168
168
|
protected willUpdate(changed:PropertyValues):void;protected updated(changed:PropertyValues):void;private selectTab;private activateTab;
|
|
169
169
|
/** Show the panel named by an `<lr-tab panel>`. */
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{__decorate}from"tslib";import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{repeat}from"lit/directives/repeat.js";import{LyraElement}from"../../../internal/lyra-element.js";import{resolveListMove}from"../../../internal/list-navigation.js";import{nextId}from"../../../internal/a11y.js";import{composedAccessibilityText}from"../../../internal/accessibility-visibility.js";import{isHtmlElement}from"../../../internal/dom-guards.js";import{chevronIcon}from"../../../internal/icons.js";import{prefersReducedMotion}from"../../../internal/motion.js";import{tag}from"../../../internal/prefix.js";import{observeScrollOverflow}from"../../../internal/scroll-overflow.js";import{scrollOverflowFadeStyles}from"../../../internal/scroll-overflow.styles.js";import{styles}from"./tab-group.styles.js";import{shadowFocusTarget}from"../../../internal/active-element.js";import{LYRA_DEFAULT_scrollNext,LYRA_DEFAULT_scrollPrevious}from"../../../internal/default-strings/layout.generated.js";function isInertChild(child){return isHtmlElement(child)&&child.inert}function isTabLabelSubtreeExcludedWithoutInert(element){if(element.hasAttribute("hidden")||element.getAttribute("aria-hidden")?.trim().toLowerCase()==="true")return!0;const rendered=element.ownerDocument.defaultView?.getComputedStyle(element);return rendered?.display==="none"||rendered?.contentVisibility==="hidden"}const SYNTHETIC_PANEL_PREFIX="lr-tab-",SCROLL_STEP_RATIO=.8;class LyraTabGroup extends LyraElement{constructor(){super(...arguments),this.active="",this.accessibleLabel=null,this.placement="top",this.activation="auto",this.withoutScrollControls=!1,this.noScrollControls=!1,this.fixedScrollControls=!1,this.tabs=[],this.focusedTab="",this.baseId=nextId("tab-group"),this.nextOpaqueId=0,this.idsBySlot=new Map,this.mutationObserverGeneration=0,this.projectedSourceSnapshots=new Map,this.projectedSlotSnapshots=new Map,this.projectedSourceObserverGeneration=0,this.rehomeTabFocus=!1,this.scrollStartAvailable=!1,this.scrollEndAvailable=!1,this.scrollOverflow=observeScrollOverflow(this,()=>this.renderRoot.querySelector('[part~="tablist"]'),()=>this.measureTabScrollEdges()),this.syncTabs=()=>{const children=Array.from(this.children);this.adoptProjectedSourceInertStates(),this.adoptProjectedSlotStates();const projectedSlots=new Set,next=this.readElementModel(children,projectedSlots);this.syncProjectedSlots(projectedSlots),this.syncProjectedSources(next);const liveSlots=new Set(next.map(tab=>tab.slotName));for(const slotName of this.idsBySlot.keys())liveSlots.has(slotName)||this.idsBySlot.delete(slotName);this.tabs=next},this.onTabListKeyDown=e=>{if(e.altKey||e.ctrlKey||e.metaKey||e.isComposing)return;const navigable=this.tabs.filter(t=>this.isNavigable(t));if(navigable.length===0)return;const origin=this.keyboardOriginTab(e,navigable),currentIndex=origin?navigable.indexOf(origin):-1;if(e.key==="Delete"){if(!origin?.element.closable)return;e.preventDefault(),origin.element.requestCloseFromOwner();return}if(this.activation==="manual"&&(e.key==="Enter"||e.key===" "||e.key==="Spacebar")){if(!origin)return;e.preventDefault(),this.activateTab(origin);return}const targetIndex=resolveListMove(e,{count:navigable.length,current:currentIndex,orientation:this.isVertical?"vertical":"horizontal",direction:this.effectiveDirection});if(targetIndex===null)return;e.preventDefault();const target=navigable[targetIndex];if(this.activation==="manual"){this.focusOnly(target);return}this.activateTab(target),this.focusTab(target.slotName)},this.onTabListScroll=()=>{this.measureTabScrollEdges()},this.onScrollControlMouseDown=event=>{event.preventDefault()},this.onScrollControlPointerDown=event=>{const control=event.currentTarget;control instanceof HTMLElement&&(control.setAttribute("data-pressed",""),control.setPointerCapture(event.pointerId))},this.onScrollControlPointerEnd=event=>{const control=event.currentTarget;control instanceof HTMLElement&&(control.removeAttribute("data-pressed"),control.hasPointerCapture(event.pointerId)&&control.releasePointerCapture(event.pointerId))}}static{this.defaultStrings={...super.defaultStrings,scrollNext:LYRA_DEFAULT_scrollNext,scrollPrevious:LYRA_DEFAULT_scrollPrevious}}static{this.styles=[LyraElement.styles,scrollOverflowFadeStyles,styles]}connectedCallback(){super.connectedCallback(),this.hasUpdated?this.syncTabs():this.seedFirstRenderState(this.syncTabs),this.resetMutationObserver();const ownerDocument=this.ownerDocument,MutationObserverCtor=ownerDocument.defaultView?.MutationObserver;if(!MutationObserverCtor)return;const generation=this.mutationObserverGeneration,observer=new MutationObserverCtor(records=>{if(this.mutationObserver!==observer||this.mutationObserverDocument!==ownerDocument||this.mutationObserverGeneration!==generation||!this.isConnected||this.ownerDocument!==ownerDocument)return;const isDirectChild=node=>node.parentNode===this,isElementTabContent=node=>{let current=node.nodeType===1?node:node.parentElement;for(;current&¤t!==this;){if(current.localName===tag("tab")&¤t.parentNode===this)return!0;current=current.parentElement}return!1};records.some(record=>record.type==="childList"?record.target===this||isElementTabContent(record.target):record.type==="characterData"?isElementTabContent(record.target):record.attributeName==="inert"&&this.projectedSourceSnapshots.has(record.target)?!1:isDirectChild(record.target)||isElementTabContent(record.target))&&this.syncTabs()});this.mutationObserver=observer,this.mutationObserverDocument=ownerDocument,observer.observe(this,{childList:!0,subtree:!0,attributes:!0,characterData:!0,attributeFilter:["alt","aria-hidden","aria-label","aria-labelledby","class","closable","disabled","hidden","inert","id","label","name","open","panel","slot","style"]})}disconnectedCallback(){this.resetMutationObserver(),this.resetProjectedSourceObserver(),this.restoreProjectedSources(),this.restoreProjectedSlots(),super.disconnectedCallback()}adoptedCallback(){super.adoptedCallback(),this.resetMutationObserver(),this.resetProjectedSourceObserver()}resetMutationObserver(){this.mutationObserverGeneration+=1,this.mutationObserver?.disconnect(),this.mutationObserver=void 0,this.mutationObserverDocument=void 0}readElementModel(children,projectedSlots){const seen=new Set,next=[],panelsByName=new Map;for(const child of children){if(child.localName!==tag("tab-panel"))continue;const name=child.getAttribute("name");name!==null&&!panelsByName.has(name)&&panelsByName.set(name,child)}const authoredNames=new Set(children.flatMap(child=>{if(child.localName===tag("tab")){const name=child.getAttribute("panel");return name?[name]:[]}if(child.localName===tag("tab-panel")){const name=child.getAttribute("name");return name?[name]:[]}return[]}));let index=0;for(const child of children){if(child.localName!==tag("tab"))continue;const authoredPanel=child.getAttribute("panel")||void 0;let slotName=authoredPanel??`${SYNTHETIC_PANEL_PREFIX}${index}`;if(!authoredPanel){let collision=0;for(;authoredNames.has(slotName)||seen.has(slotName);)collision+=1,slotName=`${SYNTHETIC_PANEL_PREFIX}${index}-${collision}`}if(index+=1,!authoredPanel&&!this.readElementLabel(child,{allowUnprojected:!0})||seen.has(slotName))continue;seen.add(slotName);const tabSlot=this.tabSlotName(slotName);this.projectSlot(child,tabSlot,projectedSlots);const visibleLabel=this.readElementLabel(child);if(!authoredPanel&&!visibleLabel)continue;const label=visibleLabel||slotName,panel=panelsByName.get(slotName);panel&&this.projectSlot(panel,slotName,projectedSlots),next.push({slotName,label,disabled:child.hasAttribute("disabled"),inert:isInertChild(child),element:child}),!this.active&&child.hasAttribute("active")&&(this.active=slotName)}return next}readElementLabel(tab,options={}){const labelNodes=Array.from(tab.childNodes).filter(node=>node.nodeType!==Node.ELEMENT_NODE||node.getAttribute("slot")===null||node.getAttribute("slot")==="");return composedAccessibilityText(labelNodes,{ancestorBoundary:tab,isSubtreeExcluded:element=>this.isTabLabelSubtreeExcluded(element),requireRendered:!options.allowUnprojected,skipRootAncestorValidation:options.allowUnprojected,ignoreInheritedVisibility:!0}).replace(/\s+/g," ").trim()}libraryOwnsSourceInert(element){return this.projectedSourceSnapshots.get(element)?.libraryOwnsInert===!0}isTabLabelSubtreeExcluded(element){return isTabLabelSubtreeExcludedWithoutInert(element)||element.hasAttribute("inert")&&!this.libraryOwnsSourceInert(element)}snapshotProjectedSource(source){const inert=source.getAttribute("inert");return{inert,appliedInert:inert,libraryOwnsInert:!1}}adoptProjectedSourceInert(source,snapshot){const current=source.getAttribute("inert");current!==snapshot.appliedInert&&(snapshot.inert=current,snapshot.libraryOwnsInert=!1)}makeProjectedSourceInert(source,snapshot){source.hasAttribute("inert")||(source.setAttribute("inert",""),snapshot.libraryOwnsInert=!0),snapshot.appliedInert=source.getAttribute("inert")}restoreProjectedSource(source,snapshot){this.adoptProjectedSourceInert(source,snapshot),snapshot.inert===null?source.removeAttribute("inert"):source.setAttribute("inert",snapshot.inert)}restoreProjectedSources(){for(const[source,snapshot]of this.projectedSourceSnapshots)this.restoreProjectedSource(source,snapshot);this.projectedSourceSnapshots.clear()}resetProjectedSourceObserver(){this.projectedSourceObserverGeneration+=1,this.projectedSourceObserver?.disconnect(),this.projectedSourceObserver=void 0,this.projectedSourceObserverDocument=void 0}observeProjectedSources(){this.resetProjectedSourceObserver();const ownerDocument=this.ownerDocument,MutationObserverCtor=ownerDocument.defaultView?.MutationObserver;if(!MutationObserverCtor||!this.isConnected||this.projectedSourceSnapshots.size===0)return;const generation=this.projectedSourceObserverGeneration,observer=new MutationObserverCtor(records=>{this.projectedSourceObserver!==observer||this.projectedSourceObserverDocument!==ownerDocument||this.projectedSourceObserverGeneration!==generation||!this.isConnected||this.ownerDocument!==ownerDocument||records.some(record=>this.projectedSourceSnapshots.has(record.target))&&this.syncTabs()});this.projectedSourceObserver=observer,this.projectedSourceObserverDocument=ownerDocument;for(const source of this.projectedSourceSnapshots.keys())observer.observe(source,{attributes:!0,attributeFilter:["inert"]})}projectedSources(tabs){const sources=new Set;for(const tab of tabs)for(const child of Array.from(tab.element.children))(child.getAttribute("slot")??"")===""&&sources.add(child);return sources}syncProjectedSources(tabs){const sources=this.projectedSources(tabs);for(const[source,snapshot]of this.projectedSourceSnapshots)this.adoptProjectedSourceInert(source,snapshot),sources.has(source)||(this.restoreProjectedSource(source,snapshot),this.projectedSourceSnapshots.delete(source));for(const source of sources){const snapshot=this.projectedSourceSnapshots.get(source)??this.snapshotProjectedSource(source);this.projectedSourceSnapshots.set(source,snapshot),this.adoptProjectedSourceInert(source,snapshot),this.makeProjectedSourceInert(source,snapshot)}this.observeProjectedSources()}adoptProjectedSourceInertStates(){for(const[source,snapshot]of this.projectedSourceSnapshots)this.adoptProjectedSourceInert(source,snapshot)}snapshotProjectedSlot(source){const slot=source.getAttribute("slot");return{slot,appliedSlot:slot,libraryOwnsSlot:!1}}adoptProjectedSlot(source,snapshot){const current=source.getAttribute("slot");current!==snapshot.appliedSlot&&(snapshot.slot=current,snapshot.libraryOwnsSlot=!1)}projectSlot(source,slot,projectedSlots){const snapshot=this.projectedSlotSnapshots.get(source)??this.snapshotProjectedSlot(source);this.projectedSlotSnapshots.set(source,snapshot),this.adoptProjectedSlot(source,snapshot),source.getAttribute("slot")!==slot&&(source.setAttribute("slot",slot),snapshot.libraryOwnsSlot=!0),snapshot.appliedSlot=source.getAttribute("slot"),projectedSlots.add(source)}restoreProjectedSlot(source,snapshot){this.adoptProjectedSlot(source,snapshot),snapshot.slot===null?source.removeAttribute("slot"):source.setAttribute("slot",snapshot.slot)}syncProjectedSlots(projectedSlots){for(const[source,snapshot]of this.projectedSlotSnapshots)projectedSlots.has(source)||(this.restoreProjectedSlot(source,snapshot),this.projectedSlotSnapshots.delete(source))}restoreProjectedSlots(){for(const[source,snapshot]of this.projectedSlotSnapshots)this.restoreProjectedSlot(source,snapshot);this.projectedSlotSnapshots.clear()}adoptProjectedSlotStates(){for(const[source,snapshot]of this.projectedSlotSnapshots)this.adoptProjectedSlot(source,snapshot)}isNavigable(tab){return!tab.disabled&&!tab.inert}willUpdate(changed){if(super.willUpdate(changed),!changed.has("tabs")&&!changed.has("active"))return;const focused=shadowFocusTarget(this),focusedSlot=focused?.getAttribute("part")==="tab"?focused.getAttribute("data-slot"):null;focusedSlot!==null&&!this.tabs.some(tab=>tab.slotName===focusedSlot&&this.isNavigable(tab))&&(this.rehomeTabFocus=!0,this.focusedTab=this.active);const current=this.tabs.find(t=>t.slotName===this.active);if(current&&this.isNavigable(current))return;this.rehomeTabFocus=this.rehomeTabFocus||focusedSlot!==null;const outgoing=this.active,before=changed.get("tabs")??this.tabs,at=this.hasUpdated&&changed.has("tabs")&&!changed.has("active")?before.findIndex(t=>t.slotName===outgoing):-1,renamed=at<0?void 0:this.tabs.find(t=>t.element===before[at].element&&this.isNavigable(t));let candidates=this.tabs;if(at>=0){const liveByName=new Map;for(const tab of this.tabs)liveByName.has(tab.slotName)||liveByName.set(tab.slotName,tab);candidates=[...before.slice(at+1),...before.slice(0,at).reverse()].map(tab=>liveByName.get(tab.slotName))}this.active=(renamed??candidates.find(t=>t&&this.isNavigable(t)))?.slotName??"",this.focusedTab=this.active,at>=0&&!renamed&&(this.emit("lr-tab-hide",{name:outgoing}),this.active&&this.emit("lr-tab-show",{name:this.active}))}updated(changed){super.updated(changed),(changed.has("active")||changed.has("tabs"))&&this.syncElementActiveState(),this.scrollOverflow.observeExtra(this.renderRoot.querySelectorAll('[part="tab"]')),this.measureTabScrollEdges(),this.rehomeTabFocus&&(this.rehomeTabFocus=!1,this.renderRoot.querySelector('[part="tab"][tabindex="0"]')?.focus())}selectTab(tab){if(!this.isNavigable(tab)||tab.slotName===this.active)return;const previous=this.active;this.active=tab.slotName,this.focusedTab=tab.slotName,previous&&this.emit("lr-tab-hide",{name:previous}),this.emit("lr-tab-show",{name:tab.slotName})}activateTab(tab){this.isNavigable(tab)&&(this.selectTab(tab),this.emit("lr-activate",{value:tab.slotName}))}show(panel){const tab=this.tabs.find(candidate=>candidate.slotName===panel);tab&&this.selectTab(tab)}syncElementActiveState(){const definitions=new Map;for(const tab of this.tabs)definitions.has(tab.element)||definitions.set(tab.element,tab);for(const child of Array.from(this.children))if(child.localName===tag("tab")){const definition=definitions.get(child);child.toggleAttribute("active",definition?.slotName===this.active)}else child.localName===tag("tab-panel")&&child.toggleAttribute("active",child.getAttribute("name")===this.active)}focusOnly(tab){this.focusedTab=tab.slotName,this.focusTab(tab.slotName)}get rovingTab(){if(this.activation!=="manual")return this.active;const candidate=this.tabs.find(t=>t.slotName===this.focusedTab&&this.isNavigable(t));return candidate?candidate.slotName:this.active}keyboardOriginTab(event,navigable){const eventButton=event.composedPath().find(candidate=>candidate.nodeType===1&&candidate.getAttribute?.("part")==="tab"&&candidate.getRootNode()===this.renderRoot),focused=shadowFocusTarget(this),owned=(eventButton??(focused?.getAttribute("part")==="tab"?focused:void 0))?.dataset.slot;return navigable.find(tab=>tab.slotName===owned)??navigable.find(tab=>tab.slotName===this.rovingTab)}focusTab(slotName){const buttons=this.renderRoot.querySelectorAll('[part="tab"]');for(const button of Array.from(buttons))if(button.dataset.slot===slotName){button.focus();return}}get isVertical(){return this.placement==="start"||this.placement==="end"}tabId(slotName){return this.idsFor(slotName).tab}panelId(slotName){return this.idsFor(slotName).panel}idsFor(slotName){const existing=this.idsBySlot.get(slotName);if(existing)return existing;const token=`${this.baseId}-${this.nextOpaqueId++}`,ids={tab:`${token}-tab`,panel:`${token}-panel`};return this.idsBySlot.set(slotName,ids),ids}tabSlotName(slotName){return`${slotName}-tab`}get scrollControlsSuppressed(){return this.withoutScrollControls||this.noScrollControls}measureTabScrollEdges(){const tablist=this.renderRoot.querySelector('[part~="tablist"]');if(!tablist||this.isVertical){this.setTabScrollEdges(!1,!1,tablist);return}const maximum=Math.max(0,tablist.scrollWidth-tablist.clientWidth),position=Math.max(0,Math.min(maximum,this.effectiveDirection==="rtl"?-tablist.scrollLeft:tablist.scrollLeft));this.setTabScrollEdges(position>1,position<maximum-1,tablist)}setTabScrollEdges(start,end,tablist){tablist?.toggleAttribute("data-scroll-start",start),tablist?.toggleAttribute("data-scroll-end",end),!(start===this.scrollStartAvailable&&end===this.scrollEndAvailable)&&(this.scrollStartAvailable=start,this.scrollEndAvailable=end)}scrollTabs(edge){const tablist=this.renderRoot.querySelector('[part~="tablist"]');if(!tablist||!isHtmlElement(tablist)||typeof tablist.scrollBy!="function")return;const step=Math.max(1,tablist.clientWidth*SCROLL_STEP_RATIO),towardEnd=edge==="end"?1:-1,physical=this.effectiveDirection==="rtl"?-towardEnd:towardEnd;tablist.scrollBy({left:step*physical,behavior:prefersReducedMotion(this)?"instant":"smooth"})}renderScrollControl(edge){if(this.isVertical||this.scrollControlsSuppressed)return nothing;const available=edge==="start"?this.scrollStartAvailable:this.scrollEndAvailable;return html`<button
|
|
1
|
+
import{__decorate}from"tslib";import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{repeat}from"lit/directives/repeat.js";import{LyraElement}from"../../../internal/lyra-element.js";import{resolveListMove}from"../../../internal/list-navigation.js";import{nextId}from"../../../internal/a11y.js";import{composedAccessibilityText}from"../../../internal/accessibility-visibility.js";import{CustomElementUpgradeObserver}from"../../../internal/custom-element-upgrade-observer.js";import{isHtmlElement}from"../../../internal/dom-guards.js";import{chevronIcon}from"../../../internal/icons.js";import{prefersReducedMotion}from"../../../internal/motion.js";import{tag}from"../../../internal/prefix.js";import{observeScrollOverflow}from"../../../internal/scroll-overflow.js";import{scrollOverflowFadeStyles}from"../../../internal/scroll-overflow.styles.js";import{styles}from"./tab-group.styles.js";import{shadowFocusTarget}from"../../../internal/active-element.js";import{LYRA_DEFAULT_scrollNext,LYRA_DEFAULT_scrollPrevious}from"../../../internal/default-strings/layout.generated.js";function isInertChild(child){return isHtmlElement(child)&&child.inert}function isTabLabelSubtreeExcludedWithoutInert(element){if(element.hasAttribute("hidden")||element.getAttribute("aria-hidden")?.trim().toLowerCase()==="true")return!0;const rendered=element.ownerDocument.defaultView?.getComputedStyle(element);return rendered?.display==="none"||rendered?.contentVisibility==="hidden"}const SYNTHETIC_PANEL_PREFIX="lr-tab-",SCROLL_STEP_RATIO=.8;class LyraTabGroup extends LyraElement{constructor(){super(...arguments),this.active="",this.accessibleLabel=null,this.placement="top",this.activation="auto",this.withoutScrollControls=!1,this.noScrollControls=!1,this.fixedScrollControls=!1,this.tabs=[],this.focusedTab="",this.baseId=nextId("tab-group"),this.nextOpaqueId=0,this.idsBySlot=new Map,this.mutationObserverGeneration=0,this.projectionGeneration=0,this.projectionPending=!1,this.stagingSlotName="tab-group-sources",this.pendingDescriptorUpdates=new WeakSet,this.excludedUnnamedDescriptors=new Set,this.descriptorUpgrades=new CustomElementUpgradeObserver(()=>{this.excludedUnnamedDescriptors.clear(),this.queueProjectionReconciliation()}),this.restoredSourceInertWrites=new Map,this.restoredSlotWrites=new Map,this.projectedSourceSnapshots=new Map,this.projectedSlotSnapshots=new Map,this.projectedSourceObserverGeneration=0,this.rehomeTabFocus=!1,this.scrollStartAvailable=!1,this.scrollEndAvailable=!1,this.scrollOverflow=observeScrollOverflow(this,()=>this.renderRoot.querySelector('[part~="tablist"]'),()=>this.measureTabScrollEdges()),this.queueProjectionReconciliation=()=>{if(!this.isConnected||this.projectionTimer!==void 0)return;const ownerDocument=this.ownerDocument,ownerWindow=ownerDocument.defaultView;if(!ownerWindow)return;const generation=this.projectionGeneration;this.beginProjectionSettlement(),this.projectionTimerWindow=ownerWindow,this.projectionTimer=ownerWindow.setTimeout(()=>{generation!==this.projectionGeneration||this.ownerDocument!==ownerDocument||!this.isConnected||(this.projectionTimer=void 0,this.projectionTimerWindow=void 0,this.updateBrowserDerivedState(this.syncTabs))},0)},this.syncTabs=()=>{const children=Array.from(this.children);this.adoptProjectedSourceInertStates(),this.adoptProjectedSlotStates();const projectedSlots=new Set,wasPending=this.projectionPending,next=this.readElementModel(children,projectedSlots);this.syncProjectedSlots(projectedSlots),this.syncProjectedSources(next.filter(tab=>tab.element.parentNode===this));const liveSlots=new Set(next.map(tab=>tab.slotName));for(const slotName of this.idsBySlot.keys())liveSlots.has(slotName)||this.idsBySlot.delete(slotName);(next.length!==this.tabs.length||wasPending&&!this.projectionPending||next.some((tab,index)=>{const previous=this.tabs[index];return tab.element!==previous.element||tab.slotName!==previous.slotName||tab.label!==previous.label||tab.disabled!==previous.disabled||tab.inert!==previous.inert}))&&(this.tabs=next),this.projectionPending||this.projectionTimer!==void 0?this.beginProjectionSettlement():this.settleProjection()},this.onTabListKeyDown=e=>{if(e.altKey||e.ctrlKey||e.metaKey||e.isComposing)return;const navigable=this.tabs.filter(t=>this.isNavigable(t));if(navigable.length===0)return;const origin=this.keyboardOriginTab(e,navigable),currentIndex=origin?navigable.indexOf(origin):-1;if(e.key==="Delete"){if(!origin?.element.closable)return;e.preventDefault(),origin.element.requestCloseFromOwner();return}if(this.activation==="manual"&&(e.key==="Enter"||e.key===" "||e.key==="Spacebar")){if(!origin)return;e.preventDefault(),this.activateTab(origin);return}const targetIndex=resolveListMove(e,{count:navigable.length,current:currentIndex,orientation:this.isVertical?"vertical":"horizontal",direction:this.effectiveDirection});if(targetIndex===null)return;e.preventDefault();const target=navigable[targetIndex];if(this.activation==="manual"){this.focusOnly(target);return}this.activateTab(target),this.focusTab(target.slotName)},this.onTabListScroll=()=>{this.measureTabScrollEdges()},this.onScrollControlMouseDown=event=>{event.preventDefault()},this.onScrollControlPointerDown=event=>{const control=event.currentTarget;control instanceof HTMLElement&&(control.setAttribute("data-pressed",""),control.setPointerCapture(event.pointerId))},this.onScrollControlPointerEnd=event=>{const control=event.currentTarget;control instanceof HTMLElement&&(control.removeAttribute("data-pressed"),control.hasPointerCapture(event.pointerId)&&control.releasePointerCapture(event.pointerId))}}static{this.defaultStrings={...super.defaultStrings,scrollNext:LYRA_DEFAULT_scrollNext,scrollPrevious:LYRA_DEFAULT_scrollPrevious}}static{this.styles=[LyraElement.styles,scrollOverflowFadeStyles,styles]}connectedCallback(){super.connectedCallback(),this.hasUpdated?this.syncTabs():this.seedFirstRenderState(this.syncTabs),this.resetMutationObserver();const ownerDocument=this.ownerDocument,MutationObserverCtor=ownerDocument.defaultView?.MutationObserver;if(!MutationObserverCtor)return;const generation=this.mutationObserverGeneration,observer=new MutationObserverCtor(records=>{if(this.mutationObserver!==observer||this.mutationObserverDocument!==ownerDocument||this.mutationObserverGeneration!==generation||!this.isConnected||this.ownerDocument!==ownerDocument)return;const isDirectChild=node=>node.parentNode===this,isElementTabContent=node=>{let current=node.nodeType===1?node:node.parentElement;for(;current&¤t!==this;){if(current.localName===tag("tab")&¤t.parentNode===this)return!0;current=current.parentElement}return!1},relevant=records.some(record=>{if(record.type==="childList")return record.target===this||isElementTabContent(record.target);if(record.type==="characterData")return isElementTabContent(record.target);if(record.attributeName==="inert"&&this.projectedSourceSnapshots.has(record.target)||record.attributeName==="inert"&&this.restoredSourceInertWrites.has(record.target)&&record.target.getAttribute("inert")===this.restoredSourceInertWrites.get(record.target))return!1;if(record.attributeName==="slot"){if(this.restoredSlotWrites.has(record.target)&&record.target.getAttribute("slot")===this.restoredSlotWrites.get(record.target))return!1;const snapshot=this.projectedSlotSnapshots.get(record.target);if(snapshot&&record.target.getAttribute("slot")===snapshot.appliedSlot)return!1}return isDirectChild(record.target)||isElementTabContent(record.target)});this.restoredSourceInertWrites.clear(),this.restoredSlotWrites.clear(),relevant&&(this.excludedUnnamedDescriptors.clear(),this.syncTabs())});this.mutationObserver=observer,this.mutationObserverDocument=ownerDocument,observer.observe(this,{childList:!0,subtree:!0,attributes:!0,characterData:!0,attributeFilter:["alt","aria-hidden","aria-label","aria-labelledby","class","closable","disabled","hidden","inert","id","label","name","open","panel","slot","style"]})}disconnectedCallback(){this.resetProjectionReconciliation(),this.resetMutationObserver(),this.resetProjectedSourceObserver(),this.restoreProjectedSources(),this.restoreProjectedSlots(),super.disconnectedCallback()}adoptedCallback(){super.adoptedCallback(),this.resetMutationObserver(),this.resetProjectedSourceObserver(),this.resetProjectionReconciliation()}resetProjectionReconciliation(){this.projectionGeneration+=1,this.projectionTimer!==void 0&&this.projectionTimerWindow?.clearTimeout(this.projectionTimer),this.projectionTimer=void 0,this.projectionTimerWindow=void 0,this.projectionPending=!1,this.pendingDescriptorUpdates=new WeakSet,this.descriptorUpgrades.disconnect(),this.restoredSourceInertWrites.clear(),this.restoredSlotWrites.clear(),this.excludedUnnamedDescriptors.clear(),this.settleProjection()}beginProjectionSettlement(){this.projectionSettlement||(this.projectionSettlement=new Promise(resolve=>{this.resolveProjectionSettlement=resolve}))}settleProjection(){const resolve=this.resolveProjectionSettlement;this.resolveProjectionSettlement=void 0,this.projectionSettlement=void 0,resolve?.()}async getUpdateComplete(){const generation=this.projectionGeneration,ownerDocument=this.ownerDocument;let complete=await super.getUpdateComplete();if(this.renderSlotPresence(!1)||!ownerDocument.defaultView)return complete;const current=()=>this.isConnected&&generation===this.projectionGeneration&&this.ownerDocument===ownerDocument;for(;current();){const settlement=this.projectionSettlement;if(settlement){if(await settlement,!current())return complete;complete=await super.getUpdateComplete()}else if(this.isUpdatePending)complete=await super.getUpdateComplete();else return complete}return complete}waitForDescriptorUpdate(tab){if(tab.hasUpdated===!0)return!1;const updateComplete=tab.updateComplete;if(!updateComplete)return this.descriptorUpgrades.observeElement(tab),!1;if(!this.pendingDescriptorUpdates.has(tab)){this.pendingDescriptorUpdates.add(tab);const generation=this.projectionGeneration,ownerDocument=this.ownerDocument;updateComplete.then(()=>{generation===this.projectionGeneration&&this.ownerDocument===ownerDocument&&(this.pendingDescriptorUpdates.delete(tab),tab.parentNode===this&&this.queueProjectionReconciliation())})}return!0}resetMutationObserver(){this.mutationObserverGeneration+=1,this.mutationObserver?.disconnect(),this.mutationObserver=void 0,this.mutationObserverDocument=void 0}readElementModel(children,projectedSlots){this.projectionPending=!1;const seen=new Set,next=[],panelsByName=new Map;for(const child of children){if(child.localName!==tag("tab-panel"))continue;const name=child.getAttribute("name");name!==null&&!panelsByName.has(name)&&panelsByName.set(name,child)}const authoredNames=new Set(children.flatMap(child=>{if(child.localName===tag("tab")){const name=child.getAttribute("panel");return name?[name]:[]}if(child.localName===tag("tab-panel")){const name=child.getAttribute("name");return name?[name]:[]}return[]}));let stagingName="tab-group-sources";for(;authoredNames.has(stagingName);)stagingName+="-sources";this.stagingSlotName=stagingName;let index=0;for(const child of children){if(child.localName!==tag("tab"))continue;const authoredPanel=child.getAttribute("panel")||void 0;let slotName=authoredPanel??`${SYNTHETIC_PANEL_PREFIX}${index}`;if(!authoredPanel){let collision=0;for(;authoredNames.has(slotName)||seen.has(slotName);)collision+=1,slotName=`${SYNTHETIC_PANEL_PREFIX}${index}-${collision}`}if(index+=1,seen.has(slotName))continue;seen.add(slotName);const tabSlot=this.tabSlotName(slotName),assignedSlot=child.assignedSlot,assignedHere=assignedSlot?.getRootNode()===this.renderRoot&&(assignedSlot.name===tabSlot||assignedSlot.name===this.stagingSlotName);if(!assignedHere||!authoredPanel&&this.excludedUnnamedDescriptors.has(child)){this.projectSlot(child,this.stagingSlotName,projectedSlots),assignedHere||(this.projectionPending=!0);continue}if(this.waitForDescriptorUpdate(child)){this.projectionPending=!0,this.projectSlot(child,this.stagingSlotName,projectedSlots);continue}const visibleLabel=this.readElementLabel(child);if(!authoredPanel&&!visibleLabel){this.excludedUnnamedDescriptors.add(child),this.projectSlot(child,this.stagingSlotName,projectedSlots);continue}projectedSlots.add(child);const label=visibleLabel||slotName,panel=panelsByName.get(slotName);panel&&this.projectSlot(panel,slotName,projectedSlots),next.push({slotName,label,disabled:child.hasAttribute("disabled"),inert:isInertChild(child),element:child}),!this.active&&child.hasAttribute("active")&&(this.active=slotName)}if(this.projectionPending){for(const child of children)this.projectedSlotSnapshots.has(child)&&projectedSlots.add(child);return this.tabs}for(const tab of next)this.projectSlot(tab.element,this.tabSlotName(tab.slotName),projectedSlots);return next}readElementLabel(tab){const labelNodes=Array.from(tab.childNodes).filter(node=>node.nodeType!==Node.ELEMENT_NODE||node.getAttribute("slot")===null||node.getAttribute("slot")==="");return composedAccessibilityText(labelNodes,{ancestorBoundary:tab,isSubtreeExcluded:element=>this.isTabLabelSubtreeExcluded(element),ignoreInheritedVisibility:!0}).replace(/\s+/g," ").trim()}libraryOwnsSourceInert(element){return this.projectedSourceSnapshots.get(element)?.libraryOwnsInert===!0}isTabLabelSubtreeExcluded(element){return isTabLabelSubtreeExcludedWithoutInert(element)||element.hasAttribute("inert")&&!this.libraryOwnsSourceInert(element)}snapshotProjectedSource(source){const inert=source.getAttribute("inert");return{inert,appliedInert:inert,libraryOwnsInert:!1}}adoptProjectedSourceInert(source,snapshot){const current=source.getAttribute("inert");current!==snapshot.appliedInert&&(snapshot.inert=current,snapshot.libraryOwnsInert=!1)}makeProjectedSourceInert(source,snapshot){source.hasAttribute("inert")||(source.setAttribute("inert",""),snapshot.libraryOwnsInert=!0),snapshot.appliedInert=source.getAttribute("inert")}restoreProjectedSource(source,snapshot){this.adoptProjectedSourceInert(source,snapshot);const before=source.getAttribute("inert");snapshot.inert===null?source.removeAttribute("inert"):source.setAttribute("inert",snapshot.inert),this.mutationObserver&&this.contains(source)&&source.getAttribute("inert")!==before&&this.restoredSourceInertWrites.set(source,source.getAttribute("inert"))}restoreProjectedSources(){for(const[source,snapshot]of this.projectedSourceSnapshots)this.restoreProjectedSource(source,snapshot);this.projectedSourceSnapshots.clear()}resetProjectedSourceObserver(){this.projectedSourceObserverGeneration+=1,this.projectedSourceObserver?.disconnect(),this.projectedSourceObserver=void 0,this.projectedSourceObserverDocument=void 0}observeProjectedSources(){this.resetProjectedSourceObserver();const ownerDocument=this.ownerDocument,MutationObserverCtor=ownerDocument.defaultView?.MutationObserver;if(!MutationObserverCtor||!this.isConnected||this.projectedSourceSnapshots.size===0)return;const generation=this.projectedSourceObserverGeneration,observer=new MutationObserverCtor(records=>{this.projectedSourceObserver!==observer||this.projectedSourceObserverDocument!==ownerDocument||this.projectedSourceObserverGeneration!==generation||!this.isConnected||this.ownerDocument!==ownerDocument||records.some(record=>this.projectedSourceSnapshots.has(record.target))&&this.syncTabs()});this.projectedSourceObserver=observer,this.projectedSourceObserverDocument=ownerDocument;for(const source of this.projectedSourceSnapshots.keys())observer.observe(source,{attributes:!0,attributeFilter:["inert"]})}projectedSources(tabs){const sources=new Set;for(const tab of tabs)for(const child of Array.from(tab.element.children))(child.getAttribute("slot")??"")===""&&sources.add(child);return sources}syncProjectedSources(tabs){const sources=this.projectedSources(tabs);for(const[source,snapshot]of this.projectedSourceSnapshots)this.adoptProjectedSourceInert(source,snapshot),sources.has(source)||(this.restoreProjectedSource(source,snapshot),this.projectedSourceSnapshots.delete(source));for(const source of sources){const snapshot=this.projectedSourceSnapshots.get(source)??this.snapshotProjectedSource(source);this.projectedSourceSnapshots.set(source,snapshot),this.adoptProjectedSourceInert(source,snapshot),this.makeProjectedSourceInert(source,snapshot)}this.observeProjectedSources()}adoptProjectedSourceInertStates(){for(const[source,snapshot]of this.projectedSourceSnapshots)this.adoptProjectedSourceInert(source,snapshot)}snapshotProjectedSlot(source){const slot=source.getAttribute("slot");return{slot,appliedSlot:slot,libraryOwnsSlot:!1}}adoptProjectedSlot(source,snapshot){const current=source.getAttribute("slot");current!==snapshot.appliedSlot&&(snapshot.slot=current,snapshot.libraryOwnsSlot=!1)}projectSlot(source,slot,projectedSlots){const snapshot=this.projectedSlotSnapshots.get(source)??this.snapshotProjectedSlot(source);this.projectedSlotSnapshots.set(source,snapshot),this.adoptProjectedSlot(source,snapshot),source.getAttribute("slot")!==slot&&(source.setAttribute("slot",slot),snapshot.libraryOwnsSlot=!0),snapshot.appliedSlot=source.getAttribute("slot"),projectedSlots.add(source)}restoreProjectedSlot(source,snapshot){this.adoptProjectedSlot(source,snapshot);const before=source.getAttribute("slot");snapshot.slot===null?source.removeAttribute("slot"):source.setAttribute("slot",snapshot.slot),this.mutationObserver&&this.contains(source)&&source.getAttribute("slot")!==before&&this.restoredSlotWrites.set(source,source.getAttribute("slot"))}syncProjectedSlots(projectedSlots){for(const[source,snapshot]of this.projectedSlotSnapshots)projectedSlots.has(source)||(this.restoreProjectedSlot(source,snapshot),this.projectedSlotSnapshots.delete(source))}restoreProjectedSlots(){for(const[source,snapshot]of this.projectedSlotSnapshots)this.restoreProjectedSlot(source,snapshot);this.projectedSlotSnapshots.clear()}adoptProjectedSlotStates(){for(const[source,snapshot]of this.projectedSlotSnapshots)this.adoptProjectedSlot(source,snapshot)}isNavigable(tab){return!tab.disabled&&!tab.inert}willUpdate(changed){if(super.willUpdate(changed),this.projectionPending||!changed.has("tabs")&&!changed.has("active"))return;const focused=shadowFocusTarget(this),focusedSlot=focused?.getAttribute("part")==="tab"?focused.getAttribute("data-slot"):null;focusedSlot!==null&&!this.tabs.some(tab=>tab.slotName===focusedSlot&&this.isNavigable(tab))&&(this.rehomeTabFocus=!0,this.focusedTab=this.active);const current=this.tabs.find(t=>t.slotName===this.active);if(current&&this.isNavigable(current))return;this.rehomeTabFocus=this.rehomeTabFocus||focusedSlot!==null;const outgoing=this.active,before=changed.get("tabs")??this.tabs,at=this.hasUpdated&&changed.has("tabs")&&!changed.has("active")?before.findIndex(t=>t.slotName===outgoing):-1,renamed=at<0?void 0:this.tabs.find(t=>t.element===before[at].element&&this.isNavigable(t));let candidates=this.tabs;if(at>=0){const liveByName=new Map;for(const tab of this.tabs)liveByName.has(tab.slotName)||liveByName.set(tab.slotName,tab);candidates=[...before.slice(at+1),...before.slice(0,at).reverse()].map(tab=>liveByName.get(tab.slotName))}this.active=(renamed??candidates.find(t=>t&&this.isNavigable(t)))?.slotName??"",this.focusedTab=this.active,at>=0&&!renamed&&(this.emit("lr-tab-hide",{name:outgoing}),this.active&&this.emit("lr-tab-show",{name:this.active}))}updated(changed){super.updated(changed),changed.has("tabs")&&this.queueProjectionReconciliation(),!this.projectionPending&&(changed.has("active")||changed.has("tabs"))&&this.syncElementActiveState(),this.scrollOverflow.observeExtra(this.renderRoot.querySelectorAll('[part="tab"]')),this.measureTabScrollEdges(),this.rehomeTabFocus&&(this.rehomeTabFocus=!1,this.renderRoot.querySelector('[part="tab"][tabindex="0"]')?.focus())}selectTab(tab){if(!this.isNavigable(tab)||tab.slotName===this.active)return;const previous=this.active;this.active=tab.slotName,this.focusedTab=tab.slotName,previous&&this.emit("lr-tab-hide",{name:previous}),this.emit("lr-tab-show",{name:tab.slotName})}activateTab(tab){this.isNavigable(tab)&&(this.selectTab(tab),this.emit("lr-activate",{value:tab.slotName}))}show(panel){const tab=this.tabs.find(candidate=>candidate.slotName===panel);tab&&this.selectTab(tab)}syncElementActiveState(){const definitions=new Map;for(const tab of this.tabs)definitions.has(tab.element)||definitions.set(tab.element,tab);for(const child of Array.from(this.children))if(child.localName===tag("tab")){const definition=definitions.get(child);child.toggleAttribute("active",definition?.slotName===this.active)}else child.localName===tag("tab-panel")&&child.toggleAttribute("active",child.getAttribute("name")===this.active)}focusOnly(tab){this.focusedTab=tab.slotName,this.focusTab(tab.slotName)}get rovingTab(){if(this.activation!=="manual")return this.active;const candidate=this.tabs.find(t=>t.slotName===this.focusedTab&&this.isNavigable(t));return candidate?candidate.slotName:this.active}keyboardOriginTab(event,navigable){const eventButton=event.composedPath().find(candidate=>candidate.nodeType===1&&candidate.getAttribute?.("part")==="tab"&&candidate.getRootNode()===this.renderRoot),focused=shadowFocusTarget(this),owned=(eventButton??(focused?.getAttribute("part")==="tab"?focused:void 0))?.dataset.slot;return navigable.find(tab=>tab.slotName===owned)??navigable.find(tab=>tab.slotName===this.rovingTab)}focusTab(slotName){const buttons=this.renderRoot.querySelectorAll('[part="tab"]');for(const button of Array.from(buttons))if(button.dataset.slot===slotName){button.focus();return}}get isVertical(){return this.placement==="start"||this.placement==="end"}tabId(slotName){return this.idsFor(slotName).tab}panelId(slotName){return this.idsFor(slotName).panel}idsFor(slotName){const existing=this.idsBySlot.get(slotName);if(existing)return existing;const token=`${this.baseId}-${this.nextOpaqueId++}`,ids={tab:`${token}-tab`,panel:`${token}-panel`};return this.idsBySlot.set(slotName,ids),ids}tabSlotName(slotName){return`${slotName}-tab`}get scrollControlsSuppressed(){return this.withoutScrollControls||this.noScrollControls}measureTabScrollEdges(){const tablist=this.renderRoot.querySelector('[part~="tablist"]');if(!tablist||this.isVertical){this.setTabScrollEdges(!1,!1,tablist);return}const maximum=Math.max(0,tablist.scrollWidth-tablist.clientWidth),position=Math.max(0,Math.min(maximum,this.effectiveDirection==="rtl"?-tablist.scrollLeft:tablist.scrollLeft));this.setTabScrollEdges(position>1,position<maximum-1,tablist)}setTabScrollEdges(start,end,tablist){tablist?.toggleAttribute("data-scroll-start",start),tablist?.toggleAttribute("data-scroll-end",end),!(start===this.scrollStartAvailable&&end===this.scrollEndAvailable)&&(this.scrollStartAvailable=start,this.scrollEndAvailable=end)}scrollTabs(edge){const tablist=this.renderRoot.querySelector('[part~="tablist"]');if(!tablist||!isHtmlElement(tablist)||typeof tablist.scrollBy!="function")return;const step=Math.max(1,tablist.clientWidth*SCROLL_STEP_RATIO),towardEnd=edge==="end"?1:-1,physical=this.effectiveDirection==="rtl"?-towardEnd:towardEnd;tablist.scrollBy({left:step*physical,behavior:prefersReducedMotion(this)?"instant":"smooth"})}renderScrollControl(edge){if(this.isVertical||this.scrollControlsSuppressed)return nothing;const available=edge==="start"?this.scrollStartAvailable:this.scrollEndAvailable;return html`<button
|
|
2
2
|
type="button"
|
|
3
3
|
part=${edge==="start"?"scroll-button scroll-button__base scroll-button-start scroll-button--start":"scroll-button scroll-button__base scroll-button-end scroll-button--end"}
|
|
4
4
|
tabindex="-1"
|
|
@@ -31,7 +31,7 @@ import{__decorate}from"tslib";import{html,nothing}from"lit";import{property,quer
|
|
|
31
31
|
tabindex=${tab.slotName===this.rovingTab?"0":"-1"}
|
|
32
32
|
@click=${()=>this.activateTab(tab)}
|
|
33
33
|
>
|
|
34
|
-
<span data-tab-label><slot name=${this.tabSlotName(tab.slotName)}></slot></span>${tab.label?html`<span hidden aria-hidden="true">${tab.label}</span>`:nothing}${selected?html`<span part="active-tab-indicator" aria-hidden="true"></span>`:nothing}
|
|
34
|
+
<span data-tab-label><slot name=${this.tabSlotName(tab.slotName)} @slotchange=${this.queueProjectionReconciliation}></slot></span>${tab.label?html`<span hidden aria-hidden="true">${tab.label}</span>`:nothing}${selected?html`<span part="active-tab-indicator" aria-hidden="true"></span>`:nothing}
|
|
35
35
|
</button>`}renderPanel(tab){const selected=tab.slotName===this.active;return html`<div
|
|
36
36
|
part="panel"
|
|
37
37
|
id=${this.panelId(tab.slotName)}
|
|
@@ -45,6 +45,7 @@ import{__decorate}from"tslib";import{html,nothing}from"lit";import{property,quer
|
|
|
45
45
|
<slot ?hidden=${this.tabs.length>0}></slot>
|
|
46
46
|
<div part="base tab-group">
|
|
47
47
|
<div part="nav">
|
|
48
|
+
<div data-descriptor-staging inert aria-hidden="true"><slot name=${this.stagingSlotName} @slotchange=${this.queueProjectionReconciliation}></slot></div>
|
|
48
49
|
${this.renderScrollControl("start")}
|
|
49
50
|
<div
|
|
50
51
|
part="tablist tabs"
|
|
@@ -62,4 +63,4 @@ import{__decorate}from"tslib";import{html,nothing}from"lit";import{property,quer
|
|
|
62
63
|
${repeat(this.tabs,tab=>tab.slotName,tab=>this.renderPanel(tab))}
|
|
63
64
|
</div>
|
|
64
65
|
</div>
|
|
65
|
-
`}}__decorate([property({reflect:!0})],LyraTabGroup.prototype,"active",void 0),__decorate([property({attribute:"aria-label"})],LyraTabGroup.prototype,"accessibleLabel",void 0),__decorate([property({reflect:!0})],LyraTabGroup.prototype,"placement",void 0),__decorate([property({reflect:!0})],LyraTabGroup.prototype,"activation",void 0),__decorate([property({type:Boolean,attribute:"without-scroll-controls",reflect:!0})],LyraTabGroup.prototype,"withoutScrollControls",void 0),__decorate([property({type:Boolean,attribute:"no-scroll-controls",reflect:!0})],LyraTabGroup.prototype,"noScrollControls",void 0),__decorate([property({type:Boolean,attribute:"fixed-scroll-controls",reflect:!0})],LyraTabGroup.prototype,"fixedScrollControls",void 0),__decorate([query("slot:not([name])")],LyraTabGroup.prototype,"defaultSlot",void 0),__decorate([state()],LyraTabGroup.prototype,"tabs",void 0),__decorate([state()],LyraTabGroup.prototype,"focusedTab",void 0),__decorate([state()],LyraTabGroup.prototype,"scrollStartAvailable",void 0),__decorate([state()],LyraTabGroup.prototype,"scrollEndAvailable",void 0),LyraTabGroup.disableWarning?.("change-in-update");export{LyraTabGroup};
|
|
66
|
+
`}}__decorate([property({reflect:!0})],LyraTabGroup.prototype,"active",void 0),__decorate([property({attribute:"aria-label"})],LyraTabGroup.prototype,"accessibleLabel",void 0),__decorate([property({reflect:!0})],LyraTabGroup.prototype,"placement",void 0),__decorate([property({reflect:!0})],LyraTabGroup.prototype,"activation",void 0),__decorate([property({type:Boolean,attribute:"without-scroll-controls",reflect:!0})],LyraTabGroup.prototype,"withoutScrollControls",void 0),__decorate([property({type:Boolean,attribute:"no-scroll-controls",reflect:!0})],LyraTabGroup.prototype,"noScrollControls",void 0),__decorate([property({type:Boolean,attribute:"fixed-scroll-controls",reflect:!0})],LyraTabGroup.prototype,"fixedScrollControls",void 0),__decorate([query("slot:not([name])")],LyraTabGroup.prototype,"defaultSlot",void 0),__decorate([state()],LyraTabGroup.prototype,"tabs",void 0),__decorate([state()],LyraTabGroup.prototype,"focusedTab",void 0),__decorate([state()],LyraTabGroup.prototype,"stagingSlotName",void 0),__decorate([state()],LyraTabGroup.prototype,"scrollStartAvailable",void 0),__decorate([state()],LyraTabGroup.prototype,"scrollEndAvailable",void 0),LyraTabGroup.disableWarning?.("change-in-update");export{LyraTabGroup};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{iconHitTarget,focusRing}from"../../../internal/interactive-control.styles.js";import{css}from"lit";const styles=css` :host { display: block; min-inline-size: 0; max-inline-size: 100%; min-block-size: 0; } [part~="base"] { display: flex; flex-direction: column; gap: var(--lr-space-s); min-inline-size: 0; min-block-size: 0; max-block-size: 100%; block-size: 100%; box-sizing: border-box; } [part="nav"] { display: flex; align-items: stretch; min-inline-size: 0; min-block-size: 0; } [part~="tablist"] { display: flex; align-items: stretch; gap: var(--lr-space-m); border-block-end: var(--track-width, var(--lr-border-width-thin)) solid var(--track-color, var(--lr-color-border-subtle)); overflow-x: auto; overflow-y: hidden; flex: 1 1 auto; min-inline-size: 0; } :where([part~="scroll-button"]) { flex: 0 0 auto; display: inline-grid; place-items: center; inline-size: var(--lr-icon-button-size); ${iconHitTarget} padding: 0; appearance: none; background: none; border: none; font: inherit; border-block-end: var(--lr-border-width-thin) solid var(--lr-color-border-subtle); color: var(--lr-color-text-quiet); cursor: pointer; transition: color var(--lr-transition-fast), background var(--lr-transition-fast); } :where([part="nav"]:not(:has([part~="tablist"][data-scroll-overflow]))) [part~="scroll-button"] { display: none; } :where([part~="scroll-button"][hidden]) { display: none; } :where([part~="scroll-button"]):where(:hover) { color: var(--lr-tab-group-scroll-button-hover-color, var(--lr-color-text)); } :where([part~="scroll-button"]):where(:active) { background: var( --lr-tab-group-scroll-button-active-bg, color-mix( in oklab, transparent, var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ); color: var(--lr-tab-group-scroll-button-active-color, var(--lr-color-text)); } :where([part~="scroll-button"]):where([data-pressed]) { background: var( --lr-tab-group-scroll-button-active-bg, color-mix( in oklab, transparent, var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ); color: var(--lr-tab-group-scroll-button-active-color, var(--lr-color-text)); } [part~="scroll-button"]:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: calc(var(--lr-focus-ring-offset) * -1); border-radius: var(--lr-radius); } [part="scroll-button-glyph"] { display: inline-flex; align-items: center; } [part~="scroll-button-start"] [part="scroll-button-glyph"] { transform: scaleX(-1); } :host(:dir(rtl)) [part~="scroll-button-start"] [part="scroll-button-glyph"] { transform: none; } :host(:dir(rtl)) [part~="scroll-button-end"] [part="scroll-button-glyph"] { transform: scaleX(-1); } [part="tab"] { position: relative; appearance: none; background: none; border: none; border-block-end: var(--lr-border-width-medium) solid transparent; margin-block-end: var(--lr-size-neg-1px); padding: var(--lr-space-s) var(--lr-space-xs); font: inherit; font-weight: var(--lr-font-weight-medium); color: var(--lr-color-text-quiet); cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: var(--lr-space-xs); transition: color var(--lr-transition-fast), border-color var(--lr-transition-fast); } [data-tab-label] { min-inline-size: 0; } :where([part="tab"]):hover:where(:not([aria-disabled="true"])) { color: var(--lr-tab-group-hover-color, var(--lr-color-text)); } :where([part="tab"]):active:where(:not([aria-disabled="true"])) { background: var( --lr-tab-group-active-bg, color-mix( in oklab, transparent, var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ); color: var( --lr-tab-group-active-color, var(--lr-tab-group-hover-color, var(--lr-color-text)) ); } [part="tab"][aria-selected="true"] { color: var(--lr-tab-group-selected-color, var(--lr-color-brand)); border-block-end-color: var( --indicator-color, var(--lr-tab-group-indicator-color, var(--lr-color-brand)) ); } [part="active-tab-indicator"] { position: absolute; inset-inline: 0; inset-block-end: calc(-1 * var(--lr-border-width-medium)); block-size: var(--lr-border-width-medium); background: var( --indicator-color, var(--lr-tab-group-indicator-color, var(--lr-color-brand)) ); pointer-events: none; } [part="tab"][aria-disabled="true"] { cursor: not-allowed; pointer-events: none; opacity: var(--lr-opacity-disabled); } [part="tab"]:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: calc(var(--lr-focus-ring-offset) * -1); border-radius: var(--lr-radius); } [part="panel"] { min-inline-size: 0; padding-block-start: var(--lr-space-xs); overflow-wrap: anywhere; } [part="body"] { flex: 1 1 auto; min-inline-size: 0; min-block-size: 0; overflow: auto; } [part="panel"]:hover { outline-width: var( --lr-tab-group-panel-hover-outline-width, var(--lr-border-width-thin) ); outline-style: var(--lr-tab-group-panel-hover-outline-style, solid); outline-color: var( --lr-tab-group-panel-hover-outline-color, var(--lr-color-border) ); outline-offset: var( --lr-tab-group-panel-hover-outline-offset, var(--lr-focus-ring-offset) ); border-radius: var(--lr-radius); } [part="panel"]:focus-visible { ${focusRing} border-radius: var(--lr-radius); } @media (prefers-reduced-motion: reduce) { [part="tab"], [part~="scroll-button"] { transition: none !important; } } :host([placement="bottom"]) [part~="base"] { flex-direction: column-reverse; } :host([placement="bottom"]) [part~="tablist"], :host([placement="bottom"]) [part~="scroll-button"] { border-block-end: none; border-block-start: var(--track-width, var(--lr-border-width-thin)) solid var(--track-color, var(--lr-color-border-subtle)); } :host([placement="bottom"]) [part="tab"][aria-selected="true"] { border-block-end-color: transparent; } :host([placement="bottom"]) [part="active-tab-indicator"] { inset-block-start: calc(-1 * var(--lr-border-width-medium)); inset-block-end: auto; } :host([placement="start"]) [part="nav"], :host([placement="end"]) [part="nav"] { flex: 0 1 auto; min-inline-size: 0; max-inline-size: var( --lr-tab-group-vertical-nav-max-inline-size, var(--lr-size-12rem) ); max-block-size: 100%; } :host([placement="start"]) [part~="base"], :host([placement="end"]) [part~="base"] { flex-direction: row; align-items: stretch; } :host([placement="end"]) [part~="base"] { flex-direction: row-reverse; } :host([placement="start"]) [part~="tablist"], :host([placement="end"]) [part~="tablist"] { flex-direction: column; align-items: stretch; flex: 1 1 auto; min-inline-size: 0; max-inline-size: 100%; gap: var(--lr-space-2xs); overflow-x: hidden; overflow-y: auto; min-block-size: 0; max-block-size: 100%; border-block-end: none; } :host([placement="start"]) [part="tab"], :host([placement="end"]) [part="tab"] { min-inline-size: 0; max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; } :host([placement="start"]) [data-tab-label], :host([placement="end"]) [data-tab-label] { display: block; flex: 1 1 auto; max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :host([placement="start"]) [part~="tablist"] { border-inline-end: var(--track-width, var(--lr-border-width-thin)) solid var(--track-color, var(--lr-color-border-subtle)); } :host([placement="end"]) [part~="tablist"] { border-inline-start: var(--track-width, var(--lr-border-width-thin)) solid var(--track-color, var(--lr-color-border-subtle)); } :host([placement="start"]) [part~="tablist"][data-scroll-overflow], :host([placement="end"]) [part~="tablist"][data-scroll-overflow] { -webkit-mask-image: none; mask-image: none; } :host([placement="start"]) [part="tab"][aria-selected="true"], :host([placement="end"]) [part="tab"][aria-selected="true"] { box-shadow: none; border-block-end-color: transparent; } :host([placement="start"]) [part="tab"][aria-selected="true"] { border-inline-end: var(--lr-border-width-thick) solid var( --indicator-color, var(--lr-tab-group-indicator-color, var(--lr-color-brand)) ); } :host([placement="end"]) [part="tab"][aria-selected="true"] { border-inline-start: var(--lr-border-width-thick) solid var( --indicator-color, var(--lr-tab-group-indicator-color, var(--lr-color-brand)) ); } :host([placement="start"]) [part="active-tab-indicator"] { inset-block: 0; inset-inline: auto calc(-1 * var(--lr-border-width-thick)); inline-size: var(--lr-border-width-thick); block-size: auto; } :host([placement="end"]) [part="active-tab-indicator"] { inset-block: 0; inset-inline: calc(-1 * var(--lr-border-width-thick)) auto; inline-size: var(--lr-border-width-thick); block-size: auto; } :host([placement="start"]) [part="panel"], :host([placement="end"]) [part="panel"] { flex: 1 1 auto; min-inline-size: 0; } `;export{styles};
|
|
1
|
+
import{iconHitTarget,focusRing}from"../../../internal/interactive-control.styles.js";import{css}from"lit";const styles=css` :host { display: block; min-inline-size: 0; max-inline-size: 100%; min-block-size: 0; } [part~="base"] { display: flex; flex-direction: column; gap: var(--lr-space-s); min-inline-size: 0; min-block-size: 0; max-block-size: 100%; block-size: 100%; box-sizing: border-box; } [part="nav"] { position: relative; display: flex; align-items: stretch; min-inline-size: 0; min-block-size: 0; } [data-descriptor-staging] { position: absolute; inset: 0; overflow: clip; opacity: 0; pointer-events: none; } [part~="tablist"] { display: flex; align-items: stretch; gap: var(--lr-space-m); border-block-end: var(--track-width, var(--lr-border-width-thin)) solid var(--track-color, var(--lr-color-border-subtle)); overflow-x: auto; overflow-y: hidden; flex: 1 1 auto; min-inline-size: 0; } :where([part~="scroll-button"]) { flex: 0 0 auto; display: inline-grid; place-items: center; inline-size: var(--lr-icon-button-size); ${iconHitTarget} padding: 0; appearance: none; background: none; border: none; font: inherit; border-block-end: var(--lr-border-width-thin) solid var(--lr-color-border-subtle); color: var(--lr-color-text-quiet); cursor: pointer; transition: color var(--lr-transition-fast), background var(--lr-transition-fast); } :where([part="nav"]:not(:has([part~="tablist"][data-scroll-overflow]))) [part~="scroll-button"] { display: none; } :where([part~="scroll-button"][hidden]) { display: none; } :where([part~="scroll-button"]):where(:hover) { color: var(--lr-tab-group-scroll-button-hover-color, var(--lr-color-text)); } :where([part~="scroll-button"]):where(:active) { background: var( --lr-tab-group-scroll-button-active-bg, color-mix( in oklab, transparent, var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ); color: var(--lr-tab-group-scroll-button-active-color, var(--lr-color-text)); } :where([part~="scroll-button"]):where([data-pressed]) { background: var( --lr-tab-group-scroll-button-active-bg, color-mix( in oklab, transparent, var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ); color: var(--lr-tab-group-scroll-button-active-color, var(--lr-color-text)); } [part~="scroll-button"]:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: calc(var(--lr-focus-ring-offset) * -1); border-radius: var(--lr-radius); } [part="scroll-button-glyph"] { display: inline-flex; align-items: center; } [part~="scroll-button-start"] [part="scroll-button-glyph"] { transform: scaleX(-1); } :host(:dir(rtl)) [part~="scroll-button-start"] [part="scroll-button-glyph"] { transform: none; } :host(:dir(rtl)) [part~="scroll-button-end"] [part="scroll-button-glyph"] { transform: scaleX(-1); } [part="tab"] { position: relative; appearance: none; background: none; border: none; border-block-end: var(--lr-border-width-medium) solid transparent; margin-block-end: var(--lr-size-neg-1px); padding: var(--lr-space-s) var(--lr-space-xs); font: inherit; font-weight: var(--lr-font-weight-medium); color: var(--lr-color-text-quiet); cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: var(--lr-space-xs); transition: color var(--lr-transition-fast), border-color var(--lr-transition-fast); } [data-tab-label] { min-inline-size: 0; } :where([part="tab"]):hover:where(:not([aria-disabled="true"])) { color: var(--lr-tab-group-hover-color, var(--lr-color-text)); } :where([part="tab"]):active:where(:not([aria-disabled="true"])) { background: var( --lr-tab-group-active-bg, color-mix( in oklab, transparent, var(--lr-color-mix-partner) var(--lr-color-mix-active) ) ); color: var( --lr-tab-group-active-color, var(--lr-tab-group-hover-color, var(--lr-color-text)) ); } [part="tab"][aria-selected="true"] { color: var(--lr-tab-group-selected-color, var(--lr-color-brand)); border-block-end-color: var( --indicator-color, var(--lr-tab-group-indicator-color, var(--lr-color-brand)) ); } [part="active-tab-indicator"] { position: absolute; inset-inline: 0; inset-block-end: calc(-1 * var(--lr-border-width-medium)); block-size: var(--lr-border-width-medium); background: var( --indicator-color, var(--lr-tab-group-indicator-color, var(--lr-color-brand)) ); pointer-events: none; } [part="tab"][aria-disabled="true"] { cursor: not-allowed; pointer-events: none; opacity: var(--lr-opacity-disabled); } [part="tab"]:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: calc(var(--lr-focus-ring-offset) * -1); border-radius: var(--lr-radius); } [part="panel"] { min-inline-size: 0; padding-block-start: var(--lr-space-xs); overflow-wrap: anywhere; } [part="body"] { flex: 1 1 auto; min-inline-size: 0; min-block-size: 0; overflow: auto; } [part="panel"]:hover { outline-width: var( --lr-tab-group-panel-hover-outline-width, var(--lr-border-width-thin) ); outline-style: var(--lr-tab-group-panel-hover-outline-style, solid); outline-color: var( --lr-tab-group-panel-hover-outline-color, var(--lr-color-border) ); outline-offset: var( --lr-tab-group-panel-hover-outline-offset, var(--lr-focus-ring-offset) ); border-radius: var(--lr-radius); } [part="panel"]:focus-visible { ${focusRing} border-radius: var(--lr-radius); } @media (prefers-reduced-motion: reduce) { [part="tab"], [part~="scroll-button"] { transition: none !important; } } :host([placement="bottom"]) [part~="base"] { flex-direction: column-reverse; } :host([placement="bottom"]) [part~="tablist"], :host([placement="bottom"]) [part~="scroll-button"] { border-block-end: none; border-block-start: var(--track-width, var(--lr-border-width-thin)) solid var(--track-color, var(--lr-color-border-subtle)); } :host([placement="bottom"]) [part="tab"][aria-selected="true"] { border-block-end-color: transparent; } :host([placement="bottom"]) [part="active-tab-indicator"] { inset-block-start: calc(-1 * var(--lr-border-width-medium)); inset-block-end: auto; } :host([placement="start"]) [part="nav"], :host([placement="end"]) [part="nav"] { flex: 0 1 auto; min-inline-size: 0; max-inline-size: var( --lr-tab-group-vertical-nav-max-inline-size, var(--lr-size-12rem) ); max-block-size: 100%; } :host([placement="start"]) [part~="base"], :host([placement="end"]) [part~="base"] { flex-direction: row; align-items: stretch; } :host([placement="end"]) [part~="base"] { flex-direction: row-reverse; } :host([placement="start"]) [part~="tablist"], :host([placement="end"]) [part~="tablist"] { flex-direction: column; align-items: stretch; flex: 1 1 auto; min-inline-size: 0; max-inline-size: 100%; gap: var(--lr-space-2xs); overflow-x: hidden; overflow-y: auto; min-block-size: 0; max-block-size: 100%; border-block-end: none; } :host([placement="start"]) [part="tab"], :host([placement="end"]) [part="tab"] { min-inline-size: 0; max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; } :host([placement="start"]) [data-tab-label], :host([placement="end"]) [data-tab-label] { display: block; flex: 1 1 auto; max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :host([placement="start"]) [part~="tablist"] { border-inline-end: var(--track-width, var(--lr-border-width-thin)) solid var(--track-color, var(--lr-color-border-subtle)); } :host([placement="end"]) [part~="tablist"] { border-inline-start: var(--track-width, var(--lr-border-width-thin)) solid var(--track-color, var(--lr-color-border-subtle)); } :host([placement="start"]) [part~="tablist"][data-scroll-overflow], :host([placement="end"]) [part~="tablist"][data-scroll-overflow] { -webkit-mask-image: none; mask-image: none; } :host([placement="start"]) [part="tab"][aria-selected="true"], :host([placement="end"]) [part="tab"][aria-selected="true"] { box-shadow: none; border-block-end-color: transparent; } :host([placement="start"]) [part="tab"][aria-selected="true"] { border-inline-end: var(--lr-border-width-thick) solid var( --indicator-color, var(--lr-tab-group-indicator-color, var(--lr-color-brand)) ); } :host([placement="end"]) [part="tab"][aria-selected="true"] { border-inline-start: var(--lr-border-width-thick) solid var( --indicator-color, var(--lr-tab-group-indicator-color, var(--lr-color-brand)) ); } :host([placement="start"]) [part="active-tab-indicator"] { inset-block: 0; inset-inline: auto calc(-1 * var(--lr-border-width-thick)); inline-size: var(--lr-border-width-thick); block-size: auto; } :host([placement="end"]) [part="active-tab-indicator"] { inset-block: 0; inset-inline: calc(-1 * var(--lr-border-width-thick)) auto; inline-size: var(--lr-border-width-thick); block-size: auto; } :host([placement="start"]) [part="panel"], :host([placement="end"]) [part="panel"] { flex: 1 1 auto; min-inline-size: 0; } `;export{styles};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{visuallyHidden}from"../../../internal/a11y.js";import{css}from"lit";const styles=css` :host { display: inline-flex; --_lr-copy-button-color: var(--lr-color-text-quiet); --_lr-copy-button-color-hover: var(--lr-icon-button-color, var(--lr-color-text)); --_lr-copy-button-color-active: var( --lr-icon-button-color-hover, var(--lr-icon-button-color, var(--lr-color-text)) ); } lr-tooltip { display: inline-flex; } slot:not([name]) { display: contents; } [part~='base'] { --_lr-icon-button-color-default: var(--_lr-copy-button-color); --_lr-icon-button-color-hover-default: var(--_lr-copy-button-color-hover); --_lr-icon-button-color-active-default: var(--_lr-copy-button-color-active); } [part~='base'][part~='base-success'] { --lr-icon-button-color: var(--success-color, var(--lr-color-success)); --lr-icon-button-color-hover: var(--success-color, var(--lr-color-success)); --lr-icon-button-color-active: var(--success-color, var(--lr-color-success)); } [part~='base'][part~='base-error'] { --lr-icon-button-color: var(--error-color, var(--lr-color-danger)); --lr-icon-button-color-hover: var(--error-color, var(--lr-color-danger)); --lr-icon-button-color-active: var(--error-color, var(--lr-color-danger)); } [part~='copy-icon'], [part~='success-icon'], [part~='error-icon'] { display: inline-flex; } [part~='copy-icon'] svg, [part~='success-icon'] svg, [part~='error-icon'] svg { display: block; } [part='feedback'] { ${visuallyHidden}
|
|
1
|
+
import{visuallyHidden}from"../../../internal/a11y.js";import{css}from"lit";const styles=css` :host { display: inline-flex; --_lr-copy-button-color: var(--lr-color-text-quiet); --_lr-copy-button-color-hover: var(--lr-icon-button-color, var(--lr-color-text)); --_lr-copy-button-color-active: var( --lr-icon-button-color-hover, var(--lr-icon-button-color, var(--lr-color-text)) ); } lr-tooltip { display: inline-flex; } slot:not([name]) { display: contents; } [part~='base'] { --_lr-icon-button-color-default: var(--_lr-copy-button-color); --_lr-icon-button-color-hover-default: var(--_lr-copy-button-color-hover); --_lr-icon-button-color-active-default: var(--_lr-copy-button-color-active); } [part~='base'][part~='base-success'] { --lr-icon-button-color: var(--success-color, var(--lr-color-success)); --lr-icon-button-color-hover: var(--success-color, var(--lr-color-success)); --lr-icon-button-color-active: var(--success-color, var(--lr-color-success)); } [part~='base'][part~='base-error'] { --lr-icon-button-color: var(--error-color, var(--lr-color-danger)); --lr-icon-button-color-hover: var(--error-color, var(--lr-color-danger)); --lr-icon-button-color-active: var(--error-color, var(--lr-color-danger)); } [part~='copy-icon'], [part~='success-icon'], [part~='error-icon'] { display: inline-flex; } [part~='copy-icon'] svg, [part~='success-icon'] svg, [part~='error-icon'] svg { display: block; } [part='feedback'] { ${visuallyHidden} } `;export{styles};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{css}from"lit";const styles=css`:host{inline-size:var(--lr-size-1px)!important;block-size:var(--lr-size-1px)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:none!important;padding:0!important;position:absolute!important;overflow:hidden!important}:host(:focus-within){clip-path:none!important;white-space:normal!important;block-size:auto!important;inline-size:auto!important;position:static!important;overflow:visible!important}`;export{styles};
|
|
1
|
+
import{css}from"lit";const styles=css`:host{inline-size:var(--lr-size-1px)!important;block-size:var(--lr-size-1px)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:none!important;padding:0!important;position:absolute!important;inset-block-start:0!important;inset-inline-start:0!important;overflow:hidden!important}:host(:focus-within){clip-path:none!important;white-space:normal!important;block-size:auto!important;inline-size:auto!important;position:static!important;overflow:visible!important}`;export{styles};
|
package/dist/internal/a11y.d.ts
CHANGED
|
@@ -39,15 +39,17 @@ export declare function resolveAccessibleTrigger(trigger:HTMLElement):HTMLElemen
|
|
|
39
39
|
/** Visually-hidden-but-screen-reader-available helper class.
|
|
40
40
|
*
|
|
41
41
|
* The hairline box is sized from the shared --lr-size-1px token and the logical
|
|
42
|
-
* inline-size/block-size
|
|
43
|
-
*
|
|
42
|
+
* inline-size/block-size properties rather than raw 1px literals and physical width/height,
|
|
43
|
+
* matching every component stylesheet in the library -- this module
|
|
44
44
|
* is shared by dozens of components, so an untokenized copy here would exempt all of them at once
|
|
45
45
|
* from the token scale -- and no automated gate would notice, since check-style-policy.mjs only
|
|
46
46
|
* walks component-level `.styles.ts` files and never this directory.
|
|
47
47
|
*
|
|
48
48
|
* Clipping uses `clip-path: inset(50%)`, not the deprecated `clip: rect(0 0 0 0)` shorthand --
|
|
49
49
|
* matching `styles/utilities.css`'s `.lr-visually-hidden` and every component stylesheet that
|
|
50
|
-
* ships its own copy.
|
|
51
|
-
* element on focus resets `clip-path: none` rather than `clip: auto
|
|
52
|
-
*
|
|
50
|
+
* ships its own copy. A consumer that reveals a `.sr-only`
|
|
51
|
+
* element on focus resets `clip-path: none` rather than `clip: auto`. Clipping does not establish
|
|
52
|
+
* an absolute-position containing block. Explicit logical start insets avoid static-position
|
|
53
|
+
* boxes escaping an intervening unpositioned scrollport and extending the document. Zero margin
|
|
54
|
+
* also keeps an RTL hidden box inside an LTR containing block's inline-end edge. */
|
|
53
55
|
export declare const visuallyHidden:import("lit").CSSResult;export declare const srOnly:import("lit").CSSResult;
|
package/dist/internal/a11y.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{css}from"lit";import{tag}from"./prefix.js";import{collectComposedFocusTargets}from"./focus-navigation.js";import{composedParentElement,isAccessibilityExcluded,isAccessibilitySubtreeExcluded,isAccessibilityVisible,isAccessibilityVisibilityHidden}from"./accessibility-visibility.js";const NEXT_ID_STATE=Symbol.for("@aceshooting/lyra-ui.next-id-state.v1"),fallbackNextIdState={counter:0};function highestReachableWindow(start){let candidate=start;for(;candidate.parent!==candidate;){const parent=candidate.parent;try{parent.document}catch{break}candidate=parent}return candidate}function sharedRealmRegistry(key,create,fallback,isValid=value=>value!=null){const host=typeof window>"u"?globalThis:highestReachableWindow(window),existing=host[key];if(isValid(existing))return existing;const created=create();try{return Object.defineProperty(host,key,{configurable:!1,enumerable:!1,value:created,writable:!1}),host[key]??created}catch{return fallback}}const isNextIdState=value=>typeof value=="object"&&value!==null&&Number.isSafeInteger(value.counter)&&value.counter>=0;function sharedNextIdState(){return sharedRealmRegistry(NEXT_ID_STATE,()=>({counter:0}),fallbackNextIdState,isNextIdState)}const nextId=scope=>{const state=sharedNextIdState();if(state.counter>=Number.MAX_SAFE_INTEGER)throw new RangeError("The Lyra generated-id sequence is exhausted.");return state.counter+=1,`${tag(scope)}-${state.counter}`};function hostAriaLabel(host){if(host.hasAttribute("aria-label"))return host.getAttribute("aria-label")??"";const hasOwnProperty=Object.prototype.hasOwnProperty.call(host,"accessibleLabel"),reactiveProperties=host.constructor.elementProperties;if(!hasOwnProperty&&!reactiveProperties?.has("accessibleLabel"))return null;const propertyValue=host.accessibleLabel;return typeof propertyValue=="string"&&propertyValue.length>0?propertyValue:null}function hasRealContent(nodes){return Array.from(nodes).some(n=>n.nodeType===Node.ELEMENT_NODE||(n.textContent??"").trim().length>0)}function resolveAccessibleTrigger(trigger){if(trigger.hasAttribute("tabindex")||trigger.tabIndex>=0)return trigger;const[focusable]=collectComposedFocusTargets(trigger,{includeRoot:!1,mode:"programmatic"}).elements;return focusable??trigger}const visuallyHidden=css` position: absolute; inline-size: var(--lr-size-1px); block-size: var(--lr-size-1px); padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; `,srOnly=css` .sr-only { ${visuallyHidden}
|
|
1
|
+
import{css}from"lit";import{tag}from"./prefix.js";import{collectComposedFocusTargets}from"./focus-navigation.js";import{composedParentElement,isAccessibilityExcluded,isAccessibilitySubtreeExcluded,isAccessibilityVisible,isAccessibilityVisibilityHidden}from"./accessibility-visibility.js";const NEXT_ID_STATE=Symbol.for("@aceshooting/lyra-ui.next-id-state.v1"),fallbackNextIdState={counter:0};function highestReachableWindow(start){let candidate=start;for(;candidate.parent!==candidate;){const parent=candidate.parent;try{parent.document}catch{break}candidate=parent}return candidate}function sharedRealmRegistry(key,create,fallback,isValid=value=>value!=null){const host=typeof window>"u"?globalThis:highestReachableWindow(window),existing=host[key];if(isValid(existing))return existing;const created=create();try{return Object.defineProperty(host,key,{configurable:!1,enumerable:!1,value:created,writable:!1}),host[key]??created}catch{return fallback}}const isNextIdState=value=>typeof value=="object"&&value!==null&&Number.isSafeInteger(value.counter)&&value.counter>=0;function sharedNextIdState(){return sharedRealmRegistry(NEXT_ID_STATE,()=>({counter:0}),fallbackNextIdState,isNextIdState)}const nextId=scope=>{const state=sharedNextIdState();if(state.counter>=Number.MAX_SAFE_INTEGER)throw new RangeError("The Lyra generated-id sequence is exhausted.");return state.counter+=1,`${tag(scope)}-${state.counter}`};function hostAriaLabel(host){if(host.hasAttribute("aria-label"))return host.getAttribute("aria-label")??"";const hasOwnProperty=Object.prototype.hasOwnProperty.call(host,"accessibleLabel"),reactiveProperties=host.constructor.elementProperties;if(!hasOwnProperty&&!reactiveProperties?.has("accessibleLabel"))return null;const propertyValue=host.accessibleLabel;return typeof propertyValue=="string"&&propertyValue.length>0?propertyValue:null}function hasRealContent(nodes){return Array.from(nodes).some(n=>n.nodeType===Node.ELEMENT_NODE||(n.textContent??"").trim().length>0)}function resolveAccessibleTrigger(trigger){if(trigger.hasAttribute("tabindex")||trigger.tabIndex>=0)return trigger;const[focusable]=collectComposedFocusTargets(trigger,{includeRoot:!1,mode:"programmatic"}).elements;return focusable??trigger}const visuallyHidden=css` position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: var(--lr-size-1px); block-size: var(--lr-size-1px); padding: 0; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; `,srOnly=css` .sr-only { ${visuallyHidden} } `;export{composedParentElement,hasRealContent,highestReachableWindow,hostAriaLabel,isAccessibilityExcluded,isAccessibilitySubtreeExcluded,isAccessibilityVisibilityHidden,isAccessibilityVisible,nextId,resolveAccessibleTrigger,sharedRealmRegistry,srOnly,visuallyHidden};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{getActiveNativeModal,getNativeModalMountTarget,isInNativeModalContext,SHARED_LIVE_REGION_ATTRIBUTE}from"./native-modal-context.js";import{finiteDuration}from"./numbers.js";import{isAccessibilityVisible}from"./accessibility-visibility.js";const DEFAULT_THROTTLE_MS=500,ambientTimerHost={setTimeout:(handler,timeout)=>globalThis.setTimeout(handler,timeout),clearTimeout:handle=>globalThis.clearTimeout(handle)};class Announcer{constructor(options){this._throttleMs=DEFAULT_THROTTLE_MS,this.throttleMs=options.throttleMs??DEFAULT_THROTTLE_MS,this.onFlush=options.onFlush,this.timerHost=options.timerHost??ambientTimerHost}get throttleMs(){return this._throttleMs}set throttleMs(value){this._throttleMs=finiteDuration(value,DEFAULT_THROTTLE_MS)}get pendingText(){return this.pending}get isPending(){return this.timer!==void 0}announce(text,options={}){if(this.pending=text,options.force){this.flush();return}this.timer??=this.timerHost.setTimeout(()=>this.flush(),this.throttleMs)}setTimerHost(timerHost){timerHost!==this.timerHost&&(this.timer!==void 0&&(this.timerHost.clearTimeout(this.timer),this.timer=void 0),this.timerHost=timerHost,this.pending!==void 0&&(this.timer=this.timerHost.setTimeout(()=>this.flush(),this.throttleMs)))}cancel(){this.timer!==void 0&&(this.timerHost.clearTimeout(this.timer),this.timer=void 0),this.pending=void 0}flush(){this.timer!==void 0&&(this.timerHost.clearTimeout(this.timer),this.timer=void 0);const text=this.pending;this.pending=void 0,text!==void 0&&this.onFlush(text)}}class AnnouncementSinkController{constructor(host,options={}){this.host=host,this.options=options,this.sinks=new Map,this.states=new Map,options.register!==!1&&host.addController?.(this)}hostConnected(){this.connect()}hostDisconnected(){this.disconnect()}connect(){this.states.clear(),this.syncSinks();for(const politeness of this.eagerChannels())this.sink(politeness)}disconnect(){this.releaseSinks(),this.states.clear()}adopted(){this.syncSinks()}transition(channel,state,message="",politeness){const fingerprint=`${state}\0${message}`,previous=this.states.get(channel);if(this.states.set(channel,fingerprint),previous===void 0||previous===fingerprint)return;const resolved=politeness??(state==="loading"?"polite":state==="error"?"assertive":void 0);resolved&&this.announce(message,resolved)}announce(message,politeness="polite"){!message||!this.host.isConnected||(this.syncSinks(),this.sink(politeness).announce(message))}announcePolite(message){this.announce(message,"polite")}announceAssertive(message){this.announce(message,"assertive")}current(politeness){if(this.host.isConnected)return this.syncSinks(),this.sink(politeness)}releaseChannel(politeness){this.sinks.get(politeness)?.release(),this.sinks.delete(politeness)}setExclusiveChannel(politeness){this.exclusiveChannel!==politeness&&(this.exclusiveChannel=politeness,this.releaseSinks(),politeness&&this.host.isConnected&&this.sink(politeness))}eagerChannels(){return this.exclusiveChannel?[this.exclusiveChannel]:this.options.eager??[]}sink(politeness){let sink=this.sinks.get(politeness);return sink||(sink=acquireAnnouncementSink(politeness,{document:this.host.ownerDocument,source:this.host}),this.sinks.set(politeness,sink)),sink}syncSinks(){if(!this.host.isConnected){this.releaseSinks();return}for(const sink of this.sinks.values())if(sink.element.ownerDocument!==this.host.ownerDocument){this.releaseSinks();for(const politeness of this.eagerChannels())this.sink(politeness);break}}releaseSinks(){for(const sink of this.sinks.values())sink.release();this.sinks.clear()}}const ANNOUNCEMENT_SINK_ATTRIBUTE=SHARED_LIVE_REGION_ATTRIBUTE,DEFAULT_MESSAGE_TTL_MS=5e3,MAX_PENDING_MESSAGES_PER_HANDLE=32,MAX_PENDING_MESSAGES_PER_SINK=128,SINK_HIDDEN_CSS_TEXT="position:absolute;width:1px;height:1px;padding:0;margin
|
|
1
|
+
import{getActiveNativeModal,getNativeModalMountTarget,isInNativeModalContext,SHARED_LIVE_REGION_ATTRIBUTE}from"./native-modal-context.js";import{finiteDuration}from"./numbers.js";import{isAccessibilityVisible}from"./accessibility-visibility.js";const DEFAULT_THROTTLE_MS=500,ambientTimerHost={setTimeout:(handler,timeout)=>globalThis.setTimeout(handler,timeout),clearTimeout:handle=>globalThis.clearTimeout(handle)};class Announcer{constructor(options){this._throttleMs=DEFAULT_THROTTLE_MS,this.throttleMs=options.throttleMs??DEFAULT_THROTTLE_MS,this.onFlush=options.onFlush,this.timerHost=options.timerHost??ambientTimerHost}get throttleMs(){return this._throttleMs}set throttleMs(value){this._throttleMs=finiteDuration(value,DEFAULT_THROTTLE_MS)}get pendingText(){return this.pending}get isPending(){return this.timer!==void 0}announce(text,options={}){if(this.pending=text,options.force){this.flush();return}this.timer??=this.timerHost.setTimeout(()=>this.flush(),this.throttleMs)}setTimerHost(timerHost){timerHost!==this.timerHost&&(this.timer!==void 0&&(this.timerHost.clearTimeout(this.timer),this.timer=void 0),this.timerHost=timerHost,this.pending!==void 0&&(this.timer=this.timerHost.setTimeout(()=>this.flush(),this.throttleMs)))}cancel(){this.timer!==void 0&&(this.timerHost.clearTimeout(this.timer),this.timer=void 0),this.pending=void 0}flush(){this.timer!==void 0&&(this.timerHost.clearTimeout(this.timer),this.timer=void 0);const text=this.pending;this.pending=void 0,text!==void 0&&this.onFlush(text)}}class AnnouncementSinkController{constructor(host,options={}){this.host=host,this.options=options,this.sinks=new Map,this.states=new Map,options.register!==!1&&host.addController?.(this)}hostConnected(){this.connect()}hostDisconnected(){this.disconnect()}connect(){this.states.clear(),this.syncSinks();for(const politeness of this.eagerChannels())this.sink(politeness)}disconnect(){this.releaseSinks(),this.states.clear()}adopted(){this.syncSinks()}transition(channel,state,message="",politeness){const fingerprint=`${state}\0${message}`,previous=this.states.get(channel);if(this.states.set(channel,fingerprint),previous===void 0||previous===fingerprint)return;const resolved=politeness??(state==="loading"?"polite":state==="error"?"assertive":void 0);resolved&&this.announce(message,resolved)}announce(message,politeness="polite"){!message||!this.host.isConnected||(this.syncSinks(),this.sink(politeness).announce(message))}announcePolite(message){this.announce(message,"polite")}announceAssertive(message){this.announce(message,"assertive")}current(politeness){if(this.host.isConnected)return this.syncSinks(),this.sink(politeness)}releaseChannel(politeness){this.sinks.get(politeness)?.release(),this.sinks.delete(politeness)}setExclusiveChannel(politeness){this.exclusiveChannel!==politeness&&(this.exclusiveChannel=politeness,this.releaseSinks(),politeness&&this.host.isConnected&&this.sink(politeness))}eagerChannels(){return this.exclusiveChannel?[this.exclusiveChannel]:this.options.eager??[]}sink(politeness){let sink=this.sinks.get(politeness);return sink||(sink=acquireAnnouncementSink(politeness,{document:this.host.ownerDocument,source:this.host}),this.sinks.set(politeness,sink)),sink}syncSinks(){if(!this.host.isConnected){this.releaseSinks();return}for(const sink of this.sinks.values())if(sink.element.ownerDocument!==this.host.ownerDocument){this.releaseSinks();for(const politeness of this.eagerChannels())this.sink(politeness);break}}releaseSinks(){for(const sink of this.sinks.values())sink.release();this.sinks.clear()}}const ANNOUNCEMENT_SINK_ATTRIBUTE=SHARED_LIVE_REGION_ATTRIBUTE,DEFAULT_MESSAGE_TTL_MS=5e3,MAX_PENDING_MESSAGES_PER_HANDLE=32,MAX_PENDING_MESSAGES_PER_SINK=128,SINK_HIDDEN_CSS_TEXT="position:absolute;inset-block-start:0;inset-inline-start:0;width:1px;height:1px;padding:0;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;",sinksByParent=new WeakMap;function removePendingAnnouncement(record,pending){record.pending.delete(pending.element),pending.owner.delete(pending.element),pending.element.remove()}function scheduleSinkSweep(record){let earliest=Number.POSITIVE_INFINITY;for(const pending of record.pending.values())earliest=Math.min(earliest,pending.deadline);if(!Number.isFinite(earliest)){record.sweepTimer!==void 0&&(record.timerHost.clearTimeout(record.sweepTimer),record.sweepTimer=void 0,record.sweepDeadline=void 0);return}if(record.sweepTimer!==void 0&&record.sweepDeadline!==void 0&&record.sweepDeadline<=earliest)return;record.sweepTimer!==void 0&&record.timerHost.clearTimeout(record.sweepTimer),record.sweepDeadline=earliest;const scheduledDeadline=earliest;record.sweepTimer=record.timerHost.setTimeout(()=>{record.sweepTimer=void 0,record.sweepDeadline=void 0;for(const pending of[...record.pending.values()])pending.deadline<=scheduledDeadline&&removePendingAnnouncement(record,pending);scheduleSinkSweep(record)},Math.max(0,earliest-Date.now()))}function mountSink(record){record.element.parentNode!==record.parent&&record.parent.appendChild(record.element)}function sinkRecord(doc,politeness,parent){let byPoliteness=sinksByParent.get(parent);byPoliteness||(byPoliteness=new Map,sinksByParent.set(parent,byPoliteness));const existing=byPoliteness.get(politeness);if(existing)return mountSink(existing),existing;const element=doc.createElement("div");element.setAttribute(ANNOUNCEMENT_SINK_ATTRIBUTE,politeness),element.setAttribute("role",politeness==="assertive"?"alert":"status"),element.setAttribute("aria-live",politeness),element.setAttribute("aria-atomic","false"),element.setAttribute("aria-relevant","additions"),element.style.cssText=SINK_HIDDEN_CSS_TEXT;const ownerWindow=doc.defaultView,record={parent,element,refs:0,timerHost:ownerWindow?{setTimeout:(handler,timeout)=>ownerWindow.setTimeout(handler,timeout),clearTimeout:handle=>ownerWindow.clearTimeout(handle)}:ambientTimerHost,pending:new Map};return mountSink(record),byPoliteness.set(politeness,record),record}const inertSink=politeness=>({element:void 0,politeness,messageTtlMs:DEFAULT_MESSAGE_TTL_MS,announce:()=>{},release:()=>{}});function acquireAnnouncementSink(politeness,options={}){const doc=options.document??(typeof document>"u"?void 0:document);if(!doc)return inertSink(politeness);let record=sinkRecord(doc,politeness,(()=>{const modal=getActiveNativeModal(doc);return modal?getNativeModalMountTarget(modal):doc.body??doc.documentElement})());record.refs+=1;const ownMessages=new Set;let released=!1,deferredTimer,deferredMessages=[];const releaseRecord=()=>{for(const message of[...ownMessages]){const pending=record.pending.get(message);pending?removePendingAnnouncement(record,pending):ownMessages.delete(message)}if(scheduleSinkSweep(record),record.refs-=1,record.refs>0)return;record.sweepTimer!==void 0&&(record.timerHost.clearTimeout(record.sweepTimer),record.sweepTimer=void 0,record.sweepDeadline=void 0),record.pending.clear(),record.element.remove();const byPoliteness=sinksByParent.get(record.parent);byPoliteness?.get(politeness)===record&&byPoliteness.delete(politeness)},sink={get element(){return record.element},politeness,messageTtlMs:finiteDuration(options.messageTtlMs??DEFAULT_MESSAGE_TTL_MS,DEFAULT_MESSAGE_TTL_MS),announce(text){if(released||text===""||options.source&&(options.source.ownerDocument!==doc||!isAccessibilityVisible(options.source)))return;const modal=getActiveNativeModal(doc);if(modal&&options.source&&!isInNativeModalContext(options.source,modal))return;const parent=modal?getNativeModalMountTarget(modal):doc.body??doc.documentElement;if(record.parent!==parent&&(releaseRecord(),record=sinkRecord(doc,politeness,parent),record.refs+=1,deferredMessages=[],deferredTimer!==void 0&&record.timerHost.clearTimeout(deferredTimer),deferredTimer=record.timerHost.setTimeout(()=>{deferredTimer=void 0;const messages=deferredMessages;deferredMessages=[];for(const message2 of messages)sink.announce(message2)},0)),deferredTimer!==void 0){deferredMessages.push(text),deferredMessages.length>MAX_PENDING_MESSAGES_PER_HANDLE&&deferredMessages.shift();return}mountSink(record);const message=doc.createElement("div");message.textContent=text,record.element.appendChild(message);const ttl=finiteDuration(sink.messageTtlMs,DEFAULT_MESSAGE_TTL_MS),pending={element:message,owner:ownMessages,deadline:Date.now()+ttl};for(ownMessages.add(message),record.pending.set(message,pending);ownMessages.size>MAX_PENDING_MESSAGES_PER_HANDLE;){const oldest=ownMessages.values().next().value;if(!oldest)break;const entry=record.pending.get(oldest);entry?removePendingAnnouncement(record,entry):ownMessages.delete(oldest)}for(;record.pending.size>MAX_PENDING_MESSAGES_PER_SINK;){const oldest=record.pending.values().next().value;if(!oldest)break;removePendingAnnouncement(record,oldest)}scheduleSinkSweep(record)},release(){released||(released=!0,deferredTimer!==void 0&&record.timerHost.clearTimeout(deferredTimer),deferredTimer=void 0,deferredMessages=[],releaseRecord())}};return sink}export{ANNOUNCEMENT_SINK_ATTRIBUTE,AnnouncementSinkController,Announcer,acquireAnnouncementSink};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
const LYRA_PACKAGE_NAME="@aceshooting/lyra-ui",LYRA_PACKAGE_VERSION="28.1.
|
|
1
|
+
const LYRA_PACKAGE_NAME="@aceshooting/lyra-ui",LYRA_PACKAGE_VERSION="28.1.5";export{LYRA_PACKAGE_NAME,LYRA_PACKAGE_VERSION};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer lr-base,lr-theme,lr-theme-preset;@layer lr-utilities{:where(.lr-prose,.lr-heading-1,.lr-heading-2,.lr-heading-3,.lr-heading-4),:where(.lr-typography) :where(h1,h2,h3,h4,h5,h6,p,li,dt,dd,blockquote):where(:not([slot],.lr-not-typography,.lr-not-typography *)){line-break:var(--lr-line-break,var(--lr-theme-line-break,inherit));word-break:var(--lr-word-break,var(--lr-theme-word-break,inherit))}:where(.lr-heading-1,.lr-heading-2,.lr-heading-3,.lr-heading-4),:where(.lr-typography) :where(h1,h2,h3,h4,h5,h6):where(:not([slot],.lr-not-typography,.lr-not-typography *,.lr-heading-1,.lr-heading-2,.lr-heading-3,.lr-heading-4)){font-family:var(--lr-theme-font-family-heading,inherit);font-weight:var(--lr-font-weight-semibold,var(--lr-theme-font-weight-semibold,600));line-height:var(--lr-line-height-compact,var(--lr-theme-line-height-compact,1.25));letter-spacing:var(--lr-heading-letter-spacing,var(--lr-theme-heading-letter-spacing,normal));overflow-wrap:anywhere;text-wrap-style:balance;break-after:avoid}:where(.lr-heading-1),:where(.lr-typography) :where(h1):where(:not([slot],.lr-not-typography,.lr-not-typography *,.lr-heading-1,.lr-heading-2,.lr-heading-3,.lr-heading-4)){font-size:var(--lr-font-size-3xl,var(--lr-theme-font-size-3xl,2rem));font-weight:var(--lr-font-weight-bold,var(--lr-theme-font-weight-bold,700))}:where(.lr-heading-2),:where(.lr-typography) :where(h2):where(:not([slot],.lr-not-typography,.lr-not-typography *,.lr-heading-1,.lr-heading-2,.lr-heading-3,.lr-heading-4)){border-block-end:var(--lr-border-width-thin,var(--lr-theme-border-width-thin,1px)) solid var(--lr-color-border-subtle,var(--lr-theme-color-surface-border-subtle,var(--lr-color-border,var(--lr-theme-color-surface-border,GrayText))));font-size:var(--lr-font-size-2xl,var(--lr-theme-font-size-2xl,1.75rem));padding-block-end:var(--lr-space-s,var(--lr-theme-space-s,.5rem))}:where(.lr-heading-3),:where(.lr-typography) :where(h3):where(:not([slot],.lr-not-typography,.lr-not-typography *,.lr-heading-1,.lr-heading-2,.lr-heading-3,.lr-heading-4)){font-size:var(--lr-font-size-xl,var(--lr-theme-font-size-xl,1.25rem))}:where(.lr-heading-4),:where(.lr-typography) :where(h4):where(:not([slot],.lr-not-typography,.lr-not-typography *,.lr-heading-1,.lr-heading-2,.lr-heading-3,.lr-heading-4)){font-size:var(--lr-font-size-lg,var(--lr-theme-font-size-lg,1.125rem))}:where(.lr-typography) :where(h5):where(:not([slot],.lr-not-typography,.lr-not-typography *,.lr-heading-1,.lr-heading-2,.lr-heading-3,.lr-heading-4)){font-size:var(--lr-font-size-m,var(--lr-theme-font-size-m,1rem))}:where(.lr-typography) :where(h6):where(:not([slot],.lr-not-typography,.lr-not-typography *,.lr-heading-1,.lr-heading-2,.lr-heading-3,.lr-heading-4)){font-size:var(--lr-font-size-sm,var(--lr-theme-font-size-sm,.8125rem))}:where(.lr-heading-1,.lr-heading-2,.lr-heading-3,.lr-heading-4):where(:lang(ar),:lang(fa),:lang(ur),:lang(ps),:lang(ckb),:lang(sd),:lang(ug),:lang(syr)),:where(.lr-typography) :where(h1,h2,h3,h4,h5,h6):where(:not([slot],.lr-not-typography,.lr-not-typography *,.lr-heading-1,.lr-heading-2,.lr-heading-3,.lr-heading-4)):where(:lang(ar),:lang(fa),:lang(ur),:lang(ps),:lang(ckb),:lang(sd),:lang(ug),:lang(syr)){letter-spacing:normal}:where(.lr-typography) :where(p):where(:not([slot],.lr-not-typography,.lr-not-typography *,.lr-heading-1,.lr-heading-2,.lr-heading-3,.lr-heading-4)){line-height:var(--lr-line-height-loose,var(--lr-theme-line-height-loose,1.6))}:where(.lr-typography) :where(p,li,blockquote):where(:not([slot],.lr-not-typography,.lr-not-typography *,.lr-heading-1,.lr-heading-2,.lr-heading-3,.lr-heading-4)){overflow-wrap:anywhere}:where(.lr-typography) :where(blockquote):where(:not([slot],.lr-not-typography,.lr-not-typography *,.lr-heading-1,.lr-heading-2,.lr-heading-3,.lr-heading-4)){border-inline-start:var(--lr-prose-quote-border-width,var(--lr-border-width-medium,var(--lr-theme-border-width-medium,2px))) solid var(--lr-color-border-subtle,var(--lr-theme-color-surface-border-subtle,var(--lr-color-border,var(--lr-theme-color-surface-border,GrayText))));color:inherit;margin-inline:0;padding-inline-start:var(--lr-prose-quote-padding,var(--lr-space-l,var(--lr-theme-space-l,1rem)));font-style:italic}:where(.lr-typography) :where(blockquote):where(:not([slot],.lr-not-typography,.lr-not-typography *,.lr-heading-1,.lr-heading-2,.lr-heading-3,.lr-heading-4)):where(:lang(ar),:lang(fa),:lang(ur),:lang(ps),:lang(ckb),:lang(sd),:lang(ug),:lang(syr),:lang(he),:lang(yi),:lang(ja),:lang(ko),:lang(zh)){font-style:normal}:where(.lr-typography) :where(ul,ol):where(:not([slot],.lr-not-typography,.lr-not-typography *)){padding-inline-start:var(--lr-space-2xl,var(--lr-theme-space-2xl,2rem))}:where(.lr-typography) :where(ul):where(:not([type],[slot],.lr-not-typography,.lr-not-typography *)){list-style-type:disc}:where(.lr-typography) :where(ul,ol) :where(ul):where(:not([type],[slot],.lr-not-typography,.lr-not-typography *)){list-style-type:circle}:where(.lr-typography) :where(ul,ol) :where(ul,ol) :where(ul):where(:not([type],[slot],.lr-not-typography,.lr-not-typography *)){list-style-type:square}:where(.lr-typography) :where(ol):where(:not([type],[slot],.lr-not-typography,.lr-not-typography *)){list-style-type:decimal}:where(.lr-typography) :where(li)+:where(li):where(:not([slot],.lr-not-typography,.lr-not-typography *)),:where(.lr-typography) :where(li)>:where(ul,ol):where(:not([slot],.lr-not-typography,.lr-not-typography *)){margin-block-start:var(--lr-space-s,var(--lr-theme-space-s,.5rem))}:where(.lr-typography) :where(a[href]):where(:not([slot],.lr-not-typography,.lr-not-typography *)){color:var(--lr-color-brand,var(--lr-theme-color-brand-fill-loud,LinkText));text-decoration-line:underline;text-decoration-thickness:var(--lr-border-width-thin,var(--lr-theme-border-width-thin,1px));text-underline-offset:var(--lr-space-2xs,var(--lr-theme-space-2xs,.125rem))}:where(.lr-typography) :where(a[href]):where(:not([slot],.lr-not-typography,.lr-not-typography *)):where(:hover){text-decoration-thickness:var(--lr-border-width-medium,var(--lr-theme-border-width-medium,2px))}:where(.lr-inline-code),:where(.lr-typography) :where(code):where(:not(pre code,[slot],.lr-not-typography,.lr-not-typography *)){padding-block:var(--lr-space-2xs,var(--lr-theme-space-2xs,.125rem));padding-inline:var(--lr-space-xs,var(--lr-theme-space-xs,.25rem));border-radius:var(--lr-radius-xs,var(--lr-theme-border-radius-xs,2px));background:var(--lr-color-neutral-fill-quiet,var(--lr-theme-color-neutral-fill-quiet,Canvas));color:var(--lr-color-text,var(--lr-theme-color-text-normal,CanvasText));font-family:var(--lr-font-mono,var(--lr-theme-font-family-mono,ui-monospace, SFMono-Regular, Menlo, Consolas, monospace));font-size:var(--lr-size-0-875em,.875em);font-weight:var(--lr-font-weight-semibold,var(--lr-theme-font-weight-semibold,600));overflow-wrap:anywhere}:where(a) :where(.lr-inline-code),:where(.lr-typography) :where(a) :where(code):where(:not(pre code,[slot],.lr-not-typography,.lr-not-typography *)){color:inherit}:where(.lr-typography) :where(table):where(:not([slot],.lr-not-typography,.lr-not-typography *)){border-collapse:collapse;inline-size:100%}:where(.lr-typography) :where(th,td):where(:not([slot],.lr-not-typography,.lr-not-typography *)){padding-block:var(--lr-space-s,var(--lr-theme-space-s,.5rem));padding-inline:var(--lr-space-l,var(--lr-theme-space-l,1rem));border:var(--lr-border-width-thin,var(--lr-theme-border-width-thin,1px)) solid var(--lr-color-border-subtle,var(--lr-theme-color-surface-border-subtle,var(--lr-color-border,var(--lr-theme-color-surface-border,GrayText))))}:where(.lr-typography) :where(th,td):where(:not([align],[slot],.lr-not-typography,.lr-not-typography *)){text-align:start}:where(.lr-typography) :where(th):where(:not([slot],.lr-not-typography,.lr-not-typography *)){font-weight:var(--lr-font-weight-bold,var(--lr-theme-font-weight-bold,700))}:where(.lr-typography) :where(tr):where(:not([slot],.lr-not-typography,.lr-not-typography *)){break-inside:avoid}:where(.lr-typography) :where(tr):where(:nth-child(2n)):where(:not([slot],.lr-not-typography,.lr-not-typography *)){background:var(--lr-color-surface-raised,var(--lr-theme-color-surface-raised,Canvas))}:where(.lr-block){display:block}:where(.lr-inline-block){display:inline-block}:where(.lr-flex){display:flex}:where(.lr-inline-flex){display:inline-flex}:where(.lr-grid){display:grid}:where(.lr-flow-root){display:flow-root}:where(.lr-stack){gap:var(--lr-layout-gap,var(--lr-space-m,var(--lr-theme-space-m,.75rem)));flex-direction:column;display:flex}:where(.lr-cluster){align-items:center;gap:var(--lr-layout-gap,var(--lr-space-m,var(--lr-theme-space-m,.75rem)));flex-wrap:wrap;display:flex}:where(.lr-grid-auto){grid-template-columns:repeat(auto-fit, minmax(min(100%, var(--lr-grid-min-inline-size,var(--lr-size-14rem,var(--lr-theme-size-14rem,14rem)))), 1fr));gap:var(--lr-layout-gap,var(--lr-space-m,var(--lr-theme-space-m,.75rem)));display:grid}:where(.lr-row){flex-direction:row}:where(.lr-column){flex-direction:column}:where(.lr-wrap){flex-wrap:wrap}:where(.lr-nowrap){flex-wrap:nowrap}:where(.lr-grow){flex-grow:1}:where(.lr-grow-0){flex-grow:0}:where(.lr-shrink){flex-shrink:1}:where(.lr-shrink-0){flex-shrink:0}:where(.lr-items-start){align-items:start}:where(.lr-items-center){align-items:center}:where(.lr-items-end){align-items:end}:where(.lr-items-stretch){align-items:stretch}:where(.lr-items-baseline){align-items:baseline}:where(.lr-justify-start){justify-content:start}:where(.lr-justify-center){justify-content:center}:where(.lr-justify-end){justify-content:end}:where(.lr-justify-between){justify-content:space-between}:where(.lr-justify-around){justify-content:space-around}:where(.lr-self-start){align-self:start}:where(.lr-self-center){align-self:center}:where(.lr-self-end){align-self:end}:where(.lr-self-stretch){align-self:stretch}:where(.lr-gap-0){gap:0}:where(.lr-gap-xs){gap:var(--lr-space-xs,var(--lr-theme-space-xs,.25rem))}:where(.lr-gap-s){gap:var(--lr-space-s,var(--lr-theme-space-s,.5rem))}:where(.lr-gap-m){gap:var(--lr-space-m,var(--lr-theme-space-m,.75rem))}:where(.lr-gap-l){gap:var(--lr-space-l,var(--lr-theme-space-l,1rem))}:where(.lr-gap-2xl){gap:var(--lr-space-2xl,var(--lr-theme-space-2xl,2rem))}:where(.lr-inline-full){inline-size:100%}:where(.lr-block-full){block-size:100%}:where(.lr-size-full){block-size:100%;inline-size:100%}:where(.lr-min-inline-0){min-inline-size:0}:where(.lr-min-block-0){min-block-size:0}:where(.lr-max-inline-full){max-inline-size:100%}:where(.lr-max-inline-prose){max-inline-size:var(--lr-prose-max-inline-size,65ch)}:where(.lr-center){inline-size:min(100%, var(--lr-content-max-inline-size,var(--lr-size-48rem,var(--lr-theme-size-48rem,48rem))));margin-inline:auto}:where(.lr-overflow-auto){overflow:auto}:where(.lr-overflow-hidden){overflow:hidden}:where(.lr-text-start){text-align:start}:where(.lr-text-center){text-align:center}:where(.lr-text-end){text-align:end}:where(.lr-text-xs){font-size:var(--lr-font-size-xs,var(--lr-theme-font-size-xs,.75rem))}:where(.lr-text-sm){font-size:var(--lr-font-size-sm,var(--lr-theme-font-size-sm,.8125rem))}:where(.lr-text-base){font-size:var(--lr-font-size-m,var(--lr-theme-font-size-m,1rem))}:where(.lr-text-lg){font-size:var(--lr-font-size-lg,var(--lr-theme-font-size-lg,1.125rem))}:where(.lr-text-xl){font-size:var(--lr-font-size-xl,var(--lr-theme-font-size-xl,1.25rem))}:where(.lr-text-quiet){color:var(--lr-color-text-quiet,var(--lr-theme-color-text-quiet,GrayText))}:where(.lr-font-normal){font-weight:var(--lr-font-weight-normal,var(--lr-theme-font-weight-normal,400))}:where(.lr-font-medium){font-weight:var(--lr-font-weight-medium,var(--lr-theme-font-weight-medium,500))}:where(.lr-font-semibold){font-weight:var(--lr-font-weight-semibold,var(--lr-theme-font-weight-semibold,600))}:where(.lr-font-bold){font-weight:var(--lr-font-weight-bold,var(--lr-theme-font-weight-bold,700))}:where(.lr-font-mono){font-family:var(--lr-font-mono,var(--lr-theme-font-family-mono,ui-monospace, SFMono-Regular, Menlo, Consolas, monospace))}:where(.lr-text-break){overflow-wrap:anywhere;min-inline-size:0}:where(.lr-text-nowrap){white-space:nowrap}:where(.lr-truncate){text-overflow:ellipsis;white-space:nowrap;min-inline-size:0;overflow:hidden}:where(.lr-text-balance){text-wrap:balance}:where(.lr-text-pretty){text-wrap:pretty}:where(.lr-prose){max-inline-size:var(--lr-prose-max-inline-size,65ch);color:var(--lr-color-text,var(--lr-theme-color-text-normal,CanvasText));font-family:var(--lr-font,var(--lr-theme-font-family-body,system-ui, sans-serif));font-size:var(--lr-font-size-m,var(--lr-theme-font-size-m,1rem));line-height:var(--lr-line-height-normal,var(--lr-theme-line-height-normal,1.5));overflow-wrap:anywhere}:where(.lr-prose)>:where(h1,h2,h3,h4,h5,h6,p,ul,ol,dl,blockquote,pre,table,figure){margin-block:0}:where(.lr-prose)>:where(h1,h2,h3,h4,h5,h6,p,ul,ol,dl,blockquote,pre,table,figure)+:where(h1,h2,h3,h4,h5,h6,p,ul,ol,dl,blockquote,pre,table,figure){margin-block-start:var(--lr-prose-flow-space,var(--lr-space-l,var(--lr-theme-space-l,1rem)))}:where(.lr-typography):where(:not(.lr-not-typography *))>:where(*):where(:not([slot])){margin-block:0}:where(.lr-typography):where(:not(.lr-not-typography *))>:where(*)+:where(*):where(:not([slot])){margin-block-start:var(--lr-prose-flow-space,var(--lr-space-l,var(--lr-theme-space-l,1rem)))}:where(.lr-typography):where(:not(.lr-not-typography *))>:where(*)+:where(h1,h2,h3,h4,h5,h6):where(:not([slot])){margin-block-start:calc(var(--lr-prose-flow-space,var(--lr-space-l,var(--lr-theme-space-l,1rem))) * 2)}:where(.lr-prose) :where(h1,h2,h3,h4,h5,h6):where(:not(.lr-heading-1,.lr-heading-2,.lr-heading-3,.lr-heading-4)):where(:not(.lr-typography *),[slot],.lr-not-typography,.lr-not-typography *){color:var(--lr-color-text,var(--lr-theme-color-text-normal,CanvasText));font-weight:var(--lr-font-weight-semibold,var(--lr-theme-font-weight-semibold,600));line-height:var(--lr-line-height-compact,var(--lr-theme-line-height-compact,1.25))}:where(.lr-prose) :where(h1):where(:not(.lr-heading-1,.lr-heading-2,.lr-heading-3,.lr-heading-4)):where(:not(.lr-typography *),[slot],.lr-not-typography,.lr-not-typography *){font-size:var(--lr-font-size-3xl,var(--lr-theme-font-size-3xl,2rem))}:where(.lr-prose) :where(h2):where(:not(.lr-heading-1,.lr-heading-2,.lr-heading-3,.lr-heading-4)):where(:not(.lr-typography *),[slot],.lr-not-typography,.lr-not-typography *){font-size:var(--lr-font-size-2xl,var(--lr-theme-font-size-2xl,1.75rem))}:where(.lr-prose) :where(h3):where(:not(.lr-heading-1,.lr-heading-2,.lr-heading-3,.lr-heading-4)):where(:not(.lr-typography *),[slot],.lr-not-typography,.lr-not-typography *){font-size:var(--lr-font-size-xl,var(--lr-theme-font-size-xl,1.25rem))}:where(.lr-prose) :where(a){color:var(--lr-color-brand,var(--lr-theme-color-brand-fill-loud,LinkText));text-underline-offset:var(--lr-space-2xs,var(--lr-theme-space-2xs,.125rem))}:where(.lr-prose) :where(code,kbd,samp,pre){font-family:var(--lr-font-mono,var(--lr-theme-font-family-mono,ui-monospace, SFMono-Regular, Menlo, Consolas, monospace))}:where(.lr-prose) :where(blockquote):where(:not(.lr-typography *),[slot],.lr-not-typography,.lr-not-typography *){border-inline-start:var(--lr-prose-quote-border-width,var(--lr-border-width-thick,var(--lr-theme-border-width-thick,3px))) solid var(--lr-color-border-strong,var(--lr-theme-color-border-strong,GrayText));color:var(--lr-color-text-quiet,var(--lr-theme-color-text-quiet,GrayText));padding-inline-start:var(--lr-prose-quote-padding,var(--lr-space-l,var(--lr-theme-space-l,1rem)))}:where(.lr-visually-hidden),:where(.lr-visually-hidden-focusable:not(:focus,:focus-within)){inline-size:var(--lr-visually-hidden-size,var(--lr-size-1px,1px));block-size:var(--lr-visually-hidden-size,var(--lr-size-1px,1px));clip-path:inset(50%);white-space:nowrap;border:0;padding:0;position:absolute;overflow:hidden}:where(.lr-visually-hidden-focusable:focus,.lr-visually-hidden-focusable:focus-within){clip-path:none;white-space:normal;block-size:auto;inline-size:auto;position:static;overflow:visible}:where(.lr-fouce-hidden:not(:defined)){visibility:hidden}:where(.lr-hidden),:where(lr-page[view=desktop]) :where(.lr-page-mobile-only),:where(lr-page[view=mobile]) :where(.lr-page-desktop-only){display:none}}@layer lr-overrides;
|
|
1
|
+
@layer lr-base,lr-theme,lr-theme-preset;@layer lr-utilities{:where(.lr-prose,.lr-heading-1,.lr-heading-2,.lr-heading-3,.lr-heading-4),:where(.lr-typography) :where(h1,h2,h3,h4,h5,h6,p,li,dt,dd,blockquote):where(:not([slot],.lr-not-typography,.lr-not-typography *)){line-break:var(--lr-line-break,var(--lr-theme-line-break,inherit));word-break:var(--lr-word-break,var(--lr-theme-word-break,inherit))}:where(.lr-heading-1,.lr-heading-2,.lr-heading-3,.lr-heading-4),:where(.lr-typography) :where(h1,h2,h3,h4,h5,h6):where(:not([slot],.lr-not-typography,.lr-not-typography *,.lr-heading-1,.lr-heading-2,.lr-heading-3,.lr-heading-4)){font-family:var(--lr-theme-font-family-heading,inherit);font-weight:var(--lr-font-weight-semibold,var(--lr-theme-font-weight-semibold,600));line-height:var(--lr-line-height-compact,var(--lr-theme-line-height-compact,1.25));letter-spacing:var(--lr-heading-letter-spacing,var(--lr-theme-heading-letter-spacing,normal));overflow-wrap:anywhere;text-wrap-style:balance;break-after:avoid}:where(.lr-heading-1),:where(.lr-typography) :where(h1):where(:not([slot],.lr-not-typography,.lr-not-typography *,.lr-heading-1,.lr-heading-2,.lr-heading-3,.lr-heading-4)){font-size:var(--lr-font-size-3xl,var(--lr-theme-font-size-3xl,2rem));font-weight:var(--lr-font-weight-bold,var(--lr-theme-font-weight-bold,700))}:where(.lr-heading-2),:where(.lr-typography) :where(h2):where(:not([slot],.lr-not-typography,.lr-not-typography *,.lr-heading-1,.lr-heading-2,.lr-heading-3,.lr-heading-4)){border-block-end:var(--lr-border-width-thin,var(--lr-theme-border-width-thin,1px)) solid var(--lr-color-border-subtle,var(--lr-theme-color-surface-border-subtle,var(--lr-color-border,var(--lr-theme-color-surface-border,GrayText))));font-size:var(--lr-font-size-2xl,var(--lr-theme-font-size-2xl,1.75rem));padding-block-end:var(--lr-space-s,var(--lr-theme-space-s,.5rem))}:where(.lr-heading-3),:where(.lr-typography) :where(h3):where(:not([slot],.lr-not-typography,.lr-not-typography *,.lr-heading-1,.lr-heading-2,.lr-heading-3,.lr-heading-4)){font-size:var(--lr-font-size-xl,var(--lr-theme-font-size-xl,1.25rem))}:where(.lr-heading-4),:where(.lr-typography) :where(h4):where(:not([slot],.lr-not-typography,.lr-not-typography *,.lr-heading-1,.lr-heading-2,.lr-heading-3,.lr-heading-4)){font-size:var(--lr-font-size-lg,var(--lr-theme-font-size-lg,1.125rem))}:where(.lr-typography) :where(h5):where(:not([slot],.lr-not-typography,.lr-not-typography *,.lr-heading-1,.lr-heading-2,.lr-heading-3,.lr-heading-4)){font-size:var(--lr-font-size-m,var(--lr-theme-font-size-m,1rem))}:where(.lr-typography) :where(h6):where(:not([slot],.lr-not-typography,.lr-not-typography *,.lr-heading-1,.lr-heading-2,.lr-heading-3,.lr-heading-4)){font-size:var(--lr-font-size-sm,var(--lr-theme-font-size-sm,.8125rem))}:where(.lr-heading-1,.lr-heading-2,.lr-heading-3,.lr-heading-4):where(:lang(ar),:lang(fa),:lang(ur),:lang(ps),:lang(ckb),:lang(sd),:lang(ug),:lang(syr)),:where(.lr-typography) :where(h1,h2,h3,h4,h5,h6):where(:not([slot],.lr-not-typography,.lr-not-typography *,.lr-heading-1,.lr-heading-2,.lr-heading-3,.lr-heading-4)):where(:lang(ar),:lang(fa),:lang(ur),:lang(ps),:lang(ckb),:lang(sd),:lang(ug),:lang(syr)){letter-spacing:normal}:where(.lr-typography) :where(p):where(:not([slot],.lr-not-typography,.lr-not-typography *,.lr-heading-1,.lr-heading-2,.lr-heading-3,.lr-heading-4)){line-height:var(--lr-line-height-loose,var(--lr-theme-line-height-loose,1.6))}:where(.lr-typography) :where(p,li,blockquote):where(:not([slot],.lr-not-typography,.lr-not-typography *,.lr-heading-1,.lr-heading-2,.lr-heading-3,.lr-heading-4)){overflow-wrap:anywhere}:where(.lr-typography) :where(blockquote):where(:not([slot],.lr-not-typography,.lr-not-typography *,.lr-heading-1,.lr-heading-2,.lr-heading-3,.lr-heading-4)){border-inline-start:var(--lr-prose-quote-border-width,var(--lr-border-width-medium,var(--lr-theme-border-width-medium,2px))) solid var(--lr-color-border-subtle,var(--lr-theme-color-surface-border-subtle,var(--lr-color-border,var(--lr-theme-color-surface-border,GrayText))));color:inherit;margin-inline:0;padding-inline-start:var(--lr-prose-quote-padding,var(--lr-space-l,var(--lr-theme-space-l,1rem)));font-style:italic}:where(.lr-typography) :where(blockquote):where(:not([slot],.lr-not-typography,.lr-not-typography *,.lr-heading-1,.lr-heading-2,.lr-heading-3,.lr-heading-4)):where(:lang(ar),:lang(fa),:lang(ur),:lang(ps),:lang(ckb),:lang(sd),:lang(ug),:lang(syr),:lang(he),:lang(yi),:lang(ja),:lang(ko),:lang(zh)){font-style:normal}:where(.lr-typography) :where(ul,ol):where(:not([slot],.lr-not-typography,.lr-not-typography *)){padding-inline-start:var(--lr-space-2xl,var(--lr-theme-space-2xl,2rem))}:where(.lr-typography) :where(ul):where(:not([type],[slot],.lr-not-typography,.lr-not-typography *)){list-style-type:disc}:where(.lr-typography) :where(ul,ol) :where(ul):where(:not([type],[slot],.lr-not-typography,.lr-not-typography *)){list-style-type:circle}:where(.lr-typography) :where(ul,ol) :where(ul,ol) :where(ul):where(:not([type],[slot],.lr-not-typography,.lr-not-typography *)){list-style-type:square}:where(.lr-typography) :where(ol):where(:not([type],[slot],.lr-not-typography,.lr-not-typography *)){list-style-type:decimal}:where(.lr-typography) :where(li)+:where(li):where(:not([slot],.lr-not-typography,.lr-not-typography *)),:where(.lr-typography) :where(li)>:where(ul,ol):where(:not([slot],.lr-not-typography,.lr-not-typography *)){margin-block-start:var(--lr-space-s,var(--lr-theme-space-s,.5rem))}:where(.lr-typography) :where(a[href]):where(:not([slot],.lr-not-typography,.lr-not-typography *)){color:var(--lr-color-brand,var(--lr-theme-color-brand-fill-loud,LinkText));text-decoration-line:underline;text-decoration-thickness:var(--lr-border-width-thin,var(--lr-theme-border-width-thin,1px));text-underline-offset:var(--lr-space-2xs,var(--lr-theme-space-2xs,.125rem))}:where(.lr-typography) :where(a[href]):where(:not([slot],.lr-not-typography,.lr-not-typography *)):where(:hover){text-decoration-thickness:var(--lr-border-width-medium,var(--lr-theme-border-width-medium,2px))}:where(.lr-inline-code),:where(.lr-typography) :where(code):where(:not(pre code,[slot],.lr-not-typography,.lr-not-typography *)){padding-block:var(--lr-space-2xs,var(--lr-theme-space-2xs,.125rem));padding-inline:var(--lr-space-xs,var(--lr-theme-space-xs,.25rem));border-radius:var(--lr-radius-xs,var(--lr-theme-border-radius-xs,2px));background:var(--lr-color-neutral-fill-quiet,var(--lr-theme-color-neutral-fill-quiet,Canvas));color:var(--lr-color-text,var(--lr-theme-color-text-normal,CanvasText));font-family:var(--lr-font-mono,var(--lr-theme-font-family-mono,ui-monospace, SFMono-Regular, Menlo, Consolas, monospace));font-size:var(--lr-size-0-875em,.875em);font-weight:var(--lr-font-weight-semibold,var(--lr-theme-font-weight-semibold,600));overflow-wrap:anywhere}:where(a) :where(.lr-inline-code),:where(.lr-typography) :where(a) :where(code):where(:not(pre code,[slot],.lr-not-typography,.lr-not-typography *)){color:inherit}:where(.lr-typography) :where(table):where(:not([slot],.lr-not-typography,.lr-not-typography *)){border-collapse:collapse;inline-size:100%}:where(.lr-typography) :where(th,td):where(:not([slot],.lr-not-typography,.lr-not-typography *)){padding-block:var(--lr-space-s,var(--lr-theme-space-s,.5rem));padding-inline:var(--lr-space-l,var(--lr-theme-space-l,1rem));border:var(--lr-border-width-thin,var(--lr-theme-border-width-thin,1px)) solid var(--lr-color-border-subtle,var(--lr-theme-color-surface-border-subtle,var(--lr-color-border,var(--lr-theme-color-surface-border,GrayText))))}:where(.lr-typography) :where(th,td):where(:not([align],[slot],.lr-not-typography,.lr-not-typography *)){text-align:start}:where(.lr-typography) :where(th):where(:not([slot],.lr-not-typography,.lr-not-typography *)){font-weight:var(--lr-font-weight-bold,var(--lr-theme-font-weight-bold,700))}:where(.lr-typography) :where(tr):where(:not([slot],.lr-not-typography,.lr-not-typography *)){break-inside:avoid}:where(.lr-typography) :where(tr):where(:nth-child(2n)):where(:not([slot],.lr-not-typography,.lr-not-typography *)){background:var(--lr-color-surface-raised,var(--lr-theme-color-surface-raised,Canvas))}:where(.lr-block){display:block}:where(.lr-inline-block){display:inline-block}:where(.lr-flex){display:flex}:where(.lr-inline-flex){display:inline-flex}:where(.lr-grid){display:grid}:where(.lr-flow-root){display:flow-root}:where(.lr-stack){gap:var(--lr-layout-gap,var(--lr-space-m,var(--lr-theme-space-m,.75rem)));flex-direction:column;display:flex}:where(.lr-cluster){align-items:center;gap:var(--lr-layout-gap,var(--lr-space-m,var(--lr-theme-space-m,.75rem)));flex-wrap:wrap;display:flex}:where(.lr-grid-auto){grid-template-columns:repeat(auto-fit, minmax(min(100%, var(--lr-grid-min-inline-size,var(--lr-size-14rem,var(--lr-theme-size-14rem,14rem)))), 1fr));gap:var(--lr-layout-gap,var(--lr-space-m,var(--lr-theme-space-m,.75rem)));display:grid}:where(.lr-row){flex-direction:row}:where(.lr-column){flex-direction:column}:where(.lr-wrap){flex-wrap:wrap}:where(.lr-nowrap){flex-wrap:nowrap}:where(.lr-grow){flex-grow:1}:where(.lr-grow-0){flex-grow:0}:where(.lr-shrink){flex-shrink:1}:where(.lr-shrink-0){flex-shrink:0}:where(.lr-items-start){align-items:start}:where(.lr-items-center){align-items:center}:where(.lr-items-end){align-items:end}:where(.lr-items-stretch){align-items:stretch}:where(.lr-items-baseline){align-items:baseline}:where(.lr-justify-start){justify-content:start}:where(.lr-justify-center){justify-content:center}:where(.lr-justify-end){justify-content:end}:where(.lr-justify-between){justify-content:space-between}:where(.lr-justify-around){justify-content:space-around}:where(.lr-self-start){align-self:start}:where(.lr-self-center){align-self:center}:where(.lr-self-end){align-self:end}:where(.lr-self-stretch){align-self:stretch}:where(.lr-gap-0){gap:0}:where(.lr-gap-xs){gap:var(--lr-space-xs,var(--lr-theme-space-xs,.25rem))}:where(.lr-gap-s){gap:var(--lr-space-s,var(--lr-theme-space-s,.5rem))}:where(.lr-gap-m){gap:var(--lr-space-m,var(--lr-theme-space-m,.75rem))}:where(.lr-gap-l){gap:var(--lr-space-l,var(--lr-theme-space-l,1rem))}:where(.lr-gap-2xl){gap:var(--lr-space-2xl,var(--lr-theme-space-2xl,2rem))}:where(.lr-inline-full){inline-size:100%}:where(.lr-block-full){block-size:100%}:where(.lr-size-full){block-size:100%;inline-size:100%}:where(.lr-min-inline-0){min-inline-size:0}:where(.lr-min-block-0){min-block-size:0}:where(.lr-max-inline-full){max-inline-size:100%}:where(.lr-max-inline-prose){max-inline-size:var(--lr-prose-max-inline-size,65ch)}:where(.lr-center){inline-size:min(100%, var(--lr-content-max-inline-size,var(--lr-size-48rem,var(--lr-theme-size-48rem,48rem))));margin-inline:auto}:where(.lr-overflow-auto){overflow:auto}:where(.lr-overflow-hidden){overflow:hidden}:where(.lr-text-start){text-align:start}:where(.lr-text-center){text-align:center}:where(.lr-text-end){text-align:end}:where(.lr-text-xs){font-size:var(--lr-font-size-xs,var(--lr-theme-font-size-xs,.75rem))}:where(.lr-text-sm){font-size:var(--lr-font-size-sm,var(--lr-theme-font-size-sm,.8125rem))}:where(.lr-text-base){font-size:var(--lr-font-size-m,var(--lr-theme-font-size-m,1rem))}:where(.lr-text-lg){font-size:var(--lr-font-size-lg,var(--lr-theme-font-size-lg,1.125rem))}:where(.lr-text-xl){font-size:var(--lr-font-size-xl,var(--lr-theme-font-size-xl,1.25rem))}:where(.lr-text-quiet){color:var(--lr-color-text-quiet,var(--lr-theme-color-text-quiet,GrayText))}:where(.lr-font-normal){font-weight:var(--lr-font-weight-normal,var(--lr-theme-font-weight-normal,400))}:where(.lr-font-medium){font-weight:var(--lr-font-weight-medium,var(--lr-theme-font-weight-medium,500))}:where(.lr-font-semibold){font-weight:var(--lr-font-weight-semibold,var(--lr-theme-font-weight-semibold,600))}:where(.lr-font-bold){font-weight:var(--lr-font-weight-bold,var(--lr-theme-font-weight-bold,700))}:where(.lr-font-mono){font-family:var(--lr-font-mono,var(--lr-theme-font-family-mono,ui-monospace, SFMono-Regular, Menlo, Consolas, monospace))}:where(.lr-text-break){overflow-wrap:anywhere;min-inline-size:0}:where(.lr-text-nowrap){white-space:nowrap}:where(.lr-truncate){text-overflow:ellipsis;white-space:nowrap;min-inline-size:0;overflow:hidden}:where(.lr-text-balance){text-wrap:balance}:where(.lr-text-pretty){text-wrap:pretty}:where(.lr-prose){max-inline-size:var(--lr-prose-max-inline-size,65ch);color:var(--lr-color-text,var(--lr-theme-color-text-normal,CanvasText));font-family:var(--lr-font,var(--lr-theme-font-family-body,system-ui, sans-serif));font-size:var(--lr-font-size-m,var(--lr-theme-font-size-m,1rem));line-height:var(--lr-line-height-normal,var(--lr-theme-line-height-normal,1.5));overflow-wrap:anywhere}:where(.lr-prose)>:where(h1,h2,h3,h4,h5,h6,p,ul,ol,dl,blockquote,pre,table,figure){margin-block:0}:where(.lr-prose)>:where(h1,h2,h3,h4,h5,h6,p,ul,ol,dl,blockquote,pre,table,figure)+:where(h1,h2,h3,h4,h5,h6,p,ul,ol,dl,blockquote,pre,table,figure){margin-block-start:var(--lr-prose-flow-space,var(--lr-space-l,var(--lr-theme-space-l,1rem)))}:where(.lr-typography):where(:not(.lr-not-typography *))>:where(*):where(:not([slot])){margin-block:0}:where(.lr-typography):where(:not(.lr-not-typography *))>:where(*)+:where(*):where(:not([slot])){margin-block-start:var(--lr-prose-flow-space,var(--lr-space-l,var(--lr-theme-space-l,1rem)))}:where(.lr-typography):where(:not(.lr-not-typography *))>:where(*)+:where(h1,h2,h3,h4,h5,h6):where(:not([slot])){margin-block-start:calc(var(--lr-prose-flow-space,var(--lr-space-l,var(--lr-theme-space-l,1rem))) * 2)}:where(.lr-prose) :where(h1,h2,h3,h4,h5,h6):where(:not(.lr-heading-1,.lr-heading-2,.lr-heading-3,.lr-heading-4)):where(:not(.lr-typography *),[slot],.lr-not-typography,.lr-not-typography *){color:var(--lr-color-text,var(--lr-theme-color-text-normal,CanvasText));font-weight:var(--lr-font-weight-semibold,var(--lr-theme-font-weight-semibold,600));line-height:var(--lr-line-height-compact,var(--lr-theme-line-height-compact,1.25))}:where(.lr-prose) :where(h1):where(:not(.lr-heading-1,.lr-heading-2,.lr-heading-3,.lr-heading-4)):where(:not(.lr-typography *),[slot],.lr-not-typography,.lr-not-typography *){font-size:var(--lr-font-size-3xl,var(--lr-theme-font-size-3xl,2rem))}:where(.lr-prose) :where(h2):where(:not(.lr-heading-1,.lr-heading-2,.lr-heading-3,.lr-heading-4)):where(:not(.lr-typography *),[slot],.lr-not-typography,.lr-not-typography *){font-size:var(--lr-font-size-2xl,var(--lr-theme-font-size-2xl,1.75rem))}:where(.lr-prose) :where(h3):where(:not(.lr-heading-1,.lr-heading-2,.lr-heading-3,.lr-heading-4)):where(:not(.lr-typography *),[slot],.lr-not-typography,.lr-not-typography *){font-size:var(--lr-font-size-xl,var(--lr-theme-font-size-xl,1.25rem))}:where(.lr-prose) :where(a){color:var(--lr-color-brand,var(--lr-theme-color-brand-fill-loud,LinkText));text-underline-offset:var(--lr-space-2xs,var(--lr-theme-space-2xs,.125rem))}:where(.lr-prose) :where(code,kbd,samp,pre){font-family:var(--lr-font-mono,var(--lr-theme-font-family-mono,ui-monospace, SFMono-Regular, Menlo, Consolas, monospace))}:where(.lr-prose) :where(blockquote):where(:not(.lr-typography *),[slot],.lr-not-typography,.lr-not-typography *){border-inline-start:var(--lr-prose-quote-border-width,var(--lr-border-width-thick,var(--lr-theme-border-width-thick,3px))) solid var(--lr-color-border-strong,var(--lr-theme-color-border-strong,GrayText));color:var(--lr-color-text-quiet,var(--lr-theme-color-text-quiet,GrayText));padding-inline-start:var(--lr-prose-quote-padding,var(--lr-space-l,var(--lr-theme-space-l,1rem)))}:where(.lr-visually-hidden),:where(.lr-visually-hidden-focusable:not(:focus,:focus-within)){inline-size:var(--lr-visually-hidden-size,var(--lr-size-1px,1px));block-size:var(--lr-visually-hidden-size,var(--lr-size-1px,1px));clip-path:inset(50%);white-space:nowrap;border:0;padding:0;position:absolute;inset-block-start:0;inset-inline-start:0;overflow:hidden}:where(.lr-visually-hidden-focusable:focus,.lr-visually-hidden-focusable:focus-within){clip-path:none;white-space:normal;block-size:auto;inline-size:auto;position:static;overflow:visible}:where(.lr-fouce-hidden:not(:defined)){visibility:hidden}:where(.lr-hidden),:where(lr-page[view=desktop]) :where(.lr-page-mobile-only),:where(lr-page[view=mobile]) :where(.lr-page-desktop-only){display:none}}@layer lr-overrides;
|
package/llms/peers.md
CHANGED
|
@@ -38,7 +38,7 @@ for the page.
|
|
|
38
38
|
| Peer | Range | Needed by |
|
|
39
39
|
|---|---|---|
|
|
40
40
|
| `@aceshooting/lyra-flags` | `^2.3.0` | _(loaded by a shared internal module)_ |
|
|
41
|
-
| `@aceshooting/lyra-translations` | `^28.1.
|
|
41
|
+
| `@aceshooting/lyra-translations` | `^28.1.5` | _(not referenced by any component)_ |
|
|
42
42
|
| `@aiden0z/pptx-renderer` | `^1.3.0` | `lr-pptx-viewer` |
|
|
43
43
|
| `@sgratzl/chartjs-chart-boxplot` | `^4.0.0` | `lr-box-plot` |
|
|
44
44
|
| `chart.js` | `^4.0.1` | `lr-bar-chart`, `lr-box-plot`, `lr-bubble-chart`, `lr-chart`, `lr-doughnut-chart`, `lr-histogram`, `lr-line-chart`, `lr-pie-chart`, `lr-polar-area-chart`, `lr-radar-chart`, `lr-scatter-chart` |
|
package/locales.json
CHANGED
|
@@ -87,7 +87,7 @@
|
|
|
87
87
|
"direction": "rtl",
|
|
88
88
|
"script": "Arab",
|
|
89
89
|
"parent": "en",
|
|
90
|
-
"aggregateImport": "@aceshooting/lyra-translations/pseudo/ar-XB.js",
|
|
90
|
+
"aggregateImport": "@aceshooting/lyra-ui/translations/pseudo/ar-XB.js",
|
|
91
91
|
"familyImports": {},
|
|
92
92
|
"sourceKeyCount": 1430,
|
|
93
93
|
"translatedOwnKeyCount": 0,
|
|
@@ -356,7 +356,7 @@
|
|
|
356
356
|
"direction": "ltr",
|
|
357
357
|
"script": "Latn",
|
|
358
358
|
"parent": "en",
|
|
359
|
-
"aggregateImport": "@aceshooting/lyra-translations/pseudo/en-XA.js",
|
|
359
|
+
"aggregateImport": "@aceshooting/lyra-ui/translations/pseudo/en-XA.js",
|
|
360
360
|
"familyImports": {},
|
|
361
361
|
"sourceKeyCount": 1430,
|
|
362
362
|
"translatedOwnKeyCount": 0,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@aceshooting/lyra-ui",
|
|
3
|
-
"version": "28.1.
|
|
3
|
+
"version": "28.1.5",
|
|
4
4
|
"description": "Free, independent Lit web components: an open-source alternative to Shoelace and Web Awesome with accessible forms, dashboards, charts, and agent UI.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"web-components",
|
|
@@ -2598,7 +2598,7 @@
|
|
|
2598
2598
|
},
|
|
2599
2599
|
"peerDependencies": {
|
|
2600
2600
|
"@aceshooting/lyra-flags": "^2.3.0",
|
|
2601
|
-
"@aceshooting/lyra-translations": "^28.1.
|
|
2601
|
+
"@aceshooting/lyra-translations": "^28.1.5",
|
|
2602
2602
|
"@aiden0z/pptx-renderer": "^1.3.0",
|
|
2603
2603
|
"@sgratzl/chartjs-chart-boxplot": "^4.0.0",
|
|
2604
2604
|
"chart.js": "^4.0.1",
|
package/skills/lyra-ui/SKILL.md
CHANGED
|
@@ -85,7 +85,9 @@ the exact recipe, labels and persistence; read it before changing startup or per
|
|
|
85
85
|
|
|
86
86
|
## Companion packages
|
|
87
87
|
|
|
88
|
-
Install
|
|
88
|
+
Install `@aceshooting/lyra-ide` and `@aceshooting/lyra-translations` at the same version as
|
|
89
|
+
`@aceshooting/lyra-ui`. `@aceshooting/lyra-flags` and `@aceshooting/lyra-docs` are versioned
|
|
90
|
+
independently; choose releases compatible with the installed packages and their declared peer ranges.
|
|
89
91
|
|
|
90
92
|
- **`@aceshooting/lyra-translations`** (optional peer): the 66 locale catalogs. Import
|
|
91
93
|
`@aceshooting/lyra-translations/<locale>.js` (or `<locale>/<family>.js` slices); it is also what
|