@expressivecss/expressive 0.3.0 → 0.5.0

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

@@ -1,103 +1,220 @@
 @use "../../abstracts" as *;
 
+// Select (exposed menu).
+//
+// 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 menu = 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  tertiary-container + 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-container-highest);
+  --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) {
+  // Match the vertical menu's 16dp surface so the closed field 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.menu-trigger {
+    border-radius: inherit;
+  }
+
+  > input.menu-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.menu-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: var(--md-comp-menu-item-selected-container-color, var(--md-sys-color-tertiary-container));
+  color: var(--md-comp-menu-item-selected-label-text-color, var(--md-sys-color-on-tertiary-container));
+  border-radius: var(--md-comp-menu-item-selected-container-shape, 12px);
 }
 
-// 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-menu) > li.selected:not(.disabled, .optgroup)::after {
+  content: "";
+  flex: 0 0 20px;
+  width: 20px;
+  height: 20px;
+  margin-inline-start: auto;
+  margin-inline-end: 8px;
+  background-color: var(--md-comp-menu-item-selected-leading-icon-color, var(--md-sys-color-on-tertiary-container));
+  mask: $_select-check center / 20px 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 {

package/src/sass/tokens/_reference.scss

@@ -42,9 +42,11 @@ $md-source: #006A79 !default;
 
 // tone -> OKLCH lightness. Fitted against the reference ramps; see the test.
 $tones: (
-  0: 0%, 10: 22.37%, 20: 30.99%, 25: 35.26%, 30: 39.48%, 35: 43.79%,
-  40: 48.14%, 50: 56.83%, 60: 65.42%, 70: 74.04%, 80: 82.63%, 90: 91.33%,
-  95: 95.62%, 98: 98.25%, 99: 99.19%, 100: 100%
+  0: 0%, 4: 8.95%, 6: 13.42%, 10: 22.37%, 12: 24.09%, 17: 28.40%,
+  20: 30.99%, 22: 32.70%, 24: 34.41%, 25: 35.26%, 30: 39.48%, 35: 43.79%,
+  40: 48.14%, 50: 56.83%, 60: 65.42%, 70: 74.04%, 80: 82.63%, 87: 88.72%,
+  90: 91.33%, 92: 93.05%, 94: 94.76%, 95: 95.62%, 96: 96.50%, 98: 98.25%,
+  99: 99.19%, 100: 100%
 ) !default;
 
 // Per-ramp hue offset from the source hue, and target chroma. Chroma is a
@@ -72,37 +74,59 @@ $ramps: (
 $sys-light: (
   "primary": "primary40", "on-primary": "primary100",
   "primary-container": "primary90", "on-primary-container": "primary10",
+  "primary-fixed": "primary90", "primary-fixed-dim": "primary80",
+  "on-primary-fixed": "primary10", "on-primary-fixed-variant": "primary30",
   "secondary": "secondary40", "on-secondary": "secondary100",
   "secondary-container": "secondary90", "on-secondary-container": "secondary10",
+  "secondary-fixed": "secondary90", "secondary-fixed-dim": "secondary80",
+  "on-secondary-fixed": "secondary10", "on-secondary-fixed-variant": "secondary30",
   "tertiary": "tertiary40", "on-tertiary": "tertiary100",
   "tertiary-container": "tertiary90", "on-tertiary-container": "tertiary10",
+  "tertiary-fixed": "tertiary90", "tertiary-fixed-dim": "tertiary80",
+  "on-tertiary-fixed": "tertiary10", "on-tertiary-fixed-variant": "tertiary30",
   "error": "error40", "on-error": "error100",
   "error-container": "error90", "on-error-container": "error10",
-  "background": "neutral99", "on-background": "neutral10",
-  "surface": "neutral99", "on-surface": "neutral10",
-  "surface-variant": "neutral-variant90", "on-surface-variant": "neutral-variant30",
+  "surface": "neutral98", "on-surface": "neutral10",
+  "on-surface-variant": "neutral-variant30",
+  "surface-dim": "neutral87", "surface-bright": "neutral98",
+  "surface-container-lowest": "neutral100", "surface-container-low": "neutral96",
+  "surface-container": "neutral94", "surface-container-high": "neutral92",
+  "surface-container-highest": "neutral90",
   "outline": "neutral-variant50", "outline-variant": "neutral-variant80",
   "inverse-surface": "neutral20", "inverse-on-surface": "neutral95",
-  "inverse-primary": "primary80", "surface-tint": "primary40",
-  "shadow": "neutral0", "scrim": "neutral0"
+  "inverse-primary": "primary80",
+  "scrim": "neutral0", "shadow": "neutral0",
+  "background": "neutral98", "on-background": "neutral10",
+  "surface-variant": "neutral-variant90", "surface-tint": "primary40"
 ) !default;
 
 $sys-dark: (
   "primary": "primary80", "on-primary": "primary20",
   "primary-container": "primary30", "on-primary-container": "primary90",
+  "primary-fixed": "primary90", "primary-fixed-dim": "primary80",
+  "on-primary-fixed": "primary10", "on-primary-fixed-variant": "primary30",
   "secondary": "secondary80", "on-secondary": "secondary20",
   "secondary-container": "secondary30", "on-secondary-container": "secondary90",
+  "secondary-fixed": "secondary90", "secondary-fixed-dim": "secondary80",
+  "on-secondary-fixed": "secondary10", "on-secondary-fixed-variant": "secondary30",
   "tertiary": "tertiary80", "on-tertiary": "tertiary20",
   "tertiary-container": "tertiary30", "on-tertiary-container": "tertiary90",
+  "tertiary-fixed": "tertiary90", "tertiary-fixed-dim": "tertiary80",
+  "on-tertiary-fixed": "tertiary10", "on-tertiary-fixed-variant": "tertiary30",
   "error": "error80", "on-error": "error20",
   "error-container": "error30", "on-error-container": "error90",
-  "background": "neutral10", "on-background": "neutral90",
-  "surface": "neutral10", "on-surface": "neutral90",
-  "surface-variant": "neutral-variant30", "on-surface-variant": "neutral-variant80",
+  "surface": "neutral6", "on-surface": "neutral90",
+  "on-surface-variant": "neutral-variant80",
+  "surface-dim": "neutral6", "surface-bright": "neutral24",
+  "surface-container-lowest": "neutral4", "surface-container-low": "neutral10",
+  "surface-container": "neutral12", "surface-container-high": "neutral17",
+  "surface-container-highest": "neutral22",
   "outline": "neutral-variant60", "outline-variant": "neutral-variant30",
   "inverse-surface": "neutral90", "inverse-on-surface": "neutral10",
-  "inverse-primary": "primary40", "surface-tint": "primary80",
-  "shadow": "neutral0", "scrim": "neutral0"
+  "inverse-primary": "primary40",
+  "scrim": "neutral0", "shadow": "neutral0",
+  "background": "neutral6", "on-background": "neutral90",
+  "surface-variant": "neutral-variant30", "surface-tint": "primary80"
 ) !default;
 
 :root {

package/src/sass/tokens/_theme.scss

@@ -1,7 +1,9 @@
+@use "../abstracts" as *;
+
 // Maps the resolved pairs from tokens/_reference.scss onto the live
 // --md-sys-color-* names that the rest of the framework consumes.
 //
-// This file used to spell out all 30 tokens four times - once for the light
+// This file used to spell out all tokens four times - once for the light
 // default, once inside @media (prefers-color-scheme: dark), and once for each
 // of :root[theme='light'] / [theme='dark'] - because a custom property can
 // only hold one value per selector. light-dark() holds both, so the mapping is
@@ -18,18 +20,6 @@
 // They are the documented way to re-theme the framework (see the docs' Themes
 // page) and several components reference them directly.
 
-$sys-color-roles: (
-  "primary", "on-primary", "primary-container", "on-primary-container",
-  "secondary", "on-secondary", "secondary-container", "on-secondary-container",
-  "tertiary", "on-tertiary", "tertiary-container", "on-tertiary-container",
-  "error", "on-error", "error-container", "on-error-container",
-  "outline", "outline-variant",
-  "background", "on-background",
-  "surface", "on-surface", "surface-variant", "on-surface-variant",
-  "inverse-surface", "inverse-on-surface", "inverse-primary",
-  "shadow", "surface-tint", "scrim"
-) !default;
-
 :root, :host {
   // `light dark` means: follow the OS unless an ancestor says otherwise.
   color-scheme: light dark;
@@ -45,5 +35,7 @@ $sys-color-roles: (
 /* ===================================================================== Themes */
 
 // Opting out of the OS preference. Every token above re-resolves from these.
+// `auto` is the explicit follow-OS value — same as omitting the attribute.
 :root[theme='light'] { color-scheme: light; }
 :root[theme='dark'] { color-scheme: dark; }
+:root[theme='auto'] { color-scheme: light dark; }

package/src/sass/utilities/_colors.scss

@@ -1,74 +1,16 @@
-.primary { background-color: var(--md-sys-color-primary); }
-.primary-text { color: var(--md-sys-color-primary); }
-.on-primary { background-color: var(--md-sys-color-on-primary); }
-.on-primary-text { color: var(--md-sys-color-on-primary); }
-.primary-container { background-color: var(--md-sys-color-primary-container); }
-.primary-container-text { color: var(--md-sys-color-primary-container); }
-.on-primary-container { background-color: var(--md-sys-color-on-primary-container); }
-.on-primary-container-text { color: var(--md-sys-color-on-primary-container); }
-
-.secondary { background-color: var(--md-sys-color-secondary); }
-.secondary-text { color: var(--md-sys-color-secondary); }
-.on-secondary { background-color: var(--md-sys-color-on-secondary); }
-.on-secondary-text { color: var(--md-sys-color-on-secondary); }
-.secondary-container { background-color: var(--md-sys-color-secondary-container); }
-.secondary-container-text { color: var(--md-sys-color-secondary-container); }
-.on-secondary-container { background-color: var(--md-sys-color-on-secondary-container); }
-.on-secondary-container-text { color: var(--md-sys-color-on-secondary-container); }
-
-.tertiary { background-color: var(--md-sys-color-tertiary); }
-.tertiary-text { color: var(--md-sys-color-tertiary); }
-.on-tertiary { background-color: var(--md-sys-color-on-tertiary); }
-.on-tertiary-text { color: var(--md-sys-color-on-tertiary); }
-.tertiary-container { background-color: var(--md-sys-color-tertiary-container); }
-.tertiary-container-text { color: var(--md-sys-color-tertiary-container); }
-.on-tertiary-container { background-color: var(--md-sys-color-on-tertiary-container); }
-.on-tertiary-container-text { color: var(--md-sys-color-on-tertiary-container); }
-
-.error { background-color: var(--md-sys-color-error); }
-.error-text { color: var(--md-sys-color-error); }
-.on-error { background-color: var(--md-sys-color-on-error); }
-.on-error-text { color: var(--md-sys-color-on-error); }
-.error-container { background-color: var(--md-sys-color-error-container); }
-.error-container-text { color: var(--md-sys-color-error-container); }
-.on-error-container { background-color: var(--md-sys-color-on-error-container); }
-.on-error-container-text { color: var(--md-sys-color-on-error-container); }
-
-.background { background-color: var(--md-sys-color-background); }
-.background-text { color: var(--md-sys-color-background); }
-.on-background { background-color: var(--md-sys-color-on-background); }
-.on-background-text { color: var(--md-sys-color-on-background); }
-
-.surface { background-color: var(--md-sys-color-surface); }
-.surface-text { color: var(--md-sys-color-surface); }
-.on-surface { background-color: var(--md-sys-color-on-surface); }
-.on-surface-text { color: var(--md-sys-color-on-surface); }
-
-.surface-variant { background-color: var(--md-sys-color-surface-variant); }
-.surface-variant-text { color: var(--md-sys-color-surface-variant); }
-.on-surface-variant { background-color: var(--md-sys-color-on-surface-variant); }
-.on-surface-variant-text { color: var(--md-sys-color-on-surface-variant); }
-
-.outline { background-color: var(--md-sys-color-outline); }
-.outline-text { color: var(--md-sys-color-outline); }
-
-.inverse-on-surface { background-color: var(--md-sys-color-inverse-on-surface); }
-.inverse-on-surface-text { color: var(--md-sys-color-inverse-on-surface); }
-
-.inverse-surface { background-color: var(--md-sys-color-inverse-surface); }
-.inverse-surface-text { color: var(--md-sys-color-inverse-surface); }
-
-.inverse-primary { background-color: var(--md-sys-color-inverse-primary); }
-.inverse-primary-text { color: var(--md-sys-color-inverse-primary); }
-
-.shadow { background-color: var(--md-sys-color-shadow); }
-.shadow-text { color: var(--md-sys-color-shadow); }
-
-.surface-tint { background-color: var(--md-sys-color-surface-tint); }
-.surface-tint-text { color: var(--md-sys-color-surface-tint); }
-
-.outline-variant { background-color: var(--md-sys-color-outline-variant); }
-.outline-variant-text { color: var(--md-sys-color-outline-variant); }
-
-.scrim { background-color: var(--md-sys-color-scrim); }
-.scrim-text { color: var(--md-sys-color-scrim); }
+@use "../abstracts" as *;
+
+// One fill class and one `-text` foreground class per color role.
+// Generated from $sys-color-roles so this file cannot drift from the
+// token layer. Pair a fill with its `on-*` text class — container
+// roles are fills, not text; `on-*` roles are text/icons, not fills.
+
+@each $role in $sys-color-roles {
+  .#{$role} {
+    background-color: var(--md-sys-color-#{$role});
+  }
+
+  .#{$role}-text {
+    color: var(--md-sys-color-#{$role});
+  }
+}

package/src/sass/utilities/_helpers.scss

@@ -7,12 +7,10 @@
 // Positioning
 .valign-wrapper { display: flex; align-items: center; }
 
-.clearfix { clear: both; }
-
 // Text alignment
 .left-align { text-align: left; }
 .right-align { text-align: right }
-.center, .center-align { text-align: center; }
+.center-align { text-align: center; }
 
 // TODO: Remove this
 .left { float: left !important; }

package/src/sass/utilities/_typescale.scss

@@ -38,8 +38,3 @@ $typescale-roles: (
 .upper { text-transform: uppercase; }
 .lower { text-transform: lowercase; }
 .capitalize { text-transform: capitalize; }
-
-// Body-size aliases when the element is not a <p> / <small>.
-.large-text { @include typescale("body-large"); }
-.medium-text { @include typescale("body-medium"); }
-.small-text { @include typescale("body-small"); }

package/src/sass/utilities/_visibility.scss

@@ -1,11 +1,11 @@
 @use "../abstracts" as *;
 
 // Showing and hiding, globally and per breakpoint.
-// Breakpoint strings ($small-and-down, ...) come from abstracts/_variables.scss.
+// Queries come from bp-up / bp-down / bp-between in abstracts/_breakpoints.scss.
 
 .hide { display: none !important; }
 
-.hide-on-small-only, .hide-on-small-and-down {
+.hide-on-small-only {
   @include bp-down("small") { display: none !important; }
 }
 
@@ -31,10 +31,18 @@
   @include bp-up("xlarge") { display: none !important; }
 }
 
+.hide-on-xxl-only {
+  @include bp-up("xxlarge") { display: none !important; }
+}
+
 .show-on-extra-large {
   @include bp-up("xlarge") { display: block !important; }
 }
 
+.show-on-xxl {
+  @include bp-up("xxlarge") { display: block !important; }
+}
+
 .show-on-large {
   @include bp-up("large") { display: block !important; }
 }