@design.estate/dees-catalog 3.97.0 → 3.98.0

package/ts_web/elements/00group-button/dees-button/dees-button.ts

@@ -78,6 +78,15 @@ export class DeesButton extends DeesElement {
   })
   accessor insideForm: boolean = false;
 
+  /**
+   * stretches the inner button face to the host width.
+   * The host is `inline-block`, so `width: 100%` on the host alone leaves the
+   * `inline-flex` face shrink-wrapped. Opt in for stacked, full-bleed actions
+   * (login cards, sheets, empty states).
+   */
+  @property({ type: Boolean, reflect: true, attribute: 'full-width' })
+  accessor fullWidth: boolean = false;
+
   @property({ type: String, reflect: true })
   accessor icon!: string;
 
@@ -124,6 +133,26 @@ export class DeesButton extends DeesElement {
         display: none;
       }
 
+      :host([full-width]) {
+        display: block;
+        width: 100%;
+      }
+
+      /* A full-width button is sized by its container, so its label has to yield rather
+         than spill out of the face when the container is narrower than the text. */
+      :host([full-width]) .button {
+        width: 100%;
+        min-width: 0;
+        overflow: hidden;
+      }
+
+      :host([full-width]) .textbox {
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
       /* Form spacing styles */
       :host([inside-form]) {
         margin-bottom: var(--dees-spacing-lg);
@@ -363,10 +392,30 @@ export class DeesButton extends DeesElement {
         display: none;
       }
 
-      /* Focus state */
+      /* Focus state.
+         The base .button rule sets outline:none for the pointer path; the ring is restored
+         here for :focus-visible only, so a mouse press never leaves a ring behind while
+         keyboard focus is always visible. This rule is the focus affordance keyboard users
+         actually see — do not remove it alongside the base outline:none. */
       .button:focus-visible {
-        outline: 2px solid var(--dees-color-focus-ring);
+        /* Deliberately NOT --dees-color-focus-ring: that token is a 0.45/0.55 alpha, which
+           composites to 1.85:1 (bright) and 2.31:1 (dark) against the surface behind the
+           button — under the 3:1 that WCAG 2.2 SC 1.4.11 requires of a focus indicator, and
+           effectively invisible as a navy hairline on a dark canvas. The opaque accent
+           measures 4.02:1 bright / 5.76:1 dark. Raising the alpha on the shared token would
+           fix every other control too and is the wider change. */
+        outline: 2px solid var(--dees-color-accent-primary);
         outline-offset: 2px;
+        /* The indicator has to appear at once. The base .button rule carries
+           transition:all, which animates outline-color up from its initial currentColor —
+           measured as ~50ms of a near-white ring on a bright accent face, i.e. briefly
+           invisible right when the user needs it. Only the focused state opts out. */
+        transition: none;
+      }
+
+      /* A disabled face is removed from the tab order, so it should never show a ring. */
+      .button.disabled:focus-visible {
+        outline: none;
       }
 
       /* Loading spinner */
@@ -488,7 +537,14 @@ export class DeesButton extends DeesElement {
         class="button ${this.isHidden ? 'hidden' : ''} ${actualType} size-${actualSize} shape-${this.shape} ${this.status} ${this.disabled
           ? 'disabled'
           : ''}"
+        role="button"
+        tabindex=${this.disabled ? -1 : 0}
+        aria-disabled=${this.disabled ? 'true' : 'false'}
+        aria-busy=${this.status === 'pending' ? 'true' : 'false'}
+        .ariaLabel=${showText ? null : this.text || null}
         @click="${this.dispatchClick}"
+        @keydown=${this.handleKeydown}
+        @keyup=${this.handleKeyup}
       >
         ${this.status === 'normal' ? html``: html`
           <dees-spinner
@@ -519,6 +575,76 @@ export class DeesButton extends DeesElement {
     );
   }
 
+  /** the inner face — the element that actually carries focus */
+  private get faceElement(): HTMLElement | null {
+    return (this.shadowRoot?.querySelector('.button') as HTMLElement | null) || null;
+  }
+
+  /**
+   * States in which the button must not react to input. `disabled` is obvious; the status
+   * faces matter too, because `.button.pending / .success / .error` already set
+   * `pointer-events: none` and keyboard activation has to refuse the same interactions a
+   * mouse cannot make.
+   */
+  private get isInert(): boolean {
+    return this.disabled || this.status !== 'normal';
+  }
+
+  /**
+   * Focus lives on the inner face inside the shadow root, so `host.focus()` has to forward
+   * or it is a silent no-op. Note that `dees-form-submit.focus()` is deliberately *not*
+   * wired to this — that method submits the form, and dees-form depends on it.
+   */
+  public focus(optionsArg?: FocusOptions): void {
+    const face = this.faceElement;
+    if (face) {
+      face.focus(optionsArg);
+      return;
+    }
+    super.focus(optionsArg);
+  }
+
+  public blur(): void {
+    this.faceElement?.blur();
+    super.blur();
+  }
+
+  private handleKeydown = (eventArg: KeyboardEvent): void => {
+    if (eventArg.key === ' ' || eventArg.key === 'Spacebar') {
+      // Native buttons activate Space on keyup. Swallow the keydown so the page cannot
+      // scroll underneath the focused button.
+      eventArg.preventDefault();
+      return;
+    }
+    if (eventArg.key === 'Enter') {
+      eventArg.preventDefault();
+      this.activateFromKeyboard();
+    }
+  };
+
+  private handleKeyup = (eventArg: KeyboardEvent): void => {
+    if (eventArg.key === ' ' || eventArg.key === 'Spacebar') {
+      eventArg.preventDefault();
+      this.activateFromKeyboard();
+    }
+  };
+
+  /**
+   * Keyboard activation goes through a real click rather than dispatching `clicked`
+   * directly, exactly as a native button does. Several catalog components bind `@click` on
+   * dees-button instead of `@clicked` (dees-workspace-diff-editor, the profile picture
+   * modal), and both listener styles have to keep working from the keyboard.
+   *
+   * `pointer-events: none` does not block a programmatic `click()`, so inertness is
+   * enforced here rather than left to CSS.
+   */
+  private activateFromKeyboard(): void {
+    if (this.isInert) {
+      return;
+    }
+    this.faceElement?.click();
+  }
+
   public async firstUpdated() {
     // Extract light DOM content (icon + text) and set as properties
     this.extractLightDom();

package/ts_web/elements/00group-dataview/dees-statsgrid/dees-statsgrid.ts

@@ -823,14 +823,13 @@ export class DeesStatsGrid extends DeesElement {
           <div class="grid-title"></div>
           <div class="grid-actions">
             ${this.gridActions.map(action => html`
-              <dees-button 
+              <dees-button
                 @clicked=${() => this.handleGridAction(action)}
                 type="outline"
                 size="sm"
-              >
-                ${action.iconName ? html`<dees-icon .icon=${action.iconName} size="small"></dees-icon>` : ''}
-                ${action.name}
-              </dees-button>
+                .text=${action.name}
+                .icon=${action.iconName || ''}
+              ></dees-button>
             `)}
           </div>
         </div>
@@ -1249,4 +1248,4 @@ export class DeesStatsGrid extends DeesElement {
     // open an empty menu.)
     DeesContextmenu.openContextMenuWithOptions(event, tile.actions as any);
   }
-}
+}

package/ts_web/elements/00group-dataview/dees-table/dees-table.ts

@@ -735,22 +735,24 @@ export class DeesTable<T> extends DeesElement {
                             return html`
                               <td class="actionsCol">
                                 <div class="actionsContainer">
-                                  ${inRowActions.map(
-                                    (actionArg) => html`
-                                      <div
-                                        class="action"
-                                        @click=${() =>
-                                          actionArg.actionFunc({
-                                            item: itemArg,
-                                            table: this,
-                                          })}
-                                      >
-                                        ${actionArg.iconName
-                                          ? html` <dees-icon .icon=${actionArg.iconName}></dees-icon> `
-                                          : actionArg.name}
-                                      </div>
-                                    `
-                                  )}
+                                  ${inRowActions
+                                    .filter((actionArg) => this.isActionRelevant(actionArg, itemArg))
+                                    .map(
+                                      (actionArg) => html`
+                                        <div
+                                          class="action"
+                                          @click=${() =>
+                                            actionArg.actionFunc({
+                                              item: itemArg,
+                                              table: this,
+                                            })}
+                                        >
+                                          ${actionArg.iconName
+                                            ? html` <dees-icon .icon=${actionArg.iconName}></dees-icon> `
+                                            : actionArg.name}
+                                        </div>
+                                      `
+                                    )}
                                 </div>
                               </td>
                             `;
@@ -2119,7 +2121,11 @@ export class DeesTable<T> extends DeesElement {
       this.startEditing(cell.item, cell.col);
       return;
     }
-    const dblAction = this.dataActions.find((a) => a.type?.includes('doubleClick'));
+    const dblAction = this.dataActions.find(
+      (action) =>
+        action.type?.includes('doubleClick')
+        && this.isActionRelevant(action, cell.item)
+    );
     if (dblAction) dblAction.actionFunc({ item: cell.item, table: this });
   };
 
@@ -2145,16 +2151,19 @@ export class DeesTable<T> extends DeesElement {
       this.emitSelectionChange();
       this.requestUpdate();
     }
-    const userItems: plugins.tsclass.website.IMenuItem[] = this.getActionsForType('contextmenu').map(
-      (action) => ({
-        name: action.name,
-        iconName: action.iconName as any,
-        action: async () => {
-          await action.actionFunc({ item, table: this });
-          return null;
-        },
-      })
-    );
+    const userItems: plugins.tsclass.website.IMenuItem[] = this
+      .getActionsForType('contextmenu')
+      .filter((action) => this.isActionRelevant(action, item))
+      .map(
+        (action) => ({
+          name: action.name,
+          iconName: action.iconName as any,
+          action: async () => {
+            await action.actionFunc({ item, table: this });
+            return null;
+          },
+        })
+      );
     const defaultItems: plugins.tsclass.website.IMenuItem[] = [
       {
         name:
@@ -2333,6 +2342,13 @@ export class DeesTable<T> extends DeesElement {
     );
   }
 
+  private isActionRelevant(actionArg: ITableAction<T>, itemArg: T): boolean {
+    return (
+      !actionArg.actionRelevancyCheckFunc
+      || actionArg.actionRelevancyCheckFunc(itemArg)
+    );
+  }
+
   getActionsForType(typeArg: ITableAction['type'][0]) {
     const actions: ITableAction[] = [];
     for (const action of this.dataActions) {

package/ts_web/elements/00group-feedback/dees-spinner/dees-spinner.ts

@@ -55,6 +55,10 @@ export class DeesSpinner extends DeesElement {
         display: block;
       }
 
+      /* --dees-spinner-color lets a spinner on a coloured surface (an accent button face,
+         a toast) match that surface's foreground. It is read as an inherited fallback
+         rather than declared on :host, because a :host declaration would outrank the
+         value an ancestor sets. Unset consumers keep the previous token. */
       #loading {
         position: relative;
         transition: none;
@@ -62,9 +66,14 @@ export class DeesSpinner extends DeesElement {
         justify-content: center;
         align-content: center;
         background: transparent;
-        border: 3px solid color-mix(in srgb, var(--dees-color-text-primary) 20%, transparent);
+        border: 3px solid
+          color-mix(
+            in srgb,
+            var(--dees-spinner-color, var(--dees-color-text-primary)) 20%,
+            transparent
+          );
         border-radius: 50%;
-        border-top-color: var(--dees-color-text-primary);
+        border-top-color: var(--dees-spinner-color, var(--dees-color-text-primary));
         animation: spin 1s ease-in-out infinite;
         -webkit-animation: spin 1s ease-in-out infinite;
       }

package/ts_web/elements/00group-form/dees-form-submit/dees-form-submit.ts

@@ -47,6 +47,10 @@ export class DeesFormSubmit extends DeesElement {
   @property({ type: String })
   accessor iconPosition: 'left' | 'right' = 'left';
 
+  /** stretches the button face to the full host width — see dees-button.fullWidth */
+  @property({ type: Boolean, reflect: true, attribute: 'full-width' })
+  accessor fullWidth: boolean = false;
+
   constructor() {
     super();
   }
@@ -58,6 +62,12 @@ export class DeesFormSubmit extends DeesElement {
       :host {
         display: inline-block;
       }
+      /* The host has to stretch too, or forwarding fullWidth only widens the face inside a
+         still shrink-wrapped host and the property looks broken. */
+      :host([full-width]) {
+        display: block;
+        width: 100%;
+      }
       dees-button {
         width: 100%;
       }
@@ -73,6 +83,7 @@ export class DeesFormSubmit extends DeesElement {
         .icon=${this.icon}
         .iconPosition=${this.iconPosition}
         .text=${this.text}
+        .fullWidth=${this.fullWidth}
         ?disabled=${this.disabled}
         @clicked=${this.submit}
       ></dees-button>
@@ -103,6 +114,13 @@ export class DeesFormSubmit extends DeesElement {
     }
   }
 
+  /**
+   * NOT a focus method despite the name — it submits. `dees-form.addBehaviours()` calls
+   * `getSubmitButton()?.focus()` when Enter is pressed in the last field, and that is the
+   * catalog's "Enter submits the form" behaviour. Renaming it would break every form, so it
+   * stays; keyboard *focus* reaches the submit through the inner dees-button face, which
+   * carries its own tabindex.
+   */
   public async focus() {
     const domtools = await this.domtoolsPromise;
     if (!this.disabled) {

package/ts_web/elements/00group-input/dees-input-multitoggle/dees-input-multitoggle.ts

@@ -89,8 +89,8 @@ export class DeesInputMultitoggle extends DeesInputBase<DeesInputMultitoggle> {
 
       .option {
         position: relative;
-        display: flex;
-        align-items: center;
+        display: grid;
+        place-items: center;
         height: 100%;
         padding: 0 var(--dees-spacing-lg);
         border-radius: var(--dees-radius-sm);
@@ -104,6 +104,21 @@ export class DeesInputMultitoggle extends DeesInputBase<DeesInputMultitoggle> {
         z-index: 2;
       }
 
+      .option-label,
+      .option::after {
+        grid-area: 1 / 1;
+      }
+
+      /* Reserve the selected label's semibold width in every state so moving
+         the thumb never changes the segmented control's intrinsic width. */
+      .option::after {
+        content: attr(data-option);
+        visibility: hidden;
+        font-weight: 600;
+        pointer-events: none;
+        user-select: none;
+      }
+
       /* Hairline separators between unselected segments; they fade out next to
          the thumb. */
       .option::before {
@@ -197,8 +212,9 @@ export class DeesInputMultitoggle extends DeesInputBase<DeesInputMultitoggle> {
                 index === 0 || isSelected || index - 1 === selectedIndex;
               return html`<div
                 class="option ${isSelected ? 'selected' : ''} ${hideSeparator ? 'no-sep' : ''}"
+                data-option=${option}
                 @click=${() => this.handleSelection(option)}
-              >${option}</div>`;
+              ><span class="option-label">${option}</span></div>`;
             })}
           </div>
         </div>

package/ts_web/elements/00group-input/dees-input-text/dees-input-text.ts

@@ -67,6 +67,16 @@ export class DeesInputText extends DeesInputBase {
   @property({ attribute: false })
   accessor validConfirmed: boolean = false;
 
+  /**
+   * autofill hint forwarded to the inner input element.
+   * Empty by default, which renders no `autocomplete` attribute at all — byte-identical to
+   * this component before the property existed. Set it to a concrete token list to help
+   * password managers (`'username'`, `'current-password'`, `'one-time-code'`) or to opt an
+   * input into WebAuthn conditional mediation (`'username webauthn'`).
+   */
+  @property({ type: String })
+  accessor autocomplete: string = '';
+
   private validTimeout: ReturnType<typeof setTimeout> | undefined;
 
   public static styles = [
@@ -324,6 +334,25 @@ export class DeesInputText extends DeesInputBase {
     `;
   }
 
+  /**
+   * `autocomplete` is applied imperatively rather than bound in the template so that the
+   * default renders no attribute at all. Binding it would emit `autocomplete=""` on every
+   * text input in the catalog, and an empty or `on` value is not universally equivalent to
+   * an absent one across browser and password-manager heuristics.
+   */
+  public updated(_changedProperties: Map<string, any>): void {
+    super.updated(_changedProperties);
+    const input = this.shadowRoot?.querySelector('input');
+    if (!input) {
+      return;
+    }
+    if (this.autocomplete) {
+      input.setAttribute('autocomplete', this.autocomplete);
+    } else {
+      input.removeAttribute('autocomplete');
+    }
+  }
+
   firstUpdated() {
     if (this.validationFunction && this.value) {
       const result = this.validationFunction(this.value);

package/ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.ts

@@ -373,6 +373,7 @@ export class DeesSimpleAppDash extends DeesElement {
         bottom: 24px;
         width: calc(100% - 240px);
         overflow: auto;
+        scrollbar-gutter: stable;
         background: var(--dees-color-bg-canvas);
         overscroll-behavior: contain;
       }