@praxisui/core 10.0.0-rc.4 → 10.0.0-rc.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@praxisui/core",
-  "version": "10.0.0-rc.4",
+  "version": "10.0.0-rc.6",
   "description": "Core library for Praxis UI Workspace: types, tokens, services and utilities shared across @praxisui/* packages.",
   "peerDependencies": {
     "@angular/cdk": "^21.0.0",
@@ -32,6 +32,10 @@
       "types": "./types/praxisui-core.d.ts",
       "default": "./fesm2022/praxisui-core.mjs"
     },
+    "./schema": {
+      "types": "./types/praxisui-core-schema.d.ts",
+      "default": "./fesm2022/praxisui-core-schema.mjs"
+    },
     "./ai/component-registry.json": {
       "default": "./ai/component-registry.json"
     }

package/theming/_theming.scss

@@ -150,6 +150,14 @@
   --mat-tooltip-supporting-text-line-height: 16px;
   --mat-tooltip-supporting-text-tracking: 0.01em;
 
+  // 1.2 Angular Material M3 Menu Tokens Bridge (--mat-menu-*)
+  --mat-menu-container-color: var(--card, var(--surface, #{$surface}));
+  --mat-menu-container-shape: var(--radius-md, var(--radius-lg, 14px));
+  --mat-menu-item-label-text-color: #{$foreground};
+  --mat-menu-item-icon-color: #{$muted-foreground};
+  --mat-menu-item-hover-state-layer-color: color-mix(in oklab, #{$primary} 12%, transparent);
+  --mat-menu-item-focus-state-layer-color: color-mix(in oklab, #{$primary} 18%, transparent);
+
   // 2. Praxis Core Bridge Tokens (--pdx-material-*, --pdx-overlay-*)
   --pdx-material-surface: #{$surface};
   --pdx-material-surface-high: #{$surface-container};
@@ -306,6 +314,14 @@
   --mat-tooltip-container-color: var(--mat-sys-inverse-surface);
   --mat-tooltip-supporting-text-color: var(--mat-sys-inverse-on-surface);
 
+  // 1.2 Dark Mode: Angular Material M3 Menu Tokens Bridge
+  --mat-menu-container-color: var(--card, var(--surface, #{$surface}));
+  --mat-menu-container-shape: var(--radius-md, var(--radius-lg, 14px));
+  --mat-menu-item-label-text-color: #{$foreground};
+  --mat-menu-item-icon-color: #{$muted-foreground};
+  --mat-menu-item-hover-state-layer-color: color-mix(in oklab, #{$primary} 18%, transparent);
+  --mat-menu-item-focus-state-layer-color: color-mix(in oklab, #{$primary} 24%, transparent);
+
   // 2. Dark Mode: Praxis Core Bridge Tokens
   --pdx-material-surface: #{$surface};
   --pdx-material-surface-high: #{$surface-high};
@@ -445,8 +461,69 @@
   }
 }
 
+/// Emits refined surface styling, command shadow, backdrop filter,
+/// and state layer hover animations for Angular Material Menus.
+@mixin praxis-menu-styles() {
+  .mat-mdc-menu-panel {
+    border-radius: var(--radius-md, 14px) !important;
+    background: color-mix(in oklab, var(--mat-menu-container-color, var(--card, var(--surface, #ffffff))) 92%, var(--background, #f2f6f5)) !important;
+    border: 1px solid var(--border, var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.12))) !important;
+    box-shadow: var(--shadow-command, var(--md-sys-elevation-level3, 0 4px 12px rgba(0, 0, 0, 0.18))), 0 12px 32px rgba(0, 0, 0, 0.18) !important;
+    backdrop-filter: blur(18px) saturate(140%) !important;
+    -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
+    padding: 6px !important;
+    overflow: hidden !important;
+  }
+
+  .mat-mdc-menu-item {
+    min-height: 40px !important;
+    border-radius: var(--radius-sm, 10px) !important;
+    margin: 2px 0 !important;
+    padding: 0 14px !important;
+    font-family: var(--font-sans, inherit) !important;
+    font-size: 0.85rem !important;
+    font-weight: 500 !important;
+    color: var(--mat-menu-item-label-text-color, var(--foreground, inherit)) !important;
+    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease !important;
+
+    .mat-icon {
+      margin-right: 12px !important;
+      color: var(--mat-menu-item-icon-color, var(--muted-foreground, inherit)) !important;
+      font-size: 20px !important;
+      width: 20px !important;
+      height: 20px !important;
+      transition: color 0.15s ease, transform 0.15s ease !important;
+    }
+
+    &:hover:not([disabled]) {
+      background-color: var(--mat-menu-item-hover-state-layer-color, color-mix(in oklab, var(--primary) 12%, transparent)) !important;
+      color: var(--foreground, inherit) !important;
+      transform: translateX(3px);
+
+      .mat-icon {
+        color: var(--primary, var(--md-sys-color-primary)) !important;
+        transform: scale(1.08);
+      }
+    }
+
+    &:focus-visible:not([disabled]),
+    &.cdk-program-focused:not([disabled]) {
+      background-color: var(--mat-menu-item-focus-state-layer-color, color-mix(in oklab, var(--primary) 18%, transparent)) !important;
+      outline: 2px solid var(--primary, var(--md-sys-color-primary)) !important;
+      outline-offset: -2px;
+    }
+
+    &[disabled] {
+      opacity: 0.42 !important;
+      cursor: not-allowed !important;
+      pointer-events: none !important;
+      transform: none !important;
+    }
+  }
+}
+
 /// Convenience mixin that bundles all theme definitions, dark mode overrides,
-/// widget shell rules, and tooltip enhancements.
+/// widget shell rules, tooltip enhancements, and menu state layer styles.
 ///
 /// @param {Map} $config Optional overrides for root theme tokens.
 /// @param {Map} $dark-config Optional overrides for dark theme tokens.
@@ -462,4 +539,5 @@
 
   @include praxis-shell-styles();
   @include praxis-tooltip-styles();
+  @include praxis-menu-styles();
 }