mtrl-addons 0.2.4 → 0.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mtrl-addons",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "description": "Additional components and utilities for the mtrl system, featuring forms, specialized elements, and extended functionality for modern applications",
   "type": "module",
   "main": "./dist/index.js",
@@ -8,6 +8,7 @@
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
+      "development": "./src/index.ts",
       "import": "./dist/index.mjs",
       "require": "./dist/index.js",
       "types": "./dist/index.d.ts"
@@ -48,7 +49,7 @@
   "author": "floor",
   "license": "MIT",
   "peerDependencies": {
-    "mtrl": "^0.5.1"
+    "mtrl": "^0.5.4"
   },
   "devDependencies": {
     "@types/jsdom": "^21.1.7",

package/src/styles/core/_layout.scss

@@ -0,0 +1,694 @@
+// src/styles/components/_vlist.scss
+@use "../../../../mtrl/src/styles/abstract/base" as base;
+@use "../../../../mtrl/src/styles/abstract/variables" as v;
+@use "../../../../mtrl/src/styles/abstract/mixins" as m;
+
+@use "sass:map";
+@use "sass:list";
+@use "sass:math";
+
+$prefix: base.$prefix;
+$layout: "#{$prefix}-layout";
+
+// Common gap sizes for layout components
+$gap-sizes: (
+    "0": 0,
+    "1": 4px,
+    "2": 8px,
+    "3": 12px,
+    "4": 16px,
+    "5": 20px,
+    "6": 24px,
+    "8": 32px,
+    "10": 40px,
+    "12": 48px,
+);
+
+// Default layout properties
+$defaults: (
+    "gap": 16px,
+    "stack-gap": 16px,
+    "row-gap": 16px,
+    "grid-gap": 16px,
+    "grid-min": 200px,
+    "grid-columns": 12,
+    "breakpoints": (
+        "xs": 0,
+        "sm": 600px,
+        "md": 960px,
+        "lg": 1280px,
+        "xl": 1920px,
+    ),
+);
+
+// ----------------------------------------
+// Base layout styles
+// ----------------------------------------
+
+// Container - centers content with max-width
+.#{$layout} {
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: map.get($defaults, "gap");
+    padding-right: map.get($defaults, "gap");
+    box-sizing: border-box;
+
+    // Different container sizes
+    &--sm {
+        max-width: 600px;
+    }
+
+    &--md {
+        max-width: 960px;
+    }
+
+    &--lg {
+        max-width: 1280px;
+    }
+
+    &--xl {
+        max-width: 1920px;
+    }
+
+    &--fluid {
+        max-width: 100%;
+    }
+
+    // Mobile padding adjustments
+    @media (max-width: map.get(map.get($defaults, "breakpoints"), "sm") - 1px) {
+        padding-left: 12px;
+        padding-right: 12px;
+    }
+
+    // Mobile width options
+    &--mobile-narrow {
+        @media (max-width: map.get(map.get($defaults, "breakpoints"), "sm") - 1px) {
+            max-width: 90%;
+        }
+    }
+
+    &--mobile-full {
+        @media (max-width: map.get(map.get($defaults, "breakpoints"), "sm") - 1px) {
+            padding-left: 0;
+            padding-right: 0;
+        }
+    }
+}
+
+// ----------------------------------------
+// Stack Layout (Vertical)
+// ----------------------------------------
+
+.#{$layout}--stack {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    gap: map.get($defaults, "stack-gap");
+
+    // Stack alignment
+    &-start {
+        align-items: flex-start;
+    }
+
+    &-center {
+        align-items: center;
+    }
+
+    &-end {
+        align-items: flex-end;
+    }
+
+    &-stretch {
+        align-items: stretch;
+    }
+
+    // Stack distribution (for multi-item stacks)
+    &-justify-start {
+        justify-content: flex-start;
+    }
+
+    &-justify-center {
+        justify-content: center;
+    }
+
+    &-justify-end {
+        justify-content: flex-end;
+    }
+
+    &-justify-between {
+        justify-content: space-between;
+    }
+
+    &-justify-around {
+        justify-content: space-around;
+    }
+
+    // Stack spacing
+    @each $name, $size in $gap-sizes {
+        &-gap-#{$name} {
+            gap: $size;
+        }
+    }
+}
+
+// ----------------------------------------
+// Row Layout (Horizontal)
+// ----------------------------------------
+
+.#{$layout}--row {
+    display: flex;
+    width: 100%;
+    gap: map.get($defaults, "row-gap");
+
+    // Auto-stack on mobile by default
+    flex-direction: column;
+
+    @media (min-width: map.get(map.get($defaults, "breakpoints"), "sm")) {
+        flex-direction: row;
+        flex-wrap: wrap;
+    }
+
+    // Row alignment
+    &-start {
+        align-items: flex-start;
+    }
+
+    &-center {
+        align-items: center;
+    }
+
+    &-end {
+        align-items: flex-end;
+    }
+
+    &-stretch {
+        align-items: stretch;
+    }
+
+    // Row distribution
+    &-justify-start {
+        justify-content: flex-start;
+    }
+
+    &-justify-center {
+        justify-content: center;
+    }
+
+    &-justify-end {
+        justify-content: flex-end;
+    }
+
+    &-justify-between {
+        justify-content: space-between;
+    }
+
+    &-justify-around {
+        justify-content: space-around;
+    }
+
+    &-justify-evenly {
+        justify-content: space-evenly;
+    }
+
+    // Row wrapping
+    &-nowrap {
+        @media (min-width: map.get(map.get($defaults, "breakpoints"), "sm")) {
+            flex-wrap: nowrap;
+            overflow-x: auto;
+        }
+    }
+
+    &-wrap-reverse {
+        @media (min-width: map.get(map.get($defaults, "breakpoints"), "sm")) {
+            flex-wrap: wrap-reverse;
+        }
+    }
+
+    // Add option to override auto-stacking for specific cases
+    &-no-stack {
+        flex-direction: row;
+        flex-wrap: wrap;
+    }
+
+    // Row spacing
+    @each $name, $size in $gap-sizes {
+        &-gap-#{$name} {
+            gap: $size;
+        }
+    }
+
+    // Row items - full width on mobile, equal width on larger screens
+    > * {
+        width: 100%; // Full width on mobile
+
+        @media (min-width: map.get(map.get($defaults, "breakpoints"), "sm")) {
+            flex: 1 1 0%; // Equal width on larger screens
+        }
+    }
+
+    // Auto width items
+    > .#{$layout}__item--auto {
+        @media (min-width: map.get(map.get($defaults, "breakpoints"), "sm")) {
+            flex: 0 0 auto;
+            width: auto;
+        }
+    }
+
+    // Fixed width items - full width on mobile
+    @for $i from 1 through 12 {
+        > .#{$layout}__item--#{$i} {
+            @media (min-width: map.get(map.get($defaults, "breakpoints"), "sm")) {
+                flex: 0 0 auto;
+                width: calc(
+                    #{math.div($i, 12) * 100%} -
+                        (
+                            #{map.get($defaults, "row-gap")} *
+                                #{math.div(12 - $i, 12)}
+                        )
+                );
+            }
+        }
+    }
+
+    // Responsive width items
+    @each $bp, $width in map.get($defaults, "breakpoints") {
+        @if $bp != "xs" {
+            @for $i from 1 through 12 {
+                > .#{$layout}__item--#{$bp}-#{$i} {
+                    @media (min-width: $width) {
+                        flex: 0 0 auto;
+                        width: calc(
+                            #{math.div($i, 12) * 100%} -
+                                (
+                                    #{map.get($defaults, "row-gap")} *
+                                        #{math.div(12 - $i, 12)}
+                                )
+                        );
+                    }
+                }
+            }
+        }
+    }
+
+    // Row items in a no-stack row
+    &-no-stack {
+        > * {
+            flex: 1 1 0%;
+        }
+
+        @for $i from 1 through 12 {
+            > .#{$layout}__item--#{$i} {
+                flex: 0 0 auto;
+                width: calc(
+                    #{math.div($i, 12) *
+                        100%} -
+                        (
+                            #{map.get($defaults, "row-gap")} *
+                                #{math.div(12 - $i, 12)}
+                        )
+                );
+            }
+        }
+    }
+}
+
+// ----------------------------------------
+// Grid Layout
+// ----------------------------------------
+
+.#{$layout}--grid {
+    display: grid;
+    gap: map.get($defaults, "grid-gap");
+    width: 100%;
+
+    // Auto-stack on mobile by default
+    grid-template-columns: 1fr;
+
+    @media (min-width: map.get(map.get($defaults, "breakpoints"), "sm")) {
+        // Default to auto-fit for non-mobile screens
+        grid-template-columns: repeat(
+            auto-fit,
+            minmax(map.get($defaults, "grid-min"), 1fr)
+        );
+    }
+
+    // Grid modes: auto-fit (default), auto-fill
+    &-fill {
+        @media (min-width: map.get(map.get($defaults, "breakpoints"), "sm")) {
+            grid-template-columns: repeat(
+                auto-fill,
+                minmax(map.get($defaults, "grid-min"), 1fr)
+            );
+        }
+    }
+
+    // Fixed column counts - stack on mobile by default
+    @for $i from 1 through 12 {
+        &-cols-#{$i} {
+            @media (min-width: map.get(map.get($defaults, "breakpoints"), "sm")) {
+                grid-template-columns: repeat($i, 1fr);
+            }
+        }
+    }
+
+    // Responsive column counts
+    @each $bp, $width in map.get($defaults, "breakpoints") {
+        @if $bp != "xs" {
+            @for $i from 1 through 6 {
+                &-#{$bp}-cols-#{$i} {
+                    @media (min-width: $width) {
+                        grid-template-columns: repeat($i, 1fr);
+                    }
+                }
+            }
+        }
+    }
+
+    // Add option to override auto-stacking for specific cases
+    &-no-stack {
+        grid-template-columns: repeat(
+            auto-fit,
+            minmax(map.get($defaults, "grid-min"), 1fr)
+        );
+
+        &-cols-2 {
+            grid-template-columns: repeat(2, 1fr);
+        }
+
+        &-cols-3 {
+            grid-template-columns: repeat(3, 1fr);
+        }
+    }
+
+    // Dense auto-placement
+    &-dense {
+        grid-auto-flow: dense;
+    }
+
+    // Grid alignment
+    &-align-start {
+        align-items: start;
+    }
+
+    &-align-center {
+        align-items: center;
+    }
+
+    &-align-end {
+        align-items: end;
+    }
+
+    &-justify-start {
+        justify-content: start;
+    }
+
+    &-justify-center {
+        justify-content: center;
+    }
+
+    &-justify-end {
+        justify-content: end;
+    }
+
+    &-auto-height {
+        align-items: start; // Prevent stretching items vertically
+
+        > * {
+            height: auto; // Ensure children only take the height they need
+        }
+    }
+
+    // Grid minimum sizes
+    @each $name,
+        $size
+            in ("xs": 120px, "sm": 180px, "md": 240px, "lg": 300px, "xl": 360px)
+    {
+        &-min-#{$name} {
+            grid-template-columns: repeat(auto-fit, minmax($size, 1fr));
+
+            &.#{$layout}--grid-fill {
+                grid-template-columns: repeat(auto-fill, minmax($size, 1fr));
+            }
+        }
+    }
+
+    // Grid gap sizes
+    @each $name, $size in $gap-sizes {
+        &-gap-#{$name} {
+            gap: $size;
+        }
+    }
+
+    // Grid item span
+    @for $i from 1 through 12 {
+        > .#{$layout}__item--span-#{$i} {
+            grid-column: span $i;
+        }
+
+        > .#{$layout}__item--row-span-#{$i} {
+            grid-row: span $i;
+        }
+    }
+
+    // Responsive item spans
+    @each $bp, $width in map.get($defaults, "breakpoints") {
+        @if $bp != "xs" {
+            @for $i from 1 through 12 {
+                > .#{$layout}__item--#{$bp}-span-#{$i} {
+                    @media (min-width: $width) {
+                        grid-column: span $i;
+                    }
+                }
+            }
+        }
+    }
+}
+
+// ----------------------------------------
+// Item placement and alignment
+// ----------------------------------------
+
+// Self alignment utilities for both flex and grid children
+.#{$layout}__item--self-start {
+    align-self: flex-start;
+}
+
+.#{$layout}__item--self-center {
+    align-self: center;
+}
+
+.#{$layout}__item--self-end {
+    align-self: flex-end;
+}
+
+.#{$layout}__item--self-stretch {
+    align-self: stretch;
+}
+
+// Order utilities
+.#{$layout}__item--order-first {
+    order: -9999;
+}
+
+.#{$layout}__item--order-last {
+    order: 9999;
+}
+
+@for $i from 1 through 12 {
+    .#{$layout}__item--order-#{$i} {
+        order: $i;
+    }
+}
+
+// ----------------------------------------
+// Responsive display utilities
+// ----------------------------------------
+
+// Hide on specific breakpoints
+@each $bp, $width in map.get($defaults, "breakpoints") {
+    @if $bp != "xs" {
+        .#{$layout}--hide-#{$bp}-up {
+            @media (min-width: $width) {
+                display: none !important;
+            }
+        }
+
+        .#{$layout}--hide-#{$bp}-down {
+            @media (max-width: $width - 1px) {
+                display: none !important;
+            }
+        }
+    }
+}
+
+// Mobile-specific layouts - now redundant as stacking is default behavior
+// These are kept for backward compatibility
+.#{$layout}--stack-mobile {
+    @media (max-width: map.get(map.get($defaults, "breakpoints"), "sm") - 1px) {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+    }
+}
+
+// Still useful for layouts that specifically need to override
+.#{$layout}--force-stack {
+    flex-direction: column !important;
+
+    > * {
+        width: 100% !important;
+    }
+}
+
+.#{$layout}--row-mobile-scroll {
+    @media (max-width: map.get(map.get($defaults, "breakpoints"), "sm") - 1px) {
+        flex-wrap: nowrap;
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+        scroll-snap-type: x mandatory;
+
+        > * {
+            scroll-snap-align: start;
+            flex: 0 0 auto;
+            width: 80%; // Default mobile scroll item width
+            max-width: 300px;
+        }
+
+        // Optionally override the width
+        &-small > * {
+            width: 60%;
+            max-width: 200px;
+        }
+
+        &-large > * {
+            width: 90%;
+            max-width: 400px;
+        }
+    }
+}
+
+// Mobile-first responsive grid with specified minimum sizes
+.#{$layout}--grid-mobile-first {
+    grid-template-columns: 1fr;
+
+    @media (min-width: map.get(map.get($defaults, "breakpoints"), "sm")) {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    @media (min-width: map.get(map.get($defaults, "breakpoints"), "md")) {
+        grid-template-columns: repeat(
+            auto-fit,
+            minmax(map.get($defaults, "grid-min"), 1fr)
+        );
+    }
+}
+
+// ----------------------------------------
+// Mobile-specific utilities
+// ----------------------------------------
+
+// Mobile safe area insets (for notches and home indicators)
+.#{$layout}--safe-area {
+    padding-top: env(safe-area-inset-top, 0);
+    padding-right: env(safe-area-inset-right, 0);
+    padding-bottom: env(safe-area-inset-bottom, 0);
+    padding-left: env(safe-area-inset-left, 0);
+}
+
+// Touch-friendly spacing
+.#{$layout}--touch-friendly {
+    @media (max-width: map.get(map.get($defaults, "breakpoints"), "sm") - 1px) {
+        > * {
+            min-height: 44px; // Minimum recommended touch target size
+            margin-bottom: 12px; // Ensure adequate spacing between touch targets
+        }
+    }
+}
+
+// Prevent overscroll bounce on iOS
+.#{$layout}--prevent-overscroll {
+    height: 100%;
+    overflow: hidden;
+
+    > div {
+        height: 100%;
+        overflow-y: auto;
+        -webkit-overflow-scrolling: touch;
+    }
+}
+
+// Mobile viewport height fix (for address bar issues)
+.#{$layout}--full-height {
+    height: 100vh; /* Fallback */
+    height: -webkit-fill-available;
+    height: stretch; /* Future standard */
+
+    @supports (-webkit-touch-callout: none) {
+        /* iOS specific fix */
+        min-height: -webkit-fill-available;
+    }
+}
+
+// Mobile navigation bar spacing
+.#{$layout}--nav-spacing {
+    padding-bottom: max(env(safe-area-inset-bottom, 16px), 16px);
+}
+
+// ----------------------------------------
+// Spacing utilities
+// ----------------------------------------
+
+// Utility for consistent spacing in a section
+.#{$layout}--section {
+    padding-top: 32px;
+    padding-bottom: 32px;
+
+    @media (min-width: map.get(map.get($defaults, "breakpoints"), "md")) {
+        padding-top: 48px;
+        padding-bottom: 48px;
+    }
+
+    @media (min-width: map.get(map.get($defaults, "breakpoints"), "lg")) {
+        padding-top: 64px;
+        padding-bottom: 64px;
+    }
+
+    &-sm {
+        padding-top: 16px;
+        padding-bottom: 16px;
+
+        @media (min-width: map.get(map.get($defaults, "breakpoints"), "md")) {
+            padding-top: 24px;
+            padding-bottom: 24px;
+        }
+    }
+
+    &-lg {
+        padding-top: 48px;
+        padding-bottom: 48px;
+
+        @media (min-width: map.get(map.get($defaults, "breakpoints"), "md")) {
+            padding-top: 64px;
+            padding-bottom: 64px;
+        }
+
+        @media (min-width: map.get(map.get($defaults, "breakpoints"), "lg")) {
+            padding-top: 96px;
+            padding-bottom: 96px;
+        }
+    }
+}
+
+// ----------------------------------------
+// Hero layout
+// ----------------------------------------
+
+// Hero layout
+.#{$layout}--hero {
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+    min-height: 100vh;
+    min-height: -webkit-fill-available;
+    width: 100%;
+}