@kodaris/krubble-components 1.0.61 → 1.0.63

package/dist/form/checkbox/checkbox.d.ts

@@ -0,0 +1,71 @@
+import { LitElement } from 'lit';
+/**
+ * A checkbox component that works with native browser forms.
+ *
+ * Uses ElementInternals for form association, allowing the component
+ * to participate in form submission, validation, and reset.
+ *
+ * @element kr-checkbox
+ * @fires change - Fired when the checked state changes
+ */
+export declare class KRCheckbox extends LitElement {
+    static styles: import("lit").CSSResult[];
+    static formAssociated: boolean;
+    private _internals;
+    /**
+     * The checkbox label text
+     */
+    label: string;
+    /**
+     * The input name for form submission
+     */
+    name: string;
+    /**
+     * The value submitted when checked
+     */
+    value: string;
+    /**
+     * Whether the checkbox is checked
+     */
+    checked: boolean;
+    /**
+     * Whether the checkbox is disabled
+     */
+    disabled: boolean;
+    /**
+     * Whether the checkbox is required
+     */
+    required: boolean;
+    /**
+     * Helper text shown below the checkbox
+     */
+    hint: string;
+    private _touched;
+    constructor();
+    get form(): HTMLFormElement | null;
+    get validity(): ValidityState;
+    get validationMessage(): string;
+    get willValidate(): boolean;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _handleInvalid;
+    protected firstUpdated(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    private _syncFormValue;
+    private _updateValidity;
+    private _handleClick;
+    private _handleKeyDown;
+    render(): import("lit-html").TemplateResult<1>;
+    focus(): void;
+    blur(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kr-checkbox': KRCheckbox;
+    }
+}
+//# sourceMappingURL=checkbox.d.ts.map

package/dist/form/checkbox/checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/form/checkbox/checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAKrD;;;;;;;;GAQG;AACH,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,4BAmFnB;IAEH,MAAM,CAAC,cAAc,UAAQ;IAE7B,OAAO,CAAC,UAAU,CAAmB;IAErC;;OAEG;IAEH,KAAK,SAAM;IAEX;;OAEG;IAEH,IAAI,SAAM;IAEV;;OAEG;IAEH,KAAK,SAAQ;IAEb;;OAEG;IAEH,OAAO,UAAS;IAEhB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,IAAI,SAAM;IAGV,OAAO,CAAC,QAAQ,CAAS;;IAQzB,IAAI,IAAI,2BAEP;IAED,IAAI,QAAQ,kBAEX;IAED,IAAI,iBAAiB,WAEpB;IAED,IAAI,YAAY,YAEf;IAED,aAAa;IAIb,cAAc;IAId,iBAAiB;IAOjB,wBAAwB,CAAC,KAAK,EAAE,MAAM;IAI7B,iBAAiB;IAKjB,oBAAoB;IAK7B,OAAO,CAAC,cAAc,CAGpB;cAEiB,YAAY;IAKtB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IASxD,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,eAAe;IAWvB,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,cAAc;IAUb,MAAM;IA8Cf,KAAK;IAIL,IAAI;CAGL;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/dist/form/checkbox/checkbox.js

@@ -0,0 +1,304 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { krBaseCSS } from '../../style/base.js';
+/**
+ * A checkbox component that works with native browser forms.
+ *
+ * Uses ElementInternals for form association, allowing the component
+ * to participate in form submission, validation, and reset.
+ *
+ * @element kr-checkbox
+ * @fires change - Fired when the checked state changes
+ */
+let KRCheckbox = class KRCheckbox extends LitElement {
+    constructor() {
+        super();
+        /**
+         * The checkbox label text
+         */
+        this.label = '';
+        /**
+         * The input name for form submission
+         */
+        this.name = '';
+        /**
+         * The value submitted when checked
+         */
+        this.value = 'on';
+        /**
+         * Whether the checkbox is checked
+         */
+        this.checked = false;
+        /**
+         * Whether the checkbox is disabled
+         */
+        this.disabled = false;
+        /**
+         * Whether the checkbox is required
+         */
+        this.required = false;
+        /**
+         * Helper text shown below the checkbox
+         */
+        this.hint = '';
+        this._touched = false;
+        this._handleInvalid = (e) => {
+            e.preventDefault();
+            this._touched = true;
+        };
+        this._internals = this.attachInternals();
+    }
+    // Form-associated custom element callbacks
+    get form() {
+        return this._internals.form;
+    }
+    get validity() {
+        return this._internals.validity;
+    }
+    get validationMessage() {
+        return this._internals.validationMessage;
+    }
+    get willValidate() {
+        return this._internals.willValidate;
+    }
+    checkValidity() {
+        return this._internals.checkValidity();
+    }
+    reportValidity() {
+        return this._internals.reportValidity();
+    }
+    formResetCallback() {
+        this.checked = false;
+        this._touched = false;
+        this._internals.setFormValue('');
+        this._internals.setValidity({});
+    }
+    formStateRestoreCallback(state) {
+        this.checked = state === this.value;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('invalid', this._handleInvalid);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('invalid', this._handleInvalid);
+    }
+    firstUpdated() {
+        this._syncFormValue();
+        this._updateValidity();
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('checked') || changedProperties.has('value')) {
+            this._syncFormValue();
+        }
+        if (changedProperties.has('required') || changedProperties.has('checked')) {
+            this._updateValidity();
+        }
+    }
+    _syncFormValue() {
+        if (this.checked) {
+            this._internals.setFormValue(this.value);
+        }
+        else {
+            this._internals.setFormValue('');
+        }
+    }
+    _updateValidity() {
+        if (this.required && !this.checked) {
+            this._internals.setValidity({ valueMissing: true }, 'This field is required');
+        }
+        else {
+            this._internals.setValidity({});
+        }
+    }
+    _handleClick(e) {
+        if (this.disabled) {
+            return;
+        }
+        this.checked = !this.checked;
+        this._touched = true;
+        this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+    }
+    _handleKeyDown(e) {
+        if (this.disabled) {
+            return;
+        }
+        if (e.key === ' ' || e.key === 'Enter') {
+            e.preventDefault();
+            this._handleClick(e);
+        }
+    }
+    render() {
+        return html `
+      <div class="wrapper">
+        <div
+          class=${classMap({
+            'checkbox': true,
+            'checkbox--disabled': this.disabled,
+        })}
+          role="checkbox"
+          aria-checked=${this.checked}
+          aria-disabled=${this.disabled}
+          aria-label=${this.label}
+          tabindex=${this.disabled ? -1 : 0}
+          @click=${this._handleClick}
+          @keydown=${this._handleKeyDown}
+        >
+          <div class=${classMap({
+            'checkbox__box': true,
+            'checkbox__box--checked': this.checked,
+            'checkbox__box--invalid': this._touched && this.required && !this.checked,
+        })}>
+            <svg class=${classMap({
+            'checkbox__check': true,
+            'checkbox__check--hidden': !this.checked,
+        })} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+              <polyline points="20 6 9 17 4 12"></polyline>
+            </svg>
+          </div>
+          ${this.label
+            ? html `
+                <span class="checkbox__label">
+                  ${this.label}
+                  ${this.required ? html `<span class="required" aria-hidden="true">*</span>` : nothing}
+                </span>
+              `
+            : nothing}
+        </div>
+        ${this._touched && this.required && !this.checked
+            ? html `<div class="validation-message">This field is required</div>`
+            : this.hint
+                ? html `<div class="hint">${this.hint}</div>`
+                : nothing}
+      </div>
+    `;
+    }
+    focus() {
+        this.shadowRoot?.querySelector('.checkbox')?.focus();
+    }
+    blur() {
+        this.shadowRoot?.querySelector('.checkbox')?.blur();
+    }
+};
+KRCheckbox.styles = [krBaseCSS, css `
+    :host {
+      display: inline-block;
+      font-family: inherit;
+    }
+
+    .wrapper {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+
+    .checkbox {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      cursor: pointer;
+    }
+
+    .checkbox--disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .checkbox__box {
+      flex-shrink: 0;
+      width: 18px;
+      height: 18px;
+      border: 2px solid var(--kr-checkbox-border-color, #0000003d);
+      border-radius: 4px;
+      background-color: var(--kr-checkbox-bg, #fff);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
+    }
+
+    .checkbox:focus-visible .checkbox__box {
+      outline: none;
+      box-shadow: 0 0 0 3px rgba(22, 48, 82, 0.1);
+    }
+
+    .checkbox__box--checked {
+      border-color: var(--kr-checkbox-checked-border-color, var(--kr-primary));
+      background-color: var(--kr-checkbox-checked-bg, var(--kr-primary));
+    }
+
+    .checkbox__box--invalid {
+      border-color: var(--kr-checkbox-error-border-color, #ef4444);
+    }
+
+    .checkbox__check {
+      width: 12px;
+      height: 12px;
+      color: var(--kr-checkbox-check-color, #fff);
+    }
+
+    .checkbox__check--hidden {
+      visibility: hidden;
+    }
+
+    .checkbox__label {
+      font-size: 14px;
+      color: var(--kr-checkbox-label-color, #000);
+      user-select: none;
+    }
+
+    .required {
+      color: var(--kr-checkbox-required-color, #ef4444);
+      margin-left: 0.125rem;
+    }
+
+    .hint {
+      font-size: 0.75rem;
+      color: var(--kr-checkbox-helper-color, #6b7280);
+      margin-left: 26px;
+    }
+
+    .validation-message {
+      font-size: 0.75rem;
+      color: var(--kr-checkbox-error-color, #ef4444);
+      margin-left: 26px;
+    }
+  `];
+KRCheckbox.formAssociated = true;
+__decorate([
+    property({ type: String })
+], KRCheckbox.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], KRCheckbox.prototype, "name", void 0);
+__decorate([
+    property({ type: String })
+], KRCheckbox.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean })
+], KRCheckbox.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean })
+], KRCheckbox.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], KRCheckbox.prototype, "required", void 0);
+__decorate([
+    property({ type: String })
+], KRCheckbox.prototype, "hint", void 0);
+__decorate([
+    state()
+], KRCheckbox.prototype, "_touched", void 0);
+KRCheckbox = __decorate([
+    customElement('kr-checkbox')
+], KRCheckbox);
+export { KRCheckbox };
+//# sourceMappingURL=checkbox.js.map

package/dist/form/checkbox/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../src/form/checkbox/checkbox.ts"],"names":[],"mappings":"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"}

package/dist/form/index.d.ts

@@ -5,4 +5,6 @@ export { KRTextareaField } from './textarea-field/textarea-field.js';
 export { KRDetailField } from './detail-field/detail-field.js';
 export { KRAutoSuggest } from './auto-suggest/auto-suggest.js';
 export { KRComboBox } from './combo-box/combo-box.js';
+export { KRRadioCards } from './radio-cards/radio-cards.js';
+export { KRCheckbox } from './checkbox/checkbox.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/form/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/form/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/form/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/form/index.js

@@ -6,4 +6,6 @@ export { KRTextareaField } from './textarea-field/textarea-field.js';
 export { KRDetailField } from './detail-field/detail-field.js';
 export { KRAutoSuggest } from './auto-suggest/auto-suggest.js';
 export { KRComboBox } from './combo-box/combo-box.js';
+export { KRRadioCards } from './radio-cards/radio-cards.js';
+export { KRCheckbox } from './checkbox/checkbox.js';
 //# sourceMappingURL=index.js.map

package/dist/form/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/form/index.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAClB,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/form/index.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAClB,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC/D,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/form/radio-cards/radio-cards.d.ts

@@ -0,0 +1,81 @@
+import { LitElement } from 'lit';
+export interface KRRadioCardsOption {
+    value: string;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+}
+/**
+ * A card-style radio group for selecting between a small number of options.
+ * Each option renders as a bordered card with a radio indicator, label, and optional description.
+ *
+ * Uses ElementInternals for form association, allowing the component
+ * to participate in form submission, validation, and reset.
+ *
+ * @element kr-radio-cards
+ * @fires change - Fired when the selected value changes
+ */
+export declare class KRRadioCards extends LitElement {
+    static styles: import("lit").CSSResult[];
+    static formAssociated: boolean;
+    private _internals;
+    private _focusedIndex;
+    /**
+     * The label text above the cards
+     */
+    label: string;
+    /**
+     * The input name for form submission
+     */
+    name: string;
+    /**
+     * The currently selected value
+     */
+    value: string;
+    /**
+     * The card options to display
+     */
+    options: KRRadioCardsOption[];
+    /**
+     * Whether the field is disabled
+     */
+    disabled: boolean;
+    /**
+     * Whether the field is required
+     */
+    required: boolean;
+    /**
+     * Helper text shown below the cards
+     */
+    hint: string;
+    /**
+     * Layout direction: 'row' or 'column'
+     */
+    direction: 'row' | 'column';
+    private _touched;
+    constructor();
+    get form(): HTMLFormElement | null;
+    get validity(): ValidityState;
+    get validationMessage(): string;
+    get willValidate(): boolean;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _handleInvalid;
+    protected firstUpdated(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    private _updateValidity;
+    private _handleCardClick;
+    private _handleKeyDown;
+    private _findNextEnabledIndex;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kr-radio-cards': KRRadioCards;
+    }
+}
+//# sourceMappingURL=radio-cards.d.ts.map

package/dist/form/radio-cards/radio-cards.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-cards.d.ts","sourceRoot":"","sources":["../../../src/form/radio-cards/radio-cards.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAKrD,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;GASG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,4BA2HnB;IAEH,MAAM,CAAC,cAAc,UAAQ;IAE7B,OAAO,CAAC,UAAU,CAAmB;IAErC,OAAO,CAAC,aAAa,CAAM;IAE3B;;OAEG;IAEH,KAAK,SAAM;IAEX;;OAEG;IAEH,IAAI,SAAM;IAEV;;OAEG;IAEH,KAAK,SAAM;IAEX;;OAEG;IAEH,OAAO,EAAE,kBAAkB,EAAE,CAAM;IAEnC;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,IAAI,SAAM;IAEV;;OAEG;IAEH,SAAS,EAAE,KAAK,GAAG,QAAQ,CAAS;IAGpC,OAAO,CAAC,QAAQ,CAAS;;IAQzB,IAAI,IAAI,2BAEP;IAED,IAAI,QAAQ,kBAEX;IAED,IAAI,iBAAiB,WAEpB;IAED,IAAI,YAAY,YAEf;IAED,aAAa;IAIb,cAAc;IAId,iBAAiB;IAOjB,wBAAwB,CAAC,KAAK,EAAE,MAAM;IAI7B,iBAAiB;IAKjB,oBAAoB;IAK7B,OAAO,CAAC,cAAc,CAGpB;cAEiB,YAAY;IAItB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAMxD,OAAO,CAAC,eAAe;IAWvB,OAAO,CAAC,gBAAgB;IAWxB,OAAO,CAAC,cAAc;IAuCtB,OAAO,CAAC,qBAAqB;IAWpB,MAAM;CA2DhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}