@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.78 → 2.0.0-next.80

package/custom-elements.json

@@ -40152,6 +40152,17 @@
               "attribute": "wrapContent",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "fullWidth",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When true, the frame stretches to fill the full width of its container\ninstead of hugging its content. Reflected to an attribute for CSS styling.",
+              "attribute": "fullWidth",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "sharpEdgeTopLeft",
@@ -40275,6 +40286,15 @@
               "description": "When true, the frame wraps and sizes itself to its slotted content instead\nof overlaying a fixed region. Reflected to an attribute for CSS styling.",
               "fieldName": "wrapContent"
             },
+            {
+              "name": "fullWidth",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When true, the frame stretches to fill the full width of its container\ninstead of hugging its content. Reflected to an attribute for CSS styling.",
+              "fieldName": "fullWidth"
+            },
             {
               "name": "sharpEdgeTopLeft",
               "type": {
@@ -54326,7 +54346,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`obc-pagination` – page navigation component for traversing multi-page content.\n\nProvides accessible, keyboard-navigable controls for moving between pages of content, such as tables, lists, or document sets. Includes support for ARIA live region updates and multiple visual variants to fit different UI layouts.\n\nAppears as a horizontal set of navigation buttons (first, previous, next, last) and page indicators, adapting its layout based on the selected variant. Designed for scenarios where users need to move between discrete pages of content, such as paginated tables, search results, or step-based flows.\n\n## Features\n\n- **Variants:**\n  - `regular` (default): Standard pagination with numbered page buttons and navigation arrows.\n  - `flat`: Minimalist style with reduced elevation and flat toggle buttons.\n  - `condensed`: Compact mode showing only progress indicator dots and navigation arrows, ideal for limited space.\n- **Navigation Controls:**\n  - First, previous, next, and last page buttons, each with ARIA labels and disabled states when navigation is not possible.\n- **Page Indicators:**\n  - Numbered toggle buttons for each page (regular/flat), or progress dots (condensed).\n- **Full Width Option:**\n  - Expands the pagination controls to fill the container width for better alignment in wide layouts.\n- **Accessibility:**\n  - ARIA live region announces current page for assistive technologies.\n  - All controls are keyboard accessible.\n- **Responsive:**\n  - Condensed variant adapts to smaller containers with a simplified indicator.\n\n## Usage Guidelines\n\nUse `obc-pagination` to allow users to navigate through paged content, such as tables, lists, or multi-step flows.\n- Choose the `regular` or `flat` variant for standard pagination at the bottom of a page or section.\n- Use the `condensed` variant when space is limited or when a minimal indicator is preferred.\n- Set the `pages` property to the total number of pages, and `currentPage` to the active page (1-based index).\n- The component disables navigation buttons automatically at the first and last page.\n\n**Best Practices:**\n- Only use pagination when content is split into discrete, sequential pages.\n- For infinite scroll or continuous loading, consider alternative navigation patterns.\n- Keep the number of visible page buttons reasonable (Material Design recommends limiting to avoid overwhelming the user).\n- Always provide clear feedback about the current page (the component announces this for screen readers).\n\n**TODO(designer):** Confirm if there are recommended maximums for number of pages, or if there are design guidelines for when to use condensed vs. flat vs. regular in specific contexts.\n\n## Example\n\n```html\n<obc-pagination\n  variant=\"regular\"\n  pages=\"5\"\n  current-page=\"2\"\n></obc-pagination>\n```\n\n## Events\n\n- `value` – Fired when the current page changes (via user interaction).\n- `navigate` – Fired when a navigation arrow (first, previous, next, last) is clicked.",
+          "description": "`obc-pagination` – page navigation component for traversing multi-page content.\n\nProvides accessible, keyboard-navigable controls for moving between pages of content, such as tables, lists, or document sets. Includes support for ARIA live region updates and multiple visual variants to fit different UI layouts.\n\nAppears as a horizontal set of navigation buttons (first, previous, next, last) and page indicators, adapting its layout based on the selected variant. Designed for scenarios where users need to move between discrete pages of content, such as paginated tables, search results, or step-based flows.\n\n## Features\n\n- **Variants:**\n  - `regular` (default): Standard pagination with numbered page buttons and navigation arrows.\n  - `flat`: Minimalist style with reduced elevation and flat toggle buttons.\n  - `condensed`: Compact mode showing only progress indicator dots and navigation arrows, ideal for limited space.\n- **Navigation Controls:**\n  - First, previous, next, and last page buttons, each with ARIA labels and disabled states when navigation is not possible.\n- **Page Indicators:**\n  - Numbered toggle buttons for each page (regular/flat), or progress dots (condensed).\n- **Full Width Option:**\n  - Expands the pagination controls to fill the container width for better alignment in wide layouts.\n- **Accessibility:**\n  - ARIA live region announces current page for assistive technologies.\n  - All controls are keyboard accessible.\n- **Responsive:**\n  - Condensed variant adapts to smaller containers with a simplified indicator.\n\n## Usage Guidelines\n\nUse `obc-pagination` to allow users to navigate through paged content, such as tables, lists, or multi-step flows.\n- Choose the `regular` or `flat` variant for standard pagination at the bottom of a page or section.\n- Use the `condensed` variant when space is limited or when a minimal indicator is preferred.\n- Set the `pages` property to the total number of pages, and `currentPage` to the active page (1-based index).\n- The component disables navigation buttons automatically at the first and last page.\n\n**Best Practices:**\n- Only use pagination when content is split into discrete, sequential pages.\n- For infinite scroll or continuous loading, consider alternative navigation patterns.\n- Keep the number of visible page buttons reasonable (Material Design recommends limiting to avoid overwhelming the user).\n- Always provide clear feedback about the current page (the component announces this for screen readers).\n\n**TODO(designer):** Confirm if there are recommended maximums for number of pages, or if there are design guidelines for when to use condensed vs. flat vs. regular in specific contexts.\n\n## Example\n\n```html\n<obc-pagination\n  variant=\"regular\"\n  pages=\"5\"\n  current-page=\"2\"\n></obc-pagination>\n```\n\n## Events\n\n- `value` – Fired when the current page changes (via user interaction).\n- `navigate` – Fired when a navigation arrow (first, previous, next, last) is clicked.\n- `select-page` – Fired when a specific page is selected.",
           "name": "ObcPagination",
           "members": [
             {
@@ -54513,6 +54533,10 @@
             {
               "description": "{ObcPaginationNavigateEvent} Emitted when a navigation arrow is clicked.",
               "name": "navigate"
+            },
+            {
+              "description": "{ObcPaginationSelectPageEvent} Emitted when a specific page is selected.",
+              "name": "select-page"
             }
           ],
           "attributes": [
@@ -58328,7 +58352,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`<obc-slider-double>` – A dual-thumb range slider for selecting a value interval within a defined range.\n\nThis component allows users to select a minimum and maximum value by dragging two thumbs along a horizontal track. It is commonly used for filtering or specifying ranges (such as price, speed, or time intervals) in forms and dashboards. The slider supports both interactive and read-only display modes, as well as visual variants for different UI needs.\n\nAppears with two draggable handles (thumbs) and labels showing the current low and high values. Optionally, icons can be placed at each end of the slider via slots.\n\n## Features\n- **Dual-thumb range selection:** Users can adjust both the lower and upper bounds of a numeric interval.\n- **Variants:**\n  - **Normal:** Standard slider with compact styling.\n  - **Enhanced:** Larger track and thumb for increased prominence or touch accessibility.\n  - **NoInput:** Read-only mode; disables all user interaction and presents the current range as static.\n- **Configurable range:** Set minimum (`min`), maximum (`max`), and step size (`step`) for precise control.\n- **Step click adjustment:** Use `stepClick` to define increment/decrement amount for keyboard or button-based changes.\n- **Seeking mode:** Enable `allowSeeking` to let users jump to a value by clicking on the track, with smooth animated transitions controlled by `seekingSpeed`.\n- **Custom labels:** Display formatted value labels with unit (`labelUnit`), decimal precision (`labelDecimals`), and adjustable label width (`labelWidth`).\n- **Hug container option:** Remove spacing between slider and container edges with the `hugcontainer` attribute for seamless layout integration.\n- **Icon slots:** Add icons to the left and right ends of the slider using `icon-left` and `icon-right` slots.\n\n## Usage Guidelines\nUse `obc-slider-double` when you need users to specify a numeric range, such as filtering results by minimum and maximum values. Ideal for scenarios like:\n- Filtering items by price, speed, or other continuous values.\n- Selecting a time interval or threshold range.\n- Any UI where a bounded numeric interval is required.\n\nFor single-value selection, use a standard slider component instead. In read-only or summary views, use the `no-input` variant to display the selected range without allowing changes.\n\n**TODO(designer):** Confirm if there are recommended minimum thumb separation or constraints for usability, and if there are best practices for using the enhanced variant.\n\n## Slots\n\n| Slot Name     | Renders When...               | Purpose                                                                                                          |\n|---------------|-------------------------------|------------------------------------------------------------------------------------------------------------------|\n| icon-left     | Always                        | Icon or content at the left end of the slider. Example: `<obi-placeholder slot=\"icon-left\"></obi-placeholder>`   |\n| icon-right    | Always                        | Icon or content at the right end of the slider. Example: `<obi-placeholder slot=\"icon-right\"></obi-placeholder>` |\n| left-readout  | `showLeftReadout` is true     | Custom content for the left (low) readout label. Falls back to the formatted `low` value.                        |\n| right-readout | `showRightReadout` is true    | Custom content for the right (high) readout label. Falls back to the formatted `high` value.                     |\n\n## Properties and Attributes\n- `low` (number): The current lower bound of the selected range.\n- `high` (number): The current upper bound of the selected range.\n- `min` (number): The minimum allowed value (default: 0).\n- `max` (number): The maximum allowed value (default: 100).\n- `step` (number): The increment for value changes (default: 1).\n- `stepClick` (number): Step size for keyboard or button-based changes (default: 10).\n- `variant` (`normal` | `enhanced` | `no-input`): Visual and interaction style (default: `normal`).\n- `allowSeeking` (boolean): If true, clicking the track animates the thumb to the clicked position.\n- `seekingSpeed` (number): Animation speed for seeking (default: 1/3, i.e., full range in 3 seconds).\n- `labelUnit` (string): Unit label appended to value labels (e.g., `\"%\"`, `\"kn\"`).\n- `labelDecimals` (number): Number of decimal places for value labels.\n- `labelWidth` (string): CSS width for value labels (e.g., `\"5ch\"`, `\"60px\"`).\n- `showLeftReadout` (boolean, property only): Show the left (low) readout label. Default `true`.\n- `showRightReadout` (boolean, property only): Show the right (high) readout label. Default `true`.\n- `hugcontainer` (attribute): If present, removes spacing between slider and container edges.\n\n## Events\n- `value` – Fired whenever the low or high value changes. Event detail contains `{low, high}`.\n\n## Best Practices and Constraints\n- Ensure `low` is always less than or equal to `high`; the component enforces this automatically.\n- For accessibility, provide clear labels and units so users understand the meaning of the range.\n- Use the `no-input` variant for summary or review screens where editing is not allowed.\n- When using `allowSeeking`, set an appropriate `seekingSpeed` for smooth but responsive thumb movement.\n- Avoid setting `step` too small for large ranges, as this may make precise selection difficult.\n\n## Example\n\n```html\n<obc-slider-double\n  min=\"0\"\n  max=\"100\"\n  low=\"20\"\n  high=\"80\"\n  step=\"5\"\n  label-unit=\"%\"\n  label-decimals=\"0\"\n  variant=\"enhanced\"\n  allowSeeking\n>\n  <obi-placeholder slot=\"icon-left\"></obi-placeholder>\n  <obi-placeholder slot=\"icon-right\"></obi-placeholder>\n</obc-slider-double>\n```\n\nIn this example, the slider allows selection of a percentage range from 0 to 100, with 5% increments, enhanced styling, and seeking enabled.",
+          "description": "`<obc-slider-double>` – A dual-thumb range slider for selecting a value interval within a defined range.\n\nThis component allows users to select a minimum and maximum value by dragging two thumbs along a horizontal track. It is commonly used for filtering or specifying ranges (such as price, speed, or time intervals) in forms and dashboards. The slider supports both interactive and read-only display modes, as well as visual variants for different UI needs.\n\nAppears with two draggable handles (thumbs) and labels showing the current low and high values. Optionally, icons can be placed at each end of the slider via slots.\n\n## Features\n- **Dual-thumb range selection:** Users can adjust both the lower and upper bounds of a numeric interval.\n- **Variants:**\n  - **Normal:** Standard slider with compact styling.\n  - **Enhanced:** Larger track and thumb for increased prominence or touch accessibility.\n  - **NoInput:** Read-only mode; disables all user interaction and presents the current range as static.\n- **Configurable range:** Set minimum (`min`), maximum (`max`), and step size (`step`) for precise control.\n- **Step click adjustment:** Use `stepClick` to define increment/decrement amount for keyboard or button-based changes.\n- **Seeking mode:** Enable `allowSeeking` to let users jump to a value by clicking on the track, with smooth animated transitions controlled by `seekingSpeed`.\n- **Custom labels:** Display formatted value labels with unit (`labelUnit`), decimal precision (`labelDecimals`), and adjustable label width (`labelWidth`).\n- **Hug container option:** Remove spacing between slider and container edges with the `hugcontainer` attribute for seamless layout integration.\n- **Icon slots:** Add icons to the left and right ends of the slider using `icon-left` and `icon-right` slots.\n\n## Usage Guidelines\nUse `obc-slider-double` when you need users to specify a numeric range, such as filtering results by minimum and maximum values. Ideal for scenarios like:\n- Filtering items by price, speed, or other continuous values.\n- Selecting a time interval or threshold range.\n- Any UI where a bounded numeric interval is required.\n\nFor single-value selection, use a standard slider component instead. In read-only or summary views, use the `no-input` variant to display the selected range without allowing changes.\n\n**TODO(designer):** Confirm if there are recommended minimum thumb separation or constraints for usability, and if there are best practices for using the enhanced variant.\n\n## Slots\n\n| Slot Name     | Renders When...               | Purpose                                                                                                          |\n|---------------|-------------------------------|------------------------------------------------------------------------------------------------------------------|\n| icon-left     | Always                        | Icon or content at the left end of the slider. Example: `<obi-placeholder slot=\"icon-left\"></obi-placeholder>`   |\n| icon-right    | Always                        | Icon or content at the right end of the slider. Example: `<obi-placeholder slot=\"icon-right\"></obi-placeholder>` |\n| left-readout  | `showLeftReadout` is true     | Custom content for the left (low) readout label. Falls back to the formatted `low` value.                        |\n| right-readout | `showRightReadout` is true    | Custom content for the right (high) readout label. Falls back to the formatted `high` value.                     |\n\n## Properties and Attributes\n- `low` (number): The current lower bound of the selected range.\n- `high` (number): The current upper bound of the selected range.\n- `min` (number): The minimum allowed value (default: 0).\n- `max` (number): The maximum allowed value (default: 100).\n- `step` (number): The increment for value changes (default: 1).\n- `stepClick` (number): Step size for keyboard or button-based changes (default: 10).\n- `variant` (`normal` | `enhanced` | `no-input`): Visual and interaction style (default: `normal`).\n- `allowSeeking` (boolean): If true, clicking the track animates the thumb to the clicked position.\n- `seekingSpeed` (number): Animation speed for seeking (default: 1/3, i.e., full range in 3 seconds).\n- `labelUnit` (string): Unit label appended to value labels (e.g., `\"%\"`, `\"kn\"`).\n- `labelDecimals` (number): Number of decimal places for value labels.\n- `labelWidth` (string): CSS width for value labels (e.g., `\"5ch\"`, `\"60px\"`).\n- `showLeftReadout` (boolean, property only): Show the left (low) readout label. Default `true`.\n- `showRightReadout` (boolean, property only): Show the right (high) readout label. Default `true`.\n- `hugcontainer` (attribute): If present, removes spacing between slider and container edges.\n\n## Events\n- `value` – Fired continuously whenever the low or high value changes during user interaction. Event detail contains `{low, high}`.\n- `change` – Fired only after user interaction completes (mouse release). Event detail contains `{low, high}`.\n\n## Best Practices and Constraints\n- Ensure `low` is always less than or equal to `high`; the component enforces this automatically.\n- For accessibility, provide clear labels and units so users understand the meaning of the range.\n- Use the `no-input` variant for summary or review screens where editing is not allowed.\n- When using `allowSeeking`, set an appropriate `seekingSpeed` for smooth but responsive thumb movement.\n- Avoid setting `step` too small for large ranges, as this may make precise selection difficult.\n\n## Example\n\n```html\n<obc-slider-double\n  min=\"0\"\n  max=\"100\"\n  low=\"20\"\n  high=\"80\"\n  step=\"5\"\n  label-unit=\"%\"\n  label-decimals=\"0\"\n  variant=\"enhanced\"\n  allowSeeking\n>\n  <obi-placeholder slot=\"icon-left\"></obi-placeholder>\n  <obi-placeholder slot=\"icon-right\"></obi-placeholder>\n</obc-slider-double>\n```\n\nIn this example, the slider allows selection of a percentage range from 0 to 100, with 5% increments, enhanced styling, and seeking enabled.",
           "name": "ObcSliderDouble",
           "slots": [
             {
@@ -58621,6 +58645,12 @@
               "name": "onInput",
               "description": "Handles input changes from the slider thumbs.\nUpdates the low and high values and emits the `value` event."
             },
+            {
+              "kind": "method",
+              "name": "fireChangeEvent",
+              "privacy": "private",
+              "description": "Fires the `change` event with the current low and high values."
+            },
             {
               "kind": "field",
               "name": "THUMB_WIDTH",
@@ -58820,6 +58850,10 @@
                 "text": "CustomEvent"
               },
               "description": "{ObcSliderDoubleValueEvent} - Fires when the value is changed"
+            },
+            {
+              "description": "{ObcSliderDoubleChangeEvent} - Fires when user interaction completes",
+              "name": "change"
             }
           ],
           "attributes": [
@@ -58976,7 +59010,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`<obc-slider>` – A horizontal slider component for selecting a numeric value within a defined range.\n\nProvides a visual and interactive way for users to adjust values such as volume, brightness, or other continuous settings. The slider supports optional step increments, left/right icon buttons for quick adjustments, and can be configured for read-only display or enhanced visual prominence.\n\nAppears as a horizontal track with a draggable thumb, and may include optional icon buttons on either side for increment/decrement actions. The component can be used for both direct manipulation (dragging the thumb) and discrete changes (via buttons).\n\n---\n\n### Features\n- **Variants:**\n  - **Normal:** Standard slider with a slim track and thumb.\n  - **Enhanced:** Larger track and thumb for improved accessibility and visual emphasis.\n  - **No Input:** Read-only mode; disables all user interaction and presents the current value visually.\n- **Value Range:** Supports configurable `min`, `max`, and `step` properties for precise control over allowed values.\n- **Step Buttons:** Optional left and right icon buttons allow users to increment or decrement the value by a defined step (`stepClick`).\n- **Icons:** Custom icons can be slotted into the left and right button positions for contextual meaning (e.g., `<obi-arrow></obi-arrow>, <obi-placeholder></obi-placeholder>`).\n- **Seeking:** When `allowSeeking` is enabled, users can click or drag along the track to set the value, with smooth animated transitions based on `seekingSpeed`.\n- **Hug Container:** The `hugcontainer` attribute removes spacing between the slider and its icon buttons, allowing for a compact layout.\n- **Accessibility:** Underlying input is a native `<input type=\"range\">` for keyboard and screen reader support.\n\n---\n\n### Usage Guidelines\nUse `obc-slider` when you need users to select or adjust a value within a continuous or stepped range, such as for volume, brightness, or similar controls. The enhanced variant is suitable for scenarios where the slider is a primary control or needs to be more visually prominent. The no-input variant is ideal for displaying a value without allowing user changes.\n\n- For discrete, step-based changes, provide `step` and/or `stepClick` values.\n- Use left/right icons to clarify the meaning of the adjustment (e.g., low/high, decrease/increase).\n- Enable `allowSeeking` for scenarios where users should be able to jump to a specific value by clicking the track.\n- Use `hugcontainer` when the slider should visually connect tightly with its icon buttons.\n\n**TODO(designer):** Clarify recommended use cases for each variant and when to use `allowSeeking` vs. standard interaction.\n\n---\n\n### Slots\n\n| Slot Name   | Renders When...            | Purpose                                    |\n|-------------|---------------------------|--------------------------------------------|\n| icon-left   | `hasLeftIcon` is true     | Icon/button for decrement action            |\n| icon-right  | `hasRightIcon` is true    | Icon/button for increment action            |\n\n---\n\n### Properties and Attributes\n- `value` (number): Current slider value. Updates as the user interacts.\n- `min` (number): Minimum allowed value (default: 0).\n- `max` (number): Maximum allowed value (default: 100).\n- `step` (number): Step granularity for value changes (optional).\n- `stepClick` (number): Amount to increment/decrement when clicking icon buttons (default: 10).\n- `variant` (ObcSliderVariant): Visual/interaction style (`normal`, `enhanced`, `no-input`). Default: `normal`.\n- `hasLeftIcon`/`hasRightIcon` (boolean): Show icon button on left/right.\n- `allowSeeking` (boolean): Enables animated seeking to clicked value on the track.\n- `seekingSpeed` (number): Animation speed for seeking (default: 1/3; higher is faster).\n- `hugcontainer` (attribute): Removes spacing between slider and icon buttons for a compact layout.\n\n---\n\n### Events\n- `value` – Fired when the slider value changes, either by user interaction or programmatically. The event detail contains the new value as a number.\n\n---\n\n### Best Practices & Constraints\n- Only use `no-input` variant for read-only display; interactive controls should use `normal` or `enhanced`.\n- For accessibility, ensure the slider has a visible label or context.\n- Use step values that make sense for the range (e.g., avoid step=0.01 for a 0–10 range unless fine granularity is needed).\n- When using icon buttons, provide icons that clearly indicate their function.\n- The slider is horizontal only; for vertical sliders, use a different component.\n\n---\n\n### Example\n\n```html\n<obc-slider\n  value=\"40\"\n  min=\"0\"\n  max=\"100\"\n  step=\"10\"\n  haslefticon\n  hasrighticon\n  variant=\"enhanced\"\n>\n  <obi-arrow slot=\"icon-left\"></obi-arrow>\n  <obi-arrow slot=\"icon-right\"></obi-arrow>\n</obc-slider>\n```\n\nIn this example, the slider allows selection from 0 to 100 in steps of 10, with left/right arrow icons for quick adjustments.",
+          "description": "`<obc-slider>` – A horizontal slider component for selecting a numeric value within a defined range.\n\nProvides a visual and interactive way for users to adjust values such as volume, brightness, or other continuous settings. The slider supports optional step increments, left/right icon buttons for quick adjustments, and can be configured for read-only display or enhanced visual prominence.\n\nAppears as a horizontal track with a draggable thumb, and may include optional icon buttons on either side for increment/decrement actions. The component can be used for both direct manipulation (dragging the thumb) and discrete changes (via buttons).\n\n---\n\n### Features\n- **Variants:**\n  - **Normal:** Standard slider with a slim track and thumb.\n  - **Enhanced:** Larger track and thumb for improved accessibility and visual emphasis.\n  - **No Input:** Read-only mode; disables all user interaction and presents the current value visually.\n- **Value Range:** Supports configurable `min`, `max`, and `step` properties for precise control over allowed values.\n- **Step Buttons:** Optional left and right icon buttons allow users to increment or decrement the value by a defined step (`stepClick`).\n- **Icons:** Custom icons can be slotted into the left and right button positions for contextual meaning (e.g., `<obi-arrow></obi-arrow>, <obi-placeholder></obi-placeholder>`).\n- **Seeking:** When `allowSeeking` is enabled, users can click or drag along the track to set the value, with smooth animated transitions based on `seekingSpeed`.\n- **Hug Container:** The `hugcontainer` attribute removes spacing between the slider and its icon buttons, allowing for a compact layout.\n- **Accessibility:** Underlying input is a native `<input type=\"range\">` for keyboard and screen reader support.\n\n---\n\n### Usage Guidelines\nUse `obc-slider` when you need users to select or adjust a value within a continuous or stepped range, such as for volume, brightness, or similar controls. The enhanced variant is suitable for scenarios where the slider is a primary control or needs to be more visually prominent. The no-input variant is ideal for displaying a value without allowing user changes.\n\n- For discrete, step-based changes, provide `step` and/or `stepClick` values.\n- Use left/right icons to clarify the meaning of the adjustment (e.g., low/high, decrease/increase).\n- Enable `allowSeeking` for scenarios where users should be able to jump to a specific value by clicking the track.\n- Use `hugcontainer` when the slider should visually connect tightly with its icon buttons.\n\n**TODO(designer):** Clarify recommended use cases for each variant and when to use `allowSeeking` vs. standard interaction.\n\n---\n\n### Slots\n\n| Slot Name   | Renders When...            | Purpose                                    |\n|-------------|---------------------------|--------------------------------------------|\n| icon-left   | `hasLeftIcon` is true     | Icon/button for decrement action            |\n| icon-right  | `hasRightIcon` is true    | Icon/button for increment action            |\n\n---\n\n### Properties and Attributes\n- `value` (number): Current slider value. Updates as the user interacts.\n- `min` (number): Minimum allowed value (default: 0).\n- `max` (number): Maximum allowed value (default: 100).\n- `step` (number): Step granularity for value changes (optional).\n- `stepClick` (number): Amount to increment/decrement when clicking icon buttons (default: 10).\n- `variant` (ObcSliderVariant): Visual/interaction style (`normal`, `enhanced`, `no-input`). Default: `normal`.\n- `hasLeftIcon`/`hasRightIcon` (boolean): Show icon button on left/right.\n- `allowSeeking` (boolean): Enables animated seeking to clicked value on the track.\n- `seekingSpeed` (number): Animation speed for seeking (default: 1/3; higher is faster).\n- `hugcontainer` (attribute): Removes spacing between slider and icon buttons for a compact layout.\n\n---\n\n### Events\n- `value` – Fired continuously when the slider value changes during user interaction or programmatically. The event detail contains the new value as a number.\n- `change` – Fired only after user interaction completes (mouse/touch release or button click). The event detail contains the new value as a number.\n\n---\n\n### Best Practices & Constraints\n- Only use `no-input` variant for read-only display; interactive controls should use `normal` or `enhanced`.\n- For accessibility, ensure the slider has a visible label or context.\n- Use step values that make sense for the range (e.g., avoid step=0.01 for a 0–10 range unless fine granularity is needed).\n- When using icon buttons, provide icons that clearly indicate their function.\n- The slider is horizontal only; for vertical sliders, use a different component.\n\n---\n\n### Example\n\n```html\n<obc-slider\n  value=\"40\"\n  min=\"0\"\n  max=\"100\"\n  step=\"10\"\n  haslefticon\n  hasrighticon\n  variant=\"enhanced\"\n>\n  <obi-arrow slot=\"icon-left\"></obi-arrow>\n  <obi-arrow slot=\"icon-right\"></obi-arrow>\n</obc-slider>\n```\n\nIn this example, the slider allows selection from 0 to 100 in steps of 10, with left/right arrow icons for quick adjustments.",
           "name": "ObcSlider",
           "slots": [
             {
@@ -59178,6 +59212,12 @@
               ],
               "description": "Handles input changes from the slider or buttons.\nFires the `value` event with the new value."
             },
+            {
+              "kind": "method",
+              "name": "fireChangeEvent",
+              "privacy": "private",
+              "description": "Fires the `change` event with the current value."
+            },
             {
               "kind": "method",
               "name": "onReduceClick",
@@ -59323,6 +59363,10 @@
                 "text": "CustomEvent"
               },
               "description": "{ObcSliderValueEvent} - Fired when the value is changed"
+            },
+            {
+              "description": "{ObcSliderChangeEvent} - Fired when user interaction completes and value has changed",
+              "name": "change"
             }
           ],
           "attributes": [
@@ -65266,11 +65310,18 @@
                   }
                 },
                 {
-                  "name": "emitEvent",
+                  "name": "emitValueEvent",
                   "default": "true",
                   "type": {
                     "text": "boolean"
                   }
+                },
+                {
+                  "name": "emitChangeEvent",
+                  "default": "false",
+                  "type": {
+                    "text": "boolean"
+                  }
                 }
               ]
             },
@@ -65323,6 +65374,13 @@
                 "text": "CustomEvent"
               },
               "description": "{CustomEvent<{value: string, previousValue: string}>} Fired when the selected value changes."
+            },
+            {
+              "name": "change",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "{CustomEvent<{value: string}>} Fired when the selected value changes by user interaction."
             }
           ],
           "attributes": [
@@ -65930,11 +65988,18 @@
                   }
                 },
                 {
-                  "name": "emitEvent",
+                  "name": "emitValueEvent",
                   "default": "true",
                   "type": {
                     "text": "boolean"
                   }
+                },
+                {
+                  "name": "emitChangeEvent",
+                  "default": "false",
+                  "type": {
+                    "text": "boolean"
+                  }
                 }
               ]
             },
@@ -65979,6 +66044,13 @@
                 "text": "CustomEvent"
               },
               "description": "{CustomEvent<{value: string, previousValue: string}>} Fired when the selected value changes."
+            },
+            {
+              "name": "change",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "{CustomEvent<{value: string}>} Fired when the selected value changes by user interaction."
             }
           ],
           "attributes": [
@@ -66380,6 +66452,19 @@
                 }
               ],
               "description": "Handles input events to change the toggle state.\nPrevents changes if the toggle is disabled."
+            },
+            {
+              "kind": "method",
+              "name": "_fireChangeEvent",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
             }
           ],
           "events": [
@@ -66389,6 +66474,13 @@
                 "text": "CustomEvent"
               },
               "description": "{ObcToggleSwitchInputEvent} Dispatched when the value of the input changes"
+            },
+            {
+              "name": "change",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Dispatched when the value of the input changes by user interaction"
             }
           ],
           "attributes": [

package/dist/components/alert-frame/alert-frame.css.js

@@ -15,6 +15,11 @@ const compentStyle = css`
   height: fit-content;
 }
 
+:host([fullwidth]) {
+  display: block;
+  width: 100%;
+}
+
 .wrapper {
   --bg-color: var(--alert-alarm-color);
   --thickness: var(--global-size-spacing-border-weight-alertframe);
@@ -41,6 +46,10 @@ const compentStyle = css`
     height: fit-content;
   }
 
+.wrapper.full-width {
+    width: 100%;
+  }
+
 .wrapper {
 
   --blink-width-dynamic: calc(var(--blink-width) * var(--blink-on));

package/dist/components/alert-frame/alert-frame.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert-frame.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"alert-frame.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/alert-frame/alert-frame.d.ts

@@ -167,6 +167,11 @@ export declare class ObcAlertFrame extends LitElement {
      * of overlaying a fixed region. Reflected to an attribute for CSS styling.
      */
     wrapContent: boolean;
+    /**
+     * When true, the frame stretches to fill the full width of its container
+     * instead of hugging its content. Reflected to an attribute for CSS styling.
+     */
+    fullWidth: boolean;
     /**
      * If true, the top-left corner will be sharp (not rounded).
      */
@@ -191,7 +196,7 @@ export declare class ObcAlertFrame extends LitElement {
     private renderBadgeIcon;
     static styles: import('lit').CSSResult;
 }
-export declare function wrapWithAlertFrame(options: AlertFrameConfig | boolean | undefined, content: HTMLTemplateResult): HTMLTemplateResult;
+export declare function wrapWithAlertFrame(options: AlertFrameConfig | boolean | undefined, content: HTMLTemplateResult, fullWidth?: boolean): HTMLTemplateResult;
 declare global {
     interface HTMLElementTagNameMap {
         'obc-alert-frame': ObcAlertFrame;

package/dist/components/alert-frame/alert-frame.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"alert-frame.d.ts","sourceRoot":"","sources":["../../../src/components/alert-frame/alert-frame.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EAIV,cAAc,EACd,kBAAkB,EACnB,MAAM,KAAK,CAAC;AAIb,OAAO,iCAAiC,CAAC;AACzC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,mCAAmC,CAAC;AAC3C,OAAO,qBAAqB,CAAC;AAC7B,OAAO,uBAAuB,CAAC;AAE/B,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAMzC,OAAO,EAAC,SAAS,IAAI,mBAAmB,EAAC,MAAM,gBAAgB,CAAC;AAEhE;;;;;;;GAOG;AACH,oBAAY,iBAAiB;IAC3B,OAAO,YAAY;IACnB,aAAa,oBAAoB;IACjC,aAAa,oBAAoB;IACjC,UAAU,gBAAgB;IAC1B,OAAO,aAAa;CACrB;AAED;;;;GAIG;AACH,oBAAY,sBAAsB;IAChC,KAAK,UAAU;IACf,KAAK,UAAU;CAChB;AAED,oBAAY,iBAAiB;IAC3B,WAAW,iBAAiB;IAC5B,aAAa,mBAAmB;IAChC,gBAAgB,sBAAsB;CACvC;AAED;;;;GAIG;AACH,oBAAY,kBAAkB;IAC5B,OAAO,YAAY;IACnB,KAAK,UAAU;CAChB;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,SAAS,CAAC,EAAE,sBAAsB,CAAC;IACnC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4EG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C;;;;;;;;OAQG;IACuB,IAAI,EAAE,iBAAiB,CACf;IAElC;;;;OAIG;IACuB,SAAS,EAAE,sBAAsB,CAC5B;IAE/B;;;;;;OAMG;IACuB,MAAM,EAAE,SAAS,CAAmB;IAE9D;;;;;OAKG;IACuB,IAAI,EAAE,iBAAiB,CACjB;IAEhC;;;OAGG;IACuC,WAAW,EAAE,OAAO,CAAS;IAEvE;;OAEG;IACwB,gBAAgB,EAAE,OAAO,CAAS;IAE7D;;OAEG;IACwB,iBAAiB,EAAE,OAAO,CAAS;IAE9D;;OAEG;IACwB,mBAAmB,EAAE,OAAO,CAAS;IAEhE;;OAEG;IACwB,oBAAoB,EAAE,OAAO,CAAS;IAEvC,QAAQ,EAAE,kBAAkB,CACzB;IAEF,QAAQ,EAAE,OAAO,CAAS;IACR,qBAAqB,EAAE,OAAO,CACpE;IAEE,MAAM;IAuBf,OAAO,CAAC,IAAI;IAmEZ,OAAO,CAAC,eAAe;IAmBvB,OAAgB,MAAM,0BAA2B;CAClD;AAED,wBAAgB,kBAAkB,CAChC,OAAO,EAAE,gBAAgB,GAAG,OAAO,GAAG,SAAS,EAC/C,OAAO,EAAE,kBAAkB,GAC1B,kBAAkB,CAcpB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}
+{"version":3,"file":"alert-frame.d.ts","sourceRoot":"","sources":["../../../src/components/alert-frame/alert-frame.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EAIV,cAAc,EACd,kBAAkB,EACnB,MAAM,KAAK,CAAC;AAIb,OAAO,iCAAiC,CAAC;AACzC,OAAO,mCAAmC,CAAC;AAC3C,OAAO,mCAAmC,CAAC;AAC3C,OAAO,qBAAqB,CAAC;AAC7B,OAAO,uBAAuB,CAAC;AAE/B,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAMzC,OAAO,EAAC,SAAS,IAAI,mBAAmB,EAAC,MAAM,gBAAgB,CAAC;AAEhE;;;;;;;GAOG;AACH,oBAAY,iBAAiB;IAC3B,OAAO,YAAY;IACnB,aAAa,oBAAoB;IACjC,aAAa,oBAAoB;IACjC,UAAU,gBAAgB;IAC1B,OAAO,aAAa;CACrB;AAED;;;;GAIG;AACH,oBAAY,sBAAsB;IAChC,KAAK,UAAU;IACf,KAAK,UAAU;CAChB;AAED,oBAAY,iBAAiB;IAC3B,WAAW,iBAAiB;IAC5B,aAAa,mBAAmB;IAChC,gBAAgB,sBAAsB;CACvC;AAED;;;;GAIG;AACH,oBAAY,kBAAkB;IAC5B,OAAO,YAAY;IACnB,KAAK,UAAU;CAChB;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,SAAS,CAAC,EAAE,sBAAsB,CAAC;IACnC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,QAAQ,CAAC,EAAE,kBAAkB,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4EG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C;;;;;;;;OAQG;IACuB,IAAI,EAAE,iBAAiB,CACf;IAElC;;;;OAIG;IACuB,SAAS,EAAE,sBAAsB,CAC5B;IAE/B;;;;;;OAMG;IACuB,MAAM,EAAE,SAAS,CAAmB;IAE9D;;;;;OAKG;IACuB,IAAI,EAAE,iBAAiB,CACjB;IAEhC;;;OAGG;IACuC,WAAW,EAAE,OAAO,CAAS;IAEvE;;;OAGG;IACuC,SAAS,EAAE,OAAO,CAAS;IAErE;;OAEG;IACwB,gBAAgB,EAAE,OAAO,CAAS;IAE7D;;OAEG;IACwB,iBAAiB,EAAE,OAAO,CAAS;IAE9D;;OAEG;IACwB,mBAAmB,EAAE,OAAO,CAAS;IAEhE;;OAEG;IACwB,oBAAoB,EAAE,OAAO,CAAS;IAEvC,QAAQ,EAAE,kBAAkB,CACzB;IAEF,QAAQ,EAAE,OAAO,CAAS;IACR,qBAAqB,EAAE,OAAO,CACpE;IAEE,MAAM;IAwBf,OAAO,CAAC,IAAI;IAmEZ,OAAO,CAAC,eAAe;IAmBvB,OAAgB,MAAM,0BAA2B;CAClD;AAED,wBAAgB,kBAAkB,CAChC,OAAO,EAAE,gBAAgB,GAAG,OAAO,GAAG,SAAS,EAC/C,OAAO,EAAE,kBAAkB,EAC3B,SAAS,GAAE,OAAe,GACzB,kBAAkB,CAepB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}

package/dist/components/alert-frame/alert-frame.js

@@ -52,6 +52,7 @@ let ObcAlertFrame = class extends LitElement {
     this.status = AlertType.Alarm;
     this.mode = "acked-active";
     this.wrapContent = false;
+    this.fullWidth = false;
     this.sharpEdgeTopLeft = false;
     this.sharpEdgeTopRight = false;
     this.sharpEdgeBottomLeft = false;
@@ -66,6 +67,7 @@ let ObcAlertFrame = class extends LitElement {
         class=${classMap({
       wrapper: true,
       "wrap-content": this.wrapContent,
+      "full-width": this.fullWidth,
       ["thickness-" + this.thickness]: true,
       [this.type]: true,
       [this.status]: true,
@@ -163,6 +165,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], ObcAlertFrame.prototype, "wrapContent", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], ObcAlertFrame.prototype, "fullWidth", 2);
 __decorateClass([
   property({ type: Boolean })
 ], ObcAlertFrame.prototype, "sharpEdgeTopLeft", 2);
@@ -187,7 +192,7 @@ __decorateClass([
 ObcAlertFrame = __decorateClass([
   customElement("obc-alert-frame")
 ], ObcAlertFrame);
-function wrapWithAlertFrame(options, content) {
+function wrapWithAlertFrame(options, content, fullWidth = false) {
   if (typeof options !== "object" || options === null) {
     return content;
   }
@@ -199,6 +204,7 @@ function wrapWithAlertFrame(options, content) {
     .showIcon=${options.showIcon ?? false}
     .showAlertCategoryIcon=${options.showAlertCategoryIcon ?? true}
     .wrapContent=${true}
+    .fullWidth=${fullWidth}
     >${content}</obc-alert-frame
   >`;
 }

package/dist/components/alert-frame/alert-frame.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert-frame.js","sources":["../../../src/components/alert-frame/alert-frame.ts"],"sourcesContent":["import {\n  LitElement,\n  html,\n  unsafeCSS,\n  nothing,\n  TemplateResult,\n  HTMLTemplateResult,\n} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport compentStyle from './alert-frame.css?inline';\nimport {classMap} from 'lit/directives/class-map.js';\nimport '../../icons/icon-alarm-badge.js';\nimport '../../icons/icon-warning-badge.js';\nimport '../../icons/icon-caution-badge.js';\nimport './critical-badge.js';\nimport './diagnostic-badge.js';\nimport {customElement} from '../../decorator.js';\nimport {AlertType} from '../../types.js';\nimport {\n  getAlertBadgeComponent,\n  AlertBadgeComponent,\n} from '../../alert-severity.js';\n\nexport {AlertType as ObcAlertFrameStatus} from '../../types.js';\n\n/**\n * Enum representing the available frame styles for an alert component.\n *\n * - Regular (\"regular\"): Standard alert frame layout.\n * - SmallSideFlip (\"small-side-flip\"): Flipped frame with a small side edge.\n * - LargeSideFlip (\"large-side-flip\"): Flipped frame with a large side edge.\n * - BottomFlip (\"bottom-flip\"): Frame flipped to the bottom position.\n */\nexport enum ObcAlertFrameType {\n  Regular = 'regular',\n  SmallSideFlip = 'small-side-flip',\n  LargeSideFlip = 'large-side-flip',\n  BottomFlip = 'bottom-flip',\n  TopFlip = 'top-flip',\n}\n\n/**\n * Thickness options for the alert frame border.\n * - `small`: Thin border (default).\n * - `large`: Thick border for higher emphasis.\n */\nexport enum ObcAlertFrameThickness {\n  Small = 'small',\n  Large = 'large',\n}\n\nexport enum ObcAlertFrameMode {\n  ackedActive = 'acked-active',\n  unackedActive = 'unacked-active',\n  unackedRectified = 'unacked-rectified',\n}\n\n/**\n * Text size options for flip-flap typography.\n * - `regular`: Standard text size (default).\n * - `large`: Larger text for increased visibility.\n */\nexport enum AlertFrameTextSize {\n  Regular = 'regular',\n  Large = 'large',\n}\n\nexport interface AlertFrameConfig {\n  type?: ObcAlertFrameType;\n  thickness?: ObcAlertFrameThickness;\n  status?: AlertType;\n  mode?: ObcAlertFrameMode;\n  textSize?: AlertFrameTextSize;\n  showIcon?: boolean;\n  showAlertCategoryIcon?: boolean;\n}\n\n/**\n * `<obc-alert-frame>` – A bordered frame component for visually emphasizing alert or status messages.\n *\n * The alert frame provides a prominent outline and optional \"flap\" with status icon to draw attention to critical information or UI regions. It supports multiple visual variants and thicknesses, and can be configured to indicate different alert statuses (alarm, warning, caution). The component is designed to wrap content and visually distinguish it from the surrounding UI.\n *\n * ### Features\n * - **Variants (type):**\n *   - `regular`: Standard outlined frame with no flap or icon.\n *   - `small-side-flip`: Adds a small side flap with a status icon at the top right.\n *   - `large-side-flip`: Adds a larger, vertical side flap with a status icon and optional custom icon.\n *   - `bottom-flip`: Adds a bottom flap with a status icon, label, and timer slots.\n * - **Thickness options:** Choose between `small` (thin border) and `large` (thick border) for visual emphasis.\n * - **Status indication:** Displays different color schemes and icons for the legacy statuses (`alarm`, `warning`, `caution`) and the level statuses (`level-critical`, `level-high`, `level-medium`, `level-low`, `level-diagnostic`).\n * - **Acknowledgement mode:** The `mode` property reflects the alert lifecycle state — `acked-active` (default), `unacked-active`, and `unacked-rectified` — driving the blinking/animation treatment of the frame.\n * - **Content wrapping:** When `wrapContent` is true, the frame wraps and sizes itself to its slotted content rather than overlaying a fixed region.\n * - **Customizable corners:** Each corner can be set to a sharp (non-rounded) edge for integration with other UI elements.\n * - **Slot-based content:** Supports custom icons, labels, and timers in flap variants via named slots.\n *\n * ### Usage Guidelines\n * Use `obc-alert-frame` to highlight important content, such as alerts, warnings, or status panels. The flap variants are ideal for drawing extra attention to urgent or time-sensitive information, while the regular type provides a subtle but clear border. Choose the status to match the severity of the message (alarm, warning, caution). Adjust thickness for visual hierarchy—use large for high-priority alerts and small for less critical notices.\n *\n * **TODO(designer):** Provide guidance on when to use each flap type (small-side-flip, large-side-flip, bottom-flip) and recommended scenarios for sharp edge usage.\n *\n * ### Features/Variants\n * - **Type (Visual Variant):**\n *   - `regular`: Simple outlined frame, no flap or icon.\n *   - `small-side-flip`: Small right-side flap with status icon.\n *   - `large-side-flip`: Large vertical right-side flap with status icon and optional custom icon.\n *   - `bottom-flip`: Bottom flap with status icon, label, and timer.\n * - **Thickness:** `small` (default) or `large` for border width.\n * - **Status:** `alarm`, `warning`, `caution`, or the level severities (`level-critical`, `level-high`, `level-medium`, `level-low`, `level-diagnostic`)—affects color and icon.\n * - **Mode:** `acked-active` (default), `unacked-active`, or `unacked-rectified`—affects blinking/animation.\n * - **Corner Customization:** Each corner can be made sharp (not rounded) via boolean properties.\n *\n * ### Slots and Content Structure\n *\n * | Slot Name | Renders When... | Purpose |\n * |-----------|-----------------|---------|\n * | (default) | Always | Main content inside the alert frame. |\n * | icon | `large-side-flip` or `bottom-flip` | Custom icon displayed in the flap (in addition to status icon). |\n * | label | `bottom-flip` only | Label text shown in the bottom flap. |\n * | timer | `bottom-flip` only | Timer or time label in the bottom flap. |\n *\n * ### Properties and Attributes\n * - `type`: Selects the visual variant/flap style. Default is `small-side-flip`.\n * - `thickness`: Controls border thickness (`small` or `large`). Default is `small`.\n * - `status`: Sets the alert status and color/icon (`alarm`, `warning`, `caution`, or the `level-*` severities). Default is `alarm`.\n * - `mode`: Acknowledgement lifecycle state (`acked-active`, `unacked-active`, `unacked-rectified`) controlling blinking/animation. Default is `acked-active`.\n * - `wrapContent`: When true, the frame wraps and sizes to its slotted content instead of overlaying a fixed region. Default is `false`.\n * - `sharpEdgeTopLeft`, `sharpEdgeTopRight`, `sharpEdgeBottomLeft`, `sharpEdgeBottomRight`: Boolean flags to make each corner sharp instead of rounded.\n *\n * ### Best Practices and Constraints\n * - Use the status property to match the severity of the alert.\n * - Only use the bottom-flip variant when both label and timer are relevant.\n * - For visual consistency, align sharp edge settings with adjacent UI elements.\n * - The default slot is for the main content; use named slots for icons, labels, and timers as needed.\n *\n * ### Example:\n * ```\n * <obc-alert-frame\n *   type=\"bottom-flip\"\n *   thickness=\"large\"\n *   status=\"warning\"\n *   sharpEdgeTopLeft\n * >\n *   <obi-placeholder slot=\"icon\"></obi-placeholder>\n *   <div slot=\"label\">Low Battery</div>\n *   <div slot=\"timer\">00:15</div>\n *   <div>Critical system message goes here.</div>\n * </obc-alert-frame>\n * ```\n *\n * @slot - Default slot for main alert content.\n * @slot icon - Custom icon for the flap (large-side-flip, bottom-flip).\n * @slot label - Label text for the bottom flap (bottom-flip only).\n * @slot timer - Timer or time label for the bottom flap (bottom-flip only).\n */\n@customElement('obc-alert-frame')\nexport class ObcAlertFrame extends LitElement {\n  /**\n   * Visual variant of the alert frame.\n   * - `regular`: Outlined frame only.\n   * - `small-side-flip`: Small right-side flap with status icon.\n   * - `large-side-flip`: Large vertical right-side flap with status icon and optional custom icon.\n   * - `bottom-flip`: Bottom flap with status icon, label, and timer.\n   *\n   * Default: `small-side-flip`\n   */\n  @property({type: String}) type: ObcAlertFrameType =\n    ObcAlertFrameType.SmallSideFlip;\n\n  /**\n   * Border thickness of the alert frame.\n   * - `small`: Thin border (default).\n   * - `large`: Thick border for higher emphasis.\n   */\n  @property({type: String}) thickness: ObcAlertFrameThickness =\n    ObcAlertFrameThickness.Small;\n\n  /**\n   * Status of the alert, controlling color scheme and icon.\n   * - `alarm`: Highest severity (default).\n   * - `warning`: Medium severity.\n   * - `caution`: Lower severity.\n   * - `level-critical`, `level-high`, `level-medium`, `level-low`, `level-diagnostic`: level severity levels, styled to match their legacy equivalents.\n   */\n  @property({type: String}) status: AlertType = AlertType.Alarm;\n\n  /**\n   * Acknowledgement lifecycle state, controlling the frame's blinking/animation.\n   * - `acked-active`: Active and acknowledged (default); no blinking.\n   * - `unacked-active`: Active and not yet acknowledged; blinks.\n   * - `unacked-rectified`: Condition cleared but not yet acknowledged.\n   */\n  @property({type: String}) mode: ObcAlertFrameMode =\n    ObcAlertFrameMode.ackedActive;\n\n  /**\n   * When true, the frame wraps and sizes itself to its slotted content instead\n   * of overlaying a fixed region. Reflected to an attribute for CSS styling.\n   */\n  @property({type: Boolean, reflect: true}) wrapContent: boolean = false;\n\n  /**\n   * If true, the top-left corner will be sharp (not rounded).\n   */\n  @property({type: Boolean}) sharpEdgeTopLeft: boolean = false;\n\n  /**\n   * If true, the top-right corner will be sharp (not rounded).\n   */\n  @property({type: Boolean}) sharpEdgeTopRight: boolean = false;\n\n  /**\n   * If true, the bottom-left corner will be sharp (not rounded).\n   */\n  @property({type: Boolean}) sharpEdgeBottomLeft: boolean = false;\n\n  /**\n   * If true, the bottom-right corner will be sharp (not rounded).\n   */\n  @property({type: Boolean}) sharpEdgeBottomRight: boolean = false;\n\n  @property({type: String}) textSize: AlertFrameTextSize =\n    AlertFrameTextSize.Regular;\n\n  @property({type: Boolean}) showIcon: boolean = false;\n  @property({type: Boolean, attribute: false}) showAlertCategoryIcon: boolean =\n    true;\n\n  override render() {\n    return html`\n      <div\n        class=${classMap({\n          wrapper: true,\n          'wrap-content': this.wrapContent,\n          ['thickness-' + this.thickness]: true,\n          [this.type]: true,\n          [this.status]: true,\n          ['text-size-' + this.textSize]: true,\n          'sharp-edge-top-left': this.sharpEdgeTopLeft,\n          'sharp-edge-top-right': this.sharpEdgeTopRight,\n          'sharp-edge-bottom-left': this.sharpEdgeBottomLeft,\n          'sharp-edge-bottom-right': this.sharpEdgeBottomRight,\n          [this.mode]: true,\n        })}\n      >\n        <slot></slot>\n        ${this.flap()}\n      </div>\n    `;\n  }\n\n  private flap() {\n    if (this.type === ObcAlertFrameType.Regular) {\n      return nothing;\n    }\n\n    if (\n      this.type === ObcAlertFrameType.SmallSideFlip &&\n      !this.showAlertCategoryIcon\n    ) {\n      return nothing;\n    }\n\n    if (\n      this.type === ObcAlertFrameType.LargeSideFlip &&\n      !this.showIcon &&\n      !this.showAlertCategoryIcon\n    ) {\n      return nothing;\n    }\n\n    let icon: TemplateResult | typeof nothing;\n    if (!this.showAlertCategoryIcon) {\n      icon = nothing;\n    } else {\n      icon = this.renderBadgeIcon();\n    }\n\n    if (this.type === ObcAlertFrameType.SmallSideFlip) {\n      return html`<div class=\"flap small\">\n        ${icon}\n        <div class=\"mask up\"></div>\n      </div>`;\n    }\n    if (this.type === ObcAlertFrameType.LargeSideFlip) {\n      return html`<div class=\"flap large\">\n        ${icon}\n        ${this.showIcon\n          ? html`<div class=\"icon\"><slot name=\"icon\"></slot></div>`\n          : nothing}\n        <div class=\"mask up\"></div>\n        <div class=\"mask down\"></div>\n      </div>`;\n    }\n    if (\n      this.type === ObcAlertFrameType.BottomFlip ||\n      this.type === ObcAlertFrameType.TopFlip\n    ) {\n      return html`<div\n        class=\"flap ${this.type === ObcAlertFrameType.BottomFlip\n          ? 'bottom'\n          : 'top'}\"\n      >\n        ${icon}\n        ${this.showIcon\n          ? html`<div class=\"icon\"><slot name=\"icon\"></slot></div>`\n          : nothing}\n        <div class=\"label\"><slot name=\"label\"></slot></div>\n        <div class=\"spacer\"></div>\n        <div class=\"timer\"><slot name=\"timer\"></slot></div>\n        <div class=\"mask right\"></div>\n        <div class=\"mask left\"></div>\n      </div>`;\n    }\n    console.error('Unknown type of alert frame:', this.type);\n    return nothing;\n  }\n\n  private renderBadgeIcon(): TemplateResult {\n    switch (getAlertBadgeComponent(this.status)) {\n      case AlertBadgeComponent.Critical:\n        return html`<obi-critical-badge\n          class=\"icon badge\"\n        ></obi-critical-badge>`;\n      case AlertBadgeComponent.Warning:\n        return html`<obi-warning-badge class=\"icon badge\"></obi-warning-badge>`;\n      case AlertBadgeComponent.Caution:\n        return html`<obi-caution-badge class=\"icon badge\"></obi-caution-badge>`;\n      case AlertBadgeComponent.Diagnostic:\n        return html`<obi-diagnostic-badge\n          class=\"icon badge\"\n        ></obi-diagnostic-badge>`;\n      default:\n        return html`<obi-alarm-badge class=\"icon badge\"></obi-alarm-badge>`;\n    }\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\nexport function wrapWithAlertFrame(\n  options: AlertFrameConfig | boolean | undefined,\n  content: HTMLTemplateResult\n): HTMLTemplateResult {\n  if (typeof options !== 'object' || options === null) {\n    return content;\n  }\n  return html`<obc-alert-frame\n    .type=${options.type ?? ObcAlertFrameType.SmallSideFlip}\n    .thickness=${options.thickness ?? ObcAlertFrameThickness.Small}\n    .status=${options.status ?? AlertType.Alarm}\n    .mode=${options.mode ?? ObcAlertFrameMode.ackedActive}\n    .showIcon=${options.showIcon ?? false}\n    .showAlertCategoryIcon=${options.showAlertCategoryIcon ?? true}\n    .wrapContent=${true}\n    >${content}</obc-alert-frame\n  >`;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-alert-frame': ObcAlertFrame;\n  }\n}\n"],"names":["ObcAlertFrameType","ObcAlertFrameThickness","ObcAlertFrameMode","AlertFrameTextSize"],"mappings":"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"}
+{"version":3,"file":"alert-frame.js","sources":["../../../src/components/alert-frame/alert-frame.ts"],"sourcesContent":["import {\n  LitElement,\n  html,\n  unsafeCSS,\n  nothing,\n  TemplateResult,\n  HTMLTemplateResult,\n} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport compentStyle from './alert-frame.css?inline';\nimport {classMap} from 'lit/directives/class-map.js';\nimport '../../icons/icon-alarm-badge.js';\nimport '../../icons/icon-warning-badge.js';\nimport '../../icons/icon-caution-badge.js';\nimport './critical-badge.js';\nimport './diagnostic-badge.js';\nimport {customElement} from '../../decorator.js';\nimport {AlertType} from '../../types.js';\nimport {\n  getAlertBadgeComponent,\n  AlertBadgeComponent,\n} from '../../alert-severity.js';\n\nexport {AlertType as ObcAlertFrameStatus} from '../../types.js';\n\n/**\n * Enum representing the available frame styles for an alert component.\n *\n * - Regular (\"regular\"): Standard alert frame layout.\n * - SmallSideFlip (\"small-side-flip\"): Flipped frame with a small side edge.\n * - LargeSideFlip (\"large-side-flip\"): Flipped frame with a large side edge.\n * - BottomFlip (\"bottom-flip\"): Frame flipped to the bottom position.\n */\nexport enum ObcAlertFrameType {\n  Regular = 'regular',\n  SmallSideFlip = 'small-side-flip',\n  LargeSideFlip = 'large-side-flip',\n  BottomFlip = 'bottom-flip',\n  TopFlip = 'top-flip',\n}\n\n/**\n * Thickness options for the alert frame border.\n * - `small`: Thin border (default).\n * - `large`: Thick border for higher emphasis.\n */\nexport enum ObcAlertFrameThickness {\n  Small = 'small',\n  Large = 'large',\n}\n\nexport enum ObcAlertFrameMode {\n  ackedActive = 'acked-active',\n  unackedActive = 'unacked-active',\n  unackedRectified = 'unacked-rectified',\n}\n\n/**\n * Text size options for flip-flap typography.\n * - `regular`: Standard text size (default).\n * - `large`: Larger text for increased visibility.\n */\nexport enum AlertFrameTextSize {\n  Regular = 'regular',\n  Large = 'large',\n}\n\nexport interface AlertFrameConfig {\n  type?: ObcAlertFrameType;\n  thickness?: ObcAlertFrameThickness;\n  status?: AlertType;\n  mode?: ObcAlertFrameMode;\n  textSize?: AlertFrameTextSize;\n  showIcon?: boolean;\n  showAlertCategoryIcon?: boolean;\n}\n\n/**\n * `<obc-alert-frame>` – A bordered frame component for visually emphasizing alert or status messages.\n *\n * The alert frame provides a prominent outline and optional \"flap\" with status icon to draw attention to critical information or UI regions. It supports multiple visual variants and thicknesses, and can be configured to indicate different alert statuses (alarm, warning, caution). The component is designed to wrap content and visually distinguish it from the surrounding UI.\n *\n * ### Features\n * - **Variants (type):**\n *   - `regular`: Standard outlined frame with no flap or icon.\n *   - `small-side-flip`: Adds a small side flap with a status icon at the top right.\n *   - `large-side-flip`: Adds a larger, vertical side flap with a status icon and optional custom icon.\n *   - `bottom-flip`: Adds a bottom flap with a status icon, label, and timer slots.\n * - **Thickness options:** Choose between `small` (thin border) and `large` (thick border) for visual emphasis.\n * - **Status indication:** Displays different color schemes and icons for the legacy statuses (`alarm`, `warning`, `caution`) and the level statuses (`level-critical`, `level-high`, `level-medium`, `level-low`, `level-diagnostic`).\n * - **Acknowledgement mode:** The `mode` property reflects the alert lifecycle state — `acked-active` (default), `unacked-active`, and `unacked-rectified` — driving the blinking/animation treatment of the frame.\n * - **Content wrapping:** When `wrapContent` is true, the frame wraps and sizes itself to its slotted content rather than overlaying a fixed region.\n * - **Customizable corners:** Each corner can be set to a sharp (non-rounded) edge for integration with other UI elements.\n * - **Slot-based content:** Supports custom icons, labels, and timers in flap variants via named slots.\n *\n * ### Usage Guidelines\n * Use `obc-alert-frame` to highlight important content, such as alerts, warnings, or status panels. The flap variants are ideal for drawing extra attention to urgent or time-sensitive information, while the regular type provides a subtle but clear border. Choose the status to match the severity of the message (alarm, warning, caution). Adjust thickness for visual hierarchy—use large for high-priority alerts and small for less critical notices.\n *\n * **TODO(designer):** Provide guidance on when to use each flap type (small-side-flip, large-side-flip, bottom-flip) and recommended scenarios for sharp edge usage.\n *\n * ### Features/Variants\n * - **Type (Visual Variant):**\n *   - `regular`: Simple outlined frame, no flap or icon.\n *   - `small-side-flip`: Small right-side flap with status icon.\n *   - `large-side-flip`: Large vertical right-side flap with status icon and optional custom icon.\n *   - `bottom-flip`: Bottom flap with status icon, label, and timer.\n * - **Thickness:** `small` (default) or `large` for border width.\n * - **Status:** `alarm`, `warning`, `caution`, or the level severities (`level-critical`, `level-high`, `level-medium`, `level-low`, `level-diagnostic`)—affects color and icon.\n * - **Mode:** `acked-active` (default), `unacked-active`, or `unacked-rectified`—affects blinking/animation.\n * - **Corner Customization:** Each corner can be made sharp (not rounded) via boolean properties.\n *\n * ### Slots and Content Structure\n *\n * | Slot Name | Renders When... | Purpose |\n * |-----------|-----------------|---------|\n * | (default) | Always | Main content inside the alert frame. |\n * | icon | `large-side-flip` or `bottom-flip` | Custom icon displayed in the flap (in addition to status icon). |\n * | label | `bottom-flip` only | Label text shown in the bottom flap. |\n * | timer | `bottom-flip` only | Timer or time label in the bottom flap. |\n *\n * ### Properties and Attributes\n * - `type`: Selects the visual variant/flap style. Default is `small-side-flip`.\n * - `thickness`: Controls border thickness (`small` or `large`). Default is `small`.\n * - `status`: Sets the alert status and color/icon (`alarm`, `warning`, `caution`, or the `level-*` severities). Default is `alarm`.\n * - `mode`: Acknowledgement lifecycle state (`acked-active`, `unacked-active`, `unacked-rectified`) controlling blinking/animation. Default is `acked-active`.\n * - `wrapContent`: When true, the frame wraps and sizes to its slotted content instead of overlaying a fixed region. Default is `false`.\n * - `sharpEdgeTopLeft`, `sharpEdgeTopRight`, `sharpEdgeBottomLeft`, `sharpEdgeBottomRight`: Boolean flags to make each corner sharp instead of rounded.\n *\n * ### Best Practices and Constraints\n * - Use the status property to match the severity of the alert.\n * - Only use the bottom-flip variant when both label and timer are relevant.\n * - For visual consistency, align sharp edge settings with adjacent UI elements.\n * - The default slot is for the main content; use named slots for icons, labels, and timers as needed.\n *\n * ### Example:\n * ```\n * <obc-alert-frame\n *   type=\"bottom-flip\"\n *   thickness=\"large\"\n *   status=\"warning\"\n *   sharpEdgeTopLeft\n * >\n *   <obi-placeholder slot=\"icon\"></obi-placeholder>\n *   <div slot=\"label\">Low Battery</div>\n *   <div slot=\"timer\">00:15</div>\n *   <div>Critical system message goes here.</div>\n * </obc-alert-frame>\n * ```\n *\n * @slot - Default slot for main alert content.\n * @slot icon - Custom icon for the flap (large-side-flip, bottom-flip).\n * @slot label - Label text for the bottom flap (bottom-flip only).\n * @slot timer - Timer or time label for the bottom flap (bottom-flip only).\n */\n@customElement('obc-alert-frame')\nexport class ObcAlertFrame extends LitElement {\n  /**\n   * Visual variant of the alert frame.\n   * - `regular`: Outlined frame only.\n   * - `small-side-flip`: Small right-side flap with status icon.\n   * - `large-side-flip`: Large vertical right-side flap with status icon and optional custom icon.\n   * - `bottom-flip`: Bottom flap with status icon, label, and timer.\n   *\n   * Default: `small-side-flip`\n   */\n  @property({type: String}) type: ObcAlertFrameType =\n    ObcAlertFrameType.SmallSideFlip;\n\n  /**\n   * Border thickness of the alert frame.\n   * - `small`: Thin border (default).\n   * - `large`: Thick border for higher emphasis.\n   */\n  @property({type: String}) thickness: ObcAlertFrameThickness =\n    ObcAlertFrameThickness.Small;\n\n  /**\n   * Status of the alert, controlling color scheme and icon.\n   * - `alarm`: Highest severity (default).\n   * - `warning`: Medium severity.\n   * - `caution`: Lower severity.\n   * - `level-critical`, `level-high`, `level-medium`, `level-low`, `level-diagnostic`: level severity levels, styled to match their legacy equivalents.\n   */\n  @property({type: String}) status: AlertType = AlertType.Alarm;\n\n  /**\n   * Acknowledgement lifecycle state, controlling the frame's blinking/animation.\n   * - `acked-active`: Active and acknowledged (default); no blinking.\n   * - `unacked-active`: Active and not yet acknowledged; blinks.\n   * - `unacked-rectified`: Condition cleared but not yet acknowledged.\n   */\n  @property({type: String}) mode: ObcAlertFrameMode =\n    ObcAlertFrameMode.ackedActive;\n\n  /**\n   * When true, the frame wraps and sizes itself to its slotted content instead\n   * of overlaying a fixed region. Reflected to an attribute for CSS styling.\n   */\n  @property({type: Boolean, reflect: true}) wrapContent: boolean = false;\n\n  /**\n   * When true, the frame stretches to fill the full width of its container\n   * instead of hugging its content. Reflected to an attribute for CSS styling.\n   */\n  @property({type: Boolean, reflect: true}) fullWidth: boolean = false;\n\n  /**\n   * If true, the top-left corner will be sharp (not rounded).\n   */\n  @property({type: Boolean}) sharpEdgeTopLeft: boolean = false;\n\n  /**\n   * If true, the top-right corner will be sharp (not rounded).\n   */\n  @property({type: Boolean}) sharpEdgeTopRight: boolean = false;\n\n  /**\n   * If true, the bottom-left corner will be sharp (not rounded).\n   */\n  @property({type: Boolean}) sharpEdgeBottomLeft: boolean = false;\n\n  /**\n   * If true, the bottom-right corner will be sharp (not rounded).\n   */\n  @property({type: Boolean}) sharpEdgeBottomRight: boolean = false;\n\n  @property({type: String}) textSize: AlertFrameTextSize =\n    AlertFrameTextSize.Regular;\n\n  @property({type: Boolean}) showIcon: boolean = false;\n  @property({type: Boolean, attribute: false}) showAlertCategoryIcon: boolean =\n    true;\n\n  override render() {\n    return html`\n      <div\n        class=${classMap({\n          wrapper: true,\n          'wrap-content': this.wrapContent,\n          'full-width': this.fullWidth,\n          ['thickness-' + this.thickness]: true,\n          [this.type]: true,\n          [this.status]: true,\n          ['text-size-' + this.textSize]: true,\n          'sharp-edge-top-left': this.sharpEdgeTopLeft,\n          'sharp-edge-top-right': this.sharpEdgeTopRight,\n          'sharp-edge-bottom-left': this.sharpEdgeBottomLeft,\n          'sharp-edge-bottom-right': this.sharpEdgeBottomRight,\n          [this.mode]: true,\n        })}\n      >\n        <slot></slot>\n        ${this.flap()}\n      </div>\n    `;\n  }\n\n  private flap() {\n    if (this.type === ObcAlertFrameType.Regular) {\n      return nothing;\n    }\n\n    if (\n      this.type === ObcAlertFrameType.SmallSideFlip &&\n      !this.showAlertCategoryIcon\n    ) {\n      return nothing;\n    }\n\n    if (\n      this.type === ObcAlertFrameType.LargeSideFlip &&\n      !this.showIcon &&\n      !this.showAlertCategoryIcon\n    ) {\n      return nothing;\n    }\n\n    let icon: TemplateResult | typeof nothing;\n    if (!this.showAlertCategoryIcon) {\n      icon = nothing;\n    } else {\n      icon = this.renderBadgeIcon();\n    }\n\n    if (this.type === ObcAlertFrameType.SmallSideFlip) {\n      return html`<div class=\"flap small\">\n        ${icon}\n        <div class=\"mask up\"></div>\n      </div>`;\n    }\n    if (this.type === ObcAlertFrameType.LargeSideFlip) {\n      return html`<div class=\"flap large\">\n        ${icon}\n        ${this.showIcon\n          ? html`<div class=\"icon\"><slot name=\"icon\"></slot></div>`\n          : nothing}\n        <div class=\"mask up\"></div>\n        <div class=\"mask down\"></div>\n      </div>`;\n    }\n    if (\n      this.type === ObcAlertFrameType.BottomFlip ||\n      this.type === ObcAlertFrameType.TopFlip\n    ) {\n      return html`<div\n        class=\"flap ${this.type === ObcAlertFrameType.BottomFlip\n          ? 'bottom'\n          : 'top'}\"\n      >\n        ${icon}\n        ${this.showIcon\n          ? html`<div class=\"icon\"><slot name=\"icon\"></slot></div>`\n          : nothing}\n        <div class=\"label\"><slot name=\"label\"></slot></div>\n        <div class=\"spacer\"></div>\n        <div class=\"timer\"><slot name=\"timer\"></slot></div>\n        <div class=\"mask right\"></div>\n        <div class=\"mask left\"></div>\n      </div>`;\n    }\n    console.error('Unknown type of alert frame:', this.type);\n    return nothing;\n  }\n\n  private renderBadgeIcon(): TemplateResult {\n    switch (getAlertBadgeComponent(this.status)) {\n      case AlertBadgeComponent.Critical:\n        return html`<obi-critical-badge\n          class=\"icon badge\"\n        ></obi-critical-badge>`;\n      case AlertBadgeComponent.Warning:\n        return html`<obi-warning-badge class=\"icon badge\"></obi-warning-badge>`;\n      case AlertBadgeComponent.Caution:\n        return html`<obi-caution-badge class=\"icon badge\"></obi-caution-badge>`;\n      case AlertBadgeComponent.Diagnostic:\n        return html`<obi-diagnostic-badge\n          class=\"icon badge\"\n        ></obi-diagnostic-badge>`;\n      default:\n        return html`<obi-alarm-badge class=\"icon badge\"></obi-alarm-badge>`;\n    }\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\nexport function wrapWithAlertFrame(\n  options: AlertFrameConfig | boolean | undefined,\n  content: HTMLTemplateResult,\n  fullWidth: boolean = false\n): HTMLTemplateResult {\n  if (typeof options !== 'object' || options === null) {\n    return content;\n  }\n  return html`<obc-alert-frame\n    .type=${options.type ?? ObcAlertFrameType.SmallSideFlip}\n    .thickness=${options.thickness ?? ObcAlertFrameThickness.Small}\n    .status=${options.status ?? AlertType.Alarm}\n    .mode=${options.mode ?? ObcAlertFrameMode.ackedActive}\n    .showIcon=${options.showIcon ?? false}\n    .showAlertCategoryIcon=${options.showAlertCategoryIcon ?? true}\n    .wrapContent=${true}\n    .fullWidth=${fullWidth}\n    >${content}</obc-alert-frame\n  >`;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-alert-frame': ObcAlertFrame;\n  }\n}\n"],"names":["ObcAlertFrameType","ObcAlertFrameThickness","ObcAlertFrameMode","AlertFrameTextSize"],"mappings":"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"}

package/dist/components/input/input.d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=input.d.ts.map

package/dist/components/input/input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.ts"],"names":[],"mappings":""}

package/dist/components/input/input.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=input.js.map

package/dist/components/input/input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/pagination/pagination.d.ts

@@ -34,6 +34,13 @@ export type ObcPaginationNavigateEvent = CustomEvent<{
     action: 'first' | 'previous' | 'next' | 'last';
     currentPage: number;
 }>;
+/**
+ * Event fired when a page is selected.
+ * @event
+ */
+export type ObcPaginationSelectPageEvent = CustomEvent<{
+    page: number;
+}>;
 /**
  * `obc-pagination` – page navigation component for traversing multi-page content.
  *
@@ -89,9 +96,11 @@ export type ObcPaginationNavigateEvent = CustomEvent<{
  *
  * - `value` – Fired when the current page changes (via user interaction).
  * - `navigate` – Fired when a navigation arrow (first, previous, next, last) is clicked.
+ * - `select-page` – Fired when a specific page is selected.
  *
  * @fires value {ObcPaginationValueChangeEvent} Emitted whenever the current page changes.
  * @fires navigate {ObcPaginationNavigateEvent} Emitted when a navigation arrow is clicked.
+ * @fires select-page {ObcPaginationSelectPageEvent} Emitted when a specific page is selected.
  */
 export declare class ObcPagination extends LitElement {
     /**

package/dist/components/pagination/pagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/pagination.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAkB,MAAM,KAAK,CAAC;AAMhD,OAAO,iDAAiD,CAAC;AACzD,OAAO,+CAA+C,CAAC;AACvD,OAAO,+BAA+B,CAAC;AACvC,OAAO,uDAAuD,CAAC;AAC/D,OAAO,uCAAuC,CAAC;AAC/C,OAAO,yCAAyC,CAAC;AACjD,OAAO,0CAA0C,CAAC;AAClD,OAAO,sCAAsC,CAAC;AAG9C;;;;;;GAMG;AACH,oBAAY,iBAAiB;IAC3B,OAAO,YAAY;IACnB,IAAI,SAAS;IACb,SAAS,cAAc;CACxB;AAED;;;GAGG;AACH,MAAM,MAAM,6BAA6B,GAAG,WAAW,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAC,CAAC,CAAC;AAEzE;;;GAGG;AACH,MAAM,MAAM,0BAA0B,GAAG,WAAW,CAAC;IACnD,MAAM,EAAE,OAAO,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;IAC/C,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0DG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C;;;;;;;;OAQG;IACuB,OAAO,EAAE,iBAAiB,CACxB;IAE5B;;;;;;OAMG;IACuB,KAAK,SAAK;IAEpC;;;;;;OAMG;IACkD,WAAW,SAAK;IAErE;;;;;;OAMG;IACgE,SAAS,UACpE;IAEmB,QAAQ,UAAS;IAE5C,OAAO,KAAK,WAAW,GAEtB;IAED,OAAO,KAAK,mBAAmB,GAI9B;IAED,OAAO,KAAK,cAAc,GAEzB;IAED,OAAO,KAAK,oBAAoB,GAE/B;IAED,OAAO,KAAK,mBAAmB,GAE9B;IAED,OAAO,KAAK,eAAe,GAQ1B;IAED,OAAO,KAAK,gBAAgB,GAE3B;IAED,OAAO,KAAK,eAAe,GAE1B;IAED,OAAO,KAAK,WAAW,GAEtB;IAED,OAAO,KAAK,eAAe,GAE1B;IAED,OAAO,CAAC,cAAc;IAWtB,OAAO,CAAC,qBAAqB;IAU7B,OAAO,CAAC,gBAAgB,CAEtB;IAEF,OAAO,CAAC,gBAAgB,CAItB;IAEF,OAAO,CAAC,mBAAmB,CAIzB;IAEF,OAAO,CAAC,eAAe,CAIrB;IAEF,OAAO,CAAC,eAAe,CAIrB;IAEF,OAAO,CAAC,mBAAmB;IAc3B,OAAO,CAAC,2BAA2B;IASnC,OAAO,CAAC,gBAAgB;IA6Df,MAAM;IAuBf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,aAAa,CAAC;KACjC;CACF"}
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/pagination.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAkB,MAAM,KAAK,CAAC;AAMhD,OAAO,iDAAiD,CAAC;AACzD,OAAO,+CAA+C,CAAC;AACvD,OAAO,+BAA+B,CAAC;AACvC,OAAO,uDAAuD,CAAC;AAC/D,OAAO,uCAAuC,CAAC;AAC/C,OAAO,yCAAyC,CAAC;AACjD,OAAO,0CAA0C,CAAC;AAClD,OAAO,sCAAsC,CAAC;AAG9C;;;;;;GAMG;AACH,oBAAY,iBAAiB;IAC3B,OAAO,YAAY;IACnB,IAAI,SAAS;IACb,SAAS,cAAc;CACxB;AAED;;;GAGG;AACH,MAAM,MAAM,6BAA6B,GAAG,WAAW,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAC,CAAC,CAAC;AAEzE;;;GAGG;AACH,MAAM,MAAM,0BAA0B,GAAG,WAAW,CAAC;IACnD,MAAM,EAAE,OAAO,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;IAC/C,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC,CAAC;AAEH;;;GAGG;AACH,MAAM,MAAM,4BAA4B,GAAG,WAAW,CAAC;IACrD,IAAI,EAAE,MAAM,CAAC;CACd,CAAC,CAAC;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4DG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C;;;;;;;;OAQG;IACuB,OAAO,EAAE,iBAAiB,CACxB;IAE5B;;;;;;OAMG;IACuB,KAAK,SAAK;IAEpC;;;;;;OAMG;IACkD,WAAW,SAAK;IAErE;;;;;;OAMG;IACgE,SAAS,UACpE;IAEmB,QAAQ,UAAS;IAE5C,OAAO,KAAK,WAAW,GAEtB;IAED,OAAO,KAAK,mBAAmB,GAI9B;IAED,OAAO,KAAK,cAAc,GAEzB;IAED,OAAO,KAAK,oBAAoB,GAE/B;IAED,OAAO,KAAK,mBAAmB,GAE9B;IAED,OAAO,KAAK,eAAe,GAQ1B;IAED,OAAO,KAAK,gBAAgB,GAE3B;IAED,OAAO,KAAK,eAAe,GAE1B;IAED,OAAO,KAAK,WAAW,GAEtB;IAED,OAAO,KAAK,eAAe,GAE1B;IAED,OAAO,CAAC,cAAc;IAgBtB,OAAO,CAAC,qBAAqB;IAU7B,OAAO,CAAC,gBAAgB,CAUtB;IAEF,OAAO,CAAC,gBAAgB,CAItB;IAEF,OAAO,CAAC,mBAAmB,CAIzB;IAEF,OAAO,CAAC,eAAe,CAIrB;IAEF,OAAO,CAAC,eAAe,CAIrB;IAEF,OAAO,CAAC,mBAAmB;IAc3B,OAAO,CAAC,2BAA2B;IASnC,OAAO,CAAC,gBAAgB;IA6Df,MAAM;IAuBf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,aAAa,CAAC;KACjC;CACF"}

package/dist/components/pagination/pagination.js

@@ -36,7 +36,14 @@ let ObcPagination = class extends LitElement {
     this.fullWidth = false;
     this.disabled = false;
     this.handlePageChange = (event) => {
-      this.setCurrentPage(Number(event.detail.value));
+      const success = this.setCurrentPage(Number(event.detail.value));
+      if (success) {
+        this.dispatchEvent(
+          new CustomEvent("select-page", {
+            detail: { page: Number(event.detail.value) }
+          })
+        );
+      }
     };
     this.handleFirstClick = () => {
       if (!this.canNavigateFirst) return;
@@ -97,13 +104,16 @@ let ObcPagination = class extends LitElement {
   }
   setCurrentPage(newPage) {
     const page = Math.max(1, Math.min(newPage, this.validatedPages));
-    if (page === this.currentPage) return;
+    if (page === this.currentPage) {
+      return false;
+    }
     this.currentPage = page;
     this.dispatchEvent(
       new CustomEvent("value", {
         detail: { value: page }
       })
     );
+    return true;
   }
   dispatchNavigateEvent(action) {
     this.dispatchEvent(