@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/popover.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_popover__content{border-width:var(--pt-stroke-10, 1px);--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));--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);outline:0}.pc_popover__content--sm{border-radius:var(--pt-roundness-sm, 4px)}.pc_popover__content--sm:not(.pc_popover__content--no-padding){padding:var(--pt-dimension-200, 4px)}.pc_popover__content--md{border-radius:var(--pt-roundness-md, 6px)}.pc_popover__content--md:not(.pc_popover__content--no-padding){padding:var(--pt-dimension-300, 6px)}.pc_popover__content--lg{border-radius:var(--pt-roundness-lg, 8px)}.pc_popover__content--lg:not(.pc_popover__content--no-padding){padding:var(--pt-dimension-400, 8px)}.pc_popover__content.pc_popover__content--no-padding{padding:var(--pt-dimension-0, 0px)}\n";
5
- const addPopoverCss = () => addCssToHead(`${prefix}s-popover`, cssText);
5
+ const popoverId = `${prefix}s-popover`;
6
+ const addPopoverCss = () => addCssToHead(popoverId, cssText);
7
+ const removePopoverCss = () => removeCssFromHead(popoverId);
8
+ const popoverCss = cssText;
9
+ exports.popoverId = popoverId;
6
10
  exports.addPopoverCss = addPopoverCss;
7
- exports.popoverCss = cssText;
11
+ exports.removePopoverCss = removePopoverCss;
12
+ exports.popoverCss = popoverCss;
package/dist/progress.d.ts CHANGED
@@ -1,4 +1,5 @@
1
- declare const cssText: string;
1
+ declare const progressId: string;
2
2
  declare const addProgressCss: () => void;
3
+ declare const removeProgressCss: () => void;
3
4
  declare const progressCss: string;
4
- export { addProgressCss, progressCss };
5
+ export { progressId, addProgressCss, removeProgressCss, progressCss };
package/dist/progress.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 = "@keyframes indeterminate-loop-ltr{0%{transform:translate(-100%)}to{transform:translate(300%)}}@keyframes indeterminate-loop-rtl{0%{transform:translate(100%)}to{transform:translate(-300%)}}.pc_progress{display:flex;flex-direction:column;gap:var(--pt-dimension-200, 4px)}.pc_progress.pc_progress--circle{width:fit-content;display:inline-flex;align-items:center;justify-content:center}.pc_progress.pc_progress--line{width:100%;display:flex}.pc_progress.pc_progress--progress{--ptu-text-opacity:1;color:rgba(var(--pt-primary-fill),var(--ptu-text-opacity))}.pc_progress.pc_progress--error{--ptu-text-opacity:1;color:rgba(var(--pt-danger-fill),var(--ptu-text-opacity))}.pc_progress.pc_progress--warning{--ptu-text-opacity:1;color:rgba(var(--pt-warning-fill),var(--ptu-text-opacity))}.pc_progress.pc_progress--success{--ptu-text-opacity:1;color:rgba(var(--pt-success-fill),var(--ptu-text-opacity))}.pc_progress .pc_progress__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--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_progress .pc_progress__helper_text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--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-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_progress .pc_progress__legend{display:flex;gap:var(--pt-dimension-300, 6px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;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_progress .pc_progress__legend .pc_progress__legend__item{display:flex;align-items:center;gap:var(--pt-dimension-100, 2px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pc_progress .pc_progress__legend .pc_progress__legend__item .pc_progress__legend__item__indicator{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);border-radius:var(--pt-roundness-full, 88px)}.pc_progress .pc_progress__legend .pc_progress__legend__item .pc_progress__legend__item__title{--ptu-text-opacity:1;color:rgba(var(--pt-fg),var(--ptu-text-opacity))}.pc_progress .pc_progress__legend .pc_progress__legend__item .pc_progress__legend__item__percent{--ptu-text-opacity:1;color:rgba(var(--pt-fg-subtle),var(--ptu-text-opacity))}.pc_progress .pc_progress__circle{position:relative;aspect-ratio:1/1}.pc_progress .pc_progress__circle.pc_progress__circle--2xsm{width:var(--pt-dimension-800, 16px);height:var(--pt-dimension-800, 16px);min-width:var(--pt-dimension-800, 16px);min-height:var(--pt-dimension-800, 16px);max-width:var(--pt-dimension-800, 16px);max-height:var(--pt-dimension-800, 16px);--ptc-progress-content-offset: var(--pt-dimension-050)}.pc_progress .pc_progress__circle.pc_progress__circle--xsm{width:var(--pt-dimension-1000, 20px);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);max-width:var(--pt-dimension-1000, 20px);--ptc-progress-content-offset: var(--pt-dimension-150)}.pc_progress .pc_progress__circle.pc_progress__circle--sm{width:var(--pt-dimension-1200, 24px);height:var(--pt-dimension-1200, 24px);min-height:var(--pt-dimension-1200, 24px);max-height:var(--pt-dimension-1200, 24px);min-width:var(--pt-dimension-1200, 24px);max-width:var(--pt-dimension-1200, 24px);--ptc-progress-content-offset: var(--pt-dimension-200)}.pc_progress .pc_progress__circle.pc_progress__circle--md{width:var(--pt-dimension-1600, 32px);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);max-width:var(--pt-dimension-1600, 32px);--ptc-progress-content-offset: var(--pt-dimension-300)}.pc_progress .pc_progress__circle.pc_progress__circle--lg{width:var(--pt-dimension-2000, 40px);height:var(--pt-dimension-2000, 40px);min-height:var(--pt-dimension-2000, 40px);max-height:var(--pt-dimension-2000, 40px);min-width:var(--pt-dimension-2000, 40px);max-width:var(--pt-dimension-2000, 40px);--ptc-progress-content-offset: var(--pt-dimension-400)}.pc_progress .pc_progress__circle .pc_progress__circle__path.pc_progress__circle__path--trail{--ptu-stroke-opacity:1;stroke:rgba(var(--pt-gray-fill-subtle),var(--ptu-stroke-opacity))}.pc_progress .pc_progress__circle .pc_progress__circle__path.pc_progress__circle__path--indeterminate{--ptu-text-opacity:1;color:rgba(var(--pt-primary-5),var(--ptu-text-opacity))}.pc_progress .pc_progress__circle .pc_progress__circle__content{position:absolute;box-sizing:border-box;aspect-ratio:1/1;overflow:hidden;--ptc-progress-circle-content-size: calc(100% - calc(var(--ptc-progress-content-offset) * 2));width:var(--ptc-progress-circle-content-size);min-width:var(--ptc-progress-circle-content-size);max-width:var(--ptc-progress-circle-content-size);top:var(--ptc-progress-content-offset);inset-inline-start:var(--ptc-progress-content-offset)}.pc_progress .pc_progress__line{box-sizing:border-box;width:100%;height:var(--pt-dimension-200, 4px);min-height:var(--pt-dimension-200, 4px);max-height:var(--pt-dimension-200, 4px);overflow:hidden;--ptu-bg-opacity:1;background-color:rgba(var(--pt-gray-fill-subtle),var(--ptu-bg-opacity))}.pc_progress .pc_progress__line:not(.pc_progress__line--not-rounded){border-radius:var(--pt-roundness-full, 88px)}.pc_progress .pc_progress__line:not(.pc_progress__line--indeterminate) .pc_progress__line__value{width:var(--pt-dimension-0, 0px);min-width:var(--pt-dimension-0, 0px)}.pc_progress .pc_progress__line.pc_progress__line--indeterminate .pc_progress__line__value{width:33.3333333333%;min-width:33.3333333333%;max-width:33.3333333333%;border-radius:var(--pt-roundness-full, 88px);--ptu-bg-opacity:1;background-color:rgba(var(--pt-primary-5),var(--ptu-bg-opacity))}.pc_progress .pc_progress__line .pc_progress__line__value{box-sizing:border-box;height:100%;display:flex;overflow:hidden}.pc_progress .pc_progress__line .pc_progress__line__value .pc_progress__line__value__step{height:100%}.pc_progress:not(.pc_progress--no-transition) .pc_progress__line:not(.pc_progress__line--indeterminate) .pc_progress__line__value{transition-timing-function:linear;transition:width;transition-duration:calc(var(--ptc-progress-animation-duration) * 1s)}.pc_progress:not(.pc_progress--no-transition) .pc_progress__circle .pc_progress__circle__path:not(.pc_progress__circle__path--trail):not(.pc_progress__circle__path--indeterminate){transition-timing-function:linear;transition:stroke-dashoffset calc(var(--ptc-progress-animation-duration) * 1s),stroke-dasharray calc(var(--ptc-progress-animation-duration) * 1s),stroke calc(var(--ptc-progress-animation-duration) * 1s),stroke-width .06s calc(var(--ptc-progress-animation-duration) * 1s),opacity calc(var(--ptc-progress-animation-duration) * 1s)}.pc_progress .pc_progress__line_content{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--pt-dimension-200, 4px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pc_progress .pc_progress__line_validation_box{width:100%;display:flex;align-items:center;justify-content:flex-start;gap:var(--pt-dimension-200, 4px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pc_progress .pc_progress__line_validation_box .pc_progress__divider{min-height:var(--pt-dimension-400, 8px);height:var(--pt-dimension-400, 8px);max-height:var(--pt-dimension-400, 8px)}.pc_progress[dir=rtl] .pc_progress__line.pc_progress__line--indeterminate .pc_progress__line__value{animation:indeterminate-loop-rtl infinite calc(var(--ptc-progress-animation-duration) * 2s) linear}.pc_progress[dir=ltr] .pc_progress__line.pc_progress__line--indeterminate .pc_progress__line__value{animation:indeterminate-loop-ltr infinite calc(var(--ptc-progress-animation-duration) * 2s) linear}\n";
3
- export const addProgressCss = () => addCssToHead(`${prefix}s-progress`, cssText);
4
- export const progressCss = cssText;
3
+ const progressId = `${prefix}s-progress`;
4
+ const addProgressCss = () => addCssToHead(progressId, cssText);
5
+ const removeProgressCss = () => removeCssFromHead(progressId);
6
+ const progressCss = cssText;
7
+ export { progressId, addProgressCss, removeProgressCss, progressCss };
package/dist/progress.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 = "@keyframes indeterminate-loop-ltr{0%{transform:translate(-100%)}to{transform:translate(300%)}}@keyframes indeterminate-loop-rtl{0%{transform:translate(100%)}to{transform:translate(-300%)}}.pc_progress{display:flex;flex-direction:column;gap:var(--pt-dimension-200, 4px)}.pc_progress.pc_progress--circle{width:fit-content;display:inline-flex;align-items:center;justify-content:center}.pc_progress.pc_progress--line{width:100%;display:flex}.pc_progress.pc_progress--progress{--ptu-text-opacity:1;color:rgba(var(--pt-primary-fill),var(--ptu-text-opacity))}.pc_progress.pc_progress--error{--ptu-text-opacity:1;color:rgba(var(--pt-danger-fill),var(--ptu-text-opacity))}.pc_progress.pc_progress--warning{--ptu-text-opacity:1;color:rgba(var(--pt-warning-fill),var(--ptu-text-opacity))}.pc_progress.pc_progress--success{--ptu-text-opacity:1;color:rgba(var(--pt-success-fill),var(--ptu-text-opacity))}.pc_progress .pc_progress__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--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_progress .pc_progress__helper_text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--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-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_progress .pc_progress__legend{display:flex;gap:var(--pt-dimension-300, 6px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;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_progress .pc_progress__legend .pc_progress__legend__item{display:flex;align-items:center;gap:var(--pt-dimension-100, 2px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pc_progress .pc_progress__legend .pc_progress__legend__item .pc_progress__legend__item__indicator{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);border-radius:var(--pt-roundness-full, 88px)}.pc_progress .pc_progress__legend .pc_progress__legend__item .pc_progress__legend__item__title{--ptu-text-opacity:1;color:rgba(var(--pt-fg),var(--ptu-text-opacity))}.pc_progress .pc_progress__legend .pc_progress__legend__item .pc_progress__legend__item__percent{--ptu-text-opacity:1;color:rgba(var(--pt-fg-subtle),var(--ptu-text-opacity))}.pc_progress .pc_progress__circle{position:relative;aspect-ratio:1/1}.pc_progress .pc_progress__circle.pc_progress__circle--2xsm{width:var(--pt-dimension-800, 16px);height:var(--pt-dimension-800, 16px);min-width:var(--pt-dimension-800, 16px);min-height:var(--pt-dimension-800, 16px);max-width:var(--pt-dimension-800, 16px);max-height:var(--pt-dimension-800, 16px);--ptc-progress-content-offset: var(--pt-dimension-050)}.pc_progress .pc_progress__circle.pc_progress__circle--xsm{width:var(--pt-dimension-1000, 20px);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);max-width:var(--pt-dimension-1000, 20px);--ptc-progress-content-offset: var(--pt-dimension-150)}.pc_progress .pc_progress__circle.pc_progress__circle--sm{width:var(--pt-dimension-1200, 24px);height:var(--pt-dimension-1200, 24px);min-height:var(--pt-dimension-1200, 24px);max-height:var(--pt-dimension-1200, 24px);min-width:var(--pt-dimension-1200, 24px);max-width:var(--pt-dimension-1200, 24px);--ptc-progress-content-offset: var(--pt-dimension-200)}.pc_progress .pc_progress__circle.pc_progress__circle--md{width:var(--pt-dimension-1600, 32px);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);max-width:var(--pt-dimension-1600, 32px);--ptc-progress-content-offset: var(--pt-dimension-300)}.pc_progress .pc_progress__circle.pc_progress__circle--lg{width:var(--pt-dimension-2000, 40px);height:var(--pt-dimension-2000, 40px);min-height:var(--pt-dimension-2000, 40px);max-height:var(--pt-dimension-2000, 40px);min-width:var(--pt-dimension-2000, 40px);max-width:var(--pt-dimension-2000, 40px);--ptc-progress-content-offset: var(--pt-dimension-400)}.pc_progress .pc_progress__circle .pc_progress__circle__path.pc_progress__circle__path--trail{--ptu-stroke-opacity:1;stroke:rgba(var(--pt-gray-fill-subtle),var(--ptu-stroke-opacity))}.pc_progress .pc_progress__circle .pc_progress__circle__path.pc_progress__circle__path--indeterminate{--ptu-text-opacity:1;color:rgba(var(--pt-primary-5),var(--ptu-text-opacity))}.pc_progress .pc_progress__circle .pc_progress__circle__content{position:absolute;box-sizing:border-box;aspect-ratio:1/1;overflow:hidden;--ptc-progress-circle-content-size: calc(100% - calc(var(--ptc-progress-content-offset) * 2));width:var(--ptc-progress-circle-content-size);min-width:var(--ptc-progress-circle-content-size);max-width:var(--ptc-progress-circle-content-size);top:var(--ptc-progress-content-offset);inset-inline-start:var(--ptc-progress-content-offset)}.pc_progress .pc_progress__line{box-sizing:border-box;width:100%;height:var(--pt-dimension-200, 4px);min-height:var(--pt-dimension-200, 4px);max-height:var(--pt-dimension-200, 4px);overflow:hidden;--ptu-bg-opacity:1;background-color:rgba(var(--pt-gray-fill-subtle),var(--ptu-bg-opacity))}.pc_progress .pc_progress__line:not(.pc_progress__line--not-rounded){border-radius:var(--pt-roundness-full, 88px)}.pc_progress .pc_progress__line:not(.pc_progress__line--indeterminate) .pc_progress__line__value{width:var(--pt-dimension-0, 0px);min-width:var(--pt-dimension-0, 0px)}.pc_progress .pc_progress__line.pc_progress__line--indeterminate .pc_progress__line__value{width:33.3333333333%;min-width:33.3333333333%;max-width:33.3333333333%;border-radius:var(--pt-roundness-full, 88px);--ptu-bg-opacity:1;background-color:rgba(var(--pt-primary-5),var(--ptu-bg-opacity))}.pc_progress .pc_progress__line .pc_progress__line__value{box-sizing:border-box;height:100%;display:flex;overflow:hidden}.pc_progress .pc_progress__line .pc_progress__line__value .pc_progress__line__value__step{height:100%}.pc_progress:not(.pc_progress--no-transition) .pc_progress__line:not(.pc_progress__line--indeterminate) .pc_progress__line__value{transition-timing-function:linear;transition:width;transition-duration:calc(var(--ptc-progress-animation-duration) * 1s)}.pc_progress:not(.pc_progress--no-transition) .pc_progress__circle .pc_progress__circle__path:not(.pc_progress__circle__path--trail):not(.pc_progress__circle__path--indeterminate){transition-timing-function:linear;transition:stroke-dashoffset calc(var(--ptc-progress-animation-duration) * 1s),stroke-dasharray calc(var(--ptc-progress-animation-duration) * 1s),stroke calc(var(--ptc-progress-animation-duration) * 1s),stroke-width .06s calc(var(--ptc-progress-animation-duration) * 1s),opacity calc(var(--ptc-progress-animation-duration) * 1s)}.pc_progress .pc_progress__line_content{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--pt-dimension-200, 4px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pc_progress .pc_progress__line_validation_box{width:100%;display:flex;align-items:center;justify-content:flex-start;gap:var(--pt-dimension-200, 4px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pc_progress .pc_progress__line_validation_box .pc_progress__divider{min-height:var(--pt-dimension-400, 8px);height:var(--pt-dimension-400, 8px);max-height:var(--pt-dimension-400, 8px)}.pc_progress[dir=rtl] .pc_progress__line.pc_progress__line--indeterminate .pc_progress__line__value{animation:indeterminate-loop-rtl infinite calc(var(--ptc-progress-animation-duration) * 2s) linear}.pc_progress[dir=ltr] .pc_progress__line.pc_progress__line--indeterminate .pc_progress__line__value{animation:indeterminate-loop-ltr infinite calc(var(--ptc-progress-animation-duration) * 2s) linear}\n";
5
- const addProgressCss = () => addCssToHead(`${prefix}s-progress`, cssText);
5
+ const progressId = `${prefix}s-progress`;
6
+ const addProgressCss = () => addCssToHead(progressId, cssText);
7
+ const removeProgressCss = () => removeCssFromHead(progressId);
8
+ const progressCss = cssText;
9
+ exports.progressId = progressId;
6
10
  exports.addProgressCss = addProgressCss;
7
- exports.progressCss = cssText;
11
+ exports.removeProgressCss = removeProgressCss;
12
+ exports.progressCss = progressCss;
package/dist/radio_group.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ declare const radioGroupId: string;
2
+ declare const addRadioGroupCss: () => void;
3
+ declare const removeRadioGroupCss: () => void;
4
+ declare const radioGroupCss: string;
5
+ export { radioGroupId, addRadioGroupCss, removeRadioGroupCss, radioGroupCss };
package/dist/{radio.js → radio_group.js} RENAMED
@@ -1,4 +1,7 @@
1
- import { addCssToHead, prefix } from "@pantograph/tokens";
1
+ import { addCssToHead, removeCssFromHead, prefix } from "@pantograph/tokens";
2
2
  const cssText = ".pc_radio_group{display:flex;gap:var(--pt-dimension-400, 8px)}.pc_radio_group.pc_radio_group--vertical{display:flex;flex-direction:column}.pc_radio_group.pc_radio_group--horizontal{flex-direction:row}.pc_radio_group.pc_radio_group--2xsm{--ptc-radio-size: var(--pt-dimension-800);--ptc-radio-indicator-size: var(--pt-dimension-400)}.pc_radio_group.pc_radio_group--2xsm .pc_radio_group__item+.pc_radio_group__item__label{margin-inline-start:var(--pt-dimension-200, 4px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_radio_group.pc_radio_group--xsm{--ptc-radio-size: var(--pt-dimension-1000);--ptc-radio-indicator-size: var(--pt-dimension-500)}.pc_radio_group.pc_radio_group--xsm .pc_radio_group__item+.pc_radio_group__item__label{margin-inline-start:var(--pt-dimension-300, 6px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-700, 14px);line-height:var(--pt-lineheight-6, 16px);letter-spacing:0}.pc_radio_group .pc_radio_group__item__root{width:fit-content;height:fit-content;display:flex;align-items:center;caret-color:transparent}.pc_radio_group .pc_radio_group__item__root .pc_radio_group__item{box-sizing:border-box;display:flex;align-items:center;justify-content:center;border-radius:var(--pt-roundness-full, 88px);caret-color:transparent;outline:0;width:var(--ptc-radio-size);min-width:var(--ptc-radio-size);max-width:var(--ptc-radio-size);height:var(--ptc-radio-size);min-height:var(--ptc-radio-size);max-height:var(--ptc-radio-size)}.pc_radio_group .pc_radio_group__item__root .pc_radio_group__item .pc_radio_group__item__indicator{box-sizing:border-box;display:block;border-radius:var(--pt-roundness-full, 88px);caret-color:transparent;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;width:var(--ptc-radio-indicator-size);min-width:var(--ptc-radio-indicator-size);max-width:var(--ptc-radio-indicator-size);height:var(--ptc-radio-indicator-size);min-height:var(--ptc-radio-indicator-size);max-height:var(--ptc-radio-indicator-size)}.pc_radio_group .pc_radio_group__item__root .pc_radio_group__item:not(:disabled){cursor:pointer}.pc_radio_group .pc_radio_group__item__root .pc_radio_group__item:not(:disabled) .pc_radio_group__item__indicator{--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg),var(--ptu-bg-opacity))}.pc_radio_group .pc_radio_group__item__root .pc_radio_group__item:not(:disabled)[data-state=checked]{border-width:var(--pt-stroke-0, 0px);--ptu-bg-opacity:1;background-color:rgba(var(--pt-primary-5),var(--ptu-bg-opacity))}.pc_radio_group .pc_radio_group__item__root .pc_radio_group__item:not(:disabled)[data-state=checked]:hover{--ptu-bg-opacity:1;background-color:rgba(var(--pt-primary-6),var(--ptu-bg-opacity))}.pc_radio_group .pc_radio_group__item__root .pc_radio_group__item:not(:disabled)[data-state=checked]:active{--ptu-bg-opacity:1;background-color:rgba(var(--pt-primary-7),var(--ptu-bg-opacity))}.pc_radio_group .pc_radio_group__item__root .pc_radio_group__item:not(:disabled)[data-state=unchecked]{border-width:1px;border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-br),var(--ptu-border-opacity));--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg),var(--ptu-bg-opacity))}.pc_radio_group .pc_radio_group__item__root .pc_radio_group__item:not(:disabled)[data-state=unchecked]:hover{--ptu-border-opacity:1;border-color:rgba(var(--pt-gray-3),var(--ptu-border-opacity))}.pc_radio_group .pc_radio_group__item__root .pc_radio_group__item:not(:disabled)[data-state=unchecked]:active{--ptu-border-opacity:1;border-color:rgba(var(--pt-gray-4),var(--ptu-border-opacity));--ptu-bg-opacity:1;background-color:rgba(var(--pt-gray-2),var(--ptu-bg-opacity))}.pc_radio_group .pc_radio_group__item__root .pc_radio_group__item:not(:disabled)[data-state=unchecked]:focus{--ptu-border-opacity:1;border-color:rgba(var(--pt-primary-6),var(--ptu-border-opacity))}.pc_radio_group .pc_radio_group__item__root .pc_radio_group__item:not(:disabled)+.pc_radio_group__item__label{--ptc-radio-label-color: rgba(var(--pt-gray-8))}.pc_radio_group .pc_radio_group__item__root .pc_radio_group__item:not(:disabled):hover+.pc_radio_group__item__label{--ptc-radio-label-color: rgba(var(--pt-gray-9))}.pc_radio_group .pc_radio_group__item__root .pc_radio_group__item:not(:disabled):active+.pc_radio_group__item__label{--ptc-radio-label-color: rgba(var(--pt-gray-10))}.pc_radio_group .pc_radio_group__item__root .pc_radio_group__item: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_radio_group .pc_radio_group__item__root .pc_radio_group__item:disabled{cursor:not-allowed}.pc_radio_group .pc_radio_group__item__root .pc_radio_group__item:disabled+.pc_radio_group__item__label{cursor:not-allowed;--ptc-radio-label-color: rgba(var(--pt-gray-4))}.pc_radio_group .pc_radio_group__item__root .pc_radio_group__item:disabled[data-state=checked]{border-style:none;--ptu-bg-opacity:1;background-color:rgba(var(--pt-gray-2),var(--ptu-bg-opacity))}.pc_radio_group .pc_radio_group__item__root .pc_radio_group__item:disabled[data-state=checked] .pc_radio_group__item__indicator{--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg),var(--ptu-bg-opacity))}.pc_radio_group .pc_radio_group__item__root .pc_radio_group__item:disabled[data-state=unchecked]{border-width:1px;border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-gray-1),var(--ptu-border-opacity));--ptu-bg-opacity:1;background-color:rgba(var(--pt-gray-05),var(--ptu-bg-opacity))}.pc_radio_group .pc_radio_group__item__root .pc_radio_group__item+.pc_radio_group__item__label{cursor:pointer;color:var(--ptc-radio-label-color)}\n";
3
- export const addRadioCss = () => addCssToHead(`${prefix}s-radio`, cssText);
4
- export const radioCss = cssText;
3
+ const radioGroupId = `${prefix}s-radio_group`;
4
+ const addRadioGroupCss = () => addCssToHead(radioGroupId, cssText);
5
+ const removeRadioGroupCss = () => removeCssFromHead(radioGroupId);
6
+ const radioGroupCss = cssText;
7
+ export { radioGroupId, addRadioGroupCss, removeRadioGroupCss, radioGroupCss };
package/dist/{radio.umd.cjs → radio_group.umd.cjs} RENAMED
@@ -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_radio_group{display:flex;gap:var(--pt-dimension-400, 8px)}.pc_radio_group.pc_radio_group--vertical{display:flex;flex-direction:column}.pc_radio_group.pc_radio_group--horizontal{flex-direction:row}.pc_radio_group.pc_radio_group--2xsm{--ptc-radio-size: var(--pt-dimension-800);--ptc-radio-indicator-size: var(--pt-dimension-400)}.pc_radio_group.pc_radio_group--2xsm .pc_radio_group__item+.pc_radio_group__item__label{margin-inline-start:var(--pt-dimension-200, 4px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_radio_group.pc_radio_group--xsm{--ptc-radio-size: var(--pt-dimension-1000);--ptc-radio-indicator-size: var(--pt-dimension-500)}.pc_radio_group.pc_radio_group--xsm .pc_radio_group__item+.pc_radio_group__item__label{margin-inline-start:var(--pt-dimension-300, 6px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-700, 14px);line-height:var(--pt-lineheight-6, 16px);letter-spacing:0}.pc_radio_group .pc_radio_group__item__root{width:fit-content;height:fit-content;display:flex;align-items:center;caret-color:transparent}.pc_radio_group .pc_radio_group__item__root .pc_radio_group__item{box-sizing:border-box;display:flex;align-items:center;justify-content:center;border-radius:var(--pt-roundness-full, 88px);caret-color:transparent;outline:0;width:var(--ptc-radio-size);min-width:var(--ptc-radio-size);max-width:var(--ptc-radio-size);height:var(--ptc-radio-size);min-height:var(--ptc-radio-size);max-height:var(--ptc-radio-size)}.pc_radio_group .pc_radio_group__item__root .pc_radio_group__item .pc_radio_group__item__indicator{box-sizing:border-box;display:block;border-radius:var(--pt-roundness-full, 88px);caret-color:transparent;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;width:var(--ptc-radio-indicator-size);min-width:var(--ptc-radio-indicator-size);max-width:var(--ptc-radio-indicator-size);height:var(--ptc-radio-indicator-size);min-height:var(--ptc-radio-indicator-size);max-height:var(--ptc-radio-indicator-size)}.pc_radio_group .pc_radio_group__item__root .pc_radio_group__item:not(:disabled){cursor:pointer}.pc_radio_group .pc_radio_group__item__root .pc_radio_group__item:not(:disabled) .pc_radio_group__item__indicator{--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg),var(--ptu-bg-opacity))}.pc_radio_group .pc_radio_group__item__root .pc_radio_group__item:not(:disabled)[data-state=checked]{border-width:var(--pt-stroke-0, 0px);--ptu-bg-opacity:1;background-color:rgba(var(--pt-primary-5),var(--ptu-bg-opacity))}.pc_radio_group .pc_radio_group__item__root .pc_radio_group__item:not(:disabled)[data-state=checked]:hover{--ptu-bg-opacity:1;background-color:rgba(var(--pt-primary-6),var(--ptu-bg-opacity))}.pc_radio_group .pc_radio_group__item__root .pc_radio_group__item:not(:disabled)[data-state=checked]:active{--ptu-bg-opacity:1;background-color:rgba(var(--pt-primary-7),var(--ptu-bg-opacity))}.pc_radio_group .pc_radio_group__item__root .pc_radio_group__item:not(:disabled)[data-state=unchecked]{border-width:1px;border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-br),var(--ptu-border-opacity));--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg),var(--ptu-bg-opacity))}.pc_radio_group .pc_radio_group__item__root .pc_radio_group__item:not(:disabled)[data-state=unchecked]:hover{--ptu-border-opacity:1;border-color:rgba(var(--pt-gray-3),var(--ptu-border-opacity))}.pc_radio_group .pc_radio_group__item__root .pc_radio_group__item:not(:disabled)[data-state=unchecked]:active{--ptu-border-opacity:1;border-color:rgba(var(--pt-gray-4),var(--ptu-border-opacity));--ptu-bg-opacity:1;background-color:rgba(var(--pt-gray-2),var(--ptu-bg-opacity))}.pc_radio_group .pc_radio_group__item__root .pc_radio_group__item:not(:disabled)[data-state=unchecked]:focus{--ptu-border-opacity:1;border-color:rgba(var(--pt-primary-6),var(--ptu-border-opacity))}.pc_radio_group .pc_radio_group__item__root .pc_radio_group__item:not(:disabled)+.pc_radio_group__item__label{--ptc-radio-label-color: rgba(var(--pt-gray-8))}.pc_radio_group .pc_radio_group__item__root .pc_radio_group__item:not(:disabled):hover+.pc_radio_group__item__label{--ptc-radio-label-color: rgba(var(--pt-gray-9))}.pc_radio_group .pc_radio_group__item__root .pc_radio_group__item:not(:disabled):active+.pc_radio_group__item__label{--ptc-radio-label-color: rgba(var(--pt-gray-10))}.pc_radio_group .pc_radio_group__item__root .pc_radio_group__item: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_radio_group .pc_radio_group__item__root .pc_radio_group__item:disabled{cursor:not-allowed}.pc_radio_group .pc_radio_group__item__root .pc_radio_group__item:disabled+.pc_radio_group__item__label{cursor:not-allowed;--ptc-radio-label-color: rgba(var(--pt-gray-4))}.pc_radio_group .pc_radio_group__item__root .pc_radio_group__item:disabled[data-state=checked]{border-style:none;--ptu-bg-opacity:1;background-color:rgba(var(--pt-gray-2),var(--ptu-bg-opacity))}.pc_radio_group .pc_radio_group__item__root .pc_radio_group__item:disabled[data-state=checked] .pc_radio_group__item__indicator{--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg),var(--ptu-bg-opacity))}.pc_radio_group .pc_radio_group__item__root .pc_radio_group__item:disabled[data-state=unchecked]{border-width:1px;border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-gray-1),var(--ptu-border-opacity));--ptu-bg-opacity:1;background-color:rgba(var(--pt-gray-05),var(--ptu-bg-opacity))}.pc_radio_group .pc_radio_group__item__root .pc_radio_group__item+.pc_radio_group__item__label{cursor:pointer;color:var(--ptc-radio-label-color)}\n";
5
- const addRadioCss = () => addCssToHead(`${prefix}s-radio`, cssText);
6
- exports.addRadioCss = addRadioCss;
7
- exports.radioCss = cssText;
5
+ const radioGroupId = `${prefix}s-radio_group`;
6
+ const addRadioGroupCss = () => addCssToHead(radioGroupId, cssText);
7
+ const removeRadioGroupCss = () => removeCssFromHead(radioGroupId);
8
+ const radioGroupCss = cssText;
9
+ exports.radioGroupId = radioGroupId;
10
+ exports.addRadioGroupCss = addRadioGroupCss;
11
+ exports.removeRadioGroupCss = removeRadioGroupCss;
12
+ exports.radioGroupCss = radioGroupCss;
package/dist/scroll_container.d.ts CHANGED
@@ -1,4 +1,5 @@
1
- declare const cssText: string;
1
+ declare const scrollContainerId: string;
2
2
  declare const addScrollContainerCss: () => void;
3
+ declare const removeScrollContainerCss: () => void;
3
4
  declare const scrollContainerCss: string;
4
- export { addScrollContainerCss, scrollContainerCss };
5
+ export { scrollContainerId, addScrollContainerCss, removeScrollContainerCss, scrollContainerCss };
package/dist/scroll_container.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_scroll_container{--ptc-scroll-container-color: rgba(var(--pt-gray-0));--ptc-scroll-container-padding: 0;--ptc-scroll-container-bar-size: var(--pt-dimension-150);--ptc-scroll-container-bar-padding: 0;height:100%;overflow:hidden}.pc_scroll_container.pc_scroll_container--has-mask{background:var(--ptc-scroll-container-color)}.pc_scroll_container.pc_scroll_container--sm{--ptc-scroll-container-size: var(--pt-size-sm)}.pc_scroll_container.pc_scroll_container--md{--ptc-scroll-container-size: var(--pt-size-md)}.pc_scroll_container.pc_scroll_container--lg{--ptc-scroll-container-size: var(--pt-size-lg)}.pc_scroll_container.pc_scroll_container--xlg{--ptc-scroll-container-size: var(--pt-size-xlg)}.pc_scroll_container .pc_scroll_container__mask{pointer-events:none;position:absolute;inset-inline-start:var(--pt-dimension-0, 0px);top:var(--pt-dimension-0, 0px);z-index:2;height:100%;width:100%}.pc_scroll_container .pc_scroll_container__mask .pc_scroll_container__mask__top,.pc_scroll_container .pc_scroll_container__mask .pc_scroll_container__mask__bottom,.pc_scroll_container .pc_scroll_container__mask .pc_scroll_container__mask__left,.pc_scroll_container .pc_scroll_container__mask .pc_scroll_container__mask__right{position:absolute;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.pc_scroll_container .pc_scroll_container__mask .pc_scroll_container__mask__top,.pc_scroll_container .pc_scroll_container__mask .pc_scroll_container__mask__bottom{width:100%;height:var(--ptc-scroll-container-size);max-height:var(--ptc-scroll-container-size);min-height:var(--ptc-scroll-container-size)}.pc_scroll_container .pc_scroll_container__mask .pc_scroll_container__mask__left,.pc_scroll_container .pc_scroll_container__mask .pc_scroll_container__mask__right{height:100%;width:var(--ptc-scroll-container-size);max-width:var(--ptc-scroll-container-size);min-width:var(--ptc-scroll-container-size)}.pc_scroll_container .pc_scroll_container__mask .pc_scroll_container__mask__top{top:var(--ptc-scroll-container-mask-offset-t, 0)}.pc_scroll_container .pc_scroll_container__mask:not(.pc_scroll_container__mask--top-visible) .pc_scroll_container__mask__top{background:linear-gradient(180deg,var(--ptc-scroll-container-color) 0%,var(--ptc-scroll-container-color) 5%,transparent 100%)}.pc_scroll_container .pc_scroll_container__mask .pc_scroll_container__mask__bottom{bottom:var(--ptc-scroll-container-mask-offset-b, 0)}.pc_scroll_container .pc_scroll_container__mask:not(.pc_scroll_container__mask--bottom-visible) .pc_scroll_container__mask__bottom{background:linear-gradient(180deg,transparent 0%,var(--ptc-scroll-container-color) 95%,var(--ptc-scroll-container-color) 100%)}.pc_scroll_container .pc_scroll_container__mask .pc_scroll_container__mask__left{left:var(--ptc-scroll-container-mask-offset-l, 0)}.pc_scroll_container .pc_scroll_container__mask:not(.pc_scroll_container__mask--left-visible) .pc_scroll_container__mask__left{background:linear-gradient(90deg,var(--ptc-scroll-container-color) 0%,var(--ptc-scroll-container-color) 5%,transparent 100%)}.pc_scroll_container .pc_scroll_container__mask .pc_scroll_container__mask__right{right:var(--ptc-scroll-container-mask-offset-r, 0)}.pc_scroll_container .pc_scroll_container__mask:not(.pc_scroll_container__mask--right-visible) .pc_scroll_container__mask__right{background:linear-gradient(90deg,transparent 0%,var(--ptc-scroll-container-color) 95%,var(--ptc-scroll-container-color) 100%)}.pc_scroll_container .pc_scroll_container__area{width:100%;height:100%;border-width:var(--pt-stroke-0, 0px);outline:0;border-radius:inherit}.pc_scroll_container .pc_scroll_container__area .pc_scroll_container__area__wrap{position:relative;height:100%;width:100%;min-height:fit-content;min-width:fit-content}.pc_scroll_container .pc_scroll_container__area .pc_scroll_container__area__wrap .pc_scroll_container__top_observer{pointer-events:none;position:absolute;top:var(--pt-dimension-0, 0px);width:100%;height:var(--pt-dimension-400, 8px);opacity:0}.pc_scroll_container .pc_scroll_container__area .pc_scroll_container__area__wrap .pc_scroll_container__bottom_observer{pointer-events:none;position:absolute;bottom:var(--pt-dimension-0, 0px);width:100%;height:var(--pt-dimension-400, 8px);opacity:0}.pc_scroll_container .pc_scroll_container__area .pc_scroll_container__area__wrap .pc_scroll_container__right_observer{pointer-events:none;position:absolute;right:var(--pt-dimension-0, 0px);top:var(--pt-dimension-0, 0px);height:100%;width:var(--pt-dimension-400, 8px);opacity:0}.pc_scroll_container .pc_scroll_container__area .pc_scroll_container__area__wrap .pc_scroll_container__left_observer{pointer-events:none;position:absolute;left:var(--pt-dimension-0, 0px);top:var(--pt-dimension-0, 0px);height:100%;width:var(--pt-dimension-400, 8px);opacity:0}.pc_scroll_container .pc_scroll_container__scroll_bar{z-index:3;box-sizing:border-box;display:flex;touch-action:none;-webkit-user-select:none;user-select:none;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;padding:var(--ptc-scroll-container-bar-padding)}.pc_scroll_container .pc_scroll_container__scroll_bar[data-orientation=vertical]{width:var(--ptc-scroll-container-bar-size)}.pc_scroll_container .pc_scroll_container__scroll_bar[data-orientation=horizontal]{display:flex;flex-direction:column;height:var(--ptc-scroll-container-bar-size)}.pc_scroll_container .pc_scroll_container__scroll_bar .pc_scroll_container__scroll_bar__thumb{position:relative;flex:1 1 0%;cursor:pointer;border-radius:var(--pt-roundness-lg, 8px);--ptu-bg-opacity:1;background-color:rgba(var(--pt-gray-3),var(--ptu-bg-opacity))}.pc_scroll_container .pc_scroll_container__scroll_bar .pc_scroll_container__scroll_bar__thumb:hover{--ptu-bg-opacity:1;background-color:rgba(var(--pt-gray-4),var(--ptu-bg-opacity))}.pc_scroll_container .pc_scroll_container__scroll_bar .pc_scroll_container__scroll_bar__thumb:before{content:\"\";position:absolute;top:50%;left:50%;width:100%;height:100%;min-width:var(--pt-dimension-1000, 20px);min-height:var(--pt-dimension-1000, 20px);transform:translate(-50%,-50%)}.pc_scroll_container:not(.pc_scroll_container--overlay){--ptc-scroll-container-padding: calc(var(--pt-dimension-200) + var(--ptc-scroll-container-bar-size))}.pc_scroll_container.pc_scroll_container--overflowed-x,.pc_scroll_container.pc_scroll_container--overflowed-x .pc_scroll_container__mask{padding-bottom:var(--ptc-scroll-container-padding)}.pc_scroll_container.pc_scroll_container--overflowed-y,.pc_scroll_container.pc_scroll_container--overflowed-y .pc_scroll_container__mask{padding-inline-end:var(--ptc-scroll-container-padding)}\n";
3
- export const addScrollContainerCss = () => addCssToHead(`${prefix}s-scroll_container`, cssText);
4
- export const scrollContainerCss = cssText;
3
+ const scrollContainerId = `${prefix}s-scroll_container`;
4
+ const addScrollContainerCss = () => addCssToHead(scrollContainerId, cssText);
5
+ const removeScrollContainerCss = () => removeCssFromHead(scrollContainerId);
6
+ const scrollContainerCss = cssText;
7
+ export { scrollContainerId, addScrollContainerCss, removeScrollContainerCss, scrollContainerCss };
package/dist/scroll_container.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_scroll_container{--ptc-scroll-container-color: rgba(var(--pt-gray-0));--ptc-scroll-container-padding: 0;--ptc-scroll-container-bar-size: var(--pt-dimension-150);--ptc-scroll-container-bar-padding: 0;height:100%;overflow:hidden}.pc_scroll_container.pc_scroll_container--has-mask{background:var(--ptc-scroll-container-color)}.pc_scroll_container.pc_scroll_container--sm{--ptc-scroll-container-size: var(--pt-size-sm)}.pc_scroll_container.pc_scroll_container--md{--ptc-scroll-container-size: var(--pt-size-md)}.pc_scroll_container.pc_scroll_container--lg{--ptc-scroll-container-size: var(--pt-size-lg)}.pc_scroll_container.pc_scroll_container--xlg{--ptc-scroll-container-size: var(--pt-size-xlg)}.pc_scroll_container .pc_scroll_container__mask{pointer-events:none;position:absolute;inset-inline-start:var(--pt-dimension-0, 0px);top:var(--pt-dimension-0, 0px);z-index:2;height:100%;width:100%}.pc_scroll_container .pc_scroll_container__mask .pc_scroll_container__mask__top,.pc_scroll_container .pc_scroll_container__mask .pc_scroll_container__mask__bottom,.pc_scroll_container .pc_scroll_container__mask .pc_scroll_container__mask__left,.pc_scroll_container .pc_scroll_container__mask .pc_scroll_container__mask__right{position:absolute;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.pc_scroll_container .pc_scroll_container__mask .pc_scroll_container__mask__top,.pc_scroll_container .pc_scroll_container__mask .pc_scroll_container__mask__bottom{width:100%;height:var(--ptc-scroll-container-size);max-height:var(--ptc-scroll-container-size);min-height:var(--ptc-scroll-container-size)}.pc_scroll_container .pc_scroll_container__mask .pc_scroll_container__mask__left,.pc_scroll_container .pc_scroll_container__mask .pc_scroll_container__mask__right{height:100%;width:var(--ptc-scroll-container-size);max-width:var(--ptc-scroll-container-size);min-width:var(--ptc-scroll-container-size)}.pc_scroll_container .pc_scroll_container__mask .pc_scroll_container__mask__top{top:var(--ptc-scroll-container-mask-offset-t, 0)}.pc_scroll_container .pc_scroll_container__mask:not(.pc_scroll_container__mask--top-visible) .pc_scroll_container__mask__top{background:linear-gradient(180deg,var(--ptc-scroll-container-color) 0%,var(--ptc-scroll-container-color) 5%,transparent 100%)}.pc_scroll_container .pc_scroll_container__mask .pc_scroll_container__mask__bottom{bottom:var(--ptc-scroll-container-mask-offset-b, 0)}.pc_scroll_container .pc_scroll_container__mask:not(.pc_scroll_container__mask--bottom-visible) .pc_scroll_container__mask__bottom{background:linear-gradient(180deg,transparent 0%,var(--ptc-scroll-container-color) 95%,var(--ptc-scroll-container-color) 100%)}.pc_scroll_container .pc_scroll_container__mask .pc_scroll_container__mask__left{left:var(--ptc-scroll-container-mask-offset-l, 0)}.pc_scroll_container .pc_scroll_container__mask:not(.pc_scroll_container__mask--left-visible) .pc_scroll_container__mask__left{background:linear-gradient(90deg,var(--ptc-scroll-container-color) 0%,var(--ptc-scroll-container-color) 5%,transparent 100%)}.pc_scroll_container .pc_scroll_container__mask .pc_scroll_container__mask__right{right:var(--ptc-scroll-container-mask-offset-r, 0)}.pc_scroll_container .pc_scroll_container__mask:not(.pc_scroll_container__mask--right-visible) .pc_scroll_container__mask__right{background:linear-gradient(90deg,transparent 0%,var(--ptc-scroll-container-color) 95%,var(--ptc-scroll-container-color) 100%)}.pc_scroll_container .pc_scroll_container__area{width:100%;height:100%;border-width:var(--pt-stroke-0, 0px);outline:0;border-radius:inherit}.pc_scroll_container .pc_scroll_container__area .pc_scroll_container__area__wrap{position:relative;height:100%;width:100%;min-height:fit-content;min-width:fit-content}.pc_scroll_container .pc_scroll_container__area .pc_scroll_container__area__wrap .pc_scroll_container__top_observer{pointer-events:none;position:absolute;top:var(--pt-dimension-0, 0px);width:100%;height:var(--pt-dimension-400, 8px);opacity:0}.pc_scroll_container .pc_scroll_container__area .pc_scroll_container__area__wrap .pc_scroll_container__bottom_observer{pointer-events:none;position:absolute;bottom:var(--pt-dimension-0, 0px);width:100%;height:var(--pt-dimension-400, 8px);opacity:0}.pc_scroll_container .pc_scroll_container__area .pc_scroll_container__area__wrap .pc_scroll_container__right_observer{pointer-events:none;position:absolute;right:var(--pt-dimension-0, 0px);top:var(--pt-dimension-0, 0px);height:100%;width:var(--pt-dimension-400, 8px);opacity:0}.pc_scroll_container .pc_scroll_container__area .pc_scroll_container__area__wrap .pc_scroll_container__left_observer{pointer-events:none;position:absolute;left:var(--pt-dimension-0, 0px);top:var(--pt-dimension-0, 0px);height:100%;width:var(--pt-dimension-400, 8px);opacity:0}.pc_scroll_container .pc_scroll_container__scroll_bar{z-index:3;box-sizing:border-box;display:flex;touch-action:none;-webkit-user-select:none;user-select:none;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;padding:var(--ptc-scroll-container-bar-padding)}.pc_scroll_container .pc_scroll_container__scroll_bar[data-orientation=vertical]{width:var(--ptc-scroll-container-bar-size)}.pc_scroll_container .pc_scroll_container__scroll_bar[data-orientation=horizontal]{display:flex;flex-direction:column;height:var(--ptc-scroll-container-bar-size)}.pc_scroll_container .pc_scroll_container__scroll_bar .pc_scroll_container__scroll_bar__thumb{position:relative;flex:1 1 0%;cursor:pointer;border-radius:var(--pt-roundness-lg, 8px);--ptu-bg-opacity:1;background-color:rgba(var(--pt-gray-3),var(--ptu-bg-opacity))}.pc_scroll_container .pc_scroll_container__scroll_bar .pc_scroll_container__scroll_bar__thumb:hover{--ptu-bg-opacity:1;background-color:rgba(var(--pt-gray-4),var(--ptu-bg-opacity))}.pc_scroll_container .pc_scroll_container__scroll_bar .pc_scroll_container__scroll_bar__thumb:before{content:\"\";position:absolute;top:50%;left:50%;width:100%;height:100%;min-width:var(--pt-dimension-1000, 20px);min-height:var(--pt-dimension-1000, 20px);transform:translate(-50%,-50%)}.pc_scroll_container:not(.pc_scroll_container--overlay){--ptc-scroll-container-padding: calc(var(--pt-dimension-200) + var(--ptc-scroll-container-bar-size))}.pc_scroll_container.pc_scroll_container--overflowed-x,.pc_scroll_container.pc_scroll_container--overflowed-x .pc_scroll_container__mask{padding-bottom:var(--ptc-scroll-container-padding)}.pc_scroll_container.pc_scroll_container--overflowed-y,.pc_scroll_container.pc_scroll_container--overflowed-y .pc_scroll_container__mask{padding-inline-end:var(--ptc-scroll-container-padding)}\n";
5
- const addScrollContainerCss = () => addCssToHead(`${prefix}s-scroll_container`, cssText);
5
+ const scrollContainerId = `${prefix}s-scroll_container`;
6
+ const addScrollContainerCss = () => addCssToHead(scrollContainerId, cssText);
7
+ const removeScrollContainerCss = () => removeCssFromHead(scrollContainerId);
8
+ const scrollContainerCss = cssText;
9
+ exports.scrollContainerId = scrollContainerId;
6
10
  exports.addScrollContainerCss = addScrollContainerCss;
7
- exports.scrollContainerCss = cssText;
11
+ exports.removeScrollContainerCss = removeScrollContainerCss;
12
+ exports.scrollContainerCss = scrollContainerCss;
package/dist/segmented.css CHANGED
@@ -1 +1 @@
1
- .pc_segmented{position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--ptu-bg-opacity:1;background-color:rgba(var(--pt-gray-fill-subtle),var(--ptu-bg-opacity));border-radius:var(--ptc-segmented-roundness);padding:var(--ptc-segmented-space);gap:var(--ptc-segmented-space)}.pc_segmented.pc_segmented--sm{--ptc-segmented-roundness: var(--pt-roundness-sm);--ptc-segmented-option-height: var(--pt-dimension-1000);--ptc-segmented-space: var(--pt-dimension-100);--ptc-segmented-py: var(--pt-dimension-100);--ptc-segmented-p-icon: var(--pt-dimension-100);--ptc-segmented-p-text: var(--pt-dimension-200);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_segmented.pc_segmented--md{--ptc-segmented-roundness: var(--pt-roundness-md);--ptc-segmented-option-height: var(--pt-dimension-1200);--ptc-segmented-space: var(--pt-dimension-200);--ptc-segmented-py: var(--pt-dimension-100);--ptc-segmented-p-icon: var(--pt-dimension-200);--ptc-segmented-p-text: var(--pt-dimension-300);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_segmented.pc_segmented--lg{--ptc-segmented-roundness: var(--pt-roundness-lg);--ptc-segmented-option-height: var(--pt-dimension-1600);--ptc-segmented-space: var(--pt-dimension-200);--ptc-segmented-py: var(--pt-dimension-0);--ptc-segmented-p-icon: var(--pt-dimension-300);--ptc-segmented-p-text: var(--pt-dimension-400);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_segmented .pc_segmented__option,.pc_segmented .pc_segmented__option__text{flex:1 1 0%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pc_segmented .pc_segmented__selection_indicator{position:absolute;--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg),var(--ptu-bg-opacity));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;border-radius:var(--ptc-segmented-roundness);top:var(--ptc-segmented-space)}.pc_segmented .pc_segmented__selection_indicator[data-active]{border-width:1px;border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-br),var(--ptu-border-opacity));--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg),var(--ptu-bg-opacity))}.pc_segmented .pc_segmented__option{z-index:1;box-sizing:border-box;display:flex;align-items:center;border-width:1px;border-color:transparent;border-style:solid;background-color:transparent;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;outline:0;height:var(--ptc-segmented-option-height);min-height:var(--ptc-segmented-option-height);max-height:var(--ptc-segmented-option-height);border-radius:var(--ptc-segmented-roundness);gap:var(--ptc-segmented-space);padding-bottom:var(--ptc-segmented-py);padding-top:var(--ptc-segmented-py)}.pc_segmented .pc_segmented__option.pc_segmented__option--icon{padding-inline-start:var(--ptc-segmented-p-icon)}.pc_segmented .pc_segmented__option.pc_segmented__option--icon:not(.pc_segmented__option--text){min-width:var(--ptc-segmented-option-height);padding-inline-end:var(--ptc-segmented-p-icon)}.pc_segmented .pc_segmented__option.pc_segmented__option--text{padding-inline-end:var(--ptc-segmented-p-text)}.pc_segmented .pc_segmented__option.pc_segmented__option--text:not(.pc_segmented__option--icon){padding-inline-start:var(--ptc-segmented-p-text)}.pc_segmented .pc_segmented__option:not(:disabled){cursor:pointer}.pc_segmented .pc_segmented__option:not(:disabled)[data-active]{border-width:1px;border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-br),var(--ptu-border-opacity));--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg),var(--ptu-bg-opacity));--ptu-text-opacity:1;color:rgba(var(--pt-fg),var(--ptu-text-opacity))}.pc_segmented .pc_segmented__option:not(:disabled):not([data-active]){--ptu-text-opacity:1;color:rgba(var(--pt-fg-subtle),var(--ptu-text-opacity))}.pc_segmented .pc_segmented__option:disabled{cursor:not-allowed;--ptu-text-opacity:1;color:rgba(var(--pt-disable-fg),var(--ptu-text-opacity))}.pc_segmented .pc_segmented__option:disabled[data-active]{--ptu-bg-opacity:1;background-color:rgba(var(--pt-disable-fill),var(--ptu-bg-opacity))}.pc_segmented.pc_segmented--block{display:grid;width:100%}.pc_segmented.pc_segmented--block .pc_segmented__option{align-items:center;justify-content:center}.pc_segmented:not(.pc_segmented--block){width:fit-content;max-width:100%;display:inline-flex}.pc_segmented:not(.pc_segmented--block) .pc_segmented__option.pc_segmented__option--icon:not(.pc_segmented__option--text){align-items:center;justify-content:center;width:var(--ptc-segmented-option-height);min-width:var(--ptc-segmented-option-height);max-width:var(--ptc-segmented-option-height)}
1
+ .pc_segmented{position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--ptu-bg-opacity:1;background-color:rgba(var(--pt-gray-fill-subtle),var(--ptu-bg-opacity));border-radius:var(--ptc-segmented-roundness);padding:var(--ptc-segmented-space);gap:var(--ptc-segmented-space)}.pc_segmented.pc_segmented--sm{--ptc-segmented-roundness: var(--pt-roundness-sm);--ptc-segmented-option-height: var(--pt-dimension-1000);--ptc-segmented-space: var(--pt-dimension-100);--ptc-segmented-py: var(--pt-dimension-100);--ptc-segmented-p-icon: var(--pt-dimension-100);--ptc-segmented-p-text: var(--pt-dimension-200);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_segmented.pc_segmented--md{--ptc-segmented-roundness: var(--pt-roundness-md);--ptc-segmented-option-height: var(--pt-dimension-1200);--ptc-segmented-space: var(--pt-dimension-200);--ptc-segmented-py: var(--pt-dimension-100);--ptc-segmented-p-icon: var(--pt-dimension-200);--ptc-segmented-p-text: var(--pt-dimension-300);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_segmented.pc_segmented--lg{--ptc-segmented-roundness: var(--pt-roundness-lg);--ptc-segmented-option-height: var(--pt-dimension-1600);--ptc-segmented-space: var(--pt-dimension-200);--ptc-segmented-py: var(--pt-dimension-0);--ptc-segmented-p-icon: var(--pt-dimension-300);--ptc-segmented-p-text: var(--pt-dimension-400);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_segmented .pc_segmented__option,.pc_segmented .pc_segmented__option__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pc_segmented .pc_segmented__option__text{flex:1 1 0%}.pc_segmented .pc_segmented__selection_indicator{position:absolute;--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg),var(--ptu-bg-opacity));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;border-radius:var(--ptc-segmented-roundness);top:var(--ptc-segmented-space)}.pc_segmented .pc_segmented__selection_indicator[data-active]{border-width:1px;border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-br),var(--ptu-border-opacity));--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg),var(--ptu-bg-opacity))}.pc_segmented .pc_segmented__option{z-index:1;box-sizing:border-box;display:flex;align-items:center;border-width:1px;border-color:transparent;border-style:solid;background-color:transparent;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;outline:0;height:var(--ptc-segmented-option-height);min-height:var(--ptc-segmented-option-height);max-height:var(--ptc-segmented-option-height);border-radius:var(--ptc-segmented-roundness);gap:var(--ptc-segmented-space);padding-bottom:var(--ptc-segmented-py);padding-top:var(--ptc-segmented-py)}.pc_segmented .pc_segmented__option.pc_segmented__option--icon{padding-inline-start:var(--ptc-segmented-p-icon)}.pc_segmented .pc_segmented__option.pc_segmented__option--icon:not(.pc_segmented__option--text){min-width:var(--ptc-segmented-option-height);padding-inline-end:var(--ptc-segmented-p-icon)}.pc_segmented .pc_segmented__option.pc_segmented__option--text{padding-inline-end:var(--ptc-segmented-p-text)}.pc_segmented .pc_segmented__option.pc_segmented__option--text:not(.pc_segmented__option--icon){padding-inline-start:var(--ptc-segmented-p-text)}.pc_segmented .pc_segmented__option:not(:disabled){cursor:pointer}.pc_segmented .pc_segmented__option:not(:disabled)[data-active]{border-width:1px;border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-br),var(--ptu-border-opacity));--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg),var(--ptu-bg-opacity));--ptu-text-opacity:1;color:rgba(var(--pt-fg),var(--ptu-text-opacity))}.pc_segmented .pc_segmented__option:not(:disabled):not([data-active]){--ptu-text-opacity:1;color:rgba(var(--pt-fg-subtle),var(--ptu-text-opacity))}.pc_segmented .pc_segmented__option:disabled{cursor:not-allowed;--ptu-text-opacity:1;color:rgba(var(--pt-disable-fg),var(--ptu-text-opacity))}.pc_segmented .pc_segmented__option:disabled[data-active]{--ptu-bg-opacity:1;background-color:rgba(var(--pt-disable-fill),var(--ptu-bg-opacity))}.pc_segmented.pc_segmented--block{display:grid;width:100%}.pc_segmented.pc_segmented--block .pc_segmented__option{align-items:center;justify-content:center}.pc_segmented:not(.pc_segmented--block){width:fit-content;max-width:100%;display:inline-flex}.pc_segmented:not(.pc_segmented--block) .pc_segmented__option.pc_segmented__option--icon:not(.pc_segmented__option--text){align-items:center;justify-content:center;width:var(--ptc-segmented-option-height);min-width:var(--ptc-segmented-option-height);max-width:var(--ptc-segmented-option-height)}
package/dist/segmented.d.ts CHANGED
@@ -1,4 +1,5 @@
1
- declare const cssText: string;
1
+ declare const segmentedId: string;
2
2
  declare const addSegmentedCss: () => void;
3
+ declare const removeSegmentedCss: () => void;
3
4
  declare const segmentedCss: string;
4
- export { addSegmentedCss, segmentedCss };
5
+ export { segmentedId, addSegmentedCss, removeSegmentedCss, segmentedCss };
package/dist/segmented.js CHANGED
@@ -1,4 +1,7 @@
1
- import { addCssToHead, prefix } from "@pantograph/tokens";
2
- const cssText = ".pc_segmented{position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--ptu-bg-opacity:1;background-color:rgba(var(--pt-gray-fill-subtle),var(--ptu-bg-opacity));border-radius:var(--ptc-segmented-roundness);padding:var(--ptc-segmented-space);gap:var(--ptc-segmented-space)}.pc_segmented.pc_segmented--sm{--ptc-segmented-roundness: var(--pt-roundness-sm);--ptc-segmented-option-height: var(--pt-dimension-1000);--ptc-segmented-space: var(--pt-dimension-100);--ptc-segmented-py: var(--pt-dimension-100);--ptc-segmented-p-icon: var(--pt-dimension-100);--ptc-segmented-p-text: var(--pt-dimension-200);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_segmented.pc_segmented--md{--ptc-segmented-roundness: var(--pt-roundness-md);--ptc-segmented-option-height: var(--pt-dimension-1200);--ptc-segmented-space: var(--pt-dimension-200);--ptc-segmented-py: var(--pt-dimension-100);--ptc-segmented-p-icon: var(--pt-dimension-200);--ptc-segmented-p-text: var(--pt-dimension-300);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_segmented.pc_segmented--lg{--ptc-segmented-roundness: var(--pt-roundness-lg);--ptc-segmented-option-height: var(--pt-dimension-1600);--ptc-segmented-space: var(--pt-dimension-200);--ptc-segmented-py: var(--pt-dimension-0);--ptc-segmented-p-icon: var(--pt-dimension-300);--ptc-segmented-p-text: var(--pt-dimension-400);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_segmented .pc_segmented__option,.pc_segmented .pc_segmented__option__text{flex:1 1 0%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pc_segmented .pc_segmented__selection_indicator{position:absolute;--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg),var(--ptu-bg-opacity));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;border-radius:var(--ptc-segmented-roundness);top:var(--ptc-segmented-space)}.pc_segmented .pc_segmented__selection_indicator[data-active]{border-width:1px;border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-br),var(--ptu-border-opacity));--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg),var(--ptu-bg-opacity))}.pc_segmented .pc_segmented__option{z-index:1;box-sizing:border-box;display:flex;align-items:center;border-width:1px;border-color:transparent;border-style:solid;background-color:transparent;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;outline:0;height:var(--ptc-segmented-option-height);min-height:var(--ptc-segmented-option-height);max-height:var(--ptc-segmented-option-height);border-radius:var(--ptc-segmented-roundness);gap:var(--ptc-segmented-space);padding-bottom:var(--ptc-segmented-py);padding-top:var(--ptc-segmented-py)}.pc_segmented .pc_segmented__option.pc_segmented__option--icon{padding-inline-start:var(--ptc-segmented-p-icon)}.pc_segmented .pc_segmented__option.pc_segmented__option--icon:not(.pc_segmented__option--text){min-width:var(--ptc-segmented-option-height);padding-inline-end:var(--ptc-segmented-p-icon)}.pc_segmented .pc_segmented__option.pc_segmented__option--text{padding-inline-end:var(--ptc-segmented-p-text)}.pc_segmented .pc_segmented__option.pc_segmented__option--text:not(.pc_segmented__option--icon){padding-inline-start:var(--ptc-segmented-p-text)}.pc_segmented .pc_segmented__option:not(:disabled){cursor:pointer}.pc_segmented .pc_segmented__option:not(:disabled)[data-active]{border-width:1px;border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-br),var(--ptu-border-opacity));--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg),var(--ptu-bg-opacity));--ptu-text-opacity:1;color:rgba(var(--pt-fg),var(--ptu-text-opacity))}.pc_segmented .pc_segmented__option:not(:disabled):not([data-active]){--ptu-text-opacity:1;color:rgba(var(--pt-fg-subtle),var(--ptu-text-opacity))}.pc_segmented .pc_segmented__option:disabled{cursor:not-allowed;--ptu-text-opacity:1;color:rgba(var(--pt-disable-fg),var(--ptu-text-opacity))}.pc_segmented .pc_segmented__option:disabled[data-active]{--ptu-bg-opacity:1;background-color:rgba(var(--pt-disable-fill),var(--ptu-bg-opacity))}.pc_segmented.pc_segmented--block{display:grid;width:100%}.pc_segmented.pc_segmented--block .pc_segmented__option{align-items:center;justify-content:center}.pc_segmented:not(.pc_segmented--block){width:fit-content;max-width:100%;display:inline-flex}.pc_segmented:not(.pc_segmented--block) .pc_segmented__option.pc_segmented__option--icon:not(.pc_segmented__option--text){align-items:center;justify-content:center;width:var(--ptc-segmented-option-height);min-width:var(--ptc-segmented-option-height);max-width:var(--ptc-segmented-option-height)}\n";
3
- export const addSegmentedCss = () => addCssToHead(`${prefix}s-segmented`, cssText);
4
- export const segmentedCss = cssText;
1
+ import { addCssToHead, removeCssFromHead, prefix } from "@pantograph/tokens";
2
+ const cssText = ".pc_segmented{position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--ptu-bg-opacity:1;background-color:rgba(var(--pt-gray-fill-subtle),var(--ptu-bg-opacity));border-radius:var(--ptc-segmented-roundness);padding:var(--ptc-segmented-space);gap:var(--ptc-segmented-space)}.pc_segmented.pc_segmented--sm{--ptc-segmented-roundness: var(--pt-roundness-sm);--ptc-segmented-option-height: var(--pt-dimension-1000);--ptc-segmented-space: var(--pt-dimension-100);--ptc-segmented-py: var(--pt-dimension-100);--ptc-segmented-p-icon: var(--pt-dimension-100);--ptc-segmented-p-text: var(--pt-dimension-200);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_segmented.pc_segmented--md{--ptc-segmented-roundness: var(--pt-roundness-md);--ptc-segmented-option-height: var(--pt-dimension-1200);--ptc-segmented-space: var(--pt-dimension-200);--ptc-segmented-py: var(--pt-dimension-100);--ptc-segmented-p-icon: var(--pt-dimension-200);--ptc-segmented-p-text: var(--pt-dimension-300);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_segmented.pc_segmented--lg{--ptc-segmented-roundness: var(--pt-roundness-lg);--ptc-segmented-option-height: var(--pt-dimension-1600);--ptc-segmented-space: var(--pt-dimension-200);--ptc-segmented-py: var(--pt-dimension-0);--ptc-segmented-p-icon: var(--pt-dimension-300);--ptc-segmented-p-text: var(--pt-dimension-400);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_segmented .pc_segmented__option,.pc_segmented .pc_segmented__option__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pc_segmented .pc_segmented__option__text{flex:1 1 0%}.pc_segmented .pc_segmented__selection_indicator{position:absolute;--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg),var(--ptu-bg-opacity));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;border-radius:var(--ptc-segmented-roundness);top:var(--ptc-segmented-space)}.pc_segmented .pc_segmented__selection_indicator[data-active]{border-width:1px;border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-br),var(--ptu-border-opacity));--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg),var(--ptu-bg-opacity))}.pc_segmented .pc_segmented__option{z-index:1;box-sizing:border-box;display:flex;align-items:center;border-width:1px;border-color:transparent;border-style:solid;background-color:transparent;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;outline:0;height:var(--ptc-segmented-option-height);min-height:var(--ptc-segmented-option-height);max-height:var(--ptc-segmented-option-height);border-radius:var(--ptc-segmented-roundness);gap:var(--ptc-segmented-space);padding-bottom:var(--ptc-segmented-py);padding-top:var(--ptc-segmented-py)}.pc_segmented .pc_segmented__option.pc_segmented__option--icon{padding-inline-start:var(--ptc-segmented-p-icon)}.pc_segmented .pc_segmented__option.pc_segmented__option--icon:not(.pc_segmented__option--text){min-width:var(--ptc-segmented-option-height);padding-inline-end:var(--ptc-segmented-p-icon)}.pc_segmented .pc_segmented__option.pc_segmented__option--text{padding-inline-end:var(--ptc-segmented-p-text)}.pc_segmented .pc_segmented__option.pc_segmented__option--text:not(.pc_segmented__option--icon){padding-inline-start:var(--ptc-segmented-p-text)}.pc_segmented .pc_segmented__option:not(:disabled){cursor:pointer}.pc_segmented .pc_segmented__option:not(:disabled)[data-active]{border-width:1px;border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-br),var(--ptu-border-opacity));--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg),var(--ptu-bg-opacity));--ptu-text-opacity:1;color:rgba(var(--pt-fg),var(--ptu-text-opacity))}.pc_segmented .pc_segmented__option:not(:disabled):not([data-active]){--ptu-text-opacity:1;color:rgba(var(--pt-fg-subtle),var(--ptu-text-opacity))}.pc_segmented .pc_segmented__option:disabled{cursor:not-allowed;--ptu-text-opacity:1;color:rgba(var(--pt-disable-fg),var(--ptu-text-opacity))}.pc_segmented .pc_segmented__option:disabled[data-active]{--ptu-bg-opacity:1;background-color:rgba(var(--pt-disable-fill),var(--ptu-bg-opacity))}.pc_segmented.pc_segmented--block{display:grid;width:100%}.pc_segmented.pc_segmented--block .pc_segmented__option{align-items:center;justify-content:center}.pc_segmented:not(.pc_segmented--block){width:fit-content;max-width:100%;display:inline-flex}.pc_segmented:not(.pc_segmented--block) .pc_segmented__option.pc_segmented__option--icon:not(.pc_segmented__option--text){align-items:center;justify-content:center;width:var(--ptc-segmented-option-height);min-width:var(--ptc-segmented-option-height);max-width:var(--ptc-segmented-option-height)}\n";
3
+ const segmentedId = `${prefix}s-segmented`;
4
+ const addSegmentedCss = () => addCssToHead(segmentedId, cssText);
5
+ const removeSegmentedCss = () => removeCssFromHead(segmentedId);
6
+ const segmentedCss = cssText;
7
+ export { segmentedId, addSegmentedCss, removeSegmentedCss, segmentedCss };
package/dist/segmented.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");
4
- const cssText = ".pc_segmented{position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--ptu-bg-opacity:1;background-color:rgba(var(--pt-gray-fill-subtle),var(--ptu-bg-opacity));border-radius:var(--ptc-segmented-roundness);padding:var(--ptc-segmented-space);gap:var(--ptc-segmented-space)}.pc_segmented.pc_segmented--sm{--ptc-segmented-roundness: var(--pt-roundness-sm);--ptc-segmented-option-height: var(--pt-dimension-1000);--ptc-segmented-space: var(--pt-dimension-100);--ptc-segmented-py: var(--pt-dimension-100);--ptc-segmented-p-icon: var(--pt-dimension-100);--ptc-segmented-p-text: var(--pt-dimension-200);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_segmented.pc_segmented--md{--ptc-segmented-roundness: var(--pt-roundness-md);--ptc-segmented-option-height: var(--pt-dimension-1200);--ptc-segmented-space: var(--pt-dimension-200);--ptc-segmented-py: var(--pt-dimension-100);--ptc-segmented-p-icon: var(--pt-dimension-200);--ptc-segmented-p-text: var(--pt-dimension-300);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_segmented.pc_segmented--lg{--ptc-segmented-roundness: var(--pt-roundness-lg);--ptc-segmented-option-height: var(--pt-dimension-1600);--ptc-segmented-space: var(--pt-dimension-200);--ptc-segmented-py: var(--pt-dimension-0);--ptc-segmented-p-icon: var(--pt-dimension-300);--ptc-segmented-p-text: var(--pt-dimension-400);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_segmented .pc_segmented__option,.pc_segmented .pc_segmented__option__text{flex:1 1 0%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pc_segmented .pc_segmented__selection_indicator{position:absolute;--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg),var(--ptu-bg-opacity));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;border-radius:var(--ptc-segmented-roundness);top:var(--ptc-segmented-space)}.pc_segmented .pc_segmented__selection_indicator[data-active]{border-width:1px;border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-br),var(--ptu-border-opacity));--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg),var(--ptu-bg-opacity))}.pc_segmented .pc_segmented__option{z-index:1;box-sizing:border-box;display:flex;align-items:center;border-width:1px;border-color:transparent;border-style:solid;background-color:transparent;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;outline:0;height:var(--ptc-segmented-option-height);min-height:var(--ptc-segmented-option-height);max-height:var(--ptc-segmented-option-height);border-radius:var(--ptc-segmented-roundness);gap:var(--ptc-segmented-space);padding-bottom:var(--ptc-segmented-py);padding-top:var(--ptc-segmented-py)}.pc_segmented .pc_segmented__option.pc_segmented__option--icon{padding-inline-start:var(--ptc-segmented-p-icon)}.pc_segmented .pc_segmented__option.pc_segmented__option--icon:not(.pc_segmented__option--text){min-width:var(--ptc-segmented-option-height);padding-inline-end:var(--ptc-segmented-p-icon)}.pc_segmented .pc_segmented__option.pc_segmented__option--text{padding-inline-end:var(--ptc-segmented-p-text)}.pc_segmented .pc_segmented__option.pc_segmented__option--text:not(.pc_segmented__option--icon){padding-inline-start:var(--ptc-segmented-p-text)}.pc_segmented .pc_segmented__option:not(:disabled){cursor:pointer}.pc_segmented .pc_segmented__option:not(:disabled)[data-active]{border-width:1px;border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-br),var(--ptu-border-opacity));--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg),var(--ptu-bg-opacity));--ptu-text-opacity:1;color:rgba(var(--pt-fg),var(--ptu-text-opacity))}.pc_segmented .pc_segmented__option:not(:disabled):not([data-active]){--ptu-text-opacity:1;color:rgba(var(--pt-fg-subtle),var(--ptu-text-opacity))}.pc_segmented .pc_segmented__option:disabled{cursor:not-allowed;--ptu-text-opacity:1;color:rgba(var(--pt-disable-fg),var(--ptu-text-opacity))}.pc_segmented .pc_segmented__option:disabled[data-active]{--ptu-bg-opacity:1;background-color:rgba(var(--pt-disable-fill),var(--ptu-bg-opacity))}.pc_segmented.pc_segmented--block{display:grid;width:100%}.pc_segmented.pc_segmented--block .pc_segmented__option{align-items:center;justify-content:center}.pc_segmented:not(.pc_segmented--block){width:fit-content;max-width:100%;display:inline-flex}.pc_segmented:not(.pc_segmented--block) .pc_segmented__option.pc_segmented__option--icon:not(.pc_segmented__option--text){align-items:center;justify-content:center;width:var(--ptc-segmented-option-height);min-width:var(--ptc-segmented-option-height);max-width:var(--ptc-segmented-option-height)}\n";
5
- const addSegmentedCss = () => addCssToHead(`${prefix}s-segmented`, cssText);
3
+ const { addCssToHead, removeCssFromHead, prefix } = require("@pantograph/tokens");
4
+ const cssText = ".pc_segmented{position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--ptu-bg-opacity:1;background-color:rgba(var(--pt-gray-fill-subtle),var(--ptu-bg-opacity));border-radius:var(--ptc-segmented-roundness);padding:var(--ptc-segmented-space);gap:var(--ptc-segmented-space)}.pc_segmented.pc_segmented--sm{--ptc-segmented-roundness: var(--pt-roundness-sm);--ptc-segmented-option-height: var(--pt-dimension-1000);--ptc-segmented-space: var(--pt-dimension-100);--ptc-segmented-py: var(--pt-dimension-100);--ptc-segmented-p-icon: var(--pt-dimension-100);--ptc-segmented-p-text: var(--pt-dimension-200);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_segmented.pc_segmented--md{--ptc-segmented-roundness: var(--pt-roundness-md);--ptc-segmented-option-height: var(--pt-dimension-1200);--ptc-segmented-space: var(--pt-dimension-200);--ptc-segmented-py: var(--pt-dimension-100);--ptc-segmented-p-icon: var(--pt-dimension-200);--ptc-segmented-p-text: var(--pt-dimension-300);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_segmented.pc_segmented--lg{--ptc-segmented-roundness: var(--pt-roundness-lg);--ptc-segmented-option-height: var(--pt-dimension-1600);--ptc-segmented-space: var(--pt-dimension-200);--ptc-segmented-py: var(--pt-dimension-0);--ptc-segmented-p-icon: var(--pt-dimension-300);--ptc-segmented-p-text: var(--pt-dimension-400);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_segmented .pc_segmented__option,.pc_segmented .pc_segmented__option__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pc_segmented .pc_segmented__option__text{flex:1 1 0%}.pc_segmented .pc_segmented__selection_indicator{position:absolute;--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg),var(--ptu-bg-opacity));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;border-radius:var(--ptc-segmented-roundness);top:var(--ptc-segmented-space)}.pc_segmented .pc_segmented__selection_indicator[data-active]{border-width:1px;border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-br),var(--ptu-border-opacity));--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg),var(--ptu-bg-opacity))}.pc_segmented .pc_segmented__option{z-index:1;box-sizing:border-box;display:flex;align-items:center;border-width:1px;border-color:transparent;border-style:solid;background-color:transparent;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;outline:0;height:var(--ptc-segmented-option-height);min-height:var(--ptc-segmented-option-height);max-height:var(--ptc-segmented-option-height);border-radius:var(--ptc-segmented-roundness);gap:var(--ptc-segmented-space);padding-bottom:var(--ptc-segmented-py);padding-top:var(--ptc-segmented-py)}.pc_segmented .pc_segmented__option.pc_segmented__option--icon{padding-inline-start:var(--ptc-segmented-p-icon)}.pc_segmented .pc_segmented__option.pc_segmented__option--icon:not(.pc_segmented__option--text){min-width:var(--ptc-segmented-option-height);padding-inline-end:var(--ptc-segmented-p-icon)}.pc_segmented .pc_segmented__option.pc_segmented__option--text{padding-inline-end:var(--ptc-segmented-p-text)}.pc_segmented .pc_segmented__option.pc_segmented__option--text:not(.pc_segmented__option--icon){padding-inline-start:var(--ptc-segmented-p-text)}.pc_segmented .pc_segmented__option:not(:disabled){cursor:pointer}.pc_segmented .pc_segmented__option:not(:disabled)[data-active]{border-width:1px;border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-br),var(--ptu-border-opacity));--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg),var(--ptu-bg-opacity));--ptu-text-opacity:1;color:rgba(var(--pt-fg),var(--ptu-text-opacity))}.pc_segmented .pc_segmented__option:not(:disabled):not([data-active]){--ptu-text-opacity:1;color:rgba(var(--pt-fg-subtle),var(--ptu-text-opacity))}.pc_segmented .pc_segmented__option:disabled{cursor:not-allowed;--ptu-text-opacity:1;color:rgba(var(--pt-disable-fg),var(--ptu-text-opacity))}.pc_segmented .pc_segmented__option:disabled[data-active]{--ptu-bg-opacity:1;background-color:rgba(var(--pt-disable-fill),var(--ptu-bg-opacity))}.pc_segmented.pc_segmented--block{display:grid;width:100%}.pc_segmented.pc_segmented--block .pc_segmented__option{align-items:center;justify-content:center}.pc_segmented:not(.pc_segmented--block){width:fit-content;max-width:100%;display:inline-flex}.pc_segmented:not(.pc_segmented--block) .pc_segmented__option.pc_segmented__option--icon:not(.pc_segmented__option--text){align-items:center;justify-content:center;width:var(--ptc-segmented-option-height);min-width:var(--ptc-segmented-option-height);max-width:var(--ptc-segmented-option-height)}\n";
5
+ const segmentedId = `${prefix}s-segmented`;
6
+ const addSegmentedCss = () => addCssToHead(segmentedId, cssText);
7
+ const removeSegmentedCss = () => removeCssFromHead(segmentedId);
8
+ const segmentedCss = cssText;
9
+ exports.segmentedId = segmentedId;
6
10
  exports.addSegmentedCss = addSegmentedCss;
7
- exports.segmentedCss = cssText;
11
+ exports.removeSegmentedCss = removeSegmentedCss;
12
+ exports.segmentedCss = segmentedCss;
package/dist/select.d.ts CHANGED
@@ -1,4 +1,5 @@
1
- declare const cssText: string;
1
+ declare const selectId: string;
2
2
  declare const addSelectCss: () => void;
3
+ declare const removeSelectCss: () => void;
3
4
  declare const selectCss: string;
4
- export { addSelectCss, selectCss };
5
+ export { selectId, addSelectCss, removeSelectCss, selectCss };
package/dist/select.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_select__trigger{box-sizing:border-box;display:inline-flex;-webkit-user-select:none;user-select:none;align-items:center;overflow:hidden;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;outline:0;background-color:var(--ptc-select-trigger-bg);color:var(--ptc-select-trigger-fg);min-width:var(--ptc-select-trigger-min-w);min-height:var(--ptc-select-trigger-height)}.pc_select__trigger.pc_select__trigger--sm{gap:var(--pt-dimension-200, 4px);border-radius:var(--pt-roundness-sm, 4px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0;--ptc-select-trigger-height: var(--pt-dimension-1200);--ptc-select-trigger-leading-height: var(--pt-dimension-800);--ptc-select-trigger-padding: var(--pt-dimension-200);--ptc-select-trigger-multiple-padding: var(--pt-dimension-100)}.pc_select__trigger.pc_select__trigger--sm.pc_select__trigger--content-fit{--ptc-select-trigger-min-w: var(--pt-dimension-2200)}.pc_select__trigger.pc_select__trigger--md{gap:var(--pt-dimension-200, 4px);border-radius:var(--pt-roundness-md, 6px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-700, 14px);line-height:var(--pt-lineheight-6, 16px);letter-spacing:0;--ptc-select-trigger-height: var(--pt-dimension-1600);--ptc-select-trigger-leading-height: var(--pt-dimension-1000);--ptc-select-trigger-padding: var(--pt-dimension-300);--ptc-select-trigger-multiple-padding: var(--pt-dimension-200)}.pc_select__trigger.pc_select__trigger--md.pc_select__trigger--content-fit{--ptc-select-trigger-min-w: var(--pt-dimension-2800)}.pc_select__trigger.pc_select__trigger--lg{gap:var(--pt-dimension-300, 6px);border-radius:var(--pt-roundness-lg, 8px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-medium, medium);font-size:var(--pt-dimension-700, 14px);line-height:var(--pt-lineheight-6, 16px);letter-spacing:0;--ptc-select-trigger-height: var(--pt-dimension-2000);--ptc-select-trigger-leading-height: var(--pt-dimension-1200);--ptc-select-trigger-padding: var(--pt-dimension-400);--ptc-select-trigger-multiple-padding: var(--pt-dimension-200)}.pc_select__trigger.pc_select__trigger--lg.pc_select__trigger--content-fit{--ptc-select-trigger-min-w: var(--pt-dimension-3200)}.pc_select__trigger:not(.pc_select__trigger--content-fit){width:100%;--ptc-select-trigger-min-w: 220px}.pc_select__trigger.pc_select__trigger--content-fit{width:fit-content}.pc_select__trigger:not(.pc_select__trigger--multiple){padding-top:calc(var(--ptc-select-trigger-padding) - 1px);padding-bottom:calc(var(--ptc-select-trigger-padding) - 1px);padding-inline-end:var(--ptc-select-trigger-padding);padding-inline-start:var(--ptc-select-trigger-padding)}.pc_select__trigger.pc_select__trigger--multiple{padding-inline-end:var(--ptc-select-trigger-padding);padding-inline-start:var(--ptc-select-trigger-multiple-padding);padding-top:calc(var(--ptc-select-trigger-multiple-padding) - 1px);padding-bottom:calc(var(--ptc-select-trigger-multiple-padding) - 1px)}.pc_select__trigger:not(.pc_select__trigger--wrapped){height:var(--ptc-select-trigger-height);max-height:var(--ptc-select-trigger-height)}.pc_select__trigger:not(:disabled):not([disabled=true]){cursor:pointer;--ptc-select-trigger-bg: rgba(var(--pt-bg))}.pc_select__trigger:not(:disabled):not([disabled=true]):not(.pc_select__trigger--filled){--ptc-select-trigger-fg: rgba(var(--pt-fg-subtle))}.pc_select__trigger:not(:disabled):not([disabled=true]).pc_select__trigger--filled{--ptc-select-trigger-fg: rgba(var(--pt-fg));--ptc-select-trigger-trailing: rgba(var(--pt-fg-subtle))}.pc_select__trigger:not(:disabled):not([disabled=true]):focus,.pc_select__trigger:not(:disabled):not([disabled=true])[data-state=open]{--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_select__trigger:not(:disabled):not([disabled=true]).pc_select__trigger--bordered:not(:focus):not([data-state=open]):not(.pc_select__trigger--error):not(.pc_select__trigger--success):not(.pc_select__trigger--warning):not(:hover){--ptc-select-trigger-br: rgba(var(--pt-br))}.pc_select__trigger:not(:disabled):not([disabled=true]).pc_select__trigger--bordered:not(:focus):not([data-state=open]):not(.pc_select__trigger--error):not(.pc_select__trigger--success):not(.pc_select__trigger--warning):hover{--ptc-select-trigger-br: rgba(var(--pt-primary-6))}.pc_select__trigger:not(:disabled):not([disabled=true]).pc_select__trigger--bordered:not(:focus):not([data-state=open]).pc_select__trigger--error:not(:hover){--ptc-select-trigger-br: rgba(var(--pt-danger-br))}.pc_select__trigger:not(:disabled):not([disabled=true]).pc_select__trigger--bordered:not(:focus):not([data-state=open]).pc_select__trigger--error:hover{--ptc-select-trigger-br: rgba(var(--pt-danger-br-target))}.pc_select__trigger:not(:disabled):not([disabled=true]).pc_select__trigger--bordered:not(:focus):not([data-state=open]).pc_select__trigger--warning:not(:hover){--ptc-select-trigger-br: rgba(var(--pt-warning-br))}.pc_select__trigger:not(:disabled):not([disabled=true]).pc_select__trigger--bordered:not(:focus):not([data-state=open]).pc_select__trigger--warning:hover{--ptc-select-trigger-br: rgba(var(--pt-warning-br-target))}.pc_select__trigger:not(:disabled):not([disabled=true]).pc_select__trigger--bordered:not(:focus):not([data-state=open]).pc_select__trigger--success:not(:hover){--ptc-select-trigger-br: rgba(var(--pt-success-br))}.pc_select__trigger:not(:disabled):not([disabled=true]).pc_select__trigger--bordered:not(:focus):not([data-state=open]).pc_select__trigger--success:hover{--ptc-select-trigger-br: rgba(var(--pt-success-br-target))}.pc_select__trigger:not(:disabled):not([disabled=true]).pc_select__trigger--bordered:focus,.pc_select__trigger:not(:disabled):not([disabled=true]).pc_select__trigger--bordered[data-state=open]{--ptc-select-trigger-br: rgba(var(--pt-primary-6))}.pc_select__trigger:disabled,.pc_select__trigger[disabled=true]{cursor:not-allowed;--ptc-select-trigger-bg: rgba(var(--pt-disable-fill-subtle))}.pc_select__trigger:disabled.pc_select__trigger--bordered,.pc_select__trigger[disabled=true].pc_select__trigger--bordered{--ptc-select-trigger-br: rgba(var(--pt-disable-br-subtle))}.pc_select__trigger:disabled:not(.pc_select__trigger--filled),.pc_select__trigger[disabled=true]:not(.pc_select__trigger--filled){--ptc-select-trigger-fg: rgba(var(--pt-disable-fg-subtle))}.pc_select__trigger:disabled.pc_select__trigger--filled,.pc_select__trigger[disabled=true].pc_select__trigger--filled{--ptc-select-trigger-fg: rgba(var(--pt-disable-fg));--ptc-select-trigger-trailing: rgba(var(--pt-disable-fg-subtle))}.pc_select__trigger:not(.pc_select__trigger--filled){--ptc-select-trigger-trailing: var(--ptc-select-trigger-fg)}.pc_select__trigger:not(.pc_select__trigger--bordered){border-width:var(--pt-stroke-0, 0px)}.pc_select__trigger.pc_select__trigger--bordered{border-width:1px;border-style:solid;border-color:var(--ptc-select-trigger-br)}.pc_select__trigger .pc_select__trigger__content{flex:1 1 0%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pc_select__trigger .pc_select__trigger__leading{color:var(--ptc-select-trigger-fg)}.pc_select__trigger .pc_select__trigger__trailing{color:var(--ptc-select-trigger-trailing)}.pc_select__trigger .pc_select__trigger__leading,.pc_select__trigger .pc_select__trigger__trailing{height:var(--ptc-select-trigger-leading-height);display:flex;align-items:center;overflow:hidden}.pc_select__trigger .pc_select__trigger__tag__close{pointer-events:auto}.pc_select__popup{box-sizing:border-box;overflow:hidden;--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg),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);--ptc-select-trigger-min-w: 220px}.pc_select__popup.pc_select__popup--sm{border-radius:var(--pt-roundness-sm, 4px)}.pc_select__popup.pc_select__popup--sm .pc_select__scroll_area{padding:var(--pt-dimension-200, 4px)}.pc_select__popup.pc_select__popup--sm .pc_select__scroll_area .pc_select__options{gap:var(--pt-dimension-200, 4px)}.pc_select__popup.pc_select__popup--sm .pc_select__scroll_area .pc_select__label{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_select__popup.pc_select__popup--md{border-radius:var(--pt-roundness-md, 6px)}.pc_select__popup.pc_select__popup--md .pc_select__scroll_area{padding:var(--pt-dimension-300, 6px)}.pc_select__popup.pc_select__popup--md .pc_select__scroll_area .pc_select__options{gap:var(--pt-dimension-300, 6px)}.pc_select__popup.pc_select__popup--md .pc_select__scroll_area .pc_select__label{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_select__popup.pc_select__popup--lg{border-radius:var(--pt-roundness-lg, 8px)}.pc_select__popup.pc_select__popup--lg .pc_select__scroll_area{padding:var(--pt-dimension-400, 8px)}.pc_select__popup.pc_select__popup--lg .pc_select__scroll_area .pc_select__options{gap:var(--pt-dimension-300, 6px)}.pc_select__popup.pc_select__popup--lg .pc_select__scroll_area .pc_select__label{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_select__popup .pc_select__options{box-sizing:border-box;width:100%;display:flex;flex-direction:column;align-items:center}.pc_select__popup .pc_select__scroll_area{box-sizing:border-box;max-height:var(--ptc-select-popup-height);min-width:var(--ptc-select-trigger-min-w);width:var(--ptc-select-popup-width, var(--reka-select-trigger-width))}.pc_select__popup .pc_select__skeleton{width:100%!important}.pc_select__popup .pc_select__lazy_loading{pointer-events:none;position:relative;height:var(--pt-dimension-0, 0px);width:100%}.pc_select__popup .pc_select__lazy_loading_trigger{position:absolute;top:calc(var(--pt-dimension-1200, 24px) * -1);width:100%;height:var(--pt-dimension-1200, 24px);padding:var(--pt-dimension-0, 0px)}.pc_select__popup .pc_select__label{width:100%;padding-top:var(--pt-dimension-200, 4px);padding-bottom:var(--pt-dimension-200, 4px);padding-left:var(--pt-dimension-100, 2px);padding-right:var(--pt-dimension-100, 2px);--ptu-text-opacity:1;color:rgba(var(--pt-fg-subtle),var(--ptu-text-opacity))}.pc_select__option{box-sizing:border-box;width:100%;display:flex;-webkit-user-select:none;user-select:none;align-items:center;border-style:none;outline:0;gap:var(--ptc-select-option-gap)}.pc_select__option .pc_select__option__text{display:flex;flex:1 1 0%;align-items:center}.pc_select__option .pc_select__option__leading{display:flex;align-items:center}.pc_select__option.pc_select__option--sm{--ptc-select-option-gap: var(--pt-dimension-200);height:var(--pt-dimension-1200, 24px);border-radius:var(--pt-roundness-sm, 4px);padding:var(--pt-dimension-200, 4px);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_select__option.pc_select__option--sm .pc_select__option__leading{height:var(--pt-dimension-800, 16px)}.pc_select__option.pc_select__option--md{--ptc-select-option-gap: var(--pt-dimension-200);height:var(--pt-dimension-1600, 32px);border-radius:var(--pt-roundness-md, 6px);padding:var(--pt-dimension-300, 6px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-700, 14px);line-height:var(--pt-lineheight-6, 16px);letter-spacing:0}.pc_select__option.pc_select__option--md .pc_select__option__leading{height:var(--pt-dimension-1000, 20px)}.pc_select__option.pc_select__option--lg{--ptc-select-option-gap: var(--pt-dimension-300);height:var(--pt-dimension-2000, 40px);border-radius:var(--pt-roundness-lg, 8px);padding:var(--pt-dimension-400, 8px);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_select__option.pc_select__option--lg .pc_select__option__leading{height:var(--pt-dimension-1200, 24px)}.pc_select__option .pc_select__option__content{box-sizing:border-box;width:100%;display:flex;-webkit-user-select:none;user-select:none;align-items:center;border-style:none;outline:0;gap:var(--ptc-select-option-gap)}.pc_select__option:not([data-disabled]):not([aria-disabled=true]){cursor:pointer}.pc_select__option:not([data-disabled]):not([aria-disabled=true])[data-state=unchecked]:not(:hover):not([data-highlighted]):not(:active){background-color:var(--pt-alpha-gray-0);--ptu-text-opacity:1;color:rgba(var(--pt-fg),var(--ptu-text-opacity))}.pc_select__option:not([data-disabled]):not([aria-disabled=true])[data-state=unchecked]:hover,.pc_select__option:not([data-disabled]):not([aria-disabled=true])[data-state=unchecked][data-highlighted]{--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_select__option:not([data-disabled]):not([aria-disabled=true])[data-state=unchecked]:active{--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg-trigger),var(--ptu-bg-opacity));--ptu-text-opacity:1;color:rgba(var(--pt-fg-trigger),var(--ptu-text-opacity))}.pc_select__option:not([data-disabled]):not([aria-disabled=true])[data-state=checked]:not(:hover):not([data-highlighted]):not(:active){--ptu-bg-opacity:1;background-color:rgba(var(--pt-primary-fill-subtle),var(--ptu-bg-opacity));--ptu-text-opacity:1;color:rgba(var(--pt-primary-fg),var(--ptu-text-opacity))}.pc_select__option:not([data-disabled]):not([aria-disabled=true])[data-state=checked]:hover,.pc_select__option:not([data-disabled]):not([aria-disabled=true])[data-state=checked][data-highlighted]{--ptu-bg-opacity:1;background-color:rgba(var(--pt-primary-fill-subtle-target),var(--ptu-bg-opacity));--ptu-text-opacity:1;color:rgba(var(--pt-primary-fg-target),var(--ptu-text-opacity))}.pc_select__option:not([data-disabled]):not([aria-disabled=true])[data-state=checked]:active{--ptu-bg-opacity:1;background-color:rgba(var(--pt-primary-fill-subtle-trigger),var(--ptu-bg-opacity));--ptu-text-opacity:1;color:rgba(var(--pt-primary-fg-trigger),var(--ptu-text-opacity))}.pc_select__option:not([data-disabled]):not([aria-disabled=true]):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_select__option[data-disabled],.pc_select__option[aria-disabled=true]{cursor:not-allowed}.pc_select__option[data-disabled][data-state=unchecked],.pc_select__option[aria-disabled=true][data-state=unchecked]{--ptu-text-opacity:1;color:rgba(var(--pt-disable-fg),var(--ptu-text-opacity))}.pc_select__option[data-disabled][data-state=checked],.pc_select__option[aria-disabled=true][data-state=checked]{--ptu-bg-opacity:1;background-color:rgba(var(--pt-disable-fill),var(--ptu-bg-opacity));--ptu-text-opacity:1;color:rgba(var(--pt-disable-fg),var(--ptu-text-opacity))}\n";
3
- export const addSelectCss = () => addCssToHead(`${prefix}s-select`, cssText);
4
- export const selectCss = cssText;
3
+ const selectId = `${prefix}s-select`;
4
+ const addSelectCss = () => addCssToHead(selectId, cssText);
5
+ const removeSelectCss = () => removeCssFromHead(selectId);
6
+ const selectCss = cssText;
7
+ export { selectId, addSelectCss, removeSelectCss, selectCss };
package/dist/select.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_select__trigger{box-sizing:border-box;display:inline-flex;-webkit-user-select:none;user-select:none;align-items:center;overflow:hidden;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;outline:0;background-color:var(--ptc-select-trigger-bg);color:var(--ptc-select-trigger-fg);min-width:var(--ptc-select-trigger-min-w);min-height:var(--ptc-select-trigger-height)}.pc_select__trigger.pc_select__trigger--sm{gap:var(--pt-dimension-200, 4px);border-radius:var(--pt-roundness-sm, 4px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0;--ptc-select-trigger-height: var(--pt-dimension-1200);--ptc-select-trigger-leading-height: var(--pt-dimension-800);--ptc-select-trigger-padding: var(--pt-dimension-200);--ptc-select-trigger-multiple-padding: var(--pt-dimension-100)}.pc_select__trigger.pc_select__trigger--sm.pc_select__trigger--content-fit{--ptc-select-trigger-min-w: var(--pt-dimension-2200)}.pc_select__trigger.pc_select__trigger--md{gap:var(--pt-dimension-200, 4px);border-radius:var(--pt-roundness-md, 6px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-700, 14px);line-height:var(--pt-lineheight-6, 16px);letter-spacing:0;--ptc-select-trigger-height: var(--pt-dimension-1600);--ptc-select-trigger-leading-height: var(--pt-dimension-1000);--ptc-select-trigger-padding: var(--pt-dimension-300);--ptc-select-trigger-multiple-padding: var(--pt-dimension-200)}.pc_select__trigger.pc_select__trigger--md.pc_select__trigger--content-fit{--ptc-select-trigger-min-w: var(--pt-dimension-2800)}.pc_select__trigger.pc_select__trigger--lg{gap:var(--pt-dimension-300, 6px);border-radius:var(--pt-roundness-lg, 8px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-medium, medium);font-size:var(--pt-dimension-700, 14px);line-height:var(--pt-lineheight-6, 16px);letter-spacing:0;--ptc-select-trigger-height: var(--pt-dimension-2000);--ptc-select-trigger-leading-height: var(--pt-dimension-1200);--ptc-select-trigger-padding: var(--pt-dimension-400);--ptc-select-trigger-multiple-padding: var(--pt-dimension-200)}.pc_select__trigger.pc_select__trigger--lg.pc_select__trigger--content-fit{--ptc-select-trigger-min-w: var(--pt-dimension-3200)}.pc_select__trigger:not(.pc_select__trigger--content-fit){width:100%;--ptc-select-trigger-min-w: 220px}.pc_select__trigger.pc_select__trigger--content-fit{width:fit-content}.pc_select__trigger:not(.pc_select__trigger--multiple){padding-top:calc(var(--ptc-select-trigger-padding) - 1px);padding-bottom:calc(var(--ptc-select-trigger-padding) - 1px);padding-inline-end:var(--ptc-select-trigger-padding);padding-inline-start:var(--ptc-select-trigger-padding)}.pc_select__trigger.pc_select__trigger--multiple{padding-inline-end:var(--ptc-select-trigger-padding);padding-inline-start:var(--ptc-select-trigger-multiple-padding);padding-top:calc(var(--ptc-select-trigger-multiple-padding) - 1px);padding-bottom:calc(var(--ptc-select-trigger-multiple-padding) - 1px)}.pc_select__trigger:not(.pc_select__trigger--wrapped){height:var(--ptc-select-trigger-height);max-height:var(--ptc-select-trigger-height)}.pc_select__trigger:not(:disabled):not([disabled=true]){cursor:pointer;--ptc-select-trigger-bg: rgba(var(--pt-bg))}.pc_select__trigger:not(:disabled):not([disabled=true]):not(.pc_select__trigger--filled){--ptc-select-trigger-fg: rgba(var(--pt-fg-subtle))}.pc_select__trigger:not(:disabled):not([disabled=true]).pc_select__trigger--filled{--ptc-select-trigger-fg: rgba(var(--pt-fg));--ptc-select-trigger-trailing: rgba(var(--pt-fg-subtle))}.pc_select__trigger:not(:disabled):not([disabled=true]):focus,.pc_select__trigger:not(:disabled):not([disabled=true])[data-state=open]{--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_select__trigger:not(:disabled):not([disabled=true]).pc_select__trigger--bordered:not(:focus):not([data-state=open]):not(.pc_select__trigger--error):not(.pc_select__trigger--success):not(.pc_select__trigger--warning):not(:hover){--ptc-select-trigger-br: rgba(var(--pt-br))}.pc_select__trigger:not(:disabled):not([disabled=true]).pc_select__trigger--bordered:not(:focus):not([data-state=open]):not(.pc_select__trigger--error):not(.pc_select__trigger--success):not(.pc_select__trigger--warning):hover{--ptc-select-trigger-br: rgba(var(--pt-primary-6))}.pc_select__trigger:not(:disabled):not([disabled=true]).pc_select__trigger--bordered:not(:focus):not([data-state=open]).pc_select__trigger--error:not(:hover){--ptc-select-trigger-br: rgba(var(--pt-danger-br))}.pc_select__trigger:not(:disabled):not([disabled=true]).pc_select__trigger--bordered:not(:focus):not([data-state=open]).pc_select__trigger--error:hover{--ptc-select-trigger-br: rgba(var(--pt-danger-br-target))}.pc_select__trigger:not(:disabled):not([disabled=true]).pc_select__trigger--bordered:not(:focus):not([data-state=open]).pc_select__trigger--warning:not(:hover){--ptc-select-trigger-br: rgba(var(--pt-warning-br))}.pc_select__trigger:not(:disabled):not([disabled=true]).pc_select__trigger--bordered:not(:focus):not([data-state=open]).pc_select__trigger--warning:hover{--ptc-select-trigger-br: rgba(var(--pt-warning-br-target))}.pc_select__trigger:not(:disabled):not([disabled=true]).pc_select__trigger--bordered:not(:focus):not([data-state=open]).pc_select__trigger--success:not(:hover){--ptc-select-trigger-br: rgba(var(--pt-success-br))}.pc_select__trigger:not(:disabled):not([disabled=true]).pc_select__trigger--bordered:not(:focus):not([data-state=open]).pc_select__trigger--success:hover{--ptc-select-trigger-br: rgba(var(--pt-success-br-target))}.pc_select__trigger:not(:disabled):not([disabled=true]).pc_select__trigger--bordered:focus,.pc_select__trigger:not(:disabled):not([disabled=true]).pc_select__trigger--bordered[data-state=open]{--ptc-select-trigger-br: rgba(var(--pt-primary-6))}.pc_select__trigger:disabled,.pc_select__trigger[disabled=true]{cursor:not-allowed;--ptc-select-trigger-bg: rgba(var(--pt-disable-fill-subtle))}.pc_select__trigger:disabled.pc_select__trigger--bordered,.pc_select__trigger[disabled=true].pc_select__trigger--bordered{--ptc-select-trigger-br: rgba(var(--pt-disable-br-subtle))}.pc_select__trigger:disabled:not(.pc_select__trigger--filled),.pc_select__trigger[disabled=true]:not(.pc_select__trigger--filled){--ptc-select-trigger-fg: rgba(var(--pt-disable-fg-subtle))}.pc_select__trigger:disabled.pc_select__trigger--filled,.pc_select__trigger[disabled=true].pc_select__trigger--filled{--ptc-select-trigger-fg: rgba(var(--pt-disable-fg));--ptc-select-trigger-trailing: rgba(var(--pt-disable-fg-subtle))}.pc_select__trigger:not(.pc_select__trigger--filled){--ptc-select-trigger-trailing: var(--ptc-select-trigger-fg)}.pc_select__trigger:not(.pc_select__trigger--bordered){border-width:var(--pt-stroke-0, 0px)}.pc_select__trigger.pc_select__trigger--bordered{border-width:1px;border-style:solid;border-color:var(--ptc-select-trigger-br)}.pc_select__trigger .pc_select__trigger__content{flex:1 1 0%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pc_select__trigger .pc_select__trigger__leading{color:var(--ptc-select-trigger-fg)}.pc_select__trigger .pc_select__trigger__trailing{color:var(--ptc-select-trigger-trailing)}.pc_select__trigger .pc_select__trigger__leading,.pc_select__trigger .pc_select__trigger__trailing{height:var(--ptc-select-trigger-leading-height);display:flex;align-items:center;overflow:hidden}.pc_select__trigger .pc_select__trigger__tag__close{pointer-events:auto}.pc_select__popup{box-sizing:border-box;overflow:hidden;--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg),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);--ptc-select-trigger-min-w: 220px}.pc_select__popup.pc_select__popup--sm{border-radius:var(--pt-roundness-sm, 4px)}.pc_select__popup.pc_select__popup--sm .pc_select__scroll_area{padding:var(--pt-dimension-200, 4px)}.pc_select__popup.pc_select__popup--sm .pc_select__scroll_area .pc_select__options{gap:var(--pt-dimension-200, 4px)}.pc_select__popup.pc_select__popup--sm .pc_select__scroll_area .pc_select__label{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_select__popup.pc_select__popup--md{border-radius:var(--pt-roundness-md, 6px)}.pc_select__popup.pc_select__popup--md .pc_select__scroll_area{padding:var(--pt-dimension-300, 6px)}.pc_select__popup.pc_select__popup--md .pc_select__scroll_area .pc_select__options{gap:var(--pt-dimension-300, 6px)}.pc_select__popup.pc_select__popup--md .pc_select__scroll_area .pc_select__label{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_select__popup.pc_select__popup--lg{border-radius:var(--pt-roundness-lg, 8px)}.pc_select__popup.pc_select__popup--lg .pc_select__scroll_area{padding:var(--pt-dimension-400, 8px)}.pc_select__popup.pc_select__popup--lg .pc_select__scroll_area .pc_select__options{gap:var(--pt-dimension-300, 6px)}.pc_select__popup.pc_select__popup--lg .pc_select__scroll_area .pc_select__label{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_select__popup .pc_select__options{box-sizing:border-box;width:100%;display:flex;flex-direction:column;align-items:center}.pc_select__popup .pc_select__scroll_area{box-sizing:border-box;max-height:var(--ptc-select-popup-height);min-width:var(--ptc-select-trigger-min-w);width:var(--ptc-select-popup-width, var(--reka-select-trigger-width))}.pc_select__popup .pc_select__skeleton{width:100%!important}.pc_select__popup .pc_select__lazy_loading{pointer-events:none;position:relative;height:var(--pt-dimension-0, 0px);width:100%}.pc_select__popup .pc_select__lazy_loading_trigger{position:absolute;top:calc(var(--pt-dimension-1200, 24px) * -1);width:100%;height:var(--pt-dimension-1200, 24px);padding:var(--pt-dimension-0, 0px)}.pc_select__popup .pc_select__label{width:100%;padding-top:var(--pt-dimension-200, 4px);padding-bottom:var(--pt-dimension-200, 4px);padding-left:var(--pt-dimension-100, 2px);padding-right:var(--pt-dimension-100, 2px);--ptu-text-opacity:1;color:rgba(var(--pt-fg-subtle),var(--ptu-text-opacity))}.pc_select__option{box-sizing:border-box;width:100%;display:flex;-webkit-user-select:none;user-select:none;align-items:center;border-style:none;outline:0;gap:var(--ptc-select-option-gap)}.pc_select__option .pc_select__option__text{display:flex;flex:1 1 0%;align-items:center}.pc_select__option .pc_select__option__leading{display:flex;align-items:center}.pc_select__option.pc_select__option--sm{--ptc-select-option-gap: var(--pt-dimension-200);height:var(--pt-dimension-1200, 24px);border-radius:var(--pt-roundness-sm, 4px);padding:var(--pt-dimension-200, 4px);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_select__option.pc_select__option--sm .pc_select__option__leading{height:var(--pt-dimension-800, 16px)}.pc_select__option.pc_select__option--md{--ptc-select-option-gap: var(--pt-dimension-200);height:var(--pt-dimension-1600, 32px);border-radius:var(--pt-roundness-md, 6px);padding:var(--pt-dimension-300, 6px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-700, 14px);line-height:var(--pt-lineheight-6, 16px);letter-spacing:0}.pc_select__option.pc_select__option--md .pc_select__option__leading{height:var(--pt-dimension-1000, 20px)}.pc_select__option.pc_select__option--lg{--ptc-select-option-gap: var(--pt-dimension-300);height:var(--pt-dimension-2000, 40px);border-radius:var(--pt-roundness-lg, 8px);padding:var(--pt-dimension-400, 8px);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_select__option.pc_select__option--lg .pc_select__option__leading{height:var(--pt-dimension-1200, 24px)}.pc_select__option .pc_select__option__content{box-sizing:border-box;width:100%;display:flex;-webkit-user-select:none;user-select:none;align-items:center;border-style:none;outline:0;gap:var(--ptc-select-option-gap)}.pc_select__option:not([data-disabled]):not([aria-disabled=true]){cursor:pointer}.pc_select__option:not([data-disabled]):not([aria-disabled=true])[data-state=unchecked]:not(:hover):not([data-highlighted]):not(:active){background-color:var(--pt-alpha-gray-0);--ptu-text-opacity:1;color:rgba(var(--pt-fg),var(--ptu-text-opacity))}.pc_select__option:not([data-disabled]):not([aria-disabled=true])[data-state=unchecked]:hover,.pc_select__option:not([data-disabled]):not([aria-disabled=true])[data-state=unchecked][data-highlighted]{--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_select__option:not([data-disabled]):not([aria-disabled=true])[data-state=unchecked]:active{--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg-trigger),var(--ptu-bg-opacity));--ptu-text-opacity:1;color:rgba(var(--pt-fg-trigger),var(--ptu-text-opacity))}.pc_select__option:not([data-disabled]):not([aria-disabled=true])[data-state=checked]:not(:hover):not([data-highlighted]):not(:active){--ptu-bg-opacity:1;background-color:rgba(var(--pt-primary-fill-subtle),var(--ptu-bg-opacity));--ptu-text-opacity:1;color:rgba(var(--pt-primary-fg),var(--ptu-text-opacity))}.pc_select__option:not([data-disabled]):not([aria-disabled=true])[data-state=checked]:hover,.pc_select__option:not([data-disabled]):not([aria-disabled=true])[data-state=checked][data-highlighted]{--ptu-bg-opacity:1;background-color:rgba(var(--pt-primary-fill-subtle-target),var(--ptu-bg-opacity));--ptu-text-opacity:1;color:rgba(var(--pt-primary-fg-target),var(--ptu-text-opacity))}.pc_select__option:not([data-disabled]):not([aria-disabled=true])[data-state=checked]:active{--ptu-bg-opacity:1;background-color:rgba(var(--pt-primary-fill-subtle-trigger),var(--ptu-bg-opacity));--ptu-text-opacity:1;color:rgba(var(--pt-primary-fg-trigger),var(--ptu-text-opacity))}.pc_select__option:not([data-disabled]):not([aria-disabled=true]):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_select__option[data-disabled],.pc_select__option[aria-disabled=true]{cursor:not-allowed}.pc_select__option[data-disabled][data-state=unchecked],.pc_select__option[aria-disabled=true][data-state=unchecked]{--ptu-text-opacity:1;color:rgba(var(--pt-disable-fg),var(--ptu-text-opacity))}.pc_select__option[data-disabled][data-state=checked],.pc_select__option[aria-disabled=true][data-state=checked]{--ptu-bg-opacity:1;background-color:rgba(var(--pt-disable-fill),var(--ptu-bg-opacity));--ptu-text-opacity:1;color:rgba(var(--pt-disable-fg),var(--ptu-text-opacity))}\n";
5
- const addSelectCss = () => addCssToHead(`${prefix}s-select`, cssText);
5
+ const selectId = `${prefix}s-select`;
6
+ const addSelectCss = () => addCssToHead(selectId, cssText);
7
+ const removeSelectCss = () => removeCssFromHead(selectId);
8
+ const selectCss = cssText;
9
+ exports.selectId = selectId;
6
10
  exports.addSelectCss = addSelectCss;
7
- exports.selectCss = cssText;
11
+ exports.removeSelectCss = removeSelectCss;
12
+ exports.selectCss = selectCss;
package/dist/shortcut.d.ts CHANGED
@@ -1,4 +1,5 @@
1
- declare const cssText: string;
1
+ declare const shortcutId: string;
2
2
  declare const addShortcutCss: () => void;
3
+ declare const removeShortcutCss: () => void;
3
4
  declare const shortcutCss: string;
4
- export { addShortcutCss, shortcutCss };
5
+ export { shortcutId, addShortcutCss, removeShortcutCss, shortcutCss };
package/dist/shortcut.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_shortcut{display:inline-flex;align-items:center;gap:var(--pt-dimension-200, 4px);--ptu-text-opacity:1;color:rgba(var(--pt-fg-subtle),var(--ptu-text-opacity))}\n";
3
- export const addShortcutCss = () => addCssToHead(`${prefix}s-shortcut`, cssText);
4
- export const shortcutCss = cssText;
3
+ const shortcutId = `${prefix}s-shortcut`;
4
+ const addShortcutCss = () => addCssToHead(shortcutId, cssText);
5
+ const removeShortcutCss = () => removeCssFromHead(shortcutId);
6
+ const shortcutCss = cssText;
7
+ export { shortcutId, addShortcutCss, removeShortcutCss, shortcutCss };
package/dist/shortcut.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_shortcut{display:inline-flex;align-items:center;gap:var(--pt-dimension-200, 4px);--ptu-text-opacity:1;color:rgba(var(--pt-fg-subtle),var(--ptu-text-opacity))}\n";
5
- const addShortcutCss = () => addCssToHead(`${prefix}s-shortcut`, cssText);
5
+ const shortcutId = `${prefix}s-shortcut`;
6
+ const addShortcutCss = () => addCssToHead(shortcutId, cssText);
7
+ const removeShortcutCss = () => removeCssFromHead(shortcutId);
8
+ const shortcutCss = cssText;
9
+ exports.shortcutId = shortcutId;
6
10
  exports.addShortcutCss = addShortcutCss;
7
- exports.shortcutCss = cssText;
11
+ exports.removeShortcutCss = removeShortcutCss;
12
+ exports.shortcutCss = shortcutCss;
package/dist/skeleton.d.ts CHANGED
@@ -1,4 +1,5 @@
1
- declare const cssText: string;
1
+ declare const skeletonId: string;
2
2
  declare const addSkeletonCss: () => void;
3
+ declare const removeSkeletonCss: () => void;
3
4
  declare const skeletonCss: string;
4
- export { addSkeletonCss, skeletonCss };
5
+ export { skeletonId, addSkeletonCss, removeSkeletonCss, skeletonCss };
package/dist/skeleton.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 = ".__skeleton--active{--ptu-bg-opacity:1;background-color:rgba(var(--pt-gray-2),var(--ptu-bg-opacity));--ptu-gradient-from-position:0%;--ptu-gradient-from:rgba(var(--pt-gray-2), var(--ptu-from-opacity, 1)) var(--ptu-gradient-from-position);--ptu-gradient-to:rgba(var(--pt-gray-2), 0) var(--ptu-gradient-to-position);--ptu-gradient-stops:var(--ptu-gradient-from), var(--ptu-gradient-to);--ptu-gradient-via-position:50%;--ptu-gradient-to:rgba(var(--pt-gray-05), 0);--ptu-gradient-stops:var(--ptu-gradient-from), rgba(var(--pt-gray-05), var(--ptu-via-opacity, 1)) var(--ptu-gradient-via-position), var(--ptu-gradient-to);--ptu-gradient-to-position:100%;--ptu-gradient-to:rgba(var(--pt-gray-2), var(--ptu-to-opacity, 1)) var(--ptu-gradient-to-position);--ptu-gradient-shape:to left in oklch;--ptu-gradient:var(--ptu-gradient-shape), var(--ptu-gradient-stops);background-image:linear-gradient(var(--ptu-gradient));background-repeat:no-repeat;background-size:100px 100%;background-position-x:-100px;animation-delay:.5s;animation-duration:1.2s;animation-fill-mode:both;animation-iteration-count:infinite;animation-name:skeleton}.pc_skeleton.pc_skeleton--base:not(.pc_skeleton--button):not(.pc_skeleton--headline),.pc_skeleton.pc_skeleton--input:not(.pc_skeleton--button):not(.pc_skeleton--headline),.pc_skeleton.pc_skeleton--button:not(.pc_skeleton--button):not(.pc_skeleton--headline),.pc_skeleton.pc_skeleton--headline:not(.pc_skeleton--button):not(.pc_skeleton--headline),.pc_skeleton:not(.pc_skeleton--avatar):not(.pc_skeleton--paragraph):not(.pc_skeleton--list):not(.pc_skeleton--custom-items):not(.pc_skeleton--base):not(.pc_skeleton--custom):not(.pc_skeleton--button):not(.pc_skeleton--headline){width:180px;min-width:180px}.pc_skeleton.pc_skeleton--base.pc_skeleton--headline,.pc_skeleton.pc_skeleton--input.pc_skeleton--headline,.pc_skeleton.pc_skeleton--button.pc_skeleton--headline,.pc_skeleton.pc_skeleton--headline.pc_skeleton--headline,.pc_skeleton:not(.pc_skeleton--avatar):not(.pc_skeleton--paragraph):not(.pc_skeleton--list):not(.pc_skeleton--custom-items):not(.pc_skeleton--base):not(.pc_skeleton--custom).pc_skeleton--headline{width:120px;min-width:120px}.pc_skeleton.pc_skeleton--base.pc_skeleton--lg:not(.pc_skeleton--headline),.pc_skeleton.pc_skeleton--input.pc_skeleton--lg:not(.pc_skeleton--headline),.pc_skeleton.pc_skeleton--button.pc_skeleton--lg:not(.pc_skeleton--headline),.pc_skeleton.pc_skeleton--headline.pc_skeleton--lg:not(.pc_skeleton--headline),.pc_skeleton:not(.pc_skeleton--avatar):not(.pc_skeleton--paragraph):not(.pc_skeleton--list):not(.pc_skeleton--custom-items):not(.pc_skeleton--base):not(.pc_skeleton--custom).pc_skeleton--lg:not(.pc_skeleton--headline){height:var(--pt-dimension-2000, 40px);min-height:var(--pt-dimension-2000, 40px);border-radius:var(--pt-roundness-lg, 8px)}.pc_skeleton.pc_skeleton--base.pc_skeleton--lg:not(.pc_skeleton--headline).pc_skeleton--button,.pc_skeleton.pc_skeleton--input.pc_skeleton--lg:not(.pc_skeleton--headline).pc_skeleton--button,.pc_skeleton.pc_skeleton--button.pc_skeleton--lg:not(.pc_skeleton--headline).pc_skeleton--button,.pc_skeleton.pc_skeleton--headline.pc_skeleton--lg:not(.pc_skeleton--headline).pc_skeleton--button,.pc_skeleton:not(.pc_skeleton--avatar):not(.pc_skeleton--paragraph):not(.pc_skeleton--list):not(.pc_skeleton--custom-items):not(.pc_skeleton--base):not(.pc_skeleton--custom).pc_skeleton--lg:not(.pc_skeleton--headline).pc_skeleton--button{width:96px;min-width:96px}.pc_skeleton.pc_skeleton--base.pc_skeleton--md,.pc_skeleton.pc_skeleton--input.pc_skeleton--md,.pc_skeleton.pc_skeleton--button.pc_skeleton--md,.pc_skeleton.pc_skeleton--headline.pc_skeleton--md,.pc_skeleton:not(.pc_skeleton--avatar):not(.pc_skeleton--paragraph):not(.pc_skeleton--list):not(.pc_skeleton--custom-items):not(.pc_skeleton--base):not(.pc_skeleton--custom).pc_skeleton--md,.pc_skeleton.pc_skeleton--base:not(.pc_skeleton--lg):not(.pc_skeleton--sm):not(.pc_skeleton--2xsm),.pc_skeleton.pc_skeleton--input:not(.pc_skeleton--lg):not(.pc_skeleton--sm):not(.pc_skeleton--2xsm),.pc_skeleton.pc_skeleton--button:not(.pc_skeleton--lg):not(.pc_skeleton--sm):not(.pc_skeleton--2xsm),.pc_skeleton.pc_skeleton--headline:not(.pc_skeleton--lg):not(.pc_skeleton--sm):not(.pc_skeleton--2xsm),.pc_skeleton:not(.pc_skeleton--avatar):not(.pc_skeleton--paragraph):not(.pc_skeleton--list):not(.pc_skeleton--custom-items):not(.pc_skeleton--base):not(.pc_skeleton--custom):not(.pc_skeleton--lg):not(.pc_skeleton--sm):not(.pc_skeleton--2xsm){min-height:var(--pt-dimension-1600, 32px);height:var(--pt-dimension-1600, 32px);border-radius:var(--pt-roundness-md, 6px)}.pc_skeleton.pc_skeleton--base.pc_skeleton--md.pc_skeleton--button,.pc_skeleton.pc_skeleton--input.pc_skeleton--md.pc_skeleton--button,.pc_skeleton.pc_skeleton--button.pc_skeleton--md.pc_skeleton--button,.pc_skeleton.pc_skeleton--headline.pc_skeleton--md.pc_skeleton--button,.pc_skeleton:not(.pc_skeleton--avatar):not(.pc_skeleton--paragraph):not(.pc_skeleton--list):not(.pc_skeleton--custom-items):not(.pc_skeleton--base):not(.pc_skeleton--custom).pc_skeleton--md.pc_skeleton--button,.pc_skeleton.pc_skeleton--base:not(.pc_skeleton--lg):not(.pc_skeleton--sm):not(.pc_skeleton--2xsm).pc_skeleton--button,.pc_skeleton.pc_skeleton--input:not(.pc_skeleton--lg):not(.pc_skeleton--sm):not(.pc_skeleton--2xsm).pc_skeleton--button,.pc_skeleton.pc_skeleton--button:not(.pc_skeleton--lg):not(.pc_skeleton--sm):not(.pc_skeleton--2xsm).pc_skeleton--button,.pc_skeleton.pc_skeleton--headline:not(.pc_skeleton--lg):not(.pc_skeleton--sm):not(.pc_skeleton--2xsm).pc_skeleton--button,.pc_skeleton:not(.pc_skeleton--avatar):not(.pc_skeleton--paragraph):not(.pc_skeleton--list):not(.pc_skeleton--custom-items):not(.pc_skeleton--base):not(.pc_skeleton--custom):not(.pc_skeleton--lg):not(.pc_skeleton--sm):not(.pc_skeleton--2xsm).pc_skeleton--button{width:64px;min-width:64px}.pc_skeleton.pc_skeleton--base.pc_skeleton--sm,.pc_skeleton.pc_skeleton--input.pc_skeleton--sm,.pc_skeleton.pc_skeleton--button.pc_skeleton--sm,.pc_skeleton.pc_skeleton--headline.pc_skeleton--sm,.pc_skeleton:not(.pc_skeleton--avatar):not(.pc_skeleton--paragraph):not(.pc_skeleton--list):not(.pc_skeleton--custom-items):not(.pc_skeleton--base):not(.pc_skeleton--custom).pc_skeleton--sm{height:var(--pt-dimension-1200, 24px);min-height:var(--pt-dimension-1200, 24px);border-radius:var(--pt-roundness-sm, 4px)}.pc_skeleton.pc_skeleton--base.pc_skeleton--sm.pc_skeleton--button,.pc_skeleton.pc_skeleton--input.pc_skeleton--sm.pc_skeleton--button,.pc_skeleton.pc_skeleton--button.pc_skeleton--sm.pc_skeleton--button,.pc_skeleton.pc_skeleton--headline.pc_skeleton--sm.pc_skeleton--button,.pc_skeleton:not(.pc_skeleton--avatar):not(.pc_skeleton--paragraph):not(.pc_skeleton--list):not(.pc_skeleton--custom-items):not(.pc_skeleton--base):not(.pc_skeleton--custom).pc_skeleton--sm.pc_skeleton--button{width:48px;min-width:48px}.pc_skeleton.pc_skeleton--base.pc_skeleton--2xsm:not(.pc_skeleton--input):not(.pc_skeleton--button):not(.pc_skeleton--headline),.pc_skeleton.pc_skeleton--input.pc_skeleton--2xsm:not(.pc_skeleton--input):not(.pc_skeleton--button):not(.pc_skeleton--headline),.pc_skeleton.pc_skeleton--button.pc_skeleton--2xsm:not(.pc_skeleton--input):not(.pc_skeleton--button):not(.pc_skeleton--headline),.pc_skeleton.pc_skeleton--headline.pc_skeleton--2xsm:not(.pc_skeleton--input):not(.pc_skeleton--button):not(.pc_skeleton--headline),.pc_skeleton:not(.pc_skeleton--avatar):not(.pc_skeleton--paragraph):not(.pc_skeleton--list):not(.pc_skeleton--custom-items):not(.pc_skeleton--base):not(.pc_skeleton--custom).pc_skeleton--2xsm:not(.pc_skeleton--input):not(.pc_skeleton--button):not(.pc_skeleton--headline){height:var(--pt-dimension-800, 16px);min-height:var(--pt-dimension-800, 16px);border-radius:var(--pt-roundness-sm, 4px)}.pc_skeleton.pc_skeleton--avatar{border-radius:var(--pt-roundness-full, 88px)}.pc_skeleton.pc_skeleton--avatar.pc_skeleton--lg{width:var(--pt-dimension-2000, 40px);height:var(--pt-dimension-2000, 40px);min-width:var(--pt-dimension-2000, 40px);min-height:var(--pt-dimension-2000, 40px)}.pc_skeleton.pc_skeleton--avatar.pc_skeleton--md{width:var(--pt-dimension-1600, 32px);height:var(--pt-dimension-1600, 32px);min-width:var(--pt-dimension-1600, 32px);min-height:var(--pt-dimension-1600, 32px)}.pc_skeleton.pc_skeleton--avatar.pc_skeleton--sm{width:var(--pt-dimension-1200, 24px);height:var(--pt-dimension-1200, 24px);min-width:var(--pt-dimension-1200, 24px);min-height:var(--pt-dimension-1200, 24px)}.pc_skeleton.pc_skeleton--avatar.pc_skeleton--2xsm{width:var(--pt-dimension-800, 16px);height:var(--pt-dimension-800, 16px);min-width:var(--pt-dimension-800, 16px);min-height:var(--pt-dimension-800, 16px)}.pc_skeleton.pc_skeleton--paragraph{width:200px;min-width:200px;display:flex;flex-direction:column}.pc_skeleton.pc_skeleton--paragraph .pc_skeleton__item:last-child{width:80px;min-width:80px}.pc_skeleton.pc_skeleton--paragraph.pc_skeleton--md{gap:var(--pt-dimension-600, 12px)}.pc_skeleton.pc_skeleton--paragraph.pc_skeleton--md .pc_skeleton__item{height:var(--pt-dimension-1600, 32px);min-height:var(--pt-dimension-1600, 32px);border-radius:var(--pt-roundness-md, 6px)}.pc_skeleton.pc_skeleton--paragraph.pc_skeleton--sm{gap:var(--pt-dimension-400, 8px)}.pc_skeleton.pc_skeleton--paragraph.pc_skeleton--sm .pc_skeleton__item{height:var(--pt-dimension-1200, 24px);min-height:var(--pt-dimension-1200, 24px);border-radius:var(--pt-roundness-sm, 4px)}.pc_skeleton.pc_skeleton--paragraph.pc_skeleton--2xsm{gap:var(--pt-dimension-400, 8px)}.pc_skeleton.pc_skeleton--paragraph.pc_skeleton--2xsm .pc_skeleton__item{height:var(--pt-dimension-800, 16px);min-height:var(--pt-dimension-800, 16px);border-radius:var(--pt-roundness-sm, 4px)}.pc_skeleton.pc_skeleton--paragraph:not(.pc_skeleton--inactive) .pc_skeleton__item{--ptu-bg-opacity:1;background-color:rgba(var(--pt-gray-2),var(--ptu-bg-opacity));--ptu-gradient-from-position:0%;--ptu-gradient-from:rgba(var(--pt-gray-2), var(--ptu-from-opacity, 1)) var(--ptu-gradient-from-position);--ptu-gradient-to:rgba(var(--pt-gray-2), 0) var(--ptu-gradient-to-position);--ptu-gradient-stops:var(--ptu-gradient-from), var(--ptu-gradient-to);--ptu-gradient-via-position:50%;--ptu-gradient-to:rgba(var(--pt-gray-05), 0);--ptu-gradient-stops:var(--ptu-gradient-from), rgba(var(--pt-gray-05), var(--ptu-via-opacity, 1)) var(--ptu-gradient-via-position), var(--ptu-gradient-to);--ptu-gradient-to-position:100%;--ptu-gradient-to:rgba(var(--pt-gray-2), var(--ptu-to-opacity, 1)) var(--ptu-gradient-to-position);--ptu-gradient-shape:to left in oklch;--ptu-gradient:var(--ptu-gradient-shape), var(--ptu-gradient-stops);background-image:linear-gradient(var(--ptu-gradient));background-repeat:no-repeat;background-size:100px 100%;background-position-x:-100px;animation-delay:.5s;animation-duration:1.2s;animation-fill-mode:both;animation-iteration-count:infinite;animation-name:skeleton}.pc_skeleton.pc_skeleton--paragraph.pc_skeleton--inactive .pc_skeleton__item{--ptu-bg-opacity:1;background-color:rgba(var(--pt-gray-2),var(--ptu-bg-opacity))}.pc_skeleton.pc_skeleton--list{width:160px;min-width:160px;display:flex;align-items:center}.pc_skeleton.pc_skeleton--list .pc_skeleton__item:first-child{border-radius:var(--pt-roundness-full, 88px)}.pc_skeleton.pc_skeleton--list .pc_skeleton__item:last-child{flex:1 1 0%}.pc_skeleton.pc_skeleton--list.pc_skeleton--lg{gap:var(--pt-dimension-600, 12px)}.pc_skeleton.pc_skeleton--list.pc_skeleton--lg .pc_skeleton__item:first-child{width:var(--pt-dimension-1600, 32px);height:var(--pt-dimension-1600, 32px);min-width:var(--pt-dimension-1600, 32px);min-height:var(--pt-dimension-1600, 32px)}.pc_skeleton.pc_skeleton--list.pc_skeleton--lg .pc_skeleton__item:last-child{height:var(--pt-dimension-1600, 32px);min-height:var(--pt-dimension-1600, 32px);border-radius:var(--pt-roundness-lg, 8px)}.pc_skeleton.pc_skeleton--list.pc_skeleton--md{gap:var(--pt-dimension-400, 8px)}.pc_skeleton.pc_skeleton--list.pc_skeleton--md .pc_skeleton__item:first-child{width:var(--pt-dimension-1200, 24px);height:var(--pt-dimension-1200, 24px);min-width:var(--pt-dimension-1200, 24px);min-height:var(--pt-dimension-1200, 24px)}.pc_skeleton.pc_skeleton--list.pc_skeleton--md .pc_skeleton__item:last-child{height:var(--pt-dimension-1200, 24px);min-height:var(--pt-dimension-1200, 24px);border-radius:var(--pt-roundness-md, 6px)}.pc_skeleton.pc_skeleton--list.pc_skeleton--sm{gap:var(--pt-dimension-300, 6px)}.pc_skeleton.pc_skeleton--list.pc_skeleton--sm .pc_skeleton__item:first-child{width:var(--pt-dimension-1000, 20px);height:var(--pt-dimension-1000, 20px);min-width:var(--pt-dimension-1000, 20px);min-height:var(--pt-dimension-1000, 20px)}.pc_skeleton.pc_skeleton--list.pc_skeleton--sm .pc_skeleton__item:last-child{height:var(--pt-dimension-1000, 20px);min-height:var(--pt-dimension-1000, 20px);border-radius:var(--pt-roundness-sm, 4px)}.pc_skeleton.pc_skeleton--list.pc_skeleton--2xsm{gap:var(--pt-dimension-200, 4px)}.pc_skeleton.pc_skeleton--list.pc_skeleton--2xsm .pc_skeleton__item:first-child{width:var(--pt-dimension-700, 14px);height:var(--pt-dimension-700, 14px);min-width:var(--pt-dimension-700, 14px);min-height:var(--pt-dimension-700, 14px)}.pc_skeleton.pc_skeleton--list.pc_skeleton--2xsm .pc_skeleton__item:last-child{height:var(--pt-dimension-700, 14px);min-height:var(--pt-dimension-700, 14px);border-radius:var(--pt-roundness-sm, 4px)}.pc_skeleton.pc_skeleton--list:not(.pc_skeleton--inactive) .pc_skeleton__item,.pc_skeleton.pc_skeleton--paragraph:not(.pc_skeleton--inactive) .pc_skeleton__item,.pc_skeleton.pc_skeleton--custom-items:not(.pc_skeleton--inactive) .pc_skeleton__item{--ptu-bg-opacity:1;background-color:rgba(var(--pt-gray-2),var(--ptu-bg-opacity));--ptu-gradient-from-position:0%;--ptu-gradient-from:rgba(var(--pt-gray-2), var(--ptu-from-opacity, 1)) var(--ptu-gradient-from-position);--ptu-gradient-to:rgba(var(--pt-gray-2), 0) var(--ptu-gradient-to-position);--ptu-gradient-stops:var(--ptu-gradient-from), var(--ptu-gradient-to);--ptu-gradient-via-position:50%;--ptu-gradient-to:rgba(var(--pt-gray-05), 0);--ptu-gradient-stops:var(--ptu-gradient-from), rgba(var(--pt-gray-05), var(--ptu-via-opacity, 1)) var(--ptu-gradient-via-position), var(--ptu-gradient-to);--ptu-gradient-to-position:100%;--ptu-gradient-to:rgba(var(--pt-gray-2), var(--ptu-to-opacity, 1)) var(--ptu-gradient-to-position);--ptu-gradient-shape:to left in oklch;--ptu-gradient:var(--ptu-gradient-shape), var(--ptu-gradient-stops);background-image:linear-gradient(var(--ptu-gradient));background-repeat:no-repeat;background-size:100px 100%;background-position-x:-100px;animation-delay:.5s;animation-duration:1.2s;animation-fill-mode:both;animation-iteration-count:infinite;animation-name:skeleton}.pc_skeleton.pc_skeleton--list.pc_skeleton--inactive .pc_skeleton__item,.pc_skeleton.pc_skeleton--paragraph.pc_skeleton--inactive .pc_skeleton__item,.pc_skeleton.pc_skeleton--custom-items.pc_skeleton--inactive .pc_skeleton__item{--ptu-bg-opacity:1;background-color:rgba(var(--pt-gray-2),var(--ptu-bg-opacity))}.pc_skeleton.pc_skeleton--avatar:not(.pc_skeleton--inactive),.pc_skeleton.pc_skeleton--base:not(.pc_skeleton--inactive),.pc_skeleton.pc_skeleton--input:not(.pc_skeleton--inactive),.pc_skeleton.pc_skeleton--button:not(.pc_skeleton--inactive),.pc_skeleton.pc_skeleton--headline:not(.pc_skeleton--inactive),.pc_skeleton.pc_skeleton--custom:not(.pc_skeleton--inactive),.pc_skeleton:not(.pc_skeleton--paragraph):not(.pc_skeleton--list):not(.pc_skeleton--custom-items):not(.pc_skeleton--inactive){--ptu-bg-opacity:1;background-color:rgba(var(--pt-gray-2),var(--ptu-bg-opacity));--ptu-gradient-from-position:0%;--ptu-gradient-from:rgba(var(--pt-gray-2), var(--ptu-from-opacity, 1)) var(--ptu-gradient-from-position);--ptu-gradient-to:rgba(var(--pt-gray-2), 0) var(--ptu-gradient-to-position);--ptu-gradient-stops:var(--ptu-gradient-from), var(--ptu-gradient-to);--ptu-gradient-via-position:50%;--ptu-gradient-to:rgba(var(--pt-gray-05), 0);--ptu-gradient-stops:var(--ptu-gradient-from), rgba(var(--pt-gray-05), var(--ptu-via-opacity, 1)) var(--ptu-gradient-via-position), var(--ptu-gradient-to);--ptu-gradient-to-position:100%;--ptu-gradient-to:rgba(var(--pt-gray-2), var(--ptu-to-opacity, 1)) var(--ptu-gradient-to-position);--ptu-gradient-shape:to left in oklch;--ptu-gradient:var(--ptu-gradient-shape), var(--ptu-gradient-stops);background-image:linear-gradient(var(--ptu-gradient));background-repeat:no-repeat;background-size:100px 100%;background-position-x:-100px;animation-delay:.5s;animation-duration:1.2s;animation-fill-mode:both;animation-iteration-count:infinite;animation-name:skeleton}.pc_skeleton.pc_skeleton--avatar.pc_skeleton--inactive,.pc_skeleton.pc_skeleton--base.pc_skeleton--inactive,.pc_skeleton.pc_skeleton--input.pc_skeleton--inactive,.pc_skeleton.pc_skeleton--button.pc_skeleton--inactive,.pc_skeleton.pc_skeleton--headline.pc_skeleton--inactive,.pc_skeleton.pc_skeleton--custom.pc_skeleton--inactive,.pc_skeleton:not(.pc_skeleton--paragraph):not(.pc_skeleton--list):not(.pc_skeleton--custom-items).pc_skeleton--inactive{--ptu-bg-opacity:1;background-color:rgba(var(--pt-gray-2),var(--ptu-bg-opacity))}@keyframes skeleton{to{background-position-x:calc(100% + 100px)}}\n";
3
- export const addSkeletonCss = () => addCssToHead(`${prefix}s-skeleton`, cssText);
4
- export const skeletonCss = cssText;
3
+ const skeletonId = `${prefix}s-skeleton`;
4
+ const addSkeletonCss = () => addCssToHead(skeletonId, cssText);
5
+ const removeSkeletonCss = () => removeCssFromHead(skeletonId);
6
+ const skeletonCss = cssText;
7
+ export { skeletonId, addSkeletonCss, removeSkeletonCss, skeletonCss };