@limetech/lime-elements 40.12.3 → 40.13.0

package/dist/collection/components/form/show-field.js

@@ -0,0 +1,116 @@
+import { flushSync } from "react-dom";
+import { toSchemaPath } from "./templates/object-field";
+import { getFocusTarget } from "../../util/get-focus-target";
+const HIGHLIGHT_CLASS = 'limel-form-field--highlighted';
+const STABLE_FRAMES = 3;
+const MAX_SETTLE_MS = 2000;
+const MAX_RENDER_FRAMES = 30;
+/**
+ * Open what is closed above a field, scroll it into view, focus it and
+ * highlight it.
+ *
+ * @param root - the element the form is rendered in
+ * @param path - the path of the field in the value of the form
+ */
+export async function showField(root, path) {
+    if (!(await waitUntilRendered(root, path))) {
+        return;
+    }
+    let target;
+    for (let depth = 1; depth <= path.length; depth++) {
+        const element = findByPath(root, path.slice(0, depth));
+        if (!element) {
+            break;
+        }
+        target = element;
+        openSectionsAround(root, element);
+    }
+    if (!target) {
+        return;
+    }
+    // The components inside the field have to be drawn, and the sections
+    // around it opened, before the field is where it will stay.
+    const focusTarget = await getFocusTarget(target);
+    await waitForLayoutToSettle(target);
+    target.scrollIntoView({
+        block: 'center',
+        behavior: prefersReducedMotion() ? 'instant' : 'smooth',
+    });
+    focusTarget === null || focusTarget === void 0 ? void 0 : focusTarget.focus({ preventScroll: true });
+    await waitForLayoutToSettle(target);
+    highlight(target);
+}
+function findByPath(root, path) {
+    const schemaPath = toSchemaPath(path.map(String));
+    return root.querySelector(`[data-schema-path="${CSS.escape(schemaPath)}"]`);
+}
+// The form is drawn a moment after its value or schema is set, so give it a few
+// frames to show the start of the path.
+async function waitUntilRendered(root, path) {
+    for (let frame = 0; frame < MAX_RENDER_FRAMES; frame++) {
+        if (findByPath(root, path.slice(0, 1))) {
+            return true;
+        }
+        await nextFrame();
+    }
+    return false;
+}
+function openSectionsAround(root, element) {
+    for (let node = element; node && node !== root; node = node.parentElement) {
+        if (isClosedSection(node)) {
+            open(node);
+        }
+    }
+}
+function isClosedSection(element) {
+    return (element.tagName === 'LIMEL-COLLAPSIBLE-SECTION' &&
+        !element.isOpen);
+}
+// A collapsed list item renders its fields only once its section says it has
+// been opened, and they have to be in place before the next step is looked up.
+function open(section) {
+    section.isOpen = true;
+    flushSync(() => {
+        section.dispatchEvent(new CustomEvent('open'));
+    });
+}
+// Wait until the field has a size and has stayed in place for a few frames, so
+// it is not scrolled to while the form still grows, nor flashed while scrolling.
+async function waitForLayoutToSettle(element) {
+    let previous = '';
+    let stableFrames = 0;
+    const deadline = performance.now() + MAX_SETTLE_MS;
+    while (performance.now() < deadline) {
+        await nextFrame();
+        const { top, height } = element.getBoundingClientRect();
+        const current = `${top}:${height}`;
+        const isStill = height > 0 && current === previous;
+        stableFrames = isStill ? stableFrames + 1 : 0;
+        if (stableFrames === STABLE_FRAMES) {
+            return;
+        }
+        previous = current;
+    }
+}
+function highlight(element) {
+    // Removed for a frame first, so showing the same field again restarts it.
+    element.classList.remove(HIGHLIGHT_CLASS);
+    const removeHighlight = (event) => {
+        // Animations of what the field holds end here too.
+        if (event.animationName !== 'highlight-field-shadow') {
+            return;
+        }
+        element.classList.remove(HIGHLIGHT_CLASS);
+        element.removeEventListener('animationend', removeHighlight);
+    };
+    requestAnimationFrame(() => {
+        element.classList.add(HIGHLIGHT_CLASS);
+        element.addEventListener('animationend', removeHighlight);
+    });
+}
+function prefersReducedMotion() {
+    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+function nextFrame() {
+    return new Promise((resolve) => requestAnimationFrame(() => resolve()));
+}

package/dist/collection/components/form/templates/array-field-collapsible-item.js

@@ -54,6 +54,7 @@ export class CollapsibleItemTemplate extends React.Component {
                 this.section = section;
             },
             'is-open': this.state.isOpen,
+            'data-schema-path': this.props.schemaPath,
             'data-reorder-id': String(this.props.index),
             'data-reorderable': this.props.allowItemReorder
                 ? 'true'

package/dist/collection/components/form/templates/array-field-item.js

@@ -3,6 +3,7 @@ import { isObjectType } from "../schema";
 import { CollapsibleItemTemplate } from "./array-field-collapsible-item";
 import { SimpleItemTemplate } from "./array-field-simple-item";
 import { ArrayFieldContext, ArrayItemErrorsContext } from "./array-context";
+import { toSchemaPath } from "./object-field";
 export const ArrayFieldItemTemplate = (props) => {
     const arrayContext = useContext(ArrayFieldContext);
     const itemErrors = useContext(ArrayItemErrorsContext);
@@ -26,6 +27,10 @@ export const ArrayFieldItemTemplate = (props) => {
             allowItemReorder: allowItemReorder,
             errorSchema: itemErrors === null || itemErrors === void 0 ? void 0 : itemErrors[props.index],
             revealErrors: (formContext === null || formContext === void 0 ? void 0 : formContext.revealErrors) === true,
+            schemaPath: toSchemaPath([
+                ...arrayContext.schemaPath,
+                String(props.index),
+            ]),
         }, props.children);
     }
     return React.createElement(SimpleItemTemplate, {

package/dist/collection/components/form/templates/array-field.js

@@ -1,14 +1,10 @@
 import React from "react";
 import { renderDescription, renderTitle } from "./common";
-import Sortable from "sortablejs";
+import { toSchemaPath } from "./object-field";
+import { DragToReorder } from "../../../util/drag-to-reorder";
 import { ArrayFieldContext } from "./array-context";
 export const ARRAY_REORDER_EVENT = 'arrayReorder';
-const DRAG_HANDLE_SELECTOR = '[data-drag-handle]';
 const DRAGGABLE_ITEM_SELECTOR = '.array-item[data-reorderable="true"]';
-const DEFAULT_CONTAINER_CLASS = 'has-an-item-which-is-being-dragged';
-const DEFAULT_DROP_ELEVATION_CLASS = 'is-elevated';
-const DROP_ELEVATION_DURATION = 1000;
-const TOUCH_DRAG_DELAY_MS = 200; // Adds a short hold on touch (long-press) so scroll gestures do not reorder items.
 export class ArrayFieldTemplate extends React.Component {
     constructor(props) {
         super(props);
@@ -21,68 +17,28 @@ export class ArrayFieldTemplate extends React.Component {
             if (this.container === element) {
                 return;
             }
-            this.teardownDragController();
+            this.dragToReorder.teardown();
             this.container = element !== null && element !== void 0 ? element : undefined;
             this.setupDragController();
         };
-        this.handleSortStart = (event) => {
-            if (!this.canReorderItems()) {
-                return;
-            }
-            this.dragSnapshot = [...this.state.order];
-            this.draggedItemIndex = this.getReorderId(event.item);
-            if (this.container) {
-                this.container.classList.add(DEFAULT_CONTAINER_CLASS);
-            }
-            if (event.item instanceof HTMLElement) {
-                this.applyDropElevation(event.item);
-            }
-        };
-        this.handleSortEnd = (event) => {
+        this.handleReorder = ({ order, fromIndex, toIndex, }) => {
             var _a;
-            if (!this.canReorderItems()) {
-                return;
-            }
-            if (this.container) {
-                this.container.classList.remove(DEFAULT_CONTAINER_CLASS);
-            }
-            const snapshot = this.dragSnapshot;
-            const draggedItemIndex = this.draggedItemIndex;
-            this.dragSnapshot = undefined;
-            this.draggedItemIndex = undefined;
-            if (event.item instanceof HTMLElement) {
-                this.dropElevationTarget = event.item;
-            }
-            const finalOrder = this.readOrderFromDom();
-            if (!this.arraysEqual(this.state.order, finalOrder)) {
-                this.setState({ order: finalOrder });
-            }
-            if (snapshot === undefined ||
-                draggedItemIndex === undefined ||
-                !(event.item instanceof HTMLElement)) {
-                this.scheduleDropElevationRemoval();
-                return;
-            }
-            const fromPosition = snapshot.indexOf(draggedItemIndex);
-            const toPosition = finalOrder.indexOf(draggedItemIndex);
-            if (fromPosition === -1 ||
-                toPosition === -1 ||
-                fromPosition === toPosition) {
-                this.scheduleDropElevationRemoval();
-                return;
-            }
+            this.setState({ order: order.map(Number) });
             (_a = this.container) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new CustomEvent(ARRAY_REORDER_EVENT, {
                 bubbles: true,
-                detail: { fromIndex: fromPosition, toIndex: toPosition },
+                detail: { fromIndex, toIndex },
             }));
-            this.scheduleDropElevationRemoval();
         };
         this.state = {
             order: this.extractIndices(props.items),
         };
+        this.dragToReorder = new DragToReorder({
+            draggable: DRAGGABLE_ITEM_SELECTOR,
+            onReorder: this.handleReorder,
+        });
     }
     componentWillUnmount() {
-        this.teardownDragController();
+        this.dragToReorder.teardown();
     }
     componentDidMount() {
         this.setupDragController();
@@ -151,47 +107,10 @@ export class ArrayFieldTemplate extends React.Component {
     }
     setupDragController() {
         if (!this.container || !this.canReorderItems()) {
-            this.teardownDragController();
-            return;
-        }
-        const reorderableItems = this.container.querySelectorAll(`:scope > ${DRAGGABLE_ITEM_SELECTOR}`);
-        if (reorderableItems.length < 2) {
-            this.teardownDragController();
+            this.dragToReorder.teardown();
             return;
         }
-        if (this.sortable) {
-            this.sortable.option('handle', DRAG_HANDLE_SELECTOR);
-            this.sortable.option('draggable', DRAGGABLE_ITEM_SELECTOR);
-            this.sortable.option('disabled', false);
-            this.sortable.option('delay', TOUCH_DRAG_DELAY_MS);
-            this.sortable.option('delayOnTouchOnly', true);
-            return;
-        }
-        this.sortable = Sortable.create(this.container, {
-            animation: 150,
-            handle: DRAG_HANDLE_SELECTOR,
-            draggable: DRAGGABLE_ITEM_SELECTOR,
-            delay: TOUCH_DRAG_DELAY_MS,
-            delayOnTouchOnly: true,
-            onStart: this.handleSortStart,
-            onEnd: this.handleSortEnd,
-        });
-    }
-    teardownDragController() {
-        if (this.sortable) {
-            this.sortable.destroy();
-            this.sortable = undefined;
-        }
-        this.clearDropElevationTimer();
-        if (this.dropElevationTarget) {
-            this.dropElevationTarget.classList.remove(DEFAULT_DROP_ELEVATION_CLASS);
-            this.dropElevationTarget = undefined;
-        }
-        if (this.container) {
-            this.container.classList.remove(DEFAULT_CONTAINER_CLASS);
-        }
-        this.dragSnapshot = undefined;
-        this.draggedItemIndex = undefined;
+        this.dragToReorder.setup(this.container);
     }
     canReorderItems() {
         if (this.props.disabled || this.props.readonly) {
@@ -201,67 +120,6 @@ export class ArrayFieldTemplate extends React.Component {
         const limeOptions = (schema === null || schema === void 0 ? void 0 : schema.lime) || {};
         return limeOptions.allowItemReorder !== false;
     }
-    readOrderFromDom() {
-        if (!this.container) {
-            return [];
-        }
-        // Only read the order of the direct children of this array field.
-        // Nested array fields may render `.array-item` elements inside items,
-        // and those must not affect the parent order.
-        const items = [...this.container.children].filter((element) => {
-            var _a, _b;
-            return Boolean((_b = (_a = element === null || element === void 0 ? void 0 : element.classList) === null || _a === void 0 ? void 0 : _a.contains) === null || _b === void 0 ? void 0 : _b.call(_a, 'array-item'));
-        });
-        const order = [];
-        for (const element of items) {
-            const index = this.getReorderId(element);
-            if (index !== undefined) {
-                order.push(index);
-            }
-        }
-        return order;
-    }
-    getReorderId(element) {
-        var _a;
-        if (!element) {
-            return undefined;
-        }
-        const value = (_a = element === null || element === void 0 ? void 0 : element.dataset) === null || _a === void 0 ? void 0 : _a.reorderId;
-        if (value === undefined) {
-            return undefined;
-        }
-        const parsed = Number.parseInt(value, 10);
-        return Number.isNaN(parsed) ? undefined : parsed;
-    }
-    applyDropElevation(item) {
-        if (this.dropElevationTarget && this.dropElevationTarget !== item) {
-            this.dropElevationTarget.classList.remove(DEFAULT_DROP_ELEVATION_CLASS);
-        }
-        this.clearDropElevationTimer();
-        item.classList.add(DEFAULT_DROP_ELEVATION_CLASS);
-        this.dropElevationTarget = item;
-    }
-    scheduleDropElevationRemoval() {
-        if (!this.dropElevationTarget) {
-            return;
-        }
-        const target = this.dropElevationTarget;
-        this.clearDropElevationTimer();
-        this.dropElevationTimeout = setTimeout(() => {
-            target.classList.remove(DEFAULT_DROP_ELEVATION_CLASS);
-            if (this.dropElevationTarget === target) {
-                this.dropElevationTarget = undefined;
-            }
-            this.dropElevationTimeout = undefined;
-        }, DROP_ELEVATION_DURATION);
-    }
-    clearDropElevationTimer() {
-        if (this.dropElevationTimeout === undefined) {
-            return;
-        }
-        clearTimeout(this.dropElevationTimeout);
-        this.dropElevationTimeout = undefined;
-    }
     arraysEqual(a, b) {
         if (a.length !== b.length) {
             return false;
@@ -279,17 +137,21 @@ export class ArrayFieldTemplate extends React.Component {
         return (items !== null && items !== void 0 ? items : []).map((_, index) => index);
     }
     getContextValue() {
-        var _a;
+        var _a, _b, _c;
         const schema = this.props.schema;
         const formData = ((_a = this.props.formData) !== null && _a !== void 0 ? _a : []);
+        const schemaPath = ((_c = (_b = this.props.fieldPathId) === null || _b === void 0 ? void 0 : _b.path) !== null && _c !== void 0 ? _c : []).map(String);
+        const path = toSchemaPath(schemaPath);
         if (this.cachedContextValue &&
             this.cachedSchema === schema &&
-            this.cachedFormData === formData) {
+            this.cachedFormData === formData &&
+            this.cachedPath === path) {
             return this.cachedContextValue;
         }
         this.cachedSchema = schema;
         this.cachedFormData = formData;
-        this.cachedContextValue = { arraySchema: schema, formData };
+        this.cachedPath = path;
+        this.cachedContextValue = { arraySchema: schema, formData, schemaPath };
         return this.cachedContextValue;
     }
 }

package/dist/collection/components/form/templates/field.js

@@ -1,5 +1,7 @@
 import React from "react";
 import { isObjectType } from "../schema";
+import { toSchemaPath } from "./object-field";
+import { isCustomObjectSchema } from "../fields/field-helpers";
 export const FieldTemplate = (props) => {
     let classNames = props.classNames;
     const colSpan = getColSpan(props.schema);
@@ -17,8 +19,23 @@ export const FieldTemplate = (props) => {
     return React.createElement('div', {
         className: classNames,
         style: style,
+        'data-schema-path': getFieldSchemaPath(props),
     }, props.children);
 };
+// An object marks its own layout wrapper, unless a component or the code
+// editor draws it instead. It lets a host find the element of one field by its path.
+function getFieldSchemaPath(props) {
+    var _a;
+    if (isObjectType(props.schema) && hasOwnLayout(props.schema)) {
+        return undefined;
+    }
+    const path = (_a = props.fieldPathId) === null || _a === void 0 ? void 0 : _a.path;
+    return path ? toSchemaPath(path.map(String)) : undefined;
+}
+function hasOwnLayout(schema) {
+    var _a, _b;
+    return !((_b = (_a = schema.lime) === null || _a === void 0 ? void 0 : _a.component) === null || _b === void 0 ? void 0 : _b.name) && !isCustomObjectSchema(schema);
+}
 function getColSpan(schema) {
     var _a;
     const layout = (_a = schema.lime) === null || _a === void 0 ? void 0 : _a.layout;

package/dist/collection/components/tab-bar/tab-bar.css

@@ -128,12 +128,57 @@ limel-scroller {
   background-color: rgb(var(--limel-tab-background-color));
 }
 
-:host(.has-tabs-with-equal-width:not([orientation=vertical])) button {
+:host(.has-tabs-with-equal-width:not([orientation=vertical])) button[role=tab],
+:host(.has-tabs-with-equal-width:not([orientation=vertical])) limel-scroller > div {
   flex: 1 0 auto;
   max-width: var(--tab-bar-horizontal-tab-max-width, none);
 }
 
-button {
+limel-scroller > div:has(limel-drag-handle:hover), limel-scroller > div:has(limel-drag-handle:focus-within), limel-scroller > div.is-elevated, limel-scroller > div.sortable-chosen {
+  will-change: transform, box-shadow, border-radius, background-color;
+}
+limel-scroller > div.sortable-ghost {
+  border-radius: 0.5rem;
+  box-shadow: var(--shadow-depth-64), 0 0.65rem 0.75rem -0.425rem rgb(var(--color-black), 0.3);
+}
+limel-scroller > div.sortable-chosen {
+  border-radius: 0.5rem;
+  background-color: var(--lime-elevated-surface-background-color);
+}
+limel-scroller > div.is-elevated[draggable=false] {
+  animation: sit-here 0.8s forwards;
+}
+@keyframes sit-here {
+  0% {
+    border-radius: 0.5rem;
+    background-color: var(--lime-elevated-surface-background-color);
+    box-shadow: var(--shadow-depth-64), 0 0.65rem 0.75rem -0.425rem rgb(var(--color-black), 0.3);
+  }
+  100% {
+    box-shadow: none;
+  }
+}
+limel-scroller > div {
+  position: relative;
+  display: flex;
+  flex: 0 0 auto;
+}
+limel-scroller > div button[role=tab] {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+limel-scroller > div span.content {
+  padding-right: 2rem;
+}
+limel-scroller > div limel-drag-handle {
+  position: absolute;
+  z-index: 3;
+  top: 0;
+  bottom: 0;
+  right: 0.25rem;
+}
+
+button[role=tab] {
   appearance: none;
   background: none;
   border: none;
@@ -156,34 +201,34 @@ button {
   white-space: nowrap;
   font-size: var(--limel-theme-default-font-size);
 }
-button limel-icon {
+button[role=tab] limel-icon {
   transition: color 0.2s ease;
   color: rgb(var(--contrast-800));
   margin-left: -0.25rem;
   flex-shrink: 0;
 }
-button span.text {
+button[role=tab] span.text {
   transition: color 0.2s ease;
   line-height: 1.25;
   overflow: hidden;
   text-overflow: ellipsis;
   color: var(--limel-theme-on-surface-color);
 }
-button:hover span.text {
+button[role=tab]:hover span.text {
   color: var(--limel-theme-text-primary-on-background-color);
 }
-button limel-badge {
+button[role=tab] limel-badge {
   margin-right: -0.25rem;
   box-shadow: 0 0 0 1px rgb(var(--contrast-600));
   pointer-events: none;
   flex-shrink: 0;
 }
 
-button[aria-selected=true] {
+button[role=tab][aria-selected=true] {
   background-color: var(--limel-active-tab-background-color);
   z-index: 2;
 }
-button[aria-selected=true]:before, button[aria-selected=true]:after {
+button[role=tab][aria-selected=true]:before, button[role=tab][aria-selected=true]:after {
   content: "";
   display: block;
   width: var(--limel-tab-active-outer-edge-curve-size);
@@ -193,10 +238,10 @@ button[aria-selected=true]:before, button[aria-selected=true]:after {
   -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20fill-rule='evenodd'%20stroke-linejoin='round'%20stroke-miterlimit='2'%20clip-rule='evenodd'%20viewBox='0%200%2050%2050'%3E%3Cdefs/%3E%3Cpath%20d='M0%200c0%2027.594%2022.406%2050%2050%2050H0V0z'/%3E%3C/svg%3E");
   mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20fill-rule='evenodd'%20stroke-linejoin='round'%20stroke-miterlimit='2'%20clip-rule='evenodd'%20viewBox='0%200%2050%2050'%3E%3Cdefs/%3E%3Cpath%20d='M0%200c0%2027.594%2022.406%2050%2050%2050H0V0z'/%3E%3C/svg%3E");
 }
-button[aria-selected=true] limel-icon {
+button[role=tab][aria-selected=true] limel-icon {
   color: var(--limel-active-tab-color);
 }
-button[aria-selected=true] span.text {
+button[role=tab][aria-selected=true] span.text {
   color: var(--limel-active-tab-color);
 }
 
@@ -211,15 +256,15 @@ span.content {
   padding: 0 0.75rem;
   border-radius: calc(var(--limel-tab-border-radius) - var(--limel-tab-content-inset));
 }
-button:focus-visible span.content {
+button[role=tab]:focus-visible span.content {
   transition-duration: 0.3s;
   box-shadow: var(--shadow-depth-8-focused);
 }
 
-:host(limel-tab-bar:not([orientation=vertical])) button {
+:host(limel-tab-bar:not([orientation=vertical])) button[role=tab] {
   max-width: var(--tab-bar-horizontal-tab-max-width, 16rem);
 }
-:host(limel-tab-bar:not([orientation=vertical])) button:not([aria-selected=true]):after {
+:host(limel-tab-bar:not([orientation=vertical])) button[role=tab]:not([aria-selected=true]):after {
   content: "";
   display: block;
   background-color: var(--limel-tab-separator-background-color);
@@ -232,20 +277,21 @@ button:focus-visible span.content {
   border-radius: 1rem;
   right: calc(-1 * var(--limel-tab-separator-width));
 }
-:host(limel-tab-bar:not([orientation=vertical])) button:not([aria-selected=true]):last-of-type:after {
+:host(limel-tab-bar:not([orientation=vertical])) limel-scroller > :last-child:not([aria-selected=true]):after,
+:host(limel-tab-bar:not([orientation=vertical])) limel-scroller > :last-child > button[role=tab]:not([aria-selected=true]):after {
   display: none;
 }
-:host(limel-tab-bar:not([orientation=vertical])) button[aria-selected=true] {
+:host(limel-tab-bar:not([orientation=vertical])) button[role=tab][aria-selected=true] {
   border-radius: var(--limel-tab-border-radius) var(--limel-tab-border-radius) 0 0;
 }
-:host(limel-tab-bar:not([orientation=vertical])) button[aria-selected=true]:before, :host(limel-tab-bar:not([orientation=vertical])) button[aria-selected=true]:after {
+:host(limel-tab-bar:not([orientation=vertical])) button[role=tab][aria-selected=true]:before, :host(limel-tab-bar:not([orientation=vertical])) button[role=tab][aria-selected=true]:after {
   bottom: 0;
 }
-:host(limel-tab-bar:not([orientation=vertical])) button[aria-selected=true]:before {
+:host(limel-tab-bar:not([orientation=vertical])) button[role=tab][aria-selected=true]:before {
   left: calc(-1 * var(--limel-tab-active-outer-edge-curve-size));
   transform: rotateY(180deg);
 }
-:host(limel-tab-bar:not([orientation=vertical])) button[aria-selected=true]:after {
+:host(limel-tab-bar:not([orientation=vertical])) button[role=tab][aria-selected=true]:after {
   right: calc(-1 * var(--limel-tab-active-outer-edge-curve-size));
 }
 
@@ -262,17 +308,17 @@ button:focus-visible span.content {
       0 var(--limel-tab-active-outer-edge-curve-size) 0.25rem;
   height: 100%;
 }
-:host(limel-tab-bar[orientation=vertical]) button[aria-selected=true] {
+:host(limel-tab-bar[orientation=vertical]) button[role=tab][aria-selected=true] {
   border-radius: var(--limel-tab-border-radius) 0 0 var(--limel-tab-border-radius);
 }
-:host(limel-tab-bar[orientation=vertical]) button[aria-selected=true]:before, :host(limel-tab-bar[orientation=vertical]) button[aria-selected=true]:after {
+:host(limel-tab-bar[orientation=vertical]) button[role=tab][aria-selected=true]:before, :host(limel-tab-bar[orientation=vertical]) button[role=tab][aria-selected=true]:after {
   right: 0;
 }
-:host(limel-tab-bar[orientation=vertical]) button[aria-selected=true]:before {
+:host(limel-tab-bar[orientation=vertical]) button[role=tab][aria-selected=true]:before {
   bottom: 100%;
   transform: rotateY(180deg);
 }
-:host(limel-tab-bar[orientation=vertical]) button[aria-selected=true]:after {
+:host(limel-tab-bar[orientation=vertical]) button[role=tab][aria-selected=true]:after {
   top: 100%;
   transform: rotate(180deg);
 }