@ojiepermana/angular-theme 22.0.45 → 22.0.47

package/fesm2022/ojiepermana-angular-theme-page.mjs

@@ -472,7 +472,7 @@ class PageContentComponent {
     classes = computed(() => buildPageBodyClasses(this.resolvedScroll(), this.class()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: PageContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: PageContentComponent, isStandalone: true, selector: "PageContent", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-page-slot": "content" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: PageContentComponent, isStandalone: true, selector: "PageContent", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-page-slot": "content" }, properties: { "class": "classes()", "attr.tabindex": "resolvedScroll() === \"content\" ? \"0\" : null" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: PageContentComponent, decorators: [{
             type: Component,
@@ -480,6 +480,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                     selector: 'PageContent',
                     host: {
                         '[class]': 'classes()',
+                        // When this region scrolls its own content, make it keyboard-focusable so it
+                        // can be scrolled without a mouse (axe scrollable-region-focusable).
+                        '[attr.tabindex]': 'resolvedScroll() === "content" ? "0" : null',
                         'data-page-slot': 'content',
                     },
                     template: `<ng-content />`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ojiepermana/angular-theme",
-  "version": "22.0.45",
+  "version": "22.0.47",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/edsis/angular.git"
@@ -13,8 +13,8 @@
     "@angular/common": ">=22.0.0",
     "@angular/core": ">=22.0.0",
     "@angular/router": ">=22.0.0",
-    "@ojiepermana/angular-navigation": "^22.0.45",
-    "@ojiepermana/angular-component": "^22.0.45",
+    "@ojiepermana/angular-navigation": "^22.0.47",
+    "@ojiepermana/angular-component": "^22.0.47",
     "rxjs": ">=7.8.0"
   },
   "peerDependenciesMeta": {

package/styles/css/base/components.css

@@ -127,6 +127,27 @@
     font-weight: var(--nav-badge-weight, 500);
   }
 
+  /* Modal overlay backdrop shared by Dialog, Sheet, and Drawer. The element is
+   * rendered inside the CDK overlay container (outside component view
+   * encapsulation), so its styles must live in this global layer. The default
+   * `dim` surface uses the --overlay-backdrop token so it recolors with the
+   * active theme/mode; components opt into `blur`/`transparent` via a modifier
+   * class. Fade-in rides on CDK's .cdk-overlay-backdrop opacity transition. */
+  .dialog-backdrop {
+    background-color: hsl(var(--overlay-backdrop));
+  }
+
+  .dialog-backdrop.dialog-backdrop-blur {
+    backdrop-filter: blur(4px);
+    -webkit-backdrop-filter: blur(4px);
+  }
+
+  .dialog-backdrop.dialog-backdrop-transparent {
+    background-color: transparent;
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+
   /* Layout `honeycomb` surface — a TRUE tessellated flat-top hexagon grid drawn
    * as a token-colored mask layer, so it recolors with the active theme/neutral
    * (light + dark) like the other `<Layout surface>` patterns. Adjacent hexagons