@atlaskit/range 9.0.3 → 9.1.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/range
 
+## 9.1.0
+
+### Minor Changes
+
+- [#164510](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/164510)
+  [`de265f5382075`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/de265f5382075) -
+  [ux] Improves visibility for people with low vision by adding an indicator to better recognize the
+  range max. Also provides a darker background color and increases the track size from 4px to 6px.
+
+## 9.0.4
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 9.0.3
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -23,6 +23,9 @@
         {
             "path": "../../ds-lib/afm-cc/tsconfig.json"
         },
+        {
+            "path": "../../../platform/feature-flags/afm-cc/tsconfig.json"
+        },
         {
             "path": "../../theme/afm-cc/tsconfig.json"
         },

package/afm-jira/tsconfig.json

@@ -23,6 +23,9 @@
 		{
 			"path": "../../ds-lib/afm-jira/tsconfig.json"
 		},
+		{
+			"path": "../../../platform/feature-flags/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../theme/afm-jira/tsconfig.json"
 		},

package/afm-post-office/tsconfig.json

@@ -23,6 +23,9 @@
 		{
 			"path": "../../ds-lib/afm-post-office/tsconfig.json"
 		},
+		{
+			"path": "../../../platform/feature-flags/afm-post-office/tsconfig.json"
+		},
 		{
 			"path": "../../theme/afm-post-office/tsconfig.json"
 		},

package/dist/cjs/range.js

@@ -14,8 +14,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _styled = require("./styled");
 var _excluded = ["isDisabled", "defaultValue", "max", "min", "onChange", "step", "value", "testId"];
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 // Combine omits the keys of the second from the first so in case of overlap the props of the second are used.

package/dist/cjs/styled.compiled.css

@@ -1,5 +1,6 @@
 ._108m1q5u::-moz-range-thumb{border-radius:var(--ds-border-radius-circle,50%)}
 ._10lridpf::-webkit-slider-runnable-track{border:0}
+._14mj1q5u:after{border-radius:var(--ds-border-radius-circle,50%)}
 ._15raidpf::-moz-focus-outer{border:0}
 ._1gvoyh40::-moz-range-track{border-radius:2px}
 ._1kdl1q5u::-webkit-slider-thumb{border-radius:var(--ds-border-radius-circle,50%)}
@@ -9,8 +10,10 @@
 ._1yeu2hjt::-moz-range-thumb{transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out}
 ._1yq0glyw::-moz-range-thumb{border:none}
 ._1yz62hjt::-webkit-slider-thumb{transition:background-color .2s ease-in-out;-webkit-transition:background-color .2s ease-in-out}
+._37yw1l7b::-moz-range-progress{border-radius:3px}
 ._37ywyh40::-moz-range-progress{border-radius:2px}
 ._e8hnidpf::-moz-range-progress{border:0}
+._g6td1l7b::-webkit-slider-runnable-track{border-radius:3px}
 ._g6tdyh40::-webkit-slider-runnable-track{border-radius:2px}
 ._h2ksglyw::-webkit-slider-thumb{border:none}
 ._m8f8g56u::-webkit-slider-thumb{outline:solid 2px var(--thumb-border)}
@@ -20,52 +23,68 @@
 ._12el4alp::-moz-range-thumb{background-color:var(--_171tp53)}
 ._142y1y44::-moz-range-track{height:4px}
 ._14h11gpr{--thumb-shadow:var(--_cghoza)}
+._15dp1vck{--track-bg:var(--ds-background-inverse-subtle,#00000029)}
 ._15dpptpz{--track-bg:var(--_19g1tth)}
 ._168l1y44::-webkit-slider-runnable-track{height:4px}
+._168li2wt::-webkit-slider-runnable-track{height:6px}
 ._18k7v77o::-webkit-slider-thumb{outline-offset:var(--ds-space-025,2px)}
+._18lx1b6k{--track-fg:var(--ds-background-neutral-bold-pressed,#172b4d)}
 ._18lx1n8f{--track-fg:var(--_1eby16r)}
+._18postnw:after{position:absolute}
 ._18tdtlke::-webkit-slider-runnable-track{cursor:pointer}
+._19nq1ssb:after{inset-block-start:50%}
 ._1bdkusvi::-webkit-slider-thumb{box-sizing:border-box}
 ._1bsb1osq{width:100%}
 ._1cdcglyw::-webkit-slider-thumb{-webkit-appearance:none}
 ._1d8tmgnk::-webkit-slider-runnable-track{background-repeat:no-repeat}
+._1drq1b6k{--thumb-bg:var(--ds-background-neutral-bold-pressed,#172b4d)}
 ._1esf4alp::-webkit-slider-thumb{background-color:var(--_171tp53)}
 ._1f5t1osq::-moz-range-track{width:100%}
 ._1fov13gf:disabled::-moz-range-progress{cursor:not-allowed}
 ._1g2h1osq::-webkit-slider-runnable-track{width:100%}
 ._1g741hsc::-webkit-slider-runnable-track{background-image:linear-gradient(var(--track-fg),var(--track-fg))}
+._1hfk1b6k:after{background-color:var(--ds-background-neutral-bold-pressed,#172b4d)}
 ._1j552wxo:disabled{opacity:var(--ds-opacity-disabled,.4)}
-._1j707vkz::-webkit-slider-thumb{height:1pc}
+._1j70pxbi::-webkit-slider-thumb{height:var(--ds-space-200,1pc)}
 ._1jhcjiw3:hover:not(:disabled){--track-fg:var(--_14t3dsg)}
-._1kd21y44::-moz-range-progress{height:4px}
+._1kd2i2wt::-moz-range-progress{height:6px}
 ._1kzev77o::-moz-range-thumb{outline-offset:var(--ds-space-025,2px)}
-._1mn57vkz::-moz-range-thumb{height:1pc}
+._1mn5pxbi::-moz-range-thumb{height:var(--ds-space-200,1pc)}
 ._1oqe1ik2::-moz-range-thumb{box-shadow:var(--thumb-shadow)}
 ._1p201osq:dir(rtl)::-webkit-slider-runnable-track{background-position:100%}
+._1peq2wxo:after{opacity:var(--ds-opacity-disabled,.4)}
+._1qdg1y44:after{height:4px}
 ._1rucy2jz:active:not(:disabled){--thumb-bg:var(--_1pam7of)}
 ._1sdc196n::-webkit-slider-thumb{margin-block-start:var(--ds-space-negative-075,-6px)}
+._1sdc1lpd::-webkit-slider-thumb{margin-block-start:-5px}
 ._1ssqtlke::-moz-range-progress{cursor:pointer}
 ._1vq313gf:disabled::-moz-range-thumb{cursor:not-allowed}
 ._1yte13gf:disabled::-webkit-slider-thumb{cursor:not-allowed}
+._1ywu1ule:after{display:block}
 ._34m613gf:disabled::-moz-range-track{cursor:not-allowed}
 ._4t3i1ylp{height:40px}
 ._4w431ik2::-webkit-slider-thumb{box-shadow:var(--thumb-shadow)}
 ._5i7a13gf:disabled::-webkit-slider-runnable-track{cursor:not-allowed}
 ._9u3f2hce::-webkit-slider-runnable-track{background-color:var(--track-bg)}
+._aetrb3bt:after{content:""}
 ._aoww1osq::-moz-range-progress{width:100%}
 ._b3fmtlke::-moz-range-track{cursor:pointer}
 ._bfhk1j28{background-color:transparent}
 ._d7w62hce::-moz-range-track{background-color:var(--track-bg)}
+._g0nfo1yi:after{inset-inline-start:calc(100% - 3px)}
 ._g4ppusvi::-moz-range-thumb{box-sizing:border-box}
 ._j5dh13gf:disabled{cursor:not-allowed}
 ._jxarjiw3:hover:not(:disabled){--thumb-bg:var(--_14t3dsg)}
+._kqswh2mm{position:relative}
 ._np53xlkz::-webkit-slider-runnable-track{background-size:var(--track-fg-width) 100%}
-._r7637vkz::-moz-range-thumb{width:1pc}
-._u98z7vkz::-webkit-slider-thumb{width:1pc}
+._r763pxbi::-moz-range-thumb{width:var(--ds-space-200,1pc)}
+._u98zpxbi::-webkit-slider-thumb{width:var(--ds-space-200,1pc)}
 ._vt2s1w6o::-moz-range-progress{background-color:var(--track-fg)}
 ._wstuglyw{-webkit-appearance:none}
 ._ydqg1xpu:hover:not(:disabled){--track-bg:var(--_rf9ekb)}
+._ydqgmpja:hover:not(:disabled){--track-bg:var(--ds-background-inverse-subtle-hovered,#0000003d)}
 ._yfyntlke::-webkit-slider-thumb{cursor:pointer}
+._z0ai1y44:after{width:4px}
 ._1hvw1o36:focus{outline-width:medium}
 ._49pcglyw:focus{outline-style:none}
 ._nt751r31:focus{outline-color:currentColor}

package/dist/cjs/styled.js

@@ -14,12 +14,16 @@ var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _excluded = ["valuePercent", "style"];
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var rangeHeight = 40; // Height of the range input, used for the track and thumb
+var trackHeight = 6; // Height of the track, used for the track and thumb
+var thumbSize = "var(--ds-space-200, 16px)"; // Size of the thumb, used for the thumb styles
+
 // Styles are split up to avoid edge-cases with TS implementations between `css` and `cssMap` with some
 // of these edge-case pseudo-selectors.
 // Previously, in Emotion, these selectors weren't consolidated, eg. `&::webkit-thumb, &::moz-thumb`
@@ -28,6 +32,11 @@ var webkitStyles = null;
 var firefoxStyles = null;
 var baseStyles = null;
 var themeStyles = null;
+var trackStyles = {
+  root: "_4t3i1ylp _kqswh2mm _14mj1q5u _1ywu1ule _z0ai1y44 _1qdg1y44 _18postnw _1hfk1b6k _aetrb3bt _19nq1ssb _g0nfo1yi",
+  disabled: "_1peq2wxo"
+};
+var rangeA11yStyles = null;
 
 /**
  * __Input__
@@ -37,9 +46,9 @@ var Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)(function (props,
   var valuePercent = props.valuePercent,
     style = props.style,
     strippedProps = (0, _objectWithoutProperties2.default)(props, _excluded);
-  return /*#__PURE__*/React.createElement("input", (0, _extends2.default)({}, strippedProps, {
+  var input = /*#__PURE__*/React.createElement("input", (0, _extends2.default)({}, strippedProps, {
     ref: ref,
-    className: (0, _runtime.ax)(["_1bsb1osq _4t3i1ylp _bfhk1j28 _j5dh13gf _1j552wxo _nt751r31 _49pcglyw _1hvw1o36", "_wstuglyw _h2ksglyw _1kdl1q5u _m8f8g56u _1yz62hjt _1bdkusvi _u98z7vkz _1j707vkz _1esf4alp _4w431ik2 _yfyntlke _1sdc196n _18k7v77o _1cdcglyw _10lridpf _g6tdyh40 _vi4t2hjt _1g2h1osq _168l1y44 _9u3f2hce _1g741hsc _1d8tmgnk _np53xlkz _18tdtlke _1p201osq _1yte13gf _5i7a13gf", "_1yq0glyw _108m1q5u _1rf3g56u _1yeu2hjt _g4ppusvi _r7637vkz _1mn57vkz _12el4alp _1oqe1ik2 _10o7tlke _1kzev77o _15raidpf _e8hnidpf _37ywyh40 _1tcb2hjt _aoww1osq _1kd21y44 _vt2s1w6o _1ssqtlke _ru37idpf _1gvoyh40 _1nx42hjt _1f5t1osq _142y1y44 _d7w62hce _b3fmtlke _1vq313gf _1fov13gf _34m613gf", "_14h11gpr _15dpptpz _18lx1n8f _jxarjiw3 _ydqg1xpu _1jhcjiw3 _1rucy2jz _164c3zdg"]),
+    className: (0, _runtime.ax)(["_1bsb1osq _4t3i1ylp _bfhk1j28 _j5dh13gf _1j552wxo _nt751r31 _49pcglyw _1hvw1o36", "_wstuglyw _h2ksglyw _1kdl1q5u _m8f8g56u _1yz62hjt _1bdkusvi _u98zpxbi _1j70pxbi _1esf4alp _4w431ik2 _yfyntlke _1sdc196n _18k7v77o _1cdcglyw _10lridpf _g6tdyh40 _vi4t2hjt _1g2h1osq _168l1y44 _9u3f2hce _1g741hsc _1d8tmgnk _np53xlkz _18tdtlke _1p201osq _1yte13gf _5i7a13gf", "_1yq0glyw _108m1q5u _1rf3g56u _1yeu2hjt _g4ppusvi _r763pxbi _1mn5pxbi _12el4alp _1oqe1ik2 _10o7tlke _1kzev77o _15raidpf _e8hnidpf _37ywyh40 _1tcb2hjt _aoww1osq _1kd2i2wt _vt2s1w6o _1ssqtlke _ru37idpf _1gvoyh40 _1nx42hjt _1f5t1osq _142y1y44 _d7w62hce _b3fmtlke _1vq313gf _1fov13gf _34m613gf", "_14h11gpr _15dpptpz _18lx1n8f _jxarjiw3 _ydqg1xpu _1jhcjiw3 _1rucy2jz _164c3zdg", (0, _platformFeatureFlags.fg)('platform_dst_range_a11y') && "_1drq1b6k _15dp1vck _18lx1b6k _g6td1l7b _168li2wt _37yw1l7b _1kd2i2wt _1sdc1lpd _ydqgmpja"]),
     style: _objectSpread(_objectSpread({}, {
       // We are creating a css variable to control the "progress" portion of the range input
       // This avoids us needing to create a new css class for each new percentage value
@@ -55,5 +64,11 @@ var Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)(function (props,
       "--_xjqa3d": (0, _runtime.ix)("var(--ds-border-focused, ".concat(_colors.B200, ")"))
     })
   }));
+  if ((0, _platformFeatureFlags.fg)('platform_dst_range_a11y')) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: (0, _runtime.ax)([trackStyles.root, strippedProps.disabled && trackStyles.disabled])
+    }, input);
+  }
+  return input;
 });
 Input.displayName = 'InputRange';

package/dist/es2019/styled.compiled.css

@@ -1,5 +1,6 @@
 ._108m1q5u::-moz-range-thumb{border-radius:var(--ds-border-radius-circle,50%)}
 ._10lridpf::-webkit-slider-runnable-track{border:0}
+._14mj1q5u:after{border-radius:var(--ds-border-radius-circle,50%)}
 ._15raidpf::-moz-focus-outer{border:0}
 ._1gvoyh40::-moz-range-track{border-radius:2px}
 ._1kdl1q5u::-webkit-slider-thumb{border-radius:var(--ds-border-radius-circle,50%)}
@@ -9,8 +10,10 @@
 ._1yeu2hjt::-moz-range-thumb{transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out}
 ._1yq0glyw::-moz-range-thumb{border:none}
 ._1yz62hjt::-webkit-slider-thumb{transition:background-color .2s ease-in-out;-webkit-transition:background-color .2s ease-in-out}
+._37yw1l7b::-moz-range-progress{border-radius:3px}
 ._37ywyh40::-moz-range-progress{border-radius:2px}
 ._e8hnidpf::-moz-range-progress{border:0}
+._g6td1l7b::-webkit-slider-runnable-track{border-radius:3px}
 ._g6tdyh40::-webkit-slider-runnable-track{border-radius:2px}
 ._h2ksglyw::-webkit-slider-thumb{border:none}
 ._m8f8g56u::-webkit-slider-thumb{outline:solid 2px var(--thumb-border)}
@@ -20,52 +23,68 @@
 ._12el5udg::-moz-range-thumb{background-color:var(--thumb-bg,var(--ds-background-neutral-bold,#0052cc))}
 ._142y1y44::-moz-range-track{height:4px}
 ._14h11uvs{--thumb-shadow:var(--ds-UNSAFE-transparent,0 4px 8px -2px rgba(9,30,66,.25),0 0 1px rgba(9,30,66,.31))}
+._15dp1vck{--track-bg:var(--ds-background-inverse-subtle,#00000029)}
 ._15dp1yrq{--track-bg:var(--ds-background-neutral,#ebecf0)}
 ._168l1y44::-webkit-slider-runnable-track{height:4px}
+._168li2wt::-webkit-slider-runnable-track{height:6px}
 ._18k7v77o::-webkit-slider-thumb{outline-offset:var(--ds-space-025,2px)}
+._18lx1b6k{--track-fg:var(--ds-background-neutral-bold-pressed,#172b4d)}
 ._18lxyvsn{--track-fg:var(--ds-background-neutral-bold,#0052cc)}
+._18postnw:after{position:absolute}
 ._18tdtlke::-webkit-slider-runnable-track{cursor:pointer}
+._19nq1ssb:after{inset-block-start:50%}
 ._1bdkusvi::-webkit-slider-thumb{box-sizing:border-box}
 ._1bsb1osq{width:100%}
 ._1cdcglyw::-webkit-slider-thumb{-webkit-appearance:none}
 ._1d8tmgnk::-webkit-slider-runnable-track{background-repeat:no-repeat}
+._1drq1b6k{--thumb-bg:var(--ds-background-neutral-bold-pressed,#172b4d)}
 ._1esf5udg::-webkit-slider-thumb{background-color:var(--thumb-bg,var(--ds-background-neutral-bold,#0052cc))}
 ._1f5t1osq::-moz-range-track{width:100%}
 ._1fov13gf:disabled::-moz-range-progress{cursor:not-allowed}
 ._1g2h1osq::-webkit-slider-runnable-track{width:100%}
 ._1g741hsc::-webkit-slider-runnable-track{background-image:linear-gradient(var(--track-fg),var(--track-fg))}
+._1hfk1b6k:after{background-color:var(--ds-background-neutral-bold-pressed,#172b4d)}
 ._1j552wxo:disabled{opacity:var(--ds-opacity-disabled,.4)}
-._1j707vkz::-webkit-slider-thumb{height:1pc}
+._1j70pxbi::-webkit-slider-thumb{height:var(--ds-space-200,1pc)}
 ._1jhc1eo5:hover:not(:disabled){--track-fg:var(--ds-background-neutral-bold-hovered,#0065ff)}
-._1kd21y44::-moz-range-progress{height:4px}
+._1kd2i2wt::-moz-range-progress{height:6px}
 ._1kzev77o::-moz-range-thumb{outline-offset:var(--ds-space-025,2px)}
-._1mn57vkz::-moz-range-thumb{height:1pc}
+._1mn5pxbi::-moz-range-thumb{height:var(--ds-space-200,1pc)}
 ._1oqe1ik2::-moz-range-thumb{box-shadow:var(--thumb-shadow)}
 ._1p201osq:dir(rtl)::-webkit-slider-runnable-track{background-position:100%}
+._1peq2wxo:after{opacity:var(--ds-opacity-disabled,.4)}
+._1qdg1y44:after{height:4px}
 ._1ruc16ss:active:not(:disabled){--thumb-bg:var(--ds-background-neutral-bold-pressed,#2684ff)}
 ._1sdc196n::-webkit-slider-thumb{margin-block-start:var(--ds-space-negative-075,-6px)}
+._1sdc1lpd::-webkit-slider-thumb{margin-block-start:-5px}
 ._1ssqtlke::-moz-range-progress{cursor:pointer}
 ._1vq313gf:disabled::-moz-range-thumb{cursor:not-allowed}
 ._1yte13gf:disabled::-webkit-slider-thumb{cursor:not-allowed}
+._1ywu1ule:after{display:block}
 ._34m613gf:disabled::-moz-range-track{cursor:not-allowed}
 ._4t3i1ylp{height:40px}
 ._4w431ik2::-webkit-slider-thumb{box-shadow:var(--thumb-shadow)}
 ._5i7a13gf:disabled::-webkit-slider-runnable-track{cursor:not-allowed}
 ._9u3f2hce::-webkit-slider-runnable-track{background-color:var(--track-bg)}
+._aetrb3bt:after{content:""}
 ._aoww1osq::-moz-range-progress{width:100%}
 ._b3fmtlke::-moz-range-track{cursor:pointer}
 ._bfhk1j28{background-color:transparent}
 ._d7w62hce::-moz-range-track{background-color:var(--track-bg)}
+._g0nfo1yi:after{inset-inline-start:calc(100% - 3px)}
 ._g4ppusvi::-moz-range-thumb{box-sizing:border-box}
 ._j5dh13gf:disabled{cursor:not-allowed}
 ._jxar1eo5:hover:not(:disabled){--thumb-bg:var(--ds-background-neutral-bold-hovered,#0065ff)}
+._kqswh2mm{position:relative}
 ._np53xlkz::-webkit-slider-runnable-track{background-size:var(--track-fg-width) 100%}
-._r7637vkz::-moz-range-thumb{width:1pc}
-._u98z7vkz::-webkit-slider-thumb{width:1pc}
+._r763pxbi::-moz-range-thumb{width:var(--ds-space-200,1pc)}
+._u98zpxbi::-webkit-slider-thumb{width:var(--ds-space-200,1pc)}
 ._vt2s1w6o::-moz-range-progress{background-color:var(--track-fg)}
 ._wstuglyw{-webkit-appearance:none}
 ._ydqghkel:hover:not(:disabled){--track-bg:var(--ds-background-neutral-hovered,#dfe1e6)}
+._ydqgmpja:hover:not(:disabled){--track-bg:var(--ds-background-inverse-subtle-hovered,#0000003d)}
 ._yfyntlke::-webkit-slider-thumb{cursor:pointer}
+._z0ai1y44:after{width:4px}
 ._1hvw1o36:focus{outline-width:medium}
 ._49pcglyw:focus{outline-style:none}
 ._nt751r31:focus{outline-color:currentColor}

package/dist/es2019/styled.js

@@ -4,7 +4,12 @@ import "./styled.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { B200, B300, B400, N30, N40, N50A, N60A } from '@atlaskit/theme/colors';
+const rangeHeight = 40; // Height of the range input, used for the track and thumb
+const trackHeight = 6; // Height of the track, used for the track and thumb
+const thumbSize = "var(--ds-space-200, 16px)"; // Size of the thumb, used for the thumb styles
+
 // Styles are split up to avoid edge-cases with TS implementations between `css` and `cssMap` with some
 // of these edge-case pseudo-selectors.
 // Previously, in Emotion, these selectors weren't consolidated, eg. `&::webkit-thumb, &::moz-thumb`
@@ -13,6 +18,11 @@ const webkitStyles = null;
 const firefoxStyles = null;
 const baseStyles = null;
 const themeStyles = null;
+const trackStyles = {
+  root: "_4t3i1ylp _kqswh2mm _14mj1q5u _1ywu1ule _z0ai1y44 _1qdg1y44 _18postnw _1hfk1b6k _aetrb3bt _19nq1ssb _g0nfo1yi",
+  disabled: "_1peq2wxo"
+};
+const rangeA11yStyles = null;
 
 /**
  * __Input__
@@ -24,14 +34,20 @@ export const Input = /*#__PURE__*/forwardRef((props, ref) => {
     style,
     ...strippedProps
   } = props;
-  return /*#__PURE__*/React.createElement("input", _extends({}, strippedProps, {
+  const input = /*#__PURE__*/React.createElement("input", _extends({}, strippedProps, {
     style: {
       // We are creating a css variable to control the "progress" portion of the range input
       // This avoids us needing to create a new css class for each new percentage value
       '--track-fg-width': `${valuePercent}%`
     },
     ref: ref,
-    className: ax(["_1bsb1osq _4t3i1ylp _bfhk1j28 _j5dh13gf _1j552wxo _nt751r31 _49pcglyw _1hvw1o36", "_wstuglyw _h2ksglyw _1kdl1q5u _m8f8g56u _1yz62hjt _1bdkusvi _u98z7vkz _1j707vkz _1esf5udg _4w431ik2 _yfyntlke _1sdc196n _18k7v77o _1cdcglyw _10lridpf _g6tdyh40 _vi4t2hjt _1g2h1osq _168l1y44 _9u3f2hce _1g741hsc _1d8tmgnk _np53xlkz _18tdtlke _1p201osq _1yte13gf _5i7a13gf", "_1yq0glyw _108m1q5u _1rf3g56u _1yeu2hjt _g4ppusvi _r7637vkz _1mn57vkz _12el5udg _1oqe1ik2 _10o7tlke _1kzev77o _15raidpf _e8hnidpf _37ywyh40 _1tcb2hjt _aoww1osq _1kd21y44 _vt2s1w6o _1ssqtlke _ru37idpf _1gvoyh40 _1nx42hjt _1f5t1osq _142y1y44 _d7w62hce _b3fmtlke _1vq313gf _1fov13gf _34m613gf", "_14h11uvs _15dp1yrq _18lxyvsn _jxar1eo5 _ydqghkel _1jhc1eo5 _1ruc16ss _164c194a"])
+    className: ax(["_1bsb1osq _4t3i1ylp _bfhk1j28 _j5dh13gf _1j552wxo _nt751r31 _49pcglyw _1hvw1o36", "_wstuglyw _h2ksglyw _1kdl1q5u _m8f8g56u _1yz62hjt _1bdkusvi _u98zpxbi _1j70pxbi _1esf5udg _4w431ik2 _yfyntlke _1sdc196n _18k7v77o _1cdcglyw _10lridpf _g6tdyh40 _vi4t2hjt _1g2h1osq _168l1y44 _9u3f2hce _1g741hsc _1d8tmgnk _np53xlkz _18tdtlke _1p201osq _1yte13gf _5i7a13gf", "_1yq0glyw _108m1q5u _1rf3g56u _1yeu2hjt _g4ppusvi _r763pxbi _1mn5pxbi _12el5udg _1oqe1ik2 _10o7tlke _1kzev77o _15raidpf _e8hnidpf _37ywyh40 _1tcb2hjt _aoww1osq _1kd2i2wt _vt2s1w6o _1ssqtlke _ru37idpf _1gvoyh40 _1nx42hjt _1f5t1osq _142y1y44 _d7w62hce _b3fmtlke _1vq313gf _1fov13gf _34m613gf", "_14h11uvs _15dp1yrq _18lxyvsn _jxar1eo5 _ydqghkel _1jhc1eo5 _1ruc16ss _164c194a", fg('platform_dst_range_a11y') && "_1drq1b6k _15dp1vck _18lx1b6k _g6td1l7b _168li2wt _37yw1l7b _1kd2i2wt _1sdc1lpd _ydqgmpja"])
   }));
+  if (fg('platform_dst_range_a11y')) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: ax([trackStyles.root, strippedProps.disabled && trackStyles.disabled])
+    }, input);
+  }
+  return input;
 });
 Input.displayName = 'InputRange';

package/dist/esm/styled.compiled.css

@@ -1,5 +1,6 @@
 ._108m1q5u::-moz-range-thumb{border-radius:var(--ds-border-radius-circle,50%)}
 ._10lridpf::-webkit-slider-runnable-track{border:0}
+._14mj1q5u:after{border-radius:var(--ds-border-radius-circle,50%)}
 ._15raidpf::-moz-focus-outer{border:0}
 ._1gvoyh40::-moz-range-track{border-radius:2px}
 ._1kdl1q5u::-webkit-slider-thumb{border-radius:var(--ds-border-radius-circle,50%)}
@@ -9,8 +10,10 @@
 ._1yeu2hjt::-moz-range-thumb{transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out}
 ._1yq0glyw::-moz-range-thumb{border:none}
 ._1yz62hjt::-webkit-slider-thumb{transition:background-color .2s ease-in-out;-webkit-transition:background-color .2s ease-in-out}
+._37yw1l7b::-moz-range-progress{border-radius:3px}
 ._37ywyh40::-moz-range-progress{border-radius:2px}
 ._e8hnidpf::-moz-range-progress{border:0}
+._g6td1l7b::-webkit-slider-runnable-track{border-radius:3px}
 ._g6tdyh40::-webkit-slider-runnable-track{border-radius:2px}
 ._h2ksglyw::-webkit-slider-thumb{border:none}
 ._m8f8g56u::-webkit-slider-thumb{outline:solid 2px var(--thumb-border)}
@@ -20,52 +23,68 @@
 ._12el4alp::-moz-range-thumb{background-color:var(--_171tp53)}
 ._142y1y44::-moz-range-track{height:4px}
 ._14h11gpr{--thumb-shadow:var(--_cghoza)}
+._15dp1vck{--track-bg:var(--ds-background-inverse-subtle,#00000029)}
 ._15dpptpz{--track-bg:var(--_19g1tth)}
 ._168l1y44::-webkit-slider-runnable-track{height:4px}
+._168li2wt::-webkit-slider-runnable-track{height:6px}
 ._18k7v77o::-webkit-slider-thumb{outline-offset:var(--ds-space-025,2px)}
+._18lx1b6k{--track-fg:var(--ds-background-neutral-bold-pressed,#172b4d)}
 ._18lx1n8f{--track-fg:var(--_1eby16r)}
+._18postnw:after{position:absolute}
 ._18tdtlke::-webkit-slider-runnable-track{cursor:pointer}
+._19nq1ssb:after{inset-block-start:50%}
 ._1bdkusvi::-webkit-slider-thumb{box-sizing:border-box}
 ._1bsb1osq{width:100%}
 ._1cdcglyw::-webkit-slider-thumb{-webkit-appearance:none}
 ._1d8tmgnk::-webkit-slider-runnable-track{background-repeat:no-repeat}
+._1drq1b6k{--thumb-bg:var(--ds-background-neutral-bold-pressed,#172b4d)}
 ._1esf4alp::-webkit-slider-thumb{background-color:var(--_171tp53)}
 ._1f5t1osq::-moz-range-track{width:100%}
 ._1fov13gf:disabled::-moz-range-progress{cursor:not-allowed}
 ._1g2h1osq::-webkit-slider-runnable-track{width:100%}
 ._1g741hsc::-webkit-slider-runnable-track{background-image:linear-gradient(var(--track-fg),var(--track-fg))}
+._1hfk1b6k:after{background-color:var(--ds-background-neutral-bold-pressed,#172b4d)}
 ._1j552wxo:disabled{opacity:var(--ds-opacity-disabled,.4)}
-._1j707vkz::-webkit-slider-thumb{height:1pc}
+._1j70pxbi::-webkit-slider-thumb{height:var(--ds-space-200,1pc)}
 ._1jhcjiw3:hover:not(:disabled){--track-fg:var(--_14t3dsg)}
-._1kd21y44::-moz-range-progress{height:4px}
+._1kd2i2wt::-moz-range-progress{height:6px}
 ._1kzev77o::-moz-range-thumb{outline-offset:var(--ds-space-025,2px)}
-._1mn57vkz::-moz-range-thumb{height:1pc}
+._1mn5pxbi::-moz-range-thumb{height:var(--ds-space-200,1pc)}
 ._1oqe1ik2::-moz-range-thumb{box-shadow:var(--thumb-shadow)}
 ._1p201osq:dir(rtl)::-webkit-slider-runnable-track{background-position:100%}
+._1peq2wxo:after{opacity:var(--ds-opacity-disabled,.4)}
+._1qdg1y44:after{height:4px}
 ._1rucy2jz:active:not(:disabled){--thumb-bg:var(--_1pam7of)}
 ._1sdc196n::-webkit-slider-thumb{margin-block-start:var(--ds-space-negative-075,-6px)}
+._1sdc1lpd::-webkit-slider-thumb{margin-block-start:-5px}
 ._1ssqtlke::-moz-range-progress{cursor:pointer}
 ._1vq313gf:disabled::-moz-range-thumb{cursor:not-allowed}
 ._1yte13gf:disabled::-webkit-slider-thumb{cursor:not-allowed}
+._1ywu1ule:after{display:block}
 ._34m613gf:disabled::-moz-range-track{cursor:not-allowed}
 ._4t3i1ylp{height:40px}
 ._4w431ik2::-webkit-slider-thumb{box-shadow:var(--thumb-shadow)}
 ._5i7a13gf:disabled::-webkit-slider-runnable-track{cursor:not-allowed}
 ._9u3f2hce::-webkit-slider-runnable-track{background-color:var(--track-bg)}
+._aetrb3bt:after{content:""}
 ._aoww1osq::-moz-range-progress{width:100%}
 ._b3fmtlke::-moz-range-track{cursor:pointer}
 ._bfhk1j28{background-color:transparent}
 ._d7w62hce::-moz-range-track{background-color:var(--track-bg)}
+._g0nfo1yi:after{inset-inline-start:calc(100% - 3px)}
 ._g4ppusvi::-moz-range-thumb{box-sizing:border-box}
 ._j5dh13gf:disabled{cursor:not-allowed}
 ._jxarjiw3:hover:not(:disabled){--thumb-bg:var(--_14t3dsg)}
+._kqswh2mm{position:relative}
 ._np53xlkz::-webkit-slider-runnable-track{background-size:var(--track-fg-width) 100%}
-._r7637vkz::-moz-range-thumb{width:1pc}
-._u98z7vkz::-webkit-slider-thumb{width:1pc}
+._r763pxbi::-moz-range-thumb{width:var(--ds-space-200,1pc)}
+._u98zpxbi::-webkit-slider-thumb{width:var(--ds-space-200,1pc)}
 ._vt2s1w6o::-moz-range-progress{background-color:var(--track-fg)}
 ._wstuglyw{-webkit-appearance:none}
 ._ydqg1xpu:hover:not(:disabled){--track-bg:var(--_rf9ekb)}
+._ydqgmpja:hover:not(:disabled){--track-bg:var(--ds-background-inverse-subtle-hovered,#0000003d)}
 ._yfyntlke::-webkit-slider-thumb{cursor:pointer}
+._z0ai1y44:after{width:4px}
 ._1hvw1o36:focus{outline-width:medium}
 ._49pcglyw:focus{outline-style:none}
 ._nt751r31:focus{outline-color:currentColor}

package/dist/esm/styled.js

@@ -9,7 +9,12 @@ import { ax, ix } from "@compiled/react/runtime";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { forwardRef } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { B200, B300, B400, N30, N40, N50A, N60A } from '@atlaskit/theme/colors';
+var rangeHeight = 40; // Height of the range input, used for the track and thumb
+var trackHeight = 6; // Height of the track, used for the track and thumb
+var thumbSize = "var(--ds-space-200, 16px)"; // Size of the thumb, used for the thumb styles
+
 // Styles are split up to avoid edge-cases with TS implementations between `css` and `cssMap` with some
 // of these edge-case pseudo-selectors.
 // Previously, in Emotion, these selectors weren't consolidated, eg. `&::webkit-thumb, &::moz-thumb`
@@ -18,6 +23,11 @@ var webkitStyles = null;
 var firefoxStyles = null;
 var baseStyles = null;
 var themeStyles = null;
+var trackStyles = {
+  root: "_4t3i1ylp _kqswh2mm _14mj1q5u _1ywu1ule _z0ai1y44 _1qdg1y44 _18postnw _1hfk1b6k _aetrb3bt _19nq1ssb _g0nfo1yi",
+  disabled: "_1peq2wxo"
+};
+var rangeA11yStyles = null;
 
 /**
  * __Input__
@@ -27,9 +37,9 @@ export var Input = /*#__PURE__*/forwardRef(function (props, ref) {
   var valuePercent = props.valuePercent,
     style = props.style,
     strippedProps = _objectWithoutProperties(props, _excluded);
-  return /*#__PURE__*/React.createElement("input", _extends({}, strippedProps, {
+  var input = /*#__PURE__*/React.createElement("input", _extends({}, strippedProps, {
     ref: ref,
-    className: ax(["_1bsb1osq _4t3i1ylp _bfhk1j28 _j5dh13gf _1j552wxo _nt751r31 _49pcglyw _1hvw1o36", "_wstuglyw _h2ksglyw _1kdl1q5u _m8f8g56u _1yz62hjt _1bdkusvi _u98z7vkz _1j707vkz _1esf4alp _4w431ik2 _yfyntlke _1sdc196n _18k7v77o _1cdcglyw _10lridpf _g6tdyh40 _vi4t2hjt _1g2h1osq _168l1y44 _9u3f2hce _1g741hsc _1d8tmgnk _np53xlkz _18tdtlke _1p201osq _1yte13gf _5i7a13gf", "_1yq0glyw _108m1q5u _1rf3g56u _1yeu2hjt _g4ppusvi _r7637vkz _1mn57vkz _12el4alp _1oqe1ik2 _10o7tlke _1kzev77o _15raidpf _e8hnidpf _37ywyh40 _1tcb2hjt _aoww1osq _1kd21y44 _vt2s1w6o _1ssqtlke _ru37idpf _1gvoyh40 _1nx42hjt _1f5t1osq _142y1y44 _d7w62hce _b3fmtlke _1vq313gf _1fov13gf _34m613gf", "_14h11gpr _15dpptpz _18lx1n8f _jxarjiw3 _ydqg1xpu _1jhcjiw3 _1rucy2jz _164c3zdg"]),
+    className: ax(["_1bsb1osq _4t3i1ylp _bfhk1j28 _j5dh13gf _1j552wxo _nt751r31 _49pcglyw _1hvw1o36", "_wstuglyw _h2ksglyw _1kdl1q5u _m8f8g56u _1yz62hjt _1bdkusvi _u98zpxbi _1j70pxbi _1esf4alp _4w431ik2 _yfyntlke _1sdc196n _18k7v77o _1cdcglyw _10lridpf _g6tdyh40 _vi4t2hjt _1g2h1osq _168l1y44 _9u3f2hce _1g741hsc _1d8tmgnk _np53xlkz _18tdtlke _1p201osq _1yte13gf _5i7a13gf", "_1yq0glyw _108m1q5u _1rf3g56u _1yeu2hjt _g4ppusvi _r763pxbi _1mn5pxbi _12el4alp _1oqe1ik2 _10o7tlke _1kzev77o _15raidpf _e8hnidpf _37ywyh40 _1tcb2hjt _aoww1osq _1kd2i2wt _vt2s1w6o _1ssqtlke _ru37idpf _1gvoyh40 _1nx42hjt _1f5t1osq _142y1y44 _d7w62hce _b3fmtlke _1vq313gf _1fov13gf _34m613gf", "_14h11gpr _15dpptpz _18lx1n8f _jxarjiw3 _ydqg1xpu _1jhcjiw3 _1rucy2jz _164c3zdg", fg('platform_dst_range_a11y') && "_1drq1b6k _15dp1vck _18lx1b6k _g6td1l7b _168li2wt _37yw1l7b _1kd2i2wt _1sdc1lpd _ydqgmpja"]),
     style: _objectSpread(_objectSpread({}, {
       // We are creating a css variable to control the "progress" portion of the range input
       // This avoids us needing to create a new css class for each new percentage value
@@ -45,5 +55,11 @@ export var Input = /*#__PURE__*/forwardRef(function (props, ref) {
       "--_xjqa3d": ix("var(--ds-border-focused, ".concat(B200, ")"))
     })
   }));
+  if (fg('platform_dst_range_a11y')) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: ax([trackStyles.root, strippedProps.disabled && trackStyles.disabled])
+    }, input);
+  }
+  return input;
 });
 Input.displayName = 'InputRange';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/range",
-	"version": "9.0.3",
+	"version": "9.1.0",
 	"description": "A range lets users choose an approximate value on a slider.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -27,8 +27,9 @@
 	"dependencies": {
 		"@atlaskit/css": "^0.10.0",
 		"@atlaskit/ds-lib": "^4.0.0",
+		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tokens": "^4.5.0",
+		"@atlaskit/tokens": "^5.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.3"
 	},
@@ -36,24 +37,30 @@
 		"react": "^18.2.0"
 	},
 	"devDependencies": {
-		"@af/accessibility-testing": "^2.0.0",
-		"@af/integration-testing": "^0.5.0",
-		"@af/visual-regression": "^1.3.0",
-		"@atlaskit/button": "^21.1.0",
-		"@atlaskit/checkbox": "^17.0.0",
+		"@af/accessibility-testing": "workspace:^",
+		"@af/integration-testing": "workspace:^",
+		"@af/visual-regression": "workspace:^",
+		"@atlaskit/button": "^23.2.0",
+		"@atlaskit/checkbox": "^17.1.0",
 		"@atlaskit/docs": "^10.0.0",
 		"@atlaskit/form": "^12.0.0",
-		"@atlaskit/link": "^3.0.0",
-		"@atlaskit/primitives": "^14.2.0",
+		"@atlaskit/link": "^3.2.0",
+		"@atlaskit/primitives": "^14.8.0",
 		"@atlaskit/section-message": "^8.2.0",
-		"@atlaskit/ssr": "^0.4.0",
-		"@atlaskit/tooltip": "^20.0.0",
+		"@atlaskit/ssr": "workspace:^",
+		"@atlaskit/tooltip": "^20.3.0",
+		"@atlassian/ssr-tests": "^0.2.0",
 		"@emotion/styled": "^11.0.0",
 		"@testing-library/react": "^13.4.0",
 		"lodash": "^4.17.21",
 		"react-dom": "^18.2.0",
 		"typescript": "~5.4.2"
 	},
+	"platform-feature-flags": {
+		"platform_dst_range_a11y": {
+			"type": "boolean"
+		}
+	},
 	"keywords": [
 		"atlaskit",
 		"react",