@seed-design/css 2.4.2 → 2.6.0

package/recipes/chip-tabs.css

@@ -48,7 +48,12 @@
     flex-shrink: 0;
     border-radius: var(--seed-radius-full);
     font-weight: var(--seed-font-weight-medium);
-    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+}
+.seed-chip-tabs__trigger:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
+    scale: var(--seed-feedback-scale);
+}
+.seed-chip-tabs__trigger {
+    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
     outline: var(--seed-dimension-x0_5) solid transparent;
     outline-offset: var(--seed-dimension-x0_5);
 }

package/recipes/chip-tabs.layered.css

@@ -51,9 +51,6 @@
     border-radius: var(--seed-radius-full);
     font-family: inherit;
     font-weight: var(--seed-font-weight-medium);
-    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
-    outline: var(--seed-dimension-x0_5) solid transparent;
-    outline-offset: var(--seed-dimension-x0_5);
     border: none;
     flex-shrink: 0;
     justify-content: center;
@@ -61,6 +58,16 @@
     display: flex;
   }
 
+  .seed-chip-tabs__trigger:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
+    scale: var(--seed-feedback-scale);
+  }
+
+  .seed-chip-tabs__trigger {
+    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+    outline: var(--seed-dimension-x0_5) solid transparent;
+    outline-offset: var(--seed-dimension-x0_5);
+  }
+
   .seed-chip-tabs__trigger:is(:focus-visible, [data-focus-visible]) {
     outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
     outline-offset: var(--seed-dimension-x0_5);

package/recipes/chip.css

@@ -15,9 +15,12 @@
     flex-shrink: 0;
     line-height: 1;
     border-radius: var(--seed-radius-full);
-    transition-duration: var(--seed-duration-color-transition);
-    transition-timing-function: var(--seed-timing-function-easing);
-    transition-property: background-color, color, border-color, box-shadow, outline-color;
+}
+.seed-chip__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
+    scale: var(--seed-feedback-scale);
+}
+.seed-chip__root {
+    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), color var(--seed-duration-color-transition) var(--seed-timing-function-easing), border-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), box-shadow var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale);
     outline: var(--seed-dimension-x0_5) solid transparent;
     outline-offset: var(--seed-dimension-x0_5);
 }

package/recipes/chip.layered.css

@@ -8,21 +8,26 @@
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     border-radius: var(--seed-radius-full);
-    transition-duration: var(--seed-duration-color-transition);
-    transition-timing-function: var(--seed-timing-function-easing);
-    outline: var(--seed-dimension-x0_5) solid transparent;
-    outline-offset: var(--seed-dimension-x0_5);
     border: none;
     flex-shrink: 0;
     justify-content: center;
     align-items: center;
     font-family: inherit;
     line-height: 1;
-    transition-property: background-color, color, border-color, box-shadow, outline-color;
     display: inline-flex;
     position: relative;
   }
 
+  .seed-chip__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
+    scale: var(--seed-feedback-scale);
+  }
+
+  .seed-chip__root {
+    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), color var(--seed-duration-color-transition) var(--seed-timing-function-easing), border-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), box-shadow var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale);
+    outline: var(--seed-dimension-x0_5) solid transparent;
+    outline-offset: var(--seed-dimension-x0_5);
+  }
+
   .seed-chip__root:is(:focus-visible, [data-focus-visible]) {
     outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
     outline-offset: var(--seed-dimension-x0_5);

package/recipes/content-dialog.css

@@ -186,7 +186,7 @@
     padding: calc((52px - 22px) / 2);
     margin: calc((22px - 52px) / 2);
     cursor: pointer;
-    transition: background var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+    transition: background var(--seed-duration-color-transition) var(--seed-timing-function-easing), scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
     --seed-icon-size: 22px;
     --seed-icon-color: var(--seed-color-fg-neutral-subtle);
     outline: var(--seed-dimension-x0_5) solid transparent;
@@ -196,6 +196,9 @@
     outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
     outline-offset: var(--seed-dimension-x0_5);
 }
+.seed-content-dialog__closeButton:is(:active, [data-active]) {
+    scale: var(--seed-feedback-scale);
+}
 @media (hover: hover) and (pointer: fine) {
     .seed-content-dialog__closeButton:is(:hover, [data-hover]) {
         background: var(--seed-color-bg-transparent-pressed);

package/recipes/content-dialog.layered.css

@@ -199,7 +199,7 @@
     background: var(--seed-color-bg-transparent);
     border-radius: var(--seed-radius-r3);
     cursor: pointer;
-    transition: background var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+    transition: background var(--seed-duration-color-transition) var(--seed-timing-function-easing), scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
     --seed-icon-size: 22px;
     --seed-icon-color: var(--seed-color-fg-neutral-subtle);
     outline: var(--seed-dimension-x0_5) solid transparent;
@@ -218,6 +218,10 @@
     outline-offset: var(--seed-dimension-x0_5);
   }
 
+  .seed-content-dialog__closeButton:is(:active, [data-active]) {
+    scale: var(--seed-feedback-scale);
+  }
+
   @media (hover: hover) and (pointer: fine) {
     .seed-content-dialog__closeButton:is(:hover, [data-hover]) {
       background: var(--seed-color-bg-transparent-pressed);

package/recipes/contextual-floating-button.css

@@ -41,7 +41,12 @@
     --seed-icon-size: 22px;
     --size: 16px;
     --thickness: 2px;
-    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+}
+.seed-contextual-floating-button:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
+    scale: var(--seed-feedback-scale);
+}
+.seed-contextual-floating-button {
+    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
 }
 .seed-contextual-floating-button--variant_solid {
     background: var(--seed-color-bg-neutral-inverted);

package/recipes/contextual-floating-button.layered.css

@@ -45,7 +45,14 @@
     --seed-icon-size: 22px;
     --size: 16px;
     --thickness: 2px;
-    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+  }
+
+  .seed-contextual-floating-button:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
+    scale: var(--seed-feedback-scale);
+  }
+
+  .seed-contextual-floating-button {
+    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
   }
 
   .seed-contextual-floating-button--variant_solid {

package/recipes/date-picker.css

@@ -228,25 +228,31 @@
     color: var(--seed-color-fg-neutral-inverted);
 }
 @media (hover: hover) and (pointer: fine) {
-    .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover])::before {
+    .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):not([data-range-start-readonly]):is(:hover, [data-hover])::before {
         background-color: var(--seed-color-bg-transparent-pressed);
     }
 }
 @media not all and (hover: hover) and (pointer: fine) {
-    .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active])::before {
+    .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):not([data-range-start-readonly]):is(:active, [data-active])::before {
         background-color: var(--seed-color-bg-transparent-pressed);
     }
 }
 @media (hover: hover) and (pointer: fine) {
-    .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):is([aria-selected=true], [data-selected]):is(:hover, [data-hover]):not([data-in-range])::before {
+    .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):not([data-range-start-readonly]):is([aria-selected=true], [data-selected]):is(:hover, [data-hover]):not([data-in-range])::before {
         background-color: var(--seed-color-bg-neutral-inverted);
     }
 }
 @media not all and (hover: hover) and (pointer: fine) {
-    .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):is([aria-selected=true], [data-selected]):is(:active, [data-active]):not([data-in-range])::before {
+    .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):not([data-range-start-readonly]):is([aria-selected=true], [data-selected]):is(:active, [data-active]):not([data-in-range])::before {
         background-color: var(--seed-color-bg-neutral-inverted);
     }
 }
+.seed-date-picker__dateButton[data-range-start-readonly]::before {
+    background-color: var(--seed-color-palette-gray-600);
+}
+.seed-date-picker__dateButton[data-range-start-readonly] {
+    cursor: default;
+}
 .seed-date-picker__dateButton[data-in-range] {
     color: var(--seed-color-fg-neutral-muted);
 }

package/recipes/date-picker.layered.css

@@ -259,29 +259,37 @@
   }
 
   @media (hover: hover) and (pointer: fine) {
-    .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]):before {
+    .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):not([data-range-start-readonly]):is(:hover, [data-hover]):before {
       background-color: var(--seed-color-bg-transparent-pressed);
     }
   }
 
   @media not all and (hover: hover) and (pointer: fine) {
-    .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]):before {
+    .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):not([data-range-start-readonly]):is(:active, [data-active]):before {
       background-color: var(--seed-color-bg-transparent-pressed);
     }
   }
 
   @media (hover: hover) and (pointer: fine) {
-    .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):is([aria-selected="true"], [data-selected]):is(:hover, [data-hover]):not([data-in-range]):before {
+    .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):not([data-range-start-readonly]):is([aria-selected="true"], [data-selected]):is(:hover, [data-hover]):not([data-in-range]):before {
       background-color: var(--seed-color-bg-neutral-inverted);
     }
   }
 
   @media not all and (hover: hover) and (pointer: fine) {
-    .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):is([aria-selected="true"], [data-selected]):is(:active, [data-active]):not([data-in-range]):before {
+    .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):not([data-range-start-readonly]):is([aria-selected="true"], [data-selected]):is(:active, [data-active]):not([data-in-range]):before {
       background-color: var(--seed-color-bg-neutral-inverted);
     }
   }
 
+  .seed-date-picker__dateButton[data-range-start-readonly]:before {
+    background-color: var(--seed-color-palette-gray-600);
+  }
+
+  .seed-date-picker__dateButton[data-range-start-readonly] {
+    cursor: default;
+  }
+
   .seed-date-picker__dateButton[data-in-range] {
     color: var(--seed-color-fg-neutral-muted);
   }

package/recipes/floating-action-button.css

@@ -30,7 +30,12 @@
     font-size: var(--seed-font-size-t5);
     line-height: var(--seed-line-height-t5);
     font-weight: var(--seed-font-weight-bold);
-    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), max-width var(--seed-duration-d4) var(--seed-timing-function-easing), height var(--seed-duration-d4) var(--seed-timing-function-easing), padding var(--seed-duration-d4) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+}
+.seed-floating-action-button__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
+    scale: var(--seed-feedback-scale);
+}
+.seed-floating-action-button__root {
+    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), max-width var(--seed-duration-d4) var(--seed-timing-function-easing), height var(--seed-duration-d4) var(--seed-timing-function-easing), padding var(--seed-duration-d4) var(--seed-timing-function-easing), scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
 }
 @media (hover: hover) and (pointer: fine) {
     .seed-floating-action-button__root:is(:hover, [data-hover]) {

package/recipes/floating-action-button.layered.css

@@ -32,11 +32,18 @@
     font-size: var(--seed-font-size-t5);
     line-height: var(--seed-line-height-t5);
     font-weight: var(--seed-font-weight-bold);
-    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), max-width var(--seed-duration-d4) var(--seed-timing-function-easing), height var(--seed-duration-d4) var(--seed-timing-function-easing), padding var(--seed-duration-d4) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
     position: relative;
     overflow: hidden;
   }
 
+  .seed-floating-action-button__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
+    scale: var(--seed-feedback-scale);
+  }
+
+  .seed-floating-action-button__root {
+    transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), max-width var(--seed-duration-d4) var(--seed-timing-function-easing), height var(--seed-duration-d4) var(--seed-timing-function-easing), padding var(--seed-duration-d4) var(--seed-timing-function-easing), scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+  }
+
   @media (hover: hover) and (pointer: fine) {
     .seed-floating-action-button__root:is(:hover, [data-hover]) {
       background: var(--seed-color-bg-brand-solid-pressed);

package/recipes/help-bubble.css

@@ -6,11 +6,12 @@
 .seed-help-bubble__content {
     display: flex;
     align-items: flex-start;
+    box-sizing: border-box;
     background: var(--seed-color-bg-neutral-inverted);
     padding-inline: var(--seed-dimension-x3);
     padding-block: var(--seed-dimension-x2_5);
     border-radius: var(--seed-radius-r3);
-    --seed-box-max-width-base: none;
+    --seed-box-max-width-base: 280px;
     --seed-box-max-width-sm: var(--seed-box-max-width-base, initial);
     --seed-box-max-width-md: var(--seed-box-max-width-sm, initial);
     --seed-box-max-width-lg: var(--seed-box-max-width-md, initial);
@@ -90,7 +91,12 @@
     --seed-icon-size: var(--seed-dimension-x3_5);
     --seed-icon-color: var(--seed-color-fg-neutral-inverted);
     border-radius: var(--seed-radius-r3);
-    transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+}
+.seed-help-bubble__closeButton:is(:active, [data-active]) {
+    scale: var(--seed-feedback-scale);
+}
+.seed-help-bubble__closeButton {
+    transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
     outline: var(--seed-dimension-x0_5) solid transparent;
     outline-offset: calc(var(--seed-dimension-x0_5) * -1);
 }

package/recipes/help-bubble.layered.css

@@ -6,11 +6,12 @@
   }
 
   .seed-help-bubble__content {
+    box-sizing: border-box;
     background: var(--seed-color-bg-neutral-inverted);
     padding-inline: var(--seed-dimension-x3);
     padding-block: var(--seed-dimension-x2_5);
     border-radius: var(--seed-radius-r3);
-    --seed-box-max-width-base: none;
+    --seed-box-max-width-base: 280px;
     --seed-box-max-width-sm: var(--seed-box-max-width-base, initial);
     --seed-box-max-width-md: var(--seed-box-max-width-sm, initial);
     --seed-box-max-width-lg: var(--seed-box-max-width-md, initial);
@@ -97,9 +98,6 @@
     --seed-icon-size: var(--seed-dimension-x3_5);
     --seed-icon-color: var(--seed-color-fg-neutral-inverted);
     border-radius: var(--seed-radius-r3);
-    transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
-    outline: var(--seed-dimension-x0_5) solid transparent;
-    outline-offset: calc(var(--seed-dimension-x0_5) * -1);
     background: none;
     border: none;
     justify-content: center;
@@ -107,6 +105,16 @@
     display: flex;
   }
 
+  .seed-help-bubble__closeButton:is(:active, [data-active]) {
+    scale: var(--seed-feedback-scale);
+  }
+
+  .seed-help-bubble__closeButton {
+    transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+    outline: var(--seed-dimension-x0_5) solid transparent;
+    outline-offset: calc(var(--seed-dimension-x0_5) * -1);
+  }
+
   .seed-help-bubble__closeButton:is(:focus-visible, [data-focus-visible]) {
     outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
     outline-offset: calc(var(--seed-dimension-x0_5) * -1);

package/recipes/image-frame-reaction-button.css

@@ -11,6 +11,12 @@
     height: var(--seed-dimension-x6);
     background: transparent;
 }
+.seed-image-frame-reaction-button__root:is(:active, [data-active]) {
+    scale: var(--seed-feedback-scale);
+}
+.seed-image-frame-reaction-button__root {
+    transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale);
+}
 .seed-image-frame-reaction-button__root::before {
     content: '';
     position: absolute;

package/recipes/image-frame-reaction-button.layered.css

@@ -13,6 +13,14 @@
     position: relative;
   }
 
+  .seed-image-frame-reaction-button__root:is(:active, [data-active]) {
+    scale: var(--seed-feedback-scale);
+  }
+
+  .seed-image-frame-reaction-button__root {
+    transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale);
+  }
+
   .seed-image-frame-reaction-button__root:before {
     content: "";
     inset: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);

package/recipes/input-button.css

@@ -126,7 +126,12 @@
     background-color: transparent;
     padding: 0;
     border-radius: var(--seed-radius-full);
-    transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+}
+.seed-input-button__clearButton:is(:active, [data-active]) {
+    scale: var(--seed-feedback-scale);
+}
+.seed-input-button__clearButton {
+    transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
     outline: var(--seed-dimension-x0_5) solid transparent;
     outline-offset: var(--seed-dimension-x0_5);
 }

package/recipes/input-button.layered.css

@@ -146,14 +146,21 @@
   .seed-input-button__clearButton {
     cursor: pointer;
     border-radius: var(--seed-radius-full);
-    transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
-    outline: var(--seed-dimension-x0_5) solid transparent;
-    outline-offset: var(--seed-dimension-x0_5);
     background-color: #0000;
     border: none;
     padding: 0;
   }
 
+  .seed-input-button__clearButton:is(:active, [data-active]) {
+    scale: var(--seed-feedback-scale);
+  }
+
+  .seed-input-button__clearButton {
+    transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+    outline: var(--seed-dimension-x0_5) solid transparent;
+    outline-offset: var(--seed-dimension-x0_5);
+  }
+
   .seed-input-button__clearButton:is(:focus-visible, [data-focus-visible]) {
     outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
     outline-offset: var(--seed-dimension-x0_5);

package/recipes/list-item.css

@@ -25,6 +25,9 @@
     --seed-box-padding-right: var(--seed-box-padding-right-base, initial);
     padding-right: var(--seed-box-padding-right);
     --seed-focus-ring: none;
+    --seed-checkmark-feedback-scale: 1;
+    --seed-radiomark-feedback-scale: 1;
+    --seed-switchmark-feedback-scale: 1;
     --seed-icon-size: 22px;
     --seed-icon-color: var(--seed-color-fg-neutral);
 }
@@ -45,6 +48,9 @@
     --seed-box-gap: var(--seed-box-gap-base, initial);
     gap: var(--seed-box-gap);
     --seed-focus-ring: none;
+    --seed-checkmark-feedback-scale: 1;
+    --seed-radiomark-feedback-scale: 1;
+    --seed-switchmark-feedback-scale: 1;
     font-size: var(--seed-font-size-t5);
     line-height: var(--seed-line-height-t5);
     font-weight: var(--seed-font-weight-regular);

package/recipes/list-item.layered.css

@@ -24,6 +24,9 @@
     --seed-box-padding-right: var(--seed-box-padding-right-base, initial);
     padding-right: var(--seed-box-padding-right);
     --seed-focus-ring: none;
+    --seed-checkmark-feedback-scale: 1;
+    --seed-radiomark-feedback-scale: 1;
+    --seed-switchmark-feedback-scale: 1;
     --seed-icon-size: 22px;
     --seed-icon-color: var(--seed-color-fg-neutral);
     flex-shrink: 0;
@@ -47,6 +50,9 @@
     align-items: center;
     gap: var(--seed-box-gap);
     --seed-focus-ring: none;
+    --seed-checkmark-feedback-scale: 1;
+    --seed-radiomark-feedback-scale: 1;
+    --seed-switchmark-feedback-scale: 1;
     font-size: var(--seed-font-size-t5);
     line-height: var(--seed-line-height-t5);
     font-weight: var(--seed-font-weight-regular);

package/recipes/menu-sheet.css

@@ -24,6 +24,7 @@
     word-break: break-all;
     z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
     background: var(--seed-color-bg-layer-floating);
+    max-width: 480px;
     padding-inline: var(--seed-dimension-spacing-x-global-gutter);
     padding-top: var(--menu-sheet-header-padding-top, var(--seed-dimension-x4));
     padding-bottom: calc(var(--seed-dimension-x4) + var(--seed-safe-area-bottom));
@@ -103,7 +104,12 @@
     font-size: var(--seed-font-size-t5);
     line-height: var(--seed-line-height-t5);
     font-weight: var(--seed-font-weight-medium);
-    transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+}
+.seed-menu-sheet__closeButton:is(:active, [data-active]) {
+    scale: var(--seed-feedback-scale);
+}
+.seed-menu-sheet__closeButton {
+    transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
 }
 @media (hover: hover) and (pointer: fine) {
     .seed-menu-sheet__closeButton:is(:hover, [data-hover]) {

package/recipes/menu-sheet.layered.css

@@ -22,6 +22,7 @@
     word-break: break-all;
     z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
     background: var(--seed-color-bg-layer-floating);
+    max-width: 480px;
     padding-inline: var(--seed-dimension-spacing-x-global-gutter);
     padding-top: var(--menu-sheet-header-padding-top, var(--seed-dimension-x4));
     padding-bottom: calc(var(--seed-dimension-x4) + var(--seed-safe-area-bottom));
@@ -112,13 +113,20 @@
     font-size: var(--seed-font-size-t5);
     line-height: var(--seed-line-height-t5);
     font-weight: var(--seed-font-weight-medium);
-    transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
     border: none;
     justify-content: center;
     align-items: center;
     display: flex;
   }
 
+  .seed-menu-sheet__closeButton:is(:active, [data-active]) {
+    scale: var(--seed-feedback-scale);
+  }
+
+  .seed-menu-sheet__closeButton {
+    transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
+  }
+
   @media (hover: hover) and (pointer: fine) {
     .seed-menu-sheet__closeButton:is(:hover, [data-hover]) {
       background-color: var(--seed-color-bg-neutral-weak-pressed);

package/recipes/menu.css

@@ -40,7 +40,7 @@
 }
 .seed-menu__scrollArea {
     overflow-y: auto;
-    max-height: min(480px, var(--seed-menu-available-height, 480px));
+    max-height: min(var(--seed-menu-max-height, 480px), var(--seed-menu-available-height, var(--seed-menu-max-height, 480px)));
     box-sizing: border-box;
     padding-block: var(--seed-dimension-x2);
     display: flex;

package/recipes/menu.layered.css

@@ -47,7 +47,7 @@
   }
 
   .seed-menu__scrollArea {
-    max-height: min(480px, var(--seed-menu-available-height, 480px));
+    max-height: min(var(--seed-menu-max-height, 480px), var(--seed-menu-available-height, var(--seed-menu-max-height, 480px)));
     box-sizing: border-box;
     padding-block: var(--seed-dimension-x2);
     gap: var(--seed-dimension-x2);