material-inspired-component-library 2.0.0 → 3.0.0

package/components/iconbutton/index.scss

@@ -25,8 +25,11 @@
 @use '../../styles/statelayer';
 
 button.micl-iconbutton-standard-xs,
+a.micl-iconbutton-standard-xs,
 button.micl-iconbutton-standard-s,
+a.micl-iconbutton-standard-s,
 button.micl-iconbutton-standard-m,
+a.micl-iconbutton-standard-m,
 button.micl-iconbutton-standard-l,
 button.micl-iconbutton-standard-xl,
 button.micl-iconbutton-filled-xs,
@@ -90,134 +93,127 @@ button.micl-iconbutton-outlined-xl {
 }
 
 button.micl-iconbutton-standard-xs,
+a.micl-iconbutton-standard-xs,
 button.micl-iconbutton-filled-xs,
 button.micl-iconbutton-tonal-xs,
 button.micl-iconbutton-outlined-xs {
-    width: var(--md-sys-target-size);
-    min-width: var(--md-sys-target-size);
-    height: var(--md-sys-target-size);
+    --micl-width: 32px;
+    --micl-height: 32px;
+
+    position: relative;
+    inline-size: var(--micl-width);
+    min-inline-size: var(--micl-width);
+    block-size: var(--micl-height);
     font-size: 20px;
-    border: 8px solid transparent;
-    background-clip: content-box;
 
-    &.micl-button--toggle.micl-button--selected {
-        // border-radius: var(--md-sys-shape-corner-medium);
-        border-radius: var(--md-sys-shape-corner-large);
+    &::before {
+        content: "";
+        position: absolute;
+        block-size: var(--md-sys-target-size);
+        inline-size: var(--md-sys-target-size);
+        inset: calc((var(--micl-height) - var(--md-sys-target-size)) / 2) 0 0 calc((var(--micl-width) - var(--md-sys-target-size)) / 2);
+        background-color: transparent;
     }
-    &:not(:disabled) {
-        &:active {
-            // border-radius: var(--md-sys-shape-corner-small);
-            border-radius: var(--md-sys-shape-corner-medium);
-        }
-        &:focus-visible {
-            outline-offset: -6px;
-        }
+    &.micl-button--toggle.micl-button--selected {
+        border-radius: var(--md-sys-shape-corner-medium);
     }
     &.micl-iconbutton--narrow {
-        height: calc(var(--md-sys-target-size) + 10px);
-        border-width: 10px;
-        border-radius: calc(var(--md-sys-target-size) / 2);
-
-        &:focus-visible {
-            outline-offset: -8px;
-        }
+        --micl-width: 28px;
+        border-radius: calc(var(--micl-width) / 2);
     }
     &.micl-iconbutton--wide {
-        width: calc(var(--md-sys-target-size) + 8px);
-        border-radius: calc(var(--md-sys-target-size) / 2);
-
-        &:focus-visible {
-            outline-offset: -6px;
-        }
+        --micl-width: 40px;
+        border-radius: calc(var(--micl-width) / 2);
     }
     &.micl-button--square {
-        // border-radius: var(--md-sys-shape-corner-medium);
-        border-radius: var(--md-sys-shape-corner-large);
+        border-radius: var(--md-sys-shape-corner-medium);
 
         &.micl-button--toggle.micl-button--selected {
             border-radius: var(--md-sys-shape-corner-full);
         }
     }
+    &:not(:disabled) {
+        &:active {
+            border-radius: var(--md-sys-shape-corner-small);
+        }
+    }
 }
 
 button.micl-iconbutton-standard-s,
+a.micl-iconbutton-standard-s,
 button.micl-iconbutton-filled-s,
 button.micl-iconbutton-tonal-s,
 button.micl-iconbutton-outlined-s {
-    width: var(--md-sys-target-size);
-    min-width: var(--md-sys-target-size);
-    height: var(--md-sys-target-size);
+    --micl-width: 40px;
+    --micl-height: 40px;
+
+    position: relative;
+    inline-size: var(--micl-width);
+    min-inline-size: var(--micl-width);
+    block-size: var(--micl-height);
     font-size: 24px;
-    border: 4px solid transparent;
-    background-clip: content-box;
 
-    &.micl-button--toggle.micl-button--selected {
-        // border-radius: var(--md-sys-shape-corner-medium);
-        border-radius: var(--md-sys-shape-corner-large);
+    &::before {
+        content: "";
+        position: absolute;
+        block-size: var(--md-sys-target-size);
+        inline-size: var(--md-sys-target-size);
+        inset: calc((var(--micl-height) - var(--md-sys-target-size)) / 2) 0 0 calc((var(--micl-width) - var(--md-sys-target-size)) / 2);
+        background-color: transparent;
     }
-    &:not(:disabled) {
-        &:active {
-            // border-radius: var(--md-sys-shape-corner-small);
-            border-radius: var(--md-sys-shape-corner-medium);
-        }
-        &:focus-visible {
-            outline-offset: -2px;
-        }
+    &.micl-button--toggle.micl-button--selected {
+        border-radius: var(--md-sys-shape-corner-medium);
     }
     &.micl-iconbutton--narrow {
-        height: calc(var(--md-sys-target-size) + 8px);
-        border-width: 8px;
-        border-radius: calc(var(--md-sys-target-size) / 2);
-
-        &:focus-visible {
-            outline-offset: -6px;
-        }
+        --micl-width: 32px;
+        border-radius: calc(var(--micl-width) / 2);
     }
     &.micl-iconbutton--wide {
-        width: calc(var(--md-sys-target-size) + 12px);
-        border-radius: 26px;
+        --micl-width: 52px;
+        border-radius: calc(var(--micl-width) / 2);
 
-        &:focus-visible {
-            outline-offset: -2px;
+        &::before {
+            inline-size: var(--micl-width);
+            inset: calc((40px - var(--md-sys-target-size)) / 2) 0 0 0;
         }
     }
     &.micl-button--square {
-        // border-radius: var(--md-sys-shape-corner-medium);
-        border-radius: var(--md-sys-shape-corner-large);
+        border-radius: var(--md-sys-shape-corner-medium);
 
         &.micl-button--toggle.micl-button--selected {
             border-radius: var(--md-sys-shape-corner-full);
         }
     }
+    &:not(:disabled) {
+        &:active {
+            border-radius: var(--md-sys-shape-corner-small);
+        }
+    }
 }
 
 button.micl-iconbutton-standard-m,
+a.micl-iconbutton-standard-m,
 button.micl-iconbutton-filled-m,
 button.micl-iconbutton-tonal-m,
 button.micl-iconbutton-outlined-m {
-    width: 56px;
-    min-width: 56px;
-    height: 56px;
+    --micl-width: 56px;
+    --micl-height: 56px;
+
+    inline-size: var(--micl-width);
+    min-inline-size: var(--micl-width);
+    block-size: var(--micl-height);
     font-size: 24px;
 
     &.micl-button--toggle.micl-button--selected {
         border-radius: var(--md-sys-shape-corner-large);
     }
-    &:not(:disabled) {
-        &:active {
-            // border-radius: var(--md-sys-shape-corner-small);
-            border-radius: var(--md-sys-shape-corner-medium);
-        }
-    }
     &.micl-iconbutton--narrow {
-        width: var(--md-sys-target-size);
-        min-width: var(--md-sys-target-size);
-        border-radius: calc(var(--md-sys-target-size) / 2);
+        --micl-width: 48px;
+        border-radius: calc(var(--micl-width) / 2);
     }
     &.micl-iconbutton--wide {
-        width: 72px;
-        min-width: 72px;
-        border-radius: 36px;
+        --micl-width: 72px;
+        border-radius: calc(var(--micl-width) / 2);
     }
     &.micl-button--square {
         border-radius: var(--md-sys-shape-corner-large);
@@ -226,34 +222,35 @@ button.micl-iconbutton-outlined-m {
             border-radius: var(--md-sys-shape-corner-full);
         }
     }
+    &:not(:disabled) {
+        &:active {
+            border-radius: var(--md-sys-shape-corner-small);
+        }
+    }
 }
 
 button.micl-iconbutton-standard-l,
 button.micl-iconbutton-filled-l,
 button.micl-iconbutton-tonal-l,
 button.micl-iconbutton-outlined-l {
-    width: 96px;
-    min-width: 96px;
-    height: 96px;
+    --micl-width: 96px;
+    --micl-height: 96px;
+
+    inline-size: var(--micl-width);
+    min-inline-size: var(--micl-width);
+    block-size: var(--micl-height);
     font-size: 32px;
 
     &.micl-button--toggle.micl-button--selected {
         border-radius: var(--md-sys-shape-corner-extra-large);
     }
-    &:not(:disabled) {
-        &:active {
-            border-radius: var(--md-sys-shape-corner-large);
-        }
-    }
     &.micl-iconbutton--narrow {
-        width: 64px;
-        min-width: 64px;
-        border-radius: 32px;
+        --micl-width: 64px;
+        border-radius: calc(var(--micl-width) / 2);
     }
     &.micl-iconbutton--wide {
-        width: 128px;
-        min-width: 128px;
-        border-radius: 64px;
+        --micl-width: 128px;
+        border-radius: calc(var(--micl-width) / 2);
     }
     &.micl-button--square {
         border-radius: var(--md-sys-shape-corner-extra-large);
@@ -262,34 +259,35 @@ button.micl-iconbutton-outlined-l {
             border-radius: var(--md-sys-shape-corner-full);
         }
     }
+    &:not(:disabled) {
+        &:active {
+            border-radius: var(--md-sys-shape-corner-large);
+        }
+    }
 }
 
 button.micl-iconbutton-standard-xl,
 button.micl-iconbutton-filled-xl,
 button.micl-iconbutton-tonal-xl,
 button.micl-iconbutton-outlined-xl {
-    width: 136px;
-    min-width: 136px;
-    height: 136px;
+    --micl-width: 136px;
+    --micl-height: 136px;
+
+    inline-size: var(--micl-width);
+    min-inline-size: var(--micl-width);
+    block-size: var(--micl-height);
     font-size: 40px;
 
     &.micl-button--toggle.micl-button--selected {
         border-radius: var(--md-sys-shape-corner-extra-large);
     }
-    &:not(:disabled) {
-        &:active {
-            border-radius: var(--md-sys-shape-corner-large);
-        }
-    }
     &.micl-iconbutton--narrow {
-        width: 104px;
-        min-width: 104px;
-        border-radius: 52px;
+        --micl-width: 104px;
+        border-radius: calc(var(--micl-width) / 2);
     }
     &.micl-iconbutton--wide {
-        width: 184px;
-        min-width: 184px;
-        border-radius: 92px;
+        --micl-width: 184px;
+        border-radius: calc(var(--micl-width) / 2);
     }
     &.micl-button--square {
         border-radius: var(--md-sys-shape-corner-extra-large);
@@ -298,11 +296,19 @@ button.micl-iconbutton-outlined-xl {
             border-radius: var(--md-sys-shape-corner-full);
         }
     }
+    &:not(:disabled) {
+        &:active {
+            border-radius: var(--md-sys-shape-corner-large);
+        }
+    }
 }
 
 button.micl-iconbutton-standard-xs,
+a.micl-iconbutton-standard-xs,
 button.micl-iconbutton-standard-s,
+a.micl-iconbutton-standard-s,
 button.micl-iconbutton-standard-m,
+a.micl-iconbutton-standard-m,
 button.micl-iconbutton-standard-l,
 button.micl-iconbutton-standard-xl {
     --statelayer-color: var(--md-sys-color-on-surface-variant);
@@ -395,15 +401,9 @@ button.micl-iconbutton-outlined-xl {
     color: var(--md-sys-color-on-surface-variant);
 
     &.micl-iconbutton-outlined-xs,
-    &.micl-iconbutton-outlined-s {
-        // border-color: var(--md-sys-color-outline);
-        box-shadow: inset 1px 0px var(--md-sys-color-outline-variant),
-                    inset -1px 0px var(--md-sys-color-outline-variant),
-                    inset 0px -1px var(--md-sys-color-outline-variant),
-                    inset 0px 1px var(--md-sys-color-outline-variant);
-    }
+    &.micl-iconbutton-outlined-s,
     &.micl-iconbutton-outlined-m {
-        // border: 1px solid var(--md-sys-color-outline);
+        // border-color: var(--md-sys-color-outline);
         border: 1px solid var(--md-sys-color-outline-variant);
     }
     &.micl-iconbutton-outlined-l {

package/components/iconbutton/index.ts

@@ -40,7 +40,7 @@ export default (() =>
             event.target.classList.add('micl-button--toggled');
             event.target.classList.toggle('micl-button--selected');
             if (!!event.target.dataset.miclalt) {
-                [event.target.textContent, event.target.dataset.miclalt] = 
+                [event.target.textContent, event.target.dataset.miclalt] =
                 [event.target.dataset.miclalt, event.target.textContent];
             }
         }

package/components/navigationrail/README.md

@@ -4,10 +4,10 @@ This component implements the the [Material Design 3 Expressive Navigation rail]
 ## Basic Usage
 
 ### HTML
-To create a simple navigation rail, use a `<div>` element with the `micl-navigationrail` class. Inside, use an `input type="radio"` group to create the selectable navigation items. The `input` elements must share the same `name` attribute to ensure that only one item can be selected at a time. The `label` elements are associated with their respective inputs using the `for` attribute.
+To create a simple navigation rail, use a `<nav>` element with the `micl-navigationrail` class. Inside, use an `input type="radio"` group to create the selectable navigation items. The `input` elements must share the same `name` attribute to ensure that only one item can be selected at a time. The `label` elements are associated with their respective inputs using the `for` attribute.
 
 ```HTML
-<div id="mynavigationrail" class="micl-navigationrail">
+<nav id="mynavigationrail" class="micl-navigationrail">
   <div class="micl-navigationrail__content">
     <input type="radio" id="item1" name="navitem" value="email_inbox" checked>
     <label for="item1" class="micl-navigationrail__item" tabindex="0">
@@ -20,7 +20,7 @@ To create a simple navigation rail, use a `<div>` element with the `micl-navigat
       <span class="micl-navigationrail__text">Outbox</span>
     </label>
   </div>
-</div>
+</nav>
 ```
 
 ### CSS
@@ -44,7 +44,7 @@ A live example of the [Navigation rail component](https://henkpb.github.io/micl/
 The basic example creates a **collapsed** navigation rail. Add a menu button to allow the user to toggle between a **collapsed** and an **expanded** view.
 
 ```HTML
-<div id="mynavigationrail" class="micl-navigationrail">
+<nav id="mynavigationrail" class="micl-navigationrail">
   <div class="micl-navigationrail__headline">
     <button
       type="button"
@@ -56,7 +56,7 @@ The basic example creates a **collapsed** navigation rail. Add a menu button to
   <div class="micl-navigationrail__content">
     ...
   </div>
-</div>
+</nav>
 ```
 
 When the user clicks the menu button, the navigation rail is expanded and the toggle button is given the `micl-button--selected` class and the `micl-button--toggled` class that indicates that the toggle button has been clicked at least once.
@@ -66,7 +66,7 @@ When the user clicks the menu button, the navigation rail is expanded and the to
 Add the `popover` attribute to the navigation rail, and the `popovertarget` attribute to the menu button. The value of the `popovertarget` attribute must be the `id` of the navigation rail.
 
 ```HTML
-<div id="mynavigationrail" class="micl-navigationrail" popover="manual">
+<nav id="mynavigationrail" class="micl-navigationrail" popover="manual">
   <div class="micl-navigationrail__headline">
     <button
       type="button"
@@ -79,19 +79,19 @@ Add the `popover` attribute to the navigation rail, and the `popovertarget` attr
   <div class="micl-navigationrail__content">
     ...
   </div>
-</div>
+</nav>
 ```
 
-[!WARNING]
-The **popover** navigation rail component adds CSS rules to the `<body>` element to properly resize the main content area when the navigation rail is collapsed. Overriding these rules may cause the component to behave unexpectedly. The rules that are applied are:
-
-  ```CSS
-  margin-inline-start: var(--md-sys-navigationrail-collapsed-width);
-  ```
+> [!WARNING]
+> The **popover** navigation rail component adds CSS rules to the element with the `.micl-window` class to properly resize the main content area when the navigation rail is collapsed. Overriding these rules may cause the component to behave unexpectedly. The rules that are applied are:
+>
+> ```CSS
+> margin-inline-start: var(--md-sys-navigationrail-collapsed-width);
+> ```
 
 ### Modal navigation rail
 
-A **modal** navigation rail is hidden until the user clicks a menu button. When shown, the **expanded** navigation rail is displayed on top of other page content. Use a `<dialog>` element instead of a `<div>`.
+A **modal** navigation rail is hidden until the user clicks a menu button. When shown, the **expanded** navigation rail is displayed on top of other page content. Use a `<dialog>` element instead of a `<nav>`.
 
 ```HTML
 <dialog id="mynavigationrail" class="micl-navigationrail" closedby="closerequest">
@@ -132,9 +132,9 @@ You can customize the appearance of the Navigation rail component by overriding
 
 ```HTML
 <div style="--md-sys-navigationrail-collapsed-width:80px">
-  <div id="mynavigationrail" class="micl-navigationrail">
+  <nav id="mynavigationrail" class="micl-navigationrail">
     ...
-  </div>
+  </nav>
 </div>
 ```
 

package/components/navigationrail/index.scss

@@ -53,7 +53,7 @@
     block-size: 100vh;
     min-block-size: 100%;
     margin-block: 0;
-    margin-inline: 0 auto;
+    margin-inline: calc(-1 * var(--md-sys-layout-window-margin, 0px)) auto;
     padding-block: var(--md-sys-navigationrail-top-space) 0;
     padding-inline: 0;
     background-color: var(--md-sys-color-surface);
@@ -61,6 +61,7 @@
     box-shadow: var(--md-sys-elevation-level0);
     opacity: 100%;
     overflow: hidden;
+    z-index: 9;
     interpolate-size: allow-keywords;
 
     &> .micl-navigationrail__headline {
@@ -74,7 +75,7 @@
         align-items: flex-start;
         row-gap: var(--md-sys-navigationrail-item-space);
         inline-size: 100%;
-        padding-block: var(--md-sys-navigationrail-header-space) 0;
+        padding-block: var(--md-sys-navigationrail-header-space) 16px;
         padding-inline: 20px 0;
         overflow: hidden auto;
         transition: row-gap var(--md-sys-navigationrail-morph-duration-reverse) linear;
@@ -158,13 +159,13 @@
                     --statelayer-opacity var(--md-sys-navigationrail-motion-duration) linear;
             }
             &> .micl-navigationrail__text {
-                color: var(--md-sys-color-secondary);
+                color: var(--md-sys-color-on-secondary-container);
             }
         }
     }
 }
 dialog.micl-navigationrail,
-div.micl-navigationrail:has(> .micl-navigationrail__headline .micl-button--toggle.micl-button--selected) {
+nav.micl-navigationrail:has(> .micl-navigationrail__headline .micl-button--toggle.micl-button--selected) {
     max-inline-size: var(--md-sys-navigationrail-expanded-maxwidth);
     min-inline-size: var(--md-sys-navigationrail-expanded-minwidth);
 
@@ -210,7 +211,7 @@ div.micl-navigationrail:has(> .micl-navigationrail__headline .micl-button--toggl
         }
     }
 }
-div.micl-navigationrail:has(> .micl-navigationrail__headline .micl-button--toggle.micl-button--selected) {
+nav.micl-navigationrail:has(> .micl-navigationrail__headline .micl-button--toggle.micl-button--selected) {
     &> .micl-navigationrail__content {
         transition: row-gap var(--md-sys-navigationrail-morph-duration) linear;
 
@@ -232,7 +233,7 @@ div.micl-navigationrail:has(> .micl-navigationrail__headline .micl-button--toggl
         }
     }
 }
-div.micl-navigationrail:has(> .micl-navigationrail__headline .micl-button--toggle.micl-button--toggled.micl-button--selected) {
+nav.micl-navigationrail:has(> .micl-navigationrail__headline .micl-button--toggle.micl-button--toggled.micl-button--selected) {
     animation: var(--md-sys-navigationrail-morph-duration) linear forwards navigationrail-to-expanded;
 
     &> .micl-navigationrail__content > label.micl-navigationrail__item {
@@ -243,7 +244,7 @@ div.micl-navigationrail:has(> .micl-navigationrail__headline .micl-button--toggl
         }
     }
 }
-div.micl-navigationrail:has(> .micl-navigationrail__headline .micl-button--toggle.micl-button--toggled:not(.micl-button--selected)) {
+nav.micl-navigationrail:has(> .micl-navigationrail__headline .micl-button--toggle.micl-button--toggled:not(.micl-button--selected)) {
     animation: var(--md-sys-navigationrail-morph-duration-reverse) linear forwards navigationrail-to-collapsed;
 
     &> .micl-navigationrail__content {
@@ -265,7 +266,7 @@ div.micl-navigationrail:has(> .micl-navigationrail__headline .micl-button--toggl
         }
     }
 }
-div.micl-navigationrail:has(> .micl-navigationrail__headline .micl-button--toggle:not(.micl-button--selected)) {
+nav.micl-navigationrail:has(> .micl-navigationrail__headline .micl-button--toggle:not(.micl-button--selected)) {
     &> .micl-navigationrail__content > label.micl-navigationrail__item {
         &:hover {
             &> .micl-navigationrail__icon {
@@ -316,7 +317,7 @@ dialog.micl-navigationrail {
         }
     }
 }
-div.micl-navigationrail {
+nav.micl-navigationrail {
     position: sticky;
     float: inline-start;
     inset: unset;
@@ -324,8 +325,9 @@ div.micl-navigationrail {
     inset-inline-start: 0;
     border-inline-end: var(--md-sys-divider-thickness) solid var(--md-sys-divider-color);
 }
-div.micl-navigationrail[popover] {
+nav.micl-navigationrail[popover] {
     position: fixed;
+    margin-inline-start: 0;
 }
 .micl-navigationrail {
     &[open],
@@ -356,8 +358,14 @@ div.micl-navigationrail[popover] {
             display var(--md-sys-navigationrail-motion-duration) linear allow-discrete;
     }
 }
-body:has(div.micl-navigationrail[popover]) {
-    margin-inline-start: var(--md-sys-navigationrail-collapsed-width);
+.micl-window:has(nav.micl-navigationrail[popover]) {
+    padding-inline-start: var(--md-sys-navigationrail-collapsed-width);
+}
+.micl-window.micl-window--explicit-containment nav.micl-navigationrail {
+    block-size: fit-content;
+    min-block-size: fit-content;
+    padding-block: 16px;
+    border-radius: calc(var(--md-sys-navigationrail-collapsed-width) / 2);
 }
 
 @keyframes navigationrail-to-expanded {

package/components/radio/index.scss

@@ -148,6 +148,6 @@ label:has(+ input[type=radio].micl-radio:not(:disabled)) {
     cursor: pointer;
 }
 input[type=radio].micl-radio + label,
-label + input[type=radio].micl-radio {
+label:has(+ input[type=radio].micl-radio) {
     color: var(--md-sys-color-on-surface);
 }

package/components/sidesheet/README.md

@@ -1,20 +1,19 @@
 # Side sheet
-This component implements the the [Material Design 3 Expressive Side sheet](https://m3.material.io/components/side-sheets/overview) design.
+This component implements the the [Material Design 3 Expressive Side sheet](https://m3.material.io/components/side-sheets/overview) design. Side sheets provide optional content and actions without interrupting the main content.
 
 ## Basic Usage
 
 ### HTML
-To create a standard side sheet, use the `<dialog>` element with the `popover` attribute. The `closedby="any"` attribute allows the user to dismiss the side sheet by clicking anywhere outside of it.
+To create a standard side sheet, use the `<dialog>` element with the `popover` attribute.
 
 ```HTML
-<dialog id="mysidesheet" class="micl-sidesheet" closedby="any" popover>
+<dialog id="mysidesheet" class="micl-sidesheet" popover aria-labelledby="mytitle">
   <div class="micl-sidesheet__headline">
-    <h2>Title</h2>
+    <h2 id="mytitle">Title</h2>
     <button
       type="button"
       class="micl-iconbutton-s material-symbols-outlined"
       popovertarget="mysidesheet"
-      aria-label="Close"
     >close</button>
   </div>
   <div class="micl-sidesheet__content">
@@ -42,26 +41,24 @@ A **modal** side sheet blocks access to the rest of the page and must be dismiss
 To create a modal side sheet, use the `<dialog>` element without the `popover` attribute. Use `closedby="closerequest"` to prevent the side sheet from being dismissed by clicking outside of it. You'll also need a button or other control with popovertarget to close it.
 
 ```HTML
-<dialog id="mysidesheet" class="micl-sidesheet" closedby="closerequest">
+<dialog id="mysidesheet" class="micl-sidesheet" closedby="closerequest" aria-labelledby="mytitle">
   <div class="micl-sidesheet__headline">
     <button
       type="button"
       class="micl-iconbutton-s material-symbols-outlined"
-      aria-label="Go back"
     >arrow_back</button>
-    <h2>Title</h2>
+    <h2 id="mytitle">Title</h2>
     <button
       type="button"
       class="micl-iconbutton-s material-symbols-outlined"
       popovertarget="mysidesheet"
-      aria-label="Close"
     >close</button>
   </div>
   <div class="micl-sidesheet__content">
     ...your content...
   </div>
   <div class="micl-sidesheet__actions">
-    <button type="button" class="micl-button">Save</button>
+    <button type="button" class="micl-button-filled-s">Save</button>
   </div>
 </dialog>
 ```
@@ -74,13 +71,13 @@ To open either a standard or modal side sheet, link a button to the side sheet's
 The back-button and the actions-container are optional. To remove the vertical divider of the "standard" side sheet, assign zero to the following CSS variable:
 ```CSS
 #mysidesheet {
-  --md-sys-sidesheet-divider-width: 0;
+  --md-sys-divider-thickness: 0;
 }
 ```
 To remove the horizontal divider of the actions-container:
 ```CSS
-#mysidesheet {
-  --md-sys-sidesheet-actions-divider-width: 0;
+#mysidesheet .micl-sidesheet__actions {
+  --md-sys-divider-thickness: 0;
 }
 ```
 
@@ -89,10 +86,28 @@ The **standard** side sheet component adds CSS rules to the `<body>` element to
 
 ```CSS
 box-sizing: border-box;
-margin-left: 0px;
-margin-right: 0px;
-max-width: ...varies depending on if the side sheet is opened...
-transition: ...transition on max-width...
+margin: 0;
+max-inline-size: ...varies depending on if the side sheet is opened...
+transition: ...transition on max-inline-size...
+```
+
+## Customizations
+You can customize the appearance of the Side sheet 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 side sheets.
+
+| Variable name | Default Value | Description |
+| ------------- | ------------- | ----------- |
+| --md-sys-sidesheet-width | 256px | The default (and minimum allowed) width of the side sheet |
+| --md-sys-sidesheet-maxwidth | 400px | The largest allowed width of tthe side sheet |
+| --md-sys-sidesheet-padding-standard | 24px | The amount of space between the vertical edges and the content |
+
+**Example: Changing the width of the sidesheet**
+
+```HTML
+<body style="--md-sys-sidesheet-width:320px">
+  <dialog id="mysidesheet" class="micl-sidesheet" popover>
+    ...
+  </dialog>
+</body>
 ```
 
 ## Compatibility