@ethlete/components 1.0.0-next.61 → 1.0.0-next.62

package/fesm2022/ethlete-components.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, input, booleanAttribute, signal, computed, effect, untracked, Directive, inject, afterNextRender, DestroyRef, TemplateRef, ElementRef, model, linkedSignal, ViewEncapsulation, Component, numberAttribute, contentChildren, Injector, output, runInInjectionContext, contentChild, NgZone, afterRenderEffect, ApplicationRef, viewChild, ViewContainerRef, createEnvironmentInjector, DOCUMENT, EnvironmentInjector, inputBinding, isSignal, createComponent, assertInInjectionContext, isDevMode as isDevMode$1, provideEnvironmentInitializer, viewChildren, outputBinding, afterEveryRender, PLATFORM_ID } from '@angular/core';
+import { InjectionToken, input, booleanAttribute, signal, computed, effect, untracked, Directive, inject, afterNextRender, DestroyRef, TemplateRef, ElementRef, model, linkedSignal, ViewEncapsulation, Component, numberAttribute, contentChildren, Injector, output, runInInjectionContext, contentChild, NgZone, afterRenderEffect, ApplicationRef, viewChild, ViewContainerRef, createEnvironmentInjector, DOCUMENT, EnvironmentInjector, inputBinding, isSignal, createComponent, assertInInjectionContext, isDevMode as isDevMode$1, provideEnvironmentInitializer, viewChildren, outputBinding, afterEveryRender, PLATFORM_ID, CSP_NONCE } from '@angular/core';
 import * as i1 from '@ethlete/core';
-import { injectHostElement, RuntimeError, createComponentId, ProvideColorDirective, defineLabels, toProvideFn, toInjectFn, toToken, injectStyleManager, SurfaceInteractiveDirective, createCanAnimateSignal, ColorInteractiveDirective, injectSuccessTheme, injectWarningTheme, injectErrorTheme, injectLocale, defineStaticRootProvider, inferMimeType, injectColorThemes, injectRenderer, ProvideSurfaceDirective, COLOR_PROVIDER, SURFACE_PROVIDER, injectSurfaceThemes, injectSurfaceThemesPrefix, injectSurfaceContextTracker, injectBoundaryElement, ANIMATED_LIFECYCLE_TOKEN, resolveAppRootColorProvider, resolveSurfaceByElevation, createCssSurfaceName, provideBoundaryElement, AnimatedLifecycleDirective, isElement, injectBreakpointObserver, isHTMLElement, equal, nextFrame, animationDebugLog, resolveOverlayLayer, defineRootProvider, injectOverlayRuntime, anchoredOverlayPosition, injectQueryParam, randomId, ScrollObserverDirective, signalElementScrollState, ScrollObserverStartDirective, ScrollObserverEndDirective, enableAnchoredOverlayPositionExtras, forceReflow, elementCanScroll, matchesReducedMotion, createSwipeTracker, applyHostListener, defineProvider, fromNextFrame, injectRoute, createUnsavedChangesTracker, createDocumentElementSignal, AnimatedIfDirective, signalElementDimensions, applyInitialFocus, syncSignal, AutoSurfaceDirective, setInputSignal, injectTemplateRef, signalHostElementScrollState, applyStructuredDataBinding, mountEasingTokens, typedBreakpointTransform, signalElementChildren, signalElementIntersection, signalHostAttributes, signalHostClasses, signalHostStyles, getScrollContainerTarget, getScrollItemTarget, getElementScrollCoordinates, provideBreakpointInstance, signalClasses, useCursorDragScroll, signalStyles, getScrollSnapTarget, injectPrefersReducedMotion, injectIsDocumentVisible, signalHostElementIntersection, clamp as clamp$1, signalHostElementDimensions, injectColorPalette, injectFocusVisibleTracker, isOnHigherOverlayLayer, copyToClipboard, getFocusableElements, injectAnimatedBlockSize, injectObserveBreakpoint, applyHostListeners, dragGestureFrom, signalDeferredLoading, AnimatableDirective, ColorInteractiveContainerDirective, ColorInteractiveExcludeDirective, injectParentSurface, ColorInteractiveHasFocusDirective, createFlipAnimation, createObjectUrlHandle, createFlipAnimationGroup, focusElement, isFocusable, htmlToMarkdown, markdownToHtml, injectHasTouchInput, DragHandleDirective, ResizeHandlesComponent, numberBreakpointTransform, signalElementMutations, DEFAULT_OVERLAY_LAYER, injectSurfaceType, applyLinkBinding, applyHeadTitleBinding, injectViewportSize, injectFileDownload, injectRouterEvent, canUseSessionMemory, createAutoSessionMemoryKey, createSessionMemory } from '@ethlete/core';
+import { injectHostElement, RuntimeError, createComponentId, ProvideColorDirective, defineLabels, toProvideFn, toInjectFn, toToken, injectStyleManager, SurfaceInteractiveDirective, createCanAnimateSignal, ColorInteractiveDirective, injectSuccessTheme, injectWarningTheme, injectErrorTheme, injectLocale, defineStaticRootProvider, inferMimeType, injectColorThemes, injectRenderer, ProvideSurfaceDirective, COLOR_PROVIDER, SURFACE_PROVIDER, injectSurfaceThemes, injectSurfaceThemesPrefix, injectSurfaceContextTracker, injectBoundaryElement, ANIMATED_LIFECYCLE_TOKEN, resolveAppRootColorProvider, resolveSurfaceByElevation, createCssSurfaceName, provideBoundaryElement, AnimatedLifecycleDirective, isElement, injectBreakpointObserver, isHTMLElement, equal, nextFrame, animationDebugLog, resolveOverlayLayer, defineRootProvider, injectOverlayRuntime, anchoredOverlayPosition, injectQueryParam, randomId, ScrollObserverDirective, signalElementScrollState, ScrollObserverStartDirective, ScrollObserverEndDirective, enableAnchoredOverlayPositionExtras, forceReflow, elementCanScroll, matchesReducedMotion, createSwipeTracker, applyHostListener, defineProvider, fromNextFrame, injectRoute, createUnsavedChangesTracker, createDocumentElementSignal, AnimatedIfDirective, signalElementDimensions, applyInitialFocus, syncSignal, AutoSurfaceDirective, setInputSignal, injectTemplateRef, signalHostElementScrollState, applyStructuredDataBinding, mountEasingTokens, typedBreakpointTransform, signalElementChildren, signalElementIntersection, signalHostAttributes, signalHostClasses, signalHostStyles, getScrollContainerTarget, getScrollItemTarget, getElementScrollCoordinates, provideBreakpointInstance, signalClasses, useCursorDragScroll, signalStyles, getScrollSnapTarget, injectPrefersReducedMotion, injectIsDocumentVisible, signalHostElementIntersection, clamp as clamp$1, signalHostElementDimensions, injectColorPalette, injectFocusVisibleTracker, isOnHigherOverlayLayer, copyToClipboard, getFocusableElements, injectAnimatedBlockSize, injectObserveBreakpoint, applyHostListeners, dragGestureFrom, signalDeferredLoading, AnimatableDirective, ColorInteractiveContainerDirective, ColorInteractiveExcludeDirective, injectParentSurface, ColorInteractiveHasFocusDirective, createFlipAnimation, createFlipAnimationGroup, focusElement, isFocusable, htmlToMarkdown, markdownToHtml, injectHasTouchInput, DragHandleDirective, ResizeHandlesComponent, numberBreakpointTransform, signalElementMutations, DEFAULT_OVERLAY_LAYER, injectSurfaceType, applyLinkBinding, applyHeadTitleBinding, injectViewportSize, injectFileDownload, injectRouterEvent, canUseSessionMemory, createAutoSessionMemoryKey, createSessionMemory } from '@ethlete/core';
 import { NgTemplateOutlet, NgComponentOutlet, Location, DOCUMENT as DOCUMENT$1, isPlatformBrowser } from '@angular/common';
 import { DomSanitizer } from '@angular/platform-browser';
 import { DOUBLE_ELIMINATION_BRACKET_ROUND_TYPE, COMMON_BRACKET_ROUND_TYPE, BRACKET_ERROR_CODES, SWISS_BRACKET_ROUND_TYPE, SINGLE_ELIMINATION_BRACKET_ROUND_TYPE, TOURNAMENT_MODE, BRACKET_DATA_LAYOUT, resolveBracketLayout as resolveBracketLayout$1, createBracket, drawMan, createDoubleEliminationGrid, createStackedDoubleEliminationGrid, createSingleEliminationGrid, generateBracketRoundSwissGroupMaps, createSwissGrid, drawSwissMan, standingPickStartOrder } from '@ethlete/bracket';
@@ -1258,7 +1258,7 @@ class IconDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: IconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: IconDirective, isStandalone: true, selector: "[etIcon]", inputs: { iconNameToUse: { classPropertyName: "iconNameToUse", publicName: "etIcon", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, allowHardcodedColor: { classPropertyName: "allowHardcodedColor", publicName: "allowHardcodedColor", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "innerHTML": "iconSrc()", "attr.aria-hidden": "label() ? null : \"true\"", "attr.role": "label() ? \"img\" : null", "attr.aria-label": "label()", "class": "hostClasses()" }, styleAttribute: "display: flex; align-items: center; justify-content: center;" }, providers: [
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: IconDirective, isStandalone: true, selector: "[etIcon]", inputs: { iconNameToUse: { classPropertyName: "iconNameToUse", publicName: "etIcon", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, allowHardcodedColor: { classPropertyName: "allowHardcodedColor", publicName: "allowHardcodedColor", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "innerHTML": "iconSrc()", "attr.aria-hidden": "label() ? null : \"true\"", "attr.role": "label() ? \"img\" : null", "attr.aria-label": "label()", "class": "hostClasses()", "style.display": "\"flex\"", "style.align-items": "\"center\"", "style.justify-content": "\"center\"" } }, providers: [
             {
                 provide: ICON_DIRECTIVE_TOKEN,
                 useExisting: IconDirective,
@@ -1283,7 +1283,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                         '[attr.role]': 'label() ? "img" : null',
                         '[attr.aria-label]': 'label()',
                         '[class]': 'hostClasses()',
-                        style: 'display: flex; align-items: center; justify-content: center;',
+                        '[style.display]': '"flex"',
+                        '[style.align-items]': '"center"',
+                        '[style.justify-content]': '"center"',
                     },
                 }]
         }], ctorParameters: () => [], propDecorators: { iconNameToUse: [{ type: i0.Input, args: [{ isSignal: true, alias: "etIcon", required: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], allowHardcodedColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowHardcodedColor", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
@@ -25797,7 +25799,7 @@ class ColorPickerAreaDirective {
         this.colorInput?.picker.setSaturationAndValue(saturation, brightness);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ColorPickerAreaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: ColorPickerAreaDirective, isStandalone: true, selector: "[etColorPickerArea]", host: { listeners: { "pointerdown": "handlePointerDown($event)" }, properties: { "style.--_et-color-picker-area-hue": "hueColor()" }, styleAttribute: "touch-action: none", classAttribute: "et-color-picker-area" }, exportAs: ["etColorPickerArea"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: ColorPickerAreaDirective, isStandalone: true, selector: "[etColorPickerArea]", host: { listeners: { "pointerdown": "handlePointerDown($event)" }, properties: { "style.touch-action": "\"none\"", "style.--_et-color-picker-area-hue": "hueColor()" }, classAttribute: "et-color-picker-area" }, exportAs: ["etColorPickerArea"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ColorPickerAreaDirective, decorators: [{
             type: Directive,
@@ -25806,7 +25808,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                     exportAs: 'etColorPickerArea',
                     host: {
                         class: 'et-color-picker-area',
-                        style: 'touch-action: none',
+                        '[style.touch-action]': '"none"',
                         '[style.--_et-color-picker-area-hue]': 'hueColor()',
                         '(pointerdown)': 'handlePointerDown($event)',
                     },
@@ -32142,9 +32144,28 @@ const DROPZONE_ENTRY_STATUSES = {
     ERROR: 'error',
     EXISTING: 'existing',
 };
+/** A `data:` URL rather than an object URL: a strict `img-src` rarely allows `blob:`. */
+const readImagePreview = (file) => {
+    const url = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "url" }] : /* istanbul ignore next */ []));
+    if (typeof FileReader === 'undefined')
+        return { url: url.asReadonly(), dispose: () => undefined };
+    const reader = new FileReader();
+    reader.onload = () => url.set(typeof reader.result === 'string' ? reader.result : null);
+    reader.readAsDataURL(file);
+    return {
+        url: url.asReadonly(),
+        dispose: () => {
+            reader.onload = null;
+            if (reader.readyState === FileReader.LOADING)
+                reader.abort();
+            url.set(null);
+        },
+    };
+};
 const createFileDropzoneEntry = (options) => {
     const { file, handle } = options;
-    const objectUrl = file.type.startsWith('image/') ? createObjectUrlHandle(file) : null;
+    const preview = file.type.startsWith('image/') ? readImagePreview(file) : null;
     const status = computed(() => {
         switch (handle.state()) {
             case 'success':
@@ -32161,14 +32182,14 @@ const createFileDropzoneEntry = (options) => {
         source: { type: 'file', file },
         name: computed(() => file.name),
         size: computed(() => file.size),
-        previewUrl: computed(() => objectUrl?.url ?? null),
+        previewUrl: preview?.url ?? computed(() => null),
         status,
         progress: handle.progress,
         error: handle.error,
         errorMessage: handle.errorMessage,
         value: handle.value,
         handle,
-        objectUrl,
+        disposePreview: preview?.dispose ?? null,
     };
 };
 const createExistingDropzoneEntry = (options) => {
@@ -32187,12 +32208,12 @@ const createExistingDropzoneEntry = (options) => {
         errorMessage: computed(() => null),
         value: computed(() => value),
         handle: null,
-        objectUrl: null,
+        disposePreview: null,
     };
 };
-/** Releases all resources held by an entry (object URL, in-flight upload). */
+/** Releases all resources held by an entry (preview read, in-flight upload). */
 const disposeDropzoneEntry = (entry) => {
-    entry.objectUrl?.revoke();
+    entry.disposePreview?.();
     entry.handle?.dispose();
 };
 /** Checks a file against the native `accept` attribute semantics (`.ext`, `type/subtype`, `type/*`). */
@@ -34070,6 +34091,9 @@ const HEADING_SELECTOR = 'h1, h2, h3, h4, h5, h6';
 /** Must list only block-level containers: an inline element re-tagged in place loses its mark, so a
  *  bare `<strong>` under the root has to be wrapped by the heading rather than turned into one. */
 const BLOCK_SELECTOR = 'p, div, blockquote, pre, li, figure, section, article';
+/** Alignment persists as a class, not an inline `text-align`, so rendered content passes a strict `style-src`. */
+const ALIGN_CLASS_PREFIX = 'et-rte-align-';
+const alignClassOf = (el) => [...el.classList].find((cls) => cls.startsWith(ALIGN_CLASS_PREFIX)) ?? null;
 const createRichTextEditorDomCore = (doc, renderer) => {
     const root = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "root" }] : /* istanbul ignore next */ []));
@@ -39076,7 +39100,7 @@ const MENU_SEARCH_IMPORTS = [MenuSearchDirective];
 const TEXT_ALIGNS = ['left', 'center', 'right', 'justify'];
 /**
  * The opt-in alignment tool's toolbar control: a menu of block alignments (left/center/right/justify).
- * Alignment has no Markdown form, so it is persisted as a native `text-align` style on the block (or
+ * Alignment has no Markdown form, so it is persisted as an `et-rte-align-*` class on the block (or
  * table cell) and round-tripped as raw HTML by the Markdown converter. Registered via
  * `provideRichTextEditorAlignmentTool`.
  */
@@ -39128,10 +39152,11 @@ class RichTextEditorAlignToolComponent {
         // explicit align action) - never in readAlign, which runs on every selection change
         const blocks = this.targetBlocks(root, range) ?? this.wrapLooseContent(root, range);
         for (const block of blocks) {
-            if (align === 'left')
-                this.renderer.removeStyle(block, 'textAlign');
-            else
-                this.renderer.setStyle(block, { textAlign: align });
+            const current = alignClassOf(block);
+            if (current)
+                this.renderer.removeClass(block, current);
+            if (align !== 'left')
+                this.renderer.addClass(block, `${ALIGN_CLASS_PREFIX}${align}`);
         }
         this.current.set(align);
         this.editor().syncFromDom({ boundary: true });
@@ -39142,7 +39167,8 @@ class RichTextEditorAlignToolComponent {
         const range = this.editor().editorDom.getSelection()?.range;
         if (!root || !range)
             return 'left';
-        const value = this.targetBlocks(root, range)?.[0]?.style.textAlign ?? '';
+        const block = this.targetBlocks(root, range)?.[0];
+        const value = (block && alignClassOf(block)?.slice(ALIGN_CLASS_PREFIX.length)) ?? '';
         return TEXT_ALIGNS.includes(value) ? value : 'left';
     }
     /**
@@ -39209,7 +39235,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
 /**
  * Registers the opt-in `'align'` tool (block text-align: left / center / right / justify). Add to a
  * component/route's providers and include `'align'` in the editor's `tools`. Alignment persists as a
- * native `text-align` style on the block (Markdown has no alignment syntax). Tree-shakes when unused.
+ * `et-rte-align-*` class on the block (Markdown has no alignment syntax). Tree-shakes when unused.
  */
 const provideRichTextEditorAlignmentTool = () => ({
     provide: RICH_TEXT_EDITOR_TOOL,
@@ -39835,10 +39861,10 @@ const createRichTextEditorHeadings = (core) => {
     const { doc, renderer, root, getSelection, closestWithin, selectNodeContents, selectAcross, collapseInto, replaceWith, blocksInRange, isBlockEmpty, } = core;
     const replaceBlockTag = (block, tag) => {
         const replacement = renderer.createElement(tag);
-        // Alignment is the one style the editor persists on blocks, so it has to survive the re-tag.
-        if (block.style.textAlign) {
-            renderer.setStyle(replacement, { textAlign: block.style.textAlign });
-        }
+        const align = alignClassOf(block);
+        // Alignment is the one presentation the editor persists on blocks, so it has to survive the re-tag.
+        if (align)
+            renderer.addClass(replacement, align);
         while (block.firstChild) {
             renderer.appendChild(replacement, block.firstChild);
         }
@@ -41676,11 +41702,11 @@ const TOOLBAR_IMPORTS = [ToolbarComponent, ToolbarDirective];
  */
 class RichTextContentStylesComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RichTextContentStylesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: RichTextContentStylesComponent, isStandalone: true, selector: "et-rich-text-content-styles", ngImport: i0, template: '', isInline: true, styles: ["@layer components{@property --et-rich-text-editor-content-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-rich-text-editor-quote-indent{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-rich-text-editor-quote-bar-width{syntax: \"<length>\"; inherits: true; initial-value: 2px;}@property --et-rich-text-editor-code-block-radius{syntax: \"<length>\"; inherits: true; initial-value: 6px;}@property --et-rich-text-editor-token-radius{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-rich-text-editor-token-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 4px;}.et-rte-content{overflow-wrap:anywhere}.et-rte-content>:first-child{margin-block-start:0}.et-rte-content>:last-child{margin-block-end:0}.et-rte-content p{margin-block:0}.et-rte-content p+p,.et-rte-content ul,.et-rte-content ol,.et-rte-content blockquote,.et-rte-content pre{margin-block-start:var(--et-rich-text-editor-content-gap)}.et-rte-content h1,.et-rte-content h2,.et-rte-content h3,.et-rte-content h4,.et-rte-content h5,.et-rte-content h6{margin-block:0;font-weight:700;line-height:1.25}.et-rte-content :is(h1,h2,h3,h4,h5,h6)+*,.et-rte-content *+:is(h1,h2,h3,h4,h5,h6){margin-block-start:var(--et-rich-text-editor-content-gap)}.et-rte-content h1{font-size:2.4rem}.et-rte-content h2{font-size:2rem}.et-rte-content h3{font-size:1.6rem}.et-rte-content ul,.et-rte-content ol{margin-block-end:0;padding-inline-start:1.5em;list-style-position:outside}.et-rte-content ul{list-style-type:disc}.et-rte-content ul ul,.et-rte-content ul ul ul ul ul{list-style-type:circle}.et-rte-content ul ul ul,.et-rte-content ul ul ul ul ul ul{list-style-type:square}.et-rte-content ul ul ul ul{list-style-type:disc}.et-rte-content ol{list-style-type:decimal}.et-rte-content ol ol,.et-rte-content ol ol ol ol ol{list-style-type:lower-alpha}.et-rte-content ol ol ol,.et-rte-content ol ol ol ol ol ol{list-style-type:lower-roman}.et-rte-content ol ol ol ol{list-style-type:decimal}.et-rte-content li{margin-block:0}.et-rte-content li::marker{color:color-mix(in srgb,currentColor 60%,transparent)}.et-rte-content a{color:var(--et-theme-color-primary-solid, currentColor);text-decoration:underline}.et-rte-content code{padding:.1em .3em;border-radius:4px;background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 14%,transparent);font-family:var(--et-font-family-mono, ui-monospace, monospace);font-size:.9em}.et-rte-content blockquote{margin-inline:0;margin-block-end:0;padding-inline-start:var(--et-rich-text-editor-quote-indent);border-inline-start:var(--et-rich-text-editor-quote-bar-width) solid color-mix(in srgb,var(--et-surface-border-solid, currentColor) 80%,transparent);color:color-mix(in srgb,currentColor 82%,transparent)}.et-rte-content blockquote blockquote{margin-block-start:var(--et-rich-text-editor-content-gap)}.et-rte-content pre{margin-block-end:0;padding:8px 10px;border-radius:var(--et-rich-text-editor-code-block-radius);background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 10%,transparent);font-family:var(--et-font-family-mono, ui-monospace, monospace);font-size:.9em;white-space:pre-wrap}.et-rte-content pre code{padding:0;border-radius:0;background:none;font-size:inherit}.et-rte-content .et-rte-token{--_et-rte-token-accent: var(--et-theme-color-primary-solid, var(--et-surface-interaction-solid, currentColor));display:inline;padding-inline:var(--et-rich-text-editor-token-padding-inline);border-radius:var(--et-rich-text-editor-token-radius);background:color-mix(in srgb,var(--_et-rte-token-accent) 22%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--_et-rte-token-accent) 45%,transparent);color:var(--et-theme-color-ink-solid, inherit);font-weight:500;white-space:nowrap;-webkit-user-select:all;user-select:all;cursor:default}.et-rte-content .et-rte-token-prefix{margin-inline-end:1px;opacity:.65}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: RichTextContentStylesComponent, isStandalone: true, selector: "et-rich-text-content-styles", ngImport: i0, template: '', isInline: true, styles: ["@layer components{@property --et-rich-text-editor-content-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-rich-text-editor-quote-indent{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-rich-text-editor-quote-bar-width{syntax: \"<length>\"; inherits: true; initial-value: 2px;}@property --et-rich-text-editor-code-block-radius{syntax: \"<length>\"; inherits: true; initial-value: 6px;}@property --et-rich-text-editor-token-radius{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-rich-text-editor-token-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 4px;}.et-rte-content{overflow-wrap:anywhere}.et-rte-content>:first-child{margin-block-start:0}.et-rte-content>:last-child{margin-block-end:0}.et-rte-content p{margin-block:0}.et-rte-content p+p,.et-rte-content ul,.et-rte-content ol,.et-rte-content blockquote,.et-rte-content pre{margin-block-start:var(--et-rich-text-editor-content-gap)}.et-rte-content h1,.et-rte-content h2,.et-rte-content h3,.et-rte-content h4,.et-rte-content h5,.et-rte-content h6{margin-block:0;font-weight:700;line-height:1.25}.et-rte-content :is(h1,h2,h3,h4,h5,h6)+*,.et-rte-content *+:is(h1,h2,h3,h4,h5,h6){margin-block-start:var(--et-rich-text-editor-content-gap)}.et-rte-content h1{font-size:2.4rem}.et-rte-content h2{font-size:2rem}.et-rte-content h3{font-size:1.6rem}.et-rte-content ul,.et-rte-content ol{margin-block-end:0;padding-inline-start:1.5em;list-style-position:outside}.et-rte-content ul{list-style-type:disc}.et-rte-content ul ul,.et-rte-content ul ul ul ul ul{list-style-type:circle}.et-rte-content ul ul ul,.et-rte-content ul ul ul ul ul ul{list-style-type:square}.et-rte-content ul ul ul ul{list-style-type:disc}.et-rte-content ol{list-style-type:decimal}.et-rte-content ol ol,.et-rte-content ol ol ol ol ol{list-style-type:lower-alpha}.et-rte-content ol ol ol,.et-rte-content ol ol ol ol ol ol{list-style-type:lower-roman}.et-rte-content ol ol ol ol{list-style-type:decimal}.et-rte-content li{margin-block:0}.et-rte-content li::marker{color:color-mix(in srgb,currentColor 60%,transparent)}.et-rte-content a{color:var(--et-theme-color-primary-solid, currentColor);text-decoration:underline}.et-rte-content code{padding:.1em .3em;border-radius:4px;background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 14%,transparent);font-family:var(--et-font-family-mono, ui-monospace, monospace);font-size:.9em}.et-rte-content blockquote{margin-inline:0;margin-block-end:0;padding-inline-start:var(--et-rich-text-editor-quote-indent);border-inline-start:var(--et-rich-text-editor-quote-bar-width) solid color-mix(in srgb,var(--et-surface-border-solid, currentColor) 80%,transparent);color:color-mix(in srgb,currentColor 82%,transparent)}.et-rte-content blockquote blockquote{margin-block-start:var(--et-rich-text-editor-content-gap)}.et-rte-content pre{margin-block-end:0;padding:8px 10px;border-radius:var(--et-rich-text-editor-code-block-radius);background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 10%,transparent);font-family:var(--et-font-family-mono, ui-monospace, monospace);font-size:.9em;white-space:pre-wrap}.et-rte-content pre code{padding:0;border-radius:0;background:none;font-size:inherit}.et-rte-content .et-rte-token{--_et-rte-token-accent: var(--et-theme-color-primary-solid, var(--et-surface-interaction-solid, currentColor));display:inline;padding-inline:var(--et-rich-text-editor-token-padding-inline);border-radius:var(--et-rich-text-editor-token-radius);background:color-mix(in srgb,var(--_et-rte-token-accent) 22%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--_et-rte-token-accent) 45%,transparent);color:var(--et-theme-color-ink-solid, inherit);font-weight:500;white-space:nowrap;-webkit-user-select:all;user-select:all;cursor:default}.et-rte-content .et-rte-token-prefix{margin-inline-end:1px;opacity:.65}.et-rte-content .et-rte-align-left{text-align:left}.et-rte-content .et-rte-align-center{text-align:center}.et-rte-content .et-rte-align-right{text-align:right}.et-rte-content .et-rte-align-justify{text-align:justify}.et-rte-content .et-rte-align-start{text-align:start}.et-rte-content .et-rte-align-end{text-align:end}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: RichTextContentStylesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'et-rich-text-content-styles', template: '', encapsulation: ViewEncapsulation.None, styles: ["@layer components{@property --et-rich-text-editor-content-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-rich-text-editor-quote-indent{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-rich-text-editor-quote-bar-width{syntax: \"<length>\"; inherits: true; initial-value: 2px;}@property --et-rich-text-editor-code-block-radius{syntax: \"<length>\"; inherits: true; initial-value: 6px;}@property --et-rich-text-editor-token-radius{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-rich-text-editor-token-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 4px;}.et-rte-content{overflow-wrap:anywhere}.et-rte-content>:first-child{margin-block-start:0}.et-rte-content>:last-child{margin-block-end:0}.et-rte-content p{margin-block:0}.et-rte-content p+p,.et-rte-content ul,.et-rte-content ol,.et-rte-content blockquote,.et-rte-content pre{margin-block-start:var(--et-rich-text-editor-content-gap)}.et-rte-content h1,.et-rte-content h2,.et-rte-content h3,.et-rte-content h4,.et-rte-content h5,.et-rte-content h6{margin-block:0;font-weight:700;line-height:1.25}.et-rte-content :is(h1,h2,h3,h4,h5,h6)+*,.et-rte-content *+:is(h1,h2,h3,h4,h5,h6){margin-block-start:var(--et-rich-text-editor-content-gap)}.et-rte-content h1{font-size:2.4rem}.et-rte-content h2{font-size:2rem}.et-rte-content h3{font-size:1.6rem}.et-rte-content ul,.et-rte-content ol{margin-block-end:0;padding-inline-start:1.5em;list-style-position:outside}.et-rte-content ul{list-style-type:disc}.et-rte-content ul ul,.et-rte-content ul ul ul ul ul{list-style-type:circle}.et-rte-content ul ul ul,.et-rte-content ul ul ul ul ul ul{list-style-type:square}.et-rte-content ul ul ul ul{list-style-type:disc}.et-rte-content ol{list-style-type:decimal}.et-rte-content ol ol,.et-rte-content ol ol ol ol ol{list-style-type:lower-alpha}.et-rte-content ol ol ol,.et-rte-content ol ol ol ol ol ol{list-style-type:lower-roman}.et-rte-content ol ol ol ol{list-style-type:decimal}.et-rte-content li{margin-block:0}.et-rte-content li::marker{color:color-mix(in srgb,currentColor 60%,transparent)}.et-rte-content a{color:var(--et-theme-color-primary-solid, currentColor);text-decoration:underline}.et-rte-content code{padding:.1em .3em;border-radius:4px;background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 14%,transparent);font-family:var(--et-font-family-mono, ui-monospace, monospace);font-size:.9em}.et-rte-content blockquote{margin-inline:0;margin-block-end:0;padding-inline-start:var(--et-rich-text-editor-quote-indent);border-inline-start:var(--et-rich-text-editor-quote-bar-width) solid color-mix(in srgb,var(--et-surface-border-solid, currentColor) 80%,transparent);color:color-mix(in srgb,currentColor 82%,transparent)}.et-rte-content blockquote blockquote{margin-block-start:var(--et-rich-text-editor-content-gap)}.et-rte-content pre{margin-block-end:0;padding:8px 10px;border-radius:var(--et-rich-text-editor-code-block-radius);background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 10%,transparent);font-family:var(--et-font-family-mono, ui-monospace, monospace);font-size:.9em;white-space:pre-wrap}.et-rte-content pre code{padding:0;border-radius:0;background:none;font-size:inherit}.et-rte-content .et-rte-token{--_et-rte-token-accent: var(--et-theme-color-primary-solid, var(--et-surface-interaction-solid, currentColor));display:inline;padding-inline:var(--et-rich-text-editor-token-padding-inline);border-radius:var(--et-rich-text-editor-token-radius);background:color-mix(in srgb,var(--_et-rte-token-accent) 22%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--_et-rte-token-accent) 45%,transparent);color:var(--et-theme-color-ink-solid, inherit);font-weight:500;white-space:nowrap;-webkit-user-select:all;user-select:all;cursor:default}.et-rte-content .et-rte-token-prefix{margin-inline-end:1px;opacity:.65}}\n"] }]
+            args: [{ selector: 'et-rich-text-content-styles', template: '', encapsulation: ViewEncapsulation.None, styles: ["@layer components{@property --et-rich-text-editor-content-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-rich-text-editor-quote-indent{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-rich-text-editor-quote-bar-width{syntax: \"<length>\"; inherits: true; initial-value: 2px;}@property --et-rich-text-editor-code-block-radius{syntax: \"<length>\"; inherits: true; initial-value: 6px;}@property --et-rich-text-editor-token-radius{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-rich-text-editor-token-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 4px;}.et-rte-content{overflow-wrap:anywhere}.et-rte-content>:first-child{margin-block-start:0}.et-rte-content>:last-child{margin-block-end:0}.et-rte-content p{margin-block:0}.et-rte-content p+p,.et-rte-content ul,.et-rte-content ol,.et-rte-content blockquote,.et-rte-content pre{margin-block-start:var(--et-rich-text-editor-content-gap)}.et-rte-content h1,.et-rte-content h2,.et-rte-content h3,.et-rte-content h4,.et-rte-content h5,.et-rte-content h6{margin-block:0;font-weight:700;line-height:1.25}.et-rte-content :is(h1,h2,h3,h4,h5,h6)+*,.et-rte-content *+:is(h1,h2,h3,h4,h5,h6){margin-block-start:var(--et-rich-text-editor-content-gap)}.et-rte-content h1{font-size:2.4rem}.et-rte-content h2{font-size:2rem}.et-rte-content h3{font-size:1.6rem}.et-rte-content ul,.et-rte-content ol{margin-block-end:0;padding-inline-start:1.5em;list-style-position:outside}.et-rte-content ul{list-style-type:disc}.et-rte-content ul ul,.et-rte-content ul ul ul ul ul{list-style-type:circle}.et-rte-content ul ul ul,.et-rte-content ul ul ul ul ul ul{list-style-type:square}.et-rte-content ul ul ul ul{list-style-type:disc}.et-rte-content ol{list-style-type:decimal}.et-rte-content ol ol,.et-rte-content ol ol ol ol ol{list-style-type:lower-alpha}.et-rte-content ol ol ol,.et-rte-content ol ol ol ol ol ol{list-style-type:lower-roman}.et-rte-content ol ol ol ol{list-style-type:decimal}.et-rte-content li{margin-block:0}.et-rte-content li::marker{color:color-mix(in srgb,currentColor 60%,transparent)}.et-rte-content a{color:var(--et-theme-color-primary-solid, currentColor);text-decoration:underline}.et-rte-content code{padding:.1em .3em;border-radius:4px;background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 14%,transparent);font-family:var(--et-font-family-mono, ui-monospace, monospace);font-size:.9em}.et-rte-content blockquote{margin-inline:0;margin-block-end:0;padding-inline-start:var(--et-rich-text-editor-quote-indent);border-inline-start:var(--et-rich-text-editor-quote-bar-width) solid color-mix(in srgb,var(--et-surface-border-solid, currentColor) 80%,transparent);color:color-mix(in srgb,currentColor 82%,transparent)}.et-rte-content blockquote blockquote{margin-block-start:var(--et-rich-text-editor-content-gap)}.et-rte-content pre{margin-block-end:0;padding:8px 10px;border-radius:var(--et-rich-text-editor-code-block-radius);background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 10%,transparent);font-family:var(--et-font-family-mono, ui-monospace, monospace);font-size:.9em;white-space:pre-wrap}.et-rte-content pre code{padding:0;border-radius:0;background:none;font-size:inherit}.et-rte-content .et-rte-token{--_et-rte-token-accent: var(--et-theme-color-primary-solid, var(--et-surface-interaction-solid, currentColor));display:inline;padding-inline:var(--et-rich-text-editor-token-padding-inline);border-radius:var(--et-rich-text-editor-token-radius);background:color-mix(in srgb,var(--_et-rte-token-accent) 22%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--_et-rte-token-accent) 45%,transparent);color:var(--et-theme-color-ink-solid, inherit);font-weight:500;white-space:nowrap;-webkit-user-select:all;user-select:all;cursor:default}.et-rte-content .et-rte-token-prefix{margin-inline-end:1px;opacity:.65}.et-rte-content .et-rte-align-left{text-align:left}.et-rte-content .et-rte-align-center{text-align:center}.et-rte-content .et-rte-align-right{text-align:right}.et-rte-content .et-rte-align-justify{text-align:justify}.et-rte-content .et-rte-align-start{text-align:start}.et-rte-content .et-rte-align-end{text-align:end}}\n"] }]
         }] });
 /** @internal */
 const mountRichTextContentStyles = () => injectStyleManager().mount(RichTextContentStylesComponent);
@@ -50904,70 +50930,59 @@ class GridDebugComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: GridDebugComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: GridDebugComponent, isStandalone: true, selector: "et-grid-debug", inputs: { grid: { classPropertyName: "grid", publicName: "grid", isSignal: true, isRequired: true, transformFunction: null }, externalItems: { classPropertyName: "externalItems", publicName: "externalItems", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <details
-      style="font-family: monospace; font-size: 11px; border: 1px solid #d1d5db; border-radius: 4px; margin-top: 8px; background: #f9fafb; color: #111"
-    >
-      <summary
-        style="padding: 6px 10px; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; user-select: none"
-      >
-        <span style="font-weight: 700; color: #6b7280">et-grid-debug</span>
+    <details class="et-grid-debug-panel">
+      <summary class="et-grid-debug-summary">
+        <span class="et-grid-debug-title">et-grid-debug</span>
 
-        <span style="color: #6b7280">
-          bp: <strong style="color: #111827">{{ activeBreakpoint() }}</strong> &nbsp;·&nbsp; {{ containerWidth() }}px
-          &nbsp;·&nbsp; {{ items().length }} items
+        <span class="et-grid-debug-muted">
+          bp: <strong class="et-grid-debug-strong">{{ activeBreakpoint() }}</strong> &nbsp;·&nbsp;
+          {{ containerWidth() }}px &nbsp;·&nbsp; {{ items().length }} items
           @if (hasDrag()) {
-            &nbsp;·&nbsp; <span style="color: #d97706">⠿ dragging</span>
+            &nbsp;·&nbsp; <span class="et-grid-debug-warning">⠿ dragging</span>
           }
         </span>
 
         @if (issueCount() > 0) {
-          <span style="color: #dc2626; font-weight: 700"
-            >⚠ {{ issueCount() }} issue{{ issueCount() === 1 ? '' : 's' }}</span
-          >
+          <span class="et-grid-debug-issues">⚠ {{ issueCount() }} issue{{ issueCount() === 1 ? '' : 's' }}</span>
         }
 
-        <button
-          (click)="copyJson($event)"
-          style="margin-left: auto; padding: 2px 8px; border: 1px solid #d1d5db; border-radius: 3px; background: #fff; cursor: pointer; font-size: 11px; color: #374151"
-        >
-          Copy JSON
-        </button>
+        <button (click)="copyJson($event)" class="et-grid-debug-copy">Copy JSON</button>
 
         @if (copied()) {
-          <span style="color: #16a34a; font-size: 10px">✓ copied</span>
+          <span class="et-grid-debug-copied">✓ copied</span>
         }
       </summary>
 
-      <div style="padding: 8px 10px; overflow-x: auto; border-top: 1px solid #e5e7eb">
+      <div class="et-grid-debug-body">
         <!-- Breakpoint legend -->
-        <div style="display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap">
+        <div class="et-grid-debug-legend">
           @for (bp of breakpoints(); track bp.name) {
             <span
               [style.fontWeight]="bp.name === activeBreakpoint() ? '700' : '400'"
               [style.color]="bp.name === activeBreakpoint() ? '#1d4ed8' : '#9ca3af'"
-              style="padding: 1px 7px; border: 1px solid currentColor; border-radius: 99px"
+              class="et-grid-debug-breakpoint"
               >{{ bp.name }}&nbsp;{{ bp.columns }}col&nbsp;≥{{ bp.minWidth }}px</span
             >
           }
         </div>
 
         <!-- Layout table -->
-        <table style="border-collapse: collapse; white-space: nowrap">
+        <table class="et-grid-debug-table">
           <thead>
-            <tr style="background: #f3f4f6">
-              <th style="padding: 3px 8px; text-align: left; border: 1px solid #e5e7eb">id</th>
-              <th style="padding: 3px 8px; text-align: left; border: 1px solid #e5e7eb">type</th>
+            <tr class="et-grid-debug-head-row">
+              <th class="et-grid-debug-cell et-grid-debug-cell-start">id</th>
+              <th class="et-grid-debug-cell et-grid-debug-cell-start">type</th>
               @for (bp of breakpoints(); track bp.name) {
                 <th
                   [style.background]="bp.name === activeBreakpoint() ? '#dbeafe' : '#f3f4f6'"
-                  style="padding: 3px 8px; text-align: center; border: 1px solid #e5e7eb"
+                  class="et-grid-debug-cell"
                 >
                   {{ bp.name }}{{ hasExternal() ? ' int' : '' }}
                 </th>
                 @if (hasExternal()) {
                   <th
                     [style.background]="bp.name === activeBreakpoint() ? '#dbeafe' : '#f3f4f6'"
-                    style="padding: 3px 8px; text-align: center; border: 1px solid #e5e7eb; opacity: .65"
+                    class="et-grid-debug-cell et-grid-debug-cell-ext"
                   >
                     {{ bp.name }} ext
                   </th>
@@ -50978,13 +50993,13 @@ class GridDebugComponent {
           <tbody>
             @for (row of rows(); track row.id) {
               <tr>
-                <td style="padding: 3px 8px; border: 1px solid #e5e7eb; color: #6b7280">{{ row.id }}</td>
-                <td style="padding: 3px 8px; border: 1px solid #e5e7eb; color: #9ca3af">{{ row.type }}</td>
+                <td class="et-grid-debug-cell et-grid-debug-cell-start et-grid-debug-id">{{ row.id }}</td>
+                <td class="et-grid-debug-cell et-grid-debug-cell-start et-grid-debug-type">{{ row.type }}</td>
                 @for (cell of row.cells; track cell.bp) {
                   <td
                     [style.color]="cell.intMissing ? '#dc2626' : '#111'"
                     [title]="cell.intMissing ? 'MISSING - layout.' + cell.bp + ' undefined in internal state' : ''"
-                    style="padding: 3px 8px; border: 1px solid #e5e7eb; text-align: center"
+                    class="et-grid-debug-cell"
                   >
                     {{ fmtPos(cell.int) }}
                   </td>
@@ -50992,7 +51007,7 @@ class GridDebugComponent {
                     <td
                       [style.color]="cell.extMissing ? '#dc2626' : cell.mismatch ? '#d97706' : '#9ca3af'"
                       [title]="cell.mismatch ? 'MISMATCH - ext=' + fmtPos(cell.ext) + ' int=' + fmtPos(cell.int) : ''"
-                      style="padding: 3px 8px; border: 1px solid #e5e7eb; text-align: center"
+                      class="et-grid-debug-cell"
                     >
                       {{ fmtPos(cell.ext) }}
                     </td>
@@ -51004,85 +51019,72 @@ class GridDebugComponent {
         </table>
 
         @if (hasExternal()) {
-          <p style="margin-top: 6px; color: #9ca3af; font-size: 10px">
+          <p class="et-grid-debug-note">
             int = grid.currentItems() (internal) &nbsp;·&nbsp; ext = externalItems input &nbsp;·&nbsp;
-            <span style="color: #dc2626">red = undefined</span> &nbsp;·&nbsp;
-            <span style="color: #d97706">orange = mismatch</span>
+            <span class="et-grid-debug-error">red = undefined</span> &nbsp;·&nbsp;
+            <span class="et-grid-debug-warning">orange = mismatch</span>
           </p>
         }
       </div>
     </details>
-  `, isInline: true, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, styles: ["@layer components{.et-grid-debug-panel{font-family:monospace;font-size:11px;border:1px solid #d1d5db;border-radius:4px;margin-top:8px;background:#f9fafb;color:#111}.et-grid-debug-summary{padding:6px 10px;cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;-webkit-user-select:none;user-select:none}.et-grid-debug-title{font-weight:700;color:#6b7280}.et-grid-debug-muted{color:#6b7280}.et-grid-debug-strong{color:#111827}.et-grid-debug-warning{color:#d97706}.et-grid-debug-error{color:#dc2626}.et-grid-debug-issues{color:#dc2626;font-weight:700}.et-grid-debug-copy{margin-left:auto;padding:2px 8px;border:1px solid #d1d5db;border-radius:3px;background:#fff;cursor:pointer;font-size:11px;color:#374151}.et-grid-debug-copied{color:#16a34a;font-size:10px}.et-grid-debug-body{padding:8px 10px;overflow-x:auto;border-top:1px solid #e5e7eb}.et-grid-debug-legend{display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap}.et-grid-debug-breakpoint{padding:1px 7px;border:1px solid currentColor;border-radius:99px}.et-grid-debug-table{border-collapse:collapse;white-space:nowrap}.et-grid-debug-head-row{background:#f3f4f6}.et-grid-debug-cell{padding:3px 8px;border:1px solid #e5e7eb;text-align:center}.et-grid-debug-cell-start{text-align:left}.et-grid-debug-cell-ext{opacity:.65}.et-grid-debug-id{color:#6b7280}.et-grid-debug-type{color:#9ca3af}.et-grid-debug-note{margin-top:6px;color:#9ca3af;font-size:10px}}\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: GridDebugComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'et-grid-debug',
-                    template: `
-    <details
-      style="font-family: monospace; font-size: 11px; border: 1px solid #d1d5db; border-radius: 4px; margin-top: 8px; background: #f9fafb; color: #111"
-    >
-      <summary
-        style="padding: 6px 10px; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; user-select: none"
-      >
-        <span style="font-weight: 700; color: #6b7280">et-grid-debug</span>
-
-        <span style="color: #6b7280">
-          bp: <strong style="color: #111827">{{ activeBreakpoint() }}</strong> &nbsp;·&nbsp; {{ containerWidth() }}px
-          &nbsp;·&nbsp; {{ items().length }} items
+            args: [{ selector: 'et-grid-debug', template: `
+    <details class="et-grid-debug-panel">
+      <summary class="et-grid-debug-summary">
+        <span class="et-grid-debug-title">et-grid-debug</span>
+
+        <span class="et-grid-debug-muted">
+          bp: <strong class="et-grid-debug-strong">{{ activeBreakpoint() }}</strong> &nbsp;·&nbsp;
+          {{ containerWidth() }}px &nbsp;·&nbsp; {{ items().length }} items
           @if (hasDrag()) {
-            &nbsp;·&nbsp; <span style="color: #d97706">⠿ dragging</span>
+            &nbsp;·&nbsp; <span class="et-grid-debug-warning">⠿ dragging</span>
           }
         </span>
 
         @if (issueCount() > 0) {
-          <span style="color: #dc2626; font-weight: 700"
-            >⚠ {{ issueCount() }} issue{{ issueCount() === 1 ? '' : 's' }}</span
-          >
+          <span class="et-grid-debug-issues">⚠ {{ issueCount() }} issue{{ issueCount() === 1 ? '' : 's' }}</span>
         }
 
-        <button
-          (click)="copyJson($event)"
-          style="margin-left: auto; padding: 2px 8px; border: 1px solid #d1d5db; border-radius: 3px; background: #fff; cursor: pointer; font-size: 11px; color: #374151"
-        >
-          Copy JSON
-        </button>
+        <button (click)="copyJson($event)" class="et-grid-debug-copy">Copy JSON</button>
 
         @if (copied()) {
-          <span style="color: #16a34a; font-size: 10px">✓ copied</span>
+          <span class="et-grid-debug-copied">✓ copied</span>
         }
       </summary>
 
-      <div style="padding: 8px 10px; overflow-x: auto; border-top: 1px solid #e5e7eb">
+      <div class="et-grid-debug-body">
         <!-- Breakpoint legend -->
-        <div style="display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap">
+        <div class="et-grid-debug-legend">
           @for (bp of breakpoints(); track bp.name) {
             <span
               [style.fontWeight]="bp.name === activeBreakpoint() ? '700' : '400'"
               [style.color]="bp.name === activeBreakpoint() ? '#1d4ed8' : '#9ca3af'"
-              style="padding: 1px 7px; border: 1px solid currentColor; border-radius: 99px"
+              class="et-grid-debug-breakpoint"
               >{{ bp.name }}&nbsp;{{ bp.columns }}col&nbsp;≥{{ bp.minWidth }}px</span
             >
           }
         </div>
 
         <!-- Layout table -->
-        <table style="border-collapse: collapse; white-space: nowrap">
+        <table class="et-grid-debug-table">
           <thead>
-            <tr style="background: #f3f4f6">
-              <th style="padding: 3px 8px; text-align: left; border: 1px solid #e5e7eb">id</th>
-              <th style="padding: 3px 8px; text-align: left; border: 1px solid #e5e7eb">type</th>
+            <tr class="et-grid-debug-head-row">
+              <th class="et-grid-debug-cell et-grid-debug-cell-start">id</th>
+              <th class="et-grid-debug-cell et-grid-debug-cell-start">type</th>
               @for (bp of breakpoints(); track bp.name) {
                 <th
                   [style.background]="bp.name === activeBreakpoint() ? '#dbeafe' : '#f3f4f6'"
-                  style="padding: 3px 8px; text-align: center; border: 1px solid #e5e7eb"
+                  class="et-grid-debug-cell"
                 >
                   {{ bp.name }}{{ hasExternal() ? ' int' : '' }}
                 </th>
                 @if (hasExternal()) {
                   <th
                     [style.background]="bp.name === activeBreakpoint() ? '#dbeafe' : '#f3f4f6'"
-                    style="padding: 3px 8px; text-align: center; border: 1px solid #e5e7eb; opacity: .65"
+                    class="et-grid-debug-cell et-grid-debug-cell-ext"
                   >
                     {{ bp.name }} ext
                   </th>
@@ -51093,13 +51095,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
           <tbody>
             @for (row of rows(); track row.id) {
               <tr>
-                <td style="padding: 3px 8px; border: 1px solid #e5e7eb; color: #6b7280">{{ row.id }}</td>
-                <td style="padding: 3px 8px; border: 1px solid #e5e7eb; color: #9ca3af">{{ row.type }}</td>
+                <td class="et-grid-debug-cell et-grid-debug-cell-start et-grid-debug-id">{{ row.id }}</td>
+                <td class="et-grid-debug-cell et-grid-debug-cell-start et-grid-debug-type">{{ row.type }}</td>
                 @for (cell of row.cells; track cell.bp) {
                   <td
                     [style.color]="cell.intMissing ? '#dc2626' : '#111'"
                     [title]="cell.intMissing ? 'MISSING - layout.' + cell.bp + ' undefined in internal state' : ''"
-                    style="padding: 3px 8px; border: 1px solid #e5e7eb; text-align: center"
+                    class="et-grid-debug-cell"
                   >
                     {{ fmtPos(cell.int) }}
                   </td>
@@ -51107,7 +51109,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                     <td
                       [style.color]="cell.extMissing ? '#dc2626' : cell.mismatch ? '#d97706' : '#9ca3af'"
                       [title]="cell.mismatch ? 'MISMATCH - ext=' + fmtPos(cell.ext) + ' int=' + fmtPos(cell.int) : ''"
-                      style="padding: 3px 8px; border: 1px solid #e5e7eb; text-align: center"
+                      class="et-grid-debug-cell"
                     >
                       {{ fmtPos(cell.ext) }}
                     </td>
@@ -51119,17 +51121,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
         </table>
 
         @if (hasExternal()) {
-          <p style="margin-top: 6px; color: #9ca3af; font-size: 10px">
+          <p class="et-grid-debug-note">
             int = grid.currentItems() (internal) &nbsp;·&nbsp; ext = externalItems input &nbsp;·&nbsp;
-            <span style="color: #dc2626">red = undefined</span> &nbsp;·&nbsp;
-            <span style="color: #d97706">orange = mismatch</span>
+            <span class="et-grid-debug-error">red = undefined</span> &nbsp;·&nbsp;
+            <span class="et-grid-debug-warning">orange = mismatch</span>
           </p>
         }
       </div>
     </details>
-  `,
-                    encapsulation: ViewEncapsulation.None,
-                }]
+  `, encapsulation: ViewEncapsulation.None, styles: ["@layer components{.et-grid-debug-panel{font-family:monospace;font-size:11px;border:1px solid #d1d5db;border-radius:4px;margin-top:8px;background:#f9fafb;color:#111}.et-grid-debug-summary{padding:6px 10px;cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;-webkit-user-select:none;user-select:none}.et-grid-debug-title{font-weight:700;color:#6b7280}.et-grid-debug-muted{color:#6b7280}.et-grid-debug-strong{color:#111827}.et-grid-debug-warning{color:#d97706}.et-grid-debug-error{color:#dc2626}.et-grid-debug-issues{color:#dc2626;font-weight:700}.et-grid-debug-copy{margin-left:auto;padding:2px 8px;border:1px solid #d1d5db;border-radius:3px;background:#fff;cursor:pointer;font-size:11px;color:#374151}.et-grid-debug-copied{color:#16a34a;font-size:10px}.et-grid-debug-body{padding:8px 10px;overflow-x:auto;border-top:1px solid #e5e7eb}.et-grid-debug-legend{display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap}.et-grid-debug-breakpoint{padding:1px 7px;border:1px solid currentColor;border-radius:99px}.et-grid-debug-table{border-collapse:collapse;white-space:nowrap}.et-grid-debug-head-row{background:#f3f4f6}.et-grid-debug-cell{padding:3px 8px;border:1px solid #e5e7eb;text-align:center}.et-grid-debug-cell-start{text-align:left}.et-grid-debug-cell-ext{opacity:.65}.et-grid-debug-id{color:#6b7280}.et-grid-debug-type{color:#9ca3af}.et-grid-debug-note{margin-top:6px;color:#9ca3af;font-size:10px}}\n"] }]
         }], propDecorators: { grid: [{ type: i0.Input, args: [{ isSignal: true, alias: "grid", required: true }] }], externalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "externalItems", required: false }] }] } });
 
 /** The grid, its items, the item toolbar and the default item actions. */
@@ -60222,7 +60222,7 @@ class DailymotionPlayerComponent {
         this.player = inject(DAILYMOTION_PLAYER_TOKEN);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: DailymotionPlayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: DailymotionPlayerComponent, isStandalone: true, selector: "et-dailymotion-player", host: { styleAttribute: "display: block; width: 100%; height: 100%", classAttribute: "et-dailymotion-player et-stream-player" }, hostDirectives: [{ directive: DailymotionPlayerParamsDirective, inputs: ["videoId", "videoId", "startTime", "startTime", "width", "width", "height", "height"] }, { directive: DailymotionPlayerDirective }], ngImport: i0, template: '', isInline: true, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: DailymotionPlayerComponent, isStandalone: true, selector: "et-dailymotion-player", host: { properties: { "style.display": "\"block\"", "style.width": "\"100%\"", "style.height": "\"100%\"" }, classAttribute: "et-dailymotion-player et-stream-player" }, hostDirectives: [{ directive: DailymotionPlayerParamsDirective, inputs: ["videoId", "videoId", "startTime", "startTime", "width", "width", "height", "height"] }, { directive: DailymotionPlayerDirective }], ngImport: i0, template: '', isInline: true, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: DailymotionPlayerComponent, decorators: [{
             type: Component,
@@ -60239,7 +60239,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                     ],
                     host: {
                         class: 'et-dailymotion-player et-stream-player',
-                        style: 'display: block; width: 100%; height: 100%',
+                        '[style.display]': '"block"',
+                        '[style.width]': '"100%"',
+                        '[style.height]': '"100%"',
                     },
                 }]
         }] });
@@ -60307,6 +60309,7 @@ const STREAM_SCRIPT_LOADER_DEF = /* @__PURE__ */ defineRootProvider(() => {
     const cache = new Map();
     const mountedScripts = new Set();
     const renderer = injectRenderer();
+    const nonce = inject(CSP_NONCE, { optional: true });
     const load = (src) => {
         const cached = cache.get(src);
         if (cached)
@@ -60321,6 +60324,8 @@ const STREAM_SCRIPT_LOADER_DEF = /* @__PURE__ */ defineRootProvider(() => {
             const script = renderer.createElement('script');
             script.src = src;
             script.async = true;
+            if (nonce)
+                renderer.setAttribute(script, 'nonce', nonce);
             renderer.listen(script, 'load', () => {
                 subscriber.next();
                 subscriber.complete();
@@ -60510,7 +60515,7 @@ class FacebookPlayerComponent {
         this.player = inject(FACEBOOK_PLAYER_TOKEN);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: FacebookPlayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: FacebookPlayerComponent, isStandalone: true, selector: "et-facebook-player", host: { styleAttribute: "display: block; width: 100%; height: 100%", classAttribute: "et-facebook-player et-stream-player" }, hostDirectives: [{ directive: FacebookPlayerParamsDirective, inputs: ["videoId", "videoId", "width", "width", "height", "height"] }, { directive: FacebookPlayerDirective }], ngImport: i0, template: '', isInline: true, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: FacebookPlayerComponent, isStandalone: true, selector: "et-facebook-player", host: { properties: { "style.display": "\"block\"", "style.width": "\"100%\"", "style.height": "\"100%\"" }, classAttribute: "et-facebook-player et-stream-player" }, hostDirectives: [{ directive: FacebookPlayerParamsDirective, inputs: ["videoId", "videoId", "width", "width", "height", "height"] }, { directive: FacebookPlayerDirective }], ngImport: i0, template: '', isInline: true, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: FacebookPlayerComponent, decorators: [{
             type: Component,
@@ -60527,7 +60532,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                     ],
                     host: {
                         class: 'et-facebook-player et-stream-player',
-                        style: 'display: block; width: 100%; height: 100%',
+                        '[style.display]': '"block"',
+                        '[style.width]': '"100%"',
+                        '[style.height]': '"100%"',
                     },
                 }]
         }] });
@@ -60695,7 +60702,7 @@ class KickPlayerComponent {
         this.player = inject(KICK_PLAYER_TOKEN);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: KickPlayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: KickPlayerComponent, isStandalone: true, selector: "et-kick-player", host: { styleAttribute: "display: block; width: 100%; height: 100%", classAttribute: "et-kick-player et-stream-player" }, hostDirectives: [{ directive: KickPlayerParamsDirective, inputs: ["channel", "channel", "width", "width", "height", "height", "muted", "muted"] }, { directive: KickPlayerDirective }], ngImport: i0, template: '', isInline: true, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: KickPlayerComponent, isStandalone: true, selector: "et-kick-player", host: { properties: { "style.display": "\"block\"", "style.width": "\"100%\"", "style.height": "\"100%\"" }, classAttribute: "et-kick-player et-stream-player" }, hostDirectives: [{ directive: KickPlayerParamsDirective, inputs: ["channel", "channel", "width", "width", "height", "height", "muted", "muted"] }, { directive: KickPlayerDirective }], ngImport: i0, template: '', isInline: true, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: KickPlayerComponent, decorators: [{
             type: Component,
@@ -60712,7 +60719,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                     ],
                     host: {
                         class: 'et-kick-player et-stream-player',
-                        style: 'display: block; width: 100%; height: 100%',
+                        '[style.display]': '"block"',
+                        '[style.width]': '"100%"',
+                        '[style.height]': '"100%"',
                     },
                 }]
         }] });
@@ -60895,7 +60904,7 @@ class SoopPlayerComponent {
         this.player = inject(SOOP_PLAYER_TOKEN);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: SoopPlayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: SoopPlayerComponent, isStandalone: true, selector: "et-soop-player", host: { styleAttribute: "display: block; width: 100%; height: 100%", classAttribute: "et-soop-player et-stream-player" }, hostDirectives: [{ directive: SoopPlayerParamsDirective, inputs: ["userId", "userId", "videoId", "videoId", "width", "width", "height", "height"] }, { directive: SoopPlayerDirective }], ngImport: i0, template: '', isInline: true, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: SoopPlayerComponent, isStandalone: true, selector: "et-soop-player", host: { properties: { "style.display": "\"block\"", "style.width": "\"100%\"", "style.height": "\"100%\"" }, classAttribute: "et-soop-player et-stream-player" }, hostDirectives: [{ directive: SoopPlayerParamsDirective, inputs: ["userId", "userId", "videoId", "videoId", "width", "width", "height", "height"] }, { directive: SoopPlayerDirective }], ngImport: i0, template: '', isInline: true, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: SoopPlayerComponent, decorators: [{
             type: Component,
@@ -60912,7 +60921,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                     ],
                     host: {
                         class: 'et-soop-player et-stream-player',
-                        style: 'display: block; width: 100%; height: 100%',
+                        '[style.display]': '"block"',
+                        '[style.width]': '"100%"',
+                        '[style.height]': '"100%"',
                     },
                 }]
         }] });
@@ -61128,7 +61139,7 @@ class TikTokPlayerComponent {
         this.player = inject(TIKTOK_PLAYER_TOKEN);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TikTokPlayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: TikTokPlayerComponent, isStandalone: true, selector: "et-tiktok-player", host: { styleAttribute: "display: block; width: 100%; height: 100%", classAttribute: "et-tiktok-player et-stream-player" }, hostDirectives: [{ directive: TikTokPlayerParamsDirective, inputs: ["videoId", "videoId", "width", "width", "height", "height"] }, { directive: TikTokPlayerDirective }], ngImport: i0, template: '', isInline: true, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: TikTokPlayerComponent, isStandalone: true, selector: "et-tiktok-player", host: { properties: { "style.display": "\"block\"", "style.width": "\"100%\"", "style.height": "\"100%\"" }, classAttribute: "et-tiktok-player et-stream-player" }, hostDirectives: [{ directive: TikTokPlayerParamsDirective, inputs: ["videoId", "videoId", "width", "width", "height", "height"] }, { directive: TikTokPlayerDirective }], ngImport: i0, template: '', isInline: true, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TikTokPlayerComponent, decorators: [{
             type: Component,
@@ -61145,7 +61156,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                     ],
                     host: {
                         class: 'et-tiktok-player et-stream-player',
-                        style: 'display: block; width: 100%; height: 100%',
+                        '[style.display]': '"block"',
+                        '[style.width]': '"100%"',
+                        '[style.height]': '"100%"',
                     },
                 }]
         }] });
@@ -61418,7 +61431,7 @@ class TwitchPlayerComponent {
         this.player = inject(TWITCH_PLAYER_TOKEN);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TwitchPlayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: TwitchPlayerComponent, isStandalone: true, selector: "et-twitch-player", host: { styleAttribute: "display: block; width: 100%; height: 100%", classAttribute: "et-twitch-player et-stream-player" }, hostDirectives: [{ directive: TwitchPlayerParamsDirective, inputs: ["src", "src", "width", "width", "height", "height", "autoplay", "autoplay", "chat", "chat", "startTime", "startTime"] }, { directive: TwitchPlayerDirective }], ngImport: i0, template: '', isInline: true, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: TwitchPlayerComponent, isStandalone: true, selector: "et-twitch-player", host: { properties: { "style.display": "\"block\"", "style.width": "\"100%\"", "style.height": "\"100%\"" }, classAttribute: "et-twitch-player et-stream-player" }, hostDirectives: [{ directive: TwitchPlayerParamsDirective, inputs: ["src", "src", "width", "width", "height", "height", "autoplay", "autoplay", "chat", "chat", "startTime", "startTime"] }, { directive: TwitchPlayerDirective }], ngImport: i0, template: '', isInline: true, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TwitchPlayerComponent, decorators: [{
             type: Component,
@@ -61435,7 +61448,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                     ],
                     host: {
                         class: 'et-twitch-player et-stream-player',
-                        style: 'display: block; width: 100%; height: 100%',
+                        '[style.display]': '"block"',
+                        '[style.width]': '"100%"',
+                        '[style.height]': '"100%"',
                     },
                 }]
         }] });
@@ -61666,7 +61681,7 @@ class VimeoPlayerComponent {
         this.player = inject(VIMEO_PLAYER_TOKEN);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: VimeoPlayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: VimeoPlayerComponent, isStandalone: true, selector: "et-vimeo-player", host: { styleAttribute: "display: block; width: 100%; height: 100%", classAttribute: "et-vimeo-player et-stream-player" }, hostDirectives: [{ directive: VimeoPlayerParamsDirective, inputs: ["videoId", "videoId", "startTime", "startTime", "width", "width", "height", "height"] }, { directive: VimeoPlayerDirective }], ngImport: i0, template: '', isInline: true, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: VimeoPlayerComponent, isStandalone: true, selector: "et-vimeo-player", host: { properties: { "style.display": "\"block\"", "style.width": "\"100%\"", "style.height": "\"100%\"" }, classAttribute: "et-vimeo-player et-stream-player" }, hostDirectives: [{ directive: VimeoPlayerParamsDirective, inputs: ["videoId", "videoId", "startTime", "startTime", "width", "width", "height", "height"] }, { directive: VimeoPlayerDirective }], ngImport: i0, template: '', isInline: true, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: VimeoPlayerComponent, decorators: [{
             type: Component,
@@ -61683,7 +61698,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                     ],
                     host: {
                         class: 'et-vimeo-player et-stream-player',
-                        style: 'display: block; width: 100%; height: 100%',
+                        '[style.display]': '"block"',
+                        '[style.width]': '"100%"',
+                        '[style.height]': '"100%"',
                     },
                 }]
         }] });
@@ -61900,7 +61917,7 @@ class YoutubePlayerComponent {
         this.player = inject(YOUTUBE_PLAYER_TOKEN);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: YoutubePlayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: YoutubePlayerComponent, isStandalone: true, selector: "et-youtube-player", host: { styleAttribute: "display: block; width: 100%; height: 100%", classAttribute: "et-youtube-player et-stream-player" }, hostDirectives: [{ directive: YoutubePlayerParamsDirective, inputs: ["videoId", "videoId", "startTime", "startTime", "width", "width", "height", "height"] }, { directive: YoutubePlayerDirective }], ngImport: i0, template: '', isInline: true, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.6", type: YoutubePlayerComponent, isStandalone: true, selector: "et-youtube-player", host: { properties: { "style.display": "\"block\"", "style.width": "\"100%\"", "style.height": "\"100%\"" }, classAttribute: "et-youtube-player et-stream-player" }, hostDirectives: [{ directive: YoutubePlayerParamsDirective, inputs: ["videoId", "videoId", "startTime", "startTime", "width", "width", "height", "height"] }, { directive: YoutubePlayerDirective }], ngImport: i0, template: '', isInline: true, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: YoutubePlayerComponent, decorators: [{
             type: Component,
@@ -61917,7 +61934,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                     ],
                     host: {
                         class: 'et-youtube-player et-stream-player',
-                        style: 'display: block; width: 100%; height: 100%',
+                        '[style.display]': '"block"',
+                        '[style.width]': '"100%"',
+                        '[style.height]': '"100%"',
                     },
                 }]
         }] });
@@ -69121,7 +69140,7 @@ class TabComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.6", type: TabComponent, isStandalone: true, selector: "et-tab", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "display: none", classAttribute: "et-tab" }, queries: [{ propertyName: "customLabel", first: true, predicate: TabLabelDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "implicitLabelRef", first: true, predicate: ["implicitLabel"], descendants: true, isSignal: true }, { propertyName: "contentRef", first: true, predicate: ["contentTpl"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.6", type: TabComponent, isStandalone: true, selector: "et-tab", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.display": "\"none\"" }, classAttribute: "et-tab" }, queries: [{ propertyName: "customLabel", first: true, predicate: TabLabelDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "implicitLabelRef", first: true, predicate: ["implicitLabel"], descendants: true, isSignal: true }, { propertyName: "contentRef", first: true, predicate: ["contentTpl"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <ng-template #implicitLabel>{{ label() }}</ng-template>
     <ng-template #contentTpl>
       <ng-content />
@@ -69141,7 +69160,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImpor
                     encapsulation: ViewEncapsulation.None,
                     host: {
                         class: 'et-tab',
-                        style: 'display: none',
+                        '[style.display]': '"none"',
                     },
                 }]
         }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], customLabel: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TabLabelDirective), { isSignal: true }] }], implicitLabelRef: [{ type: i0.ViewChild, args: ['implicitLabel', { isSignal: true }] }], contentRef: [{ type: i0.ViewChild, args: ['contentTpl', { isSignal: true }] }] } });
@@ -70238,7 +70257,7 @@ const TREE_IMPORTS = [TreeComponent, TreeDirective, TreeNodeDirective, TreeNodeD
 
 // Generated from package.json by tools/scripts/generate-version.js - do not edit.
 /** The version of `@ethlete/components` this build was cut from. */
-const COMPONENTS_VERSION = '1.0.0-next.61';
+const COMPONENTS_VERSION = '1.0.0-next.62';
 
 /**
  * Generated bundle index. Do not edit.