[Toolkit][Shadcn] Add Toggle

src/Toolkit/CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## 2.35
 
+- [Shadcn] Add `toggle` recipe
 - [Shadcn] Use `html_attr_type` filter from `twig/html-extra:^3.24` for composable trigger attributes
 - [Shadcn] Rename `trigger_attrs` to `alert_dialog_trigger_attrs` in `AlertDialog:Trigger`
 - [Shadcn] Rename `trigger_attrs` to `dialog_trigger_attrs` in `Dialog:Trigger`

src/Toolkit/kits/shadcn/toggle/assets/controllers/toggle_controller.js

@@ -0,0 +1,27 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+    static values = { pressed: Boolean };
+
+    connect() {
+        if (!this.hasPressedValue) {
+            this.pressedValue = this.element.getAttribute('aria-pressed') === 'true';
+        }
+
+        this.updateState();
+    }
+
+    toggle() {
+        this.pressedValue = !this.pressedValue;
+    }
+
+    pressedValueChanged() {
+        this.updateState();
+    }
+
+    updateState() {
+        const pressed = this.pressedValue;
+        this.element.setAttribute('aria-pressed', String(pressed));
+        this.element.dataset.state = pressed ? 'active' : 'inactive';
+    }
+}

src/Toolkit/kits/shadcn/toggle/examples/Demo.html.twig

@@ -0,0 +1,4 @@
+<twig:Toggle variant="outline" size="sm" aria-label="Toggle bookmark" class="data-[state=active]:bg-transparent data-[state=active]:[&_svg_path]:fill-(--foreground) data-[state=active]:[&_svg_path]:stroke-(--foreground)">
+    <twig:ux:icon name="lucide:bookmark" />
+    Bookmark
+</twig:Toggle>

src/Toolkit/kits/shadcn/toggle/examples/Disabled.html.twig

@@ -0,0 +1,8 @@
+<div class="flex flex-wrap items-center gap-2">
+    <twig:Toggle aria-label="Toggle disabled" disabled>
+        Disabled
+    </twig:Toggle>
+    <twig:Toggle variant="outline" aria-label="Toggle disabled outline" disabled>
+        Disabled
+    </twig:Toggle>
+</div>

src/Toolkit/kits/shadcn/toggle/examples/Outline.html.twig

@@ -0,0 +1,10 @@
+<div class="flex flex-wrap items-center gap-2">
+    <twig:Toggle variant="outline" aria-label="Toggle italic">
+        <twig:ux:icon name="lucide:italic" />
+        Italic
+    </twig:Toggle>
+    <twig:Toggle variant="outline" aria-label="Toggle bold">
+        <twig:ux:icon name="lucide:bold" />
+        Bold
+    </twig:Toggle>
+</div>

src/Toolkit/kits/shadcn/toggle/examples/Size.html.twig

@@ -0,0 +1,11 @@
+<div class="flex flex-wrap items-center gap-2">
+    <twig:Toggle variant="outline" aria-label="Toggle small" size="sm">
+        Small
+    </twig:Toggle>
+    <twig:Toggle variant="outline" aria-label="Toggle default" size="default">
+        Default
+    </twig:Toggle>
+    <twig:Toggle variant="outline" aria-label="Toggle large" size="lg">
+        Large
+    </twig:Toggle>
+</div>

src/Toolkit/kits/shadcn/toggle/examples/Usage.html.twig

@@ -0,0 +1,3 @@
+<twig:Toggle>
+    Toggle
+</twig:Toggle>

src/Toolkit/kits/shadcn/toggle/examples/With Text.html.twig

@@ -0,0 +1,4 @@
+<twig:Toggle aria-label="Toggle italic">
+    <twig:ux:icon name="lucide:italic" />
+    Italic
+</twig:Toggle>

src/Toolkit/kits/shadcn/toggle/manifest.json

@@ -0,0 +1,13 @@
+{
+    "$schema": "../../../schema-kit-recipe-v1.json",
+    "type": "component",
+    "name": "Toggle",
+    "description": "A two-state button that can be either on or off.",
+    "copy-files": {
+        "assets/": "assets/",
+        "templates/": "templates/"
+    },
+    "dependencies": {
+        "composer": ["twig/extra-bundle", "twig/html-extra:^3.12.0", "tales-from-a-dev/twig-tailwind-extra:^1.0.0"]
+    }
+}

src/Toolkit/kits/shadcn/toggle/templates/components/Toggle.html.twig

@@ -0,0 +1,31 @@
+{# @prop variant 'default'|'outline' The visual style variant. Defaults to `default` #}
+{# @prop size 'default'|'sm'|'lg' The toggle size. Defaults to `default` #}
+{# @prop pressed boolean Whether the toggle is initially pressed. Defaults to `false` #}
+{# @block content The toggle label and/or icon #}
+{%- props variant = 'default', size = 'default', pressed = false -%}
+{%- set style = html_cva(
+    base: "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-pressed:bg-accent aria-pressed:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    variants: {
+        variant: {
+            default: 'bg-transparent',
+            outline: 'border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground',
+        },
+        size: {
+            default: 'h-9 min-w-9 px-2',
+            sm: 'h-8 min-w-8 px-1.5',
+            lg: 'h-10 min-w-10 px-2.5',
+        },
+    },
+) -%}
+<button
+    type="button"
+    class="{{ style.apply({variant: variant, size: size}, attributes.render('class'))|tailwind_merge }}"
+    {{ attributes.defaults({
+        'data-slot': 'toggle',
+        'data-controller': 'toggle',
+        'data-action': 'click->toggle#toggle',
+        'aria-pressed': pressed ? 'true' : 'false',
+    }) }}
+>
+    {%- block content %}{% endblock -%}
+</button>

src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component toggle, code file Default.html__1.html

@@ -0,0 +1,12 @@
+<!--
+- Kit: Shadcn UI
+- Component: Toggle
+- Code:
+```twig
+<twig:Toggle aria-label="Toggle bold">
+    <twig:ux:icon name="lucide:bold" />
+</twig:Toggle>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<button type="button" class="inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-pressed:bg-accent aria-pressed:text-accent-foreground [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*='size-'])]:size-4 bg-transparent h-9 min-w-9 px-2" data-slot="toggle" data-controller="toggle" data-action="click-&gt;toggle#toggle" aria-pressed="false" aria-label="Toggle bold"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8"></path></svg>
+</button>

src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component toggle, code file Demo.html__1.html

@@ -0,0 +1,14 @@
+<!--
+- Kit: Shadcn UI
+- Component: Toggle
+- Code:
+```twig
+<twig:Toggle variant="outline" size="sm" aria-label="Toggle bookmark" class="data-[state=active]:bg-transparent data-[state=active]:[&_svg_path]:fill-(--foreground) data-[state=active]:[&_svg_path]:stroke-(--foreground)">
+    <twig:ux:icon name="lucide:bookmark" />
+    Bookmark
+</twig:Toggle>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<button type="button" class="inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-pressed:bg-accent aria-pressed:text-accent-foreground [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*='size-'])]:size-4 border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground h-8 min-w-8 px-1.5 data-[state=active]:bg-transparent data-[state=active]:[&amp;_svg_path]:fill-(--foreground) data-[state=active]:[&amp;_svg_path]:stroke-(--foreground)" data-slot="toggle" data-controller="toggle" data-action="click-&gt;toggle#toggle" aria-pressed="false" aria-label="Toggle bookmark"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 3a2 2 0 0 1 2 2v15a1 1 0 0 1-1.496.868l-4.512-2.578a2 2 0 0 0-1.984 0l-4.512 2.578A1 1 0 0 1 5 20V5a2 2 0 0 1 2-2z"></path></svg>
+    Bookmark
+</button>

src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component toggle, code file Disabled.html__1.html

@@ -0,0 +1,21 @@
+<!--
+- Kit: Shadcn UI
+- Component: Toggle
+- Code:
+```twig
+<div class="flex flex-wrap items-center gap-2">
+    <twig:Toggle aria-label="Toggle disabled" disabled>
+        Disabled
+    </twig:Toggle>
+    <twig:Toggle variant="outline" aria-label="Toggle disabled outline" disabled>
+        Disabled
+    </twig:Toggle>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="flex flex-wrap items-center gap-2">
+    <button type="button" class="inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-pressed:bg-accent aria-pressed:text-accent-foreground [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*='size-'])]:size-4 bg-transparent h-9 min-w-9 px-2" data-slot="toggle" data-controller="toggle" data-action="click-&gt;toggle#toggle" aria-pressed="false" aria-label="Toggle disabled" disabled>Disabled
+    </button>
+    <button type="button" class="inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-pressed:bg-accent aria-pressed:text-accent-foreground [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*='size-'])]:size-4 border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground h-9 min-w-9 px-2" data-slot="toggle" data-controller="toggle" data-action="click-&gt;toggle#toggle" aria-pressed="false" aria-label="Toggle disabled outline" disabled>Disabled
+    </button>
+</div>

src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component toggle, code file Large.html__1.html

@@ -0,0 +1,12 @@
+<!--
+- Kit: Shadcn UI
+- Component: Toggle
+- Code:
+```twig
+<twig:Toggle size="lg" aria-label="Toggle italic">
+    <twig:ux:icon name="lucide:italic" />
+</twig:Toggle>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<button type="button" class="inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-pressed:bg-accent aria-pressed:text-accent-foreground [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*='size-'])]:size-4 bg-transparent h-10 min-w-10 px-2.5" data-slot="toggle" data-controller="toggle" data-action="click-&gt;toggle#toggle" aria-pressed="false" aria-label="Toggle italic"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 4h-9m4 16H5M15 4L9 20"></path></svg>
+</button>

src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component toggle, code file Outline.html__1.html

@@ -0,0 +1,25 @@
+<!--
+- Kit: Shadcn UI
+- Component: Toggle
+- Code:
+```twig
+<div class="flex flex-wrap items-center gap-2">
+    <twig:Toggle variant="outline" aria-label="Toggle italic">
+        <twig:ux:icon name="lucide:italic" />
+        Italic
+    </twig:Toggle>
+    <twig:Toggle variant="outline" aria-label="Toggle bold">
+        <twig:ux:icon name="lucide:bold" />
+        Bold
+    </twig:Toggle>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="flex flex-wrap items-center gap-2">
+    <button type="button" class="inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-pressed:bg-accent aria-pressed:text-accent-foreground [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*='size-'])]:size-4 border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground h-9 min-w-9 px-2" data-slot="toggle" data-controller="toggle" data-action="click-&gt;toggle#toggle" aria-pressed="false" aria-label="Toggle italic"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 4h-9m4 16H5M15 4L9 20"></path></svg>
+        Italic
+    </button>
+    <button type="button" class="inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-pressed:bg-accent aria-pressed:text-accent-foreground [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*='size-'])]:size-4 border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground h-9 min-w-9 px-2" data-slot="toggle" data-controller="toggle" data-action="click-&gt;toggle#toggle" aria-pressed="false" aria-label="Toggle bold"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8"></path></svg>
+        Bold
+    </button>
+</div>

src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component toggle, code file Size.html__1.html

@@ -0,0 +1,26 @@
+<!--
+- Kit: Shadcn UI
+- Component: Toggle
+- Code:
+```twig
+<div class="flex flex-wrap items-center gap-2">
+    <twig:Toggle variant="outline" aria-label="Toggle small" size="sm">
+        Small
+    </twig:Toggle>
+    <twig:Toggle variant="outline" aria-label="Toggle default" size="default">
+        Default
+    </twig:Toggle>
+    <twig:Toggle variant="outline" aria-label="Toggle large" size="lg">
+        Large
+    </twig:Toggle>
+</div>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<div class="flex flex-wrap items-center gap-2">
+    <button type="button" class="inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-pressed:bg-accent aria-pressed:text-accent-foreground [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*='size-'])]:size-4 border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground h-8 min-w-8 px-1.5" data-slot="toggle" data-controller="toggle" data-action="click-&gt;toggle#toggle" aria-pressed="false" aria-label="Toggle small">Small
+    </button>
+    <button type="button" class="inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-pressed:bg-accent aria-pressed:text-accent-foreground [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*='size-'])]:size-4 border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground h-9 min-w-9 px-2" data-slot="toggle" data-controller="toggle" data-action="click-&gt;toggle#toggle" aria-pressed="false" aria-label="Toggle default">Default
+    </button>
+    <button type="button" class="inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-pressed:bg-accent aria-pressed:text-accent-foreground [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*='size-'])]:size-4 border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground h-10 min-w-10 px-2.5" data-slot="toggle" data-controller="toggle" data-action="click-&gt;toggle#toggle" aria-pressed="false" aria-label="Toggle large">Large
+    </button>
+</div>

src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component toggle, code file Small.html__1.html

@@ -0,0 +1,12 @@
+<!--
+- Kit: Shadcn UI
+- Component: Toggle
+- Code:
+```twig
+<twig:Toggle size="sm" aria-label="Toggle italic">
+    <twig:ux:icon name="lucide:italic" />
+</twig:Toggle>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<button type="button" class="inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-pressed:bg-accent aria-pressed:text-accent-foreground [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*='size-'])]:size-4 bg-transparent h-8 min-w-8 px-1.5" data-slot="toggle" data-controller="toggle" data-action="click-&gt;toggle#toggle" aria-pressed="false" aria-label="Toggle italic"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 4h-9m4 16H5M15 4L9 20"></path></svg>
+</button>

src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component toggle, code file Usage.html__1.html

@@ -0,0 +1,12 @@
+<!--
+- Kit: Shadcn UI
+- Component: Toggle
+- Code:
+```twig
+<twig:Toggle>
+    Toggle
+</twig:Toggle>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<button type="button" class="inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-pressed:bg-accent aria-pressed:text-accent-foreground [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*='size-'])]:size-4 bg-transparent h-9 min-w-9 px-2" data-slot="toggle" data-controller="toggle" data-action="click-&gt;toggle#toggle" aria-pressed="false">Toggle
+</button>

src/Toolkit/tests/Functional/__snapshots__/ComponentsRenderingTest__testComponentRendering with data set Kit shadcn, component toggle, code file With Text.html__1.html

@@ -0,0 +1,14 @@
+<!--
+- Kit: Shadcn UI
+- Component: Toggle
+- Code:
+```twig
+<twig:Toggle aria-label="Toggle italic">
+    <twig:ux:icon name="lucide:italic" />
+    Italic
+</twig:Toggle>
+```
+- Rendered code (prettified for testing purposes, run "php vendor/bin/phpunit -d --update-snapshots" to update snapshots): -->
+<button type="button" class="inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-pressed:bg-accent aria-pressed:text-accent-foreground [&amp;_svg]:pointer-events-none [&amp;_svg]:shrink-0 [&amp;_svg:not([class*='size-'])]:size-4 bg-transparent h-9 min-w-9 px-2" data-slot="toggle" data-controller="toggle" data-action="click-&gt;toggle#toggle" aria-pressed="false" aria-label="Toggle italic"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 4h-9m4 16H5M15 4L9 20"></path></svg>
+    Italic
+</button>