diff --git a/.circleci/config.yml b/.circleci/config.yml
index 7d01607926..88be314eac 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -10,7 +10,7 @@ executors:
parameters:
current_golden_images_hash:
type: string
- default: 0cebb3fccf2241ffa7850ab5368ab3d8aef9f0e4
+ default: 6872683e2c47918e89c8c73a15367ca97b15b38e
wireit_cache_name:
type: string
default: wireit
diff --git a/packages/color-handle/package.json b/packages/color-handle/package.json
index d7959eec57..f0254afbe7 100644
--- a/packages/color-handle/package.json
+++ b/packages/color-handle/package.json
@@ -61,7 +61,7 @@
"@spectrum-web-components/color-loupe": "^0.38.0"
},
"devDependencies": {
- "@spectrum-css/colorhandle": "^7.0.6"
+ "@spectrum-css/colorhandle": "^7.0.7"
},
"types": "./src/index.d.ts",
"customElements": "custom-elements.json",
diff --git a/packages/color-handle/src/color-handle.css b/packages/color-handle/src/color-handle.css
index 270dc0bea8..49a853e04b 100644
--- a/packages/color-handle/src/color-handle.css
+++ b/packages/color-handle/src/color-handle.css
@@ -14,6 +14,51 @@ governing permissions and limitations under the License.
:host {
touch-action: none;
+ transition: inline-size
+ var(
+ --mod-colorhandle-animation-duration,
+ var(--spectrum-colorhandle-animation-duration)
+ )
+ var(
+ --mod-colorhandle-animation-easing,
+ var(--spectrum-colorhandle-animation-easing)
+ ),
+ block-size
+ var(
+ --mod-colorhandle-animation-duration,
+ var(--spectrum-colorhandle-animation-duration)
+ )
+ var(
+ --mod-colorhandle-animation-easing,
+ var(--spectrum-colorhandle-animation-easing)
+ ),
+ border-width
+ var(
+ --mod-colorhandle-animation-duration,
+ var(--spectrum-colorhandle-animation-duration)
+ )
+ var(
+ --mod-colorhandle-animation-easing,
+ var(--spectrum-colorhandle-animation-easing)
+ ),
+ margin-inline
+ var(
+ --mod-colorhandle-animation-duration,
+ var(--spectrum-colorhandle-animation-duration)
+ )
+ var(
+ --mod-colorhandle-animation-easing,
+ var(--spectrum-colorhandle-animation-easing)
+ ),
+ margin-block
+ var(
+ --mod-colorhandle-animation-duration,
+ var(--spectrum-colorhandle-animation-duration)
+ )
+ var(
+ --mod-colorhandle-animation-easing,
+ var(--spectrum-colorhandle-animation-easing)
+ );
}
:host(:focus) {
diff --git a/packages/color-slider/package.json b/packages/color-slider/package.json
index 752ef5bffa..b7cb803bba 100644
--- a/packages/color-slider/package.json
+++ b/packages/color-slider/package.json
@@ -68,7 +68,7 @@
"@spectrum-web-components/shared": "^0.38.0"
},
"devDependencies": {
- "@spectrum-css/colorslider": "^3.0.23"
+ "@spectrum-css/colorslider": "^5.0.0"
},
"types": "./src/index.d.ts",
"customElements": "custom-elements.json",
diff --git a/packages/color-slider/src/ColorSlider.ts b/packages/color-slider/src/ColorSlider.ts
index 7b28fc4ae2..feac664ee2 100644
--- a/packages/color-slider/src/ColorSlider.ts
+++ b/packages/color-slider/src/ColorSlider.ts
@@ -32,6 +32,7 @@ import {
} from '@spectrum-web-components/reactive-controllers/src/Color.js';
import { LanguageResolutionController } from '@spectrum-web-components/reactive-controllers/src/LanguageResolution.js';
+import opacityCheckerBoardStyles from '@spectrum-web-components/opacity-checkerboard/src/opacity-checkerboard.css.js';
import styles from './color-slider.css.js';
/**
@@ -42,7 +43,7 @@ import styles from './color-slider.css.js';
*/
export class ColorSlider extends Focusable {
public static override get styles(): CSSResultArray {
- return [styles];
+ return [opacityCheckerBoardStyles, styles];
}
@property({ type: String, reflect: true })
@@ -303,7 +304,7 @@ export class ColorSlider extends Focusable {
protected override render(): TemplateResult {
return html`
diff --git a/packages/color-slider/src/color-slider.css b/packages/color-slider/src/color-slider.css
index 149259efc9..4c5f673ec0 100644
--- a/packages/color-slider/src/color-slider.css
+++ b/packages/color-slider/src/color-slider.css
@@ -37,10 +37,6 @@ governing permissions and limitations under the License.
overflow: hidden;
}
-:host([dir='rtl']) .gradient {
- transform: scaleX(-1);
-}
-
::slotted(*) {
width: 100%;
height: 100%;
diff --git a/packages/color-slider/src/spectrum-color-slider.css b/packages/color-slider/src/spectrum-color-slider.css
index e8ae91da3d..7be004c34a 100644
--- a/packages/color-slider/src/spectrum-color-slider.css
+++ b/packages/color-slider/src/spectrum-color-slider.css
@@ -12,48 +12,53 @@ governing permissions and limitations under the License.
/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
:host {
- --spectrum-colorslider-handle-hitarea-border-radius: 0%;
- --spectrum-colorslider-handle-hitarea-width: var(
- --spectrum-global-dimension-size-300
+ --spectrum-color-slider-handle-margin-block: var(
+ --spectrum-component-top-to-text-75
);
- --spectrum-colorslider-handle-hitarea-height: var(
- --spectrum-global-dimension-size-300
+ --spectrum-color-slider-border-color-rgba: rgba(
+ var(--spectrum-gray-900-rgb),
+ var(--spectrum-color-slider-border-opacity)
);
- --spectrum-colorslider-checkerboard-size: var(
+ --spectrum-color-slider-checkerboard-size: var(
--spectrum-opacity-checkerboard-square-size
);
- --spectrum-colorslider-checkerboard-dark-color: var(
+ --spectrum-color-slider-checkerboard-dark-color: var(
--spectrum-opacity-checkerboard-square-dark
);
- --spectrum-colorslider-checkerboard-light-color: var(
+ --spectrum-color-slider-checkerboard-light-color: var(
--spectrum-opacity-checkerboard-square-light
);
+ --mod-colorhandle-hitarea-border-radius: var(
+ --mod-color-slider-handle-hitarea-border-radius,
+ 0px
+ );
}
-.slider {
- height: 100%;
- left: 0;
- margin: 0;
- opacity: 0;
- pointer-events: none;
- position: absolute;
- top: 0;
- width: 100%;
- z-index: 0;
+@media (forced-colors: active) {
+ :host {
+ --highcontrast-color-slider-border-color: CanvasText;
+ --highcontrast-color-slider-border-color-disabled: GrayText;
+ --highcontrast-color-slider-background-color-disabled: Canvas;
+ forced-color-adjust: none;
+ }
}
:host {
+ block-size: var(
+ --mod-color-slider-control-track-width,
+ var(--spectrum-color-control-track-width)
+ );
cursor: default;
display: block;
- height: var(
- --spectrum-colorslider-height,
- var(--spectrum-global-dimension-size-300)
+ inline-size: var(
+ --mod-color-slider-length,
+ var(--spectrum-color-slider-length)
+ );
+ min-inline-size: var(
+ --mod-color-slider-minimum-length,
+ var(--spectrum-color-slider-minimum-length)
);
position: relative;
-webkit-user-select: none;
user-select: none;
- width: var(
- --spectrum-colorslider-default-length,
- var(--spectrum-global-dimension-size-2400)
- );
}
:host([focused]) {
z-index: 2;
@@ -61,100 +66,100 @@ governing permissions and limitations under the License.
:host([disabled]) {
pointer-events: none;
}
+:host([disabled]) .gradient {
+ display: none;
+}
:host([vertical]) {
+ block-size: var(
+ --mod-color-slider-vertical-height,
+ var(--mod-color-slider-length, var(--spectrum-color-slider-length))
+ );
display: inline-block;
- height: var(
- --spectrum-colorslider-vertical-default-length,
- var(--spectrum-global-dimension-size-2400)
+ inline-size: var(
+ --mod-color-slider-vertical-control-track-width,
+ var(
+ --mod-color-slider-control-track-height,
+ var(--spectrum-color-control-track-width)
+ )
);
- width: var(
- --spectrum-colorslider-vertical-width,
- var(--spectrum-global-dimension-size-300)
+ min-block-size: var(
+ --mod-color-slider-vertical-minimum-height,
+ var(
+ --mod-color-slider-minimum-length,
+ var(--spectrum-color-slider-minimum-length)
+ )
);
+ min-inline-size: 0;
}
:host([vertical]) .handle {
- left: 50%;
- top: 0;
+ inset-block-start: 0;
+ inset-inline-start: 50%;
}
.handle {
- left: 0;
- top: 50%;
-}
-.handle:after {
- border-radius: var(--spectrum-colorslider-handle-hitarea-border-radius);
- height: var(--spectrum-colorslider-handle-hitarea-height);
- width: var(--spectrum-colorslider-handle-hitarea-width);
+ inset-block-start: 50%;
+ inset-inline-start: 0;
}
.checkerboard {
- background: repeating-conic-gradient(
- var(--spectrum-colorslider-checkerboard-light-color) 0 25%,
- var(--spectrum-colorslider-checkerboard-dark-color) 0 50%
+ --spectrum-color-slider-border-color-local: var(
+ --highcontrast-color-slider-border-color,
+ var(
+ --mod-color-slider-border-color,
+ var(--spectrum-color-slider-border-color-rgba)
)
- 0 0 / calc(var(--spectrum-colorslider-checkerboard-size) * 2)
- calc(var(--spectrum-colorslider-checkerboard-size) * 2);
+ );
}
.checkerboard:before {
border-radius: var(
- --spectrum-colorslider-border-radius,
- var(--spectrum-alias-border-radius-regular)
+ --mod-color-slider-border-rounding,
+ var(--spectrum-color-slider-border-rounding)
);
+ box-shadow: inset 0 0 0
+ var(
+ --mod-color-slider-border-width,
+ var(--spectrum-color-slider-border-width)
+ )
+ var(--spectrum-color-slider-border-color-local);
content: '';
inset: 0;
position: absolute;
z-index: 1;
}
-.checkerboard,
-.gradient {
- border-radius: var(
- --spectrum-colorslider-border-radius,
- var(--spectrum-alias-border-radius-regular)
- );
- height: 100%;
- width: 100%;
-}
-:host {
- --spectrum-colorslider-border-color: var(
- --spectrum-colorarea-border-color,
- var(--spectrum-alias-border-color-translucent)
- );
-}
-.checkerboard:before {
- box-shadow: inset 0 0 0
+:host([disabled]) .checkerboard {
+ --spectrum-color-slider-border-color-local: var(
+ --highcontrast-color-slider-border-color-disabled,
var(
- --spectrum-colorslider-border-size,
- var(--spectrum-alias-border-size-thin)
+ --mod-color-slider-border-color-disabled,
+ var(--spectrum-disabled-background-color)
)
- var(
- --spectrum-colorslider-border-color,
- var(--spectrum-alias-border-color-translucent)
- );
-}
-:host([disabled]) .checkerboard {
- background: var(
- --spectrum-colorslider-fill-color-disabled,
- var(--spectrum-alias-track-color-disabled)
);
-}
-:host([disabled]) .checkerboard:before {
- box-shadow: 0 0 0
+ background: var(
+ --highcontrast-color-slider-background-color-disabled,
var(
- --spectrum-colorslider-border-size,
- var(--spectrum-alias-border-size-thin)
+ --mod-color-slider-background-color-disabled,
+ var(--spectrum-disabled-background-color)
)
- var(
- --spectrum-colorslider-border-color-disabled,
- var(--spectrum-alias-track-color-disabled)
- );
+ );
}
-:host([disabled]) .gradient {
- display: none;
+.checkerboard,
+.gradient {
+ block-size: 100%;
+ border-radius: var(
+ --mod-color-slider-border-rounding,
+ var(--spectrum-color-slider-border-rounding)
+ );
+ inline-size: 100%;
}
-@media (forced-colors: active) {
- :host {
- --spectrum-colorslider-border-color-disabled: GrayText;
- --spectrum-colorslider-fill-color-disabled: Canvas;
- }
- :host {
- forced-color-adjust: none;
- }
+:host([dir='rtl']) .gradient {
+ transform: scaleX(-1);
+}
+.slider {
+ block-size: 100%;
+ inline-size: 100%;
+ inset-block-start: 0;
+ inset-inline-start: 0;
+ margin: 0;
+ opacity: 0;
+ pointer-events: none;
+ position: absolute;
+ z-index: 0;
}
diff --git a/packages/color-slider/test/color-slider.test.ts b/packages/color-slider/test/color-slider.test.ts
index 8a0345f38c..bf941a559b 100644
--- a/packages/color-slider/test/color-slider.test.ts
+++ b/packages/color-slider/test/color-slider.test.ts
@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
governing permissions and limitations under the License.
*/
-import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
+import { elementUpdated, expect, html } from '@open-wc/testing';
import {
arrowDownEvent,
arrowDownKeyupEvent,
@@ -20,6 +20,7 @@ import {
arrowRightKeyupEvent,
arrowUpEvent,
arrowUpKeyupEvent,
+ fixture,
testForLitDevWarnings,
} from '../../../test/testing-helpers.js';
@@ -229,7 +230,6 @@ describe('ColorSlider', () => {
await elementUpdated(el);
-
expect(el.sliderHandlePosition).to.be.approximately(
(2 * 100) / 360,
0.000001
@@ -543,7 +543,7 @@ describe('ColorSlider', () => {
boundingClientRect.top + boundingClientRect.height / 2,
];
const targetLocation: [number, number] = [
- handleLocation[0] + 100,
+ handleLocation[0] + 105,
handleLocation[1],
];
diff --git a/yarn.lock b/yarn.lock
index ced3db7ad4..2ecb0d0350 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6232,20 +6232,20 @@
resolved "https://registry.yarnpkg.com/@spectrum-css/colorarea/-/colorarea-4.0.33.tgz#911018942638550fef076c6f8328d8b5dd53bbcb"
integrity sha512-gcTCc2DoKLEbWNRM0KymUVaxqFgC10Vef2KQMpN4IZF/QUbzHAWJA7stAzLGzta78X2rVGlUYhzJd+guW/aFMQ==
-"@spectrum-css/colorhandle@^7.0.6":
- version "7.0.6"
- resolved "https://registry.yarnpkg.com/@spectrum-css/colorhandle/-/colorhandle-7.0.6.tgz#10c0c67b56aa84417571fc9e9883273ff2736ed3"
- integrity sha512-UqLte3R8pVtlpgHwu8XEuiDrNkd36dwNMZhyOrWtRAgkqQSRetNTAVQj4jVvknhp8sChrUdKvsTdAQVM7/MCsg==
+"@spectrum-css/colorhandle@^7.0.7":
+ version "7.0.7"
+ resolved "https://registry.yarnpkg.com/@spectrum-css/colorhandle/-/colorhandle-7.0.7.tgz#4f5491d5b0ebabbd0723aced5b4088bc4c450b29"
+ integrity sha512-tV+CQArilGZnJge79T3o/vAqNSXFEMpdl/0QepNktrvrokWJ3BVH4cbxTBzLtLNr0N9MPKpmUJ4CHQiutbrSdg==
"@spectrum-css/colorloupe@^4.1.17":
version "4.1.17"
resolved "https://registry.yarnpkg.com/@spectrum-css/colorloupe/-/colorloupe-4.1.17.tgz#900984b5f6ac84f77445d3858b646462e56dbd00"
integrity sha512-Srg7lqjTwrXdnCB0EjCAxLBP95Wde+HUTvHvxz8Dcwpx+tyS4w/+/B/QwF3hq+UfAbJl4OxP5pWh4fkQ9nHslQ==
-"@spectrum-css/colorslider@^3.0.23":
- version "3.0.23"
- resolved "https://registry.yarnpkg.com/@spectrum-css/colorslider/-/colorslider-3.0.23.tgz#7bce9e0b4f06f90d0660fde9553486bbe2ff3dc2"
- integrity sha512-H9ew4UZ9dHNuZGBHMu3JmovrrJja49mwuF6H3OyOwUU+c8ldytgzkMMmpFr0P9qZ93P4Nr0LPYO26Pmp9vChoA==
+"@spectrum-css/colorslider@^5.0.0":
+ version "5.0.4"
+ resolved "https://registry.yarnpkg.com/@spectrum-css/colorslider/-/colorslider-5.0.4.tgz#8f746389cf0a51f6ca86e609231ef3c63516bc31"
+ integrity sha512-3S309ZRw1YRX095cclw9lexPUprjrvQkslZ6r17i5FCrNYmj13ZXkpo7a85znVJD2uvuKR1pDhtLnA3CMDoSAg==
"@spectrum-css/colorwheel@^3.0.33":
version "3.0.33"