@studious-creative/yumekit 0.1.11 → 0.1.12

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 (8) hide show
  1. package/dist/components/y-appbar.js +2 -1
  2. package/dist/components/y-input.js +8 -0
  3. package/dist/components/y-select.js +23 -1
  4. package/dist/components/y-theme.d.ts +1 -0
  5. package/dist/components/y-theme.js +17 -0
  6. package/dist/index.js +50 -2
  7. package/dist/yumekit.min.js +1 -1
  8. package/package.json +1 -1
package/dist/components/y-appbar.js CHANGED
@@ -1414,7 +1414,7 @@ class YumeAppbar extends HTMLElement {
1414
1414
 
1415
1415
  .appbar.vertical .appbar-header {
1416
1416
  border-bottom: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
1417
- padding: var(--_appbar-padding);
1417
+ padding: var(--_appbar-padding) 0;
1418
1418
  margin-bottom: var(--_appbar-padding);
1419
1419
  }
1420
1420
  .appbar.vertical .appbar-footer {
@@ -1426,6 +1426,7 @@ class YumeAppbar extends HTMLElement {
1426
1426
  .appbar.horizontal .appbar-header {
1427
1427
  border-right: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
1428
1428
  padding: var(--_appbar-padding);
1429
+ padding-right: var(--spacing-x-large, 16px);
1429
1430
  margin-right: var(--_appbar-padding);
1430
1431
  }
1431
1432
  .appbar.horizontal .appbar-footer {
package/dist/components/y-input.js CHANGED
@@ -94,6 +94,13 @@ class YumeInput extends HTMLElement {
94
94
  large: "--component-inputs-padding-large",
95
95
  }[size];
96
96
 
97
+ const minHeightVar =
98
+ {
99
+ small: "var(--sizing-small, 32px)",
100
+ medium: "var(--sizing-medium, 40px)",
101
+ large: "var(--sizing-large, 56px)",
102
+ }[size] || "var(--sizing-medium, 40px)";
103
+
97
104
  const sheet = new CSSStyleSheet();
98
105
  sheet.replaceSync(`
99
106
  :host {
@@ -119,6 +126,7 @@ class YumeInput extends HTMLElement {
119
126
  border: var(--component-inputs-border-width) solid var(--component-input-border-color);
120
127
  border-radius: var(--component-inputs-border-radius-outer);
121
128
  padding: var(${paddingVar});
129
+ min-height: ${minHeightVar};
122
130
  box-sizing: border-box;
123
131
  transition: border-color 0.2s ease-in-out;
124
132
  }
package/dist/components/y-select.js CHANGED
@@ -25,6 +25,7 @@ class YumeSelect extends HTMLElement {
25
25
  "options",
26
26
  "display-mode",
27
27
  "close-on-click-outside",
28
+ "size",
28
29
  ];
29
30
  }
30
31
 
@@ -74,6 +75,7 @@ class YumeSelect extends HTMLElement {
74
75
  "required",
75
76
  "placeholder",
76
77
  "options",
78
+ "size",
77
79
  ].includes(name)
78
80
  ) {
79
81
  this.render();
@@ -257,6 +259,7 @@ class YumeSelect extends HTMLElement {
257
259
  selected.forEach((opt) => {
258
260
  const tag = document.createElement("y-tag");
259
261
  tag.setAttribute("removable", "");
262
+ tag.setAttribute("size", "small");
260
263
  tag.setAttribute("color", "primary");
261
264
  tag.setAttribute("style-type", "filled");
262
265
  tag.textContent = opt.label;
@@ -336,6 +339,21 @@ class YumeSelect extends HTMLElement {
336
339
 
337
340
  applyStyles() {
338
341
  const isDisabled = this.hasAttribute("disabled");
342
+ const size = this.getAttribute("size") || "medium";
343
+
344
+ const paddingVar =
345
+ {
346
+ small: "--component-inputs-padding-small",
347
+ medium: "--component-inputs-padding-medium",
348
+ large: "--component-inputs-padding-large",
349
+ }[size] || "--component-inputs-padding-medium";
350
+
351
+ const minHeightVar =
352
+ {
353
+ small: "var(--sizing-small, 32px)",
354
+ medium: "var(--sizing-medium, 40px)",
355
+ large: "var(--sizing-large, 56px)",
356
+ }[size] || "var(--sizing-medium, 40px)";
339
357
 
340
358
  const sheet = new CSSStyleSheet();
341
359
  sheet.replaceSync(`
@@ -361,7 +379,8 @@ class YumeSelect extends HTMLElement {
361
379
  background: var(--component-select-background);
362
380
  border: var(--component-inputs-border-width) solid var(--component-select-border-color);
363
381
  border-radius: var(--component-inputs-border-radius-outer);
364
- padding: var(--component-inputs-padding-medium);
382
+ padding: var(${paddingVar});
383
+ min-height: ${minHeightVar};
365
384
  box-sizing: border-box;
366
385
  transition: border-color 0.2s ease-in-out;
367
386
  cursor: pointer;
@@ -433,7 +452,10 @@ class YumeSelect extends HTMLElement {
433
452
  font-size: 1em;
434
453
  color: inherit;
435
454
  display: flex;
455
+ flex-wrap: wrap;
456
+ align-items: center;
436
457
  gap: var(--spacing-x-small);
458
+ min-height: var(--component-tag-height-small, 22px);
437
459
  }
438
460
 
439
461
  .label-wrapper {
package/dist/components/y-theme.d.ts CHANGED
@@ -6,4 +6,5 @@ export class YumeTheme extends HTMLElement {
6
6
  applyVariablesToHost(cssText: any): void;
7
7
  _themeProps: any[];
8
8
  clearThemeProperties(): void;
9
+ _injectPageStyles(): void;
9
10
  }
package/dist/components/y-theme.js CHANGED
@@ -27,6 +27,7 @@ class YumeTheme extends HTMLElement {
27
27
  }
28
28
 
29
29
  connectedCallback() {
30
+ this._injectPageStyles();
30
31
  this._applyTheme();
31
32
  }
32
33
 
@@ -89,6 +90,22 @@ class YumeTheme extends HTMLElement {
89
90
  }
90
91
  this._themeProps = [];
91
92
  }
93
+
94
+ _injectPageStyles() {
95
+ if (document.querySelector("[data-yumekit-page-styles]")) return;
96
+ const style = document.createElement("style");
97
+ style.setAttribute("data-yumekit-page-styles", "");
98
+ style.textContent = `
99
+ html, body {
100
+ margin: 0;
101
+ padding: 0;
102
+ font-family: var(--font-family-header, "Lexend", sans-serif);
103
+ color: var(--base-content--, #000);
104
+ font-weight: 300;
105
+ }
106
+ `;
107
+ document.head.appendChild(style);
108
+ }
92
109
  }
93
110
 
94
111
  if (!customElements.get("y-theme")) {
package/dist/index.js CHANGED
@@ -1694,7 +1694,7 @@ class YumeAppbar extends HTMLElement {
1694
1694
 
1695
1695
  .appbar.vertical .appbar-header {
1696
1696
  border-bottom: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
1697
- padding: var(--_appbar-padding);
1697
+ padding: var(--_appbar-padding) 0;
1698
1698
  margin-bottom: var(--_appbar-padding);
1699
1699
  }
1700
1700
  .appbar.vertical .appbar-footer {
@@ -1706,6 +1706,7 @@ class YumeAppbar extends HTMLElement {
1706
1706
  .appbar.horizontal .appbar-header {
1707
1707
  border-right: var(--component-appbar-inner-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
1708
1708
  padding: var(--_appbar-padding);
1709
+ padding-right: var(--spacing-x-large, 16px);
1709
1710
  margin-right: var(--_appbar-padding);
1710
1711
  }
1711
1712
  .appbar.horizontal .appbar-footer {
@@ -3437,6 +3438,13 @@ class YumeInput extends HTMLElement {
3437
3438
  large: "--component-inputs-padding-large",
3438
3439
  }[size];
3439
3440
 
3441
+ const minHeightVar =
3442
+ {
3443
+ small: "var(--sizing-small, 32px)",
3444
+ medium: "var(--sizing-medium, 40px)",
3445
+ large: "var(--sizing-large, 56px)",
3446
+ }[size] || "var(--sizing-medium, 40px)";
3447
+
3440
3448
  const sheet = new CSSStyleSheet();
3441
3449
  sheet.replaceSync(`
3442
3450
  :host {
@@ -3462,6 +3470,7 @@ class YumeInput extends HTMLElement {
3462
3470
  border: var(--component-inputs-border-width) solid var(--component-input-border-color);
3463
3471
  border-radius: var(--component-inputs-border-radius-outer);
3464
3472
  padding: var(${paddingVar});
3473
+ min-height: ${minHeightVar};
3465
3474
  box-sizing: border-box;
3466
3475
  transition: border-color 0.2s ease-in-out;
3467
3476
  }
@@ -4463,6 +4472,7 @@ class YumeSelect extends HTMLElement {
4463
4472
  "options",
4464
4473
  "display-mode",
4465
4474
  "close-on-click-outside",
4475
+ "size",
4466
4476
  ];
4467
4477
  }
4468
4478
 
@@ -4512,6 +4522,7 @@ class YumeSelect extends HTMLElement {
4512
4522
  "required",
4513
4523
  "placeholder",
4514
4524
  "options",
4525
+ "size",
4515
4526
  ].includes(name)
4516
4527
  ) {
4517
4528
  this.render();
@@ -4695,6 +4706,7 @@ class YumeSelect extends HTMLElement {
4695
4706
  selected.forEach((opt) => {
4696
4707
  const tag = document.createElement("y-tag");
4697
4708
  tag.setAttribute("removable", "");
4709
+ tag.setAttribute("size", "small");
4698
4710
  tag.setAttribute("color", "primary");
4699
4711
  tag.setAttribute("style-type", "filled");
4700
4712
  tag.textContent = opt.label;
@@ -4774,6 +4786,21 @@ class YumeSelect extends HTMLElement {
4774
4786
 
4775
4787
  applyStyles() {
4776
4788
  const isDisabled = this.hasAttribute("disabled");
4789
+ const size = this.getAttribute("size") || "medium";
4790
+
4791
+ const paddingVar =
4792
+ {
4793
+ small: "--component-inputs-padding-small",
4794
+ medium: "--component-inputs-padding-medium",
4795
+ large: "--component-inputs-padding-large",
4796
+ }[size] || "--component-inputs-padding-medium";
4797
+
4798
+ const minHeightVar =
4799
+ {
4800
+ small: "var(--sizing-small, 32px)",
4801
+ medium: "var(--sizing-medium, 40px)",
4802
+ large: "var(--sizing-large, 56px)",
4803
+ }[size] || "var(--sizing-medium, 40px)";
4777
4804
 
4778
4805
  const sheet = new CSSStyleSheet();
4779
4806
  sheet.replaceSync(`
@@ -4799,7 +4826,8 @@ class YumeSelect extends HTMLElement {
4799
4826
  background: var(--component-select-background);
4800
4827
  border: var(--component-inputs-border-width) solid var(--component-select-border-color);
4801
4828
  border-radius: var(--component-inputs-border-radius-outer);
4802
- padding: var(--component-inputs-padding-medium);
4829
+ padding: var(${paddingVar});
4830
+ min-height: ${minHeightVar};
4803
4831
  box-sizing: border-box;
4804
4832
  transition: border-color 0.2s ease-in-out;
4805
4833
  cursor: pointer;
@@ -4871,7 +4899,10 @@ class YumeSelect extends HTMLElement {
4871
4899
  font-size: 1em;
4872
4900
  color: inherit;
4873
4901
  display: flex;
4902
+ flex-wrap: wrap;
4903
+ align-items: center;
4874
4904
  gap: var(--spacing-x-small);
4905
+ min-height: var(--component-tag-height-small, 22px);
4875
4906
  }
4876
4907
 
4877
4908
  .label-wrapper {
@@ -6966,6 +6997,7 @@ class YumeTheme extends HTMLElement {
6966
6997
  }
6967
6998
 
6968
6999
  connectedCallback() {
7000
+ this._injectPageStyles();
6969
7001
  this._applyTheme();
6970
7002
  }
6971
7003
 
@@ -7028,6 +7060,22 @@ class YumeTheme extends HTMLElement {
7028
7060
  }
7029
7061
  this._themeProps = [];
7030
7062
  }
7063
+
7064
+ _injectPageStyles() {
7065
+ if (document.querySelector("[data-yumekit-page-styles]")) return;
7066
+ const style = document.createElement("style");
7067
+ style.setAttribute("data-yumekit-page-styles", "");
7068
+ style.textContent = `
7069
+ html, body {
7070
+ margin: 0;
7071
+ padding: 0;
7072
+ font-family: var(--font-family-header, "Lexend", sans-serif);
7073
+ color: var(--base-content--, #000);
7074
+ font-weight: 300;
7075
+ }
7076
+ `;
7077
+ document.head.appendChild(style);
7078
+ }
7031
7079
  }
7032
7080
 
7033
7081
  if (!customElements.get("y-theme")) {