@react-spectrum/s2 1.3.1 → 1.5.0

package/dist/private/ColorSlider.css

@@ -1,50 +1,50 @@
 @layer _.a {
-  .Zr13 {
+  .Zr15 {
     width: calc(12rem * var(--s2-scale));
   }
 
-  .Fs13 {
+  .Fs15 {
     height: calc(12rem * var(--s2-scale));
   }
 
-  .se13 {
+  .se15 {
     display: grid;
   }
 
-  .sb13 {
+  .sb15 {
     display: block;
   }
 
-  .Dxumf9b13 {
+  .Dxumf9b15 {
     grid-template-columns: 1fr auto;
   }
 
-  .CmAQJSd13 {
+  .CmAQJSd15 {
     grid-template-areas: "label output"
                          "track track";
   }
 
-  .Ub13 {
+  .Ub15 {
     row-gap: .25rem;
   }
 
-  .zChk6v13 {
+  .zChk6v15 {
     grid-column-start: output;
   }
 
-  .yChk6v13 {
+  .yChk6v15 {
     grid-column-end: output;
   }
 
-  .BChk6v13 {
+  .BChk6v15 {
     grid-row-start: output;
   }
 
-  .AChk6v13 {
+  .AChk6v15 {
     grid-row-end: output;
   }
 
-  .uk13 {
+  .uk15 {
     font-family: var(--s2-font-family-sans, adobe-clean-spectrum-vf), adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
     font-family: var(--s2-font-family-sans, adobe-clean-spectrum-vf), adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
     font-family: var(--s2-font-family-sans, adobe-clean-spectrum-vf), adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
@@ -52,39 +52,39 @@
     font-family: var(--s2-font-family-sans, adobe-clean-spectrum-vf), adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
   }
 
-  .-_6BNtrc-c13 {
+  .-_6BNtrc-c15 {
     --fs: pow(1.125, 0);
   }
 
-  .-_6BNtrc-a13 {
+  .-_6BNtrc-a15 {
     --fs: pow(1.125, -2);
   }
 
-  .-_6BNtrc-b13 {
+  .-_6BNtrc-b15 {
     --fs: pow(1.125, -1);
   }
 
-  .-_6BNtrc-d13 {
+  .-_6BNtrc-d15 {
     --fs: pow(1.125, 1);
   }
 
-  .-_6BNtrc-e13 {
+  .-_6BNtrc-e15 {
     --fs: pow(1.125, 2);
   }
 
-  .vx13 {
+  .vx15 {
     font-size: round(var(--s2-font-size-base, 14) * var(--fs) / 16 * 1rem, 1px);
   }
 
-  .xb13 {
+  .xb15 {
     font-weight: 400;
   }
 
-  ._xa13 {
+  ._xa15 {
     font-synthesis-weight: none;
   }
 
-  ._Fd13 {
+  ._Fd15 {
     line-height: round(1em * (1.15 + (1 - ((min(32, var(--s2-font-size-base, 14) * var(--fs)) - 10)) / 22) * .15), 2px);
     line-height: round(1em * (1.15 + (1 - ((min(32, var(--s2-font-size-base, 14) * var(--fs)) - 10)) / 22) * .15), 2px);
     line-height: round(1em * (1.15 + (1 - ((min(32, var(--s2-font-size-base, 14) * var(--fs)) - 10)) / 22) * .15), 2px);
@@ -92,146 +92,146 @@
     line-height: round(1em * (1.15 + (1 - ((min(32, var(--s2-font-size-base, 14) * var(--fs)) - 10)) / 22) * .15), 2px);
   }
 
-  .pv13 {
+  .pv15 {
     color: light-dark(#505050, #afafaf);
   }
 
-  .pp13 {
+  .pp15 {
     color: light-dark(#c6c6c6, #444);
   }
 
-  .ri13 {
+  .ri15 {
     cursor: default;
   }
 
-  .zCPUPs13 {
+  .zCPUPs15 {
     grid-column-start: track;
   }
 
-  .yCPUPs13 {
+  .yCPUPs15 {
     grid-column-end: track;
   }
 
-  .BCPUPs13 {
+  .BCPUPs15 {
     grid-row-start: track;
   }
 
-  .ACPUPs13 {
+  .ACPUPs15 {
     grid-row-end: track;
   }
 
-  .Za13 {
+  .Za15 {
     width: 100%;
   }
 
-  .Zo13 {
+  .Zo15 {
     width: calc(1.5rem * var(--s2-scale));
   }
 
-  .Fp13 {
+  .Fp15 {
     height: calc(1.5rem * var(--s2-scale));
   }
 
-  .Fb13 {
+  .Fb15 {
     height: 100%;
   }
 
-  .ob13 {
+  .ob15 {
     border-start-start-radius: .5rem;
   }
 
-  .nb13 {
+  .nb15 {
     border-start-end-radius: .5rem;
   }
 
-  .kb13 {
+  .kb15 {
     border-end-start-radius: .5rem;
   }
 
-  .jb13 {
+  .jb15 {
     border-end-end-radius: .5rem;
   }
 
-  .Oi13 {
+  .Oi15 {
     outline-color: light-dark(#0000001a, #ffffff1a);
   }
 
-  ._Mb13 {
+  ._Mb15 {
     outline-width: 1px;
   }
 
-  ._Ka13 {
+  ._Ka15 {
     outline-offset: -1px;
   }
 
-  ._Lf13 {
+  ._Lf15 {
     outline-style: solid;
   }
 
-  ._Le13 {
+  ._Le15 {
     outline-style: none;
   }
 
-  .gH13 {
+  .gH15 {
     background-color: light-dark(#e9e9e9, #2c2c2c);
   }
 }
 
 @layer _.b {
-  .ucJ9TBTb13:lang(ar) {
+  .ucJ9TBTb15:lang(ar) {
     font-family: adobe-clean-arabic, myriad-arabic, ui-sans-serif, system-ui, sans-serif;
   }
 
-  ._FnuYUweb13:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+  ._FnuYUweb15:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
     line-height: 1.5;
   }
 }
 
 @layer _.c {
-  .ud3Euai13:lang(he) {
+  .ud3Euai15:lang(he) {
     font-family: adobe-clean-hebrew, myriad-hebrew, ui-sans-serif, system-ui, sans-serif;
   }
 }
 
 @layer _.d {
-  .uea13:lang(ja) {
+  .uea15:lang(ja) {
     font-family: adobe-clean-han-japanese, Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN W3, Osaka, YuGothic, Yu Gothic, メイリオ, Meiryo, ＭＳ Ｐゴシック, MS PGothic, sans-serif;
   }
 }
 
 @layer _.e {
-  .ugb13:lang(ko) {
+  .ugb15:lang(ko) {
     font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
   }
 }
 
 @layer _.f {
-  .uhd13:lang(zh) {
+  .uhd15:lang(zh) {
     font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.g {
-  .uje13:lang(zh-hant) {
+  .uje15:lang(zh-hant) {
     font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.h {
-  .u2NhKxcl13:lang(zh-HK) {
+  .u2NhKxcl15:lang(zh-HK) {
     font-family: adobe-clean-han-hong-kong, source-han-hong-kong, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
   }
 }
 
 @layer _.i {
-  .uic13:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
+  .uic15:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
     font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
   }
 }
 
 @layer _.b.l {
   @media (forced-colors: active) {
-    .Ola13 {
+    .Ola15 {
       outline-color: buttonborder;
     }
   }

package/dist/private/ColorSlider.css.map

@@ -1 +1 @@
-{"mappings":"ACiDmD;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAoC5B;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAeF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAfE;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAeF;EAAA;IAAA","sources":["14771332a5b9bbc4","packages/@react-spectrum/s2/src/ColorSlider.tsx"],"sourcesContent":["@import \"d6c5746f419c314b\";\n@import \"59869632975fb938\";\n@import \"927ebdef839461cd\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ColorSlider as AriaColorSlider, ColorSliderProps as AriaColorSliderProps} from 'react-aria-components/ColorSlider';\n\nimport {ColorHandle} from './ColorHandle';\nimport {ContextValue} from 'react-aria-components/slots';\nimport {controlFont, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, useRef} from 'react';\nimport {DOMRef, DOMRefValue, GlobalDOMAttributes, SpectrumLabelableProps} from '@react-types/shared';\nimport {FieldLabel} from './Field';\nimport {SliderOutput, SliderTrack} from 'react-aria-components/Slider';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from './useDOMRef';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorSliderProps extends Omit<AriaColorSliderProps, 'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>, Pick<SpectrumLabelableProps, 'contextualHelp'>, StyleProps {\n  label?: string\n}\n\nexport const ColorSliderContext = createContext<ContextValue<Partial<ColorSliderProps>, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * A ColorSlider allows users to adjust an individual channel of a color value.\n */\nexport const ColorSlider = forwardRef(function ColorSlider(props: ColorSliderProps, ref: DOMRef<HTMLDivElement>) {\n  [props, ref] = useSpectrumContextProps(props, ref, ColorSliderContext);\n  let {UNSAFE_className = '', UNSAFE_style, styles} = props;\n  let containerRef = useDOMRef(ref);\n  let trackRef = useRef(null);\n  let {direction, locale} = useLocale();\n\n  return (\n    (<AriaColorSlider\n      {...props}\n      ref={containerRef}\n      style={UNSAFE_style}\n      // The visual label is hidden when vertical, so make it an aria-label instead.\n      aria-label={props['aria-label'] || (props.orientation === 'vertical' ? props.label : undefined)}\n      className={renderProps => UNSAFE_className + style({\n        width: {\n          orientation: {\n            horizontal: 192\n          }\n        },\n        height: {\n          orientation: {\n            vertical: 192\n          }\n        },\n        display: {\n          orientation: {\n            horizontal: 'grid',\n            vertical: 'block'\n          }\n        },\n        gridTemplateColumns: ['1fr', 'auto'],\n        gridTemplateAreas: [\n          'label output',\n          'track track'\n        ],\n        rowGap: 4\n      }, getAllowedOverrides())(renderProps, styles)}>\n      {({isDisabled, orientation, state}) => (<>\n        {orientation === 'horizontal' && (props.label || (props.label === undefined && !props['aria-label'] && !props['aria-labelledby'])) && (\n          // If no external label, aria-label or aria-labelledby is provided,\n          // default to displaying the localized channel value.\n          // Specifically check if label is undefined. If label is `null` then display no visible label.\n          // A default aria-label is provided by useColorSlider in that case.\n          (<FieldLabel isDisabled={isDisabled} contextualHelp={props.contextualHelp}>\n            {props.label || state.value.getChannelName(props.channel, locale)}\n          </FieldLabel>)\n        )}\n        {orientation === 'horizontal' &&\n          <SliderOutput\n            className={style({\n              gridArea: 'output',\n              font: controlFont(),\n              cursor: 'default',\n              color: {\n                default: 'neutral-subdued',\n                isDisabled: 'disabled'\n              }\n            })} />\n        }\n        <SliderTrack\n          ref={trackRef}\n          style={({defaultStyle, isDisabled}) => ({\n            background: isDisabled ? undefined : `${defaultStyle.background}, repeating-conic-gradient(#E1E1E1 0% 25%, white 0% 50%) 50% / 16px 16px`\n          })}\n          className={style({\n            gridArea: 'track',\n            width: {\n              orientation: {\n                horizontal: 'full',\n                vertical: 24\n              }\n            },\n            height: {\n              orientation: {\n                horizontal: 24,\n                vertical: 'full'\n              }\n            },\n            borderRadius: 'default',\n            outlineColor: {\n              default: 'gray-1000/10',\n              forcedColors: 'ButtonBorder'\n            },\n            outlineWidth: 1,\n            outlineOffset: -1,\n            outlineStyle: {\n              default: 'solid',\n              isDisabled: 'none'\n            },\n            backgroundColor: {\n              isDisabled: 'disabled'\n            }\n          })}>\n          <ColorHandle\n            containerRef={trackRef}\n            getPosition={() => {\n              let thumbLeft = direction === 'ltr' ? state.getThumbPercent(0) : 1 - state.getThumbPercent(0);\n              let x = state.orientation === 'horizontal' ? thumbLeft : 0.5;\n              let y = state.orientation === 'horizontal' ? 0.5 : 1 - state.getThumbPercent(0);\n              return {x, y};\n            }} />\n        </SliderTrack>\n      </>)}\n    </AriaColorSlider>)\n  );\n});\n"],"names":[],"version":3,"file":"ColorSlider.css.map"}
+{"mappings":"ACwEQ;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;EAAA;;;;EAwCiB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAkBF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAlBE;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAkBF;EAAA;IAAA","sources":["14771332a5b9bbc4","packages/@react-spectrum/s2/src/ColorSlider.tsx"],"sourcesContent":["@import \"d6c5746f419c314b\";\n@import \"59869632975fb938\";\n@import \"927ebdef839461cd\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {\n  ColorSlider as AriaColorSlider,\n  ColorSliderProps as AriaColorSliderProps\n} from 'react-aria-components/ColorSlider';\n\nimport {ColorHandle} from './ColorHandle';\nimport {ContextValue} from 'react-aria-components/slots';\nimport {controlFont, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, useRef} from 'react';\nimport {\n  DOMRef,\n  DOMRefValue,\n  GlobalDOMAttributes,\n  SpectrumLabelableProps\n} from '@react-types/shared';\nimport {FieldLabel} from './Field';\nimport {SliderOutput, SliderTrack} from 'react-aria-components/Slider';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from './useDOMRef';\nimport {useLocale} from 'react-aria/I18nProvider';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ColorSliderProps\n  extends\n    Omit<\n      AriaColorSliderProps,\n      'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes\n    >,\n    Pick<SpectrumLabelableProps, 'contextualHelp'>,\n    StyleProps {\n  label?: string;\n}\n\nexport const ColorSliderContext =\n  createContext<ContextValue<Partial<ColorSliderProps>, DOMRefValue<HTMLDivElement>>>(null);\n\n/**\n * A ColorSlider allows users to adjust an individual channel of a color value.\n */\nexport const ColorSlider = forwardRef(function ColorSlider(\n  props: ColorSliderProps,\n  ref: DOMRef<HTMLDivElement>\n) {\n  [props, ref] = useSpectrumContextProps(props, ref, ColorSliderContext);\n  let {UNSAFE_className = '', UNSAFE_style, styles} = props;\n  let containerRef = useDOMRef(ref);\n  let trackRef = useRef(null);\n  let {direction, locale} = useLocale();\n\n  return (\n    <AriaColorSlider\n      {...props}\n      ref={containerRef}\n      style={UNSAFE_style}\n      // The visual label is hidden when vertical, so make it an aria-label instead.\n      aria-label={\n        props['aria-label'] || (props.orientation === 'vertical' ? props.label : undefined)\n      }\n      className={renderProps =>\n        UNSAFE_className +\n        style(\n          {\n            width: {\n              orientation: {\n                horizontal: 192\n              }\n            },\n            height: {\n              orientation: {\n                vertical: 192\n              }\n            },\n            display: {\n              orientation: {\n                horizontal: 'grid',\n                vertical: 'block'\n              }\n            },\n            gridTemplateColumns: ['1fr', 'auto'],\n            gridTemplateAreas: ['label output', 'track track'],\n            rowGap: 4\n          },\n          getAllowedOverrides()\n        )(renderProps, styles)\n      }>\n      {({isDisabled, orientation, state}) => (\n        <>\n          {orientation === 'horizontal' &&\n            (props.label ||\n              (props.label === undefined && !props['aria-label'] && !props['aria-labelledby'])) && (\n              // If no external label, aria-label or aria-labelledby is provided,\n              // default to displaying the localized channel value.\n              // Specifically check if label is undefined. If label is `null` then display no visible label.\n              // A default aria-label is provided by useColorSlider in that case.\n              <FieldLabel isDisabled={isDisabled} contextualHelp={props.contextualHelp}>\n                {props.label || state.value.getChannelName(props.channel, locale)}\n              </FieldLabel>\n            )}\n          {orientation === 'horizontal' && (\n            <SliderOutput\n              className={style({\n                gridArea: 'output',\n                font: controlFont(),\n                cursor: 'default',\n                color: {\n                  default: 'neutral-subdued',\n                  isDisabled: 'disabled'\n                }\n              })}\n            />\n          )}\n          <SliderTrack\n            ref={trackRef}\n            style={({defaultStyle, isDisabled}) => ({\n              background: isDisabled\n                ? undefined\n                : `${defaultStyle.background}, repeating-conic-gradient(#E1E1E1 0% 25%, white 0% 50%) 50% / 16px 16px`\n            })}\n            className={style({\n              gridArea: 'track',\n              width: {\n                orientation: {\n                  horizontal: 'full',\n                  vertical: 24\n                }\n              },\n              height: {\n                orientation: {\n                  horizontal: 24,\n                  vertical: 'full'\n                }\n              },\n              borderRadius: 'default',\n              outlineColor: {\n                default: 'gray-1000/10',\n                forcedColors: 'ButtonBorder'\n              },\n              outlineWidth: 1,\n              outlineOffset: -1,\n              outlineStyle: {\n                default: 'solid',\n                isDisabled: 'none'\n              },\n              backgroundColor: {\n                isDisabled: 'disabled'\n              }\n            })}>\n            <ColorHandle\n              containerRef={trackRef}\n              getPosition={() => {\n                let thumbLeft =\n                  direction === 'ltr' ? state.getThumbPercent(0) : 1 - state.getThumbPercent(0);\n                let x = state.orientation === 'horizontal' ? thumbLeft : 0.5;\n                let y = state.orientation === 'horizontal' ? 0.5 : 1 - state.getThumbPercent(0);\n                return {x, y};\n              }}\n            />\n          </SliderTrack>\n        </>\n      )}\n    </AriaColorSlider>\n  );\n});\n"],"names":[],"version":3,"file":"ColorSlider.css.map"}

package/dist/private/ColorSlider.mjs

@@ -50,19 +50,23 @@ const $495db619596088aa$export$44fd664bcca5b6fb = /*#__PURE__*/ (0, $3i9ps$forwa
                     rules += p[0];
                 }
                 if (props.orientation === "horizontal") {
-                    if (!width) rules += ' Zr13';
+                    if (!width) rules += ' Zr15';
                 }
-                if (props.orientation === "vertical") rules += ' Fs13';
-                if (props.orientation === "vertical") rules += ' sb13';
-                else if (props.orientation === "horizontal") rules += ' se13';
-                rules += ' Dxumf9b13';
-                rules += ' CmAQJSd13';
-                rules += ' Ub13';
+                if (props.orientation === "vertical") rules += ' Fs15';
+                if (props.orientation === "vertical") rules += ' sb15';
+                else if (props.orientation === "horizontal") rules += ' se15';
+                rules += ' Dxumf9b15';
+                rules += ' CmAQJSd15';
+                rules += ' Ub15';
                 return rules;
             }(renderProps, styles),
         children: ({ isDisabled: isDisabled, orientation: orientation, state: state })=>/*#__PURE__*/ (0, $3i9ps$jsxs)((0, $3i9ps$Fragment), {
                 children: [
-                    orientation === 'horizontal' && (props.label || props.label === undefined && !props['aria-label'] && !props['aria-labelledby']) && /*#__PURE__*/ (0, $3i9ps$jsx)((0, $9afd80978c252040$export$1acdcf5a973a8414), {
+                    orientation === 'horizontal' && (props.label || props.label === undefined && !props['aria-label'] && !props['aria-labelledby']) && // If no external label, aria-label or aria-labelledby is provided,
+                    // default to displaying the localized channel value.
+                    // Specifically check if label is undefined. If label is `null` then display no visible label.
+                    // A default aria-label is provided by useColorSlider in that case.
+                    /*#__PURE__*/ (0, $3i9ps$jsx)((0, $9afd80978c252040$export$1acdcf5a973a8414), {
                         isDisabled: isDisabled,
                         contextualHelp: props.contextualHelp,
                         children: props.label || state.value.getChannelName(props.channel, locale)
@@ -70,112 +74,112 @@ const $495db619596088aa$export$44fd664bcca5b6fb = /*#__PURE__*/ (0, $3i9ps$forwa
                     orientation === 'horizontal' && /*#__PURE__*/ (0, $3i9ps$jsx)((0, $3i9ps$SliderOutput), {
                         className: function anonymous(props) {
                             let rules = " ";
-                            rules += ' zChk6v13';
-                            rules += ' yChk6v13';
-                            rules += ' BChk6v13';
-                            rules += ' AChk6v13';
+                            rules += ' zChk6v15';
+                            rules += ' yChk6v15';
+                            rules += ' BChk6v15';
+                            rules += ' AChk6v15';
                             if (props.size === "XL") {
-                                rules += ' uk13';
-                                rules += ' ucJ9TBTb13';
-                                rules += ' ud3Euai13';
-                                rules += ' uea13';
-                                rules += ' ugb13';
-                                rules += ' uhd13';
-                                rules += ' uje13';
-                                rules += ' u2NhKxcl13';
-                                rules += ' uic13';
+                                rules += ' uk15';
+                                rules += ' ucJ9TBTb15';
+                                rules += ' ud3Euai15';
+                                rules += ' uea15';
+                                rules += ' ugb15';
+                                rules += ' uhd15';
+                                rules += ' uje15';
+                                rules += ' u2NhKxcl15';
+                                rules += ' uic15';
                             } else if (props.size === "L") {
-                                rules += ' uk13';
-                                rules += ' ucJ9TBTb13';
-                                rules += ' ud3Euai13';
-                                rules += ' uea13';
-                                rules += ' ugb13';
-                                rules += ' uhd13';
-                                rules += ' uje13';
-                                rules += ' u2NhKxcl13';
-                                rules += ' uic13';
+                                rules += ' uk15';
+                                rules += ' ucJ9TBTb15';
+                                rules += ' ud3Euai15';
+                                rules += ' uea15';
+                                rules += ' ugb15';
+                                rules += ' uhd15';
+                                rules += ' uje15';
+                                rules += ' u2NhKxcl15';
+                                rules += ' uic15';
                             } else if (props.size === "S") {
-                                rules += ' uk13';
-                                rules += ' ucJ9TBTb13';
-                                rules += ' ud3Euai13';
-                                rules += ' uea13';
-                                rules += ' ugb13';
-                                rules += ' uhd13';
-                                rules += ' uje13';
-                                rules += ' u2NhKxcl13';
-                                rules += ' uic13';
+                                rules += ' uk15';
+                                rules += ' ucJ9TBTb15';
+                                rules += ' ud3Euai15';
+                                rules += ' uea15';
+                                rules += ' ugb15';
+                                rules += ' uhd15';
+                                rules += ' uje15';
+                                rules += ' u2NhKxcl15';
+                                rules += ' uic15';
                             } else if (props.size === "XS") {
-                                rules += ' uk13';
-                                rules += ' ucJ9TBTb13';
-                                rules += ' ud3Euai13';
-                                rules += ' uea13';
-                                rules += ' ugb13';
-                                rules += ' uhd13';
-                                rules += ' uje13';
-                                rules += ' u2NhKxcl13';
-                                rules += ' uic13';
+                                rules += ' uk15';
+                                rules += ' ucJ9TBTb15';
+                                rules += ' ud3Euai15';
+                                rules += ' uea15';
+                                rules += ' ugb15';
+                                rules += ' uhd15';
+                                rules += ' uje15';
+                                rules += ' u2NhKxcl15';
+                                rules += ' uic15';
                             } else {
-                                rules += ' uk13';
-                                rules += ' ucJ9TBTb13';
-                                rules += ' ud3Euai13';
-                                rules += ' uea13';
-                                rules += ' ugb13';
-                                rules += ' uhd13';
-                                rules += ' uje13';
-                                rules += ' u2NhKxcl13';
-                                rules += ' uic13';
+                                rules += ' uk15';
+                                rules += ' ucJ9TBTb15';
+                                rules += ' ud3Euai15';
+                                rules += ' uea15';
+                                rules += ' ugb15';
+                                rules += ' uhd15';
+                                rules += ' uje15';
+                                rules += ' u2NhKxcl15';
+                                rules += ' uic15';
                             }
                             if (props.size === "XL") {
-                                rules += ' -_6BNtrc-e13';
-                                rules += ' vx13';
+                                rules += ' -_6BNtrc-e15';
+                                rules += ' vx15';
                             } else if (props.size === "L") {
-                                rules += ' -_6BNtrc-d13';
-                                rules += ' vx13';
+                                rules += ' -_6BNtrc-d15';
+                                rules += ' vx15';
                             } else if (props.size === "S") {
-                                rules += ' -_6BNtrc-b13';
-                                rules += ' vx13';
+                                rules += ' -_6BNtrc-b15';
+                                rules += ' vx15';
                             } else if (props.size === "XS") {
-                                rules += ' -_6BNtrc-a13';
-                                rules += ' vx13';
+                                rules += ' -_6BNtrc-a15';
+                                rules += ' vx15';
                             } else {
-                                rules += ' -_6BNtrc-c13';
-                                rules += ' vx13';
+                                rules += ' -_6BNtrc-c15';
+                                rules += ' vx15';
                             }
                             if (props.size === "XL") {
-                                rules += ' xb13';
-                                rules += ' _xa13';
+                                rules += ' xb15';
+                                rules += ' _xa15';
                             } else if (props.size === "L") {
-                                rules += ' xb13';
-                                rules += ' _xa13';
+                                rules += ' xb15';
+                                rules += ' _xa15';
                             } else if (props.size === "S") {
-                                rules += ' xb13';
-                                rules += ' _xa13';
+                                rules += ' xb15';
+                                rules += ' _xa15';
                             } else if (props.size === "XS") {
-                                rules += ' xb13';
-                                rules += ' _xa13';
+                                rules += ' xb15';
+                                rules += ' _xa15';
                             } else {
-                                rules += ' xb13';
-                                rules += ' _xa13';
+                                rules += ' xb15';
+                                rules += ' _xa15';
                             }
                             if (props.size === "XL") {
-                                rules += ' _Fd13';
-                                rules += ' _FnuYUweb13';
+                                rules += ' _Fd15';
+                                rules += ' _FnuYUweb15';
                             } else if (props.size === "L") {
-                                rules += ' _Fd13';
-                                rules += ' _FnuYUweb13';
+                                rules += ' _Fd15';
+                                rules += ' _FnuYUweb15';
                             } else if (props.size === "S") {
-                                rules += ' _Fd13';
-                                rules += ' _FnuYUweb13';
+                                rules += ' _Fd15';
+                                rules += ' _FnuYUweb15';
                             } else if (props.size === "XS") {
-                                rules += ' _Fd13';
-                                rules += ' _FnuYUweb13';
+                                rules += ' _Fd15';
+                                rules += ' _FnuYUweb15';
                             } else {
-                                rules += ' _Fd13';
-                                rules += ' _FnuYUweb13';
+                                rules += ' _Fd15';
+                                rules += ' _FnuYUweb15';
                             }
-                            if (props.isDisabled) rules += ' pp13';
-                            else rules += ' pv13';
-                            rules += ' ri13';
+                            if (props.isDisabled) rules += ' pp15';
+                            else rules += ' pv15';
+                            rules += ' ri15';
                             return rules;
                         }
                     }),
@@ -186,25 +190,25 @@ const $495db619596088aa$export$44fd664bcca5b6fb = /*#__PURE__*/ (0, $3i9ps$forwa
                             }),
                         className: function anonymous(props) {
                             let rules = " ";
-                            rules += ' zCPUPs13';
-                            rules += ' yCPUPs13';
-                            rules += ' BCPUPs13';
-                            rules += ' ACPUPs13';
-                            if (props.orientation === "vertical") rules += ' Zo13';
-                            else if (props.orientation === "horizontal") rules += ' Za13';
-                            if (props.orientation === "vertical") rules += ' Fb13';
-                            else if (props.orientation === "horizontal") rules += ' Fp13';
-                            rules += ' ob13';
-                            rules += ' nb13';
-                            rules += ' kb13';
-                            rules += ' jb13';
-                            rules += ' Oi13';
-                            rules += ' Ola13';
-                            rules += ' _Mb13';
-                            rules += ' _Ka13';
-                            if (props.isDisabled) rules += ' _Le13';
-                            else rules += ' _Lf13';
-                            if (props.isDisabled) rules += ' gH13';
+                            rules += ' zCPUPs15';
+                            rules += ' yCPUPs15';
+                            rules += ' BCPUPs15';
+                            rules += ' ACPUPs15';
+                            if (props.orientation === "vertical") rules += ' Zo15';
+                            else if (props.orientation === "horizontal") rules += ' Za15';
+                            if (props.orientation === "vertical") rules += ' Fb15';
+                            else if (props.orientation === "horizontal") rules += ' Fp15';
+                            rules += ' ob15';
+                            rules += ' nb15';
+                            rules += ' kb15';
+                            rules += ' jb15';
+                            rules += ' Oi15';
+                            rules += ' Ola15';
+                            rules += ' _Mb15';
+                            rules += ' _Ka15';
+                            if (props.isDisabled) rules += ' _Le15';
+                            else rules += ' _Lf15';
+                            if (props.isDisabled) rules += ' gH15';
                             return rules;
                         },
                         children: /*#__PURE__*/ (0, $3i9ps$jsx)((0, $b4f7db7c45cd3de9$export$92862704de639678), {