Gathering detailed insights and metrics for @spectrum-web-components/base
Gathering detailed insights and metrics for @spectrum-web-components/base
Installations
npm install @spectrum-web-components/baseDeveloper Guide
BETA
Typescript
Yes
Module System
ESM
Node Version
20.16.0
NPM Version
10.8.1
Score
90.4
Supply Chain
73.1
Quality
95.2
Maintenance
100
Vulnerability
76
License
Releases
Unable to fetch releases
Languages
6
TypeScript
CSS
JavaScript
HTML
Handlebars
MDX
TypeScript (66.38%)
CSS (31.4%)
JavaScript (2.07%)
HTML (0.08%)
Handlebars (0.06%)
Developer
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
Apache-2.0 License
1,405 Stars
4,911 Commits
229 Forks
46 Watchers
252 Branches
342 Contributors
Updated on Jul 12, 2025
Maintainers
7
Package Meta Information
Latest Version
1.7.0
Package Id
@spectrum-web-components/base@1.7.0
Unpacked Size
101.82 kB
Size
20.51 kB
File Count
59
NPM Version
10.8.1
Node Version
20.16.0
Published on
Jun 11, 2025
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
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
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.
No vulnerabilities found.
Reason
30 commit(s) and 1 issue activity found in the last 90 days -- score normalized to 10
Reason
no dangerous workflow patterns detected
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: Apache License 2.0: LICENSE:0
Reason
security policy file detected
Details
- Info: security policy file detected: github.com/adobe/.github/.github/SECURITY.md:1
- Info: Found linked content: github.com/adobe/.github/.github/SECURITY.md:1
- Info: Found disclosure, vulnerability, and/or timelines in security policy: github.com/adobe/.github/.github/SECURITY.md:1
- Info: Found text in security policy: github.com/adobe/.github/.github/SECURITY.md:1
Reason
no binaries found in the repo
Reason
Found 26/29 approved changesets -- score normalized to 8
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Info: jobLevel 'contents' permission set to 'read': .github/workflows/azure-static-web-apps-brave-plant-02f0c200f.yml:19
- Info: jobLevel 'pull-requests' permission set to 'read': .github/workflows/lint.yml:46
- Info: jobLevel 'contents' permission set to 'read': .github/workflows/pr-update.yml:12
- Warn: no topLevel permission defined: .github/workflows/azure-static-web-apps-brave-plant-02f0c200f.yml:1
- Info: topLevel 'contents' permission set to 'read': .github/workflows/browser-tests.yml:8
- Info: topLevel 'contents' permission set to 'read': .github/workflows/chromatic-vrt.yml:18
- Warn: no topLevel permission defined: .github/workflows/coveralls.yml:1
- Info: topLevel 'contents' permission set to 'read': .github/workflows/lint.yml:22
- Warn: no topLevel permission defined: .github/workflows/pr-update.yml:1
- Info: topLevel 'contents' permission set to 'read': .github/workflows/preview-docs.yml:10
- Warn: no topLevel permission defined: .github/workflows/preview-release.yml:1
- Warn: no topLevel permission defined: .github/workflows/publish-docs-site.yml:1
- Info: topLevel 'contents' permission set to 'read': .github/workflows/urls-smoke-test.yml:10
- Info: no jobLevel write permissions found
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/azure-static-web-apps-brave-plant-02f0c200f.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/adobe/spectrum-web-components/azure-static-web-apps-brave-plant-02f0c200f.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/azure-static-web-apps-brave-plant-02f0c200f.yml:28: update your workflow using https://app.stepsecurity.io/secureworkflow/adobe/spectrum-web-components/azure-static-web-apps-brave-plant-02f0c200f.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/azure-static-web-apps-brave-plant-02f0c200f.yml:37: update your workflow using https://app.stepsecurity.io/secureworkflow/adobe/spectrum-web-components/azure-static-web-apps-brave-plant-02f0c200f.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/azure-static-web-apps-brave-plant-02f0c200f.yml:56: update your workflow using https://app.stepsecurity.io/secureworkflow/adobe/spectrum-web-components/azure-static-web-apps-brave-plant-02f0c200f.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/browser-tests.yml:24: update your workflow using https://app.stepsecurity.io/secureworkflow/adobe/spectrum-web-components/browser-tests.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/browser-tests.yml:29: update your workflow using https://app.stepsecurity.io/secureworkflow/adobe/spectrum-web-components/browser-tests.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/browser-tests.yml:58: update your workflow using https://app.stepsecurity.io/secureworkflow/adobe/spectrum-web-components/browser-tests.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/browser-tests.yml:75: update your workflow using https://app.stepsecurity.io/secureworkflow/adobe/spectrum-web-components/browser-tests.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/browser-tests.yml:80: update your workflow using https://app.stepsecurity.io/secureworkflow/adobe/spectrum-web-components/browser-tests.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/browser-tests.yml:87: update your workflow using https://app.stepsecurity.io/secureworkflow/adobe/spectrum-web-components/browser-tests.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/browser-tests.yml:93: update your workflow using https://app.stepsecurity.io/secureworkflow/adobe/spectrum-web-components/browser-tests.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/chromatic-vrt.yml:31: update your workflow using https://app.stepsecurity.io/secureworkflow/adobe/spectrum-web-components/chromatic-vrt.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/chromatic-vrt.yml:46: update your workflow using https://app.stepsecurity.io/secureworkflow/adobe/spectrum-web-components/chromatic-vrt.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/coveralls.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/adobe/spectrum-web-components/coveralls.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/coveralls.yml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/adobe/spectrum-web-components/coveralls.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/lint.yml:50: update your workflow using https://app.stepsecurity.io/secureworkflow/adobe/spectrum-web-components/lint.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/lint.yml:54: update your workflow using https://app.stepsecurity.io/secureworkflow/adobe/spectrum-web-components/lint.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/lint.yml:75: update your workflow using https://app.stepsecurity.io/secureworkflow/adobe/spectrum-web-components/lint.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/lint.yml:80: update your workflow using https://app.stepsecurity.io/secureworkflow/adobe/spectrum-web-components/lint.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/lint.yml:92: update your workflow using https://app.stepsecurity.io/secureworkflow/adobe/spectrum-web-components/lint.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/lint.yml:107: update your workflow using https://app.stepsecurity.io/secureworkflow/adobe/spectrum-web-components/lint.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/lint.yml:118: update your workflow using https://app.stepsecurity.io/secureworkflow/adobe/spectrum-web-components/lint.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr-update.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/adobe/spectrum-web-components/pr-update.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/pr-update.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/adobe/spectrum-web-components/pr-update.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/preview-docs.yml:29: update your workflow using https://app.stepsecurity.io/secureworkflow/adobe/spectrum-web-components/preview-docs.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/preview-docs.yml:34: update your workflow using https://app.stepsecurity.io/secureworkflow/adobe/spectrum-web-components/preview-docs.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/preview-docs.yml:54: update your workflow using https://app.stepsecurity.io/secureworkflow/adobe/spectrum-web-components/preview-docs.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/preview-release.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/adobe/spectrum-web-components/preview-release.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish-docs-site.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/adobe/spectrum-web-components/publish-docs-site.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/urls-smoke-test.yml:83: update your workflow using https://app.stepsecurity.io/secureworkflow/adobe/spectrum-web-components/urls-smoke-test.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/urls-smoke-test.yml:99: update your workflow using https://app.stepsecurity.io/secureworkflow/adobe/spectrum-web-components/urls-smoke-test.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/urls-smoke-test.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/adobe/spectrum-web-components/urls-smoke-test.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/urls-smoke-test.yml:39: update your workflow using https://app.stepsecurity.io/secureworkflow/adobe/spectrum-web-components/urls-smoke-test.yml/main?enable=pin
- Warn: npmCommand not pinned by hash: .github/workflows/azure-static-web-apps-brave-plant-02f0c200f.yml:27
- Info: 0 out of 25 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 8 third-party GitHubAction dependencies pinned
- Info: 0 out of 1 npmCommand dependencies pinned
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 27 are checked with a SAST tool
Reason
36 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-28mc-g557-92m7
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-jr5f-v2jv-69x6
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-67mh-4wv8-2f99
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-pfq8-rq6v-vf5m
- Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
- Warn: Project is vulnerable to: GHSA-4www-5p9h-95mh
- Warn: Project is vulnerable to: GHSA-9gqv-wp59-fq42
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-593f-38f6-jp5m
- Warn: Project is vulnerable to: GHSA-x2rg-q646-7m2v
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
- Warn: Project is vulnerable to: GHSA-3h52-269p-cp9r
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-x7hr-w5r2-h6wg
- Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-76p7-773f-r4q5
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-w5hq-hm5m-4548
- Warn: Project is vulnerable to: GHSA-cvv5-9h9w-qp2m
- Warn: Project is vulnerable to: GHSA-pq67-2wwv-3xjx
- Warn: Project is vulnerable to: GHSA-8cj5-5rvv-wf4v
- Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
- Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986
- Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v
- Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Score
5.3
/10
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More