material-inspired-component-library 1.0.0

package/.editorconfig

@@ -0,0 +1,12 @@
+# For GitHub
+
+root = true
+
+[*.{sass,css,ts,js}]
+charset = utf-8
+indent_style = space
+indent_size = 4
+tab_width = 4
+end_of_line = lf
+trim_trailing_whitespace = true
+insert_final_newline = true

package/.gitattributes

@@ -0,0 +1,9 @@
+* text=auto
+
+*.html text eol=lf
+*.scss text eol=lf
+*.css text eol=lf
+*.ts text eol=lf
+*.js text eol=lf
+*.md text eol=lf
+*.json text eol=lf

package/.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,35 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

package/.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Hermana
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,99 @@
+# Material-Inspired Component Library (MICL)
+The Material-Inspired Component Library (MICL) offers a free and open-source collection of beautifully crafted components leveraging native HTML markup, designed to align with the [Material Design 3](https://m3.material.io/) guidelines. MICL prioritizes minimal HTML markup and often requires no JavaScript, making it a lightweight and efficient choice for your projects.
+
+## Why Choose MICL?
+- **Embrace Material Design 3:** Seamlessly integrate the aesthetic and user experience principles of Material Design into your web pages and applications.
+- **Lightweight & Efficient:** Benefit from components built with straightforward HTML and minimal to no JavaScript, ensuring fast loading times and a streamlined development process.
+- **Effortless Dark Mode:** Enjoy out-of-the-box support for both light and dark modes, automatically adapting to your defined color scheme.
+
+## Why Might MICL Not Be for You?
+- **Heavy JavaScript Dependencies:** If your project heavily relies on a JavaScript framework for component interaction, MICL's minimalist approach might not be the best fit.
+- **Bootstrap Preference:** Users deeply integrated with or preferring the Bootstrap CSS framework may find MICL's distinct design philosophy less suitable.
+- **Legacy Browser Support:** MICL is designed for modern browsers, and comprehensive support for older browser versions is not a primary focus.
+
+## Demo & Documentation 📖
+Explore the components in a live environment and see how they work.
+
+- **Live Demo:** [The MICL Showcase](https://henkpb.github.io/micl/)
+- **Component Documentation:** [View all component documentation](components/README.md)
+
+## Quick start 🚀
+
+### 1. Install via NPM
+```shell
+npm install micl
+```
+
+### 2. Add the CSS
+
+**Sass/SCSS**
+
+To import the styles for a single component:
+```SCSS
+@use "micl/components/card";
+```
+To import all component styles:
+```SCSS
+@use "micl/styles";
+```
+
+**Plain CSS**
+
+Add the main CSS file to your project:
+```HTML
+<link rel="stylesheet" href="node_modules/micl/dist/micl.css">
+```
+
+### 3. Add the HTML & JavaScript
+Here is a simple example of a **Card** component.
+
+```HTML
+<div class="micl-card-outlined">
+  <img src="your-image.jpg" alt="A beautiful image" class="micl-card__image">
+  <div class="micl-card__headline-s">
+    <h2>Card Title</h2>
+  </div>
+  <p class="micl-card__supporting-text">This is a simple card component.</p>
+</div>
+```
+
+Some components, list the **List**, require a small amount of JavaScript to handle interactive behaviour.
+
+```TypeScript
+// For components with interactive behaviour
+import list from "micl/components/lists";
+
+// To import TypeScript for all components
+import components from "micl/components";
+```
+
+To import all the TypeScript into your project:
+```TypeScript
+import components from "micl/components";
+```
+
+**Plain JavaScript**
+
+Add the main JavaScript file to your project:
+```HTML
+<script src="node_modules/micl/dist/micl.js"></script>
+```
+
+## Available components ✅
+The library currently consists of the following components:
+- [x] [Accordion](components/accordion/README.md)
+- [x] [Bottom sheet](components/bottomsheet/README.md)
+- [x] [Button](components/button/README.md)
+- [x] [Card](components/card/README.md)
+- [x] [Checkbox](components/checkbox/README.md)
+- [x] [Dialog](components/dialog/README.md)
+- [x] [Divider](components/divider/README.md)
+- [x] [Icon button](components/iconbutton/README.md)
+- [x] [List](components/list/README.md)
+- [x] [Menu](components/menu/README.md)
+- [x] [Radio button](components/radio/README.md)
+- [x] [Select](components/select/README.md)
+- [x] [Side sheet](components/sidesheet/README.md)
+- [x] [Slider](components/slider/README.md)
+- [x] [Switch](components/switch/README.md)
+- [x] [Text field](components/textfield/README.md)

package/components/README.md

@@ -0,0 +1,12 @@
+# MICL Components
+Welcome to the MICL component library, a collection of components that implement the [Material Design 3](https://m3.material.io/) specification.
+
+Each component is self-contained in a separate folder, making it easy to find what you need. You'll typically find:
+
+- A [Sass stylesheet](https://sass-lang.com/) for component-specific styling.
+
+- If required, a [TypeScript module](https://www.typescriptlang.org/) for interactive features.
+
+- A README.md file for detailed documentation.
+
+Most components are standalone, but some are built on top of others. For example, the [Menu component](./menu/README.md) extends the [List component](./list/README.md), so it requires the styles and functionality of both. Always check the documentation for each component to see which dependencies you need to import. This ensures everything works as expected.

package/components/accordion/README.md

@@ -0,0 +1,94 @@
+# Accordion
+This component implements the the [Material Design 3 Expressive Expandable Lists](https://m3.material.io/components/lists/overview) design. Accordions are vertically stacked lists that allow you to show and hide sections of content.
+
+## Basic Usage
+
+### HTML
+The Accordion component is an extension of the [**List** component](../list/README.md), using `<details>` and `<summary>` elements for its interactive behaviour. To create a basic accordion, use a `<div>` with the `micl-list` class and nest individual `<details>` elements for each collapsible item. Apply the appropriate `micl-list-item-` class to the `summary` element.
+
+```HTML
+<div class="micl-list" role="listbox">
+  <details>
+    <summary class="micl-list-item-one">
+      <span class="micl-list-item__text">
+        <span class="micl-list-item__headline">A single-line accordion item</span>
+      </span>
+    </summary>
+    <div class="micl-list-item__content">
+      <p class="md-sys-typescale-body-medium">
+        This is the content that is revealed when the accordion item is expanded.
+      </p>
+    </div>
+  </details>
+</div>
+```
+
+- The `role="listbox"` is used for accessibility, indicating a selectable list.
+
+- The `micl-list-item__content` class styles the collapsible area of the accordion item.
+
+### CSS
+Import the list styles into your project:
+
+```CSS
+@use "micl/components/list";
+```
+
+### TypeScript
+This component requires a TypeScript module to support keyboard navigation. You can import the specific module or use the main MICL TypeScript library, which handles initialization automatically.
+
+To manually initialize the component:
+
+```TypeScript
+import miclAccordion from 'micl/components/list';
+
+miclAccordion.initialize(document.querySelector('.micl-list'));
+```
+
+### Demo
+A live example of the [Accordion component](https://henkpb.github.io/micl/accordion.html) is available for you to interact with.
+
+## Variants
+To ensure that only one accordion item within a group can be open at a time, add a matching `name` attribute to all the `<details>` elements you want to group together.
+
+```HTML
+<div class="micl-list" role="listbox">
+  <details name="mygroup">
+    <summary class="micl-list-item-two">
+      <span class="micl-list-item__text">
+        <span class="micl-list-item__headline">Marie Curie</span>
+        <span class="micl-list-item__supporting-text">The name of the employee.</span>
+      </span>
+    </summary>
+    <div class="micl-list-item__content">
+      <div class="micl-textfield-filled">
+        <label for="tf1">Name</label>
+        <input type="text" id="tf1" value="Marie Curie">
+      </div>
+    </div>
+  </details>
+  <details name="mygroup">
+    <summary class="micl-list-item-two" tabindex="-1">
+      <span class="micl-list-item__text">
+        <span class="micl-list-item__headline">Country</span>
+        <span class="micl-list-item__supporting-text">The country of residence.</span>
+      </span>
+    </summary>
+    <div class="micl-list-item__content">
+      <div class="micl-textfield-filled">
+        <label for="tf2">Country</label>
+        <input type="text" id="tf2" value="France">
+      </div>
+    </div>
+  </details>
+</div>
+```
+
+Adding the `micl-list-item--disabled` class to the `<summary>` element causes the accordion item to be displayed in a disabled state.
+
+Add the `micl-list__divider` class to the `<div class="micl-list">` element to automatically place a divider between each accordion item.
+
+Since the Accordion is based on the List component, you can use the same utility classes for content structure and styling. Refer to the [List component documentation](../list/README.md) for details on how to add icons, avatars, images, and other features to your accordion items.
+
+## Compatibility
+The Card component uses the `interpolate-size` CSS property to smoothly open and close the detail area of a Details disclosure element, which might not be supported in your browser. Please check [Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/CSS/interpolate-size#browser_compatibility) for details.

package/components/bottomsheet/README.md

@@ -0,0 +1,77 @@
+# Bottom sheet
+This component implements the the [Material Design 3 Expressive Bottom sheet](https://m3.material.io/components/bottom-sheets/overview) design.
+
+## 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.
+
+```HTML
+<dialog id="mybottomsheet" class="micl-bottomsheet" closedby="any" popover>
+  <div class="micl-bottomsheet__content">
+    ...your content...
+  </div>
+</dialog>
+```
+
+### CSS
+Import the bottom sheet styles into your project:
+
+```CSS
+@use "micl/components/bottomsheet";
+```
+
+### TypeScript
+This component requires a TypeScript module to support **modal** and **resizable** bottom sheets. You can import the specific bottom sheet module or use the main MICL TypeScript library, which handles initialization automatically.
+
+To manually initialize the component:
+
+```TypeScript
+import miclBottomSheet from 'micl/components/bottomsheet';
+
+miclBottomSheet.initialize(document.querySelector('.micl-bottomsheet'));
+```
+
+### Demo
+A live example of the [Bottom sheet component](https://henkpb.github.io/micl/bottomsheet.html) is available for you to interact with.
+
+## Variants
+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.
+
+```HTML
+<dialog id="mybottomsheet" class="micl-bottomsheet" closedby="closerequest">
+  <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.
+
+```HTML
+<dialog id="mybottomsheet" class="micl-bottomsheet" closedby="any" popover>
+  <div class="micl-bottomsheet__headline">
+    <button type="button" class="micl-bottomsheet__draghandle" aria-label="Drag handle"></button>
+  </div>
+  <div class="micl-bottomsheet__content">
+    ...your content...
+  </div>
+</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:
+
+```HTML
+<dialog data-snapheights="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>
+```
+
+## 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/bottomsheet.scss

@@ -0,0 +1,134 @@
+//
+// Copyright © 2025 Hermana AS
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+@use '../../styles/motion';
+
+dialog.micl-bottomsheet {
+    --md-sys-bottomsheet-height: max-content;
+    --md-sys-bottomsheet-margin: 56px;
+    --md-sys-bottomsheet-padding: 24px;
+    --md-sys-bottomsheet-handle-width: 32px;
+    --md-sys-bottomsheet-handle-height: 4px;
+
+    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 ;
+    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);
+    opacity: 0;
+    overflow-y: hidden;
+    interpolate-size: allow-keywords;
+
+    &:not(.micl-bottomsheet--resizing) {
+        transition:
+            display var(--md-sys-motion-duration-medium1) allow-discrete,
+            overlay var(--md-sys-motion-duration-medium1) allow-discrete,
+            height var(--md-sys-motion-duration-medium1) linear(motion.$md-sys-motion-spring-default-spatial),
+            opacity var(--md-sys-motion-duration-medium1) motion.$md-sys-motion-easing-emphasized-accelerate;
+    }
+    &.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);
+        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);
+            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);
+            background-color: var(--md-sys-color-on-surface-variant);
+            background-clip: content-box;
+            cursor: pointer;
+
+            &:focus-visible {
+                outline: var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);
+                outline-offset: var(--md-sys-state-focus-indicator-outer-offset);
+            }
+        }
+    }
+
+    .micl-bottomsheet__content {
+        padding: 0 var(--md-sys-bottomsheet-padding) var(--md-sys-bottomsheet-padding) var(--md-sys-bottomsheet-padding);
+    }
+
+    &::backdrop {
+        background-color: rgba(0, 0, 0, 0);
+        transition:
+            display var(--md-sys-motion-duration-long2) linear allow-discrete,
+            overlay var(--md-sys-motion-duration-long2) linear allow-discrete,
+            background-color var(--md-sys-motion-duration-long2) linear;
+    }
+    &:popover-open,
+    &[open] {
+        height: var(--md-sys-bottomsheet-height);
+        opacity: 1;
+        // overflow-y: auto;
+
+        &:not(.micl-bottomsheet--resizing) {
+            transition:
+                display var(--md-sys-motion-duration-long2) linear allow-discrete,
+                overlay var(--md-sys-motion-duration-long2) linear allow-discrete,
+                height var(--md-sys-motion-duration-long2) linear(motion.$md-sys-motion-spring-default-spatial),
+                opacity var(--md-sys-motion-duration-long2) motion.$md-sys-motion-easing-emphasized-decelerate;
+        }
+        @starting-style {
+            height: 0;
+            opacity: 0;
+        }
+        &::backdrop {
+            @starting-style {
+                background-color: rgba(0, 0, 0, 0);
+            }
+        }
+    }
+    &[open]::backdrop {
+        background-color: rgba(0, 0, 0, 0.2);
+    }
+}
+
+@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);
+        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;
+    }
+}

package/components/bottomsheet/index.ts

@@ -0,0 +1,152 @@
+//
+// Copyright © 2025 Hermana AS
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+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)
+            );
+
+        if (!fitHeight) {
+            fitHeight = dialog.getBoundingClientRect().height;
+        }
+        return [...new Set(snapHeights.concat([fitHeight, maxHeight]).sort())];
+    };
+
+    const getNextSnapHeight = (dialog: HTMLDialogElement, isResizing: boolean): number =>
+    {
+        let currentHeight = dialog.getBoundingClientRect().height,
+            snapHeights   = getSnapHeights(dialog),
+            largerSnaps   = snapHeights.filter(height => height > currentHeight + 4);
+
+        return largerSnaps[0] || snapHeights[isResizing ? snapHeights.length - 1 : 0];
+    };
+
+    const getPreviousSnapHeight = (dialog: HTMLDialogElement): number =>
+    {
+        let currentHeight = dialog.getBoundingClientRect().height,
+            snapHeights   = getSnapHeights(dialog),
+            smallerSnaps  = snapHeights.filter(height => height < currentHeight - 4);
+
+        return smallerSnaps[smallerSnaps.length - 1] || snapHeights[0];
+    };
+
+    const setHeight = (dialog: HTMLDialogElement, value: number): void =>
+    {
+        dialog.style.setProperty('--md-sys-bottomsheet-height', `${value}px`);
+    }
+
+    return {
+        initialize: (element: HTMLDialogElement) =>
+        {
+            if (
+                !element.matches('dialog.micl-bottomsheet')
+                || element.dataset.miclinitialized
+            ) {
+                return;
+            }
+            element.dataset.miclinitialized = '1';
+
+            const headline = element.querySelector('.micl-bottomsheet__headline') as HTMLElement;
+            if (!headline) {
+                return;
+            }
+            const draghandle = headline.querySelector('.micl-bottomsheet__draghandle') as HTMLElement;
+
+            draghandle?.addEventListener('click', () =>
+            {
+                const nextSnapHeight = getNextSnapHeight(element, false);
+                if (nextSnapHeight > 4) {
+                    setHeight(element, nextSnapHeight);
+                }
+            });
+
+            let isPreparing = false,
+                isResizing  = false,
+                initialMouseY: number,
+                initialHeight: number;
+
+            headline.addEventListener('mousedown', (event: Event) =>
+            {
+                if (event.eventPhase === Event.AT_TARGET) {
+                    isPreparing = true;
+                    event.preventDefault();
+                    initialMouseY = (event as MouseEvent).clientY;
+                    initialHeight = element.getBoundingClientRect().height;
+                    document.addEventListener('mousemove', onMouseMove);
+                    document.addEventListener('mouseup', onMouseUp);
+                }
+            });
+
+            function onMouseMove(event: Event)
+            {
+                const currentMouseY = (event as MouseEvent).clientY;
+                if (isPreparing && (Math.abs(initialMouseY - currentMouseY) > 4)) {
+                    isPreparing = false;
+                    isResizing  = true;
+                    element.classList.add('micl-bottomsheet--resizing');
+                }
+                if (isResizing) {
+                    setHeight(element, initialHeight + initialMouseY - currentMouseY);
+                }
+            }
+            function onMouseUp(event: Event)
+            {
+                isPreparing = false;
+                element.classList.remove('micl-bottomsheet--resizing');
+                if (isResizing) {
+                    isResizing = false;
+
+                    const currentMouseY = (event as MouseEvent).clientY;
+                    if (currentMouseY < initialMouseY) {
+                        setHeight(element, getNextSnapHeight(element, true));
+                    }
+                    else {
+                        if (element.getBoundingClientRect().height < 48) {
+                            if (!!element.popover) {
+                                element.hidePopover();
+                            }
+                            setHeight(element, initialHeight);
+                        }
+                        else {
+                            setHeight(element, getPreviousSnapHeight(element));
+                        }
+                    }
+                    document.removeEventListener('mousemove', onMouseMove);
+                    document.removeEventListener('mouseup', onMouseUp);
+                }
+            }
+        },
+        cleanup: (element: HTMLDialogElement) =>
+        {
+            if (element.matches('dialog.micl-bottomsheet')) {
+                delete element.dataset.miclinitialized;
+            }
+        }
+    };
+})();