@kubex/zinc 1.0.113 → 1.0.114

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 (95) hide show
  1. package/.github/workflows/eleventy_build.yml +5 -5
  2. package/.github/workflows/js_build_and_deploy.yaml +1 -1
  3. package/dist/custom-elements.json +2636 -421
  4. package/dist/vscode.html-custom-data.json +96 -16
  5. package/dist/web-types.json +268 -31
  6. package/dist/zn.d.ts +517 -340
  7. package/dist/zn.min.css +1 -1
  8. package/dist/zn.min.js +942 -863
  9. package/docs/eleventy.config.cjs +4 -2
  10. package/docs/pages/components/header.md +13 -0
  11. package/docs/pages/components/inline-edit.md +20 -0
  12. package/docs/pages/components/item.md +12 -1
  13. package/docs/pages/components/page.md +149 -0
  14. package/docs/pages/components/progress-bar.md +16 -0
  15. package/docs/pages/components/select.md +25 -0
  16. package/docs/pages/components/split-pane.md +6 -7
  17. package/docs/pages/components/tabs.md +59 -9
  18. package/package.json +8 -5
  19. package/scripts/build.js +40 -19
  20. package/scss/_global-spacing.scss +12 -1
  21. package/scss/_root.scss +34 -2
  22. package/scss/shared/layout.scss +15 -2
  23. package/scss/themes/_light.scss +1 -1
  24. package/src/components/absolute-container/absolute-container.component.ts +9 -25
  25. package/src/components/animated-button/animated-button.test.ts +8 -8
  26. package/src/components/button/button.component.ts +3 -1
  27. package/src/components/button/button.scss +5 -0
  28. package/src/components/button-menu/button-menu.component.ts +36 -21
  29. package/src/components/button-menu/button-menu.test.ts +55 -1
  30. package/src/components/chart/chart.component.ts +7 -7
  31. package/src/components/collapsible/collapsible.component.ts +7 -14
  32. package/src/components/cols/cols.scss +1 -1
  33. package/src/components/content-block/content-block.component.ts +11 -33
  34. package/src/components/data-select/data-select.component.ts +7 -11
  35. package/src/components/data-table/data-table.component.ts +10 -14
  36. package/src/components/editor/modules/toolbar/toolbar.component.ts +5 -9
  37. package/src/components/expanding-action/expanding-action.component.ts +37 -43
  38. package/src/components/form-group/form-group.component.ts +8 -3
  39. package/src/components/header/header.component.ts +6 -5
  40. package/src/components/header/header.scss +31 -25
  41. package/src/components/inline-edit/inline-edit.component.ts +13 -1
  42. package/src/components/inline-edit/inline-edit.test.ts +50 -0
  43. package/src/components/input/input.test.ts +77 -0
  44. package/src/components/input-group/input-group.test.ts +2 -10
  45. package/src/components/item/item.component.ts +12 -6
  46. package/src/components/item/item.scss +1 -1
  47. package/src/components/item/item.test.ts +8 -0
  48. package/src/components/navbar/navbar.component.ts +222 -48
  49. package/src/components/navbar/navbar.scss +134 -21
  50. package/src/components/navbar/navbar.test.ts +114 -9
  51. package/src/components/option/option.scss +5 -7
  52. package/src/components/option/option.test.ts +30 -0
  53. package/src/components/page/index.ts +13 -0
  54. package/src/components/page/page.component.ts +406 -0
  55. package/src/components/page/page.scss +325 -0
  56. package/src/components/page/page.test.ts +397 -0
  57. package/src/components/page-nav/page-nav.scss +7 -5
  58. package/src/components/pane/pane.component.ts +2 -2
  59. package/src/components/pane/pane.scss +0 -1
  60. package/src/components/pane/pane.test.ts +31 -0
  61. package/src/components/panel/panel.scss +1 -0
  62. package/src/components/progress-bar/progress-bar.component.ts +5 -2
  63. package/src/components/progress-bar/progress-bar.scss +17 -1
  64. package/src/components/progress-bar/progress-bar.test.ts +12 -0
  65. package/src/components/scroll-container/scroll-container.component.ts +22 -21
  66. package/src/components/select/select.component.ts +240 -38
  67. package/src/components/select/select.scss +15 -0
  68. package/src/components/select/select.test.ts +477 -0
  69. package/src/components/settings-container/settings-container.component.ts +15 -19
  70. package/src/components/settings-container/settings-container.scss +8 -8
  71. package/src/components/sidebar/sidebar.component.ts +11 -11
  72. package/src/components/simple-chart/simple-chart.component.ts +6 -7
  73. package/src/components/sp/sp.scss +46 -15
  74. package/src/components/sp/sp.test.ts +15 -0
  75. package/src/components/split-pane/split-pane.component.ts +153 -26
  76. package/src/components/split-pane/split-pane.scss +89 -13
  77. package/src/components/split-pane/split-pane.test.ts +187 -0
  78. package/src/components/style/style.component.ts +8 -0
  79. package/src/components/tab/index.ts +13 -0
  80. package/src/components/tab/tab.component.ts +25 -0
  81. package/src/components/tab/tab.scss +7 -0
  82. package/src/components/table/table.component.ts +7 -2
  83. package/src/components/tabs/tabs.component.ts +75 -70
  84. package/src/components/tabs/tabs.scss +1 -1
  85. package/src/components/textarea/textarea.component.ts +5 -8
  86. package/src/components/translation-group/translation-group.component.ts +15 -14
  87. package/src/components/translations/translations.component.ts +18 -17
  88. package/src/components/translations/translations.scss +1 -0
  89. package/src/components/translations/translations.test.ts +3 -2
  90. package/src/internal/form.ts +234 -0
  91. package/src/internal/theme.ts +26 -46
  92. package/src/internal/zinc-element.ts +12 -7
  93. package/src/utilities/form.ts +1 -0
  94. package/src/wc.scss +1 -1
  95. package/src/zinc.ts +3 -0
@@ -13,6 +13,17 @@
13
13
  }
14
14
  ]
15
15
  },
16
+ {
17
+ "name": "zn-action-bar",
18
+ "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.",
19
+ "attributes": [],
20
+ "references": [
21
+ {
22
+ "name": "Documentation",
23
+ "url": "https://zinc.style/components/action-bar"
24
+ }
25
+ ]
26
+ },
16
27
  {
17
28
  "name": "zn-alert",
18
29
  "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.",
@@ -48,17 +59,6 @@
48
59
  }
49
60
  ]
50
61
  },
51
- {
52
- "name": "zn-action-bar",
53
- "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.",
54
- "attributes": [],
55
- "references": [
56
- {
57
- "name": "Documentation",
58
- "url": "https://zinc.style/components/action-bar"
59
- }
60
- ]
61
- },
62
62
  {
63
63
  "name": "zn-animated-button",
64
64
  "description": "\n---\n\n\n### **Methods:**\n - **purchase(): _void_** - Programmatically trigger the purchase flow\n- **setSuccess(): _void_** - Set the button to success state manually\n- **setFailure(message): _void_** - Set the button to failure state manually with optional error message\n- **reset(): _void_** - Reset the button to idle state",
@@ -180,6 +180,7 @@
180
180
  { "name": "disabled", "values": [] },
181
181
  { "name": "grow", "values": [] },
182
182
  { "name": "square", "values": [] },
183
+ { "name": "panel-bg", "values": [] },
183
184
  { "name": "dropdown-closer", "values": [] },
184
185
  { "name": "notification", "values": [] },
185
186
  { "name": "muted-notifications", "values": [] },
@@ -1417,7 +1418,8 @@
1417
1418
  "name": "help-text",
1418
1419
  "description": "The form groups help text. If you need to display HTML, use the `help-text` slot instead.",
1419
1420
  "values": []
1420
- }
1421
+ },
1422
+ { "name": "cols", "values": [] }
1421
1423
  ],
1422
1424
  "references": [
1423
1425
  {
@@ -1440,7 +1442,8 @@
1440
1442
  { "name": "navigation", "values": [{ "name": "array" }] },
1441
1443
  { "name": "full-width", "values": [] },
1442
1444
  { "name": "previous-path", "values": [] },
1443
- { "name": "previous-target", "values": [] }
1445
+ { "name": "previous-target", "values": [] },
1446
+ { "name": "hide-breadcrumb", "values": [] }
1444
1447
  ],
1445
1448
  "references": [
1446
1449
  {
@@ -1591,6 +1594,11 @@
1591
1594
  "description": "Enables search/filtering on select inputs.",
1592
1595
  "values": []
1593
1596
  },
1597
+ {
1598
+ "name": "free-text",
1599
+ "description": "Allows entering values that aren't in the options list on select inputs (\"free text\"). Setting this implies\n`input-type=\"select\"` (unless a data `provider` is used) and forwards the behavior to the inner `<zn-select>`.",
1600
+ "values": []
1601
+ },
1594
1602
  {
1595
1603
  "name": "help-text",
1596
1604
  "description": "The input's help text. If you need to display HTML, use the `help-text` slot instead. *",
@@ -1888,6 +1896,7 @@
1888
1896
  { "name": "inline", "values": [] },
1889
1897
  { "name": "grid", "values": [] },
1890
1898
  { "name": "no-padding", "values": [] },
1899
+ { "name": "flush", "values": [] },
1891
1900
  { "name": "align-end", "values": [] },
1892
1901
  { "name": "align-center", "values": [] }
1893
1902
  ],
@@ -2144,7 +2153,7 @@
2144
2153
  },
2145
2154
  {
2146
2155
  "name": "zn-navbar",
2147
- "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.",
2156
+ "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- **expand** - Expanding action panels rendered alongside the navbar items.\n- **bottom** - Content rendered below the navbar row (e.g. chips, filters).\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
2148
2157
  "attributes": [
2149
2158
  { "name": "navigation", "values": [{ "name": "array" }] },
2150
2159
  { "name": "full-width", "values": [] },
@@ -2242,6 +2251,45 @@
2242
2251
  }
2243
2252
  ]
2244
2253
  },
2254
+ {
2255
+ "name": "zn-page",
2256
+ "description": "Combines a page header with tab navigation and tab panels.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - Page content. Use zn-tab for named tabs and header-action/header-actions for header actions.\n- **bottom** - Content rendered below the navbar row (e.g. chips, filters). Forwarded to the navbar's bottom 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.",
2257
+ "attributes": [
2258
+ { "name": "caption", "values": [] },
2259
+ { "name": "entity-id", "values": [] },
2260
+ { "name": "entity-id-show", "values": [] },
2261
+ { "name": "full-location", "values": [] },
2262
+ { "name": "modal", "values": [] },
2263
+ { "name": "nested", "values": [] },
2264
+ { "name": "primary", "values": [] },
2265
+ { "name": "previous-path", "values": [] },
2266
+ { "name": "previous-target", "values": [] },
2267
+ { "name": "summary", "values": [] },
2268
+ { "name": "master-id", "values": [] },
2269
+ { "name": "default-uri", "values": [] },
2270
+ { "name": "active", "values": [] },
2271
+ { "name": "split", "values": [] },
2272
+ { "name": "split-min", "values": [] },
2273
+ { "name": "split-min-secondary", "values": [] },
2274
+ { "name": "split-max", "values": [] },
2275
+ { "name": "primary-caption", "values": [] },
2276
+ { "name": "secondary-caption", "values": [] },
2277
+ { "name": "no-prefetch", "values": [] },
2278
+ { "name": "no-cache", "values": [] },
2279
+ { "name": "local-storage", "values": [] },
2280
+ { "name": "store-key", "values": [] },
2281
+ { "name": "store-ttl", "values": [] },
2282
+ { "name": "padded", "values": [] },
2283
+ { "name": "fetch-style", "values": [] },
2284
+ { "name": "full-width", "values": [] },
2285
+ { "name": "padded-right", "values": [] },
2286
+ { "name": "monitor", "values": [] },
2287
+ { "name": "description", "values": [] }
2288
+ ],
2289
+ "references": [
2290
+ { "name": "Documentation", "url": "https://zinc.style/components/page" }
2291
+ ]
2292
+ },
2245
2293
  {
2246
2294
  "name": "zn-page-nav",
2247
2295
  "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.",
@@ -2252,6 +2300,7 @@
2252
2300
  { "name": "active", "values": [] },
2253
2301
  { "name": "split", "values": [] },
2254
2302
  { "name": "split-min", "values": [] },
2303
+ { "name": "split-min-secondary", "values": [] },
2255
2304
  { "name": "split-max", "values": [] },
2256
2305
  { "name": "primary-caption", "values": [] },
2257
2306
  { "name": "secondary-caption", "values": [] },
@@ -2551,9 +2600,10 @@
2551
2600
  },
2552
2601
  {
2553
2602
  "name": "zn-progress-bar",
2554
- "description": "Progress bars provide visual feedback about the completion status of a task or process.\n---\n\n\n### **CSS Properties:**\n - **--zn-border-color** - The color of the progress bar background track. _(default: undefined)_\n- **--zn-primary** - The color of the progress bar fill. _(default: undefined)_\n- **--zn-text-heading** - The color of the caption text. _(default: undefined)_\n- **--zn-text** - The color of the progress percentage and description text. _(default: undefined)_\n- **--zn-spacing-x-small** - The spacing between header/footer and the progress bar. _(default: undefined)_\n\n### **CSS Parts:**\n - **header** - The header container that contains the caption and progress text.\n- **caption** - The caption text element.\n- **progress** - The progress percentage text element.\n- **bar** - The SVG element containing the progress bar.\n- **track** - The background track of the progress bar.\n- **fill** - The filled portion of the progress bar indicating progress.\n- **footer** - The footer container that contains the description.\n- **info** - The description text element.",
2603
+ "description": "Progress bars provide visual feedback about the completion status of a task or process.\n---\n\n\n### **CSS Properties:**\n - **--zn-border-color** - The color of the progress bar background track. _(default: undefined)_\n- **--zn-progress-bar-color** - The color of the progress bar fill. _(default: undefined)_\n- **--zn-text-heading** - The color of the caption text. _(default: undefined)_\n- **--zn-text** - The color of the progress percentage and description text. _(default: undefined)_\n- **--zn-spacing-x-small** - The spacing between header/footer and the progress bar. _(default: undefined)_\n\n### **CSS Parts:**\n - **header** - The header container that contains the caption and progress text.\n- **caption** - The caption text element.\n- **progress** - The progress percentage text element.\n- **bar** - The SVG element containing the progress bar.\n- **track** - The background track of the progress bar.\n- **fill** - The filled portion of the progress bar indicating progress.\n- **footer** - The footer container that contains the description.\n- **info** - The description text element.",
2555
2604
  "attributes": [
2556
2605
  { "name": "caption", "values": [] },
2606
+ { "name": "color", "values": [{ "name": "ProgressBarColor" }] },
2557
2607
  { "name": "description", "values": [] },
2558
2608
  { "name": "value", "values": [] },
2559
2609
  { "name": "show-progress", "values": [] }
@@ -2869,6 +2919,11 @@
2869
2919
  "description": "Enables search/filter functionality. When enabled, the user can type into the select to filter the visible options.",
2870
2920
  "values": []
2871
2921
  },
2922
+ {
2923
+ "name": "free-text",
2924
+ "description": "Allows the user to enter values that are not in the options list (\"free text\"). Implies the editable,\nfiltering input behavior of `search`. A typed value that doesn't match an existing option is committed\nby pressing Enter, clicking the \"Add\" row, or blurring the field, and becomes a selected option — a tag\nwhen `multiple` is enabled. The committed value is both the option's value and its label.",
2925
+ "values": []
2926
+ },
2872
2927
  {
2873
2928
  "name": "label",
2874
2929
  "description": "The select's label. If you need to display HTML, use the `label` slot instead.",
@@ -3139,11 +3194,12 @@
3139
3194
  },
3140
3195
  {
3141
3196
  "name": "zn-split-pane",
3142
- "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.",
3197
+ "description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-split-pane-focus-change**\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.",
3143
3198
  "attributes": [
3144
3199
  { "name": "pixels", "values": [] },
3145
3200
  { "name": "secondary", "values": [] },
3146
3201
  { "name": "min-size", "values": [] },
3202
+ { "name": "min-secondary-size", "values": [] },
3147
3203
  { "name": "max-size", "values": [] },
3148
3204
  { "name": "initial-size", "values": [] },
3149
3205
  { "name": "store-key", "values": [] },
@@ -3154,6 +3210,16 @@
3154
3210
  { "name": "focus-pane", "values": [] },
3155
3211
  { "name": "padded", "values": [] },
3156
3212
  { "name": "padded-right", "values": [] },
3213
+ { "name": "gap", "values": [] },
3214
+ {
3215
+ "name": "hide",
3216
+ "values": [
3217
+ { "name": "primary" },
3218
+ { "name": "secondary" },
3219
+ { "name": "''" }
3220
+ ]
3221
+ },
3222
+ { "name": "merged-navigation", "values": [] },
3157
3223
  { "name": "local-storage", "values": [] },
3158
3224
  { "name": "store-ttl", "values": [] }
3159
3225
  ],
@@ -3264,6 +3330,7 @@
3264
3330
  { "name": "height", "values": [] },
3265
3331
  { "name": "pad", "values": [] },
3266
3332
  { "name": "margin", "values": [] },
3333
+ { "name": "gutter", "values": [] },
3267
3334
  { "name": "a-margin", "values": [] }
3268
3335
  ],
3269
3336
  "references": [
@@ -3273,6 +3340,18 @@
3273
3340
  }
3274
3341
  ]
3275
3342
  },
3343
+ {
3344
+ "name": "zn-tab",
3345
+ "description": "Defines a tab panel for use inside zn-page.\n---\n\n\n### **Slots:**\n - _default_ - The tab panel content.",
3346
+ "attributes": [
3347
+ { "name": "caption", "values": [] },
3348
+ { "name": "priority", "values": [] },
3349
+ { "name": "uri", "values": [] }
3350
+ ],
3351
+ "references": [
3352
+ { "name": "Documentation", "url": "https://zinc.style/components/tab" }
3353
+ ]
3354
+ },
3276
3355
  {
3277
3356
  "name": "zn-table",
3278
3357
  "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.",
@@ -3300,6 +3379,7 @@
3300
3379
  { "name": "active", "values": [] },
3301
3380
  { "name": "split", "values": [] },
3302
3381
  { "name": "split-min", "values": [] },
3382
+ { "name": "split-min-secondary", "values": [] },
3303
3383
  { "name": "split-max", "values": [] },
3304
3384
  { "name": "primary-caption", "values": [] },
3305
3385
  { "name": "secondary-caption", "values": [] },