@redvars/peacock 3.4.0 → 3.5.1

package/dist/{button-group-DsXquZQn.js → button-group-CEdMwvJJ.js}

@@ -1,8 +1,9 @@
-import { a as i, _ as __decorate, c as __classPrivateFieldGet, b, I as IndividualComponent, i as i$1 } from './IndividualComponent-DUINtMGK.js';
+import { a as i, _ as __decorate, b, I as IndividualComponent, i as i$1 } from './IndividualComponent-DUINtMGK.js';
 import { n } from './property-1psGvXOq.js';
-import { e } from './class-map-3TAnCMAX.js';
-import { c as css_248z$2, a as css_248z$3, b as BaseButton, s as spread, B as Button } from './button-COYCtuA8.js';
-import { t as throttle } from './dispatch-event-utils-B4odODQf.js';
+import { e } from './class-map-YU7g0o3B.js';
+import { c as css_248z$2, a as css_248z$3, B as Button } from './button-DouvOfEU.js';
+import { B as BaseButton, o, s as spread } from './BaseButton-DuASuVth.js';
+import { t as throttle } from './BaseHyperlinkMixin-BNuwbiEf.js';
 
 var css_248z$1 = i`* {
   box-sizing: border-box;
@@ -113,7 +114,6 @@ var css_248z = i`.button {
   --_button-icon-size: 2.5rem;
 }`;
 
-var _IconButton_id, _IconButton_tabindex;
 /**
  * @label Icon Button
  * @tag wc-icon-button
@@ -153,16 +153,33 @@ var _IconButton_id, _IconButton_tabindex;
  *
  * @example
  * ```html
- * <wc-icon-button name="home"></wc-icon-button>
+ * <wc-icon-button><wc-icon name="home"></wc-icon></wc-icon-button>
  * ```
  * @tags display
  */
 class IconButton extends BaseButton {
     constructor() {
         super(...arguments);
-        _IconButton_id.set(this, crypto.randomUUID());
-        _IconButton_tabindex.set(this, 0);
-        this.provider = 'material-symbols';
+        /**
+         * Button size.
+         * Possible values are `"xs"`, `"sm"`, `"md"`, `"lg"`, `"xl"`. Defaults to `"sm"`.
+         */
+        this.size = 'sm';
+        /**
+         * The visual style of the button.
+         *
+         *  Possible variant values:
+         * `"filled"` is a filled button.
+         * `"outlined"` is an outlined button.
+         * `"text"` is a transparent button.
+         * `"tonal"` is a light color button.
+         * `"elevated"` is elevated button
+         */
+        this.variant = 'filled';
+        /**
+         * Defines the primary color of the button. This can be set to predefined color names to apply specific color themes.
+         */
+        this.color = 'primary';
     }
     focus() {
         this.buttonElement?.focus();
@@ -170,20 +187,28 @@ class IconButton extends BaseButton {
     blur() {
         this.buttonElement?.blur();
     }
-    connectedCallback() {
-        super.connectedCallback();
-        this.addEventListener('click', this.__dispatchClickWithThrottle);
-        window.addEventListener('mouseup', this.__handlePress);
-    }
-    disconnectedCallback() {
-        window.removeEventListener('mouseup', this.__handlePress);
-        this.removeEventListener('click', this.__dispatchClickWithThrottle);
-        super.disconnectedCallback();
-    }
     firstUpdated() {
         this.__dispatchClickWithThrottle = throttle(this.__dispatchClick, this.throttleDelay);
         this.__convertTypeToVariantAndColor();
     }
+    __convertTypeToVariantAndColor() {
+        if (this.type === 'primary') {
+            this.color = 'primary';
+            this.variant = 'filled';
+        }
+        else if (this.type === 'secondary') {
+            this.color = 'surface';
+            this.variant = 'filled';
+        }
+        else if (this.type === 'tertiary') {
+            this.color = 'primary';
+            this.variant = 'text';
+        }
+        else if (this.type === 'danger') {
+            this.color = 'danger';
+            this.variant = 'filled';
+        }
+    }
     render() {
         const isLink = this.__isLink();
         const cssClasses = {
@@ -200,17 +225,15 @@ class IconButton extends BaseButton {
             return b `<button
           class=${e(cssClasses)}
           id="button"
-          tabindex=${__classPrivateFieldGet(this, _IconButton_tabindex, "f")}
           type=${this.htmlType}
           @click=${this.__dispatchClickWithThrottle}
           @mousedown=${this.__handlePress}
           @keydown=${this.__handlePress}
           @keyup=${this.__handlePress}
-          ?aria-describedby=${(this.disabled || this.softDisabled) &&
-                this.disabledReason
-                ? `disabled-reason-${__classPrivateFieldGet(this, _IconButton_id, "f")}`
-                : null}
-          aria-disabled=${`${this.disabled || this.softDisabled}`}
+          
+          aria-describedby=${o(this.softDisabled ? BaseButton.DISABLED_REASON_ID : undefined)}
+          ?aria-disabled=${this.softDisabled}
+
           ?disabled=${this.disabled}
           ${spread(this.configAria)}
         >
@@ -221,18 +244,18 @@ class IconButton extends BaseButton {
         return b `<a
         class=${e(cssClasses)}
         id="button"
-        tabindex=${__classPrivateFieldGet(this, _IconButton_tabindex, "f")}
         href=${this.href}
         target=${this.target}
-        @click=${this.__dispatchClickWithThrottle}
+        tabindex=${this.disabled ? '-1' : '0'}
+        @click=${this.__dispatchClick}
         @mousedown=${this.__handlePress}
         @keydown=${this.__handlePress}
         @keyup=${this.__handlePress}
         role="button"
-        aria-describedby=${this.disabled && this.disabledReason
-            ? `disabled-reason-${__classPrivateFieldGet(this, _IconButton_id, "f")}`
-            : null}
-        aria-disabled=${`${this.disabled}`}
+        
+        aria-describedby=${o(this.softDisabled ? BaseButton.DISABLED_REASON_ID : undefined)}
+        ?aria-disabled=${this.softDisabled}
+
         ${spread(this.configAria)}
       >
         ${this.renderButtonContent()}
@@ -241,7 +264,7 @@ class IconButton extends BaseButton {
     }
     renderButtonContent() {
         return b `
-      <wc-focus-ring class="focus-ring" .control=${this} .forElement=${this.buttonElement}></wc-focus-ring>
+      <wc-focus-ring class="focus-ring" for='button'></wc-focus-ring>
       <wc-elevation class="elevation"></wc-elevation>
       <div class="neo-background"></div>
       <div class="background"></div>
@@ -250,28 +273,29 @@ class IconButton extends BaseButton {
       <wc-skeleton class="skeleton"></wc-skeleton>
 
       <div class="button-content">
-        <wc-icon
-          name=${this.name}
-          src=${this.src}
-          provider=${this.provider}
-        ></wc-icon>
+        <slot></slot>
       </div>
 
-      ${this.__renderDisabledReason()}
+      ${this.__renderDisabledReason(this.softDisabled)}
     `;
     }
 }
-_IconButton_id = new WeakMap(), _IconButton_tabindex = new WeakMap();
 IconButton.styles = [css_248z$2, css_248z$3, css_248z];
 __decorate([
-    n({ type: String, reflect: true })
-], IconButton.prototype, "name", void 0);
-__decorate([
-    n({ type: String, reflect: true })
-], IconButton.prototype, "src", void 0);
+    n({ reflect: true })
+], IconButton.prototype, "size", void 0);
 __decorate([
     n({ type: String })
-], IconButton.prototype, "provider", void 0);
+], IconButton.prototype, "type", void 0);
+__decorate([
+    n()
+], IconButton.prototype, "variant", void 0);
+__decorate([
+    n({ reflect: true })
+], IconButton.prototype, "color", void 0);
+__decorate([
+    n({ reflect: true })
+], IconButton.prototype, "configAria", void 0);
 
 /**
  * @label Button Group
@@ -283,8 +307,8 @@ __decorate([
  * @example
  * ```html
  * <wc-button-group variant="connected">
- *  <wc-icon-button name="home" toggle selected></wc-icon-button>
- *  <wc-icon-button name="alarm" toggle></wc-icon-button>
+ *  <wc-icon-button toggle selected><wc-icon name="home"></wc-icon></wc-icon-button>
+ *  <wc-icon-button toggle><wc-icon name="alarm"></wc-icon></wc-icon-button>
  * </wc-button-group>
  * ```
  *
@@ -437,4 +461,4 @@ ButtonGroup = __decorate([
 ], ButtonGroup);
 
 export { ButtonGroup as B, IconButton as I };
-//# sourceMappingURL=button-group-DsXquZQn.js.map
+//# sourceMappingURL=button-group-CEdMwvJJ.js.map

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,10 +1,13 @@
 import './IndividualComponent-DUINtMGK.js';
 import './property-1psGvXOq.js';
-import './class-map-3TAnCMAX.js';
-export { B as ButtonGroup } from './button-group-DsXquZQn.js';
-import './button-COYCtuA8.js';
-import './directive-Cuw6h7YA.js';
-import './dispatch-event-utils-B4odODQf.js';
+import './class-map-YU7g0o3B.js';
+export { B as ButtonGroup } from './button-group-CEdMwvJJ.js';
+import './button-DouvOfEU.js';
+import './directive-ZPhl09Yt.js';
+import './BaseButton-DuASuVth.js';
 import './state-DwbEjqVk.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-group.js.map

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

package/dist/button.js

@@ -1,9 +1,12 @@
 import './IndividualComponent-DUINtMGK.js';
 import './property-1psGvXOq.js';
 import './state-DwbEjqVk.js';
-import './class-map-3TAnCMAX.js';
-export { B as Button } from './button-COYCtuA8.js';
-import './dispatch-event-utils-B4odODQf.js';
-import './directive-Cuw6h7YA.js';
+import './class-map-YU7g0o3B.js';
+import './BaseButton-DuASuVth.js';
+export { B as Button } from './button-DouvOfEU.js';
+import './observe-slot-change-BGJfgg2E.js';
+import './BaseHyperlinkMixin-BNuwbiEf.js';
+import './directive-ZPhl09Yt.js';
 import './query-QBcUV-L_.js';
+import './dispatch-event-utils-CuEqjlPT.js';
 //# sourceMappingURL=button.js.map

package/dist/button.js.map

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

package/dist/card.js

@@ -1,10 +1,12 @@
-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-3TAnCMAX.js';
-import { i as isActivationClick, d as dispatchActivationClick, t as throttle, o as observerSlotChangesWithCallback } from './dispatch-event-utils-B4odODQf.js';
-import './directive-Cuw6h7YA.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 { B as BaseHyperlinkMixin, t as throttle } from './BaseHyperlinkMixin-BNuwbiEf.js';
+import './directive-ZPhl09Yt.js';
 
 var css_248z$1 = i`* {
   box-sizing: border-box;
@@ -227,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
@@ -245,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());
@@ -256,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.
          */
@@ -270,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);
         };
@@ -309,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
@@ -373,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,
@@ -382,10 +339,18 @@ let Card = class Card extends i$1 {
             pressed: this.isPressed,
             'has-content': this.slotHasContent,
         };
+        if (!this.actionable && !isLink) {
+            return b `<div
+              class=${e(cssClasses)}
+              id="card"
+              >
+              ${this.renderCardContent(disableSlotTabbing)}
+            </div>`;
+        }
         if (!isLink) {
             return b `<button
-              class=${e$1(cssClasses)}
-              id="button"
+              class=${e(cssClasses)}
+              id="card"
               tabindex=${__classPrivateFieldGet(this, _Card_tabindex, "f")}
               @click=${this.__dispatchClickWithThrottle}
               @mousedown=${this.__handlePress}
@@ -395,12 +360,12 @@ 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)}
-            id="button"
+            class=${e(cssClasses)}
+            id="card"
             tabindex=${__classPrivateFieldGet(this, _Card_tabindex, "f")}
             href=${this.href}
             target=${this.target}
@@ -412,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>
@@ -425,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>
@@ -435,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 })
@@ -449,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);
@@ -465,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, throttle } from '../utils.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 (!isLink) {\n          return html`<button\n              class=${classMap(cssClasses)}\n              id=\"button\"\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=\"button\"\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

@@ -1,10 +1,10 @@
 import { _ as __decorate, I as IndividualComponent, i, b } from './IndividualComponent-DUINtMGK.js';
 import { n } from './property-1psGvXOq.js';
 import { e } from './query-QBcUV-L_.js';
-import { o } from './style-map-CRFEoCEg.js';
+import { o } from './style-map-DVmWOuYy.js';
 import { o as ordinal, s as select } from './transform-DSwFSqzD.js';
 import { c as css_248z, b as band, m as max, l as linear, a as axisLeft, d as axisBottom } from './chart-bar-cn6rrna-.js';
-import './directive-Cuw6h7YA.js';
+import './directive-ZPhl09Yt.js';
 
 const chartColors = [];
 ['purple', 'blue', 'red', 'green', 'yellow', 'orange'].forEach(colorName => {