@jsekulowicz/ds-components 0.1.0

package/dist/atoms/button/button.js

@@ -0,0 +1,127 @@
+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 { html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { DsElement } from '@jsekulowicz/ds-core';
+import { buttonStyles } from './button.styles.js';
+/**
+ * @tag ds-button
+ * @summary Primary action trigger with variants and sizes.
+ * @slot default - The button label.
+ * @slot leading - Icon or adornment rendered before the label.
+ * @slot trailing - Icon or adornment rendered after the label.
+ * @csspart button - The internal `<button>` element.
+ * @event ds-click - Emitted when the button is activated.
+ */
+export class DsButton extends DsElement {
+    constructor() {
+        super(...arguments);
+        this.variant = 'primary';
+        this.size = 'md';
+        this.type = 'button';
+        this.disabled = false;
+        this.loading = false;
+        this.fullWidth = false;
+        this.#handleClick = (event) => {
+            if (this.disabled || this.loading) {
+                event.preventDefault();
+                event.stopImmediatePropagation();
+                return;
+            }
+            if (this.type === 'submit' || this.type === 'reset') {
+                this.#submitHostForm();
+            }
+            this.emit('ds-click', { detail: { originalEvent: event } });
+        };
+    }
+    static { this.styles = [...DsElement.styles, buttonStyles]; }
+    #handleClick;
+    #submitHostForm() {
+        const form = this.closest('form') ?? this.#findShadowForm();
+        if (!form) {
+            return;
+        }
+        if (this.type === 'submit') {
+            form.requestSubmit();
+        }
+        else {
+            form.reset();
+        }
+    }
+    #findShadowForm() {
+        const host = this.closest('ds-form');
+        return host?.shadowRoot?.querySelector('form') ?? null;
+    }
+    render() {
+        return html `
+      <button
+        part="button"
+        class="btn ds-focus-ring"
+        type=${this.type}
+        aria-disabled=${this.disabled || this.loading ? 'true' : 'false'}
+        aria-busy=${this.loading ? 'true' : 'false'}
+        aria-controls=${this.ariaControlsAttr ?? nothing}
+        aria-expanded=${this.ariaExpandedAttr ?? nothing}
+        aria-haspopup=${this.ariaHasPopupAttr ?? nothing}
+        aria-invalid=${this.ariaInvalidAttr ?? nothing}
+        aria-label=${this.label ?? nothing}
+        @click=${this.#handleClick}
+      >
+        ${this.loading
+            ? html `<svg class="spinner" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+              <circle
+                cx="12"
+                cy="12"
+                r="9"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-dasharray="56.55"
+                stroke-dashoffset="14.14"
+              />
+            </svg>`
+            : html `<slot name="leading"></slot>`}
+        <slot></slot>
+        <slot name="trailing"></slot>
+      </button>
+    `;
+    }
+}
+__decorate([
+    property({ reflect: true })
+], DsButton.prototype, "variant", void 0);
+__decorate([
+    property({ reflect: true })
+], DsButton.prototype, "size", void 0);
+__decorate([
+    property({ reflect: true })
+], DsButton.prototype, "type", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DsButton.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DsButton.prototype, "loading", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'full-width' })
+], DsButton.prototype, "fullWidth", void 0);
+__decorate([
+    property()
+], DsButton.prototype, "label", void 0);
+__decorate([
+    property({ attribute: 'aria-controls' })
+], DsButton.prototype, "ariaControlsAttr", void 0);
+__decorate([
+    property({ attribute: 'aria-expanded' })
+], DsButton.prototype, "ariaExpandedAttr", void 0);
+__decorate([
+    property({ attribute: 'aria-haspopup' })
+], DsButton.prototype, "ariaHasPopupAttr", void 0);
+__decorate([
+    property({ attribute: 'aria-invalid' })
+], DsButton.prototype, "ariaInvalidAttr", void 0);
+//# sourceMappingURL=button.js.map

package/dist/atoms/button/button.js.map

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

package/dist/atoms/button/button.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const buttonStyles: import("lit").CSSResult;
+//# sourceMappingURL=button.styles.d.ts.map

package/dist/atoms/button/button.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/button/button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,yBAsGxB,CAAC"}

package/dist/atoms/button/button.styles.js

@@ -0,0 +1,105 @@
+import { css } from 'lit';
+export const buttonStyles = css `
+  :host {
+    display: inline-flex;
+    vertical-align: middle;
+  }
+  .btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--ds-space-1);
+    padding: 0 var(--ds-space-5);
+    height: var(--ds-size-md);
+    min-width: var(--ds-size-md);
+    border-radius: var(--ds-radius-sm);
+    border: 1px solid transparent;
+    font-family: var(--ds-font-body);
+    font-size: var(--ds-font-size-sm);
+    font-weight: var(--ds-font-weight-medium);
+    letter-spacing: var(--ds-letter-spacing-normal);
+    line-height: 1;
+    cursor: pointer;
+    background: transparent;
+    color: var(--ds-color-fg);
+    transition:
+      background var(--ds-duration-fast) var(--ds-easing-standard),
+      color var(--ds-duration-fast) var(--ds-easing-standard),
+      border-color var(--ds-duration-fast) var(--ds-easing-standard),
+      transform var(--ds-duration-fast) var(--ds-easing-standard);
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+  }
+  .btn:focus-visible {
+    outline: 2px solid transparent;
+    box-shadow: var(--ds-shadow-focus);
+  }
+  .btn:active:not([aria-disabled='true']) {
+    transform: translateY(1px);
+  }
+  :host([disabled]) .btn {
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
+  :host([loading]) .btn {
+    cursor: wait;
+  }
+  .spinner {
+    width: 1.25rem;
+    height: 1.25rem;
+    flex-shrink: 0;
+    animation: ds-btn-spin 0.75s linear infinite;
+  }
+  @keyframes ds-btn-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  :host([variant='primary']) .btn {
+    background: var(--ds-color-accent);
+    color: var(--ds-color-accent-fg);
+  }
+  :host([variant='primary']) .btn:hover:not([aria-disabled='true']) {
+    background: var(--ds-color-accent-hover);
+  }
+  :host([variant='primary']) .btn:active:not([aria-disabled='true']) {
+    background: var(--ds-color-accent-active);
+  }
+  :host([variant='secondary']) .btn {
+    background: transparent;
+    color: var(--ds-color-fg);
+    border-color: var(--ds-color-border-strong);
+  }
+  :host([variant='secondary']) .btn:hover:not([aria-disabled='true']) {
+    background: var(--ds-color-bg-subtle);
+  }
+  :host([variant='ghost']) .btn {
+    background: transparent;
+    color: var(--ds-color-fg);
+  }
+  :host([variant='ghost']) .btn:hover:not([aria-disabled='true']) {
+    background: var(--ds-color-bg-subtle);
+  }
+  :host([variant='danger']) .btn {
+    background: var(--ds-color-danger);
+    color: var(--ds-color-accent-fg);
+  }
+  :host([size='sm']) .btn {
+    height: var(--ds-size-sm);
+    padding: 0 var(--ds-space-4);
+    font-size: var(--ds-font-size-xs);
+  }
+  :host([size='lg']) .btn {
+    height: var(--ds-size-lg);
+    padding: 0 var(--ds-space-6);
+    font-size: var(--ds-font-size-md);
+  }
+  :host([full-width]) {
+    display: flex;
+    width: 100%;
+  }
+  :host([full-width]) .btn {
+    width: 100%;
+  }
+`;
+//# sourceMappingURL=button.styles.js.map

package/dist/atoms/button/button.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.styles.js","sourceRoot":"","sources":["../../../src/atoms/button/button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsG9B,CAAC"}

package/dist/atoms/button/define.d.ts

@@ -0,0 +1,7 @@
+import { DsButton } from './button.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'ds-button': DsButton;
+    }
+}
+//# sourceMappingURL=define.d.ts.map

package/dist/atoms/button/define.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.d.ts","sourceRoot":"","sources":["../../../src/atoms/button/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAMvC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/atoms/button/define.js

@@ -0,0 +1,5 @@
+import { DsButton } from './button.js';
+if (!customElements.get('ds-button')) {
+    customElements.define('ds-button', DsButton);
+}
+//# sourceMappingURL=define.js.map

package/dist/atoms/button/define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/atoms/button/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC;IACrC,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;AAC/C,CAAC"}

package/dist/atoms/button/index.d.ts

@@ -0,0 +1,2 @@
+export { DsButton, type ButtonVariant, type ButtonSize, type ButtonType } from './button.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/atoms/button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atoms/button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,KAAK,UAAU,EAAE,KAAK,UAAU,EAAE,MAAM,aAAa,CAAC"}

package/dist/atoms/button/index.js

@@ -0,0 +1,2 @@
+export { DsButton } from './button.js';
+//# sourceMappingURL=index.js.map

package/dist/atoms/button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/atoms/button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAwD,MAAM,aAAa,CAAC"}

package/dist/atoms/checkbox/checkbox.d.ts

@@ -0,0 +1,21 @@
+import { type PropertyValues, type TemplateResult } from 'lit';
+import { DsElement } from '@jsekulowicz/ds-core';
+declare const DsCheckbox_base: typeof DsElement & (new (...args: any[]) => import("@jsekulowicz/ds-core").FormControlHost & DsElement);
+/**
+ * @tag ds-checkbox
+ * @summary Binary (or indeterminate) input that participates in native forms.
+ * @slot default - The visible label.
+ * @event ds-change - Fires when the checked state changes.
+ */
+export declare class DsCheckbox extends DsCheckbox_base {
+    #private;
+    static styles: import("lit").CSSResult[];
+    checked: boolean;
+    indeterminate: boolean;
+    invalid: boolean;
+    checkboxValue: string;
+    willUpdate(changed: PropertyValues): void;
+    render(): TemplateResult;
+}
+export {};
+//# sourceMappingURL=checkbox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/atoms/checkbox/checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE1E,OAAO,EAAE,SAAS,EAAoB,MAAM,sBAAsB,CAAC;;AAGnE;;;;;GAKG;AACH,qBAAa,UAAW,SAAQ,eAA2B;;IACzD,OAAgB,MAAM,4BAAyC;IAEnB,OAAO,UAAS;IAChB,aAAa,UAAS;IACtB,OAAO,UAAS;IAChD,aAAa,SAAM;IAEtB,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IA6BzC,MAAM,IAAI,cAAc;CAuBlC"}

package/dist/atoms/checkbox/checkbox.js

@@ -0,0 +1,89 @@
+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 { html, svg } from 'lit';
+import { property } from 'lit/decorators.js';
+import { DsElement, FormControlMixin } from '@jsekulowicz/ds-core';
+import { checkboxStyles } from './checkbox.styles.js';
+/**
+ * @tag ds-checkbox
+ * @summary Binary (or indeterminate) input that participates in native forms.
+ * @slot default - The visible label.
+ * @event ds-change - Fires when the checked state changes.
+ */
+export class DsCheckbox extends FormControlMixin(DsElement) {
+    constructor() {
+        super(...arguments);
+        this.checked = false;
+        this.indeterminate = false;
+        this.invalid = false;
+        this.checkboxValue = '';
+        this.#onInput = (event) => {
+            const target = event.target;
+            this.checked = target.checked;
+            this.indeterminate = false;
+            this.emit('ds-change', { detail: { checked: this.checked } });
+        };
+        this.#onKey = (event) => {
+            if (event.key === ' ' || event.key === 'Enter') {
+                event.preventDefault();
+                this.checked = !this.checked;
+                this.emit('ds-change', { detail: { checked: this.checked } });
+            }
+        };
+    }
+    static { this.styles = [...DsElement.styles, checkboxStyles]; }
+    willUpdate(changed) {
+        if (changed.has('checked') || changed.has('indeterminate') || changed.has('checkboxValue')) {
+            this.value = this.checked ? (this.checkboxValue || 'on') : null;
+            this.#syncValidity();
+        }
+    }
+    #syncValidity() {
+        const flags = this.required && !this.checked ? { valueMissing: true } : {};
+        const message = this.required && !this.checked ? 'Please check this box.' : '';
+        this.setValidity(flags, message);
+        this.invalid = !!flags.valueMissing;
+    }
+    #onInput;
+    #onKey;
+    render() {
+        return html `<label @keydown=${this.#onKey}>
+      <input
+        type="checkbox"
+        name=${this.name || ''}
+        .checked=${this.checked}
+        .indeterminate=${this.indeterminate}
+        ?required=${this.required}
+        ?disabled=${this.disabled}
+        aria-invalid=${this.invalid ? 'true' : 'false'}
+        @change=${this.#onInput}
+      />
+      <span class="box" part="box" aria-hidden="true">
+        <!-- Heroicons 2.2.0 — 16/solid: minus (indeterminate), check (checked) -->
+        <svg class="check" viewBox="0 0 16 16" fill="currentColor">
+          ${this.indeterminate
+            ? svg `<path d="M3.75 7.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z" />`
+            : svg `<path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd" />`}
+        </svg>
+      </span>
+      <span part="label"><slot></slot></span>
+    </label>`;
+    }
+}
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DsCheckbox.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DsCheckbox.prototype, "indeterminate", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DsCheckbox.prototype, "invalid", void 0);
+__decorate([
+    property()
+], DsCheckbox.prototype, "checkboxValue", void 0);
+//# sourceMappingURL=checkbox.js.map

package/dist/atoms/checkbox/checkbox.js.map

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

package/dist/atoms/checkbox/checkbox.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const checkboxStyles: import("lit").CSSResult;
+//# sourceMappingURL=checkbox.styles.d.ts.map

package/dist/atoms/checkbox/checkbox.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/checkbox/checkbox.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,yBAkE1B,CAAC"}

package/dist/atoms/checkbox/checkbox.styles.js

@@ -0,0 +1,69 @@
+import { css } from 'lit';
+export const checkboxStyles = css `
+  :host {
+    display: inline-flex;
+    cursor: pointer;
+    font-family: var(--ds-font-body);
+    font-size: var(--ds-font-size-sm);
+    color: var(--ds-color-fg);
+  }
+  :host([disabled]) {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+  label {
+    cursor: inherit;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ds-space-2);
+  }
+  .box {
+    width: 1rem;
+    height: 1rem;
+    border: 1.5px solid var(--ds-color-border-strong);
+    border-radius: var(--ds-radius-xs);
+    background: var(--ds-color-bg);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    transition: background var(--ds-duration-fast) var(--ds-easing-standard),
+      border-color var(--ds-duration-fast) var(--ds-easing-standard);
+  }
+  :host(:focus-within) .box {
+    box-shadow: var(--ds-shadow-focus);
+  }
+  :host([checked]) .box,
+  :host([indeterminate]) .box {
+    background: var(--ds-color-accent);
+    border-color: var(--ds-color-accent);
+  }
+  :host([invalid]) .box {
+    border-color: var(--ds-color-danger);
+  }
+  .check {
+    width: 0.7rem;
+    height: 0.7rem;
+    color: var(--ds-color-bg);
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity var(--ds-duration-fast) var(--ds-easing-standard);
+  }
+  :host([checked]) .check,
+  :host([indeterminate]) .check {
+    visibility: visible;
+    opacity: 1;
+  }
+  input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+`;
+//# sourceMappingURL=checkbox.styles.js.map

package/dist/atoms/checkbox/checkbox.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.styles.js","sourceRoot":"","sources":["../../../src/atoms/checkbox/checkbox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkEhC,CAAC"}

package/dist/atoms/checkbox/define.d.ts

@@ -0,0 +1,7 @@
+import { DsCheckbox } from './checkbox.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'ds-checkbox': DsCheckbox;
+    }
+}
+//# sourceMappingURL=define.d.ts.map

package/dist/atoms/checkbox/define.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.d.ts","sourceRoot":"","sources":["../../../src/atoms/checkbox/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAM3C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/dist/atoms/checkbox/define.js

@@ -0,0 +1,5 @@
+import { DsCheckbox } from './checkbox.js';
+if (!customElements.get('ds-checkbox')) {
+    customElements.define('ds-checkbox', DsCheckbox);
+}
+//# sourceMappingURL=define.js.map

package/dist/atoms/checkbox/define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/atoms/checkbox/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,aAAa,CAAC,EAAE,CAAC;IACvC,cAAc,CAAC,MAAM,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC;AACnD,CAAC"}

package/dist/atoms/checkbox/index.d.ts

@@ -0,0 +1,2 @@
+export { DsCheckbox } from './checkbox.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/atoms/checkbox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atoms/checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC"}

package/dist/atoms/checkbox/index.js

@@ -0,0 +1,2 @@
+export { DsCheckbox } from './checkbox.js';
+//# sourceMappingURL=index.js.map

package/dist/atoms/checkbox/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/atoms/checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC"}

package/dist/atoms/checkbox-group/checkbox-group.d.ts

@@ -0,0 +1,26 @@
+import { type TemplateResult } from 'lit';
+import { DsElement } from '@jsekulowicz/ds-core';
+/**
+ * @tag ds-checkbox-group
+ * @summary Groups ds-checkbox elements with a shared label, name, and validation state.
+ * @slot default - One or more ds-checkbox elements.
+ * @event ds-change - Fires when any checkbox changes. Detail: `{ values: string[] }`.
+ */
+export declare class DsCheckboxGroup extends DsElement {
+    #private;
+    static styles: import("lit").CSSResult[];
+    label: string;
+    name: string;
+    description: string;
+    error: string;
+    value: string[];
+    required: boolean;
+    disabled: boolean;
+    invalid: boolean;
+    private _checkboxes;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    render(): TemplateResult;
+}
+//# sourceMappingURL=checkbox-group.d.ts.map

package/dist/atoms/checkbox-group/checkbox-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-group.d.ts","sourceRoot":"","sources":["../../../src/atoms/checkbox-group/checkbox-group.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEzD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAMjD;;;;;GAKG;AACH,qBAAa,eAAgB,SAAQ,SAAS;;IAC5C,OAAgB,MAAM,4BAA+D;IAEzE,KAAK,SAAM;IACX,IAAI,SAAM;IACV,WAAW,SAAM;IACjB,KAAK,SAAM;IACI,KAAK,EAAE,MAAM,EAAE,CAAM;IACJ,QAAQ,UAAS;IACjB,QAAQ,UAAS;IACjB,OAAO,UAAS;IAER,OAAO,CAAC,WAAW,CAAgB;IAE9E,iBAAiB,IAAI,IAAI;IAQzB,oBAAoB,IAAI,IAAI;IAK5B,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IA8C5C,MAAM,IAAI,cAAc;CAclC"}