@expressivecss/expressive 0.7.0 → 0.8.0

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

@@ -1,102 +1,43 @@
 import { Component, BaseOptions, InitElements, InitElement } from '../core/component';
 export interface SliderOptions extends BaseOptions {
-    /**
-     * Set to false to hide slide indicators.
-     * @default true
-     */
-    indicators: boolean;
-    /**
-     * Set height of slider.
-     * @default 400
-     */
-    height: number;
-    /**
-     * Set the duration of the transition animation in ms.
-     * @default 500
-     */
-    duration: number;
-    /**
-     * Set the duration between transitions in ms.
-     * @default 6000
-     */
-    interval: number;
-    /**
-     * If slider should pause when keyboard focus is received.
-     * @default true
-     */
-    pauseOnFocus: boolean;
-    /**
-     * If slider should pause when is hovered by a pointer.
-     * @default true
-     */
-    pauseOnHover: boolean;
-    /**
-     * Optional function used to generate ARIA label to indicators (for accessibility purposes).
-     * @param index Current index, starting from "1".
-     * @param current A which indicates whether it is the current element or not
-     * @returns a string to be used as label indicator.
-     * @default null
-     */
-    indicatorLabelFunc: (index: number, current: boolean) => string;
 }
 export declare class Slider extends Component<SliderOptions> {
-    /** Index of current slide. */
-    activeIndex: number;
-    interval: ReturnType<typeof setTimeout>;
-    eventPause: boolean;
-    _slider: HTMLUListElement;
-    _slides: HTMLLIElement[];
-    _activeSlide: HTMLLIElement;
-    _indicators: HTMLLIElement[];
-    _hovered: boolean;
-    _focused: boolean;
-    _focusCurrent: boolean;
-    _sliderId: string;
-    constructor(el: HTMLElement, options: Partial<SliderOptions>);
+    el: HTMLInputElement;
+    private _pointerDown;
+    value: HTMLElement;
+    thumb: HTMLElement;
+    constructor(el: HTMLInputElement, options: Partial<SliderOptions>);
     static get defaults(): SliderOptions;
     /**
      * Initializes instance of Slider.
      * @param el HTML element.
      * @param options Component options.
      */
-    static init(el: HTMLElement, options?: Partial<SliderOptions>): Slider;
+    static init(el: HTMLInputElement, options?: Partial<SliderOptions>): Slider;
     /**
      * Initializes instances of Slider.
      * @param els HTML elements.
      * @param options Component options.
      */
-    static init(els: InitElements<InitElement>, options?: Partial<SliderOptions>): Slider[];
-    static getInstance(el: HTMLElement): Slider;
+    static init(els: InitElements<HTMLInputElement | InitElement>, options?: Partial<SliderOptions>): Slider[];
+    static getInstance(el: HTMLInputElement): Slider;
     destroy(): void;
-    private _setupEventHandlers;
-    private _removeEventHandlers;
-    private _handleVisibilityChange;
-    private _handleIndicatorClick;
-    private _handleAutoPauseHover;
-    private _handleAutoPauseFocus;
-    private _handleAutoStartHover;
-    private _handleAutoStartFocus;
-    private _handleInterval;
-    private _animateSlide;
-    private _setSliderHeight;
-    private _setupIndicators;
-    private _removeIndicators;
-    set(index: number): void;
-    _pause(fromEvent: boolean): void;
-    /**
-     * Pause slider autoslide.
-     */
-    pause: () => void;
-    /**
-     * Start slider autoslide.
-     */
-    start: () => void;
-    /**
-     * Move to next slider.
-     */
-    next: () => void;
-    /**
-     * Move to prev slider.
-     */
-    prev: () => void;
+    _setupEventHandlers(): void;
+    _removeEventHandlers(): void;
+    _handleRangeChange: () => void;
+    _handleRangePointerDown: (e: PointerEvent) => void;
+    _handleRangeInputOrMove: () => void;
+    _handleRangePointerUp: (e: PointerEvent) => void;
+    _handleRangeRelease: () => void;
+    _setupThumb(): void;
+    _removeThumb(): void;
+    _isVertical(): boolean;
+    _host(): HTMLElement | null;
+    _clampDual(): void;
+    _fraction(el: HTMLInputElement): number;
+    _sync(): void;
+    /**
+     * Initializes every range input in the current document.
+     */
+    static Init(): void;
 }

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

@@ -58,6 +58,14 @@ export interface SnackbarOptions extends BaseOptions {
      * @default 0.8
      */
     activationPercent: number;
+    /**
+     * Any element in the tree the snackbar should render into. A Snackbar has no
+     * originating element to infer this from, so pass one when the page lives in
+     * a shadow root — the container is appended to that root instead of to
+     * `document.body`, where a root-scoped stylesheet could not reach it.
+     * @default null
+     */
+    root: HTMLElement;
 }
 export declare class Snackbar {
     /** The snackbar element. */
@@ -86,15 +94,22 @@ export declare class Snackbar {
     static _snackbars: Snackbar[];
     static _container: HTMLElement;
     static _draggedSnackbar: Snackbar;
+    /** Which pointer owns the drag in flight; a second finger is ignored. */
+    static _dragPointerId: number | null;
     constructor(options?: Partial<SnackbarOptions>);
     static get defaults(): SnackbarOptions;
     static getInstance(el: HTMLElement): Snackbar;
-    static _createContainer(): void;
+    static _createContainer(root?: HTMLElement | ShadowRoot): void;
     static _removeContainer(): void;
-    static _onDragStart(e: TouchEvent | MouseEvent): void;
-    static _onDragMove(e: TouchEvent | MouseEvent): void;
-    static _onDragEnd(): void;
-    static _xPos(e: TouchEvent | MouseEvent): number;
+    static _onDragStart(e: PointerEvent): void;
+    static _onDragMove(e: PointerEvent): void;
+    static _onDragEnd(e: PointerEvent): void;
+    /**
+     * A cancelled pointer is not a short swipe. Snap back and resume the timer
+     * without consulting the distance travelled - the browser took the gesture
+     * over, so the movement so far says nothing about what the user wanted.
+     */
+    static _onDragCancel(e: PointerEvent): void;
     /**
      * dismiss all snackbars.
      */

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

@@ -59,6 +59,18 @@ export declare class Tabs extends Component<TabsOptions> {
     _queryTabLinks(): NodeListOf<HTMLAnchorElement>;
     _handleTabClick: (e: MouseEvent) => void;
     _createIndicator(): void;
+    /**
+     * Which tab is current, for the eye and for assistive technology.
+     *
+     * The class alone is a colour. `aria-current` is the part a screen reader
+     * reads, and because tabs are navigation rather than a tablist (rule 2 -
+     * there is no keyboard model here to back a tablist), "current" is exactly
+     * the right word for it. Its *value* changes as the user clicks, which makes
+     * maintaining it the component's job, not the author's - see CONTEXT.md on
+     * static semantics versus dynamic state. Writing it once in the markup and
+     * never moving it left the old tab announcing itself as current.
+     */
+    private _setActiveTabLink;
     _setupActiveTabLink(): void;
     _setupSwipeableTabs(): void;
     _teardownSwipeableTabs(): void;

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

@@ -95,10 +95,6 @@ export interface TimepickerOptions extends BaseOptions {
      */
     displayPluginOptions: object;
 }
-type Point = {
-    x: number;
-    y: number;
-};
 export declare class Timepicker extends Component<TimepickerOptions> {
     el: HTMLInputElement;
     id: string;
@@ -110,6 +106,8 @@ export declare class Timepicker extends Component<TimepickerOptions> {
     x0: number;
     y0: number;
     moved: boolean;
+    /** Which pointer is dragging the clock hand; a second finger is ignored. */
+    private _dragPointerId;
     dx: number;
     dy: number;
     /**
@@ -161,7 +159,6 @@ export declare class Timepicker extends Component<TimepickerOptions> {
     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;
     static getInstance(el: HTMLElement): Timepicker;
     destroy(): void;
     _setupEventHandlers(): void;
@@ -169,9 +166,16 @@ export declare class Timepicker extends Component<TimepickerOptions> {
     _handleInputClick: () => void;
     _handleInputKeydown: (e: KeyboardEvent) => void;
     _handleTimeInputEnterKey: (e: KeyboardEvent) => void;
-    _handleClockClickStart: (e: any) => void;
-    _handleDocumentClickMove: (e: any) => void;
-    _handleDocumentClickEnd: (e: any) => void;
+    _handleClockClickStart: (e: PointerEvent) => void;
+    _handleDocumentClickMove: (e: PointerEvent) => void;
+    _handleDocumentClickEnd: (e: PointerEvent) => void;
+    /**
+     * A cancelled pointer is not a completed selection. The browser or the OS
+     * took the gesture over, so this only lets go of the drag - it must not run
+     * the pointer-up path, which advances hours to minutes, fires `onSelect`,
+     * and under `autoSubmit` closes the picker on a time the user never chose.
+     */
+    _handleDocumentClickCancel: (e: PointerEvent) => void;
     _insertHTMLIntoDOM(): void;
     _setupVariables(): void;
     _pickerSetup(): void;
@@ -210,4 +214,3 @@ export declare class Timepicker extends Component<TimepickerOptions> {
     cancel: () => void;
     clear: () => void;
 }
-export {};

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

@@ -1,55 +1,32 @@
-import { Edges } from './edges';
-import { Bounding } from './bounding';
+/** The part of a `DOMRect` the positioning helpers below actually read. */
+type Bounding = Pick<DOMRect, 'left' | 'top' | 'width' | 'height'>;
+/** Which edges of a container a box has crossed. */
+type Edges = {
+    top: boolean;
+    right: boolean;
+    bottom: boolean;
+    left: boolean;
+};
 /**
  * Class with utilitary functions for global usage.
  */
 export declare class Utils {
-    /** Specifies wether tab is pressed or not. */
-    static tabPressed: boolean;
-    /** Specifies wether there is a key pressed. */
-    static keyDown: boolean;
     /**
-     * Key maps.
+     * Key maps. One `KeyboardEvent.key` value each: the second entries these used
+     * to carry (`Esc`, `Up`, `Del`, ...) were IE and Edge Legacy spellings, and
+     * the support baseline excludes both.
      */
     static keys: {
-        TAB: string[];
-        ENTER: string[];
-        ESC: string[];
-        BACKSPACE: string[];
-        ARROW_UP: string[];
-        ARROW_DOWN: string[];
-        ARROW_LEFT: string[];
-        ARROW_RIGHT: string[];
-        DELETE: string[];
+        TAB: string;
+        ENTER: string;
+        ESC: string;
+        BACKSPACE: string;
+        ARROW_UP: string;
+        ARROW_DOWN: string;
+        ARROW_LEFT: string;
+        ARROW_RIGHT: string;
+        DELETE: string;
     };
-    /**
-     * Keys that count as keyboard navigation, precomputed.
-     *
-     * These handlers run at capture phase on the document for every keystroke on
-     * the page, and used to rebuild three arrays and spread them into a fourth
-     * on each one.
-     */
-    private static _navigationKeys;
-    /**
-     * Detects when a key is pressed.
-     * @param e Event instance.
-     */
-    static docHandleKeydown(e: KeyboardEvent): void;
-    /**
-     * Detects when a key is released.
-     * @param e Event instance.
-     */
-    static docHandleKeyup(e: KeyboardEvent): void;
-    /**
-     * Detects when document is focused.
-     * @param e Event instance.
-     */
-    static docHandleFocus(e: FocusEvent): void;
-    /**
-     * Detects when document is not focused.
-     * @param e Event instance.
-     */
-    static docHandleBlur(e: FocusEvent): void;
     /**
      * Run `callback` once the document is parsed.
      *
@@ -60,9 +37,39 @@ export declare class Utils {
      */
     static onDocumentReady(callback: () => void): void;
     /**
-     * Generates a unique string identifier.
+     * Generates a unique string identifier. Every caller prefixes the result and
+     * uses it as an element id, and a UUID is valid in that position.
+     *
+     * `randomUUID` is exposed only in secure contexts, and a dev server on a
+     * plain-HTTP LAN address - the usual way a page is opened on a phone - is
+     * not one. Without the fallback every component that stamps an id would
+     * throw there. The ids only have to be unique within one document, so the
+     * fallback does not need to be cryptographic.
      */
     static guid(): string;
+    /**
+     * Where an element created at runtime has to be appended to stay in the same
+     * tree as `el`. A stylesheet adopted into a shadow root cannot match a node
+     * in the document, so a portal that lands on `document.body` is unstyled
+     * whenever its origin lives in a shadow root (adr/0002).
+     *
+     * Light-DOM elements still get `document.body`, which is what escapes an
+     * ancestor's `overflow: hidden` and stacking context. Inside a shadow root
+     * both hazards come back: the host's own ancestors still form the containing
+     * block, so a transformed ancestor re-anchors `position: fixed` and a
+     * positioned one re-anchors `position: absolute`.
+     */
+    static portalRoot(el: Node): HTMLElement | ShadowRoot;
+    /**
+     * `getElementById` against the tree `el` lives in. The mirror of
+     * `portalRoot`: an id in a shadow root is invisible to
+     * `document.getElementById`, so a trigger and its target inside the same
+     * root could not find each other at all.
+     *
+     * Falls back to the document for a detached `el`, whose root is a plain
+     * element with no lookup of its own.
+     */
+    static getElementById(el: Node, id: string): HTMLElement;
     /**
      * Checks for exceeded edges
      * @param container Container element.
@@ -101,15 +108,18 @@ export declare class Utils {
      */
     static getDocumentScrollLeft(): number;
     /**
-     * Fires the given function after a certain ammount of time.
-     * @param func Function to be fired.
-     * @param wait Wait time.
-     * @param options Additional options.
+     * Trailing-edge throttle: run `func` now, then at most once per `wait` ms
+     * with the most recent arguments.
+     *
+     * This used to carry its underscore ancestor's whole configuration - leading
+     * and trailing switches, a result passthrough - and both call sites are
+     * resize handlers passing nothing but a function and a delay.
+     *
+     * Assign the return value once. `x = Utils.throttle(fn, 200)` is right;
+     * wrapping it in an arrow builds a fresh closure per event and never calls
+     * it, which is how resize handling was dead in three components.
      */
-    static throttle(func: (...args: unknown[]) => void, wait: number, options?: Partial<{
-        leading: boolean;
-        trailing: boolean;
-    }>): (...args: unknown[]) => any;
+    static throttle(func: (...args: unknown[]) => void, wait: number): (...args: unknown[]) => void;
     /**
      * Renders confirm/close buttons with callback function
      */
@@ -127,3 +137,4 @@ export declare class Utils {
         y: number;
     };
 }
+export {};

package/dist/types/index.d.ts

@@ -1,9 +1,8 @@
-export * from './components';
-export { Dialogs } from './behaviors/dialogs';
-export { BottomSheets } from './behaviors/bottomSheets';
-export { SideSheets } from './behaviors/sideSheets';
-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.7.0";
+export * from "./components";
+export { Dialogs } from "./behaviors/dialogs";
+export { BottomSheets } from "./behaviors/bottomSheets";
+export { SideSheets } from "./behaviors/sideSheets";
+export { Forms } from "./behaviors/forms";
+export { AutoInit } from "./components/registry";
+export type { AutoInitOptions } from "./components/registry";
+export declare const version = "0.8.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expressivecss/expressive",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "ExpressiveCSS - a Material Design 3 front-end framework.",
   "license": "MIT",
   "author": "BaezFJ <baezdevs@gmail.com>",
@@ -69,10 +69,20 @@
     "build:js:iife": "esbuild src/ts/index.ts --bundle --format=iife --global-name=Expressive --target=es2020 --outfile=dist/js/expressive.js --sourcemap",
     "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",
+    "build:semantics": "node scripts/gen-semantics.mjs",
+    "docs:dev": "run-s build docs:watch",
+    "docs:watch": "run-p watch:css watch:js docs:server",
+    "docs:server": "astro dev --root docs",
+    "docs:build": "run-s build docs:build:astro docs:verify",
+    "docs:build:astro": "astro build --root docs",
+    "docs:preview": "astro preview --root docs",
+    "docs:verify": "node scripts/verify-site.mjs",
     "typecheck": "tsc -p tsconfig.json --noEmit",
     "test": "run-s build:js build:css test:run",
     "test:run": "node --test",
     "test:watch": "node --test --watch",
+    "test:visual": "node visual/run.mjs",
+    "test:visual:report": "playwright show-report visual/report",
     "watch": "run-p watch:css watch:js",
     "watch:css": "sass --watch src/sass/expressive.scss:dist/css/expressive.css --style=expanded --source-map --load-path=src/sass",
     "watch:js": "esbuild src/ts/index.ts --bundle --format=iife --global-name=Expressive --target=es2020 --outfile=dist/js/expressive.js --sourcemap --watch=forever"
@@ -87,10 +97,14 @@
     "not dead"
   ],
   "devDependencies": {
+    "@playwright/test": "^1.56.0",
+    "astro": "^7.2.8",
     "esbuild": "^0.28.2",
     "jsdom": "^30.0.1",
     "npm-run-all2": "^9.0.3",
     "sass": "^1.102.0",
+    "turndown": "^7.2.4",
+    "turndown-plugin-gfm": "^1.0.2",
     "typescript": "^7.0.2"
   }
 }

package/src/sass/README.md

@@ -65,21 +65,26 @@ fine — it crosses no boundary.
 
 ## Breakpoints
 
-Four of them, in `abstracts/_breakpoints.scss`, reached through mixins:
+The five Material 3 window size classes live in
+`abstracts/_breakpoints.scss` and are reached through mixins:
 
 ```scss
-@include bp-up("small")   { }   // @media (width >= 601px)
-@include bp-down("large") { }   // @media (width < 993px)
-@include bp-between("small", "large") { }
+@include bp-up("medium") { }                    // width >= 600px
+@include bp-down("expanded") { }                // width < 840px
+@include bp-between("expanded", "large") { }   // 840px–1199px
 ```
 
-Names are `small` (601px), `large` (993px), `xlarge` (1201px), `xxlarge`
-(1601px) — the boundary a query sits on, not the size of the screen it
-targets. `xxlarge` is M3 extra-large (desktop / widescreen); the 12-column
-grid grows a `.xxl` prefix there, and `.container` lifts its 1280px cap to
-1920px. Range syntax has an 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.
+| M3 class | Width | Grid prefix |
+| --- | --- | --- |
+| Compact | `< 600px` | `.s` (default) |
+| Medium | `600–839px` | `.m` |
+| Expanded | `840–1199px` | `.l` |
+| Large | `1200–1599px` | `.xl` |
+| Extra-large | `>= 1600px` | `.xxl` |
+
+The grid prefixes remain unchanged for markup compatibility. At Extra-large,
+`.container` lifts its 1280px cap to 1920px. Range syntax uses exclusive
+comparators, so each boundary is written once without fractional max-widths.
 
 ## Theming
 
@@ -126,6 +131,51 @@ only has to set `color-scheme: dark` and all 30 tokens re-resolve — and settin
 `color-scheme` on any subtree re-themes just that subtree. `color-scheme` is
 load-bearing now; changing it is not cosmetic.
 
+## Shadow roots
+
+The sheet is supported as a shadow root's **only** stylesheet — adopted into
+`shadowRoot.adoptedStyleSheets` with no copy in the document. So a rule that
+declares a token pairs its anchor with the `:host` twin that reaches the same
+elements from inside a shadow tree:
+
+```scss
+// no - :root matches the document element and nothing else, so this token
+// is simply absent in a shadow-only load, and every declaration reading it
+// is then invalid at computed-value time
+:root { --md-comp-nav-drawer-width: 300px; }
+
+// yes
+:root, :host { --md-comp-nav-drawer-width: 300px; }
+:root[theme='dark'], :host([theme='dark']) { color-scheme: dark; }
+[vibrant], :host([vibrant]) { … }
+```
+
+An anchor is anything that can only match a document root or a descendant of
+one, which is `html` and `body` as well: a shadow root has neither inside it.
+`base/_grid.scss` put `--gap-size` on `body` and `.row` reads it without a
+fallback, so a `.row` in a shadow-only load had an invalid `gap` rather than a
+default one.
+
+`color-scheme` counts as a token here: `light-dark()` resolves against the
+element's used `color-scheme`, so an unpaired `:root[theme='dark']` means a
+shadow tree cannot be pinned to a theme the way a page can.
+
+`:host` matches nothing in a document, so pairing an anchor cannot change a
+normal load. It is not weightless, though: bare `:host` matches `:root` at
+(0,1,0), but `:host(<compound>)` adds its argument's weight on top, so
+`:host([vibrant])` is (0,2,0) against `[vibrant]`'s (0,1,0). The two arms match
+disjoint elements and never compete, so nothing in the sheet turns on it — but
+do not reach for the pairing as a way to keep specificity flat.
+
+`tests/shadow-dom.test.js` fails any rule that skips the pairing; the commitment
+behind it is `adr/0002-shadow-only-stylesheet-adoption.md`. That commitment
+covers everything *inside* the shadow root, portals included: the six places that
+create an element at runtime (Tooltip, Snackbar, Lightbox's caption, the drawer's
+drag target, and the Datepicker's two menus) route through `Utils.portalRoot()`
+and append into the originating shadow root, so no document-level copy is needed.
+The cost is that they no longer escape an ancestor's `overflow` or stacking
+context — the ADR states what that re-anchors.
+
 ## Translucent colors
 
 ```scss

package/src/sass/abstracts/_breakpoints.scss

@@ -1,38 +1,36 @@
 @use "sass:map";
 @use "sass:list";
 
-// Breakpoints, as media-query range syntax.
+// Material 3 window size classes, expressed as media-query boundaries.
 //
 // The old form built a query by interpolating a whole string:
 //
 //   $medium-and-down: "only screen and (max-width : 992.99px)";
 //   @media #{$medium-and-down} { ... }
 //
-// which needed the `.99` because `max-width: 993px` and `min-width: 993px`
-// both match at exactly 993px. Range syntax has an exclusive comparator, so
-// the fractional values are gone and the boundary is stated once:
+// which needed the `.99` because inclusive max/min queries both match on the
+// boundary pixel. Range syntax has an exclusive comparator, so fractional
+// values are unnecessary and every boundary is stated once:
 //
-//   @include bp-down("large") { ... }   ->  @media (width < 993px)
+//   @include bp-down("expanded") { ... }   ->  @media (width < 840px)
 //
 // `only screen` went with them: it existed to hide queries from Netscape 4
 // and IE, and `screen` alone excludes print anyway - which these rules never
 // wanted to do, since a hidden element should stay hidden on paper.
 
-// Boundaries, not the size of the screen they target. Column prefixes
-// s / m / l / xl / xxl sit on these in order; there is no `medium` key
-// because the tablet class is `m` and the mixin name is the boundary.
-//
-// M3 window-size classes, for the ones that line up:
-//   compact      width <  600     below "small"
-//   medium       600 ≤ width < 840   (we do not split 840 out of "small")
-//   expanded     840 ≤ width < 1200  "large" is 993, close enough
-//   large       1200 ≤ width < 1600  "xlarge"
-//   extra-large  width ≥ 1600        "xxlarge"
+// Compact starts at zero and is the unwrapped/default style. The remaining
+// entries are the exact lower bounds from the M3 adaptive-layout spec:
+//   compact       0 ≤ width <  600
+//   medium      600 ≤ width <  840
+//   expanded    840 ≤ width < 1200
+//   large      1200 ≤ width < 1600
+//   extra-large       width ≥ 1600
 $breakpoints: (
-  "small": 601px,     // phone        -> tablet
-  "large": 993px,     // tablet       -> desktop
-  "xlarge": 1201px,   // desktop      -> large desktop
-  "xxlarge": 1601px,  // large        -> extra-large / widescreen
+  "compact": 0px,
+  "medium": 600px,
+  "expanded": 840px,
+  "large": 1200px,
+  "extra-large": 1600px,
 ) !default;
 
 @function breakpoint($name) {