@tabler/core 1.0.0-beta22 → 1.0.0-beta23

package/docs/ui/components/timelines.mdx

@@ -1,13 +1,14 @@
 ---
 title: Timelines
-description: A timeline is a perfect way to visualize processes and projects, as it's easy to read and attractive for users. You can use it to give an overview of events, present an agenda or point out important points in time.
+summary: A timeline is a perfect way to visualize processes and projects, as it's easy to read and attractive for users. You can use it to give an overview of events, present an agenda or point out important points in time.
+description: Visualize events and processes clearly.
 ---
 
 ## Timeline
 
 The available timeline design is comprised of many components that will help you visualize a process or show an outline of events. Thanks to the possibility of adding icons, avatars and links and the way of presenting the elements of content, your timeline will be clear for users and will make yor website or app more attractive.
 
-```html example height="400px" scrollable
+```html example height="400px" scrollable background="base"
 <ul class="timeline">
   <li class="timeline-event">
     <div class="timeline-event-icon bg-twitter-lt">
@@ -86,9 +87,15 @@ The available timeline design is comprised of many components that will help you
         <div class="text-secondary float-end">2 days ago</div>
         <h4>+3 Friend Requests</h4>
         <div class="avatar-list mt-3">
-          <span class="avatar" style="background-image: url(...)"><span class="badge bg-success"></span></span>
-          <span class="avatar"><span class="badge bg-success"></span>JL</span>
-          <span class="avatar" style="background-image: url(...)"><span class="badge bg-success"></span></span>
+          <span class="avatar" style="background-image: url(...)">
+            <span class="badge bg-success"></span>
+          </span>
+          <span class="avatar">
+            <span class="badge bg-success"></span>JL
+          </span>
+          <span class="avatar" style="background-image: url(...)">
+            <span class="badge bg-success"></span>
+          </span>
         </div>
       </div>
     </div>
@@ -147,7 +154,7 @@ The available timeline design is comprised of many components that will help you
 ```html
 <ul class="timeline">
   <li class="timeline-event">
-    <div class="timeline-event-icon bg-twitter-lt"><!-- SVG icon from http://tabler-icons.io/i/brand-twitter -->
+    <div class="timeline-event-icon bg-twitter-lt"><!-- SVG icon from http://tabler.io/icons/icon/brand-twitter -->
       <svg>...</svg>
     </div>
     <div class="card timeline-event-card">
@@ -159,7 +166,7 @@ The available timeline design is comprised of many components that will help you
     </div>
   </li>
   <li class="timeline-event">
-    <div class="timeline-event-icon"><!-- SVG icon from http://tabler-icons.io/i/briefcase -->
+    <div class="timeline-event-icon"><!-- SVG icon from http://tabler.io/icons/icon/briefcase -->
       <svg>...</svg>
     </div>
     <div class="card timeline-event-card">
@@ -171,7 +178,7 @@ The available timeline design is comprised of many components that will help you
     </div>
   </li>
   <li class="timeline-event">
-    <div class="timeline-event-icon"><!-- SVG icon from http://tabler-icons.io/i/check -->
+    <div class="timeline-event-icon"><!-- SVG icon from http://tabler.io/icons/icon/check -->
       <svg>...</svg>
     </div>
     <div class="card timeline-event-card">
@@ -183,7 +190,7 @@ The available timeline design is comprised of many components that will help you
     </div>
   </li>
   <li class="timeline-event">
-    <div class="timeline-event-icon bg-facebook-lt"><!-- SVG icon from http://tabler-icons.io/i/brand-facebook -->
+    <div class="timeline-event-icon bg-facebook-lt"><!-- SVG icon from http://tabler.io/icons/icon/brand-facebook -->
       <svg>...</svg>
     </div>
     <div class="card timeline-event-card">
@@ -195,7 +202,7 @@ The available timeline design is comprised of many components that will help you
     </div>
   </li>
   <li class="timeline-event">
-    <div class="timeline-event-icon"><!-- SVG icon from http://tabler-icons.io/i/user-plus -->
+    <div class="timeline-event-icon"><!-- SVG icon from http://tabler.io/icons/icon/user-plus -->
       <svg>...</svg>
     </div>
     <div class="card timeline-event-card">
@@ -204,17 +211,20 @@ The available timeline design is comprised of many components that will help you
         <h4>+3 Friend Requests</h4>
         <div class="avatar-list mt-3">
           <span class="avatar" style="background-image: url(...)">
-            <span class="badge bg-success"></span></span>
+            <span class="badge bg-success"></span>
+          </span>
           <span class="avatar">
-            <span class="badge bg-success"></span>JL</span>
+            <span class="badge bg-success"></span>JL
+          </span>
           <span class="avatar" style="background-image: url(...)">
-            <span class="badge bg-success"></span></span>
+            <span class="badge bg-success"></span>
+          </span>
         </div>
       </div>
     </div>
   </li>
   <li class="timeline-event">
-    <div class="timeline-event-icon"><!-- SVG icon from http://tabler-icons.io/i/photo -->
+    <div class="timeline-event-icon"><!-- SVG icon from http://tabler.io/icons/icon/photo -->
       <svg>...</svg>
     </div>
     <div class="card timeline-event-card">
@@ -239,7 +249,7 @@ The available timeline design is comprised of many components that will help you
     </div>
   </li>
   <li class="timeline-event">
-    <div class="timeline-event-icon"><!-- SVG icon from http://tabler-icons.io/i/settings -->
+    <div class="timeline-event-icon"><!-- SVG icon from http://tabler.io/icons/icon/settings -->
       <svg>...</svg>
     </div>
     <div class="card timeline-event-card">
@@ -258,7 +268,7 @@ The available timeline design is comprised of many components that will help you
 
 Use a simplified version of the timeline, if it suits your design better. You can still make use of all the available timeline components.
 
-```html example height="400px" scrollable
+```html example height="400px" scrollable background="base"
 <ul class="timeline timeline-simple">
   <li class="timeline-event">
     <div class="timeline-event-icon bg-twitter-lt">
@@ -337,9 +347,15 @@ Use a simplified version of the timeline, if it suits your design better. You ca
         <div class="text-secondary float-end">2 days ago</div>
         <h4>+3 Friend Requests</h4>
         <div class="avatar-list mt-3">
-          <span class="avatar" style="background-image: url(...)"><span class="badge bg-success"></span></span>
-          <span class="avatar"><span class="badge bg-success"></span>JL</span>
-          <span class="avatar" style="background-image: url(...)"><span class="badge bg-success"></span></span>
+          <span class="avatar" style="background-image: url(...)">
+            <span class="badge bg-success"></span>
+          </span>
+          <span class="avatar">
+            <span class="badge bg-success"></span>JL
+          </span>
+          <span class="avatar" style="background-image: url(...)">
+            <span class="badge bg-success"></span>
+          </span>
         </div>
       </div>
     </div>
@@ -398,7 +414,7 @@ Use a simplified version of the timeline, if it suits your design better. You ca
 ```html
 <ul class="timeline timeline-simple">
   <li class="timeline-event">
-    <div class="timeline-event-icon bg-twitter-lt"><!-- SVG icon from http://tabler-icons.io/i/brand-twitter -->
+    <div class="timeline-event-icon bg-twitter-lt"><!-- SVG icon from http://tabler.io/icons/icon/brand-twitter -->
       <svg>...</svg>
     </div>
     <div class="card timeline-event-card">
@@ -410,7 +426,7 @@ Use a simplified version of the timeline, if it suits your design better. You ca
     </div>
   </li>
   <li class="timeline-event">
-    <div class="timeline-event-icon"><!-- SVG icon from http://tabler-icons.io/i/briefcase -->
+    <div class="timeline-event-icon"><!-- SVG icon from http://tabler.io/icons/icon/briefcase -->
       <svg>...</svg>
     </div>
     <div class="card timeline-event-card">
@@ -422,7 +438,7 @@ Use a simplified version of the timeline, if it suits your design better. You ca
     </div>
   </li>
   <li class="timeline-event">
-    <div class="timeline-event-icon"><!-- SVG icon from http://tabler-icons.io/i/check -->
+    <div class="timeline-event-icon"><!-- SVG icon from http://tabler.io/icons/icon/check -->
       <svg>...</svg>
     </div>
     <div class="card timeline-event-card">
@@ -434,7 +450,7 @@ Use a simplified version of the timeline, if it suits your design better. You ca
     </div>
   </li>
   <li class="timeline-event">
-    <div class="timeline-event-icon bg-facebook-lt"><!-- SVG icon from http://tabler-icons.io/i/brand-facebook -->
+    <div class="timeline-event-icon bg-facebook-lt"><!-- SVG icon from http://tabler.io/icons/icon/brand-facebook -->
       <svg>...</svg>
     </div>
     <div class="card timeline-event-card">
@@ -446,7 +462,7 @@ Use a simplified version of the timeline, if it suits your design better. You ca
     </div>
   </li>
   <li class="timeline-event">
-    <div class="timeline-event-icon"><!-- SVG icon from http://tabler-icons.io/i/user-plus -->
+    <div class="timeline-event-icon"><!-- SVG icon from http://tabler.io/icons/icon/user-plus -->
       <svg>...</svg>
     </div>
     <div class="card timeline-event-card">
@@ -455,17 +471,20 @@ Use a simplified version of the timeline, if it suits your design better. You ca
         <h4>+3 Friend Requests</h4>
         <div class="avatar-list mt-3">
           <span class="avatar" style="background-image: url(...)">
-            <span class="badge bg-success"></span></span>
+            <span class="badge bg-success"></span>
+          </span>
           <span class="avatar">
-            <span class="badge bg-success"></span>JL</span>
+            <span class="badge bg-success"></span>JL
+          </span>
           <span class="avatar" style="background-image: url(...)">
-            <span class="badge bg-success"></span></span>
+            <span class="badge bg-success"></span>
+          </span>
         </div>
       </div>
     </div>
   </li>
   <li class="timeline-event">
-    <div class="timeline-event-icon"><!-- SVG icon from http://tabler-icons.io/i/photo -->
+    <div class="timeline-event-icon"><!-- SVG icon from http://tabler.io/icons/icon/photo -->
       <svg>...</svg>
     </div>
     <div class="card timeline-event-card">
@@ -490,7 +509,7 @@ Use a simplified version of the timeline, if it suits your design better. You ca
     </div>
   </li>
   <li class="timeline-event">
-    <div class="timeline-event-icon"><!-- SVG icon from http://tabler-icons.io/i/settings -->
+    <div class="timeline-event-icon"><!-- SVG icon from http://tabler.io/icons/icon/settings -->
       <svg>...</svg>
     </div>
     <div class="card timeline-event-card">

package/docs/ui/components/tinymce.mdx

@@ -1,7 +1,8 @@
 ---
 title: TinyMCE
 libs: tinymce
-description: The WYSIWYG editor that is flexible, customizable, and designed with the user in mind. TinyMCE can handle any challenge, from the most simple implementation through to the most complex use case.
+summary: The WYSIWYG editor that is flexible, customizable, and designed with the user in mind. TinyMCE can handle any challenge, from the most simple implementation through to the most complex use case.
+description: Flexible WYSIWYG editor for content.
 ---
 
 [TinyMCE](https://www.tiny.cloud/docs/) documentation.
@@ -10,7 +11,7 @@ description: The WYSIWYG editor that is flexible, customizable, and designed wit
 
 Initialize TinyMCE 6 on any element (or elements) on the web page by passing an object containing a selector value to `tinymce.init()`. The selector value can be any valid CSS selector.
 
-```html example code centered columns={2} height="25rem"
+```html example centered columns={2} height="25rem"
 <form method="post">
   <textarea id="tinymce-default">Hello, <b>Tabler</b>!</textarea>
 </form>

package/docs/ui/components/toasts.mdx

@@ -1,7 +1,8 @@
 ---
 title: Toasts
-description: Toasts are lightweight alert boxes which display for a few seconds after a user has taken an action, to inform them of the state or outcome. They can be used when a user clicks a button or submits a form and their aim is to provide feedback, rather than encourage to take action.
+summary: Toasts are lightweight alert boxes which display for a few seconds after a user has taken an action, to inform them of the state or outcome. They can be used when a user clicks a button or submits a form and their aim is to provide feedback, rather than encourage to take action.
 bootstrapLink: components/toasts/
+description: Display lightweight alert notifications.
 ---
 
 ## Default markup
@@ -44,7 +45,7 @@ Toasts blend over the elements they appear over. If a browser supports the `back
 
 Stack multiple toasts together by putting them within one `.toast-container`.
 
-```html example code height="260px"
+```html example height="260px"
 <div class="toast-container">
   <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false" data-bs-toggle="toast">
     <div class="toast-header">

package/docs/ui/components/tooltips.mdx

@@ -1,14 +1,15 @@
 ---
 title: Tooltips
-description: Tooltips are text labels which appear when a user hovers over an interface element. They explain the interface elements that may be unclear for users and guide them when they need help. If used properly, tooltips can significantly enhance user experience and add value to your website or software.
+summary: Tooltips are text labels which appear when a user hovers over an interface element. They explain the interface elements that may be unclear for users and guide them when they need help. If used properly, tooltips can significantly enhance user experience and add value to your website or software.
 bootstrapLink: components/tooltips/
+description: Guide users with informative tooltips.
 ---
 
 ## Default markup
 
 Use the default markup to create tooltips that will help users understand particular elements of your interface. You can decide where the text label is to be displayed - at the top, bottom or on either side of the element.
 
-```html code example centered separated
+```html example centered separated
 <button type="button" class="btn" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
   Tooltip on top
 </button>
@@ -27,7 +28,7 @@ Use the default markup to create tooltips that will help users understand partic
 
 If the default tooltip is not enough, you can add the option to use HTML code in the text to highlight particular bits of information and make the content more attractive.
 
-```html code example height="7rem"
+```html example height="7rem"
 <button type="button" class="btn" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
   Tooltip with HTML
 </button>

package/docs/ui/components/tracking.mdx

@@ -1,6 +1,7 @@
 ---
 title: Tracking
-description: Component for visualising activity logs or other monitoring-related data. With its ability to show data in a visually appealing and easily understandable way, the tracking component is an essential tool for any organization that relies on data monitoring and analysis to optimize performance and user experience.
+summary: Component for visualising activity logs or other monitoring-related data. With its ability to show data in a visually appealing and easily understandable way, the tracking component is an essential tool for any organization that relies on data monitoring and analysis to optimize performance and user experience.
+description: Monitor data activity visually.
 ---
 
 ## Basic example
@@ -124,39 +125,43 @@ You can add a tracking component inside the cards to give your reports a fresh l
 ```html
 <div class="card">
   <div class="card-body">
-	 <div class="d-flex align-items-center">
-		<div class="subheader">Status monitoring</div>
-		<div class="ms-auto lh-1">
-		  <div class="dropdown">
-			 <a class="dropdown-toggle text-secondary" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Current month</a>
-			 <div class="dropdown-menu dropdown-menu-end">
-				<a class="dropdown-item active" href="#">Current month</a>
-				<a class="dropdown-item" href="#">Last month</a>
-				<a class="dropdown-item" href="#">Last 3 months</a>
-			 </div>
-		  </div>
-		</div>
-	 </div>
-	 <div class="d-flex align-items-baseline">
-		<div class="h1 mb-3 me-2">99.5%</div>
-		<div class="me-auto">
-		<span class="text-green d-inline-flex align-items-center lh-1">
-		  2%
-		  <svg xmlns="http://www.w3.org/2000/svg" class="icon ms-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="3 17 9 11 13 15 21 7" /><polyline points="14 7 21 7 21 14" /></svg>
-		</span>
-		</div>
-	 </div>
-	 <div class="mt-2">
-		<div class="tracking">
-		  <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational"></div>
-		  <div class="tracking-block bg-danger" data-bs-toggle="tooltip" data-bs-placement="top" title="Downtime"></div>
-		  <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational"></div>
-		  <div class="tracking-block bg-warning" data-bs-toggle="tooltip" data-bs-placement="top" title="Big load"></div>
-		  <div class="tracking-block" data-bs-toggle="tooltip" data-bs-placement="top" title="No data"></div>
-		  <div class="tracking-block" data-bs-toggle="tooltip" data-bs-placement="top" title="No data"></div>
-		  ...
-		</div>
-	 </div>
+    <div class="d-flex align-items-center">
+      <div class="subheader">Status monitoring</div>
+      <div class="ms-auto lh-1">
+        <div class="dropdown">
+          <a class="dropdown-toggle text-secondary" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Current month</a>
+          <div class="dropdown-menu dropdown-menu-end">
+            <a class="dropdown-item active" href="#">Current month</a>
+            <a class="dropdown-item" href="#">Last month</a>
+            <a class="dropdown-item" href="#">Last 3 months</a>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="d-flex align-items-baseline">
+      <div class="h1 mb-3 me-2">99.5%</div>
+      <div class="me-auto">
+        <span class="text-green d-inline-flex align-items-center lh-1">
+          2%
+          <svg xmlns="http://www.w3.org/2000/svg" class="icon ms-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+            <polyline points="3 17 9 11 13 15 21 7" />
+            <polyline points="14 7 21 7 21 14" />
+          </svg>
+        </span>
+      </div>
+    </div>
+    <div class="mt-2">
+      <div class="tracking">
+        <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational"></div>
+        <div class="tracking-block bg-danger" data-bs-toggle="tooltip" data-bs-placement="top" title="Downtime"></div>
+        <div class="tracking-block bg-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Operational"></div>
+        <div class="tracking-block bg-warning" data-bs-toggle="tooltip" data-bs-placement="top" title="Big load"></div>
+        <div class="tracking-block" data-bs-toggle="tooltip" data-bs-placement="top" title="No data"></div>
+        <div class="tracking-block" data-bs-toggle="tooltip" data-bs-placement="top" title="No data"></div>
+        ...
+      </div>
+    </div>
   </div>
 </div>
 ```

package/docs/ui/forms/form-color-check.mdx

@@ -1,10 +1,21 @@
 ---
 title: Color check
+summary: The color check is a great way to make your form more user-friendly and engaging. You can use the color check to create a visually appealing form that will help users make decisions quickly and easily.
+description: Enhance forms with color checks.
 ---
 
-Your input controls can come in a variety of colors, depending on your preferences. Click [here](/docs/getting-started/colors) to see the list of available colors.
+Your input controls can come in a variety of colors, depending on your preferences. Click [here](/docs/ui/base/colors) to see the list of available colors.
 
-```html example centered
+```html
+<label class="form-colorinput">
+  <input name="..." type="radio" value="..." class="form-colorinput-input" />
+  <span class="form-colorinput-color bg-lime"></span>
+</label>
+```
+
+There is also an example of a color input:
+
+```html example centered background="bg-light"
 <div class="mb-3">
   <label class="form-label">Color Input</label>
   <div class="row g-2">
@@ -74,18 +85,20 @@ Your input controls can come in a variety of colors, depending on your preferenc
         <span class="form-colorinput-color bg-lime"></span>
       </label>
     </div>
+    <div class="col-auto">
+      <label class="form-colorinput">
+        <input name="color" type="radio" value="green" class="form-colorinput-input" />
+        <span class="form-colorinput-color bg-green"></span>
+      </label>
+    </div>
   </div>
 </div>
 ```
 
-```html
-<label class="form-colorinput">
-  <input name="color" type="radio" value="lime" class="form-colorinput-input" />
-  <span class="form-colorinput-color bg-lime"></span>
-</label>
-```
+If you need to select only one color, you can use the radio input type:
 
-```html example centered
+
+```html example centered background="bg-light"
 <div class="mb-3">
   <label class="form-label">Color Input</label>
   <div class="row g-2">
@@ -155,13 +168,19 @@ Your input controls can come in a variety of colors, depending on your preferenc
         <span class="form-colorinput-color bg-lime rounded-circle"></span>
       </label>
     </div>
+    <div class="col-auto">
+      <label class="form-colorinput">
+        <input name="color-rounded" type="radio" value="green" class="form-colorinput-input" />
+        <span class="form-colorinput-color bg-green rounded-circle"></span>
+      </label>
+    </div>
   </div>
 </div>
 ```
 
 ```html
 <label class="form-colorinput">
-  <input name="color-rounded" type="radio" value="dark" class="form-colorinput-input" />
+  <input name="..." type="radio" value="..." class="form-colorinput-input" />
   <span class="form-colorinput-color bg-dark rounded-circle"></span>
 </label>
 ```
@@ -170,7 +189,13 @@ Your input controls can come in a variety of colors, depending on your preferenc
 
 Add an color picker to your form to let users customise it according to their preferences.
 
-```html example code centered
+```html
+<input type="color" class="form-control form-control-color" value="#066fd1" title="Choose your color">
+```
+
+There is also an example of a color picker input:
+
+```html example centered
 <div class="mb-3">
   <label class="form-label">Color picker</label>
   <input type="color" class="form-control form-control-color" value="#066fd1" title="Choose your color">

package/docs/ui/forms/form-elements.mdx

@@ -1,22 +1,38 @@
 ---
 title: Form elements
-description: Forms are one of the most important types of interaction with a website or app. Since their aim is to enable users to make a purchase, subscribe to a service or sign up to create an account, it's important to make sure they are easy to complete and help increase conversion rates. Use the available elements to create forms which are well-structured and user-friendly.
+summary: Forms are one of the most important types of interaction with a website or app. Since their aim is to enable users to make a purchase, subscribe to a service or sign up to create an account, it's important to make sure they are easy to complete and help increase conversion rates. Use the available elements to create forms which are well-structured and user-friendly.
 bootstrapLink: components/forms/
 libs: nouislider
+description: Design user-friendly and effective forms.
+order: 1
 ---
 
 ## Classic inputs
 
-Use classic, user-friendly inputs, label them appropriately and include input placeholders that will help users avoid confusion when completing a form.
+Use classic, user-friendly inputs, label them appropriately and include input placeholders that will help users avoid confusion when completing a form. Add the `form-control` class to style your input controls.
 
-```html code example centered columns={1} height="20rem"
+```html
+<input type="text" class="form-control" name="example-text-input" placeholder="Input placeholder" />
+```
+
+All variants of the input control are available in the examples below:
+
+```html example columns={1} height="25rem"
 <div class="mb-3">
   <label class="form-label">Text</label>
   <input type="text" class="form-control" name="example-text-input" placeholder="Input placeholder" />
 </div>
 <div class="mb-3">
   <label class="form-label">Password</label>
-  <input type="text" class="form-control" name="example-password-input" placeholder="Input placeholder" />
+  <input type="password" class="form-control" name="example-password-input" placeholder="Input placeholder" />
+</div>
+<div class="mb-3">
+  <label class="form-label">Disabled</label>
+  <input type="text" class="form-control" name="example-password-input" placeholder="Input placeholder" disabled />
+</div>
+<div class="mb-3">
+  <label class="form-label">Readonly</label>
+  <input type="text" class="form-control" name="example-password-input" value="Readolny value" readonly />
 </div>
 ```
 
@@ -48,7 +64,7 @@ Use the `form-control-rounded` class if you prefer form controls with rounded co
   <div class="input-icon">
     <input type="text" value="" class="form-control form-control-rounded" placeholder="Search…" />
     <span class="input-icon-addon">
-      <!-- SVG icon from http://tabler-icons.io/i/search -->
+      <!-- SVG icon from http://tabler.io/icons/icon/search -->
       <svg>...</svg>
     </span>
   </div>
@@ -59,7 +75,7 @@ Use the `form-control-rounded` class if you prefer form controls with rounded co
 
 You can remove borders from your form control by adding the `form-control-flush` class.
 
-```html code example centered columns={1} height="20rem"
+```html example centered columns={1} height="20rem"
 <div class="mb-3">
   <label class="form-label">Form control flush</label>
   <input type="text" class="form-control form-control-flush" name="Form control flush" placeholder="Text.." />
@@ -70,7 +86,7 @@ You can remove borders from your form control by adding the `form-control-flush`
 
 Add icons to your input controls to suggest users what they should enter or inform them of the current state of a form element.
 
-```html example code centered columns={1} height="20rem"
+```html example centered columns={1} height="20rem"
 <div class="mb-3">
   <label class="form-label">Icon input</label>
   <div class="input-icon mb-3">
@@ -115,7 +131,7 @@ Add icons to your input controls to suggest users what they should enter or info
 
 Include an additional element in your input section, such as a button which can be used to submit the information enetered in the input control.
 
-```html example code centered columns={1} height="20rem"
+```html example centered columns={1} height="20rem"
 <div class="mb-3">
   <label class="form-label">Separated inputs</label>
   <div class="row g-2">
@@ -142,7 +158,7 @@ Use a multi-line text input control to enable users to enter longer pieces of te
 
 Add one of the available selects - either a dropdown or a multiple choice select - to let users choose from a predefined set of options.
 
-```html code example centered columns={1} height="30rem"
+```html example centered columns={1} height="30rem"
 <div class="mb-3">
   <label class="form-label">Textarea</label>
   <textarea class="form-control" name="example-textarea" placeholder="Textarea placeholder"></textarea>
@@ -169,7 +185,7 @@ Add one of the available selects - either a dropdown or a multiple choice select
 
 Choose the size of an input control that will go well with your form design. Apart from the default size, you can also use small and large input controls.
 
-```html code example centered columns={1} height="20rem"
+```html example centered columns={1} height="20rem"
 <div class="mb-3">
   <label class="form-label">Input sizing</label>
   <input class="form-control form-control-lg mb-2" type="text" placeholder=".form-control-lg" />
@@ -350,7 +366,7 @@ Add a range slider to make it possible for users to set a value or range, such a
 
 Create a group of input controls and place add-ons on either side of an input.
 
-```html code example centered columns={1} height="20rem"
+```html example centered columns={1} height="20rem"
 <div class="mb-3">
   <label class="form-label">Input group</label>
   <div class="input-group mb-2">
@@ -381,7 +397,7 @@ Create a group of input controls and place add-ons on either side of an input.
 
 Add checkboxes or radio buttons on either side of your input control.
 
-```html code example centered columns={1} height="20rem"
+```html example centered columns={1} height="20rem"
 <div class="mb-3">
   <label class="form-label">Input with checkbox or radios</label>
   <div class="input-group mb-2">
@@ -403,7 +419,7 @@ Add checkboxes or radio buttons on either side of your input control.
 
 Add text to your input control, either before or after the text which is to be entered by a user.
 
-```html code example centered columns={1} height="20rem"
+```html example centered columns={1} height="20rem"
 <div class="mb-3">
   <label class="form-label">Input with prepended text</label>
   <div class="input-group input-group-flat mb-2">
@@ -425,7 +441,7 @@ Add text to your input control, either before or after the text which is to be e
 
 Include a link in your input control to add a clickable element within the control.
 
-```html code example centered columns={1} height="20rem"
+```html example centered columns={1} height="20rem"
 <div class="mb-3">
   <label class="form-label">Input with appended link</label>
   <div class="input-group input-group-flat">
@@ -441,7 +457,7 @@ Include a link in your input control to add a clickable element within the contr
 
 Include a `<kbd>` in your input control to add shortcut to the control.
 
-```html code example centered columns={1}
+```html example centered columns={1}
 <div class="mb-3">
   <label class="form-label">Input with appended link</label>
   <div class="input-group input-group-flat">
@@ -457,7 +473,7 @@ Include a `<kbd>` in your input control to add shortcut to the control.
 
 Add an icon link which you want to display at the end of your input control to visually represent actions which a user can take.
 
-```html example code centered columns={1} height="20rem"
+```html example centered columns={1} height="20rem"
 <div class="mb-3">
   <label class="form-label">Input with appended icon links</label>
   <div class="input-group input-group-flat">

package/docs/ui/forms/form-fieldset.mdx

@@ -1,6 +1,7 @@
 ---
 title: Form fieldset
-description: By grouping form elements together with the fieldset element, you can improve the organization and accessibility of your forms, making it easier for users to understand the purpose of each input and provide accurate information.
+summary: By grouping form elements together with the fieldset element, you can improve the organization and accessibility of your forms, making it easier for users to understand the purpose of each input and provide accurate information.
+description: Group form elements for clarity.
 ---
 
 ## Default markup
@@ -37,7 +38,7 @@ Group parts of your form to make it well-structured and clearer for users, using
   ...
   <div class="mb-3">
     <label class="form-label required">Company</label>
-    <input type="text" class="form-control" autocomplete="off"/>
+    <input type="text" class="form-control" autocomplete="off" />
   </div>
   ...
 </fieldset>