@muibook/components 18.0.1 → 18.1.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.
- package/README.md +2 -0
- package/dist/esm/components/mui-button/index.js +1 -5
- package/dist/esm/components/mui-dropdown/index.js +8 -8
- package/dist/esm/components/mui-prompt/index.js +5 -7
- package/dist/esm/components/mui-slide-frame/index.js +1 -1
- package/dist/esm/css/mui-brand.css +1 -1
- package/dist/esm/custom-elements.json +565 -565
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
# NPM Package 📦 – @muibook/components
|
|
4
4
|
|
|
5
|
+
[](https://github.com/sponsors/michaeltrilford)
|
|
6
|
+
|
|
5
7
|
Leverage reusable vanilla Web Components built with the Mui (MichaelUI) Design System in your project. Simply install the [@muibook/components](https://www.npmjs.com/package/@muibook/components?activeTab=readme) package to access a framework-agnostic, accessible, and customizable component library.
|
|
6
8
|
|
|
7
9
|
## Usage Policy (Summary)
|
|
@@ -379,11 +379,7 @@ class h extends HTMLElement {
|
|
|
379
379
|
/* Dropdown Slot */
|
|
380
380
|
:host([size][dropdown-slot]) button {
|
|
381
381
|
border-radius: var(--radius-000);
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
:host([dropdown-slot]) button:hover,
|
|
385
|
-
:host([dropdown-slot]) button:focus {
|
|
386
|
-
background: var(--dropdown-button-background-hover);
|
|
382
|
+
white-space: nowrap;
|
|
387
383
|
}
|
|
388
384
|
|
|
389
385
|
:host([size][dropdown-slot-first]) button {
|
|
@@ -43,13 +43,13 @@ const s = class s extends HTMLElement {
|
|
|
43
43
|
const d = (a = this.shadowRoot) == null ? void 0 : a.querySelector("slot:not([name])");
|
|
44
44
|
if (d) {
|
|
45
45
|
const u = () => {
|
|
46
|
-
const c = d.assignedElements({ flatten: !0 });
|
|
46
|
+
const c = d.assignedElements({ flatten: !0 }).filter((o) => o.tagName.toLowerCase() === "mui-button");
|
|
47
47
|
c.forEach((o) => {
|
|
48
48
|
o.removeAttribute("dropdown-slot"), o.removeAttribute("dropdown-slot-first"), o.removeAttribute("dropdown-slot-last");
|
|
49
49
|
}), c.forEach((o, w) => {
|
|
50
|
-
o.setAttribute("variant", "tertiary"), o.setAttribute("dropdown-slot", ""), w === 0 && o.setAttribute("dropdown-slot-first", ""), w === c.length - 1 && o.setAttribute("dropdown-slot-last", ""), o._dropdownListenerAdded || (o.addEventListener("click", () => {
|
|
51
|
-
var
|
|
52
|
-
this.persistent || ((
|
|
50
|
+
o.hasAttribute("variant") || o.setAttribute("variant", "tertiary"), o.setAttribute("dropdown-slot", ""), w === 0 && o.setAttribute("dropdown-slot-first", ""), w === c.length - 1 && o.setAttribute("dropdown-slot-last", ""), o._dropdownListenerAdded || (o.addEventListener("click", () => {
|
|
51
|
+
var p, f;
|
|
52
|
+
this.persistent || ((p = this.menu) == null || p.classList.remove("show"), (f = this.menu) == null || f.setAttribute("inert", "true"), s.openDropdown === this && (s.openDropdown = null), this.dispatchEvent(new CustomEvent("dropdown-toggle", { detail: { open: !1 }, bubbles: !0 })));
|
|
53
53
|
}), o._dropdownListenerAdded = !0);
|
|
54
54
|
});
|
|
55
55
|
};
|
|
@@ -85,9 +85,9 @@ const s = class s extends HTMLElement {
|
|
|
85
85
|
if (!this.menu) return;
|
|
86
86
|
const t = this.menu, e = 8, n = getComputedStyle(this).getPropertyValue("--dropdown-offset").trim() || "0.8rem", d = parseFloat(getComputedStyle(document.documentElement).fontSize) || 10, i = n.endsWith("rem") ? parseFloat(n) * d : parseFloat(n) || 8;
|
|
87
87
|
t.style.top = "", t.style.bottom = "", t.style.left = "", t.style.right = "", t.style.maxWidth = "";
|
|
88
|
-
const r = this.getBoundingClientRect(), l = t.offsetWidth, a = t.offsetHeight, h = window.innerWidth, u = window.innerHeight,
|
|
88
|
+
const r = this.getBoundingClientRect(), l = t.offsetWidth, a = t.offsetHeight, h = window.innerWidth, u = window.innerHeight, v = (this.getAttribute("vertical-position") || "auto").toLowerCase(), c = u - r.bottom, o = r.top, w = a + i, p = c >= w, f = o >= w;
|
|
89
89
|
let b = r.height + i;
|
|
90
|
-
|
|
90
|
+
v === "up" ? b = f || !p ? -(a + i) : r.height + i : v === "down" ? b = p || !f ? r.height + i : -(a + i) : !p && o > c && (b = -(a + i));
|
|
91
91
|
let m = 0;
|
|
92
92
|
switch (this.getAttribute("position") || "left") {
|
|
93
93
|
case "left":
|
|
@@ -169,5 +169,5 @@ const s = class s extends HTMLElement {
|
|
|
169
169
|
}
|
|
170
170
|
};
|
|
171
171
|
s.openDropdown = null;
|
|
172
|
-
let
|
|
173
|
-
customElements.get("mui-dropdown") || customElements.define("mui-dropdown",
|
|
172
|
+
let g = s;
|
|
173
|
+
customElements.get("mui-dropdown") || customElements.define("mui-dropdown", g);
|
|
@@ -794,9 +794,9 @@ class S extends HTMLElement {
|
|
|
794
794
|
.surface::before {
|
|
795
795
|
content: "";
|
|
796
796
|
position: absolute;
|
|
797
|
-
inset:
|
|
797
|
+
inset: 0;
|
|
798
798
|
pointer-events: none;
|
|
799
|
-
border-radius:
|
|
799
|
+
border-radius: var(--radius-300);
|
|
800
800
|
z-index: 1;
|
|
801
801
|
opacity: 1;
|
|
802
802
|
background: var(--surface-elevated-100);
|
|
@@ -839,7 +839,7 @@ class S extends HTMLElement {
|
|
|
839
839
|
transition: opacity var(--speed-200) cubic-bezier(0.22, 1, 0.36, 1), filter var(--speed-200) ease;
|
|
840
840
|
}
|
|
841
841
|
.surface:hover {
|
|
842
|
-
overflow:
|
|
842
|
+
overflow: visible;
|
|
843
843
|
background: var(--surface-elevated-100);
|
|
844
844
|
animation: promptBorderHoverPulse var(--prompt-hover-border-pulse-speed, var(--speed-500)) ease-in-out infinite;
|
|
845
845
|
}
|
|
@@ -873,9 +873,7 @@ class S extends HTMLElement {
|
|
|
873
873
|
var(--surface-elevated-100);
|
|
874
874
|
mix-blend-mode: var(--_prompt-spectrum-blend-mode-hover);
|
|
875
875
|
filter: none;
|
|
876
|
-
animation:
|
|
877
|
-
promptMeshHoverPulse var(--prompt-hover-sweep-speed, var(--speed-500)) ease-in-out infinite alternate,
|
|
878
|
-
promptMeshPulse calc(var(--prompt-hover-sweep-speed, var(--speed-500)) * 1.15) ease-in-out infinite;
|
|
876
|
+
animation: promptMeshPulse calc(var(--prompt-hover-sweep-speed, var(--speed-500)) * 1.15) ease-in-out infinite;
|
|
879
877
|
}
|
|
880
878
|
.surface:hover::after {
|
|
881
879
|
opacity: 0;
|
|
@@ -1246,7 +1244,7 @@ class S extends HTMLElement {
|
|
|
1246
1244
|
}
|
|
1247
1245
|
.actions-slot {
|
|
1248
1246
|
position: absolute;
|
|
1249
|
-
z-index:
|
|
1247
|
+
z-index: 4;
|
|
1250
1248
|
bottom: var(--space-300);
|
|
1251
1249
|
display: inline-flex;
|
|
1252
1250
|
align-items: center;
|
|
@@ -453,7 +453,7 @@ class E extends HTMLElement {
|
|
|
453
453
|
id="slideFrameRatioSelect"
|
|
454
454
|
size="x-small"
|
|
455
455
|
style="width: 7rem; margin-right: var(--space-025)"
|
|
456
|
-
options='[{"label":"16:9","value":"16:9"},{"label":"4:3","value":"4:3"},{"label":"1:1","value":"1:1"}]'
|
|
456
|
+
options='[{"label":"16:9","value":"16:9"},{"label":"4:3","value":"4:3"},{"label":"3:2","value":"3:2"},{"label":"1:1","value":"1:1"},{"label":"9:16","value":"9:16"}]'
|
|
457
457
|
value="${this.getAttribute("ratio") || "16:9"}"
|
|
458
458
|
aria-label="Slide ratio">
|
|
459
459
|
</mui-select>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
/* ================================================================================================== */
|
|
3
|
-
/* Don't edit directly • Generated on
|
|
3
|
+
/* Don't edit directly • Generated on Thu, 19 Mar 2026 13:50:01 GMT • muibook.com */
|
|
4
4
|
/* ================================================================================================== */
|
|
5
5
|
|
|
6
6
|
/* ================================================================================================== */
|