dap-design-system 0.61.11 → 0.62.1

package/dist/components/command/command-item.scss.js

@@ -1,4 +1,4 @@
-const d = ":host{--dds-command-item-padding: var(--dds-spacing-100) var(--dds-spacing-200);--dds-command-item-background: none;--dds-command-item-color: var(--dds-text-primary-base);--dds-command-item-hover-background: var(--dds-transparent-black-subtle);--dds-command-item-selected-background: var(--dds-transparent-black-subtle);display:flex}.command-item{outline-color:var(--dds-focus-outer-ring);outline-offset:var(--dds-spacing-50);outline-width:var(--dds-border-width-large);transition-property:all;transition-duration:var(--dds-transition-fast);transition-timing-function:var(--dds-easing-ease-in-out);display:flex;align-items:center;width:100%;padding:var(--dds-command-item-padding);border:0;border-radius:var(--dds-radius-small);background:var(--dds-command-item-background);color:var(--dds-command-item-color);font-family:inherit;font-size:var(--dds-font-size-base);font-weight:var(--dds-font-weight-medium);line-height:var(--dds-font-line-height-xlarge);text-align:left;text-decoration:none;cursor:pointer}.command-item:hover:not(.command-item--disabled){background-color:var(--dds-command-item-hover-background)}.command-item:focus:not(.command-item--disabled){outline-style:solid}.command-item.command-item--selected{background-color:var(--dds-command-item-selected-background);color:var(--dds-command-item-color)}.command-item.command-item-selectable--disabled,.command-item.command-item--disabled{opacity:.5;cursor:not-allowed}.command-item__content{display:flex;align-items:center;gap:var(--dds-spacing-100);width:100%}.command-item__content--selectable{display:grid;grid-template-columns:var(--dds-spacing-600) 1fr;align-items:center;justify-content:space-between;gap:var(--dds-spacing-100);width:100%;cursor:pointer}.command-item__label{display:flex;flex:1;align-items:center;gap:var(--dds-spacing-100)}.command-item-check{margin-left:var(--dds-spacing-200);color:var(--dds-text-primary-base)}";
+const d = ":host{--dds-command-item-padding: var(--dds-spacing-100) var(--dds-spacing-200);--dds-command-item-background: none;--dds-command-item-color: var(--dds-text-primary-base);--dds-command-item-hover-background: var(--dds-transparent-black-subtle);--dds-command-item-selected-background: var(--dds-transparent-black-subtle);display:flex}:host([hidden]){display:none}.command-item{outline-color:var(--dds-focus-outer-ring);outline-offset:var(--dds-spacing-50);outline-width:var(--dds-border-width-large);transition-property:all;transition-duration:var(--dds-transition-fast);transition-timing-function:var(--dds-easing-ease-in-out);display:flex;align-items:center;width:100%;padding:var(--dds-command-item-padding);border:0;border-radius:var(--dds-radius-small);background:var(--dds-command-item-background);color:var(--dds-command-item-color);font-family:inherit;font-size:var(--dds-font-size-base);font-weight:var(--dds-font-weight-medium);line-height:var(--dds-font-line-height-xlarge);text-align:left;text-decoration:none;cursor:pointer}.command-item:hover:not(.command-item--disabled){background-color:var(--dds-command-item-hover-background)}.command-item:focus:not(.command-item--disabled){outline-style:solid}.command-item.command-item--selected{background-color:var(--dds-command-item-selected-background);color:var(--dds-command-item-color)}.command-item.command-item-selectable--disabled,.command-item.command-item--disabled{opacity:.5;cursor:not-allowed}.command-item__content{display:flex;align-items:center;gap:var(--dds-spacing-100);width:100%}.command-item__content--selectable{display:grid;grid-template-columns:var(--dds-spacing-600) 1fr;align-items:center;justify-content:space-between;gap:var(--dds-spacing-100);width:100%;cursor:pointer}.command-item__label{display:flex;flex:1;align-items:center;gap:var(--dds-spacing-100)}.command-item-check{margin-left:var(--dds-spacing-200);color:var(--dds-text-primary-base)}";
 export {
   d as default
 };

package/dist/components/command/command.component.js

@@ -1,7 +1,7 @@
 var w = Object.getPrototypeOf;
 var y = Reflect.get;
 var m = (n, e, t) => y(w(n), t, e);
-var h = (n, e, t) => new Promise((s, i) => {
+var d = (n, e, t) => new Promise((s, i) => {
   var l = (o) => {
     try {
       u(t.next(o));
@@ -29,7 +29,7 @@ import { createKeyboardNavigationHandler as v } from "../../internal/keyboard-na
 import f from "../popup/popup.component.js";
 import $ from "./command.scss.js";
 import { unsafeCSS as A } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var E = Object.defineProperty, d = (n, e, t, s) => {
+var E = Object.defineProperty, h = (n, e, t, s) => {
   for (var i = void 0, l = n.length - 1, p; l >= 0; l--)
     (p = n[l]) && (i = p(e, t, i) || i);
   return i && E(e, t, i), i;
@@ -41,7 +41,7 @@ const a = class a extends f {
     }, this.placement = "bottom-start", this.overflow = !0;
   }
   connectedCallback() {
-    return h(this, null, function* () {
+    return d(this, null, function* () {
       yield m(a.prototype, this, "connectedCallback").call(this), this.addEventListener("keydown", this._handleKeyDown), this.handleClick = this.handleClick.bind(this), this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
     });
   }
@@ -57,13 +57,13 @@ const a = class a extends f {
     }
   }
   updated(e) {
-    return h(this, null, function* () {
+    return d(this, null, function* () {
       yield m(a.prototype, this, "updated").call(this, e), e.has("opened") && this.opened && (yield this.updateComplete, this._initializeKeyboardNavigation());
     });
   }
   _initializeKeyboardNavigation() {
     this._keyboardNavigation = v(this, {
-      enabledSelector: "dap-ds-command-item:not([disabled])",
+      enabledSelector: "dap-ds-command-item:not([disabled]):not([hidden]):not(dap-ds-command-group[hidden] *)",
       onItemClick: (e) => {
         this._lastClickedItem = e;
       }
@@ -106,13 +106,13 @@ const a = class a extends f {
     this && !t.includes(this) && this.hideDropDown();
   }
   showDropDown() {
-    return h(this, null, function* () {
+    return d(this, null, function* () {
       var e;
       this.opened || (this.opened = !0, (e = this._trigger[0]) == null || e.setAttribute("aria-expanded", "true"), document.addEventListener("mousedown", this.handleDocumentMouseDown), yield this.updateComplete);
     });
   }
   hideDropDown(e) {
-    return h(this, null, function* () {
+    return d(this, null, function* () {
       var t, s;
       this.opened && (this.opened = !1, (t = this._trigger[0]) == null || t.setAttribute("aria-expanded", "false"), document.removeEventListener("mousedown", this.handleDocumentMouseDown), (s = this._keyboardNavigation) == null || s.reset(), yield this.updateComplete, e != null && e.skipFocus || this.focus());
     });
@@ -174,19 +174,19 @@ a.tagName = "dap-ds-command", a.dependencies = {
   "dap-ds-popup": f
 }, a.styles = A($);
 let r = a;
-d([
+h([
   C({ slot: "trigger" })
 ], r.prototype, "_trigger");
-d([
+h([
   g({ type: String })
 ], r.prototype, "value");
-d([
+h([
   g({ type: Boolean })
 ], r.prototype, "fullWidth");
-d([
+h([
   g({ type: String, attribute: "aria-labelledby" })
 ], r.prototype, "ariaLabelledBy");
-d([
+h([
   _()
 ], r.prototype, "_lastClickedItem");
 export {

package/dist/components/command/command.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"command.component.js","sources":["../../../src/components/command/command.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { nothing, PropertyValueMap, unsafeCSS } from 'lit'\nimport { property, queryAssignedElements, state } from 'lit/decorators.js'\nimport { html } from 'lit/static-html.js'\n\nimport { createKeyboardNavigationHandler } from '../../internal/keyboard-navigation.js'\nimport DapDSPopup from '../popup/popup.component.js'\nimport styles from './command.scss?inline'\n\n/**\n * `dap-ds-command`\n * @summary A command is a component that displays a list of commands.\n * @element dap-ds-command\n * @title - Command\n *\n * @event {{ value: string }} dds-change - Fired when the command value changes.\n *\n * @slot trigger - The trigger element for the command dropdown.\n * @slot - The command items.\n */\nexport default class DapDSCommand extends DapDSPopup {\n  static tagName = 'dap-ds-command'\n\n  static dependencies = {\n    'dap-ds-popup': DapDSPopup,\n  }\n\n  constructor() {\n    super()\n    this.placement = 'bottom-start'\n    this.overflow = true\n  }\n\n  @queryAssignedElements({ slot: 'trigger' })\n  private readonly _trigger!: HTMLElement[]\n\n  static readonly styles = unsafeCSS(styles)\n\n  /**\n   * The value of the command.\n   */\n  @property({ type: String })\n  value: string | null = null\n\n  /** Whether the command popup should take full width of the screen. */\n  @property({ type: Boolean }) fullWidth: boolean = false\n\n  /** ID of element that labels the command dropdown. */\n  @property({ type: String, attribute: 'aria-labelledby' })\n  ariaLabelledBy?: string\n\n  @state()\n  private _lastClickedItem: HTMLElement | null = null\n\n  private _keyboardNavigation: ReturnType<\n    typeof createKeyboardNavigationHandler\n  > | null = null\n\n  async connectedCallback() {\n    await super.connectedCallback()\n    this.addEventListener('keydown', this._handleKeyDown)\n    // Bind methods to maintain proper context\n    this.handleClick = this.handleClick.bind(this)\n    this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this)\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.removeEventListener('keydown', this._handleKeyDown)\n    // Ensure document listener is cleaned up\n    document.removeEventListener('mousedown', this.handleDocumentMouseDown)\n  }\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.firstUpdated(_changedProperties as Map<string, unknown>)\n\n    if (this.value) {\n      const item = this.querySelector(\n        `dap-ds-command-item[value=\"${this.value}\"]`,\n      )\n      if (item) {\n        this._lastClickedItem = item as HTMLElement\n        this._lastClickedItem.focus()\n      }\n    }\n  }\n\n  async updated(changedProperties: Map<string, unknown>) {\n    await super.updated(changedProperties)\n\n    if (changedProperties.has('opened') && this.opened) {\n      // Initialize keyboard navigation when dropdown opens\n      await this.updateComplete\n      this._initializeKeyboardNavigation()\n    }\n  }\n\n  private _initializeKeyboardNavigation() {\n    this._keyboardNavigation = createKeyboardNavigationHandler(this, {\n      enabledSelector: 'dap-ds-command-item:not([disabled])',\n      onItemClick: (item: HTMLElement) => {\n        this._lastClickedItem = item\n      },\n    })\n\n    // Initialize focus after next update\n    this.updateComplete.then(() => {\n      this._keyboardNavigation?.initializeFocus(\n        this._lastClickedItem || undefined,\n      )\n    })\n  }\n\n  private _handleKeyDown(event: KeyboardEvent) {\n    switch (event.key) {\n      case 'ArrowDown':\n      case 'ArrowUp':\n      case 'Home':\n      case 'End':\n      case 'Enter':\n      case ' ':\n        if (!this.opened) {\n          if (\n            event.key === 'ArrowDown' ||\n            event.key === 'ArrowUp' ||\n            event.key === 'Enter' ||\n            event.key === ' '\n          ) {\n            event.preventDefault()\n            this.showDropDown()\n          }\n          return\n        }\n\n        if (this._keyboardNavigation?.handleKeyDown(event)) {\n          // Key was handled by navigation manager\n          if (event.key === 'Enter' || event.key === ' ') {\n            this._handleFocusOut()\n          }\n        }\n        break\n\n      case 'Escape':\n        event.preventDefault()\n        this._handleFocusOut()\n        break\n    }\n  }\n\n  private _handleMenuItemClick(event: CustomEvent) {\n    const { value, closeOnSelect } = event.detail\n    this.emit('dds-change', { value })\n    if (closeOnSelect === 'true') {\n      this._lastClickedItem = event.target as HTMLElement\n      this._handleFocusOut()\n    }\n  }\n\n  private handleClick(event: MouseEvent) {\n    // Prevent the default action so that when the command is nested inside an\n    // interactive ancestor (e.g. a card rendered as an `<a href>`), toggling\n    // the menu does not also activate that ancestor and navigate away.\n    // `stopPropagation` alone is not enough: native anchor activation is a\n    // default action, not listener propagation.\n    event.preventDefault()\n    event.stopPropagation()\n    this.opened ? this.hideDropDown() : this.showDropDown()\n  }\n\n  private handleDocumentMouseDown(event: MouseEvent) {\n    const path = event.composedPath()\n    if (this && !path.includes(this)) {\n      this.hideDropDown()\n    }\n  }\n\n  async showDropDown() {\n    if (this.opened) {\n      return\n    }\n\n    this.opened = true\n    this._trigger[0]?.setAttribute('aria-expanded', 'true')\n\n    document.addEventListener('mousedown', this.handleDocumentMouseDown)\n\n    await this.updateComplete\n  }\n\n  async hideDropDown(options?: { skipFocus?: boolean }) {\n    if (!this.opened) {\n      return\n    }\n\n    this.opened = false\n    this._trigger[0]?.setAttribute('aria-expanded', 'false')\n\n    document.removeEventListener('mousedown', this.handleDocumentMouseDown)\n\n    // Reset keyboard navigation state\n    this._keyboardNavigation?.reset()\n\n    await this.updateComplete\n\n    if (!options?.skipFocus) {\n      this.focus()\n    }\n  }\n\n  private _handleFocusOut() {\n    this.hideDropDown()\n    this.focus()\n  }\n\n  private _handlePopupAutoClose = () => {\n    this.hideDropDown({ skipFocus: true })\n  }\n\n  public focus() {\n    if (this._trigger && this._trigger.length > 0) {\n      const triggerElement = this._trigger[0]\n      const rect = triggerElement.getBoundingClientRect()\n      const isFullyInViewport =\n        rect.top >= 0 &&\n        rect.left >= 0 &&\n        rect.bottom <= window.innerHeight &&\n        rect.right <= window.innerWidth\n\n      if (isFullyInViewport) {\n        triggerElement.focus({ preventScroll: true })\n      }\n    }\n  }\n\n  private _handleTriggerChange() {\n    if (this._trigger && this._trigger.length > 0) {\n      this._trigger[0].setAttribute('aria-controls', 'popup')\n      this._trigger[0].setAttribute(\n        'aria-expanded',\n        this.opened ? 'true' : 'false',\n      )\n    }\n  }\n\n  private _handleDefaultSlotChange() {\n    this._keyboardNavigation?.invalidateCache()\n  }\n\n  render() {\n    return html`\n      <dap-ds-popup\n        part=\"popup-base\"\n        id=\"popup\"\n        role=\"menu\"\n        aria-label=${this.ariaLabel || 'Command menu'}\n        aria-labelledby=${this.ariaLabelledBy || nothing}\n        aria-orientation=\"vertical\"\n        ?opened=${this.opened}\n        exportparts=\"popup\"\n        class=${clsx('command')}\n        placement=${this.placement}\n        ?disabled=${this.disabled}\n        @click=${this.handleClick}\n        maxHeight=${this.maxHeight}\n        ?overflow=${this.overflow}\n        offset=${this.offset}\n        ?sync=${this.sync}\n        ?hasArrow=${this.hasArrow}\n        ?fullWidth=${this.fullWidth}\n        ?disableViewportAutoClose=${this.disableViewportAutoClose}\n        floatingStrategy=${this.floatingStrategy}\n        @dds-close=${this._handlePopupAutoClose}\n        @dds-command-item-click=${this._handleMenuItemClick}>\n        <slot\n          name=\"trigger\"\n          slot=\"trigger\"\n          @slotchange=${this._handleTriggerChange}></slot>\n        <slot @slotchange=${this._handleDefaultSlotChange}></slot>\n      </dap-ds-popup>\n    `\n  }\n}\n"],"names":["_DapDSCommand","DapDSPopup","__async","__superGet","_changedProperties","item","changedProperties","createKeyboardNavigationHandler","_a","event","value","closeOnSelect","path","options","_b","triggerElement","rect","html","nothing","clsx","unsafeCSS","styles","DapDSCommand","__decorateClass","queryAssignedElements","property","state"],"mappings":"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"}
+{"version":3,"file":"command.component.js","sources":["../../../src/components/command/command.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { nothing, PropertyValueMap, unsafeCSS } from 'lit'\nimport { property, queryAssignedElements, state } from 'lit/decorators.js'\nimport { html } from 'lit/static-html.js'\n\nimport { createKeyboardNavigationHandler } from '../../internal/keyboard-navigation.js'\nimport DapDSPopup from '../popup/popup.component.js'\nimport styles from './command.scss?inline'\n\n/**\n * `dap-ds-command`\n * @summary A command is a component that displays a list of commands.\n * @element dap-ds-command\n * @title - Command\n *\n * @event {{ value: string }} dds-change - Fired when the command value changes.\n *\n * @slot trigger - The trigger element for the command dropdown.\n * @slot - The command items.\n */\nexport default class DapDSCommand extends DapDSPopup {\n  static tagName = 'dap-ds-command'\n\n  static dependencies = {\n    'dap-ds-popup': DapDSPopup,\n  }\n\n  constructor() {\n    super()\n    this.placement = 'bottom-start'\n    this.overflow = true\n  }\n\n  @queryAssignedElements({ slot: 'trigger' })\n  private readonly _trigger!: HTMLElement[]\n\n  static readonly styles = unsafeCSS(styles)\n\n  /**\n   * The value of the command.\n   */\n  @property({ type: String })\n  value: string | null = null\n\n  /** Whether the command popup should take full width of the screen. */\n  @property({ type: Boolean }) fullWidth: boolean = false\n\n  /** ID of element that labels the command dropdown. */\n  @property({ type: String, attribute: 'aria-labelledby' })\n  ariaLabelledBy?: string\n\n  @state()\n  private _lastClickedItem: HTMLElement | null = null\n\n  private _keyboardNavigation: ReturnType<\n    typeof createKeyboardNavigationHandler\n  > | null = null\n\n  async connectedCallback() {\n    await super.connectedCallback()\n    this.addEventListener('keydown', this._handleKeyDown)\n    // Bind methods to maintain proper context\n    this.handleClick = this.handleClick.bind(this)\n    this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this)\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    this.removeEventListener('keydown', this._handleKeyDown)\n    // Ensure document listener is cleaned up\n    document.removeEventListener('mousedown', this.handleDocumentMouseDown)\n  }\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.firstUpdated(_changedProperties as Map<string, unknown>)\n\n    if (this.value) {\n      const item = this.querySelector(\n        `dap-ds-command-item[value=\"${this.value}\"]`,\n      )\n      if (item) {\n        this._lastClickedItem = item as HTMLElement\n        this._lastClickedItem.focus()\n      }\n    }\n  }\n\n  async updated(changedProperties: Map<string, unknown>) {\n    await super.updated(changedProperties)\n\n    if (changedProperties.has('opened') && this.opened) {\n      // Initialize keyboard navigation when dropdown opens\n      await this.updateComplete\n      this._initializeKeyboardNavigation()\n    }\n  }\n\n  private _initializeKeyboardNavigation() {\n    this._keyboardNavigation = createKeyboardNavigationHandler(this, {\n      enabledSelector:\n        'dap-ds-command-item:not([disabled]):not([hidden]):not(dap-ds-command-group[hidden] *)',\n      onItemClick: (item: HTMLElement) => {\n        this._lastClickedItem = item\n      },\n    })\n\n    // Initialize focus after next update\n    this.updateComplete.then(() => {\n      this._keyboardNavigation?.initializeFocus(\n        this._lastClickedItem || undefined,\n      )\n    })\n  }\n\n  private _handleKeyDown(event: KeyboardEvent) {\n    switch (event.key) {\n      case 'ArrowDown':\n      case 'ArrowUp':\n      case 'Home':\n      case 'End':\n      case 'Enter':\n      case ' ':\n        if (!this.opened) {\n          if (\n            event.key === 'ArrowDown' ||\n            event.key === 'ArrowUp' ||\n            event.key === 'Enter' ||\n            event.key === ' '\n          ) {\n            event.preventDefault()\n            this.showDropDown()\n          }\n          return\n        }\n\n        if (this._keyboardNavigation?.handleKeyDown(event)) {\n          // Key was handled by navigation manager\n          if (event.key === 'Enter' || event.key === ' ') {\n            this._handleFocusOut()\n          }\n        }\n        break\n\n      case 'Escape':\n        event.preventDefault()\n        this._handleFocusOut()\n        break\n    }\n  }\n\n  private _handleMenuItemClick(event: CustomEvent) {\n    const { value, closeOnSelect } = event.detail\n    this.emit('dds-change', { value })\n    if (closeOnSelect === 'true') {\n      this._lastClickedItem = event.target as HTMLElement\n      this._handleFocusOut()\n    }\n  }\n\n  private handleClick(event: MouseEvent) {\n    // Prevent the default action so that when the command is nested inside an\n    // interactive ancestor (e.g. a card rendered as an `<a href>`), toggling\n    // the menu does not also activate that ancestor and navigate away.\n    // `stopPropagation` alone is not enough: native anchor activation is a\n    // default action, not listener propagation.\n    event.preventDefault()\n    event.stopPropagation()\n    this.opened ? this.hideDropDown() : this.showDropDown()\n  }\n\n  private handleDocumentMouseDown(event: MouseEvent) {\n    const path = event.composedPath()\n    if (this && !path.includes(this)) {\n      this.hideDropDown()\n    }\n  }\n\n  async showDropDown() {\n    if (this.opened) {\n      return\n    }\n\n    this.opened = true\n    this._trigger[0]?.setAttribute('aria-expanded', 'true')\n\n    document.addEventListener('mousedown', this.handleDocumentMouseDown)\n\n    await this.updateComplete\n  }\n\n  async hideDropDown(options?: { skipFocus?: boolean }) {\n    if (!this.opened) {\n      return\n    }\n\n    this.opened = false\n    this._trigger[0]?.setAttribute('aria-expanded', 'false')\n\n    document.removeEventListener('mousedown', this.handleDocumentMouseDown)\n\n    // Reset keyboard navigation state\n    this._keyboardNavigation?.reset()\n\n    await this.updateComplete\n\n    if (!options?.skipFocus) {\n      this.focus()\n    }\n  }\n\n  private _handleFocusOut() {\n    this.hideDropDown()\n    this.focus()\n  }\n\n  private _handlePopupAutoClose = () => {\n    this.hideDropDown({ skipFocus: true })\n  }\n\n  public focus() {\n    if (this._trigger && this._trigger.length > 0) {\n      const triggerElement = this._trigger[0]\n      const rect = triggerElement.getBoundingClientRect()\n      const isFullyInViewport =\n        rect.top >= 0 &&\n        rect.left >= 0 &&\n        rect.bottom <= window.innerHeight &&\n        rect.right <= window.innerWidth\n\n      if (isFullyInViewport) {\n        triggerElement.focus({ preventScroll: true })\n      }\n    }\n  }\n\n  private _handleTriggerChange() {\n    if (this._trigger && this._trigger.length > 0) {\n      this._trigger[0].setAttribute('aria-controls', 'popup')\n      this._trigger[0].setAttribute(\n        'aria-expanded',\n        this.opened ? 'true' : 'false',\n      )\n    }\n  }\n\n  private _handleDefaultSlotChange() {\n    this._keyboardNavigation?.invalidateCache()\n  }\n\n  render() {\n    return html`\n      <dap-ds-popup\n        part=\"popup-base\"\n        id=\"popup\"\n        role=\"menu\"\n        aria-label=${this.ariaLabel || 'Command menu'}\n        aria-labelledby=${this.ariaLabelledBy || nothing}\n        aria-orientation=\"vertical\"\n        ?opened=${this.opened}\n        exportparts=\"popup\"\n        class=${clsx('command')}\n        placement=${this.placement}\n        ?disabled=${this.disabled}\n        @click=${this.handleClick}\n        maxHeight=${this.maxHeight}\n        ?overflow=${this.overflow}\n        offset=${this.offset}\n        ?sync=${this.sync}\n        ?hasArrow=${this.hasArrow}\n        ?fullWidth=${this.fullWidth}\n        ?disableViewportAutoClose=${this.disableViewportAutoClose}\n        floatingStrategy=${this.floatingStrategy}\n        @dds-close=${this._handlePopupAutoClose}\n        @dds-command-item-click=${this._handleMenuItemClick}>\n        <slot\n          name=\"trigger\"\n          slot=\"trigger\"\n          @slotchange=${this._handleTriggerChange}></slot>\n        <slot @slotchange=${this._handleDefaultSlotChange}></slot>\n      </dap-ds-popup>\n    `\n  }\n}\n"],"names":["_DapDSCommand","DapDSPopup","__async","__superGet","_changedProperties","item","changedProperties","createKeyboardNavigationHandler","_a","event","value","closeOnSelect","path","options","_b","triggerElement","rect","html","nothing","clsx","unsafeCSS","styles","DapDSCommand","__decorateClass","queryAssignedElements","property","state"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBA,MAAqBA,IAArB,MAAqBA,UAAqBC,EAAW;AAAA,EAOnD,cAAc;AACN,UAAA,GAce,KAAA,QAAA,MAG2B,KAAA,YAAA,IAOlD,KAAQ,mBAAuC,MAE/C,KAAQ,sBAEG,MAiKX,KAAQ,wBAAwB,MAAM;AACpC,WAAK,aAAa,EAAE,WAAW,GAAA,CAAM;AAAA,IACvC,GA9LE,KAAK,YAAY,gBACjB,KAAK,WAAW;AAAA,EAAA;AAAA,EA4BZ,oBAAoB;AAAA,WAAAC,EAAA;AACxB,YAAMC,EAAAH,EAAA,iBAAM,0BAAN,IAAwB,GACzB,KAAA,iBAAiB,WAAW,KAAK,cAAc,GAEpD,KAAK,cAAc,KAAK,YAAY,KAAK,IAAI,GAC7C,KAAK,0BAA0B,KAAK,wBAAwB,KAAK,IAAI;AAAA,IAAA;AAAA;AAAA,EAGvE,uBAAuB;AACrB,UAAM,qBAAqB,GACtB,KAAA,oBAAoB,WAAW,KAAK,cAAc,GAE9C,SAAA,oBAAoB,aAAa,KAAK,uBAAuB;AAAA,EAAA;AAAA,EAG9D,aACRI,GACM;AAGN,QAFA,MAAM,aAAaA,CAA0C,GAEzD,KAAK,OAAO;AACd,YAAMC,IAAO,KAAK;AAAA,QAChB,8BAA8B,KAAK,KAAK;AAAA,MAC1C;AACA,MAAIA,MACF,KAAK,mBAAmBA,GACxB,KAAK,iBAAiB,MAAM;AAAA,IAC9B;AAAA,EACF;AAAA,EAGI,QAAQC,GAAyC;AAAA,WAAAJ,EAAA;AAC/C,YAAAC,EAAAH,EAAA,iBAAM,gBAAN,MAAcM,CAAiB,GAEjCA,EAAkB,IAAI,QAAQ,KAAK,KAAK,WAE1C,MAAM,KAAK,gBACX,KAAK,8BAA8B;AAAA,IACrC;AAAA;AAAA,EAGM,gCAAgC;AACjC,SAAA,sBAAsBC,EAAgC,MAAM;AAAA,MAC/D,iBACE;AAAA,MACF,aAAa,CAACF,MAAsB;AAClC,aAAK,mBAAmBA;AAAA,MAAA;AAAA,IAC1B,CACD,GAGI,KAAA,eAAe,KAAK,MAAM;;AAC7B,OAAAG,IAAA,KAAK,wBAAL,QAAAA,EAA0B;AAAA,QACxB,KAAK,oBAAoB;AAAA;AAAA,IAC3B,CACD;AAAA,EAAA;AAAA,EAGK,eAAeC,GAAsB;;AAC3C,YAAQA,EAAM,KAAK;AAAA,MACjB,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AACC,YAAA,CAAC,KAAK,QAAQ;AAEd,WAAAA,EAAM,QAAQ,eACdA,EAAM,QAAQ,aACdA,EAAM,QAAQ,WACdA,EAAM,QAAQ,SAEdA,EAAM,eAAe,GACrB,KAAK,aAAa;AAEpB;AAAA,QAAA;AAGF,SAAID,IAAA,KAAK,wBAAL,QAAAA,EAA0B,cAAcC,OAEtCA,EAAM,QAAQ,WAAWA,EAAM,QAAQ,QACzC,KAAK,gBAAgB;AAGzB;AAAA,MAEF,KAAK;AACH,QAAAA,EAAM,eAAe,GACrB,KAAK,gBAAgB;AACrB;AAAA,IAAA;AAAA,EACJ;AAAA,EAGM,qBAAqBA,GAAoB;AAC/C,UAAM,EAAE,OAAAC,GAAO,eAAAC,EAAc,IAAIF,EAAM;AACvC,SAAK,KAAK,cAAc,EAAE,OAAAC,EAAA,CAAO,GAC7BC,MAAkB,WACpB,KAAK,mBAAmBF,EAAM,QAC9B,KAAK,gBAAgB;AAAA,EACvB;AAAA,EAGM,YAAYA,GAAmB;AAMrC,IAAAA,EAAM,eAAe,GACrBA,EAAM,gBAAgB,GACtB,KAAK,SAAS,KAAK,aAAa,IAAI,KAAK,aAAa;AAAA,EAAA;AAAA,EAGhD,wBAAwBA,GAAmB;AAC3C,UAAAG,IAAOH,EAAM,aAAa;AAChC,IAAI,QAAQ,CAACG,EAAK,SAAS,IAAI,KAC7B,KAAK,aAAa;AAAA,EACpB;AAAA,EAGI,eAAe;AAAA,WAAAV,EAAA;;AACnB,MAAI,KAAK,WAIT,KAAK,SAAS,KACdM,IAAA,KAAK,SAAS,CAAC,MAAf,QAAAA,EAAkB,aAAa,iBAAiB,SAEvC,SAAA,iBAAiB,aAAa,KAAK,uBAAuB,GAEnE,MAAM,KAAK;AAAA,IAAA;AAAA;AAAA,EAGP,aAAaK,GAAmC;AAAA,WAAAX,EAAA;;AAChD,MAAC,KAAK,WAIV,KAAK,SAAS,KACdM,IAAA,KAAK,SAAS,CAAC,MAAf,QAAAA,EAAkB,aAAa,iBAAiB,UAEvC,SAAA,oBAAoB,aAAa,KAAK,uBAAuB,IAGtEM,IAAA,KAAK,wBAAL,QAAAA,EAA0B,SAE1B,MAAM,KAAK,gBAEND,KAAA,QAAAA,EAAS,aACZ,KAAK,MAAM;AAAA,IACb;AAAA;AAAA,EAGM,kBAAkB;AACxB,SAAK,aAAa,GAClB,KAAK,MAAM;AAAA,EAAA;AAAA,EAON,QAAQ;AACb,QAAI,KAAK,YAAY,KAAK,SAAS,SAAS,GAAG;AACvC,YAAAE,IAAiB,KAAK,SAAS,CAAC,GAChCC,IAAOD,EAAe,sBAAsB;AAOlD,MALEC,EAAK,OAAO,KACZA,EAAK,QAAQ,KACbA,EAAK,UAAU,OAAO,eACtBA,EAAK,SAAS,OAAO,cAGrBD,EAAe,MAAM,EAAE,eAAe,GAAA,CAAM;AAAA,IAC9C;AAAA,EACF;AAAA,EAGM,uBAAuB;AAC7B,IAAI,KAAK,YAAY,KAAK,SAAS,SAAS,MAC1C,KAAK,SAAS,CAAC,EAAE,aAAa,iBAAiB,OAAO,GACjD,KAAA,SAAS,CAAC,EAAE;AAAA,MACf;AAAA,MACA,KAAK,SAAS,SAAS;AAAA,IACzB;AAAA,EACF;AAAA,EAGM,2BAA2B;;AACjC,KAAAP,IAAA,KAAK,wBAAL,QAAAA,EAA0B;AAAA,EAAgB;AAAA,EAG5C,SAAS;AACA,WAAAS;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,qBAKU,KAAK,aAAa,cAAc;AAAA,0BAC3B,KAAK,kBAAkBC,CAAO;AAAA;AAAA,kBAEtC,KAAK,MAAM;AAAA;AAAA,gBAEbC,EAAK,SAAS,CAAC;AAAA,oBACX,KAAK,SAAS;AAAA,oBACd,KAAK,QAAQ;AAAA,iBAChB,KAAK,WAAW;AAAA,oBACb,KAAK,SAAS;AAAA,oBACd,KAAK,QAAQ;AAAA,iBAChB,KAAK,MAAM;AAAA,gBACZ,KAAK,IAAI;AAAA,oBACL,KAAK,QAAQ;AAAA,qBACZ,KAAK,SAAS;AAAA,oCACC,KAAK,wBAAwB;AAAA,2BACtC,KAAK,gBAAgB;AAAA,qBAC3B,KAAK,qBAAqB;AAAA,kCACb,KAAK,oBAAoB;AAAA;AAAA;AAAA;AAAA,wBAInC,KAAK,oBAAoB;AAAA,4BACrB,KAAK,wBAAwB;AAAA;AAAA;AAAA,EAAA;AAIzD;AAvQEnB,EAAO,UAAU,kBAEjBA,EAAO,eAAe;AAAA,EACpB,gBAAgBC;AAClB,GAWgBD,EAAA,SAASoB,EAAUC,CAAM;AAhB3C,IAAqBC,IAArBtB;AAcmBuB,EAAA;AAAA,EADhBC,EAAsB,EAAE,MAAM,UAAW,CAAA;AAAA,GAbvBF,EAcF,WAAA,UAAA;AAQjBC,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GArBPH,EAsBnB,WAAA,OAAA;AAG6BC,EAAA;AAAA,EAA5BE,EAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GAzBRH,EAyBU,WAAA,WAAA;AAI7BC,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,QAAQ,WAAW,kBAAmB,CAAA;AAAA,GA5BrCH,EA6BnB,WAAA,gBAAA;AAGQC,EAAA;AAAA,EADPG,EAAM;AAAA,GA/BYJ,EAgCX,WAAA,kBAAA;"}

package/dist/components/datatable/datatable.component.d.ts

@@ -33,6 +33,7 @@ type LoadingType = 'spinner' | 'skeleton';
  * @event {{ selection: RowSelectionState }} dds-selection-change - Fired when the selection of the table changes.
  * @event {{ pagination: PaginationState }} dds-pagination-change - Fired when the pagination of the table changes.
  * @event {{ row: Row<T> }} dds-row-click - Fired when a row is clicked.
+ * @event {{ columnSizing: Record<string, number> }} dds-column-sizing-change - Fired when the user resizes a column (at the end of a drag, on each resize-handle key press, and when a double-click resets the column).
  *
  * @slot loading - The loading content of the table.
  * @slot empty - The empty content of the table.
@@ -41,6 +42,7 @@ type LoadingType = 'spinner' | 'skeleton';
  * @csspart header - The header of the table.
  * @csspart header-row - The header row of the table.
  * @csspart header-cell - All cells of the header.
+ * @csspart resize-handle - The column resize handle at the right edge of a resizable header cell.
  * @csspart body - The body of the table.
  * @csspart empty - The empty content of the table.
  * @csspart loading - The loading content of the table.
@@ -77,6 +79,7 @@ type LoadingType = 'spinner' | 'skeleton';
  * @cssproperty --dds-datatable-max-height - Maximum height of the table. (default: none)
  * @cssproperty --dds-datatable-overflow-x - Horizontal overflow behavior. (default: auto)
  * @cssproperty --dds-datatable-overflow-y - Vertical overflow behavior. (default: auto)
+ * @cssproperty --dds-datatable-resize-handle-color - Color of the column resize indicator line on hover, focus and drag. (default: var(--dds-border-brand-base))
  */
 export default class DapDSDataTable<T> extends DdsElement {
     static tagName: string;
@@ -106,6 +109,11 @@ export default class DapDSDataTable<T> extends DdsElement {
     stickySelectionColumn: boolean;
     /** Enable sorting on the table */
     enableSorting: boolean;
+    /** Let the user resize columns by dragging (or arrow-keying) a handle at the
+     * right edge of each header cell. A column opts out with `enableResizing: false`
+     * in its definition; `minSize` / `maxSize` bound the width. Read the result from
+     * `dds-column-sizing-change` and pass it back through `columnSizing` to restore it. */
+    enableColumnResizing: boolean;
     /** Enable manual sorting on the table */
     manualSorting: boolean;
     /** Enables manual pagination. If this option is set to true, the table will not automatically paginate rows and instead will expect you to manually paginate the rows before passing them to the table. This is useful if you are doing server-side pagination and aggregation. */
@@ -198,7 +206,8 @@ export default class DapDSDataTable<T> extends DdsElement {
     pagination: PaginationState;
     /** @ignore */
     private _pagination;
-    /** Column sizing state of the table */
+    /** Column sizing state of the table: column id -> width in pixels. Overrides the
+     * column definition's `size`; columns missing from it keep their defined width. */
     columnSizing?: Record<string, number>;
     /** @ignore */
     private _columnSizing;
@@ -215,6 +224,7 @@ export default class DapDSDataTable<T> extends DdsElement {
     /** @ignore */
     debug: boolean;
     protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    protected willUpdate(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     protected updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     /**
      * Cleanup resize observer
@@ -224,6 +234,16 @@ export default class DapDSDataTable<T> extends DdsElement {
     private computeStickyOffsets;
     private getStickyStyle;
     private renderHeaderCell;
+    private getHeaderCellId;
+    private getCanResize;
+    private getResizeBounds;
+    private getStartWidth;
+    private setColumnWidth;
+    private emitColumnSizingChange;
+    private handleResizePointerDown;
+    private handleResizeKeydown;
+    private handleResizeReset;
+    private renderResizeHandle;
     private renderHeaderCellContent;
     private getHeaderCellStyle;
     private getSortIcon;