Header text
- Content of the banner
-This is an info banner
- Description here
-This is an error banner
- Something bad happened
-
-
-
-
-```
-
-## Accessibility
-
-A Banner does not have a default semantic role communicated to assistive technology, but it does accept id, role and other aria- props that can be added to to improve accessibility depending on context.
diff --git a/packages/banner/exports.json b/packages/banner/exports.json
deleted file mode 100644
index 94ec56a8d3..0000000000
--- a/packages/banner/exports.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "./src/*": "./src/*",
- "./sp-banner.js": "./sp-banner.js"
-}
diff --git a/packages/banner/package.json b/packages/banner/package.json
deleted file mode 100644
index ec178b546c..0000000000
--- a/packages/banner/package.json
+++ /dev/null
@@ -1,72 +0,0 @@
-{
- "name": "@spectrum-web-components/banner",
- "version": "0.49.0",
- "publishConfig": {
- "access": "public"
- },
- "description": "",
- "license": "Apache-2.0",
- "repository": {
- "type": "git",
- "url": "https://github.com/adobe/spectrum-web-components.git",
- "directory": "packages/banner"
- },
- "author": "",
- "homepage": "https://opensource.adobe.com/spectrum-web-components/components/banner",
- "bugs": {
- "url": "https://github.com/adobe/spectrum-web-components/issues"
- },
- "main": "./src/index.js",
- "module": "./src/index.js",
- "type": "module",
- "exports": {
- ".": {
- "development": "./src/index.dev.js",
- "default": "./src/index.js"
- },
- "./package.json": "./package.json",
- "./src/Banner.js": {
- "development": "./src/Banner.dev.js",
- "default": "./src/Banner.js"
- },
- "./src/banner.css.js": "./src/banner.css.js",
- "./src/index.js": {
- "development": "./src/index.dev.js",
- "default": "./src/index.js"
- },
- "./sp-banner.js": {
- "development": "./sp-banner.dev.js",
- "default": "./sp-banner.js"
- }
- },
- "scripts": {
- "test": "echo \"Error: run tests from mono-repo root.\" && exit 1"
- },
- "files": [
- "**/*.d.ts",
- "**/*.js",
- "**/*.js.map",
- "custom-elements.json",
- "!stories/",
- "!test/"
- ],
- "keywords": [
- "spectrum css",
- "web components",
- "lit-element",
- "lit-html"
- ],
- "dependencies": {
- "@spectrum-web-components/base": "^0.49.0"
- },
- "devDependencies": {
- "@spectrum-css/banner": "3.0.0-beta.2"
- },
- "types": "./src/index.d.ts",
- "customElements": "custom-elements.json",
- "deprecationNotice": "@spectrum-web-components/banner is deprecated and will be removed in the SWC 1.0 release.",
- "sideEffects": [
- "./sp-*.js",
- "./**/*.dev.js"
- ]
-}
diff --git a/packages/banner/src/Banner.ts b/packages/banner/src/Banner.ts
deleted file mode 100644
index 5d4b61c9f9..0000000000
--- a/packages/banner/src/Banner.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-/*
-Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-
-import {
- CSSResultArray,
- html,
- PropertyValues,
- SpectrumElement,
- TemplateResult,
-} from '@spectrum-web-components/base';
-import { property } from '@spectrum-web-components/base/src/decorators.js';
-
-import bannerStyles from './banner.css.js';
-
-/**
- * @element sp-banner
- *
- * @attr type - Determines the style, can be "info", "warning", or "error". Default is "info"
- * @attr corner - Determines if banner sets position at upper right corner or not.
- *
- * @slot header - Primary message of the banner.
- * @slot content - Secondary message of the banner. Used to provide a description.
- */
-export class Banner extends SpectrumElement {
- @property({ reflect: true, type: String })
- public type: 'info' | 'warning' | 'error' = 'info';
-
- @property({ reflect: true, type: Boolean })
- public corner = false;
-
- public static override get styles(): CSSResultArray {
- return [bannerStyles];
- }
-
- protected override update(changes: PropertyValuesThis banner is in a corner
- Neat!
-
-
- `;
-};
-
-export const Default = (args: StoryArgs): TemplateResult => Template(args);
-
-export const bannerTypes = (): TemplateResult => {
- return html`
-
-
-
-
- ${header}
- ${content}
- Header Text
- Content of the banner!
- Header Text
- Content of the banner!
- Header Text
- Content of the banner!
-
-
- `;
-};
-cornerPlacement.args = {
- inCorner: true,
- header: 'A corner banner!',
- content: 'Content of the banner!',
-};
-
-cornerPlacement.storyName = 'Corner Placement';
diff --git a/packages/banner/test/banner-memory.test.ts b/packages/banner/test/banner-memory.test.ts
deleted file mode 100644
index 1ce1c57290..0000000000
--- a/packages/banner/test/banner-memory.test.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-/*
-Copyright 2023 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-
-import { Default } from '../stories/banner.stories.js';
-import { testForMemoryLeaks } from '../../../test/testing-helpers.js';
-
-testForMemoryLeaks(Default({}));
diff --git a/packages/banner/test/banner.test.ts b/packages/banner/test/banner.test.ts
deleted file mode 100644
index 61e814f27a..0000000000
--- a/packages/banner/test/banner.test.ts
+++ /dev/null
@@ -1,95 +0,0 @@
-/*
-Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-import '@spectrum-web-components/banner/sp-banner.js';
-import { Banner } from '@spectrum-web-components/banner';
-import { expect, fixture, html } from '@open-wc/testing';
-
-describe('banner', () => {
- let testDiv!: HTMLDivElement;
-
- beforeEach(async () => {
- testDiv = await fixture
-
-
-
- ${args.header}
- ${args.content}
-
-
-
-
-
-
-
-
-
-
-
-
- `
- );
- });
-
- it('loads accessibly', async () => {
- await expect(testDiv).to.be.accessible();
- });
-
- it('loads info', () => {
- const el = testDiv.querySelector('sp-banner[type=info]') as Banner;
-
- expect(el).to.not.equal(undefined);
- expect(el.type).to.equal('info');
- expect(el.corner).to.be.false;
- expect(el.textContent).to.include('Info Text');
- expect(el.textContent).to.include('Info Content');
- });
- it('loads warning', () => {
- const el = testDiv.querySelector('sp-banner[type=warning]') as Banner;
-
- expect(el).to.not.equal(undefined);
- expect(el.type).to.equal('warning');
- expect(el.corner).to.be.false;
- expect(el.textContent).to.include('Warning Text');
- expect(el.textContent).to.include('Warning Content');
- });
- it('loads error', () => {
- const el = testDiv.querySelector('sp-banner[type=error]') as Banner;
-
- expect(el).to.not.equal(undefined);
- expect(el.type).to.equal('error');
- expect(el.corner).to.be.false;
- expect(el.textContent).to.include('Error Text');
- expect(el.textContent).to.include('Error Content');
- });
- it('loads corner', () => {
- const el = testDiv.querySelector('sp-banner[corner]') as Banner;
-
- expect(el).to.not.equal(undefined);
- expect(el.corner).to.be.true;
- expect(el.textContent).to.include('Corner Text');
- expect(el.textContent).to.include('Corner Content');
- });
- it('defaults type to info when none provided', () => {
- const el = testDiv.querySelector('sp-banner#default-info') as Banner;
-
- expect(el).to.not.equal(undefined);
- expect(el.type).to.equal('info');
- expect(el.corner).to.be.false;
- expect(el.textContent).to.include('Header Text');
- expect(el.textContent).to.include('Content');
- });
-});
diff --git a/packages/banner/test/benchmark/test-basic.ts b/packages/banner/test/benchmark/test-basic.ts
deleted file mode 100644
index c32b3ee1f8..0000000000
--- a/packages/banner/test/benchmark/test-basic.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-/*
-Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-
-import '@spectrum-web-components/banner/sp-banner.js';
-import { html } from 'lit';
-import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
-
-measureFixtureCreation(html`
- Info Text
- Info Content
- Warning Text
- Warning Content
- Error Text
- Error Content
- Header Text
- Content
- Corner Text
- Corner Content
- Info Text
- Info Content
- For testing purposes only
-- This is a test to ensure that sizing the icon will still work when - it's in the scope of a parent element. You shouldn't normally do - this as it deviates from the Spectrum design specification. -
- `; -}; - export const renderMinWidthButton = (props: Properties): TemplateResult => { return html` -
-
-
-
-
- Test 1
-
- Test 2
- Test 3
-
-
-
- Hover message
-
-
- Other hover message
-
-
+ testDiv = await styledFixture
+
+
+ Show Popover
+
+
+ `);
await elementUpdated(testDiv);
});
@@ -589,11 +583,9 @@ describe('Overlays', () => {
it('opens detached content', async () => {
const textContent = 'This is a detached element that has been overlaid';
- const el = await fixture
+
+
+
+
+ Test 1
+
+ Test 2
+ Test 3
+
+
+
+ Hover message
+
+
+ Other hover message
+
- `
- );
+ Popover Title
-
+
+
+
+ Popover title
Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake sweet roll cake danish candy biscuit halvah -Popover Title
-
- Cupcake ipsum dolor sit amet jelly beans. Chocolate
- jelly caramels. Icing soufflé chupa chups donut
- cheesecake. Jelly-o chocolate cake sweet roll cake
- danish candy biscuit halvah
-
- Popover title
+ Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly + caramels. Icing soufflé chupa chups donut cheesecake. + Jelly-o chocolate cake sweet roll cake danish candy biscuit + halvah +Popover Title
-
- Cupcake ipsum dolor sit amet jelly beans. Chocolate
- jelly caramels. Icing soufflé chupa chups donut
- cheesecake. Jelly-o chocolate cake sweet roll cake
- danish candy biscuit halvah
-
- Popover Title
+
+ Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly
+ caramels. Icing soufflé chupa chups donut cheesecake.
+ Jelly-o chocolate cake sweet roll cake danish candy biscuit
+ halvah
+
+
+
+ `);
+ const el = test.querySelector('sp-progress-bar') as ProgressBar;
+ const percentage = el.shadowRoot.querySelector(
+ '.percentage'
+ ) as HTMLElement;
+ expect(percentage.textContent?.search('%')).to.not.equal(-1);
+ });
+
+ it('resolves a language (ar-sa)', async () => {
+ const [languageContext] = createLanguageContext('ar-sa');
+ const test = await fixture(html`
+
+
+ `);
+ const el = test.querySelector('sp-progress-bar') as ProgressBar;
+ const percentage = el.shadowRoot.querySelector(
+ '.percentage'
+ ) as HTMLElement;
+ expect(percentage.textContent?.search('٪')).to.not.equal(-1);
+ });
- it('warns in devMode when white/black static is provided', async () => {
+ it('accepts `aria-label`', async () => {
const el = await fixture
-
- `);
- const el = test.querySelector('sp-progress-bar') as ProgressBar;
- const percentage = el.shadowRoot.querySelector(
- '.percentage'
- ) as HTMLElement;
- expect(percentage.textContent?.search('%')).to.not.equal(-1);
- });
+ await elementUpdated(el);
- it('resolves a language (ar-sa)', async () => {
- const [languageContext] = createLanguageContext('ar-sa');
- const test = await fixture(html`
-
+ expect(el.hasAttribute('aria-label')).to.be.true;
+ expect(el.getAttribute('aria-label')).to.equal('Loading');
+ });
+ it('does not remove `aria-label` if set independently of `label`', async () => {
+ const el = await fixture(html`
- `);
- const el = test.querySelector('sp-progress-bar') as ProgressBar;
- const percentage = el.shadowRoot.querySelector(
- '.percentage'
- ) as HTMLElement;
- expect(percentage.textContent?.search('٪')).to.not.equal(-1);
- });
-
- it('accepts `aria-label`', async () => {
- const el = await fixture): void {
- if (changes.has('overBackground')) {
- // Apply "staticColor" from "overBackground", preferring "staticColor",
- // until the deprecation period is over.
- this.staticColor = this.overBackground
- ? 'white'
- : this.staticColor || undefined;
- if (window.__swc.DEBUG) {
- if (this.overBackground) {
- window.__swc.warn(
- this,
- `<${this.localName}> element will stop accepting the "over-background" attribute, and its related "overBackground" property in a future release. Use the "static-color" attribute with a value of "white" instead.`,
- 'https://opensource.adobe.com/spectrum-web-components/components/progress-circle/#static',
- { level: 'deprecation' }
- );
- }
- }
- }
- if (changes.has('static')) {
- // Apply "staticColor" from "static", preferring "staticColor",
- // until the deprecation period is over.
- this.staticColor = this.static;
- if (window.__swc.DEBUG) {
- if (this.static) {
- window.__swc.warn(
- this,
- `<${this.localName}> element will stop accepting the "static" attribute. Use the "static-color" attribute with a value of "white" instead.`,
- 'https://opensource.adobe.com/spectrum-web-components/components/progress-circle/#static',
- { level: 'deprecation' }
- );
- }
- }
- }
- }
-
protected override render(): TemplateResult {
const styles = [
this.makeRotation(-180 + (180 / 50) * Math.min(this.progress, 50)),
diff --git a/packages/progress-circle/src/progress-circle-overrides.css b/packages/progress-circle/src/progress-circle-overrides.css
new file mode 100644
index 0000000000..3bc4f00712
--- /dev/null
+++ b/packages/progress-circle/src/progress-circle-overrides.css
@@ -0,0 +1,48 @@
+/*
+ Copyright 2023 Adobe. All rights reserved.
+ This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License. You may obtain a copy
+ of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software distributed under
+ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ OF ANY KIND, either express or implied. See the License for the specific language
+ governing permissions and limitations under the License.
+ */
+
+/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
+:host {
+ --spectrum-progress-circle-track-border-color: var(
+ --system-progress-circle-track-border-color
+ );
+ --spectrum-progress-circle-fill-border-color: var(
+ --system-progress-circle-fill-border-color
+ );
+ --spectrum-progress-circle-track-border-color-over-background: var(
+ --system-progress-circle-track-border-color-over-background
+ );
+ --spectrum-progress-circle-fill-border-color-over-background: var(
+ --system-progress-circle-fill-border-color-over-background
+ );
+ --spectrum-progress-circle-size: var(--system-progress-circle-size);
+ --spectrum-progress-circle-thickness: var(
+ --system-progress-circle-thickness
+ );
+ --spectrum-progress-circle-track-border-style: var(
+ --system-progress-circle-track-border-style
+ );
+}
+
+:host([size='s']) {
+ --spectrum-progress-circle-size: var(--system-progress-circle-small-size);
+ --spectrum-progress-circle-thickness: var(
+ --system-progress-circle-small-thickness
+ );
+}
+
+:host([size='l']) {
+ --spectrum-progress-circle-size: var(--system-progress-circle-large-size);
+ --spectrum-progress-circle-thickness: var(
+ --system-progress-circle-large-thickness
+ );
+}
diff --git a/packages/progress-circle/src/progress-circle.css b/packages/progress-circle/src/progress-circle.css
index 3320308f6e..64f82cecf4 100644
--- a/packages/progress-circle/src/progress-circle.css
+++ b/packages/progress-circle/src/progress-circle.css
@@ -11,6 +11,7 @@ governing permissions and limitations under the License.
*/
@import url('./spectrum-progress-circle.css');
+@import url('./progress-circle-overrides.css');
:host {
block-size: var(
diff --git a/packages/progress-circle/src/spectrum-progress-circle.css b/packages/progress-circle/src/spectrum-progress-circle.css
index 0d48dc3edb..1a56055ddd 100644
--- a/packages/progress-circle/src/spectrum-progress-circle.css
+++ b/packages/progress-circle/src/spectrum-progress-circle.css
@@ -11,11 +11,161 @@ governing permissions and limitations under the License.
*/
/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
+@media (forced-colors: active) {
+ :host {
+ --highcontrast-progress-circle-fill-border-color: Highlight;
+ --highcontrast-progress-circle-fill-border-color-over-background: Highlight;
+ }
+
+ .track {
+ --spectrum-progress-circle-track-border-style: double;
+ }
+}
+
+:host {
+ position: var(--mod-progress-circle-position, relative);
+ direction: ltr;
+ display: inline-block;
+ position: relative;
+ transform: translateZ(0);
+}
+
+:host,
+.track {
+ inline-size: var(
+ --mod-progress-circle-size,
+ var(--spectrum-progress-circle-size)
+ );
+ block-size: var(
+ --mod-progress-circle-size,
+ var(--spectrum-progress-circle-size)
+ );
+}
+
+.track {
+ box-sizing: border-box;
+ border-style: var(
+ --highcontrast-progress-circle-track-border-style,
+ var(
+ --mod-progress-circle-track-border-style,
+ var(--spectrum-progress-circle-track-border-style)
+ )
+ );
+ border-width: var(
+ --mod-progress-circle-thickness,
+ var(--spectrum-progress-circle-thickness)
+ );
+ border-radius: var(
+ --mod-progress-circle-size,
+ var(--spectrum-progress-circle-size)
+ );
+ border-color: var(
+ --mod-progress-circle-track-border-color,
+ var(--spectrum-progress-circle-track-border-color)
+ );
+}
+
+.fills {
+ inline-size: 100%;
+ block-size: 100%;
+ position: absolute;
+ inset-block-start: 0;
+ inset-inline-start: 0;
+}
+
+.fill {
+ box-sizing: border-box;
+ inline-size: var(
+ --mod-progress-circle-size,
+ var(--spectrum-progress-circle-size)
+ );
+ block-size: var(
+ --mod-progress-circle-size,
+ var(--spectrum-progress-circle-size)
+ );
+ border-style: solid;
+ border-width: var(
+ --mod-progress-circle-thickness,
+ var(--spectrum-progress-circle-thickness)
+ );
+ border-radius: var(
+ --mod-progress-circle-size,
+ var(--spectrum-progress-circle-size)
+ );
+ border-color: var(
+ --highcontrast-progress-circle-fill-border-color,
+ var(
+ --mod-progress-circle-fill-border-color,
+ var(--spectrum-progress-circle-fill-border-color)
+ )
+ );
+}
+
+:host([static-color='white']) .track {
+ border-color: var(
+ --mod-progress-circle-track-border-color-over-background,
+ var(--spectrum-progress-circle-track-border-color-over-background)
+ );
+}
+
+:host([static-color='white']) .fill {
+ border-color: var(
+ --highcontrast-progress-circle-fill-border-color-over-background,
+ var(
+ --mod-progress-circle-fill-border-color-over-background,
+ var(--spectrum-progress-circle-fill-border-color-over-background)
+ )
+ );
+}
+
+.fillMask1,
+.fillMask2 {
+ inline-size: 50%;
+ block-size: 100%;
+ transform-origin: 100%;
+ position: absolute;
+ overflow: hidden;
+ transform: rotate(180deg);
+}
+
+.fillSubMask1,
+.fillSubMask2 {
+ inline-size: 100%;
+ block-size: 100%;
+ transform-origin: 100%;
+ overflow: hidden;
+ transform: rotate(-180deg);
+}
+
+.fillMask2 {
+ transform: rotate(0);
+}
+
+:host([indeterminate]) .fills {
+ will-change: transform;
+ transform-origin: center;
+ animation: 1s cubic-bezier(0.25, 0.78, 0.48, 0.89) infinite
+ spectrum-fills-rotate;
+ transform: translateZ(0);
+}
+
+:host([indeterminate]) .fillSubMask1 {
+ will-change: transform;
+ animation: 1s linear infinite spectrum-fill-mask-1;
+ transform: translateZ(0);
+}
+
+:host([indeterminate]) .fillSubMask2 {
+ will-change: transform;
+ animation: 1s linear infinite spectrum-fill-mask-2;
+ transform: translateZ(0);
+}
+
.fill-submask-2 {
- animation: 1s linear infinite b;
+ animation: 1s linear infinite spectrum-fill-mask-2;
}
-@keyframes a {
+@keyframes spectrum-fill-mask-1 {
0% {
transform: rotate(90deg);
}
@@ -257,7 +407,7 @@ governing permissions and limitations under the License.
}
}
-@keyframes b {
+@keyframes spectrum-fill-mask-2 {
0% {
transform: rotate(180deg);
}
@@ -499,7 +649,7 @@ governing permissions and limitations under the License.
}
}
-@keyframes c {
+@keyframes spectrum-fills-rotate {
0% {
transform: rotate(-90deg);
}
@@ -508,185 +658,3 @@ governing permissions and limitations under the License.
transform: rotate(270deg);
}
}
-
-:host {
- --spectrum-progress-circle-track-border-color: var(--spectrum-gray-300);
- --spectrum-progress-circle-fill-border-color: var(
- --spectrum-accent-content-color-default
- );
- --spectrum-progress-circle-track-border-color-over-background: var(
- --spectrum-transparent-white-300
- );
- --spectrum-progress-circle-fill-border-color-over-background: var(
- --spectrum-transparent-white-900
- );
- --spectrum-progress-circle-size: var(
- --spectrum-progress-circle-size-medium
- );
- --spectrum-progress-circle-thickness: var(
- --spectrum-progress-circle-thickness-medium
- );
- --spectrum-progress-circle-track-border-style: solid;
-}
-
-:host([size='s']) {
- --spectrum-progress-circle-size: var(--spectrum-progress-circle-size-small);
- --spectrum-progress-circle-thickness: var(
- --spectrum-progress-circle-thickness-small
- );
-}
-
-:host([size='l']) {
- --spectrum-progress-circle-size: var(--spectrum-progress-circle-size-large);
- --spectrum-progress-circle-thickness: var(
- --spectrum-progress-circle-thickness-large
- );
-}
-
-@media (forced-colors: active) {
- :host {
- --highcontrast-progress-circle-fill-border-color: Highlight;
- --highcontrast-progress-circle-fill-border-color-over-background: Highlight;
- }
-
- .track {
- --spectrum-progress-circle-track-border-style: double;
- }
-}
-
-:host {
- position: var(--mod-progress-circle-position, relative);
- direction: ltr;
- display: inline-block;
- transform: translateZ(0);
-}
-
-:host,
-.track {
- inline-size: var(
- --mod-progress-circle-size,
- var(--spectrum-progress-circle-size)
- );
- block-size: var(
- --mod-progress-circle-size,
- var(--spectrum-progress-circle-size)
- );
-}
-
-.track {
- box-sizing: border-box;
- border-style: var(
- --highcontrast-progress-circle-track-border-style,
- var(
- --mod-progress-circle-track-border-style,
- var(--spectrum-progress-circle-track-border-style)
- )
- );
- border-width: var(
- --mod-progress-circle-thickness,
- var(--spectrum-progress-circle-thickness)
- );
- border-radius: var(
- --mod-progress-circle-size,
- var(--spectrum-progress-circle-size)
- );
- border-color: var(
- --mod-progress-circle-track-border-color,
- var(--spectrum-progress-circle-track-border-color)
- );
-}
-
-.fills {
- inline-size: 100%;
- block-size: 100%;
- position: absolute;
- inset-block-start: 0;
- inset-inline-start: 0;
-}
-
-.fill {
- box-sizing: border-box;
- inline-size: var(
- --mod-progress-circle-size,
- var(--spectrum-progress-circle-size)
- );
- block-size: var(
- --mod-progress-circle-size,
- var(--spectrum-progress-circle-size)
- );
- border-style: solid;
- border-width: var(
- --mod-progress-circle-thickness,
- var(--spectrum-progress-circle-thickness)
- );
- border-radius: var(
- --mod-progress-circle-size,
- var(--spectrum-progress-circle-size)
- );
- border-color: var(
- --highcontrast-progress-circle-fill-border-color,
- var(
- --mod-progress-circle-fill-border-color,
- var(--spectrum-progress-circle-fill-border-color)
- )
- );
-}
-
-:host([static-color='white']) .track {
- border-color: var(
- --mod-progress-circle-track-border-color-over-background,
- var(--spectrum-progress-circle-track-border-color-over-background)
- );
-}
-
-:host([static-color='white']) .fill {
- border-color: var(
- --highcontrast-progress-circle-fill-border-color-over-background,
- var(
- --mod-progress-circle-fill-border-color-over-background,
- var(--spectrum-progress-circle-fill-border-color-over-background)
- )
- );
-}
-
-.fillMask1,
-.fillMask2 {
- inline-size: 50%;
- block-size: 100%;
- transform-origin: 100%;
- position: absolute;
- overflow: hidden;
- transform: rotate(180deg);
-}
-
-.fillSubMask1,
-.fillSubMask2 {
- inline-size: 100%;
- block-size: 100%;
- transform-origin: 100%;
- overflow: hidden;
- transform: rotate(-180deg);
-}
-
-.fillMask2 {
- transform: rotate(0);
-}
-
-:host([indeterminate]) .fills {
- will-change: transform;
- transform-origin: center;
- animation: 1s cubic-bezier(0.25, 0.78, 0.48, 0.89) infinite c;
- transform: translateZ(0);
-}
-
-:host([indeterminate]) .fillSubMask1 {
- will-change: transform;
- animation: 1s linear infinite a;
- transform: translateZ(0);
-}
-
-:host([indeterminate]) .fillSubMask2 {
- will-change: transform;
- animation: 1s linear infinite b;
- transform: translateZ(0);
-}
diff --git a/packages/progress-circle/test/progress-circle.test.ts b/packages/progress-circle/test/progress-circle.test.ts
index 7e4689b7d2..bf9300b0b4 100644
--- a/packages/progress-circle/test/progress-circle.test.ts
+++ b/packages/progress-circle/test/progress-circle.test.ts
@@ -59,58 +59,6 @@ describe('ProgressCircle', () => {
},
});
});
- it('warns in Dev Mode when static attribute is supplied', async () => {
- const el = await fixture(html`
- (html`
- (html`
@@ -210,23 +158,4 @@ describe('ProgressCircle', () => {
expect(el.hasAttribute('aria-label')).to.be.true;
expect(el.getAttribute('aria-label')).to.equal('Loading');
});
- it('prefers `staticColor` over `static`', async () => {
- const el = await fixture(html`
- ` allow users to perform contextual actions when hovering or focusing on a specific component. They're shortcuts meant to make workflows more efficient. Spectrum guidelines suggest a `` element feature only text buttons OR only icon buttons, and never both.
-
-### Usage
-
-[](https://www.npmjs.com/package/@spectrum-web-components/quick-actions)
-[](https://bundlephobia.com/result?p=@spectrum-web-components/quick-actions)
-[](https://webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/pDSD7CSeA3B5hTdX8cvB/src/index.ts)
-
-```
-yarn add @spectrum-web-components/quick-actions
-```
-
-Import the side effectful registration of `` via:
-
-```
-import '@spectrum-web-components/quick-actions/sp-quick-actions.js';
-```
-
-When looking to leverage the `QuickActions` base class as a type and/or for extension purposes, do so via:
-
-```
-import { QuickActions } from '@spectrum-web-components/quick-actions';
-```
-
-## Example
-
-```html
-): void {
- super.update(changes);
- if (window.__swc.DEBUG) {
- window.__swc.warn(
- this,
- `<${this.localName}> is deprecated and will be removed in the SWC 1.0 release. Use an Action bar to allow users to perform actions on either a single or multiple items at the same time, instead.`,
- 'https://opensource.adobe.com/spectrum-web-components/components/quick-actions/#deprecation',
- { level: 'deprecation' }
- );
- }
- }
-
- protected override render(): TemplateResult {
- return html`
- (
- html`
- (
- html`
- (html`
+ usage where deprecated ([387db3b](https://github.com/adobe/spectrum-web-components/commit/387db3be95c98ab220e517fe12a4db7a2496fe5f))
-- simplify optionsMenu usage and fix tests ([91241b7](https://github.com/adobe/spectrum-web-components/commit/91241b7bddc434c7220fc0fbd65389d0ca38f674))
-- slot documentation ([0ebd260](https://github.com/adobe/spectrum-web-components/commit/0ebd2609bad9e95ee24428cb2fa666d23bdb85f8))
-- split-button tests & lots of cleanup based on review feedback ([10b4a04](https://github.com/adobe/spectrum-web-components/commit/10b4a04c5791d1acd9e59d48a8960b9c17aa89c7)), closes [#1189](https://github.com/adobe/spectrum-web-components/issues/1189)
-- **split-button:** correct style application ([a954fdf](https://github.com/adobe/spectrum-web-components/commit/a954fdf9994aa20045e152860bdc2f3153c4af16))
-- **split-button:** follow visible tab order ([966d3b6](https://github.com/adobe/spectrum-web-components/commit/966d3b601a1eda5bf45394fad3bb7d100c7d3b84))
-- **split-button:** hide "selected" item from menu ([322a966](https://github.com/adobe/spectrum-web-components/commit/322a96655855f42b390ba2c94d0b017bf93aebd9))
-- **split-button:** remove "popover" from render path ([f1cd7ca](https://github.com/adobe/spectrum-web-components/commit/f1cd7ca79f175c4d0c344c4056638f7b1548c3d9))
-- **split-button:** test a11y correctly, find issues, fix them ([4283994](https://github.com/adobe/spectrum-web-components/commit/4283994e0456813ee53be4a1bfd6b53965e41433))
-- stop merging selectors in a way that alters the cascade ([369388f](https://github.com/adobe/spectrum-web-components/commit/369388f8cc147543891087991c569f849ddb9b38))
-- support a wider number of sizes ([ee44978](https://github.com/adobe/spectrum-web-components/commit/ee4497830da0d3bc63d4414ad5548291a39588c7))
-- **tags:** support distant sibling selectors ([a8dcf7f](https://github.com/adobe/spectrum-web-components/commit/a8dcf7fb4d30a1bf0e0cdc3ac5e044d75701c5fa))
-- update latest Spectrum CSS beta releases ([d8d3acc](https://github.com/adobe/spectrum-web-components/commit/d8d3acc86de31e58219db6ba2a9d045b83cbe103))
-- update to latest spectrum-css packages ([a5ca19f](https://github.com/adobe/spectrum-web-components/commit/a5ca19f67d5b3f0951667c4441d4d977bf1e0937))
-- use icons without "size" values ([3fc7c91](https://github.com/adobe/spectrum-web-components/commit/3fc7c91713793a928082eae15fc3d9dec638a31a))
-- use latest @spectrum-css/\* versions ([c35eb86](https://github.com/adobe/spectrum-web-components/commit/c35eb86defd89a0c36b5ea186f6d40f20851b5e5))
-
-### Features
-
-- **action-button:** add action button pattern ([03ac00a](https://github.com/adobe/spectrum-web-components/commit/03ac00a710290e6a78340f206d88385a4f8ae8c2))
-- adopt DNA@7 base Spectrum CSS ([e08cafd](https://github.com/adobe/spectrum-web-components/commit/e08cafda9f1b33b0163fbe5ba66754806be8f9e4))
-- apply sizedMixin for t-shirt sizing ([d7b63fb](https://github.com/adobe/spectrum-web-components/commit/d7b63fb0db06b5a8a412fea8370964f4db9d18ae))
-- **button:** use synthetic button instead of native ([49e94bc](https://github.com/adobe/spectrum-web-components/commit/49e94bcf79da6ec1ef05f4197042f992922b91ca))
-- include all Dev Mode files in side effects ([f70817c](https://github.com/adobe/spectrum-web-components/commit/f70817cc15db6dcf5cc1de2d82b4f7b0c80b1251))
-- leverage latest Spectrum button API ([9caf2f6](https://github.com/adobe/spectrum-web-components/commit/9caf2f6313424450c91c039fafea89bf8aa72624))
-- shared pkg versions, devmode define warning, registry-conflicts docs ([6e49565](https://github.com/adobe/spectrum-web-components/commit/6e4956519b845fa8127f8032948b625c252ef7a6))
-- **split-button:** add split-button pattern ([d3d8240](https://github.com/adobe/spectrum-web-components/commit/d3d8240225c5c11813e16c7ca64c75c5fd036bc6))
-- **split-button:** add split-button pattern ([012b7f8](https://github.com/adobe/spectrum-web-components/commit/012b7f8ca88213c246683eb65f27b8cfe59e60bb))
-- **split-button:** add split-button pattern ([4833a59](https://github.com/adobe/spectrum-web-components/commit/4833a598bb3da3552d194586350a3888dba79543))
-- **split-button:** update spectrum css input ([7d83331](https://github.com/adobe/spectrum-web-components/commit/7d83331fae9ff181c98ba7033d69bdf276790e7f))
-- **tabs:** add sp-tab-panel element ([b17d276](https://github.com/adobe/spectrum-web-components/commit/b17d2765cf415578a31e5fa23515c25ff4c3922d))
-- update to Spectrum CSS v3.0.0 ([e8b3d8f](https://github.com/adobe/spectrum-web-components/commit/e8b3d8f75c77c04b4d7af126b91b0f6ad2a40742))
-- use latest exports specification ([a7ecf4b](https://github.com/adobe/spectrum-web-components/commit/a7ecf4b6da7996f36a8a89f62cc2384709497008))
-- use SixedMixin to manage "size" property ([8819821](https://github.com/adobe/spectrum-web-components/commit/88198212cb495833ed2e7644f95b43dca915318d))
-
-## [0.9.17](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.9.16...@spectrum-web-components/split-button@0.9.17) (2023-04-24)
-
-**Note:** Version bump only for package @spectrum-web-components/split-button
-
-## [0.9.16](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.9.15...@spectrum-web-components/split-button@0.9.16) (2023-04-05)
-
-**Note:** Version bump only for package @spectrum-web-components/split-button
-
-## [0.9.15](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.9.14...@spectrum-web-components/split-button@0.9.15) (2023-03-22)
-
-### Bug Fixes
-
-- **split-button:** correct style application ([a954fdf](https://github.com/adobe/spectrum-web-components/commit/a954fdf9994aa20045e152860bdc2f3153c4af16))
-
-## [0.9.14](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.9.13...@spectrum-web-components/split-button@0.9.14) (2023-03-08)
-
-**Note:** Version bump only for package @spectrum-web-components/split-button
-
-## [0.9.13](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.9.12...@spectrum-web-components/split-button@0.9.13) (2023-02-13)
-
-**Note:** Version bump only for package @spectrum-web-components/split-button
-
-## [0.9.12](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.9.11...@spectrum-web-components/split-button@0.9.12) (2023-02-08)
-
-### Bug Fixes
-
-- modify overrides for new Button CSS ([8a36124](https://github.com/adobe/spectrum-web-components/commit/8a36124a78bbf4ff3b65dc169af62e9379b30c85))
-
-## [0.9.11](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.9.10...@spectrum-web-components/split-button@0.9.11) (2023-01-23)
-
-**Note:** Version bump only for package @spectrum-web-components/split-button
-
-## [0.9.10](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.9.9...@spectrum-web-components/split-button@0.9.10) (2023-01-09)
-
-**Note:** Version bump only for package @spectrum-web-components/split-button
-
-## [0.9.9](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.9.8...@spectrum-web-components/split-button@0.9.9) (2022-12-08)
-
-**Note:** Version bump only for package @spectrum-web-components/split-button
-
-## [0.9.8](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.9.7...@spectrum-web-components/split-button@0.9.8) (2022-11-21)
-
-**Note:** Version bump only for package @spectrum-web-components/split-button
-
-## [0.9.7](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.9.6...@spectrum-web-components/split-button@0.9.7) (2022-11-14)
-
-**Note:** Version bump only for package @spectrum-web-components/split-button
-
-## [0.9.6](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.9.5...@spectrum-web-components/split-button@0.9.6) (2022-10-28)
-
-**Note:** Version bump only for package @spectrum-web-components/split-button
-
-## [0.9.5](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.9.4...@spectrum-web-components/split-button@0.9.5) (2022-10-17)
-
-**Note:** Version bump only for package @spectrum-web-components/split-button
-
-## [0.9.4](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.9.3...@spectrum-web-components/split-button@0.9.4) (2022-10-10)
-
-**Note:** Version bump only for package @spectrum-web-components/split-button
-
-## [0.9.3](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.9.2...@spectrum-web-components/split-button@0.9.3) (2022-09-15)
-
-**Note:** Version bump only for package @spectrum-web-components/split-button
-
-## [0.9.2](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.9.1...@spectrum-web-components/split-button@0.9.2) (2022-09-14)
-
-**Note:** Version bump only for package @spectrum-web-components/split-button
-
-## [0.9.1](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.9.0...@spectrum-web-components/split-button@0.9.1) (2022-08-24)
-
-**Note:** Version bump only for package @spectrum-web-components/split-button
-
-# [0.9.0](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.8.10...@spectrum-web-components/split-button@0.9.0) (2022-08-09)
-
-### Features
-
-- include all Dev Mode files in side effects ([f70817c](https://github.com/adobe/spectrum-web-components/commit/f70817cc15db6dcf5cc1de2d82b4f7b0c80b1251))
-
-## [0.8.10](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.8.9...@spectrum-web-components/split-button@0.8.10) (2022-08-04)
-
-**Note:** Version bump only for package @spectrum-web-components/split-button
-
-## [0.8.9](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.8.8...@spectrum-web-components/split-button@0.8.9) (2022-07-18)
-
-**Note:** Version bump only for package @spectrum-web-components/split-button
-
-## [0.8.8](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.8.7...@spectrum-web-components/split-button@0.8.8) (2022-06-29)
-
-**Note:** Version bump only for package @spectrum-web-components/split-button
-
-## [0.8.7](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.8.6...@spectrum-web-components/split-button@0.8.7) (2022-06-07)
-
-**Note:** Version bump only for package @spectrum-web-components/split-button
-
-## [0.8.6](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.8.5...@spectrum-web-components/split-button@0.8.6) (2022-05-27)
-
-**Note:** Version bump only for package @spectrum-web-components/split-button
-
-## [0.8.5](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.8.4...@spectrum-web-components/split-button@0.8.5) (2022-05-12)
-
-**Note:** Version bump only for package @spectrum-web-components/split-button
-
-## [0.8.4](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.8.3...@spectrum-web-components/split-button@0.8.4) (2022-04-21)
-
-### Bug Fixes
-
-- allow Picker to be reparented ([39e7309](https://github.com/adobe/spectrum-web-components/commit/39e73094be38888599fb189ed4d613f09476310f))
-
-## [0.8.3](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.8.2...@spectrum-web-components/split-button@0.8.3) (2022-03-30)
-
-**Note:** Version bump only for package @spectrum-web-components/split-button
-
-## [0.8.2](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.8.1...@spectrum-web-components/split-button@0.8.2) (2022-03-08)
-
-**Note:** Version bump only for package @spectrum-web-components/split-button
-
-## [0.8.1](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.8.0...@spectrum-web-components/split-button@0.8.1) (2022-03-08)
-
-**Note:** Version bump only for package @spectrum-web-components/split-button
-
-# [0.8.0](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.7.7...@spectrum-web-components/split-button@0.8.0) (2022-03-04)
-
-### Features
-
-- leverage latest Spectrum button API ([9caf2f6](https://github.com/adobe/spectrum-web-components/commit/9caf2f6313424450c91c039fafea89bf8aa72624))
-
-## [0.7.7](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.7.6...@spectrum-web-components/split-button@0.7.7) (2022-02-22)
-
-**Note:** Version bump only for package @spectrum-web-components/split-button
-
-## [0.7.6](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.7.5...@spectrum-web-components/split-button@0.7.6) (2022-02-03)
-
-**Note:** Version bump only for package @spectrum-web-components/split-button
-
-## [0.7.5](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.7.4...@spectrum-web-components/split-button@0.7.5) (2022-02-02)
-
-### Bug Fixes
-
-- **split-button:** remove "popover" from render path ([f1cd7ca](https://github.com/adobe/spectrum-web-components/commit/f1cd7ca79f175c4d0c344c4056638f7b1548c3d9))
-
-## [0.7.4](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.7.3...@spectrum-web-components/split-button@0.7.4) (2022-01-26)
-
-**Note:** Version bump only for package @spectrum-web-components/split-button
-
-## [0.7.3](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.7.2...@spectrum-web-components/split-button@0.7.3) (2022-01-26)
-
-**Note:** Version bump only for package @spectrum-web-components/split-button
-
-## [0.7.2](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.7.1...@spectrum-web-components/split-button@0.7.2) (2022-01-07)
-
-**Note:** Version bump only for package @spectrum-web-components/split-button
-
-## [0.7.1](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.7.0...@spectrum-web-components/split-button@0.7.1) (2021-12-13)
-
-### Bug Fixes
-
-- add t-shirt sizing to Thumbnail and support for "xxs"/"xs" sizes ([520a642](https://github.com/adobe/spectrum-web-components/commit/520a642b33e2ca5a4fdc67c15ace029d33e895ff))
-
-# [0.7.0](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.6.1...@spectrum-web-components/split-button@0.7.0) (2021-11-08)
-
-**Note:** Version bump only for package @spectrum-web-components/split-button
-
-## [0.6.1](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.6.0...@spectrum-web-components/split-button@0.6.1) (2021-11-08)
-
-### Bug Fixes
-
-- abstract "hasVisibleFocusInTree" functionality and return trigger focus after close ([4f39f2c](https://github.com/adobe/spectrum-web-components/commit/4f39f2c506066b789834584d2c9c24185ea57118))
-
-# [0.6.0](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.5.11...@spectrum-web-components/split-button@0.6.0) (2021-11-02)
-
-### Bug Fixes
-
-- **picker:** use "modal" as the menu overlay interaction ([c8fbbe2](https://github.com/adobe/spectrum-web-components/commit/c8fbbe27b19702909855575b1afd38fb064e8378))
-
-### Features
-
-- adopt DNA@7 base Spectrum CSS ([e08cafd](https://github.com/adobe/spectrum-web-components/commit/e08cafda9f1b33b0163fbe5ba66754806be8f9e4))
-
-## [0.5.11](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.5.10...@spectrum-web-components/split-button@0.5.11) (2021-10-12)
-
-**Note:** Version bump only for package @spectrum-web-components/split-button
-
-## [0.5.10](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.5.9...@spectrum-web-components/split-button@0.5.10) (2021-10-05)
-
-**Note:** Version bump only for package @spectrum-web-components/split-button
-
-## [0.5.9](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.5.8...@spectrum-web-components/split-button@0.5.9) (2021-09-20)
-
-**Note:** Version bump only for package @spectrum-web-components/split-button
-
-## [0.5.8](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.5.7...@spectrum-web-components/split-button@0.5.8) (2021-09-13)
-
-**Note:** Version bump only for package @spectrum-web-components/split-button
-
-## [0.5.7](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.5.6...@spectrum-web-components/split-button@0.5.7) (2021-08-24)
-
-**Note:** Version bump only for package @spectrum-web-components/split-button
-
-## [0.5.6](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.5.5...@spectrum-web-components/split-button@0.5.6) (2021-08-17)
-
-**Note:** Version bump only for package @spectrum-web-components/split-button
-
-## [0.5.5](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.5.4...@spectrum-web-components/split-button@0.5.5) (2021-08-03)
-
-### Bug Fixes
-
-- expand sync offering for elements with overlay content ([0195843](https://github.com/adobe/spectrum-web-components/commit/0195843e9efac5760a78fa302d91139c84ea5747))
-- **split-button:** hide "selected" item from menu ([322a966](https://github.com/adobe/spectrum-web-components/commit/322a96655855f42b390ba2c94d0b017bf93aebd9))
-
-## [0.5.4](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.5.3...@spectrum-web-components/split-button@0.5.4) (2021-07-22)
-
-**Note:** Version bump only for package @spectrum-web-components/split-button
-
-## [0.5.3](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.5.2...@spectrum-web-components/split-button@0.5.3) (2021-07-01)
-
-**Note:** Version bump only for package @spectrum-web-components/split-button
-
-## [0.5.2](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.5.1...@spectrum-web-components/split-button@0.5.2) (2021-06-16)
-
-**Note:** Version bump only for package @spectrum-web-components/split-button
-
-## [0.5.1](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.5.0...@spectrum-web-components/split-button@0.5.1) (2021-06-07)
-
-**Note:** Version bump only for package @spectrum-web-components/split-button
-
-# [0.5.0](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.4.7...@spectrum-web-components/split-button@0.5.0) (2021-05-24)
-
-### Features
-
-- **tabs:** add sp-tab-panel element ([b17d276](https://github.com/adobe/spectrum-web-components/commit/b17d2765cf415578a31e5fa23515c25ff4c3922d))
-
-## [0.4.7](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.4.6...@spectrum-web-components/split-button@0.4.7) (2021-05-12)
-
-**Note:** Version bump only for package @spectrum-web-components/split-button
-
-## [0.4.6](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.4.5...@spectrum-web-components/split-button@0.4.6) (2021-04-15)
-
-**Note:** Version bump only for package @spectrum-web-components/split-button
-
-## [0.4.5](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.4.4...@spectrum-web-components/split-button@0.4.5) (2021-04-09)
-
-**Note:** Version bump only for package @spectrum-web-components/split-button
-
-## [0.4.4](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.4.3...@spectrum-web-components/split-button@0.4.4) (2021-03-29)
-
-**Note:** Version bump only for package @spectrum-web-components/split-button
-
-## [0.4.3](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.4.2...@spectrum-web-components/split-button@0.4.3) (2021-03-22)
-
-**Note:** Version bump only for package @spectrum-web-components/split-button
-
-## [0.4.2](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.4.1...@spectrum-web-components/split-button@0.4.2) (2021-03-22)
-
-### Bug Fixes
-
-- analyze errors, properly this time ([df685a2](https://github.com/adobe/spectrum-web-components/commit/df685a20f57379442d54f026b8ad7cef474a067b))
-- analyze type errors, and add deprecated syntax tests ([b7e67a1](https://github.com/adobe/spectrum-web-components/commit/b7e67a103d5a3bb355a8ee4682ef9621d8d59872))
-- remove usage where deprecated ([387db3b](https://github.com/adobe/spectrum-web-components/commit/387db3be95c98ab220e517fe12a4db7a2496fe5f))
-- simplify optionsMenu usage and fix tests ([91241b7](https://github.com/adobe/spectrum-web-components/commit/91241b7bddc434c7220fc0fbd65389d0ca38f674))
-- slot documentation ([0ebd260](https://github.com/adobe/spectrum-web-components/commit/0ebd2609bad9e95ee24428cb2fa666d23bdb85f8))
-- split-button tests & lots of cleanup based on review feedback ([10b4a04](https://github.com/adobe/spectrum-web-components/commit/10b4a04c5791d1acd9e59d48a8960b9c17aa89c7)), closes [#1189](https://github.com/adobe/spectrum-web-components/issues/1189)
-
-## [0.4.1](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.4.0...@spectrum-web-components/split-button@0.4.1) (2021-03-05)
-
-**Note:** Version bump only for package @spectrum-web-components/split-button
-
-# [0.4.0](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.3.4...@spectrum-web-components/split-button@0.4.0) (2021-03-04)
-
-### Bug Fixes
-
-- support a wider number of sizes ([ee44978](https://github.com/adobe/spectrum-web-components/commit/ee4497830da0d3bc63d4414ad5548291a39588c7))
-
-### Features
-
-- use latest exports specification ([a7ecf4b](https://github.com/adobe/spectrum-web-components/commit/a7ecf4b6da7996f36a8a89f62cc2384709497008))
-
-## [0.3.4](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.3.3...@spectrum-web-components/split-button@0.3.4) (2021-02-19)
-
-### Bug Fixes
-
-- correct dependency graph ([69165eb](https://github.com/adobe/spectrum-web-components/commit/69165eb7444aea66fd1041996c44ed43e39c3ebc))
-
-## [0.3.3](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.3.2...@spectrum-web-components/split-button@0.3.3) (2021-02-11)
-
-### Bug Fixes
-
-- update to latest spectrum-css packages ([a5ca19f](https://github.com/adobe/spectrum-web-components/commit/a5ca19f67d5b3f0951667c4441d4d977bf1e0937))
-
-## [0.3.2](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.3.1...@spectrum-web-components/split-button@0.3.2) (2021-02-02)
-
-**Note:** Version bump only for package @spectrum-web-components/split-button
-
-## [0.3.1](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.3.0...@spectrum-web-components/split-button@0.3.1) (2021-01-28)
-
-**Note:** Version bump only for package @spectrum-web-components/split-button
-
-# [0.3.0](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.1.5...@spectrum-web-components/split-button@0.3.0) (2021-01-21)
-
-### Bug Fixes
-
-- include the "types" entry in package.json files ([b432f59](https://github.com/adobe/spectrum-web-components/commit/b432f5982b3b79f80af12f6d0312cbe2285e608b))
-- stop merging selectors in a way that alters the cascade ([369388f](https://github.com/adobe/spectrum-web-components/commit/369388f8cc147543891087991c569f849ddb9b38))
-- update latest Spectrum CSS beta releases ([d8d3acc](https://github.com/adobe/spectrum-web-components/commit/d8d3acc86de31e58219db6ba2a9d045b83cbe103))
-- use icons without "size" values ([3fc7c91](https://github.com/adobe/spectrum-web-components/commit/3fc7c91713793a928082eae15fc3d9dec638a31a))
-- use latest @spectrum-css/\* versions ([c35eb86](https://github.com/adobe/spectrum-web-components/commit/c35eb86defd89a0c36b5ea186f6d40f20851b5e5))
-
-### Features
-
-- apply sizedMixin for t-shirt sizing ([d7b63fb](https://github.com/adobe/spectrum-web-components/commit/d7b63fb0db06b5a8a412fea8370964f4db9d18ae))
-- use SixedMixin to manage "size" property ([8819821](https://github.com/adobe/spectrum-web-components/commit/88198212cb495833ed2e7644f95b43dca915318d))
-- **action-button:** add action button pattern ([03ac00a](https://github.com/adobe/spectrum-web-components/commit/03ac00a710290e6a78340f206d88385a4f8ae8c2))
-- **button:** use synthetic button instead of native ([49e94bc](https://github.com/adobe/spectrum-web-components/commit/49e94bcf79da6ec1ef05f4197042f992922b91ca))
-- **split-button:** update spectrum css input ([7d83331](https://github.com/adobe/spectrum-web-components/commit/7d83331fae9ff181c98ba7033d69bdf276790e7f))
-
-# [0.2.0](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.1.5...@spectrum-web-components/split-button@0.2.0) (2021-01-13)
-
-### Bug Fixes
-
-- include the "types" entry in package.json files ([b432f59](https://github.com/adobe/spectrum-web-components/commit/b432f5982b3b79f80af12f6d0312cbe2285e608b))
-- stop merging selectors in a way that alters the cascade ([369388f](https://github.com/adobe/spectrum-web-components/commit/369388f8cc147543891087991c569f849ddb9b38))
-- update latest Spectrum CSS beta releases ([d8d3acc](https://github.com/adobe/spectrum-web-components/commit/d8d3acc86de31e58219db6ba2a9d045b83cbe103))
-- use icons without "size" values ([3fc7c91](https://github.com/adobe/spectrum-web-components/commit/3fc7c91713793a928082eae15fc3d9dec638a31a))
-- use latest @spectrum-css/\* versions ([c35eb86](https://github.com/adobe/spectrum-web-components/commit/c35eb86defd89a0c36b5ea186f6d40f20851b5e5))
-
-### Features
-
-- apply sizedMixin for t-shirt sizing ([d7b63fb](https://github.com/adobe/spectrum-web-components/commit/d7b63fb0db06b5a8a412fea8370964f4db9d18ae))
-- use SixedMixin to manage "size" property ([8819821](https://github.com/adobe/spectrum-web-components/commit/88198212cb495833ed2e7644f95b43dca915318d))
-- **action-button:** add action button pattern ([03ac00a](https://github.com/adobe/spectrum-web-components/commit/03ac00a710290e6a78340f206d88385a4f8ae8c2))
-- **button:** use synthetic button instead of native ([49e94bc](https://github.com/adobe/spectrum-web-components/commit/49e94bcf79da6ec1ef05f4197042f992922b91ca))
-- **split-button:** update spectrum css input ([7d83331](https://github.com/adobe/spectrum-web-components/commit/7d83331fae9ff181c98ba7033d69bdf276790e7f))
-
-## [0.1.5](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.1.4...@spectrum-web-components/split-button@0.1.5) (2020-10-12)
-
-**Note:** Version bump only for package @spectrum-web-components/split-button
-
-## [0.1.4](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.1.3...@spectrum-web-components/split-button@0.1.4) (2020-10-12)
-
-**Note:** Version bump only for package @spectrum-web-components/split-button
-
-## [0.1.3](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.1.2...@spectrum-web-components/split-button@0.1.3) (2020-09-25)
-
-**Note:** Version bump only for package @spectrum-web-components/split-button
-
-## [0.1.2](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.1.1...@spectrum-web-components/split-button@0.1.2) (2020-09-15)
-
-**Note:** Version bump only for package @spectrum-web-components/split-button
-
-## [0.1.1](https://github.com/adobe/spectrum-web-components/compare/@spectrum-web-components/split-button@0.1.0...@spectrum-web-components/split-button@0.1.1) (2020-09-14)
-
-### Bug Fixes
-
-- **split-button:** test a11y correctly, find issues, fix them ([4283994](https://github.com/adobe/spectrum-web-components/commit/4283994e0456813ee53be4a1bfd6b53965e41433))
-
-# 0.1.0 (2020-08-31)
-
-### Bug Fixes
-
-- **split-button:** follow visible tab order ([966d3b6](https://github.com/adobe/spectrum-web-components/commit/966d3b601a1eda5bf45394fad3bb7d100c7d3b84))
-- **tags:** support distant sibling selectors ([a8dcf7f](https://github.com/adobe/spectrum-web-components/commit/a8dcf7fb4d30a1bf0e0cdc3ac5e044d75701c5fa))
-
-### Features
-
-- **split-button:** add split-button pattern ([d3d8240](https://github.com/adobe/spectrum-web-components/commit/d3d8240225c5c11813e16c7ca64c75c5fd036bc6))
-- update to Spectrum CSS v3.0.0 ([e8b3d8f](https://github.com/adobe/spectrum-web-components/commit/e8b3d8f75c77c04b4d7af126b91b0f6ad2a40742))
-- **split-button:** add split-button pattern ([012b7f8](https://github.com/adobe/spectrum-web-components/commit/012b7f8ca88213c246683eb65f27b8cfe59e60bb))
-- **split-button:** add split-button pattern ([4833a59](https://github.com/adobe/spectrum-web-components/commit/4833a598bb3da3552d194586350a3888dba79543))
diff --git a/packages/split-button/README.md b/packages/split-button/README.md
deleted file mode 100644
index 49ef227b36..0000000000
--- a/packages/split-button/README.md
+++ /dev/null
@@ -1,164 +0,0 @@
-## Description
-
-An `sp-split-button` surfaces an immediately envokable action via it's main button, as well as a list of alternative actions in its toggleable menu overlay. By default, any actions envoked from the overlay will replace the main action button. When leveraging `[type="more"]` the action will be envoked, but the main button will remain the action initally persribed by the implementor.
-
-### Usage
-
-[](https://www.npmjs.com/package/@spectrum-web-components/split-button)
-[](https://bundlephobia.com/result?p=@spectrum-web-components/splitbutton)
-[](https://webcomponents.dev/edit/collection/fO75441E1Q5ZlI0e9pgq/wyDxsnwOiGaxibKODm3o/src/index.ts)
-
-```
-yarn add @spectrum-web-components/split-button
-```
-
-Import the side effectful registration of `` via:
-
-```
-import '@spectrum-web-components/split-button/sp-split-button.js';
-```
-
-The default of `` will load dependencies in `@spectrum-web-components/overlay` asynchronously via a dynamic import. In the case that you would like to import those tranverse dependencies statically, import the side effectful registration of `` as follows:
-
-```
-import '@spectrum-web-components/split-button/sync/sp-split-button.js';
-```
-
-When looking to leverage the `SplitButton` base class as a type and/or for extension purposes, do so via:
-
-```
-import { SplitButton } from '@spectrum-web-components/split-button';
-```
-
-## Sizes
-
-
-Small
-
-
-```html
-
- Option 1
- Option Extended
-
-```
-
-
-Medium
-
-
-```html
-
- Option 1
- Option Extended
-
-```
-
-
-Large
-
-
-```html
-
- Option 1
- Option Extended
-
-```
-
-
-Extra Large
-
-
-```html
-
- Option 1
- Option Extended
-
-```
-
-
-
-
-## Variants
-
-### CTA
-
-```html
-
- Option 1
- Option Extended
-
-
- Option 1
- Option Extended
-
-```
-
-### Primary
-
-```html
-
- Option 1
- Option Extended
-
-
- Option 1
- Option Extended
-
-```
-
-### Secondary
-
-```html
-
- Option 1
- Option Extended
-
-
- Option 1
- Option Extended
-
-```
-
-## More button
-
-When using the `more` value of the `type` attribute, an `` will maintain its default option value without regard to the most recently used option.
-
-### CTA
-
-```html
-
- Option 1
- Option Extended
-
-
- Option 1
- Option Extended
-
-```
-
-### Primary
-
-```html
-
- Option 1
- Option Extended
-
-
- Option 1
- Option Extended
-
-```
-
-### Secondary
-
-```html
-
- Option 1
- Option Extended
-
-
- Option 1
- Option Extended
-
-```
diff --git a/packages/split-button/exports.json b/packages/split-button/exports.json
deleted file mode 100644
index 0c86437a83..0000000000
--- a/packages/split-button/exports.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
- "./src/*": "./src/*",
- "./sp-split-button.js": "./sp-split-button.js",
- "./sync/sp-split-button.js": "./sync/sp-split-button.js"
-}
diff --git a/packages/split-button/package.json b/packages/split-button/package.json
deleted file mode 100644
index b2e2e42b42..0000000000
--- a/packages/split-button/package.json
+++ /dev/null
@@ -1,85 +0,0 @@
-{
- "name": "@spectrum-web-components/split-button",
- "version": "0.49.0",
- "publishConfig": {
- "access": "public"
- },
- "description": "",
- "license": "Apache-2.0",
- "repository": {
- "type": "git",
- "url": "https://github.com/adobe/spectrum-web-components.git",
- "directory": "packages/split-button"
- },
- "author": "",
- "homepage": "https://opensource.adobe.com/spectrum-web-components/components/split-button",
- "bugs": {
- "url": "https://github.com/adobe/spectrum-web-components/issues"
- },
- "main": "./src/index.js",
- "module": "./src/index.js",
- "type": "module",
- "exports": {
- ".": {
- "development": "./src/index.dev.js",
- "default": "./src/index.js"
- },
- "./package.json": "./package.json",
- "./src/SplitButton.js": {
- "development": "./src/SplitButton.dev.js",
- "default": "./src/SplitButton.js"
- },
- "./src/index.js": {
- "development": "./src/index.dev.js",
- "default": "./src/index.js"
- },
- "./src/split-button.css.js": "./src/split-button.css.js",
- "./sp-split-button.js": {
- "development": "./sp-split-button.dev.js",
- "default": "./sp-split-button.js"
- },
- "./sync/sp-split-button.js": {
- "development": "./sync/sp-split-button.dev.js",
- "default": "./sync/sp-split-button.js"
- }
- },
- "scripts": {
- "test": "karma start --coverage"
- },
- "files": [
- "**/*.d.ts",
- "**/*.js",
- "**/*.js.map",
- "custom-elements.json",
- "!stories/",
- "!test/"
- ],
- "keywords": [
- "spectrum css",
- "web components",
- "lit-element",
- "lit-html"
- ],
- "dependencies": {
- "@spectrum-web-components/base": "^0.49.0",
- "@spectrum-web-components/button": "^0.49.0",
- "@spectrum-web-components/icon": "^0.49.0",
- "@spectrum-web-components/icons-ui": "^0.49.0",
- "@spectrum-web-components/icons-workflow": "^0.49.0",
- "@spectrum-web-components/menu": "^0.49.0",
- "@spectrum-web-components/overlay": "^0.49.0",
- "@spectrum-web-components/picker": "^0.49.0",
- "@spectrum-web-components/popover": "^0.49.0"
- },
- "devDependencies": {
- "@spectrum-css/splitbutton": "^8.1.2"
- },
- "types": "./src/index.d.ts",
- "customElements": "custom-elements.json",
- "deprecationNotice": "@spectrum-web-components/split-button is deprecated and will be removed in the SWC 1.0 release.. Use a button group to show any additional actions related to the most critical action. Refer Spectrum documentation for more information.",
- "sideEffects": [
- "./sp-*.js",
- "./**/*.dev.js",
- "./sync/sp-*.js"
- ]
-}
diff --git a/packages/split-button/src/SplitButton.ts b/packages/split-button/src/SplitButton.ts
deleted file mode 100644
index c61735c2a8..0000000000
--- a/packages/split-button/src/SplitButton.ts
+++ /dev/null
@@ -1,224 +0,0 @@
-/*
-Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-
-import {
- CSSResultArray,
- DefaultElementSize,
- html,
- PropertyValues,
- SizedMixin,
- TemplateResult,
-} from '@spectrum-web-components/base';
-import {
- property,
- query,
-} from '@spectrum-web-components/base/src/decorators.js';
-import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
-
-import '@spectrum-web-components/popover/sp-popover.js';
-import '@spectrum-web-components/menu/sp-menu.js';
-import '@spectrum-web-components/button/sp-button.js';
-import { ButtonVariants } from '@spectrum-web-components/button';
-import { PickerBase } from '@spectrum-web-components/picker';
-import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';
-import '@spectrum-web-components/icons-workflow/icons/sp-icon-more.js';
-import chevronStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';
-import styles from './split-button.css.js';
-
-const chevronClass = {
- s: 'spectrum-UIIcon-ChevronDown75',
- m: 'spectrum-UIIcon-ChevronDown100',
- l: 'spectrum-UIIcon-ChevronDown200',
- xl: 'spectrum-UIIcon-ChevronDown300',
-};
-
-export type SplitButtonTypes = 'field' | 'more';
-
-/**
- * @element sp-split-button
- *
- * @slot - menu items to be listed in the Button
- * @slot tooltip - Tooltip to to be applied to the the main Button
- **/
-export class SplitButton extends SizedMixin(PickerBase) {
- public static override get styles(): CSSResultArray {
- return [styles, chevronStyles];
- }
-
- @property({ type: Boolean, reflect: true })
- public left = false;
-
- /**
- * The visual variant to apply to this button.
- */
- @property({ reflect: true })
- public variant: ButtonVariants = 'accent';
-
- @property({ type: String })
- public type: SplitButtonTypes = 'field';
-
- @query('.trigger')
- private trigger!: HTMLButtonElement;
-
- protected override listRole: 'listbox' | 'menu' = 'menu';
- protected override itemRole = 'menuitem';
-
- // PickerBase has an interactionStrategy that needs the trigger button from the split button
- @query('.trigger')
- public override button!: HTMLButtonElement;
-
- public override get focusElement(): HTMLElement {
- if (this.open) {
- return this.optionsMenu;
- }
- if (this.left) {
- return this.trigger;
- }
- return this.button;
- }
-
- private passClick(): void {
- const target =
- this.type === 'more'
- ? this.menuItems[0]
- : this.selectedItem || this.menuItems[0];
- if (target) {
- target.click();
- }
- }
-
- protected override get buttonContent(): TemplateResult[] {
- return [
- html`
- ): void {
- if (changes.has('type')) {
- if (this.type === 'more') {
- this.selects = undefined;
- } else {
- this.selects = 'single';
- }
- }
- if (window.__swc.DEBUG) {
- window.__swc.warn(
- this,
- `<${this.localName}> is deprecated and will be removed in the SWC 1.0 release. Use a Button Group to show any additional actions related to the most critical action.`,
- 'https://opensource.adobe.com/spectrum-web-components/components/split-button/#deprecation',
- { level: 'deprecation' }
- );
- }
- super.update(changes);
- }
-
- protected override render(): TemplateResult {
- const treatment = ['cta', 'accent'].includes(this.variant)
- ? 'fill'
- : 'outline';
- const buttons: TemplateResult[] = [
- html`
-
- ${this.buttonContent}
-
- `,
- html`
-
- ${this.type === 'field'
- ? html`
-
- `,
- ];
- if (this.left) {
- buttons.reverse();
- }
- return html`
- ${buttons} ${this.renderMenu}
- `;
- }
-
- protected override bindButtonKeydownListener(): void {
- this.trigger.addEventListener('keydown', this.handleKeydown);
- }
-
- protected override async manageSelection(): Promise {
- await this.manageSplitButtonItems();
- await super.manageSelection();
- }
-
- private async manageSplitButtonItems(): Promise {
- if (!this.menuItems.length) {
- await this.optionsMenu.updateComplete;
- if (!this.menuItems.length) {
- return;
- }
- }
-
- if (this.type === 'more') {
- this.menuItems[0].hidden = true;
- this.menuItems.forEach((el) => (el.selected = false));
- this.selectedItem = this.menuItems[0];
- } else {
- this.selectedItem = this.selectedItem || this.menuItems[0];
- }
- this.value = this.selectedItem.value;
- }
-}
diff --git a/packages/split-button/src/spectrum-config.js b/packages/split-button/src/spectrum-config.js
deleted file mode 100644
index 27a5b4983f..0000000000
--- a/packages/split-button/src/spectrum-config.js
+++ /dev/null
@@ -1,65 +0,0 @@
-// @ts-check
-/*
-Copyright 2023 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-
-import {
- builder,
- converterFor,
-} from '../../../tasks/process-spectrum-utils.js';
-
-const converter = converterFor('spectrum-SplitButton');
-
-/**
- * @type { import('../../../tasks/spectrum-css-converter').SpectrumCSSConverter }
- */
-const config = {
- conversions: [
- {
- inPackage: '@spectrum-css/splitbutton',
- outPackage: 'split-button',
- fileName: 'split-button',
- components: [
- converter.classToHost(),
- converter.classToAttribute('spectrum-SplitButton--left'),
- converter.classToId('spectrum-SplitButton-action', 'button'),
- converter.classToClass('spectrum-SplitButton-trigger'),
- converter.classToClass('spectrum-SplitButton-icon'),
- converter.classToClass('spectrum-Button-label', 'label'),
- {
- find: builder.class('spectrum-Button--accent'),
- replace: builder.attribute('variant', 'accent'),
- hoist: false,
- },
- {
- find: [builder.pseudoClass('focus-visible')],
- replace: [
- {
- replace: builder.pseudoClass('focus-visible'),
- hoist: false,
- },
- ],
- },
- {
- find: [builder.pseudoClass('focus')],
- replace: [
- {
- replace: builder.pseudoClass('focus'),
- hoist: false,
- },
- ],
- },
- ],
- },
- ],
-};
-
-export default config;
diff --git a/packages/split-button/src/spectrum-split-button.css b/packages/split-button/src/spectrum-split-button.css
deleted file mode 100644
index af520feda2..0000000000
--- a/packages/split-button/src/spectrum-split-button.css
+++ /dev/null
@@ -1,251 +0,0 @@
-/*
-Copyright 2023 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-
-/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
-:host {
- --spectrum-splitbutton-trigger-border-left: 0;
- --spectrum-splitbutton-trigger-min-width: 0;
- --spectrum-spltibutton-margin-left: 0;
- --spectrum-splitbutton-icon-gap: var(--spectrum-global-dimension-size-150);
- --spectrum-splitbutton-border-radius-edge: var(
- --spectrum-alias-border-radius-small
- );
-}
-
-:host([dir='rtl']),
-:host([dir='rtl']) {
- --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
-}
-
-.trigger {
- --spectrum-splitbutton-trigger-round-edge-padding: var(
- --spectrum-global-dimension-size-125
- );
- --spectrum-splitbutton-trigger-flat-edge-padding: var(
- --spectrum-global-dimension-size-100
- );
- --spectrum-splitbutton-cta-trigger-flat-edge-padding: calc(
- var(--spectrum-splitbutton-trigger-flat-edge-padding) -
- var(
- --spectrum-button-m-primary-outline-texticon-border-size,
- var(--spectrum-alias-border-size-thick)
- )
- );
-}
-
-#button {
- --spectrum-splitbutton-flat-edge-padding: calc(
- var(--spectrum-button-m-primary-outline-texticon-padding-left) -
- var(
- --spectrum-button-m-primary-outline-texticon-border-size,
- var(--spectrum-alias-border-size-thick)
- ) * 2
- );
- --spectrum-splitbutton-round-edge-padding: var(
- --spectrum-button-m-primary-outline-texticon-padding-right,
- var(--spectrum-global-dimension-size-200)
- );
- --spectrum-splitbutton-cta-flat-edge-padding: calc(
- var(--spectrum-button-m-primary-outline-texticon-padding-left) -
- var(
- --spectrum-button-m-primary-outline-texticon-border-size,
- var(--spectrum-alias-border-size-thick)
- ) * 3
- );
-}
-
-:host {
- vertical-align: top;
- flex-direction: row;
- display: inline-flex;
- position: relative;
-}
-
-#button {
- border-start-start-radius: var(
- --spectrum-button-m-primary-outline-texticon-border-radius,
- var(--spectrum-global-dimension-size-200)
- );
- border-start-end-radius: 0;
- border-end-end-radius: 0;
- border-end-start-radius: var(
- --spectrum-button-m-primary-outline-texticon-border-radius,
- var(--spectrum-global-dimension-size-200)
- );
- margin-inline-start: 0;
- padding-inline-start: var(--spectrum-splitbutton-round-edge-padding);
- padding-inline-end: var(--spectrum-splitbutton-flat-edge-padding);
-}
-
-#button[variant='accent'] {
- margin-inline-end: var(
- --spectrum-button-m-primary-outline-texticon-border-size,
- var(--spectrum-alias-border-size-thick)
- );
- padding-inline-end: var(--spectrum-splitbutton-cta-flat-edge-padding);
-}
-
-#button:after {
- border-start-end-radius: var(--spectrum-splitbutton-border-radius-edge);
- border-end-end-radius: var(--spectrum-splitbutton-border-radius-edge);
-}
-
-.trigger {
- border-inline-start-width: var(--spectrum-splitbutton-trigger-border-left);
- min-inline-size: var(--spectrum-splitbutton-trigger-min-width);
- border-start-start-radius: 0;
- border-start-end-radius: var(
- --spectrum-button-m-primary-outline-texticon-border-radius,
- var(--spectrum-global-dimension-size-200)
- );
- border-end-end-radius: var(
- --spectrum-button-m-primary-outline-texticon-border-radius,
- var(--spectrum-global-dimension-size-200)
- );
- border-end-start-radius: 0;
- margin-inline-start: 0;
- padding-inline-start: var(--spectrum-splitbutton-trigger-flat-edge-padding);
- padding-inline-end: var(--spectrum-splitbutton-trigger-round-edge-padding);
-}
-
-.trigger[variant='accent'] {
- border-inline-start-width: var(
- --spectrum-button-m-primary-outline-texticon-border-size,
- var(--spectrum-alias-border-size-thick)
- );
- padding-inline-start: var(
- --spectrum-splitbutton-cta-trigger-flat-edge-padding
- );
-}
-
-.trigger:focus-visible {
- box-shadow: none;
-}
-
-.trigger:after {
- border-start-start-radius: var(--spectrum-splitbutton-border-radius-edge);
- border-end-start-radius: var(--spectrum-splitbutton-border-radius-edge);
-}
-
-.icon {
- margin-block-start: 1px;
- display: block;
-}
-
-#button,
-.trigger {
- position: relative;
-}
-
-#button:focus-visible,
-.trigger:focus-visible {
- z-index: 1;
- outline: none;
-}
-
-#button.spectrum-Pagination-prevButton .spectrum-Icon,
-.trigger.spectrum-Pagination-prevButton .spectrum-Icon {
- transform: var(--spectrum-logical-rotation,) rotate(180deg);
-}
-
-#button.spectrum-Pagination-nextButton .spectrum-Icon,
-.trigger.spectrum-Pagination-nextButton .spectrum-Icon {
- transform: var(--spectrum-logical-rotation);
-}
-
-#button .label + .spectrum-Icon {
- margin-inline-start: var(--spectrum-splitbutton-icon-gap);
-}
-
-:host([left]) #button {
- border-start-start-radius: 0;
- border-start-end-radius: var(
- --spectrum-button-m-primary-outline-texticon-border-radius,
- var(--spectrum-global-dimension-size-200)
- );
- border-end-end-radius: var(
- --spectrum-button-m-primary-outline-texticon-border-radius,
- var(--spectrum-global-dimension-size-200)
- );
- border-end-start-radius: 0;
- margin-inline-start: var(--spectrum-spltibutton-margin-left);
- margin-inline-end: 0;
- padding-inline-start: var(--spectrum-splitbutton-flat-edge-padding);
- padding-inline-end: var(--spectrum-splitbutton-round-edge-padding);
-}
-
-:host([left]) #button:after {
- border-start-start-radius: var(--spectrum-splitbutton-border-radius-edge);
- border-start-end-radius: var(
- --spectrum-button-m-primary-outline-texticon-border-radius,
- var(--spectrum-global-dimension-size-200)
- );
- border-end-end-radius: var(
- --spectrum-button-m-primary-outline-texticon-border-radius,
- var(--spectrum-global-dimension-size-200)
- );
- border-end-start-radius: var(--spectrum-splitbutton-border-radius-edge);
-}
-
-:host([left]) #button[variant='accent'] {
- margin-inline-start: var(
- --spectrum-button-m-primary-outline-texticon-border-size,
- var(--spectrum-alias-border-size-thick)
- );
- padding-inline-start: var(--spectrum-splitbutton-cta-flat-edge-padding);
-}
-
-:host([left]) .trigger {
- border-inline-start-width: var(
- --spectrum-button-m-primary-outline-texticon-border-size,
- var(--spectrum-alias-border-size-thick)
- );
- border-inline-end-width: var(--spectrum-splitbutton-trigger-border-left);
- border-start-start-radius: var(
- --spectrum-button-m-primary-outline-texticon-border-radius,
- var(--spectrum-global-dimension-size-200)
- );
- border-start-end-radius: 0;
- border-end-end-radius: 0;
- border-end-start-radius: var(
- --spectrum-button-m-primary-outline-texticon-border-radius,
- var(--spectrum-global-dimension-size-200)
- );
- margin-inline-end: 0;
- padding-inline-start: var(
- --spectrum-splitbutton-trigger-round-edge-padding
- );
- padding-inline-end: var(--spectrum-splitbutton-trigger-flat-edge-padding);
-}
-
-:host([left]) .trigger:after {
- border-start-start-radius: var(
- --spectrum-button-m-primary-outline-texticon-border-radius,
- var(--spectrum-global-dimension-size-200)
- );
- border-start-end-radius: var(--spectrum-splitbutton-border-radius-edge);
- border-end-end-radius: var(--spectrum-splitbutton-border-radius-edge);
- border-end-start-radius: var(
- --spectrum-button-m-primary-outline-texticon-border-radius,
- var(--spectrum-global-dimension-size-200)
- );
-}
-
-:host([left]) .trigger[variant='accent'] {
- border-inline-end-width: var(
- --spectrum-button-m-primary-outline-texticon-border-size,
- var(--spectrum-alias-border-size-thick)
- );
- padding-inline-end: var(
- --spectrum-splitbutton-cta-trigger-flat-edge-padding
- );
-}
diff --git a/packages/split-button/src/split-button.css b/packages/split-button/src/split-button.css
deleted file mode 100644
index 76c2db6d82..0000000000
--- a/packages/split-button/src/split-button.css
+++ /dev/null
@@ -1,80 +0,0 @@
-/*
-Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-
-@import url('./spectrum-split-button.css');
-
-:host > sp-menu {
- display: none;
-}
-
-#button {
- --spectrum-splitbutton-flat-edge-padding: calc(
- var(--spectrum-button-edge-to-text) -
- var(
- --spectrum-button-border-width,
- var(--spectrum-alias-border-size-thick)
- ) * 2
- );
- --spectrum-splitbutton-round-edge-padding: var(
- --spectrum-button-edge-to-visual,
- var(--spectrum-global-dimension-size-200)
- );
- --spectrum-splitbutton-cta-flat-edge-padding: calc(
- var(--spectrum-button-edge-to-text) -
- var(
- --spectrum-button-border-width,
- var(--spectrum-alias-border-size-thick)
- ) * 3
- );
-}
-
-.trigger {
- --spectrum-splitbutton-trigger-flat-edge-padding: calc(
- var(--spectrum-button-edge-to-text) -
- var(
- --spectrum-button-border-width,
- var(--spectrum-alias-border-size-thick)
- ) * 2
- );
- --spectrum-splitbutton-trigger-round-edge-padding: var(
- --spectrum-button-edge-to-visual,
- var(--spectrum-global-dimension-size-200)
- );
- --spectrum-splitbutton-cta-trigger-flat-edge-padding: calc(
- var(--spectrum-button-edge-to-text) -
- var(
- --spectrum-button-border-width,
- var(--spectrum-alias-border-size-thick)
- ) * 3
- );
-}
-
-/**
- * Begin workaround for SplitButton not natively supporting t-shirt sizes.
- */
-sp-button {
- --spectrum-button-m-primary-outline-texticon-border-radius: var(
- --spectrum-button-border-radius
- );
-}
-
-/**
- * End workaround for SplitButton not natively supporting t-shirt sizes.
- */
-
-sp-overlay:not(:defined) {
- display: none;
-}
-
-.icon {
- align-self: center;
-}
diff --git a/packages/split-button/stories/index.ts b/packages/split-button/stories/index.ts
deleted file mode 100644
index 175280722b..0000000000
--- a/packages/split-button/stories/index.ts
+++ /dev/null
@@ -1,178 +0,0 @@
-/*
-Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-
-import { html, TemplateResult } from '@spectrum-web-components/base';
-import type { ElementSize } from '@spectrum-web-components/base';
-
-import '@spectrum-web-components/split-button/sp-split-button.js';
-import '@spectrum-web-components/menu/sp-menu-item.js';
-import type { ButtonVariants } from '@spectrum-web-components/button';
-import type { SplitButtonTypes } from '@spectrum-web-components/split-button/src/SplitButton.js';
-
-export interface SplitButtonMenuOptions {
- firstItemHandler?: (event?: Event) => void;
- secondItemHandler?: (event?: Event) => void;
- thirdItemHandler?: (event?: Event) => void;
-}
-
-const menu = ({
- firstItemHandler = function () {
- return;
- },
- secondItemHandler = function () {
- return;
- },
- thirdItemHandler = function () {
- return;
- },
-}: SplitButtonMenuOptions): TemplateResult => html`
- Option 1
-
- Option Really Extended
-
- Short
-`;
-
-export interface Properties extends SplitButtonMenuOptions {
- disabled?: boolean;
- invalid?: boolean;
- left?: boolean;
- open?: boolean;
- size?: ElementSize;
- type?: SplitButtonTypes;
- variant?: ButtonVariants;
-}
-
-export const args = {
- disabled: false,
- invalid: false,
- left: false,
- open: false,
- type: 'field' as SplitButtonTypes,
- variant: 'accent' as ButtonVariants,
-};
-
-export const argTypes = {
- disabled: {
- name: 'disabled',
- type: { name: 'boolean', required: false },
- description:
- 'Disable this control. It will not receive focus or events.',
- table: {
- type: { summary: 'boolean' },
- defaultValue: { summary: false },
- },
- control: {
- type: 'boolean',
- },
- },
- invalid: {
- name: 'invalid',
- type: { name: 'boolean', required: false },
- table: {
- type: { summary: 'boolean' },
- defaultValue: { summary: false },
- },
- control: {
- type: 'boolean',
- },
- },
- left: {
- name: 'left',
- type: { name: 'boolean', required: false },
- description: 'Whether the split begins on the left.',
- table: {
- type: { summary: 'boolean' },
- defaultValue: { summary: false },
- },
- control: {
- type: 'boolean',
- },
- },
- open: {
- name: 'open',
- type: { name: 'boolean', required: false },
- description: 'Whether the picker menu is open.',
- table: {
- type: { summary: 'boolean' },
- defaultValue: { summary: false },
- },
- control: {
- type: 'boolean',
- },
- },
- type: {
- name: 'type',
- type: { name: 'string', required: false },
- description:
- 'Whether the split button shows the chosen action from the overlay menu. The `more` type maintains its original value.',
- table: {
- type: { summary: 'string' },
- defaultValue: { summary: 'field' },
- },
- control: {
- type: 'inline-radio',
- options: ['field', 'more'],
- },
- },
- variant: {
- name: 'variant',
- type: { name: 'string', required: false },
- description: 'The visual variant to apply to the button.',
- table: {
- type: { summary: 'string' },
- defaultValue: { summary: 'cta' },
- },
- control: {
- type: 'inline-radio',
- options: [
- 'accent',
- 'primary',
- 'secondary',
- 'negative',
- 'black',
- 'white',
- ],
- },
- },
-};
-
-export const parameters = {
- badges: ['deprecated'],
-};
-
-export const splitbutton = (
- properties: Properties = {}
-): TemplateResult => html`
-
- ${menu(properties)}
-
-`;
-
-const left = true;
-
-export const renderSplitButtonSet = (
- properties: Properties = {}
-): TemplateResult => html`
- ${splitbutton(properties)}
- ${splitbutton({
- ...properties,
- left,
- })}
-`;
diff --git a/packages/split-button/stories/split-button-accent-field.stories.ts b/packages/split-button/stories/split-button-accent-field.stories.ts
deleted file mode 100644
index 59cdaf9e19..0000000000
--- a/packages/split-button/stories/split-button-accent-field.stories.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-/*
-Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-
-import { ElementSizes, TemplateResult } from '@spectrum-web-components/base';
-import {
- args,
- argTypes,
- parameters,
- renderSplitButtonSet,
- splitbutton,
-} from './index.js';
-import type { Properties } from './index.js';
-
-import '@spectrum-web-components/split-button/sp-split-button.js';
-import '@spectrum-web-components/menu/sp-menu-item.js';
-import { SplitButtonTypes } from '@spectrum-web-components/split-button/src/SplitButton.js';
-import { ButtonVariants } from '@spectrum-web-components/button';
-
-const variant = 'accent' as ButtonVariants;
-const type = 'field' as SplitButtonTypes;
-
-export default {
- title: 'Split Button/Accent/Field',
- component: 'sp-split-button',
- args: {
- ...args,
- variant,
- type,
- },
- argTypes,
- parameters,
-};
-
-export const s = (args: Properties): TemplateResult =>
- renderSplitButtonSet(args);
-s.args = { size: ElementSizes.s };
-
-export const sOpen = (args: Properties): TemplateResult => splitbutton(args);
-sOpen.args = { size: ElementSizes.s, open: true };
-
-export const m = (args: Properties): TemplateResult =>
- renderSplitButtonSet(args);
-m.args = { size: ElementSizes.m };
-
-export const mOpen = (args: Properties): TemplateResult => splitbutton(args);
-mOpen.args = { size: ElementSizes.m, open: true };
-
-export const l = (args: Properties): TemplateResult =>
- renderSplitButtonSet(args);
-l.args = { size: ElementSizes.l };
-
-export const lOpen = (args: Properties): TemplateResult => splitbutton(args);
-lOpen.args = { size: ElementSizes.l, open: true };
-
-export const XL = (args: Properties): TemplateResult =>
- renderSplitButtonSet(args);
-XL.args = { size: ElementSizes.xl };
-
-export const XLOpen = (args: Properties): TemplateResult => splitbutton(args);
-XLOpen.args = { size: ElementSizes.xl, open: true };
diff --git a/packages/split-button/stories/split-button-accent-more.stories.ts b/packages/split-button/stories/split-button-accent-more.stories.ts
deleted file mode 100644
index c6cf3c3255..0000000000
--- a/packages/split-button/stories/split-button-accent-more.stories.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-/*
-Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-
-import { ElementSizes, TemplateResult } from '@spectrum-web-components/base';
-import {
- args,
- argTypes,
- parameters,
- renderSplitButtonSet,
- splitbutton,
-} from './index.js';
-import type { Properties } from './index.js';
-
-import '@spectrum-web-components/split-button/sp-split-button.js';
-import '@spectrum-web-components/menu/sp-menu-item.js';
-import { SplitButtonTypes } from '@spectrum-web-components/split-button/src/SplitButton.js';
-import { ButtonVariants } from '@spectrum-web-components/button';
-
-const variant = 'accent' as ButtonVariants;
-const type = 'more' as SplitButtonTypes;
-
-export default {
- title: 'Split Button/Accent/More',
- component: 'sp-split-button',
- args: {
- ...args,
- variant,
- type,
- },
- argTypes,
- parameters,
-};
-
-export const s = (args: Properties): TemplateResult =>
- renderSplitButtonSet(args);
-s.args = { size: ElementSizes.s };
-
-export const sOpen = (args: Properties): TemplateResult => splitbutton(args);
-sOpen.args = { size: ElementSizes.s, open: true };
-
-export const m = (args: Properties): TemplateResult =>
- renderSplitButtonSet(args);
-m.args = { size: ElementSizes.m };
-
-export const mOpen = (args: Properties): TemplateResult => splitbutton(args);
-mOpen.args = { size: ElementSizes.m, open: true };
-
-export const l = (args: Properties): TemplateResult =>
- renderSplitButtonSet(args);
-l.args = { size: ElementSizes.l };
-
-export const lOpen = (args: Properties): TemplateResult => splitbutton(args);
-lOpen.args = { size: ElementSizes.l, open: true };
-
-export const XL = (args: Properties): TemplateResult =>
- renderSplitButtonSet(args);
-XL.args = { size: ElementSizes.xl };
-
-export const XLOpen = (args: Properties): TemplateResult => splitbutton(args);
-XLOpen.args = { size: ElementSizes.xl, open: true };
diff --git a/packages/split-button/stories/split-button-primary-field.stories.ts b/packages/split-button/stories/split-button-primary-field.stories.ts
deleted file mode 100644
index 82ba7fc420..0000000000
--- a/packages/split-button/stories/split-button-primary-field.stories.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-/*
-Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-
-import { ElementSizes, TemplateResult } from '@spectrum-web-components/base';
-import {
- args,
- argTypes,
- parameters,
- renderSplitButtonSet,
- splitbutton,
-} from './index.js';
-import type { Properties } from './index.js';
-import { isOverlayOpen } from '../../overlay/stories/index.js';
-import '../../overlay/stories/index.js';
-
-import '@spectrum-web-components/split-button/sp-split-button.js';
-import '@spectrum-web-components/menu/sp-menu-item.js';
-
-const variant = 'primary';
-const type = 'field';
-
-export default {
- title: 'Split Button/Primary/Field',
- component: 'sp-split-button',
- args: {
- ...args,
- variant,
- type,
- },
- argTypes,
- parameters,
-};
-
-export const s = (args: Properties): TemplateResult =>
- renderSplitButtonSet(args);
-s.args = { size: ElementSizes.s };
-export const m = (args: Properties): TemplateResult =>
- renderSplitButtonSet(args);
-m.args = { size: ElementSizes.m };
-export const l = (args: Properties): TemplateResult =>
- renderSplitButtonSet(args);
-l.args = { size: ElementSizes.l };
-export const XL = (args: Properties): TemplateResult =>
- renderSplitButtonSet(args);
-XL.args = { size: ElementSizes.xl };
-export const open = (args: Properties): TemplateResult => splitbutton(args);
-open.args = { open: true };
-open.decorators = [isOverlayOpen];
diff --git a/packages/split-button/stories/split-button-primary-more.stories.ts b/packages/split-button/stories/split-button-primary-more.stories.ts
deleted file mode 100644
index f44862b9ee..0000000000
--- a/packages/split-button/stories/split-button-primary-more.stories.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-/*
-Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-
-import { ElementSizes, TemplateResult } from '@spectrum-web-components/base';
-import {
- args,
- argTypes,
- parameters,
- renderSplitButtonSet,
- splitbutton,
-} from './index.js';
-import type { Properties } from './index.js';
-import { isOverlayOpen } from '../../overlay/stories/index.js';
-import '../../overlay/stories/index.js';
-
-import '@spectrum-web-components/split-button/sp-split-button.js';
-import '@spectrum-web-components/menu/sp-menu-item.js';
-
-const variant = 'primary';
-const type = 'more';
-
-export default {
- title: 'Split Button/Primary/More',
- component: 'sp-split-button',
- args: {
- ...args,
- variant,
- type,
- },
- argTypes,
- parameters,
-};
-
-export const s = (args: Properties): TemplateResult =>
- renderSplitButtonSet(args);
-s.args = { size: ElementSizes.s };
-export const m = (args: Properties): TemplateResult =>
- renderSplitButtonSet(args);
-m.args = { size: ElementSizes.m };
-export const l = (args: Properties): TemplateResult =>
- renderSplitButtonSet(args);
-l.args = { size: ElementSizes.l };
-export const XL = (args: Properties): TemplateResult =>
- renderSplitButtonSet(args);
-XL.args = { size: ElementSizes.xl };
-export const open = (args: Properties): TemplateResult => splitbutton(args);
-open.args = { open: true };
-open.decorators = [isOverlayOpen];
diff --git a/packages/split-button/stories/split-button-secondary-field.stories.ts b/packages/split-button/stories/split-button-secondary-field.stories.ts
deleted file mode 100644
index 7f932eca76..0000000000
--- a/packages/split-button/stories/split-button-secondary-field.stories.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-/*
-Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-
-import { ElementSizes, TemplateResult } from '@spectrum-web-components/base';
-import {
- args,
- argTypes,
- parameters,
- renderSplitButtonSet,
- splitbutton,
-} from './index.js';
-import type { Properties } from './index.js';
-import { isOverlayOpen } from '../../overlay/stories/index.js';
-import '../../overlay/stories/index.js';
-
-import '@spectrum-web-components/split-button/sp-split-button.js';
-import '@spectrum-web-components/menu/sp-menu-item.js';
-
-const variant = 'secondary';
-const type = 'field';
-
-export default {
- title: 'Split Button/Secondary/Field',
- component: 'sp-split-button',
- args: {
- ...args,
- variant,
- type,
- },
- argTypes,
- parameters,
-};
-
-export const s = (args: Properties): TemplateResult =>
- renderSplitButtonSet(args);
-s.args = { size: ElementSizes.s };
-export const m = (args: Properties): TemplateResult =>
- renderSplitButtonSet(args);
-m.args = { size: ElementSizes.m };
-export const l = (args: Properties): TemplateResult =>
- renderSplitButtonSet(args);
-l.args = { size: ElementSizes.l };
-export const XL = (args: Properties): TemplateResult =>
- renderSplitButtonSet(args);
-XL.args = { size: ElementSizes.xl };
-export const open = (args: Properties): TemplateResult => splitbutton(args);
-open.args = { open: true };
-open.decorators = [isOverlayOpen];
diff --git a/packages/split-button/stories/split-button-secondary-more.stories.ts b/packages/split-button/stories/split-button-secondary-more.stories.ts
deleted file mode 100644
index d51038c275..0000000000
--- a/packages/split-button/stories/split-button-secondary-more.stories.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-/*
-Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-
-import { ElementSizes, TemplateResult } from '@spectrum-web-components/base';
-import {
- args,
- argTypes,
- parameters,
- renderSplitButtonSet,
- splitbutton,
-} from './index.js';
-import type { Properties } from './index.js';
-import { isOverlayOpen } from '../../overlay/stories/index.js';
-import '../../overlay/stories/index.js';
-
-import '@spectrum-web-components/split-button/sp-split-button.js';
-import '@spectrum-web-components/menu/sp-menu-item.js';
-
-const variant = 'secondary';
-const type = 'more';
-
-export default {
- title: 'Split Button/Secondary/More',
- component: 'sp-split-button',
- args: {
- ...args,
- variant,
- type,
- },
- argTypes,
- parameters,
-};
-
-export const s = (args: Properties): TemplateResult =>
- renderSplitButtonSet(args);
-s.args = { size: ElementSizes.s };
-export const m = (args: Properties): TemplateResult =>
- renderSplitButtonSet(args);
-m.args = { size: ElementSizes.m };
-export const l = (args: Properties): TemplateResult =>
- renderSplitButtonSet(args);
-l.args = { size: ElementSizes.l };
-export const XL = (args: Properties): TemplateResult =>
- renderSplitButtonSet(args);
-XL.args = { size: ElementSizes.xl };
-export const open = (args: Properties): TemplateResult => splitbutton(args);
-open.args = { open: true };
-open.decorators = [isOverlayOpen];
diff --git a/packages/split-button/sync/sp-split-button.ts b/packages/split-button/sync/sp-split-button.ts
deleted file mode 100644
index 2404f19dcc..0000000000
--- a/packages/split-button/sync/sp-split-button.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-/*
-Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-
-import '@spectrum-web-components/picker/sync/index.js';
-import '../sp-split-button.js';
diff --git a/packages/split-button/test/benchmark/basic-test.ts b/packages/split-button/test/benchmark/basic-test.ts
deleted file mode 100644
index eb19c1ace7..0000000000
--- a/packages/split-button/test/benchmark/basic-test.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-/*
-Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-
-import '@spectrum-web-components/split-button/sp-split-button.js';
-import type { SplitButton } from '@spectrum-web-components/split-button';
-import '@spectrum-web-components/menu/sp-menu-item.js';
-import { html } from 'lit';
-import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
-
-class SplitButtonWorkflow extends HTMLElement {
- ready!: (value: boolean | PromiseLike) => void;
- splitButton!: SplitButton;
- count = 0;
-
- constructor() {
- super();
- this.readyPromise = new Promise((res) => {
- this.ready = res;
- this.setup();
- });
- }
-
- async setup(): Promise {
- this.splitButton = this.nextElementSibling as SplitButton;
- this.splitButton.addEventListener('sp-opened', () => {
- requestAnimationFrame(() => (this.splitButton.open = false));
- });
- this.splitButton.addEventListener('sp-closed', () => {
- this.count += 1;
- if (this.count >= 5) {
- this.ready(true);
- return;
- }
- requestAnimationFrame(() => (this.splitButton.open = true));
- });
- requestAnimationFrame(() => (this.splitButton.open = true));
- }
-
- private readyPromise: Promise = Promise.resolve(false);
-
- get updateComplete(): Promise {
- return this.readyPromise;
- }
-}
-
-customElements.define('split-button-workflow', SplitButtonWorkflow);
-
-measureFixtureCreation(
- html`
-
- Action 1
- Action 2
- Action 3
-
- `,
- { numRenders: 1 }
-);
diff --git a/packages/split-button/test/index.ts b/packages/split-button/test/index.ts
deleted file mode 100644
index fa2299bb9c..0000000000
--- a/packages/split-button/test/index.ts
+++ /dev/null
@@ -1,669 +0,0 @@
-/*
-Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-
-import {
- aTimeout,
- elementUpdated,
- expect,
- nextFrame,
- oneEvent,
-} from '@open-wc/testing';
-import { html, TemplateResult } from '@spectrum-web-components/base';
-import { spy } from 'sinon';
-import { a11ySnapshot, findAccessibilityNode } from '@web/test-runner-commands';
-
-import fieldDefaults, {
- m as field,
-} from '../stories/split-button-accent-field.stories.js';
-import moreDefaults, {
- m as more,
-} from '../stories/split-button-accent-more.stories.js';
-
-import type { MenuItem } from '@spectrum-web-components/menu';
-import type { SplitButton } from '@spectrum-web-components/split-button';
-import { sendMouse } from '../../../test/plugins/browser.js';
-import { fixture } from '../../../test/testing-helpers.js';
-
-export function runSplitButtonTests(
- wrapInDiv: (storyArgument: TemplateResult) => TemplateResult,
- deprecatedMenu: () => TemplateResult
-): void {
- it('loads [type="field"] splitbutton accessibly', async () => {
- const test = await fixture(
- wrapInDiv(
- field({
- ...fieldDefaults.args,
- ...field.args,
- })
- )
- );
- await nextFrame();
- await nextFrame();
-
- const el1 = test.querySelector('sp-split-button') as SplitButton;
- const el2 = test.querySelector('sp-split-button[left]') as SplitButton;
-
- await elementUpdated(el1);
- await elementUpdated(el2);
-
- await expect(el1).to.be.accessible();
- await expect(el2).to.be.accessible();
- });
- it('loads [type="field"] splitbutton accessibly with deprecated syntax', async () => {
- const test = await fixture(html`
- (
- wrapInDiv(more({ ...moreDefaults.args, ...more.args }))
- );
- const el1 = test.querySelector('sp-split-button') as SplitButton;
- const el2 = test.querySelector('sp-split-button[left]') as SplitButton;
-
- await elementUpdated(el1);
- await elementUpdated(el2);
- await nextFrame();
- await nextFrame();
-
- await expect(el1).to.be.accessible();
- await expect(el2).to.be.accessible();
- });
- it('loads [type="more"] splitbutton accessibly with deprecated syntax', async () => {
- const test = await fixture(html`
- (html`
- (
- snapshot,
- (node) =>
- (node.role === 'button' || node.role === 'buttonmenu') &&
- node.name === 'Option 1' &&
- node.haspopup
- ),
- 'Has a named "button" element with haspopup="true" and name="Option 1"'
- ).to.not.be.null;
- expect(
- findAccessibilityNode(
- snapshot,
- (node) =>
- node.role === 'button' &&
- node.name === 'Option 1' &&
- !node.haspopup
- ),
- 'Has a named "button" element with haspopup="false" and name="Option 1"'
- ).to.not.be.null;
- expect(
- findAccessibilityNode(
- snapshot,
- (node) =>
- (node.role === 'button' || node.role === 'buttonmenu') &&
- node.name === 'Test' &&
- node.haspopup
- ),
- 'Has a named "button" element with haspopup="true" and name="Test"'
- ).to.not.be.null;
- expect(
- findAccessibilityNode(
- snapshot,
- (node) =>
- node.role === 'button' &&
- node.name === 'Test' &&
- !node.haspopup
- ),
- 'Has a named "button" element with haspopup="false" and name="Test"'
- ).to.not.be.null;
- });
-
- it('[type="field"] toggles open/close multiple time', async () => {
- const test = await fixture(
- wrapInDiv(
- field({
- ...fieldDefaults.args,
- ...field.args,
- })
- )
- );
- const el = test.querySelector('sp-split-button') as SplitButton;
-
- await elementUpdated(el);
- await nextFrame();
- await nextFrame();
-
- const trigger = el.shadowRoot.querySelector('.trigger');
- expect(trigger).to.have.attribute('aria-expanded', 'false');
- expect(trigger).not.to.have.attribute('aria-controls');
-
- let opened = oneEvent(el, 'sp-opened');
- el.open = true;
- await opened;
-
- expect(el.open).to.be.true;
- expect(trigger).to.have.attribute('aria-expanded', 'true');
- expect(trigger).to.have.attribute('aria-controls', 'menu');
-
- let closed = oneEvent(el, 'sp-closed');
- el.open = false;
- await closed;
-
- expect(el.open).to.be.false;
- expect(trigger).to.have.attribute('aria-expanded', 'false');
- expect(trigger).not.to.have.attribute('aria-controls');
-
- opened = oneEvent(el, 'sp-opened');
- el.open = true;
- await opened;
-
- expect(el.open).to.be.true;
- expect(trigger).to.have.attribute('aria-expanded', 'true');
- expect(trigger).to.have.attribute('aria-controls', 'menu');
-
- closed = oneEvent(el, 'sp-closed');
- el.open = false;
- await closed;
-
- expect(el.open).to.be.false;
- expect(trigger).to.have.attribute('aria-expanded', 'false');
- expect(trigger).not.to.have.attribute('aria-controls');
- });
-
- it('[type="field"] opens, then closes, on subsequent clicks', async () => {
- const test = await fixture(
- wrapInDiv(
- field({
- ...fieldDefaults.args,
- ...field.args,
- })
- )
- );
- const el = test.querySelector('sp-split-button') as SplitButton;
- await elementUpdated(el);
- await nextFrame();
- await nextFrame();
-
- const { trigger } = el as unknown as { trigger: HTMLButtonElement };
- const rect = trigger.getBoundingClientRect();
-
- const open = oneEvent(el, 'sp-opened');
- sendMouse({
- steps: [
- {
- position: [
- rect.left + rect.width / 2,
- rect.top + rect.height / 2,
- ],
- type: 'click',
- },
- ],
- });
- await open;
-
- expect(el.open).to.be.true;
- await aTimeout(50);
- expect(el.open).to.be.true;
-
- const close = oneEvent(el, 'sp-closed');
- sendMouse({
- steps: [
- {
- position: [
- rect.left + rect.width / 2,
- rect.top + rect.height / 2,
- ],
- type: 'click',
- },
- ],
- });
- await close;
-
- expect(el.open).to.be.false;
- await aTimeout(50);
- expect(el.open).to.be.false;
- });
-
- it('[type="more"] toggles open/close multiple time', async () => {
- const test = await fixture(
- wrapInDiv(more({ ...moreDefaults.args, ...more.args }))
- );
- const el = test.querySelector('sp-split-button') as SplitButton;
-
- await elementUpdated(el);
- await nextFrame();
- await nextFrame();
-
- const trigger = el.shadowRoot.querySelector('.trigger');
- expect(trigger).to.have.attribute('aria-expanded', 'false');
- expect(trigger).not.to.have.attribute('aria-controls');
-
- let opened = oneEvent(el, 'sp-opened');
- el.open = true;
- await opened;
-
- expect(el.open).to.be.true;
- expect(trigger).to.have.attribute('aria-expanded', 'true');
- expect(trigger).to.have.attribute('aria-controls', 'menu');
-
- let closed = oneEvent(el, 'sp-closed');
- el.open = false;
- await closed;
-
- expect(el.open).to.be.false;
- expect(trigger).to.have.attribute('aria-expanded', 'false');
- expect(trigger).not.to.have.attribute('aria-controls');
-
- opened = oneEvent(el, 'sp-opened');
- el.open = true;
- await opened;
-
- expect(el.open).to.be.true;
- expect(trigger).to.have.attribute('aria-expanded', 'true');
- expect(trigger).to.have.attribute('aria-controls', 'menu');
-
- closed = oneEvent(el, 'sp-closed');
- el.open = false;
- await closed;
-
- expect(el.open).to.be.false;
- expect(trigger).to.have.attribute('aria-expanded', 'false');
- expect(trigger).not.to.have.attribute('aria-controls');
- });
-
- it('[type="more"] opens, then closes, on subsequent clicks', async () => {
- const test = await fixture(
- wrapInDiv(more({ ...moreDefaults.args, ...more.args }))
- );
- const el = test.querySelector('sp-split-button') as SplitButton;
- await elementUpdated(el);
- await nextFrame();
- await nextFrame();
-
- const { trigger } = el as unknown as { trigger: HTMLButtonElement };
- const rect = trigger.getBoundingClientRect();
-
- const open = oneEvent(el, 'sp-opened');
- sendMouse({
- steps: [
- {
- position: [
- rect.left + rect.width / 2,
- rect.top + rect.height / 2,
- ],
- type: 'click',
- },
- ],
- });
- await open;
-
- expect(el.open).to.be.true;
- await aTimeout(50);
- expect(el.open).to.be.true;
-
- const close = oneEvent(el, 'sp-closed');
- sendMouse({
- steps: [
- {
- position: [
- rect.left + rect.width / 2,
- rect.top + rect.height / 2,
- ],
- type: 'click',
- },
- ],
- });
- await close;
-
- expect(el.open).to.be.false;
- await aTimeout(50);
- expect(el.open).to.be.false;
- });
-
- it('receives "focus()"', async () => {
- const test = await fixture(
- wrapInDiv(
- field({
- ...fieldDefaults.args,
- ...field.args,
- })
- )
- );
- const el1 = test.querySelector('sp-split-button') as SplitButton;
- const el2 = test.querySelector('sp-split-button[left]') as SplitButton;
-
- await elementUpdated(el1);
- await elementUpdated(el2);
-
- el1.focus();
- await elementUpdated(el1);
-
- expect(document.activeElement === el1).to.be.true;
- expect(el1.shadowRoot.activeElement).to.equal(el1.focusElement);
-
- el2.focus();
- await elementUpdated(el2);
-
- expect(document.activeElement === el2).to.be.true;
- expect(el2.shadowRoot.activeElement === el2.focusElement).to.be.true;
- });
- it('[type="field"] manages `selectedItem`', async () => {
- const test = await fixture(
- wrapInDiv(
- field({
- ...fieldDefaults.args,
- ...field.args,
- })
- )
- );
- const el = test.querySelector('sp-split-button') as SplitButton;
-
- await elementUpdated(el);
- await nextFrame();
- await nextFrame();
-
- expect(el.selectedItem?.itemText).to.equal('Option 1');
- expect(el.open).to.be.false;
-
- const item3 = el.querySelector('sp-menu-item:nth-child(3)') as MenuItem;
- const opened = oneEvent(el, 'sp-opened');
- el.click();
- await opened;
- await elementUpdated(el);
-
- expect(el.open).to.be.true;
-
- const closed = oneEvent(el, 'sp-closed');
- item3.click();
- await closed;
-
- await elementUpdated(el);
-
- expect(el.selectedItem?.itemText).to.equal('Short');
- expect(el.open).to.be.false;
- expect(document.activeElement === el).to.be.true;
- expect(el.shadowRoot.activeElement === el.focusElement).to.be.true;
- });
- it('[type="more"] manages `selectedItem.itemText`', async () => {
- const test = await fixture(
- wrapInDiv(more({ ...moreDefaults.args, ...more.args }))
- );
- const el = test.querySelector('sp-split-button') as SplitButton;
-
- await elementUpdated(el);
- await nextFrame();
- await nextFrame();
-
- expect(el.selectedItem?.itemText).to.equal('Option 1');
- expect(el.open).to.be.false;
-
- const item3 = el.querySelector('sp-menu-item:nth-child(3)') as MenuItem;
- const opened = oneEvent(el, 'sp-opened');
- el.click();
- await opened;
-
- expect(el.open).to.be.true;
-
- const closed = oneEvent(el, 'sp-closed');
- item3.click();
- await closed;
-
- expect(el.open).to.be.false;
- expect(el.selectedItem?.itemText).to.equal('Option 1');
- });
-
- it('passes click events as [type="field"]', async () => {
- const firstItemSpy = spy();
- const secondItemSpy = spy();
- const thirdItemSpy = spy();
- const test = await fixture(
- wrapInDiv(
- field({
- ...fieldDefaults.args,
- ...field.args,
- firstItemHandler: (): void => firstItemSpy(),
- secondItemHandler: (): void => secondItemSpy(),
- thirdItemHandler: (): void => thirdItemSpy(),
- })
- )
- );
- const el = test.querySelector('sp-split-button') as SplitButton;
- await elementUpdated(el);
- await nextFrame();
- await nextFrame();
-
- expect(el.selectedItem?.itemText).to.equal('Option 1');
- expect(el.open).to.be.false;
-
- const item1 = el.querySelector('sp-menu-item:nth-child(1)') as MenuItem;
- const item2 = el.querySelector('sp-menu-item:nth-child(2)') as MenuItem;
- const item3 = el.querySelector('sp-menu-item:nth-child(3)') as MenuItem;
- const main = el.shadowRoot?.querySelector(
- '#button'
- ) as HTMLButtonElement;
-
- main.click();
-
- await elementUpdated(el);
-
- expect(firstItemSpy.called, 'first called').to.be.true;
- expect(firstItemSpy.calledOnce, 'first calledOnce').to.be.true;
-
- let opened = oneEvent(el, 'sp-opened');
- el.click();
- await opened;
-
- await elementUpdated(el);
-
- expect(el.open, 'open').to.be.true;
-
- let closed = oneEvent(el, 'sp-closed');
- item3.click();
- await closed;
- await nextFrame();
-
- await elementUpdated(el);
-
- expect(el.open, 'not open').to.be.false;
- expect(thirdItemSpy.called, 'third called').to.be.true;
- expect(thirdItemSpy.calledOnce, 'third calledOnce').to.be.true;
-
- main.click();
- await elementUpdated(el);
-
- expect(el.open).to.be.false;
- expect(el.selectedItem?.itemText).to.equal('Short');
- expect(thirdItemSpy.called, 'third called, still').to.be.true;
- expect(thirdItemSpy.callCount, 'third callCount').to.equal(2);
- expect(thirdItemSpy.calledTwice, 'third calledTwice').to.be.true;
-
- opened = oneEvent(el, 'sp-opened');
- el.click();
- await opened;
-
- expect(el.open, 'reopen').to.be.true;
-
- closed = oneEvent(el, 'sp-closed');
- item2.click();
- await closed;
- await nextFrame();
- await elementUpdated(el);
-
- main.click();
- await elementUpdated(el);
-
- expect(el.open).to.be.false;
- expect(el.selectedItem?.itemText).to.equal('Option Really Extended');
- expect(secondItemSpy.called, 'second called').to.be.true;
- expect(secondItemSpy.calledTwice, 'second twice').to.be.true;
-
- opened = oneEvent(el, 'sp-opened');
- el.click();
- await opened;
- await elementUpdated(el);
-
- expect(el.open, 'opened again').to.be.true;
-
- closed = oneEvent(el, 'sp-closed');
- item1.click();
- await closed;
- await nextFrame();
- await elementUpdated(el);
-
- main.click();
-
- await elementUpdated(el);
-
- expect(el.selectedItem?.itemText).to.equal('Option 1');
- expect(firstItemSpy.called, 'first called, sill').to.be.true;
- expect(firstItemSpy.callCount, 'first callCount').to.equal(3);
- });
- it('passes click events as [type="more"]', async () => {
- const firstItemSpy = spy();
- const secondItemSpy = spy();
- const thirdItemSpy = spy();
- const test = await fixture(
- wrapInDiv(
- more({
- ...moreDefaults.args,
- ...more.args,
- firstItemHandler: (): void => firstItemSpy(),
- secondItemHandler: (): void => secondItemSpy(),
- thirdItemHandler: (): void => thirdItemSpy(),
- })
- )
- );
- const el = test.querySelector('sp-split-button') as SplitButton;
-
- await elementUpdated(el);
- await nextFrame();
- await nextFrame();
-
- expect(el.selectedItem?.itemText).to.equal('Option 1');
- expect(el.open).to.be.false;
-
- const item2 = el.querySelector('sp-menu-item:nth-child(2)') as MenuItem;
- const item3 = el.querySelector('sp-menu-item:nth-child(3)') as MenuItem;
- const main = el.shadowRoot?.querySelector(
- '#button'
- ) as HTMLButtonElement;
- main.click();
- expect(el.open).to.be.false;
-
- await elementUpdated(el);
- await nextFrame();
-
- expect(firstItemSpy.called, '1st called').to.be.true;
- expect(firstItemSpy.calledOnce, '1st called once').to.be.true;
-
- expect(el.open).to.be.false;
- let opened = oneEvent(el, 'sp-opened');
- el.click();
- await opened;
-
- await elementUpdated(el);
-
- expect(el.open).to.be.true;
-
- let closed = oneEvent(el, 'sp-closed');
- item3.click();
- await closed;
- await nextFrame();
- await elementUpdated(el);
-
- expect(el.open, 'not open').to.be.false;
- expect(el.selectedItem?.itemText).to.equal('Option 1');
- expect(thirdItemSpy.called, '3rd called').to.be.true;
- expect(thirdItemSpy.calledOnce, '3rd called once').to.be.true;
- opened = oneEvent(el, 'sp-opened');
- el.click();
- await opened;
-
- await elementUpdated(el);
-
- expect(el.open).to.be.true;
-
- closed = oneEvent(el, 'sp-closed');
- item2.click();
- await closed;
- await nextFrame();
- await nextFrame();
-
- await elementUpdated(el);
-
- expect(el.open).to.be.false;
- expect(el.selectedItem?.itemText).to.equal('Option 1');
- expect(secondItemSpy.called, '2nd called').to.be.true;
- expect(secondItemSpy.calledOnce, '2nd called once').to.be.true;
- main.click();
-
- await elementUpdated(el);
-
- expect(firstItemSpy.called).to.be.true;
- expect(firstItemSpy.calledTwice, '1st called twice').to.be.true;
- });
-}
diff --git a/packages/split-button/test/split-button-memory.test.ts b/packages/split-button/test/split-button-memory.test.ts
deleted file mode 100644
index 43a4225dbb..0000000000
--- a/packages/split-button/test/split-button-memory.test.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-/*
-Copyright 2023 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-
-import { html } from '@open-wc/testing';
-import '@spectrum-web-components/split-button/sp-split-button.js';
-import { testForMemoryLeaks } from '../../../test/testing-helpers.js';
-
-testForMemoryLeaks(html`
-
- Option 1
- Option Extended
- Short
-
-`;
-
-describe('Splitbutton', () => {
- runSplitButtonTests(wrapInDiv, deprecatedMenu);
-});
diff --git a/packages/split-button/test/split-button.test.ts b/packages/split-button/test/split-button.test.ts
deleted file mode 100644
index ee9a5f1681..0000000000
--- a/packages/split-button/test/split-button.test.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-/*
-Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-
-import '@spectrum-web-components/split-button/sp-split-button.js';
-import { html, TemplateResult } from '@spectrum-web-components/base';
-import { runSplitButtonTests } from './index.js';
-
-// wrap in div method
-
-function wrapInDiv(storyArgument: TemplateResult): TemplateResult {
- return html`
-
- Option 1
- Option Extended
- Short
-
-`;
-
-describe('Splitbutton', () => {
- runSplitButtonTests(wrapInDiv, deprecatedMenu);
-});
diff --git a/packages/split-button/tsconfig.json b/packages/split-button/tsconfig.json
deleted file mode 100644
index 3f8737bc5a..0000000000
--- a/packages/split-button/tsconfig.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
- "extends": "../../tsconfig.json",
- "compilerOptions": {
- "composite": true,
- "rootDir": "./"
- },
- "include": ["*.ts", "src/*.ts", "sync/*.ts"],
- "exclude": ["test/*.ts", "stories/*.ts"],
- "references": [
- { "path": "../button" },
- { "path": "../icon" },
- { "path": "../icons-ui" },
- { "path": "../icons-workflow" },
- { "path": "../overlay" }
- ]
-}
diff --git a/packages/split-view/package.json b/packages/split-view/package.json
index 0498e33397..69efecfa57 100644
--- a/packages/split-view/package.json
+++ b/packages/split-view/package.json
@@ -33,6 +33,7 @@
"development": "./src/index.dev.js",
"default": "./src/index.js"
},
+ "./src/split-view-overrides.css.js": "./src/split-view-overrides.css.js",
"./src/split-view.css.js": "./src/split-view.css.js",
"./src/types.js": {
"development": "./src/types.dev.js",
@@ -64,7 +65,7 @@
"@spectrum-web-components/base": "^0.49.0"
},
"devDependencies": {
- "@spectrum-css/splitview": "^5.1.0"
+ "@spectrum-css/splitview": "^6.0.0-s2-foundations.15"
},
"types": "./src/index.d.ts",
"customElements": "custom-elements.json",
diff --git a/packages/split-view/src/spectrum-split-view.css b/packages/split-view/src/spectrum-split-view.css
index c354599ca2..bd59407e2e 100644
--- a/packages/split-view/src/spectrum-split-view.css
+++ b/packages/split-view/src/spectrum-split-view.css
@@ -12,29 +12,6 @@ governing permissions and limitations under the License.
/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
:host {
- --spectrum-splitview-vertical-width: 100%;
- --spectrum-splitview-vertical-gripper-width: 50%;
- --spectrum-splitview-vertical-gripper-outer-width: 100%;
- --spectrum-splitview-vertical-gripper-reset: 0;
- --spectrum-splitview-background-color: var(--spectrum-gray-100);
- --spectrum-splitview-handle-background-color: var(--spectrum-gray-300);
- --spectrum-splitview-handle-background-color-hover: var(
- --spectrum-gray-400
- );
- --spectrum-splitview-handle-background-color-down: var(--spectrum-gray-800);
- --spectrum-splitview-handle-background-color-focus: var(
- --spectrum-focus-indicator-color
- );
- --spectrum-splitview-handle-width: var(--spectrum-border-width-200);
- --spectrum-splitview-gripper-border-radius: var(
- --spectrum-corner-radius-75
- );
- --spectrum-splitview-gripper-width: var(--spectrum-border-width-400);
- --spectrum-splitview-gripper-height: 16px;
- --spectrum-splitview-gripper-border-width-horizontal: 3px;
- --spectrum-splitview-gripper-border-width-vertical: var(
- --spectrum-border-width-400
- );
display: flex;
overflow: hidden;
}
@@ -45,6 +22,10 @@ governing permissions and limitations under the License.
--mod-splitview-background-color,
var(--spectrum-splitview-background-color)
);
+ color: var(
+ --mod-splitview-content-color,
+ var(--spectrum-splitview-content-color)
+ );
}
#gripper {
diff --git a/packages/split-view/src/split-view-overrides.css b/packages/split-view/src/split-view-overrides.css
new file mode 100644
index 0000000000..bf8a6170f7
--- /dev/null
+++ b/packages/split-view/src/split-view-overrides.css
@@ -0,0 +1,57 @@
+/*
+ Copyright 2023 Adobe. All rights reserved.
+ This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License. You may obtain a copy
+ of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software distributed under
+ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ OF ANY KIND, either express or implied. See the License for the specific language
+ governing permissions and limitations under the License.
+ */
+
+/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
+:host {
+ --spectrum-splitview-vertical-width: var(
+ --system-split-view-vertical-width
+ );
+ --spectrum-splitview-vertical-gripper-width: var(
+ --system-split-view-vertical-gripper-width
+ );
+ --spectrum-splitview-vertical-gripper-outer-width: var(
+ --system-split-view-vertical-gripper-outer-width
+ );
+ --spectrum-splitview-vertical-gripper-reset: var(
+ --system-split-view-vertical-gripper-reset
+ );
+ --spectrum-splitview-background-color: var(
+ --system-split-view-background-color
+ );
+ --spectrum-splitview-content-color: var(--system-split-view-content-color);
+ --spectrum-splitview-handle-background-color: var(
+ --system-split-view-handle-background-color
+ );
+ --spectrum-splitview-handle-background-color-hover: var(
+ --system-split-view-handle-background-color-hover
+ );
+ --spectrum-splitview-handle-background-color-down: var(
+ --system-split-view-handle-background-color-down
+ );
+ --spectrum-splitview-handle-background-color-focus: var(
+ --system-split-view-handle-background-color-focus
+ );
+ --spectrum-splitview-handle-width: var(--system-split-view-handle-width);
+ --spectrum-splitview-gripper-border-radius: var(
+ --system-split-view-gripper-border-radius
+ );
+ --spectrum-splitview-gripper-width: var(--system-split-view-gripper-width);
+ --spectrum-splitview-gripper-height: var(
+ --system-split-view-gripper-height
+ );
+ --spectrum-splitview-gripper-border-width-horizontal: var(
+ --system-split-view-gripper-border-width-horizontal
+ );
+ --spectrum-splitview-gripper-border-width-vertical: var(
+ --system-split-view-gripper-border-width-vertical
+ );
+}
diff --git a/packages/split-view/src/split-view.css b/packages/split-view/src/split-view.css
index d29f9944d0..2d065b3f34 100644
--- a/packages/split-view/src/split-view.css
+++ b/packages/split-view/src/split-view.css
@@ -11,6 +11,7 @@ governing permissions and limitations under the License.
*/
@import url('./spectrum-split-view.css');
+@import url('./split-view-overrides.css');
:host {
--spectrum-split-view-first-pane-size: 50%;
diff --git a/packages/status-light/package.json b/packages/status-light/package.json
index 76a50a9b59..283dad1a4f 100644
--- a/packages/status-light/package.json
+++ b/packages/status-light/package.json
@@ -33,6 +33,7 @@
"development": "./src/index.dev.js",
"default": "./src/index.js"
},
+ "./src/status-light-overrides.css.js": "./src/status-light-overrides.css.js",
"./src/status-light.css.js": "./src/status-light.css.js",
"./sp-status-light.js": {
"development": "./sp-status-light.dev.js",
@@ -60,7 +61,7 @@
"@spectrum-web-components/base": "^0.49.0"
},
"devDependencies": {
- "@spectrum-css/statuslight": "^7.1.0"
+ "@spectrum-css/statuslight": "^8.0.0-s2-foundations.15"
},
"types": "./src/index.d.ts",
"customElements": "custom-elements.json",
diff --git a/packages/status-light/src/spectrum-status-light.css b/packages/status-light/src/spectrum-status-light.css
index 0f78521f12..801a523072 100644
--- a/packages/status-light/src/spectrum-status-light.css
+++ b/packages/status-light/src/spectrum-status-light.css
@@ -11,193 +11,6 @@ governing permissions and limitations under the License.
*/
/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
-:host([dir]) {
- --spectrum-statuslight-corner-radius: 50%;
- --spectrum-statuslight-font-weight: 400;
- --spectrum-statuslight-border-width: var(--spectrum-border-width-100);
- --spectrum-statuslight-height: var(--spectrum-component-height-100);
- --spectrum-statuslight-dot-size: var(
- --spectrum-status-light-dot-size-medium
- );
- --spectrum-statuslight-line-height: var(--spectrum-line-height-100);
- --spectrum-statuslight-line-height-cjk: var(--spectrum-cjk-line-height-100);
- --spectrum-statuslight-font-size: var(--spectrum-font-size-100);
- --spectrum-statuslight-spacing-dot-to-label: var(
- --spectrum-text-to-visual-100
- );
- --spectrum-statuslight-spacing-top-to-dot: var(
- --spectrum-status-light-top-to-dot-medium
- );
- --spectrum-statuslight-spacing-top-to-label: var(
- --spectrum-component-top-to-text-100
- );
- --spectrum-statuslight-spacing-bottom-to-label: var(
- --spectrum-component-bottom-to-text-100
- );
- --spectrum-statuslight-content-color-default: var(
- --spectrum-neutral-content-color-default
- );
- --spectrum-statuslight-subdued-content-color-default: var(
- --spectrum-neutral-subdued-content-color-default
- );
- --spectrum-statuslight-semantic-neutral-color: var(
- --spectrum-neutral-visual-color
- );
- --spectrum-statuslight-semantic-accent-color: var(
- --spectrum-accent-visual-color
- );
- --spectrum-statuslight-semantic-negative-color: var(
- --spectrum-negative-visual-color
- );
- --spectrum-statuslight-semantic-info-color: var(
- --spectrum-informative-visual-color
- );
- --spectrum-statuslight-semantic-notice-color: var(
- --spectrum-notice-visual-color
- );
- --spectrum-statuslight-semantic-positive-color: var(
- --spectrum-positive-visual-color
- );
- --spectrum-statuslight-nonsemantic-gray-color: var(
- --spectrum-gray-visual-color
- );
- --spectrum-statuslight-nonsemantic-red-color: var(
- --spectrum-red-visual-color
- );
- --spectrum-statuslight-nonsemantic-orange-color: var(
- --spectrum-orange-visual-color
- );
- --spectrum-statuslight-nonsemantic-yellow-color: var(
- --spectrum-yellow-visual-color
- );
- --spectrum-statuslight-nonsemantic-chartreuse-color: var(
- --spectrum-chartreuse-visual-color
- );
- --spectrum-statuslight-nonsemantic-celery-color: var(
- --spectrum-celery-visual-color
- );
- --spectrum-statuslight-nonsemantic-green-color: var(
- --spectrum-green-visual-color
- );
- --spectrum-statuslight-nonsemantic-seafoam-color: var(
- --spectrum-seafoam-visual-color
- );
- --spectrum-statuslight-nonsemantic-cyan-color: var(
- --spectrum-cyan-visual-color
- );
- --spectrum-statuslight-nonsemantic-blue-color: var(
- --spectrum-blue-visual-color
- );
- --spectrum-statuslight-nonsemantic-indigo-color: var(
- --spectrum-indigo-visual-color
- );
- --spectrum-statuslight-nonsemantic-purple-color: var(
- --spectrum-purple-visual-color
- );
- --spectrum-statuslight-nonsemantic-fuchsia-color: var(
- --spectrum-fuchsia-visual-color
- );
- --spectrum-statuslight-nonsemantic-magenta-color: var(
- --spectrum-magenta-visual-color
- );
-}
-
-:host([size='s']) {
- --spectrum-statuslight-height: var(--spectrum-component-height-75);
- --spectrum-statuslight-dot-size: var(
- --spectrum-status-light-dot-size-small
- );
- --spectrum-statuslight-font-size: var(--spectrum-font-size-75);
- --spectrum-statuslight-spacing-dot-to-label: var(
- --spectrum-text-to-visual-75
- );
- --spectrum-statuslight-spacing-top-to-dot: var(
- --spectrum-status-light-top-to-dot-small
- );
- --spectrum-statuslight-spacing-top-to-label: var(
- --spectrum-component-top-to-text-75
- );
- --spectrum-statuslight-spacing-bottom-to-label: var(
- --spectrum-component-bottom-to-text-75
- );
-}
-
-:host {
- --spectrum-statuslight-height: var(--spectrum-component-height-100);
- --spectrum-statuslight-dot-size: var(
- --spectrum-status-light-dot-size-medium
- );
- --spectrum-statuslight-font-size: var(--spectrum-font-size-100);
- --spectrum-statuslight-spacing-dot-to-label: var(
- --spectrum-text-to-visual-100
- );
- --spectrum-statuslight-spacing-top-to-dot: var(
- --spectrum-status-light-top-to-dot-medium
- );
- --spectrum-statuslight-spacing-top-to-label: var(
- --spectrum-component-top-to-text-100
- );
- --spectrum-statuslight-spacing-bottom-to-label: var(
- --spectrum-component-bottom-to-text-100
- );
-}
-
-:host([size='l']) {
- --spectrum-statuslight-height: var(--spectrum-component-height-200);
- --spectrum-statuslight-dot-size: var(
- --spectrum-status-light-dot-size-large
- );
- --spectrum-statuslight-font-size: var(--spectrum-font-size-200);
- --spectrum-statuslight-spacing-dot-to-label: var(
- --spectrum-text-to-visual-200
- );
- --spectrum-statuslight-spacing-top-to-dot: var(
- --spectrum-status-light-top-to-dot-large
- );
- --spectrum-statuslight-spacing-top-to-label: var(
- --spectrum-component-top-to-text-200
- );
- --spectrum-statuslight-spacing-bottom-to-label: var(
- --spectrum-component-bottom-to-text-200
- );
-}
-
-:host([size='xl']) {
- --spectrum-statuslight-height: var(--spectrum-component-height-300);
- --spectrum-statuslight-dot-size: var(
- --spectrum-status-light-dot-size-extra-large
- );
- --spectrum-statuslight-font-size: var(--spectrum-font-size-300);
- --spectrum-statuslight-spacing-dot-to-label: var(
- --spectrum-text-to-visual-300
- );
- --spectrum-statuslight-spacing-top-to-dot: var(
- --spectrum-status-light-top-to-dot-extra-large
- );
- --spectrum-statuslight-spacing-top-to-label: var(
- --spectrum-component-top-to-text-300
- );
- --spectrum-statuslight-spacing-bottom-to-label: var(
- --spectrum-component-bottom-to-text-300
- );
-}
-
-@media (forced-colors: active) {
- :host([dir]) {
- forced-color-adjust: none;
- --highcontrast-statuslight-content-color-default: CanvasText;
- --highcontrast-statuslight-subdued-content-color-default: CanvasText;
- }
-
- :host:before {
- border: var(
- --mod-statuslight-border-width,
- var(--spectrum-statuslight-border-width)
- )
- solid ButtonText;
- }
-}
-
:host([dir]) {
min-block-size: var(
--mod-statuslight-height,
@@ -247,6 +60,16 @@ governing permissions and limitations under the License.
}
:host:before {
+ --spectrum-statuslight-spacing-computed-top-to-dot: calc(
+ var(
+ --mod-statuslight-spacing-top-to-dot,
+ var(--spectrum-statuslight-spacing-top-to-dot)
+ ) -
+ var(
+ --mod-statuslight-spacing-top-to-label,
+ var(--spectrum-statuslight-spacing-top-to-label)
+ )
+ );
content: '';
inline-size: var(
--mod-statuslight-dot-size,
@@ -260,18 +83,6 @@ governing permissions and limitations under the License.
--mod-statuslight-corner-radius,
var(--spectrum-statuslight-corner-radius)
);
- --spectrum-statuslight-spacing-computed-top-to-dot: calc(
- var(
- --mod-statuslight-spacing-top-to-dot,
- var(--spectrum-statuslight-spacing-top-to-dot)
- ) -
- var(
- --mod-statuslight-spacing-top-to-label,
- var(--spectrum-statuslight-spacing-top-to-label)
- )
- );
- -ms-high-contrast-adjust: none;
- forced-color-adjust: none;
flex-grow: 0;
flex-shrink: 0;
margin-block-start: var(--spectrum-statuslight-spacing-computed-top-to-dot);
@@ -432,3 +243,20 @@ governing permissions and limitations under the License.
var(--spectrum-statuslight-nonsemantic-magenta-color)
);
}
+
+@media (forced-colors: active) {
+ :host([dir]) {
+ --highcontrast-statuslight-content-color-default: CanvasText;
+ --highcontrast-statuslight-subdued-content-color-default: CanvasText;
+ forced-color-adjust: none;
+ }
+
+ :host:before {
+ forced-color-adjust: none;
+ border: var(
+ --mod-statuslight-border-width,
+ var(--spectrum-statuslight-border-width)
+ )
+ solid ButtonText;
+ }
+}
diff --git a/packages/status-light/src/status-light-overrides.css b/packages/status-light/src/status-light-overrides.css
new file mode 100644
index 0000000000..9e4b38fe6c
--- /dev/null
+++ b/packages/status-light/src/status-light-overrides.css
@@ -0,0 +1,189 @@
+/*
+ Copyright 2023 Adobe. All rights reserved.
+ This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License. You may obtain a copy
+ of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software distributed under
+ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ OF ANY KIND, either express or implied. See the License for the specific language
+ governing permissions and limitations under the License.
+ */
+
+/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
+:host([dir]) {
+ --spectrum-statuslight-corner-radius: var(
+ --system-status-light-corner-radius
+ );
+ --spectrum-statuslight-font-weight: var(--system-status-light-font-weight);
+ --spectrum-statuslight-border-width: var(
+ --system-status-light-border-width
+ );
+ --spectrum-statuslight-height: var(--system-status-light-height);
+ --spectrum-statuslight-dot-size: var(--system-status-light-dot-size);
+ --spectrum-statuslight-line-height: var(--system-status-light-line-height);
+ --spectrum-statuslight-line-height-cjk: var(
+ --system-status-light-line-height-cjk
+ );
+ --spectrum-statuslight-font-size: var(--system-status-light-font-size);
+ --spectrum-statuslight-spacing-dot-to-label: var(
+ --system-status-light-spacing-dot-to-label
+ );
+ --spectrum-statuslight-spacing-top-to-dot: var(
+ --system-status-light-spacing-top-to-dot
+ );
+ --spectrum-statuslight-spacing-top-to-label: var(
+ --system-status-light-spacing-top-to-label
+ );
+ --spectrum-statuslight-spacing-bottom-to-label: var(
+ --system-status-light-spacing-bottom-to-label
+ );
+ --spectrum-statuslight-content-color-default: var(
+ --system-status-light-content-color-default
+ );
+ --spectrum-statuslight-subdued-content-color-default: var(
+ --system-status-light-subdued-content-color-default
+ );
+ --spectrum-statuslight-semantic-neutral-color: var(
+ --system-status-light-semantic-neutral-color
+ );
+ --spectrum-statuslight-semantic-accent-color: var(
+ --system-status-light-semantic-accent-color
+ );
+ --spectrum-statuslight-semantic-negative-color: var(
+ --system-status-light-semantic-negative-color
+ );
+ --spectrum-statuslight-semantic-info-color: var(
+ --system-status-light-semantic-info-color
+ );
+ --spectrum-statuslight-semantic-notice-color: var(
+ --system-status-light-semantic-notice-color
+ );
+ --spectrum-statuslight-semantic-positive-color: var(
+ --system-status-light-semantic-positive-color
+ );
+ --spectrum-statuslight-nonsemantic-gray-color: var(
+ --system-status-light-nonsemantic-gray-color
+ );
+ --spectrum-statuslight-nonsemantic-red-color: var(
+ --system-status-light-nonsemantic-red-color
+ );
+ --spectrum-statuslight-nonsemantic-orange-color: var(
+ --system-status-light-nonsemantic-orange-color
+ );
+ --spectrum-statuslight-nonsemantic-yellow-color: var(
+ --system-status-light-nonsemantic-yellow-color
+ );
+ --spectrum-statuslight-nonsemantic-chartreuse-color: var(
+ --system-status-light-nonsemantic-chartreuse-color
+ );
+ --spectrum-statuslight-nonsemantic-celery-color: var(
+ --system-status-light-nonsemantic-celery-color
+ );
+ --spectrum-statuslight-nonsemantic-green-color: var(
+ --system-status-light-nonsemantic-green-color
+ );
+ --spectrum-statuslight-nonsemantic-seafoam-color: var(
+ --system-status-light-nonsemantic-seafoam-color
+ );
+ --spectrum-statuslight-nonsemantic-cyan-color: var(
+ --system-status-light-nonsemantic-cyan-color
+ );
+ --spectrum-statuslight-nonsemantic-blue-color: var(
+ --system-status-light-nonsemantic-blue-color
+ );
+ --spectrum-statuslight-nonsemantic-indigo-color: var(
+ --system-status-light-nonsemantic-indigo-color
+ );
+ --spectrum-statuslight-nonsemantic-purple-color: var(
+ --system-status-light-nonsemantic-purple-color
+ );
+ --spectrum-statuslight-nonsemantic-fuchsia-color: var(
+ --system-status-light-nonsemantic-fuchsia-color
+ );
+ --spectrum-statuslight-nonsemantic-magenta-color: var(
+ --system-status-light-nonsemantic-magenta-color
+ );
+}
+
+:host([size='s']) {
+ --spectrum-statuslight-height: var(--system-status-light-size-s-height);
+ --spectrum-statuslight-dot-size: var(--system-status-light-size-s-dot-size);
+ --spectrum-statuslight-font-size: var(
+ --system-status-light-size-s-font-size
+ );
+ --spectrum-statuslight-spacing-dot-to-label: var(
+ --system-status-light-size-s-spacing-dot-to-label
+ );
+ --spectrum-statuslight-spacing-top-to-dot: var(
+ --system-status-light-size-s-spacing-top-to-dot
+ );
+ --spectrum-statuslight-spacing-top-to-label: var(
+ --system-status-light-size-s-spacing-top-to-label
+ );
+ --spectrum-statuslight-spacing-bottom-to-label: var(
+ --system-status-light-size-s-spacing-bottom-to-label
+ );
+}
+
+:host {
+ --spectrum-statuslight-height: var(--system-status-light-size-m-height);
+ --spectrum-statuslight-dot-size: var(--system-status-light-size-m-dot-size);
+ --spectrum-statuslight-font-size: var(
+ --system-status-light-size-m-font-size
+ );
+ --spectrum-statuslight-spacing-dot-to-label: var(
+ --system-status-light-size-m-spacing-dot-to-label
+ );
+ --spectrum-statuslight-spacing-top-to-dot: var(
+ --system-status-light-size-m-spacing-top-to-dot
+ );
+ --spectrum-statuslight-spacing-top-to-label: var(
+ --system-status-light-size-m-spacing-top-to-label
+ );
+ --spectrum-statuslight-spacing-bottom-to-label: var(
+ --system-status-light-size-m-spacing-bottom-to-label
+ );
+}
+
+:host([size='l']) {
+ --spectrum-statuslight-height: var(--system-status-light-size-l-height);
+ --spectrum-statuslight-dot-size: var(--system-status-light-size-l-dot-size);
+ --spectrum-statuslight-font-size: var(
+ --system-status-light-size-l-font-size
+ );
+ --spectrum-statuslight-spacing-dot-to-label: var(
+ --system-status-light-size-l-spacing-dot-to-label
+ );
+ --spectrum-statuslight-spacing-top-to-dot: var(
+ --system-status-light-size-l-spacing-top-to-dot
+ );
+ --spectrum-statuslight-spacing-top-to-label: var(
+ --system-status-light-size-l-spacing-top-to-label
+ );
+ --spectrum-statuslight-spacing-bottom-to-label: var(
+ --system-status-light-size-l-spacing-bottom-to-label
+ );
+}
+
+:host([size='xl']) {
+ --spectrum-statuslight-height: var(--system-status-light-size-xl-height);
+ --spectrum-statuslight-dot-size: var(
+ --system-status-light-size-xl-dot-size
+ );
+ --spectrum-statuslight-font-size: var(
+ --system-status-light-size-xl-font-size
+ );
+ --spectrum-statuslight-spacing-dot-to-label: var(
+ --system-status-light-size-xl-spacing-dot-to-label
+ );
+ --spectrum-statuslight-spacing-top-to-dot: var(
+ --system-status-light-size-xl-spacing-top-to-dot
+ );
+ --spectrum-statuslight-spacing-top-to-label: var(
+ --system-status-light-size-xl-spacing-top-to-label
+ );
+ --spectrum-statuslight-spacing-bottom-to-label: var(
+ --system-status-light-size-xl-spacing-bottom-to-label
+ );
+}
diff --git a/packages/status-light/src/status-light.css b/packages/status-light/src/status-light.css
index 7bcaadfc19..f1bc71cd83 100644
--- a/packages/status-light/src/status-light.css
+++ b/packages/status-light/src/status-light.css
@@ -11,6 +11,7 @@ governing permissions and limitations under the License.
*/
@import url('./spectrum-status-light.css');
+@import url('./status-light-overrides.css');
/* Force cascade position of [disabled] styling */
:host([disabled]):before {
diff --git a/packages/swatch/package.json b/packages/swatch/package.json
index db8f190c54..9b73ccb4f1 100644
--- a/packages/swatch/package.json
+++ b/packages/swatch/package.json
@@ -37,7 +37,9 @@
"development": "./src/index.dev.js",
"default": "./src/index.js"
},
+ "./src/swatch-group-overrides.css.js": "./src/swatch-group-overrides.css.js",
"./src/swatch-group.css.js": "./src/swatch-group.css.js",
+ "./src/swatch-overrides.css.js": "./src/swatch-overrides.css.js",
"./src/swatch.css.js": "./src/swatch.css.js",
"./sp-swatch.js": {
"development": "./sp-swatch.dev.js",
@@ -75,8 +77,8 @@
"@spectrum-web-components/shared": "^0.49.0"
},
"devDependencies": {
- "@spectrum-css/swatch": "^6.1.0",
- "@spectrum-css/swatchgroup": "^3.1.0"
+ "@spectrum-css/swatch": "^7.0.0-s2-foundations.17",
+ "@spectrum-css/swatchgroup": "^4.0.0-s2-foundations.15"
},
"types": "./src/index.d.ts",
"customElements": "custom-elements.json",
diff --git a/packages/swatch/src/Swatch.ts b/packages/swatch/src/Swatch.ts
index 0801d37d1a..7077cd3e35 100644
--- a/packages/swatch/src/Swatch.ts
+++ b/packages/swatch/src/Swatch.ts
@@ -30,6 +30,7 @@ import '@spectrum-web-components/icons-ui/icons/sp-icon-dash300.js';
import styles from './swatch.css.js';
import dashStyles from '@spectrum-web-components/icon/src/spectrum-icon-dash.css.js';
+import dashSmallOverrides from '@spectrum-web-components/icon/src/icon-dash-overrides.css.js';
export type SwatchBorder = 'light' | 'none' | undefined;
export type SwatchRounding = 'none' | 'full' | undefined;
@@ -70,7 +71,12 @@ export class Swatch extends SizedMixin(Focusable, {
noDefaultSize: true,
}) {
public static override get styles(): CSSResultArray {
- return [opacityCheckerboardStyles, styles, dashStyles];
+ return [
+ opacityCheckerboardStyles,
+ styles,
+ dashStyles,
+ dashSmallOverrides,
+ ];
}
@property({ reflect: true })
diff --git a/packages/swatch/src/spectrum-swatch-group.css b/packages/swatch/src/spectrum-swatch-group.css
index 73e5976942..e0a56e8fc6 100644
--- a/packages/swatch/src/spectrum-swatch-group.css
+++ b/packages/swatch/src/spectrum-swatch-group.css
@@ -12,9 +12,6 @@ governing permissions and limitations under the License.
/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
:host {
- --spectrum-swatchgroup-spacing-compact: var(--spectrum-spacing-50);
- --spectrum-swatchgroup-spacing-regular: var(--spectrum-spacing-75);
- --spectrum-swatchgroup-spacing-spacious: var(--spectrum-spacing-100);
justify-content: flex-start;
align-items: flex-start;
gap: var(
diff --git a/packages/swatch/src/spectrum-swatch.css b/packages/swatch/src/spectrum-swatch.css
index 22b6a24120..2af7c1ac63 100644
--- a/packages/swatch/src/spectrum-swatch.css
+++ b/packages/swatch/src/spectrum-swatch.css
@@ -11,72 +11,6 @@ governing permissions and limitations under the License.
*/
/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
-:host {
- --spectrum-swatch-focus-indicator-border-radius: 8px;
- --spectrum-swatch-icon-border-color: #00000082;
- --spectrum-swatch-size: var(--spectrum-swatch-size-small);
- --spectrum-swatch-border-radius: var(--spectrum-corner-radius-100);
- --spectrum-swatch-border-thickness: var(--spectrum-border-width-100);
- --spectrum-swatch-border-thickness-selected: var(
- --spectrum-border-width-200
- );
- --spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-75);
- --spectrum-swatch-slash-thickness: var(
- --spectrum-swatch-slash-thickness-small
- );
- --spectrum-swatch-focus-indicator-thickness: var(
- --spectrum-focus-indicator-thickness
- );
- --spectrum-swatch-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
- --spectrum-swatch-border-color-selected: var(--spectrum-gray-900);
- --spectrum-swatch-inner-border-color-selected: var(--spectrum-gray-50);
- --spectrum-swatch-disabled-icon-border-color: var(
- --spectrum-swatch-disabled-icon-border-color
- );
- --spectrum-swatch-disabled-icon-color: var(--spectrum-white);
- --spectrum-swatch-dash-icon-color: var(--spectrum-gray-800);
- --spectrum-swatch-slash-icon-color: var(--spectrum-red-900);
- --spectrum-swatch-focus-indicator-color: var(
- --spectrum-focus-indicator-color
- );
-}
-
-:host([size='xs']) {
- --spectrum-swatch-size: var(--spectrum-swatch-size-extra-small);
- --spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-50);
- --spectrum-swatch-slash-thickness: var(
- --spectrum-swatch-slash-thickness-extra-small
- );
-}
-
-:host([size='s']) {
- --spectrum-swatch-size: var(--spectrum-swatch-size-small);
- --spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-75);
- --spectrum-swatch-slash-thickness: var(
- --spectrum-swatch-slash-thickness-small
- );
-}
-
-:host {
- --spectrum-swatch-size: var(--spectrum-swatch-size-medium);
- --spectrum-swatch-disabled-icon-size: var(
- --spectrum-workflow-icon-size-100
- );
- --spectrum-swatch-slash-thickness: var(
- --spectrum-swatch-slash-thickness-medium
- );
-}
-
-:host([size='l']) {
- --spectrum-swatch-size: var(--spectrum-swatch-size-large);
- --spectrum-swatch-disabled-icon-size: var(
- --spectrum-workflow-icon-size-200
- );
- --spectrum-swatch-slash-thickness: var(
- --spectrum-swatch-slash-thickness-large
- );
-}
-
@media (forced-colors: active) {
:host {
--highcontrast-swatch-disabled-icon-color: GrayText;
@@ -210,6 +144,7 @@ governing permissions and limitations under the License.
}
:host([mixed-value]) .fill {
+ background: none;
background: var(--spectrum-picked-color, transparent);
}
@@ -219,6 +154,7 @@ governing permissions and limitations under the License.
}
:host([nothing]) .fill {
+ background-color: initial;
background-color: var(--spectrum-picked-color, transparent);
background-image: none;
}
@@ -312,6 +248,10 @@ governing permissions and limitations under the License.
inline-size: 100%;
block-size: 100%;
box-sizing: border-box;
+ border-radius: var(
+ --mod-swatch-border-radius,
+ var(--spectrum-swatch-border-radius)
+ );
justify-content: center;
align-items: center;
display: flex;
@@ -319,18 +259,9 @@ governing permissions and limitations under the License.
overflow: hidden;
}
-.fill,
-.fill:before {
- border-radius: var(
- --mod-swatch-border-radius,
- var(--spectrum-swatch-border-radius)
- );
-}
-
.fill:before {
content: '';
z-index: 0;
- background-color: var(--spectrum-picked-color, transparent);
box-shadow: inset 0 0 0
var(
--mod-swatch-border-thickness,
@@ -340,17 +271,42 @@ governing permissions and limitations under the License.
--highcontrast-swatch-border-color,
var(--mod-swatch-border-color, var(--spectrum-swatch-border-color))
);
+ border-radius: var(
+ --mod-swatch-border-radius,
+ var(--spectrum-swatch-border-radius)
+ );
position: absolute;
inset: 0;
}
+:host([border='none']) .fill:before,
+.fill:before {
+ background-color: initial;
+ background-color: var(--spectrum-picked-color, transparent);
+}
+
:host([border='none']) .fill:before {
box-shadow: none;
- background-color: var(--spectrum-picked-color, transparent);
+}
+
+:host([border='light']) .fill:before {
+ box-shadow: inset 0 0 0
+ var(
+ --mod-swatch-border-thickness,
+ var(--spectrum-swatch-border-thickness)
+ )
+ var(
+ --highcontrast-swatch-border-color-light,
+ var(
+ --mod-swatch-border-color-light,
+ var(--spectrum-swatch-border-color-light)
+ )
+ );
}
.mixedValueIcon {
pointer-events: none;
+ color: #0000;
color: var(--spectrum-picked-color, transparent);
display: none;
}
diff --git a/packages/swatch/src/swatch-group-overrides.css b/packages/swatch/src/swatch-group-overrides.css
new file mode 100644
index 0000000000..74e554f225
--- /dev/null
+++ b/packages/swatch/src/swatch-group-overrides.css
@@ -0,0 +1,24 @@
+/*
+ Copyright 2023 Adobe. All rights reserved.
+ This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License. You may obtain a copy
+ of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software distributed under
+ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ OF ANY KIND, either express or implied. See the License for the specific language
+ governing permissions and limitations under the License.
+ */
+
+/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
+:host {
+ --spectrum-swatchgroup-spacing-compact: var(
+ --system-swatch-group-spacing-compact
+ );
+ --spectrum-swatchgroup-spacing-regular: var(
+ --system-swatch-group-spacing-regular
+ );
+ --spectrum-swatchgroup-spacing-spacious: var(
+ --system-swatch-group-spacing-spacious
+ );
+}
diff --git a/packages/swatch/src/swatch-group.css b/packages/swatch/src/swatch-group.css
index 03e95742a6..8a55d2eb97 100644
--- a/packages/swatch/src/swatch-group.css
+++ b/packages/swatch/src/swatch-group.css
@@ -11,3 +11,4 @@ governing permissions and limitations under the License.
*/
@import url('./spectrum-swatch-group.css');
+@import url('./swatch-group-overrides.css');
diff --git a/packages/swatch/src/swatch-overrides.css b/packages/swatch/src/swatch-overrides.css
new file mode 100644
index 0000000000..82354bbb92
--- /dev/null
+++ b/packages/swatch/src/swatch-overrides.css
@@ -0,0 +1,99 @@
+/*
+ Copyright 2023 Adobe. All rights reserved.
+ This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License. You may obtain a copy
+ of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software distributed under
+ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ OF ANY KIND, either express or implied. See the License for the specific language
+ governing permissions and limitations under the License.
+ */
+
+/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
+:host([size='l']) {
+ --spectrum-swatch-size: var(--system-swatch-size-l-size);
+ --spectrum-swatch-disabled-icon-size: var(
+ --system-swatch-size-l-disabled-icon-size
+ );
+ --spectrum-swatch-slash-thickness: var(
+ --system-swatch-size-l-slash-thickness
+ );
+}
+
+:host([size='s']) {
+ --spectrum-swatch-size: var(--system-swatch-size-s-size);
+ --spectrum-swatch-disabled-icon-size: var(
+ --system-swatch-size-s-disabled-icon-size
+ );
+ --spectrum-swatch-slash-thickness: var(
+ --system-swatch-size-s-slash-thickness
+ );
+}
+
+:host([size='xs']) {
+ --spectrum-swatch-size: var(--system-swatch-size-xs-size);
+ --spectrum-swatch-disabled-icon-size: var(
+ --system-swatch-size-xs-disabled-icon-size
+ );
+ --spectrum-swatch-slash-thickness: var(
+ --system-swatch-size-xs-slash-thickness
+ );
+}
+
+:host {
+ --spectrum-swatch-size: var(--system-swatch-size-m-size);
+ --spectrum-swatch-disabled-icon-size: var(
+ --system-swatch-size-m-disabled-icon-size
+ );
+ --spectrum-swatch-slash-thickness: var(
+ --system-swatch-size-m-slash-thickness
+ );
+}
+
+:host {
+ --spectrum-swatch-border-radius: var(--system-swatch-border-radius);
+ --spectrum-swatch-focus-indicator-border-radius: var(
+ --system-swatch-focus-indicator-border-radius
+ );
+ --spectrum-swatch-border-thickness: var(--system-swatch-border-thickness);
+ --spectrum-swatch-border-thickness-selected: var(
+ --system-swatch-border-thickness-selected
+ );
+ --spectrum-swatch-focus-indicator-thickness: var(
+ --system-swatch-focus-indicator-thickness
+ );
+ --spectrum-swatch-focus-indicator-gap: var(
+ --system-swatch-focus-indicator-gap
+ );
+ --spectrum-swatch-border-color-opacity: var(
+ --system-swatch-border-color-opacity
+ );
+ --spectrum-swatch-border-color-light-opacity: var(
+ --system-swatch-border-color-light-opacity
+ );
+ --spectrum-swatch-border-color: var(--system-swatch-border-color);
+ --spectrum-swatch-icon-border-color: var(--system-swatch-icon-border-color);
+ --spectrum-swatch-border-color-light: var(
+ --system-swatch-border-color-light
+ );
+ --spectrum-swatch-border-color-selected: var(
+ --system-swatch-border-color-selected
+ );
+ --spectrum-swatch-inner-border-color-selected: var(
+ --system-swatch-inner-border-color-selected
+ );
+ --spectrum-swatch-disabled-icon-color: var(
+ --system-swatch-disabled-icon-color
+ );
+ --spectrum-swatch-dash-icon-color: var(--system-swatch-dash-icon-color);
+ --spectrum-swatch-slash-icon-color: var(--system-swatch-slash-icon-color);
+ --spectrum-swatch-focus-indicator-color: var(
+ --system-swatch-focus-indicator-color
+ );
+ --spectrum-swatch-size: var(--system-swatch-size);
+ --spectrum-swatch-disabled-icon-size: var(
+ --system-swatch-disabled-icon-size
+ );
+ --spectrum-swatch-slash-thickness: var(--system-swatch-slash-thickness);
+}
diff --git a/packages/swatch/src/swatch.css b/packages/swatch/src/swatch.css
index de55830647..bacc4afb4d 100644
--- a/packages/swatch/src/swatch.css
+++ b/packages/swatch/src/swatch.css
@@ -11,6 +11,7 @@ governing permissions and limitations under the License.
*/
@import url('./spectrum-swatch.css');
+@import url('./swatch-overrides.css');
/**
* Begin work around for https://github.com/adobe/spectrum-css/issues/1460
diff --git a/packages/switch/package.json b/packages/switch/package.json
index 9cf1b91310..ea1873cb9d 100644
--- a/packages/switch/package.json
+++ b/packages/switch/package.json
@@ -34,6 +34,7 @@
"default": "./src/index.js"
},
"./src/switch-legacy.css.js": "./src/switch-legacy.css.js",
+ "./src/switch-overrides.css.js": "./src/switch-overrides.css.js",
"./src/switch.css.js": "./src/switch.css.js",
"./sp-switch.js": {
"development": "./sp-switch.dev.js",
@@ -62,7 +63,7 @@
"@spectrum-web-components/checkbox": "^0.49.0"
},
"devDependencies": {
- "@spectrum-css/switch": "^5.1.0"
+ "@spectrum-css/switch": "^6.0.0-s2-foundations.16"
},
"types": "./src/index.d.ts",
"customElements": "custom-elements.json",
diff --git a/packages/switch/src/spectrum-switch.css b/packages/switch/src/spectrum-switch.css
index 6a7a08770d..2dcc0d89f1 100644
--- a/packages/switch/src/spectrum-switch.css
+++ b/packages/switch/src/spectrum-switch.css
@@ -12,159 +12,10 @@ governing permissions and limitations under the License.
/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
:host {
- --spectrum-switch-label-color-default: var(
- --spectrum-neutral-content-color-default
- );
- --spectrum-switch-label-color-hover: var(
- --spectrum-neutral-content-color-hover
- );
- --spectrum-switch-label-color-down: var(
- --spectrum-neutral-content-color-down
- );
- --spectrum-switch-label-color-focus: var(
- --spectrum-neutral-content-color-key-focus
- );
- --spectrum-switch-label-color-disabled: var(
- --spectrum-disabled-content-color
- );
- --spectrum-switch-background-color: var(--spectrum-gray-300);
- --spectrum-switch-background-color-disabled: var(--spectrum-gray-300);
- --spectrum-switch-background-color-selected-disabled: var(
- --spectrum-disabled-content-color
- );
- --spectrum-switch-background-color-selected-default: var(
- --spectrum-neutral-background-color-selected-default
- );
- --spectrum-switch-background-color-selected-hover: var(
- --spectrum-neutral-background-color-selected-hover
- );
- --spectrum-switch-background-color-selected-down: var(
- --spectrum-neutral-background-color-selected-down
- );
- --spectrum-switch-background-color-selected-focus: var(
- --spectrum-neutral-background-color-selected-key-focus
- );
--spectrum-switch-focus-indicator-thickness: var(
--mod-focus-indicator-thickness,
var(--spectrum-focus-indicator-thickness)
);
- --spectrum-switch-focus-indicator-color: var(
- --spectrum-focus-indicator-color
- );
- --spectrum-switch-handle-background-color: var(--spectrum-gray-75);
- --spectrum-switch-handle-border-color-disabled: var(
- --spectrum-disabled-content-color
- );
-}
-
-:host([disabled]) {
- --spectrum-switch-label-color-default: var(
- --spectrum-disabled-content-color
- );
-}
-
-:host([emphasized]) {
- --spectrum-switch-background-color-selected-default: var(
- --spectrum-accent-color-900
- );
- --spectrum-switch-background-color-selected-hover: var(
- --spectrum-accent-color-1000
- );
- --spectrum-switch-background-color-selected-down: var(
- --spectrum-accent-color-1100
- );
- --spectrum-switch-background-color-selected-focus: var(
- --spectrum-accent-color-1000
- );
- --spectrum-switch-handle-border-color-selected-default: var(
- --spectrum-accent-color-900
- );
- --spectrum-switch-handle-border-color-selected-hover: var(
- --spectrum-accent-color-1000
- );
- --spectrum-switch-handle-border-color-selected-down: var(
- --spectrum-accent-color-1100
- );
- --spectrum-switch-handle-border-color-selected-focus: var(
- --spectrum-accent-color-1000
- );
-}
-
-:host([size='s']) {
- --spectrum-switch-min-height: var(--spectrum-component-height-75);
- --spectrum-switch-control-width: var(--spectrum-switch-control-width-small);
- --spectrum-switch-control-height: var(
- --spectrum-switch-control-height-small
- );
- --spectrum-switch-control-label-spacing: var(--spectrum-text-to-control-75);
- --spectrum-switch-spacing-top-to-control: var(
- --spectrum-switch-top-to-control-small
- );
- --spectrum-switch-spacing-top-to-label: var(
- --spectrum-component-top-to-text-75
- );
- --spectrum-switch-font-size: var(--spectrum-font-size-75);
-}
-
-:host {
- --spectrum-switch-min-height: var(--spectrum-component-height-100);
- --spectrum-switch-control-width: var(
- --spectrum-switch-control-width-medium
- );
- --spectrum-switch-control-height: var(
- --spectrum-switch-control-height-medium
- );
- --spectrum-switch-control-label-spacing: var(
- --spectrum-text-to-control-100
- );
- --spectrum-switch-spacing-top-to-control: var(
- --spectrum-switch-top-to-control-medium
- );
- --spectrum-switch-spacing-top-to-label: var(
- --spectrum-component-top-to-text-100
- );
- --spectrum-switch-font-size: var(--spectrum-font-size-100);
-}
-
-:host([size='l']) {
- --spectrum-switch-min-height: var(--spectrum-component-height-200);
- --spectrum-switch-control-width: var(--spectrum-switch-control-width-large);
- --spectrum-switch-control-height: var(
- --spectrum-switch-control-height-large
- );
- --spectrum-switch-control-label-spacing: var(
- --spectrum-text-to-control-200
- );
- --spectrum-switch-spacing-top-to-control: var(
- --spectrum-switch-top-to-control-large
- );
- --spectrum-switch-spacing-top-to-label: var(
- --spectrum-component-top-to-text-200
- );
- --spectrum-switch-font-size: var(--spectrum-font-size-200);
-}
-
-:host([size='xl']) {
- --spectrum-switch-min-height: var(--spectrum-component-height-300);
- --spectrum-switch-control-width: var(
- --spectrum-switch-control-width-extra-large
- );
- --spectrum-switch-control-height: var(
- --spectrum-switch-control-height-extra-large
- );
- --spectrum-switch-control-label-spacing: var(
- --spectrum-text-to-control-300
- );
- --spectrum-switch-spacing-top-to-control: var(
- --spectrum-switch-top-to-control-extra-large
- );
- --spectrum-switch-spacing-top-to-label: var(
- --spectrum-component-top-to-text-300
- );
- --spectrum-switch-font-size: var(--spectrum-font-size-300);
-}
-
-:host {
min-block-size: var(--mod-switch-height, var(--spectrum-switch-min-height));
max-inline-size: 100%;
vertical-align: top;
@@ -445,7 +296,10 @@ governing permissions and limitations under the License.
box-shadow: 0 0 0
var(
--mod-switch-focus-indicator-thickness,
- var(--spectrum-switch-focus-indicator-thickness)
+ var(
+ --mod-focus-indicator-thickness,
+ var(--spectrum-switch-focus-indicator-thickness)
+ )
)
var(
--highcontrast-switch-focus-indicator-color,
@@ -608,7 +462,10 @@ governing permissions and limitations under the License.
box-shadow: 0 0 0
var(
--mod-switch-focus-indicator-thickness,
- var(--spectrum-switch-focus-indicator-thickness)
+ var(
+ --mod-focus-indicator-thickness,
+ var(--spectrum-switch-focus-indicator-thickness)
+ )
)
var(
--highcontrast-switch-focus-indicator-color,
@@ -737,7 +594,6 @@ governing permissions and limitations under the License.
@media (forced-colors: active) {
:host {
- forced-color-adjust: none;
--highcontrast-switch-label-color-default: ButtonText;
--highcontrast-switch-label-color-hover: ButtonText;
--highcontrast-switch-label-color-down: ButtonText;
@@ -760,6 +616,7 @@ governing permissions and limitations under the License.
--highcontrast-switch-background-color-selected-focus: Highlight;
--highcontrast-switch-background-color-selected-disabled: Highlight;
--highcontrast-switch-focus-indicator-color: ButtonText;
+ forced-color-adjust: none;
}
#input:not(:checked) + #switch {
@@ -773,39 +630,39 @@ governing permissions and limitations under the License.
:host([disabled][checked]:hover) #input + #switch,
:host([disabled][checked]:hover) #input + #switch {
- box-shadow: inset 0 0 0 1px GrayText;
background-color: GrayText;
+ box-shadow: inset 0 0 0 1px GrayText;
}
:host([disabled][checked]:hover) #input + #switch:before,
:host([disabled][checked]:hover) #input + #switch:before {
- border-color: GrayText;
background-color: ButtonFace;
+ border-color: GrayText;
}
}
:host([disabled]) #input:not(:checked) + #switch,
:host([disabled]) #input:not(:checked) + #switch {
- box-shadow: inset 0 0 0 1px GrayText;
background-color: ButtonFace;
+ box-shadow: inset 0 0 0 1px GrayText;
}
:host([disabled]) #input:not(:checked) + #switch:before,
:host([disabled]) #input:not(:checked) + #switch:before {
- border-color: GrayText;
background-color: ButtonFace;
+ border-color: GrayText;
}
:host([disabled][checked]) #input + #switch,
:host([disabled][checked]) #input + #switch {
- box-shadow: inset 0 0 0 1px GrayText;
background-color: GrayText;
+ box-shadow: inset 0 0 0 1px GrayText;
}
:host([disabled][checked]) #input + #switch:before,
:host([disabled][checked]) #input + #switch:before {
- border-color: GrayText;
background-color: ButtonFace;
+ border-color: GrayText;
}
:host([disabled]) #input ~ #label,
@@ -813,30 +670,3 @@ governing permissions and limitations under the License.
color: GrayText;
}
}
-
-:host {
- --spectrum-switch-handle-border-color-default: var(
- --system-spectrum-switch-handle-border-color-default
- );
- --spectrum-switch-handle-border-color-hover: var(
- --system-spectrum-switch-handle-border-color-hover
- );
- --spectrum-switch-handle-border-color-down: var(
- --system-spectrum-switch-handle-border-color-down
- );
- --spectrum-switch-handle-border-color-focus: var(
- --system-spectrum-switch-handle-border-color-focus
- );
- --spectrum-switch-handle-border-color-selected-default: var(
- --system-spectrum-switch-handle-border-color-selected-default
- );
- --spectrum-switch-handle-border-color-selected-hover: var(
- --system-spectrum-switch-handle-border-color-selected-hover
- );
- --spectrum-switch-handle-border-color-selected-down: var(
- --system-spectrum-switch-handle-border-color-selected-down
- );
- --spectrum-switch-handle-border-color-selected-focus: var(
- --system-spectrum-switch-handle-border-color-selected-focus
- );
-}
diff --git a/packages/switch/src/switch-overrides.css b/packages/switch/src/switch-overrides.css
new file mode 100644
index 0000000000..93e1dcb225
--- /dev/null
+++ b/packages/switch/src/switch-overrides.css
@@ -0,0 +1,184 @@
+/*
+ Copyright 2023 Adobe. All rights reserved.
+ This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License. You may obtain a copy
+ of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software distributed under
+ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ OF ANY KIND, either express or implied. See the License for the specific language
+ governing permissions and limitations under the License.
+ */
+
+/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
+:host {
+ --spectrum-switch-handle-border-color-default: var(
+ --system-switch-handle-border-color-default
+ );
+ --spectrum-switch-handle-border-color-hover: var(
+ --system-switch-handle-border-color-hover
+ );
+ --spectrum-switch-handle-border-color-down: var(
+ --system-switch-handle-border-color-down
+ );
+ --spectrum-switch-handle-border-color-focus: var(
+ --system-switch-handle-border-color-focus
+ );
+ --spectrum-switch-handle-border-color-selected-default: var(
+ --system-switch-handle-border-color-selected-default
+ );
+ --spectrum-switch-handle-border-color-selected-hover: var(
+ --system-switch-handle-border-color-selected-hover
+ );
+ --spectrum-switch-handle-border-color-selected-down: var(
+ --system-switch-handle-border-color-selected-down
+ );
+ --spectrum-switch-handle-border-color-selected-focus: var(
+ --system-switch-handle-border-color-selected-focus
+ );
+ --spectrum-switch-label-color-default: var(
+ --system-switch-label-color-default
+ );
+ --spectrum-switch-label-color-hover: var(--system-switch-label-color-hover);
+ --spectrum-switch-label-color-down: var(--system-switch-label-color-down);
+ --spectrum-switch-label-color-focus: var(--system-switch-label-color-focus);
+ --spectrum-switch-label-color-disabled: var(
+ --system-switch-label-color-disabled
+ );
+ --spectrum-switch-background-color: var(--system-switch-background-color);
+ --spectrum-switch-background-color-disabled: var(
+ --system-switch-background-color-disabled
+ );
+ --spectrum-switch-background-color-selected-disabled: var(
+ --system-switch-background-color-selected-disabled
+ );
+ --spectrum-switch-background-color-selected-default: var(
+ --system-switch-background-color-selected-default
+ );
+ --spectrum-switch-background-color-selected-hover: var(
+ --system-switch-background-color-selected-hover
+ );
+ --spectrum-switch-background-color-selected-down: var(
+ --system-switch-background-color-selected-down
+ );
+ --spectrum-switch-background-color-selected-focus: var(
+ --system-switch-background-color-selected-focus
+ );
+ --spectrum-switch-focus-indicator-thickness: var(
+ --system-switch-focus-indicator-thickness
+ );
+ --spectrum-switch-focus-indicator-color: var(
+ --system-switch-focus-indicator-color
+ );
+ --spectrum-switch-handle-background-color: var(
+ --system-switch-handle-background-color
+ );
+ --spectrum-switch-handle-border-color-disabled: var(
+ --system-switch-handle-border-color-disabled
+ );
+}
+
+:host([disabled]) {
+ --spectrum-switch-label-color-default: var(
+ --system-switch-disabled-label-color-default
+ );
+}
+
+:host([emphasized]) {
+ --spectrum-switch-background-color-selected-default: var(
+ --system-switch-emphasized-background-color-selected-default
+ );
+ --spectrum-switch-background-color-selected-hover: var(
+ --system-switch-emphasized-background-color-selected-hover
+ );
+ --spectrum-switch-background-color-selected-down: var(
+ --system-switch-emphasized-background-color-selected-down
+ );
+ --spectrum-switch-background-color-selected-focus: var(
+ --system-switch-emphasized-background-color-selected-focus
+ );
+ --spectrum-switch-handle-border-color-selected-default: var(
+ --system-switch-emphasized-handle-border-color-selected-default
+ );
+ --spectrum-switch-handle-border-color-selected-hover: var(
+ --system-switch-emphasized-handle-border-color-selected-hover
+ );
+ --spectrum-switch-handle-border-color-selected-down: var(
+ --system-switch-emphasized-handle-border-color-selected-down
+ );
+ --spectrum-switch-handle-border-color-selected-focus: var(
+ --system-switch-emphasized-handle-border-color-selected-focus
+ );
+}
+
+:host([size='s']) {
+ --spectrum-switch-min-height: var(--system-switch-size-s-min-height);
+ --spectrum-switch-control-width: var(--system-switch-size-s-control-width);
+ --spectrum-switch-control-height: var(
+ --system-switch-size-s-control-height
+ );
+ --spectrum-switch-control-label-spacing: var(
+ --system-switch-size-s-control-label-spacing
+ );
+ --spectrum-switch-spacing-top-to-control: var(
+ --system-switch-size-s-spacing-top-to-control
+ );
+ --spectrum-switch-spacing-top-to-label: var(
+ --system-switch-size-s-spacing-top-to-label
+ );
+ --spectrum-switch-font-size: var(--system-switch-size-s-font-size);
+}
+
+:host {
+ --spectrum-switch-min-height: var(--system-switch-size-m-min-height);
+ --spectrum-switch-control-width: var(--system-switch-size-m-control-width);
+ --spectrum-switch-control-height: var(
+ --system-switch-size-m-control-height
+ );
+ --spectrum-switch-control-label-spacing: var(
+ --system-switch-size-m-control-label-spacing
+ );
+ --spectrum-switch-spacing-top-to-control: var(
+ --system-switch-size-m-spacing-top-to-control
+ );
+ --spectrum-switch-spacing-top-to-label: var(
+ --system-switch-size-m-spacing-top-to-label
+ );
+ --spectrum-switch-font-size: var(--system-switch-size-m-font-size);
+}
+
+:host([size='l']) {
+ --spectrum-switch-min-height: var(--system-switch-size-l-min-height);
+ --spectrum-switch-control-width: var(--system-switch-size-l-control-width);
+ --spectrum-switch-control-height: var(
+ --system-switch-size-l-control-height
+ );
+ --spectrum-switch-control-label-spacing: var(
+ --system-switch-size-l-control-label-spacing
+ );
+ --spectrum-switch-spacing-top-to-control: var(
+ --system-switch-size-l-spacing-top-to-control
+ );
+ --spectrum-switch-spacing-top-to-label: var(
+ --system-switch-size-l-spacing-top-to-label
+ );
+ --spectrum-switch-font-size: var(--system-switch-size-l-font-size);
+}
+
+:host([size='xl']) {
+ --spectrum-switch-min-height: var(--system-switch-size-xl-min-height);
+ --spectrum-switch-control-width: var(--system-switch-size-xl-control-width);
+ --spectrum-switch-control-height: var(
+ --system-switch-size-xl-control-height
+ );
+ --spectrum-switch-control-label-spacing: var(
+ --system-switch-size-xl-control-label-spacing
+ );
+ --spectrum-switch-spacing-top-to-control: var(
+ --system-switch-size-xl-spacing-top-to-control
+ );
+ --spectrum-switch-spacing-top-to-label: var(
+ --system-switch-size-xl-spacing-top-to-label
+ );
+ --spectrum-switch-font-size: var(--system-switch-size-xl-font-size);
+}
diff --git a/packages/switch/src/switch.css b/packages/switch/src/switch.css
index 9f38b6ca61..6a48a80cab 100644
--- a/packages/switch/src/switch.css
+++ b/packages/switch/src/switch.css
@@ -11,6 +11,7 @@ governing permissions and limitations under the License.
*/
@import url('./spectrum-switch.css');
+@import url('./switch-overrides.css');
:host([disabled]) {
pointer-events: none;
diff --git a/packages/table/package.json b/packages/table/package.json
index 040e6bbf69..7bc86d1773 100644
--- a/packages/table/package.json
+++ b/packages/table/package.json
@@ -58,10 +58,16 @@
"default": "./src/index.js"
},
"./src/table-body.css.js": "./src/table-body.css.js",
+ "./src/table-cell-overrides.css.js": "./src/table-cell-overrides.css.js",
"./src/table-cell.css.js": "./src/table-cell.css.js",
+ "./src/table-checkbox-cell-overrides.css.js": "./src/table-checkbox-cell-overrides.css.js",
"./src/table-checkbox-cell.css.js": "./src/table-checkbox-cell.css.js",
+ "./src/table-head-cell-overrides.css.js": "./src/table-head-cell-overrides.css.js",
"./src/table-head-cell.css.js": "./src/table-head-cell.css.js",
+ "./src/table-head-overrides.css.js": "./src/table-head-overrides.css.js",
"./src/table-head.css.js": "./src/table-head.css.js",
+ "./src/table-overrides.css.js": "./src/table-overrides.css.js",
+ "./src/table-row-overrides.css.js": "./src/table-row-overrides.css.js",
"./src/table-row.css.js": "./src/table-row.css.js",
"./src/table.css.js": "./src/table.css.js",
"./elements.js": {
@@ -123,7 +129,7 @@
"@spectrum-web-components/icons-ui": "^0.49.0"
},
"devDependencies": {
- "@spectrum-css/table": "^6.1.0"
+ "@spectrum-css/table": "^7.0.0-s2-foundations.17"
},
"types": "./src/index.d.ts",
"customElements": "custom-elements.json",
diff --git a/packages/table/src/TableHeadCell.ts b/packages/table/src/TableHeadCell.ts
index 2b5eaaf945..b5bb665641 100644
--- a/packages/table/src/TableHeadCell.ts
+++ b/packages/table/src/TableHeadCell.ts
@@ -22,6 +22,7 @@ import '@spectrum-web-components/icons-ui/icons/sp-icon-arrow100.js';
import styles from './table-head-cell.css.js';
import arrowStyles from '@spectrum-web-components/icon/src/spectrum-icon-arrow.css.js';
+import arrowOverrides from '@spectrum-web-components/icon/src/icon-arrow-overrides.css.js';
export type SortedEventDetails = {
sortDirection: 'asc' | 'desc';
@@ -43,7 +44,7 @@ const ariaSortValue = (sortDirection?: 'asc' | 'desc'): string => {
*/
export class TableHeadCell extends SpectrumElement {
public static override get styles(): CSSResultArray {
- return [styles, arrowStyles];
+ return [styles, arrowStyles, arrowOverrides];
}
@property({ type: Boolean, reflect: true })
diff --git a/packages/table/src/spectrum-table-body.css b/packages/table/src/spectrum-table-body.css
index 0ef53e835f..6ee65c89a5 100644
--- a/packages/table/src/spectrum-table-body.css
+++ b/packages/table/src/spectrum-table-body.css
@@ -21,6 +21,7 @@ governing permissions and limitations under the License.
}
:host([drop-target]) {
+ --spectrum-table-border-color: transparent;
outline-width: var(
--mod-table-focus-indicator-thickness,
var(--spectrum-table-focus-indicator-thickness)
@@ -33,7 +34,6 @@ governing permissions and limitations under the License.
var(--spectrum-table-drop-zone-outline-color)
)
);
- --mod-table-border-color: transparent;
}
:host {
diff --git a/packages/table/src/spectrum-table-cell.css b/packages/table/src/spectrum-table-cell.css
index 7b3f463be0..5ddcf20ffc 100644
--- a/packages/table/src/spectrum-table-cell.css
+++ b/packages/table/src/spectrum-table-cell.css
@@ -102,6 +102,12 @@ governing permissions and limitations under the License.
)
)
);
+ outline-offset: calc(
+ var(
+ --mod-table-focus-indicator-thickness,
+ var(--spectrum-table-focus-indicator-thickness)
+ ) * -1
+ );
outline-offset: calc(
var(
--mod-table-focus-indicator-thickness,
diff --git a/packages/table/src/spectrum-table-checkbox-cell.css b/packages/table/src/spectrum-table-checkbox-cell.css
index 0caee7d046..0ffde28e3f 100644
--- a/packages/table/src/spectrum-table-checkbox-cell.css
+++ b/packages/table/src/spectrum-table-checkbox-cell.css
@@ -47,6 +47,7 @@ governing permissions and limitations under the License.
--mod-table-header-line-height,
var(--spectrum-table-row-line-height)
);
+ text-transform: none;
text-transform: var(--mod-table-header-text-transform, none);
block-size: var(
--mod-table-min-header-height,
@@ -81,6 +82,7 @@ governing permissions and limitations under the License.
)
)
ease-in-out;
+ cursor: auto;
cursor: var(--mod-table-cursor-header-default, initial);
border-radius: 0;
outline: 0;
@@ -166,6 +168,12 @@ governing permissions and limitations under the License.
)
)
);
+ outline-offset: calc(
+ var(
+ --mod-table-focus-indicator-thickness,
+ var(--spectrum-table-focus-indicator-thickness)
+ ) * -1
+ );
outline-offset: calc(
var(
--mod-table-focus-indicator-thickness,
diff --git a/packages/table/src/spectrum-table-head-cell.css b/packages/table/src/spectrum-table-head-cell.css
index 910334d949..57bac6b077 100644
--- a/packages/table/src/spectrum-table-head-cell.css
+++ b/packages/table/src/spectrum-table-head-cell.css
@@ -60,6 +60,7 @@ governing permissions and limitations under the License.
--mod-table-header-line-height,
var(--spectrum-table-row-line-height)
);
+ text-transform: none;
text-transform: var(--mod-table-header-text-transform, none);
block-size: var(
--mod-table-min-header-height,
@@ -94,6 +95,7 @@ governing permissions and limitations under the License.
)
)
ease-in-out;
+ cursor: auto;
cursor: var(--mod-table-cursor-header-default, initial);
border-radius: 0;
outline: 0;
@@ -105,6 +107,7 @@ governing permissions and limitations under the License.
}
:host([sortable]) {
+ cursor: pointer;
cursor: var(--mod-table-cursor-header-sortable, pointer);
}
@@ -169,6 +172,12 @@ governing permissions and limitations under the License.
)
)
);
+ outline-offset: calc(
+ var(
+ --mod-table-focus-indicator-thickness,
+ var(--spectrum-table-focus-indicator-thickness)
+ ) * -1
+ );
outline-offset: calc(
var(
--mod-table-focus-indicator-thickness,
diff --git a/packages/table/src/spectrum-table-row.css b/packages/table/src/spectrum-table-row.css
index 2a2c47a92d..85ff8f0591 100644
--- a/packages/table/src/spectrum-table-row.css
+++ b/packages/table/src/spectrum-table-row.css
@@ -130,6 +130,7 @@ governing permissions and limitations under the License.
)
)
ease-in-out;
+ cursor: pointer;
cursor: var(--mod-table-cursor-row-default, pointer);
border-block-start: none;
position: relative;
@@ -202,7 +203,8 @@ governing permissions and limitations under the License.
--highcontrast-table-selected-row-text-color
);
--spectrum-table-cell-background-color: var(
- --spectrum-table-selected-cell-background-color
+ --highcontrast-table-selected-row-background-color,
+ var(--spectrum-table-selected-cell-background-color)
);
}
@@ -215,7 +217,8 @@ governing permissions and limitations under the License.
--highcontrast-table-selected-row-text-color-focus
);
--spectrum-table-cell-background-color: var(
- --spectrum-table-selected-cell-background-color-focus
+ --highcontrast-table-selected-row-background-color-focus,
+ var(--spectrum-table-selected-cell-background-color-focus)
);
}
@@ -237,6 +240,10 @@ governing permissions and limitations under the License.
}
:host([drop-target]) {
+ --spectrum-table-border-color: var(
+ --highcontrast-table-focus-indicator-color,
+ transparent
+ );
outline-width: var(
--mod-table-focus-indicator-thickness,
var(--spectrum-table-focus-indicator-thickness)
@@ -255,10 +262,6 @@ governing permissions and limitations under the License.
var(--spectrum-table-focus-indicator-thickness)
) * -1
);
- --mod-table-border-color: var(
- --highcontrast-table-focus-indicator-color,
- transparent
- );
}
:host([drop-target]) ::slotted(*) {
@@ -319,6 +322,7 @@ governing permissions and limitations under the License.
var(--spectrum-table-section-header-background-color)
)
);
+ cursor: auto;
cursor: var(--mod-table-cursor-section-header, initial);
}
@@ -496,7 +500,8 @@ governing permissions and limitations under the License.
--highcontrast-table-selected-row-text-color-focus
);
--spectrum-table-cell-background-color: var(
- --spectrum-table-selected-cell-background-color-focus
+ --highcontrast-table-selected-row-background-color-focus,
+ var(--spectrum-table-selected-cell-background-color-focus)
);
}
diff --git a/packages/table/src/spectrum-table.css b/packages/table/src/spectrum-table.css
index 01ba234133..5bd999c628 100644
--- a/packages/table/src/spectrum-table.css
+++ b/packages/table/src/spectrum-table.css
@@ -11,140 +11,41 @@ governing permissions and limitations under the License.
*/
/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
+@media (forced-colors: active) {
+ :host {
+ --highcontrast-table-row-background-color: Canvas;
+ --highcontrast-table-row-text-color: CanvasText;
+ --highcontrast-table-divider-color: CanvasText;
+ --highcontrast-table-border-color: CanvasText;
+ --highcontrast-table-icon-color: CanvasText;
+ --highcontrast-table-icon-color-focus: Highlight;
+ --highcontrast-table-selected-row-background-color: Highlight;
+ --highcontrast-table-selected-row-text-color: HighlightText;
+ --highcontrast-table-selected-row-text-color-default: HighlightText;
+ --highcontrast-table-selected-row-background-color-focus: Highlight;
+ --highcontrast-table-selected-row-text-color-focus: HighlightText;
+ --highcontrast-table-row-background-color-hover: Highlight;
+ --highcontrast-table-row-text-color-hover: HighlightText;
+ --highcontrast-table-section-header-text-color: Canvas;
+ --highcontrast-table-section-header-background-color: CanvasText;
+ --highcontrast-table-focus-indicator-color: Highlight;
+ --highcontrast-table-transition-duration: 0;
+ }
+
+ @supports (color: SelectedItem) {
+ :host {
+ --highcontrast-table-selected-row-background-color: SelectedItem;
+ --highcontrast-table-selected-row-text-color: SelectedItemText;
+ --highcontrast-table-selected-row-text-color-default: SelectedItemText;
+ }
+ }
+}
+
:host {
- --spectrum-table-header-top-to-text: var(
- --spectrum-table-column-header-row-top-to-text-medium
- );
- --spectrum-table-header-bottom-to-text: var(
- --spectrum-table-column-header-row-bottom-to-text-medium
- );
- --spectrum-table-min-header-height: var(--spectrum-component-height-100);
- --spectrum-table-min-row-height: var(
- --spectrum-table-row-height-medium-regular
- );
- --spectrum-table-row-top-to-text: var(
- --spectrum-table-row-top-to-text-medium-regular
- );
- --spectrum-table-row-bottom-to-text: var(
- --spectrum-table-row-bottom-to-text-medium-regular
- );
- --spectrum-table-cell-inline-space: var(--spectrum-table-edge-to-content);
- --spectrum-table-border-radius: var(--spectrum-corner-radius-100);
- --spectrum-table-border-width: var(--spectrum-table-border-divider-width);
- --spectrum-table-outer-border-inline-width: var(
- --spectrum-table-border-divider-width
- );
- --spectrum-table-icon-to-text: var(--spectrum-text-to-visual-100);
- --spectrum-table-default-vertical-align: top;
- --spectrum-table-header-vertical-align: middle;
- --spectrum-table-header-font-weight: var(--spectrum-bold-font-weight);
- --spectrum-table-row-font-family: var(--spectrum-sans-font-family-stack);
- --spectrum-table-row-font-weight: var(--spectrum-regular-font-weight);
- --spectrum-table-row-font-style: var(--spectrum-default-font-style);
- --spectrum-table-row-font-size: var(--spectrum-font-size-100);
- --spectrum-table-row-line-height: var(--spectrum-line-height-100);
- --spectrum-table-border-color: var(--spectrum-gray-300);
- --spectrum-table-divider-color: var(--spectrum-gray-300);
- --spectrum-table-header-background-color: var(
- --spectrum-transparent-white-100
- );
- --spectrum-table-header-text-color: var(--spectrum-body-color);
- --spectrum-table-row-background-color: var(--spectrum-gray-50);
- --spectrum-table-row-text-color: var(
- --spectrum-neutral-content-color-default
- );
- --spectrum-table-selected-row-background-color: rgba(
- var(--spectrum-blue-900-rgb),
- var(--spectrum-table-selected-row-background-opacity)
- );
- --spectrum-table-selected-row-background-color-non-emphasized: rgba(
- var(--spectrum-gray-700-rgb),
- var(--spectrum-table-selected-row-background-opacity-non-emphasized)
- );
- --spectrum-table-row-background-color-hover: rgba(
- var(--spectrum-gray-900-rgb),
- var(--spectrum-table-row-hover-opacity)
- );
- --spectrum-table-row-active-color: rgba(
- var(--spectrum-gray-900-rgb),
- var(--spectrum-table-row-down-opacity)
- );
- --spectrum-table-selected-row-background-color-focus: rgba(
- var(--spectrum-blue-900-rgb),
- var(--spectrum-table-selected-row-background-opacity-hover)
- );
- --spectrum-table-selected-row-background-color-non-emphasized-focus: rgba(
- var(--spectrum-gray-700-rgb),
- var(
- --spectrum-table-selected-row-background-opacity-non-emphasized-hover
- )
- );
- --spectrum-table-icon-color-default: var(
- --spectrum-neutral-subdued-content-color-default
- );
- --spectrum-table-icon-color-hover: var(
- --spectrum-neutral-subdued-content-color-hover
- );
- --spectrum-table-icon-color-active: var(
- --spectrum-neutral-subdued-content-color-down
- );
- --spectrum-table-icon-color-focus: var(
- --spectrum-neutral-subdued-content-color-focus
- );
- --spectrum-table-icon-color-focus-hover: var(
- --spectrum-neutral-subdued-content-focus-hover
- );
- --spectrum-table-icon-color-key-focus: var(
- --spectrum-neutral-subdued-content-color-key-focus
- );
- --spectrum-table-header-checkbox-block-spacing: var(
- --spectrum-table-header-row-checkbox-to-top-medium
- );
- --spectrum-table-row-checkbox-block-spacing: var(
- --spectrum-table-row-checkbox-to-top-medium-regular
- );
- --spectrum-table-focus-indicator-thickness: var(
- --spectrum-focus-indicator-thickness
- );
- --spectrum-table-focus-indicator-color: var(
- --spectrum-focus-indicator-color
- );
- --spectrum-table-drop-zone-background-color: rgba(
- var(--spectrum-drop-zone-background-color-rgb),
- var(--spectrum-drop-zone-background-color-opacity)
- );
- --spectrum-table-drop-zone-outline-color: var(
- --spectrum-accent-visual-color
- );
- --spectrum-table-transition-duration: var(
- --spectrum-animation-duration-100
- );
- --spectrum-table-summary-row-font-weight: var(--spectrum-bold-font-weight);
- --spectrum-table-summary-row-background-color: var(--spectrum-gray-200);
- --spectrum-table-section-header-min-height: var(
- --spectrum-table-section-header-row-height-medium
- );
- --spectrum-table-section-header-block-start-spacing: var(
- --spectrum-component-top-to-text-100
- );
- --spectrum-table-section-header-block-end-spacing: var(
- --spectrum-component-bottom-to-text-100
- );
- --spectrum-table-section-header-font-weight: var(
- --spectrum-bold-font-weight
- );
- --spectrum-table-section-header-background-color: var(--spectrum-gray-200);
- --spectrum-table-collapsible-tier-indent: var(--spectrum-spacing-300);
- --spectrum-table-collapsible-disclosure-inline-spacing: 0px;
- --spectrum-table-disclosure-icon-size: var(--spectrum-component-height-100);
- --spectrum-table-collapsible-icon-animation-duration: var(
- --spectrum-animation-duration-100
- );
- --spectrum-table-thumbnail-to-text: var(--spectrum-text-to-visual-100);
- --spectrum-table-thumbnail-block-spacing: var(
- --spectrum-table-thumbnail-to-top-minimum-medium-regular
+ --mod-thumbnail-size: var(
+ --mod-table-thumbnail-size,
+ var(--spectrum-table-thumbnail-size)
);
- --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-300);
--spectrum-table-cell-background-color: var(
--highcontrast-table-row-background-color,
var(
@@ -168,10 +69,6 @@ governing permissions and limitations under the License.
)
)
);
- --mod-thumbnail-size: var(
- --mod-table-thumbnail-size,
- var(--spectrum-table-thumbnail-size)
- );
}
:host:dir(rtl),
@@ -179,343 +76,226 @@ governing permissions and limitations under the License.
--spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
}
-:host([size='s']) {
- --spectrum-table-min-header-height: var(--spectrum-component-height-100);
- --spectrum-table-header-top-to-text: var(
- --spectrum-table-column-header-row-top-to-text-small
- );
- --spectrum-table-header-bottom-to-text: var(
- --spectrum-table-column-header-row-bottom-to-text-small
- );
- --spectrum-table-min-row-height: var(
- --spectrum-table-row-height-small-regular
- );
- --spectrum-table-row-top-to-text: var(
- --spectrum-table-row-top-to-text-small-regular
- );
- --spectrum-table-row-bottom-to-text: var(
- --spectrum-table-row-bottom-to-text-small-regular
- );
- --spectrum-table-icon-to-text: var(--spectrum-text-to-visual-100);
- --spectrum-table-row-font-size: var(--spectrum-font-size-75);
- --spectrum-table-header-checkbox-block-spacing: var(
- --spectrum-table-header-row-checkbox-to-top-small
- );
- --spectrum-table-row-checkbox-block-spacing: var(
- --spectrum-table-row-checkbox-to-top-small-regular
- );
- --spectrum-table-section-header-min-height: var(
- --spectrum-table-section-header-row-height-small
- );
- --spectrum-table-section-header-block-start-spacing: var(
- --spectrum-component-top-to-text-75
- );
- --spectrum-table-section-header-block-end-spacing: var(
- --spectrum-component-bottom-to-text-75
- );
- --spectrum-table-disclosure-icon-size: var(--spectrum-component-height-75);
- --spectrum-table-thumbnail-block-spacing: var(
- --spectrum-table-thumbnail-to-top-minimum-small-regular
- );
- --spectrum-table-thumbnail-to-text: var(--spectrum-text-to-visual-100);
- --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-200);
-}
-
-:host([size='l']) {
- --spectrum-table-min-header-height: var(--spectrum-component-height-200);
- --spectrum-table-header-top-to-text: var(
- --spectrum-table-column-header-row-top-to-text-large
- );
- --spectrum-table-header-bottom-to-text: var(
- --spectrum-table-column-header-row-bottom-to-text-large
- );
- --spectrum-table-min-row-height: var(
- --spectrum-table-row-height-large-regular
- );
- --spectrum-table-row-top-to-text: var(
- --spectrum-table-row-top-to-text-large-regular
- );
- --spectrum-table-row-bottom-to-text: var(
- --spectrum-table-row-bottom-to-text-large-regular
- );
- --spectrum-table-icon-to-text: var(--spectrum-text-to-visual-200);
- --spectrum-table-row-font-size: var(--spectrum-font-size-200);
- --spectrum-table-header-checkbox-block-spacing: var(
- --spectrum-table-header-row-checkbox-to-top-large
- );
- --spectrum-table-row-checkbox-block-spacing: var(
- --spectrum-table-row-checkbox-to-top-large-regular
- );
- --spectrum-table-section-header-min-height: var(
- --spectrum-table-section-header-row-height-large
- );
- --spectrum-table-section-header-block-start-spacing: var(
- --spectrum-component-top-to-text-200
- );
- --spectrum-table-section-header-block-end-spacing: var(
- --spectrum-component-bottom-to-text-200
- );
- --spectrum-table-disclosure-icon-size: var(--spectrum-component-height-200);
- --spectrum-table-thumbnail-block-spacing: var(
- --spectrum-table-thumbnail-to-top-minimum-large-regular
- );
- --spectrum-table-thumbnail-to-text: var(--spectrum-text-to-visual-200);
- --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-500);
+:host:not(.spectrum-Table-scroller) {
+ border-collapse: initial;
+ border-spacing: 0;
}
-:host([size='xl']) {
- --spectrum-table-min-header-height: var(--spectrum-component-height-300);
- --spectrum-table-header-top-to-text: var(
- --spectrum-table-column-header-row-top-to-text-extra-large
- );
- --spectrum-table-header-bottom-to-text: var(
- --spectrum-table-column-header-row-bottom-to-text-extra-large
- );
- --spectrum-table-min-row-height: var(
- --spectrum-table-row-height-extra-large-regular
- );
- --spectrum-table-row-top-to-text: var(
- --spectrum-table-row-top-to-text-extra-large-regular
- );
- --spectrum-table-row-bottom-to-text: var(
- --spectrum-table-row-bottom-to-text-extra-large-regular
- );
- --spectrum-table-icon-to-text: var(--spectrum-text-to-visual-300);
- --spectrum-table-row-font-size: var(--spectrum-font-size-300);
- --spectrum-table-header-checkbox-block-spacing: var(
- --spectrum-table-header-row-checkbox-to-top-extra-large
- );
- --spectrum-table-row-checkbox-block-spacing: var(
- --spectrum-table-row-checkbox-to-top-extra-large-regular
- );
- --spectrum-table-section-header-min-height: var(
- --spectrum-table-section-header-row-height-extra-large
- );
- --spectrum-table-section-header-block-start-spacing: var(
- --spectrum-component-top-to-text-300
- );
- --spectrum-table-section-header-block-end-spacing: var(
- --spectrum-component-bottom-to-text-300
- );
- --spectrum-table-disclosure-icon-size: var(--spectrum-component-height-300);
- --spectrum-table-thumbnail-block-spacing: var(
- --spectrum-table-thumbnail-to-top-minimum-extra-large-regular
- );
- --spectrum-table-thumbnail-to-text: var(--spectrum-text-to-visual-300);
- --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-700);
+:host:not(.spectrum-Table-scroller) {
+ display: table;
}
:host([density='compact']) {
- --mod-table-min-row-height: var(
+ --spectrum-table-min-row-height: var(
--mod-table-min-row-height--compact,
var(--spectrum-table-row-height-medium-compact)
);
- --mod-table-row-top-to-text: var(
+ --spectrum-table-row-top-to-text: var(
--mod-table-row-top-to-text--compact,
var(--spectrum-table-row-top-to-text-medium-compact)
);
- --mod-table-row-bottom-to-text: var(
+ --spectrum-table-row-bottom-to-text: var(
--mod-table-row-bottom-to-text--compact,
var(--spectrum-table-row-bottom-to-text-medium-compact)
);
- --mod-table-row-checkbox-block-spacing: var(
+ --spectrum-table-row-checkbox-block-spacing: var(
--mod-table-row-checkbox-block-spacing--compact,
var(--spectrum-table-row-checkbox-to-top-medium-compact)
);
- --mod-table-thumbnail-block-spacing: var(
+ --spectrum-table-thumbnail-block-spacing: var(
--mod-table-thumbnail-block-spacing-compact,
var(--spectrum-table-thumbnail-to-top-minimum-medium-compact)
);
- --mod-table-thumbnail-size: var(
+ --spectrum-table-thumbnail-size: var(
--mod-table-thumbnail-size-compact,
var(--spectrum-thumbnail-size-200)
);
}
:host([density='compact'][size='s']) {
- --mod-table-min-row-height: var(
+ --spectrum-table-min-row-height: var(
--mod-table-min-row-height--compact,
var(--spectrum-table-row-height-small-compact)
);
- --mod-table-row-top-to-text: var(
+ --spectrum-table-row-top-to-text: var(
--mod-table-row-top-to-text--compact,
var(--spectrum-table-row-top-to-text-small-compact)
);
- --mod-table-row-bottom-to-text: var(
+ --spectrum-table-row-bottom-to-text: var(
--mod-table-row-bottom-to-text--compact,
var(--spectrum-table-row-bottom-to-text-small-compact)
);
- --mod-table-row-checkbox-block-spacing: var(
+ --spectrum-table-row-checkbox-block-spacing: var(
--mod-table-row-checkbox-block-spacing--compact,
var(--spectrum-table-row-checkbox-to-top-small-compact)
);
- --mod-table-thumbnail-block-spacing: var(
+ --spectrum-table-thumbnail-block-spacing: var(
--mod-table-thumbnail-block-spacing-compact,
var(--spectrum-table-thumbnail-to-top-minimum-small-compact)
);
- --mod-table-thumbnail-size: var(
+ --spectrum-table-thumbnail-size: var(
--mod-table-thumbnail-size-compact,
var(--spectrum-thumbnail-size-50)
);
}
:host([density='compact'][size='l']) {
- --mod-table-min-row-height: var(
+ --spectrum-table-min-row-height: var(
--mod-table-min-row-height--compact,
var(--spectrum-table-row-height-large-compact)
);
- --mod-table-row-top-to-text: var(
+ --spectrum-table-row-top-to-text: var(
--mod-table-row-top-to-text--compact,
var(--spectrum-table-row-top-to-text-large-compact)
);
- --mod-table-row-bottom-to-text: var(
+ --spectrum-table-row-bottom-to-text: var(
--mod-table-row-bottom-to-text--compact,
var(--spectrum-table-row-bottom-to-text-large-compact)
);
- --mod-table-row-checkbox-block-spacing: var(
+ --spectrum-table-row-checkbox-block-spacing: var(
--mod-table-row-checkbox-block-spacing--compact,
var(--spectrum-table-row-checkbox-to-top-large-compact)
);
- --mod-table-thumbnail-block-spacing: var(
+ --spectrum-table-thumbnail-block-spacing: var(
--mod-table-thumbnail-block-spacing-compact,
var(--spectrum-table-thumbnail-to-top-minimum-large-compact)
);
- --mod-table-thumbnail-size: var(
+ --spectrum-table-thumbnail-size: var(
--mod-table-thumbnail-size-compact,
var(--spectrum-thumbnail-size-300)
);
}
:host([density='compact'][size='xl']) {
- --mod-table-min-row-height: var(
+ --spectrum-table-min-row-height: var(
--mod-table-min-row-height--compact,
var(--spectrum-table-row-height-extra-large-compact)
);
- --mod-table-row-top-to-text: var(
+ --spectrum-table-row-top-to-text: var(
--mod-table-row-top-to-text--compact,
var(--spectrum-table-row-top-to-text-extra-large-compact)
);
- --mod-table-row-bottom-to-text: var(
+ --spectrum-table-row-bottom-to-text: var(
--mod-table-row-bottom-to-text--compact,
var(--spectrum-table-row-bottom-to-text-extra-large-compact)
);
- --mod-table-row-checkbox-block-spacing: var(
+ --spectrum-table-row-checkbox-block-spacing: var(
--mod-table-row-checkbox-block-spacing--compact,
var(--spectrum-table-row-checkbox-to-top-extra-large-compact)
);
- --mod-table-thumbnail-block-spacing: var(
+ --spectrum-table-thumbnail-block-spacing: var(
--mod-table-thumbnail-block-spacing-compact,
var(--spectrum-table-thumbnail-to-top-minimum-extra-large-compact)
);
- --mod-table-thumbnail-size: var(
+ --spectrum-table-thumbnail-size: var(
--mod-table-thumbnail-size-compact,
var(--spectrum-thumbnail-size-500)
);
}
:host([density='spacious']) {
- --mod-table-min-row-height: var(
+ --spectrum-table-min-row-height: var(
--mod-table-min-row-height--spacious,
var(--spectrum-table-row-height-medium-spacious)
);
- --mod-table-row-top-to-text: var(
+ --spectrum-table-row-top-to-text: var(
--mod-table-row-top-to-text--spacious,
var(--spectrum-table-row-top-to-text-medium-spacious)
);
- --mod-table-row-bottom-to-text: var(
+ --spectrum-table-row-bottom-to-text: var(
--mod-table-row-bottom-to-text--spacious,
var(--spectrum-table-row-bottom-to-text-medium-spacious)
);
- --mod-table-row-checkbox-block-spacing: var(
+ --spectrum-table-row-checkbox-block-spacing: var(
--mod-table-row-checkbox-block-spacing--spacious,
var(--spectrum-table-row-checkbox-to-top-medium-spacious)
);
- --mod-table-thumbnail-block-spacing: var(
+ --spectrum-table-thumbnail-block-spacing: var(
--mod-table-thumbnail-block-spacing-spacious,
var(--spectrum-table-thumbnail-to-top-minimum-medium-spacious)
);
- --mod-table-thumbnail-size: var(
+ --spectrum-table-thumbnail-size: var(
--mod-table-thumbnail-size-spacious,
var(--spectrum-thumbnail-size-500)
);
}
:host([density='spacious'][size='s']) {
- --mod-table-min-row-height: var(
+ --spectrum-table-min-row-height: var(
--mod-table-min-row-height--spacious,
var(--spectrum-table-row-height-small-spacious)
);
- --mod-table-row-top-to-text: var(
+ --spectrum-table-row-top-to-text: var(
--mod-table-row-top-to-text--spacious,
var(--spectrum-table-row-top-to-text-small-spacious)
);
- --mod-table-row-bottom-to-text: var(
+ --spectrum-table-row-bottom-to-text: var(
--mod-table-row-bottom-to-text--spacious,
var(--spectrum-table-row-bottom-to-text-small-spacious)
);
- --mod-table-row-checkbox-block-spacing: var(
+ --spectrum-table-row-checkbox-block-spacing: var(
--mod-table-row-checkbox-block-spacing--spacious,
var(--spectrum-table-row-checkbox-to-top-small-spacious)
);
- --mod-table-thumbnail-block-spacing: var(
+ --spectrum-table-thumbnail-block-spacing: var(
--mod-table-thumbnail-block-spacing-spacious,
var(--spectrum-table-thumbnail-to-top-minimum-small-spacious)
);
- --mod-table-thumbnail-size: var(
+ --spectrum-table-thumbnail-size: var(
--mod-table-thumbnail-size-spacious,
var(--spectrum-thumbnail-size-300)
);
}
:host([density='spacious'][size='l']) {
- --mod-table-min-row-height: var(
+ --spectrum-table-min-row-height: var(
--mod-table-min-row-height--spacious,
var(--spectrum-table-row-height-large-spacious)
);
- --mod-table-row-top-to-text: var(
+ --spectrum-table-row-top-to-text: var(
--mod-table-row-top-to-text--spacious,
var(--spectrum-table-row-top-to-text-large-spacious)
);
- --mod-table-row-bottom-to-text: var(
+ --spectrum-table-row-bottom-to-text: var(
--mod-table-row-bottom-to-text--spacious,
var(--spectrum-table-row-bottom-to-text-large-spacious)
);
- --mod-table-row-checkbox-block-spacing: var(
+ --spectrum-table-row-checkbox-block-spacing: var(
--mod-table-row-checkbox-block-spacing--spacious,
var(--spectrum-table-row-checkbox-to-top-large-spacious)
);
- --mod-table-thumbnail-block-spacing: var(
+ --spectrum-table-thumbnail-block-spacing: var(
--mod-table-thumbnail-block-spacing-spacious,
var(--spectrum-table-thumbnail-to-top-minimum-large-spacious)
);
- --mod-table-thumbnail-size: var(
+ --spectrum-table-thumbnail-size: var(
--mod-table-thumbnail-size-spacious,
var(--spectrum-thumbnail-size-700)
);
}
:host([density='spacious'][size='xl']) {
- --mod-table-min-row-height: var(
+ --spectrum-table-min-row-height: var(
--mod-table-min-row-height--spacious,
var(--spectrum-table-row-height-extra-large-spacious)
);
- --mod-table-row-top-to-text: var(
+ --spectrum-table-row-top-to-text: var(
--mod-table-row-top-to-text--spacious,
var(--spectrum-table-row-top-to-text-extra-large-spacious)
);
- --mod-table-row-bottom-to-text: var(
+ --spectrum-table-row-bottom-to-text: var(
--mod-table-row-bottom-to-text--spacious,
var(--spectrum-table-row-bottom-to-text-extra-large-spacious)
);
- --mod-table-row-checkbox-block-spacing: var(
+ --spectrum-table-row-checkbox-block-spacing: var(
--mod-table-row-checkbox-block-spacing--spacious,
var(--spectrum-table-row-checkbox-to-top-extra-large-spacious)
);
- --mod-table-thumbnail-block-spacing: var(
+ --spectrum-table-thumbnail-block-spacing: var(
--mod-table-thumbnail-block-spacing-spacious,
var(--spectrum-table-thumbnail-to-top-minimum-extra-large-spacious)
);
- --mod-table-thumbnail-size: var(
+ --spectrum-table-thumbnail-size: var(
--mod-table-thumbnail-size-spacious,
var(--spectrum-thumbnail-size-800)
);
@@ -539,56 +319,17 @@ governing permissions and limitations under the License.
}
:host([quiet]) {
- --mod-table-border-radius: var(--mod-table-border-radius--quiet, 0px);
- --mod-table-outer-border-inline-width: var(
+ --spectrum-table-border-radius: var(--mod-table-border-radius--quiet, 0px);
+ --spectrum-table-outer-border-inline-width: var(
--mod-table-outer-border-inline-width--quiet,
0px
);
- --mod-table-header-background-color: var(
+ --spectrum-table-header-background-color: var(
--mod-table-header-background-color--quiet,
var(--spectrum-transparent-white-100)
);
- --mod-table-row-background-color: var(
+ --spectrum-table-row-background-color: var(
--mod-table-row-background-color--quiet,
var(--spectrum-transparent-white-100)
);
}
-
-@media (forced-colors: active) {
- :host {
- --highcontrast-table-row-background-color: Canvas;
- --highcontrast-table-row-text-color: CanvasText;
- --highcontrast-table-divider-color: CanvasText;
- --highcontrast-table-border-color: CanvasText;
- --highcontrast-table-icon-color: CanvasText;
- --highcontrast-table-icon-color-focus: Highlight;
- --highcontrast-table-selected-row-background-color: Highlight;
- --highcontrast-table-selected-row-text-color: HighlightText;
- --highcontrast-table-selected-row-text-color-default: HighlightText;
- --highcontrast-table-selected-row-background-color-focus: Highlight;
- --highcontrast-table-selected-row-text-color-focus: HighlightText;
- --highcontrast-table-row-background-color-hover: Highlight;
- --highcontrast-table-row-text-color-hover: HighlightText;
- --highcontrast-table-section-header-text-color: Canvas;
- --highcontrast-table-section-header-background-color: CanvasText;
- --highcontrast-table-focus-indicator-color: Highlight;
- --highcontrast-table-transition-duration: 0;
- }
-
- @supports (color: SelectedItem) {
- :host {
- --highcontrast-table-selected-row-background-color: SelectedItem;
- --highcontrast-table-selected-row-text-color: SelectedItemText;
- --highcontrast-table-selected-row-text-color-default: SelectedItemText;
- }
- }
-}
-
-:host:not(.spectrum-Table-scroller) {
- border-collapse: initial;
- border-spacing: 0;
-}
-
-:host:not(.spectrum-Table-scroller) {
- display: table;
-}
diff --git a/packages/table/src/table-cell-overrides.css b/packages/table/src/table-cell-overrides.css
new file mode 100644
index 0000000000..b1cee0dbcd
--- /dev/null
+++ b/packages/table/src/table-cell-overrides.css
@@ -0,0 +1,13 @@
+/*
+Copyright 2023 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
diff --git a/packages/table/src/table-cell.css b/packages/table/src/table-cell.css
index ff882c246c..389988070c 100644
--- a/packages/table/src/table-cell.css
+++ b/packages/table/src/table-cell.css
@@ -11,6 +11,7 @@ governing permissions and limitations under the License.
*/
@import url('./spectrum-table-cell.css');
+@import url('./table-cell-overrides.css');
:host {
display: block;
diff --git a/packages/table/src/table-checkbox-cell-overrides.css b/packages/table/src/table-checkbox-cell-overrides.css
new file mode 100644
index 0000000000..b1cee0dbcd
--- /dev/null
+++ b/packages/table/src/table-checkbox-cell-overrides.css
@@ -0,0 +1,13 @@
+/*
+Copyright 2023 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
diff --git a/packages/table/src/table-checkbox-cell.css b/packages/table/src/table-checkbox-cell.css
index ad3ef1bb3e..ee2cc2565a 100644
--- a/packages/table/src/table-checkbox-cell.css
+++ b/packages/table/src/table-checkbox-cell.css
@@ -11,6 +11,7 @@ governing permissions and limitations under the License.
*/
@import url('./spectrum-table-checkbox-cell.css');
+@import url('./table-checkbox-cell-overrides.css');
:host {
display: flex;
diff --git a/packages/table/src/table-head-cell-overrides.css b/packages/table/src/table-head-cell-overrides.css
new file mode 100644
index 0000000000..b1cee0dbcd
--- /dev/null
+++ b/packages/table/src/table-head-cell-overrides.css
@@ -0,0 +1,13 @@
+/*
+Copyright 2023 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
diff --git a/packages/table/src/table-head-cell.css b/packages/table/src/table-head-cell.css
index 1bd37c4f9d..7c85dba789 100644
--- a/packages/table/src/table-head-cell.css
+++ b/packages/table/src/table-head-cell.css
@@ -11,6 +11,7 @@ governing permissions and limitations under the License.
*/
@import url('./spectrum-table-head-cell.css');
+@import url('./table-head-cell-overrides.css');
:host {
display: block;
diff --git a/packages/table/src/table-head-overrides.css b/packages/table/src/table-head-overrides.css
new file mode 100644
index 0000000000..b1cee0dbcd
--- /dev/null
+++ b/packages/table/src/table-head-overrides.css
@@ -0,0 +1,13 @@
+/*
+Copyright 2023 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
diff --git a/packages/table/src/table-head.css b/packages/table/src/table-head.css
index 8a480fb655..de98358ef8 100644
--- a/packages/table/src/table-head.css
+++ b/packages/table/src/table-head.css
@@ -11,6 +11,7 @@ governing permissions and limitations under the License.
*/
@import url('./spectrum-table-head.css');
+@import url('./table-head-overrides.css');
:host {
display: flex;
diff --git a/packages/table/src/table-overrides.css b/packages/table/src/table-overrides.css
new file mode 100644
index 0000000000..ec09c68a16
--- /dev/null
+++ b/packages/table/src/table-overrides.css
@@ -0,0 +1,470 @@
+/*
+ Copyright 2023 Adobe. All rights reserved.
+ This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License. You may obtain a copy
+ of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software distributed under
+ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ OF ANY KIND, either express or implied. See the License for the specific language
+ governing permissions and limitations under the License.
+ */
+
+/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
+:host {
+ --spectrum-table-header-top-to-text: var(--system-table-header-top-to-text);
+ --spectrum-table-header-bottom-to-text: var(
+ --system-table-header-bottom-to-text
+ );
+ --spectrum-table-min-header-height: var(--system-table-min-header-height);
+ --spectrum-table-min-row-height: var(--system-table-min-row-height);
+ --spectrum-table-row-top-to-text: var(--system-table-row-top-to-text);
+ --spectrum-table-row-bottom-to-text: var(--system-table-row-bottom-to-text);
+ --spectrum-table-cell-inline-space: var(--system-table-cell-inline-space);
+ --spectrum-table-border-radius: var(--system-table-border-radius);
+ --spectrum-table-border-width: var(--system-table-border-width);
+ --spectrum-table-outer-border-inline-width: var(
+ --system-table-outer-border-inline-width
+ );
+ --spectrum-table-icon-to-text: var(--system-table-icon-to-text);
+ --spectrum-table-default-vertical-align: var(
+ --system-table-default-vertical-align
+ );
+ --spectrum-table-header-vertical-align: var(
+ --system-table-header-vertical-align
+ );
+ --spectrum-table-header-font-weight: var(--system-table-header-font-weight);
+ --spectrum-table-row-font-family: var(--system-table-row-font-family);
+ --spectrum-table-row-font-weight: var(--system-table-row-font-weight);
+ --spectrum-table-row-font-style: var(--system-table-row-font-style);
+ --spectrum-table-row-font-size: var(--system-table-row-font-size);
+ --spectrum-table-row-line-height: var(--system-table-row-line-height);
+ --spectrum-table-border-color: var(--system-table-border-color);
+ --spectrum-table-divider-color: var(--system-table-divider-color);
+ --spectrum-table-header-background-color: var(
+ --system-table-header-background-color
+ );
+ --spectrum-table-header-text-color: var(--system-table-header-text-color);
+ --spectrum-table-row-background-color: var(
+ --system-table-row-background-color
+ );
+ --spectrum-table-row-text-color: var(--system-table-row-text-color);
+ --spectrum-table-selected-row-background-color: var(
+ --system-table-selected-row-background-color
+ );
+ --spectrum-table-selected-row-background-color-non-emphasized: var(
+ --system-table-selected-row-background-color-non-emphasized
+ );
+ --spectrum-table-row-background-color-hover: var(
+ --system-table-row-background-color-hover
+ );
+ --spectrum-table-row-active-color: var(--system-table-row-active-color);
+ --spectrum-table-selected-row-background-color-focus: var(
+ --system-table-selected-row-background-color-focus
+ );
+ --spectrum-table-selected-row-background-color-non-emphasized-focus: var(
+ --system-table-selected-row-background-color-non-emphasized-focus
+ );
+ --spectrum-table-icon-color-default: var(--system-table-icon-color-default);
+ --spectrum-table-icon-color-hover: var(--system-table-icon-color-hover);
+ --spectrum-table-icon-color-active: var(--system-table-icon-color-active);
+ --spectrum-table-icon-color-focus: var(--system-table-icon-color-focus);
+ --spectrum-table-icon-color-focus-hover: var(
+ --system-table-icon-color-focus-hover
+ );
+ --spectrum-table-icon-color-key-focus: var(
+ --system-table-icon-color-key-focus
+ );
+ --spectrum-table-header-checkbox-block-spacing: var(
+ --system-table-header-checkbox-block-spacing
+ );
+ --spectrum-table-row-checkbox-block-spacing: var(
+ --system-table-row-checkbox-block-spacing
+ );
+ --spectrum-table-focus-indicator-thickness: var(
+ --system-table-focus-indicator-thickness
+ );
+ --spectrum-table-focus-indicator-color: var(
+ --system-table-focus-indicator-color
+ );
+ --spectrum-table-drop-zone-background-color: var(
+ --system-table-drop-zone-background-color
+ );
+ --spectrum-table-drop-zone-outline-color: var(
+ --system-table-drop-zone-outline-color
+ );
+ --spectrum-table-transition-duration: var(
+ --system-table-transition-duration
+ );
+ --spectrum-table-summary-row-font-weight: var(
+ --system-table-summary-row-font-weight
+ );
+ --spectrum-table-summary-row-background-color: var(
+ --system-table-summary-row-background-color
+ );
+ --spectrum-table-section-header-min-height: var(
+ --system-table-section-header-min-height
+ );
+ --spectrum-table-section-header-block-start-spacing: var(
+ --system-table-section-header-block-start-spacing
+ );
+ --spectrum-table-section-header-block-end-spacing: var(
+ --system-table-section-header-block-end-spacing
+ );
+ --spectrum-table-section-header-font-weight: var(
+ --system-table-section-header-font-weight
+ );
+ --spectrum-table-section-header-background-color: var(
+ --system-table-section-header-background-color
+ );
+ --spectrum-table-collapsible-tier-indent: var(
+ --system-table-collapsible-tier-indent
+ );
+ --spectrum-table-collapsible-disclosure-inline-spacing: var(
+ --system-table-collapsible-disclosure-inline-spacing
+ );
+ --spectrum-table-disclosure-icon-size: var(
+ --system-table-disclosure-icon-size
+ );
+ --spectrum-table-collapsible-icon-animation-duration: var(
+ --system-table-collapsible-icon-animation-duration
+ );
+ --spectrum-table-thumbnail-to-text: var(--system-table-thumbnail-to-text);
+ --spectrum-table-thumbnail-block-spacing: var(
+ --system-table-thumbnail-block-spacing
+ );
+ --spectrum-table-thumbnail-size: var(--system-table-thumbnail-size);
+ --spectrum-table-cell-background-color: var(
+ --system-table-cell-background-color
+ );
+ --spectrum-table-selected-cell-background-color: var(
+ --system-table-selected-cell-background-color
+ );
+ --spectrum-table-selected-cell-background-color-focus: var(
+ --system-table-selected-cell-background-color-focus
+ );
+}
+
+:host([size='s']) {
+ --spectrum-table-min-header-height: var(
+ --system-table-size-s-min-header-height
+ );
+ --spectrum-table-header-top-to-text: var(
+ --system-table-size-s-header-top-to-text
+ );
+ --spectrum-table-header-bottom-to-text: var(
+ --system-table-size-s-header-bottom-to-text
+ );
+ --spectrum-table-min-row-height: var(--system-table-size-s-min-row-height);
+ --spectrum-table-row-top-to-text: var(
+ --system-table-size-s-row-top-to-text
+ );
+ --spectrum-table-row-bottom-to-text: var(
+ --system-table-size-s-row-bottom-to-text
+ );
+ --spectrum-table-icon-to-text: var(--system-table-size-s-icon-to-text);
+ --spectrum-table-row-font-size: var(--system-table-size-s-row-font-size);
+ --spectrum-table-header-checkbox-block-spacing: var(
+ --system-table-size-s-header-checkbox-block-spacing
+ );
+ --spectrum-table-row-checkbox-block-spacing: var(
+ --system-table-size-s-row-checkbox-block-spacing
+ );
+ --spectrum-table-section-header-min-height: var(
+ --system-table-size-s-section-header-min-height
+ );
+ --spectrum-table-section-header-block-start-spacing: var(
+ --system-table-size-s-section-header-block-start-spacing
+ );
+ --spectrum-table-section-header-block-end-spacing: var(
+ --system-table-size-s-section-header-block-end-spacing
+ );
+ --spectrum-table-disclosure-icon-size: var(
+ --system-table-size-s-disclosure-icon-size
+ );
+ --spectrum-table-thumbnail-block-spacing: var(
+ --system-table-size-s-thumbnail-block-spacing
+ );
+ --spectrum-table-thumbnail-to-text: var(
+ --system-table-size-s-thumbnail-to-text
+ );
+ --spectrum-table-thumbnail-size: var(--system-table-size-s-thumbnail-size);
+}
+
+:host([size='l']) {
+ --spectrum-table-min-header-height: var(
+ --system-table-size-l-min-header-height
+ );
+ --spectrum-table-header-top-to-text: var(
+ --system-table-size-l-header-top-to-text
+ );
+ --spectrum-table-header-bottom-to-text: var(
+ --system-table-size-l-header-bottom-to-text
+ );
+ --spectrum-table-min-row-height: var(--system-table-size-l-min-row-height);
+ --spectrum-table-row-top-to-text: var(
+ --system-table-size-l-row-top-to-text
+ );
+ --spectrum-table-row-bottom-to-text: var(
+ --system-table-size-l-row-bottom-to-text
+ );
+ --spectrum-table-icon-to-text: var(--system-table-size-l-icon-to-text);
+ --spectrum-table-row-font-size: var(--system-table-size-l-row-font-size);
+ --spectrum-table-header-checkbox-block-spacing: var(
+ --system-table-size-l-header-checkbox-block-spacing
+ );
+ --spectrum-table-row-checkbox-block-spacing: var(
+ --system-table-size-l-row-checkbox-block-spacing
+ );
+ --spectrum-table-section-header-min-height: var(
+ --system-table-size-l-section-header-min-height
+ );
+ --spectrum-table-section-header-block-start-spacing: var(
+ --system-table-size-l-section-header-block-start-spacing
+ );
+ --spectrum-table-section-header-block-end-spacing: var(
+ --system-table-size-l-section-header-block-end-spacing
+ );
+ --spectrum-table-disclosure-icon-size: var(
+ --system-table-size-l-disclosure-icon-size
+ );
+ --spectrum-table-thumbnail-block-spacing: var(
+ --system-table-size-l-thumbnail-block-spacing
+ );
+ --spectrum-table-thumbnail-to-text: var(
+ --system-table-size-l-thumbnail-to-text
+ );
+ --spectrum-table-thumbnail-size: var(--system-table-size-l-thumbnail-size);
+}
+
+:host([size='xl']) {
+ --spectrum-table-min-header-height: var(
+ --system-table-size-xl-min-header-height
+ );
+ --spectrum-table-header-top-to-text: var(
+ --system-table-size-xl-header-top-to-text
+ );
+ --spectrum-table-header-bottom-to-text: var(
+ --system-table-size-xl-header-bottom-to-text
+ );
+ --spectrum-table-min-row-height: var(--system-table-size-xl-min-row-height);
+ --spectrum-table-row-top-to-text: var(
+ --system-table-size-xl-row-top-to-text
+ );
+ --spectrum-table-row-bottom-to-text: var(
+ --system-table-size-xl-row-bottom-to-text
+ );
+ --spectrum-table-icon-to-text: var(--system-table-size-xl-icon-to-text);
+ --spectrum-table-row-font-size: var(--system-table-size-xl-row-font-size);
+ --spectrum-table-header-checkbox-block-spacing: var(
+ --system-table-size-xl-header-checkbox-block-spacing
+ );
+ --spectrum-table-row-checkbox-block-spacing: var(
+ --system-table-size-xl-row-checkbox-block-spacing
+ );
+ --spectrum-table-section-header-min-height: var(
+ --system-table-size-xl-section-header-min-height
+ );
+ --spectrum-table-section-header-block-start-spacing: var(
+ --system-table-size-xl-section-header-block-start-spacing
+ );
+ --spectrum-table-section-header-block-end-spacing: var(
+ --system-table-size-xl-section-header-block-end-spacing
+ );
+ --spectrum-table-disclosure-icon-size: var(
+ --system-table-size-xl-disclosure-icon-size
+ );
+ --spectrum-table-thumbnail-block-spacing: var(
+ --system-table-size-xl-thumbnail-block-spacing
+ );
+ --spectrum-table-thumbnail-to-text: var(
+ --system-table-size-xl-thumbnail-to-text
+ );
+ --spectrum-table-thumbnail-size: var(--system-table-size-xl-thumbnail-size);
+}
+
+:host([density='compact']) {
+ --spectrum-table-min-row-height: var(--system-table-compact-min-row-height);
+ --spectrum-table-row-top-to-text: var(
+ --system-table-compact-row-top-to-text
+ );
+ --spectrum-table-row-bottom-to-text: var(
+ --system-table-compact-row-bottom-to-text
+ );
+ --spectrum-table-row-checkbox-block-spacing: var(
+ --system-table-compact-row-checkbox-block-spacing
+ );
+ --spectrum-table-thumbnail-block-spacing: var(
+ --system-table-compact-thumbnail-block-spacing
+ );
+ --spectrum-table-thumbnail-size: var(--system-table-compact-thumbnail-size);
+}
+
+:host([density='compact'][size='s']) {
+ --spectrum-table-min-row-height: var(
+ --system-table-compact-size-s-min-row-height
+ );
+ --spectrum-table-row-top-to-text: var(
+ --system-table-compact-size-s-row-top-to-text
+ );
+ --spectrum-table-row-bottom-to-text: var(
+ --system-table-compact-size-s-row-bottom-to-text
+ );
+ --spectrum-table-row-checkbox-block-spacing: var(
+ --system-table-compact-size-s-row-checkbox-block-spacing
+ );
+ --spectrum-table-thumbnail-block-spacing: var(
+ --system-table-compact-size-s-thumbnail-block-spacing
+ );
+ --spectrum-table-thumbnail-size: var(
+ --system-table-compact-size-s-thumbnail-size
+ );
+}
+
+:host([density='compact'][size='l']) {
+ --spectrum-table-min-row-height: var(
+ --system-table-compact-size-l-min-row-height
+ );
+ --spectrum-table-row-top-to-text: var(
+ --system-table-compact-size-l-row-top-to-text
+ );
+ --spectrum-table-row-bottom-to-text: var(
+ --system-table-compact-size-l-row-bottom-to-text
+ );
+ --spectrum-table-row-checkbox-block-spacing: var(
+ --system-table-compact-size-l-row-checkbox-block-spacing
+ );
+ --spectrum-table-thumbnail-block-spacing: var(
+ --system-table-compact-size-l-thumbnail-block-spacing
+ );
+ --spectrum-table-thumbnail-size: var(
+ --system-table-compact-size-l-thumbnail-size
+ );
+}
+
+:host([density='compact'][size='xl']) {
+ --spectrum-table-min-row-height: var(
+ --system-table-compact-size-xl-min-row-height
+ );
+ --spectrum-table-row-top-to-text: var(
+ --system-table-compact-size-xl-row-top-to-text
+ );
+ --spectrum-table-row-bottom-to-text: var(
+ --system-table-compact-size-xl-row-bottom-to-text
+ );
+ --spectrum-table-row-checkbox-block-spacing: var(
+ --system-table-compact-size-xl-row-checkbox-block-spacing
+ );
+ --spectrum-table-thumbnail-block-spacing: var(
+ --system-table-compact-size-xl-thumbnail-block-spacing
+ );
+ --spectrum-table-thumbnail-size: var(
+ --system-table-compact-size-xl-thumbnail-size
+ );
+}
+
+:host([density='spacious']) {
+ --spectrum-table-min-row-height: var(
+ --system-table-spacious-min-row-height
+ );
+ --spectrum-table-row-top-to-text: var(
+ --system-table-spacious-row-top-to-text
+ );
+ --spectrum-table-row-bottom-to-text: var(
+ --system-table-spacious-row-bottom-to-text
+ );
+ --spectrum-table-row-checkbox-block-spacing: var(
+ --system-table-spacious-row-checkbox-block-spacing
+ );
+ --spectrum-table-thumbnail-block-spacing: var(
+ --system-table-spacious-thumbnail-block-spacing
+ );
+ --spectrum-table-thumbnail-size: var(
+ --system-table-spacious-thumbnail-size
+ );
+}
+
+:host([density='spacious'][size='s']) {
+ --spectrum-table-min-row-height: var(
+ --system-table-spacious-size-s-min-row-height
+ );
+ --spectrum-table-row-top-to-text: var(
+ --system-table-spacious-size-s-row-top-to-text
+ );
+ --spectrum-table-row-bottom-to-text: var(
+ --system-table-spacious-size-s-row-bottom-to-text
+ );
+ --spectrum-table-row-checkbox-block-spacing: var(
+ --system-table-spacious-size-s-row-checkbox-block-spacing
+ );
+ --spectrum-table-thumbnail-block-spacing: var(
+ --system-table-spacious-size-s-thumbnail-block-spacing
+ );
+ --spectrum-table-thumbnail-size: var(
+ --system-table-spacious-size-s-thumbnail-size
+ );
+}
+
+:host([density='spacious'][size='l']) {
+ --spectrum-table-min-row-height: var(
+ --system-table-spacious-size-l-min-row-height
+ );
+ --spectrum-table-row-top-to-text: var(
+ --system-table-spacious-size-l-row-top-to-text
+ );
+ --spectrum-table-row-bottom-to-text: var(
+ --system-table-spacious-size-l-row-bottom-to-text
+ );
+ --spectrum-table-row-checkbox-block-spacing: var(
+ --system-table-spacious-size-l-row-checkbox-block-spacing
+ );
+ --spectrum-table-thumbnail-block-spacing: var(
+ --system-table-spacious-size-l-thumbnail-block-spacing
+ );
+ --spectrum-table-thumbnail-size: var(
+ --system-table-spacious-size-l-thumbnail-size
+ );
+}
+
+:host([density='spacious'][size='xl']) {
+ --spectrum-table-min-row-height: var(
+ --system-table-spacious-size-xl-min-row-height
+ );
+ --spectrum-table-row-top-to-text: var(
+ --system-table-spacious-size-xl-row-top-to-text
+ );
+ --spectrum-table-row-bottom-to-text: var(
+ --system-table-spacious-size-xl-row-bottom-to-text
+ );
+ --spectrum-table-row-checkbox-block-spacing: var(
+ --system-table-spacious-size-xl-row-checkbox-block-spacing
+ );
+ --spectrum-table-thumbnail-block-spacing: var(
+ --system-table-spacious-size-xl-thumbnail-block-spacing
+ );
+ --spectrum-table-thumbnail-size: var(
+ --system-table-spacious-size-xl-thumbnail-size
+ );
+}
+
+:host([emphasized]) {
+ --spectrum-table-selected-cell-background-color: var(
+ --system-table-emphasized-selected-cell-background-color
+ );
+ --spectrum-table-selected-cell-background-color-focus: var(
+ --system-table-emphasized-selected-cell-background-color-focus
+ );
+}
+
+:host([quiet]) {
+ --spectrum-table-border-radius: var(--system-table-quiet-border-radius);
+ --spectrum-table-outer-border-inline-width: var(
+ --system-table-quiet-outer-border-inline-width
+ );
+ --spectrum-table-header-background-color: var(
+ --system-table-quiet-header-background-color
+ );
+ --spectrum-table-row-background-color: var(
+ --system-table-quiet-row-background-color
+ );
+}
diff --git a/packages/table/src/table-row-overrides.css b/packages/table/src/table-row-overrides.css
new file mode 100644
index 0000000000..b1cee0dbcd
--- /dev/null
+++ b/packages/table/src/table-row-overrides.css
@@ -0,0 +1,13 @@
+/*
+Copyright 2023 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
diff --git a/packages/table/src/table-row.css b/packages/table/src/table-row.css
index 73325c6af3..1e676227d5 100644
--- a/packages/table/src/table-row.css
+++ b/packages/table/src/table-row.css
@@ -11,6 +11,7 @@ governing permissions and limitations under the License.
*/
@import url('./spectrum-table-row.css');
+@import url('./table-row-overrides.css');
:host,
:host([role='row']) {
diff --git a/packages/table/src/table.css b/packages/table/src/table.css
index 6fb7da3a51..0a559f884b 100644
--- a/packages/table/src/table.css
+++ b/packages/table/src/table.css
@@ -11,6 +11,7 @@ governing permissions and limitations under the License.
*/
@import url('./spectrum-table.css');
+@import url('./table-overrides.css');
:host {
display: flex;
diff --git a/packages/table/test/helpers.ts b/packages/table/test/helpers.ts
index d826b5e590..868dcce163 100644
--- a/packages/table/test/helpers.ts
+++ b/packages/table/test/helpers.ts
@@ -20,7 +20,7 @@ export async function styledFixture(
story: TemplateResult
): Promise {
const test = await fixture(html`
-
+
${story}
`);
diff --git a/packages/table/test/virtualized-table-selects.test.ts b/packages/table/test/virtualized-table-selects.test.ts
index 71647a1b98..82743fe50c 100644
--- a/packages/table/test/virtualized-table-selects.test.ts
+++ b/packages/table/test/virtualized-table-selects.test.ts
@@ -48,15 +48,11 @@ ignoreResizeObserverLoopError(before, after);
describe('Virtualized Table Selects', () => {
it('selects and deselects all checkboxes in Virtualized Table when clicking the TableHeadCheckboxCell', async () => {
- const test = await fixture(
- html`
- (html`
+ (
- html`
- (html`
+ (
- html`
- (html`
+ (
- html`
- (html`
+ (
- html`
- (html`
+ (
- html`
- (html`
+ (
- html`
- (html`
+ (
- html`
- (html`
+ (
- html`
- (html`
+
-
-
-
-
-
-
-
-
-
-```
-
-### Text Only
-
-When the buttons have text only, be sure to include the `text-only` attribute to ensure correct layout of your actions.
-
-```html
-
-
- Edit
- Copy
- Delete
-
-
-```
diff --git a/packages/quick-actions/exports.json b/packages/quick-actions/exports.json
deleted file mode 100644
index 0bc4b66220..0000000000
--- a/packages/quick-actions/exports.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "./src/*": "./src/*",
- "./sp-quick-actions.js": "./sp-quick-actions.js"
-}
diff --git a/packages/quick-actions/package.json b/packages/quick-actions/package.json
deleted file mode 100644
index 1c673e20ce..0000000000
--- a/packages/quick-actions/package.json
+++ /dev/null
@@ -1,72 +0,0 @@
-{
- "name": "@spectrum-web-components/quick-actions",
- "version": "0.49.0",
- "publishConfig": {
- "access": "public"
- },
- "description": "",
- "license": "Apache-2.0",
- "repository": {
- "type": "git",
- "url": "https://github.com/adobe/spectrum-web-components.git",
- "directory": "packages/quick-actions"
- },
- "author": "",
- "homepage": "https://opensource.adobe.com/spectrum-web-components/components/quick-actions",
- "bugs": {
- "url": "https://github.com/adobe/spectrum-web-components/issues"
- },
- "main": "./src/index.js",
- "module": "./src/index.js",
- "type": "module",
- "exports": {
- ".": {
- "development": "./src/index.dev.js",
- "default": "./src/index.js"
- },
- "./package.json": "./package.json",
- "./src/QuickActions.js": {
- "development": "./src/QuickActions.dev.js",
- "default": "./src/QuickActions.js"
- },
- "./src/index.js": {
- "development": "./src/index.dev.js",
- "default": "./src/index.js"
- },
- "./src/quick-actions.css.js": "./src/quick-actions.css.js",
- "./sp-quick-actions.js": {
- "development": "./sp-quick-actions.dev.js",
- "default": "./sp-quick-actions.js"
- }
- },
- "scripts": {
- "test": "karma start --coverage"
- },
- "files": [
- "**/*.d.ts",
- "**/*.js",
- "**/*.js.map",
- "custom-elements.json",
- "!stories/",
- "!test/"
- ],
- "keywords": [
- "spectrum css",
- "web components",
- "lit-element",
- "lit-html"
- ],
- "dependencies": {
- "@spectrum-web-components/base": "^0.49.0"
- },
- "devDependencies": {
- "@spectrum-css/quickaction": "^3.1.1"
- },
- "types": "./src/index.d.ts",
- "customElements": "custom-elements.json",
- "deprecationNotice": "@spectrum-web-components/quick-actions is deprecated and will be removed in the SWC 1.0 release. Use an Action bar to allow users to perform actions on either a single or multiple items at the same time, instead.",
- "sideEffects": [
- "./sp-*.js",
- "./**/*.dev.js"
- ]
-}
diff --git a/packages/quick-actions/src/QuickActions.ts b/packages/quick-actions/src/QuickActions.ts
deleted file mode 100644
index d9ddb66747..0000000000
--- a/packages/quick-actions/src/QuickActions.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-/*
-Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-
-import {
- CSSResultArray,
- html,
- PropertyValues,
- SpectrumElement,
- TemplateResult,
-} from '@spectrum-web-components/base';
-import { property } from '@spectrum-web-components/base/src/decorators.js';
-
-import styles from './quick-actions.css.js';
-
-/**
- * @element sp-quick-actions
- *
- * @slot - Action Buttons to displayed for quick use
- */
-export class QuickActions extends SpectrumElement {
- public static override get styles(): CSSResultArray {
- return [styles];
- }
-
- @property({ type: Boolean, reflect: true })
- public opened = false;
-
- @property({
- type: Boolean,
- attribute: 'text-only',
- hasChanged() {
- return false;
- },
- })
- public textOnly = false;
-
- protected override update(changes: PropertyValues
-
-
-
-
-
-
-
-
-
- `;
-};
-
-export const textOnly = (): TemplateResult => {
- return html`
-
-
- Edit
- Copy
- Delete
-
-
- `;
-};
diff --git a/packages/quick-actions/test/benchmark/basic-test.ts b/packages/quick-actions/test/benchmark/basic-test.ts
deleted file mode 100644
index 3901562632..0000000000
--- a/packages/quick-actions/test/benchmark/basic-test.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-/*
-Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-
-import '@spectrum-web-components/quick-actions/sp-quick-actions.js';
-import { html } from 'lit';
-import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
-
-measureFixtureCreation(html`
-
- ${this.selectedItem?.itemText || ''}
-
-
- ${deprecatedMenu()}
- ${deprecatedMenu()}
-
- `);
- const el1 = test.querySelector('sp-split-button') as SplitButton;
- const el2 = test.querySelector('sp-split-button[left]') as SplitButton;
-
- await elementUpdated(el1);
- await elementUpdated(el2);
- await nextFrame();
- await nextFrame();
-
- await expect(el1).to.be.accessible();
- await expect(el2).to.be.accessible();
- });
- it('loads [type="more"] splitbutton accessibly', async () => {
- const test = await fixture
-
- ${deprecatedMenu()}
-
-
- ${deprecatedMenu()}
-
-
- `);
- const el1 = test.querySelector('sp-split-button') as SplitButton;
- const el2 = test.querySelector('sp-split-button[left]') as SplitButton;
-
- await elementUpdated(el1);
- await elementUpdated(el2);
- await nextFrame();
- await nextFrame();
-
- await expect(el1).to.be.accessible();
- await expect(el2).to.be.accessible();
- });
- it('loads splitbutton accessibly and checks labels', async function () {
- const test = await fixture
- ${deprecatedMenu()}
-
- ${deprecatedMenu()}
-
-
- `);
- const el1 = test.querySelector('sp-split-button') as SplitButton;
- const el2 = test.querySelector('sp-split-button[left]') as SplitButton;
-
- await elementUpdated(el1);
- await elementUpdated(el2);
- await nextFrame();
- await nextFrame();
-
- type NamedRoledPopupNode = {
- name: string;
- role: string;
- haspopup: boolean;
- };
- const snapshot = (await a11ySnapshot(
- {}
- )) as unknown as NamedRoledPopupNode & {
- children: NamedRoledPopupNode[];
- };
- expect(
- findAccessibilityNode${storyArgument}
- `;
-}
-
-const deprecatedMenu = (): TemplateResult => html`
- ${storyArgument}
- `;
-}
-
-const deprecatedMenu = (): TemplateResult => html`
-