@aceshooting/lyra-ui 25.3.0 → 25.4.0

package/llms/shared.md

@@ -1315,7 +1315,8 @@ page you are on — that is what keeps two overlapping surfaces reading in the c
 
 ### Cascade layers
 
-`theme.css` declares its layer order up front, then puts all of its own tokens in `lr-theme`:
+`theme.css` declares its layer order up front, with base inputs in `lr-theme` and built-in profile
+rules in the `lr-theme-preset` sublayers:
 
 ```css
 @layer lr-base, lr-theme, lr-theme-preset, lr-utilities, lr-overrides;
@@ -1323,9 +1324,10 @@ page you are on — that is what keeps two overlapping surfaces reading in the c
 
 - **`lr-base`** — contains the explicitly scoped native-element rules only when the optional
   `native.css` asset is imported.
-- **`lr-theme`** — where every `--lr-theme-*` token `theme.css` ships is declared.
-- **`lr-theme-preset`** — the compatibility layer name that holds optional look stylesheets, such as
-  [`looks/shadcn.css`](#the-shadcn-look--looksshadcncss). Empty unless one is imported.
+- **`lr-theme`** — contains the base theme inputs and token resolvers.
+- **`lr-theme-preset`** — the compatibility layer name for look, density, surface, accent and mode
+  rules. `theme.css` already supplies the built-in Shadcn, Glass and Emerald profile here; optional
+  look stylesheets add their own rules to the same sublayers.
 - **`lr-utilities`** — contains exact `lr-*` classes only when the optional `utilities.css` asset is
   imported.
 - **`lr-overrides`** — named so an application can opt its own rules into a defined position
@@ -1384,17 +1386,25 @@ reason.
 
 ### The shadcn look — looks/shadcn.css
 
-Import the base resolver and the optional look stylesheet, then select the look on the scope that should receive it:
+`theme.css` already installs Shadcn as the built-in default and supports explicit
+`data-lr-look="shadcn"` scopes. Import it once; the separate Shadcn sheet is unnecessary for this
+profile:
 
 ~~~ts
 import "@aceshooting/lyra-ui/theme.css";
-import "@aceshooting/lyra-ui/looks/shadcn.css";
 import { setLyraStyle } from "@aceshooting/lyra-ui/theme.js";
 
 setLyraStyle({ look: "shadcn" });
 ~~~
 
-The stylesheet declares values only under data-lr-look="shadcn". It composes with the independent mode, surface, density, and accent axes. For a local region, set data-lr-look="shadcn" on that region or use applyLyraStyleScope(). A nested data-lr-mode="dark" still changes mode without changing the look.
+Shadcn composes with the independent mode, surface, density and accent axes. For a local region,
+set data-lr-look="shadcn" on that region or use applyLyraStyleScope(). A nested data-lr-mode="dark"
+still changes mode without changing the look.
+
+The separate `looks/shadcn.css` sheet remains compatible. Besides the same scoped look values, it
+adds legacy `.light` and `.dark` mode aliases inside a Shadcn scope. Import that sheet only when
+those aliases are needed; prefer `data-lr-mode`, `data-lr-theme` or `.lr-light`/`.lr-dark` for new
+code. Explicit Lyra mode selectors on the same element take precedence over the compatibility aliases.
 
 The look sets --lr-theme-* inputs, so no component API changes. Its rules use Lyra's named cascade layers: unlayered application rules still win, and runtime accent ramps still take precedence over look values for the roles they paint. Import order between theme.css and looks/shadcn.css does not change the layer order.
 
@@ -1412,7 +1422,9 @@ Override the look through an unlayered application rule or the lr-overrides laye
 }
 ~~~
 
-The former global themes/shadcn.css facade and its data-lr-theme-preset behavior have been removed. Use looks/shadcn.css and the data-lr-look axis for new styling.
+The former global themes/shadcn.css facade and its data-lr-theme-preset behavior have been removed.
+Use theme.css and the data-lr-look axis for new styling; looks/shadcn.css is needed only for the
+compatibility aliases above.
 
 ### Where an override actually reaches
 
@@ -1655,7 +1667,7 @@ bytes; build plugins must not prepend the bootstrap ahead of it.
 
 For a strict CSP that disallows inline scripts, the package also publishes theme-bootstrap.js, a classic script asset with identical bytes. Load it synchronously after the charset declaration and before stylesheets. Its optional data-lr-theme-storage-key and data-lr-theme-attributes attributes select an application-owned storage key or mode-attribute list; values are validated and fall back to defaults when invalid.
 
-**Migrating the retired theme facade.** New code uses setLyraStyle() and getLyraStyle(). Map old auto mode to system, an old surface reference color to accentBackground, and an old token map to overrides; review custom CSS colors that share a gemstone name before choosing a named accent. Replace preset definitions with a LyraLook plus explicit style choices. Replace selectors for data-lr-theme-preset with the actual axis they need, such as data-lr-look="shadcn". Import looks/shadcn.css in place of the removed fixed themes/shadcn.css facade and select the look with setLyraStyle({ look: "shadcn" }) or a scoped data-lr-look attribute. Listen for lr-style-change and read event.detail.style and event.detail.changed; the old theme and preset events are no longer emitted. For the complete project-by-project sequence, see [Upgrading from v23 to v24](v23-to-v24-migration.md).
+**Migrating the retired theme facade.** New code uses setLyraStyle() and getLyraStyle(). Map old auto mode to system, an old surface reference color to accentBackground, and an old token map to overrides; review custom CSS colors that share a gemstone name before choosing a named accent. Replace preset definitions with a LyraLook plus explicit style choices. Replace selectors for data-lr-theme-preset with the actual axis they need, such as data-lr-look="shadcn". Import theme.css in place of the removed fixed themes/shadcn.css facade and select the look with setLyraStyle({ look: "shadcn" }) or a scoped data-lr-look attribute. Listen for lr-style-change and read event.detail.style and event.detail.changed; the old theme and preset events are no longer emitted. For the complete project-by-project sequence, see [Upgrading from v23 to v24](v23-to-v24-migration.md).
 
 Historical v1 stored records remain readable by the runtime and bootstrap. The removed JavaScript functions, preset subpaths, preset event, root marker, and fixed stylesheet are not available in the current API.
 
@@ -5547,10 +5559,8 @@ mode and accent; the axes compose independently.
 
 ```js
 import '@aceshooting/lyra-ui/theme.css';
-import '@aceshooting/lyra-ui/looks/shadcn.css';
 import '@aceshooting/lyra-ui/looks/material.css';
 import '@aceshooting/lyra-ui/density.css';
-import '@aceshooting/lyra-ui/surfaces/glass.css';
 import '@aceshooting/lyra-ui/accents.css';
 import { setLyraStyle, resetLyraStyle, applyLyraStyleScope } from '@aceshooting/lyra-ui/theme.js';
 
@@ -5568,7 +5578,8 @@ inherit), without persistence or global events; clearing preserves later author
 reports requested axes and resolved mode.
 
 Set `data-lr-look`, `data-lr-surface`, `data-lr-density`, `data-lr-mode` and `data-lr-accent`
-directly if needed. Stylesheet look ids need their sheet; arbitrary ids neither load nor register.
+directly if needed. Shadcn and Lyra are included in `theme.css`; other stylesheet look ids need
+their optional sheet. Arbitrary ids neither load nor register.
 `defineLyraLook({ id, tokens })` defines a validated immutable runtime look;
 `lyraLookCss()` from `theme/look-css.js` creates CSS without DOM access. In app-owned shadow roots
 with local boundaries, install `theme.css` and selected sheets; selectors stop at roots, inheritance
@@ -5774,12 +5785,18 @@ The public `--lr-theme-surface-opacity` input accepts 0 through 1. Lower opacity
 of the backdrop; the default foreground qualification covers 70%, while a custom lower setting
 cannot guarantee contrast against every backdrop. Solid and accessibility preferences retain
 opaque fills regardless of this input.
-Quiet text, necessary control edges, focus indicators and transparent actions gain a local
+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.
+Quiet text, focus indicators and transparent actions retain their separate local
 contrast-qualified foreground; opaque accent fills retain their own on-colours. Supported chrome
 includes app rails, navigation menus, menubars, menus and their context-menu composition, popovers,
 selection toolbars, toast items and the owned playback-rate toolbar of `lr-av-player`. Nested glass
 chrome is opaque, preventing repeated blur. Independently promoted menus and modal panels start a
-new material root. Content cards and editing fields remain opaque.
+new material root. Surface-colored outlined card and disclosure interiors let nested Lyra
+controls use their solid border colors while preserving the enclosing edge against glass.
+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.
 Apply this CSS input independently of look overrides: `setLyraStyle()` does not accept surface

package/llms/tokens.md

@@ -12,10 +12,13 @@ Every `lr-*` component resolves its styling through this two-layer token system,
    with a built-in fallback. Other tokens are aliases, computed or environment-backed values,
    or fixed contract constants. Every component renders correctly with no theme configured.
 
-For a ready-made light/dark base, import `@aceshooting/lyra-ui/theme.css` once and put
-`class="lr-light"`/`class="lr-dark"` (or `data-lr-theme="light"`/`"dark"`) on an ancestor.
-For the shadcn/ui look, also import `@aceshooting/lyra-ui/looks/shadcn.css` and select
-`data-lr-look="shadcn"` on the root or a scoped ancestor; look and mode remain independent.
+Import `@aceshooting/lyra-ui/theme.css` once for the built-in Shadcn, Glass and Emerald profile.
+`theme.css` already includes Shadcn; no separate Shadcn look import is required.
+Select `data-lr-look="shadcn"` on a scoped ancestor when needed. Choose light/dark mode with
+`class="lr-light"`/`class="lr-dark"`, `data-lr-theme`, or the independent `data-lr-mode` axis.
+Other stylesheet looks, such as Material, require their optional `looks/<look>.css` sheet.
+The separate `looks/shadcn.css` sheet remains optional for its scoped `.light`/`.dark`
+compatibility aliases; look and mode remain independent.
 See [Styles and tokens](./shared/styles-and-tokens.md) for runtime and stylesheet options.
 Per-component `--lr-<component>-*` custom properties (listed in each component's own section)
 override a single element without touching the shared layer.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aceshooting/lyra-ui",
-  "version": "25.3.0",
+  "version": "25.4.0",
   "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",
@@ -11690,7 +11690,7 @@
     "emoji-picker-element-data": "^1.8.0",
     "epubjs": "^0.3.93",
     "ical.js": "^2.2.1",
-    "katex": "^0.18.4",
+    "katex": "^0.18.4 || ^0.19.0",
     "libphonenumber-js": ">=1.11.0 <2",
     "mammoth": "^1.12.1",
     "maplibre-gl": ">=5 <7",
@@ -11832,7 +11832,7 @@
     "istanbul-lib-report": "^3.0.1",
     "istanbul-reports": "^3.2.0",
     "jszip": "^3.10.2",
-    "katex": "^0.18.9",
+    "katex": "^0.19.0",
     "libphonenumber-js": "^1.13.14",
     "mammoth": "^1.13.0",
     "maplibre-gl": "^6.11.2",
@@ -11843,10 +11843,10 @@
     "pixelmatch": "^7.2.0",
     "playwright": "^1.63.0",
     "pngjs": "^7.0.0",
-    "postal-mime": "^4.0.1",
+    "postal-mime": "^4.0.2",
     "qrcode": "^1.5.4",
     "react": "^19.3.0",
-    "shiki": "^4.4.3",
+    "shiki": "^4.5.0",
     "svelte": "^5.57.1",
     "typescript": "^7.0.2",
     "vue": "^3.5.43",