@redvars/peacock 3.3.0 → 3.3.2

package/dist/button-group-BMS5WvaF.js

@@ -0,0 +1,292 @@
+import { a as i, _ as __decorate, n, c as __classPrivateFieldGet, b, I as IndividualComponent, i as i$1 } from './IndividualComponent-Dt5xirYG.js';
+import { e } from './class-map-59YGWLnx.js';
+import { c as css_248z$2, a as css_248z$3, b as BaseButton, s as spread, B as Button } from './button-ClzS8JLq.js';
+import { t as throttle } from './dispatch-event-utils-B4odODQf.js';
+
+var css_248z$1 = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+.button-group {
+  display: flex;
+  gap: var(--_button-group-gap);
+}
+.button-group slot::slotted(:first-child) {
+  --button-container-shape-start-start: 50%;
+  --button-container-shape-end-start: 50%;
+  --button-container-shape-start-end: var(--shape-corner-medium);
+  --button-container-shape-end-end: var(--shape-corner-medium);
+  --button-container-shape-variant: unset;
+}
+.button-group slot::slotted(:last-child) {
+  --button-container-shape-end-end: 50%;
+  --button-container-shape-start-end: 50%;
+  --button-container-shape-end-start: var(--shape-corner-medium);
+  --button-container-shape-start-start: var(--shape-corner-medium);
+  --button-container-shape-variant: unset;
+}
+.button-group slot::slotted(:only-child) {
+  --button-container-shape: 50%;
+}
+
+.button-group.size-xs,
+.button-group.size-extra-small {
+  --_button-group-gap: 0.125rem;
+}
+
+.button-group.size-sm,
+.button-group.size-small {
+  --_button-group-gap: 0.125rem;
+}
+
+.button-group.size-md,
+.button-group.size-medium {
+  --_button-group-gap: 0.125rem;
+}
+
+.button-group.size-lg,
+.button-group.size-large {
+  --_button-group-gap: 0.125rem;
+}
+
+.button-group.size-xl {
+  --_button-group-gap: 0.125rem;
+}`;
+
+var css_248z = i`.button {
+  --_container-padding: 0.75rem;
+  width: var(--_button-height);
+  --_container-padding: 0;
+}
+
+.button.size-xs,
+.button.size-extra-small {
+  --_button-height: 2rem;
+  --_button-icon-size: 1rem;
+}
+
+.button.size-sm,
+.button.size-small {
+  --_button-height: 2.5rem;
+  --_button-icon-size: 1.25rem;
+  --_button-icon-label-spacing: 0.5rem;
+}
+
+.button.size-md,
+.button.size-medium {
+  --_button-height: 3.5rem;
+  --_button-icon-size: 1.5rem;
+}
+
+.button.size-lg,
+.button.size-large {
+  --_button-height: 6rem;
+  --_button-icon-size: 2rem;
+}
+
+.button.size-xl {
+  --_button-height: 8.5rem;
+  --_button-icon-size: 2.5rem;
+}`;
+
+var _IconButton_id, _IconButton_tabindex;
+/**
+ * @label Icon Button
+ * @tag wc-icon-button
+ * @rawTag icon-button
+ *
+ * @summary Icon buttons allow users to take actions, and make choices, with a single tap.
+ *
+ * @overview
+ * <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>
+ *
+ * @cssprop --button-container-shape: Defines the border radius of the button container shape.
+ *
+ * @cssprop --button-container-shape-start-start: Defines the start position of the button container shape.
+ * @cssprop --button-container-shape-start-end: Defines the end position of the button container shape.
+ * @cssprop --button-container-shape-end-start: Defines the start position of the button container shape.
+ * @cssprop --button-container-shape-end-end: Defines the end position of the button container shape.
+ *
+ *
+ * @cssprop --filled-button-container-color: Color of the filled button container.
+ * @cssprop --filled-button-label-text-color: Text color of the filled button label.
+ *
+ * @cssprop --outlined-button-container-color: Color of the outlined button container.
+ * @cssprop --outlined-button-label-text-color: Text color of the outlined button label.
+ *
+ * @cssprop --text-button-label-text-color: Text color of the text button label.
+ *
+ * @cssprop --tonal-button-container-color: Color of the tonal button container.
+ * @cssprop --tonal-button-label-text-color: Text color of the tonal button label.
+ *
+ * @cssprop --elevated-button-container-color: Color of the elevated button container.
+ * @cssprop --elevated-button-label-text-color: Text color of the elevated button label.
+ *
+ * @cssprop --neo-button-container-color: Color of the neo button container.
+ * @cssprop --neo-button-label-text-color: Text color of the neo button label.
+ *
+ * @fires {CustomEvent} button:click - Dispatched when the button is clicked.
+ *
+ * @example
+ * ```html
+ * <wc-icon-button name="home"></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';
+    }
+    firstUpdated() {
+        this.__dispatchClickWithThrottle = throttle(this.__dispatchClick, this.throttleDelay);
+        this.__convertTypeToVariantAndColor();
+    }
+    render() {
+        const isLink = this.__isLink();
+        const cssClasses = {
+            button: true,
+            'button-element': true,
+            [`size-${this.size}`]: true,
+            [`variant-${this.variant}`]: true,
+            [`color-${this.color}`]: true,
+            disabled: this.disabled || this.softDisabled,
+            pressed: this.isPressed,
+            skeleton: this.skeleton,
+        };
+        if (!isLink) {
+            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}`}
+          ?disabled=${this.disabled}
+          ${spread(this.configAria)}
+        >
+          ${this.renderButtonContent()}
+        </button>
+        ${this.__renderTooltip()}`;
+        }
+        return b `<a
+        class=${e(cssClasses)}
+        id="button"
+        tabindex=${__classPrivateFieldGet(this, _IconButton_tabindex, "f")}
+        href=${this.href}
+        target=${this.target}
+        @click=${this.__dispatchClickWithThrottle}
+        @mousedown=${this.__handlePress}
+        @keydown=${this.__handlePress}
+        @keyup=${this.__handlePress}
+        role="button"
+        aria-describedby=${this.disabled && this.disabledReason
+            ? `disabled-reason-${__classPrivateFieldGet(this, _IconButton_id, "f")}`
+            : null}
+        aria-disabled=${`${this.disabled}`}
+        ${spread(this.configAria)}
+      >
+        ${this.renderButtonContent()}
+      </a>
+      ${this.__renderTooltip()}`;
+    }
+    renderButtonContent() {
+        return b `
+      <wc-focus-ring class="focus-ring" .control=${this} element="buttonElement"></wc-focus-ring>
+      <wc-elevation class="elevation"></wc-elevation>
+      <div class="neo-background"></div>
+      <div class="background"></div>
+      <div class="outline"></div>
+      <wc-ripple class="ripple"></wc-ripple>
+      <wc-skeleton class="skeleton"></wc-skeleton>
+
+      <div class="button-content">
+        <wc-icon
+          name=${this.name}
+          src=${this.src}
+          provider=${this.provider}
+        ></wc-icon>
+      </div>
+
+      ${this.__renderDisabledReason()}
+    `;
+    }
+}
+_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);
+__decorate([
+    n({ type: String })
+], IconButton.prototype, "provider", void 0);
+
+/**
+ * @label Button Group
+ * @tag wc-button-group
+ * @rawTag button-group
+ *
+ * @summary Group a series of buttons together on a single line with the button group, and super-power.
+
+ * @example
+ * ```html
+ * <wc-button-group>
+ *  <wc-icon-button name="home"></wc-icon-button>
+ *  <wc-icon-button name="alarm"></wc-icon-button>
+ * </wc-button-group>
+ * ```
+ *
+ * @tags controls
+ */
+let ButtonGroup = class ButtonGroup extends i$1 {
+    constructor() {
+        super(...arguments);
+        /**
+         * Button size.
+         * Possible values are `"sm"`, `"md"`, `"lg"`. Defaults to `"md"`.
+         */
+        this.size = 'sm';
+    }
+    render() {
+        const cssClasses = {
+            'button-group': true,
+            [`size-${this.size}`]: true,
+        };
+        return b `
+      <div class=${e(cssClasses)}>
+        <slot></slot>
+      </div>
+    `;
+    }
+};
+// Lit prefers CSS-in-JS for better performance and scoping.
+// If you prefer keeping the SCSS file, you'll need a build tool (like Vite or Webpack)
+// that can import .scss files as lit-css.
+ButtonGroup.styles = [css_248z$1];
+ButtonGroup.Button = Button;
+ButtonGroup.IconButton = IconButton;
+__decorate([
+    n()
+], ButtonGroup.prototype, "size", void 0);
+ButtonGroup = __decorate([
+    IndividualComponent
+], ButtonGroup);
+
+export { ButtonGroup as B, IconButton as I };
+//# sourceMappingURL=button-group-BMS5WvaF.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button-group-BMS5WvaF.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 styles from '../button/button.scss';\nimport colorStyles from '../button/button-colors.scss';\nimport sizeStyles from './icon-button-sizes.scss';\nimport { spread } from '../../spread.js';\nimport { BaseButton } from '../BaseButton.js';\nimport { IconProvider } from '../../icon/icon.js';\nimport { throttle } from '../../utils.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 name=\"home\"></wc-icon-button>\n * ```\n * @tags display\n */\nexport class IconButton extends BaseButton {\n  static override styles = [styles, colorStyles, sizeStyles];\n\n  #id = crypto.randomUUID();\n\n  #tabindex?: number = 0;\n\n  @property({ type: String, reflect: true }) name?: string;\n\n  @property({ type: String, reflect: true }) src?: string;\n\n  @property({ type: String }) provider: IconProvider = 'material-symbols';\n\n  override firstUpdated() {\n    this.__dispatchClickWithThrottle = throttle(\n      this.__dispatchClick,\n      this.throttleDelay,\n    );\n    this.__convertTypeToVariantAndColor();\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          tabindex=${this.#tabindex}\n          type=${this.htmlType}\n          @click=${this.__dispatchClickWithThrottle}\n          @mousedown=${this.__handlePress}\n          @keydown=${this.__handlePress}\n          @keyup=${this.__handlePress}\n          ?aria-describedby=${(this.disabled || this.softDisabled) &&\n          this.disabledReason\n            ? `disabled-reason-${this.#id}`\n            : null}\n          aria-disabled=${`${this.disabled || this.softDisabled}`}\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        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.disabled && this.disabledReason\n          ? `disabled-reason-${this.#id}`\n          : null}\n        aria-disabled=${`${this.disabled}`}\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\" .control=${this} element=\"buttonElement\"></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        <wc-icon\n          name=${this.name}\n          src=${this.src}\n          provider=${this.provider}\n        ></wc-icon>\n      </div>\n\n      ${this.__renderDisabledReason()}\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 'src/IndividualComponent.js';\nimport styles from './button-group.scss';\nimport { Button } from '../button/button.js';\nimport { IconButton } from '../icon-button/icon-button.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>\n *  <wc-icon-button name=\"home\"></wc-icon-button>\n *  <wc-icon-button name=\"alarm\"></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  render() {\n    const cssClasses = {\n      'button-group': true,\n      [`size-${this.size}`]: true,\n    };\n    return html`\n      <div class=${classMap(cssClasses)}>\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"],"names":["html","classMap","styles","colorStyles","sizeStyles","property","LitElement"],"mappings":"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"}

package/dist/button-group.js

@@ -1,109 +1,8 @@
-import { i, _ as __decorate, n, I as IndividualComponent, a as i$1, b } from './IndividualComponent-tDnXrOLV.js';
-import { e } from './class-map-DpeNtqCn.js';
+import './IndividualComponent-Dt5xirYG.js';
+import './class-map-59YGWLnx.js';
+export { B as ButtonGroup } from './button-group-BMS5WvaF.js';
+import './button-ClzS8JLq.js';
 import './directive-Cuw6h7YA.js';
-
-var css_248z = i`* {
-  box-sizing: border-box;
-}
-
-.screen-reader-only {
-  display: none !important;
-}
-
-.button-group {
-  display: flex;
-  gap: var(--_button-group-gap);
-}
-.button-group slot::slotted(:first-child) {
-  --button-container-shape-start-start: 50%;
-  --button-container-shape-end-start: 50%;
-  --button-container-shape-start-end: var(--shape-corner-medium);
-  --button-container-shape-end-end: var(--shape-corner-medium);
-  --button-container-shape-variant: unset;
-}
-.button-group slot::slotted(:last-child) {
-  --button-container-shape-end-end: 50%;
-  --button-container-shape-start-end: 50%;
-  --button-container-shape-end-start: var(--shape-corner-medium);
-  --button-container-shape-start-start: var(--shape-corner-medium);
-  --button-container-shape-variant: unset;
-}
-.button-group slot::slotted(:only-child) {
-  --button-container-shape: 50%;
-}
-
-.button-group.size-xs,
-.button-group.size-extra-small {
-  --_button-group-gap: 0.125rem;
-}
-
-.button-group.size-sm,
-.button-group.size-small {
-  --_button-group-gap: 0.125rem;
-}
-
-.button-group.size-md,
-.button-group.size-medium {
-  --_button-group-gap: 0.125rem;
-}
-
-.button-group.size-lg,
-.button-group.size-large {
-  --_button-group-gap: 0.125rem;
-}
-
-.button-group.size-xl {
-  --_button-group-gap: 0.125rem;
-}`;
-
-/**
- * @label Button Group
- * @tag wc-button-group
- * @rawTag button-group
- *
- * @summary Group a series of buttons together on a single line with the button group, and super-power.
-
- * @example
- * ```html
- * <wc-button-group>
- *  <wc-icon-button name="home"></wc-icon-button>
- *  <wc-icon-button name="alarm"></wc-icon-button>
- * </wc-button-group>
- * ```
- *
- * @tags controls
- */
-let ButtonGroup = class ButtonGroup extends i$1 {
-    constructor() {
-        super(...arguments);
-        /**
-         * Button size.
-         * Possible values are `"sm"`, `"md"`, `"lg"`. Defaults to `"md"`.
-         */
-        this.size = 'sm';
-    }
-    render() {
-        const cssClasses = {
-            'button-group': true,
-            [`size-${this.size}`]: true,
-        };
-        return b `
-      <div class=${e(cssClasses)}>
-        <slot></slot>
-      </div>
-    `;
-    }
-};
-// Lit prefers CSS-in-JS for better performance and scoping.
-// If you prefer keeping the SCSS file, you'll need a build tool (like Vite or Webpack)
-// that can import .scss files as lit-css.
-ButtonGroup.styles = [css_248z];
-__decorate([
-    n()
-], ButtonGroup.prototype, "size", void 0);
-ButtonGroup = __decorate([
-    IndividualComponent
-], ButtonGroup);
-
-export { ButtonGroup };
+import './dispatch-event-utils-B4odODQf.js';
+import './query-QBcUV-L_.js';
 //# sourceMappingURL=button-group.js.map

package/dist/button-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-group.js","sources":["../../src/button/button-group/button-group.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport IndividualComponent from 'src/IndividualComponent.js';\nimport styles from './button-group.scss';\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>\n *  <wc-icon-button name=\"home\"></wc-icon-button>\n *  <wc-icon-button name=\"alarm\"></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  /**\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  render() {\n    const cssClasses = {\n      'button-group': true,\n      [`size-${this.size}`]: true,\n    };\n    return html`\n      <div class=${classMap(cssClasses)}>\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","html","classMap","styles","property"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA;;;;;;;;;;;;;;;;AAgBG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQA,GAAU,CAAA;AAApC,IAAA,WAAA,GAAA;;AAML;;;AAGG;QACS,IAAA,CAAA,IAAI,GAAqC,IAAI;IAa3D;IAXE,MAAM,GAAA;AACJ,QAAA,MAAM,UAAU,GAAG;AACjB,YAAA,cAAc,EAAE,IAAI;AACpB,YAAA,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,IAAI;SAC5B;AACD,QAAA,OAAOC,CAAI,CAAA;mBACIC,CAAQ,CAAC,UAAU,CAAC,CAAA;;;KAGlC;IACH;;AArBA;AACA;AACA;AACO,WAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AAMZ,UAAA,CAAA;AAAX,IAAAC,CAAQ;AAAiD,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA;AAV/C,WAAW,GAAA,UAAA,CAAA;IADvB;AACY,CAAA,EAAA,WAAW,CAuBvB;;;;"}
+{"version":3,"file":"button-group.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/button.js

@@ -1,7 +1,6 @@
-import './IndividualComponent-tDnXrOLV.js';
-import './state-8v48Exzh.js';
-import './class-map-DpeNtqCn.js';
-export { B as Button } from './button-BGFJfbT2.js';
+import './IndividualComponent-Dt5xirYG.js';
+import './class-map-59YGWLnx.js';
+export { B as Button } from './button-ClzS8JLq.js';
 import './dispatch-event-utils-B4odODQf.js';
 import './directive-Cuw6h7YA.js';
 import './query-QBcUV-L_.js';

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

@@ -0,0 +1,104 @@
+import { a as i, _ as __decorate, n, I as IndividualComponent, i as i$1, b } from './IndividualComponent-Dt5xirYG.js';
+
+var css_248z = i`:host {
+  display: block;
+  --card-background: var(--color-surface, #ffffff);
+  --card-border-color: transparent;
+  --card-shadow: none;
+  --card-shape: var(--global-shape-corner-large, 1rem);
+  --card-padding: 1rem;
+  --card-gap: 0;
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--card-gap);
+  background: var(--card-background);
+  border-radius: var(--card-shape);
+  border: 1px solid var(--card-border-color);
+  box-shadow: var(--card-shadow);
+  color: var(--color-on-surface, inherit);
+  padding: var(--card-padding);
+  transition: box-shadow 150ms ease, transform 150ms ease;
+}
+
+:host([variant=elevated]) {
+  --card-background: var(--color-surface-container-low, #fdfcfe);
+  --card-shadow: var(--shadow-sm, 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06));
+}
+
+:host([variant=filled]) {
+  --card-background: var(--color-surface-container-highest, #f5f5f5);
+  --card-shadow: none;
+}
+
+:host([variant=outlined]) {
+  --card-border-color: var(--color-outline, rgba(0, 0, 0, 0.12));
+  --card-shadow: none;
+}
+
+:host([elevation="0"]) {
+  --card-shadow: none;
+}
+
+:host([elevation="1"]) {
+  --card-shadow: var(--shadow-sm, 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06));
+}
+
+:host([elevation="2"]) {
+  --card-shadow: var(--shadow-md, 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06));
+}
+
+:host([elevation="3"]) {
+  --card-shadow: var(--shadow-lg, 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03));
+}
+
+:host([elevation="4"]) {
+  --card-shadow: var(--shadow-xl, 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03));
+}
+
+:host([elevation="5"]) {
+  --card-shadow: var(--shadow-xxl, 0px 24px 48px -12px rgba(16, 24, 40, 0.18));
+}`;
+
+/**
+ * @label Card
+ * @tag wc-card
+ * @rawTag card
+ * @summary A Material 3 inspired card surface for grouping related content.
+ * @cssprop --card-padding - Inner padding for the card container. Defaults to 1rem.
+ * @cssprop --card-shape - Corner radius for the card container. Defaults to a large radius.
+ * @cssprop --card-gap - Gap between slotted children.
+ *
+ * @example
+ * ```html
+ * <wc-card variant="outlined">
+ *   <h3>Title</h3>
+ *   <p>Supportive text</p>
+ * </wc-card>
+ * ```
+ */
+let Card = class Card extends i$1 {
+    constructor() {
+        super(...arguments);
+        this.variant = 'elevated';
+        this.elevation = 1;
+    }
+    render() {
+        return b `<div class="card"><slot></slot></div>`;
+    }
+};
+Card.styles = [css_248z];
+__decorate([
+    n({ type: String, reflect: true })
+], Card.prototype, "variant", void 0);
+__decorate([
+    n({ type: Number, reflect: true })
+], Card.prototype, "elevation", void 0);
+Card = __decorate([
+    IndividualComponent
+], Card);
+
+export { Card };
+//# sourceMappingURL=card.js.map

package/dist/card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","sources":["../../src/card/card.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport IndividualComponent from '../IndividualComponent.js';\nimport styles from './card.scss';\n\ntype CardVariant = 'elevated' | 'filled' | 'outlined';\ntype CardElevation = 0 | 1 | 2 | 3 | 4 | 5;\n/**\n * @label Card\n * @tag wc-card\n * @rawTag card\n * @summary A Material 3 inspired card surface for grouping related content.\n * @cssprop --card-padding - Inner padding for the card container. Defaults to 1rem.\n * @cssprop --card-shape - Corner radius for the card container. Defaults to a large radius.\n * @cssprop --card-gap - Gap between slotted children.\n *\n * @example\n * ```html\n * <wc-card variant=\"outlined\">\n *   <h3>Title</h3>\n *   <p>Supportive text</p>\n * </wc-card>\n * ```\n */\n@IndividualComponent\nexport class Card extends LitElement {\n  static styles = [styles];\n\n  @property({ type: String, reflect: true })\n  variant: CardVariant = 'elevated';\n\n  @property({ type: Number, reflect: true })\n  elevation: CardElevation = 1;\n\n  render() {\n    return html`<div class=\"card\"><slot></slot></div>`;\n  }\n}\n"],"names":["LitElement","html","styles","property"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA;;;;;;;;;;;;;;;;AAgBG;AAEI,IAAM,IAAI,GAAV,MAAM,IAAK,SAAQA,GAAU,CAAA;AAA7B,IAAA,WAAA,GAAA;;QAIL,IAAA,CAAA,OAAO,GAAgB,UAAU;QAGjC,IAAA,CAAA,SAAS,GAAkB,CAAC;IAK9B;IAHE,MAAM,GAAA;QACJ,OAAOC,CAAI,CAAA,CAAA,qCAAA,CAAuC;IACpD;;AAVO,IAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AAGxB,UAAA,CAAA;IADCC,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AACP,CAAA,EAAA,IAAA,CAAA,SAAA,EAAA,SAAA,EAAA,MAAA,CAAA;AAGlC,UAAA,CAAA;IADCA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AACZ,CAAA,EAAA,IAAA,CAAA,SAAA,EAAA,WAAA,EAAA,MAAA,CAAA;AAPlB,IAAI,GAAA,UAAA,CAAA;IADhB;AACY,CAAA,EAAA,IAAI,CAYhB;;;;"}