@pantograph/styles 0.0.7 → 0.0.9

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 (60) hide show
  1. package/dist/avatar.css +1 -1
  2. package/dist/avatar.js +1 -1
  3. package/dist/avatar.umd.cjs +1 -1
  4. package/dist/banner.css +1 -0
  5. package/dist/banner.d.ts +5 -0
  6. package/dist/banner.js +7 -0
  7. package/dist/banner.umd.cjs +12 -0
  8. package/dist/combobox.css +1 -1
  9. package/dist/combobox.js +1 -1
  10. package/dist/combobox.umd.cjs +1 -1
  11. package/dist/comment.css +1 -1
  12. package/dist/comment.js +1 -1
  13. package/dist/comment.umd.cjs +1 -1
  14. package/dist/data_table.css +1 -1
  15. package/dist/data_table.js +1 -1
  16. package/dist/data_table.umd.cjs +1 -1
  17. package/dist/index.css +1 -1
  18. package/dist/index.d.ts +1 -0
  19. package/dist/index.js +2 -1
  20. package/dist/index.umd.cjs +4 -1
  21. package/dist/input.css +1 -1
  22. package/dist/input.js +1 -1
  23. package/dist/input.umd.cjs +1 -1
  24. package/dist/link.css +1 -1
  25. package/dist/link.js +1 -1
  26. package/dist/link.umd.cjs +1 -1
  27. package/dist/pin_input.css +1 -1
  28. package/dist/pin_input.js +1 -1
  29. package/dist/pin_input.umd.cjs +1 -1
  30. package/dist/select.css +1 -1
  31. package/dist/select.js +1 -1
  32. package/dist/select.umd.cjs +1 -1
  33. package/dist/steps.css +1 -1
  34. package/dist/steps.js +1 -1
  35. package/dist/steps.umd.cjs +1 -1
  36. package/dist/table.css +1 -1
  37. package/dist/table.js +1 -1
  38. package/dist/table.umd.cjs +1 -1
  39. package/dist/tbody.css +1 -1
  40. package/dist/tbody.js +1 -1
  41. package/dist/tbody.umd.cjs +1 -1
  42. package/dist/tcell.css +1 -1
  43. package/dist/tcell.js +1 -1
  44. package/dist/tcell.umd.cjs +1 -1
  45. package/dist/textarea.css +1 -1
  46. package/dist/textarea.js +1 -1
  47. package/dist/textarea.umd.cjs +1 -1
  48. package/dist/tfoot.css +1 -1
  49. package/dist/tfoot.js +1 -1
  50. package/dist/tfoot.umd.cjs +1 -1
  51. package/dist/thead.css +1 -1
  52. package/dist/thead.js +1 -1
  53. package/dist/thead.umd.cjs +1 -1
  54. package/dist/tooltip.css +1 -1
  55. package/dist/tooltip.js +1 -1
  56. package/dist/tooltip.umd.cjs +1 -1
  57. package/dist/tr.css +1 -1
  58. package/dist/tr.js +1 -1
  59. package/dist/tr.umd.cjs +1 -1
  60. package/package.json +1 -1
package/dist/thead.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { addCssToHead, removeCssFromHead, prefix } from "@pantograph/tokens";
2
- const cssText = ".pc_table__thead{--ptc-cell-bg: rgba(var(--pt-bg));background:var(--ptc-cell-bg);border-width:var(--pt-stroke-0, 0px);border-bottom-width:1px;--ptu-border-opacity:1;--ptu-border-bottom-opacity:var(--ptu-border-opacity);border-bottom-color:rgba(var(--pt-br),var(--ptu-border-bottom-opacity));border-bottom-style:solid}.pc_table__thead--sticky{position:sticky;top:var(--pt-dimension-0, 0px);z-index:3;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_table__thead--sticky:not(.pc_table__thead--hide-shadow){--ptu-shadow:0px 0px var(--pt-dimension-100) 0px var(--pt-alpha-gray-2), 0 var(--pt-dimension-400) var(--pt-dimension-800) 0px var(--pt-alpha-gray-2);box-shadow:var(--ptu-ring-offset-shadow),var(--ptu-ring-shadow),var(--ptu-shadow)}\n";
2
+ const cssText = ".pc_table__thead{--ptc-cell-bg: rgba(var(--pt-bg));background:var(--ptc-cell-bg);box-sizing:border-box;border-width:var(--pt-stroke-0, 0px);border-bottom-width:1px;--ptu-border-opacity:1;--ptu-border-bottom-opacity:var(--ptu-border-opacity);border-bottom-color:rgba(var(--pt-br),var(--ptu-border-bottom-opacity));border-bottom-style:solid}.pc_table__thead--sticky{position:sticky;top:var(--pt-dimension-0, 0px);z-index:3;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_table__thead--sticky:not(.pc_table__thead--hide-shadow){--ptu-shadow:0px 0px var(--pt-dimension-100) 0px var(--pt-alpha-gray-2), 0 var(--pt-dimension-400) var(--pt-dimension-800) 0px var(--pt-alpha-gray-2);box-shadow:var(--ptu-ring-offset-shadow),var(--ptu-ring-shadow),var(--ptu-shadow)}\n";
3
3
  const theadId = `${prefix}s-thead`;
4
4
  const addTheadCss = () => addCssToHead(theadId, cssText);
5
5
  const removeTheadCss = () => removeCssFromHead(theadId);
@@ -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_table__thead{--ptc-cell-bg: rgba(var(--pt-bg));background:var(--ptc-cell-bg);border-width:var(--pt-stroke-0, 0px);border-bottom-width:1px;--ptu-border-opacity:1;--ptu-border-bottom-opacity:var(--ptu-border-opacity);border-bottom-color:rgba(var(--pt-br),var(--ptu-border-bottom-opacity));border-bottom-style:solid}.pc_table__thead--sticky{position:sticky;top:var(--pt-dimension-0, 0px);z-index:3;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_table__thead--sticky:not(.pc_table__thead--hide-shadow){--ptu-shadow:0px 0px var(--pt-dimension-100) 0px var(--pt-alpha-gray-2), 0 var(--pt-dimension-400) var(--pt-dimension-800) 0px var(--pt-alpha-gray-2);box-shadow:var(--ptu-ring-offset-shadow),var(--ptu-ring-shadow),var(--ptu-shadow)}\n";
4
+ const cssText = ".pc_table__thead{--ptc-cell-bg: rgba(var(--pt-bg));background:var(--ptc-cell-bg);box-sizing:border-box;border-width:var(--pt-stroke-0, 0px);border-bottom-width:1px;--ptu-border-opacity:1;--ptu-border-bottom-opacity:var(--ptu-border-opacity);border-bottom-color:rgba(var(--pt-br),var(--ptu-border-bottom-opacity));border-bottom-style:solid}.pc_table__thead--sticky{position:sticky;top:var(--pt-dimension-0, 0px);z-index:3;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_table__thead--sticky:not(.pc_table__thead--hide-shadow){--ptu-shadow:0px 0px var(--pt-dimension-100) 0px var(--pt-alpha-gray-2), 0 var(--pt-dimension-400) var(--pt-dimension-800) 0px var(--pt-alpha-gray-2);box-shadow:var(--ptu-ring-offset-shadow),var(--ptu-ring-shadow),var(--ptu-shadow)}\n";
5
5
  const theadId = `${prefix}s-thead`;
6
6
  const addTheadCss = () => addCssToHead(theadId, cssText);
7
7
  const removeTheadCss = () => removeCssFromHead(theadId);
package/dist/tooltip.css CHANGED
@@ -1 +1 @@
1
- .pc_tooltip__content{position:relative;box-sizing:border-box;display:flex;gap:var(--pt-dimension-300, 6px);border-width:var(--pt-stroke-10, 1px);--ptu-border-opacity:1;border-color:rgba(var(--pt-br),var(--ptu-border-opacity));border-radius:var(--pt-roundness-lg, 8px);border-style:solid;--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg),var(--ptu-bg-opacity));padding-top:var(--pt-dimension-200, 4px);padding-bottom:var(--pt-dimension-200, 4px);padding-left:var(--pt-dimension-300, 6px);padding-right:var(--pt-dimension-300, 6px);--ptu-text-opacity:1;color:rgba(var(--pt-fg),var(--ptu-text-opacity));--ptu-shadow:0px 0px var(--pt-dimension-100) 0px var(--pt-alpha-gray-2), 0 var(--pt-dimension-400) var(--pt-dimension-800) 0px var(--pt-alpha-gray-2);box-shadow:var(--ptu-ring-offset-shadow),var(--ptu-ring-shadow),var(--ptu-shadow);max-height:var(--reka-tooltip-content-available-height);max-width:var(--reka-tooltip-content-available-width);width:var(--ptc-tooltip-w, auto);outline:0}.pc_tooltip__content:before{content:"";position:absolute;width:8px;height:8px;--ptu-skew-x:6deg;--ptu-skew-y:6deg;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z));--ptu-border-opacity:1;border-color:rgba(var(--pt-br),var(--ptu-border-opacity));border-style:solid;--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg),var(--ptu-bg-opacity));border-top-right-radius:3px;border-bottom-left-radius:3px}.pc_tooltip__content[data-side=bottom]:before{--ptu-rotate-x:0;--ptu-rotate-y:0;--ptu-rotate-z:0;--ptu-rotate:-45deg;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z));border-top-width:1px;border-right-width:1px;top:-4.5px}.pc_tooltip__content[data-side=bottom][data-align=center]:before{left:50%;--ptu-translate-x:-50%;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z))}.pc_tooltip__content[data-side=bottom][data-align=start]:before{inset-inline-start:12px}.pc_tooltip__content[data-side=bottom][data-align=end]:before{inset-inline-end:12px}.pc_tooltip__content[data-side=top]:before{--ptu-rotate-x:0;--ptu-rotate-y:0;--ptu-rotate-z:0;--ptu-rotate:-45deg;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z));border-bottom-width:1px;border-left-width:1px;bottom:-4.5px}.pc_tooltip__content[data-side=top][data-align=center]:before{left:50%;--ptu-translate-x:-50%;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z))}.pc_tooltip__content[data-side=top][data-align=start]:before{inset-inline-start:12px}.pc_tooltip__content[data-side=top][data-align=end]:before{inset-inline-end:12px}.pc_tooltip__content[data-side=right]:before{top:50%;--ptu-translate-y:-50%;--ptu-rotate-x:0;--ptu-rotate-y:0;--ptu-rotate-z:0;--ptu-rotate:45deg;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z));border-bottom-width:1px;border-left-width:1px;left:-4.5px}.pc_tooltip__content[data-side=left]:before{top:50%;--ptu-translate-y:-50%;--ptu-rotate-x:0;--ptu-rotate-y:0;--ptu-rotate-z:0;--ptu-rotate:45deg;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z));border-top-width:1px;border-right-width:1px;right:-4.5px}.pc_tooltip__content .pc_tooltip__text{--ptu-text-opacity:1;color:rgba(var(--pt-fg),var(--ptu-text-opacity));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_tooltip{position:relative}.pc_tooltip:before{content:attr(data-tooltip);pointer-events:none;box-sizing:border-box;border-width:1px;--ptu-border-opacity:1;border-color:rgba(var(--pt-grayscale-dark-2),var(--ptu-border-opacity));border-radius:var(--pt-roundness-lg, 8px);border-style:solid;--ptu-bg-opacity:1;background-color:rgba(var(--pt-grayscale-dark-0),var(--ptu-bg-opacity));--ptu-shadow:0px 0px var(--pt-dimension-100) 0px var(--pt-alpha-gray-2), 0 var(--pt-dimension-400) var(--pt-dimension-800) 0px var(--pt-alpha-gray-2);box-shadow:var(--ptu-ring-offset-shadow),var(--ptu-ring-shadow),var(--ptu-shadow);position:absolute;z-index:1000;max-width:80vw;padding-top:var(--pt-dimension-200, 4px);padding-bottom:var(--pt-dimension-200, 4px);padding-left:var(--pt-dimension-300, 6px);padding-right:var(--pt-dimension-300, 6px);--ptu-text-opacity:1;color:rgba(var(--pt-grayscale-dark-8),var(--ptu-text-opacity));text-wrap:nowrap;opacity:0;visibility:hidden}.pc_tooltip:after{pointer-events:none;position:absolute;z-index:1000;width:8px;height:8px;--ptu-skew-x:6deg;--ptu-skew-y:6deg;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z));--ptu-border-opacity:1;border-color:rgba(var(--pt-grayscale-dark-2),var(--ptu-border-opacity));border-style:solid;--ptu-bg-opacity:1;background-color:rgba(var(--pt-grayscale-dark-0),var(--ptu-bg-opacity));border-top-right-radius:3px;border-bottom-left-radius:3px;content:"";opacity:0;visibility:hidden}.pc_tooltip:hover:before,.pc_tooltip:hover:after{opacity:1;visibility:visible}.pc_tooltip.pc_tooltip--top:before,.pc_tooltip:not(.pc_tooltip--bottom):not(.pc_tooltip--right):not(.pc_tooltip--left):before{bottom:calc(100% + 12px);left:50%;transform:translate(-50%)}.pc_tooltip.pc_tooltip--top:after,.pc_tooltip:not(.pc_tooltip--bottom):not(.pc_tooltip--right):not(.pc_tooltip--left):after{--ptu-translate-x:50%;--ptu-rotate-x:0;--ptu-rotate-y:0;--ptu-rotate-z:0;--ptu-rotate:-45deg;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z));border-bottom-width:1px;border-left-width:1px;bottom:calc(100% + 8px);left:calc(50% - 8px)}.pc_tooltip.pc_tooltip--bottom:before{top:calc(100% + 12px);left:50%;transform:translate(-50%)}.pc_tooltip.pc_tooltip--bottom:after{--ptu-translate-x:50%;--ptu-rotate-x:0;--ptu-rotate-y:0;--ptu-rotate-z:0;--ptu-rotate:-45deg;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z));border-top-width:1px;border-right-width:1px;top:calc(100% + 8px);left:calc(50% - 8px)}.pc_tooltip.pc_tooltip--right:before{left:calc(100% + 12px);top:50%;transform:translateY(-50%)}.pc_tooltip.pc_tooltip--right:after{--ptu-translate-y:50%;--ptu-rotate-x:0;--ptu-rotate-y:0;--ptu-rotate-z:0;--ptu-rotate:45deg;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z));border-bottom-width:1px;border-left-width:1px;left:calc(100% + 8px);top:calc(50% - 8px)}.pc_tooltip.pc_tooltip--left:before{right:calc(100% + 12px);top:50%;transform:translateY(-50%)}.pc_tooltip.pc_tooltip--left:after{--ptu-translate-y:50%;--ptu-rotate-x:0;--ptu-rotate-y:0;--ptu-rotate-z:0;--ptu-rotate:45deg;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z));border-top-width:1px;border-right-width:1px;right:calc(100% + 8px);top:calc(50% - 8px)}
1
+ .pc_tooltip__content{position:relative;box-sizing:border-box;min-height:var(--pt-size-md, 32px);display:flex;gap:var(--pt-dimension-300, 6px);border-width:var(--pt-stroke-10, 1px);--ptu-border-opacity:1;border-color:rgba(var(--pt-br),var(--ptu-border-opacity));border-radius:var(--pt-roundness-lg, 8px);border-style:solid;--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg),var(--ptu-bg-opacity));padding-top:var(--pt-dimension-200, 4px);padding-bottom:var(--pt-dimension-200, 4px);padding-left:var(--pt-dimension-300, 6px);padding-right:var(--pt-dimension-300, 6px);--ptu-text-opacity:1;color:rgba(var(--pt-fg),var(--ptu-text-opacity));--ptu-shadow:0px 0px var(--pt-dimension-100) 0px var(--pt-alpha-gray-2), 0 var(--pt-dimension-400) var(--pt-dimension-800) 0px var(--pt-alpha-gray-2);box-shadow:var(--ptu-ring-offset-shadow),var(--ptu-ring-shadow),var(--ptu-shadow);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;max-height:var(--reka-tooltip-content-available-height);max-width:var(--reka-tooltip-content-available-width);width:var(--ptc-tooltip-w, auto);outline:0}.pc_tooltip__content:before{content:"";position:absolute;width:8px;height:8px;--ptu-skew-x:6deg;--ptu-skew-y:6deg;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z));--ptu-border-opacity:1;border-color:rgba(var(--pt-br),var(--ptu-border-opacity));border-style:solid;--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg),var(--ptu-bg-opacity));border-top-right-radius:3px;border-bottom-left-radius:3px}.pc_tooltip__content[data-side=bottom]:before{--ptu-rotate-x:0;--ptu-rotate-y:0;--ptu-rotate-z:0;--ptu-rotate:-45deg;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z));border-top-width:1px;border-right-width:1px;top:-4.5px}.pc_tooltip__content[data-side=bottom][data-align=center]:before{left:50%;--ptu-translate-x:-50%;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z))}.pc_tooltip__content[data-side=bottom][data-align=start]:before{inset-inline-start:12px}.pc_tooltip__content[data-side=bottom][data-align=end]:before{inset-inline-end:12px}.pc_tooltip__content[data-side=top]:before{--ptu-rotate-x:0;--ptu-rotate-y:0;--ptu-rotate-z:0;--ptu-rotate:-45deg;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z));border-bottom-width:1px;border-left-width:1px;bottom:-4.5px}.pc_tooltip__content[data-side=top][data-align=center]:before{left:50%;--ptu-translate-x:-50%;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z))}.pc_tooltip__content[data-side=top][data-align=start]:before{inset-inline-start:12px}.pc_tooltip__content[data-side=top][data-align=end]:before{inset-inline-end:12px}.pc_tooltip__content[data-side=right]:before{top:50%;--ptu-translate-y:-50%;--ptu-rotate-x:0;--ptu-rotate-y:0;--ptu-rotate-z:0;--ptu-rotate:45deg;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z));border-bottom-width:1px;border-left-width:1px;left:-4.5px}.pc_tooltip__content[data-side=left]:before{top:50%;--ptu-translate-y:-50%;--ptu-rotate-x:0;--ptu-rotate-y:0;--ptu-rotate-z:0;--ptu-rotate:45deg;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z));border-top-width:1px;border-right-width:1px;right:-4.5px}.pc_tooltip__content .pc_tooltip__text{--ptu-text-opacity:1;color:rgba(var(--pt-fg),var(--ptu-text-opacity));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_tooltip{position:relative}.pc_tooltip:before{content:attr(data-tooltip);pointer-events:none;box-sizing:border-box;border-width:1px;--ptu-border-opacity:1;border-color:rgba(var(--pt-grayscale-dark-2),var(--ptu-border-opacity));border-radius:var(--pt-roundness-lg, 8px);border-style:solid;--ptu-bg-opacity:1;background-color:rgba(var(--pt-grayscale-dark-0),var(--ptu-bg-opacity));--ptu-shadow:0px 0px var(--pt-dimension-100) 0px var(--pt-alpha-gray-2), 0 var(--pt-dimension-400) var(--pt-dimension-800) 0px var(--pt-alpha-gray-2);box-shadow:var(--ptu-ring-offset-shadow),var(--ptu-ring-shadow),var(--ptu-shadow);position:absolute;z-index:1000;max-width:80vw;min-height:var(--pt-size-md, 32px);padding-top:var(--pt-dimension-200, 4px);padding-bottom:var(--pt-dimension-200, 4px);padding-left:var(--pt-dimension-300, 6px);padding-right:var(--pt-dimension-300, 6px);--ptu-text-opacity:1;color:rgba(var(--pt-grayscale-dark-8),var(--ptu-text-opacity));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;line-height:var(--pt-size-sm);text-wrap:nowrap;opacity:0;visibility:hidden}.pc_tooltip:after{pointer-events:none;position:absolute;z-index:1000;width:8px;height:8px;--ptu-skew-x:6deg;--ptu-skew-y:6deg;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z));--ptu-border-opacity:1;border-color:rgba(var(--pt-grayscale-dark-2),var(--ptu-border-opacity));border-style:solid;--ptu-bg-opacity:1;background-color:rgba(var(--pt-grayscale-dark-0),var(--ptu-bg-opacity));border-top-right-radius:3px;border-bottom-left-radius:3px;content:"";opacity:0;visibility:hidden}.pc_tooltip:hover:before,.pc_tooltip:hover:after{opacity:1;visibility:visible}.pc_tooltip.pc_tooltip--top:before,.pc_tooltip:not(.pc_tooltip--bottom):not(.pc_tooltip--right):not(.pc_tooltip--left):before{bottom:calc(100% + 12px);left:50%;transform:translate(-50%)}.pc_tooltip.pc_tooltip--top:after,.pc_tooltip:not(.pc_tooltip--bottom):not(.pc_tooltip--right):not(.pc_tooltip--left):after{--ptu-translate-x:50%;--ptu-rotate-x:0;--ptu-rotate-y:0;--ptu-rotate-z:0;--ptu-rotate:-45deg;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z));border-bottom-width:1px;border-left-width:1px;bottom:calc(100% + 8px);left:calc(50% - 8px)}.pc_tooltip.pc_tooltip--bottom:before{top:calc(100% + 12px);left:50%;transform:translate(-50%)}.pc_tooltip.pc_tooltip--bottom:after{--ptu-translate-x:50%;--ptu-rotate-x:0;--ptu-rotate-y:0;--ptu-rotate-z:0;--ptu-rotate:-45deg;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z));border-top-width:1px;border-right-width:1px;top:calc(100% + 8px);left:calc(50% - 8px)}.pc_tooltip.pc_tooltip--right:before{left:calc(100% + 12px);top:50%;transform:translateY(-50%)}.pc_tooltip.pc_tooltip--right:after{--ptu-translate-y:50%;--ptu-rotate-x:0;--ptu-rotate-y:0;--ptu-rotate-z:0;--ptu-rotate:45deg;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z));border-bottom-width:1px;border-left-width:1px;left:calc(100% + 8px);top:calc(50% - 8px)}.pc_tooltip.pc_tooltip--left:before{right:calc(100% + 12px);top:50%;transform:translateY(-50%)}.pc_tooltip.pc_tooltip--left:after{--ptu-translate-y:50%;--ptu-rotate-x:0;--ptu-rotate-y:0;--ptu-rotate-z:0;--ptu-rotate:45deg;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z));border-top-width:1px;border-right-width:1px;right:calc(100% + 8px);top:calc(50% - 8px)}
package/dist/tooltip.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { addCssToHead, removeCssFromHead, prefix } from "@pantograph/tokens";
2
- const cssText = ".pc_tooltip__content{position:relative;box-sizing:border-box;display:flex;gap:var(--pt-dimension-300, 6px);border-width:var(--pt-stroke-10, 1px);--ptu-border-opacity:1;border-color:rgba(var(--pt-br),var(--ptu-border-opacity));border-radius:var(--pt-roundness-lg, 8px);border-style:solid;--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg),var(--ptu-bg-opacity));padding-top:var(--pt-dimension-200, 4px);padding-bottom:var(--pt-dimension-200, 4px);padding-left:var(--pt-dimension-300, 6px);padding-right:var(--pt-dimension-300, 6px);--ptu-text-opacity:1;color:rgba(var(--pt-fg),var(--ptu-text-opacity));--ptu-shadow:0px 0px var(--pt-dimension-100) 0px var(--pt-alpha-gray-2), 0 var(--pt-dimension-400) var(--pt-dimension-800) 0px var(--pt-alpha-gray-2);box-shadow:var(--ptu-ring-offset-shadow),var(--ptu-ring-shadow),var(--ptu-shadow);max-height:var(--reka-tooltip-content-available-height);max-width:var(--reka-tooltip-content-available-width);width:var(--ptc-tooltip-w, auto);outline:0}.pc_tooltip__content:before{content:\"\";position:absolute;width:8px;height:8px;--ptu-skew-x:6deg;--ptu-skew-y:6deg;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z));--ptu-border-opacity:1;border-color:rgba(var(--pt-br),var(--ptu-border-opacity));border-style:solid;--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg),var(--ptu-bg-opacity));border-top-right-radius:3px;border-bottom-left-radius:3px}.pc_tooltip__content[data-side=bottom]:before{--ptu-rotate-x:0;--ptu-rotate-y:0;--ptu-rotate-z:0;--ptu-rotate:-45deg;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z));border-top-width:1px;border-right-width:1px;top:-4.5px}.pc_tooltip__content[data-side=bottom][data-align=center]:before{left:50%;--ptu-translate-x:-50%;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z))}.pc_tooltip__content[data-side=bottom][data-align=start]:before{inset-inline-start:12px}.pc_tooltip__content[data-side=bottom][data-align=end]:before{inset-inline-end:12px}.pc_tooltip__content[data-side=top]:before{--ptu-rotate-x:0;--ptu-rotate-y:0;--ptu-rotate-z:0;--ptu-rotate:-45deg;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z));border-bottom-width:1px;border-left-width:1px;bottom:-4.5px}.pc_tooltip__content[data-side=top][data-align=center]:before{left:50%;--ptu-translate-x:-50%;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z))}.pc_tooltip__content[data-side=top][data-align=start]:before{inset-inline-start:12px}.pc_tooltip__content[data-side=top][data-align=end]:before{inset-inline-end:12px}.pc_tooltip__content[data-side=right]:before{top:50%;--ptu-translate-y:-50%;--ptu-rotate-x:0;--ptu-rotate-y:0;--ptu-rotate-z:0;--ptu-rotate:45deg;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z));border-bottom-width:1px;border-left-width:1px;left:-4.5px}.pc_tooltip__content[data-side=left]:before{top:50%;--ptu-translate-y:-50%;--ptu-rotate-x:0;--ptu-rotate-y:0;--ptu-rotate-z:0;--ptu-rotate:45deg;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z));border-top-width:1px;border-right-width:1px;right:-4.5px}.pc_tooltip__content .pc_tooltip__text{--ptu-text-opacity:1;color:rgba(var(--pt-fg),var(--ptu-text-opacity));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_tooltip{position:relative}.pc_tooltip:before{content:attr(data-tooltip);pointer-events:none;box-sizing:border-box;border-width:1px;--ptu-border-opacity:1;border-color:rgba(var(--pt-grayscale-dark-2),var(--ptu-border-opacity));border-radius:var(--pt-roundness-lg, 8px);border-style:solid;--ptu-bg-opacity:1;background-color:rgba(var(--pt-grayscale-dark-0),var(--ptu-bg-opacity));--ptu-shadow:0px 0px var(--pt-dimension-100) 0px var(--pt-alpha-gray-2), 0 var(--pt-dimension-400) var(--pt-dimension-800) 0px var(--pt-alpha-gray-2);box-shadow:var(--ptu-ring-offset-shadow),var(--ptu-ring-shadow),var(--ptu-shadow);position:absolute;z-index:1000;max-width:80vw;padding-top:var(--pt-dimension-200, 4px);padding-bottom:var(--pt-dimension-200, 4px);padding-left:var(--pt-dimension-300, 6px);padding-right:var(--pt-dimension-300, 6px);--ptu-text-opacity:1;color:rgba(var(--pt-grayscale-dark-8),var(--ptu-text-opacity));text-wrap:nowrap;opacity:0;visibility:hidden}.pc_tooltip:after{pointer-events:none;position:absolute;z-index:1000;width:8px;height:8px;--ptu-skew-x:6deg;--ptu-skew-y:6deg;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z));--ptu-border-opacity:1;border-color:rgba(var(--pt-grayscale-dark-2),var(--ptu-border-opacity));border-style:solid;--ptu-bg-opacity:1;background-color:rgba(var(--pt-grayscale-dark-0),var(--ptu-bg-opacity));border-top-right-radius:3px;border-bottom-left-radius:3px;content:\"\";opacity:0;visibility:hidden}.pc_tooltip:hover:before,.pc_tooltip:hover:after{opacity:1;visibility:visible}.pc_tooltip.pc_tooltip--top:before,.pc_tooltip:not(.pc_tooltip--bottom):not(.pc_tooltip--right):not(.pc_tooltip--left):before{bottom:calc(100% + 12px);left:50%;transform:translate(-50%)}.pc_tooltip.pc_tooltip--top:after,.pc_tooltip:not(.pc_tooltip--bottom):not(.pc_tooltip--right):not(.pc_tooltip--left):after{--ptu-translate-x:50%;--ptu-rotate-x:0;--ptu-rotate-y:0;--ptu-rotate-z:0;--ptu-rotate:-45deg;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z));border-bottom-width:1px;border-left-width:1px;bottom:calc(100% + 8px);left:calc(50% - 8px)}.pc_tooltip.pc_tooltip--bottom:before{top:calc(100% + 12px);left:50%;transform:translate(-50%)}.pc_tooltip.pc_tooltip--bottom:after{--ptu-translate-x:50%;--ptu-rotate-x:0;--ptu-rotate-y:0;--ptu-rotate-z:0;--ptu-rotate:-45deg;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z));border-top-width:1px;border-right-width:1px;top:calc(100% + 8px);left:calc(50% - 8px)}.pc_tooltip.pc_tooltip--right:before{left:calc(100% + 12px);top:50%;transform:translateY(-50%)}.pc_tooltip.pc_tooltip--right:after{--ptu-translate-y:50%;--ptu-rotate-x:0;--ptu-rotate-y:0;--ptu-rotate-z:0;--ptu-rotate:45deg;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z));border-bottom-width:1px;border-left-width:1px;left:calc(100% + 8px);top:calc(50% - 8px)}.pc_tooltip.pc_tooltip--left:before{right:calc(100% + 12px);top:50%;transform:translateY(-50%)}.pc_tooltip.pc_tooltip--left:after{--ptu-translate-y:50%;--ptu-rotate-x:0;--ptu-rotate-y:0;--ptu-rotate-z:0;--ptu-rotate:45deg;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z));border-top-width:1px;border-right-width:1px;right:calc(100% + 8px);top:calc(50% - 8px)}\n";
2
+ const cssText = ".pc_tooltip__content{position:relative;box-sizing:border-box;min-height:var(--pt-size-md, 32px);display:flex;gap:var(--pt-dimension-300, 6px);border-width:var(--pt-stroke-10, 1px);--ptu-border-opacity:1;border-color:rgba(var(--pt-br),var(--ptu-border-opacity));border-radius:var(--pt-roundness-lg, 8px);border-style:solid;--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg),var(--ptu-bg-opacity));padding-top:var(--pt-dimension-200, 4px);padding-bottom:var(--pt-dimension-200, 4px);padding-left:var(--pt-dimension-300, 6px);padding-right:var(--pt-dimension-300, 6px);--ptu-text-opacity:1;color:rgba(var(--pt-fg),var(--ptu-text-opacity));--ptu-shadow:0px 0px var(--pt-dimension-100) 0px var(--pt-alpha-gray-2), 0 var(--pt-dimension-400) var(--pt-dimension-800) 0px var(--pt-alpha-gray-2);box-shadow:var(--ptu-ring-offset-shadow),var(--ptu-ring-shadow),var(--ptu-shadow);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;max-height:var(--reka-tooltip-content-available-height);max-width:var(--reka-tooltip-content-available-width);width:var(--ptc-tooltip-w, auto);outline:0}.pc_tooltip__content:before{content:\"\";position:absolute;width:8px;height:8px;--ptu-skew-x:6deg;--ptu-skew-y:6deg;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z));--ptu-border-opacity:1;border-color:rgba(var(--pt-br),var(--ptu-border-opacity));border-style:solid;--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg),var(--ptu-bg-opacity));border-top-right-radius:3px;border-bottom-left-radius:3px}.pc_tooltip__content[data-side=bottom]:before{--ptu-rotate-x:0;--ptu-rotate-y:0;--ptu-rotate-z:0;--ptu-rotate:-45deg;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z));border-top-width:1px;border-right-width:1px;top:-4.5px}.pc_tooltip__content[data-side=bottom][data-align=center]:before{left:50%;--ptu-translate-x:-50%;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z))}.pc_tooltip__content[data-side=bottom][data-align=start]:before{inset-inline-start:12px}.pc_tooltip__content[data-side=bottom][data-align=end]:before{inset-inline-end:12px}.pc_tooltip__content[data-side=top]:before{--ptu-rotate-x:0;--ptu-rotate-y:0;--ptu-rotate-z:0;--ptu-rotate:-45deg;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z));border-bottom-width:1px;border-left-width:1px;bottom:-4.5px}.pc_tooltip__content[data-side=top][data-align=center]:before{left:50%;--ptu-translate-x:-50%;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z))}.pc_tooltip__content[data-side=top][data-align=start]:before{inset-inline-start:12px}.pc_tooltip__content[data-side=top][data-align=end]:before{inset-inline-end:12px}.pc_tooltip__content[data-side=right]:before{top:50%;--ptu-translate-y:-50%;--ptu-rotate-x:0;--ptu-rotate-y:0;--ptu-rotate-z:0;--ptu-rotate:45deg;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z));border-bottom-width:1px;border-left-width:1px;left:-4.5px}.pc_tooltip__content[data-side=left]:before{top:50%;--ptu-translate-y:-50%;--ptu-rotate-x:0;--ptu-rotate-y:0;--ptu-rotate-z:0;--ptu-rotate:45deg;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z));border-top-width:1px;border-right-width:1px;right:-4.5px}.pc_tooltip__content .pc_tooltip__text{--ptu-text-opacity:1;color:rgba(var(--pt-fg),var(--ptu-text-opacity));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_tooltip{position:relative}.pc_tooltip:before{content:attr(data-tooltip);pointer-events:none;box-sizing:border-box;border-width:1px;--ptu-border-opacity:1;border-color:rgba(var(--pt-grayscale-dark-2),var(--ptu-border-opacity));border-radius:var(--pt-roundness-lg, 8px);border-style:solid;--ptu-bg-opacity:1;background-color:rgba(var(--pt-grayscale-dark-0),var(--ptu-bg-opacity));--ptu-shadow:0px 0px var(--pt-dimension-100) 0px var(--pt-alpha-gray-2), 0 var(--pt-dimension-400) var(--pt-dimension-800) 0px var(--pt-alpha-gray-2);box-shadow:var(--ptu-ring-offset-shadow),var(--ptu-ring-shadow),var(--ptu-shadow);position:absolute;z-index:1000;max-width:80vw;min-height:var(--pt-size-md, 32px);padding-top:var(--pt-dimension-200, 4px);padding-bottom:var(--pt-dimension-200, 4px);padding-left:var(--pt-dimension-300, 6px);padding-right:var(--pt-dimension-300, 6px);--ptu-text-opacity:1;color:rgba(var(--pt-grayscale-dark-8),var(--ptu-text-opacity));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;line-height:var(--pt-size-sm);text-wrap:nowrap;opacity:0;visibility:hidden}.pc_tooltip:after{pointer-events:none;position:absolute;z-index:1000;width:8px;height:8px;--ptu-skew-x:6deg;--ptu-skew-y:6deg;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z));--ptu-border-opacity:1;border-color:rgba(var(--pt-grayscale-dark-2),var(--ptu-border-opacity));border-style:solid;--ptu-bg-opacity:1;background-color:rgba(var(--pt-grayscale-dark-0),var(--ptu-bg-opacity));border-top-right-radius:3px;border-bottom-left-radius:3px;content:\"\";opacity:0;visibility:hidden}.pc_tooltip:hover:before,.pc_tooltip:hover:after{opacity:1;visibility:visible}.pc_tooltip.pc_tooltip--top:before,.pc_tooltip:not(.pc_tooltip--bottom):not(.pc_tooltip--right):not(.pc_tooltip--left):before{bottom:calc(100% + 12px);left:50%;transform:translate(-50%)}.pc_tooltip.pc_tooltip--top:after,.pc_tooltip:not(.pc_tooltip--bottom):not(.pc_tooltip--right):not(.pc_tooltip--left):after{--ptu-translate-x:50%;--ptu-rotate-x:0;--ptu-rotate-y:0;--ptu-rotate-z:0;--ptu-rotate:-45deg;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z));border-bottom-width:1px;border-left-width:1px;bottom:calc(100% + 8px);left:calc(50% - 8px)}.pc_tooltip.pc_tooltip--bottom:before{top:calc(100% + 12px);left:50%;transform:translate(-50%)}.pc_tooltip.pc_tooltip--bottom:after{--ptu-translate-x:50%;--ptu-rotate-x:0;--ptu-rotate-y:0;--ptu-rotate-z:0;--ptu-rotate:-45deg;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z));border-top-width:1px;border-right-width:1px;top:calc(100% + 8px);left:calc(50% - 8px)}.pc_tooltip.pc_tooltip--right:before{left:calc(100% + 12px);top:50%;transform:translateY(-50%)}.pc_tooltip.pc_tooltip--right:after{--ptu-translate-y:50%;--ptu-rotate-x:0;--ptu-rotate-y:0;--ptu-rotate-z:0;--ptu-rotate:45deg;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z));border-bottom-width:1px;border-left-width:1px;left:calc(100% + 8px);top:calc(50% - 8px)}.pc_tooltip.pc_tooltip--left:before{right:calc(100% + 12px);top:50%;transform:translateY(-50%)}.pc_tooltip.pc_tooltip--left:after{--ptu-translate-y:50%;--ptu-rotate-x:0;--ptu-rotate-y:0;--ptu-rotate-z:0;--ptu-rotate:45deg;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z));border-top-width:1px;border-right-width:1px;right:calc(100% + 8px);top:calc(50% - 8px)}\n";
3
3
  const tooltipId = `${prefix}s-tooltip`;
4
4
  const addTooltipCss = () => addCssToHead(tooltipId, cssText);
5
5
  const removeTooltipCss = () => removeCssFromHead(tooltipId);
@@ -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_tooltip__content{position:relative;box-sizing:border-box;display:flex;gap:var(--pt-dimension-300, 6px);border-width:var(--pt-stroke-10, 1px);--ptu-border-opacity:1;border-color:rgba(var(--pt-br),var(--ptu-border-opacity));border-radius:var(--pt-roundness-lg, 8px);border-style:solid;--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg),var(--ptu-bg-opacity));padding-top:var(--pt-dimension-200, 4px);padding-bottom:var(--pt-dimension-200, 4px);padding-left:var(--pt-dimension-300, 6px);padding-right:var(--pt-dimension-300, 6px);--ptu-text-opacity:1;color:rgba(var(--pt-fg),var(--ptu-text-opacity));--ptu-shadow:0px 0px var(--pt-dimension-100) 0px var(--pt-alpha-gray-2), 0 var(--pt-dimension-400) var(--pt-dimension-800) 0px var(--pt-alpha-gray-2);box-shadow:var(--ptu-ring-offset-shadow),var(--ptu-ring-shadow),var(--ptu-shadow);max-height:var(--reka-tooltip-content-available-height);max-width:var(--reka-tooltip-content-available-width);width:var(--ptc-tooltip-w, auto);outline:0}.pc_tooltip__content:before{content:\"\";position:absolute;width:8px;height:8px;--ptu-skew-x:6deg;--ptu-skew-y:6deg;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z));--ptu-border-opacity:1;border-color:rgba(var(--pt-br),var(--ptu-border-opacity));border-style:solid;--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg),var(--ptu-bg-opacity));border-top-right-radius:3px;border-bottom-left-radius:3px}.pc_tooltip__content[data-side=bottom]:before{--ptu-rotate-x:0;--ptu-rotate-y:0;--ptu-rotate-z:0;--ptu-rotate:-45deg;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z));border-top-width:1px;border-right-width:1px;top:-4.5px}.pc_tooltip__content[data-side=bottom][data-align=center]:before{left:50%;--ptu-translate-x:-50%;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z))}.pc_tooltip__content[data-side=bottom][data-align=start]:before{inset-inline-start:12px}.pc_tooltip__content[data-side=bottom][data-align=end]:before{inset-inline-end:12px}.pc_tooltip__content[data-side=top]:before{--ptu-rotate-x:0;--ptu-rotate-y:0;--ptu-rotate-z:0;--ptu-rotate:-45deg;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z));border-bottom-width:1px;border-left-width:1px;bottom:-4.5px}.pc_tooltip__content[data-side=top][data-align=center]:before{left:50%;--ptu-translate-x:-50%;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z))}.pc_tooltip__content[data-side=top][data-align=start]:before{inset-inline-start:12px}.pc_tooltip__content[data-side=top][data-align=end]:before{inset-inline-end:12px}.pc_tooltip__content[data-side=right]:before{top:50%;--ptu-translate-y:-50%;--ptu-rotate-x:0;--ptu-rotate-y:0;--ptu-rotate-z:0;--ptu-rotate:45deg;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z));border-bottom-width:1px;border-left-width:1px;left:-4.5px}.pc_tooltip__content[data-side=left]:before{top:50%;--ptu-translate-y:-50%;--ptu-rotate-x:0;--ptu-rotate-y:0;--ptu-rotate-z:0;--ptu-rotate:45deg;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z));border-top-width:1px;border-right-width:1px;right:-4.5px}.pc_tooltip__content .pc_tooltip__text{--ptu-text-opacity:1;color:rgba(var(--pt-fg),var(--ptu-text-opacity));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_tooltip{position:relative}.pc_tooltip:before{content:attr(data-tooltip);pointer-events:none;box-sizing:border-box;border-width:1px;--ptu-border-opacity:1;border-color:rgba(var(--pt-grayscale-dark-2),var(--ptu-border-opacity));border-radius:var(--pt-roundness-lg, 8px);border-style:solid;--ptu-bg-opacity:1;background-color:rgba(var(--pt-grayscale-dark-0),var(--ptu-bg-opacity));--ptu-shadow:0px 0px var(--pt-dimension-100) 0px var(--pt-alpha-gray-2), 0 var(--pt-dimension-400) var(--pt-dimension-800) 0px var(--pt-alpha-gray-2);box-shadow:var(--ptu-ring-offset-shadow),var(--ptu-ring-shadow),var(--ptu-shadow);position:absolute;z-index:1000;max-width:80vw;padding-top:var(--pt-dimension-200, 4px);padding-bottom:var(--pt-dimension-200, 4px);padding-left:var(--pt-dimension-300, 6px);padding-right:var(--pt-dimension-300, 6px);--ptu-text-opacity:1;color:rgba(var(--pt-grayscale-dark-8),var(--ptu-text-opacity));text-wrap:nowrap;opacity:0;visibility:hidden}.pc_tooltip:after{pointer-events:none;position:absolute;z-index:1000;width:8px;height:8px;--ptu-skew-x:6deg;--ptu-skew-y:6deg;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z));--ptu-border-opacity:1;border-color:rgba(var(--pt-grayscale-dark-2),var(--ptu-border-opacity));border-style:solid;--ptu-bg-opacity:1;background-color:rgba(var(--pt-grayscale-dark-0),var(--ptu-bg-opacity));border-top-right-radius:3px;border-bottom-left-radius:3px;content:\"\";opacity:0;visibility:hidden}.pc_tooltip:hover:before,.pc_tooltip:hover:after{opacity:1;visibility:visible}.pc_tooltip.pc_tooltip--top:before,.pc_tooltip:not(.pc_tooltip--bottom):not(.pc_tooltip--right):not(.pc_tooltip--left):before{bottom:calc(100% + 12px);left:50%;transform:translate(-50%)}.pc_tooltip.pc_tooltip--top:after,.pc_tooltip:not(.pc_tooltip--bottom):not(.pc_tooltip--right):not(.pc_tooltip--left):after{--ptu-translate-x:50%;--ptu-rotate-x:0;--ptu-rotate-y:0;--ptu-rotate-z:0;--ptu-rotate:-45deg;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z));border-bottom-width:1px;border-left-width:1px;bottom:calc(100% + 8px);left:calc(50% - 8px)}.pc_tooltip.pc_tooltip--bottom:before{top:calc(100% + 12px);left:50%;transform:translate(-50%)}.pc_tooltip.pc_tooltip--bottom:after{--ptu-translate-x:50%;--ptu-rotate-x:0;--ptu-rotate-y:0;--ptu-rotate-z:0;--ptu-rotate:-45deg;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z));border-top-width:1px;border-right-width:1px;top:calc(100% + 8px);left:calc(50% - 8px)}.pc_tooltip.pc_tooltip--right:before{left:calc(100% + 12px);top:50%;transform:translateY(-50%)}.pc_tooltip.pc_tooltip--right:after{--ptu-translate-y:50%;--ptu-rotate-x:0;--ptu-rotate-y:0;--ptu-rotate-z:0;--ptu-rotate:45deg;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z));border-bottom-width:1px;border-left-width:1px;left:calc(100% + 8px);top:calc(50% - 8px)}.pc_tooltip.pc_tooltip--left:before{right:calc(100% + 12px);top:50%;transform:translateY(-50%)}.pc_tooltip.pc_tooltip--left:after{--ptu-translate-y:50%;--ptu-rotate-x:0;--ptu-rotate-y:0;--ptu-rotate-z:0;--ptu-rotate:45deg;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z));border-top-width:1px;border-right-width:1px;right:calc(100% + 8px);top:calc(50% - 8px)}\n";
4
+ const cssText = ".pc_tooltip__content{position:relative;box-sizing:border-box;min-height:var(--pt-size-md, 32px);display:flex;gap:var(--pt-dimension-300, 6px);border-width:var(--pt-stroke-10, 1px);--ptu-border-opacity:1;border-color:rgba(var(--pt-br),var(--ptu-border-opacity));border-radius:var(--pt-roundness-lg, 8px);border-style:solid;--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg),var(--ptu-bg-opacity));padding-top:var(--pt-dimension-200, 4px);padding-bottom:var(--pt-dimension-200, 4px);padding-left:var(--pt-dimension-300, 6px);padding-right:var(--pt-dimension-300, 6px);--ptu-text-opacity:1;color:rgba(var(--pt-fg),var(--ptu-text-opacity));--ptu-shadow:0px 0px var(--pt-dimension-100) 0px var(--pt-alpha-gray-2), 0 var(--pt-dimension-400) var(--pt-dimension-800) 0px var(--pt-alpha-gray-2);box-shadow:var(--ptu-ring-offset-shadow),var(--ptu-ring-shadow),var(--ptu-shadow);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;max-height:var(--reka-tooltip-content-available-height);max-width:var(--reka-tooltip-content-available-width);width:var(--ptc-tooltip-w, auto);outline:0}.pc_tooltip__content:before{content:\"\";position:absolute;width:8px;height:8px;--ptu-skew-x:6deg;--ptu-skew-y:6deg;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z));--ptu-border-opacity:1;border-color:rgba(var(--pt-br),var(--ptu-border-opacity));border-style:solid;--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg),var(--ptu-bg-opacity));border-top-right-radius:3px;border-bottom-left-radius:3px}.pc_tooltip__content[data-side=bottom]:before{--ptu-rotate-x:0;--ptu-rotate-y:0;--ptu-rotate-z:0;--ptu-rotate:-45deg;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z));border-top-width:1px;border-right-width:1px;top:-4.5px}.pc_tooltip__content[data-side=bottom][data-align=center]:before{left:50%;--ptu-translate-x:-50%;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z))}.pc_tooltip__content[data-side=bottom][data-align=start]:before{inset-inline-start:12px}.pc_tooltip__content[data-side=bottom][data-align=end]:before{inset-inline-end:12px}.pc_tooltip__content[data-side=top]:before{--ptu-rotate-x:0;--ptu-rotate-y:0;--ptu-rotate-z:0;--ptu-rotate:-45deg;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z));border-bottom-width:1px;border-left-width:1px;bottom:-4.5px}.pc_tooltip__content[data-side=top][data-align=center]:before{left:50%;--ptu-translate-x:-50%;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z))}.pc_tooltip__content[data-side=top][data-align=start]:before{inset-inline-start:12px}.pc_tooltip__content[data-side=top][data-align=end]:before{inset-inline-end:12px}.pc_tooltip__content[data-side=right]:before{top:50%;--ptu-translate-y:-50%;--ptu-rotate-x:0;--ptu-rotate-y:0;--ptu-rotate-z:0;--ptu-rotate:45deg;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z));border-bottom-width:1px;border-left-width:1px;left:-4.5px}.pc_tooltip__content[data-side=left]:before{top:50%;--ptu-translate-y:-50%;--ptu-rotate-x:0;--ptu-rotate-y:0;--ptu-rotate-z:0;--ptu-rotate:45deg;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z));border-top-width:1px;border-right-width:1px;right:-4.5px}.pc_tooltip__content .pc_tooltip__text{--ptu-text-opacity:1;color:rgba(var(--pt-fg),var(--ptu-text-opacity));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_tooltip{position:relative}.pc_tooltip:before{content:attr(data-tooltip);pointer-events:none;box-sizing:border-box;border-width:1px;--ptu-border-opacity:1;border-color:rgba(var(--pt-grayscale-dark-2),var(--ptu-border-opacity));border-radius:var(--pt-roundness-lg, 8px);border-style:solid;--ptu-bg-opacity:1;background-color:rgba(var(--pt-grayscale-dark-0),var(--ptu-bg-opacity));--ptu-shadow:0px 0px var(--pt-dimension-100) 0px var(--pt-alpha-gray-2), 0 var(--pt-dimension-400) var(--pt-dimension-800) 0px var(--pt-alpha-gray-2);box-shadow:var(--ptu-ring-offset-shadow),var(--ptu-ring-shadow),var(--ptu-shadow);position:absolute;z-index:1000;max-width:80vw;min-height:var(--pt-size-md, 32px);padding-top:var(--pt-dimension-200, 4px);padding-bottom:var(--pt-dimension-200, 4px);padding-left:var(--pt-dimension-300, 6px);padding-right:var(--pt-dimension-300, 6px);--ptu-text-opacity:1;color:rgba(var(--pt-grayscale-dark-8),var(--ptu-text-opacity));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;line-height:var(--pt-size-sm);text-wrap:nowrap;opacity:0;visibility:hidden}.pc_tooltip:after{pointer-events:none;position:absolute;z-index:1000;width:8px;height:8px;--ptu-skew-x:6deg;--ptu-skew-y:6deg;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z));--ptu-border-opacity:1;border-color:rgba(var(--pt-grayscale-dark-2),var(--ptu-border-opacity));border-style:solid;--ptu-bg-opacity:1;background-color:rgba(var(--pt-grayscale-dark-0),var(--ptu-bg-opacity));border-top-right-radius:3px;border-bottom-left-radius:3px;content:\"\";opacity:0;visibility:hidden}.pc_tooltip:hover:before,.pc_tooltip:hover:after{opacity:1;visibility:visible}.pc_tooltip.pc_tooltip--top:before,.pc_tooltip:not(.pc_tooltip--bottom):not(.pc_tooltip--right):not(.pc_tooltip--left):before{bottom:calc(100% + 12px);left:50%;transform:translate(-50%)}.pc_tooltip.pc_tooltip--top:after,.pc_tooltip:not(.pc_tooltip--bottom):not(.pc_tooltip--right):not(.pc_tooltip--left):after{--ptu-translate-x:50%;--ptu-rotate-x:0;--ptu-rotate-y:0;--ptu-rotate-z:0;--ptu-rotate:-45deg;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z));border-bottom-width:1px;border-left-width:1px;bottom:calc(100% + 8px);left:calc(50% - 8px)}.pc_tooltip.pc_tooltip--bottom:before{top:calc(100% + 12px);left:50%;transform:translate(-50%)}.pc_tooltip.pc_tooltip--bottom:after{--ptu-translate-x:50%;--ptu-rotate-x:0;--ptu-rotate-y:0;--ptu-rotate-z:0;--ptu-rotate:-45deg;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z));border-top-width:1px;border-right-width:1px;top:calc(100% + 8px);left:calc(50% - 8px)}.pc_tooltip.pc_tooltip--right:before{left:calc(100% + 12px);top:50%;transform:translateY(-50%)}.pc_tooltip.pc_tooltip--right:after{--ptu-translate-y:50%;--ptu-rotate-x:0;--ptu-rotate-y:0;--ptu-rotate-z:0;--ptu-rotate:45deg;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z));border-bottom-width:1px;border-left-width:1px;left:calc(100% + 8px);top:calc(50% - 8px)}.pc_tooltip.pc_tooltip--left:before{right:calc(100% + 12px);top:50%;transform:translateY(-50%)}.pc_tooltip.pc_tooltip--left:after{--ptu-translate-y:50%;--ptu-rotate-x:0;--ptu-rotate-y:0;--ptu-rotate-z:0;--ptu-rotate:45deg;transform:translate(var(--ptu-translate-x)) translateY(var(--ptu-translate-y)) translateZ(var(--ptu-translate-z)) rotate(var(--ptu-rotate)) rotateX(var(--ptu-rotate-x)) rotateY(var(--ptu-rotate-y)) rotate(var(--ptu-rotate-z)) skew(var(--ptu-skew-x)) skewY(var(--ptu-skew-y)) scaleX(var(--ptu-scale-x)) scaleY(var(--ptu-scale-y)) scaleZ(var(--ptu-scale-z));border-top-width:1px;border-right-width:1px;right:calc(100% + 8px);top:calc(50% - 8px)}\n";
5
5
  const tooltipId = `${prefix}s-tooltip`;
6
6
  const addTooltipCss = () => addCssToHead(tooltipId, cssText);
7
7
  const removeTooltipCss = () => removeCssFromHead(tooltipId);
package/dist/tr.css CHANGED
@@ -1 +1 @@
1
- .pc_table__tr{border-width:var(--pt-stroke-0, 0px);border-style:none;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;background:var(--ptc-cell-bg)}.pc_table__tr--empty{height:100%}.pc_table__tr--checked:not(.pc_table__tr--empty){--ptc-cell-bg: rgba(var(--pt-primary-0))}.pc_table__tr--zebra:not(.pc_table__tr--empty):not(.pc_table__tr--checked):not(.pc_table__tr--lazy-load-observer):nth-child(odd){--ptc-cell-bg: rgba(var(--pt-bg-secondary))}.pc_table__tr--zebra:not(.pc_table__tr--empty):not(.pc_table__tr--checked):not(.pc_table__tr--lazy-load-observer):nth-child(2n){--ptc-cell-bg: rgba(var(--pt-bg))}.pc_table__tr--lazy-load-observer{pointer-events:none;position:relative;height:var(--pt-dimension-0, 0px)}.pc_table__tr:hover .pc_table__td__hover_actions{display:flex;gap:var(--pt-dimension-200, 4px)}
1
+ .pc_table__tr{box-sizing:border-box;border-width:var(--pt-stroke-0, 0px);border-style:none;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;background:var(--ptc-cell-bg)}.pc_table__tr--empty{height:100%}.pc_table__tr--checked:not(.pc_table__tr--empty){--ptc-cell-bg: rgba(var(--pt-primary-0))}.pc_table__tr--zebra:not(.pc_table__tr--empty):not(.pc_table__tr--checked):not(.pc_table__tr--lazy-load-observer):nth-child(odd){--ptc-cell-bg: rgba(var(--pt-bg-secondary))}.pc_table__tr--zebra:not(.pc_table__tr--empty):not(.pc_table__tr--checked):not(.pc_table__tr--lazy-load-observer):nth-child(2n){--ptc-cell-bg: rgba(var(--pt-bg))}.pc_table__tr--lazy-load-observer{pointer-events:none;position:relative;height:var(--pt-dimension-0, 0px)}.pc_table__tr:hover .pc_table__td__hover_actions{display:flex;gap:var(--pt-dimension-200, 4px)}
package/dist/tr.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { addCssToHead, removeCssFromHead, prefix } from "@pantograph/tokens";
2
- const cssText = ".pc_table__tr{border-width:var(--pt-stroke-0, 0px);border-style:none;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;background:var(--ptc-cell-bg)}.pc_table__tr--empty{height:100%}.pc_table__tr--checked:not(.pc_table__tr--empty){--ptc-cell-bg: rgba(var(--pt-primary-0))}.pc_table__tr--zebra:not(.pc_table__tr--empty):not(.pc_table__tr--checked):not(.pc_table__tr--lazy-load-observer):nth-child(odd){--ptc-cell-bg: rgba(var(--pt-bg-secondary))}.pc_table__tr--zebra:not(.pc_table__tr--empty):not(.pc_table__tr--checked):not(.pc_table__tr--lazy-load-observer):nth-child(2n){--ptc-cell-bg: rgba(var(--pt-bg))}.pc_table__tr--lazy-load-observer{pointer-events:none;position:relative;height:var(--pt-dimension-0, 0px)}.pc_table__tr:hover .pc_table__td__hover_actions{display:flex;gap:var(--pt-dimension-200, 4px)}\n";
2
+ const cssText = ".pc_table__tr{box-sizing:border-box;border-width:var(--pt-stroke-0, 0px);border-style:none;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;background:var(--ptc-cell-bg)}.pc_table__tr--empty{height:100%}.pc_table__tr--checked:not(.pc_table__tr--empty){--ptc-cell-bg: rgba(var(--pt-primary-0))}.pc_table__tr--zebra:not(.pc_table__tr--empty):not(.pc_table__tr--checked):not(.pc_table__tr--lazy-load-observer):nth-child(odd){--ptc-cell-bg: rgba(var(--pt-bg-secondary))}.pc_table__tr--zebra:not(.pc_table__tr--empty):not(.pc_table__tr--checked):not(.pc_table__tr--lazy-load-observer):nth-child(2n){--ptc-cell-bg: rgba(var(--pt-bg))}.pc_table__tr--lazy-load-observer{pointer-events:none;position:relative;height:var(--pt-dimension-0, 0px)}.pc_table__tr:hover .pc_table__td__hover_actions{display:flex;gap:var(--pt-dimension-200, 4px)}\n";
3
3
  const trId = `${prefix}s-tr`;
4
4
  const addTrCss = () => addCssToHead(trId, cssText);
5
5
  const removeTrCss = () => removeCssFromHead(trId);
package/dist/tr.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_table__tr{border-width:var(--pt-stroke-0, 0px);border-style:none;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;background:var(--ptc-cell-bg)}.pc_table__tr--empty{height:100%}.pc_table__tr--checked:not(.pc_table__tr--empty){--ptc-cell-bg: rgba(var(--pt-primary-0))}.pc_table__tr--zebra:not(.pc_table__tr--empty):not(.pc_table__tr--checked):not(.pc_table__tr--lazy-load-observer):nth-child(odd){--ptc-cell-bg: rgba(var(--pt-bg-secondary))}.pc_table__tr--zebra:not(.pc_table__tr--empty):not(.pc_table__tr--checked):not(.pc_table__tr--lazy-load-observer):nth-child(2n){--ptc-cell-bg: rgba(var(--pt-bg))}.pc_table__tr--lazy-load-observer{pointer-events:none;position:relative;height:var(--pt-dimension-0, 0px)}.pc_table__tr:hover .pc_table__td__hover_actions{display:flex;gap:var(--pt-dimension-200, 4px)}\n";
4
+ const cssText = ".pc_table__tr{box-sizing:border-box;border-width:var(--pt-stroke-0, 0px);border-style:none;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;background:var(--ptc-cell-bg)}.pc_table__tr--empty{height:100%}.pc_table__tr--checked:not(.pc_table__tr--empty){--ptc-cell-bg: rgba(var(--pt-primary-0))}.pc_table__tr--zebra:not(.pc_table__tr--empty):not(.pc_table__tr--checked):not(.pc_table__tr--lazy-load-observer):nth-child(odd){--ptc-cell-bg: rgba(var(--pt-bg-secondary))}.pc_table__tr--zebra:not(.pc_table__tr--empty):not(.pc_table__tr--checked):not(.pc_table__tr--lazy-load-observer):nth-child(2n){--ptc-cell-bg: rgba(var(--pt-bg))}.pc_table__tr--lazy-load-observer{pointer-events:none;position:relative;height:var(--pt-dimension-0, 0px)}.pc_table__tr:hover .pc_table__td__hover_actions{display:flex;gap:var(--pt-dimension-200, 4px)}\n";
5
5
  const trId = `${prefix}s-tr`;
6
6
  const addTrCss = () => addCssToHead(trId, cssText);
7
7
  const removeTrCss = () => removeCssFromHead(trId);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pantograph/styles",
3
- "version": "0.0.7",
3
+ "version": "0.0.9",
4
4
  "id": "styles",
5
5
  "private": false,
6
6
  "publishConfig": {