@prioticket/design-system-web 1.1.0 → 1.2.0

package/COMPONENT-DOCUMENTATION.md

@@ -1,6 +1,22 @@
 # @prioticket/design-system-web Components
 
-Version: 1.1.0
+Version: 1.2.0
+
+### <pd-box> (PdBox)
+
+A generic layout and utility container for applying spacing, flexbox, and sizing properties.
+
+**Properties**
+
+| Property | Attribute | Type | Default | Description |
+|----------|-----------|------|---------|-------------|
+| `display` | `display` | `'flex' \| 'block' \| 'inline-flex' \| 'grid'` | `'block'` |  |
+
+**Slots**
+
+| Slot | Description |
+|------|-------------|
+| `default` | The default slot for any content or components inside the box. |
 
 ### <pd-button> (PdButton)
 

package/component-documentation.json

@@ -1,12 +1,35 @@
 {
   "package": {
     "name": "@prioticket/design-system-web",
-    "version": "1.1.0",
+    "version": "1.2.0",
     "description": "",
     "installation": "npm install @prioticket/design-system-web"
   },
-  "generatedAt": "2025-11-12T20:20:43.503Z",
+  "generatedAt": "2025-11-27T15:21:23.895Z",
   "components": {
+    "pd-box": {
+      "tagName": "pd-box",
+      "className": "PdBox",
+      "description": "A generic layout and utility container for applying spacing, flexbox, and sizing properties.",
+      "properties": [
+        {
+          "name": "display",
+          "type": "'flex' | 'block' | 'inline-flex' | 'grid'",
+          "attribute": "display",
+          "description": "",
+          "default": "'block'",
+          "required": false
+        }
+      ],
+      "events": [],
+      "slots": [
+        {
+          "name": "",
+          "description": "The default slot for any content or components inside the box."
+        }
+      ],
+      "cssProperties": []
+    },
     "pd-button": {
       "tagName": "pd-button",
       "className": "PdButton",

package/custom-elements.json

@@ -203,6 +203,70 @@
       "declarations": [],
       "exports": []
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/pd-box.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "PdBox",
+          "slots": [
+            {
+              "description": "The default slot for any content or components inside the box.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "display",
+              "type": {
+                "text": "'flex' | 'block' | 'inline-flex' | 'grid'"
+              },
+              "default": "'block'",
+              "attribute": "display",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "display",
+              "type": {
+                "text": "'flex' | 'block' | 'inline-flex' | 'grid'"
+              },
+              "default": "'block'",
+              "fieldName": "display"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "summary": "A generic layout and utility container for applying spacing, flexbox, and sizing properties.",
+          "tagName": "pd-box",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "PdBox",
+          "declaration": {
+            "name": "PdBox",
+            "module": "src/components/pd-box.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "pd-box",
+          "declaration": {
+            "name": "PdBox",
+            "module": "src/components/pd-box.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/pd-button.ts",

package/dist/components/pd-box.cjs.js

@@ -0,0 +1,9 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("lit"),i=require("lit/decorators.js");var n=Object.defineProperty,c=Object.getOwnPropertyDescriptor,d=(s,t,o,r)=>{for(var e=r>1?void 0:r?c(t,o):t,l=s.length-1,p;l>=0;l--)(p=s[l])&&(e=(r?p(t,o,e):p(e))||e);return r&&e&&n(t,o,e),e};exports.PdBox=class extends a.LitElement{constructor(){super(...arguments),this.display="block"}render(){return a.html`<slot></slot>`}};exports.PdBox.styles=a.css`
+    :host {
+      /* Apply the display property based on the component's 'display' attribute */
+      display: var(--pd-box-display, block);
+    }
+    
+    /* We will use CSS variables here so that the JS properties (like 'display') 
+       can dynamically control the styles */
+  `;d([i.property({type:String,reflect:!0})],exports.PdBox.prototype,"display",2);exports.PdBox=d([i.customElement("pd-box")],exports.PdBox);

package/dist/components/pd-box.es.js

@@ -0,0 +1,34 @@
+import { css as n, LitElement as y, html as c } from "lit";
+import { property as d, customElement as m } from "lit/decorators.js";
+var h = Object.defineProperty, u = Object.getOwnPropertyDescriptor, i = (a, t, l, r) => {
+  for (var e = r > 1 ? void 0 : r ? u(t, l) : t, p = a.length - 1, o; p >= 0; p--)
+    (o = a[p]) && (e = (r ? o(t, l, e) : o(e)) || e);
+  return r && e && h(t, l, e), e;
+};
+let s = class extends y {
+  constructor() {
+    super(...arguments), this.display = "block";
+  }
+  // STEP 2: Define the property for the main content (slot)
+  render() {
+    return c`<slot></slot>`;
+  }
+};
+s.styles = n`
+    :host {
+      /* Apply the display property based on the component's 'display' attribute */
+      display: var(--pd-box-display, block);
+    }
+    
+    /* We will use CSS variables here so that the JS properties (like 'display') 
+       can dynamically control the styles */
+  `;
+i([
+  d({ type: String, reflect: !0 })
+], s.prototype, "display", 2);
+s = i([
+  m("pd-box")
+], s);
+export {
+  s as PdBox
+};

package/dist/types/components/pd-box.d.ts

@@ -0,0 +1,12 @@
+import { LitElement } from 'lit';
+/**
+ * @customElement pd-box
+ * @summary A generic layout and utility container for applying spacing, flexbox, and sizing properties.
+ *
+ * @slot - The default slot for any content or components inside the box.
+ */
+export declare class PdBox extends LitElement {
+    display: 'flex' | 'block' | 'inline-flex' | 'grid';
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prioticket/design-system-web",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "type": "module",
   "packageManager": "yarn@3.6.4",
   "main": "./dist/prioticket-design-system-web.cjs.js",