@kubex/zinc 1.1.94 → 1.1.95

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 (36) hide show
  1. package/dist/custom-elements.json +995 -196
  2. package/dist/vscode.html-custom-data.json +74 -19
  3. package/dist/web-types.json +147 -37
  4. package/dist/zn.d.ts +335 -59
  5. package/dist/zn.min.css +1 -1
  6. package/dist/zn.min.js +467 -355
  7. package/docs/pages/components/page-builder.md +121 -19
  8. package/docs/pages/components/slash-menu.md +132 -6
  9. package/docs/pages/components/textarea.md +16 -0
  10. package/package.json +1 -1
  11. package/scss/_root.scss +7 -1
  12. package/src/components/button/button.scss +5 -2
  13. package/src/components/inline-edit/inline-edit.component.ts +6 -1
  14. package/src/components/input/input.component.ts +12 -2
  15. package/src/components/page/page.scss +7 -2
  16. package/src/components/page-builder/modules/page-section-card/page-section-card.component.ts +16 -9
  17. package/src/components/page-builder/modules/page-section-card/page-section-card.scss +13 -0
  18. package/src/components/page-builder/modules/page-section-card/page-section-card.test.ts +9 -0
  19. package/src/components/page-builder/page-builder.component.ts +483 -225
  20. package/src/components/page-builder/page-builder.scss +64 -10
  21. package/src/components/page-builder/page-builder.test.ts +656 -110
  22. package/src/components/page-builder/page-tree.test.ts +483 -0
  23. package/src/components/page-builder/page-tree.ts +329 -0
  24. package/src/components/page-builder/page.types.ts +75 -7
  25. package/src/components/remarkd-editor/remarkd-editor.component.ts +198 -9
  26. package/src/components/remarkd-editor/remarkd-editor.scss +81 -0
  27. package/src/components/remarkd-editor/remarkd-editor.test.ts +179 -0
  28. package/src/components/settings-container/settings-container.scss +2 -1
  29. package/src/components/slash-item/slash-item.component.ts +1 -1
  30. package/src/components/slash-menu/slash-menu-items.ts +48 -0
  31. package/src/components/slash-menu/slash-menu.component.ts +134 -27
  32. package/src/components/slash-menu/slash-menu.scss +90 -12
  33. package/src/components/slash-menu/slash-menu.test.ts +107 -0
  34. package/src/components/textarea/textarea.component.ts +12 -2
  35. package/src/components/textarea/textarea.test.ts +2 -2
  36. package/src/components/translations/translations.component.ts +5 -1
package/src/components/page-builder/page-builder.scss CHANGED
@@ -381,6 +381,41 @@ zn-page-palette-item {
381
381
  flex-direction: column;
382
382
  gap: var(--pb-field-gap);
383
383
  }
384
+
385
+ // Its children are whole fields, so they take the field gap — not the
386
+ // label gap, which is the space between a label and its own control.
387
+ .layout-group {
388
+ display: flex;
389
+ flex-direction: column;
390
+ gap: var(--pb-field-gap);
391
+ padding-bottom: var(--pb-field-gap);
392
+ border-bottom: 1px solid rgb(var(--zn-border-color));
393
+
394
+ &__title {
395
+ font-size: var(--pb-field-label-size);
396
+ font-weight: 600;
397
+ color: rgb(var(--zn-color-muted-text));
398
+ text-transform: uppercase;
399
+ letter-spacing: 0.04em;
400
+ }
401
+
402
+ &__label {
403
+ display: block;
404
+ margin-bottom: var(--pb-label-gap);
405
+ font-size: var(--pb-field-label-size);
406
+ font-weight: 600;
407
+ }
408
+
409
+ &__weights {
410
+ display: flex;
411
+ gap: 6px;
412
+
413
+ zn-input {
414
+ flex: 1 1 0;
415
+ min-width: 0;
416
+ }
417
+ }
418
+ }
384
419
  }
385
420
 
386
421
  &-hint {
@@ -506,27 +541,26 @@ zn-page-palette-item {
506
541
  gap: 8px;
507
542
  }
508
543
 
509
- .slots {
544
+ .cells {
510
545
  display: grid;
511
- // minmax(0) lets cells shrink below their content's min width — otherwise a
512
- // child card's text forces the tracks wider than the parent tile.
513
- grid-template-columns: repeat(3, minmax(0, 1fr));
546
+ // grid-template-columns is set inline from the instance's widths.
514
547
  gap: 8px;
515
548
  }
516
549
 
517
- .slot {
550
+ .cell {
518
551
  position: relative;
552
+ display: flex;
553
+ flex-direction: column;
519
554
  min-height: 64px;
555
+ border-radius: 8px;
556
+ transition: border-color 0.12s ease, background 0.12s ease;
520
557
 
521
558
  &--empty {
522
- display: flex;
523
559
  align-items: center;
524
560
  justify-content: center;
525
561
  border: 1px dashed rgb(var(--zn-border-color));
526
- border-radius: 8px;
527
562
  color: rgba(var(--zn-text), 0.4);
528
563
  cursor: pointer;
529
- transition: border-color 0.12s ease, background 0.12s ease;
530
564
 
531
565
  &:hover {
532
566
  border-color: rgb(var(--zn-color-border-active));
@@ -535,8 +569,28 @@ zn-page-palette-item {
535
569
  }
536
570
 
537
571
  &--active {
538
- border-color: rgb(var(--zn-color-primary));
539
- border-style: dashed;
572
+ border: 1px dashed rgb(var(--zn-color-primary));
573
+ background: rgba(var(--zn-color-primary), 0.06);
574
+ }
575
+
576
+ // A nested container sits inside a cell; inset it so the nesting reads.
577
+ .container {
578
+ max-width: none;
579
+ padding: 4px;
580
+ }
581
+ }
582
+
583
+ .cell__card {
584
+ max-width: none;
585
+ }
586
+
587
+ .cell__strip {
588
+ min-height: 6px;
589
+ border-radius: 3px;
590
+
591
+ &--active {
592
+ min-height: 20px;
593
+ border: 2px dashed rgb(var(--zn-color-primary));
540
594
  background: rgba(var(--zn-color-primary), 0.06);
541
595
  }
542
596
  }