@waggylabs/yumekit 0.2.6 → 0.3.0

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 (9) hide show
  1. package/dist/components/y-dialog.d.ts +3 -0
  2. package/dist/components/y-dialog.js +33 -4
  3. package/dist/components/y-theme.d.ts +1 -1
  4. package/dist/components/y-theme.js +7 -9
  5. package/dist/icons/all.js +1 -1
  6. package/dist/index.js +41 -14
  7. package/dist/yumekit.min.js +1 -1
  8. package/llm.txt +607 -0
  9. package/package.json +3 -2
package/dist/components/y-dialog.d.ts CHANGED
@@ -19,6 +19,9 @@ declare class YumeDialog extends HTMLElement {
19
19
  set animate(val: boolean);
20
20
  /** Whether the dialog uses an entrance animation. */
21
21
  get animate(): boolean;
22
+ set position(val: string);
23
+ /** Screen position of the dialog. One of: center (default), top-left, top-center, top-right, left, right, bottom-left, bottom-center, bottom-right. */
24
+ get position(): string;
22
25
  /** Opens the dialog and focuses it. */
23
26
  show(): void;
24
27
  /** Closes the dialog. */
package/dist/components/y-dialog.js CHANGED
@@ -1,6 +1,6 @@
1
1
  class YumeDialog extends HTMLElement {
2
2
  static get observedAttributes() {
3
- return ["visible", "anchor", "closable", "show-backdrop", "animate"];
3
+ return ["visible", "anchor", "closable", "show-backdrop", "animate", "position"];
4
4
  }
5
5
 
6
6
  constructor() {
@@ -75,6 +75,14 @@ class YumeDialog extends HTMLElement {
75
75
  else this.removeAttribute("animate");
76
76
  }
77
77
 
78
+ /** Screen position of the dialog. One of: center (default), top-left, top-center, top-right, left, right, bottom-left, bottom-center, bottom-right. */
79
+ get position() {
80
+ return this.getAttribute("position") || "center";
81
+ }
82
+ set position(val) {
83
+ this.setAttribute("position", val);
84
+ }
85
+
78
86
  /** Opens the dialog and focuses it. */
79
87
  show() {
80
88
  if (!this.shadowRoot.querySelector(".dialog")) {
@@ -127,14 +135,32 @@ class YumeDialog extends HTMLElement {
127
135
  align-items: center;
128
136
  justify-content: center;
129
137
  z-index: var(--component-dialog-z-index, 1000);
138
+ padding: var(--component-dialog-offset, 16px);
139
+ box-sizing: border-box;
140
+ }
141
+ :host([visible]) {
142
+ display: flex;
143
+ pointer-events: none;
144
+ }
145
+ :host([visible]) .dialog {
146
+ pointer-events: auto;
130
147
  }
131
- :host([visible]) { display: flex; }
132
- :host([show-backdrop]) {
148
+ :host([visible][show-backdrop]) {
149
+ pointer-events: auto;
133
150
  background: rgba(0,0,0,0.5);
134
151
  backdrop-filter: blur(var(--component-dialog-backdrop-blur, 4px));
135
152
  -webkit-backdrop-filter: blur(var(--component-dialog-backdrop-blur, 4px));
136
153
  }
137
154
 
155
+ :host([position="top-left"]) { align-items: flex-start; justify-content: flex-start; }
156
+ :host([position="top-center"]) { align-items: flex-start; justify-content: center; }
157
+ :host([position="top-right"]) { align-items: flex-start; justify-content: flex-end; }
158
+ :host([position="left"]) { align-items: center; justify-content: flex-start; }
159
+ :host([position="right"]) { align-items: center; justify-content: flex-end; }
160
+ :host([position="bottom-left"]) { align-items: flex-end; justify-content: flex-start; }
161
+ :host([position="bottom-center"]) { align-items: flex-end; justify-content: center; }
162
+ :host([position="bottom-right"]) { align-items: flex-end; justify-content: flex-end; }
163
+
138
164
  @keyframes dialog-fade-in {
139
165
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
140
166
  to { opacity: 1; transform: translateY(0) scale(1); }
@@ -173,7 +199,10 @@ class YumeDialog extends HTMLElement {
173
199
  .footer {
174
200
  padding: var(--component-dialog-padding, var(--spacing-medium));
175
201
  border-top: var(--component-dialog-inner-border-width, 1px) solid var(--component-dialog-border-color);
176
- text-align: right;
202
+ display: flex;
203
+ flex-wrap: wrap;
204
+ justify-content: flex-end;
205
+ gap: var(--component-dialog-footer-gap, var(--spacing-small, 8px));
177
206
  }
178
207
 
179
208
  ::slotted(*) {
package/dist/components/y-theme.d.ts CHANGED
@@ -6,7 +6,7 @@ export class YumeTheme extends HTMLElement {
6
6
  /** Whether cross-origin theme-path URLs are allowed. */
7
7
  get crossOrigin(): boolean;
8
8
  _applyTheme(): Promise<void>;
9
- /** Resolves theme CSS from either a remote path or the built-in theme map. */
9
+ /** Resolves theme CSS from either a built-in theme name or a remote URL/path. */
10
10
  _resolveThemeCSS(): Promise<any>;
11
11
  /** Rebuilds the shadow DOM with base variables, optional theme styles, and a slot. */
12
12
  _buildShadowDOM(themeCSS: any): void;
package/dist/components/y-theme.js CHANGED
@@ -17,7 +17,7 @@ const THEMES = {
17
17
 
18
18
  class YumeTheme extends HTMLElement {
19
19
  static get observedAttributes() {
20
- return ["theme", "mode", "theme-path", "cross-origin"];
20
+ return ["theme", "cross-origin"];
21
21
  }
22
22
 
23
23
  constructor() {
@@ -52,18 +52,16 @@ class YumeTheme extends HTMLElement {
52
52
  this.applyVariablesToHost(variablesCSS + themeCSS);
53
53
  }
54
54
 
55
- /** Resolves theme CSS from either a remote path or the built-in theme map. */
55
+ /** Resolves theme CSS from either a built-in theme name or a remote URL/path. */
56
56
  async _resolveThemeCSS() {
57
- const themePath = this.getAttribute("theme-path");
57
+ const theme = this.getAttribute("theme") || "blue-light";
58
58
 
59
- if (!themePath) {
60
- const theme = this.getAttribute("theme") || "blue";
61
- const mode = this.getAttribute("mode") || "light";
62
- return THEMES[`${theme}-${mode}`] || "";
59
+ if (THEMES[theme]) {
60
+ return THEMES[theme];
63
61
  }
64
62
 
65
63
  try {
66
- const url = new URL(themePath, document.baseURI);
64
+ const url = new URL(theme, document.baseURI);
67
65
  if (!this.crossOrigin && url.origin !== window.location.origin) {
68
66
  console.error(
69
67
  `Blocked cross-origin theme load from ${url.origin}. ` +
@@ -74,7 +72,7 @@ class YumeTheme extends HTMLElement {
74
72
  const response = await fetch(url.href);
75
73
  return await response.text();
76
74
  } catch (e) {
77
- console.error(`Failed to load theme from ${themePath}:`, e);
75
+ console.error(`Failed to load theme from ${theme}:`, e);
78
76
  return "";
79
77
  }
80
78
  }
package/dist/icons/all.js CHANGED
@@ -18,7 +18,7 @@ var bolt = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill
18
18
 
19
19
  var calendar = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"/>\n <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"/>\n <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"/>\n <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"/>\n <rect x=\"7\" y=\"14\" width=\"3\" height=\"3\" rx=\"0.5\"/>\n <rect x=\"14\" y=\"14\" width=\"3\" height=\"3\" rx=\"0.5\"/>\n</svg>\n";
20
20
 
21
- var campfire = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M3 21L15 18\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M21 21L9 18\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12.4787 16.9985C12.4787 16.9985 9.64692 16.9985 8.02964 15.1923C6.41236 13.386 6.8164 10.225 8.43406 7.51565C10.0517 4.80626 12.8819 3 12.8819 3C12.8819 3 12.0729 5.25782 11.6686 7.06408C11.2643 8.87034 12.0742 9.32191 12.0742 9.32191C12.0742 9.32191 12.8825 9.77347 14.0955 8.41878C15.3085 7.06408 15.3085 6.16095 15.3085 6.16095C15.3085 6.16095 18.0166 13.2656 16.5796 15.1923C15.1427 17.1189 12.4787 16.9985 12.4787 16.9985Z\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M11.6436 16.9995C11.6436 16.9995 10.7941 16.9995 10.3089 16.3544C9.82371 15.7093 9.94492 14.5804 10.4302 13.6127C10.9155 12.6451 11.7646 12 11.7646 12C11.7646 12 11.5219 12.8064 11.4006 13.4515C11.2793 14.0966 11.5223 14.2578 11.5223 14.2578C11.5223 14.2578 11.7648 14.4191 12.1287 13.9353C12.4926 13.4515 12.4926 13.1289 12.4926 13.1289C12.4926 13.1289 13.305 15.6663 12.8739 16.3544C12.4428 17.0425 11.6436 16.9995 11.6436 16.9995Z\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n";
21
+ var campfire = "<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M3 21L15 18\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M21 21L9 18\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12.4787 16.9985C12.4787 16.9985 9.64692 16.9985 8.02964 15.1923C6.41236 13.386 6.8164 10.225 8.43406 7.51565C10.0517 4.80626 12.8819 3 12.8819 3C12.8819 3 12.0729 5.25782 11.6686 7.06408C11.2643 8.87034 12.0742 9.32191 12.0742 9.32191C12.0742 9.32191 12.8825 9.77347 14.0955 8.41878C15.3085 7.06408 15.3085 6.16095 15.3085 6.16095C15.3085 6.16095 18.0166 13.2656 16.5796 15.1923C15.1427 17.1189 12.4787 16.9985 12.4787 16.9985Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M11.6436 16.9995C11.6436 16.9995 10.7941 16.9995 10.3089 16.3544C9.82371 15.7093 9.94492 14.5804 10.4302 13.6127C10.9155 12.6451 11.7646 12 11.7646 12C11.7646 12 11.5219 12.8064 11.4006 13.4515C11.2793 14.0966 11.5223 14.2578 11.5223 14.2578C11.5223 14.2578 11.7648 14.4191 12.1287 13.9353C12.4926 13.4515 12.4926 13.1289 12.4926 13.1289C12.4926 13.1289 13.305 15.6663 12.8739 16.3544C12.4428 17.0425 11.6436 16.9995 11.6436 16.9995Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n";
22
22
 
23
23
  var chart = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polyline points=\"22 12 18 12 15 21 9 3 6 12 2 12\"/>\n</svg>\n";
24
24
 
package/dist/index.js CHANGED
@@ -47,7 +47,7 @@ var bolt = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill
47
47
 
48
48
  var calendar = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"/>\n <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"/>\n <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"/>\n <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"/>\n <rect x=\"7\" y=\"14\" width=\"3\" height=\"3\" rx=\"0.5\"/>\n <rect x=\"14\" y=\"14\" width=\"3\" height=\"3\" rx=\"0.5\"/>\n</svg>\n";
49
49
 
50
- var campfire = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M3 21L15 18\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M21 21L9 18\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12.4787 16.9985C12.4787 16.9985 9.64692 16.9985 8.02964 15.1923C6.41236 13.386 6.8164 10.225 8.43406 7.51565C10.0517 4.80626 12.8819 3 12.8819 3C12.8819 3 12.0729 5.25782 11.6686 7.06408C11.2643 8.87034 12.0742 9.32191 12.0742 9.32191C12.0742 9.32191 12.8825 9.77347 14.0955 8.41878C15.3085 7.06408 15.3085 6.16095 15.3085 6.16095C15.3085 6.16095 18.0166 13.2656 16.5796 15.1923C15.1427 17.1189 12.4787 16.9985 12.4787 16.9985Z\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M11.6436 16.9995C11.6436 16.9995 10.7941 16.9995 10.3089 16.3544C9.82371 15.7093 9.94492 14.5804 10.4302 13.6127C10.9155 12.6451 11.7646 12 11.7646 12C11.7646 12 11.5219 12.8064 11.4006 13.4515C11.2793 14.0966 11.5223 14.2578 11.5223 14.2578C11.5223 14.2578 11.7648 14.4191 12.1287 13.9353C12.4926 13.4515 12.4926 13.1289 12.4926 13.1289C12.4926 13.1289 13.305 15.6663 12.8739 16.3544C12.4428 17.0425 11.6436 16.9995 11.6436 16.9995Z\" stroke=\"black\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n";
50
+ var campfire = "<svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M3 21L15 18\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M21 21L9 18\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M12.4787 16.9985C12.4787 16.9985 9.64692 16.9985 8.02964 15.1923C6.41236 13.386 6.8164 10.225 8.43406 7.51565C10.0517 4.80626 12.8819 3 12.8819 3C12.8819 3 12.0729 5.25782 11.6686 7.06408C11.2643 8.87034 12.0742 9.32191 12.0742 9.32191C12.0742 9.32191 12.8825 9.77347 14.0955 8.41878C15.3085 7.06408 15.3085 6.16095 15.3085 6.16095C15.3085 6.16095 18.0166 13.2656 16.5796 15.1923C15.1427 17.1189 12.4787 16.9985 12.4787 16.9985Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M11.6436 16.9995C11.6436 16.9995 10.7941 16.9995 10.3089 16.3544C9.82371 15.7093 9.94492 14.5804 10.4302 13.6127C10.9155 12.6451 11.7646 12 11.7646 12C11.7646 12 11.5219 12.8064 11.4006 13.4515C11.2793 14.0966 11.5223 14.2578 11.5223 14.2578C11.5223 14.2578 11.7648 14.4191 12.1287 13.9353C12.4926 13.4515 12.4926 13.1289 12.4926 13.1289C12.4926 13.1289 13.305 15.6663 12.8739 16.3544C12.4428 17.0425 11.6436 16.9995 11.6436 16.9995Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n";
51
51
 
52
52
  var chart = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <polyline points=\"22 12 18 12 15 21 9 3 6 12 2 12\"/>\n</svg>\n";
53
53
 
@@ -3042,7 +3042,7 @@ if (!customElements.get("y-checkbox")) {
3042
3042
 
3043
3043
  class YumeDialog extends HTMLElement {
3044
3044
  static get observedAttributes() {
3045
- return ["visible", "anchor", "closable", "show-backdrop", "animate"];
3045
+ return ["visible", "anchor", "closable", "show-backdrop", "animate", "position"];
3046
3046
  }
3047
3047
 
3048
3048
  constructor() {
@@ -3117,6 +3117,14 @@ class YumeDialog extends HTMLElement {
3117
3117
  else this.removeAttribute("animate");
3118
3118
  }
3119
3119
 
3120
+ /** Screen position of the dialog. One of: center (default), top-left, top-center, top-right, left, right, bottom-left, bottom-center, bottom-right. */
3121
+ get position() {
3122
+ return this.getAttribute("position") || "center";
3123
+ }
3124
+ set position(val) {
3125
+ this.setAttribute("position", val);
3126
+ }
3127
+
3120
3128
  /** Opens the dialog and focuses it. */
3121
3129
  show() {
3122
3130
  if (!this.shadowRoot.querySelector(".dialog")) {
@@ -3169,14 +3177,32 @@ class YumeDialog extends HTMLElement {
3169
3177
  align-items: center;
3170
3178
  justify-content: center;
3171
3179
  z-index: var(--component-dialog-z-index, 1000);
3180
+ padding: var(--component-dialog-offset, 16px);
3181
+ box-sizing: border-box;
3172
3182
  }
3173
- :host([visible]) { display: flex; }
3174
- :host([show-backdrop]) {
3183
+ :host([visible]) {
3184
+ display: flex;
3185
+ pointer-events: none;
3186
+ }
3187
+ :host([visible]) .dialog {
3188
+ pointer-events: auto;
3189
+ }
3190
+ :host([visible][show-backdrop]) {
3191
+ pointer-events: auto;
3175
3192
  background: rgba(0,0,0,0.5);
3176
3193
  backdrop-filter: blur(var(--component-dialog-backdrop-blur, 4px));
3177
3194
  -webkit-backdrop-filter: blur(var(--component-dialog-backdrop-blur, 4px));
3178
3195
  }
3179
3196
 
3197
+ :host([position="top-left"]) { align-items: flex-start; justify-content: flex-start; }
3198
+ :host([position="top-center"]) { align-items: flex-start; justify-content: center; }
3199
+ :host([position="top-right"]) { align-items: flex-start; justify-content: flex-end; }
3200
+ :host([position="left"]) { align-items: center; justify-content: flex-start; }
3201
+ :host([position="right"]) { align-items: center; justify-content: flex-end; }
3202
+ :host([position="bottom-left"]) { align-items: flex-end; justify-content: flex-start; }
3203
+ :host([position="bottom-center"]) { align-items: flex-end; justify-content: center; }
3204
+ :host([position="bottom-right"]) { align-items: flex-end; justify-content: flex-end; }
3205
+
3180
3206
  @keyframes dialog-fade-in {
3181
3207
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
3182
3208
  to { opacity: 1; transform: translateY(0) scale(1); }
@@ -3215,7 +3241,10 @@ class YumeDialog extends HTMLElement {
3215
3241
  .footer {
3216
3242
  padding: var(--component-dialog-padding, var(--spacing-medium));
3217
3243
  border-top: var(--component-dialog-inner-border-width, 1px) solid var(--component-dialog-border-color);
3218
- text-align: right;
3244
+ display: flex;
3245
+ flex-wrap: wrap;
3246
+ justify-content: flex-end;
3247
+ gap: var(--component-dialog-footer-gap, var(--spacing-small, 8px));
3219
3248
  }
3220
3249
 
3221
3250
  ::slotted(*) {
@@ -7536,7 +7565,7 @@ const THEMES = {
7536
7565
 
7537
7566
  class YumeTheme extends HTMLElement {
7538
7567
  static get observedAttributes() {
7539
- return ["theme", "mode", "theme-path", "cross-origin"];
7568
+ return ["theme", "cross-origin"];
7540
7569
  }
7541
7570
 
7542
7571
  constructor() {
@@ -7571,18 +7600,16 @@ class YumeTheme extends HTMLElement {
7571
7600
  this.applyVariablesToHost(variablesCSS + themeCSS);
7572
7601
  }
7573
7602
 
7574
- /** Resolves theme CSS from either a remote path or the built-in theme map. */
7603
+ /** Resolves theme CSS from either a built-in theme name or a remote URL/path. */
7575
7604
  async _resolveThemeCSS() {
7576
- const themePath = this.getAttribute("theme-path");
7605
+ const theme = this.getAttribute("theme") || "blue-light";
7577
7606
 
7578
- if (!themePath) {
7579
- const theme = this.getAttribute("theme") || "blue";
7580
- const mode = this.getAttribute("mode") || "light";
7581
- return THEMES[`${theme}-${mode}`] || "";
7607
+ if (THEMES[theme]) {
7608
+ return THEMES[theme];
7582
7609
  }
7583
7610
 
7584
7611
  try {
7585
- const url = new URL(themePath, document.baseURI);
7612
+ const url = new URL(theme, document.baseURI);
7586
7613
  if (!this.crossOrigin && url.origin !== window.location.origin) {
7587
7614
  console.error(
7588
7615
  `Blocked cross-origin theme load from ${url.origin}. ` +
@@ -7593,7 +7620,7 @@ class YumeTheme extends HTMLElement {
7593
7620
  const response = await fetch(url.href);
7594
7621
  return await response.text();
7595
7622
  } catch (e) {
7596
- console.error(`Failed to load theme from ${themePath}:`, e);
7623
+ console.error(`Failed to load theme from ${theme}:`, e);
7597
7624
  return "";
7598
7625
  }
7599
7626
  }