marz-ui 1.0.4 → 1.0.5
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/dist/components/button/index.js +15 -98
- package/dist/components/input/index.js +18 -92
- package/dist/components/sidepanel/index.js +9 -134
- package/dist/index.d.ts +0 -1
- package/dist/index.js +29 -351
- package/dist/styles/style.css +1 -1
- package/package.json +1 -1
|
@@ -1,8 +1,14 @@
|
|
|
1
|
-
|
|
1
|
+
const b = `.marz-button{display:inline-block;cursor:pointer;border:0;border-radius:3em;font-weight:700;line-height:1;font-family:Inter,sans-serif;width:100%;transition:all .1s;box-sizing:border-box}.marz-button--primary{border:var(--accent) 2px solid;background-color:transparent;color:var(--primary-btn-text)}.marz-button--primary:hover{border:var(--accent) 2px solid;background-color:var(--accent);color:var(--primary-btn-text-hover)}.marz-button--secondary{border:var(--secondary) 1px solid;background-color:transparent;color:var(--text)}.marz-button--secondary:hover{border:var(--primary) 1px solid;background-color:var(--bg-element);color:var(--text)}.marz-button--secondary:active{border:var(--primary) 1px solid;background-color:var(--bg-element-2);color:var(--text)}.marz-button--small{padding:10px;font-size:12px;min-width:32px;height:32px}.marz-button--medium{padding:11px 20px;font-size:14px}.marz-button--large{padding:12px 24px;font-size:16px}.marz-button--no-outline{border:none!important}@media only screen and (min-width: 0){.marz-button{max-width:100%}}@media only screen and (min-width: 48em){.marz-button{max-width:300px}}
|
|
2
|
+
`, i = new CSSStyleSheet();
|
|
3
|
+
i.replaceSync(`:host {
|
|
4
|
+
display: inline-block;
|
|
5
|
+
width: 100%;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
${b}`);
|
|
9
|
+
class d extends HTMLElement {
|
|
2
10
|
constructor() {
|
|
3
|
-
super(), this.attachShadow({ mode: "open" }), this.button = document.createElement("button"), this.button.type = "button"
|
|
4
|
-
const t = document.createElement("style");
|
|
5
|
-
t.textContent = this.getStyles(), this.shadowRoot.appendChild(t), this.shadowRoot.appendChild(this.button), this.button.addEventListener("click", () => {
|
|
11
|
+
super(), this.attachShadow({ mode: "open" }), this.button = document.createElement("button"), this.button.type = "button", this.shadowRoot.adoptedStyleSheets = [i], this.shadowRoot.appendChild(this.button), this.button.addEventListener("click", () => {
|
|
6
12
|
this.dispatchEvent(new Event("click", { bubbles: !0, composed: !0 }));
|
|
7
13
|
});
|
|
8
14
|
}
|
|
@@ -16,102 +22,13 @@ class s extends HTMLElement {
|
|
|
16
22
|
e !== r && this.render();
|
|
17
23
|
}
|
|
18
24
|
render() {
|
|
19
|
-
const t = this.hasAttribute("primary"), e = this.getAttribute("size") || "medium", r = this.getAttribute("label") || this.textContent || "",
|
|
25
|
+
const t = this.hasAttribute("primary"), e = this.getAttribute("size") || "medium", r = this.getAttribute("label") || this.textContent || "", n = this.hasAttribute("no-outline"), o = this.getAttribute("background-color"), a = this.hasAttribute("disabled"), s = [
|
|
20
26
|
"marz-button",
|
|
21
27
|
`marz-button--${e}`,
|
|
22
28
|
t ? "marz-button--primary" : "marz-button--secondary",
|
|
23
|
-
|
|
29
|
+
n ? "marz-button--no-outline" : ""
|
|
24
30
|
].filter(Boolean).join(" ");
|
|
25
|
-
this.button.className =
|
|
26
|
-
}
|
|
27
|
-
getStyles() {
|
|
28
|
-
return `
|
|
29
|
-
:host {
|
|
30
|
-
display: inline-block;
|
|
31
|
-
width: 100%;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
.marz-button {
|
|
35
|
-
display: inline-block;
|
|
36
|
-
cursor: pointer;
|
|
37
|
-
border: 0;
|
|
38
|
-
border-radius: 3em;
|
|
39
|
-
font-weight: 700;
|
|
40
|
-
line-height: 1;
|
|
41
|
-
font-family: 'Inter', sans-serif;
|
|
42
|
-
width: 100%;
|
|
43
|
-
transition: all 100ms;
|
|
44
|
-
box-sizing: border-box;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
.marz-button:disabled {
|
|
48
|
-
opacity: 0.5;
|
|
49
|
-
cursor: not-allowed;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
.marz-button--primary {
|
|
53
|
-
border: var(--accent, #f7d706) 1px solid;
|
|
54
|
-
background-color: transparent;
|
|
55
|
-
color: var(--primary-btn-text, #3b3b3b);
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
.marz-button--primary:hover:not(:disabled) {
|
|
59
|
-
border: var(--accent, #f7d706) 1px solid;
|
|
60
|
-
background-color: var(--accent, #f7d706);
|
|
61
|
-
color: var(--primary-btn-text-hover, #3b3b3b);
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
.marz-button--secondary {
|
|
65
|
-
border: var(--secondary, #ababab) 1px solid;
|
|
66
|
-
background-color: transparent;
|
|
67
|
-
color: var(--text, #3b3b3b);
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
.marz-button--secondary:hover:not(:disabled) {
|
|
71
|
-
border: var(--primary, #2b2b2b) 1px solid;
|
|
72
|
-
background-color: var(--bg-element, rgba(0, 0, 0, 0.02));
|
|
73
|
-
color: var(--text, #3b3b3b);
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
.marz-button--secondary:active:not(:disabled) {
|
|
77
|
-
border: var(--primary, #2b2b2b) 1px solid;
|
|
78
|
-
background-color: var(--bg-element-2, rgba(0, 0, 0, 0.04));
|
|
79
|
-
color: var(--text, #3b3b3b);
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
.marz-button--small {
|
|
83
|
-
padding: 10px 10px;
|
|
84
|
-
font-size: 12px;
|
|
85
|
-
min-width: 32px;
|
|
86
|
-
height: 32px;
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
.marz-button--medium {
|
|
90
|
-
padding: 11px 20px;
|
|
91
|
-
font-size: 14px;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
.marz-button--large {
|
|
95
|
-
padding: 12px 24px;
|
|
96
|
-
font-size: 16px;
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
.marz-button--no-outline {
|
|
100
|
-
border: none !important;
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
@media only screen and (min-width: 0) {
|
|
104
|
-
.marz-button {
|
|
105
|
-
max-width: 100%;
|
|
106
|
-
}
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
@media only screen and (min-width: 48em) {
|
|
110
|
-
.marz-button {
|
|
111
|
-
max-width: 300px;
|
|
112
|
-
}
|
|
113
|
-
}
|
|
114
|
-
`;
|
|
31
|
+
this.button.className = s, this.button.textContent = r, this.button.disabled = a, o ? this.button.style.backgroundColor = o : this.button.style.backgroundColor = "";
|
|
115
32
|
}
|
|
116
33
|
// Public API for programmatic control
|
|
117
34
|
get primary() {
|
|
@@ -139,7 +56,7 @@ class s extends HTMLElement {
|
|
|
139
56
|
t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
|
|
140
57
|
}
|
|
141
58
|
}
|
|
142
|
-
customElements.get("marz-button") || customElements.define("marz-button",
|
|
59
|
+
customElements.get("marz-button") || customElements.define("marz-button", d);
|
|
143
60
|
export {
|
|
144
|
-
|
|
61
|
+
d as MarzButton
|
|
145
62
|
};
|
|
@@ -1,11 +1,18 @@
|
|
|
1
|
+
const o = `.marz-input-wrapper{display:flex;flex-direction:column;gap:12px;width:100%}.marz-input-label{font-weight:600;font-size:14px;color:var(--text, #3b3b3b);font-family:Inter,sans-serif}.marz-input{display:inline-block;cursor:text;border:0;border-radius:.5em;font-weight:500;line-height:1.5;width:100%;transition:all .1s;background-color:var(--bg-element, rgba(0, 0, 0, .02));color:var(--text, #3b3b3b);border:var(--secondary, #ababab) 1px solid;outline:none;box-sizing:border-box;font-family:Inter,sans-serif;resize:vertical;padding:12px;font-size:14px}textarea.marz-input{min-height:80px}.marz-input:disabled{opacity:.5;cursor:not-allowed}.marz-input:focus,.marz-input:active,.marz-input:hover:not(:disabled){border:var(--primary, #2b2b2b) 1px solid}
|
|
2
|
+
`, n = new CSSStyleSheet();
|
|
3
|
+
n.replaceSync(`:host {
|
|
4
|
+
display: block;
|
|
5
|
+
width: 100%;
|
|
6
|
+
margin-bottom: var(--form-element-gap, 20px);
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
${o}`);
|
|
1
10
|
class h extends HTMLElement {
|
|
2
11
|
constructor() {
|
|
3
|
-
super(), this.attachShadow({ mode: "open" }), this.wrapper = document.createElement("div"), this.wrapper.className = "marz-input-wrapper", this.labelElement = document.createElement("label"), this.labelElement.className = "marz-input-label", this.input = this.hasAttribute("multiline") ? document.createElement("textarea") : document.createElement("input");
|
|
4
|
-
const t = document.createElement("style");
|
|
5
|
-
t.textContent = this.getStyles(), this.wrapper.appendChild(this.labelElement), this.wrapper.appendChild(this.input), this.shadowRoot.appendChild(t), this.shadowRoot.appendChild(this.wrapper), this.setupEventListeners();
|
|
12
|
+
super(), this.attachShadow({ mode: "open" }), this.wrapper = document.createElement("div"), this.wrapper.className = "marz-input-wrapper", this.labelElement = document.createElement("label"), this.labelElement.className = "marz-input-label", this.input = this.hasAttribute("multiline") ? document.createElement("textarea") : document.createElement("input"), this.shadowRoot.adoptedStyleSheets = [n], this.wrapper.appendChild(this.labelElement), this.wrapper.appendChild(this.input), this.shadowRoot.appendChild(this.wrapper), this.setupEventListeners();
|
|
6
13
|
}
|
|
7
14
|
static get observedAttributes() {
|
|
8
|
-
return ["
|
|
15
|
+
return ["label", "placeholder", "value", "disabled", "type", "multiline", "rows"];
|
|
9
16
|
}
|
|
10
17
|
setupEventListeners() {
|
|
11
18
|
this.input.addEventListener("input", () => {
|
|
@@ -24,99 +31,18 @@ class h extends HTMLElement {
|
|
|
24
31
|
connectedCallback() {
|
|
25
32
|
this.render();
|
|
26
33
|
}
|
|
27
|
-
attributeChangedCallback(t,
|
|
28
|
-
|
|
34
|
+
attributeChangedCallback(t, i, e) {
|
|
35
|
+
i !== e && this.render();
|
|
29
36
|
}
|
|
30
37
|
render() {
|
|
31
|
-
const t = this.getAttribute("
|
|
32
|
-
if (
|
|
33
|
-
const
|
|
34
|
-
this.input =
|
|
38
|
+
const t = this.getAttribute("label") || "", i = this.getAttribute("placeholder") || "", e = this.getAttribute("value") || "", a = this.hasAttribute("disabled"), r = this.getAttribute("type") || "text", s = this.hasAttribute("multiline"), l = parseInt(this.getAttribute("rows") || "3"), u = this.input instanceof HTMLTextAreaElement;
|
|
39
|
+
if (s !== u) {
|
|
40
|
+
const p = this.input;
|
|
41
|
+
this.input = s ? document.createElement("textarea") : document.createElement("input"), this.wrapper.replaceChild(this.input, p), this.setupEventListeners();
|
|
35
42
|
}
|
|
36
|
-
|
|
37
|
-
"marz-input",
|
|
38
|
-
`marz-input--${t}`
|
|
39
|
-
].join(" ");
|
|
40
|
-
this.input.className = p, this.input.placeholder = i, this.input.disabled = r, this.input instanceof HTMLInputElement ? this.input.type = a : this.input instanceof HTMLTextAreaElement && (this.input.rows = l), this.input.value !== s && (this.input.value = s), this.labelElement.textContent = e, this.labelElement.style.display = e ? "block" : "none";
|
|
41
|
-
}
|
|
42
|
-
getStyles() {
|
|
43
|
-
return `
|
|
44
|
-
:host {
|
|
45
|
-
display: block;
|
|
46
|
-
width: 100%;
|
|
47
|
-
margin-bottom: var(--form-element-gap, 20px);
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
.marz-input-wrapper {
|
|
51
|
-
display: flex;
|
|
52
|
-
flex-direction: column;
|
|
53
|
-
gap: 12px;
|
|
54
|
-
width: 100%;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
.marz-input-label {
|
|
58
|
-
font-weight: 600;
|
|
59
|
-
font-size: 14px;
|
|
60
|
-
color: var(--text, #3b3b3b);
|
|
61
|
-
font-family: 'Inter', sans-serif;
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
.marz-input {
|
|
65
|
-
display: inline-block;
|
|
66
|
-
cursor: text;
|
|
67
|
-
border: 0;
|
|
68
|
-
border-radius: 1em;
|
|
69
|
-
font-weight: 500;
|
|
70
|
-
line-height: 1.5;
|
|
71
|
-
width: 100%;
|
|
72
|
-
transition: all 100ms;
|
|
73
|
-
background-color: var(--bg-element, rgba(0, 0, 0, 0.02));
|
|
74
|
-
color: var(--text, #3b3b3b);
|
|
75
|
-
border: var(--secondary, #ababab) 1px solid;
|
|
76
|
-
outline: none;
|
|
77
|
-
box-sizing: border-box;
|
|
78
|
-
font-family: 'Inter', sans-serif;
|
|
79
|
-
resize: vertical;
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
textarea.marz-input {
|
|
83
|
-
min-height: 80px;
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
.marz-input:disabled {
|
|
87
|
-
opacity: 0.5;
|
|
88
|
-
cursor: not-allowed;
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
.marz-input:focus,
|
|
92
|
-
.marz-input:active,
|
|
93
|
-
.marz-input:hover:not(:disabled) {
|
|
94
|
-
border: var(--primary, #2b2b2b) 1px solid;
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
.marz-input--small {
|
|
98
|
-
padding: 10px 8px;
|
|
99
|
-
font-size: 12px;
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
.marz-input--medium {
|
|
103
|
-
padding: 12px 12px;
|
|
104
|
-
font-size: 14px;
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
.marz-input--large {
|
|
108
|
-
padding: 16px 8px;
|
|
109
|
-
font-size: 16px;
|
|
110
|
-
}
|
|
111
|
-
`;
|
|
43
|
+
this.input.className = "marz-input", this.input.placeholder = i, this.input.disabled = a, this.input instanceof HTMLInputElement ? this.input.type = r : this.input instanceof HTMLTextAreaElement && (this.input.rows = l), this.input.value !== e && (this.input.value = e), this.labelElement.textContent = t, this.labelElement.style.display = t ? "block" : "none";
|
|
112
44
|
}
|
|
113
45
|
// Public API for programmatic control
|
|
114
|
-
get size() {
|
|
115
|
-
return this.getAttribute("size") || "medium";
|
|
116
|
-
}
|
|
117
|
-
set size(t) {
|
|
118
|
-
this.setAttribute("size", t);
|
|
119
|
-
}
|
|
120
46
|
get label() {
|
|
121
47
|
return this.getAttribute("label") || "";
|
|
122
48
|
}
|
|
@@ -1,12 +1,13 @@
|
|
|
1
|
-
|
|
1
|
+
const s = `.marz-sidepanel-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(var(--primary-rgb),.1);z-index:1000;display:flex;justify-content:flex-end;align-items:stretch;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.marz-sidepanel{width:90%;max-width:600px;height:100%;background-color:var(--bg);border-left:1px solid var(--bg-element-2);display:flex;flex-direction:column;animation:marz-slideIn .3s ease-out;overflow-y:auto;box-shadow:-4px 0 12px #0000001a}.marz-sidepanel-header{display:flex;justify-content:space-between;align-items:center;padding:var(--safe-padding);border-bottom:1px solid var(--bg-element-2);flex-shrink:0}.marz-sidepanel-header h2{margin:0;color:var(--heading)}.marz-sidepanel-content{flex:1;padding:var(--safe-padding);display:flex;flex-direction:column;gap:var(--small-padding)}.marz-sidepanel-actions{display:flex;gap:var(--small-padding);margin-top:var(--safe-padding);justify-content:flex-end}@keyframes marz-slideIn{0%{transform:translate(100%)}to{transform:translate(0)}}@media only screen and (max-width: 48em){.marz-sidepanel{width:90%}.marz-sidepanel-actions{flex-direction:column}}@media only screen and (min-width: 48em){.marz-sidepanel{max-width:600px}}
|
|
2
|
+
`, n = new CSSStyleSheet();
|
|
3
|
+
n.replaceSync(s);
|
|
4
|
+
class a extends HTMLElement {
|
|
2
5
|
constructor() {
|
|
3
6
|
super(), this.attachShadow({ mode: "open" }), this.overlay = document.createElement("div"), this.overlay.className = "marz-sidepanel-overlay", this.overlay.style.display = "none", this.panel = document.createElement("div"), this.panel.className = "marz-sidepanel", this.header = document.createElement("div"), this.header.className = "marz-sidepanel-header", this.titleElement = document.createElement("h2"), this.titleElement.textContent = "Settings", this.closeButton = document.createElement("button"), this.closeButton.className = "marz-sidepanel-close", this.closeButton.textContent = "✕", this.closeButton.setAttribute("aria-label", "Close"), this.header.appendChild(this.titleElement), this.header.appendChild(this.closeButton);
|
|
4
7
|
const e = document.createElement("div");
|
|
5
8
|
e.className = "marz-sidepanel-content", this.contentSlot = document.createElement("slot"), this.contentSlot.name = "content", e.appendChild(this.contentSlot);
|
|
6
9
|
const t = document.createElement("div");
|
|
7
|
-
t.className = "marz-sidepanel-actions", this.actionsSlot = document.createElement("slot"), this.actionsSlot.name = "actions", t.appendChild(this.actionsSlot), e.appendChild(t), this.panel.appendChild(this.header), this.panel.appendChild(e), this.overlay.appendChild(this.panel)
|
|
8
|
-
const a = document.createElement("style");
|
|
9
|
-
a.textContent = this.getStyles(), this.shadowRoot.appendChild(a), this.shadowRoot.appendChild(this.overlay), this.closeButton.addEventListener("click", () => this.close()), this.overlay.addEventListener("click", (i) => {
|
|
10
|
+
t.className = "marz-sidepanel-actions", this.actionsSlot = document.createElement("slot"), this.actionsSlot.name = "actions", t.appendChild(this.actionsSlot), e.appendChild(t), this.panel.appendChild(this.header), this.panel.appendChild(e), this.overlay.appendChild(this.panel), this.shadowRoot.adoptedStyleSheets = [n], this.shadowRoot.appendChild(this.overlay), this.closeButton.addEventListener("click", () => this.close()), this.overlay.addEventListener("click", (i) => {
|
|
10
11
|
i.target === this.overlay && this.close();
|
|
11
12
|
}), document.addEventListener("keydown", (i) => {
|
|
12
13
|
i.key === "Escape" && this.isOpen && this.close();
|
|
@@ -18,139 +19,13 @@ class n extends HTMLElement {
|
|
|
18
19
|
connectedCallback() {
|
|
19
20
|
this.render();
|
|
20
21
|
}
|
|
21
|
-
attributeChangedCallback(e, t,
|
|
22
|
-
t !==
|
|
22
|
+
attributeChangedCallback(e, t, i) {
|
|
23
|
+
t !== i && this.render();
|
|
23
24
|
}
|
|
24
25
|
render() {
|
|
25
26
|
const e = this.hasAttribute("is-open"), t = this.getAttribute("title") || "Settings";
|
|
26
27
|
this.titleElement.textContent = t, this.overlay.style.display = e ? "flex" : "none", e ? document.body.style.overflow = "hidden" : document.body.style.overflow = "";
|
|
27
28
|
}
|
|
28
|
-
getStyles() {
|
|
29
|
-
return `
|
|
30
|
-
:host {
|
|
31
|
-
display: block;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
.marz-sidepanel-overlay {
|
|
35
|
-
position: fixed;
|
|
36
|
-
top: 0;
|
|
37
|
-
left: 0;
|
|
38
|
-
width: 100%;
|
|
39
|
-
height: 100%;
|
|
40
|
-
background-color: rgba(var(--primary-rgb, 43, 43, 43), 0.1);
|
|
41
|
-
z-index: 1000;
|
|
42
|
-
display: flex;
|
|
43
|
-
justify-content: flex-end;
|
|
44
|
-
align-items: stretch;
|
|
45
|
-
backdrop-filter: blur(2px);
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
.marz-sidepanel {
|
|
49
|
-
width: 90%;
|
|
50
|
-
max-width: 600px;
|
|
51
|
-
height: 100%;
|
|
52
|
-
background-color: var(--bg, #f9fbfd);
|
|
53
|
-
border-left: 1px solid var(--bg-element-2, rgba(0, 0, 0, 0.04));
|
|
54
|
-
display: flex;
|
|
55
|
-
flex-direction: column;
|
|
56
|
-
animation: marz-slideIn 0.3s ease-out;
|
|
57
|
-
overflow-y: auto;
|
|
58
|
-
box-shadow: -4px 0 12px rgba(0, 0, 0, 0.1);
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
.marz-sidepanel-header {
|
|
62
|
-
display: flex;
|
|
63
|
-
justify-content: space-between;
|
|
64
|
-
align-items: center;
|
|
65
|
-
padding: var(--safe-padding, 16px);
|
|
66
|
-
border-bottom: 1px solid var(--bg-element-2, rgba(0, 0, 0, 0.04));
|
|
67
|
-
flex-shrink: 0;
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
.marz-sidepanel-header h2 {
|
|
71
|
-
margin: 0;
|
|
72
|
-
color: var(--heading, #11324a);
|
|
73
|
-
font-family: 'Inter', sans-serif;
|
|
74
|
-
font-size: 32px;
|
|
75
|
-
font-weight: 800;
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
.marz-sidepanel-close {
|
|
79
|
-
display: inline-block;
|
|
80
|
-
cursor: pointer;
|
|
81
|
-
border: 0;
|
|
82
|
-
border-radius: 3em;
|
|
83
|
-
font-weight: 700;
|
|
84
|
-
line-height: 1;
|
|
85
|
-
font-family: 'Inter', sans-serif;
|
|
86
|
-
transition: all 100ms;
|
|
87
|
-
box-sizing: border-box;
|
|
88
|
-
padding: 10px 10px;
|
|
89
|
-
font-size: 12px;
|
|
90
|
-
min-width: 32px;
|
|
91
|
-
height: 32px;
|
|
92
|
-
border: var(--secondary, #ababab) 1px solid;
|
|
93
|
-
background-color: transparent;
|
|
94
|
-
color: var(--text, #3b3b3b);
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
.marz-sidepanel-close:hover {
|
|
98
|
-
border: var(--primary, #2b2b2b) 1px solid;
|
|
99
|
-
background-color: var(--bg-element, rgba(0, 0, 0, 0.02));
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
.marz-sidepanel-close:active {
|
|
103
|
-
border: var(--primary, #2b2b2b) 1px solid;
|
|
104
|
-
background-color: var(--bg-element-2, rgba(0, 0, 0, 0.04));
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
.marz-sidepanel-content {
|
|
108
|
-
flex: 1;
|
|
109
|
-
padding: var(--safe-padding, 16px);
|
|
110
|
-
display: flex;
|
|
111
|
-
flex-direction: column;
|
|
112
|
-
gap: var(--small-padding, 12px);
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
.marz-sidepanel-actions {
|
|
116
|
-
display: flex;
|
|
117
|
-
gap: var(--small-padding, 12px);
|
|
118
|
-
margin-top: var(--safe-padding, 16px);
|
|
119
|
-
justify-content: flex-end;
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
::slotted(*) {
|
|
123
|
-
margin-bottom: var(--small-padding, 12px);
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
@keyframes marz-slideIn {
|
|
127
|
-
from {
|
|
128
|
-
transform: translateX(100%);
|
|
129
|
-
}
|
|
130
|
-
to {
|
|
131
|
-
transform: translateX(0);
|
|
132
|
-
}
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
/* Mobile adjustments */
|
|
136
|
-
@media only screen and (max-width: 48em) {
|
|
137
|
-
.marz-sidepanel {
|
|
138
|
-
width: 90%;
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
.marz-sidepanel-actions {
|
|
142
|
-
flex-direction: column;
|
|
143
|
-
}
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
/* Desktop adjustments */
|
|
147
|
-
@media only screen and (min-width: 48em) {
|
|
148
|
-
.marz-sidepanel {
|
|
149
|
-
max-width: 600px;
|
|
150
|
-
}
|
|
151
|
-
}
|
|
152
|
-
`;
|
|
153
|
-
}
|
|
154
29
|
// Public API
|
|
155
30
|
get isOpen() {
|
|
156
31
|
return this.hasAttribute("is-open");
|
|
@@ -175,7 +50,7 @@ class n extends HTMLElement {
|
|
|
175
50
|
}));
|
|
176
51
|
}
|
|
177
52
|
}
|
|
178
|
-
customElements.get("marz-sidepanel") || customElements.define("marz-sidepanel",
|
|
53
|
+
customElements.get("marz-sidepanel") || customElements.define("marz-sidepanel", a);
|
|
179
54
|
export {
|
|
180
|
-
|
|
55
|
+
a as MarzSidepanel
|
|
181
56
|
};
|
package/dist/index.d.ts
CHANGED
|
@@ -11,7 +11,6 @@ export declare class MarzSidepanel extends HTMLElement {
|
|
|
11
11
|
connectedCallback(): void;
|
|
12
12
|
attributeChangedCallback(_name: string, oldValue: string | null, newValue: string | null): void;
|
|
13
13
|
private render;
|
|
14
|
-
private getStyles;
|
|
15
14
|
get isOpen(): boolean;
|
|
16
15
|
set isOpen(value: boolean);
|
|
17
16
|
get title(): string;
|