material-inspired-component-library 2.0.1 → 3.0.1

package/layout/index.scss

@@ -0,0 +1,259 @@
+//
+// 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';
+
+$md-sys-window-compact-max: 599px;
+$md-sys-window-medium-min: 600px;
+$md-sys-window-medium-max: 839px;
+$md-sys-window-expanded-min: 840px;
+$md-sys-window-expanded-max: 1199px;
+$md-sys-window-large-min: 1200px;
+$md-sys-window-large-max: 1599px;
+$md-sys-window-extralarge-min: 1600px;
+
+$md-sys-window-margin-compact: 16px;
+$md-sys-window-margin-medium: 24px;
+$md-sys-window-margin-expanded: 24px;
+$md-sys-window-margin-large: 24px;
+$md-sys-window-margin-extralarge: 24px;
+
+$md-sys-pane-spacer: 24px;
+
+$md-sys-padding-xxs: 4px;
+$md-sys-padding-xs: 8px;
+$md-sys-padding-s: 12px;
+$md-sys-padding-m: 16px;
+$md-sys-padding-l: 20px;
+$md-sys-padding-xl: 24px;
+$md-sys-padding-xxl: 28px;
+
+:root {
+    --md-sys-layout-pane-spacer: #{$md-sys-pane-spacer};
+
+    --md-sys-layout-padding-xxs: #{$md-sys-padding-xxs};
+    --md-sys-layout-padding-xs: #{$md-sys-padding-xs};
+    --md-sys-layout-padding-s: #{$md-sys-padding-s};
+    --md-sys-layout-padding-m: #{$md-sys-padding-m};
+    --md-sys-layout-padding-l: #{$md-sys-padding-l};
+    --md-sys-layout-padding-xl: #{$md-sys-padding-xl};
+    --md-sys-layout-padding-xxl: #{$md-sys-padding-xxl};
+
+    @media (max-width: $md-sys-window-compact-max) {
+        --md-sys-layout-window-margin: #{$md-sys-window-margin-compact};
+    }
+    @media (min-width: $md-sys-window-medium-min) and (max-width: $md-sys-window-medium-max) {
+        --md-sys-layout-window-margin: #{$md-sys-window-margin-medium};
+    }
+    @media (min-width: $md-sys-window-expanded-min) and (max-width: $md-sys-window-expanded-max) {
+        --md-sys-layout-window-margin: #{$md-sys-window-margin-expanded};
+    }
+    @media (min-width: $md-sys-window-large-min) and (max-width: $md-sys-window-large-max) {
+        --md-sys-layout-window-margin: #{$md-sys-window-margin-large};
+    }
+    @media (min-width: $md-sys-window-extralarge-min) {
+        --md-sys-layout-window-margin: #{$md-sys-window-margin-extralarge};
+    }
+}
+
+.micl-window {
+    padding: 0 var(--md-sys-layout-window-margin) var(--md-sys-layout-window-margin);
+    margin: 0;
+    background-color: var(--md-sys-color-surface);
+
+    .micl-body .micl-appbar {
+        margin-inline: calc(-1 * var(--md-sys-layout-window-margin));
+    }
+    &:not(.micl-window--spatial):has(nav.micl-navigationrail) .micl-body .micl-appbar {
+        margin-inline-start: 0;
+    }
+    &.micl-window--spatial {
+        --md-sys-layout-spatial-radius: calc(var(--md-sys-shape-corner-medium) + var(--md-sys-layout-window-margin));
+
+        display: flex;
+        padding-block: calc(2 * var(--md-sys-layout-window-margin));
+        gap: var(--md-sys-layout-window-margin);
+
+        .micl-navigationrail {
+            display: flex;
+            align-self: flex-start;
+            block-size: inherit;
+            min-block-size: inherit;
+            margin: 0;
+            padding-block-end: var(--md-sys-navigationrail-top-space, 0px);
+            border-radius: var(--md-sys-layout-spatial-radius);
+        }
+        .micl-body {
+            background: transparent;
+        }
+        .micl-pane {
+            padding: 0 var(--md-sys-layout-window-margin) var(--md-sys-layout-window-margin);
+            border-radius: var(--md-sys-layout-spatial-radius);
+            background-color: var(--md-sys-color-surface);
+        }
+    }
+}
+.micl-body {
+    display: flex;
+    flex-direction: row;
+    gap: var(--md-sys-card-margin, 0px) var(--md-sys-layout-pane-spacer);
+    background-color: inherit;
+
+    &.micl-body--split:has(> .micl-pane:nth-child(2)) {
+        .micl-pane {
+            flex-basis: 50%;
+        }
+    }
+    &.micl-body--evenly .micl-pane {
+        flex: 1 1 0;
+    }
+}
+.micl-pane {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    background-color: inherit;
+
+    &.micl-pane--fixed {
+        flex: 0 0 auto;
+    }
+    &:has(> .micl-card-elevated, > .micl-card-filled, > .micl-card-outlined),
+    &> *:has(> .micl-card-elevated, > .micl-card-filled, > .micl-card-outlined) {
+        gap: var(--md-sys-card-margin, 0px);
+    }
+    &> .micl-pane__columns {
+        display: flex;
+
+        &:has(> .micl-pane__column > .micl-card-elevated, > .micl-pane__column > .micl-card-filled, > .micl-pane__column > .micl-card-outlined) {
+            gap: var(--md-sys-card-margin, 0px);
+        }
+        &> .micl-pane__column {
+            display: flex;
+            flex-direction: column;
+            flex: 1 1 auto;
+            min-inline-size: 0;
+            background-color: inherit;
+
+            &:has(> .micl-card-elevated, > .micl-card-filled, > .micl-card-outlined) {
+                row-gap: var(--md-sys-card-margin, 0px);
+            }
+            &.micl-pane__column--fixed {
+                flex: 0 0 auto;
+            }
+        }
+        &.micl-pane__columns--evenly > .micl-pane__column {
+            flex: 1 1 0;
+        }
+    }
+}
+
+@media (max-width: $md-sys-window-compact-max) {
+    .micl-body.micl-body--stacked-to-medium,
+    .micl-body.micl-body--stacked-to-expanded,
+    .micl-body.micl-body--stacked-to-large,
+    .micl-body.micl-body--stacked-to-extralarge {
+        flex-direction: column;
+    }
+    .micl-pane.micl-pane--hidden-to-medium,
+    .micl-pane.micl-pane--hidden-to-expanded,
+    .micl-pane.micl-pane--hidden-to-large,
+    .micl-pane.micl-pane--hidden-to-extralarge {
+        display: none;
+    }
+    .micl-pane__columns.micl-pane__columns--stacked-to-medium,
+    .micl-pane__columns.micl-pane__columns--stacked-to-expanded,
+    .micl-pane__columns.micl-pane__columns--stacked-to-large,
+    .micl-pane__columns.micl-pane__columns--stacked-to-extralarge {
+        flex-direction: column;
+    }
+}
+@media (min-width: $md-sys-window-medium-min) and (max-width: $md-sys-window-medium-max) {
+    .micl-body.micl-body--stacked-to-expanded,
+    .micl-body.micl-body--stacked-to-large,
+    .micl-body.micl-body--stacked-to-extralarge {
+        flex-direction: column;
+    }
+    .micl-pane.micl-pane--hidden-to-expanded,
+    .micl-pane.micl-pane--hidden-to-large,
+    .micl-pane.micl-pane--hidden-to-extralarge {
+        display: none;
+    }
+    .micl-pane__columns.micl-pane__columns--stacked-to-expanded,
+    .micl-pane__columns.micl-pane__columns--stacked-to-large,
+    .micl-pane__columns.micl-pane__columns--stacked-to-extralarge {
+        flex-direction: column;
+    }
+}
+@media (min-width: $md-sys-window-expanded-min) and (max-width: $md-sys-window-expanded-max) {
+    .micl-body.micl-body--stacked-to-large,
+    .micl-body.micl-body--stacked-to-extralarge {
+        flex-direction: column;
+    }
+    .micl-pane.micl-pane--hidden-to-large,
+    .micl-pane.micl-pane--hidden-to-extralarge {
+        display: none;
+    }
+    .micl-pane__columns.micl-pane__columns--stacked-to-large,
+    .micl-pane__columns.micl-pane__columns--stacked-to-extralarge {
+        flex-direction: column;
+    }
+}
+@media (min-width: $md-sys-window-large-min) and (max-width: $md-sys-window-large-max) {
+    .micl-body.micl-body--stacked-to-extralarge {
+        flex-direction: column;
+    }
+    .micl-pane.micl-pane--hidden-to-extralarge {
+        display: none;
+    }
+    .micl-pane__columns.micl-pane__columns--stacked-to-extralarge {
+        flex-direction: column;
+    }
+}
+
+.micl-flex--vcenter {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.micl-grid-iconfield {
+    box-sizing: border-box;
+    display: grid;
+    grid-template-columns: 48px 1fr;
+    margin-block: 24px;
+    row-gap: 24px;
+    background-color: inherit;
+}
+.micl-grid-iconfield__icon {
+    grid-column: 1;
+    margin-block-start: 0.6rem;
+}
+.micl-grid-iconfield__field {
+    grid-column: 2;
+}
+
+.micl-link {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-decoration: none;
+}

package/micl.ts

@@ -25,7 +25,7 @@ import _list, { listSelector } from './components/list';
 import _menu, { menuSelector } from './components/menu';
 import _navigationrail, { navigationrailSelector } from './components/navigationrail';
 import _slider, { sliderSelector } from './components/slider';
-import _textfield, { textfieldSelector, selectSelector, textareaSelector } from './components/textfield';
+import _textfield, { textfieldSelector, textareaSelector, selectSelector } from './components/textfield';
 
 interface ComponentEntry<T extends HTMLElement> {
     component: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "material-inspired-component-library",
-  "version": "2.0.1",
+  "version": "3.0.1",
   "description": "The Material-Inspired Component Library (MICL) offers a collection of beautifully crafted components leveraging native HTML markup, designed to align with the Material Design 3 guidelines.",
   "author": "MICL Hermana <micl.hermana@proton.me> (https://github.com/henkpb/micl)",
   "license": "MIT",
@@ -13,6 +13,7 @@
     "UX",
     "CSS",
     "accordion",
+    "app bar",
     "badge",
     "bottomsheet",
     "button",
@@ -21,10 +22,12 @@
     "dialog",
     "divider",
     "iconbutton",
+    "layout",
     "list",
     "menu",
     "navigation rail",
     "radio button",
+    "select",
     "sidesheet",
     "slider",
     "switch",

package/styles/shapes.scss

@@ -31,8 +31,6 @@ $md-sys-shape-corner-extra-extra-large: 48px;
 $md-sys-shape-corner-full: 50%;
 
 :root {
-    --md-sys-target-size: 48px;
-
     --md-sys-shape-corner-none: #{$md-sys-shape-corner-none};
     --md-sys-shape-corner-extra-small: #{$md-sys-shape-corner-extra-small};
     --md-sys-shape-corner-small: #{$md-sys-shape-corner-small};

package/styles/statelayer.scss

@@ -20,6 +20,7 @@
 // SOFTWARE.
 
 $md-sys-state-layer-size: 40px;
+$md-sys-target-size: 48px;
 
 $md-sys-state-hover-state-layer-opacity: 8%;
 $md-sys-state-focus-state-layer-opacity: 10%;
@@ -32,6 +33,7 @@ $md-sys-state-focus-indicator-thickness: 3px;
 
 :root {
     --md-sys-state-layer-size: #{$md-sys-state-layer-size};
+    --md-sys-target-size: #{$md-sys-target-size};
 
     --md-sys-state-hover-state-layer-opacity: #{$md-sys-state-hover-state-layer-opacity};
     --md-sys-state-focus-state-layer-opacity: #{$md-sys-state-focus-state-layer-opacity};

package/styles.scss

@@ -19,6 +19,8 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
+@use 'layout';
+
 @use 'styles/typography';
 @use 'styles/shapes';
 @use 'styles/elevation';
@@ -39,6 +41,7 @@
 @use 'components/card';
 @use 'components/dialog';
 @use 'components/badge';
+@use 'components/appbar';
 @use 'components/sidesheet';
 @use 'components/bottomsheet';
 @use 'components/navigationrail';
@@ -58,3 +61,13 @@
     inherits: false;
     initial-value: -100000px;
 }
+@property --micl-width {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 0px;
+}
+@property --micl-height {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 0px;
+}

package/webpack.config.js

@@ -5,7 +5,7 @@ const miniCss = require('mini-css-extract-plugin');
 const distDir = path.resolve(__dirname, 'dist');
 const docsDir = path.resolve(__dirname, 'docs');
 
-const scssFiles = glob.sync('./components/**/*.scss');
+const scssFiles = glob.sync('{./layout/*.scss,./components/**/*.scss}');
 const scssEntries = scssFiles.reduce((entries, filePath) => {
     const componentName = path.dirname(filePath).split('\\').pop();
     entries[componentName] = './' + filePath;

package/styles/layout.scss

@@ -1,74 +0,0 @@
-//
-// 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.
-
-$md-sys-margin-compact: 0px;
-$md-sys-margin-medium: 0px;
-$md-sys-margin-expanded: 0px;
-$md-sys-margin-large: 0px;
-$md-sys-margin-extra-large: 0px;
-
-$md-sys-spacer: 24px;
-
-$md-sys-padding-xxs: 4px;
-$md-sys-padding-xs: 8px;
-$md-sys-padding-s: 12px;
-$md-sys-padding-m: 16px;
-$md-sys-padding-l: 20px;
-$md-sys-padding-xl: 24px;
-$md-sys-padding-xxl: 28px;
-
-$md-sys-target-size: 48px;
-
-:root {
-    --md-sys-margin-compact: $md-sys-margin-compact;
-    --md-sys-margin-medium: $md-sys-margin-medium;
-    --md-sys-margin-expanded: $md-sys-margin-expanded;
-    --md-sys-margin-large: $md-sys-margin-large;
-    --md-sys-margin-extra-large: $md-sys-margin-extra-large;
-
-    --md-sys-spacer: $md-sys-spacer;
-
-    --md-sys-padding-xxs: $md-sys-padding-xxs;
-    --md-sys-padding-xs: $md-sys-padding-xs;
-    --md-sys-padding-s: $md-sys-padding-s;
-    --md-sys-padding-m: $md-sys-padding-m;
-    --md-sys-padding-l: $md-sys-padding-l;
-    --md-sys-padding-xl: $md-sys-padding-xl;
-    --md-sys-padding-xxl: $md-sys-padding-xxl;
-
-    --md-sys-target-size: $md-sys-target-size;
-}
-
-.micl-pane-fixed {
-    display: flex;
-    flex: 0 0 auto;
-    flex-direction: row;
-}
-
-.micl-pane-flexible {
-    display: flex;
-    flex: 1 1 auto;
-    flex-direction: row;
-}
-
-.micl-pane__column {
-    display: flex;
-}