Migrate the grid component to custom property methods

docs/src/components/CollectionNavi.astro

@@ -38,8 +38,8 @@ const cp = currentPage(new URL(Astro.request.url).pathname, {
           >
             <span class="flex-grow-1">{entry.data.title}</span>
             {
-              entry.data.state && (
-                <Icon name={entry.data.state} iconClass="icon_size_sm foreground-primary" />
+              entry.data.status && (
+                <Icon name={entry.data.status} iconClass="icon_size_sm foreground-primary" />
               )
             }
           </a>

docs/src/content/config.ts

@@ -7,7 +7,7 @@ const packages = defineCollection({
     title: z.string(),
     description: z.string(),
     package: z.string(),
-    state: z.string().optional(),
+    status: z.string().optional(),
   }),
 });
 

docs/src/content/packages/base.mdx

@@ -2,7 +2,7 @@
 title: Base
 description: "Includes useful default styles and base modules for common HTML elements."
 package: "@vrembem/base"
-state: "layers"
+status: "layers"
 ---
 
 import CodeExample from '../../components/CodeExample.astro';

docs/src/content/packages/button.mdx

@@ -2,7 +2,7 @@
 title: Button
 description: "Buttons are a simple component that allow users to take actions."
 package: "@vrembem/button"
-state: "check"
+status: "check"
 ---
 
 import CodeExample from '../../components/CodeExample.astro';

docs/src/content/packages/card.mdx

@@ -2,7 +2,7 @@
 title: Card
 description: "The card component provides a flexible and highly composable content container."
 package: "@vrembem/card"
-state: "check"
+status: "check"
 ---
 
 import CodeExample from '../../components/CodeExample.astro';
@@ -31,7 +31,7 @@ Cards are a highly composable container component that comes with a variety of e
 - `card__image`
 - `card__title`
 
-<CodeExample lang="html">
+<CodeExample>
   <div slot="output">
     <div class="card">
       <img class="card__image" src="https://picsum.photos/id/335/600/300" />
@@ -57,7 +57,7 @@ For creating more distinct sections in a card, header and footer elements can be
 - `card__header`
 - `card__footer`
 
-<CodeExample lang="html">
+<CodeExample>
   <div slot="output" class="gap-y">
     <div class="card">
       <div class="card__header">
@@ -98,7 +98,7 @@ Card screens and backgrounds are displayed behind other card elements. These can
 - `card__screen`
 - `card__background`
 
-<CodeExample lang="html">
+<CodeExample>
   <div slot="output" class="gap-y">
     <div class="card vb-theme-light">
       <div class="card__header">
@@ -132,7 +132,7 @@ Card screens and backgrounds are displayed behind other card elements. These can
 
 When creating a card using the `<a>` element, additional styles are applied to make the card more visually interactive with hover and focus styles.
 
-<CodeExample lang="html">
+<CodeExample>
   <div slot="output" class="gap-y">
     <a href="#" class="card">
       <img class="card__image" src="https://picsum.photos/id/106/600/300" />

docs/src/content/packages/checkbox.mdx

@@ -2,7 +2,7 @@
 title: Checkbox
 description: "Checkboxes allow the user to select multiple options from a set."
 package: "@vrembem/checkbox"
-state: "check"
+status: "check"
 ---
 
 import CodeExample from '../../components/CodeExample.astro';
@@ -85,7 +85,7 @@ Indeterminate checkboxes need to be set in JavaScript though styling is provided
 
 For checkboxes with labels, wrap the checkbox component along with the text label using the `<label>` element.
 
-<CodeExample lang="html">
+<CodeExample>
   <Fragment slot="output">
     <label class="display-inline-flex flex-align-center flex-gap-xs">
       <span class="checkbox">
@@ -137,7 +137,7 @@ For checkboxes with labels, wrap the checkbox component along with the text labe
 
 Adjust the size of a checkbox by increasing or decreasing its width and height. By default, the checkbox scale will provide a checkbox height of 30px (small `checkbox_size_sm`), 40px (default) and 50px (large `checkbox_size_lg`).
 
-<CodeExample lang="html">
+<CodeExample>
   <Fragment slot="output">
     <span class="checkbox checkbox_size_sm">
       <input class="checkbox__native" type="checkbox" checked />

docs/src/content/packages/core.mdx

@@ -2,7 +2,7 @@
 title: Core
 description: "Shared variables, functions and mixins for Vrembem components."
 package: "@vrembem/core"
-state: "settings"
+status: "settings"
 ---
 
 import CodeExample from '../../components/CodeExample.astro';

docs/src/content/packages/dialog.mdx

@@ -2,7 +2,7 @@
 title: Dialog
 description: "A component that facilitates a conversation between the system and the user. They often request information or an action from the user."
 package: "@vrembem/dialog"
-state: "check"
+status: "check"
 ---
 
 import CodeExample from '../../components/CodeExample.astro';
@@ -27,7 +27,7 @@ npm install @vrembem/dialog
 
 Dialog is a highly composable container component that comes with a variety of elements. The most basic implementation being `dialog` and a `dialog__body` element:
 
-<CodeExample lang="html">
+<CodeExample>
   <Fragment slot="output">
     <div class="dialog">
       <div class="dialog__body">
@@ -48,7 +48,7 @@ Dialog is a highly composable container component that comes with a variety of e
 
 The dialog component comes with a variety of elements to help fit a wide range of use cases and applications. You can mix and match these elements within the dialog component as needed.
 
-<CodeExample lang="html">
+<CodeExample>
   <Fragment slot="output">
     <div class="dialog">
       <div class="dialog__header">

docs/src/content/packages/drawer.mdx

@@ -2,7 +2,7 @@
 title: Drawer
 description: "A container component that slides in from the left or right. Typically containing menus, search or other content."
 package: "@vrembem/drawer"
-state: "circle"
+status: "circle"
 ---
 
 import CodeExample from "../../components/CodeExample.astro";
@@ -36,7 +36,7 @@ Drawers are composed using classes and data attributes for their triggers. The b
 - `drawer-frame`: Applied to the parent element wrapping all drawers and the main content.
 - `drawer-main`: Applied to the element containing the main content. This should be the last child of the `drawer-frame` element.
 
-<CodeExample lang="html" flush={true}>
+<CodeExample flush={true}>
   <Fragment slot="output">
     <div class="drawer-frame">
       <aside id="drawer-1" class="drawer">
@@ -81,7 +81,7 @@ Drawer triggers are defined using three data attributes:
 - `data-drawer-close`: Closes a drawer. Will close the parent drawer if left value-less. Can also take an id of a drawer to close.
 - `data-drawer-toggle`: Toggles a drawer opened or closed. Takes the id of the drawer it's meant to toggle.
 
-<CodeExample lang="html">
+<CodeExample>
   ```html
   <button data-drawer-open="[unique-id]">...</button>
   <button data-drawer-close="[unique-id]">...</button>
@@ -91,7 +91,7 @@ Drawer triggers are defined using three data attributes:
 
 The dialog element of a drawer is defined using the `drawer__dialog` class. Along with a role attribute (e.g. `role="dialog"`), authors should provide drawer dialogs with [`aria-labelledby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) and [`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) attributes if applicable to further improve accessibility. The `aria-modal` attribute is applied automatically based on if the drawer is currently in modal mode.
 
-<CodeExample lang="html" flush={true}>
+<CodeExample flush={true}>
   <Fragment slot="output">
     <div class="drawer-frame" style="min-height: 16rem;">
       <aside id="drawer-2" class="drawer">
@@ -176,7 +176,7 @@ There are multiple ways a modal drawer can be created. The simplest being applyi
 
 In cases where you'd like a drawer to switch modes based on a specific viewport width, use the `data-drawer-breakpoint` data attribute with either a width value or a breakpoint key.
 
-<CodeExample lang="html" flush={true}>
+<CodeExample flush={true}>
   <Fragment slot="output">
     <div class="drawer-frame">
       <aside id="drawer-4" class="drawer" data-drawer-breakpoint="1200px" data-drawer-config="{ 'selectorInert': null, 'selectorOverflow': null }">
@@ -198,7 +198,7 @@ In cases where you'd like a drawer to switch modes based on a specific viewport
         </div>
       </aside>
       <div class="drawer-main padding gap-y">
-        <p>Current viewport width: <code class="vp-width">...</code></p>
+        <p>Current viewport width: <code data-vp-width>...</code></p>
         <ul class="list">
           <li>
             <button class="link" data-drawer-toggle="drawer-4">Toggle</button> - Switches to modal below `1200px` viewports.
@@ -257,7 +257,7 @@ While a modal drawer is active, the contents obscured by the modal are made inac
 
 Drawer dialogs are given focus when opened as long as the `setTabindex` option is set to `true` or if the drawer dialog has `tabindex="-1"` set manually. If focus on a specific element inside a drawer is preferred, give that element the `data-focus` attribute. Focus is returned to the element that initially triggered the drawer once closed.
 
-<CodeExample lang="html" flush={true}>
+<CodeExample flush={true}>
   <Fragment slot="output">
     <div class="drawer-frame" style="min-height: 8rem;">
       <aside id="drawer-6" class="drawer">
@@ -349,7 +349,7 @@ Here's an example where we want the `drawer-main` content area to be inaccessibl
 
 Applies modal drawer styles to a drawer. This modifier should be applied before the drawer has been registered to properly setup the modal drawer. For more details on modal drawers and how to create them dynamically, please see the [modal drawer](#modal-drawers) documentation.
 
-<CodeExample lang="html" flush={true}>
+<CodeExample flush={true}>
   <Fragment slot="output">
     <div class="drawer-frame" style="min-height: 8rem;">
       <aside id="drawer-8" class="drawer drawer_modal" data-drawer-config="{ 'selectorInert': null, 'selectorOverflow': null }">
@@ -376,7 +376,7 @@ Applies modal drawer styles to a drawer. This modifier should be applied before
 
 Drawers slide in from the left by default. To create a right side drawer, use the `drawer_switch` modifier.
 
-<CodeExample lang="html" flush={true}>
+<CodeExample flush={true}>
   <Fragment slot="output">
     <div class="drawer-frame" style="min-height: 8rem;">
       <aside id="drawer-9" class="drawer drawer_switch">