base

NPM

1.0.0
Examples Changelog

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)

Description #

The SpectrumElement base class as created by mixing SpectrumMixin onto LitElement adopts dir values from the document at connection time with a fallback to lrt. 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 #

With powerful CSS selectors like :host(:dir(rtl)) and :host-content([dir=rtl]) not yet enjoying cross-browser support, reliably delivering content in both "left to right" and "right to left" while relying on Shadow DOM means certain trade offs need to be made. While every custom element build from SpectrumMixin could have its dir attribute applied to manage this, doing so is not only a pain for apply, it's a pain to maintain over time. To support the flexibility to deliver content in both of these directions, elements built from SpectrumMixin will observe the dir attribute of either the document or a containing sp-theme. This will allow your sites and applications to manage content direction in a single place while also opening the possibility of having multiple content directions on the same page by scoping those content sections with sp-theme elements.

Placing a dir attribute on an element built from SpectrumMixin before attaching it to the DOM will prevent it from resolving the text direction value to a parent sp-theme or document element. Elements applied to the page in this way will also NOT participate in observing any such elements, so their dir values will remain as initialized regardless of changes in other parts of your documents. If you choose to leverage this, be aware that any child (in both light DOM and shadow DOM) of this element will need to have a dir attribute applied as well if you do not want it resolving to a parent sp-theme or document element itself. In this way, it is likely that you would benefit from leveraging an sp-theme element to create scope in your document for managing this custom content direction section of your page.

isLTR #

While CSS offers many powerful solutions for styling content in various directions, sometimes JS functionality depends on the specific of that direction. Elements built from SpectrumMixin have the this.isLTR getter that will resolve to true when dir === 'ltr'.

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.