@muibook/components 19.5.0 → 19.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/esm/components/mui-grid/index.js +14 -23
  2. package/dist/esm/components/mui-stack/hstack/index.js +5 -14
  3. package/dist/esm/components/mui-stack/vstack/index.js +5 -14
  4. package/dist/esm/css/mui-brand.css +1 -1
  5. package/dist/esm/custom-elements.json +930 -930
  6. package/dist/esm/dynamic-attrs.json +1 -1
  7. package/package.json +1 -1
package/dist/esm/components/mui-grid/index.js CHANGED
@@ -1,5 +1,5 @@
1
- import { getPartMap as r } from "../../utils/part-map/index.js";
2
- class a extends HTMLElement {
1
+ import { getPartMap as o } from "../../utils/part-map/index.js";
2
+ class h extends HTMLElement {
3
3
  static get observedAttributes() {
4
4
  return ["col", "space", "alignx", "aligny", "padding", "height", "width", "viewport", "fill"];
5
5
  }
@@ -8,24 +8,15 @@ class a extends HTMLElement {
8
8
  }
9
9
  async connectedCallback() {
10
10
  await this.waitForPartMap();
11
- const t = this.getAttribute("col") || this.col, i = this.getAttribute("space") || this.space, s = this.getAttribute("alignx") || this.alignX, e = this.getAttribute("aligny") || this.alignY, o = r("layout", "spacing");
11
+ const t = this.getAttribute("col") || this.col, i = this.getAttribute("space") || this.space, s = this.getAttribute("alignx") || this.alignX, e = this.getAttribute("aligny") || this.alignY, r = o("layout", "spacing");
12
12
  this.syncDimensions();
13
- const h = (
13
+ const a = (
14
14
  /*css*/
15
15
  `
16
16
  :host {
17
17
  display: block;
18
- --grid-height: auto;
19
- --grid-width: auto;
20
- height: var(--grid-height);
21
- width: var(--grid-width);
22
- }
23
- :host([fill]) {
24
- --grid-height: 100%;
25
- --grid-width: 100%;
26
- }
27
- :host([viewport]) {
28
- --grid-height: 100dvh;
18
+ height: var(--grid-height, auto);
19
+ width: var(--grid-width, auto);
29
20
  }
30
21
  div {
31
22
  display: grid;
@@ -49,30 +40,30 @@ class a extends HTMLElement {
49
40
  );
50
41
  this.shadowRoot && (this.shadowRoot.innerHTML = /*html*/
51
42
  `
52
- <style>${h}</style>
53
- <div part="${o}" style="--col: ${t}; --gap: ${i}; --padding: ${this.getAttribute("padding") || "var(--space-000)"}; --alignX: ${s}; --alignY: ${e};">
43
+ <style>${a}</style>
44
+ <div part="${r}" style="--col: ${t}; --gap: ${i}; --padding: ${this.getAttribute("padding") || "var(--space-000)"}; --alignX: ${s}; --alignY: ${e};">
54
45
  <slot></slot>
55
46
  </div>
56
47
  `);
57
48
  }
58
49
  attributeChangedCallback(t, i, s) {
59
50
  if (i === s || !this.shadowRoot) return;
60
- (t === "height" || t === "width") && this.syncDimensions();
51
+ (t === "height" || t === "width" || t === "viewport" || t === "fill") && this.syncDimensions();
61
52
  const e = this.shadowRoot.querySelector("div");
62
53
  e && (t === "col" && e.style.setProperty("--col", s || this.col), t === "space" && e.style.setProperty("--gap", s || this.space), t === "padding" && e.style.setProperty("--padding", s || "var(--space-000)"), t === "alignx" && e.style.setProperty("--alignX", s || this.alignX), t === "aligny" && e.style.setProperty("--alignY", s || this.alignY));
63
54
  }
64
55
  syncDimensions() {
65
- const t = this.getAttribute("height"), i = this.getAttribute("width");
66
- t ? this.style.setProperty("--grid-height", t) : this.style.removeProperty("--grid-height"), i ? this.style.setProperty("--grid-width", i) : this.style.removeProperty("--grid-width");
56
+ const t = this.getAttribute("height") || (this.hasAttribute("viewport") ? "100dvh" : this.hasAttribute("fill") ? "100%" : "auto"), i = this.getAttribute("width") || (this.hasAttribute("fill") ? "100%" : "auto");
57
+ this.style.setProperty("--grid-height", t), this.style.setProperty("--grid-width", i);
67
58
  }
68
59
  waitForPartMap() {
69
60
  return new Promise((t) => {
70
- if (typeof r == "function") return t();
61
+ if (typeof o == "function") return t();
71
62
  const i = () => {
72
- typeof r == "function" ? t() : requestAnimationFrame(i);
63
+ typeof o == "function" ? t() : requestAnimationFrame(i);
73
64
  };
74
65
  i();
75
66
  });
76
67
  }
77
68
  }
78
- customElements.get("mui-grid") || customElements.define("mui-grid", a);
69
+ customElements.get("mui-grid") || customElements.define("mui-grid", h);
package/dist/esm/components/mui-stack/hstack/index.js CHANGED
@@ -8,17 +8,8 @@ class h extends HTMLElement {
8
8
  `
9
9
  :host {
10
10
  display: block;
11
- --stack-height: auto;
12
- --stack-width: auto;
13
- height: var(--stack-height);
14
- width: var(--stack-width);
15
- }
16
- :host([fill]) {
17
- --stack-height: 100%;
18
- --stack-width: 100%;
19
- }
20
- :host([viewport]) {
21
- --stack-height: 100dvh;
11
+ height: var(--stack-height, auto);
12
+ width: var(--stack-width, auto);
22
13
  }
23
14
  slot {
24
15
  display: flex;
@@ -60,13 +51,13 @@ class h extends HTMLElement {
60
51
  `;
61
52
  }
62
53
  attributeChangedCallback(t, i, s) {
63
- if (i === s || ((t === "height" || t === "width") && this.syncDimensions(), !this.shadowRoot)) return;
54
+ if (i === s || ((t === "height" || t === "width" || t === "viewport" || t === "fill") && this.syncDimensions(), !this.shadowRoot)) return;
64
55
  const e = this.shadowRoot.querySelector("slot");
65
56
  e && (t === "space" && e.style.setProperty("--space", s || this.space), t === "padding" && e.style.setProperty("--padding", s || "var(--space-000)"), t === "aligny" && e.style.setProperty("--alignY", s || this.alignY), t === "alignx" && e.style.setProperty("--alignX", s || this.alignX));
66
57
  }
67
58
  syncDimensions() {
68
- const t = this.getAttribute("height"), i = this.getAttribute("width");
69
- t ? this.style.setProperty("--stack-height", t) : this.style.removeProperty("--stack-height"), i ? this.style.setProperty("--stack-width", i) : this.style.removeProperty("--stack-width");
59
+ const t = this.getAttribute("height") || (this.hasAttribute("viewport") ? "100dvh" : this.hasAttribute("fill") ? "100%" : "auto"), i = this.getAttribute("width") || (this.hasAttribute("fill") ? "100%" : "auto");
60
+ this.style.setProperty("--stack-height", t), this.style.setProperty("--stack-width", i);
70
61
  }
71
62
  waitForPartMap() {
72
63
  return new Promise((t) => {
package/dist/esm/components/mui-stack/vstack/index.js CHANGED
@@ -8,17 +8,8 @@ class h extends HTMLElement {
8
8
  `
9
9
  :host {
10
10
  display: block;
11
- --stack-height: auto;
12
- --stack-width: auto;
13
- height: var(--stack-height);
14
- width: var(--stack-width);
15
- }
16
- :host([fill]) {
17
- --stack-height: 100%;
18
- --stack-width: 100%;
19
- }
20
- :host([viewport]) {
21
- --stack-height: 100dvh;
11
+ height: var(--stack-height, auto);
12
+ width: var(--stack-width, auto);
22
13
  }
23
14
  slot {
24
15
  display: grid;
@@ -60,13 +51,13 @@ class h extends HTMLElement {
60
51
  `;
61
52
  }
62
53
  attributeChangedCallback(t, i, s) {
63
- if (i === s || ((t === "height" || t === "width") && this.syncDimensions(), !this.shadowRoot)) return;
54
+ if (i === s || ((t === "height" || t === "width" || t === "viewport" || t === "fill") && this.syncDimensions(), !this.shadowRoot)) return;
64
55
  const e = this.shadowRoot.querySelector("slot");
65
56
  e && (t === "space" && e.style.setProperty("--space", s || this.space), t === "padding" && e.style.setProperty("--padding", s || "var(--space-000)"), t === "alignx" && e.style.setProperty("--alignX", s || this.alignX), t === "aligny" && e.style.setProperty("--alignY", s || this.alignY));
66
57
  }
67
58
  syncDimensions() {
68
- const t = this.getAttribute("height"), i = this.getAttribute("width");
69
- t ? this.style.setProperty("--stack-height", t) : this.style.removeProperty("--stack-height"), i ? this.style.setProperty("--stack-width", i) : this.style.removeProperty("--stack-width");
59
+ const t = this.getAttribute("height") || (this.hasAttribute("viewport") ? "100dvh" : this.hasAttribute("fill") ? "100%" : "auto"), i = this.getAttribute("width") || (this.hasAttribute("fill") ? "100%" : "auto");
60
+ this.style.setProperty("--stack-height", t), this.style.setProperty("--stack-width", i);
70
61
  }
71
62
  waitForPartMap() {
72
63
  return new Promise((t) => {
package/dist/esm/css/mui-brand.css CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  /* ================================================================================================== */
3
- /* Don't edit directly • Generated on Tue, 26 May 2026 10:03:11 GMT • muibook.com */
3
+ /* Don't edit directly • Generated on Tue, 26 May 2026 10:59:50 GMT • muibook.com */
4
4
  /* ================================================================================================== */
5
5
 
6
6
  /* ================================================================================================== */