@spectrum-web-components/slider
Advanced tools
Comparing version 0.40.4 to 0.40.5
{ | ||
"name": "@spectrum-web-components/slider", | ||
"version": "0.40.4", | ||
"version": "0.40.5", | ||
"publishConfig": { | ||
@@ -78,11 +78,11 @@ "access": "public" | ||
"@lit-labs/observers": "^2.0.0", | ||
"@spectrum-web-components/base": "^0.40.4", | ||
"@spectrum-web-components/field-label": "^0.40.4", | ||
"@spectrum-web-components/number-field": "^0.40.4", | ||
"@spectrum-web-components/reactive-controllers": "^0.40.4", | ||
"@spectrum-web-components/shared": "^0.40.4", | ||
"@spectrum-web-components/theme": "^0.40.4" | ||
"@spectrum-web-components/base": "^0.40.5", | ||
"@spectrum-web-components/field-label": "^0.40.5", | ||
"@spectrum-web-components/number-field": "^0.40.5", | ||
"@spectrum-web-components/reactive-controllers": "^0.40.5", | ||
"@spectrum-web-components/shared": "^0.40.5", | ||
"@spectrum-web-components/theme": "^0.40.5" | ||
}, | ||
"devDependencies": { | ||
"@spectrum-css/slider": "^4.2.0" | ||
"@spectrum-css/slider": "^4.3.0" | ||
}, | ||
@@ -96,3 +96,3 @@ "types": "./src/index.d.ts", | ||
], | ||
"gitHead": "e7bca020d0da71c4d92e95044bf58780d2e8e603" | ||
"gitHead": "2e0006478841b07af63c19a0167a136bf724d064" | ||
} |
@@ -10,3 +10,3 @@ "use strict"; | ||
--spectrum-slider-control-to-field-label-medium | ||
);--spectrum-slider-value-side-padding-inline:var(--spectrum-spacing-200);--spectrum-slider-value-inline-size:18px}:host([size=s]){--spectrum-slider-font-size:var(--spectrum-font-size-75);--spectrum-slider-handle-size:var(--spectrum-slider-handle-size-small);--spectrum-slider-control-height:var(--spectrum-component-height-75);--spectrum-slider-handle-border-radius:var(--spectrum-corner-radius-200);--spectrum-slider-handle-border-width-down:var( | ||
);--spectrum-slider-value-side-padding-inline:var(--spectrum-spacing-200);--spectrum-slider-value-inline-size:18px}:host([dir=rtl]),[dir=rtl] :host{--spectrum-logical-rotation:matrix(-1,0,0,1,0,0)}:host([size=s]){--spectrum-slider-font-size:var(--spectrum-font-size-75);--spectrum-slider-handle-size:var(--spectrum-slider-handle-size-small);--spectrum-slider-control-height:var(--spectrum-component-height-75);--spectrum-slider-handle-border-radius:var(--spectrum-corner-radius-200);--spectrum-slider-handle-border-width-down:var( | ||
--spectrum-slider-handle-border-width-down-small | ||
@@ -126,3 +126,3 @@ );--spectrum-slider-label-top-to-text:var( | ||
var(--spectrum-slider-ramp-track-height) | ||
)/2);position:absolute}:host([dir=rtl]) #ramp svg{transform:matrix(-1,0,0,1,0,0)}#ramp svg{block-size:100%;inline-size:100%}.handle{block-size:var( | ||
)/2);position:absolute}#ramp svg{block-size:100%;inline-size:100%;transform:var(--spectrum-logical-rotation)}.handle{block-size:var( | ||
--mod-slider-handle-size,var(--spectrum-slider-handle-size) | ||
@@ -228,6 +228,2 @@ );border-radius:var( | ||
) | ||
)}.handle:hover{border-color:var( | ||
--highcontrast-slider-handle-border-color-hover,var( | ||
--mod-slider-handle-border-color-hover,var(--spectrum-slider-handle-border-color-hover) | ||
) | ||
)}.handle.handle-highlight{border-color:var( | ||
@@ -266,3 +262,3 @@ --highcontrast-slider-handle-border-color-key-focus,var( | ||
)}:host([variant=range]) .track:not(:first-of-type):not(:last-of-type):before{background:var( | ||
--highcontrast-slider-track-fill-color,var( | ||
--highcontrast-slider-track-fill-icolor,var( | ||
--mod-slider-track-fill-color,var(--spectrum-slider-track-fill-color) | ||
@@ -282,3 +278,3 @@ ) | ||
) | ||
);cursor:default;pointer-events:none}:host([disabled]) .handle:active,:host([disabled]) .handle:hover{background:var( | ||
);cursor:default;pointer-events:none}:host([disabled]) .handle:active{background:var( | ||
--highcontrast-slider-handle-background-color-disabled,var( | ||
@@ -289,3 +285,15 @@ --mod-slider-handle-background-color-disabled,var(--spectrum-slider-handle-background-color-disabled) | ||
--highcontrast-disabled-border-color,var(--mod-disabled-border-color,var(--spectrum-disabled-border-color)) | ||
)}:host([disabled]) .track:before{background:var( | ||
)}@media (hover:hover){.handle:hover{border-color:var( | ||
--highcontrast-slider-handle-border-color-hover,var( | ||
--mod-slider-handle-border-color-hover,var(--spectrum-slider-handle-border-color-hover) | ||
) | ||
)}:host([disabled]) .handle:hover{background:var( | ||
--highcontrast-slider-handle-background-color-disabled,var( | ||
--mod-slider-handle-background-color-disabled,var(--spectrum-slider-handle-background-color-disabled) | ||
) | ||
);border-color:var( | ||
--highcontrast-disabled-border-color,var( | ||
--mod-disabled-border-color,var(--spectrum-disabled-border-color) | ||
) | ||
)}}:host([disabled]) .track:before{background:var( | ||
--highcontrast-slider-track-color-disabled,var( | ||
@@ -314,3 +322,3 @@ --mod-slider-track-color-disabled,var(--spectrum-slider-track-color-disabled) | ||
) | ||
)}@media (forced-colors:active){:host{--highcontrast-slider-track-color:ButtonText;--highcontrast-slider-track-fill-color:ButtonText;--highcontrast-slider-ramp-track-color:ButtonText;--highcontrast-slider-ramp-track-color-disabled:GrayText;--highcontrast-slider-tick-mark-color:ButtonText;--highcontrast-slider-handle-border-color:ButtonText;--highcontrast-slider-handle-border-color-hover:Highlight;--highcontrast-slider-handle-border-color-down:Highlight;--highcontrast-slider-handle-border-color-key-focus:Highlight;--highcontrast-slider-handle-focus-ring-color-key-focus:CanvasText;--highcontrast-slider-handle-background-color:ButtonFace;--highcontrast-slider-ramp-handle-border-color-active:ButtonFace;--highcontrast-slider-ramp-handle-background-color:ButtonFace;--spectrum-slider-track-color:ButtonText;--spectrum-slider-track-fill-color:ButtonText;--spectrum-slider-ramp-track-color:ButtonText;--spectrum-slider-ramp-track-color-disabled:GrayText;--spectrum-slider-handle-background-color:ButtonFace;--spectrum-slider-handle-background-color-disabled:GrayText;--spectrum-slider-handle-border-color:ButtonText;--spectrum-slider-handle-disabled-background-color:GrayText;--spectrum-slider-tick-mark-color:ButtonText;--spectrum-slider-tick-mark-color-disabled:GrayText;--spectrum-slider-handle-border-color-hover:Highlight;--spectrum-slider-handle-border-color-down:Highlight;--spectrum-slider-handle-border-color-key-focus:Highlight;--spectrum-slider-handle-focus-ring-color-key-focus:Highlight;--spectrum-slider-track-color-disabled:GrayText;--spectrum-slider-track-fill-color-disabled:GrayText;--spectrum-slider-handle-border-color-disabled:GrayText;--spectrum-slider-label-text-color:CanvasText;--spectrum-slider-label-text-color-disabled:GrayText;--spectrum-slider-ramp-handle-border-color-active:ButtonText}.handle.handle-highlight:before{forced-color-adjust:none}:host([variant=ramp]) .handle{forced-color-adjust:none}:host:not(.is-disabled) #controls.handle-highlight,:host:not(.is-disabled) #controls:active,:host:not(.is-disabled) #controls:focus-within,:host:not(.is-disabled) #controls:hover{--highcontrast-slider-track-fill-color:Highlight;--highcontrast-slider-track-color:Highlight;--highcontrast-slider-handle-border-color:Highlight;--highcontrast-slider-ramp-track-color:Highlight;--highcontrast-slider-tick-mark-color:Highlight}:host([disabled]) #ramp+.handle{fill:ButtonFace;background-color:ButtonFace}}:host{--spectrum-slider-track-color:var(--system-spectrum-slider-track-color);--spectrum-slider-track-fill-color:var( | ||
)}@media (forced-colors:active){:host{--highcontrast-slider-track-color:ButtonText;--highcontrast-slider-track-fill-color:ButtonText;--highcontrast-slider-ramp-track-color:ButtonText;--highcontrast-slider-ramp-track-color-disabled:GrayText;--highcontrast-slider-tick-mark-color:ButtonText;--highcontrast-slider-handle-border-color:ButtonText;--highcontrast-slider-handle-border-color-hover:Highlight;--highcontrast-slider-handle-border-color-down:Highlight;--highcontrast-slider-handle-border-color-key-focus:Highlight;--highcontrast-slider-handle-focus-ring-color-key-focus:CanvasText;--highcontrast-slider-handle-background-color:ButtonFace;--highcontrast-slider-ramp-handle-border-color-active:ButtonFace;--highcontrast-slider-ramp-handle-background-color:ButtonFace;--spectrum-slider-track-color:ButtonText;--spectrum-slider-track-fill-color:ButtonText;--spectrum-slider-ramp-track-color:ButtonText;--spectrum-slider-ramp-track-color-disabled:GrayText;--spectrum-slider-handle-background-color:ButtonFace;--spectrum-slider-handle-background-color-disabled:GrayText;--spectrum-slider-handle-border-color:ButtonText;--spectrum-slider-handle-disabled-background-color:GrayText;--spectrum-slider-tick-mark-color:ButtonText;--spectrum-slider-tick-mark-color-disabled:GrayText;--spectrum-slider-handle-border-color-hover:Highlight;--spectrum-slider-handle-border-color-down:Highlight;--spectrum-slider-handle-border-color-key-focus:Highlight;--spectrum-slider-handle-focus-ring-color-key-focus:Highlight;--spectrum-slider-track-color-disabled:GrayText;--spectrum-slider-track-fill-color-disabled:GrayText;--spectrum-slider-handle-border-color-disabled:GrayText;--spectrum-slider-label-text-color:CanvasText;--spectrum-slider-label-text-color-disabled:GrayText;--spectrum-slider-ramp-handle-border-color-active:ButtonText}.handle.handle-highlight:before{forced-color-adjust:none}:host([variant=ramp]) .handle{forced-color-adjust:none}:host:not(.is-disabled) #controls.handle-highlight,:host:not(.is-disabled) #controls:active,:host:not(.is-disabled) #controls:focus-within{--highcontrast-slider-track-fill-color:Highlight;--highcontrast-slider-track-color:Highlight;--highcontrast-slider-handle-border-color:Highlight;--highcontrast-slider-ramp-track-color:Highlight;--highcontrast-slider-tick-mark-color:Highlight}@media (hover:hover){:host:not(.is-disabled) #controls:hover{--highcontrast-slider-track-fill-color:Highlight;--highcontrast-slider-track-color:Highlight;--highcontrast-slider-handle-border-color:Highlight;--highcontrast-slider-ramp-track-color:Highlight;--highcontrast-slider-tick-mark-color:Highlight}}:host([disabled]) #ramp+.handle{fill:ButtonFace;background-color:ButtonFace}}:host{--spectrum-slider-track-color:var(--system-spectrum-slider-track-color);--spectrum-slider-track-fill-color:var( | ||
--system-spectrum-slider-track-fill-color | ||
@@ -343,5 +351,5 @@ );--spectrum-slider-ramp-track-color:var( | ||
--system-spectrum-slider-handle-focus-ring-color-key-focus | ||
)}:host(:focus){outline:0}:host([editable]){display:grid;grid-template-areas:"label number" "slider number";grid-template-columns:1fr auto}:host([editable]) #label-container{grid-area:label}:host([editable]) #label-container+div{grid-area:slider}:host([editable]) sp-number-field{align-self:flex-end;grid-area:number;margin-inline-start:var(--spectrum-global-dimension-size-200)}:host([editable]) output{clip:rect(0,0,0,0);border:0;clip-path:inset(50%);height:1px;margin:0 -1px -1px 0;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}:host([disabled]){pointer-events:none}#track,:host([dragging]){touch-action:none;-webkit-user-select:none;user-select:none}.not-exact.ticks{justify-content:start}:host([dir=ltr]) .not-exact .tick{padding-right:var(--sp-slider-tick-offset)}:host([dir=rtl]) .not-exact .tick{padding-left:var(--sp-slider-tick-offset)}:host([dir=ltr]) .not-exact .tick:after{left:auto;transform:translate(-50%)}:host([dir=rtl]) .not-exact .tick:after{right:auto;transform:translate(50%)}:host([dir=rtl]) .handle:before{transform:translate(50%,-50%)}.track:before{background-size:var(--spectrum-slider-track-background-size)!important}:host([dir=ltr]) .track:last-of-type:before{background-position:100%}:host([dir=rtl]) .track:first-of-type:before{background-position:100%}:host([dir=ltr]) .track:not(:first-of-type,:last-of-type){left:var(--spectrum-slider-track-segment-position)}:host([dir=rtl]) .track:not(:first-of-type,:last-of-type){right:var(--spectrum-slider-track-segment-position)}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host([label-visibility=value][dir=ltr]) #value{margin-left:auto}:host([label-visibility=value][dir=rtl]) #value{margin-right:auto}:host([label-visibility=none]) #label-container{margin:0;padding:0}:host([label-visibility=none]) #track{align-self:flex-end} | ||
)}:host(:focus){outline:0}:host([editable]){display:grid;grid-template-areas:"label number" "slider number";grid-template-columns:1fr auto}:host([editable]) #label-container{grid-area:label}:host([editable]) #label-container+div{grid-area:slider}:host([editable]) sp-number-field{align-self:flex-end;grid-area:number;margin-inline-start:var(--spectrum-global-dimension-size-200)}:host([editable]) output{clip:rect(0,0,0,0);border:0;clip-path:inset(50%);height:1px;margin:0 -1px -1px 0;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}:host([disabled]){pointer-events:none}#track,:host([dragging]){touch-action:none;-webkit-user-select:none;user-select:none}.not-exact.ticks{justify-content:start}:host([dir=ltr]) .not-exact .tick{padding-right:var(--sp-slider-tick-offset)}:host([dir=rtl]) .not-exact .tick{padding-left:var(--sp-slider-tick-offset)}:host([dir=ltr]) .not-exact .tick:after{left:auto;transform:translate(-50%)}:host([dir=rtl]) .not-exact .tick:after{right:auto;transform:translate(50%)}:host([dir=rtl]) .handle:before{transform:translate(50%,-50%)}.track:before{background-size:var(--spectrum-slider-track-background-size)!important}:host([dir=ltr]) .track:last-of-type:before{background-position:100%}:host([dir=rtl]) .track:first-of-type:before{background-position:100%}:host([dir=ltr]) .track:not(:first-of-type,:last-of-type){left:var(--spectrum-slider-track-segment-position)}:host([dir=rtl]) .track:not(:first-of-type,:last-of-type){right:var(--spectrum-slider-track-segment-position)}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host([label-visibility=value][dir=ltr]) #value{margin-left:auto}:host([label-visibility=value][dir=rtl]) #value{margin-right:auto}:host([label-visibility=none]) #label-container{margin:0;padding:0}:host([label-visibility=none]) #track{align-self:flex-end}.fill{z-index:2} | ||
`; | ||
export default styles; | ||
//# sourceMappingURL=slider.css.dev.js.map |
@@ -8,3 +8,3 @@ "use strict";import{css as r}from"@spectrum-web-components/base";const e=r` | ||
--spectrum-slider-control-to-field-label-medium | ||
);--spectrum-slider-value-side-padding-inline:var(--spectrum-spacing-200);--spectrum-slider-value-inline-size:18px}:host([size=s]){--spectrum-slider-font-size:var(--spectrum-font-size-75);--spectrum-slider-handle-size:var(--spectrum-slider-handle-size-small);--spectrum-slider-control-height:var(--spectrum-component-height-75);--spectrum-slider-handle-border-radius:var(--spectrum-corner-radius-200);--spectrum-slider-handle-border-width-down:var( | ||
);--spectrum-slider-value-side-padding-inline:var(--spectrum-spacing-200);--spectrum-slider-value-inline-size:18px}:host([dir=rtl]),[dir=rtl] :host{--spectrum-logical-rotation:matrix(-1,0,0,1,0,0)}:host([size=s]){--spectrum-slider-font-size:var(--spectrum-font-size-75);--spectrum-slider-handle-size:var(--spectrum-slider-handle-size-small);--spectrum-slider-control-height:var(--spectrum-component-height-75);--spectrum-slider-handle-border-radius:var(--spectrum-corner-radius-200);--spectrum-slider-handle-border-width-down:var( | ||
--spectrum-slider-handle-border-width-down-small | ||
@@ -124,3 +124,3 @@ );--spectrum-slider-label-top-to-text:var( | ||
var(--spectrum-slider-ramp-track-height) | ||
)/2);position:absolute}:host([dir=rtl]) #ramp svg{transform:matrix(-1,0,0,1,0,0)}#ramp svg{block-size:100%;inline-size:100%}.handle{block-size:var( | ||
)/2);position:absolute}#ramp svg{block-size:100%;inline-size:100%;transform:var(--spectrum-logical-rotation)}.handle{block-size:var( | ||
--mod-slider-handle-size,var(--spectrum-slider-handle-size) | ||
@@ -226,6 +226,2 @@ );border-radius:var( | ||
) | ||
)}.handle:hover{border-color:var( | ||
--highcontrast-slider-handle-border-color-hover,var( | ||
--mod-slider-handle-border-color-hover,var(--spectrum-slider-handle-border-color-hover) | ||
) | ||
)}.handle.handle-highlight{border-color:var( | ||
@@ -264,3 +260,3 @@ --highcontrast-slider-handle-border-color-key-focus,var( | ||
)}:host([variant=range]) .track:not(:first-of-type):not(:last-of-type):before{background:var( | ||
--highcontrast-slider-track-fill-color,var( | ||
--highcontrast-slider-track-fill-icolor,var( | ||
--mod-slider-track-fill-color,var(--spectrum-slider-track-fill-color) | ||
@@ -280,3 +276,3 @@ ) | ||
) | ||
);cursor:default;pointer-events:none}:host([disabled]) .handle:active,:host([disabled]) .handle:hover{background:var( | ||
);cursor:default;pointer-events:none}:host([disabled]) .handle:active{background:var( | ||
--highcontrast-slider-handle-background-color-disabled,var( | ||
@@ -287,3 +283,15 @@ --mod-slider-handle-background-color-disabled,var(--spectrum-slider-handle-background-color-disabled) | ||
--highcontrast-disabled-border-color,var(--mod-disabled-border-color,var(--spectrum-disabled-border-color)) | ||
)}:host([disabled]) .track:before{background:var( | ||
)}@media (hover:hover){.handle:hover{border-color:var( | ||
--highcontrast-slider-handle-border-color-hover,var( | ||
--mod-slider-handle-border-color-hover,var(--spectrum-slider-handle-border-color-hover) | ||
) | ||
)}:host([disabled]) .handle:hover{background:var( | ||
--highcontrast-slider-handle-background-color-disabled,var( | ||
--mod-slider-handle-background-color-disabled,var(--spectrum-slider-handle-background-color-disabled) | ||
) | ||
);border-color:var( | ||
--highcontrast-disabled-border-color,var( | ||
--mod-disabled-border-color,var(--spectrum-disabled-border-color) | ||
) | ||
)}}:host([disabled]) .track:before{background:var( | ||
--highcontrast-slider-track-color-disabled,var( | ||
@@ -312,3 +320,3 @@ --mod-slider-track-color-disabled,var(--spectrum-slider-track-color-disabled) | ||
) | ||
)}@media (forced-colors:active){:host{--highcontrast-slider-track-color:ButtonText;--highcontrast-slider-track-fill-color:ButtonText;--highcontrast-slider-ramp-track-color:ButtonText;--highcontrast-slider-ramp-track-color-disabled:GrayText;--highcontrast-slider-tick-mark-color:ButtonText;--highcontrast-slider-handle-border-color:ButtonText;--highcontrast-slider-handle-border-color-hover:Highlight;--highcontrast-slider-handle-border-color-down:Highlight;--highcontrast-slider-handle-border-color-key-focus:Highlight;--highcontrast-slider-handle-focus-ring-color-key-focus:CanvasText;--highcontrast-slider-handle-background-color:ButtonFace;--highcontrast-slider-ramp-handle-border-color-active:ButtonFace;--highcontrast-slider-ramp-handle-background-color:ButtonFace;--spectrum-slider-track-color:ButtonText;--spectrum-slider-track-fill-color:ButtonText;--spectrum-slider-ramp-track-color:ButtonText;--spectrum-slider-ramp-track-color-disabled:GrayText;--spectrum-slider-handle-background-color:ButtonFace;--spectrum-slider-handle-background-color-disabled:GrayText;--spectrum-slider-handle-border-color:ButtonText;--spectrum-slider-handle-disabled-background-color:GrayText;--spectrum-slider-tick-mark-color:ButtonText;--spectrum-slider-tick-mark-color-disabled:GrayText;--spectrum-slider-handle-border-color-hover:Highlight;--spectrum-slider-handle-border-color-down:Highlight;--spectrum-slider-handle-border-color-key-focus:Highlight;--spectrum-slider-handle-focus-ring-color-key-focus:Highlight;--spectrum-slider-track-color-disabled:GrayText;--spectrum-slider-track-fill-color-disabled:GrayText;--spectrum-slider-handle-border-color-disabled:GrayText;--spectrum-slider-label-text-color:CanvasText;--spectrum-slider-label-text-color-disabled:GrayText;--spectrum-slider-ramp-handle-border-color-active:ButtonText}.handle.handle-highlight:before{forced-color-adjust:none}:host([variant=ramp]) .handle{forced-color-adjust:none}:host:not(.is-disabled) #controls.handle-highlight,:host:not(.is-disabled) #controls:active,:host:not(.is-disabled) #controls:focus-within,:host:not(.is-disabled) #controls:hover{--highcontrast-slider-track-fill-color:Highlight;--highcontrast-slider-track-color:Highlight;--highcontrast-slider-handle-border-color:Highlight;--highcontrast-slider-ramp-track-color:Highlight;--highcontrast-slider-tick-mark-color:Highlight}:host([disabled]) #ramp+.handle{fill:ButtonFace;background-color:ButtonFace}}:host{--spectrum-slider-track-color:var(--system-spectrum-slider-track-color);--spectrum-slider-track-fill-color:var( | ||
)}@media (forced-colors:active){:host{--highcontrast-slider-track-color:ButtonText;--highcontrast-slider-track-fill-color:ButtonText;--highcontrast-slider-ramp-track-color:ButtonText;--highcontrast-slider-ramp-track-color-disabled:GrayText;--highcontrast-slider-tick-mark-color:ButtonText;--highcontrast-slider-handle-border-color:ButtonText;--highcontrast-slider-handle-border-color-hover:Highlight;--highcontrast-slider-handle-border-color-down:Highlight;--highcontrast-slider-handle-border-color-key-focus:Highlight;--highcontrast-slider-handle-focus-ring-color-key-focus:CanvasText;--highcontrast-slider-handle-background-color:ButtonFace;--highcontrast-slider-ramp-handle-border-color-active:ButtonFace;--highcontrast-slider-ramp-handle-background-color:ButtonFace;--spectrum-slider-track-color:ButtonText;--spectrum-slider-track-fill-color:ButtonText;--spectrum-slider-ramp-track-color:ButtonText;--spectrum-slider-ramp-track-color-disabled:GrayText;--spectrum-slider-handle-background-color:ButtonFace;--spectrum-slider-handle-background-color-disabled:GrayText;--spectrum-slider-handle-border-color:ButtonText;--spectrum-slider-handle-disabled-background-color:GrayText;--spectrum-slider-tick-mark-color:ButtonText;--spectrum-slider-tick-mark-color-disabled:GrayText;--spectrum-slider-handle-border-color-hover:Highlight;--spectrum-slider-handle-border-color-down:Highlight;--spectrum-slider-handle-border-color-key-focus:Highlight;--spectrum-slider-handle-focus-ring-color-key-focus:Highlight;--spectrum-slider-track-color-disabled:GrayText;--spectrum-slider-track-fill-color-disabled:GrayText;--spectrum-slider-handle-border-color-disabled:GrayText;--spectrum-slider-label-text-color:CanvasText;--spectrum-slider-label-text-color-disabled:GrayText;--spectrum-slider-ramp-handle-border-color-active:ButtonText}.handle.handle-highlight:before{forced-color-adjust:none}:host([variant=ramp]) .handle{forced-color-adjust:none}:host:not(.is-disabled) #controls.handle-highlight,:host:not(.is-disabled) #controls:active,:host:not(.is-disabled) #controls:focus-within{--highcontrast-slider-track-fill-color:Highlight;--highcontrast-slider-track-color:Highlight;--highcontrast-slider-handle-border-color:Highlight;--highcontrast-slider-ramp-track-color:Highlight;--highcontrast-slider-tick-mark-color:Highlight}@media (hover:hover){:host:not(.is-disabled) #controls:hover{--highcontrast-slider-track-fill-color:Highlight;--highcontrast-slider-track-color:Highlight;--highcontrast-slider-handle-border-color:Highlight;--highcontrast-slider-ramp-track-color:Highlight;--highcontrast-slider-tick-mark-color:Highlight}}:host([disabled]) #ramp+.handle{fill:ButtonFace;background-color:ButtonFace}}:host{--spectrum-slider-track-color:var(--system-spectrum-slider-track-color);--spectrum-slider-track-fill-color:var( | ||
--system-spectrum-slider-track-fill-color | ||
@@ -341,4 +349,4 @@ );--spectrum-slider-ramp-track-color:var( | ||
--system-spectrum-slider-handle-focus-ring-color-key-focus | ||
)}:host(:focus){outline:0}:host([editable]){display:grid;grid-template-areas:"label number" "slider number";grid-template-columns:1fr auto}:host([editable]) #label-container{grid-area:label}:host([editable]) #label-container+div{grid-area:slider}:host([editable]) sp-number-field{align-self:flex-end;grid-area:number;margin-inline-start:var(--spectrum-global-dimension-size-200)}:host([editable]) output{clip:rect(0,0,0,0);border:0;clip-path:inset(50%);height:1px;margin:0 -1px -1px 0;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}:host([disabled]){pointer-events:none}#track,:host([dragging]){touch-action:none;-webkit-user-select:none;user-select:none}.not-exact.ticks{justify-content:start}:host([dir=ltr]) .not-exact .tick{padding-right:var(--sp-slider-tick-offset)}:host([dir=rtl]) .not-exact .tick{padding-left:var(--sp-slider-tick-offset)}:host([dir=ltr]) .not-exact .tick:after{left:auto;transform:translate(-50%)}:host([dir=rtl]) .not-exact .tick:after{right:auto;transform:translate(50%)}:host([dir=rtl]) .handle:before{transform:translate(50%,-50%)}.track:before{background-size:var(--spectrum-slider-track-background-size)!important}:host([dir=ltr]) .track:last-of-type:before{background-position:100%}:host([dir=rtl]) .track:first-of-type:before{background-position:100%}:host([dir=ltr]) .track:not(:first-of-type,:last-of-type){left:var(--spectrum-slider-track-segment-position)}:host([dir=rtl]) .track:not(:first-of-type,:last-of-type){right:var(--spectrum-slider-track-segment-position)}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host([label-visibility=value][dir=ltr]) #value{margin-left:auto}:host([label-visibility=value][dir=rtl]) #value{margin-right:auto}:host([label-visibility=none]) #label-container{margin:0;padding:0}:host([label-visibility=none]) #track{align-self:flex-end} | ||
)}:host(:focus){outline:0}:host([editable]){display:grid;grid-template-areas:"label number" "slider number";grid-template-columns:1fr auto}:host([editable]) #label-container{grid-area:label}:host([editable]) #label-container+div{grid-area:slider}:host([editable]) sp-number-field{align-self:flex-end;grid-area:number;margin-inline-start:var(--spectrum-global-dimension-size-200)}:host([editable]) output{clip:rect(0,0,0,0);border:0;clip-path:inset(50%);height:1px;margin:0 -1px -1px 0;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}:host([disabled]){pointer-events:none}#track,:host([dragging]){touch-action:none;-webkit-user-select:none;user-select:none}.not-exact.ticks{justify-content:start}:host([dir=ltr]) .not-exact .tick{padding-right:var(--sp-slider-tick-offset)}:host([dir=rtl]) .not-exact .tick{padding-left:var(--sp-slider-tick-offset)}:host([dir=ltr]) .not-exact .tick:after{left:auto;transform:translate(-50%)}:host([dir=rtl]) .not-exact .tick:after{right:auto;transform:translate(50%)}:host([dir=rtl]) .handle:before{transform:translate(50%,-50%)}.track:before{background-size:var(--spectrum-slider-track-background-size)!important}:host([dir=ltr]) .track:last-of-type:before{background-position:100%}:host([dir=rtl]) .track:first-of-type:before{background-position:100%}:host([dir=ltr]) .track:not(:first-of-type,:last-of-type){left:var(--spectrum-slider-track-segment-position)}:host([dir=rtl]) .track:not(:first-of-type,:last-of-type){right:var(--spectrum-slider-track-segment-position)}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host([label-visibility=value][dir=ltr]) #value{margin-left:auto}:host([label-visibility=value][dir=rtl]) #value{margin-right:auto}:host([label-visibility=none]) #label-container{margin:0;padding:0}:host([label-visibility=none]) #track{align-self:flex-end}.fill{z-index:2} | ||
`;export default e; | ||
//# sourceMappingURL=slider.css.js.map |
@@ -304,2 +304,3 @@ "use strict"; | ||
{ id: "track0", html: this.renderTrackSegment(...segments[0]) }, | ||
{ id: "fill", html: this.renderFillOffset() }, | ||
{ id: "ramp", html: this.renderRamp() }, | ||
@@ -309,4 +310,3 @@ ...segments.slice(1).map(([start, end], index) => ({ | ||
html: this.renderTrackSegment(start, end) | ||
})), | ||
{ id: "fill", html: this.renderFillOffset() } | ||
})) | ||
]; | ||
@@ -381,6 +381,4 @@ return html` | ||
width: `${size * 100}%`, | ||
...this.handleController.size > 1 && { | ||
"--spectrum-slider-track-background-size": `${1 / size * 100}%`, | ||
"--spectrum-slider-track-segment-position": `${start * 100}%` | ||
} | ||
"--spectrum-slider-track-background-size": `${1 / size * 100}%`, | ||
"--spectrum-slider-track-segment-position": `${start * 100}%` | ||
}; | ||
@@ -387,0 +385,0 @@ return styles; |
@@ -83,3 +83,3 @@ "use strict";var v=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var r=(d,o,e,t)=>{for(var i=t>1?void 0:t?f(o,e):o,l=d.length-1,n;l>=0;l--)(n=d[l])&&(i=(t?n(o,e,i):n(i))||i);return t&&i&&v(o,e,i),i};import{html as s,nothing as h,SizedMixin as g}from"@spectrum-web-components/base";import{property as a,query as p}from"@spectrum-web-components/base/src/decorators.js";import{classMap as c,ifDefined as y,repeat as m,styleMap as b}from"@spectrum-web-components/base/src/directives.js";import $ from"./slider.css.js";import{ObserveSlotText as k}from"@spectrum-web-components/shared/src/observe-slot-text.js";import"@spectrum-web-components/field-label/sp-field-label.js";import{HandleController as C}from"./HandleController.js";import{SliderHandle as N}from"./SliderHandle.js";import{streamingListener as P}from"@spectrum-web-components/base/src/streaming-listener.js";export const variants=["filled","ramp","range","tick"];export class Slider extends g(k(N,""),{noDefaultSize:!0,validSizes:["s","m","l","xl"]}){constructor(){super(...arguments);this.handleController=new C(this);this._editable=!1;this.hideStepper=!1;this.type="";this._variant="";this.getAriaValueText=e=>{const t=[...e.values()];return t.length===2?`${t[0]} - ${t[1]}`:t.join(", ")};this.min=0;this.max=100;this.step=1;this.tickStep=0;this.tickLabels=!1;this.disabled=!1;this.quiet=!1;this.indeterminate=!1;this._numberFieldInput=Promise.resolve()}static get styles(){return[$]}get editable(){return this._editable}set editable(e){if(e===this.editable)return;const t=this.editable;this._editable=this.handleController.size<2?e:!1,this.editable&&(this._numberFieldInput=import("@spectrum-web-components/number-field/sp-number-field.js")),t!==this.editable&&this.requestUpdate("editable",t)}set variant(e){const t=this.variant;e!==this.variant&&(variants.includes(e)?(this.setAttribute("variant",e),this._variant=e):(this.removeAttribute("variant"),this._variant=""),this.requestUpdate("variant",t))}get variant(){return this._variant}get values(){return this.handleController.values}get handleName(){return"value"}get ariaValueText(){return this.getAriaValueText?this.getAriaValueText(this.handleController.formattedValues):`${this.value}${this._forcedUnit}`}get numberFormat(){return this.getNumberFormat()}get focusElement(){return this.handleController.focusElement}handleLabelClick(e){this.editable&&(e.preventDefault(),this.focus())}render(){return s` | ||
></div> | ||
`}renderTrack(){const e=this.handleController.trackSegments(),t=[{id:"handles",html:this.handleController.render()}],i=[{id:"track0",html:this.renderTrackSegment(...e[0])},{id:"ramp",html:this.renderRamp()},...e.slice(1).map(([l,n],u)=>({id:`track${u+1}`,html:this.renderTrackSegment(l,n)})),{id:"fill",html:this.renderFillOffset()}];return s` | ||
`}renderTrack(){const e=this.handleController.trackSegments(),t=[{id:"handles",html:this.handleController.render()}],i=[{id:"track0",html:this.renderTrackSegment(...e[0])},{id:"fill",html:this.renderFillOffset()},{id:"ramp",html:this.renderRamp()},...e.slice(1).map(([l,n],u)=>({id:`track${u+1}`,html:this.renderTrackSegment(l,n)}))];return s` | ||
<div | ||
@@ -99,3 +99,3 @@ id="track" | ||
</div> | ||
`}handlePointerdown(e){this.handleController.handlePointerdown(e)}handlePointermove(e){this.handleController.handlePointermove(e)}handlePointerup(e){this.handleController.handlePointerup(e)}handleNumberInput(e){var i;const{value:t}=e.target;if((i=e.target)!=null&&i.managedInput&&!isNaN(t)){this.value=t;return}e.stopPropagation()}handleNumberChange(e){var i;const{value:t}=e.target;isNaN(t)?(e.target.value=this.value,e.stopPropagation()):(this.value=t,(i=e.target)!=null&&i.managedInput||this.dispatchInputEvent()),this.indeterminate=!1}trackSegmentStyles(e,t){const i=t-e;return{width:`${i*100}%`,...this.handleController.size>1&&{"--spectrum-slider-track-background-size":`${1/i*100}%`,"--spectrum-slider-track-segment-position":`${e*100}%`}}}async getUpdateComplete(){const e=await super.getUpdateComplete();return this.editable&&(await this._numberFieldInput,await this.numberField.updateComplete),await this.handleController.handleUpdatesComplete(),e}willUpdate(e){e.has("value")&&e.has("fillStart")&&(this._cachedValue=Number(this.value),this.fillStart?this.centerPoint=Number(this.fillStart):this.centerPoint=(Number(this.max)-Number(this.min))/2+Number(this.min))}}r([a({type:Boolean,reflect:!0})],Slider.prototype,"editable",1),r([a({type:Boolean,reflect:!0,attribute:"hide-stepper"})],Slider.prototype,"hideStepper",2),r([a()],Slider.prototype,"type",2),r([a({reflect:!0})],Slider.prototype,"dir",2),r([a({type:String})],Slider.prototype,"variant",1),r([a({attribute:!1})],Slider.prototype,"getAriaValueText",2),r([a({type:String,reflect:!0,attribute:"label-visibility"})],Slider.prototype,"labelVisibility",2),r([a({type:Number,reflect:!0})],Slider.prototype,"min",2),r([a({type:Number,reflect:!0})],Slider.prototype,"max",2),r([a({type:Number})],Slider.prototype,"step",2),r([a({type:Number,attribute:"tick-step"})],Slider.prototype,"tickStep",2),r([a({type:Boolean,attribute:"tick-labels"})],Slider.prototype,"tickLabels",2),r([a({type:Boolean,reflect:!0})],Slider.prototype,"disabled",2),r([a({type:Number,reflect:!0,attribute:"fill-start"})],Slider.prototype,"fillStart",2),r([a({type:Boolean})],Slider.prototype,"quiet",2),r([a({type:Boolean})],Slider.prototype,"indeterminate",2),r([p("#label")],Slider.prototype,"labelEl",2),r([p("#number-field")],Slider.prototype,"numberField",2),r([p("#track")],Slider.prototype,"track",2); | ||
`}handlePointerdown(e){this.handleController.handlePointerdown(e)}handlePointermove(e){this.handleController.handlePointermove(e)}handlePointerup(e){this.handleController.handlePointerup(e)}handleNumberInput(e){var i;const{value:t}=e.target;if((i=e.target)!=null&&i.managedInput&&!isNaN(t)){this.value=t;return}e.stopPropagation()}handleNumberChange(e){var i;const{value:t}=e.target;isNaN(t)?(e.target.value=this.value,e.stopPropagation()):(this.value=t,(i=e.target)!=null&&i.managedInput||this.dispatchInputEvent()),this.indeterminate=!1}trackSegmentStyles(e,t){const i=t-e;return{width:`${i*100}%`,"--spectrum-slider-track-background-size":`${1/i*100}%`,"--spectrum-slider-track-segment-position":`${e*100}%`}}async getUpdateComplete(){const e=await super.getUpdateComplete();return this.editable&&(await this._numberFieldInput,await this.numberField.updateComplete),await this.handleController.handleUpdatesComplete(),e}willUpdate(e){e.has("value")&&e.has("fillStart")&&(this._cachedValue=Number(this.value),this.fillStart?this.centerPoint=Number(this.fillStart):this.centerPoint=(Number(this.max)-Number(this.min))/2+Number(this.min))}}r([a({type:Boolean,reflect:!0})],Slider.prototype,"editable",1),r([a({type:Boolean,reflect:!0,attribute:"hide-stepper"})],Slider.prototype,"hideStepper",2),r([a()],Slider.prototype,"type",2),r([a({reflect:!0})],Slider.prototype,"dir",2),r([a({type:String})],Slider.prototype,"variant",1),r([a({attribute:!1})],Slider.prototype,"getAriaValueText",2),r([a({type:String,reflect:!0,attribute:"label-visibility"})],Slider.prototype,"labelVisibility",2),r([a({type:Number,reflect:!0})],Slider.prototype,"min",2),r([a({type:Number,reflect:!0})],Slider.prototype,"max",2),r([a({type:Number})],Slider.prototype,"step",2),r([a({type:Number,attribute:"tick-step"})],Slider.prototype,"tickStep",2),r([a({type:Boolean,attribute:"tick-labels"})],Slider.prototype,"tickLabels",2),r([a({type:Boolean,reflect:!0})],Slider.prototype,"disabled",2),r([a({type:Number,reflect:!0,attribute:"fill-start"})],Slider.prototype,"fillStart",2),r([a({type:Boolean})],Slider.prototype,"quiet",2),r([a({type:Boolean})],Slider.prototype,"indeterminate",2),r([p("#label")],Slider.prototype,"labelEl",2),r([p("#number-field")],Slider.prototype,"numberField",2),r([p("#track")],Slider.prototype,"track",2); | ||
//# sourceMappingURL=Slider.js.map |
@@ -10,3 +10,3 @@ "use strict"; | ||
--spectrum-slider-control-to-field-label-medium | ||
);--spectrum-slider-value-side-padding-inline:var(--spectrum-spacing-200);--spectrum-slider-value-inline-size:18px}:host([size=s]){--spectrum-slider-font-size:var(--spectrum-font-size-75);--spectrum-slider-handle-size:var(--spectrum-slider-handle-size-small);--spectrum-slider-control-height:var(--spectrum-component-height-75);--spectrum-slider-handle-border-radius:var(--spectrum-corner-radius-200);--spectrum-slider-handle-border-width-down:var( | ||
);--spectrum-slider-value-side-padding-inline:var(--spectrum-spacing-200);--spectrum-slider-value-inline-size:18px}:host([dir=rtl]),[dir=rtl] :host{--spectrum-logical-rotation:matrix(-1,0,0,1,0,0)}:host([size=s]){--spectrum-slider-font-size:var(--spectrum-font-size-75);--spectrum-slider-handle-size:var(--spectrum-slider-handle-size-small);--spectrum-slider-control-height:var(--spectrum-component-height-75);--spectrum-slider-handle-border-radius:var(--spectrum-corner-radius-200);--spectrum-slider-handle-border-width-down:var( | ||
--spectrum-slider-handle-border-width-down-small | ||
@@ -126,3 +126,3 @@ );--spectrum-slider-label-top-to-text:var( | ||
var(--spectrum-slider-ramp-track-height) | ||
)/2);position:absolute}:host([dir=rtl]) #ramp svg{transform:matrix(-1,0,0,1,0,0)}#ramp svg{block-size:100%;inline-size:100%}.handle{block-size:var( | ||
)/2);position:absolute}#ramp svg{block-size:100%;inline-size:100%;transform:var(--spectrum-logical-rotation)}.handle{block-size:var( | ||
--mod-slider-handle-size,var(--spectrum-slider-handle-size) | ||
@@ -228,6 +228,2 @@ );border-radius:var( | ||
) | ||
)}.handle:hover{border-color:var( | ||
--highcontrast-slider-handle-border-color-hover,var( | ||
--mod-slider-handle-border-color-hover,var(--spectrum-slider-handle-border-color-hover) | ||
) | ||
)}.handle.handle-highlight{border-color:var( | ||
@@ -266,3 +262,3 @@ --highcontrast-slider-handle-border-color-key-focus,var( | ||
)}:host([variant=range]) .track:not(:first-of-type):not(:last-of-type):before{background:var( | ||
--highcontrast-slider-track-fill-color,var( | ||
--highcontrast-slider-track-fill-icolor,var( | ||
--mod-slider-track-fill-color,var(--spectrum-slider-track-fill-color) | ||
@@ -282,3 +278,3 @@ ) | ||
) | ||
);cursor:default;pointer-events:none}:host([disabled]) .handle:active,:host([disabled]) .handle:hover{background:var( | ||
);cursor:default;pointer-events:none}:host([disabled]) .handle:active{background:var( | ||
--highcontrast-slider-handle-background-color-disabled,var( | ||
@@ -289,3 +285,15 @@ --mod-slider-handle-background-color-disabled,var(--spectrum-slider-handle-background-color-disabled) | ||
--highcontrast-disabled-border-color,var(--mod-disabled-border-color,var(--spectrum-disabled-border-color)) | ||
)}:host([disabled]) .track:before{background:var( | ||
)}@media (hover:hover){.handle:hover{border-color:var( | ||
--highcontrast-slider-handle-border-color-hover,var( | ||
--mod-slider-handle-border-color-hover,var(--spectrum-slider-handle-border-color-hover) | ||
) | ||
)}:host([disabled]) .handle:hover{background:var( | ||
--highcontrast-slider-handle-background-color-disabled,var( | ||
--mod-slider-handle-background-color-disabled,var(--spectrum-slider-handle-background-color-disabled) | ||
) | ||
);border-color:var( | ||
--highcontrast-disabled-border-color,var( | ||
--mod-disabled-border-color,var(--spectrum-disabled-border-color) | ||
) | ||
)}}:host([disabled]) .track:before{background:var( | ||
--highcontrast-slider-track-color-disabled,var( | ||
@@ -314,3 +322,3 @@ --mod-slider-track-color-disabled,var(--spectrum-slider-track-color-disabled) | ||
) | ||
)}@media (forced-colors:active){:host{--highcontrast-slider-track-color:ButtonText;--highcontrast-slider-track-fill-color:ButtonText;--highcontrast-slider-ramp-track-color:ButtonText;--highcontrast-slider-ramp-track-color-disabled:GrayText;--highcontrast-slider-tick-mark-color:ButtonText;--highcontrast-slider-handle-border-color:ButtonText;--highcontrast-slider-handle-border-color-hover:Highlight;--highcontrast-slider-handle-border-color-down:Highlight;--highcontrast-slider-handle-border-color-key-focus:Highlight;--highcontrast-slider-handle-focus-ring-color-key-focus:CanvasText;--highcontrast-slider-handle-background-color:ButtonFace;--highcontrast-slider-ramp-handle-border-color-active:ButtonFace;--highcontrast-slider-ramp-handle-background-color:ButtonFace;--spectrum-slider-track-color:ButtonText;--spectrum-slider-track-fill-color:ButtonText;--spectrum-slider-ramp-track-color:ButtonText;--spectrum-slider-ramp-track-color-disabled:GrayText;--spectrum-slider-handle-background-color:ButtonFace;--spectrum-slider-handle-background-color-disabled:GrayText;--spectrum-slider-handle-border-color:ButtonText;--spectrum-slider-handle-disabled-background-color:GrayText;--spectrum-slider-tick-mark-color:ButtonText;--spectrum-slider-tick-mark-color-disabled:GrayText;--spectrum-slider-handle-border-color-hover:Highlight;--spectrum-slider-handle-border-color-down:Highlight;--spectrum-slider-handle-border-color-key-focus:Highlight;--spectrum-slider-handle-focus-ring-color-key-focus:Highlight;--spectrum-slider-track-color-disabled:GrayText;--spectrum-slider-track-fill-color-disabled:GrayText;--spectrum-slider-handle-border-color-disabled:GrayText;--spectrum-slider-label-text-color:CanvasText;--spectrum-slider-label-text-color-disabled:GrayText;--spectrum-slider-ramp-handle-border-color-active:ButtonText}.handle.handle-highlight:before{forced-color-adjust:none}:host([variant=ramp]) .handle{forced-color-adjust:none}:host:not(.is-disabled) #controls.handle-highlight,:host:not(.is-disabled) #controls:active,:host:not(.is-disabled) #controls:focus-within,:host:not(.is-disabled) #controls:hover{--highcontrast-slider-track-fill-color:Highlight;--highcontrast-slider-track-color:Highlight;--highcontrast-slider-handle-border-color:Highlight;--highcontrast-slider-ramp-track-color:Highlight;--highcontrast-slider-tick-mark-color:Highlight}:host([disabled]) #ramp+.handle{fill:ButtonFace;background-color:ButtonFace}}:host{--spectrum-slider-track-color:var(--system-spectrum-slider-track-color);--spectrum-slider-track-fill-color:var( | ||
)}@media (forced-colors:active){:host{--highcontrast-slider-track-color:ButtonText;--highcontrast-slider-track-fill-color:ButtonText;--highcontrast-slider-ramp-track-color:ButtonText;--highcontrast-slider-ramp-track-color-disabled:GrayText;--highcontrast-slider-tick-mark-color:ButtonText;--highcontrast-slider-handle-border-color:ButtonText;--highcontrast-slider-handle-border-color-hover:Highlight;--highcontrast-slider-handle-border-color-down:Highlight;--highcontrast-slider-handle-border-color-key-focus:Highlight;--highcontrast-slider-handle-focus-ring-color-key-focus:CanvasText;--highcontrast-slider-handle-background-color:ButtonFace;--highcontrast-slider-ramp-handle-border-color-active:ButtonFace;--highcontrast-slider-ramp-handle-background-color:ButtonFace;--spectrum-slider-track-color:ButtonText;--spectrum-slider-track-fill-color:ButtonText;--spectrum-slider-ramp-track-color:ButtonText;--spectrum-slider-ramp-track-color-disabled:GrayText;--spectrum-slider-handle-background-color:ButtonFace;--spectrum-slider-handle-background-color-disabled:GrayText;--spectrum-slider-handle-border-color:ButtonText;--spectrum-slider-handle-disabled-background-color:GrayText;--spectrum-slider-tick-mark-color:ButtonText;--spectrum-slider-tick-mark-color-disabled:GrayText;--spectrum-slider-handle-border-color-hover:Highlight;--spectrum-slider-handle-border-color-down:Highlight;--spectrum-slider-handle-border-color-key-focus:Highlight;--spectrum-slider-handle-focus-ring-color-key-focus:Highlight;--spectrum-slider-track-color-disabled:GrayText;--spectrum-slider-track-fill-color-disabled:GrayText;--spectrum-slider-handle-border-color-disabled:GrayText;--spectrum-slider-label-text-color:CanvasText;--spectrum-slider-label-text-color-disabled:GrayText;--spectrum-slider-ramp-handle-border-color-active:ButtonText}.handle.handle-highlight:before{forced-color-adjust:none}:host([variant=ramp]) .handle{forced-color-adjust:none}:host:not(.is-disabled) #controls.handle-highlight,:host:not(.is-disabled) #controls:active,:host:not(.is-disabled) #controls:focus-within{--highcontrast-slider-track-fill-color:Highlight;--highcontrast-slider-track-color:Highlight;--highcontrast-slider-handle-border-color:Highlight;--highcontrast-slider-ramp-track-color:Highlight;--highcontrast-slider-tick-mark-color:Highlight}@media (hover:hover){:host:not(.is-disabled) #controls:hover{--highcontrast-slider-track-fill-color:Highlight;--highcontrast-slider-track-color:Highlight;--highcontrast-slider-handle-border-color:Highlight;--highcontrast-slider-ramp-track-color:Highlight;--highcontrast-slider-tick-mark-color:Highlight}}:host([disabled]) #ramp+.handle{fill:ButtonFace;background-color:ButtonFace}}:host{--spectrum-slider-track-color:var(--system-spectrum-slider-track-color);--spectrum-slider-track-fill-color:var( | ||
--system-spectrum-slider-track-fill-color | ||
@@ -317,0 +325,0 @@ );--spectrum-slider-ramp-track-color:var( |
@@ -8,3 +8,3 @@ "use strict";import{css as r}from"@spectrum-web-components/base";const e=r` | ||
--spectrum-slider-control-to-field-label-medium | ||
);--spectrum-slider-value-side-padding-inline:var(--spectrum-spacing-200);--spectrum-slider-value-inline-size:18px}:host([size=s]){--spectrum-slider-font-size:var(--spectrum-font-size-75);--spectrum-slider-handle-size:var(--spectrum-slider-handle-size-small);--spectrum-slider-control-height:var(--spectrum-component-height-75);--spectrum-slider-handle-border-radius:var(--spectrum-corner-radius-200);--spectrum-slider-handle-border-width-down:var( | ||
);--spectrum-slider-value-side-padding-inline:var(--spectrum-spacing-200);--spectrum-slider-value-inline-size:18px}:host([dir=rtl]),[dir=rtl] :host{--spectrum-logical-rotation:matrix(-1,0,0,1,0,0)}:host([size=s]){--spectrum-slider-font-size:var(--spectrum-font-size-75);--spectrum-slider-handle-size:var(--spectrum-slider-handle-size-small);--spectrum-slider-control-height:var(--spectrum-component-height-75);--spectrum-slider-handle-border-radius:var(--spectrum-corner-radius-200);--spectrum-slider-handle-border-width-down:var( | ||
--spectrum-slider-handle-border-width-down-small | ||
@@ -124,3 +124,3 @@ );--spectrum-slider-label-top-to-text:var( | ||
var(--spectrum-slider-ramp-track-height) | ||
)/2);position:absolute}:host([dir=rtl]) #ramp svg{transform:matrix(-1,0,0,1,0,0)}#ramp svg{block-size:100%;inline-size:100%}.handle{block-size:var( | ||
)/2);position:absolute}#ramp svg{block-size:100%;inline-size:100%;transform:var(--spectrum-logical-rotation)}.handle{block-size:var( | ||
--mod-slider-handle-size,var(--spectrum-slider-handle-size) | ||
@@ -226,6 +226,2 @@ );border-radius:var( | ||
) | ||
)}.handle:hover{border-color:var( | ||
--highcontrast-slider-handle-border-color-hover,var( | ||
--mod-slider-handle-border-color-hover,var(--spectrum-slider-handle-border-color-hover) | ||
) | ||
)}.handle.handle-highlight{border-color:var( | ||
@@ -264,3 +260,3 @@ --highcontrast-slider-handle-border-color-key-focus,var( | ||
)}:host([variant=range]) .track:not(:first-of-type):not(:last-of-type):before{background:var( | ||
--highcontrast-slider-track-fill-color,var( | ||
--highcontrast-slider-track-fill-icolor,var( | ||
--mod-slider-track-fill-color,var(--spectrum-slider-track-fill-color) | ||
@@ -280,3 +276,3 @@ ) | ||
) | ||
);cursor:default;pointer-events:none}:host([disabled]) .handle:active,:host([disabled]) .handle:hover{background:var( | ||
);cursor:default;pointer-events:none}:host([disabled]) .handle:active{background:var( | ||
--highcontrast-slider-handle-background-color-disabled,var( | ||
@@ -287,3 +283,15 @@ --mod-slider-handle-background-color-disabled,var(--spectrum-slider-handle-background-color-disabled) | ||
--highcontrast-disabled-border-color,var(--mod-disabled-border-color,var(--spectrum-disabled-border-color)) | ||
)}:host([disabled]) .track:before{background:var( | ||
)}@media (hover:hover){.handle:hover{border-color:var( | ||
--highcontrast-slider-handle-border-color-hover,var( | ||
--mod-slider-handle-border-color-hover,var(--spectrum-slider-handle-border-color-hover) | ||
) | ||
)}:host([disabled]) .handle:hover{background:var( | ||
--highcontrast-slider-handle-background-color-disabled,var( | ||
--mod-slider-handle-background-color-disabled,var(--spectrum-slider-handle-background-color-disabled) | ||
) | ||
);border-color:var( | ||
--highcontrast-disabled-border-color,var( | ||
--mod-disabled-border-color,var(--spectrum-disabled-border-color) | ||
) | ||
)}}:host([disabled]) .track:before{background:var( | ||
--highcontrast-slider-track-color-disabled,var( | ||
@@ -312,3 +320,3 @@ --mod-slider-track-color-disabled,var(--spectrum-slider-track-color-disabled) | ||
) | ||
)}@media (forced-colors:active){:host{--highcontrast-slider-track-color:ButtonText;--highcontrast-slider-track-fill-color:ButtonText;--highcontrast-slider-ramp-track-color:ButtonText;--highcontrast-slider-ramp-track-color-disabled:GrayText;--highcontrast-slider-tick-mark-color:ButtonText;--highcontrast-slider-handle-border-color:ButtonText;--highcontrast-slider-handle-border-color-hover:Highlight;--highcontrast-slider-handle-border-color-down:Highlight;--highcontrast-slider-handle-border-color-key-focus:Highlight;--highcontrast-slider-handle-focus-ring-color-key-focus:CanvasText;--highcontrast-slider-handle-background-color:ButtonFace;--highcontrast-slider-ramp-handle-border-color-active:ButtonFace;--highcontrast-slider-ramp-handle-background-color:ButtonFace;--spectrum-slider-track-color:ButtonText;--spectrum-slider-track-fill-color:ButtonText;--spectrum-slider-ramp-track-color:ButtonText;--spectrum-slider-ramp-track-color-disabled:GrayText;--spectrum-slider-handle-background-color:ButtonFace;--spectrum-slider-handle-background-color-disabled:GrayText;--spectrum-slider-handle-border-color:ButtonText;--spectrum-slider-handle-disabled-background-color:GrayText;--spectrum-slider-tick-mark-color:ButtonText;--spectrum-slider-tick-mark-color-disabled:GrayText;--spectrum-slider-handle-border-color-hover:Highlight;--spectrum-slider-handle-border-color-down:Highlight;--spectrum-slider-handle-border-color-key-focus:Highlight;--spectrum-slider-handle-focus-ring-color-key-focus:Highlight;--spectrum-slider-track-color-disabled:GrayText;--spectrum-slider-track-fill-color-disabled:GrayText;--spectrum-slider-handle-border-color-disabled:GrayText;--spectrum-slider-label-text-color:CanvasText;--spectrum-slider-label-text-color-disabled:GrayText;--spectrum-slider-ramp-handle-border-color-active:ButtonText}.handle.handle-highlight:before{forced-color-adjust:none}:host([variant=ramp]) .handle{forced-color-adjust:none}:host:not(.is-disabled) #controls.handle-highlight,:host:not(.is-disabled) #controls:active,:host:not(.is-disabled) #controls:focus-within,:host:not(.is-disabled) #controls:hover{--highcontrast-slider-track-fill-color:Highlight;--highcontrast-slider-track-color:Highlight;--highcontrast-slider-handle-border-color:Highlight;--highcontrast-slider-ramp-track-color:Highlight;--highcontrast-slider-tick-mark-color:Highlight}:host([disabled]) #ramp+.handle{fill:ButtonFace;background-color:ButtonFace}}:host{--spectrum-slider-track-color:var(--system-spectrum-slider-track-color);--spectrum-slider-track-fill-color:var( | ||
)}@media (forced-colors:active){:host{--highcontrast-slider-track-color:ButtonText;--highcontrast-slider-track-fill-color:ButtonText;--highcontrast-slider-ramp-track-color:ButtonText;--highcontrast-slider-ramp-track-color-disabled:GrayText;--highcontrast-slider-tick-mark-color:ButtonText;--highcontrast-slider-handle-border-color:ButtonText;--highcontrast-slider-handle-border-color-hover:Highlight;--highcontrast-slider-handle-border-color-down:Highlight;--highcontrast-slider-handle-border-color-key-focus:Highlight;--highcontrast-slider-handle-focus-ring-color-key-focus:CanvasText;--highcontrast-slider-handle-background-color:ButtonFace;--highcontrast-slider-ramp-handle-border-color-active:ButtonFace;--highcontrast-slider-ramp-handle-background-color:ButtonFace;--spectrum-slider-track-color:ButtonText;--spectrum-slider-track-fill-color:ButtonText;--spectrum-slider-ramp-track-color:ButtonText;--spectrum-slider-ramp-track-color-disabled:GrayText;--spectrum-slider-handle-background-color:ButtonFace;--spectrum-slider-handle-background-color-disabled:GrayText;--spectrum-slider-handle-border-color:ButtonText;--spectrum-slider-handle-disabled-background-color:GrayText;--spectrum-slider-tick-mark-color:ButtonText;--spectrum-slider-tick-mark-color-disabled:GrayText;--spectrum-slider-handle-border-color-hover:Highlight;--spectrum-slider-handle-border-color-down:Highlight;--spectrum-slider-handle-border-color-key-focus:Highlight;--spectrum-slider-handle-focus-ring-color-key-focus:Highlight;--spectrum-slider-track-color-disabled:GrayText;--spectrum-slider-track-fill-color-disabled:GrayText;--spectrum-slider-handle-border-color-disabled:GrayText;--spectrum-slider-label-text-color:CanvasText;--spectrum-slider-label-text-color-disabled:GrayText;--spectrum-slider-ramp-handle-border-color-active:ButtonText}.handle.handle-highlight:before{forced-color-adjust:none}:host([variant=ramp]) .handle{forced-color-adjust:none}:host:not(.is-disabled) #controls.handle-highlight,:host:not(.is-disabled) #controls:active,:host:not(.is-disabled) #controls:focus-within{--highcontrast-slider-track-fill-color:Highlight;--highcontrast-slider-track-color:Highlight;--highcontrast-slider-handle-border-color:Highlight;--highcontrast-slider-ramp-track-color:Highlight;--highcontrast-slider-tick-mark-color:Highlight}@media (hover:hover){:host:not(.is-disabled) #controls:hover{--highcontrast-slider-track-fill-color:Highlight;--highcontrast-slider-track-color:Highlight;--highcontrast-slider-handle-border-color:Highlight;--highcontrast-slider-ramp-track-color:Highlight;--highcontrast-slider-tick-mark-color:Highlight}}:host([disabled]) #ramp+.handle{fill:ButtonFace;background-color:ButtonFace}}:host{--spectrum-slider-track-color:var(--system-spectrum-slider-track-color);--spectrum-slider-track-fill-color:var( | ||
--system-spectrum-slider-track-fill-color | ||
@@ -315,0 +323,0 @@ );--spectrum-slider-ramp-track-color:var( |
@@ -444,2 +444,18 @@ "use strict"; | ||
return html` | ||
<style> | ||
sp-slider { | ||
--mod-slider-track-color: linear-gradient( | ||
to right, | ||
red, | ||
green 100% | ||
); | ||
} | ||
sp-slider[dir='rtl'] { | ||
--mod-slider-track-color: linear-gradient( | ||
to left, | ||
red, | ||
green 100% | ||
); | ||
} | ||
</style> | ||
<div | ||
@@ -452,6 +468,2 @@ style=" | ||
<sp-slider | ||
style=" | ||
--spectrum-slider-track-color:linear-gradient(to right, red, green 100%); | ||
--spectrum-slider-track-color-rtl:linear-gradient(to left, red, green 100%); | ||
" | ||
label="Opacity" | ||
@@ -458,0 +470,0 @@ max="100" |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
768754
7963