@expressivecss/expressive 0.14.1 → 0.15.0

package/src/sass/components/_timepicker.scss

@@ -16,7 +16,6 @@
 :is(.timepicker-digital-display, .time-picker-digital-display) {
   width: auto;
   flex: 1 auto;
-  // background-color: var(--md-sys-color-surface);
   padding: 2rem .67rem .67rem .67rem;
   font-weight: 300;
 }
@@ -27,7 +26,6 @@
   text-align: left;
   color: var(--md-sys-color-on-surface-variant);
   font-weight: 400;
-  /*position: relative;*/
   user-select: none;
   padding: 1rem 1rem 1.3rem 1rem;
 
@@ -80,15 +78,8 @@ input[type=text]:is(.timepicker-input-minutes, .time-picker-input-minutes) {
   text-align: center;
 }
 
-/*input[type=text].text-primary {
-  color: var(--md-sys-color-on-background);
-}*/
-
 :is(.timepicker-display-am-pm, .time-picker-display-am-pm) {
   font-size: 1.3rem;
-  /*position: absolute;
-  top: 1rem;
-  right: 1rem;*/
   font-weight: 400;
 }
 
@@ -109,7 +100,6 @@ input[type=text]:is(.timepicker-input-minutes, .time-picker-input-minutes) {
   line-height: 2rem;
   vertical-align: middle;
   text-align: center;
-  // background-color: transparent;
   border: 1px solid var(--md-sys-color-outline);
 }
 
@@ -128,7 +118,6 @@ input[type=text]:is(.timepicker-input-minutes, .time-picker-input-minutes) {
 :is(.timepicker-analog-display, .time-picker-analog-display) {
   flex: 2.5 auto;
   padding: .67rem;
-  // background-color: var(--md-sys-color-surface);
 }
 
 :is(.timepicker-plate, .time-picker-plate) {
@@ -149,10 +138,7 @@ input[type=text]:is(.timepicker-input-minutes, .time-picker-input-minutes) {
 :is(.timepicker-canvas, .time-picker-canvas),
 :is(.timepicker-dial, .time-picker-dial) {
   position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
+  inset: 0;
 }
 
 :is(.timepicker-minutes, .time-picker-minutes) {
@@ -206,11 +192,7 @@ input[type=text]:is(.timepicker-input-minutes, .time-picker-input-minutes) {
   opacity: 0.25;
 }
 
-:is(.timepicker-canvas-bearing, .time-picker-canvas-bearing) {
-  stroke: none;
-  fill: var(--md-sys-color-primary);
-}
-
+:is(.timepicker-canvas-bearing, .time-picker-canvas-bearing),
 :is(.timepicker-canvas-bg, .time-picker-canvas-bg) {
   stroke: none;
   fill: var(--md-sys-color-primary);
@@ -243,9 +225,6 @@ input[type=text]:is(.timepicker-input-minutes, .time-picker-input-minutes) {
   :is(.timepicker-container, .time-picker-container) {
     width: auto;
     max-width: 620px;
-  }
-
-  :is(.timepicker-container, .time-picker-container) {
     flex-direction: row;
   }
 
@@ -254,7 +233,6 @@ input[type=text]:is(.timepicker-input-minutes, .time-picker-input-minutes) {
   }
 
   :is(.timepicker-text-container, .time-picker-text-container) {
-    /*top: 31%;*/
     flex-direction: column;
     margin-top: 4.8rem;
     text-align: center;
@@ -277,24 +255,14 @@ input[type=text]:is(.timepicker-input-minutes, .time-picker-input-minutes) {
   :is(.timepicker-container, .time-picker-container) .am-btn,
   :is(.timepicker-container, .time-picker-container) .pm-btn {
     flex-grow: 1;
-    /*width: auto;*/
-    // Same two retired variables as above; both declarations
-    // rendered as 0. The corner rules that follow square off the inner
-    // edges, so the outer ones are the only radius in play.
-    padding-inline: 0;
+    // A retired variable that always rendered as 0. Squares all four
+    // corners of both buttons.
     border-radius: 0;
     border: 1px solid var(--md-sys-color-outline);
   }
 
-  :is(.timepicker-container, .time-picker-container) .am-btn {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-
   :is(.timepicker-container, .time-picker-container) .pm-btn {
     border-left: 0;
-    border-bottom-left-radius: 0;
-    border-top-left-radius: 0;
   }
 
   :is(.timepicker-plate, .time-picker-plate) {

package/src/sass/components/_toolbar.scss

@@ -51,10 +51,6 @@
 // (rule 4) - and not role="toolbar" either, because that is a composite role
 // promising arrow-key navigation nothing here implements (rule 2). The <nav>
 // form is the older markup and still works.
-//
-// Wrapped in :is() so it stays one compound selector: interpolating a bare
-// comma-separated list breaks out of its context. That mistake shipped once
-// already, in $_bar.
 $_toolbar: ".toolbar";
 
 // The two axes. `.max` is an alias for docked; `.filled` is the older

package/src/sass/components/forms/_checkboxes.scss

@@ -19,6 +19,10 @@
 //
 // .filled-in is a no-op: the selected state is always the filled box.
 
+@mixin _ring($color, $state) {
+  @include state-layer-ring(var(--md-comp-checkbox-state-layer-size), var(--md-comp-checkbox-container-size), $color, $state);
+}
+
 $_cb-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 9.5 7.5 13 14 5.5'/%3E%3C/svg%3E");
 $_cb-dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' d='M4.5 9h9'/%3E%3C/svg%3E");
 
@@ -82,32 +86,17 @@ label:has(> [type="checkbox"]):not(.switch) > [type="checkbox"],
   }
 
   &:hover {
-    @include state-layer-ring(
-    var(--md-comp-checkbox-state-layer-size),
-    var(--md-comp-checkbox-container-size),
-    var(--md-sys-color-on-surface),
-    "hover"
-  );
+    @include _ring(var(--md-sys-color-on-surface), "hover");
   }
 
   &:checked:hover,
   &:indeterminate:hover {
-    @include state-layer-ring(
-    var(--md-comp-checkbox-state-layer-size),
-    var(--md-comp-checkbox-container-size),
-    var(--md-sys-color-primary),
-    "hover"
-  );
+    @include _ring(var(--md-sys-color-primary), "hover");
   }
 
   &:focus-visible,
   &.tabbed:focus {
-    @include state-layer-ring(
-    var(--md-comp-checkbox-state-layer-size),
-    var(--md-comp-checkbox-container-size),
-    var(--md-sys-color-primary),
-    "focus"
-  );
+    @include _ring(var(--md-sys-color-primary), "focus");
     outline: none;
   }
 
@@ -126,12 +115,7 @@ label:has(> [type="checkbox"]):not(.switch) > [type="checkbox"],
 
   &.invalid:hover,
   &[aria-invalid="true"]:hover {
-    @include state-layer-ring(
-    var(--md-comp-checkbox-state-layer-size),
-    var(--md-comp-checkbox-container-size),
-    var(--md-sys-color-error),
-    "hover"
-  );
+    @include _ring(var(--md-sys-color-error), "hover");
   }
 
   &:disabled {
@@ -208,13 +192,16 @@ label:has(> [type="checkbox"]:disabled):not(.switch),
 
 // Legacy / Select / Autocomplete: input + span draws the same
 // 18dp anatomy. Exclude .switch — that file paints the track on a span.
-$_cb-span: "*:not(.switch) > [type='checkbox'] + span:not(.lever, .supporting-text, .character-counter, .file-path)";
+// $state is appended to the checkbox, e.g. ":checked" or ".invalid".
+@function _cb-span($state: "") {
+  @return "*:not(.switch) > [type='checkbox']#{$state} + span:not(.lever, .supporting-text, .character-counter, .file-path)";
+}
 
 // inline-block, not inline-flex: a flex span turns each text run and link
 // inside it into its own item, which drops the spaces around a link and
 // splits "I agree to the <a>Terms</a>" into columns. The block padding
 // centers one line in the 48px target, as align-items did.
-#{$_cb-span} {
+#{_cb-span()} {
   position: relative;
   display: inline-block;
   box-sizing: border-box;
@@ -225,8 +212,8 @@ $_cb-span: "*:not(.switch) > [type='checkbox'] + span:not(.lever, .supporting-te
   user-select: none;
 }
 
-#{$_cb-span}::before,
-#{$_cb-span}::after {
+#{_cb-span()}::before,
+#{_cb-span()}::after {
   content: "";
   position: absolute;
   left: 0;
@@ -238,93 +225,78 @@ $_cb-span: "*:not(.switch) > [type='checkbox'] + span:not(.lever, .supporting-te
   border-radius: 2px;
 }
 
-#{$_cb-span}::before {
+#{_cb-span()}::before {
   border: 2px solid var(--md-sys-color-on-surface-variant);
   background-color: transparent;
   transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
 }
 
-#{$_cb-span}::after {
+#{_cb-span()}::after {
   background-color: var(--md-sys-color-on-primary);
   -webkit-mask: #{$_cb-check} center / contain no-repeat;
   mask: #{$_cb-check} center / contain no-repeat;
   opacity: 0;
 }
 
-*:not(.switch) > [type="checkbox"]:is(:checked, :indeterminate) + span:not(.lever, .supporting-text, .character-counter, .file-path)::before {
+#{_cb-span(":is(:checked, :indeterminate)")}::before {
   border-color: var(--md-sys-color-primary);
   background-color: var(--md-sys-color-primary);
 }
 
-*:not(.switch) > [type="checkbox"]:is(:checked, :indeterminate) + span:not(.lever, .supporting-text, .character-counter, .file-path)::after {
+#{_cb-span(":is(:checked, :indeterminate)")}::after {
   opacity: 1;
 }
 
-*:not(.switch) > [type="checkbox"]:indeterminate + span:not(.lever, .supporting-text, .character-counter, .file-path)::after {
+#{_cb-span(":indeterminate")}::after {
   -webkit-mask-image: #{$_cb-dash};
   mask-image: #{$_cb-dash};
 }
 
-*:not(.switch) > [type="checkbox"]:hover + span:not(.lever, .supporting-text, .character-counter, .file-path)::before {
-  @include state-layer-ring(
-    var(--md-comp-checkbox-state-layer-size),
-    var(--md-comp-checkbox-container-size),
-    var(--md-sys-color-on-surface),
-    "hover"
-  );
+#{_cb-span(":hover")}::before {
+  @include _ring(var(--md-sys-color-on-surface), "hover");
 }
 
-*:not(.switch) > [type="checkbox"]:is(:checked, :indeterminate):hover + span:not(.lever, .supporting-text, .character-counter, .file-path)::before {
-  @include state-layer-ring(
-    var(--md-comp-checkbox-state-layer-size),
-    var(--md-comp-checkbox-container-size),
-    var(--md-sys-color-primary),
-    "hover"
-  );
+#{_cb-span(":is(:checked, :indeterminate):hover")}::before {
+  @include _ring(var(--md-sys-color-primary), "hover");
 }
 
-*:not(.switch) > [type="checkbox"]:focus-visible + span:not(.lever, .supporting-text, .character-counter, .file-path)::before,
-*:not(.switch) > [type="checkbox"].tabbed:focus + span:not(.lever, .supporting-text, .character-counter, .file-path)::before {
-  @include state-layer-ring(
-    var(--md-comp-checkbox-state-layer-size),
-    var(--md-comp-checkbox-container-size),
-    var(--md-sys-color-primary),
-    "focus"
-  );
+#{_cb-span(":focus-visible")}::before,
+#{_cb-span(".tabbed:focus")}::before {
+  @include _ring(var(--md-sys-color-primary), "focus");
 }
 
-*:not(.switch) > [type="checkbox"].invalid + span:not(.lever, .supporting-text, .character-counter, .file-path)::before,
-*:not(.switch) > [type="checkbox"][aria-invalid="true"] + span:not(.lever, .supporting-text, .character-counter, .file-path)::before {
+#{_cb-span(".invalid")}::before,
+#{_cb-span("[aria-invalid='true']")}::before {
   border-color: var(--md-sys-color-error);
 }
 
-*:not(.switch) > [type="checkbox"].invalid:is(:checked, :indeterminate) + span:not(.lever, .supporting-text, .character-counter, .file-path)::before,
-*:not(.switch) > [type="checkbox"][aria-invalid="true"]:is(:checked, :indeterminate) + span:not(.lever, .supporting-text, .character-counter, .file-path)::before {
+#{_cb-span(".invalid:is(:checked, :indeterminate)")}::before,
+#{_cb-span("[aria-invalid='true']:is(:checked, :indeterminate)")}::before {
   border-color: var(--md-sys-color-error);
   background-color: var(--md-sys-color-error);
 }
 
-*:not(.switch) > [type="checkbox"].invalid:is(:checked, :indeterminate) + span:not(.lever, .supporting-text, .character-counter, .file-path)::after,
-*:not(.switch) > [type="checkbox"][aria-invalid="true"]:is(:checked, :indeterminate) + span:not(.lever, .supporting-text, .character-counter, .file-path)::after {
+#{_cb-span(".invalid:is(:checked, :indeterminate)")}::after,
+#{_cb-span("[aria-invalid='true']:is(:checked, :indeterminate)")}::after {
   background-color: var(--md-sys-color-on-error);
 }
 
-*:not(.switch) > [type="checkbox"]:disabled + span:not(.lever, .supporting-text, .character-counter, .file-path) {
+#{_cb-span(":disabled")} {
   color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
   cursor: default;
 }
 
-*:not(.switch) > [type="checkbox"]:disabled + span:not(.lever, .supporting-text, .character-counter, .file-path)::before {
+#{_cb-span(":disabled")}::before {
   border-color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
   background-color: transparent;
   box-shadow: none;
 }
 
-*:not(.switch) > [type="checkbox"]:disabled:is(:checked, :indeterminate) + span:not(.lever, .supporting-text, .character-counter, .file-path)::before {
+#{_cb-span(":disabled:is(:checked, :indeterminate)")}::before {
   border-color: transparent;
   background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
 }
 
-*:not(.switch) > [type="checkbox"]:disabled:is(:checked, :indeterminate) + span:not(.lever, .supporting-text, .character-counter, .file-path)::after {
+#{_cb-span(":disabled:is(:checked, :indeterminate)")}::after {
   background-color: var(--md-sys-color-surface);
 }

package/src/sass/components/forms/_fieldset.scss

@@ -31,13 +31,13 @@ fieldset {
   min-inline-size: 0;
   margin: 0;
   padding: 16px;
+  border: var(--md-comp-fieldset-outline-width) solid var(--md-comp-fieldset-outline-color);
+  border-radius: var(--md-comp-fieldset-container-shape);
+  background-color: var(--md-comp-fieldset-container-color);
 
   & + & {
     margin-block-start: 24px;
   }
-  border: var(--md-comp-fieldset-outline-width) solid var(--md-comp-fieldset-outline-color);
-  border-radius: var(--md-comp-fieldset-container-shape);
-  background-color: var(--md-comp-fieldset-container-color);
 
   > legend {
     float: none;

package/src/sass/components/forms/_file-input.scss

@@ -6,7 +6,6 @@
   // the selected filename instead of consuming the entire field.
   grid-template-columns: fit-content(50%) minmax(0, 1fr);
   gap: 10px;
-  //position: relative;
 
   .file-path-wrapper {
     overflow: hidden;

package/src/sass/components/forms/_radio-buttons.scss

@@ -16,6 +16,10 @@
 //
 // .with-gap is a no-op: the selected state is always the ring + inner.
 
+@mixin _ring($color, $state) {
+  @include state-layer-ring(var(--md-comp-radio-button-state-layer-size), var(--md-comp-radio-button-icon-size), $color, $state);
+}
+
 label:has(> [type="radio"]),
 .radio {
   --md-comp-radio-button-icon-size: 20px;
@@ -75,31 +79,16 @@ label:has(> [type="radio"]) > [type="radio"],
   }
 
   &:hover {
-    @include state-layer-ring(
-    var(--md-comp-radio-button-state-layer-size),
-    var(--md-comp-radio-button-icon-size),
-    var(--md-sys-color-on-surface),
-    "hover"
-  );
+    @include _ring(var(--md-sys-color-on-surface), "hover");
   }
 
   &:checked:hover {
-    @include state-layer-ring(
-    var(--md-comp-radio-button-state-layer-size),
-    var(--md-comp-radio-button-icon-size),
-    var(--md-sys-color-primary),
-    "hover"
-  );
+    @include _ring(var(--md-sys-color-primary), "hover");
   }
 
   &:focus-visible,
   &.tabbed:focus {
-    @include state-layer-ring(
-    var(--md-comp-radio-button-state-layer-size),
-    var(--md-comp-radio-button-icon-size),
-    var(--md-sys-color-primary),
-    "focus"
-  );
+    @include _ring(var(--md-sys-color-primary), "focus");
     outline: none;
   }
 
@@ -180,31 +169,16 @@ label:has(> [type="radio"]:disabled),
 }
 
 [type="radio"]:hover + span::before {
-  @include state-layer-ring(
-    var(--md-comp-radio-button-state-layer-size),
-    var(--md-comp-radio-button-icon-size),
-    var(--md-sys-color-on-surface),
-    "hover"
-  );
+  @include _ring(var(--md-sys-color-on-surface), "hover");
 }
 
 [type="radio"]:checked:hover + span::before {
-  @include state-layer-ring(
-    var(--md-comp-radio-button-state-layer-size),
-    var(--md-comp-radio-button-icon-size),
-    var(--md-sys-color-primary),
-    "hover"
-  );
+  @include _ring(var(--md-sys-color-primary), "hover");
 }
 
 [type="radio"]:focus-visible + span::before,
 [type="radio"].tabbed:focus + span::before {
-  @include state-layer-ring(
-    var(--md-comp-radio-button-state-layer-size),
-    var(--md-comp-radio-button-icon-size),
-    var(--md-sys-color-primary),
-    "focus"
-  );
+  @include _ring(var(--md-sys-color-primary), "focus");
 }
 
 [type="radio"]:disabled + span {

package/src/sass/components/forms/_select.scss

@@ -81,9 +81,6 @@ select.browser-default {
 
   > input.menu-trigger {
     border-radius: inherit;
-  }
-
-  > input.menu-trigger {
     padding-inline-end: 52px;
   }