@threadlabs/looma 0.13.2 → 0.13.4

package/vue/components.css

@@ -64,16 +64,22 @@
   display: none;
 }
 
-[data-component~="ui-affordance-scope"][data-v-0288ef7b] {
+[data-component~="ui-affordance-scope"][data-v-0ec8d3e6] {
   display: contents;
   --ui-affordance-scope-engaged: 0;
+  --ui-affordance-scope-guide: 1;
 }
-[data-component~="ui-affordance-scope"][data-ui-affordance-scope-state~="engaged"][data-v-0288ef7b] {
+[data-component~="ui-affordance-scope"][data-ui-affordance-scope-state~="engaged"][data-v-0ec8d3e6] {
   --ui-affordance-scope-engaged: 1;
 }
 
+/* Published to descendants: each guide multiplies its opacity by it, so none reaches them all. */
+[data-component~="ui-affordance-scope"][data-ui-affordance-scope-state~="guide=none"][data-v-0ec8d3e6] {
+  --ui-affordance-scope-guide: 0;
+}
+
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-affordance-scope"][hidden][data-v-0288ef7b] {
+[data-component~="ui-affordance-scope"][hidden][data-v-0ec8d3e6] {
   display: none;
 }
 
@@ -1088,7 +1094,7 @@ input[data-v-e122df08]:focus-visible {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-cluster"][data-v-d749e74b] {
+[data-component~="ui-cluster"][data-v-81b18ffc] {
   --_layout-gap: var(--ui-space-3);
   display: flex;
   flex-wrap: wrap;
@@ -1098,33 +1104,42 @@ input[data-v-e122df08]:focus-visible {
   max-inline-size: 100%;
   margin: 0;
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="gap=xs"][data-v-d749e74b] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="gap=xs"][data-v-81b18ffc] {
   --_layout-gap: var(--ui-space-2);
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="gap=s"][data-v-d749e74b] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="gap=s"][data-v-81b18ffc] {
   --_layout-gap: var(--ui-space-3);
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="gap=m"][data-v-d749e74b] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="gap=m"][data-v-81b18ffc] {
   --_layout-gap: var(--ui-space-4);
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="gap=l"][data-v-d749e74b] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="gap=l"][data-v-81b18ffc] {
   --_layout-gap: var(--ui-space-5);
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="gap=xl"][data-v-d749e74b] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="gap=xl"][data-v-81b18ffc] {
   --_layout-gap: var(--ui-space-6);
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="align=start"][data-v-d749e74b] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="align=start"][data-v-81b18ffc] {
   align-items: flex-start;
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="align=end"][data-v-d749e74b] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="align=end"][data-v-81b18ffc] {
   align-items: flex-end;
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="align=stretch"][data-v-d749e74b] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="align=stretch"][data-v-81b18ffc] {
   align-items: stretch;
 }
+[data-component~="ui-cluster"][data-ui-cluster-state~="justify=center"][data-v-81b18ffc] {
+  justify-content: center;
+}
+[data-component~="ui-cluster"][data-ui-cluster-state~="justify=end"][data-v-81b18ffc] {
+  justify-content: flex-end;
+}
+[data-component~="ui-cluster"][data-ui-cluster-state~="justify=between"][data-v-81b18ffc] {
+  justify-content: space-between;
+}
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-cluster"][hidden][data-v-d749e74b] {
+[data-component~="ui-cluster"][hidden][data-v-81b18ffc] {
   display: none;
 }
 
@@ -2654,39 +2669,39 @@ from {
   display: none;
 }
 
-[data-component~="ui-editor-table-overlay"][data-v-af4935bb] {
+[data-component~="ui-editor-table-overlay"][data-v-0de9cbcc] {
   display: block;
   width: 100%;
   height: 100%;
   overflow: visible;
   pointer-events: none;
 }
-[data-component~="ui-editor-table-overlay"][data-v-af4935bb] {
+[data-component~="ui-editor-table-overlay"][data-v-0de9cbcc] {
   position: relative;
   width: 100%;
   height: 100%;
   overflow: visible;
   pointer-events: none;
 }
-.rows[data-v-af4935bb],
-.cols[data-v-af4935bb] {
+.rows[data-v-0de9cbcc],
+.cols[data-v-0de9cbcc] {
   pointer-events: none;
   position: absolute;
 }
-.rows[data-v-af4935bb] {
+.rows[data-v-0de9cbcc] {
   inset: 0;
   width: 100%;
 }
-.cols[data-v-af4935bb] {
+.cols[data-v-0de9cbcc] {
   inset: 0;
   height: 100%;
 }
-.control[data-v-af4935bb] {
+.control[data-v-0de9cbcc] {
   position: absolute;
   z-index: 1;
   pointer-events: none;
 }
-.handle[data-v-af4935bb] {
+.handle[data-v-0de9cbcc] {
   position: absolute;
   display: inline-flex;
   align-items: center;
@@ -2713,86 +2728,86 @@ from {
   pointer-events: auto;
   cursor: pointer;
 }
-.handle[data-v-af4935bb] {
+.handle[data-v-0de9cbcc] {
   --_ui-default-icon-size: 14px;
   --_ui-default-icon-stroke-width: 2;
 }
-.handle[data-ui-proximity="near"][data-v-af4935bb],
-.control.active .handle[data-v-af4935bb],
-.handle[data-v-af4935bb]:focus-visible {
+.handle[data-ui-proximity="near"][data-v-0de9cbcc],
+.control.active .handle[data-v-0de9cbcc],
+.handle[data-v-0de9cbcc]:focus-visible {
   opacity: 1;
   scale: 1;
 }
-.control.active .handle[data-v-af4935bb],
-.handle[data-v-af4935bb]:focus-visible {
+.control.active .handle[data-v-0de9cbcc],
+.handle[data-v-0de9cbcc]:focus-visible {
   border-color: var(--ui-affordance-direct-color, var(--ui-accent-solid));
   background: var(--ui-affordance-direct-color, var(--ui-accent-solid));
   color: var(--ui-text-on-accent);
   box-shadow: var(--ui-shadow-sm, 0 1px 3px rgb(0 0 0 / 0.1));
 }
-.handle[data-v-af4935bb]:focus-visible,
-.selector[data-v-af4935bb]:focus-visible,
-.cell-menu[data-v-af4935bb]:focus-visible {
+.handle[data-v-0de9cbcc]:focus-visible,
+.selector[data-v-0de9cbcc]:focus-visible,
+.cell-menu[data-v-0de9cbcc]:focus-visible {
   outline: 2px solid var(--ui-focus-ring);
   outline-offset: 2px;
 }
-.control.row[data-v-af4935bb] {
+.control.row[data-v-0de9cbcc] {
   left: 0;
   width: 100%;
   height: 0;
 }
-.control.row .handle[data-v-af4935bb] {
+.control.row .handle[data-v-0de9cbcc] {
   top: -12px;
   left: -30px;
 }
-.control.col[data-v-af4935bb] {
+.control.col[data-v-0de9cbcc] {
   top: 0;
   width: 0;
   height: 100%;
 }
-.control.col .handle[data-v-af4935bb] {
+.control.col .handle[data-v-0de9cbcc] {
   top: -30px;
   left: -12px;
 }
-.line[data-v-af4935bb] {
+.line[data-v-0de9cbcc] {
   position: absolute;
   background: var(--ui-affordance-direct-color, var(--ui-accent-solid));
   opacity: 0;
   transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
 }
-.control.row .line[data-v-af4935bb] {
+.control.row .line[data-v-0de9cbcc] {
   inset: -1px 0 auto;
   height: 2px;
 }
-.control.col .line[data-v-af4935bb] {
+.control.col .line[data-v-0de9cbcc] {
   inset: 0 auto 0 -1px;
   width: 2px;
 }
-.control.active .line[data-v-af4935bb] {
+.control.active .line[data-v-0de9cbcc] {
   opacity: 0.8;
 }
-.guide[data-v-af4935bb] {
+.guide[data-v-0de9cbcc] {
   position: absolute;
   width: var(--ui-affordance-guide-size);
   height: var(--ui-affordance-guide-size);
   border-radius: var(--ui-radius-round);
   background: var(--ui-affordance-guide-color, var(--ui-border-strong));
-  opacity: var(--ui-affordance-guide-opacity);
+  opacity: calc(var(--ui-affordance-guide-opacity) * var(--ui-affordance-scope-guide, 1));
   transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
 }
-.control.row .guide[data-v-af4935bb] {
+.control.row .guide[data-v-0de9cbcc] {
   left: -10px;
   top: -2px;
 }
-.control.col .guide[data-v-af4935bb] {
+.control.col .guide[data-v-0de9cbcc] {
   left: -2px;
   top: -10px;
 }
-.control:has(.handle[data-ui-proximity="near"]) .guide[data-v-af4935bb],
-.control.active .guide[data-v-af4935bb] {
+.control:has(.handle[data-ui-proximity="near"]) .guide[data-v-0de9cbcc],
+.control.active .guide[data-v-0de9cbcc] {
   opacity: 0;
 }
-.tooltip[data-v-af4935bb] {
+.tooltip[data-v-0de9cbcc] {
   position: absolute;
   z-index: 2;
   top: calc(100% + 6px);
@@ -2811,18 +2826,18 @@ from {
   transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
   pointer-events: none;
 }
-.control.row .tooltip[data-v-af4935bb] {
+.control.row .tooltip[data-v-0de9cbcc] {
   top: 50%;
   left: auto;
   right: calc(100% + 8px);
   transform: translateY(-50%);
 }
-.control.active .tooltip[data-v-af4935bb],
-.handle:focus-visible .tooltip[data-v-af4935bb] {
+.control.active .tooltip[data-v-0de9cbcc],
+.handle:focus-visible .tooltip[data-v-0de9cbcc] {
   opacity: 1;
 }
-.selector[data-v-af4935bb],
-.cell-menu[data-v-af4935bb] {
+.selector[data-v-0de9cbcc],
+.cell-menu[data-v-0de9cbcc] {
   position: absolute;
   z-index: 2;
   display: inline-flex;
@@ -2841,27 +2856,27 @@ from {
     border-color var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
     box-shadow var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
 }
-.selector[data-v-af4935bb]:hover,
-.cell-menu[data-v-af4935bb]:hover {
+.selector[data-v-0de9cbcc]:hover,
+.cell-menu[data-v-0de9cbcc]:hover {
   background: var(--ui-surface-muted);
   color: var(--ui-text-primary);
   box-shadow: var(--ui-shadow-xs, 0 1px 2px rgb(0 0 0 / 0.05));
 }
-.selector[data-v-af4935bb] {
+.selector[data-v-0de9cbcc] {
   border-radius: var(--ui-radius-round);
 }
-.selector[data-v-af4935bb]::before {
+.selector[data-v-0de9cbcc]::before {
   content: "";
   position: absolute;
   inset: 50% auto auto 50%;
   border-radius: var(--ui-radius-round);
   background: var(--ui-affordance-guide-color, var(--ui-border-strong));
-  opacity: var(--ui-affordance-guide-opacity);
+  opacity: calc(var(--ui-affordance-guide-opacity) * var(--ui-affordance-scope-guide, 1));
   transform: translate(-50%, -50%);
   transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
   pointer-events: none;
 }
-.selector .glyph[data-v-af4935bb] {
+.selector .glyph[data-v-0de9cbcc] {
   display: block;
   width: 14px;
   height: 14px;
@@ -2873,55 +2888,55 @@ from {
     opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
     transform var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
 }
-.selector[data-v-af4935bb]:hover::before,
-.selector[data-v-af4935bb]:focus-visible::before {
+.selector[data-v-0de9cbcc]:hover::before,
+.selector[data-v-0de9cbcc]:focus-visible::before {
   opacity: 0;
 }
-.selector:hover .glyph[data-v-af4935bb],
-.selector:focus-visible .glyph[data-v-af4935bb] {
+.selector:hover .glyph[data-v-0de9cbcc],
+.selector:focus-visible .glyph[data-v-0de9cbcc] {
   opacity: 1;
   transform: scale(1);
 }
-.selector.row[data-v-af4935bb] {
+.selector.row[data-v-0de9cbcc] {
   left: -9px;
   width: 18px;
   height: 32px;
   transform: translateY(-50%);
 }
-.selector.row[data-v-af4935bb]::before {
+.selector.row[data-v-0de9cbcc]::before {
   width: 2px;
   height: 16px;
 }
-.selector.column[data-v-af4935bb] {
+.selector.column[data-v-0de9cbcc] {
   top: -9px;
   width: 32px;
   height: 18px;
   transform: translateX(-50%);
 }
-.selector.column[data-v-af4935bb]::before {
+.selector.column[data-v-0de9cbcc]::before {
   width: 16px;
   height: 2px;
 }
 @media (hover: none), (pointer: coarse) {
-.selector[data-v-af4935bb]::before {
+.selector[data-v-0de9cbcc]::before {
     opacity: 0;
 }
-.selector .glyph[data-v-af4935bb] {
+.selector .glyph[data-v-0de9cbcc] {
     opacity: 1;
     transform: none;
 }
 }
-.cell-menu[data-v-af4935bb] {
+.cell-menu[data-v-0de9cbcc] {
   width: 24px;
   height: 24px;
   border-radius: var(--ui-radius-sm);
   background: color-mix(in srgb, var(--ui-surface-muted) 78%, transparent);
 }
-.cell-menu[data-v-af4935bb] {
+.cell-menu[data-v-0de9cbcc] {
   --_ui-default-icon-size: 15px;
   --_ui-default-icon-stroke-width: 2;
 }
-[data-component~="ui-editor-table-overlay"][hidden][data-v-af4935bb] {
+[data-component~="ui-editor-table-overlay"][hidden][data-v-0de9cbcc] {
   display: none;
 }
 
@@ -3478,7 +3493,7 @@ svg[data-v-03a5b772-s] {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-icon-button"][data-v-027d9fcb] {
+[data-component~="ui-icon-button"][data-v-006fa1b2] {
   /* Hooks do not inherit, so the parts below read them from the root. */
   --_ui-icon-button-icon-size: var(--ui-icon-button-icon-size);
   --_ui-icon-button-icon-stroke-width: var(--ui-icon-button-icon-stroke-width);
@@ -3486,10 +3501,10 @@ svg[data-v-03a5b772-s] {
   display: inline-flex;
   color: var(--ui-text-secondary);
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-027d9fcb] {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-006fa1b2] {
   position: relative;
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-027d9fcb]::before {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-006fa1b2]::before {
   content: "";
   position: absolute;
   inset: 50% auto auto 50%;
@@ -3498,7 +3513,7 @@ svg[data-v-03a5b772-s] {
   block-size: var(--ui-affordance-guide-size);
   border-radius: var(--ui-radius-round);
   background: var(--ui-affordance-guide-color, var(--ui-border-strong));
-  opacity: var(--ui-affordance-guide-opacity);
+  opacity: calc(var(--ui-affordance-guide-opacity) * var(--ui-affordance-scope-guide, 1));
   transform: translate(-50%, -50%);
   transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
   pointer-events: none;
@@ -3508,17 +3523,17 @@ svg[data-v-03a5b772-s] {
  * surface and icon. The root is the native button, so hiding it outright would hide the dot
  * too, and slotted icons sit outside this scope; `color: transparent` hides currentColor icons. */
 @media (hover: hover) and (pointer: fine) {
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-027d9fcb]:not([data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"], [data-ui-proximity="near"], :hover, :focus-visible) {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-006fa1b2]:not([data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"], [data-ui-proximity="near"], :hover, :focus-visible) {
     border-color: transparent;
     background: transparent;
     box-shadow: none;
     color: transparent;
 }
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-027d9fcb]:is([data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"], [data-ui-proximity="near"], :hover, :focus-visible)::before {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-006fa1b2]:is([data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"], [data-ui-proximity="near"], :hover, :focus-visible)::before {
   opacity: 0;
 }
-[data-component~="ui-icon-button"][data-v-027d9fcb] {
+[data-component~="ui-icon-button"][data-v-006fa1b2] {
   /* The size prop resolves here; --ui-icon-button-size overrides it on an element. */
   --_size: 2rem;
   appearance: none;
@@ -3544,7 +3559,7 @@ svg[data-v-03a5b772-s] {
     transform var(--ui-motion-fast) var(--ui-motion-ease);
 }
 @media (hover: none), (pointer: coarse) {
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-027d9fcb]::before {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-006fa1b2]::before {
     opacity: 0;
 }
 }
@@ -3552,10 +3567,10 @@ svg[data-v-03a5b772-s] {
 /* A touch target without a bigger button: an invisible hit area, at least the control
    minimum, centred on the button (::before is the anticipatory guide). */
 @media (pointer: coarse) {
-[data-component~="ui-icon-button"][data-v-027d9fcb] {
+[data-component~="ui-icon-button"][data-v-006fa1b2] {
     position: relative;
 }
-[data-component~="ui-icon-button"][data-v-027d9fcb]::after {
+[data-component~="ui-icon-button"][data-v-006fa1b2]::after {
     content: "";
     position: absolute;
     inset: 50% auto auto 50%;
@@ -3564,10 +3579,10 @@ svg[data-v-03a5b772-s] {
     transform: translate(-50%, -50%);
 }
 }
-html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"][data-v-027d9fcb] {
+html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"][data-v-006fa1b2] {
   position: relative;
 }
-html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"][data-v-027d9fcb]::after {
+html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"][data-v-006fa1b2]::after {
   content: "";
   position: absolute;
   inset: 50% auto auto 50%;
@@ -3575,29 +3590,29 @@ html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"][data-v-0
   block-size: max(100%, var(--ui-control-min-block-size));
   transform: translate(-50%, -50%);
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="size=sm"][data-v-027d9fcb] {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="size=sm"][data-v-006fa1b2] {
   --_size: 1.75rem;
   inline-size: var(--ui-icon-button-size, var(--_size));
   block-size: var(--ui-icon-button-size, var(--_size));
   min-inline-size: var(--ui-icon-button-size, var(--_size));
   min-block-size: var(--ui-icon-button-size, var(--_size));
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="size=lg"][data-v-027d9fcb] {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="size=lg"][data-v-006fa1b2] {
   --_size: 2.5rem;
   inline-size: var(--ui-icon-button-size, var(--_size));
   block-size: var(--ui-icon-button-size, var(--_size));
   min-inline-size: var(--ui-icon-button-size, var(--_size));
   min-block-size: var(--ui-icon-button-size, var(--_size));
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="round"][data-v-027d9fcb] {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="round"][data-v-006fa1b2] {
   border-radius: var(--ui-radius-round);
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"][data-v-027d9fcb] {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"][data-v-006fa1b2] {
   border-color: var(--ui-icon-button-border, var(--ui-border-default));
   background: var(--ui-icon-button-outline-surface, var(--ui-surface-default));
   color: var(--ui-icon-button-outline-text, var(--ui-text-primary));
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"][data-v-027d9fcb] {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"][data-v-006fa1b2] {
   background: var(--ui-icon-button-solid-surface, var(--ui-accent-solid));
   color: var(--ui-icon-button-solid-text, var(--ui-text-on-accent));
   box-shadow: var(
@@ -3605,43 +3620,47 @@ html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"][data-v-0
     0 1px 2px color-mix(in srgb, var(--ui-accent-solid) 18%, transparent)
   );
 }
-[data-component~="ui-icon-button"][data-v-027d9fcb]:hover:enabled {
+[data-component~="ui-icon-button"][data-v-006fa1b2]:hover:enabled {
   /* Derived from the text colour so the ghost hover shows on any background. */
   background: var(--ui-icon-button-hover-surface, color-mix(in srgb, currentColor 8%, transparent));
   color: var(--ui-icon-button-hover-text, var(--ui-text-primary));
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"][data-v-027d9fcb]:hover:enabled {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"][data-v-006fa1b2]:hover:enabled {
   border-color: var(--ui-icon-button-hover-border, var(--ui-border-strong));
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"][data-v-027d9fcb]:hover:enabled {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"][data-v-006fa1b2]:hover:enabled {
   background: var(--ui-icon-button-solid-hover-surface, var(--ui-accent-hover));
 }
-[data-component~="ui-icon-button"][data-v-027d9fcb]:active:enabled {
+[data-component~="ui-icon-button"][data-v-006fa1b2]:active:enabled {
   transform: scale(var(--ui-icon-button-active-scale, 0.96));
 }
-[data-component~="ui-icon-button"][data-v-027d9fcb]:focus-visible {
+[data-component~="ui-icon-button"][data-v-006fa1b2]:focus-visible {
   outline: none;
   box-shadow: var(--ui-focus-halo);
 }
 
 /* Disabled colours fall back to each variant's own; ghost takes only the icon colour. */
 /* Disabled washes the button out the way Button does: the same shape, one filter. */
-[data-component~="ui-icon-button"][data-v-027d9fcb]:disabled {
+[data-component~="ui-icon-button"][data-v-006fa1b2]:disabled {
   filter: var(--ui-icon-button-disabled-filter, var(--ui-disabled-filter));
   opacity: var(--ui-icon-button-disabled-opacity, 1);
   cursor: not-allowed;
   box-shadow: none;
 }
-[data-component~="ui-icon-button"][data-v-027d9fcb] {
+[data-component~="ui-icon-button"][data-v-006fa1b2] {
   --_icon-button-icon-default: var(--ui-icon-size-md);
+  /* A slotted ui-icon is its own component, out of reach of the svg rule below; these are its
+     defaults, which its own --ui-icon-* hooks still override. */
+  --_ui-default-icon-size: var(--_ui-icon-button-icon-size, var(--_icon-button-icon-default));
+  --_ui-default-icon-stroke-width: var(--_ui-icon-button-icon-stroke-width, 1.75);
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="size=sm"][data-v-027d9fcb] {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="size=sm"][data-v-006fa1b2] {
   --_icon-button-icon-default: var(--ui-icon-size-sm);
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="size=lg"][data-v-027d9fcb] {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="size=lg"][data-v-006fa1b2] {
   --_icon-button-icon-default: var(--ui-icon-size-lg);
 }
-svg[data-v-027d9fcb-s] {
+svg[data-v-006fa1b2-s] {
   inline-size: var(--_ui-icon-button-icon-size, var(--_icon-button-icon-default));
   block-size: var(--_ui-icon-button-icon-size, var(--_icon-button-icon-default));
   flex-shrink: 0;
@@ -3649,7 +3668,7 @@ svg[data-v-027d9fcb-s] {
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-icon-button"][hidden][data-v-027d9fcb] {
+[data-component~="ui-icon-button"][hidden][data-v-006fa1b2] {
   display: none;
 }
 
@@ -5270,7 +5289,7 @@ dialog[data-v-40145d41] {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-sidebar"][data-v-eff27033] {
+[data-component~="ui-sidebar"][data-v-6929aec9] {
   /* Hooks do not inherit, so the parts below read them from the root. */
   --_ui-sidebar-backdrop: var(--ui-sidebar-backdrop);
 
@@ -5285,14 +5304,14 @@ dialog[data-v-40145d41] {
   background: var(--ui-sidebar-surface, var(--ui-surface-default));
   border-inline-end: 1px solid var(--ui-sidebar-border, var(--ui-border-default));
 }
-[data-component~="ui-sidebar"][data-ui-sidebar-state~="side=end"][data-v-eff27033] {
+[data-component~="ui-sidebar"][data-ui-sidebar-state~="side=end"][data-v-6929aec9] {
   border-inline-end: 0;
   border-inline-start: 1px solid var(--ui-sidebar-border, var(--ui-border-default));
 }
 
 /* The panel's content scrolls, and each edge that hides content fades: the scroll fade every
    Looma scroller uses (see ui-scroll-area). */
-.content[data-v-eff27033] {
+.content[data-v-6929aec9] {
   flex: 1;
   min-block-size: 0;
   overflow: auto;
@@ -5319,10 +5338,10 @@ dialog[data-v-40145d41] {
 }
 
 /* Collapsed while docked. */
-[data-component~="ui-sidebar"][data-ui-sidebar-state~="internalCollapsed"][data-v-eff27033]:not([popover]) {
+[data-component~="ui-sidebar"][data-ui-sidebar-state~="internalCollapsed"][data-v-6929aec9]:not([popover]) {
   display: none;
 }
-.resizer[data-v-eff27033] {
+.resizer[data-v-6929aec9] {
   position: absolute;
   z-index: 1;
   inset-block: 0;
@@ -5335,15 +5354,15 @@ dialog[data-v-40145d41] {
   touch-action: none;
   outline: none;
 }
-.resizer[hidden][data-v-eff27033] {
+.resizer[hidden][data-v-6929aec9] {
   display: none;
 }
-[data-component~="ui-sidebar"][data-ui-sidebar-state~="side=end"] .resizer[data-v-eff27033] {
+[data-component~="ui-sidebar"][data-ui-sidebar-state~="side=end"] .resizer[data-v-6929aec9] {
   inset-inline-end: auto;
   inset-inline-start: 0;
   transform: translateX(-50%);
 }
-.resizer[data-v-eff27033]::after {
+.resizer[data-v-6929aec9]::after {
   content: "";
   position: absolute;
   inset-block: 0;
@@ -5354,12 +5373,12 @@ dialog[data-v-40145d41] {
     var(--ui-affordance-guide-color, var(--ui-border-strong)) 45%,
     transparent
   );
-  opacity: var(--ui-affordance-guide-opacity);
+  opacity: calc(var(--ui-affordance-guide-opacity) * var(--ui-affordance-scope-guide, 1));
   transition:
     background-color var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
     opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
 }
-.guide[data-v-eff27033] {
+.guide[data-v-6929aec9] {
   position: absolute;
   inset-block-start: 50%;
   inset-inline-start: 50%;
@@ -5373,16 +5392,16 @@ dialog[data-v-40145d41] {
   transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
   pointer-events: none;
 }
-.resizer[data-v-eff27033]:is(:hover, :focus-visible)::after {
+.resizer[data-v-6929aec9]:is(:hover, :focus-visible)::after {
   background: var(--ui-affordance-direct-color, var(--ui-accent-solid, var(--ui-focus-ring)));
   opacity: 1;
 }
-.resizer:is(:hover, :focus-visible) > .guide[data-v-eff27033] {
+.resizer:is(:hover, :focus-visible) > .guide[data-v-6929aec9] {
   opacity: 1;
 }
 
 /* Drawer: a popover in the top layer, sliding in from its edge. Closed popovers are hidden by the UA. */
-[data-component~="ui-sidebar"][popover][data-v-eff27033] {
+[data-component~="ui-sidebar"][popover][data-v-6929aec9] {
   position: fixed;
   inset-block: 0;
   inset-inline-start: 0;
@@ -5402,36 +5421,36 @@ dialog[data-v-40145d41] {
 }
 
 /* The author display above would otherwise override the UA rule that hides a closed popover. */
-[data-component~="ui-sidebar"][popover][data-v-eff27033]:not(:popover-open) {
+[data-component~="ui-sidebar"][popover][data-v-6929aec9]:not(:popover-open) {
   display: none;
   transform: translateX(-100%);
 }
-[data-component~="ui-sidebar"][data-ui-sidebar-state~="side=end"][popover][data-v-eff27033] {
+[data-component~="ui-sidebar"][data-ui-sidebar-state~="side=end"][popover][data-v-6929aec9] {
   inset-inline-start: auto;
   inset-inline-end: 0;
 }
-[data-component~="ui-sidebar"][data-ui-sidebar-state~="side=end"][popover][data-v-eff27033]:not(:popover-open) {
+[data-component~="ui-sidebar"][data-ui-sidebar-state~="side=end"][popover][data-v-6929aec9]:not(:popover-open) {
   transform: translateX(100%);
 }
 @starting-style {
-[data-component~="ui-sidebar"][popover][data-v-eff27033]:popover-open {
+[data-component~="ui-sidebar"][popover][data-v-6929aec9]:popover-open {
     transform: translateX(-100%);
 }
-[data-component~="ui-sidebar"][data-ui-sidebar-state~="side=end"][popover][data-v-eff27033]:popover-open {
+[data-component~="ui-sidebar"][data-ui-sidebar-state~="side=end"][popover][data-v-6929aec9]:popover-open {
     transform: translateX(100%);
 }
 }
-[data-component~="ui-sidebar"][popover][data-v-eff27033]::backdrop {
+[data-component~="ui-sidebar"][popover][data-v-6929aec9]::backdrop {
   background: var(--_ui-sidebar-backdrop, rgb(0 0 0 / 0.32));
 }
 @media (prefers-reduced-motion: reduce) {
-[data-component~="ui-sidebar"][popover][data-v-eff27033] {
+[data-component~="ui-sidebar"][popover][data-v-6929aec9] {
     transition: none;
 }
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-sidebar"][hidden][data-v-eff27033] {
+[data-component~="ui-sidebar"][hidden][data-v-6929aec9] {
   display: none;
 }