@ng-prism/core 21.5.1 → 21.5.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -148,7 +148,7 @@ export class PrismComponentHeadComponent {
148
148
  } if (rf & 2) {
149
149
  let tmp_0_0;
150
150
  i0.ɵɵconditional((tmp_0_0 = ctx.comp()) ? 0 : -1, tmp_0_0);
151
- } }, dependencies: [PrismIconComponent, PrismStatComponent], styles: ["[_nghost-%COMP%] { display: block; flex-shrink: 0; }\n\n .comp-head[_ngcontent-%COMP%] {\n padding: 12px 28px;\n background: var(--prism-bg);\n border-bottom: 1px solid var(--prism-border);\n position: relative;\n }\n .comp-head[_ngcontent-%COMP%]::before {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: 6px;\n background: linear-gradient(180deg, var(--prism-primary-from) 0%, #ec4899 50%, var(--prism-primary-to) 100%);\n }\n\n .comp-head-top[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: 16px;\n }\n\n .comp-crumb[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: var(--fs-sm);\n color: var(--prism-text-ghost);\n margin-bottom: 6px;\n font-weight: 500;\n letter-spacing: 0.04em;\n text-transform: uppercase;\n }\n .comp-crumb[_ngcontent-%COMP%] prism-icon[_ngcontent-%COMP%] { opacity: 0.6; }\n\n .comp-title[_ngcontent-%COMP%] {\n margin: 0;\n font-size: var(--fs-2xl);\n font-weight: 700;\n letter-spacing: -0.02em;\n color: var(--prism-text);\n display: flex;\n align-items: center;\n gap: 10px;\n }\n\n .comp-selector[_ngcontent-%COMP%] {\n font-family: var(--font-mono);\n font-size: 12px;\n color: var(--prism-primary);\n padding: 3px 8px;\n border-radius: var(--radius-sm);\n background: color-mix(in srgb, var(--prism-primary) 10%, transparent);\n border: 1px solid color-mix(in srgb, var(--prism-primary) 20%, transparent);\n font-weight: 500;\n }\n\n .comp-desc[_ngcontent-%COMP%] {\n margin: 6px 0 0;\n font-size: var(--fs-lg);\n color: var(--prism-text-2);\n max-width: 72ch;\n line-height: 1.55;\n }\n\n .comp-tags[_ngcontent-%COMP%] {\n margin-top: 10px;\n display: flex;\n gap: 6px;\n flex-wrap: wrap;\n }\n .comp-tag[_ngcontent-%COMP%] {\n padding: 2px 8px;\n font-size: 11px;\n font-weight: 500;\n border-radius: var(--radius-xs);\n background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n color: var(--prism-primary);\n border: 1px solid color-mix(in srgb, var(--prism-primary) 20%, transparent);\n }\n\n .comp-head-stats[_ngcontent-%COMP%] {\n display: flex;\n gap: 18px;\n flex-shrink: 0;\n }"], changeDetection: 0 });
151
+ } }, dependencies: [PrismIconComponent, PrismStatComponent], styles: ["[_nghost-%COMP%] { display: block; flex-shrink: 0; }\n\n .comp-head[_ngcontent-%COMP%] {\n padding: 12px 28px;\n background: var(--prism-bg);\n border-bottom: 1px solid var(--prism-border);\n position: relative;\n }\n .comp-head[_ngcontent-%COMP%]::before {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: 6px;\n background: linear-gradient(180deg, var(--prism-primary-from) 0%, var(--prism-accent) 50%, var(--prism-primary-to) 100%);\n }\n\n .comp-head-top[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: 16px;\n }\n\n .comp-crumb[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: var(--fs-sm);\n color: var(--prism-text-ghost);\n margin-bottom: 6px;\n font-weight: 500;\n letter-spacing: 0.04em;\n text-transform: uppercase;\n }\n .comp-crumb[_ngcontent-%COMP%] prism-icon[_ngcontent-%COMP%] { opacity: 0.6; }\n\n .comp-title[_ngcontent-%COMP%] {\n margin: 0;\n font-size: var(--fs-2xl);\n font-weight: 700;\n letter-spacing: -0.02em;\n color: var(--prism-text);\n display: flex;\n align-items: center;\n gap: 10px;\n }\n\n .comp-selector[_ngcontent-%COMP%] {\n font-family: var(--font-mono);\n font-size: 12px;\n color: var(--prism-primary);\n padding: 3px 8px;\n border-radius: var(--radius-sm);\n background: color-mix(in srgb, var(--prism-primary) 10%, transparent);\n border: 1px solid color-mix(in srgb, var(--prism-primary) 20%, transparent);\n font-weight: 500;\n }\n\n .comp-desc[_ngcontent-%COMP%] {\n margin: 6px 0 0;\n font-size: var(--fs-lg);\n color: var(--prism-text-2);\n max-width: 72ch;\n line-height: 1.55;\n }\n\n .comp-tags[_ngcontent-%COMP%] {\n margin-top: 10px;\n display: flex;\n gap: 6px;\n flex-wrap: wrap;\n }\n .comp-tag[_ngcontent-%COMP%] {\n padding: 2px 8px;\n font-size: 11px;\n font-weight: 500;\n border-radius: var(--radius-xs);\n background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n color: var(--prism-primary);\n border: 1px solid color-mix(in srgb, var(--prism-primary) 20%, transparent);\n }\n\n .comp-head-stats[_ngcontent-%COMP%] {\n display: flex;\n gap: 18px;\n flex-shrink: 0;\n }"], changeDetection: 0 });
152
152
  }
153
153
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismComponentHeadComponent, [{
154
154
  type: Component,
@@ -202,6 +202,6 @@ export class PrismComponentHeadComponent {
202
202
  </div>
203
203
  </section>
204
204
  }
205
- `, styles: ["\n :host { display: block; flex-shrink: 0; }\n\n .comp-head {\n padding: 12px 28px;\n background: var(--prism-bg);\n border-bottom: 1px solid var(--prism-border);\n position: relative;\n }\n .comp-head::before {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: 6px;\n background: linear-gradient(180deg, var(--prism-primary-from) 0%, #ec4899 50%, var(--prism-primary-to) 100%);\n }\n\n .comp-head-top {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: 16px;\n }\n\n .comp-crumb {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: var(--fs-sm);\n color: var(--prism-text-ghost);\n margin-bottom: 6px;\n font-weight: 500;\n letter-spacing: 0.04em;\n text-transform: uppercase;\n }\n .comp-crumb prism-icon { opacity: 0.6; }\n\n .comp-title {\n margin: 0;\n font-size: var(--fs-2xl);\n font-weight: 700;\n letter-spacing: -0.02em;\n color: var(--prism-text);\n display: flex;\n align-items: center;\n gap: 10px;\n }\n\n .comp-selector {\n font-family: var(--font-mono);\n font-size: 12px;\n color: var(--prism-primary);\n padding: 3px 8px;\n border-radius: var(--radius-sm);\n background: color-mix(in srgb, var(--prism-primary) 10%, transparent);\n border: 1px solid color-mix(in srgb, var(--prism-primary) 20%, transparent);\n font-weight: 500;\n }\n\n .comp-desc {\n margin: 6px 0 0;\n font-size: var(--fs-lg);\n color: var(--prism-text-2);\n max-width: 72ch;\n line-height: 1.55;\n }\n\n .comp-tags {\n margin-top: 10px;\n display: flex;\n gap: 6px;\n flex-wrap: wrap;\n }\n .comp-tag {\n padding: 2px 8px;\n font-size: 11px;\n font-weight: 500;\n border-radius: var(--radius-xs);\n background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n color: var(--prism-primary);\n border: 1px solid color-mix(in srgb, var(--prism-primary) 20%, transparent);\n }\n\n .comp-head-stats {\n display: flex;\n gap: 18px;\n flex-shrink: 0;\n }\n "] }]
205
+ `, styles: ["\n :host { display: block; flex-shrink: 0; }\n\n .comp-head {\n padding: 12px 28px;\n background: var(--prism-bg);\n border-bottom: 1px solid var(--prism-border);\n position: relative;\n }\n .comp-head::before {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: 6px;\n background: linear-gradient(180deg, var(--prism-primary-from) 0%, var(--prism-accent) 50%, var(--prism-primary-to) 100%);\n }\n\n .comp-head-top {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: 16px;\n }\n\n .comp-crumb {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: var(--fs-sm);\n color: var(--prism-text-ghost);\n margin-bottom: 6px;\n font-weight: 500;\n letter-spacing: 0.04em;\n text-transform: uppercase;\n }\n .comp-crumb prism-icon { opacity: 0.6; }\n\n .comp-title {\n margin: 0;\n font-size: var(--fs-2xl);\n font-weight: 700;\n letter-spacing: -0.02em;\n color: var(--prism-text);\n display: flex;\n align-items: center;\n gap: 10px;\n }\n\n .comp-selector {\n font-family: var(--font-mono);\n font-size: 12px;\n color: var(--prism-primary);\n padding: 3px 8px;\n border-radius: var(--radius-sm);\n background: color-mix(in srgb, var(--prism-primary) 10%, transparent);\n border: 1px solid color-mix(in srgb, var(--prism-primary) 20%, transparent);\n font-weight: 500;\n }\n\n .comp-desc {\n margin: 6px 0 0;\n font-size: var(--fs-lg);\n color: var(--prism-text-2);\n max-width: 72ch;\n line-height: 1.55;\n }\n\n .comp-tags {\n margin-top: 10px;\n display: flex;\n gap: 6px;\n flex-wrap: wrap;\n }\n .comp-tag {\n padding: 2px 8px;\n font-size: 11px;\n font-weight: 500;\n border-radius: var(--radius-xs);\n background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n color: var(--prism-primary);\n border: 1px solid color-mix(in srgb, var(--prism-primary) 20%, transparent);\n }\n\n .comp-head-stats {\n display: flex;\n gap: 18px;\n flex-shrink: 0;\n }\n "] }]
206
206
  }], null, null); })();
207
207
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismComponentHeadComponent, { className: "PrismComponentHeadComponent", filePath: "app/component-head/prism-component-head.component.ts", lineNumber: 160 }); })();
@@ -86,7 +86,7 @@ export class PrismHeaderComponent {
86
86
  i0.ɵɵattribute("aria-label", ctx.themeService.isDark() ? "Switch to light mode" : "Switch to dark mode")("aria-pressed", ctx.themeService.isDark());
87
87
  i0.ɵɵadvance();
88
88
  i0.ɵɵconditional(ctx.themeService.isDark() ? 10 : 11);
89
- } }, dependencies: [PrismIconComponent, PrismLayoutMenuComponent], styles: [".prism-header[_ngcontent-%COMP%] {\n height: 52px;\n display: grid;\n grid-template-columns: var(--sw, 264px) 1fr auto;\n align-items: center;\n padding: 0 14px 0 0;\n background: var(--prism-bg);\n border-bottom: 1px solid var(--prism-border);\n }\n\n .prism-header__brand[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 0 16px;\n cursor: pointer;\n }\n\n .prism-header__logo-default[_ngcontent-%COMP%] {\n width: 26px;\n height: 26px;\n flex: 0 0 26px;\n color: var(--prism-primary);\n filter: drop-shadow(0 0 8px var(--prism-glow-strong));\n }\n .prism-header__logo-default[_ngcontent-%COMP%] img[_ngcontent-%COMP%] { width: 30px; }\n\n .prism-header__logo-img[_ngcontent-%COMP%] {\n height: 26px;\n width: auto;\n object-fit: contain;\n }\n\n .prism-header__brand-text[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n line-height: 1.1;\n }\n\n .prism-header__brand-name[_ngcontent-%COMP%] {\n font-weight: 700;\n font-size: var(--fs-xl);\n letter-spacing: -0.01em;\n background: linear-gradient(90deg, #a78bfa, #ec4899 60%, #3b82f6);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n }\n\n .prism-header__brand-sub[_ngcontent-%COMP%] {\n font-family: var(--font-mono);\n font-size: var(--fs-xs);\n color: var(--prism-text-ghost);\n }\n\n .prism-header__cmdbar[_ngcontent-%COMP%] {\n max-width: 540px;\n width: 100%;\n justify-self: center;\n display: flex;\n align-items: center;\n gap: 10px;\n height: 32px;\n padding: 0 12px;\n background: var(--prism-input-bg);\n border: 1px solid var(--prism-border);\n border-radius: 8px;\n color: var(--prism-text-muted);\n font-size: var(--fs-lg);\n cursor: pointer;\n transition: border-color var(--dur-fast), background var(--dur-fast);\n }\n .prism-header__cmdbar[_ngcontent-%COMP%]:hover {\n border-color: var(--prism-border-strong);\n color: var(--prism-text-2);\n }\n\n .prism-header__cmdbar-text[_ngcontent-%COMP%] {\n flex: 1;\n text-align: left;\n }\n\n .prism-header__cmdbar-shortcut[_ngcontent-%COMP%] {\n display: flex;\n gap: 3px;\n }\n .prism-header__cmdbar-shortcut[_ngcontent-%COMP%] kbd[_ngcontent-%COMP%] {\n font-family: var(--font-mono);\n font-size: 10.5px;\n padding: 1px 5px;\n border-radius: 4px;\n background: var(--prism-input-bg);\n border: 1px solid var(--prism-border);\n color: var(--prism-text-muted);\n }\n\n .prism-header__actions[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 6px;\n }\n\n .prism-header__icon-btn[_ngcontent-%COMP%] {\n width: 32px;\n height: 32px;\n display: grid;\n place-items: center;\n border-radius: 8px;\n color: var(--prism-text-muted);\n background: none;\n border: none;\n cursor: pointer;\n position: relative;\n transition: all var(--dur-fast);\n }\n .prism-header__icon-btn[_ngcontent-%COMP%]:hover {\n background: var(--prism-input-bg);\n color: var(--prism-text);\n }\n\n [_ngcontent-%COMP%]:focus-visible {\n outline: 2px solid var(--prism-primary);\n outline-offset: 2px;\n }"], changeDetection: 0 });
89
+ } }, dependencies: [PrismIconComponent, PrismLayoutMenuComponent], styles: [".prism-header[_ngcontent-%COMP%] {\n height: 52px;\n display: grid;\n grid-template-columns: var(--sw, 264px) 1fr auto;\n align-items: center;\n padding: 0 14px 0 0;\n background: var(--prism-bg);\n border-bottom: 1px solid var(--prism-border);\n }\n\n .prism-header__brand[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 0 16px;\n cursor: pointer;\n }\n\n .prism-header__logo-default[_ngcontent-%COMP%] {\n width: 26px;\n height: 26px;\n flex: 0 0 26px;\n color: var(--prism-primary);\n filter: drop-shadow(0 0 8px var(--prism-glow-strong));\n }\n .prism-header__logo-default[_ngcontent-%COMP%] img[_ngcontent-%COMP%] { width: 30px; }\n\n .prism-header__logo-img[_ngcontent-%COMP%] {\n height: 26px;\n width: auto;\n object-fit: contain;\n }\n\n .prism-header__brand-text[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n line-height: 1.1;\n }\n\n .prism-header__brand-name[_ngcontent-%COMP%] {\n font-weight: 700;\n font-size: var(--fs-xl);\n letter-spacing: -0.01em;\n background: linear-gradient(90deg, var(--prism-primary), var(--prism-accent) 60%, var(--prism-primary-to));\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n }\n\n .prism-header__brand-sub[_ngcontent-%COMP%] {\n font-family: var(--font-mono);\n font-size: var(--fs-xs);\n color: var(--prism-text-ghost);\n }\n\n .prism-header__cmdbar[_ngcontent-%COMP%] {\n max-width: 540px;\n width: 100%;\n justify-self: center;\n display: flex;\n align-items: center;\n gap: 10px;\n height: 32px;\n padding: 0 12px;\n background: var(--prism-input-bg);\n border: 1px solid var(--prism-border);\n border-radius: 8px;\n color: var(--prism-text-muted);\n font-size: var(--fs-lg);\n cursor: pointer;\n transition: border-color var(--dur-fast), background var(--dur-fast);\n }\n .prism-header__cmdbar[_ngcontent-%COMP%]:hover {\n border-color: var(--prism-border-strong);\n color: var(--prism-text-2);\n }\n\n .prism-header__cmdbar-text[_ngcontent-%COMP%] {\n flex: 1;\n text-align: left;\n }\n\n .prism-header__cmdbar-shortcut[_ngcontent-%COMP%] {\n display: flex;\n gap: 3px;\n }\n .prism-header__cmdbar-shortcut[_ngcontent-%COMP%] kbd[_ngcontent-%COMP%] {\n font-family: var(--font-mono);\n font-size: 10.5px;\n padding: 1px 5px;\n border-radius: 4px;\n background: var(--prism-input-bg);\n border: 1px solid var(--prism-border);\n color: var(--prism-text-muted);\n }\n\n .prism-header__actions[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 6px;\n }\n\n .prism-header__icon-btn[_ngcontent-%COMP%] {\n width: 32px;\n height: 32px;\n display: grid;\n place-items: center;\n border-radius: 8px;\n color: var(--prism-text-muted);\n background: none;\n border: none;\n cursor: pointer;\n position: relative;\n transition: all var(--dur-fast);\n }\n .prism-header__icon-btn[_ngcontent-%COMP%]:hover {\n background: var(--prism-input-bg);\n color: var(--prism-text);\n }\n\n [_ngcontent-%COMP%]:focus-visible {\n outline: 2px solid var(--prism-primary);\n outline-offset: 2px;\n }"], changeDetection: 0 });
90
90
  }
91
91
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismHeaderComponent, [{
92
92
  type: Component,
@@ -135,7 +135,7 @@ export class PrismHeaderComponent {
135
135
  <prism-layout-menu />
136
136
  </div>
137
137
  </header>
138
- `, styles: ["\n .prism-header {\n height: 52px;\n display: grid;\n grid-template-columns: var(--sw, 264px) 1fr auto;\n align-items: center;\n padding: 0 14px 0 0;\n background: var(--prism-bg);\n border-bottom: 1px solid var(--prism-border);\n }\n\n .prism-header__brand {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 0 16px;\n cursor: pointer;\n }\n\n .prism-header__logo-default {\n width: 26px;\n height: 26px;\n flex: 0 0 26px;\n color: var(--prism-primary);\n filter: drop-shadow(0 0 8px var(--prism-glow-strong));\n }\n .prism-header__logo-default img { width: 30px; }\n\n .prism-header__logo-img {\n height: 26px;\n width: auto;\n object-fit: contain;\n }\n\n .prism-header__brand-text {\n display: flex;\n flex-direction: column;\n line-height: 1.1;\n }\n\n .prism-header__brand-name {\n font-weight: 700;\n font-size: var(--fs-xl);\n letter-spacing: -0.01em;\n background: linear-gradient(90deg, #a78bfa, #ec4899 60%, #3b82f6);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n }\n\n .prism-header__brand-sub {\n font-family: var(--font-mono);\n font-size: var(--fs-xs);\n color: var(--prism-text-ghost);\n }\n\n .prism-header__cmdbar {\n max-width: 540px;\n width: 100%;\n justify-self: center;\n display: flex;\n align-items: center;\n gap: 10px;\n height: 32px;\n padding: 0 12px;\n background: var(--prism-input-bg);\n border: 1px solid var(--prism-border);\n border-radius: 8px;\n color: var(--prism-text-muted);\n font-size: var(--fs-lg);\n cursor: pointer;\n transition: border-color var(--dur-fast), background var(--dur-fast);\n }\n .prism-header__cmdbar:hover {\n border-color: var(--prism-border-strong);\n color: var(--prism-text-2);\n }\n\n .prism-header__cmdbar-text {\n flex: 1;\n text-align: left;\n }\n\n .prism-header__cmdbar-shortcut {\n display: flex;\n gap: 3px;\n }\n .prism-header__cmdbar-shortcut kbd {\n font-family: var(--font-mono);\n font-size: 10.5px;\n padding: 1px 5px;\n border-radius: 4px;\n background: var(--prism-input-bg);\n border: 1px solid var(--prism-border);\n color: var(--prism-text-muted);\n }\n\n .prism-header__actions {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 6px;\n }\n\n .prism-header__icon-btn {\n width: 32px;\n height: 32px;\n display: grid;\n place-items: center;\n border-radius: 8px;\n color: var(--prism-text-muted);\n background: none;\n border: none;\n cursor: pointer;\n position: relative;\n transition: all var(--dur-fast);\n }\n .prism-header__icon-btn:hover {\n background: var(--prism-input-bg);\n color: var(--prism-text);\n }\n\n :focus-visible {\n outline: 2px solid var(--prism-primary);\n outline-offset: 2px;\n }\n "] }]
138
+ `, styles: ["\n .prism-header {\n height: 52px;\n display: grid;\n grid-template-columns: var(--sw, 264px) 1fr auto;\n align-items: center;\n padding: 0 14px 0 0;\n background: var(--prism-bg);\n border-bottom: 1px solid var(--prism-border);\n }\n\n .prism-header__brand {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 0 16px;\n cursor: pointer;\n }\n\n .prism-header__logo-default {\n width: 26px;\n height: 26px;\n flex: 0 0 26px;\n color: var(--prism-primary);\n filter: drop-shadow(0 0 8px var(--prism-glow-strong));\n }\n .prism-header__logo-default img { width: 30px; }\n\n .prism-header__logo-img {\n height: 26px;\n width: auto;\n object-fit: contain;\n }\n\n .prism-header__brand-text {\n display: flex;\n flex-direction: column;\n line-height: 1.1;\n }\n\n .prism-header__brand-name {\n font-weight: 700;\n font-size: var(--fs-xl);\n letter-spacing: -0.01em;\n background: linear-gradient(90deg, var(--prism-primary), var(--prism-accent) 60%, var(--prism-primary-to));\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n }\n\n .prism-header__brand-sub {\n font-family: var(--font-mono);\n font-size: var(--fs-xs);\n color: var(--prism-text-ghost);\n }\n\n .prism-header__cmdbar {\n max-width: 540px;\n width: 100%;\n justify-self: center;\n display: flex;\n align-items: center;\n gap: 10px;\n height: 32px;\n padding: 0 12px;\n background: var(--prism-input-bg);\n border: 1px solid var(--prism-border);\n border-radius: 8px;\n color: var(--prism-text-muted);\n font-size: var(--fs-lg);\n cursor: pointer;\n transition: border-color var(--dur-fast), background var(--dur-fast);\n }\n .prism-header__cmdbar:hover {\n border-color: var(--prism-border-strong);\n color: var(--prism-text-2);\n }\n\n .prism-header__cmdbar-text {\n flex: 1;\n text-align: left;\n }\n\n .prism-header__cmdbar-shortcut {\n display: flex;\n gap: 3px;\n }\n .prism-header__cmdbar-shortcut kbd {\n font-family: var(--font-mono);\n font-size: 10.5px;\n padding: 1px 5px;\n border-radius: 4px;\n background: var(--prism-input-bg);\n border: 1px solid var(--prism-border);\n color: var(--prism-text-muted);\n }\n\n .prism-header__actions {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 6px;\n }\n\n .prism-header__icon-btn {\n width: 32px;\n height: 32px;\n display: grid;\n place-items: center;\n border-radius: 8px;\n color: var(--prism-text-muted);\n background: none;\n border: none;\n cursor: pointer;\n position: relative;\n transition: all var(--dur-fast);\n }\n .prism-header__icon-btn:hover {\n background: var(--prism-input-bg);\n color: var(--prism-text);\n }\n\n :focus-visible {\n outline: 2px solid var(--prism-primary);\n outline-offset: 2px;\n }\n "] }]
139
139
  }], null, { onGlobalKey: [{
140
140
  type: HostListener,
141
141
  args: ['document:keydown', ['$event']]
@@ -42,7 +42,7 @@ export class A11yScoreComponent {
42
42
  i0.ɵɵattribute("r", ctx.R)("stroke-dasharray", ctx.CIRC)("stroke-dashoffset", ctx.dashOffset())("stroke", "url(#" + ctx.gradientId + ")");
43
43
  i0.ɵɵadvance();
44
44
  i0.ɵɵconditional(!ctx.compact() ? 8 : -1);
45
- } }, styles: ["[_nghost-%COMP%] { display: inline-flex; }\n\n .score-ring[_ngcontent-%COMP%] {\n position: relative;\n width: 128px;\n height: 128px;\n }\n .compact[_nghost-%COMP%] .score-ring[_ngcontent-%COMP%], .compact [_nghost-%COMP%] .score-ring[_ngcontent-%COMP%], \n [style*=\"width:18px\"][_nghost-%COMP%] .score-ring[_ngcontent-%COMP%] {\n width: 100%;\n height: 100%;\n }\n\n .score-ring[_ngcontent-%COMP%] svg[_ngcontent-%COMP%] {\n transform: rotate(-90deg);\n width: 100%;\n height: 100%;\n }\n\n .score-ring[_ngcontent-%COMP%] circle[_ngcontent-%COMP%] {\n fill: none;\n stroke-width: 10;\n }\n .track[_ngcontent-%COMP%] { stroke: var(--prism-input-bg); }\n .fill[_ngcontent-%COMP%] {\n stroke-linecap: round;\n transition: stroke-dashoffset 0.5s ease;\n }\n\n .score-val[_ngcontent-%COMP%] {\n position: absolute;\n inset: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 0;\n }\n .score-num[_ngcontent-%COMP%] {\n font-size: 30px;\n font-weight: 700;\n letter-spacing: -0.02em;\n background: linear-gradient(135deg, #a78bfa, #ec4899);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n font-family: var(--font-mono);\n }\n .score-max[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--prism-text-ghost);\n font-weight: 500;\n }"], changeDetection: 0 });
45
+ } }, styles: ["[_nghost-%COMP%] { display: inline-flex; }\n\n .score-ring[_ngcontent-%COMP%] {\n position: relative;\n width: 128px;\n height: 128px;\n }\n .compact[_nghost-%COMP%] .score-ring[_ngcontent-%COMP%], .compact [_nghost-%COMP%] .score-ring[_ngcontent-%COMP%], \n [style*=\"width:18px\"][_nghost-%COMP%] .score-ring[_ngcontent-%COMP%] {\n width: 100%;\n height: 100%;\n }\n\n .score-ring[_ngcontent-%COMP%] svg[_ngcontent-%COMP%] {\n transform: rotate(-90deg);\n width: 100%;\n height: 100%;\n }\n\n .score-ring[_ngcontent-%COMP%] circle[_ngcontent-%COMP%] {\n fill: none;\n stroke-width: 10;\n }\n .track[_ngcontent-%COMP%] { stroke: var(--prism-input-bg); }\n .fill[_ngcontent-%COMP%] {\n stroke-linecap: round;\n transition: stroke-dashoffset 0.5s ease;\n }\n\n .score-val[_ngcontent-%COMP%] {\n position: absolute;\n inset: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 0;\n }\n .score-num[_ngcontent-%COMP%] {\n font-size: 30px;\n font-weight: 700;\n letter-spacing: -0.02em;\n background: linear-gradient(135deg, #a78bfa, var(--prism-accent));\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n font-family: var(--font-mono);\n }\n .score-max[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--prism-text-ghost);\n font-weight: 500;\n }"], changeDetection: 0 });
46
46
  }
47
47
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(A11yScoreComponent, [{
48
48
  type: Component,
@@ -73,6 +73,6 @@ export class A11yScoreComponent {
73
73
  </div>
74
74
  }
75
75
  </div>
76
- `, styles: ["\n :host { display: inline-flex; }\n\n .score-ring {\n position: relative;\n width: 128px;\n height: 128px;\n }\n :host-context(.compact) .score-ring,\n :host([style*=\"width:18px\"]) .score-ring {\n width: 100%;\n height: 100%;\n }\n\n .score-ring svg {\n transform: rotate(-90deg);\n width: 100%;\n height: 100%;\n }\n\n .score-ring circle {\n fill: none;\n stroke-width: 10;\n }\n .track { stroke: var(--prism-input-bg); }\n .fill {\n stroke-linecap: round;\n transition: stroke-dashoffset 0.5s ease;\n }\n\n .score-val {\n position: absolute;\n inset: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 0;\n }\n .score-num {\n font-size: 30px;\n font-weight: 700;\n letter-spacing: -0.02em;\n background: linear-gradient(135deg, #a78bfa, #ec4899);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n font-family: var(--font-mono);\n }\n .score-max {\n font-size: 11px;\n color: var(--prism-text-ghost);\n font-weight: 500;\n }\n "] }]
76
+ `, styles: ["\n :host { display: inline-flex; }\n\n .score-ring {\n position: relative;\n width: 128px;\n height: 128px;\n }\n :host-context(.compact) .score-ring,\n :host([style*=\"width:18px\"]) .score-ring {\n width: 100%;\n height: 100%;\n }\n\n .score-ring svg {\n transform: rotate(-90deg);\n width: 100%;\n height: 100%;\n }\n\n .score-ring circle {\n fill: none;\n stroke-width: 10;\n }\n .track { stroke: var(--prism-input-bg); }\n .fill {\n stroke-linecap: round;\n transition: stroke-dashoffset 0.5s ease;\n }\n\n .score-val {\n position: absolute;\n inset: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 0;\n }\n .score-num {\n font-size: 30px;\n font-weight: 700;\n letter-spacing: -0.02em;\n background: linear-gradient(135deg, #a78bfa, var(--prism-accent));\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n font-family: var(--font-mono);\n }\n .score-max {\n font-size: 11px;\n color: var(--prism-text-ghost);\n font-weight: 500;\n }\n "] }]
77
77
  }], null, { score: [{ type: i0.Input, args: [{ isSignal: true, alias: "score", required: true }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }] }); })();
78
78
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(A11yScoreComponent, { className: "A11yScoreComponent", filePath: "app/panels/a11y/a11y-score.component.ts", lineNumber: 100 }); })();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ng-prism/core",
3
- "version": "21.5.1",
3
+ "version": "21.5.2",
4
4
  "description": "Lightweight Angular-native component showcase — no story files needed.",
5
5
  "keywords": [
6
6
  "angular",