@kubex/zinc 1.1.119 → 1.1.121

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.
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
3
3
  "name": "@kubex/zinc",
4
- "version": "1.1.119",
4
+ "version": "1.1.121",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
@@ -250,44 +250,6 @@
250
250
  "events": []
251
251
  }
252
252
  },
253
- {
254
- "name": "zn-bulk-actions",
255
- "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
256
- "doc-url": "",
257
- "attributes": [
258
- { "name": "name", "value": { "type": "string" } },
259
- { "name": "value", "value": { "type": "PropertyKey" } },
260
- {
261
- "name": "actions",
262
- "value": { "type": "BulkActionData", "default": "[]" }
263
- }
264
- ],
265
- "slots": [
266
- { "name": "", "description": "The default slot." },
267
- { "name": "example", "description": "An example slot." }
268
- ],
269
- "events": [
270
- { "name": "zn-event-name", "description": "Emitted as an example." }
271
- ],
272
- "js": {
273
- "properties": [
274
- { "name": "container", "type": "HTMLDivElement" },
275
- { "name": "addRule", "type": "ZnSelect" },
276
- { "name": "input", "type": "HTMLInputElement" },
277
- { "name": "name", "type": "string" },
278
- { "name": "value", "type": "PropertyKey" },
279
- { "name": "actions", "type": "BulkActionData" },
280
- { "name": "validationMessage", "type": "string" },
281
- { "name": "validity", "type": "ValidityState" }
282
- ],
283
- "events": [
284
- {
285
- "name": "zn-event-name",
286
- "description": "Emitted as an example."
287
- }
288
- ]
289
- }
290
- },
291
253
  {
292
254
  "name": "zn-background",
293
255
  "description": "Composes a colour, decorative image, image strength, optional motion and contrast overlay behind slotted content.\n---\n\n\n### **Slots:**\n - _default_ - Content displayed above the background layers.\n\n### **CSS Properties:**\n - **--zn-background-color** - Fallback colour when the `color` attribute is not set. _(default: undefined)_\n- **--zn-background-image-position** - Position of the background image. Defaults to `center`. _(default: undefined)_\n- **--zn-background-overlay-angle** - Direction of the overlay gradient. Defaults to `110deg`. _(default: undefined)_\n- **--zn-background-floating-icon-color** - Colour of the floating icons. Defaults to `currentColor`. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's full-size background canvas.\n- **image** - The decorative background image.\n- **overlay** - The contrast overlay between the image and content.\n- **floating-icons** - The non-interactive layer containing the floating icons.\n- **floating-icon** - Each floating `zn-icon`.\n- **content** - The wrapper around the default slot.",
@@ -391,46 +353,34 @@
391
353
  }
392
354
  },
393
355
  {
394
- "name": "zn-button-group",
395
- "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n\n### **CSS Properties:**\n - **--grow** - Use flex-grow to fill available space. _(default: undefined)_\n- **--start** - Justify content at the start of the flex space. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
356
+ "name": "zn-bulk-actions",
357
+ "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
396
358
  "doc-url": "",
397
359
  "attributes": [
360
+ { "name": "name", "value": { "type": "string" } },
361
+ { "name": "value", "value": { "type": "PropertyKey" } },
398
362
  {
399
- "name": "direction",
400
- "value": {
401
- "type": "'horizontal' | 'vertical'",
402
- "default": "'horizontal'"
403
- }
404
- },
405
- {
406
- "name": "grow",
407
- "value": { "type": "boolean", "default": "false" }
408
- },
409
- {
410
- "name": "wrap",
411
- "value": { "type": "boolean", "default": "false" }
412
- },
413
- {
414
- "name": "start",
415
- "value": { "type": "boolean", "default": "false" }
416
- },
417
- {
418
- "name": "gap",
419
- "value": { "type": "boolean", "default": "false" }
363
+ "name": "actions",
364
+ "value": { "type": "BulkActionData", "default": "[]" }
420
365
  }
421
366
  ],
422
- "slots": [{ "name": "", "description": "The default slot." }],
367
+ "slots": [
368
+ { "name": "", "description": "The default slot." },
369
+ { "name": "example", "description": "An example slot." }
370
+ ],
423
371
  "events": [
424
372
  { "name": "zn-event-name", "description": "Emitted as an example." }
425
373
  ],
426
374
  "js": {
427
375
  "properties": [
428
- { "name": "direction", "type": "'horizontal' | 'vertical'" },
429
- { "name": "grow", "type": "boolean" },
430
- { "name": "wrap", "type": "boolean" },
431
- { "name": "start", "type": "boolean" },
432
- { "name": "gap", "type": "boolean" },
433
- { "name": "defaultSlot", "type": "HTMLSlotElement" }
376
+ { "name": "container", "type": "HTMLDivElement" },
377
+ { "name": "addRule", "type": "ZnSelect" },
378
+ { "name": "input", "type": "HTMLInputElement" },
379
+ { "name": "name", "type": "string" },
380
+ { "name": "value", "type": "PropertyKey" },
381
+ { "name": "actions", "type": "BulkActionData" },
382
+ { "name": "validationMessage", "type": "string" },
383
+ { "name": "validity", "type": "ValidityState" }
434
384
  ],
435
385
  "events": [
436
386
  {
@@ -716,6 +666,56 @@
716
666
  ]
717
667
  }
718
668
  },
669
+ {
670
+ "name": "zn-button-group",
671
+ "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n\n### **CSS Properties:**\n - **--grow** - Use flex-grow to fill available space. _(default: undefined)_\n- **--start** - Justify content at the start of the flex space. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
672
+ "doc-url": "",
673
+ "attributes": [
674
+ {
675
+ "name": "direction",
676
+ "value": {
677
+ "type": "'horizontal' | 'vertical'",
678
+ "default": "'horizontal'"
679
+ }
680
+ },
681
+ {
682
+ "name": "grow",
683
+ "value": { "type": "boolean", "default": "false" }
684
+ },
685
+ {
686
+ "name": "wrap",
687
+ "value": { "type": "boolean", "default": "false" }
688
+ },
689
+ {
690
+ "name": "start",
691
+ "value": { "type": "boolean", "default": "false" }
692
+ },
693
+ {
694
+ "name": "gap",
695
+ "value": { "type": "boolean", "default": "false" }
696
+ }
697
+ ],
698
+ "slots": [{ "name": "", "description": "The default slot." }],
699
+ "events": [
700
+ { "name": "zn-event-name", "description": "Emitted as an example." }
701
+ ],
702
+ "js": {
703
+ "properties": [
704
+ { "name": "direction", "type": "'horizontal' | 'vertical'" },
705
+ { "name": "grow", "type": "boolean" },
706
+ { "name": "wrap", "type": "boolean" },
707
+ { "name": "start", "type": "boolean" },
708
+ { "name": "gap", "type": "boolean" },
709
+ { "name": "defaultSlot", "type": "HTMLSlotElement" }
710
+ ],
711
+ "events": [
712
+ {
713
+ "name": "zn-event-name",
714
+ "description": "Emitted as an example."
715
+ }
716
+ ]
717
+ }
718
+ },
719
719
  {
720
720
  "name": "zn-button-menu",
721
721
  "description": "Automatically hides buttons in a menu when the screen is too small.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.",
@@ -3666,6 +3666,123 @@
3666
3666
  ]
3667
3667
  }
3668
3668
  },
3669
+ {
3670
+ "name": "zn-empty-state",
3671
+ "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
3672
+ "doc-url": "",
3673
+ "attributes": [
3674
+ { "name": "icon", "value": { "type": "string", "default": "''" } },
3675
+ {
3676
+ "name": "caption",
3677
+ "value": { "type": "string", "default": "''" }
3678
+ },
3679
+ {
3680
+ "name": "description",
3681
+ "value": { "type": "string", "default": "''" }
3682
+ },
3683
+ {
3684
+ "name": "type",
3685
+ "value": {
3686
+ "type": "'error' | 'info' | 'primary' | ''",
3687
+ "default": "''"
3688
+ }
3689
+ },
3690
+ {
3691
+ "name": "padded",
3692
+ "value": { "type": "boolean", "default": "false" }
3693
+ }
3694
+ ],
3695
+ "slots": [
3696
+ { "name": "", "description": "The default slot." },
3697
+ { "name": "example", "description": "An example slot." }
3698
+ ],
3699
+ "events": [
3700
+ { "name": "zn-event-name", "description": "Emitted as an example." }
3701
+ ],
3702
+ "js": {
3703
+ "properties": [
3704
+ { "name": "icon", "type": "string" },
3705
+ { "name": "caption", "type": "string" },
3706
+ { "name": "description", "type": "string" },
3707
+ { "name": "type", "type": "'error' | 'info' | 'primary' | ''" },
3708
+ { "name": "padded", "type": "boolean" }
3709
+ ],
3710
+ "events": [
3711
+ {
3712
+ "name": "zn-event-name",
3713
+ "description": "Emitted as an example."
3714
+ }
3715
+ ]
3716
+ }
3717
+ },
3718
+ {
3719
+ "name": "zn-expanding-action",
3720
+ "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
3721
+ "doc-url": "",
3722
+ "attributes": [
3723
+ { "name": "icon", "value": { "type": "string" } },
3724
+ {
3725
+ "name": "method",
3726
+ "value": { "type": "'drop' | 'fill'", "default": "'drop'" }
3727
+ },
3728
+ { "name": "context-uri", "value": { "type": "string" } },
3729
+ { "name": "count", "value": { "type": "string" } },
3730
+ { "name": "color", "value": { "type": "string" } },
3731
+ {
3732
+ "name": "prefetch",
3733
+ "value": { "type": "boolean", "default": "false" }
3734
+ },
3735
+ {
3736
+ "name": "basis",
3737
+ "value": { "type": "string", "default": "'300'" }
3738
+ },
3739
+ { "name": "max-height", "value": { "type": "string" } },
3740
+ {
3741
+ "name": "open",
3742
+ "value": { "type": "boolean", "default": "false" }
3743
+ },
3744
+ { "name": "master-id", "value": { "type": "string" } },
3745
+ {
3746
+ "name": "fetch-style",
3747
+ "value": { "type": "string", "default": "\"\"" }
3748
+ },
3749
+ {
3750
+ "name": "no-prefetch",
3751
+ "value": { "type": "boolean", "default": "false" }
3752
+ }
3753
+ ],
3754
+ "slots": [
3755
+ { "name": "", "description": "The default slot." },
3756
+ { "name": "example", "description": "An example slot." }
3757
+ ],
3758
+ "events": [
3759
+ { "name": "zn-event-name", "description": "Emitted as an example." }
3760
+ ],
3761
+ "js": {
3762
+ "properties": [
3763
+ { "name": "icon", "type": "string" },
3764
+ { "name": "method", "type": "'drop' | 'fill'" },
3765
+ { "name": "contextUri", "type": "string" },
3766
+ { "name": "count", "type": "string" },
3767
+ { "name": "color", "type": "string" },
3768
+ { "name": "prefetch", "type": "boolean" },
3769
+ { "name": "basis", "type": "string" },
3770
+ { "name": "maxHeight", "type": "string" },
3771
+ { "name": "open", "type": "boolean" },
3772
+ { "name": "masterId", "type": "string" },
3773
+ { "name": "fetchStyle", "type": "string" },
3774
+ { "name": "noPrefetch", "type": "boolean" },
3775
+ { "name": "handleIconClicked" },
3776
+ { "name": "handleIconCloseClicked" }
3777
+ ],
3778
+ "events": [
3779
+ {
3780
+ "name": "zn-event-name",
3781
+ "description": "Emitted as an example."
3782
+ }
3783
+ ]
3784
+ }
3785
+ },
3669
3786
  {
3670
3787
  "name": "zn-editor",
3671
3788
  "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
@@ -3790,123 +3907,6 @@
3790
3907
  ]
3791
3908
  }
3792
3909
  },
3793
- {
3794
- "name": "zn-empty-state",
3795
- "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
3796
- "doc-url": "",
3797
- "attributes": [
3798
- { "name": "icon", "value": { "type": "string", "default": "''" } },
3799
- {
3800
- "name": "caption",
3801
- "value": { "type": "string", "default": "''" }
3802
- },
3803
- {
3804
- "name": "description",
3805
- "value": { "type": "string", "default": "''" }
3806
- },
3807
- {
3808
- "name": "type",
3809
- "value": {
3810
- "type": "'error' | 'info' | 'primary' | ''",
3811
- "default": "''"
3812
- }
3813
- },
3814
- {
3815
- "name": "padded",
3816
- "value": { "type": "boolean", "default": "false" }
3817
- }
3818
- ],
3819
- "slots": [
3820
- { "name": "", "description": "The default slot." },
3821
- { "name": "example", "description": "An example slot." }
3822
- ],
3823
- "events": [
3824
- { "name": "zn-event-name", "description": "Emitted as an example." }
3825
- ],
3826
- "js": {
3827
- "properties": [
3828
- { "name": "icon", "type": "string" },
3829
- { "name": "caption", "type": "string" },
3830
- { "name": "description", "type": "string" },
3831
- { "name": "type", "type": "'error' | 'info' | 'primary' | ''" },
3832
- { "name": "padded", "type": "boolean" }
3833
- ],
3834
- "events": [
3835
- {
3836
- "name": "zn-event-name",
3837
- "description": "Emitted as an example."
3838
- }
3839
- ]
3840
- }
3841
- },
3842
- {
3843
- "name": "zn-expanding-action",
3844
- "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
3845
- "doc-url": "",
3846
- "attributes": [
3847
- { "name": "icon", "value": { "type": "string" } },
3848
- {
3849
- "name": "method",
3850
- "value": { "type": "'drop' | 'fill'", "default": "'drop'" }
3851
- },
3852
- { "name": "context-uri", "value": { "type": "string" } },
3853
- { "name": "count", "value": { "type": "string" } },
3854
- { "name": "color", "value": { "type": "string" } },
3855
- {
3856
- "name": "prefetch",
3857
- "value": { "type": "boolean", "default": "false" }
3858
- },
3859
- {
3860
- "name": "basis",
3861
- "value": { "type": "string", "default": "'300'" }
3862
- },
3863
- { "name": "max-height", "value": { "type": "string" } },
3864
- {
3865
- "name": "open",
3866
- "value": { "type": "boolean", "default": "false" }
3867
- },
3868
- { "name": "master-id", "value": { "type": "string" } },
3869
- {
3870
- "name": "fetch-style",
3871
- "value": { "type": "string", "default": "\"\"" }
3872
- },
3873
- {
3874
- "name": "no-prefetch",
3875
- "value": { "type": "boolean", "default": "false" }
3876
- }
3877
- ],
3878
- "slots": [
3879
- { "name": "", "description": "The default slot." },
3880
- { "name": "example", "description": "An example slot." }
3881
- ],
3882
- "events": [
3883
- { "name": "zn-event-name", "description": "Emitted as an example." }
3884
- ],
3885
- "js": {
3886
- "properties": [
3887
- { "name": "icon", "type": "string" },
3888
- { "name": "method", "type": "'drop' | 'fill'" },
3889
- { "name": "contextUri", "type": "string" },
3890
- { "name": "count", "type": "string" },
3891
- { "name": "color", "type": "string" },
3892
- { "name": "prefetch", "type": "boolean" },
3893
- { "name": "basis", "type": "string" },
3894
- { "name": "maxHeight", "type": "string" },
3895
- { "name": "open", "type": "boolean" },
3896
- { "name": "masterId", "type": "string" },
3897
- { "name": "fetchStyle", "type": "string" },
3898
- { "name": "noPrefetch", "type": "boolean" },
3899
- { "name": "handleIconClicked" },
3900
- { "name": "handleIconCloseClicked" }
3901
- ],
3902
- "events": [
3903
- {
3904
- "name": "zn-event-name",
3905
- "description": "Emitted as an example."
3906
- }
3907
- ]
3908
- }
3909
- },
3910
3910
  {
3911
3911
  "name": "zn-file",
3912
3912
  "description": "File controls allow selecting an arbitrary number of files for uploading.\n---\n\n\n### **Events:**\n - **zn-blur** - Emitted when the control loses focus.\n- **zn-change** - Emitted when an alteration to the control's value is committed by the user.\n- **zn-clear** - Emitted when the user confirms clearing the selected file or `src`.\n- **zn-error** - Emitted when multiple files are selected via drag and drop, without the `multiple` property being set.\n- **zn-focus** - Emitted when the control gains focus.\n- **zn-input** - Emitted when the control receives input.\n\n### **Methods:**\n - **checkValidity()** - Checks for validity but does not show a validation message.\nReturns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **focus(options: _FocusOptions_)** - Sets focus on the button or droparea.\n- **blur()** - Removes focus from the button or droparea.\n- **clear()** - Programmatically clears the selected file and any external `src` without\nconfirmation. Unlike a user-initiated clear, this does not flag the control\nto submit an empty value.\n\n### **Slots:**\n - **label** - The file control's label. Alternatively, you can use the `label` attribute.\n- **help-text** - Text that describes how to use the file control. Alternatively, you can use the `help-text` attribute.\n- **trigger** - Optional content to be used as trigger instead of the default content. Opening the file dialog on click and as well as drag and drop will work for this content. Following attributes will no longer work: *label*, *droparea*, *help-text*, *size*, *hide-value*. Also if using the disabled attribute, the disabled styling will not be applied and must be taken care of yourself.\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the label, input, and help text.\n- **form-control-label** - The label's wrapper.\n- **form-control-input** - The input's wrapper.\n- **form-control-help-text** - The help text's wrapper.\n- **button-wrapper** - The wrapper around the button and text value.\n- **button** - The zn-button acting as a file input.\n- **button__base** - The zn-button's exported `base` part.\n- **value** - The chosen files or placeholder text for the file input.\n- **droparea** - The element wrapping the drop zone.\n- **droparea-background** - The background of the drop zone.\n- **upload** - The upload button shown in the droparea when no file is selected.\n- **preview** - The image preview rendered in the droparea for previewable files.\n- **filename** - The filename label rendered in the droparea for non-previewable files.\n- **clear** - The clear button rendered in the droparea when a file is present.\n- **clear-confirm** - The confirmation dialog shown before clearing the file.\n- **link** - The current link anchor rendered when `show-link` is enabled.\n- **trigger** - The container that wraps the trigger.",
@@ -5962,80 +5962,6 @@
5962
5962
  ]
5963
5963
  }
5964
5964
  },
5965
- {
5966
- "name": "zn-linked-select",
5967
- "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
5968
- "doc-url": "",
5969
- "attributes": [
5970
- {
5971
- "name": "name",
5972
- "value": { "type": "string", "default": "\"\"" }
5973
- },
5974
- { "name": "value", "value": { "type": "string" } },
5975
- {
5976
- "name": "checked",
5977
- "value": { "type": "boolean", "default": "false" }
5978
- },
5979
- { "name": "options", "value": { "type": "linkedSelectOptions" } },
5980
- {
5981
- "name": "linked-select",
5982
- "value": { "type": "string", "default": "\"\"" }
5983
- },
5984
- {
5985
- "name": "cache-key",
5986
- "value": { "type": "string", "default": "\"\"" }
5987
- },
5988
- {
5989
- "name": "label",
5990
- "value": { "type": "string", "default": "\"\"" }
5991
- },
5992
- {
5993
- "name": "select-first",
5994
- "description": "Automatically select the first option of the linked group when no value is set.",
5995
- "value": { "type": "boolean", "default": "false" }
5996
- }
5997
- ],
5998
- "slots": [
5999
- { "name": "", "description": "The default slot." },
6000
- { "name": "example", "description": "An example slot." }
6001
- ],
6002
- "events": [
6003
- { "name": "zn-event-name", "description": "Emitted as an example." }
6004
- ],
6005
- "js": {
6006
- "properties": [
6007
- { "name": "name", "type": "string" },
6008
- { "name": "value", "type": "string" },
6009
- {
6010
- "name": "defaultValue",
6011
- "description": "The default value of the form control. Primarily used for resetting the form control.",
6012
- "type": "string"
6013
- },
6014
- { "name": "checked", "type": "boolean" },
6015
- { "name": "options", "type": "linkedSelectOptions" },
6016
- { "name": "linkedSelect", "type": "string" },
6017
- { "name": "cacheKey", "type": "string" },
6018
- { "name": "label", "type": "string" },
6019
- {
6020
- "name": "selectFirst",
6021
- "description": "Automatically select the first option of the linked group when no value is set.",
6022
- "type": "boolean"
6023
- },
6024
- { "name": "input", "type": "ZnSelect" },
6025
- { "name": "displayLabel" },
6026
- { "name": "validity" },
6027
- { "name": "validationMessage" },
6028
- { "name": "handleLinkedSelectChange" },
6029
- { "name": "handleSelectChange" }
6030
- ],
6031
- "events": [
6032
- {
6033
- "name": "zn-event-name",
6034
- "description": "Emitted as an example."
6035
- }
6036
- ]
6037
- }
6038
- },
6039
5965
  {
6040
5966
  "name": "zn-markdown-editor",
6041
5967
  "description": "A markdown editor with live preview, split view, and a fullscreen mode.\n---\n\n\n### **Events:**\n - **zn-view-mode-change** - Emitted when the user switches between editor / split / preview.\n- **zn-change** - Emitted when the markdown content changes.\n- **zn-input** - Emitted on each keystroke in the editor.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the editor.\n- **blur()** - Removes focus from the editor.\n\n### **Slots:**\n - **label** - The editor label. Alternatively, use the `label` attribute.\n- **help-text** - Help text shown below the editor. Alternatively, use the `help-text` attribute.\n- _default_ - The panel's main content.\n- **actions** - Actions displayed in the panel header (buttons, chips, etc).\n- **footer** - Content displayed in the panel footer.\n\n### **CSS Properties:**\n - **--zn-panel-basis** - The flex-basis of the panel. Can be set using the basis-px attribute. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **toolbar** - The toolbar containing the view-mode and fullscreen controls.\n- **editor** - The textarea wrapper.\n- **preview** - The rendered markdown preview.",
@@ -6256,18 +6182,36 @@
6256
6182
  }
6257
6183
  },
6258
6184
  {
6259
- "name": "zn-menu",
6260
- "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n- **--zn-menu-max-height** - Caps the menu's height and makes it scroll internally. Unset (`none`) by default, so the menu grows to fit its items unless a consumer sets this. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
6185
+ "name": "zn-linked-select",
6186
+ "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
6261
6187
  "doc-url": "",
6262
6188
  "attributes": [
6263
6189
  {
6264
- "name": "actions",
6265
- "value": { "type": "array", "default": "[]" }
6190
+ "name": "name",
6191
+ "value": { "type": "string", "default": "\"\"" }
6266
6192
  },
6193
+ { "name": "value", "value": { "type": "string" } },
6267
6194
  {
6268
- "name": "variant",
6269
- "description": "The menu's visual style. `shell` renders the app-shell header dropdown\nlook: a padded panel with floating rounded items. Propagated to the\nmenu's items.",
6270
- "value": { "type": "'default' | 'shell'", "default": "'default'" }
6195
+ "name": "checked",
6196
+ "value": { "type": "boolean", "default": "false" }
6197
+ },
6198
+ { "name": "options", "value": { "type": "linkedSelectOptions" } },
6199
+ {
6200
+ "name": "linked-select",
6201
+ "value": { "type": "string", "default": "\"\"" }
6202
+ },
6203
+ {
6204
+ "name": "cache-key",
6205
+ "value": { "type": "string", "default": "\"\"" }
6206
+ },
6207
+ {
6208
+ "name": "label",
6209
+ "value": { "type": "string", "default": "\"\"" }
6210
+ },
6211
+ {
6212
+ "name": "select-first",
6213
+ "description": "Automatically select the first option of the linked group when no value is set.",
6214
+ "value": { "type": "boolean", "default": "false" }
6271
6215
  }
6272
6216
  ],
6273
6217
  "slots": [
@@ -6279,13 +6223,29 @@
6279
6223
  ],
6280
6224
  "js": {
6281
6225
  "properties": [
6282
- { "name": "defaultSlot", "type": "HTMLSlotElement" },
6283
- { "name": "actions", "type": "array" },
6226
+ { "name": "name", "type": "string" },
6227
+ { "name": "value", "type": "string" },
6284
6228
  {
6285
- "name": "variant",
6286
- "description": "The menu's visual style. `shell` renders the app-shell header dropdown\nlook: a padded panel with floating rounded items. Propagated to the\nmenu's items.",
6287
- "type": "'default' | 'shell'"
6288
- }
6229
+ "name": "defaultValue",
6230
+ "description": "The default value of the form control. Primarily used for resetting the form control.",
6231
+ "type": "string"
6232
+ },
6233
+ { "name": "checked", "type": "boolean" },
6234
+ { "name": "options", "type": "linkedSelectOptions" },
6235
+ { "name": "linkedSelect", "type": "string" },
6236
+ { "name": "cacheKey", "type": "string" },
6237
+ { "name": "label", "type": "string" },
6238
+ {
6239
+ "name": "selectFirst",
6240
+ "description": "Automatically select the first option of the linked group when no value is set.",
6241
+ "type": "boolean"
6242
+ },
6243
+ { "name": "input", "type": "ZnSelect" },
6244
+ { "name": "displayLabel" },
6245
+ { "name": "validity" },
6246
+ { "name": "validationMessage" },
6247
+ { "name": "handleLinkedSelectChange" },
6248
+ { "name": "handleSelectChange" }
6289
6249
  ],
6290
6250
  "events": [
6291
6251
  {
@@ -6296,15 +6256,55 @@
6296
6256
  }
6297
6257
  },
6298
6258
  {
6299
- "name": "zn-menu-item",
6300
- "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Methods:**\n - **getTextLabel()** - Returns a text label based on the contents of the menu item's default slot.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
6259
+ "name": "zn-menu",
6260
+ "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n- **--zn-menu-max-height** - Caps the menu's height and makes it scroll internally. Unset (`none`) by default, so the menu grows to fit its items unless a consumer sets this. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
6301
6261
  "doc-url": "",
6302
6262
  "attributes": [
6303
6263
  {
6304
- "name": "type",
6305
- "description": "The type of menu item to render. To use `checked`, this value must be set to `checkbox`.",
6306
- "value": {
6307
- "type": "'normal' | 'checkbox'",
6264
+ "name": "actions",
6265
+ "value": { "type": "array", "default": "[]" }
6266
+ },
6267
+ {
6268
+ "name": "variant",
6269
+ "description": "The menu's visual style. `shell` renders the app-shell header dropdown\nlook: a padded panel with floating rounded items. Propagated to the\nmenu's items.",
6270
+ "value": { "type": "'default' | 'shell'", "default": "'default'" }
6271
+ }
6272
+ ],
6273
+ "slots": [
6274
+ { "name": "", "description": "The default slot." },
6275
+ { "name": "example", "description": "An example slot." }
6276
+ ],
6277
+ "events": [
6278
+ { "name": "zn-event-name", "description": "Emitted as an example." }
6279
+ ],
6280
+ "js": {
6281
+ "properties": [
6282
+ { "name": "defaultSlot", "type": "HTMLSlotElement" },
6283
+ { "name": "actions", "type": "array" },
6284
+ {
6285
+ "name": "variant",
6286
+ "description": "The menu's visual style. `shell` renders the app-shell header dropdown\nlook: a padded panel with floating rounded items. Propagated to the\nmenu's items.",
6287
+ "type": "'default' | 'shell'"
6288
+ }
6289
+ ],
6290
+ "events": [
6291
+ {
6292
+ "name": "zn-event-name",
6293
+ "description": "Emitted as an example."
6294
+ }
6295
+ ]
6296
+ }
6297
+ },
6298
+ {
6299
+ "name": "zn-menu-item",
6300
+ "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Methods:**\n - **getTextLabel()** - Returns a text label based on the contents of the menu item's default slot.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
6301
+ "doc-url": "",
6302
+ "attributes": [
6303
+ {
6304
+ "name": "type",
6305
+ "description": "The type of menu item to render. To use `checked`, this value must be set to `checkbox`.",
6306
+ "value": {
6307
+ "type": "'normal' | 'checkbox'",
6308
6308
  "default": "'normal'"
6309
6309
  }
6310
6310
  },
@@ -7025,49 +7025,6 @@
7025
7025
  ]
7026
7026
  }
7027
7027
  },
7028
- {
7029
- "name": "zn-pagination",
7030
- "description": "Pagination component for navigating through pages of content.\n---\n",
7031
- "doc-url": "",
7032
- "attributes": [
7033
- { "name": "limit", "value": { "type": "number", "default": "10" } },
7034
- { "name": "total", "value": { "type": "number", "default": "0" } },
7035
- { "name": "page", "value": { "type": "number", "default": "1" } },
7036
- { "name": "uri", "value": { "type": "string", "default": "\"\"" } }
7037
- ],
7038
- "events": [],
7039
- "js": {
7040
- "properties": [
7041
- { "name": "limit", "type": "number" },
7042
- { "name": "total", "type": "number" },
7043
- { "name": "page", "type": "number" },
7044
- { "name": "uri", "type": "string" }
7045
- ],
7046
- "events": []
7047
- }
7048
- },
7049
- {
7050
- "name": "zn-pane",
7051
- "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
7052
- "doc-url": "",
7053
- "attributes": [{ "name": "flush", "value": { "type": "boolean" } }],
7054
- "slots": [
7055
- { "name": "", "description": "The default slot." },
7056
- { "name": "example", "description": "An example slot." }
7057
- ],
7058
- "events": [
7059
- { "name": "zn-event-name", "description": "Emitted as an example." }
7060
- ],
7061
- "js": {
7062
- "properties": [{ "name": "flush", "type": "boolean" }],
7063
- "events": [
7064
- {
7065
- "name": "zn-event-name",
7066
- "description": "Emitted as an example."
7067
- }
7068
- ]
7069
- }
7070
- },
7071
7028
  {
7072
7029
  "name": "zn-page-nav",
7073
7030
  "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Methods:**\n \n\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
@@ -7175,6 +7132,27 @@
7175
7132
  ]
7176
7133
  }
7177
7134
  },
7135
+ {
7136
+ "name": "zn-pagination",
7137
+ "description": "Pagination component for navigating through pages of content.\n---\n",
7138
+ "doc-url": "",
7139
+ "attributes": [
7140
+ { "name": "limit", "value": { "type": "number", "default": "10" } },
7141
+ { "name": "total", "value": { "type": "number", "default": "0" } },
7142
+ { "name": "page", "value": { "type": "number", "default": "1" } },
7143
+ { "name": "uri", "value": { "type": "string", "default": "\"\"" } }
7144
+ ],
7145
+ "events": [],
7146
+ "js": {
7147
+ "properties": [
7148
+ { "name": "limit", "type": "number" },
7149
+ { "name": "total", "type": "number" },
7150
+ { "name": "page", "type": "number" },
7151
+ { "name": "uri", "type": "string" }
7152
+ ],
7153
+ "events": []
7154
+ }
7155
+ },
7178
7156
  {
7179
7157
  "name": "zn-panel",
7180
7158
  "description": "Panels are versatile containers that provide structure for organizing content with optional headers and footers.\n---\n\n\n### **Slots:**\n - _default_ - The panel's main content.\n- **actions** - Actions displayed in the panel header (buttons, chips, etc).\n- **footer** - Content displayed in the panel footer.\n\n### **CSS Properties:**\n - **--zn-panel-basis** - The flex-basis of the panel. Can be set using the basis-px attribute. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
@@ -7223,6 +7201,28 @@
7223
7201
  "events": []
7224
7202
  }
7225
7203
  },
7204
+ {
7205
+ "name": "zn-pane",
7206
+ "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
7207
+ "doc-url": "",
7208
+ "attributes": [{ "name": "flush", "value": { "type": "boolean" } }],
7209
+ "slots": [
7210
+ { "name": "", "description": "The default slot." },
7211
+ { "name": "example", "description": "An example slot." }
7212
+ ],
7213
+ "events": [
7214
+ { "name": "zn-event-name", "description": "Emitted as an example." }
7215
+ ],
7216
+ "js": {
7217
+ "properties": [{ "name": "flush", "type": "boolean" }],
7218
+ "events": [
7219
+ {
7220
+ "name": "zn-event-name",
7221
+ "description": "Emitted as an example."
7222
+ }
7223
+ ]
7224
+ }
7225
+ },
7226
7226
  {
7227
7227
  "name": "zn-popup",
7228
7228
  "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Methods:**\n - **reposition()** - Forces the popup to recalculate and reposition itself.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
@@ -7482,6 +7482,150 @@
7482
7482
  ]
7483
7483
  }
7484
7484
  },
7485
+ {
7486
+ "name": "zn-preview-frame",
7487
+ "description": "Embeds a live preview iframe and drives the hp-preview postMessage\nprotocol: answers the frame's ready handshake with a config payload fetched\nfrom data-uri, auto-saves watched forms on change, refreshes the preview\nafter each save (its own, or a shell-driven save of a `refresh-on` form),\naccepts a theme payload via setTheme() that is retained and replayed\nafter every ready handshake, and grows the frame to a content height the\nembed reports so the panel scrolls an overflowing page.\n---\n\n\n### **Events:**\n - **zn-error** - Emitted when the preview reports a render error or a save fails.\n\n### **Methods:**\n - **refresh()** - Re-fetches the payload and pushes a fresh config to the preview.\n- **setTheme(theme: _Record<string, unknown>_)** - Pushes a theme payload into the preview. The payload is retained and\nre-posted after every ready handshake, so a frame reload doesn't drop an\nin-progress theme.\n\n### **CSS Properties:**\n - **--zn-preview-frame-dot-spacing** - Spacing of the backdrop dot grid (`backdrop=\"dots\"`). Defaults to 20px. _(default: undefined)_\n- **--zn-preview-frame-dot-opacity** - Opacity of the backdrop dots (`backdrop=\"dots\"`). Defaults to 0.08. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **stage** - The device-width wrapper around the iframe.\n- **iframe** - The preview iframe.\n- **error** - The error overlay.",
7488
+ "doc-url": "",
7489
+ "attributes": [
7490
+ {
7491
+ "name": "src",
7492
+ "description": "URL of the preview shell page (tokened embed URL).",
7493
+ "value": { "type": "string", "default": "''" }
7494
+ },
7495
+ {
7496
+ "name": "frame-origin",
7497
+ "description": "Expected origin of the iframe; all postMessage traffic is checked against it.",
7498
+ "value": { "type": "string", "default": "''" }
7499
+ },
7500
+ {
7501
+ "name": "data-uri",
7502
+ "description": "Endpoint returning the hp-preview:config payload JSON. The console proxy rewrites this attribute to an app-prefixed path for proper fetch resolution.",
7503
+ "value": { "type": "string", "default": "''" }
7504
+ },
7505
+ {
7506
+ "name": "watch",
7507
+ "description": "Selector (resolved against the component's root node) for the forms to watch.\nDefaults to only forms explicitly opted in via a `data-auto-save` attribute —\nunmarked forms keep normal submit behavior and are never intercepted,\nauto-saved, or used to trigger a preview refresh. Override to widen the scope.",
7508
+ "value": { "type": "string", "default": "'form[data-auto-save]'" }
7509
+ },
7510
+ {
7511
+ "name": "refresh-on",
7512
+ "description": "Selector for forms whose saves are left to the shell but should still\nrefresh the preview. These are never intercepted: the shell submits them\n(so its own response handling — alerts, refreshes — runs as normal) and the\npreview re-fetches its config once the shell reports the save complete.\nMatched by delegation on the shell's bubbled `complete` event rather than\nby attaching to the forms themselves, so a save anywhere on the page\nrefreshes the preview — including forms in a different DOM root, e.g. a\npage-level form saved while the preview sits inside a tab panel's shadow\nroot (a page's Template select lives on one tab, its preview on another).\nSet empty to disable.",
7513
+ "value": { "type": "string", "default": "'form'" }
7514
+ },
7515
+ {
7516
+ "name": "debounce",
7517
+ "description": "Debounce in ms between a form change and its auto-save.",
7518
+ "value": { "type": "number", "default": "400" }
7519
+ },
7520
+ {
7521
+ "name": "zoom",
7522
+ "description": "Zooms the previewed page out (0–1]. The frame always fills the panel;\nzoom shrinks the content browser-style, so 0.4 shows the page at 40%\nsize with correspondingly more of it visible. 1 = natural size.\nIgnored when `fill` is set.",
7523
+ "value": { "type": "number", "default": "1" }
7524
+ },
7525
+ {
7526
+ "name": "min-height",
7527
+ "description": "The visible height (in CSS pixels) of the preview panel. Fixed rather\nthan measured, because a measured height would feed back into the\nscaled iframe's layout box and grow unbounded. With `fill` set, this\nbecomes a `min-height` floor instead of the height.",
7528
+ "value": { "type": "number", "default": "480" }
7529
+ },
7530
+ {
7531
+ "name": "fill",
7532
+ "description": "Fills the panel's own column height instead of using a fixed\n`min-height` pixel height — for hosts (like zn-theme-editor) whose\nlayout already stretches the column to match a taller sibling.\n`zoom` is ignored when set: its oversize maths depends on a known\npixel height, which `fill` deliberately doesn't have.",
7533
+ "value": { "type": "boolean", "default": "false" }
7534
+ },
7535
+ {
7536
+ "name": "device",
7537
+ "description": "Constrains and centres the preview to a device width: `desktop` (100%),\n`tablet` (768px) or `mobile` (390px). The iframe element itself is\nnarrowed, so the embedded page's own media queries fire.",
7538
+ "value": { "type": "PreviewFrameDevice", "default": "'desktop'" }
7539
+ },
7540
+ {
7541
+ "name": "backdrop",
7542
+ "description": "Backdrop behind the stage: `dots` (default) is the canvas dot grid; `panel` is a plain `rgb(var(--zn-panel))` fill.",
7543
+ "value": { "type": "'dots' | 'panel'", "default": "'dots'" }
7544
+ },
7545
+ {
7546
+ "name": "interactive",
7547
+ "description": "Lets pointer input through to the embedded page. The preview is inert by\ndefault: clicks never reach the frame, so the previewed page can't be\nnavigated or submitted from inside the preview. Cross-origin content can't\nbe reached from here to cancel its own handlers, so this blocks pointer\ninput entirely — hover goes with it. Scrolling doesn't: an overflowing\npage is scrolled by the panel rather than by the frame (see _contentHeight).\n\nSet, the frame becomes a real viewport instead: it stays the panel's own\nheight and the embed scrolls itself, so there is one scrollbar rather than\na panel scrolling an oversized frame, and the embed's viewport-relative\nlayout (`100vh`, `position: fixed`, sticky headers) sizes to what's on\nscreen. _contentHeight is ignored while this is set.",
7548
+ "value": { "type": "boolean", "default": "false" }
7549
+ }
7550
+ ],
7551
+ "events": [
7552
+ {
7553
+ "name": "zn-error",
7554
+ "description": "Emitted when the preview reports a render error or a save fails."
7555
+ }
7556
+ ],
7557
+ "js": {
7558
+ "properties": [
7559
+ {
7560
+ "name": "src",
7561
+ "description": "URL of the preview shell page (tokened embed URL).",
7562
+ "type": "string"
7563
+ },
7564
+ {
7565
+ "name": "frameOrigin",
7566
+ "description": "Expected origin of the iframe; all postMessage traffic is checked against it.",
7567
+ "type": "string"
7568
+ },
7569
+ {
7570
+ "name": "dataUri",
7571
+ "description": "Endpoint returning the hp-preview:config payload JSON. The console proxy rewrites this attribute to an app-prefixed path for proper fetch resolution.",
7572
+ "type": "string"
7573
+ },
7574
+ {
7575
+ "name": "watch",
7576
+ "description": "Selector (resolved against the component's root node) for the forms to watch.\nDefaults to only forms explicitly opted in via a `data-auto-save` attribute —\nunmarked forms keep normal submit behavior and are never intercepted,\nauto-saved, or used to trigger a preview refresh. Override to widen the scope.",
7577
+ "type": "string"
7578
+ },
7579
+ {
7580
+ "name": "refreshOn",
7581
+ "description": "Selector for forms whose saves are left to the shell but should still\nrefresh the preview. These are never intercepted: the shell submits them\n(so its own response handling — alerts, refreshes — runs as normal) and the\npreview re-fetches its config once the shell reports the save complete.\nMatched by delegation on the shell's bubbled `complete` event rather than\nby attaching to the forms themselves, so a save anywhere on the page\nrefreshes the preview — including forms in a different DOM root, e.g. a\npage-level form saved while the preview sits inside a tab panel's shadow\nroot (a page's Template select lives on one tab, its preview on another).\nSet empty to disable.",
7582
+ "type": "string"
7583
+ },
7584
+ {
7585
+ "name": "debounce",
7586
+ "description": "Debounce in ms between a form change and its auto-save.",
7587
+ "type": "number"
7588
+ },
7589
+ {
7590
+ "name": "zoom",
7591
+ "description": "Zooms the previewed page out (0–1]. The frame always fills the panel;\nzoom shrinks the content browser-style, so 0.4 shows the page at 40%\nsize with correspondingly more of it visible. 1 = natural size.\nIgnored when `fill` is set.",
7592
+ "type": "number"
7593
+ },
7594
+ {
7595
+ "name": "minHeight",
7596
+ "description": "The visible height (in CSS pixels) of the preview panel. Fixed rather\nthan measured, because a measured height would feed back into the\nscaled iframe's layout box and grow unbounded. With `fill` set, this\nbecomes a `min-height` floor instead of the height.",
7597
+ "type": "number"
7598
+ },
7599
+ {
7600
+ "name": "fill",
7601
+ "description": "Fills the panel's own column height instead of using a fixed\n`min-height` pixel height — for hosts (like zn-theme-editor) whose\nlayout already stretches the column to match a taller sibling.\n`zoom` is ignored when set: its oversize maths depends on a known\npixel height, which `fill` deliberately doesn't have.",
7602
+ "type": "boolean"
7603
+ },
7604
+ {
7605
+ "name": "device",
7606
+ "description": "Constrains and centres the preview to a device width: `desktop` (100%),\n`tablet` (768px) or `mobile` (390px). The iframe element itself is\nnarrowed, so the embedded page's own media queries fire.",
7607
+ "type": "PreviewFrameDevice"
7608
+ },
7609
+ {
7610
+ "name": "backdrop",
7611
+ "description": "Backdrop behind the stage: `dots` (default) is the canvas dot grid; `panel` is a plain `rgb(var(--zn-panel))` fill.",
7612
+ "type": "'dots' | 'panel'"
7613
+ },
7614
+ {
7615
+ "name": "interactive",
7616
+ "description": "Lets pointer input through to the embedded page. The preview is inert by\ndefault: clicks never reach the frame, so the previewed page can't be\nnavigated or submitted from inside the preview. Cross-origin content can't\nbe reached from here to cancel its own handlers, so this blocks pointer\ninput entirely — hover goes with it. Scrolling doesn't: an overflowing\npage is scrolled by the panel rather than by the frame (see _contentHeight).\n\nSet, the frame becomes a real viewport instead: it stays the panel's own\nheight and the embed scrolls itself, so there is one scrollbar rather than\na panel scrolling an oversized frame, and the embed's viewport-relative\nlayout (`100vh`, `position: fixed`, sticky headers) sizes to what's on\nscreen. _contentHeight is ignored while this is set.",
7617
+ "type": "boolean"
7618
+ },
7619
+ { "name": "frame", "type": "HTMLIFrameElement" }
7620
+ ],
7621
+ "events": [
7622
+ {
7623
+ "name": "zn-error",
7624
+ "description": "Emitted when the preview reports a render error or a save fails."
7625
+ }
7626
+ ]
7627
+ }
7628
+ },
7485
7629
  {
7486
7630
  "name": "zn-priority-list",
7487
7631
  "description": "A reorderable list where each item receives a numerical priority based on its position. Supports drag-and-drop\nand keyboard reordering. Priority values are submitted as form data via hidden inputs.\n---\n\n\n### **Events:**\n - **zn-change** - Emitted when the order of items changes.\n- **zn-reorder** - Emitted when items are reordered. Call `getPriorityMap()` on the component to get the updated `{ key: string, priority: number }[]` array.\n\n### **Methods:**\n - **getPriorityMap(): _PriorityItem[]_** - Returns the priority map: an array of { key, priority } objects.\n- **checkValidity(): _boolean_** - Checks for validity but does not show a validation message.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(_message)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - _default_ - The default slot where list items are placed. Each slotted element must have a `value` attribute that uniquely identifies the item. The component automatically assigns slot names to project each item into the correct position. The item's position in the list determines its priority (top = `priority-start`, incrementing).\n- **label** - The component's label. Required for proper accessibility. Alternatively, use the `label` attribute.\n- **label-tooltip** - Used to add text displayed in a tooltip next to the label.\n- **help-text** - Text that describes how to use the component. Alternatively, use the `help-text` attribute.\n\n### **CSS Properties:**\n - **--zn-priority-list-item-gap** - The gap between list items. Defaults to `var(--zn-spacing-2x-small)`. _(default: undefined)_\n- **--zn-priority-list-item-padding** - The padding inside each item. Defaults to `var(--zn-spacing-small) var(--zn-spacing-medium)`. _(default: undefined)_\n- **--zn-priority-list-actions-gap** - The gap between an item's slotted actions. Defaults to `var(--zn-spacing-x-small)`. _(default: undefined)_\n- **--zn-priority-list-handle-color** - The color of the drag handle. Defaults to `var(--zn-color-neutral-500)`. _(default: undefined)_\n- **--zn-priority-list-priority-color** - The color of the priority number. Defaults to `var(--zn-color-neutral-600)`. _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control** - The form control wrapper.\n- **form-control-label** - The label wrapper.\n- **form-control-input** - The input area wrapper.\n- **form-control-help-text** - The help text wrapper.\n- **list** - The list container.\n- **item** - An individual list item row.\n- **drag-handle** - The drag handle icon.\n- **priority** - The priority number badge.\n- **content** - The content area of an item.",
@@ -7698,150 +7842,6 @@
7698
7842
  "events": []
7699
7843
  }
7700
7844
  },
7701
- {
7702
- "name": "zn-preview-frame",
7703
- "description": "Embeds a live preview iframe and drives the hp-preview postMessage\nprotocol: answers the frame's ready handshake with a config payload fetched\nfrom data-uri, auto-saves watched forms on change, refreshes the preview\nafter each save (its own, or a shell-driven save of a `refresh-on` form),\naccepts a theme payload via setTheme() that is retained and replayed\nafter every ready handshake, and grows the frame to a content height the\nembed reports so the panel scrolls an overflowing page.\n---\n\n\n### **Events:**\n - **zn-error** - Emitted when the preview reports a render error or a save fails.\n\n### **Methods:**\n - **refresh()** - Re-fetches the payload and pushes a fresh config to the preview.\n- **setTheme(theme: _Record<string, unknown>_)** - Pushes a theme payload into the preview. The payload is retained and\nre-posted after every ready handshake, so a frame reload doesn't drop an\nin-progress theme.\n\n### **CSS Properties:**\n - **--zn-preview-frame-dot-spacing** - Spacing of the backdrop dot grid (`backdrop=\"dots\"`). Defaults to 20px. _(default: undefined)_\n- **--zn-preview-frame-dot-opacity** - Opacity of the backdrop dots (`backdrop=\"dots\"`). Defaults to 0.08. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **stage** - The device-width wrapper around the iframe.\n- **iframe** - The preview iframe.\n- **error** - The error overlay.",
7704
- "doc-url": "",
7705
- "attributes": [
7706
- {
7707
- "name": "src",
7708
- "description": "URL of the preview shell page (tokened embed URL).",
7709
- "value": { "type": "string", "default": "''" }
7710
- },
7711
- {
7712
- "name": "frame-origin",
7713
- "description": "Expected origin of the iframe; all postMessage traffic is checked against it.",
7714
- "value": { "type": "string", "default": "''" }
7715
- },
7716
- {
7717
- "name": "data-uri",
7718
- "description": "Endpoint returning the hp-preview:config payload JSON. The console proxy rewrites this attribute to an app-prefixed path for proper fetch resolution.",
7719
- "value": { "type": "string", "default": "''" }
7720
- },
7721
- {
7722
- "name": "watch",
7723
- "description": "Selector (resolved against the component's root node) for the forms to watch.\nDefaults to only forms explicitly opted in via a `data-auto-save` attribute —\nunmarked forms keep normal submit behavior and are never intercepted,\nauto-saved, or used to trigger a preview refresh. Override to widen the scope.",
7724
- "value": { "type": "string", "default": "'form[data-auto-save]'" }
7725
- },
7726
- {
7727
- "name": "refresh-on",
7728
- "description": "Selector for forms whose saves are left to the shell but should still\nrefresh the preview. These are never intercepted: the shell submits them\n(so its own response handling — alerts, refreshes — runs as normal) and the\npreview re-fetches its config once the shell reports the save complete.\nMatched by delegation on the shell's bubbled `complete` event rather than\nby attaching to the forms themselves, so a save anywhere on the page\nrefreshes the preview — including forms in a different DOM root, e.g. a\npage-level form saved while the preview sits inside a tab panel's shadow\nroot (a page's Template select lives on one tab, its preview on another).\nSet empty to disable.",
7729
- "value": { "type": "string", "default": "'form'" }
7730
- },
7731
- {
7732
- "name": "debounce",
7733
- "description": "Debounce in ms between a form change and its auto-save.",
7734
- "value": { "type": "number", "default": "400" }
7735
- },
7736
- {
7737
- "name": "zoom",
7738
- "description": "Zooms the previewed page out (0–1]. The frame always fills the panel;\nzoom shrinks the content browser-style, so 0.4 shows the page at 40%\nsize with correspondingly more of it visible. 1 = natural size.\nIgnored when `fill` is set.",
7739
- "value": { "type": "number", "default": "1" }
7740
- },
7741
- {
7742
- "name": "min-height",
7743
- "description": "The visible height (in CSS pixels) of the preview panel. Fixed rather\nthan measured, because a measured height would feed back into the\nscaled iframe's layout box and grow unbounded. With `fill` set, this\nbecomes a `min-height` floor instead of the height.",
7744
- "value": { "type": "number", "default": "480" }
7745
- },
7746
- {
7747
- "name": "fill",
7748
- "description": "Fills the panel's own column height instead of using a fixed\n`min-height` pixel height — for hosts (like zn-theme-editor) whose\nlayout already stretches the column to match a taller sibling.\n`zoom` is ignored when set: its oversize maths depends on a known\npixel height, which `fill` deliberately doesn't have.",
7749
- "value": { "type": "boolean", "default": "false" }
7750
- },
7751
- {
7752
- "name": "device",
7753
- "description": "Constrains and centres the preview to a device width: `desktop` (100%),\n`tablet` (768px) or `mobile` (390px). The iframe element itself is\nnarrowed, so the embedded page's own media queries fire.",
7754
- "value": { "type": "PreviewFrameDevice", "default": "'desktop'" }
7755
- },
7756
- {
7757
- "name": "backdrop",
7758
- "description": "Backdrop behind the stage: `dots` (default) is the canvas dot grid; `panel` is a plain `rgb(var(--zn-panel))` fill.",
7759
- "value": { "type": "'dots' | 'panel'", "default": "'dots'" }
7760
- },
7761
- {
7762
- "name": "interactive",
7763
- "description": "Lets pointer input through to the embedded page. The preview is inert by\ndefault: clicks never reach the frame, so the previewed page can't be\nnavigated or submitted from inside the preview. Cross-origin content can't\nbe reached from here to cancel its own handlers, so this blocks pointer\ninput entirely — hover goes with it. Scrolling doesn't: an overflowing\npage is scrolled by the panel rather than by the frame (see _contentHeight).\n\nSet, the frame becomes a real viewport instead: it stays the panel's own\nheight and the embed scrolls itself, so there is one scrollbar rather than\na panel scrolling an oversized frame, and the embed's viewport-relative\nlayout (`100vh`, `position: fixed`, sticky headers) sizes to what's on\nscreen. _contentHeight is ignored while this is set.",
7764
- "value": { "type": "boolean", "default": "false" }
7765
- }
7766
- ],
7767
- "events": [
7768
- {
7769
- "name": "zn-error",
7770
- "description": "Emitted when the preview reports a render error or a save fails."
7771
- }
7772
- ],
7773
- "js": {
7774
- "properties": [
7775
- {
7776
- "name": "src",
7777
- "description": "URL of the preview shell page (tokened embed URL).",
7778
- "type": "string"
7779
- },
7780
- {
7781
- "name": "frameOrigin",
7782
- "description": "Expected origin of the iframe; all postMessage traffic is checked against it.",
7783
- "type": "string"
7784
- },
7785
- {
7786
- "name": "dataUri",
7787
- "description": "Endpoint returning the hp-preview:config payload JSON. The console proxy rewrites this attribute to an app-prefixed path for proper fetch resolution.",
7788
- "type": "string"
7789
- },
7790
- {
7791
- "name": "watch",
7792
- "description": "Selector (resolved against the component's root node) for the forms to watch.\nDefaults to only forms explicitly opted in via a `data-auto-save` attribute —\nunmarked forms keep normal submit behavior and are never intercepted,\nauto-saved, or used to trigger a preview refresh. Override to widen the scope.",
7793
- "type": "string"
7794
- },
7795
- {
7796
- "name": "refreshOn",
7797
- "description": "Selector for forms whose saves are left to the shell but should still\nrefresh the preview. These are never intercepted: the shell submits them\n(so its own response handling — alerts, refreshes — runs as normal) and the\npreview re-fetches its config once the shell reports the save complete.\nMatched by delegation on the shell's bubbled `complete` event rather than\nby attaching to the forms themselves, so a save anywhere on the page\nrefreshes the preview — including forms in a different DOM root, e.g. a\npage-level form saved while the preview sits inside a tab panel's shadow\nroot (a page's Template select lives on one tab, its preview on another).\nSet empty to disable.",
7798
- "type": "string"
7799
- },
7800
- {
7801
- "name": "debounce",
7802
- "description": "Debounce in ms between a form change and its auto-save.",
7803
- "type": "number"
7804
- },
7805
- {
7806
- "name": "zoom",
7807
- "description": "Zooms the previewed page out (0–1]. The frame always fills the panel;\nzoom shrinks the content browser-style, so 0.4 shows the page at 40%\nsize with correspondingly more of it visible. 1 = natural size.\nIgnored when `fill` is set.",
7808
- "type": "number"
7809
- },
7810
- {
7811
- "name": "minHeight",
7812
- "description": "The visible height (in CSS pixels) of the preview panel. Fixed rather\nthan measured, because a measured height would feed back into the\nscaled iframe's layout box and grow unbounded. With `fill` set, this\nbecomes a `min-height` floor instead of the height.",
7813
- "type": "number"
7814
- },
7815
- {
7816
- "name": "fill",
7817
- "description": "Fills the panel's own column height instead of using a fixed\n`min-height` pixel height — for hosts (like zn-theme-editor) whose\nlayout already stretches the column to match a taller sibling.\n`zoom` is ignored when set: its oversize maths depends on a known\npixel height, which `fill` deliberately doesn't have.",
7818
- "type": "boolean"
7819
- },
7820
- {
7821
- "name": "device",
7822
- "description": "Constrains and centres the preview to a device width: `desktop` (100%),\n`tablet` (768px) or `mobile` (390px). The iframe element itself is\nnarrowed, so the embedded page's own media queries fire.",
7823
- "type": "PreviewFrameDevice"
7824
- },
7825
- {
7826
- "name": "backdrop",
7827
- "description": "Backdrop behind the stage: `dots` (default) is the canvas dot grid; `panel` is a plain `rgb(var(--zn-panel))` fill.",
7828
- "type": "'dots' | 'panel'"
7829
- },
7830
- {
7831
- "name": "interactive",
7832
- "description": "Lets pointer input through to the embedded page. The preview is inert by\ndefault: clicks never reach the frame, so the previewed page can't be\nnavigated or submitted from inside the preview. Cross-origin content can't\nbe reached from here to cancel its own handlers, so this blocks pointer\ninput entirely — hover goes with it. Scrolling doesn't: an overflowing\npage is scrolled by the panel rather than by the frame (see _contentHeight).\n\nSet, the frame becomes a real viewport instead: it stays the panel's own\nheight and the embed scrolls itself, so there is one scrollbar rather than\na panel scrolling an oversized frame, and the embed's viewport-relative\nlayout (`100vh`, `position: fixed`, sticky headers) sizes to what's on\nscreen. _contentHeight is ignored while this is set.",
7833
- "type": "boolean"
7834
- },
7835
- { "name": "frame", "type": "HTMLIFrameElement" }
7836
- ],
7837
- "events": [
7838
- {
7839
- "name": "zn-error",
7840
- "description": "Emitted when the preview reports a render error or a save fails."
7841
- }
7842
- ]
7843
- }
7844
- },
7845
7845
  {
7846
7846
  "name": "zn-progress-tile",
7847
7847
  "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
@@ -8643,6 +8643,45 @@
8643
8643
  ]
8644
8644
  }
8645
8645
  },
8646
+ {
8647
+ "name": "zn-scroll-container",
8648
+ "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--zn-scroll-container-height** - The height and maximum height of the scroll container. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
8649
+ "doc-url": "",
8650
+ "attributes": [
8651
+ {
8652
+ "name": "height",
8653
+ "description": "The height and maximum height of the scroll container.",
8654
+ "value": { "type": "string", "default": "''" }
8655
+ },
8656
+ {
8657
+ "name": "start-scrolled",
8658
+ "value": { "type": "boolean", "default": "false" }
8659
+ }
8660
+ ],
8661
+ "slots": [
8662
+ { "name": "", "description": "The default slot." },
8663
+ { "name": "example", "description": "An example slot." }
8664
+ ],
8665
+ "events": [
8666
+ { "name": "zn-event-name", "description": "Emitted as an example." }
8667
+ ],
8668
+ "js": {
8669
+ "properties": [
8670
+ {
8671
+ "name": "height",
8672
+ "description": "The height and maximum height of the scroll container.",
8673
+ "type": "string"
8674
+ },
8675
+ { "name": "startScrolled", "type": "boolean" }
8676
+ ],
8677
+ "events": [
8678
+ {
8679
+ "name": "zn-event-name",
8680
+ "description": "Emitted as an example."
8681
+ }
8682
+ ]
8683
+ }
8684
+ },
8646
8685
  {
8647
8686
  "name": "zn-schedule-builder",
8648
8687
  "description": "Builds a weekly opening-hours schedule as a drag-to-paint calendar or a compact list of\ntime ranges, and posts the result as JSON.\n---\n\n\n### **Events:**\n - **zn-change** - Emitted when the schedule changes.\n\n### **Methods:**\n - **checkValidity(): _boolean_** - Checks validity but does not show a validation message.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **setDay(day: _ScheduleDay_, ranges: _ScheduleRange[]_)** - Replaces the hours for a single day, in the save timezone.\n- **getDay(day: _ScheduleDay_): _ScheduleRange[]_** - Reads the hours for a single day, in the save timezone.\n- **setDisplayDay(day: _ScheduleDay_, ranges: _ScheduleRange[]_)** - Replaces the hours for a single day, given in the display timezone.\n\n### **Slots:**\n - **label** - The schedule's label. Alternatively, use the `label` attribute.\n- **help-text** - Text that describes how to use the schedule. Alternatively, use the `help-text` attribute.\n\n### **CSS Properties:**\n - **--slot-height** - The height of a single time slot in the calendar. Defaults to `18px`. _(default: undefined)_\n- **--gutter-width** - The width of the calendar's time gutter. Defaults to `64px`. _(default: undefined)_\n- **--open-color** - The fill used for open hours. _(default: undefined)_\n- **--reduced-color** - The fill used for hours an exception removes. _(default: undefined)_\n\n### **CSS Parts:**\n - **form-control** - The form control that wraps the builder, label and help text.\n- **base** - The component's base wrapper.\n- **toolbar** - The row above the builder holding the hint, legend and view toggle.\n- **calendar** - The calendar view wrapper.\n- **list** - The form (list) view wrapper.\n- **summary** - The summary panel beside the calendar.",
@@ -8915,62 +8954,23 @@
8915
8954
  {
8916
8955
  "name": "validity",
8917
8956
  "description": "Gets the validity state object.",
8918
- "type": "ValidityState"
8919
- },
8920
- {
8921
- "name": "validationMessage",
8922
- "description": "Gets the validation message.",
8923
- "type": "string"
8924
- },
8925
- {
8926
- "name": "displayedDays",
8927
- "description": "The hours as currently shown, in the display timezone.",
8928
- "type": "ScheduleDayMap"
8929
- }
8930
- ],
8931
- "events": [
8932
- {
8933
- "name": "zn-change",
8934
- "description": "Emitted when the schedule changes."
8935
- }
8936
- ]
8937
- }
8938
- },
8939
- {
8940
- "name": "zn-scroll-container",
8941
- "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--zn-scroll-container-height** - The height and maximum height of the scroll container. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
8942
- "doc-url": "",
8943
- "attributes": [
8944
- {
8945
- "name": "height",
8946
- "description": "The height and maximum height of the scroll container.",
8947
- "value": { "type": "string", "default": "''" }
8948
- },
8949
- {
8950
- "name": "start-scrolled",
8951
- "value": { "type": "boolean", "default": "false" }
8952
- }
8953
- ],
8954
- "slots": [
8955
- { "name": "", "description": "The default slot." },
8956
- { "name": "example", "description": "An example slot." }
8957
- ],
8958
- "events": [
8959
- { "name": "zn-event-name", "description": "Emitted as an example." }
8960
- ],
8961
- "js": {
8962
- "properties": [
8957
+ "type": "ValidityState"
8958
+ },
8963
8959
  {
8964
- "name": "height",
8965
- "description": "The height and maximum height of the scroll container.",
8960
+ "name": "validationMessage",
8961
+ "description": "Gets the validation message.",
8966
8962
  "type": "string"
8967
8963
  },
8968
- { "name": "startScrolled", "type": "boolean" }
8964
+ {
8965
+ "name": "displayedDays",
8966
+ "description": "The hours as currently shown, in the display timezone.",
8967
+ "type": "ScheduleDayMap"
8968
+ }
8969
8969
  ],
8970
8970
  "events": [
8971
8971
  {
8972
- "name": "zn-event-name",
8973
- "description": "Emitted as an example."
8972
+ "name": "zn-change",
8973
+ "description": "Emitted when the schedule changes."
8974
8974
  }
8975
8975
  ]
8976
8976
  }
@@ -11668,6 +11668,126 @@
11668
11668
  ]
11669
11669
  }
11670
11670
  },
11671
+ {
11672
+ "name": "zn-tile",
11673
+ "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
11674
+ "doc-url": "",
11675
+ "attributes": [
11676
+ { "name": "caption", "value": { "type": "string" } },
11677
+ { "name": "description", "value": { "type": "string" } },
11678
+ { "name": "href", "value": { "type": "string" } },
11679
+ { "name": "data-target", "value": { "type": "string" } },
11680
+ { "name": "gaid", "value": { "type": "string" } },
11681
+ { "name": "data-uri", "value": { "type": "string" } },
11682
+ { "name": "flush", "value": { "type": "boolean" } },
11683
+ { "name": "flush-x", "value": { "type": "boolean" } },
11684
+ { "name": "flush-y", "value": { "type": "boolean" } },
11685
+ { "name": "inline", "value": { "type": "boolean" } },
11686
+ {
11687
+ "name": "plain",
11688
+ "description": "Renders the caption in the normal table-content weight instead of bold.",
11689
+ "value": { "type": "boolean" }
11690
+ },
11691
+ {
11692
+ "name": "grouped",
11693
+ "description": "Set by `zn-tile-group` to lay the tile out as a shared-column subgrid row.",
11694
+ "value": { "type": "boolean" }
11695
+ }
11696
+ ],
11697
+ "slots": [
11698
+ { "name": "", "description": "The default slot." },
11699
+ { "name": "example", "description": "An example slot." }
11700
+ ],
11701
+ "events": [
11702
+ { "name": "zn-event-name", "description": "Emitted as an example." }
11703
+ ],
11704
+ "js": {
11705
+ "properties": [
11706
+ { "name": "caption", "type": "string" },
11707
+ { "name": "description", "type": "string" },
11708
+ { "name": "href", "type": "string" },
11709
+ { "name": "dataTarget", "type": "string" },
11710
+ { "name": "gaid", "type": "string" },
11711
+ { "name": "dataUri", "type": "string" },
11712
+ { "name": "flush", "type": "boolean" },
11713
+ { "name": "flushX", "type": "boolean" },
11714
+ { "name": "flushY", "type": "boolean" },
11715
+ { "name": "inline", "type": "boolean" },
11716
+ {
11717
+ "name": "plain",
11718
+ "description": "Renders the caption in the normal table-content weight instead of bold.",
11719
+ "type": "boolean"
11720
+ },
11721
+ {
11722
+ "name": "grouped",
11723
+ "description": "Set by `zn-tile-group` to lay the tile out as a shared-column subgrid row.",
11724
+ "type": "boolean"
11725
+ }
11726
+ ],
11727
+ "events": [
11728
+ {
11729
+ "name": "zn-event-name",
11730
+ "description": "Emitted as an example."
11731
+ }
11732
+ ]
11733
+ }
11734
+ },
11735
+ {
11736
+ "name": "zn-tile-group",
11737
+ "description": "Aligns a list of `zn-tile` rows into shared, content-driven columns so values\nand actions line up across every row, with optional dividing borders.\n---\n\n\n### **Slots:**\n - _default_ - One or more `zn-tile` elements.\n\n### **CSS Properties:**\n - **--zn-tile-cols** - The number of value/action columns (set automatically). _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper (the grid container).",
11738
+ "doc-url": "",
11739
+ "attributes": [
11740
+ {
11741
+ "name": "divide",
11742
+ "description": "Draws a dividing border between rows.",
11743
+ "value": { "type": "boolean", "default": "false" }
11744
+ }
11745
+ ],
11746
+ "slots": [
11747
+ { "name": "", "description": "One or more `zn-tile` elements." }
11748
+ ],
11749
+ "events": [],
11750
+ "js": {
11751
+ "properties": [
11752
+ {
11753
+ "name": "divide",
11754
+ "description": "Draws a dividing border between rows.",
11755
+ "type": "boolean"
11756
+ }
11757
+ ],
11758
+ "events": []
11759
+ }
11760
+ },
11761
+ {
11762
+ "name": "zn-tile-property",
11763
+ "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
11764
+ "doc-url": "",
11765
+ "attributes": [
11766
+ { "name": "caption", "value": { "type": "string" } },
11767
+ { "name": "description", "value": { "type": "string" } },
11768
+ { "name": "icon", "value": { "type": "string" } }
11769
+ ],
11770
+ "slots": [
11771
+ { "name": "", "description": "The default slot." },
11772
+ { "name": "example", "description": "An example slot." }
11773
+ ],
11774
+ "events": [
11775
+ { "name": "zn-event-name", "description": "Emitted as an example." }
11776
+ ],
11777
+ "js": {
11778
+ "properties": [
11779
+ { "name": "caption", "type": "string" },
11780
+ { "name": "description", "type": "string" },
11781
+ { "name": "icon", "type": "string" }
11782
+ ],
11783
+ "events": [
11784
+ {
11785
+ "name": "zn-event-name",
11786
+ "description": "Emitted as an example."
11787
+ }
11788
+ ]
11789
+ }
11790
+ },
11671
11791
  {
11672
11792
  "name": "zn-thumbnail-group",
11673
11793
  "description": "Lays a set of `zn-thumbnail` elements out as a single scrollable row, with a\n\"Show All\" toggle that expands them into a wrapping grid.\n---\n\n\n### **Events:**\n - **zn-expand** - Emitted when the group expands into the full grid.\n- **zn-collapse** - Emitted when the group collapses back to a single row.\n- **zn-change** - Emitted when the selected thumbnail changes (`selectable` groups only).\n\n### **Methods:**\n - **show()** - Expands the group into the full grid.\n- **hide()** - Collapses the group back to a single row.\n\n### **Slots:**\n - _default_ - One or more `zn-thumbnail` elements.\n- **caption** - Replaces the heading text.\n- **actions** - Extra content in the header, before the toggle.\n\n### **CSS Properties:**\n - **--zn-thumbnail-width** - Track width of a thumbnail. Defaults to 180px. Also settable with the `thumbnail-width` attribute. _(default: undefined)_\n- **--zn-thumbnail-gap** - Gap between thumbnails. Also settable with the `gap` attribute. _(default: undefined)_\n- **--zn-thumbnail-aspect-ratio** - Aspect ratio of every thumbnail in the group. Also settable with the `aspect-ratio` attribute. Any `zn-thumbnail` custom property set here is inherited by the slotted thumbnails. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **header** - The header row holding the caption and toggle.\n- **caption** - The heading text.\n- **toggle** - The show all / show less button.\n- **items** - The scrolling row / expanded grid that holds the thumbnails.",
@@ -11838,126 +11958,6 @@
11838
11958
  ]
11839
11959
  }
11840
11960
  },
11841
- {
11842
- "name": "zn-tile",
11843
- "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
11844
- "doc-url": "",
11845
- "attributes": [
11846
- { "name": "caption", "value": { "type": "string" } },
11847
- { "name": "description", "value": { "type": "string" } },
11848
- { "name": "href", "value": { "type": "string" } },
11849
- { "name": "data-target", "value": { "type": "string" } },
11850
- { "name": "gaid", "value": { "type": "string" } },
11851
- { "name": "data-uri", "value": { "type": "string" } },
11852
- { "name": "flush", "value": { "type": "boolean" } },
11853
- { "name": "flush-x", "value": { "type": "boolean" } },
11854
- { "name": "flush-y", "value": { "type": "boolean" } },
11855
- { "name": "inline", "value": { "type": "boolean" } },
11856
- {
11857
- "name": "plain",
11858
- "description": "Renders the caption in the normal table-content weight instead of bold.",
11859
- "value": { "type": "boolean" }
11860
- },
11861
- {
11862
- "name": "grouped",
11863
- "description": "Set by `zn-tile-group` to lay the tile out as a shared-column subgrid row.",
11864
- "value": { "type": "boolean" }
11865
- }
11866
- ],
11867
- "slots": [
11868
- { "name": "", "description": "The default slot." },
11869
- { "name": "example", "description": "An example slot." }
11870
- ],
11871
- "events": [
11872
- { "name": "zn-event-name", "description": "Emitted as an example." }
11873
- ],
11874
- "js": {
11875
- "properties": [
11876
- { "name": "caption", "type": "string" },
11877
- { "name": "description", "type": "string" },
11878
- { "name": "href", "type": "string" },
11879
- { "name": "dataTarget", "type": "string" },
11880
- { "name": "gaid", "type": "string" },
11881
- { "name": "dataUri", "type": "string" },
11882
- { "name": "flush", "type": "boolean" },
11883
- { "name": "flushX", "type": "boolean" },
11884
- { "name": "flushY", "type": "boolean" },
11885
- { "name": "inline", "type": "boolean" },
11886
- {
11887
- "name": "plain",
11888
- "description": "Renders the caption in the normal table-content weight instead of bold.",
11889
- "type": "boolean"
11890
- },
11891
- {
11892
- "name": "grouped",
11893
- "description": "Set by `zn-tile-group` to lay the tile out as a shared-column subgrid row.",
11894
- "type": "boolean"
11895
- }
11896
- ],
11897
- "events": [
11898
- {
11899
- "name": "zn-event-name",
11900
- "description": "Emitted as an example."
11901
- }
11902
- ]
11903
- }
11904
- },
11905
- {
11906
- "name": "zn-tile-group",
11907
- "description": "Aligns a list of `zn-tile` rows into shared, content-driven columns so values\nand actions line up across every row, with optional dividing borders.\n---\n\n\n### **Slots:**\n - _default_ - One or more `zn-tile` elements.\n\n### **CSS Properties:**\n - **--zn-tile-cols** - The number of value/action columns (set automatically). _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper (the grid container).",
11908
- "doc-url": "",
11909
- "attributes": [
11910
- {
11911
- "name": "divide",
11912
- "description": "Draws a dividing border between rows.",
11913
- "value": { "type": "boolean", "default": "false" }
11914
- }
11915
- ],
11916
- "slots": [
11917
- { "name": "", "description": "One or more `zn-tile` elements." }
11918
- ],
11919
- "events": [],
11920
- "js": {
11921
- "properties": [
11922
- {
11923
- "name": "divide",
11924
- "description": "Draws a dividing border between rows.",
11925
- "type": "boolean"
11926
- }
11927
- ],
11928
- "events": []
11929
- }
11930
- },
11931
- {
11932
- "name": "zn-tile-property",
11933
- "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
11934
- "doc-url": "",
11935
- "attributes": [
11936
- { "name": "caption", "value": { "type": "string" } },
11937
- { "name": "description", "value": { "type": "string" } },
11938
- { "name": "icon", "value": { "type": "string" } }
11939
- ],
11940
- "slots": [
11941
- { "name": "", "description": "The default slot." },
11942
- { "name": "example", "description": "An example slot." }
11943
- ],
11944
- "events": [
11945
- { "name": "zn-event-name", "description": "Emitted as an example." }
11946
- ],
11947
- "js": {
11948
- "properties": [
11949
- { "name": "caption", "type": "string" },
11950
- { "name": "description", "type": "string" },
11951
- { "name": "icon", "type": "string" }
11952
- ],
11953
- "events": [
11954
- {
11955
- "name": "zn-event-name",
11956
- "description": "Emitted as an example."
11957
- }
11958
- ]
11959
- }
11960
- },
11961
11961
  {
11962
11962
  "name": "zn-timer",
11963
11963
  "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",