Merge pull request #449 from nobkd/fix/options-layout

convert .options lists to tables

packages/nuejs.org/@lib/technical-content.css

@@ -61,7 +61,7 @@ article {
   }
 
   /* internal links */
-  p > a, li > a {
+  p > a, li > a, td > a {
     text-decoration: underline var(--main-500) 1px;
     color: var(--gray-700);
 

packages/nuejs.org/docs/content-tags.md

@@ -122,16 +122,16 @@ The `large` and `small` attributes can define images with varying aspect ratios,
 
 [.options]
   #### Image options
-  - `alt` Alternate text for accessibility, describing the image's content.
-  - `src` Source URL of the image file.
-  - `caption` Provides context for the image, enhancing user understanding.
-  - `href` Adds a clickable link to the image, guiding users to related content.
-  - `large` Specifies the large version of the image, which can differ in aspect ratio from the small version, allowing for creative art direction.
-  - `loading` Determines the loading behavior: "lazy" enables [lazy loading](https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading) (default value) or "eager" for immediate loading.
-  - `small` Defines the small version of the image for mobile displays, optimizing visual presentation.
-  - `offset` Sets the screen size (in pixels) at which the small image switches to the large one, with a default of 750 pixels.
-  - `size` A shortcut property to provide both width and height simultaneously, formatted as "width x height".
-  - `width` Specifies the width of the image for precise layout control.
+  | `alt` | Alternate text for accessibility, describing the image's content. |
+  | `src` | Source URL of the image file. |
+  | `caption` | Provides context for the image, enhancing user understanding. |
+  | `href` | Adds a clickable link to the image, guiding users to related content. |
+  | `large` | Specifies the large version of the image, which can differ in aspect ratio from the small version, allowing for creative art direction. |
+  | `loading` | Determines the loading behavior: "lazy" enables [lazy loading](https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading) (default value) or "eager" for immediate loading. |
+  | `small` | Defines the small version of the image for mobile displays, optimizing visual presentation. |
+  | `offset` | Sets the screen size (in pixels) at which the small image switches to the large one, with a default of 750 pixels. |
+  | `size` | A shortcut property to provide both width and height simultaneously, formatted as "width x height". |
+  | `width` | Specifies the width of the image for precise layout control. |
 
 ### HTML output
 
@@ -212,14 +212,14 @@ Options can also be specified using YAML for enhanced organization:
 [.options]
   #### Video options
 
-  - `autoplay` Starts the video when the page loads, providing an engaging experience right away. Must be used together with `muted` for autoplay to work across all browsers.
-  - `controls` Displays the built-in video controls provided by the browser, allowing users to play, pause, and adjust the volume.
-  - `loop` Makes the video restart automatically after it reaches the end, which is useful for continuous playback in presentations or promotional content.
-  - `muted` Plays the video without sound, enabling autoplay in browsers that restrict sound playback.
-  - `poster` A URL for an image that will be displayed before the video begins playing, giving users a preview of the content.
-  - `preload` Provides a [hint to the browser](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#preload) about whether to load the video data before the user plays it.
-  - `src` Specifies the URL to the video file, directing the browser to where it can retrieve the video content.
-  - `width` Determines the width of the video player, allowing for precise control over the layout.
+  | `autoplay` | Starts the video when the page loads, providing an engaging experience right away. Must be used together with `muted` for autoplay to work across all browsers. |
+  | `controls` | Displays the built-in video controls provided by the browser, allowing users to play, pause, and adjust the volume. |
+  | `loop` | Makes the video restart automatically after it reaches the end, which is useful for continuous playback in presentations or promotional content. |
+  | `muted` | Plays the video without sound, enabling autoplay in browsers that restrict sound playback. |
+  | `poster` | A URL for an image that will be displayed before the video begins playing, giving users a preview of the content. |
+  | `preload` | Provides a [hint to the browser](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#preload) about whether to load the video data before the user plays it. |
+  | `src` | Specifies the URL to the video file, directing the browser to where it can retrieve the video content. |
+  | `width` | Determines the width of the video player, allowing for precise control over the layout. |
 
 ### HTML output
 
@@ -288,9 +288,9 @@ This example creates a button labeled "Learn more" that opens a popover with ext
 [.options]
   #### Button options
 
-  - `label` The text label for the button. This can also be provided as a plain value or defined within the body content.
-  - `href` The target link for the button. This is the URL the button will navigate to when clicked.
-  - `popovertarget` The ID of the popover to trigger when the button is clicked. This allows buttons to open additional content in popovers.
+  | `label` | The text label for the button. This can also be provided as a plain value or defined within the body content. |
+  | `href` | The target link for the button. This is the URL the button will navigate to when clicked. |
+  | `popovertarget` | The ID of the popover to trigger when the button is clicked. This allows buttons to open additional content in popovers. |
 
 
 ### HTML output
@@ -380,10 +380,10 @@ This allows you to render tables dynamically based on the structured data availa
 [.options]
   #### Table options
 
-  - `caption` Defines a caption for the table, which appears above the table in HTML.
-  - `head` Determines whether the first row should be rendered as a table head (`<th>` elements). The default is `true`.
-  - `:items` Specifies the property name for externally defined table data that should be rendered.
-  - `wrapper` Wraps the table inside a parent element with a class name specified on this property, typically used for adding colored backgrounds or other design elements from your design system.
+  | `caption` | Defines a caption for the table, which appears above the table in HTML. |
+  | `head` | Determines whether the first row should be rendered as a table head (`<th>` elements). The default is `true`. |
+  | `:items` | Specifies the property name for externally defined table data that should be rendered. |
+  | `wrapper` | Wraps the table inside a parent element with a class name specified on this property, typically used for adding colored backgrounds or other design elements from your design system. |
 
 
 ### HTML output
@@ -479,8 +479,8 @@ Accordions can be customized with various options to control their behavior and
 [.options]
   #### Accordion options
 
-  - `name` Use this to name individual entries. When supplied, only one entry can be open at a time, ensuring a true accordion effect.
-  - `open` Set the initial state of the accordion. Use this to open the first tab by default or provide a numeric value for a specific item to be initially opened.
+  | `name` | Use this to name individual entries. When supplied, only one entry can be open at a time, ensuring a true accordion effect. |
+  | `open` | Set the initial state of the accordion. Use this to open the first tab by default or provide a numeric value for a specific item to be initially opened. |
 
 
 ### HTML output

packages/nuejs.org/docs/css/doc-content.css

@@ -1,4 +1,3 @@
-
 /* documentation-specific content widgets  */
 
 h1 + p {
@@ -42,29 +41,42 @@ figure:has(.above) {
 
 .options {
   h4 {
-    margin: 2.5em 0 1.5em .15em;
+    margin: 2.5em 0 1.5em 0.15em;
     font-weight: bold;
   }
 
-  p {
-    font-size: 95%;
+  table {
+    color: var(--gray-500);
     line-height: 1.4;
-    display: flex;
+    text-wrap: balance;
+    font-size: 95%;
   }
 
-  code {
-    min-width: 10em;;
+  td:first-child {
+    min-width: 9em;
+    display: list-item;
+    list-style-position: inside;
+    padding-inline-end: 0;
+
+    &::before {
+      content: '';
+      display: inline-block;
+      width: 0.6em;
+    }
+
+    &::marker {
+      color: var(--gray-400);
+    }
   }
 }
 
-
 .apidoc article h3 {
   font-family: monospace;
   color: var(--main-600);
   background-color: var(--main-50);
   display: inline-block;
-  padding: .3em .6em;
-  margin-bottom: -.5em;
+  padding: 0.3em 0.6em;
+  margin-bottom: -0.5em;
   border-radius: 2px;
 }