@atelier-ui/angular 0.2.39 → 0.2.40

package/fesm2022/atelier-ui-angular.mjs

@@ -252,10 +252,10 @@ const ATL_ICON_GEOMETRY = {
 };
 
 /**
- * Vector icon. 23 named variants, drawn from the geometry in `icons.ts` so the
- * same shape is used everywhere it appears. Matches the Figma `AtlIcon`
- * component set. Decorative by default; pass `label` to announce a meaning
- * to assistive tech.
+ * Vector icon. Renders whichever `AtlIconName` variant is passed, drawn from
+ * the geometry in `icons.ts` so the same shape is used everywhere it appears.
+ * Matches the Figma `AtlIcon` component set. Decorative by default; pass
+ * `label` to announce a meaning to assistive tech.
  *
  * Usage:
  * ```html
@@ -1690,13 +1690,14 @@ class AtlSelect {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: AtlSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: AtlSelect, isStandalone: true, selector: "atl-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, host: { attributes: { "role": "combobox" }, listeners: { "keydown": "onKeydown($event)" }, properties: { "class": "hostClasses()", "attr.aria-required": "required() || null", "attr.aria-label": "null" } }, providers: [{ provide: ATL_SELECT, useExisting: AtlSelect }], viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: AtlSelect, isStandalone: true, selector: "atl-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange" }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "class": "hostClasses()", "attr.aria-label": "null" } }, providers: [{ provide: ATL_SELECT, useExisting: AtlSelect }], viewQueries: [{ propertyName: "panelRef", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: `
     @if (label()) {
       <label [attr.for]="triggerId">{{ label() }}</label>
     }
     <button
       type="button"
       class="trigger"
+      role="combobox"
       [id]="triggerId"
       [attr.aria-expanded]="isOpen()"
       aria-haspopup="listbox"
@@ -1705,6 +1706,7 @@ class AtlSelect {
       [attr.aria-label]="ariaLabel() || null"
       [attr.aria-invalid]="invalid() || null"
       [attr.aria-describedby]="showErrors() ? errorId : null"
+      [attr.aria-required]="required() || null"
       [attr.disabled]="disabled() || null"
       (click)="onTriggerClick()"
       (blur)="onTriggerBlur()"
@@ -1748,6 +1750,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
     <button
       type="button"
       class="trigger"
+      role="combobox"
       [id]="triggerId"
       [attr.aria-expanded]="isOpen()"
       aria-haspopup="listbox"
@@ -1756,6 +1759,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
       [attr.aria-label]="ariaLabel() || null"
       [attr.aria-invalid]="invalid() || null"
       [attr.aria-describedby]="showErrors() ? errorId : null"
+      [attr.aria-required]="required() || null"
       [attr.disabled]="disabled() || null"
       (click)="onTriggerClick()"
       (blur)="onTriggerBlur()"
@@ -1789,17 +1793,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
       </div>
     }
   `, host: {
-                        role: 'combobox',
                         '[class]': 'hostClasses()',
-                        '[attr.aria-required]': 'required() || null',
                         '(keydown)': 'onKeydown($event)',
                         // Same fix as atl-input.ts's `id`: a static `aria-label="…"` attribute
                         // matches the aliased `ariaLabel` input below AND stays on this host
-                        // element too. The host already carries `role="combobox"`, so an
-                        // aria-label here would actually take effect — as a second, competing
-                        // name next to the trigger button's, not as a no-op like on Input's
-                        // roleless host. Force it absent so the trigger button (the actual
-                        // focusable widget) is the one and only place the name lands.
+                        // element too. The host itself carries no `role` (moved to the trigger
+                        // button below — see ADR-0109, which also moved `role="combobox"` and
+                        // `aria-required` off this host for the same reason: they describe the
+                        // combobox widget, and the button, not this host, is that widget). So an
+                        // undefended aria-label here is a harmless no-op today — exactly Dialog's
+                        // and Table's roleless-host situation — but stays defended anyway per
+                        // ADR-0092/check:host-guards: silently useless today, silently wrong the
+                        // day this host ever gains a role again. Force it absent so the trigger
+                        // button (the actual focusable widget) is the one and only place the
+                        // name lands.
                         '[attr.aria-label]': 'null',
                     }, providers: [{ provide: ATL_SELECT, useExisting: AtlSelect }], styles: [":host,:host *{box-sizing:border-box}:host{display:inline-block;position:relative;font-family:var(--ui-font-family);line-height:var(--ui-line-height-tight);font-size:var(--ui-font-size-md)}.trigger{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:var(--ui-control-height-md);box-sizing:border-box;line-height:var(--ui-line-height-tight);padding:calc((var(--ui-control-height-md) - var(--ui-line-height-tight) * var(--ui-font-size-md)) / 2 - var(--ui-border-width)) var(--ui-spacing-4);font-family:inherit;font-size:inherit;color:var(--ui-color-text);background-color:var(--ui-color-input-bg);border:var(--ui-border-width) solid var(--ui-color-input-border);border-radius:var(--ui-radius-md);outline:none;cursor:pointer;transition:border-color var(--ui-transition-fast),box-shadow var(--ui-transition-fast),background-color var(--ui-transition-fast)}.trigger:hover:not(:disabled){border-color:var(--ui-color-input-border-hover)}.trigger:focus-visible,:host(.is-open) .trigger{border-color:var(--ui-color-input-border-focus);box-shadow:var(--ui-focus-ring)}.trigger:disabled{opacity:var(--ui-opacity-disabled);cursor:not-allowed}:host(.is-invalid) .trigger{border-color:var(--ui-color-input-border-invalid)}:host(.is-disabled){opacity:var(--ui-opacity-disabled);cursor:not-allowed}.trigger-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.trigger-icon{flex-shrink:0;margin-left:var(--ui-spacing-1);color:var(--ui-color-text-muted);transition:transform var(--ui-transition-fast)}:host(.is-open) .trigger-icon{transform:rotate(180deg)}.panel{position:absolute;left:0;top:calc(100% + var(--ui-spacing-2));width:100%;max-height:16rem;overflow-y:auto;margin:0;padding:var(--ui-spacing-2) 0;background-color:var(--ui-color-surface-raised);border:var(--ui-border-width) solid var(--ui-color-border);border-radius:var(--ui-radius-md);box-shadow:var(--ui-shadow-lg);z-index:var(--ui-z-dropdown);display:none}.panel.is-open{display:block}.errors{margin-top:var(--ui-spacing-2)}.error-message{margin:0;font-size:var(--ui-font-size-sm);color:var(--ui-color-error-text)}.invalid-slot{flex-shrink:0;width:1rem;height:1rem;margin-left:var(--ui-spacing-2)}:host(.is-invalid) .invalid-icon{color:var(--ui-color-danger);pointer-events:none}\n"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], panelRef: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }] } });