1.9 Reference Section Fixes (#7123)

docs/astro/astro.config.mjs

@@ -194,6 +194,10 @@ export default defineConfig({
                                         label: "Colors & Brushes",
                                         slug: "reference/colors-and-brushes",
                                     },
+                                    {
+                                        label: "Timer",
+                                        slug: "reference/timer",
+                                    },
                                 ],
                             },
                             {
@@ -227,6 +231,10 @@ export default defineConfig({
                                                 label: "TextInput",
                                                 slug: "reference/keyboard-input/textinput",
                                             },
+                                            {
+                                                label: "TextInputInterface",
+                                                slug: "reference/keyboard-input/textinputinterface",
+                                            },
                                         ],
                                     },
                                     {

docs/astro/src/components/VersionSelector.astro

@@ -3,7 +3,6 @@
 // SPDX-License-Identifier: MIT
 import type { Props } from "@astrojs/starlight/props";
 import { Icon } from "@astrojs/starlight/components";
-import { getVersions } from "../utils/versions.ts";
 ---
 
 <script>

docs/astro/src/content/collections/std-widgets/Date.md

@@ -0,0 +1,13 @@
+---
+<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: MIT -->
+title: date
+description: date
+---
+
+`Date`
+
+Defines a date with day, month, and year.
+
+-   **`day`(int)**: The day value (range from 1 to 31).
+-   **`month`(int)**: The month value (range from 1 to 12).
+-   **`year`(int)**: The year value.

docs/astro/src/content/collections/std-widgets/Time.md

@@ -0,0 +1,13 @@
+---
+<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: MIT -->
+title: time
+description: time
+---
+
+`Time`
+
+Defines a time with hours, minutes, and seconds.
+
+-   **`hour`(int)**: The hour value (range from 0 to 23).
+-   **`minute`(int)**: The minute value (range from 1 to 59).
+-   **`second`(int)**: The second value (range form 1 to 59).

docs/astro/src/content/docs/guide/language/coding/expressions-and-statements.mdx

@@ -67,7 +67,7 @@ export component Example inherits Window {
 }
 ```
 
-## statements
+## Statements
 
 Assignment:
 

docs/astro/src/content/docs/guide/language/coding/file.mdx

@@ -93,7 +93,7 @@ These names are reserved and you can't re-define them.
 Comments are lines of code that are ignored by the Slint compiler. They are used to explain the code or
 to temporarily disable code. 
 
-### Single line comments
+### Single Line Comments
 
 Single line comments are denoted by `//` and are terminated by a new line.
 
@@ -101,7 +101,7 @@ Single line comments are denoted by `//` and are terminated by a new line.
 // Amazing text! This is a comment
 ```
 
-### Multi line comments
+### Multi Line Comments
 
 Multi line comments are denoted by `/*` and `*/` and are terminated by a new line.
 
@@ -113,7 +113,7 @@ Multi line comments are denoted by `/*` and `*/` and are terminated by a new lin
 ```
 
 
-## Elements and components
+## Elements and Components
 
 The core part of the Slint language are elements and components. Technically they are the same thing
 so once you know how to declare and use one you know the other. Elements are the basic building blocks
@@ -158,7 +158,7 @@ code formatting you don't like. It's a type of small talk developers love and ap
 
 
 
-## The root element
+## The Root Element
 
 
 ```slint playground

docs/astro/src/content/docs/guide/language/coding/functions-and-callbacks.mdx

@@ -13,7 +13,7 @@ Functions can be defined as part of a component, or as part of an element within
 It is not possible to declare global (top-level) functions, or to declare them as part of a
 struct or enum. It is also not possible to nest functions within other functions.
 
-## Declaring functions
+## Declaring Functions
 
 Functions in Slint are declared using the `function` keyword. For example:
 
@@ -39,7 +39,7 @@ Functions can be annotated with the `pure` keyword.
 This indicates that the function does not cause any side effects.
 More details can be found in the <Link type="Purity" /> chapter.
 
-## Calling a function
+## Calling Functions
 
 A function can be called without an element name (like a function call in other languages) or with
 an element name (like a method call in other languages):
@@ -72,7 +72,7 @@ export component Example {
 
 
 
-## Function visibility
+## Function Visibility
 
 By default, functions are private and cannot be accessed from other components.
 
@@ -125,7 +125,7 @@ See the language-specific documentation for the generated code to use.
 
 - A function annotated with `protected` can only be accessed by components that directly inherit from it.
 
-## Functions vs. callbacks
+## Functions vs. Callbacks
 
 There are a lot of similarities between functions and [callbacks](#callbacks):
 

docs/astro/src/content/docs/guide/language/coding/name-resolution.mdx

@@ -4,7 +4,7 @@ title: Name Resolution (Scope)
 description: Name Resolution (Scope)
 ---
 
-## Name resolution
+## Name Resolution
 
 Function calls have the same name resolution rules as properties and callbacks. When called without
 an element name:

docs/astro/src/content/docs/guide/language/coding/positioning-and-layouts.mdx

@@ -91,7 +91,7 @@ Layouts are also defaulting to fill the parent, regardless of their own preferre
 {/* Without base? */}
 Other elements (including custom ones without base) default to using their preferred size.
 
-### Preferred size
+### Preferred Size
 
 You can specify the preferred size of elements with the `preferred-width` and `preferred-height` properties.
 

docs/astro/src/content/docs/guide/language/concepts/reactivity.mdx

@@ -72,7 +72,7 @@ are marked as dirty.
 
 Callbacks in native code by default don't depend on any properties unless they query a property in the native code.
 
-## Two-way Bindings
+## Two-Way Bindings
 
 Create two-way bindings between properties with the `<=>` syntax. These properties will be linked
 together and always contain the same value.

docs/astro/src/content/docs/guide/language/concepts/slint-language.mdx

@@ -59,7 +59,7 @@ hands on to ensure all their design intent is implemented. They are forced to us
 to crate prototypes and design guides that may look or behave differently to the software used to implementat
 the production UI. It should not have to be this way.
 
-## Declartive style
+## Declartive Style
 
 There have been attempts to make describing a UI in code more declarative. For example [React](https://reactjs.org/)
 and [SwiftUI](https://developer.apple.com/xcode/swiftui/).

docs/astro/src/content/docs/guide/platforms/desktop.mdx

@@ -19,7 +19,7 @@ are supported by their vendors at the time of a Slint version release.
 | Windows 10       | x86-64       |
 | Windows 11       | x86-64       |
 
-### Handle the console window
+### Handle the Console Window
 
 When you running an application a console window will show by [default](https://learn.microsoft.com/en-us/cpp/build/reference/subsystem-specify-subsystem?view=msvc-170).
 
@@ -80,5 +80,5 @@ Slint should run on the most recent LTS or newer, at the time of a Slint version
 </TabItem>
 </Tabs>
 
-## What about other platforms?
+## What About Other Platforms?
 [Contact us](https://slint.dev/contact) if you need to support specific or older versions.

docs/astro/src/content/docs/guide/platforms/embedded.mdx

@@ -317,5 +317,5 @@ Now you can add the launch configuration to `.vscode/launch.json`:
 
 This was tested using a second Raspberry Pi Pico programmed as a probe with [DapperMime](https://github.com/majbthrd/DapperMime).
 
-## What about other platforms?
+## What About Other Platforms?
 [Contact us](https://slint.dev/contact) if you need to support specific or older versions.

docs/astro/src/content/docs/guide/platforms/mobile.mdx

@@ -17,5 +17,5 @@ See the documentation of the [android module in our Rust API documentation](http
 Planned in roadmap.
 See [GitHub Tracking Issue](https://github.com/slint-ui/slint/issues/47).
 
-## What about other platforms?
+## What About Other Platforms?
 [Contact us](https://slint.dev/contact) if you need to support specific or older versions.

docs/astro/src/content/docs/guide/tooling/vscode.mdx

@@ -19,7 +19,7 @@ We support many other tools and editors see [here](https://github.com/slint-ui/s
 :::
 
 
-## Setting up VS Code
+## Setting Up VS Code
 
 
 <Tabs syncKey="dev-platform">

docs/astro/src/content/docs/reference/elements/image.mdx

@@ -32,8 +32,8 @@ When set, the image is used as an alpha mask and is drawn in the given color (or
 <CodeSnippetMD imagePath="/src/assets/generated/image-colorize.png"  imageWidth="300" imageHeight="200"  imageAlt='image example'>
 ```slint
 Image {
-    source: @image-url("mini-banner.png");
-    colorize: gray;
+    source: @image-url("slint-logo-simple-dark.png");
+    colorize: darkorange;
 }
 ```
 </CodeSnippetMD>
@@ -201,7 +201,7 @@ Image {
 ### rotation-origin-y
 <SlintProperty propName="rotation-origin-y" typeName="length"/>
 
-## source properties
+## Source Properties
 
 ### source
 <SlintProperty propName="source" typeName="image">

docs/astro/src/content/docs/reference/elements/path.mdx

@@ -52,7 +52,7 @@ If non-zero, the path will be scaled to fit into the specified width.
 If non-zero, the path will be scaled to fit into the specified height.
 </SlintProperty>
 
-## Viewbox properties
+## Viewbox Properties
 
 ### viewbox-x
 <SlintProperty propName="viewbox-x" typeName="float"/>
@@ -77,7 +77,7 @@ ignored and instead the bounding rectangle of all path elements is used to defin
 outside of it, they are still rendered. When this property is set to `true`, then rendering will be
 clipped at the boundaries of the view box.
 
-## Path Using SVG commands
+## Path Using SVG Commands
 
 SVG is a popular file format for defining scalable graphics, which are often composed of paths. In SVG
 paths are composed using [commands](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d#path_commands),
@@ -97,7 +97,7 @@ export component Example inherits Path {
 
 The commands are provided in a property:
 
-### commands
+### Commands
 <SlintProperty propName="commands" typeName="string">
 A string providing the commands according to the SVG path specification.
 This property can only be set in a binding and cannot be accessed in an expression.
@@ -141,7 +141,7 @@ export component Example inherits Path {
 Note how the coordinates of the path elements don't use units - they operate within the imaginary
 coordinate system of the scalable path.
 
-## MoveTo Sub-element for `Path`
+## MoveTo Sub-Element for `Path`
 
 The `MoveTo` sub-element closes the current sub-path, if present, and moves the current point
 to the location specified by the `x` and `y` properties. Subsequent elements such as `LineTo`
@@ -157,7 +157,7 @@ The x position of the new current point.
 The y position of the new current point.
 </SlintProperty>
 
-## LineTo Sub-element for `Path`
+## LineTo Sub-Element for `Path`
 
 The `LineTo` sub-element describes a line from the path's current position to the
 location specified by the `x` and `y` properties.
@@ -172,7 +172,7 @@ The target x position of the line.
 The target y position of the line.
 </SlintProperty>
 
-## ArcTo Sub-element for `Path`
+## ArcTo Sub-Element for `Path`
 
 The `ArcTo` sub-element describes the portion of an ellipse. The arc is drawn from the path's
 current position to the location specified by the `x` and `y` properties. The remaining properties
@@ -215,7 +215,7 @@ The target y position of the line.
 </SlintProperty>
 
 
-## CubicTo Sub-element for `Path`
+## CubicTo Sub-Element for `Path`
 
 The `CubicTo` sub-element describes a smooth Bézier from the path's current position to the
 location specified by the `x` and `y` properties, using two control points specified by their
@@ -251,7 +251,7 @@ The target x position of the curve.
 The target y position of the curve.
 </SlintProperty>
 
-## QuadraticTo Sub-element for `Path`
+## QuadraticTo Sub-Element for `Path`
 
 The QuadraticTo sub-element describes a smooth Bézier from the path's current position to the
 location specified by the `x` and `y` properties, using the control points specified by the
@@ -277,7 +277,7 @@ The target x position of the curve.
 The target y position of the curve.
 </SlintProperty>
 
-## Close Sub-element for `Path`
+## Close Sub-Element for `Path`
 
 The `Close` element closes the current sub-path and draws a straight line from the current
 position to the beginning of the path.

docs/astro/src/content/docs/reference/elements/rectangle.mdx

@@ -6,6 +6,10 @@ description: Rectangle element api.
 import SlintProperty  from '/src/components/SlintProperty.astro';
 import CodeSnippetMD from '/src/components/CodeSnippetMD.astro';
 
+By default, a `Rectangle` is just an empty item that shows nothing. By setting a color or configuring a border,
+it's then possible to draw a rectangle on the screen.
+
+When not part of a layout, its width and height default to 100% of the parent element.
 
 <CodeSnippetMD imagePath="/src/assets/generated/rectangle-example.png" imageAlt='rectangle example'>
 ```slint playground
@@ -53,10 +57,6 @@ export component ExampleRectangle inherits Window {
 ```
 </CodeSnippetMD>
 
-By default, a `Rectangle` is just an empty item that shows nothing. By setting a color or configuring a border,
-it's then possible to draw a rectangle on the screen.
-
-When not part of a layout, its width and height default to 100% of the parent element.
 
 ## Properties
 
@@ -206,7 +206,7 @@ of this `Rectangle` are clipped and only the contents inside the elements bounds
 </SlintProperty>
 
 
-## Border Radius properties
+## Border Radius Properties
 
 ### border-radius
 <SlintProperty propName="border-radius" typeName="length" defaultValue="0">

docs/astro/src/content/docs/reference/elements/text.mdx

@@ -138,6 +138,7 @@ The design metrics of the font scaled to the font pixel size used by the element
 <CodeSnippetMD imagePath="/src/assets/generated/text-horizontal-alignment.png" needsBackground="true" imageWidth="200" imageHeight="200"  imageAlt='text-horizontal-alignment'>
 ```slint "horizontal-alignment: left;"
 Text {
+    x: 0;
     text: "Hello";
     color: black;
     font-size: 40pt;
@@ -244,7 +245,7 @@ Text {
     rotation-angle: 45deg;
     rotation-origin-x: self.width / 2;
     rotation-origin-y: self.height / 2;
-    font-size: 40pt;
+    font-size: 30pt;
 }
 ```
 </CodeSnippetMD>
@@ -257,5 +258,3 @@ Text {
 
 ### rotation-origin-y
 <SlintProperty propName="rotation-origin-y" typeName="length"/>
-
-

docs/astro/src/content/docs/reference/gestures/swipegesturehandler.mdx

@@ -5,6 +5,10 @@ description: SwipeGestureHandler element api.
 ---
 import SlintProperty  from '/src/components/SlintProperty.astro';
 
+
+Use the `SwipeGestureHandler` to handle swipe gesture in some particular direction. 
+Recognition is limited to the element's geometry.
+
 ```slint playground
 export component Example inherits Window {
     width: 270px;
@@ -46,7 +50,6 @@ export component Example inherits Window {
 }
 ```
 
-Use the `SwipeGestureHandler` to handle swipe gesture in some particular direction. Recognition is limited to the element's geometry.
 
 Specify the different swipe directions you'd like to handle by setting the `handle-swipe-left/right/up/down` properties and react to the gesture in the `swiped` callback.
 

docs/astro/src/content/docs/reference/gestures/toucharea.mdx

@@ -9,6 +9,10 @@ import PointerScrollEvent from '/src/content/collections/structs/PointerScrollEv
 import EventResult from '/src/content/collections/enums/EventResult.md';
 import CodeSnippetMD from '/src/components/CodeSnippetMD.astro';
 
+Use `TouchArea` to control what happens when the region it covers is touched or interacted with
+using the mouse.
+
+When not part of a layout, its width or height default to 100% of the parent element.
 
 ```slint playground
 export component Example inherits Window {
@@ -35,11 +39,6 @@ export component Example inherits Window {
 }
 ```
 
-Use `TouchArea` to control what happens when the region it covers is touched or interacted with
-using the mouse.
-
-When not part of a layout, its width or height default to 100% of the parent element.
-
 ## Properties
 
 ### enabled

docs/astro/src/content/docs/reference/global-functions/math.mdx

@@ -98,7 +98,7 @@ Square root
 Return the value of the first value raised to the second
 
 
-## Trigonometric functions
+## Trigonometric Functions
 ### acos(float) -> angle 
 Returns the arccosine, or inverse cosine, of a number. The arccosine is the angle whose cosine is number.
 

docs/astro/src/content/docs/reference/keyboard-input/overview.mdx

@@ -6,8 +6,17 @@ description: Key Handling Overview
 
 import Link from '/src/components/Link.astro';
 
-Use the constants in the `Key` namespace to handle pressing of keys that don't have a printable character. Check the value of <Link type="KeyEvent" />'s `text` property
-against the constants below.
+## KeyEvent
+
+ This structure is generated and passed to the key press and release callbacks of the `FocusScope` element.
+
+- **`text`** (_string_):  The unicode representation of the key pressed.
+- **`modifiers`** (_KeyboardModifiers_):  The keyboard modifiers active at the time of the key press event.
+- **`repeat`** (_bool_):  This field is set to true for key press events that are repeated, i.e. the key is held down. It's always false for key release events.
+
+
+## Key Namespace
+Use the constants in the `Key` namespace to handle pressing of keys that don't have a printable character.
 
 -   **`Backspace`**
 -   **`Tab`**

docs/astro/src/content/docs/reference/keyboard-input/textinput.mdx

@@ -161,32 +161,3 @@ Invoked when a key is released, the argument is a <Link type="KeyEvent" /> struc
 handle keys before `TextInput` does. Return `accept` to indicate that you've handled the event, or return
 `reject` to let `TextInput` handle it.
 
-## TextInputInterface
-
-The `TextInputInterface.text-input-focused` property can be used to find out if a `TextInput` element has the focus.
-If you're implementing your own virtual keyboard, this property is an indicator whether the virtual keyboard should be shown or hidden.
-
-### text-input-focused
-<SlintProperty propName="text-input-focused" typeName="bool"> 
-True if an `TextInput` element has the focus; false otherwise.
-</SlintProperty>
-
-### Example
-
-```slint
-import { LineEdit } from "std-widgets.slint";
-
-component VKB {
-    Rectangle { background: yellow; }
-}
-
-export component Example inherits Window {
-    width: 200px;
-    height: 100px;
-    VerticalLayout {
-        LineEdit {}
-        FocusScope {}
-        if TextInputInterface.text-input-focused: VKB {}
-    }
-}
-```

docs/astro/src/content/docs/reference/keyboard-input/textinputinterface.mdx

@@ -0,0 +1,35 @@
+---
+<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: MIT -->
+title: TextInputInterface
+description: TextInputInterface
+---
+import SlintProperty  from '/src/components/SlintProperty.astro';
+import Link from '/src/components/Link.astro';
+
+```slint
+import { LineEdit } from "std-widgets.slint";
+
+component VKB {
+    Rectangle { background: yellow; }
+}
+
+export component Example inherits Window {
+    width: 200px;
+    height: 100px;
+    VerticalLayout {
+        LineEdit {}
+        FocusScope {}
+        if TextInputInterface.text-input-focused: VKB {}
+    }
+}
+```
+
+## Properties
+
+The `TextInputInterface.text-input-focused` property can be used to find out if a `TextInput` element has the focus.
+If you're implementing your own virtual keyboard, this property is an indicator whether the virtual keyboard should be shown or hidden.
+
+### text-input-focused
+<SlintProperty propName="text-input-focused" typeName="bool"> 
+True if an `TextInput` element has the focus; false otherwise.
+</SlintProperty>

docs/astro/src/content/docs/reference/layouts/gridlayout.mdx

@@ -6,6 +6,14 @@ description: GridLayout element api.
 import SlintProperty  from '/src/components/SlintProperty.astro';
 import CodeSnippetMD from '/src/components/CodeSnippetMD.astro';
 
+`GridLayout` places elements on a grid.
+
+`GridLayout` covers its entire surface with cells. Cells are not aligned. 
+The elements constituting the cells will be stretched inside their allocated 
+space, unless their size constraints—like, e.g., `min-height` or 
+`max-width`—work against this.
+
+
 <CodeSnippetMD imagePath="/src/assets/generated/gridlayout-example1.png"  imageWidth="200" imageHeight="100"  imageAlt='gridlayout example'>
 
 ```slint playground
@@ -47,11 +55,8 @@ export component Foo inherits Window {
 ```
 </CodeSnippetMD>
 
-`GridLayout` places elements on a grid.
 
-`GridLayout` covers its entire surface with cells. Cells are not aligned. The elements constituting the cells will be stretched inside their allocated space, unless their size constraints&mdash;like, e.g., `min-height` or `max-width`&mdash;work against this.
-
-## Spacing properties
+## Spacing Properties
 
 ### spacing
 <SlintProperty propName="spacing" typeName="length">
@@ -65,7 +70,7 @@ To target specific axis with different values use the following properties:
 ### spacing-vertical
 <SlintProperty propName="spacing-vertical" typeName="length"/>
 
-## Padding properties
+## Padding Properties
 
 ### padding
 <SlintProperty propName="padding" typeName="length">

docs/astro/src/content/docs/reference/std-widgets/basic-widgets/checkbox.mdx

@@ -7,13 +7,15 @@ description: CheckBox api.
 import CodeSnippetMD from '/src/components/CodeSnippetMD.astro';
 import SlintProperty  from '/src/components/SlintProperty.astro';
 
-<CodeSnippetMD imagePath="/src/assets/generated/std-widgets-checkbox-example.png"  imageWidth="200" imageHeight="200"  imageAlt='checkbox example'>
+<CodeSnippetMD needsBackground imagePath="/src/assets/generated/std-widgets-checkbox-example.png" scale="3" imageWidth="100" imageHeight="50"  imageAlt='checkbox example'>
 ```slint
 import { CheckBox } from "std-widgets.slint";
 export component Example inherits Window {
     width: 200px;
     height: 25px;
+    background: transparent;
     CheckBox {
+        x: 5px;
         width: parent.width;
         height: parent.height;
         text: "Hello World";

docs/astro/src/content/docs/reference/std-widgets/basic-widgets/progressindicator.mdx

@@ -7,16 +7,17 @@ description: ProgressIndicator api.
 import SlintProperty  from '/src/components/SlintProperty.astro';
 import CodeSnippetMD from '/src/components/CodeSnippetMD.astro';
 
-<CodeSnippetMD imagePath="/src/assets/generated/std-widgets-progressindicator.png"  imageWidth="200" imageHeight="200"  imageAlt='progressindicator example'>
+<CodeSnippetMD  imagePath="/src/assets/generated/std-widgets-progressindicator.png"  imageWidth="200" imageHeight="200"  imageAlt='progressindicator example'>
 ```slint playground
 import { ProgressIndicator } from "std-widgets.slint";
 export component Example inherits Window {
     width: 200px;
     height: 25px;
+    background: transparent;
     ProgressIndicator {
-        width: parent.width;
+        width: 90%;
         height: parent.height;
-        progress: 50%;
+        progress: 80%;
     }
 }
 ```

docs/astro/src/content/docs/reference/std-widgets/layouts/gridbox.mdx

@@ -6,5 +6,5 @@ description: GridBox api.
 
 import Link from '/src/components/Link.astro';
 
-A `GridBox` is a <Link type="GridLayout" /> where the spacing and padding values
-depend on the style instead of defaulting to 0.
+A `GridBox` is a <Link type="GridLayout" /> where instead of having values that default to `0`, the spacing and padding values instead
+depend on the style.

docs/astro/src/content/docs/reference/std-widgets/layouts/horizontalbox.mdx

@@ -6,7 +6,7 @@ description: HorizontalBox api.
 
 import Link from '/src/components/Link.astro';
 
-A `HorizontalBox` is a <Link type="HorizontalLayout" /> where the spacing and padding values
-depend on the style instead of defaulting to 0.
+A `HorizontalBox` is a <Link type="HorizontalLayout" /> where instead of 
+having values that default to `0`, the spacing and padding values instead
 
 See also <Link type="VerticalBox"/>.

docs/astro/src/content/docs/reference/std-widgets/layouts/verticalbox.mdx

@@ -6,7 +6,7 @@ description: VerticalBox api.
 
 import Link from '/src/components/Link.astro';
 
-A `VerticalBox` is a <Link type="VerticalLayout"/> where the spacing and padding values
-depend on the style instead of defaulting to 0.
+A `VerticalBox` is a <Link type="VerticalLayout"/> where instead of having 
+values that default to `0`, the spacing and padding values instead
 
 See also <Link type="HorizontalBox"/>.

docs/astro/src/content/docs/reference/std-widgets/misc/datepicker.mdx

@@ -7,6 +7,8 @@ description: DatePickerPopup api.
 import SlintProperty  from '/src/components/SlintProperty.astro';
 import CodeSnippetMD from '/src/components/CodeSnippetMD.astro';
 
+Use a date picker to let the user select a date.
+
 ```slint playground
 import { DatePickerPopup, Button } from "std-widgets.slint";
 export component Example inherits Window {
@@ -36,7 +38,7 @@ export component Example inherits Window {
 }
 ```
 
-Use a date picker to let the user select a date.
+
 
 ## Properties
 
@@ -80,12 +82,3 @@ date-picker := DatePickerPopup {
 }
 ```
 
-### Struct `Date`
-
-Defines a date with day, month, and year.
-
-#### Fields
-
--   **`day`(int)**: The day value (range from 1 to 31).
--   **`month`(int)**: The month value (range from 1 to 12).
--   **`year`(int)**: The year value.

docs/astro/src/content/docs/reference/std-widgets/misc/timepicker.mdx

@@ -7,6 +7,8 @@ description: TimePickerPopup api.
 import SlintProperty  from '/src/components/SlintProperty.astro';
 import CodeSnippetMD from '/src/components/CodeSnippetMD.astro';
 
+Use the timer picker to select the time, in either 24-hour or 12-hour mode (AM/PM). 
+
 <CodeSnippetMD imagePath="/src/assets/generated/std-widgets-timepicker.png"  imageWidth="200" imageHeight="200"  imageAlt='std-widgets timepicker example'>
 ```slint
 import { TimePickerPopup, Button } from "std-widgets.slint";
@@ -40,7 +42,7 @@ export component Example inherits Window {
 ```
 </CodeSnippetMD>
 
-Use the timer picker to select the time, in either 24-hour or 12-hour mode (AM/PM). 
+
 
 ## Properties
 
@@ -89,13 +91,3 @@ time-picker := TimePickerPopup {
     }
 }
 ```
-
-### Struct `Time`
-
-Defines a time with hours, minutes, and seconds.
-
-#### Fields
-
--   **`hour`(int)**: The hour value (range from 0 to 23).
--   **`minute`(int)**: The minute value (range from 1 to 59).
--   **`second`(int)**: The second value (range form 1 to 59).

docs/astro/src/content/docs/reference/std-widgets/views/listview.mdx

@@ -7,6 +7,10 @@ description: ListView api.
 import CodeSnippetMD from '/src/components/CodeSnippetMD.astro';
 import Link from '/src/components/Link.astro';
 
+A ListView is like a Scrollview but it should have a `for` element, and the content are
+automatically laid out in a list.
+Elements are only instantiated if they are visible
+
 <CodeSnippetMD imagePath="/src/assets/generated/std-widgets-listview-example.png"  imageWidth="200" imageHeight="200"  imageAlt='listview example'>
 ```slint playground
 import { ListView, VerticalBox } from "std-widgets.slint";
@@ -41,10 +45,6 @@ export component Example inherits Window {
 ```
 </CodeSnippetMD>
 
-A ListView is like a Scrollview but it should have a `for` element, and the content are
-automatically laid out in a list.
-Elements are only instantiated if they are visible
-
 ## Properties
 
 Same as <Link type="ScrollView"/>.

docs/astro/src/content/docs/reference/std-widgets/views/standardtableview.mdx

@@ -8,6 +8,11 @@ import SlintProperty  from '/src/components/SlintProperty.astro';
 import CodeSnippetMD from '/src/components/CodeSnippetMD.astro';
 import Link from '/src/components/Link.astro';
 
+The `StandardTableView` represents a table of data with columns and rows. Cells
+are organized in a model where each row is a model of
+<SlintProperty typeName="struct" structName="StandardListViewItem" propName="model" default="[]" >
+</SlintProperty>
+
 <CodeSnippetMD imagePath="/src/assets/generated/std-widgets-standardtableview.png"  imageWidth="200" imageHeight="200"  imageAlt='std-widgets standardtableview example'>
 ```slint playground
 import { StandardTableView } from "std-widgets.slint";
@@ -38,10 +43,7 @@ export component Example inherits Window {
 ```
 </CodeSnippetMD>
 
-The `StandardTableView` represents a table of data with columns and rows. Cells
-are organized in a model where each row is a model of
-<SlintProperty typeName="struct" structName="StandardListViewItem" propName="model" default="[]" >
-</SlintProperty>
+
 
 ## Properties
 

docs/astro/src/utils/utils.ts

@@ -24,6 +24,18 @@ export async function getStructContent(
     }
     const baseStruct = structName.replace(/[\[\]]/g, "");
 
+    if (baseStruct === "Time" || baseStruct === "Date") {
+        try {
+            const module = await import(
+                `../content/collections/std-widgets/${baseStruct}.md`
+            );
+            return module.compiledContent();
+        } catch (error) {
+            console.error(`Failed to load enum file for ${baseStruct}:`, error);
+            return "";
+        }
+    }
+
     if (baseStruct) {
         try {
             const module = await import(

docs/astro/writing-style-guide.md

@@ -37,6 +37,8 @@ In our written communication we aim to be:
    - Use: "Try out XYZ."
    - Rationale: Use exclamation points sparingly, save them for when they really count. We already have the attention of the reader.
 
+  5. Use Title Case for headings.
+
 ## Docs
 
   - Ensure links don't go to blank pages e.g. [1.7 concepts](https://releases.slint.dev/1.7.0/docs/slint/src/language/concepts/)