@eui/eds-styles 22.0.0-alpha.24 → 22.0.0-alpha.25
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"$comment": "Shared, framework-agnostic catalog of EDS components consumed by all three showcase hosts (Angular eui-showcase-ux-components, React eui-showcase-react, Web Components eui-showcase-webcomponents). Ships to @eui/eds-styles/dist/assets/eds-components.json.
|
|
2
|
+
"$comment": "Shared, framework-agnostic catalog of EDS components consumed by all three showcase hosts (Angular eui-showcase-ux-components, React eui-showcase-react, Web Components eui-showcase-webcomponents). Ships to @eui/eds-styles/dist/assets/eds-components.json. THIS MANIFEST IS THE SINGLE SOURCE OF TRUTH FOR ALL SHOWCASES (Angular, React, Web Components) — component listing, grouping, ordering, category, status and availability all originate here. The Angular eds-links.ts sidebar, the React DemoEntry groups and the Web Components registry are all derived from / reconciled against this manifest (they no longer carry authoritative status data; they overlay statusMetadata from here). When adding, moving or removing a component, edit this manifest first, then reflect it in each showcase's sidebar/registry. `id` is the canonical eds-* folder name and the React/WC join key; `angularUrl` is the Angular sidebar route and the Angular join key (needed because some entries share an id, e.g. dialog service vs template, or use non-eds routes like patterns). `availability` flags reflect which showcase actually ships samples; the Angular host derives statusIcons (figma/wc/react) from figmaLink + availability. `category` is the Angular sidebar bucket (atom|action|content|layout); `subGroup` clusters related demos within a group (Patterns); `status` mirrors statusMetadata.status (DRAFT|DEMO); `statusColorVariant` mirrors statusMetadata.colorVariant (info for DRAFT, danger for DEMO).",
|
|
3
3
|
"version": 1,
|
|
4
4
|
"groups": [
|
|
5
5
|
"Design tokens",
|
|
@@ -30,6 +30,7 @@
|
|
|
30
30
|
{ "id": "eds-button", "label": "Button", "group": "EDS validated", "angularUrl": "/showcase-eds/components/eds-button", "category": "action", "status": "DRAFT", "statusColorVariant": "info", "figmaLink": "https://www.figma.com/design/lurOi9W7As4dohgypUtA8U/Core-Components?node-id=1-692&p=f&t=YkZw9uMoXgcpt6Nk-0", "availability": { "angular": true, "react": true, "webcomponents": true } },
|
|
31
31
|
{ "id": "eds-chip", "label": "Chip", "group": "EDS validated", "angularUrl": "/showcase-eds/components/eds-chip", "category": "content", "status": "DRAFT", "statusColorVariant": "info", "figmaLink": "https://www.figma.com/design/lurOi9W7As4dohgypUtA8U/Core-Components?node-id=921-149258&p=f&t=OO4eYEevhyJFTBsz-0", "availability": { "angular": true, "react": true, "webcomponents": true } },
|
|
32
32
|
{ "id": "eds-chip-list", "label": "Chip List", "group": "EDS validated", "angularUrl": "/showcase-eds/components/eds-chip-list", "category": "content", "status": "DRAFT", "statusColorVariant": "info", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": true } },
|
|
33
|
+
{ "id": "eds-empty-state", "label": "Empty State", "group": "EDS validated", "angularUrl": "/showcase-eds/components/eds-empty-state", "category": "content", "status": "DRAFT", "statusColorVariant": "info", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": true } },
|
|
33
34
|
{ "id": "eds-feedback-message", "label": "Feedback Message", "group": "EDS validated", "angularUrl": "/showcase-eds/components/eds-feedback-message", "category": "content", "status": "DRAFT", "statusColorVariant": "info", "figmaLink": "https://www.figma.com/design/lurOi9W7As4dohgypUtA8U/Core-Components?node-id=21097-26299&p=f&t=YkZw9uMoXgcpt6Nk-0", "availability": { "angular": true, "react": true, "webcomponents": true } },
|
|
34
35
|
{ "id": "eds-icon", "label": "Icon", "group": "EDS validated", "angularUrl": "/showcase-eds/components/eds-icon", "category": "atom", "status": "DRAFT", "statusColorVariant": "info", "figmaLink": "https://www.figma.com/design/lurOi9W7As4dohgypUtA8U/Core-Components?node-id=10129-17612&p=f&t=OO4eYEevhyJFTBsz-0", "availability": { "angular": true, "react": true, "webcomponents": true } },
|
|
35
36
|
{ "id": "eds-icon-button", "label": "Icon Button", "group": "EDS validated", "angularUrl": "/showcase-eds/components/eds-icon-button", "category": "atom", "status": "DRAFT", "statusColorVariant": "info", "figmaLink": "https://www.figma.com/design/lurOi9W7As4dohgypUtA8U/Core-Components?node-id=10065-2538&p=f&t=YkZw9uMoXgcpt6Nk-0", "availability": { "angular": true, "react": true, "webcomponents": true } },
|
|
@@ -39,12 +40,17 @@
|
|
|
39
40
|
{ "id": "eds-input-group", "label": "Input Group", "group": "EDS validated", "angularUrl": "/showcase-eds/components/eds-input-group", "category": "atom", "status": "DRAFT", "statusColorVariant": "info", "figmaLink": "https://www.figma.com/design/lurOi9W7As4dohgypUtA8U/Core-Components?node-id=21097-24355&p=f&t=YkZw9uMoXgcpt6Nk-0", "availability": { "angular": true, "react": true, "webcomponents": true } },
|
|
40
41
|
{ "id": "eds-input-icon", "label": "Input Icon", "group": "EDS validated", "angularUrl": "/showcase-eds/components/eds-input-icon", "category": "atom", "status": "DRAFT", "statusColorVariant": "info", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": true } },
|
|
41
42
|
{ "id": "eds-input-number", "label": "Input Number", "group": "EDS validated", "angularUrl": "/showcase-eds/components/eds-input-number", "category": "atom", "status": "DRAFT", "statusColorVariant": "info", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": true } },
|
|
43
|
+
{ "id": "eds-input-password", "label": "Input Password", "group": "EDS validated", "angularUrl": "/showcase-eds/components/eds-input-password", "category": "atom", "status": "DRAFT", "statusColorVariant": "info", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": true } },
|
|
42
44
|
{ "id": "eds-input-radio", "label": "Input Radio", "group": "EDS validated", "angularUrl": "/showcase-eds/components/eds-input-radio", "category": "atom", "status": "DRAFT", "statusColorVariant": "info", "figmaLink": "https://www.figma.com/design/lurOi9W7As4dohgypUtA8U/Core-Components?node-id=21097-26304&p=f&t=OO4eYEevhyJFTBsz-0", "availability": { "angular": true, "react": true, "webcomponents": true } },
|
|
43
45
|
{ "id": "eds-input-text", "label": "Input Text", "group": "EDS validated", "angularUrl": "/showcase-eds/components/eds-input-text", "category": "atom", "status": "DRAFT", "statusColorVariant": "info", "figmaLink": "https://www.figma.com/design/lurOi9W7As4dohgypUtA8U/Core-Components?node-id=21097-26302&p=f&t=YkZw9uMoXgcpt6Nk-0", "availability": { "angular": true, "react": true, "webcomponents": true } },
|
|
46
|
+
{ "id": "eds-label", "label": "Label", "group": "EDS validated", "angularUrl": "/showcase-eds/components/eds-label", "category": "content", "status": "DRAFT", "statusColorVariant": "info", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": true } },
|
|
44
47
|
{ "id": "eds-link", "label": "Link", "group": "EDS validated", "angularUrl": "/showcase-eds/components/eds-link", "category": "atom", "status": "DRAFT", "statusColorVariant": "info", "figmaLink": "https://www.figma.com/design/lurOi9W7As4dohgypUtA8U/Core-Components?node-id=10183-36762&p=f&t=YkZw9uMoXgcpt6Nk-0", "availability": { "angular": true, "react": true, "webcomponents": false } },
|
|
45
48
|
{ "id": "eds-loading-indicator", "label": "Loading Indicator", "group": "EDS validated", "angularUrl": "/showcase-eds/components/eds-loading-indicator", "category": "atom", "status": "DRAFT", "statusColorVariant": "info", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": true } },
|
|
49
|
+
{ "id": "eds-multiselect", "label": "Multiselect", "group": "EDS validated", "angularUrl": "/showcase-eds/components/eds-multiselect", "category": "atom", "status": "DRAFT", "statusColorVariant": "info", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": true } },
|
|
50
|
+
{ "id": "eds-popover", "label": "Popover", "group": "EDS validated", "angularUrl": "/showcase-eds/components/eds-popover", "category": "content", "status": "DRAFT", "statusColorVariant": "info", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": true } },
|
|
46
51
|
{ "id": "eds-rating", "label": "Rating", "group": "EDS validated", "angularUrl": "/showcase-eds/components/eds-rating", "category": "atom", "status": "DRAFT", "statusColorVariant": "info", "figmaLink": "https://www.figma.com/design/lurOi9W7As4dohgypUtA8U/Core-Components?node-id=12073-32704&p=f&t=OO4eYEevhyJFTBsz-0", "availability": { "angular": true, "react": true, "webcomponents": true } },
|
|
47
52
|
{ "id": "eds-select", "label": "Select", "group": "EDS validated", "angularUrl": "/showcase-eds/components/eds-select", "category": "atom", "status": "DRAFT", "statusColorVariant": "info", "figmaLink": "https://www.figma.com/design/lurOi9W7As4dohgypUtA8U/Core-Components?node-id=21097-77325&p=f&t=YkZw9uMoXgcpt6Nk-0", "availability": { "angular": true, "react": true, "webcomponents": true } },
|
|
53
|
+
{ "id": "eds-switch", "label": "Switch", "group": "EDS validated", "angularUrl": "/showcase-eds/components/eds-switch", "category": "atom", "status": "DRAFT", "statusColorVariant": "info", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": true } },
|
|
48
54
|
{ "id": "eds-tabs", "label": "Tabs", "group": "EDS validated", "angularUrl": "/showcase-eds/components/eds-tabs", "category": "content", "status": "DRAFT", "statusColorVariant": "info", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": true } },
|
|
49
55
|
{ "id": "eds-tag", "label": "Tag", "group": "EDS validated", "angularUrl": "/showcase-eds/components/eds-tag", "category": "content", "status": "DRAFT", "statusColorVariant": "info", "figmaLink": "https://www.figma.com/design/lurOi9W7As4dohgypUtA8U/Core-Components?node-id=355-142743&p=f&t=OO4eYEevhyJFTBsz-0", "availability": { "angular": true, "react": true, "webcomponents": true } },
|
|
50
56
|
{ "id": "eds-textarea", "label": "Textarea", "group": "EDS validated", "angularUrl": "/showcase-eds/components/eds-textarea", "category": "atom", "status": "DRAFT", "statusColorVariant": "info", "figmaLink": "https://www.figma.com/design/lurOi9W7As4dohgypUtA8U/Core-Components?node-id=21097-77324&p=f&t=YkZw9uMoXgcpt6Nk-0", "availability": { "angular": true, "react": true, "webcomponents": true } },
|
|
@@ -69,21 +75,18 @@
|
|
|
69
75
|
{ "id": "eds-discussion-thread", "label": "Discussion Thread", "group": "Components", "angularUrl": "/showcase-eds/components/eds-discussion-thread", "category": "content", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": true } },
|
|
70
76
|
{ "id": "eds-dimmer", "label": "Dimmer", "group": "Components", "category": "layout", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": false, "react": true, "webcomponents": false } },
|
|
71
77
|
{ "id": "eds-dropdown", "label": "Dropdown", "group": "Components", "angularUrl": "/showcase-eds/components/eds-dropdown", "category": "action", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": true } },
|
|
72
|
-
{ "id": "eds-empty-state", "label": "Empty State", "group": "Components", "angularUrl": "/showcase-eds/components/eds-empty-state", "category": "content", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": true } },
|
|
73
78
|
{ "id": "eds-fab-button", "label": "Fab Button", "group": "Components", "angularUrl": "/showcase-eds/components/eds-fab-button", "category": "action", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": true } },
|
|
74
79
|
{ "id": "eds-fieldset", "label": "Fieldset", "group": "Components", "angularUrl": "/showcase-eds/components/eds-fieldset", "category": "layout", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": true } },
|
|
75
80
|
{ "id": "eds-file-upload", "label": "File Upload", "group": "Components", "angularUrl": "/showcase-eds/components/eds-file-upload", "category": "atom", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": true } },
|
|
76
81
|
{ "id": "eds-growl", "label": "Growl", "group": "Components", "angularUrl": "/showcase-eds/components/eds-growl", "category": "content", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": true } },
|
|
77
82
|
{ "id": "eds-icon-toggle", "label": "Icon Toggle", "group": "Components", "angularUrl": "/showcase-eds/components/eds-icon-toggle", "category": "atom", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": true } },
|
|
78
|
-
{ "id": "eds-
|
|
83
|
+
{ "id": "eds-input-prompt", "label": "Input Prompt", "group": "Components", "angularUrl": "/showcase-eds/components/eds-input-prompt", "category": "atom", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": false } },
|
|
79
84
|
{ "id": "eds-list", "label": "List", "group": "Components", "angularUrl": "/showcase-eds/components/eds-list", "category": "content", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": true } },
|
|
80
85
|
{ "id": "eds-menu", "label": "Menu", "group": "Components", "angularUrl": "/showcase-eds/components/eds-menu", "category": "layout", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": true } },
|
|
81
86
|
{ "id": "eds-message-box-service", "label": "eds-message-box (S)", "group": "Components", "angularUrl": "/showcase-eds/components/eds-message-box-service", "category": "content", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": false, "webcomponents": false } },
|
|
82
87
|
{ "id": "eds-message-box", "label": "eds-message-box (T)", "group": "Components", "angularUrl": "/showcase-eds/components/eds-message-box-template", "category": "content", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": true } },
|
|
83
|
-
{ "id": "eds-multiselect", "label": "Multiselect", "group": "Components", "angularUrl": "/showcase-eds/components/eds-multiselect", "category": "atom", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": true } },
|
|
84
88
|
{ "id": "eds-page", "label": "Page", "group": "Components", "angularUrl": "/showcase-eds/components/eds-page", "category": "layout", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": true } },
|
|
85
89
|
{ "id": "eds-paginator", "label": "Paginator", "group": "Components", "angularUrl": "/showcase-eds/components/eds-paginator", "category": "content", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": true } },
|
|
86
|
-
{ "id": "eds-popover", "label": "Popover", "group": "Components", "angularUrl": "/showcase-eds/components/eds-popover", "category": "content", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": true } },
|
|
87
90
|
{ "id": "eds-progress-bar", "label": "Progress Bar", "group": "Components", "angularUrl": "/showcase-eds/components/eds-progress-bar", "category": "content", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "https://www.figma.com/design/lurOi9W7As4dohgypUtA8U/Core-Components?node-id=17377-87742&p=f&t=YkZw9uMoXgcpt6Nk-0", "availability": { "angular": true, "react": true, "webcomponents": true } },
|
|
88
91
|
{ "id": "eds-progress-circle", "label": "Progress Circle", "group": "Components", "angularUrl": "/showcase-eds/components/eds-progress-circle", "category": "content", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": true } },
|
|
89
92
|
{ "id": "eds-skeleton", "label": "Skeleton", "group": "Components", "angularUrl": "/showcase-eds/components/eds-skeleton", "category": "content", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": true } },
|
|
@@ -94,7 +97,6 @@
|
|
|
94
97
|
{ "id": "eds-tag-group", "label": "Tag Group", "group": "Components", "angularUrl": "/showcase-eds/components/eds-tag-group", "category": "content", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": true } },
|
|
95
98
|
{ "id": "eds-timeline", "label": "Timeline", "group": "Components", "angularUrl": "/showcase-eds/components/eds-timeline", "category": "content", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": true } },
|
|
96
99
|
{ "id": "eds-timepicker", "label": "Timepicker", "group": "Components", "angularUrl": "/showcase-eds/components/eds-timepicker", "category": "content", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": true } },
|
|
97
|
-
{ "id": "eds-toggle", "label": "Toggle", "group": "Components", "angularUrl": "/showcase-eds/components/eds-toggle", "category": "atom", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": true } },
|
|
98
100
|
{ "id": "eds-tree", "label": "Tree", "group": "Components", "angularUrl": "/showcase-eds/components/eds-tree", "category": "content", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": true } },
|
|
99
101
|
{ "id": "eds-tree-list", "label": "Tree List", "group": "Components", "angularUrl": "/showcase-eds/components/eds-tree-list", "category": "content", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": true } },
|
|
100
102
|
{ "id": "eds-wizard", "label": "Wizard", "group": "Components", "angularUrl": "/showcase-eds/components/eds-wizard", "category": "content", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": true } },
|