material-inspired-component-library 3.0.1 → 3.1.0

package/README.md

@@ -76,7 +76,7 @@ Copy the main `micl.js` file to your distribution folder and include it in your
 ```
 This will initialize all MICL components, including those that will be added to the DOM later on.
 
-## Foundations
+## Foundations 🪟
 A separate CSS file, based on the [Material Design Layout Foundation](https://m3.material.io/foundations/layout/understanding-layout/overview), provides styles for an adaptive layout. It includes styles for the **window frame**, **body region** and **panes** that adjust to the available screen space, ensuring your layout follows Material Design's responsive guidelines.
 
 - [x] [Layout](layout/README.md)
@@ -84,6 +84,7 @@ A separate CSS file, based on the [Material Design Layout Foundation](https://m3
 ## Available components ✅
 The library currently consists of the following components:
 - [x] [Accordion](components/accordion/README.md)
+- [ ] [Alert](README.md)
 - [x] [App Bar](components/appbar/README.md)
 - [x] [Badge](components/badge/README.md)
 - [x] [Bottom sheet](components/bottomsheet/README.md)
@@ -100,39 +101,33 @@ The library currently consists of the following components:
 - [x] [Select](components/select/README.md)
 - [x] [Side sheet](components/sidesheet/README.md)
 - [x] [Slider](components/slider/README.md)
+- [ ] [Stepper](README.md)
 - [x] [Switch](components/switch/README.md)
 - [x] [Text field](components/textfield/README.md)
 
-## Change Log
+## Change Log ↪️
 
-### 3.0.0 (24.09.2025)
-**Features**
+### 3.1.0 (19.10.2025)
+- **Checkbox**: Refactoring + add support for checkbox groups.
 
+### 3.0.0 (24.09.2025)
+- **BREAKING:** Use `<nav>` instead of `<div>` for Navigation rail.
 - **App Bar**: New component.
 - **Layout**: Support for adaptive layout.
-- Improved handling of target area for small buttons.
-- **BREAKING:** Use `<nav>` instead of `<div>` for Navigation rail.
+- **Buttons**: Improved handling of target area for small buttons.
 
 ### 2.0.0 (04.09.2025)
-**Features**
-
 - **Navigation rail**: New component.
 - **Badge**: New component.
 - **Ripple**: Now uses custom CSS properties.
 
 ### 1.3.0 (23.08.2025)
-**Features**
-
 - **Menu**: Added support for submenus.
 - **Ripple**: The ripple-effect does not use a pseudo-element anymore.
 - **State layer**: Rewrite for simpler styling.
 
 ### 1.2.0 (17.08.2025)
-**Features**
-
 - **List**: Added support for switches inside list items.
 
 ### 1.1.0 (12.08.2025)
-**Features**
-
 - **Text field**: Added support for multi-line text fields.

package/components/alert/index.scss

@@ -0,0 +1,120 @@
+//
+// 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/shapes';
+@use '../../styles/typography';
+
+:root {
+    --md-sys-alert-padding: 16px;
+    --md-sys-alert-space: 16px;
+}
+
+.micl-alert-filled,
+.micl-alert-tonal,
+.micl-alert-outlined {
+    --md-sys-alert-background-color: inherit;
+    --md-sys-alert-color: inherit;
+
+    box-sizing: border-box;
+    display: flex;
+    inline-size: 100%;
+    padding: var(--md-sys-alert-padding, 16px);
+    column-gap: var(--md-sys-alert-space, 8px);
+    border: none;
+    outline: none;
+    border-radius: var(--md-sys-shape-corner-small, 8px);
+    background-color: var(--md-sys-alert-background-color);
+    color: var(--md-sys-alert-color);
+
+    .micl-alert__icon {
+        block-size: var(--md-sys-layout-icon-size, 24px);
+        inline-size: var(--md-sys-layout-icon-size, 24px);
+        font-size: var(--md-sys-layout-icon-size, 24px);
+    }
+    .micl-alert__text {
+        display: flex;
+        flex-direction: column;
+        row-gap: 8px;
+
+        h1, h2, h3, h4, h5, h6, .micl-heading {
+            @include typography.title-medium;
+
+            margin: 0;
+        }
+        .micl-alert__supporting-text {
+            @include typography.body-medium;
+
+            margin: 0;
+        }
+    }
+}
+
+.micl-alert-filled {
+    --md-sys-alert-background-color: var(--md-sys-color-error);
+    --md-sys-alert-color: var(--md-sys-color-on-error);
+
+    &.micl-alert--primary {
+        --md-sys-alert-background-color: var(--md-sys-color-primary);
+        --md-sys-alert-color: var(--md-sys-color-on-primary);
+    }
+    &.micl-alert--secondary {
+        --md-sys-alert-background-color: var(--md-sys-color-secondary);
+        --md-sys-alert-color: var(--md-sys-color-on-secondary);
+    }
+    &.micl-alert--tertiary {
+        --md-sys-alert-background-color: var(--md-sys-color-tertiary);
+        --md-sys-alert-color: var(--md-sys-color-on-tertiary);
+    }
+}
+
+.micl-alert-tonal {
+    --md-sys-alert-background-color: var(--md-sys-color-error-container);
+    --md-sys-alert-color: var(--md-sys-color-on-error-container);
+
+    &.micl-alert--primary {
+        --md-sys-alert-background-color: var(--md-sys-color-primary-container);
+        --md-sys-alert-color: var(--md-sys-color-on-primary-container);
+    }
+    &.micl-alert--secondary {
+        --md-sys-alert-background-color: var(--md-sys-color-secondary-container);
+        --md-sys-alert-color: var(--md-sys-color-on-secondary-container);
+    }
+    &.micl-alert--tertiary {
+        --md-sys-alert-background-color: var(--md-sys-color-tertiary-container);
+        --md-sys-alert-color: var(--md-sys-color-on-tertiary-container);
+    }
+}
+
+.micl-alert-outlined {
+    --md-sys-alert-color: var(--md-sys-color-error);
+
+    border: 1px solid var(--md-sys-alert-color);
+
+    &.micl-alert--primary {
+        --md-sys-alert-color: var(--md-sys-color-primary);
+    }
+    &.micl-alert--secondary {
+        --md-sys-alert-color: var(--md-sys-color-secondary);
+    }
+    &.micl-alert--tertiary {
+        --md-sys-alert-color: var(--md-sys-color-tertiary);
+    }
+}

package/components/appbar/index.scss

@@ -66,7 +66,7 @@
     }
     .micl-appbar__leading-icon {
         grid-area: appbar-leading;
-        margin-inline-start: calc(var(--md-sys-layout-window-margin) - (var(--micl-width, statelayer.$md-sys-target-size) / 2) + (24px / 2) - var(--md-sys-appbar-padding-inline));
+        margin-inline-start: calc(var(--md-sys-layout-window-margin) - (var(--micl-width, statelayer.$md-sys-target-size) / 2) + (var(--md-sys-layout-icon-size, 24px) / 2) - var(--md-sys-appbar-padding-inline));
         color: var(--md-sys-color-on-surface);
     }
     .micl-appbar__headline {
@@ -103,7 +103,7 @@
     }
     .micl-appbar__trailing-icon {
         grid-area: appbar-trailing;
-        margin-inline-end: calc(var(--md-sys-layout-window-margin) - (var(--micl-width, statelayer.$md-sys-target-size) / 2) + (24px / 2) - var(--md-sys-appbar-padding-inline));
+        margin-inline-end: calc(var(--md-sys-layout-window-margin) - (var(--micl-width, statelayer.$md-sys-target-size) / 2) + (var(--md-sys-layout-icon-size, 24px) / 2) - var(--md-sys-appbar-padding-inline));
         color: var(--md-sys-color-on-surface-variant);
     }
     &.micl-appbar--medium {

package/components/badge/index.scss

@@ -25,16 +25,16 @@
     --md-sys-badge-small-size: 6px;
     --md-sys-badge-large-size: 16px;
     --md-sys-badge-large-padding: 4px;
-}
-
-.micl-badge {
     --md-sys-badge-inline-offset: 0px;
     --md-sys-badge-block-offset: 0px;
+}
 
+.micl-badge {
     box-sizing: border-box;
     position: fixed;
-    inset: unset;
+    inset: 0;
     margin: 0;
+    overflow-x: hidden;
     background-color: var(--md-sys-color-error);
     color: var(--md-sys-color-on-error);
 
@@ -42,7 +42,7 @@
         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));
+        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);
     }
@@ -53,9 +53,24 @@
         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));
+        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);
     }
 }
+
+@supports not (top: anchor(bottom)) {
+    .micl-badge {
+        position: absolute;
+        inset: 0 !important;
+        margin-block: calc(12px + var(--md-sys-badge-block-offset)) auto;
+
+        &.micl-badge--small {
+            margin-inline-start: calc(var(--md-sys-layout-icon-size) - var(--md-sys-badge-small-size) - var(--md-sys-badge-inline-offset));
+        }
+        &:not(.micl-badge--small) {
+            margin-inline-start: calc(12px - var(--md-sys-badge-inline-offset));
+        }
+    }
+}

package/components/button/index.scss

@@ -221,8 +221,8 @@ button.micl-button-outlined-m {
         }
     }
     .micl-button__icon {
-        font-size: 24px;
-        width: 24px;
+        font-size: var(--md-sys-layout-icon-size, 24px);
+        width: var(--md-sys-layout-icon-size, 24px);
     }
 }
 

package/components/card/README.md

@@ -1,5 +1,5 @@
 # Card
-This component implements the the [Material Design 3 Expressive Card](https://m3.material.io/components/cards/overview) design.
+This component implements the the [Material Design 3 Expressive Card](https://m3.material.io/components/cards/overview) design. Cards display content and actions about a single subject.
 
 ## Basic Usage
 
@@ -40,7 +40,6 @@ Cards come in **three distinct styles**:
 - `micl-card-outlined`: A card with a clear border, often used for less prominent content or to indicate interactivity.
 
 ### Card Content Structure
-
 While the card container is the only required element, the Card component provides several optional utility classes to help structure your card's content:
 ```HTML
 <div class="micl-card-outlined" tabindex="0">
@@ -64,7 +63,7 @@ While the card container is the only required element, the Card component provid
   - `micl-card__headline-m` (medium) - *Used in the example above*
   - `micl-card__headline-l` (large)
 
-- `micl-card__image`: Applies styling to an `<img>` element used as the primary image for the card.
+- `micl-card__image`: Applies styling to an `<img>` element or an element with a `background-image` style used as the primary image for the card.
 
 - `micl-card__subhead`: For secondary headings, displayed with a smaller font than the main headline.
 
@@ -93,18 +92,23 @@ Cards can also serve as containers for expandable detail areas using the `<detai
 </details>
 ```
 
+### Compact Cards
+Add the `micl-card--compact` to the main `<div>` element (or, the `<summary>` element for expandable cards) to create a compact version of the card header.
+
 ### States
 - **Disabled Cards**: To visually indicate a disabled card (e.g., non-interactive), add the `micl-card--disabled` class to the card container.
 
 - **Dragging State**: When implementing drag-and-drop functionality for cards, apply the `micl-card--dragging` class to the card container to provide visual feedback during the drag operation.
 
 ## Customizations
-You can customize the appearance of the Card 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 dividers.
+You can customize the appearance of the Card 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 cards.
 
 | Variable name | Default Value | Description |
 | ------------- | ----- | ----------- |
 | --md-sys-card-margin | 8px | Sets the spacing between adjacent cards both horizontally and vertically |
 | --md-sys-card-padding-inline | 16px | Defines the amount of space between the left and right edges of a card and its content |
+| --md-sys-card-content-padding-block | 16px | The amount of vertical padding reserved for the content area |
+| --md-sys-card-outlined-border-width | 1px | The width of the border of **outlined** cards |
 
 **Example: Changing the card margins**
 
@@ -120,6 +124,6 @@ You can customize the appearance of the Card component by overriding its global
 ```
 
 ## Compatibility
-This component uses the `color-mix` CSS functional notation, which might not be supported in your browser. Please check [Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix#browser_compatibility) for details.
+This component utilizes relative RGB color values, which may not be fully supported in your browser. Please check [Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#browser_compatibility) for details.
 
 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/card/index.scss

@@ -28,6 +28,8 @@
 :root {
     --md-sys-card-margin: 8px;
     --md-sys-card-padding-inline: 16px;
+    --md-sys-card-content-padding-block: 16px;
+    --md-sys-card-outlined-border-width: 1px;
 }
 
 .micl-card-elevated,
@@ -36,9 +38,12 @@
     --md-sys-card-motion-spatial: #{motion.$md-sys-motion-expressive-default-spatial};
     --md-sys-card-motion-duration: #{motion.$md-sys-motion-expressive-default-spatial-duration};
 
-    height: fit-content;
+    display: block;
+    block-size: fit-content;
     margin: 0;
+    padding-block-end: var(--md-sys-card-content-padding-block);
     border-radius: var(--md-sys-shape-corner-medium);
+    outline: none;
     overflow: hidden;
     interpolate-size: allow-keywords;
 
@@ -66,7 +71,6 @@
 
             outline: var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);
             outline-offset: var(--md-sys-state-focus-indicator-outer-offset);
-            box-shadow: var(--md-sys-elevation-level1);
         }
         &:active {
             --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity);
@@ -89,21 +93,23 @@
         outline-offset: var(--md-sys-state-focus-indicator-outer-offset);
     }
     &::details-content {
-        height: 0;
+        block-size: 0;
         overflow: hidden;
         transition:
-            height var(--md-sys-card-motion-duration) var(--md-sys-card-motion-spatial),
+            block-size var(--md-sys-card-motion-duration) var(--md-sys-card-motion-spatial),
             content-visibility var(--md-sys-card-motion-duration) linear allow-discrete;
     }
     &[open]::details-content {
-        height: auto;
+        block-size: auto;
     }
     &> summary {
-        padding-block-end: 8px;
         outline: none;
         list-style: none;
         cursor: pointer
     }
+    &:not([open]):has(> summary.micl-card--compact) {
+        padding-block-end: 0;
+    }
 }
 
 .micl-card-elevated {
@@ -114,9 +120,6 @@
         &:hover {
             box-shadow: var(--md-sys-elevation-level2);
         }
-        &:active {
-            box-shadow: var(--md-sys-elevation-level1);
-        }
         &.micl-card--dragging {
             box-shadow: var(--md-sys-elevation-level4);
         }
@@ -125,29 +128,18 @@
 .micl-card-filled {
     background-color: var(--md-sys-color-surface-container-highest);
     box-shadow: var(--md-sys-elevation-level0);
-
-    &[tabindex='0']:not(.micl-card--disabled) {
-        &:focus-visible {
-            box-shadow: var(--md-sys-elevation-level0);
-        }
-        &:active {
-            box-shadow: var(--md-sys-elevation-level0);
-        }
-    }
 }
 .micl-card-outlined {
     background-color: var(--md-sys-color-surface);
     box-shadow: var(--md-sys-elevation-level0);
-    border: 1px solid var(--md-sys-color-outline-variant);
+    border: var(--md-sys-card-outlined-border-width) solid var(--md-sys-color-outline-variant);
 
     &[tabindex='0']:not(.micl-card--disabled) {
         &:focus-visible {
             border-color: var(--md-sys-color-on-surface);
-            box-shadow: var(--md-sys-elevation-level0);
         }
         &:active {
             border-color: var(--md-sys-color-outline-variant);
-            box-shadow: var(--md-sys-elevation-level0);
         }
     }
 }
@@ -167,10 +159,44 @@
         border-color: rgb(from var(--md-sys-color-outline) r g b / 12%);
     }
 }
+.micl-card--compact {
+    display: grid;
+    grid-template-areas:
+        "card-media card-headline"
+        "card-media card-subhead"
+        "card-media card-supporting"
+        "card-content card-content";
+    grid-template-columns: 20% 1fr;
+
+    .micl-card__image {
+        grid-area: card-media;
+        block-size: 100%;
+        object-fit: cover;
+        background-size: cover;
+    }
+    .micl-card__headline-s,
+    .micl-card__headline-m,
+    .micl-card__headline-l {
+        grid-area: card-headline;
+    }
+    .micl-card__subhead {
+        grid-area: card-subhead;
+    }
+    .micl-card__supporting-text {
+        grid-area: card-supporting;
+    }
+    .micl-card__content {
+        grid-area: card-content;
+    }
+}
 
 .micl-card__image {
-    width: 100%;
+    display: block;
+    inline-size: 100%;
     border-radius: var(--md-sys-shape-corner-medium);
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: contain;
 }
 
 .micl-card__headline-s,
@@ -260,6 +286,7 @@
 
 .micl-card__content {
     box-sizing: border-box;
+    padding-block: var(--md-sys-card-content-padding-block) 0;
     padding-inline: var(--md-sys-card-padding-inline);
     background-color: inherit;
     overflow: hidden;

package/components/checkbox/README.md

@@ -1,5 +1,5 @@
 # Checkbox
-This component implements the the [Material Design 3 Expressive Checkbox](https://m3.material.io/components/checkbox/overview) design.
+This component implements the the [Material Design 3 Expressive Checkbox](https://m3.material.io/components/checkbox/overview) design. A checkbox allows a user to select one or more options from a number of choices.
 
 ## Basic Usage
 
@@ -7,7 +7,7 @@ This component implements the the [Material Design 3 Expressive Checkbox](https:
 To add a basic checkbox, use the `<input type="checkbox">` element with the `micl-checkbox` class, paired with a `<label>` element:
 
 ```HTML
-<input type="checkbox" id="mycheckbox" class="micl-checkbox" value="foo">
+<input type="checkbox" id="mycheckbox" class="micl-checkbox">
 <label for="mycheckbox">Bar</label>
 ```
 
@@ -19,13 +19,11 @@ Import the checkbox styles into your project:
 ```
 
 ### JavaScript
-This component requires JavaScript to support checking and unchecking using a keyboard:
+This component requires JavaScript to support checkbox groups:
 
-```JavaScript
-import micl from "material-inspired-component-library/dist/micl";
-```
+`import micl from "material-inspired-component-library/dist/micl";`
 
-This will initialize any Checkbox component, including those that will be added to the DOM later on.
+This will initialize any checkbox group, including those that will be added to the DOM later on.
 
 ### Demo
 A live example of the [Checkbox component](https://henkpb.github.io/micl/checkbox.html) is available for you to interact with.
@@ -37,20 +35,60 @@ A checkbox can be disabled by adding the `disabled` attribute to the `<input>` e
 
 The Checkbox component respects the `dir` global attribute, automatically adjusting its layout for right-to-left (RTL) languages when `dir="rtl"` is applied to an ancestor element.
 
+The component applies `cursor: pointer` and the color role **on surface** to the `<label>` element immediately preceding or following an `<input type="checkbox">` with the `micl-checkbox` class. You are encouraged to customize these CSS settings to match your design system.
+
+## Checkbox group
+You can establish a parent-child relationship among checkboxes. To do this, wrap the entire set of related checkboxes in an element using the `micl-checkbox-group` class. The designated parent checkbox must also include the `micl-checkbox__parent` class.
+
+```HTML
+<div class="micl-checkbox-group">
+  <input type="checkbox" id="cb0" class="micl-checkbox micl-checkbox__parent" value="c0">
+  <label for="cb0">Choices</label>
+  <input type="checkbox" id="cb1" class="micl-checkbox" value="c1">
+  <label for="cb1">First Choice</label>
+  <input type="checkbox" id="cb2" class="micl-checkbox" checked value="c2">
+  <label for="cb2">Second Choice</label>
+  ...
+</div>
+```
+
+To visually improve the layout, such as by indenting child checkboxes, use wrapper elements and utility classes:
+
+```HTML
+<div class="micl-checkbox-group">
+  <div class="micl-flex--vcenter">
+    <input type="checkbox" id="cb0" class="micl-checkbox micl-checkbox__parent" value="c0">
+    <label for="cb0">Choices</label>
+  </div>
+  <div style="padding-inline-start:16px">
+    <div class="micl-flex--vcenter">
+      <input type="checkbox" id="cb1" class="micl-checkbox" value="c1">
+      <label for="cb1">First Choice</label>
+    </div>
+    <div class="micl-flex--vcenter">
+      <input type="checkbox" id="cb2" class="micl-checkbox" checked value="c2">
+      <label for="cb2">Second Choice</label>
+    </div>
+    ...
+  </div>
+</div>
+```
+
+Note that checkbox groups support **nesting**, allowing a `micl-checkbox-group` to contain other `micl-checkbox-group` elements for multi-level hierarchies.
+
 ## Customizations
 You can customize the appearance of the Checkbox 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 checkboxes.
 
 | Variable name | Default Value | Description |
 | ------------- | ------------- | ----------- |
 | --md-sys-checkbox-border-width | 2px | Controls the thickness of the checkbox's border |
+| --md-sys-checkbox-check-thickness | 2px | The thickness of the checkmark |
 | --md-sys-checkbox-container-size | 18px | Defines the size of the checkbox itself |
-| --md-sys-checkbox-selected-icon | \2A3D | The character used as the checkmark for the checkbox |
-| --md-sys-checkbox-state-layer-radius | 20px | Sets the radius of the interactive area that indicates the component's current state (e.g., hover, focus, press) |
 
-**Example: Changing the size of the interactive area**
+**Example: Changing the border width of a checkbox**
 
 ```HTML
-<div style="--md-sys-checkbox-state-layer-radius:24px">
+<div style="--md-sys-checkbox-border-width:1px">
   <input type="checkbox" id="mycheckbox" class="micl-checkbox">
   <label for="mycheckbox">Checkbox</label>
 </div>