@servicetitan/anvil2 3.17.0 → 3.18.0

package/dist/index2.css

@@ -1,6 +1,6 @@
 .anvil2 {/* ============================================
    Page & Container
-   ============================================ */._page_1a6ta_1 {
+   ============================================ */._page_1q2rx_1 {
   --a2-mod-page-border-subdued: var(--a2-size-quarter, 0.0625rem) solid var(--a2-border-color-subdued, light-dark(var(--a2-color-neutral-80, #e6e6e6), var(--a2-color-neutral-700, #404040)));
   --a2-mod-page-container-first-col: 16rem;
   --a2-mod-page-height: calc(100dvh - var(--offset, 0px));
@@ -16,7 +16,7 @@
   flex-direction: column;
   isolation: isolate;
   min-height: var(--a2-mod-page-height);
-}._container_1a6ta_29 {
+}._container_1q2rx_29 {
   --a2-mod-page-container-background-color: var(--a2-page-container-background-color, var(--a2-background-color-default, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-900, #1a1a1a))));
   --a2-mod-page-container-foreground-color: var(--a2-page-container-foreground-color, var(--a2-foreground-color-default, light-dark(var(--a2-color-neutral-950, #040404), var(--a2-color-neutral-0, #ffffff))));
   background-color: var(--a2-mod-page-container-background-color);
@@ -36,7 +36,7 @@
   padding: 0;
   transition: var(--a2-duration-slow, 300ms) var(--a2-transition-ease-in-out, cubic-bezier(0.4, 0, 0.6, 1));
 }@container page (min-width: 1024px) {
-  ._container_1a6ta_29 {
+  ._container_1q2rx_29 {
     grid-template-areas: "sidebar header panel" "sidebar content panel" "sidebar footer panel";
     --a2-mod-page-container-col-first: var(--a2-mod-page-container-first-col);
     --a2-mod-page-container-col-second: 1fr;
@@ -44,69 +44,69 @@
     grid-template-columns: var(--a2-mod-page-container-col-first) var(--a2-mod-page-container-col-second) var(--a2-mod-page-container-col-third);
     grid-template-rows: auto 1fr auto;
   }
-  ._container_1a6ta_29:has(> ._panel_1a6ta_58._open_1a6ta_58._small_1a6ta_58) {
+  ._container_1q2rx_29:has(> ._panel_1q2rx_58._open_1q2rx_58._small_1q2rx_58) {
     --a2-mod-page-container-col-third: var(--a2-mod-page-panel-size-small);
   }
-  ._container_1a6ta_29:has(> ._panel_1a6ta_58._open_1a6ta_58._medium_1a6ta_61) {
+  ._container_1q2rx_29:has(> ._panel_1q2rx_58._open_1q2rx_58._medium_1q2rx_61) {
     --a2-mod-page-container-col-third: var(--a2-mod-page-panel-size-medium);
   }
-  ._container_1a6ta_29:has(> ._panel_1a6ta_58._open_1a6ta_58._large_1a6ta_64) {
+  ._container_1q2rx_29:has(> ._panel_1q2rx_58._open_1q2rx_58._large_1q2rx_64) {
     --a2-mod-page-container-col-third: var(--a2-mod-page-panel-size-large);
   }
-  ._container_1a6ta_29:has(> ._sidebar_1a6ta_67._collapsed_1a6ta_67) {
+  ._container_1q2rx_29:has(> ._sidebar_1q2rx_67._collapsed_1q2rx_67) {
     --a2-mod-page-container-col-first: var(
       --a2-mod-page-sidebar-collapsed-width
     );
   }
-  ._container_1a6ta_29:not(:has(> ._sidebar_1a6ta_67)) {
+  ._container_1q2rx_29:not(:has(> ._sidebar_1q2rx_67)) {
     --a2-mod-page-container-col-first: 0px;
     grid-template-areas: "header panel" "content panel" "footer panel";
     grid-template-columns: 1fr var(--a2-mod-page-container-col-third);
   }
-  ._container_1a6ta_29:not(:has(> ._sidebar_1a6ta_67)) > ._content_1a6ta_77, ._container_1a6ta_29:not(:has(> ._sidebar_1a6ta_67)) > div:not(._panel_1a6ta_58, ._content-footer_1a6ta_77) {
+  ._container_1q2rx_29:not(:has(> ._sidebar_1q2rx_67)) > ._content_1q2rx_77, ._container_1q2rx_29:not(:has(> ._sidebar_1q2rx_67)) > div:not(._panel_1q2rx_58, ._content-footer_1q2rx_77) {
     grid-column: 1;
     width: 100%;
   }
-  ._container_1a6ta_29:not(:has(> ._sidebar_1a6ta_67)) > ._panel_1a6ta_58 {
+  ._container_1q2rx_29:not(:has(> ._sidebar_1q2rx_67)) > ._panel_1q2rx_58 {
     grid-column: 2;
   }
-  ._container_1a6ta_29 ._content_1a6ta_77 ._virtual-scroll-container_1a6ta_84 {
+  ._container_1q2rx_29 ._content_1q2rx_77 ._virtual-scroll-container_1q2rx_84 {
     display: block;
   }
 }/* ============================================
    Content
-   ============================================ */._content-wrapper_1a6ta_92 {
+   ============================================ */._content-wrapper_1q2rx_92 {
   container: content/inline-size;
   display: flex;
   flex-direction: column;
   grid-area: content;
-}._footer-slot_1a6ta_99 {
+}._footer-slot_1q2rx_99 {
   display: contents;
-}._content_1a6ta_77 {
+}._content_1q2rx_77 {
   container: content/inline-size;
   display: flex;
   grid-area: content;
-}._content-inner_1a6ta_109 {
+}._content-inner_1q2rx_109 {
   --a2-mod-page-content-inner-padding-inline: var(--a2-size-4, 1rem);
   flex-basis: 100%;
   padding-block: var(--a2-size-6, 1.5rem);
   padding-inline: var(--a2-mod-page-content-inner-padding-inline);
 }@container content (min-width: 768px) {
-  ._content-inner_1a6ta_109 {
+  ._content-inner_1q2rx_109 {
     --a2-mod-page-content-inner-padding-inline: var(--a2-size-8, 2rem);
   }
 }@container content (min-width: 1024px) {
-  ._content-inner_1a6ta_109 {
+  ._content-inner_1q2rx_109 {
     --a2-mod-page-content-inner-padding-inline: var(--a2-size-10, 2.5rem);
   }
 }@container content (min-width: 1280px) {
-  ._content-inner_1a6ta_109 {
+  ._content-inner_1q2rx_109 {
     --a2-mod-page-content-inner-padding-inline: var(--a2-size-12, 3rem);
   }
-}._content-header-inner_1a6ta_131 {
+}._content-header-inner_1q2rx_131 {
   padding-block-end: var(--a2-size-2, 0.5rem);
   padding-block-start: var(--a2-size-8, 2rem);
-}._content-footer_1a6ta_77 {
+}._content-footer_1q2rx_77 {
   --a2-mod-page-content-footer-background-color: var(--a2-page-content-footer-background-color, var(--a2-background-color-default, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-900, #1a1a1a))));
   --a2-mod-page-content-footer-border-color: var(--a2-page-content-footer-border-color, var(--a2-border-color-subdued, light-dark(var(--a2-color-neutral-80, #e6e6e6), var(--a2-color-neutral-700, #404040))));
   --a2-mod-page-content-footer-padding-inline: var(--a2-size-4, 1rem);
@@ -123,20 +123,20 @@
   position: sticky;
   right: 0;
 }@container page (min-width: 768px) {
-  ._content-footer_1a6ta_77 {
+  ._content-footer_1q2rx_77 {
     --a2-mod-page-content-footer-padding-inline: var(--a2-size-8, 2rem);
   }
 }@container page (min-width: 1024px) {
-  ._content-footer_1a6ta_77 {
+  ._content-footer_1q2rx_77 {
     --a2-mod-page-content-footer-padding-inline: var(--a2-size-10, 2.5rem);
   }
 }@container page (min-width: 1280px) {
-  ._content-footer_1a6ta_77 {
+  ._content-footer_1q2rx_77 {
     --a2-mod-page-content-footer-padding-inline: var(--a2-size-12, 3rem);
   }
 }/* ============================================
    Sidebar
-   ============================================ */._sidebar_1a6ta_67 {
+   ============================================ */._sidebar_1q2rx_67 {
   --a2-mod-page-sidebar-background-color: var(--a2-page-sidebar-background-color, var(--a2-background-color-default, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-900, #1a1a1a))));
   --a2-mod-page-sidebar-border-color: var(--a2-page-sidebar-border-color, var(--a2-border-color-subdued, light-dark(var(--a2-color-neutral-80, #e6e6e6), var(--a2-color-neutral-700, #404040))));
   --a2-mod-page-sidebar-padding: var(--a2-size-2, 0.5rem);
@@ -151,15 +151,15 @@
   position: relative;
   z-index: 2;
 }@container page (min-width: 1024px) {
-  ._sidebar_1a6ta_67 {
+  ._sidebar_1q2rx_67 {
     --a2-mod-page-sidebar-padding: 0;
     border-inline-end: var(--a2-size-quarter, 0.0625rem) solid var(--a2-mod-page-sidebar-border-color);
     box-shadow: var(--a2-mod-page-sidebar-shadow-color) var(--a2-shadow-size-float, var(--a2-size-0, 0rem) var(--a2-size-half, 0.125rem) var(--a2-size-2, 0.5rem));
   }
-}._collapsed_1a6ta_67 ._sidebar-inner_1a6ta_195 {
+}._collapsed_1q2rx_67 ._sidebar-inner_1q2rx_195 {
   display: none;
   opacity: 0;
-}._sidebar-inner_1a6ta_195 {
+}._sidebar-inner_1q2rx_195 {
   background-color: inherit;
   box-sizing: border-box;
   height: var(--a2-mod-page-height);
@@ -171,7 +171,7 @@
   transition-property: opacity, display;
   transition-timing-function: var(--a2-transition-ease-in-out, cubic-bezier(0.4, 0, 0.6, 1));
   width: 100%;
-}._sidebar-inner_1a6ta_195 > div {
+}._sidebar-inner_1q2rx_195 > div {
   background-color: inherit;
   bottom: 0;
   box-sizing: border-box;
@@ -185,11 +185,11 @@
   right: 0;
   top: 0;
 }@container page (min-width: 1024px) {
-  ._sidebar-inner_1a6ta_195 > div {
+  ._sidebar-inner_1q2rx_195 > div {
     left: 0;
     scrollbar-gutter: stable;
   }
-}._sidebar-header_1a6ta_234 {
+}._sidebar-header_1q2rx_234 {
   --a2-mod-page-sidebar-header-background-color: var(--a2-page-sidebar-header-background-color, var(--a2-background-color-default, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-900, #1a1a1a))));
   --a2-mod-page-sidebar-header-padding-block: var(--a2-size-4, 1rem);
   --a2-mod-page-sidebar-header-padding-inline: var(--a2-size-4, 1rem);
@@ -199,7 +199,7 @@
   padding-block: var(--a2-mod-page-sidebar-header-padding-block);
   padding-inline: var(--a2-mod-page-sidebar-header-padding-inline);
 }@container page (min-width: 1024px) {
-  ._sidebar-header_1a6ta_234 {
+  ._sidebar-header_1q2rx_234 {
     --a2-mod-page-sidebar-header-padding-block: var(--a2-size-6, 1.5rem);
     background-color: var(--a2-mod-page-sidebar-header-background-color);
     margin-block-end: var(--a2-size-1, 0.25rem);
@@ -208,7 +208,7 @@
     top: calc(var(--a2-size-6, 1.5rem) * -1);
     z-index: 1;
   }
-}._sidebar-adaptive-trigger-container_1a6ta_256 {
+}._sidebar-adaptive-trigger-container_1q2rx_256 {
   --a2-mod-page-sidebar-adaptive-trigger-container-background-color: var(--a2-page-sidebar-adaptive-trigger-container-background-color, var(--a2-background-color-default, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-900, #1a1a1a))));
   --a2-mod-page-sidebar-adaptive-trigger-container-shadow-color: var(--a2-page-sidebar-adaptive-trigger-container-shadow-color, var(--a2-shadow-color-default, light-dark(rgba(26, 26, 26, 0.0784313725), rgba(255, 255, 255, 0.0784313725))));
   background-color: var(--a2-mod-page-sidebar-adaptive-trigger-container-background-color);
@@ -218,40 +218,40 @@
   top: var(--offset, 0px);
   width: auto;
   z-index: 1;
-}._sidebar-adaptive-trigger_1a6ta_256 {
+}._sidebar-adaptive-trigger_1q2rx_256 {
   --a2-mod-page-sidebar-adaptive-trigger-background-color: var(--a2-page-sidebar-adaptive-trigger-background-color, var(--a2-background-color-stronger, light-dark(var(--a2-color-neutral-50, #eeeeee), var(--a2-color-neutral-700, #404040))));
   --a2-mod-page-sidebar-adaptive-trigger-foreground-color: var(--a2-page-sidebar-adaptive-trigger-foreground-color, var(--a2-foreground-color-default, light-dark(var(--a2-color-neutral-950, #040404), var(--a2-color-neutral-0, #ffffff))));
   background-color: var(--a2-mod-page-sidebar-adaptive-trigger-background-color);
   color: var(--a2-mod-page-sidebar-adaptive-trigger-foreground-color);
   justify-content: start;
   width: 100%;
-}._sidebar-adaptive-trigger-icon_1a6ta_277 {
+}._sidebar-adaptive-trigger-icon_1q2rx_277 {
   flex-grow: 1;
-}._sidebar-adaptive-container_1a6ta_281 {
+}._sidebar-adaptive-container_1q2rx_281 {
   overflow: auto;
-}._sidebar-adaptive-container_1a6ta_281 > div {
+}._sidebar-adaptive-container_1q2rx_281 > div {
   height: -webkit-fill-available;
   height: -moz-available;
   height: stretch;
-}._sidebar-adaptive_1a6ta_256 {
+}._sidebar-adaptive_1q2rx_256 {
   padding: var(--a2-size-2, 0.5rem);
 }/* ============================================
    Toggle Button
-   ============================================ */._toggle-button-wrapper_1a6ta_295 {
+   ============================================ */._toggle-button-wrapper_1q2rx_295 {
   height: 100%;
   overflow: visible;
   padding: 0;
   position: absolute;
   right: 0;
   width: 0px;
-}._toggle-button-tooltip_1a6ta_304 {
+}._toggle-button-tooltip_1q2rx_304 {
   display: block;
   margin-left: -1rem;
   position: sticky;
   top: calc(var(--a2-size-6, 1.5rem) + var(--offset, 0px));
   width: -moz-fit-content;
   width: fit-content;
-}._toggle-button_1a6ta_295 {
+}._toggle-button_1q2rx_295 {
   --a2-internal-page-toggle-button-background-color: var(
     --a2-mod-page-toggle-button-background-color
   );
@@ -266,19 +266,19 @@
   min-width: var(--a2-mod-page-toggle-button-size);
   padding: var(--a2-size-2, 0.5rem);
   width: var(--a2-mod-page-toggle-button-size);
-}._toggle-button_1a6ta_295::before {
+}._toggle-button_1q2rx_295::before {
   border-radius: inherit;
-}._toggle-button_1a6ta_295:hover {
+}._toggle-button_1q2rx_295:hover {
   --a2-internal-page-toggle-button-background-color: var(
     --a2-mod-page-toggle-button-background-color-hover
   );
-}._toggle-button_1a6ta_295:active {
+}._toggle-button_1q2rx_295:active {
   --a2-internal-page-toggle-button-background-color: var(
     --a2-mod-page-toggle-button-background-color-active
   );
 }/* ============================================
    Panel
-   ============================================ */._panel_1a6ta_58 {
+   ============================================ */._panel_1q2rx_58 {
   --a2-mod-page-panel-background-color: var(--a2-page-panel-background-color, var(--a2-background-color-default, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-900, #1a1a1a))));
   --a2-mod-page-panel-border-color: var(--a2-page-panel-border-color, var(--a2-border-color-subdued, light-dark(var(--a2-color-neutral-80, #e6e6e6), var(--a2-color-neutral-700, #404040))));
   --a2-mod-page-panel-padding-block: var(--a2-size-4, 1rem);
@@ -293,17 +293,17 @@
   width: -moz-available;
   width: stretch;
 }@container page (min-width: 1024px) {
-  ._panel_1a6ta_58 {
+  ._panel_1q2rx_58 {
     border-inline-start: var(--a2-size-quarter, 0.0625rem) solid var(--a2-mod-page-panel-border-color);
     flex-direction: row;
   }
-}._noPadding_1a6ta_365 ._panel-inner_1a6ta_365 {
+}._noPadding_1q2rx_365 ._panel-inner_1q2rx_365 {
   padding: 0;
-}._panel_1a6ta_58:not(._open_1a6ta_58) ._panel-inner_1a6ta_365 {
+}._panel_1q2rx_58:not(._open_1q2rx_58) ._panel-inner_1q2rx_365 {
   display: none;
   opacity: 0;
   overflow: clip;
-}._panel-inner_1a6ta_365 {
+}._panel-inner_1q2rx_365 {
   background-color: inherit;
   box-sizing: border-box;
   outline: none;
@@ -315,11 +315,11 @@
   transition-timing-function: var(--a2-transition-ease-in-out, cubic-bezier(0.4, 0, 0.6, 1));
   width: 100%;
 }@container page (min-width: 768px) {
-  ._panel-inner_1a6ta_365 {
+  ._panel-inner_1q2rx_365 {
     --a2-mod-page-panel-padding-inline: var(--a2-size-8, 2rem);
   }
 }@container page (min-width: 1024px) {
-  ._panel-inner_1a6ta_365 {
+  ._panel-inner_1q2rx_365 {
     --a2-mod-page-panel-padding-block: var(--a2-size-6, 1.5rem);
     --a2-mod-page-panel-padding-inline: var(--a2-size-4, 1rem);
     height: var(--a2-mod-page-height);
@@ -329,24 +329,24 @@
     scrollbar-gutter: stable;
     top: var(--offset, 0px);
   }
-  ._panel-inner_1a6ta_365 ._drilldown-open_1a6ta_403 {
+  ._panel-inner_1q2rx_365 ._drilldown-open_1q2rx_403 {
     overflow-y: hidden;
   }
 }@container page (min-width: 1024px) {
-  ._small_1a6ta_58 ._panel-inner_1a6ta_365 {
+  ._small_1q2rx_58 ._panel-inner_1q2rx_365 {
     min-width: var(--a2-mod-page-panel-size-small);
   }
 }@container page (min-width: 1024px) {
-  ._medium_1a6ta_61 ._panel-inner_1a6ta_365 {
+  ._medium_1q2rx_61 ._panel-inner_1q2rx_365 {
     min-width: var(--a2-mod-page-panel-size-medium);
   }
 }@container page (min-width: 1024px) {
-  ._large_1a6ta_64 ._panel-inner_1a6ta_365 {
+  ._large_1q2rx_64 ._panel-inner_1q2rx_365 {
     min-width: var(--a2-mod-page-panel-size-large);
   }
 }/* ============================================
    Virtual Scroll Container
-   ============================================ */._virtual-scroll-container_1a6ta_84 {
+   ============================================ */._virtual-scroll-container_1q2rx_84 {
   bottom: 0;
   display: none;
   height: var(--a2-mod-page-height);
@@ -356,52 +356,57 @@
   z-index: 1;
 }/* ============================================
    Header
-   ============================================ */._header_1a6ta_442 {
+   ============================================ */._header_1q2rx_442 {
   flex: 0 0 auto;
   grid-area: header;
-}._header_1a6ta_442 ._layout_1a6ta_446 {
+}._header_1q2rx_442 ._layout_1q2rx_446 {
   --a2-mod-layout-grid-gap: var(--a2-size-4, 1rem);
 }@container page (min-width: 768px) {
-  ._header_1a6ta_442 ._layout_1a6ta_446 {
+  ._header_1q2rx_442 ._layout_1q2rx_446 {
     --a2-mod-layout-grid-gap: var(--a2-size-4, 1rem);
   }
-}._header_1a6ta_442 ._title-wrapper_1a6ta_454,
-._header_1a6ta_442 ._title_1a6ta_454 {
+}._header_1q2rx_442 ._title-wrapper_1q2rx_454,
+._header_1q2rx_442 ._title_1q2rx_454 {
   display: inline;
-}._header_1a6ta_442 ._title_1a6ta_454 {
+}._header_1q2rx_442 ._title_1q2rx_454 {
   margin-block-end: 0;
-}._header_1a6ta_442 ._preference-action_1a6ta_461 {
+}._header_1q2rx_442 ._preference-action_1q2rx_461 {
   margin-inline-start: var(--a2-size-2, 0.5rem);
-}._header_1a6ta_442 ._chips_1a6ta_464 {
+}._header_1q2rx_442 ._chips_1q2rx_464 {
   gap: var(--a2-size-2, 0.5rem);
   margin-block-start: var(--a2-size-3, 0.75rem);
-}._header_1a6ta_442 ._actions_1a6ta_468 {
+}._header_1q2rx_442 ._actions_1q2rx_468 {
   flex-wrap: wrap;
   gap: var(--a2-size-3, 0.75rem);
-}@container content (max-width: 768px) {
-  ._header_1a6ta_442 ._actions_1a6ta_468 > * {
+}@container (max-width: 768px) {
+  ._header_1q2rx_442 ._actions_1q2rx_468 > * {
+    --a2-mod-button-width: 100%;
     flex: 1 1 calc(50% - var(--a2-size-3, 0.75rem));
-    min-width: min(100%, 200px);
+    min-width: 0;
   }
-  ._header_1a6ta_442 ._actions_1a6ta_468:has(button[class*=primary]) button[class*=primary] {
+  ._header_1q2rx_442 ._actions_1q2rx_468:has(button[class*=primary]) button[class*=primary] {
     order: -1;
   }
-}._header_1a6ta_442 ._description_1a6ta_481 {
+}@container (max-width: 640px) {
+  ._header_1q2rx_442 ._actions_1q2rx_468 > * {
+    flex-basis: 100%;
+  }
+}._header_1q2rx_442 ._description_1q2rx_487 {
   max-width: 80ch;
 }/* ============================================
    Animation & Transitions
    ============================================ */@starting-style {
-  ._sidebar_1a6ta_67._collapsed_1a6ta_67 ._sidebar-inner_1a6ta_195 {
+  ._sidebar_1q2rx_67._collapsed_1q2rx_67 ._sidebar-inner_1q2rx_195 {
     display: none;
     opacity: 0;
   }
-  ._panel_1a6ta_58:not(._open_1a6ta_58) ._panel-inner_1a6ta_365 {
+  ._panel_1q2rx_58:not(._open_1q2rx_58) ._panel-inner_1q2rx_365 {
     display: none;
     opacity: 0;
   }
 }
-}html:has(._page_1a6ta_1) {
+}html:has(._page_1q2rx_1) {
   scrollbar-width: none;
-}html:has(._page_1a6ta_1)::-webkit-scrollbar {
+}html:has(._page_1q2rx_1)::-webkit-scrollbar {
   display: none;
 }

package/dist/{portalScopeClassNames-DA28LrXe.js → portalScopeClassNames-CMdDYHE0.js}

@@ -1,7 +1,7 @@
 import { c as cx } from './index-De1g9FRV.js';
 import { useContext } from 'react';
 import { T as ThemeProviderContext } from './ThemeProviderContext-l52GohYT.js';
-import { t as themeStyles } from './ThemeProvider.module-B9qgsQ8S.js';
+import { t as themeStyles } from './ThemeProvider.module-BkKwAw2f.js';
 
 const portalScopeClassNames = cx("anvil2", themeStyles["theme-core"]);
 function usePortalScopeStyle(style) {
@@ -13,4 +13,4 @@ function usePortalScopeStyle(style) {
 }
 
 export { portalScopeClassNames as p, usePortalScopeStyle as u };
-//# sourceMappingURL=portalScopeClassNames-DA28LrXe.js.map
+//# sourceMappingURL=portalScopeClassNames-CMdDYHE0.js.map

package/dist/{portalScopeClassNames-DA28LrXe.js.map → portalScopeClassNames-CMdDYHE0.js.map}

@@ -1 +1 @@
-{"version":3,"file":"portalScopeClassNames-DA28LrXe.js","sources":["../src/internal/functions/portalScopeClassNames.ts"],"sourcesContent":["import cx from \"classnames\";\nimport { type CSSProperties, useContext } from \"react\";\n\nimport { ThemeProviderContext } from \"../../providers/ThemeProvider/internal/ThemeProviderContext\";\nimport themeStyles from \"../../providers/ThemeProvider/ThemeProvider.module.scss\";\n\n/**\n * Class names that re-establish the Anvil2 styling scope on a container.\n *\n * Native `popover` / top-layer elements are promoted out of ancestor\n * `AnvilProvider` `.anvil2` scope. Without the scope, descendants miss\n * `--a2-*` tokens and scoped component rules.\n *\n * Pair with `usePortalScopeStyle` so custom `ThemeProvider` tokens are\n * re-applied; `.theme-core` otherwise resets them to core defaults.\n */\nexport const portalScopeClassNames = cx(\"anvil2\", themeStyles[\"theme-core\"]);\n\n/**\n * Merge custom-theme CSS variables onto a top-layer surface's `style`.\n *\n * `.theme-core` on the same node redefines `--a2-*` to core defaults, which\n * wins over inherited `ThemeProvider` variables. Re-applying `themeStyle`\n * after that reset keeps custom themes intact.\n *\n * Pass the element's own styles so positioning / UA resets still win.\n */\nexport function usePortalScopeStyle(style?: CSSProperties): CSSProperties {\n  const { themeStyle } = useContext(ThemeProviderContext);\n  if (!themeStyle) {\n    return style ?? {};\n  }\n  return { ...themeStyle, ...style };\n}\n"],"names":[],"mappings":";;;;;AAgBO,MAAM,qBAAA,GAAwB,EAAA,CAAG,QAAA,EAAU,WAAA,CAAY,YAAY,CAAC;AAWpE,SAAS,oBAAoB,KAAA,EAAsC;AACxE,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,UAAA,CAAW,oBAAoB,CAAA;AACtD,EAAA,IAAI,CAAC,UAAA,EAAY;AACf,IAAA,OAAO,SAAS,EAAC;AAAA,EACnB;AACA,EAAA,OAAO,EAAE,GAAG,UAAA,EAAY,GAAG,KAAA,EAAM;AACnC;;;;"}
+{"version":3,"file":"portalScopeClassNames-CMdDYHE0.js","sources":["../src/internal/functions/portalScopeClassNames.ts"],"sourcesContent":["import cx from \"classnames\";\nimport { type CSSProperties, useContext } from \"react\";\n\nimport { ThemeProviderContext } from \"../../providers/ThemeProvider/internal/ThemeProviderContext\";\nimport themeStyles from \"../../providers/ThemeProvider/ThemeProvider.module.scss\";\n\n/**\n * Class names that re-establish the Anvil2 styling scope on a container.\n *\n * Native `popover` / top-layer elements are promoted out of ancestor\n * `AnvilProvider` `.anvil2` scope. Without the scope, descendants miss\n * `--a2-*` tokens and scoped component rules.\n *\n * Pair with `usePortalScopeStyle` so custom `ThemeProvider` tokens are\n * re-applied; `.theme-core` otherwise resets them to core defaults.\n */\nexport const portalScopeClassNames = cx(\"anvil2\", themeStyles[\"theme-core\"]);\n\n/**\n * Merge custom-theme CSS variables onto a top-layer surface's `style`.\n *\n * `.theme-core` on the same node redefines `--a2-*` to core defaults, which\n * wins over inherited `ThemeProvider` variables. Re-applying `themeStyle`\n * after that reset keeps custom themes intact.\n *\n * Pass the element's own styles so positioning / UA resets still win.\n */\nexport function usePortalScopeStyle(style?: CSSProperties): CSSProperties {\n  const { themeStyle } = useContext(ThemeProviderContext);\n  if (!themeStyle) {\n    return style ?? {};\n  }\n  return { ...themeStyle, ...style };\n}\n"],"names":[],"mappings":";;;;;AAgBO,MAAM,qBAAA,GAAwB,EAAA,CAAG,QAAA,EAAU,WAAA,CAAY,YAAY,CAAC;AAWpE,SAAS,oBAAoB,KAAA,EAAsC;AACxE,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,UAAA,CAAW,oBAAoB,CAAA;AACtD,EAAA,IAAI,CAAC,UAAA,EAAY;AACf,IAAA,OAAO,SAAS,EAAC;AAAA,EACnB;AACA,EAAA,OAAO,EAAE,GAAG,UAAA,EAAY,GAAG,KAAA,EAAM;AACnC;;;;"}

package/dist/src/beta/components/Details/Details.d.ts

@@ -0,0 +1,25 @@
+import { DetailsProps } from '../../../components/Details';
+export type { DetailsProps };
+/**
+ * Disclosure container that coordinates its Summary and Content. Supports
+ * controlled or uncontrolled expanded state. The root and Content are the
+ * stable Details'; the Summary takes a `label` and typed `attributes` cells in
+ * place of `children`.
+ */
+export declare const Details: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('../../..').LayoutUtilProps & {
+    expanded?: boolean;
+    defaultExpanded?: boolean;
+} & import('react').RefAttributes<HTMLDivElement>> & {
+    /** Row holding the button that toggles the disclosure content, plus optional attribute cells. */
+    Summary: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "children"> & import('../../..').DataTrackingId & {
+        label: string;
+        labelProps?: import('./DetailsSummary').DetailsSummaryLabelProps;
+        templateColumns?: import('../../..').GridProps["templateColumns"];
+        attributes?: import('./DetailsSummary').DetailsSummaryColumnAttribute[];
+    } & import('react').RefAttributes<HTMLButtonElement>>;
+    /** Expandable content associated with the summary. */
+    Content: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        height?: string | number;
+        maxHeight?: string | number;
+    } & import('react').RefAttributes<HTMLDivElement>>;
+};

package/dist/src/beta/components/Details/DetailsSummary.d.ts

@@ -0,0 +1,121 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { DataTrackingId } from '../../../types';
+import { ButtonProps } from '../../../components/Button';
+import { ChipProps } from '../../../components/Chip';
+import { MenuItemProps } from '../../../components/Menu';
+import { GridProps } from '../../../components/Grid';
+import { BodyTextProps } from '../../../components/Text/types';
+/**
+ * Text cell rendered as `label: value`, with the value in bold. Either can be
+ * left out; the colon shows only when both are set.
+ */
+export type DetailsSummaryTextAttribute = {
+    type: "text";
+    /** Regular-weight text before the value. */
+    label?: string;
+    /** Bold text after the label. */
+    value?: string;
+    /** Text scale. Defaults to `medium`. */
+    size?: BodyTextProps["size"];
+};
+/** Chip cell. `label` and `color` are the Chip's own props. */
+export type DetailsSummaryChipAttribute = {
+    type: "chip";
+    /** Visible chip text. */
+    label: ChipProps["label"];
+    /** Surface color; the chip derives a contrast-safe foreground. */
+    color?: ChipProps["color"];
+};
+/** Button cell. Only a labeled button, so there is no icon-only variant. */
+export type DetailsSummaryButtonAttribute = {
+    type: "button";
+    /** Visible button text. */
+    label: string;
+    /** Visual emphasis. Defaults to `secondary`. */
+    appearance?: ButtonProps["appearance"];
+    /** A bare icon renders before the label; use `{ after }` to trail it. */
+    icon?: ButtonProps["icon"];
+    /** Runs on click. The click does not toggle the Details. */
+    onClick?: ButtonProps["onClick"];
+};
+export type DetailsSummaryMenuItem = {
+    /** Visible item text. */
+    label: string;
+    /** Runs when the item is selected; the menu then closes. */
+    onClick?: MenuItemProps["onClick"];
+    /** Keeps the item in keyboard navigation but prevents selection. */
+    disabled?: boolean;
+};
+/** Menu cell: a button that opens a flat list of items. No submenus. */
+export type DetailsSummaryMenuAttribute = {
+    type: "menu";
+    /** Trigger button text. */
+    label: string;
+    /** Items listed in the menu, in order. */
+    items: DetailsSummaryMenuItem[];
+};
+/** An attribute cell. Each takes one grid track, following the label in order. */
+export type DetailsSummaryColumnAttribute = DetailsSummaryTextAttribute | DetailsSummaryChipAttribute | DetailsSummaryButtonAttribute | DetailsSummaryMenuAttribute;
+/** Options for the label, which always renders as body text. */
+export type DetailsSummaryLabelProps = {
+    /** Text scale. Defaults to `medium`. */
+    size?: BodyTextProps["size"];
+    /**
+     * Adds an info button right after the label that shows this text in a
+     * tooltip. The button sits beside the toggle, not inside it, so using it does
+     * not expand or collapse the Details.
+     */
+    moreInfo?: string;
+};
+export type DetailsSummaryProps = Omit<ComponentPropsWithoutRef<"button">, "children"> & DataTrackingId & {
+    /**
+     * Text for the first cell, beside the expand arrow. It is bold by default
+     * and supports two inline markers: `*italic*` and `==highlight==`.
+     */
+    label: string;
+    /** Options for the label's Text. */
+    labelProps?: DetailsSummaryLabelProps;
+    /**
+     * Grid tracks shared by the label and the attribute cells, such as
+     * `1fr 2fr 1fr`. The label takes the first track and each cell takes the
+     * next one, so size a track wider for a cell that needs more room. Cells
+     * beyond the tracks wrap to a new row. Defaults to `1fr`.
+     */
+    templateColumns?: GridProps["templateColumns"];
+    /**
+     * Cells placed on the grid after the label, each in its own track. They sit
+     * beside the toggle button, not inside it: clicking text, a chip, or empty
+     * space in the row toggles the disclosure, while a button or menu cell runs
+     * its own action.
+     */
+    attributes?: DetailsSummaryColumnAttribute[];
+};
+/**
+ * Summary row for Details.Content: a toggle button with the label, and the
+ * attribute cells beside it. `className` and `style` apply to the row. Every other
+ * prop, including `ref` and a supplied `onClick`, goes to the toggle button; the
+ * `onClick` runs before the internal expanded state toggles.
+ */
+export declare const DetailsSummary: import('react').ForwardRefExoticComponent<Omit<Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "children"> & DataTrackingId & {
+    /**
+     * Text for the first cell, beside the expand arrow. It is bold by default
+     * and supports two inline markers: `*italic*` and `==highlight==`.
+     */
+    label: string;
+    /** Options for the label's Text. */
+    labelProps?: DetailsSummaryLabelProps;
+    /**
+     * Grid tracks shared by the label and the attribute cells, such as
+     * `1fr 2fr 1fr`. The label takes the first track and each cell takes the
+     * next one, so size a track wider for a cell that needs more room. Cells
+     * beyond the tracks wrap to a new row. Defaults to `1fr`.
+     */
+    templateColumns?: GridProps["templateColumns"];
+    /**
+     * Cells placed on the grid after the label, each in its own track. They sit
+     * beside the toggle button, not inside it: clicking text, a chip, or empty
+     * space in the row toggles the disclosure, while a button or menu cell runs
+     * its own action.
+     */
+    attributes?: DetailsSummaryColumnAttribute[];
+} & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/src/beta/components/Details/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Details';
+export { Details as default } from './Details';
+export type { DetailsSummaryButtonAttribute, DetailsSummaryChipAttribute, DetailsSummaryColumnAttribute, DetailsSummaryLabelProps, DetailsSummaryMenuAttribute, DetailsSummaryMenuItem, DetailsSummaryProps, DetailsSummaryTextAttribute, } from './DetailsSummary';
+export type { DetailsContentProps } from '../../../components/Details';

package/dist/src/beta/components/Details/internal/DetailsArrow.d.ts

@@ -0,0 +1,11 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { BodyTextProps } from '../../../../components/Text/types';
+export type DetailsArrowProps = ComponentPropsWithoutRef<"span"> & {
+    /** The label's text scale; the arrow scales with it. Defaults to `medium`. */
+    size?: BodyTextProps["size"];
+};
+/** Rotating indicator that reflects the parent Details state. */
+export declare const DetailsArrow: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    /** The label's text scale; the arrow scales with it. Defaults to `medium`. */
+    size?: BodyTextProps["size"];
+} & import('react').RefAttributes<HTMLSpanElement>>;

package/dist/src/beta/components/Details/internal/DetailsSummaryCells.d.ts

@@ -0,0 +1,5 @@
+import { DetailsSummaryColumnAttribute } from '../DetailsSummary';
+/** Grid items for the attribute cells; the Summary's grid places them. */
+export declare function DetailsSummaryCells({ cells, }: {
+    cells: DetailsSummaryColumnAttribute[];
+}): import("react/jsx-runtime").JSX.Element;

package/dist/src/beta/components/Page/Page.d.ts

@@ -13,6 +13,7 @@ export declare const Page: import('react').ForwardRefExoticComponent<Omit<import
         localStorageKey?: string;
         "data-tracking-id"?: string;
         currentPageTitle?: string;
+        onOpenChange?: (open: boolean) => void;
     } & import('react').RefAttributes<HTMLDivElement>>;
     /** Sidebar heading region hidden from accessibility when collapsed. */
     SidebarHeader: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;

package/dist/src/beta/components/Page/PageSidebar.d.ts

@@ -9,6 +9,12 @@ export type PageSidebarProps = ComponentPropsWithoutRef<"div"> & {
     ["data-tracking-id"]?: string;
     /** Smaller-page trigger text. Defaults to `"Menu"`. */
     currentPageTitle?: string;
+    /**
+     * Called when the desktop sidebar collapses or expands; `open` is `true` when
+     * expanded. Not called on mount. The small-page popover layout does not report
+     * changes.
+     */
+    onOpenChange?: (open: boolean) => void;
 };
 /**
  * Collapsible desktop sidebar with persisted state. On smaller pages it
@@ -21,4 +27,10 @@ export declare const PageSidebar: import('react').ForwardRefExoticComponent<Omit
     "data-tracking-id"?: string;
     /** Smaller-page trigger text. Defaults to `"Menu"`. */
     currentPageTitle?: string;
+    /**
+     * Called when the desktop sidebar collapses or expands; `open` is `true` when
+     * expanded. Not called on mount. The small-page popover layout does not report
+     * changes.
+     */
+    onOpenChange?: (open: boolean) => void;
 } & import('react').RefAttributes<HTMLDivElement>>;