ngwr 7.3.0 → 8.0.0

package/fesm2022/ngwr-window.mjs

@@ -487,10 +487,10 @@ class WrWindow {
         this.x_.set(clamp(this.x_(), MIN_ON_VIEWPORT - w, vw - MIN_ON_VIEWPORT));
         this.y_.set(clamp(this.y_(), 0, vh - MIN_ON_VIEWPORT));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrWindow, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: WrWindow, isStandalone: true, selector: "wr-window", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, initialX: { classPropertyName: "initialX", publicName: "initialX", isSignal: true, isRequired: false, transformFunction: null }, initialY: { classPropertyName: "initialY", publicName: "initialY", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, initialWidth: { classPropertyName: "initialWidth", publicName: "initialWidth", isSignal: true, isRequired: false, transformFunction: null }, initialHeight: { classPropertyName: "initialHeight", publicName: "initialHeight", isSignal: true, isRequired: false, transformFunction: null }, os: { classPropertyName: "os", publicName: "os", isSignal: true, isRequired: false, transformFunction: null }, chromeSize: { classPropertyName: "chromeSize", publicName: "chromeSize", isSignal: true, isRequired: false, transformFunction: null }, animations: { classPropertyName: "animations", publicName: "animations", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, movable: { classPropertyName: "movable", publicName: "movable", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, keepInViewport: { classPropertyName: "keepInViewport", publicName: "keepInViewport", isSignal: true, isRequired: false, transformFunction: null }, snap: { classPropertyName: "snap", publicName: "snap", isSignal: true, isRequired: false, transformFunction: null }, dragHandle: { classPropertyName: "dragHandle", publicName: "dragHandle", isSignal: true, isRequired: false, transformFunction: null }, showMinimize: { classPropertyName: "showMinimize", publicName: "showMinimize", isSignal: true, isRequired: false, transformFunction: null }, showMaximize: { classPropertyName: "showMaximize", publicName: "showMaximize", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", state: "stateChange", closed: "closed", moved: "moved", resized: "resized" }, host: { attributes: { "role": "dialog" }, listeners: { "pointerdown": "focusWindow()" }, properties: { "class": "classes()", "style.left.px": "x()", "style.top.px": "y()", "style.width.px": "width()", "style.height.px": "height()", "style.z-index": "z()", "attr.aria-hidden": "!open()", "attr.aria-labelledby": "titleId" } }, ngImport: i0, template: "<div class=\"wr-window__chrome\" (pointerdown)=\"startMove($event)\" (dblclick)=\"showMaximize() && maximize()\">\n  <div class=\"wr-window__title\" [attr.id]=\"titleId\">{{ title() }}</div>\n  <div class=\"wr-window__title-extra\">\n    <ng-content select=\"[wrWindowTitleExtra]\" />\n  </div>\n\n  <div class=\"wr-window__chrome-actions\">\n    @if (resolvedOs() === 'macos') {\n      <!-- macOS-style traffic-light cluster: close \u2192 minimize \u2192 maximize.\n           Glyphs (\u00D7, \u2212, +) appear on cluster hover. -->\n      @if (showClose()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--close\"\n          aria-label=\"Close\"\n          (click)=\"close()\"\n        >\n          <svg class=\"wr-window__chrome-action-glyph\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            <path\n              d=\"M2.2 2.2 L7.8 7.8 M7.8 2.2 L2.2 7.8\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.4\"\n              stroke-linecap=\"round\"\n            />\n          </svg>\n        </button>\n      }\n      @if (showMinimize()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--minimize\"\n          [attr.aria-label]=\"state() === 'minimized' ? 'Restore' : 'Minimize'\"\n          (click)=\"minimize()\"\n        >\n          <svg class=\"wr-window__chrome-action-glyph\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            <line x1=\"2\" y1=\"5\" x2=\"8\" y2=\"5\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n          </svg>\n        </button>\n      }\n      @if (showMaximize()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--maximize\"\n          [attr.aria-label]=\"state() === 'maximized' ? 'Restore down' : 'Maximize'\"\n          (click)=\"maximize()\"\n        >\n          <svg class=\"wr-window__chrome-action-glyph\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            @if (state() === 'maximized') {\n              <path\n                d=\"M3 1 L1 1 L1 3 M7 1 L9 1 L9 3 M1 7 L1 9 L3 9 M9 7 L9 9 L7 9\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.4\"\n                stroke-linecap=\"round\"\n                fill=\"none\"\n              />\n            } @else {\n              <path d=\"M2 5 L8 5 M5 2 L5 8\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n            }\n          </svg>\n        </button>\n      }\n    } @else {\n      <!-- Windows / Linux glyph buttons -->\n      @if (resolvedOs() !== 'linux' && showMinimize()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--minimize\"\n          [attr.aria-label]=\"state() === 'minimized' ? 'Restore' : 'Minimize'\"\n          (click)=\"minimize()\"\n        >\n          <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            <line x1=\"1\" y1=\"8\" x2=\"9\" y2=\"8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n          </svg>\n        </button>\n      }\n\n      @if (resolvedOs() !== 'linux' && showMaximize()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--maximize\"\n          [attr.aria-label]=\"state() === 'maximized' ? 'Restore down' : 'Maximize'\"\n          (click)=\"maximize()\"\n        >\n          @if (state() === 'maximized') {\n            <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n              <rect x=\"1.5\" y=\"2.5\" width=\"6\" height=\"6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n              <rect x=\"3\" y=\"1\" width=\"6\" height=\"6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n            </svg>\n          } @else {\n            <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n              <rect x=\"1\" y=\"1\" width=\"8\" height=\"8\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n            </svg>\n          }\n        </button>\n      }\n\n      @if (showClose()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--close\"\n          aria-label=\"Close\"\n          (click)=\"close()\"\n        >\n          <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            <path d=\"M1 1 L9 9 M9 1 L1 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n          </svg>\n        </button>\n      }\n    }\n  </div>\n</div>\n\n<div class=\"wr-window__body\">\n  <ng-content />\n</div>\n\n<div class=\"wr-window__status-bar\">\n  <ng-content select=\"[wrWindowStatusBar]\" />\n</div>\n\n@if (resizable() && state() === 'normal') {\n  <span class=\"wr-window__handle wr-window__handle--t\" (pointerdown)=\"resizeT($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--r\" (pointerdown)=\"resizeR($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--b\" (pointerdown)=\"resizeB($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--l\" (pointerdown)=\"resizeL($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--tl\" (pointerdown)=\"resizeTL($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--tr\" (pointerdown)=\"resizeTR($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--bl\" (pointerdown)=\"resizeBL($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--br\" (pointerdown)=\"resizeBR($event)\"></span>\n}\n", encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrWindow, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: WrWindow, isStandalone: true, selector: "wr-window", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, initialX: { classPropertyName: "initialX", publicName: "initialX", isSignal: true, isRequired: false, transformFunction: null }, initialY: { classPropertyName: "initialY", publicName: "initialY", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, initialWidth: { classPropertyName: "initialWidth", publicName: "initialWidth", isSignal: true, isRequired: false, transformFunction: null }, initialHeight: { classPropertyName: "initialHeight", publicName: "initialHeight", isSignal: true, isRequired: false, transformFunction: null }, os: { classPropertyName: "os", publicName: "os", isSignal: true, isRequired: false, transformFunction: null }, chromeSize: { classPropertyName: "chromeSize", publicName: "chromeSize", isSignal: true, isRequired: false, transformFunction: null }, animations: { classPropertyName: "animations", publicName: "animations", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, movable: { classPropertyName: "movable", publicName: "movable", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, keepInViewport: { classPropertyName: "keepInViewport", publicName: "keepInViewport", isSignal: true, isRequired: false, transformFunction: null }, snap: { classPropertyName: "snap", publicName: "snap", isSignal: true, isRequired: false, transformFunction: null }, dragHandle: { classPropertyName: "dragHandle", publicName: "dragHandle", isSignal: true, isRequired: false, transformFunction: null }, showMinimize: { classPropertyName: "showMinimize", publicName: "showMinimize", isSignal: true, isRequired: false, transformFunction: null }, showMaximize: { classPropertyName: "showMaximize", publicName: "showMaximize", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", state: "stateChange", closed: "closed", moved: "moved", resized: "resized" }, host: { attributes: { "role": "dialog" }, listeners: { "pointerdown": "focusWindow()" }, properties: { "class": "classes()", "style.left.px": "x()", "style.top.px": "y()", "style.width.px": "width()", "style.height.px": "height()", "style.z-index": "z()", "attr.aria-hidden": "!open()", "attr.aria-labelledby": "titleId" } }, ngImport: i0, template: "<div class=\"wr-window__chrome\" (pointerdown)=\"startMove($event)\" (dblclick)=\"showMaximize() && maximize()\">\n  <div class=\"wr-window__title\" [attr.id]=\"titleId\">{{ title() }}</div>\n  <div class=\"wr-window__title-extra\">\n    <ng-content select=\"[wrWindowTitleExtra]\" />\n  </div>\n\n  <div class=\"wr-window__chrome-actions\">\n    @if (resolvedOs() === 'macos') {\n      <!-- macOS-style traffic-light cluster: close \u2192 minimize \u2192 maximize.\n           Glyphs (\u00D7, \u2212, +) appear on cluster hover. -->\n      @if (showClose()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--close\"\n          aria-label=\"Close\"\n          (click)=\"close()\"\n        >\n          <svg class=\"wr-window__chrome-action-glyph\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            <path\n              d=\"M2.2 2.2 L7.8 7.8 M7.8 2.2 L2.2 7.8\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.4\"\n              stroke-linecap=\"round\"\n            />\n          </svg>\n        </button>\n      }\n      @if (showMinimize()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--minimize\"\n          [attr.aria-label]=\"state() === 'minimized' ? 'Restore' : 'Minimize'\"\n          (click)=\"minimize()\"\n        >\n          <svg class=\"wr-window__chrome-action-glyph\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            <line x1=\"2\" y1=\"5\" x2=\"8\" y2=\"5\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n          </svg>\n        </button>\n      }\n      @if (showMaximize()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--maximize\"\n          [attr.aria-label]=\"state() === 'maximized' ? 'Restore down' : 'Maximize'\"\n          (click)=\"maximize()\"\n        >\n          <svg class=\"wr-window__chrome-action-glyph\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            @if (state() === 'maximized') {\n              <path\n                d=\"M3 1 L1 1 L1 3 M7 1 L9 1 L9 3 M1 7 L1 9 L3 9 M9 7 L9 9 L7 9\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.4\"\n                stroke-linecap=\"round\"\n                fill=\"none\"\n              />\n            } @else {\n              <path d=\"M2 5 L8 5 M5 2 L5 8\" stroke=\"currentColor\" stroke-width=\"1.4\" stroke-linecap=\"round\" />\n            }\n          </svg>\n        </button>\n      }\n    } @else {\n      <!-- Windows / Linux glyph buttons -->\n      @if (resolvedOs() !== 'linux' && showMinimize()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--minimize\"\n          [attr.aria-label]=\"state() === 'minimized' ? 'Restore' : 'Minimize'\"\n          (click)=\"minimize()\"\n        >\n          <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            <line x1=\"1\" y1=\"8\" x2=\"9\" y2=\"8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n          </svg>\n        </button>\n      }\n\n      @if (resolvedOs() !== 'linux' && showMaximize()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--maximize\"\n          [attr.aria-label]=\"state() === 'maximized' ? 'Restore down' : 'Maximize'\"\n          (click)=\"maximize()\"\n        >\n          @if (state() === 'maximized') {\n            <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n              <rect x=\"1.5\" y=\"2.5\" width=\"6\" height=\"6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n              <rect x=\"3\" y=\"1\" width=\"6\" height=\"6\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n            </svg>\n          } @else {\n            <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n              <rect x=\"1\" y=\"1\" width=\"8\" height=\"8\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n            </svg>\n          }\n        </button>\n      }\n\n      @if (showClose()) {\n        <button\n          type=\"button\"\n          class=\"wr-window__chrome-action wr-window__chrome-action--close\"\n          aria-label=\"Close\"\n          (click)=\"close()\"\n        >\n          <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            <path d=\"M1 1 L9 9 M9 1 L1 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n          </svg>\n        </button>\n      }\n    }\n  </div>\n</div>\n\n<div class=\"wr-window__body\">\n  <ng-content />\n</div>\n\n<div class=\"wr-window__status-bar\">\n  <ng-content select=\"[wrWindowStatusBar]\" />\n</div>\n\n@if (resizable() && state() === 'normal') {\n  <span class=\"wr-window__handle wr-window__handle--t\" (pointerdown)=\"resizeT($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--r\" (pointerdown)=\"resizeR($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--b\" (pointerdown)=\"resizeB($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--l\" (pointerdown)=\"resizeL($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--tl\" (pointerdown)=\"resizeTL($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--tr\" (pointerdown)=\"resizeTR($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--bl\" (pointerdown)=\"resizeBL($event)\"></span>\n  <span class=\"wr-window__handle wr-window__handle--br\" (pointerdown)=\"resizeBR($event)\"></span>\n}\n", encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrWindow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrWindow, decorators: [{
             type: Component,
             args: [{ selector: 'wr-window', encapsulation: ViewEncapsulation.None, host: {
                         role: 'dialog',
@@ -639,10 +639,10 @@ class WrWindowContainer {
             });
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrWindowContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: WrWindowContainer, isStandalone: true, selector: "wr-window-container", viewQueries: [{ propertyName: "contentVcr", first: true, predicate: ["content"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "wrWindow", first: true, predicate: WrWindow, descendants: true, isSignal: true }], ngImport: i0, template: "<wr-window\n  [open]=\"true\"\n  [title]=\"ref.title()\"\n  [os]=\"config.os ?? 'auto'\"\n  [size]=\"config.size ?? 'md'\"\n  [chromeSize]=\"config.chromeSize ?? 'normal'\"\n  [animations]=\"config.animations ?? true\"\n  [initialX]=\"config.x ?? null\"\n  [initialY]=\"config.y ?? null\"\n  [initialWidth]=\"config.width ?? null\"\n  [initialHeight]=\"config.height ?? null\"\n  [minWidth]=\"config.minWidth ?? 220\"\n  [minHeight]=\"config.minHeight ?? 140\"\n  [maxWidth]=\"config.maxWidth ?? 1000000\"\n  [maxHeight]=\"config.maxHeight ?? 1000000\"\n  [movable]=\"config.movable ?? true\"\n  [resizable]=\"config.resizable ?? true\"\n  [keepInViewport]=\"config.keepInViewport ?? true\"\n  [snap]=\"config.snap ?? 'none'\"\n  [dragHandle]=\"config.dragHandle ?? null\"\n  [showMinimize]=\"config.showMinimize ?? true\"\n  [showMaximize]=\"config.showMaximize ?? true\"\n  [showClose]=\"config.showClose ?? true\"\n  (closed)=\"ref.close()\"\n  #window\n>\n  <ng-container #content />\n</wr-window>\n\n@if (window.snapTarget(); as target) {\n  <div class=\"wr-window__snap-hint\" [attr.data-target]=\"target\" aria-hidden=\"true\"></div>\n}\n", dependencies: [{ kind: "component", type: WrWindow, selector: "wr-window", inputs: ["open", "state", "title", "initialX", "initialY", "size", "initialWidth", "initialHeight", "os", "chromeSize", "animations", "minWidth", "minHeight", "maxWidth", "maxHeight", "movable", "resizable", "keepInViewport", "snap", "dragHandle", "showMinimize", "showMaximize", "showClose"], outputs: ["openChange", "stateChange", "closed", "moved", "resized"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrWindowContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: WrWindowContainer, isStandalone: true, selector: "wr-window-container", viewQueries: [{ propertyName: "contentVcr", first: true, predicate: ["content"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "wrWindow", first: true, predicate: WrWindow, descendants: true, isSignal: true }], ngImport: i0, template: "<wr-window\n  [open]=\"true\"\n  [title]=\"ref.title()\"\n  [os]=\"config.os ?? 'auto'\"\n  [size]=\"config.size ?? 'md'\"\n  [chromeSize]=\"config.chromeSize ?? 'normal'\"\n  [animations]=\"config.animations ?? true\"\n  [initialX]=\"config.x ?? null\"\n  [initialY]=\"config.y ?? null\"\n  [initialWidth]=\"config.width ?? null\"\n  [initialHeight]=\"config.height ?? null\"\n  [minWidth]=\"config.minWidth ?? 220\"\n  [minHeight]=\"config.minHeight ?? 140\"\n  [maxWidth]=\"config.maxWidth ?? 1000000\"\n  [maxHeight]=\"config.maxHeight ?? 1000000\"\n  [movable]=\"config.movable ?? true\"\n  [resizable]=\"config.resizable ?? true\"\n  [keepInViewport]=\"config.keepInViewport ?? true\"\n  [snap]=\"config.snap ?? 'none'\"\n  [dragHandle]=\"config.dragHandle ?? null\"\n  [showMinimize]=\"config.showMinimize ?? true\"\n  [showMaximize]=\"config.showMaximize ?? true\"\n  [showClose]=\"config.showClose ?? true\"\n  (closed)=\"ref.close()\"\n  #window\n>\n  <ng-container #content />\n</wr-window>\n\n@if (window.snapTarget(); as target) {\n  <div class=\"wr-window__snap-hint\" [attr.data-target]=\"target\" aria-hidden=\"true\"></div>\n}\n", dependencies: [{ kind: "component", type: WrWindow, selector: "wr-window", inputs: ["open", "state", "title", "initialX", "initialY", "size", "initialWidth", "initialHeight", "os", "chromeSize", "animations", "minWidth", "minHeight", "maxWidth", "maxHeight", "movable", "resizable", "keepInViewport", "snap", "dragHandle", "showMinimize", "showMaximize", "showClose"], outputs: ["openChange", "stateChange", "closed", "moved", "resized"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrWindowContainer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrWindowContainer, decorators: [{
             type: Component,
             args: [{ selector: 'wr-window-container', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [WrWindow], template: "<wr-window\n  [open]=\"true\"\n  [title]=\"ref.title()\"\n  [os]=\"config.os ?? 'auto'\"\n  [size]=\"config.size ?? 'md'\"\n  [chromeSize]=\"config.chromeSize ?? 'normal'\"\n  [animations]=\"config.animations ?? true\"\n  [initialX]=\"config.x ?? null\"\n  [initialY]=\"config.y ?? null\"\n  [initialWidth]=\"config.width ?? null\"\n  [initialHeight]=\"config.height ?? null\"\n  [minWidth]=\"config.minWidth ?? 220\"\n  [minHeight]=\"config.minHeight ?? 140\"\n  [maxWidth]=\"config.maxWidth ?? 1000000\"\n  [maxHeight]=\"config.maxHeight ?? 1000000\"\n  [movable]=\"config.movable ?? true\"\n  [resizable]=\"config.resizable ?? true\"\n  [keepInViewport]=\"config.keepInViewport ?? true\"\n  [snap]=\"config.snap ?? 'none'\"\n  [dragHandle]=\"config.dragHandle ?? null\"\n  [showMinimize]=\"config.showMinimize ?? true\"\n  [showMaximize]=\"config.showMaximize ?? true\"\n  [showClose]=\"config.showClose ?? true\"\n  (closed)=\"ref.close()\"\n  #window\n>\n  <ng-container #content />\n</wr-window>\n\n@if (window.snapTarget(); as target) {\n  <div class=\"wr-window__snap-hint\" [attr.data-target]=\"target\" aria-hidden=\"true\"></div>\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { contentVcr: [{ type: i0.ViewChild, args: ['content', { ...{ read: ViewContainerRef }, isSignal: true }] }], wrWindow: [{ type: i0.ViewChild, args: [i0.forwardRef(() => WrWindow), { isSignal: true }] }] } });
@@ -1073,10 +1073,10 @@ class WrWindowManager {
     clearLayout(name) {
         this.storage.remove(this.layoutKey(name));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrWindowManager, deps: [], target: i0.ɵɵFactoryTarget.Service });
-    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.0.2", ngImport: i0, type: WrWindowManager });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrWindowManager, deps: [], target: i0.ɵɵFactoryTarget.Service });
+    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.0.4", ngImport: i0, type: WrWindowManager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrWindowManager, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrWindowManager, decorators: [{
             type: Service
         }] });
 
@@ -1121,10 +1121,10 @@ class WrWindowTaskbar {
         event.stopPropagation();
         void ref.close();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrWindowTaskbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: WrWindowTaskbar, isStandalone: true, selector: "wr-window-taskbar", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "toolbar", "aria-label": "Minimized windows" }, properties: { "class": "classes()" } }, ngImport: i0, template: "@if (items().length > 0) {\n  <div class=\"wr-window-taskbar__rail\">\n    @for (ref of items(); track ref.id) {\n      <button\n        type=\"button\"\n        class=\"wr-window-taskbar__tab\"\n        [attr.aria-label]=\"`Restore ${ref.title() || 'Untitled'}`\"\n        (click)=\"restore(ref)\"\n      >\n        <span class=\"wr-window-taskbar__tab-title\">{{ ref.title() || 'Untitled' }}</span>\n        <span\n          class=\"wr-window-taskbar__tab-close\"\n          role=\"button\"\n          tabindex=\"0\"\n          aria-label=\"Close window\"\n          (click)=\"close(ref, $event)\"\n          (keydown.enter)=\"close(ref, $event)\"\n        >\n          <svg width=\"9\" height=\"9\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            <path d=\"M1 1 L9 9 M9 1 L1 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n          </svg>\n        </span>\n      </button>\n    }\n  </div>\n}\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrWindowTaskbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: WrWindowTaskbar, isStandalone: true, selector: "wr-window-taskbar", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "toolbar", "aria-label": "Minimized windows" }, properties: { "class": "classes()" } }, ngImport: i0, template: "@if (items().length > 0) {\n  <div class=\"wr-window-taskbar__rail\">\n    @for (ref of items(); track ref.id) {\n      <button\n        type=\"button\"\n        class=\"wr-window-taskbar__tab\"\n        [attr.aria-label]=\"`Restore ${ref.title() || 'Untitled'}`\"\n        (click)=\"restore(ref)\"\n      >\n        <span class=\"wr-window-taskbar__tab-title\">{{ ref.title() || 'Untitled' }}</span>\n        <span\n          class=\"wr-window-taskbar__tab-close\"\n          role=\"button\"\n          tabindex=\"0\"\n          aria-label=\"Close window\"\n          (click)=\"close(ref, $event)\"\n          (keydown.enter)=\"close(ref, $event)\"\n        >\n          <svg width=\"9\" height=\"9\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            <path d=\"M1 1 L9 9 M9 1 L1 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n          </svg>\n        </span>\n      </button>\n    }\n  </div>\n}\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: WrWindowTaskbar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: WrWindowTaskbar, decorators: [{
             type: Component,
             args: [{ selector: 'wr-window-taskbar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()', role: 'toolbar', 'aria-label': 'Minimized windows' }, template: "@if (items().length > 0) {\n  <div class=\"wr-window-taskbar__rail\">\n    @for (ref of items(); track ref.id) {\n      <button\n        type=\"button\"\n        class=\"wr-window-taskbar__tab\"\n        [attr.aria-label]=\"`Restore ${ref.title() || 'Untitled'}`\"\n        (click)=\"restore(ref)\"\n      >\n        <span class=\"wr-window-taskbar__tab-title\">{{ ref.title() || 'Untitled' }}</span>\n        <span\n          class=\"wr-window-taskbar__tab-close\"\n          role=\"button\"\n          tabindex=\"0\"\n          aria-label=\"Close window\"\n          (click)=\"close(ref, $event)\"\n          (keydown.enter)=\"close(ref, $event)\"\n        >\n          <svg width=\"9\" height=\"9\" viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            <path d=\"M1 1 L9 9 M9 1 L1 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n          </svg>\n        </span>\n      </button>\n    }\n  </div>\n}\n" }]
         }], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }] } });

package/file-upload/styles/_index.scss

@@ -57,7 +57,7 @@
     display: flex;
     flex-direction: column;
     gap: 0.125rem;
-    font-size: 0.875rem;
+    font-size: var(--wr-text-sm);
     line-height: 1.25rem;
 
     strong {
@@ -72,7 +72,7 @@
     small {
       margin-top: 0.25rem;
       color: var(--wr-color-medium);
-      font-size: 0.75rem;
+      font-size: var(--wr-text-xs);
     }
   }
 
@@ -106,7 +106,7 @@
     background: var(--wr-color-white);
     border: 1px solid var(--wr-color-light);
     @include theme.smooth-br(var(--wr-border-radius-base));
-    font-size: 0.875rem;
+    font-size: var(--wr-text-sm);
     line-height: 1.25rem;
   }
 

package/form/styles/_index.scss

@@ -8,7 +8,7 @@
 
   > label {
     color: var(--wr-color-medium);
-    font-size: 0.8125rem;
+    font-size: var(--wr-text-sm);
     font-weight: 500;
     line-height: 1.25rem;
     transition: color var(--wr-transition-base);
@@ -30,7 +30,7 @@
 .wr-form-error {
   display: block;
   color: var(--wr-color-danger);
-  font-size: 0.75rem;
+  font-size: var(--wr-text-xs);
   line-height: 1rem;
 }
 
@@ -45,7 +45,7 @@
     align-items: center;
     gap: 0.25rem;
     color: var(--wr-color-dark);
-    font-size: 0.875rem;
+    font-size: var(--wr-text-sm);
     font-weight: 500;
     line-height: 1.25rem;
   }
@@ -57,7 +57,7 @@
   &__optional {
     color: var(--wr-color-medium);
     font-weight: 400;
-    font-size: 0.8125rem;
+    font-size: var(--wr-text-sm);
   }
 
   &__control {
@@ -79,7 +79,7 @@
 
   &__error {
     color: var(--wr-color-danger);
-    font-size: 0.8125rem;
+    font-size: var(--wr-text-sm);
     line-height: 1.25;
   }
 

package/glitch-text/styles/_index.scss

@@ -5,11 +5,8 @@
 .wr-glitch-text {
   --wr-glitch-text-before-duration: 2s;
   --wr-glitch-text-after-duration: 3s;
-  --wr-glitch-text-before-shadow: 5px 0 cyan;
-  --wr-glitch-text-after-shadow: -5px 0 red;
-  // Clone backgrounds must match the page surface for the slicing
-  // illusion; the text itself uses the readable foreground token.
-  --wr-glitch-text-bg: var(--wr-color-white, #fff);
+  --wr-glitch-text-before-shadow: 5px 0 var(--wr-color-info);
+  --wr-glitch-text-after-shadow: -5px 0 var(--wr-color-danger);
 
   position: relative;
   display: inline-block;
@@ -24,7 +21,7 @@
     position: absolute;
     top: 0;
     color: inherit;
-    background-color: var(--wr-glitch-text-bg);
+    background-color: var(--wr-glitch-text-bg, transparent);
     overflow: hidden;
     clip-path: inset(0 0 0 0);
   }

package/image-cropper/styles/_index.scss

@@ -25,7 +25,7 @@
   &__backdrop {
     position: absolute;
     inset: 0;
-    background: rgba(var(--wr-color-backdrop-rgb), 0.5);
+    background: var(--wr-color-overlay);
     pointer-events: none;
   }
 
@@ -44,7 +44,7 @@
     background: var(--wr-color-white);
     border: 1px solid var(--wr-color-primary);
     border-radius: 50%;
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
+    box-shadow: 0 0 0 1px rgba(var(--wr-color-black-rgb), 0.15);
     box-sizing: border-box;
 
     // Position each handle by its edge / corner.
@@ -107,7 +107,7 @@
     padding: 2rem;
     text-align: center;
     color: var(--wr-color-medium);
-    background: rgba(var(--wr-color-light-rgb), 0.4);
+    background: var(--wr-color-hover);
     border: 1px dashed var(--wr-color-light);
     @include theme.smooth-br(var(--wr-border-radius-base));
   }

package/input/styles/_index.scss

@@ -10,12 +10,12 @@
   --wr-input-placeholder: rgba(var(--wr-color-medium-rgb), 0.7);
   --wr-input-bg: var(--wr-color-white);
   --wr-input-border: var(--wr-color-light);
-  --wr-input-radius: var(--wr-border-radius-base);
+  --wr-input-radius: var(--wr-control-radius-md);
   --wr-input-ring: transparent;
-  --wr-input-padding-y: 0.4375rem;
-  --wr-input-padding-x: 0.75rem;
-  --wr-input-font-size: 0.875rem;
-  --wr-input-line-height: 1.25rem;
+  --wr-input-padding-y: var(--wr-control-padding-y-md);
+  --wr-input-padding-x: var(--wr-control-padding-x-md);
+  --wr-input-font-size: var(--wr-control-font-size-md);
+  --wr-input-line-height: var(--wr-control-line-height-md);
 
   display: inline-block;
   width: 100%;
@@ -57,6 +57,25 @@
     cursor: not-allowed;
   }
 
+  // Sizes — share the `--wr-control-*` contract (22 / 30 / 36 px). Declared
+  // before `--rounded` so the pill modifier's radius / padding-x still win
+  // when both classes are present.
+  &--sm {
+    --wr-input-radius: var(--wr-control-radius-sm);
+    --wr-input-padding-y: var(--wr-control-padding-y-sm);
+    --wr-input-padding-x: var(--wr-control-padding-x-sm);
+    --wr-input-font-size: var(--wr-control-font-size-sm);
+    --wr-input-line-height: var(--wr-control-line-height-sm);
+  }
+
+  &--lg {
+    --wr-input-radius: var(--wr-control-radius-lg);
+    --wr-input-padding-y: var(--wr-control-padding-y-lg);
+    --wr-input-padding-x: var(--wr-control-padding-x-lg);
+    --wr-input-font-size: var(--wr-control-font-size-lg);
+    --wr-input-line-height: var(--wr-control-line-height-lg);
+  }
+
   &--rounded {
     --wr-input-radius: var(--wr-border-radius-pill);
     --wr-input-padding-x: 1rem;
@@ -70,7 +89,7 @@
 // `[wrInputPrefix]` / `[wrInputSuffix]` / `<wr-password-toggle>` siblings.
 //
 .wr-input-group {
-  --wr-input-group-radius: var(--wr-border-radius-base);
+  --wr-input-group-radius: var(--wr-control-radius-md);
   --wr-input-group-bg: var(--wr-color-white);
   --wr-input-group-border: var(--wr-color-light);
   --wr-input-group-ring: transparent;
@@ -120,7 +139,7 @@
     user-select: none;
     font-weight: 500;
     font-family: var(--wr-font-family-base);
-    font-size: 0.875rem;
+    font-size: var(--wr-text-sm);
     line-height: 1.25rem;
   }
 

package/input-otp/styles/_index.scss

@@ -5,11 +5,14 @@
   --wr-input-otp-border: var(--wr-color-light);
   --wr-input-otp-color: var(--wr-color-dark);
   --wr-input-otp-focus: var(--wr-color-primary);
-  --wr-input-otp-size: 2.75rem;
+  --wr-input-otp-size: 2.5rem; // md cell (40px)
+  --wr-input-otp-font: var(--wr-text-lg); // 18px
+  --wr-input-otp-radius: var(--wr-control-radius-md);
+  --wr-input-otp-gap: 0.5rem;
 
   display: inline-flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--wr-input-otp-gap);
   font-family: var(--wr-font-family-base);
 
   &__cell {
@@ -18,20 +21,20 @@
     padding: 0;
     text-align: center;
     font-family: var(--wr-font-family-mono, monospace);
-    font-size: 1.125rem;
+    font-size: var(--wr-input-otp-font);
     font-weight: 500;
     line-height: 1;
     color: var(--wr-input-otp-color);
     background: var(--wr-input-otp-bg);
     border: 1px solid var(--wr-input-otp-border);
-    @include theme.smooth-br(var(--wr-border-radius-base));
+    @include theme.smooth-br(var(--wr-input-otp-radius));
     appearance: none;
     transition:
       border-color var(--wr-transition-base),
       box-shadow var(--wr-transition-base);
 
     &::placeholder {
-      color: rgba(var(--wr-color-medium-rgb), 0.5);
+      color: var(--wr-color-text-faint);
     }
 
     &:focus {
@@ -47,6 +50,21 @@
     }
   }
 
+  // Sizes — cell, digit font, radius + gap scale together.
+  &--sm {
+    --wr-input-otp-size: 2rem; // 32px
+    --wr-input-otp-font: var(--wr-text-base); // 16px
+    --wr-input-otp-radius: var(--wr-control-radius-sm);
+    --wr-input-otp-gap: 0.375rem;
+  }
+
+  &--lg {
+    --wr-input-otp-size: 3rem; // 48px
+    --wr-input-otp-font: var(--wr-text-xl); // 20px
+    --wr-input-otp-radius: var(--wr-control-radius-lg);
+    --wr-input-otp-gap: 0.625rem;
+  }
+
   &--disabled {
     opacity: 0.7;
   }

package/keyboard/styles/_index.scss

@@ -4,7 +4,7 @@
   --wr-kbd-border: rgba(var(--wr-color-dark-rgb), 0.18);
   --wr-kbd-border-bottom: rgba(var(--wr-color-dark-rgb), 0.32);
   --wr-kbd-color: var(--wr-color-dark);
-  --wr-kbd-radius: 4px;
+  --wr-kbd-radius: var(--wr-control-radius-md);
   // Shadow uses the always-black backdrop token, not `--wr-color-dark-rgb`
   // — the dark RGB flips to light in dark mode, which would turn the
   // 1px drop-shadow into a top highlight.
@@ -33,23 +33,25 @@
   white-space: nowrap;
 
   &--sm {
+    --wr-kbd-radius: var(--wr-control-radius-sm);
     min-width: 1.375rem;
     height: 1.375rem;
     padding: 0 0.3125rem;
-    font-size: 0.6875rem;
+    font-size: var(--wr-text-xs);
   }
 
   &--md {
     min-width: 1.75rem;
     height: 1.75rem;
     padding: 0 0.4375rem;
-    font-size: 0.8125rem;
+    font-size: var(--wr-text-sm);
   }
 
   &--lg {
+    --wr-kbd-radius: var(--wr-control-radius-lg);
     min-width: 2.125rem;
     height: 2.125rem;
     padding: 0 0.5625rem;
-    font-size: 0.9375rem;
+    font-size: var(--wr-text-base);
   }
 }

package/knob/styles/_index.scss

@@ -14,7 +14,7 @@
     outline: 0;
 
     &:focus-visible {
-      box-shadow: 0 0 0 3px rgba(var(--wr-color-primary-rgb), 0.2);
+      @include theme.focus-ring;
       border-radius: 50%;
     }
 

package/lightbox/styles/_index.scss

@@ -9,21 +9,30 @@
   overflow: hidden;
   @include theme.smooth-br(var(--wr-lightbox-radius, var(--wr-border-radius-base)));
   cursor: zoom-in;
-  background: rgba(var(--wr-color-light-rgb), 0.4);
+  background: var(--wr-color-hover);
+
+  // Reserve space before the image resolves so the box doesn't collapse to
+  // 0 and shove the layout when the thumbnail pops in.
+  &--loading {
+    min-height: var(--wr-lightbox-loading-min-height, 4rem);
+  }
 
   &--loading::after {
     content: '';
     position: absolute;
     inset: 0;
+    // Sit above the host's empty placeholder background and below the image,
+    // so the shimmer is visible over the reserved area while loading.
     background: linear-gradient(
       90deg,
-      rgba(255, 255, 255, 0) 0%,
-      rgba(255, 255, 255, 0.45) 50%,
-      rgba(255, 255, 255, 0) 100%
+      rgba(var(--wr-color-white-rgb), 0) 0%,
+      rgba(var(--wr-color-white-rgb), 0.45) 50%,
+      rgba(var(--wr-color-white-rgb), 0) 100%
     );
     background-size: 200% 100%;
     animation: wr-lightbox-shimmer 1.4s linear infinite;
     pointer-events: none;
+    z-index: 1;
   }
 
   &__trigger {
@@ -49,6 +58,16 @@
     object-fit: cover;
     user-select: none;
     -webkit-user-drag: none;
+    // Fade in once the `loaded` signal drops the `--loading` class, so the
+    // image resolves smoothly instead of snapping in. Sits above the shimmer.
+    position: relative;
+    z-index: 2;
+    opacity: 1;
+    transition: opacity 0.25s ease;
+  }
+
+  &--loading &__thumb {
+    opacity: 0;
   }
 }
 
@@ -95,8 +114,8 @@
     padding: 0;
     border: 0;
     border-radius: 999px;
-    background: rgba(255, 255, 255, 0.12);
-    color: rgba(255, 255, 255, 0.9);
+    background: rgba(var(--wr-color-white-rgb), 0.12);
+    color: rgba(var(--wr-color-white-rgb), 0.9);
     cursor: pointer;
     transition:
       background 0.15s ease,
@@ -105,7 +124,7 @@
     @include theme.touch-target($positioned: true); // 36px -> 44px tap area on touch
 
     &:hover {
-      background: rgba(255, 255, 255, 0.2);
+      background: rgba(var(--wr-color-white-rgb), 0.2);
     }
 
     &:active {
@@ -113,7 +132,7 @@
     }
 
     &:focus-visible {
-      outline: 2px solid rgba(255, 255, 255, 0.9);
+      outline: 2px solid rgba(var(--wr-color-white-rgb), 0.9);
       outline-offset: 2px;
     }
   }
@@ -128,9 +147,9 @@
   }
 
   &__caption {
-    color: rgba(255, 255, 255, 0.85);
+    color: rgba(var(--wr-color-white-rgb), 0.85);
     font-family: var(--wr-font-family-base);
-    font-size: 0.9375rem;
+    font-size: var(--wr-text-sm);
     text-align: center;
     max-width: 60ch;
   }

package/list/styles/_index.scss

@@ -11,12 +11,12 @@
   --wr-list-item-gap: 0.75rem;
   --wr-list-divider-color: var(--wr-color-light);
   --wr-list-bg: transparent;
-  --wr-list-hover-bg: rgba(var(--wr-color-light-rgb), 0.4);
+  --wr-list-hover-bg: var(--wr-color-hover);
   --wr-list-active-bg: rgba(var(--wr-color-primary-rgb), 0.08);
 
   display: block;
   font-family: var(--wr-font-family-base);
-  font-size: 0.9375rem;
+  font-size: var(--wr-text-sm);
   color: var(--wr-color-dark);
   background: var(--wr-list-bg);
 
@@ -65,7 +65,7 @@
       }
 
       &:focus-visible {
-        outline: 2px solid var(--wr-color-primary);
+        @include theme.focus-ring;
         outline-offset: -2px;
       }
     }