@slotted/angular 0.0.0-stage → 0.1.0-beta.1

package/types/slotted-angular-form.d.ts

@@ -0,0 +1,298 @@
+import * as _angular_core from '@angular/core';
+import { InjectionToken, Signal, OnInit, AfterViewInit } from '@angular/core';
+import * as _slotted_core_form from '@slotted/core/form';
+import { FormErrorEntry, FormErrors, FormErrorInput } from '@slotted/core/form';
+import * as _slotted_core_i18n from '@slotted/core/i18n';
+import { PartialMessages, FormMessages } from '@slotted/core/i18n';
+import { ChangeRequest } from '@slotted/core/state';
+
+/**
+ * When the form checks its own controls. `submit` is the default and
+ * re-validates on every change afterwards: telling a reader an answer is wrong
+ * before they have finished writing it is noise, and telling them nothing after
+ * they have fixed it is worse.
+ */
+type FormValidate = 'submit' | 'blur' | 'change' | 'none';
+/** Where focus goes after a submit that found something wrong. */
+type FormErrorFocus = 'summary' | 'control' | 'none';
+/** Whether the family renders the summary itself. */
+type FormSummaryMode = 'auto' | 'none';
+/** How the action row is arranged along the inline axis. */
+type FormActionsAlign = 'end' | 'start' | 'between' | 'stretch';
+interface FormDefaults {
+    align: FormActionsAlign;
+    errorFocus: FormErrorFocus;
+    nativeValidation: boolean;
+    summary: FormSummaryMode;
+    summaryDescription: string | undefined;
+    validate: FormValidate;
+}
+declare const FORM_DEFAULTS: InjectionToken<FormDefaults>;
+/**
+ * An application decides once how its forms behave: when they validate, where
+ * focus goes after a failed submit, and how its action row is arranged. A form
+ * that states any of them itself still wins. The summary's heading comes from
+ * the language in force (`provideSlotted`).
+ */
+declare function provideFormDefaults(defaults: Partial<FormDefaults>): {
+    provide: InjectionToken<FormDefaults>;
+    useFactory: () => FormDefaults;
+};
+declare function injectFormDefaults(): FormDefaults;
+/** One validation failure Angular reported, as the registry receives it. */
+interface FormErrorMessageContext {
+    /** The `name` the control is submitted under, which is the key in the group. */
+    name: string;
+    /** The key `AbstractControl.errors` used — `required`, `minlength`, and so on. */
+    key: string;
+    /** Whatever the validator put beside the key. */
+    detail: unknown;
+}
+/**
+ * How a Reactive Forms validation failure the application's own validator
+ * reports becomes a sentence.
+ *
+ * Angular's validators report a key and a shape — `{ required: true }`,
+ * `{ minlength: { requiredLength: 8, actualLength: 3 } }` — and never a
+ * message. The built-in keys (`required`, `email`, `min`, `max`, `minlength`,
+ * `maxlength`, `pattern`) are written by the `form` catalog's `errors.*`
+ * messages in the language in force; a validator the application adds names
+ * its own message here, and an entry for a built-in key replaces the catalog's.
+ */
+type FormErrorMessages = Record<string, (context: FormErrorMessageContext) => string>;
+declare const SL_FORM_ERROR_MESSAGES: InjectionToken<FormErrorMessages>;
+/** Names the sentences the application's own validators are written as. */
+declare function provideFormErrorMessages(messages: FormErrorMessages): {
+    provide: InjectionToken<FormErrorMessages>;
+    useValue: FormErrorMessages;
+};
+declare function injectFormErrorMessages(): FormErrorMessages;
+/**
+ * What the summary needs from the form around it.
+ *
+ * It is an abstract class rather than an import so the two classes can depend
+ * on each other without a cycle — the shape `field` and `text-field` already
+ * have.
+ */
+declare abstract class SlFormOwner {
+    abstract readonly entries: Signal<readonly FormErrorEntry[]>;
+    abstract readonly errors: Signal<FormErrors>;
+    abstract readonly summaryId: Signal<string>;
+    abstract readonly resolvedSummaryTitle: Signal<string>;
+    abstract readonly resolvedSummaryDescription: Signal<string | undefined>;
+    abstract readonly resolvedAlign: Signal<FormActionsAlign>;
+    /** Called by whichever summary is on the page, so focus can reach the region. */
+    abstract registerSummary(element: HTMLElement | null): void;
+}
+
+/**
+ * The row a form's actions stand in.
+ *
+ * `inline` can end-align a row of buttons. What it cannot do without a query
+ * the consumer writes for every form is the reflow: below the form's own
+ * container width every action takes the whole width, in a column, with the
+ * primary one first — a reader's thumb is at the bottom of a phone and their
+ * eye at the end of a row.
+ */
+declare class SlFormActions {
+    /** Defaults to the form's own `align`, then to the token, then to `end`. */
+    readonly align: _angular_core.InputSignal<FormActionsAlign | undefined>;
+    private readonly form;
+    protected readonly resolvedAlign: _angular_core.Signal<FormActionsAlign>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlFormActions, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlFormActions, "[slFormActions]", ["slFormActions"], { "align": { "alias": "align"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * The summary of everything wrong with the form: a focusable region with a
+ * heading, and a link per error pointing at the control it is about.
+ *
+ * It is the GOV.UK error summary, item for item — "move keyboard focus to the
+ * error summary", "include the heading", "link to each of the answers that have
+ * validation errors", "make sure the error messages in the error summary are
+ * worded the same as those which appear next to the inputs". The last one is
+ * free here: one map feeds the summary and the field.
+ *
+ * The form renders this itself under `summary="auto"`. A consumer who wants it
+ * somewhere else writes `summary="none"` and puts `slFormSummary` on their own
+ * element.
+ */
+declare class SlFormSummary implements AfterViewInit {
+    protected readonly form: SlFormOwner;
+    private readonly element;
+    ngAfterViewInit(): void;
+    /**
+     * The fragment is not followed. A link that navigated would write the
+     * control's identifier into the address bar and add an entry to the history
+     * of a page that never left; focusing the control is the whole of what the
+     * link is for, and the browser scrolls it into view with the focus.
+     */
+    protected focus(event: Event, id: string): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlFormSummary, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SlFormSummary, "[slFormSummary]", ["slFormSummary"], {}, {}, never, never, true, never>;
+}
+/**
+ * A form, its errors and its row of actions.
+ *
+ * **It owns the errors and nothing else.** `docs/component-features.md` § 6 puts
+ * the boundary there: the family coordinates submission, validation, global
+ * messages and focus "sem possuir o estado de cada framework". Values come from
+ * `FormData`, validity from `checkValidity()` and from Reactive Forms, and the
+ * values themselves stay with whichever of the two owns them.
+ *
+ * **`novalidate` is written, and constraint validation still runs.** The
+ * attribute stops the browser drawing its own bubble beside a control whose
+ * error the `field` is already showing; `checkValidity()` is called explicitly
+ * and each control's `validationMessage` is the platform's localized string.
+ *
+ * **Reactive Forms is the second source.** When there is a `ControlContainer`,
+ * every control is marked touched at submit and each failing one becomes a
+ * sentence: a built-in validator's through the catalog's `errors.*` messages,
+ * an application's own through `SL_FORM_ERROR_MESSAGES`.
+ *
+ * **Signal Forms needs nothing here.** Angular 22's `[field]` binds a control
+ * through its `ControlValueAccessor`, which every Slotted control provides, so
+ * they work under it today and this family adds no second integration.
+ */
+declare class SlForm implements SlFormOwner, OnInit {
+    /**
+     * Present means the consumer owns the error map, for the life of the
+     * component. Keyed by the `name` attribute of the control each error is about.
+     */
+    readonly errorsInput: _angular_core.InputSignal<FormErrorInput | undefined>;
+    /** The errors an uncontrolled form starts from, read once. */
+    readonly defaultErrors: _angular_core.InputSignal<FormErrorInput | undefined>;
+    readonly validate: _angular_core.InputSignal<FormValidate | undefined>;
+    readonly errorFocus: _angular_core.InputSignal<FormErrorFocus | undefined>;
+    readonly summary: _angular_core.InputSignal<FormSummaryMode | undefined>;
+    readonly summaryDescription: _angular_core.InputSignal<string | undefined>;
+    readonly align: _angular_core.InputSignal<FormActionsAlign | undefined>;
+    /**
+     * Words laid over the catalog of the language in force, key by key: the
+     * summary's heading (`summaryTitle`) and the built-in validators' sentences
+     * (`errors.*`).
+     */
+    readonly messages: _angular_core.InputSignal<PartialMessages<FormMessages> | undefined>;
+    /** Lets the browser draw its own validation bubble. Off by default. */
+    readonly nativeValidation: _angular_core.InputSignalWithTransform<boolean | undefined, string | boolean | undefined>;
+    /** Marks the form and every control in it as unavailable. */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Marks the form busy for work the family did not start — a mutation a
+     * consumer's own client is running. It is merged with the family's own
+     * submission, so either one puts the root in its busy state.
+     */
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Registers a `beforeunload` guard while anything in the form has been
+     * edited. Off by default: a guard nobody asked for is a trap.
+     */
+    readonly guardUnsaved: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** One output for one transition, carrying the reason and `cancel()`. */
+    readonly errorsChange: _angular_core.OutputEmitterRef<ChangeRequest<FormErrors>>;
+    /**
+     * Emitted when the form submits and nothing is wrong with it. The values are
+     * read from `FormData`, and `errors` is how a handler publishes what a server
+     * answered.
+     */
+    readonly formSubmit: _angular_core.OutputEmitterRef<{
+        values: Record<string, FormDataEntryValue | FormDataEntryValue[]>;
+        event: SubmitEvent;
+        /** Publishes a server's answer, and moves focus the way a failed submit does. */
+        errors: (errors: FormErrorInput) => void;
+        /** Holds the form in its busy state until the promise settles. */
+        pending: (work: Promise<FormErrorInput | void>) => void;
+    }>;
+    private readonly element;
+    private readonly defaults;
+    private readonly errorMessages;
+    /** The family's words in the language in force, with this form's `messages` laid over them. */
+    readonly t: _slotted_core_i18n.FamilyTranslator<FormMessages>;
+    /** The Reactive Forms group around this element, when a consumer wrote one. */
+    private readonly container;
+    private readonly writtenNoValidate;
+    private readonly own;
+    private readonly controls;
+    private summaryElement;
+    /** Set when a publish should be followed by the focus a failed submit moves. */
+    private pendingFocus;
+    private readonly ownSubmitting;
+    /** Either the family's own submission or a consumer's own work. */
+    protected readonly submitting: _angular_core.Signal<boolean>;
+    private readonly submitted;
+    private readonly external;
+    private readonly controlled;
+    readonly errors: _angular_core.Signal<FormErrors>;
+    readonly entries: _angular_core.Signal<_slotted_core_form.FormErrorEntry[]>;
+    protected readonly hasAnyError: _angular_core.Signal<boolean>;
+    readonly summaryId: _angular_core.WritableSignal<string>;
+    readonly resolvedSummaryTitle: _angular_core.Signal<string>;
+    readonly resolvedSummaryDescription: _angular_core.Signal<string | undefined>;
+    readonly resolvedAlign: _angular_core.Signal<FormActionsAlign>;
+    protected readonly resolvedValidate: _angular_core.Signal<FormValidate>;
+    protected readonly resolvedErrorFocus: _angular_core.Signal<FormErrorFocus>;
+    protected readonly resolvedSummary: _angular_core.Signal<FormSummaryMode>;
+    protected readonly resolvedNativeValidation: _angular_core.Signal<boolean>;
+    protected readonly showsOwnSummary: _angular_core.Signal<boolean>;
+    constructor();
+    ngOnInit(): void;
+    /**
+     * The summary says when it exists, and takes the focus a failed submit asked
+     * for. The move waits for the region rather than racing it: the errors and
+     * the element that shows them are published in the same change, and a
+     * `focus()` called before the region rendered would land on nothing.
+     */
+    registerSummary(element: HTMLElement | null): void;
+    /** Runs validation now and publishes what it found. */
+    validateNow(): FormErrors;
+    /** Submits as though the submit button had been pressed. */
+    submit(): void;
+    /** Resets the controls and clears the errors. */
+    reset(): void;
+    /** Moves focus where a failed submit would have moved it. */
+    focusFirstError(): void;
+    protected onSubmit(event: SubmitEvent): void;
+    protected onReset(): void;
+    /**
+     * A server error is dropped when the control it names is edited. After a
+     * failed submit under `validate="change"`, the whole form is checked again
+     * instead, because a reader who has seen the list is fixing it.
+     */
+    protected onInput(event: Event): void;
+    /**
+     * On blur only the control that lost focus is checked. Running the whole form
+     * would tell a reader that six fields they have not reached yet are wrong,
+     * which is the noise `validate="submit"` exists to avoid.
+     */
+    protected onFocusOut(event: Event): void;
+    /**
+     * Three sources, latest last: whatever a server sent, the platform's own
+     * constraint validation, and Reactive Forms.
+     */
+    private collect;
+    /**
+     * Every failing control in the group around this form, as a sentence. Angular
+     * reports a key and a shape and never a message, because a message is the
+     * application's and so is its language; the registry is where it is written.
+     */
+    private angularErrors;
+    /**
+     * The sentence for one of Angular's own validators, from the catalog; for a
+     * key the catalog does not know, nothing — the application's validator names
+     * its own message through `SL_FORM_ERROR_MESSAGES`.
+     */
+    private builtInMessage;
+    private readControls;
+    private publish;
+    /**
+     * The guard nobody else ships. It is off by default, because a page that
+     * refuses to close after a reader typed one character is a trap.
+     */
+    private attachUnloadGuard;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlForm, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SlForm, "form[slForm]", ["slForm"], { "errorsInput": { "alias": "errors"; "required": false; "isSignal": true; }; "defaultErrors": { "alias": "defaultErrors"; "required": false; "isSignal": true; }; "validate": { "alias": "validate"; "required": false; "isSignal": true; }; "errorFocus": { "alias": "errorFocus"; "required": false; "isSignal": true; }; "summary": { "alias": "summary"; "required": false; "isSignal": true; }; "summaryDescription": { "alias": "summaryDescription"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "messages": { "alias": "messages"; "required": false; "isSignal": true; }; "nativeValidation": { "alias": "nativeValidation"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "guardUnsaved": { "alias": "guardUnsaved"; "required": false; "isSignal": true; }; }, { "errorsChange": "errorsChange"; "formSubmit": "formSubmit"; }, never, ["*"], true, never>;
+}
+
+export { FORM_DEFAULTS, SL_FORM_ERROR_MESSAGES, SlForm, SlFormActions, SlFormOwner, SlFormSummary, injectFormDefaults, injectFormErrorMessages, provideFormDefaults, provideFormErrorMessages };
+export type { FormActionsAlign, FormDefaults, FormErrorFocus, FormErrorMessageContext, FormErrorMessages, FormSummaryMode, FormValidate };
+//# sourceMappingURL=slotted-angular-form.d.ts.map

package/types/slotted-angular-form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slotted-angular-form.d.ts","sources":["../../form/src/form-defaults.ts","../../form/src/form-actions.ts","../../form/src/form.ts"],"mappings":"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","names":[]}

package/types/slotted-angular-fullscreen.d.ts

@@ -0,0 +1,145 @@
+import * as _slotted_core_i18n from '@slotted/core/i18n';
+import { PartialMessages, FullscreenMessages } from '@slotted/core/i18n';
+import * as _angular_core from '@angular/core';
+import { InjectionToken, AfterViewInit } from '@angular/core';
+import { FullscreenPolicy, FullscreenNavigationUI, FullscreenError, FullscreenMode } from '@slotted/core/fullscreen';
+export { FullscreenError, FullscreenMode, FullscreenNavigationUI, FullscreenPolicy } from '@slotted/core/fullscreen';
+import { ChangeRequest } from '@slotted/core/state';
+
+type FullscreenTriggerSize = 'sm' | 'md' | 'lg';
+/** `ghost` inside a bar that is already framed; `outline` over content. */
+type FullscreenTriggerVariant = 'ghost' | 'outline';
+interface FullscreenDefaults {
+    mode: FullscreenPolicy;
+    navigationUI: FullscreenNavigationUI;
+    size: FullscreenTriggerSize;
+    variant: FullscreenTriggerVariant;
+}
+declare const FULLSCREEN_DEFAULTS: InjectionToken<FullscreenDefaults>;
+/**
+ * An application decides once whether its regions ask the platform and how the
+ * control is drawn; a region or a control that states any of them itself still
+ * wins. The words come from the language in force (`provideSlotted`).
+ */
+declare function provideFullscreenDefaults(defaults: Partial<FullscreenDefaults>): {
+    provide: InjectionToken<FullscreenDefaults>;
+    useFactory: () => FullscreenDefaults;
+};
+declare function injectFullscreenDefaults(): FullscreenDefaults;
+
+/**
+ * Why the state moved. `escape` is the leave nobody asked for: `Escape` in the
+ * layout, or the agent's own exit in native — a key, F11, its interface.
+ */
+type FullscreenReason = 'pointer' | 'keyboard' | 'escape' | 'programmatic';
+/**
+ * A region the reader can give the whole screen: by the Fullscreen API where
+ * the page may ask, fixed over the page where it may not. At rest it paints
+ * nothing — it is the container the consumer already had — so it is a
+ * directive on that container rather than a wrapper around it.
+ *
+ * `[(fullscreen)]` holds the state; every move is first asked through
+ * `fullscreenChangeRequest`, whose `cancel()` refuses it. `Escape` in native
+ * full screen belongs to the agent, and no listener is written for it; the
+ * leave arrives as a request with the reason `escape`, and the agent has
+ * already left by then.
+ */
+declare class SlFullscreen {
+    readonly fullscreen: _angular_core.ModelSignal<boolean>;
+    /** The value an uncontrolled region starts from, read once. */
+    readonly defaultFullscreen: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** `auto` asks the platform and falls back to the layout; `layout` never asks. */
+    readonly policy: _angular_core.InputSignal<FullscreenPolicy | undefined>;
+    readonly navigationUI: _angular_core.InputSignal<FullscreenNavigationUI | undefined>;
+    /**
+     * Words laid over the catalog of the language in force, key by key: the
+     * control's (`enter`, `exit`) and the announcements (`entered`, `exited`).
+     */
+    readonly messages: _angular_core.InputSignal<PartialMessages<FullscreenMessages> | undefined>;
+    readonly fullscreenChangeRequest: _angular_core.OutputEmitterRef<ChangeRequest<boolean>>;
+    /** The platform was absent or refused. The region is in the layout by then. */
+    readonly fullscreenError: _angular_core.OutputEmitterRef<FullscreenError>;
+    private readonly defaults;
+    private readonly element;
+    /** The way that answered, or `null` while the region is not full screen. */
+    readonly mode: _angular_core.WritableSignal<FullscreenMode | null>;
+    /** Whether the page may ask for native full screen. `false` until rendered. */
+    readonly supported: _angular_core.WritableSignal<boolean>;
+    /** The last refusal, cleared on the next entry. */
+    readonly error: _angular_core.WritableSignal<FullscreenError | null>;
+    /** The family's words in the language in force, with this region's `messages` laid over them. */
+    readonly t: _slotted_core_i18n.FamilyTranslator<FullscreenMessages>;
+    private controller;
+    private agentLeft;
+    constructor();
+    /** Asks to enter. From code the reason is `programmatic`. */
+    enter(reason?: FullscreenReason, source?: unknown): void;
+    exit(reason?: FullscreenReason, source?: unknown): void;
+    toggle(reason?: FullscreenReason, source?: unknown): void;
+    /**
+     * The request, and on acceptance the entry itself — inside the handler that
+     * asked, because the agent grants native full screen only to a request made
+     * during a gesture.
+     */
+    private request;
+    private apply;
+    private options;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlFullscreen, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlFullscreen, "[slFullscreen]", ["slFullscreen"], { "fullscreen": { "alias": "fullscreen"; "required": false; "isSignal": true; }; "defaultFullscreen": { "alias": "defaultFullscreen"; "required": false; "isSignal": true; }; "policy": { "alias": "mode"; "required": false; "isSignal": true; }; "navigationUI": { "alias": "navigationUI"; "required": false; "isSignal": true; }; "messages": { "alias": "messages"; "required": false; "isSignal": true; }; }, { "fullscreen": "fullscreenChange"; "fullscreenChangeRequest": "fullscreenChangeRequest"; "fullscreenError": "fullscreenError"; }, never, never, true, never>;
+}
+/**
+ * The control. Its words and its mark say what the press does next and change
+ * with the state, so it is not a toggle and writes no `aria-pressed` (APG
+ * Button pattern). Inside `[slFullscreen]` it reaches the region by injection;
+ * anywhere else it takes the region's instance: `[slFullscreenTrigger]="fs"`.
+ *
+ * Projected content replaces the words, and an element marked `slFullscreenIcon`
+ * replaces the mark; both can read `fs.fullscreen()` to follow the state.
+ */
+declare class SlFullscreenTrigger implements AfterViewInit {
+    /** The region, when the control is not inside it. */
+    readonly target: _angular_core.InputSignal<"" | SlFullscreen | undefined>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly iconOnly: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly size: _angular_core.InputSignal<FullscreenTriggerSize | undefined>;
+    readonly variant: _angular_core.InputSignal<FullscreenTriggerVariant | undefined>;
+    private readonly defaults;
+    private readonly own;
+    private readonly enclosing;
+    private readonly element;
+    private readonly destroyRef;
+    /** A `type` the consumer wrote survives, read before the host binding writes it. */
+    private readonly writtenType;
+    protected readonly type: string;
+    readonly region: _angular_core.Signal<SlFullscreen | null>;
+    readonly on: _angular_core.Signal<boolean>;
+    protected readonly label: _angular_core.Signal<string>;
+    readonly resolvedSize: _angular_core.Signal<FullscreenTriggerSize>;
+    readonly resolvedVariant: _angular_core.Signal<FullscreenTriggerVariant>;
+    /**
+     * After the view: a `(click)` the consumer wrote on the same element is
+     * bound first, so its `preventDefault()` is read before the family acts.
+     */
+    ngAfterViewInit(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlFullscreenTrigger, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SlFullscreenTrigger, "button[slFullscreenTrigger]", ["slFullscreenTrigger"], { "target": { "alias": "slFullscreenTrigger"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "iconOnly": { "alias": "iconOnly"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, ["[slFullscreenIcon]", "*"], true, never>;
+}
+/**
+ * The part that takes the height the other children of the region leave
+ * while it is full screen — a chart under its header, a document under its
+ * toolbar — and whose first child fills it. A direct child of the region; at
+ * rest it is the element the consumer wrote, unchanged.
+ */
+declare class SlFullscreenContent {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlFullscreenContent, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlFullscreenContent, "[slFullscreenContent]", never, {}, {}, never, never, true, never>;
+}
+/** Marks the consumer's own mark for the control's icon part. */
+declare class SlFullscreenIcon {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlFullscreenIcon, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SlFullscreenIcon, "[slFullscreenIcon]", never, {}, {}, never, never, true, never>;
+}
+
+export { FULLSCREEN_DEFAULTS, SlFullscreen, SlFullscreenContent, SlFullscreenIcon, SlFullscreenTrigger, injectFullscreenDefaults, provideFullscreenDefaults };
+export type { FullscreenDefaults, FullscreenReason, FullscreenTriggerSize, FullscreenTriggerVariant };
+//# sourceMappingURL=slotted-angular-fullscreen.d.ts.map

package/types/slotted-angular-fullscreen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slotted-angular-fullscreen.d.ts","sources":["../../fullscreen/src/fullscreen-defaults.ts","../../fullscreen/src/fullscreen.ts"],"mappings":";;;;;;;;AAGM,KAAM,qBAAqB;AAEjC;KACY,wBAAwB;UAEnB,kBAAkB;UAC3B,gBAAgB;kBACR,sBAAsB;UAC9B,qBAAqB;aAClB,wBAAwB;AAClC;AASD,cAAa,mBAAmB,EAAA,cAAA,CAAA,kBAAA;AAKhC;;;;AAIG;AACH,iBAAgB,yBAAyB,WAAW,OAAO,CAAC,kBAAkB;;sBAG1D,kBAAkB;AAErC;AAED,iBAAgB,wBAAwB,IAAI,kBAAkB;;ACG9D;;;AAGG;AACG,KAAM,gBAAgB;AAE5B;;;;;;;;;;;AAWG;AACH,cAWa,YAAY;yBACJ,aAAA,CAAA,WAAA;;gCAEO,aAAA,CAAA,wBAAA;;qBAEX,aAAA,CAAA,WAAA,CAAA,gBAAA;2BACM,aAAA,CAAA,WAAA,CAAA,sBAAA;AACrB;;;AAGG;uBACc,aAAA,CAAA,WAAA,CAAA,eAAA,CAAA,kBAAA;sCAEe,aAAA,CAAA,gBAAA,CAAA,aAAA;;8BAER,aAAA,CAAA,gBAAA,CAAA,eAAA;AAExB;AACA;;mBAGa,aAAA,CAAA,cAAA,CAAA,cAAA;;wBAEK,aAAA,CAAA,cAAA;;oBAEJ,aAAA,CAAA,cAAA,CAAA,eAAA;;gBAEJ,kBAAA,CAAA,gBAAA,CAAA,kBAAA;;;;;mBAsCI,gBAAiC;kBAIlC,gBAAiC;oBAI/B,gBAAiC;AAIhD;;;;AAIG;AACH;AAiBA;AAYA;oDA/GW,YAAY;sDAAZ,YAAY;AAiIxB;AAUD;;;;;;;;AAQG;AACH,cA4Ba,mBAAoB,YAAW,aAAa;;qBAExC,aAAA,CAAA,WAAA,MAAA,YAAA;uBAGE,aAAA,CAAA,wBAAA;uBACA,aAAA,CAAA,wBAAA;mBACJ,aAAA,CAAA,WAAA,CAAA,qBAAA;sBACG,aAAA,CAAA,WAAA,CAAA,wBAAA;AAEhB;AAEA;AACA;AACA;AACA;;AAEA;AACA;qBAEe,aAAA,CAAA,MAAA,CAAA,YAAA;iBAIJ,aAAA,CAAA,MAAA;AACX,8BAAwB,aAAA,CAAA,MAAA;2BAGH,aAAA,CAAA,MAAA,CAAA,qBAAA;8BACG,aAAA,CAAA,MAAA,CAAA,wBAAA;AAExB;;;AAGG;;oDAlCQ,mBAAmB;sDAAnB,mBAAmB;AA2C/B;AAED;;;;;AAKG;AACH,cAQa,mBAAmB;oDAAnB,mBAAmB;sDAAnB,mBAAmB;AAAG;AAEnC;AACA,cAIa,gBAAgB;oDAAhB,gBAAgB;sDAAhB,gBAAgB;AAAG;;","names":[]}

package/types/slotted-angular-grid.d.ts

@@ -0,0 +1,50 @@
+import * as _angular_core from '@angular/core';
+
+/**
+ * A step on the space scale. Separation is chosen from the scale rather than
+ * stated as a length, so a theme retunes every layout at once and no component
+ * invents a rhythm of its own. `0` is the absence of separation.
+ */
+type GridGap = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+/**
+ * A ceiling on the number of tracks, not a promise of them. The grid drops a
+ * column whenever keeping it would take a cell below `minItemWidth`.
+ */
+type GridColumns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+/** The narrowest a cell may become before the grid drops a column. */
+type GridMinItemWidth = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/** Across the flow, which for a cell is the block axis. */
+type GridAlign = 'start' | 'center' | 'end' | 'stretch';
+/** Along the flow, which for a cell is the inline axis. */
+type GridJustify = 'start' | 'center' | 'end' | 'stretch';
+/**
+ * Grid arranges its children across two axes and reflows by measuring itself
+ * rather than the viewport, so no breakpoint appears anywhere in the family. It
+ * paints nothing and adds no semantics: the element is the one the consumer
+ * wrote.
+ *
+ * It is not the APG grid widget. There is no `role="grid"`, no cell and no
+ * arrow-key navigation: this family lays children out, and the children keep
+ * whatever semantics they already had.
+ *
+ * The count travels as a custom property as well as an attribute, because a
+ * track function cannot read an integer from an attribute.
+ */
+declare class SlGrid {
+    /** Positions a child across the flow, inside its own cell. */
+    readonly align: _angular_core.InputSignal<GridAlign | undefined>;
+    /** At most this many tracks. Absent, the grid fits as many as it can. */
+    readonly columns: _angular_core.InputSignal<GridColumns | undefined>;
+    /** Separation between cells, as a step on the space scale. */
+    readonly gap: _angular_core.InputSignal<GridGap | undefined>;
+    /** Positions a child along the flow, inside its own cell. */
+    readonly justify: _angular_core.InputSignal<GridJustify | undefined>;
+    /** The narrowest a cell may become before a column is dropped. */
+    readonly minItemWidth: _angular_core.InputSignal<GridMinItemWidth | undefined>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlGrid, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SlGrid, "[slGrid]", ["slGrid"], { "align": { "alias": "align"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; "justify": { "alias": "justify"; "required": false; "isSignal": true; }; "minItemWidth": { "alias": "minItemWidth"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+export { SlGrid };
+export type { GridAlign, GridColumns, GridGap, GridJustify, GridMinItemWidth };
+//# sourceMappingURL=slotted-angular-grid.d.ts.map

package/types/slotted-angular-grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slotted-angular-grid.d.ts","sources":["../../grid/src/grid.ts"],"mappings":";;AAEA;;;;AAIG;AACG,KAAM,OAAO;AAEnB;;;AAGG;AACG,KAAM,WAAW;AAEvB;AACM,KAAM,gBAAgB;AAE5B;AACM,KAAM,SAAS;AAErB;AACM,KAAM,WAAW;AAEvB;;;;;;;;;;;;AAYG;AACH,cAsBa,MAAM;;oBAEH,aAAA,CAAA,WAAA,CAAA,SAAA;;sBAEE,aAAA,CAAA,WAAA,CAAA,WAAA;;kBAEJ,aAAA,CAAA,WAAA,CAAA,OAAA;;sBAEI,aAAA,CAAA,WAAA,CAAA,WAAA;;2BAEK,aAAA,CAAA,WAAA,CAAA,gBAAA;oDAVV,MAAM;sDAAN,MAAM;AAWlB;;","names":[]}

package/types/slotted-angular-highlight.d.ts

@@ -0,0 +1,93 @@
+import * as _slotted_core_highlight from '@slotted/core/highlight';
+import { HighlightMatchOptions, HighlightRange, HighlightMatcher } from '@slotted/core/highlight';
+export { HighlightMatchOptions, HighlightMatcher, HighlightRange, HighlightRun } from '@slotted/core/highlight';
+import * as _angular_core from '@angular/core';
+import { InjectionToken } from '@angular/core';
+
+type HighlightOccurrences = NonNullable<HighlightMatchOptions['occurrences']>;
+type HighlightSensitivity = NonNullable<HighlightMatchOptions['sensitivity']>;
+/** What an application sets once for every mark under it. */
+interface HighlightDefaults {
+    /** BCP 47. `undefined` asks the runtime. */
+    locale: string | undefined;
+    /** `base`: `resume` finds `Resumé`, as `typeahead` and `createFilter` compare. */
+    sensitivity: HighlightSensitivity;
+    /** `all`: every place a query appears; `first`: one span per query. */
+    occurrences: HighlightOccurrences;
+}
+declare const HIGHLIGHT_DEFAULTS: InjectionToken<HighlightDefaults>;
+/**
+ * An application decides once which locale its marks compare in, how strict
+ * the comparison is, and whether every occurrence is marked. A mark that
+ * states any of them itself still wins: an explicit input is never overridden
+ * by the token. A host — `combobox`, `select` — passes the locale its filter
+ * used, which is the same rule from the other side.
+ */
+declare function provideHighlightDefaults(defaults: Partial<HighlightDefaults>): {
+    provide: InjectionToken<HighlightDefaults>;
+    useFactory: () => HighlightDefaults;
+};
+/** What a mark compares with here, before it states anything of its own. */
+declare function injectHighlightDefaults(): HighlightDefaults;
+
+/**
+ * The spans of a text a query found, marked.
+ *
+ * The component is written on the consumer's own element — the `span` that
+ * holds an option's label, the `p` under a find bar — which is the element
+ * that holds the text and the reason this binding needs no `render` input:
+ * substituting the element is Angular's default. The `mark` inside it is
+ * fixed; it is the element the HTML Standard defines for the term searched
+ * for inside a result.
+ *
+ * It is content, not a control: nothing here is focusable and nothing answers
+ * a key. What is marked is decided by `@slotted/core/highlight`, the same scan
+ * `combobox`'s filter decides with. `text` is a string and the runs are
+ * slices of it; nothing is projected, because a `mark` inside projected
+ * content would be HTML the family interpreted.
+ *
+ * Every space in this template is load-bearing: a newline between two nodes
+ * collapses into a space, and a space between two runs is a space inside the
+ * text.
+ */
+declare class SlHighlight {
+    /**
+     * The text, whole. It is the only content the family renders: nothing in it
+     * is HTML, and a run is a slice of it.
+     */
+    readonly text: _angular_core.InputSignal<string>;
+    /** One query or several. Empty and whitespace-only entries find nothing. */
+    readonly query: _angular_core.InputSignal<string | readonly string[] | undefined>;
+    /**
+     * Spans already found — by a server, by a fuzzy engine — in the text's own
+     * code units. Wins over `query` and `matcher`; normalised like either.
+     */
+    readonly ranges: _angular_core.InputSignal<readonly HighlightRange[] | undefined>;
+    /** Replaces the default matcher. Loses to `ranges`. */
+    readonly matcher: _angular_core.InputSignal<HighlightMatcher | undefined>;
+    /**
+     * The match a find bar is standing on, counting matches only. It is stated,
+     * never moved: the family has no keyboard. Out of range marks nothing.
+     */
+    readonly current: _angular_core.InputSignal<number | undefined>;
+    /** Defaults to the provider, then to the runtime's locale. */
+    readonly locale: _angular_core.InputSignal<string | undefined>;
+    /** Defaults to the provider, then to `base`. */
+    readonly sensitivity: _angular_core.InputSignal<HighlightSensitivity | undefined>;
+    /** Defaults to the provider, then to `all`. */
+    readonly occurrences: _angular_core.InputSignal<HighlightOccurrences | undefined>;
+    /**
+     * Steps the marks down without claiming the row's semantics. The row above
+     * already says it with `data-disabled`, and the sheet reads that too.
+     */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    private readonly defaults;
+    /** The runs the template renders; a consumer counting matches reads it too. */
+    readonly runs: _angular_core.Signal<_slotted_core_highlight.HighlightRun[]>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SlHighlight, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SlHighlight, "[slHighlight]", ["slHighlight"], { "text": { "alias": "text"; "required": true; "isSignal": true; }; "query": { "alias": "query"; "required": false; "isSignal": true; }; "ranges": { "alias": "ranges"; "required": false; "isSignal": true; }; "matcher": { "alias": "matcher"; "required": false; "isSignal": true; }; "current": { "alias": "current"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "sensitivity": { "alias": "sensitivity"; "required": false; "isSignal": true; }; "occurrences": { "alias": "occurrences"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { HIGHLIGHT_DEFAULTS, SlHighlight, injectHighlightDefaults, provideHighlightDefaults };
+export type { HighlightDefaults, HighlightOccurrences, HighlightSensitivity };
+//# sourceMappingURL=slotted-angular-highlight.d.ts.map

package/types/slotted-angular-highlight.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slotted-angular-highlight.d.ts","sources":["../../highlight/src/highlight-defaults.ts","../../highlight/src/highlight.ts"],"mappings":";;;;;;AAWM,KAAM,oBAAoB,GAAG,WAAW,CAAC,qBAAqB;AAC9D,KAAM,oBAAoB,GAAG,WAAW,CAAC,qBAAqB;AAEpE;UACiB,iBAAiB;;AAEhC;;iBAEa,oBAAoB;;iBAEpB,oBAAoB;AAClC;AAQD,cAAa,kBAAkB,EAAA,cAAA,CAAA,iBAAA;AAQ/B;;;;;;AAMG;AACH,iBAAgB,wBAAwB,WAAW,OAAO,CAAC,iBAAiB;;sBAGxD,iBAAiB;AAMpC;AAED;AACA,iBAAgB,uBAAuB,IAAI,iBAAiB;;AC1C5D;;;;;;;;;;;;;;;;;;;AAmBG;AACH,cAea,WAAW;AACtB;;;AAGG;mBACU,aAAA,CAAA,WAAA;;oBAEC,aAAA,CAAA,WAAA;AACd;;;AAGG;qBACY,aAAA,CAAA,WAAA,UAAA,cAAA;;sBAEC,aAAA,CAAA,WAAA,CAAA,gBAAA;AAChB;;;AAGG;sBACa,aAAA,CAAA,WAAA;;qBAED,aAAA,CAAA,WAAA;;0BAEK,aAAA,CAAA,WAAA,CAAA,oBAAA;;0BAEA,aAAA,CAAA,WAAA,CAAA,oBAAA;AACpB;;;AAGG;uBACc,aAAA,CAAA,wBAAA;AAEjB;;mBAGa,aAAA,CAAA,MAAA,CAAA,uBAAA,CAAA,YAAA;oDAnCF,WAAW;sDAAX,WAAW;AA6CvB;;","names":[]}