@threadlabs/looma 0.28.5 → 0.28.7

package/vue/UiCheckbox.vue

@@ -1,20 +1,15 @@
-<!-- Generated by HTML Next 1.0.0-alpha.35 for Vue 3.5. Do not edit. -->
-<script lang="ts">
-const htmlNextAuthoredCheck2Reported = new Set<string>()
-function htmlNextAuthoredCheck2(accepted: boolean, location: string, message: string): boolean {
-  if (!accepted && !htmlNextAuthoredCheck2Reported.has(location)) {
-    htmlNextAuthoredCheck2Reported.add(location)
-    console.warn(message)
-  }
-  return accepted
-}
-</script>
-
+<!-- Generated by HTML Next 1.0.0-alpha.51 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, provide, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
 import { vBindControl } from './control'
-import { createDispatch, useComponentHost } from './host'
+import {
+  checkHydratedRoot,
+  createDispatch,
+  nativeAttrs,
+  useComponentHost,
+  useReflectedProp,
+} from './host'
 import { acceptsControllerWrite } from './props'
 import { checkedProp, propValidityState, vPropValidity } from './props'
 
@@ -187,38 +182,7 @@ void checkedProps.value
 watchSyncEffect(() => {
   void checkedProps.value
 })
-function nativeAttrs(attrs: Record<string, unknown>): Record<string, unknown> {
-  const names = Object.keys(attrs)
-  if (!names.some((name) => Object.hasOwn(Object.prototype, name))) return attrs
-  return Object.fromEntries(names.map((name) => [
-    Object.hasOwn(Object.prototype, name)
-      ? name === '__proto__' ? '__Proto__' : name[0]!.toUpperCase() + name.slice(1)
-      : name,
-    attrs[name],
-  ]))
-}
-const componentInstance = getCurrentInstance()
-function reflectedProp(
-  name: string,
-  kebab: string,
-  value: unknown,
-  fallback: string | undefined,
-  bound: boolean,
-  separator?: string,
-): string | undefined {
-  const incoming = componentInstance?.vnode.props
-  if (
-    !bound
-    && (incoming === null || incoming === undefined
-      || (!Object.hasOwn(incoming, name) && !Object.hasOwn(incoming, kebab)))
-  ) return fallback
-  if (value === null || value === undefined) return undefined
-  return Array.isArray(value) && separator !== undefined
-    ? value.join(separator)
-    : typeof value === 'object'
-    ? JSON.stringify(value)
-    : String(value)
-}
+const reflectedProp = useReflectedProp()
 const hydrationInstance = getCurrentInstance()
 const emit = defineEmits<{
   'update:checked': [value: boolean]
@@ -238,34 +202,8 @@ const root = ref<HTMLElement | null>(null)
 const inputElement = useTemplateRef<HTMLElement>('inputElement')
 const descriptionElement = useTemplateRef<HTMLElement>('descriptionElement')
 const internalChecked = ref(false)
-let guardedPrevious: any
-const guarded = computed(() => {
-  if (
-    !(htmlNextAuthoredCheck2(
-      internalChecked.value == null || typeof internalChecked.value === 'boolean',
-      '$internalChecked:internalChecked',
-      './components/ui-checkbox/ui-checkbox.html: HR007: Reference internalChecked does not satisfy its declared type.',
-    ))
-  ) return guardedPrevious
-  return guardedPrevious = internalChecked.value
-})
 provide('html-next:ui-checkbox:internalChecked', internalChecked)
-const hydrationNode = hydrationInstance?.vnode.el
-if (
-  typeof window !== 'undefined' && hydrationNode != null
-  && (!(hydrationNode instanceof Element) || hydrationNode.localName !== ('label'))
-) {
-  throw Object.assign(
-    new Error('HR005: Server markup for <ui-checkbox> has an incompatible root.'),
-    {
-      name: 'HtmlDiagnosticError',
-      diagnostic: Object.freeze({
-        code: 'HR005',
-        message: 'Server markup for <ui-checkbox> has an incompatible root.',
-      }),
-    },
-  )
-}
+checkHydratedRoot('label', 'ui-checkbox')
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
@@ -334,7 +272,7 @@ useComponentHost(() => import('../components/ui-checkbox/ui-checkbox.js'), {
 
 <template>
   <label
-    data-component="ui-checkbox"
+    class="ui-checkbox"
     v-bind="nativeAttrs($attrs)"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-checked="reflectedProp('checked', 'checked', checkedProps.checked, undefined, false)"
@@ -387,102 +325,9 @@ useComponentHost(() => import('../components/ui-checkbox/ui-checkbox.js'), {
   inherits: false;
 }
 
-[data-component~="ui-checkbox"] {
-  /* Hooks do not inherit, so the parts below read them from the root. */
-  --_ui-checkbox-size: var(--ui-checkbox-size);
-  --_ui-checkbox-invalid-border: var(
-    --ui-checkbox-invalid-border,
-    var(--ui-field-danger, var(--ui-danger-solid))
-  );
-
-  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;
-}
-
 /* The label, and under it an optional line saying what the choice means. */
-.text {
-  display: flex;
-  flex-direction: column;
-  gap: var(--ui-space-1);
-  min-inline-size: 0;
-}
-
-.label {
-  min-inline-size: 0;
-  line-height: var(--ui-line-height-md);
-}
-
-.description {
-  color: var(--ui-text-secondary);
-  font-size: var(--ui-font-size-sm);
-  line-height: var(--ui-line-height);
-}
-
-.description:empty {
-  display: none;
-}
-
-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: var(--ui-border-width) solid var(--ui-control-border, var(--ui-border-strong));
-  border-radius: var(--ui-radius-sm);
-  background: var(--ui-control-surface, var(--ui-surface-default));
-  box-shadow: var(--ui-control-inset);
-  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;
-  transition: opacity 120ms var(--ui-motion-ease);
-}
-
-input:checked,
-input:indeterminate {
-  border-color: var(--ui-accent-solid);
-  background: var(--ui-accent-solid);
-  box-shadow: var(--ui-control-inset);
-}
 
 /* Centre the tick's box and lift it slightly for the rotated check shape. */
-input:checked::after {
-  inset: 0;
-  margin: auto;
-  inline-size: 0.28rem;
-  block-size: 0.5rem;
-  /* Longhands, not `border: solid var(...)`: lowering drops a shorthand that omits a
-     component, which left the tick with no style and no colour. */
-  border-style: solid;
-  border-color: var(--ui-text-on-accent);
-  border-width: 0 0.125rem 0.125rem 0;
-  opacity: 1;
-  transform: translateY(-0.09rem) rotate(45deg);
-  animation: ui-checkbox-check 180ms var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
-}
-
-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%);
-}
 
 @keyframes ui-checkbox-check {
   from {
@@ -499,73 +344,167 @@ input:indeterminate::after {
   }
 }
 
-@media (prefers-reduced-motion: reduce) {
+/* A sized choice keeps its box and aligns instead: the label takes that size's field type size,
+   and the first line centres in that control height, so the label shares a row's baseline.
+   Multi-line labels and descriptions still grow downward from that first line. */
+
+/* A component that sets its display still honours the hidden attribute on its root. */
+
+@scope (.ui-checkbox) {
+  :scope:where(:scope) {
+    /* Hooks do not inherit, so the parts below read them from the root. */
+    --_ui-checkbox-size: var(--ui-checkbox-size);
+    --_ui-checkbox-invalid-border: var(
+      --ui-checkbox-invalid-border,
+      var(--ui-field-danger, var(--ui-danger-solid))
+    );
+
+    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;
+  }
+  .text {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-1);
+    min-inline-size: 0;
+  }
+
+  .label {
+    min-inline-size: 0;
+    line-height: var(--ui-line-height-md);
+  }
+
+  .description {
+    color: var(--ui-text-secondary);
+    font-size: var(--ui-font-size-sm);
+    line-height: var(--ui-line-height);
+  }
+
+  .description:empty {
+    display: none;
+  }
+
+  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: var(--ui-border-width) solid var(--ui-control-border, var(--ui-border-strong));
+    border-radius: var(--ui-radius-sm);
+    background: var(--ui-control-surface, var(--ui-surface-default));
+    box-shadow: var(--ui-control-inset);
+    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 {
-    transition: none;
-    animation: none;
+    content: "";
+    position: absolute;
+    opacity: 0;
+    transition: opacity 120ms var(--ui-motion-ease);
   }
-}
 
-input:hover:enabled {
-  border-color: var(--ui-accent-solid);
-}
+  input:checked, input:indeterminate {
+    border-color: var(--ui-accent-solid);
+    background: var(--ui-accent-solid);
+    box-shadow: var(--ui-control-inset);
+  }
+  input:checked::after {
+    inset: 0;
+    margin: auto;
+    inline-size: 0.28rem;
+    block-size: 0.5rem;
+    /* Longhands, not `border: solid var(...)`: lowering drops a shorthand that omits a
+       component, which left the tick with no style and no colour. */
+    border-style: solid;
+    border-color: var(--ui-text-on-accent);
+    border-width: 0 0.125rem 0.125rem 0;
+    opacity: 1;
+    transform: translateY(-0.09rem) rotate(45deg);
+    animation: ui-checkbox-check 180ms var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1))
+      both;
+  }
 
-input:focus-visible {
-  outline: var(--ui-focus-width) solid var(--ui-focus-ring, var(--ui-accent-solid));
-  outline-offset: var(--ui-focus-width);
-}
+  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%);
+  }
 
-[data-component~="ui-checkbox"][data-ui-checkbox-state~="invalid"] input {
-  border-color: var(--_ui-checkbox-invalid-border);
-}
+  @media (prefers-reduced-motion: reduce) {
+    input::after {
+      transition: none;
+      animation: none;
+    }
+  }
 
-[data-component~="ui-checkbox"][data-ui-checkbox-state~="disabled"] {
-  color: var(--ui-disabled-text);
-  cursor: not-allowed;
-}
-[data-component~="ui-checkbox"][data-ui-checkbox-state~="disabled"] .description {
-  color: var(--ui-disabled-text);
-}
-[data-component~="ui-checkbox"][data-ui-checkbox-state~="disabled"] input {
-  border-color: var(--ui-disabled-border);
-  background: var(--ui-disabled-surface);
-  box-shadow: none;
-  cursor: not-allowed;
-}
+  input:hover:enabled {
+    border-color: var(--ui-accent-solid);
+  }
 
-/* A sized choice keeps its box and aligns instead: the label takes that size's field type size,
-   and the first line centres in that control height, so the label shares a row's baseline.
-   Multi-line labels and descriptions still grow downward from that first line. */
-[data-component~="ui-checkbox"][data-ui-checkbox-state~="size=sm"] {
-  --_font: var(--ui-font-size-sm);
-  --_row: var(--ui-control-size-sm);
-}
+  input:focus-visible {
+    outline: var(--ui-focus-width) solid var(--ui-focus-ring, var(--ui-accent-solid));
+    outline-offset: var(--ui-focus-width);
+  }
 
-[data-component~="ui-checkbox"][data-ui-checkbox-state~="size=lg"] {
-  --_font: var(--ui-font-size-md);
-  --_row: var(--ui-control-size-lg);
-}
+  :scope[data-ui-checkbox-state~="invalid"] input {
+    border-color: var(--_ui-checkbox-invalid-border);
+  }
 
-[data-component~="ui-checkbox"][data-ui-checkbox-state~="size=sm"],
-[data-component~="ui-checkbox"][data-ui-checkbox-state~="size=lg"] {
-  --_line: calc(var(--_font) * var(--ui-line-height-md));
-  font-size: var(--_font);
-  padding-block: calc((var(--_row) - var(--_line)) / 2);
-}
+  :scope:where(:scope):is([data-ui-checkbox-state~="disabled"]) {
+    color: var(--ui-disabled-text);
+    cursor: not-allowed;
+  }
+  :scope[data-ui-checkbox-state~="disabled"] .description {
+    color: var(--ui-disabled-text);
+  }
+  :scope[data-ui-checkbox-state~="disabled"] input {
+    border-color: var(--ui-disabled-border);
+    background: var(--ui-disabled-surface);
+    box-shadow: none;
+    cursor: not-allowed;
+  }
+  :scope:where(:scope):is([data-ui-checkbox-state~="size=sm"]) {
+    --_font: var(--ui-font-size-sm);
+    --_row: var(--ui-control-size-sm);
+  }
 
-[data-component~="ui-checkbox"][data-ui-checkbox-state~="size=sm"] input,
-[data-component~="ui-checkbox"][data-ui-checkbox-state~="size=lg"] input {
-  margin-top: calc((var(--_line) - var(--_ui-checkbox-size, 1.125rem)) / 2);
-}
+  :scope:where(:scope):is([data-ui-checkbox-state~="size=lg"]) {
+    --_font: var(--ui-font-size-md);
+    --_row: var(--ui-control-size-lg);
+  }
 
-@media (pointer: coarse) {
-  [data-component~="ui-checkbox"][data-ui-checkbox-state~="size=sm"] {
-    --_row: var(--ui-control-min-block-size);
+  :scope:where(:scope):is([data-ui-checkbox-state~="size=sm"]),
+  :scope:where(:scope):is([data-ui-checkbox-state~="size=lg"]) {
+    --_line: calc(var(--_font) * var(--ui-line-height-md));
+    font-size: var(--_font);
+    padding-block: calc((var(--_row) - var(--_line)) / 2);
   }
-}
 
-/* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-checkbox"][hidden] {
-  display: none;
+  :scope[data-ui-checkbox-state~="size=sm"] input, :scope[data-ui-checkbox-state~="size=lg"] input {
+    margin-top: calc((var(--_line) - var(--_ui-checkbox-size, 1.125rem)) / 2);
+  }
+
+  @media (pointer: coarse) {
+    :scope:where(:scope):is([data-ui-checkbox-state~="size=sm"]) {
+      --_row: var(--ui-control-min-block-size);
+    }
+  }
+  :scope:where(:scope):is([hidden]) {
+    display: none;
+  }
 }
 </style>

package/vue/UiCluster.d.ts

@@ -62,9 +62,9 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: null;
     };
 }>> & Readonly<{}>, {
+    fixed: boolean | null;
     align: "center" | "start" | "stretch" | "end" | "baseline" | null;
     padding: "s" | "none" | "m" | "l" | null;
-    fixed: boolean | null;
     gap: "s" | "xs" | "m" | "l" | "xl" | null;
     justify: "center" | "start" | "end" | "between" | null;
     wrap: "wrap" | "nowrap" | null;

package/vue/UiCluster.vue

@@ -1,7 +1,8 @@
-<!-- Generated by HTML Next 1.0.0-alpha.35 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.51 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
-import { computed, getCurrentInstance, watchSyncEffect } from 'vue'
+import { computed, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
+import { checkHydratedRoot, nativeAttrs, useReflectedProp } from './host'
 import { checkedProp, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
@@ -148,56 +149,9 @@ void checkedProps.value
 watchSyncEffect(() => {
   void checkedProps.value
 })
-function nativeAttrs(attrs: Record<string, unknown>): Record<string, unknown> {
-  const names = Object.keys(attrs)
-  if (!names.some((name) => Object.hasOwn(Object.prototype, name))) return attrs
-  return Object.fromEntries(names.map((name) => [
-    Object.hasOwn(Object.prototype, name)
-      ? name === '__proto__' ? '__Proto__' : name[0]!.toUpperCase() + name.slice(1)
-      : name,
-    attrs[name],
-  ]))
-}
-const componentInstance = getCurrentInstance()
-function reflectedProp(
-  name: string,
-  kebab: string,
-  value: unknown,
-  fallback: string | undefined,
-  bound: boolean,
-  separator?: string,
-): string | undefined {
-  const incoming = componentInstance?.vnode.props
-  if (
-    !bound
-    && (incoming === null || incoming === undefined
-      || (!Object.hasOwn(incoming, name) && !Object.hasOwn(incoming, kebab)))
-  ) return fallback
-  if (value === null || value === undefined) return undefined
-  return Array.isArray(value) && separator !== undefined
-    ? value.join(separator)
-    : typeof value === 'object'
-    ? JSON.stringify(value)
-    : String(value)
-}
-const hydrationInstance = getCurrentInstance()
+const reflectedProp = useReflectedProp()
 
-const hydrationNode = hydrationInstance?.vnode.el
-if (
-  typeof window !== 'undefined' && hydrationNode != null
-  && (!(hydrationNode instanceof Element) || hydrationNode.localName !== ('div'))
-) {
-  throw Object.assign(
-    new Error('HR005: Server markup for <ui-cluster> has an incompatible root.'),
-    {
-      name: 'HtmlDiagnosticError',
-      diagnostic: Object.freeze({
-        code: 'HR005',
-        message: 'Server markup for <ui-cluster> has an incompatible root.',
-      }),
-    },
-  )
-}
+checkHydratedRoot('div', 'ui-cluster')
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
@@ -224,7 +178,7 @@ const hostState = computed(() =>
 
 <template>
   <div
-    data-component="ui-cluster"
+    class="ui-cluster"
     v-bind="nativeAttrs($attrs)"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
@@ -247,84 +201,86 @@ const hostState = computed(() =>
   inherits: false;
 }
 
-[data-component~="ui-cluster"] {
-  --_layout-gap: var(--ui-space-3);
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--ui-cluster-gap, var(--_layout-gap));
-  min-inline-size: 0;
-  max-inline-size: 100%;
-  margin: 0;
-}
+/* A component that sets its display still honours the hidden attribute on its root. */
 
-[data-component~="ui-cluster"][data-ui-cluster-state~="fixed"] {
-  flex: none;
-}
-[data-component~="ui-cluster"][data-ui-cluster-state~="padding=s"] {
-  padding: var(--ui-space-2);
-}
-[data-component~="ui-cluster"][data-ui-cluster-state~="padding=m"] {
-  padding: var(--ui-space-3);
-}
-[data-component~="ui-cluster"][data-ui-cluster-state~="padding=l"] {
-  padding: var(--ui-space-4);
-}
-[data-component~="ui-cluster"][data-ui-cluster-state~="paddingEnd=s"] {
-  padding-inline-end: var(--ui-space-2);
-}
-[data-component~="ui-cluster"][data-ui-cluster-state~="paddingEnd=m"] {
-  padding-inline-end: var(--ui-space-3);
-}
-[data-component~="ui-cluster"][data-ui-cluster-state~="paddingEnd=l"] {
-  padding-inline-end: var(--ui-space-4);
-}
-[data-component~="ui-cluster"][data-ui-cluster-state~="paddingEnd=xl"] {
-  padding-inline-end: calc(var(--ui-space-4) * 4);
-}
+@scope (.ui-cluster) {
+  :scope:where(:scope) {
+    --_layout-gap: var(--ui-space-3);
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--ui-cluster-gap, var(--_layout-gap));
+    min-inline-size: 0;
+    max-inline-size: 100%;
+    margin: 0;
+  }
 
-[data-component~="ui-cluster"][data-ui-cluster-state~="gap=xs"] {
-  --_layout-gap: var(--ui-space-2);
-}
-[data-component~="ui-cluster"][data-ui-cluster-state~="gap=s"] {
-  --_layout-gap: var(--ui-space-3);
-}
-[data-component~="ui-cluster"][data-ui-cluster-state~="gap=m"] {
-  --_layout-gap: var(--ui-space-4);
-}
-[data-component~="ui-cluster"][data-ui-cluster-state~="gap=l"] {
-  --_layout-gap: var(--ui-space-5);
-}
-[data-component~="ui-cluster"][data-ui-cluster-state~="gap=xl"] {
-  --_layout-gap: var(--ui-space-6);
-}
-[data-component~="ui-cluster"][data-ui-cluster-state~="align=start"] {
-  align-items: flex-start;
-}
-[data-component~="ui-cluster"][data-ui-cluster-state~="align=end"] {
-  align-items: flex-end;
-}
-[data-component~="ui-cluster"][data-ui-cluster-state~="align=baseline"] {
-  align-items: baseline;
-}
-[data-component~="ui-cluster"][data-ui-cluster-state~="align=stretch"] {
-  align-items: stretch;
-}
-[data-component~="ui-cluster"][data-ui-cluster-state~="justify=center"] {
-  justify-content: center;
-}
-[data-component~="ui-cluster"][data-ui-cluster-state~="justify=end"] {
-  justify-content: flex-end;
-}
-[data-component~="ui-cluster"][data-ui-cluster-state~="justify=between"] {
-  justify-content: space-between;
-}
-[data-component~="ui-cluster"][data-ui-cluster-state~="wrap=nowrap"] {
-  flex-wrap: nowrap;
-}
+  :scope:where(:scope):is([data-ui-cluster-state~="fixed"]) {
+    flex: none;
+  }
+  :scope:where(:scope):is([data-ui-cluster-state~="padding=s"]) {
+    padding: var(--ui-space-2);
+  }
+  :scope:where(:scope):is([data-ui-cluster-state~="padding=m"]) {
+    padding: var(--ui-space-3);
+  }
+  :scope:where(:scope):is([data-ui-cluster-state~="padding=l"]) {
+    padding: var(--ui-space-4);
+  }
+  :scope:where(:scope):is([data-ui-cluster-state~="paddingEnd=s"]) {
+    padding-inline-end: var(--ui-space-2);
+  }
+  :scope:where(:scope):is([data-ui-cluster-state~="paddingEnd=m"]) {
+    padding-inline-end: var(--ui-space-3);
+  }
+  :scope:where(:scope):is([data-ui-cluster-state~="paddingEnd=l"]) {
+    padding-inline-end: var(--ui-space-4);
+  }
+  :scope:where(:scope):is([data-ui-cluster-state~="paddingEnd=xl"]) {
+    padding-inline-end: calc(var(--ui-space-4) * 4);
+  }
 
-/* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-cluster"][hidden] {
-  display: none;
+  :scope:where(:scope):is([data-ui-cluster-state~="gap=xs"]) {
+    --_layout-gap: var(--ui-space-2);
+  }
+  :scope:where(:scope):is([data-ui-cluster-state~="gap=s"]) {
+    --_layout-gap: var(--ui-space-3);
+  }
+  :scope:where(:scope):is([data-ui-cluster-state~="gap=m"]) {
+    --_layout-gap: var(--ui-space-4);
+  }
+  :scope:where(:scope):is([data-ui-cluster-state~="gap=l"]) {
+    --_layout-gap: var(--ui-space-5);
+  }
+  :scope:where(:scope):is([data-ui-cluster-state~="gap=xl"]) {
+    --_layout-gap: var(--ui-space-6);
+  }
+  :scope:where(:scope):is([data-ui-cluster-state~="align=start"]) {
+    align-items: flex-start;
+  }
+  :scope:where(:scope):is([data-ui-cluster-state~="align=end"]) {
+    align-items: flex-end;
+  }
+  :scope:where(:scope):is([data-ui-cluster-state~="align=baseline"]) {
+    align-items: baseline;
+  }
+  :scope:where(:scope):is([data-ui-cluster-state~="align=stretch"]) {
+    align-items: stretch;
+  }
+  :scope:where(:scope):is([data-ui-cluster-state~="justify=center"]) {
+    justify-content: center;
+  }
+  :scope:where(:scope):is([data-ui-cluster-state~="justify=end"]) {
+    justify-content: flex-end;
+  }
+  :scope:where(:scope):is([data-ui-cluster-state~="justify=between"]) {
+    justify-content: space-between;
+  }
+  :scope:where(:scope):is([data-ui-cluster-state~="wrap=nowrap"]) {
+    flex-wrap: nowrap;
+  }
+  :scope:where(:scope):is([hidden]) {
+    display: none;
+  }
 }
 </style>