@redvars/peacock 3.2.7 → 3.2.8

package/dist/button-BtpAXuLN.js

@@ -0,0 +1,1180 @@
+import { i, e as e$2, d as i$1, t, _ as __decorate, n, a as i$2, A, c as __classPrivateFieldGet, b, P as PeacockComponent } from './PeacockComponent-DMrFEGDh.js';
+import { r } from './state-CEVpI7Vv.js';
+import { e as e$3 } from './class-map-CbncA34D.js';
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const e$1=(e,t,c)=>(c.configurable=true,c.enumerable=true,Reflect.decorate&&"object"!=typeof t&&Object.defineProperty(e,t,c),c);
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */function e(e,r){return (n,s,i)=>{const o=t=>t.renderRoot?.querySelector(e)??null;return e$1(n,s,{get(){return o(this)}})}}
+
+async function createCacheFetch(name) {
+    let cache = null;
+    // This map tracks requests currently being processed
+    const inFlightRequests = new Map();
+    try {
+        cache = await window.caches.open(name);
+    }
+    catch (e) {
+        console.warn('window.caches access not allowed');
+    }
+    return async (url) => {
+        // 1. Check if we are already fetching this URL
+        if (inFlightRequests.has(url)) {
+            // Return the existing promise instead of starting a new one
+            return inFlightRequests.get(url);
+        }
+        // 2. Create the main logic as a promise
+        const fetchPromise = (async () => {
+            const request = new Request(url);
+            // Check Cache first
+            if (cache) {
+                const cachedResponse = await cache.match(request);
+                if (cachedResponse) {
+                    return cachedResponse.text();
+                }
+            }
+            // Prepare network request
+            const urlObj = new URL(request.url);
+            const isSameOrigin = urlObj.origin === window.location.origin;
+            const response = await fetch(request.url, {
+                method: 'GET',
+                mode: isSameOrigin ? 'no-cors' : 'cors',
+                credentials: isSameOrigin ? 'same-origin' : 'omit',
+            });
+            // --- Handle 404 ---
+            if (response.status === 404) {
+                console.error(`[Fetch Error] Resource not found (404): ${url}`);
+                return ''; // Return empty string as requested
+            }
+            const result = await response.text();
+            // Update Cache if applicable
+            if (cache && response.status === 200) {
+                // We clone the response logic by creating a new Response with the text body
+                await cache.put(request, new Response(result, {
+                    status: response.status,
+                    statusText: response.statusText,
+                    headers: response.headers,
+                }));
+            }
+            return result;
+        })();
+        // 3. Store the promise in the map
+        inFlightRequests.set(url, fetchPromise);
+        try {
+            // 4. Wait for the result
+            return await fetchPromise;
+        }
+        finally {
+            // 5. Clean up: Remove the promise from the map when done
+            // This ensures subsequent calls (after this one finishes) can start fresh
+            inFlightRequests.delete(url);
+        }
+    };
+}
+// Basic sanitization: remove <script>, <foreignObject>, event handler attributes (on*), and iframes
+function sanitizeSvg(rawSvg) {
+    try {
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(rawSvg, 'image/svg+xml');
+        // remove script tags
+        const scripts = Array.from(doc.querySelectorAll('script'));
+        scripts.forEach(n => n.remove());
+        // remove foreignObject and iframe-like elements
+        const foreigns = Array.from(doc.querySelectorAll('foreignObject, iframe'));
+        foreigns.forEach(n => n.remove());
+        // remove event handler attributes like onload, onclick, etc.
+        const all = Array.from(doc.querySelectorAll('*'));
+        all.forEach(el => {
+            const attrs = Array.from(el.attributes).filter(a => /^on/i.test(a.name));
+            attrs.forEach(a => el.removeAttribute(a.name));
+        });
+        const el = doc.documentElement;
+        if (!el)
+            return '';
+        // serialize back to string
+        const serializer = new XMLSerializer();
+        return serializer.serializeToString(el);
+    }
+    catch (e) {
+        // parsing failed; fall back to empty content to avoid injecting unsafe content
+        return '';
+    }
+}
+function __hasMeaningfulContent(slotElement) {
+    const nodes = slotElement.assignedNodes({ flatten: true });
+    for (const node of nodes) {
+        // If it's an element node, it has content
+        if (node.nodeType === Node.ELEMENT_NODE) {
+            return true;
+        }
+        // If it's a text node and contains non-whitespace characters, it has content
+        if (node.nodeType === Node.TEXT_NODE &&
+            node.textContent.trim().length > 0) {
+            return true;
+        }
+    }
+    // No meaningful content found
+    return false;
+}
+function observerSlotChangesWithCallback(slot, callback) {
+    const observer = new MutationObserver(() => {
+        callback(__hasMeaningfulContent(slot));
+    });
+    // Observe the elements currently assigned to the slot
+    const assignedNodes = slot?.assignedNodes({ flatten: true }) || [];
+    assignedNodes.forEach(node => {
+        observer.observe(node, {
+            attributes: true,
+            childList: true,
+            characterData: true,
+            subtree: true,
+        });
+    });
+    callback(__hasMeaningfulContent(slot));
+}
+function throttle(func, delay, options = { leading: true, trailing: true }) {
+    let timerId;
+    let lastExec = 0;
+    return function (...args) {
+        // @ts-ignore
+        const context = this;
+        const now = Date.now();
+        const shouldCallNow = options.leading && now - lastExec >= delay;
+        if (shouldCallNow) {
+            func.apply(context, args);
+            lastExec = now;
+        }
+        else if (options.trailing && !timerId) {
+            timerId = setTimeout(() => {
+                func.apply(context, args);
+                lastExec = Date.now();
+                timerId = null;
+            }, delay);
+        }
+    };
+}
+/**
+ * Dispatches a click event to the given element that triggers a native action,
+ * but is not composed and therefore is not seen outside the element.
+ *
+ * This is useful for responding to an external click event on the host element
+ * that should trigger an internal action like a button click.
+ *
+ * Note, a helper is provided because setting this up correctly is a bit tricky.
+ * In particular, calling `click` on an element creates a composed event, which
+ * is not desirable, and a manually dispatched event must specifically be a
+ * `MouseEvent` to trigger a native action.
+ *
+ * @example
+ * hostClickListener = (event: MouseEvent) {
+ *   if (isActivationClick(event)) {
+ *     this.dispatchActivationClick(this.buttonElement);
+ *   }
+ * }
+ *
+ */
+function dispatchActivationClick(element) {
+    const event = new MouseEvent('click', { bubbles: true });
+    element.dispatchEvent(event);
+    return event;
+}
+// Ignore events for one microtask only.
+let isSquelchingEvents = false;
+async function __squelchEventsForMicrotask() {
+    isSquelchingEvents = true;
+    // Need to pause for just one microtask.
+    // tslint:disable-next-line
+    await null;
+    isSquelchingEvents = false;
+}
+// TODO(https://bugzilla.mozilla.org/show_bug.cgi?id=1804576)
+//  Remove when Firefox bug is addressed.
+function __squelchEvent(event) {
+    const squelched = isSquelchingEvents;
+    if (squelched) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+    }
+    __squelchEventsForMicrotask();
+    return squelched;
+}
+/**
+ * Returns true if the click event should trigger an activation behavior. The
+ * behavior is defined by the element and is whatever it should do when
+ * clicked.
+ *
+ * Typically when an element needs to handle a click, the click is generated
+ * from within the element and an event listener within the element implements
+ * the needed behavior; however, it's possible to fire a click directly
+ * at the element that the element should handle. This method helps
+ * distinguish these "external" clicks.
+ *
+ * An "external" click can be triggered in a number of ways: via a click
+ * on an associated label for a form  associated element, calling
+ * `element.click()`, or calling
+ * `element.dispatchEvent(new MouseEvent('click', ...))`.
+ *
+ * Also works around Firefox issue
+ * https://bugzilla.mozilla.org/show_bug.cgi?id=1804576 by squelching
+ * events for a microtask after called.
+ *
+ * @example
+ * hostClickListener = (event: MouseEvent) {
+ *   if (isActivationClick(event)) {
+ *     this.dispatchActivationClick(this.buttonElement);
+ *   }
+ * }
+ *
+ */
+function isActivationClick(event) {
+    // Event must start at the event target.
+    if (event.currentTarget !== event.target) {
+        return false;
+    }
+    // Event must not be retargeted from shadowRoot.
+    if (event.composedPath()[0] !== event.target) {
+        return false;
+    }
+    // Target must not be disabled; this should only occur for a synthetically
+    // dispatched click.
+    if (event.target.disabled) {
+        return false;
+    }
+    // This is an activation if the event should not be squelched.
+    return !__squelchEvent(event);
+}
+/**
+ * Re-dispatches an event from the provided element.
+ *
+ * This function is useful for forwarding non-composed events, such as `change`
+ * events.
+ *
+ * @example
+ * class MyInput extends LitElement {
+ *   render() {
+ *     return html`<input @change=${this.redispatchEvent}>`;
+ *   }
+ *
+ *   protected redispatchEvent(event: Event) {
+ *     redispatchEvent(this, event);
+ *   }
+ * }
+ *
+ * @param element The element to dispatch the event from.
+ * @param event The event to re-dispatch.
+ * @return Whether or not the event was dispatched (if cancelable).
+ */
+function redispatchEvent(element, event) {
+    // For bubbling events in SSR light DOM (or composed), stop their propagation
+    // and dispatch the copy.
+    if (event.bubbles && (!element.shadowRoot || event.composed)) {
+        event.stopPropagation();
+    }
+    const copy = Reflect.construct(event.constructor, [event.type, event]);
+    const dispatched = element.dispatchEvent(copy);
+    if (!dispatched) {
+        event.preventDefault();
+    }
+    return dispatched;
+}
+
+var css_248z$2 = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+:host {
+  display: inline-flex;
+  --z-index-button: 0;
+  --button-height: unset;
+  --button-icon-size: unset;
+  --button-container-shape: unset;
+  --button-container-shape-start-start: unset;
+  --button-container-shape-start-end: unset;
+  --button-container-shape-end-start: unset;
+  --button-container-shape-end-end: unset;
+  --button-container-shape-variant: unset;
+}
+
+/**
+  * Private CSS Variables
+  * These variables are used internally within the button component
+  */
+slot::slotted(*) {
+  --icon-size: var(--button-icon-size, var(--_button-icon-size));
+  --icon-color: var(--_label-text-color);
+}
+
+/*
+  * Reset native button/link styles
+  */
+.button.button-element {
+  background: transparent;
+  border: none;
+  appearance: none;
+  margin: 0;
+  outline: none;
+  text-decoration: none;
+}
+
+.button {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: var(--button-height, var(--_button-height));
+  padding: 0 var(--_container-padding);
+  width: 100%;
+  font-family: var(--font-family-sans) !important;
+  cursor: pointer;
+  --_container-shape-start-start: var(--button-container-shape-start-start, var(--button-container-shape, var(--shape-corner-medium)));
+  --_container-shape-start-end: var(--button-container-shape-start-end, var(--button-container-shape, var(--shape-corner-medium)));
+  --_container-shape-end-start: var(--button-container-shape-end-start, var(--button-container-shape, var(--shape-corner-medium)));
+  --_container-shape-end-end: var(--button-container-shape-end-end, var(--button-container-shape, var(--shape-corner-medium)));
+  --_container-corner-shape-variant: var(--button-container-shape-variant, squircle);
+}
+.button .button-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--_button-icon-label-spacing);
+  width: 100%;
+  z-index: 1;
+  color: var(--_label-text-color);
+  opacity: var(--_label-text-opacity, 1);
+  --icon-size: var(--button-icon-size, var(--_button-icon-size));
+  --icon-color: var(--_label-text-color);
+}
+.button .button-content .slot-container {
+  display: none;
+}
+.button.disabled {
+  cursor: not-allowed;
+}
+.button {
+  /*
+    Background layers
+   */
+}
+.button .focus-ring {
+  z-index: 2;
+  --focus-ring-container-shape-start-start: var(--_container-shape-start-start);
+  --focus-ring-container-shape-start-end: var(--_container-shape-start-end);
+  --focus-ring-container-shape-end-start: var(--_container-shape-end-start);
+  --focus-ring-container-shape-end-end: var(--_container-shape-end-end);
+  --focus-ring-container-shape-variant: var(--_container-corner-shape-variant);
+}
+.button .ripple {
+  border-start-start-radius: var(--_container-shape-start-start);
+  border-start-end-radius: var(--_container-shape-start-end);
+  border-end-start-radius: var(--_container-shape-end-start);
+  border-end-end-radius: var(--_container-shape-end-end);
+  corner-shape: var(--_container-corner-shape-variant);
+  --ripple-state-opacity: var(--_container-state-opacity, 0);
+  --ripple-pressed-color: var(--_container-state-color);
+}
+.button .background {
+  display: block;
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--_container-color);
+  opacity: var(--_container-opacity, 1);
+  border-start-start-radius: var(--_container-shape-start-start);
+  border-start-end-radius: var(--_container-shape-start-end);
+  border-end-start-radius: var(--_container-shape-end-start);
+  border-end-end-radius: var(--_container-shape-end-end);
+  corner-shape: var(--_container-corner-shape-variant);
+  pointer-events: none;
+}
+.button .skeleton {
+  display: none;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+  position: absolute;
+  top: 0;
+  left: 0;
+  --skeleton-container-shape-start-start: var(--_container-shape-start-start);
+  --skeleton-container-shape-start-end: var(--_container-shape-start-end);
+  --skeleton-container-shape-end-start: var(--_container-shape-end-start);
+  --skeleton-container-shape-end-end: var(--_container-shape-end-end);
+  --skeleton-container-shape-variant: var(--_container-corner-shape-variant);
+}
+.button .elevation {
+  --elevation-level: var(--_container-elevation-level);
+  transition-duration: 280ms;
+  --elevation-container-shape-start-start: var(--_container-shape-start-start);
+  --elevation-container-shape-start-end: var(--_container-shape-start-end);
+  --elevation-container-shape-end-start: var(--_container-shape-end-start);
+  --elevation-container-shape-end-end: var(--_container-shape-end-end);
+  --elevation-container-shape-variant: var(--_container-corner-shape-variant);
+}
+.button .neo-background {
+  display: none;
+  position: absolute;
+  background: var(--color-inverse-surface);
+  border-start-start-radius: var(--_container-shape-start-start);
+  border-start-end-radius: var(--_container-shape-start-end);
+  border-end-start-radius: var(--_container-shape-end-start);
+  border-end-end-radius: var(--_container-shape-end-end);
+  corner-shape: var(--_container-corner-shape-variant);
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  transform: translateX(0.25rem) translateY(0.25rem);
+}
+.button .neo-background:before {
+  z-index: 0;
+  content: "";
+  position: absolute;
+  pointer-events: none;
+  border-start-start-radius: var(--_container-shape-start-start);
+  border-start-end-radius: var(--_container-shape-start-end);
+  border-end-start-radius: var(--_container-shape-end-start);
+  border-end-end-radius: var(--_container-shape-end-end);
+  corner-shape: var(--_container-corner-shape-variant);
+  width: 100%;
+  height: 100%;
+  background: white;
+  left: 0;
+  transform: translateX(-0.25rem) translateY(-0.25rem);
+}
+.button .outline {
+  z-index: 0;
+  display: none;
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  border: var(--_outline-width) solid var(--_outline-color);
+  opacity: var(--_outline-opacity, 1);
+  border-start-start-radius: var(--_container-shape-start-start);
+  border-start-end-radius: var(--_container-shape-start-end);
+  border-end-start-radius: var(--_container-shape-end-start);
+  border-end-end-radius: var(--_container-shape-end-end);
+  corner-shape: var(--_container-corner-shape-variant);
+}
+.button.has-content .slot-container {
+  display: flex;
+  flex: none;
+  justify-content: center;
+}
+.button.show-skeleton .background {
+  display: none;
+}
+.button.show-skeleton .neo-background {
+  display: none;
+}
+.button.show-skeleton .neo-background:before {
+  display: none;
+}
+.button.show-skeleton .ripple {
+  display: none;
+}
+.button.show-skeleton .skeleton {
+  display: block;
+}
+.button.icon-align-start .button-content {
+  flex-direction: row-reverse;
+}
+.button.icon-align-end .button-content {
+  flex-direction: row;
+}
+
+/**
+ * Button variant definitions
+ */
+.button.variant-elevated {
+  --_container-color: var(--elevated-button-container-color);
+  --_label-text-color: var(--elevated-button-label-text-color);
+  --_container-elevation-level: 1;
+  --_container-state-color: var(--_label-text-color);
+}
+.button.variant-elevated:hover:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
+  --_container-elevation-level: 2;
+  --_container-state-opacity: 0.08;
+}
+.button.variant-elevated.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
+  --_container-elevation-level: 1;
+  --_container-state-opacity: 0.12;
+}
+.button.variant-elevated.disabled {
+  --_container-color: var(--color-on-surface);
+  --_container-opacity: 0.1;
+  --_label-text-color: var(--color-on-surface);
+  --_label-text-opacity: 0.38;
+}
+.button.variant-elevated.disabled .ripple {
+  display: none;
+}
+
+.button.variant-filled {
+  --_container-color: var(--filled-button-container-color);
+  --_label-text-color: var(--filled-button-label-text-color);
+  --_container-state-color: var(--_label-text-color);
+}
+.button.variant-filled:hover:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
+  --_container-elevation-level: 1;
+  --_container-state-opacity: 0.08;
+}
+.button.variant-filled.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
+  --_container-elevation-level: 0;
+  --_container-state-opacity: 0.1;
+}
+.button.variant-filled.disabled {
+  --_container-color: var(--color-on-surface);
+  --_container-opacity: 0.1;
+  --_label-text-color: var(--color-on-surface);
+  --_label-text-opacity: 0.38;
+}
+.button.variant-filled.disabled .ripple {
+  display: none;
+}
+
+.button.variant-tonal {
+  --_container-color: var(--tonal-button-container-color);
+  --_label-text-color: var(--tonal-button-label-text-color);
+  --_container-state-color: var(--_label-text-color);
+}
+.button.variant-tonal:hover:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
+  --_container-elevation-level: 1;
+  --_container-state-opacity: 0.08;
+}
+.button.variant-tonal.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
+  --_container-elevation-level: 0;
+  --_container-state-opacity: 0.12;
+}
+.button.variant-tonal.disabled {
+  --_container-color: var(--color-on-surface);
+  --_container-opacity: 0.1;
+  --_label-text-color: var(--color-on-surface);
+  --_label-text-opacity: 0.38;
+}
+.button.variant-tonal.disabled .ripple {
+  display: none;
+}
+
+.button.variant-outlined {
+  --_outline-width: var(--outlined-button-outline-width, 0.0675rem);
+  --_outline-color: var(--outlined-button-outline-color);
+  --_label-text-color: var(--outlined-button-label-text-color);
+  --_container-state-color: var(--_label-text-color);
+}
+.button.variant-outlined .outline {
+  display: block;
+}
+.button.variant-outlined:hover:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
+  --_container-state-opacity: 0.08;
+}
+.button.variant-outlined.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
+  --_container-state-opacity: 0.12;
+}
+.button.variant-outlined.disabled {
+  --_outline-color: var(--color-on-surface);
+  --_label-text-color: var(--color-on-surface);
+  --_label-text-opacity: 0.38;
+  --_outline-opacity: 0.12;
+}
+.button.variant-outlined.disabled .ripple {
+  display: none;
+}
+
+.button.variant-text {
+  --_label-text-color: var(--text-button-label-text-color);
+  --_container-state-color: var(--_label-text-color);
+}
+.button.variant-text:hover:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
+  --_container-state-opacity: 0.08;
+}
+.button.variant-text.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
+  --_container-state-opacity: 0.12;
+}
+.button.variant-text.disabled {
+  --_label-text-color: var(--color-on-surface);
+  --_label-text-opacity: 0.38;
+}
+.button.variant-text.disabled .ripple {
+  display: none;
+}
+
+.button.variant-neo {
+  --_container-color: var(--neo-button-container-color);
+  --_label-text-color: var(--neo-button-label-text-color);
+  --_outline-width: var(--outlined-button-outline-width, 0.125rem);
+  --_outline-color: var(--color-inverse-surface);
+}
+.button.variant-neo .outline {
+  display: block;
+}
+.button.variant-neo .neo-background {
+  display: block;
+}
+.button.variant-neo .ripple {
+  display: none;
+}
+.button.variant-neo.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) .background, .button.variant-neo.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) .button-content, .button.variant-neo.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) .outline {
+  transform: translateX(0.25rem) translateY(0.25rem);
+}
+.button.variant-neo.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) .neo-background:before {
+  transform: translateX(0) translateY(0);
+}
+.button.variant-neo.disabled {
+  --_container-color: var(--color-on-surface);
+  --_container-opacity: 0.1;
+  --_label-text-color: var(--color-on-surface);
+  --_label-text-opacity: 0.38;
+  --_outline-opacity: 0.12;
+}
+.button.variant-neo.disabled .ripple {
+  display: none;
+}
+
+:host([block]) {
+  width: 100%;
+}`;
+
+var css_248z$1 = i`:host([color=primary]) {
+  --filled-button-container-color: var(--color-primary);
+  --filled-button-label-text-color: var(--color-on-primary);
+  --tonal-button-container-color: var(--color-primary-container);
+  --tonal-button-label-text-color: var(--color-on-primary-container);
+  --elevated-button-container-color: var(--color-surface-container-low);
+  --elevated-button-label-text-color: var(--color-primary);
+  --outlined-button-outline-color: var(--color-primary);
+  --outlined-button-label-text-color: var(--color-primary);
+  --text-button-label-text-color: var(--color-primary);
+  --neo-button-container-color: var(--color-primary);
+  --neo-button-label-text-color: var(--color-on-primary);
+}
+
+:host([color=secondary]) {
+  --filled-button-container-color: var(--color-secondary);
+  --filled-button-label-text-color: var(--color-on-secondary);
+  --tonal-button-container-color: var(--color-secondary-container);
+  --tonal-button-label-text-color: var(--color-on-secondary-container);
+  --elevated-button-container-color: var(--color-surface-container-low);
+  --elevated-button-label-text-color: var(--color-secondary);
+  --outlined-button-outline-color: var(--color-secondary);
+  --outlined-button-label-text-color: var(--color-secondary);
+  --text-button-label-text-color: var(--color-secondary);
+  --neo-button-container-color: var(--color-secondary);
+  --neo-button-label-text-color: var(--color-on-secondary);
+}
+
+:host([color=tertiary]) {
+  --filled-button-container-color: var(--color-tertiary);
+  --filled-button-label-text-color: var(--color-on-tertiary);
+  --tonal-button-container-color: var(--color-tertiary-container);
+  --tonal-button-label-text-color: var(--color-on-tertiary-container);
+  --elevated-button-container-color: var(--color-surface-container-low);
+  --elevated-button-label-text-color: var(--color-tertiary);
+  --outlined-button-outline-color: var(--color-tertiary);
+  --outlined-button-label-text-color: var(--color-tertiary);
+  --text-button-label-text-color: var(--color-tertiary);
+  --neo-button-container-color: var(--color-tertiary);
+  --neo-button-label-text-color: var(--color-on-tertiary);
+}
+
+:host([color=success]) {
+  --filled-button-container-color: var(--color-success);
+  --filled-button-label-text-color: var(--color-on-success);
+  --tonal-button-container-color: var(--color-success-container);
+  --tonal-button-label-text-color: var(--color-on-success-container);
+  --elevated-button-container-color: var(--color-surface-container-low);
+  --elevated-button-label-text-color: var(--color-success);
+  --outlined-button-outline-color: var(--color-success);
+  --outlined-button-label-text-color: var(--color-success);
+  --text-button-label-text-color: var(--color-success);
+  --neo-button-container-color: var(--color-success);
+  --neo-button-label-text-color: var(--color-on-success);
+}
+
+:host([color=danger]) {
+  --filled-button-container-color: var(--color-error);
+  --filled-button-label-text-color: var(--color-on-error);
+  --tonal-button-container-color: var(--color-error-container);
+  --tonal-button-label-text-color: var(--color-on-error-container);
+  --elevated-button-container-color: var(--color-surface-container-low);
+  --elevated-button-label-text-color: var(--color-error);
+  --outlined-button-outline-color: var(--color-error);
+  --outlined-button-label-text-color: var(--color-error);
+  --text-button-label-text-color: var(--color-error);
+  --neo-button-container-color: var(--color-error);
+  --neo-button-label-text-color: var(--color-on-error);
+}
+
+:host([color=dark]) {
+  --filled-button-container-color: var(--color-on-surface);
+  --filled-button-label-text-color: var(--color-surface);
+  --tonal-button-container-color: var(--color-surface-container);
+  --tonal-button-label-text-color: var(--color-on-surface-container);
+  --elevated-button-container-color: var(--color-surface-container-low);
+  --elevated-button-label-text-color: var(--color-on-surface);
+  --outlined-button-outline-color: var(--color-on-surface);
+  --outlined-button-label-text-color: var(--color-on-surface);
+  --text-button-label-text-color: var(--color-on-surface);
+  --neo-button-container-color: var(--color-on-surface);
+  --neo-button-label-text-color: var(--color-surface);
+}
+
+:host([color=light]) {
+  --filled-button-container-color: var(--color-surface);
+  --filled-button-label-text-color: var(--color-on-surface);
+  --tonal-button-container-color: var(--color-on-surface-container);
+  --tonal-button-label-text-color: var(--color-surface-container);
+  --elevated-button-container-color: var(--color-surface-container-low);
+  --elevated-button-label-text-color: var(--color-white);
+  --outlined-button-outline-color: var(--color-surface);
+  --outlined-button-label-text-color: var(--color-surface);
+  --text-button-label-text-color: var(--color-surface);
+  --neo-button-container-color: var(--color-surface);
+  --neo-button-label-text-color: var(--color-on-surface);
+}`;
+
+var css_248z = i`.button.size-xs,
+.button.size-extra-small {
+  --_button-height: 2rem;
+  --_button-icon-size: 1rem;
+  --_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;
+}
+
+.button.size-sm,
+.button.size-small {
+  --_button-height: 2.5rem;
+  --_button-icon-size: 1.25rem;
+  --_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;
+}
+
+.button.size-md,
+.button.size-medium {
+  --_button-height: 3.5rem;
+  --_button-icon-size: 1.5rem;
+  --_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;
+}
+
+.button.size-lg,
+.button.size-large {
+  --_button-height: 6rem;
+  --_button-icon-size: 2rem;
+  --_container-padding: 3rem;
+  font-size: 1.5rem !important;
+  font-weight: var(--font-weight-regular) !important;
+  line-height: 2rem !important;
+  letter-spacing: 0 !important;
+}
+
+.button.size-xl {
+  --_button-height: 8.5rem;
+  --_button-icon-size: 2.5rem;
+  --_container-padding: 4rem;
+  font-size: 2rem !important;
+  font-weight: var(--font-weight-regular) !important;
+  line-height: 2.5rem !important;
+  letter-spacing: 0 !important;
+}`;
+
+class SpreadDirective extends i$1 {
+    constructor(partInfo) {
+        super(partInfo);
+        if (partInfo.type !== t.ELEMENT) {
+            throw new Error('spread() can only be used on elements');
+        }
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    render(_props) {
+        return '';
+    }
+    update(part, [props]) {
+        if (!props)
+            return;
+        // eslint-disable-next-line guard-for-in,no-restricted-syntax
+        for (const key in props) {
+            const value = props[key];
+            if (value === undefined || value === null) {
+                part.element.removeAttribute(key);
+            }
+            else {
+                part.element.setAttribute(key, value);
+            }
+        }
+    }
+}
+const spread = e$2(SpreadDirective);
+
+var _BaseButton_id;
+class BaseButton extends i$2 {
+    constructor() {
+        super(...arguments);
+        _BaseButton_id.set(this, crypto.randomUUID());
+        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 = '';
+        /**
+         * Sets or retrieves the window or frame at which to target content.
+         */
+        this.target = '_self';
+        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;
+            }
+            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();
+    }
+    __isLink() {
+        return !!this.href;
+    }
+    __convertTypeToVariantAndColor() {
+        if (this.type === 'primary') {
+            this.color = 'primary';
+            this.variant = 'filled';
+        }
+        else if (this.type === 'secondary') {
+            this.color = 'dark';
+            this.variant = 'outlined';
+        }
+        else if (this.type === 'tertiary') {
+            this.color = 'primary';
+            this.variant = 'text';
+        }
+        else if (this.type === 'danger') {
+            this.color = 'danger';
+            this.variant = 'filled';
+        }
+    }
+    __getDisabledReasonID() {
+        return this.disabled && this.disabledReason
+            ? `disabled-reason-${__classPrivateFieldGet(this, _BaseButton_id, "f")}`
+            : A;
+    }
+    __renderDisabledReason() {
+        const disabledReasonID = this.__getDisabledReasonID();
+        if (disabledReasonID)
+            return b `<div
+        id="disabled-reason-${__classPrivateFieldGet(this, _BaseButton_id, "f")}"
+        role="tooltip"
+        aria-label=${this.disabledReason}
+        class="screen-reader-only"
+      >
+        {this.disabledReason}
+      </div>`;
+        return A;
+    }
+    __renderTooltip() {
+        if (this.tooltip) {
+            return b `<base-tooltip for="button">${this.tooltip}</base-tooltip>`;
+        }
+        return A;
+    }
+}
+_BaseButton_id = new WeakMap();
+__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()
+], BaseButton.prototype, "size", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], BaseButton.prototype, "disabled", void 0);
+__decorate([
+    n()
+], BaseButton.prototype, "skeleton", void 0);
+__decorate([
+    n({ 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, "href", void 0);
+__decorate([
+    n({ reflect: true })
+], BaseButton.prototype, "configAria", void 0);
+__decorate([
+    n()
+], BaseButton.prototype, "target", void 0);
+__decorate([
+    n()
+], 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 base-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
+ * <base-button>Button</base-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;
+    }
+    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$3(cssClasses)}
+          id="button"
+          tabindex=${__classPrivateFieldGet(this, _Button_tabindex, "f")}
+          type=${this.htmlType}
+          @mousedown=${this.__handlePress}
+          @keydown=${this.__handlePress}
+          @keyup=${this.__handlePress}
+          ?aria-describedby=${this.__getDisabledReasonID()}
+          aria-disabled=${`${this.disabled || this.softDisabled}`}
+          ?disabled=${this.disabled}
+          ${spread(this.configAria)}
+        >
+          ${this.renderButtonContent()}
+        </button>
+        ${this.__renderTooltip()}`;
+        }
+        return b `<a
+        class=${e$3(cssClasses)}
+        id="button"
+        tabindex=${__classPrivateFieldGet(this, _Button_tabindex, "f")}
+        href=${this.href}
+        target=${this.target}
+        @mousedown=${this.__handlePress}
+        @keydown=${this.__handlePress}
+        @keyup=${this.__handlePress}
+        role="button"
+        ?aria-describedby=${this.__getDisabledReasonID()}
+        aria-disabled=${`${this.disabled}`}
+        ${spread(this.configAria)}
+      >
+        ${this.renderButtonContent()}
+      </a>
+      ${this.__renderTooltip()}`;
+    }
+    renderButtonContent() {
+        return b `
+      <focus-ring class="focus-ring" .control=${this} element="buttonElement"></focus-ring>
+      <base-elevation class="elevation"></base-elevation>
+      <div class="neo-background"></div>
+      <div class="background"></div>
+      <div class="outline"></div>
+      <base-ripple class="ripple"></base-ripple>
+      <base-skeleton class="skeleton"></base-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([
+    PeacockComponent
+], Button);
+
+export { Button as B, e$1 as a, sanitizeSvg as b, createCacheFetch as c, css_248z$2 as d, e, css_248z$1 as f, BaseButton as g, observerSlotChangesWithCallback as o, redispatchEvent as r, spread as s, throttle as t };
+//# sourceMappingURL=button-BtpAXuLN.js.map