diff --git a/src/components/sbb-accordion/readme.md b/src/components/sbb-accordion/readme.md index 95bd18b80b..25474781d5 100644 --- a/src/components/sbb-accordion/readme.md +++ b/src/components/sbb-accordion/readme.md @@ -44,13 +44,13 @@ In the following example, all the `sbb-expansion-panel-header` would be wrapped -## Properties +## Properties -| Name | Privacy | Type | Default | Description | Inherited From | -| ------------------ | ------- | -------------------- | ------- | --------------------------------------------------------------------------- | -------------- | -| `titleLevel` | public | `TitleLevel \| null` | | The heading level for the sbb-expansion-panel-headers within the component. | | -| `disableAnimation` | public | `boolean` | `false` | Whether the animation should be disabled. | | -| `multi` | public | `boolean` | | Whether more than one sbb-expansion-panel can be open at the same time. | | +| Name | Attribute | Privacy | Type | Default | Description | +| ------------------ | ------------------ | ------- | -------------------- | ------- | --------------------------------------------------------------------------- | +| `titleLevel` | `title-level` | public | `TitleLevel \| null` | | | +| `disableAnimation` | `disable-animation` | public | `boolean` | `false` | Whether the animation should be disabled. | +| `multi` | `multi` | public | `boolean` | | Whether more than one sbb-expansion-panel can be open at the same time. | ## Slots diff --git a/src/components/sbb-action-group/readme.md b/src/components/sbb-action-group/readme.md index 5b7b19fa75..4cb6e1cd4f 100644 --- a/src/components/sbb-action-group/readme.md +++ b/src/components/sbb-action-group/readme.md @@ -116,15 +116,15 @@ The values for `align-group` and `align-self` for the various allocations are as -## Properties - -| Name | Privacy | Type | Default | Description | Inherited From | -| ---------------- | ------- | ------------------------------------------------------------------ | -------------- | ------------------------------------------------------------------------------------------------------------------- | -------------- | -| `alignGroup` | public | `InterfaceSbbActionGroupAttributes['alignGroup']` | `'start'` | Set the slotted \`\\` children's alignment. | | -| `horizontalFrom` | public | `InterfaceSbbActionGroupAttributes['horizontalFrom'] \| undefined` | `'medium'` | Overrides the behaviour of \`orientation\` property. | | -| `orientation` | public | `InterfaceSbbActionGroupAttributes['orientation']` | `'horizontal'` | Indicates the orientation of the components inside the \`\\`. | | -| `buttonSize` | public | `InterfaceButtonAttributes['size'] \| undefined` | `'l'` | Size of the nested sbb-button instances. This will overwrite the size attribute of nested sbb-button instances. | | -| `linkSize` | public | `InterfaceLinkAttributes['size'] \| undefined` | `'m'` | Size of the nested sbb-link instances. This will overwrite the size attribute of nested sbb-link instances. | | +## Properties + +| Name | Attribute | Privacy | Type | Default | Description | +| ---------------- | ---------------- | ------- | ------------------------------------------------------------------ | -------------- | ------------------------------------------------------------------------------------------------------------------- | +| `alignGroup` | `align-group` | public | `InterfaceSbbActionGroupAttributes['alignGroup']` | `'start'` | Set the slotted \`\\` children's alignment. | +| `horizontalFrom` | `horizontal-from` | public | `InterfaceSbbActionGroupAttributes['horizontalFrom'] \| undefined` | `'medium'` | | +| `orientation` | `orientation` | public | `InterfaceSbbActionGroupAttributes['orientation']` | `'horizontal'` | Indicates the orientation of the components inside the \`\\`. | +| `buttonSize` | `button-size` | public | `InterfaceButtonAttributes['size'] \| undefined` | `'l'` | | +| `linkSize` | `link-size` | public | `InterfaceLinkAttributes['size'] \| undefined` | `'m'` | | ## Slots diff --git a/src/components/sbb-alert-group/readme.md b/src/components/sbb-alert-group/readme.md index c830aafeb5..090f730024 100644 --- a/src/components/sbb-alert-group/readme.md +++ b/src/components/sbb-alert-group/readme.md @@ -42,13 +42,13 @@ and therefore interrupts screen reader flow, to immediately read out the alert c -## Properties +## Properties -| Name | Privacy | Type | Default | Description | Inherited From | -| ------------------------- | ------- | ------------------------------------------ | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | -| `role` | public | `InterfaceSbbAlertGroupAttributes['role']` | `'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` | public | `string` | | Title for this alert group which is only visible for screen reader users. | | -| `accessibilityTitleLevel` | public | `TitleLevel` | `'2'` | Level of the accessibility title, will be rendered as heading tag (e.g. h2). Defaults to level 2. | | +| Name | Attribute | Privacy | Type | Default | Description | +| ------------------------- | ------------------------- | ------- | ------------------------------------------ | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `role` | `role` | public | `InterfaceSbbAlertGroupAttributes['role']` | `'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` | | Title for this alert group which is only visible for screen reader users. | +| `accessibilityTitleLevel` | `accessibility-title-level` | public | `TitleLevel` | `'2'` | Level of the accessibility title, will be rendered as heading tag (e.g. h2). Defaults to level 2. | ## Slots diff --git a/src/components/sbb-alert/readme.md b/src/components/sbb-alert/readme.md index bb68f597f5..8a41011680 100644 --- a/src/components/sbb-alert/readme.md +++ b/src/components/sbb-alert/readme.md @@ -71,21 +71,21 @@ Avoid slotting block elements (e.g. `
`) as this violates semantic rules and -## Properties - -| Name | Privacy | Type | Default | Description | Inherited From | -| -------------------- | ------- | --------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | -| `readonly` | public | `boolean` | `false` | Whether the alert is readonly. In readonly mode, there is no dismiss button offered to the user. | | -| `size` | public | `InterfaceAlertAttributes['size']` | `'m'` | You can choose between \`m\` or \`l\` size. | | -| `disableAnimation` | public | `boolean` | `false` | Whether the fade in animation should be disabled. | | -| `iconName` | public | `string \| undefined` | | 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. | | -| `titleContent` | public | `string \| undefined` | | Content of title. | | -| `titleLevel` | public | `TitleLevel` | `'3'` | Level of title, will be rendered as heading tag (e.g. h3). Defaults to level 3. | | -| `linkContent` | public | `string \| undefined` | | Content of the link. | | -| `href` | public | `string \| undefined` | | The href value you want to link to. | | -| `target` | public | `LinkTargetType \| string \| undefined` | | Where to display the linked URL. | | -| `rel` | public | `string \| undefined` | | The relationship of the linked URL as space-separated link types. | | -| `accessibilityLabel` | public | `string \| undefined` | | This will be forwarded as aria-label to the relevant nested element. | | +## Properties + +| Name | Attribute | Privacy | Type | Default | Description | +| -------------------- | -------------------- | ------- | --------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `readonly` | `readonly` | public | `boolean` | `false` | Whether the alert is readonly. In readonly mode, there is no dismiss button offered to the user. | +| `size` | `size` | public | `InterfaceAlertAttributes['size']` | `'m'` | You can choose between \`m\` or \`l\` size. | +| `disableAnimation` | `disable-animation` | public | `boolean` | `false` | Whether the fade in animation should be disabled. | +| `iconName` | `icon-name` | public | `string \| undefined` | | | +| `titleContent` | `title-content` | public | `string \| undefined` | | | +| `titleLevel` | `title-level` | public | `TitleLevel` | `'3'` | Level of title, will be rendered as heading tag (e.g. h3). Defaults to level 3. | +| `linkContent` | `link-content` | public | `string \| undefined` | | | +| `href` | `href` | public | `string \| undefined` | | | +| `target` | `target` | public | `LinkTargetType \| string \| undefined` | Where to display the linked URL. | | +| `rel` | `rel` | public | `string \| undefined` | | | +| `accessibilityLabel` | `accessibility-label` | public | `string \| undefined` | | | ## Methods diff --git a/src/components/sbb-autocomplete/readme.md b/src/components/sbb-autocomplete/readme.md index db5daf749f..23e2dc1098 100644 --- a/src/components/sbb-autocomplete/readme.md +++ b/src/components/sbb-autocomplete/readme.md @@ -99,15 +99,15 @@ using `aria-activedescendant` to support navigation though the autocomplete opti -## Properties - -| Name | Privacy | Type | Default | Description | Inherited From | -| ------------------- | ------- | ---------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | -| `origin` | public | `string \| HTMLElement` | | 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` | public | `string \| HTMLInputElement` | | 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. | | -| `disableAnimation` | public | `boolean` | `false` | Whether the animation is disabled. | | -| `preserveIconSpace` | public | `boolean` | | Whether the icon space is preserved when no icon is set. | | -| `negative` | public | `boolean` | `false` | Negative coloring variant flag. | | +## Properties + +| Name | Attribute | Privacy | Type | Default | Description | +| ------------------- | ------------------- | ------- | ---------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `origin` | `origin` | public | `string \| HTMLElement` | | | +| `trigger` | `trigger` | public | `string \| HTMLInputElement` | | | +| `disableAnimation` | `disable-animation` | public | `boolean` | `false` | Whether the animation is disabled. | +| `preserveIconSpace` | `preserve-icon-space` | public | `boolean` | | Whether the icon space is preserved when no icon is set. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | ## Methods diff --git a/src/components/sbb-breadcrumb/readme.md b/src/components/sbb-breadcrumb/readme.md index 48014b1576..22153160da 100644 --- a/src/components/sbb-breadcrumb/readme.md +++ b/src/components/sbb-breadcrumb/readme.md @@ -38,15 +38,15 @@ By default, the `sbb-breadcrumb-group` component sets `aria-current="page"` on t -## Properties - -| Name | Privacy | Type | Default | Description | Inherited From | -| ---------- | ------- | ---------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------- | -------------- | -| `href` | public | `string \| undefined` | | The href value you want to link to. | | -| `target` | public | `LinkTargetType \| string \| undefined \| undefined` | | Where to display the linked URL. | | -| `rel` | public | `string \| undefined \| undefined` | | The relationship of the linked URL as space-separated link types. | | -| `download` | public | `boolean \| undefined` | | Whether the browser will show the download dialog on click. | | -| `iconName` | 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. | | +## Properties + +| Name | Attribute | Privacy | Type | Default | Description | +| ---------- | ---------- | ------- | ---------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------- | +| `href` | `href` | public | `string \| undefined` | | | +| `target` | `target` | public | `LinkTargetType \| string \| undefined \| | Where to display the linked URL. | | +| `rel` | `rel` | public | `string \| undefined \| undefined` | The relationship of the linked URL as space-separated link types. | | +| `download` | `download` | public | `boolean \| undefined` | | | +| `iconName` | `icon-name` | public | `string \| undefined` | | | ## Slots diff --git a/src/components/sbb-button/readme.md b/src/components/sbb-button/readme.md index f4132d7508..c6c970b1f2 100644 --- a/src/components/sbb-button/readme.md +++ b/src/components/sbb-button/readme.md @@ -81,24 +81,24 @@ Use the accessibility properties in case of an icon-only button to describe the -## Properties - -| Name | Privacy | Type | Default | Description | Inherited From | -| ---------- | ------- | ---------------------------------------------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | -| `variant` | public | `InterfaceButtonAttributes['variant']` | `'primary'` | Variant of the button, like primary, secondary etc. | | -| `negative` | public | `boolean` | `false` | Negative coloring variant flag. | | -| `size` | public | `InterfaceButtonAttributes['size'] \| undefined` | `'l'` | Size variant, either l or m. | | -| `isStatic` | public | `boolean` | `false` | Set this property to true if you want only a visual representation of a button, but no interaction (a span instead of a link/button will be rendered). | | -| `iconName` | 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` | public | `string \| undefined` | | The href value you want to link to (if it is present, button becomes a link). | | -| `target` | public | `LinkTargetType \| string \| undefined \| undefined` | | Where to display the linked URL. | | -| `rel` | public | `string \| undefined \| undefined` | | The relationship of the linked URL as space-separated link types. | | -| `download` | public | `boolean \| undefined` | | Whether the browser will show the download dialog on click. | | -| `type` | public | `ButtonType \| undefined` | | The type attribute to use for the button. | | -| `disabled` | public | `boolean` | `false` | Whether the button is disabled. | | -| `name` | public | `string \| undefined` | | The name attribute to use for the button. | | -| `value` | public | `string \| undefined` | | The value attribute to use for the button. | | -| `form` | public | `string \| undefined` | | The \
element to associate the button with. | | +## Properties + +| Name | Attribute | Privacy | Type | Default | Description | +| ---------- | ---------- | ------- | ---------------------------------------------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `variant` | `variant` | public | `InterfaceButtonAttributes['variant']` | `'primary'` | Variant of the button, like primary, secondary etc. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `size` | `size` | public | `InterfaceButtonAttributes['size'] \| undefined` | `'l'` | | +| `isStatic` | `is-static` | public | `boolean` | `false` | Set this property to true if you want only a visual representation of a button, but no interaction (a span instead of a link/button will be rendered). | +| `iconName` | `icon-name` | public | `string \| undefined` | | | +| `href` | `href` | public | `string \| undefined` | | | +| `target` | `target` | public | `LinkTargetType \| string \| undefined \| | Where to display the linked URL. | | +| `rel` | `rel` | public | `string \| undefined \| undefined` | The relationship of the linked URL as space-separated link types. | | +| `download` | `download` | public | `boolean \| undefined` | | | +| `type` | `type` | public | `ButtonType \| undefined` | | | +| `disabled` | `disabled` | public | `boolean` | `false` | Whether the button is disabled. | +| `name` | `name` | public | `string \| undefined` | | | +| `value` | `value` | public | `string \| undefined` | | | +| `form` | `form` | public | `string \| undefined` | | | ## Slots diff --git a/src/components/sbb-calendar/readme.md b/src/components/sbb-calendar/readme.md index 61bcdc770b..763f7f7cc2 100644 --- a/src/components/sbb-calendar/readme.md +++ b/src/components/sbb-calendar/readme.md @@ -63,15 +63,15 @@ This is helpful if you need a specific state of the component. -## Properties - -| Name | Privacy | Type | Default | Description | Inherited From | -| -------------- | ------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------- | -------------- | -| `wide` | public | `boolean` | `false` | If set to true, two months are displayed | | -| `min` | public | `Date \| string \| number` | | The minimum valid date. Takes Date Object, ISOString, and Unix Timestamp (number of seconds since Jan 1, 1970). | | -| `max` | public | `Date \| string \| number` | | The maximum valid date. Takes Date Object, ISOString, and Unix Timestamp (number of seconds since Jan 1, 1970). | | -| `dateFilter` | public | `(date: Date \| null) => boolean` | | A function used to filter out dates. | | -| `selectedDate` | public | `Date \| string \| number` | | The selected date. Takes Date Object, ISOString, and Unix Timestamp (number of seconds since Jan 1, 1970). | | +## Properties + +| Name | Attribute | Privacy | Type | Default | Description | +| -------------- | -------------- | ------- | --------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------- | +| `wide` | `wide` | public | `boolean` | `false` | If set to true, two months are displayed | +| `min` | `min` | public | `Date \| string \| number` | The minimum valid date. Takes Date Object, ISOString, and Unix Timestamp (number of seconds since Jan 1, 1970). | | +| `max` | `max` | public | `Date \| string \| number` | The maximum valid date. Takes Date Object, ISOString, and Unix Timestamp (number of seconds since Jan 1, 1970). | | +| `dateFilter` | `date-filter` | public | `(date: Date \| null) => boolean` | | | +| `selectedDate` | `selected-date` | public | `Date \| string \| number` | The selected date. Takes Date Object, ISOString, and Unix Timestamp (number of seconds since Jan 1, 1970). | | ## Methods diff --git a/src/components/sbb-card-action/readme.md b/src/components/sbb-card-action/readme.md index c08e9232de..25c8e9e544 100644 --- a/src/components/sbb-card-action/readme.md +++ b/src/components/sbb-card-action/readme.md @@ -24,19 +24,19 @@ as it is used for search engines and screen-reader users. -## Properties - -| Name | Privacy | Type | Default | Description | Inherited From | -| ---------- | ------- | ---------------------------------------------------- | ------- | --------------------------------------------------------------------------------- | -------------- | -| `active` | public | `boolean` | | Whether the card is active. | | -| `href` | public | `string \| undefined` | | The href value you want to link to. | | -| `target` | public | `LinkTargetType \| string \| undefined \| undefined` | | Where to display the linked URL. | | -| `rel` | public | `string \| undefined \| undefined` | | The relationship of the linked URL as space-separated link types. | | -| `download` | public | `boolean \| undefined \| undefined` | | Whether the browser will show the download dialog on click. | | -| `type` | public | `ButtonType \| undefined` | | Default behaviour of the button. | | -| `name` | public | `string \| undefined` | | The name of the button. | | -| `form` | public | `string \| undefined \| undefined` | | The \ element to associate the button to it. | | -| `value` | public | `string \| undefined \| undefined` | | The value associated with button \`name\` when it's submitted with the form data. | | +## Properties + +| Name | Attribute | Privacy | Type | Default | Description | +| ---------- | ---------- | ------- | ---------------------------------------------------- | ------- | --------------------------------------------------------------------------------- | +| `active` | `active` | public | `boolean` | | Whether the card is active. | +| `href` | `href` | public | `string \| undefined` | | | +| `target` | `target` | public | `LinkTargetType \| string \| undefined \| | Where to display the linked URL. | | +| `rel` | `rel` | public | `string \| undefined \| undefined` | The relationship of the linked URL as space-separated link types. | | +| `download` | `download` | public | `boolean \| undefined \| undefined` | Whether the browser will show the download dialog on click. | | +| `type` | `type` | public | `ButtonType \| undefined` | | | +| `name` | `name` | public | `string \| undefined` | | | +| `form` | `form` | public | `string \| undefined \| undefined` | The \ element to associate the button to it. | | +| `value` | `value` | public | `string \| undefined \| undefined` | The value associated with button \`name\` when it's submitted with the form data. | | ## Slots diff --git a/src/components/sbb-card-badge/readme.md b/src/components/sbb-card-badge/readme.md index db35a9832a..f8ed260887 100644 --- a/src/components/sbb-card-badge/readme.md +++ b/src/components/sbb-card-badge/readme.md @@ -24,11 +24,11 @@ as in the example above. -## Properties +## Properties -| Name | Privacy | Type | Default | Description | Inherited From | -| ------- | ------- | ------------------------------------------ | ------------ | ------------------------ | -------------- | -| `color` | public | `InterfaceSbbCardBadgeAttributes['color']` | `'charcoal'` | Color of the card badge. | | +| Name | Attribute | Privacy | Type | Default | Description | +| ------- | ------- | ------- | ------------------------------------------ | ------------ | ------------------------ | +| `color` | `color` | public | `InterfaceSbbCardBadgeAttributes['color']` | `'charcoal'` | Color of the card badge. | ## Slots diff --git a/src/components/sbb-card/readme.md b/src/components/sbb-card/readme.md index 453d047767..9d0ec40b58 100644 --- a/src/components/sbb-card/readme.md +++ b/src/components/sbb-card/readme.md @@ -80,12 +80,12 @@ To improve coloring, it's needed to manually define styles for Window high contr -## Properties +## Properties -| Name | Privacy | Type | Default | Description | Inherited From | -| ------- | ------- | ------------------------------------------------- | --------- | -------------------------------------------------- | -------------- | -| `size` | public | `InterfaceSbbCardAttributes['size'] \| undefined` | `'m'` | Size variant, either xs, s, m, l, xl, xxl or xxxl. | | -| `color` | public | `InterfaceSbbCardAttributes['color']` | `'white'` | Option to set the component's background color. | | +| Name | Attribute | Privacy | Type | Default | Description | +| ------- | ------- | ------- | ------------------------------------------------- | --------- | -------------------------------------------------- | +| `size` | `size` | public | `InterfaceSbbCardAttributes['size'] \| undefined` | `'m'` | | +| `color` | `color` | public | `InterfaceSbbCardAttributes['color']` | `'white'` | Option to set the component's background color. | ## Slots diff --git a/src/components/sbb-checkbox-group/readme.md b/src/components/sbb-checkbox-group/readme.md index eae0968d9d..cbdc20a390 100644 --- a/src/components/sbb-checkbox-group/readme.md +++ b/src/components/sbb-checkbox-group/readme.md @@ -80,15 +80,15 @@ Two values are available, `s` and `m`, which is the default -## Properties - -| Name | Privacy | Type | Default | Description | Inherited From | -| ---------------- | ------- | -------------------------------------------------------------------- | -------------- | --------------------------------------------------------------------------------- | -------------- | -| `disabled` | public | `boolean` | `false` | Whether the checkbox group is disabled. | | -| `required` | public | `boolean` | `false` | Whether the checkbox group is required. | | -| `size` | public | `InterfaceSbbCheckboxGroupAttributes['size']` | `'m'` | Size variant, either m or s. | | -| `horizontalFrom` | public | `InterfaceSbbCheckboxGroupAttributes['horizontalFrom'] \| undefined` | | Overrides the behaviour of \`orientation\` property. | | -| `orientation` | public | `InterfaceSbbCheckboxGroupAttributes['orientation']` | `'horizontal'` | Indicates the orientation of the checkboxes inside the \`\\`. | | +## Properties + +| Name | Attribute | Privacy | Type | Default | Description | +| ---------------- | ---------------- | ------- | -------------------------------------------------------------------- | -------------- | --------------------------------------------------------------------------------- | +| `disabled` | `disabled` | public | `boolean` | `false` | Whether the checkbox group is disabled. | +| `required` | `required` | public | `boolean` | `false` | Whether the checkbox group is required. | +| `size` | `size` | public | `InterfaceSbbCheckboxGroupAttributes['size']` | `'m'` | Size variant, either m or s. | +| `horizontalFrom` | `horizontal-from` | public | `InterfaceSbbCheckboxGroupAttributes['horizontalFrom'] \| undefined` | | | +| `orientation` | `orientation` | public | `InterfaceSbbCheckboxGroupAttributes['orientation']` | `'horizontal'` | Indicates the orientation of the checkboxes inside the \`\\`. | ## Slots diff --git a/src/components/sbb-checkbox/readme.md b/src/components/sbb-checkbox/readme.md index 43dce0e9c9..4d1e08485c 100644 --- a/src/components/sbb-checkbox/readme.md +++ b/src/components/sbb-checkbox/readme.md @@ -69,18 +69,18 @@ If you don't want the label to appear next to the checkbox, you can use `aria-la -## Properties - -| Name | Privacy | Type | Default | Description | Inherited From | -| --------------- | ------- | ------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | -| `value` | public | `string \| undefined` | | Value of checkbox. | | -| `disabled` | public | `boolean` | `false` | Whether the checkbox is disabled. | | -| `required` | public | `boolean` | `false` | Whether the checkbox is required. | | -| `indeterminate` | public | `boolean` | `false` | Whether the checkbox is indeterminate. | | -| `iconName` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from https\://icons.app.sbb.ch (optional). | | -| `iconPlacement` | public | `InterfaceSbbCheckboxAttributes['iconPlacement']` | `'end'` | The label position relative to the labelIcon. Defaults to end | | -| `checked` | public | `boolean` | `false` | Whether the checkbox is checked. | | -| `size` | public | `InterfaceSbbCheckboxAttributes['size']` | `'m'` | Label size variant, either m or s. | | +## Properties + +| Name | Attribute | Privacy | Type | Default | Description | +| --------------- | --------------- | ------- | ------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------- | +| `value` | `value` | public | `string \| undefined` | | | +| `disabled` | `disabled` | public | `boolean` | `false` | Whether the checkbox is disabled. | +| `required` | `required` | public | `boolean` | `false` | Whether the checkbox is required. | +| `indeterminate` | `indeterminate` | public | `boolean` | `false` | Whether the checkbox is indeterminate. | +| `iconName` | `icon-name` | public | `string \| undefined` | | | +| `iconPlacement` | `icon-placement` | public | `InterfaceSbbCheckboxAttributes['iconPlacement']` | `'end'` | The label position relative to the labelIcon. Defaults to end | +| `checked` | `checked` | public | `boolean` | `false` | Whether the checkbox is checked. | +| `size` | `size` | public | `InterfaceSbbCheckboxAttributes['size']` | `'m'` | Label size variant, either m or s. | ## Methods diff --git a/src/components/sbb-chip/readme.md b/src/components/sbb-chip/readme.md index 116a68bca8..466a93157d 100644 --- a/src/components/sbb-chip/readme.md +++ b/src/components/sbb-chip/readme.md @@ -20,12 +20,12 @@ and four different values for the `color` property (`charcoal`, `granite`, `whit -## Properties +## Properties -| Name | Privacy | Type | Default | Description | Inherited From | -| ------- | ------- | ------------------------------------- | -------- | ------------------ | -------------- | -| `size` | public | `InterfaceSbbChipAttributes['size']` | `'xxs'` | Size of the chip. | | -| `color` | public | `InterfaceSbbChipAttributes['color']` | `'milk'` | Color of the chip. | | +| Name | Attribute | Privacy | Type | Default | Description | +| ------- | ------- | ------- | ------------------------------------- | -------- | ------------------ | +| `size` | `size` | public | `InterfaceSbbChipAttributes['size']` | `'xxs'` | Size of the chip. | +| `color` | `color` | public | `InterfaceSbbChipAttributes['color']` | `'milk'` | Color of the chip. | ## Slots diff --git a/src/components/sbb-datepicker-next-day/readme.md b/src/components/sbb-datepicker-next-day/readme.md index 7587d27053..ac02d87eff 100644 --- a/src/components/sbb-datepicker-next-day/readme.md +++ b/src/components/sbb-datepicker-next-day/readme.md @@ -31,13 +31,13 @@ if it is disabled, or if the selected date is equal to the input's `max` attribu -## Properties +## Properties -| Name | Privacy | Type | Default | Description | Inherited From | -| ------------ | ------- | ------------------------------------ | ------- | ----------------------------------------- | -------------- | -| `name` | public | `string \| undefined` | | The name attribute to use for the button. | | -| `negative` | public | `boolean` | `false` | Negative coloring variant flag. | | -| `datePicker` | public | `string \| HTMLElement \| undefined` | | Datepicker reference. | | +| Name | Attribute | Privacy | Type | Default | Description | +| ------------ | ------------ | ------- | ------------------------------------ | ------- | ----------------------------------------- | +| `name` | `name` | public | `string \| undefined` | | | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `datePicker` | `date-picker` | public | `string \| HTMLElement \| undefined` | Datepicker reference. | | ## Methods diff --git a/src/components/sbb-datepicker-previous-day/readme.md b/src/components/sbb-datepicker-previous-day/readme.md index 3c132b917b..ca434e64d3 100644 --- a/src/components/sbb-datepicker-previous-day/readme.md +++ b/src/components/sbb-datepicker-previous-day/readme.md @@ -31,13 +31,13 @@ if it is disabled, or if the selected date is equal to the input's `min` attribu -## Properties +## Properties -| Name | Privacy | Type | Default | Description | Inherited From | -| ------------ | ------- | ------------------------------------ | ------- | ----------------------------------------- | -------------- | -| `name` | public | `string \| undefined` | | The name attribute to use for the button. | | -| `negative` | public | `boolean` | `false` | Negative coloring variant flag. | | -| `datePicker` | public | `string \| HTMLElement \| undefined` | | Datepicker reference. | | +| Name | Attribute | Privacy | Type | Default | Description | +| ------------ | ------------ | ------- | ------------------------------------ | ------- | ----------------------------------------- | +| `name` | `name` | public | `string \| undefined` | | | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `datePicker` | `date-picker` | public | `string \| HTMLElement \| undefined` | Datepicker reference. | | ## Methods diff --git a/src/components/sbb-datepicker-toggle/readme.md b/src/components/sbb-datepicker-toggle/readme.md index 827fda88b2..83c4609bb1 100644 --- a/src/components/sbb-datepicker-toggle/readme.md +++ b/src/components/sbb-datepicker-toggle/readme.md @@ -32,13 +32,13 @@ otherwise, they can be connected using the `datePicker` property as described ab -## Properties +## Properties -| Name | Privacy | Type | Default | Description | Inherited From | -| ------------------ | ------- | ------------------------------------ | ------- | ---------------------------------- | -------------- | -| `datePicker` | public | `string \| HTMLElement \| undefined` | | Datepicker reference. | | -| `disableAnimation` | public | `boolean` | `false` | Whether the animation is disabled. | | -| `negative` | public | `boolean` | `false` | Negative coloring variant flag. | | +| Name | Attribute | Privacy | Type | Default | Description | +| ------------------ | ------------------ | ------- | ------------------------------------ | ------- | ---------------------------------- | +| `datePicker` | `date-picker` | public | `string \| HTMLElement \| undefined` | Datepicker reference. | | +| `disableAnimation` | `disable-animation` | public | `boolean` | `false` | Whether the animation is disabled. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | ## Methods diff --git a/src/components/sbb-datepicker/readme.md b/src/components/sbb-datepicker/readme.md index 70002f6db8..11fc98ae12 100644 --- a/src/components/sbb-datepicker/readme.md +++ b/src/components/sbb-datepicker/readme.md @@ -103,20 +103,20 @@ This is helpful if you need a specific state of the component. -## Properties - -| Name | Privacy | Type | Default | Description | Inherited From | -| ------------------- | ------- | --------------------------------------------------- | ------------ | ----------------------------------------------------------------------------------- | -------------- | -| `wide` | public | `boolean` | `false` | If set to true, two months are displayed | | -| `dateFilter` | public | `(date: Date \| null) => boolean` | `() => true` | A function used to filter out dates. | | -| `dateParser` | public | `(value: string) => Date \| undefined \| undefined` | | A function used to parse string value into dates. | | -| `format` | public | `(date: Date) => string \| undefined` | | A function used to format dates into the preferred string format. | | -| `input` | public | `string \| HTMLElement \| undefined` | | Reference of the native input connected to the datepicker. | | -| `didChange` | public | `EventEmitter` | | | | -| `change` | public | `EventEmitter` | | | | -| `inputUpdated` | public | `EventEmitter` | | Notifies that the attributes of the input connected to the datepicker have changes. | | -| `datePickerUpdated` | public | `EventEmitter` | | Notifies that the attributes of the datepicker have changes. | | -| `validationChange` | public | `EventEmitter` | | Emits whenever the internal validation state changes. | | +## Properties + +| 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` | `() => true` | | +| `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` | | | +| `input` | `input` | public | `string \| HTMLElement \| undefined` | Reference of the native input connected to the datepicker. | | +| `didChange` | `did-change` | public | `EventEmitter` | | | +| `change` | `change` | public | `EventEmitter` | | | +| `inputUpdated` | `input-updated` | public | `EventEmitter` | | Notifies that the attributes of the input connected to the datepicker have changes. | +| `datePickerUpdated` | `date-picker-updated` | public | `EventEmitter` | | Notifies that the attributes of the datepicker have changes. | +| `validationChange` | `validation-change` | public | `EventEmitter` | | Emits whenever the internal validation state changes. | ## Methods diff --git a/src/components/sbb-dialog/readme.md b/src/components/sbb-dialog/readme.md index 225f27105b..5ed845ebe6 100644 --- a/src/components/sbb-dialog/readme.md +++ b/src/components/sbb-dialog/readme.md @@ -85,19 +85,19 @@ The default `z-index` of the component is set to `1000`; to specify a custom sta -## Properties - -| Name | Privacy | Type | Default | Description | Inherited From | -| ------------------------- | ------- | ---------------------------- | --------- | ------------------------------------------------------------------------------- | -------------- | -| `titleContent` | public | `string` | | Dialog title. | | -| `titleLevel` | public | `TitleLevel` | `'1'` | Level of title, will be rendered as heading tag (e.g. h1). Defaults to level 1. | | -| `titleBackButton` | public | `boolean` | `false` | Whether a back button is displayed next to the title. | | -| `backdropAction` | public | `'close' \| 'none'` | `'close'` | Backdrop click action. | | -| `negative` | public | `boolean` | `false` | Negative coloring variant flag. | | -| `accessibilityLabel` | public | `string \| undefined` | | This will be forwarded as aria-label to the relevant nested element. | | -| `accessibilityCloseLabel` | public | `\| string \| undefined` | | This will be forwarded as aria-label to the close button element. | | -| `accessibilityBackLabel` | public | `\| string \| undefined` | | This will be forwarded as aria-label to the back button element. | | -| `disableAnimation` | public | `boolean` | `false` | Whether the animation is enabled. | | +## Properties + +| Name | Attribute | Privacy | Type | Default | Description | +| ------------------------- | ------------------------- | ------- | ---------------------------- | --------- | ------------------------------------------------------------------------------- | +| `titleContent` | `title-content` | public | `string` | | Dialog title. | +| `titleLevel` | `title-level` | public | `TitleLevel` | `'1'` | Level of title, will be rendered as heading tag (e.g. h1). Defaults to level 1. | +| `titleBackButton` | `title-back-button` | public | `boolean` | `false` | Whether a back button is displayed next to the title. | +| `backdropAction` | `backdrop-action` | public | `'close' \| 'none'` | `'close'` | | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `accessibilityLabel` | `accessibility-label` | public | `string \| undefined` | | | +| `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. | | +| `disableAnimation` | `disable-animation` | public | `boolean` | `false` | Whether the animation is enabled. | ## Methods diff --git a/src/components/sbb-divider/readme.md b/src/components/sbb-divider/readme.md index 0923aa3659..0434fa5ea1 100644 --- a/src/components/sbb-divider/readme.md +++ b/src/components/sbb-divider/readme.md @@ -15,12 +15,10 @@ It's also possible to display the component in `negative` variant using the self -## Properties +## Properties -| Name | Privacy | Type | Default | Description | Inherited From | -| ------------- | ------- | ----------------------------------------------------------- | -------------- | --------------------------------------------------------------------------------------------- | -------------- | -| `negative` | public | `boolean \| undefined` | `false` | Negative coloring variant flag | | -| `orientation` | public | `InterfaceSbbDividerAttributes['orientation'] \| undefined` | `'horizontal'` | Orientation property with possible values 'horizontal' \| 'vertical'. Defaults to horizontal. | | - -
+| Name | Attribute | Privacy | Type | Default | Description | +| ------------- | ------------- | ------- | ----------------------------------------------------------- | -------------- | --------------------------------------------------------------------------------------------- | +| `negative` | `negative` | public | `boolean \| undefined` | `false` | | +| `orientation` | `orientation` | public | `InterfaceSbbDividerAttributes['orientation'] \| undefined` | `'horizontal'` | 'vertical'. Defaults to horizontal. | | diff --git a/src/components/sbb-expansion-panel-header/readme.md b/src/components/sbb-expansion-panel-header/readme.md index 8058175251..84942e3928 100644 --- a/src/components/sbb-expansion-panel-header/readme.md +++ b/src/components/sbb-expansion-panel-header/readme.md @@ -36,10 +36,10 @@ When the element is clicked, the `toggle-expanded` event is emitted. -## Properties +## Properties -| Name | Privacy | Type | Default | Description | Inherited From | -| ---------- | ------- | --------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------- | -------------- | -| `iconName` | 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` | public | `boolean` | | Whether the button is disabled. | | +| Name | Attribute | Privacy | Type | Default | Description | +| ---------- | ---------- | ------- | --------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------- | +| `iconName` | `icon-name` | public | `string \| undefined` | | | +| `disabled` | `disabled` | public | `boolean` | | Whether the button is disabled. | diff --git a/src/components/sbb-expansion-panel/readme.md b/src/components/sbb-expansion-panel/readme.md index d4949a3e6c..f76ff6f0ed 100644 --- a/src/components/sbb-expansion-panel/readme.md +++ b/src/components/sbb-expansion-panel/readme.md @@ -76,14 +76,14 @@ and the `aria-hidden` attribute on the content. -## Properties - -| Name | Privacy | Type | Default | Description | Inherited From | -| ------------------ | ------- | ----------------------------------------------- | --------- | ---------------------------------------------------------------------- | -------------- | -| `titleLevel` | public | `TitleLevel \| undefined` | | Heading level; if unset, a \`div\` will be rendered. | | -| `color` | public | `InterfaceSbbExpansionPanelAttributes['color']` | `'white'` | The background color of the panel. | | -| `expanded` | public | `boolean` | | Whether the panel is expanded. | | -| `disabled` | public | `boolean` | | Whether the panel is disabled, so its expanded state can't be changed. | | -| `borderless` | public | `boolean` | `false` | Whether the panel has no border. | | -| `disableAnimation` | public | `boolean` | `false` | Whether the animations should be disabled. | | +## Properties + +| Name | Attribute | Privacy | Type | Default | Description | +| ------------------ | ------------------ | ------- | ----------------------------------------------- | --------- | ---------------------------------------------------------------------- | +| `titleLevel` | `title-level` | public | `TitleLevel \| undefined` | | | +| `color` | `color` | public | `InterfaceSbbExpansionPanelAttributes['color']` | `'white'` | The background color of the panel. | +| `expanded` | `expanded` | public | `boolean` | | Whether the panel is expanded. | +| `disabled` | `disabled` | public | `boolean` | | Whether the panel is disabled, so its expanded state can't be changed. | +| `borderless` | `borderless` | public | `boolean` | `false` | Whether the panel has no border. | +| `disableAnimation` | `disable-animation` | public | `boolean` | `false` | Whether the animations should be disabled. | diff --git a/src/components/sbb-file-selector/readme.md b/src/components/sbb-file-selector/readme.md index 3db91bdd1c..2362cd03a8 100644 --- a/src/components/sbb-file-selector/readme.md +++ b/src/components/sbb-file-selector/readme.md @@ -80,18 +80,18 @@ It's suggested to have a different value for each variant, e.g.: -## Properties - -| Name | Privacy | Type | Default | Description | Inherited From | -| -------------------- | ------- | --------------------------- | ----------- | ------------------------------------------------------------------------ | -------------- | -| `variant` | public | `'default' \| 'dropzone'` | `'default'` | Whether the component has a dropzone area or not. | | -| `multiple` | public | `boolean` | | Whether more than one file can be selected. | | -| `multipleMode` | public | `'default' \| 'persistent'` | | Whether the newly added files should override the previously added ones. | | -| `accept` | public | `string` | | A comma-separated list of allowed unique file type specifiers. | | -| `titleContent` | public | `string \| undefined` | | The title displayed in \`dropzone\` variant. | | -| `disabled` | public | `boolean` | | Whether the component is disabled. | | -| `accessibilityLabel` | public | `string \| undefined` | | This will be forwarded as aria-label to the native input element. | | -| `files` | public | `File[]` | | Gets the currently selected files. | | +## Properties + +| Name | Attribute | Privacy | Type | Default | Description | +| -------------------- | -------------------- | ------- | --------------------------- | ----------- | ------------------------------------------------------------------------ | +| `variant` | `variant` | public | `'default' \| 'dropzone'` | `'default'` | | +| `multiple` | `multiple` | public | `boolean` | | Whether more than one file can be selected. | +| `multipleMode` | `multiple-mode` | public | `'default' \| 'persistent'` | | | +| `accept` | `accept` | public | `string` | | A comma-separated list of allowed unique file type specifiers. | +| `titleContent` | `title-content` | public | `string \| undefined` | | | +| `disabled` | `disabled` | public | `boolean` | | Whether the component is disabled. | +| `accessibilityLabel` | `accessibility-label` | public | `string \| undefined` | | | +| `files` | `files` | public | `File[]` | | Gets the currently selected files. | ## Methods diff --git a/src/components/sbb-footer/readme.md b/src/components/sbb-footer/readme.md index 1e7861cc2a..4c80b35a63 100644 --- a/src/components/sbb-footer/readme.md +++ b/src/components/sbb-footer/readme.md @@ -74,15 +74,13 @@ to the content where needed (e.g. `sbb-link-list`, `sbb-link` and `sbb-divider`) -## Properties +## Properties -| Name | Privacy | Type | Default | Description | Inherited From | -| ------------------------- | ------- | -------------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------- | -| `variant` | public | `InterfaceFooterAttributes['variant']` | `'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. | | -| `negative` | public | `boolean` | `false` | Negative coloring variant flag. | | -| `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` | public | `string \| undefined` | | Footer title text, visually hidden, necessary for screen readers. | | -| `accessibilityTitleLevel` | public | `TitleLevel` | `'1'` | Level of the accessibility title, will be rendered as heading tag (e.g. h1). Defaults to level 1. | | - -
+| Name | Attribute | Privacy | Type | Default | Description | +| ------------------------- | ------------------------- | ------- | -------------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `variant` | `variant` | public | `InterfaceFooterAttributes['variant']` | `'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. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `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` | | | +| `accessibilityTitleLevel` | `accessibility-title-level` | public | `TitleLevel` | `'1'` | Level of the accessibility title, will be rendered as heading tag (e.g. h1). Defaults to level 1. | diff --git a/src/components/sbb-form-error/readme.md b/src/components/sbb-form-error/readme.md index d379746a45..d226d8ca34 100644 --- a/src/components/sbb-form-error/readme.md +++ b/src/components/sbb-form-error/readme.md @@ -22,11 +22,9 @@ the component displays an icon by default, that can be changed using the `icon` -## Properties +## Properties -| Name | Privacy | Type | Default | Description | Inherited From | -| ---------- | ------- | --------- | ------- | ------------------------------- | -------------- | -| `negative` | public | `boolean` | `false` | Negative coloring variant flag. | | - -
+| Name | Attribute | Privacy | Type | Default | Description | +| ---------- | ---------- | ------- | --------- | ------- | ------------------------------- | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | diff --git a/src/components/sbb-form-field-clear/readme.md b/src/components/sbb-form-field-clear/readme.md index 8fc4718a6f..01a5d2e8c2 100644 --- a/src/components/sbb-form-field-clear/readme.md +++ b/src/components/sbb-form-field-clear/readme.md @@ -14,9 +14,9 @@ to provide the possibility to display a clear button which can clear the input v -## Properties +## Properties -| Name | Privacy | Type | Default | Description | Inherited From | -| ---------- | ------- | --------- | ------- | ------------------------------- | -------------- | -| `negative` | public | `boolean` | `false` | Negative coloring variant flag. | | +| Name | Attribute | Privacy | Type | Default | Description | +| ---------- | ---------- | ------- | --------- | ------- | ------------------------------- | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | diff --git a/src/components/sbb-form-field/readme.md b/src/components/sbb-form-field/readme.md index 9ae7993591..946bf30f13 100644 --- a/src/components/sbb-form-field/readme.md +++ b/src/components/sbb-form-field/readme.md @@ -115,19 +115,19 @@ technology will announce errors when they appear. -## Properties - -| Name | Privacy | Type | Default | Description | Inherited From | -| --------------- | ------- | ------------------------------------------------------ | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | -| `errorSpace` | 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. | | -| `label` | public | `string` | | Label text for the input which is internally rendered as \`\