@api-client/ui 0.3.1 → 0.3.3

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

@@ -82,6 +82,10 @@ export default css `
     transition: border-radius var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard);
   }
 
+  .ripple.activated {
+    z-index: 1;
+  }
+
   .focus-ring {
     --md-focus-ring-shape-end-end: var(--ui-button-shape-end-end, var(--_pill-radius));
     --md-focus-ring-shape-end-start: var(--ui-button-shape-end-start, var(--_pill-radius));
@@ -90,10 +94,6 @@ export default css `
     transition: border-radius var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard);
   }
 
-  .ripple.activated {
-    z-index: 1;
-  }
-
   /* Disabled state */
   :host([disabled]) {
     background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);

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

@@ -1 +1 @@
-{"version":3,"file":"button.styles.js","sourceRoot":"","sources":["../../../../../src/md/button/internals/button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,qEAAqE;AACrE,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2TjB,CAAA","sourcesContent":["import { css } from 'lit'\n\n/* Material Design 3 Expressive Button - CSS-Native Implementation */\nexport default css`\n  :host {\n    all: unset;\n\n    /* Layout and positioning */\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    box-sizing: border-box;\n    white-space: nowrap;\n\n    /* Default sizing */\n    min-height: 40px;\n    min-width: 64px;\n    padding-inline: 16px;\n    gap: 8px;\n\n    /* Typography from Material 3 tokens */\n    font-family: var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, system-ui));\n    font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n    font-weight: var(--md-sys-typescale-label-large-weight, 500);\n    line-height: var(--md-sys-typescale-label-large-height, 1.25);\n    letter-spacing: var(--md-sys-typescale-label-large-tracking, 0.01em);\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    /* CSS custom property for pill radius - half of the button height */\n    --_pill-radius: 20px;\n    /* Default icon size */\n    --_icon-size: var(--md-button-icon-size, 20px);\n    --_background-color: transparent;\n    --_color: inherit;\n    --_shadow: var(--md-sys-elevation-0);\n\n    border-end-end-radius: var(--ui-button-shape-end-end, var(--_pill-radius));\n    border-end-start-radius: var(--ui-button-shape-end-start, var(--_pill-radius));\n    border-start-end-radius: var(--ui-button-shape-start-end, var(--_pill-radius));\n    border-start-start-radius: var(--ui-button-shape-start-start, var(--_pill-radius));\n    background-color: var(--_background-color);\n    color: var(--_color);\n    box-shadow: var(--_shadow);\n\n    /* Interaction styles */\n    cursor: pointer;\n    user-select: none;\n    -webkit-tap-highlight-color: transparent;\n    outline: none;\n\n    transition:\n      background-color var(--md-sys-motion-duration-short2, 200ms)\n        var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),\n      color var(--md-sys-motion-duration-short2, 200ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),\n      box-shadow var(--md-sys-motion-duration-short2, 200ms)\n        var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),\n      border-color var(--md-sys-motion-duration-short2, 200ms)\n        var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),\n      border-radius var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard);\n  }\n\n  /* Icon styling */\n  ::slotted([slot='icon']) {\n    flex-shrink: 0;\n    width: var(--_icon-size);\n    height: var(--_icon-size);\n    font-size: inherit;\n  }\n\n  /* Modern CSS: Container queries for responsive sizing */\n  @container (min-width: 320px) {\n    :host {\n      min-width: 80px;\n    }\n  }\n\n  .ripple {\n    border-radius: inherit;\n    transition: border-radius var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard);\n  }\n\n  .focus-ring {\n    --md-focus-ring-shape-end-end: var(--ui-button-shape-end-end, var(--_pill-radius));\n    --md-focus-ring-shape-end-start: var(--ui-button-shape-end-start, var(--_pill-radius));\n    --md-focus-ring-shape-start-end: var(--ui-button-shape-start-end, var(--_pill-radius));\n    --md-focus-ring-shape-start-start: var(--ui-button-shape-start-start, var(--_pill-radius));\n    transition: border-radius var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard);\n  }\n\n  .ripple.activated {\n    z-index: 1;\n  }\n\n  /* Disabled state */\n  :host([disabled]) {\n    background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);\n    color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);\n    box-shadow: none;\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  /* Size Variations */\n  :host([size='xs']) {\n    min-height: 32px;\n    padding-inline: 12px;\n    font-size: var(--md-sys-typescale-label-medium-size, 0.75rem);\n    gap: 6px;\n    --_icon-size: 20px;\n  }\n\n  :host([size='s']) {\n    min-height: 40px;\n    padding-inline: 16px;\n    --_icon-size: 20px;\n  }\n\n  :host([size='m']) {\n    min-height: 56px;\n    padding-inline: 24px;\n    font-size: var(--md-sys-typescale-label-large-size, 1rem);\n    gap: 10px;\n    --_icon-size: 24px;\n  }\n\n  :host([size='l']) {\n    min-height: 96px;\n    padding-inline: 48px;\n    font-size: var(--md-sys-typescale-title-medium-size, 1.125rem);\n    gap: 12px;\n    --_icon-size: 32px;\n  }\n\n  :host([size='xl']) {\n    min-height: 136px;\n    padding-inline: 64px;\n    font-size: var(--md-sys-typescale-title-large-size, 1.375rem);\n    gap: 16px;\n    --_icon-size: 40px;\n  }\n\n  /* Pressed state is the same to all combinations of shape and size */\n  :host([size='xs'].pressed),\n  :host([size='s'].pressed) {\n    --_pill-radius: 8px !important;\n  }\n  :host([size='m'].pressed) {\n    --_pill-radius: 12px !important;\n  }\n  :host([size='xl'].pressed),\n  :host([size='l'].pressed) {\n    --_pill-radius: 16px !important;\n  }\n\n  /* Shape setup */\n  /* For the round shape, we can't use the \"--md-sys-shape-corner-full\" value as it has a value of 999px and it would make animations impossible so see. */\n  :host([toggle][selected][shape='square'][size='xs']),\n  :host([shape='round'][size='xs']) {\n    --_pill-radius: 16px; /* Half of 32px height */\n  }\n  :host([toggle][selected][shape='square'][size='s']),\n  :host([shape='round'][size='s']) {\n    --_pill-radius: 20px; /* Half of 40px height */\n  }\n  :host([toggle][selected][shape='square'][size='m']),\n  :host([shape='round'][size='m']) {\n    --_pill-radius: 28px; /* Half of 56px height */\n  }\n  :host([toggle][selected][shape='square'][size='l']),\n  :host([shape='round'][size='l']) {\n    --_pill-radius: 48px; /* Half of 96px height */\n  }\n  :host([toggle][selected][shape='square'][size='xl']),\n  :host([shape='round'][size='xl']) {\n    --_pill-radius: 68px; /* Half of 136px height */\n  }\n\n  :host([shape='square'][size='xs']),\n  :host([shape='square'][size='s']) {\n    --_pill-radius: var(--md-sys-shape-corner-medium);\n  }\n\n  :host([shape='square'][size='m']) {\n    --_pill-radius: var(--md-sys-shape-corner-large);\n  }\n\n  :host([shape='square'][size='l']),\n  :host([shape='square'][size='xl']) {\n    --_pill-radius: var(--md-sys-shape-corner-extra-large);\n  }\n\n  /* Button Color Variants - Material 3 Expressive */\n\n  /* Elevated Button */\n  :host([color='elevated']) {\n    --_background-color: var(--md-sys-color-surface-container-low);\n    --_color: var(--md-sys-color-primary);\n    --_shadow: var(--md-sys-elevation-1);\n  }\n\n  :host([color='elevated'][toggle][selected]) {\n    --_background-color: var(--md-sys-color-primary);\n    --_color: var(--md-sys-color-on-primary);\n  }\n\n  :host([color='elevated']:hover:not([disabled])) {\n    --_shadow: var(--md-sys-elevation-2);\n  }\n\n  :host([color='elevated'][disabled]) {\n    --_background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);\n    --_color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);\n    --_shadow: var(--md-sys-elevation-0);\n  }\n\n  /* Filled Button */\n  :host([color='filled']) {\n    --_background-color: var(--md-sys-color-primary);\n    --_color: var(--md-sys-color-on-primary);\n  }\n\n  :host([color='filled'][toggle]) {\n    --_background-color: var(--md-sys-color-surface-container);\n    --_color: var(--md-sys-color-on-surface-variant);\n  }\n\n  :host([color='filled'][toggle][selected]) {\n    --_background-color: var(--md-sys-color-primary);\n    --_color: var(--md-sys-color-on-primary);\n  }\n\n  :host([color='filled']:hover:not([disabled])) {\n    --_shadow: var(--md-sys-elevation-1);\n  }\n\n  :host([color='filled'][disabled]) {\n    --_background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);\n    --_color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);\n  }\n\n  /* Filled Tonal Button */\n  :host([color='tonal']) {\n    --_background-color: var(--md-sys-color-secondary-container);\n    --_color: var(--md-sys-color-on-secondary-container);\n  }\n\n  :host([color='tonal'][toggle]) {\n    --_background-color: var(--md-sys-color-secondary-container);\n    --_color: var(--md-sys-color-on-secondary-container);\n  }\n\n  :host([color='tonal'][toggle][selected]) {\n    --_background-color: var(--md-sys-color-secondary);\n    --_color: var(--md-sys-color-on-secondary);\n  }\n\n  :host([color='tonal']:hover:not([disabled])) {\n    --_shadow: var(--md-sys-elevation-1);\n  }\n\n  :host([color='tonal'][disabled]) {\n    --_background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);\n    --_color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);\n  }\n\n  /* Outlined Button */\n  :host([color='outlined']) {\n    border: 1px var(--md-sys-color-outline-variant) solid;\n    --_color: var(--md-sys-color-on-surface-variant);\n  }\n\n  :host([color='outlined'][toggle][selected]) {\n    --_background-color: var(--md-sys-color-inverse-surface);\n    --_color: var(--md-sys-color-inverse-on-surface);\n  }\n\n  :host([color='outlined'][disabled]) {\n    border-color: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);\n    --_color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);\n  }\n\n  /* Text Button */\n  :host([color='text']) {\n    --_color: var(--md-sys-color-primary);\n  }\n\n  :host([color='text'][disabled]) {\n    color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);\n  }\n\n  :host([toggle][selected][shape='round']) {\n    --_pill-radius: var(--md-sys-shape-corner-medium);\n  }\n\n  /* Preference-based animations */\n  @media (prefers-reduced-motion: reduce) {\n    :host {\n      transition-duration: 0.01ms;\n      animation-duration: 0.01ms;\n    }\n  }\n\n  /* High contrast mode support */\n  @media (prefers-contrast: high) {\n    :host {\n      border-width: 2px;\n    }\n\n    :host([color='text']),\n    :host([color='outlined']) {\n      border-width: 2px;\n      border-style: solid;\n    }\n  }\n`\n"]}
+{"version":3,"file":"button.styles.js","sourceRoot":"","sources":["../../../../../src/md/button/internals/button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,qEAAqE;AACrE,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2TjB,CAAA","sourcesContent":["import { css } from 'lit'\n\n/* Material Design 3 Expressive Button - CSS-Native Implementation */\nexport default css`\n  :host {\n    all: unset;\n\n    /* Layout and positioning */\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    box-sizing: border-box;\n    white-space: nowrap;\n\n    /* Default sizing */\n    min-height: 40px;\n    min-width: 64px;\n    padding-inline: 16px;\n    gap: 8px;\n\n    /* Typography from Material 3 tokens */\n    font-family: var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, system-ui));\n    font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n    font-weight: var(--md-sys-typescale-label-large-weight, 500);\n    line-height: var(--md-sys-typescale-label-large-height, 1.25);\n    letter-spacing: var(--md-sys-typescale-label-large-tracking, 0.01em);\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    /* CSS custom property for pill radius - half of the button height */\n    --_pill-radius: 20px;\n    /* Default icon size */\n    --_icon-size: var(--md-button-icon-size, 20px);\n    --_background-color: transparent;\n    --_color: inherit;\n    --_shadow: var(--md-sys-elevation-0);\n\n    border-end-end-radius: var(--ui-button-shape-end-end, var(--_pill-radius));\n    border-end-start-radius: var(--ui-button-shape-end-start, var(--_pill-radius));\n    border-start-end-radius: var(--ui-button-shape-start-end, var(--_pill-radius));\n    border-start-start-radius: var(--ui-button-shape-start-start, var(--_pill-radius));\n    background-color: var(--_background-color);\n    color: var(--_color);\n    box-shadow: var(--_shadow);\n\n    /* Interaction styles */\n    cursor: pointer;\n    user-select: none;\n    -webkit-tap-highlight-color: transparent;\n    outline: none;\n\n    transition:\n      background-color var(--md-sys-motion-duration-short2, 200ms)\n        var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),\n      color var(--md-sys-motion-duration-short2, 200ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),\n      box-shadow var(--md-sys-motion-duration-short2, 200ms)\n        var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),\n      border-color var(--md-sys-motion-duration-short2, 200ms)\n        var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),\n      border-radius var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard);\n  }\n\n  /* Icon styling */\n  ::slotted([slot='icon']) {\n    flex-shrink: 0;\n    width: var(--_icon-size);\n    height: var(--_icon-size);\n    font-size: inherit;\n  }\n\n  /* Modern CSS: Container queries for responsive sizing */\n  @container (min-width: 320px) {\n    :host {\n      min-width: 80px;\n    }\n  }\n\n  .ripple {\n    border-radius: inherit;\n    transition: border-radius var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard);\n  }\n\n  .ripple.activated {\n    z-index: 1;\n  }\n\n  .focus-ring {\n    --md-focus-ring-shape-end-end: var(--ui-button-shape-end-end, var(--_pill-radius));\n    --md-focus-ring-shape-end-start: var(--ui-button-shape-end-start, var(--_pill-radius));\n    --md-focus-ring-shape-start-end: var(--ui-button-shape-start-end, var(--_pill-radius));\n    --md-focus-ring-shape-start-start: var(--ui-button-shape-start-start, var(--_pill-radius));\n    transition: border-radius var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard);\n  }\n\n  /* Disabled state */\n  :host([disabled]) {\n    background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);\n    color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);\n    box-shadow: none;\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  /* Size Variations */\n  :host([size='xs']) {\n    min-height: 32px;\n    padding-inline: 12px;\n    font-size: var(--md-sys-typescale-label-medium-size, 0.75rem);\n    gap: 6px;\n    --_icon-size: 20px;\n  }\n\n  :host([size='s']) {\n    min-height: 40px;\n    padding-inline: 16px;\n    --_icon-size: 20px;\n  }\n\n  :host([size='m']) {\n    min-height: 56px;\n    padding-inline: 24px;\n    font-size: var(--md-sys-typescale-label-large-size, 1rem);\n    gap: 10px;\n    --_icon-size: 24px;\n  }\n\n  :host([size='l']) {\n    min-height: 96px;\n    padding-inline: 48px;\n    font-size: var(--md-sys-typescale-title-medium-size, 1.125rem);\n    gap: 12px;\n    --_icon-size: 32px;\n  }\n\n  :host([size='xl']) {\n    min-height: 136px;\n    padding-inline: 64px;\n    font-size: var(--md-sys-typescale-title-large-size, 1.375rem);\n    gap: 16px;\n    --_icon-size: 40px;\n  }\n\n  /* Pressed state is the same to all combinations of shape and size */\n  :host([size='xs'].pressed),\n  :host([size='s'].pressed) {\n    --_pill-radius: 8px !important;\n  }\n  :host([size='m'].pressed) {\n    --_pill-radius: 12px !important;\n  }\n  :host([size='xl'].pressed),\n  :host([size='l'].pressed) {\n    --_pill-radius: 16px !important;\n  }\n\n  /* Shape setup */\n  /* For the round shape, we can't use the \"--md-sys-shape-corner-full\" value as it has a value of 999px and it would make animations impossible so see. */\n  :host([toggle][selected][shape='square'][size='xs']),\n  :host([shape='round'][size='xs']) {\n    --_pill-radius: 16px; /* Half of 32px height */\n  }\n  :host([toggle][selected][shape='square'][size='s']),\n  :host([shape='round'][size='s']) {\n    --_pill-radius: 20px; /* Half of 40px height */\n  }\n  :host([toggle][selected][shape='square'][size='m']),\n  :host([shape='round'][size='m']) {\n    --_pill-radius: 28px; /* Half of 56px height */\n  }\n  :host([toggle][selected][shape='square'][size='l']),\n  :host([shape='round'][size='l']) {\n    --_pill-radius: 48px; /* Half of 96px height */\n  }\n  :host([toggle][selected][shape='square'][size='xl']),\n  :host([shape='round'][size='xl']) {\n    --_pill-radius: 68px; /* Half of 136px height */\n  }\n\n  :host([shape='square'][size='xs']),\n  :host([shape='square'][size='s']) {\n    --_pill-radius: var(--md-sys-shape-corner-medium);\n  }\n\n  :host([shape='square'][size='m']) {\n    --_pill-radius: var(--md-sys-shape-corner-large);\n  }\n\n  :host([shape='square'][size='l']),\n  :host([shape='square'][size='xl']) {\n    --_pill-radius: var(--md-sys-shape-corner-extra-large);\n  }\n\n  /* Button Color Variants - Material 3 Expressive */\n\n  /* Elevated Button */\n  :host([color='elevated']) {\n    --_background-color: var(--md-sys-color-surface-container-low);\n    --_color: var(--md-sys-color-primary);\n    --_shadow: var(--md-sys-elevation-1);\n  }\n\n  :host([color='elevated'][toggle][selected]) {\n    --_background-color: var(--md-sys-color-primary);\n    --_color: var(--md-sys-color-on-primary);\n  }\n\n  :host([color='elevated']:hover:not([disabled])) {\n    --_shadow: var(--md-sys-elevation-2);\n  }\n\n  :host([color='elevated'][disabled]) {\n    --_background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);\n    --_color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);\n    --_shadow: var(--md-sys-elevation-0);\n  }\n\n  /* Filled Button */\n  :host([color='filled']) {\n    --_background-color: var(--md-sys-color-primary);\n    --_color: var(--md-sys-color-on-primary);\n  }\n\n  :host([color='filled'][toggle]) {\n    --_background-color: var(--md-sys-color-surface-container);\n    --_color: var(--md-sys-color-on-surface-variant);\n  }\n\n  :host([color='filled'][toggle][selected]) {\n    --_background-color: var(--md-sys-color-primary);\n    --_color: var(--md-sys-color-on-primary);\n  }\n\n  :host([color='filled']:hover:not([disabled])) {\n    --_shadow: var(--md-sys-elevation-1);\n  }\n\n  :host([color='filled'][disabled]) {\n    --_background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);\n    --_color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);\n  }\n\n  /* Filled Tonal Button */\n  :host([color='tonal']) {\n    --_background-color: var(--md-sys-color-secondary-container);\n    --_color: var(--md-sys-color-on-secondary-container);\n  }\n\n  :host([color='tonal'][toggle]) {\n    --_background-color: var(--md-sys-color-secondary-container);\n    --_color: var(--md-sys-color-on-secondary-container);\n  }\n\n  :host([color='tonal'][toggle][selected]) {\n    --_background-color: var(--md-sys-color-secondary);\n    --_color: var(--md-sys-color-on-secondary);\n  }\n\n  :host([color='tonal']:hover:not([disabled])) {\n    --_shadow: var(--md-sys-elevation-1);\n  }\n\n  :host([color='tonal'][disabled]) {\n    --_background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);\n    --_color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);\n  }\n\n  /* Outlined Button */\n  :host([color='outlined']) {\n    border: 1px var(--md-sys-color-outline-variant) solid;\n    --_color: var(--md-sys-color-on-surface-variant);\n  }\n\n  :host([color='outlined'][toggle][selected]) {\n    --_background-color: var(--md-sys-color-inverse-surface);\n    --_color: var(--md-sys-color-inverse-on-surface);\n  }\n\n  :host([color='outlined'][disabled]) {\n    border-color: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);\n    --_color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);\n  }\n\n  /* Text Button */\n  :host([color='text']) {\n    --_color: var(--md-sys-color-primary);\n  }\n\n  :host([color='text'][disabled]) {\n    color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);\n  }\n\n  :host([toggle][selected][shape='round']) {\n    --_pill-radius: var(--md-sys-shape-corner-medium);\n  }\n\n  /* Preference-based animations */\n  @media (prefers-reduced-motion: reduce) {\n    :host {\n      transition-duration: 0.01ms;\n      animation-duration: 0.01ms;\n    }\n  }\n\n  /* High contrast mode support */\n  @media (prefers-contrast: high) {\n    :host {\n      border-width: 2px;\n    }\n\n    :host([color='text']),\n    :host([color='outlined']) {\n      border-width: 2px;\n      border-style: solid;\n    }\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/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>`;
         }
     };
 })();