@expressivecss/expressive 0.3.0 → 0.5.0

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

@@ -1,96 +0,0 @@
-import { Component, BaseOptions, InitElements, MElement } from '../core/component';
-export interface CollapsibleOptions extends BaseOptions {
-    /**
-     * If accordion versus collapsible. When omitted, `.expandable` on the
-     * element turns accordion off. `<details>` with the same `name` already
-     * exclusive-open in the browser; this option is the switch for the
-     * `<ul>/<li>` alias and assigns `name` when it is missing.
-     * @default true
-     */
-    accordion: boolean;
-    /**
-     * @deprecated Duration is CSS (`--md-comp-collapsible-duration`).
-     * Accepted so existing init calls keep compiling, and ignored.
-     * @default 300
-     */
-    inDuration: number;
-    /**
-     * @deprecated Duration is CSS (`--md-comp-collapsible-duration`).
-     * Accepted so existing init calls keep compiling, and ignored.
-     * @default 300
-     */
-    outDuration: number;
-    /**
-     * Callback function called before collapsible is opened.
-     * @default null
-     */
-    onOpenStart: (el: Element) => void;
-    /**
-     * Callback function called after collapsible is opened.
-     * @default null
-     */
-    onOpenEnd: (el: Element) => void;
-    /**
-     * Callback function called before collapsible is closed.
-     * @default null
-     */
-    onCloseStart: (el: Element) => void;
-    /**
-     * Callback function called after collapsible is closed.
-     * @default null
-     */
-    onCloseEnd: (el: Element) => void;
-}
-/**
- * Collapsible. Open/close is HTML (`<details>` / `[open]`, or `.active` on
- * the `<li>` alias). Height is CSS. This class is the public API, accordion
- * for the alias, and aria on non-native headers.
- */
-export declare class Collapsible extends Component<CollapsibleOptions> {
-    private _items;
-    private _groupName;
-    private _endTimers;
-    private _wrappedBodies;
-    constructor(el: HTMLElement, options: Partial<CollapsibleOptions>);
-    static get defaults(): CollapsibleOptions;
-    /**
-     * Initializes instance of Collapsible.
-     * @param el HTML element.
-     * @param options Component options.
-     */
-    static init(el: HTMLElement, options?: Partial<CollapsibleOptions>): Collapsible;
-    /**
-     * Initializes instances of Collapsible.
-     * @param els HTML elements.
-     * @param options Component options.
-     */
-    static init(els: InitElements<MElement>, options?: Partial<CollapsibleOptions>): Collapsible[];
-    static getInstance(el: HTMLElement): Collapsible;
-    destroy(): void;
-    /**
-     * Open collapsible section.
-     * @param index 0-based index of the section to open.
-     */
-    open: (index: number) => void;
-    /**
-     * Close collapsible section.
-     * @param index 0-based index of the section to close.
-     */
-    close: (index: number) => void;
-    private _collectItems;
-    private _setupItems;
-    private _isOpen;
-    private _setOpen;
-    private _headerOf;
-    private _wrapDetailsBodies;
-    private _unwrapDetailsBodies;
-    private _bodyOf;
-    private _syncAria;
-    private _setupEventHandlers;
-    private _removeEventHandlers;
-    private _handleClick;
-    private _handleKeydown;
-    private _handleToggle;
-    private _notify;
-    private _durationMs;
-}

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

@@ -1,45 +0,0 @@
-import { Component, BaseOptions, InitElements, MElement } from '../core/component';
-export interface ModalOptions extends BaseOptions {
-    opacity: number;
-    inDuration: number;
-    outDuration: number;
-    preventScrolling: boolean;
-    onOpenStart: (this: Modal, el: HTMLElement) => void;
-    onOpenEnd: (this: Modal, el: HTMLElement) => void;
-    onCloseStart: (el: HTMLElement) => void;
-    onCloseEnd: (el: HTMLElement) => void;
-    dismissible: boolean;
-    startingTop: string;
-    endingTop: string;
-}
-export declare class Modal extends Component<ModalOptions> {
-    #private;
-    constructor(el: HTMLElement, options: Partial<ModalOptions>);
-    static get defaults(): {
-        opacity: number;
-        inDuration: number;
-        outDuration: number;
-        onOpenStart: any;
-        onOpenEnd: any;
-        onCloseStart: any;
-        onCloseEnd: any;
-        preventScrolling: boolean;
-        dismissible: boolean;
-        startingTop: string;
-        endingTop: string;
-    };
-    static init(el: HTMLElement, options?: Partial<ModalOptions>): Modal;
-    static init(els: InitElements<MElement>, options?: Partial<ModalOptions>): Modal[];
-    static getInstance(el: HTMLElement): Modal;
-    destroy(): void;
-    _setupEventHandlers(): void;
-    _removeEventHandlers(): void;
-    _handleTriggerClick(): void;
-    _handleOverlayClick(): void;
-    _handleModalCloseClick(): void;
-    _handleKeydown(): void;
-    _handleFocus(): void;
-    open(): this;
-    close(): this;
-    static create(config: any): string | HTMLDialogElement;
-}

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

@@ -1,51 +0,0 @@
-import { Component, BaseOptions, InitElements, MElement } from '../core/component';
-export interface PushpinOptions extends BaseOptions {
-    /**
-     * The distance in pixels from the top of the page where
-     * the element becomes fixed.
-     * @default 0
-     */
-    top: number;
-    /**
-     * The distance in pixels from the top of the page where
-     * the elements stops being fixed.
-     * @default Infinity
-     */
-    bottom: number;
-    /**
-     * The offset from the top the element will be fixed at.
-     * @default 0
-     */
-    offset: number;
-    /**
-     * Callback function called when pushpin position changes.
-     * You are provided with a position string.
-     * @default null
-     */
-    onPositionChange: (position: 'pinned' | 'pin-top' | 'pin-bottom') => void;
-}
-export declare class Pushpin extends Component<PushpinOptions> {
-    static _pushpins: Pushpin[];
-    originalOffset: number;
-    constructor(el: HTMLElement, options: Partial<PushpinOptions>);
-    static get defaults(): PushpinOptions;
-    /**
-     * Initializes instance of Pushpin.
-     * @param el HTML element.
-     * @param options Component options.
-     */
-    static init(el: HTMLElement, options?: Partial<PushpinOptions>): Pushpin;
-    /**
-     * Initializes instances of Pushpin.
-     * @param els HTML elements.
-     * @param options Component options.
-     */
-    static init(els: InitElements<MElement>, options?: Partial<PushpinOptions>): Pushpin[];
-    static getInstance(el: HTMLElement): Pushpin;
-    destroy(): void;
-    static _updateElements(): void;
-    _setupEventHandlers(): void;
-    _removeEventHandlers(): void;
-    _updatePosition(): void;
-    _removePinClasses(): void;
-}

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

@@ -1,57 +0,0 @@
-import { Component, BaseOptions, InitElements, MElement, Openable } from '../core/component';
-export interface TapTargetOptions extends BaseOptions {
-    /**
-     * Callback function called when Tap Target is opened.
-     * @default null
-     */
-    onOpen: (origin: HTMLElement) => void;
-    /**
-     * Callback function called when Tap Target is closed.
-     * @default null
-     */
-    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 {
-    isOpen: boolean;
-    originEl: HTMLElement | null;
-    static _taptargets: TapTarget[];
-    private wrapper;
-    private waveEl;
-    private contentEl;
-    private _createdWrapper;
-    private _createdWave;
-    private _usePopover;
-    private _liftedStatic;
-    private _opening;
-    constructor(el: HTMLElement, options: Partial<TapTargetOptions>);
-    static get defaults(): TapTargetOptions;
-    static init(el: HTMLElement, options?: Partial<TapTargetOptions>): TapTarget;
-    static init(els: InitElements<MElement>, options?: Partial<TapTargetOptions>): TapTarget[];
-    static getInstance(el: HTMLElement): TapTarget;
-    destroy(): void;
-    /**
-     * Open Tap Target.
-     */
-    open: () => void;
-    /**
-     * 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/src/sass/components/_collapsible.scss

@@ -1,181 +0,0 @@
-@use "../abstracts" as *;
-
-// Collapsible. Anatomy is the HTML: a .collapsible of <details> with
-// <summary> headers. Same `name` on each <details> is an accordion;
-// omit it (or add .expandable) so several can stay open. The `open`
-// attribute is the preselected section.
-//
-// <ul>/<li> + .collapsible-header / .collapsible-body stay as aliases.
-// .collapsible-accordion is the default and does nothing extra.
-//
-// Tokens:
-//   --md-comp-collapsible-shape              12px
-//   --md-comp-collapsible-container-color    surface
-//   --md-comp-collapsible-outline-color      outline-variant
-//   --md-comp-collapsible-header-padding     1rem
-//   --md-comp-collapsible-body-padding       0 1rem
-//   --md-comp-collapsible-duration           500ms
-//   --md-comp-collapsible-easing-open        ease-in-out cubic
-//   --md-comp-collapsible-easing-close       ease-in-out cubic
-//   --md-comp-collapsible-icon-size          24px
-//   --md-comp-collapsible-popout-inset       24px
-//   --md-comp-collapsible-popout-gap         16px
-//
-// Nest descendants inside this block. A list-suffixed selector only
-// attaches the suffix to the last item (same bug as the icon sizes).
-
-.collapsible {
-  --md-comp-collapsible-shape: 12px;
-  --md-comp-collapsible-container-color: var(--md-sys-color-surface);
-  --md-comp-collapsible-outline-color: var(--md-sys-color-outline-variant);
-  --md-comp-collapsible-header-padding: 1rem;
-  --md-comp-collapsible-body-padding: 0 1rem;
-  --md-comp-collapsible-duration: 500ms;
-  --md-comp-collapsible-easing-open: cubic-bezier(0.65, 0, 0.35, 1);
-  --md-comp-collapsible-easing-close: cubic-bezier(0.65, 0, 0.35, 1);
-  --md-comp-collapsible-icon-size: 24px;
-  --md-comp-collapsible-popout-inset: 24px;
-  --md-comp-collapsible-popout-gap: 16px;
-
-  box-sizing: border-box;
-  padding: 0;
-  margin: $element-top-margin 0 $element-bottom-margin;
-  list-style: none;
-  overflow: hidden;
-  border: 1px solid var(--md-comp-collapsible-outline-color);
-  border-radius: var(--md-comp-collapsible-shape);
-  background-color: var(--md-comp-collapsible-container-color);
-  color: var(--md-sys-color-on-surface);
-  @include z-depth("1");
-
-  > :is(details, li) + :is(details, li) {
-    border-top: 1px solid var(--md-comp-collapsible-outline-color);
-  }
-
-  :is(summary, .collapsible-header) {
-    display: flex;
-    align-items: center;
-    box-sizing: border-box;
-    width: 100%;
-    margin: 0;
-    padding: var(--md-comp-collapsible-header-padding);
-    border: 0;
-    background: none;
-    color: inherit;
-    font: inherit;
-    font-weight: inherit;
-    line-height: 1.5;
-    text-align: start;
-    list-style: none;
-    cursor: pointer;
-    -webkit-tap-highlight-color: transparent;
-
-    &::-webkit-details-marker {
-      display: none;
-    }
-
-    @include focus-visible;
-
-    > i {
-      width: 2rem;
-      margin-right: 1rem;
-      font-size: 1.6rem;
-      line-height: 1;
-      text-align: center;
-    }
-
-    &::after {
-      content: "expand_more";
-      flex-shrink: 0;
-      margin-inline-start: auto;
-      font-family: var(--md-icon-font);
-      font-size: var(--md-comp-collapsible-icon-size);
-      font-variation-settings:
-        "FILL" var(--md-icon-fill),
-        "wght" var(--md-icon-weight),
-        "GRAD" var(--md-icon-grade),
-        "opsz" var(--md-icon-optical-size);
-      line-height: 1;
-      -webkit-font-smoothing: antialiased;
-      transition: transform var(--md-comp-collapsible-duration)
-        var(--md-comp-collapsible-easing-close);
-    }
-  }
-
-  :is(details[open] > summary, .active > .collapsible-header)::after {
-    transform: rotate(180deg);
-    transition-timing-function: var(--md-comp-collapsible-easing-open);
-  }
-
-  .collapsible-header-content {
-    flex-grow: 1;
-  }
-
-  // Shared body for the <ul> alias and for <details> (JS wraps the
-  // latter). Text stays painted and is clipped as the row shrinks.
-  .collapsible-body {
-    display: grid;
-    grid-template-rows: 0fr;
-    box-sizing: border-box;
-    padding: var(--md-comp-collapsible-body-padding);
-    overflow: hidden;
-    transition: grid-template-rows var(--md-comp-collapsible-duration)
-      var(--md-comp-collapsible-easing-close);
-
-    > * {
-      min-height: 0;
-      overflow: hidden;
-    }
-  }
-
-  .active > .collapsible-body,
-  details[open] > .collapsible-body {
-    grid-template-rows: 1fr;
-    transition-timing-function: var(--md-comp-collapsible-easing-open);
-  }
-
-  // UA `display: none` on closed details children. Keep our wrapper as
-  // a grid so 0fr can clip instead of popping the copy away.
-  details:not([open]) > .collapsible-body {
-    display: grid;
-  }
-
-  &.no-icon :is(summary, .collapsible-header)::after {
-    content: none;
-  }
-
-  &.popout {
-    overflow: visible;
-    border: 0;
-    background: transparent;
-    @include z-depth("0");
-
-    > :is(details, li) {
-      margin-inline: var(--md-comp-collapsible-popout-inset);
-      overflow: hidden;
-      border: 0;
-      border-radius: var(--md-comp-collapsible-shape);
-      background-color: var(--md-comp-collapsible-container-color);
-      transition: margin var(--md-comp-collapsible-duration)
-        var(--md-comp-collapsible-easing-close);
-      @include z-depth("1");
-    }
-
-    > :is(details, li) + :is(details, li) {
-      border-top: 0;
-    }
-
-    > :is(details[open], li.active) {
-      margin-block: var(--md-comp-collapsible-popout-gap);
-      margin-inline: 0;
-      transition-timing-function: var(--md-comp-collapsible-easing-open);
-      @include z-depth("2");
-    }
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .collapsible {
-    --md-comp-collapsible-duration: 0s;
-  }
-}

package/src/sass/components/_collection.scss

@@ -1,198 +0,0 @@
-@use "../abstracts" as *;
-
-// Collection. Anatomy is the HTML: a .collection of list items. A heading
-// as the first child of an item is the header. An <a> may be the item
-// (old <div class="collection"> markup) or live inside an <li>.
-//
-// Aliases: .collection-item, .collection-header, .with-header, .avatar,
-// .title, .secondary-content. .flush drops the boxed outline.
-//
-// Tokens:
-//   --md-comp-collection-shape              12px
-//   --md-comp-collection-container-color    surface
-//   --md-comp-collection-outline-color      outline-variant
-//   --md-comp-collection-item-height        56px
-//   --md-comp-collection-item-padding       16px
-//   --md-comp-collection-avatar-size        40px
-//
-// Nest descendants inside this block. A list-suffixed selector only
-// attaches the suffix to the last item (same bug as the icon sizes).
-
-.collection {
-  --md-comp-collection-shape: 12px;
-  --md-comp-collection-container-color: var(--md-sys-color-surface);
-  --md-comp-collection-outline-color: var(--md-sys-color-outline-variant);
-  --md-comp-collection-item-height: 56px;
-  --md-comp-collection-item-padding: 16px;
-  --md-comp-collection-avatar-size: 40px;
-
-  box-sizing: border-box;
-  padding: 0;
-  margin: $element-top-margin 0 $element-bottom-margin;
-  overflow: hidden;
-  list-style: none;
-  border: 1px solid var(--md-comp-collection-outline-color);
-  border-radius: var(--md-comp-collection-shape);
-  background-color: var(--md-comp-collection-container-color);
-  color: var(--md-sys-color-on-surface);
-
-  > * + * {
-    border-top: 1px solid var(--md-comp-collection-outline-color);
-  }
-
-  > :is(li, a, .collection-item, .collection-header) {
-    display: grid;
-    grid-template-columns: auto 1fr auto;
-    grid-template-rows: auto auto;
-    align-items: center;
-    column-gap: 16px;
-    box-sizing: border-box;
-    min-height: var(--md-comp-collection-item-height);
-    margin: 0;
-    padding: 8px var(--md-comp-collection-item-padding);
-    background-color: transparent;
-    color: inherit;
-    text-decoration: none;
-    transition: background-color 0.2s ease-out;
-
-    > :is(img, i).circle {
-      grid-column: 1;
-      grid-row: 1 / -1;
-      box-sizing: border-box;
-      width: var(--md-comp-collection-avatar-size);
-      height: var(--md-comp-collection-avatar-size);
-      overflow: hidden;
-      object-fit: cover;
-    }
-
-    > i.circle {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 20px;
-      line-height: 1;
-      color: var(--md-sys-color-on-primary-container);
-      background-color: var(--md-sys-color-primary-container);
-      text-align: center;
-    }
-
-    > .title {
-      grid-column: 2;
-      grid-row: 1;
-      min-width: 0;
-      @include typescale("title-medium");
-    }
-
-    > p {
-      grid-column: 2;
-      grid-row: 1;
-      min-width: 0;
-      margin: 0;
-      color: var(--md-sys-color-on-surface-variant);
-      @include typescale("body-medium");
-    }
-
-    > .title ~ p {
-      grid-row: 2;
-    }
-
-    > :is(.secondary-content, .badge) {
-      grid-column: 3;
-      grid-row: 1 / -1;
-      align-self: center;
-      justify-self: end;
-    }
-
-    > a:not(.secondary-content, .btn, .btn-floating, .badge) {
-      grid-column: 1 / -1;
-      display: flex;
-      align-items: center;
-      gap: 16px;
-      min-width: 0;
-      color: inherit;
-      text-decoration: none;
-
-      > .badge {
-        margin-inline-start: auto;
-      }
-    }
-  }
-
-  > :is(li, .collection-item):is(.avatar, :has(> .circle)),
-  > a:has(> .circle) {
-    min-height: 72px;
-  }
-
-  > :is(.collection-header, li:has(> :is(h1, h2, h3, h4, h5, h6))) {
-    min-height: 0;
-    padding-block: 12px;
-
-    > :is(h1, h2, h3, h4, h5, h6) {
-      grid-column: 1 / -1;
-      margin: 0;
-      @include typescale("title-medium");
-    }
-  }
-
-  > a,
-  > li > a:not(.secondary-content, .btn, .btn-floating) {
-    @include focus-visible;
-  }
-
-  > a:hover,
-  > li:has(> a:not(.secondary-content, .btn, .btn-floating):hover) {
-    background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
-  }
-
-  > :is(.active, [aria-current="page"]),
-  > li:has(> [aria-current="page"]) {
-    background-color: var(--md-sys-color-secondary-container);
-    color: var(--md-sys-color-on-secondary-container);
-
-    .secondary-content:not(.btn, .btn-floating) {
-      color: var(--md-sys-color-on-secondary-container);
-    }
-
-    span.badge:not(.new) {
-      color: var(--md-sys-color-on-secondary-container);
-    }
-  }
-
-  > :is(.disabled, [aria-disabled="true"]) {
-    pointer-events: none;
-    color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
-  }
-
-  .secondary-content {
-    float: none;
-    margin-inline-start: auto;
-    @include focus-visible;
-
-    &:not(.btn, .btn-floating) {
-      color: var(--md-sys-color-primary);
-    }
-  }
-
-  span.badge {
-    float: none;
-    margin-block: 0;
-    margin-inline-start: auto;
-  }
-
-  &.flush {
-    border: 0;
-    border-radius: 0;
-  }
-}
-
-// Keep the hook public so pages that used it outside a collection still
-// color the trailing action. Layout (no float) is owned by .collection.
-.secondary-content:not(.btn, .btn-floating) {
-  color: var(--md-sys-color-primary);
-}
-
-.collapsible .collection {
-  margin: 0;
-  border: none;
-  border-radius: 0;
-}