dap-design-system 0.57.5 → 0.57.7

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.
@@ -94,3 +94,5 @@ export type CloseSource = 'cancel-button' | 'close-button' | 'esc' | 'ok-button'
94
94
  export type AccordionVariant = 'default' | 'collapsed' | 'clean' | 'clean-collapsed';
95
95
  export type TabNavigationMode = 'group' | 'items';
96
96
  export type DialogState = 'closed' | 'opening' | 'open' | 'closing';
97
+ export type AriaCurrent = 'page' | 'step' | 'location' | 'date' | 'time' | 'true';
98
+ export type SidenavSpacing = 'top' | 'bottom' | 'both' | 'none';
@@ -22,6 +22,18 @@ export declare class AccordionBaseElement extends AccordionBaseWithSized {
22
22
  private _variant;
23
23
  /** Query for the accordion button element */
24
24
  protected button?: HTMLButtonElement;
25
+ /**
26
+ * The element that actually takes focus -- the toggle button inside the shadow root.
27
+ *
28
+ * Without this, `accordionElement.focus()` silently does nothing: the host has no
29
+ * tabindex and does not delegate focus, so a caller trying to move focus to an
30
+ * accordion header (after committing an inline edit, say) drops focus to <body>.
31
+ * Mirrors the `focusElement` contract that FocusableMixin defines and that
32
+ * dap-ds-modal's focus trap already looks for.
33
+ */
34
+ get focusElement(): HTMLElement;
35
+ focus(options?: FocusOptions): void;
36
+ blur(): void;
25
37
  /** Query for the accordion content element */
26
38
  protected content?: HTMLDivElement;
27
39
  /** Display size for accordion styling (sm or lg); other effective sizes map to sm. */
@@ -293,7 +293,14 @@ export default class DapDSButton extends GenericFormElement {
293
293
  private toggleHighContrast;
294
294
  private startLoadingTimeout;
295
295
  private clearLoadingTimeout;
296
+ /**
297
+ * `this.button` is a `@query`, so it is null until Lit has rendered the shadow root.
298
+ * A caller focusing a button the same tick it mounts -- a "Save" button that appears
299
+ * only after the form it belongs to opens, say -- would otherwise get a TypeError,
300
+ * not a no-op. Throwing out of a focus() call breaks whatever effect made it.
301
+ */
296
302
  focus(options?: FocusOptions): void;
303
+ blur(): void;
297
304
  /**
298
305
  * @ignore
299
306
  */
@@ -44,6 +44,8 @@ export default class DapDSRadioGroup extends GenericFormElement {
44
44
  optionalLabel: string;
45
45
  private _previousValue?;
46
46
  static readonly styles: import('lit').CSSResult;
47
+ /** A radio value may be `false` or `0`, so emptiness is not the same as falsiness. */
48
+ private get hasValue();
47
49
  willUpdate(changedProperties: Map<string, unknown>): void;
48
50
  updated(changedProperties: Map<string, unknown>): void;
49
51
  attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
@@ -1,6 +1,6 @@
1
1
  import { PropertyValueMap } from 'lit';
2
+ import { ButtonVariant } from '../../common/types';
2
3
  import { DdsElement } from '../../internal/dds-hu-element';
3
- import { ButtonVariant } from '../button/button.component';
4
4
  /**
5
5
  * `dap-ds-image-zoom`
6
6
  * @summary An image zoom component that provides a Medium.com-style zoom experience. Click an image to expand it to fill the viewport with a smooth animation.
@@ -1,6 +1,6 @@
1
1
  import { PropertyValueMap } from 'lit';
2
+ import { ButtonVariant } from '../../common/types';
2
3
  import { DdsElement } from '../../internal/dds-hu-element';
3
- import { ButtonVariant } from '../button/button.component';
4
4
  declare const ModalBaseWithSized: typeof DdsElement & {
5
5
  new (...args: any[]): import('../../internal/mixin/sizedMixin').SizedElementInterface;
6
6
  prototype: import('../../internal/mixin/sizedMixin').SizedElementInterface;
@@ -56,6 +56,20 @@ export default class ModalBaseElement extends ModalBaseWithSized {
56
56
  protected updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
57
57
  private handleOpen;
58
58
  private handleCloseAction;
59
+ /**
60
+ * Run `callback` once the dialog's transition settles -- or on a timer if no
61
+ * transition runs at all.
62
+ *
63
+ * Focus management and the `dds-opened` / `dds-closed` events used to hang directly
64
+ * off a `transitionend` listener registered `{ once: true }`. That event never fires
65
+ * when the transition is skipped (`prefers-reduced-motion: reduce`, a consumer
66
+ * zeroing `--dds-modal-transition-speed`, a backgrounded tab) or when it is
67
+ * interrupted, so focus would never enter the dialog and would never be restored on
68
+ * close. Accessibility behaviour must not depend on an animation completing.
69
+ */
70
+ private afterTransition;
71
+ /** Longest transition duration + delay declared on the dialog, in milliseconds. */
72
+ private transitionDurationMs;
59
73
  scrollLock: (open: boolean) => void;
60
74
  protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
61
75
  show(): void;
@@ -1,5 +1,5 @@
1
+ import { AriaCurrent, SidenavSpacing } from '../../common/types';
1
2
  import { DdsElement } from '../../internal/dds-hu-element';
2
- export type Spacing = 'top' | 'bottom' | 'both' | 'none';
3
3
  /**
4
4
  * `dap-ds-sidenav-item`
5
5
  * @summary Side navigation item
@@ -35,10 +35,21 @@ export default class DapDSSideNavItem extends DdsElement {
35
35
  href: string;
36
36
  /** Whether the side navigation item is active */
37
37
  active: boolean;
38
+ /**
39
+ * Which `aria-current` token to expose on the link when `active` is set.
40
+ *
41
+ * `aria-current` has to sit on the anchor that assistive technology actually
42
+ * exposes. Setting it on this host does nothing: the host is a role-less custom
43
+ * element, so the attribute is stranded there and screen-reader users cannot tell
44
+ * which item is current. Use `current="step"` inside a stepper.
45
+ *
46
+ * @type {'page' | 'step' | 'location' | 'date' | 'time' | 'true'}
47
+ */
48
+ current: AriaCurrent;
38
49
  /** The spacing of the side navigation item
39
50
  * @type {'top' | 'bottom' | 'both' | 'none'}
40
51
  */
41
- spacing: Spacing;
52
+ spacing: SidenavSpacing;
42
53
  /** The size of the side navigation item */
43
54
  size: 'xs' | 'sm' | 'lg';
44
55
  static readonly styles: import('lit').CSSResult;