@aurodesignsystem-dev/auro-formkit 0.0.0-pr1451.9 → 0.0.0-pr1456.0

package/components/checkbox/README.md

@@ -43,7 +43,11 @@ The `<auro-checkbox>` element should be used in situations where users may:
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/componentInstall.md) -->
 <!-- The below content is automatically added from ../../docs/templates/componentInstall.md -->
 
-<pre class="language-shell"><code class="language-shell">$ npm i @aurodesignsystem/auro-formkit</code></pre>
+#### NPM Installation
+
+```shell
+$ npm i @aurodesignsystem/auro-formkit
+```
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/gettingStarted.md) -->
 <!-- The below content is automatically added from ../../docs/templates/gettingStarted.md -->
@@ -52,11 +56,13 @@ The `<auro-checkbox>` element should be used in situations where users may:
 
 When using TypeScript set `moduleResolution` to `bundler`, add the following to your `tsconfig.json`:
 
-<pre class="language-json"><code class="language-json">{
+```json
+{
     "compilerOptions": {
         "moduleResolution": "bundler"
     }
-}</code></pre>
+}
+```
 
 This configuration enables proper module resolution for the component's TypeScript files.
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -67,7 +73,9 @@ This configuration enables proper module resolution for the component's TypeScri
 <!-- The below content is automatically added from ../../docs/templates/bundleInstallDescription.md -->
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
-<pre class="language-html"><code class="language-html">&lt;script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-checkbox/+esm"&gt;&lt;/script&gt;</code></pre>
+```html
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-checkbox/+esm"></script>
+```
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## Formkit Development
@@ -81,7 +89,9 @@ Running the `dev` command will open a `localhost` development server for all com
 
 To only develop a single component, use the `--filter` flag:
 
-<pre class="language-shell"><code class="language-shell">npx turbo dev --filter=@aurodesignsystem/auro-input</code></pre>
+```shell
+npx turbo dev --filter=@aurodesignsystem/auro-input
+```
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/customRegistration.md) -->
 <!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
@@ -96,33 +106,37 @@ However, if you need to load multiple versions of the same component on a single
 
 You can do this by importing only the component class and using the `register(name)` method with a unique name:
 
-<pre class="language-js"><code class="language-js">// Import the class only
+```js
+// Import the class only
 import { AuroCheckbox, AuroCheckboxGroup } from '@aurodesignsystem/auro-formkit/auro-checkbox/class';
-​
+
 // Register with a custom name if desired
 AuroCheckbox.register('custom-checkbox');
-AuroCheckboxGroup.register('custom-checkbox-group');</code></pre>
+AuroCheckboxGroup.register('custom-checkbox-group');
+```
 
 This will create a new custom element `<custom-checkbox>` and `<custom-checkbox-group>` that behaves exactly like `<auro-checkbox>` and `<auro-checkbox-group>`, allowing both to coexist on the same page without interfering with each other.
 
 <div class="exampleWrapper exampleWrapper--flex">
-<custom-checkbox-group>
-<span slot="legend">Form label goes here</span>
-<custom-checkbox value="value1" name="custom" id="checkbox-custom1">Custom checkbox option</custom-checkbox>
-<custom-checkbox value="value2" name="custom" id="checkbox-custom2" checked>Custom checkbox option</custom-checkbox>
-<custom-checkbox value="value3" name="custom" id="checkbox-custom3">Custom checkbox option</custom-checkbox>
-<custom-checkbox value="value4" name="custom" id="checkbox-custom4">Custom checkbox option</custom-checkbox>
-</custom-checkbox-group>
+  <custom-checkbox-group>
+    <span slot="legend">Form label goes here</span>
+    <custom-checkbox value="value1" name="custom" id="checkbox-custom1">Custom checkbox option</custom-checkbox>
+    <custom-checkbox value="value2" name="custom" id="checkbox-custom2" checked>Custom checkbox option</custom-checkbox>
+    <custom-checkbox value="value3" name="custom" id="checkbox-custom3">Custom checkbox option</custom-checkbox>
+    <custom-checkbox value="value4" name="custom" id="checkbox-custom4">Custom checkbox option</custom-checkbox>
+  </custom-checkbox-group>
 </div>
 <auro-accordion alignRight>
-<span slot="trigger">See code</span>
+  <span slot="trigger">See code</span>
 
-<pre class="language-html"><code class="language-html">&lt;custom-checkbox-group&gt;
-  &lt;span slot="legend"&gt;Form label goes here&lt;/span&gt;
-  &lt;custom-checkbox value="value1" name="custom" id="checkbox-custom1"&gt;Custom checkbox option&lt;/custom-checkbox&gt;
-  &lt;custom-checkbox value="value2" name="custom" id="checkbox-custom2" checked&gt;Custom checkbox option&lt;/custom-checkbox&gt;
-  &lt;custom-checkbox value="value3" name="custom" id="checkbox-custom3"&gt;Custom checkbox option&lt;/custom-checkbox&gt;
-  &lt;custom-checkbox value="value4" name="custom" id="checkbox-custom4"&gt;Custom checkbox option&lt;/custom-checkbox&gt;
-&lt;/custom-checkbox-group&gt;</code></pre>
+```html
+  <custom-checkbox-group>
+    <span slot="legend">Form label goes here</span>
+    <custom-checkbox value="value1" name="custom" id="checkbox-custom1">Custom checkbox option</custom-checkbox>
+    <custom-checkbox value="value2" name="custom" id="checkbox-custom2" checked>Custom checkbox option</custom-checkbox>
+    <custom-checkbox value="value3" name="custom" id="checkbox-custom3">Custom checkbox option</custom-checkbox>
+    <custom-checkbox value="value4" name="custom" id="checkbox-custom4">Custom checkbox option</custom-checkbox>
+  </custom-checkbox-group>
+```
 </auro-accordion>
 <!-- AURO-GENERATED-CONTENT:END -->