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

package/dist/cjs/gux-table-toolbar.cjs.entry.js

@@ -0,0 +1,214 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-75c9f0d9.js');
+const onResize = require('./on-resize-a136fc7f.js');
+const onMutation = require('./on-mutation-ec5d23bd.js');
+const usage = require('./usage-bfcc4d96.js');
+const getSlot = require('./get-slot-395a67ef.js');
+
+/**
+ * Below is the minimum spacing in px that is required between,
+ * the controls aligned to the left and controls aligned to the right.
+ */
+const MIN_CONTROL_SPACING = 72;
+
+function setAccent(actions, accent) {
+  [].concat(actions).forEach(action => {
+    if (action != null) {
+      action.accent = accent;
+    }
+  });
+}
+function setActionsIconOnlyProp(iconOnly, ...actionSets) {
+  actionSets
+    .flat()
+    .filter(action => action !== null && !action.hasAttribute('icon-only'))
+    .forEach(action => (action.iconOnly = iconOnly));
+}
+
+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;
+  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 GuxTableToolbar = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.minimumSizes = {
+      full: 0,
+      iconOnly: 0,
+      condensed: 0
+    };
+    this.displayedLayout = 'full';
+    this.hasContextDivider = false;
+  }
+  onMutation() {
+    this.hasContextDivider = this.needsContextDivider();
+    index.forceUpdate(this.root);
+  }
+  /**
+   * Record the minimum size for the current layout.
+   */
+  recordLayoutMinSize() {
+    index.readTask(() => {
+      var _a, _b;
+      const filterWidth = ((_a = this.filterSlot) === null || _a === void 0 ? void 0 : _a.clientWidth) | 0;
+      const controlWidth = ((_b = this.actionsContainer) === null || _b === void 0 ? void 0 : _b.clientWidth) | 0;
+      const minSize = filterWidth + controlWidth + MIN_CONTROL_SPACING;
+      this.minimumSizes[this.displayedLayout] = minSize;
+    });
+  }
+  get actionsContainer() {
+    return this.root.shadowRoot.querySelector('.gux-contextual-permanent-primary');
+  }
+  get filterSlot() {
+    return getSlot.getSlot(this.root, 'search-and-filter');
+  }
+  get menuActionSlot() {
+    return getSlot.getSlot(this.root, 'menu-actions');
+  }
+  get permanentSlot() {
+    return getSlot.getSlot(this.root, 'permanent-actions');
+  }
+  get contextualSlot() {
+    return getSlot.getSlot(this.root, 'contextual-actions');
+  }
+  get primaryAction() {
+    var _a;
+    return (_a = this.root) === null || _a === void 0 ? void 0 : _a.querySelector('gux-table-toolbar-custom-action[slot]');
+  }
+  get permanentActions() {
+    var _a, _b;
+    if ((_a = this.permanentSlot) === null || _a === void 0 ? void 0 : _a.hasChildNodes) {
+      return Array.from((_b = this.permanentSlot) === null || _b === void 0 ? void 0 : _b.querySelectorAll('gux-table-toolbar-action, gux-table-toolbar-custom-action'));
+    }
+  }
+  get menuActionsItems() {
+    var _a, _b;
+    if ((_a = this.menuActionSlot) === null || _a === void 0 ? void 0 : _a.hasChildNodes) {
+      return Array.from((_b = this.menuActionSlot) === null || _b === void 0 ? void 0 : _b.querySelectorAll('gux-table-toolbar-action, gux-table-toolbar-custom-action'));
+    }
+  }
+  get contextualActions() {
+    var _a, _b;
+    if ((_a = this.contextualSlot) === null || _a === void 0 ? void 0 : _a.hasChildNodes) {
+      return Array.from((_b = this.contextualSlot) === null || _b === void 0 ? void 0 : _b.querySelectorAll('gux-table-toolbar-action, gux-table-toolbar-custom-action'));
+    }
+  }
+  get filterActions() {
+    var _a, _b;
+    if ((_a = this.filterSlot) === null || _a === void 0 ? void 0 : _a.hasChildNodes) {
+      return Array.from((_b = this.filterSlot) === null || _b === void 0 ? void 0 : _b.querySelectorAll('gux-table-toolbar-action, gux-table-toolbar-custom-action'));
+    }
+  }
+  get allFilterContextual() {
+    var _a;
+    return (_a = this.filterActions) === null || _a === void 0 ? void 0 : _a.concat(this.contextualActions);
+  }
+  needsContextDivider() {
+    var _a;
+    return (((_a = this.contextualActions) === null || _a === void 0 ? void 0 : _a.length) &&
+      this.contextualSlot !== this.root.lastElementChild);
+  }
+  renderMenu() {
+    var _a;
+    return Boolean(((_a = this.menuActionsItems) === null || _a === void 0 ? void 0 : _a.length) || this.displayedLayout == 'condensed');
+  }
+  renderFullLayout() {
+    this.displayedLayout = 'full';
+    setActionsIconOnlyProp(false, this.primaryAction, ...this.allFilterContextual, ...this.permanentActions);
+  }
+  renderIconOnlyLayoutScaleDown(controlWidth) {
+    this.displayedLayout = 'iconOnly';
+    setActionsIconOnlyProp(true, this.primaryAction, ...this.allFilterContextual, ...this.permanentActions);
+    //Save the width of the iconOnly section so when resizing backup we have a reference point.
+    this.iconOnlySectionWidth = controlWidth;
+  }
+  renderIconOnlyLayoutScaleUp() {
+    var _a, _b;
+    this.displayedLayout = 'iconOnly';
+    setAccent(this.permanentActions, 'secondary');
+    setAccent(this.primaryAction, 'primary');
+    setActionsIconOnlyProp(true, this.primaryAction, ...this.allFilterContextual, ...this.permanentActions);
+    this.permanentActions && ((_a = this.root) === null || _a === void 0 ? void 0 : _a.appendChild(this.permanentSlot));
+    this.primaryAction && ((_b = this.root) === null || _b === void 0 ? void 0 : _b.appendChild(this.primaryAction));
+  }
+  renderCondensedLayout() {
+    var _a, _b;
+    this.displayedLayout = 'condensed';
+    this.permanentActions &&
+      ((_a = this.menuActionSlot) === null || _a === void 0 ? void 0 : _a.appendChild(this.permanentSlot));
+    this.primaryAction && ((_b = this.menuActionSlot) === null || _b === void 0 ? void 0 : _b.appendChild(this.primaryAction));
+    setActionsIconOnlyProp(true, ...this.allFilterContextual);
+    setActionsIconOnlyProp(false, ...this.permanentActions);
+    setActionsIconOnlyProp(false, this.primaryAction);
+    setAccent(this.menuActionsItems, 'ghost');
+  }
+  componentWillLoad() {
+    usage.trackComponent(this.root);
+    this.hasContextDivider = this.needsContextDivider();
+  }
+  componentDidLoad() {
+    this.recordLayoutMinSize();
+    this.checkResponsiveLayout();
+    setAccent(this.menuActionsItems, 'ghost');
+  }
+  /**
+   * When the layout changes, also check one more time to see if further layout
+   * changes are needed. This is mostly important at component start when we
+   * may need to step down twice, full -> icon and icon -> condensed
+   */
+  componentDidUpdate() {
+    this.recordLayoutMinSize();
+    this.checkResponsiveLayout();
+  }
+  checkResponsiveLayout() {
+    index.readTask(() => {
+      var _a;
+      const controlWidth = ((_a = this.actionsContainer) === null || _a === void 0 ? void 0 : _a.clientWidth) | 0;
+      const toolbarWidth = this.root.clientWidth;
+      if (toolbarWidth <= this.minimumSizes.full &&
+        toolbarWidth >= this.minimumSizes.iconOnly) {
+        if (this.displayedLayout == 'full') {
+          this.renderIconOnlyLayoutScaleDown(controlWidth);
+        }
+        else if (this.displayedLayout == 'condensed') {
+          this.renderIconOnlyLayoutScaleUp();
+        }
+      }
+      else if (toolbarWidth <= this.minimumSizes.iconOnly) {
+        this.renderCondensedLayout();
+      }
+      else if (this.minimumSizes.iconOnly > this.minimumSizes.full) {
+        this.renderIconOnlyLayoutScaleUp();
+      }
+      else {
+        this.renderFullLayout();
+      }
+    });
+  }
+  render() {
+    return (index.h(index.Host, { role: "toolbar", "aria-orientation": "horizontal" }, index.h("div", { class: "search-filter-container" }, index.h("slot", { name: "search-and-filter" })), index.h("div", { class: "section-spacing" }), index.h("div", { class: "gux-contextual-permanent-primary" }, index.h("div", { class: {
+        'gux-contextual-wrapper': this.hasContextDivider
+      } }, index.h("slot", { name: "contextual-actions" })), index.h("div", { class: "gux-permanent-menu-primary-wrapper" }, index.h("slot", { name: "permanent-actions" }), index.h("gux-table-toolbar-menu-button", { "show-menu": this.renderMenu() }, index.h("slot", { name: "menu-actions" })), index.h("slot", { name: "primary-action" })))));
+  }
+  get root() { return index.getElement(this); }
+};
+__decorate([
+  onMutation.OnMutation({ childList: true, subtree: true })
+], GuxTableToolbar.prototype, "onMutation", null);
+__decorate([
+  onResize.OnResize()
+], GuxTableToolbar.prototype, "checkResponsiveLayout", null);
+GuxTableToolbar.style = guxTableToolbarCss;
+
+exports.gux_table_toolbar = GuxTableToolbar;

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

@@ -0,0 +1,286 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-75c9f0d9.js');
+const index$1 = require('./index-dee802be.js');
+const whenEventIsFrom = require('./when-event-is-from-20e89254.js');
+const randomHtmlId = require('./random-html-id-32ef8847.js');
+const usage = require('./usage-bfcc4d96.js');
+const en = require('./en-807a354e.js');
+require('./get-closest-element-26894e5a.js');
+
+const guxTableCss = ":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-typography-heading-lg-fontFamily), var(--gse-core-fontFamily-heading), sans-serif;font-size:var(--gse-core-typography-heading-lg-fontSize);line-height:var(--gse-core-typography-heading-lg-lineHeight);font-weight:var(--gse-core-fontWeight-bold)}";
+
+const COL_RESIZE_HANDLE_WIDTH = 3;
+const GuxTable = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.guxselectionchanged = index.createEvent(this, "guxselectionchanged", 7);
+    this.guxsortchanged = index.createEvent(this, "guxsortchanged", 7);
+    this.slotObserver = new MutationObserver(() => index.forceUpdate(this));
+    this.tableId = randomHtmlId.randomHTMLId('gux-table');
+    this.columnsWidths = {};
+    this.isVerticalScroll = false;
+    this.columnResizeHover = false;
+    this.compact = false;
+    this.objectTable = false;
+    this.emptyMessage = undefined;
+    this.resizableColumns = undefined;
+  }
+  /******************************* Lifecycle Hooks *******************************/
+  async componentWillLoad() {
+    usage.trackComponent(this.root);
+    this.i18n = await index$1.buildI18nForComponent(this.root, en.tableResources);
+  }
+  componentDidLoad() {
+    if (this.resizableColumns) {
+      this.prepareResizableColumns();
+    }
+    this.prepareSelectableRows();
+    this.checkVerticalScroll();
+    if (!this.resizeObserver && window.ResizeObserver) {
+      this.resizeObserver = new ResizeObserver(() => {
+        index.readTask(() => {
+          this.checkVerticalScroll();
+        });
+      });
+    }
+    if (this.resizeObserver) {
+      this.resizeObserver.observe(this.tableContainer);
+      this.resizeObserver.observe(this.slottedTable);
+    }
+    this.slotObserver.observe(this.slottedTable, {
+      subtree: true,
+      childList: true
+    });
+  }
+  checkVerticalScroll() {
+    const tableContainerElement = this.tableContainer;
+    this.isVerticalScroll =
+      tableContainerElement.scrollHeight > tableContainerElement.clientHeight;
+  }
+  disconnectedCallback() {
+    if (this.resizeObserver) {
+      this.resizeObserver.unobserve(this.tableContainer);
+      this.resizeObserver.unobserve(this.slottedTable);
+    }
+    if (this.resizableColumns) {
+      document.getElementById(`${this.tableId}-resizable-styles`).remove();
+    }
+  }
+  /******************************* Event Listeners *******************************/
+  onInternalAllRowSelectChange(event) {
+    event.stopPropagation();
+    this.handleSelectAllRows(event.detail);
+  }
+  onInternalRowSelectChange(event) {
+    event.stopPropagation();
+    const rowCheckbox = event.target;
+    rowCheckbox.selected = event.detail;
+    this.handleRowSelection(rowCheckbox);
+  }
+  onMouseMove(event) {
+    if (this.resizableColumns) {
+      this.updateResizeState(event);
+    }
+  }
+  onMouseDown(event) {
+    if (this.resizableColumns) {
+      this.maybeStartResizing(event);
+    }
+  }
+  onMouseUp() {
+    if (this.resizableColumns) {
+      this.stopResizing();
+    }
+  }
+  /******************************* Element Getters *******************************/
+  // Add new query selectors here with meaningful names
+  get tableContainer() {
+    return this.root.shadowRoot.querySelector('.gux-table-container');
+  }
+  get slottedTable() {
+    return this.root.querySelector('table[slot="data"]');
+  }
+  get tableRows() {
+    return Array.from(this.slottedTable.querySelectorAll('tbody tr'));
+  }
+  get tableColumns() {
+    return Array.from(this.slottedTable.querySelectorAll('thead th'));
+  }
+  get rowCheckboxes() {
+    return Array.from(this.slottedTable.querySelectorAll('tbody tr td gux-row-select'));
+  }
+  get selectAllCheckbox() {
+    return this.slottedTable.querySelector('thead tr th gux-all-row-select');
+  }
+  /******************************* Row Selection *******************************/
+  /**
+   * Returns the selected rows Ids.
+   */
+  // eslint-disable-next-line @typescript-eslint/require-await
+  async getSelected() {
+    return this.getSelectedInternal();
+  }
+  // Internal synchronous method for getting currently selected rows
+  // The public method is forced to be async by Stencil's lazy-loading.
+  getSelectedInternal() {
+    const rowCheckboxes = Array.from(this.rowCheckboxes);
+    const selectedRowIds = rowCheckboxes
+      .filter(box => box.selected)
+      .map(box => box.closest('tr').getAttribute('data-row-id'));
+    return { selectedRowIds };
+  }
+  // Set up initial selectable row states
+  prepareSelectableRows() {
+    const rowCheckboxes = this.rowCheckboxes;
+    rowCheckboxes.forEach(rowCheckbox => {
+      this.updateRowSelection(rowCheckbox);
+    });
+    this.updateSelectAllBoxState();
+  }
+  // Update the checked/indeterminate state of the select all checkbox
+  updateSelectAllBoxState() {
+    const selectAllCheckbox = this.selectAllCheckbox;
+    if (selectAllCheckbox) {
+      const rowCheckboxes = this.rowCheckboxes;
+      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;
+      const noneSelected = selectedRows.length === 0;
+      selectAllCheckbox.selected = hasRows && allSelected;
+      void selectAllCheckbox.setIndeterminate(hasRows && !allSelected && !noneSelected);
+    }
+  }
+  // Handle a change in state of the select all checkbox
+  handleSelectAllRows(selected) {
+    const selectAllCheckbox = this.selectAllCheckbox;
+    const rowCheckboxes = this.rowCheckboxes;
+    rowCheckboxes.forEach(rowBox => {
+      selectAllCheckbox.selected = selected;
+      if (!rowBox.hasAttribute('disabled')) {
+        rowBox.selected = selected;
+        this.updateRowSelection(rowBox);
+      }
+    });
+    this.emitSelectionEvent();
+  }
+  // Handle a change in state of an individual row selection checkbox
+  handleRowSelection(rowCheckbox) {
+    this.updateRowSelection(rowCheckbox);
+    this.updateSelectAllBoxState();
+    this.emitSelectionEvent();
+  }
+  emitSelectionEvent() {
+    this.guxselectionchanged.emit(this.getSelectedInternal());
+  }
+  // Make sure a selected row is tagged/displayed correctly at the row level
+  updateRowSelection(dataRowSelectbox) {
+    const tableRow = dataRowSelectbox.closest('tr');
+    if (dataRowSelectbox.selected) {
+      tableRow.setAttribute('data-selected-row', '');
+    }
+    else {
+      tableRow.removeAttribute('data-selected-row');
+    }
+  }
+  /******************************* 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);
+    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();
+  }
+  updateResizeState(event) {
+    if (this.columnResizeState) {
+      const minimumWidth = 1;
+      const columnName = this.columnResizeState.resizableColumn.dataset.columnName;
+      const delta = event.pageX - this.columnResizeState.columnResizeMouseStartX;
+      const initialWidth = this.columnResizeState.resizableColumnInitialWidth;
+      const proposedWidth = initialWidth + delta;
+      const columnWidth = Math.max(proposedWidth, minimumWidth);
+      const columnWidths = this.calculateColumnWidths(this.tableColumns).map(c => {
+        if (c.name === columnName) {
+          return Object.assign(Object.assign({}, c), { width: columnWidth });
+        }
+        return c;
+      });
+      this.columnsWidths[columnName] = columnWidths.find(c => c.name === columnName).width;
+      this.setResizableColumnsStyles();
+    }
+    else {
+      this.columnResizeHover = false;
+      whenEventIsFrom.whenEventIsFrom('th', event, (th) => {
+        const columnsLength = this.tableColumns.length;
+        const isLastColumn = columnsLength - 1 === th.cellIndex;
+        if (!isLastColumn && this.isInResizeZone(event, th)) {
+          this.columnResizeHover = true;
+        }
+      });
+    }
+  }
+  maybeStartResizing(event) {
+    whenEventIsFrom.whenEventIsFrom('th', event, th => {
+      if (this.isInResizeZone(event, th)) {
+        const resizableColumn = th;
+        this.columnResizeState = {
+          resizableColumn,
+          columnResizeMouseStartX: event.pageX,
+          resizableColumnInitialWidth: resizableColumn.clientWidth
+        };
+      }
+    });
+  }
+  stopResizing() {
+    if (this.columnResizeState) {
+      this.columnResizeState = null;
+    }
+  }
+  isInResizeZone(event, header) {
+    return (header.getBoundingClientRect().right - event.clientX <
+      COL_RESIZE_HANDLE_WIDTH);
+  }
+  /** Calculates column width minus padding in pixels */
+  calculateColumnWidths(columns) {
+    return columns.map(c => ({
+      name: c.dataset.columnName,
+      width: c.clientWidth
+    }));
+  }
+  setResizableColumnsStyles() {
+    const styleElement = document.getElementById(`${this.tableId}-resizable-styles`);
+    let columnsStyles = '';
+    Object.keys(this.columnsWidths).forEach((column) => {
+      columnsStyles += `[gs-table-id=${this.tableId}] th[data-column-name="${column}"]{
+        width:${String(this.columnsWidths[column])}px;
+        min-width:${String(this.columnsWidths[column])}px;
+      }`;
+    });
+    styleElement.innerHTML = columnsStyles;
+  }
+  /******************************* Rendering *******************************/
+  get isTableEmpty() {
+    return !this.root.children[0] || this.tableRows.length < 1;
+  }
+  get tableContainerClasses() {
+    return {
+      'gux-table-container': true,
+      'gux-column-resizing': Boolean(this.columnResizeState),
+      'gux-column-resizing-hover': this.columnResizeHover
+    };
+  }
+  render() {
+    return (index.h(index.Host, { "gs-table-id": this.tableId, "gs-obj-table": this.objectTable, "gs-compact": this.compact }, index.h("div", { class: "gux-table" }, index.h("div", { tabindex: this.isVerticalScroll ? '0' : '-1', id: this.tableId, class: this.tableContainerClasses }, index.h("slot", { name: "data" })), this.isTableEmpty && (index.h("div", { class: "gux-empty-table" }, this.emptyMessage || this.i18n('emptyMessage'))))));
+  }
+  get root() { return index.getElement(this); }
+};
+GuxTable.style = guxTableCss;
+
+exports.gux_table = GuxTable;

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

@@ -2,10 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0d0fdb85.js');
-const usage = require('./usage-24342df6.js');
-
-const guxTabsAdvancedCss = "gux-tabs-advanced{-custom-noop:noop}";
+const index = require('./index-75c9f0d9.js');
+const usage = require('./usage-bfcc4d96.js');
 
 const GuxTabsAdvanced = class {
   constructor(hostRef) {
@@ -51,13 +49,12 @@ const GuxTabsAdvanced = class {
     usage.trackComponent(this.root);
   }
   render() {
-    return (index.h(index.Host, null, index.h("div", { class: "gux-tabs" }, index.h("slot", { name: "tab-list" }), index.h("div", null, index.h("slot", { onSlotchange: this.onSlotchange.bind(this) })))));
+    return (index.h(index.Host, null, index.h("slot", { name: "tab-list" }), index.h("slot", { onSlotchange: this.onSlotchange.bind(this) })));
   }
   get root() { return index.getElement(this); }
   static get watchers() { return {
     "activeTab": ["watchActiveTab"]
   }; }
 };
-GuxTabsAdvanced.style = guxTabsAdvancedCss;
 
 exports.gux_tabs_advanced = GuxTabsAdvanced;

package/dist/cjs/gux-tabs.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 guxTabsCss = ".gux-tabs.gux-vertical{display:flex;height:100%}";
+const guxTabsCss = ":host{display:flex;flex-direction:column}:host .gux-tabs{display:flex;height:100%}:host .gux-tabs:not(.gux-vertical){flex-direction:column}:host .gux-panel-container{display:flex;flex-direction:column;height:100%;min-height:0}";
 
 const GuxTabs = class {
   constructor(hostRef) {
@@ -50,7 +50,7 @@ const GuxTabs = class {
     usage.trackComponent(this.root);
   }
   render() {
-    return (index.h(index.Host, null, index.h("div", { class: `gux-tabs gux-${this.alignment} gux-${this.orientation}` }, index.h("slot", { name: "tab-list" }), index.h("div", { class: `gux-${this.alignment} gux-${this.orientation}` }, index.h("slot", { onSlotchange: this.onSlotchange.bind(this) })))));
+    return (index.h(index.Host, null, index.h("div", { class: `gux-tabs gux-${this.alignment} gux-${this.orientation}` }, index.h("slot", { name: "tab-list" }), index.h("div", { class: `gux-${this.alignment} gux-${this.orientation} gux-panel-container` }, index.h("slot", { onSlotchange: this.onSlotchange.bind(this) })))));
   }
   get root() { return index.getElement(this); }
   static get watchers() { return {

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

@@ -0,0 +1,79 @@
+'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 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-borderRadius)}.gux-tag{display:flex;flex-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-tag-removable-gap);place-content:stretch flex-start;align-items:center;height:var(--gse-ui-tag-height);padding:var(--gse-ui-tag-padding);font-family:var(--gse-ui-tag-text-fontFamily);font-size:var(--gse-ui-tag-text-fontSize);font-weight:var(--gse-ui-tag-text-fontWeight, 600);line-height:var(--gse-ui-tag-text-lineHeight);color:var(--gse-ui-tag-default-foregroundColor);background-color:var(--gse-ui-tag-default-backgroundColor);border-radius:var(--gse-ui-tag-borderRadius)}.gux-tag.gux-disabled{position:relative}.gux-tag.gux-disabled::before{position:absolute;inset:0;content:\"\";background-color:#fff;border-radius:var(--gse-ui-tag-borderRadius);opacity:var(--gse-ui-tag-disabled-opacity)}.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;place-content:center center;align-items: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{border-radius:var(--gse-semantic-focusRing-cornerRadius);outline:var(--gse-semantic-focusRing-small-border-width) solid var(--gse-semantic-color-focus)}.gux-tag.gux-accent-default{color:var(--gse-ui-tag-default-foregroundColor);background-color:var(--gse-ui-tag-default-backgroundColor)}.gux-tag.gux-accent-1{color:var(--gse-ui-tag-accent1-foregroundColor);background-color:var(--gse-ui-tag-accent1-backgroundColor)}.gux-tag.gux-accent-2{color:var(--gse-ui-tag-accent2-foregroundColor);background-color:var(--gse-ui-tag-accent2-backgroundColor)}.gux-tag.gux-accent-3{color:var(--gse-ui-tag-accent3-foregroundColor);background-color:var(--gse-ui-tag-accent3-backgroundColor)}.gux-tag.gux-accent-4{color:var(--gse-ui-tag-accent4-foregroundColor);background-color:var(--gse-ui-tag-accent4-backgroundColor)}.gux-tag.gux-accent-5{color:var(--gse-ui-tag-accent5-foregroundColor);background-color:var(--gse-ui-tag-accent5-backgroundColor)}.gux-tag.gux-accent-6{color:var(--gse-ui-tag-accent6-foregroundColor);background-color:var(--gse-ui-tag-accent6-backgroundColor)}.gux-tag.gux-accent-7{color:var(--gse-ui-tag-accent7-foregroundColor);background-color:var(--gse-ui-tag-accent7-backgroundColor)}.gux-tag.gux-accent-8{color:var(--gse-ui-tag-accent8-foregroundColor);background-color:var(--gse-ui-tag-accent8-backgroundColor)}.gux-tag.gux-accent-9{color:var(--gse-ui-tag-accent9-foregroundColor);background-color:var(--gse-ui-tag-accent9-backgroundColor)}.gux-tag.gux-accent-10{color:var(--gse-ui-tag-accent10-foregroundColor);background-color:var(--gse-ui-tag-accent10-backgroundColor)}.gux-tag.gux-accent-inherit{color:inherit;background-color:inherit}";
+
+const GuxTag = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.guxdelete = index.createEvent(this, "guxdelete", 7);
+    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();
+  }
+  onSlotChange(event) {
+    const slotAssignedNodes = event.composedPath()[0].assignedNodes();
+    this.label = slotAssignedNodes
+      .map(nodeItem => nodeItem.textContent)
+      .join('');
+  }
+  renderTagTitle() {
+    return (index.h("gux-tooltip-title", null, index.h("span", null, index.h("slot", { "aria-hidden": "true", onSlotchange: this.onSlotChange.bind(this) }))));
+  }
+  renderSrText() {
+    return (index.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 (index.h("button", { class: "gux-tag-remove-button", onClick: this.removeTag.bind(this), type: "button", disabled: this.disabled }, index.h("gux-icon", { class: "gux-tag-remove-icon", "icon-name": "close", "screenreader-text": this.i18n('remove-tag', { label: this.label }) })));
+    }
+  }
+  componentWillLoad() {
+    usage.trackComponent(this.root, {
+      variant: this.removable ? 'removable' : 'permenant'
+    });
+  }
+  async componentWillRender() {
+    this.i18n = await index$1.buildI18nForComponent(this.root, tagResources);
+  }
+  render() {
+    return (index.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 index.getElement(this); }
+};
+GuxTag.style = guxTagCss;
+
+exports.gux_tag = GuxTag;