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

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 +1 -2
  2. package/dist/components/y-stack.d.ts +1 -2
  3. package/dist/components/y-stack.js +24 -41
  4. package/dist/index.js +24 -41
  5. package/dist/yumekit.min.js +1 -1
  6. package/package.json +1 -1
package/dist/components/y-stack/y-stack.d.ts CHANGED
@@ -34,8 +34,7 @@ export class YumeStack extends HTMLElement {
34
34
  _slot: HTMLSlotElement;
35
35
  _applyLayout(): void;
36
36
  _buildStyleSheet(): CSSStyleSheet;
37
- _buildResponsiveFlexCSS(): string;
38
- _buildResponsiveGridCSS(cols: any): string;
37
+ _buildResponsiveGridTemplate(cols: any, gapValue: any): string;
39
38
  _clearMasonryPositions(): void;
40
39
  _getBreakpointValue(prop: any, fallback: any): any;
41
40
  _getResolvedColumns(): any;
package/dist/components/y-stack.d.ts CHANGED
@@ -34,8 +34,7 @@ export class YumeStack extends HTMLElement {
34
34
  _slot: HTMLSlotElement;
35
35
  _applyLayout(): void;
36
36
  _buildStyleSheet(): CSSStyleSheet;
37
- _buildResponsiveFlexCSS(): string;
38
- _buildResponsiveGridCSS(cols: any): string;
37
+ _buildResponsiveGridTemplate(cols: any, gapValue: any): string;
39
38
  _clearMasonryPositions(): void;
40
39
  _getBreakpointValue(prop: any, fallback: any): any;
41
40
  _getResolvedColumns(): any;
package/dist/components/y-stack.js CHANGED
@@ -156,19 +156,19 @@ class YumeStack extends HTMLElement {
156
156
  const responsive = this.responsive;
157
157
 
158
158
  let containerCSS;
159
- let responsiveCSS = "";
159
+ let slottedCSS = "";
160
160
 
161
161
  if (mode === "grid") {
162
+ const columnsTemplate = responsive
163
+ ? this._buildResponsiveGridTemplate(cols, gapValue)
164
+ : `repeat(var(--component-stack-columns, ${cols}), 1fr)`;
162
165
  containerCSS = `
163
166
  .container {
164
167
  display: grid;
165
- grid-template-columns: repeat(var(--component-stack-columns, ${cols}), 1fr);
168
+ grid-template-columns: ${columnsTemplate};
166
169
  gap: ${gapValue};
167
170
  }
168
171
  `;
169
- if (responsive) {
170
- responsiveCSS = this._buildResponsiveGridCSS(cols);
171
- }
172
172
  } else if (mode === "masonry") {
173
173
  containerCSS = `
174
174
  .container {
@@ -177,6 +177,7 @@ class YumeStack extends HTMLElement {
177
177
  `;
178
178
  } else {
179
179
  const dir = this.direction;
180
+ const wrap = this.wrap || (responsive && dir === "row");
180
181
  const alignMap = {
181
182
  start: "flex-start",
182
183
  end: "flex-end",
@@ -197,14 +198,15 @@ class YumeStack extends HTMLElement {
197
198
  .container {
198
199
  display: flex;
199
200
  flex-direction: ${dir};
200
- flex-wrap: ${this.wrap ? "wrap" : "nowrap"};
201
+ flex-wrap: ${wrap ? "wrap" : "nowrap"};
201
202
  align-items: ${alignMap[this.align] || "stretch"};
202
203
  justify-content: ${justifyMap[this.justify] || "flex-start"};
203
204
  gap: ${gapValue};
204
205
  }
205
206
  `;
206
- if (responsive && dir === "row") {
207
- responsiveCSS = this._buildResponsiveFlexCSS();
207
+
208
+ if (wrap) {
209
+ slottedCSS = `::slotted(*) { flex-shrink: 0; }`;
208
210
  }
209
211
  }
210
212
 
@@ -214,35 +216,16 @@ class YumeStack extends HTMLElement {
214
216
  box-sizing: border-box;
215
217
  }
216
218
  ${containerCSS}
217
- ${responsiveCSS}
219
+ ${slottedCSS}
218
220
  `);
219
221
  return sheet;
220
222
  }
221
223
 
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
- `;
224
+ _buildResponsiveGridTemplate(cols, gapValue) {
225
+ const minWidth = `var(--component-stack-min-item-width, 240px)`;
226
+ const evenShare = `calc((100% - ${cols - 1} * ${gapValue}) / ${cols})`;
227
+ const itemMin = `min(100%, max(${minWidth}, ${evenShare}))`;
228
+ return `repeat(auto-fit, minmax(${itemMin}, 1fr))`;
246
229
  }
247
230
 
248
231
  _clearMasonryPositions() {
@@ -343,14 +326,14 @@ class YumeStack extends HTMLElement {
343
326
 
344
327
  _resolveGap() {
345
328
  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)",
329
+ none: "var(--spacing-none, 0px)",
330
+ "x-small": "var(--spacing-x-small, 4px)",
331
+ small: "var(--spacing-small, 6px)",
332
+ medium: "var(--spacing-medium, 8px)",
333
+ large: "var(--spacing-large, 12px)",
334
+ "x-large": "var(--spacing-x-large, 16px)",
335
+ "2x-large": "var(--spacing-2x-large, 24px)",
336
+ "4x-large": "var(--spacing-4x-large, 32px)",
354
337
  };
355
338
  return `var(--component-stack-gap, ${gapMap[this.gap] || gapMap.medium})`;
356
339
  }
package/dist/index.js CHANGED
@@ -13478,19 +13478,19 @@ class YumeStack extends HTMLElement {
13478
13478
  const responsive = this.responsive;
13479
13479
 
13480
13480
  let containerCSS;
13481
- let responsiveCSS = "";
13481
+ let slottedCSS = "";
13482
13482
 
13483
13483
  if (mode === "grid") {
13484
+ const columnsTemplate = responsive
13485
+ ? this._buildResponsiveGridTemplate(cols, gapValue)
13486
+ : `repeat(var(--component-stack-columns, ${cols}), 1fr)`;
13484
13487
  containerCSS = `
13485
13488
  .container {
13486
13489
  display: grid;
13487
- grid-template-columns: repeat(var(--component-stack-columns, ${cols}), 1fr);
13490
+ grid-template-columns: ${columnsTemplate};
13488
13491
  gap: ${gapValue};
13489
13492
  }
13490
13493
  `;
13491
- if (responsive) {
13492
- responsiveCSS = this._buildResponsiveGridCSS(cols);
13493
- }
13494
13494
  } else if (mode === "masonry") {
13495
13495
  containerCSS = `
13496
13496
  .container {
@@ -13499,6 +13499,7 @@ class YumeStack extends HTMLElement {
13499
13499
  `;
13500
13500
  } else {
13501
13501
  const dir = this.direction;
13502
+ const wrap = this.wrap || (responsive && dir === "row");
13502
13503
  const alignMap = {
13503
13504
  start: "flex-start",
13504
13505
  end: "flex-end",
@@ -13519,14 +13520,15 @@ class YumeStack extends HTMLElement {
13519
13520
  .container {
13520
13521
  display: flex;
13521
13522
  flex-direction: ${dir};
13522
- flex-wrap: ${this.wrap ? "wrap" : "nowrap"};
13523
+ flex-wrap: ${wrap ? "wrap" : "nowrap"};
13523
13524
  align-items: ${alignMap[this.align] || "stretch"};
13524
13525
  justify-content: ${justifyMap[this.justify] || "flex-start"};
13525
13526
  gap: ${gapValue};
13526
13527
  }
13527
13528
  `;
13528
- if (responsive && dir === "row") {
13529
- responsiveCSS = this._buildResponsiveFlexCSS();
13529
+
13530
+ if (wrap) {
13531
+ slottedCSS = `::slotted(*) { flex-shrink: 0; }`;
13530
13532
  }
13531
13533
  }
13532
13534
 
@@ -13536,35 +13538,16 @@ class YumeStack extends HTMLElement {
13536
13538
  box-sizing: border-box;
13537
13539
  }
13538
13540
  ${containerCSS}
13539
- ${responsiveCSS}
13541
+ ${slottedCSS}
13540
13542
  `);
13541
13543
  return sheet;
13542
13544
  }
13543
13545
 
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
- `;
13546
+ _buildResponsiveGridTemplate(cols, gapValue) {
13547
+ const minWidth = `var(--component-stack-min-item-width, 240px)`;
13548
+ const evenShare = `calc((100% - ${cols - 1} * ${gapValue}) / ${cols})`;
13549
+ const itemMin = `min(100%, max(${minWidth}, ${evenShare}))`;
13550
+ return `repeat(auto-fit, minmax(${itemMin}, 1fr))`;
13568
13551
  }
13569
13552
 
13570
13553
  _clearMasonryPositions() {
@@ -13665,14 +13648,14 @@ class YumeStack extends HTMLElement {
13665
13648
 
13666
13649
  _resolveGap() {
13667
13650
  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)",
13651
+ none: "var(--spacing-none, 0px)",
13652
+ "x-small": "var(--spacing-x-small, 4px)",
13653
+ small: "var(--spacing-small, 6px)",
13654
+ medium: "var(--spacing-medium, 8px)",
13655
+ large: "var(--spacing-large, 12px)",
13656
+ "x-large": "var(--spacing-x-large, 16px)",
13657
+ "2x-large": "var(--spacing-2x-large, 24px)",
13658
+ "4x-large": "var(--spacing-4x-large, 32px)",
13676
13659
  };
13677
13660
  return `var(--component-stack-gap, ${gapMap[this.gap] || gapMap.medium})`;
13678
13661
  }