@warp-ds/elements 2.3.2 → 2.4.0-next.10

package/dist/packages/radio-group/radio-group-styles.js

@@ -0,0 +1,59 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+  }
+
+  .form-control {
+    position: relative;
+    border: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  .label {
+    font-size: var(--w-font-size-s);
+    line-height: var(--w-line-height-s);
+    font-weight: 700;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-smoothing: grayscale;
+    cursor: pointer;
+    padding-bottom: 0.4rem;
+    color: var(--w-s-color-text);
+    display: block;
+  }
+
+  .radio-group-required .label::after {
+    content: var(--wa-form-control-required-content);
+    margin-inline-start: var(--wa-form-control-required-content-offset);
+  }
+
+  .button-group {
+    display: flex;
+  }
+
+  [part~='form-control-input'] {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+  }
+
+  /* Horizontal */
+  :host([orientation='horizontal']) [part~='form-control-input'] {
+    flex-direction: row;
+    gap: 1em;
+  }
+
+  /* Help text */
+  [part~='hint'] {
+    margin-block-start: 0.5em;
+  }
+
+  /* Radios have the "button" appearance */
+  :host fieldset.has-radio-buttons {
+    [part~='form-control-input'] {
+      gap: 0;
+    }
+  }
+`;

package/dist/packages/radio-group/radio-group.d.ts

@@ -0,0 +1,72 @@
+import type { PropertyValues } from 'lit';
+import { BaseFormAssociatedElement } from '../radio/form-associated-element.js';
+import '../radio/radio.js';
+import type { WRadio } from '../radio/radio.js';
+/**
+ * @slot label - Alternative to the `label` attribute should you need custom HTML.
+ */
+export declare class WRadioGroup extends BaseFormAssociatedElement {
+    static css: import("lit").CSSResult[];
+    static get validators(): import("../radio/form-associated-element.js").Validator<BaseFormAssociatedElement>[];
+    private readonly hasSlotController;
+    hasRadioButtons: boolean;
+    defaultSlot: HTMLSlotElement;
+    /**
+     * The radio group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot
+     * instead.
+     */
+    label: string;
+    /** The radio groups's hint. If you need to display HTML, use the `hint` slot instead. */
+    hint: string;
+    /** The name of the radio group, submitted as a name/value pair with form data. */
+    name: string | null;
+    /** Disables the radio group and all child radios. */
+    disabled: boolean;
+    /** The orientation in which to show radio items. */
+    orientation: 'horizontal' | 'vertical';
+    private _value;
+    get value(): string | number | null;
+    /** The current value of the radio group, submitted as a name/value pair with form data. */
+    set value(val: string | number | null);
+    /** The default value of the form control. Primarily used for resetting the form control. */
+    defaultValue: string | null;
+    /** The radio group's size. This size will be applied to all child radios and radio buttons, except when explicitly overridden. */
+    size: 'small' | 'medium' | 'large';
+    /** Ensures a child radio is checked before allowing the containing form to submit. */
+    required: boolean;
+    /**
+     * Used for SSR. if true, will show slotted label on initial render.
+     */
+    withLabel: boolean;
+    /**
+     * Used for SSR. if true, will show slotted hint on initial render.
+     */
+    withHint: boolean;
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
+    constructor();
+    /**
+     * We use the first available radio as the validationTarget similar to native HTML that shows the validation popup on
+     * the first radio element.
+     */
+    get validationTarget(): WRadio;
+    updated(changedProperties: PropertyValues<this>): void;
+    formResetCallback(...args: Parameters<BaseFormAssociatedElement['formResetCallback']>): void;
+    private handleRadioClick;
+    private getAllRadios;
+    private handleLabelClick;
+    private syncRadioElements;
+    private handleKeyDown;
+    /** Sets focus on the radio group. */
+    focus(options?: FocusOptions): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'w-radio-group': WRadioGroup;
+    }
+}