@spectrum-web-components/menu 0.16.0 → 0.16.2

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 (109) hide show
  1. package/package.json +5 -5
  2. package/sp-menu-divider.dev.js +1 -0
  3. package/sp-menu-divider.dev.js.map +1 -1
  4. package/sp-menu-divider.js +1 -1
  5. package/sp-menu-divider.js.map +2 -2
  6. package/sp-menu-group.dev.js +1 -0
  7. package/sp-menu-group.dev.js.map +1 -1
  8. package/sp-menu-group.js +1 -1
  9. package/sp-menu-group.js.map +2 -2
  10. package/sp-menu-item.dev.js +1 -0
  11. package/sp-menu-item.dev.js.map +1 -1
  12. package/sp-menu-item.js +1 -1
  13. package/sp-menu-item.js.map +2 -2
  14. package/sp-menu.dev.js +1 -0
  15. package/sp-menu.dev.js.map +1 -1
  16. package/sp-menu.js +1 -1
  17. package/sp-menu.js.map +2 -2
  18. package/src/Menu.dev.js +51 -24
  19. package/src/Menu.dev.js.map +1 -1
  20. package/src/Menu.js +2 -2
  21. package/src/Menu.js.map +2 -2
  22. package/src/MenuDivider.dev.js +1 -0
  23. package/src/MenuDivider.dev.js.map +1 -1
  24. package/src/MenuDivider.js +1 -1
  25. package/src/MenuDivider.js.map +2 -2
  26. package/src/MenuGroup.dev.js +4 -3
  27. package/src/MenuGroup.dev.js.map +1 -1
  28. package/src/MenuGroup.js +2 -2
  29. package/src/MenuGroup.js.map +2 -2
  30. package/src/MenuItem.dev.js +34 -9
  31. package/src/MenuItem.dev.js.map +2 -2
  32. package/src/MenuItem.js +2 -2
  33. package/src/MenuItem.js.map +2 -2
  34. package/src/index.dev.js +1 -0
  35. package/src/index.dev.js.map +1 -1
  36. package/src/index.js +1 -1
  37. package/src/index.js.map +1 -1
  38. package/src/menu-divider.css.dev.js +1 -0
  39. package/src/menu-divider.css.dev.js.map +1 -1
  40. package/src/menu-divider.css.js +1 -1
  41. package/src/menu-divider.css.js.map +2 -2
  42. package/src/menu-group.css.dev.js +1 -0
  43. package/src/menu-group.css.dev.js.map +1 -1
  44. package/src/menu-group.css.js +1 -1
  45. package/src/menu-group.css.js.map +2 -2
  46. package/src/menu-item.css.dev.js +1 -0
  47. package/src/menu-item.css.dev.js.map +1 -1
  48. package/src/menu-item.css.js +1 -1
  49. package/src/menu-item.css.js.map +2 -2
  50. package/src/menu.css.dev.js +1 -0
  51. package/src/menu.css.dev.js.map +1 -1
  52. package/src/menu.css.js +1 -1
  53. package/src/menu.css.js.map +2 -2
  54. package/src/spectrum-checkmark.css.dev.js +1 -0
  55. package/src/spectrum-checkmark.css.dev.js.map +1 -1
  56. package/src/spectrum-checkmark.css.js +1 -1
  57. package/src/spectrum-checkmark.css.js.map +2 -2
  58. package/src/spectrum-chevron.css.dev.js +1 -0
  59. package/src/spectrum-chevron.css.dev.js.map +1 -1
  60. package/src/spectrum-chevron.css.js +1 -1
  61. package/src/spectrum-chevron.css.js.map +2 -2
  62. package/src/spectrum-itemLabel.css.dev.js +1 -0
  63. package/src/spectrum-itemLabel.css.dev.js.map +1 -1
  64. package/src/spectrum-itemLabel.css.js +1 -1
  65. package/src/spectrum-itemLabel.css.js.map +2 -2
  66. package/src/spectrum-menu-divider.css.dev.js +1 -0
  67. package/src/spectrum-menu-divider.css.dev.js.map +1 -1
  68. package/src/spectrum-menu-divider.css.js +1 -1
  69. package/src/spectrum-menu-divider.css.js.map +2 -2
  70. package/src/spectrum-menu-item.css.dev.js +1 -0
  71. package/src/spectrum-menu-item.css.dev.js.map +1 -1
  72. package/src/spectrum-menu-item.css.js +1 -1
  73. package/src/spectrum-menu-item.css.js.map +2 -2
  74. package/src/spectrum-menu-sectionHeading.css.dev.js +1 -0
  75. package/src/spectrum-menu-sectionHeading.css.dev.js.map +1 -1
  76. package/src/spectrum-menu-sectionHeading.css.js +1 -1
  77. package/src/spectrum-menu-sectionHeading.css.js.map +2 -2
  78. package/src/spectrum-menu.css.dev.js +1 -0
  79. package/src/spectrum-menu.css.dev.js.map +1 -1
  80. package/src/spectrum-menu.css.js +1 -1
  81. package/src/spectrum-menu.css.js.map +2 -2
  82. package/stories/menu-group.stories.js +61 -9
  83. package/stories/menu-group.stories.js.map +2 -2
  84. package/stories/menu-item.stories.js +25 -4
  85. package/stories/menu-item.stories.js.map +1 -1
  86. package/stories/menu.stories.js +47 -8
  87. package/stories/menu.stories.js.map +1 -1
  88. package/stories/submenu.stories.js +160 -16
  89. package/stories/submenu.stories.js.map +2 -2
  90. package/test/benchmark/test-basic.js +8 -1
  91. package/test/benchmark/test-basic.js.map +1 -1
  92. package/test/menu-group.test-vrt.js +4 -1
  93. package/test/menu-group.test-vrt.js.map +1 -1
  94. package/test/menu-group.test.js +257 -6
  95. package/test/menu-group.test.js.map +1 -1
  96. package/test/menu-item.test-vrt.js +4 -1
  97. package/test/menu-item.test-vrt.js.map +1 -1
  98. package/test/menu-item.test.js +121 -8
  99. package/test/menu-item.test.js.map +1 -1
  100. package/test/menu-selects.test.js +513 -5
  101. package/test/menu-selects.test.js.map +1 -1
  102. package/test/menu.test-vrt.js +4 -1
  103. package/test/menu.test-vrt.js.map +1 -1
  104. package/test/menu.test.js +337 -17
  105. package/test/menu.test.js.map +1 -1
  106. package/test/submenu.test-vrt.js +4 -1
  107. package/test/submenu.test-vrt.js.map +1 -1
  108. package/test/submenu.test.js +516 -21
  109. package/test/submenu.test.js.map +1 -1
package/src/spectrum-menu-sectionHeading.css.dev.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["spectrum-menu-sectionHeading.css.ts"],
4
4
  "sourcesContent": ["/*\nCopyright 2022 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.header{color:var(--spectrum-listheading-text-color);display:block;font-size:var(--spectrum-listitem-texticon-heading-text-size);font-weight:var(--spectrum-listitem-texticon-heading-text-font-weight);letter-spacing:var(\n--spectrum-listitem-texticon-heading-letter-spacing\n);line-height:var(--spectrum-listitem-texticon-heading-line-height);margin:var(--spectrum-listitem-texticon-heading-margin);padding:var(--spectrum-listitem-texticon-heading-padding);text-transform:var(--spectrum-listitem-texticon-heading-text-transform)}\n`;\nexport default styles;"],
5
- "mappings": "AAWA;AACA,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAKf,eAAe;",
5
+ "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAKf,eAAe;",
6
6
  "names": []
7
7
  }
package/src/spectrum-menu-sectionHeading.css.js CHANGED
@@ -1,4 +1,4 @@
1
- import{css as t}from"@spectrum-web-components/base";const e=t`
1
+ "use strict";import{css as t}from"@spectrum-web-components/base";const e=t`
2
2
  .header{color:var(--spectrum-listheading-text-color);display:block;font-size:var(--spectrum-listitem-texticon-heading-text-size);font-weight:var(--spectrum-listitem-texticon-heading-text-font-weight);letter-spacing:var(
3
3
  --spectrum-listitem-texticon-heading-letter-spacing
4
4
  );line-height:var(--spectrum-listitem-texticon-heading-line-height);margin:var(--spectrum-listitem-texticon-heading-margin);padding:var(--spectrum-listitem-texticon-heading-padding);text-transform:var(--spectrum-listitem-texticon-heading-text-transform)}
package/src/spectrum-menu-sectionHeading.css.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["spectrum-menu-sectionHeading.css.ts"],
4
4
  "sourcesContent": ["/*\nCopyright 2022 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.header{color:var(--spectrum-listheading-text-color);display:block;font-size:var(--spectrum-listitem-texticon-heading-text-size);font-weight:var(--spectrum-listitem-texticon-heading-text-font-weight);letter-spacing:var(\n--spectrum-listitem-texticon-heading-letter-spacing\n);line-height:var(--spectrum-listitem-texticon-heading-line-height);margin:var(--spectrum-listitem-texticon-heading-margin);padding:var(--spectrum-listitem-texticon-heading-padding);text-transform:var(--spectrum-listitem-texticon-heading-text-transform)}\n`;\nexport default styles;"],
5
- "mappings": "AAWA,oDACA,KAAM,GAAS;AAAA;AAAA;AAAA;AAAA,EAKf,cAAe",
6
- "names": []
5
+ "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA,EAKf,eAAeC",
6
+ "names": ["css", "styles"]
7
7
  }
package/src/spectrum-menu.css.dev.js CHANGED
@@ -1,3 +1,4 @@
1
+ "use strict";
1
2
  import { css } from "@spectrum-web-components/base";
2
3
  const styles = css`
3
4
  :host{--spectrum-menu-margin-x:var(
package/src/spectrum-menu.css.dev.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["spectrum-menu.css.ts"],
4
4
  "sourcesContent": ["/*\nCopyright 2022 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-menu-margin-x:var(\n--spectrum-global-dimension-size-40\n);--spectrum-listitem-texticon-heading-text-size:var(\n--spectrum-global-dimension-font-size-50\n);--spectrum-listitem-texticon-heading-text-font-weight:400;--spectrum-listitem-texticon-heading-text-transform:uppercase;--spectrum-listitem-texticon-heading-letter-spacing:0.06em;--spectrum-listitem-texticon-heading-margin:var(\n--spectrum-global-dimension-size-75\n) 0 0 0;--spectrum-listitem-texticon-heading-padding:0 var(--spectrum-global-dimension-size-450) 0 var(--spectrum-global-dimension-size-150);--spectrum-listitem-texticon-padding-y:var(\n--spectrum-global-dimension-size-85\n);--spectrum-listitem-texticon-selectable-padding-right:calc(var(--spectrum-listitem-texticon-ui-icon-width) + var(--spectrum-listitem-texticon-ui-icon-gap) + var(--spectrum-listitem-texticon-padding-right) - var(\n--spectrum-popover-border-size,\nvar(--spectrum-alias-border-size-thin)\n));--spectrum-listitem-texticon-label-line-height:1.3;--spectrum-listitem-texticon-heading-line-height:var(\n--spectrum-alias-body-text-line-height,var(--spectrum-global-font-line-height-medium)\n)}:host{--spectrum-listitem-texticon-padding-left:var(\n--spectrum-listitem-m-texticon-padding-left\n);--spectrum-listitem-textthumbnail-padding-left:var(\n--spectrum-listitem-m-textthumbnail-padding-left\n);--spectrum-listitem-texticon-text-size:var(\n--spectrum-listitem-m-texticon-text-size,var(--spectrum-global-dimension-font-size-100)\n);--spectrum-listitem-texticon-text-font-weight:var(\n--spectrum-listitem-m-texticon-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-listitem-texticon-icon-gap:var(\n--spectrum-listitem-m-texticon-icon-gap,var(--spectrum-global-dimension-size-100)\n);--spectrum-listitem-texticon-divider-padding:var(\n--spectrum-listitem-m-texticon-divider-padding,var(--spectrum-global-dimension-static-size-40)\n);--spectrum-listitem-texticon-ui-icon-margin-top:var(\n--spectrum-listitem-m-texticon-ui-icon-margin-top,var(--spectrum-global-dimension-size-125)\n);--spectrum-listitem-texticon-ui-icon-width:var(\n--spectrum-listitem-m-texticon-ui-icon-width,var(--spectrum-alias-ui-icon-checkmark-size-100)\n);--spectrum-listitem-texticon-ui-icon-gap:var(\n--spectrum-listitem-m-texticon-ui-icon-gap,var(--spectrum-global-dimension-size-100)\n);--spectrum-listitem-texticon-padding-right:var(\n--spectrum-listitem-m-texticon-padding-right,var(--spectrum-global-dimension-size-150)\n);--spectrum-listitem-texticon-focus-indicator-size:var(\n--spectrum-listitem-m-texticon-focus-indicator-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-listitem-texticon-height:var(\n--spectrum-listitem-m-texticon-height,var(--spectrum-global-dimension-size-400)\n)}:host{box-sizing:border-box;display:inline-block;list-style-type:none;margin-bottom:var(\n--spectrum-popover-padding-y,var(--spectrum-global-dimension-size-50)\n);margin-left:0;margin-right:0;margin-top:var(\n--spectrum-popover-padding-y,var(--spectrum-global-dimension-size-50)\n);overflow:auto;padding:0}:host([dir=ltr][selects]) ::slotted(sp-menu-item){padding-right:var(\n--spectrum-listitem-texticon-selectable-padding-right\n)}:host([dir=rtl][selects]) ::slotted(sp-menu-item){padding-left:var(\n--spectrum-listitem-texticon-selectable-padding-right\n)}:host([dir=ltr][selects]) ::slotted(sp-menu-item[selected]){padding-right:calc(var(--spectrum-listitem-texticon-padding-right) - var(\n--spectrum-popover-border-size,\nvar(--spectrum-alias-border-size-thin)\n))}:host([dir=rtl][selects]) ::slotted(sp-menu-item[selected]){padding-left:calc(var(--spectrum-listitem-texticon-padding-right) - var(\n--spectrum-popover-border-size,\nvar(--spectrum-alias-border-size-thin)\n))}::slotted(sp-menu){display:block}:host{--spectrum-listheading-text-color:var(\n--spectrum-global-color-gray-700\n)}:host{background-color:var(\n--spectrum-listitem-m-texticon-background-color,var(--spectrum-alias-background-color-transparent)\n)}\n`;\nexport default styles;"],
5
- "mappings": "AAWA;AACA,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0Df,eAAe;",
5
+ "mappings": ";AAWA,SAAS,WAAW;AACpB,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0Df,eAAe;",
6
6
  "names": []
7
7
  }
package/src/spectrum-menu.css.js CHANGED
@@ -1,4 +1,4 @@
1
- import{css as t}from"@spectrum-web-components/base";const i=t`
1
+ "use strict";import{css as t}from"@spectrum-web-components/base";const i=t`
2
2
  :host{--spectrum-menu-margin-x:var(
3
3
  --spectrum-global-dimension-size-40
4
4
  );--spectrum-listitem-texticon-heading-text-size:var(
package/src/spectrum-menu.css.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["spectrum-menu.css.ts"],
4
4
  "sourcesContent": ["/*\nCopyright 2022 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-menu-margin-x:var(\n--spectrum-global-dimension-size-40\n);--spectrum-listitem-texticon-heading-text-size:var(\n--spectrum-global-dimension-font-size-50\n);--spectrum-listitem-texticon-heading-text-font-weight:400;--spectrum-listitem-texticon-heading-text-transform:uppercase;--spectrum-listitem-texticon-heading-letter-spacing:0.06em;--spectrum-listitem-texticon-heading-margin:var(\n--spectrum-global-dimension-size-75\n) 0 0 0;--spectrum-listitem-texticon-heading-padding:0 var(--spectrum-global-dimension-size-450) 0 var(--spectrum-global-dimension-size-150);--spectrum-listitem-texticon-padding-y:var(\n--spectrum-global-dimension-size-85\n);--spectrum-listitem-texticon-selectable-padding-right:calc(var(--spectrum-listitem-texticon-ui-icon-width) + var(--spectrum-listitem-texticon-ui-icon-gap) + var(--spectrum-listitem-texticon-padding-right) - var(\n--spectrum-popover-border-size,\nvar(--spectrum-alias-border-size-thin)\n));--spectrum-listitem-texticon-label-line-height:1.3;--spectrum-listitem-texticon-heading-line-height:var(\n--spectrum-alias-body-text-line-height,var(--spectrum-global-font-line-height-medium)\n)}:host{--spectrum-listitem-texticon-padding-left:var(\n--spectrum-listitem-m-texticon-padding-left\n);--spectrum-listitem-textthumbnail-padding-left:var(\n--spectrum-listitem-m-textthumbnail-padding-left\n);--spectrum-listitem-texticon-text-size:var(\n--spectrum-listitem-m-texticon-text-size,var(--spectrum-global-dimension-font-size-100)\n);--spectrum-listitem-texticon-text-font-weight:var(\n--spectrum-listitem-m-texticon-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);--spectrum-listitem-texticon-icon-gap:var(\n--spectrum-listitem-m-texticon-icon-gap,var(--spectrum-global-dimension-size-100)\n);--spectrum-listitem-texticon-divider-padding:var(\n--spectrum-listitem-m-texticon-divider-padding,var(--spectrum-global-dimension-static-size-40)\n);--spectrum-listitem-texticon-ui-icon-margin-top:var(\n--spectrum-listitem-m-texticon-ui-icon-margin-top,var(--spectrum-global-dimension-size-125)\n);--spectrum-listitem-texticon-ui-icon-width:var(\n--spectrum-listitem-m-texticon-ui-icon-width,var(--spectrum-alias-ui-icon-checkmark-size-100)\n);--spectrum-listitem-texticon-ui-icon-gap:var(\n--spectrum-listitem-m-texticon-ui-icon-gap,var(--spectrum-global-dimension-size-100)\n);--spectrum-listitem-texticon-padding-right:var(\n--spectrum-listitem-m-texticon-padding-right,var(--spectrum-global-dimension-size-150)\n);--spectrum-listitem-texticon-focus-indicator-size:var(\n--spectrum-listitem-m-texticon-focus-indicator-size,var(--spectrum-alias-border-size-thick)\n);--spectrum-listitem-texticon-height:var(\n--spectrum-listitem-m-texticon-height,var(--spectrum-global-dimension-size-400)\n)}:host{box-sizing:border-box;display:inline-block;list-style-type:none;margin-bottom:var(\n--spectrum-popover-padding-y,var(--spectrum-global-dimension-size-50)\n);margin-left:0;margin-right:0;margin-top:var(\n--spectrum-popover-padding-y,var(--spectrum-global-dimension-size-50)\n);overflow:auto;padding:0}:host([dir=ltr][selects]) ::slotted(sp-menu-item){padding-right:var(\n--spectrum-listitem-texticon-selectable-padding-right\n)}:host([dir=rtl][selects]) ::slotted(sp-menu-item){padding-left:var(\n--spectrum-listitem-texticon-selectable-padding-right\n)}:host([dir=ltr][selects]) ::slotted(sp-menu-item[selected]){padding-right:calc(var(--spectrum-listitem-texticon-padding-right) - var(\n--spectrum-popover-border-size,\nvar(--spectrum-alias-border-size-thin)\n))}:host([dir=rtl][selects]) ::slotted(sp-menu-item[selected]){padding-left:calc(var(--spectrum-listitem-texticon-padding-right) - var(\n--spectrum-popover-border-size,\nvar(--spectrum-alias-border-size-thin)\n))}::slotted(sp-menu){display:block}:host{--spectrum-listheading-text-color:var(\n--spectrum-global-color-gray-700\n)}:host{background-color:var(\n--spectrum-listitem-m-texticon-background-color,var(--spectrum-alias-background-color-transparent)\n)}\n`;\nexport default styles;"],
5
- "mappings": "AAWA,oDACA,KAAM,GAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA0Df,cAAe",
6
- "names": []
5
+ "mappings": "aAWA,OAAS,OAAAA,MAAW,gCACpB,MAAMC,EAASD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA0Df,eAAeC",
6
+ "names": ["css", "styles"]
7
7
  }
package/stories/menu-group.stories.js CHANGED
@@ -1,11 +1,59 @@
1
- import{html as o}from"@spectrum-web-components/base";import"@spectrum-web-components/menu/sp-menu.js";import"@spectrum-web-components/menu/sp-menu-divider.js";import"@spectrum-web-components/popover/sp-popover.js";import"@spectrum-web-components/menu/sp-menu.js";import"@spectrum-web-components/menu/sp-menu-item.js";import"@spectrum-web-components/menu/sp-menu-divider.js";import"@spectrum-web-components/menu/sp-menu-group.js";export default{component:"sp-menu",title:"Menu Group"};export const mixed=()=>{let s="italic",i="700",m="blue",n="overline";const l=({style:p,weight:e,color:u,decoration:t})=>`
1
+ "use strict";
2
+ import { html } from "@spectrum-web-components/base";
3
+ import "@spectrum-web-components/menu/sp-menu.js";
4
+ import "@spectrum-web-components/menu/sp-menu-divider.js";
5
+ import "@spectrum-web-components/popover/sp-popover.js";
6
+ import "@spectrum-web-components/menu/sp-menu.js";
7
+ import "@spectrum-web-components/menu/sp-menu-item.js";
8
+ import "@spectrum-web-components/menu/sp-menu-divider.js";
9
+ import "@spectrum-web-components/menu/sp-menu-group.js";
10
+ export default {
11
+ component: "sp-menu",
12
+ title: "Menu Group"
13
+ };
14
+ export const mixed = () => {
15
+ let style = "italic";
16
+ let weight = "700";
17
+ let color = "blue";
18
+ let decoration = "overline";
19
+ const styleRules = ({
20
+ style: style2,
21
+ weight: weight2,
22
+ color: color2,
23
+ decoration: decoration2
24
+ }) => {
25
+ return `
2
26
  .style-rule {
3
- font-weight: ${e};
4
- font-style: ${p};
5
- color: ${u};
6
- text-decoration: ${t};
27
+ font-weight: ${weight2};
28
+ font-style: ${style2};
29
+ color: ${color2};
30
+ text-decoration: ${decoration2};
7
31
  }
8
- `;return o`
32
+ `;
33
+ };
34
+ const update = (event) => {
35
+ const { value, id } = event.target;
36
+ switch (id) {
37
+ case "font":
38
+ const values = value.split(",");
39
+ style = values.indexOf("italic") > -1 ? "italic" : "normal";
40
+ weight = values.indexOf("bold") > -1 ? "700" : "400";
41
+ break;
42
+ case "color":
43
+ color = value;
44
+ break;
45
+ case "decoration":
46
+ decoration = value;
47
+ break;
48
+ }
49
+ document.querySelector("#output").textContent = styleRules({
50
+ style,
51
+ weight,
52
+ color,
53
+ decoration
54
+ });
55
+ };
56
+ return html`
9
57
  <style>
10
58
  sp-popover {
11
59
  position: static;
@@ -13,7 +61,7 @@ import{html as o}from"@spectrum-web-components/base";import"@spectrum-web-compon
13
61
  }
14
62
  </style>
15
63
  <sp-popover open>
16
- <sp-menu label="Style/Color" @change=${p=>{const{value:e,id:u}=p.target;switch(u){case"font":const t=e.split(",");s=t.indexOf("italic")>-1?"italic":"normal",i=t.indexOf("bold")>-1?"700":"400";break;case"color":m=e;break;case"decoration":n=e;break}document.querySelector("#output").textContent=l({style:s,weight:i,color:m,decoration:n})}}>
64
+ <sp-menu label="Style/Color" @change=${update}>
17
65
  <sp-menu-group label="Font Style" selects="multiple" id="font">
18
66
  <sp-menu-item value="bold" selected>Bold</sp-menu-item>
19
67
  <sp-menu-item value="italic" selected>Italic</sp-menu-item>
@@ -46,10 +94,13 @@ import{html as o}from"@spectrum-web-components/base";import"@spectrum-web-compon
46
94
  id="output"
47
95
  style="font-family: var(--spectrum-alias-body-text-font-family);"
48
96
  >
49
- ${l({style:s,weight:i,color:m,decoration:n})}
97
+ ${styleRules({ style, weight, color, decoration })}
50
98
  </pre
51
99
  >
52
- `},inherit=()=>o`
100
+ `;
101
+ };
102
+ export const inherit = () => {
103
+ return html`
53
104
  <style>
54
105
  sp-popover {
55
106
  position: static;
@@ -79,4 +130,5 @@ import{html as o}from"@spectrum-web-components/base";import"@spectrum-web-compon
79
130
  </sp-menu>
80
131
  </sp-popover>
81
132
  `;
133
+ };
82
134
  //# sourceMappingURL=menu-group.stories.js.map
package/stories/menu-group.stories.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["menu-group.stories.ts"],
4
4
  "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 { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport { MenuGroup } from '@spectrum-web-components/menu';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-divider.js';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/menu/sp-menu-divider.js';\nimport '@spectrum-web-components/menu/sp-menu-group.js';\n\nexport default {\n component: 'sp-menu',\n title: 'Menu Group',\n};\n\nexport const mixed = (): TemplateResult => {\n let style = 'italic';\n let weight = '700';\n let color = 'blue';\n let decoration = 'overline';\n const styleRules = ({\n style,\n weight,\n color,\n decoration,\n }: {\n style: string;\n weight: string;\n color: string;\n decoration: string;\n }): string => {\n return `\n .style-rule {\n font-weight: ${weight};\n font-style: ${style};\n color: ${color};\n text-decoration: ${decoration};\n }\n `;\n };\n const update = (event: Event): void => {\n const { value, id } = event.target as MenuGroup;\n switch (id) {\n case 'font':\n const values = value.split(',');\n style = values.indexOf('italic') > -1 ? 'italic' : 'normal';\n weight = values.indexOf('bold') > -1 ? '700' : '400';\n break;\n case 'color':\n color = value;\n break;\n case 'decoration':\n decoration = value;\n break;\n }\n (document.querySelector('#output') as HTMLElement).textContent =\n styleRules({\n style,\n weight,\n color,\n decoration,\n });\n };\n return html`\n <style>\n sp-popover {\n position: static;\n float: left;\n }\n </style>\n <sp-popover open>\n <sp-menu label=\"Style/Color\" @change=${update}>\n <sp-menu-group label=\"Font Style\" selects=\"multiple\" id=\"font\">\n <sp-menu-item value=\"bold\" selected>Bold</sp-menu-item>\n <sp-menu-item value=\"italic\" selected>Italic</sp-menu-item>\n </sp-menu-group>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-group label=\"Text Color\" selects=\"single\" id=\"color\">\n <sp-menu-item value=\"black\">Black</sp-menu-item>\n <sp-menu-item value=\"blue\" selected>Blue</sp-menu-item>\n <sp-menu-item value=\"red\">Red</sp-menu-item>\n <sp-menu-item value=\"green\">Green</sp-menu-item>\n </sp-menu-group>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-group\n label=\"Text Decoration\"\n selects=\"single\"\n id=\"decoration\"\n >\n <sp-menu-item value=\"none\">None</sp-menu-item>\n <sp-menu-item value=\"overline\" selected>\n Overline\n </sp-menu-item>\n <sp-menu-item value=\"line-through\">\n Line-through\n </sp-menu-item>\n <sp-menu-item value=\"underline\">Underline</sp-menu-item>\n </sp-menu-group>\n </sp-menu>\n </sp-popover>\n <pre\n id=\"output\"\n style=\"font-family: var(--spectrum-alias-body-text-font-family);\"\n >\n ${styleRules({ style, weight, color, decoration })}\n </pre\n >\n `;\n};\n\nexport const inherit = (): TemplateResult => {\n return html`\n <style>\n sp-popover {\n position: static;\n float: left;\n }\n </style>\n <sp-popover open>\n <sp-menu label=\"Groceries\" selects=\"multiple\">\n <sp-menu-group label=\"Juice\" selects=\"inherit\">\n <sp-menu-item selected>Orange</sp-menu-item>\n <sp-menu-item selected>Apple</sp-menu-item>\n <sp-menu-item>Grape</sp-menu-item>\n </sp-menu-group>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-group label=\"Vegetables\" selects=\"inherit\">\n <sp-menu-item>Carrots</sp-menu-item>\n <sp-menu-item selected>Summer Squash</sp-menu-item>\n <sp-menu-item>Zuccini</sp-menu-item>\n </sp-menu-group>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-group label=\"Dry Goods\" selects=\"inherit\">\n <sp-menu-item>Ceral</sp-menu-item>\n <sp-menu-item selected>Flour</sp-menu-item>\n <sp-menu-item>Salt</sp-menu-item>\n <sp-menu-item>Sugar</sp-menu-item>\n </sp-menu-group>\n </sp-menu>\n </sp-popover>\n `;\n};\n"],
5
- "mappings": "AAWA,qDAGA,iDACA,yDACA,uDACA,iDACA,sDACA,yDACA,uDAEA,cAAe,CACX,UAAW,UACX,MAAO,YACX,EAEO,YAAM,OAAQ,IAAsB,CACvC,GAAI,GAAQ,SACR,EAAS,MACT,EAAQ,OACR,EAAa,WACjB,KAAM,GAAa,CAAC,CAChB,QACA,SACA,QACA,gBAOO;AAAA;AAAA,2BAEY;AAAA,0BACD;AAAA,qBACL;AAAA,+BACU;AAAA;AAAA,UA2B3B,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mDAvBQ,AAAC,GAAuB,CACnC,KAAM,CAAE,QAAO,MAAO,EAAM,OAC5B,OAAQ,OACC,OACD,KAAM,GAAS,EAAM,MAAM,GAAG,EAC9B,EAAQ,EAAO,QAAQ,QAAQ,EAAI,GAAK,SAAW,SACnD,EAAS,EAAO,QAAQ,MAAM,EAAI,GAAK,MAAQ,MAC/C,UACC,QACD,EAAQ,EACR,UACC,aACD,EAAa,EACb,MAER,AAAC,SAAS,cAAc,SAAS,EAAkB,YAC/C,EAAW,CACP,QACA,SACA,QACA,YACJ,CAAC,CACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cA0CU,EAAW,CAAE,QAAO,SAAQ,QAAO,YAAW,CAAC;AAAA;AAAA;AAAA,KAI7D,EAEa,QAAU,IACZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
6
- "names": []
5
+ "mappings": ";AAWA,SAAS,YAA4B;AAGrC,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AAEP,eAAe;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AACX;AAEO,aAAM,QAAQ,MAAsB;AACvC,MAAI,QAAQ;AACZ,MAAI,SAAS;AACb,MAAI,QAAQ;AACZ,MAAI,aAAa;AACjB,QAAM,aAAa,CAAC;AAAA,IAChB,OAAAA;AAAA,IACA,QAAAC;AAAA,IACA,OAAAC;AAAA,IACA,YAAAC;AAAA,EACJ,MAKc;AACV,WAAO;AAAA;AAAA,2BAEYF;AAAA,0BACDD;AAAA,qBACLE;AAAA,+BACUC;AAAA;AAAA;AAAA,EAG3B;AACA,QAAM,SAAS,CAAC,UAAuB;AACnC,UAAM,EAAE,OAAO,GAAG,IAAI,MAAM;AAC5B,YAAQ;AAAA,WACC;AACD,cAAM,SAAS,MAAM,MAAM,GAAG;AAC9B,gBAAQ,OAAO,QAAQ,QAAQ,IAAI,KAAK,WAAW;AACnD,iBAAS,OAAO,QAAQ,MAAM,IAAI,KAAK,QAAQ;AAC/C;AAAA,WACC;AACD,gBAAQ;AACR;AAAA,WACC;AACD,qBAAa;AACb;AAAA;AAER,IAAC,SAAS,cAAc,SAAS,EAAkB,cAC/C,WAAW;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACJ,CAAC;AAAA,EACT;AACA,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mDAQwC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAiCrC,WAAW,EAAE,OAAO,QAAQ,OAAO,WAAW,CAAC;AAAA;AAAA;AAAA;AAI7D;AAEO,aAAM,UAAU,MAAsB;AACzC,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA8BX;",
6
+ "names": ["style", "weight", "color", "decoration"]
7
7
  }
package/stories/menu-item.stories.js CHANGED
@@ -1,14 +1,31 @@
1
- import{html as e}from"@spectrum-web-components/base";import"@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js";import"@spectrum-web-components/menu/sp-menu.js";import"@spectrum-web-components/menu/sp-menu-item.js";import"@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js";export default{component:"sp-menu-item",title:"Menu Item"};export const Default=()=>e`
1
+ "use strict";
2
+ import { html } from "@spectrum-web-components/base";
3
+ import "@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js";
4
+ import "@spectrum-web-components/menu/sp-menu.js";
5
+ import "@spectrum-web-components/menu/sp-menu-item.js";
6
+ import "@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js";
7
+ export default {
8
+ component: "sp-menu-item",
9
+ title: "Menu Item"
10
+ };
11
+ export const Default = () => {
12
+ return html`
2
13
  <sp-menu>
3
14
  <sp-menu-item>Menu Item</sp-menu-item>
4
15
  </sp-menu>
5
- `,noWrap=()=>e`
16
+ `;
17
+ };
18
+ export const noWrap = () => {
19
+ return html`
6
20
  <sp-menu style="width: 150px;">
7
21
  <sp-menu-item no-wrap>
8
22
  Select a Country with a very long label, too long, in fact
9
23
  </sp-menu-item>
10
24
  </sp-menu>
11
- `,valueSlot=()=>e`
25
+ `;
26
+ };
27
+ export const valueSlot = () => {
28
+ return html`
12
29
  <style>
13
30
  kbd {
14
31
  font-family: var(--spectrum-alias-body-text-font-family);
@@ -29,7 +46,10 @@ import{html as e}from"@spectrum-web-components/base";import"@spectrum-web-compon
29
46
  <kbd slot="value">⌥​⌘​S</kbd>
30
47
  </sp-menu-item>
31
48
  </sp-menu>
32
- `,href=()=>e`
49
+ `;
50
+ };
51
+ export const href = () => {
52
+ return html`
33
53
  <sp-menu style="width: 150px;">
34
54
  <sp-menu-item
35
55
  href="https://opensource.adobe.com/spectrum-web-components"
@@ -39,4 +59,5 @@ import{html as e}from"@spectrum-web-components/base";import"@spectrum-web-compon
39
59
  </sp-menu-item>
40
60
  </sp-menu>
41
61
  `;
62
+ };
42
63
  //# sourceMappingURL=menu-item.stories.js.map
package/stories/menu-item.stories.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["menu-item.stories.ts"],
4
4
  "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 { html, TemplateResult } from '@spectrum-web-components/base';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js';\n\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-edit.js';\n\nexport default {\n component: 'sp-menu-item',\n title: 'Menu Item',\n};\n\nexport const Default = (): TemplateResult => {\n return html`\n <sp-menu>\n <sp-menu-item>Menu Item</sp-menu-item>\n </sp-menu>\n `;\n};\n\nexport const noWrap = (): TemplateResult => {\n return html`\n <sp-menu style=\"width: 150px;\">\n <sp-menu-item no-wrap>\n Select a Country with a very long label, too long, in fact\n </sp-menu-item>\n </sp-menu>\n `;\n};\n\nexport const valueSlot = (): TemplateResult => {\n /**\n * This story featurs zero width spaces between the characters in the `<kbd>` element.\n * While their absence has not caused issues in the local Storybook, the visual regression\n * suite was causig the `\u2318\u200B` character to display different between the various Menu Items\n * without the intevening zero width space character. When reviewing in the future,\n * `font-variant-ligatures: none` was also not enough to address this situation.\n */\n //\n //\n return html`\n <style>\n kbd {\n font-family: var(--spectrum-alias-body-text-font-family);\n white-space: nowrap;\n }\n </style>\n <sp-menu style=\"width: 150px;\" selects=\"single\">\n <sp-menu-item>\n Save\n <kbd slot=\"value\">\u2318\u200BS</kbd>\n </sp-menu-item>\n <sp-menu-item selected>\n Save As...\n <kbd slot=\"value\">\u21E7\u200B\u2318\u200BS</kbd>\n </sp-menu-item>\n <sp-menu-item disabled>\n Save All\n <kbd slot=\"value\">\u2325\u200B\u2318\u200BS</kbd>\n </sp-menu-item>\n </sp-menu>\n `;\n};\n\nexport const href = (): TemplateResult => {\n return html`\n <sp-menu style=\"width: 150px;\">\n <sp-menu-item\n href=\"https://opensource.adobe.com/spectrum-web-components\"\n >\n <sp-icon-edit slot=\"icon\"></sp-icon-edit>\n Edit the Documentation Site\n </sp-menu-item>\n </sp-menu>\n `;\n};\n"],
5
- "mappings": "AAWA,qDACA,sEAEA,iDACA,sDACA,sEAEA,cAAe,CACX,UAAW,eACX,MAAO,WACX,EAEO,YAAM,SAAU,IACZ;AAAA;AAAA;AAAA;AAAA,MAOE,OAAS,IACX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MASE,UAAY,IAUd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAwBE,KAAO,IACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
5
+ "mappings": ";AAWA,SAAS,YAA4B;AACrC,OAAO;AAEP,OAAO;AACP,OAAO;AACP,OAAO;AAEP,eAAe;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AACX;AAEO,aAAM,UAAU,MAAsB;AACzC,SAAO;AAAA;AAAA;AAAA;AAAA;AAKX;AAEO,aAAM,SAAS,MAAsB;AACxC,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOX;AAEO,aAAM,YAAY,MAAsB;AAU3C,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBX;AAEO,aAAM,OAAO,MAAsB;AACtC,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUX;",
6
6
  "names": []
7
7
  }
package/stories/menu.stories.js CHANGED
@@ -1,4 +1,20 @@
1
- import{html as e}from"@spectrum-web-components/base";import"@spectrum-web-components/menu/sp-menu.js";import"@spectrum-web-components/popover/sp-popover.js";import"@spectrum-web-components/action-menu/sp-action-menu.js";import"@spectrum-web-components/menu/sp-menu-item.js";import"@spectrum-web-components/menu/sp-menu-divider.js";import"@spectrum-web-components/menu/sp-menu-group.js";import"@spectrum-web-components/icon/sp-icon.js";import"@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark-circle.js";import"@spectrum-web-components/icons-workflow/icons/sp-icon-show-menu.js";export default{component:"sp-menu",title:"Menu"};export const Default=()=>e`
1
+ "use strict";
2
+ import { html } from "@spectrum-web-components/base";
3
+ import "@spectrum-web-components/menu/sp-menu.js";
4
+ import "@spectrum-web-components/popover/sp-popover.js";
5
+ import "@spectrum-web-components/action-menu/sp-action-menu.js";
6
+ import "@spectrum-web-components/menu/sp-menu-item.js";
7
+ import "@spectrum-web-components/menu/sp-menu-divider.js";
8
+ import "@spectrum-web-components/menu/sp-menu-group.js";
9
+ import "@spectrum-web-components/icon/sp-icon.js";
10
+ import "@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark-circle.js";
11
+ import "@spectrum-web-components/icons-workflow/icons/sp-icon-show-menu.js";
12
+ export default {
13
+ component: "sp-menu",
14
+ title: "Menu"
15
+ };
16
+ export const Default = () => {
17
+ return html`
2
18
  <sp-menu>
3
19
  <sp-menu-item>Deselect</sp-menu-item>
4
20
  <sp-menu-item>Select Inverse</sp-menu-item>
@@ -20,7 +36,10 @@ import{html as e}from"@spectrum-web-components/base";import"@spectrum-web-compon
20
36
  <sp-menu-item disabled>Make Work Path</sp-menu-item>
21
37
  </sp-menu>
22
38
  </sp-popover>
23
- `,singleSelect=()=>e`
39
+ `;
40
+ };
41
+ export const singleSelect = () => {
42
+ return html`
24
43
  <sp-menu selects="single">
25
44
  <sp-menu-item selected>Deselect</sp-menu-item>
26
45
  <sp-menu-item>Select Inverse</sp-menu-item>
@@ -42,7 +61,10 @@ import{html as e}from"@spectrum-web-components/base";import"@spectrum-web-compon
42
61
  <sp-menu-item disabled>Make Work Path</sp-menu-item>
43
62
  </sp-menu>
44
63
  </sp-popover>
45
- `,multipleSelect=()=>e`
64
+ `;
65
+ };
66
+ export const multipleSelect = () => {
67
+ return html`
46
68
  <sp-menu selects="multiple">
47
69
  <sp-menu-item>Deselect</sp-menu-item>
48
70
  <sp-menu-item>Select Inverse</sp-menu-item>
@@ -64,7 +86,10 @@ import{html as e}from"@spectrum-web-components/base";import"@spectrum-web-compon
64
86
  <sp-menu-item disabled>Make Work Path</sp-menu-item>
65
87
  </sp-menu>
66
88
  </sp-popover>
67
- `,headersAndIcons=()=>e`
89
+ `;
90
+ };
91
+ export const headersAndIcons = () => {
92
+ return html`
68
93
  <sp-popover open>
69
94
  <sp-menu>
70
95
  <sp-menu-group>
@@ -91,7 +116,11 @@ import{html as e}from"@spectrum-web-components/base";import"@spectrum-web-compon
91
116
  </sp-menu-group>
92
117
  </sp-menu>
93
118
  </sp-popover>
94
- `;headersAndIcons.storyName="Headers and Icons";export const Selected=()=>e`
119
+ `;
120
+ };
121
+ headersAndIcons.storyName = "Headers and Icons";
122
+ export const Selected = () => {
123
+ return html`
95
124
  <sp-popover open style="width: 200px;">
96
125
  <sp-menu>
97
126
  <sp-menu-group>
@@ -112,7 +141,10 @@ import{html as e}from"@spectrum-web-components/base";import"@spectrum-web-compon
112
141
  </sp-menu-group>
113
142
  </sp-menu>
114
143
  </sp-popover>
115
- `,MenuGroupSelects=()=>e`
144
+ `;
145
+ };
146
+ export const MenuGroupSelects = () => {
147
+ return html`
116
148
  <sp-popover open style="width: 200px;">
117
149
  <sp-menu selects="single">
118
150
  <sp-menu-group selects="inherit">
@@ -146,7 +178,10 @@ import{html as e}from"@spectrum-web-components/base";import"@spectrum-web-compon
146
178
  </sp-menu-group>
147
179
  </sp-menu>
148
180
  </sp-popover>
149
- `,selectedOffPage=()=>e`
181
+ `;
182
+ };
183
+ export const selectedOffPage = () => {
184
+ return html`
150
185
  <p style="height: 100vh; padding-bottom: 50px;">
151
186
  In this example the \`&lt;sp-menu-item selected&gt;\` element is off
152
187
  the visible page by default, but does not alter the page scroll on
@@ -158,7 +193,10 @@ import{html as e}from"@spectrum-web-components/base";import"@spectrum-web-compon
158
193
  street
159
194
  </sp-menu-item>
160
195
  </sp-menu>
161
- `,MenuGroupSelectsMultiple=()=>e`
196
+ `;
197
+ };
198
+ export const MenuGroupSelectsMultiple = () => {
199
+ return html`
162
200
  <sp-popover open style="width: 200px;">
163
201
  <sp-menu selects="multiple">
164
202
  <sp-menu-group selects="inherit">
@@ -193,4 +231,5 @@ import{html as e}from"@spectrum-web-components/base";import"@spectrum-web-compon
193
231
  </sp-menu>
194
232
  </sp-popover>
195
233
  `;
234
+ };
196
235
  //# sourceMappingURL=menu.stories.js.map
package/stories/menu.stories.js.map CHANGED
@@ -2,6 +2,6 @@
2
2
  "version": 3,
3
3
  "sources": ["menu.stories.ts"],
4
4
  "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 { html, TemplateResult } from '@spectrum-web-components/base';\n\nimport '@spectrum-web-components/menu/sp-menu.js';\nimport '@spectrum-web-components/popover/sp-popover.js';\nimport '@spectrum-web-components/action-menu/sp-action-menu.js';\nimport '@spectrum-web-components/menu/sp-menu-item.js';\nimport '@spectrum-web-components/menu/sp-menu-divider.js';\nimport '@spectrum-web-components/menu/sp-menu-group.js';\nimport '@spectrum-web-components/icon/sp-icon.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark-circle.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-show-menu.js';\n\nexport default {\n component: 'sp-menu',\n title: 'Menu',\n};\n\nexport const Default = (): TemplateResult => {\n return html`\n <sp-menu>\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-menu>\n\n <sp-popover open>\n <sp-menu>\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-menu>\n </sp-popover>\n `;\n};\n\nexport const singleSelect = (): TemplateResult => {\n return html`\n <sp-menu selects=\"single\">\n <sp-menu-item selected>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-menu>\n\n <sp-popover open>\n <sp-menu selects=\"single\">\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item selected>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-menu>\n </sp-popover>\n `;\n};\n\nexport const multipleSelect = (): TemplateResult => {\n return html`\n <sp-menu selects=\"multiple\">\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item>Select Inverse</sp-menu-item>\n <sp-menu-item selected>Feather...</sp-menu-item>\n <sp-menu-item>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item selected>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-menu>\n\n <sp-popover open>\n <sp-menu selects=\"multiple\">\n <sp-menu-item>Deselect</sp-menu-item>\n <sp-menu-item selected>Select Inverse</sp-menu-item>\n <sp-menu-item>Feather...</sp-menu-item>\n <sp-menu-item selected>Select and Mask...</sp-menu-item>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-item>Save Selection</sp-menu-item>\n <sp-menu-item disabled>Make Work Path</sp-menu-item>\n </sp-menu>\n </sp-popover>\n `;\n};\nexport const headersAndIcons = (): TemplateResult => {\n return html`\n <sp-popover open>\n <sp-menu>\n <sp-menu-group>\n <span slot=\"header\">Section Heading</span>\n <sp-menu-item>Action 1</sp-menu-item>\n <sp-menu-item>Action 2</sp-menu-item>\n <sp-menu-item>Action 3</sp-menu-item>\n </sp-menu-group>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-group>\n <span slot=\"header\">Section Heading</span>\n <sp-menu-item>\n <sp-icon-checkmark-circle\n slot=\"icon\"\n ></sp-icon-checkmark-circle>\n Save\n </sp-menu-item>\n <sp-menu-item disabled>\n <sp-icon-checkmark-circle\n slot=\"icon\"\n ></sp-icon-checkmark-circle>\n Download\n </sp-menu-item>\n </sp-menu-group>\n </sp-menu>\n </sp-popover>\n `;\n};\n\nheadersAndIcons.storyName = 'Headers and Icons';\n\nexport const Selected = (): TemplateResult => {\n return html`\n <sp-popover open style=\"width: 200px;\">\n <sp-menu>\n <sp-menu-group>\n <span slot=\"header\">San Francisco</span>\n <sp-menu-item>Financial District</sp-menu-item>\n <sp-menu-item>South of Market</sp-menu-item>\n <sp-menu-item>North Beach</sp-menu-item>\n </sp-menu-group>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-group selects=\"single\">\n <span slot=\"header\">Oakland</span>\n <sp-menu-item>City Center</sp-menu-item>\n <sp-menu-item disabled>Jack London Square</sp-menu-item>\n <sp-menu-item selected>\n My best friend's mom's house in the burbs just off\n Silverado street\n </sp-menu-item>\n </sp-menu-group>\n </sp-menu>\n </sp-popover>\n `;\n};\n\nexport const MenuGroupSelects = (): TemplateResult => {\n return html`\n <sp-popover open style=\"width: 200px;\">\n <sp-menu selects=\"single\">\n <sp-menu-group selects=\"inherit\">\n <span slot=\"header\">One of these</span>\n <sp-menu-item>Camden</sp-menu-item>\n <sp-menu-item>Cedar Riverside</sp-menu-item>\n <sp-menu-item>Downtown</sp-menu-item>\n <sp-menu-item>Northeast Arts District</sp-menu-item>\n <sp-menu-item selected>Uptown</sp-menu-item>\n </sp-menu-group>\n <sp-menu-group selects=\"inherit\">\n <span slot=\"header\">Or of these</span>\n <sp-menu-item>Lowertown</sp-menu-item>\n <sp-menu-item>Grand Ave</sp-menu-item>\n </sp-menu-group>\n <sp-menu-group selects=\"multiple\">\n <span slot=\"header\">Many of these</span>\n <sp-menu-item>Financial District</sp-menu-item>\n <sp-menu-item selected>South of Market</sp-menu-item>\n <sp-menu-item selected>North Beach</sp-menu-item>\n </sp-menu-group>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-group selects=\"single\">\n <span slot=\"header\">One of these</span>\n <sp-menu-item>City Center</sp-menu-item>\n <sp-menu-item disabled>Jack London Square</sp-menu-item>\n <sp-menu-item selected>\n My best friend's mom's house in the burbs just off\n Silverado street\n </sp-menu-item>\n </sp-menu-group>\n </sp-menu>\n </sp-popover>\n `;\n};\n\nexport const selectedOffPage = (): TemplateResult => {\n return html`\n <p style=\"height: 100vh; padding-bottom: 50px;\">\n In this example the \\`&lt;sp-menu-item selected&gt;\\` element is off\n the visible page by default, but does not alter the page scroll on\n load.\n </p>\n <sp-menu>\n <sp-menu-item selected style=\"padding-bottom: 50px;\">\n My best friend's mom's house in the burbs just off Silverado\n street\n </sp-menu-item>\n </sp-menu>\n `;\n};\n\nexport const MenuGroupSelectsMultiple = (): TemplateResult => {\n return html`\n <sp-popover open style=\"width: 200px;\">\n <sp-menu selects=\"multiple\">\n <sp-menu-group selects=\"inherit\">\n <span slot=\"header\">Many of these</span>\n <sp-menu-item>Camden</sp-menu-item>\n <sp-menu-item selected>Cedar Riverside</sp-menu-item>\n <sp-menu-item selected>Downtown</sp-menu-item>\n <sp-menu-item>Northeast Arts District</sp-menu-item>\n <sp-menu-item>Uptown</sp-menu-item>\n </sp-menu-group>\n <sp-menu-group selects=\"inherit\">\n <span slot=\"header\">And these, too</span>\n <sp-menu-item>Lowertown</sp-menu-item>\n <sp-menu-item selected>Grand Ave</sp-menu-item>\n </sp-menu-group>\n <sp-menu-group>\n <span slot=\"header\">None of these</span>\n <sp-menu-item>Financial District</sp-menu-item>\n <sp-menu-item>South of Market</sp-menu-item>\n <sp-menu-item>North Beach</sp-menu-item>\n </sp-menu-group>\n <sp-menu-divider></sp-menu-divider>\n <sp-menu-group selects=\"single\">\n <span slot=\"header\">One of these</span>\n <sp-menu-item>City Center</sp-menu-item>\n <sp-menu-item disabled>Jack London Square</sp-menu-item>\n <sp-menu-item selected>\n My best friend's mom's house in the burbs just off\n Silverado street\n </sp-menu-item>\n </sp-menu-group>\n </sp-menu>\n </sp-popover>\n `;\n};\n"],
5
- "mappings": "AAWA,qDAEA,iDACA,uDACA,+DACA,sDACA,yDACA,uDACA,iDACA,kFACA,2EAEA,cAAe,CACX,UAAW,UACX,MAAO,MACX,EAEO,YAAM,SAAU,IACZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAyBE,aAAe,IACjB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAyBE,eAAiB,IACnB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAwBE,gBAAkB,IACpB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MA8BX,gBAAgB,UAAY,oBAErB,YAAM,UAAW,IACb;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAwBE,iBAAmB,IACrB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAqCE,gBAAkB,IACpB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAeE,yBAA2B,IAC7B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
5
+ "mappings": ";AAWA,SAAS,YAA4B;AAErC,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AAEP,eAAe;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AACX;AAEO,aAAM,UAAU,MAAsB;AACzC,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBX;AAEO,aAAM,eAAe,MAAsB;AAC9C,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBX;AAEO,aAAM,iBAAiB,MAAsB;AAChD,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBX;AACO,aAAM,kBAAkB,MAAsB;AACjD,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA4BX;AAEA,gBAAgB,YAAY;AAErB,aAAM,WAAW,MAAsB;AAC1C,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBX;AAEO,aAAM,mBAAmB,MAAsB;AAClD,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmCX;AAEO,aAAM,kBAAkB,MAAsB;AACjD,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAaX;AAEO,aAAM,2BAA2B,MAAsB;AAC1D,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmCX;",
6
6
  "names": []
7
7
  }