@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.45 → 2.0.0-next.49

package/custom-elements.json

@@ -47352,7 +47352,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`<obc-icon-button>` – An icon-only or icon-with-label button for quick actions.\n\nProvides a compact, visually prominent button that displays an icon (and optionally a label) for triggering actions. Commonly used for toolbars, navigation, or contextual actions where space is limited and a recognizable icon can represent the function.\n\nAppears as a circular or rounded button with configurable visual styles, supporting progress indication and various layout adaptations.\n\n## Features\n- **Variants:**\n  - `normal` (default): Standard appearance for most use cases.\n  - `raised`: Adds elevation/shadow for prominence.\n  - `flat`: Minimal, backgroundless style for subtle actions.\n- **Progress Indicator:**\n  - Shows a circular progress spinner overlay when the `progress` property is set (0–100). Useful for indicating loading or ongoing actions.\n- **Label Support:**\n  - Optionally displays a text label below the icon when `hasLabel` is true and content is provided in the `label` slot.\n- **Corner Alignment:**\n  - `cornerLeft` and `cornerRight` adjust the button's border radius and alignment for seamless placement at the start or end of a container.\n- **Active State:**\n  - `activated` visually highlights the button as selected or toggled.\n  - `activeColor` applies an accent color for emphasis.\n- **Wide Mode:**\n  - `wide` increases the button's width for easier touch targets or visual balance.\n- **Disabled State:**\n  - `disabled` prevents interaction and visually dims the button.\n\n## Usage Guidelines\n- Use `obc-icon-button` for actions represented by icons, such as toolbars, navigation, or quick-access commands.\n- Add a label (with `hasLabel` and the `label` slot) when clarity is needed or when icons alone may not be universally understood.\n- Use the progress indicator for actions that take time, such as uploads or background processes.\n- Prefer the `normal` variant for most cases; use `raised` to draw attention, and `flat` for less prominent or inline actions.\n- For grouped or edge-aligned layouts, use `cornerLeft` or `cornerRight` to visually merge with container edges.\n- Avoid using icon buttons for destructive or critical actions unless paired with clear feedback.\n- **TODO(designer):** Clarify recommended icon sizes and when to use label vs. icon-only.\n\n## Slots\n| Slot Name | Renders When...      | Purpose                                      |\n|-----------|---------------------|----------------------------------------------|\n| (default) | Always              | The icon to display (e.g., `<obi-search>`)   |\n| label     | If `hasLabel` is set | Optional label text below the icon           |\n\n## Best Practices\n- Ensure icons are clear and universally recognizable.\n- For accessibility, provide an `aria-label` or descriptive label for the button's action.\n- When using the progress indicator, avoid showing it for very short actions to prevent visual flicker.\n\n## Example:\n```\n<obc-icon-button variant=\"normal\">\n  <obi-search></obi-search>\n</obc-icon-button>\n\n<obc-icon-button variant=\"normal\" hasLabel>\n  <obi-arrow></obi-arrow>\n  <span slot=\"label\">Next</span>\n</obc-icon-button>\n```",
+          "description": "`<obc-icon-button>` – An icon-only or icon-with-label button for quick actions.\n\nProvides a compact, visually prominent button that displays an icon (and optionally a label) for triggering actions. Commonly used for toolbars, navigation, or contextual actions where space is limited and a recognizable icon can represent the function.\n\nAppears as a circular or rounded button with configurable visual styles, supporting progress indication and various layout adaptations.\n\n## Features\n- **Variants:**\n  - `normal` (default): Standard appearance for most use cases.\n  - `raised`: Adds elevation/shadow for prominence.\n  - `flat`: Minimal, backgroundless style for subtle actions.\n- **Progress Indicator:**\n  - Shows a circular progress spinner overlay when the `progress` property is set (0–100). Useful for indicating loading or ongoing actions.\n- **Label Support:**\n  - Optionally displays a text label below the icon when `hasLabel` is true and content is provided in the `label` slot.\n- **Corner Alignment:**\n  - `cornerLeft` and `cornerRight` adjust the button's border radius and alignment for seamless placement at the start or end of a container.\n- **Active State:**\n  - `activated` visually highlights the button as selected or toggled.\n  - `activeColor` applies an accent color for emphasis.\n- **Wide Mode:**\n  - `wide` increases the button's width for easier touch targets or visual balance.\n- **Disabled State:**\n  - `disabled` prevents interaction and visually dims the button.\n\n## Usage Guidelines\n- Use `obc-icon-button` for actions represented by icons, such as toolbars, navigation, or quick-access commands.\n- Add a label (with `hasLabel` and the `label` slot) when clarity is needed or when icons alone may not be universally understood.\n- Use the progress indicator for actions that take time, such as uploads or background processes.\n- Prefer the `normal` variant for most cases; use `raised` to draw attention, and `flat` for less prominent or inline actions.\n- For grouped or edge-aligned layouts, use `cornerLeft` or `cornerRight` to visually merge with container edges.\n- Avoid using icon buttons for destructive or critical actions unless paired with clear feedback.\n- **TODO(designer):** Clarify recommended icon sizes and when to use label vs. icon-only.\n\n## Slots\n| Slot Name | Renders When...      | Purpose                                      |\n|-----------|---------------------|----------------------------------------------|\n| (default) | Always              | The icon to display (e.g., `<obi-search>`)   |\n| label     | If `hasLabel` is set | Optional label text below the icon           |\n\n## Events\n- Emits a standard `click` event (`onClick` handler in framework wrappers) when activated.\n\n## Best Practices\n- Ensure icons are clear and universally recognizable.\n- For accessibility, provide an `aria-label` or descriptive label for the button's action.\n- When using the progress indicator, avoid showing it for very short actions to prevent visual flicker.\n\n## Example:\n```\n<obc-icon-button variant=\"normal\">\n  <obi-search></obi-search>\n</obc-icon-button>\n\n<obc-icon-button variant=\"normal\" hasLabel>\n  <obi-arrow></obi-arrow>\n  <span slot=\"label\">Next</span>\n</obc-icon-button>\n```",
           "name": "ObcIconButton",
           "slots": [
             {
@@ -47469,6 +47469,12 @@
               "readonly": true
             }
           ],
+          "events": [
+            {
+              "description": "Fired when the button is clicked (if not disabled).",
+              "name": "click"
+            }
+          ],
           "attributes": [
             {
               "name": "variant",
@@ -69104,7 +69110,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`<obc-compass-indicator>` – A compact compass direction indicator with heading, course, and north variants.\n\nRenders a 48 x 48 directional indicator that can switch between a circular\ncompass face and labeled compact readouts. Use it when you need a small\ndirectional cue next to a numeric readout or inside dense instrument layouts.\n\n## Features\n\n- **Types**: `regular` shows the circular compass indicator; `labeled` shows a framed indicator with a single cardinal label.\n- **Directions**: `heading`, `course`, and `north` each use their own visual symbol.\n- **Angle-driven output**: `angle` rotates the active symbol and drives the derived label in labeled mode.\n\n## Usage Guidelines\n\n- Use `direction=\"heading\"` for the filled heading arrow variant.\n- Use `direction=\"course\"` for the outlined course arrow variant.\n- Use `direction=\"north\"` for the north marker / bearing-style indicator.\n- Switch `type` to `labeled` when the indicator should also communicate the\n  nearest cardinal direction as text.",
+          "description": "`<obc-compass-indicator>` – A compact compass direction indicator with heading, course, and north variants.\n\nRenders a 48 x 48 directional indicator that can switch between a circular\ncompass face and labeled compact readouts. Use it when you need a small\ndirectional cue next to a numeric readout or inside dense instrument layouts.\n\n## Features\n\n- **Types**: `regular` shows the circular compass indicator; `labeled` shows a framed indicator with a single cardinal label.\n- **Directions**: `heading`, `course`, and `north` each use their own visual symbol.\n- **Angle-driven output**: `angle` rotates the active symbol and drives the derived label in labeled mode.\n- **Orientation**: `northUp` keeps the compass face fixed north-up and rotates the arrow; when `false` the face rotates and the arrow stays pointing up (heading-up / course-up).\n\n## Usage Guidelines\n\n- Use `direction=\"heading\"` for the filled heading arrow variant.\n- Use `direction=\"course\"` for the outlined course arrow variant.\n- Use `direction=\"north\"` for the north marker / bearing-style indicator.\n- Switch `type` to `labeled` when the indicator should also communicate the\n  nearest cardinal direction as text.\n- Set `northUp` to `false` to render a heading-up / course-up presentation\n  where the arrow stays vertical and the compass face rotates instead.",
           "name": "ObcCompassIndicator",
           "members": [
             {
@@ -69138,6 +69144,15 @@
               },
               "attribute": "direction"
             },
+            {
+              "kind": "field",
+              "name": "northUp",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "When `true` (default) the compass face stays north-up and the arrow\nrotates by `angle`. When `false` the arrow stays pointing up and the\ncompass face rotates instead (heading-up / course-up presentation).\n\nDeclared with `attribute: false` because the default is `true`; set it\nvia the JavaScript property (or framework binding) to opt out."
+            },
             {
               "kind": "field",
               "name": "normalizedAngle",
@@ -70000,7 +70015,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`<obc-compass>` – Full-featured compass with HDG/COG arrows, rate-of-turn indicator, and environmental overlays.\n\nRenders a circular compass instrument that displays heading (HDG) and\ncourse-over-ground (COG) as rotating arrows over a triple-ring watch face.\nIt supports wind and current indicators, a vessel silhouette, heading\nsetpoint with auto at-setpoint detection, advice zones, and a rate-of-turn\n(ROT) dot indicator. The compass can be oriented north-up, heading-up, or\ncourse-up.\n\n## Features\n\n- **Direction modes**: `northUp` (default), `headingUp`, or `courseUp`\n  via the `direction` property.\n- **HDG / COG arrows**: Two styled arrows overlay the watch face,\n  rotating independently.\n- **Heading setpoint**: Optional setpoint marker with auto at-setpoint\n  detection via `headingSetpoint`, `atHeadingSetpoint`, and deadband\n  tuning properties.\n- **Advice zones**: Pass `headingAdvices` to render caution/alert arcs;\n  triggered state is derived from whether the current heading falls\n  inside the advice range.\n- **Rate of turn**: Animated ROT indicator driven by\n  `rateOfTurnDegreesPerMinute` (deg/min, the maritime / AIS convention).\n  Supports spinning dots (`rotType=\"dots\"`) — the dot animation is\n  amplified by `rotDotAnimationFactor` so small physical values still\n  read at a glance — and a banana-shaped arc bar (`rotType=\"bar\"`)\n  showing the HDG→COG span. Bar extent is driven by the physical value\n  only (gain is not applied). Position on the outer scale ring or inner\n  circle via `rotPosition`.\n- **Environmental overlays**: Wind speed/direction and current\n  speed/direction indicators on the watch face.\n- **Vessel image**: Configurable vessel silhouette centered on the\n  compass, rotating with heading.\n- **Color priority**: Set `priority` to `Priority.enhanced` to use the\n  blue/enhanced color palette instead of the default gray/regular palette\n  (default: `Priority.regular`).\n\n## Usage Guidelines\n\n- Set `heading` and `courseOverGround` to the current sensor values\n  in degrees.\n- Use `direction` to control the compass orientation mode.\n- Use `headingSetpoint` to show a target heading marker.\n- Pass `headingAdvices` as an array of `AngleAdvice` objects for\n  caution/alert zones.\n- Set `windSpeed` / `windFromDirection` and `currentSpeed` /\n  `currentFromDirection` to display environmental indicators.\n\n## Example\n\n```html\n<obc-compass\n  heading=\"45\"\n  courseOverGround=\"50\"\n  direction=\"northUp\"\n  headingSetpoint=\"90\"\n  priority=\"regular\"\n  vesselImage=\"genericTop\"\n></obc-compass>\n```",
+          "description": "`<obc-compass>` – Full-featured compass with HDG/COG arrows, rate-of-turn indicator, and environmental overlays.\n\nRenders a circular compass instrument that displays heading (HDG) and\ncourse-over-ground (COG) as rotating arrows over a triple-ring watch face.\nIt supports wind and current indicators, a vessel silhouette, heading\nsetpoint with auto at-setpoint detection, advice zones, and a rate-of-turn\n(ROT) dot indicator. The compass can be oriented north-up, heading-up, or\ncourse-up.\n\n## Features\n\n- **Direction modes**: `northUp` (default), `headingUp`, or `courseUp`\n  via the `direction` property.\n- **HDG / COG arrows**: Two styled arrows overlay the watch face,\n  rotating independently.\n- **Heading setpoint**: Optional setpoint marker with auto at-setpoint\n  detection via `headingSetpoint`, `atHeadingSetpoint`, and deadband\n  tuning properties.\n- **Advice zones**: Pass `headingAdvices` to render caution/alert arcs;\n  triggered state is derived from whether the current heading falls\n  inside the advice range.\n- **Rate of turn**: Animated ROT indicator driven by\n  `rateOfTurnDegreesPerMinute` (deg/min, the maritime / AIS convention).\n  Supports spinning dots (`rotType=\"dots\"`) — the dot animation is\n  amplified by `rotDotAnimationFactor` so small physical values still\n  read at a glance — and a banana-shaped arc bar (`rotType=\"bar\"`)\n  showing the HDG→COG span. Bar extent is driven by the physical value\n  only (gain is not applied). Position on the outer scale ring or inner\n  circle via `rotPosition`.\n- **Environmental overlays**: Wind speed/direction and current\n  speed/direction indicators on the watch face.\n- **Vessel image**: Configurable vessel silhouette centered on the\n  compass, rotating with heading.\n- **Color priority**: Set `priority` to `Priority.enhanced` to use the\n  blue/enhanced color palette instead of the default gray/regular palette\n  (default: `Priority.regular`).\n\n## Usage Guidelines\n\n- Set `heading` and `courseOverGround` to the current sensor values\n  in degrees.\n- Use `direction` to control the compass orientation mode.\n- Use `headingSetpoint` to show a target heading marker.\n- Pass `headingAdvices` as an array of `AngleAdvice` objects for\n  caution/alert zones.\n- Set `currentWindSpeedKnots` / `windFromDirection` and `currentSpeed` /\n  `currentFromDirection` to display environmental indicators.\n\n## Example\n\n```html\n<obc-compass\n  heading=\"45\"\n  courseOverGround=\"50\"\n  direction=\"northUp\"\n  headingSetpoint=\"90\"\n  priority=\"regular\"\n  vesselImage=\"genericTop\"\n></obc-compass>\n```",
           "name": "ObcCompass",
           "members": [
             {
@@ -70118,13 +70133,13 @@
             },
             {
               "kind": "field",
-              "name": "windSpeed",
+              "name": "currentWindSpeedKnots",
               "type": {
                 "text": "number | null"
               },
               "default": "null",
-              "description": "The wind speed in beaufort scale number.",
-              "attribute": "windSpeed"
+              "description": "The wind speed in knots.",
+              "attribute": "currentWindSpeedKnots"
             },
             {
               "kind": "field",
@@ -70473,13 +70488,13 @@
               "fieldName": "touching"
             },
             {
-              "name": "windSpeed",
+              "name": "currentWindSpeedKnots",
               "type": {
                 "text": "number | null"
               },
               "default": "null",
-              "description": "The wind speed in beaufort scale number.",
-              "fieldName": "windSpeed"
+              "description": "The wind speed in knots.",
+              "fieldName": "currentWindSpeedKnots"
             },
             {
               "name": "windFromDirection",
@@ -86078,39 +86093,39 @@
             },
             {
               "kind": "field",
-              "name": "instantWindDirectionDeg",
+              "name": "currentWindFromDirection",
               "type": {
                 "text": "number | null"
               },
               "default": "null",
-              "attribute": "instantWindDirectionDeg"
+              "attribute": "currentWindFromDirection"
             },
             {
               "kind": "field",
-              "name": "instantWindSpeedNumber",
+              "name": "currentWindSpeedKnots",
               "type": {
                 "text": "number | null"
               },
               "default": "null",
-              "attribute": "instantWindSpeedNumber"
+              "attribute": "currentWindSpeedKnots"
             },
             {
               "kind": "field",
-              "name": "instantCurrentDirectionDeg",
+              "name": "currentFromDirection",
               "type": {
                 "text": "number | null"
               },
               "default": "null",
-              "attribute": "instantCurrentDirectionDeg"
+              "attribute": "currentFromDirection"
             },
             {
               "kind": "field",
-              "name": "instantCurrentSpeedNumber",
+              "name": "currentSpeedKnots",
               "type": {
                 "text": "number | null"
               },
               "default": "null",
-              "attribute": "instantCurrentSpeedNumber"
+              "attribute": "currentSpeedKnots"
             },
             {
               "kind": "field",
@@ -86169,36 +86184,36 @@
           ],
           "attributes": [
             {
-              "name": "instantWindDirectionDeg",
+              "name": "currentWindFromDirection",
               "type": {
                 "text": "number | null"
               },
               "default": "null",
-              "fieldName": "instantWindDirectionDeg"
+              "fieldName": "currentWindFromDirection"
             },
             {
-              "name": "instantWindSpeedNumber",
+              "name": "currentWindSpeedKnots",
               "type": {
                 "text": "number | null"
               },
               "default": "null",
-              "fieldName": "instantWindSpeedNumber"
+              "fieldName": "currentWindSpeedKnots"
             },
             {
-              "name": "instantCurrentDirectionDeg",
+              "name": "currentFromDirection",
               "type": {
                 "text": "number | null"
               },
               "default": "null",
-              "fieldName": "instantCurrentDirectionDeg"
+              "fieldName": "currentFromDirection"
             },
             {
-              "name": "instantCurrentSpeedNumber",
+              "name": "currentSpeedKnots",
               "type": {
                 "text": "number | null"
               },
               "default": "null",
-              "fieldName": "instantCurrentSpeedNumber"
+              "fieldName": "currentSpeedKnots"
             },
             {
               "name": "vesselImage",
@@ -87026,12 +87041,12 @@
             },
             {
               "kind": "field",
-              "name": "wind",
+              "name": "windKnots",
               "type": {
                 "text": "number | null"
               },
               "default": "null",
-              "attribute": "wind"
+              "attribute": "windKnots"
             },
             {
               "kind": "field",
@@ -87590,12 +87605,12 @@
               "fieldName": "showLabels"
             },
             {
-              "name": "wind",
+              "name": "windKnots",
               "type": {
                 "text": "number | null"
               },
               "default": "null",
-              "fieldName": "wind"
+              "fieldName": "windKnots"
             },
             {
               "name": "windFromDirectionDeg",
@@ -87888,7 +87903,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`<obc-wind-indicator>` – A compact wind indicator with a fixed frame and a rotating wind marker.\n\nVisualizes a discrete wind `level` using a compact icon plus optional mode layers.\n\n## Features\n\n- **Variants:** `type` (`arrow` | `shaft` | `labeled`), `direction` (`true` | `relative`), `priority` (`regular` | `enhanced`).\n- **Discrete input:** `level` selects the icon state; mapping from real wind to `level` happens outside.\n\n## Usage Guidelines\n\nUse when you need a small wind cue next to other compact indicators.",
+          "description": "`<obc-wind-indicator>` – A compact wind indicator with a fixed frame and a rotating wind marker.\n\nVisualizes a wind speed in knots using a compact wind-barb icon plus\noptional mode layers.\n\n## Features\n\n- **Variants:** `type` (`arrow` | `shaft` | `labeled`), `direction` (`true` | `relative`), `priority` (`regular` | `enhanced`).\n- **Speed input:** `currentWindSpeedKnots` is the wind speed in knots.\n  The barb icon follows the standard meteorological convention (one\n  half-barb per 5 kn). 0–65 kn covers all 14 icons; higher values clamp\n  to the heaviest icon.\n\n## Usage Guidelines\n\nUse when you need a small wind cue next to other compact indicators.\nPass the wind speed in knots through `currentWindSpeedKnots`, matching\nthe convention used by `<obc-wind>`, `<obc-wind-propulsion>` and\n`<obc-compass>`.",
           "name": "ObcWindIndicator",
           "members": [
             {
@@ -87917,12 +87932,13 @@
             },
             {
               "kind": "field",
-              "name": "level",
+              "name": "currentWindSpeedKnots",
               "type": {
                 "text": "number"
               },
               "default": "0",
-              "attribute": "level"
+              "description": "Wind speed in **knots**, used to pick the wind-barb icon.\n\nMaps to the icon set using the designer-confirmed \"Option C\"\nranges: `[0, 0.5)` kn renders calm, `[0.5, 2.5)` kn renders a\nshaft only, then 5-kn nearest-neighbour buckets up to 45 kn\n(half-barb steps), `[47.5, 55)` kn renders the 50-kn pennant, and\n`[55, 65)` / `[65, ∞)` kn add one and two full barbs above the\npennant respectively. Non-finite or negative values fall back to\ncalm.",
+              "attribute": "current-wind-speed-knots"
             },
             {
               "kind": "field",
@@ -87931,50 +87947,39 @@
                 "text": "number"
               },
               "default": "0",
-              "description": "Rotation of the reference frame (course/heading) in degrees.\n\nUsed in relative mode to compute the marker rotation as `windFromAngle - rotationAngle`.\n`0` means north-up.",
+              "description": "Rotation of the reference frame (course/heading) in degrees.\n\nThis could be the heading or the course of the vessel.\n`0` means north-up.",
               "attribute": "rotation-angle"
             },
             {
               "kind": "field",
-              "name": "windFromAngle",
+              "name": "currentWindFromDirection",
               "type": {
                 "text": "number"
               },
               "default": "0",
               "description": "Primary wind direction input (wind-from).\n\nRepresents the direction the wind comes **from** in degrees.\n- `0` / `360`: wind from north → marker points south (down)\n- `180`: wind from south → marker points north (up)",
-              "attribute": "wind-from-angle"
+              "attribute": "current-wind-from-direction"
             },
             {
               "kind": "field",
-              "name": "angle",
-              "deprecated": "Use `windFromAngle` instead.",
-              "attribute": "angle"
+              "name": "windFromAngle",
+              "deprecated": "Use `currentWindFromDirection` instead.",
+              "attribute": "windFromAngle"
             },
             {
-              "kind": "method",
-              "name": "clampLevel",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "number"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "value",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ]
+              "kind": "field",
+              "name": "angle",
+              "deprecated": "Use `currentWindFromDirection` instead.",
+              "attribute": "angle"
             },
             {
               "kind": "field",
-              "name": "clampedLevel",
+              "name": "iconIndex",
               "type": {
                 "text": "number"
               },
               "privacy": "private",
+              "description": "Icon index in the range `1..14`, derived from `currentWindSpeedKnots`\nvia the shared `windKnotsToIconIndex` helper (standard meteorological\nwind-barb convention; one half-barb per 5 kn).",
               "readonly": true
             },
             {
@@ -88058,12 +88063,6 @@
                   "type": {
                     "text": "string"
                   }
-                },
-                {
-                  "name": "level",
-                  "type": {
-                    "text": "number"
-                  }
                 }
               ]
             },
@@ -88088,12 +88087,6 @@
                   "type": {
                     "text": "string"
                   }
-                },
-                {
-                  "name": "level",
-                  "type": {
-                    "text": "number"
-                  }
                 }
               ]
             },
@@ -88151,12 +88144,13 @@
               "fieldName": "priority"
             },
             {
-              "name": "level",
+              "name": "current-wind-speed-knots",
               "type": {
                 "text": "number"
               },
               "default": "0",
-              "fieldName": "level"
+              "description": "Wind speed in **knots**, used to pick the wind-barb icon.\n\nMaps to the icon set using the designer-confirmed \"Option C\"\nranges: `[0, 0.5)` kn renders calm, `[0.5, 2.5)` kn renders a\nshaft only, then 5-kn nearest-neighbour buckets up to 45 kn\n(half-barb steps), `[47.5, 55)` kn renders the 50-kn pennant, and\n`[55, 65)` / `[65, ∞)` kn add one and two full barbs above the\npennant respectively. Non-finite or negative values fall back to\ncalm.",
+              "fieldName": "currentWindSpeedKnots"
             },
             {
               "name": "rotation-angle",
@@ -88164,21 +88158,26 @@
                 "text": "number"
               },
               "default": "0",
-              "description": "Rotation of the reference frame (course/heading) in degrees.\n\nUsed in relative mode to compute the marker rotation as `windFromAngle - rotationAngle`.\n`0` means north-up.",
+              "description": "Rotation of the reference frame (course/heading) in degrees.\n\nThis could be the heading or the course of the vessel.\n`0` means north-up.",
               "fieldName": "rotationAngle"
             },
             {
-              "name": "wind-from-angle",
+              "name": "current-wind-from-direction",
               "type": {
                 "text": "number"
               },
               "default": "0",
               "description": "Primary wind direction input (wind-from).\n\nRepresents the direction the wind comes **from** in degrees.\n- `0` / `360`: wind from north → marker points south (down)\n- `180`: wind from south → marker points north (up)",
+              "fieldName": "currentWindFromDirection"
+            },
+            {
+              "name": "windFromAngle",
+              "deprecated": "Use `currentWindFromDirection` instead.",
               "fieldName": "windFromAngle"
             },
             {
               "name": "angle",
-              "deprecated": "Use `windFromAngle` instead.",
+              "deprecated": "Use `currentWindFromDirection` instead.",
               "fieldName": "angle"
             }
           ],
@@ -88392,12 +88391,12 @@
             },
             {
               "kind": "field",
-              "name": "currentWindSpeedBeaufort",
+              "name": "currentWindSpeedKnots",
               "type": {
                 "text": "number | null"
               },
               "default": "null",
-              "attribute": "currentWindSpeedBeaufort"
+              "attribute": "currentWindSpeedKnots"
             },
             {
               "kind": "field",
@@ -88644,12 +88643,12 @@
               "fieldName": "tickmarkStyle"
             },
             {
-              "name": "currentWindSpeedBeaufort",
+              "name": "currentWindSpeedKnots",
               "type": {
                 "text": "number | null"
               },
               "default": "null",
-              "fieldName": "currentWindSpeedBeaufort"
+              "fieldName": "currentWindSpeedKnots"
             },
             {
               "name": "currentWindFromDirection",
@@ -88707,12 +88706,12 @@
             },
             {
               "kind": "field",
-              "name": "currentWindSpeedBeaufort",
+              "name": "currentWindSpeedKnots",
               "type": {
                 "text": "number"
               },
-              "default": "1",
-              "attribute": "currentWindSpeedBeaufort"
+              "default": "25",
+              "attribute": "currentWindSpeedKnots"
             },
             {
               "kind": "field",
@@ -88867,12 +88866,12 @@
               "fieldName": "currentWindFromDirection"
             },
             {
-              "name": "currentWindSpeedBeaufort",
+              "name": "currentWindSpeedKnots",
               "type": {
                 "text": "number"
               },
-              "default": "1",
-              "fieldName": "currentWindSpeedBeaufort"
+              "default": "25",
+              "fieldName": "currentWindSpeedKnots"
             },
             {
               "name": "vesselImage",

package/dist/components/badge/badge.css.js

@@ -10,7 +10,7 @@ const compentStyle = css`
   align-items: center;
   justify-content: center;
   border-style: solid;
-  border-radius: var(--app-components-badge-border-radius);
+  border-radius: var(--ui-components-badge-border-radius);
   padding: calc(var(--ui-components-badge-padding) - 1px);
   border: 1px solid var(--alert-alarm-outline-color);
   background: var(--alert-alarm-color);
@@ -25,8 +25,8 @@ const compentStyle = css`
   }
 
 .wrapper .icon {
-    width: var(--app-components-badge-icon-size);
-    height: var(--app-components-badge-icon-size);
+    width: var(--ui-components-badge-icon-size);
+    height: var(--ui-components-badge-icon-size);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -46,18 +46,18 @@ const compentStyle = css`
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    padding: 0 var(--app-components-badge-label-spacing) 1px
-      var(--app-components-badge-label-spacing);
-    height: var(--app-components-badge-icon-size);
-    min-width: var(--app-components-badge-icon-size);
+    padding: 0 var(--ui-components-badge-label-spacing) 1px
+      var(--ui-components-badge-label-spacing);
+    height: var(--ui-components-badge-icon-size);
+    min-width: var(--ui-components-badge-icon-size);
   }
 
 .wrapper.size-large {
     display: inline-flex;
     width: fit-content;
     height: 24px;
-    min-width: var(--app-components-badge-min-size-large);
-    min-height: var(--app-components-badge-min-size-large);
+    min-width: var(--ui-components-badge-min-size-large);
+    min-height: var(--ui-components-badge-min-size-large);
 
     padding: calc(var(--ui-components-badge-padding) - 1px);
     justify-content: center;
@@ -80,8 +80,8 @@ const compentStyle = css`
     }
 
 .wrapper.size-large .icon {
-      width: var(--app-components-badge-icon-size-large);
-      height: var(--app-components-badge-icon-size-large);
+      width: var(--ui-components-badge-icon-size-large);
+      height: var(--ui-components-badge-icon-size-large);
       display: flex;
       align-items: center;
       justify-content: center;
@@ -152,8 +152,8 @@ const compentStyle = css`
   }
 
 .wrapper.variant-flat .icon {
-      min-width: var(--app-components-badge-icon-size);
-      min-height: var(--app-components-badge-icon-size);
+      min-width: var(--ui-components-badge-icon-size);
+      min-height: var(--ui-components-badge-icon-size);
     }
 
 .wrapper.variant-flat .icon.type-alarm {
@@ -208,8 +208,8 @@ const compentStyle = css`
     }
 
 .wrapper.variant-flat .icon.type-outline {
-      width: var(--app-components-badge-icon-size-flat);
-      height: var(--app-components-badge-icon-size-flat);
+      width: var(--ui-components-badge-icon-size-flat);
+      height: var(--ui-components-badge-icon-size-flat);
     }
 
 .wrapper.variant-flat .icon.type-outline + .number {

package/dist/components/icon-button/icon-button.d.ts

@@ -52,6 +52,9 @@ export declare enum IconButtonVariant {
  * | (default) | Always              | The icon to display (e.g., `<obi-search>`)   |
  * | label     | If `hasLabel` is set | Optional label text below the icon           |
  *
+ * ## Events
+ * - Emits a standard `click` event (`onClick` handler in framework wrappers) when activated.
+ *
  * ## Best Practices
  * - Ensure icons are clear and universally recognizable.
  * - For accessibility, provide an `aria-label` or descriptive label for the button's action.
@@ -71,6 +74,7 @@ export declare enum IconButtonVariant {
  *
  * @slot - Icon slot (default): Place an icon such as <obi-search> here.
  * @slot label - Optional label shown below the icon when `hasLabel` is true.
+ * @fires click - Fired when the button is clicked (if not disabled).
  */
 export declare class ObcIconButton extends LitElement {
     /**

package/dist/components/icon-button/icon-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../../src/components/icon-button/icon-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAQ,OAAO,EAAY,MAAM,KAAK,CAAC;AAMzD;;;;;GAKG;AACH,oBAAY,iBAAiB;IAC3B,MAAM,WAAW;IACjB,MAAM,WAAW;IACjB,IAAI,SAAS;IACb,WAAW,gBAAgB;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4DG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C;;;;;OAKG;IACuB,OAAO,EAAE,iBAAiB,CACzB;IAE3B;;;OAGG;IACwB,SAAS,UAAS;IAE7C;;;OAGG;IACwB,UAAU,UAAS;IAE9C;;;OAGG;IACwB,WAAW,UAAS;IAE/C;;;OAGG;IACwB,WAAW,UAAS;IAE/C;;OAEG;IACwB,IAAI,UAAS;IAExC;;OAEG;IACwB,QAAQ,UAAS;IAE5C;;;;OAIG;IACuB,QAAQ,EAAE,SAAS,GAAG,MAAM,CAAa;IAEnE;;OAEG;IACwB,QAAQ,EAAE,OAAO,CAAS;IAErD,iFAAiF;IACpC,WAAW,UAAQ;IAEhE,IAAI,eAAe,0DAoDlB;IAEQ,MAAM;IAiCf,OAAgB,MAAM,0BAAwB;CAC/C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}
+{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../../src/components/icon-button/icon-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAQ,OAAO,EAAY,MAAM,KAAK,CAAC;AAMzD;;;;;GAKG;AACH,oBAAY,iBAAiB;IAC3B,MAAM,WAAW;IACjB,MAAM,WAAW;IACjB,IAAI,SAAS;IACb,WAAW,gBAAgB;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgEG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C;;;;;OAKG;IACuB,OAAO,EAAE,iBAAiB,CACzB;IAE3B;;;OAGG;IACwB,SAAS,UAAS;IAE7C;;;OAGG;IACwB,UAAU,UAAS;IAE9C;;;OAGG;IACwB,WAAW,UAAS;IAE/C;;;OAGG;IACwB,WAAW,UAAS;IAE/C;;OAEG;IACwB,IAAI,UAAS;IAExC;;OAEG;IACwB,QAAQ,UAAS;IAE5C;;;;OAIG;IACuB,QAAQ,EAAE,SAAS,GAAG,MAAM,CAAa;IAEnE;;OAEG;IACwB,QAAQ,EAAE,OAAO,CAAS;IAErD,iFAAiF;IACpC,WAAW,UAAQ;IAEhE,IAAI,eAAe,0DAoDlB;IAEQ,MAAM;IAiCf,OAAgB,MAAM,0BAAwB;CAC/C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}

package/dist/components/icon-button/icon-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.js","sources":["../../../src/components/icon-button/icon-button.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport iconStyle from './icon-button.css?inline';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {customElement} from '../../decorator.js';\n\n/**\n * The available visual variants for `<obc-icon-button>`.\n * - `normal`: Standard appearance for most use cases.\n * - `raised`: Adds elevation/shadow for prominence.\n * - `flat`: Minimal, backgroundless style for subtle actions.\n */\nexport enum IconButtonVariant {\n  normal = 'normal',\n  raised = 'raised',\n  flat = 'flat',\n  integration = 'integration',\n}\n\n/**\n * `<obc-icon-button>` – An icon-only or icon-with-label button for quick actions.\n *\n * Provides a compact, visually prominent button that displays an icon (and optionally a label) for triggering actions. Commonly used for toolbars, navigation, or contextual actions where space is limited and a recognizable icon can represent the function.\n *\n * Appears as a circular or rounded button with configurable visual styles, supporting progress indication and various layout adaptations.\n *\n * ## Features\n * - **Variants:**\n *   - `normal` (default): Standard appearance for most use cases.\n *   - `raised`: Adds elevation/shadow for prominence.\n *   - `flat`: Minimal, backgroundless style for subtle actions.\n * - **Progress Indicator:**\n *   - Shows a circular progress spinner overlay when the `progress` property is set (0–100). Useful for indicating loading or ongoing actions.\n * - **Label Support:**\n *   - Optionally displays a text label below the icon when `hasLabel` is true and content is provided in the `label` slot.\n * - **Corner Alignment:**\n *   - `cornerLeft` and `cornerRight` adjust the button's border radius and alignment for seamless placement at the start or end of a container.\n * - **Active State:**\n *   - `activated` visually highlights the button as selected or toggled.\n *   - `activeColor` applies an accent color for emphasis.\n * - **Wide Mode:**\n *   - `wide` increases the button's width for easier touch targets or visual balance.\n * - **Disabled State:**\n *   - `disabled` prevents interaction and visually dims the button.\n *\n * ## Usage Guidelines\n * - Use `obc-icon-button` for actions represented by icons, such as toolbars, navigation, or quick-access commands.\n * - Add a label (with `hasLabel` and the `label` slot) when clarity is needed or when icons alone may not be universally understood.\n * - Use the progress indicator for actions that take time, such as uploads or background processes.\n * - Prefer the `normal` variant for most cases; use `raised` to draw attention, and `flat` for less prominent or inline actions.\n * - For grouped or edge-aligned layouts, use `cornerLeft` or `cornerRight` to visually merge with container edges.\n * - Avoid using icon buttons for destructive or critical actions unless paired with clear feedback.\n * - **TODO(designer):** Clarify recommended icon sizes and when to use label vs. icon-only.\n *\n * ## Slots\n * | Slot Name | Renders When...      | Purpose                                      |\n * |-----------|---------------------|----------------------------------------------|\n * | (default) | Always              | The icon to display (e.g., `<obi-search>`)   |\n * | label     | If `hasLabel` is set | Optional label text below the icon           |\n *\n * ## Best Practices\n * - Ensure icons are clear and universally recognizable.\n * - For accessibility, provide an `aria-label` or descriptive label for the button's action.\n * - When using the progress indicator, avoid showing it for very short actions to prevent visual flicker.\n *\n * ## Example:\n * ```\n * <obc-icon-button variant=\"normal\">\n *   <obi-search></obi-search>\n * </obc-icon-button>\n *\n * <obc-icon-button variant=\"normal\" hasLabel>\n *   <obi-arrow></obi-arrow>\n *   <span slot=\"label\">Next</span>\n * </obc-icon-button>\n * ```\n *\n * @slot - Icon slot (default): Place an icon such as <obi-search> here.\n * @slot label - Optional label shown below the icon when `hasLabel` is true.\n */\n@customElement('obc-icon-button')\nexport class ObcIconButton extends LitElement {\n  /**\n   * Visual style of the button.\n   * - `normal`: Standard appearance (default).\n   * - `raised`: Elevated with shadow.\n   * - `flat`: Minimal, backgroundless style.\n   */\n  @property({type: String}) variant: IconButtonVariant =\n    IconButtonVariant.normal;\n\n  /**\n   * Whether the button is in an activated (selected/toggled) state.\n   * Visually highlights the button to indicate selection.\n   */\n  @property({type: Boolean}) activated = false;\n\n  /**\n   * If true, aligns the button to the left edge and removes left border radius.\n   * Useful for grouping or edge-aligned layouts.\n   */\n  @property({type: Boolean}) cornerLeft = false;\n\n  /**\n   * If true, aligns the button to the right edge and removes right border radius.\n   * Useful for grouping or edge-aligned layouts.\n   */\n  @property({type: Boolean}) cornerRight = false;\n\n  /**\n   * Applies an accent color to the button for emphasis.\n   * Used to visually distinguish active or important actions.\n   */\n  @property({type: Boolean}) activeColor = false;\n\n  /**\n   * Increases the button's width for larger touch targets or visual balance.\n   */\n  @property({type: Boolean}) wide = false;\n\n  /**\n   * Disables the button, preventing user interaction and dimming its appearance.\n   */\n  @property({type: Boolean}) disabled = false;\n\n  /**\n   * Shows a circular progress indicator overlay when set (0–100).\n   * Use to indicate ongoing actions or loading states.\n   * If undefined, no progress indicator is shown.\n   */\n  @property({type: Number}) progress: undefined | number = undefined;\n\n  /**\n   * If true, displays a label below the icon using the `label` slot.\n   */\n  @property({type: Boolean}) hasLabel: boolean = false;\n\n  /** If false, and cornerLeft or cornerRight is true, the divider is not shown. */\n  @property({type: Boolean, attribute: false}) showDivider = true;\n\n  get progressSpinner() {\n    if (this.progress === undefined) {\n      return nothing;\n    }\n    if (this.progress === 100) {\n      return html`<div class=\"progress-spinner\">\n        <svg\n          width=\"40\"\n          height=\"40\"\n          viewBox=\"0 0 40 40\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <circle\n            cx=\"20\"\n            cy=\"20\"\n            r=\"18\"\n            stroke=\"#325B9A\"\n            stroke-width=\"4\"\n            fill=\"none\"\n          />\n        </svg>\n      </div>`;\n    }\n    const angleRad = (this.progress * 0.95 * 3.6 * Math.PI) / 180;\n    const x = 20 + 18 * Math.sin(angleRad);\n    const y = 20 - 18 * Math.cos(angleRad);\n    const largeArcFlag = angleRad > Math.PI ? 1 : 0;\n    return html`<div class=\"progress-spinner\">\n      <svg\n        width=\"40\"\n        height=\"40\"\n        viewBox=\"0 0 40 40\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <circle\n          cx=\"20\"\n          cy=\"20\"\n          r=\"18\"\n          stroke=\"var(--container-backdrop-color)\"\n          stroke-width=\"4\"\n          fill=\"none\"\n        />\n        <path\n          d=\"M18 2 A18 18 0 ${largeArcFlag} 1 ${x} ${y}\"\n          stroke=\"var(--instrument-enhanced-secondary-color)\"\n          stroke-width=\"4\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    </div>`;\n  }\n\n  override render() {\n    return html`\n      <button\n        class=${classMap({\n          wrapper: true,\n          ['variant-' + this.variant]: true,\n          activated: this.activated,\n          'corner-left': this.cornerLeft,\n          'corner-right': this.cornerRight,\n          'active-color': this.activeColor,\n          'has-label': this.hasLabel,\n          wide: this.wide,\n          progress: this.progress !== undefined,\n          'hide-divider': !this.showDivider,\n        })}\n        ?disabled=${this.disabled}\n        part=\"wrapper\"\n      >\n        ${this.progress !== undefined ? this.progressSpinner : nothing}\n        <div class=\"visible-wrapper\" part=\"visible-wrapper\">\n          <div class=\"icon\" part=\"icon\">\n            <slot></slot>\n          </div>\n        </div>\n        ${this.hasLabel\n          ? html`<div class=\"label\" part=\"label\">\n              <slot name=\"label\"></slot>\n            </div>`\n          : nothing}\n      </button>\n    `;\n  }\n\n  static override styles = unsafeCSS(iconStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-icon-button': ObcIconButton;\n  }\n}\n"],"names":["IconButtonVariant"],"mappings":"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"}
+{"version":3,"file":"icon-button.js","sources":["../../../src/components/icon-button/icon-button.ts"],"sourcesContent":["import {LitElement, html, nothing, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport iconStyle from './icon-button.css?inline';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {customElement} from '../../decorator.js';\n\n/**\n * The available visual variants for `<obc-icon-button>`.\n * - `normal`: Standard appearance for most use cases.\n * - `raised`: Adds elevation/shadow for prominence.\n * - `flat`: Minimal, backgroundless style for subtle actions.\n */\nexport enum IconButtonVariant {\n  normal = 'normal',\n  raised = 'raised',\n  flat = 'flat',\n  integration = 'integration',\n}\n\n/**\n * `<obc-icon-button>` – An icon-only or icon-with-label button for quick actions.\n *\n * Provides a compact, visually prominent button that displays an icon (and optionally a label) for triggering actions. Commonly used for toolbars, navigation, or contextual actions where space is limited and a recognizable icon can represent the function.\n *\n * Appears as a circular or rounded button with configurable visual styles, supporting progress indication and various layout adaptations.\n *\n * ## Features\n * - **Variants:**\n *   - `normal` (default): Standard appearance for most use cases.\n *   - `raised`: Adds elevation/shadow for prominence.\n *   - `flat`: Minimal, backgroundless style for subtle actions.\n * - **Progress Indicator:**\n *   - Shows a circular progress spinner overlay when the `progress` property is set (0–100). Useful for indicating loading or ongoing actions.\n * - **Label Support:**\n *   - Optionally displays a text label below the icon when `hasLabel` is true and content is provided in the `label` slot.\n * - **Corner Alignment:**\n *   - `cornerLeft` and `cornerRight` adjust the button's border radius and alignment for seamless placement at the start or end of a container.\n * - **Active State:**\n *   - `activated` visually highlights the button as selected or toggled.\n *   - `activeColor` applies an accent color for emphasis.\n * - **Wide Mode:**\n *   - `wide` increases the button's width for easier touch targets or visual balance.\n * - **Disabled State:**\n *   - `disabled` prevents interaction and visually dims the button.\n *\n * ## Usage Guidelines\n * - Use `obc-icon-button` for actions represented by icons, such as toolbars, navigation, or quick-access commands.\n * - Add a label (with `hasLabel` and the `label` slot) when clarity is needed or when icons alone may not be universally understood.\n * - Use the progress indicator for actions that take time, such as uploads or background processes.\n * - Prefer the `normal` variant for most cases; use `raised` to draw attention, and `flat` for less prominent or inline actions.\n * - For grouped or edge-aligned layouts, use `cornerLeft` or `cornerRight` to visually merge with container edges.\n * - Avoid using icon buttons for destructive or critical actions unless paired with clear feedback.\n * - **TODO(designer):** Clarify recommended icon sizes and when to use label vs. icon-only.\n *\n * ## Slots\n * | Slot Name | Renders When...      | Purpose                                      |\n * |-----------|---------------------|----------------------------------------------|\n * | (default) | Always              | The icon to display (e.g., `<obi-search>`)   |\n * | label     | If `hasLabel` is set | Optional label text below the icon           |\n *\n * ## Events\n * - Emits a standard `click` event (`onClick` handler in framework wrappers) when activated.\n *\n * ## Best Practices\n * - Ensure icons are clear and universally recognizable.\n * - For accessibility, provide an `aria-label` or descriptive label for the button's action.\n * - When using the progress indicator, avoid showing it for very short actions to prevent visual flicker.\n *\n * ## Example:\n * ```\n * <obc-icon-button variant=\"normal\">\n *   <obi-search></obi-search>\n * </obc-icon-button>\n *\n * <obc-icon-button variant=\"normal\" hasLabel>\n *   <obi-arrow></obi-arrow>\n *   <span slot=\"label\">Next</span>\n * </obc-icon-button>\n * ```\n *\n * @slot - Icon slot (default): Place an icon such as <obi-search> here.\n * @slot label - Optional label shown below the icon when `hasLabel` is true.\n * @fires click - Fired when the button is clicked (if not disabled).\n */\n@customElement('obc-icon-button')\nexport class ObcIconButton extends LitElement {\n  /**\n   * Visual style of the button.\n   * - `normal`: Standard appearance (default).\n   * - `raised`: Elevated with shadow.\n   * - `flat`: Minimal, backgroundless style.\n   */\n  @property({type: String}) variant: IconButtonVariant =\n    IconButtonVariant.normal;\n\n  /**\n   * Whether the button is in an activated (selected/toggled) state.\n   * Visually highlights the button to indicate selection.\n   */\n  @property({type: Boolean}) activated = false;\n\n  /**\n   * If true, aligns the button to the left edge and removes left border radius.\n   * Useful for grouping or edge-aligned layouts.\n   */\n  @property({type: Boolean}) cornerLeft = false;\n\n  /**\n   * If true, aligns the button to the right edge and removes right border radius.\n   * Useful for grouping or edge-aligned layouts.\n   */\n  @property({type: Boolean}) cornerRight = false;\n\n  /**\n   * Applies an accent color to the button for emphasis.\n   * Used to visually distinguish active or important actions.\n   */\n  @property({type: Boolean}) activeColor = false;\n\n  /**\n   * Increases the button's width for larger touch targets or visual balance.\n   */\n  @property({type: Boolean}) wide = false;\n\n  /**\n   * Disables the button, preventing user interaction and dimming its appearance.\n   */\n  @property({type: Boolean}) disabled = false;\n\n  /**\n   * Shows a circular progress indicator overlay when set (0–100).\n   * Use to indicate ongoing actions or loading states.\n   * If undefined, no progress indicator is shown.\n   */\n  @property({type: Number}) progress: undefined | number = undefined;\n\n  /**\n   * If true, displays a label below the icon using the `label` slot.\n   */\n  @property({type: Boolean}) hasLabel: boolean = false;\n\n  /** If false, and cornerLeft or cornerRight is true, the divider is not shown. */\n  @property({type: Boolean, attribute: false}) showDivider = true;\n\n  get progressSpinner() {\n    if (this.progress === undefined) {\n      return nothing;\n    }\n    if (this.progress === 100) {\n      return html`<div class=\"progress-spinner\">\n        <svg\n          width=\"40\"\n          height=\"40\"\n          viewBox=\"0 0 40 40\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <circle\n            cx=\"20\"\n            cy=\"20\"\n            r=\"18\"\n            stroke=\"#325B9A\"\n            stroke-width=\"4\"\n            fill=\"none\"\n          />\n        </svg>\n      </div>`;\n    }\n    const angleRad = (this.progress * 0.95 * 3.6 * Math.PI) / 180;\n    const x = 20 + 18 * Math.sin(angleRad);\n    const y = 20 - 18 * Math.cos(angleRad);\n    const largeArcFlag = angleRad > Math.PI ? 1 : 0;\n    return html`<div class=\"progress-spinner\">\n      <svg\n        width=\"40\"\n        height=\"40\"\n        viewBox=\"0 0 40 40\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <circle\n          cx=\"20\"\n          cy=\"20\"\n          r=\"18\"\n          stroke=\"var(--container-backdrop-color)\"\n          stroke-width=\"4\"\n          fill=\"none\"\n        />\n        <path\n          d=\"M18 2 A18 18 0 ${largeArcFlag} 1 ${x} ${y}\"\n          stroke=\"var(--instrument-enhanced-secondary-color)\"\n          stroke-width=\"4\"\n          stroke-linecap=\"round\"\n        />\n      </svg>\n    </div>`;\n  }\n\n  override render() {\n    return html`\n      <button\n        class=${classMap({\n          wrapper: true,\n          ['variant-' + this.variant]: true,\n          activated: this.activated,\n          'corner-left': this.cornerLeft,\n          'corner-right': this.cornerRight,\n          'active-color': this.activeColor,\n          'has-label': this.hasLabel,\n          wide: this.wide,\n          progress: this.progress !== undefined,\n          'hide-divider': !this.showDivider,\n        })}\n        ?disabled=${this.disabled}\n        part=\"wrapper\"\n      >\n        ${this.progress !== undefined ? this.progressSpinner : nothing}\n        <div class=\"visible-wrapper\" part=\"visible-wrapper\">\n          <div class=\"icon\" part=\"icon\">\n            <slot></slot>\n          </div>\n        </div>\n        ${this.hasLabel\n          ? html`<div class=\"label\" part=\"label\">\n              <slot name=\"label\"></slot>\n            </div>`\n          : nothing}\n      </button>\n    `;\n  }\n\n  static override styles = unsafeCSS(iconStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-icon-button': ObcIconButton;\n  }\n}\n"],"names":["IconButtonVariant"],"mappings":"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"}