@aceshooting/lyra-ui 29.0.0 → 29.0.1

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 29.0.1
+
+### Patch Changes
+
+- 6590e5d: Keep labeled controls in widget headers readable at narrow widths by wrapping header items before scrolling actions that genuinely overflow.
+
+  The fix adds 18 gzip bytes to the complete registration barrel. The six affected bundle-size limits advance to the next 64-byte boundary; passing limits remain unchanged.
+- @aceshooting/lyra-translations@29.0.1
+
 ## 29.0.0
 
 ### Major Changes

package/dist/components/layout/widget/widget.styles.js

@@ -1 +1 @@
-import{iconHitTarget,focusRing}from"../../../internal/interactive-control.styles.js";import{css}from"lit";const styles=css` :host { display: block; --_lr-widget-overlay-color: var(--lr-color-overlay); --_lr-widget-fullscreen-inset: max( var(--lr-space-l), var(--lr-safe-area-top) ) max(var(--lr-space-l), var(--lr-safe-area-inline-end)) max(var(--lr-space-l), var(--lr-safe-area-bottom)) max(var(--lr-space-l), var(--lr-safe-area-inline-start)); --_lr-widget-backdrop-inset: 0; } [part="base"] { display: flex; flex-direction: column; box-sizing: border-box; border: var(--lr-border-width-thin) solid var(--lr-color-border-subtle); border-radius: var(--lr-radius); background: var(--lr-color-surface); overflow: hidden; } :host(:not([fullscreen])) [part="base"] { block-size: 100%; min-block-size: 0; } [part="header"] { display: flex; flex: 0 0 auto; align-items: center; min-inline-size: 0; gap: var(--lr-space-s); padding: var(--lr-space-s) var(--lr-space-m); border-block-end: var(--lr-border-width-thin) solid var(--lr-color-border-subtle); } [part="title"] { display: flex; align-items: center; gap: var(--lr-space-xs); flex: 1 1 auto; min-inline-size: 0; } [part="icon"] { display: inline-flex; flex: 0 0 auto; align-items: center; } [part="icon"][hidden] { display: none; } [part="label-group"] { display: flex; flex-direction: column; min-inline-size: 0; } [part="label"], [part="sublabel"] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [part="label"] { font-weight: var(--lr-font-weight-semibold); } [part="sublabel"] { font-size: var(--lr-font-size-sm); color: var(--lr-color-text-quiet); } [part="label"][hidden], [part="sublabel"][hidden] { display: none; } [part="actions"] { display: flex; flex: 0 1 auto; align-items: center; min-inline-size: 0; max-inline-size: 100%; gap: var(--lr-space-xs); overflow-x: auto; overflow-y: hidden; } [part="actions"][hidden] { display: none; } [part="view-toggles"] { display: flex; flex: 0 1 auto; min-inline-size: 0; max-inline-size: 100%; gap: var(--lr-space-2xs); overflow-x: auto; overflow-y: hidden; } [part="view-toggle"] { display: inline-flex; flex: 0 1 auto; align-items: center; justify-content: center; ${iconHitTarget} max-inline-size: 100%; gap: var(--lr-space-2xs); padding: var(--lr-size-0-125rem) var(--lr-space-s); border: var(--lr-border-width-thin) solid var(--lr-color-border); border-radius: var(--lr-radius-pill); background: transparent; color: var(--lr-color-text-quiet); font: inherit; font-size: var(--lr-font-size-sm); cursor: pointer; } [part="view-icon"] { display: inline-flex; flex: 0 0 auto; } [part="view-label"] { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :where([part="view-toggle"]):hover { background: var( --lr-widget-view-toggle-hover-bg, var(--lr-color-brand-quiet) ); color: var(--lr-widget-view-toggle-hover-color, var(--lr-color-text)); } :where([part="view-toggle"]):active { background: color-mix( in oklab, var(--lr-widget-view-toggle-hover-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); color: var(--lr-widget-view-toggle-hover-color, var(--lr-color-text)); } [part="view-toggle"][aria-pressed="true"] { background: var( --lr-widget-view-toggle-active-bg, var(--lr-color-brand-quiet) ); color: var(--lr-widget-view-toggle-active-color, var(--lr-color-brand)); border-color: var(--lr-widget-view-toggle-active-border-color, transparent); } [part="view-toggle"][aria-pressed="true"]:active { background: color-mix( in oklab, var(--lr-widget-view-toggle-active-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); color: var(--lr-widget-view-toggle-active-color, var(--lr-color-brand)); } [part="view-toggle"]:focus-visible { ${focusRing} } [part="collapse-button"], [part="fullscreen-button"] { display: inline-flex; align-items: center; justify-content: center; ${iconHitTarget} border: none; background: transparent; color: var(--lr-color-text-quiet); border-radius: var(--lr-radius); font: inherit; cursor: pointer; transition: transform var(--lr-transition-fast); } [part="collapse-button"]:hover { background: var(--lr-widget-collapse-button-hover-bg, var(--lr-color-brand-quiet)); color: var(--lr-widget-collapse-button-hover-color, var(--lr-color-brand)); } [part="fullscreen-button"]:hover { background: var(--lr-widget-fullscreen-button-hover-bg, var(--lr-color-brand-quiet)); color: var(--lr-widget-fullscreen-button-hover-color, var(--lr-color-brand)); } [part="collapse-button"]:active { background: color-mix( in oklab, var(--lr-widget-collapse-button-hover-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); color: var(--lr-widget-collapse-button-hover-color, var(--lr-color-brand)); } [part="fullscreen-button"]:active { background: color-mix( in oklab, var(--lr-widget-fullscreen-button-hover-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); color: var(--lr-widget-fullscreen-button-hover-color, var(--lr-color-brand)); } [part="collapse-button"]:focus-visible, [part="fullscreen-button"]:focus-visible { ${focusRing} } :host(:not([collapsed])) [part="collapse-button"] { transform: rotate(90deg); } :host([collapsed]:dir(rtl)) [part="collapse-button"] { transform: scaleX(-1); } [part="body"] { padding: var(--lr-space-m); flex: 1 1 auto; min-block-size: 0; overflow: auto; } [part="body"][hidden] { display: none; } [part="backdrop"] { position: fixed; inset: var(--lr-widget-backdrop-inset, var(--_lr-widget-backdrop-inset, 0)); background: var(--lr-widget-overlay-color, var(--_lr-widget-overlay-color)); z-index: var(--lr-overlay-stack-index, var(--lr-layer-modal)); } :host([fullscreen]) [part="base"] { position: fixed; inset: var( --lr-widget-fullscreen-inset, var(--_lr-widget-fullscreen-inset, 0) ); z-index: calc(var(--lr-overlay-stack-index, var(--lr-layer-modal)) + 1); box-shadow: var(--lr-shadow-xl); } :host([fullscreen]) [part="body"] { block-size: 100%; } :host(:is([size='2xs'], [size='xs'], [size='s'], [size='small'])) [part="header"] { padding: var(--lr-space-xs) var(--lr-space-s); gap: var(--lr-space-xs); } :host(:is([size='2xs'], [size='xs'], [size='s'], [size='small'])) [part="body"] { padding: var(--lr-space-s); } @media (prefers-reduced-motion: reduce) { [part="collapse-button"], [part="fullscreen-button"] { transition: none !important; } } `;export{styles};
+import{iconHitTarget,focusRing}from"../../../internal/interactive-control.styles.js";import{css}from"lit";const styles=css` :host { display: block; --_lr-widget-overlay-color: var(--lr-color-overlay); --_lr-widget-fullscreen-inset: max( var(--lr-space-l), var(--lr-safe-area-top) ) max(var(--lr-space-l), var(--lr-safe-area-inline-end)) max(var(--lr-space-l), var(--lr-safe-area-bottom)) max(var(--lr-space-l), var(--lr-safe-area-inline-start)); --_lr-widget-backdrop-inset: 0; } [part="base"] { display: flex; flex-direction: column; box-sizing: border-box; border: var(--lr-border-width-thin) solid var(--lr-color-border-subtle); border-radius: var(--lr-radius); background: var(--lr-color-surface); overflow: hidden; } :host(:not([fullscreen])) [part="base"] { block-size: 100%; min-block-size: 0; } [part="header"] { display: flex; flex: 0 0 auto; align-items: center; flex-wrap: wrap; min-inline-size: 0; gap: var(--lr-space-s); padding: var(--lr-space-s) var(--lr-space-m); border-block-end: var(--lr-border-width-thin) solid var(--lr-color-border-subtle); } [part="title"] { display: flex; align-items: center; gap: var(--lr-space-xs); flex: 1 1 auto; min-inline-size: 0; } [part="icon"] { display: inline-flex; flex: 0 0 auto; align-items: center; } [part="icon"][hidden] { display: none; } [part="label-group"] { display: flex; flex-direction: column; min-inline-size: 0; } [part="label"], [part="sublabel"] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [part="label"] { font-weight: var(--lr-font-weight-semibold); } [part="sublabel"] { font-size: var(--lr-font-size-sm); color: var(--lr-color-text-quiet); } [part="label"][hidden], [part="sublabel"][hidden] { display: none; } [part="actions"] { display: flex; flex: 0 1 auto; align-items: center; min-inline-size: 0; max-inline-size: 100%; gap: var(--lr-space-xs); overflow-x: auto; overflow-y: hidden; } [part="actions"][hidden] { display: none; } [part="actions"] ::slotted(*) { flex-shrink: 0; max-inline-size: none; } [part="view-toggles"] { display: flex; flex: 0 1 auto; min-inline-size: 0; max-inline-size: 100%; gap: var(--lr-space-2xs); overflow-x: auto; overflow-y: hidden; } [part="view-toggle"] { display: inline-flex; flex: 0 1 auto; align-items: center; justify-content: center; ${iconHitTarget} max-inline-size: 100%; gap: var(--lr-space-2xs); padding: var(--lr-size-0-125rem) var(--lr-space-s); border: var(--lr-border-width-thin) solid var(--lr-color-border); border-radius: var(--lr-radius-pill); background: transparent; color: var(--lr-color-text-quiet); font: inherit; font-size: var(--lr-font-size-sm); cursor: pointer; } [part="view-icon"] { display: inline-flex; flex: 0 0 auto; } [part="view-label"] { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :where([part="view-toggle"]):hover { background: var( --lr-widget-view-toggle-hover-bg, var(--lr-color-brand-quiet) ); color: var(--lr-widget-view-toggle-hover-color, var(--lr-color-text)); } :where([part="view-toggle"]):active { background: color-mix( in oklab, var(--lr-widget-view-toggle-hover-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); color: var(--lr-widget-view-toggle-hover-color, var(--lr-color-text)); } [part="view-toggle"][aria-pressed="true"] { background: var( --lr-widget-view-toggle-active-bg, var(--lr-color-brand-quiet) ); color: var(--lr-widget-view-toggle-active-color, var(--lr-color-brand)); border-color: var(--lr-widget-view-toggle-active-border-color, transparent); } [part="view-toggle"][aria-pressed="true"]:active { background: color-mix( in oklab, var(--lr-widget-view-toggle-active-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); color: var(--lr-widget-view-toggle-active-color, var(--lr-color-brand)); } [part="view-toggle"]:focus-visible { ${focusRing} } [part="collapse-button"], [part="fullscreen-button"] { display: inline-flex; align-items: center; justify-content: center; ${iconHitTarget} border: none; background: transparent; color: var(--lr-color-text-quiet); border-radius: var(--lr-radius); font: inherit; cursor: pointer; transition: transform var(--lr-transition-fast); } [part="collapse-button"]:hover { background: var(--lr-widget-collapse-button-hover-bg, var(--lr-color-brand-quiet)); color: var(--lr-widget-collapse-button-hover-color, var(--lr-color-brand)); } [part="fullscreen-button"]:hover { background: var(--lr-widget-fullscreen-button-hover-bg, var(--lr-color-brand-quiet)); color: var(--lr-widget-fullscreen-button-hover-color, var(--lr-color-brand)); } [part="collapse-button"]:active { background: color-mix( in oklab, var(--lr-widget-collapse-button-hover-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); color: var(--lr-widget-collapse-button-hover-color, var(--lr-color-brand)); } [part="fullscreen-button"]:active { background: color-mix( in oklab, var(--lr-widget-fullscreen-button-hover-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); color: var(--lr-widget-fullscreen-button-hover-color, var(--lr-color-brand)); } [part="collapse-button"]:focus-visible, [part="fullscreen-button"]:focus-visible { ${focusRing} } :host(:not([collapsed])) [part="collapse-button"] { transform: rotate(90deg); } :host([collapsed]:dir(rtl)) [part="collapse-button"] { transform: scaleX(-1); } [part="body"] { padding: var(--lr-space-m); flex: 1 1 auto; min-block-size: 0; overflow: auto; } [part="body"][hidden] { display: none; } [part="backdrop"] { position: fixed; inset: var(--lr-widget-backdrop-inset, var(--_lr-widget-backdrop-inset, 0)); background: var(--lr-widget-overlay-color, var(--_lr-widget-overlay-color)); z-index: var(--lr-overlay-stack-index, var(--lr-layer-modal)); } :host([fullscreen]) [part="base"] { position: fixed; inset: var( --lr-widget-fullscreen-inset, var(--_lr-widget-fullscreen-inset, 0) ); z-index: calc(var(--lr-overlay-stack-index, var(--lr-layer-modal)) + 1); box-shadow: var(--lr-shadow-xl); } :host([fullscreen]) [part="body"] { block-size: 100%; } :host(:is([size='2xs'], [size='xs'], [size='s'], [size='small'])) [part="header"] { padding: var(--lr-space-xs) var(--lr-space-s); gap: var(--lr-space-xs); } :host(:is([size='2xs'], [size='xs'], [size='s'], [size='small'])) [part="body"] { padding: var(--lr-space-s); } @media (prefers-reduced-motion: reduce) { [part="collapse-button"], [part="fullscreen-button"] { transition: none !important; } } `;export{styles};

package/dist/internal/package-metadata.js

@@ -1 +1 @@
-const LYRA_PACKAGE_NAME="@aceshooting/lyra-ui",LYRA_PACKAGE_VERSION="29.0.0";export{LYRA_PACKAGE_NAME,LYRA_PACKAGE_VERSION};
+const LYRA_PACKAGE_NAME="@aceshooting/lyra-ui",LYRA_PACKAGE_VERSION="29.0.1";export{LYRA_PACKAGE_NAME,LYRA_PACKAGE_VERSION};

package/llms/components/lr-widget.md

@@ -120,9 +120,10 @@ empty), `label-group` (wrapper around the label and sublabel), `label`, `sublabe
 subtree is inert and aria-hidden, leaving the toggle as the sole action), `view-label`
 (a view's visible label), `collapse-button`, `fullscreen-button`, `body`, `backdrop`
 
-Both header rows (`actions` and `view-toggles`) scroll horizontally on their own when the header is
-too narrow for them, and each independently paints a `--lr-scroll-fade-size` edge fade while — and
-only while — it actually overflows, so a clipped row reads as scrollable rather than truncated. The
+Header items wrap when needed to keep ordinary slotted actions at their intrinsic size. Both
+header rows (`actions` and `view-toggles`) scroll horizontally on their own when their content is
+still too wide, and each independently paints a `--lr-scroll-fade-size` edge fade while — and only
+while — it actually overflows, so a clipped row reads as scrollable rather than truncated. The
 overflow is measured, not assumed: a row that fits is left unmasked.
 Forced-colors mode disables those decorative masks while retaining the native scroll owners. The
 body is the block-axis scroll owner whenever the widget receives a constrained height, so the

package/llms/peers.md

@@ -39,7 +39,7 @@ for the page.
 |---|---|---|
 | `@aceshooting/lyra-flags` | `^2.3.0` | _(loaded by a shared internal module)_ |
 | `@aceshooting/lyra-map` | `^1.0.0` | `lr-geojson-viewer`, `lr-map` |
-| `@aceshooting/lyra-translations` | `^29.0.0` | _(not referenced by any component)_ |
+| `@aceshooting/lyra-translations` | `^29.0.1` | _(not referenced by any component)_ |
 | `@aiden0z/pptx-renderer` | `^1.3.0` | `lr-pptx-viewer` |
 | `@sgratzl/chartjs-chart-boxplot` | `^4.0.0` | `lr-box-plot` |
 | `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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aceshooting/lyra-ui",
-  "version": "29.0.0",
+  "version": "29.0.1",
   "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",
@@ -2599,7 +2599,7 @@
   "peerDependencies": {
     "@aceshooting/lyra-flags": "^2.3.0",
     "@aceshooting/lyra-map": "^1.0.0",
-    "@aceshooting/lyra-translations": "^29.0.0",
+    "@aceshooting/lyra-translations": "^29.0.1",
     "@aiden0z/pptx-renderer": "^1.3.0",
     "@sgratzl/chartjs-chart-boxplot": "^4.0.0",
     "chart.js": "^4.0.1",
@@ -2759,7 +2759,7 @@
     "emoji-picker-element-data": "^1.8.0",
     "epubjs": "^0.3.93",
     "fast-check": "^4.10.2",
-    "happy-dom": "^21.0.1",
+    "happy-dom": "^21.0.3",
     "ical.js": "^2.2.1",
     "istanbul-lib-coverage": "^3.2.2",
     "istanbul-lib-report": "^3.0.1",