@eui/eds-styles 22.0.0-alpha.16 → 22.0.0-alpha.18

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.
Files changed (32) hide show
  1. package/dist/assets/eds-components.d.ts +70 -0
  2. package/dist/assets/eds-components.json +134 -0
  3. package/dist/base/02-tokens/colors-primitive.scss +72 -767
  4. package/dist/base/02-tokens/dimensions-primitive.scss +10 -23
  5. package/dist/base/02-tokens/ecl/primitives/_breakpoint.scss +16 -0
  6. package/dist/base/02-tokens/ecl/primitives/_color-domain.scss +189 -0
  7. package/dist/base/02-tokens/ecl/primitives/_color.scss +190 -0
  8. package/dist/base/02-tokens/ecl/primitives/_dimension.scss +31 -0
  9. package/dist/base/02-tokens/ecl/primitives/_grid.scss +25 -0
  10. package/dist/base/02-tokens/ecl/primitives/_index.scss +14 -0
  11. package/dist/base/02-tokens/ecl/primitives/_typography.scss +58 -0
  12. package/dist/base/02-tokens/ecl/semantic/_border.scss +22 -0
  13. package/dist/base/02-tokens/ecl/semantic/_color-dark.scss +221 -0
  14. package/dist/base/02-tokens/ecl/semantic/_color-domain-dark.scss +172 -0
  15. package/dist/base/02-tokens/ecl/semantic/_color-domain.scss +172 -0
  16. package/dist/base/02-tokens/ecl/semantic/_color.scss +227 -0
  17. package/dist/base/02-tokens/ecl/semantic/_index.scss +17 -0
  18. package/dist/base/02-tokens/ecl/semantic/_opacity.scss +21 -0
  19. package/dist/base/02-tokens/ecl/semantic/_shadow.scss +41 -0
  20. package/dist/base/02-tokens/ecl/semantic/_spacing.scss +62 -0
  21. package/dist/base/02-tokens/ecl/semantic/_typography.scss +288 -0
  22. package/dist/base/02-tokens/maps.scss +29 -71
  23. package/dist/base/02-tokens/typography-primitive.scss +15 -46
  24. package/dist/base/02-tokens/typography-semantic.scss +33 -33
  25. package/dist/base/04-elements/table.scss +1 -1
  26. package/dist/eds-showcase-exports.css +1 -1
  27. package/dist/eds-showcase-exports.css.map +1 -1
  28. package/dist/eds-utilities.css +1 -1
  29. package/dist/eds-vars.css +1 -1
  30. package/dist/eds.css +1 -1
  31. package/dist/eds.css.map +1 -1
  32. package/package.json +1 -1
package/dist/assets/eds-components.d.ts ADDED
@@ -0,0 +1,70 @@
1
+ /**
2
+ * Type definitions for the shared EDS component catalog (`eds-components.json`).
3
+ *
4
+ * This manifest is consumed by all three EDS showcase hosts (Angular, React, Web Components).
5
+ * It carries only the framework-agnostic catalog fields; each host attaches its own runtime
6
+ * binding (route/export for Angular, `Samples` component for React/WC) by matching on `id`,
7
+ * and filters the list by the relevant `availability` flag.
8
+ *
9
+ * Import it as JSON, e.g.:
10
+ * import catalog from '@eui/eds-styles/assets/eds-components.json' with { type: 'json' };
11
+ * import type { EdsComponentCatalog } from '@eui/eds-styles/assets/eds-components';
12
+ */
13
+
14
+ /** Top-level sidebar grouping (matches the Angular EDS showcase sections). */
15
+ export type EdsComponentGroup =
16
+ | 'Design tokens'
17
+ | 'Shell'
18
+ | 'EDS validated'
19
+ | 'Components'
20
+ | 'Directives'
21
+ | 'Charts'
22
+ | 'Utilities'
23
+ | 'Patterns'
24
+ | 'Templates';
25
+
26
+ /** Angular sidebar bucket for a component (drives the `category` on the Angular link). */
27
+ export type EdsComponentCategory = 'atom' | 'action' | 'content' | 'layout';
28
+
29
+ /** Documentation maturity, mirroring the Angular `statusMetadata.status`. */
30
+ export type EdsComponentStatus = 'DRAFT' | 'DEMO';
31
+
32
+ /** Status badge color, mirroring the Angular `statusMetadata.colorVariant` (info for DRAFT, danger for DEMO). */
33
+ export type EdsComponentStatusColorVariant = 'info' | 'danger';
34
+
35
+ /** Which showcase hosts actually ship samples for a component. */
36
+ export interface EdsComponentAvailability {
37
+ angular: boolean;
38
+ react: boolean;
39
+ webcomponents: boolean;
40
+ }
41
+
42
+ /** One catalog entry. `id` is the canonical `eds-*` folder name and the React/WC join key. */
43
+ export interface EdsComponentEntry {
44
+ id: string;
45
+ label: string;
46
+ group: EdsComponentGroup;
47
+ /**
48
+ * The Angular showcase sidebar route (`/showcase-eds/...`). This is the join key the Angular
49
+ * host uses to overlay statusMetadata onto its sidebar tree, since some entries share an `id`
50
+ * across variants (e.g. dialog service vs template) or use non-`eds-*` routes (patterns).
51
+ */
52
+ angularUrl?: string;
53
+ /** Secondary grouping within a `group` (used by Patterns to cluster related demos, e.g. 'page-header'). */
54
+ subGroup?: string;
55
+ category?: EdsComponentCategory;
56
+ status?: EdsComponentStatus;
57
+ statusColorVariant?: EdsComponentStatusColorVariant;
58
+ figmaLink?: string;
59
+ availability: EdsComponentAvailability;
60
+ }
61
+
62
+ /** The parsed shape of `eds-components.json`. */
63
+ export interface EdsComponentCatalog {
64
+ version: number;
65
+ groups: EdsComponentGroup[];
66
+ components: EdsComponentEntry[];
67
+ }
68
+
69
+ declare const catalog: EdsComponentCatalog;
70
+ export default catalog;
package/dist/assets/eds-components.json ADDED
@@ -0,0 +1,134 @@
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. THE ANGULAR eds-links.ts SIDEBAR IS THE SOURCE OF TRUTH — this manifest is the complete union of it, and the Angular host overlays statusMetadata from here (so eds-links.ts no longer carries status data). `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
+ "version": 1,
4
+ "groups": [
5
+ "Design tokens",
6
+ "Shell",
7
+ "EDS validated",
8
+ "Components",
9
+ "Directives",
10
+ "Charts",
11
+ "Utilities",
12
+ "Patterns",
13
+ "Templates"
14
+ ],
15
+ "components": [
16
+ { "id": "eds-design-tokens", "label": "Design tokens", "group": "Design tokens", "angularUrl": "/showcase-eds/design-tokens", "status": "DRAFT", "statusColorVariant": "info", "figmaLink": "", "availability": { "angular": true, "react": false, "webcomponents": false } },
17
+
18
+ { "id": "eds-shell-demos", "label": "Shell demos", "group": "Shell", "angularUrl": "/showcase-eds/shell", "category": "layout", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": false, "webcomponents": false } },
19
+ { "id": "eds-shell-playground", "label": "Playground", "group": "Shell", "angularUrl": "/showcase-eds/shell/playground", "category": "layout", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": false, "webcomponents": false } },
20
+ { "id": "eds-shell", "label": "Shell", "group": "Shell", "angularUrl": "/showcase-eds/components/eds-shell", "category": "layout", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": false } },
21
+ { "id": "eds-shell-header", "label": "Shell Header", "group": "Shell", "angularUrl": "/showcase-eds/components/eds-shell-header", "category": "layout", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": false } },
22
+ { "id": "eds-shell-toolbar", "label": "Shell Toolbar", "group": "Shell", "angularUrl": "/showcase-eds/components/eds-shell-toolbar", "category": "layout", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": false } },
23
+ { "id": "eds-user-profile", "label": "User Profile", "group": "Shell", "angularUrl": "/showcase-eds/components/eds-user-profile", "category": "content", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": true } },
24
+ { "id": "eds-overlay", "label": "Overlay", "group": "Shell", "angularUrl": "/showcase-eds/components/eds-overlay", "category": "layout", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": true } },
25
+ { "id": "eds-language-selector", "label": "Language Selector", "group": "Shell", "angularUrl": "/showcase-eds/components/eds-language-selector", "category": "content", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": true } },
26
+
27
+ { "id": "eds-alert", "label": "Alert", "group": "EDS validated", "angularUrl": "/showcase-eds/components/eds-alert", "category": "content", "status": "DRAFT", "statusColorVariant": "info", "figmaLink": "https://www.figma.com/design/lurOi9W7As4dohgypUtA8U/Core-Components?node-id=3556-30014&p=f&t=YkZw9uMoXgcpt6Nk-0", "availability": { "angular": true, "react": true, "webcomponents": true } },
28
+ { "id": "eds-avatar", "label": "Avatar", "group": "EDS validated", "angularUrl": "/showcase-eds/components/eds-avatar", "category": "content", "status": "DRAFT", "statusColorVariant": "info", "figmaLink": "https://www.figma.com/design/lurOi9W7As4dohgypUtA8U/Core-Components?node-id=10126-7467&p=f&t=YkZw9uMoXgcpt6Nk-0", "availability": { "angular": true, "react": true, "webcomponents": true } },
29
+ { "id": "eds-badge", "label": "Badge", "group": "EDS validated", "angularUrl": "/showcase-eds/components/eds-badge", "category": "content", "status": "DRAFT", "statusColorVariant": "info", "figmaLink": "https://www.figma.com/design/lurOi9W7As4dohgypUtA8U/Core-Components?node-id=6383-156600&p=f&t=YkZw9uMoXgcpt6Nk-0", "availability": { "angular": true, "react": true, "webcomponents": true } },
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
+ { "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
+ { "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-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 } },
34
+ { "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 } },
35
+ { "id": "eds-input-button", "label": "Input Button", "group": "EDS validated", "angularUrl": "/showcase-eds/components/eds-input-button", "category": "atom", "status": "DRAFT", "statusColorVariant": "info", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": true } },
36
+ { "id": "eds-input-checkbox", "label": "Input Checkbox", "group": "EDS validated", "angularUrl": "/showcase-eds/components/eds-input-checkbox", "category": "atom", "status": "DRAFT", "statusColorVariant": "info", "figmaLink": "https://www.figma.com/design/lurOi9W7As4dohgypUtA8U/Core-Components?node-id=21097-26306&p=f&t=YkZw9uMoXgcpt6Nk-0", "availability": { "angular": true, "react": true, "webcomponents": true } },
37
+ { "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 } },
38
+ { "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 } },
39
+ { "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 } },
40
+ { "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 } },
41
+ { "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 } },
42
+ { "id": "eds-link", "label": "Link", "group": "EDS validated", "angularUrl": "/showcase-eds/utilities/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 } },
43
+ { "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 } },
44
+ { "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 } },
45
+ { "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 } },
46
+ { "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 } },
47
+ { "id": "eds-tooltip", "label": "Tooltip", "group": "EDS validated", "angularUrl": "/showcase-eds/components/eds-tooltip", "category": "content", "status": "DRAFT", "statusColorVariant": "info", "figmaLink": "https://www.figma.com/design/lurOi9W7As4dohgypUtA8U/Core-Components?node-id=10153-12798&p=f&t=OO4eYEevhyJFTBsz-0", "availability": { "angular": true, "react": true, "webcomponents": true } },
48
+
49
+ { "id": "eds-accordion", "label": "Accordion", "group": "Components", "angularUrl": "/showcase-eds/components/eds-accordion", "category": "content", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": true } },
50
+ { "id": "eds-autocomplete", "label": "Autocomplete", "group": "Components", "angularUrl": "/showcase-eds/components/eds-autocomplete", "category": "atom", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": true } },
51
+ { "id": "eds-banner", "label": "Banner", "group": "Components", "angularUrl": "/showcase-eds/components/eds-banner", "category": "content", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": true } },
52
+ { "id": "eds-block-content", "label": "Block Content", "group": "Components", "angularUrl": "/showcase-eds/components/eds-block-content", "category": "content", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": true } },
53
+ { "id": "eds-block-document", "label": "Block Document", "group": "Components", "angularUrl": "/showcase-eds/components/eds-block-document", "category": "content", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": false } },
54
+ { "id": "eds-blockquote", "label": "Blockquote", "group": "Components", "angularUrl": "/showcase-eds/components/eds-blockquote", "category": "content", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": true } },
55
+ { "id": "eds-breadcrumb", "label": "Breadcrumb", "group": "Components", "angularUrl": "/showcase-eds/components/eds-breadcrumb", "category": "content", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": false, "react": true, "webcomponents": true } },
56
+ { "id": "eds-button-group", "label": "Button Group", "group": "Components", "angularUrl": "/showcase-eds/components/eds-button-group", "category": "action", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": true } },
57
+ { "id": "eds-calendar", "label": "Calendar", "group": "Components", "angularUrl": "/showcase-eds/components/eds-calendar", "category": "content", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": true } },
58
+ { "id": "eds-card", "label": "Card", "group": "Components", "angularUrl": "/showcase-eds/components/eds-card", "category": "content", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": true } },
59
+ { "id": "eds-carousel", "label": "Carousel", "group": "Components", "angularUrl": "/showcase-eds/components/eds-carousel", "category": "content", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": true } },
60
+ { "id": "eds-date-block", "label": "Date Block", "group": "Components", "angularUrl": "/showcase-eds/components/eds-date-block", "category": "content", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": true } },
61
+ { "id": "eds-datepicker", "label": "Datepicker", "group": "Components", "angularUrl": "/showcase-eds/components/eds-datepicker", "category": "content", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": true } },
62
+ { "id": "eds-dialog-service", "label": "eds-dialog (S)", "group": "Components", "angularUrl": "/showcase-eds/components/eds-dialog-service", "category": "content", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": false, "webcomponents": false } },
63
+ { "id": "eds-dialog", "label": "eds-dialog (T)", "group": "Components", "angularUrl": "/showcase-eds/components/eds-dialog-template", "category": "content", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": true } },
64
+ { "id": "eds-disable-content", "label": "Disable Content", "group": "Components", "angularUrl": "/showcase-eds/components/eds-disable-content", "category": "layout", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": true } },
65
+ { "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": false } },
66
+ { "id": "eds-dimmer", "label": "Dimmer", "group": "Components", "category": "layout", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": false, "react": true, "webcomponents": false } },
67
+ { "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 } },
68
+ { "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 } },
69
+ { "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 } },
70
+ { "id": "eds-feedback-message", "label": "Feedback Message", "group": "Components", "angularUrl": "/showcase-eds/components/eds-feedback-message", "category": "content", "status": "DEMO", "statusColorVariant": "danger", "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 } },
71
+ { "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 } },
72
+ { "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 } },
73
+ { "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 } },
74
+ { "id": "eds-icon-state", "label": "Icon State", "group": "Components", "angularUrl": "/showcase-eds/utilities/eds-icon-state", "category": "content", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": false } },
75
+ { "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 } },
76
+ { "id": "eds-label", "label": "Label", "group": "Components", "angularUrl": "/showcase-eds/utilities/eds-label", "category": "content", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": true } },
77
+ { "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 } },
78
+ { "id": "eds-loading-indicator", "label": "Loading Indicator", "group": "Components", "angularUrl": "/showcase-eds/utilities/eds-loading-indicator", "category": "content", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": false } },
79
+ { "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 } },
80
+ { "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 } },
81
+ { "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 } },
82
+ { "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 } },
83
+ { "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 } },
84
+ { "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 } },
85
+ { "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 } },
86
+ { "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 } },
87
+ { "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 } },
88
+ { "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 } },
89
+ { "id": "eds-slider", "label": "Slider", "group": "Components", "angularUrl": "/showcase-eds/components/eds-slider", "category": "atom", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": true } },
90
+ { "id": "eds-split-button", "label": "Split Button", "group": "Components", "angularUrl": "/showcase-eds/components/eds-split-button", "category": "action", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": true } },
91
+ { "id": "eds-swiper", "label": "Swiper", "group": "Components", "angularUrl": "/showcase-eds/components/eds-swiper", "category": "content", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": false, "webcomponents": true } },
92
+ { "id": "eds-table", "label": "Table", "group": "Components", "angularUrl": "/showcase-eds/components/eds-table", "category": "content", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": true } },
93
+ { "id": "eds-tabs", "label": "Tabs", "group": "Components", "angularUrl": "/showcase-eds/components/eds-tabs", "category": "content", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": true } },
94
+ { "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
+ { "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
+ { "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
+ { "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
+ { "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
+ { "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 } },
101
+
102
+ { "id": "eds-text-truncate", "label": "edsTextTruncate", "group": "Directives", "angularUrl": "/showcase-eds/components/eds-text-truncate", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": false, "webcomponents": false } },
103
+ { "id": "eds-clearable", "label": "edsClearable", "group": "Directives", "angularUrl": "/showcase-eds/components/eds-clearable", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": false, "webcomponents": false } },
104
+ { "id": "eds-loading", "label": "edsLoading", "group": "Directives", "angularUrl": "/showcase-eds/components/eds-loading", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": false, "webcomponents": false } },
105
+ { "id": "eds-resizable", "label": "edsResizable", "group": "Directives", "angularUrl": "/showcase-eds/components/eds-resizable", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": false, "webcomponents": false } },
106
+
107
+ { "id": "eds-chart", "label": "eds-chart", "group": "Charts", "angularUrl": "/showcase-eds/charts/eds-chart", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": false } },
108
+ { "id": "eds-chart-legend", "label": "eds-chart-legend", "group": "Charts", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": false, "react": true, "webcomponents": false } },
109
+ { "id": "eds-sparkline", "label": "eds-sparkline", "group": "Charts", "angularUrl": "/showcase-eds/charts/eds-sparkline", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": false } },
110
+ { "id": "eds-geo-chart", "label": "eds-geo-chart", "group": "Charts", "angularUrl": "/showcase-eds/charts/eds-geo-chart", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": false } },
111
+ { "id": "eds-gauge-chart", "label": "eds-gauge-chart", "group": "Charts", "angularUrl": "/showcase-eds/charts/eds-gauge-chart", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": false } },
112
+
113
+ { "id": "eds-flex-layout", "label": "Flex Layout", "group": "Utilities", "angularUrl": "/showcase-eds/utilities/eds-flex-layout", "category": "layout", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": false } },
114
+ { "id": "eds-grid-layout", "label": "Grid Layout", "group": "Utilities", "angularUrl": "/showcase-eds/utilities/eds-grid-layout", "category": "layout", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": false } },
115
+
116
+ { "id": "pattern-page-header-anatomy", "label": "Page header - anatomy", "group": "Patterns", "subGroup": "page-header", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": false, "react": true, "webcomponents": false } },
117
+ { "id": "pattern-page-header-simple", "label": "Page header - simple", "group": "Patterns", "subGroup": "page-header", "angularUrl": "/showcase-eds/patterns/page-header/simple", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": false } },
118
+ { "id": "pattern-page-header-advanced", "label": "Page header - advanced", "group": "Patterns", "subGroup": "page-header", "angularUrl": "/showcase-eds/patterns/page-header/advanced", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": false } },
119
+ { "id": "pattern-page-layout-simple", "label": "Page layout - simple", "group": "Patterns", "subGroup": "page-layout", "angularUrl": "/showcase-eds/patterns/page-layout/simple", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": false } },
120
+ { "id": "pattern-page-layout-columns", "label": "Page layout - columns", "group": "Patterns", "subGroup": "page-layout", "angularUrl": "/showcase-eds/patterns/page-layout/columns", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": false } },
121
+ { "id": "pattern-page-layout-navigation", "label": "Page layout - navigation", "group": "Patterns", "subGroup": "page-layout", "angularUrl": "/showcase-eds/patterns/page-layout/navigation", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": false } },
122
+ { "id": "pattern-page-list-cards-list-simple", "label": "Page list - cards list simple", "group": "Patterns", "subGroup": "page-list", "angularUrl": "/showcase-eds/patterns/page-list/cards-list-simple", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": false } },
123
+ { "id": "pattern-page-list-cards-filter", "label": "Page list - cards filter", "group": "Patterns", "subGroup": "page-list", "angularUrl": "/showcase-eds/patterns/page-list/cards-filter", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": false } },
124
+ { "id": "pattern-page-list-cards-selection", "label": "Page list - cards selection", "group": "Patterns", "subGroup": "page-list", "angularUrl": "/showcase-eds/patterns/page-list/cards-selection", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": false } },
125
+ { "id": "pattern-page-list-cards-variants", "label": "Page list - cards variants", "group": "Patterns", "subGroup": "page-list", "angularUrl": "/showcase-eds/patterns/page-list/cards-variants", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": false } },
126
+ { "id": "pattern-page-details-simple", "label": "Page details - simple", "group": "Patterns", "subGroup": "page-details", "angularUrl": "/showcase-eds/patterns/page-details/simple", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": false } },
127
+ { "id": "pattern-page-details-advanced", "label": "Page details - advanced", "group": "Patterns", "subGroup": "page-details", "angularUrl": "/showcase-eds/patterns/page-details/advanced", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": false } },
128
+ { "id": "pattern-table-list-anatomy", "label": "Table list - anatomy", "group": "Patterns", "subGroup": "table-list", "angularUrl": "/showcase-eds/patterns/table-list/anatomy", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": false } },
129
+
130
+ { "id": "template-notifications", "label": "Notifications", "group": "Templates", "angularUrl": "/showcase-eds/templates/notifications", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": false } },
131
+ { "id": "template-filter-card-grid", "label": "Filter Card Grid", "group": "Templates", "angularUrl": "/showcase-eds/templates/filter-card-grid", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": false } },
132
+ { "id": "template-dashboard-1", "label": "Dashboard", "group": "Templates", "angularUrl": "/showcase-eds/templates/dashboard-1", "status": "DEMO", "statusColorVariant": "danger", "figmaLink": "", "availability": { "angular": true, "react": true, "webcomponents": false } }
133
+ ]
134
+ }