@esri/calcite-components 5.1.0-next.5 → 5.1.0-next.6

package/dist/loader.js

@@ -5,7 +5,7 @@ const defineCustomElements = makeDefineCustomElements(runtime, {
   "calcite-accordion": [() => import("./components/calcite-accordion/customElement.js"), "appearance,iconPosition,iconType,scale,selectionMode"],
   "calcite-accordion-item": [() => import("./components/calcite-accordion-item/customElement.js"), "accordionParent:,appearance,description,expanded,heading,headingLevel,iconEnd,iconFlipRtl,iconPosition,iconStart,iconType,messageOverrides:,scale;setFocus"],
   "calcite-action": [() => import("./components/calcite-action/customElement.js"), "active,activeDescendant,alignment,appearance,aria:,compact,disabled,dragHandle,form,icon,iconFlipRtl,indicator,label,loading,messageOverrides:,scale,selectionAppearance,text,textEnabled,type,width;setFocus"],
-  "calcite-action-bar": [() => import("./components/calcite-action-bar/customElement.js"), "actionsEndGroupLabel,expandDisabled,expanded,floating,layout,messageOverrides:,overflowActionsDisabled,overlayPositioning,position,scale,selectionAppearance;overflowActions,setFocus"],
+  "calcite-action-bar": [() => import("./components/calcite-action-bar/customElement.js"), "actionsEndGroupLabel,actionsStartGroupLabel,expandDisabled,expanded,expandPosition,floating,layout,messageOverrides:,overflowActionsDisabled,overlayPositioning,position,scale,selectionAppearance;overflowActions,setFocus"],
   "calcite-action-group": [() => import("./components/calcite-action-group/customElement.js"), "columns,expanded,label,layout,menuFlipPlacements:,menuOpen,menuPlacement,messageOverrides:,overlayPositioning,scale,selectedActions:,selectionMode,topLayerDisabled;setFocus"],
   "calcite-action-menu": [() => import("./components/calcite-action-menu/customElement.js"), "appearance,expanded,flipPlacements:,label,open,overlayPositioning,placement,scale,topLayerDisabled;setFocus"],
   "calcite-action-pad": [() => import("./components/calcite-action-pad/customElement.js"), "actionsEndGroupLabel,expandDisabled,expanded,layout,messageOverrides:,overlayPositioning,position,scale,selectionAppearance;setFocus"],

package/dist/types/lumina.d.ts

@@ -117,7 +117,7 @@ interface LuminaCalciteAccordionItem extends Partial<Pick<AccordionItem, "descri
 interface LuminaCalciteAction extends Required<Pick<Action, "text">>, Partial<Pick<Action, "active" | "alignment" | "appearance" | "aria" | "compact" | "disabled" | "form" | "icon" | "iconFlipRtl" | "indicator" | "label" | "loading" | "messageOverrides" | "scale" | "textEnabled" | "type">>, h.JSX.HTMLAttributes<Action> {
 }
 
-interface LuminaCalciteActionBar extends Partial<Pick<ActionBar, "actionsEndGroupLabel" | "expandDisabled" | "expanded" | "floating" | "layout" | "messageOverrides" | "overflowActionsDisabled" | "overlayPositioning" | "position" | "scale" | "selectionAppearance">>, h.JSX.HTMLAttributes<ActionBar> {
+interface LuminaCalciteActionBar extends Partial<Pick<ActionBar, "actionsEndGroupLabel" | "actionsStartGroupLabel" | "expandDisabled" | "expanded" | "expandPosition" | "floating" | "layout" | "messageOverrides" | "overflowActionsDisabled" | "overlayPositioning" | "position" | "scale" | "selectionAppearance">>, h.JSX.HTMLAttributes<ActionBar> {
   oncalciteActionBarCollapse?: EventHandler<ActionBar["calciteActionBarCollapse"]>;
   oncalciteActionBarExpand?: EventHandler<ActionBar["calciteActionBarExpand"]>;
   oncalciteActionBarToggle?: EventHandler<ActionBar["calciteActionBarToggle"]>;

package/dist/types/preact.d.ts

@@ -118,7 +118,7 @@ interface PreactCalciteAccordionItem extends Partial<Pick<AccordionItem, "descri
 interface PreactCalciteAction extends Required<Pick<Action, "text">>, Partial<Pick<Action, "active" | "alignment" | "appearance" | "aria" | "compact" | "disabled" | "form" | "icon" | "iconFlipRtl" | "indicator" | "label" | "loading" | "messageOverrides" | "scale" | "textEnabled" | "type">>, HTMLAttributes<Action> {
 }
 
-interface PreactCalciteActionBar extends Partial<Pick<ActionBar, "actionsEndGroupLabel" | "expandDisabled" | "expanded" | "floating" | "layout" | "messageOverrides" | "overflowActionsDisabled" | "overlayPositioning" | "position" | "scale" | "selectionAppearance">>, HTMLAttributes<ActionBar> {
+interface PreactCalciteActionBar extends Partial<Pick<ActionBar, "actionsEndGroupLabel" | "actionsStartGroupLabel" | "expandDisabled" | "expanded" | "expandPosition" | "floating" | "layout" | "messageOverrides" | "overflowActionsDisabled" | "overlayPositioning" | "position" | "scale" | "selectionAppearance">>, HTMLAttributes<ActionBar> {
   oncalciteActionBarCollapse?: EventHandler<ActionBar["calciteActionBarCollapse"]>;
   oncalciteActionBarExpand?: EventHandler<ActionBar["calciteActionBarExpand"]>;
   oncalciteActionBarToggle?: EventHandler<ActionBar["calciteActionBarToggle"]>;

package/dist/types/react.d.ts

@@ -118,7 +118,7 @@ interface ReactCalciteAccordionItem extends Partial<Pick<AccordionItem, "descrip
 interface ReactCalciteAction extends Required<Pick<Action, "text">>, Partial<Pick<Action, "active" | "alignment" | "appearance" | "aria" | "compact" | "disabled" | "form" | "icon" | "iconFlipRtl" | "indicator" | "label" | "loading" | "messageOverrides" | "scale" | "textEnabled" | "type">>, HTMLProps<Action> {
 }
 
-interface ReactCalciteActionBar extends Partial<Pick<ActionBar, "actionsEndGroupLabel" | "expandDisabled" | "expanded" | "floating" | "layout" | "messageOverrides" | "overflowActionsDisabled" | "overlayPositioning" | "position" | "scale" | "selectionAppearance">>, HTMLProps<ActionBar> {
+interface ReactCalciteActionBar extends Partial<Pick<ActionBar, "actionsEndGroupLabel" | "actionsStartGroupLabel" | "expandDisabled" | "expanded" | "expandPosition" | "floating" | "layout" | "messageOverrides" | "overflowActionsDisabled" | "overlayPositioning" | "position" | "scale" | "selectionAppearance">>, HTMLProps<ActionBar> {
   oncalciteActionBarCollapse?: EventHandler<ActionBar["calciteActionBarCollapse"]>;
   oncalciteActionBarExpand?: EventHandler<ActionBar["calciteActionBarExpand"]>;
   oncalciteActionBarToggle?: EventHandler<ActionBar["calciteActionBarToggle"]>;

package/dist/types/stencil.d.ts

@@ -118,7 +118,7 @@ interface StencilCalciteAccordionItem extends Partial<Pick<AccordionItem, "descr
 interface StencilCalciteAction extends Required<Pick<Action, "text">>, Partial<Pick<Action, "active" | "alignment" | "appearance" | "aria" | "compact" | "disabled" | "form" | "icon" | "iconFlipRtl" | "indicator" | "label" | "loading" | "messageOverrides" | "scale" | "textEnabled" | "type">>, StencilJsx.HTMLAttributes<Action> {
 }
 
-interface StencilCalciteActionBar extends Partial<Pick<ActionBar, "actionsEndGroupLabel" | "expandDisabled" | "expanded" | "floating" | "layout" | "messageOverrides" | "overflowActionsDisabled" | "overlayPositioning" | "position" | "scale" | "selectionAppearance">>, StencilJsx.HTMLAttributes<ActionBar> {
+interface StencilCalciteActionBar extends Partial<Pick<ActionBar, "actionsEndGroupLabel" | "actionsStartGroupLabel" | "expandDisabled" | "expanded" | "expandPosition" | "floating" | "layout" | "messageOverrides" | "overflowActionsDisabled" | "overlayPositioning" | "position" | "scale" | "selectionAppearance">>, StencilJsx.HTMLAttributes<ActionBar> {
   onCalciteActionBarCollapse?: EventHandler<ActionBar["calciteActionBarCollapse"]>;
   onCalciteActionBarExpand?: EventHandler<ActionBar["calciteActionBarExpand"]>;
   onCalciteActionBarToggle?: EventHandler<ActionBar["calciteActionBarToggle"]>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components",
-  "version": "5.1.0-next.5",
+  "version": "5.1.0-next.6",
   "description": "Web Components for Esri's Calcite Design System.",
   "homepage": "https://developers.arcgis.com/calcite-design-system/",
   "repository": {
@@ -95,7 +95,7 @@
     "@esri/calcite-design-tokens": "4.1.0-next.1",
     "@esri/calcite-tailwind-preset": "1.1.1-next.4",
     "@esri/eslint-plugin-calcite-components": "2.0.4-next.11",
-    "playwright": "1.57.0",
+    "playwright": "1.58.2",
     "sass-embedded": "1.97.3",
     "vitest": "4.0.18"
   },
@@ -107,5 +107,5 @@
     "dist/docs/vscode.html-custom-data.json"
   ],
   "web-types": "dist/docs/web-types.json",
-  "gitHead": "599b2441e14b3811123018a3ee212dec1b499e57"
+  "gitHead": "b9e85e81c400d98b08d446e72bb6a3414416a43d"
 }

package/dist/cdn/WSRLM2TQ.js

@@ -1,2 +0,0 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import{a as U}from"./DR7JKZAI.js";import{a as H}from"./AP2LDRUV.js";import{a as $,b as I,c as L,d as q}from"./EFNE45MK.js";import{a as x}from"./ENDXE7YY.js";import"./DNYAPW4C.js";import{a as O}from"./2GS6R2BX.js";import"./RRXOB3GM.js";import{c as B}from"./G52BPUIA.js";import{a as G}from"./QVTLP2LK.js";import"./RH6ZIP65.js";import{e as k}from"./V2PPBU7J.js";import"./BWDCDFXW.js";import{B as c,r as C,s as T,w as g}from"./WOJJ53FN.js";import"./OAOQ5BXS.js";import{E as w,F as E,G as z,H as m,N as S,S as D,g as y,h as v,p as f}from"./ENCYKNKN.js";var N=({bufferSize:b=0,containerSize:e,itemSizes:t})=>{let a=e-b,n=t.length,i=0;for(let[r,o]of t.entries())if(i=i+o,i>a){n=r;break}else continue;return n},j=({bufferSize:b=0,containerSize:e,itemSizes:t})=>Math.max(t.length-N({bufferSize:b,itemSizes:t,containerSize:e}),0),M={container:"container",actionGroupEnd:"action-group--end"},P={actionsEnd:"actions-end",expandTooltip:"expand-tooltip"},Q=y`: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));--tw-shadow: 0 6px 20px -4px rgba(0, 0, 0, .1), 0 4px 12px -2px rgba(0, 0, 0, .08);--tw-shadow-colored: 0 6px 20px -4px var(--tw-shadow-color), 0 4px 12px -2px var(--tw-shadow-color);box-shadow:var(--calcite-action-bar-shadow, var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow))}: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}`,A=class extends z{constructor(){super(),this.actions=[],this.containerRef=w(),this.direction=k(),this.mutationObserver=x("mutation",()=>this.mutationObserverHandler()),this.cancelable=U()(this),this.resize=H(({width:e,height:t})=>{let{expanded:a,expandDisabled:n,layout:i,overflowActionsDisabled:r,actionGroups:o}=this;if(r||i==="vertical"&&!t||i==="horizontal"&&!e)return;let d=this.getItemSizes();this.updateGroups();let h=this.hasActionsEnd||!n?o.length+1:o.length,s=h,l=getComputedStyle(this.containerRef.value);if(s+=c(i==="horizontal"?l.paddingInlineStart:l.paddingBlockStart)+c(i==="horizontal"?l.paddingInlineEnd:l.paddingBlockEnd),o.length>0&&o.forEach((p,W)=>{let u=getComputedStyle(p),F=c(u.gap),K=p.childElementCount-1;s+=F*K,W<o.length-1&&(s+=c(i==="horizontal"?u.paddingInlineEnd:u.paddingBlockEnd),s+=c(i==="horizontal"?u.borderInlineEndWidth:u.borderBlockEndWidth))}),h>0)for(let p=1;p<h;p++)s+=c(l.gap);let R=j({bufferSize:s,containerSize:i==="horizontal"?e:t,itemSizes:d});I({actionGroups:o,expanded:a,overflowCount:R})},S.resize),this.resizeHandler=e=>{let{width:t,height:a}=e.contentRect;this.resize({width:t,height:a})},this.resizeObserver=x("resize",e=>this.resizeHandlerEntries(e)),this.toggleExpand=()=>{this.expanded=!this.expanded,this.calciteActionBarToggle.emit()},this.messages=O(),this.focusSetter=G()(this),this.setExpandToggleEl=e=>{this.expandToggleEl=e},this.hasActionsEnd=!1,this.floating=!1,this.expandDisabled=!1,this.expanded=!1,this.layout="vertical",this.overflowActionsDisabled=!1,this.overlayPositioning="absolute",this.scale="m",this.selectionAppearance="neutral",this.calciteActionBarCollapse=f({cancelable:!1}),this.calciteActionBarExpand=f({cancelable:!1}),this.calciteActionBarToggle=f({cancelable:!1}),this.listen("calciteActionMenuOpen",this.actionMenuOpenHandler),this.listen("keydown",this.handleKeyDown)}static{this.properties={expandTooltip:[16,{},{state:!0}],hasActionsEnd:[16,{},{state:!0}],actionsEndGroupLabel:1,floating:[7,{},{reflect:!0,type:Boolean}],expandDisabled:[7,{},{reflect:!0,type:Boolean}],expanded:[7,{},{reflect:!0,type:Boolean}],layout:[3,{},{reflect:!0}],messageOverrides:[0,{},{attribute:!1}],overflowActionsDisabled:[7,{},{reflect:!0,type:Boolean}],overlayPositioning:[3,{},{reflect:!0}],position:[3,{},{reflect:!0}],scale:[3,{},{reflect:!0}],selectionAppearance:[3,{},{reflect:!0}]}}static{this.styles=Q}async overflowActions(){this.resize({width:this.el.clientWidth,height:this.el.clientHeight})}async setFocus(e){return this.focusSetter(()=>this.el,e)}connectedCallback(){super.connectedCallback(),this.updateGroups(),this.overflowActions(),this.updateActions(),this.mutationObserver?.observe(this.el,{childList:!0,subtree:!0}),this.overflowActionsDisabledHandler(this.overflowActionsDisabled),this.cancelable.add(this.resize)}willUpdate(e){e.has("expandDisabled")&&(this.hasUpdated||this.expandDisabled!==!1)&&this.overflowActions(),e.has("layout")&&(this.hasUpdated||this.layout!=="vertical")&&this.updateGroups(),e.has("overflowActionsDisabled")&&(this.hasUpdated||this.overflowActionsDisabled!==!1)&&this.overflowActionsDisabledHandler(this.overflowActionsDisabled),e.has("expanded")&&this.hasUpdated&&(this.expandedHandler(),this.expanded?this.calciteActionBarExpand.emit():this.calciteActionBarCollapse.emit()),e.has("selectionAppearance")&&(this.hasUpdated||this.selectionAppearance!=="neutral")&&this.updateActions()}loaded(){this.overflowActions()}disconnectedCallback(){super.disconnectedCallback(),this.mutationObserver?.disconnect(),this.resizeObserver?.disconnect()}getItemSizes(){let{el:e,layout:t,expandToggleEl:a}=this,n=$(e);a&&n.push(a);let i=t==="horizontal"?"clientWidth":"clientHeight",r=Math.max(...n.map(o=>o[i]||0));return n.map(o=>o[i]||r)}expandedHandler(){let{el:e,expanded:t}=this;L({el:e,expanded:t}),this.overflowActions()}overflowActionsDisabledHandler(e){if(e){this.resizeObserver?.disconnect();return}this.resizeObserver?.observe(this.el),this.overflowActions()}actionMenuOpenHandler(e){if(e.target.menuOpen){let t=e.composedPath();this.actionGroups?.forEach(a=>{t.includes(a)||(a.menuOpen=!1)})}}mutationObserverHandler(){this.updateGroups(),this.overflowActions(),this.queryAndStoreActions(),this.updateActions()}resizeHandlerEntries(e){e.forEach(this.resizeHandler)}updateGroups(){let e=Array.from(this.el.querySelectorAll("calcite-action-group"));this.actionGroups=e,e.forEach(t=>{t.layout=this.layout,t.scale=this.scale})}handleDefaultSlotChange(){this.updateGroups(),this.queryAndStoreActions(),this.updateActions()}handleActionsEndSlotChange(e){this.hasActionsEnd=C(e)}handleTooltipSlotChange(e){let t=T(e).filter(a=>a?.matches("calcite-tooltip"));this.expandTooltip=t[0]}updateActions(){this.actions.forEach(e=>{e.selectionAppearance=this.selectionAppearance})}queryAndStoreActions(){this.actions=Array.from(this.el.querySelectorAll("calcite-action"))}handleKeyDown(e){this.queryAndStoreActions();let t=this.actions.filter(n=>!n.disabled),a=document.activeElement;if(B(a))switch(e.key){case"ArrowRight":case"ArrowDown":g(t,a,"next",!0),e.preventDefault();break;case"ArrowLeft":case"ArrowUp":g(t,a,"previous",!0),e.preventDefault();break;case"Home":g(t,a,"first",!0),e.preventDefault();break;case"End":g(t,a,"last",!0),e.preventDefault();break;case"Tab":this.setActionTabIndexes(a);break}}setActionTabIndexes(e){this.actions.forEach(t=>{t.tabIndex=!t.disabled&&t===e?0:-1})}renderBottomActionGroup(){let{expanded:e,expandDisabled:t,el:a,position:n,toggleExpand:i,scale:r,layout:o,messages:d,actionsEndGroupLabel:h,overlayPositioning:s}=this,l=t?null:q({collapseLabel:d.collapseLabel,collapseText:d.collapse,direction:this.direction,el:a,expandLabel:d.expandLabel,expandText:d.expand,expanded:e,position:n,ref:this.setExpandToggleEl,scale:r,toggle:i,tooltip:this.expandTooltip});return v`<calcite-action-group class=${m(M.actionGroupEnd)} .hidden=${this.expandDisabled&&!this.hasActionsEnd} .label=${h} .layout=${o} .overlayPositioning=${s} .scale=${r}><slot name=${P.actionsEnd} @slotchange=${this.handleActionsEndSlotChange}></slot><slot name=${P.expandTooltip} @slotchange=${this.handleTooltipSlotChange}></slot>${l}</calcite-action-group>`}render(){return v`<div .ariaOrientation=${this.layout==="horizontal"?"horizontal":"vertical"} class=${m(M.container)} role=toolbar ${E(this.containerRef)}><slot @slotchange=${this.handleDefaultSlotChange}></slot>${this.renderBottomActionGroup()}</div>`}};D("calcite-action-bar",A);export{A as ActionBar};