@oicl/openbridge-webcomponents 2.0.0-next.66 → 2.0.0-next.67

package/custom-elements.json

@@ -45584,7 +45584,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`<obc-dropdown-button>` – A dropdown select component for choosing a single option from a list.\n\nPresents a styled dropdown menu with a visible label and icon, allowing users to select one value from a set of options. The component displays the currently selected label and provides a native select element for accessibility and keyboard navigation.\n\n### Features\n- **Single selection:** Allows users to pick one option from a provided list.\n- **Customizable options:** Accepts an array of `{value, label, level?}` objects for flexible option content and optional indentation (via `level`).\n- **Visual label and icon:** Shows the selected label and a dropdown arrow icon (`<obi-drop-down-google>`).\n- **Full width mode:** Can expand to fill the width of its container using the `fullWidth` property.\n- **Accessible:** Uses a native `<select>` element under the hood for keyboard and screen reader support.\n- **Focus styling:** Highlights the visible wrapper when the select is focused.\n\n### Variants\n- **Default:** Renders at intrinsic width, sized to content.\n- **Full Width:** When `fullWidth` is true, stretches to fill the parent container.\n\n### Usage Guidelines\nUse `<obc-dropdown-button>` when you need a compact, accessible dropdown for single-choice selection. Ideal for forms, filters, and settings where users must pick one value from a list. Options can be grouped visually by providing a `level` property for indentation.\n\n**TODO(designer):** Confirm if there are recommended use cases or constraints for the `level` property (e.g., maximum nesting, visual grouping intent).\n\n### Properties\n- `options` (Array): List of selectable options, each with a `value` (string), `label` (string), and optional `level` (number) for indentation.\n- `value` (string): The currently selected option's value. If not set, defaults to the first option.\n- `fullWidth` (boolean): Expands the component to fill its container when true. Default is false.\n\n### Events\n- `dropdown-change` – Fired when the user selects a different option. The event detail includes `{ value, label }` of the selected option.\n- `change` – Fired when the user selects a different option. The event detail includes `{ value, label }` of the selected option.\n\n### Best Practices\n- Always provide a non-empty `options` array; if empty, the select will show no label or options.\n- Use unique `value` strings for each option to ensure correct selection and event detail.\n- For grouped or indented options, set the `level` property (e.g., `level: 2` for sub-options).\n- Avoid using for multi-select scenarios; use a dedicated multi-select component if multiple selections are needed.\n\n### Example:\n```html\n<obc-dropdown-button\n  .options=${[\n    { value: 'volvo', label: 'Volvo' },\n    { value: 'xc90', label: 'XC 90', level: 2 },\n    { value: 'mercedes', label: 'Mercedes' },\n    { value: 'audi', label: 'Audi' }\n  ]}\n  value=\"volvo\"\n></obc-dropdown-button>\n```",
+          "description": "`<obc-dropdown-button>` – A dropdown select component for choosing a single option from a list.\n\nPresents a styled dropdown menu with a visible label and icon, allowing users to select one value from a set of options. The component displays the currently selected label and provides a native select element for accessibility and keyboard navigation.\n\n### Features\n- **Single selection:** Allows users to pick one option from a provided list.\n- **Customizable options:** Accepts an array of `{value, label, level?}` objects for flexible option content and optional indentation (via `level`).\n- **Visual label and icon:** Shows the selected label and a dropdown arrow icon (`<obi-drop-down-google>`).\n- **Full width mode:** Can expand to fill the width of its container using the `fullWidth` property.\n- **Accessible:** Uses a native `<select>` element under the hood for keyboard and screen reader support.\n- **Focus styling:** Highlights the visible wrapper when the select is focused.\n\n### Variants\n- **Default:** Renders at intrinsic width, sized to content.\n- **Full Width:** When `fullWidth` is true, stretches to fill the parent container.\n\n### Usage Guidelines\nUse `<obc-dropdown-button>` when you need a compact, accessible dropdown for single-choice selection. Ideal for forms, filters, and settings where users must pick one value from a list. Options can be grouped visually by providing a `level` property for indentation.\n\n**TODO(designer):** Confirm if there are recommended use cases or constraints for the `level` property (e.g., maximum nesting, visual grouping intent).\n\n### Properties\n- `options` (Array): List of selectable options, each with a `value` (string), `label` (string), and optional `level` (number) for indentation.\n- `value` (string): The currently selected option's value. If not set, defaults to the first option.\n- `fullWidth` (boolean): Expands the component to fill its container when true. Default is false.\n- `allowEmptySelection` (boolean): When true, a `value` that does not match any option leaves the button with no option selected, showing `placeholder` instead of defaulting to the first option. Default is false.\n- `placeholder` (string): Text shown when nothing is selected and `allowEmptySelection` is true. Default is an empty string.\n\n### Events\n- `dropdown-change` – Fired when the user selects a different option. The event detail includes `{ value, label }` of the selected option.\n- `change` – Fired when the user selects a different option. The event detail includes `{ value, label }` of the selected option.\n\n### Best Practices\n- Always provide a non-empty `options` array; if empty, the select will show no label or options.\n- Use unique `value` strings for each option to ensure correct selection and event detail.\n- For grouped or indented options, set the `level` property (e.g., `level: 2` for sub-options).\n- Avoid using for multi-select scenarios; use a dedicated multi-select component if multiple selections are needed.\n\n### Example:\n```html\n<obc-dropdown-button\n  .options=${[\n    { value: 'volvo', label: 'Volvo' },\n    { value: 'xc90', label: 'XC 90', level: 2 },\n    { value: 'mercedes', label: 'Mercedes' },\n    { value: 'audi', label: 'Audi' }\n  ]}\n  value=\"volvo\"\n></obc-dropdown-button>\n```",
           "name": "ObcDropdownButton",
           "slots": [
             {
@@ -45635,6 +45635,26 @@
               "description": "If true, the select expands to fill the width of its container. Default is false.",
               "attribute": "fullWidth"
             },
+            {
+              "kind": "field",
+              "name": "allowEmptySelection",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If true, a `value` that does not match any option leaves the button with no option selected,\nshowing `placeholder` instead of defaulting to the first option. Default is false.",
+              "attribute": "allowEmptySelection"
+            },
+            {
+              "kind": "field",
+              "name": "placeholder",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Text shown when nothing is selected and `allowEmptySelection` is true. Default is an empty string.",
+              "attribute": "placeholder"
+            },
             {
               "kind": "field",
               "name": "type",
@@ -45767,6 +45787,24 @@
               "description": "If true, the select expands to fill the width of its container. Default is false.",
               "fieldName": "fullWidth"
             },
+            {
+              "name": "allowEmptySelection",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If true, a `value` that does not match any option leaves the button with no option selected,\nshowing `placeholder` instead of defaulting to the first option. Default is false.",
+              "fieldName": "allowEmptySelection"
+            },
+            {
+              "name": "placeholder",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Text shown when nothing is selected and `allowEmptySelection` is true. Default is an empty string.",
+              "fieldName": "placeholder"
+            },
             {
               "name": "type",
               "type": {
@@ -49121,27 +49159,17 @@
               "privacy": "private"
             },
             {
-              "kind": "method",
-              "name": "canAddCharacter",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
+              "kind": "field",
+              "name": "effectiveValidationPattern",
+              "type": {
+                "text": "string"
               },
-              "parameters": [
-                {
-                  "name": "char",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ],
-              "description": "Validates if a character can be added to the current value"
+              "privacy": "private",
+              "readonly": true
             },
             {
               "kind": "method",
-              "name": "isValidValue",
+              "name": "canAddCharacter",
               "privacy": "private",
               "return": {
                 "type": {
@@ -49150,13 +49178,13 @@
               },
               "parameters": [
                 {
-                  "name": "value",
+                  "name": "char",
                   "type": {
                     "text": "string"
                   }
                 }
               ],
-              "description": "Validates that all characters in a value are allowed"
+              "description": "Validates if a character can be added to the current value"
             },
             {
               "kind": "method",
@@ -52901,6 +52929,16 @@
               },
               "attribute": "maxFractionDigits"
             },
+            {
+              "kind": "field",
+              "name": "validationPattern",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Optional regex pattern. When set, any keystroke or paste whose resulting\nvalue does not match this pattern is blocked at the `beforeinput` stage.\nWhen unset, a permissive numeric filter (digits, sign, active separators,\nwhitespace) is applied instead.",
+              "attribute": "validationPattern"
+            },
             {
               "kind": "field",
               "name": "hasFocus",
@@ -52997,6 +53035,37 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "isProjectedValueAllowed",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "projected",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "onBeforeInput",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "InputEvent"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "onFocus",
@@ -53336,6 +53405,15 @@
                 "text": "number | undefined | undefined"
               },
               "fieldName": "maxFractionDigits"
+            },
+            {
+              "name": "validationPattern",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Optional regex pattern. When set, any keystroke or paste whose resulting\nvalue does not match this pattern is blocked at the `beforeinput` stage.\nWhen unset, a permissive numeric filter (digits, sign, active separators,\nwhitespace) is applied instead.",
+              "fieldName": "validationPattern"
             }
           ],
           "superclass": {
@@ -59324,14 +59402,8 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`<obc-stepper-box>` – A compact input control for incrementing or decrementing a value using step buttons.\n\nThis component displays a value with optional unit and helper text, flanked by two icon buttons for adjusting the value up/down, left/right, or plus/minus depending on the selected type. It is typically used for numeric or enumerated value selection where direct text input is not required or desired.\n\n### Features\n- **Stepper Types:**\n  - `plus-minus` (default): Shows plus and minus icons for increment/decrement.\n  - `up-down`: Uses up and down chevron icons for vertical adjustment.\n  - `left-right`: Uses left and right chevron icons for horizontal adjustment.\n- **Value Display:**\n  - Optional unit label via the `unit` slot.\n- **Helper Text:**\n  - When `helperText` is set, displays additional helper or status text below the control.\n- **Icon Buttons:**\n  - Both increment and decrement actions are triggered by icon buttons, with icons adapting to the selected type.\n- **Customizable Layout:**\n  - Supports flexible content via the `unit` slot.\n\n### Usage Guidelines\nUse `obc-stepper-box` for scenarios where users need to adjust a value in discrete steps, such as quantity pickers, setting numeric parameters, or cycling through options. It is ideal when you want to prevent invalid input and provide a clear, touch-friendly interface for value changes.\n\n### Slots\n| Slot Name      | Renders When...           | Purpose                                 |\n|--------------- |--------------------------|-----------------------------------------|\n| unit           | If provided               | Unit label (e.g., \"km\", \"%\").           |\n\n### Events\n- `down` – Fired when the decrement (left or down) button is clicked.\n- `up` – Fired when the increment (right or up) button is clicked.\n\n### Best Practices\n- Use the type that best matches the adjustment direction (e.g., `up-down` for vertical, `left-right` for horizontal, `plus-minus` for generic increment/decrement).\n- Place concise values and units to maintain compact layout.\n- Avoid using for free-form input; this is for step-based changes only.\n\n**Example:**\n```\n<obc-stepper-box type=\"up-down\" .value=${5} helperText=\"Set weight\">\n  <div slot=\"unit\">kg</div>\n</obc-stepper-box>\n```",
+          "description": "`<obc-stepper-box>` – A compact input control for incrementing or decrementing a value using step buttons.\n\nThis component displays a value with optional unit and helper text, flanked by two icon buttons for adjusting the value up/down, left/right, or plus/minus depending on the selected type. It is typically used for numeric or enumerated value selection where direct text input is not required or desired.\n\n### Features\n- **Stepper Types:**\n  - `plus-minus` (default): Shows plus and minus icons for increment/decrement.\n  - `up-down`: Uses up and down chevron icons for vertical adjustment.\n  - `left-right`: Uses left and right chevron icons for horizontal adjustment.\n- **Value Display:**\n  - Optional unit label via the `unit` property.\n- **Helper Text:**\n  - When `helperText` is set, displays additional helper or status text below the control.\n- **Icon Buttons:**\n  - Both increment and decrement actions are triggered by icon buttons, with icons adapting to the selected type.\n\n### Usage Guidelines\nUse `obc-stepper-box` for scenarios where users need to adjust a value in discrete steps, such as quantity pickers, setting numeric parameters, or cycling through options. It is ideal when you want to prevent invalid input and provide a clear, touch-friendly interface for value changes.\n\n### Events\n- `down` – Fired when the decrement (left or down) button is clicked.\n- `up` – Fired when the increment (right or up) button is clicked.\n\n### Best Practices\n- Use the type that best matches the adjustment direction (e.g., `up-down` for vertical, `left-right` for horizontal, `plus-minus` for generic increment/decrement).\n- Place concise values and units to maintain compact layout.\n- Avoid using for free-form input; this is for step-based changes only.\n\n**Example:**\n```\n<obc-stepper-box type=\"up-down\" value=\"5\" unit=\"kg\" helperText=\"Set weight\"></obc-stepper-box>\n```",
           "name": "ObcStepperBox",
-          "slots": [
-            {
-              "description": "Unit label (e.g., \"km\", \"%\")",
-              "name": "unit"
-            }
-          ],
           "members": [
             {
               "kind": "field",
@@ -59408,7 +59480,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "Unit text displayed inside the field. Overridden by the `unit` slot if assigned.",
+              "description": "Unit text displayed inside the field.",
               "attribute": "unit"
             },
             {
@@ -59646,7 +59718,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "Unit text displayed inside the field. Overridden by the `unit` slot if assigned.",
+              "description": "Unit text displayed inside the field.",
               "fieldName": "unit"
             },
             {
@@ -64056,7 +64128,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`<obc-toggle-button-group>` – A segmented control for selecting a single option from a set (also known as a button group or segmented button).\n\nProvides a horizontal group of connected toggle buttons where only one option can be selected at a time.\nEach option is represented by an `<obc-toggle-button-option>` child element. The group manages selection\nstate automatically, deselecting the previous option when a new one is chosen.\n\nAppears as a visually unified set of buttons with clear selection indicators. Commonly used for switching\nbetween views, modes, or categories in a compact, space-efficient way. Ideal for toolbar controls,\nfiltering options, or layout toggles (e.g., list vs. grid view).\n\n### Features\n\n- **Single selection mode:** Only one option can be active at a time; selecting a new option automatically\n  deselects the previous one. Similar to radio button behavior but with a button-like appearance.\n- **Visual variants:**\n  - `regular` (default): Standard appearance with full background and border styling.\n  - `flat`: Minimal style with reduced visual weight, no prominent background or border.\n  - `normal`: **TODO(designer)** – Clarify the visual difference and intended use case for the `normal` variant compared to `regular` and `flat`.\n- **Content type options:**\n  - `text` (default): Options display text labels only.\n  - `icon`: Options display only an icon (compact, suitable for limited space).\n  - `iconText`: Options display an icon and text side-by-side.\n  - `iconTextUnder`: Options display an icon above the text label (vertical layout within each button).\n- **Size control:**\n  - Standard size (default): Regular button dimensions.\n  - Large size (`large`): Increased touch target and visual prominence for accessibility or emphasis.\n- **Layout behavior:**\n  - By default, the group stretches to fill available container width, distributing space equally among options.\n  - When `hugText` is true, the group shrinks to fit its content width instead of expanding.\n- **External control mode:** When `externalControl` is true, the group emits selection events but does not\n  update its own `value` property, allowing parent components to manage state (useful for form libraries or\n  custom state management).\n- **Disabled state:** Setting `disabled` on the group disables all contained options at once. Individual\n  options can also be disabled independently while the group remains enabled.\n- **Divider management:** Automatically shows visual dividers between options and hides the divider after\n  the selected option for a seamless, unified appearance.\n- **Property propagation:** The group automatically synchronizes `type`, `variant`, `hugText`, and `large`\n  properties to all child `<obc-toggle-button-option>` elements for consistent styling.\n- **Automatic fallback selection:** If the current value is set to a disabled or non-existent option, the\n  group automatically selects the first enabled option to ensure a valid state.\n\n### Usage Guidelines\n\nUse `<obc-toggle-button-group>` when you need users to choose exactly one option from a small set of\nmutually exclusive choices (typically 2-5 options). It provides a more compact and visually integrated\nalternative to radio buttons.\n\n**Ideal use cases:**\n- View mode toggles (e.g., list vs. grid, map vs. chart)\n- Filter options (e.g., all/active/completed tasks)\n- Alignment or layout controls (e.g., left/center/right alignment)\n- Time range selectors (e.g., day/week/month)\n- Toolbar mode switches (e.g., edit/preview modes)\n\n**When not to use:**\n- For binary on/off choices, use a switch or checkbox instead.\n- For multiple selections from a set, use checkboxes or chips.\n- For many options (6+), consider a dropdown/select or radio button list for better scannability.\n- For navigation between pages or sections, use tabs or a navigation menu.\n\n**Best Practices:**\n- Each option must have a unique `value` property to prevent selection conflicts.\n- Provide clear, concise labels for each option. Keep text short (1-2 words ideal).\n- For icon-only buttons (`type=\"icon\"`), ensure icons are universally recognizable or provide tooltips.\n- Set an initial `value` to indicate the default selection, or the first enabled option will be selected automatically.\n- Avoid disabling the currently selected option; if an option becomes unavailable, selection will shift to the first enabled option.\n- Use `variant=\"flat\"` in dense UIs or when the toggle is secondary to other content.\n- Use `large` size for touch interfaces or when the control is a primary interaction element.\n\n**TODO(designer):** Confirm if vertical orientation is supported or planned for future releases. Also clarify recommended maximum number of options for optimal usability (currently assumes 2-5 options).\n\n### Slots\n\n| Slot Name | Renders When... | Purpose |\n|-----------|-----------------|---------|\n| (default) | Always | Place one or more `<obc-toggle-button-option>` elements here to define the selectable options in the group. |\n\n### Events\n\n- `value` – Fired when the selected value changes, either through user interaction or programmatic change.\n  Event detail: `{ value: string, previousValue: string }`. Listen to this event to react to selection changes.\n\n### Example\n\n```html\n<obc-toggle-button-group value=\"list\" type=\"iconText\">\n  <obc-toggle-button-option value=\"list\">\n    <obi-placeholder slot=\"icon\"></obi-placeholder>\n    List\n  </obc-toggle-button-option>\n  <obc-toggle-button-option value=\"grid\">\n    <obi-placeholder slot=\"icon\"></obi-placeholder>\n    Grid\n  </obc-toggle-button-option>\n  <obc-toggle-button-option value=\"table\">\n    <obi-placeholder slot=\"icon\"></obi-placeholder>\n    Table\n  </obc-toggle-button-option>\n</obc-toggle-button-group>\n```",
+          "description": "`<obc-toggle-button-group>` – A segmented control for selecting a single option from a set (also known as a button group or segmented button).\n\nProvides a horizontal group of connected toggle buttons where only one option can be selected at a time.\nEach option is represented by an `<obc-toggle-button-option>` child element. The group manages selection\nstate automatically, deselecting the previous option when a new one is chosen.\n\nAppears as a visually unified set of buttons with clear selection indicators. Commonly used for switching\nbetween views, modes, or categories in a compact, space-efficient way. Ideal for toolbar controls,\nfiltering options, or layout toggles (e.g., list vs. grid view).\n\n### Features\n\n- **Single selection mode:** Only one option can be active at a time; selecting a new option automatically\n  deselects the previous one. Similar to radio button behavior but with a button-like appearance.\n- **Visual variants:**\n  - `regular` (default): Standard appearance with full background and border styling.\n  - `flat`: Minimal style with reduced visual weight, no prominent background or border.\n  - `normal`: **TODO(designer)** – Clarify the visual difference and intended use case for the `normal` variant compared to `regular` and `flat`.\n- **Content type options:**\n  - `text` (default): Options display text labels only.\n  - `icon`: Options display only an icon (compact, suitable for limited space).\n  - `iconText`: Options display an icon and text side-by-side.\n  - `iconTextUnder`: Options display an icon above the text label (vertical layout within each button).\n- **Size control:**\n  - Standard size (default): Regular button dimensions.\n  - Large size (`large`): Increased touch target and visual prominence for accessibility or emphasis.\n- **Layout behavior:**\n  - By default, the group stretches to fill available container width, distributing space equally among options.\n  - When `hugText` is true, the group shrinks to fit its content width instead of expanding.\n- **External control mode:** When `externalControl` is true, the group emits selection events but does not\n  update its own `value` property, allowing parent components to manage state (useful for form libraries or\n  custom state management).\n- **Empty selection mode:** When `allowEmptySelection` is true, a `value` that does not match any enabled\n  option leaves the group with no option selected, instead of defaulting to the first enabled option. Use\n  this when a selection may legitimately be absent (e.g. unset, loading, or error states) so the UI does not\n  imply a choice the user has not made.\n- **Disabled state:** Setting `disabled` on the group disables all contained options at once. Individual\n  options can also be disabled independently while the group remains enabled.\n- **Divider management:** Automatically shows visual dividers between options and hides the divider after\n  the selected option for a seamless, unified appearance.\n- **Property propagation:** The group automatically synchronizes `type`, `variant`, `hugText`, and `large`\n  properties to all child `<obc-toggle-button-option>` elements for consistent styling.\n- **Automatic fallback selection:** If the current value is set to a disabled or non-existent option, the\n  group automatically selects the first enabled option to ensure a valid state.\n\n### Usage Guidelines\n\nUse `<obc-toggle-button-group>` when you need users to choose exactly one option from a small set of\nmutually exclusive choices (typically 2-5 options). It provides a more compact and visually integrated\nalternative to radio buttons.\n\n**Ideal use cases:**\n- View mode toggles (e.g., list vs. grid, map vs. chart)\n- Filter options (e.g., all/active/completed tasks)\n- Alignment or layout controls (e.g., left/center/right alignment)\n- Time range selectors (e.g., day/week/month)\n- Toolbar mode switches (e.g., edit/preview modes)\n\n**When not to use:**\n- For binary on/off choices, use a switch or checkbox instead.\n- For multiple selections from a set, use checkboxes or chips.\n- For many options (6+), consider a dropdown/select or radio button list for better scannability.\n- For navigation between pages or sections, use tabs or a navigation menu.\n\n**Best Practices:**\n- Each option must have a unique `value` property to prevent selection conflicts.\n- Provide clear, concise labels for each option. Keep text short (1-2 words ideal).\n- For icon-only buttons (`type=\"icon\"`), ensure icons are universally recognizable or provide tooltips.\n- Set an initial `value` to indicate the default selection, or the first enabled option will be selected automatically.\n- Avoid disabling the currently selected option; if an option becomes unavailable, selection will shift to the first enabled option.\n- Use `variant=\"flat\"` in dense UIs or when the toggle is secondary to other content.\n- Use `large` size for touch interfaces or when the control is a primary interaction element.\n\n**TODO(designer):** Confirm if vertical orientation is supported or planned for future releases. Also clarify recommended maximum number of options for optimal usability (currently assumes 2-5 options).\n\n### Slots\n\n| Slot Name | Renders When... | Purpose |\n|-----------|-----------------|---------|\n| (default) | Always | Place one or more `<obc-toggle-button-option>` elements here to define the selectable options in the group. |\n\n### Events\n\n- `value` – Fired when the selected value changes, either through user interaction or programmatic change.\n  Event detail: `{ value: string, previousValue: string }`. Listen to this event to react to selection changes.\n\n### Example\n\n```html\n<obc-toggle-button-group value=\"list\" type=\"iconText\">\n  <obc-toggle-button-option value=\"list\">\n    <obi-placeholder slot=\"icon\"></obi-placeholder>\n    List\n  </obc-toggle-button-option>\n  <obc-toggle-button-option value=\"grid\">\n    <obi-placeholder slot=\"icon\"></obi-placeholder>\n    Grid\n  </obc-toggle-button-option>\n  <obc-toggle-button-option value=\"table\">\n    <obi-placeholder slot=\"icon\"></obi-placeholder>\n    Table\n  </obc-toggle-button-option>\n</obc-toggle-button-group>\n```",
           "name": "ObcToggleButtonGroup",
           "slots": [
             {
@@ -64116,6 +64188,16 @@
               "description": "If true, the group is controlled by an external source.\n\nWhen true, the group will not update its selection when the `value` property changes.\n\nDefaults to false.",
               "attribute": "externalControl"
             },
+            {
+              "kind": "field",
+              "name": "allowEmptySelection",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If true, a `value` that does not match any enabled option leaves the group with no option selected\ninstead of defaulting to the first enabled option.\n\nThis also applies when the currently selected option becomes disabled: the group clears its selection\nrather than falling back to another option.\n\nDefaults to false (the first enabled option is selected when the value does not match).",
+              "attribute": "allowEmptySelection"
+            },
             {
               "kind": "field",
               "name": "disabled",
@@ -64318,6 +64400,15 @@
               "description": "If true, the group is controlled by an external source.\n\nWhen true, the group will not update its selection when the `value` property changes.\n\nDefaults to false.",
               "fieldName": "externalControl"
             },
+            {
+              "name": "allowEmptySelection",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If true, a `value` that does not match any enabled option leaves the group with no option selected\ninstead of defaulting to the first enabled option.\n\nThis also applies when the currently selected option becomes disabled: the group clears its selection\nrather than falling back to another option.\n\nDefaults to false (the first enabled option is selected when the value does not match).",
+              "fieldName": "allowEmptySelection"
+            },
             {
               "name": "disabled",
               "type": {
@@ -69754,6 +69845,15 @@
               },
               "default": "{alarm: 0, warning: 0, caution: 0}"
             },
+            {
+              "kind": "field",
+              "name": "showAlerts",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "showAlerts"
+            },
             {
               "kind": "method",
               "name": "renderAlertCount"
@@ -69791,6 +69891,14 @@
               },
               "default": "''",
               "fieldName": "alertTopic"
+            },
+            {
+              "name": "showAlerts",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "showAlerts"
             }
           ],
           "superclass": {

package/dist/automation/automation-button/automation-button.css.js

@@ -280,18 +280,18 @@ const compentStyle = css`
   }
 
 .state-closed .icon-holder {
-  border-color: var(--automation-pipe-tertiary-inverted-color);
-  background: var(--automation-pipe-primary-inverted-color);
+  border-color: var(--automation-button-off-border-color);
+  background: var(--automation-button-off-background-color);
 }
 
-.static :is(.state-closed .icon-holder) {
-    border-color: var(--automation-pipe-secondary-color);
-    background: var(--automation-pipe-primary-inverted-color);
-  }
-
 .state-open .icon-holder {
-  border-color: var(--automation-pipe-tertiary-color);
-  background: var(--automation-pipe-primary-color);
+  border-color: var(--on-border-color);
+  background: var(--on-background-color);
+}
+
+.static .icon-holder {
+  border-color: var(--automation-button-static-broder-color);
+  background: var(--automation-button-static-background-color);
 }
 
 .alert-frame {

package/dist/automation/valve-analoge-two-way-icon/valve-analog-two-way-icon.d.ts

@@ -1,4 +1,5 @@
 import { LitElement } from 'lit';
+import '../../icons/icon-twoway-analog-closed.js';
 export declare class ObcValveAnalogTwoWayIcon extends LitElement {
     value: number;
     closed: boolean;

package/dist/automation/valve-analoge-two-way-icon/valve-analog-two-way-icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"valve-analog-two-way-icon.d.ts","sourceRoot":"","sources":["../../../src/automation/valve-analoge-two-way-icon/valve-analog-two-way-icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAuB,MAAM,KAAK,CAAC;AAKrD,qBACa,wBAAyB,SAAQ,UAAU;IAC5B,KAAK,EAAE,MAAM,CAAK;IACjB,MAAM,EAAE,OAAO,CAAS;IACxB,QAAQ,EAAE,OAAO,CAAS;IAE5C,MAAM;IAwGf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,+BAA+B,EAAE,wBAAwB,CAAC;KAC3D;CACF"}
+{"version":3,"file":"valve-analog-two-way-icon.d.ts","sourceRoot":"","sources":["../../../src/automation/valve-analoge-two-way-icon/valve-analog-two-way-icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAuB,MAAM,KAAK,CAAC;AAIrD,OAAO,0CAA0C,CAAC;AAElD,qBACa,wBAAyB,SAAQ,UAAU;IAC5B,KAAK,EAAE,MAAM,CAAK;IACjB,MAAM,EAAE,OAAO,CAAS;IACxB,QAAQ,EAAE,OAAO,CAAS;IAE5C,MAAM;IAoFf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,+BAA+B,EAAE,wBAAwB,CAAC;KAC3D;CACF"}

package/dist/automation/valve-analoge-two-way-icon/valve-analog-two-way-icon.js

@@ -2,6 +2,7 @@ import { unsafeCSS, LitElement, html, svg } from "lit";
 import { property } from "lit/decorators.js";
 import compentStyle from "./valve-analog-two-way-icon.css.js";
 import { customElement } from "../../decorator.js";
+import "../../icons/icon-twoway-analog-closed.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -23,35 +24,15 @@ let ObcValveAnalogTwoWayIcon = class extends LitElement {
     const transform = this.vertical ? "transform: rotate(90deg);" : "";
     if (this.closed) {
       return html` <div class="wrapper" style="${transform}">
-        <svg
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M3 16.8892L10 12.8059V10.4546L3 6.37127V16.8892ZM11 9.88024V13.3802L2.75194 18.1916C2.41861 18.386 2 18.1456 2 17.7597V5.50075C2 5.11486 2.41861 4.87442 2.75193 5.06886L11 9.88024ZM21 16.8892V6.37127L14 10.4546V12.8059L21 16.8892ZM13 13.3802L21.2481 18.1916C21.5814 18.386 22 18.1456 22 17.7597V5.50075C22 5.11486 21.5814 4.87442 21.2481 5.06886L13 9.88024V13.3802ZM12 22.6301C11.4477 22.6301 11 22.1824 11 21.6301V15.6301C11 15.0778 11.4477 14.6301 12 14.6301C12.5523 14.6301 13 15.0778 13 15.6301V21.6301C13 22.1824 12.5523 22.6301 12 22.6301Z"
-            fill="var(--automation-device-secondary-color)"
-          />
-          <path
-            d="M10 12.8059L3 16.8892V6.37127L10 10.4546V12.8059Z"
-            fill="var(--automation-device-tertiary-color)"
-          />
-          <path
-            d="M21 6.37127V16.8892L14 12.8059V10.4546L21 6.37127Z"
-            fill="var(--automation-device-tertiary-color)"
-          />
-        </svg>
+        <obi-twoway-analog-closed useCssColor> </obi-twoway-analog-closed>
       </div>`;
     }
     const handleRotation = -(1 - this.value / 100) * 90;
+    const handleTranslation = (1 - this.value / 100) * 2;
     const handle = svg`
-      <g transform="rotate(${handleRotation} 12 18.5)">
-        <path fill-rule="evenodd" clip-rule="evenodd" d="M9.49942 20.1303H14.4994C15.3278 20.1303 15.9994 19.4587 15.9994 18.6303C15.9994 17.8019 15.3278 17.1303 14.4994 17.1303H9.49942C8.67099 17.1303 7.99942 17.8019 7.99942 18.6303C7.99942 19.4587 8.67099 20.1303 9.49942 20.1303ZM9.49942 19.1303L14.4994 19.1303C14.7756 19.1303 14.9994 18.9064 14.9994 18.6303C14.9994 18.3542 14.7756 18.1303 14.4994 18.1303L9.49942 18.1303C9.22328 18.1303 8.99942 18.3542 8.99942 18.6303C8.99942 18.9064 9.22328 19.1303 9.49942 19.1303Z" fill="var(--automation-device-tertiary-color)"/>
-        <path d="M14.4994 19.1303L9.49942 19.1303C9.22328 19.1303 8.99942 18.9064 8.99942 18.6303C8.99942 18.3542 9.22328 18.1303 9.49942 18.1303L14.4994 18.1303C14.7756 18.1303 14.9994 18.3542 14.9994 18.6303C14.9994 18.9064 14.7756 19.1303 14.4994 19.1303Z" fill="var(--automation-device-primary-color)"/>
+      <g transform="translate(0, ${handleTranslation}) rotate(${handleRotation} 12 3.5) ">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M9.5 5H14.5C15.3284 5 16 4.32843 16 3.5C16 2.67157 15.3284 2 14.5 2H9.5C8.67157 2 8 2.67157 8 3.5C8 4.32843 8.67157 5 9.5 5ZM9.5 4L14.5 4C14.7761 4 15 3.77614 15 3.5C15 3.22386 14.7761 3 14.5 3L9.5 3C9.22386 3 9 3.22386 9 3.5C9 3.77614 9.22386 4 9.5 4Z" fill="var(--automation-device-tertiary-color)"/>
+        <path d="M9.5 4L14.5 4C14.7761 4 15 3.77614 15 3.5C15 3.22386 14.7761 3 14.5 3L9.5 3C9.22386 3 9 3.22386 9 3.5C9 3.77614 9.22386 4 9.5 4Z" fill="var(--automation-device-primary-color)"/>
       </g>
     `;
     const xmin = 10.5;
@@ -67,11 +48,11 @@ let ObcValveAnalogTwoWayIcon = class extends LitElement {
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M2 5.50075V17.7597C2 18.1456 2.41861 18.386 2.75194 18.1916L10.5714 13.6302H13.4286L21.2481 18.1916C21.5814 18.386 22 18.1456 22 17.7597V5.50075C22 5.11486 21.5814 4.87442 21.2481 5.06886L13.4286 9.63024H10.5714L2.75193 5.06886C2.41861 4.87442 2 5.11486 2 5.50075Z"
+            d="M11 11L3.5547 6.03645C2.89015 5.59342 2 6.06981 2 6.8685V19.1315C2 19.9302 2.89015 20.4066 3.5547 19.9635L11 15H13L20.4453 19.9635C21.1099 20.4066 22 19.9302 22 19.1315V6.8685C22 6.06981 21.1099 5.59342 20.4453 6.03645L13 11H11ZM3 6.8685L3 19.1315L10.6972 14H13.3028L21 19.1315V6.8685L13.3028 12H10.6972L3 6.8685Z"
             fill="var(--automation-device-tertiary-color)"
           />
           <path
-            d="M3 6.3712V16.8891L10.3011 12.6302H13.6989L21 16.8891V6.3712L13.6989 10.6302H10.3011L3 6.3712Z"
+            d="M10.6972 12H13.3028L21 6.8685V19.1315L13.3028 14H10.6972L3 19.1315V6.8685L10.6972 12Z"
             fill="var(--automation-device-primary-color)"
           />
           ${handle}
@@ -111,7 +92,7 @@ let ObcValveAnalogTwoWayIcon = class extends LitElement {
           <defs>
             <clipPath id="clip0">
               <path
-                d="M3 6.3712V16.8891L10.3011 12.6302H13.6989L21 16.8891V6.3712L13.6989 10.6302H10.3011L3 6.3712Z"
+                d="M10.6972 12H13.3028L21 6.8685V19.1315L13.3028 14H10.6972L3 19.1315V6.8685L10.6972 12Z"
               />
             </clipPath>
           </defs>

package/dist/automation/valve-analoge-two-way-icon/valve-analog-two-way-icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"valve-analog-two-way-icon.js","sources":["../../../src/automation/valve-analoge-two-way-icon/valve-analog-two-way-icon.ts"],"sourcesContent":["import {LitElement, html, svg, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport compentStyle from './valve-analog-two-way-icon.css?inline';\nimport {customElement} from '../../decorator.js';\n\n@customElement('obc-valve-analog-two-way-icon')\nexport class ObcValveAnalogTwoWayIcon extends LitElement {\n  @property({type: Number}) value: number = 0;\n  @property({type: Boolean}) closed: boolean = false;\n  @property({type: Boolean}) vertical: boolean = false;\n\n  override render() {\n    const transform = this.vertical ? 'transform: rotate(90deg);' : '';\n    if (this.closed) {\n      return html` <div class=\"wrapper\" style=\"${transform}\">\n        <svg\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M3 16.8892L10 12.8059V10.4546L3 6.37127V16.8892ZM11 9.88024V13.3802L2.75194 18.1916C2.41861 18.386 2 18.1456 2 17.7597V5.50075C2 5.11486 2.41861 4.87442 2.75193 5.06886L11 9.88024ZM21 16.8892V6.37127L14 10.4546V12.8059L21 16.8892ZM13 13.3802L21.2481 18.1916C21.5814 18.386 22 18.1456 22 17.7597V5.50075C22 5.11486 21.5814 4.87442 21.2481 5.06886L13 9.88024V13.3802ZM12 22.6301C11.4477 22.6301 11 22.1824 11 21.6301V15.6301C11 15.0778 11.4477 14.6301 12 14.6301C12.5523 14.6301 13 15.0778 13 15.6301V21.6301C13 22.1824 12.5523 22.6301 12 22.6301Z\"\n            fill=\"var(--automation-device-secondary-color)\"\n          />\n          <path\n            d=\"M10 12.8059L3 16.8892V6.37127L10 10.4546V12.8059Z\"\n            fill=\"var(--automation-device-tertiary-color)\"\n          />\n          <path\n            d=\"M21 6.37127V16.8892L14 12.8059V10.4546L21 6.37127Z\"\n            fill=\"var(--automation-device-tertiary-color)\"\n          />\n        </svg>\n      </div>`;\n    }\n\n    const handleRotation = -(1 - this.value / 100) * 90;\n    const handle = svg`\n      <g transform=\"rotate(${handleRotation} 12 18.5)\">\n        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M9.49942 20.1303H14.4994C15.3278 20.1303 15.9994 19.4587 15.9994 18.6303C15.9994 17.8019 15.3278 17.1303 14.4994 17.1303H9.49942C8.67099 17.1303 7.99942 17.8019 7.99942 18.6303C7.99942 19.4587 8.67099 20.1303 9.49942 20.1303ZM9.49942 19.1303L14.4994 19.1303C14.7756 19.1303 14.9994 18.9064 14.9994 18.6303C14.9994 18.3542 14.7756 18.1303 14.4994 18.1303L9.49942 18.1303C9.22328 18.1303 8.99942 18.3542 8.99942 18.6303C8.99942 18.9064 9.22328 19.1303 9.49942 19.1303Z\" fill=\"var(--automation-device-tertiary-color)\"/>\n        <path d=\"M14.4994 19.1303L9.49942 19.1303C9.22328 19.1303 8.99942 18.9064 8.99942 18.6303C8.99942 18.3542 9.22328 18.1303 9.49942 18.1303L14.4994 18.1303C14.7756 18.1303 14.9994 18.3542 14.9994 18.6303C14.9994 18.9064 14.7756 19.1303 14.4994 19.1303Z\" fill=\"var(--automation-device-primary-color)\"/>\n      </g>\n    `;\n\n    const xmin = 10.5;\n    const xmax = 2.5;\n    const x = xmin + ((xmax - xmin) * this.value) / 100;\n\n    return html`\n      <div class=\"wrapper\" style=\"${transform}\">\n        <svg\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M2 5.50075V17.7597C2 18.1456 2.41861 18.386 2.75194 18.1916L10.5714 13.6302H13.4286L21.2481 18.1916C21.5814 18.386 22 18.1456 22 17.7597V5.50075C22 5.11486 21.5814 4.87442 21.2481 5.06886L13.4286 9.63024H10.5714L2.75193 5.06886C2.41861 4.87442 2 5.11486 2 5.50075Z\"\n            fill=\"var(--automation-device-tertiary-color)\"\n          />\n          <path\n            d=\"M3 6.3712V16.8891L10.3011 12.6302H13.6989L21 16.8891V6.3712L13.6989 10.6302H10.3011L3 6.3712Z\"\n            fill=\"var(--automation-device-primary-color)\"\n          />\n          ${handle}\n          <g clip-path=\"url(#clip0)\">\n            <rect\n              x=${xmax}\n              y=\"0\"\n              width=${x - xmax}\n              height=\"24\"\n              fill=\"var(--automation-device-secondary-color)\"\n            />\n            <line\n              x1=${x}\n              y1=\"0\"\n              x2=${x}\n              y2=\"24\"\n              stroke=\"var(--automation-device-tertiary-color)\"\n              stroke-width=\"1\"\n            />\n\n            <rect\n              x=${24 - x}\n              y=\"0\"\n              width=${x - xmax}\n              height=\"24\"\n              fill=\"var(--automation-device-secondary-color)\"\n            />\n            <line\n              x1=${24 - x}\n              y1=\"0\"\n              x2=${24 - x}\n              y2=\"24\"\n              stroke=\"var(--automation-device-tertiary-color)\"\n              stroke-width=\"1\"\n            />\n          </g>\n          <defs>\n            <clipPath id=\"clip0\">\n              <path\n                d=\"M3 6.3712V16.8891L10.3011 12.6302H13.6989L21 16.8891V6.3712L13.6989 10.6302H10.3011L3 6.3712Z\"\n              />\n            </clipPath>\n          </defs>\n        </svg>\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-valve-analog-two-way-icon': ObcValveAnalogTwoWayIcon;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAMO,IAAM,2BAAN,cAAuC,WAAW;AAAA,EAAlD,cAAA;AAAA,UAAA,GAAA,SAAA;AACqB,SAAA,QAAgB;AACf,SAAA,SAAkB;AAClB,SAAA,WAAoB;AAAA,EAAA;AAAA,EAEtC,SAAS;AAChB,UAAM,YAAY,KAAK,WAAW,8BAA8B;AAChE,QAAI,KAAK,QAAQ;AACf,aAAO,oCAAoC,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAwBtD;AAEA,UAAM,iBAAiB,EAAE,IAAI,KAAK,QAAQ,OAAO;AACjD,UAAM,SAAS;AAAA,6BACU,cAAc;AAAA;AAAA;AAAA;AAAA;AAMvC,UAAM,OAAO;AACb,UAAM,OAAO;AACb,UAAM,IAAI,QAAS,OAAO,QAAQ,KAAK,QAAS;AAEhD,WAAO;AAAA,oCACyB,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAgBjC,MAAM;AAAA;AAAA;AAAA,kBAGA,IAAI;AAAA;AAAA,sBAEA,IAAI,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,mBAKX,CAAC;AAAA;AAAA,mBAED,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAOF,KAAK,CAAC;AAAA;AAAA,sBAEF,IAAI,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,mBAKX,KAAK,CAAC;AAAA;AAAA,mBAEN,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAgBvB;AAGF;AA9Ga,yBA6GK,SAAS,UAAU,YAAY;AA5GrB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GADb,yBACe,WAAA,SAAA,CAAA;AACC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAFd,yBAEgB,WAAA,UAAA,CAAA;AACA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAHd,yBAGgB,WAAA,YAAA,CAAA;AAHhB,2BAAN,gBAAA;AAAA,EADN,cAAc,+BAA+B;AAAA,GACjC,wBAAA;"}
+{"version":3,"file":"valve-analog-two-way-icon.js","sources":["../../../src/automation/valve-analoge-two-way-icon/valve-analog-two-way-icon.ts"],"sourcesContent":["import {LitElement, html, svg, unsafeCSS} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport compentStyle from './valve-analog-two-way-icon.css?inline';\nimport {customElement} from '../../decorator.js';\nimport '../../icons/icon-twoway-analog-closed.js';\n\n@customElement('obc-valve-analog-two-way-icon')\nexport class ObcValveAnalogTwoWayIcon extends LitElement {\n  @property({type: Number}) value: number = 0;\n  @property({type: Boolean}) closed: boolean = false;\n  @property({type: Boolean}) vertical: boolean = false;\n\n  override render() {\n    const transform = this.vertical ? 'transform: rotate(90deg);' : '';\n    if (this.closed) {\n      return html` <div class=\"wrapper\" style=\"${transform}\">\n        <obi-twoway-analog-closed useCssColor> </obi-twoway-analog-closed>\n      </div>`;\n    }\n\n    const handleRotation = -(1 - this.value / 100) * 90;\n    const handleTranslation = (1 - this.value / 100) * 2;\n    const handle = svg`\n      <g transform=\"translate(0, ${handleTranslation}) rotate(${handleRotation} 12 3.5) \">\n        <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M9.5 5H14.5C15.3284 5 16 4.32843 16 3.5C16 2.67157 15.3284 2 14.5 2H9.5C8.67157 2 8 2.67157 8 3.5C8 4.32843 8.67157 5 9.5 5ZM9.5 4L14.5 4C14.7761 4 15 3.77614 15 3.5C15 3.22386 14.7761 3 14.5 3L9.5 3C9.22386 3 9 3.22386 9 3.5C9 3.77614 9.22386 4 9.5 4Z\" fill=\"var(--automation-device-tertiary-color)\"/>\n        <path d=\"M9.5 4L14.5 4C14.7761 4 15 3.77614 15 3.5C15 3.22386 14.7761 3 14.5 3L9.5 3C9.22386 3 9 3.22386 9 3.5C9 3.77614 9.22386 4 9.5 4Z\" fill=\"var(--automation-device-primary-color)\"/>\n      </g>\n    `;\n\n    const xmin = 10.5;\n    const xmax = 2.5;\n    const x = xmin + ((xmax - xmin) * this.value) / 100;\n\n    return html`\n      <div class=\"wrapper\" style=\"${transform}\">\n        <svg\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M11 11L3.5547 6.03645C2.89015 5.59342 2 6.06981 2 6.8685V19.1315C2 19.9302 2.89015 20.4066 3.5547 19.9635L11 15H13L20.4453 19.9635C21.1099 20.4066 22 19.9302 22 19.1315V6.8685C22 6.06981 21.1099 5.59342 20.4453 6.03645L13 11H11ZM3 6.8685L3 19.1315L10.6972 14H13.3028L21 19.1315V6.8685L13.3028 12H10.6972L3 6.8685Z\"\n            fill=\"var(--automation-device-tertiary-color)\"\n          />\n          <path\n            d=\"M10.6972 12H13.3028L21 6.8685V19.1315L13.3028 14H10.6972L3 19.1315V6.8685L10.6972 12Z\"\n            fill=\"var(--automation-device-primary-color)\"\n          />\n          ${handle}\n          <g clip-path=\"url(#clip0)\">\n            <rect\n              x=${xmax}\n              y=\"0\"\n              width=${x - xmax}\n              height=\"24\"\n              fill=\"var(--automation-device-secondary-color)\"\n            />\n            <line\n              x1=${x}\n              y1=\"0\"\n              x2=${x}\n              y2=\"24\"\n              stroke=\"var(--automation-device-tertiary-color)\"\n              stroke-width=\"1\"\n            />\n\n            <rect\n              x=${24 - x}\n              y=\"0\"\n              width=${x - xmax}\n              height=\"24\"\n              fill=\"var(--automation-device-secondary-color)\"\n            />\n            <line\n              x1=${24 - x}\n              y1=\"0\"\n              x2=${24 - x}\n              y2=\"24\"\n              stroke=\"var(--automation-device-tertiary-color)\"\n              stroke-width=\"1\"\n            />\n          </g>\n          <defs>\n            <clipPath id=\"clip0\">\n              <path\n                d=\"M10.6972 12H13.3028L21 6.8685V19.1315L13.3028 14H10.6972L3 19.1315V6.8685L10.6972 12Z\"\n              />\n            </clipPath>\n          </defs>\n        </svg>\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-valve-analog-two-way-icon': ObcValveAnalogTwoWayIcon;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAOO,IAAM,2BAAN,cAAuC,WAAW;AAAA,EAAlD,cAAA;AAAA,UAAA,GAAA,SAAA;AACqB,SAAA,QAAgB;AACf,SAAA,SAAkB;AAClB,SAAA,WAAoB;AAAA,EAAA;AAAA,EAEtC,SAAS;AAChB,UAAM,YAAY,KAAK,WAAW,8BAA8B;AAChE,QAAI,KAAK,QAAQ;AACf,aAAO,oCAAoC,SAAS;AAAA;AAAA;AAAA,IAGtD;AAEA,UAAM,iBAAiB,EAAE,IAAI,KAAK,QAAQ,OAAO;AACjD,UAAM,qBAAqB,IAAI,KAAK,QAAQ,OAAO;AACnD,UAAM,SAAS;AAAA,mCACgB,iBAAiB,YAAY,cAAc;AAAA;AAAA;AAAA;AAAA;AAM1E,UAAM,OAAO;AACb,UAAM,OAAO;AACb,UAAM,IAAI,QAAS,OAAO,QAAQ,KAAK,QAAS;AAEhD,WAAO;AAAA,oCACyB,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAgBjC,MAAM;AAAA;AAAA;AAAA,kBAGA,IAAI;AAAA;AAAA,sBAEA,IAAI,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,mBAKX,CAAC;AAAA;AAAA,mBAED,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAOF,KAAK,CAAC;AAAA;AAAA,sBAEF,IAAI,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA,mBAKX,KAAK,CAAC;AAAA;AAAA,mBAEN,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAgBvB;AAGF;AA1Fa,yBAyFK,SAAS,UAAU,YAAY;AAxFrB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GADb,yBACe,WAAA,SAAA,CAAA;AACC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAFd,yBAEgB,WAAA,UAAA,CAAA;AACA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAHd,yBAGgB,WAAA,YAAA,CAAA;AAHhB,2BAAN,gBAAA;AAAA,EADN,cAAc,+BAA+B;AAAA,GACjC,wBAAA;"}

package/dist/components/accordion-card/accordion-card.css.js

@@ -242,7 +242,7 @@ const compentStyle = css`
     "liga" off,
     "clig" off,
     "ss04" on;
-      flex: 1 0 0;
+      flex: 0 0 auto;
       width: 100%;
       overflow: hidden;
       color: var(--element-neutral-color);

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

@@ -41,6 +41,8 @@ export type DropdownButtonOption = {
  * - `options` (Array): List of selectable options, each with a `value` (string), `label` (string), and optional `level` (number) for indentation.
  * - `value` (string): The currently selected option's value. If not set, defaults to the first option.
  * - `fullWidth` (boolean): Expands the component to fill its container when true. Default is false.
+ * - `allowEmptySelection` (boolean): When true, a `value` that does not match any option leaves the button with no option selected, showing `placeholder` instead of defaulting to the first option. Default is false.
+ * - `placeholder` (string): Text shown when nothing is selected and `allowEmptySelection` is true. Default is an empty string.
  *
  * ### Events
  * - `dropdown-change` – Fired when the user selects a different option. The event detail includes `{ value, label }` of the selected option.
@@ -90,6 +92,15 @@ export declare class ObcDropdownButton extends LitElement {
      * If true, the select expands to fill the width of its container. Default is false.
      */
     fullWidth: boolean;
+    /**
+     * If true, a `value` that does not match any option leaves the button with no option selected,
+     * showing `placeholder` instead of defaulting to the first option. Default is false.
+     */
+    allowEmptySelection: boolean;
+    /**
+     * Text shown when nothing is selected and `allowEmptySelection` is true. Default is an empty string.
+     */
+    placeholder: string;
     /**
      * Controls the button's display type.
      * - `label`: Text label only (default)

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown-button.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown-button/dropdown-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA4B,cAAc,EAAC,MAAM,KAAK,CAAC;AAGzE,OAAO,sCAAsC,CAAC;AAC9C,OAAO,qBAAqB,CAAC;AAI7B,oBAAY,kBAAkB;IAC5B,KAAK,UAAU;IACf,IAAI,SAAS;IACb,SAAS,eAAe;CACzB;AAED,MAAM,MAAM,4BAA4B,GAAG,WAAW,CAAC;IACrD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC,CAAC;AAEH,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsDG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAC/C;;;;;;;;OAQG;IACsB,OAAO,EAAE,oBAAoB,EAAE,CAAM;IAE9D;;OAEG;IACuB,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IACzB,QAAQ,EAAE,OAAO,CAAS;IAErD;;OAEG;IACwB,SAAS,UAAS;IAE7C;;;;;OAKG;IACuB,IAAI,EAAE,kBAAkB,CAA4B;IAE9E;;OAEG;IACwB,OAAO,UAAS;IAE3C;;OAEG;IACwB,WAAW,UAAS;IAEpB,IAAI,UAAS;IAE/B,OAAO,CAAC,aAAa,CAAM;IAC3B,OAAO,CAAC,aAAa,CAAM;IAE3B,iBAAiB,IAAI,IAAI;IAKzB,UAAU,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAM5D,OAAO,CAAC,oBAAoB;IAYnB,MAAM;IA2Cf;;;;;OAKG;IACH,OAAO,CAAC,aAAa;IAkBrB,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF"}
+{"version":3,"file":"dropdown-button.d.ts","sourceRoot":"","sources":["../../../src/components/dropdown-button/dropdown-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAA4B,cAAc,EAAC,MAAM,KAAK,CAAC;AAGzE,OAAO,sCAAsC,CAAC;AAC9C,OAAO,qBAAqB,CAAC;AAI7B,oBAAY,kBAAkB;IAC5B,KAAK,UAAU;IACf,IAAI,SAAS;IACb,SAAS,eAAe;CACzB;AAED,MAAM,MAAM,4BAA4B,GAAG,WAAW,CAAC;IACrD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC,CAAC;AAEH,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwDG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAC/C;;;;;;;;OAQG;IACsB,OAAO,EAAE,oBAAoB,EAAE,CAAM;IAE9D;;OAEG;IACuB,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IACzB,QAAQ,EAAE,OAAO,CAAS;IAErD;;OAEG;IACwB,SAAS,UAAS;IAE7C;;;OAGG;IACwB,mBAAmB,UAAS;IAEvD;;OAEG;IACuB,WAAW,SAAM;IAE3C;;;;;OAKG;IACuB,IAAI,EAAE,kBAAkB,CAA4B;IAE9E;;OAEG;IACwB,OAAO,UAAS;IAE3C;;OAEG;IACwB,WAAW,UAAS;IAEpB,IAAI,UAAS;IAE/B,OAAO,CAAC,aAAa,CAAM;IAC3B,OAAO,CAAC,aAAa,CAAM;IAE3B,iBAAiB,IAAI,IAAI;IAKzB,UAAU,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAM5D,OAAO,CAAC,oBAAoB;IAuBnB,MAAM;IAgDf;;;;;OAKG;IACH,OAAO,CAAC,aAAa;IAkBrB,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF"}

package/dist/components/dropdown-button/dropdown-button.js

@@ -27,6 +27,8 @@ let ObcDropdownButton = class extends LitElement {
     this.options = [];
     this.disabled = false;
     this.fullWidth = false;
+    this.allowEmptySelection = false;
+    this.placeholder = "";
     this.type = "label";
     this.openTop = false;
     this.integration = false;
@@ -49,8 +51,19 @@ let ObcDropdownButton = class extends LitElement {
       this.selectedLabel = "";
       return;
     }
-    this.selectedValue = this.value || this.options[0].value;
-    this.selectedLabel = this.value ? this.options.find((item) => item.value === this.value)?.label || "" : this.options[0].label;
+    const match = this.value ? this.options.find((item) => item.value === this.value) : void 0;
+    if (match) {
+      this.selectedValue = match.value;
+      this.selectedLabel = match.label;
+      return;
+    }
+    if (this.allowEmptySelection) {
+      this.selectedValue = "";
+      this.selectedLabel = this.placeholder;
+      return;
+    }
+    this.selectedValue = this.options[0].value;
+    this.selectedLabel = this.options[0].label;
   }
   render() {
     return html`
@@ -72,6 +85,9 @@ let ObcDropdownButton = class extends LitElement {
           </div>
         </div>
         <select @change=${this.changeHandler} ?disabled=${this.disabled}>
+          ${this.allowEmptySelection && this.selectedValue === "" ? html`<option value="" disabled selected hidden>
+                ${this.placeholder}
+              </option>` : nothing}
           ${this.options.map((item) => {
       const indent = item.level ? (item.level - 1) * 2 : 0;
       const indentText = [];
@@ -124,6 +140,12 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean })
 ], ObcDropdownButton.prototype, "fullWidth", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcDropdownButton.prototype, "allowEmptySelection", 2);
+__decorateClass([
+  property({ type: String })
+], ObcDropdownButton.prototype, "placeholder", 2);
 __decorateClass([
   property({ type: String })
 ], ObcDropdownButton.prototype, "type", 2);