@mcp-b/web-components 0.2.0

package/dist/radio-BtDG9xJM.js

@@ -0,0 +1,658 @@
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import "./radio-item-DIrUStAX.js";
+import { css, html } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import hostStyles from "@mcp-b/wc-support/styles/host.styles";
+import { SigveloFormControlElement } from "@mcp-b/wc-support/base/sigvelo-element";
+import { classMap } from "lit/directives/class-map.js";
+import { SigveloChangeEvent, SigveloInputEvent } from "@mcp-b/wc-support/events/form";
+import formControlStyles from "@mcp-b/wc-support/styles/form-control.styles";
+//#region src/components/radio/radio.styles.ts
+var radio_styles_default = css`
+  #group {
+    display: flex;
+    margin-block: 0.5rem;
+  }
+
+  :host([orientation="horizontal"]) #group {
+    flex-wrap: wrap;
+    gap: 1.25rem;
+  }
+
+  :host([orientation="vertical"]) #group {
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  :host(:state(disabled)) #label,
+  :host(:state(disabled)) #description {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+`;
+//#endregion
+//#region src/components/radio/radio.ts
+const nativeRadio = document.createElement("input");
+nativeRadio.name = "sigvelo-faux-radio";
+nativeRadio.type = "radio";
+nativeRadio.required = true;
+const VALIDATION_MESSAGE = nativeRadio.validationMessage;
+/**
+* <sigvelo-radio>
+*
+* @summary Allows the user to select one option from a group of choices.
+* @tag sigvelo-radio
+* @documentation https://design-system.sigvelo.com/docs/components/radio
+* @status stable
+* @since 1.0
+*
+* @dependency sigvelo-radio-item
+*
+* @slot - The radio items to place in the group.
+* @slot label - The radio's label. For plain-text labels, you can use the `label` attribute instead.
+* @slot description - The radios's description. For plain-text descriptions, you can use the `description`
+*  attribute instead.
+*
+* @event sigvelo-change - Emitted when the user commits changes to the radio's value.
+* @event sigvelo-input - Emitted when the radio receives input.
+*
+* @csspart label - The element that contains the radio's label.
+* @csspart description - The element that contains the radio's description.
+* @csspart group - The element that wraps the grouped radios.
+*
+* @cssstate user-valid - Applied when the radio is valid and the user has sufficiently interacted with it.
+* @cssstate user-invalid - Applied when the radio is invalid and the user has sufficiently interacted with it.
+*
+* @example Default
+* Radios follow the ARIA APG radio group pattern for accessibility. Unlike native radio buttons, Sigvelo radio items must be placed inside a radio controller as shown below.
+*
+* ```html
+* <sigvelo-radio
+*   label="Color"
+*   description="Select a color for your new cat"
+*   name="color"
+*   value="black"
+* >
+*   <sigvelo-radio-item value="black">Black</sigvelo-radio-item>
+*   <sigvelo-radio-item value="white">White</sigvelo-radio-item>
+*   <sigvelo-radio-item value="orange">Orange</sigvelo-radio-item>
+*   <sigvelo-radio-item value="gray">Gray</sigvelo-radio-item>
+* </sigvelo-radio>
+* ```
+*
+* @example Labels and descriptions
+* You can use the `label` and `description` attributes to provide plain text labels and descriptions for the radio. If you want to provide HTML, use the `label` and `description` slots instead.
+*
+* ```html
+* <sigvelo-radio label="Favorite pet" name="animal">
+*   <span slot="description">
+*     For more information, <a href="https://example.com/" target="_blank">visit our website</a>.
+*   </span>
+*   <sigvelo-radio-item value="cat">Cat</sigvelo-radio-item>
+*   <sigvelo-radio-item value="dog">Dog</sigvelo-radio-item>
+*   <sigvelo-radio-item value="bird">Bird</sigvelo-radio-item>
+*   <sigvelo-radio-item value="lizard">Lizard</sigvelo-radio-item>
+* </sigvelo-radio>
+* ```
+*
+* @example Providing an initial value
+* Use the `value` attribute to provide an initial value for the radio. The value should match an existing radio item's value.
+*
+* ```html
+* <sigvelo-radio label="Fur type" name="fur" value="short">
+*   <sigvelo-radio-item value="short">Short</sigvelo-radio-item>
+*   <sigvelo-radio-item value="medium">Medium</sigvelo-radio-item>
+*   <sigvelo-radio-item value="long">Long</sigvelo-radio-item>
+*   <sigvelo-radio-item value="hairless">Hairless</sigvelo-radio-item>
+* </sigvelo-radio>
+* ```
+*
+* **Warning:** This behavior is different from native radios that use the `checked` attribute to set the value. With `<sigvelo-radio>`, always use the `value` attribute to set the value.
+*
+* @example Changing the orientation
+* To stack radio items on top of each other instead of side by side, set the `orientation` attribute to `vertical`.
+*
+* ```html
+* <sigvelo-radio orientation="vertical" label="Fur type" name="fur">
+*   <sigvelo-radio-item value="short">Short</sigvelo-radio-item>
+*   <sigvelo-radio-item value="medium">Medium</sigvelo-radio-item>
+*   <sigvelo-radio-item value="long">Long</sigvelo-radio-item>
+*   <sigvelo-radio-item value="hairless">Hairless</sigvelo-radio-item>
+* </sigvelo-radio>
+* ```
+*
+* @example Filled radios
+* Set the `variant` attribute to `filled` to change a radio item's variant.
+*
+* ```html
+* <sigvelo-radio label="Favorite pet" name="animal">
+*   <sigvelo-radio-item variant="filled" value="cat">Cat</sigvelo-radio-item>
+*   <sigvelo-radio-item variant="filled" value="dog">Dog</sigvelo-radio-item>
+*   <sigvelo-radio-item variant="filled" value="bird">Bird</sigvelo-radio-item>
+*   <sigvelo-radio-item variant="filled" value="lizard">Lizard</sigvelo-radio-item>
+* </sigvelo-radio>
+* ```
+*
+* @example Changing the size
+* Use the `size` attribute to change a radio item's size.
+*
+* ```html
+* <sigvelo-radio label="Select a size" name="size" orientation="vertical">
+*   <sigvelo-radio-item size="xs" value="a">Extra small</sigvelo-radio-item>
+*   <sigvelo-radio-item size="sm" value="b">Small</sigvelo-radio-item>
+*   <sigvelo-radio-item size="md" value="c">Medium</sigvelo-radio-item>
+*   <sigvelo-radio-item size="lg" value="d">Large</sigvelo-radio-item>
+*   <sigvelo-radio-item size="xl" value="e">Extra large</sigvelo-radio-item>
+* </sigvelo-radio>
+* ```
+*
+* @example Disabling
+* To disable the entire control, add the `disabled` attribute to the radio element.
+*
+* ```html
+* <sigvelo-radio label="Favorite pet" name="animal" disabled value="cat">
+*   <sigvelo-radio-item value="cat">Cat</sigvelo-radio-item>
+*   <sigvelo-radio-item value="dog">Dog</sigvelo-radio-item>
+*   <sigvelo-radio-item value="bird">Bird</sigvelo-radio-item>
+*   <sigvelo-radio-item value="lizard">Lizard</sigvelo-radio-item>
+* </sigvelo-radio>
+* ```
+*
+* To disable individual options, add the `disabled` attribute to one or more radio items.
+*
+* ```html
+* <sigvelo-radio label="Favorite pet" name="animal" value="cat">
+*   <sigvelo-radio-item value="cat">Cat</sigvelo-radio-item>
+*   <sigvelo-radio-item value="dog" disabled>Dog</sigvelo-radio-item>
+*   <sigvelo-radio-item value="bird" disabled>Bird</sigvelo-radio-item>
+*   <sigvelo-radio-item value="lizard">Lizard</sigvelo-radio-item>
+* </sigvelo-radio>
+* ```
+*
+* @example Validation
+* The `required` attribute can be applied to enable validation using the Constraint Validation API. This will prevent form submission until a radio item is checked.
+*
+* ```html
+* <form action="about:blank" method="get" target="_blank">
+*   <sigvelo-radio label="Select one" name="animal" required>
+*     <sigvelo-radio-item value="cats">Cats</sigvelo-radio-item>
+*     <sigvelo-radio-item value="dogs">Dogs</sigvelo-radio-item>
+*   </sigvelo-radio>
+*   <br>
+*   <sigvelo-button type="submit" color="primary">Submit</sigvelo-button>
+*   <sigvelo-button type="reset">Reset</sigvelo-button>
+* </form>
+* ```
+*
+* @example Using custom validation
+* Use the `setCustomValidity()` method to make the radio invalid and show a custom error message on submit. This will override all other validation parameters. To clear the error, remove the attribute or set it to an empty string.
+*
+* ```html
+* <form action="about:blank" method="get" target="_blank" id="radio__custom-validation">
+*   <sigvelo-radio label="Select one" name="animal">
+*     <sigvelo-radio-item value="cats">Cats</sigvelo-radio-item>
+*     <sigvelo-radio-item value="dogs">Dogs</sigvelo-radio-item>
+*   </sigvelo-radio>
+*   <br>
+*   <sigvelo-button type="submit" color="primary">Submit</sigvelo-button>
+*   <sigvelo-button type="reset">Reset</sigvelo-button>
+* </form>
+*
+* <script type="module">
+*   import { allDefined } from '/dist/sigvelo.js';
+*
+*   await allDefined();
+*
+*   const form = document.getElementById('radio__custom-validation');
+*   const radio = form.querySelector('sigvelo-radio');
+*
+*   radio.setCustomValidity('Not so fast, bubba!');
+* <\/script>
+* ```
+*
+* @example Styling validation
+* You can style valid and invalid radios using the `:valid` and `:invalid` pseudo classes.
+*
+* ```html
+* <form action="about:blank" method="get" target="_blank" class="radio__validation-pseudo">
+*   <sigvelo-radio label="Select one" name="animal" required>
+*     <sigvelo-radio-item value="cats">Cats</sigvelo-radio-item>
+*     <sigvelo-radio-item value="dogs">Dogs</sigvelo-radio-item>
+*   </sigvelo-radio>
+*   <br>
+*   <sigvelo-button type="submit" color="primary">Submit</sigvelo-button>
+*   <sigvelo-button type="reset">Reset</sigvelo-button>
+* </form>
+*
+* <style>
+*   .radio__validation-pseudo {
+*     sigvelo-radio:valid {
+*       outline: solid 2px var(--sigvelo-color-success-border);
+*       outline-offset: .5rem;
+*     }
+*
+*     sigvelo-radio:invalid {
+*       outline: solid 2px var(--sigvelo-color-danger-border);
+*       outline-offset: .5rem;
+*     }
+*   }
+* </style>
+* ```
+*
+* However, these selectors will match even before the user has had a chance to fill out the form. More often than not, you'll want to use the `user-valid` and `user-invalid` custom states instead. This way, validation styles are only shown _after_ the user interacts with the form control or when the form is submitted.
+*
+* ```html
+* <form action="about:blank" method="get" target="_blank" class="radio__validation-custom">
+*   <sigvelo-radio label="Select one" name="animal" required>
+*     <sigvelo-radio-item value="cats">Cats</sigvelo-radio-item>
+*     <sigvelo-radio-item value="dogs">Dogs</sigvelo-radio-item>
+*   </sigvelo-radio>
+*   <br>
+*   <sigvelo-button type="submit" color="primary">Submit</sigvelo-button>
+*   <sigvelo-button type="reset">Reset</sigvelo-button>
+* </form>
+*
+* <style>
+*   .radio__validation-custom {
+*     sigvelo-radio:state(user-valid) {
+*       outline: solid 2px var(--sigvelo-color-success-border);
+*       outline-offset: .5rem;
+*     }
+*
+*     sigvelo-radio:state(user-invalid) {
+*       outline: solid 2px var(--sigvelo-color-danger-border);
+*       outline-offset: .5rem;
+*     }
+*   }
+* </style>
+* ```
+*
+* @example Styling radios
+* Radios come with a simple, minimal appearance. Feel free to customize them with your own styles. Here are some examples, for inspiration.
+*
+* ```html
+* <sigvelo-radio label="How would you like to login?" name="auth" class="radio__auth">
+*   <sigvelo-radio-item value="magic">
+*     <sigvelo-icon name="wand"></sigvelo-icon> Magic link
+*   </sigvelo-radio-item>
+*   <sigvelo-radio-item value="password">
+*     <sigvelo-icon name="password"></sigvelo-icon> Password
+*   </sigvelo-radio-item>
+* </sigvelo-radio>
+*
+* <style>
+*   .radio__auth {
+*     sigvelo-radio-item {
+*       background: var(--sigvelo-color-surface);
+*       border: solid 1px var(--sigvelo-color-neutral-border-muted);
+*       border-radius: .5rem;
+*       box-shadow: var(--sigvelo-elevation-hairline);
+*       padding: 1rem;
+*       cursor: pointer;
+*     }
+*
+*     sigvelo-radio-item:state(checked) {
+*       background-color: var(--sigvelo-color-primary-bg-subtle);
+*       border-color: var(--sigvelo-color-primary-border-muted);
+*     }
+*
+*     sigvelo-radio-item:focus-visible {
+*       outline: var(--sigvelo-focus-ring);
+*       outline-offset: var(--sigvelo-focus-offset);
+*     }
+*   }
+* </style>
+* ```
+*
+* ```html
+* <sigvelo-radio
+*   label="Select a plan"
+*   description="All plans come with a free cat"
+*   name="plan"
+*   class="radio__hosting"
+* >
+*   <sigvelo-radio-item value="startup">
+*     Startup<br>
+*     <small>12GB &middot; 6 CPUs &middot; 256GB SSD</small>
+*   </sigvelo-radio-item>
+*
+*   <sigvelo-radio-item value="business">
+*     Business<br>
+*     <small>16GB &middot; 8 CPUs &middot; 512GB SSD</small>
+*   </sigvelo-radio-item>
+*
+*   <sigvelo-radio-item value="enterprise">
+*     Enterprise<br>
+*     <small>32GB &middot; 12 CPUs &middot; 1TB SSD</small>
+*   </sigvelo-radio-item>
+* </sigvelo-radio>
+*
+* <style>
+*   .radio__hosting {
+*     sigvelo-radio-item {
+*       position: relative;
+*       width: 100%;
+*       background: var(--sigvelo-color-surface);
+*       border: solid 1px var(--sigvelo-color-neutral-border-muted);
+*       box-shadow: var(--sigvelo-elevation-hairline);
+*       border-radius: .5rem;
+*       padding: 1rem;
+*     }
+*
+*     sigvelo-radio-item::part(label) {
+*       width: 100%;
+*       display: block;
+*     }
+*
+*     sigvelo-radio-item::part(visual-box) {
+*       position: absolute;
+*       top: calc(50% - .625rem);
+*       right: 1rem;
+*     }
+*
+*     sigvelo-radio-item:state(checked) {
+*       background-color: var(--sigvelo-color-primary-bg-subtle);
+*       border-color: var(--sigvelo-color-primary-border-muted);
+*     }
+*
+*     sigvelo-radio-item:focus-visible {
+*       outline: var(--sigvelo-focus-ring);
+*       outline-offset: 2px;
+*     }
+*
+*     small {
+*       color: var(--sigvelo-color-text-muted);
+*     }
+*   }
+* </style>
+* ```
+*
+* ```html
+* <sigvelo-radio
+*   label="Color"
+*   description="Choose a color for your new device"
+*   name="color"
+*   class="radio__colors"
+* >
+*   <sigvelo-radio-item value="silver" style="color: #b6b9c9;">Silver</sigvelo-radio-item>
+*   <sigvelo-radio-item value="blue" style="color: #83c0f5;">Blue</sigvelo-radio-item>
+*   <sigvelo-radio-item value="rose" style="color: #eea3bb;">Rose</sigvelo-radio-item>
+*   <sigvelo-radio-item value="gold" style="color: #d1b86c;">Gold</sigvelo-radio-item>
+* </sigvelo-radio>
+*
+* <style>
+*   .radio__colors {
+*     &::part(group) {
+*       gap: .5rem;
+*     }
+*
+*     sigvelo-radio-item {
+*       width: 3rem;
+*       height: 3rem;
+*       background-color: currentColor;
+*       background-image: linear-gradient(#fff8, transparent);
+*       box-shadow: inset 0 1px 2px color-mix(in oklab, currentColor, black 12.5%);
+*       border-radius: var(--sigvelo-radius-circle);
+*       cursor: pointer;
+*     }
+*
+*     sigvelo-radio-item:state(checked) {
+*       outline: var(--sigvelo-border-style) var(--sigvelo-focus-width) currentColor;
+*       outline-offset: 2px;
+*     }
+*
+*     sigvelo-radio-item:focus-visible {
+*       outline: var(--sigvelo-focus-ring);
+*       outline-offset: 2px;
+*     }
+*
+*     sigvelo-radio-item::part(label) {
+*       position: absolute;
+*       width: 1px;
+*       height: 1px;
+*       overflow: hidden;
+*       white-space: nowrap;
+*       clip-path: inset(50%);
+*     }
+*   }
+* </style>
+* ```
+*
+* **Warning:** It's not recommended to hide the radio button unless your styles make it very clear to users that the control is selectable.
+*/
+var SigveloRadio = class extends SigveloFormControlElement {
+	constructor(..._args) {
+		super(..._args);
+		this.isInvalid = false;
+		this.hadUserInteraction = false;
+		this.wasSubmitted = false;
+		this.value = "";
+		this.orientation = "horizontal";
+		this.required = false;
+		this.disabled = false;
+	}
+	static {
+		this.formAssociated = true;
+	}
+	static {
+		this.observeSlots = true;
+	}
+	static {
+		this.styles = [
+			hostStyles,
+			formControlStyles,
+			radio_styles_default
+		];
+	}
+	get focusableAnchor() {
+		return this.getItems()[0];
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener("invalid", this.handleHostInvalid);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener("invalid", this.handleHostInvalid);
+	}
+	firstUpdated() {
+		if (this.value) {
+			const selectedItem = this.getSelectedItem({ includeDisabled: true });
+			if (selectedItem) this.setSelectedItem(selectedItem);
+		}
+	}
+	updated(changedProperties) {
+		this.updateValidity();
+		if (changedProperties.has("value")) this.internals.setFormValue(this.value);
+		if (changedProperties.has("disabled")) {
+			this.customStates.set("disabled", this.disabled);
+			this.updateControllerDisabledState();
+		}
+		if (this.hadUserInteraction || this.wasSubmitted) {
+			this.customStates.set("user-invalid", this.isInvalid);
+			this.customStates.set("user-valid", !this.isInvalid);
+		} else {
+			this.customStates.set("user-invalid", false);
+			this.customStates.set("user-valid", false);
+		}
+	}
+	/** @internal Called when a containing fieldset is disabled. */
+	formDisabledCallback(isDisabled) {
+		this.getItems({ includeDisabled: true }).forEach((item) => item.disabledByController = isDisabled);
+	}
+	/** @internal Called when the form is reset. */
+	formResetCallback() {
+		this.isInvalid = false;
+		this.hadUserInteraction = false;
+		this.wasSubmitted = false;
+		const itemToSelect = this.getItems().find((item) => item.getAttribute("value") === this.getAttribute("value"));
+		if (itemToSelect) this.setSelectedItem(itemToSelect);
+		else this.setSelectedItem(null);
+	}
+	/** Gets an array of radio items slotted into the radio. */
+	getItems(options) {
+		if (options?.includeDisabled) return [...this.querySelectorAll("sigvelo-radio-item")];
+		else return [...this.querySelectorAll("sigvelo-radio-item:not(:state(disabled))")];
+	}
+	handleHostInvalid() {
+		this.wasSubmitted = true;
+	}
+	async handleGroupClick(event) {
+		const selectedItem = this.getSelectedItem();
+		const radioItem = event.target.closest("sigvelo-radio-item");
+		if (radioItem && !radioItem.disabled && !radioItem.disabledByController) {
+			this.setSelectedItem(radioItem);
+			this.hadUserInteraction = true;
+			if (radioItem !== selectedItem) {
+				await this.updateComplete;
+				this.dispatchEvent(new SigveloInputEvent());
+				this.dispatchEvent(new InputEvent("input"));
+				this.dispatchEvent(new SigveloChangeEvent());
+				this.dispatchEvent(new Event("change", {
+					bubbles: true,
+					composed: true
+				}));
+			}
+		}
+	}
+	async handleGroupKeyDown(event) {
+		const target = event.target.closest("sigvelo-radio-item");
+		const radioItems = this.getItems();
+		const currentIndex = radioItems.findIndex((item) => item.tabIndex === 0) || 0;
+		let itemToSelect;
+		if (event.key === "ArrowLeft" || event.key === "ArrowUp") itemToSelect = radioItems[currentIndex <= 0 ? radioItems.length - 1 : currentIndex - 1];
+		if (event.key === "ArrowRight" || event.key === "ArrowDown") itemToSelect = radioItems[currentIndex >= radioItems.length - 1 ? 0 : currentIndex + 1];
+		if (event.key === "Home") itemToSelect = radioItems[0];
+		if (event.key === "End") itemToSelect = radioItems[radioItems.length - 1];
+		if (event.key === " " && target) itemToSelect = target;
+		if (itemToSelect) {
+			event.preventDefault();
+			this.setSelectedItem(itemToSelect);
+			itemToSelect.focus();
+			this.hadUserInteraction = true;
+			await this.updateComplete;
+			this.dispatchEvent(new SigveloInputEvent());
+			this.dispatchEvent(new InputEvent("input"));
+			this.dispatchEvent(new SigveloChangeEvent());
+			this.dispatchEvent(new Event("change", {
+				bubbles: true,
+				composed: true
+			}));
+		}
+	}
+	/**
+	* @internal Makes only the selected radio item tabbable. If no radio item is selected, the first non-disabled radio
+	* item will be tabbable.
+	*/
+	resetRovingTabIndex() {
+		const radioItems = this.getItems({ includeDisabled: true });
+		const selectedItem = this.getSelectedItem({ includeDisabled: true });
+		const selectedItemIndex = radioItems.findIndex((item) => item === selectedItem);
+		const targetIndex = selectedItemIndex > -1 ? selectedItemIndex : 0;
+		radioItems.forEach((item, index) => {
+			if (this.disabled) item.tabIndex = -1;
+			else item.tabIndex = index === targetIndex ? 0 : -1;
+		});
+	}
+	/** Gets the selected item. */
+	getSelectedItem(options) {
+		return this.getItems(options).find((item) => item.value === this.value) || null;
+	}
+	/**
+	* Sets the selected item and updates the roving tab index. If `null` is provided, the selection will be cleared and
+	* the tab index will go to the first radio item.
+	*/
+	setSelectedItem(selectedItem) {
+		const radioItems = this.getItems({ includeDisabled: true });
+		if (selectedItem) {
+			radioItems.forEach((item) => {
+				item.checked = item === selectedItem;
+				item.tabIndex = item === selectedItem ? 0 : -1;
+			});
+			this.value = selectedItem.value;
+		} else if (!selectedItem) {
+			radioItems.forEach((item) => {
+				item.checked = false;
+				item.tabIndex = -1;
+			});
+			radioItems[0].tabIndex = 0;
+			this.value = "";
+		}
+	}
+	/** Updates the controller disabled state for all radio items */
+	updateControllerDisabledState() {
+		this.getItems({ includeDisabled: true }).forEach((item) => item.disabledByController = this.disabled);
+		requestAnimationFrame(() => this.resetRovingTabIndex());
+	}
+	/** Sets the form control's validity */
+	async updateValidity() {
+		await this.updateComplete;
+		const hasCustomValidity = this.getCustomValidity().length > 0;
+		const hasMissingValue = this.required && !this.value;
+		const validationMessage = hasCustomValidity ? this.getCustomValidity() : VALIDATION_MESSAGE;
+		const flags = {
+			customError: hasCustomValidity,
+			valueMissing: hasMissingValue
+		};
+		this.isInvalid = hasCustomValidity ? true : hasMissingValue;
+		this.internals.setValidity(flags, validationMessage, this.focusableAnchor);
+	}
+	/** Sets focus to the selected item or the first item if none are selected. */
+	focus(options) {
+		const items = this.getItems();
+		const itemToFocus = items.find((item) => item.checked) || items[0];
+		if (itemToFocus) itemToFocus.focus(options);
+	}
+	render() {
+		const hasLabel = this.label || this.slotsWithContent.has("label");
+		const hasDescription = this.description || this.slotsWithContent.has("description");
+		return html`
+      <label
+        id="label"
+        part="label"
+        for="text-box"
+        class=${classMap({ vh: !hasLabel })}
+        @click=${this.focus}
+      >
+        <slot name="label">${this.label}</slot>
+      </label>
+
+      <div id="description" part="description" class=${classMap({ vh: !hasDescription })}>
+        <slot name="description">${this.description}</slot>
+      </div>
+
+      <div
+        id="group"
+        part="group"
+        role="radiogroup"
+        aria-labelledby="label"
+        aria-describedby="description"
+        @click=${this.handleGroupClick}
+        @keydown=${this.handleGroupKeyDown}
+      >
+        <slot @slotchange=${this.resetRovingTabIndex}></slot>
+      </div>
+    `;
+	}
+};
+__decorate([query("#group")], SigveloRadio.prototype, "group", void 0);
+__decorate([state()], SigveloRadio.prototype, "isInvalid", void 0);
+__decorate([state()], SigveloRadio.prototype, "hadUserInteraction", void 0);
+__decorate([state()], SigveloRadio.prototype, "wasSubmitted", void 0);
+__decorate([property()], SigveloRadio.prototype, "label", void 0);
+__decorate([property()], SigveloRadio.prototype, "description", void 0);
+__decorate([property({ reflect: true })], SigveloRadio.prototype, "name", void 0);
+__decorate([property()], SigveloRadio.prototype, "value", void 0);
+__decorate([property({ reflect: true })], SigveloRadio.prototype, "orientation", void 0);
+__decorate([property()], SigveloRadio.prototype, "form", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloRadio.prototype, "required", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloRadio.prototype, "disabled", void 0);
+customElements.define("sigvelo-radio", SigveloRadio);
+//#endregion
+export { SigveloRadio as t };