@threadlabs/looma 0.26.0 → 0.26.1

package/vue/components.css

@@ -2538,10 +2538,10 @@ dd[data-v-ac017b1f] {
 /* The controller sets each fade length from overflow and scroll position. The mask blends
        into whatever is behind the area without needing to know its colour. Before upgrade, its
        zero-length defaults leave the authored scroll area fully visible. */
-[data-component~="ui-scroll-area"][data-ui-scroll-area-state~="fill"][data-v-3aa9f4b3] {
+[data-component~="ui-scroll-area"][data-ui-scroll-area-state~="fill"][data-v-a1ccf697] {
   flex: 1;
 }
-[data-component~="ui-scroll-area"][data-v-3aa9f4b3] {
+[data-component~="ui-scroll-area"][data-v-a1ccf697] {
   display: block;
   box-sizing: border-box;
   min-block-size: 0;
@@ -2560,29 +2560,41 @@ dd[data-v-ac017b1f] {
     transparent
   );
 }
-.content[data-v-3aa9f4b3] {
+.content[data-v-a1ccf697] {
   display: flow-root;
 }
-[data-component~="ui-scroll-area"][data-ui-scroll-area-state~="orientation=horizontal"][data-v-3aa9f4b3] {
+
+/* Trim projected edges without changing spacing inside an item. */
+[data-component~="ui-scroll-area"][data-ui-scroll-area-state~="trim"]
+  .content
+  > [data-v-a1ccf697-s]:first-child {
+  margin-block-start: 0;
+}
+[data-component~="ui-scroll-area"][data-ui-scroll-area-state~="trim"]
+  .content
+  > [data-v-a1ccf697-s]:last-child {
+  margin-block-end: 0;
+}
+[data-component~="ui-scroll-area"][data-ui-scroll-area-state~="orientation=horizontal"][data-v-a1ccf697] {
   overflow-x: auto;
   overflow-y: hidden;
   --_ui-scroll-fade-direction: var(--_ui-scroll-fade-inline);
 }
-[data-component~="ui-scroll-area"][data-v-3aa9f4b3]:dir(rtl) {
+[data-component~="ui-scroll-area"][data-v-a1ccf697]:dir(rtl) {
   --_ui-scroll-fade-inline: to left;
 }
-[data-component~="ui-scroll-area"][data-ui-scroll-area-state~="size=sm"][data-v-3aa9f4b3] {
+[data-component~="ui-scroll-area"][data-ui-scroll-area-state~="size=sm"][data-v-a1ccf697] {
   max-block-size: calc(9.375rem + var(--ui-scroll-fade-size, 24px));
 }
-[data-component~="ui-scroll-area"][data-ui-scroll-area-state~="size=md"][data-v-3aa9f4b3] {
+[data-component~="ui-scroll-area"][data-ui-scroll-area-state~="size=md"][data-v-a1ccf697] {
   max-block-size: 20rem;
 }
-[data-component~="ui-scroll-area"][data-ui-scroll-area-state~="size=lg"][data-v-3aa9f4b3] {
+[data-component~="ui-scroll-area"][data-ui-scroll-area-state~="size=lg"][data-v-a1ccf697] {
   max-block-size: 30rem;
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-scroll-area"][hidden][data-v-3aa9f4b3] {
+[data-component~="ui-scroll-area"][hidden][data-v-a1ccf697] {
   display: none;
 }
 
@@ -2615,7 +2627,7 @@ dd[data-v-ac017b1f] {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-dialog"][data-v-f11b295f] {
+[data-component~="ui-dialog"][data-v-6d90ae32] {
   /* Hooks do not inherit, so the parts below read them from the root. */
   --_ui-dialog-duration: var(--ui-dialog-duration);
 
@@ -2651,21 +2663,21 @@ dd[data-v-ac017b1f] {
     display var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete,
     overlay var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete;
 }
-[data-component~="ui-dialog"][open][data-v-f11b295f] {
+[data-component~="ui-dialog"][open][data-v-6d90ae32] {
   display: flex;
   visibility: visible;
   pointer-events: auto;
   opacity: 1;
   transform: scale(1);
-  animation: ui-dialog-enter-f11b295f var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease);
+  animation: ui-dialog-enter-6d90ae32 var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease);
 }
-[data-component~="ui-dialog"][data-ui-dialog-state~="size=sm"][data-v-f11b295f] {
+[data-component~="ui-dialog"][data-ui-dialog-state~="size=sm"][data-v-6d90ae32] {
   --_ui-dialog-size: 360px;
 }
-[data-component~="ui-dialog"][data-ui-dialog-state~="size=lg"][data-v-f11b295f] {
+[data-component~="ui-dialog"][data-ui-dialog-state~="size=lg"][data-v-6d90ae32] {
   --_ui-dialog-size: 640px;
 }
-[data-component~="ui-dialog"][data-ui-dialog-state~="size=fullscreen"][data-v-f11b295f] {
+[data-component~="ui-dialog"][data-ui-dialog-state~="size=fullscreen"][data-v-6d90ae32] {
   inset: 0;
   inline-size: 100%;
   block-size: 100dvh;
@@ -2673,12 +2685,12 @@ dd[data-v-ac017b1f] {
   margin: 0;
   border-radius: var(--ui-dialog-radius, 0);
 }
-[data-component~="ui-dialog"][data-ui-dialog-state~="alert"] .close[data-v-f11b295f] {
+[data-component~="ui-dialog"][data-ui-dialog-state~="alert"] .close[data-v-6d90ae32] {
   display: none;
 }
 
-/* Header and actions stay pinned; only the body scrolls when content is long. */
-header[data-v-f11b295f] {
+/* Own the layout wrapper; nested component roots are outside these scoped rules. */
+header[data-v-6d90ae32] {
   display: flex;
   align-items: center;
   gap: var(--ui-space-3);
@@ -2687,7 +2699,7 @@ header[data-v-f11b295f] {
 }
 
 /* :host-qualified so page heading rules that reach in cannot outrank the dialog chrome. */
-[data-component~="ui-dialog"] .title[data-v-f11b295f] {
+[data-component~="ui-dialog"] .title[data-v-6d90ae32] {
   flex: 1;
   min-inline-size: 0;
   margin: 0;
@@ -2699,7 +2711,7 @@ header[data-v-f11b295f] {
   font-weight: var(--ui-font-semibold);
   line-height: var(--ui-line-height-tight);
 }
-.close[data-v-f11b295f] {
+.close[data-v-6d90ae32] {
   display: inline-grid;
   place-items: center;
   flex: none;
@@ -2718,8 +2730,8 @@ header[data-v-f11b295f] {
 }
 
 /* A CSS-drawn X. */
-.close[data-v-f11b295f]::before,
-.close[data-v-f11b295f]::after {
+.close[data-v-6d90ae32]::before,
+.close[data-v-6d90ae32]::after {
   content: "";
   grid-area: 1 / 1;
   inline-size: 0.875rem;
@@ -2728,69 +2740,71 @@ header[data-v-f11b295f] {
   background: currentColor;
   transform: rotate(45deg);
 }
-.close[data-v-f11b295f]::after {
+.close[data-v-6d90ae32]::after {
   transform: rotate(-45deg);
 }
-.close[data-v-f11b295f]:hover {
+.close[data-v-6d90ae32]:hover {
   background: var(--ui-surface-muted);
   color: var(--ui-text-primary);
 }
-.close[data-v-f11b295f]:focus-visible {
+.close[data-v-6d90ae32]:focus-visible {
   outline: var(--ui-focus-width) solid var(--ui-focus-ring);
   outline-offset: var(--ui-focus-width);
 }
 
 /* A touch target, like Button on coarse pointers. */
 @media (pointer: coarse) {
-.close[data-v-f11b295f] {
+.close[data-v-6d90ae32] {
     inline-size: var(--ui-control-min-block-size);
     block-size: var(--ui-control-min-block-size);
 }
 }
-html[data-ui-input-modality="touch"] [data-component~="ui-dialog"] .close[data-v-f11b295f] {
+html[data-ui-input-modality="touch"] [data-component~="ui-dialog"] .close[data-v-6d90ae32] {
   inline-size: var(--ui-control-min-block-size);
   block-size: var(--ui-control-min-block-size);
 }
-.body[data-v-f11b295f] {
+.body[data-v-6d90ae32] {
+  display: flex;
+  flex-direction: column;
   flex: 1 1 auto;
   min-block-size: 0;
-  padding: var(--ui-space-5);
+  padding: var(--ui-space-3) var(--ui-space-5) var(--ui-space-5);
 }
-footer[data-v-f11b295f] {
+footer[data-v-6d90ae32] {
   display: flex;
   flex: none;
   flex-wrap: wrap;
   justify-content: flex-end;
   gap: var(--ui-space-2);
-  padding: var(--ui-space-3) var(--ui-space-5);
+  padding: 0 var(--ui-space-5) var(--ui-space-5);
 }
-footer[data-v-f11b295f]:empty {
+footer[data-v-6d90ae32]:empty {
   display: none;
 }
-@keyframes ui-dialog-enter-f11b295f {
+@keyframes ui-dialog-enter-6d90ae32 {
 from {
     opacity: 0;
     transform: scale(0.96);
 }
 }
-[data-component~="ui-dialog"][data-v-f11b295f]::backdrop {
+[data-component~="ui-dialog"][data-v-6d90ae32]::backdrop {
   background-color: transparent;
   transition:
     background-color var(--_ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease),
     display var(--_ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete,
     overlay var(--_ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete;
 }
-[data-component~="ui-dialog"][open][data-v-f11b295f]::backdrop {
+[data-component~="ui-dialog"][open][data-v-6d90ae32]::backdrop {
   background-color: var(--ui-overlay-backdrop);
-  animation: ui-dialog-backdrop-enter-f11b295f var(--_ui-dialog-duration, var(--ui-motion-base))
+  animation: ui-dialog-backdrop-enter-6d90ae32 var(--_ui-dialog-duration, var(--ui-motion-base))
     var(--ui-motion-ease);
 }
-[data-component~="ui-dialog"][open][data-ui-backdrop-hidden][data-v-f11b295f]::backdrop {
+[data-component~="ui-dialog"][open][data-ui-backdrop-hidden][data-v-6d90ae32]::backdrop {
   background-color: transparent;
   animation: none;
   transition: none;
 }
-@keyframes ui-dialog-backdrop-enter-f11b295f {
+@keyframes ui-dialog-backdrop-enter-6d90ae32 {
 from {
     background-color: transparent;
 }