@expressivecss/expressive 0.2.0 → 0.4.0

package/dist/types/components/scrollspy.d.ts

@@ -1,12 +1,8 @@
-import { Component, BaseOptions, InitElements, MElement } from '../core/component';
+import { Component, BaseOptions, InitElements, InitElement } from '../core/component';
 export interface ScrollSpyOptions extends BaseOptions {
     /**
-     * Throttle of scroll handler.
-     * @default 100
-     */
-    throttle: number;
-    /**
-     * Offset for centering element when scrolled to.
+     * Offset used as IntersectionObserver rootMargin and as
+     * `--md-comp-scrollspy-offset` (scroll-margin on the section).
      * @default 200
      */
     scrollOffset: number;
@@ -16,62 +12,42 @@ export interface ScrollSpyOptions extends BaseOptions {
      */
     activeClass: string;
     /**
-     * Used to find active element.
+     * Returns a CSS selector for the TOC link. The default is unused: links
+     * are found by comparing `a[href^="#"]` to `#id`. A custom function
+     * still runs through `querySelector` (escape any author id yourself).
      * @default id => 'a[href="#' + id + '"]'
      */
     getActiveElement: (id: string) => string;
     /**
-     * Used to keep last top element active even if
-     * scrollbar goes outside of scrollspy elements.
-     *
-     * If there is no last top element,
-     * then the active one will be the first element.
-     *
+     * If true, keep the last section above the viewport active when nothing
+     * intersects. If there is no such section, the first one stays active.
      * @default false
      */
     keepTopElementActive: boolean;
-    /**
-     * Used to set scroll animation duration in milliseconds.
-     * @default null (browser's native animation implementation/duration)
-     */
-    animationDuration: number | null;
 }
+/**
+ * ScrollSpy. IntersectionObserver decides which section is current.
+ * Hash links are left to the browser (`scroll-margin` + `scroll-behavior`).
+ */
 export declare class ScrollSpy extends Component<ScrollSpyOptions> {
     static _elements: ScrollSpy[];
-    static _count: number;
-    static _increment: number;
-    static _elementsInView: ScrollSpy[];
-    static _visibleElements: HTMLElement[];
-    static _ticks: number;
-    static _keptTopActiveElement: HTMLElement | null;
-    private static _throttledScroll;
-    private static _throttledResize;
-    private tickId;
-    private id;
+    private static _observer;
+    private static _ratios;
+    private static _active;
     constructor(el: HTMLElement, options: Partial<ScrollSpyOptions>);
     static get defaults(): ScrollSpyOptions;
-    /**
-     * Initializes instance of ScrollSpy.
-     * @param el HTML element.
-     * @param options Component options.
-     */
     static init(el: HTMLElement, options?: Partial<ScrollSpyOptions>): ScrollSpy;
-    /**
-     * Initializes instances of ScrollSpy.
-     * @param els HTML elements.
-     * @param options Component options.
-     */
-    static init(els: InitElements<MElement>, options?: Partial<ScrollSpyOptions>): ScrollSpy[];
+    static init(els: InitElements<InitElement>, options?: Partial<ScrollSpyOptions>): ScrollSpy[];
     static getInstance(el: HTMLElement): ScrollSpy;
     destroy(): void;
-    _setupEventHandlers(): void;
-    _removeEventHandlers(): void;
-    static _handleTriggerClick: (e: MouseEvent) => void;
-    static _handleWindowScroll: () => void;
-    static _findElements(top: number, right: number, bottom: number, left: number): ScrollSpy[];
-    _enter(): void;
-    _exit(): void;
-    private static _resetKeptTopActiveElement;
-    private static _getDistanceToViewport;
-    private static _smoothScrollIntoView;
+    private static _ensureObserver;
+    private static _onIntersect;
+    private static _syncActive;
+    private static _nearestAbove;
+    private static _clearActive;
+    /**
+     * Default lookup compares href attributes (no interpolated selector).
+     * A custom getActiveElement still returns a selector.
+     */
+    static _linkFor(id: string, options: ScrollSpyOptions): Element | null;
 }

package/dist/types/components/select.d.ts

@@ -1,5 +1,5 @@
 import { Dropdown, DropdownOptions } from './dropdown';
-import { Component, BaseOptions, InitElements, MElement } from '../core/component';
+import { Component, BaseOptions, InitElements, InitElement } from '../core/component';
 export interface FormSelectOptions extends BaseOptions {
     /**
      * Classes to be added to the select wrapper element.
@@ -25,16 +25,18 @@ export declare class FormSelect extends Component<FormSelectOptions> {
      * Is "null", if not detected.
      */
     labelEl: HTMLLabelElement;
-    /** Dropdown UL element. */
-    dropdownOptions: HTMLUListElement;
+    /** Dropdown menu element. */
+    dropdownOptions: HTMLElement;
     /** Text input that shows current selected option. */
     input: HTMLInputElement;
     /** Instance of the dropdown plugin for this select. */
     dropdown: Dropdown;
-    /** The select wrapper element. */
+    /** The field wrapper around the native select. */
     wrapper: HTMLDivElement;
     selectOptions: (HTMLOptionElement | HTMLOptGroupElement)[];
     private _values;
+    private _createdWrapper;
+    private _originalLabelFor;
     nativeTabIndex: number;
     constructor(el: HTMLSelectElement, options: FormSelectOptions);
     static get defaults(): FormSelectOptions;
@@ -49,7 +51,7 @@ export declare class FormSelect extends Component<FormSelectOptions> {
      * @param els HTML elements.
      * @param options Component options.
      */
-    static init(els: InitElements<HTMLSelectElement | MElement>, options?: Partial<FormSelectOptions>): FormSelect[];
+    static init(els: InitElements<HTMLSelectElement | InitElement>, options?: Partial<FormSelectOptions>): FormSelect[];
     static getInstance(el: HTMLElement): FormSelect;
     destroy(): void;
     /**
@@ -57,18 +59,30 @@ export declare class FormSelect extends Component<FormSelectOptions> {
      *
      * Assigning `select.value` from script fires no `change` event, so nothing
      * else syncs the visible input text or the `.selected` state on the virtual
-     * options. Call this after mutating the underlying select programmatically.
+     * options. Adding or removing `<option>`s also requires this — the menu is
+     * rebuilt from the native list, the field and Dropdown instance stay put.
      */
     refresh(): void;
     _setupEventHandlers(): void;
     _removeEventHandlers(): void;
+    private _setupOptionHandlers;
+    private _removeOptionHandlers;
     _handleSelectChange: () => void;
     _handleOptionKeydown: (e: KeyboardEvent) => void;
     _handleOptionClick: (e: MouseEvent | KeyboardEvent) => void;
+    private _handleOptionFocus;
     _arraysEqual<T, E>(a: T[], b: (E | T)[]): boolean;
     _selectOptionElement(virtualOption: HTMLElement): void;
     _handleInputClick: () => void;
     _setupDropdown(): void;
+    private _setupWrapper;
+    private _hideNativeSelect;
+    private _buildInput;
+    private _buildCaret;
+    private _initDropdown;
+    private _nativeOptions;
+    private _buildOptions;
+    private _rebuildOptions;
     _addOptionToValues(realOption: HTMLOptionElement, virtualOption: HTMLElement): void;
     _removeDropdown(): void;
     _createAndAppendOptionWithIcon(realOption: HTMLOptionElement | HTMLOptGroupElement, type: string): HTMLLIElement;

package/dist/types/components/sidenav.d.ts

@@ -1,4 +1,4 @@
-import { Component, BaseOptions, InitElements, MElement, Openable } from '../core/component';
+import { Component, BaseOptions, InitElements, InitElement, Openable } from '../core/component';
 export interface SidenavOptions extends BaseOptions {
     /**
      * Side of screen on which Sidenav appears.
@@ -15,21 +15,6 @@ export interface SidenavOptions extends BaseOptions {
      * @default '10px'
      */
     dragTargetWidth: string;
-    /**
-     * Length in ms of enter transition.
-     * @default 250
-     */
-    inDuration: number;
-    /**
-     * Length in ms of exit transition.
-     * @default 200
-     */
-    outDuration: number;
-    /**
-     * Prevent page from scrolling while sidenav is open.
-     * @default true
-     */
-    preventScrolling: boolean;
     /**
      * Function called when sidenav starts entering.
      */
@@ -47,27 +32,30 @@ export interface SidenavOptions extends BaseOptions {
      */
     onCloseEnd: (elem: HTMLElement) => void;
 }
+/**
+ * Navigation drawer. Overlay is a modal <dialog>; fixed is a breakpoint.
+ * JS opens/closes, handles the trigger, and writes --md-comp-nav-drawer-shift
+ * while dragging. CSS owns the slide, the scrim, and the large-screen dock.
+ */
 export declare class Sidenav extends Component<SidenavOptions> implements Openable {
     id: string;
-    /** Describes open/close state of Sidenav. */
+    /** Describes open/close state of the overlay drawer. */
     isOpen: boolean;
-    /** Describes if sidenav is fixed. */
+    /** Describes if sidenav has sidenav-fixed. */
     isFixed: boolean;
     /** Describes if Sidenav is being dragged. */
     isDragged: boolean;
-    lastWindowWidth: number;
-    lastWindowHeight: number;
     static _sidenavs: Sidenav[];
-    private _overlay;
-    dragTarget: Element;
+    dragTarget: HTMLElement | null;
+    private _dialog;
+    private _createdDialog;
+    private _closing;
+    private _mql;
     private _startingXpos;
     private _xPos;
-    private _time;
     private _width;
     private _initialScrollTop;
     private _verticallyScrolling;
-    private deltaX;
-    private velocityX;
     private percentOpen;
     constructor(el: HTMLElement, options: Partial<SidenavOptions>);
     static get defaults(): SidenavOptions;
@@ -82,44 +70,41 @@ export declare class Sidenav extends Component<SidenavOptions> implements Openab
      * @param els HTML elements.
      * @param options Component options.
      */
-    static init(els: InitElements<MElement>, options?: Partial<SidenavOptions>): Sidenav[];
+    static init(els: InitElements<InitElement>, options?: Partial<SidenavOptions>): Sidenav[];
     static getInstance(el: HTMLElement): Sidenav;
     destroy(): void;
-    private _createOverlay;
+    /**
+     * Opens the overlay drawer. No-op while the sidenav is docked
+     * (sidenav-fixed at the large breakpoint).
+     */
+    open: () => void;
+    /**
+     * Closes the overlay drawer. No-op while the sidenav is docked.
+     */
+    close: () => void;
+    private _beginClose;
+    private _finishClose;
+    private _onDialogClose;
+    private _onBreakpointChange;
+    private _setupDialog;
+    private _unwrapDialog;
+    private _createDragTarget;
+    private _removeDragTarget;
+    private _setupClasses;
     private _setupEventHandlers;
     private _removeEventHandlers;
-    private _handleTriggerClick;
+    private static _handleTriggerClick;
+    private _handleCloseTriggerClick;
+    private _isDraggable;
+    private _isCurrentlyFixed;
     private _startDrag;
     private _dragMoveUpdate;
+    private _rawDelta;
+    private _applyShift;
+    private _clearShift;
     private _handleDragTargetDrag;
     private _handleDragTargetRelease;
     private _handleCloseDrag;
-    private _calculateDelta;
     private _handleCloseRelease;
-    private _handleCloseTriggerClick;
-    private _handleWindowResize;
-    private _setupClasses;
-    private _removeClasses;
-    private _setupFixed;
-    private _isDraggable;
-    private _isCurrentlyFixed;
-    private _createDragTarget;
-    private _preventBodyScrolling;
-    private _enableBodyScrolling;
-    /**
-     * Opens Sidenav.
-     */
-    open: () => void;
-    /**
-     * Closes Sidenav.
-     */
-    close: () => void;
-    private _animateIn;
-    private _animateOut;
-    private _animateSidenavIn;
-    private _animateSidenavOut;
-    private _animateOverlayIn;
-    private _animateOverlayOut;
-    private _setAriaHidden;
-    private _setTabIndex;
+    private _syncTriggers;
 }

package/dist/types/components/slider.d.ts

@@ -1,4 +1,4 @@
-import { Component, BaseOptions, InitElements, MElement } from '../core/component';
+import { Component, BaseOptions, InitElements, InitElement } from '../core/component';
 export interface SliderOptions extends BaseOptions {
     /**
      * Set to false to hide slide indicators.
@@ -65,7 +65,7 @@ export declare class Slider extends Component<SliderOptions> {
      * @param els HTML elements.
      * @param options Component options.
      */
-    static init(els: InitElements<MElement>, options?: Partial<SliderOptions>): Slider[];
+    static init(els: InitElements<InitElement>, options?: Partial<SliderOptions>): Slider[];
     static getInstance(el: HTMLElement): Slider;
     destroy(): void;
     private _setupEventHandlers;

package/dist/types/components/tabs.d.ts

@@ -1,5 +1,5 @@
 import { Carousel } from './carousel';
-import { Component, BaseOptions, InitElements, MElement } from '../core/component';
+import { Component, BaseOptions, InitElements, InitElement } from '../core/component';
 export interface TabsOptions extends BaseOptions {
     /**
      * Transition duration in milliseconds.
@@ -46,7 +46,7 @@ export declare class Tabs extends Component<TabsOptions> {
      * @param els HTML elements.
      * @param options Component options.
      */
-    static init(els: InitElements<MElement>, options?: Partial<TabsOptions>): Tabs[];
+    static init(els: InitElements<InitElement>, options?: Partial<TabsOptions>): Tabs[];
     static getInstance(el: HTMLElement): Tabs;
     destroy(): void;
     /**

package/dist/types/components/tapTarget.d.ts

@@ -1,4 +1,4 @@
-import { Component, BaseOptions, InitElements, MElement, Openable } from '../core/component';
+import { Component, BaseOptions, InitElements, InitElement, Openable } from '../core/component';
 export interface TapTargetOptions extends BaseOptions {
     /**
      * Callback function called when Tap Target is opened.
@@ -11,42 +11,29 @@ export interface TapTargetOptions extends BaseOptions {
      */
     onClose: (origin: HTMLElement) => void;
 }
+/**
+ * Tap target (Feature Discovery). Placement is CSS custom properties;
+ * the wrapper is a popover when the platform has one. This class is
+ * open/close, origin lookup, and the two geometry variables.
+ */
 export declare class TapTarget extends Component<TapTargetOptions> implements Openable {
-    /**
-     * If the tap target is open.
-     */
     isOpen: boolean;
+    originEl: HTMLElement | null;
     static _taptargets: TapTarget[];
     private wrapper;
-    private originEl;
     private waveEl;
     private contentEl;
+    private _createdWrapper;
+    private _createdWave;
+    private _usePopover;
+    private _liftedStatic;
+    private _opening;
     constructor(el: HTMLElement, options: Partial<TapTargetOptions>);
     static get defaults(): TapTargetOptions;
-    /**
-     * Initializes instance of TapTarget.
-     * @param el HTML element.
-     * @param options Component options.
-     */
     static init(el: HTMLElement, options?: Partial<TapTargetOptions>): TapTarget;
-    /**
-     * Initializes instances of TapTarget.
-     * @param els HTML elements.
-     * @param options Component options.
-     */
-    static init(els: InitElements<MElement>, options?: Partial<TapTargetOptions>): TapTarget[];
+    static init(els: InitElements<InitElement>, options?: Partial<TapTargetOptions>): TapTarget[];
     static getInstance(el: HTMLElement): TapTarget;
     destroy(): void;
-    _setupEventHandlers(): void;
-    _removeEventHandlers(): void;
-    _handleThrottledResize: (...args: unknown[]) => any;
-    _handleKeyboardInteraction: (e: KeyboardEvent) => void;
-    _handleTargetToggle: () => void;
-    _handleResize: () => void;
-    _handleDocumentClick: (e: MouseEvent | TouchEvent | KeyboardEvent) => void;
-    _setup(): void;
-    private _offset;
-    _calculatePositioning(): void;
     /**
      * Open Tap Target.
      */
@@ -55,4 +42,16 @@ export declare class TapTarget extends Component<TapTargetOptions> implements Op
      * Close Tap Target.
      */
     close: () => void;
+    private _setup;
+    private _ensureId;
+    private _labelFromHeading;
+    private _teardownDom;
+    private _setupEventHandlers;
+    private _removeEventHandlers;
+    private _handleThrottledResize;
+    private _handleOriginKeydown;
+    private _handleTargetToggle;
+    private _handleResize;
+    private _handlePopoverToggle;
+    private _calculatePositioning;
 }

package/dist/types/components/timepicker.d.ts

@@ -1,4 +1,4 @@
-import { Component, BaseOptions, InitElements, MElement, I18nOptions } from '../core/component';
+import { Component, BaseOptions, InitElements, InitElement, I18nOptions } from '../core/component';
 export type Views = 'hours' | 'minutes';
 export interface TimepickerOptions extends BaseOptions {
     /**
@@ -158,7 +158,7 @@ export declare class Timepicker extends Component<TimepickerOptions> {
      * @param els HTML elements.
      * @param options Component options.
      */
-    static init(els: InitElements<HTMLInputElement | MElement>, options?: Partial<TimepickerOptions>): Timepicker[];
+    static init(els: InitElements<HTMLInputElement | InitElement>, options?: Partial<TimepickerOptions>): Timepicker[];
     static _addLeadingZero(num: number): string;
     static _createSVGEl(name: string): SVGElement;
     static _Pos(e: TouchEvent | MouseEvent): Point;
@@ -209,7 +209,5 @@ export declare class Timepicker extends Component<TimepickerOptions> {
     confirm: () => void;
     cancel: () => void;
     clear: () => void;
-    open(): this;
-    close(): this;
 }
 export {};

package/dist/types/components/tooltip.d.ts

@@ -1,4 +1,4 @@
-import { Component, BaseOptions, InitElements, MElement } from '../core/component';
+import { Component, BaseOptions, InitElements, InitElement } from '../core/component';
 export type TooltipPosition = 'top' | 'right' | 'bottom' | 'left';
 export interface TooltipOptions extends BaseOptions {
     /**
@@ -84,7 +84,7 @@ export declare class Tooltip extends Component<TooltipOptions> {
      * @param els HTML elements.
      * @param options Component options.
      */
-    static init(els: InitElements<MElement>, options?: Partial<TooltipOptions>): Tooltip[];
+    static init(els: InitElements<InitElement>, options?: Partial<TooltipOptions>): Tooltip[];
     static getInstance(el: HTMLElement): Tooltip;
     destroy(): void;
     _appendTooltipEl(): void;

package/dist/types/core/component.d.ts

@@ -3,8 +3,8 @@
  */
 export interface BaseOptions {
 }
-export type MElement = HTMLElement | Element;
-export type InitElements<T extends MElement> = NodeListOf<T> | HTMLCollectionOf<T>;
+export type InitElement = HTMLElement | Element;
+export type InitElements<T extends InitElement> = NodeListOf<T> | HTMLCollectionOf<T>;
 type ComponentConstructor<T extends Component<O>, O extends BaseOptions> = {
     new (el: HTMLElement, options: Partial<O>): T;
 };
@@ -48,14 +48,14 @@ export declare class Component<O extends BaseOptions> {
      * @param options Component options.
      * @param classDef Class definition.
      */
-    protected static init<I extends MElement, O extends BaseOptions, C extends Component<O>>(els: InitElements<I>, options: Partial<O>, classDef: ComponentType<C, O>): C[];
+    protected static init<I extends InitElement, O extends BaseOptions, C extends Component<O>>(els: InitElements<I>, options: Partial<O>, classDef: ComponentType<C, O>): C[];
     /**
      * Initializes component instances.
      * @param els HTML elements.
      * @param options Component options.
      * @param classDef Class definition.
      */
-    protected static init<I extends MElement, O extends BaseOptions, C extends Component<O>>(els: I | InitElements<I>, options: Partial<O>, classDef: ComponentType<C, O>): C | C[];
+    protected static init<I extends InitElement, O extends BaseOptions, C extends Component<O>>(els: I | InitElements<I>, options: Partial<O>, classDef: ComponentType<C, O>): C | C[];
     /**
      * @returns default options for component instance.
      */

package/dist/types/index.d.ts

@@ -4,4 +4,4 @@ export { Forms } from './behaviors/forms';
 export { Waves } from './behaviors/waves';
 export { AutoInit } from './components/registry';
 export type { AutoInitOptions } from './components/registry';
-export declare const version = "0.2.0";
+export declare const version = "0.4.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expressivecss/expressive",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "ExpressiveCSS - a Material Design 3 front-end framework.",
   "license": "MIT",
   "author": "BaezFJ <baezdevs@gmail.com>",
@@ -69,7 +69,7 @@
     "build:js:iife-min": "esbuild src/ts/index.ts --bundle --format=iife --global-name=Expressive --target=es2020 --outfile=dist/js/expressive.min.js --minify --sourcemap",
     "build:types": "tsc -p tsconfig.build.json",
     "typecheck": "tsc -p tsconfig.json --noEmit",
-    "test": "run-s build:js test:run",
+    "test": "run-s build:js build:css test:run",
     "test:run": "node --test",
     "test:watch": "node --test --watch",
     "watch": "run-p watch:css watch:js",

package/src/sass/README.md

@@ -79,9 +79,6 @@ exclusive comparator, so the old `600.99px` / `992.99px` values used to stop
 `max-width` and `min-width` both matching on the boundary pixel are gone, and
 each boundary is written once.
 
-The interpolated-string form (`@media #{$medium-and-up}`) still compiles and now
-produces the same range queries, but it is deprecated and unused in here.
-
 ## Theming
 
 `tokens/_reference.scss` **generates** five of the six M3 tonal ramps from
@@ -195,6 +192,6 @@ unlayered declaration. Drop the flag from `.hide` and it stops beating a
 consumer's own `display` — silently, and in the common case. Classes whose whole
 job is to be unconditional (`.hide`, `.m-3`, the palette classes) keep it.
 
-The `!important` in `components/` is a different thing again: `.pushpin`,
-`.tap-target` and the preloader set JS-driven geometry that must not be
-overridable. Those stay too.
+The `!important` in `components/` is a different thing again: `.pushpin`
+sets JS-driven geometry that must not be overridable. That stays.
+Tap target and the preloader no longer need the flag.

package/src/sass/abstracts/_breakpoints.scss

@@ -51,19 +51,3 @@ $breakpoints: (
     @content;
   }
 }
-
-// Deprecated: the interpolated-string breakpoints.
-//
-// Kept so a downstream `@media #{$medium-and-up}` keeps compiling - the
-// framework itself no longer uses them. Values are now range syntax, so the
-// queries they produce match the mixins above exactly. Prefer the mixins.
-$small-screen-up: breakpoint("small") !default;
-$medium-screen-up: breakpoint("large") !default;
-$large-screen-up: breakpoint("xlarge") !default;
-
-$medium-and-up: "(width >= #{breakpoint('small')})" !default;
-$large-and-up: "(width >= #{breakpoint('large')})" !default;
-$extra-large-and-up: "(width >= #{breakpoint('xlarge')})" !default;
-$small-and-down: "(width < #{breakpoint('small')})" !default;
-$medium-and-down: "(width < #{breakpoint('large')})" !default;
-$medium-only: "(#{breakpoint('small')} <= width < #{breakpoint('large')})" !default;

package/src/sass/abstracts/_variables.scss

@@ -1,6 +1,3 @@
-// TypeScale
-$md_sys_typescale_body-large_size: 16px;
-
 @use "sass:math";
 
 // Colors
@@ -11,14 +8,6 @@ $md_sys_typescale_body-large_size: 16px;
 // value from it: this link color. Everything now comes from --md-sys-color-*.
 $link-color: var(--md-sys-color-primary) !default;
 
-// Floating buttons
-$button-floating-background: var(--md-sys-color-secondary) !default;
-$button-floating-background-hover: var(--md-ref-palette-secondary70) !default;
-$button-floating-background-focus: var(--md-ref-palette-secondary80) !default;
-$button-floating-color: var(--md-sys-color-on-secondary) !default;
-$button-floating-size: 40px !default;
-$button-floating-radius: 16px !default;
-
 // Dropdown
 $dropdown-item-height: 50px !default;
 
@@ -27,7 +16,6 @@ $dropdown-item-height: 50px !default;
 // the 600.99px / 992.99px / 1200.99px values are gone.
 
 // Grid
-$num-cols: 12 !default;
 $gutter-width: 1.5rem !default;
 $element-top-margin: math.div($gutter-width, 3) !default;
 $element-bottom-margin: math.div($gutter-width * 2, 3) !default;
@@ -40,15 +28,6 @@ $text-color: var(--md-sys-color-on-background) !default;
 // derived from it, so the two cannot drift.
 $root-font-size: 14px !default;
 
-// Legacy rem heading ladder. Headings now consume --md-sys-typescale-*
-// (see base/_typography.scss). Kept so existing Sass overrides still compile.
-$h1-fontsize: 4.2rem !default;
-$h2-fontsize: 3.56rem !default;
-$h3-fontsize: 2.92rem !default;
-$h4-fontsize: 2.28rem !default;
-$h5-fontsize: 1.64rem !default;
-$h6-fontsize: 1.15rem !default;
-
 // Flow text: font-size interpolates between these two across the viewport
 // range below. This used to be a @while loop emitting 21 media queries.
 $flow-text-min: 1.2rem !default;

package/src/sass/base/_grid.scss

@@ -23,25 +23,6 @@
   padding: 1rem 0;
 }
 
-// Mixins to eliminate code repetition
-@mixin reset-offset {
-  margin-left: auto;
-  left: auto;
-  right: auto;
-}
-
-@mixin grid-classes($size, $i, $perc) {
-  &.offset-#{$size}#{$i} {
-    margin-left: $perc;
-  }
-  &.pull-#{$size}#{$i} {
-    right: $perc;
-  }
-  &.push-#{$size}#{$i} {
-    left: $perc;
-  }
-}
-
 body {
   --gap-size: 1.5rem; // default
 }

package/src/sass/components/_badges.scss

@@ -48,9 +48,10 @@ header:has(> nav) nav a span.badge {
   -webkit-font-smoothing: auto;
 }
 
-// Line height centering
-.collection-item span.badge {
-  margin-top: calc(calc(1.5rem * 0.5) - calc(var(--bagde-height) * 0.5));
+.collection span.badge {
+  float: none;
+  margin-block: 0;
+  margin-inline-start: auto;
 }
 
 .collapsible span.badge {
@@ -62,12 +63,12 @@ header:has(> nav) nav a span.badge {
   }
 }
 
-.collapsible .active span.badge:not(.new) {
+.collapsible :is(.active, [open]) span.badge:not(.new) {
   color: var(--md-sys-color-on-surface-variant);
 }
 
 .sidenav span.badge {
-  margin-top: calc(calc(var(--sidenav-line-height) * 0.5) - calc(22px * 0.5));
+  margin-top: calc(calc(var(--md-comp-nav-drawer-line-height) * 0.5) - calc(22px * 0.5));
 }
 
 table span.badge {