@redvars/peacock 3.8.2 → 3.8.4

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 (225) hide show
  1. package/dist/accordion-item.js +15 -6
  2. package/dist/accordion-item.js.map +1 -1
  3. package/dist/accordion.js +12 -11
  4. package/dist/accordion.js.map +1 -1
  5. package/dist/alert.js +1 -0
  6. package/dist/alert.js.map +1 -1
  7. package/dist/app-bar.js +1 -0
  8. package/dist/app-bar.js.map +1 -1
  9. package/dist/assets/components.css +1 -1
  10. package/dist/assets/components.css.map +1 -1
  11. package/dist/assets/styles.css +1 -1
  12. package/dist/assets/styles.css.map +1 -1
  13. package/dist/avatar.js +1 -0
  14. package/dist/avatar.js.map +1 -1
  15. package/dist/babel-DBsfpl3B.js +18 -0
  16. package/dist/babel-DBsfpl3B.js.map +1 -0
  17. package/dist/badge.js +1 -0
  18. package/dist/badge.js.map +1 -1
  19. package/dist/bottom-sheet.js +1 -0
  20. package/dist/bottom-sheet.js.map +1 -1
  21. package/dist/breadcrumb-item.js +1 -0
  22. package/dist/breadcrumb-item.js.map +1 -1
  23. package/dist/breadcrumb.js +1 -0
  24. package/dist/breadcrumb.js.map +1 -1
  25. package/dist/button-group.js +5 -4
  26. package/dist/button-group.js.map +1 -1
  27. package/dist/button.js +9 -8
  28. package/dist/button.js.map +1 -1
  29. package/dist/calendar-column-view.js +1 -0
  30. package/dist/calendar-column-view.js.map +1 -1
  31. package/dist/calendar-month-view.js +1 -0
  32. package/dist/calendar-month-view.js.map +1 -1
  33. package/dist/calendar.js +1 -0
  34. package/dist/calendar.js.map +1 -1
  35. package/dist/canvas.js +1 -0
  36. package/dist/canvas.js.map +1 -1
  37. package/dist/card.js +23 -7
  38. package/dist/card.js.map +1 -1
  39. package/dist/cb-compound-expression.js +1 -0
  40. package/dist/cb-compound-expression.js.map +1 -1
  41. package/dist/cb-divider.js +1 -0
  42. package/dist/cb-divider.js.map +1 -1
  43. package/dist/cb-expression.js +1 -0
  44. package/dist/cb-expression.js.map +1 -1
  45. package/dist/cb-predicate.js +1 -0
  46. package/dist/cb-predicate.js.map +1 -1
  47. package/dist/{chart-bar-CYoGNXnK.js → chart-bar-CapLbc2e.js} +2 -1
  48. package/dist/{chart-bar-CYoGNXnK.js.map → chart-bar-CapLbc2e.js.map} +1 -1
  49. package/dist/chart-bar.js +1 -1
  50. package/dist/chart-doughnut.js +1 -0
  51. package/dist/chart-doughnut.js.map +1 -1
  52. package/dist/chart-pie.js +1 -0
  53. package/dist/chart-pie.js.map +1 -1
  54. package/dist/chart-stacked-bar.js +1 -1
  55. package/dist/checkbox.js +1 -0
  56. package/dist/checkbox.js.map +1 -1
  57. package/dist/chip.js +1 -0
  58. package/dist/chip.js.map +1 -1
  59. package/dist/clock.js +1 -0
  60. package/dist/clock.js.map +1 -1
  61. package/dist/code-editor.js +1 -0
  62. package/dist/code-editor.js.map +1 -1
  63. package/dist/code-highlighter.js +75 -11212
  64. package/dist/code-highlighter.js.map +1 -1
  65. package/dist/color-picker.js +701 -0
  66. package/dist/color-picker.js.map +1 -0
  67. package/dist/condition-builder.js +1 -0
  68. package/dist/condition-builder.js.map +1 -1
  69. package/dist/container.js +1 -0
  70. package/dist/container.js.map +1 -1
  71. package/dist/custom-elements-jsdocs.json +103 -10
  72. package/dist/custom-elements.json +1212 -586
  73. package/dist/divider.js +1 -0
  74. package/dist/divider.js.map +1 -1
  75. package/dist/dropdown-button.js +1 -0
  76. package/dist/dropdown-button.js.map +1 -1
  77. package/dist/elevation.js +1 -0
  78. package/dist/elevation.js.map +1 -1
  79. package/dist/empty-state.js +1 -0
  80. package/dist/empty-state.js.map +1 -1
  81. package/dist/estree-C2LDzX4U.js +47 -0
  82. package/dist/estree-C2LDzX4U.js.map +1 -0
  83. package/dist/fab.js +2 -3
  84. package/dist/fab.js.map +1 -1
  85. package/dist/field.js +1 -0
  86. package/dist/field.js.map +1 -1
  87. package/dist/{flow-designer-node-DsVwQTac.js → flow-designer-node-CGSm6cUH.js} +2 -1
  88. package/dist/{flow-designer-node-DsVwQTac.js.map → flow-designer-node-CGSm6cUH.js.map} +1 -1
  89. package/dist/flow-designer-node.js +1 -1
  90. package/dist/flow-designer.js +1 -1
  91. package/dist/html-D22sQuVy.js +27 -0
  92. package/dist/html-D22sQuVy.js.map +1 -0
  93. package/dist/html-editor.js +1 -0
  94. package/dist/html-editor.js.map +1 -1
  95. package/dist/icon-button.js +6 -5
  96. package/dist/icon-button.js.map +1 -1
  97. package/dist/icon.js +1 -0
  98. package/dist/icon.js.map +1 -1
  99. package/dist/index-_g_oLekF.js +14095 -0
  100. package/dist/index-_g_oLekF.js.map +1 -0
  101. package/dist/index.js +5 -4
  102. package/dist/index.js.map +1 -1
  103. package/dist/item.js +4 -2
  104. package/dist/item.js.map +1 -1
  105. package/dist/link.js +1 -0
  106. package/dist/link.js.map +1 -1
  107. package/dist/{list-D6JLh1uh.js → list-BBmnHm8f.js} +196 -20
  108. package/dist/list-BBmnHm8f.js.map +1 -0
  109. package/dist/list.js +2 -2
  110. package/dist/loader.js +6 -2
  111. package/dist/loader.js.map +1 -1
  112. package/dist/menu-item.js +104 -33
  113. package/dist/menu-item.js.map +1 -1
  114. package/dist/menu.js +5 -18
  115. package/dist/menu.js.map +1 -1
  116. package/dist/modal.js +1 -0
  117. package/dist/modal.js.map +1 -1
  118. package/dist/navigation-rail-item.js +22 -6
  119. package/dist/navigation-rail-item.js.map +1 -1
  120. package/dist/navigation-rail.js +23 -20
  121. package/dist/navigation-rail.js.map +1 -1
  122. package/dist/notification-manager.js +1 -0
  123. package/dist/notification-manager.js.map +1 -1
  124. package/dist/notification.js +1 -0
  125. package/dist/notification.js.map +1 -1
  126. package/dist/number-counter.js +1 -0
  127. package/dist/number-counter.js.map +1 -1
  128. package/dist/pagination.js +1 -0
  129. package/dist/pagination.js.map +1 -1
  130. package/dist/pierre-dark-DFWl0m-C.js +4 -0
  131. package/dist/pierre-dark-DFWl0m-C.js.map +1 -0
  132. package/dist/pierre-light-BEkAPImt.js +4 -0
  133. package/dist/pierre-light-BEkAPImt.js.map +1 -0
  134. package/dist/popover-content.js +1 -0
  135. package/dist/popover-content.js.map +1 -1
  136. package/dist/popover.js +1 -0
  137. package/dist/popover.js.map +1 -1
  138. package/dist/postcss-BhbitHaI.js +64 -0
  139. package/dist/postcss-BhbitHaI.js.map +1 -0
  140. package/dist/radio.js +1 -0
  141. package/dist/radio.js.map +1 -1
  142. package/dist/search.js +1 -0
  143. package/dist/search.js.map +1 -1
  144. package/dist/segmented-button-group.js +1 -0
  145. package/dist/segmented-button-group.js.map +1 -1
  146. package/dist/segmented-button.js +1 -0
  147. package/dist/segmented-button.js.map +1 -1
  148. package/dist/{select-Dwtk0RIU.js → select-D85kpjUt.js} +28 -7
  149. package/dist/{select-Dwtk0RIU.js.map → select-D85kpjUt.js.map} +1 -1
  150. package/dist/side-sheet.js +2 -1
  151. package/dist/side-sheet.js.map +1 -1
  152. package/dist/skeleton.js +1 -0
  153. package/dist/skeleton.js.map +1 -1
  154. package/dist/snackbar.js +1 -0
  155. package/dist/snackbar.js.map +1 -1
  156. package/dist/spinner.js +1 -0
  157. package/dist/spinner.js.map +1 -1
  158. package/dist/split-button.js +1 -0
  159. package/dist/split-button.js.map +1 -1
  160. package/dist/src/accordion/accordion-item.d.ts +1 -1
  161. package/dist/src/accordion/accordion.d.ts +3 -3
  162. package/dist/src/button/button/button.d.ts +2 -2
  163. package/dist/src/button/button-group/button-group.d.ts +4 -4
  164. package/dist/src/code-highlighter/code-highlighter.d.ts +2 -2
  165. package/dist/src/color-picker/color-picker.d.ts +85 -0
  166. package/dist/src/color-picker/index.d.ts +1 -0
  167. package/dist/src/index.d.ts +1 -0
  168. package/dist/src/item/item.d.ts +0 -1
  169. package/dist/src/list/list-item.d.ts +3 -1
  170. package/dist/src/list/list.d.ts +24 -0
  171. package/dist/src/menu/menu-item/menu-item.d.ts +1 -2
  172. package/dist/standalone-Ccq0tWwA.js +32 -0
  173. package/dist/standalone-Ccq0tWwA.js.map +1 -0
  174. package/dist/sub-menu.js +7 -1
  175. package/dist/sub-menu.js.map +1 -1
  176. package/dist/svg.js +1 -0
  177. package/dist/svg.js.map +1 -1
  178. package/dist/tab-group.js +1 -0
  179. package/dist/tab-group.js.map +1 -1
  180. package/dist/tab-panel.js +1 -0
  181. package/dist/tab-panel.js.map +1 -1
  182. package/dist/tab.js +1 -0
  183. package/dist/tab.js.map +1 -1
  184. package/dist/table.js +1 -0
  185. package/dist/table.js.map +1 -1
  186. package/dist/tabs.js +1 -0
  187. package/dist/tabs.js.map +1 -1
  188. package/dist/toolbar.js +1 -0
  189. package/dist/toolbar.js.map +1 -1
  190. package/dist/tooltip.js +1 -0
  191. package/dist/tooltip.js.map +1 -1
  192. package/dist/tsconfig.tsbuildinfo +1 -1
  193. package/package.json +1 -1
  194. package/readme.md +3 -3
  195. package/scss/mixin.scss +2 -0
  196. package/src/accordion/accordion-item.ts +16 -6
  197. package/src/accordion/accordion.scss +2 -2
  198. package/src/accordion/accordion.ts +7 -7
  199. package/src/button/button/button-base.scss +2 -1
  200. package/src/button/button/button-layers.scss +2 -6
  201. package/src/button/button/button.ts +3 -3
  202. package/src/button/button-group/button-group.ts +4 -4
  203. package/src/button/fab/fab.ts +0 -4
  204. package/src/card/card.scss +18 -5
  205. package/src/code-highlighter/code-highlighter.ts +94 -39
  206. package/src/color-picker/color-picker.scss +217 -0
  207. package/src/color-picker/color-picker.ts +478 -0
  208. package/src/color-picker/index.ts +1 -0
  209. package/src/index.ts +1 -0
  210. package/src/item/item.scss +3 -1
  211. package/src/item/item.ts +0 -1
  212. package/src/list/list-item.scss +5 -1
  213. package/src/list/list-item.ts +40 -14
  214. package/src/list/list.ts +164 -2
  215. package/src/loader.ts +4 -0
  216. package/src/menu/menu/menu.scss +4 -18
  217. package/src/menu/menu/menu.ts +0 -1
  218. package/src/menu/menu-item/menu-item.scss +73 -43
  219. package/src/menu/menu-item/menu-item.ts +60 -27
  220. package/src/menu/sub-menu/sub-menu.scss +5 -1
  221. package/src/navigation-rail/navigation-rail-item.scss +25 -8
  222. package/src/navigation-rail/navigation-rail.scss +25 -22
  223. package/src/side-sheet/side-sheet.ts +1 -1
  224. package/src/sidebar-menu/sidebar-menu-item.scss +14 -7
  225. package/dist/list-D6JLh1uh.js.map +0 -1
@@ -58,7 +58,7 @@ var css_248z = i`.button {
58
58
  }
59
59
 
60
60
  .focus-ring {
61
- z-index: 2;
61
+ z-index: 1;
62
62
  pointer-events: none;
63
63
  --focus-ring-container-shape-start-start: var(
64
64
  --private-button-container-shape-start-start,
@@ -97,7 +97,6 @@ var css_248z = i`.button {
97
97
  position: absolute;
98
98
  inset: 0;
99
99
  pointer-events: none;
100
- z-index: 2;
101
100
  --skeleton-container-shape-start-start: var(
102
101
  --private-button-container-shape-start-start,
103
102
  var(--private-button-container-shape)
@@ -149,7 +148,6 @@ var css_248z = i`.button {
149
148
  position: absolute;
150
149
  inset: 0;
151
150
  pointer-events: none;
152
- z-index: 0;
153
151
  border: var(--private-button-outline-width) solid var(--private-button-outline-color);
154
152
  opacity: var(--private-button-outline-opacity, 1);
155
153
  border-start-start-radius: var(--private-button-container-shape-start-start, var(--private-button-container-shape));
@@ -164,11 +162,12 @@ var css_248z = i`.button {
164
162
  }
165
163
 
166
164
  .tooltip {
167
- z-index: 3;
165
+ z-index: 1;
168
166
  }
169
167
 
170
168
  * {
171
169
  box-sizing: border-box;
170
+ -webkit-tap-highlight-color: transparent;
172
171
  }
173
172
 
174
173
  .screen-reader-only {
@@ -225,6 +224,7 @@ var css_248z = i`.button {
225
224
  text-decoration: none;
226
225
  color: inherit;
227
226
  cursor: pointer;
227
+ outline: none;
228
228
  }
229
229
  .native-link:link, .native-link:visited, .native-link:hover, .native-link:active {
230
230
  text-decoration: none;
@@ -238,7 +238,6 @@ var css_248z = i`.button {
238
238
  height: var(--button-height);
239
239
  padding: 0 var(--button-container-padding, var(--private-button-container-padding));
240
240
  width: 100%;
241
- z-index: 0;
242
241
  }
243
242
  .button .label {
244
243
  font-family: var(--font-family-sans) !important;
@@ -249,6 +248,8 @@ var css_248z = i`.button {
249
248
  color: var(--private-button-label-text-color);
250
249
  --icon-size: var(--button-icon-size, var(--private-button-icon-size));
251
250
  --icon-color: var(--private-button-label-text-color);
251
+ opacity: var(--private-button-label-text-opacity, 1);
252
+ display: inline-flex;
252
253
  pointer-events: none;
253
254
  }
254
255
  .button .touch {
@@ -1 +1 @@
1
- {"version":3,"file":"icon-button.js","sources":["../../src/button/icon-button/icon-button.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { when } from 'lit/directives/when.js';\nimport styles from './icon-button.scss';\nimport { isLink } from '@/__internal/utils/is-link.js';\nimport {\n dispatchActivationClick,\n isActivationClick,\n} from '@/__internal/utils/dispatch-event-utils.js';\nimport { DISABLED_REASON_ID } from '@/button/ButtonConstants.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport { mixinBaseButton } from '../base-button/base-button.js';\nimport { mixinHyperlink } from '@/__internal/mixins/hyperlink.js';\nimport { mixinDelegatesAria } from '@/__internal/aria/delegate.js';\nimport { mixinFormSubmitter } from '@/__internal/mixins/form-submitter.js';\nimport { mixinFormAssociated } from '@/__internal/mixins/form-associated.js';\nimport { mixinElementInternals } from '@/__internal/mixins/element-internals.js';\nimport { ARIAMixinStrict } from '@/__internal/aria/aria.js';\nimport type {\n ButtonColor,\n ButtonLevel,\n ButtonShape,\n ButtonSize,\n ButtonVariant,\n} from '@/button/ButtonTypes.js';\n\n/**\n * @label Icon Button\n * @tag wc-icon-button\n * @rawTag icon-button\n *\n * @summary Icon buttons allow users to take actions, and make choices, with a single tap.\n *\n * @overview\n * <p>Icon buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. IconButton labels express what action will occur when the user interacts with it.</p>\n *\n * @cssprop --button-container-shape: Defines the border radius of the button container shape.\n *\n * @cssprop --button-container-shape-start-start: Defines the start position of the button container shape.\n * @cssprop --button-container-shape-start-end: Defines the end position of the button container shape.\n * @cssprop --button-container-shape-end-start: Defines the start position of the button container shape.\n * @cssprop --button-container-shape-end-end: Defines the end position of the button container shape.\n *\n *\n * @cssprop --filled-button-container-color: Color of the filled button container.\n * @cssprop --filled-button-label-text-color: Text color of the filled button label.\n *\n * @cssprop --outlined-button-container-color: Color of the outlined button container.\n * @cssprop --outlined-button-label-text-color: Text color of the outlined button label.\n *\n * @cssprop --text-button-label-text-color: Text color of the text button label.\n *\n * @cssprop --tonal-button-container-color: Color of the tonal button container.\n * @cssprop --tonal-button-label-text-color: Text color of the tonal button label.\n *\n * @cssprop --elevated-button-container-color: Color of the elevated button container.\n * @cssprop --elevated-button-label-text-color: Text color of the elevated button label.\n *\n * @cssprop --neo-button-container-color: Color of the neo button container.\n * @cssprop --neo-button-label-text-color: Text color of the neo button label.\n *\n * @fires {CustomEvent} button:click - Dispatched when the button is clicked.\n *\n * @example\n * ```html\n * <wc-icon-button><wc-icon name=\"home\"></wc-icon></wc-icon-button>\n * ```\n * @tags display\n */\n@IndividualComponent\nexport class IconButton extends mixinBaseButton(\n mixinHyperlink(\n mixinDelegatesAria(\n mixinFormSubmitter(\n mixinFormAssociated(mixinElementInternals(LitElement)),\n ),\n ),\n ),\n) {\n // ── Static ───────────────────────────────────────────────────────────────\n\n /** @nocollapse */ // eslint-disable-next-line\n static override shadowRootOptions: ShadowRootInit = {\n mode: 'open',\n delegatesFocus: true,\n };\n\n static override styles = [styles];\n\n /**\n * Button size.\n * Possible values are `\"xs\"`, `\"sm\"`, `\"md\"`, `\"lg\"`, `\"xl\"`. Defaults to `\"sm\"`.\n */\n @property({ reflect: true }) size: ButtonSize = 'sm';\n\n /**\n * Type is preset of color and variant. Type will be only applied.\n *\n */\n @property({ type: String }) level?: ButtonLevel;\n\n /** Shape of the button container. */\n @property({ type: String, reflect: true }) shape?: ButtonShape = 'square';\n\n /**\n * The visual style of the button.\n *\n * Possible variant values:\n * `\"filled\"` is a filled button.\n * `\"outlined\"` is an outlined button.\n * `\"text\"` is a transparent button.\n * `\"tonal\"` is a light color button.\n * `\"elevated\"` is elevated button\n */\n @property({ reflect: true }) variant: ButtonVariant = 'filled';\n\n /**\n * Defines the primary color of the button. This can be set to predefined color names to apply specific color themes.\n */\n @property({ reflect: true }) color: ButtonColor = 'primary';\n\n /** When true, renders the button in a loading skeleton state. */\n @property({ type: Boolean, reflect: true }) skeleton: boolean = false;\n\n /** When true, the button acts as a toggle. Use with `selected`. */\n @property({ type: Boolean, reflect: true }) toggle: boolean = false;\n\n /** When true (and `toggle` is set), the button is in the selected/pressed state. */\n @property({ type: Boolean, reflect: true }) selected: boolean = false;\n\n /** Optional tooltip text displayed on hover. */\n @property() tooltip?: string;\n\n @query('.button') readonly buttonElement!: HTMLElement | null;\n\n constructor() {\n super();\n this.addEventListener('click', this.__dispatchClickWithThrottle);\n }\n\n __dispatchClick = (event: MouseEvent | KeyboardEvent) => {\n // If the button is soft-disabled or a disabled link, we need to explicitly\n // prevent the click from propagating to other event listeners as well as\n // prevent the default action.\n if (this.softDisabled || (this.disabled && this.href) || this.skeleton) {\n event.stopImmediatePropagation();\n event.preventDefault();\n return;\n }\n\n if (!isActivationClick(event) || !this.buttonElement) {\n return;\n }\n\n this.focus();\n dispatchActivationClick(this.buttonElement);\n };\n\n override focus() {\n this.buttonElement?.focus();\n }\n\n override blur() {\n this.buttonElement?.blur();\n }\n\n override firstUpdated(changedProperties: Map<PropertyKey, unknown>) {\n super.firstUpdated(changedProperties);\n this.__convertTypeToVariantAndColor();\n }\n\n __convertTypeToVariantAndColor() {\n if (this.type === 'primary') {\n this.color = 'primary';\n this.variant = 'filled';\n } else if (this.type === 'secondary') {\n this.color = 'surface';\n this.variant = 'filled';\n } else if (this.type === 'tertiary') {\n this.color = 'primary';\n this.variant = 'text';\n } else if (this.type === 'danger') {\n this.color = 'danger';\n this.variant = 'filled';\n }\n }\n\n renderDisabledReason(softDisabled: boolean) {\n if (softDisabled)\n return html`<div\n id=${DISABLED_REASON_ID}\n role=\"tooltip\"\n aria-label=${this.disabledReason}\n class=\"screen-reader-only\"\n >\n ${this.disabledReason}\n </div>`;\n return nothing;\n }\n\n renderTooltip() {\n if (this.tooltip) {\n const buttonId = isLink(this) ? 'link' : 'button';\n return html`<wc-tooltip class=\"tooltip\" for=${buttonId}\n >${this.tooltip}</wc-tooltip\n >`;\n }\n return nothing;\n }\n\n renderButtonContent() {\n return html`\n <slot class=\"icon-slot\"></slot>\n <div class=\"touch\"></div>\n ${this.renderDisabledReason(this.softDisabled)}\n `;\n }\n\n renderButtonElement() {\n const isElementLink = isLink(this);\n const { ariaLabel, ariaHasPopup, ariaExpanded } = this as ARIAMixinStrict;\n\n const cssClasses = {\n button: true,\n 'native-button': !isElementLink,\n 'native-link': isElementLink,\n };\n\n if (!isLink(this)) {\n return html`<button\n class=${classMap(cssClasses)}\n id=\"button\"\n aria-label=\"${ariaLabel || nothing}\"\n aria-haspopup=\"${ariaHasPopup || nothing}\"\n aria-expanded=\"${ariaExpanded || nothing}\"\n aria-describedby=${ifDefined(\n this.softDisabled ? DISABLED_REASON_ID : undefined,\n )}\n ?aria-disabled=${this.softDisabled}\n ?disabled=${this.disabled}\n >\n ${this.renderButtonContent()}\n </button>`;\n }\n return html`<a\n class=${classMap(cssClasses)}\n id=\"link\"\n href=${this.href}\n target=${this.target}\n tabindex=${this.disabled ? '-1' : '0'}\n aria-label=\"${ariaLabel || nothing}\"\n aria-haspopup=\"${ariaHasPopup || nothing}\"\n aria-expanded=\"${ariaExpanded || nothing}\"\n aria-describedby=${ifDefined(\n this.softDisabled ? DISABLED_REASON_ID : undefined,\n )}\n ?aria-disabled=${this.softDisabled}\n >\n ${this.renderButtonContent()}\n </a>`;\n }\n\n // ── Render ────────────────────────────────────────────────────────────────\n\n override render() {\n const buttonId = isLink(this) ? 'link' : 'button';\n\n return html`\n <wc-focus-ring class=\"focus-ring\" for=${buttonId}></wc-focus-ring>\n <wc-elevation class=\"elevation\"></wc-elevation>\n ${when(\n this.variant === 'neo',\n () => html`<div class=\"neo-background\"></div>`,\n )}\n <div class=\"background\"></div>\n ${when(\n this.variant === 'outlined' || this.variant === 'neo',\n () => html`<div class=\"outline\"></div>`,\n )}\n <wc-ripple class=\"ripple\" for=\"button\"></wc-ripple>\n <wc-skeleton class=\"skeleton\"></wc-skeleton>\n\n ${this.renderButtonElement()} ${this.renderTooltip()}\n `;\n }\n}\n"],"names":["LitElement","html","nothing","classMap","ifDefined","when","styles","property","query"],"mappings":"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"}
1
+ {"version":3,"file":"icon-button.js","sources":["../../src/button/icon-button/icon-button.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { when } from 'lit/directives/when.js';\nimport styles from './icon-button.scss';\nimport { isLink } from '@/__internal/utils/is-link.js';\nimport {\n dispatchActivationClick,\n isActivationClick,\n} from '@/__internal/utils/dispatch-event-utils.js';\nimport { DISABLED_REASON_ID } from '@/button/ButtonConstants.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport { mixinBaseButton } from '../base-button/base-button.js';\nimport { mixinHyperlink } from '@/__internal/mixins/hyperlink.js';\nimport { mixinDelegatesAria } from '@/__internal/aria/delegate.js';\nimport { mixinFormSubmitter } from '@/__internal/mixins/form-submitter.js';\nimport { mixinFormAssociated } from '@/__internal/mixins/form-associated.js';\nimport { mixinElementInternals } from '@/__internal/mixins/element-internals.js';\nimport { ARIAMixinStrict } from '@/__internal/aria/aria.js';\nimport type {\n ButtonColor,\n ButtonLevel,\n ButtonShape,\n ButtonSize,\n ButtonVariant,\n} from '@/button/ButtonTypes.js';\n\n/**\n * @label Icon Button\n * @tag wc-icon-button\n * @rawTag icon-button\n *\n * @summary Icon buttons allow users to take actions, and make choices, with a single tap.\n *\n * @overview\n * <p>Icon buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. IconButton labels express what action will occur when the user interacts with it.</p>\n *\n * @cssprop --button-container-shape: Defines the border radius of the button container shape.\n *\n * @cssprop --button-container-shape-start-start: Defines the start position of the button container shape.\n * @cssprop --button-container-shape-start-end: Defines the end position of the button container shape.\n * @cssprop --button-container-shape-end-start: Defines the start position of the button container shape.\n * @cssprop --button-container-shape-end-end: Defines the end position of the button container shape.\n *\n *\n * @cssprop --filled-button-container-color: Color of the filled button container.\n * @cssprop --filled-button-label-text-color: Text color of the filled button label.\n *\n * @cssprop --outlined-button-container-color: Color of the outlined button container.\n * @cssprop --outlined-button-label-text-color: Text color of the outlined button label.\n *\n * @cssprop --text-button-label-text-color: Text color of the text button label.\n *\n * @cssprop --tonal-button-container-color: Color of the tonal button container.\n * @cssprop --tonal-button-label-text-color: Text color of the tonal button label.\n *\n * @cssprop --elevated-button-container-color: Color of the elevated button container.\n * @cssprop --elevated-button-label-text-color: Text color of the elevated button label.\n *\n * @cssprop --neo-button-container-color: Color of the neo button container.\n * @cssprop --neo-button-label-text-color: Text color of the neo button label.\n *\n * @fires {CustomEvent} button:click - Dispatched when the button is clicked.\n *\n * @example\n * ```html\n * <wc-icon-button><wc-icon name=\"home\"></wc-icon></wc-icon-button>\n * ```\n * @tags display\n */\n@IndividualComponent\nexport class IconButton extends mixinBaseButton(\n mixinHyperlink(\n mixinDelegatesAria(\n mixinFormSubmitter(\n mixinFormAssociated(mixinElementInternals(LitElement)),\n ),\n ),\n ),\n) {\n // ── Static ───────────────────────────────────────────────────────────────\n\n /** @nocollapse */ // eslint-disable-next-line\n static override shadowRootOptions: ShadowRootInit = {\n mode: 'open',\n delegatesFocus: true,\n };\n\n static override styles = [styles];\n\n /**\n * Button size.\n * Possible values are `\"xs\"`, `\"sm\"`, `\"md\"`, `\"lg\"`, `\"xl\"`. Defaults to `\"sm\"`.\n */\n @property({ reflect: true }) size: ButtonSize = 'sm';\n\n /**\n * Type is preset of color and variant. Type will be only applied.\n *\n */\n @property({ type: String }) level?: ButtonLevel;\n\n /** Shape of the button container. */\n @property({ type: String, reflect: true }) shape?: ButtonShape = 'square';\n\n /**\n * The visual style of the button.\n *\n * Possible variant values:\n * `\"filled\"` is a filled button.\n * `\"outlined\"` is an outlined button.\n * `\"text\"` is a transparent button.\n * `\"tonal\"` is a light color button.\n * `\"elevated\"` is elevated button\n */\n @property({ reflect: true }) variant: ButtonVariant = 'filled';\n\n /**\n * Defines the primary color of the button. This can be set to predefined color names to apply specific color themes.\n */\n @property({ reflect: true }) color: ButtonColor = 'primary';\n\n /** When true, renders the button in a loading skeleton state. */\n @property({ type: Boolean, reflect: true }) skeleton: boolean = false;\n\n /** When true, the button acts as a toggle. Use with `selected`. */\n @property({ type: Boolean, reflect: true }) toggle: boolean = false;\n\n /** When true (and `toggle` is set), the button is in the selected/pressed state. */\n @property({ type: Boolean, reflect: true }) selected: boolean = false;\n\n /** Optional tooltip text displayed on hover. */\n @property() tooltip?: string;\n\n @query('.button') readonly buttonElement!: HTMLElement | null;\n\n constructor() {\n super();\n this.addEventListener('click', this.__dispatchClickWithThrottle);\n }\n\n __dispatchClick = (event: MouseEvent | KeyboardEvent) => {\n // If the button is soft-disabled or a disabled link, we need to explicitly\n // prevent the click from propagating to other event listeners as well as\n // prevent the default action.\n if (this.softDisabled || (this.disabled && this.href) || this.skeleton) {\n event.stopImmediatePropagation();\n event.preventDefault();\n return;\n }\n\n if (!isActivationClick(event) || !this.buttonElement) {\n return;\n }\n\n this.focus();\n dispatchActivationClick(this.buttonElement);\n };\n\n override focus() {\n this.buttonElement?.focus();\n }\n\n override blur() {\n this.buttonElement?.blur();\n }\n\n override firstUpdated(changedProperties: Map<PropertyKey, unknown>) {\n super.firstUpdated(changedProperties);\n this.__convertTypeToVariantAndColor();\n }\n\n __convertTypeToVariantAndColor() {\n if (this.type === 'primary') {\n this.color = 'primary';\n this.variant = 'filled';\n } else if (this.type === 'secondary') {\n this.color = 'surface';\n this.variant = 'filled';\n } else if (this.type === 'tertiary') {\n this.color = 'primary';\n this.variant = 'text';\n } else if (this.type === 'danger') {\n this.color = 'danger';\n this.variant = 'filled';\n }\n }\n\n renderDisabledReason(softDisabled: boolean) {\n if (softDisabled)\n return html`<div\n id=${DISABLED_REASON_ID}\n role=\"tooltip\"\n aria-label=${this.disabledReason}\n class=\"screen-reader-only\"\n >\n ${this.disabledReason}\n </div>`;\n return nothing;\n }\n\n renderTooltip() {\n if (this.tooltip) {\n const buttonId = isLink(this) ? 'link' : 'button';\n return html`<wc-tooltip class=\"tooltip\" for=${buttonId}\n >${this.tooltip}</wc-tooltip\n >`;\n }\n return nothing;\n }\n\n renderButtonContent() {\n return html`\n <slot class=\"icon-slot\"></slot>\n <div class=\"touch\"></div>\n ${this.renderDisabledReason(this.softDisabled)}\n `;\n }\n\n renderButtonElement() {\n const isElementLink = isLink(this);\n const { ariaLabel, ariaHasPopup, ariaExpanded } = this as ARIAMixinStrict;\n\n const cssClasses = {\n button: true,\n 'native-button': !isElementLink,\n 'native-link': isElementLink,\n };\n\n if (!isLink(this)) {\n return html`<button\n class=${classMap(cssClasses)}\n id=\"button\"\n aria-label=\"${ariaLabel || nothing}\"\n aria-haspopup=\"${ariaHasPopup || nothing}\"\n aria-expanded=\"${ariaExpanded || nothing}\"\n aria-describedby=${ifDefined(\n this.softDisabled ? DISABLED_REASON_ID : undefined,\n )}\n ?aria-disabled=${this.softDisabled}\n ?disabled=${this.disabled}\n >\n ${this.renderButtonContent()}\n </button>`;\n }\n return html`<a\n class=${classMap(cssClasses)}\n id=\"link\"\n href=${this.href}\n target=${this.target}\n tabindex=${this.disabled ? '-1' : '0'}\n aria-label=\"${ariaLabel || nothing}\"\n aria-haspopup=\"${ariaHasPopup || nothing}\"\n aria-expanded=\"${ariaExpanded || nothing}\"\n aria-describedby=${ifDefined(\n this.softDisabled ? DISABLED_REASON_ID : undefined,\n )}\n ?aria-disabled=${this.softDisabled}\n >\n ${this.renderButtonContent()}\n </a>`;\n }\n\n // ── Render ────────────────────────────────────────────────────────────────\n\n override render() {\n const buttonId = isLink(this) ? 'link' : 'button';\n\n return html`\n <wc-focus-ring class=\"focus-ring\" for=${buttonId}></wc-focus-ring>\n <wc-elevation class=\"elevation\"></wc-elevation>\n ${when(\n this.variant === 'neo',\n () => html`<div class=\"neo-background\"></div>`,\n )}\n <div class=\"background\"></div>\n ${when(\n this.variant === 'outlined' || this.variant === 'neo',\n () => html`<div class=\"outline\"></div>`,\n )}\n <wc-ripple class=\"ripple\" for=\"button\"></wc-ripple>\n <wc-skeleton class=\"skeleton\"></wc-skeleton>\n\n ${this.renderButtonElement()} ${this.renderTooltip()}\n `;\n }\n}\n"],"names":["LitElement","html","nothing","classMap","ifDefined","when","styles","property","query"],"mappings":"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"}
package/dist/icon.js CHANGED
@@ -7,6 +7,7 @@ import './unsafe-html-Ct0N2_UU.js';
7
7
 
8
8
  var css_248z = i`* {
9
9
  box-sizing: border-box;
10
+ -webkit-tap-highlight-color: transparent;
10
11
  }
11
12
 
12
13
  .screen-reader-only {
package/dist/icon.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"icon.js","sources":["../../src/icon/icon.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\n\nimport { sanitizeSvg } from '@/__internal/utils/sanitize-svg.js';\n\nimport { fetchIcon, fetchSVG } from './datasource.js';\nimport styles from './icon.scss';\nimport IndividualComponent from '@/IndividualComponent.js';\n\nexport type IconProvider = 'material-symbols' | 'material-icons';\n/**\n * @label Icon\n * @tag wc-icon\n * @rawTag icon\n * @summary Icons are visual symbols used to represent ideas, objects, or actions.\n * @overview Icons are visual symbols used to represent ideas, objects, or actions. They communicate messages at a glance, afford interactivity, and draw attention to important information.\n *\n * @cssprop --icon-color - Controls the color of the icon.\n * @cssprop [--icon-size=1rem] - Controls the size of the icon. Defaults to \"1rem\"\n *\n * @example\n * ```html\n * <wc-icon name=\"home\" style=\"--icon-size: 2rem;\"></wc-icon>\n * ```\n *\n */\n@IndividualComponent\nexport class Icon extends LitElement {\n static styles = [styles];\n\n /**\n * The identifier for the icon.\n * This name corresponds to a specific SVG asset in the icon set.\n */\n @property({ type: String, reflect: true }) name?: string;\n\n /** URL of an external SVG file to fetch and render inline. */\n @property({ type: String, reflect: true }) src?: string;\n\n /** Icon library provider. Defaults to `\"material-symbols\"`. */\n @property({ type: String }) provider: IconProvider = 'material-symbols';\n\n /** Rendered SVG markup, updated after each successful fetch. */\n @state()\n private svgContent: string = '';\n\n /** True while an SVG fetch is in-flight. */\n @state() // @ts-ignore\n private loading: boolean = false;\n\n /** Holds the last fetch error, if any. */\n @state()\n private error: Error | null = null;\n\n // ── Private fields ────────────────────────────────────────────────────────\n\n /** Monotonically incrementing token used to discard stale fetch results. */\n private _fetchId = 0;\n\n /** Timer handle for debouncing rapid property changes. */\n private _debounceTimer: number | undefined;\n\n // ── Lifecycle ─────────────────────────────────────────────────────────────\n\n firstUpdated() {\n // perform initial fetch once component is connected and rendered\n this.__scheduleUpdate();\n }\n\n updated(changedProperties: any) {\n // only refetch when name or src changed\n if (changedProperties.has('name') || changedProperties.has('src')) {\n this.__scheduleUpdate();\n }\n }\n\n // ── Private methods ───────────────────────────────────────────────────────\n\n // small debounce to coalesce rapid changes (50ms)\n private __scheduleUpdate() {\n if (this._debounceTimer) {\n clearTimeout(this._debounceTimer as any);\n }\n // @ts-ignore - setTimeout in DOM returns number\n this._debounceTimer = window.setTimeout(() => this.__updateSvg(), 50);\n }\n\n /** @internal */\n private async __updateSvg() {\n this._fetchId += 1;\n const currentId = this._fetchId;\n this.loading = true;\n this.error = null;\n\n try {\n let raw: string | undefined;\n\n if (this.name) {\n raw = await fetchIcon(this.name, this.provider);\n } else if (this.src) {\n raw = await fetchSVG(this.src);\n } else {\n raw = '';\n }\n\n // If another fetch started after this one, ignore this result\n if (currentId !== this._fetchId) return;\n\n if (raw) {\n this.svgContent = sanitizeSvg(raw);\n } else {\n this.svgContent = '';\n }\n } catch (err: any) {\n // capture and surface error, but avoid throwing\n this.error = err instanceof Error ? err : new Error(String(err));\n this.svgContent = '';\n // bubble an event so consumers can react\n this.dispatchEvent(\n new CustomEvent('icon-error', {\n detail: { name: this.name, src: this.src, error: this.error },\n bubbles: true,\n composed: true,\n }),\n );\n } finally {\n // ensure loading is cleared unless another fetch started\n if (currentId === this._fetchId) {\n this.loading = false;\n }\n }\n }\n\n // ── Render ────────────────────────────────────────────────────────────────\n\n render() {\n // accessible wrapper; consumers can provide a fallback via <slot name=\"fallback\">.\n return html` <div class=\"icon\">\n ${this.svgContent\n ? unsafeSVG(this.svgContent)\n : html`<slot name=\"fallback\"></slot>`}\n </div>`;\n }\n}\n"],"names":["LitElement","html","unsafeSVG","styles","property","state"],"mappings":"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"}
1
+ {"version":3,"file":"icon.js","sources":["../../src/icon/icon.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\n\nimport { sanitizeSvg } from '@/__internal/utils/sanitize-svg.js';\n\nimport { fetchIcon, fetchSVG } from './datasource.js';\nimport styles from './icon.scss';\nimport IndividualComponent from '@/IndividualComponent.js';\n\nexport type IconProvider = 'material-symbols' | 'material-icons';\n/**\n * @label Icon\n * @tag wc-icon\n * @rawTag icon\n * @summary Icons are visual symbols used to represent ideas, objects, or actions.\n * @overview Icons are visual symbols used to represent ideas, objects, or actions. They communicate messages at a glance, afford interactivity, and draw attention to important information.\n *\n * @cssprop --icon-color - Controls the color of the icon.\n * @cssprop [--icon-size=1rem] - Controls the size of the icon. Defaults to \"1rem\"\n *\n * @example\n * ```html\n * <wc-icon name=\"home\" style=\"--icon-size: 2rem;\"></wc-icon>\n * ```\n *\n */\n@IndividualComponent\nexport class Icon extends LitElement {\n static styles = [styles];\n\n /**\n * The identifier for the icon.\n * This name corresponds to a specific SVG asset in the icon set.\n */\n @property({ type: String, reflect: true }) name?: string;\n\n /** URL of an external SVG file to fetch and render inline. */\n @property({ type: String, reflect: true }) src?: string;\n\n /** Icon library provider. Defaults to `\"material-symbols\"`. */\n @property({ type: String }) provider: IconProvider = 'material-symbols';\n\n /** Rendered SVG markup, updated after each successful fetch. */\n @state()\n private svgContent: string = '';\n\n /** True while an SVG fetch is in-flight. */\n @state() // @ts-ignore\n private loading: boolean = false;\n\n /** Holds the last fetch error, if any. */\n @state()\n private error: Error | null = null;\n\n // ── Private fields ────────────────────────────────────────────────────────\n\n /** Monotonically incrementing token used to discard stale fetch results. */\n private _fetchId = 0;\n\n /** Timer handle for debouncing rapid property changes. */\n private _debounceTimer: number | undefined;\n\n // ── Lifecycle ─────────────────────────────────────────────────────────────\n\n firstUpdated() {\n // perform initial fetch once component is connected and rendered\n this.__scheduleUpdate();\n }\n\n updated(changedProperties: any) {\n // only refetch when name or src changed\n if (changedProperties.has('name') || changedProperties.has('src')) {\n this.__scheduleUpdate();\n }\n }\n\n // ── Private methods ───────────────────────────────────────────────────────\n\n // small debounce to coalesce rapid changes (50ms)\n private __scheduleUpdate() {\n if (this._debounceTimer) {\n clearTimeout(this._debounceTimer as any);\n }\n // @ts-ignore - setTimeout in DOM returns number\n this._debounceTimer = window.setTimeout(() => this.__updateSvg(), 50);\n }\n\n /** @internal */\n private async __updateSvg() {\n this._fetchId += 1;\n const currentId = this._fetchId;\n this.loading = true;\n this.error = null;\n\n try {\n let raw: string | undefined;\n\n if (this.name) {\n raw = await fetchIcon(this.name, this.provider);\n } else if (this.src) {\n raw = await fetchSVG(this.src);\n } else {\n raw = '';\n }\n\n // If another fetch started after this one, ignore this result\n if (currentId !== this._fetchId) return;\n\n if (raw) {\n this.svgContent = sanitizeSvg(raw);\n } else {\n this.svgContent = '';\n }\n } catch (err: any) {\n // capture and surface error, but avoid throwing\n this.error = err instanceof Error ? err : new Error(String(err));\n this.svgContent = '';\n // bubble an event so consumers can react\n this.dispatchEvent(\n new CustomEvent('icon-error', {\n detail: { name: this.name, src: this.src, error: this.error },\n bubbles: true,\n composed: true,\n }),\n );\n } finally {\n // ensure loading is cleared unless another fetch started\n if (currentId === this._fetchId) {\n this.loading = false;\n }\n }\n }\n\n // ── Render ────────────────────────────────────────────────────────────────\n\n render() {\n // accessible wrapper; consumers can provide a fallback via <slot name=\"fallback\">.\n return html` <div class=\"icon\">\n ${this.svgContent\n ? unsafeSVG(this.svgContent)\n : html`<slot name=\"fallback\"></slot>`}\n </div>`;\n }\n}\n"],"names":["LitElement","html","unsafeSVG","styles","property","state"],"mappings":"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"}