@astryxdesign/core 0.1.2 → 0.1.3

package/src/Layer/useLayer.test.tsx

@@ -0,0 +1,111 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file useLayer.test.tsx
+ * @input Uses vitest, @testing-library/react, useLayer hook
+ * @output Unit tests for useLayer show/hide behavior and feature-detection guards
+ * @position Testing; validates useLayer.tsx implementation
+ *
+ * SYNC: When useLayer.tsx changes, update tests to match new behavior
+ */
+
+import {describe, it, expect, vi, afterEach} from 'vitest';
+import {render, act} from '@testing-library/react';
+import {useLayer} from './useLayer';
+
+/**
+ * Minimal harness that exposes the imperative show/hide callbacks and renders
+ * the layer element so tests can assert on visibility.
+ */
+function LayerHarness({
+  onReady,
+}: {
+  onReady: (api: {show: () => void; hide: () => void}) => void;
+}) {
+  const layer = useLayer({mode: 'fixed'});
+  onReady({show: layer.show, hide: layer.hide});
+  return <>{layer.render(<span>Layer content</span>, {x: 0, y: 0})}</>;
+}
+
+describe('useLayer', () => {
+  const originalShowPopover = HTMLElement.prototype.showPopover;
+  const originalHidePopover = HTMLElement.prototype.hidePopover;
+
+  afterEach(() => {
+    // Restore whatever the environment originally provided.
+    if (originalShowPopover === undefined) {
+      // @ts-expect-error - deleting to simulate original absence
+      delete HTMLElement.prototype.showPopover;
+    } else {
+      HTMLElement.prototype.showPopover = originalShowPopover;
+    }
+    if (originalHidePopover === undefined) {
+      // @ts-expect-error - deleting to simulate original absence
+      delete HTMLElement.prototype.hidePopover;
+    } else {
+      HTMLElement.prototype.hidePopover = originalHidePopover;
+    }
+  });
+
+  describe('when the Popover API is supported', () => {
+    it('calls showPopover/hidePopover on show/hide', () => {
+      const showSpy = vi.fn();
+      const hideSpy = vi.fn();
+      HTMLElement.prototype.showPopover = showSpy;
+      HTMLElement.prototype.hidePopover = hideSpy;
+
+      let api: {show: () => void; hide: () => void} = {
+        show: () => {},
+        hide: () => {},
+      };
+      render(<LayerHarness onReady={a => (api = a)} />);
+
+      act(() => api.show());
+      expect(showSpy).toHaveBeenCalledTimes(1);
+
+      act(() => api.hide());
+      expect(hideSpy).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('when the Popover API is unsupported (Safari <17 / Firefox <125)', () => {
+    it('show() does not throw when showPopover is undefined and the layer becomes visible', () => {
+      // Simulate a browser without the Popover API (finding infra-4).
+      // @ts-expect-error - simulate missing API
+      delete HTMLElement.prototype.showPopover;
+      // @ts-expect-error - simulate missing API
+      delete HTMLElement.prototype.hidePopover;
+
+      let api: {show: () => void; hide: () => void} = {
+        show: () => {},
+        hide: () => {},
+      };
+      const {container} = render(<LayerHarness onReady={a => (api = a)} />);
+
+      const layerEl = container.querySelector('[popover]') as HTMLElement;
+      expect(layerEl).not.toBeNull();
+
+      expect(() => act(() => api.show())).not.toThrow();
+      // Falls back to plain visibility so the layer is still usable.
+      expect(layerEl.style.display).toBe('block');
+    });
+
+    it('hide() does not throw when hidePopover is undefined and the layer is hidden', () => {
+      // @ts-expect-error - simulate missing API
+      delete HTMLElement.prototype.showPopover;
+      // @ts-expect-error - simulate missing API
+      delete HTMLElement.prototype.hidePopover;
+
+      let api: {show: () => void; hide: () => void} = {
+        show: () => {},
+        hide: () => {},
+      };
+      const {container} = render(<LayerHarness onReady={a => (api = a)} />);
+      const layerEl = container.querySelector('[popover]') as HTMLElement;
+
+      act(() => api.show());
+      expect(() => act(() => api.hide())).not.toThrow();
+      expect(layerEl.style.display).toBe('none');
+    });
+  });
+});

package/src/Layer/useLayer.tsx

@@ -15,6 +15,7 @@
 
 import React, {
   useCallback,
+  useEffect,
   useId,
   useRef,
   useState,
@@ -99,6 +100,16 @@ export interface ContextRenderProps {
    * @default 'div'
    */
   as?: 'div' | 'span';
+  /**
+   * Pointer-enter handler attached to the popover container itself. Lets a
+   * consumer keep a hover-driven layer open while the pointer is over the
+   * surface (e.g. Tooltip/HoverCard "hoverable" behavior — WCAG 1.4.13).
+   */
+  onMouseEnter?: React.MouseEventHandler<HTMLElement>;
+  /**
+   * Pointer-leave handler attached to the popover container itself.
+   */
+  onMouseLeave?: React.MouseEventHandler<HTMLElement>;
 }
 
 /**
@@ -310,8 +321,19 @@ export function useLayer(
   const isOpenRef = useRef(false);
 
   const show = useCallback(() => {
-    if (popoverRef.current && !isOpenRef.current) {
-      popoverRef.current.showPopover();
+    const el = popoverRef.current;
+    if (el && !isOpenRef.current) {
+      // Finding infra-4: the Popover API is unsupported on Safari <17 and
+      // Firefox <125. On those browsers `showPopover` does not exist, so
+      // calling it unconditionally throws a TypeError and the layer never
+      // opens. Guard behind a feature check; when the API is missing, fall
+      // back to plain visibility (the [popover] attribute is inert there, so
+      // the element sits in normal flow) so the layer still becomes visible.
+      if (typeof el.showPopover === 'function') {
+        el.showPopover();
+      } else {
+        el.style.display = 'block';
+      }
       isOpenRef.current = true;
       setIsOpen(true);
       onShow?.();
@@ -320,7 +342,16 @@ export function useLayer(
 
   const hide = useCallback(() => {
     if (isOpenRef.current) {
-      popoverRef.current?.hidePopover();
+      const el = popoverRef.current;
+      // See finding infra-4 note in `show`: mirror the same guard on hide so
+      // unsupported browsers degrade gracefully instead of throwing.
+      if (el) {
+        if (typeof el.hidePopover === 'function') {
+          el.hidePopover();
+        } else {
+          el.style.display = 'none';
+        }
+      }
       isOpenRef.current = false;
       setIsOpen(false);
       onHide?.();
@@ -367,17 +398,63 @@ export function useLayer(
     [onHide],
   );
 
-  // Ref callback for popover element — sets up toggle listener
+  // Ref callback for popover element — sets up the `toggle` listener.
+  // Tracks the element + handler currently bound so the listener is removed
+  // when the element detaches or when `handleToggle`'s identity changes (a new
+  // `onHide` prop), preventing stale-closure listeners from accumulating on the
+  // same element (infra-10).
+  const listenedElRef = useRef<HTMLElement | null>(null);
+  const listenedHandlerRef = useRef<((e: Event) => void) | null>(null);
+
+  const bindToggleListener = useCallback(
+    (el: HTMLElement | null, handler: (e: Event) => void) => {
+      if (
+        listenedElRef.current &&
+        listenedHandlerRef.current &&
+        (listenedElRef.current !== el || listenedHandlerRef.current !== handler)
+      ) {
+        listenedElRef.current.removeEventListener(
+          'toggle',
+          listenedHandlerRef.current,
+        );
+        listenedElRef.current = null;
+        listenedHandlerRef.current = null;
+      }
+      if (el && listenedElRef.current !== el) {
+        el.addEventListener('toggle', handler);
+        listenedElRef.current = el;
+        listenedHandlerRef.current = handler;
+      }
+    },
+    [],
+  );
+
   const popoverRefCallback = useCallback(
     (el: HTMLElement | null) => {
       popoverRef.current = el;
-      if (el) {
-        el.addEventListener('toggle', handleToggle);
-      }
+      bindToggleListener(el, handleToggle);
     },
-    [handleToggle],
+    [handleToggle, bindToggleListener],
   );
 
+  // Re-bind when the handler identity changes while the element stays mounted,
+  // and detach on unmount.
+  useEffect(() => {
+    if (popoverRef.current) {
+      bindToggleListener(popoverRef.current, handleToggle);
+    }
+    return () => {
+      if (listenedElRef.current && listenedHandlerRef.current) {
+        listenedElRef.current.removeEventListener(
+          'toggle',
+          listenedHandlerRef.current,
+        );
+        listenedElRef.current = null;
+        listenedHandlerRef.current = null;
+      }
+    };
+  }, [handleToggle, bindToggleListener]);
+
   // Render function for context mode
   const renderContext = useCallback(
     (children: ReactNode, props?: ContextRenderProps) => {
@@ -389,6 +466,8 @@ export function useLayer(
         className: extraClassName,
         style: extraStyle,
         as: Container = 'div',
+        onMouseEnter,
+        onMouseLeave,
       } = props || {};
 
       // CSS anchor positioning (dynamic, not in StyleX)
@@ -413,7 +492,9 @@ export function useLayer(
           role={role}
           popover={lightDismiss ? 'auto' : 'manual'}
           className={combinedClassName}
-          style={{...stylexResult.style, ...anchorStyle, ...extraStyle}}>
+          style={{...stylexResult.style, ...anchorStyle, ...extraStyle}}
+          onMouseEnter={onMouseEnter}
+          onMouseLeave={onMouseLeave}>
           {children}
         </Container>
       );

package/src/Layout/Layout.tsx

@@ -26,7 +26,7 @@ import {stack} from '../Stack/stack.stylex';
 import {stackItem} from '../Stack/stackItem.stylex';
 import {mergeProps} from '../utils';
 import type {BaseProps} from '../BaseProps';
-import type {SpacingStep} from '../utils/types';
+import type {SizeValue, SpacingStep} from '../utils/types';
 import {themeProps} from '../utils/themeProps';
 import {
   layoutPaddingOuterXVarStyles,
@@ -76,12 +76,12 @@ const styles = stylex.create({
 });
 
 const dynamicStyles = stylex.create({
-  contentWidthVar: (width: number) => ({
-    '--layout-content-width': `${width}px`,
+  contentWidthVar: (width: SizeValue) => ({
+    '--layout-content-width': typeof width === 'number' ? `${width}px` : width,
   }),
-  contentWidth: (width: number) => ({
+  contentWidth: (width: SizeValue) => ({
     width: '100%',
-    maxWidth: width,
+    maxWidth: typeof width === 'number' ? `${width}px` : width,
     marginInline: 'auto',
   }),
 });
@@ -102,11 +102,12 @@ export interface LayoutProps extends Omit<BaseProps, 'content'> {
    * panels). Dividers remain full-bleed. Content is centered with
    * `margin-inline: auto` when narrower than the available space.
    *
-   * Accepts any pixel value. Common page widths from internal patterns:
+   * Numbers are treated as pixels, strings are used as-is (e.g., '60ch').
+   * Common page widths:
    * - `640` — forms, settings, text-focused pages
    * - `960` — content pages, component demos, wider layouts
    */
-  contentWidth?: number;
+  contentWidth?: SizeValue;
 
   /**
    * End panel slot (right in LTR, left in RTL).
@@ -149,15 +150,6 @@ export interface LayoutProps extends Omit<BaseProps, 'content'> {
    */
   defaultHasDividers?: boolean;
 
-  /**
-   * CSS class name(s) appended to the root element.
-   */
-  className?: string;
-  /**
-   * Inline styles to apply to the root element.
-   */
-  style?: React.CSSProperties;
-
   /**
    * Children are a shorthand for the `content` slot:
    * `<Layout>{main}</Layout>` is equivalent to `<Layout content={main} />`.

package/src/Layout/LayoutFooter.doc.mjs

@@ -22,8 +22,8 @@ export const docs = {
     },
     {
       name: 'height',
-      type: 'number | string',
-      description: 'Footer height.',
+      type: 'SizeValue',
+      description: 'Footer height. Numbers are treated as pixels, strings are used as-is.',
     },
     {
       name: 'label',
@@ -57,8 +57,8 @@ export const docsZh = {
     },
     {
       name: 'height',
-      type: 'number | string',
-      description: '页脚高度。',
+      type: 'SizeValue',
+      description: '页脚高度。数字类型会被解释为像素值，字符串类型按原样使用。',
     },
     {
       name: 'label',

package/src/Layout/LayoutFooter.tsx

@@ -22,7 +22,7 @@ import * as stylex from '@stylexjs/stylex';
 import {LayoutDividerContext} from './LayoutDividerContext';
 import {colorVars, spacingVars} from '../theme/tokens.stylex';
 import {mergeProps} from '../utils';
-import type {SpacingStep} from '../utils/types';
+import type {SizeValue, SpacingStep} from '../utils/types';
 import {themeProps} from '../utils/themeProps';
 import {
   paddingStyles,
@@ -71,7 +71,7 @@ const styles = stylex.create({
 
 // Dynamic styles for sizing props
 const dynamicStyles = stylex.create({
-  sizing: (height: number | string | null) => ({
+  sizing: (height: SizeValue | null) => ({
     height,
   }),
 });
@@ -95,7 +95,7 @@ export interface LayoutFooterProps extends BaseProps<HTMLDivElement> {
    * Height of the footer.
    * Numbers are treated as pixels, strings are used as-is.
    */
-  height?: number | string;
+  height?: SizeValue;
 
   /**
    * Internal padding of the footer using the spacing scale.

package/src/Layout/LayoutHeader.doc.mjs

@@ -22,8 +22,8 @@ export const docs = {
     },
     {
       name: 'height',
-      type: 'number | string',
-      description: 'Header height.',
+      type: 'SizeValue',
+      description: 'Header height. Numbers are treated as pixels, strings are used as-is.',
     },
     {
       name: 'label',
@@ -57,8 +57,8 @@ export const docsZh = {
     },
     {
       name: 'height',
-      type: 'number | string',
-      description: '页眉高度。',
+      type: 'SizeValue',
+      description: '页眉高度。数字类型会被解释为像素值，字符串类型按原样使用。',
     },
     {
       name: 'label',

package/src/Layout/LayoutHeader.tsx

@@ -22,7 +22,7 @@ import * as stylex from '@stylexjs/stylex';
 import {LayoutDividerContext} from './LayoutDividerContext';
 import {colorVars, spacingVars} from '../theme/tokens.stylex';
 import {mergeProps} from '../utils';
-import type {SpacingStep} from '../utils/types';
+import type {SizeValue, SpacingStep} from '../utils/types';
 import {themeProps} from '../utils/themeProps';
 import {
   paddingStyles,
@@ -71,7 +71,7 @@ const styles = stylex.create({
 
 // Dynamic styles for sizing props
 const dynamicStyles = stylex.create({
-  sizing: (height: number | string | null) => ({
+  sizing: (height: SizeValue | null) => ({
     height,
   }),
 });
@@ -95,7 +95,7 @@ export interface LayoutHeaderProps extends BaseProps<HTMLDivElement> {
    * Height of the header.
    * Numbers are treated as pixels, strings are used as-is.
    */
-  height?: number | string;
+  height?: SizeValue;
 
   /**
    * Internal padding of the header using the spacing scale.

package/src/Layout/LayoutPanel.tsx

@@ -23,7 +23,7 @@ import {colorVars, spacingVars} from '../theme/tokens.stylex';
 import {LayoutAreaContext} from './LayoutAreaContext';
 import {LayoutSlotsContext} from './LayoutSlotsContext';
 import {mergeProps} from '../utils';
-import type {SpacingStep} from '../utils/types';
+import type {SizeValue, SpacingStep} from '../utils/types';
 import type {ResizableProps} from '../Resizable/useResizable';
 import {themeProps} from '../utils/themeProps';
 import {
@@ -102,7 +102,7 @@ const styles = stylex.create({
 
 // Dynamic styles for sizing props
 const dynamicStyles = stylex.create({
-  sizing: (width: number | string | null) => ({
+  sizing: (width: SizeValue | null) => ({
     width,
   }),
 });
@@ -158,7 +158,7 @@ export interface LayoutPanelProps extends BaseProps<HTMLDivElement> {
    * Numbers are treated as pixels, strings are used as-is.
    * When `resizable` is provided, this is ignored — the hook controls width.
    */
-  width?: number | string;
+  width?: SizeValue;
 
   /**
    * Resize props from `useResizable()`. When provided, the panel width

package/src/Layout/padding.stylex.ts

@@ -220,6 +220,58 @@ export const layoutPaddingOuterYVarStyles = stylex.create({
   10: {'--layout-padding-outer-y': spacingVars['--spacing-10']},
 });
 
+/**
+ * Inline-only padding styles.
+ * Use when a component needs to set inline (horizontal) padding independently
+ * of block padding — e.g. the `paddingX` prop on Stack.
+ */
+export const paddingInlineStyles = stylex.create({
+  0: {
+    paddingInlineStart: spacingVars['--spacing-0'],
+    paddingInlineEnd: spacingVars['--spacing-0'],
+  },
+  0.5: {
+    paddingInlineStart: spacingVars['--spacing-0-5'],
+    paddingInlineEnd: spacingVars['--spacing-0-5'],
+  },
+  1: {
+    paddingInlineStart: spacingVars['--spacing-1'],
+    paddingInlineEnd: spacingVars['--spacing-1'],
+  },
+  1.5: {
+    paddingInlineStart: spacingVars['--spacing-1-5'],
+    paddingInlineEnd: spacingVars['--spacing-1-5'],
+  },
+  2: {
+    paddingInlineStart: spacingVars['--spacing-2'],
+    paddingInlineEnd: spacingVars['--spacing-2'],
+  },
+  3: {
+    paddingInlineStart: spacingVars['--spacing-3'],
+    paddingInlineEnd: spacingVars['--spacing-3'],
+  },
+  4: {
+    paddingInlineStart: spacingVars['--spacing-4'],
+    paddingInlineEnd: spacingVars['--spacing-4'],
+  },
+  5: {
+    paddingInlineStart: spacingVars['--spacing-5'],
+    paddingInlineEnd: spacingVars['--spacing-5'],
+  },
+  6: {
+    paddingInlineStart: spacingVars['--spacing-6'],
+    paddingInlineEnd: spacingVars['--spacing-6'],
+  },
+  8: {
+    paddingInlineStart: spacingVars['--spacing-8'],
+    paddingInlineEnd: spacingVars['--spacing-8'],
+  },
+  10: {
+    paddingInlineStart: spacingVars['--spacing-10'],
+    paddingInlineEnd: spacingVars['--spacing-10'],
+  },
+});
+
 /**
  * Block-only padding override styles.
  * Use when a component needs to override block padding independently

package/src/Lightbox/Lightbox.doc.mjs

@@ -64,6 +64,15 @@ export const docs = {
       { guidance: false, description: 'Nest interactive content inside captions; keep them plain text.' },
     ],
   },
+  playground: {
+    defaults: {
+      media: {
+        src: 'https://lookaside.facebook.com/assets/astryx/light-scene-horizontal-1.png',
+        alt: 'Coastal shoreline with ocean waves',
+        caption: 'A scenic coastline with waves rolling onto a sandy beach beneath a clear sky.',
+      },
+    },
+  },
 };
 
 /** @type {import('../docs-types').ComponentDoc} */

package/src/Lightbox/Lightbox.test.tsx

@@ -177,7 +177,7 @@ describe('Lightbox', () => {
       expect(screen.getByLabelText('Next')).toBeInTheDocument();
     });
 
-    it('hides prev button on first item', () => {
+    it('keeps prev mounted and disabled on first item', () => {
       render(
         <Lightbox
           isOpen={true}
@@ -186,11 +186,16 @@ describe('Lightbox', () => {
           index={0}
         />,
       );
-      expect(screen.queryByLabelText('Previous')).not.toBeInTheDocument();
-      expect(screen.getByLabelText('Next')).toBeInTheDocument();
+      // The Prev button stays mounted at the range boundary (disabled) rather
+      // than unmounting, so navigating to the first item never removes the
+      // focused control and drops focus to <body>.
+      const prev = screen.getByLabelText('Previous');
+      expect(prev).toBeInTheDocument();
+      expect(prev).toBeDisabled();
+      expect(screen.getByLabelText('Next')).not.toBeDisabled();
     });
 
-    it('hides next button on last item', () => {
+    it('keeps next mounted and disabled on last item', () => {
       render(
         <Lightbox
           isOpen={true}
@@ -199,8 +204,51 @@ describe('Lightbox', () => {
           index={2}
         />,
       );
+      const next = screen.getByLabelText('Next');
+      expect(next).toBeInTheDocument();
+      expect(next).toBeDisabled();
+      expect(screen.getByLabelText('Previous')).not.toBeDisabled();
+    });
+
+    it('does not drop focus to <body> when navigating to the last item', () => {
+      const {rerender} = render(
+        <Lightbox
+          isOpen={true}
+          onOpenChange={() => {}}
+          media={media}
+          index={1}
+        />,
+      );
+      // Simulate arriving at the final item (Next becomes disabled).
+      rerender(
+        <Lightbox
+          isOpen={true}
+          onOpenChange={() => {}}
+          media={media}
+          index={2}
+        />,
+      );
+      // Both nav buttons remain in the DOM; the dialog stays available so
+      // keyboard gallery navigation isn't dead-ended.
       expect(screen.getByLabelText('Previous')).toBeInTheDocument();
-      expect(screen.queryByLabelText('Next')).not.toBeInTheDocument();
+      expect(screen.getByLabelText('Next')).toBeInTheDocument();
+      const dialog = document.querySelector('dialog');
+      expect(dialog).toBeInTheDocument();
+      // Arrow handling is on the dialog, so navigation still works at the edge.
+      const onIndexChange = vi.fn();
+      rerender(
+        <Lightbox
+          isOpen={true}
+          onOpenChange={() => {}}
+          media={media}
+          index={2}
+          onIndexChange={onIndexChange}
+        />,
+      );
+      if (dialog instanceof HTMLElement) {
+        fireEvent.keyDown(dialog, {key: 'ArrowLeft'});
+      }
+      expect(onIndexChange).toHaveBeenCalledWith(1);
     });
 
     it('calls onIndexChange when next is clicked', () => {

package/src/Lightbox/Lightbox.tsx

@@ -496,13 +496,16 @@ export function Lightbox({
           />
         </div>
 
-        {/* Gallery nav: prev */}
-        {isGallery && canPrev && (
+        {/* Gallery nav: prev — stays mounted and is disabled at the start of
+            the range so pressing/arrowing to the boundary doesn't unmount the
+            focused control and drop focus to <body>. */}
+        {isGallery && (
           <div {...stylex.props(styles.navButton, styles.navPrev)}>
             <IconButton
               icon={<Icon icon="chevronLeft" size="sm" color="inherit" />}
               label="Previous"
               variant="ghost"
+              isDisabled={!canPrev}
               onClick={goToPrev}
               xstyle={styles.controlButton}
             />
@@ -549,13 +552,15 @@ export function Lightbox({
           )}
         </div>
 
-        {/* Gallery nav: next */}
-        {isGallery && canNext && (
+        {/* Gallery nav: next — see "prev" above; stays mounted and disabled at
+            the end of the range instead of unmounting. */}
+        {isGallery && (
           <div {...stylex.props(styles.navButton, styles.navNext)}>
             <IconButton
               icon={<Icon icon="chevronRight" size="sm" color="inherit" />}
               label="Next"
               variant="ghost"
+              isDisabled={!canNext}
               onClick={goToNext}
               xstyle={styles.controlButton}
             />

package/src/Link/Link.doc.mjs

@@ -59,6 +59,13 @@ export const docs = {
             'Opens in new tab with external icon and safe rel tokens',
           default: 'false',
         },
+        {
+          name: 'newTabLabel',
+          type: 'string',
+          description:
+            'Screen-reader text announcing that an external link opens in a new tab. Override for localization.',
+          default: "'(opens in new tab)'",
+        },
         {
           name: 'target',
           type: 'string',
@@ -185,6 +192,12 @@ export const docsZh = {
           description: '在新标签页中打开，带外部图标和安全 rel 标记',
           default: 'false',
         },
+        {
+          name: 'newTabLabel',
+          type: 'string',
+          description: '向屏幕阅读器announce外部链接将在新标签页打开的文本。可覆盖以本地化。',
+          default: "'(opens in new tab)'",
+        },
         {
           name: 'target',
           type: 'string',
@@ -296,6 +309,7 @@ export const docsDense = {
         hasUnderline: 'Always show underline',
         isDisabled: 'Disables link',
         isExternalLink: 'Opens new tab w/ external icon and safe rel tokens',
+        newTabLabel: 'SR text announcing an external link opens in a new tab',
         target:
           'Where to open linked document. target="_blank" auto-adds noopener noreferrer.',
         rel: 'Link relationship tokens. noopener noreferrer are merged for target="_blank".',