@aquera/nile-elements 2.0.0 → 2.0.2

package/src/nile-side-bar-footer/nile-side-bar-footer.css.ts

@@ -10,10 +10,10 @@ export const styles = css`
  padding-bottom: var(--nile-spacing-xl, var(--ng-spacing-3xl));
 	padding-left: var(--nile-spacing-xl, var(--ng-spacing-xl));
 	padding-right: var(--nile-spacing-xl, var(--ng-spacing-xl));
-  padding-top: var(--nile-spacing-xs);
+  padding-top: var(--nile-spacing-xs, var(--ng-spacing-xs));
  gap: var(--nile-spacing-md, var(--ng-spacing-xl));
   bottom: 0;
-  background: var(--nile-colors-neutral-100);
+  background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));
 }
 
 .footer {
@@ -30,7 +30,7 @@ export const styles = css`
   justify-content: center;
  
   font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
-  color: var(--nile-colors-dark-900, var(--ng-colors-graylightmode-900));
+  color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
   cursor: pointer;
   border-radius: var(--nile-radius-sm, var(--ng-radius-sm));
   transition: background 0.2s ease;

package/src/nile-side-bar-footer-item/nile-side-bar-footer-item.css.ts

@@ -15,7 +15,7 @@ export const styles = css`
     padding-left: var(--nile-spacing-lg, var(--ng-spacing-lg));
     padding-right: var(--nile-spacing-lg, var(--ng-spacing-lg));
     font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
-    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900))
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
     cursor: pointer;
     font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
     border-radius: var(--nile-radius-sm, var(--ng-radius-lg));
@@ -27,7 +27,10 @@ export const styles = css`
   }
 
   .footer-item:hover {
-    background: var(--nile-side-bar-footer-hover-bg, #f3f4f6);
+    background: var(
+      --nile-side-bar-footer-hover-bg,
+      var(--ng-colors-bg-primary-hover)
+    );
   }
 
   /* left: icon */
@@ -50,13 +53,16 @@ export const styles = css`
   ::slotted([slot='action']) {
     flex-shrink: 0;
     font-size: 1.25rem;
-    color: var(--nile-side-bar-footer-icon-color, #6b7280);
+    color: var(
+      --nile-side-bar-footer-icon-color,
+      var(--ng-colors-fg-quaternary-400)
+    );
     margin-left: auto;
   }
 
  
   :host([type='support']) .footer-item {
-    background: var(--nile-colors-neutral-400);
+    background: var(--nile-colors-neutral-400, var(--ng-colors-bg-secondary));
     height: var(--nile-height-38px, var(--ng-spacing-5xl));
     border-radius: var(--nile-radius-sm, var(--ng-radius-sm));
 
@@ -72,7 +78,7 @@ border: 1px solid var(--ng-colors-border-secondary);
 min-height: var(--nile-radius-4xl, var(--ng-spacing-7xl));
 }
 :host([type='avatar'][active]) .footer-item {
-background: var(--nile-colors-neutral-400);
+background: var(--nile-colors-neutral-400, var(--ng-colors-bg-active));
 }
 
 

package/src/nile-timestamp-builder/index.ts

@@ -0,0 +1 @@
+export { NileTimestampBuilder } from './nile-timestamp-builder';

package/src/nile-timestamp-builder/nile-timestamp-builder-utils.ts

@@ -0,0 +1,321 @@
+/**
+ * Copyright Aquera Inc 2026
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * Timezone-aware wall-clock helpers for `nile-timestamp-builder`.
+ * ALL Temporal / Intl branching lives in this module. The component must never
+ * call `Intl.DateTimeFormat` or `Temporal` inline — it always goes through here.
+ */
+
+import { TIMEZONES } from './timezones';
+
+/** The editable wall-clock fields exposed by `nile-timestamp-builder`. */
+export enum TimestampField {
+  Year = 'year',
+  Month = 'month',
+  Day = 'day',
+  Hour = 'hour',
+  Minute = 'minute',
+  Second = 'second',
+  Millisecond = 'millisecond',
+}
+
+export interface WallClock {
+  year: number;
+  month: number;
+  day: number;
+  hour: number;
+  minute: number;
+  second: number;
+  millisecond: number;
+}
+
+export function hasTemporal(): boolean {
+  return typeof (globalThis as any).Temporal !== 'undefined';
+}
+
+/** Returns the list of supported IANA timezones using Intl or the bundled fallback list. */
+export function getTimezoneList(): string[] {
+  try {
+    const supportedValuesOf = (Intl as any).supportedValuesOf;
+    if (typeof supportedValuesOf === 'function') {
+      const list = supportedValuesOf('timeZone') as string[];
+      if (Array.isArray(list) && list.length > 0) {
+        return list;
+      }
+    }
+  } catch {
+  }
+  return [...TIMEZONES];
+}
+
+/** Resolves the runtime's local IANA timezone, falling back to `UTC`. */
+export function getLocalTimeZone(): string {
+  try {
+    const tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    if (tz && isValidTimeZone(tz)) {
+      return tz;
+    }
+  } catch {
+  }
+  return 'UTC';
+}
+
+/** Returns true when `tz` is a timezone identifier the runtime can format. */
+export function isValidTimeZone(tz: string): boolean {
+  if (!tz || typeof tz !== 'string') {
+    return false;
+  }
+  try {
+    new Intl.DateTimeFormat('en-US', { timeZone: tz });
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+export function daysInMonth(year: number, month: number): number {
+  return new Date(Date.UTC(year, month, 0)).getUTCDate();
+}
+
+/** Clamps `value` into `[min, max]`; `NaN` collapses to `min`. */
+export function clampField(value: number, min: number, max: number): number {
+  if (Number.isNaN(value)) {
+    return min;
+  }
+  return Math.min(max, Math.max(min, value));
+}
+
+export function clampWallClock(
+  w: WallClock,
+  minYear: number,
+  maxYear: number
+): WallClock {
+  const year = clampField(Math.trunc(w.year), minYear, maxYear);
+  const month = clampField(Math.trunc(w.month), 1, 12);
+  const day = clampField(Math.trunc(w.day), 1, daysInMonth(year, month));
+  const hour = clampField(Math.trunc(w.hour), 0, 23);
+  const minute = clampField(Math.trunc(w.minute), 0, 59);
+  const second = clampField(Math.trunc(w.second), 0, 59);
+  const millisecond = clampField(Math.trunc(w.millisecond), 0, 999);
+  return { year, month, day, hour, minute, second, millisecond };
+}
+
+/** Formats a wall-clock as `YYYY-MM-DD HH:mm:ss.SSS` with zero padding. */
+export function formatWallClock(w: WallClock): string {
+  const pad = (n: number, len: number) =>
+    String(Math.abs(n)).padStart(len, '0');
+  const y = pad(w.year, 4);
+  const mo = pad(w.month, 2);
+  const d = pad(w.day, 2);
+  const h = pad(w.hour, 2);
+  const mi = pad(w.minute, 2);
+  const s = pad(w.second, 2);
+  const ms = pad(w.millisecond, 3);
+  return `${y}-${mo}-${d} ${h}:${mi}:${s}.${ms}`;
+}
+
+/** Converts an epoch (ms) into the wall-clock fields observed in `tz`. Uses Temporal when present, otherwise an `Intl.DateTimeFormat` fallback. */
+export function epochToFields(epochMs: number, tz: string): WallClock {
+  if (hasTemporal()) {
+    const Temporal = (globalThis as any).Temporal;
+    const zdt =
+      Temporal.Instant.fromEpochMilliseconds(epochMs).toZonedDateTimeISO(tz);
+    return {
+      year: zdt.year,
+      month: zdt.month,
+      day: zdt.day,
+      hour: zdt.hour,
+      minute: zdt.minute,
+      second: zdt.second,
+      millisecond: zdt.millisecond,
+    };
+  }
+  return intlEpochToFields(epochMs, tz);
+}
+
+/** Neutral wall-clock placeholder: the Unix epoch (`1970-01-01T00:00:00.000`) read in UTC.*/
+export const EPOCH_WALLCLOCK: WallClock = epochToFields(0, 'UTC');
+
+function intlEpochToFields(epochMs: number, tz: string): WallClock {
+  const parts = formatEpochParts(epochMs, tz);
+  const millisecond = ((epochMs % 1000) + 1000) % 1000;
+  return { ...parts, millisecond };
+}
+
+/** Extracts numeric y/mo/d/h/mi/s parts of `epochMs` in `tz` (h23, no ms). */
+function formatEpochParts(
+  epochMs: number,
+  tz: string
+): Omit<WallClock, 'millisecond'> {
+  const formatter = new Intl.DateTimeFormat('en-US', {
+    timeZone: tz,
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    hourCycle: 'h23',
+  });
+
+  const map: Record<string, number> = {};
+  for (const part of formatter.formatToParts(new Date(epochMs))) {
+    if (part.type !== 'literal') {
+      map[part.type] = Number(part.value);
+    }
+  }
+
+  // `hourCycle: 'h23'` can still surface hour 24 for midnight in some engines.
+  const hour = map.hour === 24 ? 0 : map.hour;
+
+  return {
+    year: map.year,
+    month: map.month,
+    day: map.day,
+    hour,
+    minute: map.minute,
+    second: map.second,
+  };
+}
+
+/** Returns the timezone offset (ms)  */
+export function getTimeZoneOffsetMs(epochMs: number, tz: string): number {
+  const parts = formatEpochParts(epochMs, tz);
+  const asIfUTC = Date.UTC(
+    parts.year,
+    parts.month - 1,
+    parts.day,
+    parts.hour,
+    parts.minute,
+    parts.second
+  );
+  const epochSeconds = Math.floor(epochMs / 1000) * 1000;
+  const offset = asIfUTC - epochSeconds;
+  return Math.round(offset / 1000) * 1000;
+}
+
+const ZONED_VALUE_RE =
+  /^(\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(?:\.\d+)?)\[GMT([+-]\d{2}:\d{2}) ([^\]]+)\]$/;
+
+/** Converts a `±HH:MM` offset from {@link ZONED_VALUE_RE} into milliseconds. */
+function offsetStringToMs(offset: string): number {
+  const sign = offset[0] === '-' ? -1 : 1;
+  return (
+    sign * (Number(offset.slice(1, 3)) * 3600000 + Number(offset.slice(4, 6)) * 60000)
+  );
+}
+
+export function parseZonedValue(
+  input: string
+): { date: Date; timezone: string } | null {
+  const match = ZONED_VALUE_RE.exec(input.trim());
+  if (!match) {
+    return null;
+  }
+  const [, iso, offset, timezone] = match;
+  const date = new Date(`${iso}${offset}`);
+  if (Number.isNaN(date.getTime()) || !isValidTimeZone(timezone)) {
+    return null;
+  }
+  if (
+    getTimeZoneOffsetMs(date.getTime(), timezone) !== offsetStringToMs(offset)
+  ) {
+    return null;
+  }
+  return { date, timezone };
+}
+
+/** Normalizes supported `value` inputs into epoch milliseconds, or `null` if invalid. */
+export function normalizeValueInput(
+  input: Date | number | string | null | undefined
+): Date | null {
+  if (input === null || input === undefined) {
+    return null;
+  }
+  const valid = (d: Date) => (Number.isNaN(d.getTime()) ? null : d);
+  if (input instanceof Date) {
+    return valid(input);
+  }
+  if (typeof input === 'number') {
+    return Number.isFinite(input) ? valid(new Date(input)) : null;
+  }
+  const trimmed = input.trim();
+  if (trimmed === '') {
+    return null;
+  }
+  const zoned = parseZonedValue(trimmed);
+  if (zoned) {
+    return zoned.date;
+  }
+  if (/^-?\d+$/.test(trimmed)) {
+    return valid(new Date(Number(trimmed)));
+  }
+  return valid(new Date(trimmed));
+}
+
+/** Serializes a wall-clock into a zone-encoded string preserving its offset and IANA timezone. */
+export function formatZonedValue(w: WallClock, tz: string): string {
+  const epoch = fieldsToEpoch(w, tz);
+  const offsetMs = Math.round(getTimeZoneOffsetMs(epoch, tz) / 60000) * 60000;
+  const pad = (n: number, len = 2) => String(Math.abs(n)).padStart(len, '0');
+  const sign = offsetMs >= 0 ? '+' : '-';
+  const abs = Math.abs(offsetMs);
+  const offH = Math.floor(abs / 3600000);
+  const offM = Math.floor((abs % 3600000) / 60000);
+  const off = `${sign}${pad(offH)}:${pad(offM)}`;
+  const zone = tz || 'UTC';
+  const y = pad(w.year, 4);
+  const mo = pad(w.month, 2);
+  const d = pad(w.day, 2);
+  const h = pad(w.hour, 2);
+  const mi = pad(w.minute, 2);
+  const s = pad(w.second, 2);
+  const ms = pad(w.millisecond, 3);
+  return `${y}-${mo}-${d}T${h}:${mi}:${s}.${ms}[GMT${off} ${zone}]`;
+}
+
+/** Converts wall-clock fields in `tz` to epoch milliseconds. */
+export function fieldsToEpoch(w: WallClock, tz: string): number {
+  if (hasTemporal()) {
+    const Temporal = (globalThis as any).Temporal;
+    const zdt = Temporal.ZonedDateTime.from(
+      {
+        year: w.year,
+        month: w.month,
+        day: w.day,
+        hour: w.hour,
+        minute: w.minute,
+        second: w.second,
+        millisecond: w.millisecond,
+        timeZone: tz,
+      },
+      { disambiguation: 'compatible' }
+    );
+    return zdt.epochMilliseconds;
+  }
+  return intlFieldsToEpoch(w, tz);
+}
+
+function intlFieldsToEpoch(w: WallClock, tz: string): number {
+  const asUTC = Date.UTC(
+    w.year,
+    w.month - 1,
+    w.day,
+    w.hour,
+    w.minute,
+    w.second,
+    w.millisecond
+  );
+  const offset0 = getTimeZoneOffsetMs(asUTC, tz);
+  const guess = asUTC - offset0;
+  const offset1 = getTimeZoneOffsetMs(guess, tz);
+  if (offset0 === offset1) {
+    return guess;
+  }
+  return asUTC - offset1;
+}

package/src/nile-timestamp-builder/nile-timestamp-builder.css.ts

@@ -0,0 +1,204 @@
+/**
+ * Copyright Aquera Inc 2026
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { css } from 'lit';
+
+export const styles = css`
+  :host {
+    display: block;
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
+  }
+
+  :host([disabled]) {
+    pointer-events: none;
+  }
+
+  :host([disabled]) .tsb__collapsed,
+  :host([disabled]) .tsb__expanded {
+    background: var(
+      --nile-colors-neutral-100,
+      var(--ng-colors-bg-disabled-subtle)
+    );
+    border-color: var(
+      --nile-colors-neutral-500,
+      var(--ng-colors-border-disabled-subtle)
+    );
+  }
+
+  :host([disabled]) .tsb__label,
+  :host([disabled]) .tsb__value,
+  :host([disabled]) .tsb__tz {
+    color: var(--nile-colors-text-disabled, var(--ng-colors-text-disabled));
+  }
+
+  .tsb {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nile-spacing-md, var(--ng-spacing-md));
+  }
+
+  .tsb__label {
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));
+    line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));
+  }
+
+  /* Collapsed view */
+  .tsb__collapsed {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
+    padding: var(--nile-spacing-lg, var(--ng-spacing-lg))
+      var(--nile-spacing-xl, var(--ng-spacing-xl));
+    border: var(--nile-border-width-1, var(--ng-border-width-1)) solid
+      var(--nile-colors-gray-300, var(--ng-colors-border-primary));
+    border-radius: var(--nile-radius-md, var(--ng-radius-md));
+    background: var(--nile-colors-white, var(--ng-colors-bg-primary));
+    min-height: var(--nile-height-28px, var(--ng-height-28px));
+  }
+
+  .tsb__collapsed .tsb__actions nile-button::part(base) {
+    height: var(--nile-height-28px, var(--ng-height-28px));
+    padding-block: var(--nile-spacing-none, var(--ng-spacing-none));
+  }
+
+  .tsb__display {
+    display: flex;
+    align-items: baseline;
+    flex-wrap: wrap;
+    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
+    flex: 1 1 var(--nile-width-208px, var(--ng-width-56));
+    min-width: 0;
+  }
+
+  .tsb__display--editable {
+    cursor: pointer;
+    user-select: none;
+    -webkit-user-select: none;
+    touch-action: manipulation;
+  }
+
+  .tsb__display:focus-visible {
+    outline: var(--nile-border-width-2, var(--ng-border-width-2)) solid
+      var(--nile-colors-border-field-focused, var(--ng-colors-border-brand));
+    outline-offset: var(--nile-spacing-xxs, var(--ng-spacing-xxs));
+    border-radius: var(--nile-radius-sm, var(--ng-radius-sm));
+  }
+
+  .tsb__value {
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-variant-numeric: tabular-nums;
+    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));
+    font-weight: var(--nile-font-weight-semibold, var(--ng-font-weight-medium));
+    letter-spacing: 0.01em;
+    overflow-wrap: normal;
+  }
+
+  .tsb__value--empty {
+    color: var(--nile-colors-gray-400, var(--ng-colors-text-placeholder));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
+  }
+
+  .tsb__tz {
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    color: var(--nile-colors-gray-500, var(--ng-colors-text-tertiary-600));
+    white-space: nowrap;
+  }
+
+  .tsb__actions {
+    display: flex;
+    align-items: center;
+    gap: var(--nile-spacing-md, var(--ng-spacing-md));
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    margin-left: auto;
+    flex: 0 0 auto;
+  }
+
+  /* Expanded view */
+  .tsb__expanded {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
+    padding: var(--nile-spacing-xl, var(--ng-spacing-xl));
+    border: var(--nile-border-width-1, var(--ng-border-width-1)) solid
+      var(--nile-colors-gray-300, var(--ng-colors-border-primary));
+    border-radius: var(--nile-radius-md, var(--ng-radius-md));
+    background: var(--nile-colors-white, var(--ng-colors-bg-primary));
+  }
+
+  .tsb__fields {
+    display: grid;
+    grid-template-columns: repeat(
+      auto-fit,
+      minmax(var(--nile-width-99px, var(--ng-width-24)), 1fr)
+    );
+    gap: var(--nile-spacing-md, var(--ng-spacing-md));
+  }
+
+  .tsb__field {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    width: 100%;
+    max-width: var(--nile-width-110px, var(--ng-width-108));
+  }
+
+  .tsb__field nile-input::part(input) {
+    padding-inline: var(--nile-spacing-sm, var(--ng-spacing-sm));
+    text-align: center;
+  }
+
+  .tsb__field nile-input::part(form-control-label) {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .tsb__timezone {
+    display: flex;
+    flex-direction: column;
+  }
+
+  @media (max-width: 480px) {
+    .tsb__collapsed,
+    .tsb__expanded {
+      padding: var(--nile-spacing-lg, var(--ng-spacing-lg));
+    }
+
+
+    .tsb__actions {
+      width: 100%;
+      margin-left: 0;
+    }
+
+
+    [part='editor-actions'] nile-button {
+      flex: 1 1 var(--nile-width-130px, var(--ng-width-32));
+    }
+
+    [part='editor-actions'] nile-button::part(base) {
+      width: 100%;
+    }
+  }
+
+  /* Visually-hidden hidden input used for form participation / validity. */
+  .value-input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+`;