@knapsack/sandbox-components 4.76.0--canary.5638.1676110.0 → 4.76.0

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+# v4.76.0 (Tue Mar 04 2025)
+
+#### 🚀 Enhancement
+
+- support Web Components manifest v1 KSP-6181 [#5727](https://github.com/knapsack-labs/app-monorepo/pull/5727) ([@EvanLovely](https://github.com/EvanLovely))
+
+#### 🏠 Internal
+
+- KSP-6162: ensure logger includes top-level error [#5710](https://github.com/knapsack-labs/app-monorepo/pull/5710) ([@illepic](https://github.com/illepic))
+
+#### Authors: 2
+
+- Christopher Bloom ([@illepic](https://github.com/illepic))
+- Evan Lovely ([@EvanLovely](https://github.com/EvanLovely))
+
+---
+
 # v4.75.7 (Mon Feb 24 2025)
 
 #### 🐛 Bug Fix

package/dist/web-components/bundle.js

@@ -1,5 +1,8 @@
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
 var __decorateClass = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
   for (var i5 = decorators.length - 1, decorator; i5 >= 0; i5--)
@@ -8,6 +11,9 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
 
 // ../../../../node_modules/.pnpm/@lit+reactive-element@1.6.3/node_modules/@lit/reactive-element/css-tag.js
 var t = window;
@@ -639,17 +645,15 @@ var n6;
 var e6 = null != (null === (n6 = window.HTMLSlotElement) || void 0 === n6 ? void 0 : n6.prototype.assignedElements) ? (o7, n7) => o7.assignedElements(n7) : (o7, n7) => o7.assignedNodes(n7).filter((o8) => o8.nodeType === Node.ELEMENT_NODE);
 
 // src/web-components/button.ts
+var _SimpleButton_instances, handleClick_fn;
 var SimpleButton = class extends s4 {
   constructor() {
     super(...arguments);
+    __privateAdd(this, _SimpleButton_instances);
     this.label = "Click me";
     this.size = "medium";
     this.type = "filled";
   }
-  _handleClick() {
-    console.log("Button clicked!");
-    this.dispatchEvent(new CustomEvent("button-click"));
-  }
   render() {
     const classes = {
       button: true,
@@ -657,12 +661,17 @@ var SimpleButton = class extends s4 {
       [`button--type-${this.type}`]: true
     };
     return x`
-      <button @click=${this._handleClick} class=${o5(classes)}>
+      <button @click=${__privateMethod(this, _SimpleButton_instances, handleClick_fn)} class=${o5(classes)}>
         ${this.label}
       </button>
     `;
   }
 };
+_SimpleButton_instances = new WeakSet();
+handleClick_fn = function() {
+  console.log("Button clicked!");
+  this.dispatchEvent(new CustomEvent("button-click"));
+};
 SimpleButton.shadowRootOptions = {
   ...s4.shadowRootOptions,
   mode: "open"
@@ -739,6 +748,112 @@ __decorateClass([
   n5({ type: String })
 ], SimpleButton.prototype, "type", 2);
 customElements.define("simple-button", SimpleButton);
+
+// src/web-components/card.ts
+var SimpleCard = class extends s4 {
+  constructor() {
+    super(...arguments);
+    this.elevation = "low";
+    this.padding = "medium";
+    this.bordered = false;
+  }
+  render() {
+    const classes = {
+      card: true,
+      "card--bordered": this.bordered,
+      [`card--elevation-${this.elevation}`]: this.elevation !== "none",
+      [`card--padding-${this.padding}`]: this.padding !== "none"
+    };
+    return x`
+      <div class=${o5(classes)} part="card">
+        <div class="header" part="header">
+          <slot name="header"></slot>
+        </div>
+        <div class="content" part="content">
+          <slot></slot>
+        </div>
+        <div class="footer" part="footer">
+          <slot name="footer"></slot>
+        </div>
+      </div>
+    `;
+  }
+};
+SimpleCard.shadowRootOptions = {
+  ...s4.shadowRootOptions,
+  mode: "open"
+};
+SimpleCard.styles = i`
+    :host {
+      display: block;
+    }
+
+    .card {
+      background-color: #ffffff;
+      background-color: var(--color-white);
+      border-radius: 8px;
+      border-radius: var(--radius-medium);
+      overflow: hidden;
+    }
+
+    .card--bordered {
+      border: 1px solid #e5e7eb;
+      border: 1px solid var(--color-gray-200, #e5e7eb);
+    }
+
+    .card--elevation-low {
+      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+    }
+
+    .card--elevation-medium {
+      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+        0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    }
+
+    .card--elevation-high {
+      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+        0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    }
+
+    .card--padding-small {
+      padding: 12px;
+      padding: var(--spacing-medium);
+    }
+
+    .card--padding-medium {
+      padding: 16px;
+      padding: var(--spacing-large);
+    }
+
+    .card--padding-large {
+      padding: 24px;
+      padding: var(--spacing-xlarge);
+    }
+
+    .header {
+      margin-bottom: 16px;
+      margin-bottom: var(--spacing-large);
+    }
+
+    .footer {
+      margin-top: 16px;
+      margin-top: var(--spacing-large);
+    }
+
+    ::slotted(*) {
+      margin: 0;
+    }
+  `;
+__decorateClass([
+  n5({ type: String })
+], SimpleCard.prototype, "elevation", 2);
+__decorateClass([
+  n5({ type: String })
+], SimpleCard.prototype, "padding", 2);
+__decorateClass([
+  n5({ type: Boolean })
+], SimpleCard.prototype, "bordered", 2);
+customElements.define("simple-card", SimpleCard);
 /*! Bundled license information:
 
 @lit/reactive-element/css-tag.js:

package/dist/web-components/button.d.ts

@@ -1,5 +1,9 @@
 import { LitElement } from 'lit';
+/**
+ * @event button-click - Fired when the button is clicked
+ */
 export declare class SimpleButton extends LitElement {
+    #private;
     static shadowRootOptions: {
         mode: "open";
         delegatesFocus?: boolean;
@@ -13,7 +17,6 @@ export declare class SimpleButton extends LitElement {
     size: 'small' | 'medium' | 'large';
     type: 'filled' | 'outlined';
     static styles: import("lit").CSSResult;
-    _handleClick(): void;
     render(): import("lit").TemplateResult<1>;
 }
 //# sourceMappingURL=button.d.ts.map

package/dist/web-components/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/web-components/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,qBAAa,YAAa,SAAQ,UAAU;IAC1C,MAAM,CAAC,iBAAiB;;;;;MAGwB;IAGhD,KAAK,SAAc;IAEnB;;OAEG;IAEH,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAY;IAG9C,IAAI,EAAE,QAAQ,GAAG,UAAU,CAAY;IAEvC,MAAM,CAAC,MAAM,0BA6DX;IAEF,YAAY;IAKZ,MAAM;CAaP"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/web-components/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C;;GAEG;AACH,qBAAa,YAAa,SAAQ,UAAU;;IAC1C,MAAM,CAAC,iBAAiB;;;;;MAGwB;IAGhD,KAAK,SAAc;IAEnB;;OAEG;IAEH,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAY;IAG9C,IAAI,EAAE,QAAQ,GAAG,UAAU,CAAY;IAEvC,MAAM,CAAC,MAAM,0BA6DX;IAOF,MAAM;CAaP"}

package/dist/web-components/button.js

@@ -7,12 +7,22 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _SimpleButton_instances, _SimpleButton_handleClick;
 import { LitElement, css, html } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { property } from 'lit/decorators.js';
+/**
+ * @event button-click - Fired when the button is clicked
+ */
 export class SimpleButton extends LitElement {
     constructor() {
         super(...arguments);
+        _SimpleButton_instances.add(this);
         this.label = 'Click me';
         /**
          * How big
@@ -20,10 +30,6 @@ export class SimpleButton extends LitElement {
         this.size = 'medium';
         this.type = 'filled';
     }
-    _handleClick() {
-        console.log('Button clicked!');
-        this.dispatchEvent(new CustomEvent('button-click'));
-    }
     render() {
         const classes = {
             button: true,
@@ -31,12 +37,16 @@ export class SimpleButton extends LitElement {
             [`button--type-${this.type}`]: true,
         };
         return html `
-      <button @click=${this._handleClick} class=${classMap(classes)}>
+      <button @click=${__classPrivateFieldGet(this, _SimpleButton_instances, "m", _SimpleButton_handleClick)} class=${classMap(classes)}>
         ${this.label}
       </button>
     `;
     }
 }
+_SimpleButton_instances = new WeakSet(), _SimpleButton_handleClick = function _SimpleButton_handleClick() {
+    console.log('Button clicked!');
+    this.dispatchEvent(new CustomEvent('button-click'));
+};
 SimpleButton.shadowRootOptions = {
     ...LitElement.shadowRootOptions,
     mode: 'open',

package/dist/web-components/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/web-components/button.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,MAAM,OAAO,YAAa,SAAQ,UAAU;IAA5C;;QAOE,UAAK,GAAG,UAAU,CAAC;QAEnB;;WAEG;QAEH,SAAI,GAAiC,QAAQ,CAAC;QAG9C,SAAI,GAA0B,QAAQ,CAAC;IAmFzC,CAAC;IAlBC,YAAY;QACV,OAAO,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;QAC/B,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,cAAc,CAAC,CAAC,CAAC;IACtD,CAAC;IAED,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,MAAM,EAAE,IAAI;YACZ,CAAC,gBAAgB,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;YACnC,CAAC,gBAAgB,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;SACpC,CAAC;QAEF,OAAO,IAAI,CAAA;uBACQ,IAAI,CAAC,YAAY,UAAU,QAAQ,CAAC,OAAO,CAAC;UACzD,IAAI,CAAC,KAAK;;KAEf,CAAC;IACJ,CAAC;;AAjGM,8BAAiB,GAAG;IACzB,GAAG,UAAU,CAAC,iBAAiB;IAC/B,IAAI,EAAE,MAAM;CACiC,AAHvB,CAGwB;AAczC,mBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6DlB,AA7DY,CA6DX;AAxEF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;2CACR;AAMnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;0CACmB;AAG9C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;0CACY;AAqFzC,cAAc,CAAC,MAAM,CAAC,eAAe,EAAE,YAAY,CAAC,CAAC"}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/web-components/button.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C;;GAEG;AACH,MAAM,OAAO,YAAa,SAAQ,UAAU;IAA5C;;;QAOE,UAAK,GAAG,UAAU,CAAC;QAEnB;;WAEG;QAEH,SAAI,GAAiC,QAAQ,CAAC;QAG9C,SAAI,GAA0B,QAAQ,CAAC;IAmFzC,CAAC;IAbC,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,MAAM,EAAE,IAAI;YACZ,CAAC,gBAAgB,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;YACnC,CAAC,gBAAgB,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;SACpC,CAAC;QAEF,OAAO,IAAI,CAAA;uBACQ,uBAAA,IAAI,0DAAa,UAAU,QAAQ,CAAC,OAAO,CAAC;UACzD,IAAI,CAAC,KAAK;;KAEf,CAAC;IACJ,CAAC;;;IAhBC,OAAO,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAC/B,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,cAAc,CAAC,CAAC,CAAC;AACtD,CAAC;AAnFM,8BAAiB,GAAG;IACzB,GAAG,UAAU,CAAC,iBAAiB;IAC/B,IAAI,EAAE,MAAM;CACiC,AAHvB,CAGwB;AAczC,mBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6DlB,AA7DY,CA6DX;AAxEF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;2CACR;AAMnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;0CACmB;AAG9C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;0CACY;AAqFzC,cAAc,CAAC,MAAM,CAAC,eAAe,EAAE,YAAY,CAAC,CAAC"}

package/dist/web-components/card.d.ts

@@ -0,0 +1,36 @@
+import { LitElement } from 'lit';
+/**
+ * A versatile card component that can be used to group related content.
+ *
+ * @slot header - Content to be rendered in the card header
+ * @slot default - The default slot for the main content
+ * @slot footer - Content to be rendered in the card footer
+ *
+ * @csspart card - The main card wrapper
+ * @csspart header - The header container
+ * @csspart content - The main content container
+ * @csspart footer - The footer container
+ */
+export declare class SimpleCard extends LitElement {
+    static shadowRootOptions: {
+        mode: "open";
+        delegatesFocus?: boolean;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
+    /**
+     * Card elevation level
+     */
+    elevation: 'none' | 'low' | 'medium' | 'high';
+    /**
+     * Card padding size
+     */
+    padding: 'none' | 'small' | 'medium' | 'large';
+    /**
+     * Whether the card has a border
+     */
+    bordered: boolean;
+    static styles: import("lit").CSSResult;
+    render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=card.d.ts.map

package/dist/web-components/card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../src/web-components/card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C;;;;;;;;;;;GAWG;AACH,qBAAa,UAAW,SAAQ,UAAU;IACxC,MAAM,CAAC,iBAAiB;;;;;MAGwB;IAEhD;;OAEG;IAEH,SAAS,EAAE,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAS;IAEtD;;OAEG;IAEH,OAAO,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAY;IAE1D;;OAEG;IAEH,QAAQ,UAAS;IAEjB,MAAM,CAAC,MAAM,0BA4DX;IAEF,MAAM;CAsBP"}

package/dist/web-components/card.js

@@ -0,0 +1,141 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { LitElement, css, html } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { property } from 'lit/decorators.js';
+/**
+ * A versatile card component that can be used to group related content.
+ *
+ * @slot header - Content to be rendered in the card header
+ * @slot default - The default slot for the main content
+ * @slot footer - Content to be rendered in the card footer
+ *
+ * @csspart card - The main card wrapper
+ * @csspart header - The header container
+ * @csspart content - The main content container
+ * @csspart footer - The footer container
+ */
+export class SimpleCard extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Card elevation level
+         */
+        this.elevation = 'low';
+        /**
+         * Card padding size
+         */
+        this.padding = 'medium';
+        /**
+         * Whether the card has a border
+         */
+        this.bordered = false;
+    }
+    render() {
+        const classes = {
+            card: true,
+            'card--bordered': this.bordered,
+            [`card--elevation-${this.elevation}`]: this.elevation !== 'none',
+            [`card--padding-${this.padding}`]: this.padding !== 'none',
+        };
+        return html `
+      <div class=${classMap(classes)} part="card">
+        <div class="header" part="header">
+          <slot name="header"></slot>
+        </div>
+        <div class="content" part="content">
+          <slot></slot>
+        </div>
+        <div class="footer" part="footer">
+          <slot name="footer"></slot>
+        </div>
+      </div>
+    `;
+    }
+}
+SimpleCard.shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    mode: 'open',
+};
+SimpleCard.styles = css `
+    :host {
+      display: block;
+    }
+
+    .card {
+      background-color: #ffffff;
+      background-color: var(--color-white);
+      border-radius: 8px;
+      border-radius: var(--radius-medium);
+      overflow: hidden;
+    }
+
+    .card--bordered {
+      border: 1px solid #e5e7eb;
+      border: 1px solid var(--color-gray-200, #e5e7eb);
+    }
+
+    .card--elevation-low {
+      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+    }
+
+    .card--elevation-medium {
+      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+        0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    }
+
+    .card--elevation-high {
+      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+        0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    }
+
+    .card--padding-small {
+      padding: 12px;
+      padding: var(--spacing-medium);
+    }
+
+    .card--padding-medium {
+      padding: 16px;
+      padding: var(--spacing-large);
+    }
+
+    .card--padding-large {
+      padding: 24px;
+      padding: var(--spacing-xlarge);
+    }
+
+    .header {
+      margin-bottom: 16px;
+      margin-bottom: var(--spacing-large);
+    }
+
+    .footer {
+      margin-top: 16px;
+      margin-top: var(--spacing-large);
+    }
+
+    ::slotted(*) {
+      margin: 0;
+    }
+  `;
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], SimpleCard.prototype, "elevation", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], SimpleCard.prototype, "padding", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], SimpleCard.prototype, "bordered", void 0);
+customElements.define('simple-card', SimpleCard);
+//# sourceMappingURL=card.js.map

package/dist/web-components/card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","sourceRoot":"","sources":["../../src/web-components/card.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C;;;;;;;;;;;GAWG;AACH,MAAM,OAAO,UAAW,SAAQ,UAAU;IAA1C;;QAME;;WAEG;QAEH,cAAS,GAAuC,KAAK,CAAC;QAEtD;;WAEG;QAEH,YAAO,GAA0C,QAAQ,CAAC;QAE1D;;WAEG;QAEH,aAAQ,GAAG,KAAK,CAAC;IAsFnB,CAAC;IAtBC,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,IAAI,EAAE,IAAI;YACV,gBAAgB,EAAE,IAAI,CAAC,QAAQ;YAC/B,CAAC,mBAAmB,IAAI,CAAC,SAAS,EAAE,CAAC,EAAE,IAAI,CAAC,SAAS,KAAK,MAAM;YAChE,CAAC,iBAAiB,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;SAC3D,CAAC;QAEF,OAAO,IAAI,CAAA;mBACI,QAAQ,CAAC,OAAO,CAAC;;;;;;;;;;;KAW/B,CAAC;IACJ,CAAC;;AA1GM,4BAAiB,GAAG;IACzB,GAAG,UAAU,CAAC,iBAAiB;IAC/B,IAAI,EAAE,MAAM;CACiC,AAHvB,CAGwB;AAoBzC,iBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4DlB,AA5DY,CA4DX;AA1EF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;6CAC2B;AAMtD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;2CAC+B;AAM1D;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;;4CACX;AAwFnB,cAAc,CAAC,MAAM,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC"}

package/dist/web-components/custom-elements.json

@@ -1,63 +1,252 @@
 {
-  "version": "experimental",
-  "tags": [
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
     {
-      "name": "simple-button",
-      "path": "./../../src/web-components/button.ts",
-      "attributes": [
+      "kind": "javascript-module",
+      "path": "src/web-components/button.ts",
+      "declarations": [
         {
-          "name": "label",
-          "type": "string",
-          "default": "\"Click me\""
-        },
-        {
-          "name": "size",
-          "description": "How big",
-          "type": "\"small\" | \"medium\" | \"large\"",
-          "default": "\"medium\""
-        },
-        {
-          "name": "type",
-          "type": "\"filled\" | \"outlined\"",
-          "default": "\"filled\""
+          "kind": "class",
+          "description": "",
+          "name": "SimpleButton",
+          "members": [
+            {
+              "kind": "field",
+              "name": "shadowRootOptions",
+              "static": true,
+              "default": "{ ...LitElement.shadowRootOptions, mode: 'open', } satisfies typeof LitElement.shadowRootOptions"
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Click me'",
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "How big",
+              "attribute": "size"
+            },
+            {
+              "kind": "field",
+              "name": "type",
+              "type": {
+                "text": "'filled' | 'outlined'"
+              },
+              "default": "'filled'",
+              "attribute": "type"
+            },
+            {
+              "kind": "method",
+              "name": "#handleClick",
+              "privacy": "private"
+            }
+          ],
+          "events": [
+            {
+              "name": "button-click",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fired when the button is clicked"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Click me'",
+              "fieldName": "label"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "How big",
+              "fieldName": "size"
+            },
+            {
+              "name": "type",
+              "type": {
+                "text": "'filled' | 'outlined'"
+              },
+              "default": "'filled'",
+              "fieldName": "type"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "simple-button",
+          "customElement": true
         }
       ],
-      "properties": [
-        {
-          "name": "shadowRootOptions",
-          "type": "{ mode: \"open\"; delegatesFocus?: boolean | undefined; slotAssignment?: SlotAssignmentMode | undefined; }",
-          "default": "\"{\\n    ...LitElement.shadowRootOptions,\\n    mode: 'open',\\n  } satisfies typeof LitElement.shadowRootOptions\""
-        },
-        {
-          "name": "label",
-          "attribute": "label",
-          "type": "string",
-          "default": "\"Click me\""
-        },
+      "exports": [
         {
-          "name": "size",
-          "attribute": "size",
-          "description": "How big",
-          "type": "\"small\" | \"medium\" | \"large\"",
-          "default": "\"medium\""
+          "kind": "js",
+          "name": "SimpleButton",
+          "declaration": {
+            "name": "SimpleButton",
+            "module": "src/web-components/button.ts"
+          }
         },
         {
-          "name": "type",
-          "attribute": "type",
-          "type": "\"filled\" | \"outlined\"",
-          "default": "\"filled\""
-        },
+          "kind": "custom-element-definition",
+          "name": "simple-button",
+          "declaration": {
+            "name": "SimpleButton",
+            "module": "src/web-components/button.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/web-components/card.ts",
+      "declarations": [
         {
-          "name": "styles",
-          "type": "CSSResult",
-          "default": "\"css`\\n    .button {\\n      border-radius: 4px;\\n      border-radius: var(--radius-small);\\n      border: 1px solid #7a34ed;\\n      border: 1px solid var(--brand-color);\\n      font-family: Inter;\\n      font-family: var(--brand-font-family);\\n      font-weight: 600;\\n      transition: all 0.3s ease;\\n    }\\n\\n    .button--size-small {\\n      font-size: 12px;\\n      padding-top: 4px;\\n      padding-bottom: 4px;\\n      padding-top: var(--spacing-xsmall);\\n      padding-bottom: var(--spacing-xsmall);\\n      padding-left: 12px;\\n      padding-right: 12px;\\n      padding-left: var(--spacing-medium);\\n      padding-right: var(--spacing-medium);\\n    }\\n\\n    .button--size-medium {\\n      font-size: 14px;\\n      padding-top: 8px;\\n      padding-bottom: 8px;\\n      padding-top: var(--spacing-small);\\n      padding-bottom: var(--spacing-small);\\n      padding-left: 16px;\\n      padding-right: 16px;\\n      padding-left: var(--spacing-large);\\n      padding-right: var(--spacing-large);\\n    }\\n\\n    .button--size-large {\\n      font-size: 16px;\\n      padding-top: 12px;\\n      padding-bottom: 12px;\\n      padding-top: var(--spacing-medium);\\n      padding-bottom: var(--spacing-medium);\\n      padding-left: 24px;\\n      padding-right: 24px;\\n      padding-left: var(--spacing-xlarge);\\n      padding-right: var(--spacing-xlarge);\\n    }\\n\\n    .button--type-outlined {\\n      background-color: #ffffff;\\n      background-color: var(--color-white);\\n      color: #7a34ed;\\n      color: var(--brand-color);\\n    }\\n\\n    .button--type-filled {\\n      background-color: #7a34ed;\\n      background-color: var(--brand-color);\\n      color: #ffffff;\\n      color: var(--color-white);\\n    }\\n  `\""
+          "kind": "class",
+          "description": "A versatile card component that can be used to group related content.",
+          "name": "SimpleCard",
+          "cssParts": [
+            {
+              "description": "The main card wrapper",
+              "name": "card"
+            },
+            {
+              "description": "The header container",
+              "name": "header"
+            },
+            {
+              "description": "The main content container",
+              "name": "content"
+            },
+            {
+              "description": "The footer container",
+              "name": "footer"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Content to be rendered in the card header",
+              "name": "header"
+            },
+            {
+              "description": "The default slot for the main content",
+              "name": "default"
+            },
+            {
+              "description": "Content to be rendered in the card footer",
+              "name": "footer"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "shadowRootOptions",
+              "static": true,
+              "default": "{ ...LitElement.shadowRootOptions, mode: 'open', } satisfies typeof LitElement.shadowRootOptions"
+            },
+            {
+              "kind": "field",
+              "name": "elevation",
+              "type": {
+                "text": "'none' | 'low' | 'medium' | 'high'"
+              },
+              "default": "'low'",
+              "description": "Card elevation level",
+              "attribute": "elevation"
+            },
+            {
+              "kind": "field",
+              "name": "padding",
+              "type": {
+                "text": "'none' | 'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "Card padding size",
+              "attribute": "padding"
+            },
+            {
+              "kind": "field",
+              "name": "bordered",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the card has a border",
+              "attribute": "bordered"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "elevation",
+              "type": {
+                "text": "'none' | 'low' | 'medium' | 'high'"
+              },
+              "default": "'low'",
+              "description": "Card elevation level",
+              "fieldName": "elevation"
+            },
+            {
+              "name": "padding",
+              "type": {
+                "text": "'none' | 'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "Card padding size",
+              "fieldName": "padding"
+            },
+            {
+              "name": "bordered",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the card has a border",
+              "fieldName": "bordered"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "simple-card",
+          "customElement": true
         }
       ],
-      "events": [
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SimpleCard",
+          "declaration": {
+            "name": "SimpleCard",
+            "module": "src/web-components/card.ts"
+          }
+        },
         {
-          "name": "button-click"
+          "kind": "custom-element-definition",
+          "name": "simple-card",
+          "declaration": {
+            "name": "SimpleCard",
+            "module": "src/web-components/card.ts"
+          }
         }
       ]
     }
   ]
-}
+}

package/dist/web-components/index.d.ts

@@ -1,2 +1,3 @@
 import './button.js';
+import './card.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/web-components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/web-components/index.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/web-components/index.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AACrB,OAAO,WAAW,CAAC"}

package/dist/web-components/index.js

@@ -1,2 +1,3 @@
 import './button.js';
+import './card.js';
 //# sourceMappingURL=index.js.map

package/dist/web-components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/web-components/index.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/web-components/index.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AACrB,OAAO,WAAW,CAAC"}

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@knapsack/sandbox-components",
   "description": "",
-  "version": "4.76.0--canary.5638.1676110.0",
+  "version": "4.76.0",
   "type": "module",
   "exports": {
     "./css": "./dist/css/ks-sandbox-styles.css",
+    "./customElements": "./dist/web-components/custom-elements.json",
     "./hbs/*": "./src/hbs/*",
     "./html/*": "./src/html/*",
     "./package": "./package.json",
@@ -18,8 +19,7 @@
     "./web-components": {
       "types": "./dist/web-components/index.d.ts",
       "default": "./dist/web-components/bundle.js"
-    },
-    "./web-components/custom-elements.json": "./dist/web-components/custom-elements.json"
+    }
   },
   "sideEffects": [
     "./src/web-components/*"
@@ -29,7 +29,7 @@
     "build:css": "postcss ./src/css/index.css --output ./dist/css/ks-sandbox-styles.css",
     "build:ts": "tsc",
     "build:wc": "esbuild --bundle --outfile=./dist/web-components/bundle.js --format=esm --platform=browser --target=es2020 --loader:.js=jsx --loader:.svg=file --loader:.png=file --loader:.json=json ./src/web-components/index.ts",
-    "build:wc-type-info": "web-component-analyzer ./src/web-components --outFile ./dist/web-components/custom-elements.json",
+    "build:wc-type-info": "custom-elements-manifest analyze --globs './src/web-components/**/*.ts' --exclude './src/web-components/index.ts' --outdir ./dist/web-components/ --litelement --dependencies",
     "clean": "rm -rf ./dist",
     "lint": "eslint ./",
     "start": "run-p watch:*",
@@ -48,11 +48,12 @@
     "vue": "^3.5.13"
   },
   "devDependencies": {
-    "@knapsack/eslint-config-starter": "4.76.0--canary.5638.1676110.0",
-    "@knapsack/postcss-config-starter": "4.76.0--canary.5638.1676110.0",
-    "@knapsack/prettier-config": "4.76.0--canary.5638.1676110.0",
-    "@knapsack/sandbox-tokens": "4.76.0--canary.5638.1676110.0",
-    "@knapsack/typescript-config-starter": "4.76.0--canary.5638.1676110.0",
+    "@custom-elements-manifest/analyzer": "^0.10.4",
+    "@knapsack/eslint-config-starter": "4.76.0",
+    "@knapsack/postcss-config-starter": "4.76.0",
+    "@knapsack/prettier-config": "4.76.0",
+    "@knapsack/sandbox-tokens": "4.76.0",
+    "@knapsack/typescript-config-starter": "4.76.0",
     "@types/node": "^20.17.17",
     "@types/react": "^18.3.18",
     "esbuild": "^0.25.0",
@@ -60,8 +61,7 @@
     "npm-run-all2": "^5.0.2",
     "postcss-cli": "^9.1.0",
     "tailwindcss": "^3.4.17",
-    "typescript": "^5.7.3",
-    "web-component-analyzer": "^2.0.0"
+    "typescript": "^5.7.3"
   },
   "license": "GPL-2.0-or-later",
   "publishConfig": {
@@ -72,5 +72,5 @@
     "directory": "apps/ui/libs/sandbox-components",
     "type": "git"
   },
-  "gitHead": "16761103577534741995a17f46f5627d37580545"
+  "gitHead": "89e02beeee71a7a91f9a745e5496e367dbd28ba3"
 }

package/src/web-components/button.ts

@@ -2,6 +2,9 @@ import { LitElement, css, html } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { property } from 'lit/decorators.js';
 
+/**
+ * @event button-click - Fired when the button is clicked
+ */
 export class SimpleButton extends LitElement {
   static shadowRootOptions = {
     ...LitElement.shadowRootOptions,
@@ -83,7 +86,7 @@ export class SimpleButton extends LitElement {
     }
   `;
 
-  _handleClick() {
+  #handleClick() {
     console.log('Button clicked!');
     this.dispatchEvent(new CustomEvent('button-click'));
   }
@@ -96,7 +99,7 @@ export class SimpleButton extends LitElement {
     };
 
     return html`
-      <button @click=${this._handleClick} class=${classMap(classes)}>
+      <button @click=${this.#handleClick} class=${classMap(classes)}>
         ${this.label}
       </button>
     `;

package/src/web-components/card.ts

@@ -0,0 +1,127 @@
+import { LitElement, css, html } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { property } from 'lit/decorators.js';
+
+/**
+ * A versatile card component that can be used to group related content.
+ *
+ * @slot header - Content to be rendered in the card header
+ * @slot default - The default slot for the main content
+ * @slot footer - Content to be rendered in the card footer
+ *
+ * @csspart card - The main card wrapper
+ * @csspart header - The header container
+ * @csspart content - The main content container
+ * @csspart footer - The footer container
+ */
+export class SimpleCard extends LitElement {
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    mode: 'open',
+  } satisfies typeof LitElement.shadowRootOptions;
+
+  /**
+   * Card elevation level
+   */
+  @property({ type: String })
+  elevation: 'none' | 'low' | 'medium' | 'high' = 'low';
+
+  /**
+   * Card padding size
+   */
+  @property({ type: String })
+  padding: 'none' | 'small' | 'medium' | 'large' = 'medium';
+
+  /**
+   * Whether the card has a border
+   */
+  @property({ type: Boolean })
+  bordered = false;
+
+  static styles = css`
+    :host {
+      display: block;
+    }
+
+    .card {
+      background-color: #ffffff;
+      background-color: var(--color-white);
+      border-radius: 8px;
+      border-radius: var(--radius-medium);
+      overflow: hidden;
+    }
+
+    .card--bordered {
+      border: 1px solid #e5e7eb;
+      border: 1px solid var(--color-gray-200, #e5e7eb);
+    }
+
+    .card--elevation-low {
+      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+    }
+
+    .card--elevation-medium {
+      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+        0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    }
+
+    .card--elevation-high {
+      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+        0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    }
+
+    .card--padding-small {
+      padding: 12px;
+      padding: var(--spacing-medium);
+    }
+
+    .card--padding-medium {
+      padding: 16px;
+      padding: var(--spacing-large);
+    }
+
+    .card--padding-large {
+      padding: 24px;
+      padding: var(--spacing-xlarge);
+    }
+
+    .header {
+      margin-bottom: 16px;
+      margin-bottom: var(--spacing-large);
+    }
+
+    .footer {
+      margin-top: 16px;
+      margin-top: var(--spacing-large);
+    }
+
+    ::slotted(*) {
+      margin: 0;
+    }
+  `;
+
+  render() {
+    const classes = {
+      card: true,
+      'card--bordered': this.bordered,
+      [`card--elevation-${this.elevation}`]: this.elevation !== 'none',
+      [`card--padding-${this.padding}`]: this.padding !== 'none',
+    };
+
+    return html`
+      <div class=${classMap(classes)} part="card">
+        <div class="header" part="header">
+          <slot name="header"></slot>
+        </div>
+        <div class="content" part="content">
+          <slot></slot>
+        </div>
+        <div class="footer" part="footer">
+          <slot name="footer"></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('simple-card', SimpleCard);

package/src/web-components/index.ts

@@ -1 +1,2 @@
 import './button.js';
+import './card.js';