@flyos/design-system 3.8.0 → 3.9.0

package/fesm2022/flyos-design-system.mjs

@@ -47,7 +47,7 @@ import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
 // tools/publish-library.ps1 at bump time, and asserted by the spec beside this file.
 // Used only for the diagnostic message; the duplicate-instance detection itself is
 // version-agnostic, so a stale literal misnames a fork rather than hiding one.
-const FLY_DS_VERSION = '3.8.0';
+const FLY_DS_VERSION = '3.9.0';
 const FLY_DS_REGISTRY_KEY = '__FLY_DS_INSTANCES__';
 /**
  * Records this design-system instance on the shared `scope` and returns the
@@ -25320,6 +25320,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
  * Additive a11y the legacy forms lacked: when a `[flyControl]` is projected,
  * the field wires `aria-invalid`, `aria-describedby` (hint + error) and —
  * unless the control brings its own `aria-label` — `aria-labelledby`.
+ *
+ * The field OWNS `aria-describedby` on the projected control: it rewrites the
+ * attribute whenever the hint or error changes and removes it when neither is
+ * present, so an id set on the control by hand does not survive. To add a
+ * description that lives outside the field, use the `describedBy` input.
+ *
  * Clicking the label focuses the control (the legacy `<label class="fld">`
  * wrapper is not portable: composite children may contain their own labels,
  * and nested labels are invalid HTML).
@@ -25331,6 +25337,20 @@ class FlyFieldComponent {
     /** Renders the required asterisk (visual only — validation stays in the page). */
     required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
     hintKey = input(...(ngDevMode ? [undefined, { debugName: "hintKey" }] : /* istanbul ignore next */ []));
+    /**
+     * Space-separated ids of elements OUTSIDE this field that also describe the
+     * control — merged into `aria-describedby` ahead of the field's own hint and
+     * error.
+     *
+     * The hint slot is per-field, so prose describing a COLUMN of repeated fields
+     * (a scale, a unit, a format) has to render once beside the group or be
+     * repeated under every row. Before this input, pointing the controls at that
+     * one paragraph was impossible: the effect below owns `aria-describedby`
+     * outright and silently stripped anything a template set by hand. Callers
+     * must use THIS input rather than an `aria-describedby` attribute for that
+     * reason.
+     */
+    describedBy = input(...(ngDevMode ? [undefined, { debugName: "describedBy" }] : /* istanbul ignore next */ []));
     /** Already-translated error text (NOT an i18n key) — see class docs. */
     error = input(null, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
     /** Spans the full row of a wrapping fly-form-grid (legacy `.fld--full`). */
@@ -25350,6 +25370,7 @@ class FlyFieldComponent {
             else
                 ctrl.removeAttribute('aria-invalid');
             const describedBy = [
+                ...(this.describedBy() ?? '').split(' '),
                 this.hintKey() ? this.hintId : null,
                 err ? this.errorId : null,
             ].filter(Boolean).join(' ');
@@ -25366,7 +25387,7 @@ class FlyFieldComponent {
         this.control()?.element.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: FlyFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyFieldComponent, isStandalone: true, selector: "fly-field", inputs: { labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, hintKey: { classPropertyName: "hintKey", publicName: "hintKey", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.full": "fullWidth()" } }, queries: [{ propertyName: "control", first: true, predicate: FlyControlDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: FlyFieldComponent, isStandalone: true, selector: "fly-field", inputs: { labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, hintKey: { classPropertyName: "hintKey", publicName: "hintKey", isSignal: true, isRequired: false, transformFunction: null }, describedBy: { classPropertyName: "describedBy", publicName: "describedBy", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.full": "fullWidth()" } }, queries: [{ propertyName: "control", first: true, predicate: FlyControlDirective, descendants: true, isSignal: true }], ngImport: i0, template: `
     <div class="fld">
       @if (labelKey(); as key) {
         <span
@@ -25413,7 +25434,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImpo
       }
     </div>
   `, styles: ["@charset \"UTF-8\";:host{display:block;min-width:0}:host(.full){grid-column:1/-1}.fld{display:flex;flex-direction:column;gap:7px;min-width:0}.fld__l{font:var(--nova-font-field-label);letter-spacing:var(--nova-tracking-field-label);color:var(--w6);display:inline-flex;align-items:baseline;gap:3px;cursor:default}.fld__req{color:var(--sys-red-txt);font-style:normal;font-size:inherit}.fld__hint{font:400 11px/1.4 var(--font-family);color:var(--w42)}.fld__err{margin-top:2px;font-size:11px;color:var(--sys-red-txt)}:host ::ng-deep [flyControl]{width:100%;box-sizing:border-box;height:36px;padding:0 11px;border:1px solid var(--w14);border-radius:10px;background:var(--w05);color:var(--w85);font:500 13px/1.3 var(--font-family);min-width:0;max-width:100%;outline:none;transition:border-color var(--nova-duration-hover) var(--nova-ease-micro),background var(--nova-duration-hover) var(--nova-ease-micro)}:host ::ng-deep [flyControl]::placeholder{color:var(--w42)}:host ::ng-deep [flyControl]:hover:not(:disabled){background:var(--w07)}:host ::ng-deep [flyControl]:focus,:host ::ng-deep [flyControl]:focus-visible{outline:none;border-color:var(--accent);background:var(--w07)}:host ::ng-deep [flyControl]:disabled{opacity:.38;filter:saturate(.6);cursor:not-allowed}:host ::ng-deep [flyControl][readonly]{background:var(--w03)}:host ::ng-deep select[flyControl]{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--w45) 50%),linear-gradient(135deg,var(--w45) 50%,transparent 50%);background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-inline-end:32px;cursor:pointer}:host ::ng-deep select[flyControl]::-ms-expand{display:none}:host-context([dir=rtl]) ::ng-deep select[flyControl]{background-position:12px 50%,17px 50%}:host ::ng-deep select[flyControl][multiple]{appearance:none;background-image:none;padding-inline-end:11px;padding-block:4px;height:auto;min-block-size:132px;cursor:default}:host ::ng-deep select[flyControl][multiple] option{padding:4px 7px;border-radius:6px}:host ::ng-deep textarea[flyControl]{height:auto;padding:9px 11px;resize:vertical;min-height:64px;font:400 13px/1.5 var(--font-family)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { labelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelKey", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hintKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintKey", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], control: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FlyControlDirective), { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { labelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelKey", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hintKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "hintKey", required: false }] }], describedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "describedBy", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], control: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FlyControlDirective), { isSignal: true }] }] } });
 
 /**
  * Card-style checkbox row (port of the legacy `.cb-row` — e.g. the