@redvars/peacock 3.6.1 → 3.6.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 (71) hide show
  1. package/dist/assets/styles.css +1 -1
  2. package/dist/assets/styles.css.map +1 -1
  3. package/dist/assets/tokens.css +1 -1
  4. package/dist/assets/tokens.css.map +1 -1
  5. package/dist/{button-colors-Ccys3hvS.js → button-colors-AvGh22Zn.js} +18 -18
  6. package/dist/{button-colors-Ccys3hvS.js.map → button-colors-AvGh22Zn.js.map} +1 -1
  7. package/dist/button-group.js +2 -2
  8. package/dist/button.js +2 -3
  9. package/dist/button.js.map +1 -1
  10. package/dist/card.js +1 -1
  11. package/dist/card.js.map +1 -1
  12. package/dist/code-highlighter.js +34 -9
  13. package/dist/code-highlighter.js.map +1 -1
  14. package/dist/custom-elements-jsdocs.json +661 -73
  15. package/dist/custom-elements.json +718 -80
  16. package/dist/flow-designer.js +1402 -8
  17. package/dist/flow-designer.js.map +1 -1
  18. package/dist/icon-CueRR7wx.js +260 -0
  19. package/dist/icon-CueRR7wx.js.map +1 -0
  20. package/dist/{icon-button-CK1ZuE-2.js → icon-button-ohxHhy4t.js} +2 -2
  21. package/dist/{icon-button-CK1ZuE-2.js.map → icon-button-ohxHhy4t.js.map} +1 -1
  22. package/dist/index.js +9 -8
  23. package/dist/index.js.map +1 -1
  24. package/dist/modal.js +11 -11
  25. package/dist/modal.js.map +1 -1
  26. package/dist/{navigation-rail-DTTkqohi.js → navigation-rail-CD7IrqbN.js} +247 -123
  27. package/dist/navigation-rail-CD7IrqbN.js.map +1 -0
  28. package/dist/peacock-loader.js +30 -30
  29. package/dist/peacock-loader.js.map +1 -1
  30. package/dist/{popover-NC7b1lTq.js → popover-DUPmMVWS.js} +9 -4
  31. package/dist/{popover-NC7b1lTq.js.map → popover-DUPmMVWS.js.map} +1 -1
  32. package/dist/popover.js +1 -1
  33. package/dist/src/__controllers/floating-controller.d.ts +1 -0
  34. package/dist/src/avatar/avatar.d.ts +1 -1
  35. package/dist/src/breadcrumb/breadcrumb/breadcrumb.d.ts +0 -1
  36. package/dist/src/chip/chip/chip.d.ts +14 -11
  37. package/dist/src/chip/chip-set/chip-set.d.ts +20 -0
  38. package/dist/src/chip/chip-set/index.d.ts +1 -0
  39. package/dist/src/code-highlighter/code-highlighter.d.ts +4 -0
  40. package/dist/src/index.d.ts +1 -0
  41. package/dist/src/menu/menu/menu.d.ts +1 -0
  42. package/dist/src/modal/modal.d.ts +1 -1
  43. package/dist/test/chip.test.d.ts +1 -0
  44. package/dist/tsconfig.tsbuildinfo +1 -1
  45. package/package.json +1 -1
  46. package/readme.md +2 -2
  47. package/scss/styles.scss +3 -3
  48. package/scss/tokens.css +1 -1
  49. package/src/__controllers/floating-controller.ts +9 -3
  50. package/src/avatar/avatar.scss +4 -4
  51. package/src/avatar/avatar.ts +1 -1
  52. package/src/breadcrumb/breadcrumb/breadcrumb.ts +0 -1
  53. package/src/button/button/button.scss +17 -17
  54. package/src/button/button/button.ts +1 -2
  55. package/src/card/card.ts +1 -1
  56. package/src/chip/chip/chip.scss +119 -45
  57. package/src/chip/chip/chip.ts +97 -38
  58. package/src/chip/chip-set/chip-set.scss +13 -0
  59. package/src/chip/chip-set/chip-set.ts +25 -0
  60. package/src/chip/chip-set/index.ts +1 -0
  61. package/src/code-highlighter/code-highlighter.ts +33 -6
  62. package/src/field/field.scss +1 -1
  63. package/src/index.ts +1 -0
  64. package/src/menu/menu/menu.ts +11 -0
  65. package/src/modal/modal.scss +10 -10
  66. package/src/modal/modal.ts +1 -1
  67. package/src/peacock-loader.ts +24 -22
  68. package/dist/flow-designer-DvTUrDp5.js +0 -1656
  69. package/dist/flow-designer-DvTUrDp5.js.map +0 -1
  70. package/dist/navigation-rail-DTTkqohi.js.map +0 -1
  71. package/src/chip/chip/chip-colors.scss +0 -31
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/dist/modal.js CHANGED
@@ -15,19 +15,19 @@ var css_248z = i`@charset "UTF-8";
15
15
 
16
16
  :host {
17
17
  display: contents;
18
- --modal-container-color: var(--color-surface-container-high, #ece6f0);
19
- --modal-scrim-color: rgba(0, 0, 0, 0.32);
20
- --modal-shape: var(--shape-corner-extra-large, 28px);
18
+ --modal-container-color: var(--color-surface-container-high);
19
+ --modal-scrim-color: color-mix(in srgb, var(--color-scrim), transparent 32%);
20
+ --modal-shape: var(--shape-corner-extra-large);
21
21
  --modal-min-width: 280px;
22
22
  --modal-max-width: 560px;
23
23
  --modal-max-height: 90dvh;
24
- --modal-transition-duration: var(--duration-medium2, 300ms);
25
- --modal-transition-easing: var(--easing-emphasized, cubic-bezier(0.2, 0, 0, 1));
26
- --modal-heading-color: var(--color-on-surface, #1c1b1f);
27
- --modal-subheading-color: var(--color-on-surface-variant, #49454f);
28
- --modal-content-color: var(--color-on-surface-variant, #49454f);
29
- --modal-divider-color: var(--color-outline-variant, #cac4d0);
30
- --modal-elevation: var(--elevation-level3, 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.3));
24
+ --modal-transition-duration: var(--duration-medium2);
25
+ --modal-transition-easing: var(--easing-emphasized);
26
+ --modal-heading-color: var(--color-on-surface);
27
+ --modal-subheading-color: var(--color-on-surface-variant);
28
+ --modal-content-color: var(--color-on-surface-variant);
29
+ --modal-divider-color: var(--color-outline-variant);
30
+ --modal-elevation: var(--elevation-level3);
31
31
  }
32
32
 
33
33
  /* Scrim backdrop */
@@ -215,7 +215,7 @@ var css_248z = i`@charset "UTF-8";
215
215
  /**
216
216
  * @label Modal
217
217
  * @tag wc-modal
218
- * @rawTag modal-wc
218
+ * @rawTag modal
219
219
  * @summary A Material Design 3 dialog/modal for displaying content in a layer above the page, with optional header, body, and footer slots.
220
220
  *
221
221
  * @cssprop --modal-container-color - Background color of the dialog container.
package/dist/modal.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"modal.js","sources":["../../src/modal/modal.ts"],"sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport IndividualComponent from '../IndividualComponent.js';\nimport styles from './modal.scss';\n\ntype ModalSize = 'xs' | 'sm' | 'md' | 'lg' | 'fullscreen';\n\n/**\n * @label Modal\n * @tag wc-modal\n * @rawTag modal-wc\n * @summary A Material Design 3 dialog/modal for displaying content in a layer above the page, with optional header, body, and footer slots.\n *\n * @cssprop --modal-container-color - Background color of the dialog container.\n * @cssprop --modal-scrim-color - Color of the scrim backdrop.\n * @cssprop --modal-shape - Corner radius of the dialog container.\n * @cssprop --modal-min-width - Minimum width of the dialog.\n * @cssprop --modal-max-width - Maximum width of the dialog.\n * @cssprop --modal-max-height - Maximum height of the dialog.\n *\n * @example\n * ```html\n * MODAL\n * ```\n * @tags overlay, dialog, feedback\n */\n@IndividualComponent\nexport class Modal extends LitElement {\n static styles = [styles];\n\n /** Whether the modal is open. */\n @property({ type: Boolean, reflect: true }) open = false;\n\n /** Heading text shown in the modal header. */\n @property({ type: String, reflect: true }) heading = '';\n\n /** Optional subheading / label text shown above the heading. */\n @property({ type: String, reflect: true }) subheading = '';\n\n /**\n * Size of the modal dialog.\n * - `\"xs\"`: Extra-small.\n * - `\"sm\"`: Small.\n * - `\"md\"`: Medium (default).\n * - `\"lg\"`: Large.\n * - `\"fullscreen\"`: Full-screen dialog.\n */\n @property({ type: String, reflect: true }) size: ModalSize = 'md';\n\n /** When true, hides the close button in the header. */\n @property({ type: Boolean, reflect: true, attribute: 'hide-close' })\n hideClose = false;\n\n /** When true, renders a loading overlay inside the modal. */\n @property({ type: Boolean, reflect: true, attribute: 'show-loader' })\n showLoader = false;\n\n /** When true, clicking the scrim will not close the modal. */\n @property({ type: Boolean, attribute: 'no-scrim-close' }) noScrimClose = false;\n\n @state() private _visible = false;\n\n show() {\n this.open = true;\n }\n\n hide() {\n this._close('programmatic');\n }\n\n private _close(reason: string) {\n if (!this.open) return;\n this.open = false;\n this.dispatchEvent(\n new CustomEvent('modal-close', {\n detail: { reason },\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n private _handleScrimClick() {\n if (!this.noScrimClose) {\n this._close('scrim');\n }\n }\n\n private _handleCloseClick() {\n this._close('close-button');\n }\n\n private readonly _handleKeydown = (e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n this._close('escape');\n }\n };\n\n protected updated(changedProperties: Map<string, unknown>) {\n if (changedProperties.has('open')) {\n if (this.open) {\n this._visible = true;\n document.body.style.overflow = 'hidden';\n document.addEventListener('keydown', this._handleKeydown);\n } else {\n document.body.style.overflow = '';\n document.removeEventListener('keydown', this._handleKeydown);\n }\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n document.body.style.overflow = '';\n document.removeEventListener('keydown', this._handleKeydown);\n }\n\n private _handleAnimationEnd(e: AnimationEvent) {\n if (e.animationName === 'modal-exit') {\n this._visible = false;\n }\n }\n\n render() {\n if (!this.open && !this._visible) return nothing;\n\n const hasHeader = this.heading || this.subheading || !this.hideClose;\n\n return html`\n <div\n class=${classMap({ scrim: true, visible: this.open })}\n @click=${this._handleScrimClick}\n aria-hidden=\"true\"\n ></div>\n\n <div class=\"dialog-wrapper\" role=\"presentation\">\n <div\n class=${classMap({\n dialog: true,\n open: this.open,\n [`size-${this.size}`]: true,\n 'show-loader': this.showLoader,\n })}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby=${this.heading ? 'modal-heading' : nothing}\n @animationend=${this._handleAnimationEnd}\n >\n ${hasHeader\n ? html`\n <div class=\"dialog-header\">\n <div class=\"dialog-heading-section\">\n ${this.subheading\n ? html`<p class=\"dialog-subheading\">${this.subheading}</p>`\n : nothing}\n ${this.heading\n ? html`<h2 id=\"modal-heading\" class=\"dialog-heading\">\n ${this.heading}\n </h2>`\n : nothing}\n </div>\n ${!this.hideClose\n ? html`<wc-icon-button\n class=\"dialog-close\"\n variant=\"text\"\n aria-label=\"Close dialog\"\n @click=${this._handleCloseClick}\n >\n <wc-icon name=\"close\"></wc-icon>\n </wc-icon-button>`\n : nothing}\n </div>\n `\n : nothing}\n\n <div class=\"dialog-content\">\n <slot></slot>\n </div>\n\n <div class=\"dialog-footer\">\n <slot name=\"footer\"></slot>\n </div>\n\n ${this.showLoader\n ? html`<div class=\"dialog-loader\" aria-hidden=\"true\">\n <div class=\"dialog-loader-scrim\"></div>\n <wc-spinner></wc-spinner>\n </div>`\n : nothing}\n </div>\n </div>\n `;\n }\n}\n"],"names":["LitElement","nothing","html","classMap","styles","property","state"],"mappings":"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"}
1
+ {"version":3,"file":"modal.js","sources":["../../src/modal/modal.ts"],"sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport IndividualComponent from '../IndividualComponent.js';\nimport styles from './modal.scss';\n\ntype ModalSize = 'xs' | 'sm' | 'md' | 'lg' | 'fullscreen';\n\n/**\n * @label Modal\n * @tag wc-modal\n * @rawTag modal\n * @summary A Material Design 3 dialog/modal for displaying content in a layer above the page, with optional header, body, and footer slots.\n *\n * @cssprop --modal-container-color - Background color of the dialog container.\n * @cssprop --modal-scrim-color - Color of the scrim backdrop.\n * @cssprop --modal-shape - Corner radius of the dialog container.\n * @cssprop --modal-min-width - Minimum width of the dialog.\n * @cssprop --modal-max-width - Maximum width of the dialog.\n * @cssprop --modal-max-height - Maximum height of the dialog.\n *\n * @example\n * ```html\n * MODAL\n * ```\n * @tags overlay, dialog, feedback\n */\n@IndividualComponent\nexport class Modal extends LitElement {\n static styles = [styles];\n\n /** Whether the modal is open. */\n @property({ type: Boolean, reflect: true }) open = false;\n\n /** Heading text shown in the modal header. */\n @property({ type: String, reflect: true }) heading = '';\n\n /** Optional subheading / label text shown above the heading. */\n @property({ type: String, reflect: true }) subheading = '';\n\n /**\n * Size of the modal dialog.\n * - `\"xs\"`: Extra-small.\n * - `\"sm\"`: Small.\n * - `\"md\"`: Medium (default).\n * - `\"lg\"`: Large.\n * - `\"fullscreen\"`: Full-screen dialog.\n */\n @property({ type: String, reflect: true }) size: ModalSize = 'md';\n\n /** When true, hides the close button in the header. */\n @property({ type: Boolean, reflect: true, attribute: 'hide-close' })\n hideClose = false;\n\n /** When true, renders a loading overlay inside the modal. */\n @property({ type: Boolean, reflect: true, attribute: 'show-loader' })\n showLoader = false;\n\n /** When true, clicking the scrim will not close the modal. */\n @property({ type: Boolean, attribute: 'no-scrim-close' }) noScrimClose = false;\n\n @state() private _visible = false;\n\n show() {\n this.open = true;\n }\n\n hide() {\n this._close('programmatic');\n }\n\n private _close(reason: string) {\n if (!this.open) return;\n this.open = false;\n this.dispatchEvent(\n new CustomEvent('modal-close', {\n detail: { reason },\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n private _handleScrimClick() {\n if (!this.noScrimClose) {\n this._close('scrim');\n }\n }\n\n private _handleCloseClick() {\n this._close('close-button');\n }\n\n private readonly _handleKeydown = (e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n this._close('escape');\n }\n };\n\n protected updated(changedProperties: Map<string, unknown>) {\n if (changedProperties.has('open')) {\n if (this.open) {\n this._visible = true;\n document.body.style.overflow = 'hidden';\n document.addEventListener('keydown', this._handleKeydown);\n } else {\n document.body.style.overflow = '';\n document.removeEventListener('keydown', this._handleKeydown);\n }\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n document.body.style.overflow = '';\n document.removeEventListener('keydown', this._handleKeydown);\n }\n\n private _handleAnimationEnd(e: AnimationEvent) {\n if (e.animationName === 'modal-exit') {\n this._visible = false;\n }\n }\n\n render() {\n if (!this.open && !this._visible) return nothing;\n\n const hasHeader = this.heading || this.subheading || !this.hideClose;\n\n return html`\n <div\n class=${classMap({ scrim: true, visible: this.open })}\n @click=${this._handleScrimClick}\n aria-hidden=\"true\"\n ></div>\n\n <div class=\"dialog-wrapper\" role=\"presentation\">\n <div\n class=${classMap({\n dialog: true,\n open: this.open,\n [`size-${this.size}`]: true,\n 'show-loader': this.showLoader,\n })}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby=${this.heading ? 'modal-heading' : nothing}\n @animationend=${this._handleAnimationEnd}\n >\n ${hasHeader\n ? html`\n <div class=\"dialog-header\">\n <div class=\"dialog-heading-section\">\n ${this.subheading\n ? html`<p class=\"dialog-subheading\">${this.subheading}</p>`\n : nothing}\n ${this.heading\n ? html`<h2 id=\"modal-heading\" class=\"dialog-heading\">\n ${this.heading}\n </h2>`\n : nothing}\n </div>\n ${!this.hideClose\n ? html`<wc-icon-button\n class=\"dialog-close\"\n variant=\"text\"\n aria-label=\"Close dialog\"\n @click=${this._handleCloseClick}\n >\n <wc-icon name=\"close\"></wc-icon>\n </wc-icon-button>`\n : nothing}\n </div>\n `\n : nothing}\n\n <div class=\"dialog-content\">\n <slot></slot>\n </div>\n\n <div class=\"dialog-footer\">\n <slot name=\"footer\"></slot>\n </div>\n\n ${this.showLoader\n ? html`<div class=\"dialog-loader\" aria-hidden=\"true\">\n <div class=\"dialog-loader-scrim\"></div>\n <wc-spinner></wc-spinner>\n </div>`\n : nothing}\n </div>\n </div>\n `;\n }\n}\n"],"names":["LitElement","nothing","html","classMap","styles","property","state"],"mappings":"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"}