@api-client/ui 0.3.2 → 0.3.4

package/build/src/md/chip/ui-chip-set.js

@@ -0,0 +1,27 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import Element from './internals/ChipSet.js';
+import styles from './internals/ChipSet.styles.js';
+let UiChipSetElement = (() => {
+    let _classDecorators = [customElement('ui-chip-set')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = Element;
+    var UiChipSetElement = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            UiChipSetElement = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static styles = [styles];
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return UiChipSetElement = _classThis;
+})();
+export { UiChipSetElement };
+//# sourceMappingURL=ui-chip-set.js.map

package/build/src/md/chip/ui-chip-set.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-chip-set.js","sourceRoot":"","sources":["../../../../src/md/chip/ui-chip-set.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,OAAO,MAAM,wBAAwB,CAAA;AAC5C,OAAO,MAAM,MAAM,+BAA+B,CAAA;IAGrC,gBAAgB;4BAD5B,aAAa,CAAC,aAAa,CAAC;;;;sBACS,OAAO;gCAAf,SAAQ,WAAO;;;;YAA7C,6KAEC;;;;QADC,MAAM,CAAU,MAAM,GAAwB,CAAC,MAAM,CAAC,CAAA;;YAD3C,uDAAgB;;;;;SAAhB,gBAAgB","sourcesContent":["import type { CSSResultOrNative } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport Element from './internals/ChipSet.js'\nimport styles from './internals/ChipSet.styles.js'\n\n@customElement('ui-chip-set')\nexport class UiChipSetElement extends Element {\n  static override styles: CSSResultOrNative[] = [styles]\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui-chip-set': UiChipSetElement\n  }\n}\n"]}

package/build/src/md/motion/animation.d.ts

@@ -8,9 +8,11 @@
  */
 export declare enum Easing {
     STANDARD = "cubic-bezier(0.2, 0, 0, 1)",
-    ACCELERATION = "cubic-bezier(0.4, 0, 1, 1)",
-    DECELERATION = "cubic-bezier(0, 0, 0.2, 1)",
-    SHARP = "cubic-bezier(0.4, 0, 0.6, 1)"
+    ACCELERATION = "cubic-bezier(0.3, 0, 1, 1)",
+    DECELERATION = "cubic-bezier(0, 0, 0, 1)",
+    SHARP = "cubic-bezier(0.4, 0, 0.6, 1)",
+    EMPHASIZED_ACCELERATE = "cubic-bezier(0.3, 0, 0.8, 0.15)",
+    EMPHASIZED_DECELERATE = "cubic-bezier(0.05, 0.7, 0.1, 1)"
 }
 /**
  * A signal that is used for abortable tasks.

package/build/src/md/motion/animation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"animation.d.ts","sourceRoot":"","sources":["../../../../src/md/motion/animation.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;GAEG;AACH,oBAAY,MAAM;IAChB,QAAQ,+BAA+B;IACvC,YAAY,+BAA+B;IAC3C,YAAY,+BAA+B;IAC3C,KAAK,iCAAiC;CACvC;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B;;;;;OAKG;IACH,KAAK,IAAI,WAAW,CAAA;IACpB;;OAEG;IACH,MAAM,IAAI,IAAI,CAAA;CACf;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,wBAAgB,qBAAqB,IAAI,eAAe,CAkBvD"}
+{"version":3,"file":"animation.d.ts","sourceRoot":"","sources":["../../../../src/md/motion/animation.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;GAEG;AACH,oBAAY,MAAM;IAChB,QAAQ,+BAA+B;IACvC,YAAY,+BAA+B;IAC3C,YAAY,6BAA6B;IACzC,KAAK,iCAAiC;IACtC,qBAAqB,oCAAoC;IACzD,qBAAqB,oCAAoC;CAC1D;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B;;;;;OAKG;IACH,KAAK,IAAI,WAAW,CAAA;IACpB;;OAEG;IACH,MAAM,IAAI,IAAI,CAAA;CACf;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,wBAAgB,qBAAqB,IAAI,eAAe,CAkBvD"}

package/build/src/md/motion/animation.js

@@ -9,9 +9,11 @@
 export var Easing;
 (function (Easing) {
     Easing["STANDARD"] = "cubic-bezier(0.2, 0, 0, 1)";
-    Easing["ACCELERATION"] = "cubic-bezier(0.4, 0, 1, 1)";
-    Easing["DECELERATION"] = "cubic-bezier(0, 0, 0.2, 1)";
+    Easing["ACCELERATION"] = "cubic-bezier(0.3, 0, 1, 1)";
+    Easing["DECELERATION"] = "cubic-bezier(0, 0, 0, 1)";
     Easing["SHARP"] = "cubic-bezier(0.4, 0, 0.6, 1)";
+    Easing["EMPHASIZED_ACCELERATE"] = "cubic-bezier(0.3, 0, 0.8, 0.15)";
+    Easing["EMPHASIZED_DECELERATE"] = "cubic-bezier(0.05, 0.7, 0.1, 1)";
 })(Easing || (Easing = {}));
 /**
  * Creates an `AnimationSignal` that can be used to cancel a previous task.

package/build/src/md/motion/animation.js.map

@@ -1 +1 @@
-{"version":3,"file":"animation.js","sourceRoot":"","sources":["../../../../src/md/motion/animation.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;GAEG;AACH,MAAM,CAAN,IAAY,MAKX;AALD,WAAY,MAAM;IAChB,iDAAuC,CAAA;IACvC,qDAA2C,CAAA;IAC3C,qDAA2C,CAAA;IAC3C,gDAAsC,CAAA;AACxC,CAAC,EALW,MAAM,KAAN,MAAM,QAKjB;AAmBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,MAAM,UAAU,qBAAqB;IACnC,0CAA0C;IAC1C,IAAI,wBAAwB,GAA2B,IAAI,CAAA;IAE3D,OAAO;QACL,KAAK;YACH,yCAAyC;YACzC,wBAAwB,EAAE,KAAK,EAAE,CAAA;YACjC,0DAA0D;YAC1D,wBAAwB,GAAG,IAAI,eAAe,EAAE,CAAA;YAChD,sEAAsE;YACtE,qBAAqB;YACrB,OAAO,wBAAwB,CAAC,MAAM,CAAA;QACxC,CAAC;QACD,MAAM;YACJ,wBAAwB,GAAG,IAAI,CAAA;QACjC,CAAC;KACF,CAAA;AACH,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/**\n * Easing functions to use for web animations.\n */\nexport enum Easing {\n  STANDARD = 'cubic-bezier(0.2, 0, 0, 1)',\n  ACCELERATION = 'cubic-bezier(0.4, 0, 1, 1)',\n  DECELERATION = 'cubic-bezier(0, 0, 0.2, 1)',\n  SHARP = 'cubic-bezier(0.4, 0, 0.6, 1)',\n}\n\n/**\n * A signal that is used for abortable tasks.\n */\nexport interface AnimationSignal {\n  /**\n   * Starts the abortable task. Any previous tasks started with this instance\n   * will be aborted.\n   *\n   * @return An `AbortSignal` for the current task.\n   */\n  start(): AbortSignal\n  /**\n   * Complete the current task.\n   */\n  finish(): void\n}\n\n/**\n * Creates an `AnimationSignal` that can be used to cancel a previous task.\n *\n * @example\n * class MyClass {\n *   private labelAnimationSignal = createAnimationSignal();\n *\n *   private async animateLabel() {\n *     // Start of the task. Previous tasks will be canceled.\n *     const signal = this.labelAnimationSignal.start();\n *\n *     // Do async work...\n *     if (signal.aborted) {\n *       // Use AbortSignal to check if a request was made to abort after some\n *       // asynchronous work.\n *       return;\n *     }\n *\n *     const animation = this.animate(...);\n *     // Add event listeners to be notified when the task should be canceled.\n *     signal.addEventListener('abort', () => {\n *       animation.cancel();\n *     });\n *\n *     animation.addEventListener('finish', () => {\n *       // Tell the signal that the current task is finished.\n *       this.labelAnimationSignal.finish();\n *     });\n *   }\n * }\n *\n * @return An `AnimationSignal`.\n */\nexport function createAnimationSignal(): AnimationSignal {\n  // The current animation's AbortController\n  let animationAbortController: AbortController | null = null\n\n  return {\n    start(): AbortSignal {\n      // Tell the previous animation to cancel.\n      animationAbortController?.abort()\n      // Set up a new AbortController for the current animation.\n      animationAbortController = new AbortController()\n      // Provide the AbortSignal so that the caller can check aborted status\n      // and add listeners.\n      return animationAbortController.signal\n    },\n    finish(): void {\n      animationAbortController = null\n    },\n  }\n}\n"]}
+{"version":3,"file":"animation.js","sourceRoot":"","sources":["../../../../src/md/motion/animation.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;GAEG;AACH,MAAM,CAAN,IAAY,MAOX;AAPD,WAAY,MAAM;IAChB,iDAAuC,CAAA;IACvC,qDAA2C,CAAA;IAC3C,mDAAyC,CAAA;IACzC,gDAAsC,CAAA;IACtC,mEAAyD,CAAA;IACzD,mEAAyD,CAAA;AAC3D,CAAC,EAPW,MAAM,KAAN,MAAM,QAOjB;AAmBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,MAAM,UAAU,qBAAqB;IACnC,0CAA0C;IAC1C,IAAI,wBAAwB,GAA2B,IAAI,CAAA;IAE3D,OAAO;QACL,KAAK;YACH,yCAAyC;YACzC,wBAAwB,EAAE,KAAK,EAAE,CAAA;YACjC,0DAA0D;YAC1D,wBAAwB,GAAG,IAAI,eAAe,EAAE,CAAA;YAChD,sEAAsE;YACtE,qBAAqB;YACrB,OAAO,wBAAwB,CAAC,MAAM,CAAA;QACxC,CAAC;QACD,MAAM;YACJ,wBAAwB,GAAG,IAAI,CAAA;QACjC,CAAC;KACF,CAAA;AACH,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/**\n * Easing functions to use for web animations.\n */\nexport enum Easing {\n  STANDARD = 'cubic-bezier(0.2, 0, 0, 1)',\n  ACCELERATION = 'cubic-bezier(0.3, 0, 1, 1)',\n  DECELERATION = 'cubic-bezier(0, 0, 0, 1)',\n  SHARP = 'cubic-bezier(0.4, 0, 0.6, 1)',\n  EMPHASIZED_ACCELERATE = 'cubic-bezier(0.3, 0, 0.8, 0.15)',\n  EMPHASIZED_DECELERATE = 'cubic-bezier(0.05, 0.7, 0.1, 1)',\n}\n\n/**\n * A signal that is used for abortable tasks.\n */\nexport interface AnimationSignal {\n  /**\n   * Starts the abortable task. Any previous tasks started with this instance\n   * will be aborted.\n   *\n   * @return An `AbortSignal` for the current task.\n   */\n  start(): AbortSignal\n  /**\n   * Complete the current task.\n   */\n  finish(): void\n}\n\n/**\n * Creates an `AnimationSignal` that can be used to cancel a previous task.\n *\n * @example\n * class MyClass {\n *   private labelAnimationSignal = createAnimationSignal();\n *\n *   private async animateLabel() {\n *     // Start of the task. Previous tasks will be canceled.\n *     const signal = this.labelAnimationSignal.start();\n *\n *     // Do async work...\n *     if (signal.aborted) {\n *       // Use AbortSignal to check if a request was made to abort after some\n *       // asynchronous work.\n *       return;\n *     }\n *\n *     const animation = this.animate(...);\n *     // Add event listeners to be notified when the task should be canceled.\n *     signal.addEventListener('abort', () => {\n *       animation.cancel();\n *     });\n *\n *     animation.addEventListener('finish', () => {\n *       // Tell the signal that the current task is finished.\n *       this.labelAnimationSignal.finish();\n *     });\n *   }\n * }\n *\n * @return An `AnimationSignal`.\n */\nexport function createAnimationSignal(): AnimationSignal {\n  // The current animation's AbortController\n  let animationAbortController: AbortController | null = null\n\n  return {\n    start(): AbortSignal {\n      // Tell the previous animation to cancel.\n      animationAbortController?.abort()\n      // Set up a new AbortController for the current animation.\n      animationAbortController = new AbortController()\n      // Provide the AbortSignal so that the caller can check aborted status\n      // and add listeners.\n      return animationAbortController.signal\n    },\n    finish(): void {\n      animationAbortController = null\n    },\n  }\n}\n"]}

package/build/src/md/ripple/internals/ripple.styles.d.ts.map

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

package/build/src/md/ripple/internals/ripple.styles.js

@@ -21,7 +21,8 @@ export default css `
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   }
 
-  .surface::before {
+  .surface::before,
+  .surface::after {
     position: absolute;
     opacity: 0;
     pointer-events: none;
@@ -36,10 +37,19 @@ export default css `
     inset: 0;
   }
 
+  .surface::after {
+    transition: opacity 375ms linear;
+    transform-origin: center center;
+  }
+
   .focused::before {
     transition-duration: 75ms;
   }
 
+  .pressed::after {
+    transition-duration: 105ms;
+  }
+
   .surface {
     border-radius: var(--md-ripple-state-layer-shape, 0);
   }
@@ -48,6 +58,14 @@ export default css `
     background-color: var(--md-ripple-hover-state-layer-color, var(--md-sys-color-primary));
   }
 
+  .surface::after {
+    background: radial-gradient(
+      closest-side,
+      var(--md-ripple-pressed-state-layer-color, var(--md-sys-color-primary)) max(100% - 70px, 65%),
+      transparent 100%
+    );
+  }
+
   .surface.hovered::before {
     opacity: var(--md-ripple-hover-state-layer-opacity, var(--md-sys-state-hover-state-layer-opacity));
     background-color: var(--md-ripple-hover-state-layer-color, var(--md-sys-color-primary));
@@ -58,14 +76,8 @@ export default css `
     background-color: var(--md-ripple-focus-state-layer-color, var(--md-sys-color-primary));
   }
 
-  .surface.pressed::before {
+  .surface.pressed::after {
     opacity: var(--md-ripple-pressed-state-layer-opacity, var(--md-sys-state-pressed-state-layer-opacity));
-    /* background-color: var(--md-ripple-pressed-state-layer-color, var(--md-sys-color-primary)); */
-    background: radial-gradient(
-      closest-side,
-      var(--md-ripple-pressed-state-layer-color, var(--md-sys-color-primary)) max(100% - 70px, 65%),
-      transparent 100%
-    );
   }
 
   .surface.unbounded {

package/build/src/md/ripple/internals/ripple.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ripple.styles.js","sourceRoot":"","sources":["../../../../../src/md/ripple/internals/ripple.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwEjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  :host {\n    position: absolute;\n    inset: 0;\n    pointer-events: none;\n    overflow: hidden;\n    display: flex;\n  }\n\n  :host([disabled]) {\n    opacity: 0;\n  }\n\n  .surface {\n    position: absolute;\n    inset: 0;\n    pointer-events: none;\n    overflow: hidden;\n    outline: none;\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n  }\n\n  .surface::before {\n    position: absolute;\n    opacity: 0;\n    pointer-events: none;\n    z-index: -1;\n    content: '';\n  }\n\n  .surface::before {\n    transition:\n      opacity 15ms linear,\n      background-color 15ms linear;\n    inset: 0;\n  }\n\n  .focused::before {\n    transition-duration: 75ms;\n  }\n\n  .surface {\n    border-radius: var(--md-ripple-state-layer-shape, 0);\n  }\n\n  .surface::before {\n    background-color: var(--md-ripple-hover-state-layer-color, var(--md-sys-color-primary));\n  }\n\n  .surface.hovered::before {\n    opacity: var(--md-ripple-hover-state-layer-opacity, var(--md-sys-state-hover-state-layer-opacity));\n    background-color: var(--md-ripple-hover-state-layer-color, var(--md-sys-color-primary));\n  }\n\n  .surface.focused::before {\n    opacity: var(--md-ripple-focus-state-layer-opacity, var(--md-sys-state-focus-state-layer-opacity));\n    background-color: var(--md-ripple-focus-state-layer-color, var(--md-sys-color-primary));\n  }\n\n  .surface.pressed::before {\n    opacity: var(--md-ripple-pressed-state-layer-opacity, var(--md-sys-state-pressed-state-layer-opacity));\n    /* background-color: var(--md-ripple-pressed-state-layer-color, var(--md-sys-color-primary)); */\n    background: radial-gradient(\n      closest-side,\n      var(--md-ripple-pressed-state-layer-color, var(--md-sys-color-primary)) max(100% - 70px, 65%),\n      transparent 100%\n    );\n  }\n\n  .surface.unbounded {\n    border-radius: var(--md-ripple-state-layer-shape, 9999px);\n  }\n`\n"]}
+{"version":3,"file":"ripple.styles.js","sourceRoot":"","sources":["../../../../../src/md/ripple/internals/ripple.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoFjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  :host {\n    position: absolute;\n    inset: 0;\n    pointer-events: none;\n    overflow: hidden;\n    display: flex;\n  }\n\n  :host([disabled]) {\n    opacity: 0;\n  }\n\n  .surface {\n    position: absolute;\n    inset: 0;\n    pointer-events: none;\n    overflow: hidden;\n    outline: none;\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n  }\n\n  .surface::before,\n  .surface::after {\n    position: absolute;\n    opacity: 0;\n    pointer-events: none;\n    z-index: -1;\n    content: '';\n  }\n\n  .surface::before {\n    transition:\n      opacity 15ms linear,\n      background-color 15ms linear;\n    inset: 0;\n  }\n\n  .surface::after {\n    transition: opacity 375ms linear;\n    transform-origin: center center;\n  }\n\n  .focused::before {\n    transition-duration: 75ms;\n  }\n\n  .pressed::after {\n    transition-duration: 105ms;\n  }\n\n  .surface {\n    border-radius: var(--md-ripple-state-layer-shape, 0);\n  }\n\n  .surface::before {\n    background-color: var(--md-ripple-hover-state-layer-color, var(--md-sys-color-primary));\n  }\n\n  .surface::after {\n    background: radial-gradient(\n      closest-side,\n      var(--md-ripple-pressed-state-layer-color, var(--md-sys-color-primary)) max(100% - 70px, 65%),\n      transparent 100%\n    );\n  }\n\n  .surface.hovered::before {\n    opacity: var(--md-ripple-hover-state-layer-opacity, var(--md-sys-state-hover-state-layer-opacity));\n    background-color: var(--md-ripple-hover-state-layer-color, var(--md-sys-color-primary));\n  }\n\n  .surface.focused::before {\n    opacity: var(--md-ripple-focus-state-layer-opacity, var(--md-sys-state-focus-state-layer-opacity));\n    background-color: var(--md-ripple-focus-state-layer-color, var(--md-sys-color-primary));\n  }\n\n  .surface.pressed::after {\n    opacity: var(--md-ripple-pressed-state-layer-opacity, var(--md-sys-state-pressed-state-layer-opacity));\n  }\n\n  .surface.unbounded {\n    border-radius: var(--md-ripple-state-layer-shape, 9999px);\n  }\n`\n"]}

package/build/src/md/switch/internals/Switch.styles.js

@@ -34,7 +34,7 @@ export default css `
 
     border: 2px var(--md-sys-color-outline) solid;
     border-radius: var(--md-sys-shape-corner-extra-large);
-    background-color: var(--md-sys-color-surface-variant);
+    background-color: var(--md-sys-color-surface-container-highest);
 
     transition:
       opacity 90ms cubic-bezier(0.4, 0, 0.2, 1),

package/build/src/md/switch/internals/Switch.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.styles.js","sourceRoot":"","sources":["../../../../../src/md/switch/internals/Switch.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmRjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  :host {\n    display: inline-block;\n    vertical-align: middle;\n    outline: none;\n    width: 52px;\n    height: 40px;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n  }\n\n  .surface {\n    position: relative;\n    width: inherit;\n    height: inherit;\n\n    display: flex;\n    align-items: center;\n  }\n\n  /* Track */\n  .track {\n    position: absolute;\n    inset: 4px 0 0;\n    z-index: 1;\n\n    width: inherit;\n    height: 32px;\n    box-sizing: border-box;\n\n    border: 2px var(--md-sys-color-outline) solid;\n    border-radius: var(--md-sys-shape-corner-extra-large);\n    background-color: var(--md-sys-color-surface-variant);\n\n    transition:\n      opacity 90ms cubic-bezier(0.4, 0, 0.2, 1),\n      background-color 90ms cubic-bezier(0.4, 0, 0.2, 1),\n      border-color 90ms cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  .track.tracking,\n  .thumb.tracking {\n    transition: none;\n  }\n\n  .thumb {\n    height: 20px;\n    width: 20px;\n    border-radius: var(--md-sys-shape-corner-full);\n    background-color: var(--md-sys-color-outline);\n    transform: translateX(6px) scale(0.8);\n    transform-origin: center center;\n    transition: transform 75ms cubic-bezier(0.4, 0, 0.2, 1) 0s;\n    cursor: pointer;\n  }\n\n  :host([checked]) .thumb {\n    background-color: var(--md-sys-color-on-primary);\n  }\n\n  .withIcon .thumb {\n    transform: translateX(6px) scale(1.2);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  :host(:active) .thumb,\n  .pressed .thumb {\n    transform: translateX(6px) scale(1.4);\n  }\n\n  :host([checked]) .thumb,\n  :host([checked]) .withIcon .thumb {\n    transform: translateX(26px) scale(1.2);\n  }\n\n  :host([checked]:active) .thumb,\n  :host([checked]) .pressed .thumb {\n    transform: translateX(26px) scale(1.4);\n  }\n\n  .state {\n    position: absolute;\n    inset: 0;\n    z-index: 2;\n    width: 40px;\n    height: 40px;\n    border-radius: var(--md-sys-shape-corner-full);\n    transform: translateX(-5px);\n    transition: transform 90ms cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  :host([checked]) .state {\n    transform: translateX(18px);\n    cursor: pointer;\n  }\n\n  .content {\n    z-index: 3;\n    position: relative;\n  }\n\n  .icon {\n    fill: var(--md-sys-color-surface-variant);\n    width: 16px;\n    height: 16px;\n  }\n\n  :host([checked]) .icon {\n    fill: var(--md-sys-color-on-primary-container);\n  }\n\n  :host([checked]) .track {\n    background-color: var(--md-sys-color-primary);\n    border-width: 0;\n  }\n\n  /* Hover state */\n\n  :host(:hover) .track {\n    background-color: var(--md-sys-color-surface-variant);\n    border-color: var(--md-sys-color-outline);\n  }\n\n  :host(:hover) .state {\n    background-color: var(--md-sys-color-on-surface);\n    opacity: var(--md-sys-state-hover-state-layer-opacity);\n  }\n\n  :host([checked]:hover) .track {\n    background-color: var(--md-sys-color-primary);\n    border-width: 0;\n  }\n\n  :host([checked]:hover) .state {\n    background-color: var(--md-sys-color-primary);\n    opacity: var(--md-sys-state-hover-state-layer-opacity);\n  }\n\n  :host(:hover) .thumb {\n    background-color: var(--md-sys-color-on-surface-variant);\n  }\n\n  :host([checked]:hover) .thumb {\n    background-color: var(--md-sys-color-primary-container);\n  }\n\n  :host(:hover) .icon {\n    fill: var(--md-sys-color-surface-variant);\n  }\n\n  :host([checked]:hover) .icon {\n    fill: var(--md-sys-color-on-primary-container);\n  }\n\n  /* Focus state */\n\n  :host(:focus) .track {\n    background-color: var(--md-sys-color-surface-variant);\n    border-color: var(--md-sys-color-outline);\n  }\n\n  :host([checked]:focus) .track {\n    background-color: var(--md-sys-color-primary);\n    border-width: 0;\n  }\n\n  :host(:focus) .state {\n    background-color: var(--md-sys-color-on-surface);\n    opacity: var(--md-sys-state-focus-state-layer-opacity);\n  }\n\n  :host([checked]:focus) .state {\n    background-color: var(--md-sys-color-primary);\n    opacity: var(--md-sys-state-focus-state-layer-opacity);\n  }\n\n  :host(:focus) .thumb {\n    background-color: var(--md-sys-color-on-surface-variant);\n  }\n\n  :host([checked]:focus) .thumb {\n    background-color: var(--md-sys-color-primary-container);\n  }\n\n  :host(:focus) .icon {\n    fill: var(--md-sys-color-surface-variant);\n  }\n\n  :host([checked]:focus) .icon {\n    fill: var(--md-sys-color-on-primary-container);\n  }\n\n  /* Pressed state */\n\n  :host(:active) .track,\n  .pressed .track {\n    background-color: var(--md-sys-color-surface-variant);\n    border-color: var(--md-sys-color-outline);\n  }\n\n  :host([checked]:active) .track,\n  :host([checked]) .pressed .track {\n    background-color: var(--md-sys-color-primary);\n    border-width: 0;\n  }\n\n  :host(:active) .state,\n  .pressed .state {\n    background-color: var(--md-sys-color-on-surface);\n    opacity: var(--md-sys-state-pressed-state-layer-opacity);\n  }\n\n  :host([checked]:active) .state,\n  :host([checked]) .pressed .state {\n    background-color: var(--md-sys-color-primary);\n    opacity: var(--md-sys-state-pressed-state-layer-opacity);\n  }\n\n  :host(:active) .thumb,\n  .pressed .thumb {\n    background-color: var(--md-sys-color-on-surface-variant);\n  }\n\n  :host([checked]:active) .thumb,\n  :host([checked]) .pressed .thumb {\n    background-color: var(--md-sys-color-primary-container);\n  }\n\n  :host(:active) .icon,\n  .pressed .icon {\n    fill: var(--md-sys-color-surface-variant);\n  }\n\n  :host([checked]:active) .icon,\n  :host([checked]) .pressed .icon {\n    fill: var(--md-sys-color-on-primary-container);\n  }\n\n  /* Disabled state */\n\n  :host([disabled]) .track {\n    background-color: var(--md-sys-color-surface-variant);\n    border-color: var(--md-sys-color-on-surface);\n    opacity: 0.12;\n  }\n\n  :host([disabled][checked]) .track {\n    background-color: var(--md-sys-color-on-surface);\n    border-width: 0;\n  }\n\n  :host([disabled]) .thumb {\n    background-color: var(--md-sys-color-on-surface);\n    opacity: 0.38;\n  }\n\n  :host([disabled][checked]) .thumb {\n    background-color: var(--md-sys-color-surface);\n    opacity: 1;\n  }\n\n  :host([disabled]) .icon {\n    fill: var(--md-sys-color-surface-variant);\n    opacity: 0.38;\n  }\n\n  :host([disabled][checked]) .icon {\n    fill: var(--md-sys-color-on-surface);\n    opacity: 0.38;\n  }\n`\n"]}
+{"version":3,"file":"Switch.styles.js","sourceRoot":"","sources":["../../../../../src/md/switch/internals/Switch.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmRjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  :host {\n    display: inline-block;\n    vertical-align: middle;\n    outline: none;\n    width: 52px;\n    height: 40px;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  :host([disabled]) {\n    pointer-events: none;\n  }\n\n  .surface {\n    position: relative;\n    width: inherit;\n    height: inherit;\n\n    display: flex;\n    align-items: center;\n  }\n\n  /* Track */\n  .track {\n    position: absolute;\n    inset: 4px 0 0;\n    z-index: 1;\n\n    width: inherit;\n    height: 32px;\n    box-sizing: border-box;\n\n    border: 2px var(--md-sys-color-outline) solid;\n    border-radius: var(--md-sys-shape-corner-extra-large);\n    background-color: var(--md-sys-color-surface-container-highest);\n\n    transition:\n      opacity 90ms cubic-bezier(0.4, 0, 0.2, 1),\n      background-color 90ms cubic-bezier(0.4, 0, 0.2, 1),\n      border-color 90ms cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  .track.tracking,\n  .thumb.tracking {\n    transition: none;\n  }\n\n  .thumb {\n    height: 20px;\n    width: 20px;\n    border-radius: var(--md-sys-shape-corner-full);\n    background-color: var(--md-sys-color-outline);\n    transform: translateX(6px) scale(0.8);\n    transform-origin: center center;\n    transition: transform 75ms cubic-bezier(0.4, 0, 0.2, 1) 0s;\n    cursor: pointer;\n  }\n\n  :host([checked]) .thumb {\n    background-color: var(--md-sys-color-on-primary);\n  }\n\n  .withIcon .thumb {\n    transform: translateX(6px) scale(1.2);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  :host(:active) .thumb,\n  .pressed .thumb {\n    transform: translateX(6px) scale(1.4);\n  }\n\n  :host([checked]) .thumb,\n  :host([checked]) .withIcon .thumb {\n    transform: translateX(26px) scale(1.2);\n  }\n\n  :host([checked]:active) .thumb,\n  :host([checked]) .pressed .thumb {\n    transform: translateX(26px) scale(1.4);\n  }\n\n  .state {\n    position: absolute;\n    inset: 0;\n    z-index: 2;\n    width: 40px;\n    height: 40px;\n    border-radius: var(--md-sys-shape-corner-full);\n    transform: translateX(-5px);\n    transition: transform 90ms cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  :host([checked]) .state {\n    transform: translateX(18px);\n    cursor: pointer;\n  }\n\n  .content {\n    z-index: 3;\n    position: relative;\n  }\n\n  .icon {\n    fill: var(--md-sys-color-surface-variant);\n    width: 16px;\n    height: 16px;\n  }\n\n  :host([checked]) .icon {\n    fill: var(--md-sys-color-on-primary-container);\n  }\n\n  :host([checked]) .track {\n    background-color: var(--md-sys-color-primary);\n    border-width: 0;\n  }\n\n  /* Hover state */\n\n  :host(:hover) .track {\n    background-color: var(--md-sys-color-surface-variant);\n    border-color: var(--md-sys-color-outline);\n  }\n\n  :host(:hover) .state {\n    background-color: var(--md-sys-color-on-surface);\n    opacity: var(--md-sys-state-hover-state-layer-opacity);\n  }\n\n  :host([checked]:hover) .track {\n    background-color: var(--md-sys-color-primary);\n    border-width: 0;\n  }\n\n  :host([checked]:hover) .state {\n    background-color: var(--md-sys-color-primary);\n    opacity: var(--md-sys-state-hover-state-layer-opacity);\n  }\n\n  :host(:hover) .thumb {\n    background-color: var(--md-sys-color-on-surface-variant);\n  }\n\n  :host([checked]:hover) .thumb {\n    background-color: var(--md-sys-color-primary-container);\n  }\n\n  :host(:hover) .icon {\n    fill: var(--md-sys-color-surface-variant);\n  }\n\n  :host([checked]:hover) .icon {\n    fill: var(--md-sys-color-on-primary-container);\n  }\n\n  /* Focus state */\n\n  :host(:focus) .track {\n    background-color: var(--md-sys-color-surface-variant);\n    border-color: var(--md-sys-color-outline);\n  }\n\n  :host([checked]:focus) .track {\n    background-color: var(--md-sys-color-primary);\n    border-width: 0;\n  }\n\n  :host(:focus) .state {\n    background-color: var(--md-sys-color-on-surface);\n    opacity: var(--md-sys-state-focus-state-layer-opacity);\n  }\n\n  :host([checked]:focus) .state {\n    background-color: var(--md-sys-color-primary);\n    opacity: var(--md-sys-state-focus-state-layer-opacity);\n  }\n\n  :host(:focus) .thumb {\n    background-color: var(--md-sys-color-on-surface-variant);\n  }\n\n  :host([checked]:focus) .thumb {\n    background-color: var(--md-sys-color-primary-container);\n  }\n\n  :host(:focus) .icon {\n    fill: var(--md-sys-color-surface-variant);\n  }\n\n  :host([checked]:focus) .icon {\n    fill: var(--md-sys-color-on-primary-container);\n  }\n\n  /* Pressed state */\n\n  :host(:active) .track,\n  .pressed .track {\n    background-color: var(--md-sys-color-surface-variant);\n    border-color: var(--md-sys-color-outline);\n  }\n\n  :host([checked]:active) .track,\n  :host([checked]) .pressed .track {\n    background-color: var(--md-sys-color-primary);\n    border-width: 0;\n  }\n\n  :host(:active) .state,\n  .pressed .state {\n    background-color: var(--md-sys-color-on-surface);\n    opacity: var(--md-sys-state-pressed-state-layer-opacity);\n  }\n\n  :host([checked]:active) .state,\n  :host([checked]) .pressed .state {\n    background-color: var(--md-sys-color-primary);\n    opacity: var(--md-sys-state-pressed-state-layer-opacity);\n  }\n\n  :host(:active) .thumb,\n  .pressed .thumb {\n    background-color: var(--md-sys-color-on-surface-variant);\n  }\n\n  :host([checked]:active) .thumb,\n  :host([checked]) .pressed .thumb {\n    background-color: var(--md-sys-color-primary-container);\n  }\n\n  :host(:active) .icon,\n  .pressed .icon {\n    fill: var(--md-sys-color-surface-variant);\n  }\n\n  :host([checked]:active) .icon,\n  :host([checked]) .pressed .icon {\n    fill: var(--md-sys-color-on-primary-container);\n  }\n\n  /* Disabled state */\n\n  :host([disabled]) .track {\n    background-color: var(--md-sys-color-surface-variant);\n    border-color: var(--md-sys-color-on-surface);\n    opacity: 0.12;\n  }\n\n  :host([disabled][checked]) .track {\n    background-color: var(--md-sys-color-on-surface);\n    border-width: 0;\n  }\n\n  :host([disabled]) .thumb {\n    background-color: var(--md-sys-color-on-surface);\n    opacity: 0.38;\n  }\n\n  :host([disabled][checked]) .thumb {\n    background-color: var(--md-sys-color-surface);\n    opacity: 1;\n  }\n\n  :host([disabled]) .icon {\n    fill: var(--md-sys-color-surface-variant);\n    opacity: 0.38;\n  }\n\n  :host([disabled][checked]) .icon {\n    fill: var(--md-sys-color-on-surface);\n    opacity: 0.38;\n  }\n`\n"]}

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

@@ -1,8 +1,8 @@
-import { nothing, TemplateResult } from 'lit';
-import { EndPressConfig } from '../../../controllers/ActionController.js';
-import UiRipple from '../../ripple/internals/ripple.js';
+import { nothing, PropertyValues, TemplateResult } from 'lit';
+import type { BeginPressConfig, EndPressConfig } from '../../../controllers/ActionController.js';
+import type UiRipple from '../../ripple/internals/ripple.js';
 import { UiElement } from '../../UiElement.js';
-import type { TabsPriority } from './Tabs.js';
+import type { SizingInfo, TabsPriority } from './Tabs.js';
 import '../../ripple/ui-ripple.js';
 export default class UiTab extends UiElement {
     get disabled(): boolean;
@@ -25,24 +25,40 @@ export default class UiTab extends UiElement {
      * @attribute
      */
     accessor indicated: boolean;
+    /**
+     * Indicates whether the tab has an icon.
+     * This is set automatically when the "icon" slot is populated.
+     */
     protected accessor hasIcon: boolean;
-    protected accessor showRipple: boolean;
-    protected accessor ripple: Promise<UiRipple | null>;
-    protected readonly getRipple: () => Promise<UiRipple | null>;
+    /**
+     * Indicates whether the tab only has an icon and no text.
+     * This is set automatically when the default slot is populated with only an icon.
+     */
+    protected accessor iconOnly: boolean;
+    protected accessor ripple: UiRipple | null;
     constructor();
     connectedCallback(): void;
+    protected willUpdate(cp: PropertyValues<this>): void;
+    beginPress(options: BeginPressConfig): void;
     endPress(config: EndPressConfig): void;
+    handleClick(e: MouseEvent): void;
+    handlePointerEnter(e: PointerEvent): void;
+    handlePointerLeave(e: PointerEvent): void;
+    handleKeyUp(e: KeyboardEvent): void;
     /**
      * Sets the `_hasIcon` state property when the "icon" slot change event is dispatched.
      */
-    protected handleIconChange(e: Event): void;
+    protected handleIconSlotChange(e: Event): void;
+    protected handleSlotChange(e: Event): void;
+    getIndicatorSizing(): SizingInfo;
     /**
      * When `indicated` is `true` it animates the indicator to highlight the position of the tab.
      */
     highlight(): void;
     protected render(): TemplateResult;
+    protected renderFocusRing(): TemplateResult;
+    protected renderRipple(): TemplateResult;
     protected renderIcon(): TemplateResult;
-    protected renderRipple: () => TemplateResult;
     protected renderIndicator(): TemplateResult | typeof nothing;
 }
 //# sourceMappingURL=Tab.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../../../src/md/tabs/internals/Tab.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,OAAO,EAAE,cAAc,EAAE,MAAM,KAAK,CAAA;AAInD,OAAO,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAA;AACzE,OAAO,QAAQ,MAAM,kCAAkC,CAAA;AAGvD,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAC9C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAE7C,OAAO,2BAA2B,CAAA;AAElC,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,SAAS;IAC1C,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED;;;OAGG;IACH,IACI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAI1B;IAED;;;;OAIG;IACyC,QAAQ,CAAC,QAAQ,UAAQ;IAErE;;OAEG;IACyC,QAAQ,CAAC,QAAQ,EAAE,YAAY,CAAY;IAEvF;;OAEG;IACyC,QAAQ,CAAC,SAAS,UAAQ;IAE7D,SAAS,CAAC,QAAQ,CAAC,OAAO,UAAQ;IAElC,SAAS,CAAC,QAAQ,CAAC,UAAU,UAAQ;IAErB,SAAS,CAAC,QAAQ,CAAC,MAAM,EAAG,OAAO,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAA;IAE7E,SAAS,CAAC,QAAQ,CAAC,SAAS,QAAO,OAAO,CAAC,QAAQ,GAAG,IAAI,CAAC,CAG1D;;IAeQ,iBAAiB,IAAI,IAAI;IAUzB,QAAQ,CAAC,MAAM,EAAE,cAAc,GAAG,IAAI;IAW/C;;OAEG;IACH,SAAS,CAAC,gBAAgB,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAK1C;;OAEG;IACH,SAAS,IAAI,IAAI;cA2BE,MAAM,IAAI,cAAc;IAoB3C,SAAS,CAAC,UAAU,IAAI,cAAc;IAQtC,SAAS,CAAC,YAAY,QAAO,cAAc,CAG1C;IAED,SAAS,CAAC,eAAe,IAAI,cAAc,GAAG,OAAO,OAAO;CAa7D"}
+{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../../../src/md/tabs/internals/Tab.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAA;AAGnE,OAAO,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAA;AAChG,OAAO,KAAK,QAAQ,MAAM,kCAAkC,CAAA;AAE5D,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAC9C,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAEzD,OAAO,2BAA2B,CAAA;AAElC,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,SAAS;IAC1C,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED;;;OAGG;IACH,IACI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAI1B;IAED;;;;OAIG;IACyC,QAAQ,CAAC,QAAQ,UAAA;IAE7D;;OAEG;IACwC,QAAQ,CAAC,QAAQ,EAAE,YAAY,CAAA;IAE1E;;OAEG;IACyC,QAAQ,CAAC,SAAS,UAAA;IAE9D;;;OAGG;IACM,SAAS,CAAC,QAAQ,CAAC,OAAO,UAAA;IACnC;;;OAGG;IACM,SAAS,CAAC,QAAQ,CAAC,QAAQ,UAAA;IAEhB,SAAS,CAAC,QAAQ,CAAC,MAAM,EAAG,QAAQ,GAAG,IAAI,CAAA;;IAqBtD,iBAAiB,IAAI,IAAI;cAUf,UAAU,CAAC,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAOpD,UAAU,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI;IAM3C,QAAQ,CAAC,MAAM,EAAE,cAAc,GAAG,IAAI;IAatC,WAAW,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IAUhC,kBAAkB,CAAC,CAAC,EAAE,YAAY,GAAG,IAAI;IAOzC,kBAAkB,CAAC,CAAC,EAAE,YAAY,GAAG,IAAI;IAOzC,WAAW,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;IAS5C;;OAEG;IACH,SAAS,CAAC,oBAAoB,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAK9C,SAAS,CAAC,gBAAgB,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAcnC,kBAAkB,IAAI,UAAU;IAYvC;;OAEG;IACI,SAAS,IAAI,IAAI;cA2BL,MAAM,IAAI,cAAc;IAqB3C,SAAS,CAAC,eAAe,IAAI,cAAc;IAS3C,SAAS,CAAC,YAAY,IAAI,cAAc;IAIxC,SAAS,CAAC,UAAU,IAAI,cAAc;IAItC,SAAS,CAAC,eAAe,IAAI,cAAc,GAAG,OAAO,OAAO;CAW7D"}

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

@@ -1,9 +1,7 @@
 import { __esDecorate, __runInitializers } from "tslib";
 import { html, nothing } from 'lit';
-import { property, queryAsync, state } from 'lit/decorators.js';
+import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { when } from 'lit/directives/when.js';
-import { ripple } from '../../effects/rippleDirective.js';
 import { isDisabled, setDisabled } from '../../../lib/disabled.js';
 import { UiElement } from '../../UiElement.js';
 import { Easing } from '../../motion/animation.js';
@@ -24,9 +22,9 @@ let UiTab = (() => {
     let _hasIcon_decorators;
     let _hasIcon_initializers = [];
     let _hasIcon_extraInitializers = [];
-    let _showRipple_decorators;
-    let _showRipple_initializers = [];
-    let _showRipple_extraInitializers = [];
+    let _iconOnly_decorators;
+    let _iconOnly_initializers = [];
+    let _iconOnly_extraInitializers = [];
     let _ripple_decorators;
     let _ripple_initializers = [];
     let _ripple_extraInitializers = [];
@@ -35,17 +33,17 @@ let UiTab = (() => {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
             _set_disabled_decorators = [property({ reflect: true, type: Boolean })];
             _selected_decorators = [property({ reflect: true, type: Boolean })];
-            _priority_decorators = [property({ reflect: true, type: Boolean })];
+            _priority_decorators = [property({ reflect: true, type: String })];
             _indicated_decorators = [property({ reflect: true, type: Boolean })];
             _hasIcon_decorators = [state()];
-            _showRipple_decorators = [state()];
-            _ripple_decorators = [queryAsync('ui-ripple')];
+            _iconOnly_decorators = [state()];
+            _ripple_decorators = [query('ui-ripple')];
             __esDecorate(this, null, _set_disabled_decorators, { kind: "setter", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, _selected_decorators, { kind: "accessor", name: "selected", static: false, private: false, access: { has: obj => "selected" in obj, get: obj => obj.selected, set: (obj, value) => { obj.selected = value; } }, metadata: _metadata }, _selected_initializers, _selected_extraInitializers);
             __esDecorate(this, null, _priority_decorators, { kind: "accessor", name: "priority", static: false, private: false, access: { has: obj => "priority" in obj, get: obj => obj.priority, set: (obj, value) => { obj.priority = value; } }, metadata: _metadata }, _priority_initializers, _priority_extraInitializers);
             __esDecorate(this, null, _indicated_decorators, { kind: "accessor", name: "indicated", static: false, private: false, access: { has: obj => "indicated" in obj, get: obj => obj.indicated, set: (obj, value) => { obj.indicated = value; } }, metadata: _metadata }, _indicated_initializers, _indicated_extraInitializers);
             __esDecorate(this, null, _hasIcon_decorators, { kind: "accessor", name: "hasIcon", static: false, private: false, access: { has: obj => "hasIcon" in obj, get: obj => obj.hasIcon, set: (obj, value) => { obj.hasIcon = value; } }, metadata: _metadata }, _hasIcon_initializers, _hasIcon_extraInitializers);
-            __esDecorate(this, null, _showRipple_decorators, { kind: "accessor", name: "showRipple", static: false, private: false, access: { has: obj => "showRipple" in obj, get: obj => obj.showRipple, set: (obj, value) => { obj.showRipple = value; } }, metadata: _metadata }, _showRipple_initializers, _showRipple_extraInitializers);
+            __esDecorate(this, null, _iconOnly_decorators, { kind: "accessor", name: "iconOnly", static: false, private: false, access: { has: obj => "iconOnly" in obj, get: obj => obj.iconOnly, set: (obj, value) => { obj.iconOnly = value; } }, metadata: _metadata }, _iconOnly_initializers, _iconOnly_extraInitializers);
             __esDecorate(this, null, _ripple_decorators, { kind: "accessor", name: "ripple", static: false, private: false, access: { has: obj => "ripple" in obj, get: obj => obj.ripple, set: (obj, value) => { obj.ripple = value; } }, metadata: _metadata }, _ripple_initializers, _ripple_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
@@ -61,11 +59,7 @@ let UiTab = (() => {
             setDisabled(this, value);
             this.requestUpdate('disabled', old);
         }
-        #selected_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _selected_initializers, false
-        /**
-         * @attribute
-         */
-        ));
+        #selected_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _selected_initializers, void 0));
         /**
          * Whether the tab is selected. Note, this does not correspond to the `selected` state
          * in the `ui-tabs`. This is only to render the tab in the selected state.
@@ -73,37 +67,43 @@ let UiTab = (() => {
          */
         get selected() { return this.#selected_accessor_storage; }
         set selected(value) { this.#selected_accessor_storage = value; }
-        #priority_accessor_storage = (__runInitializers(this, _selected_extraInitializers), __runInitializers(this, _priority_initializers, 'primary'
-        /**
-         * @attribute
-         */
-        ));
+        #priority_accessor_storage = (__runInitializers(this, _selected_extraInitializers), __runInitializers(this, _priority_initializers, void 0));
         /**
          * @attribute
          */
         get priority() { return this.#priority_accessor_storage; }
         set priority(value) { this.#priority_accessor_storage = value; }
-        #indicated_accessor_storage = (__runInitializers(this, _priority_extraInitializers), __runInitializers(this, _indicated_initializers, false));
+        #indicated_accessor_storage = (__runInitializers(this, _priority_extraInitializers), __runInitializers(this, _indicated_initializers, void 0));
         /**
          * @attribute
          */
         get indicated() { return this.#indicated_accessor_storage; }
         set indicated(value) { this.#indicated_accessor_storage = value; }
-        #hasIcon_accessor_storage = (__runInitializers(this, _indicated_extraInitializers), __runInitializers(this, _hasIcon_initializers, false));
+        #hasIcon_accessor_storage = (__runInitializers(this, _indicated_extraInitializers), __runInitializers(this, _hasIcon_initializers, void 0));
+        /**
+         * Indicates whether the tab has an icon.
+         * This is set automatically when the "icon" slot is populated.
+         */
         get hasIcon() { return this.#hasIcon_accessor_storage; }
         set hasIcon(value) { this.#hasIcon_accessor_storage = value; }
-        #showRipple_accessor_storage = (__runInitializers(this, _hasIcon_extraInitializers), __runInitializers(this, _showRipple_initializers, false));
-        get showRipple() { return this.#showRipple_accessor_storage; }
-        set showRipple(value) { this.#showRipple_accessor_storage = value; }
-        #ripple_accessor_storage = (__runInitializers(this, _showRipple_extraInitializers), __runInitializers(this, _ripple_initializers, void 0));
+        #iconOnly_accessor_storage = (__runInitializers(this, _hasIcon_extraInitializers), __runInitializers(this, _iconOnly_initializers, void 0));
+        /**
+         * Indicates whether the tab only has an icon and no text.
+         * This is set automatically when the default slot is populated with only an icon.
+         */
+        get iconOnly() { return this.#iconOnly_accessor_storage; }
+        set iconOnly(value) { this.#iconOnly_accessor_storage = value; }
+        #ripple_accessor_storage = (__runInitializers(this, _iconOnly_extraInitializers), __runInitializers(this, _ripple_initializers, void 0));
         get ripple() { return this.#ripple_accessor_storage; }
         set ripple(value) { this.#ripple_accessor_storage = value; }
-        getRipple = (__runInitializers(this, _ripple_extraInitializers), () => {
-            this.showRipple = true;
-            return this.ripple;
-        });
         constructor() {
             super();
+            __runInitializers(this, _ripple_extraInitializers);
+            this.priority = 'primary';
+            this.selected = false;
+            this.indicated = false;
+            this.hasIcon = false;
+            this.iconOnly = true;
             this.actionController.cancelKeyboardEvents = true;
             this.addEventListener('keydown', this.handleKeyDown.bind(this));
             this.addEventListener('keyup', this.handleKeyUp.bind(this));
@@ -112,6 +112,7 @@ let UiTab = (() => {
             this.addEventListener('pointerup', this.handlePointerUp.bind(this));
             this.addEventListener('pointercancel', this.handlePointerCancel.bind(this));
             this.addEventListener('pointerleave', this.handlePointerLeave.bind(this));
+            this.addEventListener('pointerenter', this.handlePointerEnter.bind(this));
             this.addEventListener('contextmenu', this.handleContextMenu.bind(this));
         }
         connectedCallback() {
@@ -123,8 +124,21 @@ let UiTab = (() => {
                 this.setAttribute('aria-selected', 'false');
             }
         }
+        willUpdate(cp) {
+            super.willUpdate(cp);
+            if (cp.has('selected')) {
+                this.setAttribute('aria-selected', String(this.selected));
+            }
+        }
+        beginPress(options) {
+            super.beginPress(options);
+            this.classList.add('pressed');
+            this.ripple?.beginPress(options.positionEvent);
+        }
         endPress(config) {
             super.endPress(config);
+            this.classList.remove('pressed');
+            this.ripple?.endPress();
             const { cancelled, reason } = config;
             if (cancelled) {
                 return;
@@ -133,13 +147,66 @@ let UiTab = (() => {
                 this.click();
             }
         }
+        handleClick(e) {
+            super.handleClick(e);
+            if (this.disabled) {
+                e.preventDefault();
+                e.stopPropagation();
+                return;
+            }
+            this.endPress({ cancelled: false, actionData: { event: e } });
+        }
+        handlePointerEnter(e) {
+            super.handlePointerEnter(e);
+            if (this.ripple) {
+                this.ripple.beginHover(e);
+            }
+        }
+        handlePointerLeave(e) {
+            super.handlePointerLeave(e);
+            if (this.ripple) {
+                this.ripple.endHover();
+            }
+        }
+        handleKeyUp(e) {
+            super.handleKeyUp(e);
+            if (this.disabled) {
+                e.preventDefault();
+                e.stopPropagation();
+                return;
+            }
+        }
         /**
          * Sets the `_hasIcon` state property when the "icon" slot change event is dispatched.
          */
-        handleIconChange(e) {
+        handleIconSlotChange(e) {
             const slot = e.target;
             this.hasIcon = !!slot.assignedNodes().length;
         }
+        handleSlotChange(e) {
+            const slot = e.target;
+            // Check if there's any label text or elements. If not, then there is only
+            // an icon.
+            for (const node of slot.assignedNodes()) {
+                const hasTextContent = node.nodeType === Node.TEXT_NODE && !!node.wholeText.match(/\S/);
+                if (node.nodeType === Node.ELEMENT_NODE || hasTextContent) {
+                    this.iconOnly = false;
+                    return;
+                }
+            }
+            this.iconOnly = true;
+        }
+        getIndicatorSizing() {
+            const element = this.priority === 'primary' ? this.shadowRoot?.querySelector('.tab-content') : this;
+            if (!element) {
+                return { width: 0, left: 0 };
+            }
+            const rect = element.getBoundingClientRect();
+            return {
+                width: rect.width,
+                left: rect.left,
+            };
+        }
         /**
          * When `indicated` is `true` it animates the indicator to highlight the position of the tab.
          */
@@ -169,35 +236,39 @@ let UiTab = (() => {
             });
         }
         render() {
-            const { pressed = false } = this;
+            const isPrimary = this.priority === 'primary';
             const containerClasses = classMap({
-                surface: true,
-                withIcon: this.hasIcon,
-                pressed,
+                'surface': true,
+                'has-icon': this.hasIcon,
+                'has-label': !this.iconOnly,
+                'stacked': isPrimary,
             });
             return html `
-      <div class="${containerClasses}" ${ripple(this.getRipple)}>
-        <div class="container"></div>
-        ${when(this.showRipple, this.renderRipple)}
-        <div class="content">
+      ${this.renderFocusRing()} ${this.renderRipple()}
+      <div class="${containerClasses}">
+        <div class="tab-content">
           ${this.renderIcon()}
-          <div class="tab-content"><slot></slot></div>
+          <slot @slotchange="${this.handleSlotChange}"></slot>
         </div>
-        ${this.renderIndicator()}
+        ${isPrimary ? this.renderIndicator() : nothing}
       </div>
+      ${!isPrimary ? this.renderIndicator() : nothing}
     `;
         }
+        renderFocusRing() {
+            return html `<md-focus-ring
+      part="focus-ring"
+      class="focus-ring"
+      inward
+      .control="${this}"
+    ></md-focus-ring>`;
+        }
+        renderRipple() {
+            return html `<ui-ripple class="ripple" ?disabled="${this.disabled}"></ui-ripple>`;
+        }
         renderIcon() {
-            return html `
-      <div class="icon">
-        <slot name="icon" @slotchange="${this.handleIconChange}"></slot>
-      </div>
-    `;
+            return html ` <slot name="icon" @slotchange="${this.handleIconSlotChange}"></slot> `;
         }
-        renderRipple = () => {
-            const { disabled } = this;
-            return html `<ui-ripple class="ripple" ?disabled="${disabled}"></ui-ripple>`;
-        };
         renderIndicator() {
             const { indicated, priority } = this;
             if (!indicated) {
@@ -207,9 +278,7 @@ let UiTab = (() => {
                 indicator: true,
                 primary: priority === 'primary',
             };
-            return html `<div class="${classMap(classes)}">
-      <span role="presentation" class="pointer"></span>
-    </div>`;
+            return html `<div class="${classMap(classes)}"></div>`;
         }
     };
 })();