@oicl/openbridge-webcomponents 2.0.0-next.78 → 2.0.0-next.79

package/custom-elements.json

@@ -54326,7 +54326,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 +54513,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 +58332,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 +58625,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 +58830,10 @@
                 "text": "CustomEvent"
               },
               "description": "{ObcSliderDoubleValueEvent} - Fires when the value is changed"
+            },
+            {
+              "description": "{ObcSliderDoubleChangeEvent} - Fires when user interaction completes",
+              "name": "change"
             }
           ],
           "attributes": [
@@ -58976,7 +58990,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 +59192,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 +59343,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 +65290,18 @@
                   }
                 },
                 {
-                  "name": "emitEvent",
+                  "name": "emitValueEvent",
                   "default": "true",
                   "type": {
                     "text": "boolean"
                   }
+                },
+                {
+                  "name": "emitChangeEvent",
+                  "default": "false",
+                  "type": {
+                    "text": "boolean"
+                  }
                 }
               ]
             },
@@ -65323,6 +65354,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 +65968,18 @@
                   }
                 },
                 {
-                  "name": "emitEvent",
+                  "name": "emitValueEvent",
                   "default": "true",
                   "type": {
                     "text": "boolean"
                   }
+                },
+                {
+                  "name": "emitChangeEvent",
+                  "default": "false",
+                  "type": {
+                    "text": "boolean"
+                  }
                 }
               ]
             },
@@ -65979,6 +66024,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 +66432,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 +66454,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/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(

package/dist/components/pagination/pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.js","sources":["../../../src/components/pagination/pagination.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {customElement} from '../../decorator.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport compentStyle from './pagination.css?inline';\n\nimport '../toggle-button-option/toggle-button-option.js';\nimport '../toggle-button-group/toggle-button-group.js';\nimport '../icon-button/icon-button.js';\nimport '../progress-indicator-dots/progress-indicator-dots.js';\nimport '../../icons/icon-page-first-google.js';\nimport '../../icons/icon-chevron-left-google.js';\nimport '../../icons/icon-chevron-right-google.js';\nimport '../../icons/icon-page-last-google.js';\nimport {ObcToggleButtonOptionVariant} from '../toggle-button-option/toggle-button-option.js';\n\n/**\n * Enumerates the supported style variants for the Pagination component.\n *\n * - `regular`: Default pagination styling.\n * - `flat`: Borderless, flat appearance.\n * - `condensed`: More compact layout for tighter spacing.\n */\nexport enum PaginationVariant {\n  regular = 'regular',\n  flat = 'flat',\n  condensed = 'condensed',\n}\n\n/**\n * Event fired when the current page changes.\n * @event\n */\nexport type ObcPaginationValueChangeEvent = CustomEvent<{value: number}>;\n\n/**\n * Event fired when a navigation arrow is clicked.\n * @event\n */\nexport type ObcPaginationNavigateEvent = CustomEvent<{\n  action: 'first' | 'previous' | 'next' | 'last';\n  currentPage: number;\n}>;\n\n/**\n * `obc-pagination` – page navigation component for traversing multi-page content.\n *\n * Provides 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 *\n * Appears 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 *\n * Use `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 *\n * @fires value {ObcPaginationValueChangeEvent} Emitted whenever the current page changes.\n * @fires navigate {ObcPaginationNavigateEvent} Emitted when a navigation arrow is clicked.\n */\n@customElement('obc-pagination')\nexport class ObcPagination extends LitElement {\n  /**\n   * Visual style variant of the pagination component.\n   *\n   * - `regular`: Standard pagination with numbered page buttons and navigation arrows.\n   * - `flat`: Minimalist, low-elevation style with flat toggle buttons.\n   * - `condensed`: Compact mode with progress indicator dots and navigation arrows only.\n   *\n   * Default: `regular`\n   */\n  @property({type: String}) variant: PaginationVariant =\n    PaginationVariant.regular;\n\n  /**\n   * Total number of pages available for navigation.\n   *\n   * Must be a positive integer (minimum 1). If set below 1, defaults to 1.\n   *\n   * Default: `3`\n   */\n  @property({type: Number}) pages = 3;\n\n  /**\n   * The currently selected (active) page, 1-based index.\n   *\n   * If set below 1 or above the total number of pages, it is clamped to the valid range.\n   *\n   * Default: `1`\n   */\n  @property({type: Number, attribute: 'current-page'}) currentPage = 1;\n\n  /**\n   * Expands the pagination controls to fill the width of the container.\n   *\n   * When enabled, the page indicators (toggle button group or progress dots) stretch to align with the container.\n   *\n   * Default: `false`\n   */\n  @property({type: Boolean, attribute: 'full-width', reflect: true}) fullWidth =\n    false;\n\n  @property({type: Boolean}) disabled = false;\n\n  private get isCondensed() {\n    return this.variant === PaginationVariant.condensed;\n  }\n\n  private get toggleButtonVariant() {\n    return this.variant === PaginationVariant.flat\n      ? ObcToggleButtonOptionVariant.flat\n      : ObcToggleButtonOptionVariant.regular;\n  }\n\n  private get validatedPages() {\n    return Math.max(1, this.pages);\n  }\n\n  private get validatedCurrentPage() {\n    return Math.max(1, Math.min(this.currentPage, this.validatedPages));\n  }\n\n  private get canNavigatePrevious() {\n    return !this.disabled && this.validatedCurrentPage > 1;\n  }\n\n  private get canNavigateNext() {\n    console.log(\n      'canNavigateNext',\n      this.disabled,\n      this.validatedCurrentPage,\n      this.validatedPages\n    );\n    return !this.disabled && this.validatedCurrentPage < this.validatedPages;\n  }\n\n  private get canNavigateFirst() {\n    return !this.disabled && this.canNavigatePrevious;\n  }\n\n  private get canNavigateLast() {\n    return !this.disabled && this.canNavigateNext;\n  }\n\n  private get pageNumbers() {\n    return Array.from({length: this.validatedPages}, (_, i) => i + 1);\n  }\n\n  private get announceMessage() {\n    return `Page ${this.validatedCurrentPage} of ${this.validatedPages}`;\n  }\n\n  private setCurrentPage(newPage: number) {\n    const page = Math.max(1, Math.min(newPage, this.validatedPages));\n    if (page === this.currentPage) return;\n    this.currentPage = page;\n    this.dispatchEvent(\n      new CustomEvent('value', {\n        detail: {value: page},\n      }) as ObcPaginationValueChangeEvent\n    );\n  }\n\n  private dispatchNavigateEvent(\n    action: 'first' | 'previous' | 'next' | 'last'\n  ) {\n    this.dispatchEvent(\n      new CustomEvent('navigate', {\n        detail: {action, currentPage: this.validatedCurrentPage},\n      }) as ObcPaginationNavigateEvent\n    );\n  }\n\n  private handlePageChange = (event: CustomEvent<{value: string}>) => {\n    this.setCurrentPage(Number(event.detail.value));\n  };\n\n  private handleFirstClick = () => {\n    if (!this.canNavigateFirst) return;\n    this.setCurrentPage(1);\n    this.dispatchNavigateEvent('first');\n  };\n\n  private handlePreviousClick = () => {\n    if (!this.canNavigatePrevious) return;\n    this.setCurrentPage(this.validatedCurrentPage - 1);\n    this.dispatchNavigateEvent('previous');\n  };\n\n  private handleNextClick = () => {\n    if (!this.canNavigateNext) return;\n    this.setCurrentPage(this.validatedCurrentPage + 1);\n    this.dispatchNavigateEvent('next');\n  };\n\n  private handleLastClick = () => {\n    if (!this.canNavigateLast) return;\n    this.setCurrentPage(this.validatedPages);\n    this.dispatchNavigateEvent('last');\n  };\n\n  private renderToggleButtons() {\n    return this.pageNumbers.map(\n      (num) =>\n        html`<obc-toggle-button-option\n          .value=${num.toString()}\n          .variant=${this.toggleButtonVariant}\n          .selected=${num === this.validatedCurrentPage}\n          .ariaLabel=${`Page ${num} of ${this.validatedPages}`}\n        >\n          ${num}\n        </obc-toggle-button-option>`\n    );\n  }\n\n  private renderProgressIndicatorDots() {\n    return html`\n      <obc-progress-indicator-dots\n        .totalSteps=${this.validatedPages}\n        .currentStep=${this.validatedCurrentPage}\n      ></obc-progress-indicator-dots>\n    `;\n  }\n\n  private renderNavigation() {\n    return html`\n      <div\n        class=${classMap({'navigation-wrapper': true, disabled: this.disabled})}\n        role=\"navigation\"\n        aria-label=\"Pagination\"\n      >\n        <obc-icon-button\n          variant=\"flat\"\n          aria-label=\"First page\"\n          aria-disabled=${this.canNavigateFirst}\n          ?disabled=${!this.canNavigateFirst}\n          @click=${this.handleFirstClick}\n        >\n          <obi-page-first-google></obi-page-first-google>\n        </obc-icon-button>\n\n        <obc-icon-button\n          variant=\"flat\"\n          aria-label=\"Previous page\"\n          aria-disabled=${this.canNavigatePrevious}\n          ?disabled=${!this.canNavigatePrevious}\n          @click=${this.handlePreviousClick}\n        >\n          <obi-chevron-left-google></obi-chevron-left-google>\n        </obc-icon-button>\n\n        ${this.isCondensed\n          ? this.renderProgressIndicatorDots()\n          : html`<obc-toggle-button-group\n              .value=${this.validatedCurrentPage.toString()}\n              .variant=${this.toggleButtonVariant}\n              ?disabled=${this.disabled}\n              @value=${this.handlePageChange}\n            >\n              ${this.renderToggleButtons()}\n            </obc-toggle-button-group>`}\n\n        <obc-icon-button\n          variant=\"flat\"\n          aria-label=\"Next page\"\n          aria-disabled=${this.canNavigateNext}\n          ?disabled=${!this.canNavigateNext}\n          @click=${this.handleNextClick}\n        >\n          <obi-chevron-right-google></obi-chevron-right-google>\n        </obc-icon-button>\n\n        <obc-icon-button\n          variant=\"flat\"\n          aria-label=\"Last page\"\n          aria-disabled=${this.canNavigateLast}\n          ?disabled=${!this.canNavigateLast}\n          @click=${this.handleLastClick}\n        >\n          <obi-page-last-google></obi-page-last-google>\n        </obc-icon-button>\n      </div>\n    `;\n  }\n\n  override render() {\n    return html`\n      <div\n        class=${classMap({\n          wrapper: true,\n          'type-regular': this.variant === PaginationVariant.regular,\n          'type-flat': this.variant === PaginationVariant.flat,\n          'type-condensed': this.variant === PaginationVariant.condensed,\n          disabled: this.disabled,\n        })}\n      >\n        <div class=\"content-container\">${this.renderNavigation()}</div>\n        <span\n          aria-live=\"polite\"\n          aria-atomic=\"true\"\n          style=\"position:absolute;width:1px;height:1px;margin:-1px;clip:rect(0 0 0 0);overflow:hidden;\"\n        >\n          ${this.announceMessage}\n        </span>\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-pagination': ObcPagination;\n  }\n}\n"],"names":["PaginationVariant"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAuBO,IAAK,sCAAAA,uBAAL;AACLA,qBAAA,SAAA,IAAU;AACVA,qBAAA,MAAA,IAAO;AACPA,qBAAA,WAAA,IAAY;AAHF,SAAAA;AAAA,GAAA,qBAAA,CAAA,CAAA;AAiFL,IAAM,gBAAN,cAA4B,WAAW;AAAA,EAAvC,cAAA;AAAA,UAAA,GAAA,SAAA;AAUqB,SAAA,UACxB;AASwB,SAAA,QAAQ;AASmB,SAAA,cAAc;AASA,SAAA,YACjE;AAEyB,SAAA,WAAW;AAuEtC,SAAQ,mBAAmB,CAAC,UAAwC;AAClE,WAAK,eAAe,OAAO,MAAM,OAAO,KAAK,CAAC;AAAA,IAChD;AAEA,SAAQ,mBAAmB,MAAM;AAC/B,UAAI,CAAC,KAAK,iBAAkB;AAC5B,WAAK,eAAe,CAAC;AACrB,WAAK,sBAAsB,OAAO;AAAA,IACpC;AAEA,SAAQ,sBAAsB,MAAM;AAClC,UAAI,CAAC,KAAK,oBAAqB;AAC/B,WAAK,eAAe,KAAK,uBAAuB,CAAC;AACjD,WAAK,sBAAsB,UAAU;AAAA,IACvC;AAEA,SAAQ,kBAAkB,MAAM;AAC9B,UAAI,CAAC,KAAK,gBAAiB;AAC3B,WAAK,eAAe,KAAK,uBAAuB,CAAC;AACjD,WAAK,sBAAsB,MAAM;AAAA,IACnC;AAEA,SAAQ,kBAAkB,MAAM;AAC9B,UAAI,CAAC,KAAK,gBAAiB;AAC3B,WAAK,eAAe,KAAK,cAAc;AACvC,WAAK,sBAAsB,MAAM;AAAA,IACnC;AAAA,EAAA;AAAA,EA/FA,IAAY,cAAc;AACxB,WAAO,KAAK,YAAY;AAAA,EAC1B;AAAA,EAEA,IAAY,sBAAsB;AAChC,WAAO,KAAK,YAAY,SACpB,6BAA6B,OAC7B,6BAA6B;AAAA,EACnC;AAAA,EAEA,IAAY,iBAAiB;AAC3B,WAAO,KAAK,IAAI,GAAG,KAAK,KAAK;AAAA,EAC/B;AAAA,EAEA,IAAY,uBAAuB;AACjC,WAAO,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,aAAa,KAAK,cAAc,CAAC;AAAA,EACpE;AAAA,EAEA,IAAY,sBAAsB;AAChC,WAAO,CAAC,KAAK,YAAY,KAAK,uBAAuB;AAAA,EACvD;AAAA,EAEA,IAAY,kBAAkB;AAC5B,YAAQ;AAAA,MACN;AAAA,MACA,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,IAAA;AAEP,WAAO,CAAC,KAAK,YAAY,KAAK,uBAAuB,KAAK;AAAA,EAC5D;AAAA,EAEA,IAAY,mBAAmB;AAC7B,WAAO,CAAC,KAAK,YAAY,KAAK;AAAA,EAChC;AAAA,EAEA,IAAY,kBAAkB;AAC5B,WAAO,CAAC,KAAK,YAAY,KAAK;AAAA,EAChC;AAAA,EAEA,IAAY,cAAc;AACxB,WAAO,MAAM,KAAK,EAAC,QAAQ,KAAK,eAAA,GAAiB,CAAC,GAAG,MAAM,IAAI,CAAC;AAAA,EAClE;AAAA,EAEA,IAAY,kBAAkB;AAC5B,WAAO,QAAQ,KAAK,oBAAoB,OAAO,KAAK,cAAc;AAAA,EACpE;AAAA,EAEQ,eAAe,SAAiB;AACtC,UAAM,OAAO,KAAK,IAAI,GAAG,KAAK,IAAI,SAAS,KAAK,cAAc,CAAC;AAC/D,QAAI,SAAS,KAAK,YAAa;AAC/B,SAAK,cAAc;AACnB,SAAK;AAAA,MACH,IAAI,YAAY,SAAS;AAAA,QACvB,QAAQ,EAAC,OAAO,KAAA;AAAA,MAAI,CACrB;AAAA,IAAA;AAAA,EAEL;AAAA,EAEQ,sBACN,QACA;AACA,SAAK;AAAA,MACH,IAAI,YAAY,YAAY;AAAA,QAC1B,QAAQ,EAAC,QAAQ,aAAa,KAAK,qBAAA;AAAA,MAAoB,CACxD;AAAA,IAAA;AAAA,EAEL;AAAA,EA8BQ,sBAAsB;AAC5B,WAAO,KAAK,YAAY;AAAA,MACtB,CAAC,QACC;AAAA,mBACW,IAAI,UAAU;AAAA,qBACZ,KAAK,mBAAmB;AAAA,sBACvB,QAAQ,KAAK,oBAAoB;AAAA,uBAChC,QAAQ,GAAG,OAAO,KAAK,cAAc,EAAE;AAAA;AAAA,YAElD,GAAG;AAAA;AAAA,IAAA;AAAA,EAGb;AAAA,EAEQ,8BAA8B;AACpC,WAAO;AAAA;AAAA,sBAEW,KAAK,cAAc;AAAA,uBAClB,KAAK,oBAAoB;AAAA;AAAA;AAAA,EAG9C;AAAA,EAEQ,mBAAmB;AACzB,WAAO;AAAA;AAAA,gBAEK,SAAS,EAAC,sBAAsB,MAAM,UAAU,KAAK,UAAS,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAOrD,KAAK,gBAAgB;AAAA,sBACzB,CAAC,KAAK,gBAAgB;AAAA,mBACzB,KAAK,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAQd,KAAK,mBAAmB;AAAA,sBAC5B,CAAC,KAAK,mBAAmB;AAAA,mBAC5B,KAAK,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA,UAKjC,KAAK,cACH,KAAK,4BAAA,IACL;AAAA,uBACW,KAAK,qBAAqB,SAAA,CAAU;AAAA,yBAClC,KAAK,mBAAmB;AAAA,0BACvB,KAAK,QAAQ;AAAA,uBAChB,KAAK,gBAAgB;AAAA;AAAA,gBAE5B,KAAK,qBAAqB;AAAA,uCACH;AAAA;AAAA;AAAA;AAAA;AAAA,0BAKb,KAAK,eAAe;AAAA,sBACxB,CAAC,KAAK,eAAe;AAAA,mBACxB,KAAK,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAQb,KAAK,eAAe;AAAA,sBACxB,CAAC,KAAK,eAAe;AAAA,mBACxB,KAAK,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMrC;AAAA,EAES,SAAS;AAChB,WAAO;AAAA;AAAA,gBAEK,SAAS;AAAA,MACf,SAAS;AAAA,MACT,gBAAgB,KAAK,YAAY;AAAA,MACjC,aAAa,KAAK,YAAY;AAAA,MAC9B,kBAAkB,KAAK,YAAY;AAAA,MACnC,UAAU,KAAK;AAAA,IAAA,CAChB,CAAC;AAAA;AAAA,yCAE+B,KAAK,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAMpD,KAAK,eAAe;AAAA;AAAA;AAAA;AAAA,EAI9B;AAGF;AAxPa,cAuPK,SAAS,UAAU,YAAY;AA7OrB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAVb,cAUe,WAAA,WAAA,CAAA;AAUA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GApBb,cAoBe,WAAA,SAAA,CAAA;AAS2B,gBAAA;AAAA,EAApD,SAAS,EAAC,MAAM,QAAQ,WAAW,gBAAe;AAAA,GA7BxC,cA6B0C,WAAA,eAAA,CAAA;AASc,gBAAA;AAAA,EAAlE,SAAS,EAAC,MAAM,SAAS,WAAW,cAAc,SAAS,MAAK;AAAA,GAtCtD,cAsCwD,WAAA,aAAA,CAAA;AAGxC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAzCd,cAyCgB,WAAA,YAAA,CAAA;AAzChB,gBAAN,gBAAA;AAAA,EADN,cAAc,gBAAgB;AAAA,GAClB,aAAA;"}
+{"version":3,"file":"pagination.js","sources":["../../../src/components/pagination/pagination.ts"],"sourcesContent":["import {LitElement, html, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {customElement} from '../../decorator.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport compentStyle from './pagination.css?inline';\n\nimport '../toggle-button-option/toggle-button-option.js';\nimport '../toggle-button-group/toggle-button-group.js';\nimport '../icon-button/icon-button.js';\nimport '../progress-indicator-dots/progress-indicator-dots.js';\nimport '../../icons/icon-page-first-google.js';\nimport '../../icons/icon-chevron-left-google.js';\nimport '../../icons/icon-chevron-right-google.js';\nimport '../../icons/icon-page-last-google.js';\nimport {ObcToggleButtonOptionVariant} from '../toggle-button-option/toggle-button-option.js';\n\n/**\n * Enumerates the supported style variants for the Pagination component.\n *\n * - `regular`: Default pagination styling.\n * - `flat`: Borderless, flat appearance.\n * - `condensed`: More compact layout for tighter spacing.\n */\nexport enum PaginationVariant {\n  regular = 'regular',\n  flat = 'flat',\n  condensed = 'condensed',\n}\n\n/**\n * Event fired when the current page changes.\n * @event\n */\nexport type ObcPaginationValueChangeEvent = CustomEvent<{value: number}>;\n\n/**\n * Event fired when a navigation arrow is clicked.\n * @event\n */\nexport type ObcPaginationNavigateEvent = CustomEvent<{\n  action: 'first' | 'previous' | 'next' | 'last';\n  currentPage: number;\n}>;\n\n/**\n * Event fired when a page is selected.\n * @event\n */\nexport type ObcPaginationSelectPageEvent = CustomEvent<{\n  page: number;\n}>;\n\n/**\n * `obc-pagination` – page navigation component for traversing multi-page content.\n *\n * Provides 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 *\n * Appears 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 *\n * Use `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.\n *\n * @fires value {ObcPaginationValueChangeEvent} Emitted whenever the current page changes.\n * @fires navigate {ObcPaginationNavigateEvent} Emitted when a navigation arrow is clicked.\n * @fires select-page {ObcPaginationSelectPageEvent} Emitted when a specific page is selected.\n */\n@customElement('obc-pagination')\nexport class ObcPagination extends LitElement {\n  /**\n   * Visual style variant of the pagination component.\n   *\n   * - `regular`: Standard pagination with numbered page buttons and navigation arrows.\n   * - `flat`: Minimalist, low-elevation style with flat toggle buttons.\n   * - `condensed`: Compact mode with progress indicator dots and navigation arrows only.\n   *\n   * Default: `regular`\n   */\n  @property({type: String}) variant: PaginationVariant =\n    PaginationVariant.regular;\n\n  /**\n   * Total number of pages available for navigation.\n   *\n   * Must be a positive integer (minimum 1). If set below 1, defaults to 1.\n   *\n   * Default: `3`\n   */\n  @property({type: Number}) pages = 3;\n\n  /**\n   * The currently selected (active) page, 1-based index.\n   *\n   * If set below 1 or above the total number of pages, it is clamped to the valid range.\n   *\n   * Default: `1`\n   */\n  @property({type: Number, attribute: 'current-page'}) currentPage = 1;\n\n  /**\n   * Expands the pagination controls to fill the width of the container.\n   *\n   * When enabled, the page indicators (toggle button group or progress dots) stretch to align with the container.\n   *\n   * Default: `false`\n   */\n  @property({type: Boolean, attribute: 'full-width', reflect: true}) fullWidth =\n    false;\n\n  @property({type: Boolean}) disabled = false;\n\n  private get isCondensed() {\n    return this.variant === PaginationVariant.condensed;\n  }\n\n  private get toggleButtonVariant() {\n    return this.variant === PaginationVariant.flat\n      ? ObcToggleButtonOptionVariant.flat\n      : ObcToggleButtonOptionVariant.regular;\n  }\n\n  private get validatedPages() {\n    return Math.max(1, this.pages);\n  }\n\n  private get validatedCurrentPage() {\n    return Math.max(1, Math.min(this.currentPage, this.validatedPages));\n  }\n\n  private get canNavigatePrevious() {\n    return !this.disabled && this.validatedCurrentPage > 1;\n  }\n\n  private get canNavigateNext() {\n    console.log(\n      'canNavigateNext',\n      this.disabled,\n      this.validatedCurrentPage,\n      this.validatedPages\n    );\n    return !this.disabled && this.validatedCurrentPage < this.validatedPages;\n  }\n\n  private get canNavigateFirst() {\n    return !this.disabled && this.canNavigatePrevious;\n  }\n\n  private get canNavigateLast() {\n    return !this.disabled && this.canNavigateNext;\n  }\n\n  private get pageNumbers() {\n    return Array.from({length: this.validatedPages}, (_, i) => i + 1);\n  }\n\n  private get announceMessage() {\n    return `Page ${this.validatedCurrentPage} of ${this.validatedPages}`;\n  }\n\n  private setCurrentPage(newPage: number) {\n    const page = Math.max(1, Math.min(newPage, this.validatedPages));\n    if (page === this.currentPage) {\n      return false;\n    }\n\n    this.currentPage = page;\n    this.dispatchEvent(\n      new CustomEvent('value', {\n        detail: {value: page},\n      }) as ObcPaginationValueChangeEvent\n    );\n\n    return true;\n  }\n\n  private dispatchNavigateEvent(\n    action: 'first' | 'previous' | 'next' | 'last'\n  ) {\n    this.dispatchEvent(\n      new CustomEvent('navigate', {\n        detail: {action, currentPage: this.validatedCurrentPage},\n      }) as ObcPaginationNavigateEvent\n    );\n  }\n\n  private handlePageChange = (event: CustomEvent<{value: string}>) => {\n    const success = this.setCurrentPage(Number(event.detail.value));\n\n    if (success) {\n      this.dispatchEvent(\n        new CustomEvent('select-page', {\n          detail: {page: Number(event.detail.value)},\n        }) as ObcPaginationSelectPageEvent\n      );\n    }\n  };\n\n  private handleFirstClick = () => {\n    if (!this.canNavigateFirst) return;\n    this.setCurrentPage(1);\n    this.dispatchNavigateEvent('first');\n  };\n\n  private handlePreviousClick = () => {\n    if (!this.canNavigatePrevious) return;\n    this.setCurrentPage(this.validatedCurrentPage - 1);\n    this.dispatchNavigateEvent('previous');\n  };\n\n  private handleNextClick = () => {\n    if (!this.canNavigateNext) return;\n    this.setCurrentPage(this.validatedCurrentPage + 1);\n    this.dispatchNavigateEvent('next');\n  };\n\n  private handleLastClick = () => {\n    if (!this.canNavigateLast) return;\n    this.setCurrentPage(this.validatedPages);\n    this.dispatchNavigateEvent('last');\n  };\n\n  private renderToggleButtons() {\n    return this.pageNumbers.map(\n      (num) =>\n        html`<obc-toggle-button-option\n          .value=${num.toString()}\n          .variant=${this.toggleButtonVariant}\n          .selected=${num === this.validatedCurrentPage}\n          .ariaLabel=${`Page ${num} of ${this.validatedPages}`}\n        >\n          ${num}\n        </obc-toggle-button-option>`\n    );\n  }\n\n  private renderProgressIndicatorDots() {\n    return html`\n      <obc-progress-indicator-dots\n        .totalSteps=${this.validatedPages}\n        .currentStep=${this.validatedCurrentPage}\n      ></obc-progress-indicator-dots>\n    `;\n  }\n\n  private renderNavigation() {\n    return html`\n      <div\n        class=${classMap({'navigation-wrapper': true, disabled: this.disabled})}\n        role=\"navigation\"\n        aria-label=\"Pagination\"\n      >\n        <obc-icon-button\n          variant=\"flat\"\n          aria-label=\"First page\"\n          aria-disabled=${this.canNavigateFirst}\n          ?disabled=${!this.canNavigateFirst}\n          @click=${this.handleFirstClick}\n        >\n          <obi-page-first-google></obi-page-first-google>\n        </obc-icon-button>\n\n        <obc-icon-button\n          variant=\"flat\"\n          aria-label=\"Previous page\"\n          aria-disabled=${this.canNavigatePrevious}\n          ?disabled=${!this.canNavigatePrevious}\n          @click=${this.handlePreviousClick}\n        >\n          <obi-chevron-left-google></obi-chevron-left-google>\n        </obc-icon-button>\n\n        ${this.isCondensed\n          ? this.renderProgressIndicatorDots()\n          : html`<obc-toggle-button-group\n              .value=${this.validatedCurrentPage.toString()}\n              .variant=${this.toggleButtonVariant}\n              ?disabled=${this.disabled}\n              @value=${this.handlePageChange}\n            >\n              ${this.renderToggleButtons()}\n            </obc-toggle-button-group>`}\n\n        <obc-icon-button\n          variant=\"flat\"\n          aria-label=\"Next page\"\n          aria-disabled=${this.canNavigateNext}\n          ?disabled=${!this.canNavigateNext}\n          @click=${this.handleNextClick}\n        >\n          <obi-chevron-right-google></obi-chevron-right-google>\n        </obc-icon-button>\n\n        <obc-icon-button\n          variant=\"flat\"\n          aria-label=\"Last page\"\n          aria-disabled=${this.canNavigateLast}\n          ?disabled=${!this.canNavigateLast}\n          @click=${this.handleLastClick}\n        >\n          <obi-page-last-google></obi-page-last-google>\n        </obc-icon-button>\n      </div>\n    `;\n  }\n\n  override render() {\n    return html`\n      <div\n        class=${classMap({\n          wrapper: true,\n          'type-regular': this.variant === PaginationVariant.regular,\n          'type-flat': this.variant === PaginationVariant.flat,\n          'type-condensed': this.variant === PaginationVariant.condensed,\n          disabled: this.disabled,\n        })}\n      >\n        <div class=\"content-container\">${this.renderNavigation()}</div>\n        <span\n          aria-live=\"polite\"\n          aria-atomic=\"true\"\n          style=\"position:absolute;width:1px;height:1px;margin:-1px;clip:rect(0 0 0 0);overflow:hidden;\"\n        >\n          ${this.announceMessage}\n        </span>\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-pagination': ObcPagination;\n  }\n}\n"],"names":["PaginationVariant"],"mappings":"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"}

package/dist/components/slider/slider.d.ts

@@ -17,6 +17,11 @@ export declare enum ObcSliderVariant {
  * The event detail contains the new numeric value.
  */
 export type ObcSliderValueEvent = CustomEvent<number>;
+/**
+ * Custom event type for slider change event (fired after user interaction completes).
+ * The event detail contains the new numeric value.
+ */
+export type ObcSliderChangeEvent = CustomEvent<number>;
 /**
  * `<obc-slider>` – A horizontal slider component for selecting a numeric value within a defined range.
  *
@@ -76,7 +81,8 @@ export type ObcSliderValueEvent = CustomEvent<number>;
  * ---
  *
  * ### Events
- * - `value` – Fired when the slider value changes, either by user interaction or programmatically. The event detail contains the new value as a number.
+ * - `value` – Fired continuously when the slider value changes during user interaction or programmatically. The event detail contains the new value as a number.
+ * - `change` – Fired only after user interaction completes (mouse/touch release or button click). The event detail contains the new value as a number.
  *
  * ---
  *
@@ -112,6 +118,7 @@ export type ObcSliderValueEvent = CustomEvent<number>;
  * @slot icon-right - Slot for the right icon button (shown when `hasRightIcon` is true)
  * @attr hugcontainer - If set, the slider will not have any spacing between the slider icons and the container
  * @fires value {ObcSliderValueEvent} - Fired when the value is changed
+ * @fires change {ObcSliderChangeEvent} - Fired when user interaction completes and value has changed
  */
 export declare class ObcSlider extends LitElement {
     /**
@@ -200,6 +207,12 @@ export declare class ObcSlider extends LitElement {
      * @fires value
      */
     onInput(value: number): void;
+    /**
+     * Fires the `change` event with the current value.
+     *
+     * @fires change
+     */
+    private fireChangeEvent;
     /**
      * Decrements the value by `stepClick` when the left icon button is clicked.
      */

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

@@ -1 +1 @@
-{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../src/components/slider/slider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAkB,MAAM,KAAK,CAAC;AAKhD,OAAO,+BAA+B,CAAC;AAIvC;;;;;;GAMG;AACH,oBAAY,gBAAgB;IAC1B,MAAM,WAAW;IACjB,QAAQ,aAAa;IACrB,OAAO,aAAa;CACrB;AAED;;;GAGG;AACH,MAAM,MAAM,mBAAmB,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC;AAEtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+FG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC;;;;OAIG;IACuB,KAAK,SAAM;IAErC;;;;OAIG;IACuB,GAAG,SAAK;IAElC;;;;OAIG;IACuB,GAAG,SAAO;IAEpC;;;;;OAKG;IACuB,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAEnD;;;;;OAKG;IACuB,SAAS,SAAM;IAEzC;;;;;;;;OAQG;IACuB,OAAO,EAAE,gBAAgB,CAA2B;IAE9E;;;;OAIG;IACwB,WAAW,UAAS;IAE/C;;;;OAIG;IACwB,YAAY,UAAS;IAEhD;;;;;OAKG;IACwB,YAAY,UAAS;IAEhD;;;;;;OAMG;IACuB,YAAY,SAAS;IAEpB,QAAQ,UAAS;IAE5C,OAAO,KAAK,KAAK,GAMhB;IAED,OAAO,CAAC,cAAc,CAAuB;IAC7C,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,WAAW,CAAK;IACxB,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,kBAAkB,CAAuB;IACjD,OAAO,CAAC,mBAAmB,CAAa;IAExC;;;;;;OAMG;IACH,OAAO,CAAC,KAAK,EAAE,MAAM;IAKrB;;OAEG;IACH,aAAa;IAKb;;OAEG;IACH,eAAe;IAKf,OAAO,KAAK,MAAM,GAEjB;IAED,OAAO,CAAC,eAAe;IAmBvB,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,YAAY;IAapB,OAAO,CAAC,iBAAiB,CAEvB;IAEF,OAAO,CAAC,eAAe,CAErB;IAEF,OAAO,CAAC,iBAAiB,CAEvB;IAEF,OAAO,CAAC,gBAAgB,CAEtB;IAEF,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,SAAS;IAOjB,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,iBAAiB;IAgBzB,OAAO,CAAC,cAAc;IA0DtB,OAAO,CAAC,aAAa;IAOZ,MAAM;IA2Ef,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}
+{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../src/components/slider/slider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAkB,MAAM,KAAK,CAAC;AAKhD,OAAO,+BAA+B,CAAC;AAIvC;;;;;;GAMG;AACH,oBAAY,gBAAgB;IAC1B,MAAM,WAAW;IACjB,QAAQ,aAAa;IACrB,OAAO,aAAa;CACrB;AAED;;;GAGG;AACH,MAAM,MAAM,mBAAmB,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC;AAEtD;;;GAGG;AACH,MAAM,MAAM,oBAAoB,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiGG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC;;;;OAIG;IACuB,KAAK,SAAM;IAErC;;;;OAIG;IACuB,GAAG,SAAK;IAElC;;;;OAIG;IACuB,GAAG,SAAO;IAEpC;;;;;OAKG;IACuB,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAEnD;;;;;OAKG;IACuB,SAAS,SAAM;IAEzC;;;;;;;;OAQG;IACuB,OAAO,EAAE,gBAAgB,CAA2B;IAE9E;;;;OAIG;IACwB,WAAW,UAAS;IAE/C;;;;OAIG;IACwB,YAAY,UAAS;IAEhD;;;;;OAKG;IACwB,YAAY,UAAS;IAEhD;;;;;;OAMG;IACuB,YAAY,SAAS;IAEpB,QAAQ,UAAS;IAE5C,OAAO,KAAK,KAAK,GAMhB;IAED,OAAO,CAAC,cAAc,CAAuB;IAC7C,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,WAAW,CAAK;IACxB,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,kBAAkB,CAAuB;IACjD,OAAO,CAAC,mBAAmB,CAAa;IAExC;;;;;;OAMG;IACH,OAAO,CAAC,KAAK,EAAE,MAAM;IAKrB;;;;OAIG;IACH,OAAO,CAAC,eAAe;IAMvB;;OAEG;IACH,aAAa;IAMb;;OAEG;IACH,eAAe;IAMf,OAAO,KAAK,MAAM,GAEjB;IAED,OAAO,CAAC,eAAe;IAmBvB,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,YAAY;IAapB,OAAO,CAAC,iBAAiB,CAEvB;IAEF,OAAO,CAAC,eAAe,CAErB;IAEF,OAAO,CAAC,iBAAiB,CAEvB;IAEF,OAAO,CAAC,gBAAgB,CAEtB;IAEF,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,SAAS;IAQjB,OAAO,CAAC,UAAU;IAQlB,OAAO,CAAC,iBAAiB;IAgBzB,OAAO,CAAC,cAAc;IA0DtB,OAAO,CAAC,aAAa;IAOZ,MAAM;IA8Ef,OAAgB,MAAM,0BAA6B;CACpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

package/dist/components/slider/slider.js

@@ -73,12 +73,23 @@ let ObcSlider = class extends LitElement {
     this.value = value;
     this.dispatchEvent(new CustomEvent("value", { detail: this.value }));
   }
+  /**
+   * Fires the `change` event with the current value.
+   *
+   * @fires change
+   */
+  fireChangeEvent() {
+    this.dispatchEvent(
+      new CustomEvent("change", { detail: this.value })
+    );
+  }
   /**
    * Decrements the value by `stepClick` when the left icon button is clicked.
    */
   onReduceClick() {
     if (this.disabled) return;
     this.onInput(Math.max(this.value - this.stepClick, this.min));
+    this.fireChangeEvent();
   }
   /**
    * Increments the value by `stepClick` when the right icon button is clicked.
@@ -86,6 +97,7 @@ let ObcSlider = class extends LitElement {
   onIncreaseClick() {
     if (this.disabled) return;
     this.onInput(Math.min(this.value + this.stepClick, this.max));
+    this.fireChangeEvent();
   }
   get slider() {
     return this.renderRoot.querySelector('input[type="range"]');
@@ -143,12 +155,14 @@ let ObcSlider = class extends LitElement {
     window.removeEventListener("mousemove", this.onWindowMouseMove);
     window.removeEventListener("mouseup", this.onWindowMouseUp);
     this.stopAnimation();
+    this.fireChangeEvent();
   }
   onTouchEnd() {
     this.isTouchActive = false;
     window.removeEventListener("touchmove", this.onWindowTouchMove);
     window.removeEventListener("touchend", this.onWindowTouchEnd);
     this.stopAnimation();
+    this.fireChangeEvent();
   }
   updateTargetValue(e) {
     const rect = this.slider.getBoundingClientRect();
@@ -242,6 +256,9 @@ let ObcSlider = class extends LitElement {
           @input=${(event) => {
       this.value = Number(event.target.value);
       this.dispatchEvent(new CustomEvent("value", { detail: this.value }));
+    }}
+          @change=${() => {
+      this.fireChangeEvent();
     }}
           @mousedown=${this.onMouseDown}
           @touchstart=${this.onTouchStart}