@api-client/ui 0.3.1 → 0.3.3

package/build/src/md/tabs/internals/Tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../../../src/md/tabs/internals/Tab.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAA;AACnD,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAC/D,OAAO,EAAa,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AACjE,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAA;AAG7C,OAAO,EAAE,MAAM,EAAE,MAAM,kCAAkC,CAAA;AACzD,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAE9C,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAClD,OAAO,2BAA2B,CAAA;;sBAEC,SAAS;;;;;;;;;;;;;;;;;;;;;iBAAvB,KAAM,SAAQ,WAAS;;;wCASzC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oCAY1C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oCAK1C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qCAK1C,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mCAE1C,KAAK,EAAE;sCAEP,KAAK,EAAE;kCAEP,UAAU,CAAC,WAAW,CAAC;YA3BxB,0LAAI,QAAQ,wEAIX;YAO2C,6KAAS,QAAQ,6BAAR,QAAQ,2FAAQ;YAKzB,6KAAS,QAAQ,6BAAR,QAAQ,2FAA0B;YAK3C,gLAAS,SAAS,6BAAT,SAAS,6FAAQ;YAE7D,0KAAmB,OAAO,6BAAP,OAAO,yFAAQ;YAElC,mLAAmB,UAAU,6BAAV,UAAU,+FAAQ;YAErB,uKAAmB,MAAM,6BAAN,MAAM,uFAA2B;;;QApC7E,IAAI,QAAQ;YACV,OAAO,UAAU,CAAC,IAAI,CAAC,CAAA;QACzB,CAAC;QAED;;;WAGG;QAEH,IAAI,QAAQ,CAAC,KAAc;YACzB,MAAM,GAAG,GAAG,UAAU,CAAC,IAAI,CAAC,CAAA;YAC5B,WAAW,CAAC,IAAI,EAAE,KAAK,CAAC,CAAA;YACxB,IAAI,CAAC,aAAa,CAAC,UAAU,EAAE,GAAG,CAAC,CAAA;QACrC,CAAC;QAO2C,8BArBzB,mDAAK,kDAqBwC,KAAK;QAErE;;WAEG;WAJkE;QALrE;;;;WAIG;QACyC,IAAS,QAAQ,8CAAQ;QAAzB,IAAS,QAAQ,oDAAQ;QAKzB,oIAAkC,SAAS;QAEvF;;WAEG;WAJoF;QAHvF;;WAEG;QACyC,IAAS,QAAQ,8CAA0B;QAA3C,IAAS,QAAQ,oDAA0B;QAK3C,sIAAqB,KAAK,GAAA;QAHtE;;WAEG;QACyC,IAAS,SAAS,+CAAQ;QAA1B,IAAS,SAAS,qDAAQ;QAE7D,mIAA6B,KAAK,GAAA;QAAlC,IAAmB,OAAO,6CAAQ;QAAlC,IAAmB,OAAO,mDAAQ;QAElC,uIAAgC,KAAK,GAAA;QAArC,IAAmB,UAAU,gDAAQ;QAArC,IAAmB,UAAU,sDAAQ;QAErB,2IAAoD;QAApD,IAAmB,MAAM,4CAA2B;QAApD,IAAmB,MAAM,kDAA2B;QAE1D,SAAS,wDAAG,GAA6B,EAAE;YAC5D,IAAI,CAAC,UAAU,GAAG,IAAI,CAAA;YACtB,OAAO,IAAI,CAAC,MAAM,CAAA;QACpB,CAAC,EAAA;QAED;YACE,KAAK,EAAE,CAAA;YACP,IAAI,CAAC,gBAAgB,CAAC,oBAAoB,GAAG,IAAI,CAAA;YACjD,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;YAC/D,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;YAC3D,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;YAC3D,IAAI,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;YACvE,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;YACnE,IAAI,CAAC,gBAAgB,CAAC,eAAe,EAAE,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;YAC3E,IAAI,CAAC,gBAAgB,CAAC,cAAc,EAAE,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;YACzE,IAAI,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;QACzE,CAAC;QAEQ,iBAAiB;YACxB,KAAK,CAAC,iBAAiB,EAAE,CAAA;YACzB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC;gBAC/B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,CAAA;YAClC,CAAC;YACD,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,EAAE,CAAC;gBACxC,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,OAAO,CAAC,CAAA;YAC7C,CAAC;QACH,CAAC;QAEQ,QAAQ,CAAC,MAAsB;YACtC,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAA;YACtB,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,MAAM,CAAA;YACpC,IAAI,SAAS,EAAE,CAAC;gBACd,OAAM;YACR,CAAC;YACD,IAAI,MAAM,KAAK,OAAO,IAAI,MAAM,KAAK,OAAO,EAAE,CAAC;gBAC7C,IAAI,CAAC,KAAK,EAAE,CAAA;YACd,CAAC;QACH,CAAC;QAED;;WAEG;QACO,gBAAgB,CAAC,CAAQ;YACjC,MAAM,IAAI,GAAG,CAAC,CAAC,MAAyB,CAAA;YACxC,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,MAAM,CAAA;QAC9C,CAAC;QAED;;WAEG;QACH,SAAS;YACP,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;gBACpB,OAAM;YACR,CAAC;YACD,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,UAAU,CAAC,CAAA;YAC1D,IAAI,CAAC,OAAO,EAAE,CAAC;gBACb,OAAM;YACR,CAAC;YACD,MAAM,MAAM,GAAe;gBACzB;oBACE,KAAK,EAAE,MAAM;iBACd;gBACD;oBACE,KAAK,EAAE,MAAM;iBACd;gBACD;oBACE,KAAK,EAAE,MAAM;iBACd;aACF,CAAA;YAED,OAAO,CAAC,OAAO,CAAC,MAAM,EAAE;gBACtB,QAAQ,EAAE,GAAG;gBACb,UAAU,EAAE,CAAC;gBACb,MAAM,EAAE,MAAM,CAAC,QAAQ;aACxB,CAAC,CAAA;QACJ,CAAC;QAEkB,MAAM;YACvB,MAAM,EAAE,OAAO,GAAG,KAAK,EAAE,GAAG,IAAI,CAAA;YAChC,MAAM,gBAAgB,GAAG,QAAQ,CAAC;gBAChC,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI,CAAC,OAAO;gBACtB,OAAO;aACR,CAAC,CAAA;YACF,OAAO,IAAI,CAAA;oBACK,gBAAgB,KAAK,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC;;UAErD,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,YAAY,CAAC;;YAEtC,IAAI,CAAC,UAAU,EAAE;;;UAGnB,IAAI,CAAC,eAAe,EAAE;;KAE3B,CAAA;QACH,CAAC;QAES,UAAU;YAClB,OAAO,IAAI,CAAA;;yCAE0B,IAAI,CAAC,gBAAgB;;KAEzD,CAAA;QACH,CAAC;QAES,YAAY,GAAG,GAAmB,EAAE;YAC5C,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAA;YACzB,OAAO,IAAI,CAAA,wCAAwC,QAAQ,gBAAgB,CAAA;QAC7E,CAAC,CAAA;QAES,eAAe;YACvB,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAA;YACpC,IAAI,CAAC,SAAS,EAAE,CAAC;gBACf,OAAO,OAAO,CAAA;YAChB,CAAC;YACD,MAAM,OAAO,GAAc;gBACzB,SAAS,EAAE,IAAI;gBACf,OAAO,EAAE,QAAQ,KAAK,SAAS;aAChC,CAAA;YACD,OAAO,IAAI,CAAA,eAAe,QAAQ,CAAC,OAAO,CAAC;;WAEpC,CAAA;QACT,CAAC;;;AAjKH,qBAkKC","sourcesContent":["import { html, nothing, TemplateResult } from 'lit'\nimport { property, queryAsync, state } from 'lit/decorators.js'\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js'\nimport { when } from 'lit/directives/when.js'\nimport { EndPressConfig } from '../../../controllers/ActionController.js'\nimport UiRipple from '../../ripple/internals/ripple.js'\nimport { ripple } from '../../effects/rippleDirective.js'\nimport { isDisabled, setDisabled } from '../../../lib/disabled.js'\nimport { UiElement } from '../../UiElement.js'\nimport type { TabsPriority } from './Tabs.js'\nimport { Easing } from '../../motion/animation.js'\nimport '../../ripple/ui-ripple.js'\n\nexport default class UiTab extends UiElement {\n  get disabled(): boolean {\n    return isDisabled(this)\n  }\n\n  /**\n   * When set, the button is a disabled state.\n   * @attribute\n   */\n  @property({ reflect: true, type: Boolean })\n  set disabled(value: boolean) {\n    const old = isDisabled(this)\n    setDisabled(this, value)\n    this.requestUpdate('disabled', old)\n  }\n\n  /**\n   * Whether the tab is selected. Note, this does not correspond to the `selected` state\n   * in the `ui-tabs`. This is only to render the tab in the selected state.\n   * @attribute\n   */\n  @property({ reflect: true, type: Boolean }) accessor selected = false\n\n  /**\n   * @attribute\n   */\n  @property({ reflect: true, type: Boolean }) accessor priority: TabsPriority = 'primary'\n\n  /**\n   * @attribute\n   */\n  @property({ reflect: true, type: Boolean }) accessor indicated = false\n\n  @state() protected accessor hasIcon = false\n\n  @state() protected accessor showRipple = false\n\n  @queryAsync('ui-ripple') protected accessor ripple!: Promise<UiRipple | null>\n\n  protected readonly getRipple = (): Promise<UiRipple | null> => {\n    this.showRipple = true\n    return this.ripple\n  }\n\n  constructor() {\n    super()\n    this.actionController.cancelKeyboardEvents = true\n    this.addEventListener('keydown', this.handleKeyDown.bind(this))\n    this.addEventListener('keyup', this.handleKeyUp.bind(this))\n    this.addEventListener('click', this.handleClick.bind(this))\n    this.addEventListener('pointerdown', this.handlePointerDown.bind(this))\n    this.addEventListener('pointerup', this.handlePointerUp.bind(this))\n    this.addEventListener('pointercancel', this.handlePointerCancel.bind(this))\n    this.addEventListener('pointerleave', this.handlePointerLeave.bind(this))\n    this.addEventListener('contextmenu', this.handleContextMenu.bind(this))\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'tab')\n    }\n    if (!this.hasAttribute('aria-selected')) {\n      this.setAttribute('aria-selected', 'false')\n    }\n  }\n\n  override endPress(config: EndPressConfig): void {\n    super.endPress(config)\n    const { cancelled, reason } = config\n    if (cancelled) {\n      return\n    }\n    if (reason === 'enter' || reason === 'space') {\n      this.click()\n    }\n  }\n\n  /**\n   * Sets the `_hasIcon` state property when the \"icon\" slot change event is dispatched.\n   */\n  protected handleIconChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement\n    this.hasIcon = !!slot.assignedNodes().length\n  }\n\n  /**\n   * When `indicated` is `true` it animates the indicator to highlight the position of the tab.\n   */\n  highlight(): void {\n    if (!this.indicated) {\n      return\n    }\n    const pointer = this.shadowRoot?.querySelector('.pointer')\n    if (!pointer) {\n      return\n    }\n    const frames: Keyframe[] = [\n      {\n        width: `40px`,\n      },\n      {\n        width: `80px`,\n      },\n      {\n        width: `40px`,\n      },\n    ]\n\n    pointer.animate(frames, {\n      duration: 360,\n      iterations: 1,\n      easing: Easing.STANDARD,\n    })\n  }\n\n  protected override render(): TemplateResult {\n    const { pressed = false } = this\n    const containerClasses = classMap({\n      surface: true,\n      withIcon: this.hasIcon,\n      pressed,\n    })\n    return html`\n      <div class=\"${containerClasses}\" ${ripple(this.getRipple)}>\n        <div class=\"container\"></div>\n        ${when(this.showRipple, this.renderRipple)}\n        <div class=\"content\">\n          ${this.renderIcon()}\n          <div class=\"tab-content\"><slot></slot></div>\n        </div>\n        ${this.renderIndicator()}\n      </div>\n    `\n  }\n\n  protected renderIcon(): TemplateResult {\n    return html`\n      <div class=\"icon\">\n        <slot name=\"icon\" @slotchange=\"${this.handleIconChange}\"></slot>\n      </div>\n    `\n  }\n\n  protected renderRipple = (): TemplateResult => {\n    const { disabled } = this\n    return html`<ui-ripple class=\"ripple\" ?disabled=\"${disabled}\"></ui-ripple>`\n  }\n\n  protected renderIndicator(): TemplateResult | typeof nothing {\n    const { indicated, priority } = this\n    if (!indicated) {\n      return nothing\n    }\n    const classes: ClassInfo = {\n      indicator: true,\n      primary: priority === 'primary',\n    }\n    return html`<div class=\"${classMap(classes)}\">\n      <span role=\"presentation\" class=\"pointer\"></span>\n    </div>`\n  }\n}\n"]}
+{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../../../src/md/tabs/internals/Tab.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, nothing, PropertyValues, TemplateResult } from 'lit'\nimport { property, query, state } from 'lit/decorators.js'\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js'\nimport type { BeginPressConfig, EndPressConfig } from '../../../controllers/ActionController.js'\nimport type UiRipple from '../../ripple/internals/ripple.js'\nimport { isDisabled, setDisabled } from '../../../lib/disabled.js'\nimport { UiElement } from '../../UiElement.js'\nimport type { SizingInfo, TabsPriority } from './Tabs.js'\nimport { Easing } from '../../motion/animation.js'\nimport '../../ripple/ui-ripple.js'\n\nexport default class UiTab extends UiElement {\n  get disabled(): boolean {\n    return isDisabled(this)\n  }\n\n  /**\n   * When set, the button is a disabled state.\n   * @attribute\n   */\n  @property({ reflect: true, type: Boolean })\n  set disabled(value: boolean) {\n    const old = isDisabled(this)\n    setDisabled(this, value)\n    this.requestUpdate('disabled', old)\n  }\n\n  /**\n   * Whether the tab is selected. Note, this does not correspond to the `selected` state\n   * in the `ui-tabs`. This is only to render the tab in the selected state.\n   * @attribute\n   */\n  @property({ reflect: true, type: Boolean }) accessor selected\n\n  /**\n   * @attribute\n   */\n  @property({ reflect: true, type: String }) accessor priority: TabsPriority\n\n  /**\n   * @attribute\n   */\n  @property({ reflect: true, type: Boolean }) accessor indicated\n\n  /**\n   * Indicates whether the tab has an icon.\n   * This is set automatically when the \"icon\" slot is populated.\n   */\n  @state() protected accessor hasIcon\n  /**\n   * Indicates whether the tab only has an icon and no text.\n   * This is set automatically when the default slot is populated with only an icon.\n   */\n  @state() protected accessor iconOnly\n\n  @query('ui-ripple') protected accessor ripple!: UiRipple | null\n\n  constructor() {\n    super()\n    this.priority = 'primary'\n    this.selected = false\n    this.indicated = false\n    this.hasIcon = false\n    this.iconOnly = true\n    this.actionController.cancelKeyboardEvents = true\n    this.addEventListener('keydown', this.handleKeyDown.bind(this))\n    this.addEventListener('keyup', this.handleKeyUp.bind(this))\n    this.addEventListener('click', this.handleClick.bind(this))\n    this.addEventListener('pointerdown', this.handlePointerDown.bind(this))\n    this.addEventListener('pointerup', this.handlePointerUp.bind(this))\n    this.addEventListener('pointercancel', this.handlePointerCancel.bind(this))\n    this.addEventListener('pointerleave', this.handlePointerLeave.bind(this))\n    this.addEventListener('pointerenter', this.handlePointerEnter.bind(this))\n    this.addEventListener('contextmenu', this.handleContextMenu.bind(this))\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'tab')\n    }\n    if (!this.hasAttribute('aria-selected')) {\n      this.setAttribute('aria-selected', 'false')\n    }\n  }\n\n  protected override willUpdate(cp: PropertyValues<this>): void {\n    super.willUpdate(cp)\n    if (cp.has('selected')) {\n      this.setAttribute('aria-selected', String(this.selected))\n    }\n  }\n\n  override beginPress(options: BeginPressConfig): void {\n    super.beginPress(options)\n    this.classList.add('pressed')\n    this.ripple?.beginPress(options.positionEvent)\n  }\n\n  override endPress(config: EndPressConfig): void {\n    super.endPress(config)\n    this.classList.remove('pressed')\n    this.ripple?.endPress()\n    const { cancelled, reason } = config\n    if (cancelled) {\n      return\n    }\n    if (reason === 'enter' || reason === 'space') {\n      this.click()\n    }\n  }\n\n  override handleClick(e: MouseEvent): void {\n    super.handleClick(e)\n    if (this.disabled) {\n      e.preventDefault()\n      e.stopPropagation()\n      return\n    }\n    this.endPress({ cancelled: false, actionData: { event: e } })\n  }\n\n  override handlePointerEnter(e: PointerEvent): void {\n    super.handlePointerEnter(e)\n    if (this.ripple) {\n      this.ripple.beginHover(e)\n    }\n  }\n\n  override handlePointerLeave(e: PointerEvent): void {\n    super.handlePointerLeave(e)\n    if (this.ripple) {\n      this.ripple.endHover()\n    }\n  }\n\n  override handleKeyUp(e: KeyboardEvent): void {\n    super.handleKeyUp(e)\n    if (this.disabled) {\n      e.preventDefault()\n      e.stopPropagation()\n      return\n    }\n  }\n\n  /**\n   * Sets the `_hasIcon` state property when the \"icon\" slot change event is dispatched.\n   */\n  protected handleIconSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement\n    this.hasIcon = !!slot.assignedNodes().length\n  }\n\n  protected handleSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement\n    // Check if there's any label text or elements. If not, then there is only\n    // an icon.\n    for (const node of slot.assignedNodes()) {\n      const hasTextContent = node.nodeType === Node.TEXT_NODE && !!(node as Text).wholeText.match(/\\S/)\n      if (node.nodeType === Node.ELEMENT_NODE || hasTextContent) {\n        this.iconOnly = false\n        return\n      }\n    }\n    this.iconOnly = true\n  }\n\n  public getIndicatorSizing(): SizingInfo {\n    const element = this.priority === 'primary' ? this.shadowRoot?.querySelector('.tab-content') : this\n    if (!element) {\n      return { width: 0, left: 0 }\n    }\n    const rect = element.getBoundingClientRect()\n    return {\n      width: rect.width,\n      left: rect.left,\n    }\n  }\n\n  /**\n   * When `indicated` is `true` it animates the indicator to highlight the position of the tab.\n   */\n  public highlight(): void {\n    if (!this.indicated) {\n      return\n    }\n    const pointer = this.shadowRoot?.querySelector('.pointer')\n    if (!pointer) {\n      return\n    }\n    const frames: Keyframe[] = [\n      {\n        width: `40px`,\n      },\n      {\n        width: `80px`,\n      },\n      {\n        width: `40px`,\n      },\n    ]\n\n    pointer.animate(frames, {\n      duration: 360,\n      iterations: 1,\n      easing: Easing.STANDARD,\n    })\n  }\n\n  protected override render(): TemplateResult {\n    const isPrimary = this.priority === 'primary'\n    const containerClasses = classMap({\n      'surface': true,\n      'has-icon': this.hasIcon,\n      'has-label': !this.iconOnly,\n      'stacked': isPrimary,\n    })\n    return html`\n      ${this.renderFocusRing()} ${this.renderRipple()}\n      <div class=\"${containerClasses}\">\n        <div class=\"tab-content\">\n          ${this.renderIcon()}\n          <slot @slotchange=\"${this.handleSlotChange}\"></slot>\n        </div>\n        ${isPrimary ? this.renderIndicator() : nothing}\n      </div>\n      ${!isPrimary ? this.renderIndicator() : nothing}\n    `\n  }\n\n  protected renderFocusRing(): TemplateResult {\n    return html`<md-focus-ring\n      part=\"focus-ring\"\n      class=\"focus-ring\"\n      inward\n      .control=\"${this as HTMLElement}\"\n    ></md-focus-ring>`\n  }\n\n  protected renderRipple(): TemplateResult {\n    return html`<ui-ripple class=\"ripple\" ?disabled=\"${this.disabled}\"></ui-ripple>`\n  }\n\n  protected renderIcon(): TemplateResult {\n    return html` <slot name=\"icon\" @slotchange=\"${this.handleIconSlotChange}\"></slot> `\n  }\n\n  protected renderIndicator(): TemplateResult | typeof nothing {\n    const { indicated, priority } = this\n    if (!indicated) {\n      return nothing\n    }\n    const classes: ClassInfo = {\n      indicator: true,\n      primary: priority === 'primary',\n    }\n    return html`<div class=\"${classMap(classes)}\"></div>`\n  }\n}\n"]}

package/build/src/md/tabs/internals/Tab.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/tabs/internals/Tab.styles.ts"],"names":[],"mappings":";AAEA,wBAoIC"}
+{"version":3,"file":"Tab.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/tabs/internals/Tab.styles.ts"],"names":[],"mappings":";AAEA,wBAyIC"}

package/build/src/md/tabs/internals/Tab.styles.js

@@ -1,9 +1,15 @@
 import { css } from 'lit';
 export default css `
   :host {
-    display: inline-block;
-    vertical-align: top;
+    display: inline-flex;
+    vertical-align: middle;
+    align-items: center;
+    justify-content: center;
+
+    position: relative;
     box-sizing: content-box;
+    padding: 0 16px;
+
     outline: none;
     text-rendering: auto;
     cursor: default;
@@ -17,55 +23,48 @@ export default css `
     letter-spacing: var(--md-sys-typescale-title-small-tracking);
     line-height: var(--md-sys-typescale-title-small-height);
 
-    --md-ripple-hover-state-layer-color: var(--md-sys-color-primary);
-    --md-ripple-focus-state-layer-color: var(--md-sys-color-primary);
-    --md-ripple-pressed-state-layer-color: var(--md-sys-color-primary);
-    /* background-color: var(--md-sys-color-surface); */
-    color: var(--md-sys-color-on-surface);
+    --md-ripple-hover-state-layer-color: currentColor;
+    --md-ripple-focus-state-layer-color: currentColor;
+    --md-ripple-pressed-state-layer-color: currentColor;
+
+    --_background-color: var(--md-sys-color-surface);
+    --_color: var(--md-sys-color-on-surface-variant);
+    --_container-height: 48px;
+    --_active-indicator-color: var(--md-sys-color-primary);
+    --_active-indicator-shape: var(--md-primary-tab-active-indicator-shape, 3px 3px 0px 0px);
+    --_active-indicator-height: 2px;
+    --_active-indicator-opacity: 0;
+    --_with-icon-and-label-text-container-height: var(--md-primary-tab-with-icon-and-label-text-container-height, 64px);
+    --_icon-size: var(--md-secondary-tab-icon-size, 24px);
+
+    background-color: var(--_background-color);
+    color: var(--_color);
   }
 
   :host([hidden]) {
     display: none;
   }
 
-  .surface {
-    width: inherit;
-    height: inherit;
-    position: relative;
-    border-radius: inherit;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 48px;
+  .ripple.activated {
+    z-index: 1;
   }
 
-  .surface.withIcon {
-    height: 64px;
+  .focus-ring {
+    border-radius: var(--md-sys-shape-corner-small);
+    transition: margin-bottom var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
   }
 
-  .container {
-    position: absolute;
-    inset: 0;
-    z-index: 1;
-  }
-
-  .content {
-    z-index: 2;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    padding: 0px 20px;
+  :host([selected]) .focus-ring {
+    margin-bottom: calc(var(--_active-indicator-height) + 1px);
   }
 
   .tab-content {
     display: flex;
     align-items: center;
-  }
-
-  .ripple {
-    border-radius: inherit;
-    z-index: 3;
+    justify-content: center;
+    flex-direction: row;
+    gap: 8px;
+    height: var(--_container-height);
   }
 
   .icon ::slotted(*) {
@@ -81,55 +80,61 @@ export default css `
   }
 
   :host([selected]) {
-    color: var(--md-sys-color-primary);
+    --_active-indicator-opacity: 1;
   }
 
-  .indicator {
-    position: absolute;
-    bottom: 0px;
-    left: 0px;
-    right: 0px;
-    height: 2px;
-    display: flex;
-    justify-content: center;
+  :host([priority='primary']) {
+    --_color: var(--md-primary-tab-label-text-color, var(--md-sys-color-on-surface-variant));
   }
 
-  .indicator.primary {
-    height: 3px;
+  :host([priority='secondary']) {
+    --_color: var(--md-secondary-tab-label-text-color, var(--md-sys-color-on-surface-variant));
   }
 
-  .pointer {
-    height: inherit;
-    display: block;
-    background-color: var(--md-sys-color-primary);
+  :host([selected][priority='primary']) {
+    --_color: var(--md-primary-tab-active-label-text-color, var(--md-sys-color-primary));
   }
 
-  .indicator.primary .pointer {
-    border-radius: 3px 3px 0px 0px;
-    width: 40px;
+  :host([selected][priority='secondary']) {
+    --_color: var(--md-secondary-tab-active-label-text-color, var(--md-sys-color-on-surface));
   }
 
-  .indicator:not(.primary) .pointer {
-    flex: 1;
+  .surface {
+    position: relative;
+  }
+
+  .indicator {
+    position: absolute;
+    box-sizing: border-box;
+    transform-origin: bottom left;
+    background: var(--_active-indicator-color);
+    border-radius: var(--_active-indicator-shape);
+    height: var(--_active-indicator-height);
+    inset: auto 0 0 0;
+    opacity: var(--_active-indicator-opacity);
+  }
+
+  :host([priority='primary']) {
+    --_active-indicator-height: 3px;
+    --_active-indicator-shape: 3px 3px 0px 0px;
   }
 
   :host([disabled]) {
     pointer-events: none;
   }
 
-  :host([disabled]) .content {
-    color: var(--md-sys-color-on-surface);
+  :host([disabled]) {
+    --_color: var(--md-sys-color-on-surface);
     opacity: 0.38;
   }
 
-  :host(:hover) .container {
-    background-color: var(--md-sys-color-primary);
-    opacity: var(--md-sys-state-hover-state-layer-opacity);
+  .stacked .tab-content {
+    flex-direction: column;
+    gap: 2px;
   }
 
-  :host(:focus) .container {
-    background-color: var(--md-sys-color-primary);
-    opacity: var(--md-sys-state-focus-state-layer-opacity);
+  .stacked.has-icon.has-label .tab-content {
+    height: var(--_with-icon-and-label-text-container-height);
   }
 `;
 //# sourceMappingURL=Tab.styles.js.map

package/build/src/md/tabs/internals/Tab.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.styles.js","sourceRoot":"","sources":["../../../../../src/md/tabs/internals/Tab.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoIjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  :host {\n    display: inline-block;\n    vertical-align: top;\n    box-sizing: content-box;\n    outline: none;\n    text-rendering: auto;\n    cursor: default;\n    user-select: none;\n    width: auto;\n    -webkit-tap-highlight-color: transparent;\n\n    font-family: var(--md-sys-typescale-title-small-font);\n    font-weight: var(--md-sys-typescale-title-small-weight);\n    font-size: var(--md-sys-typescale-title-small-size);\n    letter-spacing: var(--md-sys-typescale-title-small-tracking);\n    line-height: var(--md-sys-typescale-title-small-height);\n\n    --md-ripple-hover-state-layer-color: var(--md-sys-color-primary);\n    --md-ripple-focus-state-layer-color: var(--md-sys-color-primary);\n    --md-ripple-pressed-state-layer-color: var(--md-sys-color-primary);\n    /* background-color: var(--md-sys-color-surface); */\n    color: var(--md-sys-color-on-surface);\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  .surface {\n    width: inherit;\n    height: inherit;\n    position: relative;\n    border-radius: inherit;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 48px;\n  }\n\n  .surface.withIcon {\n    height: 64px;\n  }\n\n  .container {\n    position: absolute;\n    inset: 0;\n    z-index: 1;\n  }\n\n  .content {\n    z-index: 2;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    padding: 0px 20px;\n  }\n\n  .tab-content {\n    display: flex;\n    align-items: center;\n  }\n\n  .ripple {\n    border-radius: inherit;\n    z-index: 3;\n  }\n\n  .icon ::slotted(*) {\n    color: var(--md-sys-color-on-surface-variant);\n    fill: var(--md-sys-color-on-surface-variant);\n    width: 24px;\n    height: 24px;\n  }\n\n  :host([selected]) .icon ::slotted(*) {\n    color: var(--md-sys-color-primary);\n    fill: var(--md-sys-color-primary);\n  }\n\n  :host([selected]) {\n    color: var(--md-sys-color-primary);\n  }\n\n  .indicator {\n    position: absolute;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    height: 2px;\n    display: flex;\n    justify-content: center;\n  }\n\n  .indicator.primary {\n    height: 3px;\n  }\n\n  .pointer {\n    height: inherit;\n    display: block;\n    background-color: var(--md-sys-color-primary);\n  }\n\n  .indicator.primary .pointer {\n    border-radius: 3px 3px 0px 0px;\n    width: 40px;\n  }\n\n  .indicator:not(.primary) .pointer {\n    flex: 1;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n  }\n\n  :host([disabled]) .content {\n    color: var(--md-sys-color-on-surface);\n    opacity: 0.38;\n  }\n\n  :host(:hover) .container {\n    background-color: var(--md-sys-color-primary);\n    opacity: var(--md-sys-state-hover-state-layer-opacity);\n  }\n\n  :host(:focus) .container {\n    background-color: var(--md-sys-color-primary);\n    opacity: var(--md-sys-state-focus-state-layer-opacity);\n  }\n`\n"]}
+{"version":3,"file":"Tab.styles.js","sourceRoot":"","sources":["../../../../../src/md/tabs/internals/Tab.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyIjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  :host {\n    display: inline-flex;\n    vertical-align: middle;\n    align-items: center;\n    justify-content: center;\n\n    position: relative;\n    box-sizing: content-box;\n    padding: 0 16px;\n\n    outline: none;\n    text-rendering: auto;\n    cursor: default;\n    user-select: none;\n    width: auto;\n    -webkit-tap-highlight-color: transparent;\n\n    font-family: var(--md-sys-typescale-title-small-font);\n    font-weight: var(--md-sys-typescale-title-small-weight);\n    font-size: var(--md-sys-typescale-title-small-size);\n    letter-spacing: var(--md-sys-typescale-title-small-tracking);\n    line-height: var(--md-sys-typescale-title-small-height);\n\n    --md-ripple-hover-state-layer-color: currentColor;\n    --md-ripple-focus-state-layer-color: currentColor;\n    --md-ripple-pressed-state-layer-color: currentColor;\n\n    --_background-color: var(--md-sys-color-surface);\n    --_color: var(--md-sys-color-on-surface-variant);\n    --_container-height: 48px;\n    --_active-indicator-color: var(--md-sys-color-primary);\n    --_active-indicator-shape: var(--md-primary-tab-active-indicator-shape, 3px 3px 0px 0px);\n    --_active-indicator-height: 2px;\n    --_active-indicator-opacity: 0;\n    --_with-icon-and-label-text-container-height: var(--md-primary-tab-with-icon-and-label-text-container-height, 64px);\n    --_icon-size: var(--md-secondary-tab-icon-size, 24px);\n\n    background-color: var(--_background-color);\n    color: var(--_color);\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  .ripple.activated {\n    z-index: 1;\n  }\n\n  .focus-ring {\n    border-radius: var(--md-sys-shape-corner-small);\n    transition: margin-bottom var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);\n  }\n\n  :host([selected]) .focus-ring {\n    margin-bottom: calc(var(--_active-indicator-height) + 1px);\n  }\n\n  .tab-content {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-direction: row;\n    gap: 8px;\n    height: var(--_container-height);\n  }\n\n  .icon ::slotted(*) {\n    color: var(--md-sys-color-on-surface-variant);\n    fill: var(--md-sys-color-on-surface-variant);\n    width: 24px;\n    height: 24px;\n  }\n\n  :host([selected]) .icon ::slotted(*) {\n    color: var(--md-sys-color-primary);\n    fill: var(--md-sys-color-primary);\n  }\n\n  :host([selected]) {\n    --_active-indicator-opacity: 1;\n  }\n\n  :host([priority='primary']) {\n    --_color: var(--md-primary-tab-label-text-color, var(--md-sys-color-on-surface-variant));\n  }\n\n  :host([priority='secondary']) {\n    --_color: var(--md-secondary-tab-label-text-color, var(--md-sys-color-on-surface-variant));\n  }\n\n  :host([selected][priority='primary']) {\n    --_color: var(--md-primary-tab-active-label-text-color, var(--md-sys-color-primary));\n  }\n\n  :host([selected][priority='secondary']) {\n    --_color: var(--md-secondary-tab-active-label-text-color, var(--md-sys-color-on-surface));\n  }\n\n  .surface {\n    position: relative;\n  }\n\n  .indicator {\n    position: absolute;\n    box-sizing: border-box;\n    transform-origin: bottom left;\n    background: var(--_active-indicator-color);\n    border-radius: var(--_active-indicator-shape);\n    height: var(--_active-indicator-height);\n    inset: auto 0 0 0;\n    opacity: var(--_active-indicator-opacity);\n  }\n\n  :host([priority='primary']) {\n    --_active-indicator-height: 3px;\n    --_active-indicator-shape: 3px 3px 0px 0px;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n  }\n\n  :host([disabled]) {\n    --_color: var(--md-sys-color-on-surface);\n    opacity: 0.38;\n  }\n\n  .stacked .tab-content {\n    flex-direction: column;\n    gap: 2px;\n  }\n\n  .stacked.has-icon.has-label .tab-content {\n    height: var(--_with-icon-and-label-text-container-height);\n  }\n`\n"]}

package/build/src/md/tabs/internals/Tabs.d.ts

@@ -1,14 +1,22 @@
-import { LitElement, nothing, PropertyValues, TemplateResult } from 'lit';
-import { StyleInfo } from 'lit/directives/style-map.js';
+import { LitElement, PropertyValues, TemplateResult } from 'lit';
 import UiTab from './Tab.js';
 import '../../icon-button/ui-icon-button.js';
 import '../../divider/ui-divider.js';
 import '../../icons/ui-icon.js';
 export type TabsPriority = 'primary' | 'secondary';
 export interface TabSelectionDetail {
+    /**
+     * The selected tab.
+     */
     item: UiTab;
+    /**
+     * The index of the selected tab.
+     */
     index: number;
-    select: string | null;
+}
+export interface SizingInfo {
+    left: number;
+    width: number;
 }
 /**
  * Calculates value in percentages
@@ -20,88 +28,78 @@ export declare function calcPercent(w: number, w0: number): number;
 /**
  * A container for tabs.
  *
- * @fires select - A non bubbling event when selection change through user interaction.
- *                The `event.detail` object contains the `item` and `index` properties.
- *                It also has the `select` property with the value of the `selectedAttribute` on the tab.
+ * @fires change - A non bubbling event when selection change through user interaction.
  */
 export default class UiTabs extends LitElement {
-    items: UiTab[];
     activeItem: UiTab | null;
     previousItem: UiTab | null;
-    protected accessor assignedElements: HTMLElement[];
-    protected accessor pointer: HTMLElement;
-    protected accessor content: HTMLElement;
     /**
-     * The priority of the tabs.
-     *
-     * @default primary
-     * @attribute
+     * The currently selected tab, `null` only when there are no tab children.
      */
-    accessor priority: TabsPriority;
+    get activeTab(): UiTab | null;
+    set activeTab(tab: UiTab | null);
     /**
-     * If true, tabs are scrollable and the tab width is based on the label width.
-     * @attribute
+     * The index of the currently selected tab.
      */
-    accessor scrollable: boolean | undefined;
+    get activeTabIndex(): number;
     /**
-     * The value of the selected tab.
-     * This is matched with the `aria-controls` of the tab.
-     * @attribute
+     * Sets the active tab by index.
      */
-    accessor selected: string | undefined;
+    set activeTabIndex(index: number);
+    get focusedTab(): UiTab | undefined;
+    private accessor tabs;
+    private accessor tabsScrollerElement;
+    private accessor slotElement;
+    private accessor pointer;
     /**
-     * The attribute on the `ui-tab` that indicates which value for `selected`
-     * corresponds to which tab.
+     * The priority of the tabs.
      *
-     * @default aria-controls
+     * @default primary
      * @attribute
      */
-    accessor selectedAttribute: string;
-    protected accessor pointerStyles: StyleInfo | undefined;
-    protected contentScroll?: number;
-    protected accessor indicated: boolean;
-    protected observer: IntersectionObserver;
+    accessor priority: TabsPriority;
+    private accessor pointerStyles;
+    private accessor indicated;
+    private observer;
     /**
      * This is set by the intersection observer. Once the tabs are in the view it turns to `true`.
      * This we can properly visualize selection.
      */
     accessor isVisible: boolean | undefined;
+    /**
+     * Whether or not to automatically select a tab when it is focused.
+     */
+    accessor autoActivate: boolean;
+    private readonly internals;
     constructor();
     protected willUpdate(cp: PropertyValues<this>): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected intersectionCallback(entries: IntersectionObserverEntry[]): void;
-    protected updateItems(): Promise<void>;
     /**
-     * @return Whether the given element is a list item element.
+     * Scrolls the toolbar, if overflowing, to the active tab, or the provided
+     * tab.
+     *
+     * @param tabToScrollTo The tab that should be scrolled to. Defaults to the
+     *     active tab.
+     * @return A Promise that resolves after the tab has been scrolled to.
      */
-    protected isTabItem(element: Element): element is UiTab;
-    protected isSelectable(element: UiTab): boolean;
-    protected ensureSelection(): void;
-    protected makeSelection(tab?: UiTab, focus?: boolean): void;
-    notifySelect(item: UiTab): void;
-    protected selectItem(tab: UiTab, focus?: boolean): void;
-    protected deselectItem(tab: UiTab): void;
+    scrollToTab(tabToScrollTo?: UiTab | null): Promise<void>;
     protected handleVisibility(): void;
     protected positionPointer(tab: UiTab, old?: UiTab | null): Promise<void>;
     protected moveAnimation?: Animation;
-    protected getPrimaryLeft(tab: UiTab): string;
-    protected getSecondaryLeft(tab: UiTab): string;
-    protected getPrimaryKeyframes(start: string, final: string): Keyframe[];
-    protected getSecondaryKeyframes(start: string, final: string): Keyframe[];
-    protected contentClickHandler(e: PointerEvent): void;
-    protected contentKeyDownHandler(e: KeyboardEvent): void;
-    protected activateFromEvent(e: Event): void;
-    protected handleScrollLeft(): void;
-    protected handleScrollRight(): void;
-    protected handleScroll(e: Event): void;
-    protected handleKeyDown(e: KeyboardEvent): void;
-    getPreviousItem(item: UiTab): UiTab;
-    getNextItem(item: UiTab): UiTab;
+    protected getTabSizing(tab: UiTab): SizingInfo;
+    protected getPrimaryKeyframes(start: SizingInfo, final: SizingInfo): Keyframe[];
+    protected getSecondaryKeyframes(start: SizingInfo, final: SizingInfo): Keyframe[];
+    protected handleTabClick(e: PointerEvent): Promise<void>;
+    private activateTab;
+    private updateFocusableTab;
+    private handleKeydown;
+    private handleKeyup;
+    private handleFocusout;
+    private handleSlotChange;
     render(): TemplateResult;
     protected renderSlot(): TemplateResult;
     protected renderIndicator(): TemplateResult;
-    protected renderLeftScrollControl(): TemplateResult | typeof nothing;
-    protected rightScrollControl(): TemplateResult | typeof nothing;
 }
 //# sourceMappingURL=Tabs.d.ts.map

package/build/src/md/tabs/internals/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../../src/md/tabs/internals/Tabs.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../../../src/md/tabs/internals/Tabs.ts"],"names":[],"mappings":"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"}