@redvars/peacock 3.5.0 → 3.5.1

package/dist/button-group-CEdMwvJJ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-group-CEdMwvJJ.js","sources":["../../src/button/icon-button/icon-button.ts","../../src/button/button-group/button-group.ts"],"sourcesContent":["import { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\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 { BaseButton } from '../BaseButton.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 extends BaseButton {\n  static override styles = [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() 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  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    const isLink = this.__isLink();\n\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.isPressed,\n      skeleton: this.skeleton,\n    };\n\n    if (!isLink) {\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          \n          aria-describedby=${ifDefined(this.softDisabled ? BaseButton.DISABLED_REASON_ID : undefined)}\n          ?aria-disabled=${this.softDisabled}\n\n          ?disabled=${this.disabled}\n          ${spread(this.configAria)}\n        >\n          ${this.renderButtonContent()}\n        </button>\n        ${this.__renderTooltip()}`;\n    }\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        \n        aria-describedby=${ifDefined(this.softDisabled ? BaseButton.DISABLED_REASON_ID : undefined)}\n        ?aria-disabled=${this.softDisabled}\n\n        ${spread(this.configAria)}\n      >\n        ${this.renderButtonContent()}\n      </a>\n      ${this.__renderTooltip()}`;\n  }\n\n  renderButtonContent() {\n    return html`\n      <wc-focus-ring class=\"focus-ring\" for='button'></wc-focus-ring>\n      <wc-elevation class=\"elevation\"></wc-elevation>\n      <div class=\"neo-background\"></div>\n      <div class=\"background\"></div>\n      <div class=\"outline\"></div>\n      <wc-ripple class=\"ripple\"></wc-ripple>\n      <wc-skeleton class=\"skeleton\"></wc-skeleton>\n\n      <div class=\"button-content\">\n        <slot></slot>\n      </div>\n\n      ${this.__renderDisabledReason(this.softDisabled)}\n    `;\n  }\n}\n","import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './button-group.scss';\nimport { Button } from '../button/button.js';\nimport { IconButton } from '../icon-button/icon-button.js';\nimport { BaseButton } from '../BaseButton.js';\n\n/**\n * @label Button Group\n * @tag wc-button-group\n * @rawTag button-group\n *\n * @summary Group a series of buttons together on a single line with the button group, and super-power.\n\n * @example\n * ```html\n * <wc-button-group variant=\"connected\">\n *  <wc-icon-button toggle selected><wc-icon name=\"home\"></wc-icon></wc-icon-button>\n *  <wc-icon-button toggle><wc-icon name=\"alarm\"></wc-icon></wc-icon-button>\n * </wc-button-group>\n * ```\n *\n * @tags controls\n */\n@IndividualComponent\nexport class ButtonGroup extends LitElement {\n  // Lit prefers CSS-in-JS for better performance and scoping.\n  // If you prefer keeping the SCSS file, you'll need a build tool (like Vite or Webpack)\n  // that can import .scss files as lit-css.\n  static styles = [styles];\n\n  static Button = Button;\n\n  static IconButton = IconButton;\n\n  /**\n   * Button size.\n   * Possible values are `\"sm\"`, `\"md\"`, `\"lg\"`. Defaults to `\"md\"`.\n   */\n  @property() size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'sm';\n\n  /**\n   * Layout variant of the button group.\n   * `\"standard\"` shows buttons with a small gap between them.\n   * `\"connected\"` places buttons with a 2px gap; in horizontal orientation outer buttons have fully\n   * rounded outer corners and middle buttons keep standard rounded corners. In vertical orientation\n   * all buttons keep their default corner shape.\n   * Defaults to `\"standard\"`.\n   */\n  @property({ reflect: true }) variant: 'standard' | 'connected' = 'standard';\n\n  /**\n   * Orientation of the button group.\n   * `\"horizontal\"` lays buttons out in a row.\n   * `\"vertical\"` stacks buttons in a column.\n   * Defaults to `\"horizontal\"`.\n   */\n  @property({ reflect: true }) orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  /**\n   * Color applied to all buttons in the group.\n   * Possible values are `\"primary\"`, `\"success\"`, `\"danger\"`, `\"warning\"`, `\"surface\"`, `\"on-surface\"`.\n   */\n  @property({ reflect: true }) color?: 'primary' | 'success' | 'danger' | 'warning' | 'surface' | 'on-surface';\n\n  /**\n   * Visual style applied to all buttons in the group.\n   * Possible values are `\"filled\"`, `\"tonal\"`, `\"outlined\"`.\n   */\n  @property({ attribute: 'button-variant', reflect: true }) buttonVariant?: 'filled' | 'tonal' | 'outlined';\n\n  override updated() {\n    this._syncChildren();\n  }\n\n  private _getSlottedElements(): HTMLElement[] {\n    const slot = this.shadowRoot?.querySelector('slot');\n    return (slot?.assignedElements({ flatten: true }) ?? []) as HTMLElement[];\n  }\n\n  private _syncChildren() {\n    const children = this._getSlottedElements();\n    const isVertical = this.orientation === 'vertical';\n\n    children.forEach((child, index) => {\n      const isFirst = index === 0;\n      const isLast = index === children.length - 1;\n      const isOnly = children.length === 1;\n\n      if (this.color && 'color' in child) {\n        (child as BaseButton).color = this.color;\n      }\n\n      if (this.buttonVariant && 'variant' in child) {\n        (child as BaseButton).variant = this.buttonVariant;\n      }\n\n      if (this.variant === 'connected') {\n        child.style.setProperty('--button-container-shape-variant', 'round');\n\n        if (isOnly) {\n          child.style.setProperty('--button-container-shape', 'var(--shape-corner-full)');\n          child.style.removeProperty('--button-container-shape-start-start');\n          child.style.removeProperty('--button-container-shape-end-start');\n          child.style.removeProperty('--button-container-shape-start-end');\n          child.style.removeProperty('--button-container-shape-end-end');\n        } else if (isFirst) {\n          child.style.removeProperty('--button-container-shape');\n          if (isVertical) {\n            // Top button in vertical group: leave default corner shape\n            child.style.removeProperty('--button-container-shape-start-start');\n            child.style.removeProperty('--button-container-shape-start-end');\n            child.style.removeProperty('--button-container-shape-end-start');\n            child.style.removeProperty('--button-container-shape-end-end');\n          } else {\n            // Left button in horizontal group: round left corners, standard right corners\n            child.style.setProperty('--button-container-shape-start-start', 'calc(var(--button-height) / 2)');\n            child.style.setProperty('--button-container-shape-end-start', 'calc(var(--button-height) / 2)');\n            child.style.setProperty('--button-container-shape-start-end', 'var(--shape-corner-medium)');\n            child.style.setProperty('--button-container-shape-end-end', 'var(--shape-corner-medium)');\n          }\n        } else if (isLast) {\n          child.style.removeProperty('--button-container-shape');\n          if (isVertical) {\n            // Bottom button in vertical group: leave default corner shape\n            child.style.removeProperty('--button-container-shape-start-start');\n            child.style.removeProperty('--button-container-shape-start-end');\n            child.style.removeProperty('--button-container-shape-end-start');\n            child.style.removeProperty('--button-container-shape-end-end');\n          } else {\n            // Right button in horizontal group: standard left corners, round right corners\n            child.style.setProperty('--button-container-shape-start-start', 'var(--shape-corner-medium)');\n            child.style.setProperty('--button-container-shape-end-start', 'var(--shape-corner-medium)');\n            child.style.setProperty('--button-container-shape-start-end', 'calc(var(--button-height) / 2)');\n            child.style.setProperty('--button-container-shape-end-end', 'calc(var(--button-height) / 2)');\n          }\n        } else {\n          // Middle buttons: standard rounded corners on all sides\n          child.style.setProperty('--button-container-shape', 'var(--shape-corner-medium)');\n          child.style.removeProperty('--button-container-shape-start-start');\n          child.style.removeProperty('--button-container-shape-end-start');\n          child.style.removeProperty('--button-container-shape-start-end');\n          child.style.removeProperty('--button-container-shape-end-end');\n        }\n      } else {\n        child.style.removeProperty('--button-container-shape');\n        child.style.removeProperty('--button-container-shape-start-start');\n        child.style.removeProperty('--button-container-shape-end-start');\n        child.style.removeProperty('--button-container-shape-start-end');\n        child.style.removeProperty('--button-container-shape-end-end');\n        child.style.removeProperty('--button-container-shape-variant');\n      }\n    });\n  }\n\n  render() {\n    const cssClasses = {\n      'button-group': true,\n      [`size-${this.size}`]: true,\n      [`variant-${this.variant}`]: true,\n      [`orientation-${this.orientation}`]: true,\n    };\n    return html`\n      <div class=${classMap(cssClasses)}>\n        <slot @slotchange=${() => this._syncChildren()}></slot>\n      </div>\n    `;\n  }\n}\n"],"names":["html","classMap","ifDefined","styles","colorStyles","sizeStyles","property","LitElement"],"mappings":"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"}

package/dist/button-group.js

@@ -1,13 +1,13 @@
 import './IndividualComponent-DUINtMGK.js';
 import './property-1psGvXOq.js';
 import './class-map-YU7g0o3B.js';
-export { B as ButtonGroup } from './button-group-CX9CUUXk.js';
-import './button-DMN1dPAg.js';
+export { B as ButtonGroup } from './button-group-CEdMwvJJ.js';
+import './button-DouvOfEU.js';
 import './directive-ZPhl09Yt.js';
-import './spread-B5cgadZl.js';
-import './throttle-C7ZAPqtu.js';
+import './BaseButton-DuASuVth.js';
 import './state-DwbEjqVk.js';
-import './observe-slot-change-BGJfgg2E.js';
 import './query-QBcUV-L_.js';
 import './dispatch-event-utils-CuEqjlPT.js';
+import './BaseHyperlinkMixin-BNuwbiEf.js';
+import './observe-slot-change-BGJfgg2E.js';
 //# sourceMappingURL=button-group.js.map

package/dist/button.js

@@ -2,10 +2,10 @@ import './IndividualComponent-DUINtMGK.js';
 import './property-1psGvXOq.js';
 import './state-DwbEjqVk.js';
 import './class-map-YU7g0o3B.js';
-export { B as Button } from './button-DMN1dPAg.js';
+import './BaseButton-DuASuVth.js';
+export { B as Button } from './button-DouvOfEU.js';
 import './observe-slot-change-BGJfgg2E.js';
-import './throttle-C7ZAPqtu.js';
-import './spread-B5cgadZl.js';
+import './BaseHyperlinkMixin-BNuwbiEf.js';
 import './directive-ZPhl09Yt.js';
 import './query-QBcUV-L_.js';
 import './dispatch-event-utils-CuEqjlPT.js';

package/dist/card.js

@@ -1,11 +1,11 @@
-import { a as i, _ as __decorate, I as IndividualComponent, i as i$1, c as __classPrivateFieldGet, A, b } from './IndividualComponent-DUINtMGK.js';
+import { a as i, i as i$1, A, c as __classPrivateFieldGet, b, _ as __decorate, I as IndividualComponent } 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 { e as e$1 } from './query-QBcUV-L_.js';
+import { e } 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 { B as BaseHyperlinkMixin, t as throttle } from './BaseHyperlinkMixin-BNuwbiEf.js';
 import './directive-ZPhl09Yt.js';
 
 var css_248z$1 = i`* {
@@ -229,7 +229,7 @@ var css_248z = i`:host {
   --outlined-card-label-text-color: var(--color-on-surface);
 }`;
 
-var _Card_id, _Card_tabindex, _Card_slottedTabIndexMap;
+var _Card_id, _Card_tabindex;
 /**
  * @label Card
  * @tag wc-card
@@ -247,7 +247,7 @@ var _Card_id, _Card_tabindex, _Card_slottedTabIndexMap;
  * </wc-card>
  * ```
  */
-let Card = class Card extends i$1 {
+let Card = class Card extends BaseHyperlinkMixin(i$1) {
     constructor() {
         super(...arguments);
         _Card_id.set(this, crypto.randomUUID());
@@ -258,10 +258,6 @@ let Card = class Card extends i$1 {
         * 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.
          */
@@ -272,7 +268,6 @@ let Card = class Card extends i$1 {
         this.isPressed = false;
         this.slotHasContent = false;
         _Card_tabindex.set(this, 0);
-        _Card_slottedTabIndexMap.set(this, new WeakMap());
         this.__dispatchClickWithThrottle = event => {
             this.__dispatchClick(event);
         };
@@ -311,49 +306,8 @@ let Card = class Card extends i$1 {
         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
@@ -375,6 +329,7 @@ let Card = class Card extends i$1 {
     }
     render() {
         const isLink = this.__isLink();
+        const disableSlotTabbing = this.actionable || isLink;
         const cssClasses = {
             card: true,
             'card-element': true,
@@ -386,15 +341,15 @@ let Card = class Card extends i$1 {
         };
         if (!this.actionable && !isLink) {
             return b `<div
-              class=${e$1(cssClasses)}
+              class=${e(cssClasses)}
               id="card"
               >
-              ${this.renderCardContent()}
+              ${this.renderCardContent(disableSlotTabbing)}
             </div>`;
         }
         if (!isLink) {
             return b `<button
-              class=${e$1(cssClasses)}
+              class=${e(cssClasses)}
               id="card"
               tabindex=${__classPrivateFieldGet(this, _Card_tabindex, "f")}
               @click=${this.__dispatchClickWithThrottle}
@@ -405,11 +360,11 @@ let Card = class Card extends i$1 {
               aria-disabled=${`${this.disabled}`}
               ?disabled=${this.disabled}
             >
-              ${this.renderCardContent()}
+              ${this.renderCardContent(disableSlotTabbing)}
             </button>`;
         }
         return b `<a
-            class=${e$1(cssClasses)}
+            class=${e(cssClasses)}
             id="card"
             tabindex=${__classPrivateFieldGet(this, _Card_tabindex, "f")}
             href=${this.href}
@@ -422,12 +377,12 @@ let Card = class Card extends i$1 {
             ?aria-describedby=${this.__getDisabledReasonID()}
             aria-disabled=${`${this.disabled}`}
           >
-            ${this.renderCardContent()}
+            ${this.renderCardContent(disableSlotTabbing)}
           </a>`;
     }
-    renderCardContent() {
+    renderCardContent(disableSlotTabbing) {
         return b `
-    <wc-focus-ring class="focus-ring" .control=${this} .forElement=${this.cardElement}></wc-focus-ring>
+      <wc-focus-ring class="focus-ring" for='card'></wc-focus-ring>
       <wc-elevation class="elevation"></wc-elevation>
       <div class="background"></div>
       <div class="outline"></div>
@@ -435,8 +390,8 @@ let Card = class Card extends i$1 {
 
       <div class="card-content">
 
-        <div class="slot-container">
-          <slot @slotchange=${this.__syncSlottedChildrenTabIndex}></slot>
+        <div class="slot-container" ?inert=${disableSlotTabbing}>
+          <slot></slot>
         </div>
 
       </div>
@@ -445,7 +400,6 @@ let Card = class Card extends i$1 {
 };
 _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 })
@@ -459,12 +413,6 @@ __decorate([
 __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);
@@ -475,11 +423,8 @@ __decorate([
     r()
 ], Card.prototype, "slotHasContent", void 0);
 __decorate([
-    e('.card')
+    e$1('.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, 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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"}
+{"version":3,"file":"card.js","sources":["../../src/card/card.ts"],"sourcesContent":["import { LitElement, html, nothing } 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';\nimport BaseHyperlinkMixin from '@/__mixins/BaseHyperlinkMixin.js';\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 BaseHyperlinkMixin(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   * 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  #tabindex?: number = 0;\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.requestUpdate();\n      },\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  __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    const disableSlotTabbing = this.actionable || 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(disableSlotTabbing)}\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(disableSlotTabbing)}\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(disableSlotTabbing)}\n          </a>`;\n  }\n\n  renderCardContent(disableSlotTabbing: boolean) {\n    return html`\n      <wc-focus-ring class=\"focus-ring\" for='card'></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\" ?inert=${disableSlotTabbing}>\n          <slot></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.js.map

@@ -1 +1 @@
-{"version":3,"file":"chart-bar.js","sources":["../../src/chart-bar/chart-bar.ts"],"sourcesContent":["import { html, LitElement, PropertyValues } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport * as d3 from 'd3';\nimport styles from './chart-bar.scss';\n\nexport type ChartBarItem = {\n  name: string;\n  value: number;\n  label?: string;\n  color?: string;\n};\n\nconst chartColors: string[] = [];\n['purple', 'blue', 'red', 'green', 'yellow', 'orange'].forEach(colorName => {\n  chartColors.push(`var(--color-${colorName})`);\n});\n\nconst DEFAULT_WIDTH = 480;\nconst DEFAULT_HEIGHT = 320;\nconst BAR_RADIUS = 10;\nconst DURATION = 450;\n\nfunction debounce<T extends (...args: any[]) => void>(fn: T, wait: number): T {\n  let timer: ReturnType<typeof setTimeout>;\n  return ((...args: any[]) => {\n    clearTimeout(timer);\n    timer = setTimeout(() => fn(...args), wait);\n  }) as T;\n}\n\n/**\n * @label Chart Bar\n * @tag wc-chart-bar\n * @rawTag chart-bar\n * @summary A vertical bar chart that follows Material Design 3 color and spacing tokens.\n * @tags charts\n *\n * @example\n * ```html\n * <wc-chart-bar width=\"520\" height=\"320\"></wc-chart-bar>\n * <script>\n *   document.querySelector('wc-chart-bar').data = [\n *     { name: 'apples', label: 'Apples', value: 20 },\n *     { name: 'bananas', label: 'Bananas', value: 35 },\n *     { name: 'cherries', label: 'Cherries', value: 15 },\n *   ];\n * </script>\n * ```\n */\n@IndividualComponent\nexport class ChartBar extends LitElement {\n  static styles = [styles];\n\n  @query('svg')\n  private svgElement?: SVGElement;\n\n  /** Width of the chart in pixels. */\n  @property({ type: Number, reflect: true }) width: number = 0;\n\n  /** Height of the chart in pixels. */\n  @property({ type: Number, reflect: true }) height: number = DEFAULT_HEIGHT;\n\n  /** Margin around the chart drawing area. */\n  @property({ type: Number }) margin: number = 24;\n\n  /** Chart data array. Each item should have name, value, and optional label and color. */\n  @property({ type: Array }) data: ChartBarItem[] = [];\n\n  /** Whether to render value labels above bars. */\n  @property({ type: Boolean, attribute: 'show-values' }) showValues: boolean = true;\n\n  private _initialized = false;\n\n  private _debouncedRenderChart = debounce(() => {\n    this._renderChart(true);\n  }, 200);\n\n  firstUpdated() {\n    this._renderChart(false);\n  }\n\n  updated(changedProperties: PropertyValues) {\n    if (!this._initialized) {\n      this._initialized = true;\n      return;\n    }\n    const watchedProps = ['width', 'height', 'margin', 'data', 'showValues'];\n    const hasChanged = watchedProps.some(prop => changedProperties.has(prop));\n    if (hasChanged) {\n      this._debouncedRenderChart();\n    }\n  }\n\n  private _getPaletteScale() {\n    return d3\n      .scaleOrdinal<string, string>()\n      .domain(this.data.map(d => d.name))\n      .range(chartColors);\n  }\n\n  private _resolveColor(\n    name: string,\n    override: string | undefined,\n    scale: d3.ScaleOrdinal<string, string>,\n  ) {\n    return override || scale(name);\n  }\n\n  private _renderChart(animate: boolean) {\n    if (!this.svgElement) return;\n\n    const width = this.width > 0 ? this.width : DEFAULT_WIDTH;\n    const height = this.height > 0 ? this.height : DEFAULT_HEIGHT;\n    const margin = Math.max(this.margin, 12);\n    const data = this.data ?? [];\n\n    const svg = d3.select(this.svgElement);\n    svg.attr('width', width).attr('height', height);\n\n    const innerWidth = Math.max(width - margin * 2, 0);\n    const innerHeight = Math.max(height - margin * 2, 0);\n    const colorScale = this._getPaletteScale();\n\n    const container = svg.select<SVGGElement>('.chart-container');\n    container.attr('transform', `translate(${margin},${margin})`);\n\n    if (!data.length || innerWidth === 0 || innerHeight === 0) {\n      container.select('.bars').selectAll('*').remove();\n      container.select('.x-axis').selectAll('*').remove();\n      container.select('.y-grid').selectAll('*').remove();\n      container.select('.value-labels').selectAll('*').remove();\n      return;\n    }\n\n    const xScale = d3\n      .scaleBand<string>()\n      .domain(data.map(d => d.name))\n      .range([0, innerWidth])\n      .padding(0.28);\n\n    const maxValue = d3.max(data, d => d.value) ?? 0;\n    const yScale = d3\n      .scaleLinear()\n      .domain([0, maxValue || 1])\n      .nice()\n      .range([innerHeight, 0]);\n\n    const yGrid = container.select<SVGGElement>('.y-grid');\n    yGrid\n      .call(\n        d3\n          .axisLeft(yScale)\n          .ticks(5)\n          .tickSize(-innerWidth)\n          .tickFormat(() => ''),\n      )\n      .selectAll('.tick text')\n      .remove();\n    yGrid.select('.domain').remove();\n    yGrid.selectAll('.tick line').attr('class', 'gridline');\n\n    const xAxis = container.select<SVGGElement>('.x-axis');\n    xAxis\n      .attr('transform', `translate(0,${innerHeight})`)\n      .call(\n        d3\n          .axisBottom(xScale)\n          .tickSizeOuter(0)\n          .tickFormat(name => {\n            const entry = data.find(d => d.name === name);\n            return entry?.label ?? name;\n          }),\n      );\n    xAxis.select('.domain').attr('stroke', 'var(--color-outline-variant)');\n    xAxis.selectAll('.tick line').remove();\n    xAxis\n      .selectAll('.tick text')\n      .attr('class', 'axis-label')\n      .attr('dy', '1.1em');\n\n    const bars = container\n      .select('.bars')\n      .selectAll<SVGRectElement, ChartBarItem>('rect')\n      .data(data, d => d.name)\n      .join(\n        enter =>\n          enter\n            .append('rect')\n            .attr('class', 'bar')\n            .attr('x', d => xScale(d.name) ?? 0)\n            .attr('width', xScale.bandwidth())\n            .attr('y', innerHeight)\n            .attr('height', 0)\n            .attr('rx', BAR_RADIUS)\n            .attr('ry', BAR_RADIUS)\n            .style('fill', d =>\n              this._resolveColor(d.name, d.color, colorScale),\n            ),\n        update => update,\n        exit =>\n          exit\n            .transition()\n            .duration(DURATION)\n            .attr('height', 0)\n            .attr('y', innerHeight)\n            .remove(),\n      );\n\n    bars\n      .attr('x', d => xScale(d.name) ?? 0)\n      .attr('width', xScale.bandwidth())\n      .attr('rx', BAR_RADIUS)\n      .attr('ry', BAR_RADIUS)\n      .style('fill', d => this._resolveColor(d.name, d.color, colorScale));\n\n    if (animate) {\n      bars\n        .transition()\n        .duration(DURATION)\n        .attr('y', d => yScale(d.value))\n        .attr('height', d => innerHeight - yScale(d.value));\n    } else {\n      bars\n        .attr('y', d => yScale(d.value))\n        .attr('height', d => innerHeight - yScale(d.value));\n    }\n\n    const valueLabels = container\n      .select('.value-labels')\n      .selectAll<SVGTextElement, ChartBarItem>('text')\n      .data(this.showValues ? data : [], d => d.name)\n      .join(\n        enter =>\n          enter\n            .append('text')\n            .attr('class', 'value-label')\n            .attr('text-anchor', 'middle')\n            .attr('x', d => (xScale(d.name) ?? 0) + xScale.bandwidth() / 2)\n            .attr('y', innerHeight - 6)\n            .text(d => d.value.toLocaleString()),\n        update => update,\n        exit => exit.remove(),\n      );\n\n    const resolveLabelY = (value: number) => {\n      const offset = yScale(value) - 8;\n      return Math.min(offset, innerHeight - 8);\n    };\n\n    if (animate) {\n      valueLabels\n        .transition()\n        .duration(DURATION)\n        .attr('x', d => (xScale(d.name) ?? 0) + xScale.bandwidth() / 2)\n        .attr('y', d => resolveLabelY(d.value))\n        .text(d => d.value.toLocaleString());\n    } else {\n      valueLabels\n        .attr('x', d => (xScale(d.name) ?? 0) + xScale.bandwidth() / 2)\n        .attr('y', d => resolveLabelY(d.value))\n        .text(d => d.value.toLocaleString());\n    }\n  }\n\n  render() {\n    const paletteScale = this._getPaletteScale();\n    const legendItems = this.data.map(item => ({\n      name: item.label ?? item.name,\n      color: this._resolveColor(item.name, item.color, paletteScale),\n    }));\n\n    return html`\n      <div class=\"chart-frame\">\n        <svg role=\"img\" aria-label=\"Bar chart\">\n          <g class=\"chart-container\">\n            <g class=\"y-grid\"></g>\n            <g class=\"bars\"></g>\n            <g class=\"x-axis\"></g>\n            <g class=\"value-labels\"></g>\n          </g>\n        </svg>\n        ${legendItems.length\n          ? html`<div class=\"legend\" role=\"list\">\n              ${legendItems.map(\n                item => html`<span class=\"legend-item\" role=\"listitem\">\n                  <span\n                    class=\"swatch\"\n                    style=${styleMap({ background: item.color })}\n                  ></span>\n                  <span>${item.name}</span>\n                </span>`,\n              )}\n            </div>`\n          : null}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'wc-chart-bar': ChartBar;\n  }\n}\n"],"names":["LitElement","d3\n            .scaleOrdinal","d3.select","d3\n            .scaleBand","d3.max","d3\n            .scaleLinear","d3\n            .axisLeft","d3\n            .axisBottom","html","styleMap","styles","query","property"],"mappings":"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"}
+{"version":3,"file":"chart-bar.js","sources":["../../src/chart-bar/chart-bar.ts"],"sourcesContent":["import { html, LitElement, PropertyValues } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { select, max, scaleBand, scaleLinear, scaleOrdinal, axisLeft, axisBottom, ScaleOrdinal } from 'd3';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './chart-bar.scss';\n\nexport type ChartBarItem = {\n  name: string;\n  value: number;\n  label?: string;\n  color?: string;\n};\n\nconst chartColors: string[] = [];\n['purple', 'blue', 'red', 'green', 'yellow', 'orange'].forEach(colorName => {\n  chartColors.push(`var(--color-${colorName})`);\n});\n\nconst DEFAULT_WIDTH = 480;\nconst DEFAULT_HEIGHT = 320;\nconst BAR_RADIUS = 10;\nconst DURATION = 450;\n\nfunction debounce<T extends (...args: any[]) => void>(fn: T, wait: number): T {\n  let timer: ReturnType<typeof setTimeout>;\n  return ((...args: any[]) => {\n    clearTimeout(timer);\n    timer = setTimeout(() => fn(...args), wait);\n  }) as T;\n}\n\n/**\n * @label Chart Bar\n * @tag wc-chart-bar\n * @rawTag chart-bar\n * @summary A vertical bar chart that follows Material Design 3 color and spacing tokens.\n * @tags charts\n *\n * @example\n * ```html\n * <wc-chart-bar width=\"520\" height=\"320\"></wc-chart-bar>\n * <script>\n *   document.querySelector('wc-chart-bar').data = [\n *     { name: 'apples', label: 'Apples', value: 20 },\n *     { name: 'bananas', label: 'Bananas', value: 35 },\n *     { name: 'cherries', label: 'Cherries', value: 15 },\n *   ];\n * </script>\n * ```\n */\n@IndividualComponent\nexport class ChartBar extends LitElement {\n  static styles = [styles];\n\n  @query('svg')\n  private svgElement?: SVGElement;\n\n  /** Width of the chart in pixels. */\n  @property({ type: Number, reflect: true }) width: number = 0;\n\n  /** Height of the chart in pixels. */\n  @property({ type: Number, reflect: true }) height: number = DEFAULT_HEIGHT;\n\n  /** Margin around the chart drawing area. */\n  @property({ type: Number }) margin: number = 24;\n\n  /** Chart data array. Each item should have name, value, and optional label and color. */\n  @property({ type: Array }) data: ChartBarItem[] = [];\n\n  /** Whether to render value labels above bars. */\n  @property({ type: Boolean, attribute: 'show-values' }) showValues: boolean = true;\n\n  private _initialized = false;\n\n  private _debouncedRenderChart = debounce(() => {\n    this._renderChart(true);\n  }, 200);\n\n  firstUpdated() {\n    this._renderChart(false);\n  }\n\n  updated(changedProperties: PropertyValues) {\n    if (!this._initialized) {\n      this._initialized = true;\n      return;\n    }\n    const watchedProps = ['width', 'height', 'margin', 'data', 'showValues'];\n    const hasChanged = watchedProps.some(prop => changedProperties.has(prop));\n    if (hasChanged) {\n      this._debouncedRenderChart();\n    }\n  }\n\n  private _getPaletteScale() {\n    return scaleOrdinal<string, string>()\n      .domain(this.data.map(d => d.name))\n      .range(chartColors);\n  }\n\n  private _resolveColor(\n    name: string,\n    override: string | undefined,\n    scale: ScaleOrdinal<string, string>,\n  ) {\n    return override || scale(name);\n  }\n\n  private _renderChart(animate: boolean) {\n    if (!this.svgElement) return;\n\n    const width = this.width > 0 ? this.width : DEFAULT_WIDTH;\n    const height = this.height > 0 ? this.height : DEFAULT_HEIGHT;\n    const margin = Math.max(this.margin, 12);\n    const data = this.data ?? [];\n\n    const svg = select(this.svgElement);\n    svg.attr('width', width).attr('height', height);\n\n    const innerWidth = Math.max(width - margin * 2, 0);\n    const innerHeight = Math.max(height - margin * 2, 0);\n    const colorScale = this._getPaletteScale();\n\n    const container = svg.select<SVGGElement>('.chart-container');\n    container.attr('transform', `translate(${margin},${margin})`);\n\n    if (!data.length || innerWidth === 0 || innerHeight === 0) {\n      container.select('.bars').selectAll('*').remove();\n      container.select('.x-axis').selectAll('*').remove();\n      container.select('.y-grid').selectAll('*').remove();\n      container.select('.value-labels').selectAll('*').remove();\n      return;\n    }\n\n    const xScale = scaleBand<string>()\n      .domain(data.map(d => d.name))\n      .range([0, innerWidth])\n      .padding(0.28);\n\n    const maxValue = max(data, d => d.value) ?? 0;\n    const yScale = scaleLinear()\n      .domain([0, maxValue || 1])\n      .nice()\n      .range([innerHeight, 0]);\n\n    const yGrid = container.select<SVGGElement>('.y-grid');\n    yGrid\n      .call(\n        axisLeft(yScale)\n          .ticks(5)\n          .tickSize(-innerWidth)\n          .tickFormat(() => ''),\n      )\n      .selectAll('.tick text')\n      .remove();\n    yGrid.select('.domain').remove();\n    yGrid.selectAll('.tick line').attr('class', 'gridline');\n\n    const xAxis = container.select<SVGGElement>('.x-axis');\n    xAxis\n      .attr('transform', `translate(0,${innerHeight})`)\n      .call(\n        axisBottom(xScale)\n          .tickSizeOuter(0)\n          .tickFormat(name => {\n            const entry = data.find(d => d.name === name);\n            return entry?.label ?? name;\n          }),\n      );\n    xAxis.select('.domain').attr('stroke', 'var(--color-outline-variant)');\n    xAxis.selectAll('.tick line').remove();\n    xAxis\n      .selectAll('.tick text')\n      .attr('class', 'axis-label')\n      .attr('dy', '1.1em');\n\n    const bars = container\n      .select('.bars')\n      .selectAll<SVGRectElement, ChartBarItem>('rect')\n      .data(data, d => d.name)\n      .join(\n        enter =>\n          enter\n            .append('rect')\n            .attr('class', 'bar')\n            .attr('x', d => xScale(d.name) ?? 0)\n            .attr('width', xScale.bandwidth())\n            .attr('y', innerHeight)\n            .attr('height', 0)\n            .attr('rx', BAR_RADIUS)\n            .attr('ry', BAR_RADIUS)\n            .style('fill', d =>\n              this._resolveColor(d.name, d.color, colorScale),\n            ),\n        update => update,\n        exit =>\n          exit\n            .transition()\n            .duration(DURATION)\n            .attr('height', 0)\n            .attr('y', innerHeight)\n            .remove(),\n      );\n\n    bars\n      .attr('x', d => xScale(d.name) ?? 0)\n      .attr('width', xScale.bandwidth())\n      .attr('rx', BAR_RADIUS)\n      .attr('ry', BAR_RADIUS)\n      .style('fill', d => this._resolveColor(d.name, d.color, colorScale));\n\n    if (animate) {\n      bars\n        .transition()\n        .duration(DURATION)\n        .attr('y', d => yScale(d.value))\n        .attr('height', d => innerHeight - yScale(d.value));\n    } else {\n      bars\n        .attr('y', d => yScale(d.value))\n        .attr('height', d => innerHeight - yScale(d.value));\n    }\n\n    const valueLabels = container\n      .select('.value-labels')\n      .selectAll<SVGTextElement, ChartBarItem>('text')\n      .data(this.showValues ? data : [], d => d.name)\n      .join(\n        enter =>\n          enter\n            .append('text')\n            .attr('class', 'value-label')\n            .attr('text-anchor', 'middle')\n            .attr('x', d => (xScale(d.name) ?? 0) + xScale.bandwidth() / 2)\n            .attr('y', innerHeight - 6)\n            .text(d => d.value.toLocaleString()),\n        update => update,\n        exit => exit.remove(),\n      );\n\n    const resolveLabelY = (value: number) => {\n      const offset = yScale(value) - 8;\n      return Math.min(offset, innerHeight - 8);\n    };\n\n    if (animate) {\n      valueLabels\n        .transition()\n        .duration(DURATION)\n        .attr('x', d => (xScale(d.name) ?? 0) + xScale.bandwidth() / 2)\n        .attr('y', d => resolveLabelY(d.value))\n        .text(d => d.value.toLocaleString());\n    } else {\n      valueLabels\n        .attr('x', d => (xScale(d.name) ?? 0) + xScale.bandwidth() / 2)\n        .attr('y', d => resolveLabelY(d.value))\n        .text(d => d.value.toLocaleString());\n    }\n  }\n\n  render() {\n    const paletteScale = this._getPaletteScale();\n    const legendItems = this.data.map(item => ({\n      name: item.label ?? item.name,\n      color: this._resolveColor(item.name, item.color, paletteScale),\n    }));\n\n    return html`\n      <div class=\"chart-frame\">\n        <svg role=\"img\" aria-label=\"Bar chart\">\n          <g class=\"chart-container\">\n            <g class=\"y-grid\"></g>\n            <g class=\"bars\"></g>\n            <g class=\"x-axis\"></g>\n            <g class=\"value-labels\"></g>\n          </g>\n        </svg>\n        ${legendItems.length\n          ? html`<div class=\"legend\" role=\"list\">\n              ${legendItems.map(\n                item => html`<span class=\"legend-item\" role=\"listitem\">\n                  <span\n                    class=\"swatch\"\n                    style=${styleMap({ background: item.color })}\n                  ></span>\n                  <span>${item.name}</span>\n                </span>`,\n              )}\n            </div>`\n          : null}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'wc-chart-bar': ChartBar;\n  }\n}\n"],"names":["LitElement","scaleOrdinal","scaleBand","scaleLinear","html","styleMap","styles","query","property"],"mappings":"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"}

package/dist/chart-doughnut.js

@@ -127,10 +127,10 @@ let ChartDoughnut = class ChartDoughnut extends i$1 {
         return this.data.reduce((total, d) => total + d.value, 0);
     }
     _getPieData() {
-        const pie$1 = pie()
+        const pieGenerator = pie()
             .sort(null)
             .value(d => d.value);
-        return pie$1(this.data);
+        return pieGenerator(this.data);
     }
     _getColorScale() {
         return ordinal()

package/dist/chart-doughnut.js.map

@@ -1 +1 @@
-{"version":3,"file":"chart-doughnut.js","sources":["../../src/chart-doughnut/chart-doughnut.ts"],"sourcesContent":["import { html, LitElement, PropertyValues } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport * as d3 from 'd3';\nimport styles from './chart-donut.scss';\n\nexport type ChartDoughnutColor = {\n  color: string;\n};\n\nexport type ChartDoughnutItem = {\n  name: string;\n  value: number;\n  label?: string;\n  color?: string;\n};\n\nconst chartColors: ChartDoughnutColor[] = [];\n['purple', 'blue', 'red', 'green', 'yellow', 'orange'].forEach(colorName => {\n  chartColors.push({\n    color: `var(--color-${colorName})`,\n  });\n});\n\n/** SVGPathElement augmented with the last rendered arc datum for smooth tween interpolation. */\ninterface ArcPathElement extends SVGPathElement {\n  _prevDatum?: d3.PieArcDatum<ChartDoughnutItem>;\n}\n\nfunction debounce<T extends (...args: any[]) => void>(fn: T, wait: number): T {\n  let timer: ReturnType<typeof setTimeout>;\n  return ((...args: any[]) => {\n    clearTimeout(timer);\n    timer = setTimeout(() => fn(...args), wait);\n  }) as T;\n}\n\n/**\n * @label Chart Doughnut\n * @tag wc-chart-doughnut\n * @rawTag chart-doughnut\n * @summary A doughnut chart is a circular chart with a blank center. The area in the center can be used to display information.\n * @tags charts\n *\n * @example\n * ```html\n * <wc-chart-doughnut width=\"400\" label=\"Total\"></wc-chart-doughnut>\n * <script>\n *   document.querySelector('wc-chart-doughnut').data = [\n *     { name: 'A', value: 30, label: 'Category A' },\n *     { name: 'B', value: 50, label: 'Category B' },\n *     { name: 'C', value: 20, label: 'Category C' },\n *   ];\n * </script>\n * ```\n */\n@IndividualComponent\nexport class ChartDoughnut extends LitElement {\n  static styles = [styles];\n\n  @query('svg')\n  private svgElement?: SVGElement;\n\n  /** Width (and height) of the chart in pixels. */\n  @property({ type: Number, reflect: true }) width: number = 0;\n\n  /** Margin around the chart. */\n  @property({ type: Number, reflect: true }) margin: number = 10;\n\n  /** Whether to show labels outside the chart. */\n  @property({ type: Boolean, reflect: true, attribute: 'show-labels' })\n  showLabels: boolean = true;\n\n  /** Chart data array. Each item should have name, value, and optional label and color. */\n  @property({ type: Array }) data: ChartDoughnutItem[] = [];\n\n  /** Label displayed in the center of the doughnut. */\n  @property({ type: String }) label?: string;\n\n  private _initialized = false;\n\n  private _debouncedRenderChart = debounce(() => {\n    this._renderChart(true);\n  }, 300);\n\n  firstUpdated() {\n    this._renderChart(false);\n  }\n\n  updated(changedProperties: PropertyValues) {\n    if (!this._initialized) {\n      this._initialized = true;\n      return;\n    }\n    const watchedProps = ['width', 'margin', 'showLabels', 'data'];\n    const hasChanged = watchedProps.some(prop => changedProperties.has(prop));\n    if (hasChanged) {\n      this._debouncedRenderChart();\n    }\n  }\n\n  private _getRadius(): number {\n    return this.width / 2 - this.margin - 100;\n  }\n\n  private _getTotal(): number {\n    return this.data.reduce((total, d) => total + d.value, 0);\n  }\n\n  private _getPieData() {\n    const pie = d3\n      .pie<ChartDoughnutItem>()\n      .sort(null)\n      .value(d => d.value);\n    return pie(this.data);\n  }\n\n  private _getColorScale() {\n    return d3\n      .scaleOrdinal<string, ChartDoughnutColor>()\n      .domain(this.data.map(d => d.name))\n      .range(chartColors);\n  }\n\n  private _renderChart(animate: boolean) {\n    if (!this.svgElement) return;\n\n    const DURATION = 500;\n    const radius = this._getRadius();\n    const pieData = this._getPieData();\n    const colorScale = this._getColorScale();\n    const total = this._getTotal();\n\n    const svg = d3.select(this.svgElement);\n\n    const doughnutArc = d3\n      .arc<d3.PieArcDatum<ChartDoughnutItem>>()\n      .innerRadius(radius * 0.72)\n      .outerRadius(radius);\n\n    const labelsArc = d3\n      .arc<d3.PieArcDatum<ChartDoughnutItem>>()\n      .innerRadius(radius + 10)\n      .outerRadius(radius + 10);\n\n    // Update SVG dimensions and center transform\n    svg.attr('width', this.width).attr('height', this.width);\n    svg\n      .select('.chart-container')\n      .attr('transform', `translate(${this.width / 2},${this.width / 2})`);\n\n    // Arc paths — keyed by name so D3 matches elements across updates\n    const $paths = svg\n      .select('.arc-container')\n      .selectAll<SVGPathElement, d3.PieArcDatum<ChartDoughnutItem>>('.arc')\n      .data(pieData, d => d.data.name)\n      .join('path')\n      .attr('class', 'arc')\n      .style('fill', d => d.data.color || colorScale(d.data.name).color);\n\n    if (animate) {\n      $paths\n        .transition()\n        .duration(DURATION)\n        .ease(d3.easeCubicInOut)\n        .attrTween('d', function (this: SVGPathElement, d) {\n          const self = this as ArcPathElement;\n          // Interpolate from the last rendered angles to the new ones.\n          // New (entering) arcs start collapsed at their startAngle.\n          const prev: { startAngle: number; endAngle: number } =\n            self._prevDatum ?? {\n              startAngle: d.startAngle,\n              endAngle: d.startAngle,\n            };\n          self._prevDatum = d;\n          const iStart = d3.interpolateNumber(prev.startAngle, d.startAngle);\n          const iEnd = d3.interpolateNumber(prev.endAngle, d.endAngle);\n          return (t: number) =>\n            doughnutArc({ ...d, startAngle: iStart(t), endAngle: iEnd(t) }) ??\n            '';\n        });\n    } else {\n      // Initial render: draw immediately and seed previous-datum for later tweens\n      $paths\n        .each(function (this: SVGPathElement, d) {\n          (this as ArcPathElement)._prevDatum = d;\n        })\n        .attr('d', d => doughnutArc(d) ?? '');\n    }\n\n    // Animate the central total counter\n    const $title = svg.select('.title');\n    if (animate) {\n      $title\n        .transition()\n        .duration(DURATION)\n        .ease(d3.easeCubicInOut)\n        .tween('text', function (this: d3.BaseType) {\n          const sel = d3.select(this as SVGTextElement);\n          const start = parseFloat(sel.text()) || 0;\n          const interp = d3.interpolateNumber(start, total);\n          return function (t: number) {\n            sel.text(Math.round(interp(t)));\n          };\n        });\n    } else {\n      $title.text(total);\n    }\n\n    // Label polylines and text\n    const $chartContainer = svg.select('.chart-container');\n\n    if (this.showLabels) {\n      const pointsFn = (d: d3.PieArcDatum<ChartDoughnutItem>) => {\n        const posA = doughnutArc.centroid(d);\n        const posB = labelsArc.centroid(d);\n        const posC = posB.slice() as [number, number];\n        const midAngle = d.startAngle + (d.endAngle - d.startAngle) / 2;\n        posC[0] = radius * (midAngle < Math.PI ? 1 : -1);\n        return [posA, posB, posC].map(p => p.join(',')).join(' ');\n      };\n\n      const transformFn = (d: d3.PieArcDatum<ChartDoughnutItem>) => {\n        const pos = labelsArc.centroid(d);\n        const midAngle = d.startAngle + (d.endAngle - d.startAngle) / 2;\n        pos[0] = radius * (midAngle < Math.PI ? 1 : -1);\n        return `translate(${pos})`;\n      };\n\n      const anchorFn = (d: d3.PieArcDatum<ChartDoughnutItem>) => {\n        const midAngle = d.startAngle + (d.endAngle - d.startAngle) / 2;\n        return midAngle < Math.PI ? 'start' : 'end';\n      };\n\n      const $polylines = $chartContainer\n        .selectAll<SVGPolylineElement, d3.PieArcDatum<ChartDoughnutItem>>(\n          '.item-polyline',\n        )\n        .data(pieData, d => d.data.name)\n        .join('polyline')\n        .attr('class', 'item-polyline');\n\n      const $labels = $chartContainer\n        .selectAll<SVGTextElement, d3.PieArcDatum<ChartDoughnutItem>>('.item-label')\n        .data(pieData, d => d.data.name)\n        .join('text')\n        .attr('class', 'item-label')\n        .text(d => d.data.label ?? '');\n\n      if (animate) {\n        $polylines\n          .transition()\n          .duration(DURATION)\n          .ease(d3.easeCubicInOut)\n          .attr('points', pointsFn);\n        $labels\n          .transition()\n          .duration(DURATION)\n          .ease(d3.easeCubicInOut)\n          .attr('transform', transformFn)\n          .style('text-anchor', anchorFn);\n      } else {\n        $polylines.attr('points', pointsFn);\n        $labels.attr('transform', transformFn).style('text-anchor', anchorFn);\n      }\n    } else {\n      $chartContainer.selectAll('.item-polyline').remove();\n      $chartContainer.selectAll('.item-label').remove();\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"chart\">\n        <svg>\n          <g class=\"chart-container\">\n            <g class=\"arc-container\"></g>\n            <text class=\"title\" text-anchor=\"middle\"></text>\n            <text class=\"label\" text-anchor=\"middle\" y=\"16\">\n              ${this.label}\n            </text>\n          </g>\n        </svg>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","pie","d3\n            .pie","d3\n            .scaleOrdinal","d3.select","d3\n            .arc","d3.easeCubicInOut","d3.interpolateNumber","html","styles","query","property"],"mappings":"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"}
+{"version":3,"file":"chart-doughnut.js","sources":["../../src/chart-doughnut/chart-doughnut.ts"],"sourcesContent":["import { html, LitElement, PropertyValues } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { select, arc, pie, scaleOrdinal, easeCubicInOut, interpolateNumber, PieArcDatum, BaseType } from 'd3';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './chart-donut.scss';\n\nexport type ChartDoughnutColor = {\n  color: string;\n};\n\nexport type ChartDoughnutItem = {\n  name: string;\n  value: number;\n  label?: string;\n  color?: string;\n};\n\nconst chartColors: ChartDoughnutColor[] = [];\n['purple', 'blue', 'red', 'green', 'yellow', 'orange'].forEach(colorName => {\n  chartColors.push({\n    color: `var(--color-${colorName})`,\n  });\n});\n\n/** SVGPathElement augmented with the last rendered arc datum for smooth tween interpolation. */\ninterface ArcPathElement extends SVGPathElement {\n  _prevDatum?: PieArcDatum<ChartDoughnutItem>;\n}\n\nfunction debounce<T extends (...args: any[]) => void>(fn: T, wait: number): T {\n  let timer: ReturnType<typeof setTimeout>;\n  return ((...args: any[]) => {\n    clearTimeout(timer);\n    timer = setTimeout(() => fn(...args), wait);\n  }) as T;\n}\n\n/**\n * @label Chart Doughnut\n * @tag wc-chart-doughnut\n * @rawTag chart-doughnut\n * @summary A doughnut chart is a circular chart with a blank center. The area in the center can be used to display information.\n * @tags charts\n *\n * @example\n * ```html\n * <wc-chart-doughnut width=\"400\" label=\"Total\"></wc-chart-doughnut>\n * <script>\n *   document.querySelector('wc-chart-doughnut').data = [\n *     { name: 'A', value: 30, label: 'Category A' },\n *     { name: 'B', value: 50, label: 'Category B' },\n *     { name: 'C', value: 20, label: 'Category C' },\n *   ];\n * </script>\n * ```\n */\n@IndividualComponent\nexport class ChartDoughnut extends LitElement {\n  static styles = [styles];\n\n  @query('svg')\n  private svgElement?: SVGElement;\n\n  /** Width (and height) of the chart in pixels. */\n  @property({ type: Number, reflect: true }) width: number = 0;\n\n  /** Margin around the chart. */\n  @property({ type: Number, reflect: true }) margin: number = 10;\n\n  /** Whether to show labels outside the chart. */\n  @property({ type: Boolean, reflect: true, attribute: 'show-labels' })\n  showLabels: boolean = true;\n\n  /** Chart data array. Each item should have name, value, and optional label and color. */\n  @property({ type: Array }) data: ChartDoughnutItem[] = [];\n\n  /** Label displayed in the center of the doughnut. */\n  @property({ type: String }) label?: string;\n\n  private _initialized = false;\n\n  private _debouncedRenderChart = debounce(() => {\n    this._renderChart(true);\n  }, 300);\n\n  firstUpdated() {\n    this._renderChart(false);\n  }\n\n  updated(changedProperties: PropertyValues) {\n    if (!this._initialized) {\n      this._initialized = true;\n      return;\n    }\n    const watchedProps = ['width', 'margin', 'showLabels', 'data'];\n    const hasChanged = watchedProps.some(prop => changedProperties.has(prop));\n    if (hasChanged) {\n      this._debouncedRenderChart();\n    }\n  }\n\n  private _getRadius(): number {\n    return this.width / 2 - this.margin - 100;\n  }\n\n  private _getTotal(): number {\n    return this.data.reduce((total, d) => total + d.value, 0);\n  }\n\n  private _getPieData() {\n    const pieGenerator = pie<ChartDoughnutItem>()\n      .sort(null)\n      .value(d => d.value);\n    return pieGenerator(this.data);\n  }\n\n  private _getColorScale() {\n    return scaleOrdinal<string, ChartDoughnutColor>()\n      .domain(this.data.map(d => d.name))\n      .range(chartColors);\n  }\n\n  private _renderChart(animate: boolean) {\n    if (!this.svgElement) return;\n\n    const DURATION = 500;\n    const radius = this._getRadius();\n    const pieData = this._getPieData();\n    const colorScale = this._getColorScale();\n    const total = this._getTotal();\n\n    const svg = select(this.svgElement);\n\n    const doughnutArc = arc<PieArcDatum<ChartDoughnutItem>>()\n      .innerRadius(radius * 0.72)\n      .outerRadius(radius);\n\n    const labelsArc = arc<PieArcDatum<ChartDoughnutItem>>()\n      .innerRadius(radius + 10)\n      .outerRadius(radius + 10);\n\n    // Update SVG dimensions and center transform\n    svg.attr('width', this.width).attr('height', this.width);\n    svg\n      .select('.chart-container')\n      .attr('transform', `translate(${this.width / 2},${this.width / 2})`);\n\n    // Arc paths — keyed by name so D3 matches elements across updates\n    const $paths = svg\n      .select('.arc-container')\n      .selectAll<SVGPathElement, PieArcDatum<ChartDoughnutItem>>('.arc')\n      .data(pieData, d => d.data.name)\n      .join('path')\n      .attr('class', 'arc')\n      .style('fill', d => d.data.color || colorScale(d.data.name).color);\n\n    if (animate) {\n      $paths\n        .transition()\n        .duration(DURATION)\n        .ease(easeCubicInOut)\n        .attrTween('d', function (this: SVGPathElement, d) {\n          const self = this as ArcPathElement;\n          // Interpolate from the last rendered angles to the new ones.\n          // New (entering) arcs start collapsed at their startAngle.\n          const prev: { startAngle: number; endAngle: number } =\n            self._prevDatum ?? {\n              startAngle: d.startAngle,\n              endAngle: d.startAngle,\n            };\n          self._prevDatum = d;\n          const iStart = interpolateNumber(prev.startAngle, d.startAngle);\n          const iEnd = interpolateNumber(prev.endAngle, d.endAngle);\n          return (t: number) =>\n            doughnutArc({ ...d, startAngle: iStart(t), endAngle: iEnd(t) }) ??\n            '';\n        });\n    } else {\n      // Initial render: draw immediately and seed previous-datum for later tweens\n      $paths\n        .each(function (this: SVGPathElement, d) {\n          (this as ArcPathElement)._prevDatum = d;\n        })\n        .attr('d', d => doughnutArc(d) ?? '');\n    }\n\n    // Animate the central total counter\n    const $title = svg.select('.title');\n    if (animate) {\n      $title\n        .transition()\n        .duration(DURATION)\n        .ease(easeCubicInOut)\n        .tween('text', function (this: BaseType) {\n          const sel = select(this as SVGTextElement);\n          const start = parseFloat(sel.text()) || 0;\n          const interp = interpolateNumber(start, total);\n          return function (t: number) {\n            sel.text(Math.round(interp(t)));\n          };\n        });\n    } else {\n      $title.text(total);\n    }\n\n    // Label polylines and text\n    const $chartContainer = svg.select('.chart-container');\n\n    if (this.showLabels) {\n      const pointsFn = (d: PieArcDatum<ChartDoughnutItem>) => {\n        const posA = doughnutArc.centroid(d);\n        const posB = labelsArc.centroid(d);\n        const posC = posB.slice() as [number, number];\n        const midAngle = d.startAngle + (d.endAngle - d.startAngle) / 2;\n        posC[0] = radius * (midAngle < Math.PI ? 1 : -1);\n        return [posA, posB, posC].map(p => p.join(',')).join(' ');\n      };\n\n      const transformFn = (d: PieArcDatum<ChartDoughnutItem>) => {\n        const pos = labelsArc.centroid(d);\n        const midAngle = d.startAngle + (d.endAngle - d.startAngle) / 2;\n        pos[0] = radius * (midAngle < Math.PI ? 1 : -1);\n        return `translate(${pos})`;\n      };\n\n      const anchorFn = (d: PieArcDatum<ChartDoughnutItem>) => {\n        const midAngle = d.startAngle + (d.endAngle - d.startAngle) / 2;\n        return midAngle < Math.PI ? 'start' : 'end';\n      };\n\n      const $polylines = $chartContainer\n        .selectAll<SVGPolylineElement, PieArcDatum<ChartDoughnutItem>>(\n          '.item-polyline',\n        )\n        .data(pieData, d => d.data.name)\n        .join('polyline')\n        .attr('class', 'item-polyline');\n\n      const $labels = $chartContainer\n        .selectAll<SVGTextElement, PieArcDatum<ChartDoughnutItem>>('.item-label')\n        .data(pieData, d => d.data.name)\n        .join('text')\n        .attr('class', 'item-label')\n        .text(d => d.data.label ?? '');\n\n      if (animate) {\n        $polylines\n          .transition()\n          .duration(DURATION)\n          .ease(easeCubicInOut)\n          .attr('points', pointsFn);\n        $labels\n          .transition()\n          .duration(DURATION)\n          .ease(easeCubicInOut)\n          .attr('transform', transformFn)\n          .style('text-anchor', anchorFn);\n      } else {\n        $polylines.attr('points', pointsFn);\n        $labels.attr('transform', transformFn).style('text-anchor', anchorFn);\n      }\n    } else {\n      $chartContainer.selectAll('.item-polyline').remove();\n      $chartContainer.selectAll('.item-label').remove();\n    }\n  }\n\n  render() {\n    return html`\n      <div class=\"chart\">\n        <svg>\n          <g class=\"chart-container\">\n            <g class=\"arc-container\"></g>\n            <text class=\"title\" text-anchor=\"middle\"></text>\n            <text class=\"label\" text-anchor=\"middle\" y=\"16\">\n              ${this.label}\n            </text>\n          </g>\n        </svg>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","scaleOrdinal","easeCubicInOut","html","styles","query","property"],"mappings":"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"}

package/dist/chart-pie.js

@@ -107,10 +107,10 @@ let ChartPie = class ChartPie extends i$1 {
         return this.width / 2 - this.margin - 100;
     }
     _getPieData() {
-        const pie$1 = pie()
+        const pieGenerator = pie()
             .sort(null)
             .value(d => d.value);
-        return pie$1(this.data);
+        return pieGenerator(this.data);
     }
     _getColorScale() {
         return ordinal()