@threadlabs/looma 0.28.5 → 0.28.7

package/styles/ui-stack.css

@@ -1,16 +1,24 @@
-/* Generated by HTML Next 1.0.0-alpha.35. Do not edit. */
-@property --ui-stack-height {
+/* Generated by HTML Next 1.0.0-alpha.51. Do not edit. */
+@supports (-moz-appearance: none) {
+:where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
+:where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
+}
+@supports (-moz-appearance: none) {
+[data-component~="ui-stack"] { --html-next-scope-owner: "ui-stack" !important; }
+}
+@scope ([data-component~="ui-stack"]) to ([data-component], [data-slotted]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-stack-height {
       syntax: "*";
       inherits: false;
     }
-@property --ui-stack-gap {
+
+    @property --ui-stack-gap {
       syntax: "*";
       inherits: false;
     }
-@scope ([data-component~="ui-stack"]) to ([data-component], [data-slotted]) {
-/* This component's hooks style the element they are set on, and never a nested one. */
 
-    :scope {
+    :scope:where([data-component~="ui-stack"]) {
       --_layout-gap: var(--ui-space-4);
       display: flex;
       flex-direction: column;
@@ -21,54 +29,54 @@
       margin: 0;
     }
 
-    :scope[data-ui-stack-state~="fill"] {
+    :scope:where([data-component~="ui-stack"])[data-ui-stack-state~="fill"] {
       flex: 1;
       min-block-size: 0;
     }
-    :scope[data-ui-stack-state~="height"] {
+    :scope:where([data-component~="ui-stack"])[data-ui-stack-state~="height"] {
       block-size: calc(var(--ui-stack-height, 0) * 1px);
       min-block-size: 0;
     }
 
-    :scope[data-ui-stack-state~="gap=none"] {
+    :scope:where([data-component~="ui-stack"])[data-ui-stack-state~="gap=none"] {
       --_layout-gap: 0px;
     }
-    :scope[data-ui-stack-state~="gap=xs"] {
+    :scope:where([data-component~="ui-stack"])[data-ui-stack-state~="gap=xs"] {
       --_layout-gap: var(--ui-space-2);
     }
-    :scope[data-ui-stack-state~="gap=s"] {
+    :scope:where([data-component~="ui-stack"])[data-ui-stack-state~="gap=s"] {
       --_layout-gap: var(--ui-space-3);
     }
-    :scope[data-ui-stack-state~="gap=m"] {
+    :scope:where([data-component~="ui-stack"])[data-ui-stack-state~="gap=m"] {
       --_layout-gap: var(--ui-space-4);
     }
-    :scope[data-ui-stack-state~="gap=l"] {
+    :scope:where([data-component~="ui-stack"])[data-ui-stack-state~="gap=l"] {
       --_layout-gap: var(--ui-space-5);
     }
-    :scope[data-ui-stack-state~="gap=xl"] {
+    :scope:where([data-component~="ui-stack"])[data-ui-stack-state~="gap=xl"] {
       --_layout-gap: var(--ui-space-6);
     }
-    :scope[data-ui-stack-state~="align=start"] {
+    :scope:where([data-component~="ui-stack"])[data-ui-stack-state~="align=start"] {
       align-items: flex-start;
     }
-    :scope[data-ui-stack-state~="align=center"] {
+    :scope:where([data-component~="ui-stack"])[data-ui-stack-state~="align=center"] {
       align-items: center;
     }
-    :scope[data-ui-stack-state~="align=end"] {
+    :scope:where([data-component~="ui-stack"])[data-ui-stack-state~="align=end"] {
       align-items: flex-end;
     }
-    :scope[data-ui-stack-state~="justify=center"] {
+    :scope:where([data-component~="ui-stack"])[data-ui-stack-state~="justify=center"] {
       justify-content: center;
     }
-    :scope[data-ui-stack-state~="justify=end"] {
+    :scope:where([data-component~="ui-stack"])[data-ui-stack-state~="justify=end"] {
       justify-content: flex-end;
     }
-    :scope[data-ui-stack-state~="justify=between"] {
+    :scope:where([data-component~="ui-stack"])[data-ui-stack-state~="justify=between"] {
       justify-content: space-between;
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
-    :scope[hidden] {
+    :scope:where([data-component~="ui-stack"])[hidden] {
       display: none;
     }
 }

package/styles/ui-status-message.css

@@ -1,8 +1,15 @@
-/* Generated by HTML Next 1.0.0-alpha.35. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.51. Do not edit. */
+@supports (-moz-appearance: none) {
+:where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
+:where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
+}
+@supports (-moz-appearance: none) {
+[data-component~="ui-status-message"] { --html-next-scope-owner: "ui-status-message" !important; }
+}
 @scope ([data-component~="ui-status-message"]) to ([data-component], [data-slotted]) {
 /* The one way a view says it is loading, has nothing yet, or failed, with an optional next step.
        Every view says it the same way, in the same place, at the same size. */
-    :scope {
+    :scope:where([data-component~="ui-status-message"]) {
       display: flex;
       flex-wrap: wrap;
       align-items: center;
@@ -13,17 +20,17 @@
       line-height: var(--ui-line-height);
     }
 
-    :scope[data-ui-status-message-state~="kind=error"] {
+    :scope:where([data-component~="ui-status-message"])[data-ui-status-message-state~="kind=error"] {
       color: var(--ui-danger);
     }
 
-    :scope[data-ui-status-message-state~="layout=panel"] {
+    :scope:where([data-component~="ui-status-message"])[data-ui-status-message-state~="layout=panel"] {
       padding: var(--ui-space-6);
       border: var(--ui-border-width) dashed var(--ui-border-strong);
       border-radius: var(--ui-radius-lg);
     }
 
-    :scope[data-ui-status-message-state~="layout=fill"] {
+    :scope:where([data-component~="ui-status-message"])[data-ui-status-message-state~="layout=fill"] {
       flex: 1;
       flex-direction: column;
       justify-content: center;
@@ -39,7 +46,7 @@
       min-inline-size: 0;
     }
 
-    :scope[data-ui-status-message-state~="layout=fill"] .copy {
+    :scope:where([data-component~="ui-status-message"])[data-ui-status-message-state~="layout=fill"] .copy {
       flex: none;
       align-items: center;
     }
@@ -60,7 +67,7 @@
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
-    :scope[hidden] {
+    :scope:where([data-component~="ui-status-message"])[hidden] {
       display: none;
     }
 }

package/styles/ui-switch.css

@@ -1,20 +1,27 @@
-/* Generated by HTML Next 1.0.0-alpha.35. Do not edit. */
-@property --ui-switch-gap {
+/* Generated by HTML Next 1.0.0-alpha.51. Do not edit. */
+@supports (-moz-appearance: none) {
+:where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
+:where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
+}
+@supports (-moz-appearance: none) {
+[data-component~="ui-switch"] { --html-next-scope-owner: "ui-switch" !important; }
+}
+@scope ([data-component~="ui-switch"]) to ([data-component], [data-slotted]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-switch-gap {
       syntax: "*";
       inherits: false;
     }
-@property --ui-switch-track-height {
+    @property --ui-switch-track-height {
       syntax: "*";
       inherits: false;
     }
-@property --ui-switch-track-width {
+    @property --ui-switch-track-width {
       syntax: "*";
       inherits: false;
     }
-@scope ([data-component~="ui-switch"]) to ([data-component], [data-slotted]) {
-/* This component's hooks style the element they are set on, and never a nested one. */
 
-    :scope {
+    :scope:where([data-component~="ui-switch"]) {
       /* Hooks do not inherit, so the parts below read them from the root. */
       --_ui-switch-track-width: var(--ui-switch-track-width);
       --_ui-switch-track-height: var(--ui-switch-track-height);
@@ -67,7 +74,7 @@
       margin: 0;
     }
 
-    input::after {
+    input:where(:not([data-component], [data-slotted]))::after {
       content: "";
       position: absolute;
       top: 3px;
@@ -85,7 +92,7 @@
       border-color: var(--ui-accent-solid);
     }
 
-    input:checked::after {
+    input:checked:where(:not([data-component], [data-slotted]))::after {
       transform: translateX(1rem);
       background: var(--ui-text-on-accent);
     }
@@ -95,27 +102,27 @@
       outline-offset: var(--ui-focus-width);
     }
 
-    :scope[data-ui-switch-state~="disabled"] {
+    :scope:where([data-component~="ui-switch"])[data-ui-switch-state~="disabled"] {
       color: var(--ui-disabled-text);
       cursor: not-allowed;
     }
-    :scope[data-ui-switch-state~="disabled"] .description {
+    :scope:where([data-component~="ui-switch"])[data-ui-switch-state~="disabled"] .description {
       color: var(--ui-disabled-text);
     }
-    :scope[data-ui-switch-state~="disabled"] input {
+    :scope:where([data-component~="ui-switch"])[data-ui-switch-state~="disabled"] input {
       border-color: var(--ui-disabled-border);
       background-color: var(--ui-disabled-surface);
       box-shadow: none;
       cursor: not-allowed;
     }
 
-    :scope[data-ui-switch-state~="disabled"] input::after {
+    :scope:where([data-component~="ui-switch"])[data-ui-switch-state~="disabled"] input:where(:not([data-component], [data-slotted]))::after {
       background-color: var(--ui-disabled-text);
       box-shadow: none;
     }
 
     @media (prefers-reduced-motion: reduce) {
-      input, input::after {
+      input:where(:not([data-component], [data-slotted])),  input:where(:not([data-component], [data-slotted]))::after {
         transition: none;
       }
     }
@@ -123,37 +130,37 @@
     /* A sized switch keeps its track 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. */
-    :scope[data-ui-switch-state~="size=sm"] {
+    :scope:where([data-component~="ui-switch"])[data-ui-switch-state~="size=sm"] {
       --_font: var(--ui-font-size-sm);
       --_row: var(--ui-control-size-sm);
     }
 
-    :scope[data-ui-switch-state~="size=lg"] {
+    :scope:where([data-component~="ui-switch"])[data-ui-switch-state~="size=lg"] {
       --_font: var(--ui-font-size-md);
       --_row: var(--ui-control-size-lg);
     }
 
-    :scope[data-ui-switch-state~="size=sm"],
-    :scope[data-ui-switch-state~="size=lg"] {
+    :scope:where([data-component~="ui-switch"])[data-ui-switch-state~="size=sm"],
+    :scope:where([data-component~="ui-switch"])[data-ui-switch-state~="size=lg"] {
       --_line: calc(var(--_font) * var(--ui-line-height-md));
       font-size: var(--_font);
       padding-block: calc((var(--_row) - var(--ui-switch-track-height, 1.5rem)) / 2);
     }
 
     /* The label centres on the track. */
-    :scope[data-ui-switch-state~="size=sm"] .text,
-    :scope[data-ui-switch-state~="size=lg"] .text {
+    :scope:where([data-component~="ui-switch"])[data-ui-switch-state~="size=sm"] .text,
+    :scope:where([data-component~="ui-switch"])[data-ui-switch-state~="size=lg"] .text {
       margin-top: calc((var(--_ui-switch-track-height, 1.5rem) - var(--_line)) / 2);
     }
 
     @media (pointer: coarse) {
-      :scope[data-ui-switch-state~="size=sm"] {
+      :scope:where([data-component~="ui-switch"])[data-ui-switch-state~="size=sm"] {
         --_row: var(--ui-control-min-block-size);
       }
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
-    :scope[hidden] {
+    :scope:where([data-component~="ui-switch"])[hidden] {
       display: none;
     }
 }

package/styles/ui-switcher.css

@@ -1,16 +1,23 @@
-/* Generated by HTML Next 1.0.0-alpha.35. Do not edit. */
-@property --ui-switcher-gap {
+/* Generated by HTML Next 1.0.0-alpha.51. Do not edit. */
+@supports (-moz-appearance: none) {
+:where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
+:where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
+}
+@supports (-moz-appearance: none) {
+[data-component~="ui-switcher"] { --html-next-scope-owner: "ui-switcher" !important; }
+}
+@scope ([data-component~="ui-switcher"]) to ([data-component], [data-slotted]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-switcher-gap {
       syntax: "*";
       inherits: false;
     }
-@property --ui-switcher-threshold {
+    @property --ui-switcher-threshold {
       syntax: "*";
       inherits: false;
     }
-@scope ([data-component~="ui-switcher"]) to ([data-component], [data-slotted]) {
-/* This component's hooks style the element they are set on, and never a nested one. */
 
-    :scope {
+    :scope:where([data-component~="ui-switcher"]) {
       /* Hooks do not inherit, so the parts below read them from the root. */
       --_ui-switcher-threshold: var(--ui-switcher-threshold);
 
@@ -23,56 +30,56 @@
       margin: 0;
     }
 
-    :scope[data-ui-switcher-state~="gap=xs"] {
+    :scope:where([data-component~="ui-switcher"])[data-ui-switcher-state~="gap=xs"] {
       --_switcher-gap: var(--ui-space-2);
     }
-    :scope[data-ui-switcher-state~="gap=s"] {
+    :scope:where([data-component~="ui-switcher"])[data-ui-switcher-state~="gap=s"] {
       --_switcher-gap: var(--ui-space-3);
     }
-    :scope[data-ui-switcher-state~="gap=m"] {
+    :scope:where([data-component~="ui-switcher"])[data-ui-switcher-state~="gap=m"] {
       --_switcher-gap: var(--ui-space-4);
     }
-    :scope[data-ui-switcher-state~="gap=l"] {
+    :scope:where([data-component~="ui-switcher"])[data-ui-switcher-state~="gap=l"] {
       --_switcher-gap: var(--ui-space-5);
     }
-    :scope[data-ui-switcher-state~="gap=xl"] {
+    :scope:where([data-component~="ui-switcher"])[data-ui-switcher-state~="gap=xl"] {
       --_switcher-gap: var(--ui-space-6);
     }
-    :scope[data-ui-switcher-state~="align=start"] {
+    :scope:where([data-component~="ui-switcher"])[data-ui-switcher-state~="align=start"] {
       align-items: flex-start;
     }
-    :scope[data-ui-switcher-state~="align=center"] {
+    :scope:where([data-component~="ui-switcher"])[data-ui-switcher-state~="align=center"] {
       align-items: center;
     }
-    :scope[data-ui-switcher-state~="align=end"] {
+    :scope:where([data-component~="ui-switcher"])[data-ui-switcher-state~="align=end"] {
       align-items: flex-end;
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
-    :scope[hidden] {
+    :scope:where([data-component~="ui-switcher"])[hidden] {
       display: none;
     }
 }
 @scope ([data-component~="ui-switcher"]) to ([data-component]) {
 /* This component's hooks style the element they are set on, and never a nested one. */
 
-    :scope > :where([data-slotted], [data-slotted] *):is(*) {
+    :scope:where([data-component~="ui-switcher"]) > :where([data-slotted], [data-slotted] *):is(*) {
       min-inline-size: 0;
       flex-grow: 1;
       /* The large multiplier makes the basis flip as a group at the intrinsic threshold. */
       flex-basis: calc((var(--_ui-switcher-threshold, 30rem) - 100%) * 999);
     }
 
-    :scope[data-ui-switcher-state~="overLimit"] > :where([data-slotted], [data-slotted] *):is(*) {
+    :scope:where([data-component~="ui-switcher"])[data-ui-switcher-state~="overLimit"] > :where([data-slotted], [data-slotted] *):is(*) {
       flex-basis: 100%;
     }
-    :scope[data-ui-switcher-state~="threshold=xs"] > :where([data-slotted], [data-slotted] *):is(*) {
+    :scope:where([data-component~="ui-switcher"])[data-ui-switcher-state~="threshold=xs"] > :where([data-slotted], [data-slotted] *):is(*) {
       flex-basis: calc((var(--_ui-switcher-threshold, 20rem) - 100%) * 999);
     }
-    :scope[data-ui-switcher-state~="threshold=md"] > :where([data-slotted], [data-slotted] *):is(*) {
+    :scope:where([data-component~="ui-switcher"])[data-ui-switcher-state~="threshold=md"] > :where([data-slotted], [data-slotted] *):is(*) {
       flex-basis: calc((var(--_ui-switcher-threshold, 45rem) - 100%) * 999);
     }
-    :scope[data-ui-switcher-state~="threshold=lg"] > :where([data-slotted], [data-slotted] *):is(*) {
+    :scope:where([data-component~="ui-switcher"])[data-ui-switcher-state~="threshold=lg"] > :where([data-slotted], [data-slotted] *):is(*) {
       flex-basis: calc((var(--_ui-switcher-threshold, 60rem) - 100%) * 999);
     }
 

package/styles/ui-table.css

@@ -1,11 +1,18 @@
-/* Generated by HTML Next 1.0.0-alpha.35. Do not edit. */
+/* Generated by HTML Next 1.0.0-alpha.51. Do not edit. */
+@supports (-moz-appearance: none) {
+:where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
+:where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
+}
+@supports (-moz-appearance: none) {
+[data-component~="ui-table"] { --html-next-scope-owner: "ui-table" !important; }
+}
 @scope ([data-component~="ui-table"]) to ([data-component], [data-slotted]) {
 /* Styles an authored <table> (caption, thead, tbody, th scope) without replacing it: the table is
        meaningful before JavaScript, and a screen reader reads it as a table. The root scrolls a table
        wider than it, or taller than a bounded height; while it does, the controller makes the root a named, focusable region so a
        keyboard can scroll it. A cell's data-ui-align (start, center, or end; start by default) sets its
        content along the row, such as end for a column of figures. */
-    :scope {
+    :scope:where([data-component~="ui-table"]) {
       --_pad-block: var(--ui-space-1);
       --_pad-inline: var(--ui-space-3);
       --_row-size: var(--ui-control-size);
@@ -36,16 +43,16 @@
         calc(100% - var(--_ui-scroll-fade-size)) 100%;
     }
 
-    :scope:dir(rtl) {
+    :scope:where([data-component~="ui-table"]):dir(rtl) {
       --_ui-scroll-fade-direction: to left;
     }
 
-    :scope:focus-visible {
+    :scope:where([data-component~="ui-table"]):focus-visible {
       outline: var(--ui-focus-width) solid var(--ui-focus-ring);
       outline-offset: calc(-1 * var(--ui-focus-width));
     }
 
-    :scope[data-ui-table-state~="density=compact"] {
+    :scope:where([data-component~="ui-table"])[data-ui-table-state~="density=compact"] {
       --_pad-block: var(--ui-space-0-5);
       --_pad-inline: var(--ui-space-2);
       --_row-size: var(--ui-control-size-sm);
@@ -57,7 +64,7 @@
        rhythm of the rows around it. A cell's height is its minimum. */
 
     /* A component that sets its display still honours the hidden attribute on its root. */
-    :scope[hidden] {
+    :scope:where([data-component~="ui-table"])[hidden] {
       display: none;
     }
 }
@@ -124,7 +131,7 @@
       text-align: end;
     }
 
-    :scope[data-ui-table-state~="stickyHeader"] :where([data-slotted], [data-slotted] *):is(thead th) {
+    :scope:where([data-component~="ui-table"])[data-ui-table-state~="stickyHeader"] :where([data-slotted], [data-slotted] *):is(thead th) {
       position: sticky;
       inset-block-start: 0;
       z-index: 1;

package/styles/ui-tabs.css

@@ -1,21 +1,28 @@
-/* Generated by HTML Next 1.0.0-alpha.35. Do not edit. */
-@property --ui-tabs-tab-min-block-size {
+/* Generated by HTML Next 1.0.0-alpha.51. Do not edit. */
+@supports (-moz-appearance: none) {
+:where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
+:where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
+}
+@supports (-moz-appearance: none) {
+[data-component~="ui-tabs"] { --html-next-scope-owner: "ui-tabs" !important; }
+}
+@scope ([data-component~="ui-tabs"]) to ([data-component], [data-slotted]) {
+/* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-tabs-tab-min-block-size {
       syntax: "*";
       inherits: false;
     }
-@property --ui-tabs-tab-padding-block {
+    @property --ui-tabs-tab-padding-block {
       syntax: "*";
       inherits: false;
     }
-@property --ui-tabs-tab-padding-inline {
+    @property --ui-tabs-tab-padding-inline {
       syntax: "*";
       inherits: false;
     }
-@scope ([data-component~="ui-tabs"]) to ([data-component], [data-slotted]) {
-/* This component's hooks style the element they are set on, and never a nested one. */
 
     /* Density resolves into the tab row's own values; the public tokens still override them. */
-    :scope {
+    :scope:where([data-component~="ui-tabs"]) {
       /* Hooks do not inherit, so the parts below read them from the root. */
       --_ui-tabs-tab-min-block-size: var(--ui-tabs-tab-min-block-size);
       --_ui-tabs-tab-padding-block: var(--ui-tabs-tab-padding-block);
@@ -26,13 +33,13 @@
       --_tab-padding-inline: var(--ui-space-3);
     }
 
-    :scope[data-ui-tabs-state~="density=compact"] {
+    :scope:where([data-component~="ui-tabs"])[data-ui-tabs-state~="density=compact"] {
       --_tab-min-block-size: var(--ui-control-size-sm);
       --_tab-padding-block: var(--ui-space-1);
       --_tab-padding-inline: var(--ui-space-2);
     }
 
-    :scope {
+    :scope:where([data-component~="ui-tabs"]) {
       display: grid;
       inline-size: 100%;
       min-inline-size: 0;
@@ -61,7 +68,7 @@
     @supports (text-box-trim: trim-both) {
     }
 
-    :scope[data-ui-tabs-state~="stretch"] .list {
+    :scope:where([data-component~="ui-tabs"])[data-ui-tabs-state~="stretch"] .list {
       grid-auto-columns: minmax(max-content, 1fr);
     }
 
@@ -69,12 +76,12 @@
       min-inline-size: 0;
     }
 
-    :scope[data-ui-tabs-state~="orientation=vertical"] {
+    :scope:where([data-component~="ui-tabs"])[data-ui-tabs-state~="orientation=vertical"] {
       grid-template-columns: max-content minmax(0, 1fr);
       align-items: start;
     }
 
-    :scope[data-ui-tabs-state~="orientation=vertical"] .list {
+    :scope:where([data-component~="ui-tabs"])[data-ui-tabs-state~="orientation=vertical"] .list {
       grid-auto-flow: row;
       grid-auto-columns: auto;
       border-block-end: 0;
@@ -85,7 +92,7 @@
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
-    :scope[hidden] {
+    :scope:where([data-component~="ui-tabs"])[hidden] {
       display: none;
     }
 }
@@ -153,16 +160,16 @@
       padding: var(--ui-space-4);
     }
 
-    :scope[data-ui-tabs-state~="orientation=vertical"] .list button,
-    :scope[data-ui-tabs-state~="orientation=vertical"] .list > :where([data-slotted], [data-slotted] *):is(button[slot="tab"]) {
+    :scope:where([data-component~="ui-tabs"])[data-ui-tabs-state~="orientation=vertical"] .list button,
+    :scope:where([data-component~="ui-tabs"])[data-ui-tabs-state~="orientation=vertical"] .list > :where([data-slotted], [data-slotted] *):is(button[slot="tab"]) {
       margin: 0 calc(-1 * var(--ui-border-width)) 0 0;
       border-block-end: 0;
       border-inline-end: var(--ui-accent-line-width) solid transparent;
       text-align: start;
     }
 
-    :scope[data-ui-tabs-state~="orientation=vertical"] .list button[aria-selected="true"],
-    :scope[data-ui-tabs-state~="orientation=vertical"] .list > :where([data-slotted], [data-slotted] *):is(button[slot="tab"][aria-selected="true"]) {
+    :scope:where([data-component~="ui-tabs"])[data-ui-tabs-state~="orientation=vertical"] .list button[aria-selected="true"],
+    :scope:where([data-component~="ui-tabs"])[data-ui-tabs-state~="orientation=vertical"] .list > :where([data-slotted], [data-slotted] *):is(button[slot="tab"][aria-selected="true"]) {
       border-inline-end-color: var(--ui-accent-solid);
     }