@waggylabs/yumekit 0.4.3-beta.43 → 0.4.3-beta.45

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 (6) hide show
  1. package/dist/components/y-stack/y-stack.d.ts +5 -3
  2. package/dist/components/y-stack.d.ts +5 -3
  3. package/dist/components/y-stack.js +34 -45
  4. package/dist/index.js +34 -45
  5. package/dist/yumekit.min.js +1 -1
  6. package/package.json +1 -1
package/dist/components/y-stack/y-stack.d.ts CHANGED
@@ -27,15 +27,17 @@ export class YumeStack extends HTMLElement {
27
27
  /** Main-axis distribution (flex mode only). */
28
28
  get justify(): string;
29
29
  set responsive(val: boolean);
30
- /** Auto-reduce columns at narrow viewports. */
30
+ /**
31
+ * Auto-reduce columns at narrow container widths. Defaults to `true`;
32
+ * set `responsive="false"` to disable.
33
+ */
31
34
  get responsive(): boolean;
32
35
  render(): void;
33
36
  _container: Element;
34
37
  _slot: HTMLSlotElement;
35
38
  _applyLayout(): void;
36
39
  _buildStyleSheet(): CSSStyleSheet;
37
- _buildResponsiveFlexCSS(): string;
38
- _buildResponsiveGridCSS(cols: any): string;
40
+ _buildResponsiveGridTemplate(cols: any, gapValue: any): string;
39
41
  _clearMasonryPositions(): void;
40
42
  _getBreakpointValue(prop: any, fallback: any): any;
41
43
  _getResolvedColumns(): any;
package/dist/components/y-stack.d.ts CHANGED
@@ -27,15 +27,17 @@ export class YumeStack extends HTMLElement {
27
27
  /** Main-axis distribution (flex mode only). */
28
28
  get justify(): string;
29
29
  set responsive(val: boolean);
30
- /** Auto-reduce columns at narrow viewports. */
30
+ /**
31
+ * Auto-reduce columns at narrow container widths. Defaults to `true`;
32
+ * set `responsive="false"` to disable.
33
+ */
31
34
  get responsive(): boolean;
32
35
  render(): void;
33
36
  _container: Element;
34
37
  _slot: HTMLSlotElement;
35
38
  _applyLayout(): void;
36
39
  _buildStyleSheet(): CSSStyleSheet;
37
- _buildResponsiveFlexCSS(): string;
38
- _buildResponsiveGridCSS(cols: any): string;
40
+ _buildResponsiveGridTemplate(cols: any, gapValue: any): string;
39
41
  _clearMasonryPositions(): void;
40
42
  _getBreakpointValue(prop: any, fallback: any): any;
41
43
  _getResolvedColumns(): any;
package/dist/components/y-stack.js CHANGED
@@ -110,13 +110,19 @@ class YumeStack extends HTMLElement {
110
110
  this.setAttribute("justify", val);
111
111
  }
112
112
 
113
- /** Auto-reduce columns at narrow viewports. */
113
+ /**
114
+ * Auto-reduce columns at narrow container widths. Defaults to `true`;
115
+ * set `responsive="false"` to disable.
116
+ */
114
117
  get responsive() {
115
- return this.hasAttribute("responsive");
118
+ return this.getAttribute("responsive") !== "false";
116
119
  }
117
120
  set responsive(val) {
118
- if (val) this.setAttribute("responsive", "");
119
- else this.removeAttribute("responsive");
121
+ if (val === false || val === "false") {
122
+ this.setAttribute("responsive", "false");
123
+ } else {
124
+ this.removeAttribute("responsive");
125
+ }
120
126
  }
121
127
 
122
128
  // -------------------------------------------------------------------------
@@ -156,19 +162,19 @@ class YumeStack extends HTMLElement {
156
162
  const responsive = this.responsive;
157
163
 
158
164
  let containerCSS;
159
- let responsiveCSS = "";
165
+ let slottedCSS = "";
160
166
 
161
167
  if (mode === "grid") {
168
+ const columnsTemplate = responsive
169
+ ? this._buildResponsiveGridTemplate(cols, gapValue)
170
+ : `repeat(var(--component-stack-columns, ${cols}), 1fr)`;
162
171
  containerCSS = `
163
172
  .container {
164
173
  display: grid;
165
- grid-template-columns: repeat(var(--component-stack-columns, ${cols}), 1fr);
174
+ grid-template-columns: ${columnsTemplate};
166
175
  gap: ${gapValue};
167
176
  }
168
177
  `;
169
- if (responsive) {
170
- responsiveCSS = this._buildResponsiveGridCSS(cols);
171
- }
172
178
  } else if (mode === "masonry") {
173
179
  containerCSS = `
174
180
  .container {
@@ -177,6 +183,7 @@ class YumeStack extends HTMLElement {
177
183
  `;
178
184
  } else {
179
185
  const dir = this.direction;
186
+ const wrap = this.wrap || (responsive && dir === "row");
180
187
  const alignMap = {
181
188
  start: "flex-start",
182
189
  end: "flex-end",
@@ -197,14 +204,15 @@ class YumeStack extends HTMLElement {
197
204
  .container {
198
205
  display: flex;
199
206
  flex-direction: ${dir};
200
- flex-wrap: ${this.wrap ? "wrap" : "nowrap"};
207
+ flex-wrap: ${wrap ? "wrap" : "nowrap"};
201
208
  align-items: ${alignMap[this.align] || "stretch"};
202
209
  justify-content: ${justifyMap[this.justify] || "flex-start"};
203
210
  gap: ${gapValue};
204
211
  }
205
212
  `;
206
- if (responsive && dir === "row") {
207
- responsiveCSS = this._buildResponsiveFlexCSS();
213
+
214
+ if (wrap) {
215
+ slottedCSS = `::slotted(*) { flex-shrink: 0; }`;
208
216
  }
209
217
  }
210
218
 
@@ -214,35 +222,16 @@ class YumeStack extends HTMLElement {
214
222
  box-sizing: border-box;
215
223
  }
216
224
  ${containerCSS}
217
- ${responsiveCSS}
225
+ ${slottedCSS}
218
226
  `);
219
227
  return sheet;
220
228
  }
221
229
 
222
- _buildResponsiveFlexCSS() {
223
- return `
224
- @media (max-width: var(--component-stack-mobile-breakpoint, 576px)) {
225
- .container {
226
- flex-direction: column;
227
- }
228
- }
229
- `;
230
- }
231
-
232
- _buildResponsiveGridCSS(cols) {
233
- const tabletCols = Math.min(2, cols);
234
- return `
235
- @media (max-width: var(--component-stack-tablet-breakpoint, 768px)) {
236
- .container {
237
- grid-template-columns: repeat(${tabletCols}, 1fr);
238
- }
239
- }
240
- @media (max-width: var(--component-stack-mobile-breakpoint, 576px)) {
241
- .container {
242
- grid-template-columns: 1fr;
243
- }
244
- }
245
- `;
230
+ _buildResponsiveGridTemplate(cols, gapValue) {
231
+ const minWidth = `var(--component-stack-min-item-width, 240px)`;
232
+ const evenShare = `calc((100% - ${cols - 1} * ${gapValue}) / ${cols})`;
233
+ const itemMin = `min(100%, max(${minWidth}, ${evenShare}))`;
234
+ return `repeat(auto-fit, minmax(${itemMin}, 1fr))`;
246
235
  }
247
236
 
248
237
  _clearMasonryPositions() {
@@ -343,14 +332,14 @@ class YumeStack extends HTMLElement {
343
332
 
344
333
  _resolveGap() {
345
334
  const gapMap = {
346
- none: "var(--spacing-none)",
347
- "x-small": "var(--spacing-x-small)",
348
- small: "var(--spacing-small)",
349
- medium: "var(--spacing-medium)",
350
- large: "var(--spacing-large)",
351
- "x-large": "var(--spacing-x-large)",
352
- "2x-large": "var(--spacing-2x-large)",
353
- "4x-large": "var(--spacing-4x-large)",
335
+ none: "var(--spacing-none, 0px)",
336
+ "x-small": "var(--spacing-x-small, 4px)",
337
+ small: "var(--spacing-small, 6px)",
338
+ medium: "var(--spacing-medium, 8px)",
339
+ large: "var(--spacing-large, 12px)",
340
+ "x-large": "var(--spacing-x-large, 16px)",
341
+ "2x-large": "var(--spacing-2x-large, 24px)",
342
+ "4x-large": "var(--spacing-4x-large, 32px)",
354
343
  };
355
344
  return `var(--component-stack-gap, ${gapMap[this.gap] || gapMap.medium})`;
356
345
  }
package/dist/index.js CHANGED
@@ -13432,13 +13432,19 @@ class YumeStack extends HTMLElement {
13432
13432
  this.setAttribute("justify", val);
13433
13433
  }
13434
13434
 
13435
- /** Auto-reduce columns at narrow viewports. */
13435
+ /**
13436
+ * Auto-reduce columns at narrow container widths. Defaults to `true`;
13437
+ * set `responsive="false"` to disable.
13438
+ */
13436
13439
  get responsive() {
13437
- return this.hasAttribute("responsive");
13440
+ return this.getAttribute("responsive") !== "false";
13438
13441
  }
13439
13442
  set responsive(val) {
13440
- if (val) this.setAttribute("responsive", "");
13441
- else this.removeAttribute("responsive");
13443
+ if (val === false || val === "false") {
13444
+ this.setAttribute("responsive", "false");
13445
+ } else {
13446
+ this.removeAttribute("responsive");
13447
+ }
13442
13448
  }
13443
13449
 
13444
13450
  // -------------------------------------------------------------------------
@@ -13478,19 +13484,19 @@ class YumeStack extends HTMLElement {
13478
13484
  const responsive = this.responsive;
13479
13485
 
13480
13486
  let containerCSS;
13481
- let responsiveCSS = "";
13487
+ let slottedCSS = "";
13482
13488
 
13483
13489
  if (mode === "grid") {
13490
+ const columnsTemplate = responsive
13491
+ ? this._buildResponsiveGridTemplate(cols, gapValue)
13492
+ : `repeat(var(--component-stack-columns, ${cols}), 1fr)`;
13484
13493
  containerCSS = `
13485
13494
  .container {
13486
13495
  display: grid;
13487
- grid-template-columns: repeat(var(--component-stack-columns, ${cols}), 1fr);
13496
+ grid-template-columns: ${columnsTemplate};
13488
13497
  gap: ${gapValue};
13489
13498
  }
13490
13499
  `;
13491
- if (responsive) {
13492
- responsiveCSS = this._buildResponsiveGridCSS(cols);
13493
- }
13494
13500
  } else if (mode === "masonry") {
13495
13501
  containerCSS = `
13496
13502
  .container {
@@ -13499,6 +13505,7 @@ class YumeStack extends HTMLElement {
13499
13505
  `;
13500
13506
  } else {
13501
13507
  const dir = this.direction;
13508
+ const wrap = this.wrap || (responsive && dir === "row");
13502
13509
  const alignMap = {
13503
13510
  start: "flex-start",
13504
13511
  end: "flex-end",
@@ -13519,14 +13526,15 @@ class YumeStack extends HTMLElement {
13519
13526
  .container {
13520
13527
  display: flex;
13521
13528
  flex-direction: ${dir};
13522
- flex-wrap: ${this.wrap ? "wrap" : "nowrap"};
13529
+ flex-wrap: ${wrap ? "wrap" : "nowrap"};
13523
13530
  align-items: ${alignMap[this.align] || "stretch"};
13524
13531
  justify-content: ${justifyMap[this.justify] || "flex-start"};
13525
13532
  gap: ${gapValue};
13526
13533
  }
13527
13534
  `;
13528
- if (responsive && dir === "row") {
13529
- responsiveCSS = this._buildResponsiveFlexCSS();
13535
+
13536
+ if (wrap) {
13537
+ slottedCSS = `::slotted(*) { flex-shrink: 0; }`;
13530
13538
  }
13531
13539
  }
13532
13540
 
@@ -13536,35 +13544,16 @@ class YumeStack extends HTMLElement {
13536
13544
  box-sizing: border-box;
13537
13545
  }
13538
13546
  ${containerCSS}
13539
- ${responsiveCSS}
13547
+ ${slottedCSS}
13540
13548
  `);
13541
13549
  return sheet;
13542
13550
  }
13543
13551
 
13544
- _buildResponsiveFlexCSS() {
13545
- return `
13546
- @media (max-width: var(--component-stack-mobile-breakpoint, 576px)) {
13547
- .container {
13548
- flex-direction: column;
13549
- }
13550
- }
13551
- `;
13552
- }
13553
-
13554
- _buildResponsiveGridCSS(cols) {
13555
- const tabletCols = Math.min(2, cols);
13556
- return `
13557
- @media (max-width: var(--component-stack-tablet-breakpoint, 768px)) {
13558
- .container {
13559
- grid-template-columns: repeat(${tabletCols}, 1fr);
13560
- }
13561
- }
13562
- @media (max-width: var(--component-stack-mobile-breakpoint, 576px)) {
13563
- .container {
13564
- grid-template-columns: 1fr;
13565
- }
13566
- }
13567
- `;
13552
+ _buildResponsiveGridTemplate(cols, gapValue) {
13553
+ const minWidth = `var(--component-stack-min-item-width, 240px)`;
13554
+ const evenShare = `calc((100% - ${cols - 1} * ${gapValue}) / ${cols})`;
13555
+ const itemMin = `min(100%, max(${minWidth}, ${evenShare}))`;
13556
+ return `repeat(auto-fit, minmax(${itemMin}, 1fr))`;
13568
13557
  }
13569
13558
 
13570
13559
  _clearMasonryPositions() {
@@ -13665,14 +13654,14 @@ class YumeStack extends HTMLElement {
13665
13654
 
13666
13655
  _resolveGap() {
13667
13656
  const gapMap = {
13668
- none: "var(--spacing-none)",
13669
- "x-small": "var(--spacing-x-small)",
13670
- small: "var(--spacing-small)",
13671
- medium: "var(--spacing-medium)",
13672
- large: "var(--spacing-large)",
13673
- "x-large": "var(--spacing-x-large)",
13674
- "2x-large": "var(--spacing-2x-large)",
13675
- "4x-large": "var(--spacing-4x-large)",
13657
+ none: "var(--spacing-none, 0px)",
13658
+ "x-small": "var(--spacing-x-small, 4px)",
13659
+ small: "var(--spacing-small, 6px)",
13660
+ medium: "var(--spacing-medium, 8px)",
13661
+ large: "var(--spacing-large, 12px)",
13662
+ "x-large": "var(--spacing-x-large, 16px)",
13663
+ "2x-large": "var(--spacing-2x-large, 24px)",
13664
+ "4x-large": "var(--spacing-4x-large, 32px)",
13676
13665
  };
13677
13666
  return `var(--component-stack-gap, ${gapMap[this.gap] || gapMap.medium})`;
13678
13667
  }