diff --git a/scripts/docs_generate.ts b/scripts/docs_generate.ts index 6297886f5b..24e29fae2b 100644 --- a/scripts/docs_generate.ts +++ b/scripts/docs_generate.ts @@ -5,7 +5,12 @@ import fs from 'fs'; import { customElementsManifestToMarkdown } from '@custom-elements-manifest/to-markdown'; -import type { Attribute, CustomElement, Package } from 'custom-elements-manifest/schema'; +import type { + Attribute, + ClassDeclaration, + CustomElement, + Package, +} from 'custom-elements-manifest/schema'; import * as glob from 'glob'; // eslint-disable-next-line @typescript-eslint/naming-convention import MagicString from 'magic-string'; @@ -125,6 +130,26 @@ async function updateComponentReadme( } const manifest: Package = JSON.parse(fs.readFileSync(manifestFilePath, 'utf-8')); + +type ExtendedClassDeclaration = ClassDeclaration & { + cssProperties: { name: string }[]; + events: { name: string }[]; + members: { name: string }[]; + slots: { name: string }[]; +}; + +manifest.modules.forEach((module) => { + module.declarations + ?.filter((declaration): declaration is ExtendedClassDeclaration => declaration.kind === 'class') + .forEach((declaration) => + ['members', 'slots', 'cssProperties', 'events'].forEach((type) => + (declaration[type as keyof ExtendedClassDeclaration] as { name: string }[])?.sort((a, b) => + a.name.localeCompare(b.name), + ), + ), + ); +}); + const markdown: string = customElementsManifestToMarkdown(manifest, { headingOffset: -1, // Default heading is '###' private: 'details', // We use 'details' because it's the only way to remove 'protected' members from the tables. We remove details section later. diff --git a/src/components/accordion/readme.md b/src/components/accordion/readme.md index fc18e8f4d8..2176d3cb03 100644 --- a/src/components/accordion/readme.md +++ b/src/components/accordion/readme.md @@ -52,9 +52,9 @@ In the following example, all the `sbb-expansion-panel-header` would be wrapped | Name | Attribute | Privacy | Type | Default | Description | | ------------ | ------------- | ------- | ----------------------- | ------- | ----------------------------------------------------------------------------------------- | -| `titleLevel` | `title-level` | public | `SbbTitleLevel \| null` | `null` | The heading level for the sbb-expansion-panel-headers within the component. | | `multi` | `multi` | public | `boolean` | `false` | Whether more than one sbb-expansion-panel can be open at the same time. | | `size` | `size` | public | `'s' \| 'l'` | `'l'` | Size variant, either l or s; overrides the size on any projected `sbb-expansion-panel`. ` | +| `titleLevel` | `title-level` | public | `SbbTitleLevel \| null` | `null` | The heading level for the sbb-expansion-panel-headers within the component. | ## Slots diff --git a/src/components/action-group/readme.md b/src/components/action-group/readme.md index 5d4946f875..53bec0cf50 100644 --- a/src/components/action-group/readme.md +++ b/src/components/action-group/readme.md @@ -123,10 +123,10 @@ The values for `align-group` and `align-self` for the various allocations are as | Name | Attribute | Privacy | Type | Default | Description | | ---------------- | ----------------- | ------- | ------------------------------------------- | -------------- | ----------------------------------------------------------------------------------------------------------------------- | | `alignGroup` | `align-group` | public | `'start' \| 'center' \| 'stretch' \| 'end'` | `'start'` | Set the slotted `` children's alignment. | -| `horizontalFrom` | `horizontal-from` | public | `SbbHorizontalFrom` | `'medium'` | Overrides the behaviour of `orientation` property. | -| `orientation` | `orientation` | public | `SbbOrientation` | `'horizontal'` | Indicates the orientation of the components inside the ``. | | `buttonSize` | `button-size` | public | `SbbButtonSize` | `'l'` | Size of the nested sbb-button instances. This will overwrite the size attribute of nested sbb-button instances. | +| `horizontalFrom` | `horizontal-from` | public | `SbbHorizontalFrom` | `'medium'` | Overrides the behaviour of `orientation` property. | | `linkSize` | `link-size` | public | `SbbLinkSize` | `'m'` | Size of the nested sbb-block-link instances. This will overwrite the size attribute of nested sbb-block-link instances. | +| `orientation` | `orientation` | public | `SbbOrientation` | `'horizontal'` | Indicates the orientation of the components inside the ``. | ## Slots diff --git a/src/components/alert/alert-group/readme.md b/src/components/alert/alert-group/readme.md index 298bb22cc2..85e1e9d2d3 100644 --- a/src/components/alert/alert-group/readme.md +++ b/src/components/alert/alert-group/readme.md @@ -45,9 +45,9 @@ and therefore interrupts screen reader flow, to immediately read out the alert c | Name | Attribute | Privacy | Type | Default | Description | | ------------------------- | --------------------------- | ------- | ------------------------------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `role` | `role` | public | `'alert' \| 'status' \| string` | `'status'` | The role attribute defines how to announce alerts to the user. 'status': sets aria-live to polite and aria-atomic to true. 'alert': sets aria-live to assertive and aria-atomic to true. | | `accessibilityTitle` | `accessibility-title` | public | `string \| undefined` | | Title for this alert group which is only visible for screen reader users. | | `accessibilityTitleLevel` | `accessibility-title-level` | public | `SbbTitleLevel` | `'2'` | Level of the accessibility title, will be rendered as heading tag (e.g. h2). Defaults to level 2. | +| `role` | `role` | public | `'alert' \| 'status' \| string` | `'status'` | The role attribute defines how to announce alerts to the user. 'status': sets aria-live to polite and aria-atomic to true. 'alert': sets aria-live to assertive and aria-atomic to true. | ## Events diff --git a/src/components/alert/alert/readme.md b/src/components/alert/alert/readme.md index a2d7fcd673..787b4abba4 100644 --- a/src/components/alert/alert/readme.md +++ b/src/components/alert/alert/readme.md @@ -84,17 +84,17 @@ As a base rule, opening animations should be active if an alert arrives after th | Name | Attribute | Privacy | Type | Default | Description | | -------------------- | --------------------- | ------- | --------------------------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `accessibilityLabel` | `accessibility-label` | public | `string \| undefined` | | This will be forwarded as aria-label to the relevant nested element. | +| `animation` | `animation` | public | `'open' \| 'none'` | `'open'` | The enabled animations. | +| `href` | `href` | public | `string \| undefined` | | The href value you want to link to. | +| `iconName` | `icon-name` | public | `string \| undefined` | `'info'` | Name of the icon which will be forward to the nested `sbb-icon`. Choose the icons from https://icons.app.sbb.ch. Styling is optimized for icons of type HIM-CUS. | +| `linkContent` | `link-content` | public | `string \| undefined` | | Content of the link. | | `readonly` | `readonly` | public | `boolean` | `false` | Whether the alert is readonly. In readonly mode, there is no dismiss button offered to the user. | +| `rel` | `rel` | public | `string \| undefined` | | The relationship of the linked URL as space-separated link types. | | `size` | `size` | public | `'s' \| 'm' \| 'l'` | `'m'` | You can choose between `m` or `l` size. | -| `iconName` | `icon-name` | public | `string \| undefined` | `'info'` | Name of the icon which will be forward to the nested `sbb-icon`. Choose the icons from https://icons.app.sbb.ch. Styling is optimized for icons of type HIM-CUS. | +| `target` | `target` | public | `LinkTargetType \| string \| undefined` | | Where to display the linked URL. | | `titleContent` | `title-content` | public | `string \| undefined` | | Content of title. | | `titleLevel` | `title-level` | public | `SbbTitleLevel` | `'3'` | Level of title, will be rendered as heading tag (e.g. h3). Defaults to level 3. | -| `linkContent` | `link-content` | public | `string \| undefined` | | Content of the link. | -| `href` | `href` | public | `string \| undefined` | | The href value you want to link to. | -| `target` | `target` | public | `LinkTargetType \| string \| undefined` | | Where to display the linked URL. | -| `rel` | `rel` | public | `string \| undefined` | | The relationship of the linked URL as space-separated link types. | -| `accessibilityLabel` | `accessibility-label` | public | `string \| undefined` | | This will be forwarded as aria-label to the relevant nested element. | -| `animation` | `animation` | public | `'open' \| 'none'` | `'open'` | The enabled animations. | ## Methods @@ -106,9 +106,9 @@ As a base rule, opening animations should be active if an alert arrives after th | Name | Type | Description | Inherited From | | -------------------- | ------------------- | ------------------------------------------------------------------ | -------------- | -| `willOpen` | `CustomEvent` | Emits when the fade in animation starts. | | | `didOpen` | `CustomEvent` | Emits when the fade in animation ends and the button is displayed. | | | `dismissalRequested` | `CustomEvent` | Emits when dismissal of an alert was requested. | | +| `willOpen` | `CustomEvent` | Emits when the fade in animation starts. | | ## Slots diff --git a/src/components/autocomplete/readme.md b/src/components/autocomplete/readme.md index bc60f7e5af..f5c190da5b 100644 --- a/src/components/autocomplete/readme.md +++ b/src/components/autocomplete/readme.md @@ -99,28 +99,28 @@ using `aria-activedescendant` to support navigation though the autocomplete opti | Name | Attribute | Privacy | Type | Default | Description | | ------------------- | --------------------- | ------- | ----------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | | `origin` | `origin` | public | `string \| HTMLElement \| undefined` | | The element where the autocomplete will attach; accepts both an element's id or an HTMLElement. If not set, will search for the first 'sbb-form-field' ancestor. | -| `trigger` | `trigger` | public | `string \| HTMLInputElement \| undefined` | | The input element that will trigger the autocomplete opening; accepts both an element's id or an HTMLElement. By default, the autocomplete will open on focus, click, input or `ArrowDown` keypress of the 'trigger' element. If not set, will search for the first 'input' child of a 'sbb-form-field' ancestor. | -| `preserveIconSpace` | `preserve-icon-space` | public | `boolean \| undefined` | | Whether the icon space is preserved when no icon is set. | | `originElement` | - | public | `HTMLElement` | | Returns the element where autocomplete overlay is attached to. | +| `preserveIconSpace` | `preserve-icon-space` | public | `boolean \| undefined` | | Whether the icon space is preserved when no icon is set. | +| `trigger` | `trigger` | public | `string \| HTMLInputElement \| undefined` | | The input element that will trigger the autocomplete opening; accepts both an element's id or an HTMLElement. By default, the autocomplete will open on focus, click, input or `ArrowDown` keypress of the 'trigger' element. If not set, will search for the first 'input' child of a 'sbb-form-field' ancestor. | | `triggerElement` | - | public | `HTMLInputElement \| undefined` | | Returns the trigger element. | -| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | ## Methods | Name | Privacy | Description | Parameters | Return | Inherited From | | ------- | ------- | ------------------------ | ---------- | ------ | -------------- | -| `open` | public | Opens the autocomplete. | | `void` | | | `close` | public | Closes the autocomplete. | | `void` | | +| `open` | public | Opens the autocomplete. | | `void` | | ## Events | Name | Type | Description | Inherited From | | ----------- | ------------------- | ------------------------------------------------------------------------------------- | -------------- | -| `willOpen` | `CustomEvent` | Emits whenever the `sbb-autocomplete` starts the opening transition. Can be canceled. | | +| `didClose` | `CustomEvent` | Emits whenever the `sbb-autocomplete` is closed. | | | `didOpen` | `CustomEvent` | Emits whenever the `sbb-autocomplete` is opened. | | | `willClose` | `CustomEvent` | Emits whenever the `sbb-autocomplete` begins the closing transition. Can be canceled. | | -| `didClose` | `CustomEvent` | Emits whenever the `sbb-autocomplete` is closed. | | +| `willOpen` | `CustomEvent` | Emits whenever the `sbb-autocomplete` starts the opening transition. Can be canceled. | | ## CSS Properties diff --git a/src/components/breadcrumb/breadcrumb/readme.md b/src/components/breadcrumb/breadcrumb/readme.md index 599ee8b16e..5b940d3294 100644 --- a/src/components/breadcrumb/breadcrumb/readme.md +++ b/src/components/breadcrumb/breadcrumb/readme.md @@ -41,12 +41,12 @@ By default, the `sbb-breadcrumb-group` component sets `aria-current="page"` on t | Name | Attribute | Privacy | Type | Default | Description | | -------------------- | --------------------- | ------- | --------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- | -| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | +| `accessibilityLabel` | `accessibility-label` | public | `string \| undefined` | | This will be forwarded as aria-label to the inner anchor element. | +| `download` | `download` | public | `boolean \| undefined` | | Whether the browser will show the download dialog on click. | | `href` | `href` | public | `string \| undefined` | | The href value you want to link to. | -| `target` | `target` | public | `LinkTargetType \| string \| undefined` | | Where to display the linked URL. | +| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `rel` | `rel` | public | `string \| undefined` | | The relationship of the linked URL as space-separated link types. | -| `download` | `download` | public | `boolean \| undefined` | | Whether the browser will show the download dialog on click. | -| `accessibilityLabel` | `accessibility-label` | public | `string \| undefined` | | This will be forwarded as aria-label to the inner anchor element. | +| `target` | `target` | public | `LinkTargetType \| string \| undefined` | | Where to display the linked URL. | ## Slots diff --git a/src/components/button/button-link/readme.md b/src/components/button/button-link/readme.md index 92fd3491bc..b53c3f0fdd 100644 --- a/src/components/button/button-link/readme.md +++ b/src/components/button/button-link/readme.md @@ -74,15 +74,15 @@ Use the accessibility properties in case of an icon-only button to describe the | Name | Attribute | Privacy | Type | Default | Description | | -------------------- | --------------------- | ------- | --------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- | -| `size` | `size` | public | `SbbButtonSize \| undefined` | `'l'` | Size variant, either l or m. | -| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | -| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | +| `accessibilityLabel` | `accessibility-label` | public | `string \| undefined` | | This will be forwarded as aria-label to the inner anchor element. | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `download` | `download` | public | `boolean \| undefined` | | Whether the browser will show the download dialog on click. | | `href` | `href` | public | `string \| undefined` | | The href value you want to link to. | -| `target` | `target` | public | `LinkTargetType \| string \| undefined` | | Where to display the linked URL. | +| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | | `rel` | `rel` | public | `string \| undefined` | | The relationship of the linked URL as space-separated link types. | -| `download` | `download` | public | `boolean \| undefined` | | Whether the browser will show the download dialog on click. | -| `accessibilityLabel` | `accessibility-label` | public | `string \| undefined` | | This will be forwarded as aria-label to the inner anchor element. | +| `size` | `size` | public | `SbbButtonSize \| undefined` | `'l'` | Size variant, either l or m. | +| `target` | `target` | public | `LinkTargetType \| string \| undefined` | | Where to display the linked URL. | ## Slots diff --git a/src/components/button/button-static/readme.md b/src/components/button/button-static/readme.md index 4afa9b7daa..ae08037ffe 100644 --- a/src/components/button/button-static/readme.md +++ b/src/components/button/button-static/readme.md @@ -59,10 +59,10 @@ Use the accessibility properties in case of an icon-only button to describe the | Name | Attribute | Privacy | Type | Default | Description | | ---------- | ----------- | ------- | ---------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- | -| `size` | `size` | public | `SbbButtonSize \| undefined` | `'l'` | Size variant, either l or m. | -| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | -| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `size` | `size` | public | `SbbButtonSize \| undefined` | `'l'` | Size variant, either l or m. | ## Slots diff --git a/src/components/button/button/readme.md b/src/components/button/button/readme.md index b991395360..07d5768ef8 100644 --- a/src/components/button/button/readme.md +++ b/src/components/button/button/readme.md @@ -68,14 +68,14 @@ Use the accessibility properties in case of an icon-only button to describe the | Name | Attribute | Privacy | Type | Default | Description | | ---------- | ----------- | ------- | ---------------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------- | -| `size` | `size` | public | `SbbButtonSize \| undefined` | `'l'` | Size variant, either l or m. | -| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | -| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | -| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | +| `form` | `form` | public | `string \| undefined` | | The
element to associate the button with. | +| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `name` | `name` | public | `string` | | The name of the button element. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `size` | `size` | public | `SbbButtonSize \| undefined` | `'l'` | Size variant, either l or m. | +| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | | `value` | `value` | public | `string` | | The value of the button element. | -| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | ## Slots diff --git a/src/components/button/mini-button/readme.md b/src/components/button/mini-button/readme.md index 4d01e60bc5..399bc96817 100644 --- a/src/components/button/mini-button/readme.md +++ b/src/components/button/mini-button/readme.md @@ -76,13 +76,13 @@ Use the accessibility properties to describe the purpose of the `sbb-mini-button | Name | Attribute | Privacy | Type | Default | Description | | ---------- | ----------- | ------- | --------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------- | -| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | -| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | -| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | +| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | +| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `name` | `name` | public | `string` | | The name of the button element. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | | `value` | `value` | public | `string` | | The value of the button element. | -| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | ## Slots diff --git a/src/components/button/secondary-button-link/readme.md b/src/components/button/secondary-button-link/readme.md index c3c80a07bb..eff16b9d81 100644 --- a/src/components/button/secondary-button-link/readme.md +++ b/src/components/button/secondary-button-link/readme.md @@ -79,15 +79,15 @@ Use the accessibility properties in case of an icon-only button to describe the | Name | Attribute | Privacy | Type | Default | Description | | -------------------- | --------------------- | ------- | --------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- | -| `size` | `size` | public | `SbbButtonSize \| undefined` | `'l'` | Size variant, either l or m. | -| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | -| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | +| `accessibilityLabel` | `accessibility-label` | public | `string \| undefined` | | This will be forwarded as aria-label to the inner anchor element. | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `download` | `download` | public | `boolean \| undefined` | | Whether the browser will show the download dialog on click. | | `href` | `href` | public | `string \| undefined` | | The href value you want to link to. | -| `target` | `target` | public | `LinkTargetType \| string \| undefined` | | Where to display the linked URL. | +| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | | `rel` | `rel` | public | `string \| undefined` | | The relationship of the linked URL as space-separated link types. | -| `download` | `download` | public | `boolean \| undefined` | | Whether the browser will show the download dialog on click. | -| `accessibilityLabel` | `accessibility-label` | public | `string \| undefined` | | This will be forwarded as aria-label to the inner anchor element. | +| `size` | `size` | public | `SbbButtonSize \| undefined` | `'l'` | Size variant, either l or m. | +| `target` | `target` | public | `LinkTargetType \| string \| undefined` | | Where to display the linked URL. | ## Slots diff --git a/src/components/button/secondary-button-static/readme.md b/src/components/button/secondary-button-static/readme.md index 6221f504de..17d1919cf9 100644 --- a/src/components/button/secondary-button-static/readme.md +++ b/src/components/button/secondary-button-static/readme.md @@ -62,10 +62,10 @@ Use the accessibility properties in case of an icon-only button to describe the | Name | Attribute | Privacy | Type | Default | Description | | ---------- | ----------- | ------- | ---------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- | -| `size` | `size` | public | `SbbButtonSize \| undefined` | `'l'` | Size variant, either l or m. | -| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | -| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `size` | `size` | public | `SbbButtonSize \| undefined` | `'l'` | Size variant, either l or m. | ## Slots diff --git a/src/components/button/secondary-button/readme.md b/src/components/button/secondary-button/readme.md index 4d9dbb6a64..19fe5ecfd9 100644 --- a/src/components/button/secondary-button/readme.md +++ b/src/components/button/secondary-button/readme.md @@ -73,14 +73,14 @@ Use the accessibility properties in case of an icon-only button to describe the | Name | Attribute | Privacy | Type | Default | Description | | ---------- | ----------- | ------- | ---------------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------- | -| `size` | `size` | public | `SbbButtonSize \| undefined` | `'l'` | Size variant, either l or m. | -| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | -| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | -| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | +| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | +| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `name` | `name` | public | `string` | | The name of the button element. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `size` | `size` | public | `SbbButtonSize \| undefined` | `'l'` | Size variant, either l or m. | +| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | | `value` | `value` | public | `string` | | The value of the button element. | -| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | ## Slots diff --git a/src/components/button/tertiary-button-link/readme.md b/src/components/button/tertiary-button-link/readme.md index adadac6614..de9e6faecb 100644 --- a/src/components/button/tertiary-button-link/readme.md +++ b/src/components/button/tertiary-button-link/readme.md @@ -79,15 +79,15 @@ Use the accessibility properties in case of an icon-only button to describe the | Name | Attribute | Privacy | Type | Default | Description | | -------------------- | --------------------- | ------- | --------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- | -| `size` | `size` | public | `SbbButtonSize \| undefined` | `'l'` | Size variant, either l or m. | -| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | -| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | +| `accessibilityLabel` | `accessibility-label` | public | `string \| undefined` | | This will be forwarded as aria-label to the inner anchor element. | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `download` | `download` | public | `boolean \| undefined` | | Whether the browser will show the download dialog on click. | | `href` | `href` | public | `string \| undefined` | | The href value you want to link to. | -| `target` | `target` | public | `LinkTargetType \| string \| undefined` | | Where to display the linked URL. | +| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | | `rel` | `rel` | public | `string \| undefined` | | The relationship of the linked URL as space-separated link types. | -| `download` | `download` | public | `boolean \| undefined` | | Whether the browser will show the download dialog on click. | -| `accessibilityLabel` | `accessibility-label` | public | `string \| undefined` | | This will be forwarded as aria-label to the inner anchor element. | +| `size` | `size` | public | `SbbButtonSize \| undefined` | `'l'` | Size variant, either l or m. | +| `target` | `target` | public | `LinkTargetType \| string \| undefined` | | Where to display the linked URL. | ## Slots diff --git a/src/components/button/tertiary-button-static/readme.md b/src/components/button/tertiary-button-static/readme.md index 492e7d013f..3154833eea 100644 --- a/src/components/button/tertiary-button-static/readme.md +++ b/src/components/button/tertiary-button-static/readme.md @@ -62,10 +62,10 @@ Use the accessibility properties in case of an icon-only button to describe the | Name | Attribute | Privacy | Type | Default | Description | | ---------- | ----------- | ------- | ---------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- | -| `size` | `size` | public | `SbbButtonSize \| undefined` | `'l'` | Size variant, either l or m. | -| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | -| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `size` | `size` | public | `SbbButtonSize \| undefined` | `'l'` | Size variant, either l or m. | ## Slots diff --git a/src/components/button/tertiary-button/readme.md b/src/components/button/tertiary-button/readme.md index 2c7a19c0b5..a887ea0d7e 100644 --- a/src/components/button/tertiary-button/readme.md +++ b/src/components/button/tertiary-button/readme.md @@ -73,14 +73,14 @@ Use the accessibility properties in case of an icon-only button to describe the | Name | Attribute | Privacy | Type | Default | Description | | ---------- | ----------- | ------- | ---------------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------- | -| `size` | `size` | public | `SbbButtonSize \| undefined` | `'l'` | Size variant, either l or m. | -| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | -| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | -| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | +| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | +| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `name` | `name` | public | `string` | | The name of the button element. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `size` | `size` | public | `SbbButtonSize \| undefined` | `'l'` | Size variant, either l or m. | +| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | | `value` | `value` | public | `string` | | The value of the button element. | -| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | ## Slots diff --git a/src/components/button/transparent-button-link/readme.md b/src/components/button/transparent-button-link/readme.md index 5fa8f363cc..fbc8983aac 100644 --- a/src/components/button/transparent-button-link/readme.md +++ b/src/components/button/transparent-button-link/readme.md @@ -79,15 +79,15 @@ Use the accessibility properties in case of an icon-only button to describe the | Name | Attribute | Privacy | Type | Default | Description | | -------------------- | --------------------- | ------- | --------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- | -| `size` | `size` | public | `SbbButtonSize \| undefined` | `'l'` | Size variant, either l or m. | -| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | -| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | +| `accessibilityLabel` | `accessibility-label` | public | `string \| undefined` | | This will be forwarded as aria-label to the inner anchor element. | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `download` | `download` | public | `boolean \| undefined` | | Whether the browser will show the download dialog on click. | | `href` | `href` | public | `string \| undefined` | | The href value you want to link to. | -| `target` | `target` | public | `LinkTargetType \| string \| undefined` | | Where to display the linked URL. | +| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | | `rel` | `rel` | public | `string \| undefined` | | The relationship of the linked URL as space-separated link types. | -| `download` | `download` | public | `boolean \| undefined` | | Whether the browser will show the download dialog on click. | -| `accessibilityLabel` | `accessibility-label` | public | `string \| undefined` | | This will be forwarded as aria-label to the inner anchor element. | +| `size` | `size` | public | `SbbButtonSize \| undefined` | `'l'` | Size variant, either l or m. | +| `target` | `target` | public | `LinkTargetType \| string \| undefined` | | Where to display the linked URL. | ## Slots diff --git a/src/components/button/transparent-button-static/readme.md b/src/components/button/transparent-button-static/readme.md index 1df3375314..c0f2964c1e 100644 --- a/src/components/button/transparent-button-static/readme.md +++ b/src/components/button/transparent-button-static/readme.md @@ -62,10 +62,10 @@ Use the accessibility properties in case of an icon-only button to describe the | Name | Attribute | Privacy | Type | Default | Description | | ---------- | ----------- | ------- | ---------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- | -| `size` | `size` | public | `SbbButtonSize \| undefined` | `'l'` | Size variant, either l or m. | -| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | -| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `size` | `size` | public | `SbbButtonSize \| undefined` | `'l'` | Size variant, either l or m. | ## Slots diff --git a/src/components/button/transparent-button/readme.md b/src/components/button/transparent-button/readme.md index 556ae617c2..0cfa743e4f 100644 --- a/src/components/button/transparent-button/readme.md +++ b/src/components/button/transparent-button/readme.md @@ -73,14 +73,14 @@ Use the accessibility properties in case of an icon-only button to describe the | Name | Attribute | Privacy | Type | Default | Description | | ---------- | ----------- | ------- | ---------------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------- | -| `size` | `size` | public | `SbbButtonSize \| undefined` | `'l'` | Size variant, either l or m. | -| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | -| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | -| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | +| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | +| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `name` | `name` | public | `string` | | The name of the button element. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `size` | `size` | public | `SbbButtonSize \| undefined` | `'l'` | Size variant, either l or m. | +| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | | `value` | `value` | public | `string` | | The value of the button element. | -| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | ## Slots diff --git a/src/components/calendar/readme.md b/src/components/calendar/readme.md index 92ef3cd12f..cb5b981359 100644 --- a/src/components/calendar/readme.md +++ b/src/components/calendar/readme.md @@ -66,11 +66,11 @@ This is helpful if you need a specific state of the component. | Name | Attribute | Privacy | Type | Default | Description | | ------------ | ------------- | ------- | ------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------ | -| `wide` | `wide` | public | `boolean` | `false` | If set to true, two months are displayed | -| `min` | `min` | public | `T \| null` | | The minimum valid date. Takes T Object, ISOString, and Unix Timestamp (number of seconds since Jan 1, 1970). | +| `dateFilter` | `date-filter` | public | `(date: T \| null) => boolean \| undefined` | | A function used to filter out dates. | | `max` | `max` | public | `T \| null` | | The maximum valid date. Takes T Object, ISOString, and Unix Timestamp (number of seconds since Jan 1, 1970). | +| `min` | `min` | public | `T \| null` | | The minimum valid date. Takes T Object, ISOString, and Unix Timestamp (number of seconds since Jan 1, 1970). | | `selected` | `selected` | public | `T \| null` | | The selected date. Takes T Object, ISOString, and Unix Timestamp (number of seconds since Jan 1, 1970). | -| `dateFilter` | `date-filter` | public | `(date: T \| null) => boolean \| undefined` | | A function used to filter out dates. | +| `wide` | `wide` | public | `boolean` | `false` | If set to true, two months are displayed | ## Methods diff --git a/src/components/card/card-button/readme.md b/src/components/card/card-button/readme.md index 60fcb55553..dd6c18e365 100644 --- a/src/components/card/card-button/readme.md +++ b/src/components/card/card-button/readme.md @@ -25,10 +25,10 @@ as it is used for search engines and screen-reader users. | Name | Attribute | Privacy | Type | Default | Description | | -------- | --------- | ------- | --------------------- | ---------- | ------------------------------------------------ | | `active` | `active` | public | `boolean` | `false` | Whether the card is active. | -| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | +| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | | `name` | `name` | public | `string` | | The name of the button element. | +| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | | `value` | `value` | public | `string` | | The value of the button element. | -| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | ## Slots diff --git a/src/components/card/card-link/readme.md b/src/components/card/card-link/readme.md index e719a796c1..41657b5fe9 100644 --- a/src/components/card/card-link/readme.md +++ b/src/components/card/card-link/readme.md @@ -24,12 +24,12 @@ as it is used for search engines and screen-reader users. | Name | Attribute | Privacy | Type | Default | Description | | -------------------- | --------------------- | ------- | --------------------------------------- | ------- | ----------------------------------------------------------------- | +| `accessibilityLabel` | `accessibility-label` | public | `string \| undefined` | | This will be forwarded as aria-label to the inner anchor element. | | `active` | `active` | public | `boolean` | `false` | Whether the card is active. | +| `download` | `download` | public | `boolean \| undefined` | | Whether the browser will show the download dialog on click. | | `href` | `href` | public | `string \| undefined` | | The href value you want to link to. | -| `target` | `target` | public | `LinkTargetType \| string \| undefined` | | Where to display the linked URL. | | `rel` | `rel` | public | `string \| undefined` | | The relationship of the linked URL as space-separated link types. | -| `download` | `download` | public | `boolean \| undefined` | | Whether the browser will show the download dialog on click. | -| `accessibilityLabel` | `accessibility-label` | public | `string \| undefined` | | This will be forwarded as aria-label to the inner anchor element. | +| `target` | `target` | public | `LinkTargetType \| string \| undefined` | | Where to display the linked URL. | ## Slots diff --git a/src/components/card/card/readme.md b/src/components/card/card/readme.md index 90c28f933c..aabbad4ed7 100644 --- a/src/components/card/card/readme.md +++ b/src/components/card/card/readme.md @@ -88,13 +88,13 @@ To improve coloring, it's needed to manually define styles for Window high contr | Name | Attribute | Privacy | Type | Default | Description | | ------- | --------- | ------- | --------------------------------------------------------------------------------------------- | --------- | -------------------------------------------------- | -| `size` | `size` | public | `'xs' \| 's' \| 'm' \| 'l' \| 'xl' \| 'xxl' \| 'xxxl'` | `'m'` | Size variant, either xs, s, m, l, xl, xxl or xxxl. | | `color` | `color` | public | `\| 'white' \| 'milk' \| 'transparent-bordered' \| 'transparent-bordered-dashed'` | `'white'` | Option to set the component's background color. | +| `size` | `size` | public | `'xs' \| 's' \| 'm' \| 'l' \| 'xl' \| 'xxl' \| 'xxxl'` | `'m'` | Size variant, either xs, s, m, l, xl, xxl or xxxl. | ## Slots | Name | Description | | -------- | --------------------------------------------------------------------------- | | | Use the unnamed slot to add content to the card. | -| `badge` | Use this slot to render a `sbb-card-badge` component. | | `action` | Use this slot to render a `sbb-card-button` or a `sbb-card-link` component. | +| `badge` | Use this slot to render a `sbb-card-badge` component. | diff --git a/src/components/checkbox/checkbox-group/readme.md b/src/components/checkbox/checkbox-group/readme.md index af5fe0ed24..1203f50112 100644 --- a/src/components/checkbox/checkbox-group/readme.md +++ b/src/components/checkbox/checkbox-group/readme.md @@ -75,12 +75,12 @@ Two values are available, `s` and `m`, which is the default | Name | Attribute | Privacy | Type | Default | Description | | ---------------- | ----------------- | ------- | -------------------------------- | -------------- | ------------------------------------------------------------------------------ | -| `required` | `required` | public | `boolean` | `false` | Whether the checkbox group is required. | -| `size` | `size` | public | `SbbCheckboxSize` | `'m'` | Size variant, either m or s. | -| `horizontalFrom` | `horizontal-from` | public | `SbbHorizontalFrom \| undefined` | | Overrides the behaviour of `orientation` property. | -| `orientation` | `orientation` | public | `SbbOrientation` | `'horizontal'` | Indicates the orientation of the checkboxes inside the ``. | | `checkboxes` | - | public | `SbbCheckboxElement[]` | | List of contained checkbox elements. | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `horizontalFrom` | `horizontal-from` | public | `SbbHorizontalFrom \| undefined` | | Overrides the behaviour of `orientation` property. | +| `orientation` | `orientation` | public | `SbbOrientation` | `'horizontal'` | Indicates the orientation of the checkboxes inside the ``. | +| `required` | `required` | public | `boolean` | `false` | Whether the checkbox group is required. | +| `size` | `size` | public | `SbbCheckboxSize` | `'m'` | Size variant, either m or s. | ## Slots diff --git a/src/components/checkbox/checkbox/readme.md b/src/components/checkbox/checkbox/readme.md index 9c45d680b9..4260d1478f 100644 --- a/src/components/checkbox/checkbox/readme.md +++ b/src/components/checkbox/checkbox/readme.md @@ -81,24 +81,24 @@ If you don't want the label to appear next to the checkbox, you can use `aria-la | Name | Attribute | Privacy | Type | Default | Description | | --------------- | ---------------- | ------- | --------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- | -| `indeterminate` | `indeterminate` | public | `boolean` | `false` | Whether the checkbox is indeterminate. | -| `iconPlacement` | `icon-placement` | public | `SbbIconPlacement` | `'end'` | The label position relative to the labelIcon. Defaults to end | -| `size` | `size` | public | `SbbCheckboxSize` | `'m'` | Label size variant, either m or s. | -| `group` | - | public | `SbbCheckboxGroupElement \| null` | `null` | Reference to the connected checkbox group. | | `checked` | `checked` | public | `boolean` | `false` | Whether the checkbox is checked. | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | -| `required` | `required` | public | `boolean` | `false` | Whether the component is required. | | `form` | - | public | `HTMLFormElement \| null` | | Returns the form owner of internals target element. | +| `group` | - | public | `SbbCheckboxGroupElement \| null` | `null` | Reference to the connected checkbox group. | +| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | +| `iconPlacement` | `icon-placement` | public | `SbbIconPlacement` | `'end'` | The label position relative to the labelIcon. Defaults to end | +| `indeterminate` | `indeterminate` | public | `boolean` | `false` | Whether the checkbox is indeterminate. | | `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | +| `required` | `required` | public | `boolean` | `false` | Whether the component is required. | +| `size` | `size` | public | `SbbCheckboxSize` | `'m'` | Label size variant, either m or s. | | `value` | `value` | public | `string \| null` | `null` | Value of the form element. | -| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | ## Events | Name | Type | Description | Inherited From | | ----------- | ------------------- | -------------------------------------------------------------------------------- | -------------- | -| `didChange` | `CustomEvent` | Deprecated. used for React. Will probably be removed once React 19 is available. | | | `change` | `Event` | Event fired on change. | | +| `didChange` | `CustomEvent` | Deprecated. used for React. Will probably be removed once React 19 is available. | | | `input` | `InputEvent` | Event fired on input. | | ## Slots diff --git a/src/components/chip/readme.md b/src/components/chip/readme.md index eeec5e75f7..d128dcddc7 100644 --- a/src/components/chip/readme.md +++ b/src/components/chip/readme.md @@ -23,8 +23,8 @@ and four different values for the `color` property (`charcoal`, `granite`, `whit | Name | Attribute | Privacy | Type | Default | Description | | ------- | --------- | ------- | ---------------------------------------------- | -------- | ------------------ | -| `size` | `size` | public | `'xxs' \| 'xs' \| 's'` | `'xxs'` | Size of the chip. | | `color` | `color` | public | `'milk' \| 'charcoal' \| 'white' \| 'granite'` | `'milk'` | Color of the chip. | +| `size` | `size` | public | `'xxs' \| 'xs' \| 's'` | `'xxs'` | Size of the chip. | ## Slots diff --git a/src/components/container/container/readme.md b/src/components/container/container/readme.md index c95449a8c7..d4c78f6394 100644 --- a/src/components/container/container/readme.md +++ b/src/components/container/container/readme.md @@ -30,9 +30,9 @@ The component has also four color variants that can be set using the `color` pro | Name | Attribute | Privacy | Type | Default | Description | | -------------------- | --------------------- | ------- | ------------------------------------ | --------- | ------------------------------------------------------------------------------- | -| `expanded` | `expanded` | public | `boolean` | `false` | Whether the container is expanded. | | `backgroundExpanded` | `background-expanded` | public | `boolean` | `false` | Whether the background color is shown on full container width on large screens. | | `color` | `color` | public | `'transparent' \| 'white' \| 'milk'` | `'white'` | Color of the container, like transparent, white etc. | +| `expanded` | `expanded` | public | `boolean` | `false` | Whether the container is expanded. | ## Slots diff --git a/src/components/container/sticky-bar/readme.md b/src/components/container/sticky-bar/readme.md index 95894353f0..9423b17241 100644 --- a/src/components/container/sticky-bar/readme.md +++ b/src/components/container/sticky-bar/readme.md @@ -30,8 +30,8 @@ Optionally the user can set the `color` property on the `sbb-sticky-bar` in orde | Name | Default | Description | | -------------------------------------------- | ---------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `--sbb-sticky-bar-padding-block` | `var(--sbb-spacing-responsive-xs)` | Block padding of the sticky bar. | | `--sbb-sticky-bar-bottom-overlapping-height` | `0px` | Define an additional area where the sticky bar overlaps the following content on the bottom. This area becomes visible when the sticky bar transitions from sticky to the normal document flow. | +| `--sbb-sticky-bar-padding-block` | `var(--sbb-spacing-responsive-xs)` | Block padding of the sticky bar. | | `--sbb-sticky-bar-z-index` | | To specify a custom stack order, the `z-index` can be overridden by defining this CSS variable. | ## Slots diff --git a/src/components/datepicker/datepicker-next-day/readme.md b/src/components/datepicker/datepicker-next-day/readme.md index 9e13d556a5..3424157db0 100644 --- a/src/components/datepicker/datepicker-next-day/readme.md +++ b/src/components/datepicker/datepicker-next-day/readme.md @@ -37,9 +37,9 @@ both standalone or within the `sbb-form-field`, they must have the same parent e | Name | Attribute | Privacy | Type | Default | Description | | ------------ | ------------- | ------- | --------------------------------------------- | ---------- | ------------------------------------------------ | -| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | | `datePicker` | `date-picker` | public | `string \| SbbDatepickerElement \| undefined` | | Datepicker reference. | -| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | +| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | | `name` | `name` | public | `string` | | The name of the button element. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | | `value` | `value` | public | `string` | | The value of the button element. | -| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | diff --git a/src/components/datepicker/datepicker-previous-day/readme.md b/src/components/datepicker/datepicker-previous-day/readme.md index 33ee7aa58e..b459a1667b 100644 --- a/src/components/datepicker/datepicker-previous-day/readme.md +++ b/src/components/datepicker/datepicker-previous-day/readme.md @@ -37,9 +37,9 @@ both standalone or within the `sbb-form-field`, they must have the same parent e | Name | Attribute | Privacy | Type | Default | Description | | ------------ | ------------- | ------- | --------------------------------------------- | ---------- | ------------------------------------------------ | -| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | | `datePicker` | `date-picker` | public | `string \| SbbDatepickerElement \| undefined` | | Datepicker reference. | -| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | +| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | | `name` | `name` | public | `string` | | The name of the button element. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | | `value` | `value` | public | `string` | | The value of the button element. | -| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | diff --git a/src/components/datepicker/datepicker/readme.md b/src/components/datepicker/datepicker/readme.md index 8a346724c7..8ab95b5b79 100644 --- a/src/components/datepicker/datepicker/readme.md +++ b/src/components/datepicker/datepicker/readme.md @@ -106,11 +106,11 @@ This is helpful if you need a specific state of the component. | Name | Attribute | Privacy | Type | Default | Description | | ------------ | ------------- | ------- | --------------------------------------------------- | ------- | ----------------------------------------------------------------- | -| `wide` | `wide` | public | `boolean` | `false` | If set to true, two months are displayed. | | `dateFilter` | `date-filter` | public | `(date: Date \| null) => boolean` | | A function used to filter out dates. | | `dateParser` | `date-parser` | public | `(value: string) => Date \| undefined \| undefined` | | A function used to parse string value into dates. | | `format` | `format` | public | `(date: Date) => string \| undefined` | | A function used to format dates into the preferred string format. | | `input` | `input` | public | `string \| HTMLElement \| undefined` | | Reference of the native input connected to the datepicker. | +| `wide` | `wide` | public | `boolean` | `false` | If set to true, two months are displayed. | ## Methods @@ -123,8 +123,8 @@ This is helpful if you need a specific state of the component. | Name | Type | Description | Inherited From | | ------------------- | --------------------------------------- | ----------------------------------------------------------------------------------- | -------------- | -| `didChange` | `CustomEvent` | Deprecated. used for React. Will probably be removed once React 19 is available. | | | `change` | `CustomEvent` | Notifies that the connected input has changes. | | -| `inputUpdated` | `CustomEvent` | Notifies that the attributes of the input connected to the datepicker have changes. | | | `datePickerUpdated` | `CustomEvent` | Notifies that the attributes of the datepicker have changes. | | +| `didChange` | `CustomEvent` | Deprecated. used for React. Will probably be removed once React 19 is available. | | +| `inputUpdated` | `CustomEvent` | Notifies that the attributes of the input connected to the datepicker have changes. | | | `validationChange` | `CustomEvent` | Emits whenever the internal validation state changes. | | diff --git a/src/components/dialog/dialog-actions/readme.md b/src/components/dialog/dialog-actions/readme.md index 7078f368d5..aed02fc518 100644 --- a/src/components/dialog/dialog-actions/readme.md +++ b/src/components/dialog/dialog-actions/readme.md @@ -17,10 +17,10 @@ The `sbb-dialog-actions` component extends the [sbb-action-group](/docs/componen | Name | Attribute | Privacy | Type | Default | Description | | ---------------- | ----------------- | ------- | ------------------------------------------- | -------------- | ----------------------------------------------------------------------------------------------------------------------- | | `alignGroup` | `align-group` | public | `'start' \| 'center' \| 'stretch' \| 'end'` | `'start'` | Set the slotted `` children's alignment. | -| `horizontalFrom` | `horizontal-from` | public | `SbbHorizontalFrom` | `'medium'` | Overrides the behaviour of `orientation` property. | -| `orientation` | `orientation` | public | `SbbOrientation` | `'horizontal'` | Indicates the orientation of the components inside the ``. | | `buttonSize` | `button-size` | public | `SbbButtonSize` | `'l'` | Size of the nested sbb-button instances. This will overwrite the size attribute of nested sbb-button instances. | +| `horizontalFrom` | `horizontal-from` | public | `SbbHorizontalFrom` | `'medium'` | Overrides the behaviour of `orientation` property. | | `linkSize` | `link-size` | public | `SbbLinkSize` | `'m'` | Size of the nested sbb-block-link instances. This will overwrite the size attribute of nested sbb-block-link instances. | +| `orientation` | `orientation` | public | `SbbOrientation` | `'horizontal'` | Indicates the orientation of the components inside the ``. | ## Slots diff --git a/src/components/dialog/dialog-title/readme.md b/src/components/dialog/dialog-title/readme.md index 4bdcc0838c..afc7e28bd4 100644 --- a/src/components/dialog/dialog-title/readme.md +++ b/src/components/dialog/dialog-title/readme.md @@ -44,13 +44,13 @@ If a back button is displayed it emits a `requestBackAction` event on click. | Name | Attribute | Privacy | Type | Default | Description | | ------------------------- | --------------------------- | ------- | ---------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `backButton` | `back-button` | public | `boolean` | `false` | Whether a back button is displayed next to the title. | -| `accessibilityCloseLabel` | `accessibility-close-label` | public | `\| string \| undefined` | | This will be forwarded as aria-label to the close button element. | | `accessibilityBackLabel` | `accessibility-back-label` | public | `\| string \| undefined` | | This will be forwarded as aria-label to the back button element. | +| `accessibilityCloseLabel` | `accessibility-close-label` | public | `\| string \| undefined` | | This will be forwarded as aria-label to the close button element. | +| `backButton` | `back-button` | public | `boolean` | `false` | Whether a back button is displayed next to the title. | | `hideOnScroll` | `hide-on-scroll` | public | `Breakpoint \| boolean` | `false` | Whether to hide the title up to a certain breakpoint. | | `level` | `level` | public | `SbbTitleLevel` | `'2'` | Title level | -| `visualLevel` | `visual-level` | public | `SbbTitleLevel \| undefined` | `'3'` | Visual level for the title. Optional, if not set, the value of level will be used. | | `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `visualLevel` | `visual-level` | public | `SbbTitleLevel \| undefined` | `'3'` | Visual level for the title. Optional, if not set, the value of level will be used. | | `visuallyHidden` | `visually-hidden` | public | `boolean \| undefined` | | Sometimes we need a title in the markup to present a proper hierarchy to the screen readers while we do not want to let that title appear visually. In this case we set visuallyHidden to true. | ## Events diff --git a/src/components/dialog/dialog/readme.md b/src/components/dialog/dialog/readme.md index 894d5c376a..a60ce12811 100644 --- a/src/components/dialog/dialog/readme.md +++ b/src/components/dialog/dialog/readme.md @@ -92,25 +92,25 @@ The `sbb-dialog` component may visually hide the title thanks to the `hideOnScro | Name | Attribute | Privacy | Type | Default | Description | | -------------------- | --------------------- | ------- | --------------------- | --------- | -------------------------------------------------------------------- | -| `backdropAction` | `backdrop-action` | public | `'close' \| 'none'` | `'close'` | Backdrop click action. | | `accessibilityLabel` | `accessibility-label` | public | `string \| undefined` | | This will be forwarded as aria-label to the relevant nested element. | +| `backdropAction` | `backdrop-action` | public | `'close' \| 'none'` | `'close'` | Backdrop click action. | | `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | ## Methods | Name | Privacy | Description | Parameters | Return | Inherited From | | ------- | ------- | -------------------------- | ---------------------------------- | ------ | -------------- | -| `open` | public | Opens the dialog element. | | `void` | | | `close` | public | Closes the dialog element. | `result: any, target: HTMLElement` | `any` | | +| `open` | public | Opens the dialog element. | | `void` | | ## Events | Name | Type | Description | Inherited From | | ----------- | ----------------------------------------- | ------------------------------------------------------------------------------- | -------------- | -| `willOpen` | `CustomEvent` | Emits whenever the `sbb-dialog` starts the opening transition. Can be canceled. | | +| `didClose` | `CustomEvent` | Emits whenever the `sbb-dialog` is closed. | | | `didOpen` | `CustomEvent` | Emits whenever the `sbb-dialog` is opened. | | | `willClose` | `CustomEvent` | Emits whenever the `sbb-dialog` begins the closing transition. Can be canceled. | | -| `didClose` | `CustomEvent` | Emits whenever the `sbb-dialog` is closed. | | +| `willOpen` | `CustomEvent` | Emits whenever the `sbb-dialog` starts the opening transition. Can be canceled. | | ## CSS Properties diff --git a/src/components/divider/readme.md b/src/components/divider/readme.md index c1954fd998..3d48c94959 100644 --- a/src/components/divider/readme.md +++ b/src/components/divider/readme.md @@ -18,5 +18,5 @@ It's also possible to display the component in `negative` variant using the self | Name | Attribute | Privacy | Type | Default | Description | | ------------- | ------------- | ------- | ---------------- | -------------- | --------------------------------------------------------------------------------------------- | -| `orientation` | `orientation` | public | `SbbOrientation` | `'horizontal'` | Orientation property with possible values 'horizontal' \| 'vertical'. Defaults to horizontal. | | `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `orientation` | `orientation` | public | `SbbOrientation` | `'horizontal'` | Orientation property with possible values 'horizontal' \| 'vertical'. Defaults to horizontal. | diff --git a/src/components/expansion-panel/expansion-panel-header/readme.md b/src/components/expansion-panel/expansion-panel-header/readme.md index fc8ff81662..f89d623337 100644 --- a/src/components/expansion-panel/expansion-panel-header/readme.md +++ b/src/components/expansion-panel/expansion-panel-header/readme.md @@ -38,11 +38,11 @@ When the element is clicked, the `toggleExpanded` event is emitted. | Name | Attribute | Privacy | Type | Default | Description | | ---------- | ----------- | ------- | --------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------- | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | | `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | -| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | | `name` | `name` | public | `string` | | The name of the button element. | +| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | | `value` | `value` | public | `string` | | The value of the button element. | -| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | ## Events diff --git a/src/components/expansion-panel/expansion-panel/readme.md b/src/components/expansion-panel/expansion-panel/readme.md index 1f6f3ad06b..b4ac8b1bd9 100644 --- a/src/components/expansion-panel/expansion-panel/readme.md +++ b/src/components/expansion-panel/expansion-panel/readme.md @@ -80,21 +80,21 @@ and the `aria-hidden` attribute on the content. | Name | Attribute | Privacy | Type | Default | Description | | ------------ | ------------- | ------- | ------------------------------------ | --------- | ---------------------------------------------------------------------- | -| `titleLevel` | `title-level` | public | `SbbTitleLevel \| null \| undefined` | | Heading level; if unset, a `div` will be rendered. | +| `borderless` | `borderless` | public | `boolean` | `false` | Whether the panel has no border. | | `color` | `color` | public | `'white' \| 'milk'` | `'white'` | The background color of the panel. | -| `expanded` | `expanded` | public | `boolean` | `false` | Whether the panel is expanded. | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the panel is disabled, so its expanded state can't be changed. | -| `borderless` | `borderless` | public | `boolean` | `false` | Whether the panel has no border. | +| `expanded` | `expanded` | public | `boolean` | `false` | Whether the panel is expanded. | | `size` | `size` | public | `'s' \| 'l'` | `'l'` | Size variant, either l or s. | +| `titleLevel` | `title-level` | public | `SbbTitleLevel \| null \| undefined` | | Heading level; if unset, a `div` will be rendered. | ## Events | Name | Type | Description | Inherited From | | ----------- | ------------------- | ----------------------------------------------------------------------- | -------------- | -| `willOpen` | `CustomEvent` | Emits whenever the `sbb-expansion-panel` starts the opening transition. | | +| `didClose` | `CustomEvent` | Emits whenever the `sbb-expansion-panel` is closed. | | | `didOpen` | `CustomEvent` | Emits whenever the `sbb-expansion-panel` is opened. | | | `willClose` | `CustomEvent` | Emits whenever the `sbb-expansion-panel` begins the closing transition. | | -| `didClose` | `CustomEvent` | Emits whenever the `sbb-expansion-panel` is closed. | | +| `willOpen` | `CustomEvent` | Emits whenever the `sbb-expansion-panel` starts the opening transition. | | ## Slots diff --git a/src/components/file-selector/readme.md b/src/components/file-selector/readme.md index ae14248fa8..35c95aa324 100644 --- a/src/components/file-selector/readme.md +++ b/src/components/file-selector/readme.md @@ -84,14 +84,14 @@ It's suggested to have a different value for each variant, e.g.: | Name | Attribute | Privacy | Type | Default | Description | | -------------------- | --------------------- | ------- | --------------------------- | ----------- | ------------------------------------------------------------------------ | -| `variant` | `variant` | public | `'default' \| 'dropzone'` | `'default'` | Whether the component has a dropzone area or not. | -| `multiple` | `multiple` | public | `boolean` | `false` | Whether more than one file can be selected. | -| `multipleMode` | `multiple-mode` | public | `'default' \| 'persistent'` | `'default'` | Whether the newly added files should override the previously added ones. | | `accept` | `accept` | public | `string \| undefined` | | A comma-separated list of allowed unique file type specifiers. | -| `titleContent` | `title-content` | public | `string \| undefined` | | The title displayed in `dropzone` variant. | | `accessibilityLabel` | `accessibility-label` | public | `string \| undefined` | | This will be forwarded as aria-label to the native input element. | -| `files` | - | public | `File[]` | | Gets the currently selected files. | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `files` | - | public | `File[]` | | Gets the currently selected files. | +| `multiple` | `multiple` | public | `boolean` | `false` | Whether more than one file can be selected. | +| `multipleMode` | `multiple-mode` | public | `'default' \| 'persistent'` | `'default'` | Whether the newly added files should override the previously added ones. | +| `titleContent` | `title-content` | public | `string \| undefined` | | The title displayed in `dropzone` variant. | +| `variant` | `variant` | public | `'default' \| 'dropzone'` | `'default'` | Whether the component has a dropzone area or not. | ## Methods diff --git a/src/components/footer/readme.md b/src/components/footer/readme.md index acfb2c9511..805e4aa2e6 100644 --- a/src/components/footer/readme.md +++ b/src/components/footer/readme.md @@ -77,11 +77,11 @@ to the content where needed (e.g. `sbb-link-list`, `sbb-link` and `sbb-divider`) | Name | Attribute | Privacy | Type | Default | Description | | ------------------------- | --------------------------- | ------- | ------------------------------ | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `variant` | `variant` | public | `'default' \| 'clock-columns'` | `'default'` | Variants to display the footer. The default, displays the content in regular block element approach. The clock-columns, used a css-grid for displaying the content over different breakpoints. | -| `expanded` | `expanded` | public | `boolean` | `false` | Whether to allow the footer content to stretch to full width. By default, the content has the appropriate page size. | | `accessibilityTitle` | `accessibility-title` | public | `string \| undefined` | | Footer title text, visually hidden, necessary for screen readers. | | `accessibilityTitleLevel` | `accessibility-title-level` | public | `SbbTitleLevel` | `'1'` | Level of the accessibility title, will be rendered as heading tag (e.g. h1). Defaults to level 1. | +| `expanded` | `expanded` | public | `boolean` | `false` | Whether to allow the footer content to stretch to full width. By default, the content has the appropriate page size. | | `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `variant` | `variant` | public | `'default' \| 'clock-columns'` | `'default'` | Variants to display the footer. The default, displays the content in regular block element approach. The clock-columns, used a css-grid for displaying the content over different breakpoints. | ## Slots diff --git a/src/components/form-field/form-field-clear/readme.md b/src/components/form-field/form-field-clear/readme.md index 1e430be0df..e8ee401c92 100644 --- a/src/components/form-field/form-field-clear/readme.md +++ b/src/components/form-field/form-field-clear/readme.md @@ -17,8 +17,8 @@ to provide the possibility to display a clear button which can clear the input v | Name | Attribute | Privacy | Type | Default | Description | | ---------- | ---------- | ------- | --------------------- | ---------- | ------------------------------------------------ | +| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | +| `name` | `name` | public | `string` | | The name of the button element. | | `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | | `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | -| `name` | `name` | public | `string` | | The name of the button element. | | `value` | `value` | public | `string` | | The value of the button element. | -| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | diff --git a/src/components/form-field/form-field/readme.md b/src/components/form-field/form-field/readme.md index 282d184c54..6f4780c08f 100644 --- a/src/components/form-field/form-field/readme.md +++ b/src/components/form-field/form-field/readme.md @@ -135,30 +135,30 @@ technology will announce errors when they appear. | Name | Attribute | Privacy | Type | Default | Description | | --------------- | ---------------- | ------- | ------------------------------------------------------------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `errorSpace` | `error-space` | public | `'none' \| 'reserve' \| undefined` | `'none'` | Whether to reserve space for an error message. `none` does not reserve any space. `reserve` does reserve one row for an error message. | -| `optional` | `optional` | public | `boolean \| undefined` | | Indicates whether the input is optional. | -| `size` | `size` | public | `'l' \| 'm' \| undefined` | `'m'` | Size variant, either l or m. | | `borderless` | `borderless` | public | `boolean` | `false` | Whether to display the form field without a border. | -| `width` | `width` | public | `'default' \| 'collapse'` | `'default'` | Defines the width of the component: - `default`: the component has defined width and min-width; - `collapse`: the component adapts itself to its inner input content. | -| `hiddenLabel` | `hidden-label` | public | `boolean` | `false` | Whether to visually hide the label. If hidden, screen readers will still read it. | +| `errorSpace` | `error-space` | public | `'none' \| 'reserve' \| undefined` | `'none'` | Whether to reserve space for an error message. `none` does not reserve any space. `reserve` does reserve one row for an error message. | | `floatingLabel` | `floating-label` | public | `boolean` | `false` | Whether the label should float. If activated, the placeholder of the input is hidden. | +| `hiddenLabel` | `hidden-label` | public | `boolean` | `false` | Whether to visually hide the label. If hidden, screen readers will still read it. | | `inputElement` | - | public | `HTMLInputElement \| HTMLSelectElement \| HTMLElement \| undefined` | | Returns the input element. | | `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `optional` | `optional` | public | `boolean \| undefined` | | Indicates whether the input is optional. | +| `size` | `size` | public | `'l' \| 'm' \| undefined` | `'m'` | Size variant, either l or m. | +| `width` | `width` | public | `'default' \| 'collapse'` | `'default'` | Defines the width of the component: - `default`: the component has defined width and min-width; - `collapse`: the component adapts itself to its inner input content. | ## Methods | Name | Privacy | Description | Parameters | Return | Inherited From | | ----------------- | ------- | ------------------------------------------------------------------------------------- | ---------- | ------------------------------------------------------------------- | -------------- | -| `reset` | public | Manually reset the form field. Currently, this only resets the floating label. | | `void` | | | `clear` | public | Manually clears the input value. It only works for inputs, selects are not supported. | | `void` | | | `getInputElement` | public | Returns the input element. | | `HTMLInputElement \| HTMLSelectElement \| HTMLElement \| undefined` | | +| `reset` | public | Manually reset the form field. Currently, this only resets the floating label. | | `void` | | ## Slots | Name | Description | | -------- | -------------------------------------------------------------------------- | | | Use this slot to render an input/select or a supported non-native element. | +| `error` | Use this slot to render an error. | | `label` | Use this slot to render a label. | | `prefix` | Use this slot to render an icon on the left side of the input. | | `suffix` | Use this slot to render an icon on the right side of the input. | -| `error` | Use this slot to render an error. | diff --git a/src/components/header/header-button/readme.md b/src/components/header/header-button/readme.md index 2d81c036ca..3900008a37 100644 --- a/src/components/header/header-button/readme.md +++ b/src/components/header/header-button/readme.md @@ -34,15 +34,15 @@ accepting its associated properties (`type`, `name`, `value` and `form`). | Name | Attribute | Privacy | Type | Default | Description | | ------------ | ------------- | ------- | --------------------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `expandFrom` | `expand-from` | public | `SbbHorizontalFrom` | `'medium'` | Used to set the minimum breakpoint from which the text is displayed. E.g. if set to 'large', the text will be visible for breakpoints large, wide, ultra, and hidden for all the others. | +| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | | `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | -| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | | `name` | `name` | public | `string` | | The name of the button element. | +| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | | `value` | `value` | public | `string` | | The value of the button element. | -| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | ## Slots | Name | Description | | ------ | --------------------------------------------------------------- | -| `icon` | Slot used to render the button icon. | | | Use the unnamed slot to add content to the `sbb-header-button`. | +| `icon` | Slot used to render the button icon. | diff --git a/src/components/header/header-link/readme.md b/src/components/header/header-link/readme.md index 489eda7382..ee5e2c2e10 100644 --- a/src/components/header/header-link/readme.md +++ b/src/components/header/header-link/readme.md @@ -33,17 +33,17 @@ accepting its associated properties (`href`, `target`, `rel` and `download`). | Name | Attribute | Privacy | Type | Default | Description | | -------------------- | --------------------- | ------- | --------------------------------------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `accessibilityLabel` | `accessibility-label` | public | `string \| undefined` | | This will be forwarded as aria-label to the inner anchor element. | +| `download` | `download` | public | `boolean \| undefined` | | Whether the browser will show the download dialog on click. | | `expandFrom` | `expand-from` | public | `SbbHorizontalFrom` | `'medium'` | Used to set the minimum breakpoint from which the text is displayed. E.g. if set to 'large', the text will be visible for breakpoints large, wide, ultra, and hidden for all the others. | -| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `href` | `href` | public | `string \| undefined` | | The href value you want to link to. | -| `target` | `target` | public | `LinkTargetType \| string \| undefined` | | Where to display the linked URL. | +| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `rel` | `rel` | public | `string \| undefined` | | The relationship of the linked URL as space-separated link types. | -| `download` | `download` | public | `boolean \| undefined` | | Whether the browser will show the download dialog on click. | -| `accessibilityLabel` | `accessibility-label` | public | `string \| undefined` | | This will be forwarded as aria-label to the inner anchor element. | +| `target` | `target` | public | `LinkTargetType \| string \| undefined` | | Where to display the linked URL. | ## Slots | Name | Description | | ------ | ------------------------------------------------------------- | -| `icon` | Slot used to render the link icon. | | | Use the unnamed slot to add content to the `sbb-header-link`. | +| `icon` | Slot used to render the link icon. | diff --git a/src/components/header/header/readme.md b/src/components/header/header/readme.md index dcfe222e40..ba65fea4a2 100644 --- a/src/components/header/header/readme.md +++ b/src/components/header/header/readme.md @@ -105,15 +105,15 @@ so they were wrapped into a `style` tag and added to the Storybook's configurati | Name | Attribute | Privacy | Type | Default | Description | | -------------- | ---------------- | ------- | ----------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------- | | `expanded` | `expanded` | public | `boolean` | `false` | Whether to allow the header content to stretch to full width. By default, the content has the appropriate page size. | -| `scrollOrigin` | `scroll-origin` | public | `string \| HTMLElement \| Document` | | The element's id or the element on which the scroll listener is attached. | | `hideOnScroll` | `hide-on-scroll` | public | `boolean` | `false` | Whether the header should hide and show on scroll. | +| `scrollOrigin` | `scroll-origin` | public | `string \| HTMLElement \| Document` | | The element's id or the element on which the scroll listener is attached. | ## CSS Properties | Name | Default | Description | | ---------------------- | ----------------------------------------------------------------------------------- | ------------------------------------------------ | -| `--sbb-header-z-index` | `10` | Can be used to modify the z-index of the header. | | `--sbb-header-height` | `zero-small:var(--sbb-spacing-fixed-14x);medium-ultra:var(--sbb-spacing-fixed-24x)` | Can be used to modify height of the header. | +| `--sbb-header-z-index` | `10` | Can be used to modify the z-index of the header. | ## Slots diff --git a/src/components/icon/readme.md b/src/components/icon/readme.md index fa586f5900..4b288c74d6 100644 --- a/src/components/icon/readme.md +++ b/src/components/icon/readme.md @@ -43,5 +43,5 @@ In thinking about accessibility, it is useful to place icon use into one of thre | Name | Default | Description | | ----------------------- | ------- | ----------------------------------- | -| `--sbb-icon-svg-width` | `auto` | Can be used to set a custom width. | | `--sbb-icon-svg-height` | `auto` | Can be used to set a custom height. | +| `--sbb-icon-svg-width` | `auto` | Can be used to set a custom width. | diff --git a/src/components/image/readme.md b/src/components/image/readme.md index 7b45a87f46..e50927d87b 100644 --- a/src/components/image/readme.md +++ b/src/components/image/readme.md @@ -10,7 +10,8 @@ The size can be set with `pictureSizesConfig`. | Name | Attribute | Privacy | Type | Default | Description | | -------------------- | ---------------------- | ------- | --------------------------------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `alt` | `alt` | public | `string \| undefined` | | An alt text is not always necessary (e.g. in teaser cards when additional link text is provided). In this case we can leave the value of the alt attribute blank, but the attribute itself still needs to be present. That way we can signal assistive technology, that they can skip the image. | -| `skipLqip` | `skip-lqip` | public | `boolean` | `false` | If set to false, we show a blurred version of the image as placeholder before the actual image shows up. This will help to improve the perceived loading performance. Read more about the idea of lqip here: https://medium.com/@imgix/lqip-your-images-for-fast-loading-2523d9ee4a62 | +| `aspectRatio` | `aspect-ratio` | public | `InterfaceImageAttributes['aspectRatio']` | `'16-9'` | Set an aspect ratio default is '16-9' (16/9) other values: 'free', '1-1', '1-2', '2-1', '2-3', '3-2', '3-4', '4-3', '4-5', '5-4', '9-16' | +| `borderRadius` | `border-radius` | public | `'default' \| 'none' \| 'round'` | `'default'` | Border radius of the image. Choose between a default radius, no radius and a completely round image. | | `caption` | `caption` | public | `string \| undefined` | | A caption can provide additional context to the image (e.g. descriptions and the like). Links will automatically receive tabindex=-1 if hideFromScreenreader is set to true. That way they will no longer become focusable. | | `copyright` | `copyright` | public | `string \| undefined` | | If a copyright text is provided, we will add it to the caption and create a structured data json-ld block with the copyright information. | | `copyrightHolder` | `copyright-holder` | public | `InterfaceImageAttributes['copyrightHolder']` | `'Organization'` | Copyright holder can either be an Organization or a Person | @@ -24,8 +25,7 @@ The size can be set with `pictureSizesConfig`. | `loading` | `loading` | public | `InterfaceImageAttributes['loading']` | `'eager'` | With the support of native image lazy loading, we can now decide whether we want to load the image immediately or only once it is close to the visible viewport. The value eager is best used for images within the initial viewport. We want to load these images as fast as possible to improve the Core Web Vitals values. lazy on the other hand works best for images which are further down the page or invisible during the loading of the initial viewport. | | `performanceMark` | `performance-mark` | public | `string \| undefined` | | With performance.mark you can log a timestamp associated with the name you define in performanceMark when a certain event is happening. In our case we will log the performance.mark into the PerformanceEntry API once the image is fully loaded. Performance monitoring tools like SpeedCurve or Lighthouse are then able to grab these entries from the PerformanceEntry API and give us additional information and insights about our page loading behaviour. We are then also able to monitor these values over a long period to see if our performance increases or decreases over time. Best to use lowercase strings here, separate words with underscores or dashes. | | `pictureSizesConfig` | `picture-sizes-config` | public | `string \| undefined` | | With the pictureSizesConfig object, you can pass in information into image about what kind of source elements should get rendered. mediaQueries accepts multiple Media Query entries which can get combined by defining a conditionOperator. Type is: stringified InterfaceImageAttributesSizesConfig-Object An example could look like this: { "breakpoints": \[ { "image": { "height": "675", "width": "1200" }, "mediaQueries": \[ { "conditionFeature": "min-width", "conditionFeatureValue": { "lyneDesignToken": true, "value": "sbb-breakpoint-large-min" }, "conditionOperator": false } ] }, { "image": { "height": "549", "width": "976" }, "mediaQueries": \[ { "conditionFeature": "min-width", "conditionFeatureValue": { "lyneDesignToken": true, "value": "sbb-breakpoint-small-min" }, "conditionOperator": false } ] }, { "image": { "height": "180", "width": "320" }, "mediaQueries": \[ { "conditionFeature": "max-width", "conditionFeatureValue": { "lyneDesignToken": true, "value": "sbb-breakpoint-micro-max" }, "conditionOperator": "and" }, { "conditionFeature": "orientation", "conditionFeatureValue": { "lyneDesignToken": false, "value": "landscape" }, "conditionOperator": false } ] } ] } | -| `borderRadius` | `border-radius` | public | `'default' \| 'none' \| 'round'` | `'default'` | Border radius of the image. Choose between a default radius, no radius and a completely round image. | -| `aspectRatio` | `aspect-ratio` | public | `InterfaceImageAttributes['aspectRatio']` | `'16-9'` | Set an aspect ratio default is '16-9' (16/9) other values: 'free', '1-1', '1-2', '2-1', '2-3', '3-2', '3-4', '4-3', '4-5', '5-4', '9-16' | +| `skipLqip` | `skip-lqip` | public | `boolean` | `false` | If set to false, we show a blurred version of the image as placeholder before the actual image shows up. This will help to improve the perceived loading performance. Read more about the idea of lqip here: https://medium.com/@imgix/lqip-your-images-for-fast-loading-2523d9ee4a62 | ## CSS Properties diff --git a/src/components/journey-header/readme.md b/src/components/journey-header/readme.md index 4d6d5e1333..846bf6f244 100644 --- a/src/components/journey-header/readme.md +++ b/src/components/journey-header/readme.md @@ -48,9 +48,9 @@ The following one will be read as (locale: ENG): `Connection from Point A to Poi | Name | Attribute | Privacy | Type | Default | Description | | ------------- | ------------- | ------- | -------------------------------- | ------- | --------------------------------------------------------------------------------- | -| `origin` | `origin` | public | `string` | | Origin location for the journey header. | | `destination` | `destination` | public | `string` | | Destination location for the journey header. | -| `roundTrip` | `round-trip` | public | `boolean \| undefined` | | Whether the journey is a round trip. If so, the icon changes to a round-trip one. | | `level` | `level` | public | `SbbTitleLevel` | `'3'` | Heading level of the journey header element (e.g. h1-h6). | -| `size` | `size` | public | `JourneyHeaderSize \| undefined` | `'m'` | Journey header size. | | `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `origin` | `origin` | public | `string` | | Origin location for the journey header. | +| `roundTrip` | `round-trip` | public | `boolean \| undefined` | | Whether the journey is a round trip. If so, the icon changes to a round-trip one. | +| `size` | `size` | public | `JourneyHeaderSize \| undefined` | `'m'` | Journey header size. | diff --git a/src/components/journey-summary/readme.md b/src/components/journey-summary/readme.md index 5c1ed15f46..471cf86d84 100644 --- a/src/components/journey-summary/readme.md +++ b/src/components/journey-summary/readme.md @@ -22,11 +22,11 @@ If the tripBack prop is passed to the component a second journey-summary, withou | Name | Attribute | Privacy | Type | Default | Description | | ------------------ | ------------------- | ------- | --------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------- | +| `disableAnimation` | `disable-animation` | public | `boolean \| undefined` | | Per default, the current location has a pulsating animation. You can disable the animation with this property. | +| `headerLevel` | `header-level` | public | `SbbTitleLevel` | `'3'` | Heading level of the journey header element (e.g. h1-h6). | +| `roundTrip` | `round-trip` | public | `boolean \| undefined` | | The RoundTrip prop. This prop controls if one or two arrows are displayed in the header. | | `trip` | `trip` | public | `InterfaceSbbJourneySummaryAttributes` | | The trip prop | | `tripBack` | `trip-back` | public | `InterfaceSbbJourneySummaryAttributes \| undefined` | | The tripBack prop | -| `roundTrip` | `round-trip` | public | `boolean \| undefined` | | The RoundTrip prop. This prop controls if one or two arrows are displayed in the header. | -| `headerLevel` | `header-level` | public | `SbbTitleLevel` | `'3'` | Heading level of the journey header element (e.g. h1-h6). | -| `disableAnimation` | `disable-animation` | public | `boolean \| undefined` | | Per default, the current location has a pulsating animation. You can disable the animation with this property. | ## Slots diff --git a/src/components/link-list/readme.md b/src/components/link-list/readme.md index 8b0a833eae..3f317772f5 100644 --- a/src/components/link-list/readme.md +++ b/src/components/link-list/readme.md @@ -72,12 +72,12 @@ The title will not be displayed in the horizontal orientation. | Name | Attribute | Privacy | Type | Default | Description | | ---------------- | ----------------- | ------- | -------------------------------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------- | -| `titleContent` | `title-content` | public | `string \| undefined` | | The title text we want to show before the list. | -| `titleLevel` | `title-level` | public | `SbbTitleLevel` | `'2'` | The semantic level of the title, e.g. 2 = h2. | -| `size` | `size` | public | `SbbLinkSize` | `'s'` | Text size of the nested sbb-block-link instances. This will overwrite the size attribute of nested sbb-block-link instances. | | `horizontalFrom` | `horizontal-from` | public | `SbbHorizontalFrom \| undefined` | | Selected breakpoint from which the list is rendered horizontally. | -| `orientation` | `orientation` | public | `SbbOrientation` | `'vertical'` | The orientation in which the list will be shown vertical or horizontal. | | `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `orientation` | `orientation` | public | `SbbOrientation` | `'vertical'` | The orientation in which the list will be shown vertical or horizontal. | +| `size` | `size` | public | `SbbLinkSize` | `'s'` | Text size of the nested sbb-block-link instances. This will overwrite the size attribute of nested sbb-block-link instances. | +| `titleContent` | `title-content` | public | `string \| undefined` | | The title text we want to show before the list. | +| `titleLevel` | `title-level` | public | `SbbTitleLevel` | `'2'` | The semantic level of the title, e.g. 2 = h2. | ## Slots diff --git a/src/components/link/block-link-button/readme.md b/src/components/link/block-link-button/readme.md index ce0325c11a..6d192a31ca 100644 --- a/src/components/link/block-link-button/readme.md +++ b/src/components/link/block-link-button/readme.md @@ -48,14 +48,14 @@ The component has three sizes (`xs`, `s`, which is the default, and `m`). | Name | Attribute | Privacy | Type | Default | Description | | --------------- | ---------------- | ------- | ------------------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------- | +| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | +| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `iconPlacement` | `icon-placement` | public | `SbbIconPlacement \| undefined` | `'start'` | Moves the icon to the end of the component if set to true. | +| `name` | `name` | public | `string` | | The name of the button element. | | `size` | `size` | public | `SbbLinkSize` | `'s'` | Text size, the link should get in the non-button variation. With inline variant, the text size adapts to where it is used. | -| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | -| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | | `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | -| `name` | `name` | public | `string` | | The name of the button element. | | `value` | `value` | public | `string` | | The value of the button element. | -| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | ## Slots diff --git a/src/components/link/block-link-static/readme.md b/src/components/link/block-link-static/readme.md index 024c9cb7c7..a28464260e 100644 --- a/src/components/link/block-link-static/readme.md +++ b/src/components/link/block-link-static/readme.md @@ -41,10 +41,10 @@ The component has three sizes (`xs`, `s`, which is the default, and `m`). | Name | Attribute | Privacy | Type | Default | Description | | --------------- | ---------------- | ------- | ------------------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------- | +| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `iconPlacement` | `icon-placement` | public | `SbbIconPlacement \| undefined` | `'start'` | Moves the icon to the end of the component if set to true. | | `size` | `size` | public | `SbbLinkSize` | `'s'` | Text size, the link should get in the non-button variation. With inline variant, the text size adapts to where it is used. | -| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | -| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | ## Slots diff --git a/src/components/link/block-link/readme.md b/src/components/link/block-link/readme.md index 7bfafa1e6c..08e2d24446 100644 --- a/src/components/link/block-link/readme.md +++ b/src/components/link/block-link/readme.md @@ -53,15 +53,15 @@ The component has three sizes (`xs`, `s`, which is the default, and `m`). | Name | Attribute | Privacy | Type | Default | Description | | -------------------- | --------------------- | ------- | --------------------------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------- | -| `iconPlacement` | `icon-placement` | public | `SbbIconPlacement \| undefined` | `'start'` | Moves the icon to the end of the component if set to true. | -| `size` | `size` | public | `SbbLinkSize` | `'s'` | Text size, the link should get in the non-button variation. With inline variant, the text size adapts to where it is used. | -| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | +| `accessibilityLabel` | `accessibility-label` | public | `string \| undefined` | | This will be forwarded as aria-label to the inner anchor element. | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `download` | `download` | public | `boolean \| undefined` | | Whether the browser will show the download dialog on click. | | `href` | `href` | public | `string \| undefined` | | The href value you want to link to. | -| `target` | `target` | public | `LinkTargetType \| string \| undefined` | | Where to display the linked URL. | +| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | +| `iconPlacement` | `icon-placement` | public | `SbbIconPlacement \| undefined` | `'start'` | Moves the icon to the end of the component if set to true. | | `rel` | `rel` | public | `string \| undefined` | | The relationship of the linked URL as space-separated link types. | -| `download` | `download` | public | `boolean \| undefined` | | Whether the browser will show the download dialog on click. | -| `accessibilityLabel` | `accessibility-label` | public | `string \| undefined` | | This will be forwarded as aria-label to the inner anchor element. | +| `size` | `size` | public | `SbbLinkSize` | `'s'` | Text size, the link should get in the non-button variation. With inline variant, the text size adapts to where it is used. | +| `target` | `target` | public | `LinkTargetType \| string \| undefined` | | Where to display the linked URL. | ## Slots diff --git a/src/components/link/link-button/readme.md b/src/components/link/link-button/readme.md index 17a98eac76..10b5ed0b10 100644 --- a/src/components/link/link-button/readme.md +++ b/src/components/link/link-button/readme.md @@ -34,13 +34,13 @@ accepting its associated properties (`type`, `name`, `value` and `form`). | Name | Attribute | Privacy | Type | Default | Description | | ---------- | ---------- | ------- | --------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------- | -| `size` | `size` | public | `SbbLinkSize` | `'s'` | Text size, the link should get in the non-button variation. With inline variant, the text size adapts to where it is used. | -| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | -| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | +| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | | `name` | `name` | public | `string` | | The name of the button element. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `size` | `size` | public | `SbbLinkSize` | `'s'` | Text size, the link should get in the non-button variation. With inline variant, the text size adapts to where it is used. | +| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | | `value` | `value` | public | `string` | | The value of the button element. | -| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | ## Slots diff --git a/src/components/link/link-static/readme.md b/src/components/link/link-static/readme.md index 5863e8c790..0030673401 100644 --- a/src/components/link/link-static/readme.md +++ b/src/components/link/link-static/readme.md @@ -23,9 +23,9 @@ The component can be displayed in `disabled` state using the self-named property | Name | Attribute | Privacy | Type | Default | Description | | ---------- | ---------- | ------- | ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------- | -| `size` | `size` | public | `SbbLinkSize` | `'s'` | Text size, the link should get in the non-button variation. With inline variant, the text size adapts to where it is used. | -| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `size` | `size` | public | `SbbLinkSize` | `'s'` | Text size, the link should get in the non-button variation. With inline variant, the text size adapts to where it is used. | ## Slots diff --git a/src/components/link/link/readme.md b/src/components/link/link/readme.md index cd60200b71..104ab5a486 100644 --- a/src/components/link/link/readme.md +++ b/src/components/link/link/readme.md @@ -33,14 +33,14 @@ accepting its associated properties (`href`, `target`, `rel` and `download`). | Name | Attribute | Privacy | Type | Default | Description | | -------------------- | --------------------- | ------- | --------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------- | -| `size` | `size` | public | `SbbLinkSize` | `'s'` | Text size, the link should get in the non-button variation. With inline variant, the text size adapts to where it is used. | -| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `accessibilityLabel` | `accessibility-label` | public | `string \| undefined` | | This will be forwarded as aria-label to the inner anchor element. | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `download` | `download` | public | `boolean \| undefined` | | Whether the browser will show the download dialog on click. | | `href` | `href` | public | `string \| undefined` | | The href value you want to link to. | -| `target` | `target` | public | `LinkTargetType \| string \| undefined` | | Where to display the linked URL. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | | `rel` | `rel` | public | `string \| undefined` | | The relationship of the linked URL as space-separated link types. | -| `download` | `download` | public | `boolean \| undefined` | | Whether the browser will show the download dialog on click. | -| `accessibilityLabel` | `accessibility-label` | public | `string \| undefined` | | This will be forwarded as aria-label to the inner anchor element. | +| `size` | `size` | public | `SbbLinkSize` | `'s'` | Text size, the link should get in the non-button variation. With inline variant, the text size adapts to where it is used. | +| `target` | `target` | public | `LinkTargetType \| string \| undefined` | | Where to display the linked URL. | ## Slots diff --git a/src/components/loading-indicator/readme.md b/src/components/loading-indicator/readme.md index f11e59d9da..d4fabc3a2a 100644 --- a/src/components/loading-indicator/readme.md +++ b/src/components/loading-indicator/readme.md @@ -51,6 +51,6 @@ and then append the `sbb-loading-indicator` on it after giving it the correct `a | Name | Attribute | Privacy | Type | Default | Description | | --------- | --------- | ------- | ----------------------------------- | ----------- | ------------------------------------------------------------------------------------------------- | -| `variant` | `variant` | public | `'window' \| 'circle' \| undefined` | | Variant of the loading indicator; `circle` is meant to be used inline, while `window` as overlay. | -| `size` | `size` | public | `'s' \| 'l'` | `'s'` | Size variant, either s or m. | | `color` | `color` | public | `'default' \| 'smoke' \| 'white'` | `'default'` | Color variant. | +| `size` | `size` | public | `'s' \| 'l'` | `'s'` | Size variant, either s or m. | +| `variant` | `variant` | public | `'window' \| 'circle' \| undefined` | | Variant of the loading indicator; `circle` is meant to be used inline, while `window` as overlay. | diff --git a/src/components/logo/readme.md b/src/components/logo/readme.md index 48a7d8d60b..9030e29a07 100644 --- a/src/components/logo/readme.md +++ b/src/components/logo/readme.md @@ -31,9 +31,9 @@ Possible values are `ideal` (default), `minimal` and `none`. | Name | Attribute | Privacy | Type | Default | Description | | -------------------- | --------------------- | ------- | -------------------------------- | --------- | ------------------------------------------------------------ | -| `protectiveRoom` | `protective-room` | public | `SbbProtectiveRoom \| undefined` | `'ideal'` | Visual protective room around logo. | | `accessibilityLabel` | `accessibility-label` | public | `string` | `'Logo'` | Accessibility label which will be forwarded to the SVG logo. | | `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `protectiveRoom` | `protective-room` | public | `SbbProtectiveRoom \| undefined` | `'ideal'` | Visual protective room around logo. | ## CSS Properties diff --git a/src/components/menu/menu-button/readme.md b/src/components/menu/menu-button/readme.md index 4cac4277b1..e57b7337db 100644 --- a/src/components/menu/menu-button/readme.md +++ b/src/components/menu/menu-button/readme.md @@ -32,13 +32,13 @@ accepting its associated properties (`type`, `name`, `value` and `form`). | Name | Attribute | Privacy | Type | Default | Description | | ---------- | ----------- | ------- | --------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------- | -| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | | `amount` | `amount` | public | `string \| undefined` | | Value shown as badge at component end. | +| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | | `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | -| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | | `name` | `name` | public | `string` | | The name of the button element. | +| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | | `value` | `value` | public | `string` | | The value of the button element. | -| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | ## CSS Properties diff --git a/src/components/menu/menu-link/readme.md b/src/components/menu/menu-link/readme.md index 7121709566..e421f3d899 100644 --- a/src/components/menu/menu-link/readme.md +++ b/src/components/menu/menu-link/readme.md @@ -32,14 +32,14 @@ accepting its associated properties (`href`, `target`, `rel` and `download`). | Name | Attribute | Privacy | Type | Default | Description | | -------------------- | --------------------- | ------- | --------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- | +| `accessibilityLabel` | `accessibility-label` | public | `string \| undefined` | | This will be forwarded as aria-label to the inner anchor element. | | `amount` | `amount` | public | `string \| undefined` | | Value shown as badge at component end. | -| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `download` | `download` | public | `boolean \| undefined` | | Whether the browser will show the download dialog on click. | | `href` | `href` | public | `string \| undefined` | | The href value you want to link to. | -| `target` | `target` | public | `LinkTargetType \| string \| undefined` | | Where to display the linked URL. | +| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `rel` | `rel` | public | `string \| undefined` | | The relationship of the linked URL as space-separated link types. | -| `download` | `download` | public | `boolean \| undefined` | | Whether the browser will show the download dialog on click. | -| `accessibilityLabel` | `accessibility-label` | public | `string \| undefined` | | This will be forwarded as aria-label to the inner anchor element. | +| `target` | `target` | public | `LinkTargetType \| string \| undefined` | | Where to display the linked URL. | ## CSS Properties diff --git a/src/components/menu/menu/readme.md b/src/components/menu/menu/readme.md index 30d942fa9e..38c8ed202e 100644 --- a/src/components/menu/menu/readme.md +++ b/src/components/menu/menu/readme.md @@ -63,24 +63,24 @@ to identify which actions are active and which are not. | Name | Attribute | Privacy | Type | Default | Description | | ------------------------ | -------------------------- | ------- | ------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------- | -| `trigger` | `trigger` | public | `string \| HTMLElement \| null` | `null` | The element that will trigger the menu overlay. Accepts both a string (id of an element) or an HTML element. | | `listAccessibilityLabel` | `list-accessibility-label` | public | `string \| undefined` | | This will be forwarded as aria-label to the inner list. Used only if the menu automatically renders the actions inside as a list. | +| `trigger` | `trigger` | public | `string \| HTMLElement \| null` | `null` | The element that will trigger the menu overlay. Accepts both a string (id of an element) or an HTML element. | ## Methods | Name | Privacy | Description | Parameters | Return | Inherited From | | ------- | ------- | -------------------------------- | ---------- | ------ | -------------- | -| `open` | public | Opens the menu on trigger click. | | `void` | | | `close` | public | Closes the menu. | | `void` | | +| `open` | public | Opens the menu on trigger click. | | `void` | | ## Events | Name | Type | Description | Inherited From | | ----------- | ------------------- | ----------------------------------------------------------------------------- | -------------- | -| `willOpen` | `CustomEvent` | Emits whenever the `sbb-menu` starts the opening transition. Can be canceled. | | +| `didClose` | `CustomEvent` | Emits whenever the `sbb-menu` is closed. | | | `didOpen` | `CustomEvent` | Emits whenever the `sbb-menu` is opened. | | | `willClose` | `CustomEvent` | Emits whenever the `sbb-menu` begins the closing transition. Can be canceled. | | -| `didClose` | `CustomEvent` | Emits whenever the `sbb-menu` is closed. | | +| `willOpen` | `CustomEvent` | Emits whenever the `sbb-menu` starts the opening transition. Can be canceled. | | ## CSS Properties diff --git a/src/components/message/readme.md b/src/components/message/readme.md index a1121d6974..38c028428f 100644 --- a/src/components/message/readme.md +++ b/src/components/message/readme.md @@ -38,8 +38,8 @@ by the used components (e.g. `alt-text` and `aria-label`). | Name | Description | | ---------- | --------------------------------------------------------- | +| `action` | Use this slot to provide a sbb-button. | | `image` | Use this slot to provide a sbb-image component. | -| `title` | Use this slot to provide title text for the component. | -| `subtitle` | Use this slot to provide a subtitle, must be a paragraph. | | `legend` | Use this slot to provide a legend, must be a paragraph. | -| `action` | Use this slot to provide a sbb-button. | +| `subtitle` | Use this slot to provide a subtitle, must be a paragraph. | +| `title` | Use this slot to provide title text for the component. | diff --git a/src/components/navigation/navigation-button/readme.md b/src/components/navigation/navigation-button/readme.md index 685a8b0a1b..5247330468 100644 --- a/src/components/navigation/navigation-button/readme.md +++ b/src/components/navigation/navigation-button/readme.md @@ -33,14 +33,14 @@ The component has three different sizes, which can be changed using the `size` p | Name | Attribute | Privacy | Type | Default | Description | | ------------------ | --------- | ------- | ------------------------------------------ | ---------- | ----------------------------------------------------------- | -| `size` | `size` | public | `SbbNavigationActionSize \| undefined` | `'l'` | Action size variant. | | `connectedSection` | - | public | `SbbNavigationSectionElement \| undefined` | | The section that is beign controlled by the action, if any. | +| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | | `marker` | - | public | `SbbNavigationMarkerElement \| null` | | The navigation marker in which the action is nested. | +| `name` | `name` | public | `string` | | The name of the button element. | | `section` | - | public | `SbbNavigationSectionElement \| null` | | The section in which the action is nested. | +| `size` | `size` | public | `SbbNavigationActionSize \| undefined` | `'l'` | Action size variant. | | `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | -| `name` | `name` | public | `string` | | The name of the button element. | | `value` | `value` | public | `string` | | The value of the button element. | -| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | ## Slots diff --git a/src/components/navigation/navigation-link/readme.md b/src/components/navigation/navigation-link/readme.md index b9fb86ab66..aed0eb37ef 100644 --- a/src/components/navigation/navigation-link/readme.md +++ b/src/components/navigation/navigation-link/readme.md @@ -33,15 +33,15 @@ The component has three different sizes, which can be changed using the `size` p | Name | Attribute | Privacy | Type | Default | Description | | -------------------- | --------------------- | ------- | ------------------------------------------ | ------- | ----------------------------------------------------------------- | -| `size` | `size` | public | `SbbNavigationActionSize \| undefined` | `'l'` | Action size variant. | +| `accessibilityLabel` | `accessibility-label` | public | `string \| undefined` | | This will be forwarded as aria-label to the inner anchor element. | | `connectedSection` | - | public | `SbbNavigationSectionElement \| undefined` | | The section that is beign controlled by the action, if any. | +| `download` | `download` | public | `boolean \| undefined` | | Whether the browser will show the download dialog on click. | +| `href` | `href` | public | `string \| undefined` | | The href value you want to link to. | | `marker` | - | public | `SbbNavigationMarkerElement \| null` | | The navigation marker in which the action is nested. | +| `rel` | `rel` | public | `string \| undefined` | | The relationship of the linked URL as space-separated link types. | | `section` | - | public | `SbbNavigationSectionElement \| null` | | The section in which the action is nested. | -| `href` | `href` | public | `string \| undefined` | | The href value you want to link to. | +| `size` | `size` | public | `SbbNavigationActionSize \| undefined` | `'l'` | Action size variant. | | `target` | `target` | public | `LinkTargetType \| string \| undefined` | | Where to display the linked URL. | -| `rel` | `rel` | public | `string \| undefined` | | The relationship of the linked URL as space-separated link types. | -| `download` | `download` | public | `boolean \| undefined` | | Whether the browser will show the download dialog on click. | -| `accessibilityLabel` | `accessibility-label` | public | `string \| undefined` | | This will be forwarded as aria-label to the inner anchor element. | ## Slots diff --git a/src/components/navigation/navigation-marker/readme.md b/src/components/navigation/navigation-marker/readme.md index c840310e79..5017aa67a6 100644 --- a/src/components/navigation/navigation-marker/readme.md +++ b/src/components/navigation/navigation-marker/readme.md @@ -35,8 +35,8 @@ Possible values are `l` (default) and `s`. | Name | Privacy | Description | Parameters | Return | Inherited From | | -------- | ------- | ----------- | ---------------------------------------------------------------- | ------ | -------------- | -| `select` | public | | `action: SbbNavigationButtonElement \| SbbNavigationLinkElement` | `void` | | | `reset` | public | | | `void` | | +| `select` | public | | `action: SbbNavigationButtonElement \| SbbNavigationLinkElement` | `void` | | ## Slots diff --git a/src/components/navigation/navigation-section/readme.md b/src/components/navigation/navigation-section/readme.md index f016187c47..e86cfcceac 100644 --- a/src/components/navigation/navigation-section/readme.md +++ b/src/components/navigation/navigation-section/readme.md @@ -28,17 +28,17 @@ Similarly, if a navigation action is marked to indicate a selected option (e.g., | Name | Attribute | Privacy | Type | Default | Description | | ------------------------ | -------------------------- | ------- | ------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------ | +| `accessibilityBackLabel` | `accessibility-back-label` | public | `\| string \| undefined` | | This will be forwarded as aria-label to the back button element. | +| `accessibilityLabel` | `accessibility-label` | public | `string \| undefined` | | This will be forwarded as aria-label to the nav element and is read as a title of the navigation-section. | | `titleContent` | `title-content` | public | `string \| undefined` | | The label to be shown before the action list. | | `trigger` | `trigger` | public | `string \| HTMLElement \| null` | `null` | The element that will trigger the navigation section. Accepts both a string (id of an element) or an HTML element. | -| `accessibilityLabel` | `accessibility-label` | public | `string \| undefined` | | This will be forwarded as aria-label to the nav element and is read as a title of the navigation-section. | -| `accessibilityBackLabel` | `accessibility-back-label` | public | `\| string \| undefined` | | This will be forwarded as aria-label to the back button element. | ## Methods | Name | Privacy | Description | Parameters | Return | Inherited From | | ------- | ------- | ---------------------------------------------- | ---------- | ------ | -------------- | -| `open` | public | Opens the navigation section on trigger click. | | `void` | | | `close` | public | Closes the navigation section. | | `void` | | +| `open` | public | Opens the navigation section on trigger click. | | `void` | | ## Slots diff --git a/src/components/navigation/navigation/readme.md b/src/components/navigation/navigation/readme.md index 89fe4fd4fe..35cea46a4a 100644 --- a/src/components/navigation/navigation/readme.md +++ b/src/components/navigation/navigation/readme.md @@ -60,25 +60,25 @@ Similarly, if a navigation action is marked to indicate a selected option (e.g., | Name | Attribute | Privacy | Type | Default | Description | | ------------------------- | --------------------------- | ------- | ------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------- | -| `trigger` | `trigger` | public | `string \| HTMLElement \| null` | `null` | The element that will trigger the navigation. Accepts both a string (id of an element) or an HTML element. | | `accessibilityCloseLabel` | `accessibility-close-label` | public | `\| string \| undefined` | | This will be forwarded as aria-label to the close button element. | | `activeNavigationSection` | - | public | `HTMLElement \| null` | `null` | | +| `trigger` | `trigger` | public | `string \| HTMLElement \| null` | `null` | The element that will trigger the navigation. Accepts both a string (id of an element) or an HTML element. | ## Methods | Name | Privacy | Description | Parameters | Return | Inherited From | | ------- | ------- | ---------------------- | ---------- | ------ | -------------- | -| `open` | public | Opens the navigation. | | `void` | | | `close` | public | Closes the navigation. | | `void` | | +| `open` | public | Opens the navigation. | | `void` | | ## Events | Name | Type | Description | Inherited From | | ----------- | ------------------- | ----------------------------------------------------------------------------------- | -------------- | -| `willOpen` | `CustomEvent` | Emits whenever the `sbb-navigation` begins the opening transition. Can be canceled. | | +| `didClose` | `CustomEvent` | Emits whenever the `sbb-navigation` is closed. | | | `didOpen` | `CustomEvent` | Emits whenever the `sbb-navigation` is opened. | | | `willClose` | `CustomEvent` | Emits whenever the `sbb-navigation` begins the closing transition. Can be canceled. | | -| `didClose` | `CustomEvent` | Emits whenever the `sbb-navigation` is closed. | | +| `willOpen` | `CustomEvent` | Emits whenever the `sbb-navigation` begins the opening transition. Can be canceled. | | ## CSS Properties diff --git a/src/components/notification/readme.md b/src/components/notification/readme.md index 00d6245f0c..1514f12e88 100644 --- a/src/components/notification/readme.md +++ b/src/components/notification/readme.md @@ -82,12 +82,12 @@ As a base rule, opening animations should be active if a notification arrives af | Name | Attribute | Privacy | Type | Default | Description | | -------------- | --------------- | ------- | ------------------------------------------ | -------- | ------------------------------------------------------------------------------------------------------- | -| `type` | `type` | public | `'info' \| 'success' \| 'warn' \| 'error'` | `'info'` | The type of the notification. | -| `titleContent` | `title-content` | public | `string \| undefined` | | Content of title. | -| `titleLevel` | `title-level` | public | `SbbTitleLevel` | `'3'` | Level of title, it will be rendered as heading tag (e.g. h3). Defaults to level 3. | +| `animation` | `animation` | public | `'open' \| 'close' \| 'all' \| 'none'` | `'all'` | The enabled animations. | | `readonly` | `readonly` | public | `boolean` | `false` | Whether the notification is readonly. In readonly mode, there is no dismiss button offered to the user. | | `size` | `size` | public | `'m' \| 's'` | `'m'` | Size variant, either s or m. | -| `animation` | `animation` | public | `'open' \| 'close' \| 'all' \| 'none'` | `'all'` | The enabled animations. | +| `titleContent` | `title-content` | public | `string \| undefined` | | Content of title. | +| `titleLevel` | `title-level` | public | `SbbTitleLevel` | `'3'` | Level of title, it will be rendered as heading tag (e.g. h3). Defaults to level 3. | +| `type` | `type` | public | `'info' \| 'success' \| 'warn' \| 'error'` | `'info'` | The type of the notification. | ## Methods @@ -99,10 +99,10 @@ As a base rule, opening animations should be active if a notification arrives af | Name | Type | Description | Inherited From | | ----------- | ------------------- | -------------------------------------------------------------------- | -------------- | -| `willOpen` | `CustomEvent` | Emits whenever the `sbb-notification` starts the opening transition. | | +| `didClose` | `CustomEvent` | Emits whenever the `sbb-notification` is closed. | | | `didOpen` | `CustomEvent` | Emits whenever the `sbb-notification` is opened. | | | `willClose` | `CustomEvent` | Emits whenever the `sbb-notification` begins the closing transition. | | -| `didClose` | `CustomEvent` | Emits whenever the `sbb-notification` is closed. | | +| `willOpen` | `CustomEvent` | Emits whenever the `sbb-notification` starts the opening transition. | | ## CSS Properties diff --git a/src/components/option/optgroup/readme.md b/src/components/option/optgroup/readme.md index 4a6530833b..bfaf2c4683 100644 --- a/src/components/option/optgroup/readme.md +++ b/src/components/option/optgroup/readme.md @@ -35,8 +35,8 @@ The component has a `disabled` property which sets all the `sbb-option` in the g | Name | Attribute | Privacy | Type | Default | Description | | ---------- | ---------- | ------- | --------- | ------- | ---------------------------------- | -| `label` | `label` | public | `string` | | Option group label. | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `label` | `label` | public | `string` | | Option group label. | ## Slots diff --git a/src/components/option/option/readme.md b/src/components/option/option/readme.md index b0a5aa6d51..757fc41f85 100644 --- a/src/components/option/option/readme.md +++ b/src/components/option/option/readme.md @@ -60,18 +60,18 @@ If the label slot contains only a **text node**, it is possible to search for te | Name | Attribute | Privacy | Type | Default | Description | | ---------- | ----------- | ------- | ---------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- | -| `value` | `value` | public | `string` | | Value of the option. | | `active` | `active` | public | `boolean \| undefined` | | Whether the option is currently active. | -| `selected` | `selected` | public | `boolean` | | Whether the option is selected. | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | | `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | +| `selected` | `selected` | public | `boolean` | | Whether the option is selected. | +| `value` | `value` | public | `string` | | Value of the option. | ## Events | Name | Type | Description | Inherited From | | ----------------------- | ------------------- | ----------------------------------------------- | -------------- | -| `optionSelectionChange` | `CustomEvent` | Emits when the option selection status changes. | | | `optionSelected` | `CustomEvent` | Emits when an option was selected by user. | | +| `optionSelectionChange` | `CustomEvent` | Emits when the option selection status changes. | | ## CSS Properties diff --git a/src/components/overlay/readme.md b/src/components/overlay/readme.md index acfb9b7ba5..a16db17cfd 100644 --- a/src/components/overlay/readme.md +++ b/src/components/overlay/readme.md @@ -76,29 +76,29 @@ When using a button to trigger the overlay, ensure to manage the appropriate ARI | Name | Attribute | Privacy | Type | Default | Description | | ------------------------- | --------------------------- | ------- | ---------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------- | -| `expanded` | `expanded` | public | `boolean` | `false` | Whether to allow the overlay content to stretch to full width. By default, the content has the appropriate page size. | -| `backButton` | `back-button` | public | `boolean` | `false` | Whether a back button is displayed next to the title. | -| `accessibilityCloseLabel` | `accessibility-close-label` | public | `\| string \| undefined` | | This will be forwarded as aria-label to the close button element. | | `accessibilityBackLabel` | `accessibility-back-label` | public | `\| string \| undefined` | | This will be forwarded as aria-label to the back button element. | +| `accessibilityCloseLabel` | `accessibility-close-label` | public | `\| string \| undefined` | | This will be forwarded as aria-label to the close button element. | | `accessibilityLabel` | `accessibility-label` | public | `string \| undefined` | | This will be forwarded as aria-label adn will describe the purpose of the dialog. | +| `backButton` | `back-button` | public | `boolean` | `false` | Whether a back button is displayed next to the title. | +| `expanded` | `expanded` | public | `boolean` | `false` | Whether to allow the overlay content to stretch to full width. By default, the content has the appropriate page size. | | `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | ## Methods | Name | Privacy | Description | Parameters | Return | Inherited From | | ------- | ------- | --------------------------- | ---------------------------------- | ------ | -------------- | -| `open` | public | Opens the overlay element. | | `void` | | | `close` | public | Closes the overlay element. | `result: any, target: HTMLElement` | `any` | | +| `open` | public | Opens the overlay element. | | `void` | | ## Events | Name | Type | Description | Inherited From | | ------------------- | ------------------------------------------ | -------------------------------------------------------------------------------- | -------------- | -| `willOpen` | `CustomEvent` | Emits whenever the `sbb-overlay` starts the opening transition. Can be canceled. | | -| `didOpen` | `CustomEvent` | Emits whenever the `sbb-overlay` is opened. | | -| `willClose` | `CustomEvent` | Emits whenever the `sbb-overlay` begins the closing transition. Can be canceled. | | | `didClose` | `CustomEvent` | Emits whenever the `sbb-overlay` is closed. | | +| `didOpen` | `CustomEvent` | Emits whenever the `sbb-overlay` is opened. | | | `requestBackAction` | `CustomEvent` | Emits whenever the back button is clicked. | | +| `willClose` | `CustomEvent` | Emits whenever the `sbb-overlay` begins the closing transition. Can be canceled. | | +| `willOpen` | `CustomEvent` | Emits whenever the `sbb-overlay` starts the opening transition. Can be canceled. | | ## CSS Properties diff --git a/src/components/pearl-chain-time/readme.md b/src/components/pearl-chain-time/readme.md index ba81f9cb4e..c943e428c2 100644 --- a/src/components/pearl-chain-time/readme.md +++ b/src/components/pearl-chain-time/readme.md @@ -56,9 +56,9 @@ This is helpful if you need a specific state of the component. | Name | Attribute | Privacy | Type | Default | Description | | ------------------ | ------------------- | ------- | ---------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| `legs` | `legs` | public | `(Leg \| PtRideLeg)[]` | | define the legs of the pearl-chain. Format: `{"legs": \[{"duration": 25}, ...]}` `duration` in minutes. Duration of the leg is relative to the total travel time. Example: departure 16:30, change at 16:40, arrival at 17:00. So the change should have a duration of 33.33%. | -| `departureTime` | `departure-time` | public | `string \| undefined` | | Prop to render the departure time - will be formatted as "H:mm" | | `arrivalTime` | `arrival-time` | public | `string \| undefined` | | Prop to render the arrival time - will be formatted as "H:mm" | -| `departureWalk` | `departure-walk` | public | `number \| undefined` | | Optional prop to render the walk time (in minutes) before departure | | `arrivalWalk` | `arrival-walk` | public | `number \| undefined` | | Optional prop to render the walk time (in minutes) after arrival | +| `departureTime` | `departure-time` | public | `string \| undefined` | | Prop to render the departure time - will be formatted as "H:mm" | +| `departureWalk` | `departure-walk` | public | `number \| undefined` | | Optional prop to render the walk time (in minutes) before departure | | `disableAnimation` | `disable-animation` | public | `boolean \| undefined` | | Per default, the current location has a pulsating animation. You can disable the animation with this property. | +| `legs` | `legs` | public | `(Leg \| PtRideLeg)[]` | | define the legs of the pearl-chain. Format: `{"legs": \[{"duration": 25}, ...]}` `duration` in minutes. Duration of the leg is relative to the total travel time. Example: departure 16:30, change at 16:40, arrival at 17:00. So the change should have a duration of 33.33%. | diff --git a/src/components/pearl-chain-vertical-item/readme.md b/src/components/pearl-chain-vertical-item/readme.md index bb5f9fae49..3218e7c56f 100644 --- a/src/components/pearl-chain-vertical-item/readme.md +++ b/src/components/pearl-chain-vertical-item/readme.md @@ -38,8 +38,8 @@ The slots themselves are unstyled, so that they can be used in various ways. | Name | Attribute | Privacy | Type | Default | Description | | ---------------------------------- | -------------------------------------- | ------- | ---------------------------------- | ------- | --------------------------------------------------------------------------- | -| `pearlChainVerticalItemAttributes` | `pearl-chain-vertical-item-attributes` | public | `PearlChainVerticalItemAttributes` | | The pearlChainVerticalItemAttributes Prop for styling the bullets and line. | | `disableAnimation` | `disable-animation` | public | `boolean \| undefined` | | If true, the position won't be animated. | +| `pearlChainVerticalItemAttributes` | `pearl-chain-vertical-item-attributes` | public | `PearlChainVerticalItemAttributes` | | The pearlChainVerticalItemAttributes Prop for styling the bullets and line. | ## Slots diff --git a/src/components/pearl-chain/readme.md b/src/components/pearl-chain/readme.md index a1add7e233..4b9532c8ae 100644 --- a/src/components/pearl-chain/readme.md +++ b/src/components/pearl-chain/readme.md @@ -57,5 +57,5 @@ This is helpful if you need a specific state of the component. | Name | Attribute | Privacy | Type | Default | Description | | ------------------ | ------------------- | ------- | ----------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| `legs` | `legs` | public | `(Leg \| PtRideLeg)[] \| undefined` | | Define the legs of the pearl-chain. Format: `{"legs": \[{"duration": 25}, ...]}` `duration` in minutes. Duration of the leg is relative to the total travel time. Example: departure 16:30, change at 16:40, arrival at 17:00. So the change should have a duration of 33.33%. | | `disableAnimation` | `disable-animation` | public | `boolean \| undefined` | | Per default, the current location has a pulsating animation. You can disable the animation with this property. | +| `legs` | `legs` | public | `(Leg \| PtRideLeg)[] \| undefined` | | Define the legs of the pearl-chain. Format: `{"legs": \[{"duration": 25}, ...]}` `duration` in minutes. Duration of the leg is relative to the total travel time. Example: departure 16:30, change at 16:40, arrival at 17:00. So the change should have a duration of 33.33%. | diff --git a/src/components/popover/popover-trigger/readme.md b/src/components/popover/popover-trigger/readme.md index 610967f92d..aa2469e0c5 100644 --- a/src/components/popover/popover-trigger/readme.md +++ b/src/components/popover/popover-trigger/readme.md @@ -74,12 +74,12 @@ associate the popover trigger with the popover via `aria-describedby` and an `id | Name | Attribute | Privacy | Type | Default | Description | | ---------- | ----------- | ------- | --------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------- | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | -| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | | `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | -| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | | `name` | `name` | public | `string` | | The name of the button element. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | | `value` | `value` | public | `string` | | The value of the button element. | -| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | ## Slots diff --git a/src/components/popover/popover/readme.md b/src/components/popover/popover/readme.md index fb785d84e4..cf0b83f65e 100644 --- a/src/components/popover/popover/readme.md +++ b/src/components/popover/popover/readme.md @@ -80,28 +80,28 @@ Overlays should always contain a heading level 2 title. It can be visually hidde | Name | Attribute | Privacy | Type | Default | Description | | ------------------------- | --------------------------- | ------- | ------------------------------------ | ------- | --------------------------------------------------------------------------------------------------------------- | -| `trigger` | `trigger` | public | `string \| HTMLElement \| undefined` | | The element that will trigger the popover overlay. Accepts both a string (id of an element) or an HTML element. | +| `accessibilityCloseLabel` | `accessibility-close-label` | public | `\| string \| undefined` | | This will be forwarded as aria-label to the close button element. | +| `closeDelay` | `close-delay` | public | `number` | `0` | Close the popover after a certain delay. | | `hideCloseButton` | `hide-close-button` | public | `boolean \| undefined` | `false` | Whether the close button should be hidden. | | `hoverTrigger` | `hover-trigger` | public | `boolean` | `false` | Whether the popover should be triggered on hover. | | `openDelay` | `open-delay` | public | `number` | `0` | Open the popover after a certain delay. | -| `closeDelay` | `close-delay` | public | `number` | `0` | Close the popover after a certain delay. | -| `accessibilityCloseLabel` | `accessibility-close-label` | public | `\| string \| undefined` | | This will be forwarded as aria-label to the close button element. | +| `trigger` | `trigger` | public | `string \| HTMLElement \| undefined` | | The element that will trigger the popover overlay. Accepts both a string (id of an element) or an HTML element. | ## Methods | Name | Privacy | Description | Parameters | Return | Inherited From | | ------- | ------- | ----------------------------------- | --------------------- | ------ | -------------- | -| `open` | public | Opens the popover on trigger click. | | `void` | | | `close` | public | Closes the popover. | `target: HTMLElement` | `void` | | +| `open` | public | Opens the popover on trigger click. | | `void` | | ## Events | Name | Type | Description | Inherited From | | ----------- | ------------------------------------------- | -------------------------------------------------------------------------------- | -------------- | -| `willOpen` | `CustomEvent` | Emits whenever the `sbb-popover` starts the opening transition. Can be canceled. | | +| `didClose` | `CustomEvent<{ closeTarget: HTMLElement }>` | Emits whenever the `sbb-popover` is closed. | | | `didOpen` | `CustomEvent` | Emits whenever the `sbb-popover` is opened. | | | `willClose` | `CustomEvent<{ closeTarget: HTMLElement }>` | Emits whenever the `sbb-popover` begins the closing transition. Can be canceled. | | -| `didClose` | `CustomEvent<{ closeTarget: HTMLElement }>` | Emits whenever the `sbb-popover` is closed. | | +| `willOpen` | `CustomEvent` | Emits whenever the `sbb-popover` starts the opening transition. Can be canceled. | | ## CSS Properties diff --git a/src/components/radio-button/radio-button-group/readme.md b/src/components/radio-button/radio-button-group/readme.md index 0a6529c62d..dc5efca058 100644 --- a/src/components/radio-button/radio-button-group/readme.md +++ b/src/components/radio-button/radio-button-group/readme.md @@ -72,20 +72,20 @@ In order to ensure readability for screen-readers, please provide an `aria-label | Name | Attribute | Privacy | Type | Default | Description | | --------------------- | ----------------------- | ------- | -------------------------------- | -------------- | --------------------------------------------------------- | | `allowEmptySelection` | `allow-empty-selection` | public | `boolean` | `false` | Whether the radios can be deselected. | -| `required` | `required` | public | `boolean` | `false` | Whether the radio group is required. | -| `value` | `value` | public | `any \| null \| undefined` | | The value of the radio group. | -| `size` | `size` | public | `SbbRadioButtonSize` | `'m'` | Size variant, either m or s. | +| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | | `horizontalFrom` | `horizontal-from` | public | `SbbHorizontalFrom \| undefined` | | Overrides the behaviour of `orientation` property. | | `orientation` | `orientation` | public | `SbbOrientation` | `'horizontal'` | Radio group's orientation, either horizontal or vertical. | | `radioButtons` | - | public | `SbbRadioButtonElement[]` | | List of contained radio buttons. | -| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `required` | `required` | public | `boolean` | `false` | Whether the radio group is required. | +| `size` | `size` | public | `SbbRadioButtonSize` | `'m'` | Size variant, either m or s. | +| `value` | `value` | public | `any \| null \| undefined` | | The value of the radio group. | ## Events | Name | Type | Description | Inherited From | | ----------- | --------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | -------------- | -| `didChange` | `CustomEvent` | Deprecated. Only used for React. Will probably be removed once React 19 is available. Emits whenever the `sbb-radio-group` value changes. | | | `change` | `CustomEvent` | Emits whenever the `sbb-radio-group` value changes. | | +| `didChange` | `CustomEvent` | Deprecated. Only used for React. Will probably be removed once React 19 is available. Emits whenever the `sbb-radio-group` value changes. | | | `input` | `CustomEvent` | Emits whenever the `sbb-radio-group` value changes. | | ## Slots diff --git a/src/components/radio-button/radio-button/readme.md b/src/components/radio-button/radio-button/readme.md index aecc3b77f5..1871560da0 100644 --- a/src/components/radio-button/radio-button/readme.md +++ b/src/components/radio-button/radio-button/readme.md @@ -53,12 +53,12 @@ The component's label can be displayed in bold using the `sbb-text--bold` class | Name | Attribute | Privacy | Type | Default | Description | | --------------------- | ----------------------- | ------- | ------------------------------------ | ------- | ---------------------------------------------- | | `allowEmptySelection` | `allow-empty-selection` | public | `boolean` | `false` | Whether the radio can be deselected. | -| `value` | `value` | public | `string \| undefined` | | Value of radio button. | +| `checked` | `checked` | public | `boolean` | `false` | Whether the radio button is checked. | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the radio button is disabled. | -| `required` | `required` | public | `boolean` | `false` | Whether the radio button is required. | | `group` | - | public | `SbbRadioButtonGroupElement \| null` | `null` | Reference to the connected radio button group. | -| `checked` | `checked` | public | `boolean` | `false` | Whether the radio button is checked. | +| `required` | `required` | public | `boolean` | `false` | Whether the radio button is required. | | `size` | `size` | public | `SbbRadioButtonSize` | `'m'` | Label size variant, either m or s. | +| `value` | `value` | public | `string \| undefined` | | Value of radio button. | ## Methods diff --git a/src/components/select/readme.md b/src/components/select/readme.md index 96cfbc1798..1a5949e6eb 100644 --- a/src/components/select/readme.md +++ b/src/components/select/readme.md @@ -106,33 +106,33 @@ Opened panel: | Name | Attribute | Privacy | Type | Default | Description | | ------------- | ------------- | ------- | --------------------------------- | ------- | ------------------------------------------------------------------------ | -| `value` | `value` | public | `string \| string[] \| undefined` | | The value of the select component. If `multiple` is true, it's an array. | -| `placeholder` | `placeholder` | public | `string \| undefined` | | The placeholder used if no value has been selected. | -| `multiple` | `multiple` | public | `boolean` | `false` | Whether the select allows for multiple selection. | -| `required` | `required` | public | `boolean` | `false` | Whether the select is required. | -| `readonly` | `readonly` | public | `boolean` | `false` | Whether the select is readonly. | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `multiple` | `multiple` | public | `boolean` | `false` | Whether the select allows for multiple selection. | | `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `placeholder` | `placeholder` | public | `string \| undefined` | | The placeholder used if no value has been selected. | +| `readonly` | `readonly` | public | `boolean` | `false` | Whether the select is readonly. | +| `required` | `required` | public | `boolean` | `false` | Whether the select is required. | +| `value` | `value` | public | `string \| string[] \| undefined` | | The value of the select component. If `multiple` is true, it's an array. | ## Methods | Name | Privacy | Description | Parameters | Return | Inherited From | | ----------------- | ------- | --------------------------------- | ---------- | -------- | -------------- | -| `open` | public | Opens the selection panel. | | `void` | | | `close` | public | Closes the selection panel. | | `void` | | | `getDisplayValue` | public | Gets the current displayed value. | | `string` | | +| `open` | public | Opens the selection panel. | | `void` | | ## Events | Name | Type | Description | Inherited From | | ----------- | ------------------- | -------------------------------------------------------------------------------- | -------------- | -| `didChange` | `CustomEvent` | Deprecated. used for React. Will probably be removed once React 19 is available. | | | `change` | `CustomEvent` | Notifies that the component's value has changed. | | -| `input` | `CustomEvent` | Notifies that an option value has been selected. | | -| `willOpen` | `CustomEvent` | Emits whenever the `sbb-select` starts the opening transition. Can be canceled. | | +| `didChange` | `CustomEvent` | Deprecated. used for React. Will probably be removed once React 19 is available. | | +| `didClose` | `CustomEvent` | Emits whenever the `sbb-select` is closed. | | | `didOpen` | `CustomEvent` | Emits whenever the `sbb-select` is opened. | | +| `input` | `CustomEvent` | Notifies that an option value has been selected. | | | `willClose` | `CustomEvent` | Emits whenever the `sbb-select` begins the closing transition. Can be canceled. | | -| `didClose` | `CustomEvent` | Emits whenever the `sbb-select` is closed. | | +| `willOpen` | `CustomEvent` | Emits whenever the `sbb-select` starts the opening transition. Can be canceled. | | ## CSS Properties diff --git a/src/components/selection-panel/readme.md b/src/components/selection-panel/readme.md index 7025813ae3..9d1530822a 100644 --- a/src/components/selection-panel/readme.md +++ b/src/components/selection-panel/readme.md @@ -79,18 +79,18 @@ It's also possible to display the `sbb-selection-panel` without border by settin | Name | Attribute | Privacy | Type | Default | Description | | ------------ | ------------ | ------- | ------------------- | --------- | ---------------------------------------------- | +| `borderless` | `borderless` | public | `boolean` | `false` | Whether the unselected panel has a border. | | `color` | `color` | public | `'white' \| 'milk'` | `'white'` | The background color of the panel. | | `forceOpen` | `force-open` | public | `boolean` | `false` | Whether the content section is always visible. | -| `borderless` | `borderless` | public | `boolean` | `false` | Whether the unselected panel has a border. | ## Events | Name | Type | Description | Inherited From | | ----------- | ------------------- | ----------------------------------------------------------------- | -------------- | -| `willOpen` | `CustomEvent` | Emits whenever the content section starts the opening transition. | | +| `didClose` | `CustomEvent` | Emits whenever the content section is closed. | | | `didOpen` | `CustomEvent` | Emits whenever the content section is opened. | | | `willClose` | `CustomEvent` | Emits whenever the content section begins the closing transition. | | -| `didClose` | `CustomEvent` | Emits whenever the content section is closed. | | +| `willOpen` | `CustomEvent` | Emits whenever the content section starts the opening transition. | | ## Slots diff --git a/src/components/signet/readme.md b/src/components/signet/readme.md index ba9c72cf17..cfe429e9b6 100644 --- a/src/components/signet/readme.md +++ b/src/components/signet/readme.md @@ -25,5 +25,5 @@ Possible values are `ideal` (default), `minimal` and `none`. | Name | Attribute | Privacy | Type | Default | Description | | -------------------- | --------------------- | ------- | -------------------------------- | --------- | -------------------------------------------------------------------- | -| `protectiveRoom` | `protective-room` | public | `SbbProtectiveRoom \| undefined` | `'ideal'` | Visual protective room around signet. | | `accessibilityLabel` | `accessibility-label` | public | `string` | `'Logo'` | Accessibility label which will be forwarded to the inner SVG signet. | +| `protectiveRoom` | `protective-room` | public | `SbbProtectiveRoom \| undefined` | `'ideal'` | Visual protective room around signet. | diff --git a/src/components/slider/readme.md b/src/components/slider/readme.md index c1a751e029..8f5f9132b2 100644 --- a/src/components/slider/readme.md +++ b/src/components/slider/readme.md @@ -72,23 +72,23 @@ The `sbb-slider` has the following behaviour on keypress when focused: | Name | Attribute | Privacy | Type | Default | Description | | --------------- | ----------------- | ------- | ---------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | -| `value` | `value` | public | `string \| undefined` | `''` | Value for the inner HTMLInputElement. | -| `valueAsNumber` | `value-as-number` | public | `number \| undefined` | | Numeric value for the inner HTMLInputElement. | -| `name` | `name` | public | `string \| undefined` | `''` | Name of the inner HTMLInputElement. | +| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `endIcon` | `end-icon` | public | `string \| undefined` | | Name of the icon at component's end, which will be forward to the nested `sbb-icon`. | | `form` | `form` | public | `string \| undefined` | | The element to associate the inner HTMLInputElement with. | -| `min` | `min` | public | `string \| undefined` | `'0'` | Minimum acceptable value for the inner HTMLInputElement. | | `max` | `max` | public | `string \| undefined` | `'100'` | Maximum acceptable value for the inner HTMLInputElement. | +| `min` | `min` | public | `string \| undefined` | `'0'` | Minimum acceptable value for the inner HTMLInputElement. | +| `name` | `name` | public | `string \| undefined` | `''` | Name of the inner HTMLInputElement. | | `readonly` | `readonly` | public | `boolean \| undefined` | `false` | Readonly state for the inner HTMLInputElement. Since the input range does not allow this attribute, it will be merged with the `disabled` one. | | `startIcon` | `start-icon` | public | `string \| undefined` | | Name of the icon at component's start, which will be forward to the nested `sbb-icon`. | -| `endIcon` | `end-icon` | public | `string \| undefined` | | Name of the icon at component's end, which will be forward to the nested `sbb-icon`. | -| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `value` | `value` | public | `string \| undefined` | `''` | Value for the inner HTMLInputElement. | +| `valueAsNumber` | `value-as-number` | public | `number \| undefined` | | Numeric value for the inner HTMLInputElement. | ## Events | Name | Type | Description | Inherited From | | ----------- | ------------------- | -------------------------------------------------------------------------------- | -------------- | -| `input` | `InputEvent` | | | | `didChange` | `CustomEvent` | Deprecated. used for React. Will probably be removed once React 19 is available. | | +| `input` | `InputEvent` | | | ## Slots diff --git a/src/components/status/readme.md b/src/components/status/readme.md index 4f4c30ddc3..01c2820745 100644 --- a/src/components/status/readme.md +++ b/src/components/status/readme.md @@ -51,15 +51,15 @@ If needed, the `role="status"` attribute can be added on the component's tag. | Name | Attribute | Privacy | Type | Default | Description | | -------------- | --------------- | ------- | --------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------- | -| `type` | `type` | public | `SbbStatusType` | `'info'` | The type of the status. | +| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `titleContent` | `title-content` | public | `string \| undefined` | | Content of title. | | `titleLevel` | `title-level` | public | `SbbTitleLevel` | `'3'` | Level of title, it will be rendered as heading tag (e.g. h3). Defaults to level 3. | -| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | +| `type` | `type` | public | `SbbStatusType` | `'info'` | The type of the status. | ## Slots | Name | Description | | ------- | ---------------------------------------------------------- | | | Use the unnamed slot to add content to the status message. | -| `title` | Use this to provide a title for the status (optional). | | `icon` | Use this slot to override the default status icon. | +| `title` | Use this to provide a title for the status (optional). | diff --git a/src/components/tabs/tab-group/readme.md b/src/components/tabs/tab-group/readme.md index 373ed6ddc8..2fb6a1802f 100644 --- a/src/components/tabs/tab-group/readme.md +++ b/src/components/tabs/tab-group/readme.md @@ -42,16 +42,16 @@ It's possible to set the first selected tab using the `initialSelectedIndex` pro | Name | Attribute | Privacy | Type | Default | Description | | ---------------------- | ------------------------ | ------- | --------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------- | -| `size` | `size` | public | `InterfaceSbbTabGroupTab['size']` | `'l'` | Size variant, either l or xl. | | `initialSelectedIndex` | `initial-selected-index` | public | `number` | `0` | Sets the initial tab. If it matches a disabled tab or exceeds the length of the tab group, the first enabled tab will be selected. | +| `size` | `size` | public | `InterfaceSbbTabGroupTab['size']` | `'l'` | Size variant, either l or xl. | ## Methods | Name | Privacy | Description | Parameters | Return | Inherited From | | ------------- | ------- | ------------------------- | ------------------ | ------ | -------------- | +| `activateTab` | public | Activates a tab by index. | `tabIndex: number` | `void` | | | `disableTab` | public | Disables a tab by index. | `tabIndex: number` | `void` | | | `enableTab` | public | Enables a tab by index. | `tabIndex: number` | `void` | | -| `activateTab` | public | Activates a tab by index. | `tabIndex: number` | `void` | | ## Events diff --git a/src/components/tabs/tab-title/readme.md b/src/components/tabs/tab-title/readme.md index bc00789461..2d9675614f 100644 --- a/src/components/tabs/tab-title/readme.md +++ b/src/components/tabs/tab-title/readme.md @@ -39,16 +39,16 @@ It is possible to display the component in `disabled` state by using the self-na | Name | Attribute | Privacy | Type | Default | Description | | ---------- | ----------- | ------- | ---------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `level` | `level` | public | `SbbTitleLevel` | `'1'` | The level will correspond to the heading tag generated in the title. Use this property to generate the appropriate header tag, taking SEO into consideration. | | `active` | `active` | public | `boolean \| undefined` | | Active tab state | | `amount` | `amount` | public | `string \| undefined` | | Amount displayed inside the tab. | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | | `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | +| `level` | `level` | public | `SbbTitleLevel` | `'1'` | The level will correspond to the heading tag generated in the title. Use this property to generate the appropriate header tag, taking SEO into consideration. | ## Slots | Name | Description | | -------- | ------------------------------------------------------------------------------------------------- | | | Use the unnamed slot to add content to the tab title. | -| `icon` | Use this slot to display an icon to the left of the title, by providing the `sbb-icon` component. | | `amount` | Provide a number to show an amount to the right of the title. | +| `icon` | Use this slot to display an icon to the left of the title, by providing the `sbb-icon` component. | diff --git a/src/components/tag/tag-group/readme.md b/src/components/tag/tag-group/readme.md index 3f2975a6f0..f984864100 100644 --- a/src/components/tag/tag-group/readme.md +++ b/src/components/tag/tag-group/readme.md @@ -88,8 +88,8 @@ that communicates the collective meaning of all `sbb-tag`s. | ------------------------ | -------------------------- | ------- | ---------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `listAccessibilityLabel` | `list-accessibility-label` | public | `string \| undefined` | | This will be forwarded as aria-label to the inner list. | | `multiple` | `multiple` | public | `boolean` | `false` | If set multiple to false, the selection is exclusive and the value is a string (or null). If set multiple to true, the selection can have multiple values and therefore value is an array. Changing multiple during run time is not supported. | -| `value` | `value` | public | `string \| string[] \| null` | `null` | Value of the sbb-tag-group. If set multiple to false, the value is a string (or null). If set multiple to true, the value is an array. | | `tags` | - | public | `SbbTagElement[]` | | The child instances of sbb-tag as an array. | +| `value` | `value` | public | `string \| string[] \| null` | `null` | Value of the sbb-tag-group. If set multiple to false, the value is a string (or null). If set multiple to true, the value is an array. | ## Slots diff --git a/src/components/tag/tag/readme.md b/src/components/tag/tag/readme.md index 233a6cddb9..61fd6dd540 100644 --- a/src/components/tag/tag/readme.md +++ b/src/components/tag/tag/readme.md @@ -51,25 +51,25 @@ The state is reflected via `aria-pressed` attribute. | ---------- | ----------- | ------- | --------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------- | | `amount` | `amount` | public | `string \| undefined` | | Amount displayed inside the tag. | | `checked` | `checked` | public | `boolean` | `false` | Whether the tag is checked. | -| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | -| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | +| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | +| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `name` | `name` | public | `string` | | The name of the button element. | +| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | | `value` | `value` | public | `string` | | The value of the button element. | -| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | ## Events | Name | Type | Description | Inherited From | | ----------- | ------------------- | -------------------------------------------------------------------------------- | -------------- | -| `input` | `CustomEvent` | Input event emitter | | -| `didChange` | `CustomEvent` | Deprecated. used for React. Will probably be removed once React 19 is available. | | | `change` | `CustomEvent` | Change event emitter | | +| `didChange` | `CustomEvent` | Deprecated. used for React. Will probably be removed once React 19 is available. | | +| `input` | `CustomEvent` | Input event emitter | | ## Slots | Name | Description | | -------- | --------------------------------------------------------------------------------------------- | | | Use the unnamed slot to add content to the tag label. | -| `icon` | Use this slot to display an icon at the component start, by providing a `sbb-icon` component. | | `amount` | Provide an amount to show it at the component end. | +| `icon` | Use this slot to display an icon at the component start, by providing a `sbb-icon` component. | diff --git a/src/components/teaser-hero/readme.md b/src/components/teaser-hero/readme.md index 5c2d4b8545..74023bcf76 100644 --- a/src/components/teaser-hero/readme.md +++ b/src/components/teaser-hero/readme.md @@ -36,19 +36,19 @@ Avoid slotting block elements (e.g. `div`) as this violates semantic rules and c | Name | Attribute | Privacy | Type | Default | Description | | -------------------- | --------------------- | ------- | --------------------------------------- | ------- | ----------------------------------------------------------------- | -| `linkContent` | `link-content` | public | `string \| undefined` | | Panel link text. | -| `imageSrc` | `image-src` | public | `string \| undefined` | | Image src will be passed to `sbb-image`. | -| `imageAlt` | `image-alt` | public | `string \| undefined` | | Image alt text will be passed to `sbb-image`. | +| `accessibilityLabel` | `accessibility-label` | public | `string \| undefined` | | This will be forwarded as aria-label to the inner anchor element. | +| `download` | `download` | public | `boolean \| undefined` | | Whether the browser will show the download dialog on click. | | `href` | `href` | public | `string \| undefined` | | The href value you want to link to. | -| `target` | `target` | public | `LinkTargetType \| string \| undefined` | | Where to display the linked URL. | +| `imageAlt` | `image-alt` | public | `string \| undefined` | | Image alt text will be passed to `sbb-image`. | +| `imageSrc` | `image-src` | public | `string \| undefined` | | Image src will be passed to `sbb-image`. | +| `linkContent` | `link-content` | public | `string \| undefined` | | Panel link text. | | `rel` | `rel` | public | `string \| undefined` | | The relationship of the linked URL as space-separated link types. | -| `download` | `download` | public | `boolean \| undefined` | | Whether the browser will show the download dialog on click. | -| `accessibilityLabel` | `accessibility-label` | public | `string \| undefined` | | This will be forwarded as aria-label to the inner anchor element. | +| `target` | `target` | public | `LinkTargetType \| string \| undefined` | | Where to display the linked URL. | ## Slots | Name | Description | | -------------- | ----------------------------------------------------- | | | Use the unnamed slot to add text content to the panel | -| `link-content` | Link content of the panel | | `image` | The background image that can be a `sbb-image` | +| `link-content` | Link content of the panel | diff --git a/src/components/teaser-paid/readme.md b/src/components/teaser-paid/readme.md index 234a87ca2a..d1713ff2db 100644 --- a/src/components/teaser-paid/readme.md +++ b/src/components/teaser-paid/readme.md @@ -17,11 +17,11 @@ The `sbb-teaser-paid` component has two slots: the `image` slot, used to slot an | Name | Attribute | Privacy | Type | Default | Description | | -------------------- | --------------------- | ------- | --------------------------------------- | ------- | ----------------------------------------------------------------- | +| `accessibilityLabel` | `accessibility-label` | public | `string \| undefined` | | This will be forwarded as aria-label to the inner anchor element. | +| `download` | `download` | public | `boolean \| undefined` | | Whether the browser will show the download dialog on click. | | `href` | `href` | public | `string \| undefined` | | The href value you want to link to. | -| `target` | `target` | public | `LinkTargetType \| string \| undefined` | | Where to display the linked URL. | | `rel` | `rel` | public | `string \| undefined` | | The relationship of the linked URL as space-separated link types. | -| `download` | `download` | public | `boolean \| undefined` | | Whether the browser will show the download dialog on click. | -| `accessibilityLabel` | `accessibility-label` | public | `string \| undefined` | | This will be forwarded as aria-label to the inner anchor element. | +| `target` | `target` | public | `LinkTargetType \| string \| undefined` | | Where to display the linked URL. | ## Slots diff --git a/src/components/teaser/readme.md b/src/components/teaser/readme.md index ffb874dcdd..0bf0d8f74c 100644 --- a/src/components/teaser/readme.md +++ b/src/components/teaser/readme.md @@ -54,21 +54,21 @@ Avoid slotting block elements (e.g. `
`) as this violates semantic rules and | Name | Attribute | Privacy | Type | Default | Description | | -------------------- | --------------------- | ------- | ---------------------------------------- | ------------------ | ------------------------------------------------------------------------- | +| `accessibilityLabel` | `accessibility-label` | public | `string \| undefined` | | This will be forwarded as aria-label to the inner anchor element. | | `alignment` | `alignment` | public | `'after-centered' \| 'after' \| 'below'` | `'after-centered'` | Teaser variant - define the position and the alignment of the text block. | -| `titleLevel` | `title-level` | public | `SbbTitleLevel` | `'5'` | Heading level of the sbb-title element (e.g. h1-h6). | -| `titleContent` | `title-content` | public | `string \| undefined` | | Content of title. | | `chipContent` | `chip-content` | public | `string \| undefined` | | Content of chip. | +| `download` | `download` | public | `boolean \| undefined` | | Whether the browser will show the download dialog on click. | | `href` | `href` | public | `string \| undefined` | | The href value you want to link to. | -| `target` | `target` | public | `LinkTargetType \| string \| undefined` | | Where to display the linked URL. | | `rel` | `rel` | public | `string \| undefined` | | The relationship of the linked URL as space-separated link types. | -| `download` | `download` | public | `boolean \| undefined` | | Whether the browser will show the download dialog on click. | -| `accessibilityLabel` | `accessibility-label` | public | `string \| undefined` | | This will be forwarded as aria-label to the inner anchor element. | +| `target` | `target` | public | `LinkTargetType \| string \| undefined` | | Where to display the linked URL. | +| `titleContent` | `title-content` | public | `string \| undefined` | | Content of title. | +| `titleLevel` | `title-level` | public | `SbbTitleLevel` | `'5'` | Heading level of the sbb-title element (e.g. h1-h6). | ## Slots | Name | Description | | ------- | ----------------------------------------------- | -| `image` | Slot used to render the image. | +| | Use the unnamed slot to render the description. | | `chip` | Slot used to render the sbb-chip label. | +| `image` | Slot used to render the image. | | `title` | Slot used to render the title. | -| | Use the unnamed slot to render the description. | diff --git a/src/components/timetable-occupancy-icon/readme.md b/src/components/timetable-occupancy-icon/readme.md index be3a2d1991..484e0c9e0c 100644 --- a/src/components/timetable-occupancy-icon/readme.md +++ b/src/components/timetable-occupancy-icon/readme.md @@ -24,13 +24,13 @@ In high contrast mode, in both light and dark variant, the rendered icon changes | Name | Attribute | Privacy | Type | Default | Description | | ------------ | ------------- | ------- | -------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `occupancy` | `occupancy` | public | `SbbOccupancy` | | Wagon occupancy. | | `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | | `noSanitize` | `no-sanitize` | public | `boolean` | `false` | When set to `true`, SVG content that is HTTP fetched will not be checked if the response SVG content has any `