@almoamendev/ngx-md3 0.0.8

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@almoamendev/ngx-md3",
+  "version": "0.0.8",
+  "description": "MD3-style Angular components & style library",
+  "author": "Murtadha (Hussain) Almomen",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/almoamendev/ngx-md3.git"
+  },
+  "keywords": [
+    "angular",
+    "material design 3",
+    "components",
+    "ui"
+  ],
+  "peerDependencies": {
+    "@angular/cdk": "^22.0.0",
+    "@angular/common": "^22.0.0",
+    "@angular/core": "^22.0.0",
+    "@angular/forms": "^22.0.0",
+    "@angular/router": "^22.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/almoamendev-ngx-md3.mjs",
+  "typings": "types/almoamendev-ngx-md3.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/almoamendev-ngx-md3.d.ts",
+      "default": "./fesm2022/almoamendev-ngx-md3.mjs"
+    }
+  },
+  "type": "module"
+}

package/src/lib/styles/md3.scss

@@ -0,0 +1,523 @@
+@import "https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&family=Noto+Sans+Arabic:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap";
+
+@import "https://fonts.googleapis.com/icon?family=Material+Icons";
+@import "https://fonts.googleapis.com/icon?family=Material+Icons+Outlined";
+@import "https://fonts.googleapis.com/icon?family=Material+Icons+Round";
+@import "https://fonts.googleapis.com/icon?family=Material+Icons+Sharp";
+@import "https://fonts.googleapis.com/icon?family=Material+Icons+Two+Tone";
+
+@import "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200";
+@import "https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200";
+@import "https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200";
+
+@import './tokens/md-scheme.scss';
+@import './tokens/md-elevation.scss';
+@import './tokens/md-motion.scss';
+@import './tokens/md-border-radius.scss';
+@import './tokens/md-grid.scss';
+
+@-ms-viewport {
+    width: device-width;
+}
+
+* {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+
+    -webkit-outline: 0;
+    -moz-outline: 0;
+    outline: 0;
+
+    font-family: "Google Sans", "Roboto", sans-serif;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+    -moz-osx-font-smoothing: grayscale;
+    font-feature-settings: 'liga';
+    color: inherit;
+    word-break: break-word;
+}
+
+html {
+    height: 100%;
+    width: 100%;
+
+    &[lang] {
+        -webkit-text-size-adjust: 100%;
+        -ms-text-size-adjust: 100%;
+        text-size-adjust: 100%;
+    }
+
+    &:lang(en-US) *, &[lang] *:lang(en-US), *:lang(en-US) {
+        font-family: 'Roboto', sans-serif;
+    }
+
+    &:lang(ar-BH) *, &[lang] *:lang(ar-BH), *:lang(ar-BH) {
+        font-family: 'Noto Sans Arabic', 'Roboto', sans-serif;
+        letter-spacing: normal !important;
+        font-optical-sizing: auto;
+    }
+
+    &[dir="ltr"] *, &[dir] *[dir="ltr"], &[dir] *[dir="ltr"] * {
+        direction: ltr;
+    }
+    &[dir="rtl"] *, &[dir] *[dir="rtl"], &[dir] *[dir="rtl"] * {
+        direction: rtl;
+    }
+}
+
+body {
+    font-size: 16px;
+    text-align: start;
+    height: 100%;
+    overflow-y: auto;
+    margin: 0;
+    padding: 0;
+    color: rgb(var(--md-scheme-on-surface));
+    background-color: rgb(var(--md-scheme-surface));
+    border-color: rgb(var(--md-scheme-outline-variant));
+
+    * {
+        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    }
+}
+
+a {
+    color: rgb(var(--md-scheme-primary));
+}
+
+h1, h2, h3, h4, h5, h6 {
+    margin: 0.75em 0 0.5em;
+}
+
+p {
+    margin: 0.75em 0;
+    max-width: 40em;
+}
+
+li {
+    max-width: 40em;
+}
+
+.md3-state-component {
+    position: relative;
+    --border-top-start-r: var(--border-radius, 0em);
+    --border-top-end-r: var(--border-radius, 0em);
+    --border-bottom-start-r: var(--border-radius, 0em);
+    --border-bottom-end-r: var(--border-radius, 0em);
+
+    border-start-start-radius: var(--border-top-start-r);
+    border-start-end-radius: var(--border-top-end-r);
+    border-end-start-radius: var(--border-bottom-start-r);
+    border-end-end-radius: var(--border-bottom-end-r);
+
+    &::after {
+        content: '';
+        position: absolute;
+        display: block;
+        inset: calc(var(--outline-offset, -0.125em) - var(--outline-width, 0.1875em) - var(--border-size, 0em));
+        border: var(--outline-width, 0.1875em) solid var(--outline-color, rgb(var(--md-scheme-secondary)));
+        transition: all var(--md-motion-expressive-fast-spatial-duration) var(--md-motion-expressive-fast-spatial-easing);
+        pointer-events: none;
+        opacity: 0;
+
+        border-start-start-radius: calc(var(--border-top-start-r) + var(--outline-width, 0.1875em) + (var(--outline-offset, -0.125em) * -1));
+        border-start-end-radius: calc(var(--border-top-end-r) + var(--outline-width, 0.1875em) + (var(--outline-offset, -0.125em) * -1));
+        border-end-start-radius: calc(var(--border-bottom-start-r) + var(--outline-width, 0.1875em) + (var(--outline-offset, -0.125em) * -1));
+        border-end-end-radius: calc(var(--border-bottom-end-r) + var(--outline-width, 0.1875em) + (var(--outline-offset, -0.125em) * -1));
+    }
+
+    > .md3-state-layer {
+        --ripple-w: 288%;
+        --ripple-x: 50%;
+        --ripple-y: 50%;
+
+        position: absolute;
+        inset: 0;
+        z-index: 0;
+        border-radius: inherit;
+        overflow: hidden;
+        transition: opacity var(--md-motion-expressive-fast-spatial-duration) var(--md-motion-expressive-fast-spatial-easing);
+        background-color: rgb(var(--state-color, --md-scheme-primary));
+        opacity: 0;
+        pointer-events: none;
+
+        &::before {
+            content: '';
+            display: block;
+            position: absolute;
+            border-radius: 100%;
+            width: var(--ripple-w);
+            height: var(--ripple-w);
+            left: var(--ripple-x);
+            top: var(--ripple-y);
+            transform: translate(-50%, -50%) scale(0);
+            background-color: rgb(var(--state-color, --md-scheme-primary));
+            opacity: 0;
+            transition: transform var(--md-motion-expressive-slow-spatial-duration) var(--md-motion-expressive-slow-spatial-easing),
+                        opacity var(--md-motion-expressive-slow-spatial-duration) var(--md-motion-expressive-slow-spatial-easing);
+        }
+
+        & ~ * {
+            z-index: 10;
+        }
+    }
+
+    &:hover {
+        .md3-state-layer {
+            opacity: 0.08;
+        }
+    }
+
+    &:focus {
+        .md3-state-layer {
+            opacity: 0.1;
+        }
+
+        &:not(:hover):not(:active)::after {
+            opacity: 1;
+        }
+    }
+
+    &.md3-focused::after {
+        opacity: 1;
+    }
+
+    &:active {
+        .md3-state-layer {
+            background-color: rgba(var(--state-color, --md-scheme-primary), 0);
+            opacity: 0.1;
+            
+            &::before {
+                transform: translate(-50%, -50%) scale(2.4);
+                opacity: 1;
+            }
+        }
+    }
+
+    &.draggable:active {
+        .md3-state-layer {
+            background-color: var(--state-color, transparent);
+            opacity: 0.16;
+        }
+    }
+
+    &.disabled, &:disabled {
+        cursor: default !important;
+
+        .md3-state-layer {
+            opacity: 0.1;
+            background-color: rgb(var(--state-color, --md-scheme-primary));
+
+            &::before {
+                display: none;
+            }
+        }
+
+        &::after {
+            display: none;
+        }
+    }
+}
+
+.md3-text-display {
+    font-family: "Google Sans", "Roboto", sans-serif;
+    font-size: 3.5625rem;
+    line-height: 1.122807em;
+    font-weight: 400;
+    letter-spacing: 0em;
+    font-style: normal;
+    font-optical-sizing: auto;
+    font-stretch: 100%;
+
+    &.md3-emphasized {
+        font-weight: 500;
+    }
+
+    &.md3-text-large {
+        font-size: 3.5625rem; // 57pt
+        line-height: 1.122807em; // 64pt
+    }
+
+    &.md3-text-medium {
+        font-size: 2.8125rem; // 45pt
+        line-height: 1.155556em; // 52pt
+    }
+
+    &.md3-text-small {
+        font-size: 2.25rem; // 36pt
+        line-height: 1.222222em; // 44pt
+    }
+}
+
+.md3-text-headline {
+    font-family: "Google Sans", "Roboto", sans-serif;
+    font-size: 2rem;
+    line-height: 1.25em;
+    font-weight: 400;
+    letter-spacing: 0em;
+    font-style: normal;
+    font-optical-sizing: auto;
+    font-stretch: 100%;
+
+    &.md3-emphasized {
+        font-weight: 500;
+    }
+
+    &.md3-text-large {
+        font-size: 2rem; // 32pt
+        line-height: 1.25em; // 40pt
+    }
+
+    &.md3-text-medium {
+        font-size: 1.75rem; // 28pt
+        line-height: 1.285714em; // 36pt
+    }
+
+    &.md3-text-small {
+        font-size: 1.5rem; // 24pt
+        line-height: 1.333333em; // 32pt
+    }
+}
+
+.md3-text-title {
+    font-family: "Google Sans", "Roboto", sans-serif;
+    font-size: 1.375rem;
+    line-height: 1.272727em;
+    font-weight: 400;
+    letter-spacing: 0em;
+    font-style: normal;
+    font-optical-sizing: auto;
+    font-stretch: 100%;
+
+    &.md3-emphasized {
+        font-weight: 500;
+    }
+
+    &.md3-text-large {
+        font-size: 1.375rem; // 22pt
+        line-height: 1.272727em; // 28pt
+    }
+
+    &.md3-text-medium {
+        font-size: 1rem; // 16pt
+        line-height: 1.5em; // 24pt
+        font-weight: 500;
+
+        &.md3-emphasized {
+            font-weight: 600;
+        }
+    }
+
+    &.md3-text-small {
+        font-size: 0.875rem; // 14pt
+        line-height: 1.428571em; // 20pt
+        font-weight: 500;
+
+        &.md3-emphasized {
+            font-weight: 600;
+        }
+    }
+}
+
+.md3-text-body {
+    font-family: "Google Sans", "Roboto", sans-serif;
+    font-size: 1rem;
+    line-height: 1.5em;
+    font-weight: 400;
+    letter-spacing: 0em;
+    font-style: normal;
+    font-optical-sizing: auto;
+    font-stretch: 100%;
+
+    &.md3-emphasized {
+        font-weight: 500;
+    }
+
+    &.md3-text-large {
+        font-size: 1rem; // 16pt
+        line-height: 1.5em; // 24pt
+    }
+
+    &.md3-text-medium {
+        font-size: 0.875rem; // 14pt
+        line-height: 1.428571em; // 20pt
+    }
+
+    &.md3-text-small {
+        font-size: 0.75rem; // 12pt
+        line-height: 1.333333em; // 16pt
+    }
+}
+
+.md3-text-label {
+    font-family: "Google Sans", "Roboto", sans-serif;
+    font-size: 0.875rem;
+    line-height: 1.428571em;
+    font-weight: 500;
+    letter-spacing: 0em;
+    font-style: normal;
+    font-optical-sizing: auto;
+    font-stretch: 100%;
+
+    &.md3-emphasized {
+        font-weight: 700;
+    }
+
+    &.md3-text-large {
+        font-size: 0.875rem; // 14pt
+        line-height: 1.428571em; // 20pt
+    }
+
+    &.md3-text-medium {
+        font-size: 0.75rem; // 12pt
+        line-height: 1.333333em; // 16pt
+        letter-spacing: 0.008333em; // 0.1pt
+    }
+
+    &.md3-text-small {
+        font-size: 0.6875rem; // 11pt
+        line-height: 1.454545em; // 16pt
+        letter-spacing: 0.009090em; // 0.1pt
+    }
+}
+
+.md3-text-display, .md3-text-headline, .md3-text-title, .md3-text-body, .md3-text-label {
+    color: inherit;
+
+    &.md3-color-on-primary {
+        color: rgb(var(--md-scheme-on-primary));
+    }
+    
+    &.md3-color-on-primary-container {
+        color: rgb(var(--md-scheme-on-primary-container));
+    }
+    
+    &.md3-color-on-secondary {
+        color: rgb(var(--md-scheme-on-secondary));
+    }
+    
+    &.md3-color-on-secondary-container {
+        color: rgb(var(--md-scheme-on-secondary-container));
+    }
+    
+    &.md3-color-on-tertiary {
+        color: rgb(var(--md-scheme-on-tertiary));
+    }
+    
+    &.md3-color-on-tertiary-container {
+        color: rgb(var(--md-scheme-on-tertiary-container));
+    }
+    
+    &.md3-color-on-primary-fixed {
+        color: rgb(var(--md-scheme-on-primary-fixed));
+    }
+    
+    &.md3-color-on-primary-fixed-variant {
+        color: rgb(var(--md-scheme-on-primary-fixed-variant));
+    }
+    
+    &.md3-color-on-secondary-fixed {
+        color: rgb(var(--md-scheme-on-secondary-fixed));
+    }
+    
+    &.md3-color-on-secondary-fixed-variant {
+        color: rgb(var(--md-scheme-on-secondary-fixed-variant));
+    }
+    
+    &.md3-color-on-tertiary-fixed {
+        color: rgb(var(--md-scheme-on-tertiary-fixed));
+    }
+    
+    &.md3-color-on-tertiary-fixed-variant {
+        color: rgb(var(--md-scheme-on-tertiary-fixed-variant));
+    }
+    
+    &.md3-color-on-error {
+        color: rgb(var(--md-scheme-on-error));
+    }
+    
+    &.md3-color-on-error-container {
+        color: rgb(var(--md-scheme-on-error-container));
+    }
+    
+    &.md3-color-on-surface {
+        color: rgb(var(--md-scheme-on-surface));
+    }
+    
+    &.md3-color-on-surface-variant {
+        color: rgb(var(--md-scheme-on-surface-variant));
+    }
+    
+    &.md3-color-inverse-on-surface {
+        color: rgb(var(--md-scheme-inverse-on-surface));
+    }
+}
+
+md3-divider {
+    display: block;
+    width: auto;
+    clear: both;
+    margin: 0;
+    padding: 0;
+    border-top: solid 0.0625rem rgb(var(--md-scheme-outline-variant));
+}
+
+md3-badge {
+    display: inline-block;
+    font-size: 0.6875rem;
+    font-weight: 500;
+    text-align: center;
+    min-width: 1.454545em;
+    line-height: 1.454545em;
+    letter-spacing: 0.045455em;
+    border-radius: 1.454545em;
+    margin: 0;
+    padding: 0 0.363636em;
+    background-color: rgb(var(--md-scheme-error));
+    color: rgb(var(--md-scheme-on-error));
+
+    &.md3-small {
+        padding: 0;
+        color: transparent;
+        overflow: hidden;
+        font-size: 1rem;
+        line-height: 0;
+        width: 0.375em;
+        height: 0.375em;
+        min-width: 0.375em;
+        min-height: 0.375em;
+        max-width: 0.375em;
+        max-height: 0.375em;
+    }
+}
+
+.md3-scrollable {
+    scrollbar-width: thin; /* Firefox */
+    scrollbar-color: rgb(var(--md-scheme-outline-variant)) transparent;
+
+    /* Chromium / Safari */
+    &::-webkit-scrollbar {
+        width: 0.5rem;
+        height: 0.5rem;
+    }
+
+    &::-webkit-scrollbar-track {
+        background: transparent;
+    }
+}
+
+.md3-grid {
+    display: grid;
+    box-sizing: border-box;
+    width: 100%;
+    grid-template-columns: repeat(var(--md-grid-columns), minmax(0em, 1fr));
+    column-gap: var(--md-grid-gutter);
+    row-gap: var(--md-grid-gutter);
+    padding-inline: var(--md-grid-margin);
+}
+
+.md3-grid-item {
+    min-width: 0em;
+    min-height: 0em;
+}

package/src/lib/styles/tokens/md-border-radius.scss

@@ -0,0 +1,12 @@
+:root {
+    --md-border-radius-none: 0em; // none
+    --md-border-radius-xsmall: 0.25em; // 4dp
+    --md-border-radius-small: 0.5em; // 8dp
+    --md-border-radius-medium: 0.75em; // 12dp
+    --md-border-radius-large: 1em; // 16dp
+    --md-border-radius-large-i: 1.25em; // 20dp
+    --md-border-radius-xlarge: 1.75em; // 28dp
+    --md-border-radius-xlarge-i: 2em; // 32dp
+    --md-border-radius-xxlarge: 3em; // 48dp
+    --md-border-radius-rounded: calc(50vh + 50vw); // full
+}

package/src/lib/styles/tokens/md-elevation.scss

@@ -0,0 +1,25 @@
+:root {
+    --md-shadow-0dp: rgba(var(--md-scheme-shadow), 0.2) 0 0 0 0,
+                     rgba(var(--md-scheme-shadow), 0.14) 0 0 0 0,
+                     rgba(var(--md-scheme-shadow), 0.12) 0 0 0 0;
+
+    --md-shadow-1dp: rgba(var(--md-scheme-shadow), 0.2) 0 0.125em 0.0625em -0.0625em,
+                     rgba(var(--md-scheme-shadow), 0.14) 0 0.0625em 0.0625em 0,
+                     rgba(var(--md-scheme-shadow), 0.12) 0 0.0625em 0.1875em 0;
+
+    --md-shadow-3dp: rgba(var(--md-scheme-shadow), 0.2) 0 0.1875em 0.1875em -0.125em,
+                     rgba(var(--md-scheme-shadow), 0.14) 0 0.1875em 0.25em 0,
+                     rgba(var(--md-scheme-shadow), 0.12) 0 0.0625em 0.5em 0;
+
+    --md-shadow-6dp: rgba(var(--md-scheme-shadow), 0.2) 0 0.1875em 0.3125em -0.0625em,
+                     rgba(var(--md-scheme-shadow), 0.14) 0 0.375em 0.625em 0,
+                     rgba(var(--md-scheme-shadow), 0.12) 0 0.0625em 1.125em 0;
+
+    --md-shadow-8dp: rgba(var(--md-scheme-shadow), 0.2) 0 0.3125em 0.3125em -0.1875em,
+                     rgba(var(--md-scheme-shadow), 0.14) 0 0.5em 0.625em 0.0625em,
+                     rgba(var(--md-scheme-shadow), 0.12) 0 0.1875em 0.875em 0.125em;
+
+    --md-shadow-12dp: rgba(var(--md-scheme-shadow), 0.2) 0 0.4375em 0.5em -0.25em,
+                      rgba(var(--md-scheme-shadow), 0.14) 0 0.75em 1.0625em 0.125em,
+                      rgba(var(--md-scheme-shadow), 0.12) 0 0.3125em 1.375em 0.25em;
+}

package/src/lib/styles/tokens/md-grid.scss

@@ -0,0 +1,24 @@
+// Responsive layout grid tokens (columns, margin, gutter).
+// Breakpoints mirror LayoutService.widthQueries — keep both in sync.
+:root {
+    // compact: <600dp
+    --md-grid-columns: 4;
+    --md-grid-margin: 1em; // 16dp
+    --md-grid-gutter: 1em; // 16dp
+}
+
+@media (min-width: 37.5em) and (max-width: 74.999em) { // medium, expanded: 600-1199dp
+    :root {
+        --md-grid-columns: 8;
+        --md-grid-margin: 1.5em; // 24dp
+        --md-grid-gutter: 1.5em; // 24dp
+    }
+}
+
+@media (min-width: 75em) { // large, extra-large: >=1200dp
+    :root {
+        --md-grid-columns: 12;
+        --md-grid-margin: 1.5em; // 24dp
+        --md-grid-gutter: 1.5em; // 24dp
+    }
+}

package/src/lib/styles/tokens/md-motion.scss

@@ -0,0 +1,47 @@
+:root {
+    /* Expressive – spatial */
+    --md-motion-expressive-fast-spatial-duration: 350ms;
+    // --md-motion-expressive-fast-spatial-easing: cubic-bezier(0.42, 1.67, 0.21, 0.90);
+    --md-motion-expressive-fast-spatial-easing: cubic-bezier(0.20, 1.40, 0.20, 1.10);
+
+    --md-motion-expressive-default-spatial-duration: 500ms;
+    // --md-motion-expressive-default-spatial-easing: cubic-bezier(0.38, 1.21, 0.22, 1.00);
+    --md-motion-expressive-default-spatial-easing: cubic-bezier(0.25, 1.15, 0.20, 1.05);
+
+    --md-motion-expressive-slow-spatial-duration: 650ms;
+    // --md-motion-expressive-slow-spatial-easing: cubic-bezier(0.39, 1.29, 0.35, 0.98);
+    --md-motion-expressive-slow-spatial-easing: cubic-bezier(0.30, 1.02, 0.22, 1.00);
+
+    /* Expressive – effects */
+    --md-motion-expressive-fast-effects-duration: 150ms;
+    // --md-motion-expressive-fast-effects-easing: cubic-bezier(0.31, 0.94, 0.34, 1.00);
+    --md-motion-expressive-fast-effects-easing: cubic-bezier(0.20, 1.30, 0.30, 1.10);
+
+    --md-motion-expressive-default-effects-duration: 200ms;
+    // --md-motion-expressive-default-effects-easing: cubic-bezier(0.34, 0.80, 0.34, 1.00);
+    --md-motion-expressive-default-effects-easing: cubic-bezier(0.25, 1.10, 0.25, 1.05);
+
+    --md-motion-expressive-slow-effects-duration: 300ms;
+    // --md-motion-expressive-slow-effects-easing: cubic-bezier(0.34, 0.88, 0.34, 1.00);
+    --md-motion-expressive-slow-effects-easing: cubic-bezier(0.30, 1.02, 0.30, 1.00);
+
+    /* Standard – spatial */
+    --md-motion-standard-fast-spatial-duration: 350ms;
+    --md-motion-standard-fast-spatial-easing: cubic-bezier(0.27, 1.06, 0.18, 1.00);
+
+    --md-motion-standard-default-spatial-duration: 500ms;
+    --md-motion-standard-default-spatial-easing: cubic-bezier(0.27, 1.06, 0.18, 1.00);
+
+    --md-motion-standard-slow-spatial-duration: 750ms;
+    --md-motion-standard-slow-spatial-easing: cubic-bezier(0.27, 1.06, 0.18, 1.00);
+
+    /* Standard – effects */
+    --md-motion-standard-fast-effects-duration: 150ms;
+    --md-motion-standard-fast-effects-easing: cubic-bezier(0.31, 0.94, 0.34, 1.00);
+
+    --md-motion-standard-default-effects-duration: 200ms;
+    --md-motion-standard-default-effects-easing: cubic-bezier(0.34, 0.80, 0.34, 1.00);
+
+    --md-motion-standard-slow-effects-duration: 300ms;
+    --md-motion-standard-slow-effects-easing: cubic-bezier(0.34, 0.88, 0.34, 1.00);
+}