genesys-spark-components 4.0.0-beta.8 → 4.0.1

package/dist/cjs/gux-radial-progress.cjs.entry.js

@@ -2,53 +2,39 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0d0fdb85.js');
-const usage = require('./usage-24342df6.js');
-const logError = require('./log-error-d46c02b7.js');
-const randomHtmlId = require('./random-html-id-b86b61c0.js');
-const clamp = require('./clamp-1bb96117.js');
+const index = require('./index-75c9f0d9.js');
+const usage = require('./usage-bfcc4d96.js');
+const logError = require('./log-error-8a92241e.js');
 
-const RADIUS = 23.5;
+const OVERALL_SIZE = 48; // Linked to --gse-ui-progressAndLoading-spinner-large
+const BORDER_SIZE = 4; // Linked to --gse-ui-progressAndLoading-largeBorder
+const RADIUS = OVERALL_SIZE * 0.5 - BORDER_SIZE * 0.5;
 const STROKE_DASH = 2 * Math.PI * RADIUS;
 function canShowPercentageState(value, max) {
   return !(isNaN(value) || isNaN(max) || value > max || value < 0 || max === 0);
 }
-function getPercentageString(value, max, scale) {
-  const scaleFactor = Math.pow(10, clamp.clamp(scale, 0, 2));
-  return `${Math.round(((value + Number.EPSILON) / max) * 100 * scaleFactor) /
-    scaleFactor}%`;
+function getPercentageString(value, max) {
+  return `${Math.round(((value + Number.EPSILON) / max) * 100)}%`;
 }
 
-const GuxPercentageState = ({ value, max, scale, dropshadowId, screenreaderText }) => {
+const GuxPercentageState = ({ value, max, screenreaderText }) => {
   return (index.h("div", { role: "progressbar", "aria-valuenow": value, "aria-valuemin": "0", "aria-valuemax": max, "aria-label": screenreaderText },
-    index.h("svg", { class: "gux-svg-container", width: "60px", height: "60px", viewBox: "0 0 60 60", role: "presentation" },
-      index.h("filter", { id: dropshadowId },
-        index.h("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "1.4" }),
-        index.h("feOffset", { dx: "0", dy: "0", result: "offsetblur" }),
-        index.h("feMerge", null,
-          index.h("feMergeNode", null),
-          index.h("feMergeNode", { in: "SourceGraphic" }))),
+    index.h("svg", { class: "gux-svg-container", viewBox: `0 0 ${OVERALL_SIZE} ${OVERALL_SIZE}`, role: "presentation" },
       index.h("circle", { cx: "50%", cy: "50%", r: RADIUS, class: "gux-static-circle" }),
-      index.h("circle", { cx: "50%", cy: "50%", r: RADIUS, class: "gux-dynamic-circle-shadow", "stroke-dashoffset": STROKE_DASH * (1 - value / max), "stroke-dasharray": STROKE_DASH, "stroke-linecap": "round", filter: 'url(#' + dropshadowId + ')' }),
       index.h("circle", { cx: "50%", cy: "50%", r: RADIUS, class: "gux-dynamic-circle", "stroke-dashoffset": STROKE_DASH * (1 - value / max), "stroke-dasharray": STROKE_DASH, "stroke-linecap": "round" }),
-      index.h("text", { x: "50%", y: "50%", "dominant-baseline": "central", class: {
-          'gux-percentage': true,
-          'gux-small': ![0, 1].includes(scale)
-        } }, getPercentageString(value, max, scale)))));
+      index.h("text", { x: "50%", y: "50%", "dominant-baseline": "central", class: "gux-percentage" }, getPercentageString(value, max)))));
 };
 const GuxSpinnerState = ({ screenreaderText }) => {
   return (index.h("gux-radial-loading", { "screenreader-text": screenreaderText, context: "modal" }));
 };
 
-const guxRadialProgressCss = ":host{display:inline-block}div[role='progressbar'] .gux-svg-container{display:block}div[role='progressbar'] .gux-svg-container .gux-dynamic-circle{fill:none;stroke:#2a60c8;stroke-width:5;transform:rotate(-90deg);transform-origin:50% 50%}div[role='progressbar'] .gux-svg-container .gux-dynamic-circle-shadow{fill:none;stroke:#75a8ff;stroke-width:5;transform:rotate(-90deg);transform-origin:50% 50%}div[role='progressbar'] .gux-svg-container .gux-static-circle{fill:none;stroke:#deeaff;stroke-width:4}div[role='progressbar'] .gux-svg-container .gux-percentage{font-family:Roboto, sans-serif;font-weight:400;font-size:12px;line-height:20px;text-anchor:middle;fill:#2e394c}div[role='progressbar'] .gux-svg-container .gux-percentage.gux-small{font-family:Roboto, sans-serif;font-weight:400;font-size:11px;line-height:16px}";
+const guxRadialProgressCss = ":host{display:inline-block}div[role=progressbar] .gux-svg-container{display:block;width:calc(var(--gse-ui-progressAndLoading-spinner-large) * 1px);height:calc(var(--gse-ui-progressAndLoading-spinner-large) * 1px)}div[role=progressbar] .gux-svg-container .gux-dynamic-circle{fill:none;stroke:var(--gse-ui-progressAndLoading-spinner-foreground);stroke-width:4;transform:rotate(-90deg);transform-origin:50% 50%}div[role=progressbar] .gux-svg-container .gux-static-circle{fill:none;stroke:var(--gse-ui-progressAndLoading-spinner-base);stroke-width:4}div[role=progressbar] .gux-svg-container .gux-percentage{font-family:var(--gse-ui-progressAndLoading-spinner-text-fontFamily);font-size:var(--gse-ui-progressAndLoading-spinner-text-fontSize);font-weight:var(--gse-ui-progressAndLoading-spinner-text-fontWeight);line-height:var(--gse-ui-progressAndLoading-spinner-text-lineHeight);text-anchor:middle;fill:var(--gse-ui-progressAndLoading-textColor)}";
 
 const GuxRadialProgress = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.dropshadowId = randomHtmlId.randomHTMLId('gux-dropshadow');
     this.value = undefined;
     this.max = 100;
-    this.scale = 0;
     this.screenreaderText = '';
   }
   componentWillLoad() {
@@ -62,7 +48,7 @@ const GuxRadialProgress = class {
   }
   render() {
     return canShowPercentageState(this.value, this.max)
-      ? (index.h(GuxPercentageState, { value: this.value, max: this.max, scale: this.scale, dropshadowId: this.dropshadowId, screenreaderText: this.screenreaderText }))
+      ? (index.h(GuxPercentageState, { value: this.value, max: this.max, screenreaderText: this.screenreaderText }))
       : (index.h(GuxSpinnerState, { screenreaderText: this.screenreaderText }));
   }
   get root() { return index.getElement(this); }

package/dist/cjs/gux-rating.cjs.entry.js

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0d0fdb85.js');
-const simulateNativeEvent = require('./simulate-native-event-fe3e62da.js');
-const clamp = require('./clamp-1bb96117.js');
-const usage = require('./usage-24342df6.js');
-const logError = require('./log-error-d46c02b7.js');
+const index = require('./index-75c9f0d9.js');
+const simulateNativeEvent = require('./simulate-native-event-8209a457.js');
+const clamp = require('./clamp-a9926a57.js');
+const usage = require('./usage-bfcc4d96.js');
+const logError = require('./log-error-8a92241e.js');
 
-const guxRatingCss = ":host{display:inline-flex;user-select:none}:host(:host:focus-visible){outline:var(--gse-ui-focus-width) var(--gse-ui-focus-style) var(--gse-ui-focus-color);outline-offset:1px;box-shadow:0 0 0 1px var(--gse-ui-focus-style)}.gux-rating-star-container{color:var(--gse-ui-ui--rating-default-color)}.gux-rating-star-container.gux-disabled{pointer-events:none;color:var(--gse-ui-rating-disabled-color);opacity:var(--gse-ui-rating-disabled-opacity)}.gux-rating-star-container gux-icon{width:var(--gse-ui-rating-size);height:var(--gse-ui-rating-size);color:var(--gse-ui-rating-default-color)}.gux-rating-star-container gux-icon:hover:not(.gux-disabled){color:var(--gse-ui-rating-hover-color)}";
+const guxRatingCss = ":host{display:inline-block;min-width:fit-content;user-select:none}:host(:host:focus-visible){outline:var(--gse-semantic-focusRing-small-border-color) var(--gse-semantic-focusRing-small-border-style) var(--gse-semantic-focusRing-small-border-width);outline-offset:var(--gse-semantic-focusRing-offset);box-shadow:0 0 0 1px var(--gse-semantic-focusRing-small-border-style)}.gux-rating-star-container{display:flex;gap:var(--gse-ui-rating-star-gap);justify-content:space-between;color:var(--gse-ui-rating-default-color)}.gux-rating-star-container.gux-disabled{color:var(--gse-ui-rating-disabled-color);pointer-events:none;opacity:var(--gse-ui-rating-disabled-opacity)}.gux-rating-star-container gux-icon{flex:0 0 auto;width:var(--gse-ui-rating-size);height:var(--gse-ui-rating-size);color:var(--gse-ui-rating-default-color)}.gux-rating-star-container gux-icon:hover:not(.gux-disabled){color:var(--gse-ui-rating-hover-color)}";
 
 const GuxRating = class {
   constructor(hostRef) {
@@ -17,6 +17,7 @@ const GuxRating = class {
     this.maxValue = 5;
     this.disabled = false;
     this.readonly = false;
+    this.increment = 'default';
   }
   onClick(event) {
     event.stopPropagation();
@@ -34,7 +35,15 @@ const GuxRating = class {
       this.updateRatingValue(0);
     }
     else if (clickedStarNominalValue !== Math.floor(this.value)) {
-      this.updateRatingValue(clickedStarNominalValue - 0.5);
+      if (this.increment === 'half') {
+        this.updateRatingValue(clickedStarNominalValue - 0.5);
+      }
+      else {
+        this.updateRatingValue(clickedStarNominalValue);
+      }
+    }
+    else {
+      this.updateRatingValue(clickedStarNominalValue);
     }
   }
   onKeyDown(event) {
@@ -42,16 +51,15 @@ const GuxRating = class {
     if (this.disabled || this.readonly) {
       return;
     }
+    const increment = this.increment === 'half' ? 0.5 : 1;
     switch (event.key) {
       case 'ArrowUp':
-      case 'ArrowLeft':
         event.preventDefault();
-        this.updateRatingValue(this.value - 0.5);
+        this.updateRatingValue(this.value + increment);
         break;
       case 'ArrowDown':
-      case 'ArrowRight':
         event.preventDefault();
-        this.updateRatingValue(this.value + 0.5);
+        this.updateRatingValue(this.value - increment);
         break;
       case 'End':
         event.preventDefault();
@@ -64,7 +72,9 @@ const GuxRating = class {
     }
   }
   updateRatingValue(newValue) {
-    const validatedNewValue = clamp.clamp(newValue, 0, Array.from(this.starContainer.children).length);
+    const clampedNewValue = clamp.clamp(newValue, 0, Array.from(this.starContainer.children).length);
+    const increment = this.increment === 'half' ? 0.5 : 1;
+    const validatedNewValue = Math.round(clampedNewValue / increment) * increment;
     if (this.value !== validatedNewValue) {
       this.value = validatedNewValue;
       simulateNativeEvent.simulateNativeEvent(this.root, 'input');

package/dist/cjs/gux-row-select.cjs.entry.js

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0d0fdb85.js');
-const index$1 = require('./index-9bbde1aa.js');
-const randomHtmlId = require('./random-html-id-b86b61c0.js');
-const en = require('./en-dc1f49b7.js');
-require('./get-closest-element-ab4b2eee.js');
+const index = require('./index-75c9f0d9.js');
+const index$1 = require('./index-dee802be.js');
+const randomHtmlId = require('./random-html-id-32ef8847.js');
+const en = require('./en-807a354e.js');
+require('./get-closest-element-26894e5a.js');
 
-const guxRowSelectCss = "gux-row-select .gux-label-text{position:absolute;top:auto;left:-10000px;width:1px;height:1px;overflow:hidden}";
+const guxRowSelectCss = ":host{display:flex;flex-direction:row;justify-content:center}";
 
 const GuxRowSelect = class {
   constructor(hostRef) {
@@ -20,15 +20,13 @@ const GuxRowSelect = class {
   }
   onCheck(event) {
     event.stopPropagation();
-    const input = event.target;
-    this.selected = input.checked;
-    this.internalrowselectchange.emit();
+    this.internalrowselectchange.emit(this.inputElement.checked);
   }
   async componentWillLoad() {
     this.i18n = await index$1.buildI18nForComponent(this.root, en.tableResources, 'gux-table');
   }
   render() {
-    return (index.h("gux-form-field-checkbox", null, index.h("input", { slot: "input", id: this.id, type: "checkbox", checked: this.selected, disabled: this.disabled }), index.h("label", { slot: "label", htmlFor: this.id }, "\u200B", index.h("span", { class: "gux-label-text" }, this.i18n('selectTableRow')))));
+    return (index.h("gux-form-field-checkbox", { "label-position": "screenreader" }, index.h("input", { ref: el => (this.inputElement = el), slot: "input", id: this.id, type: "checkbox", checked: this.selected, disabled: this.disabled }), index.h("label", { slot: "label", htmlFor: this.id }, "\u200B", index.h("span", null, this.i18n('selectTableRow')))));
   }
   get root() { return index.getElement(this); }
 };

package/dist/cjs/gux-screen-reader-beta.cjs.entry.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0d0fdb85.js');
-const usage = require('./usage-24342df6.js');
+const index = require('./index-75c9f0d9.js');
+const usage = require('./usage-bfcc4d96.js');
 
 const guxScreenReaderCss = ".gux-sr-only:not(:focus):not(:active){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}";
 

package/dist/cjs/gux-segmented-control-beta.cjs.entry.js

@@ -0,0 +1,44 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-75c9f0d9.js');
+const simulateNativeEvent = require('./simulate-native-event-8209a457.js');
+const usage = require('./usage-bfcc4d96.js');
+
+const guxSegmentedControlCss = ":host{display:inline-flex}";
+
+const GuxSegmentedControl = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.value = undefined;
+    this.items = [];
+  }
+  onClick(e) {
+    e.stopPropagation();
+    const switchItem = e.target.closest('gux-segmented-control-item');
+    if (switchItem && this.value !== switchItem.value) {
+      this.value = switchItem.value;
+      simulateNativeEvent.simulateNativeEvent(this.root, 'input');
+      simulateNativeEvent.simulateNativeEvent(this.root, 'change');
+    }
+  }
+  slotChanged() {
+    this.items = Array.from(this.root.children);
+  }
+  componentWillLoad() {
+    usage.trackComponent(this.root);
+  }
+  componentWillRender() {
+    this.items.forEach(switchItem => {
+      switchItem.selected = switchItem.value === this.value;
+    });
+  }
+  render() {
+    return (index.h(index.Host, { role: "group" }, index.h("slot", { onSlotchange: this.slotChanged.bind(this) })));
+  }
+  get root() { return index.getElement(this); }
+};
+GuxSegmentedControl.style = guxSegmentedControlCss;
+
+exports.gux_segmented_control_beta = GuxSegmentedControl;

package/dist/cjs/gux-segmented-control-item.cjs.entry.js

@@ -0,0 +1,70 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-75c9f0d9.js');
+const getClosestElement = require('./get-closest-element-26894e5a.js');
+const getSlotTextContent = require('./get-slot-text-content-c4306c7a.js');
+const hasSlot = require('./has-slot-429f8b9e.js');
+
+const guxSegmentedControlItemCss = "button{all:unset}.gux-container{height:var(--gse-ui-segmentedControl-height);cursor:pointer;border-color:var(--gse-ui-segmentedControl-divider-color);border-style:var(--gse-ui-segmentedControl-divider-style);border-width:var(--gse-ui-segmentedControl-divider-width);border-right:none;border-radius:var(--gse-ui-segmentedControl-button-middle-borderRadius)}.gux-container.gux-start{border-left-color:var(--gse-ui-segmentedControl-divider-color);border-radius:var(--gse-ui-segmentedControl-button-start-borderRadius)}.gux-container.gux-end{border-style:var(--gse-ui-segmentedControl-divider-style);border-width:var(--gse-ui-segmentedControl-divider-width);border-right-color:var(--gse-ui-segmentedControl-divider-color);border-radius:var(--gse-ui-segmentedControl-button-end-borderRadius)}.gux-container.gux-start.gux-end{border-radius:var(--gse-ui-segmentedControl-borderRadius)}.gux-container .gux-segmented-control-item{display:flex;flex-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-segmentedControl-button-gap);place-content:stretch flex-start;align-items:center;height:100%;padding:var(--gse-ui-segmentedControl-button-padding);color:var(--gse-ui-segmentedControl-button-default-foregroundColor);background-color:var(--gse-ui-segmentedControl-button-default-backgroundColor)}.gux-container .gux-segmented-control-item.gux-icon-only{padding:var(--gse-ui-segmentedControl-iconOnly-padding)}.gux-container .gux-segmented-control-item.gux-icon-only .gux-text.gux-icon-only:not(:focus):not(:active){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.gux-container .gux-segmented-control-item:hover{color:var(--gse-ui-segmentedControl-button-hover-foregroundColor);background-color:var(--gse-ui-segmentedControl-button-hover-backgroundColor)}.gux-container .gux-segmented-control-item[disabled]{color:var(--gse-ui-segmentedControl-button-disabled-foregroundColor);pointer-events:none;background-color:var(--gse-ui-segmentedControl-button-disabled-backgroundColor);opacity:var(--gse-ui-segmentedControl-button-disabled-opacity)}.gux-container .gux-segmented-control-item.gux-selected{color:var(--gse-ui-segmentedControl-button-active-foregroundColor);background-color:var(--gse-ui-segmentedControl-button-active-backgroundColor)}.gux-container .gux-segmented-control-item:focus-visible{position:relative;z-index:var(--gse-semantic-zIndex-showFocus);border-radius:var(--gse-ui-segmentedControl-borderRadius);outline:var(--gse-semantic-focusRing-default-border-color) var(--gse-semantic-focusRing-default-border-style) var(--gse-semantic-focusRing-default-border-width);outline-offset:var(--gse-semantic-focusRing-offset);outline-offset:var(--gse-ui-segmentedControl-focus-offset)}.gux-container .gux-segmented-control-item .gux-icon slot[name=icon]::slotted(gux-icon){width:var(--gse-ui-icon-size-sm);height:var(--gse-ui-icon-size-sm)}";
+
+const GuxSegmentedControlItem = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.value = undefined;
+    this.selected = false;
+    this.disabled = false;
+    this.iconOnly = false;
+    this.position = undefined;
+  }
+  onClick(e) {
+    if (this.disabled) {
+      e.stopPropagation();
+    }
+  }
+  isInStartPosition(switchItem) {
+    const parentSegmentControl = getClosestElement.getClosestElement('gux-segmented-control-beta', switchItem);
+    const children = Array.from(parentSegmentControl.children);
+    const index = children.findIndex(i => i === switchItem);
+    return index === 0;
+  }
+  isInEndPosition(switchItem) {
+    const parentSegmentControl = getClosestElement.getClosestElement('gux-segmented-control-beta', switchItem);
+    const children = Array.from(parentSegmentControl.children);
+    const index = children.findIndex(i => i === switchItem);
+    return index === children.length - 1;
+  }
+  renderTooltip() {
+    if (this.iconOnly) {
+      return (index.h("gux-tooltip", null, getSlotTextContent.getSlotTextContent(this.root, 'text')));
+    }
+  }
+  renderIconSlot() {
+    if (hasSlot.hasSlot(this.root, 'icon')) {
+      return (index.h("div", { class: {
+          'gux-icon': true,
+          'gux-icon-only': this.iconOnly
+        } }, index.h("slot", { name: "icon" })));
+    }
+  }
+  render() {
+    return (index.h("div", { class: {
+        'gux-container': true,
+        'gux-start': this.isInStartPosition(this.root),
+        'gux-end': this.isInEndPosition(this.root)
+      } }, index.h("button", { class: {
+        'gux-segmented-control-item': true,
+        'gux-icon-only': this.iconOnly,
+        'gux-selected': this.selected
+      }, type: "button", disabled: this.disabled }, this.renderIconSlot(), index.h("div", { class: {
+        'gux-text': true,
+        'gux-icon-only': this.iconOnly
+      } }, index.h("slot", { name: "text" }))), this.renderTooltip()));
+  }
+  static get delegatesFocus() { return true; }
+  get root() { return index.getElement(this); }
+};
+GuxSegmentedControlItem.style = guxSegmentedControlItemCss;
+
+exports.gux_segmented_control_item = GuxSegmentedControlItem;

package/dist/cjs/gux-simple-toast-legacy.cjs.entry.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0d0fdb85.js');
-const usage = require('./usage-24342df6.js');
+const index = require('./index-75c9f0d9.js');
+const usage = require('./usage-bfcc4d96.js');
 
-const guxSimpleToastCss = ":host{position:relative;display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:flex-start;justify-content:flex-start;width:286px;margin-bottom:4px;color:#2e394c;background:#f6f7f9;border:1px solid #b4bccb;border-radius:4px;box-shadow:0 2px 4px fade(#202937, 24%)}.gux-icon{flex:0 1 auto;align-self:auto;order:0;padding:8px 12px 8px 16px;margin:2px 0}.gux-icon.gux-alert{color:#ea0b0b}.gux-icon.gux-warning{color:#ffae00}.gux-icon.gux-positive{color:#3c8527}.gux-icon.gux-neutral{color:#203b73}.gux-icon ::slotted(gux-icon){width:16px;height:16px}.gux-message{flex:1 1 auto;align-self:center;order:0;margin:8px 0}.gux-dismiss{margin:4px 0}";
+const guxSimpleToastCss = ":host{position:relative;display:flex;flex-direction:row;flex-wrap:nowrap;place-content:stretch flex-start;align-items:flex-start;width:286px;margin-bottom:4px;color:#2e394c;background:#f6f7f9;border:1px solid #b4bccb;border-radius:4px;box-shadow:0 2px 4px rgba(32, 41, 55, 0.24)}.gux-icon{flex:0 1 auto;align-self:auto;order:0;padding:8px 12px 8px 16px;margin:2px 0}.gux-icon.gux-alert{color:#ea0b0b}.gux-icon.gux-warning{color:#ffae00}.gux-icon.gux-positive{color:#3c8527}.gux-icon.gux-neutral{color:#203b73}.gux-icon ::slotted(gux-icon){width:16px;height:16px}.gux-message{flex:1 1 auto;align-self:center;order:0;margin:8px 0}.gux-dismiss{margin:4px 0}";
 
 const GuxSimpleToast = class {
   constructor(hostRef) {

package/dist/cjs/gux-skip-navigation-item.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0d0fdb85.js');
+const index = require('./index-75c9f0d9.js');
 
 const guxSkipNavigationItemCss = ":host{position:absolute;top:auto;left:-10000px;width:1px;height:1px;overflow:hidden}:host(:focus-within){position:inherit;top:inherit;left:inherit;width:inherit;height:inherit;overflow:inherit}::slotted(a){padding:12px;font-size:2rem;background-color:#fdfdfd;box-shadow:0 8px 24px rgba(32, 41, 55, 0.4), 0 0 0 1px #fdfdfd, 0 0 0 4px #aac9ff !important}";
 

package/dist/cjs/gux-skip-navigation-list.cjs.entry.js

@@ -0,0 +1,33 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-75c9f0d9.js');
+const index$1 = require('./index-dee802be.js');
+const usage = require('./usage-bfcc4d96.js');
+require('./get-closest-element-26894e5a.js');
+
+const navigationName = "Skip links navigation";
+const translationResources = {
+	navigationName: navigationName
+};
+
+const guxSkipNavigationListCss = ":host{position:absolute;top:auto;left:-10000px;width:1px;height:1px;overflow:hidden}:host(:focus-within){position:inherit;top:inherit;left:inherit;width:inherit;height:inherit;overflow:inherit;position:absolute;inset:0}.gux-container nav{width:fit-content;margin:40px auto}.gux-container nav ul{padding:0;margin:0}";
+
+const GuxSkipNavigationList = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  async componentWillLoad() {
+    usage.trackComponent(this.root);
+    this.i18n = await index$1.buildI18nForComponent(this.root, translationResources);
+  }
+  render() {
+    return (index.h("div", { class: "gux-container" }, index.h("nav", { "aria-label": this.i18n('navigationName') }, index.h("ul", { role: "list" }, index.h("slot", null)))));
+  }
+  static get delegatesFocus() { return true; }
+  get root() { return index.getElement(this); }
+};
+GuxSkipNavigationList.style = guxSkipNavigationListCss;
+
+exports.gux_skip_navigation_list = GuxSkipNavigationList;

package/dist/cjs/gux-sort-control.cjs.entry.js

@@ -2,14 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0d0fdb85.js');
-const index$1 = require('./index-9bbde1aa.js');
-const usage = require('./usage-24342df6.js');
-const getClosestElement = require('./get-closest-element-ab4b2eee.js');
-const onMutation = require('./on-mutation-8f8a4460.js');
-const en = require('./en-dc1f49b7.js');
+const index = require('./index-75c9f0d9.js');
+const index$1 = require('./index-dee802be.js');
+const usage = require('./usage-bfcc4d96.js');
+const getClosestElement = require('./get-closest-element-26894e5a.js');
+const onMutation = require('./on-mutation-ef917473.js');
+const en = require('./en-807a354e.js');
 
-const guxSortControlCss = ".gux-container{position:absolute;inset:0;display:flex;flex-direction:row;flex-wrap:nowrap;align-content:flex-start;align-items:center;justify-content:flex-start;border-top:3px solid transparent;border-bottom:3px solid transparent}.gux-container:focus-within{border-bottom-color:#75a8ff}.gux-container .gux-sort-button{all:unset;flex:1 1 auto;align-self:stretch;order:0;cursor:pointer}.gux-container .gux-sort-button .gux-sort-icon{float:right;width:16px;height:16px;margin:8px;color:#d7dce5}.gux-container .gux-sort-button .gux-sort-icon.gux-left{float:left}.gux-container .gux-sort-button.gux-active .gux-sort-icon{color:#2e394c}.gux-container .gux-resize-spacer{flex:0 1 auto;align-self:stretch;order:0;width:2px}.gux-sr-only:not(:focus):not(:active){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}";
+const guxSortControlCss = ".gux-container{position:absolute;inset:0;display:flex;flex-direction:row;flex-wrap:nowrap;place-content:flex-start flex-start;align-items:center;border-top:var(--gse-ui-dataTableItems-header-selectedBar-height) solid transparent;border-bottom:var(--gse-ui-dataTableItems-header-selectedBar-height) solid transparent}.gux-container:focus-within{border-bottom-color:var(--gse-ui-dataTableItems-header-selectedIndicatorColor)}.gux-container .gux-sort-button{all:unset;flex:1 1 auto;align-self:stretch;order:0;cursor:pointer}.gux-container .gux-sort-button .gux-sort-icon{float:right;width:var(--gse-ui-icon-size-sm);height:var(--gse-ui-icon-size-sm);margin:0 var(--gse-ui-dataTableItems-header-gap);color:var(--gse-ui-dataTableItems-header-sort-foregroundColor)}.gux-container .gux-sort-button .gux-sort-icon.gux-left{float:left;margin-left:calc(2px + var(--gse-ui-dataTableItems-header-gap))}.gux-container .gux-resize-spacer{flex:0 1 auto;align-self:stretch;order:0;width:2px}";
 
 const GuxSortControl = class {
   constructor(hostRef) {
@@ -65,10 +65,10 @@ const GuxSortControl = class {
   getIconName(colSortDirection) {
     switch (colSortDirection) {
       case 'descending':
-        return 'arrow-solid-up';
+        return 'arrow-solid-down';
       case 'ascending':
       default:
-        return 'arrow-solid-down';
+        return 'arrow-solid-up';
     }
   }
   getNextSort(colSortDirection) {
@@ -110,7 +110,7 @@ const GuxSortControl = class {
     return (index.h("div", { class: "gux-container" }, index.h("button", { class: {
         'gux-sort-button': true,
         'gux-active': this.active
-      }, type: "button", onClick: () => this.onClick() }, index.h("span", { class: "gux-sr-only" }, this.getSRText(this.sort)), index.h("gux-icon", { class: {
+      }, type: "button", onClick: () => this.onClick(), "aria-label": this.getSRText(this.sort) }, index.h("gux-icon", { class: {
         'gux-sort-icon': true,
         'gux-left': this.isLeftAlignIcon
       }, "icon-name": this.getIconName(this.sort), decorative: true })), index.h("div", { class: "gux-resize-spacer" })));

package/dist/cjs/gux-submenu.cjs.entry.js

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0d0fdb85.js');
-const afterNextRender = require('./after-next-render-a09f528a.js');
-const guxMenu_common = require('./gux-menu.common-ada23b94.js');
-const popper = require('./popper-9a6aec9e.js');
+const index = require('./index-75c9f0d9.js');
+const floatingUi_dom_esm = require('./floating-ui.dom.esm-cae393e0.js');
+const afterNextRender = require('./after-next-render-a023ef47.js');
+const guxMenu_common = require('./gux-menu.common-d41b2fac.js');
 
-const guxSubmenuCss = "gux-submenu{display:block;flex:1 1 auto;align-self:auto}gux-submenu .gux-submenu-button{all:unset;display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;justify-content:flex-start;width:129px;height:32px;padding:0 12px 0 16px;line-height:32px;color:#2e394c;background-color:#fdfdfd}gux-submenu .gux-submenu-button:focus-within,gux-submenu .gux-submenu-button:hover{color:#fdfdfd;background-color:#2a60c8}gux-submenu .gux-submenu-button .gux-submenu-button-text{flex:1 1 auto;align-self:auto;order:0;margin-right:12px;overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap}gux-submenu .gux-submenu-button .gux-submenu-open-icon{flex:0 0 auto;align-self:auto;order:0;width:16px;height:16px}gux-submenu .gux-submenu-wrapper{flex-direction:column;padding:8px 0;visibility:hidden;background-color:#fdfdfd;border:1px solid #b4bccb;border-radius:4px;box-shadow:0 2px 4px rgba(32, 41, 55, 0.24)}gux-submenu .gux-submenu-wrapper.gux-shown{visibility:visible}";
+const guxSubmenuCss = ":host{display:block;flex:1 1 auto;align-self:auto}:host .gux-submenu-button{all:unset;display:flex;flex-direction:row;flex-wrap:nowrap;place-content:stretch flex-start;align-items:center;width:var(--gse-ui-flyoutMenu-width);height:var(--gse-ui-menu-option-height);padding:var(--gse-ui-menu-option-padding);line-height:var(--gse-ui-menu-option-label-default-text-lineHeight);color:var(--gse-ui-menu-option-label-foregroundColor);background-color:var(--gse-ui-menu-option-default-backgroundColor)}:host .gux-submenu-button:focus-within,:host .gux-submenu-button:hover{background-color:var(--gse-ui-menu-option-hover-backgroundColor)}:host .gux-submenu-button.gux-submenu-button-active{font-weight:var(--gse-ui-menu-option-label-active-text-fontWeight);color:var(--gse-ui-menu-option-shortcut-selected-foregroundColor);background-color:var(--gse-ui-menu-option-selected-backgroundColor)}:host .gux-submenu-button .gux-submenu-button-text{flex:1 1 auto;align-self:auto;order:0;margin-right:var(--gse-ui-menu-option-gap);overflow-x:hidden;text-overflow:ellipsis;white-space:nowrap}:host .gux-submenu-button .gux-submenu-open-icon{flex:0 0 auto;align-self:auto;order:0;width:var(--gse-ui-menu-option-startIcon-width);height:var(--gse-ui-menu-option-startIcon-height)}:host .gux-submenu-wrapper{position:fixed;top:0;left:0;flex-direction:column;padding:var(--gse-ui-menu-padding);margin:0;visibility:hidden;background-color:var(--gse-ui-menu-backgroundColor);border:none;border-radius:var(--gse-ui-menu-borderRadius);box-shadow:var(--gse-ui-menu-boxShadow-x) var(--gse-ui-menu-boxShadow-y) var(--gse-ui-menu-boxShadow-blur) var(--gse-ui-menu-boxShadow-spread) var(--gse-ui-menu-boxShadow-color)}:host .gux-submenu-wrapper.gux-shown{visibility:visible}";
 
 const GuxSubmenu = class {
   constructor(hostRef) {
@@ -15,13 +15,6 @@ const GuxSubmenu = class {
     this.label = undefined;
     this.isShown = false;
   }
-  forceUpdate(isShown) {
-    if (isShown) {
-      if (this.popperInstance) {
-        void this.popperInstance.update();
-      }
-    }
-  }
   /**
    * Focus on the components button element
    */
@@ -48,7 +41,7 @@ const GuxSubmenu = class {
         break;
       case 'ArrowLeft':
       case 'Escape':
-        if (this.submenuContentElement.contains(event.target)) {
+        if (!(this.root === event.target)) {
           event.stopPropagation();
         }
         void this.guxFocus();
@@ -60,15 +53,10 @@ const GuxSubmenu = class {
   onKeyup(event) {
     switch (event.key) {
       case ' ':
-        event.stopPropagation();
-        if (this.submenuContentElement.contains(document.activeElement)) {
-          this.root.focus();
-        }
-        else {
-          this.hideDelayTimeout = afterNextRender.afterNextRenderTimeout(() => {
-            this.focusOnSubmenu();
-          });
-        }
+        this.hideDelayTimeout = afterNextRender.afterNextRenderTimeout(() => {
+          this.focusOnSubmenu();
+        });
+        void this.guxFocus();
         break;
     }
   }
@@ -79,7 +67,7 @@ const GuxSubmenu = class {
     this.hide();
   }
   onClick(event) {
-    if (this.submenuContentElement.contains(event.target)) {
+    if (event.target.nodeName === 'GUX-MENU-OPTION') {
       this.hide();
       return;
     }
@@ -102,53 +90,70 @@ const GuxSubmenu = class {
       }, guxMenu_common.hideDelay);
     }
   }
-  runPopper() {
-    this.popperInstance = popper.createPopper(this.buttonElement, this.submenuElement, {
-      modifiers: [
-        {
-          name: 'offset',
-          options: {
-            offset: [-8, 0]
-          }
-        },
-        {
-          name: 'flip',
-          enabled: false
-        }
-      ],
-      placement: 'right-start'
-    });
-  }
-  destroyPopper() {
-    if (this.popperInstance) {
-      this.popperInstance.destroy();
-      this.popperInstance = null;
+  runUpdatePosition() {
+    if (this.root.isConnected) {
+      this.cleanupUpdatePosition = floatingUi_dom_esm.autoUpdate(this.buttonElement, this.submenuElement, () => this.updatePosition(), {
+        ancestorScroll: true,
+        elementResize: true,
+        animationFrame: true,
+        ancestorResize: true
+      });
+    }
+    else {
+      this.disconnectedCallback();
+    }
+  }
+  updatePosition() {
+    if (this.submenuElement) {
+      void floatingUi_dom_esm.computePosition(this.buttonElement, this.submenuElement, {
+        placement: 'right-start',
+        strategy: 'fixed',
+        // gse-ui-flyoutMenu-parenting-gap
+        middleware: [floatingUi_dom_esm.offset(4)]
+      }).then(({ x, y }) => {
+        Object.assign(this.submenuElement.style, {
+          left: `${x}px`,
+          top: `${y - 8}px` //TODO https://inindca.atlassian.net/browse/COMUI-2480
+        });
+      });
     }
   }
   focusOnSubmenu() {
     if (this.submenuContentElement.contains(document.activeElement)) {
       return;
     }
-    const menuItems = Array.from(this.submenuContentElement.children);
+    const menuItems = Array.from(this.root.children);
     const nextFocusableElement = menuItems[0];
     void nextFocusableElement.guxFocus();
   }
   componentDidLoad() {
-    this.runPopper();
+    if (this.isShown) {
+      this.runUpdatePosition();
+    }
+  }
+  componentDidUpdate() {
+    if (this.isShown) {
+      this.runUpdatePosition();
+    }
+    else if (this.cleanupUpdatePosition) {
+      this.cleanupUpdatePosition();
+    }
   }
   disconnectedCallback() {
-    this.destroyPopper();
+    if (this.cleanupUpdatePosition) {
+      this.cleanupUpdatePosition();
+    }
   }
   render() {
-    return (index.h(index.Host, null, index.h("button", { type: "button", class: "gux-submenu-button", role: "menuitem", tabIndex: -1, ref: el => (this.buttonElement = el), "aria-haspopup": "true", "aria-expanded": this.isShown.toString() }, index.h("span", { class: "gux-submenu-button-text" }, this.label), index.h("gux-icon", { class: "gux-submenu-open-icon", "icon-name": "chevron-small-right", decorative: true })), index.h("div", { ref: el => (this.submenuElement = el), class: {
+    return (index.h(index.Host, null, index.h("button", { type: "button", class: {
+        'gux-submenu-button': true,
+        'gux-submenu-button-active': this.isShown
+      }, role: "menuitem", tabIndex: -1, ref: el => (this.buttonElement = el), "aria-haspopup": "true", "aria-expanded": this.isShown.toString() }, index.h("span", { class: "gux-submenu-button-text" }, this.label), index.h("gux-icon", { class: "gux-submenu-open-icon", "icon-name": "chevron-small-right", decorative: true })), index.h("div", { ref: el => (this.submenuElement = el), class: {
         'gux-submenu-wrapper': true,
         'gux-shown': this.isShown
       } }, index.h("div", { role: "menu", class: "gux-submenu-content", ref: el => (this.submenuContentElement = el) }, index.h("slot", null)))));
   }
   get root() { return index.getElement(this); }
-  static get watchers() { return {
-    "isShown": ["forceUpdate"]
-  }; }
 };
 GuxSubmenu.style = guxSubmenuCss;
 

package/dist/cjs/gux-switch-item.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0d0fdb85.js');
+const index = require('./index-75c9f0d9.js');
 
-const guxSwitchItemCss = "gux-switch-item>.gux-switch-item{font-family:Roboto, sans-serif;font-weight:400;font-size:12px;line-height:20px;font:unset;color:#2e394c;text-align:center;background:none;border:none;outline:none}gux-switch-item>.gux-switch-item>gux-icon svg{fill:#99a4b8}gux-switch-item[disabled]{pointer-events:none;opacity:0.5}gux-switch-item.gux-selected{font-family:Roboto, sans-serif;font-weight:400;font-weight:700}gux-switch>gux-switch-item .gux-switch-item{padding:0 8px 4px;border-bottom:1px solid #e2e6ee}gux-switch>gux-switch-item .gux-switch-item:focus-visible,gux-switch>gux-switch-item .gux-switch-item:hover{padding:0 8px 1px;border-bottom:4px solid #2a60c8;outline:none}gux-switch>gux-switch-item .gux-switch-item:focus-visible>gux-icon svg,gux-switch>gux-switch-item .gux-switch-item:hover>gux-icon svg{fill:#2e394c}gux-switch>gux-switch-item .gux-switch-item>gux-icon{width:32px;height:32px}gux-switch>gux-switch-item.gux-selected .gux-switch-item{padding:0 8px 1px;border-bottom:4px solid #2a60c8}gux-switch>gux-switch-item.gux-selected .gux-switch-item>gux-icon svg{fill:#2e394c}gux-switch.gux-small>gux-switch-item .gux-switch-item{font-family:Roboto, sans-serif;font-weight:400;font-size:11px;line-height:16px;padding:0 4px;border-bottom:1px solid #e2e6ee}gux-switch.gux-small>gux-switch-item .gux-switch-item:focus-visible,gux-switch.gux-small>gux-switch-item .gux-switch-item:hover{border-bottom-color:#2e394c}gux-switch.gux-small>gux-switch-item .gux-switch-item>gux-icon{width:24px;height:24px}gux-switch.gux-small>gux-switch-item.gux-selected .gux-switch-item{border-bottom-color:#2e394c}";
+const guxSwitchItemCss = "gux-switch-item>.gux-switch-item{font-family:var(--gse-core-typography-body-sm-fontFamily), var(--gse-core-fontFamily-body), sans-serif;font-size:var(--gse-core-typography-body-sm-fontSize);line-height:var(--gse-core-typography-body-sm-lineHeight);font-weight:var(--gse-core-fontWeight-regular);font:unset;color:#2e394c;text-align:center;background:none;border:none;outline:none}gux-switch-item>.gux-switch-item>gux-icon svg{fill:#99a4b8}gux-switch-item[disabled]{pointer-events:none;opacity:0.5}gux-switch-item.gux-selected{font-family:var(--gse-core-typography-body-sm-fontFamily), var(--gse-core-fontFamily-body), sans-serif;font-size:var(--gse-core-typography-body-sm-fontSize);line-height:var(--gse-core-typography-body-sm-lineHeight);font-weight:var(--gse-core-fontWeight-bold)}gux-switch-legacy>gux-switch-item .gux-switch-item{padding:0 8px 4px;border-bottom:1px solid #e2e6ee}gux-switch-legacy>gux-switch-item .gux-switch-item:focus-visible,gux-switch-legacy>gux-switch-item .gux-switch-item:hover{padding:0 8px 1px;border-bottom:4px solid #2a60c8}gux-switch-legacy>gux-switch-item .gux-switch-item:focus-visible>gux-icon svg,gux-switch-legacy>gux-switch-item .gux-switch-item:hover>gux-icon svg{fill:#2e394c}gux-switch-legacy>gux-switch-item .gux-switch-item:focus-visible{outline:var(--gse-semantic-focusRing-default-border-color) var(--gse-semantic-focusRing-default-border-style) var(--gse-semantic-focusRing-default-border-width);outline-offset:var(--gse-semantic-focusRing-offset);border-radius:2px}gux-switch-legacy>gux-switch-item .gux-switch-item>gux-icon{width:32px;height:32px}gux-switch-legacy>gux-switch-item.gux-selected .gux-switch-item{padding:0 8px 1px;border-bottom:4px solid #2a60c8}gux-switch-legacy>gux-switch-item.gux-selected .gux-switch-item>gux-icon svg{fill:#2e394c}gux-switch-legacy.gux-small>gux-switch-item .gux-switch-item{font-family:var(--gse-core-typography-body-sm-fontFamily), var(--gse-core-fontFamily-body), sans-serif;font-size:var(--gse-core-typography-body-sm-fontSize);line-height:var(--gse-core-typography-body-sm-lineHeight);font-weight:var(--gse-core-fontWeight-regular);padding:0 4px;border-bottom:1px solid #e2e6ee}gux-switch-legacy.gux-small>gux-switch-item .gux-switch-item:focus-visible,gux-switch-legacy.gux-small>gux-switch-item .gux-switch-item:hover{border-bottom-color:#2e394c}gux-switch-legacy.gux-small>gux-switch-item .gux-switch-item>gux-icon{width:24px;height:24px}gux-switch-legacy.gux-small>gux-switch-item.gux-selected .gux-switch-item{border-bottom-color:#2e394c}";
 
 const GuxSwitchItem = class {
   constructor(hostRef) {