@pantograph/styles 0.0.1 → 0.0.2

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 (206) hide show
  1. package/dist/accordion.d.ts +3 -2
  2. package/dist/accordion.js +6 -3
  3. package/dist/accordion.umd.cjs +8 -3
  4. package/dist/alert.d.ts +3 -2
  5. package/dist/alert.js +6 -3
  6. package/dist/alert.umd.cjs +8 -3
  7. package/dist/alert_dialog.d.ts +3 -2
  8. package/dist/alert_dialog.js +6 -3
  9. package/dist/alert_dialog.umd.cjs +8 -3
  10. package/dist/avatar.d.ts +3 -2
  11. package/dist/avatar.js +6 -3
  12. package/dist/avatar.umd.cjs +8 -3
  13. package/dist/badge.d.ts +3 -2
  14. package/dist/badge.js +6 -3
  15. package/dist/badge.umd.cjs +8 -3
  16. package/dist/blanket.d.ts +3 -2
  17. package/dist/blanket.js +6 -3
  18. package/dist/blanket.umd.cjs +8 -3
  19. package/dist/breadcrumb.d.ts +3 -2
  20. package/dist/breadcrumb.js +6 -3
  21. package/dist/breadcrumb.umd.cjs +8 -3
  22. package/dist/button.d.ts +3 -2
  23. package/dist/button.js +6 -3
  24. package/dist/button.umd.cjs +8 -3
  25. package/dist/card.d.ts +3 -2
  26. package/dist/card.js +6 -3
  27. package/dist/card.umd.cjs +8 -3
  28. package/dist/checkbox.d.ts +3 -2
  29. package/dist/checkbox.js +6 -3
  30. package/dist/checkbox.umd.cjs +8 -3
  31. package/dist/chip.d.ts +3 -2
  32. package/dist/chip.js +6 -3
  33. package/dist/chip.umd.cjs +8 -3
  34. package/dist/chip_group.d.ts +3 -2
  35. package/dist/chip_group.js +6 -3
  36. package/dist/chip_group.umd.cjs +8 -3
  37. package/dist/color_picker.d.ts +3 -2
  38. package/dist/color_picker.js +6 -3
  39. package/dist/color_picker.umd.cjs +8 -3
  40. package/dist/color_swatch.d.ts +3 -2
  41. package/dist/color_swatch.js +6 -3
  42. package/dist/color_swatch.umd.cjs +8 -3
  43. package/dist/color_swatch_group.d.ts +3 -2
  44. package/dist/color_swatch_group.js +6 -3
  45. package/dist/color_swatch_group.umd.cjs +8 -3
  46. package/dist/color_trigger.d.ts +3 -2
  47. package/dist/color_trigger.js +6 -3
  48. package/dist/color_trigger.umd.cjs +8 -3
  49. package/dist/combobox.d.ts +3 -2
  50. package/dist/combobox.js +6 -3
  51. package/dist/combobox.umd.cjs +8 -3
  52. package/dist/comment.d.ts +3 -2
  53. package/dist/comment.js +6 -3
  54. package/dist/comment.umd.cjs +8 -3
  55. package/dist/data_table.css +1 -1
  56. package/dist/data_table.d.ts +3 -2
  57. package/dist/data_table.js +7 -4
  58. package/dist/data_table.umd.cjs +9 -4
  59. package/dist/dialog.d.ts +3 -2
  60. package/dist/dialog.js +6 -3
  61. package/dist/dialog.umd.cjs +8 -3
  62. package/dist/divider.d.ts +3 -2
  63. package/dist/divider.js +6 -3
  64. package/dist/divider.umd.cjs +8 -3
  65. package/dist/drop_zone.d.ts +3 -2
  66. package/dist/drop_zone.js +6 -3
  67. package/dist/drop_zone.umd.cjs +8 -3
  68. package/dist/empty.d.ts +3 -2
  69. package/dist/empty.js +6 -3
  70. package/dist/empty.umd.cjs +8 -3
  71. package/dist/form_item.d.ts +5 -0
  72. package/dist/{form.js → form_item.js} +6 -3
  73. package/dist/{form.umd.cjs → form_item.umd.cjs} +9 -4
  74. package/dist/form_validation.d.ts +3 -2
  75. package/dist/form_validation.js +6 -3
  76. package/dist/form_validation.umd.cjs +8 -3
  77. package/dist/go_picker.d.ts +3 -2
  78. package/dist/go_picker.js +6 -3
  79. package/dist/go_picker.umd.cjs +8 -3
  80. package/dist/graphical_object_group.d.ts +5 -0
  81. package/dist/{go_group.js → graphical_object_group.js} +6 -3
  82. package/dist/{go_group.umd.cjs → graphical_object_group.umd.cjs} +9 -4
  83. package/dist/hover_card.d.ts +3 -2
  84. package/dist/hover_card.js +6 -3
  85. package/dist/hover_card.umd.cjs +8 -3
  86. package/dist/icon.d.ts +3 -2
  87. package/dist/icon.js +6 -3
  88. package/dist/icon.umd.cjs +8 -3
  89. package/dist/image.d.ts +3 -2
  90. package/dist/image.js +6 -3
  91. package/dist/image.umd.cjs +8 -3
  92. package/dist/indent_level.d.ts +3 -2
  93. package/dist/indent_level.js +6 -3
  94. package/dist/indent_level.umd.cjs +8 -3
  95. package/dist/index.css +1 -1
  96. package/dist/index.d.ts +5 -4
  97. package/dist/index.js +6 -5
  98. package/dist/index.umd.cjs +15 -12
  99. package/dist/input.d.ts +3 -2
  100. package/dist/input.js +6 -3
  101. package/dist/input.umd.cjs +8 -3
  102. package/dist/kbd.d.ts +3 -2
  103. package/dist/kbd.js +6 -3
  104. package/dist/kbd.umd.cjs +8 -3
  105. package/dist/label.d.ts +3 -2
  106. package/dist/label.js +6 -3
  107. package/dist/label.umd.cjs +8 -3
  108. package/dist/link.d.ts +3 -2
  109. package/dist/link.js +6 -3
  110. package/dist/link.umd.cjs +8 -3
  111. package/dist/menu.d.ts +3 -2
  112. package/dist/menu.js +6 -3
  113. package/dist/menu.umd.cjs +8 -3
  114. package/dist/menu_item.css +1 -1
  115. package/dist/menu_item.d.ts +3 -2
  116. package/dist/menu_item.js +7 -4
  117. package/dist/menu_item.umd.cjs +9 -4
  118. package/dist/page_indicator.d.ts +3 -2
  119. package/dist/page_indicator.js +6 -3
  120. package/dist/page_indicator.umd.cjs +8 -3
  121. package/dist/pagination.d.ts +3 -2
  122. package/dist/pagination.js +6 -3
  123. package/dist/pagination.umd.cjs +8 -3
  124. package/dist/popover.d.ts +3 -2
  125. package/dist/popover.js +6 -3
  126. package/dist/popover.umd.cjs +8 -3
  127. package/dist/progress.d.ts +3 -2
  128. package/dist/progress.js +6 -3
  129. package/dist/progress.umd.cjs +8 -3
  130. package/dist/radio_group.d.ts +5 -0
  131. package/dist/{radio.js → radio_group.js} +6 -3
  132. package/dist/{radio.umd.cjs → radio_group.umd.cjs} +9 -4
  133. package/dist/scroll_container.d.ts +3 -2
  134. package/dist/scroll_container.js +6 -3
  135. package/dist/scroll_container.umd.cjs +8 -3
  136. package/dist/segmented.css +1 -1
  137. package/dist/segmented.d.ts +3 -2
  138. package/dist/segmented.js +7 -4
  139. package/dist/segmented.umd.cjs +9 -4
  140. package/dist/select.d.ts +3 -2
  141. package/dist/select.js +6 -3
  142. package/dist/select.umd.cjs +8 -3
  143. package/dist/shortcut.d.ts +3 -2
  144. package/dist/shortcut.js +6 -3
  145. package/dist/shortcut.umd.cjs +8 -3
  146. package/dist/skeleton.d.ts +3 -2
  147. package/dist/skeleton.js +6 -3
  148. package/dist/skeleton.umd.cjs +8 -3
  149. package/dist/sort_placeholder.d.ts +5 -0
  150. package/dist/{sortPlaceholder.js → sort_placeholder.js} +6 -3
  151. package/dist/{sortPlaceholder.umd.cjs → sort_placeholder.umd.cjs} +9 -4
  152. package/dist/spinner.d.ts +3 -2
  153. package/dist/spinner.js +6 -3
  154. package/dist/spinner.umd.cjs +8 -3
  155. package/dist/steps.d.ts +3 -2
  156. package/dist/steps.js +6 -3
  157. package/dist/steps.umd.cjs +8 -3
  158. package/dist/switch.d.ts +3 -2
  159. package/dist/switch.js +6 -3
  160. package/dist/switch.umd.cjs +8 -3
  161. package/dist/table.d.ts +3 -2
  162. package/dist/table.js +6 -3
  163. package/dist/table.umd.cjs +8 -3
  164. package/dist/tabs.d.ts +3 -2
  165. package/dist/tabs.js +6 -3
  166. package/dist/tabs.umd.cjs +8 -3
  167. package/dist/tbody.d.ts +3 -2
  168. package/dist/tbody.js +6 -3
  169. package/dist/tbody.umd.cjs +8 -3
  170. package/dist/tcell.d.ts +3 -2
  171. package/dist/tcell.js +6 -3
  172. package/dist/tcell.umd.cjs +8 -3
  173. package/dist/textarea.d.ts +3 -2
  174. package/dist/textarea.js +6 -3
  175. package/dist/textarea.umd.cjs +8 -3
  176. package/dist/tfoot.d.ts +3 -2
  177. package/dist/tfoot.js +6 -3
  178. package/dist/tfoot.umd.cjs +8 -3
  179. package/dist/thead.d.ts +3 -2
  180. package/dist/thead.js +6 -3
  181. package/dist/thead.umd.cjs +8 -3
  182. package/dist/toast.d.ts +3 -2
  183. package/dist/toast.js +6 -3
  184. package/dist/toast.umd.cjs +8 -3
  185. package/dist/tooltip.css +1 -0
  186. package/dist/tooltip.d.ts +5 -0
  187. package/dist/tooltip.js +7 -0
  188. package/dist/tooltip.umd.cjs +12 -0
  189. package/dist/tr.d.ts +3 -2
  190. package/dist/tr.js +6 -3
  191. package/dist/tr.umd.cjs +8 -3
  192. package/dist/tree.d.ts +3 -2
  193. package/dist/tree.js +6 -3
  194. package/dist/tree.umd.cjs +8 -3
  195. package/dist/upload.d.ts +3 -2
  196. package/dist/upload.js +6 -3
  197. package/dist/upload.umd.cjs +8 -3
  198. package/package.json +4 -4
  199. package/dist/form.d.ts +0 -4
  200. package/dist/go_group.d.ts +0 -4
  201. package/dist/radio.d.ts +0 -4
  202. package/dist/sortPlaceholder.d.ts +0 -4
  203. /package/dist/{form.css → form_item.css} +0 -0
  204. /package/dist/{go_group.css → graphical_object_group.css} +0 -0
  205. /package/dist/{radio.css → radio_group.css} +0 -0
  206. /package/dist/{sortPlaceholder.css → sort_placeholder.css} +0 -0
package/dist/accordion.d.ts CHANGED
@@ -1,4 +1,5 @@
1
- declare const cssText: string;
1
+ declare const accordionId: string;
2
2
  declare const addAccordionCss: () => void;
3
+ declare const removeAccordionCss: () => void;
3
4
  declare const accordionCss: string;
4
- export { addAccordionCss, accordionCss };
5
+ export { accordionId, addAccordionCss, removeAccordionCss, accordionCss };
package/dist/accordion.js CHANGED
@@ -1,4 +1,7 @@
1
- import { addCssToHead, prefix } from "@pantograph/tokens";
1
+ import { addCssToHead, removeCssFromHead, prefix } from "@pantograph/tokens";
2
2
  const cssText = ".pc_accordion{width:100%;display:flex;flex-direction:column;gap:var(--ptc-accordion-gap)}.pc_accordion.pc_accordion--sm{--ptc-accordion-gap: var(--pt-dimension-200);--ptc-accordion-roundness: var(--pt-roundness-sm);--ptc-accordion-header-gap: var(--pt-dimension-100);--ptc-accordion-header-px: var(--pt-dimension-200);--ptc-accordion-header-py: var(--pt-dimension-100);--ptc-accordion-content-p: var(--pt-dimension-200);--ptc-accordion-header-h: var(--pt-size-sm)}.pc_accordion.pc_accordion--sm .pc_accordion__item__title{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_accordion.pc_accordion--md{--ptc-accordion-gap: var(--pt-dimension-200);--ptc-accordion-roundness: var(--pt-roundness-md);--ptc-accordion-header-gap: var(--pt-dimension-200);--ptc-accordion-header-px: var(--pt-dimension-300);--ptc-accordion-header-py: var(--pt-dimension-200);--ptc-accordion-content-p: var(--pt-dimension-300);--ptc-accordion-header-h: var(--pt-size-md)}.pc_accordion.pc_accordion--md .pc_accordion__item__title{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_accordion.pc_accordion--lg{--ptc-accordion-gap: var(--pt-dimension-300);--ptc-accordion-roundness: var(--pt-roundness-lg);--ptc-accordion-header-gap: var(--pt-dimension-200);--ptc-accordion-header-px: var(--pt-dimension-400);--ptc-accordion-header-py: var(--pt-dimension-400);--ptc-accordion-content-p: var(--pt-dimension-400);--ptc-accordion-header-h: var(--pt-size-lg)}.pc_accordion.pc_accordion--lg .pc_accordion__item__title{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_accordion.pc_accordion--bordered .pc_accordion__item{border-width:1px;border-style:solid;border-radius:var(--ptc-accordion-roundness)}.pc_accordion.pc_accordion--bordered .pc_accordion__item[data-state=closed] .pc_accordion__item__header{border-radius:var(--ptc-accordion-roundness)}.pc_accordion.pc_accordion--bordered .pc_accordion__item[data-state=open]{--ptu-border-opacity:1;border-color:rgba(var(--pt-br-target),var(--ptu-border-opacity))}.pc_accordion.pc_accordion--bordered .pc_accordion__item[data-state=open]:not(:hover) .pc_accordion__item__header{--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg-secondary),var(--ptu-bg-opacity))}.pc_accordion.pc_accordion--bordered .pc_accordion__item[data-state=open] .pc_accordion__item__header{border-top-left-radius:var(--ptc-accordion-roundness);border-top-right-radius:var(--ptc-accordion-roundness)}.pc_accordion.pc_accordion--bordered .pc_accordion__item:not(:hover){--ptu-border-opacity:1;border-color:rgba(var(--pt-br),var(--ptu-border-opacity))}.pc_accordion.pc_accordion--bordered .pc_accordion__item:hover{--ptu-border-opacity:1;border-color:rgba(var(--pt-br-target),var(--ptu-border-opacity))}.pc_accordion:not(.pc_accordion--bordered) .pc_accordion__item__header{border-radius:var(--ptc-accordion-roundness)}.pc_accordion .pc_accordion__item{box-sizing:border-box;width:100%;display:flex;flex-direction:column}.pc_accordion .pc_accordion__item:hover .pc_accordion__item__header{--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg-target),var(--ptu-bg-opacity))}.pc_accordion .pc_accordion__item .pc_accordion__item__expand{box-sizing:border-box;border-radius:var(--pt-roundness-sm, 4px);outline:0}.pc_accordion .pc_accordion__item .pc_accordion__item__expand>*{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_accordion .pc_accordion__item .pc_accordion__item__expand:not(:disabled):hover{--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg-target),var(--ptu-bg-opacity))}.pc_accordion .pc_accordion__item .pc_accordion__item__expand:not(: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_accordion .pc_accordion__item .pc_accordion__item__expand:disabled{--ptu-text-opacity:1;color:rgba(var(--pt-disable-fg),var(--ptu-text-opacity))}.pc_accordion .pc_accordion__item[data-state=open] .pc_accordion__item__expand>*{--ptu-rotate-x:0;--ptu-rotate-y:0;--ptu-rotate-z:0;--ptu-rotate:-180deg;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_accordion .pc_accordion__item .pc_accordion__item__header{box-sizing:border-box;width: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,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-property:all;gap:var(--ptc-accordion-header-gap);outline:0;height:var(--ptc-accordion-header-h);padding:var(--ptc-accordion-header-py) var(--ptc-accordion-header-px);--ptu-text-opacity:1;color:rgba(var(--pt-fg),var(--ptu-text-opacity))}.pc_accordion .pc_accordion__item .pc_accordion__item__header:hover{--ptu-text-opacity:1;color:rgba(var(--pt-fg-target),var(--ptu-text-opacity))}.pc_accordion .pc_accordion__item .pc_accordion__item__header: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_accordion .pc_accordion__item .pc_accordion__item__header .pc_accordion__item__header__wrapper{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,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-property:all;gap:var(--ptc-accordion-header-gap);box-sizing:border-box;height:100%;flex:1 1 0%}.pc_accordion .pc_accordion__item .pc_accordion__item__header .pc_accordion__item__leading{height:100%;display:flex;align-items:center;justify-content:center}.pc_accordion .pc_accordion__item .pc_accordion__item__header:disabled .pc_accordion__item__expand{--ptu-text-opacity:1;color:rgba(var(--pt-disable-fg),var(--ptu-text-opacity))}.pc_accordion .pc_accordion__item .pc_accordion__item__content{box-sizing:border-box;overflow:hidden}.pc_accordion .pc_accordion__item .pc_accordion__item__content .pc_accordion__item__content__wrapper{padding:var(--ptc-accordion-content-p)}.pc_accordion .pc_accordion__item .pc_accordion__item__content:not([data-opened])[data-state=closed]{animation:slideUp .3s ease both}.pc_accordion .pc_accordion__item .pc_accordion__item__content:not([data-opened])[data-state=open]{animation:slideDown .3s ease both}.pc_accordion .pc_accordion__item__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@keyframes slideDown{0%{height:0;opacity:0}to{height:var(--reka-accordion-content-height);opacity:1}}@keyframes slideUp{0%{height:var(--reka-accordion-content-height);opacity:1}to{height:0;opacity:0}}\n";
3
- export const addAccordionCss = () => addCssToHead(`${prefix}s-accordion`, cssText);
4
- export const accordionCss = cssText;
3
+ const accordionId = `${prefix}s-accordion`;
4
+ const addAccordionCss = () => addCssToHead(accordionId, cssText);
5
+ const removeAccordionCss = () => removeCssFromHead(accordionId);
6
+ const accordionCss = cssText;
7
+ export { accordionId, addAccordionCss, removeAccordionCss, accordionCss };
package/dist/accordion.umd.cjs CHANGED
@@ -1,7 +1,12 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- const { addCssToHead, prefix } = require("@pantograph/tokens");
3
+ const { addCssToHead, removeCssFromHead, prefix } = require("@pantograph/tokens");
4
4
  const cssText = ".pc_accordion{width:100%;display:flex;flex-direction:column;gap:var(--ptc-accordion-gap)}.pc_accordion.pc_accordion--sm{--ptc-accordion-gap: var(--pt-dimension-200);--ptc-accordion-roundness: var(--pt-roundness-sm);--ptc-accordion-header-gap: var(--pt-dimension-100);--ptc-accordion-header-px: var(--pt-dimension-200);--ptc-accordion-header-py: var(--pt-dimension-100);--ptc-accordion-content-p: var(--pt-dimension-200);--ptc-accordion-header-h: var(--pt-size-sm)}.pc_accordion.pc_accordion--sm .pc_accordion__item__title{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_accordion.pc_accordion--md{--ptc-accordion-gap: var(--pt-dimension-200);--ptc-accordion-roundness: var(--pt-roundness-md);--ptc-accordion-header-gap: var(--pt-dimension-200);--ptc-accordion-header-px: var(--pt-dimension-300);--ptc-accordion-header-py: var(--pt-dimension-200);--ptc-accordion-content-p: var(--pt-dimension-300);--ptc-accordion-header-h: var(--pt-size-md)}.pc_accordion.pc_accordion--md .pc_accordion__item__title{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_accordion.pc_accordion--lg{--ptc-accordion-gap: var(--pt-dimension-300);--ptc-accordion-roundness: var(--pt-roundness-lg);--ptc-accordion-header-gap: var(--pt-dimension-200);--ptc-accordion-header-px: var(--pt-dimension-400);--ptc-accordion-header-py: var(--pt-dimension-400);--ptc-accordion-content-p: var(--pt-dimension-400);--ptc-accordion-header-h: var(--pt-size-lg)}.pc_accordion.pc_accordion--lg .pc_accordion__item__title{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_accordion.pc_accordion--bordered .pc_accordion__item{border-width:1px;border-style:solid;border-radius:var(--ptc-accordion-roundness)}.pc_accordion.pc_accordion--bordered .pc_accordion__item[data-state=closed] .pc_accordion__item__header{border-radius:var(--ptc-accordion-roundness)}.pc_accordion.pc_accordion--bordered .pc_accordion__item[data-state=open]{--ptu-border-opacity:1;border-color:rgba(var(--pt-br-target),var(--ptu-border-opacity))}.pc_accordion.pc_accordion--bordered .pc_accordion__item[data-state=open]:not(:hover) .pc_accordion__item__header{--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg-secondary),var(--ptu-bg-opacity))}.pc_accordion.pc_accordion--bordered .pc_accordion__item[data-state=open] .pc_accordion__item__header{border-top-left-radius:var(--ptc-accordion-roundness);border-top-right-radius:var(--ptc-accordion-roundness)}.pc_accordion.pc_accordion--bordered .pc_accordion__item:not(:hover){--ptu-border-opacity:1;border-color:rgba(var(--pt-br),var(--ptu-border-opacity))}.pc_accordion.pc_accordion--bordered .pc_accordion__item:hover{--ptu-border-opacity:1;border-color:rgba(var(--pt-br-target),var(--ptu-border-opacity))}.pc_accordion:not(.pc_accordion--bordered) .pc_accordion__item__header{border-radius:var(--ptc-accordion-roundness)}.pc_accordion .pc_accordion__item{box-sizing:border-box;width:100%;display:flex;flex-direction:column}.pc_accordion .pc_accordion__item:hover .pc_accordion__item__header{--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg-target),var(--ptu-bg-opacity))}.pc_accordion .pc_accordion__item .pc_accordion__item__expand{box-sizing:border-box;border-radius:var(--pt-roundness-sm, 4px);outline:0}.pc_accordion .pc_accordion__item .pc_accordion__item__expand>*{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_accordion .pc_accordion__item .pc_accordion__item__expand:not(:disabled):hover{--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg-target),var(--ptu-bg-opacity))}.pc_accordion .pc_accordion__item .pc_accordion__item__expand:not(: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_accordion .pc_accordion__item .pc_accordion__item__expand:disabled{--ptu-text-opacity:1;color:rgba(var(--pt-disable-fg),var(--ptu-text-opacity))}.pc_accordion .pc_accordion__item[data-state=open] .pc_accordion__item__expand>*{--ptu-rotate-x:0;--ptu-rotate-y:0;--ptu-rotate-z:0;--ptu-rotate:-180deg;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_accordion .pc_accordion__item .pc_accordion__item__header{box-sizing:border-box;width: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,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-property:all;gap:var(--ptc-accordion-header-gap);outline:0;height:var(--ptc-accordion-header-h);padding:var(--ptc-accordion-header-py) var(--ptc-accordion-header-px);--ptu-text-opacity:1;color:rgba(var(--pt-fg),var(--ptu-text-opacity))}.pc_accordion .pc_accordion__item .pc_accordion__item__header:hover{--ptu-text-opacity:1;color:rgba(var(--pt-fg-target),var(--ptu-text-opacity))}.pc_accordion .pc_accordion__item .pc_accordion__item__header: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_accordion .pc_accordion__item .pc_accordion__item__header .pc_accordion__item__header__wrapper{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,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-property:all;gap:var(--ptc-accordion-header-gap);box-sizing:border-box;height:100%;flex:1 1 0%}.pc_accordion .pc_accordion__item .pc_accordion__item__header .pc_accordion__item__leading{height:100%;display:flex;align-items:center;justify-content:center}.pc_accordion .pc_accordion__item .pc_accordion__item__header:disabled .pc_accordion__item__expand{--ptu-text-opacity:1;color:rgba(var(--pt-disable-fg),var(--ptu-text-opacity))}.pc_accordion .pc_accordion__item .pc_accordion__item__content{box-sizing:border-box;overflow:hidden}.pc_accordion .pc_accordion__item .pc_accordion__item__content .pc_accordion__item__content__wrapper{padding:var(--ptc-accordion-content-p)}.pc_accordion .pc_accordion__item .pc_accordion__item__content:not([data-opened])[data-state=closed]{animation:slideUp .3s ease both}.pc_accordion .pc_accordion__item .pc_accordion__item__content:not([data-opened])[data-state=open]{animation:slideDown .3s ease both}.pc_accordion .pc_accordion__item__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@keyframes slideDown{0%{height:0;opacity:0}to{height:var(--reka-accordion-content-height);opacity:1}}@keyframes slideUp{0%{height:var(--reka-accordion-content-height);opacity:1}to{height:0;opacity:0}}\n";
5
- const addAccordionCss = () => addCssToHead(`${prefix}s-accordion`, cssText);
5
+ const accordionId = `${prefix}s-accordion`;
6
+ const addAccordionCss = () => addCssToHead(accordionId, cssText);
7
+ const removeAccordionCss = () => removeCssFromHead(accordionId);
8
+ const accordionCss = cssText;
9
+ exports.accordionId = accordionId;
6
10
  exports.addAccordionCss = addAccordionCss;
7
- exports.accordionCss = cssText;
11
+ exports.removeAccordionCss = removeAccordionCss;
12
+ exports.accordionCss = accordionCss;
package/dist/alert.d.ts CHANGED
@@ -1,4 +1,5 @@
1
- declare const cssText: string;
1
+ declare const alertId: string;
2
2
  declare const addAlertCss: () => void;
3
+ declare const removeAlertCss: () => void;
3
4
  declare const alertCss: string;
4
- export { addAlertCss, alertCss };
5
+ export { alertId, addAlertCss, removeAlertCss, alertCss };
package/dist/alert.js CHANGED
@@ -1,4 +1,7 @@
1
- import { addCssToHead, prefix } from "@pantograph/tokens";
1
+ import { addCssToHead, removeCssFromHead, prefix } from "@pantograph/tokens";
2
2
  const cssText = ".pc_alert{width:100%;height:fit-content;display:flex;align-items:flex-start;gap:var(--pt-dimension-300, 6px);overflow:hidden;border-width:1px;border-radius:var(--pt-roundness-lg, 8px);border-style:solid;padding:var(--pt-dimension-600, 12px);background:var(--ptc-alert-bg);border-color:var(--ptc-alert-br)}.pc_alert.pc_alert--info{--ptc-alert-fg: rgba(var(--pt-sky-fg));--ptc-alert-bg: rgba(var(--pt-sky-fill-subtle));--ptc-alert-br: rgba(var(--pt-info-br-subtle))}.pc_alert.pc_alert--danger{--ptc-alert-fg: rgba(var(--pt-danger-fg));--ptc-alert-bg: rgba(var(--pt-danger-fill-subtle));--ptc-alert-br: rgba(var(--pt-danger-subtle-br))}.pc_alert.pc_alert--success{--ptc-alert-fg: rgba(var(--pt-success-fg));--ptc-alert-bg: rgba(var(--pt-success-fill-subtle));--ptc-alert-br: rgba(var(--pt-success-br-subtle))}.pc_alert.pc_alert--warning{--ptc-alert-fg: rgba(var(--pt-warning-fg));--ptc-alert-bg: rgba(var(--pt-warning-fill-subtle));--ptc-alert-br: rgba(var(--pt-warning-br-subtle))}.pc_alert.pc_alert--hint{--ptc-alert-fg: rgba(var(--pt-gray-fg));--ptc-alert-bg: rgba(var(--pt-gray-fill-subtle));--ptc-alert-br: rgba(var(--pt-gray-br-subtle))}.pc_alert .pc_alert__body{display:flex;flex-direction:column;flex:1 1 0%;gap:var(--pt-dimension-200, 4px)}.pc_alert .pc_alert__body .pc_alert__title{--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-medium, medium);font-size:var(--pt-dimension-700, 14px);line-height:var(--pt-lineheight-6, 16px);letter-spacing:0}.pc_alert .pc_alert__body .pc_alert__description{min-height:var(--pt-size-sm, 24px);display:flex;align-items:center;--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-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_alert .pc_alert__body .pc_alert__action{margin-top:var(--pt-dimension-200, 4px)}.pc_alert .pc_alert__icon{color:var(--ptc-alert-fg)}\n";
3
- export const addAlertCss = () => addCssToHead(`${prefix}s-alert`, cssText);
4
- export const alertCss = cssText;
3
+ const alertId = `${prefix}s-alert`;
4
+ const addAlertCss = () => addCssToHead(alertId, cssText);
5
+ const removeAlertCss = () => removeCssFromHead(alertId);
6
+ const alertCss = cssText;
7
+ export { alertId, addAlertCss, removeAlertCss, alertCss };
package/dist/alert.umd.cjs CHANGED
@@ -1,7 +1,12 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- const { addCssToHead, prefix } = require("@pantograph/tokens");
3
+ const { addCssToHead, removeCssFromHead, prefix } = require("@pantograph/tokens");
4
4
  const cssText = ".pc_alert{width:100%;height:fit-content;display:flex;align-items:flex-start;gap:var(--pt-dimension-300, 6px);overflow:hidden;border-width:1px;border-radius:var(--pt-roundness-lg, 8px);border-style:solid;padding:var(--pt-dimension-600, 12px);background:var(--ptc-alert-bg);border-color:var(--ptc-alert-br)}.pc_alert.pc_alert--info{--ptc-alert-fg: rgba(var(--pt-sky-fg));--ptc-alert-bg: rgba(var(--pt-sky-fill-subtle));--ptc-alert-br: rgba(var(--pt-info-br-subtle))}.pc_alert.pc_alert--danger{--ptc-alert-fg: rgba(var(--pt-danger-fg));--ptc-alert-bg: rgba(var(--pt-danger-fill-subtle));--ptc-alert-br: rgba(var(--pt-danger-subtle-br))}.pc_alert.pc_alert--success{--ptc-alert-fg: rgba(var(--pt-success-fg));--ptc-alert-bg: rgba(var(--pt-success-fill-subtle));--ptc-alert-br: rgba(var(--pt-success-br-subtle))}.pc_alert.pc_alert--warning{--ptc-alert-fg: rgba(var(--pt-warning-fg));--ptc-alert-bg: rgba(var(--pt-warning-fill-subtle));--ptc-alert-br: rgba(var(--pt-warning-br-subtle))}.pc_alert.pc_alert--hint{--ptc-alert-fg: rgba(var(--pt-gray-fg));--ptc-alert-bg: rgba(var(--pt-gray-fill-subtle));--ptc-alert-br: rgba(var(--pt-gray-br-subtle))}.pc_alert .pc_alert__body{display:flex;flex-direction:column;flex:1 1 0%;gap:var(--pt-dimension-200, 4px)}.pc_alert .pc_alert__body .pc_alert__title{--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-medium, medium);font-size:var(--pt-dimension-700, 14px);line-height:var(--pt-lineheight-6, 16px);letter-spacing:0}.pc_alert .pc_alert__body .pc_alert__description{min-height:var(--pt-size-sm, 24px);display:flex;align-items:center;--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-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_alert .pc_alert__body .pc_alert__action{margin-top:var(--pt-dimension-200, 4px)}.pc_alert .pc_alert__icon{color:var(--ptc-alert-fg)}\n";
5
- const addAlertCss = () => addCssToHead(`${prefix}s-alert`, cssText);
5
+ const alertId = `${prefix}s-alert`;
6
+ const addAlertCss = () => addCssToHead(alertId, cssText);
7
+ const removeAlertCss = () => removeCssFromHead(alertId);
8
+ const alertCss = cssText;
9
+ exports.alertId = alertId;
6
10
  exports.addAlertCss = addAlertCss;
7
- exports.alertCss = cssText;
11
+ exports.removeAlertCss = removeAlertCss;
12
+ exports.alertCss = alertCss;
package/dist/alert_dialog.d.ts CHANGED
@@ -1,4 +1,5 @@
1
- declare const cssText: string;
1
+ declare const alertDialogId: string;
2
2
  declare const addAlertDialogCss: () => void;
3
+ declare const removeAlertDialogCss: () => void;
3
4
  declare const alertDialogCss: string;
4
- export { addAlertDialogCss, alertDialogCss };
5
+ export { alertDialogId, addAlertDialogCss, removeAlertDialogCss, alertDialogCss };
package/dist/alert_dialog.js CHANGED
@@ -1,4 +1,7 @@
1
- import { addCssToHead, prefix } from "@pantograph/tokens";
1
+ import { addCssToHead, removeCssFromHead, prefix } from "@pantograph/tokens";
2
2
  const cssText = ".pc_alert_dialog{gap:var(--pt-dimension-600, 12px);padding:var(--pt-dimension-800, 16px)}.pc_alert_dialog .pc_alert_dialog__title_wrapper{height:var(--pt-size-md, 32px);display:flex;align-items:center;gap:var(--pt-dimension-400, 8px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pc_alert_dialog .pc_alert_dialog__title{margin:var(--pt-dimension-0, 0px);--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-medium, medium);font-size:var(--pt-dimension-800, 16px);line-height:var(--pt-lineheight-5, 18px);letter-spacing:0}.pc_alert_dialog .pc_alert_dialog__description{--ptu-text-opacity:1;color:rgba(var(--pt-fg-subtle),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_alert_dialog .pc_alert_dialog__actions{display:flex;align-items:center;justify-content:flex-end}\n";
3
- export const addAlertDialogCss = () => addCssToHead(`${prefix}s-alert_dialog`, cssText);
4
- export const alertDialogCss = cssText;
3
+ const alertDialogId = `${prefix}s-alert_dialog`;
4
+ const addAlertDialogCss = () => addCssToHead(alertDialogId, cssText);
5
+ const removeAlertDialogCss = () => removeCssFromHead(alertDialogId);
6
+ const alertDialogCss = cssText;
7
+ export { alertDialogId, addAlertDialogCss, removeAlertDialogCss, alertDialogCss };
package/dist/alert_dialog.umd.cjs CHANGED
@@ -1,7 +1,12 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- const { addCssToHead, prefix } = require("@pantograph/tokens");
3
+ const { addCssToHead, removeCssFromHead, prefix } = require("@pantograph/tokens");
4
4
  const cssText = ".pc_alert_dialog{gap:var(--pt-dimension-600, 12px);padding:var(--pt-dimension-800, 16px)}.pc_alert_dialog .pc_alert_dialog__title_wrapper{height:var(--pt-size-md, 32px);display:flex;align-items:center;gap:var(--pt-dimension-400, 8px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pc_alert_dialog .pc_alert_dialog__title{margin:var(--pt-dimension-0, 0px);--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-medium, medium);font-size:var(--pt-dimension-800, 16px);line-height:var(--pt-lineheight-5, 18px);letter-spacing:0}.pc_alert_dialog .pc_alert_dialog__description{--ptu-text-opacity:1;color:rgba(var(--pt-fg-subtle),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_alert_dialog .pc_alert_dialog__actions{display:flex;align-items:center;justify-content:flex-end}\n";
5
- const addAlertDialogCss = () => addCssToHead(`${prefix}s-alert_dialog`, cssText);
5
+ const alertDialogId = `${prefix}s-alert_dialog`;
6
+ const addAlertDialogCss = () => addCssToHead(alertDialogId, cssText);
7
+ const removeAlertDialogCss = () => removeCssFromHead(alertDialogId);
8
+ const alertDialogCss = cssText;
9
+ exports.alertDialogId = alertDialogId;
6
10
  exports.addAlertDialogCss = addAlertDialogCss;
7
- exports.alertDialogCss = cssText;
11
+ exports.removeAlertDialogCss = removeAlertDialogCss;
12
+ exports.alertDialogCss = alertDialogCss;
package/dist/avatar.d.ts CHANGED
@@ -1,4 +1,5 @@
1
- declare const cssText: string;
1
+ declare const avatarId: string;
2
2
  declare const addAvatarCss: () => void;
3
+ declare const removeAvatarCss: () => void;
3
4
  declare const avatarCss: string;
4
- export { addAvatarCss, avatarCss };
5
+ export { avatarId, addAvatarCss, removeAvatarCss, avatarCss };
package/dist/avatar.js CHANGED
@@ -1,4 +1,7 @@
1
- import { addCssToHead, prefix } from "@pantograph/tokens";
1
+ import { addCssToHead, removeCssFromHead, prefix } from "@pantograph/tokens";
2
2
  const cssText = ".pc_avatar{position:relative;box-sizing:border-box;aspect-ratio:1/1;display:inline-flex;cursor:pointer;align-items:center;justify-content:center;--ptu-bg-opacity:1;background-color:rgba(var(--pt-gray-1),var(--ptu-bg-opacity));--ptu-text-opacity:1;color:rgba(var(--pt-gray-6),var(--ptu-text-opacity))}.pc_avatar.pc_avatar--2xsm{width:var(--pt-dimension-800, 16px);height:var(--pt-dimension-800, 16px);min-width:var(--pt-dimension-800, 16px);max-width:var(--pt-dimension-800, 16px);min-height:var(--pt-dimension-800, 16px);max-height:var(--pt-dimension-800, 16px)}.pc_avatar.pc_avatar--xsm{width:var(--pt-dimension-1000, 20px);height:var(--pt-dimension-1000, 20px);min-width:var(--pt-dimension-1000, 20px);max-width:var(--pt-dimension-1000, 20px);min-height:var(--pt-dimension-1000, 20px);max-height:var(--pt-dimension-1000, 20px)}.pc_avatar.pc_avatar--sm{width:var(--pt-dimension-1200, 24px);height:var(--pt-dimension-1200, 24px);min-width:var(--pt-dimension-1200, 24px);max-width:var(--pt-dimension-1200, 24px);min-height:var(--pt-dimension-1200, 24px);max-height:var(--pt-dimension-1200, 24px)}.pc_avatar.pc_avatar--md{width:var(--pt-dimension-1600, 32px);height:var(--pt-dimension-1600, 32px);min-width:var(--pt-dimension-1600, 32px);max-width:var(--pt-dimension-1600, 32px);min-height:var(--pt-dimension-1600, 32px);max-height:var(--pt-dimension-1600, 32px)}.pc_avatar.pc_avatar--lg{width:var(--pt-dimension-2000, 40px);height:var(--pt-dimension-2000, 40px);min-width:var(--pt-dimension-2000, 40px);max-width:var(--pt-dimension-2000, 40px);min-height:var(--pt-dimension-2000, 40px);max-height:var(--pt-dimension-2000, 40px)}.pc_avatar.pc_avatar--xlg{width:var(--pt-dimension-2400, 48px);height:var(--pt-dimension-2400, 48px);min-width:var(--pt-dimension-2400, 48px);max-width:var(--pt-dimension-2400, 48px);min-height:var(--pt-dimension-2400, 48px);max-height:var(--pt-dimension-2400, 48px)}.pc_avatar.pc_avatar--2xsm,.pc_avatar.pc_avatar--xsm,.pc_avatar.pc_avatar--sm{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_avatar.pc_avatar--md,.pc_avatar.pc_avatar--lg,.pc_avatar.pc_avatar--xlg{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_avatar .pc_avatar__image,.pc_avatar .pc_avatar__fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pc_avatar.pc_avatar--circle,.pc_avatar.pc_avatar--circle .pc_avatar__image,.pc_avatar.pc_avatar--circle .pc_avatar__fallback{border-radius:var(--pt-roundness-full, 88px)}.pc_avatar.pc_avatar--square,.pc_avatar.pc_avatar--square .pc_avatar__image,.pc_avatar.pc_avatar--square .pc_avatar__fallback{border-radius:var(--pt-roundness-sm, 4px)}.pc_avatar.pc_avatar--rect,.pc_avatar.pc_avatar--rect .pc_avatar__image,.pc_avatar.pc_avatar--rect .pc_avatar__fallback{border-radius:var(--pt-roundness-zero, 0px)}.pc_avatar .pc_avatar__image{aspect-ratio:1/1;object-fit:cover}.pc_avatar .pc_avatar__online{position:absolute;bottom:var(--pt-dimension-0, 0px);z-index:1;--ptu-outline-color-opacity:1;outline-color:rgba(var(--pt-gray-0),var(--ptu-outline-color-opacity));outline-style:solid}.pc_avatar--online-start .pc_avatar__online{inset-inline-start:var(--pt-dimension-0, 0px)}.pc_avatar--online-end .pc_avatar__online{inset-inline-end:var(--pt-dimension-0, 0px)}.pc_avatar.pc_avatar--red{border-width:var(--pt-stroke-10, 1px);border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-red-5),var(--ptu-border-opacity))}.pc_avatar.pc_avatar--orange{border-width:var(--pt-stroke-10, 1px);border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-orange-5),var(--ptu-border-opacity))}.pc_avatar.pc_avatar--blue{border-width:var(--pt-stroke-10, 1px);border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-blue-5),var(--ptu-border-opacity))}.pc_avatar.pc_avatar--lime{border-width:var(--pt-stroke-10, 1px);border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-lime-5),var(--ptu-border-opacity))}.pc_avatar.pc_avatar--green{border-width:var(--pt-stroke-10, 1px);border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-green-5),var(--ptu-border-opacity))}.pc_avatar.pc_avatar--cyan{border-width:var(--pt-stroke-10, 1px);border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-cyan-5),var(--ptu-border-opacity))}.pc_avatar.pc_avatar--sky{border-width:var(--pt-stroke-10, 1px);border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-sky-5),var(--ptu-border-opacity))}.pc_avatar.pc_avatar--violet{border-width:var(--pt-stroke-10, 1px);border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-violet-5),var(--ptu-border-opacity))}.pc_avatar.pc_avatar--pink{border-width:var(--pt-stroke-10, 1px);border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-pink-5),var(--ptu-border-opacity))}.pc_avatar.pc_avatar--teal{border-width:var(--pt-stroke-10, 1px);border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-teal-5),var(--ptu-border-opacity))}.pc_avatar.pc_avatar--amber{border-width:var(--pt-stroke-10, 1px);border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-amber-5),var(--ptu-border-opacity))}.pc_avatar.pc_avatar--fuchsia{border-width:var(--pt-stroke-10, 1px);border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-fuchsia-5),var(--ptu-border-opacity))}.pc_avatar.pc_avatar--amethyst{border-width:var(--pt-stroke-10, 1px);border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-amethyst-5),var(--ptu-border-opacity))}.pc_avatar.pc_avatar--mallard{border-width:var(--pt-stroke-10, 1px);border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-mallard-5),var(--ptu-border-opacity))}.pc_avatar.pc_avatar--ocean{border-width:var(--pt-stroke-10, 1px);border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-ocean-5),var(--ptu-border-opacity))}.pc_avatar.pc_avatar--primary{border-width:var(--pt-stroke-10, 1px);border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-primary-5),var(--ptu-border-opacity))}.pc_avatar.pc_avatar--gray{border-width:var(--pt-stroke-10, 1px);border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-gray-5),var(--ptu-border-opacity))}.pc_avatar.pc_avatar--white{border-width:var(--pt-stroke-10, 1px);border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-gray-0),var(--ptu-border-opacity))}.pc_avatar.pc_avatar--gray-subtle{border-width:var(--pt-stroke-10, 1px);border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-gray-2),var(--ptu-border-opacity))}.pc_avatar__group{width:fit-content;display:flex;align-items:center}.pc_avatar__group.pc_avatar__group--gutter{gap:var(--pt-dimension-200, 4px)}.pc_avatar__group:not(.pc_avatar__group--gutter) .pc_avatar:not(:first-child){z-index:1}.pc_avatar__group:not(.pc_avatar__group--gutter) .pc_avatar:not(:first-child).pc_avatar--sm,.pc_avatar__group:not(.pc_avatar__group--gutter) .pc_avatar:not(:first-child).pc_avatar--xsm,.pc_avatar__group:not(.pc_avatar__group--gutter) .pc_avatar:not(:first-child).pc_avatar--2xsm{margin-inline-start:calc(var(--pt-dimension-500, 10px) * -1)}.pc_avatar__group:not(.pc_avatar__group--gutter) .pc_avatar:not(:first-child).pc_avatar--md{margin-inline-start:calc(var(--pt-dimension-600, 12px) * -1)}.pc_avatar__group:not(.pc_avatar__group--gutter) .pc_avatar:not(:first-child).pc_avatar--lg,.pc_avatar__group:not(.pc_avatar__group--gutter) .pc_avatar:not(:first-child).pc_avatar--xlg{margin-inline-start:calc(var(--pt-dimension-700, 14px) * -1)}.pc_avatar__group:not(.pc_avatar__group--gutter) .pc_avatar:first-child{border-width:var(--pt-stroke-0, 0px)}\n";
3
- export const addAvatarCss = () => addCssToHead(`${prefix}s-avatar`, cssText);
4
- export const avatarCss = cssText;
3
+ const avatarId = `${prefix}s-avatar`;
4
+ const addAvatarCss = () => addCssToHead(avatarId, cssText);
5
+ const removeAvatarCss = () => removeCssFromHead(avatarId);
6
+ const avatarCss = cssText;
7
+ export { avatarId, addAvatarCss, removeAvatarCss, avatarCss };
package/dist/avatar.umd.cjs CHANGED
@@ -1,7 +1,12 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- const { addCssToHead, prefix } = require("@pantograph/tokens");
3
+ const { addCssToHead, removeCssFromHead, prefix } = require("@pantograph/tokens");
4
4
  const cssText = ".pc_avatar{position:relative;box-sizing:border-box;aspect-ratio:1/1;display:inline-flex;cursor:pointer;align-items:center;justify-content:center;--ptu-bg-opacity:1;background-color:rgba(var(--pt-gray-1),var(--ptu-bg-opacity));--ptu-text-opacity:1;color:rgba(var(--pt-gray-6),var(--ptu-text-opacity))}.pc_avatar.pc_avatar--2xsm{width:var(--pt-dimension-800, 16px);height:var(--pt-dimension-800, 16px);min-width:var(--pt-dimension-800, 16px);max-width:var(--pt-dimension-800, 16px);min-height:var(--pt-dimension-800, 16px);max-height:var(--pt-dimension-800, 16px)}.pc_avatar.pc_avatar--xsm{width:var(--pt-dimension-1000, 20px);height:var(--pt-dimension-1000, 20px);min-width:var(--pt-dimension-1000, 20px);max-width:var(--pt-dimension-1000, 20px);min-height:var(--pt-dimension-1000, 20px);max-height:var(--pt-dimension-1000, 20px)}.pc_avatar.pc_avatar--sm{width:var(--pt-dimension-1200, 24px);height:var(--pt-dimension-1200, 24px);min-width:var(--pt-dimension-1200, 24px);max-width:var(--pt-dimension-1200, 24px);min-height:var(--pt-dimension-1200, 24px);max-height:var(--pt-dimension-1200, 24px)}.pc_avatar.pc_avatar--md{width:var(--pt-dimension-1600, 32px);height:var(--pt-dimension-1600, 32px);min-width:var(--pt-dimension-1600, 32px);max-width:var(--pt-dimension-1600, 32px);min-height:var(--pt-dimension-1600, 32px);max-height:var(--pt-dimension-1600, 32px)}.pc_avatar.pc_avatar--lg{width:var(--pt-dimension-2000, 40px);height:var(--pt-dimension-2000, 40px);min-width:var(--pt-dimension-2000, 40px);max-width:var(--pt-dimension-2000, 40px);min-height:var(--pt-dimension-2000, 40px);max-height:var(--pt-dimension-2000, 40px)}.pc_avatar.pc_avatar--xlg{width:var(--pt-dimension-2400, 48px);height:var(--pt-dimension-2400, 48px);min-width:var(--pt-dimension-2400, 48px);max-width:var(--pt-dimension-2400, 48px);min-height:var(--pt-dimension-2400, 48px);max-height:var(--pt-dimension-2400, 48px)}.pc_avatar.pc_avatar--2xsm,.pc_avatar.pc_avatar--xsm,.pc_avatar.pc_avatar--sm{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_avatar.pc_avatar--md,.pc_avatar.pc_avatar--lg,.pc_avatar.pc_avatar--xlg{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_avatar .pc_avatar__image,.pc_avatar .pc_avatar__fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pc_avatar.pc_avatar--circle,.pc_avatar.pc_avatar--circle .pc_avatar__image,.pc_avatar.pc_avatar--circle .pc_avatar__fallback{border-radius:var(--pt-roundness-full, 88px)}.pc_avatar.pc_avatar--square,.pc_avatar.pc_avatar--square .pc_avatar__image,.pc_avatar.pc_avatar--square .pc_avatar__fallback{border-radius:var(--pt-roundness-sm, 4px)}.pc_avatar.pc_avatar--rect,.pc_avatar.pc_avatar--rect .pc_avatar__image,.pc_avatar.pc_avatar--rect .pc_avatar__fallback{border-radius:var(--pt-roundness-zero, 0px)}.pc_avatar .pc_avatar__image{aspect-ratio:1/1;object-fit:cover}.pc_avatar .pc_avatar__online{position:absolute;bottom:var(--pt-dimension-0, 0px);z-index:1;--ptu-outline-color-opacity:1;outline-color:rgba(var(--pt-gray-0),var(--ptu-outline-color-opacity));outline-style:solid}.pc_avatar--online-start .pc_avatar__online{inset-inline-start:var(--pt-dimension-0, 0px)}.pc_avatar--online-end .pc_avatar__online{inset-inline-end:var(--pt-dimension-0, 0px)}.pc_avatar.pc_avatar--red{border-width:var(--pt-stroke-10, 1px);border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-red-5),var(--ptu-border-opacity))}.pc_avatar.pc_avatar--orange{border-width:var(--pt-stroke-10, 1px);border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-orange-5),var(--ptu-border-opacity))}.pc_avatar.pc_avatar--blue{border-width:var(--pt-stroke-10, 1px);border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-blue-5),var(--ptu-border-opacity))}.pc_avatar.pc_avatar--lime{border-width:var(--pt-stroke-10, 1px);border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-lime-5),var(--ptu-border-opacity))}.pc_avatar.pc_avatar--green{border-width:var(--pt-stroke-10, 1px);border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-green-5),var(--ptu-border-opacity))}.pc_avatar.pc_avatar--cyan{border-width:var(--pt-stroke-10, 1px);border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-cyan-5),var(--ptu-border-opacity))}.pc_avatar.pc_avatar--sky{border-width:var(--pt-stroke-10, 1px);border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-sky-5),var(--ptu-border-opacity))}.pc_avatar.pc_avatar--violet{border-width:var(--pt-stroke-10, 1px);border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-violet-5),var(--ptu-border-opacity))}.pc_avatar.pc_avatar--pink{border-width:var(--pt-stroke-10, 1px);border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-pink-5),var(--ptu-border-opacity))}.pc_avatar.pc_avatar--teal{border-width:var(--pt-stroke-10, 1px);border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-teal-5),var(--ptu-border-opacity))}.pc_avatar.pc_avatar--amber{border-width:var(--pt-stroke-10, 1px);border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-amber-5),var(--ptu-border-opacity))}.pc_avatar.pc_avatar--fuchsia{border-width:var(--pt-stroke-10, 1px);border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-fuchsia-5),var(--ptu-border-opacity))}.pc_avatar.pc_avatar--amethyst{border-width:var(--pt-stroke-10, 1px);border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-amethyst-5),var(--ptu-border-opacity))}.pc_avatar.pc_avatar--mallard{border-width:var(--pt-stroke-10, 1px);border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-mallard-5),var(--ptu-border-opacity))}.pc_avatar.pc_avatar--ocean{border-width:var(--pt-stroke-10, 1px);border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-ocean-5),var(--ptu-border-opacity))}.pc_avatar.pc_avatar--primary{border-width:var(--pt-stroke-10, 1px);border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-primary-5),var(--ptu-border-opacity))}.pc_avatar.pc_avatar--gray{border-width:var(--pt-stroke-10, 1px);border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-gray-5),var(--ptu-border-opacity))}.pc_avatar.pc_avatar--white{border-width:var(--pt-stroke-10, 1px);border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-gray-0),var(--ptu-border-opacity))}.pc_avatar.pc_avatar--gray-subtle{border-width:var(--pt-stroke-10, 1px);border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-gray-2),var(--ptu-border-opacity))}.pc_avatar__group{width:fit-content;display:flex;align-items:center}.pc_avatar__group.pc_avatar__group--gutter{gap:var(--pt-dimension-200, 4px)}.pc_avatar__group:not(.pc_avatar__group--gutter) .pc_avatar:not(:first-child){z-index:1}.pc_avatar__group:not(.pc_avatar__group--gutter) .pc_avatar:not(:first-child).pc_avatar--sm,.pc_avatar__group:not(.pc_avatar__group--gutter) .pc_avatar:not(:first-child).pc_avatar--xsm,.pc_avatar__group:not(.pc_avatar__group--gutter) .pc_avatar:not(:first-child).pc_avatar--2xsm{margin-inline-start:calc(var(--pt-dimension-500, 10px) * -1)}.pc_avatar__group:not(.pc_avatar__group--gutter) .pc_avatar:not(:first-child).pc_avatar--md{margin-inline-start:calc(var(--pt-dimension-600, 12px) * -1)}.pc_avatar__group:not(.pc_avatar__group--gutter) .pc_avatar:not(:first-child).pc_avatar--lg,.pc_avatar__group:not(.pc_avatar__group--gutter) .pc_avatar:not(:first-child).pc_avatar--xlg{margin-inline-start:calc(var(--pt-dimension-700, 14px) * -1)}.pc_avatar__group:not(.pc_avatar__group--gutter) .pc_avatar:first-child{border-width:var(--pt-stroke-0, 0px)}\n";
5
- const addAvatarCss = () => addCssToHead(`${prefix}s-avatar`, cssText);
5
+ const avatarId = `${prefix}s-avatar`;
6
+ const addAvatarCss = () => addCssToHead(avatarId, cssText);
7
+ const removeAvatarCss = () => removeCssFromHead(avatarId);
8
+ const avatarCss = cssText;
9
+ exports.avatarId = avatarId;
6
10
  exports.addAvatarCss = addAvatarCss;
7
- exports.avatarCss = cssText;
11
+ exports.removeAvatarCss = removeAvatarCss;
12
+ exports.avatarCss = avatarCss;
package/dist/badge.d.ts CHANGED
@@ -1,4 +1,5 @@
1
- declare const cssText: string;
1
+ declare const badgeId: string;
2
2
  declare const addBadgeCss: () => void;
3
+ declare const removeBadgeCss: () => void;
3
4
  declare const badgeCss: string;
4
- export { addBadgeCss, badgeCss };
5
+ export { badgeId, addBadgeCss, removeBadgeCss, badgeCss };
package/dist/badge.js CHANGED
@@ -1,4 +1,7 @@
1
- import { addCssToHead, prefix } from "@pantograph/tokens";
1
+ import { addCssToHead, removeCssFromHead, prefix } from "@pantograph/tokens";
2
2
  const cssText = ".pc_badge{box-sizing:border-box;overflow:hidden;caret-color:transparent;color:var(--ptc-badge-fg);background:var(--ptc-badge-bg)}.pc_badge.pc_badge--2xsm{height:var(--pt-dimension-800, 16px);min-height:var(--pt-dimension-800, 16px);max-height:var(--pt-dimension-800, 16px);min-width:var(--pt-dimension-800, 16px)}.pc_badge.pc_badge--xsm{height:var(--pt-dimension-1000, 20px);min-height:var(--pt-dimension-1000, 20px);max-height:var(--pt-dimension-1000, 20px);min-width:var(--pt-dimension-1000, 20px)}.pc_badge.pc_badge--xsm,.pc_badge.pc_badge--2xsm{gap:var(--pt-dimension-100, 2px);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_badge.pc_badge--md{height:var(--pt-dimension-1600, 32px);min-height:var(--pt-dimension-1600, 32px);max-height:var(--pt-dimension-1600, 32px);min-width:var(--pt-dimension-1600, 32px);gap:var(--pt-dimension-200, 4px);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_badge.pc_badge--tiny{width:var(--pt-dimension-600, 12px);height:var(--pt-dimension-600, 12px);min-width:var(--pt-dimension-600, 12px);max-width:var(--pt-dimension-600, 12px);min-height:var(--pt-dimension-600, 12px);max-height:var(--pt-dimension-600, 12px)}.pc_badge.pc_badge--tinier{width:var(--pt-dimension-300, 6px);height:var(--pt-dimension-300, 6px);min-width:var(--pt-dimension-300, 6px);max-width:var(--pt-dimension-300, 6px);min-height:var(--pt-dimension-300, 6px);max-height:var(--pt-dimension-300, 6px)}.pc_badge.pc_badge--minify{border-radius:var(--pt-roundness-full, 88px)}.pc_badge.pc_badge--pill{width:fit-content;display:flex;align-items:center;justify-content:center}.pc_badge.pc_badge--pill:not(.pc_badge--text).pc_badge--icon{padding-left:var(--pt-dimension-0, 0px);padding-right:var(--pt-dimension-0, 0px)}.pc_badge.pc_badge--pill:not(.pc_badge--text).pc_badge--icon.pc_badge--2xsm{width:var(--pt-dimension-800, 16px);min-width:var(--pt-dimension-800, 16px);max-width:var(--pt-dimension-800, 16px)}.pc_badge.pc_badge--pill:not(.pc_badge--text).pc_badge--icon.pc_badge--xsm{width:var(--pt-dimension-1000, 20px);min-width:var(--pt-dimension-1000, 20px);max-width:var(--pt-dimension-1000, 20px)}.pc_badge.pc_badge--pill:not(.pc_badge--text).pc_badge--icon.pc_badge--sm{width:var(--pt-size-sm, 24px);min-width:var(--pt-size-sm, 24px);max-width:var(--pt-size-sm, 24px)}.pc_badge.pc_badge--pill:not(.pc_badge--text).pc_badge--icon.pc_badge--md{width:var(--pt-dimension-1600, 32px);min-width:var(--pt-dimension-1600, 32px);max-width:var(--pt-dimension-1600, 32px)}.pc_badge.pc_badge--pill:not(.pc_badge--icon).pc_badge--text.pc_badge--2xsm,.pc_badge.pc_badge--pill:not(.pc_badge--icon).pc_badge--text.pc_badge--xsm{padding-left:var(--pt-dimension-200, 4px);padding-right:var(--pt-dimension-200, 4px)}.pc_badge.pc_badge--pill:not(.pc_badge--icon).pc_badge--text.pc_badge--md{padding-left:var(--pt-dimension-400, 8px);padding-right:var(--pt-dimension-400, 8px)}.pc_badge.pc_badge--pill.pc_badge--icon.pc_badge--text.pc_badge--2xsm{padding-inline-start:var(--pt-dimension-100, 2px);padding-inline-end:var(--pt-dimension-200, 4px)}.pc_badge.pc_badge--pill.pc_badge--icon.pc_badge--text.pc_badge--xsm{padding-inline-start:var(--pt-dimension-200, 4px);padding-inline-end:var(--pt-dimension-300, 6px)}.pc_badge.pc_badge--pill.pc_badge--icon.pc_badge--text.pc_badge--md{padding-inline-start:var(--pt-dimension-400, 8px);padding-inline-end:var(--pt-dimension-600, 12px)}.pc_badge.pc_badge--rect{display:flex;align-items:center;justify-content:center;padding-left:var(--pt-dimension-0, 0px);padding-right:var(--pt-dimension-0, 0px)}.pc_badge.pc_badge--rect:not(.pc_badge--md){border-radius:var(--pt-roundness-sm, 4px)}.pc_badge.pc_badge--rect.pc_badge--md{width:var(--pt-size-md, 32px);height:var(--pt-size-md, 32px);min-width:var(--pt-size-md, 32px);min-height:var(--pt-size-md, 32px);max-width:var(--pt-size-md, 32px);max-height:var(--pt-size-md, 32px);border-radius:var(--pt-roundness-md, 6px)}.pc_badge.pc_badge--rect.pc_badge--2xsm{width:var(--pt-size-2xsm, 16px);height:var(--pt-size-2xsm, 16px);min-width:var(--pt-size-2xsm, 16px);min-height:var(--pt-size-2xsm, 16px);max-width:var(--pt-size-2xsm, 16px);max-height:var(--pt-size-2xsm, 16px)}.pc_badge.pc_badge--rect.pc_badge--xsm{width:var(--pt-size-xsm, 20px);height:var(--pt-size-xsm, 20px);min-width:var(--pt-size-xsm, 20px);min-height:var(--pt-size-xsm, 20px);max-width:var(--pt-size-xsm, 20px);max-height:var(--pt-size-xsm, 20px)}.pc_badge.pc_badge--rect.pc_badge--sm{width:var(--pt-size-sm, 24px);height:var(--pt-size-sm, 24px);min-width:var(--pt-size-sm, 24px);min-height:var(--pt-size-sm, 24px);max-width:var(--pt-size-sm, 24px);max-height:var(--pt-size-sm, 24px)}.pc_badge.pc_badge--pill{border-radius:var(--pt-roundness-full, 88px)}.pc_badge--br{box-sizing:border-box;border:1px solid var(--ptc-badge-br, transparent)}\n";
3
- export const addBadgeCss = () => addCssToHead(`${prefix}s-badge`, cssText);
4
- export const badgeCss = cssText;
3
+ const badgeId = `${prefix}s-badge`;
4
+ const addBadgeCss = () => addCssToHead(badgeId, cssText);
5
+ const removeBadgeCss = () => removeCssFromHead(badgeId);
6
+ const badgeCss = cssText;
7
+ export { badgeId, addBadgeCss, removeBadgeCss, badgeCss };
package/dist/badge.umd.cjs CHANGED
@@ -1,7 +1,12 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- const { addCssToHead, prefix } = require("@pantograph/tokens");
3
+ const { addCssToHead, removeCssFromHead, prefix } = require("@pantograph/tokens");
4
4
  const cssText = ".pc_badge{box-sizing:border-box;overflow:hidden;caret-color:transparent;color:var(--ptc-badge-fg);background:var(--ptc-badge-bg)}.pc_badge.pc_badge--2xsm{height:var(--pt-dimension-800, 16px);min-height:var(--pt-dimension-800, 16px);max-height:var(--pt-dimension-800, 16px);min-width:var(--pt-dimension-800, 16px)}.pc_badge.pc_badge--xsm{height:var(--pt-dimension-1000, 20px);min-height:var(--pt-dimension-1000, 20px);max-height:var(--pt-dimension-1000, 20px);min-width:var(--pt-dimension-1000, 20px)}.pc_badge.pc_badge--xsm,.pc_badge.pc_badge--2xsm{gap:var(--pt-dimension-100, 2px);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_badge.pc_badge--md{height:var(--pt-dimension-1600, 32px);min-height:var(--pt-dimension-1600, 32px);max-height:var(--pt-dimension-1600, 32px);min-width:var(--pt-dimension-1600, 32px);gap:var(--pt-dimension-200, 4px);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_badge.pc_badge--tiny{width:var(--pt-dimension-600, 12px);height:var(--pt-dimension-600, 12px);min-width:var(--pt-dimension-600, 12px);max-width:var(--pt-dimension-600, 12px);min-height:var(--pt-dimension-600, 12px);max-height:var(--pt-dimension-600, 12px)}.pc_badge.pc_badge--tinier{width:var(--pt-dimension-300, 6px);height:var(--pt-dimension-300, 6px);min-width:var(--pt-dimension-300, 6px);max-width:var(--pt-dimension-300, 6px);min-height:var(--pt-dimension-300, 6px);max-height:var(--pt-dimension-300, 6px)}.pc_badge.pc_badge--minify{border-radius:var(--pt-roundness-full, 88px)}.pc_badge.pc_badge--pill{width:fit-content;display:flex;align-items:center;justify-content:center}.pc_badge.pc_badge--pill:not(.pc_badge--text).pc_badge--icon{padding-left:var(--pt-dimension-0, 0px);padding-right:var(--pt-dimension-0, 0px)}.pc_badge.pc_badge--pill:not(.pc_badge--text).pc_badge--icon.pc_badge--2xsm{width:var(--pt-dimension-800, 16px);min-width:var(--pt-dimension-800, 16px);max-width:var(--pt-dimension-800, 16px)}.pc_badge.pc_badge--pill:not(.pc_badge--text).pc_badge--icon.pc_badge--xsm{width:var(--pt-dimension-1000, 20px);min-width:var(--pt-dimension-1000, 20px);max-width:var(--pt-dimension-1000, 20px)}.pc_badge.pc_badge--pill:not(.pc_badge--text).pc_badge--icon.pc_badge--sm{width:var(--pt-size-sm, 24px);min-width:var(--pt-size-sm, 24px);max-width:var(--pt-size-sm, 24px)}.pc_badge.pc_badge--pill:not(.pc_badge--text).pc_badge--icon.pc_badge--md{width:var(--pt-dimension-1600, 32px);min-width:var(--pt-dimension-1600, 32px);max-width:var(--pt-dimension-1600, 32px)}.pc_badge.pc_badge--pill:not(.pc_badge--icon).pc_badge--text.pc_badge--2xsm,.pc_badge.pc_badge--pill:not(.pc_badge--icon).pc_badge--text.pc_badge--xsm{padding-left:var(--pt-dimension-200, 4px);padding-right:var(--pt-dimension-200, 4px)}.pc_badge.pc_badge--pill:not(.pc_badge--icon).pc_badge--text.pc_badge--md{padding-left:var(--pt-dimension-400, 8px);padding-right:var(--pt-dimension-400, 8px)}.pc_badge.pc_badge--pill.pc_badge--icon.pc_badge--text.pc_badge--2xsm{padding-inline-start:var(--pt-dimension-100, 2px);padding-inline-end:var(--pt-dimension-200, 4px)}.pc_badge.pc_badge--pill.pc_badge--icon.pc_badge--text.pc_badge--xsm{padding-inline-start:var(--pt-dimension-200, 4px);padding-inline-end:var(--pt-dimension-300, 6px)}.pc_badge.pc_badge--pill.pc_badge--icon.pc_badge--text.pc_badge--md{padding-inline-start:var(--pt-dimension-400, 8px);padding-inline-end:var(--pt-dimension-600, 12px)}.pc_badge.pc_badge--rect{display:flex;align-items:center;justify-content:center;padding-left:var(--pt-dimension-0, 0px);padding-right:var(--pt-dimension-0, 0px)}.pc_badge.pc_badge--rect:not(.pc_badge--md){border-radius:var(--pt-roundness-sm, 4px)}.pc_badge.pc_badge--rect.pc_badge--md{width:var(--pt-size-md, 32px);height:var(--pt-size-md, 32px);min-width:var(--pt-size-md, 32px);min-height:var(--pt-size-md, 32px);max-width:var(--pt-size-md, 32px);max-height:var(--pt-size-md, 32px);border-radius:var(--pt-roundness-md, 6px)}.pc_badge.pc_badge--rect.pc_badge--2xsm{width:var(--pt-size-2xsm, 16px);height:var(--pt-size-2xsm, 16px);min-width:var(--pt-size-2xsm, 16px);min-height:var(--pt-size-2xsm, 16px);max-width:var(--pt-size-2xsm, 16px);max-height:var(--pt-size-2xsm, 16px)}.pc_badge.pc_badge--rect.pc_badge--xsm{width:var(--pt-size-xsm, 20px);height:var(--pt-size-xsm, 20px);min-width:var(--pt-size-xsm, 20px);min-height:var(--pt-size-xsm, 20px);max-width:var(--pt-size-xsm, 20px);max-height:var(--pt-size-xsm, 20px)}.pc_badge.pc_badge--rect.pc_badge--sm{width:var(--pt-size-sm, 24px);height:var(--pt-size-sm, 24px);min-width:var(--pt-size-sm, 24px);min-height:var(--pt-size-sm, 24px);max-width:var(--pt-size-sm, 24px);max-height:var(--pt-size-sm, 24px)}.pc_badge.pc_badge--pill{border-radius:var(--pt-roundness-full, 88px)}.pc_badge--br{box-sizing:border-box;border:1px solid var(--ptc-badge-br, transparent)}\n";
5
- const addBadgeCss = () => addCssToHead(`${prefix}s-badge`, cssText);
5
+ const badgeId = `${prefix}s-badge`;
6
+ const addBadgeCss = () => addCssToHead(badgeId, cssText);
7
+ const removeBadgeCss = () => removeCssFromHead(badgeId);
8
+ const badgeCss = cssText;
9
+ exports.badgeId = badgeId;
6
10
  exports.addBadgeCss = addBadgeCss;
7
- exports.badgeCss = cssText;
11
+ exports.removeBadgeCss = removeBadgeCss;
12
+ exports.badgeCss = badgeCss;
package/dist/blanket.d.ts CHANGED
@@ -1,4 +1,5 @@
1
- declare const cssText: string;
1
+ declare const blanketId: string;
2
2
  declare const addBlanketCss: () => void;
3
+ declare const removeBlanketCss: () => void;
3
4
  declare const blanketCss: string;
4
- export { addBlanketCss, blanketCss };
5
+ export { blanketId, addBlanketCss, removeBlanketCss, blanketCss };
package/dist/blanket.js CHANGED
@@ -1,4 +1,7 @@
1
- import { addCssToHead, prefix } from "@pantograph/tokens";
1
+ import { addCssToHead, removeCssFromHead, prefix } from "@pantograph/tokens";
2
2
  const cssText = ".pc_blanket{pointer-events:auto;inset-inline-start:var(--pt-dimension-0, 0px);top:var(--pt-dimension-0, 0px);background-color:var(--pt-alpha-gray-4);-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}.pc_blanket[data-screen]{position:fixed;width:100vw;height:100vh}.pc_blanket:not([data-screen]){position:absolute;width:100%;height:100%}\n";
3
- export const addBlanketCss = () => addCssToHead(`${prefix}s-blanket`, cssText);
4
- export const blanketCss = cssText;
3
+ const blanketId = `${prefix}s-blanket`;
4
+ const addBlanketCss = () => addCssToHead(blanketId, cssText);
5
+ const removeBlanketCss = () => removeCssFromHead(blanketId);
6
+ const blanketCss = cssText;
7
+ export { blanketId, addBlanketCss, removeBlanketCss, blanketCss };
package/dist/blanket.umd.cjs CHANGED
@@ -1,7 +1,12 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- const { addCssToHead, prefix } = require("@pantograph/tokens");
3
+ const { addCssToHead, removeCssFromHead, prefix } = require("@pantograph/tokens");
4
4
  const cssText = ".pc_blanket{pointer-events:auto;inset-inline-start:var(--pt-dimension-0, 0px);top:var(--pt-dimension-0, 0px);background-color:var(--pt-alpha-gray-4);-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}.pc_blanket[data-screen]{position:fixed;width:100vw;height:100vh}.pc_blanket:not([data-screen]){position:absolute;width:100%;height:100%}\n";
5
- const addBlanketCss = () => addCssToHead(`${prefix}s-blanket`, cssText);
5
+ const blanketId = `${prefix}s-blanket`;
6
+ const addBlanketCss = () => addCssToHead(blanketId, cssText);
7
+ const removeBlanketCss = () => removeCssFromHead(blanketId);
8
+ const blanketCss = cssText;
9
+ exports.blanketId = blanketId;
6
10
  exports.addBlanketCss = addBlanketCss;
7
- exports.blanketCss = cssText;
11
+ exports.removeBlanketCss = removeBlanketCss;
12
+ exports.blanketCss = blanketCss;
package/dist/breadcrumb.d.ts CHANGED
@@ -1,4 +1,5 @@
1
- declare const cssText: string;
1
+ declare const breadcrumbId: string;
2
2
  declare const addBreadcrumbCss: () => void;
3
+ declare const removeBreadcrumbCss: () => void;
3
4
  declare const breadcrumbCss: string;
4
- export { addBreadcrumbCss, breadcrumbCss };
5
+ export { breadcrumbId, addBreadcrumbCss, removeBreadcrumbCss, breadcrumbCss };
package/dist/breadcrumb.js CHANGED
@@ -1,4 +1,7 @@
1
- import { addCssToHead, prefix } from "@pantograph/tokens";
1
+ import { addCssToHead, removeCssFromHead, prefix } from "@pantograph/tokens";
2
2
  const cssText = ".pc_breadcrumb{box-sizing:border-box;display:inline-flex;align-items:center}.pc_breadcrumb.pc_breadcrumb--md{--ptc-breadcrumb-h: var(--pt-size-md);--ptc-breadcrumb-content-min-h: var(--pt-dimension-1400)}.pc_breadcrumb.pc_breadcrumb--md .pc_breadcrumb__item__title{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_breadcrumb.pc_breadcrumb--lg{--ptc-breadcrumb-h: var(--pt-size-lg);--ptc-breadcrumb-content-min-h: var(--pt-dimension-1400)}.pc_breadcrumb.pc_breadcrumb--lg .pc_breadcrumb__item__title{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_breadcrumb .pc_breadcrumb__list{margin:var(--pt-dimension-0, 0px);box-sizing:border-box;display:inline-flex;align-items:center;padding:var(--pt-dimension-0, 0px)}.pc_breadcrumb .pc_breadcrumb__item{box-sizing:border-box;display:inline-flex;align-items:center;gap:var(--pt-dimension-200, 4px);text-decoration:none;height:var(--ptc-breadcrumb-h);min-height:var(--ptc-breadcrumb-h);max-height:var(--ptc-breadcrumb-h)}.pc_breadcrumb .pc_breadcrumb__item .pc_breadcrumb__item__content{box-sizing:border-box;display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:var(--pt-dimension-200, 4px);border-radius:var(--pt-roundness-lg, 8px);outline-width:var(--pt-stroke-0, 0px);min-height:var(--ptc-breadcrumb-content-min-h);height:var(--ptc-breadcrumb-content-min-h)}.pc_breadcrumb .pc_breadcrumb__item .pc_breadcrumb__item__content .pc_breadcrumb__item__title{box-sizing:border-box;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_breadcrumb .pc_breadcrumb__item .pc_breadcrumb__item__content .pc_breadcrumb__item__leading{box-sizing:border-box;display:inline-flex;align-items:center}.pc_breadcrumb .pc_breadcrumb__item .pc_breadcrumb__item__separator{--ptu-text-opacity:1;color:rgba(var(--pt-fg-subtle),var(--ptu-text-opacity))}.pc_breadcrumb .pc_breadcrumb__item.pc_breadcrumb__item--current .pc_breadcrumb__item__content{height:var(--pt-size-md, 32px);gap:var(--pt-dimension-200, 4px);padding-left:var(--pt-dimension-200, 4px);padding-right:var(--pt-dimension-200, 4px)}.pc_breadcrumb .pc_breadcrumb__item.pc_breadcrumb__item--current .pc_breadcrumb__item__content .pc_breadcrumb__item__title{--ptu-text-opacity:1;color:rgba(var(--pt-fg),var(--ptu-text-opacity))}.pc_breadcrumb .pc_breadcrumb__item:not(.pc_breadcrumb__item--current){padding-inline-end:var(--pt-dimension-200, 4px);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_breadcrumb .pc_breadcrumb__item:not(.pc_breadcrumb__item--current) .pc_breadcrumb__item__content{padding:var(--pt-dimension-200, 4px)}.pc_breadcrumb .pc_breadcrumb__item:not(.pc_breadcrumb__item--current) .pc_breadcrumb__item__content:not(:hover){--ptu-text-opacity:1;color:rgba(var(--pt-fg-subtle),var(--ptu-text-opacity))}.pc_breadcrumb .pc_breadcrumb__item:not(.pc_breadcrumb__item--current) .pc_breadcrumb__item__content: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_breadcrumb .pc_breadcrumb__item:not(.pc_breadcrumb__item--current) .pc_breadcrumb__item__content: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)}\n";
3
- export const addBreadcrumbCss = () => addCssToHead(`${prefix}s-breadcrumb`, cssText);
4
- export const breadcrumbCss = cssText;
3
+ const breadcrumbId = `${prefix}s-breadcrumb`;
4
+ const addBreadcrumbCss = () => addCssToHead(breadcrumbId, cssText);
5
+ const removeBreadcrumbCss = () => removeCssFromHead(breadcrumbId);
6
+ const breadcrumbCss = cssText;
7
+ export { breadcrumbId, addBreadcrumbCss, removeBreadcrumbCss, breadcrumbCss };
package/dist/breadcrumb.umd.cjs CHANGED
@@ -1,7 +1,12 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- const { addCssToHead, prefix } = require("@pantograph/tokens");
3
+ const { addCssToHead, removeCssFromHead, prefix } = require("@pantograph/tokens");
4
4
  const cssText = ".pc_breadcrumb{box-sizing:border-box;display:inline-flex;align-items:center}.pc_breadcrumb.pc_breadcrumb--md{--ptc-breadcrumb-h: var(--pt-size-md);--ptc-breadcrumb-content-min-h: var(--pt-dimension-1400)}.pc_breadcrumb.pc_breadcrumb--md .pc_breadcrumb__item__title{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_breadcrumb.pc_breadcrumb--lg{--ptc-breadcrumb-h: var(--pt-size-lg);--ptc-breadcrumb-content-min-h: var(--pt-dimension-1400)}.pc_breadcrumb.pc_breadcrumb--lg .pc_breadcrumb__item__title{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_breadcrumb .pc_breadcrumb__list{margin:var(--pt-dimension-0, 0px);box-sizing:border-box;display:inline-flex;align-items:center;padding:var(--pt-dimension-0, 0px)}.pc_breadcrumb .pc_breadcrumb__item{box-sizing:border-box;display:inline-flex;align-items:center;gap:var(--pt-dimension-200, 4px);text-decoration:none;height:var(--ptc-breadcrumb-h);min-height:var(--ptc-breadcrumb-h);max-height:var(--ptc-breadcrumb-h)}.pc_breadcrumb .pc_breadcrumb__item .pc_breadcrumb__item__content{box-sizing:border-box;display:inline-flex;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:var(--pt-dimension-200, 4px);border-radius:var(--pt-roundness-lg, 8px);outline-width:var(--pt-stroke-0, 0px);min-height:var(--ptc-breadcrumb-content-min-h);height:var(--ptc-breadcrumb-content-min-h)}.pc_breadcrumb .pc_breadcrumb__item .pc_breadcrumb__item__content .pc_breadcrumb__item__title{box-sizing:border-box;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_breadcrumb .pc_breadcrumb__item .pc_breadcrumb__item__content .pc_breadcrumb__item__leading{box-sizing:border-box;display:inline-flex;align-items:center}.pc_breadcrumb .pc_breadcrumb__item .pc_breadcrumb__item__separator{--ptu-text-opacity:1;color:rgba(var(--pt-fg-subtle),var(--ptu-text-opacity))}.pc_breadcrumb .pc_breadcrumb__item.pc_breadcrumb__item--current .pc_breadcrumb__item__content{height:var(--pt-size-md, 32px);gap:var(--pt-dimension-200, 4px);padding-left:var(--pt-dimension-200, 4px);padding-right:var(--pt-dimension-200, 4px)}.pc_breadcrumb .pc_breadcrumb__item.pc_breadcrumb__item--current .pc_breadcrumb__item__content .pc_breadcrumb__item__title{--ptu-text-opacity:1;color:rgba(var(--pt-fg),var(--ptu-text-opacity))}.pc_breadcrumb .pc_breadcrumb__item:not(.pc_breadcrumb__item--current){padding-inline-end:var(--pt-dimension-200, 4px);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_breadcrumb .pc_breadcrumb__item:not(.pc_breadcrumb__item--current) .pc_breadcrumb__item__content{padding:var(--pt-dimension-200, 4px)}.pc_breadcrumb .pc_breadcrumb__item:not(.pc_breadcrumb__item--current) .pc_breadcrumb__item__content:not(:hover){--ptu-text-opacity:1;color:rgba(var(--pt-fg-subtle),var(--ptu-text-opacity))}.pc_breadcrumb .pc_breadcrumb__item:not(.pc_breadcrumb__item--current) .pc_breadcrumb__item__content: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_breadcrumb .pc_breadcrumb__item:not(.pc_breadcrumb__item--current) .pc_breadcrumb__item__content: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)}\n";
5
- const addBreadcrumbCss = () => addCssToHead(`${prefix}s-breadcrumb`, cssText);
5
+ const breadcrumbId = `${prefix}s-breadcrumb`;
6
+ const addBreadcrumbCss = () => addCssToHead(breadcrumbId, cssText);
7
+ const removeBreadcrumbCss = () => removeCssFromHead(breadcrumbId);
8
+ const breadcrumbCss = cssText;
9
+ exports.breadcrumbId = breadcrumbId;
6
10
  exports.addBreadcrumbCss = addBreadcrumbCss;
7
- exports.breadcrumbCss = cssText;
11
+ exports.removeBreadcrumbCss = removeBreadcrumbCss;
12
+ exports.breadcrumbCss = breadcrumbCss;
package/dist/button.d.ts CHANGED
@@ -1,4 +1,5 @@
1
- declare const cssText: string;
1
+ declare const buttonId: string;
2
2
  declare const addButtonCss: () => void;
3
+ declare const removeButtonCss: () => void;
3
4
  declare const buttonCss: string;
4
- export { addButtonCss, buttonCss };
5
+ export { buttonId, addButtonCss, removeButtonCss, buttonCss };