@porsche-design-system/components-react 4.6.0-rc.1 → 4.6.0-rc.2

package/skills/pds-knowledge-react/references/components/p-link-pure/p-link-pure.md

@@ -89,7 +89,7 @@ See [accessibility integration examples](./accessibility.md) for paired anti-pat
 | `download` | `string` | `undefined` | Sets the native `download` attribute to trigger a file download. Only applies when `href` is set. |
 | `hideLabel` | `boolean`<br>`BreakpointCustomizable<boolean>` | `false` | Hides the visible label while keeping it accessible to screen readers. Supports responsive breakpoint values. |
 | `href` | `string` | `undefined` | When set, the component renders as an anchor navigating to this URL. Otherwise, provide a slotted anchor element. |
-| `icon` | `''`<br>one of 290 icon names — see [icon names](references/icons.md) | `'arrow-right'` | Sets the icon displayed next to the label. |
+| `icon` | `''`<br>one of 293 icon names — see [icon names](references/icons.md) | `'arrow-right'` | Sets the icon displayed next to the label. |
 | `iconSource` | `string` | `undefined` | Sets a path to a custom SVG icon, used instead of the built-in icon set. |
 | `rel` | `string` | `undefined` | Sets the `rel` attribute on the link (e.g. `noopener`). Only applies when `href` is set. |
 | `size` | `'2xs'` `'xs'` `'sm'` `'md'` `'lg'` `'xl'` `'2xl'` `'3xl'` `'4xl'` `'5xl'` `'inherit'`<br>_deprecated:_ `'xx-small'` `'x-small'` `'small'` `'medium'` `'large'` `'x-large'`<br>`BreakpointCustomizable<LinkPureSize>` | `'sm'` | Sets the font size of the link label. Supports responsive breakpoint values. |

package/skills/pds-knowledge-react/references/components/p-multi-select/examples/AsyncFilter.tsx

@@ -9,7 +9,7 @@ import {
   PMultiSelectOption,
   type PMultiSelectProps,
 } from '@porsche-design-system/components-react';
-import { useCallback, useRef, useState } from 'react';
+import { useCallback, useMemo, useRef, useState } from 'react';
 
 const useDebounce = <T,>(callback: (value: T) => void, delay = 400) => {
   const timer = useRef<number | undefined>(undefined);
@@ -19,6 +19,20 @@ const useDebounce = <T,>(callback: (value: T) => void, delay = 400) => {
   };
 };
 
+const getFilterStatusMessage = (
+  searchValue: string,
+  optionCount: number,
+  isLoading: boolean,
+  error: string | null
+): string => {
+  if (error) return '';
+  if (isLoading) return 'Loading options';
+  const term = searchValue.trim();
+  if (!term) return '';
+  if (optionCount === 0) return 'No results found';
+  return optionCount === 1 ? '1 result available' : `${optionCount} results available`;
+};
+
 export const Example = () => {
   const [value, setValue] = useState<PMultiSelectProps['value']>([]);
   const [options, setOptions] = useState<{ value: string; label: string }[]>([]);
@@ -83,6 +97,11 @@ export const Example = () => {
     }
   };
 
+  const filterStatusMessage = useMemo(
+    () => getFilterStatusMessage(searchValue, options.length, initialLoading || loading, error),
+    [searchValue, options.length, initialLoading, loading, error]
+  );
+
   return (
     <PMultiSelect name="async-search-select" label="Async Search" value={value} onChange={onChange} onToggle={onToggle}>
       <PInputSearch
@@ -100,6 +119,11 @@ export const Example = () => {
         onChange={(e: any) => e.stopPropagation()}
       />
 
+      {/* Persistent status announcer for assistive technologies (keep always in the DOM) */}
+      <div slot="options-status" className="sr-only" aria-live="polite" aria-atomic="true">
+        {filterStatusMessage}
+      </div>
+
       {/* Initial skeleton loading */}
       {initialLoading &&
         !error &&
@@ -112,15 +136,14 @@ export const Example = () => {
         </PMultiSelectOption>
       ))}
 
-      {/* No filter results */}
-      {!initialLoading && options.length === 0 && !error && (
+      {/* No filter results (visual only; announcements come from the live region) */}
+      {!initialLoading && !loading && options.length === 0 && !error && (
         <div
           slot="options-status"
           className="text-contrast-medium cursor-not-allowed py-static-sm px-[12px]"
-          role="alert"
+          aria-hidden="true"
         >
-          <span aria-hidden="true">–</span>
-          <span className="sr-only">No results found</span>
+          –
         </div>
       )}
 

package/skills/pds-knowledge-react/references/components/p-multi-select/p-multi-select.md

@@ -4,7 +4,7 @@ The `p-multi-select` component is a versatile custom form element that facilitat
 
 Many of the properties closely resemble those found in the [select](../p-select/p-select.md) and other form components (e.g. `label`, `description`, `state`, `message`, `hideLabel`, `disabled`, `required` & `dropdownDirection`). The `p-multi-select` offers a search field by default. When the user types in a search string, the options are reduced by matching the options text.
 
-Options are slotted using the `p-multi-select-option` component. Each option needs to have an assigned value, which can be passed via an attribute or property and needs to be of type string. Initial selection states can only be achieved using the value property on the `p-multi-select` component ([More Info](./p-multi-select.md)). Options don't have a selected attribute or property. If an option should be visible but not selectable, it can be disabled by using the `disabled` attribute.
+Options are slotted using the `p-multi-select-option` component. Each option needs to have an assigned value, which can be passed via an attribute or property and needs to be a string or number. `null` and `undefined` are not valid option values. Initial selection states can only be achieved using the value property on the `p-multi-select` component ([More Info](./p-multi-select.md)). Options don't have a selected attribute or property. If an option should be visible but not selectable, it can be disabled by using the `disabled` attribute.
 
 **Hint:** The `p-multi-select` utilizes the [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) to render its dropdown on the `#top-layer` which enables it to be shown correctly even when used e.g. within a scroll container.
 
@@ -146,7 +146,7 @@ Allowed parents: `p-multi-select`, `p-optgroup`.
 | Property | Type | Default | Description |
 | --- | --- | --- | --- |
 | `disabled` | `boolean` | `false` | Disables the option, preventing it from being selected. |
-| `value` _(required)_ | `string | number` | `undefined` | Sets the value submitted with the form data when this option is selected in the parent multi-select. |
+| `value` _(required)_ | `string | number` | `undefined` | Sets the required option value submitted with the form data when selected. Must be a string or number. |
 
 #### Slots
 

package/skills/pds-knowledge-react/references/components/p-pin-code/p-pin-code.md

@@ -81,14 +81,14 @@ See [accessibility integration examples](./accessibility.md) for paired anti-pat
 | `required` | `boolean` | `false` | Marks the pin code as required so the form cannot be submitted until all fields are filled. |
 | `state` | `'none'` `'error'` `'success'` | `'none'` | Sets the validation state of the pin code, which controls its visual appearance and feedback message style (`none`, `success`, `error`). |
 | `type` | `'number'` `'password'` | `'number'` | Controls whether the individual input fields mask their content as password dots (`password`) or show digits (`number`). |
-| `value` | `string` | `''` | Sets the current concatenated value of all pin code fields and allows setting the initial value. |
+| `value` | `string | number | null` | `''` | Sets the current concatenated value. Numbers are accepted for programmatic assignment, but user input updates the value as a string. |
 
 ### Events
 
 | Event | Type | Description |
 | --- | --- | --- |
 | `blur` | `CustomEvent<void>` | Emitted when the pin code component loses focus after the user finishes entering characters. |
-| `change` | `CustomEvent<PinCodeChangeEventDetail>`<br>`{ value: string; isComplete: boolean }` | Emitted when the pin code value changes as the user types, carrying the new concatenated value in the event detail. |
+| `change` | `CustomEvent<PinCodeChangeEventDetail>`<br>`{ value: string; isComplete: boolean }` | Emitted when the pin code value changes as the user types, carrying `{ value: string; isComplete: boolean }` in the event detail. |
 
 ### Controlled properties
 

package/skills/pds-knowledge-react/references/components/p-radio-group/examples/Form.tsx

@@ -10,7 +10,7 @@ import {
 import { FormEvent, useState } from 'react';
 
 export const Example = () => {
-  const [form, setForm] = useState({ myRadioGroup: '' });
+  const [form, setForm] = useState<{ myRadioGroup: PRadioGroupProps['value'] }>({ myRadioGroup: null });
   const [lastSubmittedData, setLastSubmittedData] = useState<any>();
 
   const onChange = (e: CustomEvent<RadioGroupChangeEventDetail>) => {
@@ -28,7 +28,7 @@ export const Example = () => {
 
   const onReset = (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    setForm({ myRadioGroup: '' });
+    setForm({ myRadioGroup: null });
   };
 
   return (

package/skills/pds-knowledge-react/references/components/p-radio-group/p-radio-group.md

@@ -6,7 +6,7 @@ The `p-radio-group` component is a versatile custom form element that enables th
 >
 > The `blur` event is emitted whenever the focused `p-radio-group-option` changes — not only when the entire `p-radio-group` loses focus. This means that switching between options within the same group will also trigger a `blur` event for the previously focused option.
 
-Options are slotted using the `p-radio-group-option` component. Each option needs to have an assigned value, which can be passed via an attribute or property and needs to be of type string. Initial selection states can only be achieved using the value property on the `p-radio-group` component. If an option should be visible but not selectable, it can be disabled by using the `disabled` attribute.
+Options are slotted using the `p-radio-group-option` component. Each option needs an assigned `string` or `number` value. The `p-radio-group` value matches an option strictly by type and value, so a number does not match the equivalent string. `undefined` and `null` are reserved for the radio group's unselected state and are not valid option values. Initial selection states can only be achieved using the `value` property on the `p-radio-group` component. If an option should be visible but not selectable, it can be disabled using the `disabled` attribute.
 
 A `label` is a caption which informs the user what information a particular form field is asking for. The `p-radio-group` component can be used with or without a label, but it's recommended to keep the label visible for better accessibility whenever possible. When used without a label, it's best practice to provide a descriptive label text for screen readers.
 
@@ -109,7 +109,7 @@ See [accessibility integration examples](./accessibility.md) for paired anti-pat
 | `name` _(required)_ | `string` | `undefined` | Sets the shared name attribute for all radio buttons in the group, grouping them for mutually exclusive selection. |
 | `required` | `boolean` | `false` | Marks the radio group as required so the form cannot be submitted until one option is selected. |
 | `state` | `'none'` `'error'` `'success'` | `'none'` | Sets the validation state of the radio group, controlling its visual appearance and feedback message style (`none`, `success`, `error`). |
-| `value` | `string` | `''` | Sets the currently selected value that pre-selects the matching radio option and reflects user changes. |
+| `value` | `string | number | null` | `undefined` | Sets the currently selected value that pre-selects the matching radio option and reflects user changes. Matches an option strictly by type and value, meaning string or number only match an option whose value has the same type and equal value. Use undefined or null for no preselection; these values never match an option because every option requires a string or number value. Please note that FormData always serializes values as strings, so when participating in a native (uncontrolled) form a number value is restored as string via formStateRestoreCallback and will no longer strictly match a number-typed option. This limitation only applies to native form state restoration; in controlled forms (where the consumer manages value directly via the change event), the number type is preserved end-to-end. |
 
 ### Events
 
@@ -143,7 +143,7 @@ Allowed parent: `p-radio-group`.
 | `disabled` | `boolean` | `false` | Prevents this option from being selected and excludes its value from form submissions while it is disabled. |
 | `label` | `string` | `undefined` | Sets the visible label text displayed next to the radio button that the user reads to identify the option. |
 | `loading` _(experimental)_ | `boolean` | `false` | @experimental Disables this option and shows a spinner to indicate that this particular option is in a loading state. |
-| `value` | `string` | `undefined` | Sets the value submitted with the form data when this radio option is selected within its parent group. |
+| `value` _(required)_ | `string | number` | `undefined` | Sets the required option value. Must be a string or number and is selected when it strictly matches the parent `p-radio-group` value by type and value. |
 
 #### Slots
 

package/skills/pds-knowledge-react/references/components/p-segmented-control/p-segmented-control.md

@@ -108,7 +108,7 @@ See [accessibility integration examples](./accessibility.md) for paired anti-pat
 | `noWrap` | `boolean` | `false` | Prevents items from wrapping to new rows and renders them in a single horizontally scrollable row instead. |
 | `required` | `boolean` | `false` | Marks the segmented control as required so the form cannot be submitted until one option is selected. |
 | `state` | `'none'` `'error'` `'success'` | `'none'` | Sets the validation state of the segmented control, controlling its visual appearance and feedback message style (`none`, `success`, `error`). |
-| `value` | `string | number` | `undefined` | Sets the currently selected item's value and pre-selects the matching option when the component renders. |
+| `value` | `string | number | null` | `undefined` | Sets the currently selected item's value and pre-selects the matching option when the component renders. Matches an item strictly by type and value, meaning string or number only match an item whose value has the same type and equal value. Use undefined or null for no preselection. Please note that FormData always serializes values as strings, so when participating in a native (uncontrolled) form a number value is restored as string via formStateRestoreCallback and will no longer strictly match a number-typed item. This limitation only applies to native form state restoration; in controlled forms (where the consumer manages value directly via the change event), the number type is preserved end-to-end. |
 
 ### Events
 
@@ -145,7 +145,7 @@ Allowed parent: `p-segmented-control`.
 | --- | --- | --- | --- |
 | `aria` | `SegmentedControlItemAriaAttribute` | `undefined` | Sets ARIA attributes on the item's button element to improve accessibility for screen readers. |
 | `disabled` | `boolean` | `false` | Prevents this item from being selected and visually dims it; the parent's value will not change to this item's value. |
-| `icon` | `''`<br>one of 290 icon names — see [icon names](references/icons.md) | `undefined` | Sets an icon rendered inside the item button using an icon name from the PDS icon library. |
+| `icon` | `''`<br>one of 293 icon names — see [icon names](references/icons.md) | `undefined` | Sets an icon rendered inside the item button using an icon name from the PDS icon library. |
 | `iconSource` | `string` | `undefined` | Sets a URL to a custom SVG icon for the item button, overriding the built-in icon set. |
 | `label` | `string` | `undefined` | Sets a visible text label rendered inside the item button, used when no slotted content is provided. |
 | `value` _(required)_ | `string | number` | `undefined` | Sets the value emitted by the parent `p-segmented-control` when this item is selected. This property is*required**. |

package/skills/pds-knowledge-react/references/components/p-select/examples/AsyncFilter.tsx

@@ -9,7 +9,7 @@ import {
   type SelectChangeEventDetail,
   type SelectToggleEventDetail,
 } from '@porsche-design-system/components-react';
-import { useCallback, useRef, useState } from 'react';
+import { useCallback, useMemo, useRef, useState } from 'react';
 
 const useDebounce = <T,>(callback: (value: T) => void, delay = 400) => {
   const timer = useRef<number | undefined>(undefined);
@@ -19,6 +19,20 @@ const useDebounce = <T,>(callback: (value: T) => void, delay = 400) => {
   };
 };
 
+const getFilterStatusMessage = (
+  searchValue: string,
+  optionCount: number,
+  isLoading: boolean,
+  error: string | null
+): string => {
+  if (error) return '';
+  if (isLoading) return 'Loading options';
+  const term = searchValue.trim();
+  if (!term) return '';
+  if (optionCount === 0) return 'No results found';
+  return optionCount === 1 ? '1 result available' : `${optionCount} results available`;
+};
+
 export const Example = () => {
   const [value, setValue] = useState<PSelectProps['value']>(undefined);
   const [options, setOptions] = useState<{ value: string; label: string }[]>([]);
@@ -83,6 +97,11 @@ export const Example = () => {
     }
   };
 
+  const filterStatusMessage = useMemo(
+    () => getFilterStatusMessage(searchValue, options.length, initialLoading || loading, error),
+    [searchValue, options.length, initialLoading, loading, error]
+  );
+
   return (
     <PSelect name="async-search-select" label="Async Search" value={value} onChange={onChange} onToggle={onToggle}>
       <PInputSearch
@@ -100,6 +119,11 @@ export const Example = () => {
         onChange={(e: any) => e.stopPropagation()}
       />
 
+      {/* Persistent status announcer for assistive technologies (keep always in the DOM) */}
+      <div slot="options-status" className="sr-only" aria-live="polite" aria-atomic="true">
+        {filterStatusMessage}
+      </div>
+
       {/* Initial skeleton loading */}
       {initialLoading &&
         !error &&
@@ -112,15 +136,14 @@ export const Example = () => {
         </PSelectOption>
       ))}
 
-      {/* No filter results */}
-      {!initialLoading && options.length === 0 && !error && (
+      {/* No filter results (visual only; announcements come from the live region) */}
+      {!initialLoading && !loading && options.length === 0 && !error && (
         <div
           slot="options-status"
           className="text-contrast-medium cursor-not-allowed py-static-sm px-[12px]"
-          role="alert"
+          aria-hidden="true"
         >
-          <span aria-hidden="true">–</span>
-          <span className="sr-only">No results found</span>
+          –
         </div>
       )}
 

package/skills/pds-knowledge-react/references/components/p-select/p-select.md

@@ -141,7 +141,7 @@ Allowed parents: `p-multi-select`, `p-optgroup`.
 | Property | Type | Default | Description |
 | --- | --- | --- | --- |
 | `disabled` | `boolean` | `false` | Disables the option, preventing it from being selected. |
-| `value` _(required)_ | `string | number` | `undefined` | Sets the value submitted with the form data when this option is selected in the parent multi-select. |
+| `value` _(required)_ | `string | number` | `undefined` | Sets the required option value submitted with the form data when selected. Must be a string or number. |
 
 #### Slots
 

package/skills/pds-knowledge-react/references/components/p-tag/p-tag.md

@@ -50,7 +50,7 @@ See [accessibility integration examples](./accessibility.md) for paired anti-pat
 | Property | Type | Default | Description |
 | --- | --- | --- | --- |
 | `compact` | `boolean` | `false` | Reduces the tag's padding and height for use in dense layouts where vertical space is limited. |
-| `icon` | `'none'`<br>one of 290 icon names — see [icon names](references/icons.md) | `'none'` | Sets the icon displayed inside the tag alongside the label. Use `none` to render the tag without an icon. |
+| `icon` | `'none'`<br>one of 293 icon names — see [icon names](references/icons.md) | `'none'` | Sets the icon displayed inside the tag alongside the label. Use `none` to render the tag without an icon. |
 | `iconSource` | `string` | `undefined` | Sets a URL to a custom SVG icon, overriding the built-in icon set when a brand-specific icon is needed. |
 | `variant` | `'primary'` `'secondary'` `'info'` `'info-frosted'` `'warning'` `'warning-frosted'` `'success'` `'success-frosted'` `'error'` `'error-frosted'` | `'secondary'` | Sets the visual style of the tag, which controls its background and text colors (e.g. `primary`, `secondary`, `notification-info`). |
 

package/skills/pds-knowledge-react/references/components/p-wordmark/p-wordmark.md

@@ -58,7 +58,7 @@ See [accessibility integration examples](./accessibility.md) for paired anti-pat
 | --- | --- | --- | --- |
 | `aria` | `WordmarkAriaAttribute` | `undefined` | Sets ARIA attributes on the anchor element to improve accessibility when the wordmark is used as a link. |
 | `href` | `string` | `undefined` | When set, wraps the wordmark in an anchor element that navigates to the given URL on click. |
-| `size` | `'small'` `'inherit'` | `'small'` | Sets the display size of the Porsche wordmark SVG using predefined PDS size tokens (`small`, `medium`, `large`, `inherit`). |
+| `size` | `'small'` `'inherit'` | `'small'` | Sets the display size of the Porsche wordmark SVG using predefined PDS size tokens. |
 | `target` | `'_self'` `'_blank'` `'_parent'` `'_top'` `'string'` | `'_self'` | Specifies where to open the linked URL when `href` is set (e.g. `_self`, `_blank`). |
 
 ## Examples

package/skills/pds-knowledge-react/references/icons.md

@@ -2,4 +2,4 @@
 
 Valid values for the icon-typed props across PDS components (e.g. `p-icon` `name`, `p-button` `icon`, `p-link` `icon`, `p-inline-notification` `actionIcon`). Pass one as a string, e.g. `icon="arrow-right"`. Each component reference links here instead of repeating the full list. (`p-flag` `name` uses a separate set of flag names, not listed here.)
 
-`360` `4-wheel-drive` `accessibility` `active-cabin-ventilation` `add` `adjust` `aggregation` `ai-3d-object` `ai-code` `ai-edit` `ai-image` `ai-scale` `ai-sound` `ai-spark` `ai-spark-filled` `ai-text` `ai-video` `arrow-compact-down` `arrow-compact-left` `arrow-compact-right` `arrow-compact-up` `arrow-double-down` `arrow-double-left` `arrow-double-right` `arrow-double-up` `arrow-down` `arrow-down-left` `arrow-down-right` `arrow-first` `arrow-head-down` `arrow-head-left` `arrow-head-right` `arrow-head-up` `arrow-last` `arrow-left` `arrow-right` `arrow-up` `arrow-up-left` `arrow-up-right` `arrows` `attachment` `augmented-reality` `battery-empty` `battery-empty-co2` `battery-empty-fuel` `battery-full` `battery-half` `battery-one-quarter` `battery-three-quarters` `bell` `bookmark` `bookmark-filled` `brain` `broadcast` `cabriolet` `calculator` `calendar` `camera` `car` `car-battery` `card` `charging-active` `charging-network` `charging-state` `charging-station` `chart` `chat` `check` `city` `climate` `climate-control` `clock` `close` `closed-caption` `cloud` `co2-class` `co2-emission` `color-picker` `compare` `compass` `configurate` `copy` `country-road` `coupe` `cubic-capacity` `cut` `delete` `disable` `dislike` `dislike-filled` `document` `door` `download` `drag` `duration` `ear` `edit` `email` `error` `error-filled` `exclamation` `exclamation-filled` `external` `fast-backward` `fast-forward` `file-csv` `file-excel` `filter` `fingerprint` `flag` `flash` `fuel-station` `garage` `genuine-parts` `geo-localization` `gift` `globe` `grid` `grip` `group` `hand` `heart` `heart-filled` `highway` `highway-filled` `history` `home` `horn` `image` `increase` `information` `information-filled` `key` `laptop` `leaf` `leather` `light` `like` `like-filled` `limousine` `linked` `list` `locate` `lock` `lock-open` `logo-apple-carplay` `logo-apple-music` `logo-apple-podcast` `logo-baidu` `logo-delicious` `logo-digg` `logo-facebook` `logo-foursquare` `logo-gmail` `logo-google` `logo-hatena` `logo-instagram` `logo-kaixin` `logo-kakaotalk` `logo-kununu` `logo-linkedin` `logo-naver` `logo-pinterest` `logo-qq` `logo-qq-share` `logo-reddit` `logo-skyrock` `logo-snapchat` `logo-sohu` `logo-spotify` `logo-tecent` `logo-telegram` `logo-tiktok` `logo-tumblr` `logo-twitter` `logo-viber` `logo-vk` `logo-wechat` `logo-weibo` `logo-whatsapp` `logo-x` `logo-xing` `logo-yahoo` `logo-youku` `logo-youtube` `logout` `map` `menu-dots-horizontal` `menu-dots-vertical` `menu-lines` `microphone` `minus` `mobile` `moon` `new-chat` `news` `north-arrow` `oil-can` `online-search` `parking-brake` `parking-light` `paste` `pause` `phone` `pin` `pin-filled` `pivot` `play` `play-filled` `plug` `plus` `preheating` `price-tag` `printer` `purchase` `push-pin` `push-pin-off` `qr` `qr-off` `question` `question-filled` `racing-flag` `radar` `radio` `refresh` `replay` `reset` `return` `road` `roof-closed` `roof-open` `route` `rss` `save` `screen` `search` `seat` `send` `service-technician` `share` `shopping-bag` `shopping-bag-filled` `shopping-cart` `shopping-cart-filled` `sidebar` `sidelights` `skip-backward` `skip-forward` `snowflake` `sort` `stack` `star` `star-filled` `steering-wheel` `stop` `stopwatch` `subtract` `success` `success-filled` `sun` `suv` `switch` `tablet` `tachometer` `theme` `tire` `trigger-finger` `truck` `turismo` `unlinked` `upload` `user` `user-filled` `user-group` `user-manual` `video` `view` `view-off` `volume-off` `volume-up` `warning` `warning-filled` `weather` `weight` `wifi` `work` `wrench` `wrenches` `zoom-in` `zoom-out`
+`360` `4-wheel-drive` `accessibility` `active-cabin-ventilation` `add` `adjust` `aggregation` `ai-3d-object` `ai-code` `ai-edit` `ai-image` `ai-scale` `ai-sound` `ai-spark` `ai-spark-filled` `ai-text` `ai-video` `arrow-compact-down` `arrow-compact-left` `arrow-compact-right` `arrow-compact-up` `arrow-double-down` `arrow-double-left` `arrow-double-right` `arrow-double-up` `arrow-down` `arrow-down-left` `arrow-down-right` `arrow-first` `arrow-head-down` `arrow-head-left` `arrow-head-right` `arrow-head-up` `arrow-last` `arrow-left` `arrow-right` `arrow-up` `arrow-up-left` `arrow-up-right` `arrows` `attachment` `augmented-reality` `battery-empty` `battery-empty-co2` `battery-empty-fuel` `battery-full` `battery-half` `battery-one-quarter` `battery-three-quarters` `bell` `bookmark` `bookmark-filled` `brain` `broadcast` `cabriolet` `calculator` `calendar` `camera` `car` `car-battery` `card` `charging-active` `charging-network` `charging-state` `charging-station` `chart` `chat` `check` `city` `climate` `climate-control` `clock` `close` `closed-caption` `cloud` `co2-class` `co2-emission` `color-picker` `compare` `compass` `configurate` `connect-services` `copy` `country-road` `coupe` `cubic-capacity` `customer-support` `cut` `delete` `disable` `dislike` `dislike-filled` `document` `door` `download` `drag` `duration` `ear` `edit` `email` `error` `error-filled` `exclamation` `exclamation-filled` `external` `fast-backward` `fast-forward` `file-csv` `file-excel` `filter` `fingerprint` `flag` `flash` `fuel-station` `garage` `genuine-parts` `geo-localization` `gift` `globe` `grid` `grip` `group` `hand` `heart` `heart-filled` `highway` `highway-filled` `history` `home` `horn` `image` `increase` `information` `information-filled` `key` `laptop` `leaf` `leather` `light` `like` `like-filled` `limousine` `linked` `list` `locate` `lock` `lock-open` `logo-apple-carplay` `logo-apple-music` `logo-apple-podcast` `logo-baidu` `logo-delicious` `logo-digg` `logo-facebook` `logo-foursquare` `logo-gmail` `logo-google` `logo-hatena` `logo-instagram` `logo-kaixin` `logo-kakaotalk` `logo-kununu` `logo-linkedin` `logo-naver` `logo-pinterest` `logo-qq` `logo-qq-share` `logo-reddit` `logo-skyrock` `logo-snapchat` `logo-sohu` `logo-spotify` `logo-tecent` `logo-telegram` `logo-tiktok` `logo-tumblr` `logo-twitter` `logo-viber` `logo-vk` `logo-wechat` `logo-weibo` `logo-whatsapp` `logo-x` `logo-xing` `logo-yahoo` `logo-youku` `logo-youtube` `logout` `map` `menu-dots-horizontal` `menu-dots-vertical` `menu-lines` `microphone` `minus` `mobile` `moon` `new-chat` `news` `north-arrow` `oil-can` `online-search` `parking-brake` `parking-light` `paste` `pause` `phone` `pin` `pin-filled` `pivot` `play` `play-filled` `plug` `plus` `preheating` `price-tag` `printer` `purchase` `push-pin` `push-pin-off` `qr` `qr-off` `question` `question-filled` `racing-flag` `radar` `radio` `refresh` `replay` `reset` `return` `road` `roof-closed` `roof-open` `route` `rss` `save` `screen` `search` `seat` `send` `service-technician` `share` `shopping-bag` `shopping-bag-filled` `shopping-cart` `shopping-cart-filled` `shopping-cart-off` `sidebar` `sidelights` `skip-backward` `skip-forward` `snowflake` `sort` `stack` `star` `star-filled` `steering-wheel` `stop` `stopwatch` `subtract` `success` `success-filled` `sun` `suv` `switch` `tablet` `tachometer` `theme` `tire` `trigger-finger` `truck` `turismo` `unlinked` `upload` `user` `user-filled` `user-group` `user-manual` `video` `view` `view-off` `volume-off` `volume-up` `warning` `warning-filled` `weather` `weight` `wifi` `work` `wrench` `wrenches` `zoom-in` `zoom-out`