@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
@@ -266,6 +266,11 @@
266
266
  },
267
267
  { "name": "rel", "values": [] },
268
268
  { "name": "tooltip", "values": [] },
269
+ {
270
+ "name": "label",
271
+ "description": "Accessible name for the button. Icon-only buttons fall back to `tooltip`.",
272
+ "values": []
273
+ },
269
274
  { "name": "auto-click", "values": [] },
270
275
  { "name": "auto-click-delay", "values": [] },
271
276
  { "name": "loading-text", "values": [] },
@@ -435,6 +440,8 @@
435
440
  { "name": "type", "values": [{ "name": "ChartType" }] },
436
441
  { "name": "data", "values": [{ "name": "SeriesItem[]" }] },
437
442
  { "name": "categories", "values": [{ "name": "string[]" }] },
443
+ { "name": "y-categories", "values": [{ "name": "string[]" }] },
444
+ { "name": "indicators", "values": [{ "name": "RadarIndicator[]" }] },
438
445
  {
439
446
  "name": "xaxis",
440
447
  "values": [
@@ -454,6 +461,11 @@
454
461
  { "name": "colors", "values": [{ "name": "string[]" }] },
455
462
  { "name": "sync-group", "values": [] },
456
463
  { "name": "smooth", "values": [] },
464
+ { "name": "inner-radius", "values": [] },
465
+ { "name": "outer-radius", "values": [] },
466
+ { "name": "show-labels", "values": [] },
467
+ { "name": "min-value", "values": [] },
468
+ { "name": "max-value", "values": [] },
457
469
  { "name": "scale", "values": [] }
458
470
  ],
459
471
  "references": [
@@ -4651,6 +4663,170 @@
4651
4663
  }
4652
4664
  ]
4653
4665
  },
4666
+ {
4667
+ "name": "zn-thumbnail",
4668
+ "description": "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.\n---\n\n\n### **Events:**\n - **zn-select** - 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.\n- **zn-show** - Emitted when the preview overlay starts opening.\n- **zn-close** - Emitted once the preview overlay has finished closing.\n\n### **Methods:**\n - **showPreview()** - Opens the preview overlay.\n- **hidePreview()** - Closes the preview overlay.\n\n### **Slots:**\n - _default_ - Fallback content rendered in place of the media when no `src` is set.\n- **image** - Replaces the built-in `<img>` (e.g. a video, canvas or `zn-icon`).\n- **caption** - Replaces the caption text.\n- **badge** - 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.\n- **actions** - 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`.\n- **preview** - Replaces the preview media (e.g. a `<video>` for the full-size asset).\n\n### **CSS Properties:**\n - **--zn-thumbnail-aspect-ratio** - 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. _(default: undefined)_\n- **--zn-thumbnail-radius** - Corner radius of the media frame. _(default: undefined)_\n- **--zn-thumbnail-preview-aspect-ratio** - 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. _(default: undefined)_\n- **--zn-thumbnail-preview-max-width** - Largest width the preview may take. Defaults to 70vw. _(default: undefined)_\n- **--zn-thumbnail-preview-max-height** - Largest height the preview may take. Defaults to 70vh. _(default: undefined)_\n- **--zn-thumbnail-preview-radius** - Corner radius of the preview panel. _(default: undefined)_\n- **--zn-thumbnail-chip-radius** - Corner radius of a badge, action or preview chip. _(default: undefined)_\n- **--zn-thumbnail-chip-background** - Background of a badge, action or preview chip. _(default: undefined)_\n- **--zn-thumbnail-chip-background-hover** - Hover background of an action or preview chip. _(default: undefined)_\n- **--zn-thumbnail-chip-color** - Foreground colour of a badge, action or preview chip. _(default: undefined)_\n- **--zn-thumbnail-chip-gap** - Gap between adjacent chips. _(default: undefined)_\n- **--zn-thumbnail-badge-opacity** - Opacity of a badge, holding it back from the action chips beside it. Defaults to 0.65. _(default: undefined)_\n- **--zn-thumbnail-selected-color** - Ring colour for the selected state. _(default: undefined)_\n- **--zn-thumbnail-active-color** - Ring colour for the active state. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **link** - The anchor (or div) covering the media and caption.\n- **media** - The fixed aspect-ratio media frame.\n- **image** - The built-in image element.\n- **overlay** - The layer holding the badge, actions and preview button.\n- **badge** - The bottom-left badge container.\n- **actions** - The bottom-right actions container.\n- **preview-button** - The built-in preview trigger, when `preview-trigger=\"button\"`.\n- **caption** - The caption beneath the media.\n- **preview** - The preview `<dialog>`.\n- **preview-backdrop** - The full-screen backdrop behind the preview.\n- **preview-frame** - The rounded panel the preview media sits in.\n- **preview-image** - The full-size image inside the preview.\n- **preview-close** - The preview's close button.",
4669
+ "attributes": [
4670
+ {
4671
+ "name": "src",
4672
+ "description": "Image URL for the built-in `<img>`.",
4673
+ "values": []
4674
+ },
4675
+ {
4676
+ "name": "alt",
4677
+ "description": "Alternative text for the built-in image. Falls back to the caption.",
4678
+ "values": []
4679
+ },
4680
+ {
4681
+ "name": "caption",
4682
+ "description": "The title shown beneath the media.",
4683
+ "values": []
4684
+ },
4685
+ {
4686
+ "name": "aspect-ratio",
4687
+ "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`.",
4688
+ "values": []
4689
+ },
4690
+ {
4691
+ "name": "href",
4692
+ "description": "Renders the thumbnail as a link to this URL.",
4693
+ "values": []
4694
+ },
4695
+ {
4696
+ "name": "target",
4697
+ "description": "Where to open `href` (e.g. `_blank`).",
4698
+ "values": []
4699
+ },
4700
+ {
4701
+ "name": "full-uri",
4702
+ "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.",
4703
+ "values": []
4704
+ },
4705
+ {
4706
+ "name": "preview-trigger",
4707
+ "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.",
4708
+ "values": [{ "name": "click" }, { "name": "button" }]
4709
+ },
4710
+ {
4711
+ "name": "preview-label",
4712
+ "description": "Accessible label for the built-in preview trigger and the preview overlay.",
4713
+ "values": []
4714
+ },
4715
+ {
4716
+ "name": "value",
4717
+ "description": "Identifier reported in the `zn-select` event detail and used for group selection.",
4718
+ "values": []
4719
+ },
4720
+ {
4721
+ "name": "selected",
4722
+ "description": "Draws the selected ring. Managed automatically inside a `selectable` `zn-thumbnail-group`.",
4723
+ "values": []
4724
+ },
4725
+ {
4726
+ "name": "active",
4727
+ "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`.",
4728
+ "values": []
4729
+ },
4730
+ {
4731
+ "name": "selectable",
4732
+ "description": "Set by `zn-thumbnail-group` when it manages selection, so the thumbnail reads as clickable.",
4733
+ "values": []
4734
+ },
4735
+ {
4736
+ "name": "disabled",
4737
+ "description": "Dims the thumbnail and blocks selection, navigation and preview.",
4738
+ "values": []
4739
+ },
4740
+ {
4741
+ "name": "icon",
4742
+ "description": "Icon rendered in the bottom-left badge when the `badge` slot is empty.",
4743
+ "values": []
4744
+ },
4745
+ {
4746
+ "name": "hide-caption",
4747
+ "description": "Hides the caption row, leaving just the media frame.",
4748
+ "values": []
4749
+ }
4750
+ ],
4751
+ "references": [
4752
+ {
4753
+ "name": "Documentation",
4754
+ "url": "https://zinc.style/components/thumbnail"
4755
+ }
4756
+ ]
4757
+ },
4758
+ {
4759
+ "name": "zn-thumbnail-group",
4760
+ "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.",
4761
+ "attributes": [
4762
+ {
4763
+ "name": "caption",
4764
+ "description": "The heading shown at the top left of the group.",
4765
+ "values": []
4766
+ },
4767
+ {
4768
+ "name": "expanded",
4769
+ "description": "Expands the group into the full wrapping grid.",
4770
+ "values": []
4771
+ },
4772
+ {
4773
+ "name": "total",
4774
+ "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.",
4775
+ "values": []
4776
+ },
4777
+ {
4778
+ "name": "show-all-label",
4779
+ "description": "Label of the expand toggle. The count is appended in brackets.",
4780
+ "values": []
4781
+ },
4782
+ {
4783
+ "name": "show-less-label",
4784
+ "description": "Label of the collapse toggle.",
4785
+ "values": []
4786
+ },
4787
+ {
4788
+ "name": "hide-toggle",
4789
+ "description": "Never render the toggle, even when the row overflows.",
4790
+ "values": []
4791
+ },
4792
+ {
4793
+ "name": "always-toggle",
4794
+ "description": "Always render the toggle, even when every thumbnail already fits on the row.",
4795
+ "values": []
4796
+ },
4797
+ {
4798
+ "name": "selectable",
4799
+ "description": "Manages single selection across the slotted thumbnails.",
4800
+ "values": []
4801
+ },
4802
+ {
4803
+ "name": "aspect-ratio",
4804
+ "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.",
4805
+ "values": []
4806
+ },
4807
+ {
4808
+ "name": "thumbnail-width",
4809
+ "description": "Track width of each thumbnail (e.g. `140px`). Shorthand for `--zn-thumbnail-width`.",
4810
+ "values": []
4811
+ },
4812
+ {
4813
+ "name": "gap",
4814
+ "description": "Gap between thumbnails (e.g. `8px`). Shorthand for `--zn-thumbnail-gap`.",
4815
+ "values": []
4816
+ },
4817
+ {
4818
+ "name": "value",
4819
+ "description": "The `value` of the selected thumbnail (`selectable` groups only).",
4820
+ "values": []
4821
+ }
4822
+ ],
4823
+ "references": [
4824
+ {
4825
+ "name": "Documentation",
4826
+ "url": "https://zinc.style/components/thumbnail-group"
4827
+ }
4828
+ ]
4829
+ },
4654
4830
  {
4655
4831
  "name": "zn-tile",
4656
4832
  "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.",
@@ -4956,10 +5132,20 @@
4956
5132
  },
4957
5133
  {
4958
5134
  "name": "zn-well",
4959
- "description": "Short summary of the component's intended use.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.",
5135
+ "description": "Short summary of the component's intended use.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n- **action** - Content displayed on the right hand side of the well.",
4960
5136
  "attributes": [
4961
5137
  { "name": "icon", "values": [] },
4962
- { "name": "inline", "values": [] }
5138
+ { "name": "inline", "values": [] },
5139
+ {
5140
+ "name": "pre",
5141
+ "description": "Renders the default slot inside a `pre` element, preserving whitespace using a monospace font.",
5142
+ "values": []
5143
+ },
5144
+ {
5145
+ "name": "break-long",
5146
+ "description": "Breaks long unbroken words, so they wrap instead of forcing the well wider.",
5147
+ "values": []
5148
+ }
4963
5149
  ],
4964
5150
  "references": [
4965
5151
  { "name": "Documentation", "url": "https://zinc.style/components/well" }