@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.
Files changed (21) hide show
  1. package/custom-elements.json +2 -2
  2. package/package.json +6 -6
  3. package/sp-action-group.d.ts +0 -6
  4. package/sp-action-group.js +0 -14
  5. package/sp-action-group.js.map +0 -1
  6. package/src/ActionGroup.d.ts +0 -39
  7. package/src/ActionGroup.js +0 -305
  8. package/src/ActionGroup.js.map +0 -1
  9. package/src/action-group.css.d.ts +0 -2
  10. package/src/action-group.css.js +0 -136
  11. package/src/action-group.css.js.map +0 -1
  12. package/src/index.d.ts +0 -1
  13. package/src/index.js +0 -13
  14. package/src/index.js.map +0 -1
  15. package/src/spectrum-action-group.css.d.ts +0 -2
  16. package/src/spectrum-action-group.css.js +0 -120
  17. package/src/spectrum-action-group.css.js.map +0 -1
  18. package/stories/action-group-tooltip.stories.js +0 -177
  19. package/stories/action-group-tooltip.stories.js.map +0 -1
  20. package/stories/action-group.stories.js +0 -284
  21. package/stories/action-group.stories.js.map +0 -1
package/src/action-group.css.js DELETED
@@ -1,136 +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 { css } from '@spectrum-web-components/base';
13
- const styles = css `
14
- :host{--spectrum-actiongroup-button-gap-reset:0;--spectrum-actiongroup-quiet-compact-button-gap:var(
15
- --spectrum-global-dimension-size-25
16
- )}:host{display:flex;flex-wrap:wrap}::slotted(*){flex-shrink:0}:host(:not([vertical]):not([compact])){margin-top:calc(var(
17
- --spectrum-actiongroup-button-gap-y,
18
- var(--spectrum-global-dimension-size-100)
19
- )*-1)}:host(:not([vertical]):not([compact])) ::slotted(*){flex-shrink:0;margin-top:var(
20
- --spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100)
21
- )}:host([dir=ltr]:not([vertical]):not([compact])) ::slotted(:not(:last-child)){margin-right:var(
22
- --spectrum-actiongroup-button-gap-x,var(--spectrum-global-dimension-size-100)
23
- )}:host([dir=rtl]:not([vertical]):not([compact])) ::slotted(:not(:last-child)){margin-left:var(
24
- --spectrum-actiongroup-button-gap-x,var(--spectrum-global-dimension-size-100)
25
- )}:host([vertical]){display:inline-flex;flex-direction:column}:host([dir=ltr][vertical]) ::slotted(:not(:first-child)){margin-left:var(
26
- --spectrum-actiongroup-button-gap-reset
27
- )}:host([dir=rtl][vertical]) ::slotted(:not(:first-child)){margin-right:var(
28
- --spectrum-actiongroup-button-gap-reset
29
- )}:host([vertical]) ::slotted(:not(:first-child)){margin-top:var(
30
- --spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100)
31
- )}:host([dir=ltr][vertical][vertical]){margin-left:var(
32
- --spectrum-actiongroup-button-gap-reset
33
- )}:host([dir=rtl][vertical][vertical]){margin-right:var(
34
- --spectrum-actiongroup-button-gap-reset
35
- )}:host([vertical][vertical]){margin-top:var(
36
- --spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100)
37
- )}:host([dir=ltr][compact][quiet]) ::slotted(:not(:first-child)){margin-left:var(
38
- --spectrum-actiongroup-quiet-compact-button-gap
39
- )}:host([dir=rtl][compact][quiet]) ::slotted(:not(:first-child)){margin-right:var(
40
- --spectrum-actiongroup-quiet-compact-button-gap
41
- )}:host([compact][quiet]) ::slotted(:not(:first-child)){margin-top:var(
42
- --spectrum-actiongroup-button-gap-reset
43
- )}:host([dir=ltr][compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-left:var(
44
- --spectrum-actiongroup-button-gap-reset
45
- )}:host([dir=rtl][compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-right:var(
46
- --spectrum-actiongroup-button-gap-reset
47
- )}:host([compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-top:var(
48
- --spectrum-actiongroup-quiet-compact-button-gap
49
- )}: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(
50
- --spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
51
- )}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(
52
- --spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
53
- )}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){border-bottom-left-radius:var(
54
- --spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
55
- )}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){border-bottom-right-radius:var(
56
- --spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
57
- )}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){margin-right:calc(var(
58
- --spectrum-actionbutton-m-texticon-border-size,
59
- var(--spectrum-alias-border-size-thin)
60
- )*-1/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){margin-left:calc(var(
61
- --spectrum-actionbutton-m-texticon-border-size,
62
- var(--spectrum-alias-border-size-thin)
63
- )*-1/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){border-top-right-radius:var(
64
- --spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
65
- )}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){border-top-left-radius:var(
66
- --spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
67
- )}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(
68
- --spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
69
- )}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(
70
- --spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
71
- )}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){margin-left:calc(var(
72
- --spectrum-actionbutton-m-texticon-border-size,
73
- var(--spectrum-alias-border-size-thin)
74
- )*-1/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){margin-right:calc(var(
75
- --spectrum-actionbutton-m-texticon-border-size,
76
- var(--spectrum-alias-border-size-thin)
77
- )*-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(
78
- --spectrum-actionbutton-m-texticon-border-size,
79
- var(--spectrum-alias-border-size-thin)
80
- )*-1/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(var(
81
- --spectrum-actionbutton-m-texticon-border-size,
82
- var(--spectrum-alias-border-size-thin)
83
- )*-1/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(var(
84
- --spectrum-actionbutton-m-texticon-border-size,
85
- var(--spectrum-alias-border-size-thin)
86
- )*-1/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-left:calc(var(
87
- --spectrum-actionbutton-m-texticon-border-size,
88
- var(--spectrum-alias-border-size-thin)
89
- )*-1/2)}:host([compact][vertical]:not([quiet])) ::slotted(*){border-radius:0}:host([compact][vertical]:not([quiet])) ::slotted(:not(:first-child)){margin-bottom:calc(var(
90
- --spectrum-actionbutton-m-texticon-border-size,
91
- var(--spectrum-alias-border-size-thin)
92
- )*-1/2);margin-top:calc(var(
93
- --spectrum-actionbutton-m-texticon-border-size,
94
- var(--spectrum-alias-border-size-thin)
95
- )*-1/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(
96
- --spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
97
- )}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(
98
- --spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
99
- )}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(
100
- --spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
101
- )}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(
102
- --spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
103
- )}:host([compact][vertical]:not([quiet])) ::slotted(:first-child){border-radius:0;margin-bottom:calc(var(
104
- --spectrum-actionbutton-m-texticon-border-size,
105
- var(--spectrum-alias-border-size-thin)
106
- )*-1/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(
107
- --spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
108
- )}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(
109
- --spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
110
- )}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(
111
- --spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
112
- )}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(
113
- --spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
114
- )}:host([compact][vertical]:not([quiet])) ::slotted(:last-child){border-radius:0;margin-bottom:0;margin-top:calc(var(
115
- --spectrum-actionbutton-m-texticon-border-size,
116
- var(--spectrum-alias-border-size-thin)
117
- )*-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(
118
- --overriden-border-radius
119
- );--spectrum-actionbutton-s-textonly-border-radius:var(
120
- --overriden-border-radius
121
- );--spectrum-actionbutton-m-quiet-textonly-border-radius:var(
122
- --overriden-border-radius
123
- );--spectrum-actionbutton-m-textonly-border-radius:var(
124
- --overriden-border-radius
125
- );--spectrum-actionbutton-l-quiet-textonly-border-radius:var(
126
- --overriden-border-radius
127
- );--spectrum-actionbutton-l-textonly-border-radius:var(
128
- --overriden-border-radius
129
- );--spectrum-actionbutton-xl-quiet-textonly-border-radius:var(
130
- --overriden-border-radius
131
- );--spectrum-actionbutton-xl-textonly-border-radius:var(
132
- --overriden-border-radius
133
- )}: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)}
134
- `;
135
- export default styles;
136
- //# sourceMappingURL=action-group.css.js.map
package/src/action-group.css.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"action-group.css.js","sourceRoot":"","sources":["action-group.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyHjB,CAAC;AACF,eAAe,MAAM,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*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = 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`;\nexport default styles;"]}
package/src/index.d.ts DELETED
@@ -1 +0,0 @@
1
- export * from './ActionGroup.js';
package/src/index.js DELETED
@@ -1,13 +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
- export * from './ActionGroup.js';
13
- //# sourceMappingURL=index.js.map
package/src/index.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AAEF,cAAc,kBAAkB,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\nexport * from './ActionGroup.js';\n"]}
package/src/spectrum-action-group.css.d.ts DELETED
@@ -1,2 +0,0 @@
1
- declare const styles: import("@spectrum-web-components/base").CSSResult;
2
- export default styles;
package/src/spectrum-action-group.css.js DELETED
@@ -1,120 +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 { css } from '@spectrum-web-components/base';
13
- const styles = css `
14
- :host{--spectrum-actiongroup-button-gap-reset:0;--spectrum-actiongroup-quiet-compact-button-gap:var(
15
- --spectrum-global-dimension-size-25
16
- )}:host{display:flex;flex-wrap:wrap}::slotted(*){flex-shrink:0}:host(:not([vertical]):not([compact])){margin-top:calc(var(
17
- --spectrum-actiongroup-button-gap-y,
18
- var(--spectrum-global-dimension-size-100)
19
- )*-1)}:host(:not([vertical]):not([compact])) ::slotted(*){flex-shrink:0;margin-top:var(
20
- --spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100)
21
- )}:host([dir=ltr]:not([vertical]):not([compact])) ::slotted(:not(:last-child)){margin-right:var(
22
- --spectrum-actiongroup-button-gap-x,var(--spectrum-global-dimension-size-100)
23
- )}:host([dir=rtl]:not([vertical]):not([compact])) ::slotted(:not(:last-child)){margin-left:var(
24
- --spectrum-actiongroup-button-gap-x,var(--spectrum-global-dimension-size-100)
25
- )}:host([vertical]){display:inline-flex;flex-direction:column}:host([dir=ltr][vertical]) ::slotted(:not(:first-child)){margin-left:var(
26
- --spectrum-actiongroup-button-gap-reset
27
- )}:host([dir=rtl][vertical]) ::slotted(:not(:first-child)){margin-right:var(
28
- --spectrum-actiongroup-button-gap-reset
29
- )}:host([vertical]) ::slotted(:not(:first-child)){margin-top:var(
30
- --spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100)
31
- )}:host([dir=ltr][vertical][vertical]){margin-left:var(
32
- --spectrum-actiongroup-button-gap-reset
33
- )}:host([dir=rtl][vertical][vertical]){margin-right:var(
34
- --spectrum-actiongroup-button-gap-reset
35
- )}:host([vertical][vertical]){margin-top:var(
36
- --spectrum-actiongroup-button-gap-y,var(--spectrum-global-dimension-size-100)
37
- )}:host([dir=ltr][compact][quiet]) ::slotted(:not(:first-child)){margin-left:var(
38
- --spectrum-actiongroup-quiet-compact-button-gap
39
- )}:host([dir=rtl][compact][quiet]) ::slotted(:not(:first-child)){margin-right:var(
40
- --spectrum-actiongroup-quiet-compact-button-gap
41
- )}:host([compact][quiet]) ::slotted(:not(:first-child)){margin-top:var(
42
- --spectrum-actiongroup-button-gap-reset
43
- )}:host([dir=ltr][compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-left:var(
44
- --spectrum-actiongroup-button-gap-reset
45
- )}:host([dir=rtl][compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-right:var(
46
- --spectrum-actiongroup-button-gap-reset
47
- )}:host([compact][quiet][vertical]) ::slotted(:not(:first-child)){margin-top:var(
48
- --spectrum-actiongroup-quiet-compact-button-gap
49
- )}: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(
50
- --spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
51
- )}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(
52
- --spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
53
- )}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){border-bottom-left-radius:var(
54
- --spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
55
- )}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){border-bottom-right-radius:var(
56
- --spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
57
- )}:host([dir=ltr][compact]:not([quiet])) ::slotted(:first-child){margin-right:calc(var(
58
- --spectrum-actionbutton-m-texticon-border-size,
59
- var(--spectrum-alias-border-size-thin)
60
- )*-1/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:first-child){margin-left:calc(var(
61
- --spectrum-actionbutton-m-texticon-border-size,
62
- var(--spectrum-alias-border-size-thin)
63
- )*-1/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){border-top-right-radius:var(
64
- --spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
65
- )}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){border-top-left-radius:var(
66
- --spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
67
- )}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(
68
- --spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
69
- )}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(
70
- --spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
71
- )}:host([dir=ltr][compact]:not([quiet])) ::slotted(:last-child){margin-left:calc(var(
72
- --spectrum-actionbutton-m-texticon-border-size,
73
- var(--spectrum-alias-border-size-thin)
74
- )*-1/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:last-child){margin-right:calc(var(
75
- --spectrum-actionbutton-m-texticon-border-size,
76
- var(--spectrum-alias-border-size-thin)
77
- )*-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(
78
- --spectrum-actionbutton-m-texticon-border-size,
79
- var(--spectrum-alias-border-size-thin)
80
- )*-1/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(var(
81
- --spectrum-actionbutton-m-texticon-border-size,
82
- var(--spectrum-alias-border-size-thin)
83
- )*-1/2)}:host([dir=ltr][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-right:calc(var(
84
- --spectrum-actionbutton-m-texticon-border-size,
85
- var(--spectrum-alias-border-size-thin)
86
- )*-1/2)}:host([dir=rtl][compact]:not([quiet])) ::slotted(:not(:first-child)){margin-left:calc(var(
87
- --spectrum-actionbutton-m-texticon-border-size,
88
- var(--spectrum-alias-border-size-thin)
89
- )*-1/2)}:host([compact][vertical]:not([quiet])) ::slotted(*){border-radius:0}:host([compact][vertical]:not([quiet])) ::slotted(:not(:first-child)){margin-bottom:calc(var(
90
- --spectrum-actionbutton-m-texticon-border-size,
91
- var(--spectrum-alias-border-size-thin)
92
- )*-1/2);margin-top:calc(var(
93
- --spectrum-actionbutton-m-texticon-border-size,
94
- var(--spectrum-alias-border-size-thin)
95
- )*-1/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(
96
- --spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
97
- )}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(
98
- --spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
99
- )}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-right-radius:var(
100
- --spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
101
- )}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:first-child){border-top-left-radius:var(
102
- --spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
103
- )}:host([compact][vertical]:not([quiet])) ::slotted(:first-child){border-radius:0;margin-bottom:calc(var(
104
- --spectrum-actionbutton-m-texticon-border-size,
105
- var(--spectrum-alias-border-size-thin)
106
- )*-1/2)}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(
107
- --spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
108
- )}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(
109
- --spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
110
- )}:host([dir=ltr][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-right-radius:var(
111
- --spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
112
- )}:host([dir=rtl][compact][vertical]:not([quiet])) ::slotted(:last-child){border-bottom-left-radius:var(
113
- --spectrum-actionbutton-m-texticon-border-radius,var(--spectrum-alias-component-border-radius)
114
- )}:host([compact][vertical]:not([quiet])) ::slotted(:last-child){border-radius:0;margin-bottom:0;margin-top:calc(var(
115
- --spectrum-actionbutton-m-texticon-border-size,
116
- var(--spectrum-alias-border-size-thin)
117
- )*-1/2)}:host([justified]) ::slotted(*){flex:1}
118
- `;
119
- export default styles;
120
- //# sourceMappingURL=spectrum-action-group.css.js.map
package/src/spectrum-action-group.css.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"spectrum-action-group.css.js","sourceRoot":"","sources":["spectrum-action-group.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyGjB,CAAC;AACF,eAAe,MAAM,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*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = 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`;\nexport default styles;"]}
package/stories/action-group-tooltip.stories.js DELETED
@@ -1,177 +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 { html } from '@spectrum-web-components/base';
13
- import { spreadProps } from '../../../test/lit-helpers.js';
14
- import '../sp-action-group.js';
15
- import '@spectrum-web-components/action-button/sp-action-button.js';
16
- import '@spectrum-web-components/overlay/overlay-trigger.js';
17
- import '@spectrum-web-components/tooltip/sp-tooltip.js';
18
- import '@spectrum-web-components/icons-workflow/icons/sp-icon-properties.js';
19
- import '@spectrum-web-components/icons-workflow/icons/sp-icon-info.js';
20
- import '@spectrum-web-components/icons-workflow/icons/sp-icon-view-all-tags.js';
21
- export default {
22
- title: 'Action Group/Tooltips',
23
- component: 'sp-action-group',
24
- args: {
25
- compact: false,
26
- emphasized: false,
27
- justified: false,
28
- quiet: false,
29
- vertical: false,
30
- selects: 'none',
31
- },
32
- argTypes: {
33
- compact: {
34
- name: 'compact',
35
- description: 'Visually joins the buttons together to clarify their relationship to one another.',
36
- type: { name: 'boolean', required: false },
37
- table: {
38
- type: { summary: 'boolean' },
39
- defaultValue: { summary: false },
40
- },
41
- control: {
42
- type: 'boolean',
43
- },
44
- },
45
- emphasized: {
46
- name: 'emphasized',
47
- type: { name: 'boolean', required: false },
48
- table: {
49
- type: { summary: 'boolean' },
50
- defaultValue: { summary: false },
51
- },
52
- control: {
53
- type: 'boolean',
54
- },
55
- },
56
- justified: {
57
- name: 'justified',
58
- description: 'Aligns the action group items to use all the available space on that line.',
59
- type: { name: 'boolean', required: false },
60
- table: {
61
- type: { summary: 'boolean' },
62
- defaultValue: { summary: false },
63
- },
64
- control: {
65
- type: 'boolean',
66
- },
67
- },
68
- quiet: {
69
- name: 'quiet',
70
- type: { name: 'boolean', required: false },
71
- table: {
72
- type: { summary: 'boolean' },
73
- defaultValue: { summary: false },
74
- },
75
- control: {
76
- type: 'boolean',
77
- },
78
- },
79
- vertical: {
80
- name: 'vertical',
81
- description: 'Changes the orientation of the action group.',
82
- type: { name: 'boolean', required: false },
83
- table: {
84
- type: { summary: 'boolean' },
85
- defaultValue: { summary: false },
86
- },
87
- control: {
88
- type: 'boolean',
89
- },
90
- },
91
- selects: {
92
- name: 'selects',
93
- description: 'Whether the elements selects its children and how many it can select at a time.',
94
- table: {
95
- defaultValue: { summary: '' },
96
- },
97
- control: {
98
- type: 'inline-radio',
99
- options: ['none', 'single', 'multiple'],
100
- },
101
- },
102
- },
103
- };
104
- const template = (args) => {
105
- requestAnimationFrame(() => {
106
- const group = document.querySelector('sp-action-group');
107
- const selectedDiv = group.nextElementSibling;
108
- if (selectedDiv) {
109
- selectedDiv.textContent = `Selected: ${JSON.stringify(group.selected)}`;
110
- }
111
- });
112
- return html `
113
- <sp-action-group
114
- label="Favorite Color"
115
- ...=${spreadProps(args)}
116
- @change=${({ target }) => {
117
- const next = target.nextElementSibling;
118
- next.textContent = `Selected: ${JSON.stringify(target.selected)}`;
119
- }}
120
- >
121
- <overlay-trigger>
122
- <sp-action-button slot="trigger">Red</sp-action-button>
123
- <sp-tooltip slot="hover-content">
124
- This is a cool color.
125
- </sp-tooltip>
126
- </overlay-trigger>
127
- <overlay-trigger>
128
- <sp-action-button slot="trigger">Green</sp-action-button>
129
- <sp-tooltip slot="hover-content">
130
- You wouldn't be wrong.
131
- </sp-tooltip>
132
- </overlay-trigger>
133
- <overlay-trigger>
134
- <sp-action-button slot="trigger" value="blue" selected>
135
- Blue
136
- </sp-action-button>
137
- <sp-tooltip slot="hover-content">The sky in spring.</sp-tooltip>
138
- </overlay-trigger>
139
- <overlay-trigger>
140
- <sp-action-button slot="trigger">Yellow</sp-action-button>
141
- <sp-tooltip slot="hover-content">The sun at noon.</sp-tooltip>
142
- </overlay-trigger>
143
- </sp-action-group>
144
- ${!!args.selects
145
- ? html `
146
- <div>Selected:</div>
147
- `
148
- : html ``}
149
- `;
150
- };
151
- export const selectsSingle = (args) => template(args);
152
- selectsSingle.args = {
153
- compact: true,
154
- emphasized: true,
155
- selects: 'single',
156
- };
157
- export const selectsMultiple = (args) => template(args);
158
- selectsMultiple.args = {
159
- compact: true,
160
- emphasized: true,
161
- selects: 'multiple',
162
- };
163
- export const justified = (args) => template(args);
164
- justified.args = {
165
- compact: true,
166
- emphasized: true,
167
- justified: true,
168
- selects: undefined,
169
- };
170
- export const vertical = (args) => template(args);
171
- vertical.args = {
172
- compact: true,
173
- emphasized: true,
174
- vertical: true,
175
- selects: undefined,
176
- };
177
- //# sourceMappingURL=action-group-tooltip.stories.js.map
package/stories/action-group-tooltip.stories.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"action-group-tooltip.stories.js","sourceRoot":"","sources":["action-group-tooltip.stories.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 { html, TemplateResult } from '@spectrum-web-components/base';\nimport { spreadProps } from '../../../test/lit-helpers.js';\n\nimport '../sp-action-group.js';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport '@spectrum-web-components/overlay/overlay-trigger.js';\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-properties.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-info.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-view-all-tags.js';\nimport { ActionGroup } from '../src/ActionGroup.js';\n\nexport default {\n title: 'Action Group/Tooltips',\n component: 'sp-action-group',\n args: {\n compact: false,\n emphasized: false,\n justified: false,\n quiet: false,\n vertical: false,\n selects: 'none',\n },\n argTypes: {\n compact: {\n name: 'compact',\n description:\n 'Visually joins the buttons together to clarify their relationship to one another.',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n emphasized: {\n name: 'emphasized',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n justified: {\n name: 'justified',\n description:\n 'Aligns the action group items to use all the available space on that line.',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n quiet: {\n name: 'quiet',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n vertical: {\n name: 'vertical',\n description: 'Changes the orientation of the action group.',\n type: { name: 'boolean', required: false },\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n selects: {\n name: 'selects',\n description:\n 'Whether the elements selects its children and how many it can select at a time.',\n table: {\n defaultValue: { summary: '' },\n },\n control: {\n type: 'inline-radio',\n options: ['none', 'single', 'multiple'],\n },\n },\n },\n};\n\ninterface Properties {\n compact?: boolean;\n emphasized?: boolean;\n justified?: boolean;\n quiet?: boolean;\n vertical?: boolean;\n selects?: 'none' | 'single' | 'multiple';\n [prop: string]: unknown;\n}\n\nconst template = (args: Properties): TemplateResult => {\n requestAnimationFrame(() => {\n const group = document.querySelector('sp-action-group') as ActionGroup;\n const selectedDiv = group.nextElementSibling;\n if (selectedDiv) {\n selectedDiv.textContent = `Selected: ${JSON.stringify(\n group.selected\n )}`;\n }\n });\n return html`\n <sp-action-group\n label=\"Favorite Color\"\n ...=${spreadProps(args)}\n @change=${({ target }: Event & { target: ActionGroup }) => {\n const next = target.nextElementSibling as HTMLDivElement;\n next.textContent = `Selected: ${JSON.stringify(\n target.selected\n )}`;\n }}\n >\n <overlay-trigger>\n <sp-action-button slot=\"trigger\">Red</sp-action-button>\n <sp-tooltip slot=\"hover-content\">\n This is a cool color.\n </sp-tooltip>\n </overlay-trigger>\n <overlay-trigger>\n <sp-action-button slot=\"trigger\">Green</sp-action-button>\n <sp-tooltip slot=\"hover-content\">\n You wouldn't be wrong.\n </sp-tooltip>\n </overlay-trigger>\n <overlay-trigger>\n <sp-action-button slot=\"trigger\" value=\"blue\" selected>\n Blue\n </sp-action-button>\n <sp-tooltip slot=\"hover-content\">The sky in spring.</sp-tooltip>\n </overlay-trigger>\n <overlay-trigger>\n <sp-action-button slot=\"trigger\">Yellow</sp-action-button>\n <sp-tooltip slot=\"hover-content\">The sun at noon.</sp-tooltip>\n </overlay-trigger>\n </sp-action-group>\n ${!!args.selects\n ? html`\n <div>Selected:</div>\n `\n : html``}\n `;\n};\n\nexport const selectsSingle = (args: Properties): TemplateResult =>\n template(args);\nselectsSingle.args = {\n compact: true,\n emphasized: true,\n selects: 'single',\n};\n\nexport const selectsMultiple = (args: Properties): TemplateResult =>\n template(args);\nselectsMultiple.args = {\n compact: true,\n emphasized: true,\n selects: 'multiple',\n};\n\nexport const justified = (args: Properties): TemplateResult => template(args);\njustified.args = {\n compact: true,\n emphasized: true,\n justified: true,\n selects: undefined,\n};\n\nexport const vertical = (args: Properties): TemplateResult => template(args);\nvertical.args = {\n compact: true,\n emphasized: true,\n vertical: true,\n selects: undefined,\n};\n"]}