@astryxdesign/core 0.5.0 → 0.5.1-canary.f64186a

package/src/Avatar/Avatar.tsx

@@ -97,6 +97,11 @@ type AvatarNumericSize =
  */
 export type AvatarSize = AvatarNamedSize | AvatarNumericSize;
 
+/**
+ * Avatar shape options
+ */
+export type AvatarShape = 'circle' | 'rounded' | 'square';
+
 /**
  * Resolves named sizes to their numeric pixel values
  */
@@ -118,6 +123,25 @@ export function resolveSize(size: AvatarSize): number {
   }
 }
 
+// Sets one local custom property rather than `borderRadius` directly, so
+// every clipping/ring surface that needs the shape's radius (the wrapper,
+// the interactive focus ring, the content div that actually clips via
+// `overflow: hidden`, and AvatarGroupOverflow's "+N" indicator) reads the
+// same value instead of each hardcoding its own borderRadius independently.
+// A theme override only has to reach this one property, not fight the
+// per-surface StyleX class order to change the shape everywhere at once.
+export const shapeStyles = stylex.create({
+  circle: {
+    '--_avatar-radius': radiusVars['--radius-full'],
+  },
+  rounded: {
+    '--_avatar-radius': radiusVars['--radius-element'],
+  },
+  square: {
+    '--_avatar-radius': radiusVars['--radius-none'],
+  },
+});
+
 /**
  * Base styles for the avatar
  * Uses a wrapper/content structure so status isn't clipped by overflow:hidden
@@ -127,10 +151,10 @@ const styles = stylex.create({
     position: 'relative',
     display: 'inline-flex',
     flexShrink: 0,
-    // The wrapper carries the avatar's box as well as its radius, so a theme
-    // rule on the `.astryx-avatar` target reaches both: the size the `size`
-    // visual prop selects on is set here, and the content below fills it.
-    borderRadius: radiusVars['--radius-full'],
+    // Reads the shape variant's `--_avatar-radius` (set by `shapeStyles`
+    // below) rather than a hardcoded value, so `shape` actually changes the
+    // wrapper's own radius instead of only the content div's clip.
+    borderRadius: 'var(--_avatar-radius)',
   },
   content: {
     display: 'flex',
@@ -138,9 +162,14 @@ const styles = stylex.create({
     justifyContent: 'center',
     width: '100%',
     height: '100%',
-    borderRadius: radiusVars['--radius-full'],
     overflow: 'hidden',
     userSelect: 'none',
+    // The content div is the one that actually clips (via overflow: hidden
+    // above), so it needs its own border-radius matching the wrapper's.
+    // It inherits `--_avatar-radius` from the wrapper, since custom
+    // properties cascade to descendants even though border-radius itself
+    // does not.
+    borderRadius: 'var(--_avatar-radius)',
   },
   image: {
     width: '100%',
@@ -167,9 +196,6 @@ const styles = stylex.create({
   status: {
     position: 'absolute',
   },
-  // Visible focus ring for the name-tooltip tab stop, matching the repo-wide
-  // focus-visible outline treatment (see Timestamp, Token, Thumbnail). Only
-  // applied when a tooltip is active so keyboard users can reveal it.
   // Reset the intrinsic styling of the interactive element (<a>/<button>) so it
   // is a transparent, correctly-sized wrapper around the avatar visuals. The
   // element carries the focus-visible accent ring for keyboard users.
@@ -187,8 +213,9 @@ const styles = stylex.create({
       default: 'pointer',
       ':is(:disabled,[aria-disabled="true"])': 'default',
     },
-    // Match the avatar's circular shape so the focus ring hugs it.
-    borderRadius: radiusVars['--radius-full'],
+    // Match the avatar's shape (via `--_avatar-radius`) so the focus ring
+    // hugs it, whichever shape variant is in effect.
+    borderRadius: 'var(--_avatar-radius)',
   },
 });
 
@@ -207,7 +234,7 @@ const dynamicStyles = stylex.create({
   fontSize: (size: number) => ({
     fontSize: `${size * INITIALS_FONT_SIZE_RATIO}px`,
   }),
-  statusPosition: (size: number) => ({
+  statusPositionCircle: (size: number) => ({
     bottom: size * CIRCLE_EDGE_OFFSET_RATIO,
     insetInlineEnd: size * CIRCLE_EDGE_OFFSET_RATIO,
     // `insetInlineEnd` anchors to the right edge in LTR / left in RTL, so the
@@ -217,13 +244,23 @@ const dynamicStyles = stylex.create({
       ':is([dir="rtl"] *)': 'translate(-50%, 50%)',
     },
   }),
+  statusPositionCorner: {
+    bottom: 0,
+    insetInlineEnd: 0,
+    // Same RTL mirroring as statusPositionCircle above: insetInlineEnd
+    // anchors to the right edge in LTR / left in RTL, so the outward push
+    // must flip sign too.
+    transform: {
+      default: 'translate(25%, 25%)',
+      ':is([dir="rtl"] *)': 'translate(-25%, 25%)',
+    },
+  },
 });
 
 const BORDER_WIDTH = 2;
 
 const groupStyles = stylex.create({
   ring: {
-    borderRadius: radiusVars['--radius-full'],
     borderWidth: BORDER_WIDTH,
     borderStyle: 'solid',
     borderColor: colorVars['--color-background-surface'],
@@ -276,6 +313,14 @@ export interface AvatarProps extends BaseProps<HTMLDivElement> {
    * @default 'md'
    */
   size?: AvatarSize;
+  /**
+   * Shape variant of the avatar.
+   * - 'circle': Full circle (default)
+   * - 'rounded': Rounded square
+   * - 'square': Sharp square
+   * @default 'circle'
+   */
+  shape?: AvatarShape;
   /**
    * The primary image source for the avatar.
    */
@@ -479,6 +524,7 @@ export function Avatar({
   fallbackSrc,
   name,
   size = 'md',
+  shape = 'circle',
   src,
   status,
   tooltip = true,
@@ -538,6 +584,7 @@ export function Avatar({
     : undefined;
   const avatarGroup = useAvatarGroup();
   const resolvedSize = avatarGroup?.size ?? size;
+  const resolvedShape = avatarGroup?.shape ?? shape;
   const numericSize = useMemo(() => resolveSize(resolvedSize), [resolvedSize]);
 
   // Resolve the tooltip content:
@@ -723,7 +770,9 @@ export function Avatar({
         <div
           {...stylex.props(
             styles.status,
-            dynamicStyles.statusPosition(numericSize),
+            resolvedShape === 'circle'
+              ? dynamicStyles.statusPositionCircle(numericSize)
+              : dynamicStyles.statusPositionCorner,
           )}>
           {status}
         </div>
@@ -736,7 +785,7 @@ export function Avatar({
   // tooltip tab-stop focus ring all live here so the interactive
   // `<a>`/`<button>` and the static `<div>` carry the exact same box.
   const rootStylexProps = mergeProps(
-    themeProps('avatar', {size: resolvedSize}),
+    themeProps('avatar', {size: resolvedSize, shape: resolvedShape}),
     focusOutlineProps.focusVisible(
       styles.wrapper,
       dynamicStyles.size(numericSize),
@@ -744,6 +793,7 @@ export function Avatar({
       avatarGroup && groupStyles.ring,
       avatarGroup && groupStyles.overlap,
       avatarGroup && groupDynamicStyles.overlap(-avatarGroup.overlap),
+      shapeStyles[resolvedShape],
       xstyle,
     ),
     className,

package/src/Avatar/index.ts

@@ -5,7 +5,7 @@
 /**
  * @file index.ts
  * @input Imports Avatar component and types from Avatar.tsx, AvatarStatusDot from AvatarStatusDot.tsx
- * @output Exports Avatar, AvatarProps, AvatarSize, AvatarStatusDot, AvatarStatusDotProps, AvatarStatusDotVariant
+ * @output Exports Avatar, AvatarProps, AvatarSize, AvatarShape, resolveSize, AvatarStatusDot, AvatarStatusDotProps, AvatarStatusDotVariant
  * @position Component entry point; re-exported by /packages/core/src/index.ts
  *
  * SYNC: When modified, update this header and /packages/core/src/Avatar/Avatar.doc.mjs
@@ -38,7 +38,7 @@ export interface AvatarStatusDotVariantMap {
 }
 
 export {Avatar, resolveSize} from './Avatar';
-export type {AvatarProps, AvatarSize} from './Avatar';
+export type {AvatarProps, AvatarSize, AvatarShape} from './Avatar';
 export {AvatarStatusDot} from './AvatarStatusDot';
 export type {
   AvatarStatusDotProps,

package/src/AvatarGroup/AvatarGroup.doc.mjs

@@ -25,8 +25,8 @@ export const docs = {
   },
   theming: {
     targets: [
-      {className: 'astryx-avatar-group', visualProps: ['size']},
-      {className: 'astryx-avatar-group-overflow', visualProps: ['size']},
+      {className: 'astryx-avatar-group', visualProps: ['size', 'shape']},
+      {className: 'astryx-avatar-group-overflow', visualProps: ['size', 'shape']},
     ],
   },
   description: 'Stacked avatar display with overlapping layout and optional overflow indicator. Children are Avatar elements.',
@@ -52,6 +52,12 @@ export const docs = {
         "Size applied to all avatars via context. This wins over each child Avatar's own size prop, including when it is left at the default, so set the size here rather than on the children.",
       default: "'md'",
     },
+    {
+      name: 'shape',
+      type: "'circle' | 'rounded' | 'square'",
+      description: "Shape applied to all avatars via context, overriding each avatar's own shape prop. Also applied to AvatarGroupOverflow's \"+N\" indicator.",
+      default: "'circle'",
+    },
     {
       name: 'ref',
       type: 'React.Ref<HTMLDivElement>',

package/src/AvatarGroup/AvatarGroup.test.tsx

@@ -118,6 +118,30 @@ describe('AvatarGroupOverflow', () => {
     expect(overflow).toHaveAttribute('data-size', 'lg');
   });
 
+  it('applies the group shape to the overflow chip, matching its avatars', () => {
+    render(
+      <AvatarGroup shape="square">
+        <Avatar name="Alice" />
+        <AvatarGroupOverflow count={5} />
+      </AvatarGroup>,
+    );
+
+    const overflow = screen.getByLabelText('5 more');
+    expect(overflow).toHaveAttribute('data-shape', 'square');
+  });
+
+  it('defaults the overflow chip to circle shape with no explicit AvatarGroup shape', () => {
+    render(
+      <AvatarGroup>
+        <Avatar name="Alice" />
+        <AvatarGroupOverflow count={5} />
+      </AvatarGroup>,
+    );
+
+    const overflow = screen.getByLabelText('5 more');
+    expect(overflow).toHaveAttribute('data-shape', 'circle');
+  });
+
   it('renders as button when onClick is provided', () => {
     render(
       <AvatarGroup>

package/src/AvatarGroup/AvatarGroup.tsx

@@ -26,7 +26,7 @@
 
 import {useId, useMemo, useState, type ReactNode} from 'react';
 import type {BaseProps} from '../BaseProps';
-import {resolveSize, type AvatarSize} from '../Avatar';
+import {resolveSize, type AvatarShape, type AvatarSize} from '../Avatar';
 import * as stylex from '@stylexjs/stylex';
 import {mergeProps} from '../utils';
 import {composeEventHandlers} from '../utils/composeEventHandlers';
@@ -55,6 +55,13 @@ export interface AvatarGroupProps extends BaseProps<HTMLDivElement> {
    * @default 'md'
    */
   size?: AvatarSize;
+  /**
+   * Shape applied to all avatars via context, overriding each avatar's own
+   * `shape` prop so a group stays visually uniform. Also applied to the
+   * `AvatarGroupOverflow` "+N" indicator, so it matches the group.
+   * @default 'circle'
+   */
+  shape?: AvatarShape;
   /**
    * Test ID for integration testing.
    */
@@ -89,6 +96,7 @@ const styles = stylex.create({
 export function AvatarGroup({
   children,
   size = 'md',
+  shape = 'circle',
   'data-testid': testId,
   'aria-label': ariaLabelFromProps,
   'aria-describedby': ariaDescribedByFromProps,
@@ -106,8 +114,8 @@ export function AvatarGroup({
   const overlap = Math.round(numericSize * OVERLAP_RATIO);
 
   const contextValue = useMemo(
-    () => ({size, overlap, numericSize}),
-    [size, overlap, numericSize],
+    () => ({size, shape, overlap, numericSize}),
+    [size, shape, overlap, numericSize],
   );
 
   // The keyboard hint and roving tab stop only make sense once the group has
@@ -152,7 +160,7 @@ export function AvatarGroup({
         onKeyDown={composeEventHandlers(onKeyDown, handleKeyDown)}
         onFocus={composeEventHandlers(onFocus, handleFocus)}
         {...mergeProps(
-          themeProps('avatar-group', {size}),
+          themeProps('avatar-group', {size, shape}),
           stylex.props(styles.root, xstyle),
           className,
           style,

package/src/AvatarGroup/AvatarGroupContext.ts

@@ -9,16 +9,18 @@
  */
 
 import {createContext, use} from 'react';
-import type {AvatarSize} from '../Avatar';
+import type {AvatarShape, AvatarSize} from '../Avatar';
 
 export interface AvatarGroupContextValue {
   size: AvatarSize;
+  shape: AvatarShape;
   overlap: number;
   numericSize: number;
 }
 
-export const AvatarGroupContext =
-  createContext<AvatarGroupContextValue | null>(null);
+export const AvatarGroupContext = createContext<AvatarGroupContextValue | null>(
+  null,
+);
 AvatarGroupContext.displayName = 'AvatarGroupContext';
 
 export function useAvatarGroup(): AvatarGroupContextValue | null {

package/src/AvatarGroup/AvatarGroupOverflow.tsx

@@ -20,15 +20,16 @@ import {
   typographyVars,
   typeScaleVars,
   fontWeightVars,
-  radiusVars,
   spacingVars,
 } from '../theme/tokens.stylex';
+import {shapeStyles} from '../Avatar/Avatar';
 import {mergeProps} from '../utils';
 import {resolveSize} from '../Avatar';
 import {useAvatarGroup} from './AvatarGroupContext';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
 import {focusOutlineProps} from '../utils/focusOutline.stylex';
+import {interactionOverlayStyles} from '../utils/interactionOverlay.stylex';
 import {useTranslator} from '../i18n';
 
 const BORDER_WIDTH = 2;
@@ -65,7 +66,10 @@ const styles = stylex.create({
     display: 'inline-flex',
     alignItems: 'center',
     justifyContent: 'center',
-    borderRadius: radiusVars['--radius-full'],
+    // Reads the shape variant's `--_avatar-radius` (set via `shapeStyles`,
+    // shared with Avatar) so the overflow indicator matches the group's
+    // shape instead of always staying a circle.
+    borderRadius: 'var(--_avatar-radius)',
     // Use opaque background to prevent avatar bleed-through
     backgroundColor: colorVars['--color-background-surface'],
     color: colorVars['--color-text-secondary'],
@@ -93,14 +97,6 @@ const styles = stylex.create({
     // Reset the UA button's block padding only; the inline padding from `base`
     // provides the pill's breathing room and must be preserved.
     paddingBlock: 0,
-    // Interactive overlay states layered on top via backgroundImage
-    backgroundImage: {
-      default: `linear-gradient(${colorVars['--color-neutral']}, ${colorVars['--color-neutral']})`,
-      ':hover:where(:not(:disabled,[aria-disabled="true"]))': {
-        '@media (hover: hover)': `linear-gradient(${colorVars['--color-overlay-hover']}, ${colorVars['--color-overlay-hover']}), linear-gradient(${colorVars['--color-neutral']}, ${colorVars['--color-neutral']})`,
-      },
-      ':active': `linear-gradient(${colorVars['--color-overlay-pressed']}, ${colorVars['--color-overlay-pressed']}), linear-gradient(${colorVars['--color-neutral']}, ${colorVars['--color-neutral']})`,
-    },
     // Focus ring via focus-visible
   },
   overlap: {
@@ -166,6 +162,7 @@ export function AvatarGroupOverflow({
   const t = useTranslator();
   const group = useAvatarGroup();
   const size = group?.size ?? 'md';
+  const shape = group?.shape ?? 'circle';
   const numericSize = group?.numericSize ?? resolveSize('md');
   const overlap = group?.overlap ?? 0;
 
@@ -186,14 +183,16 @@ export function AvatarGroupOverflow({
         aria-label={label}
         data-avatar-item=""
         {...mergeProps(
-          themeProps('avatar-group-overflow', {size}),
+          themeProps('avatar-group-overflow', {size, shape}),
           focusOutlineProps.focusVisible(
             styles.base,
             styles.button,
+            interactionOverlayStyles.backgroundImageOnNeutral,
             styles.overlap,
             dynamicStyles.size(numericSize),
             dynamicStyles.fontSize(numericSize),
             dynamicStyles.overlap(-overlap),
+            shapeStyles[shape],
             xstyle,
           ),
           className,
@@ -210,13 +209,14 @@ export function AvatarGroupOverflow({
       {...rest}
       aria-label={label}
       {...mergeProps(
-        themeProps('avatar-group-overflow', {size}),
+        themeProps('avatar-group-overflow', {size, shape}),
         stylex.props(
           styles.base,
           styles.overlap,
           dynamicStyles.size(numericSize),
           dynamicStyles.fontSize(numericSize),
           dynamicStyles.overlap(-overlap),
+          shapeStyles[shape],
           xstyle,
         ),
         className,

package/src/Badge/Badge.doc.mjs

@@ -18,7 +18,8 @@ export const docs = {
     {
       name: 'label',
       type: 'ReactNode',
-      description: 'Badge text content.',
+      description:
+        'Badge text content. A badge is one line, so a label wider than the space available is cut with an ellipsis rather than escaping its container; a string or number label is also set as the badge\'s title so the full text stays reachable on hover.',
     },
     {
       name: 'icon',
@@ -132,7 +133,7 @@ export const docsDense = {
   },
   propDescriptions: {
     variant: 'visual style variant',
-    label: 'badge text content',
+    label: 'badge text content; over-wide labels clip with an ellipsis, full text in title',
     icon: 'optional leading icon',
   },
 };

package/src/Badge/Badge.test.tsx

@@ -37,9 +37,7 @@ describe('Badge', () => {
       'yellow',
     ] as const;
 
-    const {rerender} = render(
-      <Badge variant={colors[0]} label={colors[0]} />,
-    );
+    const {rerender} = render(<Badge variant={colors[0]} label={colors[0]} />);
     expect(screen.getByText(colors[0])).toBeInTheDocument();
 
     for (const color of colors.slice(1)) {
@@ -74,6 +72,37 @@ describe('Badge', () => {
     expect(screen.getByTestId('custom-badge')).toBeInTheDocument();
   });
 
+  describe('full-label fallback', () => {
+    it('carries the full text in title for a string label', () => {
+      // The label is clipped when it does not fit, so the full text has to be
+      // reachable. No measurement is involved, so this holds on the server too.
+      const {container} = render(<Badge label="Awaiting security review" />);
+      expect(container.firstElementChild).toHaveAttribute(
+        'title',
+        'Awaiting security review',
+      );
+    });
+
+    it('carries a number label too', () => {
+      const {container} = render(<Badge label={42} />);
+      expect(container.firstElementChild).toHaveAttribute('title', '42');
+    });
+
+    it('sets no title for a rich label', () => {
+      // Flattening a subtree to a string renders a guess — an icon or nested
+      // element reads differently — so it is left alone rather than guessed at.
+      const {container} = render(<Badge label={<strong>Rich</strong>} />);
+      expect(container.firstElementChild).not.toHaveAttribute('title');
+    });
+
+    it('sets no title for an empty string label', () => {
+      // Nothing to recover, so nothing to announce — the same guard
+      // `BaseTable` applies to a truncated header cell.
+      const {container} = render(<Badge label="" />);
+      expect(container.firstElementChild).not.toHaveAttribute('title');
+    });
+  });
+
   it('renders astryx-* class names for theme targeting', () => {
     const {container} = render(<Badge variant="success" label="Active" />);
     const root = container.firstElementChild!;

package/src/Badge/Badge.tsx

@@ -46,6 +46,24 @@ const styles = stylex.create({
     lineHeight: typeScaleVars['--text-supporting-leading'],
     fontWeight: fontWeightVars['--font-weight-medium'],
     whiteSpace: 'nowrap',
+    // A badge is one line by construction — fixed height, `nowrap` — so a
+    // label wider than the space available has to go somewhere. Without these
+    // it went *outside* its container: `nowrap` with nothing to clip it
+    // neither wraps nor truncates, it just escapes, and lands on whatever sits
+    // beside it. `minWidth: 0` matters as much as the max: as a flex item the
+    // automatic minimum size would otherwise hold the badge at its full text
+    // width and push the clamp back out again.
+    maxWidth: '100%',
+    minWidth: 0,
+  },
+  // The ellipsis goes on the label rather than the badge itself, because
+  // `text-overflow` needs a block container and taking the root off
+  // `inline-flex` to get one would cost the icon its centring. The label is a
+  // flex item, so it needs its own `minWidth: 0` for the same reason as above.
+  label: {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    minWidth: 0,
   },
 });
 
@@ -163,6 +181,28 @@ export function Badge({
   ref,
   ...props
 }: BadgeProps) {
+  // Clipping a label makes its tail unrecoverable, so the full text has to
+  // stay reachable somewhere. `title` is the half of that answer which costs
+  // nothing: no measurement, no hook, so `Badge` renders the same on the
+  // server and stays usable in a server component. It follows the shape
+  // `BaseTable` already uses for a truncated header cell (BaseTable.tsx) —
+  // string content only, and only when there is something to show.
+  //
+  // A rich label is left alone: it is a subtree whose text would have to be
+  // flattened to a string, and flattening renders a guess — an icon, a
+  // `<strong>`, a nested element all read differently.
+  //
+  // It is set whether or not the label actually fits, because knowing that
+  // requires measuring. The refinement — a tooltip only when the text is
+  // really cut, reachable by hover and by focus — needs that measurement and
+  // a client component, so it is tracked in #5585.
+  const labelTitle =
+    typeof label === 'number'
+      ? String(label)
+      : typeof label === 'string' && label.length > 0
+        ? label
+        : undefined;
+
   return (
     <span
       ref={ref}
@@ -172,9 +212,10 @@ export function Badge({
         className,
         style,
       )}
+      title={labelTitle}
       {...props}>
       {icon}
-      {label}
+      <span {...stylex.props(styles.label)}>{label}</span>
     </span>
   );
 }

package/src/Banner/Banner.doc.mjs

@@ -67,6 +67,12 @@ export const docs = {
       description:
         'Called when the dismiss button is clicked; banner hides itself regardless of whether this is provided.',
     },
+    {
+      name: 'dismissLabel',
+      type: 'string',
+      description:
+        'Accessible name and visible tooltip for the dismiss button (pass it already translated). Defaults to "Dismiss <title>" for a string title, so stacked banners are distinguishable; set it when the title is a ReactNode.',
+    },
     {
       name: 'endContent',
       type: 'ReactNode',
@@ -165,6 +171,7 @@ export const docsZh = {
     {name: 'icon', type: 'ReactNode', description: '覆盖默认的状态图标。'},
     {name: 'isDismissable', type: 'boolean', description: '横幅是否可被用户关闭。', default: 'false'},
     {name: 'onDismiss', type: '() => void', description: '点击关闭按钮时调用；无论是否提供此回调，横幅都会自动隐藏。'},
+    {name: 'dismissLabel', type: 'string', description: '关闭按钮的无障碍名称和可见工具提示（请传入已翻译的字符串）。字符串标题默认生成“关闭 <标题>”；富文本标题请设置此属性。'},
     {name: 'endContent', type: 'ReactNode', description: '渲染在头部区域末端对齐的操作内容，通常是按钮或链接。头部过窄时会整体换行到文本下方，自成一行。'},
     {name: 'container', type: "'card' | 'section'", description: '视觉变体：card 带圆角；section 无圆角全宽，适用于页面级场景。', default: "'card'"},
     {name: 'elevation', type: "'none' | 'low' | 'med' | 'high'", description: '静止阴影深度。用于悬浮于内容之上的浮动横幅；none 为默认内联横幅。', default: "'none'"},
@@ -241,6 +248,8 @@ export const docsDense = {
     icon: 'override default status icon',
     isDismissable: 'user can dismiss banner',
     onDismiss: 'dismiss callback; banner self-hides regardless',
+    dismissLabel:
+      'a11y name + visible tooltip for dismiss; defaults to "Dismiss <title>"',
     endContent: 'end-aligned action in header, typically button/link; wraps to its own row when the header is too narrow',
     container: 'card=border-radius; section=full-width no radius for page-level',
     elevation: 'resting shadow depth: none|low|med|high; raise for a floating banner',