@esri/calcite-components 5.2.0-next.32 → 5.2.0-next.33

package/dist/components/calcite-action-bar/customElement.js

@@ -43,6 +43,9 @@ const getOverflowCount = ({
 };
 const CSS = {
   container: "container",
+  hasActionGroups: "has-action-groups",
+  lineOverlay: "line-overlay",
+  line: "line",
   actionGroupEnd: "action-group--end",
   actionGroupStart: "action-group--start"
 };
@@ -60,6 +63,18 @@ const queryActions = (items) => items.flatMap((item) => {
   }
   return item;
 }).filter((action) => !!action);
+const getWrapItemCrossOffset = ({
+  item,
+  containerRect,
+  horizontal,
+  rtl
+}) => {
+  const rect = item.getBoundingClientRect();
+  if (horizontal) {
+    return rect.top - containerRect.top;
+  }
+  return rtl ? containerRect.right - rect.right : rect.left - containerRect.left;
+};
 const overflowActions = ({
   actionGroups,
   expanded,
@@ -92,7 +107,7 @@ const overflowActions = ({
     group.manager.component.requestUpdate();
   });
 };
-const styles = css`:host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host([scale=s]){--calcite-internal-action-bar-gap: var(--calcite-action-bar-items-space, var(--calcite-spacing-xxs));--calcite-internal-action-bar-padding: var(--calcite-spacing-xxs)}:host([scale=m]){--calcite-internal-action-bar-gap: var(--calcite-action-bar-items-space, var(--calcite-spacing-sm));--calcite-internal-action-bar-padding: var(--calcite-spacing-sm)}:host([scale=l]){--calcite-internal-action-bar-gap: var(--calcite-action-bar-items-space, var(--calcite-space-sm-plus));--calcite-internal-action-bar-padding: var(--calcite-spacing-sm-plus)}:host{display:inline-flex;align-self:stretch;background:transparent;--calcite-internal-action-group-dividing-border-margin: calc(var(--calcite-spacing-base) + 1px)}.container{display:inline-flex;flex:1 1 auto;flex-direction:column;background-color:var(--calcite-action-bar-background-color, var(--calcite-color-foreground-1));gap:var(--calcite-internal-action-bar-gap);padding:var(--calcite-internal-action-bar-padding)}@keyframes in{0%{opacity:0}to{opacity:1}}:host([floating]) .container{animation:in var(--calcite-internal-animation-timing-slow) ease-in-out;overflow:hidden;border-radius:var(--calcite-action-bar-corner-radius, var(--calcite-corner-radius-round));box-shadow:var(--calcite-action-bar-shadow, var(--calcite-shadow-md))}:host([layout=vertical]){flex-direction:column}:host([layout=vertical]):host([overflow-actions-disabled]) .container{overflow-y:auto}:host([layout=vertical]):host([expanded]) .container{max-inline-size:var(--calcite-action-bar-expanded-max-width, auto)}:host([layout=vertical]) .action-group--end{margin-block-start:auto}:host([layout=vertical]) ::slotted(calcite-action-group:not(:last-of-type)){border-block-end-width:var(--calcite-border-width-sm);border-image:linear-gradient(to right,transparent var(--calcite-internal-action-group-dividing-border-margin),var(--calcite-action-group-border-color, var(--calcite-color-border-3)) var(--calcite-internal-action-group-dividing-border-margin),var(--calcite-action-group-border-color, var(--calcite-color-border-3)) calc(100% - var(--calcite-internal-action-group-dividing-border-margin)),transparent var(--calcite-internal-action-group-dividing-border-margin));border-image-slice:1;padding-block-end:var(--calcite-internal-action-bar-padding)}:host([layout=horizontal]){flex-direction:row}:host([layout=horizontal]) .container{flex-direction:row}:host([layout=horizontal]):host([overflow-actions-disabled]) .container{overflow-x:auto}:host([layout=horizontal]) .action-group--end{margin-inline-start:auto}:host([layout=horizontal]) ::slotted(calcite-action-group:not(:last-of-type)){border-image:linear-gradient(transparent var(--calcite-internal-action-group-dividing-border-margin),var(--calcite-action-group-border-color, var(--calcite-color-border-3)) var(--calcite-internal-action-group-dividing-border-margin),var(--calcite-action-group-border-color, var(--calcite-color-border-3)) calc(100% - var(--calcite-internal-action-group-dividing-border-margin)),transparent var(--calcite-internal-action-group-dividing-border-margin));border-image-slice:1;border-inline-end-width:var(--calcite-border-width-sm);padding-inline-end:var(--calcite-internal-action-bar-padding)}.action-group--end{justify-content:flex-end}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`:host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host([scale=s]){--calcite-internal-action-bar-gap: var(--calcite-action-bar-items-space, var(--calcite-spacing-xxs));--calcite-internal-action-bar-padding: var(--calcite-spacing-xxs)}:host([scale=m]){--calcite-internal-action-bar-gap: var(--calcite-action-bar-items-space, var(--calcite-spacing-sm));--calcite-internal-action-bar-padding: var(--calcite-spacing-sm)}:host([scale=l]){--calcite-internal-action-bar-gap: var(--calcite-action-bar-items-space, var(--calcite-space-sm-plus));--calcite-internal-action-bar-padding: var(--calcite-spacing-sm-plus)}:host{display:inline-flex;align-self:stretch;background:transparent;--calcite-internal-action-group-dividing-border-margin: calc(var(--calcite-spacing-base) + 1px)}.container{display:inline-flex;flex:1 1 auto;flex-direction:column;background-color:var(--calcite-action-bar-background-color, var(--calcite-color-foreground-1));gap:var(--calcite-internal-action-bar-gap);padding:var(--calcite-internal-action-bar-padding)}@keyframes in{0%{opacity:0}to{opacity:1}}:host([floating]) .container{animation:in var(--calcite-internal-animation-timing-slow) ease-in-out;overflow:hidden;border-radius:var(--calcite-action-bar-corner-radius, var(--calcite-corner-radius-round));box-shadow:var(--calcite-action-bar-shadow, var(--calcite-shadow-md))}:host([layout=vertical]){flex-direction:column}:host([layout=vertical]):host([overflow-actions-disabled]) .container{overflow-y:auto}:host([layout=vertical]):host([expanded]) .container{max-inline-size:var(--calcite-action-bar-expanded-max-width, auto)}:host([layout=vertical]) .action-group--end{margin-block-start:auto}:host([layout=vertical]) ::slotted(calcite-action-group:not(:last-of-type)){border-block-end-width:var(--calcite-border-width-sm);border-image:linear-gradient(to right,transparent var(--calcite-internal-action-group-dividing-border-margin),var(--calcite-action-group-border-color, var(--calcite-color-border-3)) var(--calcite-internal-action-group-dividing-border-margin),var(--calcite-action-group-border-color, var(--calcite-color-border-3)) calc(100% - var(--calcite-internal-action-group-dividing-border-margin)),transparent var(--calcite-internal-action-group-dividing-border-margin));border-image-slice:1;padding-block-end:var(--calcite-internal-action-bar-padding)}:host([layout=horizontal]){flex-direction:row}:host([layout=horizontal]) .container{flex-direction:row}:host([layout=horizontal]):host([overflow-actions-disabled]) .container{overflow-x:auto}:host([layout=horizontal]) .action-group--end{margin-inline-start:auto}:host([layout=horizontal]) ::slotted(calcite-action-group:not(:last-of-type)){border-image:linear-gradient(transparent var(--calcite-internal-action-group-dividing-border-margin),var(--calcite-action-group-border-color, var(--calcite-color-border-3)) var(--calcite-internal-action-group-dividing-border-margin),var(--calcite-action-group-border-color, var(--calcite-color-border-3)) calc(100% - var(--calcite-internal-action-group-dividing-border-margin)),transparent var(--calcite-internal-action-group-dividing-border-margin));border-image-slice:1;border-inline-end-width:var(--calcite-border-width-sm);padding-inline-end:var(--calcite-internal-action-bar-padding)}.action-group--end{justify-content:flex-end}.line-overlay{position:absolute;inset:0;pointer-events:none}.line{position:absolute;--calcite-internal-action-bar-divider-inset: calc( var(--calcite-internal-action-group-dividing-border-margin) - var(--calcite-border-width-sm) )}:host([overflow-mode=wrap][layout=horizontal]) .container,:host([overflow-mode=wrap][layout=vertical]) .container{position:relative;flex-wrap:wrap;align-content:flex-start;--calcite-internal-action-bar-line-gap: calc( var(--calcite-internal-action-bar-padding) + var(--calcite-internal-action-bar-gap) )}:host([overflow-mode=wrap][layout=horizontal]) .container{row-gap:var(--calcite-internal-action-bar-line-gap)}:host([overflow-mode=wrap][layout=horizontal]) ::slotted(calcite-action-group){margin-inline-start:calc(-1 * var(--calcite-border-width-sm));padding-inline:var(--calcite-internal-action-bar-padding) 0;border-inline-start-width:var(--calcite-border-width-sm);border-inline-end-width:0;border-image:linear-gradient(transparent var(--calcite-internal-action-group-dividing-border-margin),var(--calcite-action-group-border-color, var(--calcite-color-border-3)) var(--calcite-internal-action-group-dividing-border-margin),var(--calcite-action-group-border-color, var(--calcite-color-border-3)) calc(100% - var(--calcite-internal-action-group-dividing-border-margin)),transparent calc(100% - var(--calcite-internal-action-group-dividing-border-margin)));border-image-slice:1}:host([overflow-mode=wrap][layout=horizontal]) .line{inset-inline:var(--calcite-internal-action-bar-padding);block-size:var(--calcite-border-width-sm);inset-block-start:calc(var(--calcite-internal-action-bar-line-offset, 0px) - var(--calcite-internal-action-bar-line-gap) / 2);background:linear-gradient(to right,transparent var(--calcite-internal-action-bar-divider-inset),var(--calcite-action-group-border-color, var(--calcite-color-border-3)) var(--calcite-internal-action-bar-divider-inset),var(--calcite-action-group-border-color, var(--calcite-color-border-3)) calc(100% - var(--calcite-internal-action-bar-divider-inset)),transparent calc(100% - var(--calcite-internal-action-bar-divider-inset)))}:host([overflow-mode=wrap][layout=horizontal]) .container.has-action-groups{overflow:hidden;padding-inline-start:0;column-gap:calc(var(--calcite-internal-action-bar-gap) + var(--calcite-border-width-sm))}:host([overflow-mode=wrap][layout=horizontal]) .container.has-action-groups .action-group--start{padding-inline-start:var(--calcite-internal-action-bar-padding)}:host([overflow-mode=wrap][layout=vertical]) .container{block-size:100%;min-block-size:0;column-gap:var(--calcite-internal-action-bar-line-gap)}:host([overflow-mode=wrap][layout=vertical]) ::slotted(calcite-action-group){margin-block-start:calc(-1 * var(--calcite-border-width-sm));padding-block:var(--calcite-internal-action-bar-padding) 0;border-block-start-width:var(--calcite-border-width-sm);border-block-end-width:0;border-image:linear-gradient(to right,transparent var(--calcite-internal-action-group-dividing-border-margin),var(--calcite-action-group-border-color, var(--calcite-color-border-3)) var(--calcite-internal-action-group-dividing-border-margin),var(--calcite-action-group-border-color, var(--calcite-color-border-3)) calc(100% - var(--calcite-internal-action-group-dividing-border-margin)),transparent calc(100% - var(--calcite-internal-action-group-dividing-border-margin)));border-image-slice:1}:host([overflow-mode=wrap][layout=vertical]) .line{inset-block:var(--calcite-internal-action-bar-padding);inline-size:var(--calcite-border-width-sm);inset-inline-start:calc(var(--calcite-internal-action-bar-line-offset, 0px) - var(--calcite-internal-action-bar-line-gap) / 2);background:linear-gradient(to bottom,transparent var(--calcite-internal-action-bar-divider-inset),var(--calcite-action-group-border-color, var(--calcite-color-border-3)) var(--calcite-internal-action-bar-divider-inset),var(--calcite-action-group-border-color, var(--calcite-color-border-3)) calc(100% - var(--calcite-internal-action-bar-divider-inset)),transparent calc(100% - var(--calcite-internal-action-bar-divider-inset)))}:host([overflow-mode=wrap][layout=vertical]) .container.has-action-groups{overflow:hidden;padding-block-start:0;row-gap:calc(var(--calcite-internal-action-bar-gap) + var(--calcite-border-width-sm))}:host([overflow-mode=wrap][layout=vertical]) .container.has-action-groups .action-group--start{padding-block-start:var(--calcite-internal-action-bar-padding)}:host([overflow-mode=none][layout=horizontal]) .container{overflow-x:auto}:host([overflow-mode=none][layout=vertical]) .container{overflow-y:auto}:host([hidden]){display:none}[hidden]{display:none}`;
 class ActionBar extends LitElement {
   constructor() {
     super();
@@ -115,8 +130,15 @@ class ActionBar extends LitElement {
     this.suppressedActionGroupActionsChange = /* @__PURE__ */ new WeakMap();
     this.cancelable = useCancelable()(this);
     this.resize = debounce(({ width, height }) => {
-      const { expanded, expandToggleDisabled, layout, overflowActionsDisabled, expandPosition } = this;
-      if (overflowActionsDisabled || layout === "vertical" && !height || layout === "horizontal" && !width || !this.containerRef.value) {
+      const { expanded, expandToggleDisabled, layout, expandPosition } = this;
+      if (!this.containerRef.value) {
+        return;
+      }
+      if (this.usesWrap) {
+        this.scheduleLineMeasure();
+        return;
+      }
+      if (this.overflowMode !== "collapse" || layout === "vertical" && !height || layout === "horizontal" && !width) {
         return;
       }
       this.updateGroups();
@@ -177,6 +199,10 @@ class ActionBar extends LitElement {
       });
     }, DEBOUNCE.resize);
     this.resizeHandler = (entry) => {
+      if (this.usesWrap) {
+        this.scheduleLineMeasure();
+        return;
+      }
       const { width, height } = entry.contentRect;
       this.resize({ width, height });
     };
@@ -192,12 +218,14 @@ class ActionBar extends LitElement {
     };
     this.hasActionsEnd = false;
     this.hasActionsStart = false;
+    this.hasActionGroups = false;
+    this.lineOffsets = [];
     this.floating = false;
     this.expandToggleDisabled = false;
     this.expanded = false;
     this.expandPosition = "end";
     this.layout = "vertical";
-    this.overflowActionsDisabled = false;
+    this.overflowMode = "collapse";
     this.overlayPositioning = "absolute";
     this.scale = "m";
     this.selectionAppearance = "neutral";
@@ -210,7 +238,7 @@ class ActionBar extends LitElement {
     this.listen("keydown", this.handleKeyDown);
   }
   static {
-    this.properties = { expandTooltip: [16, {}, { state: true }], hasActionsEnd: [16, {}, { state: true }], hasActionsStart: [16, {}, { state: true }], actionsEndGroupLabel: 1, actionsStartGroupLabel: 1, floating: [7, {}, { reflect: true, type: Boolean }], expandToggleDisabled: [7, {}, { reflect: true, type: Boolean }], expandDisabled: [7, {}, { reflect: true, type: Boolean }], expanded: [7, {}, { reflect: true, type: Boolean }], expandPosition: [3, {}, { reflect: true }], layout: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], overflowActionsDisabled: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], position: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }], selectionAppearance: [3, {}, { reflect: true }] };
+    this.properties = { expandTooltip: [16, {}, { state: true }], hasActionsEnd: [16, {}, { state: true }], hasActionsStart: [16, {}, { state: true }], hasActionGroups: [16, {}, { state: true }], lineOffsets: [16, {}, { state: true }], actionsEndGroupLabel: 1, actionsStartGroupLabel: 1, floating: [7, {}, { reflect: true, type: Boolean }], expandToggleDisabled: [7, {}, { reflect: true, type: Boolean }], expandDisabled: [7, {}, { reflect: true, type: Boolean }], expanded: [7, {}, { reflect: true, type: Boolean }], expandPosition: [3, {}, { reflect: true }], layout: [3, {}, { reflect: true }], overflowMode: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], overflowActionsDisabled: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], position: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }], selectionAppearance: [3, {}, { reflect: true }] };
   }
   static {
     this.styles = styles;
@@ -227,7 +255,25 @@ class ActionBar extends LitElement {
     });
     this.expandToggleDisabled = value;
   }
+  get overflowActionsDisabled() {
+    return this.overflowMode === "none";
+  }
+  set overflowActionsDisabled(value) {
+    logger.deprecated("property", {
+      component: this,
+      name: "overflowActionsDisabled",
+      removalVersion: 7,
+      suggested: 'overflowMode="none"'
+    });
+    this.overflowMode = value ? "none" : "collapse";
+  }
   async overflowActions() {
+    if (this.overflowMode !== "collapse") {
+      if (this.usesWrap) {
+        this.scheduleLineMeasure();
+      }
+      return;
+    }
     this.resize({ width: this.el.clientWidth, height: this.el.clientHeight });
   }
   async setFocus(options) {
@@ -235,7 +281,7 @@ class ActionBar extends LitElement {
   }
   connectedCallback() {
     super.connectedCallback();
-    this.overflowActionsDisabledHandler(this.overflowActionsDisabled);
+    this.overflowModeHandler();
     this.cancelable.add(this.resize);
   }
   willUpdate(changes) {
@@ -244,9 +290,22 @@ class ActionBar extends LitElement {
     }
     if (changes.has("layout") && (this.hasUpdated || this.layout !== "vertical")) {
       this.updateGroups();
+      this.overflowModeHandler();
+      if (!this.usesWrap) {
+        this.updateLines();
+      }
     }
-    if (changes.has("overflowActionsDisabled") && (this.hasUpdated || this.overflowActionsDisabled !== false)) {
-      this.overflowActionsDisabledHandler(this.overflowActionsDisabled);
+    if (changes.has("overflowMode") && (this.hasUpdated || this.overflowMode !== "collapse")) {
+      if (!this.usesWrap && this.lineMeasureFrame != null) {
+        cancelAnimationFrame(this.lineMeasureFrame);
+        this.lineMeasureFrame = void 0;
+      }
+      if (this.usesWrap) {
+        this.scheduleLineMeasure();
+      } else {
+        this.updateLines();
+      }
+      this.overflowModeHandler();
     }
     if (changes.has("expanded") && this.hasUpdated) {
       this.expandedHandler();
@@ -267,9 +326,18 @@ class ActionBar extends LitElement {
     this.syncActionsState();
     this.overflowActions();
   }
+  updated() {
+    if (this.usesWrap && this.lineMeasureFrame == null) {
+      this.scheduleLineMeasure();
+    }
+  }
   disconnectedCallback() {
     super.disconnectedCallback();
     this.resizeObserver?.disconnect();
+    if (this.lineMeasureFrame != null) {
+      cancelAnimationFrame(this.lineMeasureFrame);
+      this.lineMeasureFrame = void 0;
+    }
   }
   getItemSizes() {
     const { layout, expandToggleEl } = this;
@@ -285,12 +353,12 @@ class ActionBar extends LitElement {
     this.syncActionsState(true);
     this.overflowActions();
   }
-  overflowActionsDisabledHandler(overflowActionsDisabled) {
-    if (overflowActionsDisabled) {
+  overflowModeHandler() {
+    if (this.overflowMode === "none") {
       this.resizeObserver?.disconnect();
-      return;
+    } else {
+      this.resizeObserver?.observe(this.el);
     }
-    this.resizeObserver?.observe(this.el);
     this.overflowActions();
   }
   actionMenuOpenHandler(event) {
@@ -354,13 +422,72 @@ class ActionBar extends LitElement {
       ...this.actionsEndGroups,
       ...this.getSectionWrapperGroups()
     ];
+    this.hasActionGroups = this.actionGroups.length > 0;
     groups.forEach((group) => {
       group.layout = this.layout;
       group.scale = this.scale;
     });
   }
+  get usesWrap() {
+    return this.overflowMode === "wrap" && this.layout !== "grid";
+  }
+  scheduleLineMeasure() {
+    if (this.lineMeasureFrame != null) {
+      cancelAnimationFrame(this.lineMeasureFrame);
+    }
+    this.lineMeasureFrame = requestAnimationFrame(() => {
+      this.lineMeasureFrame = void 0;
+      this.updateLines();
+    });
+  }
+  getWrapItems() {
+    const items = [];
+    const start = this.actionsStartGroupRef.value;
+    if (start && !start.hidden) {
+      items.push(start);
+    }
+    this.defaultSlotItems.forEach((el) => {
+      if (!el.hidden) {
+        items.push(el);
+      }
+    });
+    const end = this.actionsEndGroupRef.value;
+    if (end && !end.hidden) {
+      items.push(end);
+    }
+    return items;
+  }
+  updateLines() {
+    const container = this.containerRef.value;
+    if (!container || !this.usesWrap) {
+      if (this.lineOffsets.length > 0) {
+        this.lineOffsets = [];
+      }
+      return;
+    }
+    const horizontal = this.layout === "horizontal";
+    const rtl = this.direction === "rtl";
+    const containerRect = container.getBoundingClientRect();
+    const items = this.getWrapItems();
+    const lineOffsets = [];
+    let previousOffset = null;
+    items.forEach((item) => {
+      const offset = getWrapItemCrossOffset({ item, containerRect, horizontal, rtl });
+      if (previousOffset !== null && Math.abs(offset - previousOffset) > 1) {
+        lineOffsets.push(offset);
+      }
+      previousOffset = offset;
+    });
+    const changed = lineOffsets.length !== this.lineOffsets.length || lineOffsets.some((value, index) => value !== this.lineOffsets[index]);
+    if (changed) {
+      this.lineOffsets = lineOffsets;
+    }
+  }
   handleDefaultSlotChange() {
     this.syncSlotAndActions(() => this.syncDefaultSlot());
+    if (this.usesWrap) {
+      this.scheduleLineMeasure();
+    }
   }
   handleActionsEndSlotChange() {
     this.syncSlotAndActions(() => this.syncActionsEndSlot());
@@ -519,15 +646,20 @@ class ActionBar extends LitElement {
     const onSlotChange = isStart ? this.handleActionsStartSlotChange : this.handleActionsEndSlotChange;
     const label = isStart ? this.actionsStartGroupLabel : this.actionsEndGroupLabel;
     const hidden = !hasExpandToggle && !hasActions;
-    const className = isStart ? CSS.actionGroupStart : CSS.actionGroupEnd;
     const actionGroupRef = isStart ? this.actionsStartGroupRef : this.actionsEndGroupRef;
     const slotRef = isStart ? this.actionsStartSlotRef : this.actionsEndSlotRef;
     const expandToggle = hasExpandToggle ? this.renderExpandToggle() : null;
-    return html`<calcite-action-group class=${safeClassMap(className)} .hidden=${hidden} .label=${label} .layout=${layout} .overlayPositioning=${overlayPositioning} .scale=${scale} ${ref(actionGroupRef)}>${isStart ? expandToggle : null}<slot name=${slotName ?? nothing} @slotchange=${onSlotChange} ${ref(slotRef)}></slot>${hasExpandToggle ? this.renderExpandTooltipSlot() : null}${isStart ? null : expandToggle}</calcite-action-group>`;
+    return html`<calcite-action-group class=${safeClassMap({
+      [CSS.actionGroupStart]: isStart,
+      [CSS.actionGroupEnd]: !isStart
+    })} .hidden=${hidden} .label=${label} .layout=${layout} .overlayPositioning=${overlayPositioning} .scale=${scale} ${ref(actionGroupRef)}>${isStart ? expandToggle : null}<slot name=${slotName ?? nothing} @slotchange=${onSlotChange} ${ref(slotRef)}></slot>${hasExpandToggle ? this.renderExpandTooltipSlot() : null}${isStart ? null : expandToggle}</calcite-action-group>`;
   }
   render() {
     const ariaOrientation = this.layout === "horizontal" ? "horizontal" : "vertical";
-    return html`<div .ariaOrientation=${ariaOrientation} class=${safeClassMap(CSS.container)} role=toolbar ${ref(this.containerRef)}>${this.renderActionsGroup("start")}<slot @slotchange=${this.handleDefaultSlotChange} ${ref(this.defaultSlotRef)}></slot>${this.renderActionsGroup("end")}</div>`;
+    return html`<div .ariaOrientation=${ariaOrientation} class=${safeClassMap({
+      [CSS.container]: true,
+      [CSS.hasActionGroups]: this.hasActionGroups
+    })} role=toolbar ${ref(this.containerRef)}>${this.renderActionsGroup("start")}<slot @slotchange=${this.handleDefaultSlotChange} ${ref(this.defaultSlotRef)}></slot>${this.renderActionsGroup("end")}${this.usesWrap ? html`<div aria-hidden=true class=${safeClassMap(CSS.lineOverlay)}>${this.lineOffsets.map((offset) => html`<div class=${safeClassMap(CSS.line)} style=${`--calcite-internal-action-bar-line-offset: ${offset}px`}></div>`)}</div>` : null}</div>`;
   }
 }
 customElement("calcite-action-bar", ActionBar);

package/dist/components/calcite-action-group/customElement.d.ts

@@ -61,11 +61,11 @@ export abstract class ActionGroup extends LitElement {
    */
   accessor overflowActionsDisabled: boolean;
   /**
-   * Specifies the type of positioning to use for overlaid content, where:
+   * Specifies the type of positioning to use for overlaid content.
    *
-   * `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and
+   * - `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout.
    *
-   * `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
+   * - `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
    *
    * @default "absolute"
    */
@@ -79,15 +79,12 @@ export abstract class ActionGroup extends LitElement {
   /** Specifies the active actions in the group. */
   get selectedActions(): Action[];
   /**
-   * Specifies the selection mode of the component, where:
+   * Specifies the selection mode of the component.
    *
-   * `"multiple"` allows any number of selections,
-   *
-   * `"single"` allows only one selection,
-   *
-   * `"single-persist"` allows one selection and prevents de-selection, and
-   *
-   * `"none"` disables selection (default).
+   * - `"multiple"` allows any number of selections.
+   * - `"single"` allows only one selection.
+   * - `"single-persist"` allows one selection and prevents de-selection.
+   * - `"none"` disables selection (default).
    *
    * @default "none"
    */

package/dist/components/calcite-action-menu/customElement.d.ts

@@ -44,11 +44,11 @@ export abstract class ActionMenu extends LitElement {
    */
   accessor open: boolean;
   /**
-   * Specifies the type of positioning to use for overlaid content, where:
+   * Specifies the type of positioning to use for overlaid content.
    *
-   * `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and
+   * - `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout.
    *
-   * `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
+   * - `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
    *
    * @default "absolute"
    */

package/dist/components/calcite-action-pad/customElement.d.ts

@@ -44,11 +44,11 @@ export abstract class ActionPad extends LitElement {
       collapseLabel?: string | undefined;
   };
   /**
-   * Specifies the type of positioning to use for overlaid content, where:
+   * Specifies the type of positioning to use for overlaid content.
    *
-   * `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and
+   * - `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout.
    *
-   * `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
+   * - `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
    *
    * @default "absolute"
    */

package/dist/components/calcite-autocomplete/customElement.d.ts

@@ -120,11 +120,11 @@ export abstract class Autocomplete extends LitElement {
    */
   accessor open: boolean;
   /**
-   * Specifies the type of positioning to use for overlaid content, where:
+   * Specifies the type of positioning to use for overlaid content.
    *
-   * `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and
+   * - `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout.
    *
-   * `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
+   * - `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
    *
    * @default "absolute"
    */

package/dist/components/calcite-block/customElement.d.ts

@@ -107,11 +107,11 @@ export abstract class Block extends LitElement {
    */
   accessor open: boolean;
   /**
-   * Specifies the type of positioning to use for overlaid content, where:
+   * Specifies the type of positioning to use for overlaid content.
    *
-   * `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and
+   * - `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout.
    *
-   * `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
+   * - `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
    *
    * @default "absolute"
    */

package/dist/components/calcite-block-section/customElement.d.ts

@@ -57,11 +57,10 @@ export abstract class BlockSection extends LitElement {
   /** The component header text. */
   accessor text: string | undefined;
   /**
-   * Specifies how the component's toggle is displayed, where:
+   * Specifies how the component's toggle is displayed.
    *
-   * `"button"` sets the toggle to a selectable header, and
-   *
-   * `"switch"` sets the toggle to a switch.
+   * - `"button"` sets the toggle to a selectable header.
+   * - `"switch"` sets the toggle to a switch.
    *
    * @default "button"
    */

package/dist/components/calcite-chip-group/customElement.d.ts

@@ -26,15 +26,12 @@ export abstract class ChipGroup extends LitElement {
   /** Specifies the component's selected items. */
   get selectedItems(): Chip[];
   /**
-   * Specifies the selection mode of the component, where:
+   * Specifies the selection mode of the component.
    *
-   * `"multiple"` allows any number of selections,
-   *
-   * `"single"` allows only one selection,
-   *
-   * `"single-persist"` allows one selection and prevents de-selection, and
-   *
-   * `"none"` does not allow any selections.
+   * - `"multiple"` allows any number of selections.
+   * - `"single"` allows only one selection.
+   * - `"single-persist"` allows one selection and prevents de-selection.
+   * - `"none"` does not allow any selections.
    *
    * @default "none"
    */

package/dist/components/calcite-combobox/customElement.d.ts

@@ -89,11 +89,11 @@ export abstract class Combobox extends LitElement {
    */
   accessor open: boolean;
   /**
-   * Specifies the type of positioning to use for overlaid content, where:
+   * Specifies the type of positioning to use for overlaid content.
    *
-   * `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and
+   * - `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout.
    *
-   * `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
+   * - `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
    *
    * @default "absolute"
    */
@@ -142,37 +142,31 @@ export abstract class Combobox extends LitElement {
   /** The component's selected items. */
   get selectedItems(): HTMLCalciteComboboxItemElement[];
   /**
-   * Specifies the selection appearance, where
+   * Specifies the selection appearance.
    *
-   * `"icon"` displays a checkmark or dot, and
-   *
-   * `"highlight"` displays a background highlight.
+   * - `"icon"` displays a checkmark or dot.
+   * - `"highlight"` displays a background highlight.
    *
    * @default "icon"
    */
   accessor selectionAppearance: Extract<"icon" | "highlight", SelectionAppearance>;
   /**
-   * When `selectionMode` is `"ancestors"` or `"multiple"`, specifies the display of multiple `calcite-combobox-item` selections, where:
-   *
-   * `"all"` displays all selections with individual `calcite-chip`s,
-   *
-   * `"fit"` displays individual `calcite-chip`s that scale to the component's size, including a non-closable `calcite-chip`, which provides the number of additional `calcite-combobox-item` selections not visually displayed, and
+   * When `selectionMode` is `"ancestors"` or `"multiple"`, specifies the display of multiple `calcite-combobox-item` selections.
    *
-   * `"single"` displays one `calcite-chip` with the total number of selections.
+   * - `"all"` displays all selections with individual `calcite-chip`s.
+   * - `"fit"` displays individual `calcite-chip`s that scale to the component's size, including a non-closable `calcite-chip`, which provides the number of additional `calcite-combobox-item` selections not visually displayed.
+   * - `"single"` displays one `calcite-chip` with the total number of selections.
    *
    * @default "all"
    */
   accessor selectionDisplay: SelectionDisplay;
   /**
-   * Specifies the selection mode of the component, where:
-   *
-   * `"multiple"` allows any number of selections,
-   *
-   * `"single"` allows only one selection,
-   *
-   * `"single-persist"` allows one selection and prevents de-selection, and
+   * Specifies the selection mode of the component.
    *
-   * `"ancestors"` allows multiple selections, but shows ancestors of selected items as selected, with only deepest children shown in chips.
+   * - `"multiple"` allows any number of selections.
+   * - `"single"` allows only one selection.
+   * - `"single-persist"` allows one selection and prevents de-selection.
+   * - `"ancestors"` allows multiple selections, but shows ancestors of selected items as selected, with only deepest children shown in chips.
    *
    * @default "multiple"
    */

package/dist/components/calcite-dialog/customElement.d.ts

@@ -88,13 +88,13 @@ export abstract class Dialog extends LitElement {
    */
   accessor focusTrapDisabled: boolean;
   /**
-   * Specifies custom focus trap configuration on the component, where
+   * Specifies custom focus trap configuration on the component.
    *
-   * `"allowOutsideClick`" allows outside clicks,
-   * `"initialFocus"` enables initial focus,
-   * `"returnFocusOnDeactivate"` returns focus when not active,
-   * `"extraContainers"` specifies additional focusable elements external to the trap, such as 3rd-party components appending elements to the document body, and
-   * `"setReturnFocus"` customizes the element to which focus is returned when the trap is deactivated. Return `false` to prevent focus return, or `undefined` to use the default behavior (returning focus to the element focused before activation).
+   * - `"allowOutsideClick`" allows outside clicks.
+   * - `"initialFocus"` enables initial focus.
+   * - `"returnFocusOnDeactivate"` returns focus when not active.
+   * - `"extraContainers"` specifies additional focusable elements external to the trap, such as 3rd-party components appending elements to the document body.
+   * - `"setReturnFocus"` customizes the element to which focus is returned when the trap is deactivated. Return `false` to prevent focus return, or `undefined` to use the default behavior (returning focus to the element focused before activation).
    */
   accessor focusTrapOptions: Partial<FocusTrapOptions> | undefined;
   /**
@@ -110,7 +110,7 @@ export abstract class Dialog extends LitElement {
   /** Specifies an icon to display. */
   accessor icon: IconName | undefined;
   /**
-   * When `true` and the element direction is right-to-left (`"rtl"`), flips the component`s `icon`.
+   * When `true` and the element direction is right-to-left (`"rtl"`), flips the component's `icon`.
    *
    * @default false
    */
@@ -158,11 +158,11 @@ export abstract class Dialog extends LitElement {
    */
   accessor outsideCloseDisabled: boolean;
   /**
-   * Specifies the type of positioning to use for overlaid content, where:
+   * Specifies the type of positioning to use for overlaid content.
    *
-   * `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and
+   * - `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout.
    *
-   * `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
+   * - `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
    *
    * @default "absolute"
    */

package/dist/components/calcite-dropdown/customElement.d.ts

@@ -54,11 +54,11 @@ export abstract class Dropdown extends LitElement {
    */
   accessor open: boolean;
   /**
-   * Specifies the type of positioning to use for overlaid content, where:
+   * Specifies the type of positioning to use for overlaid content.
    *
-   * `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and
+   * - `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout.
    *
-   * `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
+   * - `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
    *
    * @default "absolute"
    */

package/dist/components/calcite-dropdown-group/customElement.d.ts

@@ -18,13 +18,11 @@ export abstract class DropdownGroup extends LitElement {
    */
   accessor position: number;
   /**
-   * Specifies the selection mode of the component, where:
+   * Specifies the selection mode of the component.
    *
-   * `"multiple"` allows any number of selections,
-   *
-   * `"single"` allows only one selection, and
-   *
-   * `"none"` does not allow any selections.
+   * - `"multiple"` allows any number of selections.
+   * - `"single"` allows only one selection.
+   * - `"none"` does not allow any selections.
    *
    * @default "single"
    */

package/dist/components/calcite-flow-item/customElement.d.ts

@@ -128,11 +128,11 @@ export abstract class FlowItem extends LitElement {
       options?: string | undefined;
   } & Panel["messageOverrides"];
   /**
-   * Specifies the type of positioning to use for overlaid content, where:
+   * Specifies the type of positioning to use for overlaid content.
    *
-   * `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and
+   * - `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout.
    *
-   * `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
+   * - `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
    *
    * @default "absolute"
    */

package/dist/components/calcite-focus-trap/customElement.d.ts

@@ -19,13 +19,13 @@ export abstract class FocusTrap extends LitElement {
   /** When defined, provides a condition to disable focus trapping. When `true`, prevents focus trapping. */
   accessor focusTrapDisabledOverride: (() => boolean) | undefined;
   /**
-   * Specifies custom focus trap configuration on the component, where
+   * Specifies custom focus trap configuration on the component.
    *
-   * `"allowOutsideClick"` allows outside clicks,
-   * `"initialFocus"` enables initial focus,
-   * `"returnFocusOnDeactivate"` returns focus when not active,
-   * `"extraContainers"` specifies additional focusable elements external to the trap, and
-   * `"setReturnFocus"` customizes the element to which focus is returned when the trap is deactivated.
+   * - `"allowOutsideClick"` allows outside clicks.
+   * - `"initialFocus"` enables initial focus.
+   * - `"returnFocusOnDeactivate"` returns focus when not active.
+   * - `"extraContainers"` specifies additional focusable elements external to the trap.
+   * - `"setReturnFocus"` customizes the element to which focus is returned when the trap is deactivated.
    */
   accessor focusTrapOptions: Partial<FocusTrapOptions> | undefined;
   /** Activates the component's focus trap. */

package/dist/components/calcite-input-date-picker/customElement.d.ts

@@ -137,11 +137,11 @@ export abstract class InputDatePicker extends LitElement {
    */
   accessor open: boolean;
   /**
-   * Specifies the type of positioning to use for overlaid content, where:
+   * Specifies the type of positioning to use for overlaid content.
    *
-   * `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and
+   * - `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout.
    *
-   * `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
+   * - `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
    *
    * @default "absolute"
    */