genesys-spark-components 4.0.0-beta.5 → 4.0.0-beta.51

package/dist/cjs/gux-form-field-time-picker.cjs.entry.js

@@ -2,25 +2,26 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0d0fdb85.js');
-const index$1 = require('./index-9bbde1aa.js');
-const onMutation = require('./on-mutation-247f99dd.js');
-const onAttributeChange = require('./on-attribute-change-37556263.js');
-const hasSlot = require('./has-slot-2e73d6e7.js');
-const getSlotTextContent = require('./get-slot-text-content-8a021eeb.js');
-const guxFormField_service = require('./gux-form-field.service-dd469568.js');
-const usage = require('./usage-2c2d30d0.js');
-require('./get-closest-element-ab4b2eee.js');
-require('./random-html-id-b86b61c0.js');
-require('./log-error-d46c02b7.js');
-require('./simulate-native-event-fe3e62da.js');
+const index = require('./index-75c9f0d9.js');
+const index$1 = require('./index-788d733b.js');
+const onMutation = require('./on-mutation-ec5d23bd.js');
+const onAttributeChange = require('./on-attribute-change-9b2d8c85.js');
+const hasSlot = require('./has-slot-429f8b9e.js');
+const getSlotTextContent = require('./get-slot-text-content-c4306c7a.js');
+const guxFormField_service = require('./gux-form-field.service-d9598ea6.js');
+const guxFormFieldFieldsetContainer = require('./gux-form-field-fieldset-container-af6f096e.js');
+const usage = require('./usage-b9ad66f0.js');
+require('./get-closest-element-26894e5a.js');
+require('./random-html-id-32ef8847.js');
+require('./log-error-8a92241e.js');
+require('./simulate-native-event-8209a457.js');
 
 const required = "Required";
 const componentResources = {
 	required: required
 };
 
-const guxFormFieldTimePickerCss = ".gux-form-field-fieldset-container{display:flex;min-width:0;padding:0;margin:var(--gux-form-field-fieldset-container-margin-top, 16px) 0 var(--gux-form-field-fieldset-container-margin-bottom, 16px) 0;border:none}.gux-form-field-error{display:none;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:flex-start;justify-content:flex-start;margin:4px 0;font-size:12px;line-height:20px;color:#2e394c}.gux-form-field-error.gux-show{display:flex}.gux-form-field-error gux-icon{flex:0 1 auto;align-self:auto;order:0;min-width:16px;min-height:16px;margin:2px 4px 0 0;color:#ea0b0b}.gux-form-field-error .gux-message{flex:0 1 auto;align-self:auto;order:0}.gux-form-field-legend-label{padding:0}.gux-form-field-legend-label.gux-required::after{font-size:12px;color:#ea0b0b;content:' *'}.gux-form-field-legend-label.gux-beside{position:relative;top:8px;float:left;width:fit-content;min-width:45px;margin-right:8px}.gux-form-field-legend-label.gux-above{margin-bottom:8px}.gux-form-field-legend-label.gux-screenreader{position:absolute;top:auto;left:-10000px;width:1px;height:1px;overflow:hidden}.gux-form-field-help{display:none;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:flex-start;justify-content:flex-start;margin:4px 0;font-size:12px;font-weight:400;line-height:20px;color:#6b7585}.gux-form-field-help.gux-show{display:flex}.gux-form-field-help .gux-message{flex:0 1 auto;align-self:none;order:0}::slotted(label){font-family:Roboto, sans-serif;font-weight:400;font-weight:700;font-size:12px;line-height:16px}.gux-input-and-error-container{flex-grow:1}";
+const guxFormFieldTimePickerCss = ".gux-form-field-fieldset-container{display:flex;min-width:0;padding:0;margin:0;border:none}.gux-form-field-error{display:none;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:flex-start;justify-content:flex-start;padding:var(--gse-ui-formControl-helper-errorPadding);font-family:var(--gse-ui-formControl-helper-helperText-fontFamily);font-size:var(--gse-ui-formControl-helper-helperText-fontSize);line-height:var(--gse-ui-formControl-helper-helperText-lineHeight);color:var(--gse-ui-formControl-helper-errorColor)}.gux-form-field-error.gux-show{display:flex}.gux-form-field-error gux-icon{flex:0 1 auto;align-self:auto;order:0;min-width:var(--gse-ui-icon-size-sm);min-height:var(--gse-ui-icon-size-sm);margin-right:var(--gse-ui-formControl-helper-gap);color:var(--gse-ui-formControl-helper-errorColor)}.gux-form-field-error .gux-message{flex:0 1 auto;align-self:auto;order:0}.gux-form-field-legend-label.gux-required::after{color:var(--gse-ui-formControl-label-indicator-requiredColor);content:\" *\"}.gux-form-field-legend-label.gux-beside{position:relative;top:8px;float:left;width:fit-content;min-width:45px;margin-right:var(--gse-ui-formControl-label-gap)}.gux-form-field-legend-label.gux-above{padding:var(--gse-ui-formControl-label-padding)}.gux-form-field-legend-label.gux-screenreader{position:absolute;top:auto;left:-10000px;width:1px;height:1px;overflow:hidden}.gux-form-field-help{display:none;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:flex-start;justify-content:flex-start;padding:var(--gse-ui-formControl-helper-padding);font-family:var(--gse-ui-formControl-helper-helperText-fontFamily);font-size:var(--gse-ui-formControl-helper-helperText-fontSize);line-height:var(--gse-ui-formControl-helper-helperText-lineHeight);color:var(--gse-ui-formControl-helper-defaultColor)}.gux-form-field-help.gux-show{display:flex}.gux-form-field-help .gux-message{flex:0 1 auto;align-self:none;order:0}::slotted(label){font-family:var(--gse-ui-formControl-label-text-fontFamily);font-size:var(--gse-ui-formControl-label-text-fontSize);font-weight:var(--gse-ui-formControl-label-text-fontWeight);line-height:var(--gse-ui-formControl-label-text-lineHeight);color:var(--gse-ui-formControl-label-labelColor)}.gux-input-and-error-container{flex-grow:1}";
 
 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;
@@ -43,7 +44,7 @@ const GuxFormFieldTimePicker = class {
     this.hasHelp = false;
   }
   watchValue(hasError) {
-    const timePickerSlot = this.root.querySelector('gux-time-picker-beta');
+    const timePickerSlot = this.root.querySelector('gux-time-picker');
     if (timePickerSlot) {
       timePickerSlot.hasError = hasError;
     }
@@ -69,7 +70,7 @@ const GuxFormFieldTimePicker = class {
     }
   }
   render() {
-    return (index.h(getSlotTextContent.GuxFormFieldFieldsetContainer, { labelPosition: this.computedLabelPosition }, index.h(getSlotTextContent.GuxFormFieldLegendLabel, { position: this.computedLabelPosition, required: this.required }, index.h("slot", { name: "label", onSlotchange: () => this.setLabel() }), this.renderScreenReaderText(this.getI18nValue('required'), this.required), this.renderScreenReaderText(getSlotTextContent.getSlotTextContent(this.root, 'error'), this.hasError)), index.h("div", { class: "gux-input-and-error-container" }, index.h("div", { class: {
+    return (index.h(guxFormFieldFieldsetContainer.GuxFormFieldFieldsetContainer, { labelPosition: this.computedLabelPosition }, index.h(guxFormFieldFieldsetContainer.GuxFormFieldLegendLabel, { position: this.computedLabelPosition, required: this.required }, index.h("slot", { name: "label", onSlotchange: () => this.setLabel() }), this.renderScreenReaderText(this.getI18nValue('required'), this.required), this.renderScreenReaderText(getSlotTextContent.getSlotTextContent(this.root, 'error'), this.hasError)), index.h("div", { class: "gux-input-and-error-container" }, index.h("div", { class: {
         'gux-input': true,
         'gux-input-error': this.hasError
       } }, index.h("div", { class: {
@@ -90,7 +91,7 @@ const GuxFormFieldTimePicker = class {
     return `${type}-${labelPositionVariant}`;
   }
   setInput() {
-    this.timePickerElement = this.root.querySelector('gux-time-picker-beta');
+    this.timePickerElement = this.root.querySelector('gux-time-picker');
     this.disabled = this.timePickerElement.disabled;
     this.required = this.timePickerElement.required;
     this.disabledObserver = onAttributeChange.onDisabledChange(this.timePickerElement, (disabled) => {

package/dist/cjs/gux-form-field-time-zone-picker.cjs.entry.js

@@ -0,0 +1,118 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-75c9f0d9.js');
+const index$1 = require('./index-788d733b.js');
+const onMutation = require('./on-mutation-ec5d23bd.js');
+const onAttributeChange = require('./on-attribute-change-9b2d8c85.js');
+const hasSlot = require('./has-slot-429f8b9e.js');
+const getSlotTextContent = require('./get-slot-text-content-c4306c7a.js');
+const guxFormField_service = require('./gux-form-field.service-d9598ea6.js');
+const guxFormFieldFieldsetContainer = require('./gux-form-field-fieldset-container-af6f096e.js');
+const usage = require('./usage-b9ad66f0.js');
+require('./get-closest-element-26894e5a.js');
+require('./random-html-id-32ef8847.js');
+require('./log-error-8a92241e.js');
+require('./simulate-native-event-8209a457.js');
+
+const required = "Required";
+const componentResources = {
+	required: required
+};
+
+const guxFormFieldTimeZonePickerCss = ".gux-form-field-fieldset-container{display:flex;min-width:0;padding:0;margin:0;border:none}.gux-form-field-error{display:none;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:flex-start;justify-content:flex-start;padding:var(--gse-ui-formControl-helper-errorPadding);font-family:var(--gse-ui-formControl-helper-helperText-fontFamily);font-size:var(--gse-ui-formControl-helper-helperText-fontSize);line-height:var(--gse-ui-formControl-helper-helperText-lineHeight);color:var(--gse-ui-formControl-helper-errorColor)}.gux-form-field-error.gux-show{display:flex}.gux-form-field-error gux-icon{flex:0 1 auto;align-self:auto;order:0;min-width:var(--gse-ui-icon-size-sm);min-height:var(--gse-ui-icon-size-sm);margin-right:var(--gse-ui-formControl-helper-gap);color:var(--gse-ui-formControl-helper-errorColor)}.gux-form-field-error .gux-message{flex:0 1 auto;align-self:auto;order:0}.gux-form-field-legend-label.gux-required::after{color:var(--gse-ui-formControl-label-indicator-requiredColor);content:\" *\"}.gux-form-field-legend-label.gux-beside{position:relative;top:8px;float:left;width:fit-content;min-width:45px;margin-right:var(--gse-ui-formControl-label-gap)}.gux-form-field-legend-label.gux-above{padding:var(--gse-ui-formControl-label-padding)}.gux-form-field-legend-label.gux-screenreader{position:absolute;top:auto;left:-10000px;width:1px;height:1px;overflow:hidden}.gux-form-field-help{display:none;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:flex-start;justify-content:flex-start;padding:var(--gse-ui-formControl-helper-padding);font-family:var(--gse-ui-formControl-helper-helperText-fontFamily);font-size:var(--gse-ui-formControl-helper-helperText-fontSize);line-height:var(--gse-ui-formControl-helper-helperText-lineHeight);color:var(--gse-ui-formControl-helper-defaultColor)}.gux-form-field-help.gux-show{display:flex}.gux-form-field-help .gux-message{flex:0 1 auto;align-self:none;order:0}::slotted(label){font-family:var(--gse-ui-formControl-label-text-fontFamily);font-size:var(--gse-ui-formControl-label-text-fontSize);font-weight:var(--gse-ui-formControl-label-text-fontWeight);line-height:var(--gse-ui-formControl-label-text-lineHeight);color:var(--gse-ui-formControl-label-labelColor)}.gux-input-and-error-container{flex-grow:1}";
+
+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;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const GuxFormFieldTimeZonePicker = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.labelPosition = undefined;
+    this.computedLabelPosition = 'above';
+    this.disabled = undefined;
+    this.required = undefined;
+    this.hasError = false;
+    this.hasHelp = false;
+  }
+  watchValue(hasError) {
+    const timeZonePickerSlot = this.root.querySelector('gux-time-zone-picker-beta');
+    if (timeZonePickerSlot) {
+      timeZonePickerSlot.hasError = hasError;
+    }
+  }
+  onMutation() {
+    this.hasError = hasSlot.hasSlot(this.root, 'error');
+    this.hasHelp = hasSlot.hasSlot(this.root, 'help');
+  }
+  async componentWillLoad() {
+    this.getI18nValue = await index$1.buildI18nForComponent(this.root, componentResources);
+    this.setInput();
+    this.setLabel();
+    this.hasError = hasSlot.hasSlot(this.root, 'error');
+    this.hasHelp = hasSlot.hasSlot(this.root, 'help');
+    usage.trackComponent(this.root, { variant: this.variant });
+  }
+  disconnectedCallback() {
+    if (this.disabledObserver) {
+      this.disabledObserver.disconnect();
+    }
+    if (this.requiredObserver) {
+      this.requiredObserver.disconnect();
+    }
+  }
+  render() {
+    return (index.h(guxFormFieldFieldsetContainer.GuxFormFieldFieldsetContainer, { labelPosition: this.computedLabelPosition }, index.h(guxFormFieldFieldsetContainer.GuxFormFieldLegendLabel, { position: this.computedLabelPosition, required: this.required }, index.h("slot", { name: "label", onSlotchange: () => this.setLabel() }), this.renderScreenReaderText(this.getI18nValue('required'), this.required), this.renderScreenReaderText(getSlotTextContent.getSlotTextContent(this.root, 'error'), this.hasError)), index.h("div", { class: "gux-input-and-error-container" }, index.h("div", { class: {
+        'gux-input': true,
+        'gux-input-error': this.hasError,
+        'gux-time-zone-picker-container': true,
+        'gux-disabled': this.disabled
+      } }, index.h("slot", null)), index.h(guxFormField_service.GuxFormFieldError, { show: this.hasError }, index.h("slot", { name: "error" })), index.h(guxFormField_service.GuxFormFieldHelp, { show: !this.hasError && this.hasHelp }, index.h("slot", { name: "help" })))));
+  }
+  renderScreenReaderText(text, condition = true) {
+    if (condition) {
+      return (index.h("gux-screen-reader-beta", null, text));
+    }
+  }
+  get variant() {
+    const labelPositionVariant = this.labelPosition
+      ? this.labelPosition.toLowerCase()
+      : 'none';
+    const type = 'timeZonePicker';
+    return `${type}-${labelPositionVariant}`;
+  }
+  setInput() {
+    this.timeZonePickerElement = this.root.querySelector('gux-time-zone-picker-beta');
+    this.disabled = this.timeZonePickerElement.disabled;
+    this.required = this.timeZonePickerElement.required;
+    this.disabledObserver = onAttributeChange.onDisabledChange(this.timeZonePickerElement, (disabled) => {
+      this.disabled = disabled;
+    });
+    this.requiredObserver = onAttributeChange.onRequiredChange(this.timeZonePickerElement, (required) => {
+      this.required = required;
+    });
+    guxFormField_service.validateFormIds(this.root, this.timeZonePickerElement);
+  }
+  setLabel() {
+    this.label = this.root.querySelector('label[slot="label"]');
+    this.computedLabelPosition = guxFormField_service.getComputedLabelPosition(this.label, this.labelPosition);
+  }
+  get root() { return index.getElement(this); }
+  static get watchers() { return {
+    "hasError": ["watchValue"]
+  }; }
+};
+__decorate([
+  onMutation.OnMutation({ childList: true, subtree: true })
+], GuxFormFieldTimeZonePicker.prototype, "onMutation", null);
+GuxFormFieldTimeZonePicker.style = guxFormFieldTimeZonePickerCss;
+
+exports.gux_form_field_time_zone_picker = GuxFormFieldTimeZonePicker;

package/dist/cjs/gux-form-field.service-d9598ea6.js

@@ -0,0 +1,151 @@
+'use strict';
+
+const index = require('./index-75c9f0d9.js');
+const randomHtmlId = require('./random-html-id-32ef8847.js');
+const logError = require('./log-error-8a92241e.js');
+const simulateNativeEvent = require('./simulate-native-event-8209a457.js');
+const hasSlot = require('./has-slot-429f8b9e.js');
+
+const GuxFormFieldHelp = ({ show }, children) => {
+  return (index.h("div", { class: {
+      'gux-form-field-help': true,
+      'gux-show': show
+    } },
+    index.h("div", { class: "gux-message" }, children)));
+};
+
+const GuxFormFieldError = ({ show }, children) => {
+  return (index.h("div", { class: {
+      'gux-form-field-error': true,
+      'gux-show': show
+    } },
+    index.h("gux-icon", { "icon-name": "alert-warning-octogon", decorative: true }),
+    index.h("div", { class: "gux-message" }, children)));
+};
+
+function setInputValue(input, value, focusAfter) {
+  input.value = value;
+  simulateNativeEvent.simulateNativeEvent(input, 'input');
+  simulateNativeEvent.simulateNativeEvent(input, 'change');
+  if (focusAfter) {
+    input.focus();
+  }
+}
+
+function clearInput(input) {
+  setInputValue(input, '', true);
+}
+function hasContent(input) {
+  return Boolean(input === null || input === void 0 ? void 0 : input.value);
+}
+function getComputedLabelPosition(label, labelPosition) {
+  if (label) {
+    if (['above', 'beside', 'screenreader'].includes(labelPosition)) {
+      return labelPosition;
+    }
+    else if (label.offsetWidth > 1 && label.offsetWidth < 40) {
+      return 'beside';
+    }
+    else {
+      return 'above';
+    }
+  }
+}
+function validateFormIds(root, input) {
+  var _a, _b, _c, _d;
+  if (hasLabelSlot(root)) {
+    const label = root.querySelector('label[slot="label"]');
+    const inputHasId = Boolean(input.hasAttribute('id'));
+    const labelHasFor = Boolean(label.hasAttribute('for'));
+    if (!inputHasId && labelHasFor) {
+      logError.logError(root, 'A "for" attribute has been provided on the label but there is no corresponding id on the input. Either provide an id on the input or omit the "for" attribute from the label. If there is no input id and no "for" attribute provided, the component will automatically generate an id and link it to the "for" attribute.');
+    }
+    else if (!inputHasId) {
+      const defaultInputId = randomHtmlId.randomHTMLId('gux-form-field-input');
+      input.setAttribute('id', defaultInputId);
+      label.setAttribute('for', defaultInputId);
+    }
+    else if (inputHasId && !labelHasFor) {
+      const forId = input.getAttribute('id');
+      label.setAttribute('for', forId);
+    }
+    else if (inputHasId &&
+      labelHasFor &&
+      input.getAttribute('id') !== label.getAttribute('for')) {
+      logError.logError(root, 'The input id and label for attribute should match.');
+    }
+  }
+  else {
+    logError.logError(root, 'A label is required for this component. If a visual label is not needed for this use case, please add localized text for a screenreader and set the label-position attribute to "screenreader" to visually hide the label.');
+  }
+  if (hasSlot.hasSlot(root, 'error')) {
+    const error = root.querySelector('[slot="error"]');
+    const errorId = randomHtmlId.randomHTMLId('gux-form-field-error');
+    const describedByIds = ((_a = input
+      .getAttribute('aria-describedby')) === null || _a === void 0 ? void 0 : _a.split(' ').filter(id => !id.startsWith(`gux-form-field-error`))) || [];
+    error.setAttribute('id', errorId);
+    describedByIds.push(errorId);
+    describedByIds &&
+      input.setAttribute('aria-describedby', describedByIds.join(' '));
+  }
+  else if (input.getAttribute('aria-describedby')) {
+    const describedByIds = ((_b = input
+      .getAttribute('aria-describedby')) === null || _b === void 0 ? void 0 : _b.split(' ').filter(id => !id.startsWith(`gux-form-field-error`))) || [];
+    input.setAttribute('aria-describedby', describedByIds.join(' '));
+  }
+  if (hasSlot.hasSlot(root, 'help')) {
+    const help = root.querySelector('[slot="help"]');
+    const helpId = randomHtmlId.randomHTMLId('gux-form-field-help');
+    const describedByIds = ((_c = input
+      .getAttribute('aria-describedby')) === null || _c === void 0 ? void 0 : _c.split(' ').filter(id => !id.startsWith(`gux-form-field-help`))) || [];
+    help.setAttribute('id', helpId);
+    describedByIds.push(helpId);
+    describedByIds &&
+      input.setAttribute('aria-describedby', describedByIds.join(' '));
+  }
+  else if (input.getAttribute('aria-describedby')) {
+    const describedByIds = ((_d = input
+      .getAttribute('aria-describedby')) === null || _d === void 0 ? void 0 : _d.split(' ').filter(id => !id.startsWith(`gux-form-field-help`))) || [];
+    input.setAttribute('aria-describedby', describedByIds.join(' '));
+  }
+}
+function setSlotAriaAttribute(root, attribute, input, slotName) {
+  var _a;
+  if (hasSlot.hasSlot(root, slotName)) {
+    const slottedElement = root.querySelector(`[slot=${slotName}]`);
+    const randomId = randomHtmlId.randomHTMLId(`gux-${slotName}`);
+    const ariaAttributeIds = ((_a = input
+      .getAttribute(attribute)) === null || _a === void 0 ? void 0 : _a.split(' ').filter(id => !id.startsWith(`gux-${slotName}`))) || [];
+    slottedElement.setAttribute('id', randomId);
+    ariaAttributeIds === null || ariaAttributeIds === void 0 ? void 0 : ariaAttributeIds.push(randomId);
+    ariaAttributeIds &&
+      input.setAttribute(attribute, ariaAttributeIds.join(' '));
+  }
+}
+function setSlotAriaLabelledby(root, input, slotName) {
+  setSlotAriaAttribute(root, 'aria-labelledby', input, slotName);
+}
+function setSlotAriaDescribedby(root, input, slotName) {
+  setSlotAriaAttribute(root, 'aria-describedby', input, slotName);
+}
+function getSlottedInput(root, inputSelector) {
+  const inputElement = root.querySelector(inputSelector);
+  if (!inputElement) {
+    logError.logError(root, `This component requires an input element that matches the following selector: ${inputSelector}`);
+  }
+  return inputElement;
+}
+function hasLabelSlot(root) {
+  return Boolean(root.querySelector('label[slot="label"]'));
+}
+
+exports.GuxFormFieldError = GuxFormFieldError;
+exports.GuxFormFieldHelp = GuxFormFieldHelp;
+exports.clearInput = clearInput;
+exports.getComputedLabelPosition = getComputedLabelPosition;
+exports.getSlottedInput = getSlottedInput;
+exports.hasContent = hasContent;
+exports.setInputValue = setInputValue;
+exports.setSlotAriaDescribedby = setSlotAriaDescribedby;
+exports.setSlotAriaLabelledby = setSlotAriaLabelledby;
+exports.validateFormIds = validateFormIds;

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0d0fdb85.js');
-const usage = require('./usage-2c2d30d0.js');
-const logError = require('./log-error-d46c02b7.js');
+const index = require('./index-75c9f0d9.js');
+const usage = require('./usage-b9ad66f0.js');
+const logError = require('./log-error-8a92241e.js');
 
 const svgHTMLCache = new Map();
 async function fetchIcon(iconName) {
@@ -17,7 +17,7 @@ async function fetchIcon(iconName) {
 function iconInfoToId(iconName) {
   return iconName.replace('/', '-');
 }
-async function getBaseSvgHtml(iconName) {
+async function getBaseSvgHtml(iconName = 'unknown') {
   const id = iconInfoToId(iconName);
   if (svgHTMLCache.has(id)) {
     return svgHTMLCache.get(id);
@@ -45,10 +45,8 @@ const GuxIcon = class {
     this.svgHtml = undefined;
   }
   async prepIcon(iconName) {
-    if (iconName) {
-      this.baseSvgHtml = await getBaseSvgHtml(iconName);
-      this.svgHtml = this.getSvgWithAriaAttributes(this.baseSvgHtml);
-    }
+    this.baseSvgHtml = await getBaseSvgHtml(iconName);
+    this.svgHtml = this.getSvgWithAriaAttributes(this.baseSvgHtml);
   }
   watchDecorative(decorative) {
     this.validateProps(decorative, this.screenreaderText);

package/dist/cjs/gux-inline-alert.cjs.entry.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0d0fdb85.js');
-const index$1 = require('./index-9bbde1aa.js');
-const usage = require('./usage-2c2d30d0.js');
-require('./get-closest-element-ab4b2eee.js');
+const index = require('./index-75c9f0d9.js');
+const index$1 = require('./index-788d733b.js');
+const usage = require('./usage-b9ad66f0.js');
+require('./get-closest-element-26894e5a.js');
 
 const info = "Information alert with message";
 const success = "Success alert with message";
@@ -18,7 +18,7 @@ const translationResources = {
 	error: error
 };
 
-const guxInlineAlertCss = ":host{display:block}.gux-inline-alert{display:flex;flex-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-alert-gap);align-items:center;justify-content:flex-start;padding:var(--gse-ui-alert-padding);border:1px solid;border-radius:var(--gse-ui-alert-borderRadius)}.gux-inline-alert gux-icon{flex-shrink:0;align-self:flex-start;width:var(--gse-ui-icon-size-sm);height:var(--gse-ui-icon-size-sm);margin-top:1px}.gux-inline-alert gux-tooltip-title{white-space:nowrap}.gux-inline-alert .gux-message-wrapper{display:flex;justify-content:flex-start;align-items:center;gap:var(--gse-ui-alert-gap);font-family:var(--gse-ui-alert-text-fontFamily);font-size:var(--gse-ui-alert-text-fontSize);font-weight:400;line-height:var(--gse-ui-alert-text-lineHeight)}.gux-inline-alert .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}.gux-inline-alert.gux-info{color:var(--gse-ui-alert-info-foregroundColor);background-color:var(--gse-ui-alert-info-backgroundColor);border:var(--gse-ui-alert-info-border-width) var(--gse-ui-alert-info-border-style) var(--gse-ui-alert-info-border-color)}.gux-inline-alert.gux-info gux-icon{color:var(--gse-ui-alert-info-iconColor)}.gux-inline-alert.gux-error{color:var(--gse-ui-alert-error-foregroundColor);background-color:var(--gse-ui-alert-error-backgroundColor);border:var(--gse-ui-alert-error-border-width) var(--gse-ui-alert-error-border-style) var(--gse-ui-alert-error-border-color)}.gux-inline-alert.gux-error gux-icon{color:var(--gse-ui-alert-error-iconColor)}.gux-inline-alert.gux-warning{color:var(--gse-ui-alert-warning-foregroundColor);background-color:var(--gse-ui-alert-warning-backgroundColor);border:var(--gse-ui-alert-warning-border-width) var(--gse-ui-alert-warning-border-style) var(--gse-ui-alert-warning-border-color)}.gux-inline-alert.gux-warning gux-icon{color:var(--gse-ui-alert-warning-iconColor)}.gux-inline-alert.gux-success{color:var(--gse-ui-alert-success-foregroundColor);background-color:var(--gse-ui-alert-success-backgroundColor);border:var(--gse-ui-alert-success-border-width) var(--gse-ui-alert-success-border-style) var(--gse-ui-alert-success-border-color)}.gux-inline-alert.gux-success gux-icon{color:var(--gse-ui-alert-success-iconColor)}";
+const guxInlineAlertCss = ":host{display:block}.gux-inline-alert{display:inline-flex;flex-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-alert-gap);align-items:center;justify-content:flex-start;padding:var(--gse-ui-alert-padding);border:1px solid;border-radius:var(--gse-ui-alert-borderRadius)}.gux-inline-alert gux-icon{flex-shrink:0;align-self:flex-start;width:var(--gse-ui-icon-size-sm);height:var(--gse-ui-icon-size-sm);margin-top:1px}.gux-inline-alert gux-tooltip-title{white-space:nowrap}.gux-inline-alert .gux-message-wrapper{display:flex;gap:var(--gse-ui-alert-gap);align-items:center;justify-content:flex-start;font-family:var(--gse-ui-alert-text-fontFamily);font-size:var(--gse-ui-alert-text-fontSize);font-weight:var(--gse-ui-alert-text-fontWeight);line-height:var(--gse-ui-alert-text-lineHeight)}.gux-inline-alert .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}.gux-inline-alert.gux-info{color:var(--gse-ui-alert-info-foregroundColor);background-color:var(--gse-ui-alert-info-backgroundColor);border:var(--gse-ui-alert-info-border-width) var(--gse-ui-alert-info-border-style) var(--gse-ui-alert-info-border-color)}.gux-inline-alert.gux-info gux-icon{color:var(--gse-ui-alert-info-iconColor)}.gux-inline-alert.gux-error{color:var(--gse-ui-alert-error-foregroundColor);background-color:var(--gse-ui-alert-error-backgroundColor);border:var(--gse-ui-alert-error-border-width) var(--gse-ui-alert-error-border-style) var(--gse-ui-alert-error-border-color)}.gux-inline-alert.gux-error gux-icon{color:var(--gse-ui-alert-error-iconColor)}.gux-inline-alert.gux-warning{color:var(--gse-ui-alert-warning-foregroundColor);background-color:var(--gse-ui-alert-warning-backgroundColor);border:var(--gse-ui-alert-warning-border-width) var(--gse-ui-alert-warning-border-style) var(--gse-ui-alert-warning-border-color)}.gux-inline-alert.gux-warning gux-icon{color:var(--gse-ui-alert-warning-iconColor)}.gux-inline-alert.gux-success{color:var(--gse-ui-alert-success-foregroundColor);background-color:var(--gse-ui-alert-success-backgroundColor);border:var(--gse-ui-alert-success-border-width) var(--gse-ui-alert-success-border-style) var(--gse-ui-alert-success-border-color)}.gux-inline-alert.gux-success gux-icon{color:var(--gse-ui-alert-success-iconColor)}";
 
 const GuxAlert = class {
   constructor(hostRef) {

package/dist/cjs/gux-list-divider.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 guxListDividerCss = ":host{position:relative;display:flex;width:100%;height:1px;padding:0;margin:16px 0;line-height:32px;pointer-events:none;cursor:pointer;cursor:default;background-color:#c8cfda}";
 

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

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0d0fdb85.js');
-const getClosestElement = require('./get-closest-element-ab4b2eee.js');
+const index = require('./index-75c9f0d9.js');
+const getClosestElement = require('./get-closest-element-26894e5a.js');
 
-const guxListItemCss = ":host{width:100%;outline:none}:host([disabled]){pointer-events:none}:host([disabled='false']){pointer-events:auto}::slotted(gux-icon){width:16px;height:16px;margin-right:8px;vertical-align:middle}button{all:unset;box-sizing:border-box;width:100%;min-height:32px;padding:8px 16px;color:#2e394c;word-wrap:break-word;cursor:pointer;border:none;outline:none}button:focus-visible:not(:disabled){color:#fdfdfd;background:#2a60c8}button:hover:not(:disabled){color:#fdfdfd;background:#2754ac}button:active:not(:disabled){color:#fdfdfd;background:#23478f}button:disabled{color:rgba(46, 57, 76, 0.5);cursor:default}";
+const guxListItemCss = ":host{width:100%;outline:none}:host([disabled]){pointer-events:none}:host([disabled=false]){pointer-events:auto}::slotted(gux-icon){width:var(--gse-ui-menu-option-startIcon-height);height:var(--gse-ui-menu-option-startIcon-height);margin-right:var(--gse-ui-menu-option-gap);vertical-align:middle}button{all:unset;box-sizing:border-box;width:100%;min-height:var(--gse-ui-menu-option-height);padding:var(--gse-ui-menu-option-padding);font-family:var(--gse-ui-menu-option-label-default-text-fontFamily);font-size:var(--gse-ui-menu-option-label-default-text-fontSize);font-weight:var(--gse-ui-menu-option-label-default-text-fontWeight);line-height:var(--gse-ui-menu-option-label-default-text-lineHeight);color:var(--gse-ui-menu-option-label-foregroundColor);word-wrap:break-word;cursor:pointer;background-color:var(--gse-ui-menu-option-default-backgroundColor);border:none;outline:none;outline-offset:calc(var(--gse-ui-menu-option-focus-border-width) * -1)}button:focus-visible:not(:disabled){border-radius:var(--gse-semantic-focusRing-cornerRadius);outline:var(--gse-ui-menu-option-focus-border-width) var(--gse-ui-menu-option-focus-border-style) var(--gse-ui-menu-option-focus-border-color)}button:hover:not(:disabled){background:var(--gse-ui-menu-option-hover-backgroundColor)}button:active:not(:disabled){font-family:var(--gse-ui-menu-option-label-active-text-fontFamily);font-size:var(--gse-ui-menu-option-label-active-text-fontSize);font-weight:var(--gse-ui-menu-option-label-active-text-fontWeight);line-height:var(--gse-ui-menu-option-label-active-text-lineHeight);background:var(--gse-ui-menu-option-selected-backgroundColor)}button:disabled{cursor:default;opacity:var(--gse-ui-menu-option-disabled-opacity)}";
 
 const GuxListItem = class {
   constructor(hostRef) {

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0d0fdb85.js');
-const guxList_service = require('./gux-list.service-763539a2.js');
-const usage = require('./usage-2c2d30d0.js');
+const index = require('./index-75c9f0d9.js');
+const guxList_service = require('./gux-list.service-4beaa394.js');
+const usage = require('./usage-b9ad66f0.js');
 
 const guxListCss = ":host{display:flex;flex-direction:column;flex-wrap:nowrap;align-content:stretch;align-items:flex-start;justify-content:flex-start}";
 
@@ -56,7 +56,7 @@ const GuxList = class {
     guxList_service.last(this.root, validFocusableItems);
   }
   renderFocusTarget() {
-    return (index.h("span", { tabindex: "-1" }));
+    return (index.h("span", { tabindex: "-1", "aria-hidden": "true" }));
   }
   render() {
     return (index.h(index.Host, { role: "list" }, this.renderFocusTarget(), index.h("slot", null)));

package/dist/cjs/gux-listbox-multi.cjs.entry.js

@@ -2,14 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0d0fdb85.js');
-const guxListbox_service = require('./gux-listbox.service-93102b5b.js');
-const index$1 = require('./index-9bbde1aa.js');
-const whenEventIsFrom = require('./when-event-is-from-69b5ca13.js');
-const simulateNativeEvent = require('./simulate-native-event-fe3e62da.js');
-const usage = require('./usage-2c2d30d0.js');
-const afterNextRender = require('./after-next-render-a09f528a.js');
-require('./get-closest-element-ab4b2eee.js');
+const index = require('./index-75c9f0d9.js');
+const guxListbox_service = require('./gux-listbox.service-9bcd72cb.js');
+const index$1 = require('./index-788d733b.js');
+const whenEventIsFrom = require('./when-event-is-from-20e89254.js');
+const simulateNativeEvent = require('./simulate-native-event-8209a457.js');
+const usage = require('./usage-b9ad66f0.js');
+const afterNextRender = require('./after-next-render-a023ef47.js');
+require('./get-closest-element-26894e5a.js');
 
 const add = "Add {name}";
 const noMatches = "No matches";
@@ -20,7 +20,7 @@ const translationResources = {
 	loading: loading
 };
 
-const guxListboxMultiCss = ":host{box-sizing:border-box;display:block;max-height:20rem;padding:8px 0;margin:0;overflow-y:auto;color:#2e394c;background:#fdfdfd;border:1px solid #b4bccb;border-radius:4px;outline:none}:host(:focus-visible){outline:3px solid #aac9ff;outline-offset:1px;box-shadow:0 0 0 1px #fdfdfd}.gux-message-container{display:flex;flex-direction:column;flex-wrap:nowrap;align-content:stretch;align-items:center;justify-content:center}.gux-message-container .gux-no-matches{box-sizing:border-box;height:32px;padding:8px 16px;color:#2e394c}";
+const guxListboxMultiCss = ":host{box-sizing:border-box;display:block;max-height:20rem;padding:var(--gse-ui-menu-padding);overflow-y:auto;background:var(--gse-ui-menu-backgroundColor);border:var(--gse-ui-menu-border-width) var(--gse-ui-menu-border-style) var(--gse-ui-menu-border-color);border-radius:var(--gse-ui-menu-borderRadius);outline:none;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);scrollbar-color:var(--gse-ui-menu-scrollbar-foregroundColor)}.gux-message-container{display:flex;flex-direction:column;flex-wrap:nowrap;align-content:stretch;align-items:center;justify-content:center}.gux-message-container .gux-no-matches{box-sizing:border-box;height:var(--gse-ui-menu-option-height);font-family:var(--gse-ui-dropdown-menu-emptyState-subheader-text-fontFamily);font-size:var(--gse-ui-dropdown-menu-emptyState-subheader-text-fontSize);font-weight:var(--gse-ui-dropdown-menu-emptyState-subheader-text-fontWeight);line-height:var(--gse-ui-dropdown-menu-emptyState-subheader-text-lineHeight);color:var(--gse-ui-dropdown-menu-emptyState-subheader-foregroundColor)}";
 
 const GuxListboxMulti = class {
   constructor(hostRef) {
@@ -31,13 +31,11 @@ const GuxListboxMulti = class {
     this.filter = '';
     this.textInput = '';
     this.filterType = 'none';
+    this.emptyMessage = undefined;
     this.listboxOptions = [];
     this.allListboxOptionsFiltered = undefined;
     this.hasExactMatch = false;
   }
-  onFocus() {
-    guxListbox_service.setInitialActiveOption(this.root);
-  }
   onBlur() {
     guxListbox_service.clearActiveOptions(this.root);
   }
@@ -46,6 +44,11 @@ const GuxListboxMulti = class {
   }
   onKeydown(event) {
     var _a;
+    if (!guxListbox_service.hasActiveOption(this.root)) {
+      event.preventDefault();
+      guxListbox_service.setInitialActiveOption(this.root);
+      return;
+    }
     switch (event.key) {
       case 'Enter':
         event.preventDefault();
@@ -132,9 +135,9 @@ const GuxListboxMulti = class {
     let hasExactMatch = false;
     this.hasExactMatch = false;
     this.listboxOptions.forEach(listboxOption => {
-      var _a, _b, _c;
-      if (((_c = (_b = (_a = listboxOption
-        .querySelector('[gux-slot-container]')) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === null || _c === void 0 ? void 0 : _c.trim()) == this.textInput.toLowerCase().trim()) {
+      var _a, _b;
+      if (((_b = (_a = listboxOption.textContent) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.trim()) ==
+        this.textInput.toLowerCase().trim()) {
         hasExactMatch = true;
         this.hasExactMatch = true;
       }
@@ -160,7 +163,6 @@ const GuxListboxMulti = class {
   updateOnSlotChange() {
     this.setListboxOptions();
     this.updateListboxOptions();
-    guxListbox_service.setInitialActiveOption(this.root);
   }
   getOptionCreateElement() {
     this.optionCreateElement = this.root.querySelector('gux-create-option');
@@ -175,6 +177,7 @@ const GuxListboxMulti = class {
       listboxOption.selected = this.getSelectedValues().includes(listboxOption.value);
       if (this.filterType !== 'custom') {
         listboxOption.filtered = !listboxOption.textContent
+          .trim()
           .toLowerCase()
           .startsWith(this.textInput.toLowerCase());
       }
@@ -219,7 +222,7 @@ const GuxListboxMulti = class {
   renderAllListboxOptionsFiltered() {
     if (this.allListboxOptionsFiltered) {
       return [
-        index.h("div", { class: "gux-message-container" }, index.h("div", { class: "gux-no-matches" }, this.i18n('noMatches'))),
+        index.h("div", { class: "gux-message-container" }, index.h("div", { class: "gux-no-matches" }, this.emptyMessage || this.i18n('noMatches'))),
         this.renderHiddenSlot()
       ];
     }