bits-ui 2.3.0 → 2.3.1

package/dist/bits/date-field/date-field.svelte.d.ts

@@ -7,7 +7,7 @@ import type { BitsFocusEvent, BitsKeyboardEvent, BitsMouseEvent, WithRefProps }
 import type { DateAndTimeSegmentObj, DateOnInvalid, DateSegmentObj, DateSegmentPart, DateValidator, Granularity, HourCycle, SegmentPart, SegmentValueObj, TimeSegmentObj, EditableTimeSegmentPart } from "../../shared/date/types.js";
 import { type Formatter } from "../../internal/date-time/formatter.js";
 import { type Announcer } from "../../internal/date-time/announcer.js";
-export declare const DATE_FIELD_INPUT_ATTR = "data-date-field-input";
+export declare const dateFieldAttrs: import("../../internal/attrs.js").BitsAttrs<readonly ["input", "label", "segment"]>;
 type SegmentConfig = {
     min: number | ((root: DateFieldRootState) => number);
     max: number | ((root: DateFieldRootState) => number);
@@ -138,6 +138,7 @@ export declare class DateFieldRootState {
     updateSegment<T extends keyof DateAndTimeSegmentObj>(part: T, cb: T extends DateSegmentPart ? Updater<DateSegmentObj[T]> : T extends EditableTimeSegmentPart ? Updater<TimeSegmentObj[T]> : Updater<DateAndTimeSegmentObj[T]>): void;
     handleSegmentClick(e: BitsMouseEvent): void;
     getBaseSegmentAttrs(part: SegmentPart, segmentId: string): {
+        [dateFieldAttrs.segment]: string;
         "aria-invalid": "true" | undefined;
         "aria-disabled": "true" | "false";
         "aria-readonly": "true" | "false";
@@ -176,7 +177,6 @@ export declare class DateFieldInputState {
         readonly "aria-disabled": "true" | "false";
         readonly "data-invalid": "" | undefined;
         readonly "data-disabled": "" | undefined;
-        readonly "data-date-field-input": "";
     };
 }
 declare class DateFieldHiddenInputState {
@@ -200,7 +200,6 @@ declare class DateFieldLabelState {
         readonly id: string;
         readonly "data-invalid": "" | undefined;
         readonly "data-disabled": "" | undefined;
-        readonly "data-date-field-label": "";
         readonly onclick: (_: BitsMouseEvent) => void;
     };
 }
@@ -415,7 +414,6 @@ declare class DateFieldTimeZoneSegmentState {
             readonly caretColor: "transparent";
         };
         readonly onkeydown: (e: BitsKeyboardEvent) => void;
-        readonly tabindex: 0;
     } | {
         readonly "data-readonly": "" | undefined;
         readonly "aria-labelledby": string;

package/dist/bits/date-field/date-field.svelte.js

@@ -1,7 +1,7 @@
 import { box, onDestroyEffect, attachRef, DOMContext } from "svelte-toolbelt";
 import { onMount, untrack } from "svelte";
 import { Context, watch } from "runed";
-import { getAriaDisabled, getAriaHidden, getAriaInvalid, getAriaReadonly, getDataDisabled, getDataInvalid, getDataReadonly, } from "../../internal/attrs.js";
+import { createBitsAttrs, getAriaDisabled, getAriaHidden, getAriaInvalid, getAriaReadonly, getDataDisabled, getDataInvalid, getDataReadonly, } from "../../internal/attrs.js";
 import { isBrowser, isNumberString } from "../../internal/is.js";
 import { kbd } from "../../internal/kbd.js";
 import { useId } from "../../internal/use-id.js";
@@ -11,8 +11,10 @@ import { areAllSegmentsFilled, createContent, getValueFromSegments, inferGranula
 import { DATE_SEGMENT_PARTS, EDITABLE_TIME_SEGMENT_PARTS, } from "../../internal/date-time/field/parts.js";
 import { getDaysInMonth, isBefore, toDate } from "../../internal/date-time/utils.js";
 import { getFirstSegment, handleSegmentNavigation, isSegmentNavigationKey, moveToNextSegment, moveToPrevSegment, } from "../../internal/date-time/field/segments.js";
-export const DATE_FIELD_INPUT_ATTR = "data-date-field-input";
-const DATE_FIELD_LABEL_ATTR = "data-date-field-label";
+export const dateFieldAttrs = createBitsAttrs({
+    component: "date-field",
+    parts: ["input", "label", "segment"],
+});
 const SEGMENT_CONFIGS = {
     day: {
         min: 1,
@@ -535,6 +537,7 @@ export class DateFieldRootState {
             "data-disabled": getDataDisabled(this.disabled.current),
             "data-readonly": getDataReadonly(this.readonly.current || inReadonlySegments),
             "data-segment": `${part}`,
+            [dateFieldAttrs.segment]: "",
         };
         if (part === "literal")
             return defaultAttrs;
@@ -585,7 +588,7 @@ export class DateFieldInputState {
         "aria-disabled": getAriaDisabled(this.root.disabled.current),
         "data-invalid": this.root.isInvalid ? "" : undefined,
         "data-disabled": getDataDisabled(this.root.disabled.current),
-        [DATE_FIELD_INPUT_ATTR]: "",
+        [dateFieldAttrs.input]: "",
         ...attachRef(this.opts.ref, (v) => this.root.setFieldNode(v)),
     }));
 }
@@ -624,7 +627,7 @@ class DateFieldLabelState {
         id: this.opts.id.current,
         "data-invalid": getDataInvalid(this.root.isInvalid),
         "data-disabled": getDataDisabled(this.root.disabled.current),
-        [DATE_FIELD_LABEL_ATTR]: "",
+        [dateFieldAttrs.label]: "",
         onclick: this.onclick,
         ...attachRef(this.opts.ref, (v) => this.root.setLabelNode(v)),
     }));
@@ -1173,7 +1176,6 @@ class DateFieldTimeZoneSegmentState {
             caretColor: "transparent",
         },
         onkeydown: this.onkeydown,
-        tabindex: 0,
         ...this.root.getBaseSegmentAttrs("timeZoneName", this.opts.id.current),
         "data-readonly": getDataReadonly(true),
         ...attachRef(this.opts.ref),

package/dist/bits/date-picker/components/date-picker-trigger.svelte

@@ -2,7 +2,7 @@
 	import { mergeProps } from "svelte-toolbelt";
 	import type { DatePickerTriggerProps } from "../types.js";
 	import PopoverTrigger from "../../popover/components/popover-trigger.svelte";
-	import { DATE_FIELD_INPUT_ATTR } from "../../date-field/date-field.svelte.js";
+	import { dateFieldAttrs } from "../../date-field/date-field.svelte.js";
 	import {
 		handleSegmentNavigation,
 		isSegmentNavigationKey,
@@ -14,7 +14,7 @@
 		if (isSegmentNavigationKey(e.key)) {
 			const currNode = e.currentTarget as HTMLElement;
 			const dateFieldInputNode = currNode.closest(
-				`[${DATE_FIELD_INPUT_ATTR}]`
+				dateFieldAttrs.selector("input")
 			) as HTMLElement;
 			if (!dateFieldInputNode) return;
 			handleSegmentNavigation(e, dateFieldInputNode);

package/dist/bits/date-range-field/date-range-field.svelte.d.ts

@@ -8,7 +8,7 @@ import type { DateOnInvalid, DateRange, DateRangeValidator, SegmentPart } from "
 import type { WithRefProps } from "../../internal/types.js";
 import type { Granularity } from "../../shared/date/types.js";
 import { type Formatter } from "../../internal/date-time/formatter.js";
-export declare const DATE_RANGE_FIELD_ROOT_ATTR = "data-date-range-field-root";
+export declare const dateRangeFieldAttrs: import("../../internal/attrs.js").BitsAttrs<readonly ["root", "label"]>;
 type DateRangeFieldRootStateProps = WithRefProps<WritableBoxedValues<{
     value: DateRange;
     placeholder: DateValue;
@@ -58,7 +58,6 @@ export declare class DateRangeFieldRootState {
     props: {
         readonly id: string;
         readonly role: "group";
-        readonly "data-date-range-field-root": "";
         readonly "data-invalid": "" | undefined;
     };
 }
@@ -72,7 +71,6 @@ declare class DateRangeFieldLabelState {
         readonly id: string;
         readonly "data-invalid": "" | undefined;
         readonly "data-disabled": "" | undefined;
-        readonly "data-date-range-field-label": "";
         readonly onclick: () => void;
     };
 }

package/dist/bits/date-range-field/date-range-field.svelte.js

@@ -2,13 +2,15 @@ import { box, onDestroyEffect, attachRef, DOMContext } from "svelte-toolbelt";
 import { Context, watch } from "runed";
 import { DateFieldInputState, useDateFieldRoot } from "../date-field/date-field.svelte.js";
 import { useId } from "../../internal/use-id.js";
-import { getDataDisabled, getDataInvalid } from "../../internal/attrs.js";
+import { createBitsAttrs, getDataDisabled, getDataInvalid } from "../../internal/attrs.js";
 import { createFormatter } from "../../internal/date-time/formatter.js";
 import { removeDescriptionElement } from "../../internal/date-time/field/helpers.js";
 import { isBefore } from "../../internal/date-time/utils.js";
 import { getFirstSegment } from "../../internal/date-time/field/segments.js";
-export const DATE_RANGE_FIELD_ROOT_ATTR = "data-date-range-field-root";
-const DATE_RANGE_FIELD_LABEL_ATTR = "data-date-range-field-label";
+export const dateRangeFieldAttrs = createBitsAttrs({
+    component: "date-range-field",
+    parts: ["root", "label"],
+});
 export class DateRangeFieldRootState {
     opts;
     startFieldState = undefined;
@@ -130,7 +132,7 @@ export class DateRangeFieldRootState {
     props = $derived.by(() => ({
         id: this.opts.id.current,
         role: "group",
-        [DATE_RANGE_FIELD_ROOT_ATTR]: "",
+        [dateRangeFieldAttrs.root]: "",
         "data-invalid": getDataInvalid(this.isInvalid),
         ...attachRef(this.opts.ref, (v) => (this.fieldNode = v)),
     }));
@@ -155,7 +157,7 @@ class DateRangeFieldLabelState {
         // TODO: invalid state for field
         "data-invalid": getDataInvalid(this.root.isInvalid),
         "data-disabled": getDataDisabled(this.root.opts.disabled.current),
-        [DATE_RANGE_FIELD_LABEL_ATTR]: "",
+        [dateRangeFieldAttrs.label]: "",
         onclick: this.#onclick,
         ...attachRef(this.opts.ref, (v) => (this.root.labelNode = v)),
     }));

package/dist/bits/date-range-picker/components/date-range-picker-trigger.svelte

@@ -2,7 +2,7 @@
 	import { mergeProps } from "svelte-toolbelt";
 	import type { DateRangePickerTriggerProps } from "../types.js";
 	import PopoverTrigger from "../../popover/components/popover-trigger.svelte";
-	import { DATE_RANGE_FIELD_ROOT_ATTR } from "../../date-range-field/date-range-field.svelte.js";
+	import { dateRangeFieldAttrs } from "../../date-range-field/date-range-field.svelte.js";
 	import {
 		handleSegmentNavigation,
 		isSegmentNavigationKey,
@@ -14,7 +14,7 @@
 		if (isSegmentNavigationKey(e.key)) {
 			const currNode = e.currentTarget as HTMLElement;
 			const dateFieldInputNode = currNode.closest(
-				`[${DATE_RANGE_FIELD_ROOT_ATTR}]`
+				dateRangeFieldAttrs.selector("root")
 			) as HTMLElement;
 			if (!dateFieldInputNode) return;
 			handleSegmentNavigation(e, dateFieldInputNode);

package/dist/bits/dialog/dialog.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
 import type { BitsKeyboardEvent, BitsMouseEvent, WithRefProps } from "../../internal/types.js";
 type DialogVariant = "alert-dialog" | "dialog";
+declare const dialogAttrs: import("../../internal/attrs.js").BitsAttrs<readonly ["content", "trigger", "overlay", "title", "description", "close", "cancel", "action"]>;
 type DialogRootStateProps = WritableBoxedValues<{
     open: boolean;
 }> & ReadableBoxedValues<{
@@ -16,19 +17,10 @@ declare class DialogRootState {
     triggerId: string | undefined;
     descriptionId: string | undefined;
     cancelNode: HTMLElement | null;
-    attrs: {
-        readonly content: "data-dialog-content" | "data-alert-dialog-content";
-        readonly trigger: "data-dialog-trigger" | "data-alert-dialog-trigger";
-        readonly overlay: "data-dialog-overlay" | "data-alert-dialog-overlay";
-        readonly title: "data-dialog-title" | "data-alert-dialog-title";
-        readonly description: "data-dialog-description" | "data-alert-dialog-description";
-        readonly close: "data-dialog-close" | "data-alert-dialog-close";
-        readonly cancel: "data-dialog-cancel" | "data-alert-dialog-cancel";
-        readonly action: "data-dialog-action" | "data-alert-dialog-action";
-    };
     constructor(opts: DialogRootStateProps);
     handleOpen(): void;
     handleClose(): void;
+    getBitsAttr: typeof dialogAttrs.getAttr;
     sharedProps: {
         readonly "data-state": "open" | "closed";
     };
@@ -58,7 +50,6 @@ type DialogCloseStateProps = WithRefProps & ReadableBoxedValues<{
     disabled: boolean;
 }>;
 declare class DialogCloseState {
-    #private;
     readonly opts: DialogCloseStateProps;
     readonly root: DialogRootState;
     constructor(opts: DialogCloseStateProps, root: DialogRootState);
@@ -75,7 +66,6 @@ declare class DialogCloseState {
 }
 type DialogActionStateProps = WithRefProps;
 declare class DialogActionState {
-    #private;
     readonly opts: DialogActionStateProps;
     readonly root: DialogRootState;
     constructor(opts: DialogActionStateProps, root: DialogRootState);

package/dist/bits/dialog/dialog.svelte.js

@@ -1,20 +1,12 @@
 import { attachRef } from "svelte-toolbelt";
 import { Context } from "runed";
-import { getAriaExpanded, getDataOpenClosed } from "../../internal/attrs.js";
+import { createBitsAttrs, getAriaExpanded, getDataOpenClosed } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
 import { untrack } from "svelte";
-function createAttrs(variant) {
-    return {
-        content: `data-${variant}-content`,
-        trigger: `data-${variant}-trigger`,
-        overlay: `data-${variant}-overlay`,
-        title: `data-${variant}-title`,
-        description: `data-${variant}-description`,
-        close: `data-${variant}-close`,
-        cancel: `data-${variant}-cancel`,
-        action: `data-${variant}-action`,
-    };
-}
+const dialogAttrs = createBitsAttrs({
+    component: "dialog",
+    parts: ["content", "trigger", "overlay", "title", "description", "close", "cancel", "action"],
+});
 class DialogRootState {
     opts;
     triggerNode = $state(null);
@@ -25,7 +17,6 @@ class DialogRootState {
     triggerId = $state(undefined);
     descriptionId = $state(undefined);
     cancelNode = $state(null);
-    attrs = $derived.by(() => createAttrs(this.opts.variant.current));
     constructor(opts) {
         this.opts = opts;
         this.handleOpen = this.handleOpen.bind(this);
@@ -41,6 +32,9 @@ class DialogRootState {
             return;
         this.opts.open.current = false;
     }
+    getBitsAttr = (part) => {
+        return dialogAttrs.getAttr(part, this.opts.variant.current);
+    };
     sharedProps = $derived.by(() => ({
         "data-state": getDataOpenClosed(this.opts.open.current),
     }));
@@ -74,7 +68,7 @@ class DialogTriggerState {
         "aria-haspopup": "dialog",
         "aria-expanded": getAriaExpanded(this.root.opts.open.current),
         "aria-controls": this.root.contentId,
-        [this.root.attrs.trigger]: "",
+        [this.root.getBitsAttr("trigger")]: "",
         onkeydown: this.onkeydown,
         onclick: this.onclick,
         disabled: this.opts.disabled.current ? true : undefined,
@@ -88,7 +82,6 @@ class DialogTriggerState {
 class DialogCloseState {
     opts;
     root;
-    #attr = $derived.by(() => this.root.attrs[this.opts.variant.current]);
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
@@ -112,7 +105,7 @@ class DialogCloseState {
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
-        [this.#attr]: "",
+        [this.root.getBitsAttr(this.opts.variant.current)]: "",
         onclick: this.onclick,
         onkeydown: this.onkeydown,
         disabled: this.opts.disabled.current ? true : undefined,
@@ -124,14 +117,13 @@ class DialogCloseState {
 class DialogActionState {
     opts;
     root;
-    #attr = $derived.by(() => this.root.attrs.action);
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
-        [this.#attr]: "",
+        [this.root.getBitsAttr("action")]: "",
         ...this.root.sharedProps,
         ...attachRef(this.opts.ref),
     }));
@@ -147,7 +139,7 @@ class DialogTitleState {
         id: this.opts.id.current,
         role: "heading",
         "aria-level": this.opts.level.current,
-        [this.root.attrs.title]: "",
+        [this.root.getBitsAttr("title")]: "",
         ...this.root.sharedProps,
         ...attachRef(this.opts.ref, (v) => (this.root.titleId = v?.id)),
     }));
@@ -161,7 +153,7 @@ class DialogDescriptionState {
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
-        [this.root.attrs.description]: "",
+        [this.root.getBitsAttr("description")]: "",
         ...this.root.sharedProps,
         ...attachRef(this.opts.ref, (v) => {
             this.root.descriptionNode = v;
@@ -183,7 +175,7 @@ class DialogContentState {
         "aria-modal": "true",
         "aria-describedby": this.root.descriptionId,
         "aria-labelledby": this.root.titleId,
-        [this.root.attrs.content]: "",
+        [this.root.getBitsAttr("content")]: "",
         style: {
             pointerEvents: "auto",
             outline: this.root.opts.variant.current === "alert-dialog" ? "none" : undefined,
@@ -206,7 +198,7 @@ class DialogOverlayState {
     snippetProps = $derived.by(() => ({ open: this.root.opts.open.current }));
     props = $derived.by(() => ({
         id: this.opts.id.current,
-        [this.root.attrs.overlay]: "",
+        [this.root.getBitsAttr("overlay")]: "",
         style: {
             pointerEvents: "auto",
         },
@@ -240,7 +232,7 @@ class AlertDialogCancelState {
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
-        [this.root.attrs.cancel]: "",
+        [this.root.getBitsAttr("cancel")]: "",
         onclick: this.onclick,
         onkeydown: this.onkeydown,
         tabindex: 0,

package/dist/bits/label/label.svelte.d.ts

@@ -6,7 +6,6 @@ declare class LabelRootState {
     onmousedown(e: BitsMouseEvent): void;
     props: {
         readonly id: string;
-        readonly "data-label-root": "";
         readonly onmousedown: (e: BitsMouseEvent) => void;
     };
 }

package/dist/bits/label/label.svelte.js

@@ -1,5 +1,9 @@
 import { attachRef } from "svelte-toolbelt";
-const ROOT_ATTR = "data-label-root";
+import { createBitsAttrs } from "../../internal/attrs.js";
+const labelAttrs = createBitsAttrs({
+    component: "label",
+    parts: ["root"],
+});
 class LabelRootState {
     opts;
     constructor(opts) {
@@ -12,7 +16,7 @@ class LabelRootState {
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
-        [ROOT_ATTR]: "",
+        [labelAttrs.root]: "",
         onmousedown: this.onmousedown,
         ...attachRef(this.opts.ref),
     }));

package/dist/bits/link-preview/link-preview.svelte.d.ts

@@ -40,7 +40,6 @@ declare class LinkPreviewTriggerState {
         readonly "data-state": "open" | "closed";
         readonly "aria-controls": string | undefined;
         readonly role: "button";
-        readonly "data-link-preview-trigger": "";
         readonly onpointerenter: (e: BitsPointerEvent) => void;
         readonly onfocus: (e: BitsFocusEvent) => void;
         readonly onblur: (_: BitsFocusEvent) => void;
@@ -69,7 +68,6 @@ declare class LinkPreviewContentState {
         readonly id: string;
         readonly tabindex: -1;
         readonly "data-state": "open" | "closed";
-        readonly "data-link-preview-content": "";
         readonly onpointerdown: (e: BitsPointerEvent) => void;
         readonly onpointerenter: (e: BitsPointerEvent) => void;
         readonly onfocusout: (e: BitsFocusEvent) => void;

package/dist/bits/link-preview/link-preview.svelte.js

@@ -1,12 +1,14 @@
 import { afterSleep, onDestroyEffect, attachRef, DOMContext } from "svelte-toolbelt";
 import { Context, watch } from "runed";
 import { on } from "svelte/events";
-import { getAriaExpanded, getDataOpenClosed } from "../../internal/attrs.js";
+import { createBitsAttrs, getAriaExpanded, getDataOpenClosed } from "../../internal/attrs.js";
 import { isElement, isFocusVisible, isTouch } from "../../internal/is.js";
 import { getTabbableCandidates } from "../../internal/focus.js";
 import { useGraceArea } from "../../internal/use-grace-area.svelte.js";
-const LINK_PREVIEW_CONTENT_ATTR = "data-link-preview-content";
-const LINK_PREVIEW_TRIGGER_ATTR = "data-link-preview-trigger";
+const linkPreviewAttrs = createBitsAttrs({
+    component: "link-preview",
+    parts: ["content", "trigger"],
+});
 class LinkPreviewRootState {
     opts;
     hasSelection = $state(false);
@@ -126,7 +128,7 @@ class LinkPreviewTriggerState {
         "data-state": getDataOpenClosed(this.root.opts.open.current),
         "aria-controls": this.root.contentNode?.id,
         role: "button",
-        [LINK_PREVIEW_TRIGGER_ATTR]: "",
+        [linkPreviewAttrs.trigger]: "",
         onpointerenter: this.onpointerenter,
         onfocus: this.onfocus,
         onblur: this.onblur,
@@ -197,7 +199,7 @@ class LinkPreviewContentState {
         id: this.opts.id.current,
         tabindex: -1,
         "data-state": getDataOpenClosed(this.root.opts.open.current),
-        [LINK_PREVIEW_CONTENT_ATTR]: "",
+        [linkPreviewAttrs.content]: "",
         onpointerdown: this.onpointerdown,
         onpointerenter: this.onpointerenter,
         onfocusout: this.onfocusout,

package/dist/bits/menu/components/menu-sub-content-static.svelte

@@ -54,7 +54,7 @@
 		}
 	}
 
-	const dataAttr = $derived(subContentState.parentMenu.root.getAttr("sub-content"));
+	const dataAttr = $derived(subContentState.parentMenu.root.getBitsAttr("sub-content"));
 
 	const mergedProps = $derived(
 		mergeProps(restProps, subContentState.props, {

package/dist/bits/menu/components/menu-sub-content.svelte

@@ -55,7 +55,7 @@
 		}
 	}
 
-	const dataAttr = $derived(subContentState.parentMenu.root.getAttr("sub-content"));
+	const dataAttr = $derived(subContentState.parentMenu.root.getBitsAttr("sub-content"));
 
 	const mergedProps = $derived(
 		mergeProps(restProps, subContentState.props, {

package/dist/bits/menu/menu.svelte.d.ts

@@ -17,13 +17,14 @@ export type MenuRootStateProps = ReadableBoxedValues<{
     onClose: AnyFn;
 };
 export declare const MenuOpenEvent: CustomEventDispatcher<unknown>;
+export declare const menuAttrs: import("../../internal/attrs.js").BitsAttrs<readonly ["trigger", "content", "sub-trigger", "item", "group", "group-heading", "checkbox-group", "checkbox-item", "radio-group", "radio-item", "separator", "sub-content", "arrow"]>;
 declare class MenuRootState {
     readonly opts: MenuRootStateProps;
     isUsingKeyboard: IsUsingKeyboard;
     ignoreCloseAutoFocus: boolean;
     isPointerInTransit: boolean;
     constructor(opts: MenuRootStateProps);
-    getAttr(name: string): string;
+    getBitsAttr: typeof menuAttrs.getAttr;
 }
 type MenuMenuStateProps = WritableBoxedValues<{
     open: boolean;