@threadlabs/looma 0.4.0 → 0.5.0

package/styles/ui-form-field.css

@@ -0,0 +1,36 @@
+/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+@scope ([data-component~="ui-form-field"]) to ([data-component], [data-slotted]) {
+:scope {
+      display: grid;
+      gap: var(--ui-space-2);
+      min-inline-size: 0;
+      align-content: start;
+      color: var(--ui-text-primary);
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-form-field"]) to ([data-component]) {
+:where([data-slotted], [data-slotted] *):is([slot="label"]) {
+      color: var(--ui-text-secondary);
+      font-size: 0.95rem;
+    }
+
+    :where([data-slotted], [data-slotted] *):is([slot="help"]) {
+      min-block-size: var(--ui-form-field-help-min-block-size, 0);
+      color: var(--ui-text-muted);
+      font-size: 0.875rem;
+      line-height: var(--ui-line-height-md);
+    }
+
+    :where([data-slotted], [data-slotted] *):is([slot="error"]),
+    :where([data-slotted], [data-slotted] *):is([role="alert"]) {
+      color: var(--ui-accent-active);
+      font-size: 0.875rem;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}

package/styles/ui-grid.css

@@ -0,0 +1,43 @@
+/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+@scope ([data-component~="ui-grid"]) to ([data-component], [data-slotted]) {
+:scope {
+      --_grid-gap: var(--ui-space-4, 1rem);
+      --_grid-min: 12rem;
+      display: grid;
+      gap: var(--ui-grid-gap, var(--_grid-gap));
+      grid-template-columns: repeat(auto-fit, minmax(min(var(--ui-grid-min, var(--_grid-min)), 100%), 1fr));
+      min-inline-size: 0;
+      max-inline-size: 100%;
+      margin: 0;
+    }
+
+    :scope[data-ui-grid-state~="gap=xs"] {
+      --_grid-gap: var(--ui-space-2, 0.5rem);
+    }
+    :scope[data-ui-grid-state~="gap=s"] {
+      --_grid-gap: var(--ui-space-3, 0.75rem);
+    }
+    :scope[data-ui-grid-state~="gap=m"] {
+      --_grid-gap: var(--ui-space-4, 1rem);
+    }
+    :scope[data-ui-grid-state~="gap=l"] {
+      --_grid-gap: var(--ui-space-5, 1.5rem);
+    }
+    :scope[data-ui-grid-state~="gap=xl"] {
+      --_grid-gap: var(--ui-space-6, 2rem);
+    }
+    :scope[data-ui-grid-state~="min=md"] {
+      --_grid-min: 16rem;
+    }
+    :scope[data-ui-grid-state~="min=lg"] {
+      --_grid-min: 20rem;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-grid"]) to ([data-component]) {
+/* A component that sets its display still honours the hidden attribute on its root. */
+}

package/styles/ui-icon-button.css

@@ -0,0 +1,169 @@
+/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+@scope ([data-component~="ui-icon-button"]) to ([data-component], [data-slotted]) {
+:scope {
+      display: inline-flex;
+      color: var(--ui-text-secondary);
+    }
+
+    :scope[data-ui-icon-button-state~="anticipatory"] {
+      position: relative;
+    }
+
+    :scope[data-ui-icon-button-state~="anticipatory"]::before {
+      content: "";
+      position: absolute;
+      inset: 50% auto auto 50%;
+      z-index: 1;
+      inline-size: var(--ui-affordance-guide-size, 0.25rem);
+      block-size: var(--ui-affordance-guide-size, 0.25rem);
+      border-radius: var(--ui-radius-round, 999px);
+      background: var(--ui-affordance-guide-color, var(--ui-border-strong));
+      opacity: var(--ui-affordance-guide-opacity, 0.42);
+      transform: translate(-50%, -50%);
+      transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
+      pointer-events: none;
+    }
+
+    /* At rest an anticipatory button shows only its guide dot; proximity, hover, or focus reveals the
+     * 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) {
+      :scope[data-ui-icon-button-state~="anticipatory"]:not(:scope[data-ui-icon-button-state~="variant=solid"], [data-ui-proximity="near"], :hover, :focus-visible) {
+        border-color: transparent;
+        background: transparent;
+        box-shadow: none;
+        color: transparent;
+      }
+    }
+
+    :scope[data-ui-icon-button-state~="anticipatory"]:is(:scope[data-ui-icon-button-state~="variant=solid"], [data-ui-proximity="near"], :hover, :focus-visible)::before {
+      opacity: 0;
+    }
+
+    :scope {
+      appearance: none;
+      inline-size: var(--ui-icon-button-size, 2rem);
+      block-size: var(--ui-icon-button-size, 2rem);
+      min-inline-size: var(--ui-icon-button-size, 2rem);
+      min-block-size: var(--ui-icon-button-size, 2rem);
+      padding: 0;
+      margin: 0;
+      border: 1px solid transparent;
+      border-radius: var(--ui-icon-button-radius, var(--ui-radius-2));
+      background: var(--ui-icon-button-bg, transparent);
+      color: inherit;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      transition:
+        background-color var(--ui-motion-fast) var(--ui-motion-ease),
+        border-color var(--ui-motion-fast) var(--ui-motion-ease),
+        color var(--ui-motion-fast) var(--ui-motion-ease),
+        box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
+        transform var(--ui-motion-fast) var(--ui-motion-ease);
+    }
+
+    @media (hover: none), (pointer: coarse) {
+      :scope[data-ui-icon-button-state~="anticipatory"]::before {
+        opacity: 0;
+      }
+    }
+
+    :scope[data-ui-icon-button-state~="size=sm"] {
+      inline-size: var(--ui-icon-button-size-sm, 1.75rem);
+      block-size: var(--ui-icon-button-size-sm, 1.75rem);
+      min-inline-size: var(--ui-icon-button-size-sm, 1.75rem);
+      min-block-size: var(--ui-icon-button-size-sm, 1.75rem);
+    }
+
+    :scope[data-ui-icon-button-state~="size=lg"] {
+      inline-size: var(--ui-icon-button-size-lg, 2.5rem);
+      block-size: var(--ui-icon-button-size-lg, 2.5rem);
+      min-inline-size: var(--ui-icon-button-size-lg, 2.5rem);
+      min-block-size: var(--ui-icon-button-size-lg, 2.5rem);
+    }
+
+    :scope[data-ui-icon-button-state~="round"] {
+      border-radius: var(--ui-radius-round, 999px);
+    }
+
+    :scope[data-ui-icon-button-state~="variant=outline"] {
+      border-color: var(--ui-icon-button-border, var(--ui-border-default));
+      background: var(--ui-icon-button-outline-bg, var(--ui-surface-default));
+      color: var(--ui-icon-button-outline-color, var(--ui-text-primary));
+    }
+
+    :scope[data-ui-icon-button-state~="variant=solid"] {
+      background: var(--ui-icon-button-solid-bg, var(--ui-accent-solid));
+      color: var(--ui-icon-button-solid-color, var(--ui-text-on-accent));
+      box-shadow: var(
+        --ui-icon-button-solid-shadow,
+        0 1px 2px color-mix(in srgb, var(--ui-accent-solid) 18%, transparent)
+      );
+    }
+
+    :scope:hover:enabled {
+      /* Derived from the text colour so the ghost hover shows on any background. */
+      background: var(--ui-icon-button-hover-bg, color-mix(in srgb, currentColor 8%, transparent));
+      color: var(--ui-icon-button-hover-color, var(--ui-text-primary));
+    }
+
+    :scope[data-ui-icon-button-state~="variant=outline"]:hover:enabled {
+      border-color: var(--ui-icon-button-hover-border, var(--ui-border-strong));
+    }
+
+    :scope[data-ui-icon-button-state~="variant=solid"]:hover:enabled {
+      background: var(--ui-icon-button-solid-hover-bg, var(--ui-accent-hover));
+    }
+
+    :scope:active:enabled {
+      transform: scale(var(--ui-icon-button-active-scale, 0.96));
+    }
+
+    :scope:focus-visible {
+      outline: none;
+      box-shadow: var(--ui-focus-halo);
+    }
+
+    :scope:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+
+    :scope {
+      --_icon-button-icon-default: var(--ui-icon-size-md, 1.25rem);
+    }
+
+    :scope[data-ui-icon-button-state~="size=sm"] {
+      --_icon-button-icon-default: var(--ui-icon-size-sm, 1rem);
+    }
+
+    :scope[data-ui-icon-button-state~="size=lg"] {
+      --_icon-button-icon-default: var(--ui-icon-size-lg, 1.5rem);
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-icon-button"]) to ([data-component]) {
+/* At rest an anticipatory button shows only its guide dot; proximity, hover, or focus reveals the
+     * 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) {
+    }
+
+    @media (hover: none), (pointer: coarse) {
+    }
+
+    :where([data-slotted], [data-slotted] *):is(svg) {
+      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;
+      stroke-width: var(--ui-icon-button-icon-stroke-width, 1.75);
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}

package/styles/ui-icon.css

@@ -0,0 +1,23 @@
+/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+@scope ([data-component~="ui-icon"]) to ([data-component], [data-slotted]) {
+:scope {
+      display: inline-flex;
+      flex: none;
+      inline-size: var(--ui-icon-size, 1em);
+      block-size: var(--ui-icon-size, 1em);
+    }
+
+    svg {
+      inline-size: 100%;
+      block-size: 100%;
+      stroke-width: var(--ui-icon-stroke-width, 2);
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-icon"]) to ([data-component]) {
+/* A component that sets its display still honours the hidden attribute on its root. */
+}

package/styles/ui-input.css

@@ -0,0 +1,82 @@
+/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+@scope ([data-component~="ui-input"]) to ([data-component], [data-slotted]) {
+:scope {
+      box-sizing: border-box;
+      display: inline-block;
+      inline-size: 100%;
+      min-inline-size: 0;
+      min-block-size: var(--ui-control-size-md, 2.5rem);
+      margin: 0;
+      padding: var(--ui-space-2) var(--ui-space-3);
+      appearance: none;
+      border: 1px solid var(--ui-control-border, var(--ui-border-strong));
+      border-radius: var(--ui-input-radius, var(--ui-radius-2));
+      background: var(--ui-control-surface, var(--ui-surface-elevated));
+      color: var(--ui-text-primary);
+      font: inherit;
+      line-height: var(--ui-line-height-md);
+      box-shadow: var(--ui-input-shadow, var(--ui-control-inset));
+      transition:
+        border-color var(--ui-motion-fast) var(--ui-motion-ease),
+        box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
+        background-color var(--ui-motion-fast) var(--ui-motion-ease);
+    }
+
+    /* Tabbing into a field selects its text; tint that selection softly instead of the page highlight. */
+    :scope::selection {
+      background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
+      color: inherit;
+    }
+
+    :scope::placeholder {
+      color: var(--ui-control-placeholder, var(--ui-text-secondary));
+      opacity: 1;
+    }
+
+    :scope:hover:not(:focus):not(:disabled) {
+      border-color: var(--ui-control-border-hover, var(--ui-text-secondary));
+    }
+
+    :scope:focus-visible {
+      border-color: var(--ui-control-focus, var(--ui-accent-solid));
+      outline: none;
+      box-shadow: var(--ui-input-focus-shadow, var(--ui-control-inset), var(--ui-control-focus-halo-shadow));
+    }
+
+    /* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
+    :scope[aria-invalid="true"],
+    :scope:is(:user-invalid, [data-user-invalid]) {
+      border-color: var(--ui-danger-solid);
+    }
+
+    :scope:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible {
+      box-shadow:
+        var(--ui-control-inset),
+        0 0 0 3px color-mix(in srgb, var(--ui-danger-solid) 22%, transparent);
+    }
+
+    :scope:disabled {
+      background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
+      color: var(--ui-text-muted);
+      box-shadow: none;
+      cursor: not-allowed;
+    }
+
+    /* No text-box-trim here: trimming a native input's line box below its line height lets the text
+     * scroll vertically inside the field. Native inputs already center their single line. */
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-input"]) to ([data-component]) {
+/* Tabbing into a field selects its text; tint that selection softly instead of the page highlight. */
+
+    /* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
+
+    /* No text-box-trim here: trimming a native input's line box below its line height lets the text
+     * scroll vertically inside the field. Native inputs already center their single line. */
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}

package/styles/ui-menu-item.css

@@ -0,0 +1,34 @@
+/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+@scope ([data-component~="ui-menu-item"]) to ([data-component], [data-slotted]) {
+:scope {
+      display: block;
+      box-sizing: border-box;
+      width: 100%;
+      padding: var(--ui-space-2) var(--ui-space-3);
+      text-align: left;
+      border-radius: var(--ui-radius-2);
+      color: var(--ui-text-primary);
+      font-size: var(--ui-font-size-md);
+      font-weight: var(--ui-font-medium, 500);
+      cursor: pointer;
+      outline: none;
+      transition: background-color var(--ui-motion-fast) var(--ui-motion-ease), color var(--ui-motion-fast) var(--ui-motion-ease);
+    }
+
+    :scope:is(:hover, :focus-visible):not([aria-disabled="true"]) {
+      background: var(--ui-surface-subtle);
+    }
+
+    :scope[aria-disabled="true"] {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-menu-item"]) to ([data-component]) {
+/* A component that sets its display still honours the hidden attribute on its root. */
+}

package/styles/ui-menu.css

@@ -0,0 +1,80 @@
+/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+@scope ([data-component~="ui-menu"]) to ([data-component], [data-slotted]) {
+:scope {
+      display: flex;
+      flex-direction: column;
+      box-sizing: border-box;
+      inline-size: max-content;
+      min-inline-size: min(12rem, calc(100vw - var(--ui-menu-viewport-gap, var(--ui-space-2, 0.5rem)) * 2));
+      max-inline-size: calc(100vw - var(--ui-menu-viewport-gap, var(--ui-space-2, 0.5rem)) * 2);
+      padding: 0;
+      border: 0;
+      outline: 0;
+      border-radius: 0;
+      background: transparent;
+      box-shadow: none;
+      overflow: visible;
+    }
+
+    .surface {
+      display: flex;
+      flex-direction: column;
+      box-sizing: border-box;
+      max-inline-size: inherit;
+      padding: var(--ui-space-1);
+      background: var(--ui-surface-elevated);
+      border: 1px solid var(--ui-border-default);
+      border-radius: var(--ui-radius-3);
+      box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
+      max-block-size: inherit;
+      overflow: auto;
+    }
+
+    :scope:not(:scope[data-ui-menu-state~="internalOpen"]) {
+      display: none;
+    }
+
+    :scope[popover] {
+      position: fixed;
+      inset: auto;
+      margin: 0;
+      overflow: visible;
+      max-block-size: calc(100dvh - var(--ui-menu-viewport-gap, var(--ui-space-2, 0.5rem)) * 2);
+      opacity: 0;
+      transform: translateY(-4px) scale(0.99);
+      transition:
+        opacity var(--ui-motion-fast) var(--ui-motion-ease),
+        transform var(--ui-motion-fast) var(--ui-motion-ease),
+        display var(--ui-motion-fast) allow-discrete,
+        overlay var(--ui-motion-fast) allow-discrete;
+    }
+
+    :scope[popover]:popover-open {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+
+    @starting-style {
+      :scope[popover]:popover-open {
+        opacity: 0;
+        transform: translateY(-4px) scale(0.99);
+      }
+    }
+
+    :scope[hidden] {
+      display: none;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      :scope[popover] {
+        transition: none;
+      }
+    }
+}
+@scope ([data-component~="ui-menu"]) to ([data-component]) {
+@starting-style {
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+    }
+}

package/styles/ui-popover.css

@@ -0,0 +1,76 @@
+/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+@scope ([data-component~="ui-popover"]) to ([data-component], [data-slotted]) {
+:scope {
+      box-sizing: border-box;
+      max-inline-size: min(
+        20rem,
+        calc(100vw - var(--ui-popover-viewport-gap, var(--ui-space-2, 0.5rem)) * 2)
+      );
+      max-block-size: calc(100dvh - var(--ui-popover-viewport-gap, var(--ui-space-2, 0.5rem)) * 2);
+      overflow: visible;
+      padding: 0;
+      border: 0;
+      outline: 0;
+      border-radius: 0;
+      background: transparent;
+      box-shadow: none;
+    }
+
+    .surface {
+      box-sizing: border-box;
+      max-inline-size: inherit;
+      max-block-size: inherit;
+      overflow: auto;
+      padding: var(--ui-space-3);
+      background: var(--ui-surface-elevated);
+      border: 1px solid var(--ui-border-default);
+      border-radius: var(--ui-radius-3);
+      box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
+    }
+
+    :scope:not(:scope[data-ui-popover-state~="internalOpen"]) {
+      display: none;
+    }
+
+    :scope[popover] {
+      position: fixed;
+      inset: auto;
+      margin: 0;
+      opacity: 0;
+      transform: translateY(-4px) scale(0.99);
+      transition:
+        opacity var(--ui-motion-fast) var(--ui-motion-ease),
+        transform var(--ui-motion-fast) var(--ui-motion-ease),
+        display var(--ui-motion-fast) allow-discrete,
+        overlay var(--ui-motion-fast) allow-discrete;
+    }
+
+    :scope[popover]:popover-open {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+
+    @starting-style {
+      :scope[popover]:popover-open {
+        opacity: 0;
+        transform: translateY(-4px) scale(0.99);
+      }
+    }
+
+    :scope[hidden] {
+      display: none;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      :scope[popover] {
+        transition: none;
+      }
+    }
+}
+@scope ([data-component~="ui-popover"]) to ([data-component]) {
+@starting-style {
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+    }
+}

package/styles/ui-radio-group.css

@@ -0,0 +1,38 @@
+/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+@scope ([data-component~="ui-radio-group"]) to ([data-component], [data-slotted]) {
+:scope {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--ui-space-2);
+      min-inline-size: 0;
+      margin: 0;
+      padding: 0;
+      border: 0;
+    }
+
+    legend {
+      float: inline-start;
+      inline-size: 100%;
+      margin: 0 0 var(--ui-space-2);
+      padding: 0;
+      color: var(--ui-text-primary);
+      font-weight: var(--ui-font-medium);
+    }
+
+    legend + * {
+      clear: both;
+    }
+
+    :scope[data-ui-radio-group-state~="orientation=vertical"] {
+      display: inline-grid;
+      justify-items: start;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-radio-group"]) to ([data-component]) {
+/* A component that sets its display still honours the hidden attribute on its root. */
+}

package/styles/ui-radio.css

@@ -0,0 +1,46 @@
+/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+@scope ([data-component~="ui-radio"]) to ([data-component], [data-slotted]) {
+:scope {
+      display: inline-flex;
+      align-items: flex-start;
+      gap: var(--ui-radio-gap, var(--ui-space-2));
+      max-inline-size: 100%;
+      color: var(--ui-text-primary);
+      cursor: pointer;
+    }
+
+    .label {
+      min-inline-size: 0;
+      line-height: var(--ui-line-height-md);
+    }
+
+    input {
+      flex: 0 0 auto;
+      inline-size: var(--ui-radio-size, 1.125rem);
+      block-size: var(--ui-radio-size, 1.125rem);
+      margin: 0.125em 0 0;
+      accent-color: var(--ui-accent-solid);
+      cursor: pointer;
+    }
+
+    input:focus-visible {
+      outline: 2px solid var(--ui-focus-ring, var(--ui-accent-solid));
+      outline-offset: 2px;
+    }
+
+    :scope[data-ui-radio-state~="disabled"] {
+      color: var(--ui-text-muted);
+      cursor: not-allowed;
+    }
+    :scope[data-ui-radio-state~="disabled"] input {
+      cursor: not-allowed;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-radio"]) to ([data-component]) {
+/* A component that sets its display still honours the hidden attribute on its root. */
+}

package/styles/ui-reel.css

@@ -0,0 +1,63 @@
+/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+@scope ([data-component~="ui-reel"]) to ([data-component], [data-slotted]) {
+:scope {
+      --_reel-gap: var(--ui-space-4, 1rem);
+      --_reel-item-width: auto;
+      display: flex;
+      inline-size: 100%;
+      gap: var(--ui-reel-gap, var(--_reel-gap));
+      min-inline-size: 0;
+      max-inline-size: 100%;
+      margin: 0;
+      overflow-x: auto;
+      overflow-y: hidden;
+      overscroll-behavior-inline: contain;
+    }
+
+    :scope[data-ui-reel-state~="gap=xs"] {
+      --_reel-gap: var(--ui-space-2, 0.5rem);
+    }
+    :scope[data-ui-reel-state~="gap=s"] {
+      --_reel-gap: var(--ui-space-3, 0.75rem);
+    }
+    :scope[data-ui-reel-state~="gap=m"] {
+      --_reel-gap: var(--ui-space-4, 1rem);
+    }
+    :scope[data-ui-reel-state~="gap=l"] {
+      --_reel-gap: var(--ui-space-5, 1.5rem);
+    }
+    :scope[data-ui-reel-state~="gap=xl"] {
+      --_reel-gap: var(--ui-space-6, 2rem);
+    }
+    :scope[data-ui-reel-state~="itemWidth=sm"] {
+      --_reel-item-width: 12rem;
+    }
+    :scope[data-ui-reel-state~="itemWidth=md"] {
+      --_reel-item-width: 16rem;
+    }
+    :scope[data-ui-reel-state~="itemWidth=lg"] {
+      --_reel-item-width: 20rem;
+    }
+    :scope[data-ui-reel-state~="snap"] {
+      scroll-snap-type: inline mandatory;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-reel"]) to ([data-component]) {
+:scope > :where([data-slotted], [data-slotted] *):is(*) {
+      min-inline-size: 0;
+      flex: 0 0 var(--ui-reel-item-width, var(--_reel-item-width));
+    }
+    :scope[data-ui-reel-state~="snap=start"] > :where([data-slotted], [data-slotted] *):is(*) {
+      scroll-snap-align: start;
+    }
+    :scope[data-ui-reel-state~="snap=center"] > :where([data-slotted], [data-slotted] *):is(*) {
+      scroll-snap-align: center;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}