@rcarls/rc-theme-material 0.5.0 → 0.7.0

package/components/accordion.css

@@ -1,181 +1,67 @@
 @layer rc-theme-material.components {
+  /*
+   * Only the group box and the panel shapes. Panels inside an accordion take
+   * the same `--rc-disclosure-*` mapping as a standalone disclosure, which
+   * disclosure.css sets for `rc-accordion` as well, so the panel recipe is not
+   * repeated here.
+   */
   :where(.rc-theme-material, :host(.rc-theme-material)) rc-accordion {
+    /*
+     * Grouped like a segmented `rc-list`: a 2px gap, no outline, extra-small
+     * inner corners, and extra-large outer corners on the first and last panel,
+     * so an accordion reads as one expandable list rather than a card stack.
+     */
+    --rc-accordion-gap: 0.125rem;
+
+    /* Laid out before the element upgrades; see disclosure.css. */
     display: grid;
-    gap: 0.5rem;
+    gap: var(--rc-accordion-gap, 0.125rem);
     border: 0;
     background: transparent;
-    --rc-theme-material-accordion-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)
-    );
   }
 
   :where(.rc-theme-material, :host(.rc-theme-material)) rc-accordion > rc-disclosure {
     display: block;
   }
 
-  :where(.rc-theme-material, :host(.rc-theme-material)) rc-accordion > details,
-  :where(.rc-theme-material, :host(.rc-theme-material)) rc-accordion > rc-disclosure > 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)
-        var(--rc-theme-material-accordion-easing),
-      border-color var(--md-sys-motion-duration-200, 200ms)
-        var(--rc-theme-material-accordion-easing),
-      box-shadow var(--md-sys-motion-duration-200, 200ms) var(--rc-theme-material-accordion-easing);
-  }
-
-  :where(.rc-theme-material, :host(.rc-theme-material)) rc-accordion > details[open],
-  :where(.rc-theme-material, :host(.rc-theme-material))
-    rc-accordion
-    > 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)) rc-accordion > details > summary,
-  :where(.rc-theme-material, :host(.rc-theme-material))
-    rc-accordion
-    > rc-disclosure
-    > details
-    > summary {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr);
-    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-accordion-easing);
-  }
-
-  :where(.rc-theme-material, :host(.rc-theme-material)) rc-accordion > details > summary::marker,
-  :where(.rc-theme-material, :host(.rc-theme-material))
-    rc-accordion
-    > rc-disclosure
-    > details
-    > summary::marker {
-    color: var(--md-sys-color-on-surface-variant, GrayText);
-  }
-
-  :where(.rc-theme-material, :host(.rc-theme-material)) rc-accordion > details > summary:hover,
-  :where(.rc-theme-material, :host(.rc-theme-material))
-    rc-accordion
-    > 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
-    );
+  /*
+   * Set on the items, not inherited from the group: disclosure.css maps the
+   * standalone outline and radius onto every `rc-disclosure`, wrapped or not.
+   */
+  :where(.rc-theme-material, :host(.rc-theme-material)) rc-accordion > :is(rc-disclosure, details) {
+    --rc-disclosure-border: 0;
+    --rc-disclosure-radius: var(--md-sys-shape-corner-extra-small, 0.25rem);
   }
 
+  /* Shape both the native panel and its summary hover surface at logical ends. */
   :where(.rc-theme-material, :host(.rc-theme-material))
-    rc-accordion
-    > details
-    > summary:focus-visible,
-  :where(.rc-theme-material, :host(.rc-theme-material))
-    rc-accordion
-    > rc-disclosure
-    > details
-    > summary:focus-visible {
-    outline: var(--rc-focus-ring, 2px solid Highlight);
-    outline-offset: -2px;
+    :is(
+      rc-accordion > details:first-child,
+      rc-accordion > details:first-child > summary,
+      rc-accordion > rc-disclosure:first-child > details,
+      rc-accordion > rc-disclosure:first-child > details > summary
+    ) {
+    border-start-start-radius: var(--md-sys-shape-corner-extra-large, 1.75rem);
+    border-start-end-radius: var(--md-sys-shape-corner-extra-large, 1.75rem);
   }
 
-  :where(.rc-theme-material, :host(.rc-theme-material)) rc-accordion > details > :not(summary),
   :where(.rc-theme-material, :host(.rc-theme-material))
-    rc-accordion
-    > 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;
-    transition:
-      max-block-size var(--md-sys-motion-duration-300, 300ms)
-        var(--rc-theme-material-accordion-easing),
-      opacity var(--md-sys-motion-duration-200, 200ms) var(--rc-theme-material-accordion-easing),
-      padding-block var(--md-sys-motion-duration-200, 200ms)
-        var(--rc-theme-material-accordion-easing);
+    :is(
+      rc-accordion > details:last-child,
+      rc-accordion > details:last-child > summary,
+      rc-accordion > rc-disclosure:last-child > details,
+      rc-accordion > rc-disclosure:last-child > details > summary
+    ) {
+    border-end-start-radius: var(--md-sys-shape-corner-extra-large, 1.75rem);
+    border-end-end-radius: var(--md-sys-shape-corner-extra-large, 1.75rem);
   }
 
-  :where(.rc-theme-material, :host(.rc-theme-material))
-    rc-accordion
-    > details[open]
-    > :not(summary),
-  :where(.rc-theme-material, :host(.rc-theme-material))
-    rc-accordion
-    > rc-disclosure
-    > 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-accordion > details > :not(summary),
-    :where(.rc-theme-material, :host(.rc-theme-material))
-      rc-accordion
-      > 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-accordion-easing),
-        opacity var(--md-sys-motion-duration-200, 200ms) var(--rc-theme-material-accordion-easing),
-        padding-block var(--md-sys-motion-duration-200, 200ms)
-          var(--rc-theme-material-accordion-easing);
-    }
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    :where(.rc-theme-material, :host(.rc-theme-material)) rc-accordion > details,
-    :where(.rc-theme-material, :host(.rc-theme-material)) rc-accordion > rc-disclosure > details,
-    :where(.rc-theme-material, :host(.rc-theme-material)) rc-accordion > details > summary,
-    :where(.rc-theme-material, :host(.rc-theme-material))
-      rc-accordion
-      > rc-disclosure
-      > details
-      > summary,
-    :where(.rc-theme-material, :host(.rc-theme-material)) rc-accordion > details > :not(summary),
+  /* Without the surface fills, gaps alone would not separate the panels. */
+  @media (forced-colors: active) {
     :where(.rc-theme-material, :host(.rc-theme-material))
       rc-accordion
-      > rc-disclosure
-      > details
-      > :not(summary) {
-      transition-duration: 0ms;
+      > :is(rc-disclosure, details) {
+      --rc-disclosure-border: 1px solid CanvasText;
     }
   }
 }

package/components/adaptive-menu.css

@@ -0,0 +1,123 @@
+@layer rc-theme-material.components {
+  /*
+   * Declared on the theme root rather than on rc-adaptive-menu so menus
+   * rendered inside other shadow roots inherit the same values.
+   */
+  :where(.rc-theme-material, :host(.rc-theme-material)) {
+    --rc-adaptive-menu-gap: 0;
+    --rc-adaptive-menu-trigger-inline-size: 2rem;
+    --rc-adaptive-menu-trigger-block-size: 2.5rem;
+    --rc-adaptive-menu-touch-target-block-size: 3rem;
+    /*
+     * Unlike rc-button's narrow variant (opt-in, usable anywhere), the
+     * overflow trigger is always the trailing-most control in its toolbar
+     * by design -- there's no legitimate placement where something else
+     * needs the space this reclaims -- so this defaults unconditionally
+     * rather than needing its own opt-in variant. (3rem touch target - 2rem
+     * trigger-inline-size) / 2, matching --rc-adaptive-menu-trigger-inline-size
+     * above.
+     */
+    --rc-adaptive-menu-touch-target-overlap-inline-end: 0.5rem;
+    --rc-adaptive-menu-trigger-padding: 0.25rem;
+    --rc-adaptive-menu-trigger-border: 0;
+    --rc-adaptive-menu-trigger-radius: var(--md-sys-shape-corner-full, 9999px);
+    --rc-adaptive-menu-trigger-background: transparent;
+    --rc-adaptive-menu-trigger-color: var(--md-sys-color-on-surface-variant, ButtonText);
+    --rc-adaptive-menu-trigger-hover-background: color-mix(
+      in srgb,
+      var(--md-sys-color-on-surface-variant, CanvasText)
+        calc(var(--md-sys-state-hover-state-layer-opacity, 0.08) * 100%),
+      transparent
+    );
+    --rc-adaptive-menu-icon-size: 1.5rem;
+    --rc-adaptive-menu-popup-min-inline-size: 7rem;
+    --rc-adaptive-menu-item-min-block-size: 3rem;
+    --rc-adaptive-menu-item-padding-block: 0;
+    --rc-adaptive-menu-item-padding-inline: 0.75rem;
+    --rc-adaptive-menu-item-gap: 0.75rem;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-adaptive-menu
+    > [data-rc-action-promoted]:has([data-rc-menu-leading])
+    [data-rc-menu-label] {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-adaptive-menu
+    > rc-menu-button[data-rc-action-promoted] {
+    --rc-menu-button-indicator-size: 0px;
+    --rc-menu-button-indicator-inset: 0px;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-adaptive-menu
+    > rc-menu-button[data-rc-action-promoted]
+    > [slot='indicator'] {
+    display: none;
+  }
+}
+
+/*
+ * An action rc-adaptive-menu moves into its overflow renders as a menu row.
+ * rc-adaptive-menu maps the action's own tokens onto its item tokens in rc-base,
+ * which sits below every theme layer, so this layer repeats the mapping above the
+ * theme's button and menu-button variants (filled, tonal, icon-only sizes, and so
+ * on) that would otherwise restyle the row as a standalone control.
+ */
+@layer rc-theme-material.overrides {
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-adaptive-menu
+    > rc-button[data-rc-action-overflowed] {
+    --rc-button-block-size: var(--rc-adaptive-menu-item-min-block-size, 2.5em);
+    --rc-button-icon-size: 100%;
+    --rc-button-touch-target-inline-size: 100%;
+    --rc-button-touch-target-block-size: var(--rc-adaptive-menu-item-min-block-size, 2.5em);
+    --rc-button-padding-inline: var(
+      --rc-adaptive-menu-item-padding-inline,
+      var(--rc-item-padding-inline, 0.75em)
+    );
+    --rc-button-padding-block: var(
+      --rc-adaptive-menu-item-padding-block,
+      var(--rc-item-padding-block, 0.3em)
+    );
+    --rc-button-radius: 0;
+    --rc-button-bg: transparent;
+    --rc-button-color: currentColor;
+    --rc-button-border: 0;
+    --rc-button-state-layer-bg: currentColor;
+    --rc-button-progress-color: currentColor;
+  }
+
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-adaptive-menu
+    > rc-menu-button[data-rc-action-overflowed] {
+    --rc-menu-button-trigger-block-size: var(--rc-adaptive-menu-item-min-block-size, 2.5em);
+    --rc-menu-button-icon-size: 100%;
+    --rc-menu-button-touch-target-inline-size: 100%;
+    --rc-menu-button-touch-target-block-size: var(--rc-adaptive-menu-item-min-block-size, 2.5em);
+    --rc-menu-button-trigger-padding-block: var(
+      --rc-adaptive-menu-item-padding-block,
+      var(--rc-item-padding-block, 0.3em)
+    );
+    --rc-menu-button-trigger-padding-inline: var(
+      --rc-adaptive-menu-item-padding-inline,
+      var(--rc-item-padding-inline, 0.75em)
+    );
+    --rc-menu-button-trigger-gap: var(--rc-adaptive-menu-item-gap, var(--rc-item-gap, 0.5em));
+    --rc-menu-button-trigger-radius: 0;
+    --rc-menu-button-trigger-border: 0;
+    --rc-menu-button-trigger-background: transparent;
+    --rc-menu-button-trigger-color: currentColor;
+    --rc-menu-button-trigger-hover-color: currentColor;
+    --rc-menu-button-trigger-open-color: currentColor;
+  }
+}

package/components/app-bar.css

@@ -3,8 +3,10 @@
     box-shadow: var(--rc-shadow-level0, none);
     font-family: var(--md-sys-typescale-title-large-font, inherit);
     transition:
-      box-shadow 200ms ease,
-      translate 200ms ease;
+      box-shadow var(--rc-motion-effects-duration-default, 200ms)
+        var(--rc-motion-effects-easing-default, ease),
+      translate var(--rc-motion-spatial-duration-default, 400ms)
+        var(--rc-motion-spatial-easing-default, ease);
   }
 
   :where(.rc-theme-material, :host(.rc-theme-material)) rc-app-bar[data-scrolled] {
@@ -12,19 +14,59 @@
     box-shadow: var(--rc-shadow-level2, none);
   }
 
-  :where(.rc-theme-material, :host(.rc-theme-material)) rc-app-bar :is(button, [role='button']) {
-    inline-size: 3rem;
-    block-size: 3rem;
-    padding: 0.75rem;
+  /*
+   * A bare <button>/[role=button] dropped directly into an rc-app-bar's
+   * leading or trailing action slot gets full M3 icon-button treatment on
+   * its own — MD3 "Small" icon button: 40dp visual container / 24dp icon —
+   * without needing rc-button. Scoped to a *direct* child
+   * (`>`, not a descendant combinator): a button nested inside an
+   * `rc-button`/`rc-menu-button` slotted here is several levels deeper in
+   * the light DOM and already has its own correct sizing from that
+   * component's own theming; a descendant selector here would reach
+   * straight through and fight it.
+   */
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-app-bar
+    > :is(button, [role='button']):is([slot='leading'], [slot='trailing']) {
+    box-sizing: border-box;
+    position: relative;
+    display: inline-grid;
+    place-items: center;
+    inline-size: 2.5rem;
+    block-size: 2.5rem;
+    padding: 0;
     border: 0;
     border-radius: var(--md-sys-shape-corner-full, 999px);
     background: transparent;
     color: inherit;
   }
 
+  /* Accessible touch-target floor, decoupled from the visual size above —
+     the same affordance rc-button's own icon-only buttons provide. A
+     no-op once the visible button already meets or exceeds it. */
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-app-bar
+    > :is(button, [role='button']):is([slot='leading'], [slot='trailing'])::before {
+    content: '';
+    position: absolute;
+    inset: calc((3rem - max(100%, 2.5rem)) / -2);
+  }
+
+  /* Sizes the button's own content (typically a single icon) to the MD3
+     icon-button glyph size, regardless of whether it carries a marker
+     attribute — a direct child of an app-bar action button is
+     unambiguously its icon. */
+  :where(.rc-theme-material, :host(.rc-theme-material))
+    rc-app-bar
+    > :is(button, [role='button']):is([slot='leading'], [slot='trailing'])
+    > * {
+    font-size: 1.5rem;
+    line-height: 1.5rem;
+  }
+
   :where(.rc-theme-material, :host(.rc-theme-material))
     rc-app-bar
-    :is(button, [role='button']):hover {
+    > :is(button, [role='button']):is([slot='leading'], [slot='trailing']):hover {
     background: color-mix(in srgb, var(--md-sys-color-on-surface, CanvasText) 8%, transparent);
   }
 

package/components/bottom-sheet.css

@@ -1,6 +1,6 @@
 @layer rc-theme-material.components {
   :where(.rc-theme-material, :host(.rc-theme-material)) rc-bottom-sheet {
-    --rc-bottom-sheet-bg: var(--md-sys-color-surface, Canvas);
+    --rc-bottom-sheet-bg: var(--md-sys-color-surface-container-low, Canvas);
     --rc-bottom-sheet-handle-color: color-mix(
       in srgb,
       var(--md-sys-color-on-surface-variant, GrayText) 40%,
@@ -8,7 +8,7 @@
     );
     --rc-bottom-sheet-handle-radius: var(--md-sys-shape-corner-full, 999px);
     --rc-bottom-sheet-handle-target-block-size: 3rem;
-    --rc-bottom-sheet-snap-duration: var(--rc-motion-spatial-duration-default, 500ms);
+    --rc-bottom-sheet-snap-duration: var(--rc-motion-spatial-duration-fast, 300ms);
     --rc-bottom-sheet-snap-easing: var(
       --rc-motion-spatial-easing-default,
       cubic-bezier(0.2, 0, 0, 1)
@@ -28,7 +28,7 @@
     overflow: auto;
     border: 0;
     border-radius: var(--rc-bottom-sheet-radius, 1.75rem 1.75rem 0 0);
-    background: var(--rc-bottom-sheet-bg, var(--md-sys-color-surface, Canvas));
+    background: var(--rc-bottom-sheet-bg, var(--md-sys-color-surface-container-low, Canvas));
     color: var(--rc-bottom-sheet-color, var(--md-sys-color-on-surface, CanvasText));
     box-shadow: var(--rc-bottom-sheet-shadow, var(--rc-shadow-level1, none));
     font-family: var(--md-sys-typescale-body-medium-font, inherit);
@@ -41,10 +41,13 @@
     );
   }
 
+  /* Descendant (not child) combinator: consuming apps may nest the handle
+     inside their own peek-content wrapper (e.g. grouped with a summary
+     row) rather than placing it as a direct child of dialog. */
   :where(.rc-theme-material, :host(.rc-theme-material))
     rc-bottom-sheet
     > dialog
-    > [data-rc-bottom-sheet-handle] {
+    [data-rc-bottom-sheet-handle] {
     position: relative;
     display: block;
     inline-size: var(--rc-bottom-sheet-handle-target-inline-size, 100%);
@@ -63,10 +66,10 @@
   :where(.rc-theme-material, :host(.rc-theme-material))
     rc-bottom-sheet
     > dialog
-    > [data-rc-bottom-sheet-handle]::before {
+    [data-rc-bottom-sheet-handle]::before {
     content: '';
     position: absolute;
-    inset-block-start: 50%;
+    inset-block-start: var(--rc-bottom-sheet-handle-offset, 50%);
     inset-inline-start: 50%;
     inline-size: var(--rc-bottom-sheet-handle-inline-size, 2rem);
     block-size: var(--rc-bottom-sheet-handle-block-size, 0.25rem);
@@ -78,7 +81,7 @@
   :where(.rc-theme-material, :host(.rc-theme-material))
     rc-bottom-sheet
     > dialog
-    > [data-rc-bottom-sheet-handle]:focus-visible {
+    [data-rc-bottom-sheet-handle]:focus-visible {
     outline: 0.125rem solid var(--md-sys-color-primary, Highlight);
     outline-offset: -0.25rem;
   }