material-inspired-component-library 8.1.0 → 9.0.0

package/components/appbar/index.scss

@@ -19,7 +19,6 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-@use '../../foundations';
 @use '../../foundations/layout';
 @use '../../styles/elevation';
 @use '../../styles/shape';
@@ -35,23 +34,23 @@
 @include typography.scale('headline-medium');
 @include typography.scale('title-large');
 @include typography.scale('title-medium');
-@include typography.scale('title-small');
+@include typography.scale('label-large');
 @include typography.scale('label-medium');
 
 @mixin appbar-sticky() {
     position: sticky;
     inset: unset;
-    inset-block-start: 0;
+    inset-block-start: env(safe-area-inset-top, 0px);
     inset-inline-start: 0;
     animation: 1ms linear alternate appbar-background;
     animation-timeline: scroll(root);
 }
 
 .micl-appbar {
-    --md-sys-appbar-height: 64px;
-    --md-sys-appbar-padding-block-start: 0px;
-    --md-sys-appbar-padding-block-end: 0px;
-    --md-sys-appbar-padding-inline: 0px;
+    --_height: 64px;
+    --_padding-block-start: 0px;
+    --_padding-block-end: 0px;
+    --_padding-inline: 0px;
 
     box-sizing: border-box;
     display: grid;
@@ -62,12 +61,12 @@
     grid-template-rows: 64px max-content;
     column-gap: 4px;
     align-items: center;
-    min-block-size: var(--md-sys-appbar-height);
-    padding-block: var(--md-sys-appbar-padding-block-start) var(--md-sys-appbar-padding-block-end);
-    padding-inline: var(--md-sys-appbar-padding-inline);
+    min-block-size: var(--_height);
+    padding-block: var(--_padding-block-start) var(--_padding-block-end);
+    padding-inline: var(--_padding-inline);
     border-start-start-radius: inherit;
     border-start-end-radius: inherit;
-    background-color: inherit;
+    background-color: var(--md-comp-app-bar-container-color, inherit);
     box-shadow: var(--md-sys-elevation-level0);
     z-index: 8;
 
@@ -81,7 +80,7 @@
     .micl-appbar__leading-icon {
         grid-area: appbar-leading;
         margin-inline-start: var(--md-sys-layout-window-margin);
-        color: var(--md-sys-color-on-surface);
+        color: var(--md-comp-app-bar-leading-icon-color, var(--md-sys-color-on-surface));
     }
     .micl-appbar__headline {
         display: flex;
@@ -90,25 +89,22 @@
         align-items: flex-start;
         margin: 8px 0;
         border-radius: var(--md-sys-shape-corner-none);
-        color: var(--md-sys-color-on-surface);
+        color: var(--md-comp-app-bar-title-color, var(--md-sys-color-on-surface));
 
         &.micl-appbar__headline--center {
             align-items: center;
             text-align: center;
         }
-        h1, h2, h3, h4, h5, h6, .micl-heading {
+        :is(h1, h2, h3, h4, h5, h6, .micl-heading) {
             @include typography.title-large;
 
             margin: 0;
         }
-        .micl-appbar__subtitle {
-            margin: 0;
-            color: var(--md-sys-color-on-surface-variant);
-        }
-    }
-    &:has(.micl-appbar__subtitle) {
         .micl-appbar__subtitle {
             @include typography.label-medium;
+
+            margin: 0;
+            color: var(--md-comp-app-bar-subtitle-color, var(--md-sys-color-on-surface-variant));
         }
     }
     .micl-appbar__trailing {
@@ -118,11 +114,11 @@
     .micl-appbar__trailing-icon {
         grid-area: appbar-trailing;
         margin-inline-end: var(--md-sys-layout-window-margin);
-        color: var(--md-sys-color-on-surface-variant);
+        color: var(--md-comp-app-bar-trailing-icon-color, var(--md-sys-color-on-surface-variant));
     }
     &.micl-appbar--medium {
-        --md-sys-appbar-height: 112px;
-        --md-sys-appbar-padding-block-end: 12px;
+        --_height: 112px;
+        --_padding-block-end: 12px;
 
         padding-inline-start: 0;
 
@@ -131,21 +127,21 @@
             margin: 0;
             padding-inline-start: var(--md-sys-layout-window-margin);
 
-            h1, h2, h3, h4, h5, h6, .micl-heading {
+            :is(h1, h2, h3, h4, h5, h6, .micl-heading) {
                 @include typography.headline-medium;
             }
         }
         &:has(.micl-appbar__subtitle) {
-            --md-sys-appbar-height: 136px;
+            --_height: 136px;
 
             .micl-appbar__subtitle {
-                @include typography.title-small;
+                @include typography.label-large;
             }
         }
     }
     &.micl-appbar--large {
-        --md-sys-appbar-height: 120px;
-        --md-sys-appbar-padding-block-end: 12px;
+        --_height: 120px;
+        --_padding-block-end: 12px;
 
         padding-inline-start: 0;
 
@@ -154,12 +150,12 @@
             margin: 0;
             padding-inline-start: var(--md-sys-layout-window-margin);
 
-            h1, h2, h3, h4, h5, h6, .micl-heading {
+            :is(h1, h2, h3, h4, h5, h6, .micl-heading) {
                 @include typography.display-small;
             }
         }
         &:has(.micl-appbar__subtitle) {
-            --md-sys-appbar-height: 152px;
+            --_height: 152px;
 
             .micl-appbar__subtitle {
                 @include typography.title-medium;
@@ -168,36 +164,36 @@
     }
 }
 
-.micl-body:not(:has(> .micl-pane:nth-child(2))) {
+.micl-panes:not(:has(> .micl-pane:nth-child(2))) {
     .micl-appbar:not(.micl-appbar--not-sticky) {
         @include appbar-sticky;
     }
 }
-.micl-body:has(> .micl-pane:nth-child(2)) {
-    @media (max-width: layout.$md-sys-window-medium-min) {
+.micl-panes:has(> .micl-pane:nth-child(2)) {
+    @media (max-width: layout.$md-sys-breakpoint-medium-min) {
         .micl-appbar:not(.micl-appbar--not-sticky) {
             @include appbar-sticky;
         }
     }
-    @media (min-width: layout.$md-sys-window-medium-min) and (max-width: layout.$md-sys-window-medium-max) {
-        &.micl-body--stacked-to-expanded,
-        &.micl-body--stacked-to-large,
-        &.micl-body--stacked-to-extralarge {
+    @media (min-width: layout.$md-sys-breakpoint-medium-min) and (max-width: layout.$md-sys-breakpoint-medium-max) {
+        &.micl-panes--stacked-to-expanded,
+        &.micl-panes--stacked-to-large,
+        &.micl-panes--stacked-to-extralarge {
             .micl-appbar:not(.micl-appbar--not-sticky) {
                 @include appbar-sticky;
             }
         }
     }
-    @media (min-width: layout.$md-sys-window-expanded-min) and (max-width: layout.$md-sys-window-expanded-max) {
-        &.micl-body--stacked-to-large,
-        &.micl-body--stacked-to-extralarge {
+    @media (min-width: layout.$md-sys-breakpoint-expanded-min) and (max-width: layout.$md-sys-breakpoint-expanded-max) {
+        &.micl-panes--stacked-to-large,
+        &.micl-panes--stacked-to-extralarge {
             .micl-appbar:not(.micl-appbar--not-sticky) {
                 @include appbar-sticky;
             }
         }
     }
-    @media (min-width: layout.$md-sys-window-large-min) and (max-width: layout.$md-sys-window-large-max) {
-        &.micl-body--stacked-to-extralarge {
+    @media (min-width: layout.$md-sys-breakpoint-large-min) and (max-width: layout.$md-sys-breakpoint-large-max) {
+        &.micl-panes--stacked-to-extralarge {
             .micl-appbar:not(.micl-appbar--not-sticky) {
                 @include appbar-sticky;
             }
@@ -212,7 +208,7 @@
         border-start-end-radius: inherit;
     }
     10% {
-        background-color: var(--md-sys-color-surface-container);
+        background-color: var(--md-comp-app-bar-on-scroll-container-color, var(--md-sys-color-surface-container));
         box-shadow: var(--md-sys-elevation-level2);
     }
     50% {
@@ -220,7 +216,7 @@
         border-start-end-radius: 0;
     }
     100% {
-        background-color: var(--md-sys-color-surface-container);
+        background-color: var(--md-comp-app-bar-on-scroll-container-color, var(--md-sys-color-surface-container));
         box-shadow: var(--md-sys-elevation-level2);
         border-start-start-radius: 0;
         border-start-end-radius: 0;

package/components/badge/README.md

@@ -45,23 +45,25 @@ You can fine-tune the badge's position relative to its anchor using the followin
 
 | Variable name | Default Value | Description |
 | ------------- | ------------- | ----------- |
-| --md-sys-badge-inline-offset | 0px | Adjusts the horizontal position of the badge |
-| --md-sys-badge-block-offset | 0px | Adjusts the vertical position of the badge |
+| `--md-comp-badge-inline-offset` | `0px` | Adjusts the horizontal position of the badge |
+| `--md-comp-badge-block-offset` | `0px` | Adjusts the vertical position of the badge |
 
 
-## Customizations
-You can customize the appearance of the Badge component by overriding its global CSS variables. These variables are declared on the `:root` pseudo-class and can be changed on any appropriate parent element to affect its child badges.
+## Theming
+Each badge can be themed with CSS custom properties that follow the Material Design 3 component-token naming convention. Set them on any appropriate parent element to affect its child badges.
 
-| Variable name | Default Value | Description |
-| ------------- | ------------- | ----------- |
-| --md-sys-badge-small-size | 6px | The height and width of the small badge |
-| --md-sys-badge-large-size | 16px | The height and minimum width of the large badge |
-| --md-sys-badge-large-padding | 4px | The horizontal padding used for the large badge |
+| Custom property | Meaning | Default |
+|---|---|---|
+| `--md-comp-badge-size` | The height and width of the small badge | `6px` |
+| `--md-comp-badge-large-size` | The height and minimum width of the large badge | `16px` |
+| `--md-comp-badge-large-padding` | The horizontal padding used for the large badge | `4px` |
+| `--md-comp-badge-color` | The background color of the badge | `--md-sys-color-error` |
+| `--md-comp-badge-large-label-text-color` | The text color of the large badge | `--md-sys-color-on-error` |
 
 **Example: Changing the size of the small badge**
 
 ```HTML
-<div style="--md-sys-badge-small-size:8px">
+<div style="--md-comp-badge-size:8px">
   <span class="micl-badge micl-badge--small"></span>
 </div>
 ```

package/components/badge/index.scss

@@ -19,47 +19,43 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-@use '../../foundations';
 @use '../../styles/typography';
 
 @include typography.scale('label-small');
 
-:root {
-    --md-sys-badge-small-size: 6px;
-    --md-sys-badge-large-size: 16px;
-    --md-sys-badge-large-padding: 4px;
-    --md-sys-badge-inline-offset: 0px;
-    --md-sys-badge-block-offset: 0px;
-}
-
 .micl-badge {
+    --_size: var(--md-comp-badge-size, 6px);
+    --_large-size: var(--md-comp-badge-large-size, 16px);
+    --_dx: var(--md-comp-badge-inline-offset, 0px);
+    --_dy: var(--md-comp-badge-block-offset, 0px);
+
     box-sizing: border-box;
     position: fixed;
     inset: 0;
     margin: 0;
     overflow-x: hidden;
-    background-color: var(--md-sys-color-error);
-    color: var(--md-sys-color-on-error);
+    background-color: var(--md-comp-badge-color, var(--md-sys-color-error));
+    color: var(--md-comp-badge-large-label-text-color, var(--md-sys-color-on-error));
 
     &.micl-badge--small {
-        inline-size: var(--md-sys-badge-small-size);
-        block-size: var(--md-sys-badge-small-size);
-        inset-block-start: calc(anchor(start) + var(--md-sys-badge-block-offset));
-        inset-inline-start: calc(anchor(end) - var(--md-sys-badge-small-size) + var(--md-sys-badge-inline-offset));
+        inline-size: var(--_size);
+        block-size: var(--_size);
+        inset-block-start: calc(anchor(start) + var(--_dy));
+        inset-inline-start: calc(anchor(end) - var(--_size) + var(--_dx));
         padding: 0;
-        border-radius: calc(var(--md-sys-badge-small-size) / 2);
+        border-radius: calc(var(--_size) / 2);
     }
     &:not(.micl-badge--small) {
         @include typography.label-small;
 
         inline-size: fit-content;
         max-inline-size: 34px;
-        min-inline-size: var(--md-sys-badge-large-size);
-        block-size: var(--md-sys-badge-large-size);
-        inset-block-start: calc(anchor(start) - (var(--md-sys-badge-large-size) - 14px) + var(--md-sys-badge-block-offset));
-        inset-inline-start: calc(anchor(end) - 12px + var(--md-sys-badge-inline-offset));
-        padding-inline: var(--md-sys-badge-large-padding);
-        border-radius: calc(var(--md-sys-badge-large-size) / 2);
+        min-inline-size: var(--_large-size);
+        block-size: var(--_large-size);
+        inset-block-start: calc(anchor(start) - (var(--_large-size) - 14px) + var(--_dy));
+        inset-inline-start: calc(anchor(end) - 12px + var(--_dx));
+        padding-inline: var(--md-comp-badge-large-padding, 4px);
+        border-radius: calc(var(--_large-size) / 2);
     }
 }
 
@@ -67,13 +63,13 @@
     .micl-badge {
         position: absolute;
         inset: 0 !important;
-        margin-block: calc(12px + var(--md-sys-badge-block-offset)) auto;
+        margin-block: calc(12px + var(--_dy)) auto;
 
         &.micl-badge--small {
-            margin-inline-start: calc(var(--md-sys-icon-size) - var(--md-sys-badge-small-size) - var(--md-sys-badge-inline-offset));
+            margin-inline-start: calc(var(--md-sys-icon-size, 24px) - var(--_size) - var(--_dx));
         }
         &:not(.micl-badge--small) {
-            margin-inline-start: calc(12px - var(--md-sys-badge-inline-offset));
+            margin-inline-start: calc(12px - var(--_dx));
         }
     }
 }

package/components/bottomsheet/README.md

@@ -86,7 +86,32 @@ The initial height is determined by its content and capped at 50% of the screen'
 <dialog data-miclsnapheights="0,200,420" ...>
 ```
 
-The value `0` is equivalent to closing the bottom sheet. When a user clicks the drag-handle, the bottom sheet toggles between these preset heights and its initial height. The bottom sheet will also snap to these preset heights as a user drags the heading.
+The value `0` is equivalent to closing the bottom sheet. When a user clicks the drag-handle, the bottom sheet toggles between these preset heights and its initial height. The bottom sheet will also snap to these preset heights as a user drags the heading, and settles on the nearest preset when released. Dragging the bottom sheet down to less than 48px closes it.
+
+## Theming
+Each bottom sheet style can be themed with CSS custom properties that follow the Material Design 3 component-token naming convention. The properties are declared on the component itself and can be changed on any appropriate parent element to affect its child bottom sheets.
+
+| Custom property | Meaning | Default |
+|---|---|---|
+| `--md-comp-bottomsheet-height` | The height of the opened bottom sheet (managed by the library for resizable bottom sheets) | `max-content` |
+| `--md-comp-bottomsheet-margin` | The space between the bottom sheet and the sides of the screen, on screens wider than 640px | `56px` |
+| `--md-comp-bottomsheet-margin-top` | The minimum space between the bottom sheet and the top of the screen | `72px` |
+| `--md-comp-bottomsheet-padding` | The amount of space between the edges and the content | `24px` |
+| `--md-comp-bottomsheet-container-color` | The background color of the bottom sheet | `--md-sys-color-surface-container-low` |
+| `--md-comp-bottomsheet-container-shape` | The corner rounding of the bottom sheet | `--md-sys-shape-corner-extra-large-top` |
+| `--md-comp-bottomsheet-container-elevation` | The shadow (elevation) of the bottom sheet | `--md-sys-elevation-level1` |
+| `--md-comp-bottomsheet-drag-handle-width` | The width of the drag handle | `32px` |
+| `--md-comp-bottomsheet-drag-handle-height` | The height of the drag handle | `4px` |
+| `--md-comp-bottomsheet-drag-handle-color` | The color of the drag handle | `--md-sys-color-on-surface-variant` |
+| `--md-comp-bottomsheet-focus-indicator-color` | The color of the drag handle's keyboard-focus outline | `--md-sys-color-secondary` |
+
+**Example: Changing the background color of the bottom sheet**
+
+```HTML
+<dialog class="micl-bottomsheet" popover style="--md-comp-bottomsheet-container-color:var(--md-sys-color-surface-container)">
+  ...
+</dialog>
+```
 
 ## Compatibility
 This component uses the Popover API, which might not be supported in your browser. Please check [Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API#api.htmlelement.popover) for details.

package/components/bottomsheet/index.scss

@@ -19,7 +19,6 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-@use '../../foundations';
 @use '../../styles/elevation';
 @use '../../styles/motion';
 @use '../../styles/shape';
@@ -27,23 +26,26 @@
 
 @include elevation.level(1);
 
+@include shape.corner('extra-large-top');
 @include shape.corner('extra-large');
-@include shape.corner('small');
 
 @include statelayer.token('focus-indicator-thickness');
 @include statelayer.token('focus-indicator-outer-offset');
 @include statelayer.token('backdrop-opacity');
 
 dialog.micl-bottomsheet {
-    --md-sys-bottomsheet-height: max-content;
-    --md-sys-bottomsheet-margin: 56px;
-    --md-sys-bottomsheet-margin-top: 72px;
-    --md-sys-bottomsheet-padding: 24px;
-    --md-sys-bottomsheet-handle-width: 32px;
-    --md-sys-bottomsheet-handle-height: 4px;
-    --md-sys-bottomsheet-motion-spatial: #{motion.$md-sys-motion-expressive-slow-spatial};
-    --md-sys-bottomsheet-motion-duration: #{motion.$md-sys-motion-expressive-slow-spatial-duration};
-    --md-sys-bottomsheet-motion-duration-reverse: #{motion.$md-sys-motion-expressive-default-spatial-duration};
+    --md-comp-bottomsheet-height: max-content;
+    --md-comp-bottomsheet-margin: 56px;
+    --md-comp-bottomsheet-margin-top: 72px;
+    --md-comp-bottomsheet-padding: 24px;
+    --md-comp-bottomsheet-drag-handle-width: 32px;
+    --md-comp-bottomsheet-drag-handle-height: 4px;
+    --md-comp-bottomsheet-motion-spatial: #{motion.$md-sys-motion-expressive-slow-spatial};
+    --md-comp-bottomsheet-motion-duration: #{motion.$md-sys-motion-expressive-slow-spatial-duration};
+    --md-comp-bottomsheet-motion-duration-reverse: #{motion.$md-sys-motion-expressive-default-spatial-duration};
+
+    --micl-duration: var(--md-comp-bottomsheet-motion-duration-reverse);
+    --micl-easing: #{motion.$md-sys-motion-easing-emphasized-accelerate};
 
     box-sizing: border-box;
     position: fixed;
@@ -51,46 +53,59 @@ dialog.micl-bottomsheet {
     block-size: 0;
     max-block-size: 50vh;
     inline-size: 100%;
+
+    &[data-miclfitheight] {
+        max-block-size: calc(100vh - var(--md-comp-bottomsheet-margin-top));
+    }
     min-inline-size: 100%;
-    margin: var(--md-sys-bottomsheet-margin-top) 0 0 0 ;
+    margin: var(--md-comp-bottomsheet-margin-top) 0 0 0 ;
     padding: 0;
     border: none;
-    border-radius: var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large) 0 0;
-    background-color: var(--md-sys-color-surface-container-low);
-    box-shadow: var(--md-sys-elevation-level1);
+    border-radius: var(--md-comp-bottomsheet-container-shape, var(--md-sys-shape-corner-extra-large-top));
+    background-color: var(--md-comp-bottomsheet-container-color, var(--md-sys-color-surface-container-low));
+    box-shadow: var(--md-comp-bottomsheet-container-elevation, var(--md-sys-elevation-level1));
     opacity: 0;
     overflow-y: hidden;
     interpolate-size: allow-keywords;
 
     &:not(.micl-bottomsheet--resizing) {
         transition:
-            opacity var(--md-sys-bottomsheet-motion-duration-reverse) motion.$md-sys-motion-easing-emphasized-accelerate,
-            block-size var(--md-sys-bottomsheet-motion-duration-reverse) var(--md-sys-bottomsheet-motion-spatial),
-            overlay var(--md-sys-bottomsheet-motion-duration-reverse) linear allow-discrete,
-            display var(--md-sys-bottomsheet-motion-duration-reverse) linear allow-discrete;
+            opacity var(--micl-duration) var(--micl-easing),
+            block-size var(--micl-duration) var(--md-comp-bottomsheet-motion-spatial),
+            overlay var(--micl-duration) linear allow-discrete,
+            display var(--micl-duration) linear allow-discrete;
     }
     .micl-bottomsheet__headline {
         box-sizing: border-box;
         display: flex;
+        flex-shrink: 0;
         align-items: center;
         inline-size: 100%;
         block-size: var(--md-sys-target-size, 48px);
         justify-content: center;
         cursor: grab;
+        touch-action: none;
 
         .micl-bottomsheet__draghandle {
             box-sizing: content-box;
-            inline-size: var(--md-sys-bottomsheet-handle-width);
-            block-size: var(--md-sys-bottomsheet-handle-height);
-            padding: 16px calc((var(--md-sys-target-size, 48px) - var(--md-sys-bottomsheet-handle-width)) / 2);
+            inline-size: var(--md-comp-bottomsheet-drag-handle-width);
+            block-size: var(--md-comp-bottomsheet-drag-handle-height);
+            padding: 16px calc((var(--md-sys-target-size, 48px) - var(--md-comp-bottomsheet-drag-handle-width)) / 2);
             border: none;
-            border-radius: var(--md-sys-shape-corner-small);
-            background-color: var(--md-sys-color-on-surface-variant);
-            background-clip: content-box;
+            // only shapes the focus ring; the visible handle is the ::before below
+            border-radius: var(--md-sys-shape-corner-extra-large);
+            background: none;
             cursor: pointer;
 
+            &::before {
+                content: '';
+                display: block;
+                block-size: 100%;
+                border-radius: calc(var(--md-comp-bottomsheet-drag-handle-height) / 2);
+                background-color: var(--md-comp-bottomsheet-drag-handle-color, var(--md-sys-color-on-surface-variant));
+            }
             &:focus-visible {
-                outline: var(--md-sys-state-focus-indicator-thickness, 3px) solid var(--md-sys-color-secondary);
+                outline: var(--md-sys-state-focus-indicator-thickness, 3px) solid var(--md-comp-bottomsheet-focus-indicator-color, var(--md-sys-color-secondary));
                 outline-offset: var(--md-sys-state-focus-indicator-outer-offset, 2px);
             }
         }
@@ -100,29 +115,28 @@ dialog.micl-bottomsheet {
     }
 
     .micl-bottomsheet__content {
-        padding: 0 var(--md-sys-bottomsheet-padding) var(--md-sys-bottomsheet-padding) var(--md-sys-bottomsheet-padding);
+        flex: 1 1 auto;
+        padding: 0 var(--md-comp-bottomsheet-padding) var(--md-comp-bottomsheet-padding) var(--md-comp-bottomsheet-padding);
+        overflow: hidden auto;
     }
 
     &::backdrop {
         background-color: rgba(0, 0, 0, 0);
         transition:
-            overlay var(--md-sys-bottomsheet-motion-duration) linear allow-discrete,
-            display var(--md-sys-bottomsheet-motion-duration) linear allow-discrete,
-            background-color var(--md-sys-bottomsheet-motion-duration) linear;
+            overlay var(--micl-duration) linear allow-discrete,
+            display var(--micl-duration) linear allow-discrete,
+            background-color var(--micl-duration) linear;
     }
     &:popover-open,
     &[open] {
-        block-size: var(--md-sys-bottomsheet-height);
+        --micl-duration: var(--md-comp-bottomsheet-motion-duration);
+        --micl-easing: #{motion.$md-sys-motion-easing-emphasized-decelerate};
+
+        display: flex;
+        flex-direction: column;
+        block-size: var(--md-comp-bottomsheet-height);
         opacity: 100%;
-        // overflow-y: auto;
-
-        &:not(.micl-bottomsheet--resizing) {
-            transition:
-                opacity var(--md-sys-bottomsheet-motion-duration) motion.$md-sys-motion-easing-emphasized-decelerate,
-                block-size var(--md-sys-bottomsheet-motion-duration) var(--md-sys-bottomsheet-motion-spatial),
-                overlay var(--md-sys-bottomsheet-motion-duration) linear allow-discrete,
-                display var(--md-sys-bottomsheet-motion-duration) linear allow-discrete;
-        }
+
         @starting-style {
             block-size: 0;
             opacity: 0;
@@ -139,11 +153,11 @@ dialog.micl-bottomsheet {
 
 @media (min-width: 641px) {
     dialog.micl-bottomsheet {
-        inline-size: min(100vw - (2 * var(--md-sys-bottomsheet-margin)), 640px);
+        inline-size: min(100vw - (2 * var(--md-comp-bottomsheet-margin)), 640px);
         max-inline-size: 640px;
-        min-inline-size: min(100vw - (2 * var(--md-sys-bottomsheet-margin)), 640px);
-        inset-inline-start: calc(((100vw - min(100vw - (2 * var(--md-sys-bottomsheet-margin)), 640px)) / 2) - var(--md-sys-bottomsheet-margin));
-        margin: var(--md-sys-bottomsheet-margin);
+        min-inline-size: min(100vw - (2 * var(--md-comp-bottomsheet-margin)), 640px);
+        inset-inline-start: calc(((100vw - min(100vw - (2 * var(--md-comp-bottomsheet-margin)), 640px)) / 2) - var(--md-comp-bottomsheet-margin));
+        margin: var(--md-comp-bottomsheet-margin);
         margin-block-end: 0;
     }
 }