@pantheon-systems/pds-toolkit-react 2.0.0-alpha.75 → 2.0.0-alpha.77

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 (40) hide show
  1. package/dist/components/Dropdown/Dropdown.d.ts +67 -2
  2. package/dist/components/RowActionsMenu/RowActionsMenu.d.ts +46 -0
  3. package/dist/components/Table/Table.d.ts +73 -7
  4. package/dist/components/buttons/MenuButton/MenuButton.d.ts +20 -4
  5. package/dist/components/buttons/SelectButton/SelectButton.d.ts +81 -0
  6. package/dist/components/empty-states/VerticalEmptyState/VerticalEmptyState.d.ts +3 -2
  7. package/dist/components/icons/Icon/generated-icon-data.d.ts +16 -2
  8. package/dist/components/notifications/SectionMessage/SectionMessage.d.ts +7 -1
  9. package/dist/components/overlays/BottomSheet/BottomSheet.d.ts +66 -0
  10. package/dist/components/overlays/BulkActionBar/BulkActionBar.d.ts +48 -0
  11. package/dist/components/pagination/PaginationCompact/PaginationCompact.d.ts +7 -2
  12. package/dist/css/component-css/pds-bottom-sheet.css +1 -0
  13. package/dist/css/component-css/pds-bulk-action-bar.css +1 -0
  14. package/dist/css/component-css/pds-dropdown.css +3 -2
  15. package/dist/css/component-css/pds-filter-button.css +1 -1
  16. package/dist/css/component-css/pds-icon-button.css +21 -15
  17. package/dist/css/component-css/pds-index.css +33 -23
  18. package/dist/css/component-css/pds-pagination-compact.css +1 -1
  19. package/dist/css/component-css/pds-row-actions-menu.css +2 -0
  20. package/dist/css/component-css/pds-section-message.css +1 -1
  21. package/dist/css/component-css/pds-select-button.css +1 -0
  22. package/dist/css/component-css/pds-table.css +4 -2
  23. package/dist/css/component-css/pds-user-menu.css +1 -1
  24. package/dist/css/component-css/pds-utility-bar.css +1 -1
  25. package/dist/css/design-tokens/variables.dark.css +1 -18
  26. package/dist/css/design-tokens/variables.light.css +1 -18
  27. package/dist/css/layout-css/pds-sidebar-layout.css +11 -3
  28. package/dist/css/pds-components.css +33 -23
  29. package/dist/css/pds-core.css +1 -1
  30. package/dist/index.css +1 -1
  31. package/dist/index.d.ts +5 -0
  32. package/dist/index.js +2139 -1771
  33. package/dist/index.js.map +1 -1
  34. package/dist/index.source.d.ts +5 -0
  35. package/dist/layouts/SidebarLayout/SidebarLayout.d.ts +22 -3
  36. package/dist/svg/arrowDownWideShort.svg +3 -0
  37. package/dist/svg/arrowUpShortWide.svg +3 -0
  38. package/dist/utilities/auto-grid/AutoGrid.d.ts +48 -0
  39. package/dist/utilities/hooks/useDropdown/useDropdown.d.ts +11 -1
  40. package/package.json +2 -2
@@ -1,2 +1,3 @@
1
- @layer pds-v1, pds-v2;@layer pds-v2{.pds-dropdown{position:relative}.pds-dropdown--inline{display:inline-block}.pds-dropdown__trigger{align-items:center;background:transparent;border:none;border-radius:var(--pds-border-radius-container);color:inherit;cursor:pointer;display:inline-flex;font-family:inherit;gap:var(--pds-spacing-3xs);padding:var(--pds-spacing-3xs) var(--pds-spacing-2xs);transition:background-color .15s ease}.pds-dropdown__trigger:hover{background-color:var(--pds-color-interactive-background-hover)}.pds-dropdown__trigger:focus-visible{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);outline-offset:1px}.pds-dropdown__trigger-icon{color:var(--pds-color-foreground-default-secondary);transition:var(--pds-animation-transition-rotation)}.pds-dropdown__trigger[aria-expanded=true] .pds-dropdown__trigger-icon{transform:rotate(180deg)}.pds-dropdown__panel{background-color:var(--pds-color-dropdown-background);box-shadow:var(--pds-elevation-overlay);flex-direction:column;gap:var(--pds-spacing-4xs);margin:0;min-width:10rem;overflow-y:auto;padding-inline:var(--pds-spacing-2xs);z-index:var(--pds-z-index-dropdown)}.pds-dropdown__item,.pds-dropdown__panel{border-radius:var(--pds-border-radius-container);display:flex;list-style:none;outline:none;padding-block:var(--pds-spacing-2xs)}.pds-dropdown__item{align-items:center;color:var(--pds-color-dropdown-foreground);cursor:pointer;font-size:var(--pds-typography-size-s);gap:var(--pds-spacing-s);justify-content:space-between;min-height:var(--pds-spacing-2xl);padding-inline:var(--pds-spacing-xs)}.pds-dropdown__item:focus-visible:not(:hover){outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);outline-offset:-1px}.pds-dropdown__item--focused,.pds-dropdown__item:hover{background-color:var(--pds-color-dropdown-item-background-hover)}.pds-dropdown__item:active{background-color:var(--pds-color-dropdown-item-background-active)}.pds-dropdown__selected-icon{align-self:center;color:var(--pds-color-foreground-default);display:flex;flex-shrink:0;height:.875em;width:.875em}.pds-dropdown__item--critical{color:var(--pds-color-status-critical-foreground)}.pds-dropdown__item--critical.pds-dropdown__item--focused,.pds-dropdown__item--critical:hover{background-color:var(--pds-color-status-critical-background)}.pds-dropdown__item--disabled{cursor:not-allowed;opacity:.5;pointer-events:none}.pds-dropdown__item-content{align-items:center;display:flex;gap:var(--pds-spacing-2xs)}.pds-dropdown__item-icon{display:flex;flex-shrink:0}.pds-dropdown__item-label{display:flex;flex-direction:column}.pds-dropdown__item-description{color:var(--pds-color-foreground-default-secondary);font-size:var(--pds-typography-size-xs);line-height:var(--pds-typography-lh-s);margin-block-start:var(--pds-spacing-4xs)}.pds-dropdown__item-trailing{display:flex;flex-shrink:0}.pds-dropdown__checkbox-box{align-items:center;background-color:transparent;border:var(--pds-border-width-default) solid var(--pds-color-foreground-default);border-radius:var(--pds-border-radius-default);color:var(--pds-color-input-selected-foreground);display:flex;flex-shrink:0;height:1rem;justify-content:center;padding:.0625rem;transition:var(--pds-animation-transition-default);width:1rem}.pds-dropdown__checkbox-box--checked,.pds-dropdown__checkbox-box--indeterminate{background-color:var(--pds-color-input-selected-background);border-color:var(--pds-color-input-selected-background)}.pds-dropdown__checkbox-icon{height:100%;width:100%}.pds-dropdown__heading{color:var(--pds-color-dropdown-heading);font-family:var(--pds-typography-ff-compact);font-size:var(--pds-typography-size-xs);font-weight:var(--pds-typography-fw-regular);line-height:var(--pds-typography-lh-s);list-style:none;padding:var(--pds-spacing-xs) var(--pds-spacing-xs) var(--pds-spacing-3xs)}.pds-dropdown__separator{border-block-end:var(--pds-border-width-default) solid var(--pds-color-dropdown-separator);list-style:none;margin-block-end:2px;margin-inline:calc(var(--pds-spacing-2xs)*-1);padding-block:2px}.pds-dropdown__filter{list-style:none;margin-block-start:calc(var(--pds-spacing-2xs)*-1);margin-inline:calc(var(--pds-spacing-2xs)*-1);padding:0}.pds-dropdown__filter-wrapper{align-items:center;display:flex;position:relative}.pds-dropdown__filter-icon{block-size:.875rem;color:var(--pds-color-foreground-default-secondary);inline-size:.875rem;left:var(--pds-spacing-s);pointer-events:none;position:absolute}.pds-dropdown__filter-wrapper:has(.pds-dropdown__filter-icon)
2
- .pds-dropdown__filter-input{padding-inline-start:calc(var(--pds-spacing-s) + var(--pds-spacing-xl))}.pds-dropdown__filter-input{background-color:transparent;border:none;border-block-end:var(--pds-border-width-default) solid var(--pds-color-border-input);border-radius:0;box-sizing:border-box;color:var(--pds-color-foreground-default);font-family:inherit;font-size:var(--pds-typography-size-s);padding:var(--pds-spacing-s);width:100%}.pds-dropdown__filter-input::placeholder{color:var(--pds-color-input-placeholder);font-size:var(--pds-typography-size-s)}.pds-dropdown__filter-input:focus-visible{border-radius:var(--pds-border-radius-container) var(--pds-border-radius-container) 0 0;outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);outline-offset:-3px}.pds-dropdown__no-results{color:var(--pds-color-foreground-default-secondary);font-size:var(--pds-typography-size-s);padding-block-end:var(--pds-spacing-s);padding-block-start:var(--pds-spacing-xs);padding-inline:var(--pds-spacing-s)}.pds-dropdown__footer{background-color:var(--pds-color-dropdown-background);border-block-start:var(--pds-border-width-default) solid var(--pds-color-dropdown-separator);bottom:calc(var(--pds-spacing-2xs)*-1);list-style:none;margin-block-end:calc(var(--pds-spacing-2xs)*-1);margin-block-start:var(--pds-spacing-3xs);margin-inline:calc(var(--pds-spacing-2xs)*-1);padding:var(--pds-spacing-s);position:sticky}.pds-dropdown__footer a,.pds-dropdown__footer button{align-items:center;background:none;border:none;color:var(--pds-color-interactive-link-default);cursor:pointer;display:flex;font:inherit;gap:var(--pds-spacing-3xs);padding:0;text-decoration:none;width:100%}.pds-dropdown__footer a:hover,.pds-dropdown__footer button:hover{color:var(--pds-color-interactive-link-hover);text-decoration:underline}.pds-dropdown__footer a:focus-visible,.pds-dropdown__footer button:focus-visible{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);outline-offset:2px}}
1
+ @layer pds-v1, pds-v2;@layer pds-v2{.pds-dropdown{position:relative}.pds-dropdown--inline{display:inline-block}.pds-dropdown__trigger{align-items:center;background:transparent;border:none;border-radius:var(--pds-border-radius-container);color:inherit;cursor:pointer;display:inline-flex;font-family:inherit;gap:var(--pds-spacing-3xs);padding:var(--pds-spacing-3xs) var(--pds-spacing-2xs);transition:background-color .15s ease}.pds-dropdown__trigger:hover{background-color:var(--pds-color-interactive-background-hover)}.pds-dropdown__trigger:focus-visible{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);outline-offset:1px}.pds-dropdown__trigger-icon{color:var(--pds-color-foreground-default-secondary);transition:var(--pds-animation-transition-rotation)}.pds-dropdown__trigger[aria-expanded=true] .pds-dropdown__trigger-icon{transform:rotate(180deg)}.pds-dropdown__panel{background-color:var(--pds-color-dropdown-background);box-shadow:var(--pds-elevation-overlay);flex-direction:column;gap:var(--pds-spacing-4xs);margin:0;min-width:10rem;overflow-y:auto;padding-inline:var(--pds-spacing-2xs);z-index:var(--pds-z-index-dropdown)}.pds-dropdown__item,.pds-dropdown__panel{border-radius:var(--pds-border-radius-container);display:flex;list-style:none;outline:none;padding-block:var(--pds-spacing-2xs)}.pds-dropdown__item{align-items:center;color:var(--pds-color-dropdown-foreground);cursor:pointer;font-size:var(--pds-typography-size-s);gap:var(--pds-spacing-s);justify-content:space-between;min-height:var(--pds-spacing-2xl);padding-inline:var(--pds-spacing-xs)}.pds-dropdown__item:focus-visible:not(:hover){outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);outline-offset:-1px}.pds-dropdown__item--focused,.pds-dropdown__item:hover{background-color:var(--pds-color-dropdown-item-background-hover)}.pds-dropdown__item:active{background-color:var(--pds-color-dropdown-item-background-active)}.pds-dropdown__selected-icon{align-self:center;color:var(--pds-color-foreground-default);display:flex;flex-shrink:0;height:.875em;width:.875em}.pds-dropdown__item--critical{color:var(--pds-color-status-critical-foreground)}.pds-dropdown__item--critical.pds-dropdown__item--focused,.pds-dropdown__item--critical:hover{background-color:var(--pds-color-status-critical-background)}.pds-dropdown__item--disabled{cursor:not-allowed;opacity:.5;pointer-events:none}.pds-dropdown__item-content{align-items:center;display:flex;gap:var(--pds-spacing-2xs)}.pds-dropdown__item-icon{display:flex;flex-shrink:0}.pds-dropdown__item-label{display:flex;flex-direction:column}.pds-dropdown__item-description{color:var(--pds-color-foreground-default-secondary);font-size:var(--pds-typography-size-xs);line-height:var(--pds-typography-lh-s);margin-block-start:var(--pds-spacing-4xs)}.pds-dropdown__item-trailing{display:flex;flex-shrink:0}.pds-dropdown__action-item .pds-dropdown__item-label a{color:inherit;text-decoration:none}.pds-dropdown__action-item{padding-block:var(--pds-spacing-4xs)}.pds-dropdown__action-item-trigger{display:flex;flex-shrink:0;opacity:0;pointer-events:none;transition:opacity .15s ease}.pds-dropdown__action-item:focus-within .pds-dropdown__action-item-trigger,.pds-dropdown__action-item:has(.pds-menu-button--expanded)
2
+ .pds-dropdown__action-item-trigger,.pds-dropdown__action-item:hover .pds-dropdown__action-item-trigger{opacity:1;pointer-events:auto}.pds-dropdown__checkbox-box{align-items:center;background-color:transparent;border:var(--pds-border-width-default) solid var(--pds-color-foreground-default);border-radius:var(--pds-border-radius-default);color:var(--pds-color-input-selected-foreground);display:flex;flex-shrink:0;height:1rem;justify-content:center;padding:.0625rem;transition:var(--pds-animation-transition-default);width:1rem}.pds-dropdown__checkbox-box--checked,.pds-dropdown__checkbox-box--indeterminate{background-color:var(--pds-color-input-selected-background);border-color:var(--pds-color-input-selected-background)}.pds-dropdown__checkbox-icon{height:100%;width:100%}.pds-dropdown__heading{color:var(--pds-color-dropdown-heading);font-family:var(--pds-typography-ff-compact);font-size:var(--pds-typography-size-xs);font-weight:var(--pds-typography-fw-regular);line-height:var(--pds-typography-lh-s);list-style:none;padding:var(--pds-spacing-xs) var(--pds-spacing-xs) var(--pds-spacing-3xs)}.pds-dropdown__separator{border-block-end:var(--pds-border-width-default) solid var(--pds-color-dropdown-separator);list-style:none;margin-block-end:2px;margin-inline:calc(var(--pds-spacing-2xs)*-1);padding-block:2px}.pds-dropdown__filter{list-style:none;margin-block-start:calc(var(--pds-spacing-2xs)*-1);margin-inline:calc(var(--pds-spacing-2xs)*-1);padding:0}.pds-dropdown__filter-wrapper{align-items:center;display:flex;position:relative}.pds-dropdown__filter-icon{block-size:.875rem;color:var(--pds-color-foreground-default-secondary);inline-size:.875rem;left:var(--pds-spacing-s);pointer-events:none;position:absolute}.pds-dropdown__filter-wrapper:has(.pds-dropdown__filter-icon)
3
+ .pds-dropdown__filter-input{padding-inline-start:calc(var(--pds-spacing-s) + var(--pds-spacing-xl))}.pds-dropdown__filter-input{background-color:transparent;border:none;border-block-end:var(--pds-border-width-default) solid var(--pds-color-dropdown-separator);border-radius:0;box-sizing:border-box;color:var(--pds-color-foreground-default);font-family:inherit;font-size:var(--pds-typography-size-s);padding:var(--pds-spacing-s);width:100%}.pds-dropdown__filter-input::placeholder{color:var(--pds-color-input-placeholder);font-size:var(--pds-typography-size-s)}.pds-dropdown__filter-input:focus-visible{border-radius:var(--pds-border-radius-container) var(--pds-border-radius-container) 0 0;outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);outline-offset:-3px}.pds-dropdown__no-results{color:var(--pds-color-foreground-default-secondary);font-size:var(--pds-typography-size-s);padding-block-end:var(--pds-spacing-s);padding-block-start:var(--pds-spacing-xs);padding-inline:var(--pds-spacing-s)}.pds-dropdown__footer{background-color:var(--pds-color-dropdown-background);border-block-start:var(--pds-border-width-default) solid var(--pds-color-dropdown-separator);bottom:calc(var(--pds-spacing-2xs)*-1);list-style:none;margin-block-end:calc(var(--pds-spacing-2xs)*-1);margin-block-start:var(--pds-spacing-3xs);margin-inline:calc(var(--pds-spacing-2xs)*-1);padding:var(--pds-spacing-s);position:sticky}.pds-dropdown__footer a,.pds-dropdown__footer button{align-items:center;background:none;border:none;color:var(--pds-color-interactive-link-default);cursor:pointer;display:flex;font:inherit;gap:var(--pds-spacing-3xs);padding:0;text-decoration:none;width:100%}.pds-dropdown__footer a:hover,.pds-dropdown__footer button:hover{color:var(--pds-color-interactive-link-hover);text-decoration:underline}.pds-dropdown__footer a:focus-visible,.pds-dropdown__footer button:focus-visible{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);outline-offset:2px}}
@@ -1 +1 @@
1
- @layer pds-v1, pds-v2;@layer pds-v2{.pds-filter-button{--fb-bg:var(--pds-color-button-secondary-background-default);--fb-bg-hover:var(--pds-color-button-secondary-background-hover);--fb-border:var(--pds-color-button-secondary-border);--fb-clear-size:1.5rem;--fb-fg:var(--pds-color-button-secondary-foreground-default)}.pds-filter-button__panel{min-width:12rem;width:max-content}.pds-filter-button--has-search .pds-filter-button__panel{min-width:14rem}.pds-filter-button__trigger{background:var(--fb-bg);block-size:var(--pds-spacing-button-height-s);border:var(--pds-border-width-default) solid var(--fb-border);border-radius:var(--pds-border-radius-button);color:var(--fb-fg);font-family:var(--pds-typography-ff-default);font-size:var(--pds-typography-size-s);gap:var(--pds-spacing-3xs);padding-block:0;padding-inline-end:var(--pds-spacing-s);padding-inline-start:calc(var(--pds-spacing-s) + var(--pds-spacing-5xs));white-space:nowrap}.pds-filter-button__trigger:hover{background-color:var(--fb-bg-hover)}.pds-filter-button--multiple .pds-filter-button__trigger,.pds-filter-button--single .pds-filter-button__trigger{padding-inline-start:calc(var(--pds-spacing-s) + var(--fb-clear-size) + var(--pds-spacing-4xs))}.pds-filter-button__label{align-items:center;display:inline-flex;gap:var(--pds-spacing-3xs)}.pds-filter-button__divider{background-color:var(--pds-color-border-separator);block-size:.75rem;inline-size:var(--pds-border-width-default)}.pds-filter-button__clear{align-items:center;background:transparent;block-size:var(--fb-clear-size);border:none;border-radius:50%;color:var(--fb-fg);cursor:pointer;display:inline-flex;inline-size:var(--fb-clear-size);inset-block-start:50%;inset-inline-start:var(--pds-spacing-s);justify-content:center;padding:var(--pds-spacing-5xs);position:absolute;transform:translateY(-50%)}.pds-filter-button__clear:hover{background-color:var(--fb-bg-hover)}.pds-filter-button__clear:focus-visible{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);outline-offset:0}.pds-filter-button__clear:disabled{cursor:not-allowed;opacity:.5}}
1
+ @layer pds-v1, pds-v2;@layer pds-v2{.pds-filter-button{--fb-bg:var(--pds-color-button-secondary-background-default);--fb-bg-hover:var(--pds-color-button-secondary-background-hover);--fb-border:var(--pds-color-button-secondary-border);--fb-clear-size:1.5rem;--fb-fg:var(--pds-color-button-secondary-foreground-default)}.pds-filter-button__panel{min-width:12rem;width:max-content}.pds-filter-button--has-search .pds-filter-button__panel{min-width:14rem}.pds-filter-button__trigger{background:var(--fb-bg);block-size:var(--pds-spacing-button-height-s);border:var(--pds-border-width-default) solid var(--fb-border);border-radius:var(--pds-border-radius-button);color:var(--fb-fg);font-family:var(--pds-typography-ff-default);font-size:var(--pds-typography-size-s);gap:var(--pds-spacing-3xs);padding-block:0;padding-inline-end:var(--pds-spacing-s);padding-inline-start:calc(var(--pds-spacing-s) + var(--pds-spacing-5xs));white-space:nowrap}.pds-filter-button__trigger:hover{background-color:var(--fb-bg-hover)}.pds-filter-button__trigger:disabled{cursor:not-allowed;opacity:40%}.pds-filter-button--multiple .pds-filter-button__trigger,.pds-filter-button--single .pds-filter-button__trigger{padding-inline-start:calc(var(--pds-spacing-s) + var(--fb-clear-size) + var(--pds-spacing-4xs))}.pds-filter-button__label{align-items:center;display:inline-flex;gap:var(--pds-spacing-3xs)}.pds-filter-button__divider{background-color:var(--pds-color-border-separator);block-size:.75rem;inline-size:var(--pds-border-width-default)}.pds-filter-button__clear{align-items:center;background:transparent;block-size:var(--fb-clear-size);border:none;border-radius:50%;color:var(--fb-fg);cursor:pointer;display:inline-flex;inline-size:var(--fb-clear-size);inset-block-start:50%;inset-inline-start:var(--pds-spacing-s);justify-content:center;padding:var(--pds-spacing-5xs);position:absolute;transform:translateY(-50%)}.pds-filter-button__clear:hover{background-color:var(--fb-bg-hover)}.pds-filter-button__clear:focus-visible{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);outline-offset:0}.pds-filter-button__clear:disabled{cursor:not-allowed;opacity:.5}}
@@ -1,19 +1,25 @@
1
- @layer pds-v1, pds-v2;@layer pds-v2{.pds-icon-button{--icon-button-size:var(--pds-spacing-button-height-s);--icon-button-padding:var(--pds-spacing-button-padding-inline-s);--icon-button-background:var(
2
- --pds-color-icon-button-standard-background-default
1
+ @layer pds-v1, pds-v2;@layer pds-v2{.pds-icon-button{--icon-button-size:var(--pds-spacing-button-height-s);--icon-button-background:var(
2
+ --pds-color-button-secondary-background-default
3
3
  );--icon-button-background-hover:var(
4
- --pds-color-icon-button-standard-background-hover
5
- );--icon-button-border:var(--pds-color-icon-button-standard-border-default);--icon-button-border-hover:var(
6
- --pds-color-icon-button-standard-border-hover
7
- );--icon-button-foreground:var(--pds-color-icon-button-standard-foreground);background-color:var(--icon-button-background);border:var(--pds-border-width-default) solid transparent;border-radius:var(--pds-border-radius-input);box-sizing:border-box;color:var(--icon-button-foreground);cursor:pointer;height:var(--icon-button-size);padding:var(--icon-button-padding);text-decoration:none;transition:var(--pds-animation-transition-button);width:var(--icon-button-size)}.pds-icon-button,.pds-icon-button__content{align-items:center;display:flex;justify-content:center}.pds-icon-button__content{align-content:stretch;height:100%}.pds-icon-button:disabled{cursor:not-allowed;opacity:70%}.pds-icon-button:disabled .pds-icon-button__content{opacity:30%}.pds-icon-button:hover:enabled,a.pds-icon-button:hover{background-color:var(--icon-button-background-hover);color:var(--icon-button-foreground);text-decoration:none}.pds-icon-button--has-border{border-color:var(--icon-button-border)}.pds-icon-button--has-border:hover:enabled,a.pds-icon-button--has-border:hover{border-color:var(--icon-button-border-hover)}.pds-icon-button:focus-visible{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus)}.pds-icon-button--reverse{--icon-button-background:var(
8
- --pds-color-icon-button-reverse-background-default
4
+ --pds-color-button-secondary-background-hover
5
+ );--icon-button-border:var(--pds-color-button-secondary-border);--icon-button-border-hover:var(--pds-color-button-secondary-border);--icon-button-foreground:var(
6
+ --pds-color-button-secondary-foreground-default
7
+ );background-color:var(--icon-button-background);border:var(--pds-border-width-default) solid transparent;border-radius:var(--pds-border-radius-input);box-sizing:border-box;color:var(--icon-button-foreground);cursor:pointer;height:var(--icon-button-size);text-decoration:none;transition:var(--pds-animation-transition-button);width:var(--icon-button-size)}.pds-icon-button,.pds-icon-button__content{align-items:center;display:flex;justify-content:center}.pds-icon-button__content{align-content:stretch;height:100%}.pds-icon-button:disabled{cursor:not-allowed;opacity:70%}.pds-icon-button:disabled .pds-icon-button__content{opacity:30%}.pds-icon-button:hover:enabled,a.pds-icon-button:hover{background-color:var(--icon-button-background-hover);color:var(--icon-button-foreground);text-decoration:none}.pds-icon-button--has-border{border-color:var(--icon-button-border)}.pds-icon-button--has-border:hover:enabled,a.pds-icon-button--has-border:hover{border-color:var(--icon-button-border-hover)}.pds-icon-button:focus-visible{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus)}.pds-icon-button--reverse{--icon-button-background:var(
8
+ --pds-color-button-reverse-secondary-background-default
9
9
  );--icon-button-background-hover:var(
10
- --pds-color-icon-button-reverse-background-hover
11
- );--icon-button-border:var(--pds-color-icon-button-reverse-border-default);--icon-button-border-hover:var(--pds-color-icon-button-reverse-border-hover);--icon-button-foreground:var(--pds-color-icon-button-reverse-foreground)}.pds-icon-button--reverse:focus-visible{outline-color:var(--pds-color-interactive-reverse-focus)}.pds-icon-button--critical{--icon-button-background:var(
12
- --pds-color-icon-button-critical-background-default
10
+ --pds-color-button-reverse-secondary-background-hover
11
+ );--icon-button-border:var(--pds-color-button-reverse-secondary-border);--icon-button-border-hover:var(--pds-color-button-reverse-secondary-border);--icon-button-foreground:var(
12
+ --pds-color-button-reverse-secondary-foreground
13
+ )}.pds-icon-button--reverse:focus-visible{outline-color:var(--pds-color-interactive-reverse-focus)}.pds-icon-button--critical{--icon-button-background:var(
14
+ --pds-color-button-critical-secondary-background-default
13
15
  );--icon-button-background-hover:var(
14
- --pds-color-icon-button-critical-background-hover
15
- );--icon-button-border:var(--pds-color-icon-button-critical-border-default);--icon-button-border-hover:var(
16
- --pds-color-icon-button-critical-border-hover
17
- );--icon-button-foreground:var(--pds-color-icon-button-critical-foreground)}.pds-icon-button--pressed:not(.pds-icon-button--critical),.pds-icon-button--pressed:not(.pds-icon-button--critical):hover:enabled{background-color:var(--icon-button-border);border-color:var(--icon-button-border);box-shadow:var(--pds-elevation-icon-button-pressed)}.pds-icon-button:active:enabled,a.pds-icon-button:active{background-color:var(--pds-color-button-secondary-background-active);box-shadow:var(--pds-elevation-button-secondary-active)}.pds-icon-button--critical:active:enabled,a.pds-icon-button--critical:active{background-color:var(
16
+ --pds-color-button-critical-secondary-background-hover
17
+ );--icon-button-border:var(
18
+ --pds-color-button-critical-secondary-border-default
19
+ );--icon-button-border-hover:var(
20
+ --pds-color-button-critical-secondary-border-hover
21
+ );--icon-button-foreground:var(
22
+ --pds-color-button-critical-secondary-foreground
23
+ )}.pds-icon-button--pressed:not(.pds-icon-button--critical),.pds-icon-button--pressed:not(.pds-icon-button--critical):hover:enabled{background-color:var(--icon-button-border);border-color:var(--icon-button-border);box-shadow:var(--pds-elevation-icon-button-pressed)}.pds-icon-button:active:enabled,a.pds-icon-button:active{background-color:var(--pds-color-button-secondary-background-active);box-shadow:var(--pds-elevation-button-secondary-active)}.pds-icon-button--critical:active:enabled,a.pds-icon-button--critical:active{background-color:var(
18
24
  --pds-color-button-critical-secondary-background-active
19
- );box-shadow:var(--pds-elevation-button-critical-secondary-active)}.pds-icon-button--m{--icon-button-size:var(--pds-spacing-button-height-m);--icon-button-padding:var(--pds-spacing-button-padding-inline-m)}.pds-icon-button__icon-wrapper{align-items:center;display:flex;justify-content:center;position:absolute}.pds-icon-button--fadeOut{-webkit-animation:scale-down-center .4s cubic-bezier(.25,.46,.45,.94) both;animation:scale-down-center .4s cubic-bezier(.25,.46,.45,.94) both;opacity:0;transition:.2s ease-in}.pds-icon-button--hide{display:none}.pds-icon-button--scaleIn{-webkit-animation:scale-in-center .2s cubic-bezier(.175,.885,.32,1.275) both;animation:scale-in-center .2s cubic-bezier(.175,.885,.32,1.275) both}.pds-icon--copy.pds-icon--copy.pds-icon-button__icon{transform:translateX(8%) translateY(-2%)}@keyframes scale-in-center{0%{opacity:1;-webkit-transform:scale(0);transform:scale(0)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}}
25
+ );box-shadow:var(--pds-elevation-button-critical-secondary-active)}.pds-icon-button--reverse:active:enabled,a.pds-icon-button--reverse:active{background-color:var(--pds-color-button-reverse-secondary-background-active);box-shadow:var(--pds-elevation-button-reverse-secondary-active)}.pds-icon-button--m{--icon-button-size:var(--pds-spacing-button-height-m)}.pds-icon-button__icon-wrapper{align-items:center;display:flex;justify-content:center;position:absolute}.pds-icon-button--fadeOut{-webkit-animation:scale-down-center .4s cubic-bezier(.25,.46,.45,.94) both;animation:scale-down-center .4s cubic-bezier(.25,.46,.45,.94) both;opacity:0;transition:.2s ease-in}.pds-icon-button--hide{display:none}.pds-icon-button--scaleIn{-webkit-animation:scale-in-center .2s cubic-bezier(.175,.885,.32,1.275) both;animation:scale-in-center .2s cubic-bezier(.175,.885,.32,1.275) both}.pds-icon--copy.pds-icon--copy.pds-icon-button__icon{transform:translateX(8%) translateY(-2%)}@keyframes scale-in-center{0%{opacity:1;-webkit-transform:scale(0);transform:scale(0)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}}