fold-ng 0.27.0 → 0.27.1
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 +17 -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,21 @@ All notable changes to **fold-ng** are documented here. The format follows
|
|
|
8
8
|
|
|
9
9
|
_Nothing yet._
|
|
10
10
|
|
|
11
|
+
## [0.27.1] - 2026-09-11
|
|
12
|
+
|
|
13
|
+
### Fixed
|
|
14
|
+
|
|
15
|
+
- 🔴 **Le dialogue centré ne l'était pas.** `side="center"` posait
|
|
16
|
+
`place-items: center` sur un dock passé en `grid` — mais la règle de base du
|
|
17
|
+
dock porte `justify-content: flex-end`, pour coller une feuille latérale à son
|
|
18
|
+
bord, et `place-items` ne la remet pas : elle règle la place de l'élément DANS
|
|
19
|
+
sa piste, pas celle de la piste dans la grille. Le dialogue restait donc
|
|
20
|
+
plaqué au bord droit d'un dock pourtant large comme la fenêtre.
|
|
21
|
+
|
|
22
|
+
`place-content: center` par-dessus. Et le cas qui le tient lit la **feuille
|
|
23
|
+
compilée** : jsdom n'applique aucun style de composant, donc mesurer un
|
|
24
|
+
rectangle serait passé sur un dialogue décentré.
|
|
25
|
+
|
|
11
26
|
## [0.27.0] - 2026-09-11
|
|
12
27
|
|
|
13
28
|
### Added
|
|
@@ -2567,7 +2582,8 @@ design-token stylesheet.
|
|
|
2567
2582
|
`currentColor`; `prefers-reduced-motion` + `forced-colors` are respected;
|
|
2568
2583
|
strings localise via inputs / providers (`provideFoldPanelLabels`).
|
|
2569
2584
|
|
|
2570
|
-
[unreleased]: https://github.com/hugoheynard/fold-ng/compare/v0.27.
|
|
2585
|
+
[unreleased]: https://github.com/hugoheynard/fold-ng/compare/v0.27.1...HEAD
|
|
2586
|
+
[0.27.1]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.27.1
|
|
2571
2587
|
[0.27.0]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.27.0
|
|
2572
2588
|
[0.26.1]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.26.1
|
|
2573
2589
|
[0.26.0]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.26.0
|
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-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)}.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-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)}.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"]
|