genesys-spark-components 4.0.0-beta.3 → 4.0.0-beta.30

package/dist/esm/{gux-table-toolbar-beta.entry.js → gux-table-toolbar.entry.js}

@@ -1,7 +1,7 @@
 import { r as registerInstance, d as readTask, h, H as Host, g as getElement } from './index-0b66fe2c.js';
 import { O as OnResize } from './on-resize-7177429a.js';
 import { O as OnMutation } from './on-mutation-8c8b2331.js';
-import { t as trackComponent } from './usage-4f6d345a.js';
+import { t as trackComponent } from './usage-09e38ac3.js';
 import { g as getSlot } from './get-slot-52d073f3.js';
 
 /**
@@ -24,7 +24,7 @@ function setActionsIconOnlyProp(iconOnly, ...actionSets) {
     .forEach(action => (action.iconOnly = iconOnly));
 }
 
-const guxTableToolbarCss = ":host{display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:100%;max-height:48px;padding:0 8px 16px 8px;background-color:#fdfdfd;border-radius:4px}:host .search-filter-container{width:260px;min-width:260px}:host slot[name='search-and-filter']::slotted(*){display:flex;flex-direction:row;gap:4px;align-content:flex-start;align-items:center}:host .section-spacing{display:flex;flex-direction:row;min-width:72px}:host .gux-contextual-permanent-primary{display:flex;flex-direction:row;justify-content:space-between}:host .gux-contextual-permanent-primary slot[name='permanent-actions']::slotted(*),:host .gux-contextual-permanent-primary slot[name='contextual-actions']::slotted(*){display:flex;flex-direction:row;flex-wrap:nowrap;gap:4px;align-content:flex-end;align-items:center}:host .gux-contextual-permanent-primary .gux-contextual-wrapper{padding-right:8px;border-right:1px solid #d7dce5}:host .gux-contextual-permanent-primary .gux-permanent-menu-primary-wrapper{display:flex;flex-direction:row;flex-wrap:nowrap;gap:4px;margin-left:8px}";
+const guxTableToolbarCss = ":host{display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:100%;max-height:var(--gse-ui-dataTableItems-tableToolbar-height)}:host .search-filter-container{width:260px;min-width:260px;padding-right:var(--gse-ui-dataTableItems-tableToolbar-gap)}:host slot[name=search-and-filter]::slotted(*){display:flex;flex-direction:row;gap:var(--gse-ui-dataTableItems-tableToolbar-tableToolbarGroup-gap);align-content:flex-start;align-items:center}:host .section-spacing{display:flex;flex-direction:row;min-width:72px}:host .gux-contextual-permanent-primary{display:flex;flex-direction:row;justify-content:space-between;padding-left:var(--gse-ui-dataTableItems-tableToolbar-gap)}:host .gux-contextual-permanent-primary slot[name=permanent-actions]::slotted(*),:host .gux-contextual-permanent-primary slot[name=contextual-actions]::slotted(*){display:flex;flex-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-dataTableItems-tableToolbar-tableToolbarGroup-gap);align-content:flex-end;align-items:center}:host .gux-contextual-permanent-primary .gux-contextual-wrapper{padding-right:var(--gse-ui-dataTableItems-tableToolbar-gap);border-right:var(--gse-ui-dataTableItems-tableToolbar-divider-width) solid var(--gse-ui-dataTableItems-tableToolbar-dividerColor)}:host .gux-contextual-permanent-primary .gux-permanent-menu-primary-wrapper{display:flex;flex-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-dataTableItems-tableToolbar-tableToolbarGroup-gap);margin-left:var(--gse-ui-dataTableItems-tableToolbar-gap)}";
 
 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;
@@ -206,4 +206,4 @@ __decorate([
 ], GuxTableToolbar.prototype, "checkResponsiveLayout", null);
 GuxTableToolbar.style = guxTableToolbarCss;
 
-export { GuxTableToolbar as gux_table_toolbar_beta };
+export { GuxTableToolbar as gux_table_toolbar };

package/dist/esm/{gux-table-beta.entry.js → gux-table.entry.js}

@@ -2,11 +2,11 @@ import { r as registerInstance, c as createEvent, f as forceUpdate, d as readTas
 import { b as buildI18nForComponent } from './index-694d55cf.js';
 import { w as whenEventIsFrom } from './when-event-is-from-18667084.js';
 import { r as randomHTMLId } from './random-html-id-8e3f658c.js';
-import { t as trackComponent } from './usage-4f6d345a.js';
-import { t as tableResources } from './en-66f138f8.js';
+import { t as trackComponent } from './usage-09e38ac3.js';
+import { t as tableResources } from './en-5ed282a0.js';
 import './get-closest-element-1597503c.js';
 
-const guxTableCss = ":host{display:block;isolation:isolate}:host .gux-table{position:relative;height:inherit}:host .gux-table .gux-table-scroll-left,:host .gux-table .gux-table-scroll-right{position:absolute;top:0;z-index:1;display:flex;align-items:center;justify-content:center;width:24px;min-width:0;height:40px;padding:0;color:#2e394c;cursor:pointer;border-radius:4px}:host .gux-table .gux-table-scroll-left gux-icon,:host .gux-table .gux-table-scroll-right gux-icon{width:8px;height:8px}:host .gux-table .gux-table-scroll-left{border-top-left-radius:0;border-bottom-left-radius:0}:host .gux-table .gux-table-scroll-right{right:0;border-top-right-radius:0;border-bottom-right-radius:0}:host .gux-table .gux-table-container{width:100%;max-height:100%;overflow-x:hidden;scrollbar-color:rgba(32, 41, 55, 0.24) #fdfdfd;scrollbar-width:thin}:host .gux-table .gux-table-container::-webkit-scrollbar{width:4px}:host .gux-table .gux-table-container::-webkit-scrollbar-track{background:#fdfdfd}:host .gux-table .gux-table-container::-webkit-scrollbar-thumb{background:rgba(32, 41, 55, 0.24)}:host .gux-table .gux-table-container::-webkit-scrollbar-thumb:hover{background:rgba(32, 41, 55, 0.48)}:host .gux-table .gux-table-container.gux-column-resizing-hover,:host .gux-table .gux-table-container.gux-column-resizing{cursor:col-resize}:host .gux-empty-table{display:flex;align-items:center;justify-content:center;height:150px;color:#596373;background:#fdfdfd;font-family:Roboto, sans-serif;font-weight:400;font-weight:300;font-size:18px;line-height:24px}";
+const guxTableCss = ".gux-focus-ring-focused:focus{outline-width:var(--gse-semantic-focusRing-default-border-width);outline-style:var(--gse-semantic-focusRing-default-border-style);outline-color:var(--gse-semantic-focusRing-default-border-color);outline-offset:var(--gse-semantic-focusRing-offset)}.gux-focus-ring-focused-within:focus-within{outline-width:var(--gse-semantic-focusRing-default-border-width);outline-style:var(--gse-semantic-focusRing-default-border-style);outline-color:var(--gse-semantic-focusRing-default-border-color);outline-offset:var(--gse-semantic-focusRing-offset)}.gux-focus-ring-focused-visible:focus-visible{outline-width:var(--gse-semantic-focusRing-default-border-width);outline-style:var(--gse-semantic-focusRing-default-border-style);outline-color:var(--gse-semantic-focusRing-default-border-color);outline-offset:var(--gse-semantic-focusRing-offset)}.gux-focus-ring-small-focused:focus{outline-width:var(--gse-semantic-focusRing-small-border-width);outline-style:var(--gse-semantic-focusRing-small-border-style);outline-color:var(--gse-semantic-focusRing-small-border-color)}.gux-focus-ring-small-focused-within:focus-within{outline-width:var(--gse-semantic-focusRing-small-border-width);outline-style:var(--gse-semantic-focusRing-small-border-style);outline-color:var(--gse-semantic-focusRing-small-border-color)}.gux-focus-ring-small-focused-visible:focus-visible{outline-width:var(--gse-semantic-focusRing-small-border-width);outline-style:var(--gse-semantic-focusRing-small-border-style);outline-color:var(--gse-semantic-focusRing-small-border-color)}.gux-icon-anchor gux-icon{padding-right:var(--gse-ui-links-inLine-padding)}:host{display:block;isolation:isolate}:host .gux-table{position:relative;height:inherit}:host .gux-table .gux-table-container{max-height:100%;overflow:auto;scrollbar-color:var(--gse-ui-dataTableItems-scrollbar-foregroundColor);scrollbar-width:thin}:host .gux-table .gux-table-container.gux-column-resizing-hover,:host .gux-table .gux-table-container.gux-column-resizing{cursor:col-resize}:host .gux-empty-table{display:flex;align-items:center;justify-content:center;height:calc(100% - var(--gse-ui-dataTableItems-header-default-height));color:#596373;background:#fdfdfd;font-family:var(--gse-core-fontFamily-heading), var(--gse-core-fontFamily-body), sans-serif;font-weight:var(--gse-core-fontWeight-semiBold);font-size:var(--gse-core-fontSize-lg);line-height:var(--gse-lineHeight-md)}";
 
 const COL_RESIZE_HANDLE_WIDTH = 3;
 const GuxTable = class {
@@ -17,11 +17,7 @@ const GuxTable = class {
     this.slotObserver = new MutationObserver(() => forceUpdate(this));
     this.tableId = randomHTMLId('gux-table');
     this.columnsWidths = {};
-    this.tableWidth = this.getElementComputedWidth(this.slottedTable);
     this.isVerticalScroll = false;
-    this.isHorizontalScroll = false;
-    this.isScrolledToFirstCell = true;
-    this.isScrolledToLastCell = false;
     this.columnResizeHover = false;
     this.compact = false;
     this.objectTable = false;
@@ -38,15 +34,11 @@ const GuxTable = class {
       this.prepareResizableColumns();
     }
     this.prepareSelectableRows();
-    this.checkHorizontalScroll();
     this.checkVerticalScroll();
     if (!this.resizeObserver && window.ResizeObserver) {
       this.resizeObserver = new ResizeObserver(() => {
         readTask(() => {
-          this.checkHorizontalScroll();
           this.checkVerticalScroll();
-          this.updateScrollState();
-          this.scaleColumnWidths();
         });
       });
     }
@@ -59,6 +51,11 @@ const GuxTable = class {
       childList: true
     });
   }
+  checkVerticalScroll() {
+    const tableContainerElement = this.tableContainer;
+    this.isVerticalScroll =
+      tableContainerElement.scrollHeight > tableContainerElement.clientHeight;
+  }
   disconnectedCallback() {
     if (this.resizeObserver) {
       this.resizeObserver.unobserve(this.tableContainer);
@@ -69,16 +66,15 @@ const GuxTable = class {
     }
   }
   /******************************* Event Listeners *******************************/
-  onScroll() {
-    this.updateScrollState();
-  }
   onInternalAllRowSelectChange(event) {
     event.stopPropagation();
-    this.handleSelectAllRows();
+    this.handleSelectAllRows(event.detail);
   }
   onInternalRowSelectChange(event) {
     event.stopPropagation();
-    this.handleRowSelection(event.target);
+    const rowCheckbox = event.target;
+    rowCheckbox.selected = event.detail;
+    this.handleRowSelection(rowCheckbox);
   }
   onMouseMove(event) {
     if (this.resizableColumns) {
@@ -145,7 +141,7 @@ const GuxTable = class {
     const selectAllCheckbox = this.selectAllCheckbox;
     if (selectAllCheckbox) {
       const rowCheckboxes = this.rowCheckboxes;
-      const filterDisabled = rowCheckboxes.filter(rowBox => rowBox.hasAttribute('disabled') == false);
+      const filterDisabled = rowCheckboxes.filter(rowBox => !rowBox.hasAttribute('disabled'));
       const selectedRows = filterDisabled.filter(box => box.selected);
       const hasRows = Boolean(rowCheckboxes.length);
       const allSelected = selectedRows.length === filterDisabled.length;
@@ -155,12 +151,13 @@ const GuxTable = class {
     }
   }
   // Handle a change in state of the select all checkbox
-  handleSelectAllRows() {
+  handleSelectAllRows(selected) {
     const selectAllCheckbox = this.selectAllCheckbox;
     const rowCheckboxes = this.rowCheckboxes;
     rowCheckboxes.forEach(rowBox => {
+      selectAllCheckbox.selected = selected;
       if (!rowBox.hasAttribute('disabled')) {
-        rowBox.selected = selectAllCheckbox.selected;
+        rowBox.selected = selected;
         this.updateRowSelection(rowBox);
       }
     });
@@ -185,101 +182,18 @@ const GuxTable = class {
       tableRow.removeAttribute('data-selected-row');
     }
   }
-  /******************************* Scrolling *******************************/
-  nextColumn() {
-    const columns = this.tableColumns;
-    const viewportBounds = this.tableContainer.getBoundingClientRect();
-    // The last column who's right side is out of the viewport
-    // or the last element if we can't find one.
-    const lastVisibleColumn = columns.find(col => col.getBoundingClientRect().right > viewportBounds.right) || columns[columns.length - 1];
-    const lastColumnBounds = lastVisibleColumn.getBoundingClientRect();
-    let distanceToScroll = lastColumnBounds.right - viewportBounds.right;
-    // Don't scroll the whole viewport away if there is a very long column
-    if (distanceToScroll > viewportBounds.width) {
-      distanceToScroll = viewportBounds.width * 0.9;
-    }
-    // Always try to scroll a little bit extra to make sure we aren't caught out by
-    // funny floating-point pixel math behavior.
-    this.tableContainer.scrollLeft += Math.ceil(distanceToScroll);
-    this.updateScrollState();
-  }
-  previousColumn() {
-    const columns = this.tableColumns;
-    const viewportBounds = this.tableContainer.getBoundingClientRect();
-    // The first column who's left side is out of the viewport
-    // or the first element if we can't find one.
-    const firstVisibleColumn = columns
-      .reverse()
-      .find(col => col.getBoundingClientRect().left < viewportBounds.left) ||
-      columns[0];
-    const firstColumnBounds = firstVisibleColumn.getBoundingClientRect();
-    let distanceToScroll = viewportBounds.left - firstColumnBounds.left;
-    // Don't scroll the whole viewport away if there is a very long column
-    if (distanceToScroll > viewportBounds.width) {
-      distanceToScroll = viewportBounds.width * 0.9;
-    }
-    // Always try to scroll a little bit extra to make sure we aren't caught out by
-    // funny floating-point pixel math behavior.
-    this.tableContainer.scrollLeft += -Math.ceil(distanceToScroll);
-    this.updateScrollState();
-  }
-  updateScrollState() {
-    const scrollLeft = this.tableContainer.scrollLeft;
-    const maxScrollLeft = this.tableContainer.scrollWidth - this.tableContainer.clientWidth;
-    this.isScrolledToFirstCell = scrollLeft === 0;
-    this.isScrolledToLastCell =
-      // sometimes this can go less than zero due to the scrollbar constant
-      maxScrollLeft - scrollLeft - this.tableScrollbarConstant <= 0;
-  }
-  checkHorizontalScroll() {
-    const tableWidth = this.slottedTable.getBoundingClientRect().width;
-    const containerWidth = this.root.getBoundingClientRect().width;
-    this.isHorizontalScroll = tableWidth > containerWidth;
-  }
-  checkVerticalScroll() {
-    const tableContainerElement = this.tableContainer;
-    this.isVerticalScroll =
-      tableContainerElement.scrollHeight > tableContainerElement.clientHeight;
-  }
-  get tableScrollbarConstant() {
-    const container = this.tableContainer;
-    return container ? container.offsetWidth - container.clientWidth : 0;
-  }
   /******************************* Resizable Columns *******************************/
   prepareResizableColumns() {
     const styleElement = document.createElement('style');
     styleElement.id = `${this.tableId}-resizable-styles`;
     document.querySelector('head').appendChild(styleElement);
     const columnWidths = this.calculateColumnWidths(this.tableColumns);
-    this.tableWidth = this.getElementComputedWidth(this.slottedTable);
     columnWidths
       // Exclude the last column to allow it to fill the remaining space naturally
       .slice(0, -1)
       .forEach(c => (this.columnsWidths[c.name] = c.width));
     this.setResizableColumnsStyles();
   }
-  /** Scale column pixel widths equal when a resize is observed */
-  scaleColumnWidths() {
-    if (!this.columnResizeState &&
-      this.resizableColumns &&
-      !this.isHorizontalScroll) {
-      const oldColumnWidths = this.calculateColumnWidths(this.tableColumns);
-      const oldTableWidth = this.tableWidth;
-      const newTableWidth = this.getElementComputedWidth(this.slottedTable);
-      oldColumnWidths
-        .map(col => (Object.assign(Object.assign({}, col), { width: this.calcScaledColWidth(col.width, oldTableWidth, newTableWidth) })))
-        // Exclude the last column to allow it to fill the remaining space naturally
-        .slice(0, -1)
-        .forEach(c => (this.columnsWidths[c.name] = c.width));
-      this.tableWidth = newTableWidth;
-      this.setResizableColumnsStyles();
-    }
-  }
-  calcScaledColWidth(colWidth, oldTableWidth, newTableWidth) {
-    const proposedWidth = Math.round((colWidth / oldTableWidth) * newTableWidth);
-    const minWidth = 1;
-    return Math.max(proposedWidth, minWidth);
-  }
   updateResizeState(event) {
     if (this.columnResizeState) {
       const minimumWidth = 1;
@@ -296,7 +210,6 @@ const GuxTable = class {
       });
       this.columnsWidths[columnName] = columnWidths.find(c => c.name === columnName).width;
       this.setResizableColumnsStyles();
-      this.tableWidth = this.getElementComputedWidth(this.slottedTable);
     }
     else {
       this.columnResizeHover = false;
@@ -316,7 +229,7 @@ const GuxTable = class {
         this.columnResizeState = {
           resizableColumn,
           columnResizeMouseStartX: event.pageX,
-          resizableColumnInitialWidth: this.getElementComputedWidth(resizableColumn)
+          resizableColumnInitialWidth: resizableColumn.clientWidth
         };
       }
     });
@@ -330,16 +243,11 @@ const GuxTable = class {
     return (header.getBoundingClientRect().right - event.clientX <
       COL_RESIZE_HANDLE_WIDTH);
   }
-  getElementComputedWidth(element) {
-    return (element.clientWidth -
-      parseInt(window.getComputedStyle(element).paddingLeft) -
-      parseInt(window.getComputedStyle(element).paddingRight));
-  }
   /** Calculates column width minus padding in pixels */
   calculateColumnWidths(columns) {
     return columns.map(c => ({
       name: c.dataset.columnName,
-      width: this.getElementComputedWidth(c)
+      width: c.clientWidth
     }));
   }
   setResizableColumnsStyles() {
@@ -365,10 +273,10 @@ const GuxTable = class {
     };
   }
   render() {
-    return (h(Host, { "gs-table-id": this.tableId, "gs-v-scroll": this.isVerticalScroll, "gs-h-scroll": this.isHorizontalScroll, "gs-obj-table": this.objectTable, "gs-compact": this.compact }, h("div", { class: "gux-table" }, h("div", { tabindex: this.isVerticalScroll ? '0' : '-1', id: this.tableId, class: this.tableContainerClasses }, h("slot", { name: "data" })), this.isHorizontalScroll && (h("gux-button-slot-beta", { accent: "secondary" }, h("button", { class: "gux-table-scroll-left", disabled: this.isScrolledToFirstCell, onClick: !this.isScrolledToFirstCell && this.previousColumn.bind(this) }, h("gux-icon", { "icon-name": "chevron-left", "screenreader-text": this.i18n('scrollLeft') })))), this.isHorizontalScroll && (h("gux-button-slot-beta", { accent: "secondary", style: { marginRight: `${this.tableScrollbarConstant}px` } }, h("button", { class: "gux-table-scroll-right", disabled: this.isScrolledToLastCell, style: { marginRight: `${this.tableScrollbarConstant}px` }, onClick: !this.isScrolledToLastCell && this.nextColumn.bind(this) }, h("gux-icon", { "icon-name": "chevron-right", "screenreader-text": this.i18n('scrollRight') })))), this.isTableEmpty && (h("div", { class: "gux-empty-table" }, this.emptyMessage || this.i18n('emptyMessage'))))));
+    return (h(Host, { "gs-table-id": this.tableId, "gs-obj-table": this.objectTable, "gs-compact": this.compact }, h("div", { class: "gux-table" }, h("div", { tabindex: this.isVerticalScroll ? '0' : '-1', id: this.tableId, class: this.tableContainerClasses }, h("slot", { name: "data" })), this.isTableEmpty && (h("div", { class: "gux-empty-table" }, this.emptyMessage || this.i18n('emptyMessage'))))));
   }
   get root() { return getElement(this); }
 };
 GuxTable.style = guxTableCss;
 
-export { GuxTable as gux_table_beta };
+export { GuxTable as gux_table };

package/dist/esm/gux-tabs-advanced.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-0b66fe2c.js';
-import { t as trackComponent } from './usage-4f6d345a.js';
+import { t as trackComponent } from './usage-09e38ac3.js';
 
 const guxTabsAdvancedCss = "gux-tabs-advanced{-custom-noop:noop}";
 

package/dist/esm/gux-tabs.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-0b66fe2c.js';
-import { t as trackComponent } from './usage-4f6d345a.js';
+import { t as trackComponent } from './usage-09e38ac3.js';
 
-const guxTabsCss = ".gux-tabs.gux-vertical{display:flex;height:100%}";
+const guxTabsCss = ":host(.gux-flex){display:flex;flex-direction:column}:host(.gux-flex) .gux-tabs{display:flex;flex-direction:column;height:100%}:host(.gux-flex) .gux-panel-container{display:flex;flex-direction:column;height:100%}.gux-tabs.gux-vertical{display:flex;height:100%}";
 
 const GuxTabs = class {
   constructor(hostRef) {
@@ -10,6 +10,7 @@ const GuxTabs = class {
     this.activeTab = undefined;
     this.orientation = 'horizontal';
     this.alignment = 'left';
+    this.useFlexbox = false;
     this.tabList = undefined;
     this.tabPanels = [];
   }
@@ -46,7 +47,9 @@ const GuxTabs = class {
     trackComponent(this.root);
   }
   render() {
-    return (h(Host, null, h("div", { class: `gux-tabs gux-${this.alignment} gux-${this.orientation}` }, h("slot", { name: "tab-list" }), h("div", { class: `gux-${this.alignment} gux-${this.orientation}` }, h("slot", { onSlotchange: this.onSlotchange.bind(this) })))));
+    return (h(Host, { class: {
+        'gux-flex': this.useFlexbox
+      } }, h("div", { class: `gux-tabs gux-${this.alignment} gux-${this.orientation}` }, h("slot", { name: "tab-list" }), h("div", { class: `gux-${this.alignment} gux-${this.orientation} gux-panel-container` }, h("slot", { onSlotchange: this.onSlotchange.bind(this) })))));
   }
   get root() { return getElement(this); }
   static get watchers() { return {

package/dist/esm/gux-tag.entry.js

@@ -0,0 +1,76 @@
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-0b66fe2c.js';
+import { b as buildI18nForComponent } from './index-694d55cf.js';
+import { t as trackComponent } from './usage-09e38ac3.js';
+import './get-closest-element-1597503c.js';
+
+const tag = "tag with label: {label}";
+const tagResources = {
+	tag: tag,
+	"tag-disabled": "disabled tag with label: {label}",
+	"remove-tag": "Remove tag with label: {label}"
+};
+
+const guxTagCss = ":host{display:inline-block;border-radius:var(--gse-ui-tag-height)}.gux-tag{display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;justify-content:flex-start;font-family:var(--gse-ui-tag-text-fontFamily);font-weight:var(--gse-ui-tag-text-fontWeight, 600);line-height:var(--gse-ui-tag-text-lineHeight);font-size:var(--gse-ui-tag-text-fontSize);background-color:var(--gse-ui-tag-default-backgroundColor);color:var(--gse-ui-tag-default-foregroundColor);border-radius:var(--gse-ui-tag-height);gap:var(--gse-ui-tag-removable-gap);height:var(--gse-ui-tag-height);padding:var(--gse-ui-tag-padding)}.gux-tag.gux-disabled{position:relative}.gux-tag.gux-disabled::before{position:absolute;bottom:0;top:0;left:0;right:0;opacity:0.5;background-color:#ffffff;border-radius:var(--gse-ui-tag-height);content:\"\"}.gux-tag gux-tooltip-title{white-space:nowrap;cursor:default}.gux-tag gux-tooltip-title ::slotted(gux-icon){font-size:var(--gse-ui-tag-button-size)}.gux-tag .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-tag .gux-tag-remove-button{all:unset;display:flex;align-content:center;align-items:center;justify-content:center}.gux-tag .gux-tag-remove-button:not(:disabled):hover{cursor:pointer}.gux-tag .gux-tag-remove-button .gux-tag-remove-icon{width:var(--gse-ui-tag-button-size);height:var(--gse-ui-tag-button-size);margin-right:-4px}.gux-tag .gux-tag-remove-button:focus-within .gux-tag-remove-icon{outline:2px solid #7b88f7;outline-offset:0;border-radius:4px}.gux-tag.gux-accent-default{background-color:var(--gse-ui-tag-default-backgroundColor);color:var(--gse-ui-tag-default-foregroundColor)}.gux-tag.gux-accent-1{background-color:var(--gse-ui-tag-accent1-backgroundColor);color:var(--gse-ui-tag-accent1-foregroundColor)}.gux-tag.gux-accent-2{background-color:var(--gse-ui-tag-accent2-backgroundColor);color:var(--gse-ui-tag-accent2-foregroundColor)}.gux-tag.gux-accent-3{background-color:var(--gse-ui-tag-accent3-backgroundColor);color:var(--gse-ui-tag-accent3-foregroundColor)}.gux-tag.gux-accent-4{background-color:var(--gse-ui-tag-accent4-backgroundColor);color:var(--gse-ui-tag-accent4-foregroundColor)}.gux-tag.gux-accent-5{background-color:var(--gse-ui-tag-accent5-backgroundColor);color:var(--gse-ui-tag-accent5-foregroundColor)}.gux-tag.gux-accent-6{background-color:var(--gse-ui-tag-accent6-backgroundColor);color:var(--gse-ui-tag-accent6-foregroundColor)}.gux-tag.gux-accent-7{background-color:var(--gse-ui-tag-accent7-backgroundColor);color:var(--gse-ui-tag-accent7-foregroundColor)}.gux-tag.gux-accent-8{background-color:var(--gse-ui-tag-accent8-backgroundColor);color:var(--gse-ui-tag-accent8-foregroundColor)}.gux-tag.gux-accent-9{background-color:var(--gse-ui-tag-accent9-backgroundColor);color:var(--gse-ui-tag-accent9-foregroundColor)}.gux-tag.gux-accent-10{background-color:var(--gse-ui-tag-accent10-backgroundColor);color:var(--gse-ui-tag-accent10-foregroundColor)}.gux-tag.gux-accent-inherit{background-color:inherit;color:inherit}";
+
+const GuxTag = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.guxdelete = createEvent(this, "guxdelete", 7);
+    this.value = undefined;
+    this.accent = 'default';
+    this.disabled = false;
+    this.removable = false;
+    this.label = undefined;
+  }
+  onKeyDown(event) {
+    switch (event.key) {
+      case 'Backspace':
+      case 'Delete':
+        this.removeTag();
+    }
+  }
+  removeTag() {
+    if (this.disabled || !this.removable) {
+      return;
+    }
+    this.guxdelete.emit(this.value);
+  }
+  onSlotChange(event) {
+    const slotAssignedNodes = event.composedPath()[0].assignedNodes();
+    this.label = slotAssignedNodes
+      .map(nodeItem => nodeItem.textContent)
+      .join('');
+  }
+  renderTagTitle() {
+    return (h("gux-tooltip-title", null, h("span", null, h("slot", { "aria-hidden": "true", onSlotchange: this.onSlotChange.bind(this) }))));
+  }
+  renderSrText() {
+    return (h("div", { class: "gux-sr-only" }, this.disabled
+      ? this.i18n('tag-disabled', { label: this.label })
+      : this.i18n('tag', { label: this.label })));
+  }
+  renderRemoveButton() {
+    if (this.removable) {
+      return (h("button", { class: "gux-tag-remove-button", onClick: this.removeTag.bind(this), type: "button", disabled: this.disabled }, h("gux-icon", { class: "gux-tag-remove-icon", "icon-name": "close", "screenreader-text": this.i18n('remove-tag', { label: this.label }) })));
+    }
+  }
+  componentWillLoad() {
+    trackComponent(this.root, {
+      variant: this.removable ? 'removable' : 'permenant'
+    });
+  }
+  async componentWillRender() {
+    this.i18n = await buildI18nForComponent(this.root, tagResources);
+  }
+  render() {
+    return (h("div", { class: {
+        'gux-tag': true,
+        [`gux-accent-${this.accent}`]: true,
+        'gux-disabled': this.disabled
+      }, "aria-disabled": this.disabled.toString() }, this.renderTagTitle(), this.renderSrText(), this.renderRemoveButton()));
+  }
+  get root() { return getElement(this); }
+};
+GuxTag.style = guxTagCss;
+
+export { GuxTag as gux_tag };

package/dist/esm/gux-text-highlight.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, g as getElement } from './index-0b66fe2c.js';
-import { t as trackComponent } from './usage-4f6d345a.js';
+import { t as trackComponent } from './usage-09e38ac3.js';
 
 const conversion = /[ +]/g;
 const expressions = new Map();
@@ -43,7 +43,7 @@ function convertToRegex(word) {
   return new RegExp(newexp + '$', 'i');
 }
 
-const guxTextHighlightCss = "mark{background-color:#ffff00;color:#000000}";
+const guxTextHighlightCss = "mark{background-color:var(--gse-ui-search-match-firstLevel-backgroundColor)}.gux-dimmed mark{background-color:var(--gse-ui-search-match-subsequentLevel-backgroundColor)}";
 
 const GuxTextHighlight = class {
   constructor(hostRef) {
@@ -51,6 +51,7 @@ const GuxTextHighlight = class {
     this.text = undefined;
     this.highlight = undefined;
     this.strategy = 'start';
+    this.dimmed = false;
   }
   componentWillLoad() {
     trackComponent(this.root);
@@ -66,15 +67,15 @@ const GuxTextHighlight = class {
           return this.renderFuzzy();
       }
     }
-    return (h("span", null, this.text));
+    return (h("span", { class: { 'gux-dimmed': this.dimmed } }, this.text));
   }
   renderStartsWith() {
     if (this.text.toLowerCase().startsWith(this.highlight.toLowerCase())) {
       const highlight = this.text.substring(0, this.highlight.length);
       const after = this.text.substring(this.highlight.length);
-      return (h("span", null, h("mark", null, highlight), after));
+      return (h("span", { class: { 'gux-dimmed': this.dimmed } }, h("mark", null, highlight), after));
     }
-    return (h("span", null, this.text));
+    return (h("span", { class: { 'gux-dimmed': this.dimmed } }, this.text));
   }
   renderContains() {
     const html = {
@@ -90,7 +91,7 @@ const GuxTextHighlight = class {
       html.highlighted += before + `<mark>${highlight}</mark>`;
       html.remaining = html.remaining.substring(index + highlight.length);
     }
-    return (h("span", { innerHTML: html.highlighted + html.remaining }));
+    return (h("span", { class: { 'gux-dimmed': this.dimmed }, innerHTML: html.highlighted + html.remaining }));
   }
   renderFuzzy() {
     if (matchesFuzzy(this.highlight, this.text)) {
@@ -104,9 +105,9 @@ const GuxTextHighlight = class {
         highlighted: '',
         remaining: this.text
       });
-      return (h("span", { innerHTML: html.highlighted + html.remaining }));
+      return (h("span", { class: { 'gux-dimmed': this.dimmed }, innerHTML: html.highlighted + html.remaining }));
     }
-    return (h("span", null, this.text));
+    return (h("span", { class: { 'gux-dimmed': this.dimmed } }, this.text));
   }
   get root() { return getElement(this); }
 };

package/dist/esm/gux-time-beta.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-0b66fe2c.js';
-import { t as trackComponent } from './usage-4f6d345a.js';
-import { D as DateTimeFormatter } from './DateTimeFormatter-bb057477.js';
+import { t as trackComponent } from './usage-09e38ac3.js';
+import { D as DateTimeFormatter, g as getValidTimezone } from './get-valid-timezone-4b39f118.js';
 import { g as getDesiredLocale } from './index-694d55cf.js';
 import './get-closest-element-1597503c.js';
 
@@ -9,13 +9,16 @@ const GuxTime = class {
     registerInstance(this, hostRef);
     this.datetime = new Date().toISOString();
     this.format = 'short';
+    this.timeZone = undefined;
   }
   componentWillLoad() {
     trackComponent(this.root);
     this.formatter = new DateTimeFormatter(getDesiredLocale(this.root));
   }
   render() {
-    return (h(Host, null, this.formatter.formatTime(new Date(this.datetime), this.format)));
+    return (h(Host, null, this.formatter.formatTime(new Date(this.datetime), this.format, {
+      timeZone: getValidTimezone(this.timeZone)
+    })));
   }
   get root() { return getElement(this); }
 };

package/dist/esm/{gux-time-picker-beta.entry.js → gux-time-picker.entry.js}

@@ -3,7 +3,7 @@ import { O as OnClickOutside } from './on-click-outside-bc432a79.js';
 import { s as simulateNativeEvent } from './simulate-native-event-ac69961f.js';
 import { b as afterNextRender } from './after-next-render-ed0f7dcd.js';
 import { g as getDesiredLocale, b as buildI18nForComponent } from './index-694d55cf.js';
-import { t as trackComponent } from './usage-4f6d345a.js';
+import { t as trackComponent } from './usage-09e38ac3.js';
 import './get-closest-element-1597503c.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;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)}";
+const guxTimePickerCss = ".gux-time-picker{position:relative;display:inline-block}.gux-time-picker.gux-error .gux-input-time{border-color:var(--gse-ui-formControl-input-error-border-color)}.gux-time-picker .gux-input-time{box-sizing:border-box;display:flex;flex-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-formControl-input-gap);align-content:stretch;align-items:center;justify-content:center;white-space:nowrap;width:100%;height:var(--gse-ui-formControl-input-textfield-height);padding:var(--gse-ui-formControl-input-padding);font-family:var(--gse-ui-formControl-input-contentText-fontFamily);font-size:var(--gse-ui-formControl-input-contentText-fontSize);line-height:var(--gse-ui-formControl-input-contentText-lineHeight);color:var(--gse-ui-formControl-input-populatedColor);background-color:var(--gse-ui-formControl-input-backgroundColor);background-image:none;border:var(--gse-ui-formControl-input-default-border-width) var(--gse-ui-formControl-input-default-border-style) var(--gse-ui-formControl-input-default-border-color);border-radius:var(--gse-ui-formControl-input-borderRadius)}.gux-time-picker .gux-input-time:focus-within{outline:var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);border:var(--gse-ui-formControl-input-active-border-width) var(--gse-ui-formControl-input-active-border-style) var(--gse-ui-formControl-input-active-border-color);border-radius:var(--gse-ui-formControl-focusRing-borderRadius)}.gux-time-picker .gux-input-time input{flex:1 1 auto;align-self:auto;order:0;width:2ch;padding:0;font-size:var(--gse-ui-formControl-label-text-fontSize);background-color:var(--gse-ui-formControl-input-backgroundColor);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:var(--gse-ui-formControl-input-placeholderColor);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-family:var(--gse-ui-formControl-input-prefixSufix-text-fontFamily);font-size:var(--gse-ui-formControl-input-prefixSufix-text-fontSize);line-height:var(--gse-ui-formControl-input-prefixSufix-text-lineHeight);font-weight:var(--gse-ui-formControl-input-prefixSufix-text-fontWeight);color:var(--gse-ui-formControl-input-populatedColor);background:transparent;border:none;outline:none}.gux-time-picker .gux-input-time .gux-input-time-am-pm-selector:focus-visible{outline:var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);border:var(--gse-ui-formControl-input-active-border-width) var(--gse-ui-formControl-input-active-border-style) var(--gse-ui-formControl-input-active-border-color);border-radius:var(--gse-ui-formControl-focusRing-borderRadius)}.gux-time-picker .gux-input-time .gux-input-time-am-pm-selector .gux-meridiem{grid-row:1/1;grid-column:1/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:var(--gse-ui-formControl-input-inputIcon-iconEndColor);background:transparent;border:none}.gux-time-picker .gux-input-time .gux-clock-button.gux-active:not(:disabled){color:#4856cb;cursor:pointer}.gux-time-picker .gux-input-time .gux-clock-button:focus{outline:none}.gux-time-picker .gux-input-time .gux-clock-button:focus-visible{outline:var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);border:var(--gse-ui-formControl-input-active-border-width) var(--gse-ui-formControl-input-active-border-style) var(--gse-ui-formControl-input-active-border-color);border-radius:var(--gse-ui-formControl-focusRing-borderRadius)}.gux-time-picker .gux-input-time .gux-clock-button gux-icon{width:var(--gse-ui-icon-size-sm);height:var(--gse-ui-icon-size-sm)}.gux-time-picker .gux-time-separator{padding:0 1ch}.gux-time-picker .gux-list-container{max-height:150px;padding:var(--gse-ui-menu-padding);margin:0;overflow-y:scroll;list-style:none;border:var(--gse-ui-menu-border-width) var(--gse-ui-menu-border-style) var(--gse-ui-menu-border-color);background-color:var(--gse-ui-menu-backgroundColor);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);border-radius:var(--gse-ui-menu-borderRadius)}";
 
 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;
@@ -178,7 +178,7 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
         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 GuxTimePickerBeta = class {
+const GuxTimePicker = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.value = '00:00';
@@ -382,7 +382,7 @@ const GuxTimePickerBeta = class {
 };
 __decorate([
   OnClickOutside({ triggerEvents: 'mousedown' })
-], GuxTimePickerBeta.prototype, "onClickOutside", null);
-GuxTimePickerBeta.style = guxTimePickerCss;
+], GuxTimePicker.prototype, "onClickOutside", null);
+GuxTimePicker.style = guxTimePickerCss;
 
-export { GuxTimePickerBeta as gux_time_picker_beta };
+export { GuxTimePicker as gux_time_picker };