@spectrum-web-components/action-group 0.7.1 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -367,7 +367,7 @@
367
367
  {
368
368
  "kind": "variable",
369
369
  "name": "styles",
370
- "default": "css`\n:host{--spectrum-actiongroup-button-gap-reset:0;--spectrum-actiongroup-quiet-compact-button-gap:var(\n--spectrum-global-dimension-size-25\n)}:host{display:flex;flex-wrap:wrap}::slotted(*){flex-shrink:0}:host(:not([vertical]):not([compact])){margin-top:calc(var(\n--spectrum-actiongroup-button-gap-y,\nvar(--spectrum-global-dimension-size-100)\n)*-1)}:host(:not([vertical]):not([compact])) ::slotted(*){flex-shrink:0;margin-top:var(\n--spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100)\n)}:host([dir=ltr]:not([vertical]):not([compact])) ::slotted(:not(:last-child)){margin-right:var(\n--spectrum-actiongroup-button-gap-x,var(--spectrum-global-dimension-size-100)\n)}:host([dir=rtl]:not([vertical]):not([compact])) ::slotted(:not(:last-child)){margin-left:var(\n--spectrum-actiongroup-button-gap-x,var(--spectrum-global-dimension-size-100)\n)}:host([vertical]){display:inline-flex;flex-direction:column}:host([dir=ltr][vertical]) ::slotted(:not(:first-child)){margin-left:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([dir=rtl][vertical]) ::slotted(:not(:first-child)){margin-right:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([vertical]) ::slotted(:not(:first-child)){margin-top:var(\n--spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100)\n)}:host([dir=ltr][vertical][vertical]){margin-left:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([dir=rtl][vertical][vertical]){margin-right:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([vertical][vertical]){margin-top:var(\n--spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100)\n)}:host([dir=ltr][compact][quiet]) ::slotted(:not(:first-child)){margin-left:var(\n--spectrum-actiongroup-quiet-compact-button-gap\n)}:host([dir=rtl][compact][quiet]) ::slotted(:not(:first-child)){margin-right:var(\n--spectrum-actiongroup-quiet-compact-button-gap\n)}:host([compact][quiet]) ::slotted(:not(:first-child)){margin-top:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([dir=ltr][compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-left:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([dir=rtl][compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-right:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-top:var(\n--spectrum-actiongroup-quiet-compact-button-gap\n)}:host([compact]:not([quiet])){flex-wrap:nowrap}:host([compact]:not([quiet])) ::slotted(*){border-radius:0;position:relative;z-index:0}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){margin-right:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){margin-left:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){margin-left:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){margin-right:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){margin-right:0}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){margin-left:0}:host([compact]:not([quiet])) ::slotted([selected]){z-index:1}:host([compact]:not([quiet])) ::slotted(:hover){z-index:2}:host([compact]:not([quiet])) ::slotted(.focus-visible){z-index:3}:host([compact]:not([quiet])) ::slotted(:focus-visible){z-index:3}:host([dir=ltr][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-left:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-left:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([compact][vertical]:not([quiet])) ::slotted(*){border-radius:0}:host([compact][vertical]:not([quiet])) ::slotted(:not(:first-child)){margin-bottom:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2);margin-top:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([compact][vertical]:not([quiet])) ::slotted(:first-child){border-radius:0;margin-bottom:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([compact][vertical]:not([quiet])) ::slotted(:last-child){border-radius:0;margin-bottom:0;margin-top:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([justified]) ::slotted(*){flex:1}:host([dir][compact][vertical]) ::slotted(:nth-child(n)){margin-left:0;margin-right:0}:host([justified]) ::slotted(:not([role])),:host([vertical]) ::slotted(:not([role])){align-items:stretch;display:flex;flex-direction:column}:host([compact]:not([quiet])) ::slotted(:not([role])){--overriden-border-radius:0;--spectrum-actionbutton-s-quiet-textonly-border-radius:var(\n--overriden-border-radius\n);--spectrum-actionbutton-s-textonly-border-radius:var(\n--overriden-border-radius\n);--spectrum-actionbutton-m-quiet-textonly-border-radius:var(\n--overriden-border-radius\n);--spectrum-actionbutton-m-textonly-border-radius:var(\n--overriden-border-radius\n);--spectrum-actionbutton-l-quiet-textonly-border-radius:var(\n--overriden-border-radius\n);--spectrum-actionbutton-l-textonly-border-radius:var(\n--overriden-border-radius\n);--spectrum-actionbutton-xl-quiet-textonly-border-radius:var(\n--overriden-border-radius\n);--spectrum-actionbutton-xl-textonly-border-radius:var(\n--overriden-border-radius\n)}:host([compact][vertical]:not([quiet])) ::slotted(:not([role]):first-child){--overriden-border-radius:var(--spectrum-alias-border-radius-regular) var(--spectrum-alias-border-radius-regular) 0 0}:host([compact][vertical]:not([quiet])) ::slotted(:not([role]):last-child){--overriden-border-radius:0 0 var(--spectrum-alias-border-radius-regular) var(--spectrum-alias-border-radius-regular)}:host([dir=ltr][compact]:not([quiet]):not([vertical])) ::slotted(:not([role]):first-child){--overriden-border-radius:var(--spectrum-alias-border-radius-regular) 0 0 var(--spectrum-alias-border-radius-regular)}:host([dir=rtl][compact]:not([quiet]):not([vertical])) ::slotted(:not([role]):first-child){--overriden-border-radius:0 var(--spectrum-alias-border-radius-regular) var(--spectrum-alias-border-radius-regular) 0}:host([dir=ltr][compact]:not([quiet]):not([vertical])) ::slotted(:not([role]):last-child){--overriden-border-radius:0 var(--spectrum-alias-border-radius-regular) var(--spectrum-alias-border-radius-regular) 0}:host([dir=rtl][compact]:not([quiet]):not([vertical])) ::slotted(:not([role]):last-child){--overriden-border-radius:var(--spectrum-alias-border-radius-regular) 0 0 var(--spectrum-alias-border-radius-regular)}\n`"
370
+ "default": "css`\n:host{--spectrum-actiongroup-button-gap-reset:0;--spectrum-actiongroup-quiet-compact-button-gap:var(\n--spectrum-global-dimension-size-25\n)}:host{display:flex;flex-wrap:wrap}::slotted(*){flex-shrink:0}:host(:not([vertical]):not([compact])){margin-top:calc(var(\n--spectrum-actiongroup-button-gap-y,\nvar(--spectrum-alias-actiongroup-button-gap)\n)*-1)}:host(:not([vertical]):not([compact])) ::slotted(*){flex-shrink:0;margin-top:var(\n--spectrum-actiongroup-button-gap-y,var(--spectrum-alias-actiongroup-button-gap)\n)}:host([dir=ltr]:not([vertical]):not([compact])) ::slotted(:not(:last-child)){margin-right:var(\n--spectrum-actiongroup-button-gap-x,var(--spectrum-alias-actiongroup-button-gap)\n)}:host([dir=rtl]:not([vertical]):not([compact])) ::slotted(:not(:last-child)){margin-left:var(\n--spectrum-actiongroup-button-gap-x,var(--spectrum-alias-actiongroup-button-gap)\n)}:host([vertical]){display:inline-flex;flex-direction:column}:host([dir=ltr][vertical]) ::slotted(:not(:first-child)){margin-left:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([dir=rtl][vertical]) ::slotted(:not(:first-child)){margin-right:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([vertical]) ::slotted(:not(:first-child)){margin-top:var(\n--spectrum-actiongroup-button-gap-y,var(--spectrum-alias-actiongroup-button-gap)\n)}:host([dir=ltr][vertical][vertical]){margin-left:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([dir=rtl][vertical][vertical]){margin-right:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([vertical][vertical]){margin-top:var(\n--spectrum-actiongroup-button-gap-y,var(--spectrum-alias-actiongroup-button-gap)\n)}:host([dir=ltr][compact][quiet]) ::slotted(:not(:first-child)){margin-left:var(\n--spectrum-actiongroup-quiet-compact-button-gap\n)}:host([dir=rtl][compact][quiet]) ::slotted(:not(:first-child)){margin-right:var(\n--spectrum-actiongroup-quiet-compact-button-gap\n)}:host([compact][quiet]) ::slotted(:not(:first-child)){margin-top:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([dir=ltr][compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-left:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([dir=rtl][compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-right:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-top:var(\n--spectrum-actiongroup-quiet-compact-button-gap\n)}:host([compact]:not([quiet])){flex-wrap:nowrap}:host([compact]:not([quiet])) ::slotted(*){--spectrum-actionbutton-focus-ring-border-radius-adjusted:var(\n--spectrum-alias-border-radius-xsmall,var(--spectrum-global-dimension-size-10)\n);border-radius:0;position:relative;z-index:0}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){margin-right:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){margin-left:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([compact]:not([quiet])) ::slotted(:first-child){--spectrum-actionbutton-focus-ring-border-radius-adjusted:calc(var(\n--spectrum-actionbutton-m-quiet-textonly-border-radius,\nvar(--spectrum-alias-component-border-radius)\n) + var(\n--spectrum-actionbutton-m-textonly-focus-ring-gap,\nvar(--spectrum-alias-component-focusring-gap)\n)) var(\n--spectrum-alias-border-radius-xsmall,var(--spectrum-global-dimension-size-10)\n) var(\n--spectrum-alias-border-radius-xsmall,var(--spectrum-global-dimension-size-10)\n) calc(var(\n--spectrum-actionbutton-m-quiet-textonly-border-radius,\nvar(--spectrum-alias-component-border-radius)\n) + var(\n--spectrum-actionbutton-m-textonly-focus-ring-gap,\nvar(--spectrum-alias-component-focusring-gap)\n))}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){margin-left:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){margin-right:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){margin-right:0}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){margin-left:0}:host([compact]:not([quiet])) ::slotted(:last-child){--spectrum-actionbutton-focus-ring-border-radius-adjusted:var(\n--spectrum-alias-border-radius-xsmall,var(--spectrum-global-dimension-size-10)\n) calc(var(\n--spectrum-actionbutton-m-quiet-textonly-border-radius,\nvar(--spectrum-alias-component-border-radius)\n) + var(\n--spectrum-actionbutton-m-textonly-focus-ring-gap,\nvar(--spectrum-alias-component-focusring-gap)\n)) calc(var(\n--spectrum-actionbutton-m-quiet-textonly-border-radius,\nvar(--spectrum-alias-component-border-radius)\n) + var(\n--spectrum-actionbutton-m-textonly-focus-ring-gap,\nvar(--spectrum-alias-component-focusring-gap)\n)) var(\n--spectrum-alias-border-radius-xsmall,var(--spectrum-global-dimension-size-10)\n)}:host([compact]:not([quiet])) ::slotted([selected]){z-index:1}:host([compact]:not([quiet])) ::slotted(:hover){z-index:2}:host([compact]:not([quiet])) ::slotted(.focus-visible){z-index:3}:host([compact]:not([quiet])) ::slotted(:focus-visible){z-index:3}:host([dir=ltr][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-left:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-left:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([compact][vertical]:not([quiet])) ::slotted(*){border-radius:0}:host([compact][vertical]:not([quiet])) ::slotted(:not(:first-child)){margin-bottom:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2);margin-top:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([compact][vertical]:not([quiet])) ::slotted(:first-child){border-radius:0;margin-bottom:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([compact][vertical]:not([quiet])) ::slotted(:last-child){border-radius:0;margin-bottom:0;margin-top:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([justified]) ::slotted(*){flex:1}:host([dir][compact][vertical]) ::slotted(:nth-child(n)){margin-left:0;margin-right:0}:host([justified]) ::slotted(:not([role])),:host([vertical]) ::slotted(:not([role])){align-items:stretch;display:flex;flex-direction:column}:host([compact]:not([quiet])) ::slotted(:not([role])){--overriden-border-radius:0;--spectrum-actionbutton-s-quiet-textonly-border-radius:var(\n--overriden-border-radius\n);--spectrum-actionbutton-s-textonly-border-radius:var(\n--overriden-border-radius\n);--spectrum-actionbutton-m-quiet-textonly-border-radius:var(\n--overriden-border-radius\n);--spectrum-actionbutton-m-textonly-border-radius:var(\n--overriden-border-radius\n);--spectrum-actionbutton-l-quiet-textonly-border-radius:var(\n--overriden-border-radius\n);--spectrum-actionbutton-l-textonly-border-radius:var(\n--overriden-border-radius\n);--spectrum-actionbutton-xl-quiet-textonly-border-radius:var(\n--overriden-border-radius\n);--spectrum-actionbutton-xl-textonly-border-radius:var(\n--overriden-border-radius\n)}:host([compact][vertical]:not([quiet])) ::slotted(:not([role]):first-child){--overriden-border-radius:var(--spectrum-alias-component-border-radius) var(--spectrum-alias-component-border-radius) 0 0}:host([compact][vertical]:not([quiet])) ::slotted(:not([role]):last-child){--overriden-border-radius:0 0 var(--spectrum-alias-component-border-radius) var(--spectrum-alias-component-border-radius)}:host([dir=ltr][compact]:not([quiet]):not([vertical])) ::slotted(:not([role]):first-child){--overriden-border-radius:var(--spectrum-alias-component-border-radius) 0 0 var(--spectrum-alias-component-border-radius)}:host([dir=rtl][compact]:not([quiet]):not([vertical])) ::slotted(:not([role]):first-child){--overriden-border-radius:0 var(--spectrum-alias-component-border-radius) var(--spectrum-alias-component-border-radius) 0}:host([dir=ltr][compact]:not([quiet]):not([vertical])) ::slotted(:not([role]):last-child){--overriden-border-radius:0 var(--spectrum-alias-component-border-radius) var(--spectrum-alias-component-border-radius) 0}:host([dir=rtl][compact]:not([quiet]):not([vertical])) ::slotted(:not([role]):last-child){--overriden-border-radius:var(--spectrum-alias-component-border-radius) 0 0 var(--spectrum-alias-component-border-radius)}:host([compact]:not([quiet])) ::slotted(*){--spectrum-actionbutton-after-border-radius:0}:host([compact][vertical]:not([quiet])) ::slotted(:first-child){--spectrum-actionbutton-after-border-radius:var(\n--spectrum-alias-component-border-radius\n) var(--spectrum-alias-component-border-radius) 0 0}:host([compact][vertical]:not([quiet])) ::slotted(:last-child){--spectrum-actionbutton-after-border-radius:0 0 var(--spectrum-alias-component-border-radius) var(--spectrum-alias-component-border-radius)}:host([dir=ltr][compact]:not([quiet]):not([vertical])) ::slotted(:first-child){--spectrum-actionbutton-after-border-radius:var(\n--spectrum-alias-component-border-radius\n) 0 0 var(--spectrum-alias-component-border-radius)}:host([dir=rtl][compact]:not([quiet]):not([vertical])) ::slotted(:first-child){--spectrum-actionbutton-after-border-radius:0 var(--spectrum-alias-component-border-radius) var(--spectrum-alias-component-border-radius) 0}:host([dir=ltr][compact]:not([quiet]):not([vertical])) ::slotted(:last-child){--spectrum-actionbutton-after-border-radius:0 var(--spectrum-alias-component-border-radius) var(--spectrum-alias-component-border-radius) 0}:host([dir=rtl][compact]:not([quiet]):not([vertical])) ::slotted(:last-child){--spectrum-actionbutton-after-border-radius:var(\n--spectrum-alias-component-border-radius\n) 0 0 var(--spectrum-alias-component-border-radius)}\n`"
371
371
  }
372
372
  ],
373
373
  "exports": [
@@ -403,7 +403,7 @@
403
403
  {
404
404
  "kind": "variable",
405
405
  "name": "styles",
406
- "default": "css`\n:host{--spectrum-actiongroup-button-gap-reset:0;--spectrum-actiongroup-quiet-compact-button-gap:var(\n--spectrum-global-dimension-size-25\n)}:host{display:flex;flex-wrap:wrap}::slotted(*){flex-shrink:0}:host(:not([vertical]):not([compact])){margin-top:calc(var(\n--spectrum-actiongroup-button-gap-y,\nvar(--spectrum-global-dimension-size-100)\n)*-1)}:host(:not([vertical]):not([compact])) ::slotted(*){flex-shrink:0;margin-top:var(\n--spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100)\n)}:host([dir=ltr]:not([vertical]):not([compact])) ::slotted(:not(:last-child)){margin-right:var(\n--spectrum-actiongroup-button-gap-x,var(--spectrum-global-dimension-size-100)\n)}:host([dir=rtl]:not([vertical]):not([compact])) ::slotted(:not(:last-child)){margin-left:var(\n--spectrum-actiongroup-button-gap-x,var(--spectrum-global-dimension-size-100)\n)}:host([vertical]){display:inline-flex;flex-direction:column}:host([dir=ltr][vertical]) ::slotted(:not(:first-child)){margin-left:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([dir=rtl][vertical]) ::slotted(:not(:first-child)){margin-right:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([vertical]) ::slotted(:not(:first-child)){margin-top:var(\n--spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100)\n)}:host([dir=ltr][vertical][vertical]){margin-left:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([dir=rtl][vertical][vertical]){margin-right:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([vertical][vertical]){margin-top:var(\n--spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100)\n)}:host([dir=ltr][compact][quiet]) ::slotted(:not(:first-child)){margin-left:var(\n--spectrum-actiongroup-quiet-compact-button-gap\n)}:host([dir=rtl][compact][quiet]) ::slotted(:not(:first-child)){margin-right:var(\n--spectrum-actiongroup-quiet-compact-button-gap\n)}:host([compact][quiet]) ::slotted(:not(:first-child)){margin-top:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([dir=ltr][compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-left:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([dir=rtl][compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-right:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-top:var(\n--spectrum-actiongroup-quiet-compact-button-gap\n)}:host([compact]:not([quiet])){flex-wrap:nowrap}:host([compact]:not([quiet])) ::slotted(*){border-radius:0;position:relative;z-index:0}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){margin-right:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){margin-left:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){margin-left:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){margin-right:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){margin-right:0}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){margin-left:0}:host([compact]:not([quiet])) ::slotted([selected]){z-index:1}:host([compact]:not([quiet])) ::slotted(:hover){z-index:2}:host([compact]:not([quiet])) ::slotted(.focus-visible){z-index:3}:host([compact]:not([quiet])) ::slotted(:focus-visible){z-index:3}:host([dir=ltr][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-left:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-left:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([compact][vertical]:not([quiet])) ::slotted(*){border-radius:0}:host([compact][vertical]:not([quiet])) ::slotted(:not(:first-child)){margin-bottom:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2);margin-top:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([compact][vertical]:not([quiet])) ::slotted(:first-child){border-radius:0;margin-bottom:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([compact][vertical]:not([quiet])) ::slotted(:last-child){border-radius:0;margin-bottom:0;margin-top:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([justified]) ::slotted(*){flex:1}\n`"
406
+ "default": "css`\n:host{--spectrum-actiongroup-button-gap-reset:0;--spectrum-actiongroup-quiet-compact-button-gap:var(\n--spectrum-global-dimension-size-25\n)}:host{display:flex;flex-wrap:wrap}::slotted(*){flex-shrink:0}:host(:not([vertical]):not([compact])){margin-top:calc(var(\n--spectrum-actiongroup-button-gap-y,\nvar(--spectrum-alias-actiongroup-button-gap)\n)*-1)}:host(:not([vertical]):not([compact])) ::slotted(*){flex-shrink:0;margin-top:var(\n--spectrum-actiongroup-button-gap-y,var(--spectrum-alias-actiongroup-button-gap)\n)}:host([dir=ltr]:not([vertical]):not([compact])) ::slotted(:not(:last-child)){margin-right:var(\n--spectrum-actiongroup-button-gap-x,var(--spectrum-alias-actiongroup-button-gap)\n)}:host([dir=rtl]:not([vertical]):not([compact])) ::slotted(:not(:last-child)){margin-left:var(\n--spectrum-actiongroup-button-gap-x,var(--spectrum-alias-actiongroup-button-gap)\n)}:host([vertical]){display:inline-flex;flex-direction:column}:host([dir=ltr][vertical]) ::slotted(:not(:first-child)){margin-left:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([dir=rtl][vertical]) ::slotted(:not(:first-child)){margin-right:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([vertical]) ::slotted(:not(:first-child)){margin-top:var(\n--spectrum-actiongroup-button-gap-y,var(--spectrum-alias-actiongroup-button-gap)\n)}:host([dir=ltr][vertical][vertical]){margin-left:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([dir=rtl][vertical][vertical]){margin-right:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([vertical][vertical]){margin-top:var(\n--spectrum-actiongroup-button-gap-y,var(--spectrum-alias-actiongroup-button-gap)\n)}:host([dir=ltr][compact][quiet]) ::slotted(:not(:first-child)){margin-left:var(\n--spectrum-actiongroup-quiet-compact-button-gap\n)}:host([dir=rtl][compact][quiet]) ::slotted(:not(:first-child)){margin-right:var(\n--spectrum-actiongroup-quiet-compact-button-gap\n)}:host([compact][quiet]) ::slotted(:not(:first-child)){margin-top:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([dir=ltr][compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-left:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([dir=rtl][compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-right:var(\n--spectrum-actiongroup-button-gap-reset\n)}:host([compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-top:var(\n--spectrum-actiongroup-quiet-compact-button-gap\n)}:host([compact]:not([quiet])){flex-wrap:nowrap}:host([compact]:not([quiet])) ::slotted(*){--spectrum-actionbutton-focus-ring-border-radius-adjusted:var(\n--spectrum-alias-border-radius-xsmall,var(--spectrum-global-dimension-size-10)\n);border-radius:0;position:relative;z-index:0}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){margin-right:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){margin-left:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([compact]:not([quiet])) ::slotted(:first-child){--spectrum-actionbutton-focus-ring-border-radius-adjusted:calc(var(\n--spectrum-actionbutton-m-quiet-textonly-border-radius,\nvar(--spectrum-alias-component-border-radius)\n) + var(\n--spectrum-actionbutton-m-textonly-focus-ring-gap,\nvar(--spectrum-alias-component-focusring-gap)\n)) var(\n--spectrum-alias-border-radius-xsmall,var(--spectrum-global-dimension-size-10)\n) var(\n--spectrum-alias-border-radius-xsmall,var(--spectrum-global-dimension-size-10)\n) calc(var(\n--spectrum-actionbutton-m-quiet-textonly-border-radius,\nvar(--spectrum-alias-component-border-radius)\n) + var(\n--spectrum-actionbutton-m-textonly-focus-ring-gap,\nvar(--spectrum-alias-component-focusring-gap)\n))}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){margin-left:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){margin-right:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){margin-right:0}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){margin-left:0}:host([compact]:not([quiet])) ::slotted(:last-child){--spectrum-actionbutton-focus-ring-border-radius-adjusted:var(\n--spectrum-alias-border-radius-xsmall,var(--spectrum-global-dimension-size-10)\n) calc(var(\n--spectrum-actionbutton-m-quiet-textonly-border-radius,\nvar(--spectrum-alias-component-border-radius)\n) + var(\n--spectrum-actionbutton-m-textonly-focus-ring-gap,\nvar(--spectrum-alias-component-focusring-gap)\n)) calc(var(\n--spectrum-actionbutton-m-quiet-textonly-border-radius,\nvar(--spectrum-alias-component-border-radius)\n) + var(\n--spectrum-actionbutton-m-textonly-focus-ring-gap,\nvar(--spectrum-alias-component-focusring-gap)\n)) var(\n--spectrum-alias-border-radius-xsmall,var(--spectrum-global-dimension-size-10)\n)}:host([compact]:not([quiet])) ::slotted([selected]){z-index:1}:host([compact]:not([quiet])) ::slotted(:hover){z-index:2}:host([compact]:not([quiet])) ::slotted(.focus-visible){z-index:3}:host([compact]:not([quiet])) ::slotted(:focus-visible){z-index:3}:host([dir=ltr][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-left:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-left:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([compact][vertical]:not([quiet])) ::slotted(*){border-radius:0}:host([compact][vertical]:not([quiet])) ::slotted(:not(:first-child)){margin-bottom:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2);margin-top:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([compact][vertical]:not([quiet])) ::slotted(:first-child){border-radius:0;margin-bottom:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(\n--spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)\n)}:host([compact][vertical]:not([quiet])) ::slotted(:last-child){border-radius:0;margin-bottom:0;margin-top:calc(var(\n--spectrum-actionbutton-m-texticon-border-size,\nvar(--spectrum-alias-border-size-thin)\n)*-1/2)}:host([justified]) ::slotted(*){flex:1}\n`"
407
407
  }
408
408
  ],
409
409
  "exports": [
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/action-group",
3
- "version": "0.7.1",
3
+ "version": "0.8.0",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -44,18 +44,18 @@
44
44
  "lit-html"
45
45
  ],
46
46
  "dependencies": {
47
- "@spectrum-web-components/action-button": "^0.7.3",
48
- "@spectrum-web-components/base": "^0.5.1",
49
- "@spectrum-web-components/reactive-controllers": "^0.2.0",
47
+ "@spectrum-web-components/action-button": "^0.8.0",
48
+ "@spectrum-web-components/base": "^0.5.3",
49
+ "@spectrum-web-components/reactive-controllers": "^0.2.1",
50
50
  "tslib": "^2.0.0"
51
51
  },
52
52
  "devDependencies": {
53
- "@spectrum-css/actiongroup": "^1.0.13"
53
+ "@spectrum-css/actiongroup": "^1.0.17"
54
54
  },
55
55
  "types": "./src/index.d.ts",
56
56
  "customElements": "custom-elements.json",
57
57
  "sideEffects": [
58
58
  "./sp-*.js"
59
59
  ],
60
- "gitHead": "f23b15ec952d7450272a8275524c905e028b4ddc"
60
+ "gitHead": "57aba8030b6af96af4015a0aa830e342a17dc219"
61
61
  }
@@ -1,6 +0,0 @@
1
- import { ActionGroup } from './src/ActionGroup.js';
2
- declare global {
3
- interface HTMLElementTagNameMap {
4
- 'sp-action-group': ActionGroup;
5
- }
6
- }
@@ -1,14 +0,0 @@
1
- /*
2
- Copyright 2020 Adobe. All rights reserved.
3
- This file is licensed to you under the Apache License, Version 2.0 (the "License");
4
- you may not use this file except in compliance with the License. You may obtain a copy
5
- of the License at http://www.apache.org/licenses/LICENSE-2.0
6
-
7
- Unless required by applicable law or agreed to in writing, software distributed under
8
- the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9
- OF ANY KIND, either express or implied. See the License for the specific language
10
- governing permissions and limitations under the License.
11
- */
12
- import { ActionGroup } from './src/ActionGroup.js';
13
- customElements.define('sp-action-group', ActionGroup);
14
- //# sourceMappingURL=sp-action-group.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"sp-action-group.js","sourceRoot":"","sources":["sp-action-group.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AAEF,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD,cAAc,CAAC,MAAM,CAAC,iBAAiB,EAAE,WAAW,CAAC,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { ActionGroup } from './src/ActionGroup.js';\n\ncustomElements.define('sp-action-group', ActionGroup);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sp-action-group': ActionGroup;\n }\n}\n"]}
@@ -1,39 +0,0 @@
1
- import { CSSResultArray, PropertyValues, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
2
- import type { ActionButton } from '@spectrum-web-components/action-button';
3
- import { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';
4
- /**
5
- * @element sp-action-group
6
- * @slot - the sp-action-button elements that make up the group
7
- *
8
- * @fires change - Announces that selection state has been changed by user
9
- */
10
- export declare class ActionGroup extends SpectrumElement {
11
- static get styles(): CSSResultArray;
12
- set buttons(tabs: ActionButton[]);
13
- get buttons(): ActionButton[];
14
- _buttons: ActionButton[];
15
- protected _buttonSelector: string;
16
- rovingTabindexController: RovingTabindexController<ActionButton>;
17
- compact: boolean;
18
- emphasized: boolean;
19
- justified: boolean;
20
- label: string;
21
- quiet: boolean;
22
- selects: undefined | 'single' | 'multiple';
23
- vertical: boolean;
24
- selected: string[];
25
- private dispatchChange;
26
- private setSelected;
27
- focus(options?: FocusOptions): void;
28
- private deselectSelectedButtons;
29
- private handleClick;
30
- private manageSelects;
31
- protected render(): TemplateResult;
32
- protected firstUpdated(changes: PropertyValues): void;
33
- protected updated(changes: PropertyValues): void;
34
- private manageChildren;
35
- private manageButtons;
36
- connectedCallback(): void;
37
- disconnectedCallback(): void;
38
- private observer;
39
- }
@@ -1,305 +0,0 @@
1
- /*
2
- Copyright 2020 Adobe. All rights reserved.
3
- This file is licensed to you under the Apache License, Version 2.0 (the "License");
4
- you may not use this file except in compliance with the License. You may obtain a copy
5
- of the License at http://www.apache.org/licenses/LICENSE-2.0
6
-
7
- Unless required by applicable law or agreed to in writing, software distributed under
8
- the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9
- OF ANY KIND, either express or implied. See the License for the specific language
10
- governing permissions and limitations under the License.
11
- */
12
- import { __decorate } from "tslib";
13
- import { html, SpectrumElement, } from '@spectrum-web-components/base';
14
- import { property } from '@spectrum-web-components/base/src/decorators.js';
15
- import { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';
16
- import styles from './action-group.css.js';
17
- const EMPTY_SELECTION = [];
18
- /**
19
- * @element sp-action-group
20
- * @slot - the sp-action-button elements that make up the group
21
- *
22
- * @fires change - Announces that selection state has been changed by user
23
- */
24
- export class ActionGroup extends SpectrumElement {
25
- constructor() {
26
- super(...arguments);
27
- this._buttons = [];
28
- this._buttonSelector = 'sp-action-button';
29
- this.rovingTabindexController = new RovingTabindexController(this, {
30
- focusInIndex: (elements) => {
31
- let firstEnabledIndex = -1;
32
- const firstSelectedIndex = elements.findIndex((el, index) => {
33
- if (!elements[firstEnabledIndex] && !el.disabled) {
34
- firstEnabledIndex = index;
35
- }
36
- return el.selected && !el.disabled;
37
- });
38
- return elements[firstSelectedIndex]
39
- ? firstSelectedIndex
40
- : firstEnabledIndex;
41
- },
42
- elements: () => this.buttons,
43
- isFocusableElement: (el) => !el.disabled,
44
- });
45
- this.compact = false;
46
- this.emphasized = false;
47
- this.justified = false;
48
- this.label = '';
49
- this.quiet = false;
50
- this.vertical = false;
51
- this.selected = EMPTY_SELECTION;
52
- this.manageButtons = () => {
53
- const slot = this.shadowRoot.querySelector('slot');
54
- if (!slot)
55
- return;
56
- const assignedElements = slot.assignedElements({ flatten: true });
57
- const buttons = assignedElements.reduce((acc, el) => {
58
- if (el.matches(this._buttonSelector)) {
59
- acc.push(el);
60
- }
61
- else {
62
- const buttonDescendents = Array.from(el.querySelectorAll(`:scope > ${this._buttonSelector}`));
63
- acc.push(...buttonDescendents);
64
- }
65
- return acc;
66
- }, []);
67
- this.buttons = buttons;
68
- // <selected> element merges selected so following paradigm here
69
- const currentlySelectedButtons = [];
70
- this.buttons.forEach((button) => {
71
- if (button.selected) {
72
- currentlySelectedButtons.push(button.value);
73
- }
74
- });
75
- this.selected = this.selected.concat(currentlySelectedButtons);
76
- this.manageChildren();
77
- this.manageSelects();
78
- };
79
- }
80
- static get styles() {
81
- return [styles];
82
- }
83
- set buttons(tabs) {
84
- if (tabs === this.buttons)
85
- return;
86
- this._buttons = tabs;
87
- this.rovingTabindexController.clearElementCache();
88
- }
89
- get buttons() {
90
- return this._buttons;
91
- }
92
- dispatchChange(old) {
93
- const applyDefault = this.dispatchEvent(new Event('change', {
94
- bubbles: true,
95
- composed: true,
96
- cancelable: true,
97
- }));
98
- if (!applyDefault) {
99
- this.selected = old;
100
- this.buttons.map((button) => {
101
- button.selected = this.selected.includes(button.value);
102
- });
103
- }
104
- }
105
- setSelected(selected) {
106
- if (selected === this.selected)
107
- return;
108
- const old = this.selected;
109
- this.selected = selected;
110
- this.dispatchChange(old);
111
- }
112
- focus(options) {
113
- this.rovingTabindexController.focus(options);
114
- }
115
- deselectSelectedButtons() {
116
- const selected = [
117
- ...this.querySelectorAll('[selected]'),
118
- ];
119
- selected.forEach((el) => {
120
- el.selected = false;
121
- el.tabIndex = -1;
122
- el.setAttribute('aria-checked', 'false');
123
- });
124
- }
125
- handleClick(event) {
126
- const target = event.target;
127
- if (typeof target.value === 'undefined') {
128
- return;
129
- }
130
- switch (this.selects) {
131
- case 'single': {
132
- this.deselectSelectedButtons();
133
- target.selected = true;
134
- target.tabIndex = 0;
135
- target.setAttribute('aria-checked', 'true');
136
- this.setSelected([target.value]);
137
- target.focus();
138
- break;
139
- }
140
- case 'multiple': {
141
- const selected = [...this.selected];
142
- target.selected = !target.selected;
143
- target.setAttribute('aria-checked', target.selected ? 'true' : 'false');
144
- if (target.selected) {
145
- selected.push(target.value);
146
- }
147
- else {
148
- selected.splice(this.selected.indexOf(target.value), 1);
149
- }
150
- this.setSelected(selected);
151
- this.buttons.forEach((button) => {
152
- button.tabIndex = -1;
153
- });
154
- target.tabIndex = 0;
155
- break;
156
- }
157
- default:
158
- break;
159
- }
160
- }
161
- async manageSelects() {
162
- if (!this.buttons.length) {
163
- return;
164
- }
165
- const options = this.buttons;
166
- switch (this.selects) {
167
- case 'single': {
168
- this.setAttribute('role', 'radiogroup');
169
- const selections = [];
170
- const updates = options.map(async (option) => {
171
- await option.updateComplete;
172
- option.setAttribute('role', 'radio');
173
- option.setAttribute('aria-checked', option.selected ? 'true' : 'false');
174
- if (option.selected) {
175
- selections.push(option);
176
- }
177
- });
178
- await Promise.all(updates);
179
- const selected = selections.map((button) => {
180
- return button.value;
181
- });
182
- this.selected = selected || EMPTY_SELECTION;
183
- break;
184
- }
185
- case 'multiple': {
186
- this.setAttribute('role', 'group');
187
- const selection = [];
188
- const selections = [];
189
- const updates = options.map(async (option) => {
190
- await option.updateComplete;
191
- option.setAttribute('role', 'checkbox');
192
- option.setAttribute('aria-checked', option.selected ? 'true' : 'false');
193
- if (option.selected) {
194
- selection.push(option.value);
195
- selections.push(option);
196
- }
197
- });
198
- await Promise.all(updates);
199
- const selected = !!selection.length
200
- ? selection
201
- : EMPTY_SELECTION;
202
- this.selected = selected;
203
- break;
204
- }
205
- default:
206
- // if user defines .selected
207
- if (this.selected.length) {
208
- const selections = [];
209
- const updates = options.map(async (option) => {
210
- await option.updateComplete;
211
- option.setAttribute('aria-checked', option.selected ? 'true' : 'false');
212
- option.setAttribute('role', 'button');
213
- if (option.selected) {
214
- selections.push(option);
215
- }
216
- });
217
- await Promise.all(updates);
218
- this.selected = selections.map((button) => {
219
- return button.value;
220
- });
221
- }
222
- else {
223
- this.buttons.forEach((option) => {
224
- option.setAttribute('role', 'button');
225
- });
226
- this.removeAttribute('role');
227
- break;
228
- }
229
- }
230
- }
231
- render() {
232
- return html `
233
- <slot role="presentation" @slotchange=${this.manageButtons}></slot>
234
- `;
235
- }
236
- firstUpdated(changes) {
237
- super.firstUpdated(changes);
238
- this.addEventListener('click', this.handleClick);
239
- }
240
- updated(changes) {
241
- super.updated(changes);
242
- if (changes.has('selects')) {
243
- this.manageSelects();
244
- this.manageChildren();
245
- }
246
- if ((changes.has('quiet') && this.quiet) ||
247
- (changes.has('emphasized') && this.emphasized)) {
248
- this.manageChildren();
249
- }
250
- // Update `aria-label` when `label` available or not first `updated`
251
- if (changes.has('label') &&
252
- (this.label || typeof changes.get('label') !== 'undefined')) {
253
- if (this.label.length) {
254
- this.setAttribute('aria-label', this.label);
255
- }
256
- else {
257
- this.removeAttribute('aria-label');
258
- }
259
- }
260
- }
261
- manageChildren() {
262
- this.buttons.forEach((button) => {
263
- button.quiet = this.quiet;
264
- button.emphasized = this.emphasized;
265
- button.selected = this.selected.includes(button.value);
266
- });
267
- }
268
- connectedCallback() {
269
- super.connectedCallback();
270
- if (!this.observer) {
271
- this.observer = new MutationObserver(this.manageButtons);
272
- this.manageButtons();
273
- }
274
- this.observer.observe(this, { childList: true, subtree: true });
275
- }
276
- disconnectedCallback() {
277
- this.observer.disconnect();
278
- super.disconnectedCallback();
279
- }
280
- }
281
- __decorate([
282
- property({ type: Boolean, reflect: true })
283
- ], ActionGroup.prototype, "compact", void 0);
284
- __decorate([
285
- property({ type: Boolean, reflect: true })
286
- ], ActionGroup.prototype, "emphasized", void 0);
287
- __decorate([
288
- property({ type: Boolean, reflect: true })
289
- ], ActionGroup.prototype, "justified", void 0);
290
- __decorate([
291
- property({ type: String })
292
- ], ActionGroup.prototype, "label", void 0);
293
- __decorate([
294
- property({ type: Boolean, reflect: true })
295
- ], ActionGroup.prototype, "quiet", void 0);
296
- __decorate([
297
- property({ type: String })
298
- ], ActionGroup.prototype, "selects", void 0);
299
- __decorate([
300
- property({ type: Boolean, reflect: true })
301
- ], ActionGroup.prototype, "vertical", void 0);
302
- __decorate([
303
- property({ type: Array })
304
- ], ActionGroup.prototype, "selected", void 0);
305
- //# sourceMappingURL=ActionGroup.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ActionGroup.js","sourceRoot":"","sources":["ActionGroup.ts"],"names":[],"mappings":"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","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport type { ActionButton } from '@spectrum-web-components/action-button';\nimport { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';\n\nimport styles from './action-group.css.js';\n\nconst EMPTY_SELECTION: string[] = [];\n\n/**\n * @element sp-action-group\n * @slot - the sp-action-button elements that make up the group\n *\n * @fires change - Announces that selection state has been changed by user\n */\nexport class ActionGroup extends SpectrumElement {\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n public set buttons(tabs: ActionButton[]) {\n if (tabs === this.buttons) return;\n this._buttons = tabs;\n this.rovingTabindexController.clearElementCache();\n }\n\n public get buttons(): ActionButton[] {\n return this._buttons;\n }\n\n public _buttons: ActionButton[] = [];\n\n protected _buttonSelector = 'sp-action-button';\n\n rovingTabindexController = new RovingTabindexController<ActionButton>(\n this,\n {\n focusInIndex: (elements: ActionButton[]) => {\n let firstEnabledIndex = -1;\n const firstSelectedIndex = elements.findIndex((el, index) => {\n if (!elements[firstEnabledIndex] && !el.disabled) {\n firstEnabledIndex = index;\n }\n return el.selected && !el.disabled;\n });\n return elements[firstSelectedIndex]\n ? firstSelectedIndex\n : firstEnabledIndex;\n },\n elements: () => this.buttons,\n isFocusableElement: (el: ActionButton) => !el.disabled,\n }\n );\n\n @property({ type: Boolean, reflect: true })\n public compact = false;\n\n @property({ type: Boolean, reflect: true })\n public emphasized = false;\n\n @property({ type: Boolean, reflect: true })\n public justified = false;\n\n @property({ type: String })\n public label = '';\n\n @property({ type: Boolean, reflect: true })\n public quiet = false;\n\n @property({ type: String })\n public selects: undefined | 'single' | 'multiple';\n\n @property({ type: Boolean, reflect: true })\n public vertical = false;\n\n @property({ type: Array })\n public selected: string[] = EMPTY_SELECTION;\n\n private dispatchChange(old: string[]): void {\n const applyDefault = this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n composed: true,\n cancelable: true,\n })\n );\n\n if (!applyDefault) {\n this.selected = old;\n this.buttons.map((button) => {\n button.selected = this.selected.includes(button.value);\n });\n }\n }\n\n private setSelected(selected: string[]): void {\n if (selected === this.selected) return;\n\n const old = this.selected;\n this.selected = selected;\n this.dispatchChange(old);\n }\n\n public focus(options?: FocusOptions): void {\n this.rovingTabindexController.focus(options);\n }\n\n private deselectSelectedButtons(): void {\n const selected = [\n ...this.querySelectorAll('[selected]'),\n ] as ActionButton[];\n selected.forEach((el) => {\n el.selected = false;\n el.tabIndex = -1;\n el.setAttribute('aria-checked', 'false');\n });\n }\n\n private handleClick(event: Event): void {\n const target = event.target as ActionButton;\n if (typeof target.value === 'undefined') {\n return;\n }\n switch (this.selects) {\n case 'single': {\n this.deselectSelectedButtons();\n target.selected = true;\n target.tabIndex = 0;\n target.setAttribute('aria-checked', 'true');\n this.setSelected([target.value]);\n target.focus();\n break;\n }\n case 'multiple': {\n const selected = [...this.selected];\n target.selected = !target.selected;\n target.setAttribute(\n 'aria-checked',\n target.selected ? 'true' : 'false'\n );\n if (target.selected) {\n selected.push(target.value);\n } else {\n selected.splice(this.selected.indexOf(target.value), 1);\n }\n this.setSelected(selected);\n\n this.buttons.forEach((button) => {\n button.tabIndex = -1;\n });\n\n target.tabIndex = 0;\n\n break;\n }\n default:\n break;\n }\n }\n\n private async manageSelects(): Promise<void> {\n if (!this.buttons.length) {\n return;\n }\n\n const options = this.buttons;\n switch (this.selects) {\n case 'single': {\n this.setAttribute('role', 'radiogroup');\n const selections: ActionButton[] = [];\n const updates = options.map(async (option) => {\n await option.updateComplete;\n option.setAttribute('role', 'radio');\n option.setAttribute(\n 'aria-checked',\n option.selected ? 'true' : 'false'\n );\n if (option.selected) {\n selections.push(option);\n }\n });\n await Promise.all(updates);\n\n const selected = selections.map((button) => {\n return button.value;\n });\n\n this.selected = selected || EMPTY_SELECTION;\n break;\n }\n case 'multiple': {\n this.setAttribute('role', 'group');\n const selection: string[] = [];\n const selections: ActionButton[] = [];\n const updates = options.map(async (option) => {\n await option.updateComplete;\n option.setAttribute('role', 'checkbox');\n option.setAttribute(\n 'aria-checked',\n option.selected ? 'true' : 'false'\n );\n if (option.selected) {\n selection.push(option.value);\n selections.push(option);\n }\n });\n await Promise.all(updates);\n const selected = !!selection.length\n ? selection\n : EMPTY_SELECTION;\n this.selected = selected;\n break;\n }\n default:\n // if user defines .selected\n if (this.selected.length) {\n const selections: ActionButton[] = [];\n const updates = options.map(async (option) => {\n await option.updateComplete;\n option.setAttribute(\n 'aria-checked',\n option.selected ? 'true' : 'false'\n );\n option.setAttribute('role', 'button');\n if (option.selected) {\n selections.push(option);\n }\n });\n await Promise.all(updates);\n\n this.selected = selections.map((button) => {\n return button.value;\n });\n } else {\n this.buttons.forEach((option) => {\n option.setAttribute('role', 'button');\n });\n this.removeAttribute('role');\n break;\n }\n }\n }\n\n protected render(): TemplateResult {\n return html`\n <slot role=\"presentation\" @slotchange=${this.manageButtons}></slot>\n `;\n }\n\n protected firstUpdated(changes: PropertyValues): void {\n super.firstUpdated(changes);\n this.addEventListener('click', this.handleClick);\n }\n\n protected updated(changes: PropertyValues): void {\n super.updated(changes);\n if (changes.has('selects')) {\n this.manageSelects();\n this.manageChildren();\n }\n if (\n (changes.has('quiet') && this.quiet) ||\n (changes.has('emphasized') && this.emphasized)\n ) {\n this.manageChildren();\n }\n // Update `aria-label` when `label` available or not first `updated`\n if (\n changes.has('label') &&\n (this.label || typeof changes.get('label') !== 'undefined')\n ) {\n if (this.label.length) {\n this.setAttribute('aria-label', this.label);\n } else {\n this.removeAttribute('aria-label');\n }\n }\n }\n\n private manageChildren(): void {\n this.buttons.forEach((button) => {\n button.quiet = this.quiet;\n button.emphasized = this.emphasized;\n button.selected = this.selected.includes(button.value);\n });\n }\n\n private manageButtons = (): void => {\n const slot = this.shadowRoot.querySelector('slot');\n if (!slot) return;\n const assignedElements = slot.assignedElements({ flatten: true });\n const buttons = assignedElements.reduce((acc: unknown[], el) => {\n if (el.matches(this._buttonSelector)) {\n acc.push(el);\n } else {\n const buttonDescendents = Array.from(\n el.querySelectorAll(`:scope > ${this._buttonSelector}`)\n );\n acc.push(...buttonDescendents);\n }\n return acc;\n }, []);\n this.buttons = buttons as ActionButton[];\n // <selected> element merges selected so following paradigm here\n const currentlySelectedButtons: string[] = [];\n this.buttons.forEach((button: ActionButton) => {\n if (button.selected) {\n currentlySelectedButtons.push(button.value);\n }\n });\n this.selected = this.selected.concat(currentlySelectedButtons);\n this.manageChildren();\n this.manageSelects();\n };\n\n public connectedCallback(): void {\n super.connectedCallback();\n if (!this.observer) {\n this.observer = new MutationObserver(this.manageButtons);\n this.manageButtons();\n }\n this.observer.observe(this, { childList: true, subtree: true });\n }\n\n public disconnectedCallback(): void {\n this.observer.disconnect();\n super.disconnectedCallback();\n }\n\n private observer!: MutationObserver;\n}\n"]}
@@ -1,2 +0,0 @@
1
- declare const styles: import("@spectrum-web-components/base").CSSResult;
2
- export default styles;