@ds-autonomie/web-components 1.0.1

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

@@ -0,0 +1,85 @@
+import type { CSSResultGroup } from 'lit';
+import { FormControlController } from '../../internal/form';
+import { ShoelaceElement } from '../../internal/shoelace-element';
+import type { ShoelaceFormControl } from '../../internal/shoelace-element';
+import '../error-text/error-text';
+/**
+ * @summary Checkbox groups are used to group multiple [checkbox](/components/checkbox) or [checkbox buttons](/components/checkbox-button) so they function as a single form control.
+ * @documentation https://dsa.service-public-autonomie.fr/062dac5f6/p/262df4-checkbox-group
+ *
+ * @dependency dsa-error-text
+ *
+ * @slot - The default slot where `<dsa-checkbox>` or `<dsa-checkbox-button>` elements are placed.
+ * @slot label - The checkbox group's label. Required for proper accessibility. Alternatively, you can use the `label`
+ *  attribute.
+ * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
+ *
+ * @event dsa-change - Emitted when the checkbox group's selected value changes.
+ * @event dsa-input - Emitted when the checkbox group receives user input.
+ * @event dsa-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+ */
+export default class DSACheckboxGroup extends ShoelaceElement implements ShoelaceFormControl {
+    static styles: CSSResultGroup;
+    protected readonly formControlController: FormControlController;
+    private readonly hasSlotController;
+    private customValidityMessage;
+    private validationTimeout;
+    defaultSlot: HTMLSlotElement;
+    validationInput: HTMLInputElement;
+    private hasCheckboxButtons;
+    defaultValue: string[];
+    /**
+     * The checkbox group's label. Required for proper accessibility. If you need to display HTML, use the `label` slot
+     * instead.
+     */
+    label: string;
+    /** The checkbox groups's help text. If you need to display HTML, use the `help-text` slot instead. */
+    helpText: string;
+    /** The name of the checkbox group, submitted as a name/value pair with form data. */
+    name: string;
+    /** The current value of the checkbox group, submitted as a name/value pair with form data. The value is a comma-delimited list of values based on the checked checkboxes. */
+    value: string[];
+    /**
+     * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
+     * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
+     * the same document or shadow root for this to work.
+     */
+    form: string;
+    /** Ensures a child checkbox is checked before allowing the containing form to submit. */
+    required: boolean;
+    /** Sets the orientation of the checkbox options */
+    horizontal: boolean;
+    /** Indicates whether the group should be in error state */
+    error: boolean;
+    /** An error message that is shown when `error` is set to true */
+    errorMessage: string;
+    /** Gets the validity state object */
+    get validity(): ValidityState;
+    /** Gets the validation message */
+    get validationMessage(): string;
+    connectedCallback(): void;
+    firstUpdated(): void;
+    private getAllCheckboxes;
+    private handleCheckboxClick;
+    private handleKeyDown;
+    private handleLabelClick;
+    private handleSlotChange;
+    private handleInvalid;
+    private updateCheckedCheckbox;
+    handleValueChange(): void;
+    handleErrorChange(): void;
+    /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
+    checkValidity(): boolean;
+    /** Gets the associated form, if one exists. */
+    getForm(): HTMLFormElement | null;
+    /** Checks for validity and shows the browser's validation message if the control is invalid. */
+    reportValidity(): boolean;
+    /** Sets a custom validation message. Pass an empty string to restore validity. */
+    setCustomValidity(message?: string): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'dsa-checkbox-group': DSACheckboxGroup;
+    }
+}

package/dist/components/checkbox-group/checkbox-group.js

@@ -0,0 +1,16 @@
+import {
+  DSACheckboxGroup
+} from "../../chunks/chunk.5LT3B7MI.js";
+import "../../chunks/chunk.CPXD6UYZ.js";
+import "../../chunks/chunk.EYZGEU3G.js";
+import "../../chunks/chunk.YY6AEXJK.js";
+import "../../chunks/chunk.KIFBWPW5.js";
+import "../../chunks/chunk.YIY5RM53.js";
+import "../../chunks/chunk.3RBCYA4F.js";
+import "../../chunks/chunk.D7CATJYB.js";
+import "../../chunks/chunk.YCXTCVAZ.js";
+import "../../chunks/chunk.TUVJKY7S.js";
+import "../../chunks/chunk.6M63UXML.js";
+export {
+  DSACheckboxGroup as default
+};

package/dist/components/checkbox-group/checkbox-group.styles.d.ts

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

package/dist/components/checkbox-group/checkbox-group.styles.js

@@ -0,0 +1,9 @@
+import {
+  checkbox_group_styles_default
+} from "../../chunks/chunk.YY6AEXJK.js";
+import "../../chunks/chunk.3RBCYA4F.js";
+import "../../chunks/chunk.TUVJKY7S.js";
+import "../../chunks/chunk.6M63UXML.js";
+export {
+  checkbox_group_styles_default as default
+};

package/dist/components/dialog/dialog.d.ts

@@ -0,0 +1,70 @@
+import type { CSSResultGroup } from 'lit';
+import { ShoelaceElement } from '../../internal/shoelace-element';
+import '../icon-button/icon-button';
+/**
+ * @summary Dialogs, sometimes called "modals", appear above the page and require the user's immediate attention.
+ * @documentation https://dsa.service-public-autonomie.fr/062dac5f6/p/491e4e-dialog
+ *
+ * @dependency dsa-icon-button
+ *
+ * @slot - The dialog's main content.
+ * @slot label - The dialog's label. Alternatively, you can use the `label` attribute.
+ * @slot header-actions - Optional actions to add to the header. Works best with `<dsa-icon-button>`.
+ * @slot footer - The dialog's footer, usually one or more buttons representing various options.
+ *
+ * @event dsa-show - Emitted when the dialog opens.
+ * @event dsa-after-show - Emitted after the dialog opens and all animations are complete.
+ * @event dsa-hide - Emitted when the dialog closes.
+ * @event dsa-after-hide - Emitted after the dialog closes and all animations are complete.
+ * @event dsa-initial-focus - Emitted when the dialog opens and is ready to receive focus. Calling
+ *   `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.
+ * @event dsa-request-close {{ source: 'close-button' | 'keyboard' | 'overlay' }}  - Emitted when the user attempts to
+ *   close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling
+ *   `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in
+ *   destructive behavior such as data loss.
+ */
+export default class DSADialog extends ShoelaceElement {
+    static styles: CSSResultGroup;
+    private readonly hasSlotController;
+    private readonly localize;
+    private modal;
+    private originalTrigger;
+    dialog: HTMLElement;
+    panel: HTMLElement;
+    overlay: HTMLElement;
+    /**
+     * Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can
+     * use the `show()` and `hide()` methods and this attribute will reflect the dialog's open state.
+     */
+    open: boolean;
+    /**
+     * The dialog's label as displayed in the header. You should always include a relevant label even when using
+     * `no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.
+     */
+    label: string;
+    /**
+     * Disables the header. This will also remove the default close button, so please ensure you provide an easy,
+     * accessible way for users to dismiss the dialog.
+     */
+    noHeader: boolean;
+    /** The dialog's size. */
+    size: 'small' | 'medium' | 'large';
+    connectedCallback(): void;
+    firstUpdated(): void;
+    disconnectedCallback(): void;
+    private requestClose;
+    private addOpenListeners;
+    private removeOpenListeners;
+    private handleDocumentKeyDown;
+    handleOpenChange(): Promise<void>;
+    /** Shows the dialog. */
+    show(): Promise<void>;
+    /** Hides the dialog */
+    hide(): Promise<void>;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'dsa-dialog': DSADialog;
+    }
+}

package/dist/components/dialog/dialog.js

@@ -0,0 +1,28 @@
+import {
+  DSADialog
+} from "../../chunks/chunk.IRQOFNJE.js";
+import "../../chunks/chunk.ISAFRNR2.js";
+import "../../chunks/chunk.EMIT7S33.js";
+import "../../chunks/chunk.PQWQ42E2.js";
+import "../../chunks/chunk.YIY5RM53.js";
+import "../../chunks/chunk.XSCX6TC5.js";
+import "../../chunks/chunk.QFJA3MTV.js";
+import "../../chunks/chunk.B4BZKR24.js";
+import "../../chunks/chunk.2FK6USFR.js";
+import "../../chunks/chunk.V7RJROLH.js";
+import "../../chunks/chunk.5XL2LZLC.js";
+import "../../chunks/chunk.G7AELPSO.js";
+import "../../chunks/chunk.LMJPQPQT.js";
+import "../../chunks/chunk.7J7CS3BK.js";
+import "../../chunks/chunk.RDGMZ5XB.js";
+import "../../chunks/chunk.I33L3NO6.js";
+import "../../chunks/chunk.23TOS4ZE.js";
+import "../../chunks/chunk.XNEONNEJ.js";
+import "../../chunks/chunk.FDYFSRSX.js";
+import "../../chunks/chunk.D7CATJYB.js";
+import "../../chunks/chunk.YCXTCVAZ.js";
+import "../../chunks/chunk.TUVJKY7S.js";
+import "../../chunks/chunk.6M63UXML.js";
+export {
+  DSADialog as default
+};

package/dist/components/dialog/dialog.styles.d.ts

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

package/dist/components/dialog/dialog.styles.js

@@ -0,0 +1,8 @@
+import {
+  dialog_styles_default
+} from "../../chunks/chunk.PQWQ42E2.js";
+import "../../chunks/chunk.TUVJKY7S.js";
+import "../../chunks/chunk.6M63UXML.js";
+export {
+  dialog_styles_default as default
+};

package/dist/components/divider/divider.d.ts

@@ -0,0 +1,17 @@
+import type { CSSResultGroup } from 'lit';
+import { ShoelaceElement } from '../../internal/shoelace-element';
+/**
+ * @summary Dividers are used to visually separate or group elements.
+ * @documentation https://shoelace.style/components/divider
+ */
+export default class DSADivider extends ShoelaceElement {
+    static styles: CSSResultGroup;
+    /** Draws the divider in a vertical orientation. */
+    vertical: boolean;
+    connectedCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'dsa-divider': DSADivider;
+    }
+}

package/dist/components/divider/divider.js

@@ -0,0 +1,10 @@
+import {
+  DSADivider
+} from "../../chunks/chunk.AQRNB4GJ.js";
+import "../../chunks/chunk.RY4QCT3T.js";
+import "../../chunks/chunk.YCXTCVAZ.js";
+import "../../chunks/chunk.TUVJKY7S.js";
+import "../../chunks/chunk.6M63UXML.js";
+export {
+  DSADivider as default
+};

package/dist/components/divider/divider.styles.d.ts

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

package/dist/components/divider/divider.styles.js

@@ -0,0 +1,8 @@
+import {
+  divider_styles_default
+} from "../../chunks/chunk.RY4QCT3T.js";
+import "../../chunks/chunk.TUVJKY7S.js";
+import "../../chunks/chunk.6M63UXML.js";
+export {
+  divider_styles_default as default
+};

package/dist/components/drawer/drawer.d.ts

@@ -0,0 +1,77 @@
+import type { CSSResultGroup } from 'lit';
+import { ShoelaceElement } from '../../internal/shoelace-element';
+import '../icon-button/icon-button';
+/**
+ * @summary Drawers slide in from a container to expose additional options and information.
+ * @documentation https://dsa.service-public-autonomie.fr/062dac5f6/p/11b4c2-drawer
+ *
+ * @dependency dsa-icon-button
+ *
+ * @slot - The drawer's main content.
+ * @slot label - The drawer's label. Alternatively, you can use the `label` attribute.
+ * @slot header-actions - Optional actions to add to the header. Works best with `<dsa-icon-button>`.
+ * @slot footer - The drawer's footer, usually one or more buttons representing various options.
+ *
+ * @event dsa-show - Emitted when the drawer opens.
+ * @event dsa-after-show - Emitted after the drawer opens and all animations are complete.
+ * @event dsa-hide - Emitted when the drawer closes.
+ * @event dsa-after-hide - Emitted after the drawer closes and all animations are complete.
+ * @event dsa-initial-focus - Emitted when the drawer opens and is ready to receive focus. Calling
+ *   `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.
+ * @event {{ source: 'close-button' | 'keyboard' | 'overlay' }} dsa-request-close - Emitted when the user attempts to
+ *   close the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling
+ *   `event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in
+ *   destructive behavior such as data loss.
+
+ */
+export default class DSADrawer extends ShoelaceElement {
+    static styles: CSSResultGroup;
+    private readonly hasSlotController;
+    private readonly localize;
+    private modal;
+    private originalTrigger;
+    drawer: HTMLElement;
+    panel: HTMLElement;
+    overlay: HTMLElement;
+    /**
+     * Indicates whether or not the drawer is open. You can toggle this attribute to show and hide the drawer, or you can
+     * use the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.
+     */
+    open: boolean;
+    /**
+     * The drawer's label as displayed in the header. You should always include a relevant label even when using
+     * `no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.
+     */
+    label: string;
+    /** The direction from which the drawer will open. */
+    placement: 'top' | 'end' | 'bottom' | 'start';
+    /**
+     * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of
+     * its parent element, set this attribute and add `position: relative` to the parent.
+     */
+    contained: boolean;
+    /**
+     * Removes the header. This will also remove the default close button, so please ensure you provide an easy,
+     * accessible way for users to dismiss the drawer.
+     */
+    noHeader: boolean;
+    connectedCallback(): void;
+    firstUpdated(): void;
+    disconnectedCallback(): void;
+    private requestClose;
+    private addOpenListeners;
+    private removeOpenListeners;
+    private handleDocumentKeyDown;
+    handleOpenChange(): Promise<void>;
+    handleNoModalChange(): void;
+    /** Shows the drawer. */
+    show(): Promise<void>;
+    /** Hides the drawer */
+    hide(): Promise<void>;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'dsa-drawer': DSADrawer;
+    }
+}

package/dist/components/drawer/drawer.js

@@ -0,0 +1,28 @@
+import {
+  DSADrawer
+} from "../../chunks/chunk.5XUV3SRW.js";
+import "../../chunks/chunk.DXVNWE2M.js";
+import "../../chunks/chunk.ISAFRNR2.js";
+import "../../chunks/chunk.EMIT7S33.js";
+import "../../chunks/chunk.YIY5RM53.js";
+import "../../chunks/chunk.XSCX6TC5.js";
+import "../../chunks/chunk.QFJA3MTV.js";
+import "../../chunks/chunk.B4BZKR24.js";
+import "../../chunks/chunk.2FK6USFR.js";
+import "../../chunks/chunk.V7RJROLH.js";
+import "../../chunks/chunk.5XL2LZLC.js";
+import "../../chunks/chunk.G7AELPSO.js";
+import "../../chunks/chunk.LMJPQPQT.js";
+import "../../chunks/chunk.7J7CS3BK.js";
+import "../../chunks/chunk.RDGMZ5XB.js";
+import "../../chunks/chunk.I33L3NO6.js";
+import "../../chunks/chunk.23TOS4ZE.js";
+import "../../chunks/chunk.XNEONNEJ.js";
+import "../../chunks/chunk.FDYFSRSX.js";
+import "../../chunks/chunk.D7CATJYB.js";
+import "../../chunks/chunk.YCXTCVAZ.js";
+import "../../chunks/chunk.TUVJKY7S.js";
+import "../../chunks/chunk.6M63UXML.js";
+export {
+  DSADrawer as default
+};

package/dist/components/drawer/drawer.styles.d.ts

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

package/dist/components/drawer/drawer.styles.js

@@ -0,0 +1,8 @@
+import {
+  drawer_styles_default
+} from "../../chunks/chunk.DXVNWE2M.js";
+import "../../chunks/chunk.TUVJKY7S.js";
+import "../../chunks/chunk.6M63UXML.js";
+export {
+  drawer_styles_default as default
+};

package/dist/components/dropdown/dropdown.d.ts

@@ -0,0 +1,87 @@
+import type { CSSResultGroup } from 'lit';
+import { ShoelaceElement } from '../../internal/shoelace-element';
+import type DSAPopup from '../popup/popup';
+/**
+ * @summary Dropdowns expose additional content that "drops down" in a panel.
+ * @documentation https://dsa.service-public-autonomie.fr/062dac5f6/p/769df7-dropdown
+ *
+ * @dependency dsa-popup
+ *
+ * @slot - The dropdown's main content.
+ * @slot trigger - The dropdown's trigger, usually a `<dsa-button>` element.
+ *
+ * @event dsa-show - Emitted when the dropdown opens.
+ * @event dsa-after-show - Emitted after the dropdown opens and all animations are complete.
+ * @event dsa-hide - Emitted when the dropdown closes.
+ * @event dsa-after-hide - Emitted after the dropdown closes and all animations are complete.
+ */
+export default class DSADropdown extends ShoelaceElement {
+    static styles: CSSResultGroup;
+    popup: DSAPopup;
+    trigger: HTMLSlotElement;
+    panel: HTMLSlotElement;
+    private readonly localize;
+    /**
+     * Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you
+     * can use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state.
+     */
+    open: boolean;
+    /**
+     * The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel
+     * inside of the viewport.
+     */
+    placement: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
+    /** Disables the dropdown so the panel will not open. */
+    disabled: boolean;
+    /**
+     * By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for
+     * dropdowns that allow for multiple interactions.
+     */
+    stayOpenOnSelect: boolean;
+    /**
+     * The dropdown will close when the user interacts outside of this element (e.g. clicking). Useful for composing other
+     * components that use a dropdown internally.
+     */
+    containingElement?: HTMLElement;
+    /** The distance in pixels from which to offset the panel along its trigger. */
+    skidding: number;
+    /**
+     * Enable this option to prevent the panel from being clipped when the component is placed inside a container with
+     * `overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
+     */
+    hoist: boolean;
+    connectedCallback(): void;
+    firstUpdated(): void;
+    disconnectedCallback(): void;
+    private focusOnTrigger;
+    private getMenu;
+    private handleKeyDown;
+    private handleDocumentKeyDown;
+    private handleDocumentMouseDown;
+    private handlePanelSelect;
+    private handleTriggerClick;
+    private handleTriggerKeyDown;
+    private handleTriggerKeyUp;
+    private handleTriggerSlotChange;
+    private getTrigger;
+    handleDisabledChange(): void;
+    updateAccessibleTrigger(): void;
+    /** Shows the dropdown panel. */
+    show(): Promise<void>;
+    /** Hides the dropdown panel */
+    hide(): Promise<void>;
+    /**
+     * Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu
+     * is activated.
+     */
+    reposition(): void;
+    private addOpenListeners;
+    private removeOpenListeners;
+    handleOpenChange(): Promise<void>;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'dsa-dropdown': DSADropdown;
+    }
+}

package/dist/components/dropdown/dropdown.js

@@ -0,0 +1,15 @@
+import {
+  DSADropdown
+} from "../../chunks/chunk.LT7JMZ3T.js";
+import "../../chunks/chunk.UEUTSYIH.js";
+import "../../chunks/chunk.B4BZKR24.js";
+import "../../chunks/chunk.2FK6USFR.js";
+import "../../chunks/chunk.V7RJROLH.js";
+import "../../chunks/chunk.5XL2LZLC.js";
+import "../../chunks/chunk.D7CATJYB.js";
+import "../../chunks/chunk.YCXTCVAZ.js";
+import "../../chunks/chunk.TUVJKY7S.js";
+import "../../chunks/chunk.6M63UXML.js";
+export {
+  DSADropdown as default
+};

package/dist/components/dropdown/dropdown.styles.d.ts

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

package/dist/components/dropdown/dropdown.styles.js

@@ -0,0 +1,8 @@
+import {
+  dropdown_styles_default
+} from "../../chunks/chunk.UEUTSYIH.js";
+import "../../chunks/chunk.TUVJKY7S.js";
+import "../../chunks/chunk.6M63UXML.js";
+export {
+  dropdown_styles_default as default
+};

package/dist/components/error-text/error-text.d.ts

@@ -0,0 +1,18 @@
+import type { CSSResultGroup } from 'lit';
+import { ShoelaceElement } from '../../internal/shoelace-element';
+/**
+ * @summary Error Text can be used to display an error message under an input or a fieldset
+ *
+ * @dependency dsa-icon
+ *
+ * @slot - The error-text's main content.
+ */
+export default class DSAErrorText extends ShoelaceElement {
+    static styles: CSSResultGroup;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'dsa-error-text': DSAErrorText;
+    }
+}

package/dist/components/error-text/error-text.js

@@ -0,0 +1,9 @@
+import {
+  DSAErrorText
+} from "../../chunks/chunk.CPXD6UYZ.js";
+import "../../chunks/chunk.EYZGEU3G.js";
+import "../../chunks/chunk.YCXTCVAZ.js";
+import "../../chunks/chunk.6M63UXML.js";
+export {
+  DSAErrorText as default
+};

package/dist/components/error-text/error-text.styles.d.ts

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

package/dist/components/error-text/error-text.styles.js

@@ -0,0 +1,7 @@
+import {
+  error_text_styles_default
+} from "../../chunks/chunk.EYZGEU3G.js";
+import "../../chunks/chunk.6M63UXML.js";
+export {
+  error_text_styles_default as default
+};

package/dist/components/format-bytes/format-bytes.d.ts

@@ -0,0 +1,22 @@
+import { ShoelaceElement } from '../../internal/shoelace-element';
+/**
+ * @summary Formats a number as a human readable bytes value.
+ * @documentation https://shoelace.style/components/format-bytes
+ * @status stable
+ * @since 2.0
+ */
+export default class DSAFormatBytes extends ShoelaceElement {
+    private readonly localize;
+    /** The number to format in bytes. */
+    value: number;
+    /** The type of unit to display. */
+    unit: 'byte' | 'bit';
+    /** Determines how to display the result, e.g. "100 bytes", "100 b", or "100b". */
+    display: 'long' | 'short' | 'narrow';
+    render(): string;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'dsa-format-bytes': DSAFormatBytes;
+    }
+}

package/dist/components/format-bytes/format-bytes.js

@@ -0,0 +1,9 @@
+import {
+  DSAFormatBytes
+} from "../../chunks/chunk.KDAK2GXX.js";
+import "../../chunks/chunk.5XL2LZLC.js";
+import "../../chunks/chunk.YCXTCVAZ.js";
+import "../../chunks/chunk.6M63UXML.js";
+export {
+  DSAFormatBytes as default
+};

package/dist/components/format-date/format-date.d.ts

@@ -0,0 +1,42 @@
+import { ShoelaceElement } from '../../internal/shoelace-element';
+/**
+ * @summary Formats a date/time using the specified locale and options.
+ * @documentation https://shoelace.style/components/format-date
+ */
+export default class DSAFormatDate extends ShoelaceElement {
+    private readonly localize;
+    /**
+     * The date/time to format. If not set, the current date and time will be used. When passing a string, it's strongly
+     * recommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert a date to this format
+     * in JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString).
+     */
+    date: Date | string;
+    /** The format for displaying the weekday. */
+    weekday: 'narrow' | 'short' | 'long';
+    /** The format for displaying the era. */
+    era: 'narrow' | 'short' | 'long';
+    /** The format for displaying the year. */
+    year: 'numeric' | '2-digit';
+    /** The format for displaying the month. */
+    month: 'numeric' | '2-digit' | 'narrow' | 'short' | 'long';
+    /** The format for displaying the day. */
+    day: 'numeric' | '2-digit';
+    /** The format for displaying the hour. */
+    hour: 'numeric' | '2-digit';
+    /** The format for displaying the minute. */
+    minute: 'numeric' | '2-digit';
+    /** The format for displaying the second. */
+    second: 'numeric' | '2-digit';
+    /** The format for displaying the time. */
+    timeZoneName: 'short' | 'long';
+    /** The time zone to express the time in. */
+    timeZone: string;
+    /** The format for displaying the hour. */
+    hourFormat: 'auto' | '12' | '24';
+    render(): import("lit").TemplateResult<1> | undefined;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'dsa-format-date': DSAFormatDate;
+    }
+}

package/dist/components/format-date/format-date.js

@@ -0,0 +1,9 @@
+import {
+  DSAFormatDate
+} from "../../chunks/chunk.WIEJJS3W.js";
+import "../../chunks/chunk.5XL2LZLC.js";
+import "../../chunks/chunk.YCXTCVAZ.js";
+import "../../chunks/chunk.6M63UXML.js";
+export {
+  DSAFormatDate as default
+};