@redvars/peacock 3.5.0 → 3.6.0

package/dist/{button-DMN1dPAg.js → button-colors-Ccys3hvS.js}

@@ -1,14 +1,6 @@
-import { a as i, _ as __decorate, b, A, i as i$1, I as IndividualComponent, c as __classPrivateFieldGet } from './IndividualComponent-DUINtMGK.js';
-import { n } from './property-1psGvXOq.js';
-import { r } from './state-DwbEjqVk.js';
-import { e as e$1 } from './class-map-YU7g0o3B.js';
-import { o as observerSlotChangesWithCallback } from './observe-slot-change-BGJfgg2E.js';
-import { t as throttle } from './throttle-C7ZAPqtu.js';
-import { s as spread } from './spread-B5cgadZl.js';
-import { e } from './query-QBcUV-L_.js';
-import { i as isActivationClick, d as dispatchActivationClick } from './dispatch-event-utils-CuEqjlPT.js';
+import { a as i } from './IndividualComponent-DUINtMGK.js';
 
-var css_248z$2 = i`* {
+var css_248z$1 = i`* {
   box-sizing: border-box;
 }
 
@@ -357,7 +349,7 @@ slot::slotted(*) {
   width: 100%;
 }`;
 
-var css_248z$1 = i`:host([color=primary]:not([toggle])) {
+var css_248z = i`:host([color=primary]:not([toggle])) {
   --filled-button-container-color: var(--color-primary);
   --filled-button-label-text-color: var(--color-on-primary);
   --tonal-button-container-color: var(--color-primary-container);
@@ -565,460 +557,5 @@ var css_248z$1 = i`:host([color=primary]:not([toggle])) {
   --neo-button-label-text-color: var(--color-on-surface);
 }`;
 
-var css_248z = i`:host([size=xs]),
-:host([size=extra-small]) {
-  --button-height: 2rem;
-}
-
-:host([size=xs]) .button,
-:host([size=extra-small]) .button {
-  --_button-icon-size: 1rem;
-  --_button_container-padding: 0.75rem;
-  font-size: 0.875rem !important;
-  font-weight: var(--font-weight-medium) !important;
-  line-height: 1.25rem !important;
-  letter-spacing: 0.1px !important;
-}
-
-:host([size=sm]),
-:host([size=small]) {
-  --button-height: 2.5rem;
-}
-
-:host([size=sm]) .button,
-:host([size=small]) .button {
-  --_button-icon-size: 1.25rem;
-  --_button_container-padding: 1rem;
-  --_button-icon-label-spacing: 0.5rem;
-  font-size: 0.875rem !important;
-  font-weight: var(--font-weight-medium) !important;
-  line-height: 1.25rem !important;
-  letter-spacing: 0.1px !important;
-}
-
-:host([size=md]),
-:host([size=medium]) {
-  --button-height: 3.5rem;
-}
-
-:host([size=md]) .button,
-:host([size=medium]) .button {
-  --_button-icon-size: 1.5rem;
-  --_button_container-padding: 1.5rem;
-  font-size: 1rem !important;
-  font-weight: var(--font-weight-medium) !important;
-  line-height: 1.5rem !important;
-  letter-spacing: 0.15px !important;
-}
-
-:host([size=lg]),
-:host([size=large]) {
-  --button-height: 6rem;
-}
-
-:host([size=lg]) .button,
-:host([size=large]) .button {
-  --_button-icon-size: 2rem;
-  --_button_container-padding: 3rem;
-  font-size: 1.5rem !important;
-  font-weight: var(--font-weight-regular) !important;
-  line-height: 2rem !important;
-  letter-spacing: 0 !important;
-}
-
-:host([size=xl]) {
-  --button-height: 8.5rem;
-}
-
-:host([size=xl]) .button {
-  --_button-icon-size: 2.5rem;
-  --_button_container-padding: 4rem;
-  font-size: 2rem !important;
-  font-weight: var(--font-weight-regular) !important;
-  line-height: 2.5rem !important;
-  letter-spacing: 0 !important;
-}`;
-
-/**
- * 3. Apply the type annotation to the variable.
- */
-const BaseHyperlink = (superclass) => {
-    // Naming the class (BaseHyperlinkElement) instead of using 'Mixin' or anonymous 
-    // prevents the "__childPart" visibility error.
-    class BaseHyperlinkElement extends superclass {
-        constructor() {
-            super(...arguments);
-            this.target = '_self';
-        }
-        __isLink() {
-            return !!this.href;
-        }
-    }
-    __decorate([
-        n({ reflect: true })
-    ], BaseHyperlinkElement.prototype, "href", void 0);
-    __decorate([
-        n()
-    ], BaseHyperlinkElement.prototype, "target", void 0);
-    return BaseHyperlinkElement;
-};
-
-class BaseButton extends BaseHyperlink(i$1) {
-    constructor() {
-        super(...arguments);
-        this.htmlType = 'button';
-        /**
-         * The visual style of the button.
-         *
-         *  Possible variant values:
-         * `"filled"` is a filled button.
-         * `"outlined"` is an outlined button.
-         * `"text"` is a transparent button.
-         * `"tonal"` is a light color button.
-         * `"elevated"` is elevated button
-         */
-        this.variant = 'filled';
-        /**
-         * Defines the primary color of the button. This can be set to predefined color names to apply specific color themes.
-         */
-        this.color = 'primary';
-        /**
-         * Button size.
-         * Possible values are `"sm"`, `"md"`, `"lg"`. Defaults to `"md"`.
-         */
-        this.size = 'sm';
-        /**
-         * If true, the user cannot interact with the button. Defaults to `false`.
-         */
-        this.disabled = false;
-        this.skeleton = false;
-        /**
-         * If true, the user cannot interact with the button and the button is visually styled as disabled. But the button is still focusable. Defaults to `false`.
-         */
-        this.softDisabled = false;
-        /**
-         * If button is disabled, the reason why it is disabled.
-         */
-        this.disabledReason = '';
-        this.toggle = false;
-        this.selected = false;
-        /**
-         * Sets the delay for throttle in milliseconds. Defaults to 200 milliseconds.
-         */
-        this.throttleDelay = 200;
-        /**
-         * States
-         */
-        this.isPressed = false;
-        this.__handlePress = (event) => {
-            if (this.disabled || this.skeleton || this.softDisabled)
-                return;
-            if (event instanceof KeyboardEvent &&
-                event.type === 'keydown' &&
-                (event.key === 'Enter' || event.key === ' ')) {
-                this.isPressed = true;
-            }
-            else if (event.type === 'mousedown') {
-                this.isPressed = true;
-            }
-            else {
-                this.isPressed = false;
-            }
-        };
-        this.__dispatchClickWithThrottle = event => {
-            this.__dispatchClick(event);
-        };
-        this.__dispatchClick = (event) => {
-            // If the button is soft-disabled or a disabled link, we need to explicitly
-            // prevent the click from propagating to other event listeners as well as
-            // prevent the default action.
-            if (this.softDisabled || (this.disabled && this.href) || this.skeleton) {
-                event.stopImmediatePropagation();
-                event.preventDefault();
-                return;
-            }
-            if (!isActivationClick(event) || !this.buttonElement) {
-                return;
-            }
-            if (this.toggle) {
-                this.selected = !this.selected;
-            }
-            this.focus();
-            dispatchActivationClick(this.buttonElement);
-        };
-    }
-    focus() {
-        this.buttonElement?.focus();
-    }
-    blur() {
-        this.buttonElement?.blur();
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.addEventListener('click', this.__dispatchClickWithThrottle);
-        window.addEventListener('mouseup', this.__handlePress);
-    }
-    disconnectedCallback() {
-        window.removeEventListener('mouseup', this.__handlePress);
-        this.removeEventListener('click', this.__dispatchClickWithThrottle);
-        super.disconnectedCallback();
-    }
-    __convertTypeToVariantAndColor() {
-        if (this.type === 'primary') {
-            this.color = 'primary';
-            this.variant = 'filled';
-        }
-        else if (this.type === 'secondary') {
-            this.color = 'surface';
-            this.variant = 'filled';
-        }
-        else if (this.type === 'tertiary') {
-            this.color = 'primary';
-            this.variant = 'text';
-        }
-        else if (this.type === 'danger') {
-            this.color = 'danger';
-            this.variant = 'filled';
-        }
-    }
-    get __disabledReasonID() {
-        return this.disabled && this.disabledReason
-            ? BaseButton.DISABLED_REASON_ID
-            : undefined;
-    }
-    __renderDisabledReason() {
-        const disabledReasonID = this.__disabledReasonID;
-        if (disabledReasonID)
-            return b `<div
-        id=${disabledReasonID}
-        role="tooltip"
-        aria-label=${this.disabledReason}
-        class="screen-reader-only"
-      >
-        ${this.disabledReason}
-      </div>`;
-        return A;
-    }
-    __renderTooltip() {
-        if (this.tooltip) {
-            return b `<wc-tooltip for="button">${this.tooltip}</wc-tooltip>`;
-        }
-        return A;
-    }
-}
-BaseButton.DISABLED_REASON_ID = 'disabled-reason';
-__decorate([
-    n({ type: String })
-], BaseButton.prototype, "htmlType", void 0);
-__decorate([
-    n({ type: String })
-], BaseButton.prototype, "type", void 0);
-__decorate([
-    n()
-], BaseButton.prototype, "variant", void 0);
-__decorate([
-    n({ reflect: true })
-], BaseButton.prototype, "color", void 0);
-__decorate([
-    n({ reflect: true })
-], BaseButton.prototype, "size", void 0);
-__decorate([
-    n({ type: Boolean, reflect: true })
-], BaseButton.prototype, "disabled", void 0);
-__decorate([
-    n({ type: Boolean, reflect: true })
-], BaseButton.prototype, "skeleton", void 0);
-__decorate([
-    n({ type: Boolean, reflect: true, attribute: 'soft-disabled' })
-], BaseButton.prototype, "softDisabled", void 0);
-__decorate([
-    n({ attribute: 'disabled-reason' })
-], BaseButton.prototype, "disabledReason", void 0);
-__decorate([
-    n({ reflect: true })
-], BaseButton.prototype, "configAria", void 0);
-__decorate([
-    n({ type: Boolean, reflect: true })
-], BaseButton.prototype, "toggle", void 0);
-__decorate([
-    n({ type: Boolean, reflect: true })
-], BaseButton.prototype, "selected", void 0);
-__decorate([
-    n()
-], BaseButton.prototype, "throttleDelay", void 0);
-__decorate([
-    n()
-], BaseButton.prototype, "tooltip", void 0);
-__decorate([
-    r()
-], BaseButton.prototype, "isPressed", void 0);
-__decorate([
-    e('.button')
-], BaseButton.prototype, "buttonElement", void 0);
-
-var _Button_tabindex;
-/**
- * @label Button
- * @tag wc-button
- * @rawTag button
- *
- * @summary Buttons help people initiate actions, from sending an email, to sharing a document, to liking a post.
- * @overview
- * <p>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. Button labels express what action will occur when the user interacts with it.</p>
- *
- * @cssprop --button-container-shape: Defines the border radius of the button container shape.
- *
- * @cssprop --button-container-shape-start-start: Defines the start position of the button container shape.
- * @cssprop --button-container-shape-start-end: Defines the end position of the button container shape.
- * @cssprop --button-container-shape-end-start: Defines the start position of the button container shape.
- * @cssprop --button-container-shape-end-end: Defines the end position of the button container shape.
- *
- *
- * @cssprop --filled-button-container-color: Color of the filled button container.
- * @cssprop --filled-button-label-text-color: Text color of the filled button label.
- *
- * @cssprop --outlined-button-container-color: Color of the outlined button container.
- * @cssprop --outlined-button-label-text-color: Text color of the outlined button label.
- *
- * @cssprop --text-button-label-text-color: Text color of the text button label.
- *
- * @cssprop --tonal-button-container-color: Color of the tonal button container.
- * @cssprop --tonal-button-label-text-color: Text color of the tonal button label.
- *
- * @cssprop --elevated-button-container-color: Color of the elevated button container.
- * @cssprop --elevated-button-label-text-color: Text color of the elevated button label.
- *
- * @cssprop --neo-button-container-color: Color of the neo button container.
- * @cssprop --neo-button-label-text-color: Text color of the neo button label.
- *
- * @fires {MouseEvent} click - Dispatched when the button is clicked.
- *
- * @example
- * ```html
- * <wc-button>Button</wc-button>
- * ```
- * @tags display
- */
-let Button = class Button extends BaseButton {
-    constructor() {
-        super(...arguments);
-        _Button_tabindex.set(this, 0);
-        /**
-         * Icon alignment.
-         * Possible values are `"start"`, `"end"`. Defaults to `"end"`.
-         */
-        this.iconAlign = 'end';
-        this.slotHasContent = false;
-    }
-    focus() {
-        this.buttonElement?.focus();
-    }
-    blur() {
-        this.buttonElement?.blur();
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.addEventListener('click', this.__dispatchClickWithThrottle);
-        window.addEventListener('mouseup', this.__handlePress);
-    }
-    disconnectedCallback() {
-        window.removeEventListener('mouseup', this.__handlePress);
-        this.removeEventListener('click', this.__dispatchClickWithThrottle);
-        super.disconnectedCallback();
-    }
-    firstUpdated() {
-        this.__dispatchClickWithThrottle = throttle(this.__dispatchClick, this.throttleDelay);
-        observerSlotChangesWithCallback(this.renderRoot.querySelector('slot'), hasContent => {
-            this.slotHasContent = hasContent;
-            this.requestUpdate();
-        });
-        this.__convertTypeToVariantAndColor();
-    }
-    render() {
-        const isLink = this.__isLink();
-        const cssClasses = {
-            button: true,
-            'button-element': true,
-            [`size-${this.size}`]: true,
-            [`variant-${this.variant}`]: true,
-            [`color-${this.color}`]: true,
-            disabled: this.disabled || this.softDisabled,
-            pressed: this.isPressed,
-            'has-content': this.slotHasContent,
-            'show-skeleton': this.skeleton,
-            [`icon-align-${this.iconAlign}`]: true,
-        };
-        if (!isLink) {
-            return b `<button
-          class=${e$1(cssClasses)}
-          id="button"
-          tabindex=${__classPrivateFieldGet(this, _Button_tabindex, "f")}
-          type=${this.htmlType}
-          @click=${this.__dispatchClickWithThrottle}
-          @mousedown=${this.__handlePress}
-          @keydown=${this.__handlePress}
-          @keyup=${this.__handlePress}
-          aria-describedby=${this.__disabledReasonID}
-          aria-disabled=${`${this.disabled || this.softDisabled}`}
-          ?disabled=${this.disabled}
-          ${spread(this.configAria)}
-        >
-          ${this.renderButtonContent()}
-        </button>
-        ${this.__renderTooltip()}`;
-        }
-        return b `<a
-        class=${e$1(cssClasses)}
-        id="button"
-        tabindex=${__classPrivateFieldGet(this, _Button_tabindex, "f")}
-        href=${this.href}
-        target=${this.target}
-          @click=${this.__dispatchClickWithThrottle}
-        @mousedown=${this.__handlePress}
-        @keydown=${this.__handlePress}
-        @keyup=${this.__handlePress}
-        role="button"
-        aria-describedby=${this.__disabledReasonID}
-        aria-disabled=${`${this.disabled}`}
-        ${spread(this.configAria)}
-      >
-        ${this.renderButtonContent()}
-      </a>
-      ${this.__renderTooltip()}`;
-    }
-    renderButtonContent() {
-        return b `
-      <wc-focus-ring class="focus-ring" .control=${this} .forElement=${this.buttonElement}></wc-focus-ring>
-      <wc-elevation class="elevation"></wc-elevation>
-      <div class="neo-background"></div>
-      <div class="background"></div>
-      <div class="outline"></div>
-      <wc-ripple class="ripple"></wc-ripple>
-      <wc-skeleton class="skeleton"></wc-skeleton>
-
-      <div class="button-content">
-        <div class="slot-container">
-          <slot></slot>
-        </div>
-
-        <slot name="icon"></slot>
-      </div>
-
-      ${this.__renderDisabledReason()}
-    `;
-    }
-};
-_Button_tabindex = new WeakMap();
-Button.styles = [css_248z$2, css_248z$1, css_248z];
-__decorate([
-    n({ attribute: 'icon-align' })
-], Button.prototype, "iconAlign", void 0);
-__decorate([
-    r()
-], Button.prototype, "slotHasContent", void 0);
-Button = __decorate([
-    IndividualComponent
-], Button);
-
-export { Button as B, css_248z$1 as a, BaseButton as b, css_248z$2 as c, BaseHyperlink as d };
-//# sourceMappingURL=button-DMN1dPAg.js.map
+export { css_248z as a, css_248z$1 as c };
+//# sourceMappingURL=button-colors-Ccys3hvS.js.map

package/dist/button-colors-Ccys3hvS.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-colors-Ccys3hvS.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}