@visitwonders/assembly 0.1.0 → 0.2.0

package/dist/overlay/drawer.css

@@ -1,3 +1,4 @@
+/* src/overlay/drawer.css */
 /* ===================================
  * Drawer Component
  * Slide-in panel from screen edge
@@ -7,7 +8,7 @@
  * Drawer Container (Portal)
  * =================================== */
 
-.drawer-container {
+.drawer-container_e20b0b74f {
   /* Positioning - fixed, z-index shared with modal */
   position: fixed;
   z-index: var(--z-modal);
@@ -22,7 +23,7 @@
 }
 
 /* Focus reset for container */
-.drawer-container:focus {
+.drawer-container_e20b0b74f:focus {
   outline: none;
 }
 
@@ -31,7 +32,7 @@
  * =================================== */
 
 /* Right side (default) */
-.drawer-container[data-side="right"] {
+.drawer-container_e20b0b74f[data-side="right"] {
   top: 0;
   right: 0;
   height: 100vh;
@@ -40,7 +41,7 @@
 }
 
 /* Left side */
-.drawer-container[data-side="left"] {
+.drawer-container_e20b0b74f[data-side="left"] {
   top: 0;
   left: 0;
   height: 100vh;
@@ -49,7 +50,7 @@
 }
 
 /* Top side */
-.drawer-container[data-side="top"] {
+.drawer-container_e20b0b74f[data-side="top"] {
   top: 0;
   left: 0;
   right: 0;
@@ -59,7 +60,7 @@
 }
 
 /* Bottom side */
-.drawer-container[data-side="bottom"] {
+.drawer-container_e20b0b74f[data-side="bottom"] {
   bottom: 0;
   left: 0;
   right: 0;
@@ -72,32 +73,32 @@
  * Size Variants - Horizontal (left/right)
  * =================================== */
 
-.drawer-container[data-side="right"][data-size="sm"],
-.drawer-container[data-side="left"][data-size="sm"] {
+.drawer-container_e20b0b74f[data-side="right"][data-size="sm"],
+.drawer-container_e20b0b74f[data-side="left"][data-size="sm"] {
   width: 320px;
   max-width: 100vw;
 }
 
-.drawer-container[data-side="right"][data-size="md"],
-.drawer-container[data-side="left"][data-size="md"] {
+.drawer-container_e20b0b74f[data-side="right"][data-size="md"],
+.drawer-container_e20b0b74f[data-side="left"][data-size="md"] {
   width: 400px;
   max-width: 100vw;
 }
 
-.drawer-container[data-side="right"][data-size="lg"],
-.drawer-container[data-side="left"][data-size="lg"] {
+.drawer-container_e20b0b74f[data-side="right"][data-size="lg"],
+.drawer-container_e20b0b74f[data-side="left"][data-size="lg"] {
   width: 560px;
   max-width: 100vw;
 }
 
-.drawer-container[data-side="right"][data-size="xl"],
-.drawer-container[data-side="left"][data-size="xl"] {
+.drawer-container_e20b0b74f[data-side="right"][data-size="xl"],
+.drawer-container_e20b0b74f[data-side="left"][data-size="xl"] {
   width: 720px;
   max-width: 100vw;
 }
 
-.drawer-container[data-side="right"][data-size="full"],
-.drawer-container[data-side="left"][data-size="full"] {
+.drawer-container_e20b0b74f[data-side="right"][data-size="full"],
+.drawer-container_e20b0b74f[data-side="left"][data-size="full"] {
   width: 100vw;
 }
 
@@ -105,32 +106,32 @@
  * Size Variants - Vertical (top/bottom)
  * =================================== */
 
-.drawer-container[data-side="top"][data-size="sm"],
-.drawer-container[data-side="bottom"][data-size="sm"] {
+.drawer-container_e20b0b74f[data-side="top"][data-size="sm"],
+.drawer-container_e20b0b74f[data-side="bottom"][data-size="sm"] {
   height: 200px;
   max-height: 100vh;
 }
 
-.drawer-container[data-side="top"][data-size="md"],
-.drawer-container[data-side="bottom"][data-size="md"] {
+.drawer-container_e20b0b74f[data-side="top"][data-size="md"],
+.drawer-container_e20b0b74f[data-side="bottom"][data-size="md"] {
   height: 320px;
   max-height: 100vh;
 }
 
-.drawer-container[data-side="top"][data-size="lg"],
-.drawer-container[data-side="bottom"][data-size="lg"] {
+.drawer-container_e20b0b74f[data-side="top"][data-size="lg"],
+.drawer-container_e20b0b74f[data-side="bottom"][data-size="lg"] {
   height: 480px;
   max-height: 100vh;
 }
 
-.drawer-container[data-side="top"][data-size="xl"],
-.drawer-container[data-side="bottom"][data-size="xl"] {
+.drawer-container_e20b0b74f[data-side="top"][data-size="xl"],
+.drawer-container_e20b0b74f[data-side="bottom"][data-size="xl"] {
   height: 640px;
   max-height: 100vh;
 }
 
-.drawer-container[data-side="top"][data-size="full"],
-.drawer-container[data-side="bottom"][data-size="full"] {
+.drawer-container_e20b0b74f[data-side="top"][data-size="full"],
+.drawer-container_e20b0b74f[data-side="bottom"][data-size="full"] {
   height: 100vh;
 }
 
@@ -138,7 +139,7 @@
  * Drawer Content
  * =================================== */
 
-.drawer-content {
+.drawer-content_e20b0b74f {
   display: flex;
   flex-direction: column;
   flex: 1;
@@ -150,13 +151,13 @@
  * Drawer Header
  * =================================== */
 
-.drawer-header {
+.drawer-header_e20b0b74f {
   /* Layout */
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   justify-content: space-between;
   gap: var(--spacing-3);
-  padding: var(--spacing-4);
+  padding: var(--spacing-inset-md);
 
   /* Border */
   border-bottom: 1px solid var(--color-border-subtle);
@@ -165,7 +166,7 @@
   flex-shrink: 0;
 }
 
-.drawer-title {
+.drawer-title_e20b0b74f {
   /* Typography */
   font-size: var(--font-size-lg);
   font-weight: var(--font-weight-semibold);
@@ -177,7 +178,7 @@
   flex: 1;
 }
 
-.drawer-header-close {
+.drawer-header-close_e20b0b74f {
   /* Reset button styles */
   appearance: none;
   background: none;
@@ -197,12 +198,12 @@
     background-color var(--duration-150) var(--easing-out);
 }
 
-.drawer-header-close:hover {
+.drawer-header-close_e20b0b74f:hover {
   color: var(--color-text);
   background: var(--color-bg-neutral-subtle);
 }
 
-.drawer-header-close:focus-visible {
+.drawer-header-close_e20b0b74f:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
 }
@@ -211,9 +212,9 @@
  * Drawer Body
  * =================================== */
 
-.drawer-body {
+.drawer-body_e20b0b74f {
   /* Layout */
-  padding: var(--spacing-4);
+  padding: var(--spacing-inset-md);
 
   /* Scrollable */
   overflow-y: auto;
@@ -229,13 +230,13 @@
  * Drawer Footer
  * =================================== */
 
-.drawer-footer {
+.drawer-footer_e20b0b74f {
   /* Layout */
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: var(--spacing-2);
-  padding: var(--spacing-4);
+  padding: var(--spacing-inset-md);
 
   /* Border */
   border-top: 1px solid var(--color-border-subtle);
@@ -244,11 +245,47 @@
   flex-shrink: 0;
 }
 
+/* ===================================
+ * Padding Variants
+ * =================================== */
+
+.drawer-container_e20b0b74f[data-padding="none"] .drawer-header_e20b0b74f,
+.drawer-container_e20b0b74f[data-padding="none"] .drawer-body_e20b0b74f,
+.drawer-container_e20b0b74f[data-padding="none"] .drawer-footer_e20b0b74f {
+  padding: 0;
+}
+
+.drawer-container_e20b0b74f[data-padding="xs"] .drawer-header_e20b0b74f,
+.drawer-container_e20b0b74f[data-padding="xs"] .drawer-body_e20b0b74f,
+.drawer-container_e20b0b74f[data-padding="xs"] .drawer-footer_e20b0b74f {
+  padding: var(--spacing-inset-md) var(--spacing-inset-xs);
+}
+
+.drawer-container_e20b0b74f[data-padding="sm"] .drawer-header_e20b0b74f,
+.drawer-container_e20b0b74f[data-padding="sm"] .drawer-body_e20b0b74f,
+.drawer-container_e20b0b74f[data-padding="sm"] .drawer-footer_e20b0b74f {
+  padding: var(--spacing-inset-md) var(--spacing-inset-sm);
+}
+
+/* md is the default — uses --spacing-inset-md set on each element */
+
+.drawer-container_e20b0b74f[data-padding="lg"] .drawer-header_e20b0b74f,
+.drawer-container_e20b0b74f[data-padding="lg"] .drawer-body_e20b0b74f,
+.drawer-container_e20b0b74f[data-padding="lg"] .drawer-footer_e20b0b74f {
+  padding: var(--spacing-inset-md) var(--spacing-inset-lg);
+}
+
+.drawer-container_e20b0b74f[data-padding="xl"] .drawer-header_e20b0b74f,
+.drawer-container_e20b0b74f[data-padding="xl"] .drawer-body_e20b0b74f,
+.drawer-container_e20b0b74f[data-padding="xl"] .drawer-footer_e20b0b74f {
+  padding: var(--spacing-inset-md) var(--spacing-inset-xl);
+}
+
 /* ===================================
  * Animations - Right Side
  * =================================== */
 
-@keyframes drawer-slide-in-right {
+@keyframes drawer-slide-in-right__e20b0b74f {
   from {
     transform: translateX(100%);
   }
@@ -257,7 +294,7 @@
   }
 }
 
-@keyframes drawer-slide-out-right {
+@keyframes drawer-slide-out-right__e20b0b74f {
   from {
     transform: translateX(0);
   }
@@ -266,13 +303,13 @@
   }
 }
 
-.drawer-container[data-side="right"][data-state="open"] {
-  animation: drawer-slide-in-right var(--duration-200) var(--easing-out)
+.drawer-container_e20b0b74f[data-side="right"][data-state="open"] {
+  animation: drawer-slide-in-right__e20b0b74f var(--duration-200) var(--easing-out)
     forwards;
 }
 
-.drawer-container[data-side="right"][data-state="closed"] {
-  animation: drawer-slide-out-right var(--duration-150) var(--easing-in)
+.drawer-container_e20b0b74f[data-side="right"][data-state="closed"] {
+  animation: drawer-slide-out-right__e20b0b74f var(--duration-150) var(--easing-in)
     forwards;
 }
 
@@ -280,7 +317,7 @@
  * Animations - Left Side
  * =================================== */
 
-@keyframes drawer-slide-in-left {
+@keyframes drawer-slide-in-left__e20b0b74f {
   from {
     transform: translateX(-100%);
   }
@@ -289,7 +326,7 @@
   }
 }
 
-@keyframes drawer-slide-out-left {
+@keyframes drawer-slide-out-left__e20b0b74f {
   from {
     transform: translateX(0);
   }
@@ -298,19 +335,19 @@
   }
 }
 
-.drawer-container[data-side="left"][data-state="open"] {
-  animation: drawer-slide-in-left var(--duration-200) var(--easing-out) forwards;
+.drawer-container_e20b0b74f[data-side="left"][data-state="open"] {
+  animation: drawer-slide-in-left__e20b0b74f var(--duration-200) var(--easing-out) forwards;
 }
 
-.drawer-container[data-side="left"][data-state="closed"] {
-  animation: drawer-slide-out-left var(--duration-150) var(--easing-in) forwards;
+.drawer-container_e20b0b74f[data-side="left"][data-state="closed"] {
+  animation: drawer-slide-out-left__e20b0b74f var(--duration-150) var(--easing-in) forwards;
 }
 
 /* ===================================
  * Animations - Top Side
  * =================================== */
 
-@keyframes drawer-slide-in-top {
+@keyframes drawer-slide-in-top__e20b0b74f {
   from {
     transform: translateY(-100%);
   }
@@ -319,7 +356,7 @@
   }
 }
 
-@keyframes drawer-slide-out-top {
+@keyframes drawer-slide-out-top__e20b0b74f {
   from {
     transform: translateY(0);
   }
@@ -328,19 +365,19 @@
   }
 }
 
-.drawer-container[data-side="top"][data-state="open"] {
-  animation: drawer-slide-in-top var(--duration-200) var(--easing-out) forwards;
+.drawer-container_e20b0b74f[data-side="top"][data-state="open"] {
+  animation: drawer-slide-in-top__e20b0b74f var(--duration-200) var(--easing-out) forwards;
 }
 
-.drawer-container[data-side="top"][data-state="closed"] {
-  animation: drawer-slide-out-top var(--duration-150) var(--easing-in) forwards;
+.drawer-container_e20b0b74f[data-side="top"][data-state="closed"] {
+  animation: drawer-slide-out-top__e20b0b74f var(--duration-150) var(--easing-in) forwards;
 }
 
 /* ===================================
  * Animations - Bottom Side
  * =================================== */
 
-@keyframes drawer-slide-in-bottom {
+@keyframes drawer-slide-in-bottom__e20b0b74f {
   from {
     transform: translateY(100%);
   }
@@ -349,7 +386,7 @@
   }
 }
 
-@keyframes drawer-slide-out-bottom {
+@keyframes drawer-slide-out-bottom__e20b0b74f {
   from {
     transform: translateY(0);
   }
@@ -358,12 +395,12 @@
   }
 }
 
-.drawer-container[data-side="bottom"][data-state="open"] {
-  animation: drawer-slide-in-bottom var(--duration-200) var(--easing-out)
+.drawer-container_e20b0b74f[data-side="bottom"][data-state="open"] {
+  animation: drawer-slide-in-bottom__e20b0b74f var(--duration-200) var(--easing-out)
     forwards;
 }
 
-.drawer-container[data-side="bottom"][data-state="closed"] {
-  animation: drawer-slide-out-bottom var(--duration-150) var(--easing-in)
+.drawer-container_e20b0b74f[data-side="bottom"][data-state="closed"] {
+  animation: drawer-slide-out-bottom__e20b0b74f var(--duration-150) var(--easing-in)
     forwards;
 }

package/dist/overlay/drawer.js

@@ -34,7 +34,7 @@ class DrawerHeader extends Component {
     this.ctx.closeDrawer();
   };
   static {
-    setComponentTemplate(precompileTemplate("<div class=\"drawer-header\" data-test-drawer-header ...attributes>\n  <div id={{this.ctx.titleId}} class=\"drawer-title\">\n    {{yield}}\n  </div>\n  {{#if this.isCloseButtonVisible}}\n    <button type=\"button\" class=\"drawer-header-close\" aria-label=\"Close\" {{on \"click\" this.handleClose}} data-test-drawer-header-close>\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n        <path d=\"M12 4L4 12M4 4L12 12\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n  {{/if}}\n</div>", {
+    setComponentTemplate(precompileTemplate("<div class=\"drawer-header_e20b0b74f\" data-test-drawer-header ...attributes>\n  <div id={{this.ctx.titleId}} class=\"drawer-title_e20b0b74f\">\n    {{yield}}\n  </div>\n  {{#if this.isCloseButtonVisible}}\n    <button type=\"button\" class=\"drawer-header-close_e20b0b74f\" aria-label=\"Close\" {{on \"click\" this.handleClose}} data-test-drawer-header-close>\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n        <path d=\"M12 4L4 12M4 4L12 12\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n  {{/if}}\n</div>", {
       strictMode: true,
       scope: () => ({
         on
@@ -42,10 +42,10 @@ class DrawerHeader extends Component {
     }), this);
   }
 }
-const DrawerBody = setComponentTemplate(precompileTemplate("<div class=\"drawer-body\" data-test-drawer-body ...attributes>\n  {{yield}}\n</div>", {
+const DrawerBody = setComponentTemplate(precompileTemplate("<div class=\"drawer-body_e20b0b74f\" data-test-drawer-body ...attributes>\n  {{yield}}\n</div>", {
   strictMode: true
 }), templateOnly());
-const DrawerFooter = setComponentTemplate(precompileTemplate("<div class=\"drawer-footer\" data-test-drawer-footer ...attributes>\n  {{yield}}\n</div>", {
+const DrawerFooter = setComponentTemplate(precompileTemplate("<div class=\"drawer-footer_e20b0b74f\" data-test-drawer-footer ...attributes>\n  {{yield}}\n</div>", {
   strictMode: true
 }), templateOnly());
 class DrawerClose extends Component {
@@ -110,6 +110,9 @@ class Drawer extends Component {
   get size() {
     return this.args.size ?? 'md';
   }
+  get padding() {
+    return this.args.padding ?? 'md';
+  }
   get showBlanket() {
     return this.args.showBlanket ?? true;
   }
@@ -256,7 +259,7 @@ class Drawer extends Component {
   // Template
   // ============================================================================
   static {
-    setComponentTemplate(precompileTemplate("{{!-- Visibility tracker for exit animations --}}\n<span hidden {{this.trackVisibility visible=this.isOpen}} data-test-drawer-tracker></span>\n\n{{!-- Blanket is outside shouldRender so it can manage its own exit animation --}}\n{{#if this.showBlanket}}\n  <Blanket @visible={{this.isOpen}} @onClose={{this.handleBackdropClose}} @closeOnClick={{this.closeOnBackdropClick}} @lockScroll={{false}} @container={{this.destinationElement}} data-test-drawer-blanket />\n{{/if}}\n\n{{#if this.shouldRender}}\n  {{#in-element this.destinationElement insertBefore=null}}\n    {{!-- template-lint-disable no-invalid-interactive --}}\n    <div class=\"drawer-container\" role=\"dialog\" aria-modal={{if this.showBlanket \"true\" \"false\"}} aria-labelledby={{this.titleId}} tabindex=\"-1\" data-side={{this.side}} data-size={{this.size}} data-state={{this.dataState}} {{this.setupDrawer}} {{on \"animationend\" this.handleAnimationEnd}} data-test-drawer-container ...attributes>\n      <div class=\"drawer-content\" data-test-drawer-content>\n        {{yield (hash Header=(component DrawerHeader ctx=this.context) Body=(component DrawerBody ctx=this.context) Footer=(component DrawerFooter ctx=this.context) Close=(component DrawerClose ctx=this.context) isOpen=this.isOpen close=this.closeDrawer)}}\n      </div>\n    </div>\n  {{/in-element}}\n{{/if}}", {
+    setComponentTemplate(precompileTemplate("{{!-- Visibility tracker for exit animations --}}\n<span hidden {{this.trackVisibility visible=this.isOpen}} data-test-drawer-tracker></span>\n\n{{!-- Blanket is outside shouldRender so it can manage its own exit animation --}}\n{{#if this.showBlanket}}\n  <Blanket @visible={{this.isOpen}} @onClose={{this.handleBackdropClose}} @closeOnClick={{this.closeOnBackdropClick}} @lockScroll={{false}} @container={{this.destinationElement}} data-test-drawer-blanket />\n{{/if}}\n\n{{#if this.shouldRender}}\n  {{#in-element this.destinationElement insertBefore=null}}\n    {{!-- template-lint-disable no-invalid-interactive --}}\n    <div class=\"drawer-container_e20b0b74f\" role=\"dialog\" aria-modal={{if this.showBlanket \"true\" \"false\"}} aria-labelledby={{this.titleId}} tabindex=\"-1\" data-side={{this.side}} data-size={{this.size}} data-padding={{this.padding}} data-state={{this.dataState}} {{this.setupDrawer}} {{on \"animationend\" this.handleAnimationEnd}} data-test-drawer-container ...attributes>\n      <div class=\"drawer-content_e20b0b74f\" data-test-drawer-content>\n        {{yield (hash Header=(component DrawerHeader ctx=this.context) Body=(component DrawerBody ctx=this.context) Footer=(component DrawerFooter ctx=this.context) Close=(component DrawerClose ctx=this.context) isOpen=this.isOpen close=this.closeDrawer)}}\n      </div>\n    </div>\n  {{/in-element}}\n{{/if}}", {
       strictMode: true,
       scope: () => ({
         Blanket,

package/dist/overlay/modal.css

@@ -1,3 +1,4 @@
+/* src/overlay/modal.css */
 /* ===================================
  * Modal Component
  * Dialog overlay for focused tasks
@@ -7,7 +8,7 @@
  * Modal Container (Portal)
  * =================================== */
 
-.modal-container {
+.modal-container_e26422534 {
   /* Positioning - fixed center using flexbox */
   position: fixed;
   inset: 0;
@@ -24,23 +25,23 @@
 }
 
 /* Size variants - applied to content */
-.modal-container[data-size="sm"] .modal-content {
+.modal-container_e26422534[data-size="sm"] .modal-content_e26422534 {
   max-width: 400px;
 }
 
-.modal-container[data-size="md"] .modal-content {
+.modal-container_e26422534[data-size="md"] .modal-content_e26422534 {
   max-width: 500px;
 }
 
-.modal-container[data-size="lg"] .modal-content {
+.modal-container_e26422534[data-size="lg"] .modal-content_e26422534 {
   max-width: 640px;
 }
 
-.modal-container[data-size="xl"] .modal-content {
+.modal-container_e26422534[data-size="xl"] .modal-content_e26422534 {
   max-width: 800px;
 }
 
-.modal-container[data-size="full"] .modal-content {
+.modal-container_e26422534[data-size="full"] .modal-content_e26422534 {
   max-width: 100%;
 }
 
@@ -48,7 +49,7 @@
  * Modal Content (Visual Container)
  * =================================== */
 
-.modal-content {
+.modal-content_e26422534 {
   /* Visual */
   background: var(--color-bg-surface-raised);
   border: 1px solid var(--color-border-subtle);
@@ -70,7 +71,7 @@
  * Modal Header
  * =================================== */
 
-.modal-header {
+.modal-header_e26422534 {
   /* Layout */
   display: flex;
   align-items: flex-start;
@@ -85,7 +86,7 @@
   flex-shrink: 0;
 }
 
-.modal-title {
+.modal-title_e26422534 {
   /* Typography */
   font-size: var(--font-size-lg);
   font-weight: var(--font-weight-semibold);
@@ -97,7 +98,7 @@
   flex: 1;
 }
 
-.modal-header-close {
+.modal-header-close_e26422534 {
   /* Reset button styles */
   appearance: none;
   background: none;
@@ -117,12 +118,12 @@
     background-color var(--duration-150) var(--easing-out);
 }
 
-.modal-header-close:hover {
+.modal-header-close_e26422534:hover {
   color: var(--color-text);
   background: var(--color-bg-neutral-subtle);
 }
 
-.modal-header-close:focus-visible {
+.modal-header-close_e26422534:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
 }
@@ -131,7 +132,7 @@
  * Modal Body
  * =================================== */
 
-.modal-body {
+.modal-body_e26422534 {
   /* Layout */
   padding: var(--spacing-4);
 
@@ -149,7 +150,7 @@
  * Modal Footer
  * =================================== */
 
-.modal-footer {
+.modal-footer_e26422534 {
   /* Layout */
   display: flex;
   align-items: center;
@@ -169,16 +170,16 @@
  * =================================== */
 
 /* Enter animation */
-.modal-container[data-state="open"] .modal-content {
-  animation: modal-enter var(--duration-200) var(--easing-out) forwards;
+.modal-container_e26422534[data-state="open"] .modal-content_e26422534 {
+  animation: modal-enter__e26422534 var(--duration-200) var(--easing-out) forwards;
 }
 
 /* Exit animation */
-.modal-container[data-state="closed"] .modal-content {
-  animation: modal-exit var(--duration-150) var(--easing-in) forwards;
+.modal-container_e26422534[data-state="closed"] .modal-content_e26422534 {
+  animation: modal-exit__e26422534 var(--duration-150) var(--easing-in) forwards;
 }
 
-@keyframes modal-enter {
+@keyframes modal-enter__e26422534 {
   from {
     opacity: 0;
     transform: scale(0.95);
@@ -189,7 +190,7 @@
   }
 }
 
-@keyframes modal-exit {
+@keyframes modal-exit__e26422534 {
   from {
     opacity: 1;
     transform: scale(1);
@@ -204,6 +205,6 @@
  * Focus visible reset for container
  * =================================== */
 
-.modal-container:focus {
+.modal-container_e26422534:focus {
   outline: none;
 }

package/dist/overlay/modal.js

@@ -34,7 +34,7 @@ class ModalHeader extends Component {
     this.ctx.closeModal();
   };
   static {
-    setComponentTemplate(precompileTemplate("<div class=\"modal-header\" data-test-modal-header ...attributes>\n  <div id={{this.ctx.titleId}} class=\"modal-title\">\n    {{yield}}\n  </div>\n  {{#if this.isCloseButtonVisible}}\n    <button type=\"button\" class=\"modal-header-close\" aria-label=\"Close\" {{on \"click\" this.handleClose}} data-test-modal-header-close>\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n        <path d=\"M12 4L4 12M4 4L12 12\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n  {{/if}}\n</div>", {
+    setComponentTemplate(precompileTemplate("<div class=\"modal-header_e26422534\" data-test-modal-header ...attributes>\n  <div id={{this.ctx.titleId}} class=\"modal-title_e26422534\">\n    {{yield}}\n  </div>\n  {{#if this.isCloseButtonVisible}}\n    <button type=\"button\" class=\"modal-header-close_e26422534\" aria-label=\"Close\" {{on \"click\" this.handleClose}} data-test-modal-header-close>\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n        <path d=\"M12 4L4 12M4 4L12 12\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n      </svg>\n    </button>\n  {{/if}}\n</div>", {
       strictMode: true,
       scope: () => ({
         on
@@ -42,10 +42,10 @@ class ModalHeader extends Component {
     }), this);
   }
 }
-const ModalBody = setComponentTemplate(precompileTemplate("<div class=\"modal-body\" data-test-modal-body ...attributes>\n  {{yield}}\n</div>", {
+const ModalBody = setComponentTemplate(precompileTemplate("<div class=\"modal-body_e26422534\" data-test-modal-body ...attributes>\n  {{yield}}\n</div>", {
   strictMode: true
 }), templateOnly());
-const ModalFooter = setComponentTemplate(precompileTemplate("<div class=\"modal-footer\" data-test-modal-footer ...attributes>\n  {{yield}}\n</div>", {
+const ModalFooter = setComponentTemplate(precompileTemplate("<div class=\"modal-footer_e26422534\" data-test-modal-footer ...attributes>\n  {{yield}}\n</div>", {
   strictMode: true
 }), templateOnly());
 class ModalClose extends Component {
@@ -250,7 +250,7 @@ class Modal extends Component {
   // Template
   // ============================================================================
   static {
-    setComponentTemplate(precompileTemplate("{{!-- Visibility tracker for exit animations --}}\n<span hidden {{this.trackVisibility visible=this.isOpen}} data-test-modal-tracker></span>\n\n{{!-- Blanket is outside shouldRender so it can manage its own exit animation --}}\n<Blanket @visible={{this.isOpen}} @onClose={{this.handleBackdropClose}} @closeOnClick={{this.closeOnBackdropClick}} @lockScroll={{false}} @container={{this.destinationElement}} data-test-modal-blanket />\n\n{{#if this.shouldRender}}\n  {{#in-element this.destinationElement insertBefore=null}}\n    {{!-- template-lint-disable no-invalid-interactive --}}\n    <div class=\"modal-container\" role={{this.role}} aria-modal=\"true\" aria-labelledby={{this.titleId}} tabindex=\"-1\" data-size={{this.size}} data-state={{this.dataState}} {{this.setupModal}} {{on \"animationend\" this.handleAnimationEnd}} data-test-modal-container ...attributes>\n      <div class=\"modal-content\" data-test-modal-content>\n        {{yield (hash Header=(component ModalHeader ctx=this.context) Body=(component ModalBody ctx=this.context) Footer=(component ModalFooter ctx=this.context) Close=(component ModalClose ctx=this.context) isOpen=this.isOpen close=this.closeModal)}}\n      </div>\n    </div>\n  {{/in-element}}\n{{/if}}", {
+    setComponentTemplate(precompileTemplate("{{!-- Visibility tracker for exit animations --}}\n<span hidden {{this.trackVisibility visible=this.isOpen}} data-test-modal-tracker></span>\n\n{{!-- Blanket is outside shouldRender so it can manage its own exit animation --}}\n<Blanket @visible={{this.isOpen}} @onClose={{this.handleBackdropClose}} @closeOnClick={{this.closeOnBackdropClick}} @lockScroll={{false}} @container={{this.destinationElement}} data-test-modal-blanket />\n\n{{#if this.shouldRender}}\n  {{#in-element this.destinationElement insertBefore=null}}\n    {{!-- template-lint-disable no-invalid-interactive --}}\n    <div class=\"modal-container_e26422534\" role={{this.role}} aria-modal=\"true\" aria-labelledby={{this.titleId}} tabindex=\"-1\" data-size={{this.size}} data-state={{this.dataState}} {{this.setupModal}} {{on \"animationend\" this.handleAnimationEnd}} data-test-modal-container ...attributes>\n      <div class=\"modal-content_e26422534\" data-test-modal-content>\n        {{yield (hash Header=(component ModalHeader ctx=this.context) Body=(component ModalBody ctx=this.context) Footer=(component ModalFooter ctx=this.context) Close=(component ModalClose ctx=this.context) isOpen=this.isOpen close=this.closeModal)}}\n      </div>\n    </div>\n  {{/in-element}}\n{{/if}}", {
       strictMode: true,
       scope: () => ({
         Blanket,