@porsche-design-system/components-react 4.5.0 → 4.6.0-rc.0

package/skill/references/components/p-text-list/p-text-list.md

@@ -0,0 +1,68 @@
+# p-text-list
+
+The `p-text-list` component is used to display listed data in form of an unordered or ordered list. A list depends on two parts (like any native HTML list): A list wrapper which defines the type of the list (unordered or ordered) and the list items. Nesting is also provided and follows the same nesting rules like native HTML lists. For more complex data you should consider the use of a data table.
+
+## Usage
+
+### Do:
+
+- Use to display short pieces of information in the form of an unordered or ordered list.
+- Use an Unordered List to display content with equal value and an Ordered List for sequenced content.
+- Arrange list items in a logical way such as from highest to the lowest level. If necessary split the content into smaller and more specific categories and group them.
+- Stick to a homogeneous writing structure and style within one list.
+- Use sentence-style capitalization for each list item capitalizing only the first letter.
+
+### Don't:
+
+- Don't exceed two hierarchy levels in Text Lists.
+- Don't mix active with passive voice or declarative with imperative sentences within one list.
+
+## Accessibility support
+
+This component does not include any special accessibility features.
+
+## Development considerations
+
+### List semantics
+
+Choose the list `type` based on whether item order matters to understanding the content.
+
+### Common do's and don'ts
+
+- **Do** use `type="unordered"` for related items without required sequence.
+- **Do** use `type="numbered"` or `type="alphabetically"` when step order or ranking matters.
+- **Don't** use a numbered list for items that are not sequential.
+
+## API
+
+### Properties
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `type` | `'unordered'` `'numbered'` `'alphabetically'` | `'unordered'` | Sets the list type to either `unordered` (bulleted) or `ordered` (numbered), controlling the rendered HTML element (`ul` vs `ol`). |
+
+### Slots
+
+| Slot | Required | Allowed tag names | Description |
+| --- | --- | --- | --- |
+| _(default)_ | no | — | Default slot for the `p-text-list-item` tags or nested `p-text-list` tags. |
+
+## Sub-components
+
+These tags are only valid inside the parent(s) listed under each one — often this component, but some are shared and list a different parent (e.g. a tag documented here via a common ancestor). Their APIs come from the same authoritative `component-meta` as the parent above.
+
+### `p-text-list-item`
+
+Allowed parent: `p-text-list`.
+
+#### Slots
+
+| Slot | Required | Allowed tag names | Description |
+| --- | --- | --- | --- |
+| _(default)_ | no | — | Default slot for the content. |
+
+## Examples
+
+| Example | When to use | File |
+| --- | --- | --- |
+| Default | Minimal default configuration. | [./examples/Default.tsx](./examples/Default.tsx) |

package/skill/references/components/p-textarea/examples/Default.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { PTextarea } from '@porsche-design-system/components-react';
+
+export const Example = () => {
+  return (
+    <>
+      <PTextarea name="some-name" label="Some label"></PTextarea>
+    </>
+  )
+}

package/skill/references/components/p-textarea/examples/Form.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import {
+  PButton,
+  PText,
+  PTextarea,
+  type PTextareaProps,
+  type TextareaInputEventDetail,
+} from '@porsche-design-system/components-react';
+import { FormEvent, useState } from 'react';
+
+export const Example = () => {
+  const [form, setForm] = useState({ myTextarea: '' });
+  const [lastSubmittedData, setLastSubmittedData] = useState<any>();
+
+  const onInput = (e: CustomEvent<TextareaInputEventDetail>) => {
+    const { name, value } = e.target as HTMLElement & PTextareaProps;
+    setForm((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+  };
+
+  const onSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setLastSubmittedData(JSON.stringify(form));
+  };
+
+  const onReset = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setForm({ myTextarea: '' });
+  };
+
+  return (
+    <>
+      <form onSubmit={onSubmit} onReset={onReset} className="flex flex-col gap-fluid-sm">
+        <PTextarea name="myTextarea" label="Some Label" value={form.myTextarea} onInput={onInput} />
+        <div className="flex gap-fluid-sm">
+          <PButton type="submit">Submit</PButton>
+          <PButton type="reset">Reset</PButton>
+        </div>
+        <PText>Last submitted data: {lastSubmittedData}</PText>
+      </form>
+    </>
+  );
+};

package/skill/references/components/p-textarea/examples/Slots.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { PPopover, PTextarea } from '@porsche-design-system/components-react';
+
+export const Example = () => {
+  return (
+    <>
+      <PTextarea name="some-name" state="error">
+        <span slot="label" id="some-label-id">
+          Some label with a 
+          <a href="https://designsystem.porsche.com" className="underline">
+            link
+          </a>
+           and a "label-after" slot.
+        </span>
+        <PPopover slot="label-after">
+          Some Popover content with a 
+          <a href="https://designsystem.porsche.com" className="underline">
+            link
+          </a>
+          .
+        </PPopover>
+        <span slot="description" id="some-description-id">
+          Some description with a 
+          <a href="https://designsystem.porsche.com" className="underline">
+            link
+          </a>
+          .
+        </span>
+        <span slot="message" id="some-message-id">
+          Some error message with a 
+          <a href="https://designsystem.porsche.com" className="underline">
+            link
+          </a>
+          .
+        </span>
+      </PTextarea>
+    </>
+  )
+}

package/skill/references/components/p-textarea/p-textarea.md

@@ -0,0 +1,122 @@
+# p-textarea
+
+The `p-textarea` component is a multi-line text input control. Don't use a Textarea component if you want to allow users to enter shorter responses that are no longer than a single line, such as a phone number or name. In this case, you should use one of the input components.
+
+A `label` is a caption which informs the user what information a particular form field is asking for. The `p-textarea` 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 mandatory to provide a descriptive label text for screen readers.
+
+While a `placeholder` is optional but recommended to be set whenever bits of example content or hints shall be shown to give the user visual cues to fill out the form.
+
+Instead of relying on slotted content, the `p-textarea` component offers a `value` attribute and property that remain synchronized with user input.
+
+## Usage
+
+### Do:
+
+- Use in forms when users need to enter and edit an amount of text that’s longer than a single line.
+- Keep the label text short and descriptive (one or two words).
+- Place validation text right below the Textarea box.
+- Respect the min-height.
+- Mark required fields with a red asterisk to improve the usability of forms.
+- Use the Pure variant (without label) only if the context clearly describes the purpose.
+
+### Don't:
+
+- Don't use when text entry is expected to be short. Use an input instead to avoid confusing users.
+- Don't overwhelm users with too many Textareas on a single page. Stick to no more than two Textareas.
+
+## Accessibility support
+
+### Keyboard
+
+| Key / state | Function |
+| --- | --- |
+| `Tab`, `Shift-Tab` | Moves focus to the next (or previous) focusable element. |
+
+### ARIA enhancements
+
+#### Internal **ARIA** that is managed by the component:
+
+| ARIA | Usage |
+| --- | --- |
+| `aria-describedby="IDREF"` | Defines the accessible description combined with the status message. |
+| `role="status"`, `role="alert"` | When `message` and `state` or `loading` prop change, the status message is announced. |
+| `aria-hidden="true"` | If `required` attribute is set, the visible asterisk indicator is hidden from assistive technologies. |
+| `aria-invalid="true"` | If `error` state is set. |
+| `aria-live="polite"` | If the `maxlength` attribute is present, the counter is announced via ARIA live region. |
+
+## Development considerations
+
+### Disabled state
+
+In general, avoid using the `disabled` state. Disabled elements are no longer focusable and may be missed by screen reader users. They can also confuse sighted users if the reason they are disabled is not made clear.
+
+### Common do's and don'ts
+
+- **Do** provide a descriptive label, especially for open text questions.
+- **Do** use helper text to describe expected format, length, or sensitive content rules.
+- **Do** surface validation with state/message so screen readers get updates.
+- **Don't** use placeholder-only instructions.
+- **Don't** use `hide-label` without an accessible name.
+
+## API
+
+### Properties
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `autoComplete` | `string` | `undefined` | Provides the browser with a hint to enable text autofill suggestions for the textarea (e.g. `autocomplete='on'`). |
+| `compact` | `boolean` | `false` | Reduces the textarea's initial height and padding for use in dense layouts where vertical space is limited. |
+| `counter` | `boolean` | `false` | Shows a live character counter below the textarea indicating how many characters the user has typed relative to `maxLength`. |
+| `description` | `string` | `''` | Sets a supplementary description displayed below the label to give users additional guidance about the textarea. |
+| `disabled` | `boolean` | `false` | Prevents user interaction with the textarea and excludes its value from form submissions. |
+| `form` | `string` | `undefined` | Associates the textarea with a form element by its ID when the textarea is not a direct descendant of that form. |
+| `hideLabel` | `boolean`<br>`BreakpointCustomizable<boolean>` | `false` | Hides the visible label while keeping it accessible to screen readers. Supports responsive breakpoint values. |
+| `label` | `string` | `''` | Sets the visible label text displayed above the textarea to identify its purpose. |
+| `maxLength` | `number` | `undefined` | Sets the maximum number of characters the user is allowed to enter into the textarea. |
+| `message` | `string` | `''` | Sets the validation feedback message displayed below the textarea when `state` is `success` or `error`. |
+| `minLength` | `number` | `undefined` | Sets the minimum number of characters required for the textarea's value to pass constraint validation. |
+| `name` _(required)_ | `string` | `undefined` | Sets the name of the textarea submitted with the form data to identify this field's value on the server. |
+| `placeholder` | `string` | `''` | Sets placeholder text displayed inside the textarea when it is empty to hint at the expected content format. |
+| `readOnly` | `boolean` | `false` | Makes the textarea read-only so users cannot modify the value, while still including it in form submissions. |
+| `required` | `boolean` | `false` | Marks the textarea as required so the form cannot be submitted while this field is empty. |
+| `resize` | `'none'` `'both'` `'horizontal'` `'vertical'` `'block'` `'inline'` | `'vertical'` | Controls whether and in which direction the user can resize the textarea (`horizontal`, `vertical`, `both`, or `none`). |
+| `rows` | `number` | `7` | Sets the initial visible height of the textarea in lines of text. Has no effect when the `--p-textarea-field-sizing` CSS variable is set to `content`. |
+| `spellCheck` | `boolean` | `undefined` | Controls whether the browser's built-in spell-checking and grammar checking is enabled for the textarea content. |
+| `state` | `'none'` `'error'` `'success'` | `'none'` | Sets the validation state of the textarea, which controls its visual appearance and feedback message style (`none`, `success`, `error`). |
+| `value` | `string | null` | `''` | Sets the current multi-line text value of the textarea and reflects any changes made by the user. |
+| `wrap` | `'hard'` `'soft'` `'off'` | `'soft'` | Controls how the submitted text wraps in the form data: `soft` wraps only visually, `hard` inserts line breaks at the textarea width. |
+
+### Events
+
+| Event | Type | Description |
+| --- | --- | --- |
+| `blur` | `CustomEvent<TextareaBlurEventDetail>`<br>`Event` | Emitted when the textarea element loses focus, regardless of whether the value changed. |
+| `change` | `CustomEvent<TextareaChangeEventDetail>`<br>`Event` | Emitted when the textarea loses focus after its value was changed, equivalent to the native `change` event. |
+| `input` | `CustomEvent<TextareaInputEventDetail>`<br>`InputEvent` | Emitted on every keystroke or value change as a direct result of user interaction, equivalent to the native `input` event. |
+
+### Slots
+
+| Slot | Required | Allowed tag names | Description |
+| --- | --- | --- | --- |
+| `label` | no | — | Shows a label. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed. |
+| `label-after` | no | — | Places additional content after the label text (for content that should not be part of the label, e.g. external links or `p-popover`). |
+| `description` | no | — | Shows a description. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed. |
+| `message` | no | — | Shows a state message. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed. |
+
+### CSS Variables
+
+| CSS Variable | Default | Description |
+| --- | --- | --- |
+| `--p-textarea-field-sizing` | `unset` | Controls CSS `field-sizing` for textarea. |
+| `--p-textarea-min-width` | `52px` | Minimum width of the textarea. |
+| `--p-textarea-max-width` | `unset` | Maximum width of the textarea. |
+| `--p-textarea-min-height` | `unset` | Minimum height of the textarea. |
+| `--p-textarea-max-height` | `unset` | Maximum height of the textarea. |
+
+## Examples
+
+| Example | When to use | File |
+| --- | --- | --- |
+| Default | Minimal default configuration. | [./examples/Default.tsx](./examples/Default.tsx) |
+| Form | The `p-textarea` can be integrated into a form in two ways: **controlled** or **uncontrolled**, depending on your needs. | [./examples/Form.tsx](./examples/Form.tsx) |
+| Slots | Use named slots when `label`, `description` or `message` need markup such as a link. | [./examples/Slots.tsx](./examples/Slots.tsx) |

package/skill/references/components/p-toast/examples/Default.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { PToast, useToastManager } from '@porsche-design-system/components-react';
+import { useState } from 'react';
+
+export const Example = () => {
+  const { addMessage } = useToastManager();
+  const [counter, setCounter] = useState(1);
+
+  const onButtonClick = () => {
+    addMessage({ text: `Some message ${counter}`, state: 'success' });
+    setCounter((prev) => prev + 1);
+  };
+
+  return (
+    <>
+      <button type="button" onClick={onButtonClick}>
+        Queue Toast
+      </button>
+      <PToast />
+    </>
+  );
+};

package/skill/references/components/p-toast/p-toast.md

@@ -0,0 +1,61 @@
+# p-toast
+
+The `p-toast` component manages both, the queue and display of toast messages. Therefore, you can only have a single instance of this component within your application. Its messages are rendered on the `#top-layer` which ensures the element to be on top of the page, independent of where `p-toast` is placed in the DOM hierarchy (z-index is not relevant anymore and won't have any effect).
+
+Review the [notification decision tree](https://designsystem.porsche.com/patterns/notifications/decision-tree/) to determine which notification component is best for a particular scenario.
+
+Queuing messages on `p-toast` component happens via its `addMessage()` method. For Angular users, we offer the injectable `ToastManager` service; for React and Vue, there is the `useToastManager()` hook (a composable in Vue). All expose the `addMessage()` method, which needs to be called with a parameter that has the following structure:
+
+```ts
+type ToastMessage = {
+  text: string;
+  state?: 'info' | 'success';
+};
+```
+
+The bottom position of the `p-toast` can be adjusted via the `--p-toast-position-bottom` CSS variable.
+
+For more information about the Usage of the `p-toast` checkout the [Notification](https://designsystem.porsche.com/patterns/notifications/introduction) page.
+
+## Accessibility support
+
+### Keyboard
+
+| Key / state | Function |
+| --- | --- |
+| `Tab` | Moves focus to the close button of the `Toast` element. |
+
+### ARIA enhancements
+
+#### Internal **ARIA** that is managed by the component:
+
+| ARIA | Usage |
+| --- | --- |
+| `role="status"` | When content is populated or changed in `state="info"`, the component announces it unobtrusively. |
+| `aria-hidden="true"` | State `icon` is hidden from the screen reader. |
+
+## Development considerations
+
+### ARIA live announcements
+
+The `Toast` component uses `role="status"` to announce **content changes** for assistive technologies. Therefore, it is **mandatory** that the component is **pre-rendered** and the content (`Toast Item`) is added dynamically.
+
+### Common do's and don'ts
+
+- **Do** pre-render `p-toast` and add `p-toast-item` elements dynamically.
+- **Do** provide specific `text` that explains what happened and what to do next.
+- **Don't** create the toast container only when a message should be announced.
+
+## API
+
+### CSS Variables
+
+| CSS Variable | Default | Description |
+| --- | --- | --- |
+| `--p-toast-position-bottom` | `56px` | Defines the spacing between the toast and the bottom edge of its container. |
+
+## Examples
+
+| Example | When to use | File |
+| --- | --- | --- |
+| Default | Minimal default configuration. | [./examples/Default.tsx](./examples/Default.tsx) |

package/skill/references/components/p-wordmark/examples/CustomClickableArea.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { PWordmark } from '@porsche-design-system/components-react';
+
+export const Example = () => {
+  return (
+    <>
+      <PWordmark className="p-static-md" href="https://porsche.com" aria={{'aria-label': 'Porsche Homepage'}}></PWordmark>
+    </>
+  )
+}

package/skill/references/components/p-wordmark/examples/Default.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { PWordmark } from '@porsche-design-system/components-react';
+
+export const Example = () => {
+  return (
+    <>
+      <PWordmark></PWordmark>
+    </>
+  )
+}

package/skill/references/components/p-wordmark/examples/Size.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { PWordmark } from '@porsche-design-system/components-react';
+
+export const Example = () => {
+  return (
+    <>
+      <PWordmark className="h-[20px]" size="inherit"></PWordmark>
+    </>
+  )
+}

package/skill/references/components/p-wordmark/p-wordmark.md

@@ -0,0 +1,66 @@
+# p-wordmark
+
+The `p-wordmark` gives the Porsche brand a distinctive look, sets it apart from others within the overall external image and represents the quality of the product.
+
+You can use native `click`, `focus`, `focusin`, `blur` and `focusout` events on the `p-wordmark`.
+
+## Usage
+
+### Do
+
+- Use the `p-wordmark` as the main brand identifier.
+- Use the `p-wordmark` only in dedicated situations, like global navigation.
+- Position the `p-wordmark` centered whenever possible.
+- Use the `p-crest` only as an additional small brand identifier (e.g., within contact cards).
+- Switch from the `p-wordmark` to the `p-crest` on small viewports below 480px (automatically implemented in global navigation and footer).
+
+### Don't
+
+- Use the `p-crest` as the primary brand identifier by default.
+- Display the `p-wordmark` too often (usually once is enough).
+
+## Accessibility support
+
+### Keyboard
+
+| Key / state | Function |
+| --- | --- |
+| `Tab`, `Shift-Tab` | If `href` prop is set, focus moves to the next (or previous) focusable element. |
+| `Enter` | Activates the link. |
+
+### ARIA enhancements
+
+#### External **ARIA** provided by the `aria` property:
+
+| ARIA | Usage |
+| --- | --- |
+| `aria-label` | Defines a string value that labels the interactive element. |
+| `aria-current` | Exposes the current state of the link. |
+| `aria-haspopup` | Defines that the button opens a popup (e.g. `dialog`). |
+
+## Development considerations
+
+### Common do's and don'ts
+
+- **Do** pass ARIA attributes through the `aria` prop when the wordmark is linked.
+- **Do** provide a descriptive `aria-label` for linked wordmarks, for example "Porsche home".
+- **Don't** add native `aria-*` attributes directly on the component host.
+
+## API
+
+### Properties
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `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`). |
+| `target` | `'_self'` `'_blank'` `'_parent'` `'_top'` `'string'` | `'_self'` | Specifies where to open the linked URL when `href` is set (e.g. `_self`, `_blank`). |
+
+## Examples
+
+| Example | When to use | File |
+| --- | --- | --- |
+| Default | Minimal default configuration. | [./examples/Default.tsx](./examples/Default.tsx) |
+| Size | By default, the sizing is fluid, which can be changed to `inherit` a specified value. | [./examples/Size.tsx](./examples/Size.tsx) |
+| Custom clickable/focusable area | Sometimes it may be useful to enlarge the clickable/focusable area of the `p-wordmark`. | [./examples/CustomClickableArea.tsx](./examples/CustomClickableArea.tsx) |

package/skill/references/icons.md

@@ -0,0 +1,5 @@
+# Icon names
+
+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`