@krollins/blueprint 0.1.11 → 0.1.13

package/dist/components/button.js

@@ -0,0 +1,192 @@
+import { css as p, LitElement as c, html as d } from "lit";
+import { property as i, customElement as u } from "lit/decorators.js";
+const v = p`
+  /* Base styles */
+  :host {
+    display: inline-block;
+  }
+
+  .button {
+    /* Reset */
+    appearance: none;
+    border: none;
+    margin: 0;
+
+    /* Layout */
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--bp-spacing-sm);
+    cursor: pointer;
+    user-select: none;
+
+    /* Typography */
+    font-family: var(--bp-font-family);
+    font-weight: var(--bp-font-weight-medium);
+    text-decoration: none;
+    white-space: nowrap;
+
+    /* Visual */
+    border-radius: var(--bp-border-radius-md);
+    transition: all var(--bp-duration-fast);
+
+    /* Accessibility */
+    outline: none;
+  }
+
+  /* Variants */
+  .button--primary {
+    background: var(--bp-color-primary);
+    color: var(--bp-color-text-inverse);
+  }
+
+  .button--success {
+    background: var(--bp-color-success);
+    color: var(--bp-color-text-inverse);
+  }
+
+  .button--error {
+    background: var(--bp-color-error);
+    color: var(--bp-color-text-inverse);
+  }
+
+  .button--warning {
+    background: var(--bp-color-warning);
+    color: var(--bp-color-text-inverse);
+  }
+
+  .button--info {
+    background: var(--bp-color-info);
+    color: var(--bp-color-text-inverse);
+  }
+
+  .button--secondary {
+    background: var(--bp-color-surface-elevated);
+    color: var(--bp-color-text);
+    border: var(--bp-border-width) solid var(--bp-color-border-strong);
+  }
+
+  /* Sizes */
+  .button--sm {
+    padding: var(--bp-spacing-xs) var(--bp-spacing-sm);
+    font-size: var(--bp-font-size-sm);
+    line-height: var(--bp-line-height-tight);
+  }
+
+  .button--md {
+    padding: var(--bp-spacing-sm) var(--bp-spacing-md);
+    font-size: var(--bp-font-size-base);
+    line-height: var(--bp-line-height-normal);
+  }
+
+  .button--lg {
+    padding: var(--bp-spacing-md) var(--bp-spacing-lg);
+    font-size: var(--bp-font-size-lg);
+    line-height: var(--bp-line-height-normal);
+  }
+
+  /* States */
+  .button:hover:not(:disabled) {
+    box-shadow: var(--bp-shadow-md);
+  }
+
+  .button--primary:hover:not(:disabled) {
+    background: var(--bp-color-primary-hover);
+  }
+
+  .button--success:hover:not(:disabled) {
+    background: var(--bp-color-success-hover);
+  }
+
+  .button--error:hover:not(:disabled) {
+    background: var(--bp-color-error-hover);
+  }
+
+  .button--warning:hover:not(:disabled) {
+    background: var(--bp-color-warning-hover);
+  }
+
+  .button--info:hover:not(:disabled) {
+    background: var(--bp-color-info-hover);
+  }
+
+  .button--secondary:hover:not(:disabled) {
+    background: var(--bp-color-surface);
+    border-color: var(--bp-color-border-strong);
+  }
+
+  .button:active:not(:disabled) {
+    box-shadow: inset 0 2px 4px oklch(0 0 0 / 0.15);
+  }
+
+  .button--primary:active:not(:disabled) {
+    background: var(--bp-color-primary-active);
+  }
+
+  .button:disabled {
+    cursor: not-allowed;
+    opacity: var(--bp-opacity-disabled);
+  }
+
+  .button:focus-visible {
+    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);
+    outline-offset: var(--bp-focus-offset);
+  }
+`;
+var h = Object.defineProperty, g = Object.getOwnPropertyDescriptor, e = (t, a, s, n) => {
+  for (var r = n > 1 ? void 0 : n ? g(a, s) : a, b = t.length - 1, l; b >= 0; b--)
+    (l = t[b]) && (r = (n ? l(a, s, r) : l(r)) || r);
+  return n && r && h(a, s, r), r;
+};
+let o = class extends c {
+  constructor() {
+    super(), this.variant = "primary", this.size = "md", this.disabled = !1, this.type = "button";
+  }
+  handleClick(t) {
+    if (this.disabled) {
+      t.preventDefault(), t.stopPropagation();
+      return;
+    }
+    this.dispatchEvent(
+      new CustomEvent("bp-click", {
+        detail: { originalEvent: t },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  render() {
+    return d`
+      <button
+        part="button"
+        class="button button--${this.variant} button--${this.size}"
+        type=${this.type}
+        ?disabled=${this.disabled}
+        @click=${this.handleClick}
+        aria-disabled=${this.disabled ? "true" : "false"}
+      >
+        <slot></slot>
+      </button>
+    `;
+  }
+};
+o.styles = [v];
+e([
+  i({ type: String, reflect: !0 })
+], o.prototype, "variant", 2);
+e([
+  i({ type: String, reflect: !0 })
+], o.prototype, "size", 2);
+e([
+  i({ type: Boolean, reflect: !0 })
+], o.prototype, "disabled", 2);
+e([
+  i({ type: String, reflect: !0 })
+], o.prototype, "type", 2);
+o = e([
+  u("bp-button")
+], o);
+export {
+  o as BpButton
+};
+//# sourceMappingURL=button.js.map

package/dist/components/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sources":["../../source/components/button/button.style.ts","../../source/components/button/button.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const buttonStyles = css`\n  /* Base styles */\n  :host {\n    display: inline-block;\n  }\n\n  .button {\n    /* Reset */\n    appearance: none;\n    border: none;\n    margin: 0;\n\n    /* Layout */\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--bp-spacing-sm);\n    cursor: pointer;\n    user-select: none;\n\n    /* Typography */\n    font-family: var(--bp-font-family);\n    font-weight: var(--bp-font-weight-medium);\n    text-decoration: none;\n    white-space: nowrap;\n\n    /* Visual */\n    border-radius: var(--bp-border-radius-md);\n    transition: all var(--bp-duration-fast);\n\n    /* Accessibility */\n    outline: none;\n  }\n\n  /* Variants */\n  .button--primary {\n    background: var(--bp-color-primary);\n    color: var(--bp-color-text-inverse);\n  }\n\n  .button--success {\n    background: var(--bp-color-success);\n    color: var(--bp-color-text-inverse);\n  }\n\n  .button--error {\n    background: var(--bp-color-error);\n    color: var(--bp-color-text-inverse);\n  }\n\n  .button--warning {\n    background: var(--bp-color-warning);\n    color: var(--bp-color-text-inverse);\n  }\n\n  .button--info {\n    background: var(--bp-color-info);\n    color: var(--bp-color-text-inverse);\n  }\n\n  .button--secondary {\n    background: var(--bp-color-surface-elevated);\n    color: var(--bp-color-text);\n    border: var(--bp-border-width) solid var(--bp-color-border-strong);\n  }\n\n  /* Sizes */\n  .button--sm {\n    padding: var(--bp-spacing-xs) var(--bp-spacing-sm);\n    font-size: var(--bp-font-size-sm);\n    line-height: var(--bp-line-height-tight);\n  }\n\n  .button--md {\n    padding: var(--bp-spacing-sm) var(--bp-spacing-md);\n    font-size: var(--bp-font-size-base);\n    line-height: var(--bp-line-height-normal);\n  }\n\n  .button--lg {\n    padding: var(--bp-spacing-md) var(--bp-spacing-lg);\n    font-size: var(--bp-font-size-lg);\n    line-height: var(--bp-line-height-normal);\n  }\n\n  /* States */\n  .button:hover:not(:disabled) {\n    box-shadow: var(--bp-shadow-md);\n  }\n\n  .button--primary:hover:not(:disabled) {\n    background: var(--bp-color-primary-hover);\n  }\n\n  .button--success:hover:not(:disabled) {\n    background: var(--bp-color-success-hover);\n  }\n\n  .button--error:hover:not(:disabled) {\n    background: var(--bp-color-error-hover);\n  }\n\n  .button--warning:hover:not(:disabled) {\n    background: var(--bp-color-warning-hover);\n  }\n\n  .button--info:hover:not(:disabled) {\n    background: var(--bp-color-info-hover);\n  }\n\n  .button--secondary:hover:not(:disabled) {\n    background: var(--bp-color-surface);\n    border-color: var(--bp-color-border-strong);\n  }\n\n  .button:active:not(:disabled) {\n    box-shadow: inset 0 2px 4px oklch(0 0 0 / 0.15);\n  }\n\n  .button--primary:active:not(:disabled) {\n    background: var(--bp-color-primary-active);\n  }\n\n  .button:disabled {\n    cursor: not-allowed;\n    opacity: var(--bp-opacity-disabled);\n  }\n\n  .button:focus-visible {\n    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);\n    outline-offset: var(--bp-focus-offset);\n  }\n`;\n","import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { buttonStyles } from './button.style.js';\n\nexport type ButtonVariant =\n  | 'primary'\n  | 'success'\n  | 'error'\n  | 'warning'\n  | 'info'\n  | 'secondary';\nexport type ButtonSize = 'sm' | 'md' | 'lg';\n\n@customElement('bp-button')\nexport class BpButton extends LitElement {\n  @property({ type: String, reflect: true }) declare variant: ButtonVariant;\n  @property({ type: String, reflect: true }) declare size: ButtonSize;\n  @property({ type: Boolean, reflect: true }) declare disabled: boolean;\n  @property({ type: String, reflect: true }) declare type:\n    | 'button'\n    | 'submit'\n    | 'reset';\n\n  static styles = [buttonStyles];\n\n  constructor() {\n    super();\n    this.variant = 'primary';\n    this.size = 'md';\n    this.disabled = false;\n    this.type = 'button';\n  }\n\n  private handleClick(e: MouseEvent) {\n    if (this.disabled) {\n      e.preventDefault();\n      e.stopPropagation();\n      return;\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('bp-click', {\n        detail: { originalEvent: e },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  render() {\n    return html`\n      <button\n        part=\"button\"\n        class=\"button button--${this.variant} button--${this.size}\"\n        type=${this.type}\n        ?disabled=${this.disabled}\n        @click=${this.handleClick}\n        aria-disabled=${this.disabled ? 'true' : 'false'}\n      >\n        <slot></slot>\n      </button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-button': BpButton;\n  }\n}\n"],"names":["buttonStyles","css","BpButton","LitElement","e","html","__decorateClass","property","customElement"],"mappings":";;AAEO,MAAMA,IAAeC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;ACYrB,IAAMC,IAAN,cAAuBC,EAAW;AAAA,EAWvC,cAAc;AACZ,UAAA,GACA,KAAK,UAAU,WACf,KAAK,OAAO,MACZ,KAAK,WAAW,IAChB,KAAK,OAAO;AAAA,EACd;AAAA,EAEQ,YAAYC,GAAe;AACjC,QAAI,KAAK,UAAU;AACjB,MAAAA,EAAE,eAAA,GACFA,EAAE,gBAAA;AACF;AAAA,IACF;AAEA,SAAK;AAAA,MACH,IAAI,YAAY,YAAY;AAAA,QAC1B,QAAQ,EAAE,eAAeA,EAAA;AAAA,QACzB,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,EAEL;AAAA,EAEA,SAAS;AACP,WAAOC;AAAA;AAAA;AAAA,gCAGqB,KAAK,OAAO,YAAY,KAAK,IAAI;AAAA,eAClD,KAAK,IAAI;AAAA,oBACJ,KAAK,QAAQ;AAAA,iBAChB,KAAK,WAAW;AAAA,wBACT,KAAK,WAAW,SAAS,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAKtD;AACF;AAjDaH,EASJ,SAAS,CAACF,CAAY;AARsBM,EAAA;AAAA,EAAlDC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAD9BL,EACwC,WAAA,WAAA,CAAA;AACAI,EAAA;AAAA,EAAlDC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAF9BL,EAEwC,WAAA,QAAA,CAAA;AACCI,EAAA;AAAA,EAAnDC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAH/BL,EAGyC,WAAA,YAAA,CAAA;AACDI,EAAA;AAAA,EAAlDC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAJ9BL,EAIwC,WAAA,QAAA,CAAA;AAJxCA,IAANI,EAAA;AAAA,EADNE,EAAc,WAAW;AAAA,GACbN,CAAA;"}

package/dist/components/card.js

@@ -0,0 +1,223 @@
+import { css as h, LitElement as b, html as d } from "lit";
+import { property as l, customElement as p } from "lit/decorators.js";
+import { ifDefined as v } from "lit/directives/if-defined.js";
+const f = h`
+  /* Base styles */
+  :host {
+    display: block;
+  }
+
+  .card {
+    font-family: var(--bp-font-family);
+    background-color: var(--bp-color-surface-elevated);
+    border-radius: var(--bp-border-radius-lg);
+    overflow: hidden;
+    transition:
+      box-shadow var(--bp-transition-fast),
+      transform var(--bp-transition-base),
+      border-color var(--bp-transition-fast);
+  }
+
+  /* Content layout (media + body wrapper) */
+  .card-content {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .card-content--horizontal {
+    flex-direction: row;
+  }
+
+  .card-content--horizontal ::slotted([slot='media']) {
+    width: auto;
+    max-width: 50%;
+    flex-shrink: 0;
+  }
+
+  .card-body {
+    padding: var(--bp-spacing-lg);
+    font-size: var(--bp-font-size-base);
+    line-height: var(--bp-line-height-relaxed);
+    color: var(--bp-color-text);
+    flex: 1;
+    min-width: 0;
+  }
+
+  .card-body--no-padding {
+    padding: 0;
+  }
+
+  /* Header and footer container styles */
+  .card-header {
+    padding: var(--bp-spacing-lg);
+    border-bottom: var(--bp-border-width) solid var(--bp-color-border);
+    font-weight: var(--bp-font-weight-semibold);
+    font-size: var(--bp-font-size-lg);
+    line-height: 1.4;
+    color: var(--bp-color-text-strong);
+  }
+
+  .card-footer {
+    padding: var(--bp-spacing-lg);
+    border-top: var(--bp-border-width) solid var(--bp-color-border);
+    font-size: var(--bp-font-size-sm);
+    color: var(--bp-color-text-muted);
+  }
+
+  /* Media slot styles */
+  ::slotted([slot='media']) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+  }
+
+  /* Variants */
+  .card--default {
+    border: var(--bp-border-width) solid var(--bp-color-border);
+    box-shadow: var(--bp-shadow-sm);
+  }
+
+  .card--outlined {
+    border: var(--bp-border-width) solid var(--bp-color-border-strong);
+    box-shadow: none;
+  }
+
+  .card--elevated {
+    border: none;
+    box-shadow: var(--bp-shadow-lg);
+  }
+
+  /* States */
+  .card--default.card--hoverable:hover,
+  .card--default.card--clickable:hover {
+    box-shadow: var(--bp-shadow-md);
+    border-color: var(--bp-color-border-strong);
+  }
+
+  .card--outlined.card--hoverable:hover,
+  .card--outlined.card--clickable:hover {
+    box-shadow: var(--bp-shadow-md);
+  }
+
+  .card--elevated.card--hoverable:hover,
+  .card--elevated.card--clickable:hover {
+    box-shadow: var(--bp-shadow-xl);
+  }
+
+  .card--clickable {
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .card--clickable:focus-visible {
+    outline: var(--bp-focus-ring);
+    outline-offset: var(--bp-focus-offset);
+  }
+
+  .card--clickable:active {
+    box-shadow: var(--bp-shadow-sm);
+  }
+`;
+var g = Object.defineProperty, u = Object.getOwnPropertyDescriptor, r = (e, t, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? u(t, i) : t, n = e.length - 1, c; n >= 0; n--)
+    (c = e[n]) && (a = (s ? c(t, i, a) : c(a)) || a);
+  return s && a && g(t, i, a), a;
+};
+let o = class extends b {
+  constructor() {
+    super(), this.hasHeader = !1, this.hasFooter = !1, this.handleHeaderSlotChange = (e) => {
+      const t = e.target;
+      this.hasHeader = t.assignedNodes({ flatten: !0 }).length > 0;
+    }, this.handleFooterSlotChange = (e) => {
+      const t = e.target;
+      this.hasFooter = t.assignedNodes({ flatten: !0 }).length > 0;
+    }, this.variant = "default", this.hoverable = !1, this.clickable = !1, this.noPadding = !1, this.direction = "vertical";
+  }
+  handleClick(e) {
+    if (!this.clickable) return;
+    e.target.closest("a, button, input, select, textarea") || e.preventDefault(), this.dispatchEvent(
+      new CustomEvent("bp-click", {
+        detail: { originalEvent: e },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  render() {
+    return d`
+      <div
+        class="card card--${this.variant} ${this.hoverable || this.clickable ? "card--hoverable" : ""} ${this.clickable ? "card--clickable" : ""}"
+        part="card"
+        @click=${this.handleClick}
+        role=${this.clickable ? "button" : "article"}
+        tabindex=${v(this.clickable ? "0" : void 0)}
+        @keydown=${this.clickable ? this.handleKeydown : void 0}
+      >
+        ${this.hasHeader ? d`<div class="card-header" part="header">
+              <slot
+                name="header"
+                @slotchange=${this.handleHeaderSlotChange}
+              ></slot>
+            </div>` : d`<slot
+              name="header"
+              @slotchange=${this.handleHeaderSlotChange}
+            ></slot>`}
+        <div
+          class="card-content ${this.direction === "horizontal" ? "card-content--horizontal" : ""}"
+          part="content"
+        >
+          <slot name="media" part="media"></slot>
+          <div
+            class="card-body ${this.noPadding ? "card-body--no-padding" : ""}"
+            part="body"
+          >
+            <slot></slot>
+          </div>
+        </div>
+        ${this.hasFooter ? d`<div class="card-footer" part="footer">
+              <slot
+                name="footer"
+                @slotchange=${this.handleFooterSlotChange}
+              ></slot>
+            </div>` : d`<slot
+              name="footer"
+              @slotchange=${this.handleFooterSlotChange}
+            ></slot>`}
+      </div>
+    `;
+  }
+  handleKeydown(e) {
+    const t = e;
+    (t.key === "Enter" || t.key === " ") && (e.preventDefault(), this.handleClick(e));
+  }
+};
+o.styles = [f];
+r([
+  l({ type: String, reflect: !0 })
+], o.prototype, "variant", 2);
+r([
+  l({ type: Boolean, reflect: !0 })
+], o.prototype, "hoverable", 2);
+r([
+  l({ type: Boolean, reflect: !0 })
+], o.prototype, "clickable", 2);
+r([
+  l({ type: Boolean, reflect: !0 })
+], o.prototype, "noPadding", 2);
+r([
+  l({ type: String, reflect: !0 })
+], o.prototype, "direction", 2);
+r([
+  l({ type: Boolean, attribute: !1 })
+], o.prototype, "hasHeader", 2);
+r([
+  l({ type: Boolean, attribute: !1 })
+], o.prototype, "hasFooter", 2);
+o = r([
+  p("bp-card")
+], o);
+export {
+  o as BpCard
+};
+//# sourceMappingURL=card.js.map

package/dist/components/card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","sources":["../../source/components/card/card.style.ts","../../source/components/card/card.ts"],"sourcesContent":["import { css } from 'lit';\r\n\r\nexport const cardStyles = css`\r\n  /* Base styles */\r\n  :host {\r\n    display: block;\r\n  }\r\n\r\n  .card {\r\n    font-family: var(--bp-font-family);\r\n    background-color: var(--bp-color-surface-elevated);\r\n    border-radius: var(--bp-border-radius-lg);\r\n    overflow: hidden;\r\n    transition:\r\n      box-shadow var(--bp-transition-fast),\r\n      transform var(--bp-transition-base),\r\n      border-color var(--bp-transition-fast);\r\n  }\r\n\r\n  /* Content layout (media + body wrapper) */\r\n  .card-content {\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n\r\n  .card-content--horizontal {\r\n    flex-direction: row;\r\n  }\r\n\r\n  .card-content--horizontal ::slotted([slot='media']) {\r\n    width: auto;\r\n    max-width: 50%;\r\n    flex-shrink: 0;\r\n  }\r\n\r\n  .card-body {\r\n    padding: var(--bp-spacing-lg);\r\n    font-size: var(--bp-font-size-base);\r\n    line-height: var(--bp-line-height-relaxed);\r\n    color: var(--bp-color-text);\r\n    flex: 1;\r\n    min-width: 0;\r\n  }\r\n\r\n  .card-body--no-padding {\r\n    padding: 0;\r\n  }\r\n\r\n  /* Header and footer container styles */\r\n  .card-header {\r\n    padding: var(--bp-spacing-lg);\r\n    border-bottom: var(--bp-border-width) solid var(--bp-color-border);\r\n    font-weight: var(--bp-font-weight-semibold);\r\n    font-size: var(--bp-font-size-lg);\r\n    line-height: 1.4;\r\n    color: var(--bp-color-text-strong);\r\n  }\r\n\r\n  .card-footer {\r\n    padding: var(--bp-spacing-lg);\r\n    border-top: var(--bp-border-width) solid var(--bp-color-border);\r\n    font-size: var(--bp-font-size-sm);\r\n    color: var(--bp-color-text-muted);\r\n  }\r\n\r\n  /* Media slot styles */\r\n  ::slotted([slot='media']) {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    width: 100%;\r\n  }\r\n\r\n  /* Variants */\r\n  .card--default {\r\n    border: var(--bp-border-width) solid var(--bp-color-border);\r\n    box-shadow: var(--bp-shadow-sm);\r\n  }\r\n\r\n  .card--outlined {\r\n    border: var(--bp-border-width) solid var(--bp-color-border-strong);\r\n    box-shadow: none;\r\n  }\r\n\r\n  .card--elevated {\r\n    border: none;\r\n    box-shadow: var(--bp-shadow-lg);\r\n  }\r\n\r\n  /* States */\r\n  .card--default.card--hoverable:hover,\r\n  .card--default.card--clickable:hover {\r\n    box-shadow: var(--bp-shadow-md);\r\n    border-color: var(--bp-color-border-strong);\r\n  }\r\n\r\n  .card--outlined.card--hoverable:hover,\r\n  .card--outlined.card--clickable:hover {\r\n    box-shadow: var(--bp-shadow-md);\r\n  }\r\n\r\n  .card--elevated.card--hoverable:hover,\r\n  .card--elevated.card--clickable:hover {\r\n    box-shadow: var(--bp-shadow-xl);\r\n  }\r\n\r\n  .card--clickable {\r\n    cursor: pointer;\r\n    user-select: none;\r\n  }\r\n\r\n  .card--clickable:focus-visible {\r\n    outline: var(--bp-focus-ring);\r\n    outline-offset: var(--bp-focus-offset);\r\n  }\r\n\r\n  .card--clickable:active {\r\n    box-shadow: var(--bp-shadow-sm);\r\n  }\r\n`;\r\n","import { LitElement, html } from 'lit';\r\nimport { customElement, property } from 'lit/decorators.js';\r\nimport { ifDefined } from 'lit/directives/if-defined.js';\r\nimport { cardStyles } from './card.style.js';\r\n\r\nexport type CardVariant = 'default' | 'outlined' | 'elevated';\r\nexport type CardDirection = 'vertical' | 'horizontal';\r\n/**\r\n * A versatile card component for organizing and displaying content.\r\n *\r\n * @slot - Default slot for card body content\r\n * @slot header - Optional header section\r\n * @slot footer - Optional footer section\r\n * @slot media - Optional media section (images, illustrations, etc.)\r\n *\r\n * @fires bp-click - Fired when clickable card is clicked\r\n */\r\n@customElement('bp-card')\r\nexport class BpCard extends LitElement {\r\n  /**\r\n   * Visual variant of the card\r\n   */\r\n  @property({ type: String, reflect: true }) declare variant: CardVariant;\r\n\r\n  /**\r\n   * Whether the card should display a hover effect\r\n   */\r\n  @property({ type: Boolean, reflect: true }) declare hoverable: boolean;\r\n\r\n  /**\r\n   * Whether the card is clickable (shows pointer cursor and emits click events)\r\n   */\r\n  @property({ type: Boolean, reflect: true }) declare clickable: boolean;\r\n\r\n  /**\r\n   * Whether to remove default padding from the card body\r\n   */\r\n  @property({ type: Boolean, reflect: true }) declare noPadding: boolean;\r\n\r\n  /**\r\n   * Layout direction for the card content (media + body area).\r\n   * 'vertical' stacks media above body, 'horizontal' places them side by side.\r\n   * Header and footer are unaffected and remain full-width.\r\n   */\r\n  @property({ type: String, reflect: true }) declare direction: CardDirection;\r\n\r\n  /** Whether the header slot has assigned content */\r\n  @property({ type: Boolean, attribute: false })\r\n  private hasHeader = false;\r\n\r\n  /** Whether the footer slot has assigned content */\r\n  @property({ type: Boolean, attribute: false })\r\n  private hasFooter = false;\r\n\r\n  static styles = [cardStyles];\r\n\r\n  constructor() {\r\n    super();\r\n    this.variant = 'default';\r\n    this.hoverable = false;\r\n    this.clickable = false;\r\n    this.noPadding = false;\r\n    this.direction = 'vertical';\r\n  }\r\n\r\n  /**\r\n   * Handles slot change events for the header slot.\r\n   * Updates hasHeader state to control header visibility.\r\n   */\r\n  private handleHeaderSlotChange = (event: Event): void => {\r\n    const slot = event.target as HTMLElement & {\r\n      assignedNodes: (options?: { flatten?: boolean }) => Node[];\r\n    };\r\n    this.hasHeader = slot.assignedNodes({ flatten: true }).length > 0;\r\n  };\r\n\r\n  /**\r\n   * Handles slot change events for the footer slot.\r\n   * Updates hasFooter state to control footer visibility.\r\n   */\r\n  private handleFooterSlotChange = (event: Event): void => {\r\n    const slot = event.target as HTMLElement & {\r\n      assignedNodes: (options?: { flatten?: boolean }) => Node[];\r\n    };\r\n    this.hasFooter = slot.assignedNodes({ flatten: true }).length > 0;\r\n  };\r\n\r\n  private handleClick(event: MouseEvent) {\r\n    if (!this.clickable) return;\r\n\r\n    // Only prevent default if not clicking on interactive elements\r\n    const target = event.target as HTMLElement;\r\n    if (!target.closest('a, button, input, select, textarea')) {\r\n      event.preventDefault();\r\n    }\r\n\r\n    this.dispatchEvent(\r\n      new CustomEvent('bp-click', {\r\n        detail: { originalEvent: event },\r\n        bubbles: true,\r\n        composed: true,\r\n      })\r\n    );\r\n  }\r\n\r\n  render() {\r\n    return html`\r\n      <div\r\n        class=\"card card--${this.variant} ${this.hoverable || this.clickable\r\n          ? 'card--hoverable'\r\n          : ''} ${this.clickable ? 'card--clickable' : ''}\"\r\n        part=\"card\"\r\n        @click=${this.handleClick}\r\n        role=${this.clickable ? 'button' : 'article'}\r\n        tabindex=${ifDefined(this.clickable ? '0' : undefined)}\r\n        @keydown=${this.clickable ? this.handleKeydown : undefined}\r\n      >\r\n        ${this.hasHeader\r\n          ? html`<div class=\"card-header\" part=\"header\">\r\n              <slot\r\n                name=\"header\"\r\n                @slotchange=${this.handleHeaderSlotChange}\r\n              ></slot>\r\n            </div>`\r\n          : html`<slot\r\n              name=\"header\"\r\n              @slotchange=${this.handleHeaderSlotChange}\r\n            ></slot>`}\r\n        <div\r\n          class=\"card-content ${this.direction === 'horizontal'\r\n            ? 'card-content--horizontal'\r\n            : ''}\"\r\n          part=\"content\"\r\n        >\r\n          <slot name=\"media\" part=\"media\"></slot>\r\n          <div\r\n            class=\"card-body ${this.noPadding ? 'card-body--no-padding' : ''}\"\r\n            part=\"body\"\r\n          >\r\n            <slot></slot>\r\n          </div>\r\n        </div>\r\n        ${this.hasFooter\r\n          ? html`<div class=\"card-footer\" part=\"footer\">\r\n              <slot\r\n                name=\"footer\"\r\n                @slotchange=${this.handleFooterSlotChange}\r\n              ></slot>\r\n            </div>`\r\n          : html`<slot\r\n              name=\"footer\"\r\n              @slotchange=${this.handleFooterSlotChange}\r\n            ></slot>`}\r\n      </div>\r\n    `;\r\n  }\r\n\r\n  private handleKeydown(event: Event) {\r\n    const keyboardEvent = event as typeof window.KeyboardEvent.prototype;\r\n    if (keyboardEvent.key === 'Enter' || keyboardEvent.key === ' ') {\r\n      event.preventDefault();\r\n      this.handleClick(event as unknown as MouseEvent);\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    'bp-card': BpCard;\r\n  }\r\n}\r\n"],"names":["cardStyles","css","BpCard","LitElement","event","slot","html","ifDefined","keyboardEvent","__decorateClass","property","customElement"],"mappings":"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"}