@threadlabs/looma 0.4.0 → 0.5.1

package/styles/ui-callout.css

@@ -0,0 +1,76 @@
+/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+@scope ([data-component~="ui-callout"]) to ([data-component], [data-slotted]) {
+:scope {
+      --_callout-surface: var(--ui-info-soft);
+      --_callout-border: var(--ui-info-solid);
+      --_callout-icon: var(--ui-info-solid);
+
+      display: grid;
+      grid-template-columns: var(--ui-callout-icon-column, 1.125rem) minmax(0, 1fr);
+      gap: var(--ui-callout-gap, calc(var(--ui-space-2) * 0.75));
+      align-items: start;
+      max-width: 100%;
+      padding: var(--ui-callout-padding-block, var(--ui-space-2)) var(--ui-callout-padding-inline, var(--ui-space-3));
+      border: var(--ui-callout-border-width, 1px) solid color-mix(in srgb, var(--ui-callout-border, var(--_callout-border)) 35%, transparent);
+      border-inline-start: var(--ui-callout-leading-border-width, 4px) solid var(--ui-callout-border, var(--_callout-border));
+      border-radius: var(--ui-radius-2);
+      background: var(--ui-callout-surface, var(--_callout-surface));
+      color: var(--ui-callout-text, var(--ui-text-primary));
+      font-family: var(--ui-font-family-sans);
+      font-size: var(--ui-font-size-sm);
+      font-weight: var(--ui-font-normal);
+      line-height: var(--ui-line-height-md);
+    }
+
+    /* One line box tall, so the icon centres on the first line of text. */
+    .icon {
+      display: grid;
+      place-items: center;
+      inline-size: var(--ui-callout-icon-column, 1.125rem);
+      block-size: 1lh;
+      color: var(--ui-callout-icon, var(--_callout-icon));
+    }
+
+    .icon svg {
+      inline-size: var(--ui-callout-icon-size, 1.125rem);
+      block-size: var(--ui-callout-icon-size, 1.125rem);
+    }
+
+    .content {
+      min-inline-size: 0;
+    }
+
+    :scope[data-ui-callout-state~="tone=note"] {
+      --_callout-surface: var(--ui-surface-muted);
+      --_callout-border: var(--ui-border-strong);
+      --_callout-icon: var(--ui-text-secondary);
+    }
+
+    :scope[data-ui-callout-state~="tone=warning"] {
+      --_callout-surface: var(--ui-warning-soft);
+      --_callout-border: var(--ui-warning-solid);
+      --_callout-icon: var(--ui-warning-solid);
+    }
+
+    :scope[data-ui-callout-state~="tone=success"] {
+      --_callout-surface: var(--ui-success-soft);
+      --_callout-border: var(--ui-success-solid);
+      --_callout-icon: var(--ui-success-solid);
+    }
+
+    :scope[data-ui-callout-state~="tone=danger"] {
+      --_callout-surface: var(--ui-danger-soft);
+      --_callout-border: var(--ui-danger-solid);
+      --_callout-icon: var(--ui-danger-solid);
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-callout"]) to ([data-component]) {
+/* One line box tall, so the icon centres on the first line of text. */
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}

package/styles/ui-checkbox.css

@@ -0,0 +1,98 @@
+/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+@scope ([data-component~="ui-checkbox"]) to ([data-component], [data-slotted]) {
+:scope {
+      display: inline-flex;
+      align-items: flex-start;
+      gap: var(--ui-checkbox-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 {
+      appearance: none;
+      -webkit-appearance: none;
+      position: relative;
+      flex: 0 0 auto;
+      inline-size: var(--ui-checkbox-size, 1.125rem);
+      block-size: var(--ui-checkbox-size, 1.125rem);
+      margin: 0.125em 0 0;
+      border: 1px solid var(--ui-control-border-hover, var(--ui-border-strong));
+      border-radius: var(--ui-radius-1);
+      background: var(--ui-control-surface, var(--ui-surface-default));
+      box-shadow: inset 0 1px 2px color-mix(in srgb, var(--ui-text-primary) 8%, transparent);
+      cursor: pointer;
+      transition:
+        background-color var(--ui-motion-fast) var(--ui-motion-ease),
+        border-color var(--ui-motion-fast) var(--ui-motion-ease),
+        box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
+    }
+
+    input::after {
+      content: "";
+      position: absolute;
+      opacity: 0;
+    }
+
+    input:checked,
+    input:indeterminate {
+      border-color: var(--ui-accent-solid);
+      background: var(--ui-accent-solid);
+      box-shadow: inset 0 1px 2px color-mix(in srgb, #000 16%, transparent);
+    }
+
+    /* Centre the tick's box, then lift it: a rotated L's ink sits ~0.11rem below its box centre. */
+    input:checked::after {
+      inset: 0;
+      margin: auto;
+      inline-size: 0.32rem;
+      block-size: 0.58rem;
+      border: solid var(--ui-text-on-accent);
+      border-width: 0 0.125rem 0.125rem 0;
+      opacity: 1;
+      transform: translateY(-0.11rem) rotate(45deg);
+    }
+
+    input:indeterminate::after {
+      inset: 50% 0.23rem auto;
+      block-size: 0.125rem;
+      border-radius: var(--ui-radius-round);
+      background: var(--ui-text-on-accent);
+      opacity: 1;
+      transform: translateY(-50%);
+    }
+
+    input:hover:enabled {
+      border-color: var(--ui-accent-solid);
+    }
+
+    input:focus-visible {
+      outline: 2px solid var(--ui-focus-ring, var(--ui-accent-solid));
+      outline-offset: 2px;
+    }
+
+    :scope[data-ui-checkbox-state~="disabled"] {
+      color: var(--ui-text-muted);
+      cursor: not-allowed;
+    }
+    :scope[data-ui-checkbox-state~="disabled"] input {
+      border-color: var(--ui-border-default);
+      background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
+      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-checkbox"]) to ([data-component]) {
+/* Centre the tick's box, then lift it: a rotated L's ink sits ~0.11rem below its box centre. */
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}

package/styles/ui-cluster.css

@@ -0,0 +1,46 @@
+/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+@scope ([data-component~="ui-cluster"]) to ([data-component], [data-slotted]) {
+:scope {
+      --_layout-gap: var(--ui-space-3, 0.75rem);
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: var(--ui-layout-gap, var(--_layout-gap));
+      min-inline-size: 0;
+      max-inline-size: 100%;
+      margin: 0;
+    }
+
+    :scope[data-ui-cluster-state~="gap=xs"] {
+      --_layout-gap: var(--ui-space-2, 0.5rem);
+    }
+    :scope[data-ui-cluster-state~="gap=s"] {
+      --_layout-gap: var(--ui-space-3, 0.75rem);
+    }
+    :scope[data-ui-cluster-state~="gap=m"] {
+      --_layout-gap: var(--ui-space-4, 1rem);
+    }
+    :scope[data-ui-cluster-state~="gap=l"] {
+      --_layout-gap: var(--ui-space-5, 1.5rem);
+    }
+    :scope[data-ui-cluster-state~="gap=xl"] {
+      --_layout-gap: var(--ui-space-6, 2rem);
+    }
+    :scope[data-ui-cluster-state~="align=start"] {
+      align-items: flex-start;
+    }
+    :scope[data-ui-cluster-state~="align=end"] {
+      align-items: flex-end;
+    }
+    :scope[data-ui-cluster-state~="align=stretch"] {
+      align-items: stretch;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-cluster"]) to ([data-component]) {
+/* A component that sets its display still honours the hidden attribute on its root. */
+}

package/styles/ui-combobox.css

@@ -0,0 +1,213 @@
+/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+@scope ([data-component~="ui-combobox"]) to ([data-component], [data-slotted]) {
+:scope {
+      display: grid;
+      gap: var(--ui-space-1);
+      min-inline-size: 0;
+      color: var(--ui-text-primary);
+      font: inherit;
+    }
+    label {
+      color: var(--ui-field-label-color, var(--ui-text-primary));
+      font-size: var(--ui-field-label-size, 0.875rem);
+      font-weight: var(--ui-field-label-weight, 500);
+    }
+    .field {
+      display: flex;
+      min-inline-size: 0;
+      border: 1px solid var(--ui-control-border, var(--ui-border-default));
+      border-radius: var(--ui-radius-2);
+      background: var(--ui-control-surface, var(--ui-surface-default));
+      box-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);
+    }
+    .field:focus-within {
+      border-color: var(--ui-control-focus, var(--ui-accent-solid));
+      box-shadow:
+        var(--ui-control-inset),
+        var(--ui-control-focus-halo-shadow);
+    }
+    input::selection {
+      background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
+      color: inherit;
+    }
+    input {
+      appearance: none;
+      width: 100%;
+      min-inline-size: 0;
+      min-block-size: calc(var(--ui-control-size-md, 2.5rem) - 2px);
+      box-sizing: border-box;
+      border: 0;
+      border-radius: inherit;
+      background: transparent;
+      color: inherit;
+      font: inherit;
+      line-height: var(--ui-line-height-md);
+      padding: var(--ui-space-2) var(--ui-space-3);
+      margin: 0;
+      outline: none;
+    }
+    :scope[data-ui-combobox-state~="size=sm"] input {
+      min-block-size: calc(var(--ui-field-compact-size, var(--ui-control-size-sm, 2rem)) - 2px);
+      padding: var(--ui-space-1) var(--ui-space-2);
+    }
+    button {
+      appearance: none;
+      display: inline-grid;
+      place-items: center;
+      align-self: stretch;
+      border: 0;
+      border-radius: var(--ui-radius-2);
+      background: transparent;
+      color: var(--ui-field-affordance-color, var(--ui-text-secondary));
+      font: inherit;
+      font-weight: var(--ui-field-affordance-weight, 400);
+      min-inline-size: 2rem;
+      padding: 0 var(--ui-space-1);
+      cursor: pointer;
+    }
+    .affordance-icon {
+      display: block;
+      inline-size: var(--ui-icon-size-sm, 1rem);
+      block-size: var(--ui-icon-size-sm, 1rem);
+    }
+    button:hover:enabled {
+      background: var(--ui-surface-muted);
+      color: var(--ui-text-primary);
+    }
+    button:focus-visible {
+      outline: none;
+      background: var(--ui-surface-muted);
+      box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
+    }
+    input:disabled, button:disabled {
+      color: var(--ui-text-muted);
+      cursor: not-allowed;
+    }
+    .field:has(input:disabled) {
+      background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
+    }
+    :scope[data-ui-combobox-state~="validationStatus=error"] .field {
+      border-color: var(--ui-danger-solid, var(--ui-accent-active));
+    }
+    .popup {
+      box-sizing: border-box;
+      min-inline-size: 12rem;
+      max-inline-size: calc(100vw - 1rem);
+      max-block-size: var(--ui-combobox-max-block-size, 18rem);
+      overflow: auto;
+      margin: 0;
+      padding: var(--ui-space-1);
+      border: 1px solid var(--ui-border-default);
+      border-radius: var(--ui-radius-2);
+      background: var(--ui-surface-elevated);
+      color: var(--ui-text-primary);
+      box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
+    }
+    [hidden] {
+      display: none;
+    }
+    .option {
+      padding: var(--ui-space-2) var(--ui-space-3);
+      border-radius: var(--ui-radius-1);
+      cursor: pointer;
+      overflow-wrap: anywhere;
+    }
+    .option:hover, .option.active {
+      background: var(--ui-surface-muted);
+      outline: 1px solid var(--ui-focus-ring, currentColor);
+      outline-offset: -1px;
+    }
+    .option[aria-disabled="true"] {
+      color: var(--ui-text-muted);
+      cursor: not-allowed;
+    }
+    .primary {
+      display: block;
+      color: var(--ui-option-primary-color, var(--ui-text-primary));
+      font-weight: var(--ui-option-primary-weight, 500);
+    }
+    .message, .group {
+      color: var(--ui-field-message-color, var(--ui-text-secondary));
+      font-weight: var(--ui-field-message-weight, 400);
+      font-size: var(--ui-font-size-sm);
+      line-height: var(--ui-line-height-md);
+      overflow-wrap: anywhere;
+    }
+    .group, .popup .message {
+      padding: var(--ui-space-2) var(--ui-space-3);
+    }
+    .sr-only {
+      position: absolute;
+      inline-size: 1px;
+      block-size: 1px;
+      overflow: hidden;
+      clip-path: inset(50%);
+      white-space: nowrap;
+    }
+    @media (pointer: coarse) {
+      button {
+        min-inline-size: 2.75rem;
+        min-block-size: 2.75rem;
+      }
+    }
+    @media (forced-colors: active) {
+      .field, .popup {
+        border-color: CanvasText;
+      }
+      .option.active {
+        outline-color: Highlight;
+      }
+    }
+
+    /* Multiple mode: chips wrap before the cursor on one flexible field line. */
+    :scope[data-ui-combobox-state~="multiple"] .field {
+      flex-wrap: wrap;
+      align-items: center;
+      gap: var(--ui-space-1);
+      min-block-size: var(--ui-multi-combobox-min-block-size, 2.5rem);
+      padding: var(--ui-space-1);
+    }
+    :scope[data-ui-combobox-state~="multiple"] input {
+      flex: 1 0 var(--ui-multi-combobox-input-min-inline-size, 5rem);
+      width: auto;
+      min-block-size: 1.75rem;
+      padding: var(--ui-space-0-5) var(--ui-space-1);
+    }
+    .item {
+      appearance: none;
+      display: inline-flex;
+      min-inline-size: 0;
+      max-inline-size: min(100%, var(--ui-multi-combobox-item-max-inline-size, 12rem));
+      overflow: hidden;
+      padding: 0;
+      border: 0;
+      border-radius: var(--ui-radius-1);
+      background: transparent;
+      color: inherit;
+      font: inherit;
+      cursor: default;
+    }
+    .item:focus-visible {
+      outline: 2px solid var(--ui-focus-ring, currentColor);
+      outline-offset: 1px;
+    }
+    .item:disabled {
+      opacity: 0.6;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-combobox"]) to ([data-component]) {
+@media (pointer: coarse) {
+    }
+    @media (forced-colors: active) {
+    }
+
+    /* Multiple mode: chips wrap before the cursor on one flexible field line. */
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}

package/styles/ui-container.css

@@ -0,0 +1,36 @@
+/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+@scope ([data-component~="ui-container"]) to ([data-component], [data-slotted]) {
+:scope {
+      --_container-measure: 65ch;
+      --_container-gutters: var(--ui-space-4, 1rem);
+      display: block;
+      inline-size: 100%;
+      max-inline-size: var(--ui-container-measure, var(--_container-measure));
+      margin-inline: auto;
+      padding-inline: var(--ui-container-gutters, var(--_container-gutters));
+    }
+
+    :scope[data-ui-container-state~="measure=narrow"] {
+      --_container-measure: 45ch;
+    }
+    :scope[data-ui-container-state~="measure=wide"] {
+      --_container-measure: 80ch;
+    }
+    :scope[data-ui-container-state~="gutters=s"] {
+      --_container-gutters: var(--ui-space-3, 0.75rem);
+    }
+    :scope[data-ui-container-state~="gutters=m"] {
+      --_container-gutters: var(--ui-space-4, 1rem);
+    }
+    :scope[data-ui-container-state~="gutters=l"] {
+      --_container-gutters: var(--ui-space-5, 1.5rem);
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-container"]) to ([data-component]) {
+/* A component that sets its display still honours the hidden attribute on its root. */
+}

package/styles/ui-context-menu.css

@@ -0,0 +1,68 @@
+/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+@scope ([data-component~="ui-context-menu"]) to ([data-component], [data-slotted]) {
+:scope {
+      display: contents;
+    }
+
+    .menu {
+      position: fixed;
+      inset: auto;
+      margin: 0;
+      display: flex;
+      flex-direction: column;
+      box-sizing: border-box;
+      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));
+      outline: 0;
+      overflow: auto;
+      z-index: var(--ui-z-overlay, 1000);
+      min-width: 12rem;
+      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;
+    }
+
+    .menu:popover-open {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+
+    @starting-style {
+      .menu:popover-open {
+        opacity: 0;
+        transform: translateY(-4px) scale(0.99);
+      }
+    }
+
+    .menu[hidden],
+    .menu[popover]:not(:popover-open) {
+      display: none;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .menu {
+        transition: none;
+      }
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-context-menu"]) to ([data-component]) {
+@starting-style {
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}

package/styles/ui-dialog.css

@@ -0,0 +1,160 @@
+/* Generated by HTML Next 1.0.0-alpha.1. Do not edit. */
+@keyframes ui-dialog-enter {
+      from {
+        opacity: 0;
+        transform: scale(0.96);
+      }
+    }
+@keyframes ui-dialog-backdrop-enter {
+      from {
+        background-color: transparent;
+      }
+    }
+@scope ([data-component~="ui-dialog"]) to ([data-component], [data-slotted]) {
+:scope {
+      position: fixed;
+      inset: 0;
+      box-sizing: border-box;
+      inline-size: min(
+        calc(100% - var(--ui-dialog-viewport-gap, var(--ui-space-4, 1rem)) * 2),
+        var(--ui-dialog-max-width, 440px)
+      );
+      max-inline-size: none;
+      max-block-size: calc(100dvh - var(--ui-dialog-viewport-gap, var(--ui-space-4, 1rem)) * 2);
+      margin: auto;
+      padding: 0;
+      overflow: hidden;
+      flex-direction: column;
+      background: var(--ui-surface-elevated);
+      border: 1px solid var(--ui-border-default);
+      border-radius: var(--ui-radius-dialog);
+      box-shadow: var(--ui-elevation-dialog, var(--ui-shadow-xl));
+      visibility: hidden;
+      pointer-events: none;
+      opacity: 0;
+      transform: scale(0.96);
+      transition:
+        opacity var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease),
+        transform var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease),
+        visibility var(--ui-dialog-duration, var(--ui-motion-base)),
+        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;
+    }
+
+    :scope[open] {
+      display: flex;
+      visibility: visible;
+      pointer-events: auto;
+      opacity: 1;
+      transform: scale(1);
+      animation: ui-dialog-enter var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease);
+    }
+
+    /* Header and actions stay pinned; only the body scrolls when content is long. */
+    header {
+      display: flex;
+      align-items: center;
+      gap: var(--ui-space-3);
+      flex: none;
+      padding: var(--ui-space-3) var(--ui-space-3) var(--ui-space-3) var(--ui-space-5);
+      border-block-end: 1px solid var(--ui-border-default);
+    }
+
+    /* :host-qualified so page heading rules that reach in cannot outrank the dialog chrome. */
+    :scope .title {
+      flex: 1;
+      min-inline-size: 0;
+      margin: 0;
+      padding: 0;
+      border: 0;
+      color: var(--ui-text-primary);
+      letter-spacing: normal;
+      font-size: var(--ui-font-size-lg, 1.125rem);
+      font-weight: var(--ui-font-semibold, 600);
+      line-height: var(--ui-line-height-tight);
+    }
+
+    .close {
+      display: inline-grid;
+      place-items: center;
+      flex: none;
+      margin-inline-start: auto;
+      inline-size: var(--ui-control-size-sm, 2rem);
+      block-size: var(--ui-control-size-sm, 2rem);
+      padding: 0;
+      border: 0;
+      border-radius: var(--ui-radius-round, 999px);
+      background: transparent;
+      color: var(--ui-text-secondary);
+      cursor: pointer;
+      transition: background-color var(--ui-motion-fast) var(--ui-motion-ease), color var(--ui-motion-fast) var(--ui-motion-ease);
+    }
+
+    /* A CSS-drawn X. */
+    .close::before,
+    .close::after {
+      content: "";
+      grid-area: 1 / 1;
+      inline-size: 0.875rem;
+      block-size: 1.5px;
+      border-radius: 1px;
+      background: currentColor;
+      transform: rotate(45deg);
+    }
+
+    .close::after {
+      transform: rotate(-45deg);
+    }
+
+    .close:hover {
+      background: var(--ui-surface-muted);
+      color: var(--ui-text-primary);
+    }
+
+    .close:focus-visible {
+      outline: 2px solid var(--ui-focus-ring, currentColor);
+      outline-offset: 2px;
+    }
+
+    .body {
+      flex: 1 1 auto;
+      min-block-size: 0;
+      overflow: auto;
+      overscroll-behavior: contain;
+      padding: var(--ui-space-5);
+    }
+
+    footer {
+      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);
+      border-block-start: 1px solid var(--ui-border-default);
+    }
+
+    footer:empty {
+      display: none;
+    }
+
+    :scope::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;
+    }
+
+    :scope[open]::backdrop {
+      background-color: var(--ui-overlay-backdrop);
+      animation: ui-dialog-backdrop-enter var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease);
+    }
+}
+@scope ([data-component~="ui-dialog"]) to ([data-component]) {
+/* Header and actions stay pinned; only the body scrolls when content is long. */
+
+    /* :host-qualified so page heading rules that reach in cannot outrank the dialog chrome. */
+
+    /* A CSS-drawn X. */
+}