npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.644 → 3.0.646 - Mend

@cloudscape-design/components-themeable 3.0.644 → 3.0.646

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (102) hide show

package/lib/internal/template/slider/internal.js CHANGED Viewed

@@ -23,7 +23,8 @@ export default function InternalSlider(_a) {
     const [showTooltip, setShowTooltip] = useState(false);
     const [isActive, setIsActive] = useState(false);
     const labelsId = useUniqueId('labels');
-    const { ariaLabelledby, ariaDescribedby, controlId, invalid } = useFormFieldContext(rest);
+    const { ariaLabelledby, ariaDescribedby, controlId, invalid, warning } = useFormFieldContext(rest);
+    const showWarning = warning && !invalid;
     if (referenceValues && valuesAreValid(referenceValues) === false) {
         warnOnce('Slider', 'All reference values must be integers. Non-integer values will not be displayed.');
     }
@@ -83,11 +84,13 @@ export default function InternalSlider(_a) {
                 }) }),
             !hideFillLine && (React.createElement("div", { className: clsx(styles['slider-range'], {
                     [styles.error]: invalid,
+                    [styles.warning]: showWarning,
                     [styles.active]: isActive,
                     [styles['error-active']]: invalid && isActive,
+                    [styles['warning-active']]: showWarning && isActive,
                     [styles.disabled]: disabled,
                 }), style: { [customCssProps.sliderRangeInlineSize]: `${percent}%` } }))),
-        !!step && tickMarks && (React.createElement(SliderTickMarks, { hideFillLine: hideFillLine, disabled: disabled, invalid: invalid, isActive: isActive, step: step, min: min, max: max, value: sliderValue })),
+        !!step && tickMarks && (React.createElement(SliderTickMarks, { hideFillLine: hideFillLine, disabled: disabled, invalid: invalid, warning: warning, isActive: isActive, step: step, min: min, max: max, value: sliderValue })),
         React.createElement("input", {
             // we need to add this because input[type=range] isn't natively focusable in Safari.
             tabIndex: 0, "aria-label": ariaLabel, "aria-labelledby": ariaLabel && !rest.ariaLabelledby ? undefined : ariaLabelledby, "aria-describedby": valueFormatter ? (ariaDescribedby ? `${labelsId} ${ariaDescribedby}` : labelsId) : ariaDescribedby, "aria-valuetext": getAriaValueText(), "aria-invalid": invalid ? 'true' : undefined, id: controlId, type: "range", min: min, max: max, disabled: disabled, onFocus: () => {
@@ -110,6 +113,7 @@ export default function InternalSlider(_a) {
                 onChange && fireNonCancelableEvent(onChange, { value: Number(event.target.value) });
             }, className: clsx(styles.thumb, {
                 [styles.error]: invalid,
+                [styles.warning]: showWarning,
                 [styles.disabled]: disabled,
                 [styles.min]: sliderValue <= min || max < min,
                 [styles.max]: sliderValue >= max && min < max,

package/lib/internal/template/slider/internal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/slider/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useState, useRef } from 'react';\nimport clsx from 'clsx';\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport { getBaseProps } from '../internal/base-component/index.js';\nimport { fireNonCancelableEvent } from '../internal/events/index.js';\nimport { useFormFieldContext } from '../internal/context/form-field-context.js';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useUniqueId } from '../internal/hooks/use-unique-id/index.js';\nimport Tooltip from '../internal/components/tooltip/index.js';\nimport customCssProps from '../internal/generated/custom-css-properties/index.js';\nimport { useInternalI18n } from '../i18n/context';\n\nimport styles from './styles.css.js';\nimport { SliderProps } from './interfaces.js';\nimport SliderLabels from './slider-labels.js';\nimport SliderTickMarks from './tick-marks.js';\nimport { getPercent, getStepArray, findLowerAndHigherValues, valuesAreValid, THUMB_SIZE } from './utils.js';\n\nexport interface InternalSliderProps extends SliderProps, InternalBaseComponentProps {}\n\nexport default function InternalSlider({\n value,\n min,\n max,\n onChange,\n step,\n disabled,\n ariaLabel,\n ariaDescription,\n referenceValues,\n tickMarks,\n hideFillLine,\n valueFormatter,\n i18nStrings,\n __internalRootRef = null,\n ...rest\n}: InternalSliderProps) {\n const baseProps = getBaseProps(rest);\n const i18n = useInternalI18n('slider');\n\n const handleRef = useRef<HTMLDivElement>(null);\n const [showTooltip, setShowTooltip] = useState(false);\n const [isActive, setIsActive] = useState(false);\n const labelsId = useUniqueId('labels');\n const { ariaLabelledby, ariaDescribedby, controlId, invalid } = useFormFieldContext(rest);\n\n if (referenceValues && valuesAreValid(referenceValues) === false) {\n warnOnce('Slider', 'All reference values must be integers. Non-integer values will not be displayed.');\n }\n\n if (min >= max) {\n warnOnce('Slider', 'The min value cannot be greater than the max value.');\n }\n\n if (step && step > max - min) {\n warnOnce('Slider', 'The step value cannot be greater than the difference between the min and max.');\n }\n\n if (step && value !== undefined && (value - min) % step !== 0) {\n warnOnce('Slider', 'Slider value must be a multiple of the step. The value will round to the nearest step value.');\n }\n\n const getValue = () => {\n const stepIsValid = step && step < max - min && step > min;\n\n if (value === undefined) {\n // this is the default html input's fallback value\n return max < min ? min : min + (max - min) / 2;\n }\n\n if (!step) {\n return value;\n }\n\n // if the value is not a multiple of the step, then find the closest step\n // and make that the value (this is also the native input behavior)\n if (step && stepIsValid && (value - min) % step !== 0) {\n const closest = getStepArray(step, [min, max]).reduce(function (prev, curr) {\n return Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev;\n });\n\n return closest;\n }\n\n return value;\n };\n\n const sliderValue = getValue();\n const percent = getPercent(Math.max(Math.min(sliderValue, max), min), [min, max]);\n\n const getAriaValueText = () => {\n if (valueFormatter && valueFormatter(sliderValue)) {\n return valueFormatter(sliderValue);\n }\n\n if (valueFormatter && !valueFormatter(sliderValue)) {\n const middleValues = referenceValues ? referenceValues : [];\n const valueArray = [min, ...middleValues, sliderValue, max];\n const prevAndNext = findLowerAndHigherValues(valueArray, sliderValue);\n const previousValue = prevAndNext.lower ? valueFormatter(prevAndNext.lower) : valueFormatter(min);\n const nextValue = prevAndNext.higher ? valueFormatter(prevAndNext.higher) : valueFormatter(max);\n const value = sliderValue;\n\n return i18n('i18nStrings.valueTextRange', i18nStrings?.valueTextRange(previousValue, value, nextValue), format =>\n format({ value, previousValue, nextValue })\n );\n }\n\n return undefined;\n };\n\n return (\n <div {...baseProps} ref={__internalRootRef} className={clsx(baseProps.className, styles.root)}>\n {showTooltip && (\n <Tooltip value={valueFormatter ? valueFormatter(sliderValue) : sliderValue} trackRef={handleRef} />\n )}\n <div\n ref={handleRef}\n className={clsx(styles['tooltip-thumb'])}\n style={{\n [customCssProps.sliderTooltipPosition]: `calc(${percent}% - ${THUMB_SIZE}px)`,\n }}\n />\n <div className={styles.slider}>\n <div\n className={clsx(styles['slider-track'], {\n [styles.disabled]: disabled,\n })}\n />\n\n {!hideFillLine && (\n <div\n className={clsx(styles['slider-range'], {\n [styles.error]: invalid,\n [styles.active]: isActive,\n [styles['error-active']]: invalid && isActive,\n [styles.disabled]: disabled,\n })}\n style={{ [customCssProps.sliderRangeInlineSize]: `${percent}%` }}\n />\n )}\n </div>\n {!!step && tickMarks && (\n <SliderTickMarks\n hideFillLine={hideFillLine}\n disabled={disabled}\n invalid={invalid}\n isActive={isActive}\n step={step}\n min={min}\n max={max}\n value={sliderValue}\n />\n )}\n\n <input\n // we need to add this because input[type=range] isn't natively focusable in Safari.\n tabIndex={0}\n aria-label={ariaLabel}\n // aria-labelledby has precedence over aria-label in accessible name calculation.\n // When aria-label is provided for Input, it should override aria-labelledBy from form-field context.\n // If both aria-label and aria-labelledby come from Input props, aria-labelledby will be used in accessible name\n aria-labelledby={ariaLabel && !rest.ariaLabelledby ? undefined : ariaLabelledby}\n // Slider labels, if present and something other than numbers, should be associated to the input with aria-describedby\n aria-describedby={\n valueFormatter ? (ariaDescribedby ? `${labelsId} ${ariaDescribedby}` : labelsId) : ariaDescribedby\n }\n aria-valuetext={getAriaValueText()}\n aria-invalid={invalid ? 'true' : undefined}\n id={controlId}\n type=\"range\"\n min={min}\n max={max}\n disabled={disabled}\n onFocus={() => {\n setShowTooltip(true);\n setIsActive(true);\n }}\n onBlur={() => {\n setShowTooltip(false);\n setIsActive(false);\n }}\n onMouseEnter={() => {\n setShowTooltip(true);\n }}\n onMouseLeave={() => {\n setShowTooltip(false);\n }}\n onTouchStart={() => {\n setShowTooltip(true);\n setIsActive(true);\n }}\n onTouchEnd={() => {\n setShowTooltip(false);\n setIsActive(false);\n }}\n step={step}\n value={sliderValue}\n onChange={event => {\n onChange && fireNonCancelableEvent(onChange, { value: Number(event.target.value) });\n }}\n className={clsx(styles.thumb, {\n [styles.error]: invalid,\n [styles.disabled]: disabled,\n [styles.min]: sliderValue <= min \|\| max < min,\n [styles.max]: sliderValue >= max && min < max,\n })}\n />\n\n <SliderLabels\n min={min}\n max={max}\n referenceValues={referenceValues}\n valueFormatter={valueFormatter}\n labelsId={labelsId}\n ariaDescription={ariaDescription}\n />\n </div>\n );\n}\n"]}
1	+ {"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/slider/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useState, useRef } from 'react';\nimport clsx from 'clsx';\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport { getBaseProps } from '../internal/base-component/index.js';\nimport { fireNonCancelableEvent } from '../internal/events/index.js';\nimport { useFormFieldContext } from '../internal/context/form-field-context.js';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useUniqueId } from '../internal/hooks/use-unique-id/index.js';\nimport Tooltip from '../internal/components/tooltip/index.js';\nimport customCssProps from '../internal/generated/custom-css-properties/index.js';\nimport { useInternalI18n } from '../i18n/context';\n\nimport styles from './styles.css.js';\nimport { SliderProps } from './interfaces.js';\nimport SliderLabels from './slider-labels.js';\nimport SliderTickMarks from './tick-marks.js';\nimport { getPercent, getStepArray, findLowerAndHigherValues, valuesAreValid, THUMB_SIZE } from './utils.js';\n\nexport interface InternalSliderProps extends SliderProps, InternalBaseComponentProps {}\n\nexport default function InternalSlider({\n value,\n min,\n max,\n onChange,\n step,\n disabled,\n ariaLabel,\n ariaDescription,\n referenceValues,\n tickMarks,\n hideFillLine,\n valueFormatter,\n i18nStrings,\n __internalRootRef = null,\n ...rest\n}: InternalSliderProps) {\n const baseProps = getBaseProps(rest);\n const i18n = useInternalI18n('slider');\n\n const handleRef = useRef<HTMLDivElement>(null);\n const [showTooltip, setShowTooltip] = useState(false);\n const [isActive, setIsActive] = useState(false);\n const labelsId = useUniqueId('labels');\n const { ariaLabelledby, ariaDescribedby, controlId, invalid, warning } = useFormFieldContext(rest);\n\n const showWarning = warning && !invalid;\n\n if (referenceValues && valuesAreValid(referenceValues) === false) {\n warnOnce('Slider', 'All reference values must be integers. Non-integer values will not be displayed.');\n }\n\n if (min >= max) {\n warnOnce('Slider', 'The min value cannot be greater than the max value.');\n }\n\n if (step && step > max - min) {\n warnOnce('Slider', 'The step value cannot be greater than the difference between the min and max.');\n }\n\n if (step && value !== undefined && (value - min) % step !== 0) {\n warnOnce('Slider', 'Slider value must be a multiple of the step. The value will round to the nearest step value.');\n }\n\n const getValue = () => {\n const stepIsValid = step && step < max - min && step > min;\n\n if (value === undefined) {\n // this is the default html input's fallback value\n return max < min ? min : min + (max - min) / 2;\n }\n\n if (!step) {\n return value;\n }\n\n // if the value is not a multiple of the step, then find the closest step\n // and make that the value (this is also the native input behavior)\n if (step && stepIsValid && (value - min) % step !== 0) {\n const closest = getStepArray(step, [min, max]).reduce(function (prev, curr) {\n return Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev;\n });\n\n return closest;\n }\n\n return value;\n };\n\n const sliderValue = getValue();\n const percent = getPercent(Math.max(Math.min(sliderValue, max), min), [min, max]);\n\n const getAriaValueText = () => {\n if (valueFormatter && valueFormatter(sliderValue)) {\n return valueFormatter(sliderValue);\n }\n\n if (valueFormatter && !valueFormatter(sliderValue)) {\n const middleValues = referenceValues ? referenceValues : [];\n const valueArray = [min, ...middleValues, sliderValue, max];\n const prevAndNext = findLowerAndHigherValues(valueArray, sliderValue);\n const previousValue = prevAndNext.lower ? valueFormatter(prevAndNext.lower) : valueFormatter(min);\n const nextValue = prevAndNext.higher ? valueFormatter(prevAndNext.higher) : valueFormatter(max);\n const value = sliderValue;\n\n return i18n('i18nStrings.valueTextRange', i18nStrings?.valueTextRange(previousValue, value, nextValue), format =>\n format({ value, previousValue, nextValue })\n );\n }\n\n return undefined;\n };\n\n return (\n <div {...baseProps} ref={__internalRootRef} className={clsx(baseProps.className, styles.root)}>\n {showTooltip && (\n <Tooltip value={valueFormatter ? valueFormatter(sliderValue) : sliderValue} trackRef={handleRef} />\n )}\n <div\n ref={handleRef}\n className={clsx(styles['tooltip-thumb'])}\n style={{\n [customCssProps.sliderTooltipPosition]: `calc(${percent}% - ${THUMB_SIZE}px)`,\n }}\n />\n <div className={styles.slider}>\n <div\n className={clsx(styles['slider-track'], {\n [styles.disabled]: disabled,\n })}\n />\n\n {!hideFillLine && (\n <div\n className={clsx(styles['slider-range'], {\n [styles.error]: invalid,\n [styles.warning]: showWarning,\n [styles.active]: isActive,\n [styles['error-active']]: invalid && isActive,\n [styles['warning-active']]: showWarning && isActive,\n [styles.disabled]: disabled,\n })}\n style={{ [customCssProps.sliderRangeInlineSize]: `${percent}%` }}\n />\n )}\n </div>\n {!!step && tickMarks && (\n <SliderTickMarks\n hideFillLine={hideFillLine}\n disabled={disabled}\n invalid={invalid}\n warning={warning}\n isActive={isActive}\n step={step}\n min={min}\n max={max}\n value={sliderValue}\n />\n )}\n\n <input\n // we need to add this because input[type=range] isn't natively focusable in Safari.\n tabIndex={0}\n aria-label={ariaLabel}\n // aria-labelledby has precedence over aria-label in accessible name calculation.\n // When aria-label is provided for Input, it should override aria-labelledBy from form-field context.\n // If both aria-label and aria-labelledby come from Input props, aria-labelledby will be used in accessible name\n aria-labelledby={ariaLabel && !rest.ariaLabelledby ? undefined : ariaLabelledby}\n // Slider labels, if present and something other than numbers, should be associated to the input with aria-describedby\n aria-describedby={\n valueFormatter ? (ariaDescribedby ? `${labelsId} ${ariaDescribedby}` : labelsId) : ariaDescribedby\n }\n aria-valuetext={getAriaValueText()}\n aria-invalid={invalid ? 'true' : undefined}\n id={controlId}\n type=\"range\"\n min={min}\n max={max}\n disabled={disabled}\n onFocus={() => {\n setShowTooltip(true);\n setIsActive(true);\n }}\n onBlur={() => {\n setShowTooltip(false);\n setIsActive(false);\n }}\n onMouseEnter={() => {\n setShowTooltip(true);\n }}\n onMouseLeave={() => {\n setShowTooltip(false);\n }}\n onTouchStart={() => {\n setShowTooltip(true);\n setIsActive(true);\n }}\n onTouchEnd={() => {\n setShowTooltip(false);\n setIsActive(false);\n }}\n step={step}\n value={sliderValue}\n onChange={event => {\n onChange && fireNonCancelableEvent(onChange, { value: Number(event.target.value) });\n }}\n className={clsx(styles.thumb, {\n [styles.error]: invalid,\n [styles.warning]: showWarning,\n [styles.disabled]: disabled,\n [styles.min]: sliderValue <= min \|\| max < min,\n [styles.max]: sliderValue >= max && min < max,\n })}\n />\n\n <SliderLabels\n min={min}\n max={max}\n referenceValues={referenceValues}\n valueFormatter={valueFormatter}\n labelsId={labelsId}\n ariaDescription={ariaDescription}\n />\n </div>\n );\n}\n"]}

package/lib/internal/template/slider/styles.css.js CHANGED Viewed

@@ -1,28 +1,30 @@
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_pcgz5_stdm1_103",
-  "slider": "awsui_slider_pcgz5_stdm1_143",
-  "slider-track": "awsui_slider-track_pcgz5_stdm1_147",
-  "slider-range": "awsui_slider-range_pcgz5_stdm1_147",
-  "disabled": "awsui_disabled_pcgz5_stdm1_162",
-  "error": "awsui_error_pcgz5_stdm1_171",
-  "active": "awsui_active_pcgz5_stdm1_174",
-  "error-active": "awsui_error-active_pcgz5_stdm1_177",
-  "labels": "awsui_labels_pcgz5_stdm1_184",
-  "labels-noref": "awsui_labels-noref_pcgz5_stdm1_190",
-  "labels-reference": "awsui_labels-reference_pcgz5_stdm1_193",
-  "labels-min": "awsui_labels-min_pcgz5_stdm1_200",
-  "labels-max": "awsui_labels-max_pcgz5_stdm1_206",
-  "labels-aria-description": "awsui_labels-aria-description_pcgz5_stdm1_214",
-  "ticks": "awsui_ticks_pcgz5_stdm1_232",
-  "ticks-wrapper": "awsui_ticks-wrapper_pcgz5_stdm1_238",
-  "tick": "awsui_tick_pcgz5_stdm1_232",
-  "middle": "awsui_middle_pcgz5_stdm1_253",
-  "filled": "awsui_filled_pcgz5_stdm1_256",
-  "tooltip-thumb": "awsui_tooltip-thumb_pcgz5_stdm1_272",
-  "thumb": "awsui_thumb_pcgz5_stdm1_280",
-  "min": "awsui_min_pcgz5_stdm1_295",
-  "max": "awsui_max_pcgz5_stdm1_298"
+  "root": "awsui_root_pcgz5_412ik_103",
+  "slider": "awsui_slider_pcgz5_412ik_143",
+  "slider-track": "awsui_slider-track_pcgz5_412ik_147",
+  "slider-range": "awsui_slider-range_pcgz5_412ik_147",
+  "disabled": "awsui_disabled_pcgz5_412ik_162",
+  "error": "awsui_error_pcgz5_412ik_171",
+  "warning": "awsui_warning_pcgz5_412ik_174",
+  "active": "awsui_active_pcgz5_412ik_177",
+  "error-active": "awsui_error-active_pcgz5_412ik_180",
+  "warning-active": "awsui_warning-active_pcgz5_412ik_183",
+  "labels": "awsui_labels_pcgz5_412ik_190",
+  "labels-noref": "awsui_labels-noref_pcgz5_412ik_196",
+  "labels-reference": "awsui_labels-reference_pcgz5_412ik_199",
+  "labels-min": "awsui_labels-min_pcgz5_412ik_206",
+  "labels-max": "awsui_labels-max_pcgz5_412ik_212",
+  "labels-aria-description": "awsui_labels-aria-description_pcgz5_412ik_220",
+  "ticks": "awsui_ticks_pcgz5_412ik_238",
+  "ticks-wrapper": "awsui_ticks-wrapper_pcgz5_412ik_244",
+  "tick": "awsui_tick_pcgz5_412ik_238",
+  "middle": "awsui_middle_pcgz5_412ik_259",
+  "filled": "awsui_filled_pcgz5_412ik_262",
+  "tooltip-thumb": "awsui_tooltip-thumb_pcgz5_412ik_284",
+  "thumb": "awsui_thumb_pcgz5_412ik_292",
+  "min": "awsui_min_pcgz5_412ik_307",
+  "max": "awsui_max_pcgz5_412ik_310"
 };

package/lib/internal/template/slider/styles.scoped.css CHANGED Viewed

@@ -100,7 +100,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_root_pcgz5_stdm1_103:not(#\9) {
+.awsui_root_pcgz5_412ik_103:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -141,11 +141,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-inline: calc(var(--space-m-kpg8id, 16px) / 2);
 }
-.awsui_slider_pcgz5_stdm1_143:not(#\9) {
+.awsui_slider_pcgz5_412ik_143:not(#\9) {
   display: flex;
   align-items: center;
 }
-.awsui_slider-track_pcgz5_stdm1_147:not(#\9), .awsui_slider-range_pcgz5_stdm1_147:not(#\9) {
+.awsui_slider-track_pcgz5_412ik_147:not(#\9), .awsui_slider-range_pcgz5_412ik_147:not(#\9) {
   position: absolute;
   border-start-start-radius: 3px;
   border-start-end-radius: 3px;
@@ -154,57 +154,63 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-block-start: var(--space-xs-xf5ch3, 8px);
   margin-inline: calc(var(--space-m-kpg8id, 16px) / -2);
 }
-.awsui_slider-track_pcgz5_stdm1_147:not(#\9) {
+.awsui_slider-track_pcgz5_412ik_147:not(#\9) {
   background-color: var(--color-background-slider-track-6pt3x9, #879596);
   inline-size: calc(100% + var(--space-m-kpg8id, 16px));
   block-size: 2px;
   cursor: pointer;
 }
-.awsui_slider-track_pcgz5_stdm1_147.awsui_disabled_pcgz5_stdm1_162:not(#\9) {
+.awsui_slider-track_pcgz5_412ik_147.awsui_disabled_pcgz5_412ik_162:not(#\9) {
   cursor: default;
   background-color: var(--color-background-control-disabled-dsn0t2, #d5dbdb);
 }
-.awsui_slider-range_pcgz5_stdm1_147:not(#\9) {
+.awsui_slider-range_pcgz5_412ik_147:not(#\9) {
   background-color: var(--color-background-slider-handle-default-nidjhe, #0073bb);
   block-size: 4px;
   inline-size: calc(var(--awsui-slider-range-inline-size-tkr9yl) + var(--space-m-kpg8id, 16px));
 }
-.awsui_slider-range_pcgz5_stdm1_147.awsui_error_pcgz5_stdm1_171:not(#\9) {
+.awsui_slider-range_pcgz5_412ik_147.awsui_error_pcgz5_412ik_171:not(#\9) {
   background-color: var(--color-text-status-error-ofc4yr, #d13212);
 }
-.awsui_slider-range_pcgz5_stdm1_147.awsui_active_pcgz5_stdm1_174:not(#\9) {
+.awsui_slider-range_pcgz5_412ik_147.awsui_warning_pcgz5_412ik_174:not(#\9) {
+  background-color: var(--color-text-status-warning-azn00c, #906806);
+}
+.awsui_slider-range_pcgz5_412ik_147.awsui_active_pcgz5_412ik_177:not(#\9) {
   background-color: var(--color-background-slider-handle-active-qi7max, #0a4a74);
 }
-.awsui_slider-range_pcgz5_stdm1_147.awsui_error-active_pcgz5_stdm1_177:not(#\9) {
+.awsui_slider-range_pcgz5_412ik_147.awsui_error-active_pcgz5_412ik_180:not(#\9) {
   background-color: var(--color-background-slider-error-pressed-gejffm, #7c2718);
 }
-.awsui_slider-range_pcgz5_stdm1_147.awsui_disabled_pcgz5_stdm1_162:not(#\9) {
+.awsui_slider-range_pcgz5_412ik_147.awsui_warning-active_pcgz5_412ik_183:not(#\9) {
+  background-color: var(--color-background-slider-warning-pressed-5mq7vz, #906806);
+}
+.awsui_slider-range_pcgz5_412ik_147.awsui_disabled_pcgz5_412ik_162:not(#\9) {
   background-color: var(--color-background-control-disabled-dsn0t2, #d5dbdb);
 }
-.awsui_labels_pcgz5_stdm1_184:not(#\9) {
+.awsui_labels_pcgz5_412ik_190:not(#\9) {
   display: grid;
   grid-template-columns: 3fr repeat(calc((var(--awsui-slider-label-count-tkr9yl) - 2) / 2 + (var(--awsui-slider-label-count-tkr9yl) - 2) / 2 - 1), 2fr) 3fr;
   grid-auto-rows: 100%;
   padding-block-start: var(--space-m-kpg8id, 16px);
 }
-.awsui_labels-noref_pcgz5_stdm1_190:not(#\9) {
+.awsui_labels-noref_pcgz5_412ik_196:not(#\9) {
   grid-template-columns: 1fr 1fr;
 }
-.awsui_labels-reference_pcgz5_stdm1_193:not(#\9) {
+.awsui_labels-reference_pcgz5_412ik_199:not(#\9) {
   grid-column-start: var(--awsui-slider-reference-column-tkr9yl);
   grid-column-end: var(--awsui-slider-next-reference-column-tkr9yl);
   grid-row: 1;
   justify-self: center;
   text-align: center;
 }
-.awsui_labels-min_pcgz5_stdm1_200:not(#\9) {
+.awsui_labels-min_pcgz5_412ik_206:not(#\9) {
   grid-column: 1;
   grid-row: 1;
   grid-column-end: var(--awsui-slider-min-end-tkr9yl);
   margin-inline-start: calc(var(--space-m-kpg8id, 16px) / -2);
 }
-.awsui_labels-max_pcgz5_stdm1_206:not(#\9) {
+.awsui_labels-max_pcgz5_412ik_212:not(#\9) {
   text-align: end;
   justify-content: flex-end;
   grid-row: 1;
@@ -212,37 +218,37 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   grid-column-start: var(--awsui-slider-max-start-tkr9yl);
   margin-inline-end: calc(var(--space-m-kpg8id, 16px) / -2);
 }
-.awsui_labels-aria-description_pcgz5_stdm1_214:not(#\9) {
+.awsui_labels-aria-description_pcgz5_412ik_220:not(#\9) {
   display: none;
 }
 @media (max-width: 576px) {
-  .awsui_labels_pcgz5_stdm1_184:not(#\9) {
+  .awsui_labels_pcgz5_412ik_190:not(#\9) {
     grid-template-columns: 1fr 1fr;
   }
-  .awsui_labels-min_pcgz5_stdm1_200:not(#\9) {
+  .awsui_labels-min_pcgz5_412ik_206:not(#\9) {
     grid-column: 1;
   }
-  .awsui_labels-max_pcgz5_stdm1_206:not(#\9) {
+  .awsui_labels-max_pcgz5_412ik_212:not(#\9) {
     grid-column: 2;
   }
-  .awsui_labels_pcgz5_stdm1_184 > .awsui_labels-reference_pcgz5_stdm1_193:not(#\9) {
+  .awsui_labels_pcgz5_412ik_190 > .awsui_labels-reference_pcgz5_412ik_199:not(#\9) {
     display: none;
   }
 }
-.awsui_ticks_pcgz5_stdm1_232:not(#\9) {
+.awsui_ticks_pcgz5_412ik_238:not(#\9) {
   display: grid;
   grid-template-columns: repeat(var(--awsui-slider-tick-count-tkr9yl), 1fr);
   inline-size: calc(100% - var(--space-m-kpg8id, 16px));
   margin-inline: calc(var(--space-m-kpg8id, 16px) / 2);
 }
-.awsui_ticks-wrapper_pcgz5_stdm1_238:not(#\9) {
+.awsui_ticks-wrapper_pcgz5_412ik_244:not(#\9) {
   block-size: 0;
   display: flex;
   margin-inline: calc(var(--space-m-kpg8id, 16px) / -2);
 }
-.awsui_tick_pcgz5_stdm1_232:not(#\9) {
+.awsui_tick_pcgz5_412ik_238:not(#\9) {
   grid-row: 1;
   block-size: var(--space-xs-xf5ch3, 8px);
   inline-size: var(--space-xxxs-z28114, 2px);
@@ -251,26 +257,32 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   background: var(--color-background-slider-track-6pt3x9, #879596);
   inset-block-start: -4px;
 }
-.awsui_tick_pcgz5_stdm1_232.awsui_middle_pcgz5_stdm1_253:not(#\9):first-child, .awsui_tick_pcgz5_stdm1_232.awsui_middle_pcgz5_stdm1_253:not(#\9):last-child {
+.awsui_tick_pcgz5_412ik_238.awsui_middle_pcgz5_412ik_259:not(#\9):first-child, .awsui_tick_pcgz5_412ik_238.awsui_middle_pcgz5_412ik_259:not(#\9):last-child {
   visibility: hidden;
 }
-.awsui_tick_pcgz5_stdm1_232.awsui_filled_pcgz5_stdm1_256:not(#\9) {
+.awsui_tick_pcgz5_412ik_238.awsui_filled_pcgz5_412ik_262:not(#\9) {
   background: var(--color-background-slider-handle-default-nidjhe, #0073bb);
 }
-.awsui_tick_pcgz5_stdm1_232.awsui_active_pcgz5_stdm1_174:not(#\9) {
+.awsui_tick_pcgz5_412ik_238.awsui_active_pcgz5_412ik_177:not(#\9) {
   background: var(--color-background-slider-handle-active-qi7max, #0a4a74);
 }
-.awsui_tick_pcgz5_stdm1_232.awsui_error_pcgz5_stdm1_171:not(#\9) {
+.awsui_tick_pcgz5_412ik_238.awsui_error_pcgz5_412ik_171:not(#\9) {
   background: var(--color-text-status-error-ofc4yr, #d13212);
 }
-.awsui_tick_pcgz5_stdm1_232.awsui_error-active_pcgz5_stdm1_177:not(#\9) {
+.awsui_tick_pcgz5_412ik_238.awsui_warning_pcgz5_412ik_174:not(#\9) {
+  background: var(--color-text-status-warning-azn00c, #906806);
+}
+.awsui_tick_pcgz5_412ik_238.awsui_error-active_pcgz5_412ik_180:not(#\9) {
   background-color: var(--color-background-slider-error-pressed-gejffm, #7c2718);
 }
-.awsui_tick_pcgz5_stdm1_232.awsui_disabled_pcgz5_stdm1_162:not(#\9) {
+.awsui_tick_pcgz5_412ik_238.awsui_warning-active_pcgz5_412ik_183:not(#\9) {
+  background-color: var(--color-background-slider-warning-pressed-5mq7vz, #906806);
+}
+.awsui_tick_pcgz5_412ik_238.awsui_disabled_pcgz5_412ik_162:not(#\9) {
   background: var(--color-background-control-disabled-dsn0t2, #d5dbdb);
 }
-.awsui_tooltip-thumb_pcgz5_stdm1_272:not(#\9) {
+.awsui_tooltip-thumb_pcgz5_412ik_284:not(#\9) {
   position: absolute;
   inline-size: var(--space-xxl-pd3205, 32px);
   block-size: var(--space-xxl-pd3205, 32px);
@@ -278,7 +290,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   inset-inline-start: var(--awsui-slider-tooltip-position-tkr9yl);
 }
-.awsui_thumb_pcgz5_stdm1_280:not(#\9) {
+.awsui_thumb_pcgz5_412ik_292:not(#\9) {
   background: transparent;
   -webkit-appearance: none;
           appearance: none;
@@ -291,16 +303,16 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   cursor: pointer;
   touch-action: none;
 }
-.awsui_thumb_pcgz5_stdm1_280.awsui_disabled_pcgz5_stdm1_162:not(#\9) {
+.awsui_thumb_pcgz5_412ik_292.awsui_disabled_pcgz5_412ik_162:not(#\9) {
   cursor: default;
 }
-.awsui_thumb_pcgz5_stdm1_280.awsui_min_pcgz5_stdm1_295:not(#\9) {
+.awsui_thumb_pcgz5_412ik_292.awsui_min_pcgz5_412ik_307:not(#\9) {
   margin-inline-start: calc(-1px + var(--space-m-kpg8id, 16px) / -2);
 }
-.awsui_thumb_pcgz5_stdm1_280.awsui_max_pcgz5_stdm1_298:not(#\9) {
+.awsui_thumb_pcgz5_412ik_292.awsui_max_pcgz5_412ik_310:not(#\9) {
   margin-inline-start: calc(1px + var(--space-m-kpg8id, 16px) / -2);
 }
-.awsui_thumb_pcgz5_stdm1_280:not(#\9)::-webkit-slider-thumb {
+.awsui_thumb_pcgz5_412ik_292:not(#\9)::-webkit-slider-thumb {
   -webkit-appearance: none;
           appearance: none;
   appearance: none;
@@ -319,7 +331,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   pointer-events: all;
   position: relative;
 }
-.awsui_thumb_pcgz5_stdm1_280:not(#\9)::-moz-range-thumb {
+.awsui_thumb_pcgz5_412ik_292:not(#\9)::-moz-range-thumb {
   appearance: none;
   appearance: none;
   background: var(--color-background-slider-handle-default-nidjhe, #0073bb);
@@ -337,13 +349,13 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   pointer-events: all;
   position: relative;
 }
-.awsui_thumb_pcgz5_stdm1_280:not(#\9):hover::-webkit-slider-thumb {
+.awsui_thumb_pcgz5_412ik_292:not(#\9):hover::-webkit-slider-thumb {
   box-shadow: 0px 0 0 2px var(--color-background-slider-handle-ring-nn99ak, #ffffff), 0 0 0 4px var(--color-background-slider-handle-default-nidjhe, #0073bb);
 }
-.awsui_thumb_pcgz5_stdm1_280:not(#\9):hover::-moz-range-thumb {
+.awsui_thumb_pcgz5_412ik_292:not(#\9):hover::-moz-range-thumb {
   box-shadow: 0px 0 0 2px var(--color-background-slider-handle-ring-nn99ak, #ffffff), 0 0 0 4px var(--color-background-slider-handle-default-nidjhe, #0073bb);
 }
-.awsui_thumb_pcgz5_stdm1_280:not(#\9):focus::-webkit-slider-thumb, .awsui_thumb_pcgz5_stdm1_280:not(#\9):active::-webkit-slider-thumb {
+.awsui_thumb_pcgz5_412ik_292:not(#\9):focus::-webkit-slider-thumb, .awsui_thumb_pcgz5_412ik_292:not(#\9):active::-webkit-slider-thumb {
   block-size: 20px;
   inline-size: 20px;
   box-shadow: 0px 0 0 2px var(--color-background-slider-handle-ring-nn99ak, #ffffff), 0 0 0 4px var(--color-background-slider-handle-active-qi7max, #0a4a74);
@@ -352,7 +364,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-block-width: 2px;
   border-inline-width: 2px;
 }
-.awsui_thumb_pcgz5_stdm1_280:not(#\9):focus::-moz-range-thumb, .awsui_thumb_pcgz5_stdm1_280:not(#\9):active::-moz-range-thumb {
+.awsui_thumb_pcgz5_412ik_292:not(#\9):focus::-moz-range-thumb, .awsui_thumb_pcgz5_412ik_292:not(#\9):active::-moz-range-thumb {
   block-size: 20px;
   inline-size: 20px;
   box-shadow: 0px 0 0 2px var(--color-background-slider-handle-ring-nn99ak, #ffffff), 0 0 0 4px var(--color-background-slider-handle-active-qi7max, #0a4a74);
@@ -362,30 +374,30 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-inline-width: 2px;
 }
-.awsui_error_pcgz5_stdm1_171:not(#\9)::-webkit-slider-thumb {
+.awsui_error_pcgz5_412ik_171:not(#\9)::-webkit-slider-thumb {
   background-color: var(--color-text-status-error-ofc4yr, #d13212);
   border-color: var(--color-text-status-error-ofc4yr, #d13212);
 }
-.awsui_error_pcgz5_stdm1_171:not(#\9)::-moz-range-thumb {
+.awsui_error_pcgz5_412ik_171:not(#\9)::-moz-range-thumb {
   background-color: var(--color-text-status-error-ofc4yr, #d13212);
   border-color: var(--color-text-status-error-ofc4yr, #d13212);
 }
-.awsui_error_pcgz5_stdm1_171:not(#\9):hover::-webkit-slider-thumb {
+.awsui_error_pcgz5_412ik_171:not(#\9):hover::-webkit-slider-thumb {
   background-color: var(--color-text-status-error-ofc4yr, #d13212);
   box-shadow: 0px 0 0 2px var(--color-background-slider-handle-ring-nn99ak, #ffffff), 0 0 0 4px var(--color-text-status-error-ofc4yr, #d13212);
 }
-.awsui_error_pcgz5_stdm1_171:not(#\9):hover::-moz-range-thumb {
+.awsui_error_pcgz5_412ik_171:not(#\9):hover::-moz-range-thumb {
   background-color: var(--color-text-status-error-ofc4yr, #d13212);
   box-shadow: 0px 0 0 2px var(--color-background-slider-handle-ring-nn99ak, #ffffff), 0 0 0 4px var(--color-text-status-error-ofc4yr, #d13212);
 }
-.awsui_error_pcgz5_stdm1_171:not(#\9):focus::-webkit-slider-thumb, .awsui_error_pcgz5_stdm1_171:not(#\9):active::-webkit-slider-thumb {
+.awsui_error_pcgz5_412ik_171:not(#\9):focus::-webkit-slider-thumb, .awsui_error_pcgz5_412ik_171:not(#\9):active::-webkit-slider-thumb {
   background-color: var(--color-background-slider-error-pressed-gejffm, #7c2718);
   border-block-width: 2px;
   border-inline-width: 2px;
   border-color: var(--color-background-slider-error-pressed-gejffm, #7c2718);
   box-shadow: 0px 0 0 2px var(--color-background-slider-handle-ring-nn99ak, #ffffff), 0 0 0 4px var(--color-background-slider-error-pressed-gejffm, #7c2718);
 }
-.awsui_error_pcgz5_stdm1_171:not(#\9):focus::-moz-range-thumb, .awsui_error_pcgz5_stdm1_171:not(#\9):active::-moz-range-thumb {
+.awsui_error_pcgz5_412ik_171:not(#\9):focus::-moz-range-thumb, .awsui_error_pcgz5_412ik_171:not(#\9):active::-moz-range-thumb {
   background-color: var(--color-background-slider-error-pressed-gejffm, #7c2718);
   border-block-width: 2px;
   border-inline-width: 2px;
@@ -393,17 +405,48 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   box-shadow: 0px 0 0 2px var(--color-background-slider-handle-ring-nn99ak, #ffffff), 0 0 0 4px var(--color-background-slider-error-pressed-gejffm, #7c2718);
 }
-.awsui_disabled_pcgz5_stdm1_162:not(#\9)::-webkit-slider-thumb,
-.awsui_disabled_pcgz5_stdm1_162:not(#\9):hover::-webkit-slider-thumb,
-.awsui_disabled_pcgz5_stdm1_162:not(#\9):active::-webkit-slider-thumb {
+.awsui_warning_pcgz5_412ik_174:not(#\9)::-webkit-slider-thumb {
+  background-color: var(--color-text-status-warning-azn00c, #906806);
+  border-color: var(--color-text-status-warning-azn00c, #906806);
+}
+.awsui_warning_pcgz5_412ik_174:not(#\9)::-moz-range-thumb {
+  background-color: var(--color-text-status-warning-azn00c, #906806);
+  border-color: var(--color-text-status-warning-azn00c, #906806);
+}
+.awsui_warning_pcgz5_412ik_174:not(#\9):hover::-webkit-slider-thumb {
+  background-color: var(--color-text-status-warning-azn00c, #906806);
+  box-shadow: 0px 0 0 2px var(--color-background-slider-handle-ring-nn99ak, #ffffff), 0 0 0 4px var(--color-text-status-warning-azn00c, #906806);
+}
+.awsui_warning_pcgz5_412ik_174:not(#\9):hover::-moz-range-thumb {
+  background-color: var(--color-text-status-warning-azn00c, #906806);
+  box-shadow: 0px 0 0 2px var(--color-background-slider-handle-ring-nn99ak, #ffffff), 0 0 0 4px var(--color-text-status-warning-azn00c, #906806);
+}
+.awsui_warning_pcgz5_412ik_174:not(#\9):focus::-webkit-slider-thumb, .awsui_warning_pcgz5_412ik_174:not(#\9):active::-webkit-slider-thumb {
+  background-color: var(--color-background-slider-warning-pressed-5mq7vz, #906806);
+  border-block-width: 2px;
+  border-inline-width: 2px;
+  border-color: var(--color-background-slider-warning-pressed-5mq7vz, #906806);
+  box-shadow: 0px 0 0 2px var(--color-background-slider-handle-ring-nn99ak, #ffffff), 0 0 0 4px var(--color-background-slider-warning-pressed-5mq7vz, #906806);
+}
+.awsui_warning_pcgz5_412ik_174:not(#\9):focus::-moz-range-thumb, .awsui_warning_pcgz5_412ik_174:not(#\9):active::-moz-range-thumb {
+  background-color: var(--color-background-slider-warning-pressed-5mq7vz, #906806);
+  border-block-width: 2px;
+  border-inline-width: 2px;
+  border-color: var(--color-background-slider-warning-pressed-5mq7vz, #906806);
+  box-shadow: 0px 0 0 2px var(--color-background-slider-handle-ring-nn99ak, #ffffff), 0 0 0 4px var(--color-background-slider-warning-pressed-5mq7vz, #906806);
+}
+.awsui_disabled_pcgz5_412ik_162:not(#\9)::-webkit-slider-thumb,
+.awsui_disabled_pcgz5_412ik_162:not(#\9):hover::-webkit-slider-thumb,
+.awsui_disabled_pcgz5_412ik_162:not(#\9):active::-webkit-slider-thumb {
   background-color: var(--color-background-control-disabled-dsn0t2, #d5dbdb);
   border-color: var(--color-background-control-disabled-dsn0t2, #d5dbdb);
   box-shadow: none;
   pointer-events: none;
 }
-.awsui_disabled_pcgz5_stdm1_162:not(#\9)::-moz-range-thumb,
-.awsui_disabled_pcgz5_stdm1_162:not(#\9):hover::-moz-range-thumb,
-.awsui_disabled_pcgz5_stdm1_162:not(#\9):active::-moz-range-thumb {
+.awsui_disabled_pcgz5_412ik_162:not(#\9)::-moz-range-thumb,
+.awsui_disabled_pcgz5_412ik_162:not(#\9):hover::-moz-range-thumb,
+.awsui_disabled_pcgz5_412ik_162:not(#\9):active::-moz-range-thumb {
   background-color: var(--color-background-control-disabled-dsn0t2, #d5dbdb);
   border-color: var(--color-background-control-disabled-dsn0t2, #d5dbdb);
   box-shadow: none;

package/lib/internal/template/slider/styles.selectors.js CHANGED Viewed

@@ -2,28 +2,30 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_pcgz5_stdm1_103",
-  "slider": "awsui_slider_pcgz5_stdm1_143",
-  "slider-track": "awsui_slider-track_pcgz5_stdm1_147",
-  "slider-range": "awsui_slider-range_pcgz5_stdm1_147",
-  "disabled": "awsui_disabled_pcgz5_stdm1_162",
-  "error": "awsui_error_pcgz5_stdm1_171",
-  "active": "awsui_active_pcgz5_stdm1_174",
-  "error-active": "awsui_error-active_pcgz5_stdm1_177",
-  "labels": "awsui_labels_pcgz5_stdm1_184",
-  "labels-noref": "awsui_labels-noref_pcgz5_stdm1_190",
-  "labels-reference": "awsui_labels-reference_pcgz5_stdm1_193",
-  "labels-min": "awsui_labels-min_pcgz5_stdm1_200",
-  "labels-max": "awsui_labels-max_pcgz5_stdm1_206",
-  "labels-aria-description": "awsui_labels-aria-description_pcgz5_stdm1_214",
-  "ticks": "awsui_ticks_pcgz5_stdm1_232",
-  "ticks-wrapper": "awsui_ticks-wrapper_pcgz5_stdm1_238",
-  "tick": "awsui_tick_pcgz5_stdm1_232",
-  "middle": "awsui_middle_pcgz5_stdm1_253",
-  "filled": "awsui_filled_pcgz5_stdm1_256",
-  "tooltip-thumb": "awsui_tooltip-thumb_pcgz5_stdm1_272",
-  "thumb": "awsui_thumb_pcgz5_stdm1_280",
-  "min": "awsui_min_pcgz5_stdm1_295",
-  "max": "awsui_max_pcgz5_stdm1_298"
+  "root": "awsui_root_pcgz5_412ik_103",
+  "slider": "awsui_slider_pcgz5_412ik_143",
+  "slider-track": "awsui_slider-track_pcgz5_412ik_147",
+  "slider-range": "awsui_slider-range_pcgz5_412ik_147",
+  "disabled": "awsui_disabled_pcgz5_412ik_162",
+  "error": "awsui_error_pcgz5_412ik_171",
+  "warning": "awsui_warning_pcgz5_412ik_174",
+  "active": "awsui_active_pcgz5_412ik_177",
+  "error-active": "awsui_error-active_pcgz5_412ik_180",
+  "warning-active": "awsui_warning-active_pcgz5_412ik_183",
+  "labels": "awsui_labels_pcgz5_412ik_190",
+  "labels-noref": "awsui_labels-noref_pcgz5_412ik_196",
+  "labels-reference": "awsui_labels-reference_pcgz5_412ik_199",
+  "labels-min": "awsui_labels-min_pcgz5_412ik_206",
+  "labels-max": "awsui_labels-max_pcgz5_412ik_212",
+  "labels-aria-description": "awsui_labels-aria-description_pcgz5_412ik_220",
+  "ticks": "awsui_ticks_pcgz5_412ik_238",
+  "ticks-wrapper": "awsui_ticks-wrapper_pcgz5_412ik_244",
+  "tick": "awsui_tick_pcgz5_412ik_238",
+  "middle": "awsui_middle_pcgz5_412ik_259",
+  "filled": "awsui_filled_pcgz5_412ik_262",
+  "tooltip-thumb": "awsui_tooltip-thumb_pcgz5_412ik_284",
+  "thumb": "awsui_thumb_pcgz5_412ik_292",
+  "min": "awsui_min_pcgz5_412ik_307",
+  "max": "awsui_max_pcgz5_412ik_310"
 };

package/lib/internal/template/slider/tick-marks.d.ts CHANGED Viewed

@@ -4,6 +4,7 @@ export interface SliderTicksProps {
     value: number;
     isActive: boolean;
     invalid?: boolean;
+    warning?: boolean;
     disabled?: boolean;
     min: number;
     max: number;

package/lib/internal/template/slider/tick-marks.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tick-marks.d.ts","sourceRoot":"","sources":["../../../src/slider/tick-marks.tsx"],"names":[],"mappings":";AAQA,MAAM,WAAW,gBAAgB;IAC/B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,mBAAoB,SAAQ,gBAAgB;IAC3D,IAAI,EAAE,KAAK,GAAG,KAAK,GAAG,MAAM,CAAC;CAC9B;~~AA6BD~~,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,KAAK,EAAE,gBAAgB,eAmB9D"}
1	+ {"version":3,"file":"tick-marks.d.ts","sourceRoot":"","sources":["../../../src/slider/tick-marks.tsx"],"names":[],"mappings":";AAQA,MAAM,WAAW,gBAAgB;IAC/B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,mBAAoB,SAAQ,gBAAgB;IAC3D,IAAI,EAAE,KAAK,GAAG,KAAK,GAAG,MAAM,CAAC;CAC9B;AAiCD,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,KAAK,EAAE,gBAAgB,eAmB9D"}

package/lib/internal/template/slider/tick-marks.js CHANGED Viewed

@@ -6,7 +6,8 @@ import customCssProps from '../internal/generated/custom-css-properties/index.js
 import styles from './styles.css.js';
 import { getStepArray } from './utils.js';
 function TickMark(props) {
-    const { hideFillLine, value, isActive, invalid, disabled, type, min, max, step } = props;
+    const { hideFillLine, value, isActive, invalid, warning, disabled, type, min, max, step } = props;
+    const showWarning = warning && !invalid;
     const getType = () => {
         if (type === 'min') {
             return min;
@@ -20,7 +21,9 @@ function TickMark(props) {
             [styles.filled]: !hideFillLine && value > getType(),
             [styles.active]: !hideFillLine && isActive && value > getType(),
             [styles.error]: invalid && !hideFillLine && value > getType(),
+            [styles.warning]: showWarning && !hideFillLine && value > getType(),
             [styles['error-active']]: invalid && isActive && !hideFillLine && value > getType(),
+            [styles['warning-active']]: showWarning && isActive && !hideFillLine && value > getType(),
             [styles.disabled]: disabled,
             [styles.middle]: type === 'step',
         }) }));

package/lib/internal/template/slider/tick-marks.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tick-marks.js","sourceRoot":"","sources":["../../../src/slider/tick-marks.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,cAAc,MAAM,sDAAsD,CAAC;AAClF,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;~~AAiB1C~~,SAAS,QAAQ,CAAC,KAA0B;IAC1C,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;~~IAEzF~~,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,IAAI,IAAI,KAAK,KAAK,EAAE;YAClB,OAAO,GAAG,CAAC;SACZ;QACD,IAAI,IAAI,KAAK,KAAK,EAAE;YAClB,OAAO,GAAG,CAAC;SACZ;QACD,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;IAEF,OAAO,CACL,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;YAC3B,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,YAAY,IAAI,KAAK,GAAG,OAAO,EAAE;YACnD,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,YAAY,IAAI,QAAQ,IAAI,KAAK,GAAG,OAAO,EAAE;YAC/D,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,OAAO,IAAI,CAAC,YAAY,IAAI,KAAK,GAAG,OAAO,EAAE;YAC7D,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,EAAE,OAAO,IAAI,QAAQ,IAAI,CAAC,YAAY,IAAI,KAAK,GAAG,OAAO,EAAE;YACnF,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ;YAC3B,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,IAAI,KAAK,MAAM;SACjC,CAAC,GACF,CACH,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,KAAuB;IAC7D,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IAEjC,OAAO,CACL,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC;QAC3C,oBAAC,QAAQ,oBAAK,KAAK,IAAE,IAAI,EAAC,KAAK,IAAG;QAClC,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,EAC7B,KAAK,EAAE;gBACL,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC;aACjE,IAEA,YAAY,CAAC,IAAI,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CACnD,oBAAC,QAAQ,oBAAK,KAAK,IAAE,IAAI,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,QAAQ,KAAK,EAAE,IAAI,CACtE,CAAC,CACE;QACN,oBAAC,QAAQ,oBAAK,KAAK,IAAE,IAAI,EAAC,KAAK,IAAG,CAC9B,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\nimport customCssProps from '../internal/generated/custom-css-properties/index.js';\nimport styles from './styles.css.js';\nimport { getStepArray } from './utils.js';\n\nexport interface SliderTicksProps {\n hideFillLine?: boolean;\n value: number;\n isActive: boolean;\n invalid?: boolean;\n disabled?: boolean;\n min: number;\n max: number;\n step: number;\n}\n\nexport interface SliderTickMarkProps extends SliderTicksProps {\n type: 'min' \| 'max' \| 'step';\n}\n\nfunction TickMark(props: SliderTickMarkProps) {\n const { hideFillLine, value, isActive, invalid, disabled, type, min, max, step } = props;\n\n const getType = () => {\n if (type === 'min') {\n return min;\n }\n if (type === 'max') {\n return max;\n }\n return step;\n };\n\n return (\n <div\n className={clsx(styles.tick, {\n [styles.filled]: !hideFillLine && value > getType(),\n [styles.active]: !hideFillLine && isActive && value > getType(),\n [styles.error]: invalid && !hideFillLine && value > getType(),\n [styles['error-active']]: invalid && isActive && !hideFillLine && value > getType(),\n [styles.disabled]: disabled,\n [styles.middle]: type === 'step',\n })}\n />\n );\n}\n\nexport default function SliderTickMarks(props: SliderTicksProps) {\n const { min, max, step } = props;\n\n return (\n <div className={clsx(styles['ticks-wrapper'])}>\n <TickMark {...props} type=\"min\" />\n <div\n className={clsx(styles.ticks)}\n style={{\n [customCssProps.sliderTickCount]: Math.round((max - min) / step),\n }}\n >\n {getStepArray(step, [min, max]).map((step, index) => (\n <TickMark {...props} type=\"step\" step={step} key={`step-${index}`} />\n ))}\n </div>\n <TickMark {...props} type=\"max\" />\n </div>\n );\n}\n"]}
1	+ {"version":3,"file":"tick-marks.js","sourceRoot":"","sources":["../../../src/slider/tick-marks.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,cAAc,MAAM,sDAAsD,CAAC;AAClF,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAkB1C,SAAS,QAAQ,CAAC,KAA0B;IAC1C,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IAElG,MAAM,WAAW,GAAG,OAAO,IAAI,CAAC,OAAO,CAAC;IAExC,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,IAAI,IAAI,KAAK,KAAK,EAAE;YAClB,OAAO,GAAG,CAAC;SACZ;QACD,IAAI,IAAI,KAAK,KAAK,EAAE;YAClB,OAAO,GAAG,CAAC;SACZ;QACD,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;IAEF,OAAO,CACL,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;YAC3B,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,YAAY,IAAI,KAAK,GAAG,OAAO,EAAE;YACnD,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,YAAY,IAAI,QAAQ,IAAI,KAAK,GAAG,OAAO,EAAE;YAC/D,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,OAAO,IAAI,CAAC,YAAY,IAAI,KAAK,GAAG,OAAO,EAAE;YAC7D,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,WAAW,IAAI,CAAC,YAAY,IAAI,KAAK,GAAG,OAAO,EAAE;YACnE,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,EAAE,OAAO,IAAI,QAAQ,IAAI,CAAC,YAAY,IAAI,KAAK,GAAG,OAAO,EAAE;YACnF,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,EAAE,WAAW,IAAI,QAAQ,IAAI,CAAC,YAAY,IAAI,KAAK,GAAG,OAAO,EAAE;YACzF,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ;YAC3B,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,IAAI,KAAK,MAAM;SACjC,CAAC,GACF,CACH,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,KAAuB;IAC7D,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IAEjC,OAAO,CACL,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC;QAC3C,oBAAC,QAAQ,oBAAK,KAAK,IAAE,IAAI,EAAC,KAAK,IAAG;QAClC,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,EAC7B,KAAK,EAAE;gBACL,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC;aACjE,IAEA,YAAY,CAAC,IAAI,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CACnD,oBAAC,QAAQ,oBAAK,KAAK,IAAE,IAAI,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,QAAQ,KAAK,EAAE,IAAI,CACtE,CAAC,CACE;QACN,oBAAC,QAAQ,oBAAK,KAAK,IAAE,IAAI,EAAC,KAAK,IAAG,CAC9B,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\nimport customCssProps from '../internal/generated/custom-css-properties/index.js';\nimport styles from './styles.css.js';\nimport { getStepArray } from './utils.js';\n\nexport interface SliderTicksProps {\n hideFillLine?: boolean;\n value: number;\n isActive: boolean;\n invalid?: boolean;\n warning?: boolean;\n disabled?: boolean;\n min: number;\n max: number;\n step: number;\n}\n\nexport interface SliderTickMarkProps extends SliderTicksProps {\n type: 'min' \| 'max' \| 'step';\n}\n\nfunction TickMark(props: SliderTickMarkProps) {\n const { hideFillLine, value, isActive, invalid, warning, disabled, type, min, max, step } = props;\n\n const showWarning = warning && !invalid;\n\n const getType = () => {\n if (type === 'min') {\n return min;\n }\n if (type === 'max') {\n return max;\n }\n return step;\n };\n\n return (\n <div\n className={clsx(styles.tick, {\n [styles.filled]: !hideFillLine && value > getType(),\n [styles.active]: !hideFillLine && isActive && value > getType(),\n [styles.error]: invalid && !hideFillLine && value > getType(),\n [styles.warning]: showWarning && !hideFillLine && value > getType(),\n [styles['error-active']]: invalid && isActive && !hideFillLine && value > getType(),\n [styles['warning-active']]: showWarning && isActive && !hideFillLine && value > getType(),\n [styles.disabled]: disabled,\n [styles.middle]: type === 'step',\n })}\n />\n );\n}\n\nexport default function SliderTickMarks(props: SliderTicksProps) {\n const { min, max, step } = props;\n\n return (\n <div className={clsx(styles['ticks-wrapper'])}>\n <TickMark {...props} type=\"min\" />\n <div\n className={clsx(styles.ticks)}\n style={{\n [customCssProps.sliderTickCount]: Math.round((max - min) / step),\n }}\n >\n {getStepArray(step, [min, max]).map((step, index) => (\n <TickMark {...props} type=\"step\" step={step} key={`step-${index}`} />\n ))}\n </div>\n <TickMark {...props} type=\"max\" />\n </div>\n );\n}\n"]}

package/lib/internal/template/split-panel/implementation.d.ts CHANGED Viewed

@@ -2,4 +2,5 @@ import React from 'react';
 import { SplitPanelProps } from './interfaces';
 export { SplitPanelProps };
 export declare const SplitPanelImplementation: React.ForwardRefExoticComponent<SplitPanelProps & React.RefAttributes<HTMLElement>>;
+export declare const createWidgetizedSplitPanel: (Loader?: React.ForwardRefExoticComponent<SplitPanelProps & React.RefAttributes<HTMLElement>> | undefined) => React.ForwardRefExoticComponent<SplitPanelProps & React.RefAttributes<HTMLElement>>;
 //# sourceMappingURL=implementation.d.ts.map