@mcp-b/web-components 0.2.0

package/dist/radio-item-DIrUStAX.js

@@ -0,0 +1,264 @@
+import "./icon-BPVkNsY4.js";
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { css, html } from "lit";
+import { property, state } from "lit/decorators.js";
+import hostStyles from "@mcp-b/wc-support/styles/host.styles";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+import { classMap } from "lit/directives/class-map.js";
+import { SigveloBlurEvent, SigveloFocusEvent } from "@mcp-b/wc-support/events/form";
+//#region src/components/radio-item/radio-item.styles.ts
+var radio_item_styles_default = css`
+  :host {
+    display: inline-flex;
+  }
+
+  /* The radio item's label */
+  #label {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5em;
+    cursor: pointer;
+
+    &:has(.xs) {
+      font-size: var(--sigvelo-control-text-xs);
+    }
+
+    &:has(.sm) {
+      font-size: var(--sigvelo-control-text-sm);
+    }
+
+    &:has(.md) {
+      font-size: var(--sigvelo-control-text-md);
+    }
+
+    &:has(.lg) {
+      font-size: var(--sigvelo-control-text-lg);
+    }
+
+    &:has(.xl) {
+      font-size: var(--sigvelo-control-text-xl);
+    }
+  }
+
+  :host(:state(disabled)) #label {
+    cursor: not-allowed;
+  }
+
+  #visual-box {
+    display: flex;
+    position: relative;
+    width: 1.125em;
+    height: 1.125em;
+    border-radius: var(--sigvelo-radius-circle);
+    transition:
+      var(--sigvelo-motion-duration-interaction) background-color ease,
+      var(--sigvelo-motion-duration-interaction) border-color ease;
+
+    /* Normal */
+    &.normal {
+      border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+        var(--sigvelo-color-neutral-border-muted);
+      background-color: var(--sigvelo-color-surface);
+      color: var(--sigvelo-color-primary-text-on-bg);
+
+      &.checked {
+        border-color: var(--sigvelo-color-primary-bg);
+        background-color: var(--sigvelo-color-primary-bg);
+      }
+    }
+
+    /* Filled */
+    &.filled {
+      border: var(--sigvelo-border-style) var(--sigvelo-border-width)
+        var(--sigvelo-color-neutral-bg-muted);
+      background-color: var(--sigvelo-color-neutral-bg-muted);
+      color: var(--sigvelo-color-primary-text-on-bg);
+
+      &.checked {
+        border-color: var(--sigvelo-color-primary-bg);
+        background-color: var(--sigvelo-color-primary-bg);
+      }
+    }
+
+    /* Radio icons */
+    #radio-icon {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      scale: 0;
+      font-size: 1.25em;
+      opacity: 0;
+      stroke-width: 2px;
+      transition:
+        var(--sigvelo-motion-duration-interaction) opacity ease,
+        var(--sigvelo-motion-duration-interaction) scale ease;
+      will-change: opacity; /* prevents the icon from shifting slightly in Safari when checked */
+    }
+
+    &.checked #radio-icon {
+      scale: 0.6;
+      opacity: 1;
+    }
+
+    /* The actual radio control */
+    #radio {
+      appearance: none;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      padding: 0;
+      border: none;
+      background: none;
+      cursor: inherit;
+
+      &:focus {
+        outline: none;
+      }
+    }
+  }
+
+  /* Focus styles */
+  :host(:focus-visible:not(:state(disabled))) {
+    outline: none;
+  }
+
+  :host(:focus-visible:not(:state(disabled))) #visual-box {
+    outline: var(--sigvelo-border-style) calc(var(--sigvelo-border-width) + 1px)
+      var(--sigvelo-color-focus);
+    outline-offset: var(--sigvelo-border-width);
+  }
+
+  :host(:state(disabled)) {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+`;
+//#endregion
+//#region src/components/radio-item/radio-item.ts
+/**
+* <sigvelo-radio-item>
+*
+* @summary Represents individual choices within a radio.
+* @tag sigvelo-radio-item
+* @documentation https://design-system.sigvelo.com/docs/components/radio-item
+* @status stable
+* @since 1.0
+*
+* @dependency sigvelo-icon
+*
+* @slot - The radio item's label. For plain-text labels, you can use the `label` attribute instead.
+*
+* @event sigvelo-blur - Emitted when the radio item loses focus. This event does not bubble.
+* @event sigvelo-focus - Emitted when the radio item receives focus. This event does not bubble.
+*
+* @csspart label - The `<label>` that wraps the entire control.
+* @csspart visual-box - The element that wraps the internal radio.
+* @csspart radio-icon - The radio icon, a `<sigvelo-icon>` element.
+* @csspart radio-icon__svg - The radio icon's `svg` part.
+*
+* @cssstate checked - Applied when the radio item is checked.
+* @cssstate disabled - Applied when the radio item is disabled.
+* @cssstate focused - Applied when the radio item has focus.
+*
+* @example Default
+* This component must only be used within a radio. You can see some examples of radio items being used in the radio documentation.
+*/
+var SigveloRadioItem = class extends SigveloElement {
+	constructor(..._args) {
+		super(..._args);
+		this.disabledByController = false;
+		this.value = "";
+		this.checked = false;
+		this.disabled = false;
+		this.variant = "normal";
+		this.size = "md";
+		this.handleBlur = () => {
+			this.customStates.set("focused", false);
+			this.dispatchEvent(new SigveloBlurEvent());
+		};
+		this.handleFocus = () => {
+			this.customStates.set("focused", true);
+			this.dispatchEvent(new SigveloFocusEvent());
+		};
+	}
+	static {
+		this.styles = [hostStyles, radio_item_styles_default];
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener("focus", this.handleFocus);
+		this.addEventListener("blur", this.handleBlur);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener("focus", this.handleFocus);
+		this.removeEventListener("blur", this.handleBlur);
+	}
+	firstUpdated() {
+		this.setAttribute("role", "radio");
+	}
+	updated(changedProperties) {
+		if (changedProperties.has("checked")) {
+			this.setAttribute("aria-checked", this.checked ? "true" : "false");
+			this.customStates.set("checked", this.checked);
+		}
+		if (changedProperties.has("disabled") || changedProperties.has("disabledByController")) {
+			const isDisabled = this.disabled || this.disabledByController;
+			this.setAttribute("aria-disabled", isDisabled ? "true" : "false");
+			this.customStates.set("disabled", isDisabled);
+			if (this.checked && isDisabled) this.closest("sigvelo-radio")?.resetRovingTabIndex();
+		}
+	}
+	render() {
+		const isDisabled = this.disabled || this.disabledByController;
+		return html`
+      <div id="label" part="label">
+        <div
+          id="visual-box"
+          part="visual-box"
+          aria-hidden="true"
+          class=${classMap({
+			normal: this.variant === "normal",
+			filled: this.variant === "filled",
+			xs: this.size === "xs",
+			sm: this.size === "sm",
+			md: this.size === "md",
+			lg: this.size === "lg",
+			xl: this.size === "xl",
+			checked: this.checked,
+			disabled: isDisabled
+		})}
+        >
+          <sigvelo-icon
+            id="radio-icon"
+            part="radio-icon"
+            exportparts="radio-icon__svg"
+            library="system"
+            family="filled"
+            name="circle"
+          ></sigvelo-icon>
+        </div>
+        <slot>${this.label}</slot>
+      </div>
+    `;
+	}
+};
+__decorate([state()], SigveloRadioItem.prototype, "disabledByController", void 0);
+__decorate([property()], SigveloRadioItem.prototype, "label", void 0);
+__decorate([property()], SigveloRadioItem.prototype, "description", void 0);
+__decorate([property()], SigveloRadioItem.prototype, "value", void 0);
+__decorate([property({ type: Boolean })], SigveloRadioItem.prototype, "checked", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SigveloRadioItem.prototype, "disabled", void 0);
+__decorate([property({ reflect: true })], SigveloRadioItem.prototype, "variant", void 0);
+__decorate([property({ reflect: true })], SigveloRadioItem.prototype, "size", void 0);
+customElements.define("sigvelo-radio-item", SigveloRadioItem);
+//#endregion
+export { SigveloRadioItem as t };

package/dist/radio-item-Xq2U3cMu.d.ts

@@ -0,0 +1,69 @@
+import { CSSResultGroup, PropertyValues } from "lit";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+
+//#region src/components/radio-item/radio-item.d.ts
+/**
+ * <sigvelo-radio-item>
+ *
+ * @summary Represents individual choices within a radio.
+ * @tag sigvelo-radio-item
+ * @documentation https://design-system.sigvelo.com/docs/components/radio-item
+ * @status stable
+ * @since 1.0
+ *
+ * @dependency sigvelo-icon
+ *
+ * @slot - The radio item's label. For plain-text labels, you can use the `label` attribute instead.
+ *
+ * @event sigvelo-blur - Emitted when the radio item loses focus. This event does not bubble.
+ * @event sigvelo-focus - Emitted when the radio item receives focus. This event does not bubble.
+ *
+ * @csspart label - The `<label>` that wraps the entire control.
+ * @csspart visual-box - The element that wraps the internal radio.
+ * @csspart radio-icon - The radio icon, a `<sigvelo-icon>` element.
+ * @csspart radio-icon__svg - The radio icon's `svg` part.
+ *
+ * @cssstate checked - Applied when the radio item is checked.
+ * @cssstate disabled - Applied when the radio item is disabled.
+ * @cssstate focused - Applied when the radio item has focus.
+ *
+ * @example Default
+ * This component must only be used within a radio. You can see some examples of radio items being used in the radio documentation.
+ */
+declare class SigveloRadioItem extends SigveloElement {
+  static styles: CSSResultGroup;
+  /** @internal Indicates if the radio item is disabled by the controller. */
+  disabledByController: boolean;
+  /**
+   * The radio item's label. If you need to provide HTML in the label, use the `label` slot instead.
+   */
+  label: string;
+  /**
+   * The radio item's description. If you need to provide HTML in the description, use the `description` slot instead.
+   */
+  description: string;
+  /** The radio item's value. */
+  value: string;
+  /** The radio item's checked state. */
+  checked: boolean;
+  /** Disables the radio item. */
+  disabled: boolean;
+  /** The type of radio item to render. */
+  variant: "normal" | "filled";
+  /** The radio item's size. */
+  size: "xs" | "sm" | "md" | "lg" | "xl";
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  firstUpdated(): void;
+  updated(changedProperties: PropertyValues<this>): void;
+  private handleBlur;
+  private handleFocus;
+  render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "sigvelo-radio-item": SigveloRadioItem;
+  }
+}
+//#endregion
+export { SigveloRadioItem as t };