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

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

@@ -0,0 +1,12 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    box-sizing: border-box !important;
+  }
+
+  :host *,
+  :host *::before,
+  :host *::after {
+    box-sizing: inherit !important;
+  }
+`;

package/dist/packages/radio/index.d.ts

@@ -0,0 +1,2 @@
+export { WRadio } from './radio';
+export { WRadioGroup } from './radio-group';

package/dist/packages/radio/index.js

@@ -0,0 +1,2 @@
+export { WRadio } from './radio';
+export { WRadioGroup } from './radio-group';

package/dist/packages/radio/invalid.d.ts

@@ -0,0 +1,8 @@
+export declare class WInvalidEvent extends Event {
+    constructor();
+}
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'wa-invalid': WInvalidEvent;
+    }
+}

package/dist/packages/radio/invalid.js

@@ -0,0 +1,5 @@
+export class WInvalidEvent extends Event {
+    constructor() {
+        super('w-invalid', { bubbles: true, cancelable: false, composed: true });
+    }
+}

package/dist/packages/radio/math.d.ts

@@ -0,0 +1 @@
+export declare function uniqueId(prefix?: string): string;

package/dist/packages/radio/math.js

@@ -0,0 +1,4 @@
+import { nanoid } from 'nanoid';
+export function uniqueId(prefix = '') {
+    return `${prefix}${nanoid()}`;
+}

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

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

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

@@ -0,0 +1,59 @@
+import{css as o}from"lit";var r=o`
+  :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;
+    }
+  }
+`;export{r as styles};
+//# sourceMappingURL=radio-group-styles.js.map

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

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

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

@@ -0,0 +1,72 @@
+import type { PropertyValues } from 'lit';
+import { BaseFormAssociatedElement } from './form-associated-element';
+import './radio';
+import type { WRadio } from './radio';
+/**
+ * @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("./form-associated-element").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;
+    }
+}