npm - genesys-spark-components - Versions diffs - 3.74.0 → 3.76.0 - Mend

genesys-spark-components 3.74.0 → 3.76.0

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

Files changed (432) hide show

package/dist/cjs/gux-time-picker-beta.cjs.entry.js CHANGED Viewed

@@ -7,7 +7,7 @@ const onClickOutside = require('./on-click-outside-2c616788.js');
 const simulateNativeEvent = require('./simulate-native-event-fe3e62da.js');
 const afterNextRender = require('./after-next-render-a09f528a.js');
 const index = require('./index-c4441830.js');
-const usage = require('./usage-7326b1ee.js');
+const usage = require('./usage-413eea02.js');
 require('./get-closest-element-ab4b2eee.js');
 const am = "AM";
@@ -166,7 +166,7 @@ function getValidValueMinuteChange(value, change, selectionStart) {
   return `${hour}:${wanted}`;
 }
-const guxTimePickerCss = ".gux-time-picker{position:relative;display:inline-block}.gux-time-picker.gux-error .gux-input-time{border-color:#ea0b0b}.gux-time-picker .gux-input-time{box-sizing:border-box;display:flex;flex-direction:row;flex-wrap:nowrap;gap:8px;align-content:stretch;align-items:center;justify-content:center;width:100%;height:32px;padding:4px 8px 4px 8px;font-family:inherit;font-size:12px;line-height:1.6667;color:#2e394c;background-color:#f6f7f9;background-image:none;border:1px solid #6b7585;border-radius:4px;box-shadow:inset 0 0 4px rgba(32, 41, 55, 0.16)}.gux-time-picker .gux-input-time:focus-within{border-color:#2a60c8;outline:3px solid #aac9ff;outline-offset:1px;box-shadow:0 0 0 1px #fdfdfd}.gux-time-picker .gux-input-time input{flex:1 1 auto;align-self:auto;order:0;width:20px;padding:0;font-size:12px;color:#2e394c;text-align:center;text-align:left;background-color:#f6f7f9;border:none;outline:none}.gux-time-picker .gux-input-time input.gux-input-time-hours{text-align:right}.gux-time-picker .gux-input-time input::placeholder{color:#596373;opacity:1}.gux-time-picker .gux-input-time .gux-input-time-am-pm-selector{display:grid;grid-template:auto 1fr / auto 1fr auto;place-items:flex-end;padding:0;font-size:12px;font-weight:bold;color:#2e394c;background:transparent;border:none;outline:none}.gux-time-picker .gux-input-time .gux-input-time-am-pm-selector:not(:disabled):hover{color:#2a60c8;cursor:pointer}.gux-time-picker .gux-input-time .gux-input-time-am-pm-selector:focus-visible{color:#2a60c8}.gux-time-picker .gux-input-time .gux-input-time-am-pm-selector .gux-meridiem{grid-row:1;grid-column:1;visibility:hidden}.gux-time-picker .gux-input-time .gux-input-time-am-pm-selector .gux-meridiem.gux-visible{visibility:visible}.gux-time-picker .gux-input-time .gux-clock-button{display:flex;flex:0 1 auto;align-items:center;align-self:auto;justify-content:center;order:0;padding:0;color:#596373;background:transparent;border:none}.gux-time-picker .gux-input-time .gux-clock-button.gux-active:not(:disabled){color:#2a60c8;cursor:pointer}.gux-time-picker .gux-input-time .gux-clock-button.gux-active:not(:disabled):hover{color:#2a60c8 !important;cursor:pointer}.gux-time-picker .gux-input-time .gux-clock-button:not(:disabled):hover{color:#2e394c;cursor:pointer}.gux-time-picker .gux-input-time .gux-clock-button:focus{border:none;outline:none}.gux-time-picker .gux-input-time .gux-clock-button:focus-visible gux-icon{outline:2px solid #aac9ff;outline-offset:0;border-radius:2px}.gux-time-picker .gux-input-time .gux-clock-button gux-icon{width:16px;height:16px}.gux-time-picker .gux-list-container{max-height:150px;padding:8px 0;margin:0;overflow-y:scroll;list-style:none;background-color:#fdfdfd;border:1px solid #b4bccb;border-radius:4px;box-shadow:0 2px 4px rgba(32, 41, 55, 0.24)}";
+const guxTimePickerCss = ".gux-time-picker{position:relative;display:inline-block}.gux-time-picker.gux-error .gux-input-time{border-color:#ea0b0b}.gux-time-picker .gux-input-time{box-sizing:border-box;display:flex;flex-direction:row;flex-wrap:nowrap;gap:8px;align-content:stretch;align-items:center;justify-content:center;width:100%;height:32px;padding:4px 8px 4px 8px;font-family:inherit;font-size:12px;line-height:1.6667;color:#2e394c;background-color:#f6f7f9;background-image:none;border:1px solid #6b7585;border-radius:4px;box-shadow:inset 0 0 4px rgba(32, 41, 55, 0.16)}.gux-time-picker .gux-input-time .gux-input-time-container{border-radius:2px}.gux-time-picker .gux-input-time .gux-input-time-container:has(:focus-visible){outline:3px solid #aac9ff;outline-offset:1px;box-shadow:0 0 0 1px #fdfdfd}@supports not selector(:has(:focus-visible)){.gux-time-picker .gux-input-time .gux-input-time-container:focus-within{outline:3px solid #aac9ff;outline-offset:1px;box-shadow:0 0 0 1px #fdfdfd}}.gux-time-picker .gux-input-time input{flex:1 1 auto;align-self:auto;order:0;width:20px;padding:0;font-size:12px;color:#2e394c;text-align:center;text-align:left;background-color:#f6f7f9;border:none;outline:none}.gux-time-picker .gux-input-time input.gux-input-time-hours{text-align:right}.gux-time-picker .gux-input-time input::placeholder{color:#596373;opacity:1}.gux-time-picker .gux-input-time .gux-input-time-am-pm-selector{display:grid;grid-template:auto 1fr / auto 1fr auto;place-items:flex-end;padding:0;font-size:12px;font-weight:bold;color:#2e394c;background:transparent;border:none;outline:none}.gux-time-picker .gux-input-time .gux-input-time-am-pm-selector:not(:disabled):hover{color:#2a60c8;cursor:pointer}.gux-time-picker .gux-input-time .gux-input-time-am-pm-selector:focus-visible{color:#2a60c8;outline:2px solid #aac9ff;outline-offset:0;border-radius:2px}.gux-time-picker .gux-input-time .gux-input-time-am-pm-selector .gux-meridiem{grid-row:1;grid-column:1;visibility:hidden}.gux-time-picker .gux-input-time .gux-input-time-am-pm-selector .gux-meridiem.gux-visible{visibility:visible}.gux-time-picker .gux-input-time .gux-clock-button{display:flex;flex:0 1 auto;align-items:center;align-self:auto;justify-content:center;order:0;padding:0;color:#596373;background:transparent;border:none}.gux-time-picker .gux-input-time .gux-clock-button.gux-active:not(:disabled){color:#2a60c8;cursor:pointer}.gux-time-picker .gux-input-time .gux-clock-button.gux-active:not(:disabled):hover{color:#2a60c8 !important;cursor:pointer}.gux-time-picker .gux-input-time .gux-clock-button:not(:disabled):hover{color:#2e394c;cursor:pointer}.gux-time-picker .gux-input-time .gux-clock-button:focus{border:none;outline:none}.gux-time-picker .gux-input-time .gux-clock-button:focus-visible gux-icon{outline:2px solid #aac9ff;outline-offset:0;border-radius:2px}.gux-time-picker .gux-input-time .gux-clock-button gux-icon{width:16px;height:16px}.gux-time-picker .gux-list-container{max-height:150px;padding:8px 0;margin:0;overflow-y:scroll;list-style:none;background-color:#fdfdfd;border:1px solid #b4bccb;border-radius:4px;box-shadow:0 2px 4px rgba(32, 41, 55, 0.24)}";
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -341,7 +341,7 @@ const GuxTimePickerBeta = class {
     return isAm(this.value) ? this.i18n('am') : this.i18n('pm');
   }
   renderNumberInput() {
-    return (index$1.h("div", null, index$1.h("input", { class: "gux-input-time-hours", type: "text", disabled: this.disabled, value: getHourDisplayValue(this.value, this.clockType), onKeyDown: e => this.onHourKeyDown(e), "aria-label": this.i18n('hoursInput'), pattern: getHoursPattern(this.clockType), ref: el => (this.hourInputElement = el) }), index$1.h("span", { class: "gux-time-separator" }, this.i18n('time-separator')), index$1.h("input", { class: "gux-input-time-minutes", type: "text", disabled: this.disabled, value: getMinuteDisplayValue(this.value), onKeyDown: e => this.onMinuteKeyDown(e), "aria-label": this.i18n('minutesInput'), pattern: getMinutesPattern(), ref: el => (this.minuteInputElement = el) })));
+    return (index$1.h("div", { class: "gux-input-time-container" }, index$1.h("input", { class: "gux-input-time-hours", type: "text", disabled: this.disabled, value: getHourDisplayValue(this.value, this.clockType), onKeyDown: e => this.onHourKeyDown(e), "aria-label": this.i18n('hoursInput'), pattern: getHoursPattern(this.clockType), ref: el => (this.hourInputElement = el) }), index$1.h("span", { class: "gux-time-separator" }, this.i18n('time-separator')), index$1.h("input", { class: "gux-input-time-minutes", type: "text", disabled: this.disabled, value: getMinuteDisplayValue(this.value), onKeyDown: e => this.onMinuteKeyDown(e), "aria-label": this.i18n('minutesInput'), pattern: getMinutesPattern(), ref: el => (this.minuteInputElement = el) })));
   }
   renderAmPmSelector() {
     if (this.clockType === '12h') {

package/dist/cjs/gux-toggle-slider.cjs.entry.js CHANGED Viewed

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-d3bc59d7.js');
-const guxToggleSliderCss = "gux-toggle-slider{padding:2px;outline:none}gux-toggle-slider .gux-toggle-slider{position:relative;display:inline-block;flex:0 1 auto;align-self:auto;order:0;width:30px;height:16px;border-radius:8px}gux-toggle-slider .gux-toggle-slider.gux-disabled{pointer-events:none;cursor:default;opacity:0.5}gux-toggle-slider .gux-toggle-slider:focus{outline:none;outline:3px solid #aac9ff;outline-offset:1px;box-shadow:0 0 0 1px #fdfdfd}gux-toggle-slider .gux-toggle-slider .gux-slider{position:absolute;top:0;right:0;bottom:0;left:0;background-color:#6b7585;border-radius:8px;transition:background-color 0.5s ease}gux-toggle-slider .gux-toggle-slider .gux-slider .gux-switch{position:absolute;bottom:1px;left:1px;width:14px;height:14px;content:'';background-color:#fdfdfd;border-radius:50%;transition:0.5s}gux-toggle-slider .gux-toggle-slider .gux-slider .gux-switch gux-icon{position:absolute;top:0;right:0;bottom:0;left:0;width:12px;height:12px;padding:1px;color:#fdfdfd;opacity:0;transition:color 0.5s linear}gux-toggle-slider .gux-toggle-slider.gux-checked .gux-slider{background-color:#2a60c8}gux-toggle-slider .gux-toggle-slider.gux-checked .gux-slider .gux-switch{transform:translateX(14px)}gux-toggle-slider .gux-toggle-slider.gux-checked .gux-slider .gux-switch gux-icon{color:#2a60c8;opacity:1;transition:opacity 0.25s linear;transition-delay:0.25s}";
+const guxToggleSliderCss = "gux-toggle-slider{padding:2px;outline:none}gux-toggle-slider .gux-toggle-slider{position:relative;display:inline-block;flex:0 1 auto;align-self:auto;order:0;width:30px;height:16px;border-radius:8px}gux-toggle-slider .gux-toggle-slider.gux-disabled{pointer-events:none;cursor:default;opacity:0.5}gux-toggle-slider .gux-toggle-slider:focus-visible{outline:none;outline:3px solid #aac9ff;outline-offset:1px;box-shadow:0 0 0 1px #fdfdfd}gux-toggle-slider .gux-toggle-slider .gux-slider{position:absolute;top:0;right:0;bottom:0;left:0;background-color:#6b7585;border-radius:8px;transition:background-color 0.5s ease}gux-toggle-slider .gux-toggle-slider .gux-slider .gux-switch{position:absolute;bottom:1px;left:1px;width:14px;height:14px;content:'';background-color:#fdfdfd;border-radius:50%;transition:0.5s}gux-toggle-slider .gux-toggle-slider .gux-slider .gux-switch gux-icon{position:absolute;top:0;right:0;bottom:0;left:0;width:12px;height:12px;padding:1px;color:#fdfdfd;opacity:0;transition:color 0.5s linear}gux-toggle-slider .gux-toggle-slider.gux-checked .gux-slider{background-color:#2a60c8}gux-toggle-slider .gux-toggle-slider.gux-checked .gux-slider .gux-switch{transform:translateX(14px)}gux-toggle-slider .gux-toggle-slider.gux-checked .gux-slider .gux-switch gux-icon{color:#2a60c8;opacity:1;transition:opacity 0.25s linear;transition-delay:0.25s}";
 const GuxToggleSlider = class {
   constructor(hostRef) {

package/dist/cjs/gux-toggle.cjs.entry.js CHANGED Viewed

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-d3bc59d7.js');
-const usage = require('./usage-7326b1ee.js');
+const usage = require('./usage-413eea02.js');
 const randomHtmlId = require('./random-html-id-b86b61c0.js');
 const index$1 = require('./index-c4441830.js');
 require('./get-closest-element-ab4b2eee.js');

package/dist/cjs/gux-tooltip.cjs.entry.js CHANGED Viewed

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-d3bc59d7.js');
 const floatingUi_dom_esm = require('./floating-ui.dom.esm-bcc0c680.js');
 const randomHtmlId = require('./random-html-id-b86b61c0.js');
-const usage = require('./usage-7326b1ee.js');
+const usage = require('./usage-413eea02.js');
 const findElementById = require('./find-element-by-id-7a79ceeb.js');
 const afterNextRender = require('./after-next-render-a09f528a.js');

package/dist/cjs/gux-visualization-beta.cjs.entry.js CHANGED Viewed

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index$2 = require('./index-d3bc59d7.js');
 const _commonjsHelpers = require('./_commonjsHelpers-0c557e26.js');
 const index$3 = require('./index-c4441830.js');
-const usage = require('./usage-7326b1ee.js');
+const usage = require('./usage-413eea02.js');
 require('./get-closest-element-ab4b2eee.js');
 /*!

package/dist/cjs/{usage-7326b1ee.js → usage-413eea02.js} RENAMED Viewed

@@ -1,7 +1,7 @@
 'use strict';
 const name = "genesys-spark-components";
-const version = "3.74.0";
+const version = "3.76.0";
 const description = "Common webcomponents";
 const license = "MIT";
 const main = "dist/stencil-wrapper.js";

package/dist/collection/components/beta/gux-button-slot/gux-button-slot.css CHANGED Viewed

@@ -36,9 +36,9 @@
 ::slotted(button:focus) {
   outline: none;
 }
-::slotted(input[type='button']:focus:enabled),
-::slotted(input[type='submit']:focus:enabled),
-::slotted(button:focus:enabled) {
+::slotted(input[type='button']:focus-visible:enabled),
+::slotted(input[type='submit']:focus-visible:enabled),
+::slotted(button:focus-visible:enabled) {
   outline: 3px solid #aac9ff;
   outline-offset: 1px;
   box-shadow: 0 0 0 1px #fdfdfd;

package/dist/collection/components/beta/gux-column-manager/gux-column-manager-item/gux-column-manager-item.css CHANGED Viewed

@@ -36,7 +36,7 @@
   cursor: grab;
   border-radius: 4px;
 }
-.gux-container .gux-reorder.gux-reordering:focus gux-icon {
+.gux-container .gux-reorder.gux-reordering:focus-visible gux-icon {
   color: #2a60c8;
 }
 .gux-container .gux-reorder:active {
@@ -44,12 +44,12 @@
   cursor: grabbing !important;
 }
 .gux-container .gux-reorder:hover,
-.gux-container .gux-reorder:focus {
+.gux-container .gux-reorder:focus-visible {
   outline: 2px solid #aac9ff;
   outline-offset: 0;
 }
 .gux-container .gux-reorder:hover gux-icon,
-.gux-container .gux-reorder:focus gux-icon {
+.gux-container .gux-reorder:focus-visible gux-icon {
   color: #2a60c8;
 }
 .gux-container .gux-select {

package/dist/collection/components/beta/gux-copy-to-clipboard/gux-copy-to-clipboard.css CHANGED Viewed

@@ -29,14 +29,14 @@ button {
   background-color: #deeaff;
   border-radius: 4px;
 }
-.gux-copy-to-clipboard-wrapper:focus {
+.gux-copy-to-clipboard-wrapper:focus-visible {
   outline: none;
 }
-.gux-copy-to-clipboard-wrapper:focus ::slotted(*) {
+.gux-copy-to-clipboard-wrapper:focus-visible ::slotted(*) {
   background-color: #deeaff;
   border-radius: 4px;
 }
-.gux-copy-to-clipboard-wrapper:focus gux-icon[icon-name='copy'] {
+.gux-copy-to-clipboard-wrapper:focus-visible gux-icon[icon-name='copy'] {
   visibility: visible;
 }
 .gux-copy-to-clipboard-wrapper gux-tooltip {

package/dist/collection/components/beta/gux-dropdown-multi/gux-dropdown-multi.css CHANGED Viewed

@@ -106,7 +106,7 @@
   border-radius: 4px;
   box-shadow: inset 0 0 4px rgba(32, 41, 55, 0.16);
 }
-.gux-target-container-expanded:focus,
+.gux-target-container-expanded:focus-visible,
 .gux-target-container-expanded:focus-within {
   outline: 3px solid #aac9ff;
   outline-offset: 1px;
@@ -138,7 +138,7 @@
   border-radius: 4px;
   box-shadow: inset 0 0 4px rgba(32, 41, 55, 0.16);
 }
-.gux-target-container-collapsed .gux-field-button:focus,
+.gux-target-container-collapsed .gux-field-button:focus-visible,
 .gux-target-container-collapsed .gux-field-button:focus-within {
   outline: 3px solid #aac9ff;
   outline-offset: 1px;

package/dist/collection/components/beta/gux-month-picker/gux-month-calendar/gux-month-calendar.css CHANGED Viewed

@@ -24,7 +24,7 @@
   border: none;
   outline: none;
 }
-.gux-month-calendar .gux-year-header button:focus {
+.gux-month-calendar .gux-year-header button:focus-visible {
   border-radius: 4px;
   outline: 3px solid #aac9ff;
   outline-offset: 1px;
@@ -63,7 +63,7 @@
   font-size: 12px;
   line-height: 20px;
 }
-.gux-month-calendar .gux-months button:focus {
+.gux-month-calendar .gux-months button:focus-visible {
   outline: 3px solid #aac9ff;
   outline-offset: 1px;
   box-shadow: 0 0 0 1px #fdfdfd;

package/dist/collection/components/beta/gux-month-picker/gux-month-calendar/gux-month-list/gux-month-list-item/gux-month-list-item.css CHANGED Viewed

@@ -34,7 +34,7 @@
   color: #fdfdfd;
   background: #2a60c8;
 }
-.gux-container button:focus:not(:disabled) {
+.gux-container button:focus-visible:not(:disabled) {
   outline: 3px solid #aac9ff;
   outline-offset: 1px;
   box-shadow: 0 0 0 1px #fdfdfd;

package/dist/collection/components/beta/gux-month-picker/gux-month-picker.css CHANGED Viewed

@@ -10,6 +10,11 @@
   border-radius: 4px;
   box-shadow: inset 0 0 4px rgba(32, 41, 55, 0.16);
 }
+.gux-target:focus-within {
+  outline: 3px solid #aac9ff;
+  outline-offset: 1px;
+  box-shadow: 0 0 0 1px #fdfdfd;
+}
 .gux-target .gux-display {
   display: inline-flex;
   min-width: 100px;
@@ -22,7 +27,7 @@
 .gux-target .gux-display .gux-spinner:not(:first-child) {
   margin-left: 4px;
 }
-.gux-target .gux-display .gux-spinner:focus {
+.gux-target .gux-display .gux-spinner:focus-visible {
   background: #deeaff;
 }
 .gux-target .gux-display .gux-spinner.gux-empty {
@@ -36,7 +41,7 @@
   border: none;
   border-radius: 4px;
 }
-.gux-target .gux-popup-toggle:focus {
+.gux-target .gux-popup-toggle:focus-visible {
   outline: 3px solid #aac9ff;
   outline-offset: 1px;
   box-shadow: 0 0 0 1px #fdfdfd;
@@ -53,7 +58,7 @@
 .gux-target .gux-popup-toggle.gux-expanded {
   color: #2a60c8;
 }
-.gux-target .gux-popup-toggle.gux-expanded:not(:disabled):focus,
+.gux-target .gux-popup-toggle.gux-expanded:not(:disabled):focus-visible,
 .gux-target .gux-popup-toggle.gux-expanded:not(:disabled):hover {
   color: #2a60c8;
 }

package/dist/collection/components/beta/gux-phone-input/gux-phone-input.css CHANGED Viewed

@@ -108,7 +108,7 @@
   border: none;
   outline: inherit;
 }
-.gux-field-button:focus {
+.gux-field-button:focus-visible {
   outline: 3px solid #aac9ff;
   outline-offset: 1px;
   box-shadow: 0 0 0 1px #fdfdfd;

package/dist/collection/components/beta/gux-table/gux-table-select-menu/gux-table-select-menu.css CHANGED Viewed

@@ -18,7 +18,7 @@ gux-table-select-menu .gux-select-menu-button:disabled {
 gux-table-select-menu .gux-select-menu-button:hover:not(gux-table-select-menu .gux-select-menu-button:disabled) {
   color: #2e394c;
 }
-gux-table-select-menu .gux-select-menu-button:focus gux-icon {
+gux-table-select-menu .gux-select-menu-button:focus-visible gux-icon {
   outline: 3px solid #aac9ff;
   outline-offset: 1px;
   box-shadow: 0 0 0 1px #fdfdfd;

package/dist/collection/components/beta/gux-time-picker/gux-time-picker.css CHANGED Viewed

@@ -27,12 +27,21 @@
   border-radius: 4px;
   box-shadow: inset 0 0 4px rgba(32, 41, 55, 0.16);
 }
-.gux-time-picker .gux-input-time:focus-within {
-  border-color: #2a60c8;
+.gux-time-picker .gux-input-time .gux-input-time-container {
+  border-radius: 2px;
+}
+.gux-time-picker .gux-input-time .gux-input-time-container:has(:focus-visible) {
   outline: 3px solid #aac9ff;
   outline-offset: 1px;
   box-shadow: 0 0 0 1px #fdfdfd;
 }
+@supports not selector(:has(:focus-visible)) {
+  .gux-time-picker .gux-input-time .gux-input-time-container:focus-within {
+    outline: 3px solid #aac9ff;
+    outline-offset: 1px;
+    box-shadow: 0 0 0 1px #fdfdfd;
+  }
+}
 .gux-time-picker .gux-input-time input {
   flex: 1 1 auto;
   align-self: auto;
@@ -72,6 +81,9 @@
 }
 .gux-time-picker .gux-input-time .gux-input-time-am-pm-selector:focus-visible {
   color: #2a60c8;
+  outline: 2px solid #aac9ff;
+  outline-offset: 0;
+  border-radius: 2px;
 }
 .gux-time-picker .gux-input-time .gux-input-time-am-pm-selector .gux-meridiem {
   grid-row: 1;

package/dist/collection/components/beta/gux-time-picker/gux-time-picker.js CHANGED Viewed

@@ -178,7 +178,7 @@ export class GuxTimePickerBeta {
     return isAm(this.value) ? this.i18n('am') : this.i18n('pm');
   }
   renderNumberInput() {
-    return (h("div", null, h("input", { class: "gux-input-time-hours", type: "text", disabled: this.disabled, value: getHourDisplayValue(this.value, this.clockType), onKeyDown: e => this.onHourKeyDown(e), "aria-label": this.i18n('hoursInput'), pattern: getHoursPattern(this.clockType), ref: el => (this.hourInputElement = el) }), h("span", { class: "gux-time-separator" }, this.i18n('time-separator')), h("input", { class: "gux-input-time-minutes", type: "text", disabled: this.disabled, value: getMinuteDisplayValue(this.value), onKeyDown: e => this.onMinuteKeyDown(e), "aria-label": this.i18n('minutesInput'), pattern: getMinutesPattern(), ref: el => (this.minuteInputElement = el) })));
+    return (h("div", { class: "gux-input-time-container" }, h("input", { class: "gux-input-time-hours", type: "text", disabled: this.disabled, value: getHourDisplayValue(this.value, this.clockType), onKeyDown: e => this.onHourKeyDown(e), "aria-label": this.i18n('hoursInput'), pattern: getHoursPattern(this.clockType), ref: el => (this.hourInputElement = el) }), h("span", { class: "gux-time-separator" }, this.i18n('time-separator')), h("input", { class: "gux-input-time-minutes", type: "text", disabled: this.disabled, value: getMinuteDisplayValue(this.value), onKeyDown: e => this.onMinuteKeyDown(e), "aria-label": this.i18n('minutesInput'), pattern: getMinutesPattern(), ref: el => (this.minuteInputElement = el) })));
   }
   renderAmPmSelector() {
     if (this.clockType === '12h') {

package/dist/collection/components/legacy/gux-command-palette-legacy/gux-command-palette.css CHANGED Viewed

@@ -95,13 +95,13 @@ gux-command-palette-legacy .gux-command-palette gux-list-legacy gux-list-item-le
   color: #2e394c;
   background: #fdfdfd;
 }
-.gux-command-palette-light-theme .gux-command-palette gux-list-legacy gux-list-item-legacy:focus .gux-list-item div,
+.gux-command-palette-light-theme .gux-command-palette gux-list-legacy gux-list-item-legacy:focus-visible .gux-list-item div,
 .gux-command-palette-light-theme .gux-command-palette gux-list-legacy gux-list-item-legacy:active .gux-list-item div,
 .gux-command-palette-light-theme .gux-command-palette gux-list-legacy gux-list-item-legacy:hover .gux-list-item div {
   color: #fdfdfd;
   background: #2a60c8;
 }
-.gux-command-palette-light-theme .gux-command-palette gux-list-legacy gux-list-item-legacy:focus .gux-list-item .gux-details,
+.gux-command-palette-light-theme .gux-command-palette gux-list-legacy gux-list-item-legacy:focus-visible .gux-list-item .gux-details,
 .gux-command-palette-light-theme .gux-command-palette gux-list-legacy gux-list-item-legacy:active .gux-list-item .gux-details,
 .gux-command-palette-light-theme .gux-command-palette gux-list-legacy gux-list-item-legacy:hover .gux-list-item .gux-details {
   color: #fdfdfd;
@@ -113,13 +113,13 @@ gux-command-palette-legacy .gux-command-palette gux-list-legacy gux-list-item-le
   color: #2e394c;
   background: #fdfdfd;
 }
-.gux-light-theme gux-command-palette-legacy .gux-command-palette gux-list-legacy gux-list-item-legacy:focus .gux-list-item div,
+.gux-light-theme gux-command-palette-legacy .gux-command-palette gux-list-legacy gux-list-item-legacy:focus-visible .gux-list-item div,
 .gux-light-theme gux-command-palette-legacy .gux-command-palette gux-list-legacy gux-list-item-legacy:active .gux-list-item div,
 .gux-light-theme gux-command-palette-legacy .gux-command-palette gux-list-legacy gux-list-item-legacy:hover .gux-list-item div {
   color: #fdfdfd;
   background: #2a60c8;
 }
-.gux-light-theme gux-command-palette-legacy .gux-command-palette gux-list-legacy gux-list-item-legacy:focus .gux-list-item .gux-details,
+.gux-light-theme gux-command-palette-legacy .gux-command-palette gux-list-legacy gux-list-item-legacy:focus-visible .gux-list-item .gux-details,
 .gux-light-theme gux-command-palette-legacy .gux-command-palette gux-list-legacy gux-list-item-legacy:active .gux-list-item .gux-details,
 .gux-light-theme gux-command-palette-legacy .gux-command-palette gux-list-legacy gux-list-item-legacy:hover .gux-list-item .gux-details {
   color: #fdfdfd;
@@ -131,13 +131,13 @@ gux-command-palette-legacy.gux-light-theme .gux-command-palette {
   color: #2e394c;
   background: #fdfdfd;
 }
-gux-command-palette-legacy.gux-light-theme .gux-command-palette gux-list-legacy gux-list-item-legacy:focus .gux-list-item div,
+gux-command-palette-legacy.gux-light-theme .gux-command-palette gux-list-legacy gux-list-item-legacy:focus-visible .gux-list-item div,
 gux-command-palette-legacy.gux-light-theme .gux-command-palette gux-list-legacy gux-list-item-legacy:active .gux-list-item div,
 gux-command-palette-legacy.gux-light-theme .gux-command-palette gux-list-legacy gux-list-item-legacy:hover .gux-list-item div {
   color: #fdfdfd;
   background: #2a60c8;
 }
-gux-command-palette-legacy.gux-light-theme .gux-command-palette gux-list-legacy gux-list-item-legacy:focus .gux-list-item .gux-details,
+gux-command-palette-legacy.gux-light-theme .gux-command-palette gux-list-legacy gux-list-item-legacy:focus-visible .gux-list-item .gux-details,
 gux-command-palette-legacy.gux-light-theme .gux-command-palette gux-list-legacy gux-list-item-legacy:active .gux-list-item .gux-details,
 gux-command-palette-legacy.gux-light-theme .gux-command-palette gux-list-legacy gux-list-item-legacy:hover .gux-list-item .gux-details {
   color: #fdfdfd;
@@ -149,13 +149,13 @@ gux-command-palette-legacy .gux-command-palette {
   color: #2e394c;
   background: #fdfdfd;
 }
-gux-command-palette-legacy .gux-command-palette gux-list-legacy gux-list-item-legacy:focus .gux-list-item div,
+gux-command-palette-legacy .gux-command-palette gux-list-legacy gux-list-item-legacy:focus-visible .gux-list-item div,
 gux-command-palette-legacy .gux-command-palette gux-list-legacy gux-list-item-legacy:active .gux-list-item div,
 gux-command-palette-legacy .gux-command-palette gux-list-legacy gux-list-item-legacy:hover .gux-list-item div {
   color: #fdfdfd;
   background: #2a60c8;
 }
-gux-command-palette-legacy .gux-command-palette gux-list-legacy gux-list-item-legacy:focus .gux-list-item .gux-details,
+gux-command-palette-legacy .gux-command-palette gux-list-legacy gux-list-item-legacy:focus-visible .gux-list-item .gux-details,
 gux-command-palette-legacy .gux-command-palette gux-list-legacy gux-list-item-legacy:active .gux-list-item .gux-details,
 gux-command-palette-legacy .gux-command-palette gux-list-legacy gux-list-item-legacy:hover .gux-list-item .gux-details {
   color: #fdfdfd;

package/dist/collection/components/legacy/gux-dropdown-legacy/gux-dropdown.css CHANGED Viewed

@@ -117,7 +117,7 @@ gux-dropdown-legacy div.gux-dropdown .gux-options > gux-option-legacy:not([disab
   background: #deeaff;
 }
 gux-dropdown-legacy div.gux-dropdown .gux-options > gux-option-legacy:not([disabled]):hover,
-gux-dropdown-legacy div.gux-dropdown .gux-options > gux-option-legacy:not([disabled]):focus {
+gux-dropdown-legacy div.gux-dropdown .gux-options > gux-option-legacy:not([disabled]):focus-visible {
   color: #fdfdfd;
   background: #2a60c8;
 }
@@ -152,7 +152,7 @@ gux-dropdown-legacy div.gux-dropdown.gux-page .gux-select-field gux-input-text-l
   border-bottom: 2px solid transparent;
   caret-color: #2e394c;
 }
-gux-dropdown-legacy div.gux-dropdown.gux-page .gux-select-field gux-input-text-like input:focus {
+gux-dropdown-legacy div.gux-dropdown.gux-page .gux-select-field gux-input-text-like input:focus-visible {
   border: none;
   border-bottom: 2px solid rgba(117, 168, 255, 0.5);
   box-shadow: none;
@@ -189,7 +189,7 @@ gux-dropdown-legacy div.gux-dropdown.gux-palette .gux-select-field gux-input-tex
   border: none;
   border-bottom: 2px solid transparent;
 }
-gux-dropdown-legacy div.gux-dropdown.gux-palette .gux-select-field gux-input-text-like input:focus {
+gux-dropdown-legacy div.gux-dropdown.gux-palette .gux-select-field gux-input-text-like input:focus-visible {
   border: none;
   border-bottom: 2px solid rgba(117, 168, 255, 0.5);
   box-shadow: none;
@@ -198,7 +198,7 @@ gux-dropdown-legacy div.gux-dropdown.gux-palette.gux-active .gux-select-field gu
   border-bottom: 1px solid #2a60c8;
 }
 gux-dropdown-legacy:hover gux-icon,
-gux-dropdown-legacy:focus gux-icon {
+gux-dropdown-legacy:focus-visible gux-icon {
   color: #2e394c;
 }
 .gux-dropdown-light-theme div.gux-dropdown .gux-select-field .gux-filter-suggestion {

package/dist/collection/components/legacy/gux-form-field-legacy/components/gux-input-checkbox/gux-input-checkbox.css CHANGED Viewed

@@ -29,7 +29,7 @@ gux-input-checkbox label::after {
   content: '';
   border-radius: 15%;
 }
-gux-input-checkbox input:focus-within ~ label::after {
+gux-input-checkbox input:focus-visible ~ label::after {
   box-shadow: 0 0 3px 2px #aac9ff;
 }
 gux-input-checkbox input:not(:checked) ~ label::after {

package/dist/collection/components/legacy/gux-form-field-legacy/components/gux-input-color/components/gux-input-color-option/gux-input-color-option.css CHANGED Viewed

@@ -14,7 +14,7 @@ gux-input-color-option > button {
   border: none;
 }
 gux-input-color-option > button:not(:disabled):hover,
-gux-input-color-option > button:focus,
+gux-input-color-option > button:focus-visible,
 gux-input-color-option > button.gux-input-color-option-active,
 gux-input-color-option > button:active {
   border: 1px white solid;

package/dist/collection/components/legacy/gux-form-field-legacy/components/gux-input-color/gux-input-color.css CHANGED Viewed

@@ -24,7 +24,7 @@ gux-input-color .gux-input-color-main-element {
   box-shadow: inset 0 0 4px rgba(32, 41, 55, 0.16);
   transition: box-shadow 0.2s;
 }
-gux-input-color .gux-input-color-main-element:focus,
+gux-input-color .gux-input-color-main-element:focus-visible,
 gux-input-color .gux-input-color-main-element.gux-opened {
   border-color: #2a60c8;
   outline: none;
@@ -36,7 +36,7 @@ gux-input-color .gux-input-color-main-element:disabled {
   opacity: 0.5;
 }
 gux-input-color .gux-input-color-main-element:hover gux-icon,
-gux-input-color .gux-input-color-main-element:focus gux-icon {
+gux-input-color .gux-input-color-main-element:focus-visible gux-icon {
   color: #2e394c;
 }
 gux-input-color .gux-input-color-selected-color {

package/dist/collection/components/legacy/gux-form-field-legacy/components/gux-input-number/gux-input-number.css CHANGED Viewed

@@ -68,7 +68,7 @@ gux-input-number .gux-input-number-container .gux-input-container .gux-clear-but
   background: transparent;
   border: none;
 }
-gux-input-number .gux-input-number-container .gux-input-container .gux-clear-button:not(:disabled):focus,
+gux-input-number .gux-input-number-container .gux-input-container .gux-clear-button:not(:disabled):focus-visible,
 gux-input-number .gux-input-number-container .gux-input-container .gux-clear-button:not(:disabled):hover {
   color: #2a60c8;
   cursor: pointer;
@@ -92,7 +92,7 @@ gux-input-number .gux-input-number-container .gux-step-buttons-container .gux-st
   background: transparent;
   border: none;
 }
-gux-input-number .gux-input-number-container .gux-step-buttons-container .gux-step-button:not(:disabled):focus,
+gux-input-number .gux-input-number-container .gux-step-buttons-container .gux-step-button:not(:disabled):focus-visible,
 gux-input-number .gux-input-number-container .gux-step-buttons-container .gux-step-button:not(:disabled):hover {
   color: #2a60c8;
   cursor: pointer;

package/dist/collection/components/legacy/gux-form-field-legacy/components/gux-input-search/gux-input-search.css CHANGED Viewed

@@ -64,7 +64,7 @@ gux-input-search .gux-input-container .gux-clear-button {
   background: transparent;
   border: none;
 }
-gux-input-search .gux-input-container .gux-clear-button:not(:disabled):focus,
+gux-input-search .gux-input-container .gux-clear-button:not(:disabled):focus-visible,
 gux-input-search .gux-input-container .gux-clear-button:not(:disabled):hover {
   color: #2e394c;
   cursor: pointer;
@@ -77,7 +77,7 @@ gux-input-search .gux-input-container .gux-clear-button gux-icon {
 gux-input-search .gux-input-container .gux-clear-button:focus {
   outline: none;
 }
-gux-input-search .gux-input-container .gux-clear-button:focus:enabled gux-icon {
+gux-input-search .gux-input-container .gux-clear-button:focus-visible:enabled gux-icon {
   outline: 3px solid #aac9ff;
   outline-offset: 1px;
   box-shadow: 0 0 0 1px #fdfdfd;

package/dist/collection/components/legacy/gux-form-field-legacy/components/gux-input-text-like/gux-input-text-like.css CHANGED Viewed

@@ -49,7 +49,7 @@ gux-input-text-like .gux-input-container .gux-clear-button {
   border: none;
   border-radius: 4px;
 }
-gux-input-text-like .gux-input-container .gux-clear-button:not(:disabled):focus,
+gux-input-text-like .gux-input-container .gux-clear-button:not(:disabled):focus-visible,
 gux-input-text-like .gux-input-container .gux-clear-button:not(:disabled):hover {
   color: #2e394c;
   cursor: pointer;
@@ -63,7 +63,7 @@ gux-input-text-like .gux-input-container .gux-clear-button gux-icon {
 gux-input-text-like .gux-input-container .gux-clear-button:focus {
   outline: none;
 }
-gux-input-text-like .gux-input-container .gux-clear-button:focus:enabled gux-icon {
+gux-input-text-like .gux-input-container .gux-clear-button:focus-visible:enabled gux-icon {
   outline: 3px solid #aac9ff;
   outline-offset: 1px;
   box-shadow: 0 0 0 1px #fdfdfd;

package/dist/collection/components/legacy/gux-list-legacy/list-item/gux-list-item.css CHANGED Viewed

@@ -1,10 +1,10 @@
-:host:focus .gux-list-item,
+:host:focus-visible .gux-list-item,
 :host:active .gux-list-item,
 :host:hover:not([disabled]) .gux-list-item {
   color: #fdfdfd;
   background: #2a60c8;
 }
-:host(:focus) .gux-list-item,
+:host(:focus-visible) .gux-list-item,
 :host(:active) .gux-list-item,
 :host(:hover:not([disabled])) .gux-list-item {
   color: #fdfdfd;

package/dist/collection/components/legacy/gux-side-panel-legacy/buttons/gux-side-panel-button.css CHANGED Viewed

@@ -13,12 +13,12 @@ gux-side-panel-button button.selected {
 }
 gux-side-panel-button button:hover,
 gux-side-panel-button button:active,
-gux-side-panel-button button:focus {
+gux-side-panel-button button:focus-visible {
   color: #2a60c8;
 }
 gux-side-panel-button button:hover.selected,
 gux-side-panel-button button:active.selected,
-gux-side-panel-button button:focus.selected {
+gux-side-panel-button button:focus-visible.selected {
   color: #fdfdfd;
 }
 gux-side-panel-button button:focus {
@@ -37,12 +37,12 @@ gux-side-panel-button button i {
 }
 .gux-side-panel-button-dark-theme button:hover,
 .gux-side-panel-button-dark-theme button:active,
-.gux-side-panel-button-dark-theme button:focus {
+.gux-side-panel-button-dark-theme button:focus-visible {
   color: #75a8ff;
 }
 .gux-side-panel-button-dark-theme button:hover.selected,
 .gux-side-panel-button-dark-theme button:active.selected,
-.gux-side-panel-button-dark-theme button:focus.selected {
+.gux-side-panel-button-dark-theme button:focus-visible.selected {
   color: #fdfdfd;
 }
 .gux-dark-theme gux-side-panel-button button {
@@ -55,12 +55,12 @@ gux-side-panel-button button i {
 }
 .gux-dark-theme gux-side-panel-button button:hover,
 .gux-dark-theme gux-side-panel-button button:active,
-.gux-dark-theme gux-side-panel-button button:focus {
+.gux-dark-theme gux-side-panel-button button:focus-visible {
   color: #75a8ff;
 }
 .gux-dark-theme gux-side-panel-button button:hover.selected,
 .gux-dark-theme gux-side-panel-button button:active.selected,
-.gux-dark-theme gux-side-panel-button button:focus.selected {
+.gux-dark-theme gux-side-panel-button button:focus-visible.selected {
   color: #fdfdfd;
 }
 gux-side-panel-button.gux-dark-theme button {
@@ -73,12 +73,12 @@ gux-side-panel-button.gux-dark-theme button.selected {
 }
 gux-side-panel-button.gux-dark-theme button:hover,
 gux-side-panel-button.gux-dark-theme button:active,
-gux-side-panel-button.gux-dark-theme button:focus {
+gux-side-panel-button.gux-dark-theme button:focus-visible {
   color: #75a8ff;
 }
 gux-side-panel-button.gux-dark-theme button:hover.selected,
 gux-side-panel-button.gux-dark-theme button:active.selected,
-gux-side-panel-button.gux-dark-theme button:focus.selected {
+gux-side-panel-button.gux-dark-theme button:focus-visible.selected {
   color: #fdfdfd;
 }
 .gux-side-panel-button-light-theme {

package/dist/collection/components/legacy/gux-tabs-legacy/gux-tab-dropdown-option-legacy/gux-tab-dropdown-option-legacy.css CHANGED Viewed

@@ -23,7 +23,7 @@ gux-tab-dropdown-option-legacy .tab-dropdown-option gux-icon {
   color: #2e394c;
 }
 .gux-tab-dropdown-option-light-theme .tab-dropdown-option:hover,
-.gux-tab-dropdown-option-light-theme .tab-dropdown-option:focus {
+.gux-tab-dropdown-option-light-theme .tab-dropdown-option:focus-visible {
   color: #fdfdfd;
   background-color: #2a60c8;
 }
@@ -31,7 +31,7 @@ gux-tab-dropdown-option-legacy .tab-dropdown-option gux-icon {
   color: #2e394c;
 }
 .gux-light-theme gux-tab-dropdown-option-legacy .tab-dropdown-option:hover,
-.gux-light-theme gux-tab-dropdown-option-legacy .tab-dropdown-option:focus {
+.gux-light-theme gux-tab-dropdown-option-legacy .tab-dropdown-option:focus-visible {
   color: #fdfdfd;
   background-color: #2a60c8;
 }
@@ -39,7 +39,7 @@ gux-tab-dropdown-option-legacy.gux-light-theme .tab-dropdown-option {
   color: #2e394c;
 }
 gux-tab-dropdown-option-legacy.gux-light-theme .tab-dropdown-option:hover,
-gux-tab-dropdown-option-legacy.gux-light-theme .tab-dropdown-option:focus {
+gux-tab-dropdown-option-legacy.gux-light-theme .tab-dropdown-option:focus-visible {
   color: #fdfdfd;
   background-color: #2a60c8;
 }
@@ -47,7 +47,7 @@ gux-tab-dropdown-option-legacy .tab-dropdown-option {
   color: #2e394c;
 }
 gux-tab-dropdown-option-legacy .tab-dropdown-option:hover,
-gux-tab-dropdown-option-legacy .tab-dropdown-option:focus {
+gux-tab-dropdown-option-legacy .tab-dropdown-option:focus-visible {
   color: #fdfdfd;
   background-color: #2a60c8;
 }