@dialpad/dialtone 9.53.0 → 9.54.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 (35) hide show
  1. package/dist/css/dialtone.css +71 -47
  2. package/dist/css/dialtone.min.css +1 -1
  3. package/dist/tokens/css/variables-dark.css +1 -1
  4. package/dist/tokens/css/variables-expressive-dark.css +1 -1
  5. package/dist/tokens/css/variables-expressive-light.css +1 -1
  6. package/dist/tokens/css/variables-expressive-sm-dark.css +1 -1
  7. package/dist/tokens/css/variables-expressive-sm-light.css +1 -1
  8. package/dist/tokens/css/variables-light.css +1 -1
  9. package/dist/tokens/css/variables-tmo-dark.css +1 -1
  10. package/dist/tokens/css/variables-tmo-light.css +1 -1
  11. package/dist/tokens/less/variables-dark.less +1 -1
  12. package/dist/tokens/less/variables-expressive-dark.less +1 -1
  13. package/dist/tokens/less/variables-expressive-light.less +1 -1
  14. package/dist/tokens/less/variables-expressive-sm-dark.less +1 -1
  15. package/dist/tokens/less/variables-expressive-sm-light.less +1 -1
  16. package/dist/tokens/less/variables-light.less +1 -1
  17. package/dist/tokens/less/variables-tmo-dark.less +1 -1
  18. package/dist/tokens/less/variables-tmo-light.less +1 -1
  19. package/dist/vue2/component-documentation.json +1 -1
  20. package/dist/vue2/lib/input.cjs +56 -79
  21. package/dist/vue2/lib/input.cjs.map +1 -1
  22. package/dist/vue2/lib/input.js +56 -79
  23. package/dist/vue2/lib/input.js.map +1 -1
  24. package/dist/vue2/types/components/input/input.vue.d.ts +5 -39
  25. package/dist/vue2/types/components/input/input.vue.d.ts.map +1 -1
  26. package/dist/vue2/types/components/input/input_constants.d.ts +69 -0
  27. package/dist/vue3/component-documentation.json +1 -1
  28. package/dist/vue3/lib/input.cjs +67 -93
  29. package/dist/vue3/lib/input.cjs.map +1 -1
  30. package/dist/vue3/lib/input.js +67 -93
  31. package/dist/vue3/lib/input.js.map +1 -1
  32. package/dist/vue3/types/components/input/input.vue.d.ts +5 -39
  33. package/dist/vue3/types/components/input/input.vue.d.ts.map +1 -1
  34. package/dist/vue3/types/components/input/input_constants.d.ts +69 -0
  35. package/package.json +2 -1
package/dist/css/dialtone.css CHANGED
@@ -2243,20 +2243,75 @@ legend .d-label {
2243
2243
  .d-input__length-description {
2244
2244
  margin-bottom: var(--dt-space-200);
2245
2245
  }
2246
+ .d-input--hidden {
2247
+ visibility: hidden;
2248
+ }
2246
2249
  .d-input__wrapper {
2247
2250
  padding: 0;
2248
2251
  overflow-y: auto;
2249
2252
  }
2250
- .d-input__wrapper .d-input-icon.d-input-icon--right {
2251
- margin-right: var(--dt-space-400);
2252
- }
2253
- .d-input__wrapper .d-input-icon.d-input-icon--left {
2254
- margin-left: var(--dt-space-400);
2255
- }
2256
- .d-input__wrapper .d-textarea + .d-input-icon.d-input-icon--right {
2253
+ .d-input__wrapper .d-textarea + .d-input-icon--right {
2257
2254
  position: absolute;
2258
2255
  right: var(--dt-space-450);
2259
2256
  }
2257
+ .d-input__wrapper .d-input-icon--left:has(+ .d-textarea) {
2258
+ align-items: flex-start;
2259
+ }
2260
+ .d-input__wrapper .d-input-icon:has(+ .d-textarea),
2261
+ .d-input__wrapper .d-textarea + .d-input-icon {
2262
+ padding-top: calc(var(--input-padding-y) + var(--dt-space-200));
2263
+ }
2264
+ .d-input__wrapper .d-input-icon:has(+ .d-textarea--xs),
2265
+ .d-input__wrapper .d-textarea--xs + .d-input-icon {
2266
+ --input-padding-y: calc(calc(var(--dt-space-400) - var(--dt-space-100)) - var(--input-border-width));
2267
+ --input-padding-x: calc(var(--dt-space-400) - var(--input-border-width));
2268
+ --input-font-size: var(--dt-font-size-100);
2269
+ --input-border-radius: var(--dt-size-300);
2270
+ padding-top: calc(var(--input-padding-y) + var(--dt-space-100));
2271
+ }
2272
+ .d-input__wrapper .d-input-icon:has(+ .d-textarea--xs) .d-btn__icon,
2273
+ .d-input__wrapper .d-textarea--xs + .d-input-icon .d-btn__icon {
2274
+ width: calc(var(--dt-size-500) - var(--dt-size-200));
2275
+ height: calc(var(--dt-size-500) - var(--dt-size-200));
2276
+ }
2277
+ .d-input__wrapper .d-input-icon:has(+ .d-textarea--sm),
2278
+ .d-input__wrapper .d-textarea--sm + .d-input-icon {
2279
+ --input-padding-y: calc(var(--dt-space-400) - var(--input-border-width));
2280
+ --input-padding-x: calc((var(--dt-space-500) - var(--dt-space-300)) - var(--input-border-width));
2281
+ --input-font-size: var(--dt-font-size-100);
2282
+ padding-top: calc(var(--input-padding-y) + var(--dt-space-100));
2283
+ }
2284
+ .d-input__wrapper .d-input-icon:has(+ .d-textarea--sm) .d-btn__icon,
2285
+ .d-input__wrapper .d-textarea--sm + .d-input-icon .d-btn__icon {
2286
+ width: var(--dt-size-500);
2287
+ height: var(--dt-size-500);
2288
+ }
2289
+ .d-input__wrapper .d-input-icon:has(+ .d-textarea--lg),
2290
+ .d-input__wrapper .d-textarea--lg + .d-input-icon {
2291
+ --input-padding-y: calc((var(--dt-space-400) + var(--dt-space-200)) - var(--input-border-width));
2292
+ --input-padding-x: calc(var(--dt-space-500) - var(--input-border-width));
2293
+ --input-font-size: var(--dt-font-size-300);
2294
+ --input-border-radius: var(--dt-size-450);
2295
+ padding-top: calc(var(--input-padding-y) + var(--dt-space-100));
2296
+ }
2297
+ .d-input__wrapper .d-input-icon:has(+ .d-textarea--lg) .d-btn__icon,
2298
+ .d-input__wrapper .d-textarea--lg + .d-input-icon .d-btn__icon {
2299
+ width: calc(var(--dt-size-300) * 5);
2300
+ height: calc(var(--dt-size-300) * 5);
2301
+ }
2302
+ .d-input__wrapper .d-input-icon:has(+ .d-textarea--xl),
2303
+ .d-input__wrapper .d-textarea--xl + .d-input-icon {
2304
+ --input-padding-y: calc((var(--dt-space-500) - var(--dt-space-300)) - var(--input-border-width));
2305
+ --input-padding-x: calc(var(--dt-space-500) - var(--input-border-width));
2306
+ --input-font-size: var(--dt-font-size-400);
2307
+ --input-border-radius: var(--dt-size-500);
2308
+ padding-top: calc(var(--input-padding-y) + (var(--dt-space-350) - var(--dt-space-100)));
2309
+ }
2310
+ .d-input__wrapper .d-input-icon:has(+ .d-textarea--xl) .d-btn__icon,
2311
+ .d-input__wrapper .d-textarea--xl + .d-input-icon .d-btn__icon {
2312
+ width: var(--dt-size-550);
2313
+ height: var(--dt-size-550);
2314
+ }
2260
2315
  .d-input__wrapper .d-input,
2261
2316
  .d-input__wrapper .d-textarea {
2262
2317
  flex: 1;
@@ -2271,17 +2326,6 @@ legend .d-label {
2271
2326
  outline: 0;
2272
2327
  box-shadow: none !important;
2273
2328
  }
2274
- .d-input__wrapper .d-input.d-input-icon--right,
2275
- .d-input__wrapper .d-textarea.d-input-icon--right {
2276
- padding-right: var(--dt-space-350);
2277
- }
2278
- .d-input__wrapper .d-input.d-input-icon--left,
2279
- .d-input__wrapper .d-textarea.d-input-icon--left {
2280
- padding-left: var(--dt-space-350);
2281
- }
2282
- .d-input__wrapper .d-textarea.d-input-icon--right {
2283
- padding-right: var(--dt-space-625);
2284
- }
2285
2329
  .d-input.d-input--xs {
2286
2330
  --input-padding-y: calc(calc(var(--dt-space-400) - var(--dt-space-100)) - var(--input-border-width));
2287
2331
  --input-padding-x: calc(var(--dt-space-400) - var(--input-border-width));
@@ -2384,37 +2428,17 @@ legend .d-label {
2384
2428
  --input-color-border: var(--dt-inputs-color-border-success) !important;
2385
2429
  }
2386
2430
  .d-input-icon {
2387
- --input-icon-size: var(--dt-size-500);
2388
- --input-icon-container-height: var(--dt-size-600);
2389
- z-index: var(--zi-base1);
2390
- display: inline-flex;
2431
+ display: none;
2391
2432
  align-items: center;
2392
- height: var(--input-icon-container-height);
2393
- margin: 0;
2394
- }
2395
- .d-input-icon.d-input--xs {
2396
- --input-icon-container-height: calc(var(--dt-size-600) - var(--dt-size-300));
2397
- }
2398
- .d-input-icon--xs {
2399
- --input-icon-size: var(--dt-icon-size-100);
2400
2433
  }
2401
- .d-input-icon.d-input--sm {
2402
- --input-icon-container-height: var(--dt-size-600);
2403
- }
2404
- .d-input-icon--sm {
2405
- --input-icon-size: var(--dt-icon-size-200);
2406
- }
2407
- .d-input-icon.d-input--lg {
2408
- --input-icon-container-height: calc(var(--dt-size-300) * 10);
2409
- }
2410
- .d-input-icon--lg {
2411
- --input-icon-size: var(--dt-icon-size-400);
2434
+ .d-input-icon:has( > svg) {
2435
+ display: inline-flex;
2412
2436
  }
2413
- .d-input-icon.d-input--xl {
2414
- --input-icon-container-height: calc(var(--dt-size-300) * 14);
2437
+ .d-input-icon--right:has( > svg) {
2438
+ margin-right: var(--dt-space-400);
2415
2439
  }
2416
- .d-input-icon--xl {
2417
- --input-icon-size: var(--dt-icon-size-500);
2440
+ .d-input-icon--left:has(> svg) {
2441
+ margin-left: var(--dt-space-400);
2418
2442
  }
2419
2443
  .d-keyboard-shortcut {
2420
2444
  display: inline-flex;
@@ -7583,7 +7607,7 @@ body {
7583
7607
  }
7584
7608
  /**
7585
7609
  * Do not edit directly
7586
- * Generated on Wed, 03 Jul 2024 16:54:34 GMT
7610
+ * Generated on Thu, 04 Jul 2024 22:07:54 GMT
7587
7611
  */
7588
7612
 
7589
7613
  .dialtone-theme-light {
@@ -8404,7 +8428,7 @@ body {
8404
8428
 
8405
8429
  /**
8406
8430
  * Do not edit directly
8407
- * Generated on Wed, 03 Jul 2024 16:54:34 GMT
8431
+ * Generated on Thu, 04 Jul 2024 22:07:54 GMT
8408
8432
  */
8409
8433
 
8410
8434
  .dialtone-theme-dark {