feat(core): add depth-aware adaptation for components (#38)

Author: auswm85

packages/core/src/components/badge.css

@@ -188,3 +188,39 @@
     border: 1px solid CanvasText;
   }
 }
+
+/* =============================================================================
+   STYLE QUERIES - Depth-Aware Adaptation
+   Badges automatically adapt when nested inside surfaces of different depths.
+   Only affects default (neutral) and outline badges.
+   ============================================================================= */
+
+@supports (container-type: inline-size) {
+  /* Inside raised surface (depth: 1) */
+  @container surface style(--_surface-depth: 1) {
+    :where([s-badge=""]) {
+      --_badge-bg: var(--s-neutral-300);
+    }
+    :where([s-badge="outline"]) {
+      box-shadow: inset 0 0 0 1px var(--s-border-strong);
+    }
+  }
+
+  /* Inside floating surface (depth: 2) */
+  @container surface style(--_surface-depth: 2) {
+    :where([s-badge=""]) {
+      --_badge-bg: var(--s-neutral-300);
+      box-shadow: var(--s-shadow-sm);
+    }
+    :where([s-badge="outline"]) {
+      box-shadow: inset 0 0 0 1px var(--s-border-strong);
+    }
+  }
+
+  /* Inside sunken surface (depth: -1) */
+  @container surface style(--_surface-depth: -1) {
+    :where([s-badge=""]) {
+      --_badge-bg: var(--s-neutral-100);
+    }
+  }
+}

packages/core/src/components/button.css

@@ -267,3 +267,45 @@
     }
   }
 }
+
+/* =============================================================================
+   STYLE QUERIES - Depth-Aware Adaptation
+   Buttons automatically adapt when nested inside surfaces of different depths.
+   ============================================================================= */
+
+@supports (container-type: inline-size) {
+  /**
+   * Inside raised surface (depth: 1)
+   * Secondary buttons need stronger border for definition
+   */
+  @container surface style(--_surface-depth: 1) {
+    :where([s-btn="secondary"]) {
+      --_btn-border: var(--s-border-strong);
+    }
+  }
+
+  /**
+   * Inside floating surface (depth: 2)
+   * All buttons get stronger borders for definition against elevated bg
+   */
+  @container surface style(--_surface-depth: 2) {
+    :where([s-btn="secondary"]) {
+      --_btn-border: var(--s-border-strong);
+      --_btn-bg: var(--s-surface-base);
+    }
+
+    :where([s-btn="ghost"]) {
+      --_btn-border: var(--s-border-muted);
+    }
+  }
+
+  /**
+   * Inside sunken surface (depth: -1)
+   * Buttons use base surface bg to stand out from recessed area
+   */
+  @container surface style(--_surface-depth: -1) {
+    :where([s-btn="secondary"]) {
+      --_btn-bg: var(--s-surface-base);
+    }
+  }
+}

packages/core/src/components/card.css

@@ -224,3 +224,41 @@
   flex-direction: column;
   gap: var(--s-space-4);
 }
+
+/* =============================================================================
+   STYLE QUERIES - Depth-Aware Adaptation
+   Cards automatically adapt when nested inside surfaces of different depths.
+   ============================================================================= */
+
+@supports (container-type: inline-size) {
+  /**
+   * Inside raised surface (depth: 1)
+   * Reduce shadow to avoid visual "shadow stacking"
+   */
+  @container surface style(--_surface-depth: 1) {
+    :where([s-card]) {
+      --_card-shadow: var(--s-shadow-sm);
+    }
+  }
+
+  /**
+   * Inside floating surface (depth: 2)
+   * Remove shadow entirely, use subtle border for definition
+   */
+  @container surface style(--_surface-depth: 2) {
+    :where([s-card]) {
+      --_card-shadow: none;
+      --_card-border: var(--s-border-default);
+    }
+  }
+
+  /**
+   * Inside sunken surface (depth: -1)
+   * Increase shadow for better lift appearance
+   */
+  @container surface style(--_surface-depth: -1) {
+    :where([s-card]) {
+      --_card-shadow: var(--s-shadow-md);
+    }
+  }
+}

packages/core/src/components/input.css

@@ -290,3 +290,58 @@ select[s-input] {
     }
   }
 }
+
+/* =============================================================================
+   STYLE QUERIES - Depth-Aware Adaptation
+   Inputs automatically adapt when nested inside surfaces of different depths.
+   ============================================================================= */
+
+@supports (container-type: inline-size) {
+  /**
+   * Inside raised surface (depth: 1)
+   * Use sunken background to create visual depth contrast
+   */
+  @container surface style(--_surface-depth: 1) {
+    :where([s-input]) {
+      --_input-bg: var(--s-surface-sunken);
+    }
+
+    :where([s-checkbox]) input,
+    :where([s-radio]) input {
+      background-color: var(--s-surface-sunken);
+    }
+  }
+
+  /**
+   * Inside floating surface (depth: 2)
+   * Stronger sunken appearance with visible border
+   */
+  @container surface style(--_surface-depth: 2) {
+    :where([s-input]) {
+      --_input-bg: var(--s-surface-sunken);
+      --_input-border: var(--s-border-strong);
+    }
+
+    :where([s-checkbox]) input,
+    :where([s-radio]) input {
+      background-color: var(--s-surface-sunken);
+      border-color: var(--s-border-strong);
+    }
+  }
+
+  /**
+   * Inside sunken surface (depth: -1)
+   * Use base background to stand out from recessed area
+   */
+  @container surface style(--_surface-depth: -1) {
+    :where([s-input]) {
+      --_input-bg: var(--s-surface-raised);
+      --_input-border: var(--s-border-muted);
+    }
+
+    :where([s-checkbox]) input,
+    :where([s-radio]) input {
+      background-color: var(--s-surface-raised);
+    }
+  }
+}

packages/core/src/components/surface.css

@@ -13,14 +13,18 @@
 
 /* Base surface - zero specificity for easy overrides */
 :where([s-surface]) {
-  /* Enable container queries */
+  /* Enable container queries (size + style) */
   container-type: inline-size;
+  container-name: surface;
 
   /* Surface CSS properties (customization points) */
   --_surface-bg: var(--s-surface-base);
   --_surface-padding: var(--s-space-4);
   --_surface-radius: var(--s-radius-lg);
 
+  /* Depth indicator for style queries (flat=0, sunken=-1, raised=1, floating=2) */
+  --_surface-depth: 0;
+
   background-color: var(--_surface-bg);
   padding: var(--_surface-padding);
   border-radius: var(--_surface-radius);
@@ -60,23 +64,27 @@
 /* Flat - default, explicit declaration */
 [s-surface="flat"] {
   --_surface-bg: var(--s-surface-base);
+  --_surface-depth: 0;
 }
 
 /* Sunken - recessed appearance */
 [s-surface="sunken"] {
   --_surface-bg: var(--s-surface-sunken);
+  --_surface-depth: -1;
   box-shadow: var(--s-shadow-inner);
 }
 
 /* Raised - elevated card-like appearance */
 [s-surface="raised"] {
   --_surface-bg: var(--s-surface-raised);
+  --_surface-depth: 1;
   box-shadow: var(--s-shadow-md);
 }
 
 /* Floating - high elevation, for overlays and modals */
 [s-surface="floating"] {
   --_surface-bg: var(--s-surface-raised);
+  --_surface-depth: 2;
   box-shadow: var(--s-shadow-xl);
 }