@retalia/pos-components 0.0.7 → 0.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retalia/pos-components",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"

package/styles/styles.css

@@ -1 +1,2 @@
+@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@300;400;500;600;700&display=swap');
 @import './tokens.css';

package/styles/tokens.css

@@ -1,5 +1,5 @@
 :root {
-  /* Color — aligned with Retalia DX theme (dx.generic.Retalia-DX-Theme) */
+  /* Color — white surfaces from the POS POC. Coral, mint, and lilac stay on confirm, cancel, and primary actions. */
   --pos-color-primary: #c9b5f0;
   --pos-color-on-primary: #333333;
   --pos-color-success: #16dbcc;
@@ -8,22 +8,22 @@
   --pos-color-on-danger: #ffffff;
   --pos-color-secondary: #16dbcc;
   --pos-color-warning: #f0ad4e;
-  --pos-color-text: #333333;
-  --pos-color-text-muted: #999999;
+  --pos-color-text: #1a1a1a;
+  --pos-color-text-muted: #666a70;
   --pos-color-surface: #ffffff;
-  --pos-color-surface-muted: #f5f5f5;
-  --pos-color-panel: #f5f5f5;
+  --pos-color-surface-muted: #f5f5f7;
+  --pos-color-panel: #ffffff;
   --pos-color-panel-elevated: #ffffff;
-  --pos-color-ink: #333333;
-  --pos-color-border: #dddddd;
+  --pos-color-ink: #1a1a1a;
+  --pos-color-border: #ececf0;
   --pos-color-disabled: #dddddd;
   --pos-color-on-disabled: #999999;
-  --pos-color-display: #333333;
+  --pos-color-display: #1a1a1a;
   --pos-color-on-display: #ffffff;
   --pos-color-key: #ffffff;
-  --pos-color-key-border: #dddddd;
-  --pos-color-key-active: #c9b5f0;
-  --pos-color-on-key-active: #333333;
+  --pos-color-key-border: #ececf0;
+  --pos-color-key-active: #f0e6fd;
+  --pos-color-on-key-active: #1a1a1a;
 
   /* Shape / size */
   --pos-radius-sm: 4px;
@@ -35,16 +35,22 @@
   --pos-keypad-size-md: 3.75rem;
   --pos-keypad-size-lg: 4.25rem;
 
-  /* Type — Inter stack matches DX Retalia theme */
-  --pos-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  --pos-font-family-display: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  /* Type — Chakra Petch body and Helvetica Neue headlines, matching the POS POC */
+  --pos-font-family: 'Chakra Petch', ui-sans-serif, system-ui, sans-serif;
+  --pos-font-family-display: 'Helvetica Neue', Helvetica, Arial, sans-serif;
   --pos-font-size-sm: 0.8125rem;
-  --pos-font-size-md: 0.875rem;
+  --pos-font-size-md: 0.90625rem;
   --pos-font-size-lg: 1.125rem;
   --pos-font-size-xl: 1.375rem;
   --pos-font-weight-semibold: 600;
   --pos-font-weight-bold: 700;
   --pos-letter-spacing-display: 0.28em;
+  --pos-letter-spacing-brand: 0.08em;
+  --pos-letter-spacing-tight: -0.03em;
+
+  /* Elevation */
+  --pos-shadow-key: 0 1px 3px color-mix(in srgb, var(--pos-color-ink) 8%, transparent);
+  --pos-shadow-overlay: 0 var(--pos-space-md) var(--pos-space-2xl) color-mix(in srgb, var(--pos-color-ink) 14%, transparent);
 
   /* Space */
   --pos-space-xs: 4px;

package/types/retalia-pos-components-services.d.ts

@@ -12,13 +12,22 @@ interface PosApiConfig {
     readonly shopContextCookieName: string;
     readonly getAccessToken?: () => string | null;
     readonly getShopContext?: () => string | null;
+    /**
+     * Signed-in clerk number, sent as `Clerk-Context`. There is no cookie for it: the host app
+     * returns it once its clerk sign-in (and password check) has passed, null otherwise.
+     */
+    readonly getClerkContext?: () => string | null;
 }
 declare const DEFAULT_POS_API_CONFIG: PosApiConfig;
 declare const POS_API_CONFIG: InjectionToken<PosApiConfig>;
 declare function readAccessToken(config: PosApiConfig): string | null;
 declare function readShopContext(config: PosApiConfig): string | null;
+declare function readClerkContext(config: PosApiConfig): string | null;
 
-/** Attaches Bearer + Shop-Context from cookies (or host overrides). */
+/**
+ * Attaches Bearer + Shop-Context from cookies (or host overrides), and Clerk-Context once the
+ * host reports a signed-in clerk.
+ */
 declare const posApiInterceptor: HttpInterceptorFn;
 
 interface ClerkSession {
@@ -166,5 +175,5 @@ declare class PosCommandsClient {
     static ɵprov: i0.ɵɵInjectableDeclaration<PosCommandsClient>;
 }
 
-export { ClerkAuthError, ClerkAuthService, DEFAULT_POS_API_CONFIG, POS_API_CONFIG, PosCommandsClient, posApiInterceptor, readAccessToken, readShopContext };
+export { ClerkAuthError, ClerkAuthService, DEFAULT_POS_API_CONFIG, POS_API_CONFIG, PosCommandsClient, posApiInterceptor, readAccessToken, readClerkContext, readShopContext };
 export type { AddItemCommand, Advisory, Basket, BasketLine, ChangeQuantityCommand, ClearBasketCommand, ClerkSession, Constraints, Document, LineDiscount, LineModifier, NewSaleCommand, Payment, PosApiConfig, PosStateEnvelope, Session, TenderCashCommand, Totals, ValidationIssue, Vat, Workflow };

package/types/retalia-pos-components.d.ts

@@ -25,27 +25,50 @@ type LoginStage = 'clerkNumber' | 'password';
 declare class PosLogin {
     readonly errorMessage: _angular_core.InputSignal<string>;
     readonly session: _angular_core.InputSignal<PosLoginSessionState>;
+    readonly heading: _angular_core.InputSignal<string>;
     readonly titleClerkNumber: _angular_core.InputSignal<string>;
     readonly titleClerkPassword: _angular_core.InputSignal<string>;
     readonly nextLabel: _angular_core.InputSignal<string>;
     readonly loginLabel: _angular_core.InputSignal<string>;
+    /** Shop context beside the keypad. Off leaves the keypad on its own. */
+    readonly showAside: _angular_core.InputSignal<boolean>;
+    /** Draws a frame around the login shell. Off by default. */
+    readonly bordered: _angular_core.InputSignal<boolean>;
+    /** When false, the brand image is omitted, including the built-in mark. */
+    readonly showBrandImage: _angular_core.InputSignal<boolean>;
+    /** Partner image URL. Empty, while `showBrandImage` is true, uses the built-in Retalia mark. */
+    readonly brandImage: _angular_core.InputSignal<string>;
+    /** Wordmark after the image. Empty shows no text. */
+    readonly brandLabel: _angular_core.InputSignal<string>;
+    /** First address line under the brand. Empty hides it. */
+    readonly locationName: _angular_core.InputSignal<string>;
+    /** Second address line. Empty hides it. */
+    readonly terminalLine: _angular_core.InputSignal<string>;
+    /** Shop line. Empty hides it. */
+    readonly shopName: _angular_core.InputSignal<string>;
+    readonly dateLabel: _angular_core.InputSignal<string>;
+    readonly posNumberLabel: _angular_core.InputSignal<string>;
+    /** Empty hides the POS number tile. */
+    readonly posNumber: _angular_core.InputSignal<string>;
     readonly action: _angular_core.OutputEmitterRef<PosLoginIntent>;
-    protected readonly keypadRows: readonly (readonly string[])[];
+    protected readonly digitKeys: readonly string[];
     protected readonly inputValue: _angular_core.WritableSignal<string>;
     protected readonly stage: _angular_core.WritableSignal<LoginStage>;
     private readonly clerkNumber;
     protected readonly title: _angular_core.Signal<string>;
     protected readonly maskInput: _angular_core.Signal<boolean>;
+    protected readonly hasEntry: _angular_core.Signal<boolean>;
+    protected readonly displayText: _angular_core.Signal<string>;
     protected readonly showBack: _angular_core.Signal<boolean>;
     protected readonly primaryLabel: _angular_core.Signal<string>;
-    protected readonly primaryEnabled: _angular_core.Signal<boolean>;
     protected readonly interactionLocked: _angular_core.Signal<boolean>;
+    protected readonly shownDate: _angular_core.Signal<string>;
     protected readonly sessionStatusText: _angular_core.Signal<string>;
     protected onKeypad(key: string): void;
     protected onPrimary(): void;
     protected onBack(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<PosLogin, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PosLogin, "pos-login", never, { "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "session": { "alias": "session"; "required": false; "isSignal": true; }; "titleClerkNumber": { "alias": "titleClerkNumber"; "required": false; "isSignal": true; }; "titleClerkPassword": { "alias": "titleClerkPassword"; "required": false; "isSignal": true; }; "nextLabel": { "alias": "nextLabel"; "required": false; "isSignal": true; }; "loginLabel": { "alias": "loginLabel"; "required": false; "isSignal": true; }; }, { "action": "action"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PosLogin, "pos-login", never, { "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "session": { "alias": "session"; "required": false; "isSignal": true; }; "heading": { "alias": "heading"; "required": false; "isSignal": true; }; "titleClerkNumber": { "alias": "titleClerkNumber"; "required": false; "isSignal": true; }; "titleClerkPassword": { "alias": "titleClerkPassword"; "required": false; "isSignal": true; }; "nextLabel": { "alias": "nextLabel"; "required": false; "isSignal": true; }; "loginLabel": { "alias": "loginLabel"; "required": false; "isSignal": true; }; "showAside": { "alias": "showAside"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; "showBrandImage": { "alias": "showBrandImage"; "required": false; "isSignal": true; }; "brandImage": { "alias": "brandImage"; "required": false; "isSignal": true; }; "brandLabel": { "alias": "brandLabel"; "required": false; "isSignal": true; }; "locationName": { "alias": "locationName"; "required": false; "isSignal": true; }; "terminalLine": { "alias": "terminalLine"; "required": false; "isSignal": true; }; "shopName": { "alias": "shopName"; "required": false; "isSignal": true; }; "dateLabel": { "alias": "dateLabel"; "required": false; "isSignal": true; }; "posNumberLabel": { "alias": "posNumberLabel"; "required": false; "isSignal": true; }; "posNumber": { "alias": "posNumber"; "required": false; "isSignal": true; }; }, { "action": "action"; }, never, never, true, never>;
 }
 
 type PosBasketIntent = {
@@ -88,12 +111,12 @@ declare class PosBasket {
     readonly lines: _angular_core.InputSignal<readonly PosBasketLine[]>;
     readonly totals: _angular_core.InputSignal<PosBasketTotals>;
     readonly disabled: _angular_core.InputSignal<boolean>;
+    /** Draws the panel frame. Off by default so the host can sit the basket flush. */
+    readonly bordered: _angular_core.InputSignal<boolean>;
     readonly title: _angular_core.InputSignal<string>;
     readonly emptyMessage: _angular_core.InputSignal<string>;
-    readonly clearLabel: _angular_core.InputSignal<string>;
     readonly action: _angular_core.OutputEmitterRef<PosBasketIntent>;
     protected readonly hasLines: _angular_core.Signal<boolean>;
-    protected readonly canClear: _angular_core.Signal<boolean>;
     protected formatMoney(amount: number): string;
     protected canChangeQuantity(line: PosBasketLine): boolean;
     protected canDecrement(line: PosBasketLine): boolean;
@@ -101,9 +124,41 @@ declare class PosBasket {
     protected onIncrement(line: PosBasketLine): void;
     protected onDecrement(line: PosBasketLine): void;
     protected onVoid(line: PosBasketLine): void;
-    protected onClear(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<PosBasket, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PosBasket, "pos-basket", never, { "lines": { "alias": "lines"; "required": false; "isSignal": true; }; "totals": { "alias": "totals"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "clearLabel": { "alias": "clearLabel"; "required": false; "isSignal": true; }; }, { "action": "action"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PosBasket, "pos-basket", never, { "lines": { "alias": "lines"; "required": false; "isSignal": true; }; "totals": { "alias": "totals"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; }, { "action": "action"; }, never, never, true, never>;
+}
+
+type PosHeaderIntent = {
+    readonly type: 'header.signOut';
+};
+declare class PosHeader {
+    readonly title: _angular_core.InputSignal<string>;
+    readonly context: _angular_core.InputSignal<string>;
+    /** When false, the brand image is omitted, including the built-in mark. */
+    readonly showBrandImage: _angular_core.InputSignal<boolean>;
+    /** Partner image URL. Empty, while `showBrandImage` is true, uses the built-in Retalia mark. */
+    readonly brandImage: _angular_core.InputSignal<string>;
+    /** Wordmark after the image. Empty shows no text. */
+    readonly brandLabel: _angular_core.InputSignal<string>;
+    readonly clerkName: _angular_core.InputSignal<string>;
+    readonly clerkRole: _angular_core.InputSignal<string>;
+    readonly signOutLabel: _angular_core.InputSignal<string>;
+    readonly menuLabel: _angular_core.InputSignal<string>;
+    readonly canSignOut: _angular_core.InputSignal<boolean>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly action: _angular_core.OutputEmitterRef<PosHeaderIntent>;
+    protected readonly menuOpen: _angular_core.WritableSignal<boolean>;
+    protected readonly initial: _angular_core.Signal<string>;
+    protected toggleMenu(): void;
+    protected closeMenu(): void;
+    protected onSignOut(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PosHeader, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PosHeader, "pos-header", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "context": { "alias": "context"; "required": false; "isSignal": true; }; "showBrandImage": { "alias": "showBrandImage"; "required": false; "isSignal": true; }; "brandImage": { "alias": "brandImage"; "required": false; "isSignal": true; }; "brandLabel": { "alias": "brandLabel"; "required": false; "isSignal": true; }; "clerkName": { "alias": "clerkName"; "required": false; "isSignal": true; }; "clerkRole": { "alias": "clerkRole"; "required": false; "isSignal": true; }; "signOutLabel": { "alias": "signOutLabel"; "required": false; "isSignal": true; }; "menuLabel": { "alias": "menuLabel"; "required": false; "isSignal": true; }; "canSignOut": { "alias": "canSignOut"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "action": "action"; }, never, never, true, never>;
+}
+
+declare class PosTransactionActionBar {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PosTransactionActionBar, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PosTransactionActionBar, "pos-transaction-action-bar", never, {}, {}, never, ["*"], true, never>;
 }
 
 type PosItemEntryIntent = {
@@ -112,11 +167,15 @@ type PosItemEntryIntent = {
 };
 declare class PosItemEntry {
     readonly disabled: _angular_core.InputSignal<boolean>;
+    /** Draws the panel frame. Off by default so the host can sit the field flush. */
+    readonly bordered: _angular_core.InputSignal<boolean>;
     readonly errorMessage: _angular_core.InputSignal<string>;
     readonly autofocus: _angular_core.InputSignal<boolean>;
     readonly label: _angular_core.InputSignal<string>;
     readonly placeholder: _angular_core.InputSignal<string>;
-    readonly addLabel: _angular_core.InputSignal<string>;
+    readonly scannerStatus: _angular_core.InputSignal<string>;
+    /** Key that moves focus to the field. Empty hides the hint and the shortcut. */
+    readonly focusHotkey: _angular_core.InputSignal<string>;
     readonly action: _angular_core.OutputEmitterRef<{
         readonly type: "itemEntry.submit";
         readonly reference: string;
@@ -125,16 +184,19 @@ declare class PosItemEntry {
     protected readonly reference: _angular_core.WritableSignal<string>;
     protected readonly canSubmit: _angular_core.Signal<boolean>;
     constructor();
+    protected onDocumentKeydown(event: KeyboardEvent): void;
     protected onInput(event: Event): void;
     protected onSubmit(event: Event): void;
     private focusInput;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<PosItemEntry, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PosItemEntry, "pos-item-entry", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "autofocus": { "alias": "autofocus"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "addLabel": { "alias": "addLabel"; "required": false; "isSignal": true; }; }, { "action": "action"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PosItemEntry, "pos-item-entry", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "autofocus": { "alias": "autofocus"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "scannerStatus": { "alias": "scannerStatus"; "required": false; "isSignal": true; }; "focusHotkey": { "alias": "focusHotkey"; "required": false; "isSignal": true; }; }, { "action": "action"; }, never, never, true, never>;
 }
 
 type PosTenderIntent = {
     readonly type: 'tender.cash';
     readonly amount: number;
+} | {
+    readonly type: 'tender.cancel';
 };
 declare class PosTender {
     /** Display-only amount due from the host envelope — not calculated here. */
@@ -149,23 +211,30 @@ declare class PosTender {
     readonly tenderedLabel: _angular_core.InputSignal<string>;
     readonly changeDueLabel: _angular_core.InputSignal<string>;
     readonly tenderLabel: _angular_core.InputSignal<string>;
+    readonly cancelLabel: _angular_core.InputSignal<string>;
+    readonly hint: _angular_core.InputSignal<string>;
     readonly processingLabel: _angular_core.InputSignal<string>;
-    readonly action: _angular_core.OutputEmitterRef<{
-        readonly type: "tender.cash";
-        readonly amount: number;
-    }>;
-    protected readonly keypadRows: readonly (readonly string[])[];
-    protected readonly amountInput: _angular_core.WritableSignal<string>;
+    readonly action: _angular_core.OutputEmitterRef<PosTenderIntent>;
+    protected readonly coins: readonly number[];
+    protected readonly notes: readonly number[];
+    protected readonly given: _angular_core.WritableSignal<number>;
     protected readonly parsedAmount: _angular_core.Signal<number | null>;
     protected readonly canTender: _angular_core.Signal<boolean>;
     protected readonly hasChangeDue: _angular_core.Signal<boolean>;
-    protected readonly displayTendered: _angular_core.Signal<string>;
+    protected readonly displayGiven: _angular_core.Signal<string>;
+    protected readonly quickAmounts: _angular_core.Signal<number[]>;
     protected readonly statusText: _angular_core.Signal<string>;
     protected formatMoney(amount: number): string;
-    protected onKeypad(key: string): void;
+    protected denominationLabel(amount: number): string;
+    protected quickLabel(amount: number): string;
+    protected isExact(amount: number): boolean;
+    protected addAmount(amount: number): void;
+    protected setAmount(amount: number): void;
+    protected resetAmount(): void;
     protected onTender(): void;
+    protected onCancel(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<PosTender, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PosTender, "pos-tender", never, { "amountDue": { "alias": "amountDue"; "required": false; "isSignal": true; }; "changeDue": { "alias": "changeDue"; "required": false; "isSignal": true; }; "currency": { "alias": "currency"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "amountDueLabel": { "alias": "amountDueLabel"; "required": false; "isSignal": true; }; "tenderedLabel": { "alias": "tenderedLabel"; "required": false; "isSignal": true; }; "changeDueLabel": { "alias": "changeDueLabel"; "required": false; "isSignal": true; }; "tenderLabel": { "alias": "tenderLabel"; "required": false; "isSignal": true; }; "processingLabel": { "alias": "processingLabel"; "required": false; "isSignal": true; }; }, { "action": "action"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PosTender, "pos-tender", never, { "amountDue": { "alias": "amountDue"; "required": false; "isSignal": true; }; "changeDue": { "alias": "changeDue"; "required": false; "isSignal": true; }; "currency": { "alias": "currency"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "amountDueLabel": { "alias": "amountDueLabel"; "required": false; "isSignal": true; }; "tenderedLabel": { "alias": "tenderedLabel"; "required": false; "isSignal": true; }; "changeDueLabel": { "alias": "changeDueLabel"; "required": false; "isSignal": true; }; "tenderLabel": { "alias": "tenderLabel"; "required": false; "isSignal": true; }; "cancelLabel": { "alias": "cancelLabel"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "processingLabel": { "alias": "processingLabel"; "required": false; "isSignal": true; }; }, { "action": "action"; }, never, never, true, never>;
 }
 
 interface PosReceiptIntent {
@@ -216,6 +285,8 @@ declare class PosReceipt {
     readonly payments: _angular_core.InputSignal<readonly PosReceiptPayment[]>;
     readonly document: _angular_core.InputSignal<PosReceiptDocument>;
     readonly disabled: _angular_core.InputSignal<boolean>;
+    /** Draws the panel frame. Off by default so the host can sit the receipt flush. */
+    readonly bordered: _angular_core.InputSignal<boolean>;
     readonly title: _angular_core.InputSignal<string>;
     readonly emptyMessage: _angular_core.InputSignal<string>;
     readonly preparingLabel: _angular_core.InputSignal<string>;
@@ -234,7 +305,7 @@ declare class PosReceipt {
     protected formatMoney(amount: number): string;
     protected onNewSale(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<PosReceipt, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PosReceipt, "pos-receipt", never, { "lines": { "alias": "lines"; "required": false; "isSignal": true; }; "totals": { "alias": "totals"; "required": false; "isSignal": true; }; "payments": { "alias": "payments"; "required": false; "isSignal": true; }; "document": { "alias": "document"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "preparingLabel": { "alias": "preparingLabel"; "required": false; "isSignal": true; }; "readyLabel": { "alias": "readyLabel"; "required": false; "isSignal": true; }; "newSaleLabel": { "alias": "newSaleLabel"; "required": false; "isSignal": true; }; "tenderLabel": { "alias": "tenderLabel"; "required": false; "isSignal": true; }; "amountLabel": { "alias": "amountLabel"; "required": false; "isSignal": true; }; "tenderedLabel": { "alias": "tenderedLabel"; "required": false; "isSignal": true; }; "changeLabel": { "alias": "changeLabel"; "required": false; "isSignal": true; }; }, { "action": "action"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PosReceipt, "pos-receipt", never, { "lines": { "alias": "lines"; "required": false; "isSignal": true; }; "totals": { "alias": "totals"; "required": false; "isSignal": true; }; "payments": { "alias": "payments"; "required": false; "isSignal": true; }; "document": { "alias": "document"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "preparingLabel": { "alias": "preparingLabel"; "required": false; "isSignal": true; }; "readyLabel": { "alias": "readyLabel"; "required": false; "isSignal": true; }; "newSaleLabel": { "alias": "newSaleLabel"; "required": false; "isSignal": true; }; "tenderLabel": { "alias": "tenderLabel"; "required": false; "isSignal": true; }; "amountLabel": { "alias": "amountLabel"; "required": false; "isSignal": true; }; "tenderedLabel": { "alias": "tenderedLabel"; "required": false; "isSignal": true; }; "changeLabel": { "alias": "changeLabel"; "required": false; "isSignal": true; }; }, { "action": "action"; }, never, never, true, never>;
 }
 
 /**
@@ -242,8 +313,8 @@ declare class PosReceipt {
  * The lab never writes that file; edits are live overrides only.
  */
 type PosTokenKind = 'color' | 'length' | 'font-family' | 'font-weight' | 'other';
-type PosTokenGroup = 'color' | 'radius' | 'space' | 'type' | 'control';
-type PosTokenPreview = 'color' | 'radius' | 'space' | 'font-size' | 'font-family' | 'font-weight' | 'letter-spacing' | 'size';
+type PosTokenGroup = 'color' | 'radius' | 'space' | 'type' | 'shadow' | 'control';
+type PosTokenPreview = 'color' | 'radius' | 'space' | 'font-size' | 'font-family' | 'font-weight' | 'letter-spacing' | 'shadow' | 'size';
 interface PosTokenSwatch {
     readonly name: string;
     readonly variable: string;
@@ -265,6 +336,7 @@ declare class PosTokens {
     protected readonly radiusTokens: readonly PosTokenDefinition[];
     protected readonly spaceTokens: readonly PosTokenDefinition[];
     protected readonly typeTokens: readonly PosTokenDefinition[];
+    protected readonly shadowTokens: readonly PosTokenDefinition[];
     protected readonly controlTokens: readonly PosTokenDefinition[];
     private readonly overrides;
     protected readonly selection: _angular_core.WritableSignal<PosTokenSelection | null>;
@@ -296,5 +368,5 @@ declare class PosTokens {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<PosTokens, "pos-tokens", never, {}, {}, never, never, true, never>;
 }
 
-export { PosBasket, PosItemEntry, PosLogin, PosReceipt, PosTender, PosTokens };
-export type { PosBasketIntent, PosBasketLine, PosBasketTotals, PosBasketVat, PosItemEntryIntent, PosLoginIntent, PosLoginSessionState, PosLoginSessionStatus, PosReceiptDocument, PosReceiptIntent, PosReceiptLine, PosReceiptPayment, PosReceiptTotals, PosReceiptVat, PosTenderIntent, PosTokenSwatch };
+export { PosBasket, PosHeader, PosItemEntry, PosLogin, PosReceipt, PosTender, PosTokens, PosTransactionActionBar };
+export type { PosBasketIntent, PosBasketLine, PosBasketTotals, PosBasketVat, PosHeaderIntent, PosItemEntryIntent, PosLoginIntent, PosLoginSessionState, PosLoginSessionStatus, PosReceiptDocument, PosReceiptIntent, PosReceiptLine, PosReceiptPayment, PosReceiptTotals, PosReceiptVat, PosTenderIntent, PosTokenSwatch };