@frame-kit/ui-ng 0.2.11 → 0.2.13

package/DEVELOPMENT_GUIDE.md

@@ -349,6 +349,17 @@ Use section dividers for readability:
 - Use hook classes: `fk-<name>` + modifiers like `fk-<name>--primary`
 - Work correctly with `tokens.base.scss` loaded
 - Work correctly with NO theme file loaded (via fallback values)
+- **Declare `font-family` on any native form control it renders** — `button`,
+  `input`, `select`, `textarea`. These do not inherit typography: the browser
+  substitutes its own UI font, so a control with no declaration renders in
+  Arial (or whatever the platform picks) while the rest of the page uses the
+  app's face. Use `var(--fk-<name>-font-family, inherit)`, so an app that sets
+  no token still gets its own typography.
+
+  This is the one styling omission that is invisible in isolation — a button
+  reviewed on its own looks fine, and the mismatch only appears once it sits
+  beside text in the real face. `fk-button` shipped without it and rendered
+  Arial labels in two products for months.
 
 ### What component SCSS must NEVER do
 

package/fesm2022/frame-kit-ui-ng-forms.mjs

@@ -3189,11 +3189,11 @@ class FieldArrayOutletComponent {
         this.rowRemoved.emit(index);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FieldArrayOutletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: FieldArrayOutletComponent, isStandalone: true, selector: "fk-field-array-outlet", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, formArray: { classPropertyName: "formArray", publicName: "formArray", isSignal: true, isRequired: true, transformFunction: null }, prefixIconTemplate: { classPropertyName: "prefixIconTemplate", publicName: "prefixIconTemplate", isSignal: true, isRequired: false, transformFunction: null }, submitted: { classPropertyName: "submitted", publicName: "submitted", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowAdded: "rowAdded", rowRemoved: "rowRemoved" }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "@if (field().label) {\n  <legend class=\"fk-field-array__legend\">{{ field().label }}</legend>\n}\n@for (row of rows(); track $index) {\n  <div class=\"fk-field-array__row\" [formGroup]=\"row\">\n    @for (childField of field().arrayFields ?? []; track childField.key) {\n      <fk-field-outlet\n        [field]=\"childField\"\n        [form]=\"row\"\n        [submitted]=\"submitted()\"\n        [prefixIconTemplate]=\"prefixIconTemplate()\"\n      />\n    }\n    @if (canRemove()) {\n      <button\n        type=\"button\"\n        class=\"fk-field-array__remove\"\n        aria-label=\"Remove row\"\n        (click)=\"removeRow($index)\"\n      >\n        &times;\n      </button>\n    }\n  </div>\n}\n@if (canAdd()) {\n  <button type=\"button\" class=\"fk-field-array__add\" (click)=\"addRow()\">\n    + Add\n  </button>\n}\n", styles: [":host{display:block}.fk-field-array__legend{font-size:var( --fk-field-array-label-font-size, var(--fk-form-label-font-size, .875rem) );font-weight:var( --fk-field-array-label-font-weight, var(--fk-form-label-font-weight, 500) );color:var( --fk-field-array-label-color, var(--fk-form-label-color, #1f2d3d) )}.fk-field-array__row{display:flex;column-gap:var(--fk-field-array-row-gap, var(--fk-rhythm-3, .75rem));align-items:flex-start;margin-top:var(--fk-field-array-row-gap, var(--fk-rhythm-3, .75rem))}.fk-field-array__legend+.fk-field-array__row{margin-top:var( --fk-field-array-label-gap, var(--fk-form-label-gap, .375rem) )}.fk-field-array__row>fk-field-outlet{flex:1;--fk-form-label-gap: 0}.fk-field-array__remove{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:var(--fk-field-array-remove-size, var(--fk-rhythm-8, 2rem));height:var(--fk-field-array-remove-size, var(--fk-rhythm-8, 2rem));margin-top:var(--fk-field-array-remove-offset, .25rem);padding:0;font-size:1.125rem;line-height:1;color:var(--fk-field-array-remove-color, var(--fk-color-muted, #8a98a8));background:transparent;border:1px solid var( --fk-field-array-remove-border-color, var(--fk-color-border, #d9e2ee) );border-radius:var( --fk-field-array-remove-radius, var(--fk-radius-md, .5rem) );cursor:pointer;transition:color .15s,border-color .15s}.fk-field-array__remove:hover{color:var( --fk-field-array-remove-hover-color, var(--fk-form-error-color, #dc2626) );border-color:var( --fk-field-array-remove-hover-color, var(--fk-form-error-color, #dc2626) )}.fk-field-array__remove:focus-visible{outline:none;box-shadow:var( --fk-field-array-remove-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)) )}.fk-field-array__add{margin-top:var(--fk-field-array-add-gap, var(--fk-rhythm-3, .75rem));padding:var(--fk-field-array-add-padding-y, var(--fk-rhythm-2, .5rem)) var(--fk-field-array-add-padding-x, var(--fk-rhythm-4, 1rem));font-size:var( --fk-field-array-add-font-size, var(--fk-typography-small-font-size, .8125rem) );color:var(--fk-field-array-add-color, var(--fk-color-primary, #0a84ff));background:transparent;border:1px dashed var(--fk-field-array-add-border-color, var(--fk-color-border, #d9e2ee));border-radius:var( --fk-field-array-add-radius, var(--fk-radius-md, .5rem) );cursor:pointer;transition:color .15s,border-color .15s}.fk-field-array__add:hover{border-color:var( --fk-field-array-add-hover-border-color, var(--fk-color-primary, #0a84ff) )}.fk-field-array__add:focus-visible{outline:none;box-shadow:var( --fk-field-array-add-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)) )}\n"], dependencies: [{ kind: "component", type: FieldOutletComponent, selector: "fk-field-outlet", inputs: ["className", "field", "form", "submitted", "prefixIconTemplate"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: FieldArrayOutletComponent, isStandalone: true, selector: "fk-field-array-outlet", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, formArray: { classPropertyName: "formArray", publicName: "formArray", isSignal: true, isRequired: true, transformFunction: null }, prefixIconTemplate: { classPropertyName: "prefixIconTemplate", publicName: "prefixIconTemplate", isSignal: true, isRequired: false, transformFunction: null }, submitted: { classPropertyName: "submitted", publicName: "submitted", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowAdded: "rowAdded", rowRemoved: "rowRemoved" }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "@if (field().label) {\n  <legend class=\"fk-field-array__legend\">{{ field().label }}</legend>\n}\n@for (row of rows(); track $index) {\n  <div class=\"fk-field-array__row\" [formGroup]=\"row\">\n    @for (childField of field().arrayFields ?? []; track childField.key) {\n      <fk-field-outlet\n        [field]=\"childField\"\n        [form]=\"row\"\n        [submitted]=\"submitted()\"\n        [prefixIconTemplate]=\"prefixIconTemplate()\"\n      />\n    }\n    @if (canRemove()) {\n      <button\n        type=\"button\"\n        class=\"fk-field-array__remove\"\n        aria-label=\"Remove row\"\n        (click)=\"removeRow($index)\"\n      >\n        &times;\n      </button>\n    }\n  </div>\n}\n@if (canAdd()) {\n  <button type=\"button\" class=\"fk-field-array__add\" (click)=\"addRow()\">\n    + Add\n  </button>\n}\n", styles: [":host{display:block}.fk-field-array__legend{font-size:var( --fk-field-array-label-font-size, var(--fk-form-label-font-size, .875rem) );font-weight:var( --fk-field-array-label-font-weight, var(--fk-form-label-font-weight, 500) );color:var( --fk-field-array-label-color, var(--fk-form-label-color, #1f2d3d) )}.fk-field-array__add,.fk-field-array__remove{font-family:var(--fk-field-array-font-family, inherit)}.fk-field-array__row{display:flex;column-gap:var(--fk-field-array-row-gap, var(--fk-rhythm-3, .75rem));align-items:flex-start;margin-top:var(--fk-field-array-row-gap, var(--fk-rhythm-3, .75rem))}.fk-field-array__legend+.fk-field-array__row{margin-top:var( --fk-field-array-label-gap, var(--fk-form-label-gap, .375rem) )}.fk-field-array__row>fk-field-outlet{flex:1;--fk-form-label-gap: 0}.fk-field-array__remove{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:var(--fk-field-array-remove-size, var(--fk-rhythm-8, 2rem));height:var(--fk-field-array-remove-size, var(--fk-rhythm-8, 2rem));margin-top:var(--fk-field-array-remove-offset, .25rem);padding:0;font-size:1.125rem;line-height:1;color:var(--fk-field-array-remove-color, var(--fk-color-muted, #8a98a8));background:transparent;border:1px solid var( --fk-field-array-remove-border-color, var(--fk-color-border, #d9e2ee) );border-radius:var( --fk-field-array-remove-radius, var(--fk-radius-md, .5rem) );cursor:pointer;transition:color .15s,border-color .15s}.fk-field-array__remove:hover{color:var( --fk-field-array-remove-hover-color, var(--fk-form-error-color, #dc2626) );border-color:var( --fk-field-array-remove-hover-color, var(--fk-form-error-color, #dc2626) )}.fk-field-array__remove:focus-visible{outline:none;box-shadow:var( --fk-field-array-remove-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)) )}.fk-field-array__add{margin-top:var(--fk-field-array-add-gap, var(--fk-rhythm-3, .75rem));padding:var(--fk-field-array-add-padding-y, var(--fk-rhythm-2, .5rem)) var(--fk-field-array-add-padding-x, var(--fk-rhythm-4, 1rem));font-size:var( --fk-field-array-add-font-size, var(--fk-typography-small-font-size, .8125rem) );color:var(--fk-field-array-add-color, var(--fk-color-primary, #0a84ff));background:transparent;border:1px dashed var(--fk-field-array-add-border-color, var(--fk-color-border, #d9e2ee));border-radius:var( --fk-field-array-add-radius, var(--fk-radius-md, .5rem) );cursor:pointer;transition:color .15s,border-color .15s}.fk-field-array__add:hover{border-color:var( --fk-field-array-add-hover-border-color, var(--fk-color-primary, #0a84ff) )}.fk-field-array__add:focus-visible{outline:none;box-shadow:var( --fk-field-array-add-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)) )}\n"], dependencies: [{ kind: "component", type: FieldOutletComponent, selector: "fk-field-outlet", inputs: ["className", "field", "form", "submitted", "prefixIconTemplate"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FieldArrayOutletComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fk-field-array-outlet', standalone: true, imports: [FieldOutletComponent, ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (field().label) {\n  <legend class=\"fk-field-array__legend\">{{ field().label }}</legend>\n}\n@for (row of rows(); track $index) {\n  <div class=\"fk-field-array__row\" [formGroup]=\"row\">\n    @for (childField of field().arrayFields ?? []; track childField.key) {\n      <fk-field-outlet\n        [field]=\"childField\"\n        [form]=\"row\"\n        [submitted]=\"submitted()\"\n        [prefixIconTemplate]=\"prefixIconTemplate()\"\n      />\n    }\n    @if (canRemove()) {\n      <button\n        type=\"button\"\n        class=\"fk-field-array__remove\"\n        aria-label=\"Remove row\"\n        (click)=\"removeRow($index)\"\n      >\n        &times;\n      </button>\n    }\n  </div>\n}\n@if (canAdd()) {\n  <button type=\"button\" class=\"fk-field-array__add\" (click)=\"addRow()\">\n    + Add\n  </button>\n}\n", styles: [":host{display:block}.fk-field-array__legend{font-size:var( --fk-field-array-label-font-size, var(--fk-form-label-font-size, .875rem) );font-weight:var( --fk-field-array-label-font-weight, var(--fk-form-label-font-weight, 500) );color:var( --fk-field-array-label-color, var(--fk-form-label-color, #1f2d3d) )}.fk-field-array__row{display:flex;column-gap:var(--fk-field-array-row-gap, var(--fk-rhythm-3, .75rem));align-items:flex-start;margin-top:var(--fk-field-array-row-gap, var(--fk-rhythm-3, .75rem))}.fk-field-array__legend+.fk-field-array__row{margin-top:var( --fk-field-array-label-gap, var(--fk-form-label-gap, .375rem) )}.fk-field-array__row>fk-field-outlet{flex:1;--fk-form-label-gap: 0}.fk-field-array__remove{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:var(--fk-field-array-remove-size, var(--fk-rhythm-8, 2rem));height:var(--fk-field-array-remove-size, var(--fk-rhythm-8, 2rem));margin-top:var(--fk-field-array-remove-offset, .25rem);padding:0;font-size:1.125rem;line-height:1;color:var(--fk-field-array-remove-color, var(--fk-color-muted, #8a98a8));background:transparent;border:1px solid var( --fk-field-array-remove-border-color, var(--fk-color-border, #d9e2ee) );border-radius:var( --fk-field-array-remove-radius, var(--fk-radius-md, .5rem) );cursor:pointer;transition:color .15s,border-color .15s}.fk-field-array__remove:hover{color:var( --fk-field-array-remove-hover-color, var(--fk-form-error-color, #dc2626) );border-color:var( --fk-field-array-remove-hover-color, var(--fk-form-error-color, #dc2626) )}.fk-field-array__remove:focus-visible{outline:none;box-shadow:var( --fk-field-array-remove-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)) )}.fk-field-array__add{margin-top:var(--fk-field-array-add-gap, var(--fk-rhythm-3, .75rem));padding:var(--fk-field-array-add-padding-y, var(--fk-rhythm-2, .5rem)) var(--fk-field-array-add-padding-x, var(--fk-rhythm-4, 1rem));font-size:var( --fk-field-array-add-font-size, var(--fk-typography-small-font-size, .8125rem) );color:var(--fk-field-array-add-color, var(--fk-color-primary, #0a84ff));background:transparent;border:1px dashed var(--fk-field-array-add-border-color, var(--fk-color-border, #d9e2ee));border-radius:var( --fk-field-array-add-radius, var(--fk-radius-md, .5rem) );cursor:pointer;transition:color .15s,border-color .15s}.fk-field-array__add:hover{border-color:var( --fk-field-array-add-hover-border-color, var(--fk-color-primary, #0a84ff) )}.fk-field-array__add:focus-visible{outline:none;box-shadow:var( --fk-field-array-add-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)) )}\n"] }]
+            args: [{ selector: 'fk-field-array-outlet', standalone: true, imports: [FieldOutletComponent, ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (field().label) {\n  <legend class=\"fk-field-array__legend\">{{ field().label }}</legend>\n}\n@for (row of rows(); track $index) {\n  <div class=\"fk-field-array__row\" [formGroup]=\"row\">\n    @for (childField of field().arrayFields ?? []; track childField.key) {\n      <fk-field-outlet\n        [field]=\"childField\"\n        [form]=\"row\"\n        [submitted]=\"submitted()\"\n        [prefixIconTemplate]=\"prefixIconTemplate()\"\n      />\n    }\n    @if (canRemove()) {\n      <button\n        type=\"button\"\n        class=\"fk-field-array__remove\"\n        aria-label=\"Remove row\"\n        (click)=\"removeRow($index)\"\n      >\n        &times;\n      </button>\n    }\n  </div>\n}\n@if (canAdd()) {\n  <button type=\"button\" class=\"fk-field-array__add\" (click)=\"addRow()\">\n    + Add\n  </button>\n}\n", styles: [":host{display:block}.fk-field-array__legend{font-size:var( --fk-field-array-label-font-size, var(--fk-form-label-font-size, .875rem) );font-weight:var( --fk-field-array-label-font-weight, var(--fk-form-label-font-weight, 500) );color:var( --fk-field-array-label-color, var(--fk-form-label-color, #1f2d3d) )}.fk-field-array__add,.fk-field-array__remove{font-family:var(--fk-field-array-font-family, inherit)}.fk-field-array__row{display:flex;column-gap:var(--fk-field-array-row-gap, var(--fk-rhythm-3, .75rem));align-items:flex-start;margin-top:var(--fk-field-array-row-gap, var(--fk-rhythm-3, .75rem))}.fk-field-array__legend+.fk-field-array__row{margin-top:var( --fk-field-array-label-gap, var(--fk-form-label-gap, .375rem) )}.fk-field-array__row>fk-field-outlet{flex:1;--fk-form-label-gap: 0}.fk-field-array__remove{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:var(--fk-field-array-remove-size, var(--fk-rhythm-8, 2rem));height:var(--fk-field-array-remove-size, var(--fk-rhythm-8, 2rem));margin-top:var(--fk-field-array-remove-offset, .25rem);padding:0;font-size:1.125rem;line-height:1;color:var(--fk-field-array-remove-color, var(--fk-color-muted, #8a98a8));background:transparent;border:1px solid var( --fk-field-array-remove-border-color, var(--fk-color-border, #d9e2ee) );border-radius:var( --fk-field-array-remove-radius, var(--fk-radius-md, .5rem) );cursor:pointer;transition:color .15s,border-color .15s}.fk-field-array__remove:hover{color:var( --fk-field-array-remove-hover-color, var(--fk-form-error-color, #dc2626) );border-color:var( --fk-field-array-remove-hover-color, var(--fk-form-error-color, #dc2626) )}.fk-field-array__remove:focus-visible{outline:none;box-shadow:var( --fk-field-array-remove-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)) )}.fk-field-array__add{margin-top:var(--fk-field-array-add-gap, var(--fk-rhythm-3, .75rem));padding:var(--fk-field-array-add-padding-y, var(--fk-rhythm-2, .5rem)) var(--fk-field-array-add-padding-x, var(--fk-rhythm-4, 1rem));font-size:var( --fk-field-array-add-font-size, var(--fk-typography-small-font-size, .8125rem) );color:var(--fk-field-array-add-color, var(--fk-color-primary, #0a84ff));background:transparent;border:1px dashed var(--fk-field-array-add-border-color, var(--fk-color-border, #d9e2ee));border-radius:var( --fk-field-array-add-radius, var(--fk-radius-md, .5rem) );cursor:pointer;transition:color .15s,border-color .15s}.fk-field-array__add:hover{border-color:var( --fk-field-array-add-hover-border-color, var(--fk-color-primary, #0a84ff) )}.fk-field-array__add:focus-visible{outline:none;box-shadow:var( --fk-field-array-add-focus-ring, var(--fk-focus-ring, 0 0 0 3px rgba(10, 132, 255, .18)) )}\n"] }]
         }], propDecorators: { className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], formArray: [{ type: i0.Input, args: [{ isSignal: true, alias: "formArray", required: true }] }], prefixIconTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixIconTemplate", required: false }] }], submitted: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitted", required: false }] }], rowAdded: [{ type: i0.Output, args: ["rowAdded"] }], rowRemoved: [{ type: i0.Output, args: ["rowRemoved"] }], hostClass: [{
                 type: HostBinding,
                 args: ['class']