@adobe/spectrum-design-data 3.3.0-beta.1 → 3.3.0

package/components/tree-view.json

@@ -9,6 +9,13 @@
     "category": "navigation",
     "documentationUrl": "https://spectrum.adobe.com/page/tree-view/"
   },
+  "implementations": [
+    {
+      "platform": "web",
+      "componentName": "TreeView",
+      "package": "@react-spectrum/s2"
+    }
+  ],
   "documentBlocks": [
     {
       "type": "purpose",
@@ -16,99 +23,123 @@
     },
     {
       "type": "guideline",
-      "content": "Collapse and expand.\n\nClicking the collapse and expand button will expand or collapse a tree view item that contains child tree view items."
+      "content": "Tree views display nested, hierarchical content in a collapsible structure. They allow for navigation through multiple levels of grouped information."
+    },
+    {
+      "type": "guideline",
+      "content": "A tree view offers four sizes: small, medium, large and extra-large. Medium is the default and most common. Use other sizes sparingly to create a visual hierarchy of importance on the page."
+    },
+    {
+      "type": "guideline",
+      "content": "When placed outside a panel, a tree view uses the detached style with rounded corners. Inside a panel, it spans edge to edge by default and does not include rounded corners."
+    },
+    {
+      "type": "guideline",
+      "content": "Tree view items can include a drag icon when needed. The icon serves as a keyboard-navigable indicator for items that support multiple actions. It appears only on hover, active and keyboard focus states."
     },
     {
       "type": "guideline",
-      "content": "Drag and drop.\n\nTree view items can be dragged and dropped to reorder or restructure the hierarchy, including multiple items at once. Dropping items from different hierarchies into a new location flattens them as sibling children. Tree views should also accept external drops, such as files, to create new items. Drag icon focus: When this option is enabled, the drag icon receives keyboard focus to support keyboard-based drag-and-drop."
+      "content": "The type of selection allowed in a collection can be none, single or multiple."
     },
     {
       "type": "guideline",
-      "content": "Text overflow.\n\nWhen a tree view item label is too long for the available horizontal space, it truncates. The full label appears in a tooltip on hover or keyboard focus."
+      "content": "Checkbox With checkboxes, both single-select and multi-select views display boxes on the left of each item. Clicking another item adds it to the selection, and clicking a selected item removes it."
     },
     {
       "type": "guideline",
-      "content": "Always display the collapse and expand button.\n\nFor proper functionality, a parent-level tree view must include a collapse-and-expand button that uses a chevron icon - regardless of its nesting level. This makes the expected behavior clear when users click an item icon."
+      "content": "Highlight Use highlight selection when checkboxes add clutter or unnecessary controls. This style shows a highlighted state for selected items, and clicking a new item replaces the previous selection by default."
     },
     {
       "type": "guideline",
-      "content": "Using multiple sources in one tree view.\n\nWhen displaying hierarchical information from different sources, use a single tree view with separate sections and headings. Do not cross-reference sources to avoid confusing users. Single and multi-selection should work as expected within one tree view component."
+      "content": "All tree views have a hover state, regardless of whether actions or selections can be made."
     },
     {
       "type": "guideline",
-      "content": "Customize the root item display.\n\nThe root (topmost) level of the hierarchy does not always need to be shown or displayed as a tree view item. If the root provides no useful context, hide it or replace it with a section header. In cases such as mixed tree views, the root can serve as a \"Back\" button."
+      "content": "Tree views support both single-select and multi-select modes, using either checkbox or highlight styles. In multi-select mode, selecting an item toggles its selection on or off. In single-select mode, selecting an item replaces the current selection."
     },
     {
       "type": "guideline",
-      "content": "Drill-in tree views.\n\nIn some cases, users may need to view different hierarchies depending on context. To support this, let users drill into a tree view item to display a different variation of the tree view within the same panel. Use a navigation controller with a \"Back\" button to let users return to the previous view."
+      "content": "Clicking the collapse and expand button will expand or collapse a tree view item that contains child tree view items."
     },
     {
       "type": "guideline",
-      "content": "Iconography.\n\nChoose icons that match the object type represented in the tree view. Icons can be unique to specific data types to help clarify meaning for users."
+      "content": "Tree view items can be dragged and dropped to reorder or restructure the hierarchy, including multiple items at once. Dropping items from different hierarchies into a new location flattens them as sibling children. Tree views should also accept external drops, such as files, to create new items."
     },
     {
       "type": "guideline",
-      "content": "Using thumbnails.\n\nTree view items can display thumbnails instead of icons when users need a content preview. Use icons as a fallback when an image is unavailable, and size them to match the thumbnail. Thumbnails should scale appropriately to the tree view size. For example, an extra-large tree view should not use small thumbnails; in that case, icons may work better. Multiple thumbnails may be displayed in line with a tree view item (for example, layer masks). Each thumbnail should be individually selectable and support standard tree view behaviors, including drag-and-drop. Do not use more than three thumbnails per item."
+      "content": "When a tree view item label is too long for the available horizontal space, it truncates. The full label appears in a tooltip on hover or keyboard focus."
     },
     {
       "type": "guideline",
-      "content": "Restrict hierarchy depth.\n\nOne way to manage overflow is to limit how many levels of hierarchy users can create in a tree view. Some products use this approach to reduce the complexity of deeply nested hierarchies. Setting limits helps when a complex hierarchy is unnecessary for the experience."
+      "content": "For proper functionality, a parent-level tree view must include a collapse-and-expand button that uses a chevron icon - regardless of its nesting level. This makes the expected behavior clear when users click an item icon."
     },
     {
       "type": "guideline",
-      "content": "Show truncated labels in tooltip.\n\nWhen a label is too long to fit in the tree view, it truncates with an ellipsis. Hovering over or focusing on the item reveals a tooltip with the full label text."
+      "content": "When displaying hierarchical information from different sources, use a single tree view with separate sections and headings. Do not cross-reference sources to avoid confusing users. Single and multi-selection should work as expected within one tree view component."
     },
     {
       "type": "guideline",
-      "content": "Use an adjustable layout.\n\nWhen a tree view hierarchy may extend beyond the available layout space, use an adjustable layout mechanism such as panels or rails. This lets users modify the layout while preserving visibility of the tree view."
+      "content": "The root (topmost) level of the hierarchy does not always need to be shown or displayed as a tree view item. If the root provides no useful context, hide it or replace it with a section header. In cases such as mixed tree views, the root can serve as a “Back” button."
     },
     {
       "type": "guideline",
-      "content": "Horizontal scrolling.\n\nIf you have a layout that doesn't allow for users to adjust the width of the container for a tree view, allow them to horizontally scroll in order to see the full depth of the hierarchy."
+      "content": "In some cases, users may need to view different hierarchies depending on context. To support this, let users drill into a tree view item to display a different variation of the tree view within the same panel. Use a navigation controller with a “Back” button to let users return to the previous view."
     },
     {
       "type": "guideline",
-      "content": "Large tree views.\n\nWhen tree views are very large, use a progress circle or a \"Show more\" control to reveal additional parts when contextually relevant. These loading patterns can apply to the entire tree view or to nested items."
+      "content": "Choose icons that match the object type represented in the tree view. Icons can be unique to specific data types to help clarify meaning for users."
     },
     {
       "type": "guideline",
-      "content": "Loading tree view items.\n\nIf system processes are delaying the display of child tree view items when a parent tree view item is expanded, show a clear indication that the items are in the process of loading."
+      "content": "Tree view items can display thumbnails instead of icons when users need a content preview. Use icons as a fallback when an image is unavailable, and size them to match the thumbnail. Thumbnails should scale appropriately to the tree view size. For example, an extra-large tree view should not use small thumbnails; in that case, icons may work better."
     },
     {
       "type": "guideline",
-      "content": "Sorting.\n\nUsers should be able to sort a tree view. Sorting should not affect the hierarchical structure since each layer of the hierarchy is sorted individually."
+      "content": "One way to manage overflow is to limit how many levels of hierarchy users can create in a tree view. Some products use this approach to reduce the complexity of deeply nested hierarchies. Setting limits helps when a complex hierarchy is unnecessary for the experience."
     },
     {
       "type": "guideline",
-      "content": "Modifying the tree view.\n\nUsers may need to modify a tree view directly. They should be able to create new parent or child items, such as groups or folders, and flatten the hierarchy at the item level, such as ungrouping layers. In some cases, users should be able to edit item labels directly. Any action for modifying the hierarchy should be offered as an explicit control and, if needed, as a keyboard shortcut — but never as a shortcut alone."
+      "content": "When a label is too long to fit in the tree view, it truncates with an ellipsis. Hovering over or focusing on the item reveals a tooltip with the full label text."
     },
     {
       "type": "guideline",
-      "content": "Entering into multiple selection mode.\n\nAllow users to enter multiple-selection mode explicitly when keyboard shortcuts such as Shift + click are unavailable or when you need to show a different selection type. Do this by toggling the selection style from highlight to checkbox."
+      "content": "When a tree view hierarchy may extend beyond the available layout space, use an adjustable layout mechanism such as panels or rails. This lets users modify the layout while preserving visibility of the tree view."
     },
     {
       "type": "guideline",
-      "content": "Use checkbox selection for modifying a tree view.\n\nThe checkbox selection style is intended for performing bulk actions on tree view items. Use this option when selection corresponds to bulk actions."
+      "content": "If you have a layout that doesn't allow for users to adjust the width of the container for a tree view, allow them to horizontally scroll in order to see the full depth of the hierarchy."
     },
     {
       "type": "guideline",
-      "content": "Use a checkbox component when selection doesn't affect tree view items.\n\nWhen you need to provide selection controls within a hierarchy, use a checkbox component instead of the tree view item's label. This should not correspond to selecting specific content and works best for cases like categorized filtering."
+      "content": "When tree views are very large, use a progress circle or a “Show more” control to reveal additional parts when contextually relevant. These loading patterns can apply to the entire tree view or to nested items."
     },
     {
       "type": "guideline",
-      "content": "RTL.\n\nFor RTL (right-to-left) languages, the entire tree view is mirrored horizontally, including the direction of the collapse and expand button. Workflow icons follow iconography internationalization guidelines."
+      "content": "If system processes are delaying the display of child tree view items when a parent tree view item is expanded, show a clear indication that the items are in the process of loading."
     },
     {
       "type": "guideline",
-      "content": "Keyboard interactions.\n\nKey Interaction TabMoves focus to the tree view, placing the first tree view item in focus.Shift + TabMoves focus out of the tree view to the previous focusable element.Down ArrowMoves focus to the tree view item below or to the next thumbnail of a tree view item.Up ArrowMoves focus to the tree view item above or to the previous thumbnail of a tree view item.Enter or SpaceSelects the currently focused tree view item. If focus is on a child of the tree view item, subsequent action is based on the child component’s keyboard interactions. For the drag icon, this places the user in drag-and-drop mode.Right Arrow (Left Arrow in RTL)Expands the currently focused tree view item. If the tree view item is already expanded, or if the tree view item is not expandable, focus is moved in a left-to-right direction along child components. If focus is on the rightmost child of the tree view item, focus does not move.Left Arrow (Right Arrow in RTL)Collapses the currently focused tree view item. If focus is on a child of the tree view item, focus is moved in a right-to-left direction along child components. If focus is on the leftmost child of the tree view item, focus is placed back on the parent tree view item.HomeMoves focus to the first item in the tree view without opening or closing a level.EndMoves focus to the last item in the tree view that is focusable without opening a level.Cmd + [ (optional)Moves the currently selected item up in the view order.Cmd + ] (optional)Moves the currently selected item down in the view order.Cmd + Z (optional)Undoes the action most recently taken, such as after the user drags and drops, reorders, or performs an action on a tree view item.Cmd + G (optional)Groups the selected tree view item(s) into a new parent tree view item.Shift + Cmd + G (optional)Ungroups or removes the selected parent tree view item, placing its children at the same level of hierarchy as the removed items.Printable charactersTypeahead: moves focus to next node matching typed text.* (optional)Expands all sibling nodes at the same level."
+      "content": "Users should be able to sort a tree view. Sorting should not affect the hierarchical structure since each layer of the hierarchy is sorted individually."
     },
     {
       "type": "guideline",
-      "content": "Cursor guidelines.\n\nCursor Description Default (Arrow)Use the default arrow cursor for non-interactive headers and disabled text.PointerUse the pointer cursor for all interactive pieces of the tree view component.Grab handUse the grab hand on the drag handle when tree view objects can be moved.Grab fistUse the grab fist cursor when actively dragging tree items."
+      "content": "Users may need to modify a tree view directly. They should be able to create new parent or child items, such as groups or folders, and flatten the hierarchy at the item level, such as ungrouping layers. In some cases, users should be able to edit item labels directly."
     },
     {
       "type": "guideline",
-      "content": "WCAG 2.2 compliance.\n\nAny criterion not mention in the below table are not applicable to this component or are resolved with underlying requirements, engineering, and styles of the entire system. 1. Perceivable Requirement Criterion Level Compliance Non-text content 1.1.1 ANon-text elements, such as icons used in tree view items, must provide a text alternative that communicates the item's purpose. All tree items, especially icon-only items, need an accessible name (for example, via a title, aria-label, or associated text) so screen readers can announce their function.Info and relationships, Identify purpose 1.3.1, 1.3.6 A, AAATree views should be understandable by assistive technologies like screen readers. This means using the proper semantic HTML or ARIA role should be utilized, including parent/child relationships, expanded/collapsed states, and selection states.Use of color 1.4.1 AColor is not used as a means to convey information or distinguish elements.Contrast 1.4.3 AAThe visual presentation of text has a contrast ratio of at least 4.5:1.Visual presentation 1.4.8 AAAThe width of text blocks is no more than 80 characters (40 for CJK languages), and text is never justified.Non-text contrast 1.4.11 AAThe visual presentation of icons and component states have a contrast ratio of at least 3:1.Text spacing 1.4.12 AALine height of text is at least 1.5x the font size. 2. Operable RequirementCriterionLevel Compliance Keyboard 2.1.1, 2.1.3 A, AAAAll functionality of the component is operable through a keyboard without specific timing for keystrokes.Keyboard traps 2.1.2 AFocus can be moved away from the component using only a keyboard.Seizures and physical reactions 2.3.1, 2.3.2, 2.3.3 A, AAA, AAAThere is no flashing content or unnecessary motion or animation in this component.Focus order 2.4.3 ANavigation sequences receive focus in an order that preserves meaning and operability.Focus visible 2.4.7 AAKeyboard states use an indicator that is visible with at least 3:1 contrast."
+      "content": "Any action for modifying the hierarchy should be offered as an explicit control and, if needed, as a keyboard shortcut — but never as a shortcut alone."
+    },
+    {
+      "type": "guideline",
+      "content": "Allow users to enter multiple-selection mode explicitly when keyboard shortcuts such as Shift + click are unavailable or when you need to show a different selection type. Do this by toggling the selection style from highlight to checkbox."
+    },
+    {
+      "type": "guideline",
+      "content": "The checkbox selection style is intended for performing bulk actions on tree view items. Use this option when selection corresponds to bulk actions."
+    },
+    {
+      "type": "guideline",
+      "content": "When you need to provide selection controls within a hierarchy, use a checkbox component instead of the tree view item’s label. This should not correspond to selecting specific content and works best for cases like categorized filtering."
     }
   ],
   "options": {
@@ -116,29 +147,67 @@
       "type": "string",
       "default": "m",
       "values": [
-        { "value": "s" },
-        { "value": "m" },
-        { "value": "l" },
-        { "value": "xl" }
+        {
+          "value": "s"
+        },
+        {
+          "value": "m"
+        },
+        {
+          "value": "l"
+        },
+        {
+          "value": "xl"
+        }
       ]
     },
-    "isDetached": { "type": "boolean", "default": false },
-    "isEmphasized": { "type": "boolean", "default": false },
-    "showDragIcon": { "type": "boolean", "default": false },
+    "isDetached": {
+      "type": "boolean",
+      "default": false
+    },
+    "isEmphasized": {
+      "type": "boolean",
+      "default": false
+    },
+    "showDragIcon": {
+      "type": "boolean",
+      "default": false
+    },
     "selectionMode": {
       "type": "string",
       "default": "multiple",
-      "values": [{ "value": "single" }, { "value": "multiple" }]
+      "values": [
+        {
+          "value": "single"
+        },
+        {
+          "value": "multiple"
+        }
+      ]
     },
     "selectionStyle": {
       "type": "string",
       "default": "checkbox",
-      "values": [{ "value": "checkbox" }, { "value": "highlight" }]
+      "values": [
+        {
+          "value": "checkbox"
+        },
+        {
+          "value": "highlight"
+        }
+      ]
     },
     "selectionBehavior": {
       "type": "string",
       "default": "toggle",
-      "values": [{ "value": "toggle" }, { "value": "replace" }]
+      "values": [
+        {
+          "value": "toggle"
+        },
+        {
+          "value": "replace"
+        }
+      ]
     }
   },
   "anatomy": [
@@ -146,30 +215,63 @@
       "name": "action-area",
       "description": "Trailing area containing item actions."
     },
-    { "name": "row" },
+    {
+      "name": "row"
+    },
     {
       "name": "disclosure-indicator",
       "description": "Visual affordance showing a tree view item's expand/collapse state."
     }
   ],
   "states": [
-    { "name": "default", "description": "Resting base state." },
-    { "name": "hover", "trigger": "interaction" },
-    { "name": "down", "trigger": "interaction" },
-    { "name": "keyboard-focus", "trigger": "interaction" },
-    { "name": "selected", "trigger": "interaction" },
-    { "name": "selected-default", "trigger": "interaction" },
-    { "name": "selected-hover", "trigger": "interaction" }
+    {
+      "name": "default",
+      "description": "Resting base state."
+    },
+    {
+      "name": "hover",
+      "trigger": "interaction"
+    },
+    {
+      "name": "down",
+      "trigger": "interaction"
+    },
+    {
+      "name": "keyboard-focus",
+      "trigger": "interaction"
+    },
+    {
+      "name": "selected",
+      "trigger": "interaction"
+    },
+    {
+      "name": "selected-default",
+      "trigger": "interaction"
+    },
+    {
+      "name": "selected-hover",
+      "trigger": "interaction"
+    }
   ],
-  "lifecycle": { "introduced": "1.0.0-draft" },
+  "lifecycle": {
+    "introduced": "1.0.0-draft"
+  },
   "accessibility": {
     "role": "tree",
     "intents": ["navigate", "select", "expand"],
     "focusable": true,
     "keyboardIntents": ["navigate-items", "expand", "collapse", "activate"],
     "wcag": [
-      { "criterion": "2.1.1", "level": "A", "title": "Keyboard" },
-      { "criterion": "4.1.2", "level": "A", "title": "Name, Role, Value" }
+      {
+        "criterion": "2.1.1",
+        "level": "A",
+        "title": "Keyboard"
+      },
+      {
+        "criterion": "4.1.2",
+        "level": "A",
+        "title": "Name, Role, Value"
+      }
     ]
   }
 }

package/components/user-card.json

@@ -10,5 +10,12 @@
     "documentationUrl": "https://spectrum.adobe.com/page/user-card/"
   },
   "anatomy": [{ "name": "title" }],
+  "implementations": [
+    {
+      "platform": "web",
+      "componentName": "UserCard",
+      "package": "@react-spectrum/s2"
+    }
+  ],
   "lifecycle": { "introduced": "1.0.0-draft" }
 }

package/guidelines/app-frame-content-area.json

@@ -0,0 +1,81 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/guideline.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/guidelines/app-frame-content-area.json",
+  "name": "app-frame-content-area",
+  "title": "App frame content area (browsing context)",
+  "category": "designing",
+  "documentBlocks": [
+    {
+      "type": "purpose",
+      "content": "App frame content area (browsing context)"
+    },
+    {
+      "type": "guideline",
+      "content": "This layout is suitable when all content is related and unified by the primary purpose of the page. This single section can be subdivided using full-width dividers, or by creating visual groupings of content using proximity and spacing."
+    },
+    {
+      "type": "guideline",
+      "content": "Dividers are useful to separate content when using spacing alone wouldn’t be clear enough to mark the boundaries of distinct areas. Generally, more complex content with a varying alignment of objects will benefit the most from using a divider."
+    },
+    {
+      "type": "guideline",
+      "content": "The top section can also be useful to visually indicate that the content is separate and has additional affordances, such as the ability to be minimized. For example, “welcome” type content might be shown in the top section, and recent files might be shown below."
+    },
+    {
+      "type": "guideline",
+      "content": "When using horizontal sections, the page should scroll as a single unit. Consider other ways to minimize the top section if needed, such as through an additional control to show and hide content."
+    },
+    {
+      "type": "guideline",
+      "content": "The top section of a horizontal layout should be reserved for high-attention marketing messages or quick actions, and it should not be scrollable. Put infinite scrolling and longer content in the bottom section."
+    },
+    {
+      "type": "guideline",
+      "content": "This layout is suitable to separate content that’s not semantically related, and if one of the content areas can be minimized. For example, this might apply for onboarding tutorials, or to include an AI assistant."
+    },
+    {
+      "type": "guideline",
+      "content": "This layout is suitable to separate multiple groups of content that aren’t semantically related. For example, this could show several widgets and distinct marketing messages. This layout can also be useful if a user is able to customize the page."
+    },
+    {
+      "type": "guideline",
+      "content": "Make sure to consider smaller breakpoints and decide how content areas should reflow, hide, or combine. In general, show the most important information at the top, and if possible, then progressively disclose the not-as-important information."
+    },
+    {
+      "type": "guideline",
+      "content": "Backgrounds that use gradients are always placed within the app frame intentionally and with a strategic meaning. They should contribute to the visual hierarchy, not distract from it. And, their colors are directly tied to product brand color palettes."
+    },
+    {
+      "type": "guideline",
+      "content": "For example, on a Home screen, gradient backgrounds might call attention to new AI features in the product. On a Learn screen, gradient backgrounds might call attention to tutorials from new creators. On a Files screen, gradient backgrounds might not be used at all in order to focus attention on asset previews. In any context, consider where you want to draw attention and what you want to highlight for the user, what the user’s intentions might be, and how gradient backgrounds may add or detract from the goals of the page."
+    },
+    {
+      "type": "guideline",
+      "content": "While there isn’t an objective scale for each style, it can be helpful to think about backgrounds in terms of how much attention they draw, on a scale of low-to-high."
+    },
+    {
+      "type": "guideline",
+      "content": "While you may have seen past Spectrum 2 explorations showing gradients as the background in header and navigational areas, they should not be used in that context. This is because gradients that appear in the navigation of every page distract from more important information on the page, clash with other imagery, and might not work for some product segments."
+    },
+    {
+      "type": "guideline",
+      "content": "By using gradients in the content areas as backgrounds instead, there’s more flexibility to direct attention to different content and messages, depending on what’s important in the context of that page or workflow."
+    },
+    {
+      "type": "guideline",
+      "content": "Gradients are used to draw attention to important content and features. They can be used in the background of content areas. Using gradients in more than one content area results in multiple areas competing for attention. This is distracting from the task-at-hand workflows on the page."
+    },
+    {
+      "type": "guideline",
+      "content": "Gradients should always be delivered directly from the Spectrum Brand team and used as-is. Do not modify them."
+    }
+  ],
+  "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/app-frame-content-area/",
+  "lastUpdated": "2026-02-02",
+  "status": "published",
+  "tags": ["designing"],
+  "related": [
+    { "ref": "s2-app-frame-side-navigation-browsing-context" },
+    { "ref": "s2-app-frame-creating-bluelines-browsing-context" }
+  ]
+}

package/guidelines/app-frame-creating-bluelines.json

@@ -0,0 +1,58 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/guideline.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/guidelines/app-frame-creating-bluelines.json",
+  "name": "app-frame-creating-bluelines",
+  "title": "Creating bluelines (browsing context)",
+  "category": "designing",
+  "documentBlocks": [
+    { "type": "purpose", "content": "Creating bluelines (browsing context)" },
+    {
+      "type": "guideline",
+      "content": "Accessible names vary depending on the content. Accessible names must be defined for controls that don’t have visible text labels."
+    },
+    {
+      "type": "guideline",
+      "content": "Here are some guidelines to keep in mind as you define accessible names in the app frame:"
+    },
+    {
+      "type": "guideline",
+      "content": "Any non-text element in a digital interface with a text label must have a text alternative. Here’s an example of how you might name landmark regions in an app frame:"
+    },
+    {
+      "type": "guideline",
+      "content": "Here’s an example of how you might structure heading annotations for this screen:"
+    },
+    {
+      "type": "guideline",
+      "content": "Keyboard focus order will depend on what controls are available on the page. Here’s an example of how you might define the order in the app frame:"
+    },
+    {
+      "type": "guideline",
+      "content": "Example of correct usage, support for keyboard focus for size navigation. The side navigation width is focusable and resizable by using the left and right arrow keys."
+    },
+    {
+      "type": "guideline",
+      "content": "Example of correct usage, inclusion of a Skip to main content button within the app frame header."
+    },
+    {
+      "type": "guideline",
+      "content": "When properly supported, the F6 key allows keyboard users to navigate through different regions of an application efficiently. Without this support, keyboard-only users have no means to jump to specific areas of the application, resulting in an excessive number of keystrokes to reach their desired goal."
+    },
+    {
+      "type": "guideline",
+      "content": "Here are some key quality factors to consider:"
+    },
+    {
+      "type": "guideline",
+      "content": "For mobile breakpoints, a tray is used to open and close the app frame side navigation. In this example, the keyboard focus order starts at the “Create” button and ends at the close button. Clicking on esc should also close the tray."
+    }
+  ],
+  "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/app-frame-creating-bluelines/",
+  "lastUpdated": "2026-02-02",
+  "status": "published",
+  "tags": ["designing"],
+  "related": [
+    { "ref": "s2-app-frame-content-area-browsing-context" },
+    { "ref": "brand" }
+  ]
+}

package/guidelines/app-frame-header.json

@@ -0,0 +1,72 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/v0/guideline.schema.json",
+  "$id": "https://opensource.adobe.com/spectrum-design-data/guidelines/app-frame-header.json",
+  "name": "app-frame-header",
+  "title": "App frame header (browsing context)",
+  "category": "designing",
+  "documentBlocks": [
+    { "type": "purpose", "content": "App frame header (browsing context)" },
+    {
+      "type": "guideline",
+      "content": "There are several parts of the header that are consistent across all Adobe products:"
+    },
+    {
+      "type": "guideline",
+      "content": "Shows a hamburger button on the far left of the header. This controls whether the minimized style of the side navigation (partial/full)."
+    },
+    { "type": "guideline", "content": "Shows navigation items in the header." },
+    { "type": "guideline", "content": "Shows a search option in the header." },
+    {
+      "type": "guideline",
+      "content": "Defines the style of the search option that's shown."
+    },
+    {
+      "type": "guideline",
+      "content": "The “skip to main content” button helps improve keyboard navigation by creating a shortcut to the main content of the page. This button is an accessibility feature to allow skipping to the first navigable HTML item."
+    },
+    {
+      "type": "guideline",
+      "content": "Shows an icon to represent the header navigation item."
+    },
+    {
+      "type": "guideline",
+      "content": "The text that is displayed as the label of the header navigation item."
+    },
+    {
+      "type": "guideline",
+      "content": "Presents the header side navigation as selected or not selected."
+    },
+    {
+      "type": "guideline",
+      "content": "Changes the header navigation item to the disabled state."
+    },
+    {
+      "type": "guideline",
+      "content": "Shows a chevron next to the label that indicates an additional menu."
+    },
+    {
+      "type": "guideline",
+      "content": "The text that is displayed as the label of the tooltip."
+    },
+    {
+      "type": "guideline",
+      "content": "As a general rule, only use one call-to-action (CTA) button, aside from any buttons used to log in or log out, as defined in the universal nav. When too many CTAs are shown at once, the messages compete for attention and dilute the ability for a focused attention hierarchy."
+    },
+    {
+      "type": "guideline",
+      "content": "If there are multiple actions, consider combining them into a single menu or use other button types. The button should represent the most important CTA across the product; for example, “Share” and “Get desktop app” are common CTAs."
+    },
+    {
+      "type": "guideline",
+      "content": "Diagram with notes about the app frame header in the editing context. If there’s a menu represented by a hamburger icon, such as the application menu in Creative Cloud, it should be shown to the left of the product logo for continuity with the browsing context. The product name can be hidden in the editing context in order to provide more room for other actions. The height of the header should be the same as in the browsing context (56 px)."
+    }
+  ],
+  "sourceUrl": "https://s2.spectrum.corp.adobe.com/page/app-frame-header/",
+  "lastUpdated": "2026-02-02",
+  "status": "published",
+  "tags": ["designing"],
+  "related": [
+    { "ref": "s2-app-frame" },
+    { "ref": "s2-app-frame-side-navigation-browsing-context" }
+  ]
+}