@raqm/ui 0.1.2 → 0.2.0

package/CHANGELOG.md

@@ -5,6 +5,25 @@ All notable changes to `@raqm/ui` are recorded here. The format follows
 [Semantic Versioning](https://semver.org/spec/v2.0.0.html). Before `1.0.0`, minor
 releases may include breaking changes.
 
+## [Unreleased]
+
+## [0.2.0] - 2026-11-13
+
+### Changed
+
+- Point the package homepage and README guides to the public documentation site;
+  remove private repository and issue links from package metadata.
+- Shorten the package README to installation, setup, usage, and public documentation.
+- Optimize component update paths, overlay lifecycles, and theme synchronization.
+  Reuse OTP validation patterns and create sidebar tooltips only when eligible.
+
+### Removed
+
+- **Breaking:** remove the unused `@raqm/ui/carousel` entrypoint and
+  `@raqm/ui/styles/carousel.css`, along with the Embla runtime dependency.
+  Carousel components, directives, options, and plugin/API integration are no
+  longer provided. The demo carousel page and autoplay dependency are removed too.
+
 ## [0.1.2] - 2026-11-13
 
 ### Removed

package/README.md

@@ -1,126 +1,87 @@
-# Raqm UI
-
-UI components with Raqm's own design and APIs,
-implemented natively for Angular with the Angular CDK. Standalone components and
-directives, signal inputs and outputs, light/dark themes and first-class RTL.
-
-- **Status:** pre-1.0 — the component API may still change in minor releases.
-- **Angular:** 22.2 (peer dependency), Angular CDK 22.2, `@angular/forms` for the
-  form controls.
-- **Styles:** plain CSS custom properties and SCSS. No Tailwind, no React, no runtime
-  copy of shadcn/ui.
-
-## Install
-
-```sh
-npm install @raqm/ui @angular/cdk
-```
-
-`@angular/core`, `@angular/common` and `@angular/forms` are peer dependencies and
-are expected to come from your application.
-
-## Load the theme
-
-Load the CDK overlay stylesheet first, then the package theme, then your own styles:
-
-```jsonc
-// angular.json -> projects.<app>.architect.build.options.styles
-"styles": [
-  "@angular/cdk/overlay-prebuilt.css",
-  "@raqm/ui/theme.css",
-  "src/styles.scss"
-]
-```
-
-Import the components you use from their own entrypoint. Focused subpaths keep each
-lazy route from pulling the whole library into its bundle:
-
-```ts
-import { Component } from '@angular/core';
-import { RaqmButton } from '@raqm/ui/button';
-import { RaqmCard } from '@raqm/ui/card';
-
-@Component({
-  selector: 'app-example',
-  imports: [RaqmButton, RaqmCard],
-  template: `
-    <raqm-card>
-      <raqm-card-header>
-        <h3 raqm-card-title>Monthly report</h3>
-      </raqm-card-header>
-      <raqm-card-content>
-        <button raqm-button="outline" type="button">Download</button>
-      </raqm-card-content>
-    </raqm-card>
-  `,
-})
-export class ExampleComponent {}
-```
-
-The root import (`from '@raqm/ui'`) aggregates the historically root-exported
-families. Attachment, Calendar, Carousel, Resizable, and Questionnaire remain
-subpath-only. Prefer focused subpaths in application code.
-
-## Themes
-
-The theme ships light and dark scopes and follows `prefers-reduced-motion`:
-
-| Scope                       | Effect                                     |
-| --------------------------- | ------------------------------------------ |
-| `:root`                     | light theme (default)                      |
-| `[data-raqm-theme="light"]` | explicit light island inside a dark app    |
-| `[data-raqm-theme="dark"]`  | dark theme for the element and its subtree |
-
-All design tokens are `--raqm-*` custom properties, so an application can override
-them in its own stylesheet after the package theme loads. Components use logical CSS
-properties, so `dir="rtl"` mirrors layouts without extra overrides.
-
-## Entrypoints
-
-| Area                 | Subpaths                                                                                                                                                                                                                |
-| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Form controls        | `button`, `button-group`, `input`, `checkbox`, `switch`, `textarea`, `label`, `radio-group`, `native-select`, `field`, `input-group`, `input-otp`, `select`, `combobox`, `slider`, `calendar`, `toggle`, `toggle-group` |
-| Layout and content   | `card`, `item`, `table`, `sidebar`, `pagination`, `breadcrumb`, `empty`, `attachment`, `resizable`, `scroll-area`                                                                                                       |
-| Overlays             | `dialog`, `alert-dialog`, `drawer`, `sheet`, `popover`, `hover-card`, `tooltip`, `toast`, `command`                                                                                                                     |
-| Menus and disclosure | `dropdown-menu`, `context-menu`, `menubar`, `navigation-menu`, `accordion`, `collapsible`, `tabs`                                                                                                                       |
-| Display              | `badge`, `avatar`, `spinner`, `kbd`, `separator`, `skeleton`, `aspect-ratio`                                                                                                                                            |
-| Feedback             | `alert`, `progress`, `questionnaire`                                                                                                                                                                                    |
-| Media                | `carousel` (bundles `embla-carousel`)                                                                                                                                                                                   |
-
-Multipart families provide one readonly Angular template dependency array:
-
-```ts
-import { RaqmCard } from '@raqm/ui/card';
-// Use imports: [RaqmCard] to enable the Card template parts.
-```
-
-Single-piece controls export their class directly, for example `RaqmInput` from
-`@raqm/ui/input`. Use actual `Component`/`Directive` suffixed declarations for
-instance queries, injection, and inheritance—not a family array. Services and
-data types remain separately exported. The former `/controls` and `/display`
-entrypoints are removed; Toggle Group now uses `/toggle-group`. This is an
-intentional pre-release breaking import migration, without compatibility aliases.
-
-Attachment, Calendar, Carousel, Resizable, and Questionnaire are secondary-only;
-the root aggregate preserves its historical family boundary.
-
-## Accessibility
-
-Components are authored with keyboard and screen-reader semantics in hand: the dialog
-family warns in development when no accessible name is provided, focus is moved and
-restored through the CDK, and interactive parts expose their state through ARIA.
-Overlay panes render in a CDK overlay; load `@angular/cdk/overlay-prebuilt.css` as
-shown above.
-
-## Component guides
-
-Every component page in the docs app pairs a Markdown guide with live examples and
-copy-ready code. Browse all 55 pages under
-[Raqm-UI-demo/src/app/pages](https://github.com/KeyLitDev/RaqmUI/tree/main/Raqm-UI-demo/src/app/pages).
-
-## License
-
-MIT — see [LICENSE](https://github.com/KeyLitDev/RaqmUI/blob/main/LICENSE).
-
-For attribution, see
-[NOTICE.md](https://github.com/KeyLitDev/RaqmUI/blob/main/NOTICE.md).
+# Raqm UI
+
+Standalone Angular UI components with signal-based APIs, light and dark themes,
+and RTL support. Built on the Angular CDK.
+
+[Documentation & examples](https://raqmui.meabuelgheit.workers.dev/) ·
+[Getting started](https://raqmui.meabuelgheit.workers.dev/getting-started) ·
+[Component guides](https://raqmui.meabuelgheit.workers.dev/components)
+
+## Install
+
+Requires Angular 22.2 and Angular CDK 22.2. Your application must provide
+`@angular/core`, `@angular/common`, and `@angular/forms`.
+
+```sh
+npm install @raqm/ui @angular/cdk
+```
+
+Pre-1.0: minor releases may include breaking API changes. Read the packaged
+`CHANGELOG.md` before upgrading.
+
+## Styles
+
+Add the theme before your application styles in `angular.json`:
+
+```json
+"styles": [
+  "@raqm/ui/theme.css",
+  "src/styles.scss"
+]
+```
+
+The theme includes CDK overlay styles; no separate overlay stylesheet is needed.
+The aggregate `theme.css` is deprecated but supported during the component-style
+migration. For smaller bundles, use `@raqm/ui/styles/base.css`,
+`@raqm/ui/styles/overlay.css`, and the required component styles.
+
+<details>
+<summary>Granular stylesheet order</summary>
+
+After `base.css` and `overlay.css`, load the residual styles you need in this order
+(each name is `@raqm/ui/styles/<name>.css`):
+
+`sidebar`, `input`, `input-otp`, `checkbox`, `spinner`, `button`, `pagination`, `kbd`,
+`toggle-group`, `switch`, `badge`, `dropdown-menu`, `context-menu`, `radio-group`,
+`textarea`, `input-group-button`, `menubar`, `navigation-menu`, `questionnaire`,
+`avatar`, `combobox`, `field-parts`, `table`, `attachment`, `popover`, `dialog`,
+`alert-dialog`, `sheet`, `drawer`, `command`, `tooltip`, `empty`, `alert`, `item`,
+`tabs`, `accordion`, `resizable`, `native-select`, `field-relationships`,
+`button-group`, `input-group-relationships`, `toggle`.
+
+Include `button.css` for Toast/Dialog close controls, `spinner.css` when used inside
+Badge, and `input.css`/`textarea.css` for those controls inside Field.
+Components without a residual stylesheet encapsulate their own styles.
+
+</details>
+
+## Usage
+
+Import components from their focused entrypoints:
+
+```ts
+import { Component } from '@angular/core';
+import { RaqmButton } from '@raqm/ui/button';
+
+@Component({
+  selector: 'app-example',
+  imports: [RaqmButton],
+  template: `<button raqm-button="outline" type="button">Download</button>`,
+})
+export class ExampleComponent {}
+```
+
+Multipart families such as `RaqmCard` export template dependency arrays for
+`imports: [RaqmCard]`. Use the individual `Component`/`Directive` classes for
+queries and injection.
+
+## Themes and RTL
+
+Set `data-raqm-theme="dark"` on an ancestor for dark mode, or
+`data-raqm-theme="light"` for an explicit light scope. Override `--raqm-*` CSS
+custom properties after loading the theme. Set `dir="rtl"` for RTL layouts.
+
+## License
+
+MIT. License and third-party notices are included in the package as `LICENSE`
+and `NOTICE.md`.

package/fesm2022/raqm-ui-badge.mjs

@@ -34,6 +34,7 @@ var RaqmBadge = class RaqmBadge {
 		ngImport: i0,
 		template: "<ng-content />",
 		isInline: true,
+		styles: [":where(:host){display:inline-flex;inline-size:fit-content;flex-shrink:0;align-items:center;justify-content:center;overflow:hidden;white-space:nowrap;transition-property:color,background-color,border-color,box-shadow,transform,opacity;transition-duration:var(--raqm-duration-base);transition-timing-function:var(--raqm-ease-standard);box-sizing:border-box;block-size:calc(var(--raqm-spacing) * 5);gap:calc(var(--raqm-spacing) * 1);border-radius:calc(var(--raqm-spacing) * 8);border:1px solid transparent;padding-inline:calc(var(--raqm-spacing) * 2);padding-block:calc(var(--raqm-spacing) * .5);font-size:var(--raqm-font-size-xs);line-height:1rem;font-weight:var(--raqm-font-weight-medium);background-color:var(--raqm-badge-background, var(--raqm-primary));color:var(--raqm-badge-foreground, var(--raqm-primary-foreground));border-color:var(--raqm-badge-border, transparent)}:where(:host([data-raqm-variant=secondary])){background-color:var(--raqm-badge-background, var(--raqm-secondary));color:var(--raqm-badge-foreground, var(--raqm-secondary-foreground))}:where(:host([data-raqm-variant=outline])){background-color:var(--raqm-badge-background, transparent);color:var(--raqm-badge-foreground, var(--raqm-foreground));border-color:var(--raqm-badge-border, var(--raqm-border))}:where(:host([data-raqm-variant=destructive])){background-color:var(--raqm-badge-background, color-mix(in oklch, var(--raqm-destructive) var(--raqm-destructive-bg-alpha, 10%), transparent));color:var(--raqm-badge-foreground, var(--raqm-destructive))}:where(:host([data-raqm-variant=ghost])){background-color:var(--raqm-badge-background, transparent);color:var(--raqm-badge-foreground, inherit)}:where(:host(a[data-raqm-variant=default]):hover){background-color:color-mix(in oklch,var(--raqm-badge-background, var(--raqm-primary)) 80%,transparent)}:where(:host(a[data-raqm-variant=secondary]):hover){background-color:color-mix(in oklch,var(--raqm-badge-background, var(--raqm-secondary)) 80%,transparent)}:where(:host(a[data-raqm-variant=outline]):hover){background-color:var(--raqm-badge-background, var(--raqm-muted));color:var(--raqm-badge-foreground, var(--raqm-muted-foreground))}:where(:host(a[data-raqm-variant=destructive]):hover){background-color:color-mix(in oklch,var(--raqm-destructive) 20%,transparent)}:where(:host([data-raqm-variant=ghost]):hover){background-color:var(--raqm-badge-background, color-mix(in oklch, var(--raqm-muted) var(--raqm-ghost-hover-alpha, 100%), transparent));color:var(--raqm-badge-foreground, var(--raqm-muted-foreground))}:where(:host(:focus-visible)){border-color:var(--raqm-ring);box-shadow:0 0 0 var(--raqm-focus-ring-width) var(--raqm-focus-ring-color)}:where(:host([aria-invalid=true])){border-color:var(--raqm-invalid-border)}:where(:host([aria-invalid=true]):focus-visible){box-shadow:0 0 0 var(--raqm-focus-ring-width) var(--raqm-invalid-ring)}:where(:host([data-raqm-variant=destructive]):focus-visible){box-shadow:0 0 0 var(--raqm-focus-ring-width) color-mix(in oklch,var(--raqm-destructive) var(--raqm-destructive-focus-alpha, 20%),transparent)}\n"],
 		changeDetection: i0.ChangeDetectionStrategy.OnPush
 	});
 };
@@ -51,7 +52,8 @@ i0.ɵɵngDeclareClassMetadata({
 			host: {
 				class: "raqm-badge",
 				"[attr.data-raqm-variant]": "activeVariant()"
-			}
+			},
+			styles: [":where(:host){display:inline-flex;inline-size:fit-content;flex-shrink:0;align-items:center;justify-content:center;overflow:hidden;white-space:nowrap;transition-property:color,background-color,border-color,box-shadow,transform,opacity;transition-duration:var(--raqm-duration-base);transition-timing-function:var(--raqm-ease-standard);box-sizing:border-box;block-size:calc(var(--raqm-spacing) * 5);gap:calc(var(--raqm-spacing) * 1);border-radius:calc(var(--raqm-spacing) * 8);border:1px solid transparent;padding-inline:calc(var(--raqm-spacing) * 2);padding-block:calc(var(--raqm-spacing) * .5);font-size:var(--raqm-font-size-xs);line-height:1rem;font-weight:var(--raqm-font-weight-medium);background-color:var(--raqm-badge-background, var(--raqm-primary));color:var(--raqm-badge-foreground, var(--raqm-primary-foreground));border-color:var(--raqm-badge-border, transparent)}:where(:host([data-raqm-variant=secondary])){background-color:var(--raqm-badge-background, var(--raqm-secondary));color:var(--raqm-badge-foreground, var(--raqm-secondary-foreground))}:where(:host([data-raqm-variant=outline])){background-color:var(--raqm-badge-background, transparent);color:var(--raqm-badge-foreground, var(--raqm-foreground));border-color:var(--raqm-badge-border, var(--raqm-border))}:where(:host([data-raqm-variant=destructive])){background-color:var(--raqm-badge-background, color-mix(in oklch, var(--raqm-destructive) var(--raqm-destructive-bg-alpha, 10%), transparent));color:var(--raqm-badge-foreground, var(--raqm-destructive))}:where(:host([data-raqm-variant=ghost])){background-color:var(--raqm-badge-background, transparent);color:var(--raqm-badge-foreground, inherit)}:where(:host(a[data-raqm-variant=default]):hover){background-color:color-mix(in oklch,var(--raqm-badge-background, var(--raqm-primary)) 80%,transparent)}:where(:host(a[data-raqm-variant=secondary]):hover){background-color:color-mix(in oklch,var(--raqm-badge-background, var(--raqm-secondary)) 80%,transparent)}:where(:host(a[data-raqm-variant=outline]):hover){background-color:var(--raqm-badge-background, var(--raqm-muted));color:var(--raqm-badge-foreground, var(--raqm-muted-foreground))}:where(:host(a[data-raqm-variant=destructive]):hover){background-color:color-mix(in oklch,var(--raqm-destructive) 20%,transparent)}:where(:host([data-raqm-variant=ghost]):hover){background-color:var(--raqm-badge-background, color-mix(in oklch, var(--raqm-muted) var(--raqm-ghost-hover-alpha, 100%), transparent));color:var(--raqm-badge-foreground, var(--raqm-muted-foreground))}:where(:host(:focus-visible)){border-color:var(--raqm-ring);box-shadow:0 0 0 var(--raqm-focus-ring-width) var(--raqm-focus-ring-color)}:where(:host([aria-invalid=true])){border-color:var(--raqm-invalid-border)}:where(:host([aria-invalid=true]):focus-visible){box-shadow:0 0 0 var(--raqm-focus-ring-width) var(--raqm-invalid-ring)}:where(:host([data-raqm-variant=destructive]):focus-visible){box-shadow:0 0 0 var(--raqm-focus-ring-width) color-mix(in oklch,var(--raqm-destructive) var(--raqm-destructive-focus-alpha, 20%),transparent)}\n"]
 		}]
 	}],
 	propDecorators: { appearance: [{

package/fesm2022/raqm-ui-badge.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"raqm-ui-badge.mjs","names":[],"sources":["../../../projects/ui/badge/badge.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\r\n\r\ntype BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline' | 'ghost';\r\n\r\n/**\r\n * Status pill on a native `<span>` or `<a>`; a real anchor keeps native navigation and focus.\r\n * `raqm-badge` selects the appearance; `--raqm-badge-background`/`-foreground`/`-border` override colours.\r\n */\r\n@Component({\r\n  selector: 'span[raqm-badge], a[raqm-badge]',\r\n  template: '<ng-content />',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  host: {\r\n    class: 'raqm-badge',\r\n    '[attr.data-raqm-variant]': 'activeVariant()',\r\n  },\r\n})\r\nexport class RaqmBadge {\r\n  /** Bare marker uses the default appearance. */\r\n  readonly appearance = input<BadgeVariant | ''>('', { alias: 'raqm-badge' });\r\n\r\n  protected readonly activeVariant = computed(() => this.appearance() || 'default');\r\n}\r\n"],"mappings":";;AAiBA,IAAa,YAAb,MAAa,UAAS;CAEX,aAAa,MAAyB,IAAE;EAAA,GAAA,YAAA,EAAA,WAAA,aAAA,+BAAA,CAAA;EAAI,OAAO;CAAY,CAAA;CAErD,gBAAgB,eAAe,KAAK,WAAU,KAAM,WAAU,GAAA,YAAA,CAAA,EAAA,WAAA,gBAAA,CAAA,+BAAA,CAAA,CAAA;CAJtE,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAS,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAT,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAS,cAAA;EAAA,UAAA;EAAA,QAAA,EAAA,YAAA;GAAA,mBAAA;GAAA,YAAA;GAAA,UAAA;GAAA,YAAA;GAAA,mBAAA;EAAA,EAAA;EAAA,MAAA;GAAA,YAAA,EAAA,0BAAA,kBAAA;GAAA,gBAAA;EAAA;EAAA,UAAA;EAAA,UAPV;EAAgB,UAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAOf,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAS,YAAA,CAAA;EATrB,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GACV,UAAU;GACV,iBAAiB,wBAAwB;GACzC,MAAM;IACJ,OAAO;IACP,4BAA4B;GAC7B;EACF,CAAA"}
+{"version":3,"file":"raqm-ui-badge.mjs","names":[],"sources":["../../../projects/ui/badge/badge.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\r\n\r\ntype BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline' | 'ghost';\r\n\r\n/**\r\n * Status pill on a native `<span>` or `<a>`; a real anchor keeps native navigation and focus.\r\n * `raqm-badge` selects the appearance; `--raqm-badge-background`/`-foreground`/`-border` override colours.\r\n */\r\n@Component({\r\n  selector: 'span[raqm-badge], a[raqm-badge]',\r\n  template: '<ng-content />',\r\n  styleUrl: './badge.component.scss',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  host: {\r\n    class: 'raqm-badge',\r\n    '[attr.data-raqm-variant]': 'activeVariant()',\r\n  },\r\n})\r\nexport class RaqmBadge {\r\n  /** Bare marker uses the default appearance. */\r\n  readonly appearance = input<BadgeVariant | ''>('', { alias: 'raqm-badge' });\r\n\r\n  protected readonly activeVariant = computed(() => this.appearance() || 'default');\r\n}\r\n"],"mappings":";;AAkBA,IAAa,YAAb,MAAa,UAAS;CAEX,aAAa,MAAyB,IAAE;EAAA,GAAA,YAAA,EAAA,WAAA,aAAA,+BAAA,CAAA;EAAI,OAAO;CAAY,CAAA;CAErD,gBAAgB,eAAe,KAAK,WAAU,KAAM,WAAU,GAAA,YAAA,CAAA,EAAA,WAAA,gBAAA,CAAA,+BAAA,CAAA,CAAA;CAJtE,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAS,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAT,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAS,cAAA;EAAA,UAAA;EAAA,QAAA,EAAA,YAAA;GAAA,mBAAA;GAAA,YAAA;GAAA,UAAA;GAAA,YAAA;GAAA,mBAAA;EAAA,EAAA;EAAA,MAAA;GAAA,YAAA,EAAA,0BAAA,kBAAA;GAAA,gBAAA;EAAA;EAAA,UAAA;EAAA,UARV;EAAgB,UAAA;EAAA,QAAA,CAAA,mgGAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAQf,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAS,YAAA,CAAA;EAVrB,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAiC,UACjC;GAAgB,iBAET,wBAAwB;GAAM,MACzC;IACJ,OAAO;IACP,4BAA4B;GAC7B;GAAA,QAAA,CAAA,mgGAAA;EAAA,CAAA"}

package/fesm2022/raqm-ui-calendar.mjs

@@ -179,43 +179,70 @@ function connectCalendarEffects(host) {
 		if (pending) host.setPendingFocus(false);
 	});
 }
+function optionsKey(options) {
+	return JSON.stringify(Object.keys(options).sort().map((name) => {
+		const value = options[name];
+		return [
+			name,
+			typeof value,
+			value
+		];
+	}));
+}
+const DATE_FORMAT_LIMIT = 32;
 var RaqmCalendarFormat = class {
 	host;
+	explicitFormats = /* @__PURE__ */ new Map();
+	renderFormats = /* @__PURE__ */ new Map();
+	weekNumberFormat;
+	cachedLocale;
 	constructor(host) {
 		this.host = host;
 	}
 	format(date, options) {
-		return new Intl.DateTimeFormat(this.host.locale(), {
-			...options,
-			calendar: "gregory",
-			numberingSystem: "latn"
-		}).format(date);
+		const locale = this.ensureLocale();
+		const effective = this.effectiveOptions(options);
+		if (effective.timeZone === void 0) return new Intl.DateTimeFormat(locale, effective).format(date);
+		const cacheKey = optionsKey(effective);
+		let formatter = this.explicitFormats.get(cacheKey);
+		if (formatter === void 0) {
+			if (this.explicitFormats.size >= DATE_FORMAT_LIMIT) {
+				const oldest = this.explicitFormats.keys().next().value;
+				if (oldest !== void 0) this.explicitFormats.delete(oldest);
+			}
+			formatter = new Intl.DateTimeFormat(locale, effective);
+			this.explicitFormats.set(cacheKey, formatter);
+		}
+		return formatter.format(date);
+	}
+	clearInternalFormats() {
+		this.renderFormats.clear();
 	}
 	caption(date) {
-		return this.host.formatters().formatCaption?.(date) ?? this.format(date, {
+		return this.host.formatters().formatCaption?.(date) ?? this.internal(date, {
 			month: "long",
 			year: "numeric"
 		});
 	}
 	monthLabel(date, month) {
 		const value = civil(date.getFullYear(), month);
-		return this.host.formatters().formatMonthDropdown?.(value) ?? this.format(value, { month: "short" });
+		return this.host.formatters().formatMonthDropdown?.(value) ?? this.internal(value, { month: "short" });
 	}
 	yearLabel(year) {
 		const value = civil(year);
-		return this.host.formatters().formatYearDropdown?.(value) ?? this.format(value, { year: "numeric" });
+		return this.host.formatters().formatYearDropdown?.(value) ?? this.internal(value, { year: "numeric" });
 	}
 	weekday(date) {
 		const custom = this.host.formatters().formatWeekdayName?.(date);
 		if (custom) return custom;
-		const short = this.format(date, { weekday: "short" });
+		const short = this.internal(date, { weekday: "short" });
 		const language = this.host.locale().split("-")[0].toLowerCase();
 		if (language === "ar") return short.replace(/^ال/, "");
 		if (language === "he") return short.replace(/^יום\s+/, "");
 		return Array.from(short).slice(0, 2).join("");
 	}
 	dayLabel(day) {
-		return this.host.labels().day?.(day.date, day.modifiers) ?? this.format(day.date, {
+		return this.host.labels().day?.(day.date, day.modifiers) ?? this.internal(day.date, {
 			weekday: "long",
 			month: "long",
 			day: "numeric",
@@ -223,10 +250,47 @@ var RaqmCalendarFormat = class {
 		});
 	}
 	dayText(date) {
-		return this.host.formatters().formatDay?.(date) ?? this.format(date, { day: "numeric" });
+		return this.host.formatters().formatDay?.(date) ?? this.internal(date, { day: "numeric" });
 	}
 	weekText(week) {
-		return this.host.formatters().formatWeekNumber?.(week) ?? new Intl.NumberFormat(this.host.locale(), { numberingSystem: "latn" }).format(week);
+		return this.host.formatters().formatWeekNumber?.(week) ?? this.numberFormat().format(week);
+	}
+	internal(date, options) {
+		const locale = this.ensureLocale();
+		const effective = this.effectiveOptions(options);
+		const cacheKey = optionsKey(effective);
+		let formatter = this.renderFormats.get(cacheKey);
+		if (formatter === void 0) {
+			formatter = new Intl.DateTimeFormat(locale, effective);
+			this.renderFormats.set(cacheKey, formatter);
+		}
+		return formatter.format(date);
+	}
+	effectiveOptions(options) {
+		return {
+			...options,
+			calendar: "gregory",
+			numberingSystem: "latn"
+		};
+	}
+	numberFormat() {
+		const locale = this.ensureLocale();
+		let formatter = this.weekNumberFormat;
+		if (formatter === void 0) {
+			formatter = new Intl.NumberFormat(locale, { numberingSystem: "latn" });
+			this.weekNumberFormat = formatter;
+		}
+		return formatter;
+	}
+	ensureLocale() {
+		const locale = this.host.locale();
+		if (locale !== this.cachedLocale) {
+			this.cachedLocale = locale;
+			this.explicitFormats.clear();
+			this.renderFormats.clear();
+			this.weekNumberFormat = void 0;
+		}
+		return locale;
 	}
 };
 var RaqmCalendarKeyboard = class {
@@ -668,6 +732,9 @@ var RaqmCalendarComponent = class RaqmCalendarComponent {
 		if ("selected" in changes) this.view.markSelectionControlled();
 		if ("month" in changes) this.view.markMonthControlled();
 	}
+	ngDoCheck() {
+		this.formats.clearInternalFormats();
+	}
 	ngOnInit() {
 		this.view.init();
 	}