@kubex/zinc 1.1.97 → 1.1.98

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 (39) hide show
  1. package/dist/chunks/zn.R2EAU6OS.js +1 -0
  2. package/dist/custom-elements.json +1422 -61
  3. package/dist/vscode.html-custom-data.json +188 -2
  4. package/dist/web-types.json +462 -5
  5. package/dist/zn.d.ts +326 -2
  6. package/dist/zn.min.js +582 -457
  7. package/docs/pages/components/button.md +11 -1
  8. package/docs/pages/components/chart.md +165 -3
  9. package/docs/pages/components/icon-picker.md +8 -0
  10. package/docs/pages/components/thumbnail-group.md +216 -0
  11. package/docs/pages/components/thumbnail.md +349 -0
  12. package/docs/pages/components/well.md +34 -0
  13. package/package.json +1 -1
  14. package/src/components/button/button.component.ts +8 -0
  15. package/src/components/chart/builders.test.ts +190 -1
  16. package/src/components/chart/builders.ts +246 -4
  17. package/src/components/chart/chart.component.ts +33 -1
  18. package/src/components/chart/chart.test.ts +66 -1
  19. package/src/components/chart/echarts-loader.ts +10 -0
  20. package/src/components/collapsible/collapsible.component.ts +49 -4
  21. package/src/components/collapsible/collapsible.scss +33 -14
  22. package/src/components/header/header.scss +1 -1
  23. package/src/components/icon-picker/icon-picker.component.ts +3 -0
  24. package/src/components/icon-picker/lucide-icons.ts +1756 -0
  25. package/src/components/page/page.scss +1 -1
  26. package/src/components/remarkd-editor/remarkd-editor.test.ts +39 -0
  27. package/src/components/split-pane/split-pane.scss +21 -15
  28. package/src/components/thumbnail/index.ts +12 -0
  29. package/src/components/thumbnail/thumbnail.component.ts +460 -0
  30. package/src/components/thumbnail/thumbnail.scss +360 -0
  31. package/src/components/thumbnail/thumbnail.test.ts +379 -0
  32. package/src/components/thumbnail-group/index.ts +12 -0
  33. package/src/components/thumbnail-group/thumbnail-group.component.ts +268 -0
  34. package/src/components/thumbnail-group/thumbnail-group.scss +87 -0
  35. package/src/components/thumbnail-group/thumbnail-group.test.ts +151 -0
  36. package/src/components/well/well.component.ts +22 -4
  37. package/src/components/well/well.scss +24 -0
  38. package/src/components/well/well.test.ts +43 -0
  39. package/src/zinc.ts +2 -0
@@ -1622,6 +1622,15 @@
1622
1622
  },
1623
1623
  "attribute": "tooltip"
1624
1624
  },
1625
+ {
1626
+ "kind": "field",
1627
+ "name": "label",
1628
+ "type": {
1629
+ "text": "string"
1630
+ },
1631
+ "description": "Accessible name for the button. Icon-only buttons fall back to `tooltip`.",
1632
+ "attribute": "label"
1633
+ },
1625
1634
  {
1626
1635
  "kind": "field",
1627
1636
  "name": "autoClick",
@@ -2067,6 +2076,14 @@
2067
2076
  },
2068
2077
  "fieldName": "tooltip"
2069
2078
  },
2079
+ {
2080
+ "name": "label",
2081
+ "type": {
2082
+ "text": "string"
2083
+ },
2084
+ "description": "Accessible name for the button. Icon-only buttons fall back to `tooltip`.",
2085
+ "fieldName": "label"
2086
+ },
2070
2087
  {
2071
2088
  "name": "auto-click",
2072
2089
  "type": {
@@ -3185,6 +3202,24 @@
3185
3202
  "default": "[]",
3186
3203
  "attribute": "categories"
3187
3204
  },
3205
+ {
3206
+ "kind": "field",
3207
+ "name": "yCategories",
3208
+ "type": {
3209
+ "text": "string[]"
3210
+ },
3211
+ "default": "[]",
3212
+ "attribute": "y-categories"
3213
+ },
3214
+ {
3215
+ "kind": "field",
3216
+ "name": "indicators",
3217
+ "type": {
3218
+ "text": "RadarIndicator[]"
3219
+ },
3220
+ "default": "[]",
3221
+ "attribute": "indicators"
3222
+ },
3188
3223
  {
3189
3224
  "kind": "field",
3190
3225
  "name": "xAxis",
@@ -3290,6 +3325,46 @@
3290
3325
  "default": "false",
3291
3326
  "attribute": "smooth"
3292
3327
  },
3328
+ {
3329
+ "kind": "field",
3330
+ "name": "innerRadius",
3331
+ "type": {
3332
+ "text": "number | string | undefined"
3333
+ },
3334
+ "attribute": "inner-radius"
3335
+ },
3336
+ {
3337
+ "kind": "field",
3338
+ "name": "outerRadius",
3339
+ "type": {
3340
+ "text": "number | string | undefined"
3341
+ },
3342
+ "attribute": "outer-radius"
3343
+ },
3344
+ {
3345
+ "kind": "field",
3346
+ "name": "showLabels",
3347
+ "type": {
3348
+ "text": "boolean | undefined"
3349
+ },
3350
+ "attribute": "show-labels"
3351
+ },
3352
+ {
3353
+ "kind": "field",
3354
+ "name": "minValue",
3355
+ "type": {
3356
+ "text": "number | undefined"
3357
+ },
3358
+ "attribute": "min-value"
3359
+ },
3360
+ {
3361
+ "kind": "field",
3362
+ "name": "maxValue",
3363
+ "type": {
3364
+ "text": "number | undefined"
3365
+ },
3366
+ "attribute": "max-value"
3367
+ },
3293
3368
  {
3294
3369
  "kind": "field",
3295
3370
  "name": "scale",
@@ -3424,6 +3499,22 @@
3424
3499
  "default": "[]",
3425
3500
  "fieldName": "categories"
3426
3501
  },
3502
+ {
3503
+ "name": "y-categories",
3504
+ "type": {
3505
+ "text": "string[]"
3506
+ },
3507
+ "default": "[]",
3508
+ "fieldName": "yCategories"
3509
+ },
3510
+ {
3511
+ "name": "indicators",
3512
+ "type": {
3513
+ "text": "RadarIndicator[]"
3514
+ },
3515
+ "default": "[]",
3516
+ "fieldName": "indicators"
3517
+ },
3427
3518
  {
3428
3519
  "name": "xaxis",
3429
3520
  "type": {
@@ -3516,6 +3607,41 @@
3516
3607
  "default": "false",
3517
3608
  "fieldName": "smooth"
3518
3609
  },
3610
+ {
3611
+ "name": "inner-radius",
3612
+ "type": {
3613
+ "text": "number | string | undefined"
3614
+ },
3615
+ "fieldName": "innerRadius"
3616
+ },
3617
+ {
3618
+ "name": "outer-radius",
3619
+ "type": {
3620
+ "text": "number | string | undefined"
3621
+ },
3622
+ "fieldName": "outerRadius"
3623
+ },
3624
+ {
3625
+ "name": "show-labels",
3626
+ "type": {
3627
+ "text": "boolean | undefined"
3628
+ },
3629
+ "fieldName": "showLabels"
3630
+ },
3631
+ {
3632
+ "name": "min-value",
3633
+ "type": {
3634
+ "text": "number | undefined"
3635
+ },
3636
+ "fieldName": "minValue"
3637
+ },
3638
+ {
3639
+ "name": "max-value",
3640
+ "type": {
3641
+ "text": "number | undefined"
3642
+ },
3643
+ "fieldName": "maxValue"
3644
+ },
3519
3645
  {
3520
3646
  "name": "scale",
3521
3647
  "type": {
@@ -5554,6 +5680,23 @@
5554
5680
  },
5555
5681
  "default": "0"
5556
5682
  },
5683
+ {
5684
+ "kind": "field",
5685
+ "name": "animating",
5686
+ "type": {
5687
+ "text": "boolean"
5688
+ },
5689
+ "privacy": "private",
5690
+ "default": "false"
5691
+ },
5692
+ {
5693
+ "kind": "field",
5694
+ "name": "animatingTimer",
5695
+ "type": {
5696
+ "text": "ReturnType<typeof setTimeout> | undefined"
5697
+ },
5698
+ "privacy": "private"
5699
+ },
5557
5700
  {
5558
5701
  "kind": "field",
5559
5702
  "name": "_store",
@@ -5590,6 +5733,21 @@
5590
5733
  "name": "handleCaptionToggle",
5591
5734
  "privacy": "public"
5592
5735
  },
5736
+ {
5737
+ "kind": "method",
5738
+ "name": "startAnimating",
5739
+ "privacy": "private"
5740
+ },
5741
+ {
5742
+ "kind": "method",
5743
+ "name": "stopAnimating",
5744
+ "privacy": "private"
5745
+ },
5746
+ {
5747
+ "kind": "field",
5748
+ "name": "handleTransitionEnd",
5749
+ "privacy": "private"
5750
+ },
5593
5751
  {
5594
5752
  "kind": "field",
5595
5753
  "name": "handleCollapse"
@@ -45394,41 +45552,188 @@
45394
45552
  },
45395
45553
  {
45396
45554
  "kind": "javascript-module",
45397
- "path": "components/tile/tile.js",
45555
+ "path": "components/thumbnail/thumbnail.js",
45398
45556
  "declarations": [
45399
45557
  {
45400
45558
  "kind": "class",
45401
45559
  "description": "",
45402
- "name": "ZnTile",
45560
+ "name": "ZnThumbnail",
45403
45561
  "cssProperties": [
45404
45562
  {
45405
- "description": "An example CSS custom property.",
45406
- "name": "--example"
45563
+ "description": "Aspect ratio of the media frame. Defaults to 16 / 9. The `aspect-ratio` attribute sets this on the thumbnail itself; set the property on any ancestor (including a `zn-thumbnail-group`) to apply it to every thumbnail beneath it.",
45564
+ "name": "--zn-thumbnail-aspect-ratio"
45565
+ },
45566
+ {
45567
+ "description": "Corner radius of the media frame.",
45568
+ "name": "--zn-thumbnail-radius"
45569
+ },
45570
+ {
45571
+ "description": "Overrides the measured aspect ratio of the preview panel. By default the panel takes the asset's own ratio so it wraps the image exactly.",
45572
+ "name": "--zn-thumbnail-preview-aspect-ratio"
45573
+ },
45574
+ {
45575
+ "description": "Largest width the preview may take. Defaults to 70vw.",
45576
+ "name": "--zn-thumbnail-preview-max-width"
45577
+ },
45578
+ {
45579
+ "description": "Largest height the preview may take. Defaults to 70vh.",
45580
+ "name": "--zn-thumbnail-preview-max-height"
45581
+ },
45582
+ {
45583
+ "description": "Corner radius of the preview panel.",
45584
+ "name": "--zn-thumbnail-preview-radius"
45585
+ },
45586
+ {
45587
+ "description": "Corner radius of a badge, action or preview chip.",
45588
+ "name": "--zn-thumbnail-chip-radius"
45589
+ },
45590
+ {
45591
+ "description": "Background of a badge, action or preview chip.",
45592
+ "name": "--zn-thumbnail-chip-background"
45593
+ },
45594
+ {
45595
+ "description": "Hover background of an action or preview chip.",
45596
+ "name": "--zn-thumbnail-chip-background-hover"
45597
+ },
45598
+ {
45599
+ "description": "Foreground colour of a badge, action or preview chip.",
45600
+ "name": "--zn-thumbnail-chip-color"
45601
+ },
45602
+ {
45603
+ "description": "Gap between adjacent chips.",
45604
+ "name": "--zn-thumbnail-chip-gap"
45605
+ },
45606
+ {
45607
+ "description": "Opacity of a badge, holding it back from the action chips beside it. Defaults to 0.65.",
45608
+ "name": "--zn-thumbnail-badge-opacity"
45609
+ },
45610
+ {
45611
+ "description": "Ring colour for the selected state.",
45612
+ "name": "--zn-thumbnail-selected-color"
45613
+ },
45614
+ {
45615
+ "description": "Ring colour for the active state.",
45616
+ "name": "--zn-thumbnail-active-color"
45407
45617
  }
45408
45618
  ],
45409
45619
  "cssParts": [
45410
45620
  {
45411
45621
  "description": "The component's base wrapper.",
45412
45622
  "name": "base"
45623
+ },
45624
+ {
45625
+ "description": "The anchor (or div) covering the media and caption.",
45626
+ "name": "link"
45627
+ },
45628
+ {
45629
+ "description": "The fixed aspect-ratio media frame.",
45630
+ "name": "media"
45631
+ },
45632
+ {
45633
+ "description": "The built-in image element.",
45634
+ "name": "image"
45635
+ },
45636
+ {
45637
+ "description": "The layer holding the badge, actions and preview button.",
45638
+ "name": "overlay"
45639
+ },
45640
+ {
45641
+ "description": "The bottom-left badge container.",
45642
+ "name": "badge"
45643
+ },
45644
+ {
45645
+ "description": "The bottom-right actions container.",
45646
+ "name": "actions"
45647
+ },
45648
+ {
45649
+ "description": "The built-in preview trigger, when `preview-trigger=\"button\"`.",
45650
+ "name": "preview-button"
45651
+ },
45652
+ {
45653
+ "description": "The caption beneath the media.",
45654
+ "name": "caption"
45655
+ },
45656
+ {
45657
+ "description": "The preview `<dialog>`.",
45658
+ "name": "preview"
45659
+ },
45660
+ {
45661
+ "description": "The full-screen backdrop behind the preview.",
45662
+ "name": "preview-backdrop"
45663
+ },
45664
+ {
45665
+ "description": "The rounded panel the preview media sits in.",
45666
+ "name": "preview-frame"
45667
+ },
45668
+ {
45669
+ "description": "The full-size image inside the preview.",
45670
+ "name": "preview-image"
45671
+ },
45672
+ {
45673
+ "description": "The preview's close button.",
45674
+ "name": "preview-close"
45413
45675
  }
45414
45676
  ],
45415
45677
  "slots": [
45416
45678
  {
45417
- "description": "The default slot.",
45679
+ "description": "Fallback content rendered in place of the media when no `src` is set.",
45418
45680
  "name": ""
45419
45681
  },
45420
45682
  {
45421
- "description": "An example slot.",
45422
- "name": "example"
45683
+ "description": "Replaces the built-in `<img>` (e.g. a video, canvas or `zn-icon`).",
45684
+ "name": "image"
45685
+ },
45686
+ {
45687
+ "description": "Replaces the caption text.",
45688
+ "name": "caption"
45689
+ },
45690
+ {
45691
+ "description": "Content pinned to the bottom-left of the media (e.g. a play indicator). Badges take no pointer events and are held back on opacity, so they read as information about the asset rather than as something to click.",
45692
+ "name": "badge"
45693
+ },
45694
+ {
45695
+ "description": "Controls pinned to the bottom-right of the media (e.g. a download button). Each slotted element becomes its own chip, so several actions read as separate icons on the thumbnail rather than one grouped pill. This sits outside the thumbnail's link, so buttons and links here behave normally and never select the thumbnail or follow its `href`.",
45696
+ "name": "actions"
45697
+ },
45698
+ {
45699
+ "description": "Replaces the preview media (e.g. a `<video>` for the full-size asset).",
45700
+ "name": "preview"
45423
45701
  }
45424
45702
  ],
45425
45703
  "members": [
45704
+ {
45705
+ "kind": "field",
45706
+ "name": "dependencies",
45707
+ "type": {
45708
+ "text": "object"
45709
+ },
45710
+ "static": true,
45711
+ "default": "{'zn-icon': ZnIcon}"
45712
+ },
45426
45713
  {
45427
45714
  "kind": "field",
45428
45715
  "name": "hasSlotController",
45429
45716
  "privacy": "private",
45430
45717
  "readonly": true,
45431
- "default": "new HasSlotController(this, '[default]', 'properties', 'actions', 'image')"
45718
+ "default": "new HasSlotController(this, '[default]', 'image', 'caption', 'badge', 'actions', 'preview')"
45719
+ },
45720
+ {
45721
+ "kind": "field",
45722
+ "name": "src",
45723
+ "type": {
45724
+ "text": "string"
45725
+ },
45726
+ "description": "Image URL for the built-in `<img>`.",
45727
+ "attribute": "src"
45728
+ },
45729
+ {
45730
+ "kind": "field",
45731
+ "name": "alt",
45732
+ "type": {
45733
+ "text": "string"
45734
+ },
45735
+ "description": "Alternative text for the built-in image. Falls back to the caption.",
45736
+ "attribute": "alt"
45432
45737
  },
45433
45738
  {
45434
45739
  "kind": "field",
@@ -45436,15 +45741,20 @@
45436
45741
  "type": {
45437
45742
  "text": "string"
45438
45743
  },
45744
+ "default": "''",
45745
+ "description": "The title shown beneath the media.",
45439
45746
  "attribute": "caption"
45440
45747
  },
45441
45748
  {
45442
45749
  "kind": "field",
45443
- "name": "description",
45750
+ "name": "aspectRatio",
45444
45751
  "type": {
45445
45752
  "text": "string"
45446
45753
  },
45447
- "attribute": "description"
45754
+ "default": "''",
45755
+ "description": "Aspect ratio of the media frame, as any CSS `aspect-ratio` value (e.g. `1 / 1`, `4 / 3`).\nTakes precedence over an inherited `--zn-thumbnail-aspect-ratio`. Defaults to `16 / 9`.",
45756
+ "attribute": "aspect-ratio",
45757
+ "reflects": true
45448
45758
  },
45449
45759
  {
45450
45760
  "kind": "field",
@@ -45452,193 +45762,1204 @@
45452
45762
  "type": {
45453
45763
  "text": "string"
45454
45764
  },
45765
+ "description": "Renders the thumbnail as a link to this URL.",
45455
45766
  "attribute": "href"
45456
45767
  },
45457
45768
  {
45458
45769
  "kind": "field",
45459
- "name": "dataTarget",
45770
+ "name": "target",
45460
45771
  "type": {
45461
45772
  "text": "string"
45462
45773
  },
45463
- "attribute": "data-target"
45774
+ "description": "Where to open `href` (e.g. `_blank`).",
45775
+ "attribute": "target"
45464
45776
  },
45465
45777
  {
45466
45778
  "kind": "field",
45467
- "name": "gaid",
45779
+ "name": "fullUri",
45468
45780
  "type": {
45469
45781
  "text": "string"
45470
45782
  },
45471
- "attribute": "gaid"
45783
+ "default": "''",
45784
+ "description": "URL of the full-size asset. Setting this enables the preview overlay, which grows out of the\nthumbnail's position over a full-screen backdrop.",
45785
+ "attribute": "full-uri"
45472
45786
  },
45473
45787
  {
45474
45788
  "kind": "field",
45475
- "name": "dataUri",
45789
+ "name": "previewTrigger",
45790
+ "type": {
45791
+ "text": "'click' | 'button'"
45792
+ },
45793
+ "default": "'click'",
45794
+ "description": "How the preview opens. `click` (the default) opens it when the thumbnail is activated; `button`\nadds a dedicated expand control to the media instead, leaving clicks for selection or the link.",
45795
+ "attribute": "preview-trigger"
45796
+ },
45797
+ {
45798
+ "kind": "field",
45799
+ "name": "previewLabel",
45476
45800
  "type": {
45477
45801
  "text": "string"
45478
45802
  },
45479
- "attribute": "data-uri"
45803
+ "default": "'Preview'",
45804
+ "description": "Accessible label for the built-in preview trigger and the preview overlay.",
45805
+ "attribute": "preview-label"
45480
45806
  },
45481
45807
  {
45482
45808
  "kind": "field",
45483
- "name": "flush",
45809
+ "name": "value",
45810
+ "type": {
45811
+ "text": "string"
45812
+ },
45813
+ "default": "''",
45814
+ "description": "Identifier reported in the `zn-select` event detail and used for group selection.",
45815
+ "attribute": "value"
45816
+ },
45817
+ {
45818
+ "kind": "field",
45819
+ "name": "selected",
45484
45820
  "type": {
45485
45821
  "text": "boolean"
45486
45822
  },
45487
- "attribute": "flush"
45823
+ "default": "false",
45824
+ "description": "Draws the selected ring. Managed automatically inside a `selectable` `zn-thumbnail-group`.",
45825
+ "attribute": "selected",
45826
+ "reflects": true
45488
45827
  },
45489
45828
  {
45490
45829
  "kind": "field",
45491
- "name": "flushX",
45830
+ "name": "active",
45492
45831
  "type": {
45493
45832
  "text": "boolean"
45494
45833
  },
45495
- "attribute": "flush-x"
45834
+ "default": "false",
45835
+ "description": "Draws the active ring — for the thumbnail currently in use (playing, open, being edited), as\ndistinct from the user's selection. Takes the ring colour when a thumbnail is both active and\nselected. Recolour it with `--zn-thumbnail-active-color`.",
45836
+ "attribute": "active",
45837
+ "reflects": true
45496
45838
  },
45497
45839
  {
45498
45840
  "kind": "field",
45499
- "name": "flushY",
45841
+ "name": "selectable",
45500
45842
  "type": {
45501
45843
  "text": "boolean"
45502
45844
  },
45503
- "attribute": "flush-y"
45845
+ "default": "false",
45846
+ "description": "Set by `zn-thumbnail-group` when it manages selection, so the thumbnail reads as clickable.",
45847
+ "attribute": "selectable",
45848
+ "reflects": true
45504
45849
  },
45505
45850
  {
45506
45851
  "kind": "field",
45507
- "name": "inline",
45852
+ "name": "disabled",
45508
45853
  "type": {
45509
45854
  "text": "boolean"
45510
45855
  },
45511
- "attribute": "inline"
45856
+ "default": "false",
45857
+ "description": "Dims the thumbnail and blocks selection, navigation and preview.",
45858
+ "attribute": "disabled",
45859
+ "reflects": true
45512
45860
  },
45513
45861
  {
45514
45862
  "kind": "field",
45515
- "name": "plain",
45863
+ "name": "icon",
45864
+ "type": {
45865
+ "text": "string"
45866
+ },
45867
+ "default": "''",
45868
+ "description": "Icon rendered in the bottom-left badge when the `badge` slot is empty.",
45869
+ "attribute": "icon"
45870
+ },
45871
+ {
45872
+ "kind": "field",
45873
+ "name": "hideCaption",
45516
45874
  "type": {
45517
45875
  "text": "boolean"
45518
45876
  },
45519
- "description": "Renders the caption in the normal table-content weight instead of bold.",
45520
- "attribute": "plain"
45877
+ "default": "false",
45878
+ "description": "Hides the caption row, leaving just the media frame.",
45879
+ "attribute": "hide-caption"
45521
45880
  },
45522
45881
  {
45523
45882
  "kind": "field",
45524
- "name": "grouped",
45883
+ "name": "_previewOpen",
45525
45884
  "type": {
45526
45885
  "text": "boolean"
45527
45886
  },
45528
- "description": "Set by `zn-tile-group` to lay the tile out as a shared-column subgrid row.",
45529
- "attribute": "grouped",
45530
- "reflects": true
45887
+ "privacy": "private",
45888
+ "default": "false"
45889
+ },
45890
+ {
45891
+ "kind": "field",
45892
+ "name": "_previewRatio",
45893
+ "type": {
45894
+ "text": "number"
45895
+ },
45896
+ "privacy": "private",
45897
+ "default": "0",
45898
+ "description": "Aspect ratio (width / height) measured from the asset, so the preview wraps it exactly."
45899
+ },
45900
+ {
45901
+ "kind": "field",
45902
+ "name": "_media",
45903
+ "type": {
45904
+ "text": "HTMLElement"
45905
+ },
45906
+ "privacy": "private"
45907
+ },
45908
+ {
45909
+ "kind": "field",
45910
+ "name": "_image",
45911
+ "type": {
45912
+ "text": "HTMLImageElement"
45913
+ },
45914
+ "privacy": "private"
45915
+ },
45916
+ {
45917
+ "kind": "field",
45918
+ "name": "_previewImage",
45919
+ "type": {
45920
+ "text": "HTMLImageElement"
45921
+ },
45922
+ "privacy": "private"
45923
+ },
45924
+ {
45925
+ "kind": "field",
45926
+ "name": "_preview",
45927
+ "type": {
45928
+ "text": "HTMLDialogElement"
45929
+ },
45930
+ "privacy": "private"
45931
+ },
45932
+ {
45933
+ "kind": "field",
45934
+ "name": "_previewFrame",
45935
+ "type": {
45936
+ "text": "HTMLElement"
45937
+ },
45938
+ "privacy": "private"
45939
+ },
45940
+ {
45941
+ "kind": "field",
45942
+ "name": "_previewBackdrop",
45943
+ "type": {
45944
+ "text": "HTMLElement"
45945
+ },
45946
+ "privacy": "private"
45947
+ },
45948
+ {
45949
+ "kind": "field",
45950
+ "name": "_previewClose",
45951
+ "type": {
45952
+ "text": "HTMLElement"
45953
+ },
45954
+ "privacy": "private"
45955
+ },
45956
+ {
45957
+ "kind": "field",
45958
+ "name": "_origin",
45959
+ "type": {
45960
+ "text": "DOMRect | null"
45961
+ },
45962
+ "privacy": "private",
45963
+ "default": "null",
45964
+ "description": "The media rect captured when the preview opened, so the grow animation starts from the thumbnail."
45965
+ },
45966
+ {
45967
+ "kind": "field",
45968
+ "name": "_animating",
45969
+ "type": {
45970
+ "text": "boolean"
45971
+ },
45972
+ "privacy": "private",
45973
+ "default": "false"
45531
45974
  },
45532
45975
  {
45533
45976
  "kind": "method",
45534
45977
  "name": "_isLink",
45535
45978
  "privacy": "private"
45536
45979
  },
45980
+ {
45981
+ "kind": "field",
45982
+ "name": "_previewable",
45983
+ "privacy": "private",
45984
+ "readonly": true
45985
+ },
45986
+ {
45987
+ "kind": "field",
45988
+ "name": "_previewOnActivate",
45989
+ "privacy": "private",
45990
+ "description": "True when activating the thumbnail itself should open the preview.",
45991
+ "readonly": true
45992
+ },
45537
45993
  {
45538
45994
  "kind": "method",
45539
- "name": "_handleActionsClick",
45995
+ "name": "_resolveRatio",
45996
+ "privacy": "private",
45997
+ "return": {
45998
+ "type": {
45999
+ "text": "number"
46000
+ }
46001
+ },
46002
+ "description": "The asset's real aspect ratio, so the preview panel wraps the image instead of letterboxing it\ninside a fixed-ratio box. The full-size image is preferred, but it usually hasn't loaded when\nthe preview opens — the already-loaded thumbnail shares the asset's ratio, and the rendered\nmedia box is the last resort for slotted media that can't be measured."
46003
+ },
46004
+ {
46005
+ "kind": "method",
46006
+ "name": "showPreview",
46007
+ "description": "Opens the preview overlay."
46008
+ },
46009
+ {
46010
+ "kind": "method",
46011
+ "name": "hidePreview",
46012
+ "description": "Closes the preview overlay."
46013
+ },
46014
+ {
46015
+ "kind": "method",
46016
+ "name": "_animatePreview",
45540
46017
  "privacy": "private",
45541
46018
  "parameters": [
45542
46019
  {
45543
- "name": "e",
46020
+ "name": "direction",
45544
46021
  "type": {
45545
- "text": "MouseEvent"
46022
+ "text": "'in' | 'out'"
46023
+ }
46024
+ }
46025
+ ]
46026
+ },
46027
+ {
46028
+ "kind": "method",
46029
+ "name": "_collapsedTransform",
46030
+ "privacy": "private",
46031
+ "parameters": [
46032
+ {
46033
+ "name": "from",
46034
+ "type": {
46035
+ "text": "DOMRect | null"
46036
+ }
46037
+ },
46038
+ {
46039
+ "name": "to",
46040
+ "type": {
46041
+ "text": "DOMRect"
46042
+ }
46043
+ }
46044
+ ],
46045
+ "description": "Maps the preview panel onto the thumbnail's box, so the panel appears to grow out of it."
46046
+ },
46047
+ {
46048
+ "kind": "method",
46049
+ "name": "_activate",
46050
+ "privacy": "private",
46051
+ "parameters": [
46052
+ {
46053
+ "name": "event",
46054
+ "type": {
46055
+ "text": "Event"
46056
+ }
46057
+ },
46058
+ {
46059
+ "name": "allowPreview",
46060
+ "type": {
46061
+ "text": "boolean"
45546
46062
  }
45547
46063
  }
45548
46064
  ]
46065
+ },
46066
+ {
46067
+ "kind": "field",
46068
+ "name": "_handleClick",
46069
+ "privacy": "private"
46070
+ },
46071
+ {
46072
+ "kind": "field",
46073
+ "name": "_handleKeyDown",
46074
+ "privacy": "private"
46075
+ },
46076
+ {
46077
+ "kind": "field",
46078
+ "name": "_handlePreviewButtonClick",
46079
+ "privacy": "private"
46080
+ },
46081
+ {
46082
+ "kind": "field",
46083
+ "name": "_handlePreviewCancel",
46084
+ "privacy": "private"
46085
+ },
46086
+ {
46087
+ "kind": "field",
46088
+ "name": "_handleBackdropClick",
46089
+ "privacy": "private"
46090
+ },
46091
+ {
46092
+ "kind": "field",
46093
+ "name": "_handlePreviewImageLoad",
46094
+ "privacy": "private"
45549
46095
  }
45550
46096
  ],
45551
46097
  "events": [
45552
46098
  {
45553
- "description": "Emitted as an example.",
45554
- "name": "zn-event-name"
46099
+ "description": "Emitted when an enabled thumbnail is activated by click or keyboard. Cancelable — call `preventDefault()` to stop the preview from opening and to stop a parent `zn-thumbnail-group` from changing its selection.",
46100
+ "name": "zn-select"
46101
+ },
46102
+ {
46103
+ "description": "Emitted when the preview overlay starts opening.",
46104
+ "name": "zn-show"
46105
+ },
46106
+ {
46107
+ "description": "Emitted once the preview overlay has finished closing.",
46108
+ "name": "zn-close"
45555
46109
  }
45556
46110
  ],
45557
46111
  "attributes": [
46112
+ {
46113
+ "name": "src",
46114
+ "type": {
46115
+ "text": "string"
46116
+ },
46117
+ "description": "Image URL for the built-in `<img>`.",
46118
+ "fieldName": "src"
46119
+ },
46120
+ {
46121
+ "name": "alt",
46122
+ "type": {
46123
+ "text": "string"
46124
+ },
46125
+ "description": "Alternative text for the built-in image. Falls back to the caption.",
46126
+ "fieldName": "alt"
46127
+ },
45558
46128
  {
45559
46129
  "name": "caption",
45560
46130
  "type": {
45561
46131
  "text": "string"
45562
46132
  },
46133
+ "default": "''",
46134
+ "description": "The title shown beneath the media.",
45563
46135
  "fieldName": "caption"
45564
46136
  },
45565
46137
  {
45566
- "name": "description",
46138
+ "name": "aspect-ratio",
45567
46139
  "type": {
45568
46140
  "text": "string"
45569
46141
  },
45570
- "fieldName": "description"
46142
+ "default": "''",
46143
+ "description": "Aspect ratio of the media frame, as any CSS `aspect-ratio` value (e.g. `1 / 1`, `4 / 3`).\nTakes precedence over an inherited `--zn-thumbnail-aspect-ratio`. Defaults to `16 / 9`.",
46144
+ "fieldName": "aspectRatio"
45571
46145
  },
45572
46146
  {
45573
46147
  "name": "href",
45574
46148
  "type": {
45575
46149
  "text": "string"
45576
46150
  },
46151
+ "description": "Renders the thumbnail as a link to this URL.",
45577
46152
  "fieldName": "href"
45578
46153
  },
45579
46154
  {
45580
- "name": "data-target",
46155
+ "name": "target",
45581
46156
  "type": {
45582
46157
  "text": "string"
45583
46158
  },
45584
- "fieldName": "dataTarget"
46159
+ "description": "Where to open `href` (e.g. `_blank`).",
46160
+ "fieldName": "target"
45585
46161
  },
45586
46162
  {
45587
- "name": "gaid",
46163
+ "name": "full-uri",
45588
46164
  "type": {
45589
46165
  "text": "string"
45590
46166
  },
45591
- "fieldName": "gaid"
46167
+ "default": "''",
46168
+ "description": "URL of the full-size asset. Setting this enables the preview overlay, which grows out of the\nthumbnail's position over a full-screen backdrop.",
46169
+ "fieldName": "fullUri"
45592
46170
  },
45593
46171
  {
45594
- "name": "data-uri",
46172
+ "name": "preview-trigger",
46173
+ "type": {
46174
+ "text": "'click' | 'button'"
46175
+ },
46176
+ "default": "'click'",
46177
+ "description": "How the preview opens. `click` (the default) opens it when the thumbnail is activated; `button`\nadds a dedicated expand control to the media instead, leaving clicks for selection or the link.",
46178
+ "fieldName": "previewTrigger"
46179
+ },
46180
+ {
46181
+ "name": "preview-label",
45595
46182
  "type": {
45596
46183
  "text": "string"
45597
46184
  },
45598
- "fieldName": "dataUri"
46185
+ "default": "'Preview'",
46186
+ "description": "Accessible label for the built-in preview trigger and the preview overlay.",
46187
+ "fieldName": "previewLabel"
45599
46188
  },
45600
46189
  {
45601
- "name": "flush",
46190
+ "name": "value",
45602
46191
  "type": {
45603
- "text": "boolean"
46192
+ "text": "string"
45604
46193
  },
45605
- "fieldName": "flush"
46194
+ "default": "''",
46195
+ "description": "Identifier reported in the `zn-select` event detail and used for group selection.",
46196
+ "fieldName": "value"
45606
46197
  },
45607
46198
  {
45608
- "name": "flush-x",
46199
+ "name": "selected",
45609
46200
  "type": {
45610
46201
  "text": "boolean"
45611
46202
  },
45612
- "fieldName": "flushX"
46203
+ "default": "false",
46204
+ "description": "Draws the selected ring. Managed automatically inside a `selectable` `zn-thumbnail-group`.",
46205
+ "fieldName": "selected"
45613
46206
  },
45614
46207
  {
45615
- "name": "flush-y",
46208
+ "name": "active",
45616
46209
  "type": {
45617
46210
  "text": "boolean"
45618
46211
  },
45619
- "fieldName": "flushY"
46212
+ "default": "false",
46213
+ "description": "Draws the active ring — for the thumbnail currently in use (playing, open, being edited), as\ndistinct from the user's selection. Takes the ring colour when a thumbnail is both active and\nselected. Recolour it with `--zn-thumbnail-active-color`.",
46214
+ "fieldName": "active"
45620
46215
  },
45621
46216
  {
45622
- "name": "inline",
46217
+ "name": "selectable",
45623
46218
  "type": {
45624
46219
  "text": "boolean"
45625
46220
  },
45626
- "fieldName": "inline"
46221
+ "default": "false",
46222
+ "description": "Set by `zn-thumbnail-group` when it manages selection, so the thumbnail reads as clickable.",
46223
+ "fieldName": "selectable"
45627
46224
  },
45628
46225
  {
45629
- "name": "plain",
46226
+ "name": "disabled",
45630
46227
  "type": {
45631
46228
  "text": "boolean"
45632
46229
  },
45633
- "description": "Renders the caption in the normal table-content weight instead of bold.",
45634
- "fieldName": "plain"
46230
+ "default": "false",
46231
+ "description": "Dims the thumbnail and blocks selection, navigation and preview.",
46232
+ "fieldName": "disabled"
45635
46233
  },
45636
46234
  {
45637
- "name": "grouped",
46235
+ "name": "icon",
45638
46236
  "type": {
45639
- "text": "boolean"
46237
+ "text": "string"
45640
46238
  },
45641
- "description": "Set by `zn-tile-group` to lay the tile out as a shared-column subgrid row.",
46239
+ "default": "''",
46240
+ "description": "Icon rendered in the bottom-left badge when the `badge` slot is empty.",
46241
+ "fieldName": "icon"
46242
+ },
46243
+ {
46244
+ "name": "hide-caption",
46245
+ "type": {
46246
+ "text": "boolean"
46247
+ },
46248
+ "default": "false",
46249
+ "description": "Hides the caption row, leaving just the media frame.",
46250
+ "fieldName": "hideCaption"
46251
+ }
46252
+ ],
46253
+ "superclass": {
46254
+ "name": "ZincElement",
46255
+ "module": "/src/internal/zinc-element"
46256
+ },
46257
+ "summary": "A captioned image tile — a fixed aspect-ratio preview with a title beneath it, optional\ncorner badges and actions, and an optional full-screen preview that grows out of the thumbnail.",
46258
+ "tagNameWithoutPrefix": "thumbnail",
46259
+ "tagName": "zn-thumbnail",
46260
+ "customElement": true,
46261
+ "jsDoc": "/**\n * @summary A captioned image tile — a fixed aspect-ratio preview with a title beneath it, optional\n * corner badges and actions, and an optional full-screen preview that grows out of the thumbnail.\n * @documentation https://zinc.style/components/thumbnail\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-icon\n *\n * @event zn-select - Emitted when an enabled thumbnail is activated by click or keyboard. Cancelable —\n * call `preventDefault()` to stop the preview from opening and to stop a parent\n * `zn-thumbnail-group` from changing its selection.\n * @event zn-show - Emitted when the preview overlay starts opening.\n * @event zn-close - Emitted once the preview overlay has finished closing.\n *\n * @slot - Fallback content rendered in place of the media when no `src` is set.\n * @slot image - Replaces the built-in `<img>` (e.g. a video, canvas or `zn-icon`).\n * @slot caption - Replaces the caption text.\n * @slot badge - Content pinned to the bottom-left of the media (e.g. a play indicator). Badges take\n * no pointer events and are held back on opacity, so they read as information about the asset\n * rather than as something to click.\n * @slot actions - Controls pinned to the bottom-right of the media (e.g. a download button). Each\n * slotted element becomes its own chip, so several actions read as separate icons on the thumbnail\n * rather than one grouped pill. This sits outside the thumbnail's link, so buttons and links here\n * behave normally and never select the thumbnail or follow its `href`.\n * @slot preview - Replaces the preview media (e.g. a `<video>` for the full-size asset).\n *\n * @csspart base - The component's base wrapper.\n * @csspart link - The anchor (or div) covering the media and caption.\n * @csspart media - The fixed aspect-ratio media frame.\n * @csspart image - The built-in image element.\n * @csspart overlay - The layer holding the badge, actions and preview button.\n * @csspart badge - The bottom-left badge container.\n * @csspart actions - The bottom-right actions container.\n * @csspart preview-button - The built-in preview trigger, when `preview-trigger=\"button\"`.\n * @csspart caption - The caption beneath the media.\n * @csspart preview - The preview `<dialog>`.\n * @csspart preview-backdrop - The full-screen backdrop behind the preview.\n * @csspart preview-frame - The rounded panel the preview media sits in.\n * @csspart preview-image - The full-size image inside the preview.\n * @csspart preview-close - The preview's close button.\n *\n * @cssproperty --zn-thumbnail-aspect-ratio - Aspect ratio of the media frame. Defaults to 16 / 9. The\n * `aspect-ratio` attribute sets this on the thumbnail itself; set the property on any ancestor\n * (including a `zn-thumbnail-group`) to apply it to every thumbnail beneath it.\n * @cssproperty --zn-thumbnail-radius - Corner radius of the media frame.\n * @cssproperty --zn-thumbnail-preview-aspect-ratio - Overrides the measured aspect ratio of the preview\n * panel. By default the panel takes the asset's own ratio so it wraps the image exactly.\n * @cssproperty --zn-thumbnail-preview-max-width - Largest width the preview may take. Defaults to 70vw.\n * @cssproperty --zn-thumbnail-preview-max-height - Largest height the preview may take. Defaults to 70vh.\n * @cssproperty --zn-thumbnail-preview-radius - Corner radius of the preview panel.\n * @cssproperty --zn-thumbnail-chip-radius - Corner radius of a badge, action or preview chip.\n * @cssproperty --zn-thumbnail-chip-background - Background of a badge, action or preview chip.\n * @cssproperty --zn-thumbnail-chip-background-hover - Hover background of an action or preview chip.\n * @cssproperty --zn-thumbnail-chip-color - Foreground colour of a badge, action or preview chip.\n * @cssproperty --zn-thumbnail-chip-gap - Gap between adjacent chips.\n * @cssproperty --zn-thumbnail-badge-opacity - Opacity of a badge, holding it back from the action\n * chips beside it. Defaults to 0.65.\n * @cssproperty --zn-thumbnail-selected-color - Ring colour for the selected state.\n * @cssproperty --zn-thumbnail-active-color - Ring colour for the active state.\n */",
46262
+ "documentation": "https://zinc.style/components/thumbnail",
46263
+ "status": "experimental",
46264
+ "since": "1.0",
46265
+ "dependencies": [
46266
+ "zn-icon"
46267
+ ]
46268
+ }
46269
+ ],
46270
+ "exports": [
46271
+ {
46272
+ "kind": "js",
46273
+ "name": "default",
46274
+ "declaration": {
46275
+ "name": "ZnThumbnail",
46276
+ "module": "components/thumbnail/thumbnail.js"
46277
+ }
46278
+ }
46279
+ ]
46280
+ },
46281
+ {
46282
+ "kind": "javascript-module",
46283
+ "path": "components/thumbnail-group/thumbnail-group.js",
46284
+ "declarations": [
46285
+ {
46286
+ "kind": "class",
46287
+ "description": "",
46288
+ "name": "ZnThumbnailGroup",
46289
+ "cssProperties": [
46290
+ {
46291
+ "description": "Track width of a thumbnail. Defaults to 180px. Also settable with the `thumbnail-width` attribute.",
46292
+ "name": "--zn-thumbnail-width"
46293
+ },
46294
+ {
46295
+ "description": "Gap between thumbnails. Also settable with the `gap` attribute.",
46296
+ "name": "--zn-thumbnail-gap"
46297
+ },
46298
+ {
46299
+ "description": "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.",
46300
+ "name": "--zn-thumbnail-aspect-ratio"
46301
+ }
46302
+ ],
46303
+ "cssParts": [
46304
+ {
46305
+ "description": "The component's base wrapper.",
46306
+ "name": "base"
46307
+ },
46308
+ {
46309
+ "description": "The header row holding the caption and toggle.",
46310
+ "name": "header"
46311
+ },
46312
+ {
46313
+ "description": "The heading text.",
46314
+ "name": "caption"
46315
+ },
46316
+ {
46317
+ "description": "The show all / show less button.",
46318
+ "name": "toggle"
46319
+ },
46320
+ {
46321
+ "description": "The scrolling row / expanded grid that holds the thumbnails.",
46322
+ "name": "items"
46323
+ }
46324
+ ],
46325
+ "slots": [
46326
+ {
46327
+ "description": "One or more `zn-thumbnail` elements.",
46328
+ "name": ""
46329
+ },
46330
+ {
46331
+ "description": "Replaces the heading text.",
46332
+ "name": "caption"
46333
+ },
46334
+ {
46335
+ "description": "Extra content in the header, before the toggle.",
46336
+ "name": "actions"
46337
+ }
46338
+ ],
46339
+ "members": [
46340
+ {
46341
+ "kind": "field",
46342
+ "name": "caption",
46343
+ "type": {
46344
+ "text": "string"
46345
+ },
46346
+ "default": "''",
46347
+ "description": "The heading shown at the top left of the group.",
46348
+ "attribute": "caption"
46349
+ },
46350
+ {
46351
+ "kind": "field",
46352
+ "name": "expanded",
46353
+ "type": {
46354
+ "text": "boolean"
46355
+ },
46356
+ "default": "false",
46357
+ "description": "Expands the group into the full wrapping grid.",
46358
+ "attribute": "expanded",
46359
+ "reflects": true
46360
+ },
46361
+ {
46362
+ "kind": "field",
46363
+ "name": "total",
46364
+ "type": {
46365
+ "text": "number"
46366
+ },
46367
+ "default": "0",
46368
+ "description": "Total number of thumbnails in the underlying set, shown in the \"Show All (n)\" label. Set this when\nthe row only holds the first page of a larger set; otherwise the slotted thumbnails are counted.",
46369
+ "attribute": "total"
46370
+ },
46371
+ {
46372
+ "kind": "field",
46373
+ "name": "showAllLabel",
46374
+ "type": {
46375
+ "text": "string"
46376
+ },
46377
+ "default": "'Show All'",
46378
+ "description": "Label of the expand toggle. The count is appended in brackets.",
46379
+ "attribute": "show-all-label"
46380
+ },
46381
+ {
46382
+ "kind": "field",
46383
+ "name": "showLessLabel",
46384
+ "type": {
46385
+ "text": "string"
46386
+ },
46387
+ "default": "'Show Less'",
46388
+ "description": "Label of the collapse toggle.",
46389
+ "attribute": "show-less-label"
46390
+ },
46391
+ {
46392
+ "kind": "field",
46393
+ "name": "hideToggle",
46394
+ "type": {
46395
+ "text": "boolean"
46396
+ },
46397
+ "default": "false",
46398
+ "description": "Never render the toggle, even when the row overflows.",
46399
+ "attribute": "hide-toggle"
46400
+ },
46401
+ {
46402
+ "kind": "field",
46403
+ "name": "alwaysToggle",
46404
+ "type": {
46405
+ "text": "boolean"
46406
+ },
46407
+ "default": "false",
46408
+ "description": "Always render the toggle, even when every thumbnail already fits on the row.",
46409
+ "attribute": "always-toggle"
46410
+ },
46411
+ {
46412
+ "kind": "field",
46413
+ "name": "selectable",
46414
+ "type": {
46415
+ "text": "boolean"
46416
+ },
46417
+ "default": "false",
46418
+ "description": "Manages single selection across the slotted thumbnails.",
46419
+ "attribute": "selectable",
46420
+ "reflects": true
46421
+ },
46422
+ {
46423
+ "kind": "field",
46424
+ "name": "aspectRatio",
46425
+ "type": {
46426
+ "text": "string"
46427
+ },
46428
+ "default": "''",
46429
+ "description": "Aspect ratio for every thumbnail in the group, as any CSS `aspect-ratio` value (e.g. `1 / 1`).\nShorthand for setting `--zn-thumbnail-aspect-ratio` on the group. A thumbnail's own\n`aspect-ratio` attribute still wins.",
46430
+ "attribute": "aspect-ratio",
46431
+ "reflects": true
46432
+ },
46433
+ {
46434
+ "kind": "field",
46435
+ "name": "thumbnailWidth",
46436
+ "type": {
46437
+ "text": "string"
46438
+ },
46439
+ "default": "''",
46440
+ "description": "Track width of each thumbnail (e.g. `140px`). Shorthand for `--zn-thumbnail-width`.",
46441
+ "attribute": "thumbnail-width",
46442
+ "reflects": true
46443
+ },
46444
+ {
46445
+ "kind": "field",
46446
+ "name": "gap",
46447
+ "type": {
46448
+ "text": "string"
46449
+ },
46450
+ "default": "''",
46451
+ "description": "Gap between thumbnails (e.g. `8px`). Shorthand for `--zn-thumbnail-gap`.",
46452
+ "attribute": "gap",
46453
+ "reflects": true
46454
+ },
46455
+ {
46456
+ "kind": "field",
46457
+ "name": "value",
46458
+ "type": {
46459
+ "text": "string"
46460
+ },
46461
+ "default": "''",
46462
+ "description": "The `value` of the selected thumbnail (`selectable` groups only).",
46463
+ "attribute": "value"
46464
+ },
46465
+ {
46466
+ "kind": "field",
46467
+ "name": "_overflowing",
46468
+ "type": {
46469
+ "text": "boolean"
46470
+ },
46471
+ "privacy": "private",
46472
+ "default": "false"
46473
+ },
46474
+ {
46475
+ "kind": "field",
46476
+ "name": "_count",
46477
+ "type": {
46478
+ "text": "number"
46479
+ },
46480
+ "privacy": "private",
46481
+ "default": "0"
46482
+ },
46483
+ {
46484
+ "kind": "field",
46485
+ "name": "_items",
46486
+ "type": {
46487
+ "text": "HTMLElement"
46488
+ },
46489
+ "privacy": "private"
46490
+ },
46491
+ {
46492
+ "kind": "field",
46493
+ "name": "_resizeObserver",
46494
+ "type": {
46495
+ "text": "ResizeObserver | null"
46496
+ },
46497
+ "privacy": "private",
46498
+ "default": "null"
46499
+ },
46500
+ {
46501
+ "kind": "method",
46502
+ "name": "_observe",
46503
+ "privacy": "private"
46504
+ },
46505
+ {
46506
+ "kind": "method",
46507
+ "name": "_syncCustomProperties",
46508
+ "privacy": "private",
46509
+ "parameters": [
46510
+ {
46511
+ "name": "changed",
46512
+ "type": {
46513
+ "text": "PropertyValues"
46514
+ }
46515
+ }
46516
+ ],
46517
+ "description": "Mirrors the shorthand attributes onto host custom properties. They go on the host rather than\nanywhere in the shadow root because the thumbnails are light-DOM children — inheriting from the\nhost is the only way the values reach them."
46518
+ },
46519
+ {
46520
+ "kind": "method",
46521
+ "name": "show",
46522
+ "description": "Expands the group into the full grid."
46523
+ },
46524
+ {
46525
+ "kind": "method",
46526
+ "name": "hide",
46527
+ "description": "Collapses the group back to a single row."
46528
+ },
46529
+ {
46530
+ "kind": "field",
46531
+ "name": "_thumbnails",
46532
+ "type": {
46533
+ "text": "ZnThumbnail[]"
46534
+ },
46535
+ "privacy": "private",
46536
+ "readonly": true
46537
+ },
46538
+ {
46539
+ "kind": "field",
46540
+ "name": "_handleSlotChange",
46541
+ "privacy": "private"
46542
+ },
46543
+ {
46544
+ "kind": "method",
46545
+ "name": "_sync",
46546
+ "privacy": "private"
46547
+ },
46548
+ {
46549
+ "kind": "method",
46550
+ "name": "_measure",
46551
+ "privacy": "private"
46552
+ },
46553
+ {
46554
+ "kind": "field",
46555
+ "name": "_handleSelect",
46556
+ "privacy": "private"
46557
+ },
46558
+ {
46559
+ "kind": "field",
46560
+ "name": "_handleToggle",
46561
+ "privacy": "private"
46562
+ }
46563
+ ],
46564
+ "events": [
46565
+ {
46566
+ "description": "Emitted when the group expands into the full grid.",
46567
+ "name": "zn-expand"
46568
+ },
46569
+ {
46570
+ "description": "Emitted when the group collapses back to a single row.",
46571
+ "name": "zn-collapse"
46572
+ },
46573
+ {
46574
+ "description": "Emitted when the selected thumbnail changes (`selectable` groups only).",
46575
+ "name": "zn-change"
46576
+ }
46577
+ ],
46578
+ "attributes": [
46579
+ {
46580
+ "name": "caption",
46581
+ "type": {
46582
+ "text": "string"
46583
+ },
46584
+ "default": "''",
46585
+ "description": "The heading shown at the top left of the group.",
46586
+ "fieldName": "caption"
46587
+ },
46588
+ {
46589
+ "name": "expanded",
46590
+ "type": {
46591
+ "text": "boolean"
46592
+ },
46593
+ "default": "false",
46594
+ "description": "Expands the group into the full wrapping grid.",
46595
+ "fieldName": "expanded"
46596
+ },
46597
+ {
46598
+ "name": "total",
46599
+ "type": {
46600
+ "text": "number"
46601
+ },
46602
+ "default": "0",
46603
+ "description": "Total number of thumbnails in the underlying set, shown in the \"Show All (n)\" label. Set this when\nthe row only holds the first page of a larger set; otherwise the slotted thumbnails are counted.",
46604
+ "fieldName": "total"
46605
+ },
46606
+ {
46607
+ "name": "show-all-label",
46608
+ "type": {
46609
+ "text": "string"
46610
+ },
46611
+ "default": "'Show All'",
46612
+ "description": "Label of the expand toggle. The count is appended in brackets.",
46613
+ "fieldName": "showAllLabel"
46614
+ },
46615
+ {
46616
+ "name": "show-less-label",
46617
+ "type": {
46618
+ "text": "string"
46619
+ },
46620
+ "default": "'Show Less'",
46621
+ "description": "Label of the collapse toggle.",
46622
+ "fieldName": "showLessLabel"
46623
+ },
46624
+ {
46625
+ "name": "hide-toggle",
46626
+ "type": {
46627
+ "text": "boolean"
46628
+ },
46629
+ "default": "false",
46630
+ "description": "Never render the toggle, even when the row overflows.",
46631
+ "fieldName": "hideToggle"
46632
+ },
46633
+ {
46634
+ "name": "always-toggle",
46635
+ "type": {
46636
+ "text": "boolean"
46637
+ },
46638
+ "default": "false",
46639
+ "description": "Always render the toggle, even when every thumbnail already fits on the row.",
46640
+ "fieldName": "alwaysToggle"
46641
+ },
46642
+ {
46643
+ "name": "selectable",
46644
+ "type": {
46645
+ "text": "boolean"
46646
+ },
46647
+ "default": "false",
46648
+ "description": "Manages single selection across the slotted thumbnails.",
46649
+ "fieldName": "selectable"
46650
+ },
46651
+ {
46652
+ "name": "aspect-ratio",
46653
+ "type": {
46654
+ "text": "string"
46655
+ },
46656
+ "default": "''",
46657
+ "description": "Aspect ratio for every thumbnail in the group, as any CSS `aspect-ratio` value (e.g. `1 / 1`).\nShorthand for setting `--zn-thumbnail-aspect-ratio` on the group. A thumbnail's own\n`aspect-ratio` attribute still wins.",
46658
+ "fieldName": "aspectRatio"
46659
+ },
46660
+ {
46661
+ "name": "thumbnail-width",
46662
+ "type": {
46663
+ "text": "string"
46664
+ },
46665
+ "default": "''",
46666
+ "description": "Track width of each thumbnail (e.g. `140px`). Shorthand for `--zn-thumbnail-width`.",
46667
+ "fieldName": "thumbnailWidth"
46668
+ },
46669
+ {
46670
+ "name": "gap",
46671
+ "type": {
46672
+ "text": "string"
46673
+ },
46674
+ "default": "''",
46675
+ "description": "Gap between thumbnails (e.g. `8px`). Shorthand for `--zn-thumbnail-gap`.",
46676
+ "fieldName": "gap"
46677
+ },
46678
+ {
46679
+ "name": "value",
46680
+ "type": {
46681
+ "text": "string"
46682
+ },
46683
+ "default": "''",
46684
+ "description": "The `value` of the selected thumbnail (`selectable` groups only).",
46685
+ "fieldName": "value"
46686
+ }
46687
+ ],
46688
+ "superclass": {
46689
+ "name": "ZincElement",
46690
+ "module": "/src/internal/zinc-element"
46691
+ },
46692
+ "summary": "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.",
46693
+ "tagNameWithoutPrefix": "thumbnail-group",
46694
+ "tagName": "zn-thumbnail-group",
46695
+ "customElement": true,
46696
+ "jsDoc": "/**\n * @summary 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 * @documentation https://zinc.style/components/thumbnail-group\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-thumbnail\n *\n * @event zn-expand - Emitted when the group expands into the full grid.\n * @event zn-collapse - Emitted when the group collapses back to a single row.\n * @event zn-change - Emitted when the selected thumbnail changes (`selectable` groups only).\n *\n * @slot - One or more `zn-thumbnail` elements.\n * @slot caption - Replaces the heading text.\n * @slot actions - Extra content in the header, before the toggle.\n *\n * @csspart base - The component's base wrapper.\n * @csspart header - The header row holding the caption and toggle.\n * @csspart caption - The heading text.\n * @csspart toggle - The show all / show less button.\n * @csspart items - The scrolling row / expanded grid that holds the thumbnails.\n *\n * @cssproperty --zn-thumbnail-width - Track width of a thumbnail. Defaults to 180px. Also settable\n * with the `thumbnail-width` attribute.\n * @cssproperty --zn-thumbnail-gap - Gap between thumbnails. Also settable with the `gap` attribute.\n * @cssproperty --zn-thumbnail-aspect-ratio - Aspect ratio of every thumbnail in the group. Also\n * settable with the `aspect-ratio` attribute. Any `zn-thumbnail` custom property set here is\n * inherited by the slotted thumbnails.\n */",
46697
+ "documentation": "https://zinc.style/components/thumbnail-group",
46698
+ "status": "experimental",
46699
+ "since": "1.0",
46700
+ "dependencies": [
46701
+ "zn-thumbnail"
46702
+ ]
46703
+ }
46704
+ ],
46705
+ "exports": [
46706
+ {
46707
+ "kind": "js",
46708
+ "name": "default",
46709
+ "declaration": {
46710
+ "name": "ZnThumbnailGroup",
46711
+ "module": "components/thumbnail-group/thumbnail-group.js"
46712
+ }
46713
+ }
46714
+ ]
46715
+ },
46716
+ {
46717
+ "kind": "javascript-module",
46718
+ "path": "components/tile/tile.js",
46719
+ "declarations": [
46720
+ {
46721
+ "kind": "class",
46722
+ "description": "",
46723
+ "name": "ZnTile",
46724
+ "cssProperties": [
46725
+ {
46726
+ "description": "An example CSS custom property.",
46727
+ "name": "--example"
46728
+ }
46729
+ ],
46730
+ "cssParts": [
46731
+ {
46732
+ "description": "The component's base wrapper.",
46733
+ "name": "base"
46734
+ }
46735
+ ],
46736
+ "slots": [
46737
+ {
46738
+ "description": "The default slot.",
46739
+ "name": ""
46740
+ },
46741
+ {
46742
+ "description": "An example slot.",
46743
+ "name": "example"
46744
+ }
46745
+ ],
46746
+ "members": [
46747
+ {
46748
+ "kind": "field",
46749
+ "name": "hasSlotController",
46750
+ "privacy": "private",
46751
+ "readonly": true,
46752
+ "default": "new HasSlotController(this, '[default]', 'properties', 'actions', 'image')"
46753
+ },
46754
+ {
46755
+ "kind": "field",
46756
+ "name": "caption",
46757
+ "type": {
46758
+ "text": "string"
46759
+ },
46760
+ "attribute": "caption"
46761
+ },
46762
+ {
46763
+ "kind": "field",
46764
+ "name": "description",
46765
+ "type": {
46766
+ "text": "string"
46767
+ },
46768
+ "attribute": "description"
46769
+ },
46770
+ {
46771
+ "kind": "field",
46772
+ "name": "href",
46773
+ "type": {
46774
+ "text": "string"
46775
+ },
46776
+ "attribute": "href"
46777
+ },
46778
+ {
46779
+ "kind": "field",
46780
+ "name": "dataTarget",
46781
+ "type": {
46782
+ "text": "string"
46783
+ },
46784
+ "attribute": "data-target"
46785
+ },
46786
+ {
46787
+ "kind": "field",
46788
+ "name": "gaid",
46789
+ "type": {
46790
+ "text": "string"
46791
+ },
46792
+ "attribute": "gaid"
46793
+ },
46794
+ {
46795
+ "kind": "field",
46796
+ "name": "dataUri",
46797
+ "type": {
46798
+ "text": "string"
46799
+ },
46800
+ "attribute": "data-uri"
46801
+ },
46802
+ {
46803
+ "kind": "field",
46804
+ "name": "flush",
46805
+ "type": {
46806
+ "text": "boolean"
46807
+ },
46808
+ "attribute": "flush"
46809
+ },
46810
+ {
46811
+ "kind": "field",
46812
+ "name": "flushX",
46813
+ "type": {
46814
+ "text": "boolean"
46815
+ },
46816
+ "attribute": "flush-x"
46817
+ },
46818
+ {
46819
+ "kind": "field",
46820
+ "name": "flushY",
46821
+ "type": {
46822
+ "text": "boolean"
46823
+ },
46824
+ "attribute": "flush-y"
46825
+ },
46826
+ {
46827
+ "kind": "field",
46828
+ "name": "inline",
46829
+ "type": {
46830
+ "text": "boolean"
46831
+ },
46832
+ "attribute": "inline"
46833
+ },
46834
+ {
46835
+ "kind": "field",
46836
+ "name": "plain",
46837
+ "type": {
46838
+ "text": "boolean"
46839
+ },
46840
+ "description": "Renders the caption in the normal table-content weight instead of bold.",
46841
+ "attribute": "plain"
46842
+ },
46843
+ {
46844
+ "kind": "field",
46845
+ "name": "grouped",
46846
+ "type": {
46847
+ "text": "boolean"
46848
+ },
46849
+ "description": "Set by `zn-tile-group` to lay the tile out as a shared-column subgrid row.",
46850
+ "attribute": "grouped",
46851
+ "reflects": true
46852
+ },
46853
+ {
46854
+ "kind": "method",
46855
+ "name": "_isLink",
46856
+ "privacy": "private"
46857
+ },
46858
+ {
46859
+ "kind": "method",
46860
+ "name": "_handleActionsClick",
46861
+ "privacy": "private",
46862
+ "parameters": [
46863
+ {
46864
+ "name": "e",
46865
+ "type": {
46866
+ "text": "MouseEvent"
46867
+ }
46868
+ }
46869
+ ]
46870
+ }
46871
+ ],
46872
+ "events": [
46873
+ {
46874
+ "description": "Emitted as an example.",
46875
+ "name": "zn-event-name"
46876
+ }
46877
+ ],
46878
+ "attributes": [
46879
+ {
46880
+ "name": "caption",
46881
+ "type": {
46882
+ "text": "string"
46883
+ },
46884
+ "fieldName": "caption"
46885
+ },
46886
+ {
46887
+ "name": "description",
46888
+ "type": {
46889
+ "text": "string"
46890
+ },
46891
+ "fieldName": "description"
46892
+ },
46893
+ {
46894
+ "name": "href",
46895
+ "type": {
46896
+ "text": "string"
46897
+ },
46898
+ "fieldName": "href"
46899
+ },
46900
+ {
46901
+ "name": "data-target",
46902
+ "type": {
46903
+ "text": "string"
46904
+ },
46905
+ "fieldName": "dataTarget"
46906
+ },
46907
+ {
46908
+ "name": "gaid",
46909
+ "type": {
46910
+ "text": "string"
46911
+ },
46912
+ "fieldName": "gaid"
46913
+ },
46914
+ {
46915
+ "name": "data-uri",
46916
+ "type": {
46917
+ "text": "string"
46918
+ },
46919
+ "fieldName": "dataUri"
46920
+ },
46921
+ {
46922
+ "name": "flush",
46923
+ "type": {
46924
+ "text": "boolean"
46925
+ },
46926
+ "fieldName": "flush"
46927
+ },
46928
+ {
46929
+ "name": "flush-x",
46930
+ "type": {
46931
+ "text": "boolean"
46932
+ },
46933
+ "fieldName": "flushX"
46934
+ },
46935
+ {
46936
+ "name": "flush-y",
46937
+ "type": {
46938
+ "text": "boolean"
46939
+ },
46940
+ "fieldName": "flushY"
46941
+ },
46942
+ {
46943
+ "name": "inline",
46944
+ "type": {
46945
+ "text": "boolean"
46946
+ },
46947
+ "fieldName": "inline"
46948
+ },
46949
+ {
46950
+ "name": "plain",
46951
+ "type": {
46952
+ "text": "boolean"
46953
+ },
46954
+ "description": "Renders the caption in the normal table-content weight instead of bold.",
46955
+ "fieldName": "plain"
46956
+ },
46957
+ {
46958
+ "name": "grouped",
46959
+ "type": {
46960
+ "text": "boolean"
46961
+ },
46962
+ "description": "Set by `zn-tile-group` to lay the tile out as a shared-column subgrid row.",
45642
46963
  "fieldName": "grouped"
45643
46964
  }
45644
46965
  ],
@@ -48115,6 +49436,10 @@
48115
49436
  {
48116
49437
  "description": "The default slot.",
48117
49438
  "name": ""
49439
+ },
49440
+ {
49441
+ "description": "Content displayed on the right hand side of the well.",
49442
+ "name": "action"
48118
49443
  }
48119
49444
  ],
48120
49445
  "members": [
@@ -48136,6 +49461,26 @@
48136
49461
  "attribute": "inline",
48137
49462
  "reflects": true
48138
49463
  },
49464
+ {
49465
+ "kind": "field",
49466
+ "name": "pre",
49467
+ "type": {
49468
+ "text": "boolean"
49469
+ },
49470
+ "description": "Renders the default slot inside a `pre` element, preserving whitespace using a monospace font.",
49471
+ "attribute": "pre",
49472
+ "reflects": true
49473
+ },
49474
+ {
49475
+ "kind": "field",
49476
+ "name": "breakLong",
49477
+ "type": {
49478
+ "text": "boolean"
49479
+ },
49480
+ "description": "Breaks long unbroken words, so they wrap instead of forcing the well wider.",
49481
+ "attribute": "break-long",
49482
+ "reflects": true
49483
+ },
48139
49484
  {
48140
49485
  "kind": "field",
48141
49486
  "name": "hasSlotController",
@@ -48159,6 +49504,22 @@
48159
49504
  "text": "boolean"
48160
49505
  },
48161
49506
  "fieldName": "inline"
49507
+ },
49508
+ {
49509
+ "name": "pre",
49510
+ "type": {
49511
+ "text": "boolean"
49512
+ },
49513
+ "description": "Renders the default slot inside a `pre` element, preserving whitespace using a monospace font.",
49514
+ "fieldName": "pre"
49515
+ },
49516
+ {
49517
+ "name": "break-long",
49518
+ "type": {
49519
+ "text": "boolean"
49520
+ },
49521
+ "description": "Breaks long unbroken words, so they wrap instead of forcing the well wider.",
49522
+ "fieldName": "breakLong"
48162
49523
  }
48163
49524
  ],
48164
49525
  "superclass": {
@@ -48169,7 +49530,7 @@
48169
49530
  "tagNameWithoutPrefix": "well",
48170
49531
  "tagName": "zn-well",
48171
49532
  "customElement": true,
48172
- "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/well\n * @status experimental\n * @since 1.0\n *\n * @slot - The default slot.\n */",
49533
+ "jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/well\n * @status experimental\n * @since 1.0\n *\n * @slot - The default slot.\n * @slot action - Content displayed on the right hand side of the well.\n */",
48173
49534
  "documentation": "https://zinc.style/components/well",
48174
49535
  "status": "experimental",
48175
49536
  "since": "1.0"
@@ -48190,7 +49551,7 @@
48190
49551
  "package": {
48191
49552
  "name": "@kubex/zinc",
48192
49553
  "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
48193
- "version": "1.1.97",
49554
+ "version": "1.1.98",
48194
49555
  "author": "",
48195
49556
  "license": "MIT"
48196
49557
  }