npm - @pantograph/styles - Versions diffs - 0.0.1 → 0.0.3 - Mend

@pantograph/styles 0.0.1 → 0.0.3

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 (215) hide show

package/dist/accordion.d.ts +3 -2
package/dist/accordion.js +6 -3
package/dist/accordion.umd.cjs +8 -3
package/dist/alert.d.ts +3 -2
package/dist/alert.js +6 -3
package/dist/alert.umd.cjs +8 -3
package/dist/alert_dialog.d.ts +3 -2
package/dist/alert_dialog.js +6 -3
package/dist/alert_dialog.umd.cjs +8 -3
package/dist/avatar.d.ts +3 -2
package/dist/avatar.js +6 -3
package/dist/avatar.umd.cjs +8 -3
package/dist/badge.d.ts +3 -2
package/dist/badge.js +6 -3
package/dist/badge.umd.cjs +8 -3
package/dist/blanket.d.ts +3 -2
package/dist/blanket.js +6 -3
package/dist/blanket.umd.cjs +8 -3
package/dist/breadcrumb.d.ts +3 -2
package/dist/breadcrumb.js +6 -3
package/dist/breadcrumb.umd.cjs +8 -3
package/dist/button.d.ts +3 -2
package/dist/button.js +6 -3
package/dist/button.umd.cjs +8 -3
package/dist/card.d.ts +3 -2
package/dist/card.js +6 -3
package/dist/card.umd.cjs +8 -3
package/dist/checkbox.d.ts +3 -2
package/dist/checkbox.js +6 -3
package/dist/checkbox.umd.cjs +8 -3
package/dist/chip.d.ts +3 -2
package/dist/chip.js +6 -3
package/dist/chip.umd.cjs +8 -3
package/dist/chip_group.d.ts +3 -2
package/dist/chip_group.js +6 -3
package/dist/chip_group.umd.cjs +8 -3
package/dist/color_picker.d.ts +3 -2
package/dist/color_picker.js +6 -3
package/dist/color_picker.umd.cjs +8 -3
package/dist/color_swatch.d.ts +3 -2
package/dist/color_swatch.js +6 -3
package/dist/color_swatch.umd.cjs +8 -3
package/dist/color_swatch_group.d.ts +3 -2
package/dist/color_swatch_group.js +6 -3
package/dist/color_swatch_group.umd.cjs +8 -3
package/dist/color_trigger.d.ts +3 -2
package/dist/color_trigger.js +6 -3
package/dist/color_trigger.umd.cjs +8 -3
package/dist/combobox.d.ts +3 -2
package/dist/combobox.js +6 -3
package/dist/combobox.umd.cjs +8 -3
package/dist/comment.d.ts +3 -2
package/dist/comment.js +6 -3
package/dist/comment.umd.cjs +8 -3
package/dist/data_table.css +1 -1
package/dist/data_table.d.ts +3 -2
package/dist/data_table.js +7 -4
package/dist/data_table.umd.cjs +9 -4
package/dist/dialog.css +1 -1
package/dist/dialog.d.ts +3 -2
package/dist/dialog.js +7 -4
package/dist/dialog.umd.cjs +9 -4
package/dist/divider.d.ts +3 -2
package/dist/divider.js +6 -3
package/dist/divider.umd.cjs +8 -3
package/dist/drop_zone.d.ts +3 -2
package/dist/drop_zone.js +6 -3
package/dist/drop_zone.umd.cjs +8 -3
package/dist/empty.d.ts +3 -2
package/dist/empty.js +6 -3
package/dist/empty.umd.cjs +8 -3
package/dist/form_item.d.ts +5 -0
package/dist/{form.js → form_item.js} +6 -3
package/dist/{form.umd.cjs → form_item.umd.cjs} +9 -4
package/dist/form_validation.d.ts +3 -2
package/dist/form_validation.js +6 -3
package/dist/form_validation.umd.cjs +8 -3
package/dist/go_picker.d.ts +3 -2
package/dist/go_picker.js +6 -3
package/dist/go_picker.umd.cjs +8 -3
package/dist/graphical_object_group.d.ts +5 -0
package/dist/{go_group.js → graphical_object_group.js} +6 -3
package/dist/{go_group.umd.cjs → graphical_object_group.umd.cjs} +9 -4
package/dist/hover_card.d.ts +3 -2
package/dist/hover_card.js +6 -3
package/dist/hover_card.umd.cjs +8 -3
package/dist/icon.d.ts +3 -2
package/dist/icon.js +6 -3
package/dist/icon.umd.cjs +8 -3
package/dist/image.d.ts +3 -2
package/dist/image.js +6 -3
package/dist/image.umd.cjs +8 -3
package/dist/indent_level.d.ts +3 -2
package/dist/indent_level.js +6 -3
package/dist/indent_level.umd.cjs +8 -3
package/dist/index.css +1 -1
package/dist/index.d.ts +6 -4
package/dist/index.js +7 -5
package/dist/index.umd.cjs +18 -12
package/dist/input.css +1 -1
package/dist/input.d.ts +3 -2
package/dist/input.js +7 -4
package/dist/input.umd.cjs +9 -4
package/dist/kbd.d.ts +3 -2
package/dist/kbd.js +6 -3
package/dist/kbd.umd.cjs +8 -3
package/dist/label.d.ts +3 -2
package/dist/label.js +6 -3
package/dist/label.umd.cjs +8 -3
package/dist/link.d.ts +3 -2
package/dist/link.js +6 -3
package/dist/link.umd.cjs +8 -3
package/dist/menu.d.ts +3 -2
package/dist/menu.js +6 -3
package/dist/menu.umd.cjs +8 -3
package/dist/menu_item.css +1 -1
package/dist/menu_item.d.ts +3 -2
package/dist/menu_item.js +7 -4
package/dist/menu_item.umd.cjs +9 -4
package/dist/page_indicator.d.ts +3 -2
package/dist/page_indicator.js +6 -3
package/dist/page_indicator.umd.cjs +8 -3
package/dist/pagination.d.ts +3 -2
package/dist/pagination.js +6 -3
package/dist/pagination.umd.cjs +8 -3
package/dist/popover.d.ts +3 -2
package/dist/popover.js +6 -3
package/dist/popover.umd.cjs +8 -3
package/dist/progress.d.ts +3 -2
package/dist/progress.js +6 -3
package/dist/progress.umd.cjs +8 -3
package/dist/radio_group.d.ts +5 -0
package/dist/{radio.js → radio_group.js} +6 -3
package/dist/{radio.umd.cjs → radio_group.umd.cjs} +9 -4
package/dist/scroll_container.d.ts +3 -2
package/dist/scroll_container.js +6 -3
package/dist/scroll_container.umd.cjs +8 -3
package/dist/segmented.css +1 -1
package/dist/segmented.d.ts +3 -2
package/dist/segmented.js +7 -4
package/dist/segmented.umd.cjs +9 -4
package/dist/select.css +1 -1
package/dist/select.d.ts +3 -2
package/dist/select.js +7 -4
package/dist/select.umd.cjs +9 -4
package/dist/shortcut.d.ts +3 -2
package/dist/shortcut.js +6 -3
package/dist/shortcut.umd.cjs +8 -3
package/dist/skeleton.d.ts +3 -2
package/dist/skeleton.js +6 -3
package/dist/skeleton.umd.cjs +8 -3
package/dist/sort_placeholder.d.ts +5 -0
package/dist/{sortPlaceholder.js → sort_placeholder.js} +6 -3
package/dist/{sortPlaceholder.umd.cjs → sort_placeholder.umd.cjs} +9 -4
package/dist/spinner.d.ts +3 -2
package/dist/spinner.js +6 -3
package/dist/spinner.umd.cjs +8 -3
package/dist/stepper.css +1 -0
package/dist/stepper.d.ts +5 -0
package/dist/stepper.js +7 -0
package/dist/stepper.umd.cjs +12 -0
package/dist/steps.d.ts +3 -2
package/dist/steps.js +6 -3
package/dist/steps.umd.cjs +8 -3
package/dist/switch.d.ts +3 -2
package/dist/switch.js +6 -3
package/dist/switch.umd.cjs +8 -3
package/dist/table.d.ts +3 -2
package/dist/table.js +6 -3
package/dist/table.umd.cjs +8 -3
package/dist/tabs.css +1 -1
package/dist/tabs.d.ts +3 -2
package/dist/tabs.js +7 -4
package/dist/tabs.umd.cjs +9 -4
package/dist/tbody.d.ts +3 -2
package/dist/tbody.js +6 -3
package/dist/tbody.umd.cjs +8 -3
package/dist/tcell.d.ts +3 -2
package/dist/tcell.js +6 -3
package/dist/tcell.umd.cjs +8 -3
package/dist/textarea.css +1 -1
package/dist/textarea.d.ts +3 -2
package/dist/textarea.js +7 -4
package/dist/textarea.umd.cjs +9 -4
package/dist/tfoot.d.ts +3 -2
package/dist/tfoot.js +6 -3
package/dist/tfoot.umd.cjs +8 -3
package/dist/thead.d.ts +3 -2
package/dist/thead.js +6 -3
package/dist/thead.umd.cjs +8 -3
package/dist/toast.d.ts +3 -2
package/dist/toast.js +6 -3
package/dist/toast.umd.cjs +8 -3
package/dist/tooltip.css +1 -0
package/dist/tooltip.d.ts +5 -0
package/dist/tooltip.js +7 -0
package/dist/tooltip.umd.cjs +12 -0
package/dist/tr.d.ts +3 -2
package/dist/tr.js +6 -3
package/dist/tr.umd.cjs +8 -3
package/dist/tree.d.ts +3 -2
package/dist/tree.js +6 -3
package/dist/tree.umd.cjs +8 -3
package/dist/upload.d.ts +3 -2
package/dist/upload.js +6 -3
package/dist/upload.umd.cjs +8 -3
package/package.json +5 -5
package/dist/form.d.ts +0 -4
package/dist/go_group.d.ts +0 -4
package/dist/radio.d.ts +0 -4
package/dist/sortPlaceholder.d.ts +0 -4
/package/dist/{form.css → form_item.css} +0 -0
/package/dist/{go_group.css → graphical_object_group.css} +0 -0
/package/dist/{radio.css → radio_group.css} +0 -0
/package/dist/{sortPlaceholder.css → sort_placeholder.css} +0 -0

package/dist/select.js CHANGED Viewed

@@ -1,4 +1,7 @@
-import { addCssToHead, prefix } from "@pantograph/tokens";
-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";
-export const addSelectCss = () => addCssToHead(`${prefix}s-select`, cssText);
-export const selectCss = cssText;
+import { addCssToHead, removeCssFromHead, prefix } from "@pantograph/tokens";
+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))!important}.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";
+const selectId = `${prefix}s-select`;
+const addSelectCss = () => addCssToHead(selectId, cssText);
+const removeSelectCss = () => removeCssFromHead(selectId);
+const selectCss = cssText;
+export { selectId, addSelectCss, removeSelectCss, selectCss };

package/dist/select.umd.cjs CHANGED Viewed

@@ -1,7 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const { addCssToHead, prefix } = require("@pantograph/tokens");
-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";
-const addSelectCss = () => addCssToHead(`${prefix}s-select`, cssText);
+const { addCssToHead, removeCssFromHead, prefix } = require("@pantograph/tokens");
+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))!important}.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";
+const selectId = `${prefix}s-select`;
+const addSelectCss = () => addCssToHead(selectId, cssText);
+const removeSelectCss = () => removeCssFromHead(selectId);
+const selectCss = cssText;
+exports.selectId = selectId;
 exports.addSelectCss = addSelectCss;
-exports.selectCss = cssText;
+exports.removeSelectCss = removeSelectCss;
+exports.selectCss = selectCss;

package/dist/shortcut.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
-declare const cssText: string;
+declare const shortcutId: string;
 declare const addShortcutCss: () => void;
+declare const removeShortcutCss: () => void;
 declare const shortcutCss: string;
-export { addShortcutCss, shortcutCss };
+export { shortcutId, addShortcutCss, removeShortcutCss, shortcutCss };

package/dist/shortcut.js CHANGED Viewed

@@ -1,4 +1,7 @@
-import { addCssToHead, prefix } from "@pantograph/tokens";
+import { addCssToHead, removeCssFromHead, prefix } from "@pantograph/tokens";
 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";
-export const addShortcutCss = () => addCssToHead(`${prefix}s-shortcut`, cssText);
-export const shortcutCss = cssText;
+const shortcutId = `${prefix}s-shortcut`;
+const addShortcutCss = () => addCssToHead(shortcutId, cssText);
+const removeShortcutCss = () => removeCssFromHead(shortcutId);
+const shortcutCss = cssText;
+export { shortcutId, addShortcutCss, removeShortcutCss, shortcutCss };

package/dist/shortcut.umd.cjs CHANGED Viewed

@@ -1,7 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const { addCssToHead, prefix } = require("@pantograph/tokens");
+const { addCssToHead, removeCssFromHead, prefix } = require("@pantograph/tokens");
 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";
-const addShortcutCss = () => addCssToHead(`${prefix}s-shortcut`, cssText);
+const shortcutId = `${prefix}s-shortcut`;
+const addShortcutCss = () => addCssToHead(shortcutId, cssText);
+const removeShortcutCss = () => removeCssFromHead(shortcutId);
+const shortcutCss = cssText;
+exports.shortcutId = shortcutId;
 exports.addShortcutCss = addShortcutCss;
-exports.shortcutCss = cssText;
+exports.removeShortcutCss = removeShortcutCss;
+exports.shortcutCss = shortcutCss;

package/dist/skeleton.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
-declare const cssText: string;
+declare const skeletonId: string;
 declare const addSkeletonCss: () => void;
+declare const removeSkeletonCss: () => void;
 declare const skeletonCss: string;
-export { addSkeletonCss, skeletonCss };
+export { skeletonId, addSkeletonCss, removeSkeletonCss, skeletonCss };

package/dist/skeleton.js CHANGED Viewed

@@ -1,4 +1,7 @@
-import { addCssToHead, prefix } from "@pantograph/tokens";
+import { addCssToHead, removeCssFromHead, prefix } from "@pantograph/tokens";
 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";
-export const addSkeletonCss = () => addCssToHead(`${prefix}s-skeleton`, cssText);
-export const skeletonCss = cssText;
+const skeletonId = `${prefix}s-skeleton`;
+const addSkeletonCss = () => addCssToHead(skeletonId, cssText);
+const removeSkeletonCss = () => removeCssFromHead(skeletonId);
+const skeletonCss = cssText;
+export { skeletonId, addSkeletonCss, removeSkeletonCss, skeletonCss };

package/dist/skeleton.umd.cjs CHANGED Viewed

@@ -1,7 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const { addCssToHead, prefix } = require("@pantograph/tokens");
+const { addCssToHead, removeCssFromHead, prefix } = require("@pantograph/tokens");
 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";
-const addSkeletonCss = () => addCssToHead(`${prefix}s-skeleton`, cssText);
+const skeletonId = `${prefix}s-skeleton`;
+const addSkeletonCss = () => addCssToHead(skeletonId, cssText);
+const removeSkeletonCss = () => removeCssFromHead(skeletonId);
+const skeletonCss = cssText;
+exports.skeletonId = skeletonId;
 exports.addSkeletonCss = addSkeletonCss;
-exports.skeletonCss = cssText;
+exports.removeSkeletonCss = removeSkeletonCss;
+exports.skeletonCss = skeletonCss;

package/dist/sort_placeholder.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+declare const sortPlaceholderId: string;
+declare const addSortPlaceholderCss: () => void;
+declare const removeSortPlaceholderCss: () => void;
+declare const sortPlaceholderCss: string;
+export { sortPlaceholderId, addSortPlaceholderCss, removeSortPlaceholderCss, sortPlaceholderCss };

package/dist/{sortPlaceholder.js → sort_placeholder.js} RENAMED Viewed

@@ -1,4 +1,7 @@
-import { addCssToHead, prefix } from "@pantograph/tokens";
+import { addCssToHead, removeCssFromHead, prefix } from "@pantograph/tokens";
 const cssText = ".pc_sort_placeholder{box-sizing:border-box;height:100%;min-width:var(--pt-dimension-4800, 96px);flex:1 1 0%;border-width:1px;border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-br),var(--ptu-border-opacity));border-style:dashed;--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg-secondary),var(--ptu-bg-opacity))}.pc_sort_placeholder.pc_sort_placeholder--sm{height:var(--pt-size-sm, 24px);min-height:var(--pt-size-sm, 24px);max-height:var(--pt-size-sm, 24px);border-radius:var(--pt-roundness-sm, 4px)}.pc_sort_placeholder.pc_sort_placeholder--md{height:var(--pt-size-md, 32px);min-height:var(--pt-size-md, 32px);max-height:var(--pt-size-md, 32px);border-radius:var(--pt-roundness-md, 6px)}.pc_sort_placeholder.pc_sort_placeholder--lg{height:var(--pt-size-lg, 40px);min-height:var(--pt-size-lg, 40px);max-height:var(--pt-size-lg, 40px);border-radius:var(--pt-roundness-lg, 8px)}\n";
-export const addSortplaceholderCss = () => addCssToHead(`${prefix}s-sortPlaceholder`, cssText);
-export const sortPlaceholderCss = cssText;
+const sortPlaceholderId = `${prefix}s-sort_placeholder`;
+const addSortPlaceholderCss = () => addCssToHead(sortPlaceholderId, cssText);
+const removeSortPlaceholderCss = () => removeCssFromHead(sortPlaceholderId);
+const sortPlaceholderCss = cssText;
+export { sortPlaceholderId, addSortPlaceholderCss, removeSortPlaceholderCss, sortPlaceholderCss };

package/dist/{sortPlaceholder.umd.cjs → sort_placeholder.umd.cjs} RENAMED Viewed

@@ -1,7 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const { addCssToHead, prefix } = require("@pantograph/tokens");
+const { addCssToHead, removeCssFromHead, prefix } = require("@pantograph/tokens");
 const cssText = ".pc_sort_placeholder{box-sizing:border-box;height:100%;min-width:var(--pt-dimension-4800, 96px);flex:1 1 0%;border-width:1px;border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-br),var(--ptu-border-opacity));border-style:dashed;--ptu-bg-opacity:1;background-color:rgba(var(--pt-bg-secondary),var(--ptu-bg-opacity))}.pc_sort_placeholder.pc_sort_placeholder--sm{height:var(--pt-size-sm, 24px);min-height:var(--pt-size-sm, 24px);max-height:var(--pt-size-sm, 24px);border-radius:var(--pt-roundness-sm, 4px)}.pc_sort_placeholder.pc_sort_placeholder--md{height:var(--pt-size-md, 32px);min-height:var(--pt-size-md, 32px);max-height:var(--pt-size-md, 32px);border-radius:var(--pt-roundness-md, 6px)}.pc_sort_placeholder.pc_sort_placeholder--lg{height:var(--pt-size-lg, 40px);min-height:var(--pt-size-lg, 40px);max-height:var(--pt-size-lg, 40px);border-radius:var(--pt-roundness-lg, 8px)}\n";
-const addSortplaceholderCss = () => addCssToHead(`${prefix}s-sortPlaceholder`, cssText);
-exports.addSortplaceholderCss = addSortplaceholderCss;
-exports.sortPlaceholderCss = cssText;
+const sortPlaceholderId = `${prefix}s-sort_placeholder`;
+const addSortPlaceholderCss = () => addCssToHead(sortPlaceholderId, cssText);
+const removeSortPlaceholderCss = () => removeCssFromHead(sortPlaceholderId);
+const sortPlaceholderCss = cssText;
+exports.sortPlaceholderId = sortPlaceholderId;
+exports.addSortPlaceholderCss = addSortPlaceholderCss;
+exports.removeSortPlaceholderCss = removeSortPlaceholderCss;
+exports.sortPlaceholderCss = sortPlaceholderCss;

package/dist/spinner.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
-declare const cssText: string;
+declare const spinnerId: string;
 declare const addSpinnerCss: () => void;
+declare const removeSpinnerCss: () => void;
 declare const spinnerCss: string;
-export { addSpinnerCss, spinnerCss };
+export { spinnerId, addSpinnerCss, removeSpinnerCss, spinnerCss };

package/dist/spinner.js CHANGED Viewed

@@ -1,4 +1,7 @@
-import { addCssToHead, prefix } from "@pantograph/tokens";
+import { addCssToHead, removeCssFromHead, prefix } from "@pantograph/tokens";
 const cssText = ".pc_spinner{width:fit-content;display:flex;flex-direction:column;align-items:center;justify-content:center;--ptu-text-opacity:1;color:rgba(var(--pt-primary-5),var(--ptu-text-opacity))}.pc_spinner.pc_spinner--sm{gap:var(--pt-dimension-400, 8px)}.pc_spinner.pc_spinner--sm .pc_spinner__text{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_spinner.pc_spinner--xsm{gap:var(--pt-dimension-300, 6px)}.pc_spinner.pc_spinner--xsm .pc_spinner__text{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_spinner.pc_spinner--2xsm{gap:var(--pt-dimension-300, 6px)}.pc_spinner.pc_spinner--2xsm .pc_spinner__text{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_spinner.pc_spinner--3xsm{gap:var(--pt-dimension-200, 4px)}.pc_spinner.pc_spinner--3xsm .pc_spinner__text{font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-500, 10px);line-height:var(--pt-lineheight-8, 12px);letter-spacing:0}.pc_spinner.pc_spinner--icon .pc_spinner__icon,.pc_spinner.pc_spinner--icon.pc_spinner__icon{transform-origin:center;transform-box:border-box;animation:spin 1s linear infinite}.pc_spinner.pc_spinner--icon .pc_spinner__icon svg,.pc_spinner.pc_spinner--icon.pc_spinner__icon svg,.pc_spinner.pc_spinner--icon .pc_spinner__icon svg path,.pc_spinner.pc_spinner--icon.pc_spinner__icon svg path{stroke-width:unset}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n";
-export const addSpinnerCss = () => addCssToHead(`${prefix}s-spinner`, cssText);
-export const spinnerCss = cssText;
+const spinnerId = `${prefix}s-spinner`;
+const addSpinnerCss = () => addCssToHead(spinnerId, cssText);
+const removeSpinnerCss = () => removeCssFromHead(spinnerId);
+const spinnerCss = cssText;
+export { spinnerId, addSpinnerCss, removeSpinnerCss, spinnerCss };

package/dist/spinner.umd.cjs CHANGED Viewed

@@ -1,7 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const { addCssToHead, prefix } = require("@pantograph/tokens");
+const { addCssToHead, removeCssFromHead, prefix } = require("@pantograph/tokens");
 const cssText = ".pc_spinner{width:fit-content;display:flex;flex-direction:column;align-items:center;justify-content:center;--ptu-text-opacity:1;color:rgba(var(--pt-primary-5),var(--ptu-text-opacity))}.pc_spinner.pc_spinner--sm{gap:var(--pt-dimension-400, 8px)}.pc_spinner.pc_spinner--sm .pc_spinner__text{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_spinner.pc_spinner--xsm{gap:var(--pt-dimension-300, 6px)}.pc_spinner.pc_spinner--xsm .pc_spinner__text{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_spinner.pc_spinner--2xsm{gap:var(--pt-dimension-300, 6px)}.pc_spinner.pc_spinner--2xsm .pc_spinner__text{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_spinner.pc_spinner--3xsm{gap:var(--pt-dimension-200, 4px)}.pc_spinner.pc_spinner--3xsm .pc_spinner__text{font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-500, 10px);line-height:var(--pt-lineheight-8, 12px);letter-spacing:0}.pc_spinner.pc_spinner--icon .pc_spinner__icon,.pc_spinner.pc_spinner--icon.pc_spinner__icon{transform-origin:center;transform-box:border-box;animation:spin 1s linear infinite}.pc_spinner.pc_spinner--icon .pc_spinner__icon svg,.pc_spinner.pc_spinner--icon.pc_spinner__icon svg,.pc_spinner.pc_spinner--icon .pc_spinner__icon svg path,.pc_spinner.pc_spinner--icon.pc_spinner__icon svg path{stroke-width:unset}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n";
-const addSpinnerCss = () => addCssToHead(`${prefix}s-spinner`, cssText);
+const spinnerId = `${prefix}s-spinner`;
+const addSpinnerCss = () => addCssToHead(spinnerId, cssText);
+const removeSpinnerCss = () => removeCssFromHead(spinnerId);
+const spinnerCss = cssText;
+exports.spinnerId = spinnerId;
 exports.addSpinnerCss = addSpinnerCss;
-exports.spinnerCss = cssText;
+exports.removeSpinnerCss = removeSpinnerCss;
+exports.spinnerCss = spinnerCss;

package/dist/stepper.css ADDED Viewed

@@ -0,0 +1 @@

+ .pc_stepper{display:inline-flex;align-items:center;gap:var(--pt-dimension-200, 4px)}.pc_stepper .pc_stepper__value{display:flex;align-items:center;justify-content:center;--ptu-text-opacity:1;color:rgba(var(--pt-fg),var(--ptu-text-opacity))}.pc_stepper.pc_stepper--sm .pc_stepper__value{min-width:var(--pt-size-sm, 24px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_stepper.pc_stepper--md .pc_stepper__value{min-width:var(--pt-size-md, 32px);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_stepper.pc_stepper--lg .pc_stepper__value{min-width:var(--pt-size-lg, 40px);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}

package/dist/stepper.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+declare const stepperId: string;
+declare const addStepperCss: () => void;
+declare const removeStepperCss: () => void;
+declare const stepperCss: string;
+export { stepperId, addStepperCss, removeStepperCss, stepperCss };

package/dist/stepper.js ADDED Viewed

@@ -0,0 +1,7 @@
+import { addCssToHead, removeCssFromHead, prefix } from "@pantograph/tokens";
+const cssText = ".pc_stepper{display:inline-flex;align-items:center;gap:var(--pt-dimension-200, 4px)}.pc_stepper .pc_stepper__value{display:flex;align-items:center;justify-content:center;--ptu-text-opacity:1;color:rgba(var(--pt-fg),var(--ptu-text-opacity))}.pc_stepper.pc_stepper--sm .pc_stepper__value{min-width:var(--pt-size-sm, 24px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_stepper.pc_stepper--md .pc_stepper__value{min-width:var(--pt-size-md, 32px);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_stepper.pc_stepper--lg .pc_stepper__value{min-width:var(--pt-size-lg, 40px);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}\n";
+const stepperId = `${prefix}s-stepper`;
+const addStepperCss = () => addCssToHead(stepperId, cssText);
+const removeStepperCss = () => removeCssFromHead(stepperId);
+const stepperCss = cssText;
+export { stepperId, addStepperCss, removeStepperCss, stepperCss };

package/dist/stepper.umd.cjs ADDED Viewed

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const { addCssToHead, removeCssFromHead, prefix } = require("@pantograph/tokens");
+const cssText = ".pc_stepper{display:inline-flex;align-items:center;gap:var(--pt-dimension-200, 4px)}.pc_stepper .pc_stepper__value{display:flex;align-items:center;justify-content:center;--ptu-text-opacity:1;color:rgba(var(--pt-fg),var(--ptu-text-opacity))}.pc_stepper.pc_stepper--sm .pc_stepper__value{min-width:var(--pt-size-sm, 24px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-regular, regular);font-size:var(--pt-dimension-600, 12px);line-height:var(--pt-lineheight-7, 14px);letter-spacing:0}.pc_stepper.pc_stepper--md .pc_stepper__value{min-width:var(--pt-size-md, 32px);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_stepper.pc_stepper--lg .pc_stepper__value{min-width:var(--pt-size-lg, 40px);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}\n";
+const stepperId = `${prefix}s-stepper`;
+const addStepperCss = () => addCssToHead(stepperId, cssText);
+const removeStepperCss = () => removeCssFromHead(stepperId);
+const stepperCss = cssText;
+exports.stepperId = stepperId;
+exports.addStepperCss = addStepperCss;
+exports.removeStepperCss = removeStepperCss;
+exports.stepperCss = stepperCss;

package/dist/steps.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
-declare const cssText: string;
+declare const stepsId: string;
 declare const addStepsCss: () => void;
+declare const removeStepsCss: () => void;
 declare const stepsCss: string;
-export { addStepsCss, stepsCss };
+export { stepsId, addStepsCss, removeStepsCss, stepsCss };

package/dist/steps.js CHANGED Viewed

@@ -1,4 +1,7 @@
-import { addCssToHead, prefix } from "@pantograph/tokens";
+import { addCssToHead, removeCssFromHead, prefix } from "@pantograph/tokens";
 const cssText = ".pc_steps{display:grid;gap:var(--pt-dimension-200, 4px)}.pc_steps.pc_steps--vertical{grid-template-columns:repeat(1,minmax(0,1fr))}.pc_steps__step{display:flex;gap:var(--pt-dimension-400, 8px);outline:0}.pc_steps__step:not(.pc_steps__step--vertical){display:flex;flex-direction:column}.pc_steps__step:not(.pc_steps__step--vertical) .pc_steps__step__line{height:var(--pt-dimension-100, 2px);min-height:var(--pt-dimension-100, 2px);width:100%}.pc_steps__step.pc_steps__step--vertical{flex-direction:row;align-items:center}.pc_steps__step.pc_steps__step--vertical .pc_steps__step__line{height:100%;min-height:var(--pt-dimension-1000, 20px);width:var(--pt-dimension-100, 2px);min-width:var(--pt-dimension-100, 2px)}.pc_steps__step.pc_steps__step--vertical .pc_steps__step__container{padding-top:var(--pt-dimension-300, 6px);padding-bottom:var(--pt-dimension-300, 6px)}.pc_steps__step.pc_steps__step--completed{--ptc-steps-step-title-fg: rgba(var(--pt-fg))}.pc_steps__step.pc_steps__step--completed .pc_steps__step__leading:not(.pc_steps__step__leading--icon){--ptc-steps-step-bg: rgba(var(--pt-primary-fill));--ptc-steps-step-fg: rgba(var(--pt-primary-fg-subtle));--ptc-steps-step-br: rgba(var(--pt-primary-br))}.pc_steps__step.pc_steps__step--completed .pc_steps__step__leading.pc_steps__step__leading--icon{--ptc-steps-step-fg: rgba(var(--pt-primary-fill))}.pc_steps__step:not(.pc_steps__step--completed) .pc_steps__step__leading:not(.pc_steps__step__leading--icon){--ptc-steps-step-bg: \"transparent\"}.pc_steps__step[data-completed]{--ptc-steps-step-line-bg: rgba(var(--pt-primary-br))}.pc_steps__step:not([data-completed]){--ptc-steps-step-line-bg: rgba(var(--pt-br))}.pc_steps__step.pc_steps__step--current{--ptc-steps-step-title-fg: rgba(var(--pt-fg))}.pc_steps__step.pc_steps__step--current .pc_steps__step__leading:not(.pc_steps__step__leading--icon){--ptc-steps-step-fg: rgba(var(--pt-primary-fg));--ptc-steps-step-br: rgba(var(--pt-primary-br))}.pc_steps__step.pc_steps__step--current .pc_steps__step__leading.pc_steps__step__leading--icon{--ptc-steps-step-fg: rgba(var(--pt-primary-fg))}.pc_steps__step.pc_steps__step--upcoming{--ptc-steps-step-title-fg: rgba(var(--pt-fg-subtle))}.pc_steps__step.pc_steps__step--upcoming .pc_steps__step__leading:not(.pc_steps__step__leading--icon){--ptc-steps-step-fg: rgba(var(--pt-fg-subtle));--ptc-steps-step-br: rgba(var(--pt-br))}.pc_steps__step.pc_steps__step--upcoming .pc_steps__step__leading.pc_steps__step__leading--icon{--ptc-steps-step-fg: rgba(var(--pt-fg-subtle))}.pc_steps__step.pc_steps__step--error{--ptc-steps-step-title-fg: rgba(var(--pt-danger-fg))}.pc_steps__step.pc_steps__step--error .pc_steps__step__leading:not(.pc_steps__step__leading--icon){--ptc-steps-step-fg: rgba(var(--pt-danger-fg));--ptc-steps-step-br: rgba(var(--pt-danger-br))}.pc_steps__step.pc_steps__step--error .pc_steps__step__leading.pc_steps__step__leading--icon{--ptc-steps-step-fg: rgba(var(--pt-danger-fg))}.pc_steps__step .pc_steps__step__leading{width:var(--pt-dimension-1000, 20px);height:var(--pt-dimension-1000, 20px);min-width:var(--pt-dimension-1000, 20px);display:flex;align-items:center;justify-content:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--pt-roundness-full, 88px);background:var(--ptc-steps-step-bg);color:var(--ptc-steps-step-fg)}.pc_steps__step .pc_steps__step__leading .pc_steps__step__leading__number{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-700, 14px);line-height:var(--pt-lineheight-6, 16px);letter-spacing:0}.pc_steps__step .pc_steps__step__leading:not(.pc_steps__step__leading--icon){border-width:1px;border-style:solid;border-color:var(--ptc-steps-step-br)}.pc_steps__step .pc_steps__step__line{background:var(--ptc-steps-step-line-bg)}.pc_steps__step .pc_steps__step__container{width:100%;display:flex;gap:var(--pt-dimension-300, 6px)}.pc_steps__step .pc_steps__step__content{flex:1 1 0%;text-align:start;max-width:calc(100% - var(--pt-dimension-1000) - var(--pt-dimension-300))}.pc_steps__step .pc_steps__step__title{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-top:var(--pt-dimension-100, 2px);padding-bottom:var(--pt-dimension-100, 2px);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;color:var(--ptc-steps-step-title-fg)}.pc_steps__step .pc_steps__step__description{width:100%;--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_steps__step:disabled{cursor:not-allowed}.pc_steps__step:not(:disabled){cursor:pointer}\n";
-export const addStepsCss = () => addCssToHead(`${prefix}s-steps`, cssText);
-export const stepsCss = cssText;
+const stepsId = `${prefix}s-steps`;
+const addStepsCss = () => addCssToHead(stepsId, cssText);
+const removeStepsCss = () => removeCssFromHead(stepsId);
+const stepsCss = cssText;
+export { stepsId, addStepsCss, removeStepsCss, stepsCss };

package/dist/steps.umd.cjs CHANGED Viewed

@@ -1,7 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const { addCssToHead, prefix } = require("@pantograph/tokens");
+const { addCssToHead, removeCssFromHead, prefix } = require("@pantograph/tokens");
 const cssText = ".pc_steps{display:grid;gap:var(--pt-dimension-200, 4px)}.pc_steps.pc_steps--vertical{grid-template-columns:repeat(1,minmax(0,1fr))}.pc_steps__step{display:flex;gap:var(--pt-dimension-400, 8px);outline:0}.pc_steps__step:not(.pc_steps__step--vertical){display:flex;flex-direction:column}.pc_steps__step:not(.pc_steps__step--vertical) .pc_steps__step__line{height:var(--pt-dimension-100, 2px);min-height:var(--pt-dimension-100, 2px);width:100%}.pc_steps__step.pc_steps__step--vertical{flex-direction:row;align-items:center}.pc_steps__step.pc_steps__step--vertical .pc_steps__step__line{height:100%;min-height:var(--pt-dimension-1000, 20px);width:var(--pt-dimension-100, 2px);min-width:var(--pt-dimension-100, 2px)}.pc_steps__step.pc_steps__step--vertical .pc_steps__step__container{padding-top:var(--pt-dimension-300, 6px);padding-bottom:var(--pt-dimension-300, 6px)}.pc_steps__step.pc_steps__step--completed{--ptc-steps-step-title-fg: rgba(var(--pt-fg))}.pc_steps__step.pc_steps__step--completed .pc_steps__step__leading:not(.pc_steps__step__leading--icon){--ptc-steps-step-bg: rgba(var(--pt-primary-fill));--ptc-steps-step-fg: rgba(var(--pt-primary-fg-subtle));--ptc-steps-step-br: rgba(var(--pt-primary-br))}.pc_steps__step.pc_steps__step--completed .pc_steps__step__leading.pc_steps__step__leading--icon{--ptc-steps-step-fg: rgba(var(--pt-primary-fill))}.pc_steps__step:not(.pc_steps__step--completed) .pc_steps__step__leading:not(.pc_steps__step__leading--icon){--ptc-steps-step-bg: \"transparent\"}.pc_steps__step[data-completed]{--ptc-steps-step-line-bg: rgba(var(--pt-primary-br))}.pc_steps__step:not([data-completed]){--ptc-steps-step-line-bg: rgba(var(--pt-br))}.pc_steps__step.pc_steps__step--current{--ptc-steps-step-title-fg: rgba(var(--pt-fg))}.pc_steps__step.pc_steps__step--current .pc_steps__step__leading:not(.pc_steps__step__leading--icon){--ptc-steps-step-fg: rgba(var(--pt-primary-fg));--ptc-steps-step-br: rgba(var(--pt-primary-br))}.pc_steps__step.pc_steps__step--current .pc_steps__step__leading.pc_steps__step__leading--icon{--ptc-steps-step-fg: rgba(var(--pt-primary-fg))}.pc_steps__step.pc_steps__step--upcoming{--ptc-steps-step-title-fg: rgba(var(--pt-fg-subtle))}.pc_steps__step.pc_steps__step--upcoming .pc_steps__step__leading:not(.pc_steps__step__leading--icon){--ptc-steps-step-fg: rgba(var(--pt-fg-subtle));--ptc-steps-step-br: rgba(var(--pt-br))}.pc_steps__step.pc_steps__step--upcoming .pc_steps__step__leading.pc_steps__step__leading--icon{--ptc-steps-step-fg: rgba(var(--pt-fg-subtle))}.pc_steps__step.pc_steps__step--error{--ptc-steps-step-title-fg: rgba(var(--pt-danger-fg))}.pc_steps__step.pc_steps__step--error .pc_steps__step__leading:not(.pc_steps__step__leading--icon){--ptc-steps-step-fg: rgba(var(--pt-danger-fg));--ptc-steps-step-br: rgba(var(--pt-danger-br))}.pc_steps__step.pc_steps__step--error .pc_steps__step__leading.pc_steps__step__leading--icon{--ptc-steps-step-fg: rgba(var(--pt-danger-fg))}.pc_steps__step .pc_steps__step__leading{width:var(--pt-dimension-1000, 20px);height:var(--pt-dimension-1000, 20px);min-width:var(--pt-dimension-1000, 20px);display:flex;align-items:center;justify-content:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--pt-roundness-full, 88px);background:var(--ptc-steps-step-bg);color:var(--ptc-steps-step-fg)}.pc_steps__step .pc_steps__step__leading .pc_steps__step__leading__number{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-700, 14px);line-height:var(--pt-lineheight-6, 16px);letter-spacing:0}.pc_steps__step .pc_steps__step__leading:not(.pc_steps__step__leading--icon){border-width:1px;border-style:solid;border-color:var(--ptc-steps-step-br)}.pc_steps__step .pc_steps__step__line{background:var(--ptc-steps-step-line-bg)}.pc_steps__step .pc_steps__step__container{width:100%;display:flex;gap:var(--pt-dimension-300, 6px)}.pc_steps__step .pc_steps__step__content{flex:1 1 0%;text-align:start;max-width:calc(100% - var(--pt-dimension-1000) - var(--pt-dimension-300))}.pc_steps__step .pc_steps__step__title{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-top:var(--pt-dimension-100, 2px);padding-bottom:var(--pt-dimension-100, 2px);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;color:var(--ptc-steps-step-title-fg)}.pc_steps__step .pc_steps__step__description{width:100%;--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_steps__step:disabled{cursor:not-allowed}.pc_steps__step:not(:disabled){cursor:pointer}\n";
-const addStepsCss = () => addCssToHead(`${prefix}s-steps`, cssText);
+const stepsId = `${prefix}s-steps`;
+const addStepsCss = () => addCssToHead(stepsId, cssText);
+const removeStepsCss = () => removeCssFromHead(stepsId);
+const stepsCss = cssText;
+exports.stepsId = stepsId;
 exports.addStepsCss = addStepsCss;
-exports.stepsCss = cssText;
+exports.removeStepsCss = removeStepsCss;
+exports.stepsCss = stepsCss;

package/dist/switch.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
-declare const cssText: string;
+declare const switchId: string;
 declare const addSwitchCss: () => void;
+declare const removeSwitchCss: () => void;
 declare const switchCss: string;
-export { addSwitchCss, switchCss };
+export { switchId, addSwitchCss, removeSwitchCss, switchCss };

package/dist/switch.js CHANGED Viewed

@@ -1,4 +1,7 @@
-import { addCssToHead, prefix } from "@pantograph/tokens";
+import { addCssToHead, removeCssFromHead, prefix } from "@pantograph/tokens";
 const cssText = ".pc_switch{position:relative;overflow:hidden;border-radius:var(--pt-roundness-full, 88px);border-style:none;padding:var(--pt-dimension-100, 2px);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;--ptc-switch-inner-start-padding: calc(var(--ptc-switch-thumb-width) + var(--pt-dimension-200))}.pc_switch .pc_switch__inner{display:block;height:100%;overflow:hidden;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-property:all}.pc_switch .pc_switch__inner .pc_switch__inner__unchecked{margin-top:calc(var(--ptc-switch-thumb-height) * -1)}.pc_switch .pc_switch__inner .pc_switch__inner__checked,.pc_switch .pc_switch__inner .pc_switch__inner__unchecked{text-align:start;pointer-events:none;height:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-property:all;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;line-height:var(--ptc-switch-thumb-height);color:var(--ptc-switch-inner-color)}.pc_switch[data-state=checked] .pc_switch__thumb{inset-inline-start:calc(100% - calc(var(--ptc-switch-thumb-width) + var(--pt-dimension-100)))}.pc_switch[data-state=checked] .pc_switch__inner{padding-inline-end:var(--ptc-switch-inner-start-padding);padding-inline-start:var(--ptc-switch-inner-end-padding)}.pc_switch[data-state=checked] .pc_switch__inner .pc_switch__inner__checked{margin-inline-start:var(--pt-dimension-0, 0px);margin-inline-end:var(--pt-dimension-0, 0px)}.pc_switch[data-state=checked] .pc_switch__inner .pc_switch__inner__unchecked{margin-inline-start:calc(100% - calc(var(--ptc-switch-thumb-height) + var(--pt-dimension-200)) + calc(var(--ptc-switch-inner-start-padding) * 2));margin-inline-end:calc(-100% + calc(var(--ptc-switch-thumb-height) + var(--pt-dimension-200)) - calc(var(--ptc-switch-inner-start-padding) * 2))}.pc_switch[data-state=unchecked] .pc_switch__thumb{inset-inline-start:var(--pt-dimension-100, 2px)}.pc_switch[data-state=unchecked] .pc_switch__inner{padding-inline-start:var(--ptc-switch-inner-start-padding);padding-inline-end:var(--ptc-switch-inner-end-padding)}.pc_switch[data-state=unchecked] .pc_switch__inner .pc_switch__inner__unchecked{margin-inline-start:var(--pt-dimension-0, 0px);margin-inline-end:var(--pt-dimension-0, 0px)}.pc_switch[data-state=unchecked] .pc_switch__inner .pc_switch__inner__checked{margin-inline-start:calc(-100% + calc(var(--ptc-switch-thumb-height) + var(--pt-dimension-200)) - calc(var(--ptc-switch-inner-start-padding) * 2));margin-inline-end:calc(100% - calc(var(--ptc-switch-thumb-height) + var(--pt-dimension-200)) + calc(var(--ptc-switch-inner-start-padding) * 2))}.pc_switch.pc_switch--2xsm{min-width:var(--pt-dimension-1400, 28px);height:var(--pt-dimension-800, 16px);min-height:var(--pt-dimension-800, 16px);max-height:var(--pt-dimension-800, 16px);--ptc-switch-thumb-width: var(--pt-dimension-600);--ptc-switch-thumb-height: var(--pt-dimension-600);--ptc-switch-inner-end-padding: var(--pt-dimension-0)}.pc_switch.pc_switch--2xsm+.pc_switch__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_switch.pc_switch--xsm{min-width:var(--pt-dimension-1900, 38px);height:var(--pt-dimension-1000, 20px);min-height:var(--pt-dimension-1000, 20px);max-height:var(--pt-dimension-1000, 20px);--ptc-switch-thumb-width: var(--pt-dimension-800);--ptc-switch-thumb-height: var(--pt-dimension-800)}.pc_switch.pc_switch--xsm+.pc_switch__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_switch.pc_switch--sm{min-width:var(--pt-dimension-2400, 48px);height:var(--pt-dimension-1200, 24px);min-height:var(--pt-dimension-1200, 24px);max-height:var(--pt-dimension-1200, 24px);--ptc-switch-thumb-width: var(--pt-dimension-1000);--ptc-switch-thumb-height: var(--pt-dimension-1000)}.pc_switch.pc_switch--sm+.pc_switch__label{margin-inline-start:var(--pt-dimension-400, 8px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-medium, medium);font-size:var(--pt-dimension-800, 16px);line-height:var(--pt-lineheight-5, 18px);letter-spacing:0}.pc_switch.pc_switch--xsm:not(.pc_switch--inner-icon):not(.pc_switch--inner-text),.pc_switch.pc_switch--sm:not(.pc_switch--inner-icon):not(.pc_switch--inner-text){--ptc-switch-inner-end-padding: var(--pt-dimension-0)}.pc_switch.pc_switch--xsm.pc_switch--inner-icon,.pc_switch.pc_switch--sm.pc_switch--inner-icon{--ptc-switch-inner-end-padding: var(--pt-dimension-100)}.pc_switch.pc_switch--xsm.pc_switch--inner-text,.pc_switch.pc_switch--sm.pc_switch--inner-text{--ptc-switch-inner-end-padding: var(--pt-dimension-200)}.pc_switch:not(:disabled){cursor:pointer}.pc_switch:not(:disabled) .pc_switch__thumb{--ptu-bg-opacity:1;background-color:rgba(var(--pt-gray-fg-subtle),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)}.pc_switch:not(:disabled)[data-state=checked]{--ptc-switch-inner-color: rgba(var(--pt-primary-oncolor));--ptc-switch-thumb-color: rgba(var(--pt-primary-fg));--ptu-bg-opacity:1;background-color:rgba(var(--pt-primary-5),var(--ptu-bg-opacity))}.pc_switch:not(:disabled)[data-state=checked]:hover{--ptu-bg-opacity:1;background-color:rgba(var(--pt-primary-6),var(--ptu-bg-opacity));--ptc-switch-thumb-color: rgba(var(--pt-primary-fg-target))}.pc_switch:not(:disabled)[data-state=checked]:active{--ptu-bg-opacity:1;background-color:rgba(var(--pt-primary-7),var(--ptu-bg-opacity));--ptc-switch-thumb-color: rgba(var(--pt-primary-fg-trigger));--ptc-switch-inner-end-padding: var(--pt-dimension-0)}.pc_switch:not(:disabled)[data-state=unchecked]{--ptc-switch-inner-color: rgba(var(--pt-gray-6));--ptc-switch-thumb-color: rgba(var(--pt-gray-fg));--ptu-bg-opacity:1;background-color:rgba(var(--pt-gray-1),var(--ptu-bg-opacity))}.pc_switch:not(:disabled)[data-state=unchecked]:hover{--ptc-switch-inner-color: rgba(var(--pt-gray-7));--ptu-bg-opacity:1;background-color:rgba(var(--pt-gray-2),var(--ptu-bg-opacity))}.pc_switch:not(:disabled)[data-state=unchecked]:active{--ptc-switch-inner-color: rgba(var(--pt-gray-8));--ptu-bg-opacity:1;background-color:rgba(var(--pt-gray-3),var(--ptu-bg-opacity));--ptc-switch-inner-end-padding: var(--pt-dimension-0)}.pc_switch:not(:disabled)+.pc_switch__label{--ptc-switch-label-color: rgba(var(--pt-gray-8))}.pc_switch:not(:disabled):hover+.pc_switch__label{--ptc-switch-label-color: rgba(var(--pt-gray-9))}.pc_switch: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_switch:not(:disabled):active+.pc_switch__label{--ptc-switch-label-color: rgba(var(--pt-gray-10))}.pc_switch:not(:disabled):active.pc_switch--2xsm{--ptc-switch-thumb-width: var(--pt-dimension-700)}.pc_switch:not(:disabled):active.pc_switch--xsm{--ptc-switch-thumb-width: var(--pt-dimension-1000)}.pc_switch:not(:disabled):active.pc_switch--sm{--ptc-switch-thumb-width: var(--pt-dimension-1200)}.pc_switch:disabled{cursor:not-allowed}.pc_switch:disabled+.pc_switch__label{cursor:not-allowed;--ptc-switch-label-color: rgba(var(--pt-gray-4))}.pc_switch:disabled[data-state=checked]{--ptu-bg-opacity:1;background-color:rgba(var(--pt-gray-2),var(--ptu-bg-opacity));--ptc-switch-inner-color: rgba(var(--pt-gray-4));--ptc-switch-thumb-color: rgba(var(--pt-disable-fg))}.pc_switch:disabled[data-state=checked] .pc_switch__thumb{--ptu-bg-opacity:1;background-color:rgba(var(--pt-gray-fg-subtle),var(--ptu-bg-opacity))}.pc_switch:disabled[data-state=unchecked]{border-width:1px;border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-disable-fill),var(--ptu-border-opacity));background-color:transparent;--ptc-switch-inner-color: rgba(var(--pt-gray-3));--ptc-switch-thumb-color: rgba(var(--pt-disable-fg))}.pc_switch:disabled[data-state=unchecked] .pc_switch__thumb{inset-inline-start:1px;top:1px;--ptu-bg-opacity:1;background-color:rgba(var(--pt-disable-fill),var(--ptu-bg-opacity))}.pc_switch .pc_switch__thumb{position:absolute;top:var(--pt-dimension-100, 2px);display:block;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:var(--pt-roundness-full, 88px);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-switch-thumb-width);min-width:var(--ptc-switch-thumb-width);max-width:var(--ptc-switch-thumb-width);height:var(--ptc-switch-thumb-height);min-height:var(--ptc-switch-thumb-height);max-height:var(--ptc-switch-thumb-height);color:var(--ptc-switch-thumb-color)}.pc_switch+.pc_switch__label{cursor:pointer;color:var(--ptc-switch-label-color)}.pc_switch__root{display:inline-flex;align-items:center}\n";
-export const addSwitchCss = () => addCssToHead(`${prefix}s-switch`, cssText);
-export const switchCss = cssText;
+const switchId = `${prefix}s-switch`;
+const addSwitchCss = () => addCssToHead(switchId, cssText);
+const removeSwitchCss = () => removeCssFromHead(switchId);
+const switchCss = cssText;
+export { switchId, addSwitchCss, removeSwitchCss, switchCss };

package/dist/switch.umd.cjs CHANGED Viewed

@@ -1,7 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const { addCssToHead, prefix } = require("@pantograph/tokens");
+const { addCssToHead, removeCssFromHead, prefix } = require("@pantograph/tokens");
 const cssText = ".pc_switch{position:relative;overflow:hidden;border-radius:var(--pt-roundness-full, 88px);border-style:none;padding:var(--pt-dimension-100, 2px);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;--ptc-switch-inner-start-padding: calc(var(--ptc-switch-thumb-width) + var(--pt-dimension-200))}.pc_switch .pc_switch__inner{display:block;height:100%;overflow:hidden;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-property:all}.pc_switch .pc_switch__inner .pc_switch__inner__unchecked{margin-top:calc(var(--ptc-switch-thumb-height) * -1)}.pc_switch .pc_switch__inner .pc_switch__inner__checked,.pc_switch .pc_switch__inner .pc_switch__inner__unchecked{text-align:start;pointer-events:none;height:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-property:all;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;line-height:var(--ptc-switch-thumb-height);color:var(--ptc-switch-inner-color)}.pc_switch[data-state=checked] .pc_switch__thumb{inset-inline-start:calc(100% - calc(var(--ptc-switch-thumb-width) + var(--pt-dimension-100)))}.pc_switch[data-state=checked] .pc_switch__inner{padding-inline-end:var(--ptc-switch-inner-start-padding);padding-inline-start:var(--ptc-switch-inner-end-padding)}.pc_switch[data-state=checked] .pc_switch__inner .pc_switch__inner__checked{margin-inline-start:var(--pt-dimension-0, 0px);margin-inline-end:var(--pt-dimension-0, 0px)}.pc_switch[data-state=checked] .pc_switch__inner .pc_switch__inner__unchecked{margin-inline-start:calc(100% - calc(var(--ptc-switch-thumb-height) + var(--pt-dimension-200)) + calc(var(--ptc-switch-inner-start-padding) * 2));margin-inline-end:calc(-100% + calc(var(--ptc-switch-thumb-height) + var(--pt-dimension-200)) - calc(var(--ptc-switch-inner-start-padding) * 2))}.pc_switch[data-state=unchecked] .pc_switch__thumb{inset-inline-start:var(--pt-dimension-100, 2px)}.pc_switch[data-state=unchecked] .pc_switch__inner{padding-inline-start:var(--ptc-switch-inner-start-padding);padding-inline-end:var(--ptc-switch-inner-end-padding)}.pc_switch[data-state=unchecked] .pc_switch__inner .pc_switch__inner__unchecked{margin-inline-start:var(--pt-dimension-0, 0px);margin-inline-end:var(--pt-dimension-0, 0px)}.pc_switch[data-state=unchecked] .pc_switch__inner .pc_switch__inner__checked{margin-inline-start:calc(-100% + calc(var(--ptc-switch-thumb-height) + var(--pt-dimension-200)) - calc(var(--ptc-switch-inner-start-padding) * 2));margin-inline-end:calc(100% - calc(var(--ptc-switch-thumb-height) + var(--pt-dimension-200)) + calc(var(--ptc-switch-inner-start-padding) * 2))}.pc_switch.pc_switch--2xsm{min-width:var(--pt-dimension-1400, 28px);height:var(--pt-dimension-800, 16px);min-height:var(--pt-dimension-800, 16px);max-height:var(--pt-dimension-800, 16px);--ptc-switch-thumb-width: var(--pt-dimension-600);--ptc-switch-thumb-height: var(--pt-dimension-600);--ptc-switch-inner-end-padding: var(--pt-dimension-0)}.pc_switch.pc_switch--2xsm+.pc_switch__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_switch.pc_switch--xsm{min-width:var(--pt-dimension-1900, 38px);height:var(--pt-dimension-1000, 20px);min-height:var(--pt-dimension-1000, 20px);max-height:var(--pt-dimension-1000, 20px);--ptc-switch-thumb-width: var(--pt-dimension-800);--ptc-switch-thumb-height: var(--pt-dimension-800)}.pc_switch.pc_switch--xsm+.pc_switch__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_switch.pc_switch--sm{min-width:var(--pt-dimension-2400, 48px);height:var(--pt-dimension-1200, 24px);min-height:var(--pt-dimension-1200, 24px);max-height:var(--pt-dimension-1200, 24px);--ptc-switch-thumb-width: var(--pt-dimension-1000);--ptc-switch-thumb-height: var(--pt-dimension-1000)}.pc_switch.pc_switch--sm+.pc_switch__label{margin-inline-start:var(--pt-dimension-400, 8px);font-family:var(--pt-font-family);font-weight:var(--pt-font-weight-medium, medium);font-size:var(--pt-dimension-800, 16px);line-height:var(--pt-lineheight-5, 18px);letter-spacing:0}.pc_switch.pc_switch--xsm:not(.pc_switch--inner-icon):not(.pc_switch--inner-text),.pc_switch.pc_switch--sm:not(.pc_switch--inner-icon):not(.pc_switch--inner-text){--ptc-switch-inner-end-padding: var(--pt-dimension-0)}.pc_switch.pc_switch--xsm.pc_switch--inner-icon,.pc_switch.pc_switch--sm.pc_switch--inner-icon{--ptc-switch-inner-end-padding: var(--pt-dimension-100)}.pc_switch.pc_switch--xsm.pc_switch--inner-text,.pc_switch.pc_switch--sm.pc_switch--inner-text{--ptc-switch-inner-end-padding: var(--pt-dimension-200)}.pc_switch:not(:disabled){cursor:pointer}.pc_switch:not(:disabled) .pc_switch__thumb{--ptu-bg-opacity:1;background-color:rgba(var(--pt-gray-fg-subtle),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)}.pc_switch:not(:disabled)[data-state=checked]{--ptc-switch-inner-color: rgba(var(--pt-primary-oncolor));--ptc-switch-thumb-color: rgba(var(--pt-primary-fg));--ptu-bg-opacity:1;background-color:rgba(var(--pt-primary-5),var(--ptu-bg-opacity))}.pc_switch:not(:disabled)[data-state=checked]:hover{--ptu-bg-opacity:1;background-color:rgba(var(--pt-primary-6),var(--ptu-bg-opacity));--ptc-switch-thumb-color: rgba(var(--pt-primary-fg-target))}.pc_switch:not(:disabled)[data-state=checked]:active{--ptu-bg-opacity:1;background-color:rgba(var(--pt-primary-7),var(--ptu-bg-opacity));--ptc-switch-thumb-color: rgba(var(--pt-primary-fg-trigger));--ptc-switch-inner-end-padding: var(--pt-dimension-0)}.pc_switch:not(:disabled)[data-state=unchecked]{--ptc-switch-inner-color: rgba(var(--pt-gray-6));--ptc-switch-thumb-color: rgba(var(--pt-gray-fg));--ptu-bg-opacity:1;background-color:rgba(var(--pt-gray-1),var(--ptu-bg-opacity))}.pc_switch:not(:disabled)[data-state=unchecked]:hover{--ptc-switch-inner-color: rgba(var(--pt-gray-7));--ptu-bg-opacity:1;background-color:rgba(var(--pt-gray-2),var(--ptu-bg-opacity))}.pc_switch:not(:disabled)[data-state=unchecked]:active{--ptc-switch-inner-color: rgba(var(--pt-gray-8));--ptu-bg-opacity:1;background-color:rgba(var(--pt-gray-3),var(--ptu-bg-opacity));--ptc-switch-inner-end-padding: var(--pt-dimension-0)}.pc_switch:not(:disabled)+.pc_switch__label{--ptc-switch-label-color: rgba(var(--pt-gray-8))}.pc_switch:not(:disabled):hover+.pc_switch__label{--ptc-switch-label-color: rgba(var(--pt-gray-9))}.pc_switch: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_switch:not(:disabled):active+.pc_switch__label{--ptc-switch-label-color: rgba(var(--pt-gray-10))}.pc_switch:not(:disabled):active.pc_switch--2xsm{--ptc-switch-thumb-width: var(--pt-dimension-700)}.pc_switch:not(:disabled):active.pc_switch--xsm{--ptc-switch-thumb-width: var(--pt-dimension-1000)}.pc_switch:not(:disabled):active.pc_switch--sm{--ptc-switch-thumb-width: var(--pt-dimension-1200)}.pc_switch:disabled{cursor:not-allowed}.pc_switch:disabled+.pc_switch__label{cursor:not-allowed;--ptc-switch-label-color: rgba(var(--pt-gray-4))}.pc_switch:disabled[data-state=checked]{--ptu-bg-opacity:1;background-color:rgba(var(--pt-gray-2),var(--ptu-bg-opacity));--ptc-switch-inner-color: rgba(var(--pt-gray-4));--ptc-switch-thumb-color: rgba(var(--pt-disable-fg))}.pc_switch:disabled[data-state=checked] .pc_switch__thumb{--ptu-bg-opacity:1;background-color:rgba(var(--pt-gray-fg-subtle),var(--ptu-bg-opacity))}.pc_switch:disabled[data-state=unchecked]{border-width:1px;border-style:solid;--ptu-border-opacity:1;border-color:rgba(var(--pt-disable-fill),var(--ptu-border-opacity));background-color:transparent;--ptc-switch-inner-color: rgba(var(--pt-gray-3));--ptc-switch-thumb-color: rgba(var(--pt-disable-fg))}.pc_switch:disabled[data-state=unchecked] .pc_switch__thumb{inset-inline-start:1px;top:1px;--ptu-bg-opacity:1;background-color:rgba(var(--pt-disable-fill),var(--ptu-bg-opacity))}.pc_switch .pc_switch__thumb{position:absolute;top:var(--pt-dimension-100, 2px);display:block;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:var(--pt-roundness-full, 88px);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-switch-thumb-width);min-width:var(--ptc-switch-thumb-width);max-width:var(--ptc-switch-thumb-width);height:var(--ptc-switch-thumb-height);min-height:var(--ptc-switch-thumb-height);max-height:var(--ptc-switch-thumb-height);color:var(--ptc-switch-thumb-color)}.pc_switch+.pc_switch__label{cursor:pointer;color:var(--ptc-switch-label-color)}.pc_switch__root{display:inline-flex;align-items:center}\n";
-const addSwitchCss = () => addCssToHead(`${prefix}s-switch`, cssText);
+const switchId = `${prefix}s-switch`;
+const addSwitchCss = () => addCssToHead(switchId, cssText);
+const removeSwitchCss = () => removeCssFromHead(switchId);
+const switchCss = cssText;
+exports.switchId = switchId;
 exports.addSwitchCss = addSwitchCss;
-exports.switchCss = cssText;
+exports.removeSwitchCss = removeSwitchCss;
+exports.switchCss = switchCss;