@jsekulowicz/ds-components 0.23.0 → 0.24.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 (32) hide show
  1. package/custom-elements.json +390 -2
  2. package/dist/atoms/range-input/define.d.ts +7 -0
  3. package/dist/atoms/range-input/define.d.ts.map +1 -0
  4. package/dist/atoms/range-input/define.js +5 -0
  5. package/dist/atoms/range-input/define.js.map +1 -0
  6. package/dist/atoms/range-input/index.d.ts +2 -0
  7. package/dist/atoms/range-input/index.d.ts.map +1 -0
  8. package/dist/atoms/range-input/index.js +2 -0
  9. package/dist/atoms/range-input/index.js.map +1 -0
  10. package/dist/atoms/range-input/range-input.d.ts +35 -0
  11. package/dist/atoms/range-input/range-input.d.ts.map +1 -0
  12. package/dist/atoms/range-input/range-input.js +174 -0
  13. package/dist/atoms/range-input/range-input.js.map +1 -0
  14. package/dist/atoms/range-input/range-input.styles.d.ts +2 -0
  15. package/dist/atoms/range-input/range-input.styles.d.ts.map +1 -0
  16. package/dist/atoms/range-input/range-input.styles.js +117 -0
  17. package/dist/atoms/range-input/range-input.styles.js.map +1 -0
  18. package/dist/atoms/searchable-select/searchable-select.styles.d.ts.map +1 -1
  19. package/dist/atoms/searchable-select/searchable-select.styles.js +3 -0
  20. package/dist/atoms/searchable-select/searchable-select.styles.js.map +1 -1
  21. package/dist/atoms/select/select.common-styles.d.ts.map +1 -1
  22. package/dist/atoms/select/select.common-styles.js +5 -1
  23. package/dist/atoms/select/select.common-styles.js.map +1 -1
  24. package/dist/define.d.ts +1 -0
  25. package/dist/define.d.ts.map +1 -1
  26. package/dist/define.js +1 -0
  27. package/dist/define.js.map +1 -1
  28. package/dist/index.d.ts +1 -0
  29. package/dist/index.d.ts.map +1 -1
  30. package/dist/index.js +1 -0
  31. package/dist/index.js.map +1 -1
  32. package/package.json +8 -1
@@ -221,6 +221,22 @@
221
221
  "module": "./atoms/text-field/index.js"
222
222
  }
223
223
  },
224
+ {
225
+ "kind": "js",
226
+ "name": "DsRangeInput",
227
+ "declaration": {
228
+ "name": "DsRangeInput",
229
+ "module": "./atoms/range-input/index.js"
230
+ }
231
+ },
232
+ {
233
+ "kind": "js",
234
+ "name": "RangeInputSize",
235
+ "declaration": {
236
+ "name": "RangeInputSize",
237
+ "module": "./atoms/range-input/index.js"
238
+ }
239
+ },
224
240
  {
225
241
  "kind": "js",
226
242
  "name": "DsCheckbox",
@@ -5071,6 +5087,378 @@
5071
5087
  }
5072
5088
  ]
5073
5089
  },
5090
+ {
5091
+ "kind": "javascript-module",
5092
+ "path": "src/atoms/range-input/define.ts",
5093
+ "declarations": [],
5094
+ "exports": [
5095
+ {
5096
+ "kind": "custom-element-definition",
5097
+ "name": "ds-range-input",
5098
+ "declaration": {
5099
+ "name": "DsRangeInput",
5100
+ "module": "/src/atoms/range-input/range-input.js"
5101
+ }
5102
+ }
5103
+ ]
5104
+ },
5105
+ {
5106
+ "kind": "javascript-module",
5107
+ "path": "src/atoms/range-input/index.ts",
5108
+ "declarations": [],
5109
+ "exports": [
5110
+ {
5111
+ "kind": "js",
5112
+ "name": "DsRangeInput",
5113
+ "declaration": {
5114
+ "name": "DsRangeInput",
5115
+ "module": "./range-input.js"
5116
+ }
5117
+ },
5118
+ {
5119
+ "kind": "js",
5120
+ "name": "RangeInputSize",
5121
+ "declaration": {
5122
+ "name": "RangeInputSize",
5123
+ "module": "./range-input.js"
5124
+ }
5125
+ }
5126
+ ]
5127
+ },
5128
+ {
5129
+ "kind": "javascript-module",
5130
+ "path": "src/atoms/range-input/range-input.styles.ts",
5131
+ "declarations": [
5132
+ {
5133
+ "kind": "variable",
5134
+ "name": "rangeInputStyles",
5135
+ "default": "css` :host { display: flex; flex-direction: column; gap: var(--ds-space-1); width: 100%; --ds-range-track-height: 0.375rem; --ds-range-thumb-size: 1.125rem; } :host([size='sm']) { --ds-range-track-height: 0.25rem; --ds-range-thumb-size: 0.875rem; } :host([size='lg']) { --ds-range-track-height: 0.5rem; --ds-range-thumb-size: 1.375rem; } .wrap { display: flex; align-items: center; gap: var(--ds-space-3); } .range { flex: 1; min-width: 0; height: var(--ds-range-thumb-size); margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; } /* Track — filled portion (accent) up to the thumb, rest is subtle. */ .range::-webkit-slider-runnable-track { height: var(--ds-range-track-height); border-radius: var(--ds-radius-full); background: linear-gradient( to right, var(--ds-color-accent) var(--ds-range-fill, 0%), var(--ds-color-bg-subtle) var(--ds-range-fill, 0%) ); } .range::-moz-range-track { height: var(--ds-range-track-height); border-radius: var(--ds-radius-full); background: var(--ds-color-bg-subtle); } .range::-moz-range-progress { height: var(--ds-range-track-height); border-radius: var(--ds-radius-full); background: var(--ds-color-accent); } /* Thumb */ .range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: var(--ds-range-thumb-size); height: var(--ds-range-thumb-size); margin-top: calc((var(--ds-range-track-height) - var(--ds-range-thumb-size)) / 2); border-radius: var(--ds-radius-full); border: 2px solid var(--ds-color-accent); background: var(--ds-color-bg); box-shadow: var(--ds-shadow-sm); transition: box-shadow var(--ds-duration-fast) var(--ds-easing-standard); } .range::-moz-range-thumb { width: var(--ds-range-thumb-size); height: var(--ds-range-thumb-size); border-radius: var(--ds-radius-full); border: 2px solid var(--ds-color-accent); background: var(--ds-color-bg); box-shadow: var(--ds-shadow-sm); transition: box-shadow var(--ds-duration-fast) var(--ds-easing-standard); } .range:focus-visible { outline: none; } .range:focus-visible::-webkit-slider-thumb { box-shadow: var(--ds-shadow-focus); } .range:focus-visible::-moz-range-thumb { box-shadow: var(--ds-shadow-focus); } /* Invalid */ :host([invalid]) .range::-webkit-slider-runnable-track { background: linear-gradient( to right, var(--ds-color-danger) var(--ds-range-fill, 0%), var(--ds-color-bg-subtle) var(--ds-range-fill, 0%) ); } :host([invalid]) .range::-moz-range-progress { background: var(--ds-color-danger); } :host([invalid]) .range::-webkit-slider-thumb { border-color: var(--ds-color-danger); } :host([invalid]) .range::-moz-range-thumb { border-color: var(--ds-color-danger); } /* Disabled */ :host([disabled]) { opacity: 0.5; } :host([disabled]) .range { cursor: not-allowed; } output { min-width: 2.5ch; text-align: right; color: var(--ds-color-fg); font-size: var(--ds-font-size-sm); font-variant-numeric: tabular-nums; } `"
5136
+ }
5137
+ ],
5138
+ "exports": [
5139
+ {
5140
+ "kind": "js",
5141
+ "name": "rangeInputStyles",
5142
+ "declaration": {
5143
+ "name": "rangeInputStyles",
5144
+ "module": "src/atoms/range-input/range-input.styles.ts"
5145
+ }
5146
+ }
5147
+ ]
5148
+ },
5149
+ {
5150
+ "kind": "javascript-module",
5151
+ "path": "src/atoms/range-input/range-input.ts",
5152
+ "declarations": [
5153
+ {
5154
+ "kind": "class",
5155
+ "description": "",
5156
+ "name": "DsRangeInput",
5157
+ "cssParts": [
5158
+ {
5159
+ "description": "The slider track.",
5160
+ "name": "track"
5161
+ },
5162
+ {
5163
+ "description": "The native range input (draggable thumb).",
5164
+ "name": "thumb"
5165
+ },
5166
+ {
5167
+ "description": "The current-value output shown when `show-value` is set.",
5168
+ "name": "value"
5169
+ }
5170
+ ],
5171
+ "members": [
5172
+ {
5173
+ "kind": "field",
5174
+ "name": "shadowRootOptions",
5175
+ "type": {
5176
+ "text": "ShadowRootInit"
5177
+ },
5178
+ "static": true,
5179
+ "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true, }"
5180
+ },
5181
+ {
5182
+ "kind": "field",
5183
+ "name": "min",
5184
+ "type": {
5185
+ "text": "number"
5186
+ },
5187
+ "default": "0",
5188
+ "attribute": "min"
5189
+ },
5190
+ {
5191
+ "kind": "field",
5192
+ "name": "max",
5193
+ "type": {
5194
+ "text": "number"
5195
+ },
5196
+ "default": "100",
5197
+ "attribute": "max"
5198
+ },
5199
+ {
5200
+ "kind": "field",
5201
+ "name": "step",
5202
+ "type": {
5203
+ "text": "number"
5204
+ },
5205
+ "default": "1",
5206
+ "attribute": "step"
5207
+ },
5208
+ {
5209
+ "kind": "field",
5210
+ "name": "size",
5211
+ "type": {
5212
+ "text": "RangeInputSize"
5213
+ },
5214
+ "default": "'md'",
5215
+ "attribute": "size",
5216
+ "reflects": true
5217
+ },
5218
+ {
5219
+ "kind": "field",
5220
+ "name": "label",
5221
+ "type": {
5222
+ "text": "string"
5223
+ },
5224
+ "default": "''",
5225
+ "attribute": "label"
5226
+ },
5227
+ {
5228
+ "kind": "field",
5229
+ "name": "inputLabel",
5230
+ "type": {
5231
+ "text": "string"
5232
+ },
5233
+ "default": "''",
5234
+ "attribute": "input-label"
5235
+ },
5236
+ {
5237
+ "kind": "field",
5238
+ "name": "description",
5239
+ "type": {
5240
+ "text": "string"
5241
+ },
5242
+ "default": "''",
5243
+ "attribute": "description"
5244
+ },
5245
+ {
5246
+ "kind": "field",
5247
+ "name": "error",
5248
+ "type": {
5249
+ "text": "string"
5250
+ },
5251
+ "default": "''",
5252
+ "attribute": "error"
5253
+ },
5254
+ {
5255
+ "kind": "field",
5256
+ "name": "invalid",
5257
+ "type": {
5258
+ "text": "boolean"
5259
+ },
5260
+ "default": "false",
5261
+ "attribute": "invalid",
5262
+ "reflects": true
5263
+ },
5264
+ {
5265
+ "kind": "field",
5266
+ "name": "showValue",
5267
+ "type": {
5268
+ "text": "boolean"
5269
+ },
5270
+ "default": "false",
5271
+ "attribute": "show-value"
5272
+ },
5273
+ {
5274
+ "kind": "field",
5275
+ "name": "input",
5276
+ "type": {
5277
+ "text": "HTMLInputElement"
5278
+ },
5279
+ "privacy": "private"
5280
+ },
5281
+ {
5282
+ "kind": "field",
5283
+ "name": "#initialized",
5284
+ "privacy": "private",
5285
+ "type": {
5286
+ "text": "boolean"
5287
+ },
5288
+ "default": "false"
5289
+ },
5290
+ {
5291
+ "kind": "field",
5292
+ "name": "valueAsNumber",
5293
+ "type": {
5294
+ "text": "number"
5295
+ },
5296
+ "readonly": true
5297
+ },
5298
+ {
5299
+ "kind": "method",
5300
+ "name": "#numericValue",
5301
+ "privacy": "private",
5302
+ "return": {
5303
+ "type": {
5304
+ "text": "number"
5305
+ }
5306
+ }
5307
+ },
5308
+ {
5309
+ "kind": "method",
5310
+ "name": "#fillPercent",
5311
+ "privacy": "private",
5312
+ "return": {
5313
+ "type": {
5314
+ "text": "number"
5315
+ }
5316
+ }
5317
+ },
5318
+ {
5319
+ "kind": "field",
5320
+ "name": "#onInput",
5321
+ "privacy": "private"
5322
+ },
5323
+ {
5324
+ "kind": "field",
5325
+ "name": "#onChange",
5326
+ "privacy": "private"
5327
+ },
5328
+ {
5329
+ "kind": "field",
5330
+ "name": "#blockWhenDisabled",
5331
+ "privacy": "private"
5332
+ },
5333
+ {
5334
+ "kind": "method",
5335
+ "name": "#syncValidity",
5336
+ "privacy": "private",
5337
+ "return": {
5338
+ "type": {
5339
+ "text": "void"
5340
+ }
5341
+ }
5342
+ }
5343
+ ],
5344
+ "events": [
5345
+ {
5346
+ "description": "Fired continuously while dragging with the current numeric value.",
5347
+ "name": "ds-input"
5348
+ },
5349
+ {
5350
+ "description": "Fired when the value is committed.",
5351
+ "name": "ds-change"
5352
+ }
5353
+ ],
5354
+ "attributes": [
5355
+ {
5356
+ "name": "min",
5357
+ "type": {
5358
+ "text": "number"
5359
+ },
5360
+ "default": "0",
5361
+ "fieldName": "min"
5362
+ },
5363
+ {
5364
+ "name": "max",
5365
+ "type": {
5366
+ "text": "number"
5367
+ },
5368
+ "default": "100",
5369
+ "fieldName": "max"
5370
+ },
5371
+ {
5372
+ "name": "step",
5373
+ "type": {
5374
+ "text": "number"
5375
+ },
5376
+ "default": "1",
5377
+ "fieldName": "step"
5378
+ },
5379
+ {
5380
+ "name": "size",
5381
+ "type": {
5382
+ "text": "RangeInputSize"
5383
+ },
5384
+ "default": "'md'",
5385
+ "fieldName": "size"
5386
+ },
5387
+ {
5388
+ "name": "label",
5389
+ "type": {
5390
+ "text": "string"
5391
+ },
5392
+ "default": "''",
5393
+ "fieldName": "label"
5394
+ },
5395
+ {
5396
+ "name": "input-label",
5397
+ "type": {
5398
+ "text": "string"
5399
+ },
5400
+ "default": "''",
5401
+ "fieldName": "inputLabel"
5402
+ },
5403
+ {
5404
+ "name": "description",
5405
+ "type": {
5406
+ "text": "string"
5407
+ },
5408
+ "default": "''",
5409
+ "fieldName": "description"
5410
+ },
5411
+ {
5412
+ "name": "error",
5413
+ "type": {
5414
+ "text": "string"
5415
+ },
5416
+ "default": "''",
5417
+ "fieldName": "error"
5418
+ },
5419
+ {
5420
+ "name": "invalid",
5421
+ "type": {
5422
+ "text": "boolean"
5423
+ },
5424
+ "default": "false",
5425
+ "fieldName": "invalid"
5426
+ },
5427
+ {
5428
+ "name": "show-value",
5429
+ "type": {
5430
+ "text": "boolean"
5431
+ },
5432
+ "default": "false",
5433
+ "fieldName": "showValue"
5434
+ }
5435
+ ],
5436
+ "mixins": [
5437
+ {
5438
+ "name": "FormControlMixin",
5439
+ "package": "@jsekulowicz/ds-core"
5440
+ }
5441
+ ],
5442
+ "superclass": {
5443
+ "name": "DsElement",
5444
+ "package": "@jsekulowicz/ds-core"
5445
+ },
5446
+ "tagName": "ds-range-input",
5447
+ "customElement": true,
5448
+ "summary": "Slider for picking a numeric value within a range, with native form participation via ElementInternals."
5449
+ }
5450
+ ],
5451
+ "exports": [
5452
+ {
5453
+ "kind": "js",
5454
+ "name": "DsRangeInput",
5455
+ "declaration": {
5456
+ "name": "DsRangeInput",
5457
+ "module": "src/atoms/range-input/range-input.ts"
5458
+ }
5459
+ }
5460
+ ]
5461
+ },
5074
5462
  {
5075
5463
  "kind": "javascript-module",
5076
5464
  "path": "src/atoms/searchable-select/define.ts",
@@ -5147,7 +5535,7 @@
5147
5535
  {
5148
5536
  "kind": "variable",
5149
5537
  "name": "searchableSelectStyles",
5150
- "default": "css` .trigger { flex-wrap: wrap; } .trigger:focus-within { border-color: var(--ds-color-accent); box-shadow: var(--ds-shadow-focus); } .trigger.open { border-color: var(--ds-color-accent); box-shadow: var(--ds-shadow-focus); } .search-input { flex: 1; border: none; outline: none; background: transparent; color: var(--ds-color-fg); font-family: var(--ds-font-body); font-size: var(--ds-font-size-sm); min-width: 0; cursor: pointer; } :host([size='sm']) .search-input { font-size: var(--ds-font-size-xs); } :host([size='lg']) .search-input { font-size: var(--ds-font-size-md); } .search-input::placeholder { color: var(--ds-color-fg-muted); } .trigger.open .search-input { cursor: text; } :host([loading]) .trigger { cursor: default; pointer-events: none; } .spinner { width: 1.2rem; height: 1.2rem; margin-left: var(--ds-space-2); color: var(--ds-color-fg-muted); flex-shrink: 0; animation: spin 0.75s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .trigger.open .caret { transform: rotate(180deg); } .empty { margin: 0; padding: var(--ds-space-3); font-size: var(--ds-font-size-sm); color: var(--ds-color-fg-muted); text-align: center; } mark.match { background: none; color: var(--ds-color-accent); font-weight: var(--ds-font-weight-medium); } `"
5538
+ "default": "css` .trigger { flex-wrap: wrap; } .trigger:focus-within { border-color: var(--ds-color-accent); box-shadow: var(--ds-shadow-focus); } .trigger.open { border-color: var(--ds-color-accent); box-shadow: var(--ds-shadow-focus); } .search-input { flex: 1; border: none; outline: none; background: transparent; color: var(--ds-color-fg); font-family: var(--ds-font-body); font-size: var(--ds-font-size-sm); min-width: 0; cursor: pointer; /* Show a long selected value truncated rather than hard-clipped; the input still scrolls normally while focused and typing. */ text-overflow: ellipsis; } :host([size='sm']) .search-input { font-size: var(--ds-font-size-xs); } :host([size='lg']) .search-input { font-size: var(--ds-font-size-md); } .search-input::placeholder { color: var(--ds-color-fg-muted); } .trigger.open .search-input { cursor: text; } :host([loading]) .trigger { cursor: default; pointer-events: none; } .spinner { width: 1.2rem; height: 1.2rem; margin-left: var(--ds-space-2); color: var(--ds-color-fg-muted); flex-shrink: 0; animation: spin 0.75s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .trigger.open .caret { transform: rotate(180deg); } .empty { margin: 0; padding: var(--ds-space-3); font-size: var(--ds-font-size-sm); color: var(--ds-color-fg-muted); text-align: center; } mark.match { background: none; color: var(--ds-color-accent); font-weight: var(--ds-font-weight-medium); } `"
5151
5539
  }
5152
5540
  ],
5153
5541
  "exports": [
@@ -6458,7 +6846,7 @@
6458
6846
  {
6459
6847
  "kind": "variable",
6460
6848
  "name": "selectCommonStyles",
6461
- "default": "css` :host { --ds-select-size: var(--ds-size-md); display: inline-flex; flex-direction: column; gap: var(--ds-space-1); width: 100%; } :host([size='sm']) { --ds-select-size: var(--ds-size-sm); } :host([size='lg']) { --ds-select-size: var(--ds-size-lg); } :host([size='sm']) .trigger { font-size: var(--ds-font-size-xs); } :host([size='lg']) .trigger { font-size: var(--ds-font-size-md); } .control-wrap { position: relative; width: 100%; } .trigger { /* The popover listbox positions itself against this via CSS anchor positioning (scoped to this shadow root, so instances don't clash). */ anchor-name: --ds-select-trigger; display: flex; align-items: center; gap: var(--ds-space-2); width: 100%; height: var(--ds-select-size); padding: 0 var(--ds-space-3); background: var(--ds-color-bg); border: 1px solid var(--ds-color-border-strong); border-radius: var(--ds-radius-sm); transition: border-color var(--ds-duration-fast) var(--ds-easing-standard), box-shadow var(--ds-duration-fast) var(--ds-easing-standard); } .trigger:hover { border-color: var(--ds-color-fg-subtle); } :host([invalid]) .trigger { border-color: var(--ds-color-danger); background: var(--ds-color-danger-subtle); } :host([invalid]) .trigger:is(:focus-visible, :focus-within) { box-shadow: 0 0 0 3px rgba(178, 26, 10, 0.3); } :host([disabled]) .trigger { opacity: 0.5; background: var(--ds-color-bg-subtle); cursor: not-allowed; pointer-events: none; } .trigger-multiple { height: auto; min-height: var(--ds-select-size); padding: 6px var(--ds-space-3); flex-wrap: wrap; align-items: center; gap: var(--ds-space-2); overflow: visible; } .tiles { display: flex; flex-wrap: wrap; gap: var(--ds-space-1); min-width: 0; } .tile { display: inline-flex; align-items: center; gap: var(--ds-space-1); height: 24px; padding: 0 var(--ds-space-1) 0 var(--ds-space-2); background: var(--ds-color-bg-subtle); border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-xs); color: var(--ds-color-fg); font-size: var(--ds-font-size-xs); white-space: nowrap; } .tile-focused { border-color: var(--ds-color-accent); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ds-color-accent) 35%, transparent); } .tile-overflow { padding: 0 var(--ds-space-2); background: var(--ds-color-accent-subtle); border-color: var(--ds-color-accent); color: var(--ds-color-accent); font-weight: var(--ds-font-weight-medium); } .tile-label { max-width: 120px; overflow: hidden; text-overflow: ellipsis; } .tile-remove, .clear-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0; border: none; background: none; color: var(--ds-color-fg-muted); cursor: pointer; border-radius: var(--ds-radius-xs); flex-shrink: 0; } .tile-remove { width: 14px; height: 14px; } .tile-remove:hover { color: var(--ds-color-fg); background: var(--ds-color-border); } .tile-remove svg { width: 10px; height: 10px; } .leading { display: inline-flex; align-items: center; color: var(--ds-color-fg-muted); flex-shrink: 0; } .leading[hidden] { display: none; } .clear-btn { width: 1.2rem; height: 1.2rem; } .clear-btn:hover { color: var(--ds-color-fg); } .clear-btn:focus-visible { box-shadow: var(--ds-shadow-focus); } .clear-btn svg { width: 1rem; height: 1rem; } .caret { width: 1.2rem; height: 1.2rem; color: var(--ds-color-fg-muted); pointer-events: none; flex-shrink: 0; transition: transform var(--ds-duration-fast) var(--ds-easing-standard); } .listbox { /* In-flow fallback for browsers without the Popover API. When the API is available the listbox is shown via showPopover() (top layer, so it escapes any overflow:hidden / scroll ancestor) and positioned with CSS anchor positioning — see .listbox[popover]:popover-open below. */ position: absolute; inset: calc(100% + var(--ds-space-1)) 0 auto; z-index: 100; max-height: 240px; overflow-y: auto; background: var(--ds-color-bg); border: 1px solid var(--ds-color-border-strong); border-radius: var(--ds-radius-sm); box-shadow: var(--ds-shadow-md); /* Thin, subtle scrollbar with a transparent track (matching the shell's main content) instead of the wide, bright default that painted over the listbox's rounded corners. No scrollbar-gutter: the dropdown shouldn't reserve a permanent track when it doesn't overflow. */ scrollbar-color: var(--ds-color-fg-subtle) transparent; scrollbar-width: thin; } /* Shown in the top layer: position it under the trigger with CSS anchor positioning — matching the trigger's width (so long options wrap rather than widening the menu) and flipping above when there's no room below. The browser keeps it glued to the trigger on scroll, so no JS. */ .listbox[popover]:popover-open { position: fixed; position-anchor: --ds-select-trigger; inset: auto; top: calc(anchor(bottom) + var(--ds-space-1)); left: anchor(left); width: anchor-size(width); margin: 0; padding: 0; position-try-fallbacks: flip-block; } `"
6849
+ "default": "css` :host { --ds-select-size: var(--ds-size-md); display: inline-flex; flex-direction: column; gap: var(--ds-space-1); width: 100%; } :host([size='sm']) { --ds-select-size: var(--ds-size-sm); } :host([size='lg']) { --ds-select-size: var(--ds-size-lg); } :host([size='sm']) .trigger { font-size: var(--ds-font-size-xs); } :host([size='lg']) .trigger { font-size: var(--ds-font-size-md); } .control-wrap { position: relative; width: 100%; } .trigger { /* The popover listbox positions itself against this via CSS anchor positioning (scoped to this shadow root, so instances don't clash). */ anchor-name: --ds-select-trigger; display: flex; align-items: center; gap: var(--ds-space-2); width: 100%; height: var(--ds-select-size); padding: 0 var(--ds-space-3); background: var(--ds-color-bg); border: 1px solid var(--ds-color-border-strong); border-radius: var(--ds-radius-sm); transition: border-color var(--ds-duration-fast) var(--ds-easing-standard), box-shadow var(--ds-duration-fast) var(--ds-easing-standard); } .trigger:hover { border-color: var(--ds-color-fg-subtle); } :host([invalid]) .trigger { border-color: var(--ds-color-danger); background: var(--ds-color-danger-subtle); } :host([invalid]) .trigger:is(:focus-visible, :focus-within) { box-shadow: 0 0 0 3px rgba(178, 26, 10, 0.3); } :host([disabled]) .trigger { opacity: 0.5; background: var(--ds-color-bg-subtle); cursor: not-allowed; pointer-events: none; } .trigger-multiple { height: auto; min-height: var(--ds-select-size); padding: 6px var(--ds-space-3); flex-wrap: wrap; align-items: center; gap: var(--ds-space-2); overflow: visible; } .tiles { display: flex; flex-wrap: wrap; gap: var(--ds-space-1); min-width: 0; } .tile { display: inline-flex; align-items: center; gap: var(--ds-space-1); /* Grow with the label up to the full row width, then the label ellipsizes — rather than hard-capping every tile to a narrow width and wasting the rest of the row. */ max-width: 100%; height: 24px; padding: 0 var(--ds-space-1) 0 var(--ds-space-2); background: var(--ds-color-bg-subtle); border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-xs); color: var(--ds-color-fg); font-size: var(--ds-font-size-xs); white-space: nowrap; } .tile-focused { border-color: var(--ds-color-accent); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ds-color-accent) 35%, transparent); } .tile-overflow { padding: 0 var(--ds-space-2); background: var(--ds-color-accent-subtle); border-color: var(--ds-color-accent); color: var(--ds-color-accent); font-weight: var(--ds-font-weight-medium); } .tile-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .tile-remove, .clear-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0; border: none; background: none; color: var(--ds-color-fg-muted); cursor: pointer; border-radius: var(--ds-radius-xs); flex-shrink: 0; } .tile-remove { width: 14px; height: 14px; } .tile-remove:hover { color: var(--ds-color-fg); background: var(--ds-color-border); } .tile-remove svg { width: 10px; height: 10px; } .leading { display: inline-flex; align-items: center; color: var(--ds-color-fg-muted); flex-shrink: 0; } .leading[hidden] { display: none; } .clear-btn { width: 1.2rem; height: 1.2rem; } .clear-btn:hover { color: var(--ds-color-fg); } .clear-btn:focus-visible { box-shadow: var(--ds-shadow-focus); } .clear-btn svg { width: 1rem; height: 1rem; } .caret { width: 1.2rem; height: 1.2rem; color: var(--ds-color-fg-muted); pointer-events: none; flex-shrink: 0; transition: transform var(--ds-duration-fast) var(--ds-easing-standard); } .listbox { /* In-flow fallback for browsers without the Popover API. When the API is available the listbox is shown via showPopover() (top layer, so it escapes any overflow:hidden / scroll ancestor) and positioned with CSS anchor positioning — see .listbox[popover]:popover-open below. */ position: absolute; inset: calc(100% + var(--ds-space-1)) 0 auto; z-index: 100; max-height: 240px; overflow-y: auto; background: var(--ds-color-bg); border: 1px solid var(--ds-color-border-strong); border-radius: var(--ds-radius-sm); box-shadow: var(--ds-shadow-md); /* Thin, subtle scrollbar with a transparent track (matching the shell's main content) instead of the wide, bright default that painted over the listbox's rounded corners. No scrollbar-gutter: the dropdown shouldn't reserve a permanent track when it doesn't overflow. */ scrollbar-color: var(--ds-color-fg-subtle) transparent; scrollbar-width: thin; } /* Shown in the top layer: position it under the trigger with CSS anchor positioning — matching the trigger's width (so long options wrap rather than widening the menu) and flipping above when there's no room below. The browser keeps it glued to the trigger on scroll, so no JS. */ .listbox[popover]:popover-open { position: fixed; position-anchor: --ds-select-trigger; inset: auto; top: calc(anchor(bottom) + var(--ds-space-1)); left: anchor(left); width: anchor-size(width); margin: 0; padding: 0; position-try-fallbacks: flip-block; } `"
6462
6850
  }
6463
6851
  ],
6464
6852
  "exports": [
@@ -0,0 +1,7 @@
1
+ import { DsRangeInput } from './range-input.js';
2
+ declare global {
3
+ interface HTMLElementTagNameMap {
4
+ 'ds-range-input': DsRangeInput;
5
+ }
6
+ }
7
+ //# sourceMappingURL=define.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"define.d.ts","sourceRoot":"","sources":["../../../src/atoms/range-input/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAMhD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}
@@ -0,0 +1,5 @@
1
+ import { DsRangeInput } from './range-input.js';
2
+ if (!customElements.get('ds-range-input')) {
3
+ customElements.define('ds-range-input', DsRangeInput);
4
+ }
5
+ //# sourceMappingURL=define.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/atoms/range-input/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,gBAAgB,CAAC,EAAE,CAAC;IAC1C,cAAc,CAAC,MAAM,CAAC,gBAAgB,EAAE,YAAY,CAAC,CAAC;AACxD,CAAC"}
@@ -0,0 +1,2 @@
1
+ export { DsRangeInput, type RangeInputSize } from './range-input.js';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atoms/range-input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,KAAK,cAAc,EAAE,MAAM,kBAAkB,CAAC"}
@@ -0,0 +1,2 @@
1
+ export { DsRangeInput } from './range-input.js';
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/atoms/range-input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAuB,MAAM,kBAAkB,CAAC"}
@@ -0,0 +1,35 @@
1
+ import { type TemplateResult } from 'lit';
2
+ import { DsElement } from '@jsekulowicz/ds-core';
3
+ export type RangeInputSize = 'sm' | 'md' | 'lg';
4
+ declare const DsRangeInput_base: typeof DsElement & (new (...args: any[]) => import("@jsekulowicz/ds-core").FormControlHost & DsElement);
5
+ /**
6
+ * @tag ds-range-input
7
+ * @summary Slider for picking a numeric value within a range, with native form participation via ElementInternals.
8
+ * @event ds-input - Fired continuously while dragging with the current numeric value.
9
+ * @event ds-change - Fired when the value is committed.
10
+ * @csspart track - The slider track.
11
+ * @csspart thumb - The native range input (draggable thumb).
12
+ * @csspart value - The current-value output shown when `show-value` is set.
13
+ */
14
+ export declare class DsRangeInput extends DsRangeInput_base {
15
+ #private;
16
+ static styles: import("lit").CSSResult[];
17
+ static shadowRootOptions: ShadowRootInit;
18
+ min: number;
19
+ max: number;
20
+ step: number;
21
+ size: RangeInputSize;
22
+ label: string;
23
+ inputLabel: string;
24
+ description: string;
25
+ error: string;
26
+ invalid: boolean;
27
+ showValue: boolean;
28
+ private input;
29
+ get valueAsNumber(): number;
30
+ willUpdate(): void;
31
+ firstUpdated(): void;
32
+ render(): TemplateResult;
33
+ }
34
+ export {};
35
+ //# sourceMappingURL=range-input.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"range-input.d.ts","sourceRoot":"","sources":["../../../src/atoms/range-input/range-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAA6B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGrE,OAAO,EAAE,SAAS,EAAoB,MAAM,sBAAsB,CAAC;AAInE,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;;AAEhD;;;;;;;;GAQG;AACH,qBAAa,YAAa,SAAQ,iBAA2B;;IAC3D,OAAgB,MAAM,4BAA4D;IAClF,OAAgB,iBAAiB,EAAE,cAAc,CAG/C;IAE0B,GAAG,SAAK;IACR,GAAG,SAAO;IACV,IAAI,SAAK;IACR,IAAI,EAAE,cAAc,CAAQ;IAC7C,KAAK,SAAM;IACiB,UAAU,SAAM;IAC5C,WAAW,SAAM;IACjB,KAAK,SAAM;IACqB,OAAO,UAAS;IACN,SAAS,UAAS;IAExD,OAAO,CAAC,KAAK,CAAoB;IAIjD,IAAI,aAAa,IAAI,MAAM,CAE1B;IAkDQ,UAAU,IAAI,IAAI;IAUlB,YAAY,IAAI,IAAI;IAIpB,MAAM,IAAI,cAAc;CAgClC"}
@@ -0,0 +1,174 @@
1
+ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
+ else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
6
+ };
7
+ import { html, nothing, LitElement } from 'lit';
8
+ import { property, query } from 'lit/decorators.js';
9
+ import { live } from 'lit/directives/live.js';
10
+ import { DsElement, FormControlMixin } from '@jsekulowicz/ds-core';
11
+ import { formFieldStyles, renderFieldLabel, renderSubtext } from '../../shared/form-field.js';
12
+ import { rangeInputStyles } from './range-input.styles.js';
13
+ /**
14
+ * @tag ds-range-input
15
+ * @summary Slider for picking a numeric value within a range, with native form participation via ElementInternals.
16
+ * @event ds-input - Fired continuously while dragging with the current numeric value.
17
+ * @event ds-change - Fired when the value is committed.
18
+ * @csspart track - The slider track.
19
+ * @csspart thumb - The native range input (draggable thumb).
20
+ * @csspart value - The current-value output shown when `show-value` is set.
21
+ */
22
+ export class DsRangeInput extends FormControlMixin(DsElement) {
23
+ constructor() {
24
+ super(...arguments);
25
+ this.min = 0;
26
+ this.max = 100;
27
+ this.step = 1;
28
+ this.size = 'md';
29
+ this.label = '';
30
+ this.inputLabel = '';
31
+ this.description = '';
32
+ this.error = '';
33
+ this.invalid = false;
34
+ this.showValue = false;
35
+ this.#initialized = false;
36
+ this.#onInput = (event) => {
37
+ if (this.disabled)
38
+ return;
39
+ const target = event.target;
40
+ this.value = target.value;
41
+ this.#syncValidity();
42
+ this.emit('ds-input', { detail: { value: Number(target.value) } });
43
+ };
44
+ this.#onChange = (event) => {
45
+ if (this.disabled)
46
+ return;
47
+ const target = event.target;
48
+ this.value = target.value;
49
+ this.#syncValidity();
50
+ this.emit('ds-change', { detail: { value: Number(target.value) } });
51
+ };
52
+ // Stay focusable when disabled (so assistive tech can find and announce it,
53
+ // like ds-button) but block the keyboard/pointer interactions that would
54
+ // otherwise move the thumb.
55
+ this.#blockWhenDisabled = (event) => {
56
+ if (this.disabled) {
57
+ event.preventDefault();
58
+ }
59
+ };
60
+ }
61
+ static { this.styles = [...DsElement.styles, formFieldStyles, rangeInputStyles]; }
62
+ static { this.shadowRootOptions = {
63
+ ...LitElement.shadowRootOptions,
64
+ delegatesFocus: true,
65
+ }; }
66
+ #initialized;
67
+ get valueAsNumber() {
68
+ return this.#numericValue();
69
+ }
70
+ #numericValue() {
71
+ const parsed = typeof this.value === 'string' ? Number(this.value) : NaN;
72
+ const base = Number.isFinite(parsed) ? parsed : this.min;
73
+ return Math.min(this.max, Math.max(this.min, base));
74
+ }
75
+ #fillPercent() {
76
+ const span = this.max - this.min;
77
+ if (span <= 0) {
78
+ return 0;
79
+ }
80
+ return ((this.#numericValue() - this.min) / span) * 100;
81
+ }
82
+ #onInput;
83
+ #onChange;
84
+ // Stay focusable when disabled (so assistive tech can find and announce it,
85
+ // like ds-button) but block the keyboard/pointer interactions that would
86
+ // otherwise move the thumb.
87
+ #blockWhenDisabled;
88
+ // A native range always holds an in-range value, so validity is forwarded to the
89
+ // form for completeness while `invalid`/`error` stay consumer-controlled (app-level).
90
+ #syncValidity() {
91
+ if (!this.input) {
92
+ return;
93
+ }
94
+ this.setValidity(this.input.validity, this.input.validationMessage, this.input);
95
+ }
96
+ willUpdate() {
97
+ if (!this.#initialized) {
98
+ this.#initialized = true;
99
+ if (this.value === null) {
100
+ const initial = this.getAttribute('value');
101
+ this.value = initial ?? String(this.#numericValue());
102
+ }
103
+ }
104
+ }
105
+ firstUpdated() {
106
+ this.#syncValidity();
107
+ }
108
+ render() {
109
+ const current = this.#numericValue();
110
+ return html `
111
+ ${this.label ? renderFieldLabel(this.label, this.required, 'input') : nothing}
112
+ <span class="wrap" part="wrap">
113
+ <input
114
+ id="input"
115
+ part="thumb"
116
+ type="range"
117
+ class="range"
118
+ style="--ds-range-fill: ${this.#fillPercent()}%"
119
+ .value=${live(String(current))}
120
+ min=${this.min}
121
+ max=${this.max}
122
+ step=${this.step}
123
+ name=${this.name || nothing}
124
+ aria-label=${this.label ? nothing : this.inputLabel || nothing}
125
+ ?required=${this.required}
126
+ aria-disabled=${this.disabled ? 'true' : 'false'}
127
+ aria-invalid=${this.invalid ? 'true' : 'false'}
128
+ @keydown=${this.#blockWhenDisabled}
129
+ @pointerdown=${this.#blockWhenDisabled}
130
+ @input=${this.#onInput}
131
+ @change=${this.#onChange}
132
+ />
133
+ ${this.showValue
134
+ ? html `<output part="value" for="input">${current}</output>`
135
+ : nothing}
136
+ </span>
137
+ ${renderSubtext(this.description, this.error, this.invalid)}
138
+ `;
139
+ }
140
+ }
141
+ __decorate([
142
+ property({ type: Number })
143
+ ], DsRangeInput.prototype, "min", void 0);
144
+ __decorate([
145
+ property({ type: Number })
146
+ ], DsRangeInput.prototype, "max", void 0);
147
+ __decorate([
148
+ property({ type: Number })
149
+ ], DsRangeInput.prototype, "step", void 0);
150
+ __decorate([
151
+ property({ reflect: true })
152
+ ], DsRangeInput.prototype, "size", void 0);
153
+ __decorate([
154
+ property()
155
+ ], DsRangeInput.prototype, "label", void 0);
156
+ __decorate([
157
+ property({ attribute: 'input-label' })
158
+ ], DsRangeInput.prototype, "inputLabel", void 0);
159
+ __decorate([
160
+ property()
161
+ ], DsRangeInput.prototype, "description", void 0);
162
+ __decorate([
163
+ property()
164
+ ], DsRangeInput.prototype, "error", void 0);
165
+ __decorate([
166
+ property({ type: Boolean, reflect: true })
167
+ ], DsRangeInput.prototype, "invalid", void 0);
168
+ __decorate([
169
+ property({ type: Boolean, attribute: 'show-value' })
170
+ ], DsRangeInput.prototype, "showValue", void 0);
171
+ __decorate([
172
+ query('input')
173
+ ], DsRangeInput.prototype, "input", void 0);
174
+ //# sourceMappingURL=range-input.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"range-input.js","sourceRoot":"","sources":["../../../src/atoms/range-input/range-input.ts"],"names":[],"mappings":"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"}
@@ -0,0 +1,2 @@
1
+ export declare const rangeInputStyles: import("lit").CSSResult;
2
+ //# sourceMappingURL=range-input.styles.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"range-input.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/range-input/range-input.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,yBAkH5B,CAAC"}
@@ -0,0 +1,117 @@
1
+ import { css } from 'lit';
2
+ export const rangeInputStyles = css `
3
+ :host {
4
+ display: flex;
5
+ flex-direction: column;
6
+ gap: var(--ds-space-1);
7
+ width: 100%;
8
+ --ds-range-track-height: 0.375rem;
9
+ --ds-range-thumb-size: 1.125rem;
10
+ }
11
+ :host([size='sm']) {
12
+ --ds-range-track-height: 0.25rem;
13
+ --ds-range-thumb-size: 0.875rem;
14
+ }
15
+ :host([size='lg']) {
16
+ --ds-range-track-height: 0.5rem;
17
+ --ds-range-thumb-size: 1.375rem;
18
+ }
19
+ .wrap {
20
+ display: flex;
21
+ align-items: center;
22
+ gap: var(--ds-space-3);
23
+ }
24
+ .range {
25
+ flex: 1;
26
+ min-width: 0;
27
+ height: var(--ds-range-thumb-size);
28
+ margin: 0;
29
+ background: transparent;
30
+ cursor: pointer;
31
+ -webkit-appearance: none;
32
+ appearance: none;
33
+ }
34
+ /* Track — filled portion (accent) up to the thumb, rest is subtle. */
35
+ .range::-webkit-slider-runnable-track {
36
+ height: var(--ds-range-track-height);
37
+ border-radius: var(--ds-radius-full);
38
+ background: linear-gradient(
39
+ to right,
40
+ var(--ds-color-accent) var(--ds-range-fill, 0%),
41
+ var(--ds-color-bg-subtle) var(--ds-range-fill, 0%)
42
+ );
43
+ }
44
+ .range::-moz-range-track {
45
+ height: var(--ds-range-track-height);
46
+ border-radius: var(--ds-radius-full);
47
+ background: var(--ds-color-bg-subtle);
48
+ }
49
+ .range::-moz-range-progress {
50
+ height: var(--ds-range-track-height);
51
+ border-radius: var(--ds-radius-full);
52
+ background: var(--ds-color-accent);
53
+ }
54
+ /* Thumb */
55
+ .range::-webkit-slider-thumb {
56
+ -webkit-appearance: none;
57
+ appearance: none;
58
+ width: var(--ds-range-thumb-size);
59
+ height: var(--ds-range-thumb-size);
60
+ margin-top: calc((var(--ds-range-track-height) - var(--ds-range-thumb-size)) / 2);
61
+ border-radius: var(--ds-radius-full);
62
+ border: 2px solid var(--ds-color-accent);
63
+ background: var(--ds-color-bg);
64
+ box-shadow: var(--ds-shadow-sm);
65
+ transition: box-shadow var(--ds-duration-fast) var(--ds-easing-standard);
66
+ }
67
+ .range::-moz-range-thumb {
68
+ width: var(--ds-range-thumb-size);
69
+ height: var(--ds-range-thumb-size);
70
+ border-radius: var(--ds-radius-full);
71
+ border: 2px solid var(--ds-color-accent);
72
+ background: var(--ds-color-bg);
73
+ box-shadow: var(--ds-shadow-sm);
74
+ transition: box-shadow var(--ds-duration-fast) var(--ds-easing-standard);
75
+ }
76
+ .range:focus-visible {
77
+ outline: none;
78
+ }
79
+ .range:focus-visible::-webkit-slider-thumb {
80
+ box-shadow: var(--ds-shadow-focus);
81
+ }
82
+ .range:focus-visible::-moz-range-thumb {
83
+ box-shadow: var(--ds-shadow-focus);
84
+ }
85
+ /* Invalid */
86
+ :host([invalid]) .range::-webkit-slider-runnable-track {
87
+ background: linear-gradient(
88
+ to right,
89
+ var(--ds-color-danger) var(--ds-range-fill, 0%),
90
+ var(--ds-color-bg-subtle) var(--ds-range-fill, 0%)
91
+ );
92
+ }
93
+ :host([invalid]) .range::-moz-range-progress {
94
+ background: var(--ds-color-danger);
95
+ }
96
+ :host([invalid]) .range::-webkit-slider-thumb {
97
+ border-color: var(--ds-color-danger);
98
+ }
99
+ :host([invalid]) .range::-moz-range-thumb {
100
+ border-color: var(--ds-color-danger);
101
+ }
102
+ /* Disabled */
103
+ :host([disabled]) {
104
+ opacity: 0.5;
105
+ }
106
+ :host([disabled]) .range {
107
+ cursor: not-allowed;
108
+ }
109
+ output {
110
+ min-width: 2.5ch;
111
+ text-align: right;
112
+ color: var(--ds-color-fg);
113
+ font-size: var(--ds-font-size-sm);
114
+ font-variant-numeric: tabular-nums;
115
+ }
116
+ `;
117
+ //# sourceMappingURL=range-input.styles.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"range-input.styles.js","sourceRoot":"","sources":["../../../src/atoms/range-input/range-input.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkHlC,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"searchable-select.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/searchable-select/searchable-select.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,sBAAsB,yBAiElC,CAAC"}
1
+ {"version":3,"file":"searchable-select.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/searchable-select/searchable-select.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,sBAAsB,yBAoElC,CAAC"}
@@ -21,6 +21,9 @@ export const searchableSelectStyles = css `
21
21
  font-size: var(--ds-font-size-sm);
22
22
  min-width: 0;
23
23
  cursor: pointer;
24
+ /* Show a long selected value truncated rather than hard-clipped; the
25
+ input still scrolls normally while focused and typing. */
26
+ text-overflow: ellipsis;
24
27
  }
25
28
  :host([size='sm']) .search-input {
26
29
  font-size: var(--ds-font-size-xs);
@@ -1 +1 @@
1
- {"version":3,"file":"searchable-select.styles.js","sourceRoot":"","sources":["../../../src/atoms/searchable-select/searchable-select.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiExC,CAAC"}
1
+ {"version":3,"file":"searchable-select.styles.js","sourceRoot":"","sources":["../../../src/atoms/searchable-select/searchable-select.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoExC,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"select.common-styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/select/select.common-styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,yBA4L9B,CAAC"}
1
+ {"version":3,"file":"select.common-styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/select/select.common-styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,yBAgM9B,CAAC"}
@@ -74,6 +74,10 @@ export const selectCommonStyles = css `
74
74
  display: inline-flex;
75
75
  align-items: center;
76
76
  gap: var(--ds-space-1);
77
+ /* Grow with the label up to the full row width, then the label
78
+ ellipsizes — rather than hard-capping every tile to a narrow width
79
+ and wasting the rest of the row. */
80
+ max-width: 100%;
77
81
  height: 24px;
78
82
  padding: 0 var(--ds-space-1) 0 var(--ds-space-2);
79
83
  background: var(--ds-color-bg-subtle);
@@ -95,7 +99,7 @@ export const selectCommonStyles = css `
95
99
  font-weight: var(--ds-font-weight-medium);
96
100
  }
97
101
  .tile-label {
98
- max-width: 120px;
102
+ min-width: 0;
99
103
  overflow: hidden;
100
104
  text-overflow: ellipsis;
101
105
  }
@@ -1 +1 @@
1
- {"version":3,"file":"select.common-styles.js","sourceRoot":"","sources":["../../../src/atoms/select/select.common-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4LpC,CAAC"}
1
+ {"version":3,"file":"select.common-styles.js","sourceRoot":"","sources":["../../../src/atoms/select/select.common-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgMpC,CAAC"}
package/dist/define.d.ts CHANGED
@@ -8,6 +8,7 @@ import './atoms/list/define.js';
8
8
  import './atoms/icon/define.js';
9
9
  import './atoms/link/define.js';
10
10
  import './atoms/text-field/define.js';
11
+ import './atoms/range-input/define.js';
11
12
  import './atoms/checkbox/define.js';
12
13
  import './atoms/checkbox-group/define.js';
13
14
  import './atoms/radio/define.js';
@@ -1 +1 @@
1
- {"version":3,"file":"define.d.ts","sourceRoot":"","sources":["../src/define.ts"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAC;AAClC,OAAO,2BAA2B,CAAC;AACnC,OAAO,yBAAyB,CAAC;AACjC,OAAO,4BAA4B,CAAC;AACpC,OAAO,gCAAgC,CAAC;AACxC,OAAO,2BAA2B,CAAC;AACnC,OAAO,wBAAwB,CAAC;AAChC,OAAO,wBAAwB,CAAC;AAChC,OAAO,wBAAwB,CAAC;AAChC,OAAO,8BAA8B,CAAC;AACtC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,yBAAyB,CAAC;AACjC,OAAO,+BAA+B,CAAC;AACvC,OAAO,qCAAqC,CAAC;AAC7C,OAAO,0BAA0B,CAAC;AAClC,OAAO,qCAAqC,CAAC;AAC7C,OAAO,wBAAwB,CAAC;AAChC,OAAO,yBAAyB,CAAC;AACjC,OAAO,8BAA8B,CAAC;AACtC,OAAO,4BAA4B,CAAC;AACpC,OAAO,wBAAwB,CAAC;AAChC,OAAO,4BAA4B,CAAC;AACpC,OAAO,8BAA8B,CAAC;AACtC,OAAO,8BAA8B,CAAC;AACtC,OAAO,6BAA6B,CAAC;AACrC,OAAO,oCAAoC,CAAC;AAC5C,OAAO,mCAAmC,CAAC;AAC3C,OAAO,iCAAiC,CAAC;AACzC,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,+BAA+B,CAAC;AACvC,OAAO,+BAA+B,CAAC;AACvC,OAAO,8BAA8B,CAAC;AACtC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,iCAAiC,CAAC"}
1
+ {"version":3,"file":"define.d.ts","sourceRoot":"","sources":["../src/define.ts"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAC;AAClC,OAAO,2BAA2B,CAAC;AACnC,OAAO,yBAAyB,CAAC;AACjC,OAAO,4BAA4B,CAAC;AACpC,OAAO,gCAAgC,CAAC;AACxC,OAAO,2BAA2B,CAAC;AACnC,OAAO,wBAAwB,CAAC;AAChC,OAAO,wBAAwB,CAAC;AAChC,OAAO,wBAAwB,CAAC;AAChC,OAAO,8BAA8B,CAAC;AACtC,OAAO,+BAA+B,CAAC;AACvC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,yBAAyB,CAAC;AACjC,OAAO,+BAA+B,CAAC;AACvC,OAAO,qCAAqC,CAAC;AAC7C,OAAO,0BAA0B,CAAC;AAClC,OAAO,qCAAqC,CAAC;AAC7C,OAAO,wBAAwB,CAAC;AAChC,OAAO,yBAAyB,CAAC;AACjC,OAAO,8BAA8B,CAAC;AACtC,OAAO,4BAA4B,CAAC;AACpC,OAAO,wBAAwB,CAAC;AAChC,OAAO,4BAA4B,CAAC;AACpC,OAAO,8BAA8B,CAAC;AACtC,OAAO,8BAA8B,CAAC;AACtC,OAAO,6BAA6B,CAAC;AACrC,OAAO,oCAAoC,CAAC;AAC5C,OAAO,mCAAmC,CAAC;AAC3C,OAAO,iCAAiC,CAAC;AACzC,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,+BAA+B,CAAC;AACvC,OAAO,+BAA+B,CAAC;AACvC,OAAO,8BAA8B,CAAC;AACtC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,iCAAiC,CAAC"}
package/dist/define.js CHANGED
@@ -8,6 +8,7 @@ import './atoms/list/define.js';
8
8
  import './atoms/icon/define.js';
9
9
  import './atoms/link/define.js';
10
10
  import './atoms/text-field/define.js';
11
+ import './atoms/range-input/define.js';
11
12
  import './atoms/checkbox/define.js';
12
13
  import './atoms/checkbox-group/define.js';
13
14
  import './atoms/radio/define.js';
@@ -1 +1 @@
1
- {"version":3,"file":"define.js","sourceRoot":"","sources":["../src/define.ts"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAC;AAClC,OAAO,2BAA2B,CAAC;AACnC,OAAO,yBAAyB,CAAC;AACjC,OAAO,4BAA4B,CAAC;AACpC,OAAO,gCAAgC,CAAC;AACxC,OAAO,2BAA2B,CAAC;AACnC,OAAO,wBAAwB,CAAC;AAChC,OAAO,wBAAwB,CAAC;AAChC,OAAO,wBAAwB,CAAC;AAChC,OAAO,8BAA8B,CAAC;AACtC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,yBAAyB,CAAC;AACjC,OAAO,+BAA+B,CAAC;AACvC,OAAO,qCAAqC,CAAC;AAC7C,OAAO,0BAA0B,CAAC;AAClC,OAAO,qCAAqC,CAAC;AAC7C,OAAO,wBAAwB,CAAC;AAChC,OAAO,yBAAyB,CAAC;AACjC,OAAO,8BAA8B,CAAC;AACtC,OAAO,4BAA4B,CAAC;AACpC,OAAO,wBAAwB,CAAC;AAChC,OAAO,4BAA4B,CAAC;AACpC,OAAO,8BAA8B,CAAC;AACtC,OAAO,8BAA8B,CAAC;AACtC,OAAO,6BAA6B,CAAC;AACrC,OAAO,oCAAoC,CAAC;AAC5C,OAAO,mCAAmC,CAAC;AAC3C,OAAO,iCAAiC,CAAC;AACzC,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,+BAA+B,CAAC;AACvC,OAAO,+BAA+B,CAAC;AACvC,OAAO,8BAA8B,CAAC;AACtC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,iCAAiC,CAAC"}
1
+ {"version":3,"file":"define.js","sourceRoot":"","sources":["../src/define.ts"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAC;AAClC,OAAO,2BAA2B,CAAC;AACnC,OAAO,yBAAyB,CAAC;AACjC,OAAO,4BAA4B,CAAC;AACpC,OAAO,gCAAgC,CAAC;AACxC,OAAO,2BAA2B,CAAC;AACnC,OAAO,wBAAwB,CAAC;AAChC,OAAO,wBAAwB,CAAC;AAChC,OAAO,wBAAwB,CAAC;AAChC,OAAO,8BAA8B,CAAC;AACtC,OAAO,+BAA+B,CAAC;AACvC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,yBAAyB,CAAC;AACjC,OAAO,+BAA+B,CAAC;AACvC,OAAO,qCAAqC,CAAC;AAC7C,OAAO,0BAA0B,CAAC;AAClC,OAAO,qCAAqC,CAAC;AAC7C,OAAO,wBAAwB,CAAC;AAChC,OAAO,yBAAyB,CAAC;AACjC,OAAO,8BAA8B,CAAC;AACtC,OAAO,4BAA4B,CAAC;AACpC,OAAO,wBAAwB,CAAC;AAChC,OAAO,4BAA4B,CAAC;AACpC,OAAO,8BAA8B,CAAC;AACtC,OAAO,8BAA8B,CAAC;AACtC,OAAO,6BAA6B,CAAC;AACrC,OAAO,oCAAoC,CAAC;AAC5C,OAAO,mCAAmC,CAAC;AAC3C,OAAO,iCAAiC,CAAC;AACzC,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,+BAA+B,CAAC;AACvC,OAAO,+BAA+B,CAAC;AACvC,OAAO,8BAA8B,CAAC;AACtC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,iCAAiC,CAAC"}
package/dist/index.d.ts CHANGED
@@ -8,6 +8,7 @@ export { DsList, DsListItem, type ListVariant, type ListDensity } from './atoms/
8
8
  export { DsIcon, registerIcon, getIcon, type IconSize } from './atoms/icon/index.js';
9
9
  export { DsLink, type LinkVariant } from './atoms/link/index.js';
10
10
  export { DsTextField, type TextFieldType, type TextFieldSize } from './atoms/text-field/index.js';
11
+ export { DsRangeInput, type RangeInputSize } from './atoms/range-input/index.js';
11
12
  export { DsCheckbox } from './atoms/checkbox/index.js';
12
13
  export { DsCheckboxGroup } from './atoms/checkbox-group/index.js';
13
14
  export { DsRadio } from './atoms/radio/index.js';
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
package/dist/index.js CHANGED
@@ -8,6 +8,7 @@ export { DsList, DsListItem } from './atoms/list/index.js';
8
8
  export { DsIcon, registerIcon, getIcon } from './atoms/icon/index.js';
9
9
  export { DsLink } from './atoms/link/index.js';
10
10
  export { DsTextField } from './atoms/text-field/index.js';
11
+ export { DsRangeInput } from './atoms/range-input/index.js';
11
12
  export { DsCheckbox } from './atoms/checkbox/index.js';
12
13
  export { DsCheckboxGroup } from './atoms/checkbox-group/index.js';
13
14
  export { DsRadio } from './atoms/radio/index.js';
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,GAIT,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,SAAS,EAAyB,MAAM,0BAA0B,CAAC;AAC5E,OAAO,EAAE,OAAO,EAAkB,MAAM,wBAAwB,CAAC;AACjE,OAAO,EAAE,UAAU,EAAwB,MAAM,2BAA2B,CAAC;AAC7E,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,SAAS,EAA2B,MAAM,0BAA0B,CAAC;AAC9E,OAAO,EAAE,MAAM,EAAE,UAAU,EAAsC,MAAM,uBAAuB,CAAC;AAC/F,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,OAAO,EAAiB,MAAM,uBAAuB,CAAC;AACrF,OAAO,EAAE,MAAM,EAAoB,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAAE,WAAW,EAA0C,MAAM,6BAA6B,CAAC;AAClG,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAC5D,OAAO,EACL,kBAAkB,GAEnB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAqB,MAAM,yBAAyB,CAAC;AACtE,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AACxE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC7E,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,EACL,OAAO,EACP,iBAAiB,EACjB,iBAAiB,EACjB,oBAAoB,GAYrB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,MAAM,EAA4C,MAAM,2BAA2B,CAAC;AAC7F,OAAO,EAAE,QAAQ,EAAmB,MAAM,6BAA6B,CAAC;AACxE,OAAO,EACL,OAAO,EACP,YAAY,EACZ,KAAK,GAMN,MAAM,4BAA4B,CAAC;AACpC,OAAO,EACL,aAAa,EACb,uBAAuB,EACvB,mBAAmB,EACnB,wBAAwB,GAEzB,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAAE,YAAY,EAA4B,MAAM,kCAAkC,CAAC;AAC1F,OAAO,EACL,UAAU,GAKX,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAE,OAAO,EAAkB,MAAM,4BAA4B,CAAC;AACrE,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAwB,MAAM,gCAAgC,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,GAIT,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,SAAS,EAAyB,MAAM,0BAA0B,CAAC;AAC5E,OAAO,EAAE,OAAO,EAAkB,MAAM,wBAAwB,CAAC;AACjE,OAAO,EAAE,UAAU,EAAwB,MAAM,2BAA2B,CAAC;AAC7E,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,SAAS,EAA2B,MAAM,0BAA0B,CAAC;AAC9E,OAAO,EAAE,MAAM,EAAE,UAAU,EAAsC,MAAM,uBAAuB,CAAC;AAC/F,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,OAAO,EAAiB,MAAM,uBAAuB,CAAC;AACrF,OAAO,EAAE,MAAM,EAAoB,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAAE,WAAW,EAA0C,MAAM,6BAA6B,CAAC;AAClG,OAAO,EAAE,YAAY,EAAuB,MAAM,8BAA8B,CAAC;AACjF,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAC5D,OAAO,EACL,kBAAkB,GAEnB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAqB,MAAM,yBAAyB,CAAC;AACtE,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AACxE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC7E,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,EACL,OAAO,EACP,iBAAiB,EACjB,iBAAiB,EACjB,oBAAoB,GAYrB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,MAAM,EAA4C,MAAM,2BAA2B,CAAC;AAC7F,OAAO,EAAE,QAAQ,EAAmB,MAAM,6BAA6B,CAAC;AACxE,OAAO,EACL,OAAO,EACP,YAAY,EACZ,KAAK,GAMN,MAAM,4BAA4B,CAAC;AACpC,OAAO,EACL,aAAa,EACb,uBAAuB,EACvB,mBAAmB,EACnB,wBAAwB,GAEzB,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAAE,YAAY,EAA4B,MAAM,kCAAkC,CAAC;AAC1F,OAAO,EACL,UAAU,GAKX,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAE,OAAO,EAAkB,MAAM,4BAA4B,CAAC;AACrE,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAwB,MAAM,gCAAgC,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jsekulowicz/ds-components",
3
- "version": "0.23.0",
3
+ "version": "0.24.0",
4
4
  "description": "Lit web components for the Design System Library (atoms, molecules, organisms, templates, pages).",
5
5
  "license": "UNLICENSED",
6
6
  "repository": {
@@ -88,6 +88,13 @@
88
88
  "./text-field/define": {
89
89
  "import": "./dist/atoms/text-field/define.js"
90
90
  },
91
+ "./range-input": {
92
+ "types": "./dist/atoms/range-input/index.d.ts",
93
+ "import": "./dist/atoms/range-input/index.js"
94
+ },
95
+ "./range-input/define": {
96
+ "import": "./dist/atoms/range-input/define.js"
97
+ },
91
98
  "./checkbox": {
92
99
  "types": "./dist/atoms/checkbox/index.d.ts",
93
100
  "import": "./dist/atoms/checkbox/index.js"