@@ -25,7 +24,7 @@ next to the field.
## Vertical spacing
-To add space between input, you can use [margin utilities](/?path=/docs/utilities-spacing--docs).
+To add space between input, you can use [margin utilities](/?path=/docs/facaacfd-18f1-49b4-80f1-a96680730fa0--docs).
@@ -35,11 +34,11 @@ If you want a form field to span the whole available width, you don't need a row
only need those, if you want to place two things next to each other.
Simply use `.row` and `.col` to have the width distributed evenly between all inputs.
-To make it responsive, you can add `.row-cols-*` classes to the row (see [Grid page](/?path=/docs/foundations-layout-grid--docs#row-columns)).
+To make it responsive, you can add `.row-cols-*` classes to the row (see [Grid page](/?path=/docs/7240f2ef-216a-490e-9bd8-c0cef19f7b31--docs#row-columns)).
-For finer adjustment, you can also use the `.col-*` classes (see [Columns page](/?path=/docs/foundations-layout-columns--docs)) on your columns. For example for a 2/1 ratio, given that a row has twelve columns in total,
+For finer adjustment, you can also use the `.col-*` classes (see [Columns page](/?path=/docs/cd70f48f-6308-4ec8-a8c6-982bd72c855c--docs)) on your columns. For example for a 2/1 ratio, given that a row has twelve columns in total,
just add `.col-8` and `.col-4` to you two columns respectively.
@@ -78,9 +77,9 @@ adding and removing validation classes on the input:
* The message needs the class `.invalid-feedback/.valid-feedback`
* The form needs the class `.was-validated`. With this class you can manage when to display errors. Usually, errors should not be
shown on untouched fields.
-
+
Or
-
+
The input field needs the class `.is-invalid/.is-valid`
diff --git a/packages/documentation/src/stories/patterns/forms/forms.stories.ts b/packages/documentation/src/stories/patterns/forms/forms.stories.ts
index fb31b4fe43..721a35f4a3 100644
--- a/packages/documentation/src/stories/patterns/forms/forms.stories.ts
+++ b/packages/documentation/src/stories/patterns/forms/forms.stories.ts
@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/web-components';
import { html } from 'lit';
const meta: Meta = {
+ id: 'd83829b2-7de2-48d2-be64-07a80c9caef3',
title: 'Patterns/Forms',
parameters: {
badges: [],
diff --git a/packages/documentation/src/stories/utilities/background/background.docs.mdx b/packages/documentation/src/stories/utilities/background/background.docs.mdx
index 1395d99a80..377b27bad5 100644
--- a/packages/documentation/src/stories/utilities/background/background.docs.mdx
+++ b/packages/documentation/src/stories/utilities/background/background.docs.mdx
@@ -79,7 +79,7 @@ Change the background opacity simply by setting the CSS variable `--post-bg-opac
Low background opacity is not recommended as it can lead to poor contrast.
It is then your responsibility to ensure that the contrast ratio between foreground and background is at least 4.5:1.
- More information on that topic is available on our [accessibility docs](/?path=/docs/foundations-accessibility--docs).
+ More information on that topic is available on our [accessibility docs](/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs).
diff --git a/packages/documentation/src/stories/utilities/background/background.stories.ts b/packages/documentation/src/stories/utilities/background/background.stories.ts
index c78f405c3d..cdb62624f1 100644
--- a/packages/documentation/src/stories/utilities/background/background.stories.ts
+++ b/packages/documentation/src/stories/utilities/background/background.stories.ts
@@ -3,6 +3,7 @@ import { html } from 'lit';
import { BADGE } from '../../../../.storybook/constants';
const meta: Meta = {
+ id: '60852fac-a861-4415-8276-bd38d68653bb',
title: 'Utilities/Background',
parameters: {
badges: [BADGE.TODO],
diff --git a/packages/documentation/src/stories/utilities/common/common.stories.ts b/packages/documentation/src/stories/utilities/common/common.stories.ts
index 921f593fff..5dabab5a79 100644
--- a/packages/documentation/src/stories/utilities/common/common.stories.ts
+++ b/packages/documentation/src/stories/utilities/common/common.stories.ts
@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/web-components';
import { BADGE } from '../../../../.storybook/constants';
const meta: Meta = {
+ id: '522f6347-78d4-4926-b39c-c131f3e1336e',
title: 'Utilities/Common',
parameters: {
badges: [BADGE.TODO],
diff --git a/packages/documentation/src/stories/utilities/list/list.stories.ts b/packages/documentation/src/stories/utilities/list/list.stories.ts
index 71edadcf10..362c49266a 100644
--- a/packages/documentation/src/stories/utilities/list/list.stories.ts
+++ b/packages/documentation/src/stories/utilities/list/list.stories.ts
@@ -3,6 +3,7 @@ import { html } from 'lit';
import { BADGE } from '../../../../.storybook/constants';
const meta: Meta = {
+ id: 'e76192bb-b2eb-487a-b9c1-ef938bccdfc4',
title: 'Utilities/List',
parameters: {
badges: [BADGE.TODO],
diff --git a/packages/documentation/src/stories/utilities/sizing/sizing.docs.mdx b/packages/documentation/src/stories/utilities/sizing/sizing.docs.mdx
index f506216667..fe7764c28f 100644
--- a/packages/documentation/src/stories/utilities/sizing/sizing.docs.mdx
+++ b/packages/documentation/src/stories/utilities/sizing/sizing.docs.mdx
@@ -1,7 +1,6 @@
import { Canvas, Controls, Meta, Source } from '@storybook/blocks';
import { formatAsMap } from '../../../utils/sass-export';
import * as SizingStories from './sizing.stories';
-import StylesPackageImport from '../../../shared/styles-package-import.mdx';
@@ -36,7 +35,7 @@ Bootstrap offers sizing classes with the suffixes bellow. They allow you to set
For width, we offer additionally `.w-{breakpoint}-{size}` classes (e.g. `w-md-100`) so that you can size only for some specific breakpoints.
-See
Full-width button for a practical example.
+See
Full-width button for a practical example.
### Post-Sizes
diff --git a/packages/documentation/src/stories/utilities/sizing/sizing.stories.ts b/packages/documentation/src/stories/utilities/sizing/sizing.stories.ts
index 875234b774..1d899915d2 100644
--- a/packages/documentation/src/stories/utilities/sizing/sizing.stories.ts
+++ b/packages/documentation/src/stories/utilities/sizing/sizing.stories.ts
@@ -12,6 +12,7 @@ const sizeOptionsPercent = ['auto', '25', '50', '75', '100'];
const meta: Meta = {
render: renderSizing,
+ id: 'e728de1f-0d71-4317-8bb8-cbef0bf8d5db',
title: 'Utilities/Sizing',
parameters: {
badges: [BADGE.NEEDS_REVISION],
diff --git a/packages/documentation/src/stories/utilities/spacing/spacing.docs.mdx b/packages/documentation/src/stories/utilities/spacing/spacing.docs.mdx
index e57572a4ee..fcd576682c 100644
--- a/packages/documentation/src/stories/utilities/spacing/spacing.docs.mdx
+++ b/packages/documentation/src/stories/utilities/spacing/spacing.docs.mdx
@@ -25,7 +25,7 @@ You can apply the desired spacings for `margin` and/or `padding` all around an e
Our base spacing classes with suffixes going from 0 to 5 (`*-0`, `*-1`, ..., `*-5`).
-Our custom sizes can be used in the same way: by adding the name of the desired size to a prefix. See our [sizing docs](/?path=/docs/utilities-sizing--docs) to find out which size names are available.
+Our custom sizes can be used in the same way: by adding the name of the desired size to a prefix. See our [sizing docs](/?path=/docs/e728de1f-0d71-4317-8bb8-cbef0bf8d5db--docs) to find out which size names are available.
Do not use spacing classes on grid elements (i.e. `.row`, `.col`, `.col-*`).
diff --git a/packages/documentation/src/stories/utilities/spacing/spacing.stories.ts b/packages/documentation/src/stories/utilities/spacing/spacing.stories.ts
index 6810e0e55c..d4cbc41e3d 100644
--- a/packages/documentation/src/stories/utilities/spacing/spacing.stories.ts
+++ b/packages/documentation/src/stories/utilities/spacing/spacing.stories.ts
@@ -1,4 +1,4 @@
-import type { Args, Meta, StoryObj, StoryFn, StoryContext } from '@storybook/web-components';
+import type { Args, Meta, StoryContext, StoryFn, StoryObj } from '@storybook/web-components';
import { BADGE } from '../../../../.storybook/constants';
import { html } from 'lit/static-html.js';
import './spacing.styles.scss';
@@ -20,6 +20,7 @@ const positionOptions = {
};
const meta: Meta = {
+ id: 'facaacfd-18f1-49b4-80f1-a96680730fa0',
title: 'Utilities/Spacing',
parameters: {
badges: [BADGE.NEEDS_REVISION],
@@ -143,9 +144,7 @@ export const Default: Story = {
export const responsiveExample: Story = {
render: (args: Args) => {
- return html`
-
- `;
+ return html`
`;
},
decorators: [
// everything in here will be visible in the example, but only the content coming from the `story` function will be shown in the code preview
@@ -163,9 +162,7 @@ export const responsiveExample: Story = {
export const automaticResponsiveExample: Story = {
render: (args: Args) => {
- return html`
-
- `;
+ return html`
`;
},
decorators: [
(story: StoryFn, { args, context }: StoryContext) => html`
diff --git a/packages/documentation/src/stories/utilities/text/text.docs.mdx b/packages/documentation/src/stories/utilities/text/text.docs.mdx
index 5e93867bcb..08095558ac 100644
--- a/packages/documentation/src/stories/utilities/text/text.docs.mdx
+++ b/packages/documentation/src/stories/utilities/text/text.docs.mdx
@@ -115,7 +115,7 @@ Define how text-blocks are displayed.
The `.text-auto` class is deprecated since text color is now set by the{' '}
- [backgrounds](/?path=/docs/utilities-background--docs) themselves.
+ [backgrounds](/?path=/docs/60852fac-a861-4415-8276-bd38d68653bb--docs) themselves.
Colorize text with `.text-*` utility classes.
@@ -151,7 +151,7 @@ Easily realign text to components with text alignment classes.
For `start`, `end`, and `center` alignment, responsive classes are available that use the same viewport breakpoints as the grid system.
The responsive alignment classes have the following format: `text-{breakpoint}-{alighment}`.
-For more detailed informations about breakpoints read our [layout docs](/?path=/docs/foundations-layout-breakpoints--docs).
+For more detailed informations about breakpoints read our [layout docs](/?path=/docs/20af6e2b-32b1-42ef-a187-b026aea7fe13--docs).
### Wrapping
diff --git a/packages/documentation/src/stories/utilities/text/text.stories.ts b/packages/documentation/src/stories/utilities/text/text.stories.ts
index 716ecde558..11fe733402 100644
--- a/packages/documentation/src/stories/utilities/text/text.stories.ts
+++ b/packages/documentation/src/stories/utilities/text/text.stories.ts
@@ -3,6 +3,7 @@ import { html } from 'lit';
import { BADGE } from '../../../../.storybook/constants';
const meta: Meta = {
+ id: 'c55681df-4d21-469d-a5b3-c67686e7c104',
title: 'Utilities/Text',
parameters: {
badges: [BADGE.NEEDS_REVISION],
@@ -14,41 +15,27 @@ export default meta;
type Story = StoryObj;
export const FontFamily: Story = {
- render: () => html`
-
This is sans serif text.
- `,
+ render: () => html`
This is sans serif text.
`,
};
export const FontSize: Story = {
- render: () => html`
-
This is tiny text.
- `,
+ render: () => html`
This is tiny text.
`,
};
export const FontWeight: Story = {
- render: () => html`
-
This is bold text.
- `,
+ render: () => html`
This is bold text.
`,
};
export const FontStyle: Story = {
- render: () => html`
-
This is italic text.
- `,
+ render: () => html`
This is italic text.
`,
};
export const LineHeight: Story = {
- render: () => html`
-
This text has a line height equal to the font size.
- `,
+ render: () => html`
This text has a line height equal to the font size.
`,
};
export const TextColor: Story = {
- decorators: [
- story => html`
-
e.preventDefault()}>${story()}
- `,
- ],
+ decorators: [story => html`
e.preventDefault()}>${story()}
`],
render: () => html`
This is colored text.
This is a colored link, it lightens on hover.
@@ -56,11 +43,7 @@ export const TextColor: Story = {
};
export const TextColorReset: Story = {
- decorators: [
- story => html`
-
e.preventDefault()}>${story()}
- `,
- ],
+ decorators: [story => html`
e.preventDefault()}>${story()}
`],
render: () => html`
This is colored text with a