@aceshooting/lyra-ui 25.6.0 → 25.6.2

package/llms/components/lr-swatch-picker.md

@@ -225,9 +225,12 @@ class AccentTrigger extends LitElement {
 `gemstoneAccentPicker` names the canonical composition of `lr-icon-button`, `lr-popover`, and
 `lr-swatch-picker mode="gemstone"`. It is a **pattern name, not an exported component or tag**.
 Use it for application accent selection: a glowing current-gem trigger, one compact
-“Gemstone: selected name” caption, and all nine canonical gemstones, in `GEMSTONE_KEYS` order, in
-one row. Localize the caption, trigger, dialog, radiogroup, and item names. Omit introductory copy
-and a second selected-name paragraph.
+“Selected accent: Emerald” heading (with the selected name updated), and all nine canonical
+gemstones, in `GEMSTONE_KEYS` order, in one row. Use that same localized selected-value label for
+the trigger's accessible name and hover title, dialog, radiogroup, and single visible heading.
+Interpolate the selected name through the application's locale catalog. Each localized item `label`
+supplies its option's accessible name and title through `lr-swatch-picker`. Omit introductory copy
+and a second selected-name row.
 
 The consuming Lit component imports these granular entries and lists
 `gemstoneSelectedGlyphStyles` in its `static styles` ahead of the CSS that follows.
@@ -247,7 +250,7 @@ import {
 } from '@aceshooting/lyra-ui/theme/gemstones.js';
 ```
 
-`--accent-color`, `--caption-color`, and `--text-color` are application-owned theme tokens.
+`--accent-color` and `--text-color` are application-owned theme tokens.
 `--lr-overlay-max-inline-size` lifts the popup's default 20rem cap so the 20rem palette plus the
 popover's own padding fits. Both `--lr-gemstone-selected-*` values reach the trigger glyph and the
 picker's checked glyph alike: a 0.42rem halo at 92% of the accent. Leave
@@ -284,11 +287,10 @@ while pressed:
 }
 .heading {
   margin: .2rem .3rem .5rem;
-  color: var(--caption-color);
+  color: var(--text-color);
   font-size: .75rem;
   font-weight: 600;
 }
-.name { color: var(--text-color); }
 .palette lr-swatch-picker {
   padding: 0 .3rem .3rem;
   --lr-swatch-picker-hit-size: 1.75rem;
@@ -312,10 +314,11 @@ whole trigger, so the halo follows the gem's silhouette. The focus ring belongs
 do not add a permanent circular selection border. Leave the popover's default content padding and
 arrow intact.
 
-This Lit template assumes `selected` is a `GemstoneKey`. `accentLabel` names the dialog and the
-radiogroup. `triggerLabel(name)` (“Accent color: Ruby”), `captionLabel` (“Gemstone:”, with the
-locale's own separator), and `translateGemstone()` come from the application's catalog.
-`onAccentChange()` validates the string and updates application state:
+This Lit template assumes `selected` is a `GemstoneKey`. `selectedAccentLabel(name)` is the
+application's localized, interpolated form of “Selected accent: {name}”; `translateGemstone()`
+provides the localized name. The same resulting label appears in the single heading and names the
+trigger, dialog, and radiogroup. `onAccentChange()` validates the string and updates application
+state:
 
 ```ts
 const items = GEMSTONE_KEYS.map((key) => ({
@@ -326,15 +329,16 @@ const items = GEMSTONE_KEYS.map((key) => ({
 }));
 
 const name = translateGemstone(selected);
+const label = selectedAccentLabel(name);
 html`
   <lr-popover class="gemstone-accent-picker" placement="bottom-end"
-    popup-role="dialog" aria-label=${accentLabel}>
-    <lr-icon-button slot="trigger" label=${triggerLabel(name)}>
+    popup-role="dialog" aria-label=${label}>
+    <lr-icon-button slot="trigger" label=${label} title=${label}>
       <span class="gem" data-lr-gemstone-selected aria-hidden="true">${gemstoneGlyph(GEMSTONES[selected].fill)}</span>
     </lr-icon-button>
     <div class="palette">
-      <p class="heading">${captionLabel} <span class="name">${name}</span></p>
-      <lr-swatch-picker mode="gemstone" aria-label=${accentLabel}
+      <p class="heading">${label}</p>
+      <lr-swatch-picker mode="gemstone" aria-label=${label}
         .items=${items} .value=${selected}
         @lr-change=${(event: CustomEvent<{ value: string }>) => onAccentChange(event.detail.value)}>
       </lr-swatch-picker>

package/llms/shared/native-styles-and-utilities.md

@@ -292,8 +292,10 @@ an already treated Lyra popup.
 local high container surface, then the overlay surface, and resolves on the painted wrapper, so nearer
 theme inputs work.
 The existing `--lr-theme-surface-opacity`, `--lr-theme-surface-blur`,
-`--lr-theme-surface-saturation` and `--lr-theme-surface-highlight` controls apply. Glass uses 70%
+`--lr-theme-surface-saturation` and `--lr-theme-surface-highlight` controls apply. Glass uses 60%
 opacity by default, 12px blur with a 16px ceiling, and qualified text, edges and focus.
+At opacity below 70%, dark Glass deepens the fill to keep light foregrounds readable against
+bright backdrops; higher opacity keeps the selected fill color.
 The public opacity input accepts 0–1; lower custom opacity may expose backdrops that need
 stronger foreground contrast. Solid and accessibility preferences still force opaque fills.
 Explicit `data-lr-surface="solid"`, unsupported backdrop filtering, reduced transparency, increased

package/llms/shared/styles-and-tokens.md

@@ -137,13 +137,16 @@ accepts absolute colors used as contrast reference surfaces, not gradients or im
 semantic surface/text pairings for content and keep the decorative layer behind it.
 
 Use the existing [gemstoneAccentPicker composition](../components/lr-swatch-picker.md#gemstoneaccentpicker--the-signature-accent-selector),
-with its localized caption, nine canonical gemstones, and shared selected-glyph treatment. Keep
-`--lr-swatch-picker-wrap: nowrap`: desktop hit size `1.75rem` and gap `.25rem`; at widths up to
-`30rem`, hit size `1.5rem` and gap `.125rem` (28/4px and 24/2px at a 16px root). Leave its fill size
-unset. Bound the palette to the viewport and provide horizontal overflow for unusually narrow
-allocations or enlarged text; keyboard focus must bring every swatch into view. Do not shrink
-below the component's 24px floor or replace its Arrow/Home/End and RTL behavior. For an independent
-Shine preference, set `--lr-gemstone-selected-animation: none` on the scope shared by the trigger
+with its single localized “Selected accent: {name}” heading, nine canonical gemstones, and shared
+selected-glyph treatment. Update the name when selection changes. Use the same interpolated label
+for the trigger's accessible name and hover title, dialog, radiogroup, and visible heading; do not
+add a second selected-name row. Pass localized names as each swatch item's `label`, which supplies
+its accessible name and title. Keep `--lr-swatch-picker-wrap: nowrap`: desktop hit size `1.75rem` and
+gap `.25rem`; at widths up to `30rem`, hit size `1.5rem` and gap `.125rem` (28/4px and 24/2px at a
+16px root). Leave its fill size unset. Bound the palette to the viewport and provide horizontal
+overflow for unusually narrow allocations or enlarged text; keyboard focus must bring every swatch
+into view. Do not shrink below the component's 24px floor or replace its Arrow/Home/End and RTL
+behavior. For an independent Shine preference, set `--lr-gemstone-selected-animation: none` on the scope shared by the trigger
 and picker; remove that declaration for Shine ON. OFF preserves the halo and selected accent.
 Application and OS reduced motion still take precedence; persist Shine independently from motion.
 See the composition guide for the controlled picker and preference wiring.
@@ -1130,11 +1133,13 @@ forced colors retain solid fills. Solid surfaces use `backdrop-filter: none`; fo
 `Canvas`. Offer a solid choice wherever the application offers glass, since reduced-transparency
 media-query support varies between browsers.
 
-Regular glass defaults to 70% opacity with a 12px blur clamped to 16px.
+Regular glass defaults to 60% opacity with a 12px blur clamped to 16px.
 The public `--lr-theme-surface-opacity` input accepts 0 through 1. Lower opacity exposes more
-of the backdrop; the default foreground qualification covers 70%, while a custom lower setting
+of the backdrop; the default foreground qualification covers 60%, while a custom lower setting
 cannot guarantee contrast against every backdrop. Solid and accessibility preferences retain
 opaque fills regardless of this input.
+Dark Glass deepens the selected fill at opacity below 70% so light foregrounds remain readable
+against bright backdrops; at 70% and above, the selected fill keeps its original color.
 Necessary control borders use the effective painted opacity: their glass adjustment grows as
 transparency increases and disappears at 100% opacity. Ordinary and strong borders share this
 adjustment; decorative borders and explicit component border overrides keep their own tokens.
@@ -1148,10 +1153,10 @@ controls use their solid border colors while preserving the enclosing edge again
 Filled accent interiors retain qualification. Native descendants retain inherited public color
 aliases. Custom translucent content fills require the author to choose suitable control borders.
 A design panel can offer a Glass opacity range from 0–100%, shown when the selected surface is
-Glass. Start and reset it at 70%; convert the displayed percentage to the public token's 0–1 range.
+Glass. Start and reset it at 60%; convert the displayed percentage to the public token's 0–1 range.
 Apply this CSS input independently of look overrides: `setLyraStyle()` does not accept surface
 inputs in its `overrides` allowlist. Persist the percentage in the application's own settings and
-apply it before first paint, including after restoring those settings. Reset the app setting to 70
+apply it before first paint, including after restoring those settings. Reset the app setting to 60
 and reapply it. Native `.lr-surface-chrome` wrappers and eligible component chrome consume the
 same input:
 
@@ -1162,7 +1167,7 @@ function applyGlassOpacity(percent) {
   document.documentElement.style.setProperty('--lr-theme-surface-opacity', String(opacity));
 }
 
-applyGlassOpacity(70); // Default and reset value; apply saved app settings before first paint.
+applyGlassOpacity(60); // Default and reset value; apply saved app settings before first paint.
 ```
 
 Scrolling rail, popup, modal-panel and selection-toolbar surfaces keep a stationary decorative blur layer;

package/llms/shared.md

@@ -947,13 +947,16 @@ accepts absolute colors used as contrast reference surfaces, not gradients or im
 semantic surface/text pairings for content and keep the decorative layer behind it.
 
 Use the existing [gemstoneAccentPicker composition](../components/lr-swatch-picker.md#gemstoneaccentpicker--the-signature-accent-selector),
-with its localized caption, nine canonical gemstones, and shared selected-glyph treatment. Keep
-`--lr-swatch-picker-wrap: nowrap`: desktop hit size `1.75rem` and gap `.25rem`; at widths up to
-`30rem`, hit size `1.5rem` and gap `.125rem` (28/4px and 24/2px at a 16px root). Leave its fill size
-unset. Bound the palette to the viewport and provide horizontal overflow for unusually narrow
-allocations or enlarged text; keyboard focus must bring every swatch into view. Do not shrink
-below the component's 24px floor or replace its Arrow/Home/End and RTL behavior. For an independent
-Shine preference, set `--lr-gemstone-selected-animation: none` on the scope shared by the trigger
+with its single localized “Selected accent: {name}” heading, nine canonical gemstones, and shared
+selected-glyph treatment. Update the name when selection changes. Use the same interpolated label
+for the trigger's accessible name and hover title, dialog, radiogroup, and visible heading; do not
+add a second selected-name row. Pass localized names as each swatch item's `label`, which supplies
+its accessible name and title. Keep `--lr-swatch-picker-wrap: nowrap`: desktop hit size `1.75rem` and
+gap `.25rem`; at widths up to `30rem`, hit size `1.5rem` and gap `.125rem` (28/4px and 24/2px at a
+16px root). Leave its fill size unset. Bound the palette to the viewport and provide horizontal
+overflow for unusually narrow allocations or enlarged text; keyboard focus must bring every swatch
+into view. Do not shrink below the component's 24px floor or replace its Arrow/Home/End and RTL
+behavior. For an independent Shine preference, set `--lr-gemstone-selected-animation: none` on the scope shared by the trigger
 and picker; remove that declaration for Shine ON. OFF preserves the halo and selected accent.
 Application and OS reduced motion still take precedence; persist Shine independently from motion.
 See the composition guide for the controlled picker and preference wiring.
@@ -2058,8 +2061,10 @@ an already treated Lyra popup.
 local high container surface, then the overlay surface, and resolves on the painted wrapper, so nearer
 theme inputs work.
 The existing `--lr-theme-surface-opacity`, `--lr-theme-surface-blur`,
-`--lr-theme-surface-saturation` and `--lr-theme-surface-highlight` controls apply. Glass uses 70%
+`--lr-theme-surface-saturation` and `--lr-theme-surface-highlight` controls apply. Glass uses 60%
 opacity by default, 12px blur with a 16px ceiling, and qualified text, edges and focus.
+At opacity below 70%, dark Glass deepens the fill to keep light foregrounds readable against
+bright backdrops; higher opacity keeps the selected fill color.
 The public opacity input accepts 0–1; lower custom opacity may expose backdrops that need
 stronger foreground contrast. Solid and accessibility preferences still force opaque fills.
 Explicit `data-lr-surface="solid"`, unsupported backdrop filtering, reduced transparency, increased
@@ -5799,11 +5804,13 @@ forced colors retain solid fills. Solid surfaces use `backdrop-filter: none`; fo
 `Canvas`. Offer a solid choice wherever the application offers glass, since reduced-transparency
 media-query support varies between browsers.
 
-Regular glass defaults to 70% opacity with a 12px blur clamped to 16px.
+Regular glass defaults to 60% opacity with a 12px blur clamped to 16px.
 The public `--lr-theme-surface-opacity` input accepts 0 through 1. Lower opacity exposes more
-of the backdrop; the default foreground qualification covers 70%, while a custom lower setting
+of the backdrop; the default foreground qualification covers 60%, while a custom lower setting
 cannot guarantee contrast against every backdrop. Solid and accessibility preferences retain
 opaque fills regardless of this input.
+Dark Glass deepens the selected fill at opacity below 70% so light foregrounds remain readable
+against bright backdrops; at 70% and above, the selected fill keeps its original color.
 Necessary control borders use the effective painted opacity: their glass adjustment grows as
 transparency increases and disappears at 100% opacity. Ordinary and strong borders share this
 adjustment; decorative borders and explicit component border overrides keep their own tokens.
@@ -5817,10 +5824,10 @@ controls use their solid border colors while preserving the enclosing edge again
 Filled accent interiors retain qualification. Native descendants retain inherited public color
 aliases. Custom translucent content fills require the author to choose suitable control borders.
 A design panel can offer a Glass opacity range from 0–100%, shown when the selected surface is
-Glass. Start and reset it at 70%; convert the displayed percentage to the public token's 0–1 range.
+Glass. Start and reset it at 60%; convert the displayed percentage to the public token's 0–1 range.
 Apply this CSS input independently of look overrides: `setLyraStyle()` does not accept surface
 inputs in its `overrides` allowlist. Persist the percentage in the application's own settings and
-apply it before first paint, including after restoring those settings. Reset the app setting to 70
+apply it before first paint, including after restoring those settings. Reset the app setting to 60
 and reapply it. Native `.lr-surface-chrome` wrappers and eligible component chrome consume the
 same input:
 
@@ -5831,7 +5838,7 @@ function applyGlassOpacity(percent) {
   document.documentElement.style.setProperty('--lr-theme-surface-opacity', String(opacity));
 }
 
-applyGlassOpacity(70); // Default and reset value; apply saved app settings before first paint.
+applyGlassOpacity(60); // Default and reset value; apply saved app settings before first paint.
 ```
 
 Scrolling rail, popup, modal-panel and selection-toolbar surfaces keep a stationary decorative blur layer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aceshooting/lyra-ui",
-  "version": "25.6.0",
+  "version": "25.6.2",
   "description": "Free, independent Lit web components: an open-source alternative to Shoelace and Web Awesome with accessible forms, dashboards, charts, and agent UI.",
   "keywords": [
     "web-components",
@@ -11887,15 +11887,15 @@
     "katex": "^0.19.0",
     "libphonenumber-js": "^1.13.14",
     "mammoth": "^1.13.0",
-    "maplibre-gl": "^6.11.2",
+    "maplibre-gl": "^6.12.0",
     "marked": "^18.0.14",
     "oxc-parser": "^0.152.0",
     "papaparse": "^5.7.0",
-    "pdfjs-dist": "^6.3.289",
+    "pdfjs-dist": "^6.4.299",
     "pixelmatch": "^7.2.0",
     "playwright": "^1.63.0",
     "pngjs": "^7.0.0",
-    "postal-mime": "^4.0.2",
+    "postal-mime": "^4.0.4",
     "qrcode": "^1.5.4",
     "react": "^19.3.0",
     "shiki": "^4.5.0",