fold-ng 0.27.1 → 0.27.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.
- package/CHANGELOG.md +18 -1
- package/fesm2022/fold-ng.mjs +2 -2
- package/fesm2022/fold-ng.mjs.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -8,6 +8,22 @@ All notable changes to **fold-ng** are documented here. The format follows
|
|
|
8
8
|
|
|
9
9
|
_Nothing yet._
|
|
10
10
|
|
|
11
|
+
## [0.27.2] - 2026-09-11
|
|
12
|
+
|
|
13
|
+
### Changed
|
|
14
|
+
|
|
15
|
+
- **Le scrim d'un dialogue FLOUTE, sur écran étroit seulement.** Affaire de
|
|
16
|
+
proportion, pas de goût : sur une grande fenêtre le dialogue couvre un quart
|
|
17
|
+
de la surface, et l'assombrissement suffit à dire lequel des deux plans
|
|
18
|
+
compte. Sur un téléphone il en couvre la quasi-totalité, et les deux
|
|
19
|
+
centimètres de contenu qui dépassent se lisent comme une page encore
|
|
20
|
+
atteignable. Le flou tranche : ce qui est derrière est **suspendu**, pas
|
|
21
|
+
seulement plus sombre.
|
|
22
|
+
|
|
23
|
+
`@media` et non `@container` — le dock d'un dialogue est `fixed`, donc il a la
|
|
24
|
+
taille de la fenêtre, et un élément ne peut jamais répondre à sa propre
|
|
25
|
+
requête de conteneur.
|
|
26
|
+
|
|
11
27
|
## [0.27.1] - 2026-09-11
|
|
12
28
|
|
|
13
29
|
### Fixed
|
|
@@ -2582,7 +2598,8 @@ design-token stylesheet.
|
|
|
2582
2598
|
`currentColor`; `prefers-reduced-motion` + `forced-colors` are respected;
|
|
2583
2599
|
strings localise via inputs / providers (`provideFoldPanelLabels`).
|
|
2584
2600
|
|
|
2585
|
-
[unreleased]: https://github.com/hugoheynard/fold-ng/compare/v0.27.
|
|
2601
|
+
[unreleased]: https://github.com/hugoheynard/fold-ng/compare/v0.27.2...HEAD
|
|
2602
|
+
[0.27.2]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.27.2
|
|
2586
2603
|
[0.27.1]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.27.1
|
|
2587
2604
|
[0.27.0]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.27.0
|
|
2588
2605
|
[0.26.1]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.26.1
|
package/fesm2022/fold-ng.mjs
CHANGED
|
@@ -14147,7 +14147,7 @@ class FoldPanelHostComponent {
|
|
|
14147
14147
|
this.inerted = [];
|
|
14148
14148
|
}
|
|
14149
14149
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldPanelHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
14150
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldPanelHostComponent, isStandalone: true, selector: "fold-panel-host", host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "@for (panel of panels(); track panel.id) {\n <div\n class=\"panel-dock\"\n [attr.data-side]=\"panelSide(panel)\"\n [class.panel-dock--passthrough]=\"!isModal(panel)\"\n (click)=\"onBackdrop($event, panel)\"\n >\n <aside\n class=\"panel\"\n [attr.data-side]=\"panelSide(panel)\"\n [attr.data-surface]=\"panelSurface(panel)\"\n [style.--panel-width.px]=\"panel.width()\"\n role=\"dialog\"\n [attr.aria-modal]=\"isModal(panel)\"\n [attr.aria-label]=\"ariaLabel(panel)\"\n [attr.aria-labelledby]=\"ariaLabelledby(panel)\"\n tabindex=\"-1\"\n [foldFocusTrap]=\"shouldTrap(panel)\"\n (click)=\"$event.stopPropagation()\"\n >\n @if (hasGrabber(panel)) {\n <button\n type=\"button\"\n class=\"panel-grabber\"\n [attr.aria-label]=\"dismissLabel\"\n (click)=\"onGrabber(panel)\"\n >\n <span class=\"panel-grabber__bar\" aria-hidden=\"true\"></span>\n </button>\n }\n\n @if (panel.kind === \"template\") {\n <fold-panel-header\n [title]=\"panel.title()\"\n [subtitle]=\"panel.subtitle()\"\n (closed)=\"panel.onClose()\"\n />\n <div class=\"panel-body\">\n <ng-container [ngTemplateOutlet]=\"panel.templateRef\" />\n </div>\n } @else {\n <ng-container [foldPanelComponentOutlet]=\"panel\" />\n }\n </aside>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.panel-dock{position:absolute;inset:0;z-index:50;display:flex;justify-content:flex-end;container-type:inline-size;overflow:clip}.panel-dock[data-side=left]{justify-content:flex-start}.panel-dock[data-side=bottom]{align-items:flex-end}.panel-dock[data-side=center]{position:fixed;z-index:210;display:grid;place-content:center;place-items:center;padding:var(--fold-space-lg);background:var(--fold-color-scrim)}.panel-dock--passthrough{pointer-events:none}.panel-dock--passthrough .panel{pointer-events:auto}.panel{--panel-width: 490px;display:flex;flex-direction:column;width:min(var(--panel-width),100%);height:100%;overflow:hidden;font-feature-settings:\"tnum\" on;background:var(--fold-color-glass);backdrop-filter:blur(var(--fold-blur-glass)) saturate(1.5);-webkit-backdrop-filter:blur(var(--fold-blur-glass)) saturate(1.5);border-left:1px solid var(--fold-color-glass-border);box-shadow:var(--fold-shadow-panel-right);animation:panel-slide-in-right .2s cubic-bezier(.4,0,.2,1)}.panel[data-side=left]{border-left:none;border-right:1px solid var(--fold-color-glass-border);box-shadow:var(--fold-shadow-panel-left);animation-name:panel-slide-in-left}.panel[data-side=bottom]{width:100%;height:auto;max-height:min(85dvh,40rem);border-left:none;border-top:1px solid var(--fold-color-glass-border);border-radius:var(--fold-radius-lg) var(--fold-radius-lg) 0 0;box-shadow:var(--fold-shadow-lg);animation-name:panel-slide-in-bottom}.panel[data-side=center]{width:min(var(--panel-width),100%);height:auto;max-height:min(85dvh,44rem);border:1px solid var(--fold-color-glass-border);border-radius:var(--fold-radius-lg);box-shadow:var(--fold-shadow-lg);animation-name:panel-dialog-in}.panel-grabber{all:unset;display:none;box-sizing:border-box;width:100%;flex:none;place-items:center;padding:var(--fold-space-sm) 0;cursor:grab}.panel-grabber:focus-visible{outline:2px solid var(--fold-color-primary-border);outline-offset:-4px}.panel-grabber__bar{display:block;width:2.25rem;height:.28rem;border-radius:var(--fold-radius-pill);background:var(--fold-color-border)}.panel[data-side=bottom] .panel-grabber{display:grid}.panel[data-surface=solid]{background:var(--fold-color-surface-card);backdrop-filter:none;-webkit-backdrop-filter:none;border-color:var(--fold-color-border)}@media(max-width:768px){.panel[data-side=right],.panel[data-side=left]{width:100vw}}@container (max-width: 640px){.panel[data-side=auto]{width:100%;height:auto;max-height:min(85dvh,40rem);border-left:none;border-top:1px solid var(--fold-color-glass-border);border-radius:var(--fold-radius-lg) var(--fold-radius-lg) 0 0;box-shadow:var(--fold-shadow-lg);animation-name:panel-slide-in-bottom;align-self:flex-end}.panel[data-side=auto] .panel-grabber{display:grid}.panel-body{padding:var(--fold-space-md)}}.panel-body{flex:1 1 auto;overflow-y:auto;padding:var(--fold-space-lg)}@keyframes panel-slide-in-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes panel-slide-in-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes panel-slide-in-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes panel-dialog-in{0%{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}@media(prefers-reduced-motion:reduce){.panel{animation:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: FocusTrapDirective, selector: "[foldFocusTrap]", inputs: ["foldFocusTrap"] }, { kind: "directive", type: FoldPanelComponentOutletDirective, selector: "[foldPanelComponentOutlet]", inputs: ["foldPanelComponentOutlet"] }, { kind: "component", type: FoldPanelHeaderComponent, selector: "fold-panel-header", inputs: ["title", "subtitle", "icon", "variant", "closeLabel"], outputs: ["closed"] }] });
|
|
14150
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: FoldPanelHostComponent, isStandalone: true, selector: "fold-panel-host", host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "@for (panel of panels(); track panel.id) {\n <div\n class=\"panel-dock\"\n [attr.data-side]=\"panelSide(panel)\"\n [class.panel-dock--passthrough]=\"!isModal(panel)\"\n (click)=\"onBackdrop($event, panel)\"\n >\n <aside\n class=\"panel\"\n [attr.data-side]=\"panelSide(panel)\"\n [attr.data-surface]=\"panelSurface(panel)\"\n [style.--panel-width.px]=\"panel.width()\"\n role=\"dialog\"\n [attr.aria-modal]=\"isModal(panel)\"\n [attr.aria-label]=\"ariaLabel(panel)\"\n [attr.aria-labelledby]=\"ariaLabelledby(panel)\"\n tabindex=\"-1\"\n [foldFocusTrap]=\"shouldTrap(panel)\"\n (click)=\"$event.stopPropagation()\"\n >\n @if (hasGrabber(panel)) {\n <button\n type=\"button\"\n class=\"panel-grabber\"\n [attr.aria-label]=\"dismissLabel\"\n (click)=\"onGrabber(panel)\"\n >\n <span class=\"panel-grabber__bar\" aria-hidden=\"true\"></span>\n </button>\n }\n\n @if (panel.kind === \"template\") {\n <fold-panel-header\n [title]=\"panel.title()\"\n [subtitle]=\"panel.subtitle()\"\n (closed)=\"panel.onClose()\"\n />\n <div class=\"panel-body\">\n <ng-container [ngTemplateOutlet]=\"panel.templateRef\" />\n </div>\n } @else {\n <ng-container [foldPanelComponentOutlet]=\"panel\" />\n }\n </aside>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.panel-dock{position:absolute;inset:0;z-index:50;display:flex;justify-content:flex-end;container-type:inline-size;overflow:clip}.panel-dock[data-side=left]{justify-content:flex-start}.panel-dock[data-side=bottom]{align-items:flex-end}.panel-dock[data-side=center]{position:fixed;z-index:210;display:grid;place-content:center;place-items:center;padding:var(--fold-space-lg);background:var(--fold-color-scrim)}@media(max-width:640px){.panel-dock[data-side=center]{backdrop-filter:blur(var(--fold-blur-glass));-webkit-backdrop-filter:blur(var(--fold-blur-glass))}}.panel-dock--passthrough{pointer-events:none}.panel-dock--passthrough .panel{pointer-events:auto}.panel{--panel-width: 490px;display:flex;flex-direction:column;width:min(var(--panel-width),100%);height:100%;overflow:hidden;font-feature-settings:\"tnum\" on;background:var(--fold-color-glass);backdrop-filter:blur(var(--fold-blur-glass)) saturate(1.5);-webkit-backdrop-filter:blur(var(--fold-blur-glass)) saturate(1.5);border-left:1px solid var(--fold-color-glass-border);box-shadow:var(--fold-shadow-panel-right);animation:panel-slide-in-right .2s cubic-bezier(.4,0,.2,1)}.panel[data-side=left]{border-left:none;border-right:1px solid var(--fold-color-glass-border);box-shadow:var(--fold-shadow-panel-left);animation-name:panel-slide-in-left}.panel[data-side=bottom]{width:100%;height:auto;max-height:min(85dvh,40rem);border-left:none;border-top:1px solid var(--fold-color-glass-border);border-radius:var(--fold-radius-lg) var(--fold-radius-lg) 0 0;box-shadow:var(--fold-shadow-lg);animation-name:panel-slide-in-bottom}.panel[data-side=center]{width:min(var(--panel-width),100%);height:auto;max-height:min(85dvh,44rem);border:1px solid var(--fold-color-glass-border);border-radius:var(--fold-radius-lg);box-shadow:var(--fold-shadow-lg);animation-name:panel-dialog-in}.panel-grabber{all:unset;display:none;box-sizing:border-box;width:100%;flex:none;place-items:center;padding:var(--fold-space-sm) 0;cursor:grab}.panel-grabber:focus-visible{outline:2px solid var(--fold-color-primary-border);outline-offset:-4px}.panel-grabber__bar{display:block;width:2.25rem;height:.28rem;border-radius:var(--fold-radius-pill);background:var(--fold-color-border)}.panel[data-side=bottom] .panel-grabber{display:grid}.panel[data-surface=solid]{background:var(--fold-color-surface-card);backdrop-filter:none;-webkit-backdrop-filter:none;border-color:var(--fold-color-border)}@media(max-width:768px){.panel[data-side=right],.panel[data-side=left]{width:100vw}}@container (max-width: 640px){.panel[data-side=auto]{width:100%;height:auto;max-height:min(85dvh,40rem);border-left:none;border-top:1px solid var(--fold-color-glass-border);border-radius:var(--fold-radius-lg) var(--fold-radius-lg) 0 0;box-shadow:var(--fold-shadow-lg);animation-name:panel-slide-in-bottom;align-self:flex-end}.panel[data-side=auto] .panel-grabber{display:grid}.panel-body{padding:var(--fold-space-md)}}.panel-body{flex:1 1 auto;overflow-y:auto;padding:var(--fold-space-lg)}@keyframes panel-slide-in-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes panel-slide-in-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes panel-slide-in-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes panel-dialog-in{0%{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}@media(prefers-reduced-motion:reduce){.panel{animation:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: FocusTrapDirective, selector: "[foldFocusTrap]", inputs: ["foldFocusTrap"] }, { kind: "directive", type: FoldPanelComponentOutletDirective, selector: "[foldPanelComponentOutlet]", inputs: ["foldPanelComponentOutlet"] }, { kind: "component", type: FoldPanelHeaderComponent, selector: "fold-panel-header", inputs: ["title", "subtitle", "icon", "variant", "closeLabel"], outputs: ["closed"] }] });
|
|
14151
14151
|
}
|
|
14152
14152
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: FoldPanelHostComponent, decorators: [{
|
|
14153
14153
|
type: Component,
|
|
@@ -14156,7 +14156,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
14156
14156
|
FocusTrapDirective,
|
|
14157
14157
|
FoldPanelComponentOutletDirective,
|
|
14158
14158
|
FoldPanelHeaderComponent,
|
|
14159
|
-
], template: "@for (panel of panels(); track panel.id) {\n <div\n class=\"panel-dock\"\n [attr.data-side]=\"panelSide(panel)\"\n [class.panel-dock--passthrough]=\"!isModal(panel)\"\n (click)=\"onBackdrop($event, panel)\"\n >\n <aside\n class=\"panel\"\n [attr.data-side]=\"panelSide(panel)\"\n [attr.data-surface]=\"panelSurface(panel)\"\n [style.--panel-width.px]=\"panel.width()\"\n role=\"dialog\"\n [attr.aria-modal]=\"isModal(panel)\"\n [attr.aria-label]=\"ariaLabel(panel)\"\n [attr.aria-labelledby]=\"ariaLabelledby(panel)\"\n tabindex=\"-1\"\n [foldFocusTrap]=\"shouldTrap(panel)\"\n (click)=\"$event.stopPropagation()\"\n >\n @if (hasGrabber(panel)) {\n <button\n type=\"button\"\n class=\"panel-grabber\"\n [attr.aria-label]=\"dismissLabel\"\n (click)=\"onGrabber(panel)\"\n >\n <span class=\"panel-grabber__bar\" aria-hidden=\"true\"></span>\n </button>\n }\n\n @if (panel.kind === \"template\") {\n <fold-panel-header\n [title]=\"panel.title()\"\n [subtitle]=\"panel.subtitle()\"\n (closed)=\"panel.onClose()\"\n />\n <div class=\"panel-body\">\n <ng-container [ngTemplateOutlet]=\"panel.templateRef\" />\n </div>\n } @else {\n <ng-container [foldPanelComponentOutlet]=\"panel\" />\n }\n </aside>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.panel-dock{position:absolute;inset:0;z-index:50;display:flex;justify-content:flex-end;container-type:inline-size;overflow:clip}.panel-dock[data-side=left]{justify-content:flex-start}.panel-dock[data-side=bottom]{align-items:flex-end}.panel-dock[data-side=center]{position:fixed;z-index:210;display:grid;place-content:center;place-items:center;padding:var(--fold-space-lg);background:var(--fold-color-scrim)}.panel-dock--passthrough{pointer-events:none}.panel-dock--passthrough .panel{pointer-events:auto}.panel{--panel-width: 490px;display:flex;flex-direction:column;width:min(var(--panel-width),100%);height:100%;overflow:hidden;font-feature-settings:\"tnum\" on;background:var(--fold-color-glass);backdrop-filter:blur(var(--fold-blur-glass)) saturate(1.5);-webkit-backdrop-filter:blur(var(--fold-blur-glass)) saturate(1.5);border-left:1px solid var(--fold-color-glass-border);box-shadow:var(--fold-shadow-panel-right);animation:panel-slide-in-right .2s cubic-bezier(.4,0,.2,1)}.panel[data-side=left]{border-left:none;border-right:1px solid var(--fold-color-glass-border);box-shadow:var(--fold-shadow-panel-left);animation-name:panel-slide-in-left}.panel[data-side=bottom]{width:100%;height:auto;max-height:min(85dvh,40rem);border-left:none;border-top:1px solid var(--fold-color-glass-border);border-radius:var(--fold-radius-lg) var(--fold-radius-lg) 0 0;box-shadow:var(--fold-shadow-lg);animation-name:panel-slide-in-bottom}.panel[data-side=center]{width:min(var(--panel-width),100%);height:auto;max-height:min(85dvh,44rem);border:1px solid var(--fold-color-glass-border);border-radius:var(--fold-radius-lg);box-shadow:var(--fold-shadow-lg);animation-name:panel-dialog-in}.panel-grabber{all:unset;display:none;box-sizing:border-box;width:100%;flex:none;place-items:center;padding:var(--fold-space-sm) 0;cursor:grab}.panel-grabber:focus-visible{outline:2px solid var(--fold-color-primary-border);outline-offset:-4px}.panel-grabber__bar{display:block;width:2.25rem;height:.28rem;border-radius:var(--fold-radius-pill);background:var(--fold-color-border)}.panel[data-side=bottom] .panel-grabber{display:grid}.panel[data-surface=solid]{background:var(--fold-color-surface-card);backdrop-filter:none;-webkit-backdrop-filter:none;border-color:var(--fold-color-border)}@media(max-width:768px){.panel[data-side=right],.panel[data-side=left]{width:100vw}}@container (max-width: 640px){.panel[data-side=auto]{width:100%;height:auto;max-height:min(85dvh,40rem);border-left:none;border-top:1px solid var(--fold-color-glass-border);border-radius:var(--fold-radius-lg) var(--fold-radius-lg) 0 0;box-shadow:var(--fold-shadow-lg);animation-name:panel-slide-in-bottom;align-self:flex-end}.panel[data-side=auto] .panel-grabber{display:grid}.panel-body{padding:var(--fold-space-md)}}.panel-body{flex:1 1 auto;overflow-y:auto;padding:var(--fold-space-lg)}@keyframes panel-slide-in-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes panel-slide-in-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes panel-slide-in-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes panel-dialog-in{0%{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}@media(prefers-reduced-motion:reduce){.panel{animation:none}}\n"] }]
|
|
14159
|
+
], template: "@for (panel of panels(); track panel.id) {\n <div\n class=\"panel-dock\"\n [attr.data-side]=\"panelSide(panel)\"\n [class.panel-dock--passthrough]=\"!isModal(panel)\"\n (click)=\"onBackdrop($event, panel)\"\n >\n <aside\n class=\"panel\"\n [attr.data-side]=\"panelSide(panel)\"\n [attr.data-surface]=\"panelSurface(panel)\"\n [style.--panel-width.px]=\"panel.width()\"\n role=\"dialog\"\n [attr.aria-modal]=\"isModal(panel)\"\n [attr.aria-label]=\"ariaLabel(panel)\"\n [attr.aria-labelledby]=\"ariaLabelledby(panel)\"\n tabindex=\"-1\"\n [foldFocusTrap]=\"shouldTrap(panel)\"\n (click)=\"$event.stopPropagation()\"\n >\n @if (hasGrabber(panel)) {\n <button\n type=\"button\"\n class=\"panel-grabber\"\n [attr.aria-label]=\"dismissLabel\"\n (click)=\"onGrabber(panel)\"\n >\n <span class=\"panel-grabber__bar\" aria-hidden=\"true\"></span>\n </button>\n }\n\n @if (panel.kind === \"template\") {\n <fold-panel-header\n [title]=\"panel.title()\"\n [subtitle]=\"panel.subtitle()\"\n (closed)=\"panel.onClose()\"\n />\n <div class=\"panel-body\">\n <ng-container [ngTemplateOutlet]=\"panel.templateRef\" />\n </div>\n } @else {\n <ng-container [foldPanelComponentOutlet]=\"panel\" />\n }\n </aside>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.panel-dock{position:absolute;inset:0;z-index:50;display:flex;justify-content:flex-end;container-type:inline-size;overflow:clip}.panel-dock[data-side=left]{justify-content:flex-start}.panel-dock[data-side=bottom]{align-items:flex-end}.panel-dock[data-side=center]{position:fixed;z-index:210;display:grid;place-content:center;place-items:center;padding:var(--fold-space-lg);background:var(--fold-color-scrim)}@media(max-width:640px){.panel-dock[data-side=center]{backdrop-filter:blur(var(--fold-blur-glass));-webkit-backdrop-filter:blur(var(--fold-blur-glass))}}.panel-dock--passthrough{pointer-events:none}.panel-dock--passthrough .panel{pointer-events:auto}.panel{--panel-width: 490px;display:flex;flex-direction:column;width:min(var(--panel-width),100%);height:100%;overflow:hidden;font-feature-settings:\"tnum\" on;background:var(--fold-color-glass);backdrop-filter:blur(var(--fold-blur-glass)) saturate(1.5);-webkit-backdrop-filter:blur(var(--fold-blur-glass)) saturate(1.5);border-left:1px solid var(--fold-color-glass-border);box-shadow:var(--fold-shadow-panel-right);animation:panel-slide-in-right .2s cubic-bezier(.4,0,.2,1)}.panel[data-side=left]{border-left:none;border-right:1px solid var(--fold-color-glass-border);box-shadow:var(--fold-shadow-panel-left);animation-name:panel-slide-in-left}.panel[data-side=bottom]{width:100%;height:auto;max-height:min(85dvh,40rem);border-left:none;border-top:1px solid var(--fold-color-glass-border);border-radius:var(--fold-radius-lg) var(--fold-radius-lg) 0 0;box-shadow:var(--fold-shadow-lg);animation-name:panel-slide-in-bottom}.panel[data-side=center]{width:min(var(--panel-width),100%);height:auto;max-height:min(85dvh,44rem);border:1px solid var(--fold-color-glass-border);border-radius:var(--fold-radius-lg);box-shadow:var(--fold-shadow-lg);animation-name:panel-dialog-in}.panel-grabber{all:unset;display:none;box-sizing:border-box;width:100%;flex:none;place-items:center;padding:var(--fold-space-sm) 0;cursor:grab}.panel-grabber:focus-visible{outline:2px solid var(--fold-color-primary-border);outline-offset:-4px}.panel-grabber__bar{display:block;width:2.25rem;height:.28rem;border-radius:var(--fold-radius-pill);background:var(--fold-color-border)}.panel[data-side=bottom] .panel-grabber{display:grid}.panel[data-surface=solid]{background:var(--fold-color-surface-card);backdrop-filter:none;-webkit-backdrop-filter:none;border-color:var(--fold-color-border)}@media(max-width:768px){.panel[data-side=right],.panel[data-side=left]{width:100vw}}@container (max-width: 640px){.panel[data-side=auto]{width:100%;height:auto;max-height:min(85dvh,40rem);border-left:none;border-top:1px solid var(--fold-color-glass-border);border-radius:var(--fold-radius-lg) var(--fold-radius-lg) 0 0;box-shadow:var(--fold-shadow-lg);animation-name:panel-slide-in-bottom;align-self:flex-end}.panel[data-side=auto] .panel-grabber{display:grid}.panel-body{padding:var(--fold-space-md)}}.panel-body{flex:1 1 auto;overflow-y:auto;padding:var(--fold-space-lg)}@keyframes panel-slide-in-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes panel-slide-in-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes panel-slide-in-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes panel-dialog-in{0%{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}@media(prefers-reduced-motion:reduce){.panel{animation:none}}\n"] }]
|
|
14160
14160
|
}], ctorParameters: () => [], propDecorators: { onEscape: [{
|
|
14161
14161
|
type: HostListener,
|
|
14162
14162
|
args: ["document:keydown.escape"]
|