@eui/eds 22.0.0-alpha.22 → 22.0.0-alpha.24

package/docs/json/EdsButton.md

@@ -6,39 +6,30 @@
 
 EDS Button — a directive-style button component applied on native `<button>` elements.
 
-Supports multiple visual types (primary, secondary, tertiary), color variants
-(primary, neutral, highlight, critical), and sizes (s, m, l) via host directives.
+Supports multiple visual types (primary, secondary, tertiary), semantic color variants
+(primary, neutral, highlight, critical), and sizes (s, m, l) via string inputs reflected
+as host attributes.
 
 Usage:
 ```html
-<button edsButton edsSizeM edsPrimary>Label</button>
-<button edsButton edsButtonSecondary edsNeutral edsSizeS>Cancel</button>
-<button edsButton edsButtonTertiary edsCritical [edsDisabled]="isLoading">Delete</button>
+<button edsButton size="m" color="primary">Label</button>
+<button edsButton type="secondary" color="neutral" size="s">Cancel</button>
+<button edsButton type="tertiary" color="critical" [disabled]="isLoading">Delete</button>
 ```
 
 
 **Selector:** `button[edsButton]`
 
 ## Inputs
+- **avatarButton**: `boolean` - When true, styles the button when used in an avatar trigger (e.g. dropdown trigger, see actionable avatar). false
+- **block**: `boolean` - When true, makes the button full-width (block-level). false
+- **color**: `EdsButtonColor` - Semantic color of the button. 'primary'
+- **disabled**: `boolean` - Controls the disabled state of the button. When true, adds the disabled attribute and prevents interaction. false
 - **e2eAttr**: `string` - Data attribute for e2e testing eds-button
-- **edsAvatarButton**: `boolean` - When true, style the button when used in avatar trigger (for dropdown trigger f.e. see actionable avatar). false
-- **edsBlockButton**: `boolean` - When true, makes the button full-width (block-level). false
-- **edsButtonPrimary**: `boolean` - Boolean shorthand: primary type (default).
-- **edsButtonRounded**: `boolean` - Boolean shorthand: fully rounded border-radius.
-- **edsButtonSecondary**: `boolean` - Boolean shorthand: secondary type.
-- **edsButtonTertiary**: `boolean` - Boolean shorthand: tertiary type.
-- **edsDisabled**: `boolean` - Controls the disabled state of the button. When true, adds the disabled attribute and prevents interaction. false
-- **edsIconButton**: `boolean` - When true, styles the button for icon-only content. false
-- **edsLineWrap**: `boolean` - When true, allows text content to wrap. false
-- **edsTypeVariant**: `EdsButtonType` - String-based type variant for dynamic binding.
+- **iconButton**: `boolean` - When true, styles the button for icon-only content. false
 - **id**: `string | undefined` - ID attribute for the button element
 - **isChecked**: `boolean` - When true, marks the button as initially checked/selected within an eds-button-group. The button-group reads this value during initialization to determine the initial selection state. false
-- **edsSizeS**: `any` - From host directive: #[[file:EdsSizeDirective.md]]
-- **edsSizeM**: `any` - From host directive: #[[file:EdsSizeDirective.md]]
-- **edsSizeL**: `any` - From host directive: #[[file:EdsSizeDirective.md]]
-- **edsSizeVariant**: `any` - From host directive: #[[file:EdsSizeDirective.md]]
-- **edsPrimary**: `any` - From host directive: #[[file:EdsColorDirective.md]]
-- **edsNeutral**: `any` - From host directive: #[[file:EdsColorDirective.md]]
-- **edsHighlight**: `any` - From host directive: #[[file:EdsColorDirective.md]]
-- **edsCritical**: `any` - From host directive: #[[file:EdsColorDirective.md]]
-- **edsColorVariant**: `any` - From host directive: #[[file:EdsColorDirective.md]]
+- **lineWrap**: `boolean` - When true, allows text content to wrap. false
+- **rounded**: `boolean` - When true, applies a fully rounded border-radius. false
+- **size**: `EdsButtonSize` - Size of the button. 'm'
+- **variant**: `EdsButtonType` - Visual type of the button. `primary` = solid surface; `secondary` = bordered; `tertiary` = text/ghost. Named `variant` (not `type`) on the Angular side to avoid clashing with the native `<button type>` attribute; reflected as `[attr.type-variant]` (the React projection exposes this axis as its `type` prop). 'primary'

package/docs/json/EdsFeedbackMessage.md

@@ -5,18 +5,18 @@
 
 
 A feedback message component that displays contextual feedback to users.
-Supports different color variants (info, success, warning, critical) and a muted mode.
+Supports different color variants (primary, neutral, info, success, warning, critical) and a muted mode.
 
 ### Basic feedback message
 ```html
-<eds-feedback-message edsSuccess>
+<eds-feedback-message color="success">
   Operation completed successfully
 </eds-feedback-message>
 ```
 
 ### Muted variant (no icon)
 ```html
-<eds-feedback-message edsWarning isMuted>
+<eds-feedback-message color="warning" isMuted>
   This is a subtle warning message
 </eds-feedback-message>
 ```
@@ -25,12 +25,6 @@ Supports different color variants (info, success, warning, critical) and a muted
 **Selector:** `eds-feedback-message`
 
 ## Inputs
+- **color**: `EdsFeedbackMessageColor` - Semantic color of the feedback message. 'info'
 - **e2eAttr**: `string` - Data attribute value for end-to-end testing identification.
 - **isMuted**: `boolean` - Controls whether the feedback message is displayed in a muted state. When true, the status icon is hidden and the message has reduced visual prominence. false
-- **edsPrimary**: `any` - From host directive: #[[file:EdsColorDirective.md]]
-- **edsNeutral**: `any` - From host directive: #[[file:EdsColorDirective.md]]
-- **edsInfo**: `any` - From host directive: #[[file:EdsColorDirective.md]]
-- **edsWarning**: `any` - From host directive: #[[file:EdsColorDirective.md]]
-- **edsSuccess**: `any` - From host directive: #[[file:EdsColorDirective.md]]
-- **edsCritical**: `any` - From host directive: #[[file:EdsColorDirective.md]]
-- **edsColorVariant**: `any` - From host directive: #[[file:EdsColorDirective.md]]

package/docs/json/EdsIconState.md

@@ -8,6 +8,7 @@
 **Selector:** `eds-icon-state`
 
 ## Inputs
-- **ariaLabel**: `string` - Accessible label for screen readers describing the icon's purpose or meaning. Required for accessibility when the icon conveys semantic information.
+- **ariaLabel**: `string` - Accessible label for screen readers describing the icon's purpose or meaning. When empty, a sensible per-color default is used (e.g. "EDS success icon").
 - **color**: `EdsIconStateColor` - Semantic status color, selecting the corresponding status icon. 'info'
+- **e2eAttr**: `string` - Data attribute value for end-to-end testing identification. 'eds-icon-state'
 - **size**: `EdsIconStateSize` - Size of the status icon. 'm'

package/docs/json/EdsRating.md

@@ -11,8 +11,10 @@
 - **ariaLabel**: `string` - Accessible label for the rating group. 'Rating'
 - **disabled**: `boolean` - Whether the rating is disabled. false
 - **e2eAttr**: `string` - Data attribute value for end-to-end testing identification. 'eds-rating'
+- **invalid**: `boolean` - Whether the rating is in an invalid state. Reflected as the `invalid` host attribute and `aria-invalid` for assistive technologies. false
 - **numberOfStars**: `number` - Number of stars to display. 5
 - **rating**: `number` - Current rating value. 0
+- **readonly**: `boolean` - Whether the rating is read-only. The value is displayed but cannot be changed through user interaction. Unlike `disabled`, the control retains its normal (non-dimmed) appearance. false
 
 ## Outputs
 - **ratingChange**: `number` - Emitted when the rating changes. Payload: the new rating value (number).

package/docs/json/EdsTab.md

@@ -8,7 +8,7 @@
 **Selector:** `eds-tab`
 
 ## Inputs
-- **e2eAttr**: `string` - Data attribute used for end-to-end testing identification. 'eui-tab'
+- **e2eAttr**: `string` - Data attribute used for end-to-end testing identification. 'eds-tab'
 - **euiVariant**: `string` - 
 - **id**: `string` - Unique identifier for the tab. Used for programmatic tab selection and tracking. Required for proper tab management and routing.
 - **isClosable**: `boolean` - Enables a close button on the tab header for dismissible tabs. Allows users to remove or hide the tab from the tab bar. false

package/docs/json/EdsTabs.md

@@ -8,17 +8,16 @@
 **Selector:** `eds-tabs`
 
 ## Inputs
-- **activeTabIndex**: `number` - Index of the active tab  0
-- **ariaLabel**: `string` - Sets the `aria-label` attribute for the host element.  'eUI Tabs'
+- **activeTabIndex**: `number` - Index of the active tab. Two-way bindable.  0
+- **ariaLabel**: `string` - Sets the `aria-label` attribute for the tab list.  'EDS Tabs'
+- **color**: `EdsTabsColor` - Semantic color variant, reflected as the `color` host attribute.  'neutral'
 - **e2eAttr**: `string` - Sets the `data-e2e` attribute for the host element.  'eds-tabs'
 - **isFlat**: `boolean` - 
 - **isMainNavigation**: `boolean` - 
 - **isNavBar**: `boolean` - 
-- **edsBrand**: `any` - From host directive: #[[file:EdsColorDirective.md]]
-- **edsNeutral**: `any` - From host directive: #[[file:EdsColorDirective.md]]
-- **edsColorVariant**: `any` - From host directive: #[[file:EdsColorDirective.md]]
 
 ## Outputs
-- **tabActivate**: `EventEmitter` - Event emitted when a tab is activated
-- **tabClick**: `EventEmitter` - Event emitted when a tab is clicked
-- **tabClose**: `EventEmitter` - Event emitted when a tab is closed
+- **activeTabIndex**: `number` - Index of the active tab. Two-way bindable.  0
+- **tabActivate**: `{ tab: EdsTab; index: number }` - Event emitted when a tab is activated
+- **tabClick**: `{ tab: EdsTab; index: number }` - Event emitted when a tab is clicked
+- **tabClose**: `{ tab: EdsTab; index: number }` - Event emitted when a tab is closed

package/docs/json/EdsTooltip.md

@@ -9,10 +9,10 @@
 
 ## Inputs
 - **color**: `EdsTooltipColor` - Semantic color of the tooltip.  'secondary'
-- **contentAlignment**: `"left" | "right" | "center" | "justify"` - Sets the alignment of the content in the tooltip.  'center''
+- **contentAlignment**: `EdsTooltipContentAlignment` - Sets the alignment of the content in the tooltip.  'center'
 - **e2eAttr**: `string` - Sets the `data-e2e` attribute for the host element.  'eds-tooltip'
-- **edsTooltip**: `string` - Tooltip content.
 - **hideDelay**: `number` - Sets the delay for the tooltip to be hidden  0
 - **isDisabled**: `boolean` - Whether the tooltip is disabled.  false (enable)
-- **position**: `"left" | "right" | "above" | "below" | "before" | "after" | string` - Sets the position of the tooltip relative to its trigger element.  'center''
+- **position**: `EdsTooltipPosition` - Sets the position of the tooltip relative to its trigger element.  'above'
 - **showDelay**: `number` - Sets the delay for the tooltip to be visible.  0
+- **edsTooltip**: `string` - Tooltip content.