@threadlabs/looma 0.28.5 → 0.28.6

package/vue/UiRadioGroup.vue

@@ -1,8 +1,14 @@
-<!-- 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, provide, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
-import { createDispatch, useComponentHost } from './host'
+import {
+  checkHydratedRoot,
+  createDispatch,
+  nativeAttrs,
+  useComponentHost,
+  useReflectedProp,
+} from './host'
 import { acceptsControllerWrite } from './props'
 import { checkedProp, propValidityState, vPropValidity } from './props'
 
@@ -145,38 +151,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:value': [value: string]
@@ -203,22 +178,7 @@ const emit = defineEmits<{
 const root = ref<HTMLElement | null>(null)
 const internalValue = ref('')
 provide('html-next:ui-radio-group:internalValue', internalValue)
-const hydrationNode = hydrationInstance?.vnode.el
-if (
-  typeof window !== 'undefined' && hydrationNode != null
-  && (!(hydrationNode instanceof Element) || hydrationNode.localName !== ('fieldset'))
-) {
-  throw Object.assign(
-    new Error('HR005: Server markup for <ui-radio-group> has an incompatible root.'),
-    {
-      name: 'HtmlDiagnosticError',
-      diagnostic: Object.freeze({
-        code: 'HR005',
-        message: 'Server markup for <ui-radio-group> has an incompatible root.',
-      }),
-    },
-  )
-}
+checkHydratedRoot('fieldset', 'ui-radio-group')
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
@@ -288,7 +248,7 @@ useComponentHost(() => import('../components/ui-radio-group/ui-radio-group.js'),
 
 <template>
   <fieldset
-    data-component="ui-radio-group"
+    class="ui-radio-group"
     role="radiogroup"
     v-bind="nativeAttrs($attrs)"
     :aria-required="checkedProps.required ?? undefined"
@@ -316,44 +276,46 @@ useComponentHost(() => import('../components/ui-radio-group/ui-radio-group.js'),
   inherits: false;
 }
 
-[data-component~="ui-radio-group"] {
-  --_ui-radio-group-invalid-text: var(
-    --ui-radio-group-invalid-text,
-    var(--ui-field-danger, var(--ui-danger-solid))
-  );
-  display: inline-flex;
-  align-items: center;
-  gap: var(--ui-space-2);
-  min-inline-size: 0;
-  margin: 0;
-  padding: 0;
-  border: 0;
-}
+/* A component that sets its display still honours the hidden attribute on its root. */
 
-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);
-}
+@scope (.ui-radio-group) {
+  :scope:where(:scope) {
+    --_ui-radio-group-invalid-text: var(
+      --ui-radio-group-invalid-text,
+      var(--ui-field-danger, var(--ui-danger-solid))
+    );
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ui-space-2);
+    min-inline-size: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+  }
 
-legend + * {
-  clear: both;
-}
+  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);
+  }
 
-[data-component~="ui-radio-group"][data-ui-radio-group-state~="invalid"] legend {
-  color: var(--_ui-radio-group-invalid-text);
-}
+  legend + * {
+    clear: both;
+  }
 
-[data-component~="ui-radio-group"][data-ui-radio-group-state~="orientation=vertical"] {
-  display: inline-grid;
-  justify-items: start;
-}
+  :scope[data-ui-radio-group-state~="invalid"] legend {
+    color: var(--_ui-radio-group-invalid-text);
+  }
 
-/* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-radio-group"][hidden] {
-  display: none;
+  :scope:where(:scope):is([data-ui-radio-group-state~="orientation=vertical"]) {
+    display: inline-grid;
+    justify-items: start;
+  }
+  :scope:where(:scope):is([hidden]) {
+    display: none;
+  }
 }
 </style>

package/vue/UiReel.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 })
@@ -67,53 +68,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-reel> has an incompatible root.'), {
-    name: 'HtmlDiagnosticError',
-    diagnostic: Object.freeze({
-      code: 'HR005',
-      message: 'Server markup for <ui-reel> has an incompatible root.',
-    }),
-  })
-}
+checkHydratedRoot('div', 'ui-reel')
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
@@ -131,7 +88,7 @@ const hostState = computed(() =>
 
 <template>
   <div
-    data-component="ui-reel"
+    class="ui-reel"
     role="region"
     tabindex="0"
     v-bind="nativeAttrs($attrs)"
@@ -156,92 +113,94 @@ const hostState = computed(() =>
   inherits: false;
 }
 
-[data-component~="ui-reel"] {
-  /* Hooks do not inherit, so the parts below read them from the root. */
-  --_ui-reel-item-width: var(--ui-reel-item-width);
+/* Each end that hides items fades: the scroll fade every Looma scroller uses (see ui-scroll-area). */
 
-  --_reel-gap: var(--ui-space-4);
-  --_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;
-}
+/* A component that sets its display still honours the hidden attribute on its root. */
 
-/* Each end that hides items fades: the scroll fade every Looma scroller uses (see ui-scroll-area). */
-[data-component~="ui-reel"] {
-  --_ui-scroll-fade-direction: to right;
-  --_ui-scroll-fade-size: var(--ui-scroll-fade-size, 24px);
-  mask-image: linear-gradient(
-    var(--_ui-scroll-fade-direction),
-    transparent,
-    #000 var(--_ui-scroll-fade-start),
-    #000 calc(100% - var(--_ui-scroll-fade-end)),
-    transparent
-  );
-  animation:
-    ui-scroll-fade-start linear,
-    ui-scroll-fade-start-hold linear,
-    ui-scroll-fade-end-hold linear,
-    ui-scroll-fade-end linear;
-  animation-timeline: scroll(self inline);
-  animation-range:
-    0 var(--_ui-scroll-fade-size),
-    var(--_ui-scroll-fade-size) calc(100% + 1px),
-    -1px calc(100% - var(--_ui-scroll-fade-size)),
-    calc(100% - var(--_ui-scroll-fade-size)) 100%;
-}
+@scope (.ui-reel) {
+  :scope:where(:scope) {
+    /* Hooks do not inherit, so the parts below read them from the root. */
+    --_ui-reel-item-width: var(--ui-reel-item-width);
 
-[data-component~="ui-reel"]:dir(rtl) {
-  --_ui-scroll-fade-direction: to left;
-}
+    --_reel-gap: var(--ui-space-4);
+    --_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:where(:scope) {
+    --_ui-scroll-fade-direction: to right;
+    --_ui-scroll-fade-size: var(--ui-scroll-fade-size, 24px);
+    mask-image: linear-gradient(
+      var(--_ui-scroll-fade-direction),
+      transparent,
+      #000 var(--_ui-scroll-fade-start),
+      #000 calc(100% - var(--_ui-scroll-fade-end)),
+      transparent
+    );
+    animation:
+      ui-scroll-fade-start linear,
+      ui-scroll-fade-start-hold linear,
+      ui-scroll-fade-end-hold linear,
+      ui-scroll-fade-end linear;
+    animation-timeline: scroll(self inline);
+    animation-range:
+      0 var(--_ui-scroll-fade-size),
+      var(--_ui-scroll-fade-size) calc(100% + 1px),
+      -1px calc(100% - var(--_ui-scroll-fade-size)),
+      calc(100% - var(--_ui-scroll-fade-size)) 100%;
+  }
 
-[data-component~="ui-reel"] > :slotted(*) {
-  min-inline-size: 0;
-  flex: 0 0 var(--_ui-reel-item-width, var(--_reel-item-width));
-}
+  :scope:where(:scope):is(:dir(rtl)) {
+    --_ui-scroll-fade-direction: to left;
+  }
 
-[data-component~="ui-reel"][data-ui-reel-state~="gap=xs"] {
-  --_reel-gap: var(--ui-space-2);
-}
-[data-component~="ui-reel"][data-ui-reel-state~="gap=s"] {
-  --_reel-gap: var(--ui-space-3);
-}
-[data-component~="ui-reel"][data-ui-reel-state~="gap=m"] {
-  --_reel-gap: var(--ui-space-4);
-}
-[data-component~="ui-reel"][data-ui-reel-state~="gap=l"] {
-  --_reel-gap: var(--ui-space-5);
-}
-[data-component~="ui-reel"][data-ui-reel-state~="gap=xl"] {
-  --_reel-gap: var(--ui-space-6);
-}
-[data-component~="ui-reel"][data-ui-reel-state~="itemWidth=sm"] {
-  --_reel-item-width: 12rem;
-}
-[data-component~="ui-reel"][data-ui-reel-state~="itemWidth=md"] {
-  --_reel-item-width: 16rem;
-}
-[data-component~="ui-reel"][data-ui-reel-state~="itemWidth=lg"] {
-  --_reel-item-width: 20rem;
-}
-[data-component~="ui-reel"][data-ui-reel-state~="snap"] {
-  scroll-snap-type: inline mandatory;
-}
-[data-component~="ui-reel"][data-ui-reel-state~="snap=start"] > :slotted(*) {
-  scroll-snap-align: start;
-}
-[data-component~="ui-reel"][data-ui-reel-state~="snap=center"] > :slotted(*) {
-  scroll-snap-align: center;
-}
+  :scope > :slotted(*) {
+    min-inline-size: 0;
+    flex: 0 0 var(--_ui-reel-item-width, var(--_reel-item-width));
+  }
 
-/* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-reel"][hidden] {
-  display: none;
+  :scope:where(:scope):is([data-ui-reel-state~="gap=xs"]) {
+    --_reel-gap: var(--ui-space-2);
+  }
+  :scope:where(:scope):is([data-ui-reel-state~="gap=s"]) {
+    --_reel-gap: var(--ui-space-3);
+  }
+  :scope:where(:scope):is([data-ui-reel-state~="gap=m"]) {
+    --_reel-gap: var(--ui-space-4);
+  }
+  :scope:where(:scope):is([data-ui-reel-state~="gap=l"]) {
+    --_reel-gap: var(--ui-space-5);
+  }
+  :scope:where(:scope):is([data-ui-reel-state~="gap=xl"]) {
+    --_reel-gap: var(--ui-space-6);
+  }
+  :scope:where(:scope):is([data-ui-reel-state~="itemWidth=sm"]) {
+    --_reel-item-width: 12rem;
+  }
+  :scope:where(:scope):is([data-ui-reel-state~="itemWidth=md"]) {
+    --_reel-item-width: 16rem;
+  }
+  :scope:where(:scope):is([data-ui-reel-state~="itemWidth=lg"]) {
+    --_reel-item-width: 20rem;
+  }
+  :scope:where(:scope):is([data-ui-reel-state~="snap"]) {
+    scroll-snap-type: inline mandatory;
+  }
+  :scope[data-ui-reel-state~="snap=start"] > :slotted(*) {
+    scroll-snap-align: start;
+  }
+  :scope[data-ui-reel-state~="snap=center"] > :slotted(*) {
+    scroll-snap-align: center;
+  }
+  :scope:where(:scope):is([hidden]) {
+    display: none;
+  }
 }
 </style>

package/vue/UiScrollArea.d.ts

@@ -48,8 +48,8 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
 }>> & Readonly<{}>, {
     fill: boolean | null;
     size: "sm" | "md" | "lg" | "content" | null;
-    padding: "none" | "xs" | "sm" | "md" | "lg" | null;
     trim: boolean | null;
+    padding: "none" | "xs" | "sm" | "md" | "lg" | null;
     orientation: "vertical" | "horizontal" | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/vue/UiScrollArea.vue

@@ -1,8 +1,14 @@
-<!-- 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, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
-import { createDispatch, useComponentHost } from './host'
+import {
+  checkHydratedRoot,
+  createDispatch,
+  nativeAttrs,
+  useComponentHost,
+  useReflectedProp,
+} from './host'
 import { checkedProp, propValidityState, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
@@ -118,58 +124,12 @@ 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 root = ref<HTMLElement | null>(null)
 const contentElement = useTemplateRef<HTMLElement>('contentElement')
-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-scroll-area> has an incompatible root.'),
-    {
-      name: 'HtmlDiagnosticError',
-      diagnostic: Object.freeze({
-        code: 'HR005',
-        message: 'Server markup for <ui-scroll-area> has an incompatible root.',
-      }),
-    },
-  )
-}
+checkHydratedRoot('div', 'ui-scroll-area')
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
@@ -213,7 +173,7 @@ useComponentHost(() => import('../components/ui-scroll-area/ui-scroll-area.js'),
 
 <template>
   <div
-    data-component="ui-scroll-area"
+    class="ui-scroll-area"
     v-bind="nativeAttrs($attrs)"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-fill="reflectedProp('fill', 'fill', checkedProps.fill, undefined, false)"
@@ -232,82 +192,81 @@ useComponentHost(() => import('../components/ui-scroll-area/ui-scroll-area.js'),
 /* The controller sets each fade length from overflow and scroll position. The mask blends
        into whatever is behind the area without needing to know its colour. Before upgrade, its
        zero-length defaults leave the authored scroll area fully visible. */
-[data-component~="ui-scroll-area"][data-ui-scroll-area-state~="fill"] {
-  flex: 1;
-}
 
-[data-component~="ui-scroll-area"] {
-  display: block;
-  box-sizing: border-box;
-  min-block-size: 0;
-  min-inline-size: 0;
-  overflow-x: hidden;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  --_ui-scroll-fade-direction: to bottom;
-  --_ui-scroll-fade-inline: to right;
-  --_ui-scroll-fade-size: var(--ui-scroll-fade-size, 24px);
-  mask-image: linear-gradient(
-    var(--_ui-scroll-fade-direction),
-    transparent,
-    #000 var(--_ui-scroll-fade-start),
-    #000 calc(100% - var(--_ui-scroll-fade-end)),
-    transparent
-  );
-}
+/* Trim projected edges without changing spacing inside an item. */
 
-.content {
-  display: flow-root;
-}
+/* A component that sets its display still honours the hidden attribute on its root. */
 
-/* Trim projected edges without changing spacing inside an item. */
-[data-component~="ui-scroll-area"][data-ui-scroll-area-state~="trim"]
-  .content
-  > :slotted(:first-child) {
-  margin-block-start: 0;
-}
+@scope (.ui-scroll-area) {
+  :scope:where(:scope):is([data-ui-scroll-area-state~="fill"]) {
+    flex: 1;
+  }
 
-[data-component~="ui-scroll-area"][data-ui-scroll-area-state~="trim"]
-  .content
-  > :slotted(:last-child) {
-  margin-block-end: 0;
-}
+  :scope:where(:scope) {
+    display: block;
+    box-sizing: border-box;
+    min-block-size: 0;
+    min-inline-size: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    --_ui-scroll-fade-direction: to bottom;
+    --_ui-scroll-fade-inline: to right;
+    --_ui-scroll-fade-size: var(--ui-scroll-fade-size, 24px);
+    mask-image: linear-gradient(
+      var(--_ui-scroll-fade-direction),
+      transparent,
+      #000 var(--_ui-scroll-fade-start),
+      #000 calc(100% - var(--_ui-scroll-fade-end)),
+      transparent
+    );
+  }
 
-[data-component~="ui-scroll-area"][data-ui-scroll-area-state~="orientation=horizontal"] {
-  overflow-x: auto;
-  overflow-y: hidden;
-  --_ui-scroll-fade-direction: var(--_ui-scroll-fade-inline);
-}
+  .content {
+    display: flow-root;
+  }
+  :scope[data-ui-scroll-area-state~="trim"] .content > :slotted(:first-child) {
+    margin-block-start: 0;
+  }
 
-[data-component~="ui-scroll-area"]:dir(rtl) {
-  --_ui-scroll-fade-inline: to left;
-}
+  :scope[data-ui-scroll-area-state~="trim"] .content > :slotted(:last-child) {
+    margin-block-end: 0;
+  }
 
-[data-component~="ui-scroll-area"][data-ui-scroll-area-state~="size=sm"] {
-  max-block-size: calc(9.375rem + var(--ui-scroll-fade-size, 24px));
-}
-[data-component~="ui-scroll-area"][data-ui-scroll-area-state~="size=md"] {
-  max-block-size: 20rem;
-}
-[data-component~="ui-scroll-area"][data-ui-scroll-area-state~="size=lg"] {
-  max-block-size: 30rem;
-}
+  :scope:where(:scope):is([data-ui-scroll-area-state~="orientation=horizontal"]) {
+    overflow-x: auto;
+    overflow-y: hidden;
+    --_ui-scroll-fade-direction: var(--_ui-scroll-fade-inline);
+  }
 
-[data-component~="ui-scroll-area"][data-ui-scroll-area-state~="padding=xs"] {
-  padding: var(--ui-space-2);
-}
-[data-component~="ui-scroll-area"][data-ui-scroll-area-state~="padding=sm"] {
-  padding: var(--ui-space-3);
-}
-[data-component~="ui-scroll-area"][data-ui-scroll-area-state~="padding=md"] {
-  padding: var(--ui-space-5);
-}
-[data-component~="ui-scroll-area"][data-ui-scroll-area-state~="padding=lg"] {
-  padding: var(--ui-space-6);
-}
+  :scope:where(:scope):is(:dir(rtl)) {
+    --_ui-scroll-fade-inline: to left;
+  }
 
-/* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-scroll-area"][hidden] {
-  display: none;
+  :scope:where(:scope):is([data-ui-scroll-area-state~="size=sm"]) {
+    max-block-size: calc(9.375rem + var(--ui-scroll-fade-size, 24px));
+  }
+  :scope:where(:scope):is([data-ui-scroll-area-state~="size=md"]) {
+    max-block-size: 20rem;
+  }
+  :scope:where(:scope):is([data-ui-scroll-area-state~="size=lg"]) {
+    max-block-size: 30rem;
+  }
+
+  :scope:where(:scope):is([data-ui-scroll-area-state~="padding=xs"]) {
+    padding: var(--ui-space-2);
+  }
+  :scope:where(:scope):is([data-ui-scroll-area-state~="padding=sm"]) {
+    padding: var(--ui-space-3);
+  }
+  :scope:where(:scope):is([data-ui-scroll-area-state~="padding=md"]) {
+    padding: var(--ui-space-5);
+  }
+  :scope:where(:scope):is([data-ui-scroll-area-state~="padding=lg"]) {
+    padding: var(--ui-space-6);
+  }
+  :scope:where(:scope):is([hidden]) {
+    display: none;
+  }
 }
 </style>