base

NPM 1.11.2
Overview Changelog

Description

The SpectrumElement base class as created by mixing SpectrumMixin onto LitElement provides text direction support via the CSS :dir() pseudo-class, which automatically inherits directionality from the DOM hierarchy. In a TypeScript context, it also enforces the presence of this.shadowRoot on extending components.

Usage

See it on NPM! How big is this package in your project?

yarn add @spectrum-web-components/base

When looking to leverage the SpectrumElement base class as a type and/or for extension purposes, do so via:

import { SpectrumElement } from '@spectrum-web-components/base';

export MyElement extends SpectrumElement {}

Similarly the SpectrumMixin class factory mixin is available via:

import { SpectrumMixin } from '@spectrum-web-components/base';

export MyElement extends SpectrumMixin(HTMLElement) {}

Features

dir management

Elements built from SpectrumMixin leverage the CSS :dir() pseudo-class to handle text direction. This modern approach automatically inherits directionality from the DOM hierarchy without requiring explicit dir attributes on individual components. The :dir() pseudo-class is well-supported across modern browsers and provides a performant, declarative way to manage both "left to right" (LTR) and "right to left" (RTL) content.

To manage content direction in your application, set the dir attribute on document.documentElement or on an sp-theme element. Components will automatically inherit the direction and apply appropriate RTL/LTR styles using CSS selectors like :host(:dir(rtl)) and :dir(rtl). This allows you to manage content direction in a single place while also enabling multiple content directions on the same page by scoping those content sections with sp-theme elements.

When JavaScript access to the direction value is needed, components can use the dir getter which returns getComputedStyle(this).direction (defaulting to 'ltr' if not set).

public shadowRoot!: ShadowRoot;

Elements built from SpectrumMixin assume that you will be using shadow DOM in the resulting custom element. To simplify TypeScript usage the presence of this.shadowRoot is asserted as non-null so that you have direct access to it without extended type checking.

Patch Changes

  • Updated dependencies [6f5419a]:
    • @spectrum-web-components/core@0.0.4

1.11.1

Patch Changes

  • #5993 95e1c25 Thanks @rubencarvalho! - - Fixed: Replaced wildcard exports from @spectrum-web-components/core with explicit named exports for better bundler compatibility
    • Fixed: Changed build target from ES2022 to ES2018 to support Vitest and other consumer environments
    • Fixed: Added @spectrum-web-components/core as direct dependency to @spectrum-web-components/shared to resolve module resolution issues in strict dependency environments
    • Fixed: Added @lit-labs/observers as dependency and externalized it in Vite build config
  • Updated dependencies [95e1c25]:
    • @spectrum-web-components/core@0.0.3

1.11.0

Patch Changes

  • #5866 9cb816b Thanks @rubencarvalho! - - Fixed: Added typesVersions to @spectrum-web-components/core to improve TypeScript module resolution for users with moduleResolution: "node". This provides a fallback mechanism when the exports field resolution encounters issues, ensuring type declarations are properly resolved across different TypeScript configurations.

  • Updated dependencies [283f0fe, 1d76b70, 9cb816b]:

    • @spectrum-web-components/core@0.0.2

1.10.0

Minor Changes

  • No customer-facing changes.

    Introduced architectural changes to support side-by-side development of 1st-gen and 2nd-gen components.

1.9.1

1.9.0

1.8.0

1.7.0

1.6.0

1.5.0

1.4.0

1.3.0

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.2.0 (2025-02-27)

Note: Version bump only for package @spectrum-web-components/base

1.1.2 (2025-02-12)

Note: Version bump only for package @spectrum-web-components/base

1.1.1 (2025-01-29)

Note: Version bump only for package @spectrum-web-components/base

1.1.0 (2025-01-29)

Features

  • sp-button-group: sp-button-group react to size updates (#5037) (63bc618)

1.0.1 (2024-11-11)

Note: Version bump only for package @spectrum-web-components/base

1.0.0 (2024-10-31)

Note: Version bump only for package @spectrum-web-components/base

0.49.0 (2024-10-15)

Note: Version bump only for package @spectrum-web-components/base

0.48.1 (2024-10-01)

Note: Version bump only for package @spectrum-web-components/base

0.48.0 (2024-09-17)

Note: Version bump only for package @spectrum-web-components/base

0.47.2 (2024-09-03)

Note: Version bump only for package @spectrum-web-components/base

0.47.1 (2024-08-27)

Bug Fixes

  • breadcrumbs: adjust ref directives imports (#4681) (6e7ba13)

0.47.0 (2024-08-20)

Note: Version bump only for package @spectrum-web-components/base

0.46.0 (2024-08-08)

Note: Version bump only for package @spectrum-web-components/base

0.45.0 (2024-07-30)

Note: Version bump only for package @spectrum-web-components/base

0.44.0 (2024-07-15)

Note: Version bump only for package @spectrum-web-components/base

0.43.0 (2024-06-11)

Note: Version bump only for package @spectrum-web-components/base

0.42.5 (2024-05-24)

Note: Version bump only for package @spectrum-web-components/base

0.42.4 (2024-05-14)

Bug Fixes

  • base: move lit imports to base (#4416) (b7cb07e)
  • styles,theme: add S2 tokens and theme (#4241) (a29e4a2), closes #4232 #4228

0.42.3 (2024-05-01)

Note: Version bump only for package @spectrum-web-components/base

0.42.2 (2024-04-03)

Note: Version bump only for package @spectrum-web-components/base

0.42.1 (2024-04-02)

Note: Version bump only for package @spectrum-web-components/base

0.42.0 (2024-03-19)

Note: Version bump only for package @spectrum-web-components/base

0.41.2 (2024-03-05)

Note: Version bump only for package @spectrum-web-components/base

0.41.1 (2024-02-22)

Note: Version bump only for package @spectrum-web-components/base

0.41.0 (2024-02-13)

Note: Version bump only for package @spectrum-web-components/base

0.40.5 (2024-02-05)

Note: Version bump only for package @spectrum-web-components/base

0.40.4 (2024-01-29)

Note: Version bump only for package @spectrum-web-components/base

0.40.3 (2024-01-11)

Note: Version bump only for package @spectrum-web-components/base

0.40.2 (2023-12-18)

Note: Version bump only for package @spectrum-web-components/base

0.40.1 (2023-12-05)

Note: Version bump only for package @spectrum-web-components/base

0.40.0 (2023-11-16)

Note: Version bump only for package @spectrum-web-components/base

0.39.4 (2023-11-02)

Note: Version bump only for package @spectrum-web-components/base

0.39.3 (2023-10-18)

Note: Version bump only for package @spectrum-web-components/base

0.39.2 (2023-10-13)

Note: Version bump only for package @spectrum-web-components/base

0.39.1 (2023-10-06)

Note: Version bump only for package @spectrum-web-components/base

0.39.0 (2023-09-25)

Bug Fixes

  • base: add re-export of lit/directive.js (#3616) (d2e237f)
  • base: introduce static version property for component class (#3582) (e7e2b76)

0.38.0 (2023-09-05)

Note: Version bump only for package @spectrum-web-components/base

0.37.0 (2023-08-18)

Features

  • overlay: ship Overlay API v2 (67b5d1b)

0.36.0 (2023-08-18)

Note: Version bump only for package @spectrum-web-components/base

0.35.0 (2023-07-31)

Note: Version bump only for package @spectrum-web-components/base

0.34.0 (2023-07-11)

Note: Version bump only for package @spectrum-web-components/base

0.33.2 (2023-06-14)

Note: Version bump only for package @spectrum-web-components/base

0.33.0 (2023-06-08)

Note: Version bump only for package @spectrum-web-components/base

0.32.0 (2023-06-01)

Bug Fixes

  • base: ensure streaming listener "streams" on the animation frame (1478db1)

0.31.0 (2023-05-17)

Note: Version bump only for package @spectrum-web-components/base

0.30.0 (2023-05-03)

Features

  • shared pkg versions, devmode define warning, registry-conflicts docs (6e49565)

Performance Improvements

  • reduce render cycles when managing "dir" attribute (7b28309)

0.7.5 (2023-04-05)

Performance Improvements

  • reduce render cycles when managing "dir" attribute (7b28309)

0.7.4 (2023-01-23)

Note: Version bump only for package @spectrum-web-components/base

0.7.3 (2023-01-09)

Note: Version bump only for package @spectrum-web-components/base

0.7.2 (2022-11-21)

Note: Version bump only for package @spectrum-web-components/base

0.7.1 (2022-11-14)

Note: Version bump only for package @spectrum-web-components/base

0.7.0 (2022-08-09)

Features

  • include all Dev Mode files in side effects (f70817c)

0.6.0 (2022-08-04)

Features

  • delivery dev mode messages in various packages (62370a1)

0.5.8 (2022-06-29)

Bug Fixes

  • add when directive (18b7405)

0.5.7 (2022-06-07)

Note: Version bump only for package @spectrum-web-components/base

0.5.6 (2022-05-12)

Bug Fixes

  • move property management into update or willUpdate (f66069f)

0.5.5 (2022-04-21)

Bug Fixes

  • allow dir to be managed across multiple connections and disconnections (6d93170)

0.5.4 (2022-03-08)

Note: Version bump only for package @spectrum-web-components/base

0.5.3 (2022-03-04)

Bug Fixes

  • add Grid pattern (341f493)

0.5.2 (2022-02-22)

Bug Fixes

  • dialog: updates for delivering dialog content accessibly (f0ed33c)

0.5.1 (2021-12-13)

Bug Fixes

  • add t-shirt sizing to Thumbnail and support for "xxs"/"xs" sizes (520a642)

0.5.0 (2021-11-08)

Features

  • update lit-* dependencies, wip (377f3c8)

0.4.6 (2021-11-08)

Bug Fixes

  • abstract "hasVisibleFocusInTree" functionality and return trigger focus after close (4f39f2c)

0.4.5 (2021-07-22)

Note: Version bump only for package @spectrum-web-components/base

0.4.4 (2021-06-16)

Note: Version bump only for package @spectrum-web-components/base

0.4.3 (2021-04-09)

Bug Fixes

  • allow for late loading theme scopes (4c7a124)

0.4.2 (2021-03-22)

Bug Fixes

  • remove right click value setting (a44968d)

0.4.1 (2021-03-05)

Note: Version bump only for package @spectrum-web-components/base

0.4.0 (2021-03-04)

Bug Fixes

  • support a wider number of sizes (ee44978)

Features

  • use latest exports specification (a7ecf4b)

0.3.3 (2021-02-11)

Bug Fixes

  • expand sized functionality to support no default and returning to default values (acf3cfb)
  • reduce cycles (8917a5e)

0.3.2 (2021-02-02)

Note: Version bump only for package @spectrum-web-components/base

0.3.1 (2021-01-28)

Note: Version bump only for package @spectrum-web-components/base

0.3.0 (2021-01-21)

Bug Fixes

  • textfield: reimplement min/maxlength (23a4c2e)
  • include the "types" entry in package.json files (b432f59)

Features

  • apply sizedMixin for t-shirt sizing (d7b63fb)
  • use SixedMixin to manage "size" property (8819821)
  • story-decorator: add story decorator to replace knobs for theme application (7c0c6be)

0.2.0 (2021-01-13)

Bug Fixes

  • include the "types" entry in package.json files (b432f59)

Features

  • apply sizedMixin for t-shirt sizing (d7b63fb)
  • use SixedMixin to manage "size" property (8819821)
  • story-decorator: add story decorator to replace knobs for theme application (7c0c6be)

0.1.3 (2020-10-12)

Bug Fixes

  • base: use full file extension (6ea4d9d)

0.1.2 (2020-10-12)

Bug Fixes

  • include default export in the "exports" fields (f32407d)

0.1.1 (2020-09-25)

Bug Fixes

  • dir should never fall back to null (6b16c6d)

0.1.0 (2020-08-31)

Features

  • allow dir management by sp-theme elements (2d10158)
  • observe document.documentElement for dir value (da84a9a)
  • update to Spectrum CSS v3.0.0 (e8b3d8f)
  • card: upgrade to Spectrum CSS v3.0.0 (84cf1a9)
  • use 3.0.0-beta.* release for styles (877b485)
  • base: insert Spectrum base class/mixin (37c2ee9)