@threadlabs/looma 0.1.3 → 0.1.4

package/dist/{ui-toast-region.entry-2LT2RTPJ.js → ui-toast-region.entry-GCW2LJAC.js}

@@ -7,10 +7,10 @@ import {
   getElement,
   h,
   registerInstance
-} from "./chunk-UDP2LUZ2.js";
+} from "./chunk-3PASQ7DE.js";
 
 // dist/esm/ui-toast-region.entry.js
-var uiToastRegionCss = () => `:host{position:fixed;top:var(--ui-space-4);left:50%;transform:translateX(-50%);z-index:9999;display:grid;gap:var(--ui-space-2);max-width:min(24rem, 90vw);pointer-events:none}:host>*{pointer-events:auto}::slotted([data-ui-toast]){display:grid;grid-template-columns:1fr auto;gap:var(--ui-space-2);align-items:start;border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-3);padding:var(--ui-space-3) var(--ui-space-4);background:var(--ui-surface-elevated);color:var(--ui-text-primary);box-shadow:var(--ui-shadow-lg);animation:ui-toast-enter 0.25s var(--ui-motion-ease) forwards}@keyframes ui-toast-enter{from{opacity:0;transform:translateY(-0.5rem)}to{opacity:1;transform:translateY(0)}}::slotted([data-ui-toast][aria-hidden='true']){display:none}::slotted([data-ui-toast-dismiss]){border:0;background:transparent;color:var(--ui-text-secondary);cursor:pointer;font:inherit}`;
+var uiToastRegionCss = () => `:host{position:fixed;top:calc(var(--ui-space-4) + env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:9999;display:grid;gap:var(--ui-space-2);inline-size:min(24rem, calc(100vw - (var(--ui-space-4) * 2)));max-inline-size:100%;pointer-events:none}:host>*{pointer-events:auto}::slotted([data-ui-toast]){display:grid;grid-template-columns:1fr auto;gap:var(--ui-space-2);align-items:start;border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-3);padding:var(--ui-space-3) var(--ui-space-4);background:var(--ui-surface-elevated);color:var(--ui-text-primary);box-shadow:var(--ui-shadow-lg);animation:ui-toast-enter 0.25s var(--ui-motion-ease) forwards}@keyframes ui-toast-enter{from{opacity:0;transform:translateY(-0.5rem)}to{opacity:1;transform:translateY(0)}}::slotted([data-ui-toast][aria-hidden='true']){display:none}::slotted([data-ui-toast-dismiss]){border:0;background:transparent;color:var(--ui-text-secondary);cursor:pointer;font:inherit}`;
 var UIToastRegion = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);

package/dist/{ui-tooltip.entry-42V5BSUT.js → ui-tooltip.entry-EU2G6BH5.js}

@@ -11,7 +11,7 @@ import {
   getElement,
   h,
   registerInstance
-} from "./chunk-UDP2LUZ2.js";
+} from "./chunk-3PASQ7DE.js";
 
 // dist/esm/ui-tooltip.entry.js
 var uiTooltipCss = () => `:host{display:inline-block;border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-2);background:var(--ui-surface-elevated);color:var(--ui-text-primary);padding:var(--ui-space-2) var(--ui-space-3);font-size:var(--ui-font-size-sm);box-shadow:var(--ui-shadow-md)}:host([hidden]){display:none !important}`;

package/dist/{ui-top-bar.entry-UZTSRNFZ.js → ui-top-bar.entry-NMAFXVET.js}

@@ -3,10 +3,10 @@ import {
   getElement,
   h,
   registerInstance
-} from "./chunk-UDP2LUZ2.js";
+} from "./chunk-3PASQ7DE.js";
 
 // dist/esm/ui-top-bar.entry.js
-var uiTopBarCss = () => `:host{position:sticky;inset-block-start:0;z-index:var(--ui-top-bar-z-index, 100);display:block}.top-bar{min-block-size:var(--ui-top-bar-height, 56px);display:flex;align-items:center;gap:var(--ui-top-bar-gap, var(--ui-space-3, 0.75rem));padding-inline:var(--ui-top-bar-padding-inline, var(--ui-space-4, 1rem));background:var(--ui-top-bar-bg, var(--ui-surface, #ffffff));border-block-end:1px solid var(--ui-top-bar-border, var(--ui-border, #e5e7eb))}.top-bar__leading,.top-bar__search,.top-bar__actions{display:flex;align-items:center;flex-shrink:0}.top-bar__actions{gap:var(--ui-top-bar-actions-gap, var(--ui-space-1, 0.25rem))}.top-bar__title{min-inline-size:0;flex:1}[hidden]{display:none}@media (min-width: 768px){:host{display:none}}`;
+var uiTopBarCss = () => `:host{position:sticky;inset-block-start:0;z-index:var(--ui-top-bar-z-index, 100);display:block}.top-bar{min-block-size:calc(var(--ui-top-bar-height, 56px) + env(safe-area-inset-top));display:flex;align-items:center;gap:var(--ui-top-bar-gap, var(--ui-space-3, 0.75rem));padding-block-start:env(safe-area-inset-top);padding-inline-start:max(     var(--ui-top-bar-padding-inline, var(--ui-space-4, 1rem)),     env(safe-area-inset-left)   );padding-inline-end:max(     var(--ui-top-bar-padding-inline, var(--ui-space-4, 1rem)),     env(safe-area-inset-right)   );background:var(--ui-top-bar-bg, var(--ui-surface, #ffffff));border-block-end:1px solid var(--ui-top-bar-border, var(--ui-border, #e5e7eb))}.top-bar__leading,.top-bar__search,.top-bar__actions{display:flex;align-items:center;flex-shrink:0}.top-bar__actions{gap:var(--ui-top-bar-actions-gap, var(--ui-space-1, 0.25rem))}.top-bar__title{min-inline-size:0;flex:1}[hidden]{display:none}@media (min-width: 768px){:host{display:none}}`;
 function slotHasContent(slot) {
   if (!slot) {
     return false;

package/layout/index.cjs

@@ -151,6 +151,85 @@ if (typeof HTMLElement !== "undefined") {
       this.setPrimitiveAttribute("gutters", value);
     }
   }
+  class UISwitcherElement extends UILayoutElement {
+    static get observedAttributes() {
+      return ["gap", "threshold", "align"];
+    }
+    get gap() {
+      return this.getPrimitiveAttribute("gap");
+    }
+    set gap(value) {
+      this.setPrimitiveAttribute("gap", value);
+    }
+    get threshold() {
+      return this.getPrimitiveAttribute("threshold");
+    }
+    set threshold(value) {
+      this.setPrimitiveAttribute("threshold", value);
+    }
+    get align() {
+      return this.getPrimitiveAttribute("align");
+    }
+    set align(value) {
+      this.setPrimitiveAttribute("align", value);
+    }
+  }
+  class UISidebarElement extends UILayoutElement {
+    static get observedAttributes() {
+      return ["gap", "side", "width", "align"];
+    }
+    get gap() {
+      return this.getPrimitiveAttribute("gap");
+    }
+    set gap(value) {
+      this.setPrimitiveAttribute("gap", value);
+    }
+    get side() {
+      return this.getPrimitiveAttribute("side");
+    }
+    set side(value) {
+      this.setPrimitiveAttribute("side", value);
+    }
+    get width() {
+      return this.getPrimitiveAttribute("width");
+    }
+    set width(value) {
+      this.setPrimitiveAttribute("width", value);
+    }
+    get align() {
+      return this.getPrimitiveAttribute("align");
+    }
+    set align(value) {
+      this.setPrimitiveAttribute("align", value);
+    }
+  }
+  class UIReelElement extends UILayoutElement {
+    static get observedAttributes() {
+      return ["gap", "item-width", "snap"];
+    }
+    connectedCallback() {
+      if (!this.hasAttribute("role")) this.setAttribute("role", "region");
+      if (!this.hasAttribute("tabindex")) this.setAttribute("tabindex", "0");
+    }
+    get gap() {
+      return this.getPrimitiveAttribute("gap");
+    }
+    set gap(value) {
+      this.setPrimitiveAttribute("gap", value);
+    }
+    get itemWidth() {
+      return this.getPrimitiveAttribute("item-width");
+    }
+    set itemWidth(value) {
+      this.setPrimitiveAttribute("item-width", value);
+    }
+    get snap() {
+      return this.getPrimitiveAttribute("snap");
+    }
+    set snap(value) {
+      this.setPrimitiveAttribute("snap", value);
+    }
+  }
   class UISeparatorElement extends UILayoutElement {
     static get observedAttributes() {
       return ["orientation", "role"];
@@ -191,6 +270,9 @@ if (typeof HTMLElement !== "undefined") {
     ["ui-cluster", UIClusterElement],
     ["ui-grid", UIGridElement],
     ["ui-center", UICenterElement],
+    ["ui-switcher", UISwitcherElement],
+    ["ui-sidebar", UISidebarElement],
+    ["ui-reel", UIReelElement],
     ["ui-separator", UISeparatorElement]
   ];
   for (const [tag, constructor] of definitions) {

package/layout/index.css

@@ -1,12 +1,12 @@
 /* src/layout.css */
-:where(ui-stack, ui-inline, ui-cluster, ui-grid, ui-center, ui-separator),
-:where(ui-stack, ui-inline, ui-cluster, ui-grid, ui-center, ui-separator) *,
-:where(ui-stack, ui-inline, ui-cluster, ui-grid, ui-center, ui-separator) *::before,
-:where(ui-stack, ui-inline, ui-cluster, ui-grid, ui-center, ui-separator) *::after {
+:where(ui-stack, ui-inline, ui-cluster, ui-grid, ui-center, ui-switcher, ui-sidebar, ui-reel, ui-separator),
+:where(ui-stack, ui-inline, ui-cluster, ui-grid, ui-center, ui-switcher, ui-sidebar, ui-reel, ui-separator) *,
+:where(ui-stack, ui-inline, ui-cluster, ui-grid, ui-center, ui-switcher, ui-sidebar, ui-reel, ui-separator) *::before,
+:where(ui-stack, ui-inline, ui-cluster, ui-grid, ui-center, ui-switcher, ui-sidebar, ui-reel, ui-separator) *::after {
   box-sizing: border-box;
 }
-:where(ui-stack, ui-inline, ui-cluster, ui-grid, ui-center, ui-separator) {
-  all: revert;
+:where(ui-stack, ui-inline, ui-cluster, ui-grid, ui-center, ui-switcher, ui-sidebar, ui-reel, ui-separator) {
+  all: revert-layer;
   box-sizing: border-box;
   margin: 0;
   font-family: var(--ui-font-family-sans);
@@ -14,7 +14,7 @@
   line-height: var(--ui-line-height-md);
   color: var(--ui-text-primary);
 }
-:where(ui-stack, ui-inline, ui-cluster, ui-grid, ui-center, ui-separator)[data-ui-inherit-typography] {
+:where(ui-stack, ui-inline, ui-cluster, ui-grid, ui-center, ui-switcher, ui-sidebar, ui-reel, ui-separator)[data-ui-inherit-typography] {
   font-family: inherit;
   font-size: inherit;
   line-height: inherit;
@@ -28,6 +28,10 @@
   font-variation-settings: inherit;
 }
 @layer components {
+  :where(ui-stack, ui-inline, ui-cluster, ui-grid, ui-center, ui-switcher, ui-sidebar, ui-reel, ui-separator) {
+    min-inline-size: 0;
+    max-inline-size: 100%;
+  }
   ui-stack {
     --ui-layout-gap: var(--ui-space-4, 1rem);
     --ui-layout-align: stretch;
@@ -102,7 +106,7 @@
     --ui-grid-min: 16rem;
     display: grid;
     gap: var(--ui-grid-gap);
-    grid-template-columns: repeat(auto-fit, minmax(var(--ui-grid-min), 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(min(var(--ui-grid-min), 100%), 1fr));
   }
   ui-grid[gap=xs] {
     --ui-grid-gap: var(--ui-space-2, 0.5rem);
@@ -129,6 +133,7 @@
     --ui-center-measure: 65ch;
     --ui-center-gutters: var(--ui-space-4, 1rem);
     display: block;
+    inline-size: 100%;
     max-inline-size: var(--ui-center-measure);
     margin-inline: auto;
     padding-inline: var(--ui-center-gutters);
@@ -148,6 +153,158 @@
   ui-center[gutters=l] {
     --ui-center-gutters: var(--ui-space-5, 1.5rem);
   }
+  ui-switcher {
+    --ui-switcher-gap: var(--ui-space-4, 1rem);
+    --ui-switcher-threshold: 30rem;
+    --ui-switcher-align: stretch;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--ui-switcher-gap);
+    align-items: var(--ui-switcher-align);
+  }
+  ui-switcher > * {
+    min-inline-size: 0;
+    flex-grow: 1;
+    flex-basis: calc((var(--ui-switcher-threshold) - 100%) * 999);
+  }
+  ui-switcher[gap=xs] {
+    --ui-switcher-gap: var(--ui-space-2, 0.5rem);
+  }
+  ui-switcher[gap=s] {
+    --ui-switcher-gap: var(--ui-space-3, 0.75rem);
+  }
+  ui-switcher[gap=m] {
+    --ui-switcher-gap: var(--ui-space-4, 1rem);
+  }
+  ui-switcher[gap=l] {
+    --ui-switcher-gap: var(--ui-space-5, 1.5rem);
+  }
+  ui-switcher[threshold=xs] {
+    --ui-switcher-threshold: 20rem;
+  }
+  ui-switcher[threshold=sm] {
+    --ui-switcher-threshold: 30rem;
+  }
+  ui-switcher[threshold=md] {
+    --ui-switcher-threshold: 45rem;
+  }
+  ui-switcher[threshold=lg] {
+    --ui-switcher-threshold: 60rem;
+  }
+  ui-switcher[align=start] {
+    --ui-switcher-align: flex-start;
+  }
+  ui-switcher[align=center] {
+    --ui-switcher-align: center;
+  }
+  ui-switcher[align=end] {
+    --ui-switcher-align: flex-end;
+  }
+  ui-sidebar {
+    --ui-sidebar-gap: var(--ui-space-4, 1rem);
+    --ui-sidebar-width: 18rem;
+    --ui-sidebar-content-min: 50%;
+    --ui-sidebar-align: stretch;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--ui-sidebar-gap);
+    align-items: var(--ui-sidebar-align);
+  }
+  ui-sidebar > * {
+    min-inline-size: 0;
+  }
+  ui-sidebar > :first-child {
+    flex-basis: var(--ui-sidebar-width);
+    flex-grow: 1;
+  }
+  ui-sidebar > :last-child {
+    flex-basis: 0;
+    flex-grow: 999;
+    min-inline-size: min(var(--ui-sidebar-content-min), 100%);
+  }
+  ui-sidebar[side=end] > :first-child {
+    flex-basis: 0;
+    flex-grow: 999;
+    min-inline-size: min(var(--ui-sidebar-content-min), 100%);
+  }
+  ui-sidebar[side=end] > :last-child {
+    flex-basis: var(--ui-sidebar-width);
+    flex-grow: 1;
+    min-inline-size: 0;
+  }
+  ui-sidebar[gap=xs] {
+    --ui-sidebar-gap: var(--ui-space-2, 0.5rem);
+  }
+  ui-sidebar[gap=s] {
+    --ui-sidebar-gap: var(--ui-space-3, 0.75rem);
+  }
+  ui-sidebar[gap=m] {
+    --ui-sidebar-gap: var(--ui-space-4, 1rem);
+  }
+  ui-sidebar[gap=l] {
+    --ui-sidebar-gap: var(--ui-space-5, 1.5rem);
+  }
+  ui-sidebar[width=narrow] {
+    --ui-sidebar-width: 14rem;
+  }
+  ui-sidebar[width=wide] {
+    --ui-sidebar-width: 24rem;
+  }
+  ui-sidebar[align=start] {
+    --ui-sidebar-align: flex-start;
+  }
+  ui-sidebar[align=center] {
+    --ui-sidebar-align: center;
+  }
+  ui-sidebar[align=end] {
+    --ui-sidebar-align: flex-end;
+  }
+  ui-reel {
+    --ui-reel-gap: var(--ui-space-4, 1rem);
+    --ui-reel-item-width: auto;
+    display: flex;
+    inline-size: 100%;
+    gap: var(--ui-reel-gap);
+    overflow-x: auto;
+    overflow-y: hidden;
+    overscroll-behavior-inline: contain;
+    -webkit-overflow-scrolling: touch;
+  }
+  ui-reel > * {
+    min-inline-size: 0;
+    flex: 0 0 var(--ui-reel-item-width);
+  }
+  ui-reel[gap=xs] {
+    --ui-reel-gap: var(--ui-space-2, 0.5rem);
+  }
+  ui-reel[gap=s] {
+    --ui-reel-gap: var(--ui-space-3, 0.75rem);
+  }
+  ui-reel[gap=m] {
+    --ui-reel-gap: var(--ui-space-4, 1rem);
+  }
+  ui-reel[gap=l] {
+    --ui-reel-gap: var(--ui-space-5, 1.5rem);
+  }
+  ui-reel[item-width=sm] {
+    --ui-reel-item-width: 12rem;
+  }
+  ui-reel[item-width=md] {
+    --ui-reel-item-width: 16rem;
+  }
+  ui-reel[item-width=lg] {
+    --ui-reel-item-width: 20rem;
+  }
+  ui-reel[snap=start],
+  ui-reel[snap=center] {
+    scroll-snap-type: inline mandatory;
+  }
+  ui-reel[snap=start] > * {
+    scroll-snap-align: start;
+  }
+  ui-reel[snap=center] > * {
+    scroll-snap-align: center;
+  }
   ui-separator {
     --ui-separator-color: var(--ui-border-default, #d0d5dd);
     --ui-separator-space: var(--ui-space-4, 1rem);

package/layout/index.js

@@ -127,6 +127,85 @@ if (typeof HTMLElement !== "undefined") {
       this.setPrimitiveAttribute("gutters", value);
     }
   }
+  class UISwitcherElement extends UILayoutElement {
+    static get observedAttributes() {
+      return ["gap", "threshold", "align"];
+    }
+    get gap() {
+      return this.getPrimitiveAttribute("gap");
+    }
+    set gap(value) {
+      this.setPrimitiveAttribute("gap", value);
+    }
+    get threshold() {
+      return this.getPrimitiveAttribute("threshold");
+    }
+    set threshold(value) {
+      this.setPrimitiveAttribute("threshold", value);
+    }
+    get align() {
+      return this.getPrimitiveAttribute("align");
+    }
+    set align(value) {
+      this.setPrimitiveAttribute("align", value);
+    }
+  }
+  class UISidebarElement extends UILayoutElement {
+    static get observedAttributes() {
+      return ["gap", "side", "width", "align"];
+    }
+    get gap() {
+      return this.getPrimitiveAttribute("gap");
+    }
+    set gap(value) {
+      this.setPrimitiveAttribute("gap", value);
+    }
+    get side() {
+      return this.getPrimitiveAttribute("side");
+    }
+    set side(value) {
+      this.setPrimitiveAttribute("side", value);
+    }
+    get width() {
+      return this.getPrimitiveAttribute("width");
+    }
+    set width(value) {
+      this.setPrimitiveAttribute("width", value);
+    }
+    get align() {
+      return this.getPrimitiveAttribute("align");
+    }
+    set align(value) {
+      this.setPrimitiveAttribute("align", value);
+    }
+  }
+  class UIReelElement extends UILayoutElement {
+    static get observedAttributes() {
+      return ["gap", "item-width", "snap"];
+    }
+    connectedCallback() {
+      if (!this.hasAttribute("role")) this.setAttribute("role", "region");
+      if (!this.hasAttribute("tabindex")) this.setAttribute("tabindex", "0");
+    }
+    get gap() {
+      return this.getPrimitiveAttribute("gap");
+    }
+    set gap(value) {
+      this.setPrimitiveAttribute("gap", value);
+    }
+    get itemWidth() {
+      return this.getPrimitiveAttribute("item-width");
+    }
+    set itemWidth(value) {
+      this.setPrimitiveAttribute("item-width", value);
+    }
+    get snap() {
+      return this.getPrimitiveAttribute("snap");
+    }
+    set snap(value) {
+      this.setPrimitiveAttribute("snap", value);
+    }
+  }
   class UISeparatorElement extends UILayoutElement {
     static get observedAttributes() {
       return ["orientation", "role"];
@@ -167,6 +246,9 @@ if (typeof HTMLElement !== "undefined") {
     ["ui-cluster", UIClusterElement],
     ["ui-grid", UIGridElement],
     ["ui-center", UICenterElement],
+    ["ui-switcher", UISwitcherElement],
+    ["ui-sidebar", UISidebarElement],
+    ["ui-reel", UIReelElement],
     ["ui-separator", UISeparatorElement]
   ];
   for (const [tag, constructor] of definitions) {

package/layout.css

@@ -1,13 +1,14 @@
-/* Unlayered: isolation contract (hard guarantees). */
-:where(ui-stack, ui-inline, ui-cluster, ui-grid, ui-center, ui-separator),
-:where(ui-stack, ui-inline, ui-cluster, ui-grid, ui-center, ui-separator) *,
-:where(ui-stack, ui-inline, ui-cluster, ui-grid, ui-center, ui-separator) *::before,
-:where(ui-stack, ui-inline, ui-cluster, ui-grid, ui-center, ui-separator) *::after {
+/* Unlayered: box-model guarantees that remain safe for host composition. */
+:where(ui-stack, ui-inline, ui-cluster, ui-grid, ui-center, ui-switcher, ui-sidebar, ui-reel, ui-separator),
+:where(ui-stack, ui-inline, ui-cluster, ui-grid, ui-center, ui-switcher, ui-sidebar, ui-reel, ui-separator) *,
+:where(ui-stack, ui-inline, ui-cluster, ui-grid, ui-center, ui-switcher, ui-sidebar, ui-reel, ui-separator) *::before,
+:where(ui-stack, ui-inline, ui-cluster, ui-grid, ui-center, ui-switcher, ui-sidebar, ui-reel, ui-separator) *::after {
   box-sizing: border-box;
 }
 
-:where(ui-stack, ui-inline, ui-cluster, ui-grid, ui-center, ui-separator) {
-  all: revert;
+:where(ui-stack, ui-inline, ui-cluster, ui-grid, ui-center, ui-switcher, ui-sidebar, ui-reel, ui-separator) {
+  /* Reveal Looma's component layer instead of reverting past it. */
+  all: revert-layer;
   box-sizing: border-box;
   margin: 0;
   font-family: var(--ui-font-family-sans);
@@ -16,7 +17,7 @@
   color: var(--ui-text-primary);
 }
 
-:where(ui-stack, ui-inline, ui-cluster, ui-grid, ui-center, ui-separator)[data-ui-inherit-typography] {
+:where(ui-stack, ui-inline, ui-cluster, ui-grid, ui-center, ui-switcher, ui-sidebar, ui-reel, ui-separator)[data-ui-inherit-typography] {
   font-family: inherit;
   font-size: inherit;
   line-height: inherit;
@@ -31,6 +32,11 @@
 }
 
 @layer components {
+  :where(ui-stack, ui-inline, ui-cluster, ui-grid, ui-center, ui-switcher, ui-sidebar, ui-reel, ui-separator) {
+    min-inline-size: 0;
+    max-inline-size: 100%;
+  }
+
   ui-stack {
     --ui-layout-gap: var(--ui-space-4, 1rem);
     --ui-layout-align: stretch;
@@ -79,7 +85,7 @@
     --ui-grid-min: 16rem;
     display: grid;
     gap: var(--ui-grid-gap);
-    grid-template-columns: repeat(auto-fit, minmax(var(--ui-grid-min), 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(min(var(--ui-grid-min), 100%), 1fr));
   }
 
   ui-grid[gap="xs"] { --ui-grid-gap: var(--ui-space-2, 0.5rem); }
@@ -94,6 +100,7 @@
     --ui-center-measure: 65ch;
     --ui-center-gutters: var(--ui-space-4, 1rem);
     display: block;
+    inline-size: 100%;
     max-inline-size: var(--ui-center-measure);
     margin-inline: auto;
     padding-inline: var(--ui-center-gutters);
@@ -105,6 +112,103 @@
   ui-center[gutters="m"] { --ui-center-gutters: var(--ui-space-4, 1rem); }
   ui-center[gutters="l"] { --ui-center-gutters: var(--ui-space-5, 1.5rem); }
 
+  ui-switcher {
+    --ui-switcher-gap: var(--ui-space-4, 1rem);
+    --ui-switcher-threshold: 30rem;
+    --ui-switcher-align: stretch;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--ui-switcher-gap);
+    align-items: var(--ui-switcher-align);
+  }
+
+  ui-switcher > * {
+    min-inline-size: 0;
+    flex-grow: 1;
+    flex-basis: calc((var(--ui-switcher-threshold) - 100%) * 999);
+  }
+
+  ui-switcher[gap="xs"] { --ui-switcher-gap: var(--ui-space-2, 0.5rem); }
+  ui-switcher[gap="s"] { --ui-switcher-gap: var(--ui-space-3, 0.75rem); }
+  ui-switcher[gap="m"] { --ui-switcher-gap: var(--ui-space-4, 1rem); }
+  ui-switcher[gap="l"] { --ui-switcher-gap: var(--ui-space-5, 1.5rem); }
+  ui-switcher[threshold="xs"] { --ui-switcher-threshold: 20rem; }
+  ui-switcher[threshold="sm"] { --ui-switcher-threshold: 30rem; }
+  ui-switcher[threshold="md"] { --ui-switcher-threshold: 45rem; }
+  ui-switcher[threshold="lg"] { --ui-switcher-threshold: 60rem; }
+  ui-switcher[align="start"] { --ui-switcher-align: flex-start; }
+  ui-switcher[align="center"] { --ui-switcher-align: center; }
+  ui-switcher[align="end"] { --ui-switcher-align: flex-end; }
+
+  ui-sidebar {
+    --ui-sidebar-gap: var(--ui-space-4, 1rem);
+    --ui-sidebar-width: 18rem;
+    --ui-sidebar-content-min: 50%;
+    --ui-sidebar-align: stretch;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--ui-sidebar-gap);
+    align-items: var(--ui-sidebar-align);
+  }
+
+  ui-sidebar > * { min-inline-size: 0; }
+  ui-sidebar > :first-child {
+    flex-basis: var(--ui-sidebar-width);
+    flex-grow: 1;
+  }
+  ui-sidebar > :last-child {
+    flex-basis: 0;
+    flex-grow: 999;
+    min-inline-size: min(var(--ui-sidebar-content-min), 100%);
+  }
+  ui-sidebar[side="end"] > :first-child {
+    flex-basis: 0;
+    flex-grow: 999;
+    min-inline-size: min(var(--ui-sidebar-content-min), 100%);
+  }
+  ui-sidebar[side="end"] > :last-child {
+    flex-basis: var(--ui-sidebar-width);
+    flex-grow: 1;
+    min-inline-size: 0;
+  }
+  ui-sidebar[gap="xs"] { --ui-sidebar-gap: var(--ui-space-2, 0.5rem); }
+  ui-sidebar[gap="s"] { --ui-sidebar-gap: var(--ui-space-3, 0.75rem); }
+  ui-sidebar[gap="m"] { --ui-sidebar-gap: var(--ui-space-4, 1rem); }
+  ui-sidebar[gap="l"] { --ui-sidebar-gap: var(--ui-space-5, 1.5rem); }
+  ui-sidebar[width="narrow"] { --ui-sidebar-width: 14rem; }
+  ui-sidebar[width="wide"] { --ui-sidebar-width: 24rem; }
+  ui-sidebar[align="start"] { --ui-sidebar-align: flex-start; }
+  ui-sidebar[align="center"] { --ui-sidebar-align: center; }
+  ui-sidebar[align="end"] { --ui-sidebar-align: flex-end; }
+
+  ui-reel {
+    --ui-reel-gap: var(--ui-space-4, 1rem);
+    --ui-reel-item-width: auto;
+    display: flex;
+    inline-size: 100%;
+    gap: var(--ui-reel-gap);
+    overflow-x: auto;
+    overflow-y: hidden;
+    overscroll-behavior-inline: contain;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  ui-reel > * {
+    min-inline-size: 0;
+    flex: 0 0 var(--ui-reel-item-width);
+  }
+  ui-reel[gap="xs"] { --ui-reel-gap: var(--ui-space-2, 0.5rem); }
+  ui-reel[gap="s"] { --ui-reel-gap: var(--ui-space-3, 0.75rem); }
+  ui-reel[gap="m"] { --ui-reel-gap: var(--ui-space-4, 1rem); }
+  ui-reel[gap="l"] { --ui-reel-gap: var(--ui-space-5, 1.5rem); }
+  ui-reel[item-width="sm"] { --ui-reel-item-width: 12rem; }
+  ui-reel[item-width="md"] { --ui-reel-item-width: 16rem; }
+  ui-reel[item-width="lg"] { --ui-reel-item-width: 20rem; }
+  ui-reel[snap="start"],
+  ui-reel[snap="center"] { scroll-snap-type: inline mandatory; }
+  ui-reel[snap="start"] > * { scroll-snap-align: start; }
+  ui-reel[snap="center"] > * { scroll-snap-align: center; }
+
   ui-separator {
     --ui-separator-color: var(--ui-border-default, #d0d5dd);
     --ui-separator-space: var(--ui-space-4, 1rem);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "type": "module",
   "description": "Looma web components, layout primitives, editor UI, and supported Vue adapters.",
   "license": "MIT",

package/styles.css

@@ -1,4 +1,4 @@
-/* Unlayered: isolation contract (hard guarantees). Layered rules lose to unlayered page CSS. */
+/* Unlayered: box-model guarantees. Later page CSS can still compose component hosts. */
 :where(
   ui-button,
   ui-input,
@@ -107,7 +107,8 @@
   ui-avatar,
   ui-avatar-group
 ) {
-  all: revert;
+  /* Reveal Looma's component layer instead of reverting past it. */
+  all: revert-layer;
   box-sizing: border-box;
   margin: 0;
   font-family: var(--ui-font-family-sans);
@@ -513,11 +514,11 @@
   }
 
   /* Dialog: hidden when closed so multiple instances don’t stack in layout */
-  ui-dialog:not([open]) {
+  ui-dialog:not([data-open]) {
     display: none;
   }
 
-  ui-dialog[open] {
+  ui-dialog[data-open] {
     display: block;
   }
 

package/vue/index.d.ts

@@ -47,6 +47,15 @@ declare const Grid: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vu
 declare const Center: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
 }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+declare const Switcher: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+declare const Sidebar: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+declare const Reel: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 declare const Separator: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
 }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
@@ -134,6 +143,9 @@ declare const ADAPTER_COMPONENT_TAG_MAP: {
     readonly Cluster: "ui-cluster";
     readonly Grid: "ui-grid";
     readonly Center: "ui-center";
+    readonly Switcher: "ui-switcher";
+    readonly Sidebar: "ui-sidebar";
+    readonly Reel: "ui-reel";
     readonly Separator: "ui-separator";
     readonly Disclosure: "ui-disclosure";
     readonly Tabs: "ui-tabs";
@@ -164,4 +176,4 @@ declare const ADAPTER_COMPONENT_TAG_MAP: {
 };
 declare const VUE_ADAPTER_NOTE = "Thin adapter only: attrs and slots pass through to custom elements and DOM events map to typed callbacks.";
 
-export { ADAPTER_COMPONENT_TAG_MAP, Avatar, AvatarGroup, Badge, Button, Center, Checkbox, Cluster, ContextMenu, Dialog, Disclosure, FloatingActionButton, FormField, Grid, IconButton, Inline, Input, Menu, MenuItem, Popover, Radio, RadioGroup, SearchResultRow, SearchShell, Select, Separator, Stack, Switch, Tabs, Textarea, ToastRegion, Tooltip, TopBar, VUE_ADAPTER_NOTE, type VueAdapterEventMap };
+export { ADAPTER_COMPONENT_TAG_MAP, Avatar, AvatarGroup, Badge, Button, Center, Checkbox, Cluster, ContextMenu, Dialog, Disclosure, FloatingActionButton, FormField, Grid, IconButton, Inline, Input, Menu, MenuItem, Popover, Radio, RadioGroup, Reel, SearchResultRow, SearchShell, Select, Separator, Sidebar, Stack, Switch, Switcher, Tabs, Textarea, ToastRegion, Tooltip, TopBar, VUE_ADAPTER_NOTE, type VueAdapterEventMap };