@aceshooting/lyra-ui 9.1.1 → 11.0.0

package/dist/components/media/file-input/file-input.class.d.ts

@@ -101,6 +101,18 @@ export interface LyraFileInputEventMap {
  * @csspart file-name - Selected filename.
  * @csspart file-size - Localized selected-file size.
  * @csspart remove-button - Removes one selected file.
+ * @cssstate required - Matches while `required` is set. Style with `lr-file-input:state(required)`.
+ * @cssstate optional - Matches while `required` is not set — the complement of `required`.
+ * @cssstate valid - Matches while the control satisfies its constraints — `required`, every entry
+ * in `validators`, and any `setCustomValidity()` error.
+ * @cssstate invalid - Matches while it does not — from the very first render, before the user has
+ * touched anything. Neither this nor `user-invalid` matches while the control is barred from
+ * constraint validation (disabled, or inside a disabled fieldset).
+ * @cssstate user-valid - `valid`, but only after the user has interacted: choosing or dropping
+ * files, removing one, a blur, or a `reportValidity()` call (which is what a submit attempt runs).
+ * @cssstate user-invalid - `invalid` after that same interaction. Style validation errors with this
+ * rather than `invalid`: a pristine required file input is genuinely invalid, but colouring it red
+ * before the user has done anything is hostile.
  * @cssstate blank - Matches while no files are selected.
  * @cssstate dragging - Matches during an active file drag session.
  * @cssprop [--lr-file-input-font-size=var(--lr-form-control-font-size)] - Label and selected-filename

package/dist/components/media/file-input/file-input.styles.js

@@ -4,11 +4,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     min-inline-size: 0;
     max-inline-size: 100%;
     --_lr-file-input-font-size: var(--lr-form-control-font-size);
-    /* The dropzone's own ladder. sizes.styles.ts only carries the six shared --lr-form-control-*
-       knobs, which describe a single-line row control; this is a block drop target whose
-       instructional text, glyph, padding and detail text each need their own tier or size ends up
-       resizing the label alone. These :host values ARE the m/medium tier, so an unset or
-       default-size control renders exactly as it did before the ladder existed. */
     --_lr-file-input-dropzone-font-size: var(--lr-font-size-md-sm);
     --_lr-file-input-dropzone-icon-size: var(--lr-font-size-xl);
     --_lr-file-input-dropzone-padding: var(--lr-space-l);
@@ -44,6 +39,7 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
   [part="form-control"] {
     min-inline-size: 0;
     max-inline-size: 100%;
+    block-size: 100%;
   }
   [part~="form-control-label"] {
     display: block;
@@ -58,18 +54,17 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
   [part="error"][hidden] {
     display: none;
   }
-  /* This control accepts a required attribute and renders a visible label like every other field
-     in the library, so it marks it the same way -- the [hidden] rule above is what keeps the
-     marker from orphaning a stray glyph when no label is set. */
   ${formControlRequiredMarker}
   .dropzone {
     position: relative;
     display: grid;
     min-inline-size: 0;
+    block-size: 100%;
   }
   [part~="base"] {
     grid-area: 1 / 1;
     inline-size: 100%;
+    block-size: 100%;
     min-inline-size: var(--lr-icon-button-size);
     min-block-size: var(--lr-icon-button-size);
     box-sizing: border-box;
@@ -132,11 +127,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     min-inline-size: 0;
     pointer-events: auto;
   }
-  /* Density escape -- same convention as lr-empty's compact. A --lr-space-l dropzone is unusable in
-     a toolbar or a table cell; compact shrinks the padding, gap and label font so the zone fits a
-     tight row. The tuned values sit behind inline var() fallbacks (rather than a :host declaration,
-     which every instance re-declares and so shadows any ancestor value) so a consumer can retune
-     them from outside; the fallbacks preserve today's rendering for an unset dropzone. */
   :host([compact]) [part~="base"] {
     padding: var(--lr-file-input-compact-padding, var(--lr-space-s));
     font-size: var(--lr-file-input-compact-font-size, var(--lr-font-size-sm));
@@ -149,11 +139,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     );
     font-size: var(--lr-file-input-compact-font-size, var(--lr-font-size-sm));
   }
-  /* Inline var() fallbacks (rather than :host-declared properties, which every instance would
-     re-declare and so shadow any ancestor value) so a consumer can retint just this dropzone's
-     drag accept/reject highlight without hijacking the shared --lr-color-success/--lr-color-danger
-     tokens used everywhere else in their theme. Unset, each falls back to the same value this
-     rendered before the hatch existed, so the default rendering is unchanged. */
   [part~="base"][data-drag-state="accept"] {
     border-color: var(
       --lr-file-input-accept-border-color,
@@ -194,10 +179,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
   :host(:not(:disabled)) .dropzone:hover [part~="base"] {
     border-color: var(--lr-color-brand);
   }
-  /* [part~='base'] is the button that opens the file dialog, so the press is a real activation and
-     needs its own answer -- the hover border alone repeats what hover already said. Both selector
-     shapes are mirrored because the pointer can be over the button itself or over the
-     pointer-events: none content stacked on top of it in the same grid cell. */
   :host(:not(:disabled)) [part~="base"]:active {
     border-color: var(--lr-color-brand);
     background: color-mix(
@@ -222,8 +203,6 @@ import{css}from"lit";import{formControlRequiredMarker}from"../../../internal/for
     opacity: var(--lr-opacity-disabled);
     cursor: not-allowed;
   }
-  /* Visible per-file rejection feedback, rendered alongside (not instead of) the sr-only status
-     count summary -- see file-input.class.ts's rejectionMessage(). */
   [part="rejection"] {
     min-inline-size: 0;
     max-inline-size: 100%;

package/dist/components/media/flag/flag.class.d.ts

@@ -25,7 +25,9 @@ export declare function setFlagUrlResolver(value: LyraFlagUrlResolver | Promise<
  * a representative country). While that peer package's `flagUrl()` resolves,
  * the host carries `aria-busy="true"`; a decorative skeleton and ordinary, non-live localized
  * loading text render in its place. A missing or failed peer resolver fails closed with a localized visible error and a
- * shared light-DOM assertive announcement;
+ * shared light-DOM assertive announcement, plus a one-time `console.warn` naming the code and the
+ * `flag-peer.js` import that registers a resolver -- the visible error alone cannot tell a
+ * developer that the fix is a missing import rather than missing flag data;
  * an installed resolver returning no URL for an unknown code remains a valid
  * empty result.
  *
@@ -53,6 +55,12 @@ export declare function setFlagUrlResolver(value: LyraFlagUrlResolver | Promise<
  * @example <lr-flag country="es" fidelity="compact"></lr-flag>
  * @example <lr-flag country="es" fidelity="detailed" shape="circle"></lr-flag>
  * @csspart image - The underlying <img>.
+ * @slot fallback - Rendered in place of the flag when `country`/`language` cannot resolve to a
+ *   current flag (an unassigned, historical, or malformed code). Wins over the `fallback` property.
+ *   Distinct from the peer-resolver failure that produces `[part="error"]`: an unresolvable code is
+ *   data, not a defect.
+ * @csspart fallback-image - The `fallback` property's placeholder image, when no `fallback` slot
+ *   content is supplied.
  * @csspart error - Ordinary localized visible error rendered when the optional peer resolver is
  *   unavailable or fails; each fresh resolution failure appends the same localized message to the
  *   shared light-DOM assertive announcement sink.
@@ -66,6 +74,13 @@ export declare class LyraFlag extends LyraElement {
     static styles: import("lit").CSSResultGroup[];
     /** ISO 3166-1 alpha-2 country code (e.g. `fr`, `us`). Takes precedence over `language`. */
     country?: string;
+    /**
+     * Placeholder image URL rendered in place of a flag when the code cannot resolve — a historical
+     * or defunct state in a longitudinal dataset, say. Unset renders the `fallback` slot's content
+     * instead, or nothing at all, so the element still occupies its normal footprint in a table or
+     * card grid rather than showing error wording.
+     */
+    fallback?: string;
     /** BCP-47-ish language tag (e.g. `en`, `en-US`) resolved to a country flag. */
     language?: string;
     /**
@@ -124,6 +139,13 @@ export declare class LyraFlag extends LyraElement {
     /** True while the effective source is resolving or its native image is loading. */
     get loading(): boolean;
     private get code();
+    /**
+     * True when the component has a `country`/`language` to resolve but no flag can be produced for
+     * it — an unassigned, historical, or malformed code. Distinct from the peer-resolver failure that
+     * drives `data-error`: a dissolved federation in a longitudinal dataset is *data*, not a bug, and
+     * a consumer needs to style the two apart.
+     */
+    private get unresolved();
     connectedCallback(): void;
     disconnectedCallback(): void;
     adoptedCallback(): void;

package/dist/components/media/flag/flag.class.js

@@ -1,4 +1,6 @@
-var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html}from"lit";import{property,state}from"lit/decorators.js";import{keyed}from"lit/directives/keyed.js";import{LyraElement}from"../../../internal/lyra-element.js";import{getDisplayNames}from"../../../internal/intl-cache.js";import{hostAriaLabel,srOnly}from"../../../internal/a11y.js";import{safeMediaSrc}from"../../../internal/safe-url.js";import{styles}from"./flag.styles.js";import{ALPHA2_RE,languageToCountry}from"./language-map.js";import"../../overlays/skeleton/skeleton.class.js";import{acquireAnnouncementSink}from"../../../internal/announcer.js";import{LYRA_DEFAULT_collapse,LYRA_DEFAULT_details,LYRA_DEFAULT_flagLoadError,LYRA_DEFAULT_loading,LYRA_DEFAULT_map,LYRA_DEFAULT_navigation,LYRA_DEFAULT_open,LYRA_DEFAULT_popover,LYRA_DEFAULT_progress,LYRA_DEFAULT_search,LYRA_DEFAULT_select}from"../../../internal/default-strings.generated.js";const FLAG_LOAD_ERROR_KEY="flagLoadError",FLAG_FIDELITIES=new Set(["compact","standard","detailed"]),FLAG_SHAPES=new Set(["rect","circle"]);function normalizeFlagFidelity(value){return FLAG_FIDELITIES.has(value)?value:"standard"}function normalizeFlagShape(value){return FLAG_SHAPES.has(value)?value:"rect"}function resolverFromModule(module){try{if(typeof module=="object"&&module!==null||typeof module=="function"){const named=module.flagUrl;if(typeof named=="function")return named;const fallback=module.default??module;if(typeof fallback=="function")return fallback;if(typeof fallback=="object"&&fallback!==null){const defaultNamed=fallback.flagUrl;if(typeof defaultNamed=="function")return defaultNamed}}}catch{}return null}async function loadFlagUrl(importFlags){try{const resolver=resolverFromModule(await importFlags());if(resolver)return resolver;throw new TypeError("The flag peer does not expose a callable flagUrl capability.")}catch{return console.warn("<lr-flag> needs the optional peer dependency '@aceshooting/lyra-flags' to render flag images \u2014 install it with `pnpm add @aceshooting/lyra-flags`."),null}}function displayNameFor(code,locale){try{return getDisplayNames(locale,{type:"region"}).of(code.toUpperCase())??code.toUpperCase()}catch{return code.toUpperCase()}}let flagUrlResolver,flagResolverGeneration=0;const flagResolverSubscribers=new Set;function setFlagUrlResolver(value){flagUrlResolver=value===null?Promise.resolve(null):Promise.resolve(value),flagResolverGeneration++;for(const subscriber of[...flagResolverSubscribers])subscriber(flagResolverGeneration)}function loadFlagUrlResolver(){return flagUrlResolver||(flagUrlResolver=Promise.resolve(null)),flagUrlResolver}class LyraFlag extends LyraElement{constructor(){super(...arguments),this._shape="rect",this._fidelity="standard",this.sourceState=Object.freeze({status:"idle",identity:"idle"}),this.resolverGeneration=flagResolverGeneration,this.sourceRestartPending=!0,this.activeSourceRequest=0,this.resolveToken=0,this.onResolverGeneration=generation=>{!this.isConnected||generation===this.resolverGeneration||(this.resolverGeneration=generation)}}static{this.defaultStrings={...super.defaultStrings,collapse:LYRA_DEFAULT_collapse,details:LYRA_DEFAULT_details,flagLoadError:LYRA_DEFAULT_flagLoadError,loading:LYRA_DEFAULT_loading,map:LYRA_DEFAULT_map,navigation:LYRA_DEFAULT_navigation,open:LYRA_DEFAULT_open,popover:LYRA_DEFAULT_popover,progress:LYRA_DEFAULT_progress,search:LYRA_DEFAULT_search,select:LYRA_DEFAULT_select}}static{this.styles=[LyraElement.styles,styles,srOnly]}get shape(){return this._shape}set shape(value){const old=this._shape;this._shape=normalizeFlagShape(value),this.requestUpdate("shape",old)}get fidelity(){return this._fidelity}set fidelity(value){const old=this._fidelity;this._fidelity=normalizeFlagFidelity(value),this.requestUpdate("fidelity",old)}get effectiveFidelity(){return normalizeFlagFidelity(this.fidelity)}get loading(){return this.sourceState.status==="loading"}get code(){if(this.country)return ALPHA2_RE.test(this.country)?this.country.toLowerCase():void 0;if(this.language)return languageToCountry(this.language)}connectedCallback(){super.connectedCallback(),this.sourceRestartPending=!0,flagResolverSubscribers.add(this.onResolverGeneration),this.syncErrorAnnouncementSink(),this.resolverGeneration!==flagResolverGeneration&&(this.resolverGeneration=flagResolverGeneration),this.requestUpdate()}disconnectedCallback(){this.resolveToken++,this.sourceRestartPending=!0,flagResolverSubscribers.delete(this.onResolverGeneration),this.releaseErrorAnnouncementSink(),super.disconnectedCallback()}adoptedCallback(){super.adoptedCallback(),this.resolveToken++,this.sourceRestartPending=!0,this.releaseErrorAnnouncementSink(),this.syncErrorAnnouncementSink(),this.requestUpdate()}syncErrorAnnouncementSink(){this.isConnected&&this.errorAnnouncementSink?.element.ownerDocument!==this.ownerDocument&&(this.releaseErrorAnnouncementSink(),this.errorAnnouncementSink=acquireAnnouncementSink("assertive",{document:this.ownerDocument,source:this}))}releaseErrorAnnouncementSink(){this.errorAnnouncementSink?.release(),this.errorAnnouncementSink=void 0}announceLoadError(){this.errorAnnouncementSink?.announce(this.localize(FLAG_LOAD_ERROR_KEY))}setSourceState(state2,announceError=!1){this.sourceState=Object.freeze(state2),this.toggleAttribute("data-error",state2.status==="error"),this.setAttribute("aria-busy",String(state2.status==="loading")),announceError&&this.isConnected&&this.announceLoadError()}failSource(identity,announce=!0){this.setSourceState({status:"error",identity},announce)}onImageLoad(event,identity,url,request){const image=event.currentTarget;!this.isConnected||request!==this.activeSourceRequest||!image||image!==this.renderRoot.querySelector('[part="image"]')||this.sourceState.status!=="loading"||this.sourceState.identity!==identity||this.sourceState.url!==url||this.setSourceState({status:"loaded",identity,url})}onImageError(event,identity,request){const image=event.currentTarget;!this.isConnected||request!==this.activeSourceRequest||!image||image!==this.renderRoot.querySelector('[part="image"]')||this.sourceState.status!=="loading"||this.sourceState.identity!==identity||this.failSource(identity)}willUpdate(changed){super.willUpdate(changed);const sourceChanged=changed.has("country")||changed.has("language")||changed.has("src")||changed.has("fidelity")||changed.has("resolverGeneration");if(typeof Node<"u"&&!this.isConnected){sourceChanged&&(this.resolveToken++,this.sourceRestartPending=!0);return}if(this.hasUpdated&&!sourceChanged&&!this.sourceRestartPending)return;const connectionBaseline=this.sourceRestartPending;this.sourceRestartPending=!1;const token=++this.resolveToken,request=++this.activeSourceRequest,URLCtor=this.ownerDocument?.defaultView?.URL??globalThis.URL,directValue=typeof this.src=="string"?this.src.trim():"";if(directValue){const identity2=`direct:${directValue}`,url=safeMediaSrc(directValue,URLCtor);if(!url){this.failSource(identity2,!connectionBaseline);return}this.setSourceState({status:"loading",identity:identity2,url});return}const code=this.code;if(!code){this.setSourceState({status:"idle",identity:"idle"});return}const fidelity=this.effectiveFidelity,identity=`peer:${code}:${fidelity}:${this.resolverGeneration}`;this.setSourceState({status:"loading",identity}),loadFlagUrlResolver().then(async resolve=>{if(token!==this.resolveToken||request!==this.activeSourceRequest||!this.isConnected)return;if(typeof resolve!="function"){this.failSource(identity);return}const candidate=await resolve(code,fidelity==="standard"?void 0:{variant:fidelity});if(token!==this.resolveToken||request!==this.activeSourceRequest||!this.isConnected)return;if(candidate===void 0){this.setSourceState({status:"idle",identity});return}const url=safeMediaSrc(candidate,URLCtor);if(!url){this.failSource(identity);return}this.setSourceState({status:"loading",identity,url})}).catch(err=>{token!==this.resolveToken||request!==this.activeSourceRequest||!this.isConnected||(console.warn(`<lr-flag> failed to resolve a flag URL for "${code}":`,err),this.failSource(identity))})}updated(changed){super.updated(changed),this.setAttribute("aria-busy",String(this.sourceState.status==="loading"))}render(){const state2=this.sourceState,request=this.activeSourceRequest;if(state2.status==="error")return html`<span part="error">${this.localize(FLAG_LOAD_ERROR_KEY)}</span>`;const url=state2.status==="loading"||state2.status==="loaded"?state2.url:void 0;if(!url&&state2.status!=="loading")return html``;const code=this.code,alt=hostAriaLabel(this)??this.label??(code?displayNameFor(code,this.effectiveLocale):"");return html`
+var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{keyed}from"lit/directives/keyed.js";import{LyraElement}from"../../../internal/lyra-element.js";import{getDisplayNames}from"../../../internal/intl-cache.js";import{hostAriaLabel,srOnly}from"../../../internal/a11y.js";import{safeMediaSrc}from"../../../internal/safe-url.js";import{styles}from"./flag.styles.js";import{ALPHA2_RE,alpha3ToAlpha2,languageToCountry}from"./language-map.js";import"../../overlays/skeleton/skeleton.class.js";import{acquireAnnouncementSink}from"../../../internal/announcer.js";import{LYRA_DEFAULT_collapse,LYRA_DEFAULT_details,LYRA_DEFAULT_flagLoadError,LYRA_DEFAULT_loading,LYRA_DEFAULT_map,LYRA_DEFAULT_navigation,LYRA_DEFAULT_open,LYRA_DEFAULT_popover,LYRA_DEFAULT_progress,LYRA_DEFAULT_search,LYRA_DEFAULT_select}from"../../../internal/default-strings.generated.js";const FLAG_LOAD_ERROR_KEY="flagLoadError",FLAG_FIDELITIES=new Set(["compact","standard","detailed"]),FLAG_SHAPES=new Set(["rect","circle"]);function normalizeFlagFidelity(value){return FLAG_FIDELITIES.has(value)?value:"standard"}function normalizeFlagShape(value){return FLAG_SHAPES.has(value)?value:"rect"}function resolverFromModule(module){try{if(typeof module=="object"&&module!==null||typeof module=="function"){const named=module.flagUrl;if(typeof named=="function")return named;const fallback=module.default??module;if(typeof fallback=="function")return fallback;if(typeof fallback=="object"&&fallback!==null){const defaultNamed=fallback.flagUrl;if(typeof defaultNamed=="function")return defaultNamed}}}catch{}return null}async function loadFlagUrl(importFlags){try{const resolver=resolverFromModule(await importFlags());if(resolver)return resolver;throw new TypeError("The flag peer does not expose a callable flagUrl capability.")}catch{return console.warn("<lr-flag> needs the optional peer dependency '@aceshooting/lyra-flags' to render flag images \u2014 install it with `pnpm add @aceshooting/lyra-flags`."),null}}function displayNameFor(code,locale){try{return getDisplayNames(locale,{type:"region"}).of(code.toUpperCase())??code.toUpperCase()}catch{return code.toUpperCase()}}let flagUrlResolver,flagResolverGeneration=0;const flagResolverSubscribers=new Set;let warnedMissingFlagResolver=!1;function warnMissingFlagResolver(code){warnedMissingFlagResolver||(warnedMissingFlagResolver=!0,console.warn(`<lr-flag> could not resolve the code "${code}" because no flag resolver is registered. Import the optional peer entry once at startup -- import '@aceshooting/lyra-ui/components/media/flag/flag-peer.js' -- and install '@aceshooting/lyra-flags', or pass an already-resolved URL through 'src' instead.`))}function setFlagUrlResolver(value){flagUrlResolver=value===null?Promise.resolve(null):Promise.resolve(value),warnedMissingFlagResolver=!1,flagResolverGeneration++;for(const subscriber of[...flagResolverSubscribers])subscriber(flagResolverGeneration)}function loadFlagUrlResolver(){return flagUrlResolver||(flagUrlResolver=Promise.resolve(null)),flagUrlResolver}class LyraFlag extends LyraElement{constructor(){super(...arguments),this._shape="rect",this._fidelity="standard",this.sourceState=Object.freeze({status:"idle",identity:"idle"}),this.resolverGeneration=flagResolverGeneration,this.sourceRestartPending=!0,this.activeSourceRequest=0,this.resolveToken=0,this.onResolverGeneration=generation=>{!this.isConnected||generation===this.resolverGeneration||(this.resolverGeneration=generation)}}static{this.defaultStrings={...super.defaultStrings,collapse:LYRA_DEFAULT_collapse,details:LYRA_DEFAULT_details,flagLoadError:LYRA_DEFAULT_flagLoadError,loading:LYRA_DEFAULT_loading,map:LYRA_DEFAULT_map,navigation:LYRA_DEFAULT_navigation,open:LYRA_DEFAULT_open,popover:LYRA_DEFAULT_popover,progress:LYRA_DEFAULT_progress,search:LYRA_DEFAULT_search,select:LYRA_DEFAULT_select}}static{this.styles=[LyraElement.styles,styles,srOnly]}get shape(){return this._shape}set shape(value){const old=this._shape;this._shape=normalizeFlagShape(value),this.requestUpdate("shape",old)}get fidelity(){return this._fidelity}set fidelity(value){const old=this._fidelity;this._fidelity=normalizeFlagFidelity(value),this.requestUpdate("fidelity",old)}get effectiveFidelity(){return normalizeFlagFidelity(this.fidelity)}get loading(){return this.sourceState.status==="loading"}get code(){if(this.country)return ALPHA2_RE.test(this.country)?this.country.toLowerCase():alpha3ToAlpha2(this.country);if(this.language)return languageToCountry(this.language)}get unresolved(){return this.src||!this.country&&!this.language?!1:this.code===void 0}connectedCallback(){super.connectedCallback(),this.sourceRestartPending=!0,flagResolverSubscribers.add(this.onResolverGeneration),this.syncErrorAnnouncementSink(),this.resolverGeneration!==flagResolverGeneration&&(this.resolverGeneration=flagResolverGeneration),this.requestUpdate()}disconnectedCallback(){this.resolveToken++,this.sourceRestartPending=!0,flagResolverSubscribers.delete(this.onResolverGeneration),this.releaseErrorAnnouncementSink(),super.disconnectedCallback()}adoptedCallback(){super.adoptedCallback(),this.resolveToken++,this.sourceRestartPending=!0,this.releaseErrorAnnouncementSink(),this.syncErrorAnnouncementSink(),this.requestUpdate()}syncErrorAnnouncementSink(){this.isConnected&&this.errorAnnouncementSink?.element.ownerDocument!==this.ownerDocument&&(this.releaseErrorAnnouncementSink(),this.errorAnnouncementSink=acquireAnnouncementSink("assertive",{document:this.ownerDocument,source:this}))}releaseErrorAnnouncementSink(){this.errorAnnouncementSink?.release(),this.errorAnnouncementSink=void 0}announceLoadError(){this.errorAnnouncementSink?.announce(this.localize(FLAG_LOAD_ERROR_KEY))}setSourceState(state2,announceError=!1){this.sourceState=Object.freeze(state2),this.toggleAttribute("data-error",state2.status==="error"),this.toggleAttribute("data-unresolved",this.unresolved),this.setAttribute("aria-busy",String(state2.status==="loading")),announceError&&this.isConnected&&this.announceLoadError()}failSource(identity,announce=!0){this.setSourceState({status:"error",identity},announce)}onImageLoad(event,identity,url,request){const image=event.currentTarget;!this.isConnected||request!==this.activeSourceRequest||!image||image!==this.renderRoot.querySelector('[part="image"]')||this.sourceState.status!=="loading"||this.sourceState.identity!==identity||this.sourceState.url!==url||this.setSourceState({status:"loaded",identity,url})}onImageError(event,identity,request){const image=event.currentTarget;!this.isConnected||request!==this.activeSourceRequest||!image||image!==this.renderRoot.querySelector('[part="image"]')||this.sourceState.status!=="loading"||this.sourceState.identity!==identity||this.failSource(identity)}willUpdate(changed){super.willUpdate(changed);const sourceChanged=changed.has("country")||changed.has("language")||changed.has("src")||changed.has("fidelity")||changed.has("resolverGeneration");if(typeof Node<"u"&&!this.isConnected){sourceChanged&&(this.resolveToken++,this.sourceRestartPending=!0);return}if(this.hasUpdated&&!sourceChanged&&!this.sourceRestartPending)return;const connectionBaseline=this.sourceRestartPending;this.sourceRestartPending=!1;const token=++this.resolveToken,request=++this.activeSourceRequest,URLCtor=this.ownerDocument?.defaultView?.URL??globalThis.URL,directValue=typeof this.src=="string"?this.src.trim():"";if(directValue){const identity2=`direct:${directValue}`,url=safeMediaSrc(directValue,URLCtor);if(!url){this.failSource(identity2,!connectionBaseline);return}this.setSourceState({status:"loading",identity:identity2,url});return}const code=this.code;if(!code){this.setSourceState({status:"idle",identity:"idle"});return}const fidelity=this.effectiveFidelity,identity=`peer:${code}:${fidelity}:${this.resolverGeneration}`;this.setSourceState({status:"loading",identity}),loadFlagUrlResolver().then(async resolve=>{if(token!==this.resolveToken||request!==this.activeSourceRequest||!this.isConnected)return;if(typeof resolve!="function"){warnMissingFlagResolver(code),this.failSource(identity);return}const candidate=await resolve(code,fidelity==="standard"?void 0:{variant:fidelity});if(token!==this.resolveToken||request!==this.activeSourceRequest||!this.isConnected)return;if(candidate===void 0){this.setSourceState({status:"idle",identity});return}const url=safeMediaSrc(candidate,URLCtor);if(!url){this.failSource(identity);return}this.setSourceState({status:"loading",identity,url})}).catch(err=>{token!==this.resolveToken||request!==this.activeSourceRequest||!this.isConnected||(console.warn(`<lr-flag> failed to resolve a flag URL for "${code}":`,err),this.failSource(identity))})}updated(changed){super.updated(changed),this.setAttribute("aria-busy",String(this.sourceState.status==="loading")),this.toggleAttribute("data-unresolved",this.unresolved)}render(){const state2=this.sourceState,request=this.activeSourceRequest;if(this.unresolved)return html`<slot name="fallback"
+        >${this.fallback?html`<img part="fallback-image" src=${this.fallback} alt=${this.label??""} />`:nothing}</slot
+      >`;if(state2.status==="error")return html`<span part="error">${this.localize(FLAG_LOAD_ERROR_KEY)}</span>`;const url=state2.status==="loading"||state2.status==="loaded"?state2.url:void 0;if(!url&&state2.status!=="loading")return html``;const code=this.code,alt=hostAriaLabel(this)??this.label??(code?displayNameFor(code,this.effectiveLocale):"");return html`
       ${state2.status==="loading"?html`
             <span class="sr-only">${this.localize("loading")}</span>
             <lr-skeleton shape="rect" .announce=${!1}></lr-skeleton>
@@ -13,4 +15,4 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
               @load=${event=>this.onImageLoad(event,state2.identity,url,request)}
               @error=${event=>this.onImageError(event,state2.identity,request)}
             />`):null}
-    `}}__decorate([property()],LyraFlag.prototype,"country",void 0),__decorate([property()],LyraFlag.prototype,"language",void 0),__decorate([property()],LyraFlag.prototype,"src",void 0),__decorate([property()],LyraFlag.prototype,"label",void 0),__decorate([property({reflect:!0})],LyraFlag.prototype,"shape",null),__decorate([property({reflect:!0})],LyraFlag.prototype,"fidelity",null),__decorate([state()],LyraFlag.prototype,"sourceState",void 0),__decorate([state()],LyraFlag.prototype,"resolverGeneration",void 0);export{LyraFlag,loadFlagUrl,setFlagUrlResolver};
+    `}}__decorate([property()],LyraFlag.prototype,"country",void 0),__decorate([property()],LyraFlag.prototype,"fallback",void 0),__decorate([property()],LyraFlag.prototype,"language",void 0),__decorate([property()],LyraFlag.prototype,"src",void 0),__decorate([property()],LyraFlag.prototype,"label",void 0),__decorate([property({reflect:!0})],LyraFlag.prototype,"shape",null),__decorate([property({reflect:!0})],LyraFlag.prototype,"fidelity",null),__decorate([state()],LyraFlag.prototype,"sourceState",void 0),__decorate([state()],LyraFlag.prototype,"resolverGeneration",void 0);export{LyraFlag,loadFlagUrl,setFlagUrlResolver};

package/dist/components/media/flag/flag.styles.js

@@ -1,6 +1,7 @@
 import{css}from"lit";const styles=css`
   :host {
     display: inline-block;
+    position: relative;
     aspect-ratio: var(--lr-flag-aspect-ratio, 4 / 3);
     block-size: var(--lr-size-1em);
     line-height: 0;
@@ -15,6 +16,11 @@ import{css}from"lit";const styles=css`
     box-shadow: 0 0 0 var(--lr-size-1px) var(--lr-color-border) inset;
     object-fit: var(--lr-flag-object-fit, cover);
   }
+  [part='image'][hidden] {
+    position: absolute;
+    inset: 0;
+    visibility: hidden;
+  }
   [part='error'] {
     display: inline-block;
     color: var(--lr-color-danger);
@@ -30,7 +36,7 @@ import{css}from"lit";const styles=css`
     line-height: var(--lr-line-height-normal);
     vertical-align: baseline;
   }
-  :host([shape='circle']) {
+  :host([shape='circle']:not([data-error])) {
     block-size: var(--lr-size-1em);
     inline-size: var(--lr-size-1em);
   }

package/dist/components/media/flag/language-map.d.ts

@@ -9,6 +9,16 @@
  * match this shape is treated the same as an unknown/missing flag.
  */
 export declare const ALPHA2_RE: RegExp;
+/** ISO 3166-1 alpha-3 shape: exactly three ASCII letters, case-insensitive. Length alone
+ *  disambiguates the two code spaces, so no explicit format hint is needed. */
+export declare const ALPHA3_RE: RegExp;
+/**
+ * The alpha-2 code for an ISO 3166-1 alpha-3 code, or `undefined` when it isn't one. Case
+ * insensitive. Deliberately excludes user-assigned and withdrawn codes: a historical or defunct
+ * state has no current flag to resolve, so it takes the component's unresolved path rather than
+ * silently mapping to a successor state's flag.
+ */
+export declare function alpha3ToAlpha2(code: string): string | undefined;
 /**
  * Default mapping from a language subtag to a representative country flag
  * (ISO 3166-1 alpha-2). Languages don't map 1:1 to countries; these are the

package/dist/components/media/flag/language-map.js

@@ -1 +1 @@
-import{getDisplayNames}from"../../../internal/intl-cache.js";const ALPHA2_RE=/^[a-z]{2}$/i,LANGUAGE_TO_COUNTRY={en:"gb",fr:"fr",de:"de",es:"es",it:"it",pt:"pt",nl:"nl",ar:"sa",zh:"cn",ja:"jp",ko:"kr",ru:"ru",pl:"pl",tr:"tr",sv:"se",da:"dk",fi:"fi",no:"no",nb:"no",cs:"cz",sk:"sk",el:"gr",he:"il",hi:"in",th:"th",vi:"vn",id:"id",ms:"my",uk:"ua",ro:"ro",hu:"hu",bg:"bg",hr:"hr",sr:"rs",sl:"si",et:"ee",lv:"lv",lt:"lt",fa:"ir",ur:"pk",bn:"bd",ta:"in",ca:"es"};function mappedCountry(language){return Object.hasOwn(LANGUAGE_TO_COUNTRY,language)?LANGUAGE_TO_COUNTRY[language]:void 0}function languageToCountry(language){if(typeof language!="string")return;const normalized=language.trim().replaceAll("_","-");if(!normalized)return;try{const locale=new Intl.Locale(normalized);return locale.region&&ALPHA2_RE.test(locale.region)?locale.region.toLowerCase():mappedCountry(locale.language.toLowerCase())}catch{}const parts=normalized.toLowerCase().split("-").slice(0,16),base=parts[0];if(base.length!==1){for(const part of parts.slice(1)){if(!/^[a-z0-9]{1,8}$/.test(part)||part.length===1)break;if(ALPHA2_RE.test(part))return part}return mappedCountry(base)}}function localeNativeName(tag){try{return getDisplayNames(tag,{type:"language"}).of(tag)??tag}catch{return tag}}export{ALPHA2_RE,LANGUAGE_TO_COUNTRY,languageToCountry,localeNativeName};
+import{getDisplayNames}from"../../../internal/intl-cache.js";const ALPHA2_RE=/^[a-z]{2}$/i,ALPHA3_RE=/^[a-z]{3}$/i,ALPHA3_TO_ALPHA2_PACKED="abwawafgafagoaoaiaaialaaxalbalandadareaeargararmamasmasataaqatftfatgagausauautatazeazbdibibelbebenbjbesbqbfabfbgdbdbgrbgbhrbhbhsbsbihbablmblblrbyblzbzbmubmbolbobrabrbrbbbbrnbnbtnbtbvtbvbwabwcafcfcancacckccchechchlclchncncivcicmrcmcodcdcogcgcokckcolcocomkmcpvcvcricrcubcucuwcwcxrcxcymkycypcyczeczdeudedjidjdmadmdnkdkdomdodzadzecuecegyegeriereshehespesesteeethetfinfifjifjflkfkfrafrfrofofsmfmgabgagbrgbgeogeggyggghaghgibgigingnglpgpgmbgmgnbgwgnqgqgrcgrgrdgdgrlglgtmgtgufgfgumguguygyhkghkhmdhmhndhnhrvhrhtihthunhuidnidimnimindiniotioirlieirnirirqiqislisisrilitaitjamjmjeyjejorjojpnjpkazkzkenkekgzkgkhmkhkirkiknaknkorkrkwtkwlaolalbnlblbrlrlbylylcalclielilkalklsolsltultluxlulvalvmacmomafmfmarmamcomcmdamdmdgmgmdvmvmexmxmhlmhmkdmkmlimlmltmtmmrmmmnememngmnmnpmpmozmzmrtmrmsrmsmtqmqmusmumwimwmysmymytytnamnanclncnernenfknfngangnicniniununldnlnornonplnpnrunrnzlnzomnompakpkpanpapcnpnperpephlphplwpwpngpgpolplpriprprkkpprtptprypypsepspyfpfqatqareurerourorusrurwarwsausasdnsdsensnsgpsgsgsgsshnshsjmsjslbsbsleslslvsvsmrsmsomsospmpmsrbrsssdssstpstsursrsvksksvnsisweseswzszsxmsxsycscsyrsytcatctcdtdtgotgthathtjktjtkltktkmtmtlstltontottotttuntnturtrtuvtvtwntwtzatzugaugukruaumiumuryuyusausuzbuzvatvavctvcvenvevgbvgvirvivnmvnvutvuwlfwfwsmwsyemyezafzazmbzmzwezw";let alpha3Lookup;function alpha3ToAlpha2(code){if(ALPHA3_RE.test(code)){if(!alpha3Lookup){alpha3Lookup=new Map;for(let index=0;index<ALPHA3_TO_ALPHA2_PACKED.length;index+=5)alpha3Lookup.set(ALPHA3_TO_ALPHA2_PACKED.slice(index,index+3),ALPHA3_TO_ALPHA2_PACKED.slice(index+3,index+5))}return alpha3Lookup.get(code.toLowerCase())}}const LANGUAGE_TO_COUNTRY={en:"gb",fr:"fr",de:"de",es:"es",it:"it",pt:"pt",nl:"nl",ar:"sa",zh:"cn",ja:"jp",ko:"kr",ru:"ru",pl:"pl",tr:"tr",sv:"se",da:"dk",fi:"fi",no:"no",nb:"no",cs:"cz",sk:"sk",el:"gr",he:"il",hi:"in",th:"th",vi:"vn",id:"id",ms:"my",uk:"ua",ro:"ro",hu:"hu",bg:"bg",hr:"hr",sr:"rs",sl:"si",et:"ee",lv:"lv",lt:"lt",fa:"ir",ur:"pk",bn:"bd",ta:"in",ca:"es"};function mappedCountry(language){return Object.hasOwn(LANGUAGE_TO_COUNTRY,language)?LANGUAGE_TO_COUNTRY[language]:void 0}function languageToCountry(language){if(typeof language!="string")return;const normalized=language.trim().replaceAll("_","-");if(!normalized)return;try{const locale=new Intl.Locale(normalized);return locale.region&&ALPHA2_RE.test(locale.region)?locale.region.toLowerCase():mappedCountry(locale.language.toLowerCase())}catch{}const parts=normalized.toLowerCase().split("-").slice(0,16),base=parts[0];if(base.length!==1){for(const part of parts.slice(1)){if(!/^[a-z0-9]{1,8}$/.test(part)||part.length===1)break;if(ALPHA2_RE.test(part))return part}return mappedCountry(base)}}function localeNativeName(tag){try{return getDisplayNames(tag,{type:"language"}).of(tag)??tag}catch{return tag}}export{ALPHA2_RE,ALPHA3_RE,LANGUAGE_TO_COUNTRY,alpha3ToAlpha2,languageToCountry,localeNativeName};

package/dist/components/media/image-comparer/image-comparer.styles.js

@@ -2,11 +2,6 @@ import{css}from"lit";const styles=css`
   :host {
     display: block;
     min-inline-size: 0;
-    /* Namespaced sizing surface, fed by the bare Shoelace-compat names. An unprefixed custom
-       property inherits, so a single --handle-size anywhere up the tree would otherwise silently
-       retune this component along with every other one reading a generically-named property.
-       Consumers override the --lr-image-comparer-* names on an ancestor or the host; the compat
-       names remain the private defaults' fallback source. */
     --_lr-image-comparer-divider-width: var(
       --divider-width,
       var(--lr-size-1px)
@@ -39,13 +34,6 @@ import{css}from"lit";const styles=css`
   [part~="base"][data-orientation="vertical"] [part="before"] {
     clip-path: inset(0 0 calc(100% - var(--lr-comparer-position, 50%)) 0);
   }
-  /* clip-path's inset() only accepts physical top/right/bottom/left offsets -- no logical
-     equivalent exists -- while [part='divider'] below is positioned with the logical
-     inset-inline-start, which the browser already mirrors under RTL on its own. Without this
-     override the clipped 'before' region stays pinned to the physical-left portion regardless of
-     direction, while the divider (and native range-input handle) move to the right under RTL,
-     visibly desyncing the boundary from the line the user is dragging. Vertical orientation is a
-     block-axis split, unaffected by inline direction, so it's excluded and keeps its own rule above. */
   :host(:dir(rtl)) [part="before"] {
     clip-path: inset(0 0 0 calc(100% - var(--lr-comparer-position, 50%)));
   }
@@ -61,6 +49,10 @@ import{css}from"lit";const styles=css`
     max-inline-size: 100%;
     overflow-wrap: anywhere;
   }
+  [part="before"] ::slotted([hidden]:not([hidden="until-found" i])),
+  [part="after"] ::slotted([hidden]:not([hidden="until-found" i])) {
+    display: none;
+  }
   [part="divider"] {
     position: absolute;
     z-index: var(--lr-layer-popover);
@@ -71,8 +63,6 @@ import{css}from"lit";const styles=css`
       var(--_lr-image-comparer-divider-width)
     );
     background: var(--lr-color-surface);
-    /* Card step, not the overlay step: the shadow here only has to keep a hairline legible against
-       arbitrary imagery on both sides -- a wider blur reads as a smudge along the seam. */
     box-shadow: var(--lr-shadow-s);
     pointer-events: none;
   }
@@ -88,10 +78,6 @@ import{css}from"lit";const styles=css`
   }
   [part="handle"] {
     position: absolute;
-    /* --lr-layer-tooltip does not exist (no fallback -> z-index: auto, stacking the interaction
-       wrapper BELOW [part='before']'s clipped pointer-events-enabled region and intercepting its
-       own drag/click input). Matching [part='divider']'s own --lr-layer-popover is sufficient: the
-       handle renders after the divider, so an equal z-index still wins the paint-order tie. */
     z-index: var(--lr-layer-popover);
     inset: 0;
   }
@@ -105,16 +91,6 @@ import{css}from"lit";const styles=css`
     cursor: ew-resize;
   }
   [part~="base"][data-orientation="vertical"] [part="input"] {
-    /* A native <input type="range"> always maps pointer position along its own inline axis,
-       which defaults to horizontal-tb -- so without this override, dragging up/down over the
-       visibly vertical divider does nothing; only a horizontal drag (invisible, off to the
-       side) would move the thumb. writing-mode: vertical-lr switches the input's inline axis to
-       run top-to-bottom, matching [part='divider']'s own top-anchored inset-block-start above.
-       direction is pinned to ltr (rather than left to inherit an ambient dir="rtl") because
-       vertical-lr's inline progression reverses to bottom-to-top under direction: rtl, which
-       would desync the native handle's value from the always-top-to-bottom divider position --
-       the same block-axis-is-unaffected-by-inline-direction invariant the 'before' clip-path
-       override above already relies on for vertical orientation. */
     writing-mode: vertical-lr;
     direction: ltr;
     cursor: ns-resize;
@@ -177,14 +153,9 @@ import{css}from"lit";const styles=css`
     outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);
     outline-offset: var(--lr-focus-ring-offset);
   }
-  /* [part='input'] is a fully-transparent full-bleed native <input type="range">. Keep hover
-     feedback on the divider too, so the full drag surface responds even when the pointer isn't
-     directly over the small visible handle. */
   [part~="base"]:has([part="input"]:hover) [part="divider"] {
     background: var(--lr-color-brand);
   }
-  /* Pressed rides the same :has() indirection as the hover rule above: the transparent full-bleed
-     input has nothing of its own to tint, so mid-drag the seam deepens past its hover accent. */
   [part~="base"]:has([part="input"]:active) [part="divider"] {
     background: color-mix(
       in oklab,

package/dist/components/media/image-viewer/image-viewer.class.js

@@ -35,8 +35,6 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
       @lr-zoom-change=${this.onFrameZoomChange}
       @focus=${event=>event.stopPropagation()}
       @blur=${event=>event.stopPropagation()}
-      @lr-focus=${event=>event.stopPropagation()}
-      @lr-blur=${event=>event.stopPropagation()}
     >
       <div
         part="rotation-frame"

package/dist/components/media/image-viewer/image-viewer.styles.js

@@ -58,8 +58,6 @@ import{css}from"lit";const styles=css`
   [part="annotate-toggle"]:hover {
     background: var(--lr-color-brand-quiet);
   }
-  /* Declared here rather than after the [aria-pressed='true'] rule below so the toggle's own "on"
-     fill keeps winning the source-order tie, exactly as it already does against :hover. */
   [part="fit-control"]:active,
   [part="rotate-button"]:active,
   [part="annotate-toggle"]:active {
@@ -96,6 +94,13 @@ import{css}from"lit";const styles=css`
       var(--lr-color-brand)
     );
   }
+  [part="annotate-toggle"][aria-pressed="true"]:active {
+    background: color-mix(
+      in oklab,
+      var(--lr-image-viewer-annotate-active-bg, var(--lr-color-brand-quiet)),
+      var(--lr-color-mix-partner) var(--lr-color-mix-active)
+    );
+  }
   [part="rotation-frame"] {
     position: relative;
     display: inline-block;
@@ -106,7 +111,6 @@ import{css}from"lit";const styles=css`
   }
   [part="rotation-frame"][data-measured] [part="image-wrapper"] {
     position: absolute;
-    /* policy-allow(physical-css): rotation geometry is a physical raster coordinate system. */
     left: 50%;
     top: 50%;
   }
@@ -117,8 +121,6 @@ import{css}from"lit";const styles=css`
     transition: transform var(--lr-transition-base);
     outline: none;
   }
-  /* 'actual' size intentionally keeps the image at its natural pixel dimensions -- undo the
-     100% cap above (and the 'width'/'contain' image constraints below) for that mode. */
   :host([fit="actual"]) [part="image-wrapper"] {
     max-inline-size: none;
   }
@@ -127,11 +129,6 @@ import{css}from"lit";const styles=css`
       transition: none;
     }
   }
-  /* The embedded pan-zoom's own [part='content'] sizes to its slotted content's natural
-     size by default (a max-content track), which leaves percentage sizing on the image below with
-     no definite basis to resolve against. Giving it the viewport's own inline size here is what
-     lets 'contain'/'width' scale the image to the available frame instead of its raw natural
-     pixel dimensions -- 'actual' leaves the default max-content sizing alone. */
   :host([fit="contain"]) [part="frame"]::part(content),
   :host([fit="width"]) [part="frame"]::part(content) {
     inline-size: 100%;
@@ -155,13 +152,6 @@ import{css}from"lit";const styles=css`
     position: absolute;
     inset: 0;
   }
-  /* Each tone sets --lr-image-viewer-highlight-fill rather than background directly, and the one
-     background declaration here reads it. That indirection is what lets the hover/active rules mix
-     from whichever fill a given highlight actually has: a background-mix written against the
-     untoned default would flatten every toned box to brand the instant the pointer touched it, and
-     a per-tone hover/active pair would be ten near-identical rules. The public
-     --lr-image-viewer-highlight-*-bg knobs are untouched -- still what each fill falls back
-     through. */
   [part="highlight"] {
     position: absolute;
     min-inline-size: var(--lr-icon-button-size);
@@ -238,10 +228,6 @@ import{css}from"lit";const styles=css`
       var(--lr-focus-ring-offset)
     );
   }
-  /* Was filter: brightness(), which multiplies every channel -- so it lightened a dark highlight,
-     did nothing at all to a white one, and (filter applying to the whole subtree) dragged
-     [part='highlight-label']'s text along with the box. Mixing the fill alone toward
-     --lr-color-mix-partner always moves, and only the fill moves. */
   [part="highlight"]:hover {
     background: color-mix(
       in oklab,
@@ -269,12 +255,6 @@ import{css}from"lit";const styles=css`
   [part="highlight-label"] {
     position: absolute;
     inset-block-start: calc(var(--lr-size-1-5em) * -1);
-    /* policy-allow(physical-css): the parent [part='highlight'] box is deliberately positioned with
-       physical left/top (see renderHighlights()'s comment -- region rects are physical
-       percent-of-image coordinates over a raster that never mirrors). The parent itself never moves
-       under RTL, so a logical inset here would flip this label to the box's opposite corner while
-       the box stayed put. Matching the parent's physical coordinate system keeps the label anchored
-       to the box's left edge in both directions. */
     left: 0;
     font-size: var(--lr-font-size-xs);
     color: var(--lr-color-text);

package/dist/components/media/lightbox/lightbox.class.js

@@ -41,8 +41,6 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
             .accessibleLabel=${positionText||null}
             @focus=${event=>event.stopPropagation()}
             @blur=${event=>event.stopPropagation()}
-            @lr-focus=${event=>event.stopPropagation()}
-            @lr-blur=${event=>event.stopPropagation()}
           ></lr-pan-zoom>
           ${count>1?html`
                 <button

package/dist/components/media/lightbox/lightbox.styles.js

@@ -1,11 +1,6 @@
 import{css}from"lit";const styles=css`
   :host {
     --_lr-lightbox-overlay-color: var(--lr-color-overlay-strong);
-    /* Background for every floating/toolbar icon button (close-button, previous-button,
-       next-button). These buttons float directly over arbitrary image content, not the app's
-       normal surface, so they reuse the "solid, high-contrast neutral fill" token rather than
-       --lr-color-surface for guaranteed contrast independent of both the page theme and
-       whatever's in the photo. */
     --_lr-lightbox-control-bg: var(--lr-color-neutral);
     --_lr-lightbox-control-color: var(--lr-color-on-neutral);
     display: none;
@@ -102,19 +97,12 @@ import{css}from"lit";const styles=css`
   [part="close-button"] {
     margin-inline-start: var(--lr-space-xs);
   }
-  /* :where() zeroes the wrapped selectors' specificity contribution, leaving only :hover itself
-     -- mirrors lr-attachment-trigger's identical fix for the same [part='x']:hover:not(:disabled)
-     over-specificity shape, so a consumer's ::part(close-button):hover /
-     ::part(previous-button):hover / ::part(next-button):hover override wins without !important. */
   :where([part="close-button"]):hover,
   :where([part="previous-button"]):hover:where(:not(:disabled)),
   :where([part="next-button"]):hover:where(:not(:disabled)) {
     background: var(--lr-color-brand-quiet);
     color: var(--lr-color-brand);
   }
-  /* Pressed carries the hover fill further toward --lr-color-mix-partner. These controls float over
-     arbitrary photography, so the press has to be legible on its own rather than relying on the
-     surrounding image to supply contrast. */
   :where([part="close-button"]):active,
   :where([part="previous-button"]):active:where(:not(:disabled)),
   :where([part="next-button"]):active:where(:not(:disabled)) {
@@ -147,8 +135,6 @@ import{css}from"lit";const styles=css`
     min-inline-size: 0;
     min-block-size: 0;
   }
-  /* Plain ::part() styling one level in, unrelated to exportparts -- stretches the embedded
-     frame to fill the stage, overriding pan-zoom's own min-block-size default. */
   lr-pan-zoom[part="frame"] {
     display: block;
     inline-size: 100%;
@@ -173,10 +159,6 @@ import{css}from"lit";const styles=css`
   [part="next-button"] {
     inset-inline-end: var(--lr-space-s);
   }
-  /* Rotate the wrapping part element, not the icon itself -- rotate(180deg) matches
-     pagination.styles.ts's existing previous-icon/next-icon recipe for a chevronIcon()-based
-     prev/next pair (carousel's scaleX(-1) recipe is for its literal ‹/› glyphs, a different base
-     case). */
   [part="previous-glyph"] {
     transform: rotate(180deg);
   }
@@ -203,9 +185,6 @@ import{css}from"lit";const styles=css`
     text-align: center;
     overflow-wrap: anywhere;
   }
-  /* Container-query lengths cannot reference custom properties. This is the documented 320px
-     narrow-allocation baseline expressed in root-relative units so it still follows the page's
-     type scale -- mirrors pagination.styles.ts's identical container query. */
   @container (max-inline-size: 20rem) {
     [part="counter"] {
       max-inline-size: 45%;

package/dist/components/media/map/map-loader.d.ts

@@ -1,5 +1,18 @@
 export interface MapLibreGeoJsonSource {
     setData(data: unknown): void;
+    /** maplibre-gl 3+ incremental update. Optional because older peers lack it. */
+    updateData?(diff: MapLibreGeoJsonDiff): void;
+}
+/** The subset of maplibre-gl's GeoJSON diff this component emits: per-feature property updates. */
+export interface MapLibreGeoJsonDiff {
+    readonly update: readonly {
+        readonly id: string | number;
+        readonly addOrUpdateProperties: readonly {
+            readonly key: string;
+            readonly value: unknown;
+        }[];
+        readonly removeProperties: readonly string[];
+    }[];
 }
 export interface MapLibrePopupCapability {
     setHTML(html: string): this;
@@ -17,7 +30,10 @@ export interface MapLibreMarkerCapability {
     getElement?(): HTMLElement;
 }
 export interface MapLibreMapCapability {
-    getCanvas?(): HTMLCanvasElement;
+    /** Required, unlike setMaxBounds below: the loader validates getCanvas is callable and rejects a
+     *  peer without it, so holding this type already implies the method is present. Call sites still
+     *  guard with `?.()` against a peer that satisfies the shape check and then lies at runtime. */
+    getCanvas(): HTMLCanvasElement;
     getCenter(): {
         lng: number;
         lat: number;
@@ -26,6 +42,8 @@ export interface MapLibreMapCapability {
     setCenter(center: [number, number]): unknown;
     setZoom(zoom: number): unknown;
     resize(): unknown;
+    /** Optional: absent on peers predating it, and the caller feature-detects before use. */
+    setMaxBounds?(bounds: readonly [readonly [number, number], readonly [number, number]] | null): unknown;
     remove(): void;
     on(type: 'error', listener: (event: {
         error?: unknown;

package/dist/components/media/map/map-loader.js

@@ -1 +1 @@
-import{resolveOptionalPeerCapability,unwrapOptionalPeerDefault}from"../../../internal/optional-peer-capabilities.js";const MAP_METHODS=["getCenter","getZoom","setCenter","setZoom","resize","remove","on","once","setStyle","getSource","addSource","removeSource","getLayer","addLayer","removeLayer","setPaintProperty","queryRenderedFeatures"],MARKER_METHODS=["setLngLat","setPopup","getPopup","addTo","remove"],POPUP_METHODS=["setHTML","setText"];function isObjectLike(value){return(typeof value=="object"||typeof value=="function")&&value!==null}function isConstructor(value){if(typeof value!="function")return!1;try{return Reflect.construct(Object,[],value),!0}catch{return!1}}function missingConstructorCapability(module,name,methods){const Constructor=module[name];if(!isConstructor(Constructor))return name;const prototype=Constructor.prototype;if(!isObjectLike(prototype))return`${name}.prototype`;for(const method of methods)if(typeof prototype[method]!="function")return`${name}.prototype.${method}`}function missingMaplibreCapability(candidate){return isObjectLike(candidate)?missingConstructorCapability(candidate,"Map",MAP_METHODS)??missingConstructorCapability(candidate,"Marker",MARKER_METHODS)??missingConstructorCapability(candidate,"Popup",POPUP_METHODS):"module namespace"}function isMaplibreModule(candidate){return missingMaplibreCapability(candidate)===void 0}function resolveMaplibreModule(value){const module=resolveOptionalPeerCapability(value,isMaplibreModule);if(module)return module;const candidate=unwrapOptionalPeerDefault(value),missing=missingMaplibreCapability(candidate)??"module namespace";throw new Error(`Invalid optional peer \`maplibre-gl\`: missing or invalid \`${missing}\` capability.`)}let maplibre;async function loadMaplibreModule(importer=()=>import("maplibre-gl")){try{return resolveMaplibreModule(await importer())}catch(error){return console.warn("<lr-map> needs the optional peer dependency `maplibre-gl` \u2014 install it with `pnpm add maplibre-gl`.",error),null}}function loadMaplibre(){return maplibre||(maplibre=loadMaplibreModule()),maplibre}export{loadMaplibre,loadMaplibreModule};
+import{resolveOptionalPeerCapability,unwrapOptionalPeerDefault}from"../../../internal/optional-peer-capabilities.js";const MAP_METHODS=["getCanvas","getCenter","getZoom","setCenter","setZoom","resize","remove","on","once","setStyle","getSource","addSource","removeSource","getLayer","addLayer","removeLayer","setPaintProperty","queryRenderedFeatures"],MARKER_METHODS=["setLngLat","setPopup","getPopup","addTo","remove"],POPUP_METHODS=["setHTML","setText"];function isObjectLike(value){return(typeof value=="object"||typeof value=="function")&&value!==null}function isConstructor(value){if(typeof value!="function")return!1;try{return Reflect.construct(Object,[],value),!0}catch{return!1}}function missingConstructorCapability(module,name,methods){const Constructor=module[name];if(!isConstructor(Constructor))return name;const prototype=Constructor.prototype;if(!isObjectLike(prototype))return`${name}.prototype`;for(const method of methods)if(typeof prototype[method]!="function")return`${name}.prototype.${method}`}function missingMaplibreCapability(candidate){return isObjectLike(candidate)?missingConstructorCapability(candidate,"Map",MAP_METHODS)??missingConstructorCapability(candidate,"Marker",MARKER_METHODS)??missingConstructorCapability(candidate,"Popup",POPUP_METHODS):"module namespace"}function isMaplibreModule(candidate){return missingMaplibreCapability(candidate)===void 0}function resolveMaplibreModule(value){const module=resolveOptionalPeerCapability(value,isMaplibreModule);if(module)return module;const candidate=unwrapOptionalPeerDefault(value),missing=missingMaplibreCapability(candidate)??"module namespace";throw new Error(`Invalid optional peer \`maplibre-gl\`: missing or invalid \`${missing}\` capability.`)}let maplibre;async function loadMaplibreModule(importer=()=>import("maplibre-gl")){try{return resolveMaplibreModule(await importer())}catch(error){return console.warn("<lr-map> needs the optional peer dependency `maplibre-gl` \u2014 install it with `pnpm add maplibre-gl`.",error),null}}function loadMaplibre(){return maplibre||(maplibre=loadMaplibreModule()),maplibre}export{loadMaplibre,loadMaplibreModule};