@akcelik/strct 4.1.0 → 4.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/fesm2022/akcelik-strct.mjs +171 -43
  2. package/fesm2022/akcelik-strct.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/types/akcelik-strct.d.ts +38 -5
package/fesm2022/akcelik-strct.mjs CHANGED
@@ -2340,6 +2340,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
2340
2340
  `, host: { class: 'strct-tabs' }, styles: [".strct-tabs{display:block}.strct-tabs__bar{display:flex;gap:2px;border-bottom:1px solid var(--b2);overflow-x:auto;white-space:nowrap;scrollbar-width:none}.strct-tabs__btn{appearance:none;background:transparent;border:0;cursor:pointer;font-family:var(--font);font-size:13px;font-weight:500;color:var(--t2);padding:9px 14px;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .14s ease,border-color .14s ease}.strct-tabs__btn:hover{color:var(--t1)}.strct-tabs__btn--active{color:var(--acc);border-bottom-color:var(--acc)}.strct-tabs__btn:disabled{color:var(--t4);cursor:not-allowed}.strct-tabs__panels{padding-top:16px}.strct-tab[hidden]{display:none}\n"] }]
2341
2341
  }], ctorParameters: () => [], propDecorators: { tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrctTab), { isSignal: true }] }], selectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIndex", required: false }] }, { type: i0.Output, args: ["selectedIndexChange"] }], keepAlive: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepAlive", required: false }] }] } });
2342
2342
 
2343
+ let menuPanelCounter = 0;
2343
2344
  /**
2344
2345
  * Floating menu panel — portaled into `<body>` (so it escapes overflow /
2345
2346
  * transform clipping), positioned by its real measured size, with full keyboard
@@ -2381,15 +2382,26 @@ class StrctMenuPanel {
2381
2382
  ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
2382
2383
  openSubIndex = signal(null, /* @ts-ignore */
2383
2384
  ...(ngDevMode ? [{ debugName: "openSubIndex" }] : /* istanbul ignore next */ []));
2385
+ /** Entries the keyboard visits: not dividers, and not a disabled entry that
2386
+ * has nothing to say — a disabled entry WITH a hint is reachable so its
2387
+ * reason can be read. (Before, disabled entries were "visited" but a
2388
+ * natively disabled button refused focus, stranding the keyboard.) */
2384
2389
  navIndices = computed(() => this.items()
2385
- .map((it, i) => (it.divider ? -1 : i))
2390
+ .map((it, i) => (it.divider || (it.disabled && !it.hint) ? -1 : i))
2386
2391
  .filter((i) => i >= 0), /* @ts-ignore */
2387
2392
  ...(ngDevMode ? [{ debugName: "navIndices" }] : /* istanbul ignore next */ []));
2393
+ uid = ++menuPanelCounter;
2394
+ hintId(i) {
2395
+ return `strct-menu-${this.uid}-hint-${i}`;
2396
+ }
2388
2397
  constructor() {
2389
2398
  this.posX.set(this.x());
2390
2399
  this.posY.set(this.y());
2391
2400
  afterNextRender(() => {
2392
- this.activeIndex.set(this.navIndices()[0] ?? 0);
2401
+ // Open on the first entry that can act; a disabled-but-hinted one is
2402
+ // reachable by arrow keys, not the landing spot.
2403
+ const nav = this.navIndices();
2404
+ this.activeIndex.set(nav.find((i) => !this.items()[i].disabled) ?? nav[0] ?? 0);
2393
2405
  this.clampToViewport();
2394
2406
  this.focusItem(this.activeIndex());
2395
2407
  });
@@ -2441,7 +2453,7 @@ class StrctMenuPanel {
2441
2453
  onHover(i) {
2442
2454
  this.activeIndex.set(i);
2443
2455
  const it = this.items()[i];
2444
- this.openSubIndex.set(it?.children?.length ? i : null);
2456
+ this.openSubIndex.set(it?.children?.length && !it.disabled ? i : null);
2445
2457
  }
2446
2458
  onLeave(i) {
2447
2459
  if (this.openSubIndex() === i)
@@ -2487,7 +2499,7 @@ class StrctMenuPanel {
2487
2499
  this.focusItem(this.navIndices().at(-1) ?? 0);
2488
2500
  break;
2489
2501
  case 'ArrowRight':
2490
- if (item?.children?.length) {
2502
+ if (item?.children?.length && !item.disabled) {
2491
2503
  event.preventDefault();
2492
2504
  event.stopPropagation();
2493
2505
  this.openSubIndex.set(this.activeIndex());
@@ -2532,13 +2544,21 @@ class StrctMenuPanel {
2532
2544
  <div class="strct-menu__sep" role="separator"></div>
2533
2545
  } @else {
2534
2546
  <div class="strct-menu__wrap" (mouseenter)="onHover(i)" (mouseleave)="onLeave(i)">
2547
+ <!-- aria-disabled, not [disabled]: a natively disabled button takes no
2548
+ focus and, in some browsers, no pointer events — so neither the
2549
+ keyboard nor the hint's tooltip could reach it. Activation is
2550
+ blocked in code. The tooltip sits on the button, not the wrapper:
2551
+ the wrapper also holds the submenu, whose entries would otherwise
2552
+ inherit this entry's title. -->
2535
2553
  <button
2536
2554
  type="button"
2537
2555
  class="strct-menu__item"
2538
2556
  [attr.data-idx]="i"
2539
2557
  [class.strct-menu__item--critical]="item.critical"
2540
2558
  [class.strct-menu__item--active]="i === activeIndex()"
2541
- [disabled]="item.disabled"
2559
+ [attr.aria-disabled]="item.disabled ? 'true' : null"
2560
+ [attr.aria-describedby]="item.hint ? hintId(i) : null"
2561
+ [attr.title]="item.hint || null"
2542
2562
  role="menuitem"
2543
2563
  [attr.aria-haspopup]="item.children?.length ? 'menu' : null"
2544
2564
  [attr.aria-expanded]="item.children?.length ? openSubIndex() === i : null"
@@ -2565,6 +2585,11 @@ class StrctMenuPanel {
2565
2585
  />
2566
2586
  }
2567
2587
  </button>
2588
+ @if (item.hint) {
2589
+ <!-- hidden: kept out of the entry's accessible NAME, yet still read
2590
+ as its description through aria-describedby. -->
2591
+ <span [id]="hintId(i)" hidden>{{ item.hint }}</span>
2592
+ }
2568
2593
  @if (openSubIndex() === i && item.children?.length) {
2569
2594
  <strct-menu-panel
2570
2595
  submenu
@@ -2581,7 +2606,7 @@ class StrctMenuPanel {
2581
2606
  }
2582
2607
  }
2583
2608
  </div>
2584
- `, isInline: true, styles: [".strct-menu-host{display:block}.strct-menu{min-width:180px;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-md);box-shadow:var(--shh);animation:strct-menu-in .1s ease}.strct-menu:focus{outline:none}.strct-menu__wrap{position:relative}.strct-menu__item{display:flex;align-items:center;gap:8px;width:100%;padding:7px 8px 7px 10px;border:0;border-radius:5px;cursor:pointer;background:transparent;color:var(--t1);font-size:13px;font-family:var(--font);text-align:start}.strct-menu__item:hover:not(:disabled),.strct-menu__item--active:not(:disabled){background:var(--bg-3)}.strct-menu__item:focus-visible{outline:none;background:var(--bg-3)}.strct-menu__item--critical{color:var(--critical)}.strct-menu__item--critical:hover:not(:disabled),.strct-menu__item--critical.strct-menu__item--active:not(:disabled){background:var(--critical-bg)}.strct-menu__item:disabled{opacity:.45;cursor:not-allowed}.strct-menu__icon{color:var(--t2);flex-shrink:0}.strct-menu__item--critical .strct-menu__icon{color:var(--critical)}.strct-menu__icon-spacer{width:14px;flex-shrink:0}.strct-menu__label{flex:1;white-space:nowrap}.strct-menu__arrow{color:var(--t3);flex-shrink:0}.strct-menu__sep{height:1px;margin:4px 6px;background:var(--b1)}.strct-menu__subpanel{position:absolute;top:-5px;inset-inline-start:100%;margin-inline-start:2px;z-index:var(--z-base)}.strct-menu__subpanel--flip{inset-inline-start:auto;inset-inline-end:100%;margin-inline-start:0;margin-inline-end:2px}[dir=rtl] .strct-menu__arrow{transform:rotate(180deg)}@keyframes strct-menu-in{0%{opacity:0;transform:scale(.97)}}\n"], dependencies: [{ kind: "component", type: StrctMenuPanel, selector: "strct-menu-panel", inputs: ["items", "data", "x", "y", "submenu"], outputs: ["select", "close", "back"] }, { kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
2609
+ `, isInline: true, styles: [".strct-menu-host{display:block}.strct-menu{min-width:180px;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-md);box-shadow:var(--shh);animation:strct-menu-in .1s ease}.strct-menu:focus{outline:none}.strct-menu__wrap{position:relative}.strct-menu__item{display:flex;align-items:center;gap:8px;width:100%;padding:7px 8px 7px 10px;border:0;border-radius:5px;cursor:pointer;background:transparent;color:var(--t1);font-size:13px;font-family:var(--font);text-align:start}.strct-menu__item:hover:not([aria-disabled=true]),.strct-menu__item--active:not([aria-disabled=true]){background:var(--bg-3)}.strct-menu__item:focus-visible{outline:none;background:var(--bg-3)}.strct-menu__item--critical{color:var(--critical)}.strct-menu__item--critical:hover:not([aria-disabled=true]),.strct-menu__item--critical.strct-menu__item--active:not([aria-disabled=true]){background:var(--critical-bg)}.strct-menu__item[aria-disabled=true]{opacity:.45;cursor:not-allowed}.strct-menu__icon{color:var(--t2);flex-shrink:0}.strct-menu__item--critical .strct-menu__icon{color:var(--critical)}.strct-menu__icon-spacer{width:14px;flex-shrink:0}.strct-menu__label{flex:1;white-space:nowrap}.strct-menu__arrow{color:var(--t3);flex-shrink:0}.strct-menu__sep{height:1px;margin:4px 6px;background:var(--b1)}.strct-menu__subpanel{position:absolute;top:-5px;inset-inline-start:100%;margin-inline-start:2px;z-index:var(--z-base)}.strct-menu__subpanel--flip{inset-inline-start:auto;inset-inline-end:100%;margin-inline-start:0;margin-inline-end:2px}[dir=rtl] .strct-menu__arrow{transform:rotate(180deg)}@keyframes strct-menu-in{0%{opacity:0;transform:scale(.97)}}\n"], dependencies: [{ kind: "component", type: StrctMenuPanel, selector: "strct-menu-panel", inputs: ["items", "data", "x", "y", "submenu"], outputs: ["select", "close", "back"] }, { kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
2585
2610
  }
2586
2611
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctMenuPanel, decorators: [{
2587
2612
  type: Component,
@@ -2592,13 +2617,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
2592
2617
  <div class="strct-menu__sep" role="separator"></div>
2593
2618
  } @else {
2594
2619
  <div class="strct-menu__wrap" (mouseenter)="onHover(i)" (mouseleave)="onLeave(i)">
2620
+ <!-- aria-disabled, not [disabled]: a natively disabled button takes no
2621
+ focus and, in some browsers, no pointer events — so neither the
2622
+ keyboard nor the hint's tooltip could reach it. Activation is
2623
+ blocked in code. The tooltip sits on the button, not the wrapper:
2624
+ the wrapper also holds the submenu, whose entries would otherwise
2625
+ inherit this entry's title. -->
2595
2626
  <button
2596
2627
  type="button"
2597
2628
  class="strct-menu__item"
2598
2629
  [attr.data-idx]="i"
2599
2630
  [class.strct-menu__item--critical]="item.critical"
2600
2631
  [class.strct-menu__item--active]="i === activeIndex()"
2601
- [disabled]="item.disabled"
2632
+ [attr.aria-disabled]="item.disabled ? 'true' : null"
2633
+ [attr.aria-describedby]="item.hint ? hintId(i) : null"
2634
+ [attr.title]="item.hint || null"
2602
2635
  role="menuitem"
2603
2636
  [attr.aria-haspopup]="item.children?.length ? 'menu' : null"
2604
2637
  [attr.aria-expanded]="item.children?.length ? openSubIndex() === i : null"
@@ -2625,6 +2658,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
2625
2658
  />
2626
2659
  }
2627
2660
  </button>
2661
+ @if (item.hint) {
2662
+ <!-- hidden: kept out of the entry's accessible NAME, yet still read
2663
+ as its description through aria-describedby. -->
2664
+ <span [id]="hintId(i)" hidden>{{ item.hint }}</span>
2665
+ }
2628
2666
  @if (openSubIndex() === i && item.children?.length) {
2629
2667
  <strct-menu-panel
2630
2668
  submenu
@@ -2647,7 +2685,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
2647
2685
  '[style.left.px]': 'submenu() ? null : posX()',
2648
2686
  '[style.top.px]': 'submenu() ? subTop() : posY()',
2649
2687
  '[style.zIndex]': 'submenu() ? null : 1100',
2650
- }, styles: [".strct-menu-host{display:block}.strct-menu{min-width:180px;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-md);box-shadow:var(--shh);animation:strct-menu-in .1s ease}.strct-menu:focus{outline:none}.strct-menu__wrap{position:relative}.strct-menu__item{display:flex;align-items:center;gap:8px;width:100%;padding:7px 8px 7px 10px;border:0;border-radius:5px;cursor:pointer;background:transparent;color:var(--t1);font-size:13px;font-family:var(--font);text-align:start}.strct-menu__item:hover:not(:disabled),.strct-menu__item--active:not(:disabled){background:var(--bg-3)}.strct-menu__item:focus-visible{outline:none;background:var(--bg-3)}.strct-menu__item--critical{color:var(--critical)}.strct-menu__item--critical:hover:not(:disabled),.strct-menu__item--critical.strct-menu__item--active:not(:disabled){background:var(--critical-bg)}.strct-menu__item:disabled{opacity:.45;cursor:not-allowed}.strct-menu__icon{color:var(--t2);flex-shrink:0}.strct-menu__item--critical .strct-menu__icon{color:var(--critical)}.strct-menu__icon-spacer{width:14px;flex-shrink:0}.strct-menu__label{flex:1;white-space:nowrap}.strct-menu__arrow{color:var(--t3);flex-shrink:0}.strct-menu__sep{height:1px;margin:4px 6px;background:var(--b1)}.strct-menu__subpanel{position:absolute;top:-5px;inset-inline-start:100%;margin-inline-start:2px;z-index:var(--z-base)}.strct-menu__subpanel--flip{inset-inline-start:auto;inset-inline-end:100%;margin-inline-start:0;margin-inline-end:2px}[dir=rtl] .strct-menu__arrow{transform:rotate(180deg)}@keyframes strct-menu-in{0%{opacity:0;transform:scale(.97)}}\n"] }]
2688
+ }, styles: [".strct-menu-host{display:block}.strct-menu{min-width:180px;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-md);box-shadow:var(--shh);animation:strct-menu-in .1s ease}.strct-menu:focus{outline:none}.strct-menu__wrap{position:relative}.strct-menu__item{display:flex;align-items:center;gap:8px;width:100%;padding:7px 8px 7px 10px;border:0;border-radius:5px;cursor:pointer;background:transparent;color:var(--t1);font-size:13px;font-family:var(--font);text-align:start}.strct-menu__item:hover:not([aria-disabled=true]),.strct-menu__item--active:not([aria-disabled=true]){background:var(--bg-3)}.strct-menu__item:focus-visible{outline:none;background:var(--bg-3)}.strct-menu__item--critical{color:var(--critical)}.strct-menu__item--critical:hover:not([aria-disabled=true]),.strct-menu__item--critical.strct-menu__item--active:not([aria-disabled=true]){background:var(--critical-bg)}.strct-menu__item[aria-disabled=true]{opacity:.45;cursor:not-allowed}.strct-menu__icon{color:var(--t2);flex-shrink:0}.strct-menu__item--critical .strct-menu__icon{color:var(--critical)}.strct-menu__icon-spacer{width:14px;flex-shrink:0}.strct-menu__label{flex:1;white-space:nowrap}.strct-menu__arrow{color:var(--t3);flex-shrink:0}.strct-menu__sep{height:1px;margin:4px 6px;background:var(--b1)}.strct-menu__subpanel{position:absolute;top:-5px;inset-inline-start:100%;margin-inline-start:2px;z-index:var(--z-base)}.strct-menu__subpanel--flip{inset-inline-start:auto;inset-inline-end:100%;margin-inline-start:0;margin-inline-end:2px}[dir=rtl] .strct-menu__arrow{transform:rotate(180deg)}@keyframes strct-menu-in{0%{opacity:0;transform:scale(.97)}}\n"] }]
2651
2689
  }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], x: [{ type: i0.Input, args: [{ isSignal: true, alias: "x", required: false }] }], y: [{ type: i0.Input, args: [{ isSignal: true, alias: "y", required: false }] }], submenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "submenu", required: false }] }], select: [{ type: i0.Output, args: ["select"] }], close: [{ type: i0.Output, args: ["close"] }], back: [{ type: i0.Output, args: ["back"] }] } });
2652
2690
  /**
2653
2691
  * Imperatively opens the data-driven menu panel, portaled into `<body>`. Shared
@@ -3699,7 +3737,7 @@ class StrctModal {
3699
3737
  </div>
3700
3738
  </div>
3701
3739
  }
3702
- `, isInline: true, styles: [".strct-modal__overlay{position:fixed;inset:0;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;padding:var(--space-5);background:var(--backdrop);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:strct-modal-fade .12s ease}@media(max-width:768px){.strct-modal__overlay{padding:var(--space-3)}}.strct-modal__dialog{width:100%;max-height:calc(100vh - 48px);display:flex;flex-direction:column;background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-xl);box-shadow:var(--shadow-elevated);overflow:hidden;animation:strct-modal-rise .14s ease}.strct-modal__dialog--sm{max-width:min(480px,calc(100vw - 32px))}.strct-modal__dialog--md{max-width:min(640px,calc(100vw - 32px))}.strct-modal__dialog--lg{max-width:min(860px,calc(100vw - 32px))}.strct-modal__dialog--xl{max-width:min(1080px,calc(100vw - 32px))}.strct-modal__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--b1)}.strct-modal__head--drag{cursor:move;-webkit-user-select:none;user-select:none;touch-action:none}.strct-modal__overlay--glass{background:#00000061;-webkit-backdrop-filter:blur(10px) saturate(1.25);backdrop-filter:blur(10px) saturate(1.25)}.strct-modal__dialog--glass{background:color-mix(in srgb,var(--bg-1) 72%,transparent);-webkit-backdrop-filter:blur(24px) saturate(1.4);backdrop-filter:blur(24px) saturate(1.4)}.strct-modal__dialog--glass .strct-modal__foot{background:color-mix(in srgb,var(--bg-2) 55%,transparent)}.strct-modal__title{font-size:14px;font-weight:600;color:var(--t1)}.strct-modal__close{display:inline-flex;padding:4px;border:0;border-radius:5px;background:transparent;color:var(--t3);cursor:pointer}.strct-modal__close:hover{color:var(--t1);background:var(--bg-3)}.strct-modal__body{padding:var(--space-4);overflow-y:auto;color:var(--t2);font-size:13px}.strct-modal__dialog--chromeless{width:calc(232px + var(--strct-wiz-content-min, 864px) + 2px);max-width:calc(100vw - 32px)}.strct-modal__dialog--chromeless:has(.strct-wiz__layout--aside){width:calc(232px + var(--strct-wiz-content-min, 864px) + 280px + 2px)}.strct-modal__dialog--chromeless .strct-modal__body{padding:0;overflow:hidden;display:flex;flex-direction:column}.strct-modal__dialog--chromeless .strct-modal__body>*{flex:1;min-height:0}.strct-modal__foot{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-top:1px solid var(--b1);background:var(--bg-2)}@keyframes strct-modal-fade{0%{opacity:0}}@keyframes strct-modal-rise{0%{opacity:0;transform:translateY(8px) scale(.98)}}@media(prefers-reduced-motion:reduce){.strct-modal__overlay,.strct-modal__dialog{animation:none}}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
3740
+ `, isInline: true, styles: [".strct-modal__overlay{position:fixed;inset:0;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;padding:var(--space-5);background:var(--backdrop);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:strct-modal-fade .12s ease}@media(max-width:768px){.strct-modal__overlay{padding:var(--space-3)}}.strct-modal__dialog{width:100%;max-height:calc(100vh - 48px);display:flex;flex-direction:column;background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-xl);box-shadow:var(--shadow-elevated);overflow:hidden;animation:strct-modal-rise .14s ease}.strct-modal__dialog--sm{max-width:min(480px,calc(100vw - 32px))}.strct-modal__dialog--md{max-width:min(640px,calc(100vw - 32px))}.strct-modal__dialog--lg{max-width:min(860px,calc(100vw - 32px))}.strct-modal__dialog--xl{max-width:min(1080px,calc(100vw - 32px))}.strct-modal__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--b1)}.strct-modal__head--drag{cursor:move;-webkit-user-select:none;user-select:none;touch-action:none}.strct-modal__overlay--glass{background:#00000061;-webkit-backdrop-filter:blur(10px) saturate(1.25);backdrop-filter:blur(10px) saturate(1.25)}.strct-modal__dialog--glass{background:color-mix(in srgb,var(--bg-1) 72%,transparent);-webkit-backdrop-filter:blur(24px) saturate(1.4);backdrop-filter:blur(24px) saturate(1.4)}.strct-modal__dialog--glass .strct-modal__foot{background:color-mix(in srgb,var(--bg-2) 55%,transparent)}.strct-modal__title{font-size:14px;font-weight:600;color:var(--t1)}.strct-modal__close{display:inline-flex;padding:4px;border:0;border-radius:5px;background:transparent;color:var(--t3);cursor:pointer}.strct-modal__close:hover{color:var(--t1);background:var(--bg-3)}.strct-modal__body{padding:var(--space-4);overflow-y:auto;color:var(--t2);font-size:13px}.strct-modal__dialog--chromeless{width:calc(232px + var(--strct-wiz-content-min, 864px) + 2px);max-width:calc(100vw - 32px)}.strct-modal__dialog--chromeless:has(.strct-wiz__layout--aside){width:calc(232px + var(--strct-wiz-content-min, 864px) + 280px + 2px)}.strct-modal__dialog--chromeless .strct-modal__body{padding:0;overflow:hidden;display:flex;flex-direction:column;flex:1;min-height:0}.strct-modal__dialog--chromeless .strct-modal__body>*{flex:1;min-height:0}.strct-modal__foot{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-top:1px solid var(--b1);background:var(--bg-2)}@keyframes strct-modal-fade{0%{opacity:0}}@keyframes strct-modal-rise{0%{opacity:0;transform:translateY(8px) scale(.98)}}@media(prefers-reduced-motion:reduce){.strct-modal__overlay,.strct-modal__dialog{animation:none}}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
3703
3741
  }
3704
3742
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctModal, decorators: [{
3705
3743
  type: Component,
@@ -3763,7 +3801,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
3763
3801
  }
3764
3802
  `, host: {
3765
3803
  '(document:keydown.escape)': 'onEscape()',
3766
- }, styles: [".strct-modal__overlay{position:fixed;inset:0;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;padding:var(--space-5);background:var(--backdrop);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:strct-modal-fade .12s ease}@media(max-width:768px){.strct-modal__overlay{padding:var(--space-3)}}.strct-modal__dialog{width:100%;max-height:calc(100vh - 48px);display:flex;flex-direction:column;background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-xl);box-shadow:var(--shadow-elevated);overflow:hidden;animation:strct-modal-rise .14s ease}.strct-modal__dialog--sm{max-width:min(480px,calc(100vw - 32px))}.strct-modal__dialog--md{max-width:min(640px,calc(100vw - 32px))}.strct-modal__dialog--lg{max-width:min(860px,calc(100vw - 32px))}.strct-modal__dialog--xl{max-width:min(1080px,calc(100vw - 32px))}.strct-modal__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--b1)}.strct-modal__head--drag{cursor:move;-webkit-user-select:none;user-select:none;touch-action:none}.strct-modal__overlay--glass{background:#00000061;-webkit-backdrop-filter:blur(10px) saturate(1.25);backdrop-filter:blur(10px) saturate(1.25)}.strct-modal__dialog--glass{background:color-mix(in srgb,var(--bg-1) 72%,transparent);-webkit-backdrop-filter:blur(24px) saturate(1.4);backdrop-filter:blur(24px) saturate(1.4)}.strct-modal__dialog--glass .strct-modal__foot{background:color-mix(in srgb,var(--bg-2) 55%,transparent)}.strct-modal__title{font-size:14px;font-weight:600;color:var(--t1)}.strct-modal__close{display:inline-flex;padding:4px;border:0;border-radius:5px;background:transparent;color:var(--t3);cursor:pointer}.strct-modal__close:hover{color:var(--t1);background:var(--bg-3)}.strct-modal__body{padding:var(--space-4);overflow-y:auto;color:var(--t2);font-size:13px}.strct-modal__dialog--chromeless{width:calc(232px + var(--strct-wiz-content-min, 864px) + 2px);max-width:calc(100vw - 32px)}.strct-modal__dialog--chromeless:has(.strct-wiz__layout--aside){width:calc(232px + var(--strct-wiz-content-min, 864px) + 280px + 2px)}.strct-modal__dialog--chromeless .strct-modal__body{padding:0;overflow:hidden;display:flex;flex-direction:column}.strct-modal__dialog--chromeless .strct-modal__body>*{flex:1;min-height:0}.strct-modal__foot{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-top:1px solid var(--b1);background:var(--bg-2)}@keyframes strct-modal-fade{0%{opacity:0}}@keyframes strct-modal-rise{0%{opacity:0;transform:translateY(8px) scale(.98)}}@media(prefers-reduced-motion:reduce){.strct-modal__overlay,.strct-modal__dialog{animation:none}}\n"] }]
3804
+ }, styles: [".strct-modal__overlay{position:fixed;inset:0;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;padding:var(--space-5);background:var(--backdrop);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:strct-modal-fade .12s ease}@media(max-width:768px){.strct-modal__overlay{padding:var(--space-3)}}.strct-modal__dialog{width:100%;max-height:calc(100vh - 48px);display:flex;flex-direction:column;background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-xl);box-shadow:var(--shadow-elevated);overflow:hidden;animation:strct-modal-rise .14s ease}.strct-modal__dialog--sm{max-width:min(480px,calc(100vw - 32px))}.strct-modal__dialog--md{max-width:min(640px,calc(100vw - 32px))}.strct-modal__dialog--lg{max-width:min(860px,calc(100vw - 32px))}.strct-modal__dialog--xl{max-width:min(1080px,calc(100vw - 32px))}.strct-modal__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--b1)}.strct-modal__head--drag{cursor:move;-webkit-user-select:none;user-select:none;touch-action:none}.strct-modal__overlay--glass{background:#00000061;-webkit-backdrop-filter:blur(10px) saturate(1.25);backdrop-filter:blur(10px) saturate(1.25)}.strct-modal__dialog--glass{background:color-mix(in srgb,var(--bg-1) 72%,transparent);-webkit-backdrop-filter:blur(24px) saturate(1.4);backdrop-filter:blur(24px) saturate(1.4)}.strct-modal__dialog--glass .strct-modal__foot{background:color-mix(in srgb,var(--bg-2) 55%,transparent)}.strct-modal__title{font-size:14px;font-weight:600;color:var(--t1)}.strct-modal__close{display:inline-flex;padding:4px;border:0;border-radius:5px;background:transparent;color:var(--t3);cursor:pointer}.strct-modal__close:hover{color:var(--t1);background:var(--bg-3)}.strct-modal__body{padding:var(--space-4);overflow-y:auto;color:var(--t2);font-size:13px}.strct-modal__dialog--chromeless{width:calc(232px + var(--strct-wiz-content-min, 864px) + 2px);max-width:calc(100vw - 32px)}.strct-modal__dialog--chromeless:has(.strct-wiz__layout--aside){width:calc(232px + var(--strct-wiz-content-min, 864px) + 280px + 2px)}.strct-modal__dialog--chromeless .strct-modal__body{padding:0;overflow:hidden;display:flex;flex-direction:column;flex:1;min-height:0}.strct-modal__dialog--chromeless .strct-modal__body>*{flex:1;min-height:0}.strct-modal__foot{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-2);padding:var(--space-3) var(--space-4);border-top:1px solid var(--b1);background:var(--bg-2)}@keyframes strct-modal-fade{0%{opacity:0}}@keyframes strct-modal-rise{0%{opacity:0;transform:translateY(8px) scale(.98)}}@media(prefers-reduced-motion:reduce){.strct-modal__overlay,.strct-modal__dialog{animation:none}}\n"] }]
3767
3805
  }], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], hideFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideFooter", required: false }] }], chromeless: [{ type: i0.Input, args: [{ isSignal: true, alias: "chromeless", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], backdropClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdropClass", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], lazyContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrctModalContent), { isSignal: true }] }] } });
3768
3806
 
3769
3807
  /** Marks the drawer's footer action area: `<ng-container strctDrawerFooter>…`. */
@@ -4045,7 +4083,7 @@ class StrctDropdown {
4045
4083
  onMenuKeydown(event) {
4046
4084
  if (this.popover())
4047
4085
  return;
4048
- const items = this.enabledItems();
4086
+ const items = this.navItems();
4049
4087
  if (!items.length)
4050
4088
  return;
4051
4089
  const idx = items.indexOf(event.target);
@@ -4065,7 +4103,9 @@ class StrctDropdown {
4065
4103
  }
4066
4104
  else if (key === 'Enter' || key === ' ') {
4067
4105
  event.preventDefault();
4068
- event.target.click();
4106
+ const target = event.target;
4107
+ if (target.getAttribute('aria-disabled') !== 'true')
4108
+ target.click();
4069
4109
  }
4070
4110
  else if (key === 'Tab') {
4071
4111
  this.close();
@@ -4076,6 +4116,20 @@ class StrctDropdown {
4076
4116
  ...this.host.nativeElement.querySelectorAll('strct-dropdown-item:not([aria-disabled="true"]), strct-submenu .strct-submenu__trigger'),
4077
4117
  ];
4078
4118
  }
4119
+ /** What the arrow keys visit: enabled items, plus disabled ones that carry a
4120
+ * hint (so the reason can be read). The menu still opens on an enabled one. */
4121
+ navItems() {
4122
+ const host = this.host.nativeElement;
4123
+ const rows = [
4124
+ ...host.querySelectorAll('strct-dropdown-item'),
4125
+ ...host.querySelectorAll('strct-submenu .strct-submenu__trigger'),
4126
+ ].filter((el) => el.getAttribute('aria-disabled') !== 'true' ||
4127
+ el.classList.contains('strct-dd__item--hinted'));
4128
+ // Two queries, so restore DOM order explicitly. (A single comma-separated
4129
+ // selector is DOM-ordered in browsers, but not in every DOM implementation
4130
+ // — jsdom returns it grouped, which scrambles arrow-key order in tests.)
4131
+ return rows.sort((a, b) => a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1);
4132
+ }
4079
4133
  /** Focus the selected item if there is one, else the first — after render. */
4080
4134
  focusInitialItem() {
4081
4135
  setTimeout(() => {
@@ -4190,6 +4244,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
4190
4244
  },
4191
4245
  }]
4192
4246
  }] });
4247
+ let dropdownItemCounter = 0;
4193
4248
  /** A selectable row inside a `<strct-dropdown>`. */
4194
4249
  class StrctDropdownItem {
4195
4250
  /**
@@ -4204,15 +4259,42 @@ class StrctDropdownItem {
4204
4259
  critical = input(false, { ...(ngDevMode ? { debugName: "critical" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
4205
4260
  /** Static disable flag. */
4206
4261
  disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
4262
+ /**
4263
+ * A short explanation — typically why a disabled item is unavailable. Shown
4264
+ * as the tooltip and given to assistive technology as the description; never
4265
+ * rendered inline. A disabled item with a hint stays keyboard-reachable so
4266
+ * its reason can be read; activation stays blocked.
4267
+ */
4268
+ hint = input(null, /* @ts-ignore */
4269
+ ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
4270
+ hintId = `strct-dd-item-${++dropdownItemCounter}-hint`;
4271
+ constructor() {
4272
+ // Without pointer-events:none (see the hinted style), a disabled item
4273
+ // would pass clicks to the consumer's (click). Capture-phase at the target
4274
+ // runs before those listeners, and stopping here also keeps the menu's own
4275
+ // activate-and-close handler from seeing it.
4276
+ const host = inject((ElementRef)).nativeElement;
4277
+ host.addEventListener('click', (event) => {
4278
+ if (!this.disabled())
4279
+ return;
4280
+ event.preventDefault();
4281
+ event.stopImmediatePropagation();
4282
+ }, { capture: true });
4283
+ }
4207
4284
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDropdownItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
4208
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctDropdownItem, isStandalone: true, selector: "strct-dropdown-item", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, critical: { classPropertyName: "critical", publicName: "critical", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.role": "selected() === null ? 'menuitem' : 'menuitemradio'", "attr.aria-checked": "selected()", "attr.tabindex": "disabled() ? null : -1", "class.strct-dd__item--critical": "critical()", "class.strct-dd__item--selected": "selected() === true", "attr.aria-disabled": "disabled() || null" }, classAttribute: "strct-dd__item" }, ngImport: i0, template: `@if (selected() !== null) {
4285
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: StrctDropdownItem, isStandalone: true, selector: "strct-dropdown-item", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, critical: { classPropertyName: "critical", publicName: "critical", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.role": "selected() === null ? 'menuitem' : 'menuitemradio'", "attr.aria-checked": "selected()", "attr.tabindex": "disabled() && !hint() ? null : -1", "attr.title": "hint() || null", "attr.aria-describedby": "hint() ? hintId : null", "class.strct-dd__item--hinted": "!!hint()", "class.strct-dd__item--critical": "critical()", "class.strct-dd__item--selected": "selected() === true", "attr.aria-disabled": "disabled() || null" }, classAttribute: "strct-dd__item" }, ngImport: i0, template: `@if (selected() !== null) {
4209
4286
  <span class="strct-dd__check" aria-hidden="true">
4210
4287
  @if (selected()) {
4211
4288
  <strct-icon strictName="check" [size]="12" [strokeWidth]="1.8" />
4212
4289
  }
4213
4290
  </span>
4214
4291
  }
4215
- <ng-content />`, isInline: true, styles: [".strct-dd__item{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:5px;cursor:pointer;font-size:13px;color:var(--t1)}.strct-dd__item:hover,.strct-dd__item:focus-visible{background:var(--bg-3);outline:none}.strct-dd__check{display:inline-flex;width:14px;flex:none;color:var(--acc)}.strct-dd__item--selected{color:var(--t1);font-weight:600;background:var(--acc-s)}.strct-dd__item--critical{color:var(--critical)}.strct-dd__item--critical:hover{background:var(--critical-bg)}.strct-dd__item[aria-disabled=true]{color:var(--t4);pointer-events:none}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
4292
+ <ng-content />
4293
+ @if (hint()) {
4294
+ <!-- hidden: kept out of the item's accessible NAME, still read as its
4295
+ description through aria-describedby. -->
4296
+ <span [id]="hintId" hidden>{{ hint() }}</span>
4297
+ }`, isInline: true, styles: [".strct-dd__item{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:5px;cursor:pointer;font-size:13px;color:var(--t1)}.strct-dd__item:hover,.strct-dd__item:focus-visible{background:var(--bg-3);outline:none}.strct-dd__check{display:inline-flex;width:14px;flex:none;color:var(--acc)}.strct-dd__item--selected{color:var(--t1);font-weight:600;background:var(--acc-s)}.strct-dd__item--critical{color:var(--critical)}.strct-dd__item--critical:hover{background:var(--critical-bg)}.strct-dd__item[aria-disabled=true]{color:var(--t4);pointer-events:none}.strct-dd__item--hinted[aria-disabled=true]{pointer-events:auto;cursor:not-allowed}.strct-dd__item--hinted[aria-disabled=true]:hover{background:transparent}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
4216
4298
  }
4217
4299
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDropdownItem, decorators: [{
4218
4300
  type: Component,
@@ -4223,16 +4305,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
4223
4305
  }
4224
4306
  </span>
4225
4307
  }
4226
- <ng-content />`, host: {
4308
+ <ng-content />
4309
+ @if (hint()) {
4310
+ <!-- hidden: kept out of the item's accessible NAME, still read as its
4311
+ description through aria-describedby. -->
4312
+ <span [id]="hintId" hidden>{{ hint() }}</span>
4313
+ }`, host: {
4227
4314
  class: 'strct-dd__item',
4228
4315
  '[attr.role]': "selected() === null ? 'menuitem' : 'menuitemradio'",
4229
4316
  '[attr.aria-checked]': 'selected()',
4230
- '[attr.tabindex]': 'disabled() ? null : -1',
4317
+ // A disabled item is skipped — unless it has a hint to be read.
4318
+ '[attr.tabindex]': 'disabled() && !hint() ? null : -1',
4319
+ '[attr.title]': 'hint() || null',
4320
+ '[attr.aria-describedby]': 'hint() ? hintId : null',
4321
+ '[class.strct-dd__item--hinted]': '!!hint()',
4231
4322
  '[class.strct-dd__item--critical]': 'critical()',
4232
4323
  '[class.strct-dd__item--selected]': 'selected() === true',
4233
4324
  '[attr.aria-disabled]': 'disabled() || null',
4234
- }, styles: [".strct-dd__item{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:5px;cursor:pointer;font-size:13px;color:var(--t1)}.strct-dd__item:hover,.strct-dd__item:focus-visible{background:var(--bg-3);outline:none}.strct-dd__check{display:inline-flex;width:14px;flex:none;color:var(--acc)}.strct-dd__item--selected{color:var(--t1);font-weight:600;background:var(--acc-s)}.strct-dd__item--critical{color:var(--critical)}.strct-dd__item--critical:hover{background:var(--critical-bg)}.strct-dd__item[aria-disabled=true]{color:var(--t4);pointer-events:none}\n"] }]
4235
- }], propDecorators: { selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], critical: [{ type: i0.Input, args: [{ isSignal: true, alias: "critical", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
4325
+ }, styles: [".strct-dd__item{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:5px;cursor:pointer;font-size:13px;color:var(--t1)}.strct-dd__item:hover,.strct-dd__item:focus-visible{background:var(--bg-3);outline:none}.strct-dd__check{display:inline-flex;width:14px;flex:none;color:var(--acc)}.strct-dd__item--selected{color:var(--t1);font-weight:600;background:var(--acc-s)}.strct-dd__item--critical{color:var(--critical)}.strct-dd__item--critical:hover{background:var(--critical-bg)}.strct-dd__item[aria-disabled=true]{color:var(--t4);pointer-events:none}.strct-dd__item--hinted[aria-disabled=true]{pointer-events:auto;cursor:not-allowed}.strct-dd__item--hinted[aria-disabled=true]:hover{background:transparent}\n"] }]
4326
+ }], ctorParameters: () => [], propDecorators: { selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], critical: [{ type: i0.Input, args: [{ isSignal: true, alias: "critical", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }] } });
4236
4327
  /** Thin separator between groups of menu items. */
4237
4328
  class StrctDropdownDivider {
4238
4329
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctDropdownDivider, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -4287,7 +4378,9 @@ class StrctContextMenu {
4287
4378
  // guessed size) and focus can land on the first item.
4288
4379
  setTimeout(() => {
4289
4380
  this.clampToViewport();
4290
- this.focusItem(0);
4381
+ // Land on the first entry that can act, not a disabled-but-hinted one.
4382
+ const first = this.navItems().findIndex((i) => i.getAttribute('aria-disabled') !== 'true');
4383
+ this.focusItem(Math.max(first, 0));
4291
4384
  });
4292
4385
  }
4293
4386
  close() {
@@ -4298,12 +4391,14 @@ class StrctContextMenu {
4298
4391
  restoreFocus(this.restoreTo);
4299
4392
  this.restoreTo = null;
4300
4393
  }
4301
- /** Enabled `strct-dropdown-item` elements in DOM order. */
4394
+ /** Keyboard-reachable `strct-dropdown-item` elements in DOM order: enabled
4395
+ * ones, plus disabled ones that carry a hint (so the reason can be read). */
4302
4396
  navItems() {
4303
4397
  const el = this.menuEl()?.nativeElement;
4304
4398
  if (!el)
4305
4399
  return [];
4306
- return Array.from(el.querySelectorAll('.strct-dd__item:not([aria-disabled="true"])'));
4400
+ return Array.from(el.querySelectorAll('.strct-dd__item')).filter((i) => i.getAttribute('aria-disabled') !== 'true' ||
4401
+ i.classList.contains('strct-dd__item--hinted'));
4307
4402
  }
4308
4403
  /**
4309
4404
  * Focus-based roving: items keep the `tabindex="-1"` their host binding
@@ -4516,8 +4611,10 @@ class StrctSubmenu {
4516
4611
  const panel = this.panel()?.nativeElement;
4517
4612
  // Dropdown-item rows carry tabindex=-1, outside FOCUSABLE_SELECTOR —
4518
4613
  // fall back to the first rovable row when nothing else is tabbable.
4519
- if (panel && !focusFirstIn(panel))
4520
- this.panelItems()[0]?.focus();
4614
+ if (panel && !focusFirstIn(panel)) {
4615
+ const items = this.panelItems();
4616
+ (items.find((el) => el.getAttribute('aria-disabled') !== 'true') ?? items[0])?.focus();
4617
+ }
4521
4618
  });
4522
4619
  }
4523
4620
  /**
@@ -4553,11 +4650,13 @@ class StrctSubmenu {
4553
4650
  items[key === 'Home' ? 0 : items.length - 1].focus();
4554
4651
  }
4555
4652
  }
4556
- /** Rovable rows of the open fly-out (dropdown items, skipping disabled). */
4653
+ /** Rovable rows of the open fly-out: enabled dropdown items, plus disabled
4654
+ * ones that carry a hint (so the reason can be read). */
4557
4655
  panelItems() {
4558
4656
  const panel = this.panel()?.nativeElement;
4559
4657
  return panel
4560
- ? [...panel.querySelectorAll('strct-dropdown-item:not([aria-disabled="true"])')]
4658
+ ? [...panel.querySelectorAll('strct-dropdown-item')].filter((i) => i.getAttribute('aria-disabled') !== 'true' ||
4659
+ i.classList.contains('strct-dd__item--hinted'))
4561
4660
  : [];
4562
4661
  }
4563
4662
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctSubmenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -4982,7 +5081,7 @@ class StrctWizard {
4982
5081
  </aside>
4983
5082
  }
4984
5083
  </div>
4985
- `, isInline: true, styles: [".strct-wiz{display:block}.strct-wiz__steps{display:flex;align-items:center;gap:6px}.strct-wiz__step{display:flex;align-items:center;gap:8px}.strct-wiz__dot{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-size:12px;font-weight:600;color:var(--t2);background:var(--bg-3);border:1px solid var(--b2)}.strct-wiz__label{font-size:12px;color:var(--t2)}.strct-wiz__step--active .strct-wiz__dot{background:var(--acc-m);color:var(--acc);border-color:var(--acc)}.strct-wiz__step--active .strct-wiz__label{color:var(--t1);font-weight:600}.strct-wiz__step--done .strct-wiz__dot{background:var(--acc-m);color:var(--acc);border-color:var(--acc30)}.strct-wiz__sep{flex:1;height:1px;background:var(--b2);min-width:18px}.strct-wiz__content{margin:18px 0;padding:16px;min-height:80px;background:var(--bg-1);border:1px solid var(--b2);border-radius:8px;color:var(--t2);font-size:13px}.strct-wiz__foot{display:flex;justify-content:flex-end;gap:8px}.strct-wiz__cancel{margin-inline-end:auto}.strct-wiz__aside{display:none}.strct-wiz--vertical{container-type:inline-size}.strct-wiz__layout--v{display:grid;grid-template-columns:232px minmax(var(--strct-wiz-content-min, 864px),1fr);border:1px solid var(--b2);border-radius:12px;background:var(--bg-1);overflow:hidden}.strct-wiz__layout--v.strct-wiz__layout--aside{grid-template-columns:232px minmax(var(--strct-wiz-content-min, 864px),1fr) 280px}.strct-wiz__layout--v.strct-wiz__layout--aside .strct-wiz__aside{display:block;padding:20px 18px;background:var(--bg-2);border-inline-start:1px solid var(--b1);overflow-y:auto}.strct-wiz__layout--v .strct-wiz__main{display:flex;flex-direction:column;min-width:0}.strct-wiz__layout--v .strct-wiz__content{flex:1;margin:0;padding:20px 24px;border:0;border-radius:0;background:transparent;overflow-y:auto}.strct-wiz__layout--v .strct-wiz__foot{padding:13px 24px;border-top:1px solid var(--b1)}.strct-wiz__chead{box-sizing:border-box;height:var(--strct-wiz-header-h, 64px);padding:15px 24px 0;border-bottom:1px solid var(--b1);overflow:hidden}.strct-wiz__ctitle{margin:0;font-size:16px;font-weight:600;letter-spacing:-.2px;color:var(--t1);line-height:1.3}.strct-wiz__clede{margin:2px 0 0;font-size:12.5px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-wiz__rail{display:flex;flex-direction:column;padding:0 18px 16px;background:var(--bg-2);border-inline-end:1px solid var(--b1);min-width:0}.strct-wiz__railhead{box-sizing:border-box;height:var(--strct-wiz-header-h, 64px);flex:none;display:flex;flex-direction:column;justify-content:flex-end;padding-top:18px}.strct-wiz__vtitle{font-size:15px;font-weight:600;letter-spacing:-.2px;line-height:1.3;margin-bottom:auto}.strct-wiz__pbar{height:4px;border-radius:99px;background:var(--bg-a);overflow:hidden;flex:none}.strct-wiz__pbar i{display:block;height:100%;border-radius:99px;background:var(--acc);transition:width .4s cubic-bezier(.4,0,.2,1)}.strct-wiz__pcount{font-family:var(--mono);font-size:10.5px;letter-spacing:.4px;color:var(--t3);margin:7px 0 14px;font-variant-numeric:tabular-nums}.strct-wiz__vsteps{display:flex;flex-direction:column}.strct-wiz__vstep{display:grid;grid-template-columns:22px 1fr;gap:11px;align-items:start;width:100%;padding:8px 0;border:0;background:none;text-align:start;font:inherit;color:inherit;cursor:pointer}.strct-wiz__vstep:disabled{cursor:default;opacity:.55}.strct-wiz__ring{width:20px;height:20px;margin-top:1px;border-radius:50%;border:2px dashed var(--b3);display:grid;place-items:center;transition:border-color .2s,background .2s}.strct-wiz__vlabel{display:block;font-size:13px;color:var(--t2);transition:color .15s}.strct-wiz__vdesc{display:block;font-size:11px;color:var(--t3);margin-top:1px;opacity:0;height:0;overflow:hidden;transition:opacity .25s}.strct-wiz__vstep--done .strct-wiz__ring{border:0;background:var(--success)}.strct-wiz__vstep--done .strct-wiz__ring:after{content:\"\";width:8px;height:4px;border-left:2px solid var(--inv);border-bottom:2px solid var(--inv);transform:rotate(-45deg) translate(1px,-1px)}.strct-wiz__vstep--done .strct-wiz__vlabel{color:var(--t1)}.strct-wiz__vstep--active .strct-wiz__ring{border-style:solid;border-color:var(--acc);box-shadow:0 0 0 3px var(--acc18)}.strct-wiz__vstep--active .strct-wiz__ring:after{content:\"\";width:7px;height:7px;border-radius:50%;background:var(--acc)}.strct-wiz__vstep--active .strct-wiz__vlabel{color:var(--t1);font-weight:600}.strct-wiz__vstep--active .strct-wiz__vdesc{opacity:1;height:auto}.strct-wiz--flush{height:100%;min-height:0}.strct-wiz--flush .strct-wiz__layout--v{height:100%;border:0;border-radius:0;background:transparent}@container (max-width: 1375px){.strct-wiz__layout--v.strct-wiz__layout--aside{grid-template-columns:232px minmax(var(--strct-wiz-content-min, 864px),1fr)}.strct-wiz__layout--v.strct-wiz__layout--aside .strct-wiz__aside{display:none}}@container (max-width: 1095px){.strct-wiz__layout--v,.strct-wiz__layout--v.strct-wiz__layout--aside{grid-template-columns:232px minmax(0,1fr)}}@container (max-width: 700px){.strct-wiz__layout--v,.strct-wiz__layout--v.strct-wiz__layout--aside{grid-template-columns:56px minmax(0,1fr)}.strct-wiz__rail{padding:18px 0 12px;align-items:center}.strct-wiz__chead{height:auto;padding:14px 18px 11px}.strct-wiz__railhead,.strct-wiz__pcount,.strct-wiz__vmeta{display:none}.strct-wiz__vsteps{gap:3px;align-items:center}.strct-wiz__vstep{grid-template-columns:22px;justify-items:center;position:relative;padding:7px 0}.strct-wiz__vstep:not(:last-child):after{content:\"\";position:absolute;left:50%;top:30px;height:10px;width:1.5px;background:var(--b3)}.strct-wiz__vstep--done:not(:last-child):after{background:var(--success);opacity:.6}.strct-wiz__layout--v .strct-wiz__content{padding:16px 18px}.strct-wiz__layout--v .strct-wiz__foot{padding:12px 18px}}@media(prefers-reduced-motion:reduce){.strct-wiz__pbar i,.strct-wiz__ring,.strct-wiz__vlabel,.strct-wiz__vdesc{transition:none}}\n"], dependencies: [{ kind: "component", type: StrctButton, selector: "button[strct-button], a[strct-button]", inputs: ["variant", "size", "solid", "block", "iconOnly"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
5084
+ `, isInline: true, styles: [".strct-wiz{display:block}.strct-wiz__steps{display:flex;align-items:center;gap:6px}.strct-wiz__step{display:flex;align-items:center;gap:8px}.strct-wiz__dot{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-size:12px;font-weight:600;color:var(--t2);background:var(--bg-3);border:1px solid var(--b2)}.strct-wiz__label{font-size:12px;color:var(--t2)}.strct-wiz__step--active .strct-wiz__dot{background:var(--acc-m);color:var(--acc);border-color:var(--acc)}.strct-wiz__step--active .strct-wiz__label{color:var(--t1);font-weight:600}.strct-wiz__step--done .strct-wiz__dot{background:var(--acc-m);color:var(--acc);border-color:var(--acc30)}.strct-wiz__sep{flex:1;height:1px;background:var(--b2);min-width:18px}.strct-wiz__content{margin:18px 0;padding:16px;min-height:80px;background:var(--bg-1);border:1px solid var(--b2);border-radius:8px;color:var(--t2);font-size:13px}.strct-wiz__foot{display:flex;justify-content:flex-end;gap:8px}.strct-wiz__cancel{margin-inline-end:auto}.strct-wiz__aside{display:none}.strct-wiz--vertical{container-type:inline-size;display:flex;flex-direction:column;min-height:0;height:100%}.strct-wiz__layout--v{display:grid;flex:1;min-height:0;grid-template-rows:minmax(0,1fr);grid-template-columns:232px minmax(var(--strct-wiz-content-min, 864px),1fr);border:1px solid var(--b2);border-radius:12px;background:var(--bg-1);overflow:hidden}.strct-wiz__layout--v.strct-wiz__layout--aside{grid-template-columns:232px minmax(var(--strct-wiz-content-min, 864px),1fr) 280px}.strct-wiz__layout--v.strct-wiz__layout--aside .strct-wiz__aside{display:block;padding:20px 18px;background:var(--bg-2);border-inline-start:1px solid var(--b1);overflow-y:auto}.strct-wiz__layout--v .strct-wiz__main{display:flex;flex-direction:column;min-width:0;min-height:0}.strct-wiz__layout--v .strct-wiz__content{flex:1;min-height:0;margin:0;padding:20px 24px;border:0;border-radius:0;background:transparent;overflow-y:auto}.strct-wiz__layout--v .strct-wiz__foot{padding:13px 24px;border-top:1px solid var(--b1)}.strct-wiz__chead{box-sizing:border-box;height:var(--strct-wiz-header-h, 64px);padding:15px 24px 0;border-bottom:1px solid var(--b1);overflow:hidden}.strct-wiz__ctitle{margin:0;font-size:16px;font-weight:600;letter-spacing:-.2px;color:var(--t1);line-height:1.3}.strct-wiz__clede{margin:2px 0 0;font-size:12.5px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-wiz__rail{display:flex;flex-direction:column;padding:0 18px 16px;background:var(--bg-2);border-inline-end:1px solid var(--b1);min-width:0}.strct-wiz__railhead{box-sizing:border-box;height:var(--strct-wiz-header-h, 64px);flex:none;display:flex;flex-direction:column;justify-content:flex-end;padding-top:18px}.strct-wiz__vtitle{font-size:15px;font-weight:600;letter-spacing:-.2px;line-height:1.3;margin-bottom:auto}.strct-wiz__pbar{height:4px;border-radius:99px;background:var(--bg-a);overflow:hidden;flex:none}.strct-wiz__pbar i{display:block;height:100%;border-radius:99px;background:var(--acc);transition:width .4s cubic-bezier(.4,0,.2,1)}.strct-wiz__pcount{font-family:var(--mono);font-size:10.5px;letter-spacing:.4px;color:var(--t3);margin:7px 0 14px;font-variant-numeric:tabular-nums}.strct-wiz__vsteps{display:flex;flex-direction:column}.strct-wiz__vstep{display:grid;grid-template-columns:22px 1fr;gap:11px;align-items:start;width:100%;padding:8px 0;border:0;background:none;text-align:start;font:inherit;color:inherit;cursor:pointer}.strct-wiz__vstep:disabled{cursor:default;opacity:.55}.strct-wiz__ring{width:20px;height:20px;margin-top:1px;border-radius:50%;border:2px dashed var(--b3);display:grid;place-items:center;transition:border-color .2s,background .2s}.strct-wiz__vlabel{display:block;font-size:13px;color:var(--t2);transition:color .15s}.strct-wiz__vdesc{display:block;font-size:11px;color:var(--t3);margin-top:1px;opacity:0;height:0;overflow:hidden;transition:opacity .25s}.strct-wiz__vstep--done .strct-wiz__ring{border:0;background:var(--success)}.strct-wiz__vstep--done .strct-wiz__ring:after{content:\"\";width:8px;height:4px;border-left:2px solid var(--inv);border-bottom:2px solid var(--inv);transform:rotate(-45deg) translate(1px,-1px)}.strct-wiz__vstep--done .strct-wiz__vlabel{color:var(--t1)}.strct-wiz__vstep--active .strct-wiz__ring{border-style:solid;border-color:var(--acc);box-shadow:0 0 0 3px var(--acc18)}.strct-wiz__vstep--active .strct-wiz__ring:after{content:\"\";width:7px;height:7px;border-radius:50%;background:var(--acc)}.strct-wiz__vstep--active .strct-wiz__vlabel{color:var(--t1);font-weight:600}.strct-wiz__vstep--active .strct-wiz__vdesc{opacity:1;height:auto}.strct-wiz--flush{height:100%;min-height:0}.strct-wiz--flush:not(.strct-wiz--vertical){display:flex;flex-direction:column}.strct-wiz--flush:not(.strct-wiz--vertical) .strct-wiz__content{flex:1;min-height:0;overflow-y:auto}.strct-wiz--flush .strct-wiz__layout--v{height:100%;border:0;border-radius:0;background:transparent}@container (max-width: 1375px){.strct-wiz__layout--v.strct-wiz__layout--aside{grid-template-columns:232px minmax(var(--strct-wiz-content-min, 864px),1fr)}.strct-wiz__layout--v.strct-wiz__layout--aside .strct-wiz__aside{display:none}}@container (max-width: 1095px){.strct-wiz__layout--v,.strct-wiz__layout--v.strct-wiz__layout--aside{grid-template-columns:232px minmax(0,1fr)}}@container (max-width: 700px){.strct-wiz__layout--v,.strct-wiz__layout--v.strct-wiz__layout--aside{grid-template-columns:56px minmax(0,1fr)}.strct-wiz__rail{padding:18px 0 12px;align-items:center}.strct-wiz__chead{height:auto;padding:14px 18px 11px}.strct-wiz__railhead,.strct-wiz__pcount,.strct-wiz__vmeta{display:none}.strct-wiz__vsteps{gap:3px;align-items:center}.strct-wiz__vstep{grid-template-columns:22px;justify-items:center;position:relative;padding:7px 0}.strct-wiz__vstep:not(:last-child):after{content:\"\";position:absolute;left:50%;top:30px;height:10px;width:1.5px;background:var(--b3)}.strct-wiz__vstep--done:not(:last-child):after{background:var(--success);opacity:.6}.strct-wiz__layout--v .strct-wiz__content{padding:16px 18px}.strct-wiz__layout--v .strct-wiz__foot{padding:12px 18px}}@media(prefers-reduced-motion:reduce){.strct-wiz__pbar i,.strct-wiz__ring,.strct-wiz__vlabel,.strct-wiz__vdesc{transition:none}}\n"], dependencies: [{ kind: "component", type: StrctButton, selector: "button[strct-button], a[strct-button]", inputs: ["variant", "size", "solid", "block", "iconOnly"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
4986
5085
  }
4987
5086
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctWizard, decorators: [{
4988
5087
  type: Component,
@@ -5094,7 +5193,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
5094
5193
  class: 'strct-wiz',
5095
5194
  '[class.strct-wiz--vertical]': 'vertical()',
5096
5195
  '[class.strct-wiz--flush]': 'flush()',
5097
- }, styles: [".strct-wiz{display:block}.strct-wiz__steps{display:flex;align-items:center;gap:6px}.strct-wiz__step{display:flex;align-items:center;gap:8px}.strct-wiz__dot{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-size:12px;font-weight:600;color:var(--t2);background:var(--bg-3);border:1px solid var(--b2)}.strct-wiz__label{font-size:12px;color:var(--t2)}.strct-wiz__step--active .strct-wiz__dot{background:var(--acc-m);color:var(--acc);border-color:var(--acc)}.strct-wiz__step--active .strct-wiz__label{color:var(--t1);font-weight:600}.strct-wiz__step--done .strct-wiz__dot{background:var(--acc-m);color:var(--acc);border-color:var(--acc30)}.strct-wiz__sep{flex:1;height:1px;background:var(--b2);min-width:18px}.strct-wiz__content{margin:18px 0;padding:16px;min-height:80px;background:var(--bg-1);border:1px solid var(--b2);border-radius:8px;color:var(--t2);font-size:13px}.strct-wiz__foot{display:flex;justify-content:flex-end;gap:8px}.strct-wiz__cancel{margin-inline-end:auto}.strct-wiz__aside{display:none}.strct-wiz--vertical{container-type:inline-size}.strct-wiz__layout--v{display:grid;grid-template-columns:232px minmax(var(--strct-wiz-content-min, 864px),1fr);border:1px solid var(--b2);border-radius:12px;background:var(--bg-1);overflow:hidden}.strct-wiz__layout--v.strct-wiz__layout--aside{grid-template-columns:232px minmax(var(--strct-wiz-content-min, 864px),1fr) 280px}.strct-wiz__layout--v.strct-wiz__layout--aside .strct-wiz__aside{display:block;padding:20px 18px;background:var(--bg-2);border-inline-start:1px solid var(--b1);overflow-y:auto}.strct-wiz__layout--v .strct-wiz__main{display:flex;flex-direction:column;min-width:0}.strct-wiz__layout--v .strct-wiz__content{flex:1;margin:0;padding:20px 24px;border:0;border-radius:0;background:transparent;overflow-y:auto}.strct-wiz__layout--v .strct-wiz__foot{padding:13px 24px;border-top:1px solid var(--b1)}.strct-wiz__chead{box-sizing:border-box;height:var(--strct-wiz-header-h, 64px);padding:15px 24px 0;border-bottom:1px solid var(--b1);overflow:hidden}.strct-wiz__ctitle{margin:0;font-size:16px;font-weight:600;letter-spacing:-.2px;color:var(--t1);line-height:1.3}.strct-wiz__clede{margin:2px 0 0;font-size:12.5px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-wiz__rail{display:flex;flex-direction:column;padding:0 18px 16px;background:var(--bg-2);border-inline-end:1px solid var(--b1);min-width:0}.strct-wiz__railhead{box-sizing:border-box;height:var(--strct-wiz-header-h, 64px);flex:none;display:flex;flex-direction:column;justify-content:flex-end;padding-top:18px}.strct-wiz__vtitle{font-size:15px;font-weight:600;letter-spacing:-.2px;line-height:1.3;margin-bottom:auto}.strct-wiz__pbar{height:4px;border-radius:99px;background:var(--bg-a);overflow:hidden;flex:none}.strct-wiz__pbar i{display:block;height:100%;border-radius:99px;background:var(--acc);transition:width .4s cubic-bezier(.4,0,.2,1)}.strct-wiz__pcount{font-family:var(--mono);font-size:10.5px;letter-spacing:.4px;color:var(--t3);margin:7px 0 14px;font-variant-numeric:tabular-nums}.strct-wiz__vsteps{display:flex;flex-direction:column}.strct-wiz__vstep{display:grid;grid-template-columns:22px 1fr;gap:11px;align-items:start;width:100%;padding:8px 0;border:0;background:none;text-align:start;font:inherit;color:inherit;cursor:pointer}.strct-wiz__vstep:disabled{cursor:default;opacity:.55}.strct-wiz__ring{width:20px;height:20px;margin-top:1px;border-radius:50%;border:2px dashed var(--b3);display:grid;place-items:center;transition:border-color .2s,background .2s}.strct-wiz__vlabel{display:block;font-size:13px;color:var(--t2);transition:color .15s}.strct-wiz__vdesc{display:block;font-size:11px;color:var(--t3);margin-top:1px;opacity:0;height:0;overflow:hidden;transition:opacity .25s}.strct-wiz__vstep--done .strct-wiz__ring{border:0;background:var(--success)}.strct-wiz__vstep--done .strct-wiz__ring:after{content:\"\";width:8px;height:4px;border-left:2px solid var(--inv);border-bottom:2px solid var(--inv);transform:rotate(-45deg) translate(1px,-1px)}.strct-wiz__vstep--done .strct-wiz__vlabel{color:var(--t1)}.strct-wiz__vstep--active .strct-wiz__ring{border-style:solid;border-color:var(--acc);box-shadow:0 0 0 3px var(--acc18)}.strct-wiz__vstep--active .strct-wiz__ring:after{content:\"\";width:7px;height:7px;border-radius:50%;background:var(--acc)}.strct-wiz__vstep--active .strct-wiz__vlabel{color:var(--t1);font-weight:600}.strct-wiz__vstep--active .strct-wiz__vdesc{opacity:1;height:auto}.strct-wiz--flush{height:100%;min-height:0}.strct-wiz--flush .strct-wiz__layout--v{height:100%;border:0;border-radius:0;background:transparent}@container (max-width: 1375px){.strct-wiz__layout--v.strct-wiz__layout--aside{grid-template-columns:232px minmax(var(--strct-wiz-content-min, 864px),1fr)}.strct-wiz__layout--v.strct-wiz__layout--aside .strct-wiz__aside{display:none}}@container (max-width: 1095px){.strct-wiz__layout--v,.strct-wiz__layout--v.strct-wiz__layout--aside{grid-template-columns:232px minmax(0,1fr)}}@container (max-width: 700px){.strct-wiz__layout--v,.strct-wiz__layout--v.strct-wiz__layout--aside{grid-template-columns:56px minmax(0,1fr)}.strct-wiz__rail{padding:18px 0 12px;align-items:center}.strct-wiz__chead{height:auto;padding:14px 18px 11px}.strct-wiz__railhead,.strct-wiz__pcount,.strct-wiz__vmeta{display:none}.strct-wiz__vsteps{gap:3px;align-items:center}.strct-wiz__vstep{grid-template-columns:22px;justify-items:center;position:relative;padding:7px 0}.strct-wiz__vstep:not(:last-child):after{content:\"\";position:absolute;left:50%;top:30px;height:10px;width:1.5px;background:var(--b3)}.strct-wiz__vstep--done:not(:last-child):after{background:var(--success);opacity:.6}.strct-wiz__layout--v .strct-wiz__content{padding:16px 18px}.strct-wiz__layout--v .strct-wiz__foot{padding:12px 18px}}@media(prefers-reduced-motion:reduce){.strct-wiz__pbar i,.strct-wiz__ring,.strct-wiz__vlabel,.strct-wiz__vdesc{transition:none}}\n"] }]
5196
+ }, styles: [".strct-wiz{display:block}.strct-wiz__steps{display:flex;align-items:center;gap:6px}.strct-wiz__step{display:flex;align-items:center;gap:8px}.strct-wiz__dot{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-size:12px;font-weight:600;color:var(--t2);background:var(--bg-3);border:1px solid var(--b2)}.strct-wiz__label{font-size:12px;color:var(--t2)}.strct-wiz__step--active .strct-wiz__dot{background:var(--acc-m);color:var(--acc);border-color:var(--acc)}.strct-wiz__step--active .strct-wiz__label{color:var(--t1);font-weight:600}.strct-wiz__step--done .strct-wiz__dot{background:var(--acc-m);color:var(--acc);border-color:var(--acc30)}.strct-wiz__sep{flex:1;height:1px;background:var(--b2);min-width:18px}.strct-wiz__content{margin:18px 0;padding:16px;min-height:80px;background:var(--bg-1);border:1px solid var(--b2);border-radius:8px;color:var(--t2);font-size:13px}.strct-wiz__foot{display:flex;justify-content:flex-end;gap:8px}.strct-wiz__cancel{margin-inline-end:auto}.strct-wiz__aside{display:none}.strct-wiz--vertical{container-type:inline-size;display:flex;flex-direction:column;min-height:0;height:100%}.strct-wiz__layout--v{display:grid;flex:1;min-height:0;grid-template-rows:minmax(0,1fr);grid-template-columns:232px minmax(var(--strct-wiz-content-min, 864px),1fr);border:1px solid var(--b2);border-radius:12px;background:var(--bg-1);overflow:hidden}.strct-wiz__layout--v.strct-wiz__layout--aside{grid-template-columns:232px minmax(var(--strct-wiz-content-min, 864px),1fr) 280px}.strct-wiz__layout--v.strct-wiz__layout--aside .strct-wiz__aside{display:block;padding:20px 18px;background:var(--bg-2);border-inline-start:1px solid var(--b1);overflow-y:auto}.strct-wiz__layout--v .strct-wiz__main{display:flex;flex-direction:column;min-width:0;min-height:0}.strct-wiz__layout--v .strct-wiz__content{flex:1;min-height:0;margin:0;padding:20px 24px;border:0;border-radius:0;background:transparent;overflow-y:auto}.strct-wiz__layout--v .strct-wiz__foot{padding:13px 24px;border-top:1px solid var(--b1)}.strct-wiz__chead{box-sizing:border-box;height:var(--strct-wiz-header-h, 64px);padding:15px 24px 0;border-bottom:1px solid var(--b1);overflow:hidden}.strct-wiz__ctitle{margin:0;font-size:16px;font-weight:600;letter-spacing:-.2px;color:var(--t1);line-height:1.3}.strct-wiz__clede{margin:2px 0 0;font-size:12.5px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.strct-wiz__rail{display:flex;flex-direction:column;padding:0 18px 16px;background:var(--bg-2);border-inline-end:1px solid var(--b1);min-width:0}.strct-wiz__railhead{box-sizing:border-box;height:var(--strct-wiz-header-h, 64px);flex:none;display:flex;flex-direction:column;justify-content:flex-end;padding-top:18px}.strct-wiz__vtitle{font-size:15px;font-weight:600;letter-spacing:-.2px;line-height:1.3;margin-bottom:auto}.strct-wiz__pbar{height:4px;border-radius:99px;background:var(--bg-a);overflow:hidden;flex:none}.strct-wiz__pbar i{display:block;height:100%;border-radius:99px;background:var(--acc);transition:width .4s cubic-bezier(.4,0,.2,1)}.strct-wiz__pcount{font-family:var(--mono);font-size:10.5px;letter-spacing:.4px;color:var(--t3);margin:7px 0 14px;font-variant-numeric:tabular-nums}.strct-wiz__vsteps{display:flex;flex-direction:column}.strct-wiz__vstep{display:grid;grid-template-columns:22px 1fr;gap:11px;align-items:start;width:100%;padding:8px 0;border:0;background:none;text-align:start;font:inherit;color:inherit;cursor:pointer}.strct-wiz__vstep:disabled{cursor:default;opacity:.55}.strct-wiz__ring{width:20px;height:20px;margin-top:1px;border-radius:50%;border:2px dashed var(--b3);display:grid;place-items:center;transition:border-color .2s,background .2s}.strct-wiz__vlabel{display:block;font-size:13px;color:var(--t2);transition:color .15s}.strct-wiz__vdesc{display:block;font-size:11px;color:var(--t3);margin-top:1px;opacity:0;height:0;overflow:hidden;transition:opacity .25s}.strct-wiz__vstep--done .strct-wiz__ring{border:0;background:var(--success)}.strct-wiz__vstep--done .strct-wiz__ring:after{content:\"\";width:8px;height:4px;border-left:2px solid var(--inv);border-bottom:2px solid var(--inv);transform:rotate(-45deg) translate(1px,-1px)}.strct-wiz__vstep--done .strct-wiz__vlabel{color:var(--t1)}.strct-wiz__vstep--active .strct-wiz__ring{border-style:solid;border-color:var(--acc);box-shadow:0 0 0 3px var(--acc18)}.strct-wiz__vstep--active .strct-wiz__ring:after{content:\"\";width:7px;height:7px;border-radius:50%;background:var(--acc)}.strct-wiz__vstep--active .strct-wiz__vlabel{color:var(--t1);font-weight:600}.strct-wiz__vstep--active .strct-wiz__vdesc{opacity:1;height:auto}.strct-wiz--flush{height:100%;min-height:0}.strct-wiz--flush:not(.strct-wiz--vertical){display:flex;flex-direction:column}.strct-wiz--flush:not(.strct-wiz--vertical) .strct-wiz__content{flex:1;min-height:0;overflow-y:auto}.strct-wiz--flush .strct-wiz__layout--v{height:100%;border:0;border-radius:0;background:transparent}@container (max-width: 1375px){.strct-wiz__layout--v.strct-wiz__layout--aside{grid-template-columns:232px minmax(var(--strct-wiz-content-min, 864px),1fr)}.strct-wiz__layout--v.strct-wiz__layout--aside .strct-wiz__aside{display:none}}@container (max-width: 1095px){.strct-wiz__layout--v,.strct-wiz__layout--v.strct-wiz__layout--aside{grid-template-columns:232px minmax(0,1fr)}}@container (max-width: 700px){.strct-wiz__layout--v,.strct-wiz__layout--v.strct-wiz__layout--aside{grid-template-columns:56px minmax(0,1fr)}.strct-wiz__rail{padding:18px 0 12px;align-items:center}.strct-wiz__chead{height:auto;padding:14px 18px 11px}.strct-wiz__railhead,.strct-wiz__pcount,.strct-wiz__vmeta{display:none}.strct-wiz__vsteps{gap:3px;align-items:center}.strct-wiz__vstep{grid-template-columns:22px;justify-items:center;position:relative;padding:7px 0}.strct-wiz__vstep:not(:last-child):after{content:\"\";position:absolute;left:50%;top:30px;height:10px;width:1.5px;background:var(--b3)}.strct-wiz__vstep--done:not(:last-child):after{background:var(--success);opacity:.6}.strct-wiz__layout--v .strct-wiz__content{padding:16px 18px}.strct-wiz__layout--v .strct-wiz__foot{padding:12px 18px}}@media(prefers-reduced-motion:reduce){.strct-wiz__pbar i,.strct-wiz__ring,.strct-wiz__vlabel,.strct-wiz__vdesc{transition:none}}\n"] }]
5098
5197
  }], ctorParameters: () => [], propDecorators: { steps: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StrctStep), { isSignal: true }] }], asideDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StrctWizardAside), { isSignal: true }] }], current: [{ type: i0.Input, args: [{ isSignal: true, alias: "current", required: false }] }, { type: i0.Output, args: ["currentChange"] }], vertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "vertical", required: false }] }], flush: [{ type: i0.Input, args: [{ isSignal: true, alias: "flush", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], contentHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentHeader", required: false }] }], finishLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "finishLabel", required: false }] }], backLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "backLabel", required: false }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], cancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelLabel", required: false }] }], submittingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "submittingLabel", required: false }] }], progressLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "progressLabel", required: false }] }], stepsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepsLabel", required: false }] }], submitting: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitting", required: false }] }], cancelable: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelable", required: false }] }], finished: [{ type: i0.Output, args: ["finished"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }], stepChange: [{ type: i0.Output, args: ["stepChange"] }] } });
5099
5198
 
5100
5199
  /**
@@ -18296,7 +18395,7 @@ class StrctSplitButton {
18296
18395
  /** Main action label. */
18297
18396
  label = input.required(/* @ts-ignore */
18298
18397
  ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
18299
- /** Menu entries (StrctMenuItem: id, label, icon?, critical?, disabled?). */
18398
+ /** Menu entries (StrctMenuItem: id, label, icon?, critical?, disabled?, hint?). */
18300
18399
  items = input([], /* @ts-ignore */
18301
18400
  ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
18302
18401
  /** Optional leading icon of the main segment. */
@@ -18344,6 +18443,7 @@ class StrctSplitButton {
18344
18443
  <strct-dropdown-item
18345
18444
  [critical]="item.critical ?? false"
18346
18445
  [disabled]="item.disabled ?? false"
18446
+ [hint]="item.hint"
18347
18447
  (click)="!item.disabled && picked.emit(item)"
18348
18448
  >
18349
18449
  @if (item.icon) {
@@ -18355,7 +18455,7 @@ class StrctSplitButton {
18355
18455
  }
18356
18456
  </strct-dropdown>
18357
18457
  </div>
18358
- `, isInline: true, styles: [".strct-sbt{display:inline-flex;align-items:stretch}.strct-sbt .strct-dd{display:inline-flex;align-self:stretch}.strct-sbt .strct-dd__trigger{display:inline-flex;align-items:stretch}.strct-sbt__chev{align-self:stretch;height:100%}.strct-sbt__main,.strct-sbt__chev{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--acc);background:transparent;color:var(--acc);font-family:var(--font);font-size:13px;font-weight:600;line-height:1;cursor:pointer;padding:var(--space-2) var(--space-4)}.strct-sbt__main{border-start-start-radius:var(--radius-md);border-end-start-radius:var(--radius-md);border-inline-end:0}.strct-sbt__chev{padding:var(--space-2);border-start-end-radius:var(--radius-md);border-end-end-radius:var(--radius-md);border-inline-start:1px solid var(--acc50)}.strct-sbt--solid .strct-sbt__main,.strct-sbt--solid .strct-sbt__chev{background:var(--acc);color:var(--inv)}.strct-sbt--solid .strct-sbt__chev{border-inline-start-color:color-mix(in srgb,var(--inv) 30%,var(--acc))}.strct-sbt__main:hover:not(:disabled),.strct-sbt__chev:hover:not(:disabled){background:var(--acc18)}.strct-sbt--solid .strct-sbt__main:hover:not(:disabled),.strct-sbt--solid .strct-sbt__chev:hover:not(:disabled){filter:brightness(1.08);background:var(--acc)}.strct-sbt__main:disabled,.strct-sbt__chev:disabled{opacity:.5;cursor:default}.strct-sbt__main:focus-visible,.strct-sbt__chev:focus-visible{outline:2px solid var(--acc50);outline-offset:1px;position:relative;z-index:var(--z-base)}\n"], dependencies: [{ kind: "component", type: StrctDropdown, selector: "strct-dropdown", inputs: ["align", "popover", "popoverLabel"] }, { kind: "component", type: StrctDropdownDivider, selector: "strct-dropdown-divider" }, { kind: "component", type: StrctDropdownItem, selector: "strct-dropdown-item", inputs: ["selected", "critical", "disabled"] }, { kind: "directive", type: StrctDropdownTrigger, selector: "[strctDropdownTrigger]" }, { kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
18458
+ `, isInline: true, styles: [".strct-sbt{display:inline-flex;align-items:stretch}.strct-sbt .strct-dd{display:inline-flex;align-self:stretch}.strct-sbt .strct-dd__trigger{display:inline-flex;align-items:stretch}.strct-sbt__chev{align-self:stretch;height:100%}.strct-sbt__main,.strct-sbt__chev{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--acc);background:transparent;color:var(--acc);font-family:var(--font);font-size:13px;font-weight:600;line-height:1;cursor:pointer;padding:var(--space-2) var(--space-4)}.strct-sbt__main{border-start-start-radius:var(--radius-md);border-end-start-radius:var(--radius-md);border-inline-end:0}.strct-sbt__chev{padding:var(--space-2);border-start-end-radius:var(--radius-md);border-end-end-radius:var(--radius-md);border-inline-start:1px solid var(--acc50)}.strct-sbt--solid .strct-sbt__main,.strct-sbt--solid .strct-sbt__chev{background:var(--acc);color:var(--inv)}.strct-sbt--solid .strct-sbt__chev{border-inline-start-color:color-mix(in srgb,var(--inv) 30%,var(--acc))}.strct-sbt__main:hover:not(:disabled),.strct-sbt__chev:hover:not(:disabled){background:var(--acc18)}.strct-sbt--solid .strct-sbt__main:hover:not(:disabled),.strct-sbt--solid .strct-sbt__chev:hover:not(:disabled){filter:brightness(1.08);background:var(--acc)}.strct-sbt__main:disabled,.strct-sbt__chev:disabled{opacity:.5;cursor:default}.strct-sbt__main:focus-visible,.strct-sbt__chev:focus-visible{outline:2px solid var(--acc50);outline-offset:1px;position:relative;z-index:var(--z-base)}\n"], dependencies: [{ kind: "component", type: StrctDropdown, selector: "strct-dropdown", inputs: ["align", "popover", "popoverLabel"] }, { kind: "component", type: StrctDropdownDivider, selector: "strct-dropdown-divider" }, { kind: "component", type: StrctDropdownItem, selector: "strct-dropdown-item", inputs: ["selected", "critical", "disabled", "hint"] }, { kind: "directive", type: StrctDropdownTrigger, selector: "[strctDropdownTrigger]" }, { kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
18359
18459
  }
18360
18460
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctSplitButton, decorators: [{
18361
18461
  type: Component,
@@ -18395,6 +18495,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
18395
18495
  <strct-dropdown-item
18396
18496
  [critical]="item.critical ?? false"
18397
18497
  [disabled]="item.disabled ?? false"
18498
+ [hint]="item.hint"
18398
18499
  (click)="!item.disabled && picked.emit(item)"
18399
18500
  >
18400
18501
  @if (item.icon) {
@@ -18749,6 +18850,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
18749
18850
  args: ['window:scroll']
18750
18851
  }] } });
18751
18852
 
18853
+ let menubarCounter = 0;
18752
18854
  /**
18753
18855
  * Horizontal menubar — the application-menu strip ("File · Edit · View") for
18754
18856
  * dense tool-style consoles:
@@ -18875,7 +18977,7 @@ class StrctMenubar {
18875
18977
  event.preventDefault();
18876
18978
  event.stopPropagation();
18877
18979
  const idx = Number(active?.getAttribute('data-idx'));
18878
- if (menu.items[idx]?.children?.length) {
18980
+ if (menu.items[idx]?.children?.length && !menu.items[idx].disabled) {
18879
18981
  this.subIdx.set(idx);
18880
18982
  setTimeout(() => this.navButtons(true)[0]?.focus());
18881
18983
  }
@@ -18926,18 +19028,24 @@ class StrctMenubar {
18926
19028
  restoreFocus(this.trigger);
18927
19029
  this.trigger = null;
18928
19030
  }
19031
+ uid = ++menubarCounter;
19032
+ hintId(menuId, i, j) {
19033
+ // menu ids are consumer data; aria-describedby splits on whitespace.
19034
+ const menu = menuId.replace(/\s+/g, '_');
19035
+ return `strct-mb-${this.uid}-${menu}-${i}${j == null ? '' : '-' + j}-hint`;
19036
+ }
18929
19037
  topButtons() {
18930
19038
  return Array.from(this.host.nativeElement.querySelectorAll('.strct-mb__top'));
18931
19039
  }
18932
- /** Enabled item buttons of the open menu — either its items or the open submenu's. */
19040
+ /** Keyboard-reachable item buttons of the open menu — either its items or the
19041
+ * open submenu's: enabled ones, plus disabled ones that carry a hint (so the
19042
+ * reason can be read). A disabled entry with nothing to say is skipped. */
18933
19043
  navButtons(sub) {
18934
19044
  const menuEl = this.host.nativeElement.querySelector('.strct-mb__menu');
18935
19045
  if (!menuEl)
18936
19046
  return [];
18937
- const sel = sub
18938
- ? '.strct-mb__subitem:not([disabled])'
18939
- : '.strct-mb__item:not([disabled]):not(.strct-mb__subitem)';
18940
- return Array.from(menuEl.querySelectorAll(sel));
19047
+ const sel = sub ? '.strct-mb__subitem' : '.strct-mb__item:not(.strct-mb__subitem)';
19048
+ return Array.from(menuEl.querySelectorAll(sel)).filter((b) => b.getAttribute('aria-disabled') !== 'true' || b.hasAttribute('aria-describedby'));
18941
19049
  }
18942
19050
  onDocClick(event) {
18943
19051
  if (this.openId() && !this.host.nativeElement.contains(event.target)) {
@@ -18989,7 +19097,9 @@ class StrctMenubar {
18989
19097
  [class.strct-mb__item--critical]="item.critical"
18990
19098
  [attr.aria-haspopup]="item.children?.length ? 'menu' : null"
18991
19099
  [attr.aria-expanded]="item.children?.length ? subIdx() === i : null"
18992
- [disabled]="item.disabled || null"
19100
+ [attr.aria-disabled]="item.disabled ? 'true' : null"
19101
+ [attr.aria-describedby]="item.hint ? hintId(menu.id, i) : null"
19102
+ [attr.title]="item.hint || null"
18993
19103
  (click)="onItemClick(menu, item, i)"
18994
19104
  (mouseenter)="onItemHover(item, i)"
18995
19105
  >
@@ -19001,9 +19111,12 @@ class StrctMenubar {
19001
19111
  <strct-icon class="strct-mb__caret" name="chevronRight" [size]="12" />
19002
19112
  }
19003
19113
  </button>
19114
+ @if (item.hint) {
19115
+ <span [id]="hintId(menu.id, i)" hidden>{{ item.hint }}</span>
19116
+ }
19004
19117
  @if (subIdx() === i && item.children?.length) {
19005
19118
  <div class="strct-mb__submenu" role="menu" [attr.aria-label]="item.label">
19006
- @for (sub of item.children; track $index) {
19119
+ @for (sub of item.children; track $index; let j = $index) {
19007
19120
  @if (sub.divider) {
19008
19121
  <div class="strct-mb__divider" role="separator"></div>
19009
19122
  } @else {
@@ -19012,7 +19125,9 @@ class StrctMenubar {
19012
19125
  class="strct-mb__item strct-mb__subitem"
19013
19126
  role="menuitem"
19014
19127
  [class.strct-mb__item--critical]="sub.critical"
19015
- [disabled]="sub.disabled || null"
19128
+ [attr.aria-disabled]="sub.disabled ? 'true' : null"
19129
+ [attr.aria-describedby]="sub.hint ? hintId(menu.id, i, j) : null"
19130
+ [attr.title]="sub.hint || null"
19016
19131
  (click)="pick(menu, sub)"
19017
19132
  >
19018
19133
  @if (sub.icon) {
@@ -19020,6 +19135,9 @@ class StrctMenubar {
19020
19135
  }
19021
19136
  {{ sub.label }}
19022
19137
  </button>
19138
+ @if (sub.hint) {
19139
+ <span [id]="hintId(menu.id, i, j)" hidden>{{ sub.hint }}</span>
19140
+ }
19023
19141
  }
19024
19142
  }
19025
19143
  </div>
@@ -19032,7 +19150,7 @@ class StrctMenubar {
19032
19150
  </div>
19033
19151
  }
19034
19152
  </div>
19035
- `, isInline: true, styles: [".strct-mb{display:inline-flex;gap:2px;padding:2px;background:var(--bg-2);border:1px solid var(--b1);border-radius:var(--radius-md)}.strct-mb__wrap{position:relative}.strct-mb__top{padding:4px 11px;border:0;border-radius:5px;background:transparent;color:var(--t1);font-family:var(--font);font-size:12.5px;cursor:pointer;white-space:nowrap}.strct-mb__top:hover,.strct-mb__top--open{background:var(--bg-3)}.strct-mb__top:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-mb__menu{position:absolute;top:calc(100% + 4px);inset-inline-start:0;z-index:var(--z-dropdown);min-width:180px;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-md);box-shadow:var(--shh);display:flex;flex-direction:column}.strct-mb__menu:focus{outline:none}.strct-mb__item{display:flex;align-items:center;gap:8px;width:100%;padding:6px 10px;border:0;border-radius:5px;background:transparent;color:var(--t1);font-family:var(--font);font-size:12.5px;text-align:start;cursor:pointer;white-space:nowrap}.strct-mb__item:hover:not(:disabled){background:var(--bg-3)}.strct-mb__item--critical{color:var(--critical)}.strct-mb__item--critical:hover:not(:disabled){background:var(--critical-bg)}.strct-mb__item:disabled{color:var(--t4);cursor:default}.strct-mb__item:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-mb__divider{height:1px;margin:4px 6px;background:var(--b2)}.strct-mb__row{position:relative}.strct-mb__caret{margin-inline-start:auto;color:var(--t3)}[dir=rtl] .strct-mb__caret{transform:rotate(180deg)}.strct-mb__submenu{position:absolute;top:-5px;inset-inline-start:calc(100% + 2px);z-index:var(--z-base);min-width:160px;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-md);box-shadow:var(--shh);display:flex;flex-direction:column}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
19153
+ `, isInline: true, styles: [".strct-mb{display:inline-flex;gap:2px;padding:2px;background:var(--bg-2);border:1px solid var(--b1);border-radius:var(--radius-md)}.strct-mb__wrap{position:relative}.strct-mb__top{padding:4px 11px;border:0;border-radius:5px;background:transparent;color:var(--t1);font-family:var(--font);font-size:12.5px;cursor:pointer;white-space:nowrap}.strct-mb__top:hover,.strct-mb__top--open{background:var(--bg-3)}.strct-mb__top:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-mb__menu{position:absolute;top:calc(100% + 4px);inset-inline-start:0;z-index:var(--z-dropdown);min-width:180px;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-md);box-shadow:var(--shh);display:flex;flex-direction:column}.strct-mb__menu:focus{outline:none}.strct-mb__item{display:flex;align-items:center;gap:8px;width:100%;padding:6px 10px;border:0;border-radius:5px;background:transparent;color:var(--t1);font-family:var(--font);font-size:12.5px;text-align:start;cursor:pointer;white-space:nowrap}.strct-mb__item:hover:not([aria-disabled=true]){background:var(--bg-3)}.strct-mb__item--critical{color:var(--critical)}.strct-mb__item--critical:hover:not([aria-disabled=true]){background:var(--critical-bg)}.strct-mb__item[aria-disabled=true]{color:var(--t4);cursor:default}.strct-mb__item:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-mb__divider{height:1px;margin:4px 6px;background:var(--b2)}.strct-mb__row{position:relative}.strct-mb__caret{margin-inline-start:auto;color:var(--t3)}[dir=rtl] .strct-mb__caret{transform:rotate(180deg)}.strct-mb__submenu{position:absolute;top:-5px;inset-inline-start:calc(100% + 2px);z-index:var(--z-base);min-width:160px;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-md);box-shadow:var(--shh);display:flex;flex-direction:column}\n"], dependencies: [{ kind: "component", type: StrctIcon, selector: "strct-icon", inputs: ["name", "strictName", "size", "strokeWidth", "badge", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
19036
19154
  }
19037
19155
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: StrctMenubar, decorators: [{
19038
19156
  type: Component,
@@ -19074,7 +19192,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
19074
19192
  [class.strct-mb__item--critical]="item.critical"
19075
19193
  [attr.aria-haspopup]="item.children?.length ? 'menu' : null"
19076
19194
  [attr.aria-expanded]="item.children?.length ? subIdx() === i : null"
19077
- [disabled]="item.disabled || null"
19195
+ [attr.aria-disabled]="item.disabled ? 'true' : null"
19196
+ [attr.aria-describedby]="item.hint ? hintId(menu.id, i) : null"
19197
+ [attr.title]="item.hint || null"
19078
19198
  (click)="onItemClick(menu, item, i)"
19079
19199
  (mouseenter)="onItemHover(item, i)"
19080
19200
  >
@@ -19086,9 +19206,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
19086
19206
  <strct-icon class="strct-mb__caret" name="chevronRight" [size]="12" />
19087
19207
  }
19088
19208
  </button>
19209
+ @if (item.hint) {
19210
+ <span [id]="hintId(menu.id, i)" hidden>{{ item.hint }}</span>
19211
+ }
19089
19212
  @if (subIdx() === i && item.children?.length) {
19090
19213
  <div class="strct-mb__submenu" role="menu" [attr.aria-label]="item.label">
19091
- @for (sub of item.children; track $index) {
19214
+ @for (sub of item.children; track $index; let j = $index) {
19092
19215
  @if (sub.divider) {
19093
19216
  <div class="strct-mb__divider" role="separator"></div>
19094
19217
  } @else {
@@ -19097,7 +19220,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
19097
19220
  class="strct-mb__item strct-mb__subitem"
19098
19221
  role="menuitem"
19099
19222
  [class.strct-mb__item--critical]="sub.critical"
19100
- [disabled]="sub.disabled || null"
19223
+ [attr.aria-disabled]="sub.disabled ? 'true' : null"
19224
+ [attr.aria-describedby]="sub.hint ? hintId(menu.id, i, j) : null"
19225
+ [attr.title]="sub.hint || null"
19101
19226
  (click)="pick(menu, sub)"
19102
19227
  >
19103
19228
  @if (sub.icon) {
@@ -19105,6 +19230,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
19105
19230
  }
19106
19231
  {{ sub.label }}
19107
19232
  </button>
19233
+ @if (sub.hint) {
19234
+ <span [id]="hintId(menu.id, i, j)" hidden>{{ sub.hint }}</span>
19235
+ }
19108
19236
  }
19109
19237
  }
19110
19238
  </div>
@@ -19117,7 +19245,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
19117
19245
  </div>
19118
19246
  }
19119
19247
  </div>
19120
- `, styles: [".strct-mb{display:inline-flex;gap:2px;padding:2px;background:var(--bg-2);border:1px solid var(--b1);border-radius:var(--radius-md)}.strct-mb__wrap{position:relative}.strct-mb__top{padding:4px 11px;border:0;border-radius:5px;background:transparent;color:var(--t1);font-family:var(--font);font-size:12.5px;cursor:pointer;white-space:nowrap}.strct-mb__top:hover,.strct-mb__top--open{background:var(--bg-3)}.strct-mb__top:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-mb__menu{position:absolute;top:calc(100% + 4px);inset-inline-start:0;z-index:var(--z-dropdown);min-width:180px;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-md);box-shadow:var(--shh);display:flex;flex-direction:column}.strct-mb__menu:focus{outline:none}.strct-mb__item{display:flex;align-items:center;gap:8px;width:100%;padding:6px 10px;border:0;border-radius:5px;background:transparent;color:var(--t1);font-family:var(--font);font-size:12.5px;text-align:start;cursor:pointer;white-space:nowrap}.strct-mb__item:hover:not(:disabled){background:var(--bg-3)}.strct-mb__item--critical{color:var(--critical)}.strct-mb__item--critical:hover:not(:disabled){background:var(--critical-bg)}.strct-mb__item:disabled{color:var(--t4);cursor:default}.strct-mb__item:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-mb__divider{height:1px;margin:4px 6px;background:var(--b2)}.strct-mb__row{position:relative}.strct-mb__caret{margin-inline-start:auto;color:var(--t3)}[dir=rtl] .strct-mb__caret{transform:rotate(180deg)}.strct-mb__submenu{position:absolute;top:-5px;inset-inline-start:calc(100% + 2px);z-index:var(--z-base);min-width:160px;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-md);box-shadow:var(--shh);display:flex;flex-direction:column}\n"] }]
19248
+ `, styles: [".strct-mb{display:inline-flex;gap:2px;padding:2px;background:var(--bg-2);border:1px solid var(--b1);border-radius:var(--radius-md)}.strct-mb__wrap{position:relative}.strct-mb__top{padding:4px 11px;border:0;border-radius:5px;background:transparent;color:var(--t1);font-family:var(--font);font-size:12.5px;cursor:pointer;white-space:nowrap}.strct-mb__top:hover,.strct-mb__top--open{background:var(--bg-3)}.strct-mb__top:focus-visible{outline:2px solid var(--acc50);outline-offset:1px}.strct-mb__menu{position:absolute;top:calc(100% + 4px);inset-inline-start:0;z-index:var(--z-dropdown);min-width:180px;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-md);box-shadow:var(--shh);display:flex;flex-direction:column}.strct-mb__menu:focus{outline:none}.strct-mb__item{display:flex;align-items:center;gap:8px;width:100%;padding:6px 10px;border:0;border-radius:5px;background:transparent;color:var(--t1);font-family:var(--font);font-size:12.5px;text-align:start;cursor:pointer;white-space:nowrap}.strct-mb__item:hover:not([aria-disabled=true]){background:var(--bg-3)}.strct-mb__item--critical{color:var(--critical)}.strct-mb__item--critical:hover:not([aria-disabled=true]){background:var(--critical-bg)}.strct-mb__item[aria-disabled=true]{color:var(--t4);cursor:default}.strct-mb__item:focus-visible{outline:2px solid var(--acc50);outline-offset:-2px}.strct-mb__divider{height:1px;margin:4px 6px;background:var(--b2)}.strct-mb__row{position:relative}.strct-mb__caret{margin-inline-start:auto;color:var(--t3)}[dir=rtl] .strct-mb__caret{transform:rotate(180deg)}.strct-mb__submenu{position:absolute;top:-5px;inset-inline-start:calc(100% + 2px);z-index:var(--z-base);min-width:160px;padding:4px;background:var(--bg-1);border:1px solid var(--b2);border-radius:var(--radius-md);box-shadow:var(--shh);display:flex;flex-direction:column}\n"] }]
19121
19249
  }], propDecorators: { menus: [{ type: i0.Input, args: [{ isSignal: true, alias: "menus", required: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], picked: [{ type: i0.Output, args: ["picked"] }], onDocClick: [{
19122
19250
  type: HostListener,
19123
19251
  args: ['document:click', ['$event']]