@expressivecss/expressive 0.3.0 → 0.4.0

package/src/sass/components/_tapTarget.scss

@@ -11,8 +11,6 @@
 //   --md-comp-tap-target-supporting-color
 //   --md-comp-tap-target-duration       300ms
 //   --md-comp-tap-target-easing         soft ease-in-out
-//
-// .feature-discovery is an alias of .tap-target.
 
 .tap-target-wrapper {
   --md-comp-tap-target-size: 480px;
@@ -53,8 +51,7 @@
   pointer-events: none;
   transition-delay: 0s;
 
-  .tap-target,
-  .feature-discovery {
+  .tap-target {
     transform: scale(1);
     opacity: 1;
   }
@@ -69,8 +66,7 @@
   }
 }
 
-.tap-target,
-.feature-discovery {
+.tap-target {
   position: absolute;
   inset: 0;
   display: grid;

package/src/sass/components/_toast.scss

@@ -2,10 +2,10 @@
 
 // Snackbars (toasts).
 //
-// Anatomy is the HTML. A .snackbar / .toast is the container. A <p> (or
-// <span>, or loose text) is the supporting text. A trailing <button> is
-// the action; a .circle button is the optional close. An optional leading
-// <i> is an icon. .toast-action stays as an alias on the action control.
+// Anatomy is the HTML. A .snackbar is the container. A <p> (or <span>,
+// or loose text) is the supporting text. A trailing <button> is the
+// action; a .circle button is the optional close. An optional leading
+// <i> is an icon.
 //
 // Tokens follow https://m3.material.io/components/snackbar/specs
 //   container    inverse-surface, 4dp corners, elevation 3, min 48dp
@@ -15,11 +15,10 @@
 //   close        24dp icon, inverse-on-surface
 //   inset        8dp compact, 24dp from start+bottom on larger screens
 //
-// The constructor always adds both .toast and .snackbar. A static
-// .snackbar is in-flow (docs previews). .active pins it to the viewport.
-// There is no AutoInit and no toast() helper.
+// The constructor adds .snackbar. A static .snackbar is in-flow (docs
+// previews). .active pins it to the viewport. There is no AutoInit.
 
-$_bar: ":is(.toast, .snackbar)";
+$_bar: ".snackbar";
 
 #toast-container {
   --md-comp-snackbar-container-margin-leading: 8px;
@@ -128,7 +127,7 @@ $_bar: ":is(.toast, .snackbar)";
   }
 
   // Inline links in the supporting text use the action color.
-  a:not(.button, .toast-action) {
+  a:not(.button) {
     color: var(--md-comp-snackbar-action-label-text-color);
   }
 
@@ -147,8 +146,8 @@ $_bar: ":is(.toast, .snackbar)";
   }
 
   // Text action — inverse-primary, not the filled common-button default.
-  > :is(button, a.button, a.toast-action, .toast-action):not(.circle),
-  > nav > :is(button, a.button, a.toast-action, .toast-action):not(.circle) {
+  > :is(button, a.button):not(.circle),
+  > nav > :is(button, a.button):not(.circle) {
     flex: 0 0 auto;
     height: 40px;
     min-width: 48px;

package/src/sass/components/_toolbar.scss

@@ -49,7 +49,7 @@ nav.toolbar {
 
   // Actions — transparent at rest so they sit on the container, not filled.
   // .extra is the 56dp FAB; leave it alone so a docked bar can embed one.
-  > :is(a, button):not(.btn-floating, .extra) {
+  > :is(a, button):not(.extra) {
     box-sizing: border-box;
     display: inline-flex;
     flex: 0 0 auto;
@@ -103,7 +103,7 @@ nav.toolbar {
   }
 
   // Icon-only — .circle, or an <i> with no <span> sibling.
-  > :is(a, button):not(.btn-floating, .extra):is(.circle, :has(> i):not(:has(> span))) {
+  > :is(a, button):not(.extra):is(.circle, :has(> i):not(:has(> span))) {
     width: var(--md-comp-toolbar-action-size);
     padding: 0;
     border-radius: 50%;

package/src/sass/components/_tooltip.scss

@@ -14,11 +14,9 @@
 //   gap      4dp from the activator
 //
 // The JS plugin still exists: .tooltipped + data-tooltip, AutoInit,
-// class .tooltip.material-tooltip appended to <body>. .material-tooltip
-// is an alias. There is no data-html / unsafeHTML.
+// class .tooltip appended to <body>. There is no data-html / unsafeHTML.
 
-.tooltip,
-.material-tooltip {
+.tooltip {
   --md-comp-plain-tooltip-container-color: var(--md-sys-color-inverse-surface);
   --md-comp-plain-tooltip-supporting-text-color: var(--md-sys-color-inverse-on-surface);
   --md-comp-plain-tooltip-container-shape: 4px;
@@ -109,8 +107,7 @@
 
 // JS plugin: appended to <body>, top/left set in script. Do not use the
 // child-positioning rules; they would fight the inline transform.
-body > .tooltip,
-.material-tooltip {
+body > .tooltip {
   position: absolute;
   left: 0;
   top: 0;
@@ -121,9 +118,7 @@ body > .tooltip,
 
 // Rich tooltip — title, supporting text, optional action.
 .tooltip.rich,
-.tooltip.max,
-.material-tooltip.rich,
-.material-tooltip.max {
+.tooltip.max {
   --md-comp-rich-tooltip-container-color: var(--md-sys-color-surface);
   --md-comp-rich-tooltip-container-shape: 12px;
 

package/src/sass/components/_transitions.scss

@@ -1,10 +1,5 @@
 @use "../abstracts" as *;
 
-// Starting states for JS-driven animations: Sidenav staggers its list items in,
-// and .fade-in is applied before an element is animated into view.
-ul.staggered-list li { opacity: 0; }
-.fade-in { opacity: 0; transform-origin: 0 50%; }
-
 .scale-transition {
   transition: transform .3s cubic-bezier(0.53, 0.01, 0.36, 1.63) !important;
 

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

@@ -7,11 +7,6 @@
 @forward 'range';
 @forward 'fieldset';
 
-// Remove Focus Boxes
-select:focus {
-  outline: 1px solid var(--md-ref-palette-primary80);
-}
-
 label {
   font-size: .8rem;
   color: var(--md-sys-color-on-surface-variant);

package/src/sass/components/forms/_input-fields.scss

@@ -2,14 +2,17 @@
 
 // Text fields.
 //
-// Anatomy is the HTML. .field (or .input-field) is the container. The
-// <label> after the control is the floating label. A leading <i> is the
-// leading icon. <small> is supporting text. .outlined / .border is the
-// outlined variant; the default is filled.
+// Anatomy is the HTML. .field is the container. The <label> after the
+// control is the floating label. A leading <i> (or .prefix) is the
+// leading icon; .suffix (or a second / trailing <i>) is the trailing
+// icon. Icons come before the control in the documented markup, so
+// trailing cannot be selected with :last-child — that left .suffix
+// in flow above the well. <small> is supporting text. .outlined is
+// the outlined variant; the default is filled.
 //
 // Tokens follow https://m3.material.io/components/text-fields/specs
-//   filled     surface-variant well, 4dp top corners, 1dp/2dp bottom indicator
-//   outlined   1dp/2dp outline, 4dp corners
+//   filled     surface-variant well, 1rem corners, 1dp/2dp bottom indicator
+//   outlined   1dp/2dp outline, 1rem corners
 //   height     56dp
 //   label      body-large rest, body-small floated
 //   input      body-large / on-surface
@@ -34,21 +37,23 @@ $_text-inputs: "input:not([type]):not(.browser-default), input[type=text]:not(.b
   font-family: $font-stack;
 }
 
-.field,
-.input-field {
+.field {
   --md-comp-filled-text-field-container-color: var(--md-sys-color-surface-variant);
+  --md-comp-filled-text-field-container-shape: 1rem;
   --md-comp-filled-text-field-caret-color: var(--md-sys-color-primary);
   --input-color: var(--md-comp-filled-text-field-caret-color);
 
   position: relative;
   clear: both;
 
-  input:not([type="range"]),
+  // Checkboxes / radios inside a field (multi-select menu) are not text
+  // fields — do not give them the 56dp well.
+  input:not([type="range"], [type="checkbox"], [type="radio"], [type="file"]),
   textarea {
     box-sizing: border-box;
     padding: 20px 16px 8px;
     border: none;
-    border-radius: 4px 4px 0 0;
+    border-radius: var(--md-comp-filled-text-field-container-shape);
     border-bottom: 1px solid var(--md-sys-color-on-surface-variant);
     background-color: var(--md-comp-filled-text-field-container-color);
     caret-color: var(--input-color);
@@ -67,16 +72,16 @@ $_text-inputs: "input:not([type]):not(.browser-default), input[type=text]:not(.b
     }
 
     &:focus:not([readonly]) + label,
-    &:focus:not([readonly]) + span:not(.supporting-text, .character-counter) {
+    &:focus:not([readonly]) + span:not(.supporting-text, .character-counter, .caret) {
       color: var(--input-color);
     }
 
     &:focus:not([readonly]) + label,
     &:not([placeholder=" "]) + label,
     &:not(:placeholder-shown) + label,
-    &:focus:not([readonly]) + span:not(.supporting-text, .character-counter),
-    &:not([placeholder=" "]) + span:not(.supporting-text, .character-counter),
-    &:not(:placeholder-shown) + span:not(.supporting-text, .character-counter) {
+    &:focus:not([readonly]) + span:not(.supporting-text, .character-counter, .caret),
+    &:not([placeholder=" "]) + span:not(.supporting-text, .character-counter, .caret),
+    &:not(:placeholder-shown) + span:not(.supporting-text, .character-counter, .caret) {
       transform: scale(calc(12 / 16));
       top: 8px;
     }
@@ -119,7 +124,7 @@ $_text-inputs: "input:not([type]):not(.browser-default), input[type=text]:not(.b
   }
 
   > label,
-  > span:not(.supporting-text, .character-counter, .file-path) {
+  > span:not(.supporting-text, .character-counter, .file-path, .caret) {
     color: var(--md-sys-color-on-surface-variant);
     user-select: none;
     position: absolute;
@@ -152,10 +157,11 @@ $_text-inputs: "input:not([type]):not(.browser-default), input[type=text]:not(.b
     font-family: $font-stack;
   }
 
-  > i:first-child:not(.suffix),
-  > .prefix {
+  // Shared icon box. Position is set on the leading / trailing rules;
+  // a lone <i> matches several of the :is() items and must not pick
+  // a side here.
+  > i:is(.prefix, .suffix, :first-of-type, :last-of-type, :last-child) {
     position: absolute;
-    left: 12px;
     top: 16px;
     display: flex;
     align-items: center;
@@ -165,53 +171,44 @@ $_text-inputs: "input:not([type]):not(.browser-default), input[type=text]:not(.b
     line-height: 24px;
     color: var(--md-sys-color-on-surface-variant);
     user-select: none;
+  }
+
+  > i:first-of-type:not(.suffix):not(:last-child),
+  > i.prefix {
+    left: 12px;
     pointer-events: none;
   }
 
-  > .suffix,
-  > i.suffix {
-    position: absolute;
+  > i.suffix,
+  > i:last-of-type:not(:first-of-type),
+  > i:last-child:not(:first-child):not(.prefix) {
     right: 12px;
-    top: 16px;
-    display: flex;
-    align-items: center;
-    font-size: 24px;
-    width: 24px;
-    height: 24px;
-    line-height: 24px;
-    color: var(--md-sys-color-on-surface-variant);
-    user-select: none;
   }
 
-  > i:first-child:not(.suffix) ~ input,
-  > i:first-child:not(.suffix) ~ textarea,
-  > .prefix ~ input,
-  > .prefix ~ textarea {
-    padding-left: 52px;
-  }
+  &:has(> i:first-of-type:not(.suffix):not(:last-child), > i.prefix) {
+    > :is(input, textarea) {
+      padding-left: 52px;
+    }
 
-  > .suffix ~ input,
-  > .suffix ~ textarea,
-  > i.suffix ~ input,
-  > i.suffix ~ textarea {
-    padding-right: 52px;
+    > :is(label, span:not(.supporting-text, .character-counter, .file-path, .caret)) {
+      left: 52px;
+    }
   }
 
-  > i:first-child:not(.suffix) ~ label,
-  > i:first-child:not(.suffix) ~ span:not(.supporting-text, .character-counter),
-  > .prefix ~ label {
-    left: 52px;
+  &:has(> i.suffix, > i:last-of-type:not(:first-of-type), > i:last-child:not(:first-child):not(.prefix)) {
+    > :is(input, textarea) {
+      padding-right: 52px;
+    }
   }
 
-  &.outlined,
-  &.border {
+  &.outlined {
     > input,
     > textarea {
       padding-top: 8px;
       padding-bottom: 8px;
       background-color: transparent;
       border: 1px solid var(--md-sys-color-outline);
-      border-radius: 4px;
+      border-radius: var(--md-comp-filled-text-field-container-shape);
 
       &:focus:not([readonly]) {
         border-width: 2px;
@@ -223,9 +220,9 @@ $_text-inputs: "input:not([type]):not(.browser-default), input[type=text]:not(.b
       &:focus:not([readonly]) + label,
       &:not([placeholder=" "]) + label,
       &:not(:placeholder-shown) + label,
-      &:focus:not([readonly]) + span:not(.supporting-text, .character-counter),
-      &:not([placeholder=" "]) + span:not(.supporting-text, .character-counter),
-      &:not(:placeholder-shown) + span:not(.supporting-text, .character-counter) {
+      &:focus:not([readonly]) + span:not(.supporting-text, .character-counter, .caret),
+      &:not([placeholder=" "]) + span:not(.supporting-text, .character-counter, .caret),
+      &:not(:placeholder-shown) + span:not(.supporting-text, .character-counter, .caret) {
         top: -8px;
         left: 16px;
         margin-left: -4px;
@@ -253,7 +250,7 @@ $_text-inputs: "input:not([type]):not(.browser-default), input[type=text]:not(.b
 }
 
 .searchbar {
-  .prefix {
+  > i:first-child {
     position: absolute;
     padding-left: 1rem;
     top: 0;

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

@@ -1,103 +1,218 @@
 @use "../../abstracts" as *;
 
+// Select (exposed dropdown).
+//
+// Anatomy is the HTML. A <select> is the control. FormSelect wraps it
+// in .field (or reuses an existing one) and paints a text field + menu.
+// .browser-default keeps the native control. .caret is the trailing
+// expand icon (CSS, not an SVG node).
+//
+// Tokens follow https://m3.material.io/components/menus/overview
+// (exposed dropdown = text field + menu) and the filled/outlined field
+// tokens in _input-fields.scss.
+//   field          56dp, same chrome as .field
+//   trailing icon  24dp, 12dp from the end, rotates when open
+//   selected item  10% on-surface + trailing check
+//   optgroup       on-surface-variant, outline-variant rule
+//
+$_select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
+$_select-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
+
+// Native / no-js / .browser-default: a 56dp field, not a 3rem box.
+select {
+  --md-comp-filled-select-container-color: var(--md-sys-color-surface-variant);
+  --md-comp-filled-select-container-shape: 1rem;
+  --md-comp-filled-select-input-text-color: var(--md-sys-color-on-surface);
+
+  box-sizing: border-box;
+  width: 100%;
+  height: 56px;
+  margin: 0;
+  padding: 16px 12px;
+  border: 1px solid var(--md-sys-color-outline);
+  border-radius: var(--md-comp-filled-select-container-shape);
+  background-color: var(--md-comp-filled-select-container-color);
+  color: var(--md-comp-filled-select-input-text-color);
+  @include typescale("body-large");
+  font-family: $font-stack;
+
+  &:focus {
+    outline: 2px solid var(--md-sys-color-primary);
+    outline-offset: 2px;
+    border-color: var(--md-sys-color-primary);
+  }
+
+  &:disabled {
+    color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
+    border-color: color-mix(in oklab, var(--md-sys-color-on-surface) 12%, transparent);
+    background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 4%, transparent);
+  }
+}
+
 select.browser-default {
   opacity: 1;
-  color: var(--md-sys-color-on-background);
 }
 
-// TODO: Change to ".select" and not use tag name directly
-// Keep selects useable without javascript
+@supports (appearance: base-select) {
+  select.browser-default,
+  select.browser-default::picker(select) {
+    appearance: base-select;
+  }
 
-select {
-  background-color: var(--md-sys-color-surface);
-  width: 100%;
-  padding: 5px;
-  border: 1px solid var(--md-sys-color-outline-variant);
-  border-radius: 2px;
-  height: 3rem;
+  select.browser-default::picker(select) {
+    border: none;
+    border-radius: var(--md-comp-menu-container-shape, 1rem);
+    background-color: var(--md-sys-color-surface);
+    color: var(--md-sys-color-on-surface);
+    @include z-depth("2");
+  }
 }
 
-.select-wrapper:focus-within {
-  outline: 2px solid var(--md-sys-color-primary);
-  border-radius: 4px;
-}
+.field:has(> .hide-select) {
+  // BeerCSS menu: 1rem surface, stadium items. Same radius on the
+  // field so the closed control and the open list read as one shape.
+  --md-comp-filled-select-container-shape: 1rem;
+  --md-comp-menu-container-shape: 1rem;
+  --md-comp-filled-select-trailing-icon-size: 24px;
+  --md-comp-filled-select-trailing-icon-color: var(--md-sys-color-on-surface-variant);
+  --md-comp-menu-item-leading-image-size: 40px;
 
-.select-wrapper {
   position: relative;
+  border-radius: var(--md-comp-filled-select-container-shape);
 
+  > input.dropdown-trigger {
+    border-radius: inherit;
+  }
+
+  > input.dropdown-trigger {
+    padding-inline-end: 52px;
+  }
+
+  // Trailing expand icon. Empty .caret is the hook; the glyph is a mask.
+  // `left: auto` beats `.field > span { left: 16px }` if that rule ever
+  // matches again — left + width would otherwise ignore inset-inline-end
+  // and pin the chevron over the value.
   .caret {
     position: absolute;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    margin: auto 0;
-    z-index: 0;
-    fill: var(--md-sys-color-on-background);
+    inset-block-start: 16px;
+    inset-inline-start: auto;
+    left: auto;
+    inset-inline-end: 12px;
+    z-index: 1;
+    width: var(--md-comp-filled-select-trailing-icon-size);
+    height: var(--md-comp-filled-select-trailing-icon-size);
+    margin: 0;
     pointer-events: none;
+    background-color: var(--md-comp-filled-select-trailing-icon-color);
+    mask: $_select-chevron center / 24px no-repeat;
+    transition: transform 0.2s ease;
+  }
+
+  &:has(> input[aria-expanded="true"]) .caret,
+  &:has(> menu:popover-open) .caret {
+    transform: rotate(180deg);
   }
 
-  // Hide select with overflow hidden instead of using display none
-  // (this prevents form validation errors with hidden form elements)
+  // Keep the native select in the field's box so constraint-validation
+  // bubbles land on the control, not at (0, 0).
   .hide-select {
-    width: 0;
-    height: 0;
-    overflow: hidden;
     position: absolute;
-    top: 0;
+    inset: 0;
+    overflow: hidden;
+    opacity: 0;
+    pointer-events: none;
     z-index: -1;
-  }
-}
 
-select:disabled {
-  color: var(--md-sys-color-on-surface);
+    select {
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      padding: 0;
+      border: 0;
+    }
+  }
 }
 
-.select-wrapper.disabled {
-  + label {
-    color: var(--md-sys-color-on-surface);
-  }
+.field:has(> .hide-select).disabled {
   .caret {
-    fill: var(--md-sys-color-on-surface);
+    background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
+  }
+
+  + label,
+  > label {
+    color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
   }
 }
 
-.select-wrapper input.select-dropdown:disabled {
-  color: var(--md-sys-color-on-surface);
+.field:has(> .hide-select) > input.dropdown-trigger:disabled {
   cursor: default;
   user-select: none;
 }
 
-.select-wrapper i {
-  color: var(--md-sys-color-on-surface);
+menu[role="listbox"] > li.disabled,
+menu[role="listbox"] > li.disabled > span,
+menu[role="listbox"] > li.optgroup {
+  color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
+}
+
+menu[role="listbox"] > li:not(.optgroup, .divider) {
+  display: flex;
+  align-items: center;
 }
 
-.select-dropdown li.disabled,
-.select-dropdown li.disabled > span,
-.select-dropdown li.optgroup {
-  color: var(--md-sys-color-on-surface);
-  //background-color: transparent;
+menu[role="listbox"] > li.selected:not(.disabled, .optgroup) {
+  background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 10%, transparent);
 }
 
-// Icons
-.select-dropdown li {
-  img {
-    height: $dropdown-item-height - 10;
-    width: $dropdown-item-height - 10;
-    margin: 5px 15px;
-    float: right;
+// Single-select: trailing check. Multi-select already has a leading checkbox.
+menu[role="listbox"]:not(.multiple-select-dropdown) > li.selected:not(.disabled, .optgroup)::after {
+  content: "";
+  flex: 0 0 24px;
+  width: 24px;
+  height: 24px;
+  margin-inline-start: auto;
+  margin-inline-end: 12px;
+  background-color: var(--md-sys-color-on-surface);
+  mask: $_select-check center / 24px no-repeat;
+}
+
+menu[role="listbox"] li img {
+  box-sizing: border-box;
+  flex: 0 0 var(--md-comp-menu-item-leading-image-size);
+  width: var(--md-comp-menu-item-leading-image-size);
+  height: var(--md-comp-menu-item-leading-image-size);
+  margin: 4px 12px;
+  object-fit: cover;
+  border-radius: 4px;
+  order: 1;
+  margin-inline-start: auto;
+
+  &.left {
+    order: 0;
+    margin-inline-start: 12px;
+    margin-inline-end: 0;
   }
 }
 
-// Optgroup styles
-.select-dropdown li.optgroup {
-  border-top: 1px solid rgba(0, 0, 0, 0.04);
-  &.selected > span {
-    color: var(--md-sys-color-on-background);
+menu[role="listbox"] li.optgroup {
+  cursor: default;
+  pointer-events: none;
+
+  &:not(:first-child) {
+    border-top: 1px solid var(--md-sys-color-outline-variant);
   }
-  & > span {
+
+  > span {
     color: var(--md-sys-color-on-surface-variant);
   }
-  & ~ li.optgroup-option {
-    padding-left: 1rem;
+}
+
+menu[role="listbox"] li.optgroup-option {
+  padding-inline-start: 1rem;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .field:has(> .hide-select) .caret {
+    transition: none;
   }
 }

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

@@ -68,13 +68,21 @@
   border: 2px solid var(--md-sys-color-outline);
   border-radius: 16px;
   background-color: var(--md-sys-color-surface-variant);
+  // Size the image to the handle. A 100% gradient keeps the circle in
+  // the middle of the track, so background-position cannot put off on
+  // the start and on on the end.
   background-image: radial-gradient(
-    circle,
-    var(--md-sys-color-outline) 0 8px,
-    transparent 8.5px
+    circle closest-side,
+    var(--md-sys-color-outline) 100%,
+    transparent 101%
   );
   background-repeat: no-repeat;
-  background-position: 8px center;
+  background-origin: padding-box;
+  background-size: var(--md-comp-switch-handle-unselected) var(--md-comp-switch-handle-unselected);
+  // Lengths only. A % in background-position is “align this point of the
+  // image with that point of the box”, so calc(100% - handle) leaves the
+  // thumb on the start and it only grows.
+  background-position: 6px 50%;
   cursor: pointer;
   transition: background-color .2s ease, background-position .2s ease,
     background-size .2s ease, border-color .2s ease, box-shadow .2s ease;
@@ -83,11 +91,16 @@
     border-color: var(--md-sys-color-primary);
     background-color: var(--md-sys-color-primary);
     background-image: radial-gradient(
-      circle,
-      var(--md-sys-color-on-primary) 0 12px,
-      transparent 12.5px
+      circle closest-side,
+      var(--md-sys-color-on-primary) 100%,
+      transparent 101%
     );
-    background-position: calc(100% - 14px) center;
+    background-size: var(--md-comp-switch-handle-selected) var(--md-comp-switch-handle-selected);
+    // padding-box is track minus the 2px border on each side; 2px inset.
+    background-position: calc(
+        var(--md-comp-switch-track-width) - 4px - 2px - var(--md-comp-switch-handle-selected)
+      )
+      50%;
   }
 
   &:hover {