material-inspired-component-library 2.0.0 → 2.0.1

package/CODE_OF_CONDUCT.md

@@ -0,0 +1,128 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+We as members, contributors, and leaders pledge to make participation in our
+community a harassment-free experience for everyone, regardless of age, body
+size, visible or invisible disability, ethnicity, sex characteristics, gender
+identity and expression, level of experience, education, socio-economic status,
+nationality, personal appearance, race, religion, or sexual identity
+and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming,
+diverse, inclusive, and healthy community.
+
+## Our Standards
+
+Examples of behavior that contributes to a positive environment for our
+community include:
+
+* Demonstrating empathy and kindness toward other people
+* Being respectful of differing opinions, viewpoints, and experiences
+* Giving and gracefully accepting constructive feedback
+* Accepting responsibility and apologizing to those affected by our mistakes,
+  and learning from the experience
+* Focusing on what is best not just for us as individuals, but for the
+  overall community
+
+Examples of unacceptable behavior include:
+
+* The use of sexualized language or imagery, and sexual attention or
+  advances of any kind
+* Trolling, insulting or derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or email
+  address, without their explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Enforcement Responsibilities
+
+Community leaders are responsible for clarifying and enforcing our standards of
+acceptable behavior and will take appropriate and fair corrective action in
+response to any behavior that they deem inappropriate, threatening, offensive,
+or harmful.
+
+Community leaders have the right and responsibility to remove, edit, or reject
+comments, commits, code, wiki edits, issues, and other contributions that are
+not aligned to this Code of Conduct, and will communicate reasons for moderation
+decisions when appropriate.
+
+## Scope
+
+This Code of Conduct applies within all community spaces, and also applies when
+an individual is officially representing the community in public spaces.
+Examples of representing our community include using an official e-mail address,
+posting via an official social media account, or acting as an appointed
+representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported to the community leaders responsible for enforcement at
+micl.hermana@proton.me.
+All complaints will be reviewed and investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the
+reporter of any incident.
+
+## Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining
+the consequences for any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed
+unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing
+clarity around the nature of the violation and an explanation of why the
+behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series
+of actions.
+
+**Consequence**: A warning with consequences for continued behavior. No
+interaction with the people involved, including unsolicited interaction with
+those enforcing the Code of Conduct, for a specified period of time. This
+includes avoiding interactions in community spaces as well as external channels
+like social media. Violating these terms may lead to a temporary or
+permanent ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including
+sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public
+communication with the community for a specified period of time. No public or
+private interaction with the people involved, including unsolicited interaction
+with those enforcing the Code of Conduct, is allowed during this period.
+Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community
+standards, including sustained inappropriate behavior,  harassment of an
+individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within
+the community.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 2.0, available at
+https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
+
+Community Impact Guidelines were inspired by [Mozilla's code of conduct
+enforcement ladder](https://github.com/mozilla/diversity).
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see the FAQ at
+https://www.contributor-covenant.org/faq. Translations are available at
+https://www.contributor-covenant.org/translations.

package/components/badge/README.md

@@ -4,12 +4,12 @@ This component implements the the [Material Design 3 Expressive Badge](https://m
 ## Basic Usage
 
 ### HTML
-To add a large badge, use a `<span>` element with the `micl-badge-large` class and add a short text inside. For a small badge, which is a simple dot, use a `<span>` with the `micl-badge-small` class and leave the element empty.
+To add a large badge, use a `<span>` element with the `micl-badge` class and add a short text inside. For a small badge, which is a simple dot, add the `micl-badge--small` class and leave the element empty.
 
 ```HTML
-<span class="micl-badge-large">57</span>
+<span class="micl-badge">57</span>
 
-<span class="micl-badge-small"></span>
+<span class="micl-badge micl-badge--small"></span>
 ```
 
 ### CSS
@@ -33,7 +33,7 @@ Badges are typically placed on top of other elements, like icons. To anchor a ba
 
 ```HTML
 <span class="material-symbols-outlined" style="anchor-name:--inbox">inbox</span>
-<span class="micl-badge-large" style="position-anchor:--inbox">57</span>
+<span class="micl-badge" style="position-anchor:--inbox">57</span>
 ```
 
 You can fine-tune the badge's position relative to its anchor using the following CSS variables:
@@ -57,7 +57,7 @@ You can customize the appearance of the Badge component by overriding its global
 
 ```HTML
 <div style="--md-sys-badge-small-size:8px">
-  <span class="micl-badge-small"></span>
+  <span class="micl-badge micl-badge--small"></span>
 </div>
 ```
 

package/components/badge/index.scss

@@ -27,42 +27,35 @@
     --md-sys-badge-large-padding: 4px;
 }
 
-.micl-badge-small {
+.micl-badge {
     --md-sys-badge-inline-offset: 0px;
     --md-sys-badge-block-offset: 0px;
 
     box-sizing: border-box;
     position: fixed;
-    inline-size: var(--md-sys-badge-small-size);
-    block-size: var(--md-sys-badge-small-size);
     inset: unset;
-    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));
-    border-radius: calc(var(--md-sys-badge-small-size) / 2);
     margin: 0;
-    padding: 0;
     background-color: var(--md-sys-color-error);
     color: var(--md-sys-color-on-error);
-}
 
-.micl-badge-large {
-    --md-sys-badge-inline-offset: 0px;
-    --md-sys-badge-block-offset: 0px;
+    &.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));
+        padding: 0;
+        border-radius: calc(var(--md-sys-badge-small-size) / 2);
+    }
+    &:not(.micl-badge--small) {
+        @include typography.label-small;
 
-    @include typography.label-small;
-
-    box-sizing: border-box;
-    position: fixed;
-    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: unset;
-    inset-block-start: calc(anchor(start) - 2px + var(--md-sys-badge-block-offset));
-    inset-inline-start: calc(anchor(end) - 12px - var(--md-sys-badge-inline-offset));
-    margin: 0;
-    padding-inline: var(--md-sys-badge-large-padding);
-    border-radius: calc(var(--md-sys-badge-large-size) / 2);
-    background-color: var(--md-sys-color-error);
-    color: var(--md-sys-color-on-error);
+        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) - 2px + 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);
+    }
 }

package/components/bottomsheet/README.md

@@ -1,13 +1,13 @@
 # Bottom sheet
-This component implements the the [Material Design 3 Expressive Bottom sheet](https://m3.material.io/components/bottom-sheets/overview) design.
+This component implements the the [Material Design 3 Expressive Bottom sheet](https://m3.material.io/components/bottom-sheets/overview) design. Bottom sheets show secondary content anchored to the bottom of the screen.
 
 ## Basic Usage
 
 ### HTML
-To create a standard bottom sheet, use the `<dialog>` element with the `popover` attribute. The `closedby="any"` attribute allows the user to dismiss the bottom sheet by clicking anywhere outside of it.
+To create a standard bottom sheet, use the `<dialog>` element with the `popover` attribute.
 
 ```HTML
-<dialog id="mybottomsheet" class="micl-bottomsheet" closedby="any" popover>
+<dialog id="mybottomsheet" class="micl-bottomsheet" popover>
   <div class="micl-bottomsheet__content">
     ...your content...
   </div>
@@ -22,34 +22,50 @@ Import the bottom sheet styles into your project:
 ```
 
 ### JavaScript
-This component requires JavaScript to support **modal** and **resizable** bottom sheets:
+This component requires JavaScript to support **resizable** bottom sheets. The library will automatically initialize new components as they're added to the DOM.
 
 ```JavaScript
 import micl from "material-inspired-component-library/dist/micl";
 ```
 
-This will initialize any Bottom sheet component, including those that will be added to the DOM later on.
-
 ### Demo
 A live example of the [Bottom sheet component](https://henkpb.github.io/micl/bottomsheet.html) is available for you to interact with.
 
 ## Variants
+Setting the `popover` attribute to `manual` lets a bottom sheet co-exist and be interactive with the rest of the page.
+
+```HTML
+<dialog id="mybottomsheet" class="micl-bottomsheet" popover="manual">
+  <div class="micl-bottomsheet__content">
+    ...your content...
+  </div>
+</dialog>
+```
+
+### Modal Bottom Sheet
 A **modal** bottom sheet blocks access to the rest of the page and must be dismissed explicitly by the user. This is suitable for critical tasks or information that requires a user's full attention.
 
-To create a modal bottom sheet, use the `<dialog>` element without the `popover` attribute. Use `closedby="closerequest"` to prevent the bottom sheet from being dismissed by clicking outside of it. You'll also need a button or other control with popovertarget to close it.
+To create a modal bottom sheet, use the `<dialog>` element without the `popover` attribute. Add the `closedby="any"` to allow the bottom sheet to be dismissed by a user clicking outside of it.
 
 ```HTML
-<dialog id="mybottomsheet" class="micl-bottomsheet" closedby="closerequest">
+<dialog id="mybottomsheet" class="micl-bottomsheet" closedby="any">
   <div class="micl-bottomsheet__content">
     ...your content...
   </div>
 </dialog>
 ```
 
-Include the bottom sheet heading (and optionally a drag-handle) to create a **resizable** bottom sheet.
+To open or close a bottom sheet, add the markup of a button that is linked to the bottom sheet using the `popovertarget` attribute:
+
+```HTML
+<button type="button" popovertarget="mybottomsheet">Open Bottom Sheet</button>
+```
+
+### Resizable Bottom Sheet
+To create a **resizable** bottom sheet, include a heading and an optional drag-handle.
 
 ```HTML
-<dialog id="mybottomsheet" class="micl-bottomsheet" closedby="any" popover>
+<dialog id="mybottomsheet" class="micl-bottomsheet" popover>
   <div class="micl-bottomsheet__headline">
     <button type="button" class="micl-bottomsheet__draghandle" aria-label="Drag handle"></button>
   </div>
@@ -59,17 +75,13 @@ Include the bottom sheet heading (and optionally a drag-handle) to create a **re
 </dialog>
 ```
 
-The height of a bottom sheet is determined by its contents, initially capped at 50% of the screen height. You can set multiple preset heights for the bottom sheet by adding the `data-snapheights` attribute:
+The initial height is determined by its content and capped at 50% of the screen's height. You can define specific preset heights by using the `data-miclsnapheights` attribute.
 
 ```HTML
-<dialog data-snapheights="200,420" ...>
+<dialog data-miclsnapheights="0,200,420" ...>
 ```
 
-To open or close a bottom sheet, add the markup of a button that is linked to the bottom sheet using the `popovertarget` attribute:
-
-```HTML
-<button type="button" popovertarget="mybottomsheet">Open Bottom Sheet</button>
-```
+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.
 
 ## 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

@@ -27,6 +27,7 @@
 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;
@@ -36,13 +37,12 @@ dialog.micl-bottomsheet {
 
     box-sizing: border-box;
     position: fixed;
-    top: auto;
-    bottom: 0;
-    height: 0;
-    max-height: 50vh;
-    width: 100%;
-    min-width: 100%;
-    margin: 72px 0 0 0 ;
+    inset-block: auto 0;
+    block-size: 0;
+    max-block-size: 50vh;
+    inline-size: 100%;
+    min-inline-size: 100%;
+    margin: var(--md-sys-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;
@@ -55,26 +55,23 @@ dialog.micl-bottomsheet {
     &:not(.micl-bottomsheet--resizing) {
         transition:
             opacity var(--md-sys-bottomsheet-motion-duration-reverse) motion.$md-sys-motion-easing-emphasized-accelerate,
-            height var(--md-sys-bottomsheet-motion-duration-reverse) var(--md-sys-bottomsheet-motion-spatial),
+            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;
     }
-    &.micl-bottomsheet--resizing .micl-bottomsheet__headline {
-        cursor: grabbing;
-    }
     .micl-bottomsheet__headline {
         box-sizing: border-box;
         display: flex;
         align-items: center;
-        width: 100%;
-        height: var(--md-sys-target-size);
+        inline-size: 100%;
+        block-size: var(--md-sys-target-size);
         justify-content: center;
         cursor: grab;
 
         .micl-bottomsheet__draghandle {
             box-sizing: content-box;
-            width: var(--md-sys-bottomsheet-handle-width);
-            height: var(--md-sys-bottomsheet-handle-height);
+            inline-size: var(--md-sys-bottomsheet-handle-width);
+            block-size: var(--md-sys-bottomsheet-handle-height);
             padding: 16px calc((var(--md-sys-target-size) - var(--md-sys-bottomsheet-handle-width)) / 2);
             border: none;
             border-radius: var(--md-sys-shape-corner-small);
@@ -88,6 +85,9 @@ dialog.micl-bottomsheet {
             }
         }
     }
+    &.micl-bottomsheet--resizing .micl-bottomsheet__headline {
+        cursor: grabbing;
+    }
 
     .micl-bottomsheet__content {
         padding: 0 var(--md-sys-bottomsheet-padding) var(--md-sys-bottomsheet-padding) var(--md-sys-bottomsheet-padding);
@@ -102,19 +102,19 @@ dialog.micl-bottomsheet {
     }
     &:popover-open,
     &[open] {
-        height: var(--md-sys-bottomsheet-height);
-        opacity: 1;
+        block-size: var(--md-sys-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,
-                height var(--md-sys-bottomsheet-motion-duration) var(--md-sys-bottomsheet-motion-spatial),
+                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 {
-            height: 0;
+            block-size: 0;
             opacity: 0;
         }
     }
@@ -129,11 +129,11 @@ dialog.micl-bottomsheet {
 
 @media (min-width: 641px) {
     dialog.micl-bottomsheet {
-        width: min(100vw - (2 * var(--md-sys-bottomsheet-margin)), 640px);
-        max-width: 640px;
-        min-width: min(100vw - (2 * var(--md-sys-bottomsheet-margin)), 640px);
+        inline-size: min(100vw - (2 * var(--md-sys-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);
-        margin-bottom: 0;
+        margin-block-end: 0;
     }
 }

package/components/bottomsheet/index.ts

@@ -23,19 +23,19 @@ export const bottomsheetSelector = 'dialog.micl-bottomsheet';
 
 export default (() =>
 {
-    var fitHeight = 0;
-
     const getSnapHeights = (dialog: HTMLDialogElement): number[] =>
     {
-        let maxHeight   = parseInt(window.getComputedStyle(dialog).getPropertyValue('max-height')),
-            snapHeights = (dialog.dataset.snapheights || '').split(',').map(Number).filter(
-                n => !isNaN(n) && (n > 0) && (n <= maxHeight)
+        let fitHeight   = parseInt(dialog.dataset.miclfitheight || '0', 10),
+            maxHeight   = parseInt(window.getComputedStyle(dialog).getPropertyValue('max-block-size'), 10),
+            snapHeights = (dialog.dataset.miclsnapheights || '').split(',').map(Number).filter(
+                n => !isNaN(n) && (n >= 0) && (n <= maxHeight)
             );
 
-        if (!fitHeight) {
-            fitHeight = dialog.getBoundingClientRect().height;
+        if (fitHeight < 1) {
+            fitHeight = Math.min(dialog.getBoundingClientRect().height, maxHeight);
+            dialog.dataset.miclfitheight = `${fitHeight}`;
         }
-        return [...new Set(snapHeights.concat([fitHeight, maxHeight]).sort())];
+        return [...new Set(snapHeights.concat([fitHeight]).sort())];
     };
 
     const getNextSnapHeight = (dialog: HTMLDialogElement, isResizing: boolean): number =>
@@ -58,14 +58,21 @@ export default (() =>
 
     const setHeight = (dialog: HTMLDialogElement, value: number): void =>
     {
-        dialog.style.setProperty('--md-sys-bottomsheet-height', `${value}px`);
+        if (value < 1) {
+            delete dialog.dataset.miclfitheight;
+            dialog.style.removeProperty('--md-sys-bottomsheet-height');
+            dialog[!dialog.popover ? 'close' : 'hidePopover']();
+        }
+        else {
+            dialog.style.setProperty('--md-sys-bottomsheet-height', `${value}px`);
+        }
     }
 
     return {
         initialize: (element: HTMLDialogElement) =>
         {
             if (
-                !element.matches('dialog.micl-bottomsheet')
+                !element.matches(bottomsheetSelector)
                 || element.dataset.miclinitialized
             ) {
                 return;
@@ -80,10 +87,7 @@ export default (() =>
 
             draghandle?.addEventListener('click', () =>
             {
-                const nextSnapHeight = getNextSnapHeight(element, false);
-                if (nextSnapHeight > 4) {
-                    setHeight(element, nextSnapHeight);
-                }
+                setHeight(element, getNextSnapHeight(element, false));
             });
 
             let isPreparing = false,
@@ -126,16 +130,11 @@ export default (() =>
                     if (currentMouseY < initialMouseY) {
                         setHeight(element, getNextSnapHeight(element, true));
                     }
+                    else if (element.getBoundingClientRect().height < 48) {
+                        setHeight(element, 0);
+                    }
                     else {
-                        if (element.getBoundingClientRect().height < 48) {
-                            if (!!element.popover) {
-                                element.hidePopover();
-                            }
-                            setHeight(element, initialHeight);
-                        }
-                        else {
-                            setHeight(element, getPreviousSnapHeight(element));
-                        }
+                        setHeight(element, getPreviousSnapHeight(element));
                     }
                     document.removeEventListener('mousemove', onMouseMove);
                     document.removeEventListener('mouseup', onMouseUp);
@@ -144,8 +143,10 @@ export default (() =>
         },
         cleanup: (element: HTMLDialogElement) =>
         {
-            if (element.matches('dialog.micl-bottomsheet')) {
+            if (element.matches(bottomsheetSelector)) {
+                element.classList.remove('micl-bottomsheet--resizing');
                 delete element.dataset.miclinitialized;
+                delete element.dataset.miclfitheight;
             }
         }
     };

package/components/button/README.md

@@ -66,7 +66,7 @@ To add a leading icon to a button, include an element with the `micl-button__ico
 
 ```HTML
 <button type="button" class="micl-button-filled-m">
-  <span class="micl-button__icon material-symbols-outlined">save</span>
+  <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">save</span>
   Save
 </button>
 ```

package/components/dialog/README.md

@@ -7,10 +7,10 @@ This component implements the the [Material Design 3 Expressive Dialog](https://
 To create a basic dialog, use the `<dialog>` element with the `micl-dialog` class. You can open and close the dialog using JavaScript, or you can use a control element, such as a button, to open and close the dialog.
 
 ```HTML
-<dialog id="mydialog" class="micl-dialog" closedby="any" popover>
+<dialog id="mydialog" class="micl-dialog" closedby="any" popover aria-labelledby="mytitle" aria-describedby="mydesc">
   <div class="micl-dialog__headline">
-    <h2>Basic dialog</h2>
-    <span class="micl-dialog__supporting-text">An example of a basic dialog</span>
+    <h2 id="mytitle">Basic dialog</h2>
+    <span id="mydesc" class="micl-dialog__supporting-text">An example of a basic dialog</span>
   </div>
 </dialog>
 
@@ -40,11 +40,11 @@ When dialogs with the `popover` attribute are opened, they animate from the cont
 Removing the `popover` attribute creates a more intrusive **modal** dialog. This type of dialog requires the user to interact with its buttons or press the <kbd>Esc</kbd> key to close it.
 
 ```HTML
-<dialog id="mydialog" class="micl-dialog" closedby="closerequest">
+<dialog id="mydialog" class="micl-dialog" closedby="closerequest" aria-labelledby="mytitle" aria-describedby="mydesc">
   <div class="micl-dialog__headline">
     <span class="micl-dialog__icon material-symbols-outlined" aria-hidden="true">info</span>
-    <h2>Modal dialog</h2>
-    <span class="micl-dialog__supporting-text">An example of a modal dialog</span>
+    <h2 id="mytitle">Modal dialog</h2>
+    <span id="mydesc" class="micl-dialog__supporting-text">An example of a modal dialog</span>
   </div>
   <div class="micl-dialog__actions">
     <form method="dialog">
@@ -90,15 +90,15 @@ A dialog typically consists of three main sections to organize its content:
 A full-screen dialog covers the entire viewport, primarily on smaller screens. On screens wider than 560 pixels, a full-screen dialog behaves like a basic dialog. Use the `micl-dialog-fullscreen` class for this variant:
 
 ```HTML
-<dialog id="mydialog" class="micl-dialog-fullscreen" closedby="none" popover>
+<dialog id="mydialog" class="micl-dialog-fullscreen" closedby="none" popover aria-labelledby="mytitle" aria-describedby="mydesc">
   <form method="dialog" class="micl-dialog__headline">
     <button type="button" class="micl-iconbutton-s material-symbols-outlined" popovertarget="mydialog" aria-label="Close">close</button>
     <span class="micl-dialog__icon material-symbols-outlined" aria-hidden="true">person</span>
-    <h2>Full-screen dialog</h2>
+    <h2 id="mytitle">Full-screen dialog</h2>
     <button class="micl-button" value="dosave">Save</button>
   </form>
   <div class="micl-dialog__content">
-    <span class="micl-dialog__supporting-text">This dialog covers the whole screen.</span>
+    <span id="mydesc" class="micl-dialog__supporting-text">This dialog covers the whole screen.</span>
   </div>
   <form method="dialog" class="micl-dialog__actions">
     <button type="button" class="micl-button" popovertarget="mydialog">Cancel</button>

package/components/navigationrail/README.md

@@ -82,12 +82,12 @@ Add the `popover` attribute to the navigation rail, and the `popovertarget` attr
 </div>
 ```
 
-[!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 `<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);
+> ```
 
 ### Modal navigation rail