@redvars/peacock 3.7.0 → 3.8.1

package/dist/{button-colors-Dwnez1tR.js → button-colors-D7sJyPy8.js}

@@ -85,9 +85,9 @@ var css_248z$2 = i`* {
   min-height: 2.5rem;
   height: 100%;
   width: 100%;
-  top: auto;
-  left: 0;
-  transform: translateY(-25%);
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
 .button {
   /* make the icon slot itself collapsible so removal animates smoothly */
@@ -583,4 +583,4 @@ var css_248z = i`:host([color=primary]:not([toggle])) {
 }`;
 
 export { css_248z$2 as a, css_248z as b, css_248z$1 as c, n };
-//# sourceMappingURL=button-colors-Dwnez1tR.js.map
+//# sourceMappingURL=button-colors-D7sJyPy8.js.map

package/dist/{button-colors-Dwnez1tR.js.map → button-colors-D7sJyPy8.js.map}

@@ -1 +1 @@
-{"version":3,"file":"button-colors-Dwnez1tR.js","sources":["../node_modules/lit-html/directives/when.js"],"sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\nfunction n(n,r,t){return n?r(n):t?.(n)}export{n as when};\n//# sourceMappingURL=when.js.map\n"],"names":[],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[0]}
+{"version":3,"file":"button-colors-D7sJyPy8.js","sources":["../node_modules/lit-html/directives/when.js"],"sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\nfunction n(n,r,t){return n?r(n):t?.(n)}export{n as when};\n//# sourceMappingURL=when.js.map\n"],"names":[],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","x_google_ignoreList":[0]}

package/dist/button-group.js

@@ -2,10 +2,10 @@ import { a as i, _ as __decorate, I as IndividualComponent, i as i$1, b } from '
 import { n } from './property-1psGvXOq.js';
 import { e } from './class-map-YU7g0o3B.js';
 import { Button } from './button.js';
-import { I as IconButton } from './icon-button-DJ0kZXYr.js';
+import { I as IconButton } from './icon-button-CAzYr_qr.js';
 import './directive-ZPhl09Yt.js';
 import './ButtonConstants-D06bY4uy.js';
-import './button-colors-Dwnez1tR.js';
+import './button-colors-D7sJyPy8.js';
 import './NativeHyperlinkMixin-DrYXyfMQ.js';
 import './observe-slot-change-D8Xg-kSS.js';
 import './dispatch-event-utils-CuEqjlPT.js';

package/dist/button.js

@@ -2,7 +2,7 @@ import { a as i, b, A, _ as __decorate, I as IndividualComponent, i as i$1 } fro
 import { n as n$1 } from './property-1psGvXOq.js';
 import { e } from './class-map-YU7g0o3B.js';
 import { N as NativeButtonMixin, o, D as DISABLED_REASON_ID, s as spread } from './ButtonConstants-D06bY4uy.js';
-import { n, c as css_248z$2, a as css_248z$3, b as css_248z$4 } from './button-colors-Dwnez1tR.js';
+import { n, c as css_248z$2, a as css_248z$3, b as css_248z$4 } from './button-colors-D7sJyPy8.js';
 import { N as NativeHyperlinkMixin, t as throttle, i as isLink } from './NativeHyperlinkMixin-DrYXyfMQ.js';
 import { o as observerSlotChangesWithCallback } from './observe-slot-change-D8Xg-kSS.js';
 import { i as isActivationClick, d as dispatchActivationClick } from './dispatch-event-utils-CuEqjlPT.js';

package/dist/flow-designer.js

@@ -3,13 +3,13 @@ import { n } from './property-1psGvXOq.js';
 import { r } from './state-DwbEjqVk.js';
 import { e } from './query-QBcUV-L_.js';
 import './toolbar.js';
-import './icon-button-DJ0kZXYr.js';
+import './icon-button-CAzYr_qr.js';
 import './icon-CueRR7wx.js';
 import { c as css_248z } from './flow-designer-node-BWrPuxAR.js';
 import './class-map-YU7g0o3B.js';
 import './directive-ZPhl09Yt.js';
 import './ButtonConstants-D06bY4uy.js';
-import './button-colors-Dwnez1tR.js';
+import './button-colors-D7sJyPy8.js';
 import './NativeHyperlinkMixin-DrYXyfMQ.js';
 import './dispatch-event-utils-CuEqjlPT.js';
 import './unsafe-html-BsGUjx94.js';

package/dist/{icon-button-DJ0kZXYr.js → icon-button-CAzYr_qr.js}

@@ -3,7 +3,7 @@ import { n as n$1 } from './property-1psGvXOq.js';
 import { e as e$1 } from './query-QBcUV-L_.js';
 import { e } from './class-map-YU7g0o3B.js';
 import { N as NativeButtonMixin, D as DISABLED_REASON_ID, o, s as spread } from './ButtonConstants-D06bY4uy.js';
-import { n, c as css_248z$1, a as css_248z$2, b as css_248z$3 } from './button-colors-Dwnez1tR.js';
+import { n, c as css_248z$1, a as css_248z$2, b as css_248z$3 } from './button-colors-D7sJyPy8.js';
 import { N as NativeHyperlinkMixin, t as throttle, i as isLink } from './NativeHyperlinkMixin-DrYXyfMQ.js';
 import { i as isActivationClick, d as dispatchActivationClick } from './dispatch-event-utils-CuEqjlPT.js';
 
@@ -315,4 +315,4 @@ __decorate([
 ], IconButton.prototype, "buttonElement", void 0);
 
 export { IconButton as I };
-//# sourceMappingURL=icon-button-DJ0kZXYr.js.map
+//# sourceMappingURL=icon-button-CAzYr_qr.js.map

package/dist/{icon-button-DJ0kZXYr.js.map → icon-button-CAzYr_qr.js.map}

@@ -1 +1 @@
-{"version":3,"file":"icon-button-DJ0kZXYr.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 buttonLayers from '../button/button-layers.scss';\nimport styles from '../button/button.scss';\nimport colorStyles from '../button/button-colors.scss';\nimport sizeStyles from './icon-button-sizes.scss';\nimport { spread } from '@/__directive/spread.js';\nimport { throttle } from '@/__utils/throttle.js';\nimport { isLink } from '@/__utils/is-link.js';\nimport { observerSlotChangesWithCallback } from '@/__utils/observe-slot-change.js';\nimport {\n  dispatchActivationClick,\n  isActivationClick,\n} from '@/__utils/dispatch-event-utils.js';\nimport NativeButtonMixin from '@/__mixins/NativeButtonMixin.js';\nimport NativeHyperlinkMixin from '@/__mixins/NativeHyperlinkMixin.js';\nimport { GroupButtonInterface } from '@/button/GroupButtonInterface.js';\nimport { DISABLED_REASON_ID } from '@/button/ButtonConstants.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 */\nexport class IconButton\n  extends NativeButtonMixin(NativeHyperlinkMixin(LitElement))\n  implements GroupButtonInterface\n{\n  static override styles = [buttonLayers, styles, colorStyles, sizeStyles];\n\n  /**\n   * Button size.\n   * Possible values are `\"xs\"`, `\"sm\"`, `\"md\"`, `\"lg\"`, `\"xl\"`. Defaults to `\"sm\"`.\n   */\n  @property({ reflect: true }) size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'sm';\n\n  /**\n   * Type is preset of color and variant. Type will be only applied.\n   *\n   */\n  @property({ type: String }) type?: 'primary' | 'secondary' | 'tertiary';\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:\n    | 'elevated'\n    | 'filled'\n    | 'tonal'\n    | 'outlined'\n    | 'text'\n    | 'neo' = '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:\n    | 'primary'\n    | 'success'\n    | 'danger'\n    | 'warning'\n    | 'surface'\n    | 'on-surface' = 'primary';\n\n  /**\n   * Additional ARIA attributes to pass to the inner button/anchor element.\n   */\n  @property({ reflect: true })\n  configAria?: { [key: string]: any };\n\n  @property({ type: Boolean, reflect: true }) skeleton: boolean = false;\n\n  @property({ type: Boolean, reflect: true }) toggle: boolean = false;\n\n  @property({ type: Boolean, reflect: true }) selected: boolean = false;\n\n  /**\n   * Sets the delay for throttle in milliseconds. Defaults to 200 milliseconds.\n   */\n  @property() throttleDelay = 200;\n\n  @property() tooltip?: string;\n\n  @property({ type: Boolean, reflect: true })\n  pressed = false;\n\n  @query('.button') readonly buttonElement!: HTMLElement | null;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('click', this.__dispatchClickWithThrottle);\n    window.addEventListener('mouseup', this.__handlePress);\n  }\n\n  override disconnectedCallback() {\n    window.removeEventListener('mouseup', this.__handlePress);\n    this.removeEventListener('click', this.__dispatchClickWithThrottle);\n    super.disconnectedCallback();\n  }\n\n  __handlePress = (event: KeyboardEvent | MouseEvent) => {\n    if (this.disabled || this.skeleton || this.softDisabled) return;\n    this.pressed =\n      (event instanceof KeyboardEvent &&\n        event.type === 'keydown' &&\n        (event.key === 'Enter' || event.key === ' ')) ||\n      event.type === 'mousedown';\n  };\n\n  __dispatchClickWithThrottle: (event: MouseEvent | KeyboardEvent) => void =\n    event => {\n      this.__dispatchClick(event);\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    if (this.toggle) {\n      this.selected = !this.selected;\n    }\n\n    this.focus();\n    dispatchActivationClick(this.buttonElement);\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      return html`<wc-tooltip class=\"tooltip\" for=\"button\">${this.tooltip}</wc-tooltip>`;\n    }\n    return nothing;\n  }\n\n  override focus() {\n    this.buttonElement?.focus();\n  }\n\n  override blur() {\n    this.buttonElement?.blur();\n  }\n\n  override firstUpdated() {\n    this.__dispatchClickWithThrottle = throttle(\n      this.__dispatchClick,\n      this.throttleDelay,\n    );\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  override render() {\n    return html`\n      <wc-focus-ring class=\"focus-ring\" for=\"button\"></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  renderButtonElement() {\n    const cssClasses = {\n      button: true,\n      'button-element': true,\n      [`size-${this.size}`]: true,\n      [`variant-${this.variant}`]: true,\n      [`color-${this.color}`]: true,\n      disabled: this.disabled || this.softDisabled,\n      pressed: this.pressed,\n      skeleton: this.skeleton,\n    };\n\n    if (!isLink(this)) {\n      cssClasses['native-button'] = true;\n      return html`<button\n        class=${classMap(cssClasses)}\n        id=\"button\"\n        type=${this.htmlType}\n        @click=${this.__dispatchClickWithThrottle}\n        @mousedown=${this.__handlePress}\n        @keydown=${this.__handlePress}\n        @keyup=${this.__handlePress}\n        aria-describedby=${ifDefined(\n          this.softDisabled ? DISABLED_REASON_ID : undefined,\n        )}\n        ?aria-disabled=${this.softDisabled}\n        ?disabled=${this.disabled}\n        ${spread(this.configAria)}\n      >\n        ${this.renderButtonContent()}\n      </button>`;\n    }\n    cssClasses['native-link'] = true;\n    return html`<a\n      class=${classMap(cssClasses)}\n      id=\"button\"\n      href=${this.href}\n      target=${this.target}\n      tabindex=${this.disabled ? '-1' : '0'}\n      @click=${this.__dispatchClick}\n      @mousedown=${this.__handlePress}\n      @keydown=${this.__handlePress}\n      @keyup=${this.__handlePress}\n      role=\"button\"\n      aria-describedby=${ifDefined(\n        this.softDisabled ? DISABLED_REASON_ID : undefined,\n      )}\n      ?aria-disabled=${this.softDisabled}\n      ${spread(this.configAria)}\n    >\n      ${this.renderButtonContent()}\n    </a>`;\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"],"names":["LitElement","html","nothing","when","classMap","ifDefined","buttonLayers","styles","colorStyles","sizeStyles","property","query"],"mappings":"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"}
+{"version":3,"file":"icon-button-CAzYr_qr.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 buttonLayers from '../button/button-layers.scss';\nimport styles from '../button/button.scss';\nimport colorStyles from '../button/button-colors.scss';\nimport sizeStyles from './icon-button-sizes.scss';\nimport { spread } from '@/__directive/spread.js';\nimport { throttle } from '@/__utils/throttle.js';\nimport { isLink } from '@/__utils/is-link.js';\nimport { observerSlotChangesWithCallback } from '@/__utils/observe-slot-change.js';\nimport {\n  dispatchActivationClick,\n  isActivationClick,\n} from '@/__utils/dispatch-event-utils.js';\nimport NativeButtonMixin from '@/__mixins/NativeButtonMixin.js';\nimport NativeHyperlinkMixin from '@/__mixins/NativeHyperlinkMixin.js';\nimport { GroupButtonInterface } from '@/button/GroupButtonInterface.js';\nimport { DISABLED_REASON_ID } from '@/button/ButtonConstants.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 */\nexport class IconButton\n  extends NativeButtonMixin(NativeHyperlinkMixin(LitElement))\n  implements GroupButtonInterface\n{\n  static override styles = [buttonLayers, styles, colorStyles, sizeStyles];\n\n  /**\n   * Button size.\n   * Possible values are `\"xs\"`, `\"sm\"`, `\"md\"`, `\"lg\"`, `\"xl\"`. Defaults to `\"sm\"`.\n   */\n  @property({ reflect: true }) size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'sm';\n\n  /**\n   * Type is preset of color and variant. Type will be only applied.\n   *\n   */\n  @property({ type: String }) type?: 'primary' | 'secondary' | 'tertiary';\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:\n    | 'elevated'\n    | 'filled'\n    | 'tonal'\n    | 'outlined'\n    | 'text'\n    | 'neo' = '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:\n    | 'primary'\n    | 'success'\n    | 'danger'\n    | 'warning'\n    | 'surface'\n    | 'on-surface' = 'primary';\n\n  /**\n   * Additional ARIA attributes to pass to the inner button/anchor element.\n   */\n  @property({ reflect: true })\n  configAria?: { [key: string]: any };\n\n  @property({ type: Boolean, reflect: true }) skeleton: boolean = false;\n\n  @property({ type: Boolean, reflect: true }) toggle: boolean = false;\n\n  @property({ type: Boolean, reflect: true }) selected: boolean = false;\n\n  /**\n   * Sets the delay for throttle in milliseconds. Defaults to 200 milliseconds.\n   */\n  @property() throttleDelay = 200;\n\n  @property() tooltip?: string;\n\n  @property({ type: Boolean, reflect: true })\n  pressed = false;\n\n  @query('.button') readonly buttonElement!: HTMLElement | null;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('click', this.__dispatchClickWithThrottle);\n    window.addEventListener('mouseup', this.__handlePress);\n  }\n\n  override disconnectedCallback() {\n    window.removeEventListener('mouseup', this.__handlePress);\n    this.removeEventListener('click', this.__dispatchClickWithThrottle);\n    super.disconnectedCallback();\n  }\n\n  __handlePress = (event: KeyboardEvent | MouseEvent) => {\n    if (this.disabled || this.skeleton || this.softDisabled) return;\n    this.pressed =\n      (event instanceof KeyboardEvent &&\n        event.type === 'keydown' &&\n        (event.key === 'Enter' || event.key === ' ')) ||\n      event.type === 'mousedown';\n  };\n\n  __dispatchClickWithThrottle: (event: MouseEvent | KeyboardEvent) => void =\n    event => {\n      this.__dispatchClick(event);\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    if (this.toggle) {\n      this.selected = !this.selected;\n    }\n\n    this.focus();\n    dispatchActivationClick(this.buttonElement);\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      return html`<wc-tooltip class=\"tooltip\" for=\"button\">${this.tooltip}</wc-tooltip>`;\n    }\n    return nothing;\n  }\n\n  override focus() {\n    this.buttonElement?.focus();\n  }\n\n  override blur() {\n    this.buttonElement?.blur();\n  }\n\n  override firstUpdated() {\n    this.__dispatchClickWithThrottle = throttle(\n      this.__dispatchClick,\n      this.throttleDelay,\n    );\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  override render() {\n    return html`\n      <wc-focus-ring class=\"focus-ring\" for=\"button\"></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  renderButtonElement() {\n    const cssClasses = {\n      button: true,\n      'button-element': true,\n      [`size-${this.size}`]: true,\n      [`variant-${this.variant}`]: true,\n      [`color-${this.color}`]: true,\n      disabled: this.disabled || this.softDisabled,\n      pressed: this.pressed,\n      skeleton: this.skeleton,\n    };\n\n    if (!isLink(this)) {\n      cssClasses['native-button'] = true;\n      return html`<button\n        class=${classMap(cssClasses)}\n        id=\"button\"\n        type=${this.htmlType}\n        @click=${this.__dispatchClickWithThrottle}\n        @mousedown=${this.__handlePress}\n        @keydown=${this.__handlePress}\n        @keyup=${this.__handlePress}\n        aria-describedby=${ifDefined(\n          this.softDisabled ? DISABLED_REASON_ID : undefined,\n        )}\n        ?aria-disabled=${this.softDisabled}\n        ?disabled=${this.disabled}\n        ${spread(this.configAria)}\n      >\n        ${this.renderButtonContent()}\n      </button>`;\n    }\n    cssClasses['native-link'] = true;\n    return html`<a\n      class=${classMap(cssClasses)}\n      id=\"button\"\n      href=${this.href}\n      target=${this.target}\n      tabindex=${this.disabled ? '-1' : '0'}\n      @click=${this.__dispatchClick}\n      @mousedown=${this.__handlePress}\n      @keydown=${this.__handlePress}\n      @keyup=${this.__handlePress}\n      role=\"button\"\n      aria-describedby=${ifDefined(\n        this.softDisabled ? DISABLED_REASON_ID : undefined,\n      )}\n      ?aria-disabled=${this.softDisabled}\n      ${spread(this.configAria)}\n    >\n      ${this.renderButtonContent()}\n    </a>`;\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"],"names":["LitElement","html","nothing","when","classMap","ifDefined","buttonLayers","styles","colorStyles","sizeStyles","property","query"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CG;AACG,MAAO,UACX,SAAQ,iBAAiB,CAAC,oBAAoB,CAACA,GAAU,CAAC,CAAC,CAAA;AAD7D,IAAA,WAAA,GAAA;;AAME;;;AAGG;QAC0B,IAAA,CAAA,IAAI,GAAqC,IAAI;AAQ1E;;;;;;;;;AASG;QAC0B,IAAA,CAAA,OAAO,GAMxB,QAAQ;AAEpB;;AAEG;QAC0B,IAAA,CAAA,KAAK,GAMf,SAAS;QAQgB,IAAA,CAAA,QAAQ,GAAY,KAAK;QAEzB,IAAA,CAAA,MAAM,GAAY,KAAK;QAEvB,IAAA,CAAA,QAAQ,GAAY,KAAK;AAErE;;AAEG;QACS,IAAA,CAAA,aAAa,GAAG,GAAG;QAK/B,IAAA,CAAA,OAAO,GAAG,KAAK;AAgBf,QAAA,IAAA,CAAA,aAAa,GAAG,CAAC,KAAiC,KAAI;YACpD,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY;gBAAE;AACzD,YAAA,IAAI,CAAC,OAAO;gBACV,CAAC,KAAK,YAAY,aAAa;oBAC7B,KAAK,CAAC,IAAI,KAAK,SAAS;AACxB,qBAAC,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,CAAC;AAC9C,oBAAA,KAAK,CAAC,IAAI,KAAK,WAAW;AAC9B,QAAA,CAAC;QAED,IAAA,CAAA,2BAA2B,GACzB,KAAK,IAAG;AACN,YAAA,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC;AAC7B,QAAA,CAAC;AAEH,QAAA,IAAA,CAAA,eAAe,GAAG,CAAC,KAAiC,KAAI;;;;AAItD,YAAA,IAAI,IAAI,CAAC,YAAY,KAAK,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACtE,KAAK,CAAC,wBAAwB,EAAE;gBAChC,KAAK,CAAC,cAAc,EAAE;gBACtB;YACF;YAEA,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;gBACpD;YACF;AAEA,YAAA,IAAI,IAAI,CAAC,MAAM,EAAE;AACf,gBAAA,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ;YAChC;YAEA,IAAI,CAAC,KAAK,EAAE;AACZ,YAAA,uBAAuB,CAAC,IAAI,CAAC,aAAa,CAAC;AAC7C,QAAA,CAAC;IAuIH;IArLW,iBAAiB,GAAA;QACxB,KAAK,CAAC,iBAAiB,EAAE;QACzB,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,2BAA2B,CAAC;QAChE,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC;IACxD;IAES,oBAAoB,GAAA;QAC3B,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC;QACzD,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,2BAA2B,CAAC;QACnE,KAAK,CAAC,oBAAoB,EAAE;IAC9B;AAsCA,IAAA,sBAAsB,CAAC,YAAqB,EAAA;AAC1C,QAAA,IAAI,YAAY;AACd,YAAA,OAAOC,CAAI,CAAA,CAAA;aACJ,kBAAkB;;AAEV,mBAAA,EAAA,IAAI,CAAC,cAAc;;;AAG9B,QAAA,EAAA,IAAI,CAAC,cAAc;aAChB;AACT,QAAA,OAAOC,CAAO;IAChB;IAEA,eAAe,GAAA;AACb,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;AAChB,YAAA,OAAOD,CAAI,CAAA,CAAA,yCAAA,EAA4C,IAAI,CAAC,OAAO,eAAe;QACpF;AACA,QAAA,OAAOC,CAAO;IAChB;IAES,KAAK,GAAA;AACZ,QAAA,IAAI,CAAC,aAAa,EAAE,KAAK,EAAE;IAC7B;IAES,IAAI,GAAA;AACX,QAAA,IAAI,CAAC,aAAa,EAAE,IAAI,EAAE;IAC5B;IAES,YAAY,GAAA;AACnB,QAAA,IAAI,CAAC,2BAA2B,GAAG,QAAQ,CACzC,IAAI,CAAC,eAAe,EACpB,IAAI,CAAC,aAAa,CACnB;QACD,IAAI,CAAC,8BAA8B,EAAE;IACvC;IAEA,8BAA8B,GAAA;AAC5B,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE;AAC3B,YAAA,IAAI,CAAC,KAAK,GAAG,SAAS;AACtB,YAAA,IAAI,CAAC,OAAO,GAAG,QAAQ;QACzB;AAAO,aAAA,IAAI,IAAI,CAAC,IAAI,KAAK,WAAW,EAAE;AACpC,YAAA,IAAI,CAAC,KAAK,GAAG,SAAS;AACtB,YAAA,IAAI,CAAC,OAAO,GAAG,QAAQ;QACzB;AAAO,aAAA,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE;AACnC,YAAA,IAAI,CAAC,KAAK,GAAG,SAAS;AACtB,YAAA,IAAI,CAAC,OAAO,GAAG,MAAM;QACvB;AAAO,aAAA,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;AACjC,YAAA,IAAI,CAAC,KAAK,GAAG,QAAQ;AACrB,YAAA,IAAI,CAAC,OAAO,GAAG,QAAQ;QACzB;IACF;IAES,MAAM,GAAA;AACb,QAAA,OAAOD,CAAI,CAAA;;;AAGP,MAAA,EAAAE,CAAI,CACJ,IAAI,CAAC,OAAO,KAAK,KAAK,EACtB,MAAMF,CAAI,CAAA,oCAAoC,CAC/C;;AAEC,MAAA,EAAAE,CAAI,CACJ,IAAI,CAAC,OAAO,KAAK,UAAU,IAAI,IAAI,CAAC,OAAO,KAAK,KAAK,EACrD,MAAMF,CAAI,CAAA,6BAA6B,CACxC;;;;AAIC,MAAA,EAAA,IAAI,CAAC,mBAAmB,EAAE,IAAI,IAAI,CAAC,eAAe,EAAE;KACvD;IACH;IAEA,mBAAmB,GAAA;AACjB,QAAA,MAAM,UAAU,GAAG;AACjB,YAAA,MAAM,EAAE,IAAI;AACZ,YAAA,gBAAgB,EAAE,IAAI;AACtB,YAAA,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,IAAI;AAC3B,YAAA,CAAC,WAAW,IAAI,CAAC,OAAO,CAAA,CAAE,GAAG,IAAI;AACjC,YAAA,CAAC,SAAS,IAAI,CAAC,KAAK,CAAA,CAAE,GAAG,IAAI;AAC7B,YAAA,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY;YAC5C,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB;AAED,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE;AACjB,YAAA,UAAU,CAAC,eAAe,CAAC,GAAG,IAAI;AAClC,YAAA,OAAOA,CAAI,CAAA,CAAA;gBACDG,CAAQ,CAAC,UAAU,CAAC;;AAErB,aAAA,EAAA,IAAI,CAAC,QAAQ;AACX,eAAA,EAAA,IAAI,CAAC,2BAA2B;AAC5B,mBAAA,EAAA,IAAI,CAAC,aAAa;AACpB,iBAAA,EAAA,IAAI,CAAC,aAAa;AACpB,eAAA,EAAA,IAAI,CAAC,aAAa;AACR,yBAAA,EAAAC,CAAS,CAC1B,IAAI,CAAC,YAAY,GAAG,kBAAkB,GAAG,SAAS,CACnD;AACgB,uBAAA,EAAA,IAAI,CAAC,YAAY;AACtB,kBAAA,EAAA,IAAI,CAAC,QAAQ;AACvB,QAAA,EAAA,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC;;UAEvB,IAAI,CAAC,mBAAmB,EAAE;gBACpB;QACZ;AACA,QAAA,UAAU,CAAC,aAAa,CAAC,GAAG,IAAI;AAChC,QAAA,OAAOJ,CAAI,CAAA,CAAA;cACDG,CAAQ,CAAC,UAAU,CAAC;;AAErB,WAAA,EAAA,IAAI,CAAC,IAAI;AACP,aAAA,EAAA,IAAI,CAAC,MAAM;iBACT,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,GAAG;AAC5B,aAAA,EAAA,IAAI,CAAC,eAAe;AAChB,iBAAA,EAAA,IAAI,CAAC,aAAa;AACpB,eAAA,EAAA,IAAI,CAAC,aAAa;AACpB,aAAA,EAAA,IAAI,CAAC,aAAa;;AAER,uBAAA,EAAAC,CAAS,CAC1B,IAAI,CAAC,YAAY,GAAG,kBAAkB,GAAG,SAAS,CACnD;AACgB,qBAAA,EAAA,IAAI,CAAC,YAAY;AAChC,MAAA,EAAA,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC;;QAEvB,IAAI,CAAC,mBAAmB,EAAE;SACzB;IACP;IAEA,mBAAmB,GAAA;AACjB,QAAA,OAAOJ,CAAI,CAAA;;;AAGP,MAAA,EAAA,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,YAAY,CAAC;KACjD;IACH;;AAvPgB,UAAA,CAAA,MAAM,GAAG,CAACK,UAAY,EAAEC,UAAM,EAAEC,UAAW,EAAEC,QAAU,CAAjD;AAMO,UAAA,CAAA;AAA5B,IAAAC,GAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE;AAAgD,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA;AAM/C,UAAA,CAAA;AAA3B,IAAAA,GAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE;AAA8C,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA;AAY3C,UAAA,CAAA;AAA5B,IAAAA,GAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE;AAMN,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,SAAA,EAAA,MAAA,CAAA;AAKQ,UAAA,CAAA;AAA5B,IAAAA,GAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE;AAME,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,OAAA,EAAA,MAAA,CAAA;AAM7B,UAAA,CAAA;AADC,IAAAA,GAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE;AACS,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,YAAA,EAAA,MAAA,CAAA;AAEQ,UAAA,CAAA;IAA3CA,GAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AAA4B,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AAE1B,UAAA,CAAA;IAA3CA,GAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AAA0B,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,QAAA,EAAA,MAAA,CAAA;AAExB,UAAA,CAAA;IAA3CA,GAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AAA4B,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AAK1D,UAAA,CAAA;AAAX,IAAAA,GAAQ;AAAuB,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,eAAA,EAAA,MAAA,CAAA;AAEpB,UAAA,CAAA;AAAX,IAAAA,GAAQ;AAAoB,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,SAAA,EAAA,MAAA,CAAA;AAG7B,UAAA,CAAA;IADCA,GAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AAC1B,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,SAAA,EAAA,MAAA,CAAA;AAEW,UAAA,CAAA;IAA1BC,GAAK,CAAC,SAAS;AAA8C,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,eAAA,EAAA,MAAA,CAAA;;;;"}

package/dist/index.js

@@ -3,7 +3,7 @@ export { A as Accordion, a as Avatar, B as Badge, b as Breadcrumb, c as Breadcru
 export { Clock } from './clock.js';
 export { Button } from './button.js';
 export { default as ButtonGroup } from './button-group.js';
-export { I as IconButton } from './icon-button-DJ0kZXYr.js';
+export { I as IconButton } from './icon-button-CAzYr_qr.js';
 export { Fab } from './fab.js';
 export { SplitButton } from './split-button.js';
 export { DropdownButton } from './dropdown-button.js';
@@ -52,7 +52,7 @@ import './dispatch-event-utils-CuEqjlPT.js';
 import './style-map-DVmWOuYy.js';
 import './BaseInput-14YmcfK7.js';
 import './is-dark-mode-DOcaw4Yq.js';
-import './button-colors-Dwnez1tR.js';
+import './button-colors-D7sJyPy8.js';
 import './transform-DSwFSqzD.js';
 import './pie-Dz0IDiPt.js';
 import './array-D5vjT2Xm.js';

package/dist/peacock-loader.js

@@ -2,7 +2,7 @@ import { A as Accordion, q as NavigationRailItem, N as NavigationRail, v as Sele
 import { I as Icon } from './icon-CueRR7wx.js';
 import { Button } from './button.js';
 import ButtonGroup from './button-group.js';
-import { I as IconButton } from './icon-button-DJ0kZXYr.js';
+import { I as IconButton } from './icon-button-CAzYr_qr.js';
 import { Fab } from './fab.js';
 import { SplitButton } from './split-button.js';
 import { DropdownButton } from './dropdown-button.js';
@@ -32,7 +32,7 @@ import './style-map-DVmWOuYy.js';
 import './BaseInput-14YmcfK7.js';
 import './is-dark-mode-DOcaw4Yq.js';
 import './unsafe-html-BsGUjx94.js';
-import './button-colors-Dwnez1tR.js';
+import './button-colors-D7sJyPy8.js';
 
 class LoaderUtils {
     constructor(loaderConfig) {

package/package.json

@@ -2,7 +2,7 @@
   "name": "@redvars/peacock",
   "description": "The foundation for beautiful user interfaces",
   "license": "Apache-2.0",
-  "version": "3.7.0",
+  "version": "3.8.1",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/readme.md

@@ -44,9 +44,9 @@ Visit [https://peacock.redvars.com](https://peacock.redvars.com) to view the doc
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
 
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@redvars/peacock@3.7.0/dist/assets/styles.css"></link>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@redvars/peacock@3.8.1/dist/assets/styles.css"></link>
   <script type='module'
-          src='https://cdn.jsdelivr.net/npm/@redvars/peacock@3.7.0/dist/peacock-loader.js'></script>
+          src='https://cdn.jsdelivr.net/npm/@redvars/peacock@3.8.1/dist/peacock-loader.js'></script>
 </head>
 
 <wc-button>Button</wc-button>

package/src/button/button/button.scss

@@ -68,9 +68,10 @@
     min-height: 2.5rem;
     height: 100%;
     width: 100%;
-    top: auto;
-    left: 0;
-    transform: translateY(-25%);
+
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
   }
 
   /* make the icon slot itself collapsible so removal animates smoothly */

package/src/focus-ring/demo/index.html

@@ -9,50 +9,43 @@
   <style>
     body {
       background: #fafafa;
+      padding: 40px;
+      display: flex;
+      gap: 24px;
+      flex-wrap: wrap;
+      align-items: center;
+      font-family: 'Noto Sans', sans-serif;
+    }
+
+    .focus-surface {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      padding: 12px 24px;
+      border-radius: 8px;
+      background: #e0e0e0;
+      cursor: pointer;
+      border: none;
+      font: inherit;
     }
   </style>
 </head>
 <body>
 
-<style>
-  .elevated-element {
-    position: relative;
-    border-radius: 4px;
-    padding: var(--spacing-200);
-  }
-</style>
-
-<div class="elevated-element">
-  <p-elevation style="--elevation-level: 1"></p-elevation>
-  Level 1
-</div>
-
-<div class="elevated-element">
-  <p-elevation style="--elevation-level: 2"></p-elevation>
-  Level 2
-</div>
-
-
-<div class="elevated-element">
-  <p-elevation style="--elevation-level: 3"></p-elevation>
-  Level 3
-</div>
-
-<div class="elevated-element">
-  <p-elevation style="--elevation-level: 4"></p-elevation>
-  Level 4
-</div>
-
-<div class="elevated-element">
-  <p-elevation style="--elevation-level: 5"></p-elevation>
-  Level 5
-</div>
-
+  <button class="focus-surface">
+    Outward (default)
+    <p-focus-ring></p-focus-ring>
+  </button>
 
+  <button class="focus-surface">
+    Inward
+    <p-focus-ring inward></p-focus-ring>
+  </button>
 
 <script type='module'>
-  import { Elevation } from '/dist/index.js';
-  window.customElements.define('p-elevation', Elevation);
+  import { FocusRing } from '/dist/index.js';
+  window.customElements.define('p-focus-ring', FocusRing);
 </script>
 </body>
 </html>