@redvars/peacock 3.3.1 → 3.3.2

package/dist/button.js

@@ -1,6 +1,6 @@
-import './IndividualComponent-tDnXrOLV.js';
-import './class-map-hJdvjl-W.js';
-export { B as Button } from './button-trIfcqC7.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/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;;;;"}