@pantograph/styles 0.0.4 → 0.0.6

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 (27) hide show
  1. package/dist/accordion.css +1 -1
  2. package/dist/accordion.js +1 -1
  3. package/dist/accordion.umd.cjs +1 -1
  4. package/dist/combobox.css +1 -1
  5. package/dist/combobox.js +1 -1
  6. package/dist/combobox.umd.cjs +1 -1
  7. package/dist/comment.css +1 -1
  8. package/dist/comment.js +1 -1
  9. package/dist/comment.umd.cjs +1 -1
  10. package/dist/index.css +1 -1
  11. package/dist/index.d.ts +1 -0
  12. package/dist/index.js +2 -1
  13. package/dist/index.umd.cjs +4 -1
  14. package/dist/input.css +1 -1
  15. package/dist/input.js +1 -1
  16. package/dist/input.umd.cjs +1 -1
  17. package/dist/pin_input.css +1 -0
  18. package/dist/pin_input.d.ts +5 -0
  19. package/dist/pin_input.js +7 -0
  20. package/dist/pin_input.umd.cjs +12 -0
  21. package/dist/textarea.css +1 -1
  22. package/dist/textarea.js +1 -1
  23. package/dist/textarea.umd.cjs +1 -1
  24. package/dist/tree.css +1 -1
  25. package/dist/tree.js +1 -1
  26. package/dist/tree.umd.cjs +1 -1
  27. package/package.json +2 -2
package/dist/input.css CHANGED
@@ -1 +1 @@
1
- .pc_input{box-sizing:border-box;display:inline-flex;align-items:center;gap:var(--pt-dimension-200, 4px);overflow:hidden;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;outline:0;color:var(--ptc-input-fg);background:var(--ptc-input-bg)}.pc_input .pc_input__number_steps{grid-template-rows:repeat(2,minmax(0,1fr));display:none;height:100%}.pc_input .pc_input__number_steps .pc_input__number_steps__down,.pc_input .pc_input__number_steps .pc_input__number_steps__up{display:flex;justify-content:center;border-width:var(--pt-stroke-0, 0px);outline:0}.pc_input .pc_input__number_steps .pc_input__number_steps__down:not([data-disabled=true]),.pc_input .pc_input__number_steps .pc_input__number_steps__up:not([data-disabled=true]){cursor:pointer;--ptu-text-opacity:1;color:rgba(var(--pt-fg),var(--ptu-text-opacity));width:var(--ptc-input-step-w);min-width:var(--ptc-input-step-w);max-width:var(--ptc-input-step-w)}.pc_input .pc_input__number_steps .pc_input__number_steps__down:not([data-disabled=true]):hover,.pc_input .pc_input__number_steps .pc_input__number_steps__up:not([data-disabled=true]):hover{--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg-target),var(--ptu-bg-opacity));--ptu-text-opacity:1;color:rgba(var(--pt-fg-target),var(--ptu-text-opacity))}.pc_input .pc_input__number_steps .pc_input__number_steps__down[data-disabled=true],.pc_input .pc_input__number_steps .pc_input__number_steps__up[data-disabled=true]{cursor:not-allowed;--ptu-text-opacity:1;color:rgba(var(--pt-disable-fg),var(--ptu-text-opacity))}.pc_input .pc_input__number_steps .pc_input__number_steps__down{align-items:flex-start}.pc_input .pc_input__number_steps .pc_input__number_steps__up{align-items:flex-end}.pc_input.pc_input--sm{--ptc-input-h: var(--pt-dimension-1200);--ptc-input-roundness: var(--pt-roundness-sm);--ptc-input-px: var(--pt-dimension-200);--ptc-input-step-w: var(--pt-dimension-1000)}.pc_input.pc_input--sm .pc_input__input{height:var(--pt-dimension-700, 14px);min-height:var(--pt-dimension-700, 14px);max-height:var(--pt-dimension-700, 14px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_input.pc_input--sm .pc_input__leading,.pc_input.pc_input--sm .pc_input__trailing{height:var(--pt-dimension-800, 16px);min-height:var(--pt-dimension-800, 16px);max-height:var(--pt-dimension-800, 16px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-500, 10px);line-height:var(--pt-lineheight-8, 12px);letter-spacing:0}.pc_input.pc_input--md{--ptc-input-h: var(--pt-dimension-1600);--ptc-input-roundness: var(--pt-roundness-md);--ptc-input-px: var(--pt-dimension-300);--ptc-input-step-w: var(--pt-dimension-1200)}.pc_input.pc_input--md .pc_input__input{height:var(--pt-dimension-800, 16px);min-height:var(--pt-dimension-800, 16px);max-height:var(--pt-dimension-800, 16px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-700, 14px);line-height:var(--pt-lineheight-6, 16px);letter-spacing:0}.pc_input.pc_input--md .pc_input__leading,.pc_input.pc_input--md .pc_input__trailing{height:var(--pt-dimension-1000, 20px);min-height:var(--pt-dimension-1000, 20px);max-height:var(--pt-dimension-1000, 20px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_input.pc_input--lg{--ptc-input-h: var(--pt-dimension-2000);--ptc-input-px: var(--pt-dimension-400);--ptc-input-roundness: var(--pt-roundness-lg);--ptc-input-step-w: var(--pt-dimension-1600)}.pc_input.pc_input--lg .pc_input__input{height:var(--pt-dimension-800, 16px);min-height:var(--pt-dimension-800, 16px);max-height:var(--pt-dimension-800, 16px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-medium, medium);font-size:var(--pt-dimension-700, 14px);line-height:var(--pt-lineheight-6, 16px);letter-spacing:0}.pc_input.pc_input--lg .pc_input__leading,.pc_input.pc_input--lg .pc_input__trailing{height:var(--pt-dimension-1200, 24px);min-height:var(--pt-dimension-1200, 24px);max-height:var(--pt-dimension-1200, 24px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_input:not(.pc_input--simple){border-radius:var(--ptc-input-roundness);height:var(--ptc-input-h);min-height:var(--ptc-input-h);max-height:var(--ptc-input-h);padding-inline-start:var(--ptc-input-px)}.pc_input:not(.pc_input--simple):not(.pc_input--steps),.pc_input:not(.pc_input--simple).pc_input--steps:not(:hover){padding-inline-end:var(--ptc-input-px)}.pc_input:not(.pc_input--content-fit){width:100%}.pc_input.pc_input--content-fit .pc_input__input{field-sizing:content}.pc_input .pc_input__input{outline:0}.pc_input:not(:disabled):not([data-disabled=true]){--ptc-input-bg: rgba(var(--pt-bg));--ptc-input-trailing: rgba(var(--pt-fg-subtle));--ptc-input-placeholder: rgba(var(--pt-gray-5))}.pc_input:not(:disabled):not([data-disabled=true]):not(:hover){--ptc-input-fg: rgba(var(--pt-fg))}.pc_input:not(:disabled):not([data-disabled=true]):hover{--ptc-input-fg: rgba(var(--pt-fg-target))}.pc_input:not(:disabled):not([data-disabled=true]):focus,.pc_input:not(:disabled):not([data-disabled=true])[data-focus=true],.pc_input:not(:disabled):not([data-disabled=true]):focus-visible{--ptu-shadow:0 0 0 var(--pt-stroke-30) var(--ptu-shadow-color, var(--pt-shadow-color, rgba(var(--pt-focus-br))));box-shadow:var(--ptu-ring-offset-shadow),var(--ptu-ring-shadow),var(--ptu-shadow)}.pc_input:disabled,.pc_input[data-disabled=true]{cursor:not-allowed;--ptc-input-bg: rgba(var(--pt-gray-05));--ptc-input-fg: rgba(var(--pt-disable-fg));--ptc-input-trailing: rgba(var(--pt-disable-fg));--ptc-input-placeholder: rgba(var(--pt-disable-fg))}.pc_input:not(:disabled):not([data-disabled=true]):hover .pc_input__number_steps{display:grid}.pc_input:not(:disabled):not([data-disabled=true]):focus.pc_input--simple,.pc_input:not(:disabled):not([data-disabled=true])[data-focus=true].pc_input--simple,.pc_input:not(:disabled):not([data-disabled=true]):focus-visible.pc_input--simple{box-shadow:none}.pc_input.pc_input--bordered{border-width:1px;border-style:solid;border-color:var(--ptc-input-br)}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not(.pc_input--error):not(.pc_input--success):not(.pc_input--warning):not(:focus):not([data-focus=true]):not(:hover){--ptc-input-br: rgba(var(--pt-br))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not(.pc_input--error):not(.pc_input--success):not(.pc_input--warning):not(:focus):not([data-focus=true]):hover{--ptc-input-br: rgba(var(--pt-primary-6))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]).pc_input--error:not(:focus):not([data-focus=true]):not(:hover){--ptc-input-br: rgba(var(--pt-danger-br))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]).pc_input--error:not(:focus):not([data-focus=true]):hover{--ptc-input-br: rgba(var(--pt-danger-br-target))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]).pc_input--warning:not(:focus):not([data-focus=true]):not(:hover){--ptc-input-br: rgba(var(--pt-warning-br))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]).pc_input--warning:not(:focus):not([data-focus=true]):hover{--ptc-input-br: rgba(var(--pt-warning-br-target))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]).pc_input--success:not(:focus):not([data-focus=true]):not(:hover){--ptc-input-br: rgba(var(--pt-success-br))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]).pc_input--success:not(:focus):not([data-focus=true]):hover{--ptc-input-br: rgba(var(--pt-success-br-target))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):focus,.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true])[data-focus=true],.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):focus-visible{--ptc-input-br: rgba(var(--pt-primary-6))}.pc_input.pc_input--bordered:disabled,.pc_input.pc_input--bordered[data-disabled=true]{--ptc-input-br: rgba(var(--pt-gray-1))}.pc_input:not(.pc_input--bordered){border-width:var(--pt-stroke-0, 0px)}.pc_input .pc_input__input{box-sizing:border-box;min-width:64px;flex-shrink:1;flex-grow:1;overflow:hidden;border-width:var(--pt-stroke-0, 0px);background-color:transparent;padding:var(--pt-dimension-0, 0px);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;outline:0;color:var(--ptc-input-fg)}.pc_input .pc_input__input:-moz-autofill,.pc_input .pc_input__input:-webkit-autofill,.pc_input .pc_input__input:-webkit-autofill:hover,.pc_input .pc_input__input:-webkit-autofill:focus,.pc_input .pc_input__input:-webkit-autofill:active,.pc_input .pc_input__input:autofill,.pc_input .pc_input__input:autofill:hover,.pc_input .pc_input__input:autofill:focus{color:var(--ptc-input-fg);-webkit-text-fill-color:var(--ptc-input-fg);caret-color:var(--ptc-input-fg);background-color:var(--ptc-input-bg);-webkit-box-shadow:0 0 0px 1000px var(--ptc-input-bg) inset;box-shadow:0 0 0 1000px var(--ptc-input-bg) inset;transition:background-color 5000s ease-in-out 0s}.pc_input .pc_input__input:-moz-autofill::placeholder,.pc_input .pc_input__input:-webkit-autofill::placeholder,.pc_input .pc_input__input:-webkit-autofill:hover::placeholder,.pc_input .pc_input__input:-webkit-autofill:focus::placeholder,.pc_input .pc_input__input:-webkit-autofill:active::placeholder,.pc_input .pc_input__input:autofill::placeholder,.pc_input .pc_input__input:autofill:hover::placeholder,.pc_input .pc_input__input:autofill:focus::placeholder{color:var(--ptc-input-placeholder);-webkit-text-fill-color:var(--ptc-input-placeholder)}.pc_input .pc_input__input::placeholder{color:var(--ptc-input-placeholder);-webkit-text-fill-color:var(--ptc-input-placeholder)}.pc_input .pc_input__input_value{pointer-events:none;visibility:hidden;position:absolute;inset:var(--pt-dimension-0, 0px);display:inline;width:fit-content;opacity:0}.pc_input .pc_input__leading,.pc_input .pc_input__trailing{height:100%;display:flex;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.pc_input .pc_input__leading{color:var(--ptc-input-fg)}.pc_input .pc_input__trailing{gap:var(--pt-dimension-200, 4px);color:var(--ptc-input-trailing)}.pc_input .pc_input__trailing .pc_input__clear_icon{cursor:pointer}.pc_input .pc_input__divider{height:var(--pt-dimension-700, 14px);min-height:unset}
1
+ .pc_input{box-sizing:border-box;display:inline-flex;align-items:center;gap:var(--pt-dimension-200, 4px);overflow:hidden;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;outline:0;color:var(--ptc-input-fg);background:var(--ptc-input-bg)}.pc_input .pc_input__number_steps{grid-template-rows:repeat(2,minmax(0,1fr));display:none;height:100%}.pc_input .pc_input__number_steps .pc_input__number_steps__down,.pc_input .pc_input__number_steps .pc_input__number_steps__up{display:flex;justify-content:center;border-width:var(--pt-stroke-0, 0px);outline:0}.pc_input .pc_input__number_steps .pc_input__number_steps__down:not([data-disabled=true]),.pc_input .pc_input__number_steps .pc_input__number_steps__up:not([data-disabled=true]){cursor:pointer;--ptu-text-opacity:1;color:rgba(var(--pt-fg),var(--ptu-text-opacity));width:var(--ptc-input-step-w);min-width:var(--ptc-input-step-w);max-width:var(--ptc-input-step-w)}.pc_input .pc_input__number_steps .pc_input__number_steps__down:not([data-disabled=true]):hover,.pc_input .pc_input__number_steps .pc_input__number_steps__up:not([data-disabled=true]):hover{--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg-target),var(--ptu-bg-opacity));--ptu-text-opacity:1;color:rgba(var(--pt-fg-target),var(--ptu-text-opacity))}.pc_input .pc_input__number_steps .pc_input__number_steps__down[data-disabled=true],.pc_input .pc_input__number_steps .pc_input__number_steps__up[data-disabled=true]{cursor:not-allowed;--ptu-text-opacity:1;color:rgba(var(--pt-disable-fg),var(--ptu-text-opacity))}.pc_input .pc_input__number_steps .pc_input__number_steps__down{align-items:flex-start}.pc_input .pc_input__number_steps .pc_input__number_steps__up{align-items:flex-end}.pc_input.pc_input--sm{--ptc-input-h: var(--pt-dimension-1200);--ptc-input-roundness: var(--pt-roundness-sm);--ptc-input-px: var(--pt-dimension-200);--ptc-input-step-w: var(--pt-dimension-1000)}.pc_input.pc_input--sm .pc_input__input{height:var(--pt-dimension-700, 14px);min-height:var(--pt-dimension-700, 14px);max-height:var(--pt-dimension-700, 14px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_input.pc_input--sm .pc_input__leading,.pc_input.pc_input--sm .pc_input__trailing{height:var(--pt-dimension-800, 16px);min-height:var(--pt-dimension-800, 16px);max-height:var(--pt-dimension-800, 16px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-500, 10px);line-height:var(--pt-lineheight-8, 12px);letter-spacing:0}.pc_input.pc_input--md{--ptc-input-h: var(--pt-dimension-1600);--ptc-input-roundness: var(--pt-roundness-md);--ptc-input-px: var(--pt-dimension-300);--ptc-input-step-w: var(--pt-dimension-1200)}.pc_input.pc_input--md .pc_input__input{height:var(--pt-dimension-800, 16px);min-height:var(--pt-dimension-800, 16px);max-height:var(--pt-dimension-800, 16px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-700, 14px);line-height:var(--pt-lineheight-6, 16px);letter-spacing:0}.pc_input.pc_input--md .pc_input__leading,.pc_input.pc_input--md .pc_input__trailing{height:var(--pt-dimension-1000, 20px);min-height:var(--pt-dimension-1000, 20px);max-height:var(--pt-dimension-1000, 20px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_input.pc_input--lg{--ptc-input-h: var(--pt-dimension-2000);--ptc-input-px: var(--pt-dimension-400);--ptc-input-roundness: var(--pt-roundness-lg);--ptc-input-step-w: var(--pt-dimension-1600)}.pc_input.pc_input--lg .pc_input__input{height:var(--pt-dimension-800, 16px);min-height:var(--pt-dimension-800, 16px);max-height:var(--pt-dimension-800, 16px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-medium, medium);font-size:var(--pt-dimension-700, 14px);line-height:var(--pt-lineheight-6, 16px);letter-spacing:0}.pc_input.pc_input--lg .pc_input__leading,.pc_input.pc_input--lg .pc_input__trailing{height:var(--pt-dimension-1200, 24px);min-height:var(--pt-dimension-1200, 24px);max-height:var(--pt-dimension-1200, 24px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_input:not(.pc_input--simple){border-radius:var(--ptc-input-roundness);height:var(--ptc-input-h);min-height:var(--ptc-input-h);max-height:var(--ptc-input-h);padding-inline-start:var(--ptc-input-px)}.pc_input:not(.pc_input--simple):not(.pc_input--steps),.pc_input:not(.pc_input--simple).pc_input--steps:not(:hover){padding-inline-end:var(--ptc-input-px)}.pc_input:not(.pc_input--content-fit){width:100%}.pc_input.pc_input--content-fit .pc_input__input{field-sizing:content}.pc_input .pc_input__input{outline:0}.pc_input:not(:disabled):not([data-disabled=true]){--ptc-input-bg: rgba(var(--pt-bg));--ptc-input-trailing: rgba(var(--pt-fg-subtle));--ptc-input-placeholder: rgba(var(--pt-gray-5))}.pc_input:not(:disabled):not([data-disabled=true]):not(:hover){--ptc-input-fg: rgba(var(--pt-fg))}.pc_input:not(:disabled):not([data-disabled=true]):hover{--ptc-input-fg: rgba(var(--pt-fg-target))}.pc_input:not(:disabled):not([data-disabled=true]):focus,.pc_input:not(:disabled):not([data-disabled=true])[data-focus=true],.pc_input:not(:disabled):not([data-disabled=true]):focus-visible{--ptu-shadow:0 0 0 var(--pt-stroke-30) var(--ptu-shadow-color, var(--pt-shadow-color, rgba(var(--pt-focus-br))));box-shadow:var(--ptu-ring-offset-shadow),var(--ptu-ring-shadow),var(--ptu-shadow)}.pc_input:disabled,.pc_input[data-disabled=true]{cursor:not-allowed;--ptc-input-bg: rgba(var(--pt-gray-05));--ptc-input-fg: rgba(var(--pt-disable-fg));--ptc-input-trailing: rgba(var(--pt-disable-fg));--ptc-input-placeholder: rgba(var(--pt-disable-fg))}.pc_input:not(:disabled):not([data-disabled=true]):hover .pc_input__number_steps{display:grid}.pc_input:not(:disabled):not([data-disabled=true]):focus.pc_input--simple,.pc_input:not(:disabled):not([data-disabled=true])[data-focus=true].pc_input--simple,.pc_input:not(:disabled):not([data-disabled=true]):focus-visible.pc_input--simple{box-shadow:none}.pc_input.pc_input--bordered{border-width:1px;border-style:solid;border-color:var(--ptc-input-br)}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not(.pc_input--error):not(.pc_input--success):not(.pc_input--warning):not(:focus):not([data-focus=true]):not(:hover){--ptc-input-br: rgba(var(--pt-br))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not(.pc_input--error):not(.pc_input--success):not(.pc_input--warning):not(:focus):not([data-focus=true]):hover{--ptc-input-br: rgba(var(--pt-primary-6))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]).pc_input--error:not(:focus):not([data-focus=true]):not(:hover){--ptc-input-br: rgba(var(--pt-danger-br))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]).pc_input--error:not(:focus):not([data-focus=true]):hover{--ptc-input-br: rgba(var(--pt-danger-br-target))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]).pc_input--warning:not(:focus):not([data-focus=true]):not(:hover){--ptc-input-br: rgba(var(--pt-warning-br))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]).pc_input--warning:not(:focus):not([data-focus=true]):hover{--ptc-input-br: rgba(var(--pt-warning-br-target))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]).pc_input--success:not(:focus):not([data-focus=true]):not(:hover){--ptc-input-br: rgba(var(--pt-success-br))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]).pc_input--success:not(:focus):not([data-focus=true]):hover{--ptc-input-br: rgba(var(--pt-success-br-target))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):focus,.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true])[data-focus=true],.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):focus-visible{--ptc-input-br: rgba(var(--pt-primary-6))}.pc_input.pc_input--bordered:disabled,.pc_input.pc_input--bordered[data-disabled=true]{--ptc-input-br: rgba(var(--pt-gray-1))}.pc_input:not(.pc_input--bordered){border-width:var(--pt-stroke-0, 0px)}.pc_input .pc_input__input{box-sizing:border-box;min-width:64px;flex-shrink:1;flex-grow:1;overflow:hidden;border-width:var(--pt-stroke-0, 0px);padding:var(--pt-dimension-0, 0px);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;outline:0}.pc_input.pc_input--autofill-style .pc_input__input{color:var(--ptc-input-fg)!important;-webkit-text-fill-color:var(--ptc-input-fg)!important;caret-color:var(--ptc-input-fg)!important;background-color:var(--ptc-input-bg)!important;-webkit-box-shadow:0 0 0px 1000px var(--ptc-input-bg) inset!important;box-shadow:0 0 0 1000px var(--ptc-input-bg) inset!important;transition:background-color 5000s ease-in-out 0s!important}.pc_input.pc_input--autofill-style .pc_input__input:-moz-autofill,.pc_input.pc_input--autofill-style .pc_input__input:-webkit-autofill,.pc_input.pc_input--autofill-style .pc_input__input:-webkit-autofill:hover,.pc_input.pc_input--autofill-style .pc_input__input:-webkit-autofill:focus,.pc_input.pc_input--autofill-style .pc_input__input:-webkit-autofill:active,.pc_input.pc_input--autofill-style .pc_input__input:autofill,.pc_input.pc_input--autofill-style .pc_input__input:autofill:hover,.pc_input.pc_input--autofill-style .pc_input__input:autofill:focus{color:var(--ptc-input-fg)!important;-webkit-text-fill-color:var(--ptc-input-fg)!important;caret-color:var(--ptc-input-fg)!important;background-color:var(--ptc-input-bg)!important;-webkit-box-shadow:0 0 0px 1000px var(--ptc-input-bg) inset!important;box-shadow:0 0 0 1000px var(--ptc-input-bg) inset!important;transition:background-color 5000s ease-in-out 0s!important}.pc_input.pc_input--autofill-style .pc_input__input:-moz-autofill::placeholder,.pc_input.pc_input--autofill-style .pc_input__input:-webkit-autofill::placeholder,.pc_input.pc_input--autofill-style .pc_input__input:-webkit-autofill:hover::placeholder,.pc_input.pc_input--autofill-style .pc_input__input:-webkit-autofill:focus::placeholder,.pc_input.pc_input--autofill-style .pc_input__input:-webkit-autofill:active::placeholder,.pc_input.pc_input--autofill-style .pc_input__input:autofill::placeholder,.pc_input.pc_input--autofill-style .pc_input__input:autofill:hover::placeholder,.pc_input.pc_input--autofill-style .pc_input__input:autofill:focus::placeholder{color:var(--ptc-input-placeholder)!important;-webkit-text-fill-color:var(--ptc-input-placeholder)!important}.pc_input.pc_input--autofill-style .pc_input__input::placeholder{color:var(--ptc-input-placeholder)!important;-webkit-text-fill-color:var(--ptc-input-placeholder)!important}.pc_input:not(.pc_input--autofill-style) .pc_input__input{background-color:transparent;color:var(--ptc-input-fg)}.pc_input:not(.pc_input--autofill-style) .pc_input__input:-moz-autofill,.pc_input:not(.pc_input--autofill-style) .pc_input__input:-webkit-autofill,.pc_input:not(.pc_input--autofill-style) .pc_input__input:-webkit-autofill:hover,.pc_input:not(.pc_input--autofill-style) .pc_input__input:-webkit-autofill:focus,.pc_input:not(.pc_input--autofill-style) .pc_input__input:-webkit-autofill:active,.pc_input:not(.pc_input--autofill-style) .pc_input__input:autofill,.pc_input:not(.pc_input--autofill-style) .pc_input__input:autofill:hover,.pc_input:not(.pc_input--autofill-style) .pc_input__input:autofill:focus{color:var(--ptc-input-fg)!important;-webkit-text-fill-color:var(--ptc-input-fg)!important;caret-color:var(--ptc-input-fg)!important;background-color:var(--ptc-input-bg)!important;-webkit-box-shadow:0 0 0px 1000px var(--ptc-input-bg) inset!important;box-shadow:0 0 0 1000px var(--ptc-input-bg) inset!important;transition:background-color 5000s ease-in-out 0s!important}.pc_input:not(.pc_input--autofill-style) .pc_input__input:-moz-autofill::placeholder,.pc_input:not(.pc_input--autofill-style) .pc_input__input:-webkit-autofill::placeholder,.pc_input:not(.pc_input--autofill-style) .pc_input__input:-webkit-autofill:hover::placeholder,.pc_input:not(.pc_input--autofill-style) .pc_input__input:-webkit-autofill:focus::placeholder,.pc_input:not(.pc_input--autofill-style) .pc_input__input:-webkit-autofill:active::placeholder,.pc_input:not(.pc_input--autofill-style) .pc_input__input:autofill::placeholder,.pc_input:not(.pc_input--autofill-style) .pc_input__input:autofill:hover::placeholder,.pc_input:not(.pc_input--autofill-style) .pc_input__input:autofill:focus::placeholder{color:var(--ptc-input-placeholder)!important;-webkit-text-fill-color:var(--ptc-input-placeholder)!important}.pc_input:not(.pc_input--autofill-style) .pc_input__input::placeholder{color:var(--ptc-input-placeholder);-webkit-text-fill-color:var(--ptc-input-placeholder)}.pc_input .pc_input__input_value{pointer-events:none;visibility:hidden;position:absolute;inset:var(--pt-dimension-0, 0px);display:inline;width:fit-content;opacity:0}.pc_input .pc_input__leading,.pc_input .pc_input__trailing{height:100%;display:flex;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.pc_input .pc_input__leading{color:var(--ptc-input-fg)}.pc_input .pc_input__trailing{gap:var(--pt-dimension-200, 4px);color:var(--ptc-input-trailing)}.pc_input .pc_input__trailing .pc_input__clear_icon{cursor:pointer}.pc_input .pc_input__divider{height:var(--pt-dimension-700, 14px);min-height:unset}
package/dist/input.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { addCssToHead, removeCssFromHead, prefix } from "@pantograph/tokens";
2
- const cssText = ".pc_input{box-sizing:border-box;display:inline-flex;align-items:center;gap:var(--pt-dimension-200, 4px);overflow:hidden;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;outline:0;color:var(--ptc-input-fg);background:var(--ptc-input-bg)}.pc_input .pc_input__number_steps{grid-template-rows:repeat(2,minmax(0,1fr));display:none;height:100%}.pc_input .pc_input__number_steps .pc_input__number_steps__down,.pc_input .pc_input__number_steps .pc_input__number_steps__up{display:flex;justify-content:center;border-width:var(--pt-stroke-0, 0px);outline:0}.pc_input .pc_input__number_steps .pc_input__number_steps__down:not([data-disabled=true]),.pc_input .pc_input__number_steps .pc_input__number_steps__up:not([data-disabled=true]){cursor:pointer;--ptu-text-opacity:1;color:rgba(var(--pt-fg),var(--ptu-text-opacity));width:var(--ptc-input-step-w);min-width:var(--ptc-input-step-w);max-width:var(--ptc-input-step-w)}.pc_input .pc_input__number_steps .pc_input__number_steps__down:not([data-disabled=true]):hover,.pc_input .pc_input__number_steps .pc_input__number_steps__up:not([data-disabled=true]):hover{--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg-target),var(--ptu-bg-opacity));--ptu-text-opacity:1;color:rgba(var(--pt-fg-target),var(--ptu-text-opacity))}.pc_input .pc_input__number_steps .pc_input__number_steps__down[data-disabled=true],.pc_input .pc_input__number_steps .pc_input__number_steps__up[data-disabled=true]{cursor:not-allowed;--ptu-text-opacity:1;color:rgba(var(--pt-disable-fg),var(--ptu-text-opacity))}.pc_input .pc_input__number_steps .pc_input__number_steps__down{align-items:flex-start}.pc_input .pc_input__number_steps .pc_input__number_steps__up{align-items:flex-end}.pc_input.pc_input--sm{--ptc-input-h: var(--pt-dimension-1200);--ptc-input-roundness: var(--pt-roundness-sm);--ptc-input-px: var(--pt-dimension-200);--ptc-input-step-w: var(--pt-dimension-1000)}.pc_input.pc_input--sm .pc_input__input{height:var(--pt-dimension-700, 14px);min-height:var(--pt-dimension-700, 14px);max-height:var(--pt-dimension-700, 14px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_input.pc_input--sm .pc_input__leading,.pc_input.pc_input--sm .pc_input__trailing{height:var(--pt-dimension-800, 16px);min-height:var(--pt-dimension-800, 16px);max-height:var(--pt-dimension-800, 16px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-500, 10px);line-height:var(--pt-lineheight-8, 12px);letter-spacing:0}.pc_input.pc_input--md{--ptc-input-h: var(--pt-dimension-1600);--ptc-input-roundness: var(--pt-roundness-md);--ptc-input-px: var(--pt-dimension-300);--ptc-input-step-w: var(--pt-dimension-1200)}.pc_input.pc_input--md .pc_input__input{height:var(--pt-dimension-800, 16px);min-height:var(--pt-dimension-800, 16px);max-height:var(--pt-dimension-800, 16px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-700, 14px);line-height:var(--pt-lineheight-6, 16px);letter-spacing:0}.pc_input.pc_input--md .pc_input__leading,.pc_input.pc_input--md .pc_input__trailing{height:var(--pt-dimension-1000, 20px);min-height:var(--pt-dimension-1000, 20px);max-height:var(--pt-dimension-1000, 20px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_input.pc_input--lg{--ptc-input-h: var(--pt-dimension-2000);--ptc-input-px: var(--pt-dimension-400);--ptc-input-roundness: var(--pt-roundness-lg);--ptc-input-step-w: var(--pt-dimension-1600)}.pc_input.pc_input--lg .pc_input__input{height:var(--pt-dimension-800, 16px);min-height:var(--pt-dimension-800, 16px);max-height:var(--pt-dimension-800, 16px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-medium, medium);font-size:var(--pt-dimension-700, 14px);line-height:var(--pt-lineheight-6, 16px);letter-spacing:0}.pc_input.pc_input--lg .pc_input__leading,.pc_input.pc_input--lg .pc_input__trailing{height:var(--pt-dimension-1200, 24px);min-height:var(--pt-dimension-1200, 24px);max-height:var(--pt-dimension-1200, 24px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_input:not(.pc_input--simple){border-radius:var(--ptc-input-roundness);height:var(--ptc-input-h);min-height:var(--ptc-input-h);max-height:var(--ptc-input-h);padding-inline-start:var(--ptc-input-px)}.pc_input:not(.pc_input--simple):not(.pc_input--steps),.pc_input:not(.pc_input--simple).pc_input--steps:not(:hover){padding-inline-end:var(--ptc-input-px)}.pc_input:not(.pc_input--content-fit){width:100%}.pc_input.pc_input--content-fit .pc_input__input{field-sizing:content}.pc_input .pc_input__input{outline:0}.pc_input:not(:disabled):not([data-disabled=true]){--ptc-input-bg: rgba(var(--pt-bg));--ptc-input-trailing: rgba(var(--pt-fg-subtle));--ptc-input-placeholder: rgba(var(--pt-gray-5))}.pc_input:not(:disabled):not([data-disabled=true]):not(:hover){--ptc-input-fg: rgba(var(--pt-fg))}.pc_input:not(:disabled):not([data-disabled=true]):hover{--ptc-input-fg: rgba(var(--pt-fg-target))}.pc_input:not(:disabled):not([data-disabled=true]):focus,.pc_input:not(:disabled):not([data-disabled=true])[data-focus=true],.pc_input:not(:disabled):not([data-disabled=true]):focus-visible{--ptu-shadow:0 0 0 var(--pt-stroke-30) var(--ptu-shadow-color, var(--pt-shadow-color, rgba(var(--pt-focus-br))));box-shadow:var(--ptu-ring-offset-shadow),var(--ptu-ring-shadow),var(--ptu-shadow)}.pc_input:disabled,.pc_input[data-disabled=true]{cursor:not-allowed;--ptc-input-bg: rgba(var(--pt-gray-05));--ptc-input-fg: rgba(var(--pt-disable-fg));--ptc-input-trailing: rgba(var(--pt-disable-fg));--ptc-input-placeholder: rgba(var(--pt-disable-fg))}.pc_input:not(:disabled):not([data-disabled=true]):hover .pc_input__number_steps{display:grid}.pc_input:not(:disabled):not([data-disabled=true]):focus.pc_input--simple,.pc_input:not(:disabled):not([data-disabled=true])[data-focus=true].pc_input--simple,.pc_input:not(:disabled):not([data-disabled=true]):focus-visible.pc_input--simple{box-shadow:none}.pc_input.pc_input--bordered{border-width:1px;border-style:solid;border-color:var(--ptc-input-br)}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not(.pc_input--error):not(.pc_input--success):not(.pc_input--warning):not(:focus):not([data-focus=true]):not(:hover){--ptc-input-br: rgba(var(--pt-br))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not(.pc_input--error):not(.pc_input--success):not(.pc_input--warning):not(:focus):not([data-focus=true]):hover{--ptc-input-br: rgba(var(--pt-primary-6))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]).pc_input--error:not(:focus):not([data-focus=true]):not(:hover){--ptc-input-br: rgba(var(--pt-danger-br))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]).pc_input--error:not(:focus):not([data-focus=true]):hover{--ptc-input-br: rgba(var(--pt-danger-br-target))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]).pc_input--warning:not(:focus):not([data-focus=true]):not(:hover){--ptc-input-br: rgba(var(--pt-warning-br))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]).pc_input--warning:not(:focus):not([data-focus=true]):hover{--ptc-input-br: rgba(var(--pt-warning-br-target))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]).pc_input--success:not(:focus):not([data-focus=true]):not(:hover){--ptc-input-br: rgba(var(--pt-success-br))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]).pc_input--success:not(:focus):not([data-focus=true]):hover{--ptc-input-br: rgba(var(--pt-success-br-target))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):focus,.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true])[data-focus=true],.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):focus-visible{--ptc-input-br: rgba(var(--pt-primary-6))}.pc_input.pc_input--bordered:disabled,.pc_input.pc_input--bordered[data-disabled=true]{--ptc-input-br: rgba(var(--pt-gray-1))}.pc_input:not(.pc_input--bordered){border-width:var(--pt-stroke-0, 0px)}.pc_input .pc_input__input{box-sizing:border-box;min-width:64px;flex-shrink:1;flex-grow:1;overflow:hidden;border-width:var(--pt-stroke-0, 0px);background-color:transparent;padding:var(--pt-dimension-0, 0px);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;outline:0;color:var(--ptc-input-fg)}.pc_input .pc_input__input:-moz-autofill,.pc_input .pc_input__input:-webkit-autofill,.pc_input .pc_input__input:-webkit-autofill:hover,.pc_input .pc_input__input:-webkit-autofill:focus,.pc_input .pc_input__input:-webkit-autofill:active,.pc_input .pc_input__input:autofill,.pc_input .pc_input__input:autofill:hover,.pc_input .pc_input__input:autofill:focus{color:var(--ptc-input-fg);-webkit-text-fill-color:var(--ptc-input-fg);caret-color:var(--ptc-input-fg);background-color:var(--ptc-input-bg);-webkit-box-shadow:0 0 0px 1000px var(--ptc-input-bg) inset;box-shadow:0 0 0 1000px var(--ptc-input-bg) inset;transition:background-color 5000s ease-in-out 0s}.pc_input .pc_input__input:-moz-autofill::placeholder,.pc_input .pc_input__input:-webkit-autofill::placeholder,.pc_input .pc_input__input:-webkit-autofill:hover::placeholder,.pc_input .pc_input__input:-webkit-autofill:focus::placeholder,.pc_input .pc_input__input:-webkit-autofill:active::placeholder,.pc_input .pc_input__input:autofill::placeholder,.pc_input .pc_input__input:autofill:hover::placeholder,.pc_input .pc_input__input:autofill:focus::placeholder{color:var(--ptc-input-placeholder);-webkit-text-fill-color:var(--ptc-input-placeholder)}.pc_input .pc_input__input::placeholder{color:var(--ptc-input-placeholder);-webkit-text-fill-color:var(--ptc-input-placeholder)}.pc_input .pc_input__input_value{pointer-events:none;visibility:hidden;position:absolute;inset:var(--pt-dimension-0, 0px);display:inline;width:fit-content;opacity:0}.pc_input .pc_input__leading,.pc_input .pc_input__trailing{height:100%;display:flex;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.pc_input .pc_input__leading{color:var(--ptc-input-fg)}.pc_input .pc_input__trailing{gap:var(--pt-dimension-200, 4px);color:var(--ptc-input-trailing)}.pc_input .pc_input__trailing .pc_input__clear_icon{cursor:pointer}.pc_input .pc_input__divider{height:var(--pt-dimension-700, 14px);min-height:unset}\n";
2
+ const cssText = ".pc_input{box-sizing:border-box;display:inline-flex;align-items:center;gap:var(--pt-dimension-200, 4px);overflow:hidden;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;outline:0;color:var(--ptc-input-fg);background:var(--ptc-input-bg)}.pc_input .pc_input__number_steps{grid-template-rows:repeat(2,minmax(0,1fr));display:none;height:100%}.pc_input .pc_input__number_steps .pc_input__number_steps__down,.pc_input .pc_input__number_steps .pc_input__number_steps__up{display:flex;justify-content:center;border-width:var(--pt-stroke-0, 0px);outline:0}.pc_input .pc_input__number_steps .pc_input__number_steps__down:not([data-disabled=true]),.pc_input .pc_input__number_steps .pc_input__number_steps__up:not([data-disabled=true]){cursor:pointer;--ptu-text-opacity:1;color:rgba(var(--pt-fg),var(--ptu-text-opacity));width:var(--ptc-input-step-w);min-width:var(--ptc-input-step-w);max-width:var(--ptc-input-step-w)}.pc_input .pc_input__number_steps .pc_input__number_steps__down:not([data-disabled=true]):hover,.pc_input .pc_input__number_steps .pc_input__number_steps__up:not([data-disabled=true]):hover{--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg-target),var(--ptu-bg-opacity));--ptu-text-opacity:1;color:rgba(var(--pt-fg-target),var(--ptu-text-opacity))}.pc_input .pc_input__number_steps .pc_input__number_steps__down[data-disabled=true],.pc_input .pc_input__number_steps .pc_input__number_steps__up[data-disabled=true]{cursor:not-allowed;--ptu-text-opacity:1;color:rgba(var(--pt-disable-fg),var(--ptu-text-opacity))}.pc_input .pc_input__number_steps .pc_input__number_steps__down{align-items:flex-start}.pc_input .pc_input__number_steps .pc_input__number_steps__up{align-items:flex-end}.pc_input.pc_input--sm{--ptc-input-h: var(--pt-dimension-1200);--ptc-input-roundness: var(--pt-roundness-sm);--ptc-input-px: var(--pt-dimension-200);--ptc-input-step-w: var(--pt-dimension-1000)}.pc_input.pc_input--sm .pc_input__input{height:var(--pt-dimension-700, 14px);min-height:var(--pt-dimension-700, 14px);max-height:var(--pt-dimension-700, 14px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_input.pc_input--sm .pc_input__leading,.pc_input.pc_input--sm .pc_input__trailing{height:var(--pt-dimension-800, 16px);min-height:var(--pt-dimension-800, 16px);max-height:var(--pt-dimension-800, 16px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-500, 10px);line-height:var(--pt-lineheight-8, 12px);letter-spacing:0}.pc_input.pc_input--md{--ptc-input-h: var(--pt-dimension-1600);--ptc-input-roundness: var(--pt-roundness-md);--ptc-input-px: var(--pt-dimension-300);--ptc-input-step-w: var(--pt-dimension-1200)}.pc_input.pc_input--md .pc_input__input{height:var(--pt-dimension-800, 16px);min-height:var(--pt-dimension-800, 16px);max-height:var(--pt-dimension-800, 16px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-700, 14px);line-height:var(--pt-lineheight-6, 16px);letter-spacing:0}.pc_input.pc_input--md .pc_input__leading,.pc_input.pc_input--md .pc_input__trailing{height:var(--pt-dimension-1000, 20px);min-height:var(--pt-dimension-1000, 20px);max-height:var(--pt-dimension-1000, 20px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_input.pc_input--lg{--ptc-input-h: var(--pt-dimension-2000);--ptc-input-px: var(--pt-dimension-400);--ptc-input-roundness: var(--pt-roundness-lg);--ptc-input-step-w: var(--pt-dimension-1600)}.pc_input.pc_input--lg .pc_input__input{height:var(--pt-dimension-800, 16px);min-height:var(--pt-dimension-800, 16px);max-height:var(--pt-dimension-800, 16px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-medium, medium);font-size:var(--pt-dimension-700, 14px);line-height:var(--pt-lineheight-6, 16px);letter-spacing:0}.pc_input.pc_input--lg .pc_input__leading,.pc_input.pc_input--lg .pc_input__trailing{height:var(--pt-dimension-1200, 24px);min-height:var(--pt-dimension-1200, 24px);max-height:var(--pt-dimension-1200, 24px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_input:not(.pc_input--simple){border-radius:var(--ptc-input-roundness);height:var(--ptc-input-h);min-height:var(--ptc-input-h);max-height:var(--ptc-input-h);padding-inline-start:var(--ptc-input-px)}.pc_input:not(.pc_input--simple):not(.pc_input--steps),.pc_input:not(.pc_input--simple).pc_input--steps:not(:hover){padding-inline-end:var(--ptc-input-px)}.pc_input:not(.pc_input--content-fit){width:100%}.pc_input.pc_input--content-fit .pc_input__input{field-sizing:content}.pc_input .pc_input__input{outline:0}.pc_input:not(:disabled):not([data-disabled=true]){--ptc-input-bg: rgba(var(--pt-bg));--ptc-input-trailing: rgba(var(--pt-fg-subtle));--ptc-input-placeholder: rgba(var(--pt-gray-5))}.pc_input:not(:disabled):not([data-disabled=true]):not(:hover){--ptc-input-fg: rgba(var(--pt-fg))}.pc_input:not(:disabled):not([data-disabled=true]):hover{--ptc-input-fg: rgba(var(--pt-fg-target))}.pc_input:not(:disabled):not([data-disabled=true]):focus,.pc_input:not(:disabled):not([data-disabled=true])[data-focus=true],.pc_input:not(:disabled):not([data-disabled=true]):focus-visible{--ptu-shadow:0 0 0 var(--pt-stroke-30) var(--ptu-shadow-color, var(--pt-shadow-color, rgba(var(--pt-focus-br))));box-shadow:var(--ptu-ring-offset-shadow),var(--ptu-ring-shadow),var(--ptu-shadow)}.pc_input:disabled,.pc_input[data-disabled=true]{cursor:not-allowed;--ptc-input-bg: rgba(var(--pt-gray-05));--ptc-input-fg: rgba(var(--pt-disable-fg));--ptc-input-trailing: rgba(var(--pt-disable-fg));--ptc-input-placeholder: rgba(var(--pt-disable-fg))}.pc_input:not(:disabled):not([data-disabled=true]):hover .pc_input__number_steps{display:grid}.pc_input:not(:disabled):not([data-disabled=true]):focus.pc_input--simple,.pc_input:not(:disabled):not([data-disabled=true])[data-focus=true].pc_input--simple,.pc_input:not(:disabled):not([data-disabled=true]):focus-visible.pc_input--simple{box-shadow:none}.pc_input.pc_input--bordered{border-width:1px;border-style:solid;border-color:var(--ptc-input-br)}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not(.pc_input--error):not(.pc_input--success):not(.pc_input--warning):not(:focus):not([data-focus=true]):not(:hover){--ptc-input-br: rgba(var(--pt-br))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not(.pc_input--error):not(.pc_input--success):not(.pc_input--warning):not(:focus):not([data-focus=true]):hover{--ptc-input-br: rgba(var(--pt-primary-6))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]).pc_input--error:not(:focus):not([data-focus=true]):not(:hover){--ptc-input-br: rgba(var(--pt-danger-br))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]).pc_input--error:not(:focus):not([data-focus=true]):hover{--ptc-input-br: rgba(var(--pt-danger-br-target))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]).pc_input--warning:not(:focus):not([data-focus=true]):not(:hover){--ptc-input-br: rgba(var(--pt-warning-br))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]).pc_input--warning:not(:focus):not([data-focus=true]):hover{--ptc-input-br: rgba(var(--pt-warning-br-target))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]).pc_input--success:not(:focus):not([data-focus=true]):not(:hover){--ptc-input-br: rgba(var(--pt-success-br))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]).pc_input--success:not(:focus):not([data-focus=true]):hover{--ptc-input-br: rgba(var(--pt-success-br-target))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):focus,.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true])[data-focus=true],.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):focus-visible{--ptc-input-br: rgba(var(--pt-primary-6))}.pc_input.pc_input--bordered:disabled,.pc_input.pc_input--bordered[data-disabled=true]{--ptc-input-br: rgba(var(--pt-gray-1))}.pc_input:not(.pc_input--bordered){border-width:var(--pt-stroke-0, 0px)}.pc_input .pc_input__input{box-sizing:border-box;min-width:64px;flex-shrink:1;flex-grow:1;overflow:hidden;border-width:var(--pt-stroke-0, 0px);padding:var(--pt-dimension-0, 0px);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;outline:0}.pc_input.pc_input--autofill-style .pc_input__input{color:var(--ptc-input-fg)!important;-webkit-text-fill-color:var(--ptc-input-fg)!important;caret-color:var(--ptc-input-fg)!important;background-color:var(--ptc-input-bg)!important;-webkit-box-shadow:0 0 0px 1000px var(--ptc-input-bg) inset!important;box-shadow:0 0 0 1000px var(--ptc-input-bg) inset!important;transition:background-color 5000s ease-in-out 0s!important}.pc_input.pc_input--autofill-style .pc_input__input:-moz-autofill,.pc_input.pc_input--autofill-style .pc_input__input:-webkit-autofill,.pc_input.pc_input--autofill-style .pc_input__input:-webkit-autofill:hover,.pc_input.pc_input--autofill-style .pc_input__input:-webkit-autofill:focus,.pc_input.pc_input--autofill-style .pc_input__input:-webkit-autofill:active,.pc_input.pc_input--autofill-style .pc_input__input:autofill,.pc_input.pc_input--autofill-style .pc_input__input:autofill:hover,.pc_input.pc_input--autofill-style .pc_input__input:autofill:focus{color:var(--ptc-input-fg)!important;-webkit-text-fill-color:var(--ptc-input-fg)!important;caret-color:var(--ptc-input-fg)!important;background-color:var(--ptc-input-bg)!important;-webkit-box-shadow:0 0 0px 1000px var(--ptc-input-bg) inset!important;box-shadow:0 0 0 1000px var(--ptc-input-bg) inset!important;transition:background-color 5000s ease-in-out 0s!important}.pc_input.pc_input--autofill-style .pc_input__input:-moz-autofill::placeholder,.pc_input.pc_input--autofill-style .pc_input__input:-webkit-autofill::placeholder,.pc_input.pc_input--autofill-style .pc_input__input:-webkit-autofill:hover::placeholder,.pc_input.pc_input--autofill-style .pc_input__input:-webkit-autofill:focus::placeholder,.pc_input.pc_input--autofill-style .pc_input__input:-webkit-autofill:active::placeholder,.pc_input.pc_input--autofill-style .pc_input__input:autofill::placeholder,.pc_input.pc_input--autofill-style .pc_input__input:autofill:hover::placeholder,.pc_input.pc_input--autofill-style .pc_input__input:autofill:focus::placeholder{color:var(--ptc-input-placeholder)!important;-webkit-text-fill-color:var(--ptc-input-placeholder)!important}.pc_input.pc_input--autofill-style .pc_input__input::placeholder{color:var(--ptc-input-placeholder)!important;-webkit-text-fill-color:var(--ptc-input-placeholder)!important}.pc_input:not(.pc_input--autofill-style) .pc_input__input{background-color:transparent;color:var(--ptc-input-fg)}.pc_input:not(.pc_input--autofill-style) .pc_input__input:-moz-autofill,.pc_input:not(.pc_input--autofill-style) .pc_input__input:-webkit-autofill,.pc_input:not(.pc_input--autofill-style) .pc_input__input:-webkit-autofill:hover,.pc_input:not(.pc_input--autofill-style) .pc_input__input:-webkit-autofill:focus,.pc_input:not(.pc_input--autofill-style) .pc_input__input:-webkit-autofill:active,.pc_input:not(.pc_input--autofill-style) .pc_input__input:autofill,.pc_input:not(.pc_input--autofill-style) .pc_input__input:autofill:hover,.pc_input:not(.pc_input--autofill-style) .pc_input__input:autofill:focus{color:var(--ptc-input-fg)!important;-webkit-text-fill-color:var(--ptc-input-fg)!important;caret-color:var(--ptc-input-fg)!important;background-color:var(--ptc-input-bg)!important;-webkit-box-shadow:0 0 0px 1000px var(--ptc-input-bg) inset!important;box-shadow:0 0 0 1000px var(--ptc-input-bg) inset!important;transition:background-color 5000s ease-in-out 0s!important}.pc_input:not(.pc_input--autofill-style) .pc_input__input:-moz-autofill::placeholder,.pc_input:not(.pc_input--autofill-style) .pc_input__input:-webkit-autofill::placeholder,.pc_input:not(.pc_input--autofill-style) .pc_input__input:-webkit-autofill:hover::placeholder,.pc_input:not(.pc_input--autofill-style) .pc_input__input:-webkit-autofill:focus::placeholder,.pc_input:not(.pc_input--autofill-style) .pc_input__input:-webkit-autofill:active::placeholder,.pc_input:not(.pc_input--autofill-style) .pc_input__input:autofill::placeholder,.pc_input:not(.pc_input--autofill-style) .pc_input__input:autofill:hover::placeholder,.pc_input:not(.pc_input--autofill-style) .pc_input__input:autofill:focus::placeholder{color:var(--ptc-input-placeholder)!important;-webkit-text-fill-color:var(--ptc-input-placeholder)!important}.pc_input:not(.pc_input--autofill-style) .pc_input__input::placeholder{color:var(--ptc-input-placeholder);-webkit-text-fill-color:var(--ptc-input-placeholder)}.pc_input .pc_input__input_value{pointer-events:none;visibility:hidden;position:absolute;inset:var(--pt-dimension-0, 0px);display:inline;width:fit-content;opacity:0}.pc_input .pc_input__leading,.pc_input .pc_input__trailing{height:100%;display:flex;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.pc_input .pc_input__leading{color:var(--ptc-input-fg)}.pc_input .pc_input__trailing{gap:var(--pt-dimension-200, 4px);color:var(--ptc-input-trailing)}.pc_input .pc_input__trailing .pc_input__clear_icon{cursor:pointer}.pc_input .pc_input__divider{height:var(--pt-dimension-700, 14px);min-height:unset}\n";
3
3
  const inputId = `${prefix}s-input`;
4
4
  const addInputCss = () => addCssToHead(inputId, cssText);
5
5
  const removeInputCss = () => removeCssFromHead(inputId);
package/dist/input.umd.cjs CHANGED
@@ -1,7 +1,7 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  const { addCssToHead, removeCssFromHead, prefix } = require("@pantograph/tokens");
4
- const cssText = ".pc_input{box-sizing:border-box;display:inline-flex;align-items:center;gap:var(--pt-dimension-200, 4px);overflow:hidden;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;outline:0;color:var(--ptc-input-fg);background:var(--ptc-input-bg)}.pc_input .pc_input__number_steps{grid-template-rows:repeat(2,minmax(0,1fr));display:none;height:100%}.pc_input .pc_input__number_steps .pc_input__number_steps__down,.pc_input .pc_input__number_steps .pc_input__number_steps__up{display:flex;justify-content:center;border-width:var(--pt-stroke-0, 0px);outline:0}.pc_input .pc_input__number_steps .pc_input__number_steps__down:not([data-disabled=true]),.pc_input .pc_input__number_steps .pc_input__number_steps__up:not([data-disabled=true]){cursor:pointer;--ptu-text-opacity:1;color:rgba(var(--pt-fg),var(--ptu-text-opacity));width:var(--ptc-input-step-w);min-width:var(--ptc-input-step-w);max-width:var(--ptc-input-step-w)}.pc_input .pc_input__number_steps .pc_input__number_steps__down:not([data-disabled=true]):hover,.pc_input .pc_input__number_steps .pc_input__number_steps__up:not([data-disabled=true]):hover{--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg-target),var(--ptu-bg-opacity));--ptu-text-opacity:1;color:rgba(var(--pt-fg-target),var(--ptu-text-opacity))}.pc_input .pc_input__number_steps .pc_input__number_steps__down[data-disabled=true],.pc_input .pc_input__number_steps .pc_input__number_steps__up[data-disabled=true]{cursor:not-allowed;--ptu-text-opacity:1;color:rgba(var(--pt-disable-fg),var(--ptu-text-opacity))}.pc_input .pc_input__number_steps .pc_input__number_steps__down{align-items:flex-start}.pc_input .pc_input__number_steps .pc_input__number_steps__up{align-items:flex-end}.pc_input.pc_input--sm{--ptc-input-h: var(--pt-dimension-1200);--ptc-input-roundness: var(--pt-roundness-sm);--ptc-input-px: var(--pt-dimension-200);--ptc-input-step-w: var(--pt-dimension-1000)}.pc_input.pc_input--sm .pc_input__input{height:var(--pt-dimension-700, 14px);min-height:var(--pt-dimension-700, 14px);max-height:var(--pt-dimension-700, 14px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_input.pc_input--sm .pc_input__leading,.pc_input.pc_input--sm .pc_input__trailing{height:var(--pt-dimension-800, 16px);min-height:var(--pt-dimension-800, 16px);max-height:var(--pt-dimension-800, 16px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-500, 10px);line-height:var(--pt-lineheight-8, 12px);letter-spacing:0}.pc_input.pc_input--md{--ptc-input-h: var(--pt-dimension-1600);--ptc-input-roundness: var(--pt-roundness-md);--ptc-input-px: var(--pt-dimension-300);--ptc-input-step-w: var(--pt-dimension-1200)}.pc_input.pc_input--md .pc_input__input{height:var(--pt-dimension-800, 16px);min-height:var(--pt-dimension-800, 16px);max-height:var(--pt-dimension-800, 16px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-700, 14px);line-height:var(--pt-lineheight-6, 16px);letter-spacing:0}.pc_input.pc_input--md .pc_input__leading,.pc_input.pc_input--md .pc_input__trailing{height:var(--pt-dimension-1000, 20px);min-height:var(--pt-dimension-1000, 20px);max-height:var(--pt-dimension-1000, 20px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_input.pc_input--lg{--ptc-input-h: var(--pt-dimension-2000);--ptc-input-px: var(--pt-dimension-400);--ptc-input-roundness: var(--pt-roundness-lg);--ptc-input-step-w: var(--pt-dimension-1600)}.pc_input.pc_input--lg .pc_input__input{height:var(--pt-dimension-800, 16px);min-height:var(--pt-dimension-800, 16px);max-height:var(--pt-dimension-800, 16px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-medium, medium);font-size:var(--pt-dimension-700, 14px);line-height:var(--pt-lineheight-6, 16px);letter-spacing:0}.pc_input.pc_input--lg .pc_input__leading,.pc_input.pc_input--lg .pc_input__trailing{height:var(--pt-dimension-1200, 24px);min-height:var(--pt-dimension-1200, 24px);max-height:var(--pt-dimension-1200, 24px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_input:not(.pc_input--simple){border-radius:var(--ptc-input-roundness);height:var(--ptc-input-h);min-height:var(--ptc-input-h);max-height:var(--ptc-input-h);padding-inline-start:var(--ptc-input-px)}.pc_input:not(.pc_input--simple):not(.pc_input--steps),.pc_input:not(.pc_input--simple).pc_input--steps:not(:hover){padding-inline-end:var(--ptc-input-px)}.pc_input:not(.pc_input--content-fit){width:100%}.pc_input.pc_input--content-fit .pc_input__input{field-sizing:content}.pc_input .pc_input__input{outline:0}.pc_input:not(:disabled):not([data-disabled=true]){--ptc-input-bg: rgba(var(--pt-bg));--ptc-input-trailing: rgba(var(--pt-fg-subtle));--ptc-input-placeholder: rgba(var(--pt-gray-5))}.pc_input:not(:disabled):not([data-disabled=true]):not(:hover){--ptc-input-fg: rgba(var(--pt-fg))}.pc_input:not(:disabled):not([data-disabled=true]):hover{--ptc-input-fg: rgba(var(--pt-fg-target))}.pc_input:not(:disabled):not([data-disabled=true]):focus,.pc_input:not(:disabled):not([data-disabled=true])[data-focus=true],.pc_input:not(:disabled):not([data-disabled=true]):focus-visible{--ptu-shadow:0 0 0 var(--pt-stroke-30) var(--ptu-shadow-color, var(--pt-shadow-color, rgba(var(--pt-focus-br))));box-shadow:var(--ptu-ring-offset-shadow),var(--ptu-ring-shadow),var(--ptu-shadow)}.pc_input:disabled,.pc_input[data-disabled=true]{cursor:not-allowed;--ptc-input-bg: rgba(var(--pt-gray-05));--ptc-input-fg: rgba(var(--pt-disable-fg));--ptc-input-trailing: rgba(var(--pt-disable-fg));--ptc-input-placeholder: rgba(var(--pt-disable-fg))}.pc_input:not(:disabled):not([data-disabled=true]):hover .pc_input__number_steps{display:grid}.pc_input:not(:disabled):not([data-disabled=true]):focus.pc_input--simple,.pc_input:not(:disabled):not([data-disabled=true])[data-focus=true].pc_input--simple,.pc_input:not(:disabled):not([data-disabled=true]):focus-visible.pc_input--simple{box-shadow:none}.pc_input.pc_input--bordered{border-width:1px;border-style:solid;border-color:var(--ptc-input-br)}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not(.pc_input--error):not(.pc_input--success):not(.pc_input--warning):not(:focus):not([data-focus=true]):not(:hover){--ptc-input-br: rgba(var(--pt-br))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not(.pc_input--error):not(.pc_input--success):not(.pc_input--warning):not(:focus):not([data-focus=true]):hover{--ptc-input-br: rgba(var(--pt-primary-6))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]).pc_input--error:not(:focus):not([data-focus=true]):not(:hover){--ptc-input-br: rgba(var(--pt-danger-br))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]).pc_input--error:not(:focus):not([data-focus=true]):hover{--ptc-input-br: rgba(var(--pt-danger-br-target))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]).pc_input--warning:not(:focus):not([data-focus=true]):not(:hover){--ptc-input-br: rgba(var(--pt-warning-br))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]).pc_input--warning:not(:focus):not([data-focus=true]):hover{--ptc-input-br: rgba(var(--pt-warning-br-target))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]).pc_input--success:not(:focus):not([data-focus=true]):not(:hover){--ptc-input-br: rgba(var(--pt-success-br))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]).pc_input--success:not(:focus):not([data-focus=true]):hover{--ptc-input-br: rgba(var(--pt-success-br-target))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):focus,.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true])[data-focus=true],.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):focus-visible{--ptc-input-br: rgba(var(--pt-primary-6))}.pc_input.pc_input--bordered:disabled,.pc_input.pc_input--bordered[data-disabled=true]{--ptc-input-br: rgba(var(--pt-gray-1))}.pc_input:not(.pc_input--bordered){border-width:var(--pt-stroke-0, 0px)}.pc_input .pc_input__input{box-sizing:border-box;min-width:64px;flex-shrink:1;flex-grow:1;overflow:hidden;border-width:var(--pt-stroke-0, 0px);background-color:transparent;padding:var(--pt-dimension-0, 0px);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;outline:0;color:var(--ptc-input-fg)}.pc_input .pc_input__input:-moz-autofill,.pc_input .pc_input__input:-webkit-autofill,.pc_input .pc_input__input:-webkit-autofill:hover,.pc_input .pc_input__input:-webkit-autofill:focus,.pc_input .pc_input__input:-webkit-autofill:active,.pc_input .pc_input__input:autofill,.pc_input .pc_input__input:autofill:hover,.pc_input .pc_input__input:autofill:focus{color:var(--ptc-input-fg);-webkit-text-fill-color:var(--ptc-input-fg);caret-color:var(--ptc-input-fg);background-color:var(--ptc-input-bg);-webkit-box-shadow:0 0 0px 1000px var(--ptc-input-bg) inset;box-shadow:0 0 0 1000px var(--ptc-input-bg) inset;transition:background-color 5000s ease-in-out 0s}.pc_input .pc_input__input:-moz-autofill::placeholder,.pc_input .pc_input__input:-webkit-autofill::placeholder,.pc_input .pc_input__input:-webkit-autofill:hover::placeholder,.pc_input .pc_input__input:-webkit-autofill:focus::placeholder,.pc_input .pc_input__input:-webkit-autofill:active::placeholder,.pc_input .pc_input__input:autofill::placeholder,.pc_input .pc_input__input:autofill:hover::placeholder,.pc_input .pc_input__input:autofill:focus::placeholder{color:var(--ptc-input-placeholder);-webkit-text-fill-color:var(--ptc-input-placeholder)}.pc_input .pc_input__input::placeholder{color:var(--ptc-input-placeholder);-webkit-text-fill-color:var(--ptc-input-placeholder)}.pc_input .pc_input__input_value{pointer-events:none;visibility:hidden;position:absolute;inset:var(--pt-dimension-0, 0px);display:inline;width:fit-content;opacity:0}.pc_input .pc_input__leading,.pc_input .pc_input__trailing{height:100%;display:flex;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.pc_input .pc_input__leading{color:var(--ptc-input-fg)}.pc_input .pc_input__trailing{gap:var(--pt-dimension-200, 4px);color:var(--ptc-input-trailing)}.pc_input .pc_input__trailing .pc_input__clear_icon{cursor:pointer}.pc_input .pc_input__divider{height:var(--pt-dimension-700, 14px);min-height:unset}\n";
4
+ const cssText = ".pc_input{box-sizing:border-box;display:inline-flex;align-items:center;gap:var(--pt-dimension-200, 4px);overflow:hidden;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;outline:0;color:var(--ptc-input-fg);background:var(--ptc-input-bg)}.pc_input .pc_input__number_steps{grid-template-rows:repeat(2,minmax(0,1fr));display:none;height:100%}.pc_input .pc_input__number_steps .pc_input__number_steps__down,.pc_input .pc_input__number_steps .pc_input__number_steps__up{display:flex;justify-content:center;border-width:var(--pt-stroke-0, 0px);outline:0}.pc_input .pc_input__number_steps .pc_input__number_steps__down:not([data-disabled=true]),.pc_input .pc_input__number_steps .pc_input__number_steps__up:not([data-disabled=true]){cursor:pointer;--ptu-text-opacity:1;color:rgba(var(--pt-fg),var(--ptu-text-opacity));width:var(--ptc-input-step-w);min-width:var(--ptc-input-step-w);max-width:var(--ptc-input-step-w)}.pc_input .pc_input__number_steps .pc_input__number_steps__down:not([data-disabled=true]):hover,.pc_input .pc_input__number_steps .pc_input__number_steps__up:not([data-disabled=true]):hover{--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg-target),var(--ptu-bg-opacity));--ptu-text-opacity:1;color:rgba(var(--pt-fg-target),var(--ptu-text-opacity))}.pc_input .pc_input__number_steps .pc_input__number_steps__down[data-disabled=true],.pc_input .pc_input__number_steps .pc_input__number_steps__up[data-disabled=true]{cursor:not-allowed;--ptu-text-opacity:1;color:rgba(var(--pt-disable-fg),var(--ptu-text-opacity))}.pc_input .pc_input__number_steps .pc_input__number_steps__down{align-items:flex-start}.pc_input .pc_input__number_steps .pc_input__number_steps__up{align-items:flex-end}.pc_input.pc_input--sm{--ptc-input-h: var(--pt-dimension-1200);--ptc-input-roundness: var(--pt-roundness-sm);--ptc-input-px: var(--pt-dimension-200);--ptc-input-step-w: var(--pt-dimension-1000)}.pc_input.pc_input--sm .pc_input__input{height:var(--pt-dimension-700, 14px);min-height:var(--pt-dimension-700, 14px);max-height:var(--pt-dimension-700, 14px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_input.pc_input--sm .pc_input__leading,.pc_input.pc_input--sm .pc_input__trailing{height:var(--pt-dimension-800, 16px);min-height:var(--pt-dimension-800, 16px);max-height:var(--pt-dimension-800, 16px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-500, 10px);line-height:var(--pt-lineheight-8, 12px);letter-spacing:0}.pc_input.pc_input--md{--ptc-input-h: var(--pt-dimension-1600);--ptc-input-roundness: var(--pt-roundness-md);--ptc-input-px: var(--pt-dimension-300);--ptc-input-step-w: var(--pt-dimension-1200)}.pc_input.pc_input--md .pc_input__input{height:var(--pt-dimension-800, 16px);min-height:var(--pt-dimension-800, 16px);max-height:var(--pt-dimension-800, 16px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-700, 14px);line-height:var(--pt-lineheight-6, 16px);letter-spacing:0}.pc_input.pc_input--md .pc_input__leading,.pc_input.pc_input--md .pc_input__trailing{height:var(--pt-dimension-1000, 20px);min-height:var(--pt-dimension-1000, 20px);max-height:var(--pt-dimension-1000, 20px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_input.pc_input--lg{--ptc-input-h: var(--pt-dimension-2000);--ptc-input-px: var(--pt-dimension-400);--ptc-input-roundness: var(--pt-roundness-lg);--ptc-input-step-w: var(--pt-dimension-1600)}.pc_input.pc_input--lg .pc_input__input{height:var(--pt-dimension-800, 16px);min-height:var(--pt-dimension-800, 16px);max-height:var(--pt-dimension-800, 16px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-medium, medium);font-size:var(--pt-dimension-700, 14px);line-height:var(--pt-lineheight-6, 16px);letter-spacing:0}.pc_input.pc_input--lg .pc_input__leading,.pc_input.pc_input--lg .pc_input__trailing{height:var(--pt-dimension-1200, 24px);min-height:var(--pt-dimension-1200, 24px);max-height:var(--pt-dimension-1200, 24px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_input:not(.pc_input--simple){border-radius:var(--ptc-input-roundness);height:var(--ptc-input-h);min-height:var(--ptc-input-h);max-height:var(--ptc-input-h);padding-inline-start:var(--ptc-input-px)}.pc_input:not(.pc_input--simple):not(.pc_input--steps),.pc_input:not(.pc_input--simple).pc_input--steps:not(:hover){padding-inline-end:var(--ptc-input-px)}.pc_input:not(.pc_input--content-fit){width:100%}.pc_input.pc_input--content-fit .pc_input__input{field-sizing:content}.pc_input .pc_input__input{outline:0}.pc_input:not(:disabled):not([data-disabled=true]){--ptc-input-bg: rgba(var(--pt-bg));--ptc-input-trailing: rgba(var(--pt-fg-subtle));--ptc-input-placeholder: rgba(var(--pt-gray-5))}.pc_input:not(:disabled):not([data-disabled=true]):not(:hover){--ptc-input-fg: rgba(var(--pt-fg))}.pc_input:not(:disabled):not([data-disabled=true]):hover{--ptc-input-fg: rgba(var(--pt-fg-target))}.pc_input:not(:disabled):not([data-disabled=true]):focus,.pc_input:not(:disabled):not([data-disabled=true])[data-focus=true],.pc_input:not(:disabled):not([data-disabled=true]):focus-visible{--ptu-shadow:0 0 0 var(--pt-stroke-30) var(--ptu-shadow-color, var(--pt-shadow-color, rgba(var(--pt-focus-br))));box-shadow:var(--ptu-ring-offset-shadow),var(--ptu-ring-shadow),var(--ptu-shadow)}.pc_input:disabled,.pc_input[data-disabled=true]{cursor:not-allowed;--ptc-input-bg: rgba(var(--pt-gray-05));--ptc-input-fg: rgba(var(--pt-disable-fg));--ptc-input-trailing: rgba(var(--pt-disable-fg));--ptc-input-placeholder: rgba(var(--pt-disable-fg))}.pc_input:not(:disabled):not([data-disabled=true]):hover .pc_input__number_steps{display:grid}.pc_input:not(:disabled):not([data-disabled=true]):focus.pc_input--simple,.pc_input:not(:disabled):not([data-disabled=true])[data-focus=true].pc_input--simple,.pc_input:not(:disabled):not([data-disabled=true]):focus-visible.pc_input--simple{box-shadow:none}.pc_input.pc_input--bordered{border-width:1px;border-style:solid;border-color:var(--ptc-input-br)}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not(.pc_input--error):not(.pc_input--success):not(.pc_input--warning):not(:focus):not([data-focus=true]):not(:hover){--ptc-input-br: rgba(var(--pt-br))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):not(.pc_input--error):not(.pc_input--success):not(.pc_input--warning):not(:focus):not([data-focus=true]):hover{--ptc-input-br: rgba(var(--pt-primary-6))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]).pc_input--error:not(:focus):not([data-focus=true]):not(:hover){--ptc-input-br: rgba(var(--pt-danger-br))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]).pc_input--error:not(:focus):not([data-focus=true]):hover{--ptc-input-br: rgba(var(--pt-danger-br-target))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]).pc_input--warning:not(:focus):not([data-focus=true]):not(:hover){--ptc-input-br: rgba(var(--pt-warning-br))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]).pc_input--warning:not(:focus):not([data-focus=true]):hover{--ptc-input-br: rgba(var(--pt-warning-br-target))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]).pc_input--success:not(:focus):not([data-focus=true]):not(:hover){--ptc-input-br: rgba(var(--pt-success-br))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]).pc_input--success:not(:focus):not([data-focus=true]):hover{--ptc-input-br: rgba(var(--pt-success-br-target))}.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):focus,.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true])[data-focus=true],.pc_input.pc_input--bordered:not(:disabled):not([data-disabled=true]):focus-visible{--ptc-input-br: rgba(var(--pt-primary-6))}.pc_input.pc_input--bordered:disabled,.pc_input.pc_input--bordered[data-disabled=true]{--ptc-input-br: rgba(var(--pt-gray-1))}.pc_input:not(.pc_input--bordered){border-width:var(--pt-stroke-0, 0px)}.pc_input .pc_input__input{box-sizing:border-box;min-width:64px;flex-shrink:1;flex-grow:1;overflow:hidden;border-width:var(--pt-stroke-0, 0px);padding:var(--pt-dimension-0, 0px);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;outline:0}.pc_input.pc_input--autofill-style .pc_input__input{color:var(--ptc-input-fg)!important;-webkit-text-fill-color:var(--ptc-input-fg)!important;caret-color:var(--ptc-input-fg)!important;background-color:var(--ptc-input-bg)!important;-webkit-box-shadow:0 0 0px 1000px var(--ptc-input-bg) inset!important;box-shadow:0 0 0 1000px var(--ptc-input-bg) inset!important;transition:background-color 5000s ease-in-out 0s!important}.pc_input.pc_input--autofill-style .pc_input__input:-moz-autofill,.pc_input.pc_input--autofill-style .pc_input__input:-webkit-autofill,.pc_input.pc_input--autofill-style .pc_input__input:-webkit-autofill:hover,.pc_input.pc_input--autofill-style .pc_input__input:-webkit-autofill:focus,.pc_input.pc_input--autofill-style .pc_input__input:-webkit-autofill:active,.pc_input.pc_input--autofill-style .pc_input__input:autofill,.pc_input.pc_input--autofill-style .pc_input__input:autofill:hover,.pc_input.pc_input--autofill-style .pc_input__input:autofill:focus{color:var(--ptc-input-fg)!important;-webkit-text-fill-color:var(--ptc-input-fg)!important;caret-color:var(--ptc-input-fg)!important;background-color:var(--ptc-input-bg)!important;-webkit-box-shadow:0 0 0px 1000px var(--ptc-input-bg) inset!important;box-shadow:0 0 0 1000px var(--ptc-input-bg) inset!important;transition:background-color 5000s ease-in-out 0s!important}.pc_input.pc_input--autofill-style .pc_input__input:-moz-autofill::placeholder,.pc_input.pc_input--autofill-style .pc_input__input:-webkit-autofill::placeholder,.pc_input.pc_input--autofill-style .pc_input__input:-webkit-autofill:hover::placeholder,.pc_input.pc_input--autofill-style .pc_input__input:-webkit-autofill:focus::placeholder,.pc_input.pc_input--autofill-style .pc_input__input:-webkit-autofill:active::placeholder,.pc_input.pc_input--autofill-style .pc_input__input:autofill::placeholder,.pc_input.pc_input--autofill-style .pc_input__input:autofill:hover::placeholder,.pc_input.pc_input--autofill-style .pc_input__input:autofill:focus::placeholder{color:var(--ptc-input-placeholder)!important;-webkit-text-fill-color:var(--ptc-input-placeholder)!important}.pc_input.pc_input--autofill-style .pc_input__input::placeholder{color:var(--ptc-input-placeholder)!important;-webkit-text-fill-color:var(--ptc-input-placeholder)!important}.pc_input:not(.pc_input--autofill-style) .pc_input__input{background-color:transparent;color:var(--ptc-input-fg)}.pc_input:not(.pc_input--autofill-style) .pc_input__input:-moz-autofill,.pc_input:not(.pc_input--autofill-style) .pc_input__input:-webkit-autofill,.pc_input:not(.pc_input--autofill-style) .pc_input__input:-webkit-autofill:hover,.pc_input:not(.pc_input--autofill-style) .pc_input__input:-webkit-autofill:focus,.pc_input:not(.pc_input--autofill-style) .pc_input__input:-webkit-autofill:active,.pc_input:not(.pc_input--autofill-style) .pc_input__input:autofill,.pc_input:not(.pc_input--autofill-style) .pc_input__input:autofill:hover,.pc_input:not(.pc_input--autofill-style) .pc_input__input:autofill:focus{color:var(--ptc-input-fg)!important;-webkit-text-fill-color:var(--ptc-input-fg)!important;caret-color:var(--ptc-input-fg)!important;background-color:var(--ptc-input-bg)!important;-webkit-box-shadow:0 0 0px 1000px var(--ptc-input-bg) inset!important;box-shadow:0 0 0 1000px var(--ptc-input-bg) inset!important;transition:background-color 5000s ease-in-out 0s!important}.pc_input:not(.pc_input--autofill-style) .pc_input__input:-moz-autofill::placeholder,.pc_input:not(.pc_input--autofill-style) .pc_input__input:-webkit-autofill::placeholder,.pc_input:not(.pc_input--autofill-style) .pc_input__input:-webkit-autofill:hover::placeholder,.pc_input:not(.pc_input--autofill-style) .pc_input__input:-webkit-autofill:focus::placeholder,.pc_input:not(.pc_input--autofill-style) .pc_input__input:-webkit-autofill:active::placeholder,.pc_input:not(.pc_input--autofill-style) .pc_input__input:autofill::placeholder,.pc_input:not(.pc_input--autofill-style) .pc_input__input:autofill:hover::placeholder,.pc_input:not(.pc_input--autofill-style) .pc_input__input:autofill:focus::placeholder{color:var(--ptc-input-placeholder)!important;-webkit-text-fill-color:var(--ptc-input-placeholder)!important}.pc_input:not(.pc_input--autofill-style) .pc_input__input::placeholder{color:var(--ptc-input-placeholder);-webkit-text-fill-color:var(--ptc-input-placeholder)}.pc_input .pc_input__input_value{pointer-events:none;visibility:hidden;position:absolute;inset:var(--pt-dimension-0, 0px);display:inline;width:fit-content;opacity:0}.pc_input .pc_input__leading,.pc_input .pc_input__trailing{height:100%;display:flex;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.pc_input .pc_input__leading{color:var(--ptc-input-fg)}.pc_input .pc_input__trailing{gap:var(--pt-dimension-200, 4px);color:var(--ptc-input-trailing)}.pc_input .pc_input__trailing .pc_input__clear_icon{cursor:pointer}.pc_input .pc_input__divider{height:var(--pt-dimension-700, 14px);min-height:unset}\n";
5
5
  const inputId = `${prefix}s-input`;
6
6
  const addInputCss = () => addCssToHead(inputId, cssText);
7
7
  const removeInputCss = () => removeCssFromHead(inputId);
package/dist/pin_input.css ADDED
@@ -0,0 +1 @@
1
+ .pc_pin_input{box-sizing:border-box;display:inline-flex;align-items:center;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;outline:0}.pc_pin_input.pc_pin_input--sm{--ptc-pin-input-size: var(--pt-size-sm);--ptc-pin-input-roundness: var(--pt-roundness-sm);gap:var(--pt-dimension-200, 4px)}.pc_pin_input.pc_pin_input--sm .pc_pin_input__input{font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_pin_input.pc_pin_input--md{--ptc-pin-input-size: var(--pt-size-md);--ptc-pin-input-roundness: var(--pt-roundness-md);gap:var(--pt-dimension-300, 6px)}.pc_pin_input.pc_pin_input--md .pc_pin_input__input{font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-700, 14px);line-height:var(--pt-lineheight-6, 16px);letter-spacing:0}.pc_pin_input.pc_pin_input--lg{--ptc-pin-input-size: var(--pt-size-lg);--ptc-pin-input-roundness: var(--pt-roundness-lg);gap:var(--pt-dimension-300, 6px)}.pc_pin_input.pc_pin_input--lg .pc_pin_input__input{font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-medium, medium);font-size:var(--pt-dimension-700, 14px);line-height:var(--pt-lineheight-6, 16px);letter-spacing:0}.pc_pin_input .pc_pin_input__input{box-sizing:border-box;overflow:hidden;border-width:1px;border-style:solid;background-color:transparent;padding:var(--pt-dimension-0, 0px);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;border-radius:var(--ptc-pin-input-roundness);height:var(--ptc-pin-input-size);min-height:var(--ptc-pin-input-size);max-height:var(--ptc-pin-input-size);width:var(--ptc-pin-input-size);min-width:var(--ptc-pin-input-size);max-width:var(--ptc-pin-input-size);outline:0;text-align:center;color:var(--ptc-pin-input-fg);background:var(--ptc-pin-input-bg);border-color:var(--ptc-pin-input-br)}.pc_pin_input .pc_pin_input__input:not(:disabled):not([data-disabled=true]){--ptc-pin-input-bg: rgba(var(--pt-bg));--ptc-pin-input-trailing: rgba(var(--pt-fg-subtle));--ptc-pin-input-placeholder: rgba(var(--pt-gray-5))}.pc_pin_input .pc_pin_input__input:not(:disabled):not([data-disabled=true]):not(:hover){--ptc-pin-input-fg: rgba(var(--pt-fg))}.pc_pin_input .pc_pin_input__input:not(:disabled):not([data-disabled=true]):hover{--ptc-pin-input-fg: rgba(var(--pt-fg-target))}.pc_pin_input .pc_pin_input__input:not(:disabled):not([data-disabled=true]):focus,.pc_pin_input .pc_pin_input__input:not(:disabled):not([data-disabled=true])[data-focus=true],.pc_pin_input .pc_pin_input__input:not(:disabled):not([data-disabled=true]):focus-visible{--ptu-shadow:0 0 0 var(--pt-stroke-30) var(--ptu-shadow-color, var(--pt-shadow-color, rgba(var(--pt-focus-br))));box-shadow:var(--ptu-ring-offset-shadow),var(--ptu-ring-shadow),var(--ptu-shadow)}.pc_pin_input .pc_pin_input__input:disabled,.pc_pin_input .pc_pin_input__input[data-disabled=true]{cursor:not-allowed;--ptc-pin-input-bg: rgba(var(--pt-disable-fill-subtle));--ptc-pin-input-br: rgba(var(--pt-disable-br));--ptc-pin-input-fg: rgba(var(--pt-disable-fg))}.pc_pin_input .pc_pin_input__input:disabled::placeholder,.pc_pin_input .pc_pin_input__input[data-disabled=true]::placeholder{--ptc-pin-input-placeholder: rgba(var(--pt-disable-fg-subtle))}.pc_pin_input .pc_pin_input__input.pc_pin_input__input--bordered{border-width:1px;border-style:solid;border-color:var(--ptc-pin-input-br)}.pc_pin_input .pc_pin_input__input.pc_pin_input__input--bordered:not(:disabled):not([data-disabled=true]):not(.pc_pin_input__input--error):not(.pc_pin_input__input--success):not(.pc_pin_input__input--warning):not(:focus):not([data-focus=true]):not(:hover){--ptc-pin-input-br: rgba(var(--pt-br))}.pc_pin_input .pc_pin_input__input.pc_pin_input__input--bordered:not(:disabled):not([data-disabled=true]):not(.pc_pin_input__input--error):not(.pc_pin_input__input--success):not(.pc_pin_input__input--warning):not(:focus):not([data-focus=true]):hover{--ptc-pin-input-br: rgba(var(--pt-primary-6))}.pc_pin_input .pc_pin_input__input.pc_pin_input__input--bordered:not(:disabled):not([data-disabled=true]).pc_pin_input__input--error:not(:focus):not([data-focus=true]):not(:hover){--ptc-pin-input-br: rgba(var(--pt-danger-br))}.pc_pin_input .pc_pin_input__input.pc_pin_input__input--bordered:not(:disabled):not([data-disabled=true]).pc_pin_input__input--error:not(:focus):not([data-focus=true]):hover{--ptc-pin-input-br: rgba(var(--pt-danger-br-target))}.pc_pin_input .pc_pin_input__input.pc_pin_input__input--bordered:not(:disabled):not([data-disabled=true]).pc_pin_input__input--warning:not(:focus):not([data-focus=true]):not(:hover){--ptc-pin-input-br: rgba(var(--pt-warning-br))}.pc_pin_input .pc_pin_input__input.pc_pin_input__input--bordered:not(:disabled):not([data-disabled=true]).pc_pin_input__input--warning:not(:focus):not([data-focus=true]):hover{--ptc-pin-input-br: rgba(var(--pt-warning-br-target))}.pc_pin_input .pc_pin_input__input.pc_pin_input__input--bordered:not(:disabled):not([data-disabled=true]).pc_pin_input__input--success:not(:focus):not([data-focus=true]):not(:hover){--ptc-pin-input-br: rgba(var(--pt-success-br))}.pc_pin_input .pc_pin_input__input.pc_pin_input__input--bordered:not(:disabled):not([data-disabled=true]).pc_pin_input__input--success:not(:focus):not([data-focus=true]):hover{--ptc-pin-input-br: rgba(var(--pt-success-br-target))}.pc_pin_input .pc_pin_input__input.pc_pin_input__input--bordered:not(:disabled):not([data-disabled=true]):focus,.pc_pin_input .pc_pin_input__input.pc_pin_input__input--bordered:not(:disabled):not([data-disabled=true])[data-focus=true],.pc_pin_input .pc_pin_input__input.pc_pin_input__input--bordered:not(:disabled):not([data-disabled=true]):focus-visible{--ptc-pin-input-br: rgba(var(--pt-primary-6))}.pc_pin_input .pc_pin_input__input.pc_pin_input__input--bordered:disabled,.pc_pin_input .pc_pin_input__input.pc_pin_input__input--bordered[data-disabled=true]{--ptc-pin-input-br: rgba(var(--pt-gray-1))}.pc_pin_input .pc_pin_input__input:not(.pc_pin_input__input--bordered){border-width:var(--pt-stroke-0, 0px)}.pc_pin_input .pc_pin_input__input:-moz-autofill,.pc_pin_input .pc_pin_input__input:-webkit-autofill,.pc_pin_input .pc_pin_input__input:-webkit-autofill:hover,.pc_pin_input .pc_pin_input__input:-webkit-autofill:focus,.pc_pin_input .pc_pin_input__input:-webkit-autofill:active,.pc_pin_input .pc_pin_input__input:autofill,.pc_pin_input .pc_pin_input__input:autofill:hover,.pc_pin_input .pc_pin_input__input:autofill:focus{color:var(--ptc-pin-input-fg)!important;-webkit-text-fill-color:var(--ptc-pin-input-fg)!important;caret-color:var(--ptc-pin-input-fg)!important;background-color:var(--ptc-pin-input-bg)!important;-webkit-box-shadow:0 0 0px 1000px var(--ptc-pin-input-bg) inset!important;box-shadow:0 0 0 1000px var(--ptc-pin-input-bg) inset!important;transition:background-color 5000s ease-in-out 0s!important}.pc_pin_input .pc_pin_input__input:-moz-autofill::placeholder,.pc_pin_input .pc_pin_input__input:-webkit-autofill::placeholder,.pc_pin_input .pc_pin_input__input:-webkit-autofill:hover::placeholder,.pc_pin_input .pc_pin_input__input:-webkit-autofill:focus::placeholder,.pc_pin_input .pc_pin_input__input:-webkit-autofill:active::placeholder,.pc_pin_input .pc_pin_input__input:autofill::placeholder,.pc_pin_input .pc_pin_input__input:autofill:hover::placeholder,.pc_pin_input .pc_pin_input__input:autofill:focus::placeholder{color:var(--ptc-pin-input-placeholder)!important;-webkit-text-fill-color:var(--ptc-pin-input-placeholder)!important}.pc_pin_input .pc_pin_input__input::placeholder{color:var(--ptc-pin-input-placeholder);-webkit-text-fill-color:var(--ptc-pin-input-placeholder)}
package/dist/pin_input.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ declare const pinInputId: string;
2
+ declare const addPinInputCss: () => void;
3
+ declare const removePinInputCss: () => void;
4
+ declare const pinInputCss: string;
5
+ export { pinInputId, addPinInputCss, removePinInputCss, pinInputCss };
package/dist/pin_input.js ADDED
@@ -0,0 +1,7 @@
1
+ import { addCssToHead, removeCssFromHead, prefix } from "@pantograph/tokens";
2
+ const cssText = ".pc_pin_input{box-sizing:border-box;display:inline-flex;align-items:center;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;outline:0}.pc_pin_input.pc_pin_input--sm{--ptc-pin-input-size: var(--pt-size-sm);--ptc-pin-input-roundness: var(--pt-roundness-sm);gap:var(--pt-dimension-200, 4px)}.pc_pin_input.pc_pin_input--sm .pc_pin_input__input{font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_pin_input.pc_pin_input--md{--ptc-pin-input-size: var(--pt-size-md);--ptc-pin-input-roundness: var(--pt-roundness-md);gap:var(--pt-dimension-300, 6px)}.pc_pin_input.pc_pin_input--md .pc_pin_input__input{font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-700, 14px);line-height:var(--pt-lineheight-6, 16px);letter-spacing:0}.pc_pin_input.pc_pin_input--lg{--ptc-pin-input-size: var(--pt-size-lg);--ptc-pin-input-roundness: var(--pt-roundness-lg);gap:var(--pt-dimension-300, 6px)}.pc_pin_input.pc_pin_input--lg .pc_pin_input__input{font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-medium, medium);font-size:var(--pt-dimension-700, 14px);line-height:var(--pt-lineheight-6, 16px);letter-spacing:0}.pc_pin_input .pc_pin_input__input{box-sizing:border-box;overflow:hidden;border-width:1px;border-style:solid;background-color:transparent;padding:var(--pt-dimension-0, 0px);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;border-radius:var(--ptc-pin-input-roundness);height:var(--ptc-pin-input-size);min-height:var(--ptc-pin-input-size);max-height:var(--ptc-pin-input-size);width:var(--ptc-pin-input-size);min-width:var(--ptc-pin-input-size);max-width:var(--ptc-pin-input-size);outline:0;text-align:center;color:var(--ptc-pin-input-fg);background:var(--ptc-pin-input-bg);border-color:var(--ptc-pin-input-br)}.pc_pin_input .pc_pin_input__input:not(:disabled):not([data-disabled=true]){--ptc-pin-input-bg: rgba(var(--pt-bg));--ptc-pin-input-trailing: rgba(var(--pt-fg-subtle));--ptc-pin-input-placeholder: rgba(var(--pt-gray-5))}.pc_pin_input .pc_pin_input__input:not(:disabled):not([data-disabled=true]):not(:hover){--ptc-pin-input-fg: rgba(var(--pt-fg))}.pc_pin_input .pc_pin_input__input:not(:disabled):not([data-disabled=true]):hover{--ptc-pin-input-fg: rgba(var(--pt-fg-target))}.pc_pin_input .pc_pin_input__input:not(:disabled):not([data-disabled=true]):focus,.pc_pin_input .pc_pin_input__input:not(:disabled):not([data-disabled=true])[data-focus=true],.pc_pin_input .pc_pin_input__input:not(:disabled):not([data-disabled=true]):focus-visible{--ptu-shadow:0 0 0 var(--pt-stroke-30) var(--ptu-shadow-color, var(--pt-shadow-color, rgba(var(--pt-focus-br))));box-shadow:var(--ptu-ring-offset-shadow),var(--ptu-ring-shadow),var(--ptu-shadow)}.pc_pin_input .pc_pin_input__input:disabled,.pc_pin_input .pc_pin_input__input[data-disabled=true]{cursor:not-allowed;--ptc-pin-input-bg: rgba(var(--pt-disable-fill-subtle));--ptc-pin-input-br: rgba(var(--pt-disable-br));--ptc-pin-input-fg: rgba(var(--pt-disable-fg))}.pc_pin_input .pc_pin_input__input:disabled::placeholder,.pc_pin_input .pc_pin_input__input[data-disabled=true]::placeholder{--ptc-pin-input-placeholder: rgba(var(--pt-disable-fg-subtle))}.pc_pin_input .pc_pin_input__input.pc_pin_input__input--bordered{border-width:1px;border-style:solid;border-color:var(--ptc-pin-input-br)}.pc_pin_input .pc_pin_input__input.pc_pin_input__input--bordered:not(:disabled):not([data-disabled=true]):not(.pc_pin_input__input--error):not(.pc_pin_input__input--success):not(.pc_pin_input__input--warning):not(:focus):not([data-focus=true]):not(:hover){--ptc-pin-input-br: rgba(var(--pt-br))}.pc_pin_input .pc_pin_input__input.pc_pin_input__input--bordered:not(:disabled):not([data-disabled=true]):not(.pc_pin_input__input--error):not(.pc_pin_input__input--success):not(.pc_pin_input__input--warning):not(:focus):not([data-focus=true]):hover{--ptc-pin-input-br: rgba(var(--pt-primary-6))}.pc_pin_input .pc_pin_input__input.pc_pin_input__input--bordered:not(:disabled):not([data-disabled=true]).pc_pin_input__input--error:not(:focus):not([data-focus=true]):not(:hover){--ptc-pin-input-br: rgba(var(--pt-danger-br))}.pc_pin_input .pc_pin_input__input.pc_pin_input__input--bordered:not(:disabled):not([data-disabled=true]).pc_pin_input__input--error:not(:focus):not([data-focus=true]):hover{--ptc-pin-input-br: rgba(var(--pt-danger-br-target))}.pc_pin_input .pc_pin_input__input.pc_pin_input__input--bordered:not(:disabled):not([data-disabled=true]).pc_pin_input__input--warning:not(:focus):not([data-focus=true]):not(:hover){--ptc-pin-input-br: rgba(var(--pt-warning-br))}.pc_pin_input .pc_pin_input__input.pc_pin_input__input--bordered:not(:disabled):not([data-disabled=true]).pc_pin_input__input--warning:not(:focus):not([data-focus=true]):hover{--ptc-pin-input-br: rgba(var(--pt-warning-br-target))}.pc_pin_input .pc_pin_input__input.pc_pin_input__input--bordered:not(:disabled):not([data-disabled=true]).pc_pin_input__input--success:not(:focus):not([data-focus=true]):not(:hover){--ptc-pin-input-br: rgba(var(--pt-success-br))}.pc_pin_input .pc_pin_input__input.pc_pin_input__input--bordered:not(:disabled):not([data-disabled=true]).pc_pin_input__input--success:not(:focus):not([data-focus=true]):hover{--ptc-pin-input-br: rgba(var(--pt-success-br-target))}.pc_pin_input .pc_pin_input__input.pc_pin_input__input--bordered:not(:disabled):not([data-disabled=true]):focus,.pc_pin_input .pc_pin_input__input.pc_pin_input__input--bordered:not(:disabled):not([data-disabled=true])[data-focus=true],.pc_pin_input .pc_pin_input__input.pc_pin_input__input--bordered:not(:disabled):not([data-disabled=true]):focus-visible{--ptc-pin-input-br: rgba(var(--pt-primary-6))}.pc_pin_input .pc_pin_input__input.pc_pin_input__input--bordered:disabled,.pc_pin_input .pc_pin_input__input.pc_pin_input__input--bordered[data-disabled=true]{--ptc-pin-input-br: rgba(var(--pt-gray-1))}.pc_pin_input .pc_pin_input__input:not(.pc_pin_input__input--bordered){border-width:var(--pt-stroke-0, 0px)}.pc_pin_input .pc_pin_input__input:-moz-autofill,.pc_pin_input .pc_pin_input__input:-webkit-autofill,.pc_pin_input .pc_pin_input__input:-webkit-autofill:hover,.pc_pin_input .pc_pin_input__input:-webkit-autofill:focus,.pc_pin_input .pc_pin_input__input:-webkit-autofill:active,.pc_pin_input .pc_pin_input__input:autofill,.pc_pin_input .pc_pin_input__input:autofill:hover,.pc_pin_input .pc_pin_input__input:autofill:focus{color:var(--ptc-pin-input-fg)!important;-webkit-text-fill-color:var(--ptc-pin-input-fg)!important;caret-color:var(--ptc-pin-input-fg)!important;background-color:var(--ptc-pin-input-bg)!important;-webkit-box-shadow:0 0 0px 1000px var(--ptc-pin-input-bg) inset!important;box-shadow:0 0 0 1000px var(--ptc-pin-input-bg) inset!important;transition:background-color 5000s ease-in-out 0s!important}.pc_pin_input .pc_pin_input__input:-moz-autofill::placeholder,.pc_pin_input .pc_pin_input__input:-webkit-autofill::placeholder,.pc_pin_input .pc_pin_input__input:-webkit-autofill:hover::placeholder,.pc_pin_input .pc_pin_input__input:-webkit-autofill:focus::placeholder,.pc_pin_input .pc_pin_input__input:-webkit-autofill:active::placeholder,.pc_pin_input .pc_pin_input__input:autofill::placeholder,.pc_pin_input .pc_pin_input__input:autofill:hover::placeholder,.pc_pin_input .pc_pin_input__input:autofill:focus::placeholder{color:var(--ptc-pin-input-placeholder)!important;-webkit-text-fill-color:var(--ptc-pin-input-placeholder)!important}.pc_pin_input .pc_pin_input__input::placeholder{color:var(--ptc-pin-input-placeholder);-webkit-text-fill-color:var(--ptc-pin-input-placeholder)}\n";
3
+ const pinInputId = `${prefix}s-pin_input`;
4
+ const addPinInputCss = () => addCssToHead(pinInputId, cssText);
5
+ const removePinInputCss = () => removeCssFromHead(pinInputId);
6
+ const pinInputCss = cssText;
7
+ export { pinInputId, addPinInputCss, removePinInputCss, pinInputCss };
package/dist/pin_input.umd.cjs ADDED
@@ -0,0 +1,12 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ const { addCssToHead, removeCssFromHead, prefix } = require("@pantograph/tokens");
4
+ const cssText = ".pc_pin_input{box-sizing:border-box;display:inline-flex;align-items:center;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;outline:0}.pc_pin_input.pc_pin_input--sm{--ptc-pin-input-size: var(--pt-size-sm);--ptc-pin-input-roundness: var(--pt-roundness-sm);gap:var(--pt-dimension-200, 4px)}.pc_pin_input.pc_pin_input--sm .pc_pin_input__input{font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_pin_input.pc_pin_input--md{--ptc-pin-input-size: var(--pt-size-md);--ptc-pin-input-roundness: var(--pt-roundness-md);gap:var(--pt-dimension-300, 6px)}.pc_pin_input.pc_pin_input--md .pc_pin_input__input{font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-700, 14px);line-height:var(--pt-lineheight-6, 16px);letter-spacing:0}.pc_pin_input.pc_pin_input--lg{--ptc-pin-input-size: var(--pt-size-lg);--ptc-pin-input-roundness: var(--pt-roundness-lg);gap:var(--pt-dimension-300, 6px)}.pc_pin_input.pc_pin_input--lg .pc_pin_input__input{font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-medium, medium);font-size:var(--pt-dimension-700, 14px);line-height:var(--pt-lineheight-6, 16px);letter-spacing:0}.pc_pin_input .pc_pin_input__input{box-sizing:border-box;overflow:hidden;border-width:1px;border-style:solid;background-color:transparent;padding:var(--pt-dimension-0, 0px);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;border-radius:var(--ptc-pin-input-roundness);height:var(--ptc-pin-input-size);min-height:var(--ptc-pin-input-size);max-height:var(--ptc-pin-input-size);width:var(--ptc-pin-input-size);min-width:var(--ptc-pin-input-size);max-width:var(--ptc-pin-input-size);outline:0;text-align:center;color:var(--ptc-pin-input-fg);background:var(--ptc-pin-input-bg);border-color:var(--ptc-pin-input-br)}.pc_pin_input .pc_pin_input__input:not(:disabled):not([data-disabled=true]){--ptc-pin-input-bg: rgba(var(--pt-bg));--ptc-pin-input-trailing: rgba(var(--pt-fg-subtle));--ptc-pin-input-placeholder: rgba(var(--pt-gray-5))}.pc_pin_input .pc_pin_input__input:not(:disabled):not([data-disabled=true]):not(:hover){--ptc-pin-input-fg: rgba(var(--pt-fg))}.pc_pin_input .pc_pin_input__input:not(:disabled):not([data-disabled=true]):hover{--ptc-pin-input-fg: rgba(var(--pt-fg-target))}.pc_pin_input .pc_pin_input__input:not(:disabled):not([data-disabled=true]):focus,.pc_pin_input .pc_pin_input__input:not(:disabled):not([data-disabled=true])[data-focus=true],.pc_pin_input .pc_pin_input__input:not(:disabled):not([data-disabled=true]):focus-visible{--ptu-shadow:0 0 0 var(--pt-stroke-30) var(--ptu-shadow-color, var(--pt-shadow-color, rgba(var(--pt-focus-br))));box-shadow:var(--ptu-ring-offset-shadow),var(--ptu-ring-shadow),var(--ptu-shadow)}.pc_pin_input .pc_pin_input__input:disabled,.pc_pin_input .pc_pin_input__input[data-disabled=true]{cursor:not-allowed;--ptc-pin-input-bg: rgba(var(--pt-disable-fill-subtle));--ptc-pin-input-br: rgba(var(--pt-disable-br));--ptc-pin-input-fg: rgba(var(--pt-disable-fg))}.pc_pin_input .pc_pin_input__input:disabled::placeholder,.pc_pin_input .pc_pin_input__input[data-disabled=true]::placeholder{--ptc-pin-input-placeholder: rgba(var(--pt-disable-fg-subtle))}.pc_pin_input .pc_pin_input__input.pc_pin_input__input--bordered{border-width:1px;border-style:solid;border-color:var(--ptc-pin-input-br)}.pc_pin_input .pc_pin_input__input.pc_pin_input__input--bordered:not(:disabled):not([data-disabled=true]):not(.pc_pin_input__input--error):not(.pc_pin_input__input--success):not(.pc_pin_input__input--warning):not(:focus):not([data-focus=true]):not(:hover){--ptc-pin-input-br: rgba(var(--pt-br))}.pc_pin_input .pc_pin_input__input.pc_pin_input__input--bordered:not(:disabled):not([data-disabled=true]):not(.pc_pin_input__input--error):not(.pc_pin_input__input--success):not(.pc_pin_input__input--warning):not(:focus):not([data-focus=true]):hover{--ptc-pin-input-br: rgba(var(--pt-primary-6))}.pc_pin_input .pc_pin_input__input.pc_pin_input__input--bordered:not(:disabled):not([data-disabled=true]).pc_pin_input__input--error:not(:focus):not([data-focus=true]):not(:hover){--ptc-pin-input-br: rgba(var(--pt-danger-br))}.pc_pin_input .pc_pin_input__input.pc_pin_input__input--bordered:not(:disabled):not([data-disabled=true]).pc_pin_input__input--error:not(:focus):not([data-focus=true]):hover{--ptc-pin-input-br: rgba(var(--pt-danger-br-target))}.pc_pin_input .pc_pin_input__input.pc_pin_input__input--bordered:not(:disabled):not([data-disabled=true]).pc_pin_input__input--warning:not(:focus):not([data-focus=true]):not(:hover){--ptc-pin-input-br: rgba(var(--pt-warning-br))}.pc_pin_input .pc_pin_input__input.pc_pin_input__input--bordered:not(:disabled):not([data-disabled=true]).pc_pin_input__input--warning:not(:focus):not([data-focus=true]):hover{--ptc-pin-input-br: rgba(var(--pt-warning-br-target))}.pc_pin_input .pc_pin_input__input.pc_pin_input__input--bordered:not(:disabled):not([data-disabled=true]).pc_pin_input__input--success:not(:focus):not([data-focus=true]):not(:hover){--ptc-pin-input-br: rgba(var(--pt-success-br))}.pc_pin_input .pc_pin_input__input.pc_pin_input__input--bordered:not(:disabled):not([data-disabled=true]).pc_pin_input__input--success:not(:focus):not([data-focus=true]):hover{--ptc-pin-input-br: rgba(var(--pt-success-br-target))}.pc_pin_input .pc_pin_input__input.pc_pin_input__input--bordered:not(:disabled):not([data-disabled=true]):focus,.pc_pin_input .pc_pin_input__input.pc_pin_input__input--bordered:not(:disabled):not([data-disabled=true])[data-focus=true],.pc_pin_input .pc_pin_input__input.pc_pin_input__input--bordered:not(:disabled):not([data-disabled=true]):focus-visible{--ptc-pin-input-br: rgba(var(--pt-primary-6))}.pc_pin_input .pc_pin_input__input.pc_pin_input__input--bordered:disabled,.pc_pin_input .pc_pin_input__input.pc_pin_input__input--bordered[data-disabled=true]{--ptc-pin-input-br: rgba(var(--pt-gray-1))}.pc_pin_input .pc_pin_input__input:not(.pc_pin_input__input--bordered){border-width:var(--pt-stroke-0, 0px)}.pc_pin_input .pc_pin_input__input:-moz-autofill,.pc_pin_input .pc_pin_input__input:-webkit-autofill,.pc_pin_input .pc_pin_input__input:-webkit-autofill:hover,.pc_pin_input .pc_pin_input__input:-webkit-autofill:focus,.pc_pin_input .pc_pin_input__input:-webkit-autofill:active,.pc_pin_input .pc_pin_input__input:autofill,.pc_pin_input .pc_pin_input__input:autofill:hover,.pc_pin_input .pc_pin_input__input:autofill:focus{color:var(--ptc-pin-input-fg)!important;-webkit-text-fill-color:var(--ptc-pin-input-fg)!important;caret-color:var(--ptc-pin-input-fg)!important;background-color:var(--ptc-pin-input-bg)!important;-webkit-box-shadow:0 0 0px 1000px var(--ptc-pin-input-bg) inset!important;box-shadow:0 0 0 1000px var(--ptc-pin-input-bg) inset!important;transition:background-color 5000s ease-in-out 0s!important}.pc_pin_input .pc_pin_input__input:-moz-autofill::placeholder,.pc_pin_input .pc_pin_input__input:-webkit-autofill::placeholder,.pc_pin_input .pc_pin_input__input:-webkit-autofill:hover::placeholder,.pc_pin_input .pc_pin_input__input:-webkit-autofill:focus::placeholder,.pc_pin_input .pc_pin_input__input:-webkit-autofill:active::placeholder,.pc_pin_input .pc_pin_input__input:autofill::placeholder,.pc_pin_input .pc_pin_input__input:autofill:hover::placeholder,.pc_pin_input .pc_pin_input__input:autofill:focus::placeholder{color:var(--ptc-pin-input-placeholder)!important;-webkit-text-fill-color:var(--ptc-pin-input-placeholder)!important}.pc_pin_input .pc_pin_input__input::placeholder{color:var(--ptc-pin-input-placeholder);-webkit-text-fill-color:var(--ptc-pin-input-placeholder)}\n";
5
+ const pinInputId = `${prefix}s-pin_input`;
6
+ const addPinInputCss = () => addCssToHead(pinInputId, cssText);
7
+ const removePinInputCss = () => removeCssFromHead(pinInputId);
8
+ const pinInputCss = cssText;
9
+ exports.pinInputId = pinInputId;
10
+ exports.addPinInputCss = addPinInputCss;
11
+ exports.removePinInputCss = removePinInputCss;
12
+ exports.pinInputCss = pinInputCss;
package/dist/textarea.css CHANGED
@@ -1 +1 @@
1
- .pc_textarea{box-sizing:border-box;display:block;min-width:var(--pt-dimension-0, 0px);width:100%;outline:0;color:var(--ptc-textarea-fg);background:var(--ptc-textarea-bg);min-height:var(--ptc-textarea-min-h);height:var(--ptc-textarea-h);padding-bottom:var(--ptc-textarea-py);padding-top:var(--ptc-textarea-py);padding-right:var(--ptc-textarea-px);padding-left:var(--ptc-textarea-px);max-height:var(--ptc-textarea-max-h)}.pc_textarea:not(:disabled):not([data-disabled=true]){--ptc-textarea-bg: rgba(var(--pt-bg));--ptc-textarea-trailing: rgba(var(--pt-fg-subtle));--ptc-textarea-placeholder: rgba(var(--pt-gray-5))}.pc_textarea:not(:disabled):not([data-disabled=true]):not(:hover){--ptc-textarea-fg: rgba(var(--pt-fg))}.pc_textarea:not(:disabled):not([data-disabled=true]):hover{--ptc-textarea-fg: rgba(var(--pt-fg-target))}.pc_textarea:not(:disabled):not([data-disabled=true]):focus,.pc_textarea:not(:disabled):not([data-disabled=true])[data-focus=true],.pc_textarea:not(:disabled):not([data-disabled=true]):focus-visible{--ptu-shadow:0 0 0 var(--pt-stroke-30) var(--ptu-shadow-color, var(--pt-shadow-color, rgba(var(--pt-focus-br))));box-shadow:var(--ptu-ring-offset-shadow),var(--ptu-ring-shadow),var(--ptu-shadow)}.pc_textarea:disabled,.pc_textarea[data-disabled=true]{cursor:not-allowed;--ptc-textarea-bg: rgba(var(--pt-gray-05));--ptc-textarea-fg: rgba(var(--pt-disable-fg));--ptc-textarea-trailing: rgba(var(--pt-disable-fg));--ptc-textarea-placeholder: rgba(var(--pt-disable-fg))}.pc_textarea.pc_textarea--bordered{border-width:1px;border-style:solid;border-color:var(--ptc-textarea-br)}.pc_textarea.pc_textarea--bordered:not(:disabled):not([data-disabled=true]):not(.pc_textarea--error):not(.pc_textarea--success):not(.pc_textarea--warning):not(:focus):not([data-focus=true]):not(:hover){--ptc-textarea-br: rgba(var(--pt-br))}.pc_textarea.pc_textarea--bordered:not(:disabled):not([data-disabled=true]):not(.pc_textarea--error):not(.pc_textarea--success):not(.pc_textarea--warning):not(:focus):not([data-focus=true]):hover{--ptc-textarea-br: rgba(var(--pt-primary-6))}.pc_textarea.pc_textarea--bordered:not(:disabled):not([data-disabled=true]).pc_textarea--error:not(:focus):not([data-focus=true]):not(:hover){--ptc-textarea-br: rgba(var(--pt-danger-br))}.pc_textarea.pc_textarea--bordered:not(:disabled):not([data-disabled=true]).pc_textarea--error:not(:focus):not([data-focus=true]):hover{--ptc-textarea-br: rgba(var(--pt-danger-br-target))}.pc_textarea.pc_textarea--bordered:not(:disabled):not([data-disabled=true]).pc_textarea--warning:not(:focus):not([data-focus=true]):not(:hover){--ptc-textarea-br: rgba(var(--pt-warning-br))}.pc_textarea.pc_textarea--bordered:not(:disabled):not([data-disabled=true]).pc_textarea--warning:not(:focus):not([data-focus=true]):hover{--ptc-textarea-br: rgba(var(--pt-warning-br-target))}.pc_textarea.pc_textarea--bordered:not(:disabled):not([data-disabled=true]).pc_textarea--success:not(:focus):not([data-focus=true]):not(:hover){--ptc-textarea-br: rgba(var(--pt-success-br))}.pc_textarea.pc_textarea--bordered:not(:disabled):not([data-disabled=true]).pc_textarea--success:not(:focus):not([data-focus=true]):hover{--ptc-textarea-br: rgba(var(--pt-success-br-target))}.pc_textarea.pc_textarea--bordered:not(:disabled):not([data-disabled=true]):focus,.pc_textarea.pc_textarea--bordered:not(:disabled):not([data-disabled=true])[data-focus=true],.pc_textarea.pc_textarea--bordered:not(:disabled):not([data-disabled=true]):focus-visible{--ptc-textarea-br: rgba(var(--pt-primary-6))}.pc_textarea.pc_textarea--bordered:disabled,.pc_textarea.pc_textarea--bordered[data-disabled=true]{--ptc-textarea-br: rgba(var(--pt-gray-1))}.pc_textarea:not(.pc_textarea--bordered){border-width:var(--pt-stroke-0, 0px)}.pc_textarea.pc_textarea--sm,.pc_textarea.pc_textarea--md{--ptc-textarea-px: var(--pt-dimension-200);--ptc-textarea-py: var(--pt-dimension-100)}.pc_textarea.pc_textarea--sm{--ptc-textarea-min-h: var(--pt-dimension-1200);--ptc-textarea-h: calc(var(--pt-dimension-2000) + var(--pt-dimension-300));border-radius:var(--pt-roundness-sm, 4px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_textarea.pc_textarea--md{--ptc-textarea-min-h: var(--pt-dimension-1600);--ptc-textarea-h: calc(var(--pt-dimension-2400) + var(--pt-dimension-300));border-radius:var(--pt-roundness-md, 6px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-700, 14px);line-height:var(--pt-lineheight-6, 16px);letter-spacing:0}.pc_textarea.pc_textarea--lg{--ptc-textarea-px: var(--pt-dimension-200);--ptc-textarea-py: var(--pt-dimension-200);--ptc-textarea-min-h: var(--pt-dimension-2000);--ptc-textarea-h: calc(var(--pt-dimension-2800) + var(--pt-dimension-300));border-radius:var(--pt-roundness-lg, 8px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-medium, medium);font-size:var(--pt-dimension-700, 14px);line-height:var(--pt-lineheight-6, 16px);letter-spacing:0}.pc_textarea:not(.pc_textarea--auto-size){resize:vertical}.pc_textarea.pc_textarea--auto-size{resize:none}.pc_textarea::placeholder{color:var(--ptc-textarea-placeholder);-webkit-text-fill-color:var(--ptc-textarea-placeholder)}.pc_textarea::-webkit-scrollbar,.pc_textarea ::-webkit-scrollbar{width:4px;height:4px}.pc_textarea::-webkit-scrollbar-thumb,.pc_textarea ::-webkit-scrollbar-thumb{cursor:pointer;background-color:rgba(var(--pt-gray-3));border-radius:2px}.pc_textarea::-webkit-scrollbar-thumb:hover,.pc_textarea ::-webkit-scrollbar-thumb:hover{background-color:rgba(var(--pt-gray-4))}.pc_textarea::-webkit-resizer{background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8' fill='none'><path d='M1 6.65686L6.65685 1.00001' stroke='%236E737C' stroke-linecap='round'/><path d='M4 6.82843L6.82843 4' stroke='%236E737C' stroke-linecap='round'/></svg>") no-repeat center;border:0;display:block;width:8px;height:8px}
1
+ .pc_textarea{box-sizing:border-box;display:block;min-width:var(--pt-dimension-0, 0px);width:100%;outline:0;color:var(--ptc-textarea-fg);background:var(--ptc-textarea-bg);min-height:var(--ptc-textarea-min-h);height:var(--ptc-textarea-h);padding-bottom:var(--ptc-textarea-py);padding-top:var(--ptc-textarea-py);padding-right:var(--ptc-textarea-px);padding-left:var(--ptc-textarea-px);max-height:var(--ptc-textarea-max-h)}.pc_textarea:not(:disabled):not([data-disabled=true]){--ptc-textarea-bg: rgba(var(--pt-bg));--ptc-textarea-trailing: rgba(var(--pt-fg-subtle));--ptc-textarea-placeholder: rgba(var(--pt-gray-5))}.pc_textarea:not(:disabled):not([data-disabled=true]):not(:hover){--ptc-textarea-fg: rgba(var(--pt-fg))}.pc_textarea:not(:disabled):not([data-disabled=true]):hover{--ptc-textarea-fg: rgba(var(--pt-fg-target))}.pc_textarea:not(:disabled):not([data-disabled=true]):focus,.pc_textarea:not(:disabled):not([data-disabled=true])[data-focus=true],.pc_textarea:not(:disabled):not([data-disabled=true]):focus-visible{--ptu-shadow:0 0 0 var(--pt-stroke-30) var(--ptu-shadow-color, var(--pt-shadow-color, rgba(var(--pt-focus-br))));box-shadow:var(--ptu-ring-offset-shadow),var(--ptu-ring-shadow),var(--ptu-shadow)}.pc_textarea:disabled,.pc_textarea[data-disabled=true]{cursor:not-allowed;--ptc-textarea-bg: rgba(var(--pt-gray-05));--ptc-textarea-fg: rgba(var(--pt-disable-fg));--ptc-textarea-trailing: rgba(var(--pt-disable-fg));--ptc-textarea-placeholder: rgba(var(--pt-disable-fg))}.pc_textarea.pc_textarea--bordered{border-width:1px;border-style:solid;border-color:var(--ptc-textarea-br)}.pc_textarea.pc_textarea--bordered:not(:disabled):not([data-disabled=true]):not(.pc_textarea--error):not(.pc_textarea--success):not(.pc_textarea--warning):not(:focus):not([data-focus=true]):not(:hover){--ptc-textarea-br: rgba(var(--pt-br))}.pc_textarea.pc_textarea--bordered:not(:disabled):not([data-disabled=true]):not(.pc_textarea--error):not(.pc_textarea--success):not(.pc_textarea--warning):not(:focus):not([data-focus=true]):hover{--ptc-textarea-br: rgba(var(--pt-primary-6))}.pc_textarea.pc_textarea--bordered:not(:disabled):not([data-disabled=true]).pc_textarea--error:not(:focus):not([data-focus=true]):not(:hover){--ptc-textarea-br: rgba(var(--pt-danger-br))}.pc_textarea.pc_textarea--bordered:not(:disabled):not([data-disabled=true]).pc_textarea--error:not(:focus):not([data-focus=true]):hover{--ptc-textarea-br: rgba(var(--pt-danger-br-target))}.pc_textarea.pc_textarea--bordered:not(:disabled):not([data-disabled=true]).pc_textarea--warning:not(:focus):not([data-focus=true]):not(:hover){--ptc-textarea-br: rgba(var(--pt-warning-br))}.pc_textarea.pc_textarea--bordered:not(:disabled):not([data-disabled=true]).pc_textarea--warning:not(:focus):not([data-focus=true]):hover{--ptc-textarea-br: rgba(var(--pt-warning-br-target))}.pc_textarea.pc_textarea--bordered:not(:disabled):not([data-disabled=true]).pc_textarea--success:not(:focus):not([data-focus=true]):not(:hover){--ptc-textarea-br: rgba(var(--pt-success-br))}.pc_textarea.pc_textarea--bordered:not(:disabled):not([data-disabled=true]).pc_textarea--success:not(:focus):not([data-focus=true]):hover{--ptc-textarea-br: rgba(var(--pt-success-br-target))}.pc_textarea.pc_textarea--bordered:not(:disabled):not([data-disabled=true]):focus,.pc_textarea.pc_textarea--bordered:not(:disabled):not([data-disabled=true])[data-focus=true],.pc_textarea.pc_textarea--bordered:not(:disabled):not([data-disabled=true]):focus-visible{--ptc-textarea-br: rgba(var(--pt-primary-6))}.pc_textarea.pc_textarea--bordered:disabled,.pc_textarea.pc_textarea--bordered[data-disabled=true]{--ptc-textarea-br: rgba(var(--pt-gray-1))}.pc_textarea:not(.pc_textarea--bordered){border-width:var(--pt-stroke-0, 0px)}.pc_textarea.pc_textarea--sm,.pc_textarea.pc_textarea--md{--ptc-textarea-px: var(--pt-dimension-200);--ptc-textarea-py: var(--pt-dimension-100)}.pc_textarea.pc_textarea--sm{--ptc-textarea-min-h: var(--pt-dimension-1200);--ptc-textarea-h: calc(var(--pt-dimension-2000) + var(--pt-dimension-300));border-radius:var(--pt-roundness-sm, 4px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_textarea.pc_textarea--md{--ptc-textarea-min-h: var(--pt-dimension-1600);--ptc-textarea-h: calc(var(--pt-dimension-2400) + var(--pt-dimension-300));border-radius:var(--pt-roundness-md, 6px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-700, 14px);line-height:var(--pt-lineheight-6, 16px);letter-spacing:0}.pc_textarea.pc_textarea--lg{--ptc-textarea-px: var(--pt-dimension-200);--ptc-textarea-py: var(--pt-dimension-200);--ptc-textarea-min-h: var(--pt-dimension-2000);--ptc-textarea-h: calc(var(--pt-dimension-2800) + var(--pt-dimension-300));border-radius:var(--pt-roundness-lg, 8px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-medium, medium);font-size:var(--pt-dimension-700, 14px);line-height:var(--pt-lineheight-6, 16px);letter-spacing:0}.pc_textarea:not(.pc_textarea--auto-size){resize:vertical}.pc_textarea.pc_textarea--auto-size{resize:none}.pc_textarea:-moz-autofill,.pc_textarea:-webkit-autofill,.pc_textarea:-webkit-autofill:hover,.pc_textarea:-webkit-autofill:focus,.pc_textarea:-webkit-autofill:active,.pc_textarea:autofill,.pc_textarea:autofill:hover,.pc_textarea:autofill:focus{color:var(--ptc-textarea-fg)!important;-webkit-text-fill-color:var(--ptc-textarea-fg)!important;caret-color:var(--ptc-textarea-fg)!important;background-color:var(--ptc-textarea-bg)!important;-webkit-box-shadow:0 0 0px 1000px var(--ptc-textarea-bg) inset!important;box-shadow:0 0 0 1000px var(--ptc-textarea-bg) inset!important;transition:background-color 5000s ease-in-out 0s!important}.pc_textarea:-moz-autofill::placeholder,.pc_textarea:-webkit-autofill::placeholder,.pc_textarea:-webkit-autofill:hover::placeholder,.pc_textarea:-webkit-autofill:focus::placeholder,.pc_textarea:-webkit-autofill:active::placeholder,.pc_textarea:autofill::placeholder,.pc_textarea:autofill:hover::placeholder,.pc_textarea:autofill:focus::placeholder{color:var(--ptc-textarea-placeholder)!important;-webkit-text-fill-color:var(--ptc-textarea-placeholder)!important}.pc_textarea::placeholder{color:var(--ptc-textarea-placeholder);-webkit-text-fill-color:var(--ptc-textarea-placeholder)}.pc_textarea::-webkit-scrollbar,.pc_textarea ::-webkit-scrollbar{width:4px;height:4px}.pc_textarea::-webkit-scrollbar-thumb,.pc_textarea ::-webkit-scrollbar-thumb{cursor:pointer;background-color:rgba(var(--pt-gray-3));border-radius:2px}.pc_textarea::-webkit-scrollbar-thumb:hover,.pc_textarea ::-webkit-scrollbar-thumb:hover{background-color:rgba(var(--pt-gray-4))}@supports not selector(::-webkit-scrollbar){.pc_textarea{scrollbar-width:thin;scrollbar-color:rgba(var(--pt-gray-4)) transparent}}.pc_textarea::-webkit-resizer{background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8' fill='none'><path d='M1 6.65686L6.65685 1.00001' stroke='%236E737C' stroke-linecap='round'/><path d='M4 6.82843L6.82843 4' stroke='%236E737C' stroke-linecap='round'/></svg>") no-repeat center;border:0;display:block;width:8px;height:8px}
package/dist/textarea.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { addCssToHead, removeCssFromHead, prefix } from "@pantograph/tokens";
2
- const cssText = ".pc_textarea{box-sizing:border-box;display:block;min-width:var(--pt-dimension-0, 0px);width:100%;outline:0;color:var(--ptc-textarea-fg);background:var(--ptc-textarea-bg);min-height:var(--ptc-textarea-min-h);height:var(--ptc-textarea-h);padding-bottom:var(--ptc-textarea-py);padding-top:var(--ptc-textarea-py);padding-right:var(--ptc-textarea-px);padding-left:var(--ptc-textarea-px);max-height:var(--ptc-textarea-max-h)}.pc_textarea:not(:disabled):not([data-disabled=true]){--ptc-textarea-bg: rgba(var(--pt-bg));--ptc-textarea-trailing: rgba(var(--pt-fg-subtle));--ptc-textarea-placeholder: rgba(var(--pt-gray-5))}.pc_textarea:not(:disabled):not([data-disabled=true]):not(:hover){--ptc-textarea-fg: rgba(var(--pt-fg))}.pc_textarea:not(:disabled):not([data-disabled=true]):hover{--ptc-textarea-fg: rgba(var(--pt-fg-target))}.pc_textarea:not(:disabled):not([data-disabled=true]):focus,.pc_textarea:not(:disabled):not([data-disabled=true])[data-focus=true],.pc_textarea:not(:disabled):not([data-disabled=true]):focus-visible{--ptu-shadow:0 0 0 var(--pt-stroke-30) var(--ptu-shadow-color, var(--pt-shadow-color, rgba(var(--pt-focus-br))));box-shadow:var(--ptu-ring-offset-shadow),var(--ptu-ring-shadow),var(--ptu-shadow)}.pc_textarea:disabled,.pc_textarea[data-disabled=true]{cursor:not-allowed;--ptc-textarea-bg: rgba(var(--pt-gray-05));--ptc-textarea-fg: rgba(var(--pt-disable-fg));--ptc-textarea-trailing: rgba(var(--pt-disable-fg));--ptc-textarea-placeholder: rgba(var(--pt-disable-fg))}.pc_textarea.pc_textarea--bordered{border-width:1px;border-style:solid;border-color:var(--ptc-textarea-br)}.pc_textarea.pc_textarea--bordered:not(:disabled):not([data-disabled=true]):not(.pc_textarea--error):not(.pc_textarea--success):not(.pc_textarea--warning):not(:focus):not([data-focus=true]):not(:hover){--ptc-textarea-br: rgba(var(--pt-br))}.pc_textarea.pc_textarea--bordered:not(:disabled):not([data-disabled=true]):not(.pc_textarea--error):not(.pc_textarea--success):not(.pc_textarea--warning):not(:focus):not([data-focus=true]):hover{--ptc-textarea-br: rgba(var(--pt-primary-6))}.pc_textarea.pc_textarea--bordered:not(:disabled):not([data-disabled=true]).pc_textarea--error:not(:focus):not([data-focus=true]):not(:hover){--ptc-textarea-br: rgba(var(--pt-danger-br))}.pc_textarea.pc_textarea--bordered:not(:disabled):not([data-disabled=true]).pc_textarea--error:not(:focus):not([data-focus=true]):hover{--ptc-textarea-br: rgba(var(--pt-danger-br-target))}.pc_textarea.pc_textarea--bordered:not(:disabled):not([data-disabled=true]).pc_textarea--warning:not(:focus):not([data-focus=true]):not(:hover){--ptc-textarea-br: rgba(var(--pt-warning-br))}.pc_textarea.pc_textarea--bordered:not(:disabled):not([data-disabled=true]).pc_textarea--warning:not(:focus):not([data-focus=true]):hover{--ptc-textarea-br: rgba(var(--pt-warning-br-target))}.pc_textarea.pc_textarea--bordered:not(:disabled):not([data-disabled=true]).pc_textarea--success:not(:focus):not([data-focus=true]):not(:hover){--ptc-textarea-br: rgba(var(--pt-success-br))}.pc_textarea.pc_textarea--bordered:not(:disabled):not([data-disabled=true]).pc_textarea--success:not(:focus):not([data-focus=true]):hover{--ptc-textarea-br: rgba(var(--pt-success-br-target))}.pc_textarea.pc_textarea--bordered:not(:disabled):not([data-disabled=true]):focus,.pc_textarea.pc_textarea--bordered:not(:disabled):not([data-disabled=true])[data-focus=true],.pc_textarea.pc_textarea--bordered:not(:disabled):not([data-disabled=true]):focus-visible{--ptc-textarea-br: rgba(var(--pt-primary-6))}.pc_textarea.pc_textarea--bordered:disabled,.pc_textarea.pc_textarea--bordered[data-disabled=true]{--ptc-textarea-br: rgba(var(--pt-gray-1))}.pc_textarea:not(.pc_textarea--bordered){border-width:var(--pt-stroke-0, 0px)}.pc_textarea.pc_textarea--sm,.pc_textarea.pc_textarea--md{--ptc-textarea-px: var(--pt-dimension-200);--ptc-textarea-py: var(--pt-dimension-100)}.pc_textarea.pc_textarea--sm{--ptc-textarea-min-h: var(--pt-dimension-1200);--ptc-textarea-h: calc(var(--pt-dimension-2000) + var(--pt-dimension-300));border-radius:var(--pt-roundness-sm, 4px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_textarea.pc_textarea--md{--ptc-textarea-min-h: var(--pt-dimension-1600);--ptc-textarea-h: calc(var(--pt-dimension-2400) + var(--pt-dimension-300));border-radius:var(--pt-roundness-md, 6px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-700, 14px);line-height:var(--pt-lineheight-6, 16px);letter-spacing:0}.pc_textarea.pc_textarea--lg{--ptc-textarea-px: var(--pt-dimension-200);--ptc-textarea-py: var(--pt-dimension-200);--ptc-textarea-min-h: var(--pt-dimension-2000);--ptc-textarea-h: calc(var(--pt-dimension-2800) + var(--pt-dimension-300));border-radius:var(--pt-roundness-lg, 8px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-medium, medium);font-size:var(--pt-dimension-700, 14px);line-height:var(--pt-lineheight-6, 16px);letter-spacing:0}.pc_textarea:not(.pc_textarea--auto-size){resize:vertical}.pc_textarea.pc_textarea--auto-size{resize:none}.pc_textarea::placeholder{color:var(--ptc-textarea-placeholder);-webkit-text-fill-color:var(--ptc-textarea-placeholder)}.pc_textarea::-webkit-scrollbar,.pc_textarea ::-webkit-scrollbar{width:4px;height:4px}.pc_textarea::-webkit-scrollbar-thumb,.pc_textarea ::-webkit-scrollbar-thumb{cursor:pointer;background-color:rgba(var(--pt-gray-3));border-radius:2px}.pc_textarea::-webkit-scrollbar-thumb:hover,.pc_textarea ::-webkit-scrollbar-thumb:hover{background-color:rgba(var(--pt-gray-4))}.pc_textarea::-webkit-resizer{background:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8' fill='none'><path d='M1 6.65686L6.65685 1.00001' stroke='%236E737C' stroke-linecap='round'/><path d='M4 6.82843L6.82843 4' stroke='%236E737C' stroke-linecap='round'/></svg>\") no-repeat center;border:0;display:block;width:8px;height:8px}\n";
2
+ const cssText = ".pc_textarea{box-sizing:border-box;display:block;min-width:var(--pt-dimension-0, 0px);width:100%;outline:0;color:var(--ptc-textarea-fg);background:var(--ptc-textarea-bg);min-height:var(--ptc-textarea-min-h);height:var(--ptc-textarea-h);padding-bottom:var(--ptc-textarea-py);padding-top:var(--ptc-textarea-py);padding-right:var(--ptc-textarea-px);padding-left:var(--ptc-textarea-px);max-height:var(--ptc-textarea-max-h)}.pc_textarea:not(:disabled):not([data-disabled=true]){--ptc-textarea-bg: rgba(var(--pt-bg));--ptc-textarea-trailing: rgba(var(--pt-fg-subtle));--ptc-textarea-placeholder: rgba(var(--pt-gray-5))}.pc_textarea:not(:disabled):not([data-disabled=true]):not(:hover){--ptc-textarea-fg: rgba(var(--pt-fg))}.pc_textarea:not(:disabled):not([data-disabled=true]):hover{--ptc-textarea-fg: rgba(var(--pt-fg-target))}.pc_textarea:not(:disabled):not([data-disabled=true]):focus,.pc_textarea:not(:disabled):not([data-disabled=true])[data-focus=true],.pc_textarea:not(:disabled):not([data-disabled=true]):focus-visible{--ptu-shadow:0 0 0 var(--pt-stroke-30) var(--ptu-shadow-color, var(--pt-shadow-color, rgba(var(--pt-focus-br))));box-shadow:var(--ptu-ring-offset-shadow),var(--ptu-ring-shadow),var(--ptu-shadow)}.pc_textarea:disabled,.pc_textarea[data-disabled=true]{cursor:not-allowed;--ptc-textarea-bg: rgba(var(--pt-gray-05));--ptc-textarea-fg: rgba(var(--pt-disable-fg));--ptc-textarea-trailing: rgba(var(--pt-disable-fg));--ptc-textarea-placeholder: rgba(var(--pt-disable-fg))}.pc_textarea.pc_textarea--bordered{border-width:1px;border-style:solid;border-color:var(--ptc-textarea-br)}.pc_textarea.pc_textarea--bordered:not(:disabled):not([data-disabled=true]):not(.pc_textarea--error):not(.pc_textarea--success):not(.pc_textarea--warning):not(:focus):not([data-focus=true]):not(:hover){--ptc-textarea-br: rgba(var(--pt-br))}.pc_textarea.pc_textarea--bordered:not(:disabled):not([data-disabled=true]):not(.pc_textarea--error):not(.pc_textarea--success):not(.pc_textarea--warning):not(:focus):not([data-focus=true]):hover{--ptc-textarea-br: rgba(var(--pt-primary-6))}.pc_textarea.pc_textarea--bordered:not(:disabled):not([data-disabled=true]).pc_textarea--error:not(:focus):not([data-focus=true]):not(:hover){--ptc-textarea-br: rgba(var(--pt-danger-br))}.pc_textarea.pc_textarea--bordered:not(:disabled):not([data-disabled=true]).pc_textarea--error:not(:focus):not([data-focus=true]):hover{--ptc-textarea-br: rgba(var(--pt-danger-br-target))}.pc_textarea.pc_textarea--bordered:not(:disabled):not([data-disabled=true]).pc_textarea--warning:not(:focus):not([data-focus=true]):not(:hover){--ptc-textarea-br: rgba(var(--pt-warning-br))}.pc_textarea.pc_textarea--bordered:not(:disabled):not([data-disabled=true]).pc_textarea--warning:not(:focus):not([data-focus=true]):hover{--ptc-textarea-br: rgba(var(--pt-warning-br-target))}.pc_textarea.pc_textarea--bordered:not(:disabled):not([data-disabled=true]).pc_textarea--success:not(:focus):not([data-focus=true]):not(:hover){--ptc-textarea-br: rgba(var(--pt-success-br))}.pc_textarea.pc_textarea--bordered:not(:disabled):not([data-disabled=true]).pc_textarea--success:not(:focus):not([data-focus=true]):hover{--ptc-textarea-br: rgba(var(--pt-success-br-target))}.pc_textarea.pc_textarea--bordered:not(:disabled):not([data-disabled=true]):focus,.pc_textarea.pc_textarea--bordered:not(:disabled):not([data-disabled=true])[data-focus=true],.pc_textarea.pc_textarea--bordered:not(:disabled):not([data-disabled=true]):focus-visible{--ptc-textarea-br: rgba(var(--pt-primary-6))}.pc_textarea.pc_textarea--bordered:disabled,.pc_textarea.pc_textarea--bordered[data-disabled=true]{--ptc-textarea-br: rgba(var(--pt-gray-1))}.pc_textarea:not(.pc_textarea--bordered){border-width:var(--pt-stroke-0, 0px)}.pc_textarea.pc_textarea--sm,.pc_textarea.pc_textarea--md{--ptc-textarea-px: var(--pt-dimension-200);--ptc-textarea-py: var(--pt-dimension-100)}.pc_textarea.pc_textarea--sm{--ptc-textarea-min-h: var(--pt-dimension-1200);--ptc-textarea-h: calc(var(--pt-dimension-2000) + var(--pt-dimension-300));border-radius:var(--pt-roundness-sm, 4px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_textarea.pc_textarea--md{--ptc-textarea-min-h: var(--pt-dimension-1600);--ptc-textarea-h: calc(var(--pt-dimension-2400) + var(--pt-dimension-300));border-radius:var(--pt-roundness-md, 6px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-700, 14px);line-height:var(--pt-lineheight-6, 16px);letter-spacing:0}.pc_textarea.pc_textarea--lg{--ptc-textarea-px: var(--pt-dimension-200);--ptc-textarea-py: var(--pt-dimension-200);--ptc-textarea-min-h: var(--pt-dimension-2000);--ptc-textarea-h: calc(var(--pt-dimension-2800) + var(--pt-dimension-300));border-radius:var(--pt-roundness-lg, 8px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-medium, medium);font-size:var(--pt-dimension-700, 14px);line-height:var(--pt-lineheight-6, 16px);letter-spacing:0}.pc_textarea:not(.pc_textarea--auto-size){resize:vertical}.pc_textarea.pc_textarea--auto-size{resize:none}.pc_textarea:-moz-autofill,.pc_textarea:-webkit-autofill,.pc_textarea:-webkit-autofill:hover,.pc_textarea:-webkit-autofill:focus,.pc_textarea:-webkit-autofill:active,.pc_textarea:autofill,.pc_textarea:autofill:hover,.pc_textarea:autofill:focus{color:var(--ptc-textarea-fg)!important;-webkit-text-fill-color:var(--ptc-textarea-fg)!important;caret-color:var(--ptc-textarea-fg)!important;background-color:var(--ptc-textarea-bg)!important;-webkit-box-shadow:0 0 0px 1000px var(--ptc-textarea-bg) inset!important;box-shadow:0 0 0 1000px var(--ptc-textarea-bg) inset!important;transition:background-color 5000s ease-in-out 0s!important}.pc_textarea:-moz-autofill::placeholder,.pc_textarea:-webkit-autofill::placeholder,.pc_textarea:-webkit-autofill:hover::placeholder,.pc_textarea:-webkit-autofill:focus::placeholder,.pc_textarea:-webkit-autofill:active::placeholder,.pc_textarea:autofill::placeholder,.pc_textarea:autofill:hover::placeholder,.pc_textarea:autofill:focus::placeholder{color:var(--ptc-textarea-placeholder)!important;-webkit-text-fill-color:var(--ptc-textarea-placeholder)!important}.pc_textarea::placeholder{color:var(--ptc-textarea-placeholder);-webkit-text-fill-color:var(--ptc-textarea-placeholder)}.pc_textarea::-webkit-scrollbar,.pc_textarea ::-webkit-scrollbar{width:4px;height:4px}.pc_textarea::-webkit-scrollbar-thumb,.pc_textarea ::-webkit-scrollbar-thumb{cursor:pointer;background-color:rgba(var(--pt-gray-3));border-radius:2px}.pc_textarea::-webkit-scrollbar-thumb:hover,.pc_textarea ::-webkit-scrollbar-thumb:hover{background-color:rgba(var(--pt-gray-4))}@supports not selector(::-webkit-scrollbar){.pc_textarea{scrollbar-width:thin;scrollbar-color:rgba(var(--pt-gray-4)) transparent}}.pc_textarea::-webkit-resizer{background:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8' fill='none'><path d='M1 6.65686L6.65685 1.00001' stroke='%236E737C' stroke-linecap='round'/><path d='M4 6.82843L6.82843 4' stroke='%236E737C' stroke-linecap='round'/></svg>\") no-repeat center;border:0;display:block;width:8px;height:8px}\n";
3
3
  const textareaId = `${prefix}s-textarea`;
4
4
  const addTextareaCss = () => addCssToHead(textareaId, cssText);
5
5
  const removeTextareaCss = () => removeCssFromHead(textareaId);
package/dist/textarea.umd.cjs CHANGED
@@ -1,7 +1,7 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  const { addCssToHead, removeCssFromHead, prefix } = require("@pantograph/tokens");
4
- const cssText = ".pc_textarea{box-sizing:border-box;display:block;min-width:var(--pt-dimension-0, 0px);width:100%;outline:0;color:var(--ptc-textarea-fg);background:var(--ptc-textarea-bg);min-height:var(--ptc-textarea-min-h);height:var(--ptc-textarea-h);padding-bottom:var(--ptc-textarea-py);padding-top:var(--ptc-textarea-py);padding-right:var(--ptc-textarea-px);padding-left:var(--ptc-textarea-px);max-height:var(--ptc-textarea-max-h)}.pc_textarea:not(:disabled):not([data-disabled=true]){--ptc-textarea-bg: rgba(var(--pt-bg));--ptc-textarea-trailing: rgba(var(--pt-fg-subtle));--ptc-textarea-placeholder: rgba(var(--pt-gray-5))}.pc_textarea:not(:disabled):not([data-disabled=true]):not(:hover){--ptc-textarea-fg: rgba(var(--pt-fg))}.pc_textarea:not(:disabled):not([data-disabled=true]):hover{--ptc-textarea-fg: rgba(var(--pt-fg-target))}.pc_textarea:not(:disabled):not([data-disabled=true]):focus,.pc_textarea:not(:disabled):not([data-disabled=true])[data-focus=true],.pc_textarea:not(:disabled):not([data-disabled=true]):focus-visible{--ptu-shadow:0 0 0 var(--pt-stroke-30) var(--ptu-shadow-color, var(--pt-shadow-color, rgba(var(--pt-focus-br))));box-shadow:var(--ptu-ring-offset-shadow),var(--ptu-ring-shadow),var(--ptu-shadow)}.pc_textarea:disabled,.pc_textarea[data-disabled=true]{cursor:not-allowed;--ptc-textarea-bg: rgba(var(--pt-gray-05));--ptc-textarea-fg: rgba(var(--pt-disable-fg));--ptc-textarea-trailing: rgba(var(--pt-disable-fg));--ptc-textarea-placeholder: rgba(var(--pt-disable-fg))}.pc_textarea.pc_textarea--bordered{border-width:1px;border-style:solid;border-color:var(--ptc-textarea-br)}.pc_textarea.pc_textarea--bordered:not(:disabled):not([data-disabled=true]):not(.pc_textarea--error):not(.pc_textarea--success):not(.pc_textarea--warning):not(:focus):not([data-focus=true]):not(:hover){--ptc-textarea-br: rgba(var(--pt-br))}.pc_textarea.pc_textarea--bordered:not(:disabled):not([data-disabled=true]):not(.pc_textarea--error):not(.pc_textarea--success):not(.pc_textarea--warning):not(:focus):not([data-focus=true]):hover{--ptc-textarea-br: rgba(var(--pt-primary-6))}.pc_textarea.pc_textarea--bordered:not(:disabled):not([data-disabled=true]).pc_textarea--error:not(:focus):not([data-focus=true]):not(:hover){--ptc-textarea-br: rgba(var(--pt-danger-br))}.pc_textarea.pc_textarea--bordered:not(:disabled):not([data-disabled=true]).pc_textarea--error:not(:focus):not([data-focus=true]):hover{--ptc-textarea-br: rgba(var(--pt-danger-br-target))}.pc_textarea.pc_textarea--bordered:not(:disabled):not([data-disabled=true]).pc_textarea--warning:not(:focus):not([data-focus=true]):not(:hover){--ptc-textarea-br: rgba(var(--pt-warning-br))}.pc_textarea.pc_textarea--bordered:not(:disabled):not([data-disabled=true]).pc_textarea--warning:not(:focus):not([data-focus=true]):hover{--ptc-textarea-br: rgba(var(--pt-warning-br-target))}.pc_textarea.pc_textarea--bordered:not(:disabled):not([data-disabled=true]).pc_textarea--success:not(:focus):not([data-focus=true]):not(:hover){--ptc-textarea-br: rgba(var(--pt-success-br))}.pc_textarea.pc_textarea--bordered:not(:disabled):not([data-disabled=true]).pc_textarea--success:not(:focus):not([data-focus=true]):hover{--ptc-textarea-br: rgba(var(--pt-success-br-target))}.pc_textarea.pc_textarea--bordered:not(:disabled):not([data-disabled=true]):focus,.pc_textarea.pc_textarea--bordered:not(:disabled):not([data-disabled=true])[data-focus=true],.pc_textarea.pc_textarea--bordered:not(:disabled):not([data-disabled=true]):focus-visible{--ptc-textarea-br: rgba(var(--pt-primary-6))}.pc_textarea.pc_textarea--bordered:disabled,.pc_textarea.pc_textarea--bordered[data-disabled=true]{--ptc-textarea-br: rgba(var(--pt-gray-1))}.pc_textarea:not(.pc_textarea--bordered){border-width:var(--pt-stroke-0, 0px)}.pc_textarea.pc_textarea--sm,.pc_textarea.pc_textarea--md{--ptc-textarea-px: var(--pt-dimension-200);--ptc-textarea-py: var(--pt-dimension-100)}.pc_textarea.pc_textarea--sm{--ptc-textarea-min-h: var(--pt-dimension-1200);--ptc-textarea-h: calc(var(--pt-dimension-2000) + var(--pt-dimension-300));border-radius:var(--pt-roundness-sm, 4px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_textarea.pc_textarea--md{--ptc-textarea-min-h: var(--pt-dimension-1600);--ptc-textarea-h: calc(var(--pt-dimension-2400) + var(--pt-dimension-300));border-radius:var(--pt-roundness-md, 6px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-700, 14px);line-height:var(--pt-lineheight-6, 16px);letter-spacing:0}.pc_textarea.pc_textarea--lg{--ptc-textarea-px: var(--pt-dimension-200);--ptc-textarea-py: var(--pt-dimension-200);--ptc-textarea-min-h: var(--pt-dimension-2000);--ptc-textarea-h: calc(var(--pt-dimension-2800) + var(--pt-dimension-300));border-radius:var(--pt-roundness-lg, 8px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-medium, medium);font-size:var(--pt-dimension-700, 14px);line-height:var(--pt-lineheight-6, 16px);letter-spacing:0}.pc_textarea:not(.pc_textarea--auto-size){resize:vertical}.pc_textarea.pc_textarea--auto-size{resize:none}.pc_textarea::placeholder{color:var(--ptc-textarea-placeholder);-webkit-text-fill-color:var(--ptc-textarea-placeholder)}.pc_textarea::-webkit-scrollbar,.pc_textarea ::-webkit-scrollbar{width:4px;height:4px}.pc_textarea::-webkit-scrollbar-thumb,.pc_textarea ::-webkit-scrollbar-thumb{cursor:pointer;background-color:rgba(var(--pt-gray-3));border-radius:2px}.pc_textarea::-webkit-scrollbar-thumb:hover,.pc_textarea ::-webkit-scrollbar-thumb:hover{background-color:rgba(var(--pt-gray-4))}.pc_textarea::-webkit-resizer{background:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8' fill='none'><path d='M1 6.65686L6.65685 1.00001' stroke='%236E737C' stroke-linecap='round'/><path d='M4 6.82843L6.82843 4' stroke='%236E737C' stroke-linecap='round'/></svg>\") no-repeat center;border:0;display:block;width:8px;height:8px}\n";
4
+ const cssText = ".pc_textarea{box-sizing:border-box;display:block;min-width:var(--pt-dimension-0, 0px);width:100%;outline:0;color:var(--ptc-textarea-fg);background:var(--ptc-textarea-bg);min-height:var(--ptc-textarea-min-h);height:var(--ptc-textarea-h);padding-bottom:var(--ptc-textarea-py);padding-top:var(--ptc-textarea-py);padding-right:var(--ptc-textarea-px);padding-left:var(--ptc-textarea-px);max-height:var(--ptc-textarea-max-h)}.pc_textarea:not(:disabled):not([data-disabled=true]){--ptc-textarea-bg: rgba(var(--pt-bg));--ptc-textarea-trailing: rgba(var(--pt-fg-subtle));--ptc-textarea-placeholder: rgba(var(--pt-gray-5))}.pc_textarea:not(:disabled):not([data-disabled=true]):not(:hover){--ptc-textarea-fg: rgba(var(--pt-fg))}.pc_textarea:not(:disabled):not([data-disabled=true]):hover{--ptc-textarea-fg: rgba(var(--pt-fg-target))}.pc_textarea:not(:disabled):not([data-disabled=true]):focus,.pc_textarea:not(:disabled):not([data-disabled=true])[data-focus=true],.pc_textarea:not(:disabled):not([data-disabled=true]):focus-visible{--ptu-shadow:0 0 0 var(--pt-stroke-30) var(--ptu-shadow-color, var(--pt-shadow-color, rgba(var(--pt-focus-br))));box-shadow:var(--ptu-ring-offset-shadow),var(--ptu-ring-shadow),var(--ptu-shadow)}.pc_textarea:disabled,.pc_textarea[data-disabled=true]{cursor:not-allowed;--ptc-textarea-bg: rgba(var(--pt-gray-05));--ptc-textarea-fg: rgba(var(--pt-disable-fg));--ptc-textarea-trailing: rgba(var(--pt-disable-fg));--ptc-textarea-placeholder: rgba(var(--pt-disable-fg))}.pc_textarea.pc_textarea--bordered{border-width:1px;border-style:solid;border-color:var(--ptc-textarea-br)}.pc_textarea.pc_textarea--bordered:not(:disabled):not([data-disabled=true]):not(.pc_textarea--error):not(.pc_textarea--success):not(.pc_textarea--warning):not(:focus):not([data-focus=true]):not(:hover){--ptc-textarea-br: rgba(var(--pt-br))}.pc_textarea.pc_textarea--bordered:not(:disabled):not([data-disabled=true]):not(.pc_textarea--error):not(.pc_textarea--success):not(.pc_textarea--warning):not(:focus):not([data-focus=true]):hover{--ptc-textarea-br: rgba(var(--pt-primary-6))}.pc_textarea.pc_textarea--bordered:not(:disabled):not([data-disabled=true]).pc_textarea--error:not(:focus):not([data-focus=true]):not(:hover){--ptc-textarea-br: rgba(var(--pt-danger-br))}.pc_textarea.pc_textarea--bordered:not(:disabled):not([data-disabled=true]).pc_textarea--error:not(:focus):not([data-focus=true]):hover{--ptc-textarea-br: rgba(var(--pt-danger-br-target))}.pc_textarea.pc_textarea--bordered:not(:disabled):not([data-disabled=true]).pc_textarea--warning:not(:focus):not([data-focus=true]):not(:hover){--ptc-textarea-br: rgba(var(--pt-warning-br))}.pc_textarea.pc_textarea--bordered:not(:disabled):not([data-disabled=true]).pc_textarea--warning:not(:focus):not([data-focus=true]):hover{--ptc-textarea-br: rgba(var(--pt-warning-br-target))}.pc_textarea.pc_textarea--bordered:not(:disabled):not([data-disabled=true]).pc_textarea--success:not(:focus):not([data-focus=true]):not(:hover){--ptc-textarea-br: rgba(var(--pt-success-br))}.pc_textarea.pc_textarea--bordered:not(:disabled):not([data-disabled=true]).pc_textarea--success:not(:focus):not([data-focus=true]):hover{--ptc-textarea-br: rgba(var(--pt-success-br-target))}.pc_textarea.pc_textarea--bordered:not(:disabled):not([data-disabled=true]):focus,.pc_textarea.pc_textarea--bordered:not(:disabled):not([data-disabled=true])[data-focus=true],.pc_textarea.pc_textarea--bordered:not(:disabled):not([data-disabled=true]):focus-visible{--ptc-textarea-br: rgba(var(--pt-primary-6))}.pc_textarea.pc_textarea--bordered:disabled,.pc_textarea.pc_textarea--bordered[data-disabled=true]{--ptc-textarea-br: rgba(var(--pt-gray-1))}.pc_textarea:not(.pc_textarea--bordered){border-width:var(--pt-stroke-0, 0px)}.pc_textarea.pc_textarea--sm,.pc_textarea.pc_textarea--md{--ptc-textarea-px: var(--pt-dimension-200);--ptc-textarea-py: var(--pt-dimension-100)}.pc_textarea.pc_textarea--sm{--ptc-textarea-min-h: var(--pt-dimension-1200);--ptc-textarea-h: calc(var(--pt-dimension-2000) + var(--pt-dimension-300));border-radius:var(--pt-roundness-sm, 4px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_textarea.pc_textarea--md{--ptc-textarea-min-h: var(--pt-dimension-1600);--ptc-textarea-h: calc(var(--pt-dimension-2400) + var(--pt-dimension-300));border-radius:var(--pt-roundness-md, 6px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-700, 14px);line-height:var(--pt-lineheight-6, 16px);letter-spacing:0}.pc_textarea.pc_textarea--lg{--ptc-textarea-px: var(--pt-dimension-200);--ptc-textarea-py: var(--pt-dimension-200);--ptc-textarea-min-h: var(--pt-dimension-2000);--ptc-textarea-h: calc(var(--pt-dimension-2800) + var(--pt-dimension-300));border-radius:var(--pt-roundness-lg, 8px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-medium, medium);font-size:var(--pt-dimension-700, 14px);line-height:var(--pt-lineheight-6, 16px);letter-spacing:0}.pc_textarea:not(.pc_textarea--auto-size){resize:vertical}.pc_textarea.pc_textarea--auto-size{resize:none}.pc_textarea:-moz-autofill,.pc_textarea:-webkit-autofill,.pc_textarea:-webkit-autofill:hover,.pc_textarea:-webkit-autofill:focus,.pc_textarea:-webkit-autofill:active,.pc_textarea:autofill,.pc_textarea:autofill:hover,.pc_textarea:autofill:focus{color:var(--ptc-textarea-fg)!important;-webkit-text-fill-color:var(--ptc-textarea-fg)!important;caret-color:var(--ptc-textarea-fg)!important;background-color:var(--ptc-textarea-bg)!important;-webkit-box-shadow:0 0 0px 1000px var(--ptc-textarea-bg) inset!important;box-shadow:0 0 0 1000px var(--ptc-textarea-bg) inset!important;transition:background-color 5000s ease-in-out 0s!important}.pc_textarea:-moz-autofill::placeholder,.pc_textarea:-webkit-autofill::placeholder,.pc_textarea:-webkit-autofill:hover::placeholder,.pc_textarea:-webkit-autofill:focus::placeholder,.pc_textarea:-webkit-autofill:active::placeholder,.pc_textarea:autofill::placeholder,.pc_textarea:autofill:hover::placeholder,.pc_textarea:autofill:focus::placeholder{color:var(--ptc-textarea-placeholder)!important;-webkit-text-fill-color:var(--ptc-textarea-placeholder)!important}.pc_textarea::placeholder{color:var(--ptc-textarea-placeholder);-webkit-text-fill-color:var(--ptc-textarea-placeholder)}.pc_textarea::-webkit-scrollbar,.pc_textarea ::-webkit-scrollbar{width:4px;height:4px}.pc_textarea::-webkit-scrollbar-thumb,.pc_textarea ::-webkit-scrollbar-thumb{cursor:pointer;background-color:rgba(var(--pt-gray-3));border-radius:2px}.pc_textarea::-webkit-scrollbar-thumb:hover,.pc_textarea ::-webkit-scrollbar-thumb:hover{background-color:rgba(var(--pt-gray-4))}@supports not selector(::-webkit-scrollbar){.pc_textarea{scrollbar-width:thin;scrollbar-color:rgba(var(--pt-gray-4)) transparent}}.pc_textarea::-webkit-resizer{background:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8' fill='none'><path d='M1 6.65686L6.65685 1.00001' stroke='%236E737C' stroke-linecap='round'/><path d='M4 6.82843L6.82843 4' stroke='%236E737C' stroke-linecap='round'/></svg>\") no-repeat center;border:0;display:block;width:8px;height:8px}\n";
5
5
  const textareaId = `${prefix}s-textarea`;
6
6
  const addTextareaCss = () => addCssToHead(textareaId, cssText);
7
7
  const removeTextareaCss = () => removeCssFromHead(textareaId);
package/dist/tree.css CHANGED
@@ -1 +1 @@
1
- .pc_sort_placeholder{box-sizing:border-box;height:100%;min-width:var(--pt-dimension-4800, 96px);flex:1 1 0%;border-width:1px;border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-br),var(--ptu-border-opacity));border-style:dashed;--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg-secondary),var(--ptu-bg-opacity))}.pc_sort_placeholder.pc_sort_placeholder--sm{height:var(--pt-size-sm, 24px);min-height:var(--pt-size-sm, 24px);max-height:var(--pt-size-sm, 24px);border-radius:var(--pt-roundness-sm, 4px)}.pc_sort_placeholder.pc_sort_placeholder--md{height:var(--pt-size-md, 32px);min-height:var(--pt-size-md, 32px);max-height:var(--pt-size-md, 32px);border-radius:var(--pt-roundness-md, 6px)}.pc_sort_placeholder.pc_sort_placeholder--lg{height:var(--pt-size-lg, 40px);min-height:var(--pt-size-lg, 40px);max-height:var(--pt-size-lg, 40px);border-radius:var(--pt-roundness-lg, 8px)}.pc_tree{gap:var(--ptc-tree-gap)}.pc_tree .pc_tree__sort_placeholder{padding-inline-start:calc(var(--ptc-tree-node-padding-start) + var(--ptc-tree-node-draggable-size));width:100%;display:flex;align-items:center}.pc_tree:not(.pc_tree--inline-node){display:flex;flex-direction:column}.pc_tree:not(.pc_tree--inline-node) .pc_tree__node{display:flex}.pc_tree.pc_tree--inline-node{width:fit-content;height:fit-content;display:flex;flex-direction:column}.pc_tree.pc_tree--inline-node .pc_tree__node{width:fit-content;display:inline-flex}.pc_tree.pc_tree--gap-none{--ptc-tree-gap: 0px}.pc_tree.pc_tree--gap-sm{--ptc-tree-gap: var(--pt-dimension-200)}.pc_tree.pc_tree--gap-md{--ptc-tree-gap: var(--pt-dimension-300)}.pc_tree.pc_tree--gap-lg{--ptc-tree-gap: var(--pt-dimension-400)}.pc_tree .pc_tree__node{padding-inline-start:var(--ptc-tree-node-padding-start);height:var(--ptc-tree-node-height);min-height:var(--ptc-tree-node-height);max-height:var(--ptc-tree-node-height);-webkit-user-select:none;user-select:none;align-items:center;outline:0}.pc_tree .pc_tree__node .pc_tree__node__indent .pc_indent_level__item:not(.pc_indent_level--expand){--ptc-tree-item-indent-h: calc(var(--ptc-tree-node-height) + var(--ptc-tree-gap));margin-top:calc(-2 * var(--ptc-tree-gap));height:var(--ptc-tree-item-indent-h);min-height:var(--ptc-tree-item-indent-h);max-height:var(--ptc-tree-item-indent-h)}.pc_tree .pc_tree__node .pc_tree__node__title{padding-inline-start:var(--pt-dimension-200, 4px)}.pc_tree .pc_tree__node__slot{box-sizing:border-box;height:100%;min-width:var(--pt-dimension-4800, 96px);flex:1 1 0%;border-width:1px;border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-br),var(--ptu-border-opacity));border-style:dashed;--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg-secondary),var(--ptu-bg-opacity))}.pc_tree.pc_tree--dragging{padding-bottom:var(--pt-dimension-1000, 20px)}.pc_tree.pc_tree--selectable:not(.pc_tree--disabled):not(.pc_tree--dragging) .pc_tree__node:not(.pc_tree__node--disabled){cursor:pointer;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-property:all}.pc_tree.pc_tree--selectable:not(.pc_tree--disabled):not(.pc_tree--dragging) .pc_tree__node:not(.pc_tree__node--disabled).pc_tree__node--active{--ptu-bg-opacity:1;background-color:rgba(var(--pt-primary-0),var(--ptu-bg-opacity))}.pc_tree.pc_tree--selectable:not(.pc_tree--disabled):not(.pc_tree--dragging) .pc_tree__node:not(.pc_tree__node--disabled).pc_tree__node--active:hover,.pc_tree.pc_tree--selectable:not(.pc_tree--disabled):not(.pc_tree--dragging) .pc_tree__node:not(.pc_tree__node--disabled).pc_tree__node--active[data-highlighted]{--ptu-bg-opacity:1;background-color:rgba(var(--pt-primary-1),var(--ptu-bg-opacity))}.pc_tree.pc_tree--selectable:not(.pc_tree--disabled):not(.pc_tree--dragging) .pc_tree__node:not(.pc_tree__node--disabled).pc_tree__node--active:active{--ptu-bg-opacity:1;background-color:rgba(var(--pt-primary-2),var(--ptu-bg-opacity))}.pc_tree.pc_tree--selectable:not(.pc_tree--disabled):not(.pc_tree--dragging) .pc_tree__node:not(.pc_tree__node--disabled):not(.pc_tree__node--active):hover,.pc_tree.pc_tree--selectable:not(.pc_tree--disabled):not(.pc_tree--dragging) .pc_tree__node:not(.pc_tree__node--disabled):not(.pc_tree__node--active)[data-highlighted]{--ptu-bg-opacity:1;background-color:rgba(var(--pt-gray-1),var(--ptu-bg-opacity))}.pc_tree.pc_tree--selectable:not(.pc_tree--disabled):not(.pc_tree--dragging) .pc_tree__node:not(.pc_tree__node--disabled):not(.pc_tree__node--active):active{--ptu-bg-opacity:1;background-color:rgba(var(--pt-gray-2),var(--ptu-bg-opacity))}.pc_tree.pc_tree--selectable:not(.pc_tree--disabled):not(.pc_tree--dragging) .pc_tree__node:not(.pc_tree__node--disabled):focus{--ptu-shadow:0 0 0 var(--pt-stroke-30) var(--ptu-shadow-color, var(--pt-shadow-color, rgba(var(--pt-focus-br))));box-shadow:var(--ptu-ring-offset-shadow),var(--ptu-ring-shadow),var(--ptu-shadow)}.pc_tree.pc_tree--selectable:not(.pc_tree--disabled):not(.pc_tree--dragging) .pc_tree__node:not(.pc_tree__node--disabled) .pc_tree__node__draggable .pc_tree__node__draggable__icon{--ptu-text-opacity:1;color:rgba(var(--pt-fg-subtle-target),var(--ptu-text-opacity))}.pc_tree.pc_tree--selectable:not(.pc_tree--disabled):not(.pc_tree--dragging) .pc_tree__node.pc_tree__node--disabled.pc_tree__node--active{--ptu-text-opacity:1;color:rgba(var(--pt-disable-fg),var(--ptu-text-opacity))}.pc_tree.pc_tree--sm{--ptc-tree-node-height: var(--pt-size-sm);--ptc-tree-node-padding-start: var(--pt-dimension-200);--ptc-tree-node-draggable-size: var(--pt-dimension-800)}.pc_tree.pc_tree--sm .pc_tree__node,.pc_tree.pc_tree--sm .pc_tree__node__slot{border-radius:var(--pt-roundness-sm, 4px)}.pc_tree.pc_tree--md{--ptc-tree-node-height: var(--pt-size-md);--ptc-tree-node-padding-start: var(--pt-dimension-300);--ptc-tree-node-draggable-size: var(--pt-dimension-1000)}.pc_tree.pc_tree--md .pc_tree__node,.pc_tree.pc_tree--md .pc_tree__node__slot{border-radius:var(--pt-roundness-md, 6px)}.pc_tree.pc_tree--lg{--ptc-tree-node-height: var(--pt-size-lg);--ptc-tree-node-padding-start: var(--pt-dimension-400);--ptc-tree-node-draggable-size: var(--pt-dimension-1000)}.pc_tree.pc_tree--lg .pc_tree__node,.pc_tree.pc_tree--lg .pc_tree__node__slot{border-radius:var(--pt-roundness-lg, 8px)}.pc_tree__node__draggable{display:flex;align-items:center;justify-content:center;width:var(--ptc-tree-node-draggable-size);min-width:var(--ptc-tree-node-draggable-size)}@media (min-width: 768px){.pc_tree__node .pc_tree__node__draggable>.pc_tree__node__draggable__icon{display:none}.pc_tree__node:hover .pc_tree__node__draggable>.pc_tree__node__draggable__icon{display:flex;cursor:grab}}@media (max-width: 767.9px){.pc_tree__node .pc_tree__node__draggable>.pc_tree__node__draggable__icon{display:flex;cursor:grab}}.pc_tree--disabled .pc_tree__node__draggable,.pc_tree__node--disabled .pc_tree__node__draggable{--ptu-text-opacity:1;color:rgba(var(--pt-disable-fg),var(--ptu-text-opacity))}.pc_tree--disabled .pc_tree__node__draggable>.pc_tree__node__draggable__icon,.pc_tree__node--disabled .pc_tree__node__draggable>.pc_tree__node__draggable__icon{cursor:not-allowed!important}
1
+ .pc_sort_placeholder{box-sizing:border-box;height:100%;min-width:var(--pt-dimension-4800, 96px);flex:1 1 0%;border-width:1px;border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-br),var(--ptu-border-opacity));border-style:dashed;--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg-secondary),var(--ptu-bg-opacity))}.pc_sort_placeholder.pc_sort_placeholder--sm{height:var(--pt-size-sm, 24px);min-height:var(--pt-size-sm, 24px);max-height:var(--pt-size-sm, 24px);border-radius:var(--pt-roundness-sm, 4px)}.pc_sort_placeholder.pc_sort_placeholder--md{height:var(--pt-size-md, 32px);min-height:var(--pt-size-md, 32px);max-height:var(--pt-size-md, 32px);border-radius:var(--pt-roundness-md, 6px)}.pc_sort_placeholder.pc_sort_placeholder--lg{height:var(--pt-size-lg, 40px);min-height:var(--pt-size-lg, 40px);max-height:var(--pt-size-lg, 40px);border-radius:var(--pt-roundness-lg, 8px)}.pc_tree__scroll_area{overflow:auto;padding:var(--pt-dimension-200, 4px)}.pc_tree__scroll_area::-webkit-scrollbar,.pc_tree__scroll_area ::-webkit-scrollbar{width:4px;height:4px}.pc_tree__scroll_area::-webkit-scrollbar-thumb,.pc_tree__scroll_area ::-webkit-scrollbar-thumb{cursor:pointer;background-color:rgba(var(--pt-gray-3));border-radius:2px}.pc_tree__scroll_area::-webkit-scrollbar-thumb:hover,.pc_tree__scroll_area ::-webkit-scrollbar-thumb:hover{background-color:rgba(var(--pt-gray-4))}@supports not selector(::-webkit-scrollbar){.pc_tree__scroll_area{scrollbar-width:thin;scrollbar-color:rgba(var(--pt-gray-4)) transparent}}.pc_tree{gap:var(--ptc-tree-gap)}.pc_tree::-webkit-scrollbar,.pc_tree ::-webkit-scrollbar{width:4px;height:4px}.pc_tree::-webkit-scrollbar-thumb,.pc_tree ::-webkit-scrollbar-thumb{cursor:pointer;background-color:rgba(var(--pt-gray-3));border-radius:2px}.pc_tree::-webkit-scrollbar-thumb:hover,.pc_tree ::-webkit-scrollbar-thumb:hover{background-color:rgba(var(--pt-gray-4))}@supports not selector(::-webkit-scrollbar){.pc_tree{scrollbar-width:thin;scrollbar-color:rgba(var(--pt-gray-4)) transparent}}.pc_tree .pc_tree__sort_placeholder{padding-inline-start:calc(var(--ptc-tree-node-padding-start) + var(--ptc-tree-node-draggable-size));width:100%;display:flex;align-items:center}.pc_tree:not(.pc_tree--inline-node){display:flex;flex-direction:column}.pc_tree:not(.pc_tree--inline-node) .pc_tree__node{display:flex}.pc_tree.pc_tree--inline-node{width:fit-content;height:fit-content;display:flex;flex-direction:column}.pc_tree.pc_tree--inline-node .pc_tree__node{width:fit-content;display:inline-flex}.pc_tree.pc_tree--gap-none{--ptc-tree-gap: 0px}.pc_tree.pc_tree--gap-sm{--ptc-tree-gap: var(--pt-dimension-200)}.pc_tree.pc_tree--gap-md{--ptc-tree-gap: var(--pt-dimension-300)}.pc_tree.pc_tree--gap-lg{--ptc-tree-gap: var(--pt-dimension-400)}.pc_tree .pc_tree__node{padding-inline-start:var(--ptc-tree-node-padding-start);height:var(--ptc-tree-node-height);min-height:var(--ptc-tree-node-height);max-height:var(--ptc-tree-node-height);-webkit-user-select:none;user-select:none;align-items:center;outline:0}.pc_tree .pc_tree__node .pc_tree__node__indent .pc_indent_level__item:not(.pc_indent_level--expand){--ptc-tree-item-indent-h: calc(var(--ptc-tree-node-height) + var(--ptc-tree-gap));margin-top:calc(-2 * var(--ptc-tree-gap));height:var(--ptc-tree-item-indent-h);min-height:var(--ptc-tree-item-indent-h);max-height:var(--ptc-tree-item-indent-h)}.pc_tree .pc_tree__node .pc_tree__node__title{padding-inline-start:var(--pt-dimension-200, 4px)}.pc_tree .pc_tree__node__slot{box-sizing:border-box;height:100%;min-width:var(--pt-dimension-4800, 96px);flex:1 1 0%;border-width:1px;border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-br),var(--ptu-border-opacity));border-style:dashed;--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg-secondary),var(--ptu-bg-opacity))}.pc_tree.pc_tree--dragging{padding-bottom:var(--pt-dimension-1000, 20px)}.pc_tree.pc_tree--selectable:not(.pc_tree--disabled):not(.pc_tree--dragging) .pc_tree__node:not(.pc_tree__node--disabled){cursor:pointer;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-property:all}.pc_tree.pc_tree--selectable:not(.pc_tree--disabled):not(.pc_tree--dragging) .pc_tree__node:not(.pc_tree__node--disabled).pc_tree__node--active{--ptu-bg-opacity:1;background-color:rgba(var(--pt-primary-0),var(--ptu-bg-opacity))}.pc_tree.pc_tree--selectable:not(.pc_tree--disabled):not(.pc_tree--dragging) .pc_tree__node:not(.pc_tree__node--disabled).pc_tree__node--active:hover,.pc_tree.pc_tree--selectable:not(.pc_tree--disabled):not(.pc_tree--dragging) .pc_tree__node:not(.pc_tree__node--disabled).pc_tree__node--active[data-highlighted]{--ptu-bg-opacity:1;background-color:rgba(var(--pt-primary-1),var(--ptu-bg-opacity))}.pc_tree.pc_tree--selectable:not(.pc_tree--disabled):not(.pc_tree--dragging) .pc_tree__node:not(.pc_tree__node--disabled).pc_tree__node--active:active{--ptu-bg-opacity:1;background-color:rgba(var(--pt-primary-2),var(--ptu-bg-opacity))}.pc_tree.pc_tree--selectable:not(.pc_tree--disabled):not(.pc_tree--dragging) .pc_tree__node:not(.pc_tree__node--disabled):not(.pc_tree__node--active):hover,.pc_tree.pc_tree--selectable:not(.pc_tree--disabled):not(.pc_tree--dragging) .pc_tree__node:not(.pc_tree__node--disabled):not(.pc_tree__node--active)[data-highlighted]{--ptu-bg-opacity:1;background-color:rgba(var(--pt-gray-1),var(--ptu-bg-opacity))}.pc_tree.pc_tree--selectable:not(.pc_tree--disabled):not(.pc_tree--dragging) .pc_tree__node:not(.pc_tree__node--disabled):not(.pc_tree__node--active):active{--ptu-bg-opacity:1;background-color:rgba(var(--pt-gray-2),var(--ptu-bg-opacity))}.pc_tree.pc_tree--selectable:not(.pc_tree--disabled):not(.pc_tree--dragging) .pc_tree__node:not(.pc_tree__node--disabled):focus{--ptu-shadow:0 0 0 var(--pt-stroke-30) var(--ptu-shadow-color, var(--pt-shadow-color, rgba(var(--pt-focus-br))));box-shadow:var(--ptu-ring-offset-shadow),var(--ptu-ring-shadow),var(--ptu-shadow)}.pc_tree.pc_tree--selectable:not(.pc_tree--disabled):not(.pc_tree--dragging) .pc_tree__node:not(.pc_tree__node--disabled) .pc_tree__node__draggable .pc_tree__node__draggable__icon{--ptu-text-opacity:1;color:rgba(var(--pt-fg-subtle-target),var(--ptu-text-opacity))}.pc_tree.pc_tree--selectable:not(.pc_tree--disabled):not(.pc_tree--dragging) .pc_tree__node.pc_tree__node--disabled.pc_tree__node--active{--ptu-text-opacity:1;color:rgba(var(--pt-disable-fg),var(--ptu-text-opacity))}.pc_tree.pc_tree--sm{--ptc-tree-node-height: var(--pt-size-sm);--ptc-tree-node-padding-start: var(--pt-dimension-200);--ptc-tree-node-draggable-size: var(--pt-dimension-800)}.pc_tree.pc_tree--sm .pc_tree__node,.pc_tree.pc_tree--sm .pc_tree__node__slot{border-radius:var(--pt-roundness-sm, 4px)}.pc_tree.pc_tree--md{--ptc-tree-node-height: var(--pt-size-md);--ptc-tree-node-padding-start: var(--pt-dimension-300);--ptc-tree-node-draggable-size: var(--pt-dimension-1000)}.pc_tree.pc_tree--md .pc_tree__node,.pc_tree.pc_tree--md .pc_tree__node__slot{border-radius:var(--pt-roundness-md, 6px)}.pc_tree.pc_tree--lg{--ptc-tree-node-height: var(--pt-size-lg);--ptc-tree-node-padding-start: var(--pt-dimension-400);--ptc-tree-node-draggable-size: var(--pt-dimension-1000)}.pc_tree.pc_tree--lg .pc_tree__node,.pc_tree.pc_tree--lg .pc_tree__node__slot{border-radius:var(--pt-roundness-lg, 8px)}.pc_tree__node__draggable{display:flex;align-items:center;justify-content:center;width:var(--ptc-tree-node-draggable-size);min-width:var(--ptc-tree-node-draggable-size)}@media (min-width: 768px){.pc_tree__node .pc_tree__node__draggable>.pc_tree__node__draggable__icon{display:none}.pc_tree__node:hover .pc_tree__node__draggable>.pc_tree__node__draggable__icon{display:flex;cursor:grab}}@media (max-width: 767.9px){.pc_tree__node .pc_tree__node__draggable>.pc_tree__node__draggable__icon{display:flex;cursor:grab}}.pc_tree--disabled .pc_tree__node__draggable,.pc_tree__node--disabled .pc_tree__node__draggable{--ptu-text-opacity:1;color:rgba(var(--pt-disable-fg),var(--ptu-text-opacity))}.pc_tree--disabled .pc_tree__node__draggable>.pc_tree__node__draggable__icon,.pc_tree__node--disabled .pc_tree__node__draggable>.pc_tree__node__draggable__icon{cursor:not-allowed!important}
package/dist/tree.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { addCssToHead, removeCssFromHead, prefix } from "@pantograph/tokens";
2
- const cssText = ".pc_sort_placeholder{box-sizing:border-box;height:100%;min-width:var(--pt-dimension-4800, 96px);flex:1 1 0%;border-width:1px;border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-br),var(--ptu-border-opacity));border-style:dashed;--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg-secondary),var(--ptu-bg-opacity))}.pc_sort_placeholder.pc_sort_placeholder--sm{height:var(--pt-size-sm, 24px);min-height:var(--pt-size-sm, 24px);max-height:var(--pt-size-sm, 24px);border-radius:var(--pt-roundness-sm, 4px)}.pc_sort_placeholder.pc_sort_placeholder--md{height:var(--pt-size-md, 32px);min-height:var(--pt-size-md, 32px);max-height:var(--pt-size-md, 32px);border-radius:var(--pt-roundness-md, 6px)}.pc_sort_placeholder.pc_sort_placeholder--lg{height:var(--pt-size-lg, 40px);min-height:var(--pt-size-lg, 40px);max-height:var(--pt-size-lg, 40px);border-radius:var(--pt-roundness-lg, 8px)}.pc_tree{gap:var(--ptc-tree-gap)}.pc_tree .pc_tree__sort_placeholder{padding-inline-start:calc(var(--ptc-tree-node-padding-start) + var(--ptc-tree-node-draggable-size));width:100%;display:flex;align-items:center}.pc_tree:not(.pc_tree--inline-node){display:flex;flex-direction:column}.pc_tree:not(.pc_tree--inline-node) .pc_tree__node{display:flex}.pc_tree.pc_tree--inline-node{width:fit-content;height:fit-content;display:flex;flex-direction:column}.pc_tree.pc_tree--inline-node .pc_tree__node{width:fit-content;display:inline-flex}.pc_tree.pc_tree--gap-none{--ptc-tree-gap: 0px}.pc_tree.pc_tree--gap-sm{--ptc-tree-gap: var(--pt-dimension-200)}.pc_tree.pc_tree--gap-md{--ptc-tree-gap: var(--pt-dimension-300)}.pc_tree.pc_tree--gap-lg{--ptc-tree-gap: var(--pt-dimension-400)}.pc_tree .pc_tree__node{padding-inline-start:var(--ptc-tree-node-padding-start);height:var(--ptc-tree-node-height);min-height:var(--ptc-tree-node-height);max-height:var(--ptc-tree-node-height);-webkit-user-select:none;user-select:none;align-items:center;outline:0}.pc_tree .pc_tree__node .pc_tree__node__indent .pc_indent_level__item:not(.pc_indent_level--expand){--ptc-tree-item-indent-h: calc(var(--ptc-tree-node-height) + var(--ptc-tree-gap));margin-top:calc(-2 * var(--ptc-tree-gap));height:var(--ptc-tree-item-indent-h);min-height:var(--ptc-tree-item-indent-h);max-height:var(--ptc-tree-item-indent-h)}.pc_tree .pc_tree__node .pc_tree__node__title{padding-inline-start:var(--pt-dimension-200, 4px)}.pc_tree .pc_tree__node__slot{box-sizing:border-box;height:100%;min-width:var(--pt-dimension-4800, 96px);flex:1 1 0%;border-width:1px;border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-br),var(--ptu-border-opacity));border-style:dashed;--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg-secondary),var(--ptu-bg-opacity))}.pc_tree.pc_tree--dragging{padding-bottom:var(--pt-dimension-1000, 20px)}.pc_tree.pc_tree--selectable:not(.pc_tree--disabled):not(.pc_tree--dragging) .pc_tree__node:not(.pc_tree__node--disabled){cursor:pointer;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-property:all}.pc_tree.pc_tree--selectable:not(.pc_tree--disabled):not(.pc_tree--dragging) .pc_tree__node:not(.pc_tree__node--disabled).pc_tree__node--active{--ptu-bg-opacity:1;background-color:rgba(var(--pt-primary-0),var(--ptu-bg-opacity))}.pc_tree.pc_tree--selectable:not(.pc_tree--disabled):not(.pc_tree--dragging) .pc_tree__node:not(.pc_tree__node--disabled).pc_tree__node--active:hover,.pc_tree.pc_tree--selectable:not(.pc_tree--disabled):not(.pc_tree--dragging) .pc_tree__node:not(.pc_tree__node--disabled).pc_tree__node--active[data-highlighted]{--ptu-bg-opacity:1;background-color:rgba(var(--pt-primary-1),var(--ptu-bg-opacity))}.pc_tree.pc_tree--selectable:not(.pc_tree--disabled):not(.pc_tree--dragging) .pc_tree__node:not(.pc_tree__node--disabled).pc_tree__node--active:active{--ptu-bg-opacity:1;background-color:rgba(var(--pt-primary-2),var(--ptu-bg-opacity))}.pc_tree.pc_tree--selectable:not(.pc_tree--disabled):not(.pc_tree--dragging) .pc_tree__node:not(.pc_tree__node--disabled):not(.pc_tree__node--active):hover,.pc_tree.pc_tree--selectable:not(.pc_tree--disabled):not(.pc_tree--dragging) .pc_tree__node:not(.pc_tree__node--disabled):not(.pc_tree__node--active)[data-highlighted]{--ptu-bg-opacity:1;background-color:rgba(var(--pt-gray-1),var(--ptu-bg-opacity))}.pc_tree.pc_tree--selectable:not(.pc_tree--disabled):not(.pc_tree--dragging) .pc_tree__node:not(.pc_tree__node--disabled):not(.pc_tree__node--active):active{--ptu-bg-opacity:1;background-color:rgba(var(--pt-gray-2),var(--ptu-bg-opacity))}.pc_tree.pc_tree--selectable:not(.pc_tree--disabled):not(.pc_tree--dragging) .pc_tree__node:not(.pc_tree__node--disabled):focus{--ptu-shadow:0 0 0 var(--pt-stroke-30) var(--ptu-shadow-color, var(--pt-shadow-color, rgba(var(--pt-focus-br))));box-shadow:var(--ptu-ring-offset-shadow),var(--ptu-ring-shadow),var(--ptu-shadow)}.pc_tree.pc_tree--selectable:not(.pc_tree--disabled):not(.pc_tree--dragging) .pc_tree__node:not(.pc_tree__node--disabled) .pc_tree__node__draggable .pc_tree__node__draggable__icon{--ptu-text-opacity:1;color:rgba(var(--pt-fg-subtle-target),var(--ptu-text-opacity))}.pc_tree.pc_tree--selectable:not(.pc_tree--disabled):not(.pc_tree--dragging) .pc_tree__node.pc_tree__node--disabled.pc_tree__node--active{--ptu-text-opacity:1;color:rgba(var(--pt-disable-fg),var(--ptu-text-opacity))}.pc_tree.pc_tree--sm{--ptc-tree-node-height: var(--pt-size-sm);--ptc-tree-node-padding-start: var(--pt-dimension-200);--ptc-tree-node-draggable-size: var(--pt-dimension-800)}.pc_tree.pc_tree--sm .pc_tree__node,.pc_tree.pc_tree--sm .pc_tree__node__slot{border-radius:var(--pt-roundness-sm, 4px)}.pc_tree.pc_tree--md{--ptc-tree-node-height: var(--pt-size-md);--ptc-tree-node-padding-start: var(--pt-dimension-300);--ptc-tree-node-draggable-size: var(--pt-dimension-1000)}.pc_tree.pc_tree--md .pc_tree__node,.pc_tree.pc_tree--md .pc_tree__node__slot{border-radius:var(--pt-roundness-md, 6px)}.pc_tree.pc_tree--lg{--ptc-tree-node-height: var(--pt-size-lg);--ptc-tree-node-padding-start: var(--pt-dimension-400);--ptc-tree-node-draggable-size: var(--pt-dimension-1000)}.pc_tree.pc_tree--lg .pc_tree__node,.pc_tree.pc_tree--lg .pc_tree__node__slot{border-radius:var(--pt-roundness-lg, 8px)}.pc_tree__node__draggable{display:flex;align-items:center;justify-content:center;width:var(--ptc-tree-node-draggable-size);min-width:var(--ptc-tree-node-draggable-size)}@media (min-width: 768px){.pc_tree__node .pc_tree__node__draggable>.pc_tree__node__draggable__icon{display:none}.pc_tree__node:hover .pc_tree__node__draggable>.pc_tree__node__draggable__icon{display:flex;cursor:grab}}@media (max-width: 767.9px){.pc_tree__node .pc_tree__node__draggable>.pc_tree__node__draggable__icon{display:flex;cursor:grab}}.pc_tree--disabled .pc_tree__node__draggable,.pc_tree__node--disabled .pc_tree__node__draggable{--ptu-text-opacity:1;color:rgba(var(--pt-disable-fg),var(--ptu-text-opacity))}.pc_tree--disabled .pc_tree__node__draggable>.pc_tree__node__draggable__icon,.pc_tree__node--disabled .pc_tree__node__draggable>.pc_tree__node__draggable__icon{cursor:not-allowed!important}\n";
2
+ const cssText = ".pc_sort_placeholder{box-sizing:border-box;height:100%;min-width:var(--pt-dimension-4800, 96px);flex:1 1 0%;border-width:1px;border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-br),var(--ptu-border-opacity));border-style:dashed;--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg-secondary),var(--ptu-bg-opacity))}.pc_sort_placeholder.pc_sort_placeholder--sm{height:var(--pt-size-sm, 24px);min-height:var(--pt-size-sm, 24px);max-height:var(--pt-size-sm, 24px);border-radius:var(--pt-roundness-sm, 4px)}.pc_sort_placeholder.pc_sort_placeholder--md{height:var(--pt-size-md, 32px);min-height:var(--pt-size-md, 32px);max-height:var(--pt-size-md, 32px);border-radius:var(--pt-roundness-md, 6px)}.pc_sort_placeholder.pc_sort_placeholder--lg{height:var(--pt-size-lg, 40px);min-height:var(--pt-size-lg, 40px);max-height:var(--pt-size-lg, 40px);border-radius:var(--pt-roundness-lg, 8px)}.pc_tree__scroll_area{overflow:auto;padding:var(--pt-dimension-200, 4px)}.pc_tree__scroll_area::-webkit-scrollbar,.pc_tree__scroll_area ::-webkit-scrollbar{width:4px;height:4px}.pc_tree__scroll_area::-webkit-scrollbar-thumb,.pc_tree__scroll_area ::-webkit-scrollbar-thumb{cursor:pointer;background-color:rgba(var(--pt-gray-3));border-radius:2px}.pc_tree__scroll_area::-webkit-scrollbar-thumb:hover,.pc_tree__scroll_area ::-webkit-scrollbar-thumb:hover{background-color:rgba(var(--pt-gray-4))}@supports not selector(::-webkit-scrollbar){.pc_tree__scroll_area{scrollbar-width:thin;scrollbar-color:rgba(var(--pt-gray-4)) transparent}}.pc_tree{gap:var(--ptc-tree-gap)}.pc_tree::-webkit-scrollbar,.pc_tree ::-webkit-scrollbar{width:4px;height:4px}.pc_tree::-webkit-scrollbar-thumb,.pc_tree ::-webkit-scrollbar-thumb{cursor:pointer;background-color:rgba(var(--pt-gray-3));border-radius:2px}.pc_tree::-webkit-scrollbar-thumb:hover,.pc_tree ::-webkit-scrollbar-thumb:hover{background-color:rgba(var(--pt-gray-4))}@supports not selector(::-webkit-scrollbar){.pc_tree{scrollbar-width:thin;scrollbar-color:rgba(var(--pt-gray-4)) transparent}}.pc_tree .pc_tree__sort_placeholder{padding-inline-start:calc(var(--ptc-tree-node-padding-start) + var(--ptc-tree-node-draggable-size));width:100%;display:flex;align-items:center}.pc_tree:not(.pc_tree--inline-node){display:flex;flex-direction:column}.pc_tree:not(.pc_tree--inline-node) .pc_tree__node{display:flex}.pc_tree.pc_tree--inline-node{width:fit-content;height:fit-content;display:flex;flex-direction:column}.pc_tree.pc_tree--inline-node .pc_tree__node{width:fit-content;display:inline-flex}.pc_tree.pc_tree--gap-none{--ptc-tree-gap: 0px}.pc_tree.pc_tree--gap-sm{--ptc-tree-gap: var(--pt-dimension-200)}.pc_tree.pc_tree--gap-md{--ptc-tree-gap: var(--pt-dimension-300)}.pc_tree.pc_tree--gap-lg{--ptc-tree-gap: var(--pt-dimension-400)}.pc_tree .pc_tree__node{padding-inline-start:var(--ptc-tree-node-padding-start);height:var(--ptc-tree-node-height);min-height:var(--ptc-tree-node-height);max-height:var(--ptc-tree-node-height);-webkit-user-select:none;user-select:none;align-items:center;outline:0}.pc_tree .pc_tree__node .pc_tree__node__indent .pc_indent_level__item:not(.pc_indent_level--expand){--ptc-tree-item-indent-h: calc(var(--ptc-tree-node-height) + var(--ptc-tree-gap));margin-top:calc(-2 * var(--ptc-tree-gap));height:var(--ptc-tree-item-indent-h);min-height:var(--ptc-tree-item-indent-h);max-height:var(--ptc-tree-item-indent-h)}.pc_tree .pc_tree__node .pc_tree__node__title{padding-inline-start:var(--pt-dimension-200, 4px)}.pc_tree .pc_tree__node__slot{box-sizing:border-box;height:100%;min-width:var(--pt-dimension-4800, 96px);flex:1 1 0%;border-width:1px;border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-br),var(--ptu-border-opacity));border-style:dashed;--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg-secondary),var(--ptu-bg-opacity))}.pc_tree.pc_tree--dragging{padding-bottom:var(--pt-dimension-1000, 20px)}.pc_tree.pc_tree--selectable:not(.pc_tree--disabled):not(.pc_tree--dragging) .pc_tree__node:not(.pc_tree__node--disabled){cursor:pointer;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-property:all}.pc_tree.pc_tree--selectable:not(.pc_tree--disabled):not(.pc_tree--dragging) .pc_tree__node:not(.pc_tree__node--disabled).pc_tree__node--active{--ptu-bg-opacity:1;background-color:rgba(var(--pt-primary-0),var(--ptu-bg-opacity))}.pc_tree.pc_tree--selectable:not(.pc_tree--disabled):not(.pc_tree--dragging) .pc_tree__node:not(.pc_tree__node--disabled).pc_tree__node--active:hover,.pc_tree.pc_tree--selectable:not(.pc_tree--disabled):not(.pc_tree--dragging) .pc_tree__node:not(.pc_tree__node--disabled).pc_tree__node--active[data-highlighted]{--ptu-bg-opacity:1;background-color:rgba(var(--pt-primary-1),var(--ptu-bg-opacity))}.pc_tree.pc_tree--selectable:not(.pc_tree--disabled):not(.pc_tree--dragging) .pc_tree__node:not(.pc_tree__node--disabled).pc_tree__node--active:active{--ptu-bg-opacity:1;background-color:rgba(var(--pt-primary-2),var(--ptu-bg-opacity))}.pc_tree.pc_tree--selectable:not(.pc_tree--disabled):not(.pc_tree--dragging) .pc_tree__node:not(.pc_tree__node--disabled):not(.pc_tree__node--active):hover,.pc_tree.pc_tree--selectable:not(.pc_tree--disabled):not(.pc_tree--dragging) .pc_tree__node:not(.pc_tree__node--disabled):not(.pc_tree__node--active)[data-highlighted]{--ptu-bg-opacity:1;background-color:rgba(var(--pt-gray-1),var(--ptu-bg-opacity))}.pc_tree.pc_tree--selectable:not(.pc_tree--disabled):not(.pc_tree--dragging) .pc_tree__node:not(.pc_tree__node--disabled):not(.pc_tree__node--active):active{--ptu-bg-opacity:1;background-color:rgba(var(--pt-gray-2),var(--ptu-bg-opacity))}.pc_tree.pc_tree--selectable:not(.pc_tree--disabled):not(.pc_tree--dragging) .pc_tree__node:not(.pc_tree__node--disabled):focus{--ptu-shadow:0 0 0 var(--pt-stroke-30) var(--ptu-shadow-color, var(--pt-shadow-color, rgba(var(--pt-focus-br))));box-shadow:var(--ptu-ring-offset-shadow),var(--ptu-ring-shadow),var(--ptu-shadow)}.pc_tree.pc_tree--selectable:not(.pc_tree--disabled):not(.pc_tree--dragging) .pc_tree__node:not(.pc_tree__node--disabled) .pc_tree__node__draggable .pc_tree__node__draggable__icon{--ptu-text-opacity:1;color:rgba(var(--pt-fg-subtle-target),var(--ptu-text-opacity))}.pc_tree.pc_tree--selectable:not(.pc_tree--disabled):not(.pc_tree--dragging) .pc_tree__node.pc_tree__node--disabled.pc_tree__node--active{--ptu-text-opacity:1;color:rgba(var(--pt-disable-fg),var(--ptu-text-opacity))}.pc_tree.pc_tree--sm{--ptc-tree-node-height: var(--pt-size-sm);--ptc-tree-node-padding-start: var(--pt-dimension-200);--ptc-tree-node-draggable-size: var(--pt-dimension-800)}.pc_tree.pc_tree--sm .pc_tree__node,.pc_tree.pc_tree--sm .pc_tree__node__slot{border-radius:var(--pt-roundness-sm, 4px)}.pc_tree.pc_tree--md{--ptc-tree-node-height: var(--pt-size-md);--ptc-tree-node-padding-start: var(--pt-dimension-300);--ptc-tree-node-draggable-size: var(--pt-dimension-1000)}.pc_tree.pc_tree--md .pc_tree__node,.pc_tree.pc_tree--md .pc_tree__node__slot{border-radius:var(--pt-roundness-md, 6px)}.pc_tree.pc_tree--lg{--ptc-tree-node-height: var(--pt-size-lg);--ptc-tree-node-padding-start: var(--pt-dimension-400);--ptc-tree-node-draggable-size: var(--pt-dimension-1000)}.pc_tree.pc_tree--lg .pc_tree__node,.pc_tree.pc_tree--lg .pc_tree__node__slot{border-radius:var(--pt-roundness-lg, 8px)}.pc_tree__node__draggable{display:flex;align-items:center;justify-content:center;width:var(--ptc-tree-node-draggable-size);min-width:var(--ptc-tree-node-draggable-size)}@media (min-width: 768px){.pc_tree__node .pc_tree__node__draggable>.pc_tree__node__draggable__icon{display:none}.pc_tree__node:hover .pc_tree__node__draggable>.pc_tree__node__draggable__icon{display:flex;cursor:grab}}@media (max-width: 767.9px){.pc_tree__node .pc_tree__node__draggable>.pc_tree__node__draggable__icon{display:flex;cursor:grab}}.pc_tree--disabled .pc_tree__node__draggable,.pc_tree__node--disabled .pc_tree__node__draggable{--ptu-text-opacity:1;color:rgba(var(--pt-disable-fg),var(--ptu-text-opacity))}.pc_tree--disabled .pc_tree__node__draggable>.pc_tree__node__draggable__icon,.pc_tree__node--disabled .pc_tree__node__draggable>.pc_tree__node__draggable__icon{cursor:not-allowed!important}\n";
3
3
  const treeId = `${prefix}s-tree`;
4
4
  const addTreeCss = () => addCssToHead(treeId, cssText);
5
5
  const removeTreeCss = () => removeCssFromHead(treeId);
package/dist/tree.umd.cjs CHANGED
@@ -1,7 +1,7 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  const { addCssToHead, removeCssFromHead, prefix } = require("@pantograph/tokens");
4
- const cssText = ".pc_sort_placeholder{box-sizing:border-box;height:100%;min-width:var(--pt-dimension-4800, 96px);flex:1 1 0%;border-width:1px;border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-br),var(--ptu-border-opacity));border-style:dashed;--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg-secondary),var(--ptu-bg-opacity))}.pc_sort_placeholder.pc_sort_placeholder--sm{height:var(--pt-size-sm, 24px);min-height:var(--pt-size-sm, 24px);max-height:var(--pt-size-sm, 24px);border-radius:var(--pt-roundness-sm, 4px)}.pc_sort_placeholder.pc_sort_placeholder--md{height:var(--pt-size-md, 32px);min-height:var(--pt-size-md, 32px);max-height:var(--pt-size-md, 32px);border-radius:var(--pt-roundness-md, 6px)}.pc_sort_placeholder.pc_sort_placeholder--lg{height:var(--pt-size-lg, 40px);min-height:var(--pt-size-lg, 40px);max-height:var(--pt-size-lg, 40px);border-radius:var(--pt-roundness-lg, 8px)}.pc_tree{gap:var(--ptc-tree-gap)}.pc_tree .pc_tree__sort_placeholder{padding-inline-start:calc(var(--ptc-tree-node-padding-start) + var(--ptc-tree-node-draggable-size));width:100%;display:flex;align-items:center}.pc_tree:not(.pc_tree--inline-node){display:flex;flex-direction:column}.pc_tree:not(.pc_tree--inline-node) .pc_tree__node{display:flex}.pc_tree.pc_tree--inline-node{width:fit-content;height:fit-content;display:flex;flex-direction:column}.pc_tree.pc_tree--inline-node .pc_tree__node{width:fit-content;display:inline-flex}.pc_tree.pc_tree--gap-none{--ptc-tree-gap: 0px}.pc_tree.pc_tree--gap-sm{--ptc-tree-gap: var(--pt-dimension-200)}.pc_tree.pc_tree--gap-md{--ptc-tree-gap: var(--pt-dimension-300)}.pc_tree.pc_tree--gap-lg{--ptc-tree-gap: var(--pt-dimension-400)}.pc_tree .pc_tree__node{padding-inline-start:var(--ptc-tree-node-padding-start);height:var(--ptc-tree-node-height);min-height:var(--ptc-tree-node-height);max-height:var(--ptc-tree-node-height);-webkit-user-select:none;user-select:none;align-items:center;outline:0}.pc_tree .pc_tree__node .pc_tree__node__indent .pc_indent_level__item:not(.pc_indent_level--expand){--ptc-tree-item-indent-h: calc(var(--ptc-tree-node-height) + var(--ptc-tree-gap));margin-top:calc(-2 * var(--ptc-tree-gap));height:var(--ptc-tree-item-indent-h);min-height:var(--ptc-tree-item-indent-h);max-height:var(--ptc-tree-item-indent-h)}.pc_tree .pc_tree__node .pc_tree__node__title{padding-inline-start:var(--pt-dimension-200, 4px)}.pc_tree .pc_tree__node__slot{box-sizing:border-box;height:100%;min-width:var(--pt-dimension-4800, 96px);flex:1 1 0%;border-width:1px;border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-br),var(--ptu-border-opacity));border-style:dashed;--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg-secondary),var(--ptu-bg-opacity))}.pc_tree.pc_tree--dragging{padding-bottom:var(--pt-dimension-1000, 20px)}.pc_tree.pc_tree--selectable:not(.pc_tree--disabled):not(.pc_tree--dragging) .pc_tree__node:not(.pc_tree__node--disabled){cursor:pointer;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-property:all}.pc_tree.pc_tree--selectable:not(.pc_tree--disabled):not(.pc_tree--dragging) .pc_tree__node:not(.pc_tree__node--disabled).pc_tree__node--active{--ptu-bg-opacity:1;background-color:rgba(var(--pt-primary-0),var(--ptu-bg-opacity))}.pc_tree.pc_tree--selectable:not(.pc_tree--disabled):not(.pc_tree--dragging) .pc_tree__node:not(.pc_tree__node--disabled).pc_tree__node--active:hover,.pc_tree.pc_tree--selectable:not(.pc_tree--disabled):not(.pc_tree--dragging) .pc_tree__node:not(.pc_tree__node--disabled).pc_tree__node--active[data-highlighted]{--ptu-bg-opacity:1;background-color:rgba(var(--pt-primary-1),var(--ptu-bg-opacity))}.pc_tree.pc_tree--selectable:not(.pc_tree--disabled):not(.pc_tree--dragging) .pc_tree__node:not(.pc_tree__node--disabled).pc_tree__node--active:active{--ptu-bg-opacity:1;background-color:rgba(var(--pt-primary-2),var(--ptu-bg-opacity))}.pc_tree.pc_tree--selectable:not(.pc_tree--disabled):not(.pc_tree--dragging) .pc_tree__node:not(.pc_tree__node--disabled):not(.pc_tree__node--active):hover,.pc_tree.pc_tree--selectable:not(.pc_tree--disabled):not(.pc_tree--dragging) .pc_tree__node:not(.pc_tree__node--disabled):not(.pc_tree__node--active)[data-highlighted]{--ptu-bg-opacity:1;background-color:rgba(var(--pt-gray-1),var(--ptu-bg-opacity))}.pc_tree.pc_tree--selectable:not(.pc_tree--disabled):not(.pc_tree--dragging) .pc_tree__node:not(.pc_tree__node--disabled):not(.pc_tree__node--active):active{--ptu-bg-opacity:1;background-color:rgba(var(--pt-gray-2),var(--ptu-bg-opacity))}.pc_tree.pc_tree--selectable:not(.pc_tree--disabled):not(.pc_tree--dragging) .pc_tree__node:not(.pc_tree__node--disabled):focus{--ptu-shadow:0 0 0 var(--pt-stroke-30) var(--ptu-shadow-color, var(--pt-shadow-color, rgba(var(--pt-focus-br))));box-shadow:var(--ptu-ring-offset-shadow),var(--ptu-ring-shadow),var(--ptu-shadow)}.pc_tree.pc_tree--selectable:not(.pc_tree--disabled):not(.pc_tree--dragging) .pc_tree__node:not(.pc_tree__node--disabled) .pc_tree__node__draggable .pc_tree__node__draggable__icon{--ptu-text-opacity:1;color:rgba(var(--pt-fg-subtle-target),var(--ptu-text-opacity))}.pc_tree.pc_tree--selectable:not(.pc_tree--disabled):not(.pc_tree--dragging) .pc_tree__node.pc_tree__node--disabled.pc_tree__node--active{--ptu-text-opacity:1;color:rgba(var(--pt-disable-fg),var(--ptu-text-opacity))}.pc_tree.pc_tree--sm{--ptc-tree-node-height: var(--pt-size-sm);--ptc-tree-node-padding-start: var(--pt-dimension-200);--ptc-tree-node-draggable-size: var(--pt-dimension-800)}.pc_tree.pc_tree--sm .pc_tree__node,.pc_tree.pc_tree--sm .pc_tree__node__slot{border-radius:var(--pt-roundness-sm, 4px)}.pc_tree.pc_tree--md{--ptc-tree-node-height: var(--pt-size-md);--ptc-tree-node-padding-start: var(--pt-dimension-300);--ptc-tree-node-draggable-size: var(--pt-dimension-1000)}.pc_tree.pc_tree--md .pc_tree__node,.pc_tree.pc_tree--md .pc_tree__node__slot{border-radius:var(--pt-roundness-md, 6px)}.pc_tree.pc_tree--lg{--ptc-tree-node-height: var(--pt-size-lg);--ptc-tree-node-padding-start: var(--pt-dimension-400);--ptc-tree-node-draggable-size: var(--pt-dimension-1000)}.pc_tree.pc_tree--lg .pc_tree__node,.pc_tree.pc_tree--lg .pc_tree__node__slot{border-radius:var(--pt-roundness-lg, 8px)}.pc_tree__node__draggable{display:flex;align-items:center;justify-content:center;width:var(--ptc-tree-node-draggable-size);min-width:var(--ptc-tree-node-draggable-size)}@media (min-width: 768px){.pc_tree__node .pc_tree__node__draggable>.pc_tree__node__draggable__icon{display:none}.pc_tree__node:hover .pc_tree__node__draggable>.pc_tree__node__draggable__icon{display:flex;cursor:grab}}@media (max-width: 767.9px){.pc_tree__node .pc_tree__node__draggable>.pc_tree__node__draggable__icon{display:flex;cursor:grab}}.pc_tree--disabled .pc_tree__node__draggable,.pc_tree__node--disabled .pc_tree__node__draggable{--ptu-text-opacity:1;color:rgba(var(--pt-disable-fg),var(--ptu-text-opacity))}.pc_tree--disabled .pc_tree__node__draggable>.pc_tree__node__draggable__icon,.pc_tree__node--disabled .pc_tree__node__draggable>.pc_tree__node__draggable__icon{cursor:not-allowed!important}\n";
4
+ const cssText = ".pc_sort_placeholder{box-sizing:border-box;height:100%;min-width:var(--pt-dimension-4800, 96px);flex:1 1 0%;border-width:1px;border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-br),var(--ptu-border-opacity));border-style:dashed;--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg-secondary),var(--ptu-bg-opacity))}.pc_sort_placeholder.pc_sort_placeholder--sm{height:var(--pt-size-sm, 24px);min-height:var(--pt-size-sm, 24px);max-height:var(--pt-size-sm, 24px);border-radius:var(--pt-roundness-sm, 4px)}.pc_sort_placeholder.pc_sort_placeholder--md{height:var(--pt-size-md, 32px);min-height:var(--pt-size-md, 32px);max-height:var(--pt-size-md, 32px);border-radius:var(--pt-roundness-md, 6px)}.pc_sort_placeholder.pc_sort_placeholder--lg{height:var(--pt-size-lg, 40px);min-height:var(--pt-size-lg, 40px);max-height:var(--pt-size-lg, 40px);border-radius:var(--pt-roundness-lg, 8px)}.pc_tree__scroll_area{overflow:auto;padding:var(--pt-dimension-200, 4px)}.pc_tree__scroll_area::-webkit-scrollbar,.pc_tree__scroll_area ::-webkit-scrollbar{width:4px;height:4px}.pc_tree__scroll_area::-webkit-scrollbar-thumb,.pc_tree__scroll_area ::-webkit-scrollbar-thumb{cursor:pointer;background-color:rgba(var(--pt-gray-3));border-radius:2px}.pc_tree__scroll_area::-webkit-scrollbar-thumb:hover,.pc_tree__scroll_area ::-webkit-scrollbar-thumb:hover{background-color:rgba(var(--pt-gray-4))}@supports not selector(::-webkit-scrollbar){.pc_tree__scroll_area{scrollbar-width:thin;scrollbar-color:rgba(var(--pt-gray-4)) transparent}}.pc_tree{gap:var(--ptc-tree-gap)}.pc_tree::-webkit-scrollbar,.pc_tree ::-webkit-scrollbar{width:4px;height:4px}.pc_tree::-webkit-scrollbar-thumb,.pc_tree ::-webkit-scrollbar-thumb{cursor:pointer;background-color:rgba(var(--pt-gray-3));border-radius:2px}.pc_tree::-webkit-scrollbar-thumb:hover,.pc_tree ::-webkit-scrollbar-thumb:hover{background-color:rgba(var(--pt-gray-4))}@supports not selector(::-webkit-scrollbar){.pc_tree{scrollbar-width:thin;scrollbar-color:rgba(var(--pt-gray-4)) transparent}}.pc_tree .pc_tree__sort_placeholder{padding-inline-start:calc(var(--ptc-tree-node-padding-start) + var(--ptc-tree-node-draggable-size));width:100%;display:flex;align-items:center}.pc_tree:not(.pc_tree--inline-node){display:flex;flex-direction:column}.pc_tree:not(.pc_tree--inline-node) .pc_tree__node{display:flex}.pc_tree.pc_tree--inline-node{width:fit-content;height:fit-content;display:flex;flex-direction:column}.pc_tree.pc_tree--inline-node .pc_tree__node{width:fit-content;display:inline-flex}.pc_tree.pc_tree--gap-none{--ptc-tree-gap: 0px}.pc_tree.pc_tree--gap-sm{--ptc-tree-gap: var(--pt-dimension-200)}.pc_tree.pc_tree--gap-md{--ptc-tree-gap: var(--pt-dimension-300)}.pc_tree.pc_tree--gap-lg{--ptc-tree-gap: var(--pt-dimension-400)}.pc_tree .pc_tree__node{padding-inline-start:var(--ptc-tree-node-padding-start);height:var(--ptc-tree-node-height);min-height:var(--ptc-tree-node-height);max-height:var(--ptc-tree-node-height);-webkit-user-select:none;user-select:none;align-items:center;outline:0}.pc_tree .pc_tree__node .pc_tree__node__indent .pc_indent_level__item:not(.pc_indent_level--expand){--ptc-tree-item-indent-h: calc(var(--ptc-tree-node-height) + var(--ptc-tree-gap));margin-top:calc(-2 * var(--ptc-tree-gap));height:var(--ptc-tree-item-indent-h);min-height:var(--ptc-tree-item-indent-h);max-height:var(--ptc-tree-item-indent-h)}.pc_tree .pc_tree__node .pc_tree__node__title{padding-inline-start:var(--pt-dimension-200, 4px)}.pc_tree .pc_tree__node__slot{box-sizing:border-box;height:100%;min-width:var(--pt-dimension-4800, 96px);flex:1 1 0%;border-width:1px;border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-br),var(--ptu-border-opacity));border-style:dashed;--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg-secondary),var(--ptu-bg-opacity))}.pc_tree.pc_tree--dragging{padding-bottom:var(--pt-dimension-1000, 20px)}.pc_tree.pc_tree--selectable:not(.pc_tree--disabled):not(.pc_tree--dragging) .pc_tree__node:not(.pc_tree__node--disabled){cursor:pointer;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-property:all}.pc_tree.pc_tree--selectable:not(.pc_tree--disabled):not(.pc_tree--dragging) .pc_tree__node:not(.pc_tree__node--disabled).pc_tree__node--active{--ptu-bg-opacity:1;background-color:rgba(var(--pt-primary-0),var(--ptu-bg-opacity))}.pc_tree.pc_tree--selectable:not(.pc_tree--disabled):not(.pc_tree--dragging) .pc_tree__node:not(.pc_tree__node--disabled).pc_tree__node--active:hover,.pc_tree.pc_tree--selectable:not(.pc_tree--disabled):not(.pc_tree--dragging) .pc_tree__node:not(.pc_tree__node--disabled).pc_tree__node--active[data-highlighted]{--ptu-bg-opacity:1;background-color:rgba(var(--pt-primary-1),var(--ptu-bg-opacity))}.pc_tree.pc_tree--selectable:not(.pc_tree--disabled):not(.pc_tree--dragging) .pc_tree__node:not(.pc_tree__node--disabled).pc_tree__node--active:active{--ptu-bg-opacity:1;background-color:rgba(var(--pt-primary-2),var(--ptu-bg-opacity))}.pc_tree.pc_tree--selectable:not(.pc_tree--disabled):not(.pc_tree--dragging) .pc_tree__node:not(.pc_tree__node--disabled):not(.pc_tree__node--active):hover,.pc_tree.pc_tree--selectable:not(.pc_tree--disabled):not(.pc_tree--dragging) .pc_tree__node:not(.pc_tree__node--disabled):not(.pc_tree__node--active)[data-highlighted]{--ptu-bg-opacity:1;background-color:rgba(var(--pt-gray-1),var(--ptu-bg-opacity))}.pc_tree.pc_tree--selectable:not(.pc_tree--disabled):not(.pc_tree--dragging) .pc_tree__node:not(.pc_tree__node--disabled):not(.pc_tree__node--active):active{--ptu-bg-opacity:1;background-color:rgba(var(--pt-gray-2),var(--ptu-bg-opacity))}.pc_tree.pc_tree--selectable:not(.pc_tree--disabled):not(.pc_tree--dragging) .pc_tree__node:not(.pc_tree__node--disabled):focus{--ptu-shadow:0 0 0 var(--pt-stroke-30) var(--ptu-shadow-color, var(--pt-shadow-color, rgba(var(--pt-focus-br))));box-shadow:var(--ptu-ring-offset-shadow),var(--ptu-ring-shadow),var(--ptu-shadow)}.pc_tree.pc_tree--selectable:not(.pc_tree--disabled):not(.pc_tree--dragging) .pc_tree__node:not(.pc_tree__node--disabled) .pc_tree__node__draggable .pc_tree__node__draggable__icon{--ptu-text-opacity:1;color:rgba(var(--pt-fg-subtle-target),var(--ptu-text-opacity))}.pc_tree.pc_tree--selectable:not(.pc_tree--disabled):not(.pc_tree--dragging) .pc_tree__node.pc_tree__node--disabled.pc_tree__node--active{--ptu-text-opacity:1;color:rgba(var(--pt-disable-fg),var(--ptu-text-opacity))}.pc_tree.pc_tree--sm{--ptc-tree-node-height: var(--pt-size-sm);--ptc-tree-node-padding-start: var(--pt-dimension-200);--ptc-tree-node-draggable-size: var(--pt-dimension-800)}.pc_tree.pc_tree--sm .pc_tree__node,.pc_tree.pc_tree--sm .pc_tree__node__slot{border-radius:var(--pt-roundness-sm, 4px)}.pc_tree.pc_tree--md{--ptc-tree-node-height: var(--pt-size-md);--ptc-tree-node-padding-start: var(--pt-dimension-300);--ptc-tree-node-draggable-size: var(--pt-dimension-1000)}.pc_tree.pc_tree--md .pc_tree__node,.pc_tree.pc_tree--md .pc_tree__node__slot{border-radius:var(--pt-roundness-md, 6px)}.pc_tree.pc_tree--lg{--ptc-tree-node-height: var(--pt-size-lg);--ptc-tree-node-padding-start: var(--pt-dimension-400);--ptc-tree-node-draggable-size: var(--pt-dimension-1000)}.pc_tree.pc_tree--lg .pc_tree__node,.pc_tree.pc_tree--lg .pc_tree__node__slot{border-radius:var(--pt-roundness-lg, 8px)}.pc_tree__node__draggable{display:flex;align-items:center;justify-content:center;width:var(--ptc-tree-node-draggable-size);min-width:var(--ptc-tree-node-draggable-size)}@media (min-width: 768px){.pc_tree__node .pc_tree__node__draggable>.pc_tree__node__draggable__icon{display:none}.pc_tree__node:hover .pc_tree__node__draggable>.pc_tree__node__draggable__icon{display:flex;cursor:grab}}@media (max-width: 767.9px){.pc_tree__node .pc_tree__node__draggable>.pc_tree__node__draggable__icon{display:flex;cursor:grab}}.pc_tree--disabled .pc_tree__node__draggable,.pc_tree__node--disabled .pc_tree__node__draggable{--ptu-text-opacity:1;color:rgba(var(--pt-disable-fg),var(--ptu-text-opacity))}.pc_tree--disabled .pc_tree__node__draggable>.pc_tree__node__draggable__icon,.pc_tree__node--disabled .pc_tree__node__draggable>.pc_tree__node__draggable__icon{cursor:not-allowed!important}\n";
5
5
  const treeId = `${prefix}s-tree`;
6
6
  const addTreeCss = () => addCssToHead(treeId, cssText);
7
7
  const removeTreeCss = () => removeCssFromHead(treeId);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pantograph/styles",
3
- "version": "0.0.4",
3
+ "version": "0.0.6",
4
4
  "id": "styles",
5
5
  "private": false,
6
6
  "publishConfig": {
@@ -29,7 +29,7 @@
29
29
  "email": "sedmedgh@gmail.com"
30
30
  },
31
31
  "dependencies": {
32
- "@pantograph/tokens": "^1.0.10"
32
+ "@pantograph/tokens": ">=1.0.11"
33
33
  },
34
34
  "devDependencies": {
35
35
  "tippy.js": "^6.3.7",