@vielzeug/refine 3.0.0 → 3.2.0

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 (83) hide show
  1. package/dist/button.cjs +6 -4
  2. package/dist/button.cjs.map +1 -1
  3. package/dist/button.js +11 -9
  4. package/dist/button.js.map +1 -1
  5. package/dist/card.cjs +1 -1
  6. package/dist/card.cjs.map +1 -1
  7. package/dist/card.js +4 -2
  8. package/dist/card.js.map +1 -1
  9. package/dist/custom-elements.json +518 -504
  10. package/dist/feedback/skeleton/skeleton.css.cjs +1 -1
  11. package/dist/feedback/skeleton/skeleton.css.cjs.map +1 -1
  12. package/dist/feedback/skeleton/skeleton.css.js +1 -1
  13. package/dist/feedback/skeleton/skeleton.css.js.map +1 -1
  14. package/dist/feedback/skeleton/skeleton.d.ts +1 -1
  15. package/dist/inputs/date-picker/date-picker.css.cjs +1 -1
  16. package/dist/inputs/date-picker/date-picker.css.cjs.map +1 -1
  17. package/dist/inputs/date-picker/date-picker.css.js +1 -1
  18. package/dist/inputs/date-picker/date-picker.css.js.map +1 -1
  19. package/dist/inputs/input/input.css.cjs +1 -1
  20. package/dist/inputs/input/input.css.cjs.map +1 -1
  21. package/dist/inputs/input/input.css.js +1 -1
  22. package/dist/inputs/input/input.css.js.map +1 -1
  23. package/dist/inputs/switch/switch.css.cjs +1 -1
  24. package/dist/inputs/switch/switch.css.cjs.map +1 -1
  25. package/dist/inputs/switch/switch.css.js +1 -1
  26. package/dist/inputs/switch/switch.css.js.map +1 -1
  27. package/dist/inputs/switch/switch.d.ts.map +1 -1
  28. package/dist/layout/navbar/navbar.css.cjs +1 -1
  29. package/dist/layout/navbar/navbar.css.cjs.map +1 -1
  30. package/dist/layout/navbar/navbar.css.js +1 -1
  31. package/dist/layout/navbar/navbar.css.js.map +1 -1
  32. package/dist/layout/navbar/navbar.d.ts +6 -0
  33. package/dist/layout/navbar/navbar.d.ts.map +1 -1
  34. package/dist/layout/sidebar/sidebar-item.css.cjs +1 -1
  35. package/dist/layout/sidebar/sidebar-item.css.cjs.map +1 -1
  36. package/dist/layout/sidebar/sidebar-item.css.js +1 -1
  37. package/dist/layout/sidebar/sidebar-item.css.js.map +1 -1
  38. package/dist/layout/sidebar/sidebar.css.cjs +1 -1
  39. package/dist/layout/sidebar/sidebar.css.cjs.map +1 -1
  40. package/dist/layout/sidebar/sidebar.css.js +1 -1
  41. package/dist/layout/sidebar/sidebar.css.js.map +1 -1
  42. package/dist/layout/sidebar/sidebar.d.ts +1 -0
  43. package/dist/layout/sidebar/sidebar.d.ts.map +1 -1
  44. package/dist/navbar.cjs +10 -10
  45. package/dist/navbar.cjs.map +1 -1
  46. package/dist/navbar.js +99 -97
  47. package/dist/navbar.js.map +1 -1
  48. package/dist/overlay/menu/menu.css.cjs +1 -1
  49. package/dist/overlay/menu/menu.css.cjs.map +1 -1
  50. package/dist/overlay/menu/menu.css.js +1 -1
  51. package/dist/overlay/menu/menu.css.js.map +1 -1
  52. package/dist/overlay/shared/use-floating-trigger.cjs +1 -1
  53. package/dist/overlay/shared/use-floating-trigger.cjs.map +1 -1
  54. package/dist/overlay/shared/use-floating-trigger.d.ts +3 -3
  55. package/dist/overlay/shared/use-floating-trigger.d.ts.map +1 -1
  56. package/dist/overlay/shared/use-floating-trigger.js +16 -4
  57. package/dist/overlay/shared/use-floating-trigger.js.map +1 -1
  58. package/dist/refine.cjs +95 -45
  59. package/dist/refine.cjs.map +1 -1
  60. package/dist/refine.iife.js +95 -45
  61. package/dist/refine.iife.js.map +1 -1
  62. package/dist/refine.js +180 -130
  63. package/dist/refine.js.map +1 -1
  64. package/dist/sidebar.cjs +10 -2
  65. package/dist/sidebar.cjs.map +1 -1
  66. package/dist/sidebar.js +10 -1
  67. package/dist/sidebar.js.map +1 -1
  68. package/dist/skeleton.cjs.map +1 -1
  69. package/dist/skeleton.js.map +1 -1
  70. package/dist/styles/mixins/field-variants.css.cjs +15 -0
  71. package/dist/styles/mixins/field-variants.css.cjs.map +1 -1
  72. package/dist/styles/mixins/field-variants.css.d.ts.map +1 -1
  73. package/dist/styles/mixins/field-variants.css.js +15 -0
  74. package/dist/styles/mixins/field-variants.css.js.map +1 -1
  75. package/dist/styles/mixins/variants.css.cjs +4 -4
  76. package/dist/styles/mixins/variants.css.cjs.map +1 -1
  77. package/dist/styles/mixins/variants.css.js +4 -4
  78. package/dist/styles/mixins/variants.css.js.map +1 -1
  79. package/dist/switch.cjs +28 -3
  80. package/dist/switch.cjs.map +1 -1
  81. package/dist/switch.js +54 -30
  82. package/dist/switch.js.map +1 -1
  83. package/package.json +2 -2
@@ -6118,217 +6118,103 @@
6118
6118
  },
6119
6119
  {
6120
6120
  "kind": "javascript-module",
6121
- "path": "src/feedback/chip/chip.ts",
6121
+ "path": "src/feedback/password-strength/password-strength.ts",
6122
6122
  "declarations": [
6123
6123
  {
6124
6124
  "kind": "variable",
6125
- "name": "CHIP_TAG",
6125
+ "name": "PASSWORD_STRENGTH_TAG",
6126
6126
  "type": {
6127
- "text": "'ore-chip'"
6127
+ "text": "'ore-password-strength'"
6128
6128
  },
6129
- "default": "'ore-chip'",
6130
- "description": "A compact, styled label element. Supports icons, a remove button, colors, sizes, and variants.\nCommonly used to represent tags, filters, or selected options in a multiselect field."
6129
+ "default": "'ore-password-strength'",
6130
+ "description": "Strong password meter with segmented progress visualization.\n\nBuilt-in scoring is heuristic and conservative:\n- length < 6 => weak\n- length >= 8 with mixed case => fair\n- + digit or symbol => good\n- length >= 12 with mixed case, digit and symbol => strong"
6131
6131
  },
6132
6132
  {
6133
6133
  "kind": "class",
6134
- "name": "OreChipElement",
6135
- "tagName": "ore-chip",
6134
+ "name": "OrePasswordStrengthElement",
6135
+ "tagName": "ore-password-strength",
6136
6136
  "customElement": true,
6137
- "description": "A compact, styled label element. Supports icons, a remove button, colors, sizes, and variants.\nCommonly used to represent tags, filters, or selected options in a multiselect field.",
6137
+ "description": "Strong password meter with segmented progress visualization.\nBuilt-in scoring is heuristic and conservative:\n- length < 6 => weak\n- length >= 8 with mixed case => fair\n- + digit or symbol => good\n- length >= 12 with mixed case, digit and symbol => strong",
6138
6138
  "summary": "",
6139
6139
  "attributes": [
6140
6140
  {
6141
- "name": "label",
6141
+ "name": "value",
6142
6142
  "type": {
6143
6143
  "text": "string"
6144
6144
  },
6145
- "description": "Accessible label (required for icon-only chips)"
6146
- },
6147
- {
6148
- "name": "color",
6149
- "type": {
6150
- "text": "'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'"
6151
- },
6152
- "description": "Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'"
6153
- },
6154
- {
6155
- "name": "variant",
6156
- "type": {
6157
- "text": "'solid' | 'flat' | 'bordered' | 'outline' | 'ghost'"
6158
- },
6159
- "description": "Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost'"
6160
- },
6161
- {
6162
- "name": "size",
6163
- "type": {
6164
- "text": "'sm' | 'md' | 'lg'"
6165
- },
6166
- "description": "Component size: 'sm' | 'md' | 'lg'"
6167
- },
6168
- {
6169
- "name": "rounded",
6170
- "type": {
6171
- "text": "'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'"
6172
- },
6173
- "description": "Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'"
6145
+ "description": "Password string to evaluate"
6174
6146
  },
6175
6147
  {
6176
- "name": "mode",
6148
+ "name": "score",
6177
6149
  "type": {
6178
- "text": "'static' | 'removable' | 'selectable' | 'action'"
6150
+ "text": "number"
6179
6151
  },
6180
- "description": "Interaction mode: 'static' | 'removable' | 'selectable' | 'action'"
6152
+ "description": "Optional score override (0..4). Use -1 for no override (default: -1)",
6153
+ "default": "-1"
6181
6154
  },
6182
6155
  {
6183
- "name": "disabled",
6156
+ "name": "show-label",
6184
6157
  "type": {
6185
6158
  "text": "boolean"
6186
6159
  },
6187
- "description": "Disable the chip"
6160
+ "description": "Show visible feedback label (default: true)",
6161
+ "default": "true"
6188
6162
  },
6189
6163
  {
6190
- "name": "value",
6164
+ "name": "label",
6191
6165
  "type": {
6192
6166
  "text": "string"
6193
6167
  },
6194
- "description": "Value included in emitted event detail"
6195
- },
6196
- {
6197
- "name": "checked",
6198
- "type": {
6199
- "text": "boolean"
6200
- },
6201
- "description": "Controlled checked state for selectable chips"
6202
- },
6203
- {
6204
- "name": "default-checked",
6205
- "type": {
6206
- "text": "boolean"
6207
- },
6208
- "description": "Initial checked state for uncontrolled selectable chips"
6209
- }
6210
- ],
6211
- "events": [
6212
- {
6213
- "name": "remove",
6214
- "description": "Fired when the remove button is clicked. detail: { value: string, originalEvent: MouseEvent }",
6215
- "type": {
6216
- "text": "CustomEvent"
6217
- }
6218
- },
6219
- {
6220
- "name": "change",
6221
- "description": "Fired when a selectable chip toggles. detail: { checked: boolean, value: string, originalEvent: Event }",
6222
- "type": {
6223
- "text": "CustomEvent"
6224
- }
6225
- },
6226
- {
6227
- "name": "click",
6228
- "description": "Fired when an action chip is clicked. detail: { value: string, originalEvent: MouseEvent }",
6229
- "type": {
6230
- "text": "CustomEvent"
6231
- }
6232
- }
6233
- ],
6234
- "slots": [
6235
- {
6236
- "name": "",
6237
- "description": "Chip label text"
6238
- },
6239
- {
6240
- "name": "icon",
6241
- "description": "Leading icon or decoration"
6242
- }
6243
- ],
6244
- "cssParts": [
6245
- {
6246
- "name": "remove-btn",
6247
- "description": "Remove action button."
6248
- },
6249
- {
6250
- "name": "chip-btn",
6251
- "description": "Shadow part for the `chip-btn` element."
6252
- },
6253
- {
6254
- "name": "chip",
6255
- "description": "Shadow part for the `chip` element."
6168
+ "description": "Accessible name (default: 'Password strength')",
6169
+ "default": "'Password strength'"
6256
6170
  }
6257
6171
  ],
6258
6172
  "cssProperties": [
6259
6173
  {
6260
- "name": "--chip-bg",
6261
- "description": "Background color"
6262
- },
6263
- {
6264
- "name": "--chip-color",
6265
- "description": "Text color"
6266
- },
6267
- {
6268
- "name": "--chip-border-color",
6269
- "description": "Border color"
6270
- },
6271
- {
6272
- "name": "--chip-radius",
6273
- "description": "Border radius"
6274
- },
6275
- {
6276
- "name": "--chip-font-size",
6277
- "description": "Font size"
6278
- },
6279
- {
6280
- "name": "--chip-font-weight",
6281
- "description": "Font weight"
6282
- },
6283
- {
6284
- "name": "--chip-padding-x",
6285
- "description": "Horizontal padding"
6286
- },
6287
- {
6288
- "name": "--chip-padding-y",
6289
- "description": "Vertical padding"
6174
+ "name": "--password-strength-height Segment bar height",
6175
+ "description": ""
6290
6176
  },
6291
6177
  {
6292
- "name": "--chip-gap",
6293
- "description": "Gap between icon, label and remove button"
6178
+ "name": "--password-strength-gap Gap between segments",
6179
+ "description": ""
6294
6180
  },
6295
6181
  {
6296
- "name": "--chip-hover-bg",
6297
- "description": "Background on hover (interactive modes)"
6182
+ "name": "--password-strength-radius Segment corner radius",
6183
+ "description": ""
6298
6184
  },
6299
6185
  {
6300
- "name": "--chip-hover-color",
6301
- "description": "Text color on hover (interactive modes)"
6186
+ "name": "--password-strength-track-bg Inactive segment color",
6187
+ "description": ""
6302
6188
  },
6303
6189
  {
6304
- "name": "--chip-hover-border-color",
6305
- "description": "Border color on hover (interactive modes)"
6190
+ "name": "--password-strength-label-size Visible label font size",
6191
+ "description": ""
6306
6192
  },
6307
6193
  {
6308
- "name": "--chip-active-bg",
6309
- "description": "Background when pressed (interactive modes)"
6194
+ "name": "--password-strength-label-color Visible label color",
6195
+ "description": ""
6310
6196
  },
6311
6197
  {
6312
- "name": "--chip-active-color",
6313
- "description": "Text color when pressed (interactive modes)"
6198
+ "name": "--password-strength-weak-color Weak state segment color",
6199
+ "description": ""
6314
6200
  },
6315
6201
  {
6316
- "name": "--chip-remove-bg",
6317
- "description": "Remove button background (bordered/outline variants)"
6202
+ "name": "--password-strength-fair-color Fair state segment color",
6203
+ "description": ""
6318
6204
  },
6319
6205
  {
6320
- "name": "--chip-remove-color",
6321
- "description": "Remove button icon color (bordered/outline variants)"
6206
+ "name": "--password-strength-good-color Good state segment color",
6207
+ "description": ""
6322
6208
  },
6323
6209
  {
6324
- "name": "--chip-remove-hover-bg",
6325
- "description": "Remove button background on hover"
6210
+ "name": "--password-strength-strong-color Strong state segment color",
6211
+ "description": ""
6326
6212
  }
6327
6213
  ],
6328
6214
  "demos": [
6329
6215
  {
6330
6216
  "url": "",
6331
- "description": "```html\n<!-- Static chip (read-only) -->\n<ore-chip color=\"primary\">Design</ore-chip>\n<!-- Removable chip -->\n<ore-chip color=\"success\" variant=\"flat\" mode=\"removable\" value=\"ts\">\n TypeScript\n</ore-chip>\n<!-- Selectable chip (controlled) -->\n<ore-chip color=\"info\" variant=\"flat\" mode=\"selectable\" checked value=\"ui\">\n UI\n</ore-chip>\n<!-- Selectable chip (uncontrolled) -->\n<ore-chip color=\"info\" variant=\"flat\" mode=\"selectable\" default-checked value=\"ui\">\n UI\n</ore-chip>\n<!-- Action chip (acts like a button) -->\n<ore-chip color=\"warning\" mode=\"action\" value=\"add\">\n <svg slot=\"icon\" ...></svg>\n Add Item\n</ore-chip>\n<!-- Icon-only chip -->\n<ore-chip color=\"error\" mode=\"action\" label=\"Delete\">\n <svg slot=\"icon\" ...></svg>\n</ore-chip>\n```"
6217
+ "description": "```html\n<!-- Pair with an ore-input to evaluate in real time -->\n<ore-input type=\"password\" label=\"Password\" name=\"password\" id=\"pwd\"></ore-input>\n<ore-password-strength id=\"meter\"></ore-password-strength>\n<script type=\"module\">\n document.getElementById('pwd').addEventListener('input', (e) => {\n document.getElementById('meter').value = e.target.value;\n });\n</script>\n<!-- Fixed score display (e.g. from a server-side score) -->\n<ore-password-strength score=\"3\"></ore-password-strength>\n```"
6332
6218
  }
6333
6219
  ]
6334
6220
  }
@@ -6336,121 +6222,156 @@
6336
6222
  "exports": [
6337
6223
  {
6338
6224
  "kind": "js",
6339
- "name": "CHIP_TAG",
6225
+ "name": "PASSWORD_STRENGTH_TAG",
6340
6226
  "declaration": {
6341
- "name": "CHIP_TAG",
6342
- "module": "src/feedback/chip/chip.ts"
6227
+ "name": "PASSWORD_STRENGTH_TAG",
6228
+ "module": "src/feedback/password-strength/password-strength.ts"
6343
6229
  }
6344
6230
  },
6345
6231
  {
6346
6232
  "kind": "custom-element-definition",
6347
- "name": "OreChipElement",
6233
+ "name": "OrePasswordStrengthElement",
6348
6234
  "declaration": {
6349
- "name": "OreChipElement",
6350
- "module": "src/feedback/chip/chip.ts"
6235
+ "name": "OrePasswordStrengthElement",
6236
+ "module": "src/feedback/password-strength/password-strength.ts"
6351
6237
  }
6352
6238
  }
6353
6239
  ]
6354
6240
  },
6355
6241
  {
6356
6242
  "kind": "javascript-module",
6357
- "path": "src/feedback/password-strength/password-strength.ts",
6243
+ "path": "src/feedback/skeleton/skeleton.ts",
6358
6244
  "declarations": [
6359
6245
  {
6360
6246
  "kind": "variable",
6361
- "name": "PASSWORD_STRENGTH_TAG",
6247
+ "name": "SKELETON_TAG",
6362
6248
  "type": {
6363
- "text": "'ore-password-strength'"
6249
+ "text": "'ore-skeleton'"
6364
6250
  },
6365
- "default": "'ore-password-strength'",
6366
- "description": "Strong password meter with segmented progress visualization.\n\nBuilt-in scoring is heuristic and conservative:\n- length < 6 => weak\n- length >= 8 with mixed case => fair\n- + digit or symbol => good\n- length >= 12 with mixed case, digit and symbol => strong"
6251
+ "default": "'ore-skeleton'",
6252
+ "description": "A shimmer placeholder that represents loading content.\nControl dimensions via the `--skeleton-width` and `--skeleton-height` CSS custom properties,\nor via `width` / `height` inline styles. Rectangle and circle bones fill the rendered host box."
6367
6253
  },
6368
6254
  {
6369
6255
  "kind": "class",
6370
- "name": "OrePasswordStrengthElement",
6371
- "tagName": "ore-password-strength",
6256
+ "name": "OreSkeletonElement",
6257
+ "tagName": "ore-skeleton",
6372
6258
  "customElement": true,
6373
- "description": "Strong password meter with segmented progress visualization.\nBuilt-in scoring is heuristic and conservative:\n- length < 6 => weak\n- length >= 8 with mixed case => fair\n- + digit or symbol => good\n- length >= 12 with mixed case, digit and symbol => strong",
6259
+ "description": "A shimmer placeholder that represents loading content.\nControl dimensions via the `--skeleton-width` and `--skeleton-height` CSS custom properties,\nor via `width` / `height` inline styles. Rectangle and circle bones fill the rendered host box.",
6374
6260
  "summary": "",
6375
6261
  "attributes": [
6376
6262
  {
6377
- "name": "value",
6263
+ "name": "variant",
6264
+ "type": {
6265
+ "text": "'circle' | 'text'"
6266
+ },
6267
+ "description": "Shape: 'rect' (default) | 'circle' | 'text'"
6268
+ },
6269
+ {
6270
+ "name": "size",
6271
+ "type": {
6272
+ "text": "'sm' | 'md' | 'lg'"
6273
+ },
6274
+ "description": "Height/circle preset: 'sm' | 'md' | 'lg'"
6275
+ },
6276
+ {
6277
+ "name": "width",
6378
6278
  "type": {
6379
6279
  "text": "string"
6380
6280
  },
6381
- "description": "Password string to evaluate"
6281
+ "description": "Width override (CSS length/percentage)"
6382
6282
  },
6383
6283
  {
6384
- "name": "score",
6284
+ "name": "height",
6385
6285
  "type": {
6386
- "text": "number"
6286
+ "text": "string"
6387
6287
  },
6388
- "description": "Optional score override (0..4). Use -1 for no override (default: -1)",
6389
- "default": "-1"
6288
+ "description": "Height override (CSS length)"
6390
6289
  },
6391
6290
  {
6392
- "name": "show-label",
6291
+ "name": "radius",
6292
+ "type": {
6293
+ "text": "string"
6294
+ },
6295
+ "description": "Radius override"
6296
+ },
6297
+ {
6298
+ "name": "animated",
6393
6299
  "type": {
6394
6300
  "text": "boolean"
6395
6301
  },
6396
- "description": "Show visible feedback label (default: true)",
6397
- "default": "true"
6302
+ "description": "Disable with `animated=\"false\"`"
6398
6303
  },
6399
6304
  {
6400
- "name": "label",
6305
+ "name": "lines",
6401
6306
  "type": {
6402
- "text": "string"
6307
+ "text": "number"
6403
6308
  },
6404
- "description": "Accessible name (default: 'Password strength')",
6405
- "default": "'Password strength'"
6309
+ "description": "Text line count (only for `variant='text'`)"
6310
+ },
6311
+ {
6312
+ "name": "striped",
6313
+ "type": {
6314
+ "text": "boolean"
6315
+ },
6316
+ "description": "Replace shimmer with diagonal stripes"
6317
+ }
6318
+ ],
6319
+ "cssParts": [
6320
+ {
6321
+ "name": "stack",
6322
+ "description": "Stack container."
6323
+ },
6324
+ {
6325
+ "name": "bone",
6326
+ "description": "Skeleton bone element."
6406
6327
  }
6407
6328
  ],
6408
6329
  "cssProperties": [
6409
6330
  {
6410
- "name": "--password-strength-height Segment bar height",
6411
- "description": ""
6331
+ "name": "--skeleton-bg",
6332
+ "description": "Base shimmer color"
6412
6333
  },
6413
6334
  {
6414
- "name": "--password-strength-gap Gap between segments",
6415
- "description": ""
6335
+ "name": "--skeleton-highlight",
6336
+ "description": "Shimmer highlight color"
6416
6337
  },
6417
6338
  {
6418
- "name": "--password-strength-radius Segment corner radius",
6419
- "description": ""
6339
+ "name": "--skeleton-radius",
6340
+ "description": "Border radius"
6420
6341
  },
6421
6342
  {
6422
- "name": "--password-strength-track-bg Inactive segment color",
6423
- "description": ""
6343
+ "name": "--skeleton-size",
6344
+ "description": "Circle fallback size"
6424
6345
  },
6425
6346
  {
6426
- "name": "--password-strength-label-size Visible label font size",
6427
- "description": ""
6347
+ "name": "--skeleton-width",
6348
+ "description": "Width (default: 100%)"
6428
6349
  },
6429
6350
  {
6430
- "name": "--password-strength-label-color Visible label color",
6431
- "description": ""
6351
+ "name": "--skeleton-height",
6352
+ "description": "Height (default: var(--size-4))"
6432
6353
  },
6433
6354
  {
6434
- "name": "--password-strength-weak-color Weak state segment color",
6435
- "description": ""
6355
+ "name": "--skeleton-line-gap",
6356
+ "description": "Vertical gap between text lines"
6436
6357
  },
6437
6358
  {
6438
- "name": "--password-strength-fair-color Fair state segment color",
6439
- "description": ""
6359
+ "name": "--skeleton-last-line-width",
6360
+ "description": "Width of the final text line"
6440
6361
  },
6441
6362
  {
6442
- "name": "--password-strength-good-color Good state segment color",
6443
- "description": ""
6363
+ "name": "--skeleton-duration",
6364
+ "description": "Shimmer animation duration"
6444
6365
  },
6445
6366
  {
6446
- "name": "--password-strength-strong-color Strong state segment color",
6447
- "description": ""
6367
+ "name": "--skeleton-stripe-size",
6368
+ "description": "Width of each diagonal stripe (default: 6px)"
6448
6369
  }
6449
6370
  ],
6450
6371
  "demos": [
6451
6372
  {
6452
6373
  "url": "",
6453
- "description": "```html\n<!-- Pair with an ore-input to evaluate in real time -->\n<ore-input type=\"password\" label=\"Password\" name=\"password\" id=\"pwd\"></ore-input>\n<ore-password-strength id=\"meter\"></ore-password-strength>\n<script type=\"module\">\n document.getElementById('pwd').addEventListener('input', (e) => {\n document.getElementById('meter').value = e.target.value;\n });\n</script>\n<!-- Fixed score display (e.g. from a server-side score) -->\n<ore-password-strength score=\"3\"></ore-password-strength>\n```"
6374
+ "description": "```html\n<!-- Paragraph lines -->\n<ore-skeleton variant=\"text\" lines=\"3\" width=\"100%\"></ore-skeleton>\n<!-- Avatar -->\n<ore-skeleton variant=\"circle\" size=\"md\"></ore-skeleton>\n<!-- Card image -->\n<ore-skeleton width=\"100%\" height=\"10rem\"></ore-skeleton>\n```"
6454
6375
  }
6455
6376
  ]
6456
6377
  }
@@ -6458,18 +6379,18 @@
6458
6379
  "exports": [
6459
6380
  {
6460
6381
  "kind": "js",
6461
- "name": "PASSWORD_STRENGTH_TAG",
6382
+ "name": "SKELETON_TAG",
6462
6383
  "declaration": {
6463
- "name": "PASSWORD_STRENGTH_TAG",
6464
- "module": "src/feedback/password-strength/password-strength.ts"
6384
+ "name": "SKELETON_TAG",
6385
+ "module": "src/feedback/skeleton/skeleton.ts"
6465
6386
  }
6466
6387
  },
6467
6388
  {
6468
6389
  "kind": "custom-element-definition",
6469
- "name": "OrePasswordStrengthElement",
6390
+ "name": "OreSkeletonElement",
6470
6391
  "declaration": {
6471
- "name": "OrePasswordStrengthElement",
6472
- "module": "src/feedback/password-strength/password-strength.ts"
6392
+ "name": "OreSkeletonElement",
6393
+ "module": "src/feedback/skeleton/skeleton.ts"
6473
6394
  }
6474
6395
  }
6475
6396
  ]
@@ -6640,138 +6561,217 @@
6640
6561
  },
6641
6562
  {
6642
6563
  "kind": "javascript-module",
6643
- "path": "src/feedback/skeleton/skeleton.ts",
6564
+ "path": "src/feedback/chip/chip.ts",
6644
6565
  "declarations": [
6645
6566
  {
6646
6567
  "kind": "variable",
6647
- "name": "SKELETON_TAG",
6568
+ "name": "CHIP_TAG",
6648
6569
  "type": {
6649
- "text": "'ore-skeleton'"
6570
+ "text": "'ore-chip'"
6650
6571
  },
6651
- "default": "'ore-skeleton'",
6652
- "description": "A shimmer placeholder that represents loading content.\nControl dimensions via the `--skeleton-width` and `--skeleton-height` CSS custom properties,\nor via `width` / `height` inline styles."
6572
+ "default": "'ore-chip'",
6573
+ "description": "A compact, styled label element. Supports icons, a remove button, colors, sizes, and variants.\nCommonly used to represent tags, filters, or selected options in a multiselect field."
6653
6574
  },
6654
6575
  {
6655
6576
  "kind": "class",
6656
- "name": "OreSkeletonElement",
6657
- "tagName": "ore-skeleton",
6577
+ "name": "OreChipElement",
6578
+ "tagName": "ore-chip",
6658
6579
  "customElement": true,
6659
- "description": "A shimmer placeholder that represents loading content.\nControl dimensions via the `--skeleton-width` and `--skeleton-height` CSS custom properties,\nor via `width` / `height` inline styles.",
6580
+ "description": "A compact, styled label element. Supports icons, a remove button, colors, sizes, and variants.\nCommonly used to represent tags, filters, or selected options in a multiselect field.",
6660
6581
  "summary": "",
6661
6582
  "attributes": [
6583
+ {
6584
+ "name": "label",
6585
+ "type": {
6586
+ "text": "string"
6587
+ },
6588
+ "description": "Accessible label (required for icon-only chips)"
6589
+ },
6590
+ {
6591
+ "name": "color",
6592
+ "type": {
6593
+ "text": "'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'"
6594
+ },
6595
+ "description": "Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'"
6596
+ },
6662
6597
  {
6663
6598
  "name": "variant",
6664
6599
  "type": {
6665
- "text": "'circle' | 'text'"
6600
+ "text": "'solid' | 'flat' | 'bordered' | 'outline' | 'ghost'"
6666
6601
  },
6667
- "description": "Shape: 'rect' (default) | 'circle' | 'text'"
6602
+ "description": "Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost'"
6668
6603
  },
6669
6604
  {
6670
6605
  "name": "size",
6671
6606
  "type": {
6672
6607
  "text": "'sm' | 'md' | 'lg'"
6673
6608
  },
6674
- "description": "Height/circle preset: 'sm' | 'md' | 'lg'"
6609
+ "description": "Component size: 'sm' | 'md' | 'lg'"
6675
6610
  },
6676
6611
  {
6677
- "name": "width",
6612
+ "name": "rounded",
6678
6613
  "type": {
6679
- "text": "string"
6614
+ "text": "'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'"
6680
6615
  },
6681
- "description": "Width override (CSS length/percentage)"
6616
+ "description": "Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'"
6682
6617
  },
6683
6618
  {
6684
- "name": "height",
6619
+ "name": "mode",
6685
6620
  "type": {
6686
- "text": "string"
6621
+ "text": "'static' | 'removable' | 'selectable' | 'action'"
6687
6622
  },
6688
- "description": "Height override (CSS length)"
6623
+ "description": "Interaction mode: 'static' | 'removable' | 'selectable' | 'action'"
6689
6624
  },
6690
6625
  {
6691
- "name": "radius",
6626
+ "name": "disabled",
6692
6627
  "type": {
6693
- "text": "string"
6628
+ "text": "boolean"
6694
6629
  },
6695
- "description": "Radius override"
6630
+ "description": "Disable the chip"
6696
6631
  },
6697
6632
  {
6698
- "name": "animated",
6633
+ "name": "value",
6699
6634
  "type": {
6700
- "text": "boolean"
6635
+ "text": "string"
6701
6636
  },
6702
- "description": "Disable with `animated=\"false\"`"
6637
+ "description": "Value included in emitted event detail"
6703
6638
  },
6704
6639
  {
6705
- "name": "lines",
6640
+ "name": "checked",
6706
6641
  "type": {
6707
- "text": "number"
6642
+ "text": "boolean"
6708
6643
  },
6709
- "description": "Text line count (only for `variant='text'`)"
6644
+ "description": "Controlled checked state for selectable chips"
6710
6645
  },
6711
6646
  {
6712
- "name": "striped",
6647
+ "name": "default-checked",
6713
6648
  "type": {
6714
6649
  "text": "boolean"
6715
6650
  },
6716
- "description": "Replace shimmer with diagonal stripes"
6651
+ "description": "Initial checked state for uncontrolled selectable chips"
6652
+ }
6653
+ ],
6654
+ "events": [
6655
+ {
6656
+ "name": "remove",
6657
+ "description": "Fired when the remove button is clicked. detail: { value: string, originalEvent: MouseEvent }",
6658
+ "type": {
6659
+ "text": "CustomEvent"
6660
+ }
6661
+ },
6662
+ {
6663
+ "name": "change",
6664
+ "description": "Fired when a selectable chip toggles. detail: { checked: boolean, value: string, originalEvent: Event }",
6665
+ "type": {
6666
+ "text": "CustomEvent"
6667
+ }
6668
+ },
6669
+ {
6670
+ "name": "click",
6671
+ "description": "Fired when an action chip is clicked. detail: { value: string, originalEvent: MouseEvent }",
6672
+ "type": {
6673
+ "text": "CustomEvent"
6674
+ }
6675
+ }
6676
+ ],
6677
+ "slots": [
6678
+ {
6679
+ "name": "",
6680
+ "description": "Chip label text"
6681
+ },
6682
+ {
6683
+ "name": "icon",
6684
+ "description": "Leading icon or decoration"
6717
6685
  }
6718
6686
  ],
6719
6687
  "cssParts": [
6720
6688
  {
6721
- "name": "stack",
6722
- "description": "Stack container."
6689
+ "name": "remove-btn",
6690
+ "description": "Remove action button."
6723
6691
  },
6724
6692
  {
6725
- "name": "bone",
6726
- "description": "Skeleton bone element."
6693
+ "name": "chip-btn",
6694
+ "description": "Shadow part for the `chip-btn` element."
6695
+ },
6696
+ {
6697
+ "name": "chip",
6698
+ "description": "Shadow part for the `chip` element."
6727
6699
  }
6728
6700
  ],
6729
6701
  "cssProperties": [
6730
6702
  {
6731
- "name": "--skeleton-bg",
6732
- "description": "Base shimmer color"
6703
+ "name": "--chip-bg",
6704
+ "description": "Background color"
6733
6705
  },
6734
6706
  {
6735
- "name": "--skeleton-highlight",
6736
- "description": "Shimmer highlight color"
6707
+ "name": "--chip-color",
6708
+ "description": "Text color"
6737
6709
  },
6738
6710
  {
6739
- "name": "--skeleton-radius",
6711
+ "name": "--chip-border-color",
6712
+ "description": "Border color"
6713
+ },
6714
+ {
6715
+ "name": "--chip-radius",
6740
6716
  "description": "Border radius"
6741
6717
  },
6742
6718
  {
6743
- "name": "--skeleton-size",
6744
- "description": "Circle fallback size"
6719
+ "name": "--chip-font-size",
6720
+ "description": "Font size"
6745
6721
  },
6746
6722
  {
6747
- "name": "--skeleton-width",
6748
- "description": "Width (default: 100%)"
6723
+ "name": "--chip-font-weight",
6724
+ "description": "Font weight"
6749
6725
  },
6750
6726
  {
6751
- "name": "--skeleton-height",
6752
- "description": "Height (default: var(--size-4))"
6727
+ "name": "--chip-padding-x",
6728
+ "description": "Horizontal padding"
6753
6729
  },
6754
6730
  {
6755
- "name": "--skeleton-line-gap",
6756
- "description": "Vertical gap between text lines"
6731
+ "name": "--chip-padding-y",
6732
+ "description": "Vertical padding"
6733
+ },
6734
+ {
6735
+ "name": "--chip-gap",
6736
+ "description": "Gap between icon, label and remove button"
6737
+ },
6738
+ {
6739
+ "name": "--chip-hover-bg",
6740
+ "description": "Background on hover (interactive modes)"
6741
+ },
6742
+ {
6743
+ "name": "--chip-hover-color",
6744
+ "description": "Text color on hover (interactive modes)"
6745
+ },
6746
+ {
6747
+ "name": "--chip-hover-border-color",
6748
+ "description": "Border color on hover (interactive modes)"
6749
+ },
6750
+ {
6751
+ "name": "--chip-active-bg",
6752
+ "description": "Background when pressed (interactive modes)"
6753
+ },
6754
+ {
6755
+ "name": "--chip-active-color",
6756
+ "description": "Text color when pressed (interactive modes)"
6757
6757
  },
6758
6758
  {
6759
- "name": "--skeleton-last-line-width",
6760
- "description": "Width of the final text line"
6759
+ "name": "--chip-remove-bg",
6760
+ "description": "Remove button background (bordered/outline variants)"
6761
6761
  },
6762
6762
  {
6763
- "name": "--skeleton-duration",
6764
- "description": "Shimmer animation duration"
6763
+ "name": "--chip-remove-color",
6764
+ "description": "Remove button icon color (bordered/outline variants)"
6765
6765
  },
6766
6766
  {
6767
- "name": "--skeleton-stripe-size",
6768
- "description": "Width of each diagonal stripe (default: 6px)"
6767
+ "name": "--chip-remove-hover-bg",
6768
+ "description": "Remove button background on hover"
6769
6769
  }
6770
6770
  ],
6771
6771
  "demos": [
6772
6772
  {
6773
6773
  "url": "",
6774
- "description": "```html\n<!-- Paragraph lines -->\n<ore-skeleton variant=\"text\" lines=\"3\" width=\"100%\"></ore-skeleton>\n<!-- Avatar -->\n<ore-skeleton variant=\"circle\" size=\"md\"></ore-skeleton>\n<!-- Card image -->\n<ore-skeleton width=\"100%\" height=\"10rem\"></ore-skeleton>\n```"
6774
+ "description": "```html\n<!-- Static chip (read-only) -->\n<ore-chip color=\"primary\">Design</ore-chip>\n<!-- Removable chip -->\n<ore-chip color=\"success\" variant=\"flat\" mode=\"removable\" value=\"ts\">\n TypeScript\n</ore-chip>\n<!-- Selectable chip (controlled) -->\n<ore-chip color=\"info\" variant=\"flat\" mode=\"selectable\" checked value=\"ui\">\n UI\n</ore-chip>\n<!-- Selectable chip (uncontrolled) -->\n<ore-chip color=\"info\" variant=\"flat\" mode=\"selectable\" default-checked value=\"ui\">\n UI\n</ore-chip>\n<!-- Action chip (acts like a button) -->\n<ore-chip color=\"warning\" mode=\"action\" value=\"add\">\n <svg slot=\"icon\" ...></svg>\n Add Item\n</ore-chip>\n<!-- Icon-only chip -->\n<ore-chip color=\"error\" mode=\"action\" label=\"Delete\">\n <svg slot=\"icon\" ...></svg>\n</ore-chip>\n```"
6775
6775
  }
6776
6776
  ]
6777
6777
  }
@@ -6779,18 +6779,18 @@
6779
6779
  "exports": [
6780
6780
  {
6781
6781
  "kind": "js",
6782
- "name": "SKELETON_TAG",
6782
+ "name": "CHIP_TAG",
6783
6783
  "declaration": {
6784
- "name": "SKELETON_TAG",
6785
- "module": "src/feedback/skeleton/skeleton.ts"
6784
+ "name": "CHIP_TAG",
6785
+ "module": "src/feedback/chip/chip.ts"
6786
6786
  }
6787
6787
  },
6788
6788
  {
6789
6789
  "kind": "custom-element-definition",
6790
- "name": "OreSkeletonElement",
6790
+ "name": "OreChipElement",
6791
6791
  "declaration": {
6792
- "name": "OreSkeletonElement",
6793
- "module": "src/feedback/skeleton/skeleton.ts"
6792
+ "name": "OreChipElement",
6793
+ "module": "src/feedback/chip/chip.ts"
6794
6794
  }
6795
6795
  }
6796
6796
  ]
@@ -10887,14 +10887,242 @@
10887
10887
  "description": "Font size"
10888
10888
  },
10889
10889
  {
10890
- "name": "--select-placeholder-color",
10891
- "description": "Placeholder text color"
10890
+ "name": "--select-placeholder-color",
10891
+ "description": "Placeholder text color"
10892
+ }
10893
+ ],
10894
+ "demos": [
10895
+ {
10896
+ "url": "",
10897
+ "description": "```html\n<ore-select label=\"Role\" value=\"admin\">\n <option value=\"admin\">Administrator</option>\n <option value=\"editor\">Editor</option>\n <option value=\"viewer\">Viewer</option>\n</ore-select>\n<ore-select label=\"Tags\" multiple color=\"primary\">\n <optgroup label=\"Frontend\">\n <option value=\"react\">React</option>\n <option value=\"vue\">Vue</option>\n </optgroup>\n <optgroup label=\"Backend\">\n <option value=\"node\">Node.js</option>\n </optgroup>\n</ore-select>\n```"
10898
+ }
10899
+ ]
10900
+ }
10901
+ ],
10902
+ "exports": [
10903
+ {
10904
+ "kind": "js",
10905
+ "name": "SELECT_TAG",
10906
+ "declaration": {
10907
+ "name": "SELECT_TAG",
10908
+ "module": "src/inputs/select/select.ts"
10909
+ }
10910
+ },
10911
+ {
10912
+ "kind": "custom-element-definition",
10913
+ "name": "OreSelectElement",
10914
+ "declaration": {
10915
+ "name": "OreSelectElement",
10916
+ "module": "src/inputs/select/select.ts"
10917
+ }
10918
+ }
10919
+ ]
10920
+ },
10921
+ {
10922
+ "kind": "javascript-module",
10923
+ "path": "src/inputs/slider/slider.ts",
10924
+ "declarations": [
10925
+ {
10926
+ "kind": "variable",
10927
+ "name": "SLIDER_TAG",
10928
+ "type": {
10929
+ "text": "'ore-slider'"
10930
+ },
10931
+ "default": "'ore-slider'",
10932
+ "description": "A slider for selecting a single numeric value or a numeric range.\n\nAdd the boolean `range` attribute to activate two-thumb range mode."
10933
+ },
10934
+ {
10935
+ "kind": "class",
10936
+ "name": "OreSliderElement",
10937
+ "tagName": "ore-slider",
10938
+ "customElement": true,
10939
+ "description": "A slider for selecting a single numeric value or a numeric range.\nAdd the boolean `range` attribute to activate two-thumb range mode.",
10940
+ "summary": "",
10941
+ "attributes": [
10942
+ {
10943
+ "name": "min",
10944
+ "type": {
10945
+ "text": "number"
10946
+ },
10947
+ "description": "Minimum value (default: 0)",
10948
+ "default": "0"
10949
+ },
10950
+ {
10951
+ "name": "max",
10952
+ "type": {
10953
+ "text": "number"
10954
+ },
10955
+ "description": "Maximum value (default: 100)",
10956
+ "default": "100"
10957
+ },
10958
+ {
10959
+ "name": "step",
10960
+ "type": {
10961
+ "text": "number"
10962
+ },
10963
+ "description": "Step increment (default: 1)",
10964
+ "default": "1"
10965
+ },
10966
+ {
10967
+ "name": "value",
10968
+ "type": {
10969
+ "text": "number"
10970
+ },
10971
+ "description": "Current value (single mode)"
10972
+ },
10973
+ {
10974
+ "name": "from",
10975
+ "type": {
10976
+ "text": "number"
10977
+ },
10978
+ "description": "Lower bound (range mode)"
10979
+ },
10980
+ {
10981
+ "name": "to",
10982
+ "type": {
10983
+ "text": "number"
10984
+ },
10985
+ "description": "Upper bound (range mode)"
10986
+ },
10987
+ {
10988
+ "name": "range",
10989
+ "type": {
10990
+ "text": "boolean"
10991
+ },
10992
+ "description": "Activate range mode"
10993
+ },
10994
+ {
10995
+ "name": "disabled",
10996
+ "type": {
10997
+ "text": "boolean"
10998
+ },
10999
+ "description": "Disable interaction"
11000
+ },
11001
+ {
11002
+ "name": "name",
11003
+ "type": {
11004
+ "text": "string"
11005
+ },
11006
+ "description": "Form field name (single mode)"
11007
+ },
11008
+ {
11009
+ "name": "color",
11010
+ "type": {
11011
+ "text": "'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'"
11012
+ },
11013
+ "description": "Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'"
11014
+ },
11015
+ {
11016
+ "name": "size",
11017
+ "type": {
11018
+ "text": "'sm' | 'md' | 'lg'"
11019
+ },
11020
+ "description": "'sm' | 'md' | 'lg'"
11021
+ },
11022
+ {
11023
+ "name": "helper",
11024
+ "type": {
11025
+ "text": "string"
11026
+ },
11027
+ "description": "Helper text below the slider"
11028
+ },
11029
+ {
11030
+ "name": "error",
11031
+ "type": {
11032
+ "text": "string"
11033
+ },
11034
+ "description": "Error message below the slider"
11035
+ },
11036
+ {
11037
+ "name": "fullwidth",
11038
+ "type": {
11039
+ "text": "boolean"
11040
+ },
11041
+ "description": "Stretch to full width of container"
11042
+ }
11043
+ ],
11044
+ "events": [
11045
+ {
11046
+ "name": "input",
11047
+ "description": "Emitted when the slider value changes.",
11048
+ "type": {
11049
+ "text": "CustomEvent"
11050
+ }
11051
+ },
11052
+ {
11053
+ "name": "change",
11054
+ "description": "Emitted when the slider value changes.",
11055
+ "type": {
11056
+ "text": "CustomEvent"
11057
+ }
11058
+ }
11059
+ ],
11060
+ "slots": [
11061
+ {
11062
+ "name": "",
11063
+ "description": "Slider label text"
11064
+ }
11065
+ ],
11066
+ "cssParts": [
11067
+ {
11068
+ "name": "slider",
11069
+ "description": "Slider container"
11070
+ },
11071
+ {
11072
+ "name": "track",
11073
+ "description": "Track element"
11074
+ },
11075
+ {
11076
+ "name": "fill",
11077
+ "description": "Fill element"
11078
+ },
11079
+ {
11080
+ "name": "thumb",
11081
+ "description": "Single-value thumb"
11082
+ },
11083
+ {
11084
+ "name": "thumb-start",
11085
+ "description": "Range start thumb"
11086
+ },
11087
+ {
11088
+ "name": "thumb-end",
11089
+ "description": "Range end thumb"
11090
+ },
11091
+ {
11092
+ "name": "label",
11093
+ "description": "Label element"
11094
+ },
11095
+ {
11096
+ "name": "helper-text",
11097
+ "description": "The helper/error text element"
11098
+ }
11099
+ ],
11100
+ "cssProperties": [
11101
+ {
11102
+ "name": "--slider-height",
11103
+ "description": "Track height"
11104
+ },
11105
+ {
11106
+ "name": "--slider-size",
11107
+ "description": "Thumb dimensions"
11108
+ },
11109
+ {
11110
+ "name": "--slider-track-bg",
11111
+ "description": "Track background color"
11112
+ },
11113
+ {
11114
+ "name": "--slider-fill",
11115
+ "description": "Active fill color"
11116
+ },
11117
+ {
11118
+ "name": "--slider-thumb-bg",
11119
+ "description": "Thumb background color"
10892
11120
  }
10893
11121
  ],
10894
11122
  "demos": [
10895
11123
  {
10896
11124
  "url": "",
10897
- "description": "```html\n<ore-select label=\"Role\" value=\"admin\">\n <option value=\"admin\">Administrator</option>\n <option value=\"editor\">Editor</option>\n <option value=\"viewer\">Viewer</option>\n</ore-select>\n<ore-select label=\"Tags\" multiple color=\"primary\">\n <optgroup label=\"Frontend\">\n <option value=\"react\">React</option>\n <option value=\"vue\">Vue</option>\n </optgroup>\n <optgroup label=\"Backend\">\n <option value=\"node\">Node.js</option>\n </optgroup>\n</ore-select>\n```"
11125
+ "description": "```html\n<ore-slider value=\"50\" name=\"volume\">Volume</ore-slider>\n<ore-slider range from=\"20\" to=\"80\" color=\"primary\">Price range</ore-slider>\n```"
10898
11126
  }
10899
11127
  ]
10900
11128
  }
@@ -10902,18 +11130,18 @@
10902
11130
  "exports": [
10903
11131
  {
10904
11132
  "kind": "js",
10905
- "name": "SELECT_TAG",
11133
+ "name": "SLIDER_TAG",
10906
11134
  "declaration": {
10907
- "name": "SELECT_TAG",
10908
- "module": "src/inputs/select/select.ts"
11135
+ "name": "SLIDER_TAG",
11136
+ "module": "src/inputs/slider/slider.ts"
10909
11137
  }
10910
11138
  },
10911
11139
  {
10912
11140
  "kind": "custom-element-definition",
10913
- "name": "OreSelectElement",
11141
+ "name": "OreSliderElement",
10914
11142
  "declaration": {
10915
- "name": "OreSelectElement",
10916
- "module": "src/inputs/select/select.ts"
11143
+ "name": "OreSliderElement",
11144
+ "module": "src/inputs/slider/slider.ts"
10917
11145
  }
10918
11146
  }
10919
11147
  ]
@@ -11318,234 +11546,6 @@
11318
11546
  }
11319
11547
  ]
11320
11548
  },
11321
- {
11322
- "kind": "javascript-module",
11323
- "path": "src/inputs/slider/slider.ts",
11324
- "declarations": [
11325
- {
11326
- "kind": "variable",
11327
- "name": "SLIDER_TAG",
11328
- "type": {
11329
- "text": "'ore-slider'"
11330
- },
11331
- "default": "'ore-slider'",
11332
- "description": "A slider for selecting a single numeric value or a numeric range.\n\nAdd the boolean `range` attribute to activate two-thumb range mode."
11333
- },
11334
- {
11335
- "kind": "class",
11336
- "name": "OreSliderElement",
11337
- "tagName": "ore-slider",
11338
- "customElement": true,
11339
- "description": "A slider for selecting a single numeric value or a numeric range.\nAdd the boolean `range` attribute to activate two-thumb range mode.",
11340
- "summary": "",
11341
- "attributes": [
11342
- {
11343
- "name": "min",
11344
- "type": {
11345
- "text": "number"
11346
- },
11347
- "description": "Minimum value (default: 0)",
11348
- "default": "0"
11349
- },
11350
- {
11351
- "name": "max",
11352
- "type": {
11353
- "text": "number"
11354
- },
11355
- "description": "Maximum value (default: 100)",
11356
- "default": "100"
11357
- },
11358
- {
11359
- "name": "step",
11360
- "type": {
11361
- "text": "number"
11362
- },
11363
- "description": "Step increment (default: 1)",
11364
- "default": "1"
11365
- },
11366
- {
11367
- "name": "value",
11368
- "type": {
11369
- "text": "number"
11370
- },
11371
- "description": "Current value (single mode)"
11372
- },
11373
- {
11374
- "name": "from",
11375
- "type": {
11376
- "text": "number"
11377
- },
11378
- "description": "Lower bound (range mode)"
11379
- },
11380
- {
11381
- "name": "to",
11382
- "type": {
11383
- "text": "number"
11384
- },
11385
- "description": "Upper bound (range mode)"
11386
- },
11387
- {
11388
- "name": "range",
11389
- "type": {
11390
- "text": "boolean"
11391
- },
11392
- "description": "Activate range mode"
11393
- },
11394
- {
11395
- "name": "disabled",
11396
- "type": {
11397
- "text": "boolean"
11398
- },
11399
- "description": "Disable interaction"
11400
- },
11401
- {
11402
- "name": "name",
11403
- "type": {
11404
- "text": "string"
11405
- },
11406
- "description": "Form field name (single mode)"
11407
- },
11408
- {
11409
- "name": "color",
11410
- "type": {
11411
- "text": "'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'"
11412
- },
11413
- "description": "Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'"
11414
- },
11415
- {
11416
- "name": "size",
11417
- "type": {
11418
- "text": "'sm' | 'md' | 'lg'"
11419
- },
11420
- "description": "'sm' | 'md' | 'lg'"
11421
- },
11422
- {
11423
- "name": "helper",
11424
- "type": {
11425
- "text": "string"
11426
- },
11427
- "description": "Helper text below the slider"
11428
- },
11429
- {
11430
- "name": "error",
11431
- "type": {
11432
- "text": "string"
11433
- },
11434
- "description": "Error message below the slider"
11435
- },
11436
- {
11437
- "name": "fullwidth",
11438
- "type": {
11439
- "text": "boolean"
11440
- },
11441
- "description": "Stretch to full width of container"
11442
- }
11443
- ],
11444
- "events": [
11445
- {
11446
- "name": "input",
11447
- "description": "Emitted when the slider value changes.",
11448
- "type": {
11449
- "text": "CustomEvent"
11450
- }
11451
- },
11452
- {
11453
- "name": "change",
11454
- "description": "Emitted when the slider value changes.",
11455
- "type": {
11456
- "text": "CustomEvent"
11457
- }
11458
- }
11459
- ],
11460
- "slots": [
11461
- {
11462
- "name": "",
11463
- "description": "Slider label text"
11464
- }
11465
- ],
11466
- "cssParts": [
11467
- {
11468
- "name": "slider",
11469
- "description": "Slider container"
11470
- },
11471
- {
11472
- "name": "track",
11473
- "description": "Track element"
11474
- },
11475
- {
11476
- "name": "fill",
11477
- "description": "Fill element"
11478
- },
11479
- {
11480
- "name": "thumb",
11481
- "description": "Single-value thumb"
11482
- },
11483
- {
11484
- "name": "thumb-start",
11485
- "description": "Range start thumb"
11486
- },
11487
- {
11488
- "name": "thumb-end",
11489
- "description": "Range end thumb"
11490
- },
11491
- {
11492
- "name": "label",
11493
- "description": "Label element"
11494
- },
11495
- {
11496
- "name": "helper-text",
11497
- "description": "The helper/error text element"
11498
- }
11499
- ],
11500
- "cssProperties": [
11501
- {
11502
- "name": "--slider-height",
11503
- "description": "Track height"
11504
- },
11505
- {
11506
- "name": "--slider-size",
11507
- "description": "Thumb dimensions"
11508
- },
11509
- {
11510
- "name": "--slider-track-bg",
11511
- "description": "Track background color"
11512
- },
11513
- {
11514
- "name": "--slider-fill",
11515
- "description": "Active fill color"
11516
- },
11517
- {
11518
- "name": "--slider-thumb-bg",
11519
- "description": "Thumb background color"
11520
- }
11521
- ],
11522
- "demos": [
11523
- {
11524
- "url": "",
11525
- "description": "```html\n<ore-slider value=\"50\" name=\"volume\">Volume</ore-slider>\n<ore-slider range from=\"20\" to=\"80\" color=\"primary\">Price range</ore-slider>\n```"
11526
- }
11527
- ]
11528
- }
11529
- ],
11530
- "exports": [
11531
- {
11532
- "kind": "js",
11533
- "name": "SLIDER_TAG",
11534
- "declaration": {
11535
- "name": "SLIDER_TAG",
11536
- "module": "src/inputs/slider/slider.ts"
11537
- }
11538
- },
11539
- {
11540
- "kind": "custom-element-definition",
11541
- "name": "OreSliderElement",
11542
- "declaration": {
11543
- "name": "OreSliderElement",
11544
- "module": "src/inputs/slider/slider.ts"
11545
- }
11546
- }
11547
- ]
11548
- },
11549
11549
  {
11550
11550
  "kind": "javascript-module",
11551
11551
  "path": "src/inputs/switch/switch.ts",
@@ -12801,6 +12801,20 @@
12801
12801
  },
12802
12802
  "description": "Accessible nav landmark label"
12803
12803
  },
12804
+ {
12805
+ "name": "menu-icon",
12806
+ "type": {
12807
+ "text": "string"
12808
+ },
12809
+ "description": "Icon shown while the mobile menu is closed"
12810
+ },
12811
+ {
12812
+ "name": "menu-close-icon",
12813
+ "type": {
12814
+ "text": "string"
12815
+ },
12816
+ "description": "Icon shown while the mobile menu is open"
12817
+ },
12804
12818
  {
12805
12819
  "name": "sticky",
12806
12820
  "type": {