@pantheon-systems/pds-toolkit-react 2.0.0-alpha.71 → 2.0.0-alpha.73

package/dist/css/pds-layouts.css

@@ -1,3 +1,3 @@
 @layer pds-v1, pds-v2;@layer pds-v2{.pds-app-layout{--toggle-icon-size:1.5rem;--toggle-trigger-size:2rem;--button-offset:calc(var(--toggle-trigger-size)*-0.5);--pds-app-layout-top-offset:0px;box-sizing:border-box;column-gap:0;display:flex;flex-direction:row;min-height:calc(100dvh - var(--pds-app-layout-top-offset));width:100%}.pds-app-layout--has-header{flex-direction:column}.pds-app-layout__header{flex-shrink:0;width:100%}.pds-app-layout__body{display:flex;flex:1;flex-direction:row;min-height:0;width:100%}.pds-app-layout__content-column{contain:layout;display:flex;flex:1;flex-direction:column;min-width:0}.pds-app-layout__footer{flex-shrink:0;padding-inline:var(--pds-spacing-xl)}.pds-app-layout__main{flex:1;padding:var(--pds-spacing-xl);position:relative}.pds-app-layout__main:focus:not(:focus-visible){outline:none}.pds-app-layout__main-inner{min-height:100%}.pds-app-layout__footer-inner,.pds-app-layout__main-inner{margin-inline:auto;width:100%}.pds-app-layout__sidebar{position:relative;z-index:1}.pds-app-layout:has(.pds-app-layout__sidebar) .pds-app-layout__content-column{border-left:1px solid var(--pds-color-border-default);transition:border-color .15s ease-in-out}.pds-app-layout__sidebar--collapsed .pds-identity-block__text{opacity:0}.pds-app-layout__sidebar .pds-identity-block__text{transition:opacity .2s ease-in-out}.pds-app-layout__sidebar--collapsed .pds-app-layout__sidebar-content-bottom,.pds-app-layout__sidebar--collapsed .pds-app-layout__sidebar-content-top,.pds-app-layout__sidebar--collapsed .pds-app-layout__sidebar-identity{padding-inline-start:var(--pds-spacing-l)}.pds-app-layout__sidebar--collapsed .pds-app-layout__sidebar-navigation{--side-nav-global-item-inset:var(--pds-spacing-m);overflow-x:visible}.pds-app-layout__sidebar--collapsed .pds-app-layout__sidebar-navigation .pds-side-nav-global__item-wrapper a{padding-inline:var(--pds-spacing-4xs);width:2rem}.pds-app-layout__sidebar--collapsed .pds-app-layout__sidebar-inner{padding-inline-end:var(--pds-spacing-s)}.pds-app-layout__sidebar{transition:width .2s ease-in-out,min-width .2s ease-in-out}.pds-app-layout:has(.pds-app-layout__sidebar-toggle-button:hover)
 	.pds-app-layout__content-column{border-left-color:var(--pds-color-border-hover)}.pds-app-layout__sidebar-toggle-tooltip.pds-tooltip{height:100%;position:absolute;right:var(--button-offset);top:0;width:var(--toggle-trigger-size);z-index:2}.pds-app-layout__sidebar-toggle-tooltip .pds-tooltip__trigger-custom{display:flex;height:100%;width:100%}.pds-app-layout__sidebar-toggle-button{background-color:transparent;border:none;cursor:pointer;height:100%;position:relative;width:100%}.pds-app-layout__sidebar-toggle-button:focus-visible{outline:none}.pds-app-layout__sidebar-toggle-button:focus-visible>.pds-app-layout__sidebar-toggle-icon{outline:var(--pds-border-width-default) solid var(--pds-color-interactive-focus);outline-offset:2px}.pds-app-layout__sidebar-toggle-button:hover>.pds-app-layout__sidebar-toggle-icon{background-color:var(--pds-color-surface-reverse);filter:brightness(.9)}.pds-app-layout__sidebar-toggle-icon{align-items:center;background-color:var(--pds-color-surface-reverse);border:none;border-radius:50%;bottom:var(--pds-spacing-5xl);color:var(--pds-color-foreground-reverse);display:flex;height:var(--toggle-icon-size);justify-content:center;position:absolute;right:.25rem;transition:var(--pds-animation-transition-rotation);width:var(--toggle-icon-size);z-index:2}.pds-app-layout__sidebar-toggle-button[aria-expanded=false]
-	.pds-app-layout__sidebar-toggle-icon{transform:rotate(180deg);transition:var(--pds-animation-transition-rotation)}.pds-app-layout__sidebar-inner{display:flex;flex-direction:column;height:100%;margin-inline-start:0;padding-block-end:var(--pds-spacing-2xl);padding-block-start:var(--pds-spacing-xl);padding-inline-end:var(--pds-spacing-l);transition:padding-inline-end .2s ease-in-out}.pds-app-layout__sidebar-identity{align-items:center;display:flex;gap:var(--pds-spacing-s);justify-content:flex-start;padding-block-end:var(--pds-spacing-xl);padding-inline-start:var(--pds-spacing-l)}.pds-app-layout__drawer-toggle{flex-shrink:0;margin-inline-start:auto}.pds-app-layout__sidebar-content-top{padding-block-end:var(--pds-spacing-l);padding-inline-start:var(--pds-spacing-l)}.pds-app-layout__sidebar-navigation{--side-nav-global-item-inset:var(--pds-spacing-m);flex:1;overflow-x:clip;text-wrap:nowrap}.pds-app-layout__sidebar-navigation .pds-side-nav-global__item--top-level:before,.pds-app-layout__sidebar-navigation .pds-side-nav-global__item-wrapper{height:2rem}.pds-app-layout__sidebar-navigation .pds-side-nav-global__item-wrapper a{padding-inline:var(--pds-spacing-4xs)}.pds-app-layout__sidebar-navigation .pds-side-nav-global__menu--second-level{padding-inline-start:calc(var(--side-nav-global-icon-width) + var(--side-nav-global-space-after-icon))}.pds-app-layout__sidebar-navigation .pds-side-nav-global__item--second-level a{padding-inline:var(--pds-spacing-3xs)}.pds-app-layout__sidebar-content-bottom{margin-block-start:auto;padding-block-start:var(--pds-spacing-l);padding-inline-start:var(--pds-spacing-l)}.pds-app-layout--scrollable{height:calc(100dvh - var(--pds-app-layout-top-offset));overflow:hidden}.pds-app-layout--scrollable .pds-app-layout__content-column,.pds-app-layout--scrollable .pds-app-layout__sidebar-inner{overflow-y:auto}.pds-app-layout--scrollable .pds-app-layout__main{flex:1 0 auto}.pds-docs-layout{column-gap:var(--pds-spacing-2xl);display:flex;flex:1;flex-direction:row;height:100%}.pds-docs-layout__content,.pds-docs-layout__sidebar{padding-block:var(--pds-spacing-2xl)}.pds-docs-layout__content{flex:1}.pds-docs-layout__sidebar{border-inline-end:1px solid var(--pds-color-border-default);max-width:var(--docs-sidebar-max-width,20rem);min-width:var(--docs-sidebar-min-width,15rem);width:var(--docs-sidebar-width,18%)}.pds-docs-layout__sidebar-inner{margin-inline-end:var(--pds-spacing-xl);overflow-x:hidden}[data-pds-mobile] .pds-docs-layout{flex-direction:column;height:unset}[data-pds-mobile] .pds-docs-layout__content,[data-pds-mobile] .pds-docs-layout__sidebar{border:none;max-width:unset;width:100%}[data-pds-mobile] .pds-docs-layout__sidebar{border-block-end:var(--pds-border-width-default) solid var(--pds-color-border-default);min-width:unset}[data-pds-mobile] .pds-docs-layout__sidebar-inner{margin-inline-end:0}.pds-stepper-layout{--stepper-form-inset:0;container-type:inline-size;padding-inline:0;width:100%}@media (min-width:768px){.pds-stepper-layout{--stepper-form-inset:14cqi}}@media (min-width:1280px){.pds-stepper-layout{--stepper-form-inset:16cqi}}@media (min-width:768px){.pds-stepper-layout--full-width{--stepper-form-inset:calc(var(--pds-spacing-stepper-indicator-size)*2)}}.pds-stepper-layout__stepper-container{padding-block-start:var(--pds-spacing-m)}.pds-stepper-layout__form-container{padding-block-end:var(--pds-spacing-m);padding-block-start:var(--pds-spacing-3xl);padding-inline:var(--stepper-form-inset)}@media (min-width:768px){.pds-stepper-layout__form-container{margin-inline:auto}}.pds-stepper__button-group{column-gap:var(--pds-spacing-xl);display:flex;justify-content:space-between;margin-inline:0;max-width:none;padding-block-start:var(--pds-spacing-3xl);transform:none;width:auto}@media (min-width:768px){.pds-stepper__button-group{margin-inline:calc(var(--stepper-form-inset)*-1);padding-inline:calc(var(--pds-spacing-stepper-indicator-size)*2)}}.pds-three-item-layout .pds-grid-item{display:flex;flex-direction:column}.pds-three-item-layout--start .pds-grid-item{justify-content:flex-start}.pds-three-item-layout--center .pds-grid-item{justify-content:center}.pds-three-item-layout--end .pds-grid-item{justify-content:flex-end}.pds-two-item-layout .pds-grid-item{display:flex;flex-direction:column}.pds-two-item-layout--start .pds-grid-item{justify-content:flex-start}.pds-two-item-layout--center .pds-grid-item{justify-content:center}.pds-two-item-layout--end .pds-grid-item{justify-content:flex-end}}
+	.pds-app-layout__sidebar-toggle-icon{transform:rotate(180deg);transition:var(--pds-animation-transition-rotation)}.pds-app-layout__sidebar-inner{display:flex;flex-direction:column;height:100%;margin-inline-start:0;padding-block-end:var(--pds-spacing-2xl);padding-block-start:var(--pds-spacing-xl);padding-inline-end:var(--pds-spacing-l);transition:padding-inline-end .2s ease-in-out}.pds-app-layout__sidebar-identity{align-items:center;display:flex;gap:var(--pds-spacing-s);justify-content:flex-start;padding-block-end:var(--pds-spacing-xl);padding-inline-start:var(--pds-spacing-l)}.pds-app-layout__drawer-toggle{flex-shrink:0;margin-inline-start:auto}.pds-app-layout__sidebar-content-top{padding-block-end:var(--pds-spacing-l);padding-inline-start:var(--pds-spacing-l)}.pds-app-layout__sidebar-navigation{--side-nav-global-item-inset:var(--pds-spacing-m);flex:1;overflow-x:clip;text-wrap:nowrap}.pds-app-layout__sidebar-navigation .pds-side-nav-global__item--top-level:before,.pds-app-layout__sidebar-navigation .pds-side-nav-global__item-wrapper{height:2rem}.pds-app-layout__sidebar-navigation .pds-side-nav-global__item-wrapper a{padding-inline:var(--pds-spacing-4xs)}.pds-app-layout__sidebar-navigation .pds-side-nav-global__menu--second-level{padding-inline-start:calc(var(--side-nav-global-icon-width) + var(--side-nav-global-space-after-icon))}.pds-app-layout__sidebar-navigation .pds-side-nav-global__item--second-level a{padding-inline:var(--pds-spacing-3xs)}.pds-app-layout__sidebar-content-bottom{margin-block-start:auto;padding-block-start:var(--pds-spacing-l);padding-inline-start:var(--pds-spacing-l)}.pds-app-layout--scrollable{height:calc(100dvh - var(--pds-app-layout-top-offset));overflow:hidden}.pds-app-layout--scrollable .pds-app-layout__content-column,.pds-app-layout--scrollable .pds-app-layout__sidebar-inner{overflow-y:auto}.pds-app-layout--scrollable .pds-app-layout__main{flex:1 0 auto}.pds-docs-layout{column-gap:var(--pds-spacing-2xl);display:flex;flex:1;flex-direction:row;height:100%}.pds-docs-layout__content,.pds-docs-layout__sidebar{padding-block:var(--pds-spacing-2xl)}.pds-docs-layout__content{flex:1}.pds-docs-layout__sidebar{border-inline-end:1px solid var(--pds-color-border-default);max-width:var(--docs-sidebar-max-width,20rem);min-width:var(--docs-sidebar-min-width,15rem);width:var(--docs-sidebar-width,18%)}.pds-docs-layout__sidebar-inner{margin-inline-end:var(--pds-spacing-xl);overflow-x:hidden}[data-pds-mobile] .pds-docs-layout{flex-direction:column;height:unset}[data-pds-mobile] .pds-docs-layout__content,[data-pds-mobile] .pds-docs-layout__sidebar{border:none;max-width:unset;width:100%}[data-pds-mobile] .pds-docs-layout__sidebar{border-block-end:var(--pds-border-width-default) solid var(--pds-color-border-default);min-width:unset}[data-pds-mobile] .pds-docs-layout__sidebar-inner{margin-inline-end:0}.pds-stat-panel-group{--stat-panel-gap:var(--pds-spacing-m);--stat-panel-min-width:13rem;display:grid;gap:var(--stat-panel-gap);grid-template-columns:repeat(auto-fit,minmax(max(var(--stat-panel-min-width),calc((100% - (var(--max-columns) - 1)*var(--stat-panel-gap))/var(--max-columns))),1fr))}.pds-stat-panel-group:has(.pds-stat-panel__action){--stat-panel-min-width:16rem}.pds-stat-panel-group__item{display:flex}.pds-stat-panel-group__item>*{width:100%}.pds-stat-panel-group-container{container-name:pds-stat-panel-group;container-type:inline-size}@container pds-stat-panel-group (min-width: 55rem){.pds-stat-panel-group--max-4:not(:has(.pds-stat-panel__action)):has(.pds-stat-panel-group__item:nth-child(5):last-child),.pds-stat-panel-group--max-4:not(:has(.pds-stat-panel__action)):has(.pds-stat-panel-group__item:nth-child(6):last-child),.pds-stat-panel-group--max-4:not(:has(.pds-stat-panel__action)):has(.pds-stat-panel-group__item:nth-child(9):last-child){grid-template-columns:repeat(3,1fr)}}@container pds-stat-panel-group (min-width: 67rem){.pds-stat-panel-group--max-4:has(.pds-stat-panel__action):has(.pds-stat-panel-group__item:nth-child(5):last-child),.pds-stat-panel-group--max-4:has(.pds-stat-panel__action):has(.pds-stat-panel-group__item:nth-child(6):last-child),.pds-stat-panel-group--max-4:has(.pds-stat-panel__action):has(.pds-stat-panel-group__item:nth-child(9):last-child){grid-template-columns:repeat(3,1fr)}}@container pds-stat-panel-group (min-width: 41rem){.pds-stat-panel-group--max-3:not(:has(.pds-stat-panel__action)):has(.pds-stat-panel-group__item:nth-child(4):last-child){grid-template-columns:repeat(2,1fr)}}@container pds-stat-panel-group (min-width: 50rem){.pds-stat-panel-group--max-3:has(.pds-stat-panel__action):has(.pds-stat-panel-group__item:nth-child(4):last-child){grid-template-columns:repeat(2,1fr)}}@container pds-stat-panel-group (min-width: 41rem) and (max-width: 54.9rem){.pds-stat-panel-group--max-4:not(:has(.pds-stat-panel__action)):has(.pds-stat-panel-group__item:nth-child(4):last-child){grid-template-columns:repeat(2,1fr)}}@container pds-stat-panel-group (min-width: 50rem) and (max-width: 66.9rem){.pds-stat-panel-group--max-4:has(.pds-stat-panel__action):has(.pds-stat-panel-group__item:nth-child(4):last-child){grid-template-columns:repeat(2,1fr)}}.pds-stepper-layout{--stepper-form-inset:0;container-type:inline-size;padding-inline:0;width:100%}@media (min-width:768px){.pds-stepper-layout{--stepper-form-inset:14cqi}}@media (min-width:1280px){.pds-stepper-layout{--stepper-form-inset:16cqi}}@media (min-width:768px){.pds-stepper-layout--full-width{--stepper-form-inset:calc(var(--pds-spacing-stepper-indicator-size)*2)}}.pds-stepper-layout__stepper-container{padding-block-start:var(--pds-spacing-m)}.pds-stepper-layout__form-container{padding-block-end:var(--pds-spacing-m);padding-block-start:var(--pds-spacing-3xl);padding-inline:var(--stepper-form-inset)}@media (min-width:768px){.pds-stepper-layout__form-container{margin-inline:auto}}.pds-stepper__button-group{column-gap:var(--pds-spacing-xl);display:flex;justify-content:space-between;margin-inline:0;max-width:none;padding-block-start:var(--pds-spacing-3xl);transform:none;width:auto}@media (min-width:768px){.pds-stepper__button-group{margin-inline:calc(var(--stepper-form-inset)*-1);padding-inline:calc(var(--pds-spacing-stepper-indicator-size)*2)}}.pds-three-item-layout .pds-grid-item{display:flex;flex-direction:column}.pds-three-item-layout--start .pds-grid-item{justify-content:flex-start}.pds-three-item-layout--center .pds-grid-item{justify-content:center}.pds-three-item-layout--end .pds-grid-item{justify-content:flex-end}.pds-two-item-layout .pds-grid-item{display:flex;flex-direction:column}.pds-two-item-layout--start .pds-grid-item{justify-content:flex-start}.pds-two-item-layout--center .pds-grid-item{justify-content:center}.pds-two-item-layout--end .pds-grid-item{justify-content:flex-end}}