@dereekb/dbx-web 13.13.0 → 13.14.0

package/eslint/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@dereekb/dbx-web/eslint",
-  "version": "13.13.0",
+  "version": "13.14.0",
   "peerDependencies": {
-    "@dereekb/util": "13.13.0",
+    "@dereekb/util": "13.14.0",
     "@typescript-eslint/utils": "8.59.3"
   },
   "devDependencies": {
     "@angular/core": "21.2.11",
-    "@dereekb/dbx-core": "13.13.0",
-    "@dereekb/rxjs": "13.13.0",
+    "@dereekb/dbx-core": "13.14.0",
+    "@dereekb/rxjs": "13.14.0",
     "@typescript-eslint/parser": "8.59.3",
     "eslint": "10.4.0",
     "rxjs": "^7.8.2"

package/lib/button/_button.scss

@@ -98,6 +98,39 @@ $big-button-height: 46px; // 33% bigger
     }
   }
 
+  /// @dbx-utility button-icon-tile
+  /// @intent turn a `<dbx-button>` that wraps a `<dbx-icon-tile>` into a clickable tile — strips the button's padding/min-width so it hugs the tile, adopts the tile's `--dbx-icon-tile-border-radius`, and lifts a neutralized (`--mat-sys-on-surface`) state layer above the tile so hover/press/ripple reads on every color variant (including opaque full-color and primary-tonal tiles)
+  /// @role layout
+  /// @see-also icon-tile, button-neutral-interaction-color
+  /// @anti-use don't apply to a `<dbx-button>` with no inner `<dbx-icon-tile>` — there is no tile surface to shape the button to or to overlay
+  .dbx-button-icon-tile {
+    .mat-mdc-button.dbx-base-button {
+      border-radius: var(--dbx-icon-tile-border-radius, var(--mat-button-text-container-shape, var(--mat-sys-corner-full)));
+      padding: 0;
+      min-height: 0;
+      min-width: 0;
+
+      // Neutralize the interaction color so hover/press/ripple reads as a consistent
+      // darkening regardless of the tile's dbxColor. Without this the state layer keeps
+      // the default primary color, which is invisible on a primary-tonal tile.
+      $neutral: var(--mat-sys-on-surface, #000);
+
+      --mat-button-text-state-layer-color: #{$neutral};
+      --mat-button-text-pressed-state-layer-color: #{$neutral};
+      --mat-button-text-focus-state-layer-color: #{$neutral};
+      --mat-button-text-ripple-color: color-mix(in srgb, #{$neutral} 12%, transparent);
+    }
+
+    // The tile's background lives inside .mdc-button__label (z-index: 1), which would
+    // otherwise paint over the button's state layer / ripple — fully occluding it on an
+    // opaque (full-color) tile and washing it out on a tonal one. Lift the ripple above
+    // the label so the interaction feedback overlays the tile on every variant.
+    .mat-mdc-button-persistent-ripple,
+    .mat-mdc-button-ripple {
+      z-index: 2;
+    }
+  }
+
   .dbx-icon-button .mat-mdc-button .mdc-button__label {
     display: flex;
     align-items: center;

package/lib/layout/card/_card.scss

@@ -40,6 +40,55 @@
       padding: var(--dbx-padding-2) var(--dbx-padding-3) var(--dbx-padding-3);
     }
   }
+
+  /// @dbx-utility card-select
+  /// @intent selectable "choice" `<mat-card appearance="outlined">` whose content is centered in a column (large `<mat-icon>`, title, subtitle). Pair with `[dbxColor]` + `[dbxColorTone]` and toggle the `.dbx-card-selected` modifier to paint the selected border to match the tonal wash. Put the large glyph in a `.dbx-card-select-icon` `<mat-icon>` and an optional round selected checkmark in a `.dbx-card-select-check` `<dbx-icon-tile [round]>` (absolutely positioned top-right). Fills its parent's height (`height: 100%`) so a row of cards laid out with `dbxFlexGroup` + `[dbxFlexSize]` stays equal-height as it shrinks and wraps.
+  /// @role layout
+  /// @see-also color, color-tonal, icon-tile, card-banner, flex-group, flex-size
+  .dbx-card-select {
+    position: relative;
+    cursor: pointer;
+    text-align: center;
+    height: 100%;
+
+    > mat-card-content {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: var(--dbx-padding-2);
+    }
+
+    .dbx-card-select-icon {
+      width: var(--dbx-card-select-icon-size, 40px);
+      height: var(--dbx-card-select-icon-size, 40px);
+      font-size: var(--dbx-card-select-icon-size, 40px);
+      margin-bottom: var(--dbx-padding-2);
+    }
+
+    .dbx-card-select-check {
+      position: absolute;
+      top: var(--dbx-padding-3);
+      right: var(--dbx-padding-3);
+    }
+
+    // Unselected baseline — `[dbxColor]` always applies the `.dbx-color` class
+    // (even when bound to a nullish color), and its default-color paint would
+    // render the card body in the surface color (invisible). Restore a neutral
+    // outlined-card look so the unselected option stays legible. The `:not()`
+    // out-specifies the `mat-card.dbx-color` rule and excludes the selected
+    // (tonal) card, which keeps its themed paint.
+    &:not(.dbx-card-selected) {
+      background: var(--mat-sys-surface);
+      color: var(--mat-sys-on-surface);
+    }
+
+    // Selected state — repaint the outlined-card border to match the tonal
+    // `[dbxColor]` wash applied by DbxColorDirective (`--dbx-bg-color-current`).
+    &.dbx-card-selected {
+      --mat-outlined-card-outline-color: var(--dbx-bg-color-current);
+      --mat-outlined-card-outline-width: 2px;
+    }
+  }
 }
 
 @mixin theme($theme-config) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dereekb/dbx-web",
-  "version": "13.13.0",
+  "version": "13.14.0",
   "sideEffects": [
     "*.scss",
     "*.css"
@@ -13,12 +13,12 @@
     "@angular/material": "^21.2.9",
     "@angular/platform-browser": "21.2.11",
     "@cantoo/pdf-lib": "^2.6.5",
-    "@dereekb/browser": "13.13.0",
-    "@dereekb/date": "13.13.0",
-    "@dereekb/dbx-core": "13.13.0",
-    "@dereekb/rxjs": "13.13.0",
-    "@dereekb/util": "13.13.0",
-    "@dereekb/vitest": "13.13.0",
+    "@dereekb/browser": "13.14.0",
+    "@dereekb/date": "13.14.0",
+    "@dereekb/dbx-core": "13.14.0",
+    "@dereekb/rxjs": "13.14.0",
+    "@dereekb/util": "13.14.0",
+    "@dereekb/vitest": "13.14.0",
     "@ngbracket/ngx-layout": "^21.0.0",
     "@ngrx/component-store": "^21.1.0",
     "@ngrx/effects": "^21.1.0",