@atlassian/aui 9.10.0 → 9.11.0

package/entry/token-themes-generated/p2/themes/dark.js

@@ -38,6 +38,7 @@ html[data-color-mode="dark"][data-theme~="dark:dark"] {
   --ds-link: #579DFF;
   --ds-link-pressed: #85B8FF;
   --ds-link-visited: #B8ACF6;
+  --ds-link-visited-pressed: #DFD8FD;
   --ds-icon: #9FADBC;
   --ds-icon-accent-lime: #82B536;
   --ds-icon-accent-red: #E2483D;

package/entry/token-themes-generated/p2/themes/legacy-dark.js

@@ -38,6 +38,7 @@ html[data-color-mode="dark"][data-theme~="dark:legacy-dark"] {
   --ds-link: #0052CC;
   --ds-link-pressed: #0065FF;
   --ds-link-visited: #6554C0;
+  --ds-link-visited-pressed: #6554C0;
   --ds-icon: #DCE5F5;
   --ds-icon-accent-lime: #6A9A23;
   --ds-icon-accent-red: #BF2600;

package/entry/token-themes-generated/p2/themes/legacy-light.js

@@ -38,6 +38,7 @@ html[data-color-mode="dark"][data-theme~="dark:legacy-light"] {
   --ds-link: #0052CC;
   --ds-link-pressed: #0747A6;
   --ds-link-visited: #403294;
+  --ds-link-visited-pressed: #403294;
   --ds-icon: #505F79;
   --ds-icon-accent-lime: #6A9A23;
   --ds-icon-accent-red: #FF5630;

package/entry/token-themes-generated/p2/themes/light.js

@@ -38,6 +38,7 @@ html[data-color-mode="dark"][data-theme~="dark:light"] {
   --ds-link: #0C66E4;
   --ds-link-pressed: #0055CC;
   --ds-link-visited: #5E4DB2;
+  --ds-link-visited-pressed: #352C63;
   --ds-icon: #44546F;
   --ds-icon-accent-lime: #6A9A23;
   --ds-icon-accent-red: #C9372C;

package/entry/token-themes-generated/p2/themes/typography-adg3.js

@@ -1,30 +1,32 @@
 export default `
 html[data-theme~="typography:typography-adg3"] {
   --ds-UNSAFE-textTransformUppercase: uppercase;
-  --ds-font-heading-xxlarge: normal 500 2.1875rem/2.5rem var(--ds-font-family-heading);
-  --ds-font-heading-xlarge: normal 600 1.8125rem/2rem var(--ds-font-family-heading);
-  --ds-font-heading-large: normal 500 1.5rem/1.75rem var(--ds-font-family-heading);
-  --ds-font-heading-medium: normal 500 1.25rem/1.5rem var(--ds-font-family-heading);
-  --ds-font-heading-small: normal 600 1rem/1.25rem var(--ds-font-family-heading);
-  --ds-font-heading-xsmall: normal 600 0.875rem/1rem var(--ds-font-family-heading);
-  --ds-font-heading-xxsmall: normal 600 0.75rem/1rem var(--ds-font-family-heading);
-  --ds-font-body-large: normal 400 1rem/1.5rem var(--ds-font-family-body);
-  --ds-font-body: normal 400 0.875rem/1.25rem var(--ds-font-family-body);
-  --ds-font-body-small: normal 400 0.6875rem/1rem var(--ds-font-family-body);
-  --ds-font-ui: normal 400 0.875rem/1 var(--ds-font-family-body);
-  --ds-font-ui-small: normal 400 0.6875rem/1 var(--ds-font-family-body);
-  --ds-font-code: normal 400 0.875em/1 var(--ds-font-family-code);
+  --ds-font-heading-xxlarge: normal 500 2.1875rem/2.5rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
+  --ds-font-heading-xlarge: normal 600 1.8125rem/2rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
+  --ds-font-heading-large: normal 500 1.5rem/1.75rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
+  --ds-font-heading-medium: normal 500 1.25rem/1.5rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
+  --ds-font-heading-small: normal 600 1rem/1.25rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
+  --ds-font-heading-xsmall: normal 600 0.875rem/1rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
+  --ds-font-heading-xxsmall: normal 600 0.75rem/1rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
+  --ds-font-body-large: normal 400 1rem/1.5rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
+  --ds-font-body: normal 400 0.875rem/1.25rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
+  --ds-font-body-small: normal 400 0.6875rem/1rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
+  --ds-font-body-UNSAFE_small: normal 400 0.75rem/1rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
+  --ds-font-ui: normal 500 0.875rem/1 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
+  --ds-font-ui-small: normal 400 0.6875rem/1 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
+  --ds-font-code: normal 400 0.875em/1 ui-monospace, Menlo, "Segoe UI Mono", "Ubuntu Mono", monospace;
   --ds-font-letterSpacing-0: 0;
   --ds-font-letterSpacing-100: -0.003em;
   --ds-font-letterSpacing-200: -0.006em;
   --ds-font-letterSpacing-300: -0.008em;
   --ds-font-letterSpacing-400: -0.01em;
-  --ds-font-family-body: ui-sans-serif, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
+  --ds-font-family-body: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
   --ds-font-family-code: ui-monospace, Menlo, "Segoe UI Mono", "Ubuntu Mono", monospace;
-  --ds-font-family-heading: ui-sans-serif, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
+  --ds-font-family-heading: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
   --ds-font-family-monospace: ui-monospace, Menlo, "Segoe UI Mono", "Ubuntu Mono", monospace;
   --ds-font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-  --ds-font-family-brand: Charlie Sans;
+  --ds-font-family-brand-body: "Charlie Text", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
+  --ds-font-family-brand-heading: "Charlie Display", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
   --ds-font-size-050: 0.6875rem;
   --ds-font-size-075: 0.75rem;
   --ds-font-size-100: 0.875rem;

package/entry/token-themes-generated/p2/themes/typography-minor3.js

@@ -1,35 +1,41 @@
 export default `
 html[data-theme~="typography:typography-minor3"] {
   --ds-UNSAFE-textTransformUppercase: uppercase;
-  --ds-font-heading-xxlarge: normal 700 2rem/2.25rem var(--ds-font-family-heading);
-  --ds-font-heading-xlarge: normal 700 1.75rem/2rem var(--ds-font-family-heading);
-  --ds-font-heading-large: normal 700 1.5rem/1.75rem var(--ds-font-family-heading);
-  --ds-font-heading-medium: normal 700 1.25rem/1.5rem var(--ds-font-family-heading);
-  --ds-font-heading-small: normal 700 1rem/1.25rem var(--ds-font-family-heading);
-  --ds-font-heading-xsmall: normal 700 0.875rem/1rem var(--ds-font-family-heading);
-  --ds-font-heading-xxsmall: normal 700 0.75rem/1rem var(--ds-font-family-heading);
-  --ds-font-body-large: normal 400 1rem/1.5rem var(--ds-font-family-body);
-  --ds-font-body: normal 400 0.875rem/1.25rem var(--ds-font-family-body);
-  --ds-font-body-small: normal 400 0.75rem/1rem var(--ds-font-family-body);
-  --ds-font-ui: normal 400 0.875rem/1 var(--ds-font-family-body);
-  --ds-font-ui-small: normal 400 0.75rem/1 var(--ds-font-family-body);
-  --ds-font-code: normal 400 0.875em/1 var(--ds-font-family-code);
+  --ds-font-heading-xxlarge: normal 700 2rem/2.25rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
+  --ds-font-heading-xlarge: normal 700 1.75rem/2rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
+  --ds-font-heading-large: normal 700 1.5rem/1.75rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
+  --ds-font-heading-medium: normal 700 1.25rem/1.5rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
+  --ds-font-heading-small: normal 700 1rem/1.25rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
+  --ds-font-heading-xsmall: normal 700 0.875rem/1rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
+  --ds-font-heading-xxsmall: normal 700 0.75rem/1rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
+  --ds-font-body-large: normal 400 1rem/1.5rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
+  --ds-font-body: normal 400 0.875rem/1.25rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
+  --ds-font-body-small: normal 400 0.75rem/1rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
+  --ds-font-body-UNSAFE_small: normal 400 0.75rem/1rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
+  --ds-font-ui: normal 500 0.875rem/1 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
+  --ds-font-ui-small: normal 400 0.75rem/1 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
+  --ds-font-code: normal 400 0.875em/1 ui-monospace, Menlo, "Segoe UI Mono", "Ubuntu Mono", monospace;
   --ds-font-letterSpacing-0: 0;
   --ds-font-letterSpacing-100: 0;
   --ds-font-letterSpacing-200: 0;
   --ds-font-letterSpacing-300: 0;
   --ds-font-letterSpacing-400: 0;
-  --ds-font-family-body: ui-sans-serif, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
+  --ds-font-family-body: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
   --ds-font-family-code: ui-monospace, Menlo, "Segoe UI Mono", "Ubuntu Mono", monospace;
-  --ds-font-family-heading: ui-sans-serif, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
+  --ds-font-family-heading: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
   --ds-font-family-monospace: ui-monospace, Menlo, "Segoe UI Mono", "Ubuntu Mono", monospace;
-  --ds-font-family-sans: ui-sans-serif, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
-  --ds-font-family-brand: Charlie Sans;
+  --ds-font-family-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
+  --ds-font-family-brand-body: "Charlie Text", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
+  --ds-font-family-brand-heading: "Charlie Display", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
+  --ds-font-weight-bold: 700;
+  --ds-font-weight-medium: 500;
+  --ds-font-weight-regular: 400;
+  --ds-font-weight-semibold: 600;
   @media not all and (min-width: 64rem) {
-    --ds-font-heading-xxlarge: normal 700 1.75rem/2rem var(--ds-font-family-heading);
-    --ds-font-heading-xlarge: normal 700 1.5rem/1.75rem var(--ds-font-family-heading);
-    --ds-font-heading-large: normal 700 1.25rem/1.5rem var(--ds-font-family-heading);
-    --ds-font-heading-medium: normal 700 1rem/1.25rem var(--ds-font-family-heading);
+    --ds-font-heading-xxlarge: normal 700 1.75rem/2rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
+    --ds-font-heading-xlarge: normal 700 1.5rem/1.75rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
+    --ds-font-heading-large: normal 700 1.25rem/1.5rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
+    --ds-font-heading-medium: normal 700 1rem/1.25rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, system-ui, "Helvetica Neue", sans-serif;
   }
 }
 `

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@atlassian/aui",
     "description": "Atlassian User Interface library",
-    "version": "9.10.0",
+    "version": "9.11.0",
     "author": "Atlassian Pty Ltd.",
     "homepage": "https://aui.atlassian.com",
     "license": "Apache-2.0",
@@ -33,12 +33,12 @@
         "jquery": "^2 || ^3"
     },
     "dependencies": {
-        "@atlaskit/tokens": "1.33.0",
+        "@atlaskit/tokens": "1.43.0",
         "@atlassian/tipsy": "1.3.3",
         "@popperjs/core": "2.11.8",
-        "backbone": "1.5.0",
+        "backbone": "1.6.0",
         "css.escape": "1.5.1",
-        "dompurify": "2.4.7",
+        "dompurify": "2.5.0",
         "fancy-file-input": "2.0.4",
         "jquery-ui": "1.13.2",
         "skatejs": "0.13.17",

package/src/js/aui/flag.js

@@ -1,11 +1,14 @@
 import $ from './jquery';
+import { defaults } from 'underscore';
 import { recomputeStyle } from './internal/animation';
 import amdify from './internal/amdify';
 import globalize from './internal/globalize';
 import keyCode from './key-code';
 import CustomEvent from './polyfills/custom-event';
 import escapeHtml from './escape-html';
-import {CLOSE_BUTTON} from './close-button';
+import { CLOSE_BUTTON } from './close-button';
+import { FOCUSABLE_QUERY } from './internal/a11y/focusable-query';
+import getFocusManager from './focus-manager';
 
 const AUTO_CLOSE_TIME = 8000;
 const ID_FLAG_CONTAINER = 'aui-flag-container';
@@ -15,24 +18,38 @@ const DEFAULT_OPTIONS = {
     title: '',
     type: 'info',
     duration: AUTO_CLOSE_TIME,
+    ariaLive: 'polite'
 };
 
 function flag (flagOptions) {
-    const options = { ...DEFAULT_OPTIONS, ...flagOptions };
+    const options = defaults(flagOptions, DEFAULT_OPTIONS);
     options.title = (options.title || '').toString().trim();
-
     const $flag = renderFlagElement(options);
     extendFlagElement($flag);
 
     if (options.close === 'auto') {
         makeCloseable($flag);
-        makeAutoClosable($flag, options.duration);
+
+        if ($flag.attr('aui-focus-trap') === 'false') {
+            makeAutoClosable($flag, options.duration);
+        }
     } else if (options.close === 'manual') {
         makeCloseable($flag);
     }
 
     handleFlagContainer();
     insertFlag($flag);
+    setTimeout(function () {
+        if ($flag.attr('aui-focus-trap') === 'true') {
+            getFocusManager.global.enter($flag);
+        }
+    }, 0);
+
+    setTimeout(function () {
+        $flag.attr({
+            'aria-hidden': false
+        });
+    }, 100)
 
     return $flag.get(0);
 }
@@ -45,15 +62,19 @@ function extendFlagElement ($flag) {
     };
 }
 
-function renderFlagElement ({body, title, close, type}) {
+function renderFlagElement ({ body, title, close, type, ariaLive }) {
     const titleHtml = title ? `<p class="title"><strong>${escapeHtml(title)}</strong></p>` : '';
     const html = `<div class="aui-message">${titleHtml}</div>`;
+    const ariaLabel = title ? escapeHtml(title) : '';
 
     const $message = $(html)
         .append($.parseHTML(body || ''))
         .addClass(close === 'never' ? '' : 'closeable')
         .addClass(`aui-message-${type}`);
-    return $('<div class="aui-flag" aria-live="polite"></div>').append($message);
+    const isFocusable = $message.find(FOCUSABLE_QUERY).length > 0;
+    const ariaRole = isFocusable ? 'alertdialog' : 'alert';
+
+    return $(`<div aui-focus-trap="${isFocusable}" class="aui-flag" aria-label="${ariaLabel}" aria-hidden="true" aria-live="${escapeHtml(ariaLive)}" role="${ariaRole}"></div>`).append($message);
 }
 
 function makeCloseable ($flag) {
@@ -84,7 +105,12 @@ function closeFlag ($flagToClose) {
     const flag = $flagToClose.get(0);
 
     flag.removeAttribute('open');
-    flag.dispatchEvent(new CustomEvent('aui-flag-close', {bubbles: true}));
+    flag.setAttribute('inert', '');
+    flag.setAttribute('aria-hidden', true);
+    flag.dispatchEvent(new CustomEvent('aui-flag-close', { bubbles: true }));
+    if ($flagToClose.attr('aui-focus-trap')) {
+        getFocusManager.global.exit($flagToClose);
+    }
 
     return flag;
 }
@@ -113,7 +139,7 @@ function insertFlag ($flag) {
 
     $flag
         .removeAttr('hidden')
-        .attr('open','');
+        .attr('open', '');
 }
 
 amdify('aui/flag', flag);

package/src/js/aui/focus-manager.js

@@ -105,7 +105,9 @@ FocusManager.prototype.enter = function ($el, $lastFocused) {
 
 FocusManager.prototype.exit = function ($el) {
     if (elementTrapsFocus($el)) {
-        this._focusTrapStack.pop();
+        this._focusTrapStack.splice(
+            this._focusTrapStack.indexOf($el), 1
+        );
         if (!this._focusTrapStack.length) {
             $(document).off('.aui-focus-manager', this._handler);
             delete this._handler;

package/src/js/aui/internal/a11y/focusable-query.js

@@ -0,0 +1,4 @@
+// eslint-disable-next-line max-len
+export const FOCUSABLE_QUERY = 'a[href], area[href], input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"], [contenteditable], audio[controls], video[controls], summary, [tabindex^="0"], [tabindex^="1"], [tabindex^="2"], [tabindex^="3"], [tabindex^="4"], [tabindex^="5"], [tabindex^="6"], [tabindex^="7"], [tabindex^="8"], [tabindex^="9"]';
+
+

package/src/js/aui/restful-table/edit-row.js

@@ -227,7 +227,7 @@ export default Backbone.View.extend({
 
         this.$el.addClass(this.classNames.DISABLED)
             .find(':submit')
-            .attr('disabled', 'disabled');
+            .prop('disabled', true);
 
         return this;
     },
@@ -254,7 +254,7 @@ export default Backbone.View.extend({
 
         this.$el.removeClass(this.classNames.DISABLED)
             .find(':submit')
-            .removeAttr('disabled');
+            .prop('disabled', false);
 
         return this;
     },

package/src/js/aui/select2.js

@@ -1,5 +1,6 @@
 import $ from './jquery';
 import '../../js-vendor/jquery/plugins/jquery.select2';
+import layer from "./layer";
 
 /**
  * Wraps a vanilla Select2 with ADG _style_, as an auiSelect2 method on jQuery objects.
@@ -21,6 +22,7 @@ const auiHasAvatar = 'aui-has-avatar';
 
 $.fn.auiSelect2 = function (first) {
     let updatedArgs;
+    let dropdownLayer;
 
     if ($.isPlainObject(first)) {
         const auiOpts = $.extend({}, first);
@@ -79,14 +81,20 @@ $.fn.auiSelect2 = function (first) {
 
     select2Instance.on('select2-open', function () {
         const $selectInput = $(this);
+        const $selectDropdown = $selectInput.select2('dropdown');
+
+        if (!dropdownLayer) dropdownLayer = layer();
+        dropdownLayer.show(); // add layer to layer manager to get top z-index
+
+        $selectDropdown.css('z-index', dropdownLayer.$el.css('z-index'));
+        // mask is created during opening event, before open
+        $("#select2-drop-mask").css('z-index', dropdownLayer.$el.css('z-index'));
 
         if (options.multiple || $selectInput.attr('multiple')) {
             // This is a multi-select, exiting
             return;
         }
 
-        const $selectDropdown = $selectInput.select2('dropdown');
-
         if (searchLabel) {
             $selectDropdown.find('.select2-search label').text(searchLabel);
         }
@@ -94,6 +102,9 @@ $.fn.auiSelect2 = function (first) {
 
     select2Instance.on('select2-close', function () {
         const $selectInput = $(this);
+
+        dropdownLayer.hide();
+
         $selectInput.removeData('was-ariadescribedby-cleared');
     });
 

package/src/js/aui/tooltip.js

@@ -48,7 +48,8 @@ const getTipNode = () => {
 const toggleTooltipVisibility = (shouldBeHidden = false) => {
     const tipNode = getTipNode();
     if (tipNode) {
-        tipNode.classList.toggle('assistive', shouldBeHidden)
+        tipNode.classList.toggle('hidden', shouldBeHidden);
+        tipNode.setAttribute('aria-hidden', shouldBeHidden);
     }
 }
 
@@ -60,6 +61,7 @@ class Tooltip {
         this.enabled = this.options.enabled;
         this.moveTitleToTooltip();
         this.initContainer();
+        this.observeTriggerRemoval();
     }
 
     destroy() {
@@ -82,6 +84,38 @@ class Tooltip {
         });
     }
 
+    observeTriggerRemoval() {
+
+        const observedElements = [];
+
+        if (this.options.$delegationRoot && this.options.$delegationRoot.get(0)) {
+            observedElements.push(this.options.$delegationRoot.get(0));
+        }
+
+        if (this.triggerElement) {
+            observedElements.push(this.triggerElement);
+        }
+
+        this.triggerObservers = observedElements
+            .map(element => {
+                const parent = element.parentElement;
+                if (parent) {
+                    const observer = new MutationObserver(() => {
+                        const isToDestroy = !parent.contains(element);
+                        if (isToDestroy) {
+                            this.destroy();
+                        }
+                    });
+                    observer.observe(parent, {
+                        childList: true,
+                        subtree: false // We take trigger parent, so we only care about direct children
+                    });
+                    return observer;
+                }
+            })
+            .filter(observer => !!observer);
+    }
+
     unbindHandlers() {
         const selector = this.options.live;
 
@@ -93,13 +127,17 @@ class Tooltip {
             return;
         }
 
+        if (this.triggerObservers.length > 0) {
+            this.triggerObservers.forEach(observer => observer.disconnect());
+        }
+
         // We only need to unbind event handlers from this particular element
         this.$triggerElement.off(`.${pluginKey}`);
     }
 
     initContainer() {
         if ($sharedTip === undefined || $sharedTip.get(0) && !$sharedTip.get(0).isConnected) {
-            $sharedTip = $(`<div id="${AUI_TOOLTIP_ID}" class="${AUI_TOOLTIP_CLASS_NAME} assistive" role="tooltip"><p class="aui-tooltip-content"></p></div>`);
+            $sharedTip = $(`<div id="${AUI_TOOLTIP_ID}" class="${AUI_TOOLTIP_CLASS_NAME} hidden" role="tooltip" aria-hidden="true"><p class="aui-tooltip-content"></p></div>`);
             $(document.body).append($sharedTip);
         }
     }
@@ -310,14 +348,12 @@ $.fn.tooltip = function (arg) {
         $collection.on(activationEvents, selector, show);
         $collection.on(deactivationEvents, selector, hide);
         $collection.on('keyup', selector, hideOnEsc);
-
-        return $collection;
+    } else {
+        $collection.on(activationEvents, show);
+        $collection.on(deactivationEvents, hide);
+        $collection.on('keyup', hideOnEsc);
     }
 
-    $collection.on(activationEvents, show);
-    $collection.on(deactivationEvents, hide);
-    $collection.on('keyup', hideOnEsc);
-
     return $collection;
 };
 

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

@@ -36,7 +36,7 @@ a.aui-label:active {
 
 .aui-label-split .aui-label-split-main:hover,
 .aui-label-split .aui-label-split-main:active,
-.aui-label-split .aui-label-split-main:focus{
+.aui-label-split .aui-label-split-main:focus {
     text-decoration: none;
 }
 
@@ -55,7 +55,6 @@ a.aui-label:active {
     top: 0;
     bottom: 0;
     width: @aui-label-close-button-width;
-    filter: opacity(0.5);
 
     //The close cross
     &::before {
@@ -64,10 +63,18 @@ a.aui-label:active {
         font-size: 10px;
         margin: auto;
     }
+}
+
+/*
+ * Hover pseudo class can't be triggered in automated tests
+ * As a workaround we use a normal css class for testing
+ */
+.aui-label-closeable:has(.aui-icon-close:hover),
+.aui-label-closeable:has(.aui-icon-close.hover) {
+    background: @aui-label-closable-bg-color;
+    color: @aui-label-closable-text-color;
 
-    &:hover, &:focus {
-        background: var(--aui-label-close-hover-bg-color);
-        color: var(--aui-label-close-hover-text-color);
-        filter: none;
+    a.aui-label-split-main {
+        color: @aui-label-closable-text-color;
     }
 }

package/src/less/forms-radios-and-checkboxes.less

@@ -3,13 +3,14 @@
 @import (reference) './imports/aui-theme/components/forms';
 
 @label-left-offset: 20px;
-@button-border-width: 2px;
+@button-border-width: @aui-form-button-border-width;
 @button-focus-size: 12px;
 @button-focus-border-color: @aui-focus-ring-color;
 @button-focus-border: @aui-form-button-focus-border-width solid @button-focus-border-color;
 
 @radio-offset-top: 4px;
 @radio-offset-left: 0px;
+@radio-glyph-offset-adjustment: 2px;
 
 @checkbox-offset-top: 3px;
 @checkbox-offset-left: 0px;
@@ -48,26 +49,32 @@ form.aui:not(.aui-legacy-forms) {
         top: @radio-offset-top - 1px;
     }
     .aui-radio-position(iconfont) {
-        @fudge: 2px; // the glyph renders in a slightly different position for font-related reasons.
         position: absolute;
-        left: @radio-offset-left - @fudge/2;
-        top: @radio-offset-top - @fudge;
+        left: @radio-offset-left - @radio-glyph-offset-adjustment/2;
+        top: @radio-offset-top - @radio-glyph-offset-adjustment;
+    }
+    .aui-radio-outline-position() {
+        position: absolute;
+        left: @radio-offset-left - @aui-form-button-border-width - @aui-form-radio-checkbox-outline-padding-space;
+        top: @radio-offset-top - 1px - @aui-form-button-border-width - @aui-form-radio-checkbox-outline-padding-space;
     }
     .aui-checkbox-position() {
         position: absolute;
         left: @checkbox-offset-left;
         top: @checkbox-offset-top;
     }
-    .aui-checkbox-focus-position() {
+    .aui-checkbox-outline-position() {
         position: absolute;
-        left: @checkbox-offset-left - @aui-form-button-focus-border-width + 1px;
-        top: @checkbox-offset-top - @aui-form-button-focus-border-width + 1px;
+        left: @checkbox-offset-left - @aui-form-button-border-width - @aui-form-radio-checkbox-outline-padding-space;
+        top: @checkbox-offset-top - @aui-form-button-border-width - @aui-form-radio-checkbox-outline-padding-space;
     }
     .aui-radio-disabled-style() {
         & ~ label {
+            cursor: not-allowed;
             color: @aui-form-disabled-field-label-color;
         }
         & + .aui-form-glyph::before {
+            cursor: not-allowed;
             color: @radio-disabled-bg-color;
             border-color: transparent;
             background: transparent;
@@ -75,9 +82,11 @@ form.aui:not(.aui-legacy-forms) {
     }
     .aui-checkbox-disabled-style() {
         & ~ label {
+            cursor: not-allowed;
             color: @aui-form-disabled-field-label-color;
         }
         & + .aui-form-glyph::before {
+            cursor: not-allowed;
             color: @checkbox-disabled-icon-color;
             border-color: @checkbox-disabled-border-color;
             background: @checkbox-disabled-bg-color;
@@ -200,8 +209,8 @@ form.aui:not(.aui-legacy-forms) {
             }
 
             &:focus + .aui-form-glyph::after {
-                .aui-radio-focus-size();
-                .aui-radio-focus-position();
+                #aui-forms.aui-radio-checkbox-outline-size();
+                .aui-radio-outline-position();
 
                 content: "";
 
@@ -209,10 +218,6 @@ form.aui:not(.aui-legacy-forms) {
                 border-radius: @aui-form-button-size;
                 background-color: transparent;
             }
-
-            &:focus + .aui-form-glyph::before {
-                border-color: @button-focus-border-color;
-            }
         }
     }
 
@@ -269,25 +274,17 @@ form.aui:not(.aui-legacy-forms) {
                 }
             }
 
-            &:focus + .aui-form-glyph::before {
-                border-color: @button-focus-border-color;
-            }
-        }
-    }
+            &:focus + .aui-form-glyph::after {
+                #aui-forms.aui-radio-checkbox-outline-size();
+                .aui-checkbox-outline-position();
 
-    //
-    // Focus styles
-    //
+                content: "";
 
-    .aui-radio-focus-size() {
-        display: inline-block;
-        width: @aui-form-button-size;
-        height: @aui-form-button-size;
-    }
-    .aui-radio-focus-position() {
-        position: absolute;
-        left: @radio-offset-left;
-        top: @radio-offset-top - 1px;
+                border: @button-focus-border;
+                border-radius: @checkbox-border-radius;
+                background-color: transparent;
+            }
+        }
     }
 
 }

package/src/less/imports/aui-theme/adg/adg-colors.less

@@ -32,6 +32,7 @@
 // Blues
 @ak-color-B50: #DEEBFF;
 @ak-color-B75: #B3D4FF;
+@ak-color-B90: #60a4ff;
 @ak-color-B100: #4C9AFF;
 @ak-color-B200: #2684FF;
 @ak-color-B300: #0065FF;