@filip.mazev/blocks 1.4.14 → 1.4.16

package/README.md

@@ -18,7 +18,7 @@ ng add @filip.mazev/blocks
 
 When you run the command above, the Angular CLI will execute our custom schematic to handle the boilerplate for you:
 
-* Palette selection: Graphite / Sky Blue is the CLI default. Azure / Coral, Violet / Teal, Tangerine / Indigo, Scarlet / Cyan, Lime / Violet, and Cyberpunk are also available. Use `--theme=azure-coral` to select Azure / Coral.
+* Palette selection: Carbon / Cobalt is the CLI default. Azure / Ember, Violet / Teal, Tangerine / Indigo, Brick Rose / Cyan, Lime / Violet, and Cyberpunk are also available. Use `--theme=azure-ember` to select Azure / Ember.
 * Dependency Management: Automatically adds the latest versions of the Blocks ecosystem to your package.json and runs npm install.
 * SCSS Injection: Intelligently locates your project's global stylesheet (styles.scss or styles.sass) and injects the required @use statements, mixins, and both light/dark mode CSS variables based on your theme selection.
 
@@ -37,11 +37,11 @@ Then, manually configure your styles.scss:
 
 @layer base {
     :root {
-        @include bx-theme($graphite-sky-blue-light-theme);
+        @include bx-theme($carbon-cobalt-light-theme);
     }
 
     [data-theme='dark'] {
-        @include bx-theme($graphite-sky-blue-dark-theme);
+        @include bx-theme($carbon-cobalt-dark-theme);
     }
 }
 ```
@@ -52,10 +52,10 @@ Then, manually configure your styles.scss:
 Use paired palette IDs consistently in the CLI and `ThemingService.setPalette()`. For example:
 
 ```sh
-ng add @filip.mazev/blocks --theme=azure-coral
+ng add @filip.mazev/blocks --theme=azure-ember
 ```
 
-The Sass exports use the same names: `$azure-coral-light-theme` and `$azure-coral-dark-theme`. Graphite / Sky Blue is the installer default; the playground starts with Graphite / Sky Blue. Previous IDs and Sass names remain aliases.
+The Sass exports use the same names: `$azure-ember-light-theme` and `$azure-ember-dark-theme`. Carbon / Cobalt is the installer default; the playground starts with Carbon / Cobalt. Only the current palette IDs and Sass names are supported.
 
 Buttons and tabs accept `color="accent"` for the second tone. Icons and custom components can use semantic tokens such as `text-accent`, `accent-subtle`, `on-accent`, and `border-accent`. Canvas backgrounds stay neutral; status roles keep their meaning. See [the palette reference](../../documentation/appearance/README.md#palettes) for all seven pairs.
 

package/core/styles/_a11y.scss

@@ -1,5 +1,10 @@
+@use '@angular/cdk' as cdk;
+
 @forward 'motion';
 
+// Emit the CDK utility once through the shared global accessibility entry point.
+@include cdk.a11y-visually-hidden;
+
 :root {
     --bx-reduced-motion: 0;
 

package/core/styles/_field-state.scss

@@ -14,9 +14,18 @@
         display: none;
     }
 
-    &:focus-within:not(.is-disabled, :disabled),
-    &:focus-visible:not(:disabled),
-    &.is-open:not(:disabled) {
+    &:focus-within:not(
+            .is-disabled,
+            :disabled,
+            .is-readonly,
+            [readonly],
+            [aria-readonly='true'],
+            :has([readonly], [aria-readonly='true'])
+        ),
+    &:focus-visible:not(:disabled, [readonly], [aria-readonly='true']),
+    &.is-open:not(:disabled),
+    &.is-readonly.is-keyboard-focused:focus-within,
+    &:has(.bx-readonly.is-keyboard-focused):focus-within {
         --bx-glass-edge: var(--bx-border-brand);
 
         outline: 2px solid var(--bx-border-brand);

package/core/styles/_helpers.scss

@@ -5,3 +5,4 @@
 @forward 'motion';
 @forward 'field-state';
 @forward 'choice-finish';
+@forward 'text-overflow';

package/core/styles/_index.scss

@@ -4,20 +4,15 @@
 @forward 'palettes';
 @forward 'theme-engine';
 @forward 'a11y';
-@forward 'themes/graphite-sky-blue-theme';
-@forward 'themes/azure-coral-theme';
+@forward 'themes/carbon-cobalt-theme';
+@forward 'themes/azure-ember-theme';
+@forward 'themes/brick-rose-cyan-theme';
 @forward 'themes/violet-teal-theme';
 @forward 'themes/tangerine-indigo-theme';
-@forward 'themes/scarlet-cyan-theme';
 @forward 'themes/lime-violet-theme';
-@forward 'themes/white-theme';
-@forward 'themes/blue-theme';
-@forward 'themes/purple-theme';
-@forward 'themes/orange-theme';
-@forward 'themes/red-theme';
-@forward 'themes/green-theme';
 @forward 'themes/cyberpunk-theme';
 @forward 'themes/high-contrast-theme';
 @forward 'slider';
 @forward 'validation';
 @forward 'overlay';
+@forward 'text';

package/core/styles/_palettes.scss

@@ -180,28 +180,72 @@ $hc-yellow: #e4d500;
 $hc-cyan: #00f3f3;
 $hc-red: #ff0000;
 $hc-green: #00ff00;
-$graphite-palette: _tonal-palette(#525252) !default;
-$sky-blue-palette: _tonal-palette(#38bdf8) !default;
-$azure-palette: $blue-palette !default;
-$coral-palette: _tonal-palette(#f87763) !default;
+
+// Tune the upper tones explicitly so dark actions retain their color character.
+$carbon-palette: map.merge(
+    _tonal-palette(#292a2d),
+    (
+        50: #fdfdfc,
+        100: #f7f7f5,
+        200: #efefed,
+        300: #e2e2e0,
+        400: #77797d,
+    )
+) !default;
+$cobalt-palette: map.merge(
+    _tonal-palette(#356fe8),
+    (
+        200: #abc5ff,
+        300: #6d9aff,
+        400: #4c82f2,
+    )
+) !default;
+$ember-palette: map.merge(
+    _tonal-palette(#d85a1a),
+    (
+        200: #f5a365,
+        300: #f27b35,
+        400: #e96926,
+    )
+) !default;
+$brick-rose-palette: map.merge(
+    _tonal-palette(#b64a50),
+    (
+        200: #e69ba4,
+        300: #d36b77,
+        400: #c55964,
+    )
+) !default;
+$azure-palette: map.merge(
+    $blue-palette,
+    (
+        300: #72a7ff,
+    )
+) !default;
 $violet-palette: $purple-palette !default;
 $teal-palette: _tonal-palette(#0d9488) !default;
 $tangerine-palette: $orange-palette !default;
 $indigo-palette: _tonal-palette(#4f78f5) !default;
-$scarlet-palette: $red-palette !default;
-$cyan-palette: _tonal-palette(#0891b2) !default;
+$cyan-palette: map.merge(
+    _tonal-palette(#0891b2),
+    (
+        200: #78d8e6,
+        300: #22b8d0,
+        400: #12a4bf,
+    )
+) !default;
 $lime-palette: _tonal-palette(#c4f53d) !default;
 $cool-violet-palette: _tonal-palette(#6842a6) !default;
 $all-palettes: (
-    'graphite': $graphite-palette,
-    'sky-blue': $sky-blue-palette,
+    'carbon': $carbon-palette,
+    'cobalt': $cobalt-palette,
+    'ember': $ember-palette,
+    'brick-rose': $brick-rose-palette,
     'azure': $azure-palette,
-    'coral': $coral-palette,
     'violet': $violet-palette,
     'teal': $teal-palette,
     'tangerine': $tangerine-palette,
     'indigo': $indigo-palette,
-    'scarlet': $scarlet-palette,
     'cyan': $cyan-palette,
     'lime': $lime-palette,
     'cool-violet': $cool-violet-palette,

package/core/styles/_slider.scss

@@ -18,8 +18,8 @@
 @mixin thumb {
     appearance: none;
     box-sizing: border-box;
-    width: spacing(6);
-    height: spacing(6);
+    width: var(--bx-slider-thumb-size, #{spacing(6)});
+    height: var(--bx-slider-thumb-size, #{spacing(6)});
     border-radius: radius(pill);
     border: 1px solid var(--bx-border-strong);
     background: var(--bx-bg-surface);
@@ -50,7 +50,38 @@
         display: block;
     }
 
-    // The native thumb remains the hit target; the opaque decorative thumb reflects nearby colors.
+    &::before {
+        content: '';
+        display: var(--bx-slider-fill-display, block);
+        position: absolute;
+        top: var(--bx-slider-center-y, 50%);
+        left: var(--bx-slider-track-start, 0);
+        width: calc(
+            var(--bx-slider-thumb-size, #{spacing(6)}) / 2 + var(--bx-slider-position, 0.5) *
+                (var(--bx-slider-track-width, 100%) - var(--bx-slider-thumb-size, #{spacing(6)}))
+        );
+        height: spacing(2);
+        transform: translateY(-50%);
+        border-radius: radius(pill);
+        background: var(--bx-accent);
+        pointer-events: none;
+        z-index: 1;
+    }
+
+    &:dir(rtl)::before {
+        left: auto;
+        right: var(--bx-slider-track-start, 0);
+    }
+
+    input.bx-slider::-webkit-slider-runnable-track {
+        background: var(--bx-bg-neutral);
+    }
+
+    input.bx-slider::-moz-range-track {
+        background: var(--bx-bg-neutral);
+    }
+
+    // The native thumb remains the hit target; the decorative lens paints over it.
     input.bx-slider::-webkit-slider-thumb {
         background: transparent;
         border-color: transparent;
@@ -73,11 +104,41 @@
     position: absolute;
     top: var(--bx-slider-center-y, 50%);
     left: calc(
-        var(--bx-slider-track-start, 0px) + var(--bx-slider-position, 0.5) *
-            (var(--bx-slider-track-width, 100%) - #{spacing(6)})
+        var(--bx-slider-track-start, 0px) +
+            var(--bx-slider-physical-position, var(--bx-slider-position, 0.5)) *
+            (var(--bx-slider-track-width, 100%) - var(--bx-slider-thumb-size, #{spacing(6)}))
     );
     transform: translateY(-50%);
     pointer-events: none;
+    z-index: 2;
+    overflow: hidden;
+    background:
+        radial-gradient(circle at 35% 0%, rgb(255 255 255 / 45%), transparent 65%),
+        color-mix(in srgb, var(--bx-bg-surface) 24%, transparent);
+    border-color: color-mix(in srgb, var(--bx-text-primary) 35%, var(--bx-border-strong));
+    backdrop-filter: blur(var(--bx-slider-lens-blur, 1.5px));
+
+    --bx-slider-lens-width: calc(
+        var(--bx-slider-track-width) * var(--bx-slider-magnification, 1.5)
+    );
+    --bx-slider-lens-inset: calc(
+        var(--bx-slider-thumb-size, #{spacing(6)}) / 2 * var(--bx-slider-magnification, 1.5)
+    );
+    --bx-slider-lens-travel: calc(
+        (var(--bx-slider-track-width) - var(--bx-slider-thumb-size, #{spacing(6)})) *
+            var(--bx-slider-magnification, 1.5)
+    );
+    --bx-slider-lens-start-offset: calc(
+        var(--bx-slider-lens-inset) + var(--bx-slider-lens-start, 0) * var(--bx-slider-lens-travel)
+    );
+    --bx-slider-lens-end-offset: calc(
+        var(--bx-slider-lens-inset) + var(--bx-slider-lens-end, var(--bx-slider-position, 0.5)) *
+            var(--bx-slider-lens-travel)
+    );
+
+    &:dir(rtl) {
+        --bx-slider-physical-position: calc(1 - var(--bx-slider-position, 0.5));
+    }
 
     &::after {
         @include bx-transition(opacity, 0.2s, ease-out);
@@ -101,6 +162,38 @@
     }
 }
 
+// Reuse the rail geometry in CSS instead of sampling screen pixels on drag.
+// A separate rounded fill keeps the magnified selection's end caps curved.
+.bx-slider-lens {
+    display: var(--bx-slider-lens-display, block);
+    position: absolute;
+    top: 50%;
+    left: calc(
+        var(--bx-slider-thumb-size, #{spacing(6)}) / 2 -
+            1px - var(--bx-slider-lens-inset) - var(
+                --bx-slider-physical-position,
+                var(--bx-slider-position, 0.5)
+            ) *
+            var(--bx-slider-lens-travel)
+    );
+    width: var(--bx-slider-lens-width);
+    height: calc(#{spacing(2)} * var(--bx-slider-magnification, 1.5));
+    transform: translateY(-50%);
+    border-radius: radius(pill);
+    background: var(--bx-slider-lens-track-color, var(--bx-bg-neutral));
+    filter: blur(var(--bx-slider-lens-blur, 1.5px));
+
+    &::after {
+        content: '';
+        position: absolute;
+        inset-block: 0;
+        inset-inline: var(--bx-slider-lens-start-offset)
+            calc(var(--bx-slider-lens-width) - var(--bx-slider-lens-end-offset));
+        background: var(--bx-accent);
+        border-radius: inherit;
+    }
+}
+
 input.bx-slider {
     appearance: none;
     width: 100%;
@@ -127,7 +220,7 @@ input.bx-slider {
     &::-webkit-slider-thumb {
         @include thumb;
 
-        margin-top: calc((#{spacing(2)} - #{spacing(6)}) / 2 - 1px);
+        margin-top: calc((#{spacing(2)} - var(--bx-slider-thumb-size, #{spacing(6)})) / 2 - 1px);
     }
 
     &::-moz-range-thumb {
@@ -140,6 +233,10 @@ input.bx-slider {
         border-radius: radius(pill);
     }
 
+    &[readonly] {
+        cursor: default;
+    }
+
     &:disabled {
         opacity: 0.5;
         cursor: not-allowed;
@@ -147,6 +244,8 @@ input.bx-slider {
 }
 
 @mixin opaque-thumb {
+    --bx-slider-lens-display: none;
+
     background: var(--bx-bg-surface);
     backdrop-filter: none;
 }
@@ -217,3 +316,14 @@ input.bx-slider {
         box-shadow: none;
     }
 }
+
+.bx-slider-value-label {
+    display: block;
+    color: var(--bx-text-secondary);
+    font-size: 0.75rem;
+    text-align: center;
+}
+
+.bx-slider-value-label[hidden] {
+    display: none;
+}

package/core/styles/_text-overflow.scss

@@ -0,0 +1,7 @@
+// Shared ellipsis mechanics. Include through helpers when styling a text surface.
+@mixin truncate-text {
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}

package/core/styles/_text.scss

@@ -0,0 +1,5 @@
+@use 'text-overflow' as *;
+
+.bx-truncate {
+    @include truncate-text;
+}

package/core/styles/_validation.scss

@@ -1,4 +1,5 @@
 @use 'field-state' as *;
+@use 'mixins' as *;
 
 // A projected surface inside a form field receives the complete field material,
 // including its valid focus state, without application-specific effects CSS.
@@ -20,3 +21,50 @@
         outline-color: Mark;
     }
 }
+
+.bx-native-control {
+    box-sizing: border-box;
+    inline-size: 100%;
+    padding: spacing(3);
+    border: 1px solid var(--bx-border-strong);
+    border-radius: radius(sm);
+    background: var(--bx-bg-neutral);
+    color: var(--bx-text-primary);
+    font: inherit;
+
+    &:focus-visible:not([readonly], [aria-readonly='true']),
+    &.is-keyboard-focused:focus-visible {
+        outline: 2px solid var(--bx-border-brand);
+        outline-offset: 2px;
+    }
+
+    &:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+    }
+
+    &[readonly]:not(:disabled) {
+        cursor: default;
+    }
+
+    &[aria-invalid='true'] {
+        border-color: var(--bx-border-danger);
+    }
+}
+
+.bx-field-prefix,
+.bx-field-suffix {
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+}
+
+.bx-field-prefix {
+    padding-inline: var(--bx-field-adornment-padding, #{spacing(3)})
+        var(--bx-field-adornment-gap, #{spacing(2)});
+}
+
+.bx-field-suffix {
+    padding-inline: var(--bx-field-adornment-gap, #{spacing(2)})
+        var(--bx-field-adornment-padding, #{spacing(3)});
+}

package/core/styles/themes/_azure-ember-theme.scss

@@ -0,0 +1,4 @@
+@use '../theme-engine' as *;
+
+$azure-ember-light-theme: make-light-theme('azure', 'ember');
+$azure-ember-dark-theme: make-dark-theme('azure', 'ember');

package/core/styles/themes/_brick-rose-cyan-theme.scss

@@ -0,0 +1,4 @@
+@use '../theme-engine' as *;
+
+$brick-rose-cyan-light-theme: make-light-theme('brick-rose', 'cyan');
+$brick-rose-cyan-dark-theme: make-dark-theme('brick-rose', 'cyan');

package/core/styles/themes/_carbon-cobalt-theme.scss

@@ -0,0 +1,4 @@
+@use '../theme-engine' as *;
+
+$carbon-cobalt-light-theme: make-light-theme('carbon', 'cobalt');
+$carbon-cobalt-dark-theme: make-dark-theme('carbon', 'cobalt');