@patimweb/crtstyleguide 1.0.11 → 1.0.12

package/dist/lib/index.js

@@ -34,7 +34,7 @@ const Ae = (e) => new Pe(typeof e == "string" ? e : e + "", void 0, ke), Se = (e
   for (const s of t.cssRules) a += s.cssText;
   return Ae(a);
 })(e) : e;
-const { is: Ee, defineProperty: De, getOwnPropertyDescriptor: Me, getOwnPropertyNames: Te, getOwnPropertySymbols: je, getPrototypeOf: Le } = Object, Vt = globalThis, ve = Vt.trustedTypes, Ie = ve ? ve.emptyScript : "", Be = Vt.reactiveElementPolyfillSupport, ft = (e, t) => e, jt = { toAttribute(e, t) {
+const { is: Ee, defineProperty: Me, getOwnPropertyDescriptor: De, getOwnPropertyNames: Te, getOwnPropertySymbols: je, getPrototypeOf: Le } = Object, Vt = globalThis, ve = Vt.trustedTypes, Ie = ve ? ve.emptyScript : "", Be = Vt.reactiveElementPolyfillSupport, ft = (e, t) => e, jt = { toAttribute(e, t) {
   switch (t) {
     case Boolean:
       e = e ? Ie : null;
@@ -74,11 +74,11 @@ let ut = class extends HTMLElement {
   static createProperty(t, a = ge) {
     if (a.state && (a.attribute = !1), this._$Ei(), this.prototype.hasOwnProperty(t) && ((a = Object.create(a)).wrapped = !0), this.elementProperties.set(t, a), !a.noAccessor) {
       const s = /* @__PURE__ */ Symbol(), r = this.getPropertyDescriptor(t, s, a);
-      r !== void 0 && De(this.prototype, t, r);
+      r !== void 0 && Me(this.prototype, t, r);
     }
   }
   static getPropertyDescriptor(t, a, s) {
-    const { get: r, set: i } = Me(this.prototype, t) ?? { get() {
+    const { get: r, set: i } = De(this.prototype, t) ?? { get() {
       return this[a];
     }, set(o) {
       this[a] = o;
@@ -317,8 +317,8 @@ class yt {
     for (; (r = G.nextNode()) !== null && p.length < c; ) {
       if (r.nodeType === 1) {
         if (r.hasAttributes()) for (const u of r.getAttributeNames()) if (u.endsWith($e)) {
-          const S = b[o++], U = r.getAttribute(u).split(R), Mt = /([.?@])?(.*)/.exec(S);
-          p.push({ type: 1, index: i, name: Mt[2], strings: U, ctor: Mt[1] === "." ? qe : Mt[1] === "?" ? We : Mt[1] === "@" ? Xe : Wt }), r.removeAttribute(u);
+          const S = b[o++], U = r.getAttribute(u).split(R), Dt = /([.?@])?(.*)/.exec(S);
+          p.push({ type: 1, index: i, name: Dt[2], strings: U, ctor: Dt[1] === "." ? qe : Dt[1] === "?" ? We : Dt[1] === "@" ? Xe : Wt }), r.removeAttribute(u);
         } else u.startsWith(R) && (p.push({ type: 6, index: i }), r.removeAttribute(u));
         if (ze.test(r.tagName)) {
           const u = r.textContent.split(R), S = u.length - 1;
@@ -2178,7 +2178,7 @@ var wr = Object.defineProperty, kr = Object.getOwnPropertyDescriptor, it = (e, t
     (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
   return s && r && wr(t, a, r), r;
 };
-let D = class extends h {
+let M = class extends h {
   constructor() {
     super(...arguments), this.value = "", this.placeholder = "Select...", this.label = "", this.disabled = !1, this.options = [], this._isOpen = !1, this._handleOutsideClick = (e) => {
       this.contains(e.target) || (this._isOpen = !1);
@@ -2259,7 +2259,7 @@ let D = class extends h {
     `;
   }
 };
-D.styles = d`
+M.styles = d`
     :host {
       display: inline-block;
       font-family: var(--crt-font-family);
@@ -2418,25 +2418,25 @@ D.styles = d`
   `;
 it([
   n({ type: String })
-], D.prototype, "value", 2);
+], M.prototype, "value", 2);
 it([
   n({ type: String })
-], D.prototype, "placeholder", 2);
+], M.prototype, "placeholder", 2);
 it([
   n({ type: String })
-], D.prototype, "label", 2);
+], M.prototype, "label", 2);
 it([
   n({ type: Boolean })
-], D.prototype, "disabled", 2);
+], M.prototype, "disabled", 2);
 it([
   n({ type: Array })
-], D.prototype, "options", 2);
+], M.prototype, "options", 2);
 it([
   m()
-], D.prototype, "_isOpen", 2);
-D = it([
+], M.prototype, "_isOpen", 2);
+M = it([
   v("crt-select")
-], D);
+], M);
 var $r = Object.defineProperty, _r = Object.getOwnPropertyDescriptor, y = (e, t, a, s) => {
   for (var r = s > 1 ? void 0 : s ? _r(t, a) : t, i = e.length - 1, o; i >= 0; i--)
     (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
@@ -3159,8 +3159,8 @@ oe([
 kt = oe([
   v("crt-breadcrumb")
 ], kt);
-var Er = Object.defineProperty, Dr = Object.getOwnPropertyDescriptor, At = (e, t, a, s) => {
-  for (var r = s > 1 ? void 0 : s ? Dr(t, a) : t, i = e.length - 1, o; i >= 0; i--)
+var Er = Object.defineProperty, Mr = Object.getOwnPropertyDescriptor, At = (e, t, a, s) => {
+  for (var r = s > 1 ? void 0 : s ? Mr(t, a) : t, i = e.length - 1, o; i >= 0; i--)
     (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
   return s && r && Er(t, a, r), r;
 };
@@ -3293,10 +3293,10 @@ At([
 et = At([
   v("crt-pagination")
 ], et);
-var Mr = Object.defineProperty, Tr = Object.getOwnPropertyDescriptor, L = (e, t, a, s) => {
+var Dr = Object.defineProperty, Tr = Object.getOwnPropertyDescriptor, L = (e, t, a, s) => {
   for (var r = s > 1 ? void 0 : s ? Tr(t, a) : t, i = e.length - 1, o; i >= 0; i--)
     (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
-  return s && r && Mr(t, a, r), r;
+  return s && r && Dr(t, a, r), r;
 };
 let k = class extends h {
   constructor() {
@@ -3517,7 +3517,7 @@ var jr = Object.defineProperty, Lr = Object.getOwnPropertyDescriptor, ot = (e, t
     (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
   return s && r && jr(t, a, r), r;
 };
-let M = class extends h {
+let D = class extends h {
   constructor() {
     super(...arguments), this.checked = !1, this.disabled = !1, this.label = "", this.onLabel = "1", this.offLabel = "0", this.size = "medium";
   }
@@ -3548,7 +3548,7 @@ let M = class extends h {
     `;
   }
 };
-M.styles = d`
+D.styles = d`
     :host {
       display: inline-flex;
       align-items: center;
@@ -3672,25 +3672,25 @@ M.styles = d`
   `;
 ot([
   n({ type: Boolean, reflect: !0 })
-], M.prototype, "checked", 2);
+], D.prototype, "checked", 2);
 ot([
   n({ type: Boolean, reflect: !0 })
-], M.prototype, "disabled", 2);
+], D.prototype, "disabled", 2);
 ot([
   n({ type: String })
-], M.prototype, "label", 2);
+], D.prototype, "label", 2);
 ot([
   n({ type: String })
-], M.prototype, "onLabel", 2);
+], D.prototype, "onLabel", 2);
 ot([
   n({ type: String })
-], M.prototype, "offLabel", 2);
+], D.prototype, "offLabel", 2);
 ot([
   n({ type: String, reflect: !0 })
-], M.prototype, "size", 2);
-M = ot([
+], D.prototype, "size", 2);
+D = ot([
   v("crt-toggle")
-], M);
+], D);
 var Ir = Object.defineProperty, Br = Object.getOwnPropertyDescriptor, I = (e, t, a, s) => {
   for (var r = s > 1 ? void 0 : s ? Br(t, a) : t, i = e.length - 1, o; i >= 0; i--)
     (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
@@ -4712,7 +4712,17 @@ let Qt = class extends h {
   }
 };
 Qt.styles = d`
+    :host {
+      /* Make the card element act like a normal block-level container
+         so external width/height styles can be applied responsively. */
+      display: block;
+      width: 100%;
+      box-sizing: border-box;
+    }
+
     .card {
+      width: 100%;
+      box-sizing: border-box;
       border: 3px double var(--crt-primary);
       padding: var(--crt-spacing-lg);
       background-color: var(--crt-bg-dark);
@@ -4958,6 +4968,9 @@ q.styles = d`
     :host {
       display: block;
       margin-bottom: var(--crt-spacing-xl);
+      width: 100%;
+      max-width: none;
+      box-sizing: border-box;
     }
 
     .example-header {
@@ -4985,6 +4998,8 @@ q.styles = d`
       border: 2px solid var(--crt-primary);
       background: var(--crt-bg-light);
       box-shadow: var(--crt-glow-inset);
+      width: 100%;
+      box-sizing: border-box;
     }
 
     .tab-header {
@@ -5029,6 +5044,17 @@ q.styles = d`
       flex-wrap: wrap;
       gap: var(--crt-spacing-md);
       align-items: center;
+      width: 100%;
+      box-sizing: border-box;
+    }
+
+    /* Ensure embedded demo components stretch to the available width
+       so examples don't get stuck at an intrinsic/narrow width. */
+    .preview-pane > * {
+      flex: 1 1 100%;
+      min-width: 0; /* allow children to shrink below their content width */
+      width: 100%;
+      box-sizing: border-box;
     }
 
     .code-pane {
@@ -5912,6 +5938,8 @@ let Ot = class extends h {
 Ot.styles = d`
     :host {
       display: block;
+      width: 100%;
+      box-sizing: border-box;
     }
 
     /* Table Styles */
@@ -5994,10 +6022,12 @@ Ot.styles = d`
     }
 
     td.track-title {
-      white-space: nowrap;
+      /* Allow titles to wrap on narrow screens to avoid forcing huge action column widths */
+      white-space: normal;
       overflow: hidden;
       text-overflow: ellipsis;
       min-width: 0;
+      word-break: break-word;
     }
 
     td.track-artist {
@@ -6009,7 +6039,8 @@ Ot.styles = d`
     }
 
     .remove-btn {
-      opacity: 0;
+      /* Visible by default at low opacity so touch devices can see it */
+      opacity: 0.65;
       transition: var(--crt-transition);
     }
 
@@ -6023,6 +6054,13 @@ Ot.styles = d`
       text-align: center;
       padding: var(--crt-spacing-xl);
       transition: var(--crt-transition);
+      /* Ensure the empty preview stretches to the container width */
+      width: 100%;
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
     }
 
     .empty-state:hover {
@@ -6047,8 +6085,9 @@ Ot.styles = d`
 
     /* Responsive: hide artist on narrow screens and allow horizontal scroll fallback */
     @media (max-width: 520px) {
-      td.track-artist { display: none; }
-      td.track-title { max-width: 140px; min-width: 0; }
+      /* Keep artist visible on narrow screens but allow wrapping */
+      td.track-artist { display: table-cell; max-width: 120px; white-space: normal; word-break: break-word; }
+      td.track-title { max-width: 140px; min-width: 0; white-space: normal; }
       .table-wrapper { overflow-x: auto; min-width: 0; }
     }
 
@@ -6491,8 +6530,10 @@ let W = class extends h {
   }
 };
 W.styles = d`
-    :host { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', monospace; }
+    :host { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', monospace; width: 100%; max-width: none; box-sizing: border-box; min-width: 0; }
     .term {
+      width: 100%;
+      max-width: none;
       background: #0b0f0b;
       color: #8aff8a;
       padding: 12px;
@@ -6546,7 +6587,7 @@ gt([
 W = gt([
   v("crt-terminal")
 ], W);
-var va = Object.defineProperty, ga = Object.getOwnPropertyDescriptor, Dt = (e, t, a, s) => {
+var va = Object.defineProperty, ga = Object.getOwnPropertyDescriptor, Mt = (e, t, a, s) => {
   for (var r = s > 1 ? void 0 : s ? ga(t, a) : t, i = e.length - 1, o; i >= 0; i--)
     (o = e[i]) && (r = (s ? o(t, a, r) : o(r)) || r);
   return s && r && va(t, a, r), r;
@@ -6712,19 +6753,19 @@ at.styles = d`
       padding-top: var(--crt-spacing-md);
     }
   `;
-Dt([
+Mt([
   m()
 ], at.prototype, "tracks", 2);
-Dt([
+Mt([
   m()
 ], at.prototype, "currentIndex", 2);
-Dt([
+Mt([
   m()
 ], at.prototype, "showUploadModal", 2);
-Dt([
+Mt([
   ee("crt-file-upload")
 ], at.prototype, "fileUpload", 2);
-at = Dt([
+at = Mt([
   v("crt-music-station")
 ], at);
 export {
@@ -6754,7 +6795,7 @@ export {
   w as Progress,
   Y as Radio,
   pt as RadioGroup,
-  D as Select,
+  M as Select,
   V as Skeleton,
   Ht as SkeletonCard,
   Ft as SkeletonText,
@@ -6766,7 +6807,7 @@ export {
   Ut as Text,
   J as Textarea,
   j as Toast,
-  M as Toggle,
+  D as Toggle,
   tt as Tooltip,
   rt as Visualizer
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patimweb/crtstyleguide",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "description": "CRT Style Guide - Retro Lit component library",
   "type": "module",
   "main": "dist/lib/index.js",