@kubex/zinc 1.0.113 → 1.0.115

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 (101) 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 +2422 -190
  4. package/dist/vscode.html-custom-data.json +86 -5
  5. package/dist/web-types.json +251 -9
  6. package/dist/zn.d.ts +518 -340
  7. package/dist/zn.min.css +1 -1
  8. package/dist/zn.min.js +960 -882
  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/mixins/_spacing-mixins.scss +1 -1
  23. package/scss/shared/layout.scss +15 -2
  24. package/scss/themes/_light.scss +1 -1
  25. package/src/components/absolute-container/absolute-container.component.ts +9 -25
  26. package/src/components/animated-button/animated-button.test.ts +8 -8
  27. package/src/components/button/button.component.ts +3 -1
  28. package/src/components/button/button.scss +5 -0
  29. package/src/components/button-menu/button-menu.component.ts +36 -21
  30. package/src/components/button-menu/button-menu.test.ts +55 -1
  31. package/src/components/chart/chart.component.ts +7 -7
  32. package/src/components/collapsible/collapsible.component.ts +7 -14
  33. package/src/components/cols/cols.scss +1 -1
  34. package/src/components/content-block/content-block.component.ts +11 -33
  35. package/src/components/data-select/data-select.component.ts +7 -11
  36. package/src/components/data-select/data-select.scss +1 -0
  37. package/src/components/data-table/data-table.component.ts +10 -14
  38. package/src/components/dialog/dialog.scss +4 -0
  39. package/src/components/editor/modules/toolbar/toolbar.component.ts +5 -9
  40. package/src/components/expanding-action/expanding-action.component.ts +37 -43
  41. package/src/components/form-group/form-group.component.ts +32 -27
  42. package/src/components/form-group/form-group.scss +1 -0
  43. package/src/components/header/header.component.ts +6 -5
  44. package/src/components/header/header.scss +28 -26
  45. package/src/components/inline-edit/inline-edit.component.ts +13 -1
  46. package/src/components/inline-edit/inline-edit.test.ts +50 -0
  47. package/src/components/input/input.test.ts +77 -0
  48. package/src/components/input-group/input-group.test.ts +2 -10
  49. package/src/components/item/item.component.ts +12 -6
  50. package/src/components/item/item.scss +1 -1
  51. package/src/components/item/item.test.ts +8 -0
  52. package/src/components/navbar/navbar.component.ts +222 -48
  53. package/src/components/navbar/navbar.scss +134 -21
  54. package/src/components/navbar/navbar.test.ts +114 -9
  55. package/src/components/option/option.scss +5 -7
  56. package/src/components/option/option.test.ts +30 -0
  57. package/src/components/page/index.ts +13 -0
  58. package/src/components/page/page.component.ts +406 -0
  59. package/src/components/page/page.scss +325 -0
  60. package/src/components/page/page.test.ts +397 -0
  61. package/src/components/page-nav/page-nav.scss +7 -5
  62. package/src/components/pane/pane.component.ts +2 -2
  63. package/src/components/pane/pane.scss +0 -1
  64. package/src/components/pane/pane.test.ts +31 -0
  65. package/src/components/panel/panel.scss +5 -16
  66. package/src/components/progress-bar/progress-bar.component.ts +5 -2
  67. package/src/components/progress-bar/progress-bar.scss +17 -1
  68. package/src/components/progress-bar/progress-bar.test.ts +12 -0
  69. package/src/components/scroll-container/scroll-container.component.ts +22 -21
  70. package/src/components/select/select.component.ts +243 -39
  71. package/src/components/select/select.scss +36 -5
  72. package/src/components/select/select.test.ts +533 -0
  73. package/src/components/settings-container/settings-container.component.ts +15 -19
  74. package/src/components/settings-container/settings-container.scss +8 -8
  75. package/src/components/sidebar/sidebar.component.ts +11 -11
  76. package/src/components/simple-chart/simple-chart.component.ts +6 -7
  77. package/src/components/sp/sp.scss +46 -15
  78. package/src/components/sp/sp.test.ts +15 -0
  79. package/src/components/split-pane/split-pane.component.ts +153 -26
  80. package/src/components/split-pane/split-pane.scss +89 -13
  81. package/src/components/split-pane/split-pane.test.ts +187 -0
  82. package/src/components/style/style.component.ts +8 -0
  83. package/src/components/tab/index.ts +13 -0
  84. package/src/components/tab/tab.component.ts +25 -0
  85. package/src/components/tab/tab.scss +7 -0
  86. package/src/components/table/table.component.ts +7 -2
  87. package/src/components/table/table.scss +1 -0
  88. package/src/components/tabs/tabs.component.ts +75 -70
  89. package/src/components/tabs/tabs.scss +1 -1
  90. package/src/components/textarea/textarea.component.ts +5 -8
  91. package/src/components/tile/tile.scss +2 -2
  92. package/src/components/translation-group/translation-group.component.ts +15 -14
  93. package/src/components/translations/translations.component.ts +18 -17
  94. package/src/components/translations/translations.scss +1 -0
  95. package/src/components/translations/translations.test.ts +3 -2
  96. package/src/internal/form.ts +234 -0
  97. package/src/internal/theme.ts +26 -46
  98. package/src/internal/zinc-element.ts +12 -7
  99. package/src/utilities/form.ts +1 -0
  100. package/src/wc.scss +1 -1
  101. package/src/zinc.ts +3 -0
@@ -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,9 @@
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": [] },
1423
+ { "name": "layout", "values": [] }
1421
1424
  ],
1422
1425
  "references": [
1423
1426
  {
@@ -1440,7 +1443,8 @@
1440
1443
  { "name": "navigation", "values": [{ "name": "array" }] },
1441
1444
  { "name": "full-width", "values": [] },
1442
1445
  { "name": "previous-path", "values": [] },
1443
- { "name": "previous-target", "values": [] }
1446
+ { "name": "previous-target", "values": [] },
1447
+ { "name": "hide-breadcrumb", "values": [] }
1444
1448
  ],
1445
1449
  "references": [
1446
1450
  {
@@ -1591,6 +1595,11 @@
1591
1595
  "description": "Enables search/filtering on select inputs.",
1592
1596
  "values": []
1593
1597
  },
1598
+ {
1599
+ "name": "free-text",
1600
+ "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>`.",
1601
+ "values": []
1602
+ },
1594
1603
  {
1595
1604
  "name": "help-text",
1596
1605
  "description": "The input's help text. If you need to display HTML, use the `help-text` slot instead. *",
@@ -1888,6 +1897,7 @@
1888
1897
  { "name": "inline", "values": [] },
1889
1898
  { "name": "grid", "values": [] },
1890
1899
  { "name": "no-padding", "values": [] },
1900
+ { "name": "flush", "values": [] },
1891
1901
  { "name": "align-end", "values": [] },
1892
1902
  { "name": "align-center", "values": [] }
1893
1903
  ],
@@ -2144,7 +2154,7 @@
2144
2154
  },
2145
2155
  {
2146
2156
  "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.",
2157
+ "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
2158
  "attributes": [
2149
2159
  { "name": "navigation", "values": [{ "name": "array" }] },
2150
2160
  { "name": "full-width", "values": [] },
@@ -2242,6 +2252,45 @@
2242
2252
  }
2243
2253
  ]
2244
2254
  },
2255
+ {
2256
+ "name": "zn-page",
2257
+ "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.",
2258
+ "attributes": [
2259
+ { "name": "caption", "values": [] },
2260
+ { "name": "entity-id", "values": [] },
2261
+ { "name": "entity-id-show", "values": [] },
2262
+ { "name": "full-location", "values": [] },
2263
+ { "name": "modal", "values": [] },
2264
+ { "name": "nested", "values": [] },
2265
+ { "name": "primary", "values": [] },
2266
+ { "name": "previous-path", "values": [] },
2267
+ { "name": "previous-target", "values": [] },
2268
+ { "name": "summary", "values": [] },
2269
+ { "name": "master-id", "values": [] },
2270
+ { "name": "default-uri", "values": [] },
2271
+ { "name": "active", "values": [] },
2272
+ { "name": "split", "values": [] },
2273
+ { "name": "split-min", "values": [] },
2274
+ { "name": "split-min-secondary", "values": [] },
2275
+ { "name": "split-max", "values": [] },
2276
+ { "name": "primary-caption", "values": [] },
2277
+ { "name": "secondary-caption", "values": [] },
2278
+ { "name": "no-prefetch", "values": [] },
2279
+ { "name": "no-cache", "values": [] },
2280
+ { "name": "local-storage", "values": [] },
2281
+ { "name": "store-key", "values": [] },
2282
+ { "name": "store-ttl", "values": [] },
2283
+ { "name": "padded", "values": [] },
2284
+ { "name": "fetch-style", "values": [] },
2285
+ { "name": "full-width", "values": [] },
2286
+ { "name": "padded-right", "values": [] },
2287
+ { "name": "monitor", "values": [] },
2288
+ { "name": "description", "values": [] }
2289
+ ],
2290
+ "references": [
2291
+ { "name": "Documentation", "url": "https://zinc.style/components/page" }
2292
+ ]
2293
+ },
2245
2294
  {
2246
2295
  "name": "zn-page-nav",
2247
2296
  "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 +2301,7 @@
2252
2301
  { "name": "active", "values": [] },
2253
2302
  { "name": "split", "values": [] },
2254
2303
  { "name": "split-min", "values": [] },
2304
+ { "name": "split-min-secondary", "values": [] },
2255
2305
  { "name": "split-max", "values": [] },
2256
2306
  { "name": "primary-caption", "values": [] },
2257
2307
  { "name": "secondary-caption", "values": [] },
@@ -2551,9 +2601,10 @@
2551
2601
  },
2552
2602
  {
2553
2603
  "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.",
2604
+ "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
2605
  "attributes": [
2556
2606
  { "name": "caption", "values": [] },
2607
+ { "name": "color", "values": [{ "name": "ProgressBarColor" }] },
2557
2608
  { "name": "description", "values": [] },
2558
2609
  { "name": "value", "values": [] },
2559
2610
  { "name": "show-progress", "values": [] }
@@ -2869,6 +2920,11 @@
2869
2920
  "description": "Enables search/filter functionality. When enabled, the user can type into the select to filter the visible options.",
2870
2921
  "values": []
2871
2922
  },
2923
+ {
2924
+ "name": "free-text",
2925
+ "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.",
2926
+ "values": []
2927
+ },
2872
2928
  {
2873
2929
  "name": "label",
2874
2930
  "description": "The select's label. If you need to display HTML, use the `label` slot instead.",
@@ -3139,11 +3195,12 @@
3139
3195
  },
3140
3196
  {
3141
3197
  "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.",
3198
+ "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
3199
  "attributes": [
3144
3200
  { "name": "pixels", "values": [] },
3145
3201
  { "name": "secondary", "values": [] },
3146
3202
  { "name": "min-size", "values": [] },
3203
+ { "name": "min-secondary-size", "values": [] },
3147
3204
  { "name": "max-size", "values": [] },
3148
3205
  { "name": "initial-size", "values": [] },
3149
3206
  { "name": "store-key", "values": [] },
@@ -3154,6 +3211,16 @@
3154
3211
  { "name": "focus-pane", "values": [] },
3155
3212
  { "name": "padded", "values": [] },
3156
3213
  { "name": "padded-right", "values": [] },
3214
+ { "name": "gap", "values": [] },
3215
+ {
3216
+ "name": "hide",
3217
+ "values": [
3218
+ { "name": "primary" },
3219
+ { "name": "secondary" },
3220
+ { "name": "''" }
3221
+ ]
3222
+ },
3223
+ { "name": "merged-navigation", "values": [] },
3157
3224
  { "name": "local-storage", "values": [] },
3158
3225
  { "name": "store-ttl", "values": [] }
3159
3226
  ],
@@ -3264,6 +3331,7 @@
3264
3331
  { "name": "height", "values": [] },
3265
3332
  { "name": "pad", "values": [] },
3266
3333
  { "name": "margin", "values": [] },
3334
+ { "name": "gutter", "values": [] },
3267
3335
  { "name": "a-margin", "values": [] }
3268
3336
  ],
3269
3337
  "references": [
@@ -3273,6 +3341,18 @@
3273
3341
  }
3274
3342
  ]
3275
3343
  },
3344
+ {
3345
+ "name": "zn-tab",
3346
+ "description": "Defines a tab panel for use inside zn-page.\n---\n\n\n### **Slots:**\n - _default_ - The tab panel content.",
3347
+ "attributes": [
3348
+ { "name": "caption", "values": [] },
3349
+ { "name": "priority", "values": [] },
3350
+ { "name": "uri", "values": [] }
3351
+ ],
3352
+ "references": [
3353
+ { "name": "Documentation", "url": "https://zinc.style/components/tab" }
3354
+ ]
3355
+ },
3276
3356
  {
3277
3357
  "name": "zn-table",
3278
3358
  "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 +3380,7 @@
3300
3380
  { "name": "active", "values": [] },
3301
3381
  { "name": "split", "values": [] },
3302
3382
  { "name": "split-min", "values": [] },
3383
+ { "name": "split-min-secondary", "values": [] },
3303
3384
  { "name": "split-max", "values": [] },
3304
3385
  { "name": "primary-caption", "values": [] },
3305
3386
  { "name": "secondary-caption", "values": [] },