bruh 1.13.0 → 2.0.0-beta.1

package/dist/components/intl/date-time.mjs

@@ -0,0 +1,219 @@
+import { jsx, bruhChildrenToNodes } from '../../browser.mjs';
+import { r } from '../../reactive.mjs';
+import { mapObject, attempt } from '../../utils.mjs';
+import { spaceSeparated } from '../utils.mjs';
+import { BruhCustomElementBase } from '../custom-elements.mjs';
+import { parseLocales, userLanguages, inferDirection } from './utils.mjs';
+
+const getTimeZoneOffset = (timeZone) => {
+  if (timeZone === void 0)
+    return (/* @__PURE__ */ new Date()).getTimezoneOffset();
+  const longOffset = new Intl.DateTimeFormat("en", {
+    timeZone,
+    timeZoneName: "longOffset"
+  }).formatToParts(/* @__PURE__ */ new Date()).find((part) => part.type === "timeZoneName")?.value;
+  if (!longOffset)
+    return;
+  if (longOffset === "GMT" || longOffset === "UTC")
+    return 0;
+  const [hoursUnparsed, minutesUnparsed] = longOffset.replace(/^(GMT|UTC)/, "").split(":");
+  const hoursParsed = parseInt(hoursUnparsed);
+  const minutesParsed = minutesUnparsed !== void 0 ? Math.sign(hoursParsed) * parseInt(minutesUnparsed) : 0;
+  const inMinutes = -1 * (hoursParsed * 60 + minutesParsed);
+  if (isFinite(inMinutes))
+    return inMinutes;
+};
+const currentTimeZone = () => new Intl.DateTimeFormat().resolvedOptions().timeZone;
+const localDateInUTC = (date, timeZone) => {
+  const offset = getTimeZoneOffset(timeZone);
+  if (offset === void 0)
+    return void 0;
+  return new Date(date - offset * 60 * 1e3);
+};
+const hideRedundantOptions = (originalFormatter, {
+  date,
+  endDate,
+  now = /* @__PURE__ */ new Date()
+}) => {
+  const resolvedOptions = originalFormatter.resolvedOptions();
+  const minimizedOptions = { ...resolvedOptions };
+  if (resolvedOptions.timeZone === currentTimeZone() || getTimeZoneOffset(resolvedOptions.timeZone) === getTimeZoneOffset())
+    delete minimizedOptions.timeZoneName;
+  if (resolvedOptions.calendar === "gregory") {
+    const timeZonedDate = localDateInUTC(date, resolvedOptions.timeZone);
+    if (timeZonedDate !== void 0) {
+      const dateYear = timeZonedDate.getUTCFullYear();
+      const dateMonth = timeZonedDate.getUTCMonth();
+      const dateDate = timeZonedDate.getUTCDate();
+      const timeZonedEndDate = endDate !== void 0 ? localDateInUTC(endDate, resolvedOptions.timeZone) : void 0;
+      const missingEndDate = timeZonedEndDate === void 0;
+      if (missingEndDate === (endDate === void 0)) {
+        const endDateYear = timeZonedEndDate?.getUTCFullYear();
+        const endDateMonth = timeZonedEndDate?.getUTCMonth();
+        const endDateDate = timeZonedEndDate?.getUTCDate();
+        const currentYear = now.getFullYear();
+        const currentMonth = now.getMonth();
+        const currentDate = now.getDate();
+        const dateSameEra = dateYear < 1 === currentYear < 1;
+        const endDateSameEra = missingEndDate || endDateYear < 1 === currentYear < 1;
+        if (dateSameEra && endDateSameEra) {
+          delete minimizedOptions.era;
+          const dateSameYear = dateYear === currentYear;
+          const endDateSameYear = missingEndDate || endDateYear === currentYear;
+          if (dateSameYear && endDateSameYear) {
+            delete minimizedOptions.year;
+            const dateSameMonthAndDate = dateMonth === currentMonth && dateDate === currentDate;
+            const endDateSameMonthAndDate = missingEndDate || endDateMonth === currentMonth && endDateDate === currentDate;
+            if (dateSameMonthAndDate && endDateSameMonthAndDate) {
+              delete minimizedOptions.month;
+              delete minimizedOptions.day;
+              delete minimizedOptions.weekday;
+            }
+          }
+        }
+      }
+    }
+  }
+  return new Intl.DateTimeFormat(resolvedOptions.locale, minimizedOptions);
+};
+const parseDate = (unparsed) => {
+  if (unparsed == void 0)
+    return;
+  if (unparsed === "")
+    return { type: "now" };
+  const date = new Date(unparsed);
+  if (isFinite(date))
+    return { type: "date", date };
+  const numberThenDate = new Date(Number(unparsed));
+  if (isFinite(numberThenDate))
+    return { type: "date", date: numberThenDate };
+  return { type: "unparsed", unparsed };
+};
+const optionToAttribute = {
+  // locale options
+  "localeMatcher": "locale-matcher",
+  "calendar": "calendar",
+  "numberingSystem": "numbering-system",
+  "hour12": "hour12",
+  "hourCycle": "hour-cycle",
+  "timeZone": "time-zone",
+  // style options
+  "weekday": "weekday",
+  "era": "era",
+  "year": "year",
+  "month": "month",
+  "day": "day",
+  "dayPeriod": "day-period",
+  "hour": "hour",
+  "minute": "minute",
+  "second": "second",
+  "fractionalSecondDigits": "fractional-second-digits",
+  "timeZoneName": "time-zone-name",
+  "formatMatcher": "format-matcher",
+  // style shortcuts
+  "dateStyle": "date-style",
+  "timeStyle": "time-style"
+};
+class BruhDateTime extends BruhCustomElementBase {
+  static observedAttributes = [
+    "date",
+    "end-date",
+    "locales",
+    "hide-redundant-options",
+    ...Object.values(optionToAttribute)
+  ];
+  static bruh = {
+    parseAttributes: {
+      date: parseDate,
+      "end-date": parseDate,
+      locales: spaceSeparated,
+      "hide-redundant-options": (v) => v != void 0
+    }
+  };
+  #locales;
+  #options;
+  #formatter;
+  #formatted;
+  constructor() {
+    super();
+    this.#locales = r(
+      [this.bruh.attributes.locales, userLanguages],
+      () => parseLocales([
+        ...this.bruh.attributes.locales.value ?? [],
+        ...userLanguages.value
+      ])
+    );
+    const optionToReactiveAttribute = mapObject(
+      optionToAttribute,
+      ([option, attribute]) => [option, this.bruh.attributes[attribute]]
+    );
+    this.#options = r(
+      Object.values(optionToReactiveAttribute),
+      () => mapObject(optionToReactiveAttribute, ([option, attribute]) => [option, attribute.value || void 0])
+    );
+    this.#formatter = r(
+      [this.#locales, this.#options],
+      () => attempt(() => new Intl.DateTimeFormat(this.#locales.value, this.#options.value)) ?? new Intl.DateTimeFormat(this.#locales.value)
+    );
+    const dateToFormat = this.bruh.attributes.date;
+    const rangeEndDateToFormat = this.bruh.attributes["end-date"];
+    const renderParts = (parts) => parts.map(
+      (part) => /* @__PURE__ */ jsx("span", { class: `bruh-date-time-part bruh-date-time-part--${part.type}`, children: part.value })
+    );
+    const renderSingle = (date, attributes) => {
+      if (date.type === "unparsed")
+        return /* @__PURE__ */ jsx("time", { ...attributes, datetime: date.unparsed, children: date.unparsed });
+      const value = date.type === "now" ? /* @__PURE__ */ new Date() : date.date;
+      const formatter = this.bruh.attributes["hide-redundant-options"].value ? hideRedundantOptions(this.#formatter.value, { date: value }) : this.#formatter.value;
+      const rendered = renderParts(formatter.formatToParts(value));
+      return /* @__PURE__ */ jsx("time", { ...attributes, datetime: value.toISOString(), children: rendered });
+    };
+    const renderRange = (start, end) => {
+      const canRenderRangeDirectly = "formatRangeToParts" in this.#formatter.value && start.type !== "unparsed" && end.type !== "unparsed";
+      if (!canRenderRangeDirectly)
+        return [
+          renderSingle(start, { class: "bruh-date-time-source bruh-date-time-source--startRange" }),
+          /* @__PURE__ */ jsx("span", { class: "bruh-date-time-source bruh-date-time-source--shared", children: /* @__PURE__ */ jsx("span", { class: "bruh-date-time-part bruh-date-time-part--literal", children: " – " }) }),
+          renderSingle(end, { class: "bruh-date-time-source bruh-date-time-source--endRange" })
+        ];
+      const startValue = start.type === "now" ? /* @__PURE__ */ new Date() : start.date;
+      const endValue = end.type === "now" ? /* @__PURE__ */ new Date() : end.date;
+      const formatter = this.bruh.attributes["hide-redundant-options"].value ? hideRedundantOptions(this.#formatter.value, { date: startValue, endDate: endValue }) : this.#formatter.value;
+      const parts = formatter.formatRangeToParts(startValue, endValue);
+      const bySource = parts.reduce((bySource2, part, i) => {
+        if (!i || parts[i - 1].source !== part.source)
+          bySource2.push([]);
+        bySource2[bySource2.length - 1].push(part);
+        return bySource2;
+      }, []);
+      return bySource.map((parts2) => {
+        const source = parts2[0].source;
+        const className = `bruh-date-time-source bruh-date-time-source--${source}`;
+        const rendered = renderParts(parts2);
+        if (source === "startRange" || source === "endRange" || source === "shared" && bySource.length === 1) {
+          const dateTime = source === "startRange" ? startValue : endValue;
+          return /* @__PURE__ */ jsx("time", { class: className, datetime: dateTime.toISOString(), children: rendered });
+        } else {
+          return /* @__PURE__ */ jsx("span", { class: className, children: rendered });
+        }
+      });
+    };
+    this.#formatted = r([this.#formatter, dateToFormat, rangeEndDateToFormat], () => {
+      if (!dateToFormat.value)
+        return;
+      const formatter = this.#formatter.value;
+      const { locale } = formatter.resolvedOptions();
+      const direction = inferDirection(locale);
+      const result = rangeEndDateToFormat.value ? renderRange(dateToFormat.value, rangeEndDateToFormat.value) : renderSingle(dateToFormat.value);
+      return /* @__PURE__ */ jsx("bdi", { lang: locale, dir: direction, children: result });
+    });
+  }
+  mountedCallback() {
+    const children = bruhChildrenToNodes([this.#formatted]);
+    this.replaceChildren(...children);
+  }
+}
+customElements.define("bruh-date-time", BruhDateTime);
+
+export { BruhDateTime, currentTimeZone, getTimeZoneOffset, hideRedundantOptions, localDateInUTC, parseDate };
+//# sourceMappingURL=date-time.mjs.map

package/dist/components/intl/date-time.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-time.mjs","sources":["../../../src/components/intl/date-time.tsx"],"sourcesContent":["/** @jsxImportSource bruh/browser */\nimport { bruhChildrenToNodes, type BruhProps } from \"bruh/browser\"\nimport { r } from \"../../reactive/index.mts\"\nimport { attempt, mapObject } from \"../../utils/index.mts\"\nimport { spaceSeparated } from \"../utils.mts\"\nimport { BruhCustomElementBase } from \"../custom-elements.mts\"\nimport { inferDirection, parseLocales, userLanguages } from \"./utils.mts\"\n\n// todo: reactive updating times / responding to current time using found setTimeout or requestAnimationFrame\n\n/**\n * In minutes from UTC/GMT, same as `new Date().getTimezoneOffset()`, but for any time zone\n *\n * `undefined` if unknown\n */\nexport const getTimeZoneOffset = (timeZone?: string) => {\n  if (timeZone === undefined)\n    return new Date().getTimezoneOffset()\n\n  const longOffset = new Intl.DateTimeFormat(\"en\", {\n    timeZone,\n    timeZoneName: \"longOffset\"\n  })\n    .formatToParts(new Date())\n    .find(part => part.type === \"timeZoneName\")?.value\n\n  if (!longOffset)\n    return\n\n  if (longOffset === \"GMT\" || longOffset === \"UTC\")\n    return 0\n\n  const [hoursUnparsed, minutesUnparsed] = longOffset.replace(/^(GMT|UTC)/, \"\").split(\":\")\n  const hoursParsed = parseInt(hoursUnparsed)\n  const minutesParsed =\n    minutesUnparsed !== undefined\n      ? Math.sign(hoursParsed) * parseInt(minutesUnparsed)\n      : 0\n\n  const inMinutes = -1 * (hoursParsed * 60 + minutesParsed)\n  if (isFinite(inMinutes))\n    return inMinutes\n}\n\nexport const currentTimeZone = () =>\n  new Intl.DateTimeFormat().resolvedOptions().timeZone\n\n/**\n * Makes a date that has a UTC time set to the input date's local time in the given time zone\n */\nexport const localDateInUTC = (date: Date | number, timeZone: string) => {\n  const offset = getTimeZoneOffset(timeZone)\n  if (offset === undefined)\n    return undefined\n\n  return new Date((date as number) - offset * 60 * 1_000)\n}\n\nexport const hideRedundantOptions = (\n  originalFormatter: Intl.DateTimeFormat,\n  {\n    date,\n    endDate,\n    now = new Date()\n  }: {\n    date: Date,\n    endDate?: Date,\n    now?: Date\n  }\n) => {\n  const resolvedOptions = originalFormatter.resolvedOptions() as Intl.ResolvedDateTimeFormatOptions & Intl.DateTimeFormatOptions\n  const minimizedOptions = { ...resolvedOptions }\n\n  if (resolvedOptions.timeZone === currentTimeZone() || getTimeZoneOffset(resolvedOptions.timeZone) === getTimeZoneOffset())\n    delete minimizedOptions.timeZoneName\n\n  // https://tc39.es/ecma402/#table-datetimeformat-tolocaltime-record\n  if (resolvedOptions.calendar === \"gregory\") {\n    const timeZonedDate = localDateInUTC(date, resolvedOptions.timeZone)\n    if (timeZonedDate !== undefined) {\n      const dateYear  = timeZonedDate.getUTCFullYear()\n      const dateMonth = timeZonedDate.getUTCMonth()\n      const dateDate  = timeZonedDate.getUTCDate()\n\n      const timeZonedEndDate =\n        endDate !== undefined\n          ? localDateInUTC(endDate, resolvedOptions.timeZone)\n          : undefined\n      const missingEndDate = timeZonedEndDate === undefined\n      if (missingEndDate === (endDate === undefined)) {\n        const endDateYear  = timeZonedEndDate?.getUTCFullYear()\n        const endDateMonth = timeZonedEndDate?.getUTCMonth()\n        const endDateDate  = timeZonedEndDate?.getUTCDate()\n\n        const currentYear  = now.getFullYear()\n        const currentMonth = now.getMonth()\n        const currentDate  = now.getDate()\n\n        const dateSameEra    =                       dateYear  < 1 === currentYear < 1\n        const endDateSameEra = missingEndDate || (endDateYear! < 1 === currentYear < 1)\n        if (dateSameEra && endDateSameEra) {\n          delete minimizedOptions.era\n\n          const dateSameYear    =                       dateYear  === currentYear\n          const endDateSameYear = missingEndDate || (endDateYear! === currentYear)\n          if (dateSameYear && endDateSameYear) {\n            delete minimizedOptions.year\n\n            const dateSameMonthAndDate    =                       dateMonth  === currentMonth &&    dateDate  === currentDate\n            const endDateSameMonthAndDate = missingEndDate || (endDateMonth! === currentMonth && endDateDate! === currentDate)\n            if (dateSameMonthAndDate && endDateSameMonthAndDate) {\n              delete minimizedOptions.month\n              delete minimizedOptions.day\n              delete minimizedOptions.weekday\n            }\n          }\n        }\n      }\n    }\n  }\n\n  return new Intl.DateTimeFormat(resolvedOptions.locale, minimizedOptions)\n}\n\nexport const parseDate = (unparsed?: string | null) => {\n  if (unparsed == undefined)\n    return\n\n  if (unparsed === \"\")\n    return { type: \"now\" } as const\n\n  const date = new Date(unparsed)\n  if (isFinite(date as any as number))\n    return { type: \"date\", date } as const\n\n  const numberThenDate = new Date(Number(unparsed))\n  if (isFinite(numberThenDate as any as number))\n    return { type: \"date\", date: numberThenDate } as const\n\n  return { type: \"unparsed\", unparsed } as const\n}\n\nexport type ParsedDate = ReturnType<typeof parseDate>\n\nconst optionToAttribute = {\n  // locale options\n  \"localeMatcher\": \"locale-matcher\",\n  \"calendar\": \"calendar\",\n  \"numberingSystem\": \"numbering-system\",\n  \"hour12\": \"hour12\",\n  \"hourCycle\": \"hour-cycle\",\n  \"timeZone\": \"time-zone\",\n  // style options\n  \"weekday\": \"weekday\",\n  \"era\": \"era\",\n  \"year\": \"year\",\n  \"month\": \"month\",\n  \"day\": \"day\",\n  \"dayPeriod\": \"day-period\",\n  \"hour\": \"hour\",\n  \"minute\": \"minute\",\n  \"second\": \"second\",\n  \"fractionalSecondDigits\": \"fractional-second-digits\",\n  \"timeZoneName\": \"time-zone-name\",\n  \"formatMatcher\": \"format-matcher\",\n  // style shortcuts\n  \"dateStyle\": \"date-style\",\n  \"timeStyle\": \"time-style\"\n} as const\n\ntype BruhDateTimeAttributes = {\n  \"date\"?: ParsedDate,\n  \"end-date\"?: ParsedDate,\n  \"locales\"?: ReadonlyArray<Intl.UnicodeBCP47LocaleIdentifier>,\n  \"hide-redundant-options\"?: boolean,\n  \"locale-matcher\"?: Intl.DateTimeFormatOptions[\"localeMatcher\"],\n  \"calendar\"?: Intl.DateTimeFormatOptions[\"calendar\"],\n  \"numbering-system\"?: Intl.DateTimeFormatOptions[\"numberingSystem\"],\n  \"hour12\"?: Intl.DateTimeFormatOptions[\"hour12\"],\n  \"hour-cycle\"?: Intl.DateTimeFormatOptions[\"hourCycle\"],\n  \"time-zone\"?: Intl.DateTimeFormatOptions[\"timeZone\"],\n  \"weekday\"?: Intl.DateTimeFormatOptions[\"weekday\"],\n  \"era\"?: Intl.DateTimeFormatOptions[\"era\"],\n  \"year\"?: Intl.DateTimeFormatOptions[\"year\"],\n  \"month\"?: Intl.DateTimeFormatOptions[\"month\"],\n  \"day\"?: Intl.DateTimeFormatOptions[\"day\"],\n  \"day-period\"?: Intl.DateTimeFormatOptions[\"dayPeriod\"],\n  \"hour\"?: Intl.DateTimeFormatOptions[\"hour\"],\n  \"minute\"?: Intl.DateTimeFormatOptions[\"minute\"],\n  \"second\"?: Intl.DateTimeFormatOptions[\"second\"],\n  \"fractional-second-digits\"?: Intl.DateTimeFormatOptions[\"fractionalSecondDigits\"],\n  \"time-zone-name\"?: Intl.DateTimeFormatOptions[\"timeZoneName\"],\n  \"format-matcher\"?: Intl.DateTimeFormatOptions[\"formatMatcher\"],\n  \"date-style\"?: Intl.DateTimeFormatOptions[\"dateStyle\"],\n  \"time-style\"?: Intl.DateTimeFormatOptions[\"timeStyle\"]\n}\n\nexport class BruhDateTime extends BruhCustomElementBase<BruhDateTimeAttributes> {\n  static observedAttributes = [\n    \"date\",\n    \"end-date\",\n    \"locales\",\n    \"hide-redundant-options\",\n    ...Object.values(optionToAttribute)\n  ]\n\n  static bruh = {\n    parseAttributes: {\n      date: parseDate,\n      \"end-date\": parseDate,\n      locales: spaceSeparated,\n      \"hide-redundant-options\": (v?: string | null) => v != undefined\n    }\n  }\n\n  #locales\n  #options\n  #formatter\n  #formatted\n\n  constructor() {\n    super()\n\n    this.#locales = r([this.bruh.attributes.locales, userLanguages], () =>\n      parseLocales([\n        ...this.bruh.attributes.locales.value ?? [],\n        ...userLanguages.value\n      ])\n    )\n\n    const optionToReactiveAttribute = mapObject(optionToAttribute,\n      ([option, attribute]) => [option, this.bruh.attributes[attribute]]\n    )\n    this.#options = r(Object.values(optionToReactiveAttribute), () =>\n      mapObject(optionToReactiveAttribute, ([option, attribute]) => [option, attribute.value || undefined]) as Partial<Intl.DateTimeFormatOptions>\n    )\n\n    this.#formatter = r([this.#locales, this.#options], () =>\n      attempt(() => new Intl.DateTimeFormat(this.#locales.value, this.#options.value))\n        ?? new Intl.DateTimeFormat(this.#locales.value)\n    )\n\n    const dateToFormat = this.bruh.attributes.date\n    const rangeEndDateToFormat = this.bruh.attributes[\"end-date\"]\n\n    const renderParts = (parts: ReadonlyArray<Intl.DateTimeFormatPart>) =>\n      parts.map(part =>\n        <span class={`bruh-date-time-part bruh-date-time-part--${part.type}`}>{part.value}</span> as HTMLSpanElement\n      )\n\n    const renderSingle = (\n      date: NonNullable<ParsedDate>,\n      attributes?: BruhProps<\"time\">\n    ) => {\n      if (date.type === \"unparsed\")\n        return <time {...attributes} datetime={date.unparsed}>{date.unparsed}</time> as HTMLTimeElement\n\n      const value =\n        date.type === \"now\"\n          ? new Date()\n          : date.date\n\n      const formatter =\n        this.bruh.attributes[\"hide-redundant-options\"].value\n          ? hideRedundantOptions(this.#formatter.value, { date: value })\n          : this.#formatter.value\n\n      const rendered = renderParts(formatter.formatToParts(value))\n      return <time {...attributes} datetime={value.toISOString()}>{rendered}</time> as HTMLTimeElement\n    }\n\n    const renderRange = (start: NonNullable<ParsedDate>, end: NonNullable<ParsedDate>) => {\n      const canRenderRangeDirectly =\n        \"formatRangeToParts\" in this.#formatter.value\n        && start.type !== \"unparsed\"\n        && end.type   !== \"unparsed\"\n      if (!canRenderRangeDirectly)\n        return [\n          renderSingle(start, { class: \"bruh-date-time-source bruh-date-time-source--startRange\" }),\n          <span class=\"bruh-date-time-source bruh-date-time-source--shared\">\n            <span class=\"bruh-date-time-part bruh-date-time-part--literal\"> – </span>\n          </span> as HTMLSpanElement,\n          renderSingle(end, { class: \"bruh-date-time-source bruh-date-time-source--endRange\" })\n        ]\n\n      const startValue =\n        start.type === \"now\"\n          ? new Date()\n          : start.date\n      const endValue =\n        end.type === \"now\"\n          ? new Date()\n          : end.date\n\n      const formatter =\n        this.bruh.attributes[\"hide-redundant-options\"].value\n          ? hideRedundantOptions(this.#formatter.value, { date: startValue, endDate: endValue })\n          : this.#formatter.value\n\n      const parts = formatter.formatRangeToParts(startValue, endValue)\n      const bySource = parts.reduce<Intl.DateTimeRangeFormatPart[][]>((bySource, part, i) => {\n        if (!i || parts[i - 1].source !== part.source)\n          bySource.push([])\n        bySource[bySource.length - 1].push(part)\n        return bySource\n      }, [])\n      return bySource.map(parts => {\n        const source = parts[0].source\n        const className = `bruh-date-time-source bruh-date-time-source--${source}`\n        const rendered = renderParts(parts)\n        if (source === \"startRange\" || source === \"endRange\" || (source === \"shared\" && bySource.length === 1)) {\n          const dateTime =\n            source === \"startRange\"\n              ? startValue\n              : endValue\n          return <time class={className} datetime={dateTime.toISOString()}>{rendered}</time> as HTMLTimeElement\n        }\n        else {\n          return <span class={className}>{rendered}</span> as HTMLSpanElement\n        }\n      })\n    }\n\n    this.#formatted = r([this.#formatter, dateToFormat, rangeEndDateToFormat], () => {\n      if (!dateToFormat.value)\n        return\n\n      const formatter = this.#formatter.value\n      const { locale } = formatter.resolvedOptions()\n      const direction = inferDirection(locale)\n\n      const result =\n        rangeEndDateToFormat.value\n          ? renderRange(dateToFormat.value, rangeEndDateToFormat.value)\n          : renderSingle(dateToFormat.value)\n\n      return <bdi lang={locale} dir={direction}>{result}</bdi> as HTMLElement\n    })\n  }\n\n  mountedCallback() {\n    const children = bruhChildrenToNodes([this.#formatted])\n    this.replaceChildren(...children)\n  }\n}\n\ncustomElements.define(\"bruh-date-time\", BruhDateTime)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"bruh-date-time\": BruhDateTime\n  }\n}\ndeclare module \"html-info\" {\n  interface HTMLTagToAttributes {\n    \"bruh-date-time\": {\n      \"date\"?: string\n      \"end-date\"?: string\n      /**\n       * Space separated list of locales\n       */\n      \"locales\"?: string,\n      \"hide-redundant-options\"?: boolean,\n      \"locale-matcher\"?: Intl.DateTimeFormatOptions[\"localeMatcher\"],\n      \"calendar\"?: Intl.DateTimeFormatOptions[\"calendar\"],\n      \"numbering-system\"?: Intl.DateTimeFormatOptions[\"numberingSystem\"],\n      \"hour12\"?: Intl.DateTimeFormatOptions[\"hour12\"],\n      \"hour-cycle\"?: Intl.DateTimeFormatOptions[\"hourCycle\"],\n      \"time-zone\"?: Intl.DateTimeFormatOptions[\"timeZone\"],\n      \"weekday\"?: Intl.DateTimeFormatOptions[\"weekday\"],\n      \"era\"?: Intl.DateTimeFormatOptions[\"era\"],\n      \"year\"?: Intl.DateTimeFormatOptions[\"year\"],\n      \"month\"?: Intl.DateTimeFormatOptions[\"month\"],\n      \"day\"?: Intl.DateTimeFormatOptions[\"day\"],\n      \"day-period\"?: Intl.DateTimeFormatOptions[\"dayPeriod\"],\n      \"hour\"?: Intl.DateTimeFormatOptions[\"hour\"],\n      \"minute\"?: Intl.DateTimeFormatOptions[\"minute\"],\n      \"second\"?: Intl.DateTimeFormatOptions[\"second\"],\n      \"fractional-second-digits\"?: Intl.DateTimeFormatOptions[\"fractionalSecondDigits\"] | `${Intl.DateTimeFormatOptions[\"fractionalSecondDigits\"]}`,\n      \"time-zone-name\"?: Intl.DateTimeFormatOptions[\"timeZoneName\"],\n      \"format-matcher\"?: Intl.DateTimeFormatOptions[\"formatMatcher\"],\n      \"date-style\"?: Intl.DateTimeFormatOptions[\"dateStyle\"],\n      \"time-style\"?: Intl.DateTimeFormatOptions[\"timeStyle\"]\n    }\n  }\n}\n"],"names":["bySource","parts"],"mappings":"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"}

package/dist/components/intl/display-name.mjs

@@ -0,0 +1,71 @@
+import { jsx, bruhChildrenToNodes } from '../../browser.mjs';
+import { r } from '../../reactive.mjs';
+import { mapObject, attempt } from '../../utils.mjs';
+import { spaceSeparated } from '../utils.mjs';
+import { BruhCustomElementBase } from '../custom-elements.mjs';
+import { parseLocales, userLanguages, inferDirection, languageDisplayName } from './utils.mjs';
+
+const optionToAttribute = {
+  localeMatcher: "locale-matcher",
+  style: "format-style",
+  type: "type",
+  languageDisplay: "language-display"
+};
+class BruhDisplayName extends BruhCustomElementBase {
+  static observedAttributes = [
+    "code",
+    "locales",
+    ...Object.values(optionToAttribute)
+  ];
+  static bruh = {
+    parseAttributes: {
+      locales: spaceSeparated
+    }
+  };
+  #locales;
+  #options;
+  #formatter;
+  #formatted;
+  constructor() {
+    super();
+    this.#locales = r(
+      [this.bruh.attributes.locales, userLanguages],
+      () => parseLocales([
+        ...this.bruh.attributes.locales.value ?? [],
+        ...userLanguages.value
+      ])
+    );
+    const optionToReactiveAttribute = mapObject(
+      optionToAttribute,
+      ([option, attribute]) => [option, this.bruh.attributes[attribute]]
+    );
+    this.#options = r(
+      Object.values(optionToReactiveAttribute),
+      () => mapObject(optionToReactiveAttribute, ([option, attribute]) => [option, attribute.value || void 0])
+    );
+    this.#formatter = r(
+      [this.#locales, this.#options],
+      () => attempt(
+        () => new Intl.DisplayNames(this.#locales.value, this.#options.value)
+      )
+    );
+    this.#formatted = r([this.#formatter, this.bruh.attributes.code], () => {
+      const formatter = this.#formatter.value;
+      const code = this.bruh.attributes.code.value;
+      if (!formatter || !code)
+        return;
+      const { locale, type } = formatter.resolvedOptions();
+      const direction = inferDirection(locale);
+      const value = type === "language" ? languageDisplayName(formatter, code) : attempt(() => formatter.of(code)) ?? code;
+      return /* @__PURE__ */ jsx("bdi", { lang: locale, dir: direction, children: value });
+    });
+  }
+  mountedCallback() {
+    const children = bruhChildrenToNodes([this.#formatted]);
+    this.replaceChildren(...children);
+  }
+}
+customElements.define("bruh-display-name", BruhDisplayName);
+
+export { BruhDisplayName };
+//# sourceMappingURL=display-name.mjs.map

package/dist/components/intl/display-name.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"display-name.mjs","sources":["../../../src/components/intl/display-name.tsx"],"sourcesContent":["/** @jsxImportSource bruh/browser */\nimport { bruhChildrenToNodes } from \"bruh/browser\"\nimport { r } from \"../../reactive/index.mts\"\nimport { attempt, mapObject } from \"../../utils/index.mts\"\nimport { spaceSeparated } from \"../utils.mts\"\nimport { BruhCustomElementBase } from \"../custom-elements.mts\"\nimport { inferDirection, languageDisplayName, parseLocales, userLanguages } from \"./utils.mts\"\n\nconst optionToAttribute = {\n  localeMatcher: \"locale-matcher\",\n  style: \"format-style\",\n  type: \"type\",\n  languageDisplay: \"language-display\"\n} as const\n\ntype BruhDisplayNameAttributes = {\n  \"code\"?: string,\n  \"locales\"?: ReadonlyArray<Intl.UnicodeBCP47LocaleIdentifier>,\n  \"locale-matcher\"?: Intl.DisplayNamesOptions[\"localeMatcher\"],\n  \"format-style\"?: Intl.DisplayNamesOptions[\"style\"],\n  \"type\"?: Intl.DisplayNamesOptions[\"type\"],\n  \"language-display\"?: Intl.DisplayNamesOptions[\"languageDisplay\"]\n}\n\nexport class BruhDisplayName extends BruhCustomElementBase<BruhDisplayNameAttributes> {\n  static observedAttributes = [\n    \"code\",\n    \"locales\",\n    ...Object.values(optionToAttribute)\n  ] as const\n\n  static bruh = {\n    parseAttributes: {\n      locales: spaceSeparated\n    }\n  }\n\n  #locales\n  #options\n  #formatter\n  #formatted\n\n  constructor() {\n    super()\n\n    this.#locales = r([this.bruh.attributes.locales, userLanguages], () =>\n      parseLocales([\n        ...this.bruh.attributes.locales.value ?? [],\n        ...userLanguages.value\n      ])\n    )\n\n    const optionToReactiveAttribute = mapObject(optionToAttribute,\n      ([option, attribute]) => [option, this.bruh.attributes[attribute]]\n    )\n    this.#options = r(Object.values(optionToReactiveAttribute), () =>\n      mapObject(optionToReactiveAttribute, ([option, attribute]) => [option, attribute.value || undefined]) as Partial<Intl.DisplayNamesOptions>\n    )\n\n    this.#formatter = r([this.#locales, this.#options], () =>\n      attempt(() =>\n        new Intl.DisplayNames(this.#locales.value, this.#options.value as any)\n      )\n    )\n\n    this.#formatted = r([this.#formatter, this.bruh.attributes.code], () => {\n      const formatter = this.#formatter.value\n      const code = this.bruh.attributes.code.value\n      if (!formatter || !code)\n        return\n\n      const { locale, type } = formatter.resolvedOptions()\n      const direction = inferDirection(locale)\n\n      const value =\n        type === \"language\"\n          ? languageDisplayName(formatter, code)\n          : attempt(() => formatter.of(code)) ?? code\n\n      return <bdi lang={locale} dir={direction}>{value}</bdi> as HTMLElement\n    })\n  }\n\n  mountedCallback() {\n    const children = bruhChildrenToNodes([this.#formatted])\n    this.replaceChildren(...children)\n  }\n}\n\ncustomElements.define(\"bruh-display-name\", BruhDisplayName)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"bruh-display-name\": BruhDisplayName\n  }\n}\ndeclare module \"html-info\" {\n  interface HTMLTagToAttributes {\n    \"bruh-display-name\": {\n      \"code\": string,\n      /**\n       * Space separated list of locales\n       */\n      \"locales\"?: string,\n      \"locale-matcher\"?: Intl.DisplayNamesOptions[\"localeMatcher\"],\n      \"format-style\"?: Intl.DisplayNamesOptions[\"style\"],\n      \"type\": Intl.DisplayNamesOptions[\"type\"],\n      \"language-display\"?: Intl.DisplayNamesOptions[\"languageDisplay\"]\n    }\n  }\n}\n"],"names":[],"mappings":";;;;;;;AAQA,MAAM,iBAAoB,GAAA;AAAA,EACxB,aAAe,EAAA,gBAAA;AAAA,EACf,KAAO,EAAA,cAAA;AAAA,EACP,IAAM,EAAA,MAAA;AAAA,EACN,eAAiB,EAAA;AACnB,CAAA;AAWO,MAAM,wBAAwB,qBAAiD,CAAA;AAAA,EACpF,OAAO,kBAAqB,GAAA;AAAA,IAC1B,MAAA;AAAA,IACA,SAAA;AAAA,IACA,GAAG,MAAO,CAAA,MAAA,CAAO,iBAAiB;AAAA,GACpC;AAAA,EAEA,OAAO,IAAO,GAAA;AAAA,IACZ,eAAiB,EAAA;AAAA,MACf,OAAS,EAAA;AAAA;AACX,GACF;AAAA,EAEA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA;AAAA,EACA,UAAA;AAAA,EAEA,WAAc,GAAA;AACZ,IAAM,KAAA,EAAA;AAEN,IAAA,IAAA,CAAK,QAAW,GAAA,CAAA;AAAA,MAAE,CAAC,IAAA,CAAK,IAAK,CAAA,UAAA,CAAW,SAAS,aAAa,CAAA;AAAA,MAAG,MAC/D,YAAa,CAAA;AAAA,QACX,GAAG,IAAK,CAAA,IAAA,CAAK,UAAW,CAAA,OAAA,CAAQ,SAAS,EAAC;AAAA,QAC1C,GAAG,aAAc,CAAA;AAAA,OAClB;AAAA,KACH;AAEA,IAAA,MAAM,yBAA4B,GAAA,SAAA;AAAA,MAAU,iBAAA;AAAA,MAC1C,CAAC,CAAC,MAAA,EAAQ,SAAS,CAAA,KAAM,CAAC,MAAA,EAAQ,IAAK,CAAA,IAAA,CAAK,UAAW,CAAA,SAAS,CAAC;AAAA,KACnE;AACA,IAAA,IAAA,CAAK,QAAW,GAAA,CAAA;AAAA,MAAE,MAAA,CAAO,OAAO,yBAAyB,CAAA;AAAA,MAAG,MAC1D,SAAA,CAAU,yBAA2B,EAAA,CAAC,CAAC,MAAA,EAAQ,SAAS,CAAA,KAAM,CAAC,MAAA,EAAQ,SAAU,CAAA,KAAA,IAAS,MAAS,CAAC;AAAA,KACtG;AAEA,IAAA,IAAA,CAAK,UAAa,GAAA,CAAA;AAAA,MAAE,CAAC,IAAA,CAAK,QAAU,EAAA,IAAA,CAAK,QAAQ,CAAA;AAAA,MAAG,MAClD,OAAA;AAAA,QAAQ,MACN,IAAI,IAAK,CAAA,YAAA,CAAa,KAAK,QAAS,CAAA,KAAA,EAAO,IAAK,CAAA,QAAA,CAAS,KAAY;AAAA;AACvE,KACF;AAEA,IAAK,IAAA,CAAA,UAAA,GAAa,CAAE,CAAA,CAAC,IAAK,CAAA,UAAA,EAAY,KAAK,IAAK,CAAA,UAAA,CAAW,IAAI,CAAA,EAAG,MAAM;AACtE,MAAM,MAAA,SAAA,GAAY,KAAK,UAAW,CAAA,KAAA;AAClC,MAAA,MAAM,IAAO,GAAA,IAAA,CAAK,IAAK,CAAA,UAAA,CAAW,IAAK,CAAA,KAAA;AACvC,MAAI,IAAA,CAAC,aAAa,CAAC,IAAA;AACjB,QAAA;AAEF,MAAA,MAAM,EAAE,MAAA,EAAQ,IAAK,EAAA,GAAI,UAAU,eAAgB,EAAA;AACnD,MAAM,MAAA,SAAA,GAAY,eAAe,MAAM,CAAA;AAEvC,MAAA,MAAM,KACJ,GAAA,IAAA,KAAS,UACL,GAAA,mBAAA,CAAoB,SAAW,EAAA,IAAI,CACnC,GAAA,OAAA,CAAQ,MAAM,SAAA,CAAU,EAAG,CAAA,IAAI,CAAC,CAAK,IAAA,IAAA;AAE3C,MAAA,2BAAQ,KAAI,EAAA,EAAA,IAAA,EAAM,MAAQ,EAAA,GAAA,EAAK,WAAY,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,KAClD,CAAA;AAAA;AACH,EAEA,eAAkB,GAAA;AAChB,IAAA,MAAM,QAAW,GAAA,mBAAA,CAAoB,CAAC,IAAA,CAAK,UAAU,CAAC,CAAA;AACtD,IAAK,IAAA,CAAA,eAAA,CAAgB,GAAG,QAAQ,CAAA;AAAA;AAEpC;AAEA,cAAe,CAAA,MAAA,CAAO,qBAAqB,eAAe,CAAA;;;;"}

package/dist/components/intl/language-picker.mjs

@@ -0,0 +1,102 @@
+import { jsx, Fragment } from '../../browser.mjs';
+import { r } from '../../reactive.mjs';
+import { spaceSeparated } from '../utils.mjs';
+import { BruhCustomElementBase } from '../custom-elements.mjs';
+import { userLanguages, parseLocales, languagePickerLanguages, inferDirection, bestAvailableLocales, languageDisplayName } from './utils.mjs';
+
+const userLanguageDisplayNames = r(
+  [userLanguages],
+  () => new Intl.DisplayNames(userLanguages.value, { type: "language" })
+);
+const SelectLanguage = ({
+  languages,
+  name = "language"
+}) => {
+  const options = r([languages, userLanguages, userLanguageDisplayNames], () => {
+    const currentLanguage = userLanguageDisplayNames.value.resolvedOptions().locale;
+    const currentDirection = inferDirection(currentLanguage);
+    const { matches, alsoAvailable } = bestAvailableLocales(languages.value, userLanguages.value);
+    const makeOption = (language) => {
+      const nativeNameSupported = Intl.DisplayNames.supportedLocalesOf(language).length > 0;
+      return {
+        native: {
+          name: nativeNameSupported ? languageDisplayName(new Intl.DisplayNames(language, { type: "language" }), language) : void 0,
+          language: language + "",
+          direction: inferDirection(language)
+        },
+        current: {
+          name: languageDisplayName(userLanguageDisplayNames.value, language),
+          language: currentLanguage,
+          direction: currentDirection
+        }
+      };
+    };
+    const { compare } = new Intl.Collator(userLanguages.value, { usage: "sort" });
+    return {
+      matches: matches.map(makeOption),
+      alsoAvailable: alsoAvailable.map(makeOption).sort((a, b) => {
+        const aName = a.native.name ?? a.current.name;
+        const bName = b.native.name ?? b.current.name;
+        return compare(aName, bName);
+      })
+    };
+  });
+  const selectOptions = r([options], () => {
+    const makeOptionElement = ({ native, current }) => {
+      const currentElement = /* @__PURE__ */ jsx("bdi", { lang: current.language, dir: current.direction, children: current.name });
+      let friendly;
+      if (native.name === void 0 || native.name === current.name)
+        friendly = currentElement;
+      else {
+        const nativeElement = /* @__PURE__ */ jsx("bdi", { lang: native.language, dir: native.direction, children: native.name });
+        friendly = /* @__PURE__ */ jsx(Fragment, { children: [
+          nativeElement,
+          " — ",
+          currentElement
+        ] });
+      }
+      const isSelected = r([userLanguages], () => native.language === userLanguages.value[0] + "" || void 0);
+      const directionOverride = native.name && native.direction !== current.direction ? native.direction : void 0;
+      const option = /* @__PURE__ */ jsx("option", { value: native.language, selected: isSelected, dir: directionOverride, children: friendly });
+      return option;
+    };
+    const matches = options.value.matches.map(makeOptionElement);
+    const alsoAvailable = options.value.alsoAvailable.map(makeOptionElement);
+    if (matches.length && alsoAvailable.length)
+      return [...matches, /* @__PURE__ */ jsx("hr", {}), ...alsoAvailable];
+    else
+      return [...matches, ...alsoAvailable];
+  });
+  const select = /* @__PURE__ */ jsx("select", { name, children: selectOptions });
+  return select;
+};
+class BruhLanguagePicker extends BruhCustomElementBase {
+  static observedAttributes = ["languages"];
+  static bruh = {
+    parseAttributes: {
+      languages: spaceSeparated
+    }
+  };
+  #languages = r([this.bruh.attributes.languages], () => parseLocales(this.bruh.attributes.languages.value));
+  #select;
+  constructor() {
+    super();
+    this.#select = /* @__PURE__ */ jsx(SelectLanguage, { languages: this.#languages });
+    this.#select.addEventListener("change", () => {
+      languagePickerLanguages.value = parseLocales([this.#select.value]);
+      localStorage.setItem(
+        "bruh-language-picker-languages",
+        JSON.stringify(
+          languagePickerLanguages.value.map((language) => language + "")
+        )
+      );
+    });
+  }
+  mountedCallback() {
+    this.replaceChildren(this.#select);
+  }
+}
+customElements.define("bruh-language-picker", BruhLanguagePicker);
+
+export { BruhLanguagePicker };
+//# sourceMappingURL=language-picker.mjs.map

package/dist/components/intl/language-picker.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"language-picker.mjs","sources":["../../../src/components/intl/language-picker.tsx"],"sourcesContent":["/** @jsxImportSource bruh/browser */\nimport type { BruhChild } from \"bruh/browser\"\nimport { r, type FunctionalReactive } from \"../../reactive/index.mts\"\nimport { spaceSeparated } from \"../utils.mts\"\nimport { BruhCustomElementBase } from \"../custom-elements.mts\"\nimport { inferDirection, languageDisplayName, bestAvailableLocales, parseLocales, userLanguages, languagePickerLanguages, type InputLocale } from \"./utils.mts\"\n\nconst userLanguageDisplayNames = r([userLanguages], () =>\n  new Intl.DisplayNames(userLanguages.value, { type: \"language\" })\n)\n\ntype Option = {\n  native: {\n    name: string | undefined,\n    language: string,\n    direction: \"ltr\" | \"rtl\" | undefined\n  },\n  current: {\n    name: string,\n    language: string,\n    direction: \"ltr\" | \"rtl\" | undefined\n  }\n}\n\nconst SelectLanguage = (\n  {\n    languages,\n    name = \"language\"\n  }: {\n    languages: FunctionalReactive<ReadonlyArray<InputLocale>>,\n    name?: string\n  }\n) => {\n  const options = r([languages, userLanguages, userLanguageDisplayNames], () => {\n    const currentLanguage = userLanguageDisplayNames.value.resolvedOptions().locale\n    const currentDirection = inferDirection(currentLanguage)\n\n    const { matches, alsoAvailable } = bestAvailableLocales(languages.value, userLanguages.value)\n\n    const makeOption = (language: Intl.Locale): Option => {\n      const nativeNameSupported = Intl.DisplayNames.supportedLocalesOf(language).length > 0\n      return {\n        native: {\n          name:\n            nativeNameSupported\n              ? languageDisplayName(new Intl.DisplayNames(language, { type: \"language\" }), language)\n              : undefined,\n          language: language + \"\",\n          direction: inferDirection(language)\n        },\n        current: {\n          name: languageDisplayName(userLanguageDisplayNames.value, language),\n          language: currentLanguage,\n          direction: currentDirection\n        }\n      }\n    }\n\n    const { compare } = new Intl.Collator(userLanguages.value, { usage: \"sort\" })\n\n    return {\n      matches: matches.map(makeOption),\n      alsoAvailable: alsoAvailable.map(makeOption)\n        .sort((a, b) => {\n          const aName = a.native.name ?? a.current.name\n          const bName = b.native.name ?? b.current.name\n          return compare(aName, bName)\n        })\n    }\n  })\n\n  const selectOptions = r([options], () => {\n    const makeOptionElement = ({ native, current }: Option) => {\n      const currentElement = <bdi lang={current.language} dir={current.direction}>{current.name}</bdi> as HTMLElement\n\n      let friendly: BruhChild\n      if (native.name === undefined || native.name === current.name)\n        friendly = currentElement\n      else {\n        const nativeElement = <bdi lang={native.language} dir={native.direction}>{native.name}</bdi> as HTMLElement\n        friendly = <>{nativeElement} — {currentElement}</>\n      }\n\n      const isSelected = r([userLanguages], () => native.language === userLanguages.value[0] + \"\" || undefined)\n\n      const directionOverride =\n        native.name && native.direction !== current.direction\n          ? native.direction\n          : undefined\n\n      const option =\n        <option value={native.language} selected={isSelected} dir={directionOverride}>\n          {friendly}\n        </option> as HTMLOptionElement\n\n      return option\n    }\n\n    const matches = options.value.matches.map(makeOptionElement)\n    const alsoAvailable = options.value.alsoAvailable.map(makeOptionElement)\n\n    if (matches.length && alsoAvailable.length)\n      return [...matches, <hr /> as HTMLHRElement, ...alsoAvailable]\n    else\n      return [...matches, ...alsoAvailable]\n  })\n\n  const select =\n    <select name={name}>\n      {selectOptions}\n    </select>\n\n  return select\n}\n\ntype BruhLanguagePickerAttributes = {\n  \"languages\": ReadonlyArray<Intl.Locale>\n}\n\nexport class BruhLanguagePicker extends BruhCustomElementBase<BruhLanguagePickerAttributes> {\n  static observedAttributes = [\"languages\"]\n\n  static bruh = {\n    parseAttributes: {\n      languages: spaceSeparated\n    }\n  }\n\n  #languages = r([this.bruh.attributes.languages], () => parseLocales(this.bruh.attributes.languages.value))\n\n  #select\n\n  constructor() {\n    super()\n\n    this.#select = <SelectLanguage languages={this.#languages} />\n    this.#select.addEventListener(\"change\", () => {\n      languagePickerLanguages.value = parseLocales([this.#select.value])\n      localStorage.setItem(\n        \"bruh-language-picker-languages\",\n        JSON.stringify(\n          languagePickerLanguages.value\n            .map(language => language + \"\")\n        )\n      )\n    })\n  }\n\n  mountedCallback() {\n    this.replaceChildren(this.#select)\n  }\n}\n\ncustomElements.define(\"bruh-language-picker\", BruhLanguagePicker)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"bruh-language-picker\": BruhLanguagePicker\n  }\n}\ndeclare module \"html-info\" {\n  interface HTMLTagToAttributes {\n    \"bruh-language-picker\": {\n      /**\n       * Space separated list of locales\n       */\n      \"languages\": string\n    }\n  }\n}\n"],"names":["jsxs"],"mappings":"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"}

package/dist/components/intl/list.mjs

@@ -0,0 +1,80 @@
+import { jsx, bruhChildrenToNodes } from '../../browser.mjs';
+import { r } from '../../reactive.mjs';
+import { mapObject, attempt } from '../../utils.mjs';
+import { spaceSeparated } from '../utils.mjs';
+import { BruhCustomElementBase } from '../custom-elements.mjs';
+import { parseLocales, userLanguages, inferDirection } from './utils.mjs';
+
+const optionToAttribute = {
+  "locale-matcher": "locale-matcher",
+  "type": "type",
+  "style": "format-style"
+};
+class BruhList extends BruhCustomElementBase {
+  static observedAttributes = [
+    "locales",
+    ...Object.values(optionToAttribute)
+  ];
+  static bruh = {
+    parseAttributes: {
+      locales: spaceSeparated
+    }
+  };
+  #locales;
+  #options;
+  #formatter;
+  #itemSlotNames = r();
+  #formatted;
+  constructor() {
+    super();
+    this.#locales = r(
+      [this.bruh.attributes.locales, userLanguages],
+      () => parseLocales([
+        ...this.bruh.attributes.locales.value ?? [],
+        ...userLanguages.value
+      ])
+    );
+    const optionToReactiveAttribute = mapObject(
+      optionToAttribute,
+      ([option, attribute]) => [option, this.bruh.attributes[attribute]]
+    );
+    this.#options = r(
+      Object.values(optionToReactiveAttribute),
+      () => mapObject(optionToReactiveAttribute, ([option, attribute]) => [option, attribute.value || void 0])
+    );
+    this.#formatter = r(
+      [this.#locales, this.#options],
+      () => attempt(() => new Intl.ListFormat(this.#locales.value, this.#options.value)) ?? new Intl.ListFormat(this.#locales.value)
+    );
+    const renderParts = (parts) => parts.map((part) => {
+      const partAttribute = `part ${part.type}`;
+      return part.type === "element" ? /* @__PURE__ */ jsx("bdi", { part: partAttribute, role: "listitem", children: /* @__PURE__ */ jsx("slot", { name: part.value }) }) : /* @__PURE__ */ jsx("span", { part: partAttribute, children: part.value });
+    });
+    this.#formatted = r([this.#formatter, this.#itemSlotNames], () => {
+      if (!this.#itemSlotNames.value)
+        return;
+      const formatter = this.#formatter.value;
+      const { locale } = formatter.resolvedOptions();
+      const direction = inferDirection(locale);
+      const result = renderParts(formatter.formatToParts(this.#itemSlotNames.value));
+      return /* @__PURE__ */ jsx("bdi", { lang: locale, dir: direction, role: "list", children: result });
+    });
+    const shadowContent = bruhChildrenToNodes([this.#formatted]);
+    this.attachShadow({ mode: "open" }).append(...shadowContent);
+  }
+  mountedCallback() {
+    const assignSlots = () => {
+      this.#itemSlotNames.value = [...this.children].map((child, i) => {
+        const slot = "" + (i + 1);
+        child.slot = slot;
+        return slot;
+      });
+    };
+    assignSlots();
+    new MutationObserver(assignSlots).observe(this, { childList: true });
+  }
+}
+customElements.define("bruh-list", BruhList);
+
+export { BruhList };
+//# sourceMappingURL=list.mjs.map

package/dist/components/intl/list.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"list.mjs","sources":["../../../src/components/intl/list.tsx"],"sourcesContent":["/** @jsxImportSource bruh/browser */\nimport { bruhChildrenToNodes } from \"bruh/browser\"\nimport { r } from \"../../reactive/index.mts\"\nimport { attempt, mapObject } from \"../../utils/index.mts\"\nimport { spaceSeparated } from \"../utils.mts\"\nimport { BruhCustomElementBase } from \"../custom-elements.mts\"\nimport { inferDirection, parseLocales, userLanguages } from \"./utils.mts\"\n\nconst optionToAttribute = {\n  \"locale-matcher\": \"locale-matcher\",\n  \"type\": \"type\",\n  \"style\": \"format-style\"\n} as const\n\ntype BruhListAttributes = {\n  \"locales\"?: ReadonlyArray<Intl.UnicodeBCP47LocaleIdentifier>,\n  \"locale-matcher\"?: Intl.ListFormatOptions[\"localeMatcher\"],\n  \"type\"?: Intl.ListFormatOptions[\"type\"],\n  \"format-style\"?: Intl.ListFormatOptions[\"style\"]\n}\n\nexport class BruhList extends BruhCustomElementBase<BruhListAttributes> {\n  static observedAttributes = [\n    \"locales\",\n    ...Object.values(optionToAttribute)\n  ]\n\n  static bruh = {\n    parseAttributes: {\n      locales: spaceSeparated\n    }\n  }\n\n  #locales\n  #options\n  #formatter\n  #itemSlotNames = r<ReadonlyArray<`${number}`>>()\n  #formatted\n\n  constructor() {\n    super()\n\n    this.#locales = r([this.bruh.attributes.locales, userLanguages], () =>\n      parseLocales([\n        ...this.bruh.attributes.locales.value ?? [],\n        ...userLanguages.value\n      ])\n    )\n\n    const optionToReactiveAttribute = mapObject(optionToAttribute,\n      ([option, attribute]) => [option, this.bruh.attributes[attribute]]\n    )\n    this.#options = r(Object.values(optionToReactiveAttribute), () =>\n      mapObject(optionToReactiveAttribute, ([option, attribute]) => [option, attribute.value || undefined]) as Partial<Intl.ListFormatOptions>\n    )\n\n    this.#formatter = r([this.#locales, this.#options], () =>\n      attempt(() => new Intl.ListFormat(this.#locales.value, this.#options.value))\n        ?? new Intl.ListFormat(this.#locales.value)\n    )\n\n    type ListFormatPart = ReturnType<Intl.ListFormat[\"formatToParts\"]>[number]\n    const renderParts = (parts: ReadonlyArray<ListFormatPart>) =>\n      parts.map(part => {\n        const partAttribute = `part ${part.type}`\n        return part.type === \"element\"\n          ? <bdi  part={partAttribute} role=\"listitem\"><slot name={part.value} /></bdi> as HTMLElement\n          : <span part={partAttribute}>{part.value}</span> as HTMLSpanElement\n      })\n\n    this.#formatted = r([this.#formatter, this.#itemSlotNames], () => {\n      if (!this.#itemSlotNames.value)\n        return\n\n      const formatter = this.#formatter.value\n      const { locale } = formatter.resolvedOptions()\n      const direction = inferDirection(locale)\n\n      const result = renderParts(formatter.formatToParts(this.#itemSlotNames.value))\n\n      return <bdi lang={locale} dir={direction} role=\"list\">{result}</bdi> as HTMLElement\n    })\n\n    const shadowContent = bruhChildrenToNodes([this.#formatted])\n    this\n      .attachShadow({ mode: \"open\" })\n      .append(...shadowContent)\n  }\n\n  mountedCallback() {\n    const assignSlots = () => {\n      this.#itemSlotNames.value = [...this.children].map((child, i) => {\n        const slot = \"\" + (i + 1) as `${number}`\n        child.slot = slot\n        return slot\n      })\n    }\n    assignSlots()\n    new MutationObserver(assignSlots).observe(this, { childList: true })\n  }\n}\n\ncustomElements.define(\"bruh-list\", BruhList)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"bruh-list\": BruhList\n  }\n}\ndeclare module \"html-info\" {\n  interface HTMLTagToAttributes {\n    \"bruh-list\": {\n      /**\n       * Space separated list of locales\n       */\n      \"locales\"?: string,\n      \"locale-matcher\"?: Intl.ListFormatOptions[\"localeMatcher\"],\n      \"type\"?: Intl.ListFormatOptions[\"type\"],\n      \"format-style\"?: Intl.ListFormatOptions[\"style\"]\n    }\n  }\n}\n"],"names":[],"mappings":"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"}