@atlassian/aui 9.3.3 → 9.4.1

package/entry/aui.batch.prototyping.js

@@ -9,7 +9,7 @@ export * from './aui.batch.components';
 import './aui.component.form-notification';
 import './aui.component.form-validation';
 import { Header } from './aui.component.async-header';
-import { DatePicker } from './aui.component.form.date-select';
+import { DatePicker, CalendarWidget } from './aui.component.form.date-select';
 import { RestfulTable } from './aui.component.restful-table';
 import { sidebar } from './aui.component.sidebar';
 import { whenIType } from './behaviours/aui.behaviour.keyboard-shortcuts';
@@ -18,6 +18,7 @@ export {
     I18n,
     Header,
     DatePicker,
+    CalendarWidget,
     RestfulTable,
     sidebar,
     whenIType,

package/entry/aui.component.form.date-select.js

@@ -1,4 +1,4 @@
 import './styles/aui.pattern.forms';
 import './aui.component.inline-dialog2'; // so that the inline dialog styles get placed before date picker.
 import '@atlassian/aui/src/less/aui-date-picker.less';
-export { default as DatePicker } from '@atlassian/aui/src/js/aui/date-picker';
+export { default as DatePicker, CalendarWidget } from '@atlassian/aui/src/js/aui/date-picker';

package/entry/behaviours/aui.behaviour.i18n.js

@@ -1 +1 @@
-export {default as i18n} from '@atlassian/aui/src/js/aui/i18n';
+export {I18n as i18n} from '@atlassian/aui/src/js/aui/i18n';

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@atlassian/aui",
     "description": "Atlassian User Interface library",
-    "version": "9.3.3",
+    "version": "9.4.1",
     "author": "Atlassian Pty Ltd.",
     "homepage": "https://aui.atlassian.com",
     "license": "Apache-2.0",
@@ -42,29 +42,25 @@
         "skatejs": "0.13.17",
         "skatejs-template-html": "0.0.0",
         "trim-extra-html-whitespace": "1.3.0",
-        "underscore": "1.12.0"
+        "underscore": "1.13.1"
     },
     "devDependencies": {
         "@atlassian/adg-server-iconfont": "3.1.0",
-        "@atlassian/aui-webpack-config": "2.0.0",
-        "@babel/core": "7.13.15",
-        "@babel/preset-env": "7.13.15",
-        "bundlesize": "^1.0.0-beta.2",
+        "@atlassian/aui-webpack-config": "3.0.1",
+        "@babel/core": "7.14.0",
+        "@babel/preset-env": "7.14.1",
+        "bundlesize": "1.0.0-beta.2",
         "cross-env": "7.0.3",
-        "eslint": "7.24.0",
-        "glob": "7.1.2",
-        "ignore-emit-webpack-plugin": "^2.0.2",
+        "eslint": "7.26.0",
+        "glob": "7.1.6",
+        "ignore-emit-webpack-plugin": "2.0.6",
         "jquery": "3.5.1",
         "jquery-migrate": "3.3.2",
-        "less": "3.11.1",
-        "webpack-cli": "3.3.12"
+        "less": "3.13.1"
     },
     "scripts": {
         "prepublishOnly": "yarn clean && cross-env NODE_ENV=production yarn build",
         "clean": "rm -rf ./dist",
-        "dist/build:core": "webpack --config webpack/dist.aui-lib.webpack.config.js",
-        "dist/build:exts": "webpack --config webpack/dist.aui-extensions.webpack.config.js",
-        "dist/build:legacy": "yarn dist/build:core && yarn dist/build:exts",
         "dist/build:prototyping": "webpack --config webpack/dist.prototyping.webpack.config.js",
         "build": "yarn dist/build:prototyping",
         "watch": "yarn dist/build:prototyping --watch",

package/src/js/aui/date-picker.js

@@ -21,13 +21,13 @@ const makePopup = ({horizontalAlignment, datePickerUUID}) => {
     return popup;
 };
 
-const makeConfig = ({dateFormat, $field, onSelect, hide, onChangeMonthYear}) => ({
-    'dateFormat': dateFormat,
-    'defaultDate': $field.val(),
-    'maxDate': $field.attr('max'),
-    'minDate': $field.attr('min'),
-    'nextText': '>',
-    'onSelect': function (dateText) {
+const makeConfig = ({ minDate, maxDate, dateFormat, $field, onSelect, hide, onChangeMonthYear}) => ({
+    dateFormat,
+    defaultDate: $field.val(),
+    maxDate: maxDate || $field.attr('max'),
+    minDate: minDate || $field.attr('min'),
+    nextText: '>',
+    onSelect: function (dateText) {
         $field.val(dateText);
         $field.trigger('change');
         hide();
@@ -35,7 +35,7 @@ const makeConfig = ({dateFormat, $field, onSelect, hide, onChangeMonthYear}) =>
         onSelect && onSelect.call(this, dateText);
     },
     onChangeMonthYear,
-    'prevText': '<'
+    prevText: '<'
 });
 
 const initCalendar = ({config, popupContents, getCalendarNode, hint}) => {
@@ -287,6 +287,8 @@ const initPolyfill = function (datePicker) {
         }
         const baseConfig = makeConfig({
             dateFormat: options.dateFormat,
+            minDate: options.minDate,
+            maxDate: options.maxDate,
             $field,
             onSelect: options.onSelect,
             hide: datePicker.hide,
@@ -337,6 +339,11 @@ const initPolyfill = function (datePicker) {
     // shows that changing the `type` of input does not erase its value.
     // see https://codepen.io/chrisdarroch/pen/YzwgjyJ
     $field.prop('type', 'text');
+    // Set default value on initialization to handle all date formats.
+    // It is possible, because of changing type to text on the line above.
+    $field.val($field.attr('value'));
+    // Trigger change to update calendar popup value.
+    $field.trigger('propertychange');
 
     // demonstrate the polyfill is initialised
     $field.attr('data-aui-dp-uuid', datePickerUUID);

package/src/js/aui/internal/globalize.js

@@ -1,5 +1,18 @@
 const NAMESPACE = 'AJS';
 
+/**
+ * Makes given value available globally under window[name] attribute.
+ * Keep in mind that this is needed for p2-plugin where chunks of AUI
+ * can be loaded separately.
+ *
+ * In order for global namespace to work in `aui.prototyping.js` and
+ * `aui.prototyping.nodeps.js` the proper exports need to be added to:
+ * `packages/core/entry/aui.batch.prototyping.js`
+ *
+ * @param {string} name Name of the attribute
+ * @param {any} value Value to expose globally
+ * @returns exposed value
+ */
 export default function globalize (name, value) {
     if (typeof window[NAMESPACE] !== 'object') {
         window[NAMESPACE] = {};

package/src/js/aui/layer.js

@@ -13,6 +13,7 @@ const LAYER_EVENT_PREFIX = 'aui-layer-';
 const AUI_EVENT_PREFIX = 'aui-';
 const ATTR_MODAL = 'modal';
 const ATTR_DOM_CONTAINER = 'dom-container';
+const ZINDEX_AUI_LAYER_MIN = 3000;
 
 var $doc = $(document);
 
@@ -182,10 +183,6 @@ Layer.prototype = {
             return this;
         }
 
-        if (!triggerEvent(this.$el, 'beforeHide', 'hide')) {
-            return this;
-        }
-
         // AUI-3708
         const thisLayer = this;
         oneTransitionEnd(this.$el.get(0), 'opacity', function () {
@@ -194,7 +191,7 @@ Layer.prototype = {
             }
         });
 
-        LayerManager.global.popUntil(this.$el);
+        LayerManager.global.popUntil(this.$el, true);
 
         return this;
     },
@@ -259,13 +256,16 @@ Layer.prototype = {
     },
 
     _hideLayer: function (triggerBeforeEvents) {
+        if (triggerBeforeEvents) {
+            if (!triggerEvent(this.$el, 'beforeHide', 'hide')) {
+                return false;
+            }
+        }
+
         if (this.isPersistent() || this.isBlanketed()) {
             FocusManager.global.exit(this.$el);
         }
 
-        if (triggerBeforeEvents) {
-            triggerEvent(this.$el, 'beforeHide', 'hide');
-        }
         // don't remove via jquery; that would cause this method to get re-called once or twice more :\
         this.el.removeAttribute('open');
         this.$el.removeData('_aui-layer-shown');
@@ -273,6 +273,7 @@ Layer.prototype = {
         this.$el.data('_aui-layer-cached-z-index', '');
         this.$el.trigger(EVENT_PREFIX + 'hide');
         this.$el.trigger(GLOBAL_EVENT_PREFIX + 'hide', [this.$el]);
+        return true;
     },
 
     _showLayer: function (zIndex) {
@@ -368,7 +369,7 @@ function nextZIndex (layerArr) {
         _nextZIndex = 0;
     }
 
-    return Math.max(3000, _nextZIndex);
+    return Math.max(ZINDEX_AUI_LAYER_MIN, _nextZIndex);
 }
 
 function updateBlanket (stack, oldBlanketIndex) {
@@ -383,20 +384,24 @@ function updateBlanket (stack, oldBlanketIndex) {
     }
 }
 
-function popLayers (stack, stopIndex, forceClosePersistent) {
+function popLayers (stack, stopIndex, forceClosePersistent, triggerBeforeEvents = true) {
     if (stopIndex < 0) {
-        return;
+        return [false, null];
     }
 
+    var $layer;
     for (var a = stack.length - 1; a >= stopIndex; a--) {
-        var $layer = stack[a];
+        $layer = stack[a];
         var layer = createLayer($layer);
 
         if (forceClosePersistent || !layer.isPersistent()) {
-            layer._hideLayer(true);
+            if (!layer._hideLayer(triggerBeforeEvents)) {
+                return [false, $layer];
+            }
             stack.splice(a, 1);
         }
     }
+    return [true, $layer];
 }
 
 function getParentLayer (layer) {
@@ -561,14 +566,24 @@ LayerManager.prototype = {
     },
 
     /**
-    * Removes all non-modal layers above & including the given element. If the given element is not an active layer, this method
-    * is a no-op. The given element will be removed regardless of whether or not it is modal.
-    *
-    * @param {HTMLElement | String | jQuery} element layer to pop.
-    *
-    * @returns {jQuery} The last layer that was popped, or null if no layer matching the given $el was found.
-    */
-    popUntil: function (element) {
+     * Gets the top layer, if it exists.
+     *
+     * @returns The layer on top of the stack, if it exists, otherwise null.
+     */
+    getTopLayer: function () {
+        return this._stack[this._stack.length - 1] || null;
+    },
+
+    /**
+     * Removes all non-modal layers above & including the given element. If the given element is not an active layer, this method
+     * is a no-op. The given element will be removed regardless of whether or not it is modal.
+     *
+     * @param {HTMLElement | String | jQuery} element layer to pop.
+     * @param {boolean} [triggerBeforeEvents=false]
+     *
+     * @returns {jQuery} The last layer that was popped, or null if no layer matching the given $el was found.
+     */
+    popUntil: function (element, triggerBeforeEvents = false) {
         var $el = (element instanceof $) ? element : $(element);
         var index = layerIndex(this._stack, $el);
 
@@ -576,41 +591,31 @@ LayerManager.prototype = {
             return null;
         }
 
-        var oldTopBlanketedIndex = topBlanketedIndex(this._stack);
+        const oldTopBlanketedIndex = topBlanketedIndex(this._stack);
 
         // Removes all layers above the current one.
-        popLayers(this._stack, index + 1, createLayer($el).isBlanketed());
+        const layer = createLayer($el);
+        const [success, $lastPopped] = popLayers(this._stack, index + 1, layer.isBlanketed(), triggerBeforeEvents)
+        if (!success) {
+            return $lastPopped;
+        }
 
         // Removes the current layer.
+        if (!layer._hideLayer(triggerBeforeEvents)) {
+            return $lastPopped;
+        }
         this._stack.splice(index, 1);
-        createLayer($el)._hideLayer();
-
         updateBlanket(this._stack, oldTopBlanketedIndex);
 
         return $el;
     },
 
-    /**
-    * Gets the top layer, if it exists.
-    *
-    * @returns The layer on top of the stack, if it exists, otherwise null.
-    */
-    getTopLayer: function () {
-        if (!this._stack.length) {
-            return null;
-        }
-
-        var $topLayer = this._stack[this._stack.length - 1];
-
-        return $topLayer;
-    },
-
     /**
     * Pops the top layer, if it exists and it is non modal and non persistent.
     *
     * @returns The layer that was popped, if it was popped.
     */
-    popTopIfNonPersistent: function () {
+    popTopIfNonPersistent: function (triggerBeforeEvents = false) {
         var $topLayer = this.getTopLayer();
         var layer = createLayer($topLayer);
 
@@ -618,7 +623,7 @@ LayerManager.prototype = {
             return null;
         }
 
-        return this.popUntil($topLayer);
+        return this.popUntil($topLayer, triggerBeforeEvents);
     },
 
     /**
@@ -627,7 +632,7 @@ LayerManager.prototype = {
     *
     * @returns The blanketed layer that was popped, if it exists, otherwise null.
     */
-    popUntilTopBlanketed: function () {
+    popUntilTopBlanketed: function (triggerBeforeEvents = false) {
         var i = topBlanketedIndex(this._stack);
 
         if (i < 0) {
@@ -642,7 +647,7 @@ LayerManager.prototype = {
             var $next = this.getNextHigherNonPeristentAndNonBlanketedLayer($topBlanketedLayer);
             if ($next) {
                 var stopIndex = layerIndex(this._stack, $next);
-                popLayers(this._stack, stopIndex, true);
+                popLayers(this._stack, stopIndex, true, triggerBeforeEvents);
                 return $next;
             }
             return null;
@@ -657,7 +662,7 @@ LayerManager.prototype = {
     * Pops all layers above and including the top persistent layer. If layers exist but none are persistent, this method
     * does nothing.
     */
-    popUntilTopPersistent: function () {
+    popUntilTopPersistent: function (triggerBeforeEvents = false) {
         var $toPop = LayerManager.global.getTopLayer();
         if (!$toPop) {
             return;
@@ -677,7 +682,7 @@ LayerManager.prototype = {
 
                 if ($toPop && !toPop.isPersistent()) {
                     stopIndex = layerIndex(this._stack, $toPop);
-                    popLayers(this._stack, stopIndex, true);
+                    popLayers(this._stack, stopIndex, true, triggerBeforeEvents);
                     updateBlanket(this._stack, oldTopBlanketedIndex);
                 } else {
                     // Here we have a blanketed persistent layer
@@ -686,7 +691,7 @@ LayerManager.prototype = {
             }
         } else {
             stopIndex = layerIndex(this._stack, $toPop);
-            popLayers(this._stack, stopIndex, true);
+            popLayers(this._stack, stopIndex, true, triggerBeforeEvents);
             updateBlanket(this._stack, oldTopBlanketedIndex);
         }
     }
@@ -698,7 +703,7 @@ LayerManager.prototype = {
 function initCloseLayerOnEscPress() {
     $doc.on('keydown', function (e) {
         if (e.keyCode === keyCode.ESCAPE) {
-            LayerManager.global.popUntilTopPersistent();
+            LayerManager.global.popUntilTopPersistent(true);
             e.preventDefault();
         }
     });
@@ -706,7 +711,7 @@ function initCloseLayerOnEscPress() {
 
 function initCloseLayerOnBlanketClick() {
     $doc.on('click', '.aui-blanket', function (e) {
-        if (LayerManager.global.popUntilTopBlanketed()) {
+        if (LayerManager.global.popUntilTopBlanketed(true)) {
             e.preventDefault();
         }
     });

package/src/js/aui/tooltip.js

@@ -31,6 +31,7 @@ const defaultOptions = {
     gravity: 'n',
     html: false,
     live: false,
+    enabled: true,
     suppress: () => false
 }
 
@@ -41,6 +42,7 @@ class Tooltip {
         this.triggerElement = triggerElement;
         this.$triggerElement = $(this.triggerElement);
         this.options = { ...defaultOptions, ...options };
+        this.enabled = this.options.enabled
         this.moveTitleToTooltip()
     }
 
@@ -102,12 +104,13 @@ class Tooltip {
         return $sharedTip;
     }
 
-
     show() {
+        if (this.enabled === false) {
+            return;
+        }
+        this.hide();
         const triggerElement = this.triggerElement;
 
-        const $tip = this.getFloatingTip();
-
         const placement = GRAVITY_MAP[this.options.gravity];
 
         clearTimeout(this.popperTimeout);
@@ -119,8 +122,7 @@ class Tooltip {
         }
 
         this.popperTimeout = setTimeout(() => {
-            const tipNode = $tip.get(0);
-            // tipNode.setAttribute('data-show', '');
+            const tipNode = this.getFloatingTip().get(0);
             tipNode.classList.remove('assistive');
 
             this.popperInstance = createPopper(triggerElement, tipNode, {
@@ -141,7 +143,6 @@ class Tooltip {
 
     hide() {
         const tipNode = this.getFloatingTip().get(0);
-        // tipNode.removeAttribute('data-show');
         tipNode.classList.add('assistive');
 
         clearTimeout(this.popperTimeout);
@@ -152,6 +153,15 @@ class Tooltip {
         }
         $(window).off(`scroll.${pluginKey}`);
     }
+
+    enable() {
+        this.enabled = true;
+    }
+
+    disable() {
+        this.hide();
+        this.enabled = false;
+    }
 }
 
 const tooltipsByDomNode = new WeakMap();
@@ -163,7 +173,9 @@ const getTooltipInstance = (domNode, options) => {
     let tooltip = tooltipsByDomNode.get(domNode);
     if (tooltip === undefined) {
         tooltip = new Tooltip(domNode, options);
-        tooltipsByDomNode.set(domNode, tooltip);
+        if (typeof domNode === 'object') {
+            tooltipsByDomNode.set(domNode, tooltip);
+        }
     }
     return tooltip;
 }

package/src/js/aui/unique-id.js

@@ -9,7 +9,7 @@ var uniqueIDcounter = 0;
  * returning. Note uniqueID, uniqueIDstring, uniqueIDcounter = 0; set at top of
  * file.
  *
- * @param {String} prefix String to prepend to ID instead of default AUI prefix.
+ * @param {String} [prefix] String to prepend to ID instead of default AUI prefix.
  *
  * @returns {String}
  */

package/src/js/aui-css-deprecations.js

@@ -116,10 +116,18 @@ Use CSS flexbox or grid to vertically align it.
 See https://css-tricks.com/centering-css-complete-guide/ for techniques.`
 });
 
-//8.4.0
+// 8.4.0
 
 css('.aui-button-light', {
     sinceVersion: '8.4.0',
     removeInVersion: '10.0.0',
     extraInfo: 'ADGS allows only for normal and subtle buttons.'
 });
+
+// 9.3.5
+
+css('.aui-dropdown2-tailed', {
+    sinceVersion: '9.3.5',
+    removeInVersion: '10.0.0',
+    extraInfo: 'ADGS does not include tails on layered components'
+})

package/src/less/aui-appheader.less

@@ -36,7 +36,6 @@ aui-header,
     box-sizing: border-box;
     padding: 0 @aui-grid;
     position: relative;
-    z-index: @aui-z-header;
 
     .aui-header-before {
         flex-grow: 0;

package/src/less/aui-experimental-tooltip.less

@@ -4,7 +4,7 @@
     background-color: var(--aui-tooltip-bg-color);
     padding: 2px 6px;
     pointer-events: none;
-    z-index: 9999;
+    z-index: @aui-z-tooltip;
     border-radius: @aui-border-radius-small;
     font-size: @aui-font-size-small;
     line-height:  unit(20 / @aui-font-size-small);

package/src/less/aui-page-typography.less

@@ -108,7 +108,9 @@ cite {
     font-style: italic;
 }
 cite:before {
-    content: "\2014 \2009";
+    display: inline-block;
+    content: "\2014";
+    padding-right: 0.5em;
 }
 blockquote {
     border-left: 2px solid @aui-border-color;

package/src/less/aui-select2.less

@@ -28,8 +28,19 @@
 @aui-select2-chosen-border-radius: @aui-border-radius-smallish;
 @aui-select2-chosen-close-button-length: 17px;
 
+.select2-drop-mask {
+    z-index: @aui-z-select2 - 2;
+}
+
 .aui-select2-drop {
     --aui-item-border-radius: 0;
+    margin-top: @aui-dropdown-trigger-offset;
+    margin-bottom: 0;
+    z-index: @aui-z-select2 - 1; // override select2 z-indices to fit in AUI's ranges. sits above blanket but below suggestions.
+}
+
+.aui-select2 .select2-search {
+    z-index: @aui-z-select2;
 }
 
 .aui-select2-drop .select2-result-selectable .select2-match,
@@ -48,12 +59,6 @@
     padding: @aui-select2-search-input-padding+@aui-dropdown2-padding;
 }
 
-.aui-select2-drop {
-    margin-top: @aui-dropdown-trigger-offset;
-    margin-bottom: 0;
-    z-index: 9999; // re-instated style from core select2 style
-}
-
 .aui-select2-drop .select2-results ul.select2-result-sub > li .select2-result-label,
 .aui-select2-drop .select2-results .select2-result-label,
 .aui-select2-drop .select2-results .select2-searching,
@@ -233,14 +238,16 @@
 .aui-select2-container.select2-container .select2-choice:after {
     #aui.icon-pseudoelement();
     content: @aui-glyph-chevron-down;
-    left: 100%; /* "left" + "margin-left" required because of webkit not working properly with "right" */
     height: 0;
     margin-left: -18px;
     margin-top: -2px;
     opacity: 1;
     position: absolute;
-    top: 7px;
+    top: calc(50% - 10px);
     width: 0;
+    font-size: 16px;
+    line-height: 24px;
+    right: 22px;
 }
 
 /* Set the default text color to inherit.
@@ -271,9 +278,12 @@
 .aui-select2-container.select2-container-multi .select2-choices {
     #aui-forms.aui-select2-input-field-style(normal);
     #aui.icon(@aui-glyph-chevron-down, {
-        font-size: inherit;
+        font-size: 16.5px;
         left: inherit;
-        right: 0;
+        color: var(--aui-button-default-text-color);
+        right: 3px;
+        top: 50%;
+        line-height: 16px;
     });
 
     min-height: 0;

package/src/less/aui-sidebar-skeleton.less

@@ -27,7 +27,6 @@
     #aui.box-sizing();
     min-width: @aui-sidebar-collapsed-width;
     position: absolute;
-    z-index: @aui-z-sidebar;
 
     // when the sidebar sits over the content
     &.aui-sidebar-fly-out {
@@ -56,11 +55,12 @@
         position: absolute;
         top: 0;
         bottom: auto;
+        // explicit z-index needed in order to appear over the top of page layout's #content and #footer on the sidebar's RHS.
+        // they use padding-left to "make space" for sidebar, meaning their background-color bleeds over the top of sidebar.
+        z-index: 1;
 
         &.aui-is-docked {
             position: fixed;
-            top: 0;
-            bottom: auto;
         }
     }
 
@@ -295,6 +295,8 @@
 #content .aui-sidebar + main,
 #content + #footer {
     .aui-page-sidebar & {
+        // needs to be padding, not margin, so that horizontal scrollbars are not drawn.
+        // future iterations of page layout should use grid or flexbox and carve out explicit space for sidebar.
         padding-left: var(--aui-sidebar-width);
     }
 

package/src/less/flag.less

@@ -6,7 +6,7 @@
     position: fixed;
     top: @gutter + 55px; // height of header plus some fudge.
     right: @gutter;
-    z-index: 4000;
+    z-index: @aui-z-flag-container;
 }
 
 .aui-flag {

package/src/less/forms-current.less

@@ -243,13 +243,14 @@ form.aui:not(.aui-legacy-forms) {
     }
 
     // both are @ak-color-N600
-    @chevron-dark:   url('data:image/svg+xml,%3Csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill="%23A5ADBA" d="m6.744 8.744a1.053 1.053 0 0 0 0 1.49l4.547 4.557a1 1 0 0 0 1.416 0l4.55-4.558a1.051 1.051 0 1 0-1.488-1.488l-3.77 3.776-3.768-3.776a1.051 1.051 0 0 0-1.487 0z"/%3E%3C/svg%3E%0A');
-    @chevron-light:  url('data:image/svg+xml,%3Csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill="%23344563" d="m6.744 8.744a1.053 1.053 0 0 0 0 1.49l4.547 4.557a1 1 0 0 0 1.416 0l4.55-4.558a1.051 1.051 0 1 0-1.488-1.488l-3.77 3.776-3.768-3.776a1.051 1.051 0 0 0-1.487 0z"/%3E%3C/svg%3E%0A');
+    @chevron-dark:   url('data:image/svg+xml,%3Csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill="%23A5ADBA" d="M8.292 10.293a1.009 1.009 0 000 1.419l2.939 2.965c.218.215.5.322.779.322s.556-.107.769-.322l2.93-2.955a1.01 1.01 0 000-1.419.987.987 0 00-1.406 0l-2.298 2.317-2.307-2.327a.99.99 0 00-1.406 0z"/%3E%3C/svg%3E%0A');
+    @chevron-light:  url('data:image/svg+xml,%3Csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill="%23344563" d="M8.292 10.293a1.009 1.009 0 000 1.419l2.939 2.965c.218.215.5.322.779.322s.556-.107.769-.322l2.93-2.955a1.01 1.01 0 000-1.419.987.987 0 00-1.406 0l-2.298 2.317-2.307-2.327a.99.99 0 00-1.406 0z"/%3E%3C/svg%3E%0A');
 
     select[disabled]:not([size]),
     .select:not([size]) {
         background-repeat: no-repeat;
-        background-position: 100% 50%;
+        background-position: calc(100% + 1.5px) 50%;
+        background-size: 25px;
     }
 
     select.select[disabled]:not([size]) {
@@ -259,7 +260,7 @@ form.aui:not(.aui-legacy-forms) {
     }
 
     select.select:not([size]) {
-        padding-right: 22px;
+        padding-right: 20px;
         background-image: @chevron-light;
     }