@rcarls/rc-theme-material 0.5.0 → 0.7.0

package/components/disclosure.css

@@ -1,123 +1,167 @@
 @layer rc-theme-material.components {
+  /*
+   * Maps Material tokens onto the public rc-disclosure properties. The panel,
+   * summary, and content boxes are drawn by the component's own light-DOM base
+   * layer; what is left here is the token mapping plus decoration that genuinely
+   * depends on a selector.
+   *
+   * One mapping covers both `rc-disclosure` and `rc-accordion`, since a panel
+   * reads the same properties either way.
+   */
   :where(.rc-theme-material, :host(.rc-theme-material)) rc-disclosure {
+    /*
+     * Layout stays in theme CSS so a disclosure is laid out before the element
+     * upgrades; only the property-driven drawing lives in the component's base
+     * layer, which needs JS to install.
+     */
     display: block;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material)) :is(rc-disclosure, rc-accordion) {
     --rc-theme-material-disclosure-easing: cubic-bezier(
       var(--md-sys-motion-easing-standard-x0, 0.2),
       var(--md-sys-motion-easing-standard-y0, 0),
       var(--md-sys-motion-easing-standard-x1, 0),
       var(--md-sys-motion-easing-standard-y1, 1)
     );
+
+    --rc-disclosure-border: 1px solid var(--md-sys-color-outline-variant, ButtonBorder);
+    --rc-disclosure-radius: var(--md-sys-shape-corner-large, 1rem);
+    --rc-disclosure-background: var(--md-sys-color-surface-container-low, Canvas);
+    --rc-disclosure-color: var(--md-sys-color-on-surface, CanvasText);
+    --rc-disclosure-open-background: var(--md-sys-color-surface-container, Canvas);
+    --rc-disclosure-open-shadow: var(
+      --rc-shadow-level1,
+      0 1px 2px 0 rgb(0 0 0 / 0.3),
+      0 1px 3px 1px rgb(0 0 0 / 0.15)
+    );
+
+    --rc-disclosure-summary-min-block-size: 3.5rem;
+    --rc-disclosure-summary-padding-block: 0.75rem;
+    --rc-disclosure-summary-padding-inline: 1rem;
+    --rc-disclosure-summary-color: var(--md-sys-color-on-surface, CanvasText);
+    --rc-disclosure-summary-font: var(--md-sys-typescale-title-small-weight, 500)
+      var(--md-sys-typescale-title-small-size, 0.875rem) /
+      var(--md-sys-typescale-title-small-line-height, 1.25rem)
+      var(--md-sys-typescale-title-small-font, sans-serif);
+    --rc-disclosure-summary-marker-color: var(--md-sys-color-on-surface-variant, GrayText);
+    --rc-disclosure-summary-hover-background: color-mix(
+      in srgb,
+      var(--md-sys-color-on-surface, CanvasText)
+        calc(var(--md-sys-state-hover-state-layer-opacity, 0.08) * 100%),
+      transparent
+    );
+    --rc-disclosure-focus-ring-offset: -2px;
+
+    --rc-disclosure-content-padding-block: 0.5rem 1rem;
+    --rc-disclosure-content-padding-inline: 1rem;
+    --rc-disclosure-content-color: var(--md-sys-color-on-surface-variant, CanvasText);
+    --rc-disclosure-content-font: var(--md-sys-typescale-body-medium-size, 0.875rem) /
+      var(--md-sys-typescale-body-medium-line-height, 1.25rem)
+      var(--md-sys-typescale-body-medium-font, sans-serif);
+
+    --rc-disclosure-duration: var(--rc-motion-effects-duration-slow, 300ms);
+    --rc-disclosure-easing: var(--rc-theme-material-disclosure-easing);
   }
 
-  :where(.rc-theme-material, :host(.rc-theme-material)) rc-disclosure > details {
+  /*
+   * Clipping keeps the summary's hover layer and the animating content inside
+   * the corner radius, and the panel cross-fades its own surface as it opens.
+   */
+  :where(.rc-theme-material, :host(.rc-theme-material)) :is(rc-disclosure, rc-accordion) > details {
     overflow: clip;
-    border: 1px solid var(--md-sys-color-outline-variant, ButtonBorder);
-    border-radius: var(--md-sys-shape-corner-large, 1rem);
-    background: var(--md-sys-color-surface-container-low, Canvas);
-    color: var(--md-sys-color-on-surface, CanvasText);
     transition:
-      background-color var(--md-sys-motion-duration-200, 200ms)
+      background-color var(--rc-motion-effects-duration-default, 200ms)
         var(--rc-theme-material-disclosure-easing),
-      border-color var(--md-sys-motion-duration-200, 200ms)
+      border-color var(--rc-motion-effects-duration-default, 200ms)
         var(--rc-theme-material-disclosure-easing),
-      box-shadow var(--md-sys-motion-duration-200, 200ms) var(--rc-theme-material-disclosure-easing);
+      box-shadow var(--rc-motion-effects-duration-default, 200ms)
+        var(--rc-theme-material-disclosure-easing);
   }
 
-  :where(.rc-theme-material, :host(.rc-theme-material)) rc-disclosure > details[open] {
-    background: var(--md-sys-color-surface-container, Canvas);
-    box-shadow: var(
-      --rc-shadow-level1,
-      0 1px 2px 0 rgb(0 0 0 / 0.3),
-      0 1px 3px 1px rgb(0 0 0 / 0.15)
-    );
-  }
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    :is(rc-disclosure, rc-accordion)
+    > details
+    > summary {
+    -webkit-tap-highlight-color: transparent;
 
-  :where(.rc-theme-material, :host(.rc-theme-material)) rc-disclosure > details > summary {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr);
+    /*
+     * Material replaces the native marker with a trailing expand chevron, the
+     * Android expandable-list-item affordance, so it owns both halves of that
+     * swap: hiding `::marker` and drawing the replacement. That is what makes
+     * dropping the `list-item` box safe. Flex centers the authored summary
+     * content without assigning one of its children to the chevron column.
+     */
+    display: flex;
     align-items: center;
-    box-sizing: border-box;
-    min-block-size: 3.5rem;
-    padding-block: 0.75rem;
-    padding-inline: 1rem;
-    border-radius: calc(var(--md-sys-shape-corner-large, 1rem) - 1px);
-    color: var(--md-sys-color-on-surface, CanvasText);
-    cursor: pointer;
-    font-family: var(--md-sys-typescale-title-small-font, inherit);
-    font-size: var(--md-sys-typescale-title-small-size, 0.875rem);
-    font-weight: var(--md-sys-typescale-title-small-weight, 500);
-    line-height: var(--md-sys-typescale-title-small-line-height, 1.25rem);
-    transition: background-color var(--md-sys-motion-duration-100, 100ms)
-      var(--rc-theme-material-disclosure-easing);
-  }
+    gap: 1rem;
 
-  :where(.rc-theme-material, :host(.rc-theme-material)) rc-disclosure > details > summary::marker {
-    color: var(--md-sys-color-on-surface-variant, GrayText);
+    /* The accordion applies matching logical outer corners to this hover surface. */
+    border-radius: var(--rc-disclosure-radius, 0);
+    transition: background-color var(--rc-motion-effects-duration-fast, 150ms)
+      var(--rc-theme-material-disclosure-easing);
   }
 
-  :where(.rc-theme-material, :host(.rc-theme-material)) rc-disclosure > details > summary:hover {
-    background: color-mix(in srgb, var(--md-sys-color-on-surface, CanvasText) 8%, transparent);
-    background: color-mix(
-      in srgb,
-      var(--md-sys-color-on-surface, CanvasText)
-        calc(var(--md-sys-state-hover-state-layer-opacity, 0.08) * 100%),
-      transparent
-    );
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    :is(rc-disclosure, rc-accordion)
+    > details
+    > summary::marker {
+    content: '';
   }
 
   :where(.rc-theme-material, :host(.rc-theme-material))
-    rc-disclosure
+    :is(rc-disclosure, rc-accordion)
     > details
-    > summary:focus-visible {
-    outline: var(--rc-focus-ring, 2px solid Highlight);
-    outline-offset: -2px;
+    > summary::-webkit-details-marker {
+    display: none;
   }
 
-  :where(.rc-theme-material, :host(.rc-theme-material)) rc-disclosure > details > :not(summary) {
-    box-sizing: border-box;
-    max-block-size: 0;
-    overflow: clip;
-    padding-block: 0;
-    padding-inline: 1rem;
-    color: var(--md-sys-color-on-surface-variant, CanvasText);
-    font-family: var(--md-sys-typescale-body-medium-font, inherit);
-    font-size: var(--md-sys-typescale-body-medium-size, 0.875rem);
-    line-height: var(--md-sys-typescale-body-medium-line-height, 1.25rem);
-    opacity: 0;
+  /*
+   * A border-drawn chevron rather than a masked icon, so forced-colors mode
+   * repaints it as a system color without a separate override. Keep its own
+   * axes horizontal and left-to-right so inherited RTL or vertical writing
+   * does not turn the down/up affordance sideways.
+   */
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    :is(rc-disclosure, rc-accordion)
+    > details
+    > summary::after {
+    content: '';
+    direction: ltr;
+    writing-mode: horizontal-tb;
+    flex: none;
+    margin-inline-start: auto;
+    inline-size: 0.4375rem;
+    block-size: 0.4375rem;
+    border-block-start: 2px solid currentColor;
+    border-inline-end: 2px solid currentColor;
+    color: var(--rc-disclosure-summary-marker-color, currentColor);
+    translate: 0 -0.125rem;
+    rotate: 135deg;
     transition:
-      max-block-size var(--md-sys-motion-duration-300, 300ms)
+      rotate var(--rc-motion-spatial-duration-fast, 300ms)
         var(--rc-theme-material-disclosure-easing),
-      opacity var(--md-sys-motion-duration-200, 200ms) var(--rc-theme-material-disclosure-easing),
-      padding-block var(--md-sys-motion-duration-200, 200ms)
+      translate var(--rc-motion-spatial-duration-fast, 300ms)
         var(--rc-theme-material-disclosure-easing);
   }
 
   :where(.rc-theme-material, :host(.rc-theme-material))
-    rc-disclosure
+    :is(rc-disclosure, rc-accordion)
     > details[open]
-    > :not(summary) {
-    max-block-size: 60rem;
-    padding-block: 0 1rem;
-    opacity: 1;
-  }
-
-  @supports (transition-behavior: allow-discrete) {
-    :where(.rc-theme-material, :host(.rc-theme-material)) rc-disclosure > details > :not(summary) {
-      transition:
-        content-visibility var(--md-sys-motion-duration-300, 300ms) allow-discrete,
-        max-block-size var(--md-sys-motion-duration-300, 300ms)
-          var(--rc-theme-material-disclosure-easing),
-        opacity var(--md-sys-motion-duration-200, 200ms) var(--rc-theme-material-disclosure-easing),
-        padding-block var(--md-sys-motion-duration-200, 200ms)
-          var(--rc-theme-material-disclosure-easing);
-    }
+    > summary::after {
+    translate: 0 0.125rem;
+    rotate: 315deg;
   }
 
-  @media (prefers-reduced-motion: reduce) {
-    :where(.rc-theme-material, :host(.rc-theme-material)) rc-disclosure > details,
-    :where(.rc-theme-material, :host(.rc-theme-material)) rc-disclosure > details > summary,
-    :where(.rc-theme-material, :host(.rc-theme-material)) rc-disclosure > details > :not(summary) {
-      transition-duration: 0ms;
-    }
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    :is(rc-disclosure, rc-accordion)
+    > details
+    > summary:active {
+    background: color-mix(
+      in srgb,
+      var(--md-sys-color-on-surface, CanvasText)
+        calc(var(--md-sys-state-pressed-state-layer-opacity, 0.12) * 100%),
+      transparent
+    );
   }
 }