@astryxdesign/core 0.6.2-canary.bfee8a4 → 0.6.2-canary.d4cc232

package/src/SegmentedControl/SegmentedControlItem.tsx

@@ -33,6 +33,7 @@ import {mergeProps, composeEventHandlers} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
 import {focusOutlineProps} from '../utils/focusOutline.stylex';
+import {interactionOverlayStyles} from '../utils/interactionOverlay.stylex';
 
 export interface SegmentedControlItemProps extends BaseProps<HTMLButtonElement> {
   ref?: React.Ref<HTMLButtonElement>;
@@ -91,14 +92,6 @@ const styles = stylex.create({
     transitionDuration: durationVars['--duration-fast'],
     transitionTimingFunction: easeVars['--ease-standard'],
   },
-  hover: {
-    backgroundColor: {
-      default: null,
-      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
-        '@media (hover: hover)': colorVars['--color-overlay-hover'],
-      },
-    },
-  },
   selected: {
     // Forced colors (Windows High Contrast) strips the painted surface fill
     // and box shadow, which would leave the selected segment with no state
@@ -248,7 +241,11 @@ export function SegmentedControlItem({
           sizeStyles[size],
           isFill && styles.fill,
           isSelected && styles.selected,
-          !isSelected && !isItemDisabled && styles.hover,
+          // The shared hover and pressed overlay, on the segments a press can
+          // change: the selected segment keeps its raised surface as it is.
+          !isSelected &&
+            !isItemDisabled &&
+            interactionOverlayStyles.backgroundColor,
           isItemDisabled && styles.disabled,
           xstyle,
         ),

package/src/SideNav/SideNav.doc.mjs

@@ -25,7 +25,7 @@ export const docs = {
       {className: 'astryx-side-nav-section'},
     ],
   },
-  description: 'Container with five zones: header, topContent, children (scrollable), footer, and footerIcons. Supports collapsible mode.',
+  description: 'Container with five zones: header, topContent, children (scrollable), footer, and footerIcons. Supports collapsible and resizable modes.',
   props: [
     {
       name: 'header',

package/src/SideNav/SideNav.test.tsx

@@ -989,6 +989,16 @@ describe('SideNav resizable', () => {
     ).toBeInTheDocument();
   });
 
+  it('clips the overlay drag handle within the resizable nav bounds', () => {
+    render(<SideNav resizable>Content</SideNav>);
+    const nav = screen.getByRole('navigation');
+    const container = nav.parentElement;
+    const handle = screen.getByTestId('astryx-sidenav-resize-handle');
+
+    expect(container).toContainElement(handle);
+    expect(getComputedStyle(container!).overflow).toBe('clip');
+  });
+
   it('does not render drag handle without resizable', () => {
     render(<SideNav>Content</SideNav>);
     expect(

package/src/SideNav/SideNav.tsx

@@ -11,7 +11,8 @@
  * Sidebar navigation container with five zones: header + topContent (sticky together),
  * children (scrollable), footer, and footerIcons (sticky bottom).
  *
- * Supports optional resize via drag handle at the inline-end edge.
+ * Supports optional resize via a drag handle at the inline-end edge. The
+ * resizable wrapper clips handle overflow while keeping its focus ring inside.
  *
  * SYNC: When modified, update these files to stay in sync:
  * - /packages/core/src/SideNav/SideNav.doc.mjs
@@ -25,7 +26,7 @@ import {useCallback, useImperativeHandle, useRef, type ReactNode} from 'react';
 import type {BaseProps} from '../BaseProps';
 import * as stylex from '@stylexjs/stylex';
 import type {StyleXStyles} from '@stylexjs/stylex';
-import {spacingVars} from '../theme/tokens.stylex';
+import {focusVars, spacingVars} from '../theme/tokens.stylex';
 import {mergeProps} from '../utils';
 import {
   SideNavCollapseContext,
@@ -241,6 +242,16 @@ const styles = stylex.create({
     display: 'flex',
     flexShrink: 0,
     height: '100%',
+    overflow: 'clip',
+  },
+  resizableHandle: {
+    // Keep the shared ring inside the clipping boundary. The wrapper cannot
+    // use overflow-clip-margin: that paint allowance also contributes the
+    // overlay's half-pixel spill to AppShell's scrollable overflow.
+    outlineOffset: {
+      default: '0',
+      ':focus-visible': `calc(0px - ${focusVars['--focus-outline-width']})`,
+    },
   },
   // Topbar mode — horizontal layout for mobile top bar
   topbar: {
@@ -658,6 +669,7 @@ export function SideNav({
         position="overlay"
         pillPlacement="end"
         isAlwaysVisible={false}
+        xstyle={styles.resizableHandle}
         resizable={resizableHook.props}
         label={t('@astryx.sideNav.resizeSidebar')}
       />

package/src/Slider/Slider.doc.mjs

@@ -255,6 +255,17 @@ export const docs = {
     ],
   },
   usage: {
+    accessibility: [
+      {
+        name: 'Thumb',
+        category: 'Color contrast',
+        criterion: '1.4.11 Non-text Contrast',
+        requirement: '3:1',
+        states: ['Rest', 'Hover', 'Pointer down'],
+        description:
+          'The thumb must have at least 3:1 contrast with the track and the surface behind it. Pointer down is the whole drag: measure the thumb with the pressed overlay applied.',
+      },
+    ],
     anatomy,
     description:
       'A draggable control for selecting a numeric value or range within defined bounds. Supports single value and range selection, tick marks, custom value formatting, and vertical orientation. Use it when users need to explore a continuous range, such as volume, price, or percentage.',

package/src/Slider/Slider.test.tsx

@@ -13,6 +13,7 @@ import {useState} from 'react';
 import {describe, it, expect, vi, beforeEach} from 'vitest';
 import {render, screen, act, fireEvent, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import {declaresPressedOverlay} from '../__tests__/pressState';
 import * as stylex from '@stylexjs/stylex';
 import {Slider} from './Slider';
 import {focusOutlineStyles} from '../utils/focusOutline.stylex';
@@ -1101,3 +1102,130 @@ describe('Slider', () => {
     });
   });
 });
+
+describe('pressed state', () => {
+  it('paints the pressed overlay on the thumb for as long as it is dragged, from wherever the press lands', () => {
+    render(
+      <Slider label="Volume" value={50} min={0} max={100} onChange={vi.fn()} />,
+    );
+    const thumb = screen.getByRole('slider');
+    const trackContainer = thumb.parentElement!;
+    trackContainer.getBoundingClientRect = () => ({
+      left: 0,
+      top: 0,
+      right: 200,
+      bottom: 20,
+      width: 200,
+      height: 20,
+      x: 0,
+      y: 0,
+      toJSON: () => {},
+    });
+
+    expect(declaresPressedOverlay(thumb)).toBe(false);
+    // A slider is a drag: the press lands on the track, not the thumb, and
+    // the thumb follows it. The pressed paint follows the drag.
+    fireEvent.pointerDown(trackContainer, {
+      clientX: 20,
+      clientY: 10,
+      pointerId: 1,
+    });
+    expect(declaresPressedOverlay(thumb)).toBe(true);
+    fireEvent.pointerMove(trackContainer, {
+      clientX: 120,
+      clientY: 10,
+      pointerId: 1,
+    });
+    expect(declaresPressedOverlay(thumb)).toBe(true);
+    fireEvent.pointerUp(trackContainer, {
+      clientX: 120,
+      clientY: 10,
+      pointerId: 1,
+    });
+    expect(declaresPressedOverlay(thumb)).toBe(false);
+  });
+
+  it('paints only the thumb being dragged in a range slider', () => {
+    render(
+      <Slider
+        label="Price"
+        value={[20, 80] as [number, number]}
+        min={0}
+        max={100}
+        onChange={vi.fn()}
+      />,
+    );
+    const [start, end] = screen.getAllByRole('slider');
+    // In range mode the control is the group; each thumb sits in its own
+    // value-tooltip wrapper.
+    const trackContainer = screen.getByRole('group');
+    trackContainer.getBoundingClientRect = () => ({
+      left: 0,
+      top: 0,
+      right: 200,
+      bottom: 20,
+      width: 200,
+      height: 20,
+      x: 0,
+      y: 0,
+      toJSON: () => {},
+    });
+    fireEvent.pointerDown(trackContainer, {
+      clientX: 170,
+      clientY: 10,
+      pointerId: 1,
+    });
+    expect(declaresPressedOverlay(end)).toBe(true);
+    expect(declaresPressedOverlay(start)).toBe(false);
+    fireEvent.pointerUp(trackContainer, {
+      clientX: 170,
+      clientY: 10,
+      pointerId: 1,
+    });
+    expect(declaresPressedOverlay(end)).toBe(false);
+  });
+
+  it('keeps a direct press on the visible upper thumb when range values coincide', () => {
+    render(
+      <Slider
+        label="Price"
+        value={[50, 50] as [number, number]}
+        min={0}
+        max={100}
+        onChange={vi.fn()}
+      />,
+    );
+    const [start, end] = screen.getAllByRole('slider');
+    const trackContainer = screen.getByRole('group');
+    trackContainer.getBoundingClientRect = () => ({
+      left: 0,
+      top: 0,
+      right: 200,
+      bottom: 20,
+      width: 200,
+      height: 20,
+      x: 0,
+      y: 0,
+      toJSON: () => {},
+    });
+
+    fireEvent.pointerDown(end, {
+      clientX: 100,
+      clientY: 10,
+      pointerId: 1,
+    });
+    expect(declaresPressedOverlay(end)).toBe(true);
+    expect(declaresPressedOverlay(start)).toBe(false);
+  });
+
+  it('does not press a disabled slider', () => {
+    render(<Slider label="Volume" value={50} isDisabled onChange={vi.fn()} />);
+    const thumb = screen.getByRole('slider');
+    fireEvent.pointerDown(thumb.parentElement!, {
+      clientX: 20,
+      clientY: 10,
+      pointerId: 1,
+    });
+    expect(declaresPressedOverlay(thumb)).toBe(false);
+  });
+});

package/src/Slider/Slider.tsx

@@ -288,6 +288,15 @@ const styles = stylex.create({
       },
     },
   },
+  // Pressed: the system's pressed overlay over the thumb's fill for as long
+  // as the thumb is being dragged. A slider is a drag, not a tap — the finger
+  // lands anywhere on the track and the thumb follows it — so the pressed
+  // paint follows the drag state the pointer handlers already keep, on a
+  // mouse and on a finger alike, rather than `:active` on the thumb itself
+  // (which a press on the track never activates).
+  thumbPressed: {
+    backgroundImage: `linear-gradient(${colorVars['--color-overlay-pressed']}, ${colorVars['--color-overlay-pressed']})`,
+  },
   thumbDisabled: {
     backgroundColor: colorVars['--color-background-muted'],
     cursor: 'default',
@@ -701,17 +710,25 @@ export function Slider({ref, ...props}: SliderProps) {
       const newVal = markEl
         ? Number(markEl.dataset.markValue)
         : getValueFromPosition(e.clientX, e.clientY);
-      const thumbIndex = getClosestThumb(newVal);
+      const track = trackRef.current;
+      const thumbs = track?.querySelectorAll<HTMLElement>('[role="slider"]');
+      const pressedThumb = (e.target as Element).closest<HTMLElement>(
+        '[role="slider"]',
+      );
+      const pressedThumbIndex =
+        pressedThumb == null || thumbs == null
+          ? -1
+          : Array.from(thumbs).indexOf(pressedThumb);
+      // A direct thumb press owns that thumb even when range values coincide.
+      // Track and mark presses still choose the nearest value.
+      const thumbIndex =
+        pressedThumbIndex >= 0 ? pressedThumbIndex : getClosestThumb(newVal);
       draggingThumbRef.current = thumbIndex;
       setDraggingThumb(thumbIndex);
       updateValue(thumbIndex, newVal);
 
-      // Focus the closest thumb
-      const track = trackRef.current;
-      if (track) {
-        const thumbs = track.querySelectorAll<HTMLElement>('[role="slider"]');
-        thumbs[thumbIndex]?.focus();
-      }
+      // Focus the thumb that owns this drag.
+      thumbs?.[thumbIndex]?.focus();
       // Also clear it explicitly: focusing an already-focused thumb fires no
       // focus event, so a thumb the user had tabbed to would keep its ring
       // through the drag.
@@ -908,6 +925,7 @@ export function Slider({ref, ...props}: SliderProps) {
               ? styles.thumbHorizontal
               : rtlStyles.centerInline('50%'),
             !isDisabled && styles.thumbHover,
+            !isDisabled && draggingThumb === thumbIndex && styles.thumbPressed,
             !isDisabled &&
               keyboardFocusThumb === thumbIndex &&
               focusOutlineStyles.focusVisible,

package/src/Switch/Switch.doc.mjs

@@ -210,6 +210,17 @@ export const docs = {
     ],
   },
   usage: {
+    accessibility: [
+      {
+        name: 'Track and thumb',
+        category: 'Color contrast',
+        criterion: '1.4.11 Non-text Contrast',
+        requirement: '3:1',
+        states: ['Rest', 'Hover', 'Pointer down'],
+        description:
+          'The on and off tracks must each have at least 3:1 contrast with the surface behind them, and the thumb with its track. For Hover and Pointer down, measure the final colors after the tint and the pressed overlay are applied.',
+      },
+    ],
     anatomy,
     description:
       'A toggle control for on/off states that take effect immediately. Supports labels, descriptions, loading states, and validation. Use it for settings or preferences that apply instantly. For changes requiring a form submission, use a checkbox instead.',

package/src/Switch/Switch.test.tsx

@@ -30,6 +30,7 @@ import {
   getAllInjectedCss,
   getForcedColorsRules,
 } from '../__tests__/forcedColors';
+import {hasPressedArm} from '../__tests__/pressState';
 import {__resetLiveRegionsForTest} from '../hooks/useAnnounce';
 
 afterEach(() => {
@@ -755,6 +756,21 @@ describe('Switch', () => {
     });
   });
 
+  describe('pressed state', () => {
+    it('paints the pressed overlay on the track and the thumb while the row is pressed', () => {
+      const {container} = render(
+        <Switch label="Notifications" value={false} onChange={() => {}} />,
+      );
+      const track = container.querySelector('.astryx-switch');
+      const thumb = container.querySelector('.astryx-switch-thumb');
+      if (track == null || thumb == null) {
+        throw new Error('the switch has no track or thumb to press');
+      }
+      expect(hasPressedArm(track)).toBe(true);
+      expect(hasPressedArm(thumb)).toBe(true);
+    });
+  });
+
   describe('coarse pointer and RTL hit-target positioning', () => {
     it.each([
       ['sm', 'ltr'],

package/src/Switch/Switch.tsx

@@ -122,6 +122,15 @@ const thumbOnSizeStyles = stylex.create({
   },
 });
 
+// The pressed overlay, painted as a gradient layer OVER the track's and
+// thumb's own fills so it composes with the on/off colors and the hover tint
+// instead of replacing them. Same token Button's overlay paints with. The
+// switch is a two-part control whose focusable input sits beside the track,
+// so the press is read off the shared scope marker (the row), the way the
+// hover tint already is: pressing the input, the track or the label all
+// activate the row.
+const pressedImage = `linear-gradient(${colorVars['--color-overlay-pressed']}, ${colorVars['--color-overlay-pressed']})`;
+
 const labelWrapperSizeStyles = stylex.create({
   sm: {
     minHeight: 20,
@@ -207,6 +216,15 @@ const styles = stylex.create({
       default: null,
       '@media (forced-colors: active)': 'CanvasText',
     },
+    // Pressed: the overlay rides on top of the on/off fill. Gated like the
+    // hover tint so forced colors keeps its system-color track.
+    backgroundImage: {
+      default: null,
+      [stylex.when.ancestor(':active', switchScope)]: {
+        default: null,
+        '@media (forced-colors: none)': pressedImage,
+      },
+    },
   },
   // The one ring in the system not drawn by focusOutlineStyles. The focusable
   // input is a sibling of the track, so the condition has to reach the shared
@@ -278,6 +296,16 @@ const styles = stylex.create({
       '@media (prefers-reduced-motion: reduce)': '0s',
     },
     transitionTimingFunction: easeVars['--ease-standard'],
+    // Pressed: the same overlay as the track, so the whole control darkens
+    // under the finger rather than the thumb standing out against a darker
+    // track.
+    backgroundImage: {
+      default: null,
+      [stylex.when.ancestor(':active', switchScope)]: {
+        default: null,
+        '@media (forced-colors: none)': pressedImage,
+      },
+    },
   },
   // The thumb fill lives on the on/off styles (not the shared thumb style)
   // because forced colors needs a per-state system color: CanvasText on the

package/src/TabList/Tab.tsx

@@ -137,6 +137,15 @@ const styles = stylex.create({
       [stylex.when.ancestor(':hover', tabScope)]: {
         '@media (hover: hover)': colorVars['--color-overlay-hover'],
       },
+      // Pressed: the same layer steps up to the pressed overlay, read off the
+      // tab the way the hover is, so a press paints on a finger too. Repeated
+      // inside the hover-capable branch so it outranks the hover rule there
+      // (a media-nested rule carries extra generated priority; see
+      // interactionOverlay.stylex.ts).
+      [stylex.when.ancestor(':active', tabScope)]: {
+        default: colorVars['--color-overlay-pressed'],
+        '@media (hover: hover)': colorVars['--color-overlay-pressed'],
+      },
     },
     transitionProperty: 'background-color',
     transitionDuration: durationVars['--duration-fast'],
@@ -249,6 +258,7 @@ export function Tab({
   xstyle,
   className,
   style,
+  onClick,
   ...restProps
 }: TabProps) {
   const tabListCtx = useTabListContext();
@@ -263,9 +273,23 @@ export function Tab({
   const displayIcon = isSelected && selectedIcon ? selectedIcon : icon;
   const hasVisibleLabel = !isLabelHidden && label !== '';
 
-  const handleSelect = useCallback(() => {
-    tabListCtx.onChange(value);
-  }, [tabListCtx, value]);
+  const isDisabled =
+    restProps['aria-disabled'] === true ||
+    restProps['aria-disabled'] === 'true';
+
+  const handleSelect = useCallback(
+    (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {
+      if (isDisabled) {
+        event.preventDefault();
+        return;
+      }
+      onClick?.(event as React.MouseEvent<HTMLButtonElement>);
+      if (!event.defaultPrevented) {
+        tabListCtx.onChange(value);
+      }
+    },
+    [isDisabled, onClick, tabListCtx, value],
+  );
 
   useDevWarning(
     'Tab',
@@ -339,7 +363,7 @@ export function Tab({
         sizeStyles[size],
         isSelected && styles.selected,
         isFill && layoutStyles.fill,
-        tabScope,
+        !isDisabled && tabScope,
         xstyle,
       ),
       className,
@@ -382,10 +406,14 @@ export function Tab({
   ) : null;
 
   if (isLink) {
+    // A disabled link tab must not reach a router component: some routers reject
+    // a missing destination, while others treat it as the current route. A
+    // plain anchor without href preserves the element shape but cannot navigate.
+    const LinkRoot = isDisabled ? 'a' : LinkComponent;
     return (
-      <LinkComponent
+      <LinkRoot
         ref={ref}
-        href={href}
+        href={isDisabled ? undefined : href}
         onClick={handleSelect}
         {...sharedProps}>
         {hoverBgElement}
@@ -393,7 +421,7 @@ export function Tab({
         {labelElement}
         {endContentElement}
         {indicatorElement}
-      </LinkComponent>
+      </LinkRoot>
     );
   }
 

package/src/TabList/TabList.doc.mjs

@@ -103,6 +103,17 @@ export const docs = {
     {name: 'TabMenu'},
   ],
   usage: {
+    accessibility: [
+      {
+        name: 'Tab label',
+        category: 'Color contrast',
+        criterion: '1.4.3 Contrast (Minimum)',
+        requirement: '4.5:1',
+        states: ['Rest', 'Hover', 'Pointer down', 'Selected'],
+        description:
+          'Each label must have at least 4.5:1 contrast with the tab surface behind it. For Hover and Pointer down, measure the final background after the overlay layer is applied.',
+      },
+    ],
     description:
       'TabList provides tab-style navigation for organizing content into categorized sections. Use it to let users switch between related views without leaving the page, with overflow items handled by a built-in "more" menu.',
     bestPractices: [

package/src/TabList/TabList.test.tsx

@@ -12,6 +12,7 @@
 import {describe, it, expect, vi, beforeAll, afterAll} from 'vitest';
 import {render, screen, fireEvent} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import {hasPressedArm} from '../__tests__/pressState';
 import {TabList} from './TabList';
 import type {TabListProps} from './TabList';
 import {Tab} from './Tab';
@@ -1515,3 +1516,68 @@ describe('TabList ARIA pattern — any other role', () => {
     );
   });
 });
+
+describe('pressed state', () => {
+  it('paints the pressed overlay on the tab surface while the tab is pressed', () => {
+    render(
+      <TabList value="home" onChange={() => {}}>
+        <Tab value="home" label="Home" />
+        <Tab value="settings" label="Settings" />
+      </TabList>,
+    );
+    const tab = screen.getByRole('button', {name: 'Settings'});
+    // The hover surface is a child layer read off the tab; the press paints
+    // the same layer, so the assertion is on that layer.
+    const surface = tab.querySelector('span[aria-hidden="true"]');
+    if (surface == null) {
+      throw new Error('the tab has no hover surface to press');
+    }
+    expect(hasPressedArm(surface)).toBe(true);
+  });
+
+  it('does not activate a disabled button tab or call its handler', async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    const onClick = vi.fn();
+    render(
+      <TabList value="home" onChange={onChange}>
+        <Tab value="home" label="Home" />
+        <Tab
+          value="settings"
+          label="Settings"
+          aria-disabled="true"
+          onClick={onClick}
+        />
+      </TabList>,
+    );
+    const tab = screen.getByRole('button', {name: 'Settings'});
+    await user.click(tab);
+    expect(onClick).not.toHaveBeenCalled();
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('removes navigation from a disabled link tab', () => {
+    const onChange = vi.fn();
+    const {container} = render(
+      <LinkProvider component={CustomLink}>
+        <TabList value="home" onChange={onChange}>
+          <Tab value="home" label="Home" />
+          <Tab
+            value="settings"
+            label="Settings"
+            href="/settings"
+            aria-disabled="true"
+          />
+        </TabList>
+      </LinkProvider>,
+    );
+    const tab = container.querySelector('a');
+    if (tab == null) {
+      throw new Error('the disabled link tab did not render an anchor');
+    }
+    expect(tab).not.toHaveAttribute('data-custom-link');
+    expect(tab).not.toHaveAttribute('href');
+    fireEvent.click(tab);
+    expect(onChange).not.toHaveBeenCalled();
+  });
+});

package/src/TabList/__tests__/Tabs.a11y.known-failures.ts

@@ -9,37 +9,4 @@
 
 import type {KnownFailure} from '@astryxdesign/a11y-spec';
 
-const COMMON = {
-  binding: 'Tab',
-  state: 'tab-disabled-unselected',
-  evidenceLayer: 'real-browser',
-  standardsReference:
-    'WCAG 2.2 4.1.2 Name, Role, Value; WAI-ARIA 1.2 aria-disabled',
-  reason:
-    'This migration records the existing behavior without changing the component interaction contract.',
-} as const;
-
-export const TABS_KNOWN_FAILURES: ReadonlyArray<KnownFailure> = [
-  {
-    ...COMMON,
-    expectation: 'tabs.tab.unavailable-pointer-inert',
-    failureEquals:
-      'the tab is reported unavailable, but clicking it selected it',
-    userImpact:
-      'A pointer user can activate a tab that assistive technology reports as unavailable.',
-  },
-  {
-    ...COMMON,
-    expectation: 'tabs.tab.unavailable-enter-inert',
-    failureEquals: 'the tab is reported unavailable, but Enter selected it',
-    userImpact:
-      'A keyboard user can activate a focusable tab with Enter after assistive technology reports it unavailable.',
-  },
-  {
-    ...COMMON,
-    expectation: 'tabs.tab.unavailable-space-inert',
-    failureEquals: 'the tab is reported unavailable, but Space selected it',
-    userImpact:
-      'A keyboard user can activate a focusable tab with Space after assistive technology reports it unavailable.',
-  },
-];
+export const TABS_KNOWN_FAILURES: ReadonlyArray<KnownFailure> = [];