@openvoxproject/voxblocks 0.11.0 → 0.12.0

package/src/components/disclosure/vox-disclosure.ts

@@ -9,13 +9,9 @@ import { customElement, property } from 'lit/decorators.js';
  */
 @customElement('vox-disclosure')
 export class VoxDisclosure extends LitElement {
-  private static nextId = 0;
-
   @property() summary = 'Show details';
   @property({ type: Boolean, reflect: true }) open = false;
 
-  private readonly panelId = `vox-disclosure-panel-${VoxDisclosure.nextId++}`;
-
   static styles = css`
     :host {
       display: block;
@@ -81,7 +77,6 @@ export class VoxDisclosure extends LitElement {
       <button
         class="trigger"
         aria-expanded=${this.open ? 'true' : 'false'}
-        aria-controls=${this.panelId}
         @click=${this.toggle}
       >
         <svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
@@ -89,7 +84,7 @@ export class VoxDisclosure extends LitElement {
         </svg>
         ${this.summary}
       </button>
-      <div id=${this.panelId} class="panel" ?hidden=${!this.open}>
+      <div class="panel" ?hidden=${!this.open}>
         <slot></slot>
       </div>
     `;

package/src/components/dropdown/vox-dropdown.ts

@@ -122,14 +122,12 @@ export class VoxDropdown extends LitElement {
     super.connectedCallback();
     document.addEventListener('click', this.handleOutsideClick);
     this.addEventListener('keydown', this.handleKeydown);
-    this.addEventListener('focusout', this.handleFocusOut);
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
     document.removeEventListener('click', this.handleOutsideClick);
     this.removeEventListener('keydown', this.handleKeydown);
-    this.removeEventListener('focusout', this.handleFocusOut);
   }
 
   private handleOutsideClick = (event: MouseEvent) => {
@@ -138,20 +136,6 @@ export class VoxDropdown extends LitElement {
     }
   };
 
-  /** Close when focus leaves the component entirely (e.g. Tab past the last item). */
-  private handleFocusOut = (event: FocusEvent) => {
-    const next = event.relatedTarget as Node | null;
-    if (this.open && !(next && this.contains(next))) {
-      this.open = false;
-    }
-  };
-
-  private focusItem(index: number) {
-    const items = [...this.querySelectorAll<HTMLElement>('a, button')];
-    if (items.length === 0) return;
-    items[(index + items.length) % items.length].focus();
-  }
-
   private handleKeydown = (event: KeyboardEvent) => {
     if (event.key === 'Escape' && this.open) {
       this.open = false;
@@ -159,27 +143,20 @@ export class VoxDropdown extends LitElement {
       return;
     }
 
-    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+    if ((event.key === 'ArrowDown' || event.key === 'ArrowUp') && this.open) {
       event.preventDefault();
-      const delta = event.key === 'ArrowDown' ? 1 : -1;
-      if (!this.open) {
-        this.open = true;
-        this.updateComplete.then(() =>
-          this.focusItem(event.key === 'ArrowDown' ? 0 : -1),
-        );
-        return;
-      }
       const items = [...this.querySelectorAll<HTMLElement>('a, button')];
-      const index = items.indexOf(document.activeElement as HTMLElement);
-      this.focusItem(Math.max(index, 0) + delta);
+      if (items.length === 0) return;
+      const active = document.activeElement as HTMLElement;
+      const index = items.indexOf(active);
+      const delta = event.key === 'ArrowDown' ? 1 : -1;
+      const next = items[(Math.max(index, 0) + delta + items.length) % items.length];
+      next.focus();
     }
   };
 
   private toggle() {
     this.open = !this.open;
-    if (this.open) {
-      this.updateComplete.then(() => this.focusItem(0));
-    }
   }
 
   render() {
@@ -188,7 +165,6 @@ export class VoxDropdown extends LitElement {
         class="trigger"
         aria-expanded=${this.open ? 'true' : 'false'}
         aria-haspopup="true"
-        aria-controls="menu"
         @click=${this.toggle}
       >
         ${this.label}
@@ -196,7 +172,7 @@ export class VoxDropdown extends LitElement {
           <path d="m6 9 6 6 6-6" />
         </svg>
       </button>
-      <div id="menu" class="menu">
+      <div class="menu">
         <slot @click=${() => (this.open = false)}></slot>
       </div>
     `;

package/src/components/empty-state/vox-empty-state.ts

@@ -60,7 +60,7 @@ export class VoxEmptyState extends LitElement {
   render() {
     return html`
       <div class="empty">
-        <div class="icon" aria-hidden="true"><slot name="icon"></slot></div>
+        <div class="icon"><slot name="icon"></slot></div>
         <h3 class="heading">${this.heading}</h3>
         <div class="body"><slot></slot></div>
         <div class="actions"><slot name="actions"></slot></div>

package/src/components/file-input/vox-file-input.ts

@@ -84,9 +84,8 @@ export class VoxFileInput extends VoxFieldElement {
     for (const file of files) data.append(this.name, file);
     this.internals.setFormValue(files.length > 0 ? data : null);
 
-    this.invalid = this.required && files.length === 0;
     this.internals.setValidity(
-      this.invalid ? { valueMissing: true } : {},
+      this.required && files.length === 0 ? { valueMissing: true } : {},
       'Please select a file.',
       this.inputEl,
     );
@@ -104,8 +103,6 @@ export class VoxFileInput extends VoxFieldElement {
             accept=${ifDefined(this.accept)}
             ?multiple=${this.multiple}
             ?disabled=${this.disabled}
-            aria-describedby=${ifDefined(this.noteId)}
-            aria-invalid=${this.invalid ? 'true' : 'false'}
             @change=${this.handleChange}
           />
           <span class="picker">

package/src/components/header/vox-header.ts

@@ -157,14 +157,12 @@ export class VoxHeader extends LitElement {
     super.connectedCallback();
     document.addEventListener('click', this.handleOutsideClick);
     this.addEventListener('keydown', this.handleKeydown);
-    this.addEventListener('focusout', this.handleFocusOut);
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
     document.removeEventListener('click', this.handleOutsideClick);
     this.removeEventListener('keydown', this.handleKeydown);
-    this.removeEventListener('focusout', this.handleFocusOut);
   }
 
   private handleOutsideClick = (event: MouseEvent) => {
@@ -173,14 +171,6 @@ export class VoxHeader extends LitElement {
     }
   };
 
-  /** Close the mobile menu once focus tabs past its last item. */
-  private handleFocusOut = (event: FocusEvent) => {
-    const next = event.relatedTarget as Node | null;
-    if (this.mobileOpen && !(next && this.contains(next))) {
-      this.mobileOpen = false;
-    }
-  };
-
   private handleKeydown = (event: KeyboardEvent) => {
     if (event.key === 'Escape' && this.mobileOpen) {
       this.mobileOpen = false;

package/src/components/input/vox-input.ts

@@ -56,8 +56,6 @@ export class VoxInput extends VoxFieldElement {
           ?readonly=${this.readonly}
           ?disabled=${this.disabled}
           aria-label=${this.label ? nothing : 'text input'}
-          aria-describedby=${ifDefined(this.noteId)}
-          aria-invalid=${this.invalid ? 'true' : 'false'}
           @input=${this.handleInput}
           @change=${this.handleChange}
         />

package/src/components/link-hub/vox-link-hub.ts

@@ -106,7 +106,7 @@ export class VoxLinkHubItem extends LitElement {
     return html`
       <a href=${this.href}>
         <span class="heading">
-          <span class="icon ${this.hasIcon ? 'has-icon' : ''}" aria-hidden="true">
+          <span class="icon ${this.hasIcon ? 'has-icon' : ''}">
             <slot name="icon" @slotchange=${this.handleIconSlotChange}></slot>
           </span>
           ${this.heading}

package/src/components/pagination/vox-pagination.ts

@@ -2,20 +2,18 @@ import { LitElement, html, css } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
 /**
- * Page-number navigation. Children are plain links, with the current
- * page as a non-interactive `<span aria-current="page">` — like
- * `<vox-breadcrumbs>`, it shouldn't be a link to itself:
+ * Page-number navigation. Children are plain links; mark the current
+ * page with `aria-current="page"`:
  *
  * ```html
  * <vox-pagination>
  *   <a href="?page=1">1</a>
- *   <span aria-current="page">2</span>
+ *   <a href="?page=2" aria-current="page">2</a>
  *   <a href="?page=3">3</a>
  * </vox-pagination>
  * ```
  *
- * @slot - `<a>` elements (including any prev/next links) and the
- * current-page `<span>`.
+ * @slot - `<a>` elements (including any prev/next links).
  */
 @customElement('vox-pagination')
 export class VoxPagination extends LitElement {
@@ -33,8 +31,7 @@ export class VoxPagination extends LitElement {
       flex-wrap: wrap;
     }
 
-    ::slotted(a),
-    ::slotted(span) {
+    ::slotted(a) {
       display: inline-flex;
       align-items: center;
       justify-content: center;
@@ -56,7 +53,7 @@ export class VoxPagination extends LitElement {
       background-color: var(--vox-color-brand-soft);
     }
 
-    ::slotted([aria-current='page']) {
+    ::slotted(a[aria-current='page']) {
       background-color: var(--vox-color-brand-3);
       color: var(--vox-color-text-inverse);
       font-weight: 600;

package/src/components/radio/vox-radio-group.ts

@@ -1,6 +1,5 @@
-import { html, css, nothing } from 'lit';
+import { html, css } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
 import { VoxFieldElement, fieldStyles } from '../../internal/field.js';
 import type { VoxRadio } from './vox-radio.js';
 
@@ -36,9 +35,8 @@ export class VoxRadioGroup extends VoxFieldElement {
 
   updated() {
     this.internals.setFormValue(this.value || null);
-    this.invalid = this.required && !this.value;
     this.internals.setValidity(
-      this.invalid ? { valueMissing: true } : {},
+      this.required && !this.value ? { valueMissing: true } : {},
       'Please select an option.',
       this,
     );
@@ -48,12 +46,10 @@ export class VoxRadioGroup extends VoxFieldElement {
   private syncRadios() {
     const radios = this.radios;
     const anyChecked = radios.some((r) => r.value === this.value && this.value !== '');
-    const firstEnabled = radios.find((r) => !r.disabled);
-    radios.forEach((radio) => {
+    radios.forEach((radio, index) => {
       radio.checked = this.value !== '' && radio.value === this.value;
-      // Roving tabindex: the checked radio is tabbable, else the first
-      // enabled one (a disabled radio can't receive focus at all).
-      const tabbable = anyChecked ? radio.checked : radio === firstEnabled;
+      // Roving tabindex: the checked radio is tabbable, else the first one.
+      const tabbable = anyChecked ? radio.checked : index === 0;
       radio.shadowRoot
         ?.querySelector('.radio')
         ?.setAttribute('tabindex', tabbable ? '0' : '-1');
@@ -93,14 +89,7 @@ export class VoxRadioGroup extends VoxFieldElement {
 
   render() {
     return html`
-      <div
-        class="field"
-        role="radiogroup"
-        aria-label=${this.label || nothing}
-        aria-describedby=${ifDefined(this.noteId)}
-        aria-invalid=${this.invalid ? 'true' : 'false'}
-        aria-required=${this.required ? 'true' : 'false'}
-      >
+      <div class="field" role="radiogroup" aria-label=${this.label}>
         ${this.label
           ? html`<span class="label">
               ${this.label}${this.required

package/src/components/select/vox-select.ts

@@ -1,6 +1,5 @@
 import { html, css } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
 import { VoxFieldElement, fieldStyles } from '../../internal/field.js';
 
 /**
@@ -74,8 +73,6 @@ export class VoxSelect extends VoxFieldElement {
           class="control"
           ?required=${this.required}
           ?disabled=${this.disabled}
-          aria-describedby=${ifDefined(this.noteId)}
-          aria-invalid=${this.invalid ? 'true' : 'false'}
           @change=${this.handleChange}
         ></select>
         ${this.renderNote()}

package/src/components/sidenav/vox-sidenav.ts

@@ -94,14 +94,12 @@ export class VoxSidenav extends LitElement {
     super.connectedCallback();
     document.addEventListener('click', this.handleOutsideClick);
     this.addEventListener('keydown', this.handleKeydown);
-    this.addEventListener('focusout', this.handleFocusOut);
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
     document.removeEventListener('click', this.handleOutsideClick);
     this.removeEventListener('keydown', this.handleKeydown);
-    this.removeEventListener('focusout', this.handleFocusOut);
   }
 
   private handleOutsideClick = (event: MouseEvent) => {
@@ -110,14 +108,6 @@ export class VoxSidenav extends LitElement {
     }
   };
 
-  /** Close the mobile menu once focus tabs past its last item. */
-  private handleFocusOut = (event: FocusEvent) => {
-    const next = event.relatedTarget as Node | null;
-    if (this.mobileOpen && !(next && this.contains(next))) {
-      this.mobileOpen = false;
-    }
-  };
-
   private handleKeydown = (event: KeyboardEvent) => {
     if (event.key === 'Escape' && this.mobileOpen) {
       this.mobileOpen = false;
@@ -180,13 +170,9 @@ export class VoxSidenav extends LitElement {
  */
 @customElement('vox-sidenav-group')
 export class VoxSidenavGroup extends LitElement {
-  private static nextId = 0;
-
   @property() heading = '';
   @property({ type: Boolean, reflect: true }) open = false;
 
-  private readonly itemsId = `vox-sidenav-group-items-${VoxSidenavGroup.nextId++}`;
-
   static styles = css`
     :host {
       display: block;
@@ -254,7 +240,6 @@ export class VoxSidenavGroup extends LitElement {
       <button
         class="trigger"
         aria-expanded=${this.open ? 'true' : 'false'}
-        aria-controls=${this.itemsId}
         @click=${this.toggle}
       >
         ${this.heading}
@@ -262,7 +247,7 @@ export class VoxSidenavGroup extends LitElement {
           <path d="m9 6 6 6-6 6" />
         </svg>
       </button>
-      <div id=${this.itemsId} class="items"><slot></slot></div>
+      <div class="items"><slot></slot></div>
     `;
   }
 }

package/src/components/step-indicator/vox-step-indicator.ts

@@ -1,4 +1,4 @@
-import { LitElement, html, css, nothing } from 'lit';
+import { LitElement, html, css } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
 export type StepState = 'complete' | 'current' | 'upcoming';
@@ -122,15 +122,6 @@ export class VoxStep extends LitElement {
       font-weight: 600;
       color: var(--vox-color-text-1);
     }
-
-    .visually-hidden {
-      position: absolute;
-      width: 1px;
-      height: 1px;
-      overflow: hidden;
-      clip: rect(0 0 0 0);
-      white-space: nowrap;
-    }
   `;
 
   render() {
@@ -147,12 +138,7 @@ export class VoxStep extends LitElement {
               </svg>`
             : this.number}
         </span>
-        <span class="label">
-          ${this.label}
-          ${this.state !== 'current'
-            ? html`<span class="visually-hidden"> (${this.state})</span>`
-            : nothing}
-        </span>
+        <span class="label">${this.label}</span>
       </div>
     `;
   }

package/src/components/tabs/vox-tabs.ts

@@ -65,18 +65,11 @@ export class VoxTabs extends LitElement {
   }
 
   private handleKeydown(event: KeyboardEvent) {
-    const tabs = this.tabs;
-    if (event.key === 'Home' || event.key === 'End') {
-      event.preventDefault();
-      const target = tabs[event.key === 'Home' ? 0 : tabs.length - 1];
-      target.select();
-      target.focusTab();
-      return;
-    }
     const deltas: Record<string, number> = { ArrowRight: 1, ArrowLeft: -1 };
     const delta = deltas[event.key];
     if (!delta) return;
     event.preventDefault();
+    const tabs = this.tabs;
     const index = tabs.findIndex((t) => t.selected);
     const next = tabs[(index + delta + tabs.length) % tabs.length];
     next.select();
@@ -157,11 +150,9 @@ export class VoxTab extends LitElement {
   render() {
     return html`
       <button
-        id="tab-${this.panel}"
         class="tab"
         role="tab"
         aria-selected=${this.selected ? 'true' : 'false'}
-        aria-controls="panel-${this.panel}"
         tabindex=${this.selected ? '0' : '-1'}
         @click=${this.select}
       >
@@ -194,25 +185,10 @@ export class VoxTabPanel extends LitElement {
     :host([active]) {
       display: block;
     }
-
-    div:focus-visible {
-      outline: 2px solid var(--vox-color-brand-1);
-      outline-offset: 2px;
-      border-radius: var(--vox-radius-sm);
-    }
   `;
 
   render() {
-    return html`
-      <div
-        id="panel-${this.name}"
-        role="tabpanel"
-        aria-labelledby="tab-${this.name}"
-        tabindex="0"
-      >
-        <slot></slot>
-      </div>
-    `;
+    return html`<div role="tabpanel"><slot></slot></div>`;
   }
 }
 

package/src/components/textarea/vox-textarea.ts

@@ -59,8 +59,6 @@ export class VoxTextarea extends VoxFieldElement {
           ?required=${this.required}
           ?readonly=${this.readonly}
           ?disabled=${this.disabled}
-          aria-describedby=${ifDefined(this.noteId)}
-          aria-invalid=${this.invalid ? 'true' : 'false'}
           @input=${this.handleInput}
           @change=${this.handleChange}
         ></textarea>

package/src/index.ts

@@ -46,6 +46,7 @@ export { VoxBadge } from './components/badge/vox-badge.js';
 export { VoxCalendarTile } from './components/calendar-tile/vox-calendar-tile.js';
 export { VoxCallout } from './components/callout/vox-callout.js';
 export { VoxCard } from './components/card/vox-card.js';
+export { VoxCodeBlock } from './components/code-block/vox-code-block.js';
 export { VoxCtaBand } from './components/cta-band/vox-cta-band.js';
 export { VoxEmptyState } from './components/empty-state/vox-empty-state.js';
 export { VoxFooter, VoxFooterColumn } from './components/footer/vox-footer.js';
@@ -64,6 +65,7 @@ export { VoxTimeline, VoxTimelineItem } from './components/timeline/vox-timeline
 export type { IconName, IconSize } from './components/icon/vox-icon.js';
 export type { ButtonVariant, ButtonSize } from './components/button/vox-button.js';
 export type { CalloutVariant } from './components/callout/vox-callout.js';
+export type { CodeBlockLanguage } from './components/code-block/vox-code-block.js';
 export type { BadgeVariant } from './components/badge/vox-badge.js';
 export type { AlertVariant } from './components/alert/vox-alert.js';
 export type { AvatarSize } from './components/avatar/vox-avatar.js';

package/src/internal/field.ts

@@ -1,5 +1,5 @@
 import { LitElement, html, css, nothing } from 'lit';
-import { property, state } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 
 /**
  * Shared base for form-associated VoxBlocks controls. Uses ElementInternals
@@ -10,9 +10,6 @@ export class VoxFieldElement extends LitElement {
 
   protected internals: ElementInternals;
 
-  /** Whether the control currently fails validation; drives `aria-invalid`. */
-  @state() protected invalid = false;
-
   @property() name = '';
   @property() label = '';
   @property() note = '';
@@ -49,7 +46,6 @@ export class VoxFieldElement extends LitElement {
     inner: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement,
   ) {
     this.internals.setValidity(inner.validity, inner.validationMessage, inner);
-    this.invalid = !inner.validity.valid;
   }
 
   protected renderLabel(forId: string) {
@@ -63,13 +59,8 @@ export class VoxFieldElement extends LitElement {
     `;
   }
 
-  /** `note`'s id when present, for `aria-describedby` on the native control. */
-  protected get noteId(): string | undefined {
-    return this.note ? 'note' : undefined;
-  }
-
   protected renderNote() {
-    return this.note ? html`<p class="note" id="note">${this.note}</p>` : nothing;
+    return this.note ? html`<p class="note">${this.note}</p>` : nothing;
   }
 }
 
@@ -128,15 +119,6 @@ export const fieldStyles = css`
     box-shadow: 0 0 0 3px var(--vox-color-brand-soft);
   }
 
-  .control[aria-invalid='true'] {
-    border-color: var(--vox-color-danger-1);
-  }
-
-  .control[aria-invalid='true']:focus {
-    border-color: var(--vox-color-danger-1);
-    box-shadow: 0 0 0 3px var(--vox-color-danger-soft);
-  }
-
   /* Corner flattening when placed inside a <vox-input-group>. */
   :host([data-vox-group]) .control {
     border-radius: 0;

package/src/tokens/tokens.css

@@ -29,10 +29,19 @@
   --vox-color-warning-1: #915930;
   --vox-color-warning-soft: rgba(234, 179, 8, 0.14);
   --vox-color-danger-1: #b8272c;
-  --vox-color-danger-2: #c9333a;
-  --vox-color-danger-3: #d5393e;
+  --vox-color-danger-2: #d5393e;
+  --vox-color-danger-3: #e0575b;
   --vox-color-danger-soft: rgba(244, 63, 94, 0.14);
 
+  /* Code syntax highlighting — one palette hue per token role */
+  --vox-code-comment: var(--vox-palette-gray-700);
+  --vox-code-keyword: var(--vox-palette-purple-700);
+  --vox-code-string: var(--vox-palette-green-800);
+  --vox-code-number: var(--vox-palette-gold-800);
+  --vox-code-function: var(--vox-palette-blue-700);
+  --vox-code-property: var(--vox-palette-teal-800);
+  --vox-code-tag: var(--vox-palette-red-700);
+
   /* Surfaces */
   --vox-color-bg: #f5faf9;
   --vox-color-bg-alt: #e8f1ef;
@@ -42,12 +51,12 @@
   /* Text */
   --vox-color-text-1: #12262c;
   --vox-color-text-2: #4c6469;
-  --vox-color-text-3: #5c7377;
+  --vox-color-text-3: #86999c;
   --vox-color-text-inverse: #ffffff;
 
   /* Lines */
   --vox-color-divider: rgba(18, 38, 44, 0.12);
-  --vox-color-border: rgba(18, 38, 44, 0.55);
+  --vox-color-border: rgba(18, 38, 44, 0.28);
 
   /* Typography */
   --vox-font-family-base: 'Inter', ui-sans-serif, system-ui, -apple-system,
@@ -92,10 +101,18 @@
   --vox-color-warning-1: #f9b44e;
   --vox-color-warning-soft: rgba(234, 179, 8, 0.16);
   --vox-color-danger-1: #f66f81;
-  --vox-color-danger-2: #d13b52;
+  --vox-color-danger-2: #f14158;
   --vox-color-danger-3: #b62a3c;
   --vox-color-danger-soft: rgba(244, 63, 94, 0.16);
 
+  --vox-code-comment: var(--vox-palette-gray-400);
+  --vox-code-keyword: var(--vox-palette-purple-300);
+  --vox-code-string: var(--vox-palette-green-400);
+  --vox-code-number: var(--vox-palette-gold-400);
+  --vox-code-function: var(--vox-palette-blue-300);
+  --vox-code-property: var(--vox-palette-teal-400);
+  --vox-code-tag: var(--vox-palette-red-300);
+
   --vox-color-bg: #0d1417;
   --vox-color-bg-alt: #131b1f;
   --vox-color-bg-soft: #131b1f;
@@ -103,11 +120,11 @@
 
   --vox-color-text-1: #dff3f0;
   --vox-color-text-2: #9fb8bb;
-  --vox-color-text-3: #88999c;
+  --vox-color-text-3: #5f7275;
   --vox-color-text-inverse: #ffffff;
 
   --vox-color-divider: rgba(159, 184, 187, 0.24);
-  --vox-color-border: rgba(159, 184, 187, 0.6);
+  --vox-color-border: rgba(159, 184, 187, 0.5);
 
   --vox-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.24);
   --vox-shadow-2: 0 3px 12px rgba(0, 0, 0, 0.26), 0 1px 4px rgba(0, 0, 0, 0.26);