@cloudscape-design/components-themeable 3.0.1181 → 3.0.1183

package/lib/internal/template/segmented-control/styles.selectors.js

@@ -2,21 +2,21 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "segment": "awsui_segment_8cbea_1f63t_161",
-  "refresh": "awsui_refresh_8cbea_1f63t_188",
-  "disabled": "awsui_disabled_8cbea_1f63t_194",
-  "selected": "awsui_selected_8cbea_1f63t_251",
-  "icon": "awsui_icon_8cbea_1f63t_261",
-  "with-text": "awsui_with-text_8cbea_1f63t_265",
-  "with-no-text": "awsui_with-no-text_8cbea_1f63t_271",
-  "root": "awsui_root_8cbea_1f63t_276",
-  "segment-part": "awsui_segment-part_8cbea_1f63t_308",
-  "select": "awsui_select_8cbea_1f63t_251",
-  "segment-count-2": "awsui_segment-count-2_8cbea_1f63t_343",
-  "segment-count-3": "awsui_segment-count-3_8cbea_1f63t_347",
-  "segment-count-4": "awsui_segment-count-4_8cbea_1f63t_351",
-  "segment-count-5": "awsui_segment-count-5_8cbea_1f63t_355",
-  "segment-count-6": "awsui_segment-count-6_8cbea_1f63t_359",
-  "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_8cbea_1f63t_363"
+  "segment": "awsui_segment_8cbea_1av64_161",
+  "refresh": "awsui_refresh_8cbea_1av64_188",
+  "disabled": "awsui_disabled_8cbea_1av64_194",
+  "selected": "awsui_selected_8cbea_1av64_251",
+  "icon": "awsui_icon_8cbea_1av64_261",
+  "with-text": "awsui_with-text_8cbea_1av64_265",
+  "with-no-text": "awsui_with-no-text_8cbea_1av64_271",
+  "root": "awsui_root_8cbea_1av64_276",
+  "segment-part": "awsui_segment-part_8cbea_1av64_308",
+  "select": "awsui_select_8cbea_1av64_251",
+  "segment-count-2": "awsui_segment-count-2_8cbea_1av64_343",
+  "segment-count-3": "awsui_segment-count-3_8cbea_1av64_347",
+  "segment-count-4": "awsui_segment-count-4_8cbea_1av64_351",
+  "segment-count-5": "awsui_segment-count-5_8cbea_1av64_355",
+  "segment-count-6": "awsui_segment-count-6_8cbea_1av64_359",
+  "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_8cbea_1av64_363"
 };
   

package/lib/internal/template/slider/index.d.ts

@@ -1,4 +1,4 @@
 import { SliderProps } from './interfaces';
 export { SliderProps };
-export default function Slider({ tickMarks, hideFillLine, ...props }: SliderProps): JSX.Element;
+export default function Slider({ tickMarks, hideFillLine, style, ...props }: SliderProps): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/lib/internal/template/slider/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/slider/index.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAG3C,OAAO,EAAE,WAAW,EAAE,CAAC;AAEvB,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,eAKhF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/slider/index.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAG3C,OAAO,EAAE,WAAW,EAAE,CAAC;AAEvB,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,eAavF"}

package/lib/internal/template/slider/index.js

@@ -5,11 +5,11 @@ import React from 'react';
 import useBaseComponent from '../internal/hooks/use-base-component';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
 import InternalSlider from './internal';
-export default function Slider({ tickMarks, hideFillLine, ...props }) {
+export default function Slider({ tickMarks, hideFillLine, style, ...props }) {
     const baseComponentProps = useBaseComponent('Slider', {
         props: { tickMarks, hideFillLine, readOnly: props.readOnly },
     });
-    return React.createElement(InternalSlider, { tickMarks: tickMarks, hideFillLine: hideFillLine, ...props, ...baseComponentProps });
+    return (React.createElement(InternalSlider, { tickMarks: tickMarks, hideFillLine: hideFillLine, style: style, ...props, ...baseComponentProps }));
 }
 applyDisplayName(Slider, 'Slider');
 //# sourceMappingURL=index.js.map

package/lib/internal/template/slider/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/slider/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,YAAY,CAAC;AACb,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,OAAO,cAAc,MAAM,YAAY,CAAC;AAIxC,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,GAAG,KAAK,EAAe;IAC/E,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,QAAQ,EAAE;QACpD,KAAK,EAAE,EAAE,SAAS,EAAE,YAAY,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE;KAC7D,CAAC,CAAC;IACH,OAAO,oBAAC,cAAc,IAAC,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,YAAY,KAAM,KAAK,KAAM,kBAAkB,GAAI,CAAC;AACjH,CAAC;AACD,gBAAgB,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n'use client';\nimport React from 'react';\n\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { SliderProps } from './interfaces';\nimport InternalSlider from './internal';\n\nexport { SliderProps };\n\nexport default function Slider({ tickMarks, hideFillLine, ...props }: SliderProps) {\n  const baseComponentProps = useBaseComponent('Slider', {\n    props: { tickMarks, hideFillLine, readOnly: props.readOnly },\n  });\n  return <InternalSlider tickMarks={tickMarks} hideFillLine={hideFillLine} {...props} {...baseComponentProps} />;\n}\napplyDisplayName(Slider, 'Slider');\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/slider/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,YAAY,CAAC;AACb,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,OAAO,cAAc,MAAM,YAAY,CAAC;AAIxC,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,KAAK,EAAE,GAAG,KAAK,EAAe;IACtF,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,QAAQ,EAAE;QACpD,KAAK,EAAE,EAAE,SAAS,EAAE,YAAY,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE;KAC7D,CAAC,CAAC;IACH,OAAO,CACL,oBAAC,cAAc,IACb,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,KAAK,KACR,KAAK,KACL,kBAAkB,GACtB,CACH,CAAC;AACJ,CAAC;AACD,gBAAgB,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n'use client';\nimport React from 'react';\n\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { SliderProps } from './interfaces';\nimport InternalSlider from './internal';\n\nexport { SliderProps };\n\nexport default function Slider({ tickMarks, hideFillLine, style, ...props }: SliderProps) {\n  const baseComponentProps = useBaseComponent('Slider', {\n    props: { tickMarks, hideFillLine, readOnly: props.readOnly },\n  });\n  return (\n    <InternalSlider\n      tickMarks={tickMarks}\n      hideFillLine={hideFillLine}\n      style={style}\n      {...props}\n      {...baseComponentProps}\n    />\n  );\n}\napplyDisplayName(Slider, 'Slider');\n"]}

package/lib/internal/template/slider/interfaces.d.ts

@@ -66,6 +66,10 @@ export interface SliderProps extends BaseComponentProps, FormFieldValidationCont
      * being included in a form submission. A read-only control is still focusable.
      */
     readOnly?: boolean;
+    /**
+     * @awsuiSystem core
+     */
+    style?: SliderProps.Style;
 }
 export declare namespace SliderProps {
     interface ChangeDetail {
@@ -77,5 +81,24 @@ export declare namespace SliderProps {
          */
         valueTextRange: (previousValue: string, value: number, nextValue: string) => string;
     }
+    interface Style {
+        track?: {
+            backgroundColor?: string;
+        };
+        range?: {
+            backgroundColor?: {
+                default?: string;
+                active?: string;
+            };
+        };
+        handle?: {
+            backgroundColor?: {
+                default?: string;
+                hover?: string;
+                active?: string;
+            };
+            borderRadius?: string;
+        };
+    }
 }
 //# sourceMappingURL=interfaces.d.ts.map

package/lib/internal/template/slider/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/slider/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,+BAA+B,EAAE,MAAM,wCAAwC,CAAC;AACzF,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,MAAM,WAAW,WAAY,SAAQ,kBAAkB,EAAE,+BAA+B;IACtF;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAE3C;;;OAGG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;IAE/D;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,eAAe,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAExC;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC;IAEtC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,yBAAiB,WAAW,CAAC;IAC3B,UAAiB,YAAY;QAC3B,KAAK,EAAE,MAAM,CAAC;KACf;IACD,UAAiB,WAAW;QAC1B;;WAEG;QACH,cAAc,EAAE,CAAC,aAAa,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;KACrF;CACF"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/slider/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,+BAA+B,EAAE,MAAM,wCAAwC,CAAC;AACzF,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,MAAM,WAAW,WAAY,SAAQ,kBAAkB,EAAE,+BAA+B;IACtF;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAE3C;;;OAGG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;IAE/D;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,eAAe,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAExC;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC;IAEtC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC,KAAK,CAAC;CAC3B;AAED,yBAAiB,WAAW,CAAC;IAC3B,UAAiB,YAAY;QAC3B,KAAK,EAAE,MAAM,CAAC;KACf;IACD,UAAiB,WAAW;QAC1B;;WAEG;QACH,cAAc,EAAE,CAAC,aAAa,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;KACrF;IAED,UAAiB,KAAK;QACpB,KAAK,CAAC,EAAE;YACN,eAAe,CAAC,EAAE,MAAM,CAAC;SAC1B,CAAC;QACF,KAAK,CAAC,EAAE;YACN,eAAe,CAAC,EAAE;gBAChB,OAAO,CAAC,EAAE,MAAM,CAAC;gBACjB,MAAM,CAAC,EAAE,MAAM,CAAC;aACjB,CAAC;SACH,CAAC;QACF,MAAM,CAAC,EAAE;YACP,eAAe,CAAC,EAAE;gBAChB,OAAO,CAAC,EAAE,MAAM,CAAC;gBACjB,KAAK,CAAC,EAAE,MAAM,CAAC;gBACf,MAAM,CAAC,EAAE,MAAM,CAAC;aACjB,CAAC;YACF,YAAY,CAAC,EAAE,MAAM,CAAC;SACvB,CAAC;KACH;CACF"}

package/lib/internal/template/slider/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/slider/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\nimport { FormFieldValidationControlProps } from '../internal/context/form-field-context';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface SliderProps extends BaseComponentProps, FormFieldValidationControlProps {\n  /**\n   * Indicates the current value.\n   */\n  value?: number;\n\n  /**\n   * Indicates the minimum value.\n   */\n  min: number;\n\n  /**\n   * Indicates the maximum value.\n   */\n  max: number;\n\n  /**\n   * Formats the values. This will format both the labels and the tooltip.\n   */\n  valueFormatter?: (value: number) => string;\n\n  /**\n   * Called when the user selects a value.\n   * The event `detail` contains the current `value`.\n   */\n  onChange?: NonCancelableEventHandler<SliderProps.ChangeDetail>;\n\n  /**\n   * How big the step size is.\n   */\n  step?: number;\n\n  /**\n   * Hides the colored fill line, so only the handle is visible.\n   */\n  hideFillLine?: boolean;\n\n  /**\n   * Show the tick marks along the slider line. Use with stepped sliders, except in extreme cases.\n   */\n  tickMarks?: boolean;\n\n  /**\n   * Whether or not the slider is disabled.\n   */\n  disabled?: boolean;\n\n  /**\n   * Labels shown between the minimum and maximum values.\n   */\n  referenceValues?: ReadonlyArray<number>;\n\n  /**\n   * Adds an `aria-label` to the native control.\n   *\n   * Use this if you don't have a visible label for this control.\n   */\n  ariaLabel?: string;\n\n  /**\n   * Adds an aria-description for slider labels.\n   *\n   * Use when sliders have formatted reference values.\n   */\n  ariaDescription?: string;\n\n  /**\n   * An object containing all the necessary localized strings required by the component.\n   * @i18n\n   */\n  i18nStrings?: SliderProps.I18nStrings;\n\n  /**\n   * Specifies if the control is read-only, which prevents the\n   * user from modifying the value, but does not prevent the value from\n   * being included in a form submission. A read-only control is still focusable.\n   */\n  readOnly?: boolean;\n}\n\nexport namespace SliderProps {\n  export interface ChangeDetail {\n    value: number;\n  }\n  export interface I18nStrings {\n    /**\n      The aria value text displayed when the slider value is between two labeled values.\n     */\n    valueTextRange: (previousValue: string, value: number, nextValue: string) => string;\n  }\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/slider/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\nimport { FormFieldValidationControlProps } from '../internal/context/form-field-context';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface SliderProps extends BaseComponentProps, FormFieldValidationControlProps {\n  /**\n   * Indicates the current value.\n   */\n  value?: number;\n\n  /**\n   * Indicates the minimum value.\n   */\n  min: number;\n\n  /**\n   * Indicates the maximum value.\n   */\n  max: number;\n\n  /**\n   * Formats the values. This will format both the labels and the tooltip.\n   */\n  valueFormatter?: (value: number) => string;\n\n  /**\n   * Called when the user selects a value.\n   * The event `detail` contains the current `value`.\n   */\n  onChange?: NonCancelableEventHandler<SliderProps.ChangeDetail>;\n\n  /**\n   * How big the step size is.\n   */\n  step?: number;\n\n  /**\n   * Hides the colored fill line, so only the handle is visible.\n   */\n  hideFillLine?: boolean;\n\n  /**\n   * Show the tick marks along the slider line. Use with stepped sliders, except in extreme cases.\n   */\n  tickMarks?: boolean;\n\n  /**\n   * Whether or not the slider is disabled.\n   */\n  disabled?: boolean;\n\n  /**\n   * Labels shown between the minimum and maximum values.\n   */\n  referenceValues?: ReadonlyArray<number>;\n\n  /**\n   * Adds an `aria-label` to the native control.\n   *\n   * Use this if you don't have a visible label for this control.\n   */\n  ariaLabel?: string;\n\n  /**\n   * Adds an aria-description for slider labels.\n   *\n   * Use when sliders have formatted reference values.\n   */\n  ariaDescription?: string;\n\n  /**\n   * An object containing all the necessary localized strings required by the component.\n   * @i18n\n   */\n  i18nStrings?: SliderProps.I18nStrings;\n\n  /**\n   * Specifies if the control is read-only, which prevents the\n   * user from modifying the value, but does not prevent the value from\n   * being included in a form submission. A read-only control is still focusable.\n   */\n  readOnly?: boolean;\n\n  /**\n   * @awsuiSystem core\n   */\n  style?: SliderProps.Style;\n}\n\nexport namespace SliderProps {\n  export interface ChangeDetail {\n    value: number;\n  }\n  export interface I18nStrings {\n    /**\n      The aria value text displayed when the slider value is between two labeled values.\n     */\n    valueTextRange: (previousValue: string, value: number, nextValue: string) => string;\n  }\n\n  export interface Style {\n    track?: {\n      backgroundColor?: string;\n    };\n    range?: {\n      backgroundColor?: {\n        default?: string;\n        active?: string;\n      };\n    };\n    handle?: {\n      backgroundColor?: {\n        default?: string;\n        hover?: string;\n        active?: string;\n      };\n      borderRadius?: string;\n    };\n  }\n}\n"]}

package/lib/internal/template/slider/internal.d.ts

@@ -1,7 +1,8 @@
 import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
 import { SliderProps } from './interfaces.js';
 interface InternalSliderProps extends SliderProps, InternalBaseComponentProps {
+    style?: SliderProps['style'];
 }
-export default function InternalSlider({ value, min, max, onChange, step, disabled, readOnly, ariaLabel, ariaDescription, referenceValues, tickMarks, hideFillLine, valueFormatter, i18nStrings, __internalRootRef, ...rest }: InternalSliderProps): JSX.Element;
+export default function InternalSlider({ value, min, max, onChange, step, disabled, readOnly, ariaLabel, ariaDescription, referenceValues, tickMarks, hideFillLine, valueFormatter, i18nStrings, style, __internalRootRef, ...rest }: InternalSliderProps): JSX.Element;
 export {};
 //# sourceMappingURL=internal.d.ts.map

package/lib/internal/template/slider/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/slider/internal.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAClF,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAc9C,UAAU,mBAAoB,SAAQ,WAAW,EAAE,0BAA0B;CAAG;AAEhF,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,KAAK,EACL,GAAG,EACH,GAAG,EACH,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,eAAe,EACf,eAAe,EACf,SAAS,EACT,YAAY,EACZ,cAAc,EACd,WAAW,EACX,iBAAiB,EACjB,GAAG,IAAI,EACR,EAAE,mBAAmB,eAgNrB"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/slider/internal.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAClF,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAe9C,UAAU,mBAAoB,SAAQ,WAAW,EAAE,0BAA0B;IAC3E,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;CAC9B;AAED,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,KAAK,EACL,GAAG,EACH,GAAG,EACH,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,eAAe,EACf,eAAe,EACf,SAAS,EACT,YAAY,EACZ,cAAc,EACd,WAAW,EACX,KAAK,EACL,iBAAiB,EACjB,GAAG,IAAI,EACR,EAAE,mBAAmB,eAqNrB"}

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

@@ -10,10 +10,11 @@ import { useFormFieldContext } from '../internal/context/form-field-context.js';
 import { fireNonCancelableEvent } from '../internal/events/index.js';
 import customCssProps from '../internal/generated/custom-css-properties/index.js';
 import SliderLabels from './slider-labels.js';
+import { getSliderStyles } from './styles.js';
 import SliderTickMarks from './tick-marks.js';
 import { findLowerAndHigherValues, getPercent, getStepArray, THUMB_READONLY_SIZE, THUMB_SIZE, valuesAreValid, } from './utils.js';
 import styles from './styles.css.js';
-export default function InternalSlider({ value, min, max, onChange, step, disabled, readOnly, ariaLabel, ariaDescription, referenceValues, tickMarks, hideFillLine, valueFormatter, i18nStrings, __internalRootRef, ...rest }) {
+export default function InternalSlider({ value, min, max, onChange, step, disabled, readOnly, ariaLabel, ariaDescription, referenceValues, tickMarks, hideFillLine, valueFormatter, i18nStrings, style, __internalRootRef, ...rest }) {
     const baseProps = getBaseProps(rest);
     const i18n = useInternalI18n('slider');
     const handleRef = useRef(null);
@@ -71,7 +72,7 @@ export default function InternalSlider({ value, min, max, onChange, step, disabl
         return undefined;
     };
     const thumbSize = readOnly ? THUMB_READONLY_SIZE : THUMB_SIZE;
-    return (React.createElement("div", { ...baseProps, ref: __internalRootRef, className: clsx(baseProps.className, styles.root) },
+    return (React.createElement("div", { ...baseProps, ref: __internalRootRef, className: clsx(baseProps.className, styles.root), style: getSliderStyles(style) },
         React.createElement("div", { onMouseEnter: () => {
                 setShowTooltip(true);
             }, onMouseLeave: () => {

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

@@ -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, { useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useUniqueId, warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport { useInternalI18n } from '../i18n/context';\nimport { getBaseProps } from '../internal/base-component/index.js';\nimport Tooltip from '../internal/components/tooltip/index.js';\nimport { useFormFieldContext } from '../internal/context/form-field-context.js';\nimport { fireNonCancelableEvent } from '../internal/events/index.js';\nimport customCssProps from '../internal/generated/custom-css-properties/index.js';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { SliderProps } from './interfaces.js';\nimport SliderLabels from './slider-labels.js';\nimport SliderTickMarks from './tick-marks.js';\nimport {\n  findLowerAndHigherValues,\n  getPercent,\n  getStepArray,\n  THUMB_READONLY_SIZE,\n  THUMB_SIZE,\n  valuesAreValid,\n} from './utils.js';\n\nimport styles from './styles.css.js';\n\ninterface InternalSliderProps extends SliderProps, InternalBaseComponentProps {}\n\nexport default function InternalSlider({\n  value,\n  min,\n  max,\n  onChange,\n  step,\n  disabled,\n  readOnly,\n  ariaLabel,\n  ariaDescription,\n  referenceValues,\n  tickMarks,\n  hideFillLine,\n  valueFormatter,\n  i18nStrings,\n  __internalRootRef,\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  const thumbSize = readOnly ? THUMB_READONLY_SIZE : THUMB_SIZE;\n\n  return (\n    <div {...baseProps} ref={__internalRootRef} className={clsx(baseProps.className, styles.root)}>\n      <div\n        onMouseEnter={() => {\n          setShowTooltip(true);\n        }}\n        onMouseLeave={() => {\n          setShowTooltip(false);\n        }}\n      >\n        {showTooltip && (\n          <Tooltip\n            value={valueFormatter ? valueFormatter(sliderValue) : sliderValue}\n            trackRef={handleRef}\n            onDismiss={() => setShowTooltip(false)}\n          />\n        )}\n        <div\n          ref={handleRef}\n          className={clsx(styles['tooltip-thumb'], {\n            [styles.readonly]: readOnly,\n          })}\n          style={{\n            [customCssProps.sliderTooltipPosition]: `calc(${percent}% - ${thumbSize}px)`,\n          }}\n        />\n        <div className={styles.slider}>\n          <div\n            className={clsx(styles['slider-track'], {\n              [styles.disabled]: disabled,\n              [styles.readonly]: readOnly,\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                [styles.readonly]: readOnly,\n              })}\n              style={{ [customCssProps.sliderRangeInlineSize]: `${percent}%` }}\n            />\n          )}\n        </div>\n        {!!step && tickMarks && (\n          <SliderTickMarks\n            hideFillLine={hideFillLine}\n            disabled={disabled}\n            readOnly={readOnly}\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          aria-disabled={readOnly && !disabled ? '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          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            if (readOnly) {\n              return;\n            }\n            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.readonly]: readOnly,\n            [styles.min]: sliderValue <= min || max < min,\n            [styles.max]: sliderValue >= max && min < max,\n          })}\n        />\n      </div>\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"]}
+{"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, { useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useUniqueId, warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport { useInternalI18n } from '../i18n/context';\nimport { getBaseProps } from '../internal/base-component/index.js';\nimport Tooltip from '../internal/components/tooltip/index.js';\nimport { useFormFieldContext } from '../internal/context/form-field-context.js';\nimport { fireNonCancelableEvent } from '../internal/events/index.js';\nimport customCssProps from '../internal/generated/custom-css-properties/index.js';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { SliderProps } from './interfaces.js';\nimport SliderLabels from './slider-labels.js';\nimport { getSliderStyles } from './styles.js';\nimport SliderTickMarks from './tick-marks.js';\nimport {\n  findLowerAndHigherValues,\n  getPercent,\n  getStepArray,\n  THUMB_READONLY_SIZE,\n  THUMB_SIZE,\n  valuesAreValid,\n} from './utils.js';\n\nimport styles from './styles.css.js';\n\ninterface InternalSliderProps extends SliderProps, InternalBaseComponentProps {\n  style?: SliderProps['style'];\n}\n\nexport default function InternalSlider({\n  value,\n  min,\n  max,\n  onChange,\n  step,\n  disabled,\n  readOnly,\n  ariaLabel,\n  ariaDescription,\n  referenceValues,\n  tickMarks,\n  hideFillLine,\n  valueFormatter,\n  i18nStrings,\n  style,\n  __internalRootRef,\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  const thumbSize = readOnly ? THUMB_READONLY_SIZE : THUMB_SIZE;\n\n  return (\n    <div\n      {...baseProps}\n      ref={__internalRootRef}\n      className={clsx(baseProps.className, styles.root)}\n      style={getSliderStyles(style)}\n    >\n      <div\n        onMouseEnter={() => {\n          setShowTooltip(true);\n        }}\n        onMouseLeave={() => {\n          setShowTooltip(false);\n        }}\n      >\n        {showTooltip && (\n          <Tooltip\n            value={valueFormatter ? valueFormatter(sliderValue) : sliderValue}\n            trackRef={handleRef}\n            onDismiss={() => setShowTooltip(false)}\n          />\n        )}\n        <div\n          ref={handleRef}\n          className={clsx(styles['tooltip-thumb'], {\n            [styles.readonly]: readOnly,\n          })}\n          style={{\n            [customCssProps.sliderTooltipPosition]: `calc(${percent}% - ${thumbSize}px)`,\n          }}\n        />\n        <div className={styles.slider}>\n          <div\n            className={clsx(styles['slider-track'], {\n              [styles.disabled]: disabled,\n              [styles.readonly]: readOnly,\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                [styles.readonly]: readOnly,\n              })}\n              style={{ [customCssProps.sliderRangeInlineSize]: `${percent}%` }}\n            />\n          )}\n        </div>\n        {!!step && tickMarks && (\n          <SliderTickMarks\n            hideFillLine={hideFillLine}\n            disabled={disabled}\n            readOnly={readOnly}\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          aria-disabled={readOnly && !disabled ? '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          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            if (readOnly) {\n              return;\n            }\n            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.readonly]: readOnly,\n            [styles.min]: sliderValue <= min || max < min,\n            [styles.max]: sliderValue >= max && min < max,\n          })}\n        />\n      </div>\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

@@ -1,31 +1,31 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_pcgz5_1wu7s_153",
-  "slider": "awsui_slider_pcgz5_1wu7s_190",
-  "slider-track": "awsui_slider-track_pcgz5_1wu7s_194",
-  "slider-range": "awsui_slider-range_pcgz5_1wu7s_194",
-  "disabled": "awsui_disabled_pcgz5_1wu7s_209",
-  "readonly": "awsui_readonly_pcgz5_1wu7s_213",
-  "error": "awsui_error_pcgz5_1wu7s_222",
-  "warning": "awsui_warning_pcgz5_1wu7s_225",
-  "active": "awsui_active_pcgz5_1wu7s_228",
-  "error-active": "awsui_error-active_pcgz5_1wu7s_231",
-  "warning-active": "awsui_warning-active_pcgz5_1wu7s_234",
-  "labels": "awsui_labels_pcgz5_1wu7s_245",
-  "labels-noref": "awsui_labels-noref_pcgz5_1wu7s_251",
-  "labels-reference": "awsui_labels-reference_pcgz5_1wu7s_254",
-  "labels-min": "awsui_labels-min_pcgz5_1wu7s_261",
-  "labels-max": "awsui_labels-max_pcgz5_1wu7s_267",
-  "labels-aria-description": "awsui_labels-aria-description_pcgz5_1wu7s_275",
-  "ticks": "awsui_ticks_pcgz5_1wu7s_293",
-  "ticks-wrapper": "awsui_ticks-wrapper_pcgz5_1wu7s_299",
-  "tick": "awsui_tick_pcgz5_1wu7s_293",
-  "middle": "awsui_middle_pcgz5_1wu7s_314",
-  "filled": "awsui_filled_pcgz5_1wu7s_317",
-  "tooltip-thumb": "awsui_tooltip-thumb_pcgz5_1wu7s_345",
-  "thumb": "awsui_thumb_pcgz5_1wu7s_358",
-  "min": "awsui_min_pcgz5_1wu7s_394",
-  "max": "awsui_max_pcgz5_1wu7s_397"
+  "root": "awsui_root_pcgz5_1q9xn_153",
+  "slider": "awsui_slider_pcgz5_1q9xn_190",
+  "slider-track": "awsui_slider-track_pcgz5_1q9xn_194",
+  "slider-range": "awsui_slider-range_pcgz5_1q9xn_194",
+  "disabled": "awsui_disabled_pcgz5_1q9xn_209",
+  "readonly": "awsui_readonly_pcgz5_1q9xn_213",
+  "error": "awsui_error_pcgz5_1q9xn_222",
+  "warning": "awsui_warning_pcgz5_1q9xn_225",
+  "active": "awsui_active_pcgz5_1q9xn_228",
+  "error-active": "awsui_error-active_pcgz5_1q9xn_231",
+  "warning-active": "awsui_warning-active_pcgz5_1q9xn_234",
+  "labels": "awsui_labels_pcgz5_1q9xn_245",
+  "labels-noref": "awsui_labels-noref_pcgz5_1q9xn_251",
+  "labels-reference": "awsui_labels-reference_pcgz5_1q9xn_254",
+  "labels-min": "awsui_labels-min_pcgz5_1q9xn_261",
+  "labels-max": "awsui_labels-max_pcgz5_1q9xn_267",
+  "labels-aria-description": "awsui_labels-aria-description_pcgz5_1q9xn_275",
+  "ticks": "awsui_ticks_pcgz5_1q9xn_293",
+  "ticks-wrapper": "awsui_ticks-wrapper_pcgz5_1q9xn_299",
+  "tick": "awsui_tick_pcgz5_1q9xn_293",
+  "middle": "awsui_middle_pcgz5_1q9xn_314",
+  "filled": "awsui_filled_pcgz5_1q9xn_317",
+  "tooltip-thumb": "awsui_tooltip-thumb_pcgz5_1q9xn_345",
+  "thumb": "awsui_thumb_pcgz5_1q9xn_358",
+  "min": "awsui_min_pcgz5_1q9xn_394",
+  "max": "awsui_max_pcgz5_1q9xn_397"
 };
   

package/lib/internal/template/slider/styles.d.ts

@@ -0,0 +1,12 @@
+import customCssProps from '../internal/generated/custom-css-properties';
+import { SliderProps } from './interfaces';
+export declare function getSliderStyles(style: SliderProps['style']): {
+    [customCssProps.styleSliderTrackBackgroundColor]: string | undefined;
+    [customCssProps.styleSliderRangeBackgroundDefault]: string | undefined;
+    [customCssProps.styleSliderRangeBackgroundActive]: string | undefined;
+    [customCssProps.styleSliderHandleBackgroundDefault]: string | undefined;
+    [customCssProps.styleSliderHandleBackgroundHover]: string | undefined;
+    [customCssProps.styleSliderHandleBackgroundActive]: string | undefined;
+    [customCssProps.styleSliderHandleBorderRadius]: string | undefined;
+};
+//# sourceMappingURL=styles.d.ts.map

package/lib/internal/template/slider/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/slider/styles.tsx"],"names":[],"mappings":"AAGA,OAAO,cAAc,MAAM,6CAA6C,CAAC;AACzE,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,wBAAgB,eAAe,CAAC,KAAK,EAAE,WAAW,CAAC,OAAO,CAAC;IAMvD,CAAC,cAAc,CAAC,+BAA+B,CAAC,qBAA+B;IAC/E,CAAC,cAAc,CAAC,iCAAiC,CAAC,qBAAwC;IAC1F,CAAC,cAAc,CAAC,gCAAgC,CAAC,qBAAuC;IACxF,CAAC,cAAc,CAAC,kCAAkC,CAAC,qBAAyC;IAC5F,CAAC,cAAc,CAAC,gCAAgC,CAAC,qBAAuC;IACxF,CAAC,cAAc,CAAC,iCAAiC,CAAC,qBAAwC;IAC1F,CAAC,cAAc,CAAC,6BAA6B,CAAC,qBAA6B;EAE9E"}

package/lib/internal/template/slider/styles.js

@@ -0,0 +1,20 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { SYSTEM } from '../internal/environment';
+import customCssProps from '../internal/generated/custom-css-properties';
+export function getSliderStyles(style) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    if (SYSTEM !== 'core') {
+        return {};
+    }
+    return {
+        [customCssProps.styleSliderTrackBackgroundColor]: (_a = style === null || style === void 0 ? void 0 : style.track) === null || _a === void 0 ? void 0 : _a.backgroundColor,
+        [customCssProps.styleSliderRangeBackgroundDefault]: (_c = (_b = style === null || style === void 0 ? void 0 : style.range) === null || _b === void 0 ? void 0 : _b.backgroundColor) === null || _c === void 0 ? void 0 : _c.default,
+        [customCssProps.styleSliderRangeBackgroundActive]: (_e = (_d = style === null || style === void 0 ? void 0 : style.range) === null || _d === void 0 ? void 0 : _d.backgroundColor) === null || _e === void 0 ? void 0 : _e.active,
+        [customCssProps.styleSliderHandleBackgroundDefault]: (_g = (_f = style === null || style === void 0 ? void 0 : style.handle) === null || _f === void 0 ? void 0 : _f.backgroundColor) === null || _g === void 0 ? void 0 : _g.default,
+        [customCssProps.styleSliderHandleBackgroundHover]: (_j = (_h = style === null || style === void 0 ? void 0 : style.handle) === null || _h === void 0 ? void 0 : _h.backgroundColor) === null || _j === void 0 ? void 0 : _j.hover,
+        [customCssProps.styleSliderHandleBackgroundActive]: (_l = (_k = style === null || style === void 0 ? void 0 : style.handle) === null || _k === void 0 ? void 0 : _k.backgroundColor) === null || _l === void 0 ? void 0 : _l.active,
+        [customCssProps.styleSliderHandleBorderRadius]: (_m = style === null || style === void 0 ? void 0 : style.handle) === null || _m === void 0 ? void 0 : _m.borderRadius,
+    };
+}
+//# sourceMappingURL=styles.js.map

package/lib/internal/template/slider/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/slider/styles.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,cAAc,MAAM,6CAA6C,CAAC;AAGzE,MAAM,UAAU,eAAe,CAAC,KAA2B;;IACzD,IAAI,MAAM,KAAK,MAAM,EAAE,CAAC;QACtB,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,OAAO;QACL,CAAC,cAAc,CAAC,+BAA+B,CAAC,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,0CAAE,eAAe;QAC/E,CAAC,cAAc,CAAC,iCAAiC,CAAC,EAAE,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,0CAAE,eAAe,0CAAE,OAAO;QAC1F,CAAC,cAAc,CAAC,gCAAgC,CAAC,EAAE,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,0CAAE,eAAe,0CAAE,MAAM;QACxF,CAAC,cAAc,CAAC,kCAAkC,CAAC,EAAE,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,0CAAE,eAAe,0CAAE,OAAO;QAC5F,CAAC,cAAc,CAAC,gCAAgC,CAAC,EAAE,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,0CAAE,eAAe,0CAAE,KAAK;QACxF,CAAC,cAAc,CAAC,iCAAiC,CAAC,EAAE,MAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,0CAAE,eAAe,0CAAE,MAAM;QAC1F,CAAC,cAAc,CAAC,6BAA6B,CAAC,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,0CAAE,YAAY;KAC5E,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { SYSTEM } from '../internal/environment';\nimport customCssProps from '../internal/generated/custom-css-properties';\nimport { SliderProps } from './interfaces';\n\nexport function getSliderStyles(style: SliderProps['style']) {\n  if (SYSTEM !== 'core') {\n    return {};\n  }\n\n  return {\n    [customCssProps.styleSliderTrackBackgroundColor]: style?.track?.backgroundColor,\n    [customCssProps.styleSliderRangeBackgroundDefault]: style?.range?.backgroundColor?.default,\n    [customCssProps.styleSliderRangeBackgroundActive]: style?.range?.backgroundColor?.active,\n    [customCssProps.styleSliderHandleBackgroundDefault]: style?.handle?.backgroundColor?.default,\n    [customCssProps.styleSliderHandleBackgroundHover]: style?.handle?.backgroundColor?.hover,\n    [customCssProps.styleSliderHandleBackgroundActive]: style?.handle?.backgroundColor?.active,\n    [customCssProps.styleSliderHandleBorderRadius]: style?.handle?.borderRadius,\n  };\n}\n"]}