material-inspired-component-library 3.0.0 → 3.0.1

package/components/checkbox/README.md

@@ -56,5 +56,14 @@ You can customize the appearance of the Checkbox component by overriding its glo
 </div>
 ```
 
+To vertically align a checkbox with its label, wrap both in an element that has the `micl-flex--vcenter` class.
+
+```HTML
+<div class="micl-flex--vcenter">
+  <input type="checkbox" id="mycheckbox" class="micl-checkbox">
+  <label for="mycheckbox">Checkbox</label>
+</div>
+```
+
 ## Compatibility
 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.

package/components/divider/index.scss

@@ -31,44 +31,44 @@ body {
 .micl-divider {
     width: 100%;
     height: 0;
-    margin-block: var(--md-sys-divider-space);
+    margin-block: calc(var(--md-sys-divider-space, 4px) - 1px) var(--md-sys-divider-space, 4px);
     margin-inline: 0;
     border: 0;
-    border-block-start: var(--md-sys-divider-thickness) solid var(--md-sys-divider-color);
+    border-block-start: var(--md-sys-divider-thickness, 1px) solid var(--md-sys-divider-color);
 }
 
 .micl-divider-inset {
     width: calc(100% - 2 * var(--md-sys-divider-inset-margin));
     height: 0;
-    margin-block: var(--md-sys-divider-space);
+    margin-block: calc(var(--md-sys-divider-space, 4px) - 1px) var(--md-sys-divider-space, 4px);
     margin-inline: var(--md-sys-divider-inset-margin);
     border: 0;
-    border-block-start: var(--md-sys-divider-thickness) solid var(--md-sys-divider-color);
+    border-block-start: var(--md-sys-divider-thickness, 1px) solid var(--md-sys-divider-color);
 }
 
 .micl-divider-inset--start {
     width: calc(100% - var(--md-sys-divider-inset-margin));
     height: 0;
-    margin-block: var(--md-sys-divider-space);
+    margin-block: calc(var(--md-sys-divider-space, 4px) - 1px) var(--md-sys-divider-space, 4px);
     margin-inline: var(--md-sys-divider-inset-margin) 0;
     border: 0;
-    border-block-start: var(--md-sys-divider-thickness) solid var(--md-sys-divider-color);
+    border-block-start: var(--md-sys-divider-thickness, 1px) solid var(--md-sys-divider-color);
 }
 
 .micl-divider-inset--end {
     width: calc(100% - var(--md-sys-divider-inset-margin));
     height: 0;
-    margin-block: var(--md-sys-divider-space);
+    margin-block: calc(var(--md-sys-divider-space, 4px) - 1px) var(--md-sys-divider-space, 4px);
     margin-inline: 0 var(--md-sys-divider-inset-margin);
     border: 0;
-    border-block-start: var(--md-sys-divider-thickness) solid var(--md-sys-divider-color);
+    border-block-start: var(--md-sys-divider-thickness, 1px) solid var(--md-sys-divider-color);
 }
 
 .micl-divider-vertical {
     min-height: 100%;
     width: 0;
     margin-block: 0;
-    margin-inline: calc(2 * var(--md-sys-divider-space));
+    margin-inline: calc(2 * var(--md-sys-divider-space, 4px));
     border: 0;
-    border-inline-start: var(--md-sys-divider-thickness) solid var(--md-sys-divider-color);
+    border-inline-start: var(--md-sys-divider-thickness, 1px) solid var(--md-sys-divider-color);
 }

package/components/list/README.md

@@ -156,19 +156,19 @@ To enable selection of list items, integrate a checkbox or switch component with
   <li class="micl-list-item-two" tabindex="0">
     <label>
       <span class="micl-list-item__text">
-        <span class="micl-list-item__headline">Blue car</span>
+        <span id="hd1" class="micl-list-item__headline">Blue car</span>
         <span class="micl-list-item__supporting-text">A blue car with four wheels.</span>
       </label>
-      <input type="checkbox" id="mycheckbox" class="micl-checkbox" value="cb1" tabindex="-1">
+      <input type="checkbox" id="mycheckbox" class="micl-checkbox" value="cb1" tabindex="-1" aria-labelledby="hd1">
     </span>
   </li>
   <li class="micl-list-item-two" tabindex="0">
     <label>
       <span class="micl-list-item__text">
-        <span class="micl-list-item__headline">Red car</span>
+        <span id="hd2" class="micl-list-item__headline">Red car</span>
         <span class="micl-list-item__supporting-text">A red car with tinted windows.</span>
       </label>
-      <input type="checkbox" id="checkbox2" class="micl-switch" value="cb2" tabindex="-1">
+      <input type="checkbox" id="checkbox2" class="micl-switch" value="cb2" tabindex="-1" aria-labelledby="hd2">
     </label>
   </li>
 </ul>

package/components/list/index.scss

@@ -104,7 +104,7 @@
     column-gap: var(--md-sys-list-item-space);
     padding-inline: var(--md-sys-list-item-space);
     border: none;
-    border-radius: var(--md-sys-shape-corner-none);
+    border-radius: var(--md-sys-shape-corner-none, 0px);
     background-color: var(--md-sys-list-item-container-color);
     background-image:
         radial-gradient(circle at var(--micl-x, center) var(--micl-y, center), transparent 0%, rgb(from var(--statelayer-color) r g b / var(--statelayer-opacity)) 10%, transparent 10%),
@@ -330,7 +330,7 @@
     display: inline-block;
     height: 56px;
     min-width: 56px;
-    border-radius: var(--md-sys-shape-corner-none);
+    border-radius: var(--md-sys-shape-corner-none, 0px);
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
@@ -339,7 +339,7 @@
     display: inline-block;
     height: 64px;
     min-width: calc(64px * var(--md-sys-list-item-thumbnail-aspect-ratio));
-    border-radius: var(--md-sys-shape-corner-none);
+    border-radius: var(--md-sys-shape-corner-none, 0px);
     background-position: center;
     background-repeat: no-repeat;
     background-size: contain;

package/components/radio/README.md

@@ -1,5 +1,5 @@
 # Radio button
-This component implements the the [Material Design 3 Expressive Radio button](https://m3.material.io/components/radio-button/overview) design.
+This component implements the the [Material Design 3 Expressive Radio button](https://m3.material.io/components/radio-button/overview) design. A radio button allows a user to select only one option from a group of mutually exclusive choices.
 
 ## Basic Usage
 
@@ -29,7 +29,7 @@ A radio button can be disabled by adding the `disabled` attribute to the `<input
 
 The Radio Button 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.
 
-By default, the component applies a specific color and `cursor: pointer` to `<label>` elements immediately preceding or following an `<input type="radio">` with the `micl-radio` class. You are encouraged to customize these CSS settings to match your design system.
+By default, the component applies `cursor: pointer` and the color role **on surface** to the `<label>` element immediately preceding or following an `<input type="radio">` with the `micl-radio` class. You are encouraged to customize these CSS settings to match your design system.
 
 ## Customizations
 You can customize the appearance of the Radio Button 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 radio buttons.
@@ -44,8 +44,17 @@ You can customize the appearance of the Radio Button component by overriding its
 
 ```HTML
 <div style="--md-sys-radio-container-size:28px">
-    <input type="radio" id="myradio" class="micl-radio">
-    <label for="myradio">Large radio button</label>
+  <input type="radio" id="myradio" class="micl-radio">
+  <label for="myradio">Large radio button</label>
+</div>
+```
+
+To vertically align a radio button with its label, wrap both in an element that has the `micl-flex--vcenter` class.
+
+```HTML
+<div class="micl-flex--vcenter">
+  <input type="radio" id="myradio" class="micl-radio">
+  <label for="myradio">Large radio button</label>
 </div>
 ```
 

package/components/radio/index.scss

@@ -37,8 +37,10 @@ input[type=radio].micl-radio {
     appearance: none;
     box-sizing: border-box;
     position: relative;
-    width: var(--md-sys-target-size);
-    height: var(--md-sys-target-size);
+    inline-size: var(--md-sys-target-size);
+    min-inline-size: var(--md-sys-target-size);
+    block-size: var(--md-sys-target-size);
+    min-block-size: var(--md-sys-target-size);
     margin: 0;
     border: calc((var(--md-sys-target-size) - var(--md-sys-radio-state-layer-size)) / 2) solid transparent;
     background-clip: content-box;
@@ -50,8 +52,8 @@ input[type=radio].micl-radio {
         content: "";
         box-sizing: border-box;
         position: absolute;
-        width: var(--md-sys-radio-container-size);
-        height: var(--md-sys-radio-container-size);
+        inline-size: var(--md-sys-radio-container-size);
+        block-size: var(--md-sys-radio-container-size);
         inset: 0;
         margin: auto;
         padding: calc((var(--md-sys-radio-container-size) / 2) - var(--md-sys-radio-border-width));

package/components/select/README.md

@@ -1,5 +1,5 @@
 # Select
-This component implements the the [Material Design 3 Expressive Select](https://m3.material.io/components/menus/guidelines#ee2f3664-c926-47ab-acbf-2ab675506932) design.
+This component implements the the [Material Design 3 Expressive Select](https://m3.material.io/components/menus/guidelines#ee2f3664-c926-47ab-acbf-2ab675506932) design. A select component is used to offer the user with a set of options from which the user can select a single one. 
 
 ## Basic Usage
 
@@ -11,10 +11,10 @@ The Select component is an extension of the [Text field](../textfield/README.md)
   <label for="myselect">Country</label>
   <select id="myselect">
     <option class="micl-list-item-one" value="AR">
-        <span class="micl-list-item__text">Argentina</span>
+      <span class="micl-list-item__text">Argentina</span>
     </option>
     <option class="micl-list-item-one" value="BO">
-        <span class="micl-list-item__text">Bolivia</span>
+      <span class="micl-list-item__text">Bolivia</span>
     </option>
   </select>
 </div>
@@ -42,7 +42,29 @@ This will initialize any Select component, including those that will be added to
 A live example of the [Select component](https://henkpb.github.io/micl/select.html) is available for you to interact with.
 
 ## Variants
-To display extra information for an option, add the `aria-description` attribute to the `<option>` element. In a two-line list item (`micl-list-item-two`), this displays the attribute's content as supporting text. Do not add a separate text element to the `<option>`, as this will change the text of the selected option.
+A Select Component can be disabled by adding the `disabled` attribute to the `<select>` element. An option within the component can be disabled by adding the `disabled` attribute to the `<option>` element.
+
+You can add [Dividers](../divider/README.md) into the list of options and they will appear as separators to help visually break up the options.
+
+**Example: A select with a divider**
+
+```HTML
+<div class="micl-textfield-outlined">
+  <label for="myselect">Country</label>
+  <select id="myselect">
+    <option class="micl-list-item-two" value=""></option>
+    <option class="micl-list-item-two" value="AR">
+      <span class="micl-list-item__text">Argentina</span>
+    </option>
+    <hr class="micl-divider">
+    <option class="micl-list-item-two" value="BO">
+      <span class="micl-list-item__text">Bolivia</span>
+    </option>
+  </select>
+</div>
+```
+
+To display extra information for an option, add the `aria-description` attribute to its `<span class="micl-list-item__text">` element. In a two-line list item (`micl-list-item-two`), this displays the attribute's content as supporting text. Do not add a separate text element to the `<option>`, as this will change the text of the selected option.
 
 **Example: A select with supporting text**
 
@@ -51,10 +73,10 @@ To display extra information for an option, add the `aria-description` attribute
   <label for="myselect">Country</label>
   <select id="myselect">
     <option class="micl-list-item-two" value="AR">
-        <span class="micl-list-item__text" aria-description="Country code: AR">Argentina</span>
+      <span class="micl-list-item__text" aria-description="Country code: AR">Argentina</span>
     </option>
     <option class="micl-list-item-two" value="BO">
-        <span class="micl-list-item__text" aria-description="Country code: BO">Bolivia</span>
+      <span class="micl-list-item__text" aria-description="Country code: BO">Bolivia</span>
     </option>
   </select>
 </div>

package/components/select/index.scss

@@ -25,15 +25,28 @@
 @use '../../styles/statelayer';
 @use '../../styles/typography';
 
+.micl-textfield-filled > select {
+    --md-sys-select-line-height: calc(var(--md-sys-textfield-height) - 18px - 3px);
+}
+.micl-textfield-outlined > select {
+    --md-sys-select-line-height: var(--md-sys-textfield-height);
+}
 .micl-textfield-filled > select,
 .micl-textfield-outlined > select {
+    --md-sys-divider-space: 8px;
     --md-sys-list-motion-duration: #{motion.$md-sys-motion-expressive-default-effects-duration};
+    --md-sys-select-motion-spatial: #{motion.$md-sys-motion-expressive-default-spatial};
+    --md-sys-select-motion-duration: #{motion.$md-sys-motion-expressive-default-spatial-duration};
+    --md-sys-select-motion-duration-reverse: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
+    --md-sys-select-picker-origin: left top;
 
     appearance: base-select;
+    line-height: var(--md-sys-select-line-height);
 
     &::picker-icon {
       color: var(--md-sys-color-on-surface-variant);
-      transition: 0.4s rotate;
+      transition: motion.$md-sys-motion-duration-medium4 rotate;
+      transform-origin: 50% calc((var(--md-sys-select-line-height) / 2) - 1px);
     }
     &:open::picker-icon {
       rotate: 180deg;
@@ -42,12 +55,36 @@
         appearance: base-select;
         min-inline-size: max(anchor-size(self-inline), 112px);
         max-inline-size: 280px;
-        padding-block: 8px;
-        padding-inline: 0;
+        position-try: most-block-size flip-block;
+        padding: 8px 0;
         border: none;
         border-radius: var(--md-sys-shape-corner-extra-small);
         background-color: var(--md-sys-color-surface-container);
         box-shadow: var(--md-sys-elevation-level2);
+        opacity: 0;
+        overflow: hidden;
+        transform: scaleY(0);
+        transform-origin: var(--md-sys-select-picker-origin);
+        transition:
+            opacity var(--md-sys-select-motion-duration-reverse) linear,
+            transform var(--md-sys-select-motion-duration-reverse) var(--md-sys-select-motion-spatial),
+            overlay var(--md-sys-select-motion-duration-reverse) linear allow-discrete,
+            display var(--md-sys-select-motion-duration-reverse) linear allow-discrete;
+
+        &:popover-open {
+            opacity: 1;
+            transform: scaleY(1);
+            transition:
+                opacity var(--md-sys-select-motion-duration) motion.$md-sys-motion-easing-emphasized-decelerate,
+                transform var(--md-sys-select-motion-duration) var(--md-sys-select-motion-spatial),
+                overlay var(--md-sys-select-motion-duration) linear allow-discrete,
+                display var(--md-sys-select-motion-duration) linear allow-discrete;
+
+            @starting-style {
+                opacity: 0;
+                transform: scaleY(0);
+            }
+        }
     }
 
     option {
@@ -59,7 +96,8 @@
         --md-sys-list-item-padding-inline: 16px;
         --md-sys-list-item-container-color: var(--md-sys-color-surface-container);
 
-        border-radius: 0px;
+        line-height: normal;
+        background-color: transparent;
 
         &:not(:disabled) {
             cursor: pointer;
@@ -84,6 +122,7 @@
             @include typography.body-large;
 
             color: var(--md-sys-color-on-surface);
+            white-space: normal;
         }
         .micl-list-item__text::after {
             @include typography.body-medium;
@@ -94,7 +133,7 @@
             white-space: normal;
         }
         &::checkmark {
-            color: var(--md-sys-color-on-surface);
+            color: var(--md-sys-color-on-surface-variant);
         }
     }
 }
@@ -107,10 +146,17 @@ dialog.micl-dialog-fullscreen:has(.micl-textfield-outlined > select) {
     inset-inline-start: 0;
     margin: auto;
     transform: scale(50%);
+
+    &:popover-open {
+        transform: scale(100%);
+    }
 }
-dialog.micl-dialog:has(.micl-textfield-filled > select):popover-open,
-dialog.micl-dialog:has(.micl-textfield-outlined > select):popover-open,
-dialog.micl-dialog-fullscreen:has(.micl-textfield-filled > select):popover-open,
-dialog.micl-dialog-fullscreen:has(.micl-textfield-outlined > select):popover-open {
-    transform: scale(100%);
+
+[dir=rtl] {
+    .micl-textfield-filled > select,
+    .micl-textfield-outlined > select {
+        &:open::picker-icon {
+          rotate: -180deg;
+        }
+    }
 }

package/components/textfield/index.scss

@@ -284,9 +284,6 @@
             border-block-end-color: var(--md-sys-color-primary);
         }
     }
-    &> select {
-        line-height: 28px;
-    }
     &> textarea {
         padding-block-start: 24px;
     }
@@ -300,7 +297,7 @@
         > input[type=time],
         > input[type=week],
         > select:focus,
-        > select[value]:not([value='']):not([data-miclinitialized]),
+        > select:not([data-miclinitialized]) option:checked:not([value='']),
         > select[data-miclvalue],
         > textarea:focus,
         > textarea:not(:empty):not([data-miclinitialized]),
@@ -324,7 +321,7 @@
     }
 }
 .micl-textfield-outlined {
-    margin-block-start: 0.375rem;
+    margin-block-start: calc(2px + var(--md-sys-typescale-body-small-line-height)/2);
 
     &:hover {
         &> label {
@@ -353,9 +350,6 @@
             outline-color: var(--md-sys-color-primary);
         }
     }
-    &> select {
-        line-height: var(--md-sys-textfield-height);
-    }
     &:has(
         > input:focus,
         > input[value]:not([value='']):not([data-miclinitialized]),
@@ -366,7 +360,7 @@
         > input[type=time],
         > input[type=week],
         > select:focus,
-        > select[value]:not([value='']):not([data-miclinitialized]),
+        > select:not([data-miclinitialized]) option:checked:not([value='']),
         > select[data-miclvalue],
         > textarea:focus,
         > textarea:not(:empty):not([data-miclinitialized]),

package/components/textfield/index.ts

@@ -20,12 +20,25 @@
 // SOFTWARE.
 
 export const textfieldSelector = '.micl-textfield-outlined > input,.micl-textfield-filled > input';
-export const selectSelector    = '.micl-textfield-outlined > select,.micl-textfield-filled > select';
 export const textareaSelector  = '.micl-textfield-outlined > textarea,.micl-textfield-filled > textarea';
+export const selectSelector = '.micl-textfield-filled > select,.micl-textfield-outlined > select';
 
 export default (() =>
 {
-    const counterSelector = '.micl-textfield__character-counter';
+    const setCounter = (element: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement) =>
+    {
+        if (
+            !element.parentElement
+            || element instanceof HTMLSelectElement
+            || !element.maxLength
+        ) {
+            return;
+        }
+        const counter = element.parentElement.querySelector('.micl-textfield__character-counter');
+        if (counter) {
+            counter.textContent = `${element.value.length}/${element.maxLength}`;
+        }
+    };
 
     return {
         initialize: (element: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement): void =>
@@ -39,17 +52,21 @@ export default (() =>
                 element.dataset.miclvalue = '1';
             }
 
-            if (
-                (element instanceof HTMLSelectElement)
-                || !element.maxLength
-            ) {
-                return;
-            }
+            if (element instanceof HTMLSelectElement) {
+                element.addEventListener('mousedown', event =>
+                {
+                    const
+                        rect      = element.getBoundingClientRect(),
+                        roomAbove = rect.top,
+                        roomBelow = window.innerHeight - rect.bottom;
 
-            const counter = element.parentElement?.querySelector(counterSelector);
-            if (counter) {
-                counter.textContent = `${element.value.length}/${element.maxLength}`;
+                    !element.matches(':open') && element.style.setProperty(
+                        '--md-sys-select-picker-origin',
+                        roomAbove > roomBelow ? 'left bottom' : 'left top'
+                    );
+                });
             }
+            setCounter(element);
         },
 
         input: (event: Event): void =>
@@ -72,17 +89,7 @@ export default (() =>
                 delete event.target.dataset.miclvalue;
             }
 
-            if (
-                (event.target instanceof HTMLSelectElement)
-                || !event.target.maxLength
-            ) {
-                return;
-            }
-
-            const counter = event.target.parentElement?.querySelector(counterSelector);
-            if (counter) {
-                counter.textContent = `${event.target.value.length}/${event.target.maxLength}`;
-            }
+            setCounter(event.target);
         }
     };
 })();