@adobe/design-system-registry 0.0.0-layout-20260209174611

package/registry/navigation-terms.json

@@ -0,0 +1,241 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/registry-value.json",
+  "type": "navigation-term",
+  "description": "Navigation-specific terminology for app frame and navigation components",
+  "values": [
+    {
+      "id": "side-navigation",
+      "label": "Side Navigation",
+      "aliases": ["side nav", "sidebar navigation"],
+      "description": "A navigation panel typically positioned on the left side of an application",
+      "usedIn": ["component-schemas", "anatomy"],
+      "definition": {
+        "superordinate": "navigation pattern",
+        "description": "A vertical panel containing navigation items, typically positioned on the left side of an application interface",
+        "essentialCharacteristics": [
+          "Provides persistent or collapsible access to main application sections",
+          "Can be resizable with drag functionality",
+          "Contains hierarchical navigation items",
+          "May include a state control (hamburger menu) to show/hide labels"
+        ]
+      },
+      "sources": [
+        {
+          "type": "wiki",
+          "reference": "App frame (browsing) CRD",
+          "url": "https://wiki.corp.adobe.com/pages/viewpage.action?pageId=3364319543",
+          "date": "2025-01-12"
+        }
+      ],
+      "governance": {
+        "owner": "Spectrum Core Team",
+        "reviewDate": "2025-01-12",
+        "status": "approved"
+      },
+      "relatedTerms": ["side-navigation-item", "navigation-item", "drag-area"]
+    },
+    {
+      "id": "side-navigation-item",
+      "label": "Side Navigation Item",
+      "aliases": ["side nav item"],
+      "description": "An individual item within side navigation",
+      "usedIn": ["component-schemas", "anatomy"],
+      "definition": {
+        "superordinate": "navigation element",
+        "description": "A clickable item within side navigation that represents a destination or section in the application",
+        "essentialCharacteristics": [
+          "Can be selected to indicate current location",
+          "Supports interaction states (default, hover, down, keyboard focus, disabled, selected, dragged, error)",
+          "May include an icon and label",
+          "Label may be hidden when side navigation is minimized"
+        ]
+      },
+      "sources": [
+        {
+          "type": "wiki",
+          "reference": "App frame (browsing) CRD",
+          "url": "https://wiki.corp.adobe.com/pages/viewpage.action?pageId=3364319543",
+          "date": "2025-01-12"
+        }
+      ],
+      "governance": {
+        "owner": "Spectrum Core Team",
+        "reviewDate": "2025-01-12",
+        "status": "approved"
+      },
+      "relatedTerms": ["side-navigation", "navigation-item"]
+    },
+    {
+      "id": "header",
+      "label": "Header",
+      "aliases": ["app header", "top bar"],
+      "description": "The top bar of an application frame",
+      "usedIn": ["component-schemas", "anatomy"],
+      "definition": {
+        "superordinate": "application frame component",
+        "description": "A horizontal bar at the top of an application that contains branding, navigation, and utility functions",
+        "essentialCharacteristics": [
+          "Spans the full width of the application",
+          "May contain header navigation items",
+          "Typically includes application branding or title",
+          "May include utility controls (search, settings, user profile)"
+        ]
+      },
+      "sources": [
+        {
+          "type": "wiki",
+          "reference": "App frame (browsing) CRD",
+          "url": "https://wiki.corp.adobe.com/pages/viewpage.action?pageId=3364319543",
+          "date": "2025-01-12"
+        }
+      ],
+      "governance": {
+        "owner": "Spectrum Core Team",
+        "reviewDate": "2025-01-12",
+        "status": "approved"
+      },
+      "relatedTerms": ["header-navigation-item", "side-navigation"]
+    },
+    {
+      "id": "header-navigation-item",
+      "label": "Header Navigation Item",
+      "description": "An individual navigation item within the header",
+      "usedIn": ["component-schemas", "anatomy"],
+      "definition": {
+        "superordinate": "navigation element",
+        "description": "A clickable item within the header that represents a destination or action",
+        "essentialCharacteristics": [
+          "Positioned horizontally within the header",
+          "Can be selected to indicate current location",
+          "Supports interaction states (default, hover, down, keyboard focus, disabled, selected)",
+          "Typically more compact than side navigation items"
+        ]
+      },
+      "sources": [
+        {
+          "type": "wiki",
+          "reference": "App frame (browsing) CRD",
+          "url": "https://wiki.corp.adobe.com/pages/viewpage.action?pageId=3364319543",
+          "date": "2025-01-12"
+        }
+      ],
+      "governance": {
+        "owner": "Spectrum Core Team",
+        "reviewDate": "2025-01-12",
+        "status": "approved"
+      },
+      "relatedTerms": ["header", "navigation-item", "side-navigation-item"]
+    },
+    {
+      "id": "navigation-item",
+      "label": "Navigation Item",
+      "aliases": ["nav item"],
+      "description": "A generic term for clickable navigation elements",
+      "usedIn": ["component-schemas", "tokens"],
+      "definition": {
+        "superordinate": "user interface element",
+        "description": "A clickable element that allows users to navigate to different sections or pages within an application",
+        "essentialCharacteristics": [
+          "Provides a destination or target location",
+          "Can be selected to show current location",
+          "Supports standard interaction states",
+          "May be part of various navigation patterns (side, top, breadcrumb, etc.)"
+        ]
+      },
+      "terminology": {
+        "conceptType": "term",
+        "namingRationale": "Generic term used across all navigation contexts in Spectrum"
+      },
+      "sources": [
+        {
+          "type": "industry-standard",
+          "reference": "Common navigation terminology",
+          "date": "2025-01-12"
+        }
+      ],
+      "governance": {
+        "owner": "Spectrum Core Team",
+        "reviewDate": "2025-01-12",
+        "status": "approved"
+      },
+      "relatedTerms": ["side-navigation-item", "header-navigation-item"]
+    },
+    {
+      "id": "drag-area",
+      "label": "Drag Area",
+      "description": "An area that can be dragged to resize the side navigation panel",
+      "usedIn": ["component-schemas", "anatomy"],
+      "definition": {
+        "superordinate": "interactive control",
+        "description": "A focusable area along the edge of the side navigation panel that allows users to resize the panel width",
+        "essentialCharacteristics": [
+          "Smaller when a scrollbar is present",
+          "Focusable for keyboard interactions",
+          "Meets WCAG 2.5.8 target size requirements via alternate method (hamburger icon)",
+          "Enables resizing as alternative to dragging (WCAG 2.5.7)"
+        ]
+      },
+      "sources": [
+        {
+          "type": "wiki",
+          "reference": "App frame (browsing) CRD - Dragging accessibility notes",
+          "url": "https://wiki.corp.adobe.com/pages/viewpage.action?pageId=3364319543",
+          "date": "2025-01-12"
+        },
+        {
+          "type": "industry-standard",
+          "reference": "WCAG 2.5.8 Target Size (Minimum)",
+          "url": "https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html",
+          "date": "2025-01-12"
+        },
+        {
+          "type": "industry-standard",
+          "reference": "WCAG 2.5.7 Dragging Movements",
+          "url": "https://www.w3.org/WAI/WCAG22/Understanding/dragging-movements",
+          "date": "2025-01-12"
+        }
+      ],
+      "governance": {
+        "owner": "Spectrum Core Team",
+        "reviewDate": "2025-01-12",
+        "status": "approved"
+      },
+      "relatedTerms": ["side-navigation", "state-control"]
+    },
+    {
+      "id": "state-control",
+      "label": "State Control",
+      "aliases": ["hamburger icon", "menu toggle"],
+      "description": "A control to show/hide side navigation labels or minimize/maximize the panel",
+      "usedIn": ["component-schemas", "anatomy"],
+      "definition": {
+        "superordinate": "interactive control",
+        "description": "A button control, typically represented by a hamburger icon, that toggles the visibility of side navigation labels or the panel size",
+        "essentialCharacteristics": [
+          "Provides alternate method for resizing (accessibility requirement)",
+          "Label changes based on state (e.g., 'Hide menu labels' when expanded)",
+          "Supports standard interaction states (default, hover, down, keyboard focus, disabled)",
+          "Ensures keyboard users can resize the panel"
+        ]
+      },
+      "terminology": {
+        "conceptType": "term",
+        "namingRationale": "Named for its function (controlling state) rather than appearance (hamburger)"
+      },
+      "sources": [
+        {
+          "type": "wiki",
+          "reference": "App frame (browsing) CRD",
+          "url": "https://wiki.corp.adobe.com/pages/viewpage.action?pageId=3364319543",
+          "date": "2025-01-12"
+        }
+      ],
+      "governance": {
+        "owner": "Spectrum Core Team",
+        "reviewDate": "2025-01-12",
+        "status": "approved"
+      },
+      "relatedTerms": ["side-navigation", "drag-area"]
+    }
+  ]
+}

package/registry/platform-extensions/ios-states.json

@@ -0,0 +1,59 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/platform-extension.json",
+  "platform": "iOS",
+  "platformVersion": "iOS 17+",
+  "description": "iOS-specific terminology for interaction states",
+  "extends": "states",
+  "extensions": [
+    {
+      "termId": "hover",
+      "platformTerm": "highlighted",
+      "platformAliases": ["isHighlighted"],
+      "notes": "iOS uses 'highlighted' state for pointer interactions on devices with pointer support (iPad with mouse/trackpad)",
+      "reference": "UIControl.State.highlighted",
+      "codeExample": "button.isHighlighted = true",
+      "differences": [
+        "Only available on iOS devices with pointer support",
+        "Not triggered by touch interactions",
+        "Maps to UIControl.State.highlighted property"
+      ]
+    },
+    {
+      "termId": "focus",
+      "platformTerm": "focused",
+      "platformAliases": ["isFocused"],
+      "notes": "iOS uses UIFocusSystem for keyboard and pointer navigation",
+      "reference": "UIFocusEnvironment",
+      "codeExample": "view.canBecomeFocused",
+      "differences": [
+        "Part of UIFocusSystem framework",
+        "Supports both keyboard and pointer navigation",
+        "Requires implementing UIFocusEnvironment protocol"
+      ]
+    },
+    {
+      "termId": "disabled",
+      "platformTerm": "disabled",
+      "platformAliases": ["isEnabled"],
+      "notes": "iOS uses isEnabled property (inverted boolean)",
+      "reference": "UIControl.isEnabled",
+      "codeExample": "button.isEnabled = false",
+      "differences": [
+        "Property is named 'isEnabled' but inverted (false = disabled)",
+        "Affects both visual appearance and interaction"
+      ]
+    },
+    {
+      "termId": "selected",
+      "platformTerm": "selected",
+      "platformAliases": ["isSelected"],
+      "notes": "iOS uses isSelected for toggle-able controls",
+      "reference": "UIControl.isSelected",
+      "codeExample": "button.isSelected = true",
+      "differences": [
+        "Used for toggleable controls like checkboxes and radio buttons",
+        "Can be combined with other states (highlighted, disabled)"
+      ]
+    }
+  ]
+}

package/registry/platform-extensions/web-components-states.json

@@ -0,0 +1,58 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/platform-extension.json",
+  "platform": "Web Components",
+  "platformVersion": "Spectrum Web Components 0.x+",
+  "description": "Web Components-specific terminology for interaction states",
+  "extends": "states",
+  "extensions": [
+    {
+      "termId": "hover",
+      "platformTerm": "hover",
+      "notes": "Implemented via CSS :hover pseudo-class",
+      "reference": ":hover pseudo-class",
+      "codeExample": ":host(:hover) { ... }",
+      "differences": [
+        "Automatically handled by browser CSS",
+        "Works with any pointing device",
+        "No JavaScript required for basic hover states"
+      ]
+    },
+    {
+      "termId": "focus",
+      "platformTerm": "focused",
+      "platformAliases": ["focus"],
+      "notes": "Uses :focus and :focus-visible pseudo-classes",
+      "reference": ":focus-visible",
+      "codeExample": ":host(:focus-visible) { ... }",
+      "differences": [
+        "Distinguishes between programmatic and user-initiated focus",
+        ":focus-visible shows focus ring only for keyboard navigation",
+        "Better accessibility with :focus-visible support"
+      ]
+    },
+    {
+      "termId": "disabled",
+      "platformTerm": "disabled",
+      "notes": "Implemented via disabled attribute and :disabled pseudo-class",
+      "reference": "disabled attribute",
+      "codeExample": "<sp-button disabled>Label</sp-button>",
+      "differences": [
+        "Uses standard HTML disabled attribute",
+        "Prevents all interactions automatically",
+        "Affects tab order and screen reader behavior"
+      ]
+    },
+    {
+      "termId": "keyboard-focus",
+      "platformTerm": "focus-visible",
+      "notes": "Modern CSS uses :focus-visible for keyboard-only focus indication",
+      "reference": ":focus-visible pseudo-class",
+      "codeExample": ":host(:focus-visible) { outline: 2px solid blue; }",
+      "differences": [
+        "Only shows focus indicator for keyboard navigation",
+        "Hides focus ring for mouse/touch interactions",
+        "Improves UX while maintaining accessibility"
+      ]
+    }
+  ]
+}

package/registry/platforms.json

@@ -0,0 +1,37 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/registry-value.json",
+  "type": "platform",
+  "description": "Platform names for multi-platform design system support",
+  "values": [
+    {
+      "id": "desktop",
+      "label": "Desktop",
+      "description": "Desktop platform (macOS, Windows, Linux)",
+      "usedIn": ["tokens"]
+    },
+    {
+      "id": "mobile",
+      "label": "Mobile",
+      "description": "Mobile platform (iOS, Android)",
+      "usedIn": ["tokens"]
+    },
+    {
+      "id": "web",
+      "label": "Web",
+      "description": "Web browsers",
+      "usedIn": ["tokens"]
+    },
+    {
+      "id": "ios",
+      "label": "iOS",
+      "description": "Apple iOS mobile platform",
+      "usedIn": ["tokens"]
+    },
+    {
+      "id": "android",
+      "label": "Android",
+      "description": "Google Android mobile platform",
+      "usedIn": ["tokens"]
+    }
+  ]
+}

package/registry/scale-values.json

@@ -0,0 +1,91 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/registry-value.json",
+  "type": "scale",
+  "description": "Numeric scale values used in design tokens",
+  "values": [
+    {
+      "id": "50",
+      "label": "Scale 50",
+      "value": 50,
+      "category": "common",
+      "usedIn": ["tokens"]
+    },
+    {
+      "id": "75",
+      "label": "Scale 75",
+      "value": 75,
+      "category": "common",
+      "usedIn": ["tokens"]
+    },
+    {
+      "id": "100",
+      "label": "Scale 100",
+      "value": 100,
+      "category": "common",
+      "usedIn": ["tokens"]
+    },
+    {
+      "id": "200",
+      "label": "Scale 200",
+      "value": 200,
+      "category": "common",
+      "usedIn": ["tokens"]
+    },
+    {
+      "id": "300",
+      "label": "Scale 300",
+      "value": 300,
+      "category": "common",
+      "usedIn": ["tokens"]
+    },
+    {
+      "id": "400",
+      "label": "Scale 400",
+      "value": 400,
+      "category": "common",
+      "usedIn": ["tokens"]
+    },
+    {
+      "id": "500",
+      "label": "Scale 500",
+      "value": 500,
+      "category": "common",
+      "usedIn": ["tokens"]
+    },
+    {
+      "id": "600",
+      "label": "Scale 600",
+      "value": 600,
+      "category": "extended",
+      "usedIn": ["tokens"]
+    },
+    {
+      "id": "700",
+      "label": "Scale 700",
+      "value": 700,
+      "category": "extended",
+      "usedIn": ["tokens"]
+    },
+    {
+      "id": "800",
+      "label": "Scale 800",
+      "value": 800,
+      "category": "extended",
+      "usedIn": ["tokens"]
+    },
+    {
+      "id": "900",
+      "label": "Scale 900",
+      "value": 900,
+      "category": "extended",
+      "usedIn": ["tokens"]
+    },
+    {
+      "id": "1000",
+      "label": "Scale 1000",
+      "value": 1000,
+      "category": "extended",
+      "usedIn": ["tokens"]
+    }
+  ]
+}

package/registry/sizes.json

@@ -0,0 +1,152 @@
+{
+  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/registry-value.json",
+  "type": "size",
+  "description": "Standard size scale values used across Spectrum",
+  "values": [
+    {
+      "id": "xs",
+      "label": "Extra Small",
+      "aliases": ["extra-small"],
+      "usedIn": ["component-options", "component-schemas"]
+    },
+    {
+      "id": "s",
+      "label": "Small",
+      "aliases": ["small"],
+      "usedIn": ["tokens", "component-options", "component-schemas"]
+    },
+    {
+      "id": "m",
+      "label": "Medium",
+      "aliases": ["medium"],
+      "default": true,
+      "usedIn": ["tokens", "component-options", "component-schemas"]
+    },
+    {
+      "id": "l",
+      "label": "Large",
+      "aliases": ["large"],
+      "usedIn": ["tokens", "component-options", "component-schemas"]
+    },
+    {
+      "id": "xl",
+      "label": "Extra Large",
+      "aliases": ["extra-large"],
+      "usedIn": ["tokens", "component-options", "component-schemas"]
+    },
+    {
+      "id": "xxl",
+      "label": "2X Large",
+      "aliases": [],
+      "usedIn": ["component-options", "component-schemas"]
+    },
+    {
+      "id": "xxxl",
+      "label": "3X Large",
+      "aliases": [],
+      "usedIn": ["component-options", "component-schemas"]
+    },
+    {
+      "id": "50",
+      "label": "Size 50",
+      "aliases": [],
+      "usedIn": ["tokens", "component-schemas"]
+    },
+    {
+      "id": "75",
+      "label": "Size 75",
+      "aliases": [],
+      "usedIn": ["tokens", "component-schemas"]
+    },
+    {
+      "id": "100",
+      "label": "Size 100",
+      "aliases": [],
+      "usedIn": ["tokens", "component-schemas"]
+    },
+    {
+      "id": "200",
+      "label": "Size 200",
+      "aliases": [],
+      "usedIn": ["tokens", "component-schemas"]
+    },
+    {
+      "id": "300",
+      "label": "Size 300",
+      "aliases": [],
+      "usedIn": ["tokens", "component-schemas"]
+    },
+    {
+      "id": "400",
+      "label": "Size 400",
+      "aliases": [],
+      "usedIn": ["tokens", "component-schemas"]
+    },
+    {
+      "id": "500",
+      "label": "Size 500",
+      "aliases": [],
+      "usedIn": ["tokens", "component-schemas"]
+    },
+    {
+      "id": "600",
+      "label": "Size 600",
+      "aliases": [],
+      "usedIn": ["tokens", "component-schemas"]
+    },
+    {
+      "id": "700",
+      "label": "Size 700",
+      "aliases": [],
+      "usedIn": ["tokens", "component-schemas"]
+    },
+    {
+      "id": "800",
+      "label": "Size 800",
+      "aliases": [],
+      "usedIn": ["tokens", "component-schemas"]
+    },
+    {
+      "id": "900",
+      "label": "Size 900",
+      "aliases": [],
+      "usedIn": ["tokens", "component-schemas"]
+    },
+    {
+      "id": "1000",
+      "label": "Size 1000",
+      "aliases": [],
+      "usedIn": ["tokens", "component-schemas"]
+    },
+    {
+      "id": "1100",
+      "label": "Size 1100",
+      "aliases": [],
+      "usedIn": ["component-schemas"]
+    },
+    {
+      "id": "1200",
+      "label": "Size 1200",
+      "aliases": [],
+      "usedIn": ["component-schemas"]
+    },
+    {
+      "id": "1300",
+      "label": "Size 1300",
+      "aliases": [],
+      "usedIn": ["component-schemas"]
+    },
+    {
+      "id": "1400",
+      "label": "Size 1400",
+      "aliases": [],
+      "usedIn": ["component-schemas"]
+    },
+    {
+      "id": "1500",
+      "label": "Size 1500",
+      "aliases": [],
+      "usedIn": ["component-schemas"]
+    }
+  ]
+}