@redvars/peacock 3.3.3 → 3.5.0

package/dist/card.js

@@ -1,67 +1,235 @@
-import { a as i, _ as __decorate, n, I as IndividualComponent, i as i$1, b } from './IndividualComponent-Dt5xirYG.js';
+import { a as i, _ as __decorate, I as IndividualComponent, i as i$1, c as __classPrivateFieldGet, A, b } from './IndividualComponent-DUINtMGK.js';
+import { n } from './property-1psGvXOq.js';
+import { r } from './state-DwbEjqVk.js';
+import { e } from './query-QBcUV-L_.js';
+import { e as e$1 } from './class-map-YU7g0o3B.js';
+import { i as isActivationClick, d as dispatchActivationClick } from './dispatch-event-utils-CuEqjlPT.js';
+import { o as observerSlotChangesWithCallback } from './observe-slot-change-BGJfgg2E.js';
+import { t as throttle } from './throttle-C7ZAPqtu.js';
+import './directive-ZPhl09Yt.js';
 
-var css_248z = i`:host {
+var css_248z$1 = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+:host {
   display: block;
-  --card-background: var(--color-surface, #ffffff);
-  --card-border-color: transparent;
-  --card-shadow: none;
-  --card-shape: var(--global-shape-corner-large, 1rem);
-  --card-padding: 1rem;
   --card-gap: 0;
+  --card-padding: 0;
+  --card-container-shape: var(--shape-corner-large);
+  --card-container-shape-start-start: unset;
+  --card-container-shape-start-end: unset;
+  --card-container-shape-end-start: unset;
+  --card-container-shape-end-end: unset;
+}
+
+/*
+  * Reset native button/link styles
+  */
+.card {
+  background: transparent;
+  border: none;
+  appearance: none;
+  margin: 0;
+  outline: none;
+  text-decoration: none;
+  text-align: unset;
 }
 
 .card {
+  position: relative;
+  display: flex;
+  height: 100%;
+  width: 100%;
+  --_container-shape-start-start: var(--card-container-shape-start-start, var(--card-container-shape));
+  --_container-shape-start-end: var(--card-container-shape-start-end, var(--card-container-shape));
+  --_container-shape-end-start: var(--card-container-shape-end-start, var(--card-container-shape));
+  --_container-shape-end-end: var(--card-container-shape-end-end, var(--card-container-shape));
+}
+.card .card-content {
+  z-index: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  padding: var(--card-padding);
+  border: 1px solid transparent; /* Fixes overflow issues with border */
+  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);
+  color: var(--_label-text-color);
+  opacity: var(--_label-text-opacity, 1);
+  --icon-color: var(--_label-text-color);
+}
+.card .card-content .slot-container {
   display: flex;
   flex-direction: column;
   gap: var(--card-gap);
-  background: var(--card-background);
-  border-radius: var(--card-shape);
-  border: 1px solid var(--card-border-color);
-  box-shadow: var(--card-shadow);
-  color: var(--color-on-surface, inherit);
-  padding: var(--card-padding);
-  transition: box-shadow 150ms ease, transform 150ms ease;
+  width: 100%;
+  height: 100%;
 }
-
-:host([variant=elevated]) {
-  --card-background: var(--color-surface-container-low, #fdfcfe);
-  --card-shadow: var(--shadow-sm, 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06));
+.card {
+  /*
+    Background layers
+   */
 }
-
-:host([variant=filled]) {
-  --card-background: var(--color-surface-container-highest, #f5f5f5);
-  --card-shadow: none;
+.card .focus-ring {
+  z-index: 2;
+  display: none;
+  --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);
 }
-
-:host([variant=outlined]) {
-  --card-border-color: var(--color-outline, rgba(0, 0, 0, 0.12));
-  --card-shadow: none;
+.card .ripple {
+  display: 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);
+  --ripple-state-opacity: var(--_container-state-opacity, 0);
+  --ripple-pressed-color: var(--_container-state-color);
 }
-
-:host([elevation="0"]) {
-  --card-shadow: none;
+.card .background {
+  z-index: 0;
+  display: block;
+  position: absolute;
+  top: 0;
+  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;
+}
+.card .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);
+}
+.card .outline {
+  z-index: 0;
+  display: none;
+  position: absolute;
+  left: 0;
+  top: 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);
 }
 
-:host([elevation="1"]) {
-  --card-shadow: var(--shadow-sm, 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06));
+.card.actionable .focus-ring,
+.card.actionable .ripple {
+  display: block;
+}
+.card.actionable .card-content {
+  pointer-events: none;
 }
 
-:host([elevation="2"]) {
-  --card-shadow: var(--shadow-md, 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06));
+.card.variant-elevated {
+  --_container-color: var(--elevated-card-container-color);
+  --_label-text-color: var(--elevated-card-label-text-color);
+  --_container-elevation-level: 1;
+  --_container-state-color: var(--_label-text-color);
+}
+.card.variant-elevated:hover:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
+  --_container-elevation-level: 2;
+  --_container-state-opacity: 0.08;
+}
+.card.variant-elevated.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
+  --_container-elevation-level: 1;
+  --_container-state-opacity: 0.12;
+}
+.card.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;
+}
+.card.variant-elevated.disabled .ripple {
+  display: none;
 }
 
-:host([elevation="3"]) {
-  --card-shadow: var(--shadow-lg, 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03));
+.card.variant-filled {
+  --_container-color: var(--filled-card-container-color);
+  --_label-text-color: var(--filled-card-label-text-color);
+  --_container-state-color: var(--_label-text-color);
+}
+.card.variant-filled:hover:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
+  --_container-elevation-level: 1;
+  --_container-state-opacity: 0.08;
+}
+.card.variant-filled.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
+  --_container-elevation-level: 0;
+  --_container-state-opacity: 0.1;
+}
+.card.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;
+}
+.card.variant-filled.disabled .ripple {
+  display: none;
 }
 
-:host([elevation="4"]) {
-  --card-shadow: var(--shadow-xl, 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03));
+.card.variant-outlined {
+  --_outline-width: var(--outlined-card-outline-width, 0.0675rem);
+  --_outline-color: var(--outlined-card-outline-color);
+  --_label-text-color: var(--outlined-card-label-text-color);
+  --_container-state-color: var(--_label-text-color);
+}
+.card.variant-outlined .outline {
+  display: block;
+}
+.card.variant-outlined:hover:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
+  --_container-state-opacity: 0.08;
+}
+.card.variant-outlined.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
+  --_container-state-opacity: 0.12;
+}
+.card.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;
 }
+.card.variant-outlined.disabled .ripple {
+  display: none;
+}`;
 
-:host([elevation="5"]) {
-  --card-shadow: var(--shadow-xxl, 0px 24px 48px -12px rgba(16, 24, 40, 0.18));
+var css_248z = i`:host {
+  --filled-card-container-color: var(--color-surface-container-highest);
+  --filled-card-label-text-color: var(--color-on-surface);
+  --elevated-card-container-color: var(--color-surface-container-low);
+  --elevated-card-label-text-color: var(--color-on-surface);
+  --outlined-card-outline-color: var(--color-outline-variant);
+  --outlined-card-label-text-color: var(--color-on-surface);
 }`;
 
+var _Card_id, _Card_tabindex, _Card_slottedTabIndexMap;
 /**
  * @label Card
  * @tag wc-card
@@ -82,20 +250,236 @@ var css_248z = i`:host {
 let Card = class Card extends i$1 {
     constructor() {
         super(...arguments);
+        _Card_id.set(this, crypto.randomUUID());
         this.variant = 'elevated';
-        this.elevation = 1;
+        this.disabled = false;
+        this.actionable = 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';
+        /**
+         * Sets the delay for throttle in milliseconds. Defaults to 200 milliseconds.
+         */
+        this.throttleDelay = 200;
+        /**
+         * States
+         */
+        this.isPressed = false;
+        this.slotHasContent = false;
+        _Card_tabindex.set(this, 0);
+        _Card_slottedTabIndexMap.set(this, new WeakMap());
+        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.disabled && this.href) {
+                event.stopImmediatePropagation();
+                event.preventDefault();
+                return;
+            }
+            if (!isActivationClick(event) || !this.cardElement) {
+                return;
+            }
+            this.focus();
+            dispatchActivationClick(this.cardElement);
+        };
+        this.__handlePress = (event) => {
+            if (this.disabled)
+                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;
+            }
+        };
+    }
+    firstUpdated() {
+        this.__dispatchClickWithThrottle = throttle(this.__dispatchClick, this.throttleDelay);
+        observerSlotChangesWithCallback(this.renderRoot.querySelector('slot'), hasContent => {
+            this.slotHasContent = hasContent;
+            this.__syncSlottedChildrenTabIndex();
+            this.requestUpdate();
+        });
+        this.__syncSlottedChildrenTabIndex();
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('actionable') || changedProperties.has('href')) {
+            this.__syncSlottedChildrenTabIndex();
+        }
+    }
+    __syncSlottedChildrenTabIndex() {
+        if (!this.contentSlot)
+            return;
+        const shouldDisableTabbing = this.actionable || this.__isLink();
+        const assignedChildren = this.contentSlot.assignedElements({ flatten: true });
+        assignedChildren.forEach(node => {
+            if (!(node instanceof HTMLElement))
+                return;
+            if (shouldDisableTabbing) {
+                if (!__classPrivateFieldGet(this, _Card_slottedTabIndexMap, "f").has(node)) {
+                    __classPrivateFieldGet(this, _Card_slottedTabIndexMap, "f").set(node, node.getAttribute('tabindex'));
+                }
+                if (node.getAttribute('tabindex') !== '-1') {
+                    node.setAttribute('tabindex', '-1');
+                }
+                return;
+            }
+            const originalTabIndex = __classPrivateFieldGet(this, _Card_slottedTabIndexMap, "f").get(node);
+            if (originalTabIndex === null) {
+                if (node.hasAttribute('tabindex')) {
+                    node.removeAttribute('tabindex');
+                }
+            }
+            else if (originalTabIndex !== undefined) {
+                if (node.getAttribute('tabindex') !== originalTabIndex) {
+                    node.setAttribute('tabindex', originalTabIndex);
+                }
+            }
+            __classPrivateFieldGet(this, _Card_slottedTabIndexMap, "f").delete(node);
+        });
+    }
+    __isLink() {
+        return !!this.href;
+    }
+    __getDisabledReasonID() {
+        return this.disabled && this.disabledReason
+            ? `disabled-reason-${__classPrivateFieldGet(this, _Card_id, "f")}`
+            : A;
+    }
+    __renderDisabledReason() {
+        const disabledReasonID = this.__getDisabledReasonID();
+        if (disabledReasonID)
+            return b `<div
+        id="disabled-reason-${__classPrivateFieldGet(this, _Card_id, "f")}"
+        role="tooltip"
+        aria-label=${this.disabledReason}
+        class="screen-reader-only"
+      >
+        ${this.disabledReason}
+      </div>`;
+        return A;
     }
     render() {
-        return b `<div class="card"><slot></slot></div>`;
+        const isLink = this.__isLink();
+        const cssClasses = {
+            card: true,
+            'card-element': true,
+            [`variant-${this.variant}`]: true,
+            actionable: (this.actionable && !this.disabled) || isLink,
+            disabled: this.disabled,
+            pressed: this.isPressed,
+            'has-content': this.slotHasContent,
+        };
+        if (!this.actionable && !isLink) {
+            return b `<div
+              class=${e$1(cssClasses)}
+              id="card"
+              >
+              ${this.renderCardContent()}
+            </div>`;
+        }
+        if (!isLink) {
+            return b `<button
+              class=${e$1(cssClasses)}
+              id="card"
+              tabindex=${__classPrivateFieldGet(this, _Card_tabindex, "f")}
+              @click=${this.__dispatchClickWithThrottle}
+              @mousedown=${this.__handlePress}
+              @keydown=${this.__handlePress}
+              @keyup=${this.__handlePress}
+              ?aria-describedby=${this.__getDisabledReasonID()}
+              aria-disabled=${`${this.disabled}`}
+              ?disabled=${this.disabled}
+            >
+              ${this.renderCardContent()}
+            </button>`;
+        }
+        return b `<a
+            class=${e$1(cssClasses)}
+            id="card"
+            tabindex=${__classPrivateFieldGet(this, _Card_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.__getDisabledReasonID()}
+            aria-disabled=${`${this.disabled}`}
+          >
+            ${this.renderCardContent()}
+          </a>`;
+    }
+    renderCardContent() {
+        return b `
+    <wc-focus-ring class="focus-ring" .control=${this} .forElement=${this.cardElement}></wc-focus-ring>
+      <wc-elevation class="elevation"></wc-elevation>
+      <div class="background"></div>
+      <div class="outline"></div>
+      <wc-ripple class="ripple"></wc-ripple> 
+
+      <div class="card-content">
+
+        <div class="slot-container">
+          <slot @slotchange=${this.__syncSlottedChildrenTabIndex}></slot>
+        </div>
+
+      </div>
+      `;
     }
 };
-Card.styles = [css_248z];
+_Card_id = new WeakMap();
+_Card_tabindex = new WeakMap();
+_Card_slottedTabIndexMap = new WeakMap();
+Card.styles = [css_248z$1, css_248z];
 __decorate([
     n({ type: String, reflect: true })
 ], Card.prototype, "variant", void 0);
 __decorate([
-    n({ type: Number, reflect: true })
-], Card.prototype, "elevation", void 0);
+    n({ type: Boolean, reflect: true })
+], Card.prototype, "disabled", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Card.prototype, "actionable", void 0);
+__decorate([
+    n({ attribute: 'disabled-reason' })
+], Card.prototype, "disabledReason", void 0);
+__decorate([
+    n({ reflect: true })
+], Card.prototype, "href", void 0);
+__decorate([
+    n()
+], Card.prototype, "target", void 0);
+__decorate([
+    n()
+], Card.prototype, "throttleDelay", void 0);
+__decorate([
+    r()
+], Card.prototype, "isPressed", void 0);
+__decorate([
+    r()
+], Card.prototype, "slotHasContent", void 0);
+__decorate([
+    e('.card')
+], Card.prototype, "cardElement", void 0);
+__decorate([
+    e('slot')
+], Card.prototype, "contentSlot", void 0);
 Card = __decorate([
     IndividualComponent
 ], Card);

package/dist/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","sources":["../../src/card/card.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport IndividualComponent from '../IndividualComponent.js';\nimport styles from './card.scss';\n\ntype CardVariant = 'elevated' | 'filled' | 'outlined';\ntype CardElevation = 0 | 1 | 2 | 3 | 4 | 5;\n/**\n * @label Card\n * @tag wc-card\n * @rawTag card\n * @summary A Material 3 inspired card surface for grouping related content.\n * @cssprop --card-padding - Inner padding for the card container. Defaults to 1rem.\n * @cssprop --card-shape - Corner radius for the card container. Defaults to a large radius.\n * @cssprop --card-gap - Gap between slotted children.\n *\n * @example\n * ```html\n * <wc-card variant=\"outlined\">\n *   <h3>Title</h3>\n *   <p>Supportive text</p>\n * </wc-card>\n * ```\n */\n@IndividualComponent\nexport class Card extends LitElement {\n  static styles = [styles];\n\n  @property({ type: String, reflect: true })\n  variant: CardVariant = 'elevated';\n\n  @property({ type: Number, reflect: true })\n  elevation: CardElevation = 1;\n\n  render() {\n    return html`<div class=\"card\"><slot></slot></div>`;\n  }\n}\n"],"names":["LitElement","html","styles","property"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA;;;;;;;;;;;;;;;;AAgBG;AAEI,IAAM,IAAI,GAAV,MAAM,IAAK,SAAQA,GAAU,CAAA;AAA7B,IAAA,WAAA,GAAA;;QAIL,IAAA,CAAA,OAAO,GAAgB,UAAU;QAGjC,IAAA,CAAA,SAAS,GAAkB,CAAC;IAK9B;IAHE,MAAM,GAAA;QACJ,OAAOC,CAAI,CAAA,CAAA,qCAAA,CAAuC;IACpD;;AAVO,IAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AAGxB,UAAA,CAAA;IADCC,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AACP,CAAA,EAAA,IAAA,CAAA,SAAA,EAAA,SAAA,EAAA,MAAA,CAAA;AAGlC,UAAA,CAAA;IADCA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AACZ,CAAA,EAAA,IAAA,CAAA,SAAA,EAAA,WAAA,EAAA,MAAA,CAAA;AAPlB,IAAI,GAAA,UAAA,CAAA;IADhB;AACY,CAAA,EAAA,IAAI,CAYhB;;;;"}
+{"version":3,"file":"card.js","sources":["../../src/card/card.ts"],"sourcesContent":["import { LitElement, html, nothing, PropertyValues } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { dispatchActivationClick, isActivationClick } from '../__utils/dispatch-event-utils.js';\nimport { observerSlotChangesWithCallback } from '@/__utils/observe-slot-change.js';\nimport { throttle } from '@/__utils/throttle.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './card.scss';\nimport colorStyles from './card-colors.scss';\n\ntype CardVariant = 'elevated' | 'filled' | 'outlined';\n\n/**\n * @label Card\n * @tag wc-card\n * @rawTag card\n * @summary A Material 3 inspired card surface for grouping related content.\n * @cssprop --card-padding - Inner padding for the card container. Defaults to 1rem.\n * @cssprop --card-shape - Corner radius for the card container. Defaults to a large radius.\n * @cssprop --card-gap - Gap between slotted children.\n *\n * @example\n * ```html\n * <wc-card variant=\"outlined\">\n *   <h3>Title</h3>\n *   <p>Supportive text</p>\n * </wc-card>\n * ```\n */\n@IndividualComponent\nexport class Card extends LitElement {\n  static styles = [styles, colorStyles];\n\n  #id = crypto.randomUUID();\n\n  @property({ type: String, reflect: true })\n  variant: CardVariant = 'elevated';\n\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  actionable: boolean = false;\n\n  /**\n  * If button is disabled, the reason why it is disabled.\n  */\n  @property({ attribute: 'disabled-reason' })\n  disabledReason: string = '';\n\n  /**\n   * Hyperlink to navigate to on click.\n   */\n  @property({ reflect: true }) href?: string;\n\n  /**\n   * Sets or retrieves the window or frame at which to target content.\n   */\n  @property() target: string = '_self';\n\n\n  /**\n   * Sets the delay for throttle in milliseconds. Defaults to 200 milliseconds.\n   */\n  @property() throttleDelay = 200;\n\n  /**\n   * States\n   */\n  @state()\n  isPressed = false;\n\n  @state()\n  private slotHasContent = false;\n\n\n  @query('.card') readonly cardElement!: HTMLElement | null;\n\n  @query('slot') readonly contentSlot!: HTMLSlotElement | null;\n\n  #tabindex?: number = 0;\n\n  #slottedTabIndexMap = new WeakMap<HTMLElement, string | null>();\n\n  override firstUpdated() {\n    this.__dispatchClickWithThrottle = throttle(\n      this.__dispatchClick,\n      this.throttleDelay,\n    );\n    observerSlotChangesWithCallback(\n      this.renderRoot.querySelector('slot'),\n      hasContent => {\n        this.slotHasContent = hasContent;\n        this.__syncSlottedChildrenTabIndex();\n        this.requestUpdate();\n      },\n    );\n    this.__syncSlottedChildrenTabIndex();\n  }\n\n  override updated(changedProperties: PropertyValues<this>) {\n    if (changedProperties.has('actionable') || changedProperties.has('href')) {\n      this.__syncSlottedChildrenTabIndex();\n    }\n  }\n\n  __syncSlottedChildrenTabIndex() {\n    if (!this.contentSlot) return;\n\n    const shouldDisableTabbing = this.actionable || this.__isLink();\n    const assignedChildren = this.contentSlot.assignedElements({ flatten: true });\n\n    assignedChildren.forEach(node => {\n      if (!(node instanceof HTMLElement)) return;\n\n      if (shouldDisableTabbing) {\n        if (!this.#slottedTabIndexMap.has(node)) {\n          this.#slottedTabIndexMap.set(node, node.getAttribute('tabindex'));\n        }\n\n        if (node.getAttribute('tabindex') !== '-1') {\n          node.setAttribute('tabindex', '-1');\n        }\n        return;\n      }\n\n      const originalTabIndex = this.#slottedTabIndexMap.get(node);\n      if (originalTabIndex === null) {\n        if (node.hasAttribute('tabindex')) {\n          node.removeAttribute('tabindex');\n        }\n      } else if (originalTabIndex !== undefined) {\n        if (node.getAttribute('tabindex') !== originalTabIndex) {\n          node.setAttribute('tabindex', originalTabIndex);\n        }\n      }\n\n      this.#slottedTabIndexMap.delete(node);\n    });\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.disabled && this.href) {\n      event.stopImmediatePropagation();\n      event.preventDefault();\n      return;\n    }\n\n    if (!isActivationClick(event) || !this.cardElement) {\n      return;\n    }\n\n    this.focus();\n    dispatchActivationClick(this.cardElement);\n  };\n\n  __isLink() {\n    return !!this.href;\n  }\n\n  __getDisabledReasonID() {\n    return this.disabled && this.disabledReason\n      ? `disabled-reason-${this.#id}`\n      : nothing;\n  }\n\n  __renderDisabledReason() {\n    const disabledReasonID = this.__getDisabledReasonID();\n    if (disabledReasonID)\n      return html`<div\n        id=\"disabled-reason-${this.#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  __handlePress = (event: KeyboardEvent | MouseEvent) => {\n    if (this.disabled) return;\n    if (\n      event instanceof KeyboardEvent &&\n      event.type === 'keydown' &&\n      (event.key === 'Enter' || event.key === ' ')\n    ) {\n      this.isPressed = true;\n    } else if (event.type === 'mousedown') {\n      this.isPressed = true;\n    } else {\n      this.isPressed = false;\n    }\n  };\n\n\n\n\n  render() {\n\n    const isLink = this.__isLink();\n\n    const cssClasses = {\n      card: true,\n      'card-element': true,\n      [`variant-${this.variant}`]: true,\n      actionable: (this.actionable && !this.disabled) || isLink,\n      disabled: this.disabled,\n      pressed: this.isPressed,\n      'has-content': this.slotHasContent,\n    };\n\n    if (!this.actionable && !isLink) {\n      return html`<div\n              class=${classMap(cssClasses)}\n              id=\"card\"\n              >\n              ${this.renderCardContent()}\n            </div>`;\n    }\n\n    if (!isLink) {\n      return html`<button\n              class=${classMap(cssClasses)}\n              id=\"card\"\n              tabindex=${this.#tabindex}\n              @click=${this.__dispatchClickWithThrottle}\n              @mousedown=${this.__handlePress}\n              @keydown=${this.__handlePress}\n              @keyup=${this.__handlePress}\n              ?aria-describedby=${this.__getDisabledReasonID()}\n              aria-disabled=${`${this.disabled}`}\n              ?disabled=${this.disabled}\n            >\n              ${this.renderCardContent()}\n            </button>`;\n    }\n    return html`<a\n            class=${classMap(cssClasses)}\n            id=\"card\"\n            tabindex=${this.#tabindex}\n            href=${this.href}\n            target=${this.target}\n              @click=${this.__dispatchClickWithThrottle}\n            @mousedown=${this.__handlePress}\n            @keydown=${this.__handlePress}\n            @keyup=${this.__handlePress}\n            role=\"button\"\n            ?aria-describedby=${this.__getDisabledReasonID()}\n            aria-disabled=${`${this.disabled}`}\n          >\n            ${this.renderCardContent()}\n          </a>`;\n  }\n\n  renderCardContent() {\n    return html`\n    <wc-focus-ring class=\"focus-ring\" .control=${this} .forElement=${this.cardElement}></wc-focus-ring>\n      <wc-elevation class=\"elevation\"></wc-elevation>\n      <div class=\"background\"></div>\n      <div class=\"outline\"></div>\n      <wc-ripple class=\"ripple\"></wc-ripple> \n\n      <div class=\"card-content\">\n\n        <div class=\"slot-container\">\n          <slot @slotchange=${this.__syncSlottedChildrenTabIndex}></slot>\n        </div>\n\n      </div>\n      `;\n  }\n}\n"],"names":["LitElement","nothing","html","classMap","styles","colorStyles","property","state","query"],"mappings":"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"}

package/dist/{chart-bar-DbnXQgvS.js → chart-bar-cn6rrna-.js}

@@ -1,5 +1,5 @@
 import { a as constant, i as interpolateNumber, b as color, d as interpolateRgb, e as interpolateString, o as ordinal, f as initRange } from './transform-DSwFSqzD.js';
-import { a as i } from './IndividualComponent-Dt5xirYG.js';
+import { a as i } from './IndividualComponent-DUINtMGK.js';
 
 function ascending(a, b) {
   return a == null || b == null ? NaN : a < b ? -1 : a > b ? 1 : a >= b ? 0 : NaN;
@@ -1118,4 +1118,4 @@ svg {
 }`;
 
 export { axisLeft as a, band as b, css_248z as c, axisBottom as d, linear as l, max as m };
-//# sourceMappingURL=chart-bar-DbnXQgvS.js.map
+//# sourceMappingURL=chart-bar-cn6rrna-.js.map