convert more pages to use examples

src/routes/docs/components/calendarview.md

@@ -41,11 +41,9 @@ You can also use two-way binding to programatically work with the value of the c
 
 <CalendarView bind:value />
 
-<div>
-    Current value: {value?.toLocaleDateString()}
+Current value: {value?.toLocaleDateString()}
 
-    <Button on:click={() => value = null}>Clear Value</Button>
-</div>
+<Button on:click={() => value = null}>Clear Value</Button>
 ```
 
 ### Multiple Selections

src/routes/docs/components/expander.md

@@ -41,34 +41,62 @@ import { Expander } from "fluent-svelte";
 
 A basic expander expects a header and contents. The expander's default slot will be rendered into the header, while content can be rendered into the `content` slot.
 
-```html
+```svelte example
+<script>
+    import { Expander } from "fluent-svelte";
+</script>
+
 <Expander>
 	Header
-	<svelte:fragment slot="content"> Content </svelte:fragment>
+	<svelte:fragment slot="content">
+        Content
+    </svelte:fragment>
 </Expander>
 ```
 
 ### Controlling Expansion
 
 Expanders can be either expanded or collapsed. This can be controlled by setting the `expanded` property.
 
-```html
-<Expander expanded> I am expanded by default. </Expander>
+```svelte example
+<script>
+    import { Expander } from "fluent-svelte";
+</script>
+
+<Expander expanded>
+    I am expanded by default.
+    <svelte:fragment slot="content">
+		Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+	</svelte:fragment>
+</Expander>
 ```
 
 ### Directions
 
 An expander doesn't have to expand downwards. You can control an expander's expansion direction using the `direction` property. To create an upwards-expanding expander, set `direction` to `up`.
 
-```html
-<Expander direction="up"> This expander will expand upwards. </Expander>
+```svelte example
+<script>
+    import { Expander } from "fluent-svelte";
+</script>
+
+<Expander direction="up">
+    This expander will expand upwards.
+    <svelte:fragment slot="content">
+		Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+	</svelte:fragment>
+</Expander>
 ```
 
 ### Adding an Icon
 
 You can easily add an icon to an expander's header using the `icon` slot. Passing in an SVG element will render it into the header with 16x16 dimensions.
 
-```html
+```svelte example
+<script>
+    import { Expander } from "fluent-svelte";
+</script>
+
 <Expander>
 	<!-- https://github.com/microsoft/fluentui-system-icons -->
 	<svg slot="icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">

src/routes/docs/components/flyout.md

@@ -77,24 +77,6 @@ There are three aspects to the positioning system of flyouts - `placement`, `ali
 -   The `placement` property is the direction that the flyout will be opened from. This can be either `top`, `bottom`, `left`, or `right`.
 -   The `alignment` property controls either the vertical or horizontal alignment of the flyout along a given placement axis. This can be either `start`, `center`, or `end`.
 
-<div class="positioning-chart placement-{placement} alignment-{alignment}" style:--fds-example-offset={offset}>
-    <div class="example-flyout-wrapper">
-        <div class="example-flyout"></div>
-    </div>
-    <ComboBox placeholder="Placements" bind:value={placement} items={[
-        { name: "top", value: "top" },
-        { name: "bottom", value: "bottom" },
-        { name: "left", value: "left" },
-        { name: "right", value: "right" }
-    ]} />
-    <ComboBox placeholder="Alignments" bind:value={alignment} items={[
-        { name: "start", value: "start" },
-        { name: "center", value: "start" },
-        { name: "end", value: "start" }
-    ]} />
-    <Slider bind:value={offset} />
-</div>
-
 ### Focus Behavior
 
 Flyouts utilize a focus trap, which restricts keyboard navigation focus to only the flyout's content. If you wish to disable this behavior, you can set the `trapFocus` property to `false`.

src/routes/docs/components/infobadge.md

@@ -40,8 +40,13 @@ InfoBadges can take in a `severity` prop, which represent the type of informatio
 
 The default badge glyph can be overrided with your own content. This can be useful if you wish display text, or an alert count. Passing HTML content into the default slot will override the glyph with said content.
 
-```html
-<InfoBadge>99</InfoBadge> <InfoBadge severity="critical">bazinga</InfoBadge>
+```svelte example
+<script>
+    import { InfoBadge } from "fluent-svelte";
+</script>
+
+<InfoBadge>99</InfoBadge>
+<InfoBadge severity="critical">bazinga</InfoBadge>
 ```
 
 ## Component API

src/routes/docs/components/infobar.md

@@ -33,13 +33,21 @@ There are two areas of text that can be customized - the title and the message.
 -   You can specify a title for the InfoBar using `title` property.
 -   You can set the InfoBar's message using the `message` property.
 
-```html
+```svelte example
+<script>
+    import { InfoBar } from "fluent-svelte";
+</script>
+
 <InfoBar title="Title" message="Message" />
 ```
 
 If you need to include HTML content into the message, you can also just use the default slot.
 
-```html
+```svelte example
+<script>
+    import { InfoBar } from "fluent-svelte";
+</script>
+
 <InfoBar>
 	Visit <a href="https://fluent-svelte.vercel.app">Fluent Svelte</a> for some neat fluent design
 	components!
@@ -62,52 +70,32 @@ InfoBars can take in a `severity` prop, which represent the type of information
 
 An action button can be passed in using the `action` slot. It's recommended that you use the [Button](/docs/components/button) component for this, but any HTML element is valid.
 
-```html
-<Infobar title="Title" message="Message">
-	<button slot="action">Action</button>
-</Infobar>
+```svelte example
+<script>
+    import { InfoBar, Button } from "fluent-svelte";
+</script>
+
+<InfoBar title="Title" message="Message">
+	<Button slot="action">Action</Button>
+</InfoBar>
 ```
 
 ### Controlling Visibility
 
-Flyouts by default are `open`. This means that they are rendered into the DOM. When the close button is pressed, they will be removed from the DOM and the `open` property will be set to false.
+InfoBars by default are `open`. This means that they are rendered into the DOM. When the close button is pressed, they will be removed from the DOM and the `open` property will be set back to `false`. 
 
-You can configure a flyout's default visibility state when it is rendered by setting the `open` property.
-
-```html
-<InfoBar open="{false}" />
-```
-
-You can also use two-way binding to programatically control a bar's visibility.
-
-```html
+```svelte example
 <script>
     import { InfoBar, Button } from "fluent-svelte";
 
     let open = false;
 </script>
 
-<Button on:click={() => open = !open}>Toggle InfoBar</Button>
-
-<InfoBar bind:open />
-```
+<Button on:click={() => open = !open}>
+    {open ? "Close" : "Open"}
+</Button>
 
-If you don't want an InfoBar to be closable by the user, you can set the `closable` property to `false` which will hide the close button.
-
-### Custom Icons
-
-The `icon` slot can be used to override the default badge for the InfoBar and provide your own.
-
-```html
-<InfoBar>
-	<!-- https://github.com/microsoft/fluentui-system-icons -->
-	<svg slot="icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-		<path
-			d="M7.85355 0.146447C7.65829 -0.0488155 7.34171 -0.0488155 7.14645 0.146447C6.95118 0.341709 6.95118 0.658291 7.14645 0.853553L8.29603 2.00314C4.80056 2.11088 2 4.97839 2 8.5C2 12.0899 4.91015 15 8.5 15C12.0899 15 15 12.0899 15 8.5C15 8.48656 15 8.47313 14.9999 8.45971C14.9983 8.2001 14.7805 8 14.5209 8H14.4782C14.2093 8 14 8.23107 14 8.5C14 11.5376 11.5376 14 8.5 14C5.46243 14 3 11.5376 3 8.5C3 5.53311 5.34917 3.11491 8.28892 3.00398L7.14645 4.14645C6.95118 4.34171 6.95118 4.65829 7.14645 4.85355C7.34171 5.04882 7.65829 5.04882 7.85355 4.85355L9.85355 2.85355C10.0488 2.65829 10.0488 2.34171 9.85355 2.14645L7.85355 0.146447ZM11.8536 6.14645C12.0488 6.34171 12.0488 6.65829 11.8536 6.85355L8.85355 9.85355C8.65829 10.0488 8.34171 10.0488 8.14645 9.85355L6.64645 8.35355C6.45118 8.15829 6.45118 7.84171 6.64645 7.64645C6.84171 7.45118 7.15829 7.45118 7.35355 7.64645L8.5 8.79289L11.1464 6.14645C11.3417 5.95118 11.6583 5.95118 11.8536 6.14645Z"
-			fill="currentColor"
-		/>
-	</svg>
-</InfoBar>
+<InfoBar title="Title" message="Message" bind:open />
 ```
 
 ## Component API

src/routes/docs/components/textbox.md

@@ -28,13 +28,13 @@ TextBox is an extension of [HTML's native `<input />` element](https://developer
 
 A TextBox's current text content can be set with the `value` property.
 
-```html
+```svelte
 <TextBox value="Default value" />
 ```
 
 Additionally, you can use svelte's two-way binding syntax to bind the value to a variable.
 
-```html
+```svelte example
 <script>
 	import { TextBox } from "fluent-svelte";
 
@@ -65,7 +65,11 @@ Most of these types will simply set the `type` attribute of the TextBox's input
 
 TextBox supports a `placeholder` property that will be displayed as text in lower emphasis when it's value is empty. These can be used to describe the purpose or type of value the TextBox is meant to accept.
 
-```html
+```svelte example
+<script>
+    import { TextBox } from "fluent-svelte";
+</script>
+
 <TextBox placeholder="Send a message" />
 ```
 
@@ -77,18 +81,18 @@ Most TextBox types will feature a clear button. This button will clear the TextB
 
 Along with the builtin action buttons, you can also add your own buttons to the end of the TextBox using the `TextBoxButton` component and the TextBox's `buttons` slot:
 
-```html
+```svelte example
 <script>
     import { TextBox, TextBoxButton } from "fluent-svelte";
 </script>
 
 <TextBox placeholder="Custom buttons!">
     <TextBoxButton slot="buttons" on:click={() => alert("Clicked!")}>
       <!-- https://github.com/microsoft/fluentui-system-icons -->
-      <svg slot="icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+      <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
           <path d="M7.85355 0.146447C7.65829 -0.0488155 7.34171 -0.0488155 7.14645 0.146447C6.95118 0.341709 6.95118 0.658291 7.14645 0.853553L8.29603 2.00314C4.80056 2.11088 2 4.97839 2 8.5C2 12.0899 4.91015 15 8.5 15C12.0899 15 15 12.0899 15 8.5C15 8.48656 15 8.47313 14.9999 8.45971C14.9983 8.2001 14.7805 8 14.5209 8H14.4782C14.2093 8 14 8.23107 14 8.5C14 11.5376 11.5376 14 8.5 14C5.46243 14 3 11.5376 3 8.5C3 5.53311 5.34917 3.11491 8.28892 3.00398L7.14645 4.14645C6.95118 4.34171 6.95118 4.65829 7.14645 4.85355C7.34171 5.04882 7.65829 5.04882 7.85355 4.85355L9.85355 2.85355C10.0488 2.65829 10.0488 2.34171 9.85355 2.14645L7.85355 0.146447ZM11.8536 6.14645C12.0488 6.34171 12.0488 6.65829 11.8536 6.85355L8.85355 9.85355C8.65829 10.0488 8.34171 10.0488 8.14645 9.85355L6.64645 8.35355C6.45118 8.15829 6.45118 7.84171 6.64645 7.64645C6.84171 7.45118 7.15829 7.45118 7.35355 7.64645L8.5 8.79289L11.1464 6.14645C11.3417 5.95118 11.6583 5.95118 11.8536 6.14645Z" fill="currentColor" />
       </svg>
-    </TextBox>
+    </TextBoxButton>
 </TextBox>
 ```
 
@@ -103,7 +107,11 @@ There are two methods to (completely) restrict manual input on a TextBox: the `d
     It should be noted that while using either of these modes that the clear button will not be displayed, in order to prevent users from modifying the TextBox's content. The <code>clearButton</code> property will have no effect on this behavior. Additionally, when the TextBox is <code>disabled</code>, the search and password reveal buttons will not be rendered into their respective types either.
 </InfoBar>
 
-```html
+```svelte example
+<script>
+    import { TextBox } from "fluent-svelte";
+</script>
+
 <TextBox placeholder="disabled TextBox" disabled />
 <TextBox placeholder="readonly TextBox" readonly />
 ```

src/site/lib/Example/Example.scss

@@ -7,12 +7,16 @@
         padding: 12px;
 	}
 	.example-preview {
-        @include flex($direction: column, $gap: 12px);
+        display: grid;
+        grid-gap: 12px;
 		background-color: var(--card-background-secondary);
 		background-clip: padding-box;
 		border-radius: var(--control-corner-radius) var(--control-corner-radius) 0 0;
 		border: 1px solid var(--card-stroke-default);
 		border-block-end: none;
+        :global(.info-bar) {
+            margin-block-end: 0;
+        }
 	}
     code {
         display: contents;
@@ -22,4 +26,8 @@
         font-family: var(--fds-font-family-monospace);
 		border-radius: 0 0 var(--control-corner-radius) var(--control-corner-radius);
 	}
+}
+
+:global(.example-preview > *) {
+    inline-size: fit-content;
 }