npm - @material/web - Versions diffs - 1.0.0-pre.11 → 1.0.0-pre.13 - Mend

@material/web 1.0.0-pre.11 → 1.0.0-pre.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (166) hide show

package/README.md +18 -1
package/button/lib/_icon.scss +9 -9
package/button/lib/_outlined-button.scss +4 -0
package/button/lib/button.d.ts +0 -6
package/button/lib/button.js +2 -14
package/button/lib/button.js.map +1 -1
package/button/lib/elevated-styles.css.js +1 -1
package/button/lib/elevated-styles.css.js.map +1 -1
package/button/lib/filled-styles.css.js +1 -1
package/button/lib/filled-styles.css.js.map +1 -1
package/button/lib/outlined-styles.css.js +1 -1
package/button/lib/outlined-styles.css.js.map +1 -1
package/button/lib/shared-styles.css.js +1 -1
package/button/lib/shared-styles.css.js.map +1 -1
package/button/lib/text-styles.css.js +1 -1
package/button/lib/text-styles.css.js.map +1 -1
package/button/lib/tonal-styles.css.js +1 -1
package/button/lib/tonal-styles.css.js.map +1 -1
package/chips/assist-chip.js +2 -1
package/chips/assist-chip.js.map +1 -1
package/chips/filter-chip.js +3 -1
package/chips/filter-chip.js.map +1 -1
package/chips/harness.d.ts +2 -5
package/chips/harness.js +9 -6
package/chips/harness.js.map +1 -1
package/chips/input-chip.js +5 -1
package/chips/input-chip.js.map +1 -1
package/chips/lib/_elevated.scss +14 -0
package/chips/lib/_selectable.scss +8 -0
package/chips/lib/_shared.scss +1 -0
package/chips/lib/_trailing-icon.scss +1 -1
package/chips/lib/assist-chip.d.ts +1 -0
package/chips/lib/assist-chip.js +1 -0
package/chips/lib/assist-chip.js.map +1 -1
package/chips/lib/assist-forced-colors-styles.css.d.ts +1 -0
package/chips/lib/assist-forced-colors-styles.css.js +9 -0
package/chips/lib/assist-forced-colors-styles.css.js.map +1 -0
package/chips/lib/assist-forced-colors-styles.scss +27 -0
package/chips/lib/chip-set.js +4 -4
package/chips/lib/chip-set.js.map +1 -1
package/chips/lib/elevated-styles.css.js +1 -1
package/chips/lib/elevated-styles.css.js.map +1 -1
package/chips/lib/filter-chip.d.ts +1 -0
package/chips/lib/filter-chip.js +2 -1
package/chips/lib/filter-chip.js.map +1 -1
package/chips/lib/filter-forced-colors-styles.css.d.ts +1 -0
package/chips/lib/filter-forced-colors-styles.css.js +9 -0
package/chips/lib/filter-forced-colors-styles.css.js.map +1 -0
package/chips/lib/filter-forced-colors-styles.scss +34 -0
package/chips/lib/input-chip.d.ts +2 -0
package/chips/lib/input-chip.js +4 -2
package/chips/lib/input-chip.js.map +1 -1
package/chips/lib/input-forced-colors-styles.css.d.ts +1 -0
package/chips/lib/input-forced-colors-styles.css.js +9 -0
package/chips/lib/input-forced-colors-styles.css.js.map +1 -0
package/chips/lib/input-forced-colors-styles.scss +39 -0
package/chips/lib/input-styles.css.js +1 -1
package/chips/lib/input-styles.css.js.map +1 -1
package/chips/lib/selectable-styles.css.js +1 -1
package/chips/lib/selectable-styles.css.js.map +1 -1
package/chips/lib/shared-styles.css.js +1 -1
package/chips/lib/shared-styles.css.js.map +1 -1
package/chips/lib/suggestion-forced-colors-styles.css.d.ts +1 -0
package/chips/lib/suggestion-forced-colors-styles.css.js +9 -0
package/chips/lib/suggestion-forced-colors-styles.css.js.map +1 -0
package/chips/lib/suggestion-forced-colors-styles.scss +27 -0
package/chips/lib/trailing-icon-styles.css.js +1 -1
package/chips/lib/trailing-icon-styles.css.js.map +1 -1
package/chips/suggestion-chip.js +2 -1
package/chips/suggestion-chip.js.map +1 -1
package/dialog/lib/_dialog.scss +2 -2
package/dialog/lib/_tokens.scss +5 -22
package/dialog/lib/dialog-styles.css.js +1 -1
package/dialog/lib/dialog-styles.css.js.map +1 -1
package/dialog/lib/dialog.d.ts +9 -3
package/dialog/lib/dialog.js +24 -16
package/dialog/lib/dialog.js.map +1 -1
package/fab/branded-fab.d.ts +1 -0
package/fab/lib/_fab.scss +12 -0
package/fab/lib/fab-styles.css.js +1 -1
package/fab/lib/fab-styles.css.js.map +1 -1
package/fab/lib/fab.d.ts +1 -0
package/fab/lib/shared.d.ts +9 -0
package/fab/lib/shared.js +23 -2
package/fab/lib/shared.js.map +1 -1
package/field/lib/_supporting-text.scss +6 -16
package/field/lib/field.d.ts +26 -2
package/field/lib/field.js +100 -15
package/field/lib/field.js.map +1 -1
package/field/lib/outlined-field.d.ts +1 -2
package/field/lib/outlined-field.js.map +1 -1
package/field/lib/shared-styles.css.js +1 -1
package/field/lib/shared-styles.css.js.map +1 -1
package/iconbutton/lib/icon-button.js +1 -1
package/iconbutton/lib/icon-button.js.map +1 -1
package/labs/navigationbar/lib/navigation-bar.js +2 -2
package/labs/navigationbar/lib/navigation-bar.js.map +1 -1
package/labs/navigationtab/lib/navigation-tab.js +3 -3
package/labs/navigationtab/lib/navigation-tab.js.map +1 -1
package/labs/segmentedbutton/lib/_shared.scss +7 -7
package/labs/segmentedbutton/lib/outlined-styles.css.js +1 -1
package/labs/segmentedbutton/lib/outlined-styles.css.js.map +1 -1
package/labs/segmentedbutton/lib/segmented-button.js +2 -2
package/labs/segmentedbutton/lib/segmented-button.js.map +1 -1
package/labs/segmentedbutton/lib/shared-styles.css.js +1 -1
package/labs/segmentedbutton/lib/shared-styles.css.js.map +1 -1
package/labs/segmentedbuttonset/lib/outlined-styles.css.js +1 -1
package/labs/segmentedbuttonset/lib/outlined-styles.css.js.map +1 -1
package/list/harness.d.ts +24 -0
package/list/harness.js +25 -0
package/list/harness.js.map +1 -1
package/list/lib/list.d.ts +28 -10
package/list/lib/list.js +57 -19
package/list/lib/list.js.map +1 -1
package/list/lib/listitem/harness.d.ts +21 -1
package/list/lib/listitem/harness.js +16 -2
package/list/lib/listitem/harness.js.map +1 -1
package/list/lib/listitem/list-item.js +4 -4
package/list/lib/listitem/list-item.js.map +1 -1
package/list/lib/listitemlink/list-item-link-only.d.ts +1 -0
package/list/lib/listitemlink/list-item-link-only.js +4 -1
package/list/lib/listitemlink/list-item-link-only.js.map +1 -1
package/menu/harness.js.map +1 -1
package/menu/lib/menu.d.ts +15 -1
package/menu/lib/menu.js +29 -6
package/menu/lib/menu.js.map +1 -1
package/package.json +5 -4
package/radio/lib/single-selection-controller.js +2 -3
package/radio/lib/single-selection-controller.js.map +1 -1
package/select/harness.js +1 -1
package/select/harness.js.map +1 -1
package/select/lib/_shared.scss +2 -1
package/select/lib/select.d.ts +1 -11
package/select/lib/select.js +15 -51
package/select/lib/select.js.map +1 -1
package/select/lib/shared-styles.css.js +1 -1
package/select/lib/shared-styles.css.js.map +1 -1
package/slider/lib/slider.d.ts +3 -3
package/slider/lib/slider.js +10 -10
package/slider/lib/slider.js.map +1 -1
package/switch/lib/switch.js +1 -1
package/switch/lib/switch.js.map +1 -1
package/tabs/lib/tab.js +4 -2
package/tabs/lib/tab.js.map +1 -1
package/tabs/lib/tabs.js +3 -1
package/tabs/lib/tabs.js.map +1 -1
package/textfield/lib/_shared.scss +0 -4
package/textfield/lib/shared-styles.css.js +1 -1
package/textfield/lib/shared-styles.css.js.map +1 -1
package/textfield/lib/text-field.d.ts +2 -13
package/textfield/lib/text-field.js +44 -98
package/textfield/lib/text-field.js.map +1 -1
package/tokens/_md-comp-dialog.scss +48 -6
package/tokens/_md-comp-elevated-button.scss +17 -7
package/tokens/_md-comp-elevation.scss +11 -2
package/tokens/_md-comp-filled-button.scss +17 -7
package/tokens/_md-comp-filled-tonal-button.scss +17 -7
package/tokens/_md-comp-input-chip.scss +7 -0
package/tokens/_md-comp-list-item.scss +5 -0
package/tokens/_md-comp-menu-item.scss +1 -0
package/tokens/_md-comp-outlined-button.scss +19 -9
package/tokens/_md-comp-outlined-segmented-button.scss +19 -13
package/tokens/_md-comp-slider.scss +48 -2
package/tokens/_md-comp-suggestion-chip.scss +1 -0
package/tokens/_md-comp-text-button.scss +17 -7
package/tokens/_values.scss +1 -1

package/dialog/lib/dialog.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dialog.js","sourceRoot":"","sources":["dialog.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n /\n\nimport '../../elevation/elevation.js';\n\nimport {html, LitElement, PropertyValues} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {createThrottle, msFromTimeCSSValue} from '../../internal/motion/animation.js';\n\n// This is required for decorators.\n// tslint:disable:no-new-decorators\n\n/\n Default close action.\n /\nexport const CLOSE_ACTION = 'close';\n\nconst OPENING_TRANSITION_PROP = '--_opening-transition-duration';\nconst CLOSING_TRANSITION_PROP = '--_closing-transition-duration';\n\n/\n A dialog component.\n /\nexport class Dialog extends LitElement {\n private static preventedScrollingCount = 0;\n private static scrollbarTester: HTMLDivElement;\n\n private static setDocumentScrollingDisabled(disabled = false) {\n let {preventedScrollingCount, scrollbarTester} = Dialog;\n Dialog.preventedScrollingCount = preventedScrollingCount =\n Math.max(preventedScrollingCount + (Number(disabled) \|\| -1), 0);\n const shouldPrevent = Boolean(preventedScrollingCount);\n const {style} = document.body;\n if (shouldPrevent && style.overflow === 'hidden') {\n return;\n }\n if (scrollbarTester === undefined) {\n Dialog.scrollbarTester = scrollbarTester = document.createElement('div');\n scrollbarTester.style.cssText =\n `position: absolute; height: 0; width: 100%; visibility: hidden; pointer-events: none;`;\n }\n // Appends an element to see if its offsetWidth changes when overflow is\n // altered. If it does, then add end inline padding to restore the width to\n // avoid a visible layout shift.\n document.body.append(scrollbarTester);\n const {offsetWidth} = scrollbarTester;\n style.overflow = shouldPrevent ? 'hidden' : '';\n const scrollbarWidth = scrollbarTester.offsetWidth - offsetWidth;\n scrollbarTester.remove();\n style.paddingInlineEnd = shouldPrevent ? `${scrollbarWidth}px` : '';\n }\n\n /\n Opens the dialog when set to `true` and closes it when set to `false`.\n /\n @property({type: Boolean}) open = false;\n\n /\n Setting fullscreen displays the dialog fullscreen on small screens.\n * This can be customized via the `fullscreenBreakpoint` property.\n * When showing fullscreen, the header will take up less vertical space, and\n * the dialog will have a `showing-fullscreen`attribute, allowing content to\n * be styled in this state.\n \n Dialogs can be sized by setting:\n \n * --md-dialog-container-min-block-size\n * * --md-dialog-container-max-block-size\n * * --md-dialog-container-min-inline-size\n * * --md-dialog-container-max-inline-size\n \n These are typically configured via media queries and are independent of the\n * fullscreen setting.\n /\n @property({type: Boolean}) fullscreen = false;\n\n /\n A media query string specifying the breakpoint at which the dialog\n * should be shown fullscreen. Note, this only applies when the `fullscreen`\n * property is set.\n \n By default, the dialog is shown fullscreen on screens less than 600px wide\n * or 400px tall.\n /\n @property() fullscreenBreakpoint = '(max-width: 600px), (max-height: 400px)';\n\n /\n Hides the dialog footer, making any content slotted into the footer\n * inaccessible.\n /\n @property({type: Boolean}) footerHidden = false;\n\n /\n Renders footer content in a vertically stacked alignment rather than the\n * normal horizontal alignment.\n /\n @property({type: Boolean}) stacked = false;\n\n /\n When the dialog is closed it disptaches `closing` and `closed` events.\n * These events have an action property which has a default value of\n * the value of this property. Specific actions have explicit values but when\n * a value is not specified, the default is used. For example, clicking the\n * scrim, pressing escape, or clicking a button with an action attribute set\n * produce an explicit action.\n \n Defaults to `close`.\n /\n @property() defaultAction = CLOSE_ACTION;\n\n /\n The name of an attribute which can be placed on any element slotted into\n * the dialog. If an element has an action attribute set, clicking it will\n * close the dialog and the `closing` and `closed` events dispatched will\n * have their action property set the value of this attribute on the\n * clicked element.The default valus is `dialogAction`. For example,\n \n <md-dialog>\n * Content\n * <md-filled-button slot=\"footer\"dialogAction=\"buy\">\n * Buy\n * </md-filled-button>\n * </md-dialog>\n /\n @property() actionAttribute = 'dialogAction';\n\n /\n When the dialog is opened, it will focus the first element which has\n * an attribute name matching this property. The default value is\n * `dialogFocus`. For example:\n \n <md-dialog>\n * <md-filled-text-field\n * label=\"Enter some text\"\n * dialogFocus\n * >\n * </md-filled-text-field>\n * </md-dialog>\n /\n @property() focusAttribute = 'dialogFocus';\n\n /\n Clicking on the scrim surrounding the dialog closes the dialog.\n * The `closing` and `closed` events this produces have an `action` property\n * which is the value of this property and defaults to `close`.\n /\n @property() scrimClickAction = CLOSE_ACTION;\n\n /\n Pressing the `escape` key while the dialog is open closes the dialog.\n * The `closing` and `closed` events this produces have an `action` property\n * which is the value of this property and defaults to `close`.\n /\n @property() escapeKeyAction = CLOSE_ACTION;\n\n /\n When opened, the dialog is displayed modeless or non-modal. This\n * allows users to interact with content outside the dialog without\n * closing the dialog and does not display the scrim around the dialog.\n /\n @property({type: Boolean, reflect: true}) modeless = false;\n\n /\n Set to make the dialog position draggable.\n /\n @property({type: Boolean}) override draggable = false;\n\n private readonly throttle = createThrottle();\n\n @query('.dialog', true)\n private readonly dialogElement!: HTMLDialogElement\|null;\n\n // slots tracked to find focusable elements.\n @query('slot[name=footer]', true)\n private readonly footerSlot!: HTMLSlotElement;\n @query('slot:not([name])', true)\n private readonly contentSlot!: HTMLSlotElement;\n // for scrolling related styling\n @query(`.content`, true)\n private readonly contentElement!: HTMLDivElement\|null;\n // used to determine container size for dragging\n @query(`.container`, true)\n private readonly containerElement!: HTMLDivElement\|null;\n // used to determine where users can drag from.\n @query(`.header`, true) private readonly headerElement!: HTMLDivElement\|null;\n\n /\n Private properties that reflect for styling manually in `updated`.\n /\n @state() private showingFullscreen = false;\n @state() private showingOpen = false;\n @state() private opening = false;\n @state() private closing = false;\n\n /\n Transition kind. Supported options include: grow, shrink, grow-down,\n * grow-up, grow-left, and grow-right.\n \n Defaults to grow-down.\n /\n @property({reflect: true}) transition = 'grow-down';\n\n private currentAction: string\|undefined;\n\n @state() private dragging = false;\n private readonly dragMargin = 8;\n private dragInfo?: [number, number, number, number]\|undefined;\n\n /\n Opens and shows the dialog. This is equivalent to setting the `open`\n * property to true.\n /\n show() {\n this.open = true;\n }\n\n /\n Closes the dialog. This is equivalent to setting the `open`\n * property to false.\n /\n close(action = '') {\n this.currentAction = action;\n this.open = false;\n }\n\n /\n Opens and shows the dialog if it is closed; otherwise closes it.\n /\n toggleShow() {\n if (this.open) {\n this.close(this.currentAction);\n } else {\n this.show();\n }\n }\n\n private getContentScrollInfo() {\n if (!this.hasUpdated \|\| !this.contentElement) {\n return {isScrollable: false, isAtScrollTop: true, isAtScrollBottom: true};\n }\n const {scrollTop, scrollHeight, offsetHeight, clientHeight} =\n this.contentElement;\n return {\n isScrollable: scrollHeight > offsetHeight,\n isAtScrollTop: scrollTop === 0,\n isAtScrollBottom:\n Math.abs(Math.round(scrollHeight - scrollTop) - clientHeight) <= 2\n };\n }\n\n protected override render() {\n const {isScrollable, isAtScrollTop, isAtScrollBottom} =\n this.getContentScrollInfo();\n return html`\n <dialog\n @close=${this.handleDialogDismiss}\n @cancel=${this.handleDialogDismiss}\n @click=${this.handleDialogClick}\n class=\"dialog ${classMap({\n 'stacked': this.stacked,\n 'scrollable': isScrollable,\n 'scroll-divider-header': !isAtScrollTop,\n 'scroll-divider-footer': !isAtScrollBottom,\n 'footerHidden': this.footerHidden\n })}\"\n aria-labelledby=\"header\"\n aria-describedby=\"content\"\n >\n <div class=\"container ${classMap({\n 'dragging': this.dragging\n })}\"\n @pointermove=${this.handlePointerMove}\n @pointerup=${this.handleDragEnd}\n >\n <md-elevation></md-elevation>\n <header class=\"header\">\n <slot name=\"header\">\n <slot name=\"headline-prefix\"></slot>\n <slot name=\"headline\"></slot>\n <slot name=\"headline-suffix\"></slot>\n </slot>\n </header>\n <section class=\"content\" @scroll=${this.handleContentScroll}>\n <slot></slot>\n </section>\n <footer class=\"footer\">\n <slot name=\"footer\"></slot>\n </footer>\n </div>\n </dialog>`;\n }\n\n protected override willUpdate(changed: PropertyValues) {\n if (changed.has('open')) {\n this.opening = this.open;\n // only closing if was opened previously...\n this.closing = !this.open && changed.get('open');\n }\n if (changed.has('fullscreen') \|\| changed.has('fullscreenBreakpoint')) {\n this.updateFullscreen();\n }\n }\n\n protected override firstUpdated() {\n // Update when content size changes to show/hide scroll dividers.\n new ResizeObserver(() => {\n if (this.showingOpen) {\n this.requestUpdate();\n }\n }).observe(this.contentElement!);\n }\n\n protected override updated(changed: PropertyValues) {\n if (changed.get('draggable') && !this.draggable) {\n this.style.removeProperty('--_container-drag-inline-start');\n this.style.removeProperty('--_container-drag-block-start');\n }\n // Reflect internal state to facilitate styling.\n this.reflectStateProp(changed, 'opening', this.opening);\n this.reflectStateProp(changed, 'closing', this.closing);\n this.reflectStateProp(\n changed, 'showingFullscreen', this.showingFullscreen,\n 'showing-fullscreen');\n this.reflectStateProp(\n changed, 'showingOpen', this.showingOpen, 'showing-open');\n if (!changed.has('open')) {\n return;\n }\n // prevent body scrolling early only when opening to avoid layout\n // shift when closing.\n if (!this.modeless && this.open) {\n Dialog.setDocumentScrollingDisabled(this.open);\n }\n if (this.open) {\n this.contentElement!.scrollTop = 0;\n if (this.modeless) {\n this.dialogElement!.show();\n } else {\n // Note, native focus handling fails when focused element is in an\n // overflow: auto container.\n this.dialogElement!.showModal();\n }\n }\n // Avoids dispatching initial state.\n const shouldDispatchAction = changed.get('open') !== undefined;\n this.performTransition(shouldDispatchAction);\n }\n\n /\n Internal state is reflected here as attributes to effect styling. This\n * could be done via internal classes, but it's published on the host\n * to facilitate the (currently undocumented) possibility of customizing\n * styling of user content based on these states.\n * Note, in the future this could be done with `:state(...)` when browser\n * support improves.\n /\n private reflectStateProp(\n changed: PropertyValues, key: string, value: unknown,\n attribute?: string) {\n attribute ??= key;\n if (!changed.has(key)) {\n return;\n }\n if (value) {\n this.setAttribute(attribute, '');\n } else {\n this.removeAttribute(attribute);\n }\n }\n\n private dialogClosedResolver?: () => void;\n\n private async performTransition(shouldDispatchAction: boolean) {\n // TODO: pause here only to avoid a double update warning.\n await this.updateComplete;\n this.showingOpen = this.open;\n if (shouldDispatchAction) {\n this.dispatchActionEvent(this.open ? 'opening' : 'closing');\n }\n // Compute desired transition duration.\n const duration = msFromTimeCSSValue(getComputedStyle(this).getPropertyValue(\n this.open ? OPENING_TRANSITION_PROP : CLOSING_TRANSITION_PROP));\n let promise = this.updateComplete;\n if (duration > 0) {\n promise = new Promise((r) => {\n setTimeout(r, duration);\n });\n }\n await promise;\n this.opening = false;\n this.closing = false;\n if (!this.open && this.dialogElement?.open) {\n // Closing the dialog triggers an asynchronous `close` event.\n // It's important to wait for this event to fire since it changes the\n // state of `open` to false.\n // Without waiting, this element's `closed` event can be called before\n // the dialog's `close` event, which is problematic since the user\n // can set `open` in the `closed` event.\n // The timing of the event appears to vary via browser and does not\n // seem to resolve by \"task\" timing; therefore an explicit promise is\n // used.\n const closedPromise = new Promise<void>(resolve => {\n this.dialogClosedResolver = resolve;\n });\n this.dialogElement?.close(this.currentAction \|\| this.defaultAction);\n await closedPromise;\n // enable scrolling late to avoid layout shift when closing\n if (!this.modeless) {\n Dialog.setDocumentScrollingDisabled(this.open);\n }\n }\n // Focus initial element.\n if (this.open) {\n this.focus();\n }\n if (shouldDispatchAction) {\n this.dispatchActionEvent(this.open ? 'opened' : 'closed');\n }\n this.currentAction = undefined;\n }\n\n private dispatchActionEvent(type: string) {\n const detail = {action: this.open ? 'none' : this.currentAction};\n this.dispatchEvent(new CustomEvent(type, {detail, bubbles: true}));\n }\n\n / Live media query for matching user specified fullscreen breakpoint. /\n private fullscreenQuery?: MediaQueryList;\n private fullscreenQueryListener:\n ((e: MediaQueryListEvent) => void)\|undefined = undefined;\n private updateFullscreen() {\n if (this.fullscreenQuery !== undefined) {\n this.fullscreenQuery.removeEventListener(\n 'change', this.fullscreenQueryListener!);\n this.fullscreenQuery = this.fullscreenQueryListener = undefined;\n }\n if (!this.fullscreen) {\n this.showingFullscreen = false;\n return;\n }\n this.fullscreenQuery = window.matchMedia(this.fullscreenBreakpoint);\n this.fullscreenQuery.addEventListener(\n 'change',\n (this.fullscreenQueryListener = (event: MediaQueryListEvent) => {\n this.showingFullscreen = event.matches;\n }));\n this.showingFullscreen = this.fullscreenQuery.matches;\n }\n\n // handles native close/cancel events and we just ensure\n // internal state is in sync.\n private handleDialogDismiss(e: Event) {\n if (e.type === 'cancel') {\n this.currentAction = this.escapeKeyAction;\n // Prevents the <dialog> element from closing when\n // `escapeKeyAction` is set to an empty string.\n // It also early returns and avoids <md-dialog> internal state\n // changes.\n if (this.escapeKeyAction === '') {\n e.preventDefault();\n return;\n }\n }\n this.dialogClosedResolver?.();\n this.dialogClosedResolver = undefined;\n this.open = false;\n this.opening = false;\n this.closing = false;\n }\n\n private handleDialogClick(e: Event) {\n if (!this.open) {\n return;\n }\n this.currentAction =\n (e.target as Element).getAttribute(this.actionAttribute) ??\n (!this.modeless && this.containerElement &&\n !e.composedPath().includes(this.containerElement) ?\n this.scrimClickAction :\n '');\n if (this.currentAction !== '') {\n this.close(this.currentAction);\n }\n }\n\n / This allows the dividers to dynamically show based on scrolling. */\n private handleContentScroll() {\n this.throttle('scroll', () => {\n this.requestUpdate();\n });\n }\n\n private getFocusElement(): HTMLElement\|null {\n const selector = `[${this.focusAttribute}]`;\n const slotted = [this.footerSlot, this.contentSlot].flatMap(\n slot => slot.assignedElements({flatten: true}));\n for (const el of slotted) {\n const focusEl = el.matches(selector) ? el : el.querySelector(selector);\n if (focusEl) {\n return focusEl as HTMLElement;\n }\n }\n return null;\n }\n\n override focus() {\n this.getFocusElement()?.focus();\n }\n\n override blur() {\n this.getFocusElement()?.blur();\n }\n\n private canStartDrag(e: PointerEvent) {\n if (this.draggable === false \|\| e.defaultPrevented \|\| !(e.buttons & 1) \|\|\n !this.headerElement \|\| !e.composedPath().includes(this.headerElement)) {\n return false;\n }\n return true;\n }\n\n private handlePointerMove(e: PointerEvent) {\n if (!this.dragging && !this.canStartDrag(e) \|\| !this.containerElement) {\n return;\n }\n const {top, left, height, width} =\n this.containerElement.getBoundingClientRect();\n if (!this.dragging) {\n this.containerElement.setPointerCapture(e.pointerId);\n this.dragging = true;\n const {x, y} = e;\n this.dragInfo = [x, y, top, left];\n }\n const [sx, sy, st, sl] = this.dragInfo ?? [0, 0, 0, 0];\n const dx = e.x - sx;\n const dy = e.y - sy;\n const ml = window.innerWidth - width - this.dragMargin;\n const mt = window.innerHeight - height - this.dragMargin;\n const l = Math.max(this.dragMargin, Math.min(ml, dx + sl));\n const t = Math.max(this.dragMargin, Math.min(mt, dy + st));\n this.style.setProperty('--_container-drag-inline-start', `${l}px`);\n this.style.setProperty('--_container-drag-block-start', `${t}px`);\n }\n\n private handleDragEnd(e: PointerEvent) {\n if (!this.dragging) {\n return;\n }\n this.containerElement?.releasePointerCapture(e.pointerId);\n this.dragging = false;\n this.dragInfo = undefined;\n }\n}\n"]}
1	+ {"version":3,"file":"dialog.js","sourceRoot":"","sources":["dialog.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n /\n\nimport '../../elevation/elevation.js';\n\nimport {html, LitElement, PropertyValues} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {redispatchEvent} from '../../internal/controller/events.js';\nimport {createThrottle, msFromTimeCSSValue} from '../../internal/motion/animation.js';\n\n// This is required for decorators.\n// tslint:disable:no-new-decorators\n\n/\n Default close action.\n /\nexport const CLOSE_ACTION = 'close';\n\nconst OPENING_TRANSITION_PROP = '--_opening-transition-duration';\nconst CLOSING_TRANSITION_PROP = '--_closing-transition-duration';\n\n/\n A dialog component.\n * \n * @fires opening Dispatched when the dialog is opening before any animations.\n * @fires opened Dispatched when the dialog has opened after any animations.\n * @fires closing Dispatched when the dialog is closing before any animations.\n * @fires closed Dispatched when the dialog has closed after any animations.\n * @fires cancel The native HTMLDialogElement cancel event.\n /\nexport class Dialog extends LitElement {\n private static preventedScrollingCount = 0;\n private static scrollbarTester: HTMLDivElement;\n\n private static setDocumentScrollingDisabled(disabled = false) {\n let {preventedScrollingCount, scrollbarTester} = Dialog;\n Dialog.preventedScrollingCount = preventedScrollingCount =\n Math.max(preventedScrollingCount + (Number(disabled) \|\| -1), 0);\n const shouldPrevent = Boolean(preventedScrollingCount);\n const {style} = document.body;\n if (shouldPrevent && style.overflow === 'hidden') {\n return;\n }\n if (scrollbarTester === undefined) {\n Dialog.scrollbarTester = scrollbarTester = document.createElement('div');\n scrollbarTester.style.cssText =\n `position: absolute; height: 0; width: 100%; visibility: hidden; pointer-events: none;`;\n }\n // Appends an element to see if its offsetWidth changes when overflow is\n // altered. If it does, then add end inline padding to restore the width to\n // avoid a visible layout shift.\n document.body.append(scrollbarTester);\n const {offsetWidth} = scrollbarTester;\n style.overflow = shouldPrevent ? 'hidden' : '';\n const scrollbarWidth = scrollbarTester.offsetWidth - offsetWidth;\n scrollbarTester.remove();\n style.paddingInlineEnd = shouldPrevent ? `${scrollbarWidth}px` : '';\n }\n\n /\n Opens the dialog when set to `true` and closes it when set to `false`.\n /\n @property({type: Boolean}) open = false;\n\n /\n Setting fullscreen displays the dialog fullscreen on small screens.\n * This can be customized via the `fullscreenBreakpoint` property.\n * When showing fullscreen, the header will take up less vertical space, and\n * the dialog will have a `showing-fullscreen`attribute, allowing content to\n * be styled in this state.\n \n Dialogs can be sized by setting:\n \n * --md-dialog-container-min-block-size\n * * --md-dialog-container-max-block-size\n * * --md-dialog-container-min-inline-size\n * * --md-dialog-container-max-inline-size\n \n These are typically configured via media queries and are independent of the\n * fullscreen setting.\n /\n @property({type: Boolean}) fullscreen = false;\n\n /\n A media query string specifying the breakpoint at which the dialog\n * should be shown fullscreen. Note, this only applies when the `fullscreen`\n * property is set.\n \n By default, the dialog is shown fullscreen on screens less than 600px wide\n * or 400px tall.\n /\n @property({attribute: 'fullscreen-breakpoint'})\n fullscreenBreakpoint = '(max-width: 600px), (max-height: 400px)';\n\n /\n Hides the dialog footer, making any content slotted into the footer\n * inaccessible.\n /\n @property({type: Boolean, attribute: 'footer-hidden'}) footerHidden = false;\n\n /\n Renders footer content in a vertically stacked alignment rather than the\n * normal horizontal alignment.\n /\n @property({type: Boolean}) stacked = false;\n\n /\n When the dialog is closed it disptaches `closing` and `closed` events.\n * These events have an action property which has a default value of\n * the value of this property. Specific actions have explicit values but when\n * a value is not specified, the default is used. For example, clicking the\n * scrim, pressing escape, or clicking a button with an action attribute set\n * produce an explicit action.\n \n Defaults to `close`.\n /\n @property({attribute: 'default-action'}) defaultAction = CLOSE_ACTION;\n\n /\n The name of an attribute which can be placed on any element slotted into\n * the dialog. If an element has an action attribute set, clicking it will\n * close the dialog and the `closing` and `closed` events dispatched will\n * have their action property set the value of this attribute on the\n * clicked element.The default value is `dialog-action`. For example,\n \n <md-dialog>\n * Content\n * <md-filled-button slot=\"footer\" dialog-action=\"buy\">\n * Buy\n * </md-filled-button>\n * </md-dialog>\n /\n @property({attribute: 'action-attribute'}) actionAttribute = 'dialog-action';\n\n /\n When the dialog is opened, it will focus the first element which has\n * an attribute name matching this property. The default value is\n * `dialogFocus`. For example:\n \n <md-dialog>\n * <md-filled-text-field\n * label=\"Enter some text\"\n * dialog-focus\n * >\n * </md-filled-text-field>\n * </md-dialog>\n /\n @property({attribute: 'focus-attribute'}) focusAttribute = 'dialog-focus';\n\n /\n Clicking on the scrim surrounding the dialog closes the dialog.\n * The `closing` and `closed` events this produces have an `action` property\n * which is the value of this property and defaults to `close`.\n /\n @property({attribute: 'scrim-click-action'}) scrimClickAction = CLOSE_ACTION;\n\n /\n Pressing the `escape` key while the dialog is open closes the dialog.\n * The `closing` and `closed` events this produces have an `action` property\n * which is the value of this property and defaults to `close`.\n /\n @property({attribute: 'escape-key-action'}) escapeKeyAction = CLOSE_ACTION;\n\n /\n When opened, the dialog is displayed modeless or non-modal. This\n * allows users to interact with content outside the dialog without\n * closing the dialog and does not display the scrim around the dialog.\n /\n @property({type: Boolean, reflect: true}) modeless = false;\n\n /\n Set to make the dialog position draggable.\n /\n @property({type: Boolean}) override draggable = false;\n\n private readonly throttle = createThrottle();\n\n @query('.dialog', true)\n private readonly dialogElement!: HTMLDialogElement\|null;\n\n // slots tracked to find focusable elements.\n @query('slot[name=footer]', true)\n private readonly footerSlot!: HTMLSlotElement;\n @query('slot:not([name])', true)\n private readonly contentSlot!: HTMLSlotElement;\n // for scrolling related styling\n @query(`.content`, true)\n private readonly contentElement!: HTMLDivElement\|null;\n // used to determine container size for dragging\n @query(`.container`, true)\n private readonly containerElement!: HTMLDivElement\|null;\n // used to determine where users can drag from.\n @query(`.header`, true) private readonly headerElement!: HTMLDivElement\|null;\n\n /\n Private properties that reflect for styling manually in `updated`.\n /\n @state() private showingFullscreen = false;\n @state() private showingOpen = false;\n @state() private opening = false;\n @state() private closing = false;\n\n /\n Transition kind. Supported options include: grow, shrink, grow-down,\n * grow-up, grow-left, and grow-right.\n \n Defaults to grow-down.\n /\n @property({reflect: true}) transition = 'grow-down';\n\n private currentAction: string\|undefined;\n\n @state() private dragging = false;\n private readonly dragMargin = 8;\n private dragInfo?: [number, number, number, number]\|undefined;\n\n /\n Opens and shows the dialog. This is equivalent to setting the `open`\n * property to true.\n /\n show() {\n this.open = true;\n }\n\n /\n Closes the dialog. This is equivalent to setting the `open`\n * property to false.\n /\n close(action = '') {\n this.currentAction = action;\n this.open = false;\n }\n\n /\n Opens and shows the dialog if it is closed; otherwise closes it.\n /\n toggleShow() {\n if (this.open) {\n this.close(this.currentAction);\n } else {\n this.show();\n }\n }\n\n private getContentScrollInfo() {\n if (!this.hasUpdated \|\| !this.contentElement) {\n return {isScrollable: false, isAtScrollTop: true, isAtScrollBottom: true};\n }\n const {scrollTop, scrollHeight, offsetHeight, clientHeight} =\n this.contentElement;\n return {\n isScrollable: scrollHeight > offsetHeight,\n isAtScrollTop: scrollTop === 0,\n isAtScrollBottom:\n Math.abs(Math.round(scrollHeight - scrollTop) - clientHeight) <= 2\n };\n }\n\n protected override render() {\n const {isScrollable, isAtScrollTop, isAtScrollBottom} =\n this.getContentScrollInfo();\n return html`\n <dialog\n @close=${this.handleDialogDismiss}\n @cancel=${this.handleDialogDismiss}\n @click=${this.handleDialogClick}\n class=\"dialog ${classMap({\n 'stacked': this.stacked,\n 'scrollable': isScrollable,\n 'scroll-divider-header': !isAtScrollTop,\n 'scroll-divider-footer': !isAtScrollBottom,\n 'footerHidden': this.footerHidden\n })}\"\n aria-labelledby=\"header\"\n aria-describedby=\"content\"\n >\n <div class=\"container ${classMap({\n 'dragging': this.dragging\n })}\"\n @pointermove=${this.handlePointerMove}\n @pointerup=${this.handleDragEnd}\n >\n <md-elevation></md-elevation>\n <header class=\"header\">\n <slot name=\"header\">\n <slot name=\"headline-prefix\"></slot>\n <slot name=\"headline\"></slot>\n <slot name=\"headline-suffix\"></slot>\n </slot>\n </header>\n <section class=\"content\" @scroll=${this.handleContentScroll}>\n <slot></slot>\n </section>\n <footer class=\"footer\">\n <slot name=\"footer\"></slot>\n </footer>\n </div>\n </dialog>`;\n }\n\n protected override willUpdate(changed: PropertyValues) {\n if (changed.has('open')) {\n this.opening = this.open;\n // only closing if was opened previously...\n this.closing = !this.open && changed.get('open');\n }\n if (changed.has('fullscreen') \|\| changed.has('fullscreenBreakpoint')) {\n this.updateFullscreen();\n }\n }\n\n protected override firstUpdated() {\n // Update when content size changes to show/hide scroll dividers.\n new ResizeObserver(() => {\n if (this.showingOpen) {\n this.requestUpdate();\n }\n }).observe(this.contentElement!);\n }\n\n protected override updated(changed: PropertyValues) {\n if (changed.get('draggable') && !this.draggable) {\n this.style.removeProperty('--_container-drag-inline-start');\n this.style.removeProperty('--_container-drag-block-start');\n }\n // Reflect internal state to facilitate styling.\n this.reflectStateProp(changed, 'opening', this.opening);\n this.reflectStateProp(changed, 'closing', this.closing);\n this.reflectStateProp(\n changed, 'showingFullscreen', this.showingFullscreen,\n 'showing-fullscreen');\n this.reflectStateProp(\n changed, 'showingOpen', this.showingOpen, 'showing-open');\n if (!changed.has('open')) {\n return;\n }\n // prevent body scrolling early only when opening to avoid layout\n // shift when closing.\n if (!this.modeless && this.open) {\n Dialog.setDocumentScrollingDisabled(this.open);\n }\n if (this.open) {\n this.contentElement!.scrollTop = 0;\n if (this.modeless) {\n this.dialogElement!.show();\n } else {\n // Note, native focus handling fails when focused element is in an\n // overflow: auto container.\n this.dialogElement!.showModal();\n }\n }\n // Avoids dispatching initial state.\n const shouldDispatchAction = changed.get('open') !== undefined;\n this.performTransition(shouldDispatchAction);\n }\n\n /\n Internal state is reflected here as attributes to effect styling. This\n * could be done via internal classes, but it's published on the host\n * to facilitate the (currently undocumented) possibility of customizing\n * styling of user content based on these states.\n * Note, in the future this could be done with `:state(...)` when browser\n * support improves.\n /\n private reflectStateProp(\n changed: PropertyValues, key: string, value: unknown,\n attribute?: string) {\n attribute ??= key;\n if (!changed.has(key)) {\n return;\n }\n if (value) {\n this.setAttribute(attribute, '');\n } else {\n this.removeAttribute(attribute);\n }\n }\n\n private dialogClosedResolver?: () => void;\n\n private async performTransition(shouldDispatchAction: boolean) {\n // TODO: pause here only to avoid a double update warning.\n await this.updateComplete;\n // Focus initial element.\n if (this.open) {\n this.focus();\n }\n this.showingOpen = this.open;\n if (shouldDispatchAction) {\n this.dispatchActionEvent(this.open ? 'opening' : 'closing');\n }\n // Compute desired transition duration.\n const duration = msFromTimeCSSValue(getComputedStyle(this).getPropertyValue(\n this.open ? OPENING_TRANSITION_PROP : CLOSING_TRANSITION_PROP));\n let promise = this.updateComplete;\n if (duration > 0) {\n promise = new Promise((r) => {\n setTimeout(r, duration);\n });\n }\n await promise;\n this.opening = false;\n this.closing = false;\n if (!this.open && this.dialogElement?.open) {\n // Closing the dialog triggers an asynchronous `close` event.\n // It's important to wait for this event to fire since it changes the\n // state of `open` to false.\n // Without waiting, this element's `closed` event can be called before\n // the dialog's `close` event, which is problematic since the user\n // can set `open` in the `closed` event.\n // The timing of the event appears to vary via browser and does not\n // seem to resolve by \"task\" timing; therefore an explicit promise is\n // used.\n const closedPromise = new Promise<void>(resolve => {\n this.dialogClosedResolver = resolve;\n });\n this.dialogElement?.close(this.currentAction \|\| this.defaultAction);\n await closedPromise;\n // enable scrolling late to avoid layout shift when closing\n if (!this.modeless) {\n Dialog.setDocumentScrollingDisabled(this.open);\n }\n }\n if (shouldDispatchAction) {\n this.dispatchActionEvent(this.open ? 'opened' : 'closed');\n }\n this.currentAction = undefined;\n }\n\n private dispatchActionEvent(type: string) {\n const detail = {action: this.open ? 'none' : this.currentAction};\n this.dispatchEvent(new CustomEvent(type, {detail, bubbles: true}));\n }\n\n / Live media query for matching user specified fullscreen breakpoint. /\n private fullscreenQuery?: MediaQueryList;\n private fullscreenQueryListener:\n ((e: MediaQueryListEvent) => void)\|undefined = undefined;\n private updateFullscreen() {\n if (this.fullscreenQuery !== undefined) {\n this.fullscreenQuery.removeEventListener(\n 'change', this.fullscreenQueryListener!);\n this.fullscreenQuery = this.fullscreenQueryListener = undefined;\n }\n if (!this.fullscreen) {\n this.showingFullscreen = false;\n return;\n }\n this.fullscreenQuery = window.matchMedia(this.fullscreenBreakpoint);\n this.fullscreenQuery.addEventListener(\n 'change',\n (this.fullscreenQueryListener = (event: MediaQueryListEvent) => {\n this.showingFullscreen = event.matches;\n }));\n this.showingFullscreen = this.fullscreenQuery.matches;\n }\n\n // handles native close/cancel events and we just ensure\n // internal state is in sync.\n private handleDialogDismiss(e: Event) {\n if (e.type === 'cancel') {\n this.currentAction = this.escapeKeyAction;\n // Prevents the <dialog> element from closing when\n // `escapeKeyAction` is set to an empty string.\n // It also early returns and avoids <md-dialog> internal state\n // changes.\n if (this.escapeKeyAction === '') {\n e.preventDefault();\n return;\n }\n }\n this.dialogClosedResolver?.();\n this.dialogClosedResolver = undefined;\n this.open = false;\n this.opening = false;\n this.closing = false;\n redispatchEvent(this, e);\n }\n\n private handleDialogClick(e: Event) {\n if (!this.open) {\n return;\n }\n this.currentAction =\n (e.target as Element).getAttribute(this.actionAttribute) ??\n (!this.modeless && this.containerElement &&\n !e.composedPath().includes(this.containerElement) ?\n this.scrimClickAction :\n '');\n if (this.currentAction !== '') {\n this.close(this.currentAction);\n }\n }\n\n / This allows the dividers to dynamically show based on scrolling. */\n private handleContentScroll() {\n this.throttle('scroll', () => {\n this.requestUpdate();\n });\n }\n\n private getFocusElement(): HTMLElement\|null {\n const selector = `[${this.focusAttribute}]`;\n const slotted = [this.footerSlot, this.contentSlot].flatMap(\n slot => slot.assignedElements({flatten: true}));\n for (const el of slotted) {\n const focusEl = el.matches(selector) ? el : el.querySelector(selector);\n if (focusEl) {\n return focusEl as HTMLElement;\n }\n }\n return null;\n }\n\n override focus() {\n this.getFocusElement()?.focus();\n }\n\n override blur() {\n this.getFocusElement()?.blur();\n }\n\n private canStartDrag(e: PointerEvent) {\n if (this.draggable === false \|\| e.defaultPrevented \|\| !(e.buttons & 1) \|\|\n !this.headerElement \|\| !e.composedPath().includes(this.headerElement)) {\n return false;\n }\n return true;\n }\n\n private handlePointerMove(e: PointerEvent) {\n if (!this.dragging && !this.canStartDrag(e) \|\| !this.containerElement) {\n return;\n }\n const {top, left, height, width} =\n this.containerElement.getBoundingClientRect();\n if (!this.dragging) {\n this.containerElement.setPointerCapture(e.pointerId);\n this.dragging = true;\n const {x, y} = e;\n this.dragInfo = [x, y, top, left];\n }\n const [sx, sy, st, sl] = this.dragInfo ?? [0, 0, 0, 0];\n const dx = e.x - sx;\n const dy = e.y - sy;\n const ml = window.innerWidth - width - this.dragMargin;\n const mt = window.innerHeight - height - this.dragMargin;\n const l = Math.max(this.dragMargin, Math.min(ml, dx + sl));\n const t = Math.max(this.dragMargin, Math.min(mt, dy + st));\n this.style.setProperty('--_container-drag-inline-start', `${l}px`);\n this.style.setProperty('--_container-drag-block-start', `${t}px`);\n }\n\n private handleDragEnd(e: PointerEvent) {\n if (!this.dragging) {\n return;\n }\n this.containerElement?.releasePointerCapture(e.pointerId);\n this.dragging = false;\n this.dragInfo = undefined;\n }\n}\n"]}

package/fab/branded-fab.d.ts CHANGED Viewed

@@ -51,6 +51,7 @@ export declare class MdBrandedFab extends Fab {
         lowered: boolean;
         large: boolean;
         extended: boolean;
+        hasIcon: boolean;
     };
     static styles: import("lit").CSSResult[];
 }

package/fab/lib/_fab.scss CHANGED Viewed

@@ -169,6 +169,18 @@
     }
   }
+  .fab:not(.hasIcon) {
+    padding-inline-start: 20px;
+  }
+  .fab:not(.hasIcon) .icon {
+    display: none;
+  }
+  .fab:not(.hasIcon) .label {
+    padding-inline-start: 0;
+  }
   .fab.small {
     width: var(--_small-container-width);
     height: var(--_small-container-height);

package/fab/lib/fab-styles.css.js CHANGED Viewed

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `:host{--_container-color: var(--md-fab-container-color, var(--md-sys-color-surface-container-high, #ece6f0));--_container-elevation: var(--md-fab-container-elevation, 3);--_container-height: var(--md-fab-container-height, 56px);--_container-shadow-color: var(--md-fab-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-shape: var(--md-fab-container-shape, 16px);--_container-width: var(--md-fab-container-width, 56px);--_focus-container-elevation: var(--md-fab-focus-container-elevation, 3);--_focus-icon-color: var(--md-fab-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-container-elevation: var(--md-fab-hover-container-elevation, 4);--_hover-icon-color: var(--md-fab-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-color: var(--md-fab-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-opacity: var(--md-fab-hover-state-layer-opacity, 0.08);--_icon-color: var(--md-fab-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-size: var(--md-fab-icon-size, 24px);--_lowered-container-color: var(--md-fab-lowered-container-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_lowered-container-elevation: var(--md-fab-lowered-container-elevation, 1);--_lowered-focus-container-elevation: var(--md-fab-lowered-focus-container-elevation, 1);--_lowered-hover-container-elevation: var(--md-fab-lowered-hover-container-elevation, 2);--_lowered-pressed-container-elevation: var(--md-fab-lowered-pressed-container-elevation, 1);--_pressed-container-elevation: var(--md-fab-pressed-container-elevation, 3);--_pressed-icon-color: var(--md-fab-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-color: var(--md-fab-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-fab-pressed-state-layer-opacity, 0.12);--_focus-label-text-color: var(--md-fab-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-label-text-color: var(--md-fab-hover-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-color: var(--md-fab-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-type: var(--md-fab-label-text-type, var(--md-sys-typescale-label-large, 500 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto)));--_large-container-height: var(--md-fab-large-container-height, 96px);--_large-container-shape: var(--md-fab-large-container-shape, 28px);--_large-container-width: var(--md-fab-large-container-width, 96px);--_large-icon-size: var(--md-fab-large-icon-size, 36px);--_pressed-label-text-color: var(--md-fab-pressed-label-text-color, var(--md-sys-color-primary, #6750a4));--_primary-container-color: var(--md-fab-primary-container-color, var(--md-sys-color-primary-container, #eaddff));--_primary-focus-icon-color: var(--md-fab-primary-focus-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-focus-label-text-color: var(--md-fab-primary-focus-label-text-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-hover-icon-color: var(--md-fab-primary-hover-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-hover-label-text-color: var(--md-fab-primary-hover-label-text-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-hover-state-layer-color: var(--md-fab-primary-hover-state-layer-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-icon-color: var(--md-fab-primary-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-label-text-color: var(--md-fab-primary-label-text-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-pressed-icon-color: var(--md-fab-primary-pressed-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-pressed-label-text-color: var(--md-fab-primary-pressed-label-text-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-pressed-state-layer-color: var(--md-fab-primary-pressed-state-layer-color, var(--md-sys-color-on-primary-container, #21005d));--_secondary-container-color: var(--md-fab-secondary-container-color, var(--md-sys-color-secondary-container, #e8def8));--_secondary-focus-icon-color: var(--md-fab-secondary-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-focus-label-text-color: var(--md-fab-secondary-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-hover-icon-color: var(--md-fab-secondary-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-hover-label-text-color: var(--md-fab-secondary-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-hover-state-layer-color: var(--md-fab-secondary-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-icon-color: var(--md-fab-secondary-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-label-text-color: var(--md-fab-secondary-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-pressed-icon-color: var(--md-fab-secondary-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-pressed-label-text-color: var(--md-fab-secondary-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-pressed-state-layer-color: var(--md-fab-secondary-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_small-container-height: var(--md-fab-small-container-height, 40px);--_small-container-shape: var(--md-fab-small-container-shape, 12px);--_small-container-width: var(--md-fab-small-container-width, 40px);--_small-icon-size: var(--md-fab-small-icon-size, 24px);--_tertiary-container-color: var(--md-fab-tertiary-container-color, var(--md-sys-color-tertiary-container, #ffd8e4));--_tertiary-focus-icon-color: var(--md-fab-tertiary-focus-icon-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-focus-label-text-color: var(--md-fab-tertiary-focus-label-text-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-hover-icon-color: var(--md-fab-tertiary-hover-icon-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-hover-label-text-color: var(--md-fab-tertiary-hover-label-text-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-hover-state-layer-color: var(--md-fab-tertiary-hover-state-layer-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-icon-color: var(--md-fab-tertiary-icon-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-label-text-color: var(--md-fab-tertiary-label-text-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-pressed-icon-color: var(--md-fab-tertiary-pressed-icon-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-pressed-label-text-color: var(--md-fab-tertiary-pressed-label-text-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-pressed-state-layer-color: var(--md-fab-tertiary-pressed-state-layer-color, var(--md-sys-color-on-tertiary-container, #31111d));--_container-shape-start-start: var( --md-fab-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-fab-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-fab-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-fab-container-shape-end-start, var(--_container-shape) );--_large-container-shape-start-start: var( --md-fab-large-container-shape-start-start, var(--_large-container-shape) );--_large-container-shape-start-end: var( --md-fab-large-container-shape-start-end, var(--_large-container-shape) );--_large-container-shape-end-end: var( --md-fab-large-container-shape-end-end, var(--_large-container-shape) );--_large-container-shape-end-start: var( --md-fab-large-container-shape-end-start, var(--_large-container-shape) );--_small-container-shape-start-start: var( --md-fab-small-container-shape-start-start, var(--_small-container-shape) );--_small-container-shape-start-end: var( --md-fab-small-container-shape-start-end, var(--_small-container-shape) );--_small-container-shape-end-end: var( --md-fab-small-container-shape-end-end, var(--_small-container-shape) );--_small-container-shape-end-start: var( --md-fab-small-container-shape-end-start, var(--_small-container-shape) )}.fab .icon ::slotted(*){color:var(--_icon-color)}.fab:focus{color:var(--_focus-icon-color)}.fab:hover{color:var(--_hover-icon-color)}.fab:active{color:var(--_pressed-icon-color)}.fab.primary{background-color:var(--_primary-container-color);--md-ripple-hover-color: var(--_primary-hover-state-layer-color);--md-ripple-pressed-color: var(--_primary-pressed-state-layer-color)}.fab.primary .icon ::slotted(*){color:var(--_primary-icon-color)}.fab.primary:focus{color:var(--_primary-focus-icon-color)}.fab.primary:hover{color:var(--_primary-hover-icon-color)}.fab.primary:active{color:var(--_primary-pressed-icon-color)}.fab.primary .label{color:var(--_primary-label-text-color)}.fab:hover .fab.primary .label{color:var(--_primary-hover-label-text-color)}.fab:focus .fab.primary .label{color:var(--_primary-focus-label-text-color)}.fab:active .fab.primary .label{color:var(--_primary-pressed-label-text-color)}.fab.secondary{background-color:var(--_secondary-container-color);--md-ripple-hover-color: var(--_secondary-hover-state-layer-color);--md-ripple-pressed-color: var(--_secondary-pressed-state-layer-color)}.fab.secondary .icon ::slotted(*){color:var(--_secondary-icon-color)}.fab.secondary:focus{color:var(--_secondary-focus-icon-color)}.fab.secondary:hover{color:var(--_secondary-hover-icon-color)}.fab.secondary:active{color:var(--_secondary-pressed-icon-color)}.fab.secondary .label{color:var(--_secondary-label-text-color)}.fab:hover .fab.secondary .label{color:var(--_secondary-hover-label-text-color)}.fab:focus .fab.secondary .label{color:var(--_secondary-focus-label-text-color)}.fab:active .fab.secondary .label{color:var(--_secondary-pressed-label-text-color)}.fab.tertiary{background-color:var(--_tertiary-container-color);--md-ripple-hover-color: var(--_tertiary-hover-state-layer-color);--md-ripple-pressed-color: var(--_tertiary-pressed-state-layer-color)}.fab.tertiary .icon ::slotted(*){color:var(--_tertiary-icon-color)}.fab.tertiary:focus{color:var(--_tertiary-focus-icon-color)}.fab.tertiary:hover{color:var(--_tertiary-hover-icon-color)}.fab.tertiary:active{color:var(--_tertiary-pressed-icon-color)}.fab.tertiary .label{color:var(--_tertiary-label-text-color)}.fab:hover .fab.tertiary .label{color:var(--_tertiary-hover-label-text-color)}.fab:focus .fab.tertiary .label{color:var(--_tertiary-focus-label-text-color)}.fab:active .fab.tertiary .label{color:var(--_tertiary-pressed-label-text-color)}.fab.small{width:var(--_small-container-width);height:var(--_small-container-height)}.fab.small .icon ::slotted(*){width:var(--_small-icon-size);height:var(--_small-icon-size);font-size:var(--_small-icon-size)}.fab.small,.fab.small .ripple{border-start-start-radius:var(--_small-container-shape-start-start);border-start-end-radius:var(--_small-container-shape-start-end);border-end-start-radius:var(--_small-container-shape-end-start);border-end-end-radius:var(--_small-container-shape-end-end);--md-focus-ring-shape-start-start: var(--_small-container-shape-start-start);--md-focus-ring-shape-start-end: var(--_small-container-shape-start-end);--md-focus-ring-shape-end-end: var(--_small-container-shape-end-end);--md-focus-ring-shape-end-start: var(--_small-container-shape-end-start)}/*# sourceMappingURL=fab-styles.css.map */
+export const styles = css `:host{--_container-color: var(--md-fab-container-color, var(--md-sys-color-surface-container-high, #ece6f0));--_container-elevation: var(--md-fab-container-elevation, 3);--_container-height: var(--md-fab-container-height, 56px);--_container-shadow-color: var(--md-fab-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-shape: var(--md-fab-container-shape, 16px);--_container-width: var(--md-fab-container-width, 56px);--_focus-container-elevation: var(--md-fab-focus-container-elevation, 3);--_focus-icon-color: var(--md-fab-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-container-elevation: var(--md-fab-hover-container-elevation, 4);--_hover-icon-color: var(--md-fab-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-color: var(--md-fab-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-opacity: var(--md-fab-hover-state-layer-opacity, 0.08);--_icon-color: var(--md-fab-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-size: var(--md-fab-icon-size, 24px);--_lowered-container-color: var(--md-fab-lowered-container-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_lowered-container-elevation: var(--md-fab-lowered-container-elevation, 1);--_lowered-focus-container-elevation: var(--md-fab-lowered-focus-container-elevation, 1);--_lowered-hover-container-elevation: var(--md-fab-lowered-hover-container-elevation, 2);--_lowered-pressed-container-elevation: var(--md-fab-lowered-pressed-container-elevation, 1);--_pressed-container-elevation: var(--md-fab-pressed-container-elevation, 3);--_pressed-icon-color: var(--md-fab-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-color: var(--md-fab-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-fab-pressed-state-layer-opacity, 0.12);--_focus-label-text-color: var(--md-fab-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-label-text-color: var(--md-fab-hover-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-color: var(--md-fab-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-type: var(--md-fab-label-text-type, var(--md-sys-typescale-label-large, 500 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto)));--_large-container-height: var(--md-fab-large-container-height, 96px);--_large-container-shape: var(--md-fab-large-container-shape, 28px);--_large-container-width: var(--md-fab-large-container-width, 96px);--_large-icon-size: var(--md-fab-large-icon-size, 36px);--_pressed-label-text-color: var(--md-fab-pressed-label-text-color, var(--md-sys-color-primary, #6750a4));--_primary-container-color: var(--md-fab-primary-container-color, var(--md-sys-color-primary-container, #eaddff));--_primary-focus-icon-color: var(--md-fab-primary-focus-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-focus-label-text-color: var(--md-fab-primary-focus-label-text-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-hover-icon-color: var(--md-fab-primary-hover-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-hover-label-text-color: var(--md-fab-primary-hover-label-text-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-hover-state-layer-color: var(--md-fab-primary-hover-state-layer-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-icon-color: var(--md-fab-primary-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-label-text-color: var(--md-fab-primary-label-text-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-pressed-icon-color: var(--md-fab-primary-pressed-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-pressed-label-text-color: var(--md-fab-primary-pressed-label-text-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-pressed-state-layer-color: var(--md-fab-primary-pressed-state-layer-color, var(--md-sys-color-on-primary-container, #21005d));--_secondary-container-color: var(--md-fab-secondary-container-color, var(--md-sys-color-secondary-container, #e8def8));--_secondary-focus-icon-color: var(--md-fab-secondary-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-focus-label-text-color: var(--md-fab-secondary-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-hover-icon-color: var(--md-fab-secondary-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-hover-label-text-color: var(--md-fab-secondary-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-hover-state-layer-color: var(--md-fab-secondary-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-icon-color: var(--md-fab-secondary-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-label-text-color: var(--md-fab-secondary-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-pressed-icon-color: var(--md-fab-secondary-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-pressed-label-text-color: var(--md-fab-secondary-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-pressed-state-layer-color: var(--md-fab-secondary-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_small-container-height: var(--md-fab-small-container-height, 40px);--_small-container-shape: var(--md-fab-small-container-shape, 12px);--_small-container-width: var(--md-fab-small-container-width, 40px);--_small-icon-size: var(--md-fab-small-icon-size, 24px);--_tertiary-container-color: var(--md-fab-tertiary-container-color, var(--md-sys-color-tertiary-container, #ffd8e4));--_tertiary-focus-icon-color: var(--md-fab-tertiary-focus-icon-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-focus-label-text-color: var(--md-fab-tertiary-focus-label-text-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-hover-icon-color: var(--md-fab-tertiary-hover-icon-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-hover-label-text-color: var(--md-fab-tertiary-hover-label-text-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-hover-state-layer-color: var(--md-fab-tertiary-hover-state-layer-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-icon-color: var(--md-fab-tertiary-icon-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-label-text-color: var(--md-fab-tertiary-label-text-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-pressed-icon-color: var(--md-fab-tertiary-pressed-icon-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-pressed-label-text-color: var(--md-fab-tertiary-pressed-label-text-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-pressed-state-layer-color: var(--md-fab-tertiary-pressed-state-layer-color, var(--md-sys-color-on-tertiary-container, #31111d));--_container-shape-start-start: var( --md-fab-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-fab-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-fab-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-fab-container-shape-end-start, var(--_container-shape) );--_large-container-shape-start-start: var( --md-fab-large-container-shape-start-start, var(--_large-container-shape) );--_large-container-shape-start-end: var( --md-fab-large-container-shape-start-end, var(--_large-container-shape) );--_large-container-shape-end-end: var( --md-fab-large-container-shape-end-end, var(--_large-container-shape) );--_large-container-shape-end-start: var( --md-fab-large-container-shape-end-start, var(--_large-container-shape) );--_small-container-shape-start-start: var( --md-fab-small-container-shape-start-start, var(--_small-container-shape) );--_small-container-shape-start-end: var( --md-fab-small-container-shape-start-end, var(--_small-container-shape) );--_small-container-shape-end-end: var( --md-fab-small-container-shape-end-end, var(--_small-container-shape) );--_small-container-shape-end-start: var( --md-fab-small-container-shape-end-start, var(--_small-container-shape) )}.fab .icon ::slotted(*){color:var(--_icon-color)}.fab:focus{color:var(--_focus-icon-color)}.fab:hover{color:var(--_hover-icon-color)}.fab:active{color:var(--_pressed-icon-color)}.fab.primary{background-color:var(--_primary-container-color);--md-ripple-hover-color: var(--_primary-hover-state-layer-color);--md-ripple-pressed-color: var(--_primary-pressed-state-layer-color)}.fab.primary .icon ::slotted(*){color:var(--_primary-icon-color)}.fab.primary:focus{color:var(--_primary-focus-icon-color)}.fab.primary:hover{color:var(--_primary-hover-icon-color)}.fab.primary:active{color:var(--_primary-pressed-icon-color)}.fab.primary .label{color:var(--_primary-label-text-color)}.fab:hover .fab.primary .label{color:var(--_primary-hover-label-text-color)}.fab:focus .fab.primary .label{color:var(--_primary-focus-label-text-color)}.fab:active .fab.primary .label{color:var(--_primary-pressed-label-text-color)}.fab.secondary{background-color:var(--_secondary-container-color);--md-ripple-hover-color: var(--_secondary-hover-state-layer-color);--md-ripple-pressed-color: var(--_secondary-pressed-state-layer-color)}.fab.secondary .icon ::slotted(*){color:var(--_secondary-icon-color)}.fab.secondary:focus{color:var(--_secondary-focus-icon-color)}.fab.secondary:hover{color:var(--_secondary-hover-icon-color)}.fab.secondary:active{color:var(--_secondary-pressed-icon-color)}.fab.secondary .label{color:var(--_secondary-label-text-color)}.fab:hover .fab.secondary .label{color:var(--_secondary-hover-label-text-color)}.fab:focus .fab.secondary .label{color:var(--_secondary-focus-label-text-color)}.fab:active .fab.secondary .label{color:var(--_secondary-pressed-label-text-color)}.fab.tertiary{background-color:var(--_tertiary-container-color);--md-ripple-hover-color: var(--_tertiary-hover-state-layer-color);--md-ripple-pressed-color: var(--_tertiary-pressed-state-layer-color)}.fab.tertiary .icon ::slotted(*){color:var(--_tertiary-icon-color)}.fab.tertiary:focus{color:var(--_tertiary-focus-icon-color)}.fab.tertiary:hover{color:var(--_tertiary-hover-icon-color)}.fab.tertiary:active{color:var(--_tertiary-pressed-icon-color)}.fab.tertiary .label{color:var(--_tertiary-label-text-color)}.fab:hover .fab.tertiary .label{color:var(--_tertiary-hover-label-text-color)}.fab:focus .fab.tertiary .label{color:var(--_tertiary-focus-label-text-color)}.fab:active .fab.tertiary .label{color:var(--_tertiary-pressed-label-text-color)}.fab:not(.hasIcon){padding-inline-start:20px}.fab:not(.hasIcon) .icon{display:none}.fab:not(.hasIcon) .label{padding-inline-start:0}.fab.small{width:var(--_small-container-width);height:var(--_small-container-height)}.fab.small .icon ::slotted(*){width:var(--_small-icon-size);height:var(--_small-icon-size);font-size:var(--_small-icon-size)}.fab.small,.fab.small .ripple{border-start-start-radius:var(--_small-container-shape-start-start);border-start-end-radius:var(--_small-container-shape-start-end);border-end-start-radius:var(--_small-container-shape-end-start);border-end-end-radius:var(--_small-container-shape-end-end);--md-focus-ring-shape-start-start: var(--_small-container-shape-start-start);--md-focus-ring-shape-start-end: var(--_small-container-shape-start-end);--md-focus-ring-shape-end-end: var(--_small-container-shape-end-end);--md-focus-ring-shape-end-start: var(--_small-container-shape-end-start)}/*# sourceMappingURL=fab-styles.css.map */
 `;
 //# sourceMappingURL=fab-styles.css.js.map

package/fab/lib/fab-styles.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"fab-styles.css.js","sourceRoot":"","sources":["fab-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/*\n @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n /\n import {css} from 'lit';\n export const styles = css`:host{--_container-color: var(--md-fab-container-color, var(--md-sys-color-surface-container-high, #ece6f0));--_container-elevation: var(--md-fab-container-elevation, 3);--_container-height: var(--md-fab-container-height, 56px);--_container-shadow-color: var(--md-fab-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-shape: var(--md-fab-container-shape, 16px);--_container-width: var(--md-fab-container-width, 56px);--_focus-container-elevation: var(--md-fab-focus-container-elevation, 3);--_focus-icon-color: var(--md-fab-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-container-elevation: var(--md-fab-hover-container-elevation, 4);--_hover-icon-color: var(--md-fab-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-color: var(--md-fab-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-opacity: var(--md-fab-hover-state-layer-opacity, 0.08);--_icon-color: var(--md-fab-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-size: var(--md-fab-icon-size, 24px);--_lowered-container-color: var(--md-fab-lowered-container-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_lowered-container-elevation: var(--md-fab-lowered-container-elevation, 1);--_lowered-focus-container-elevation: var(--md-fab-lowered-focus-container-elevation, 1);--_lowered-hover-container-elevation: var(--md-fab-lowered-hover-container-elevation, 2);--_lowered-pressed-container-elevation: var(--md-fab-lowered-pressed-container-elevation, 1);--_pressed-container-elevation: var(--md-fab-pressed-container-elevation, 3);--_pressed-icon-color: var(--md-fab-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-color: var(--md-fab-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-fab-pressed-state-layer-opacity, 0.12);--_focus-label-text-color: var(--md-fab-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-label-text-color: var(--md-fab-hover-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-color: var(--md-fab-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-type: var(--md-fab-label-text-type, var(--md-sys-typescale-label-large, 500 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto)));--_large-container-height: var(--md-fab-large-container-height, 96px);--_large-container-shape: var(--md-fab-large-container-shape, 28px);--_large-container-width: var(--md-fab-large-container-width, 96px);--_large-icon-size: var(--md-fab-large-icon-size, 36px);--_pressed-label-text-color: var(--md-fab-pressed-label-text-color, var(--md-sys-color-primary, #6750a4));--_primary-container-color: var(--md-fab-primary-container-color, var(--md-sys-color-primary-container, #eaddff));--_primary-focus-icon-color: var(--md-fab-primary-focus-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-focus-label-text-color: var(--md-fab-primary-focus-label-text-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-hover-icon-color: var(--md-fab-primary-hover-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-hover-label-text-color: var(--md-fab-primary-hover-label-text-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-hover-state-layer-color: var(--md-fab-primary-hover-state-layer-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-icon-color: var(--md-fab-primary-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-label-text-color: var(--md-fab-primary-label-text-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-pressed-icon-color: var(--md-fab-primary-pressed-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-pressed-label-text-color: var(--md-fab-primary-pressed-label-text-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-pressed-state-layer-color: var(--md-fab-primary-pressed-state-layer-color, var(--md-sys-color-on-primary-container, #21005d));--_secondary-container-color: var(--md-fab-secondary-container-color, var(--md-sys-color-secondary-container, #e8def8));--_secondary-focus-icon-color: var(--md-fab-secondary-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-focus-label-text-color: var(--md-fab-secondary-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-hover-icon-color: var(--md-fab-secondary-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-hover-label-text-color: var(--md-fab-secondary-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-hover-state-layer-color: var(--md-fab-secondary-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-icon-color: var(--md-fab-secondary-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-label-text-color: var(--md-fab-secondary-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-pressed-icon-color: var(--md-fab-secondary-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-pressed-label-text-color: var(--md-fab-secondary-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-pressed-state-layer-color: var(--md-fab-secondary-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_small-container-height: var(--md-fab-small-container-height, 40px);--_small-container-shape: var(--md-fab-small-container-shape, 12px);--_small-container-width: var(--md-fab-small-container-width, 40px);--_small-icon-size: var(--md-fab-small-icon-size, 24px);--_tertiary-container-color: var(--md-fab-tertiary-container-color, var(--md-sys-color-tertiary-container, #ffd8e4));--_tertiary-focus-icon-color: var(--md-fab-tertiary-focus-icon-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-focus-label-text-color: var(--md-fab-tertiary-focus-label-text-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-hover-icon-color: var(--md-fab-tertiary-hover-icon-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-hover-label-text-color: var(--md-fab-tertiary-hover-label-text-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-hover-state-layer-color: var(--md-fab-tertiary-hover-state-layer-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-icon-color: var(--md-fab-tertiary-icon-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-label-text-color: var(--md-fab-tertiary-label-text-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-pressed-icon-color: var(--md-fab-tertiary-pressed-icon-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-pressed-label-text-color: var(--md-fab-tertiary-pressed-label-text-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-pressed-state-layer-color: var(--md-fab-tertiary-pressed-state-layer-color, var(--md-sys-color-on-tertiary-container, #31111d));--_container-shape-start-start: var( --md-fab-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-fab-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-fab-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-fab-container-shape-end-start, var(--_container-shape) );--_large-container-shape-start-start: var( --md-fab-large-container-shape-start-start, var(--_large-container-shape) );--_large-container-shape-start-end: var( --md-fab-large-container-shape-start-end, var(--_large-container-shape) );--_large-container-shape-end-end: var( --md-fab-large-container-shape-end-end, var(--_large-container-shape) );--_large-container-shape-end-start: var( --md-fab-large-container-shape-end-start, var(--_large-container-shape) );--_small-container-shape-start-start: var( --md-fab-small-container-shape-start-start, var(--_small-container-shape) );--_small-container-shape-start-end: var( --md-fab-small-container-shape-start-end, var(--_small-container-shape) );--_small-container-shape-end-end: var( --md-fab-small-container-shape-end-end, var(--_small-container-shape) );--_small-container-shape-end-start: var( --md-fab-small-container-shape-end-start, var(--_small-container-shape) )}.fab .icon ::slotted(){color:var(--_icon-color)}.fab:focus{color:var(--_focus-icon-color)}.fab:hover{color:var(--_hover-icon-color)}.fab:active{color:var(--_pressed-icon-color)}.fab.primary{background-color:var(--_primary-container-color);--md-ripple-hover-color: var(--_primary-hover-state-layer-color);--md-ripple-pressed-color: var(--_primary-pressed-state-layer-color)}.fab.primary .icon ::slotted(){color:var(--_primary-icon-color)}.fab.primary:focus{color:var(--_primary-focus-icon-color)}.fab.primary:hover{color:var(--_primary-hover-icon-color)}.fab.primary:active{color:var(--_primary-pressed-icon-color)}.fab.primary .label{color:var(--_primary-label-text-color)}.fab:hover .fab.primary .label{color:var(--_primary-hover-label-text-color)}.fab:focus .fab.primary .label{color:var(--_primary-focus-label-text-color)}.fab:active .fab.primary .label{color:var(--_primary-pressed-label-text-color)}.fab.secondary{background-color:var(--_secondary-container-color);--md-ripple-hover-color: var(--_secondary-hover-state-layer-color);--md-ripple-pressed-color: var(--_secondary-pressed-state-layer-color)}.fab.secondary .icon ::slotted(){color:var(--_secondary-icon-color)}.fab.secondary:focus{color:var(--_secondary-focus-icon-color)}.fab.secondary:hover{color:var(--_secondary-hover-icon-color)}.fab.secondary:active{color:var(--_secondary-pressed-icon-color)}.fab.secondary .label{color:var(--_secondary-label-text-color)}.fab:hover .fab.secondary .label{color:var(--_secondary-hover-label-text-color)}.fab:focus .fab.secondary .label{color:var(--_secondary-focus-label-text-color)}.fab:active .fab.secondary .label{color:var(--_secondary-pressed-label-text-color)}.fab.tertiary{background-color:var(--_tertiary-container-color);--md-ripple-hover-color: var(--_tertiary-hover-state-layer-color);--md-ripple-pressed-color: var(--_tertiary-pressed-state-layer-color)}.fab.tertiary .icon ::slotted(){color:var(--_tertiary-icon-color)}.fab.tertiary:focus{color:var(--_tertiary-focus-icon-color)}.fab.tertiary:hover{color:var(--_tertiary-hover-icon-color)}.fab.tertiary:active{color:var(--_tertiary-pressed-icon-color)}.fab.tertiary .label{color:var(--_tertiary-label-text-color)}.fab:hover .fab.tertiary .label{color:var(--_tertiary-hover-label-text-color)}.fab:focus .fab.tertiary .label{color:var(--_tertiary-focus-label-text-color)}.fab:active .fab.tertiary .label{color:var(--_tertiary-pressed-label-text-color)}.fab.small{width:var(--_small-container-width);height:var(--_small-container-height)}.fab.small .icon ::slotted(){width:var(--_small-icon-size);height:var(--_small-icon-size);font-size:var(--_small-icon-size)}.fab.small,.fab.small .ripple{border-start-start-radius:var(--_small-container-shape-start-start);border-start-end-radius:var(--_small-container-shape-start-end);border-end-start-radius:var(--_small-container-shape-end-start);border-end-end-radius:var(--_small-container-shape-end-end);--md-focus-ring-shape-start-start: var(--_small-container-shape-start-start);--md-focus-ring-shape-start-end: var(--_small-container-shape-start-end);--md-focus-ring-shape-end-end: var(--_small-container-shape-end-end);--md-focus-ring-shape-end-start: var(--_small-container-shape-end-start)}/# sourceMappingURL=fab-styles.css.map /\n`;\n "]}
1	+ {"version":3,"file":"fab-styles.css.js","sourceRoot":"","sources":["fab-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/*\n @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n /\n import {css} from 'lit';\n export const styles = css`:host{--_container-color: var(--md-fab-container-color, var(--md-sys-color-surface-container-high, #ece6f0));--_container-elevation: var(--md-fab-container-elevation, 3);--_container-height: var(--md-fab-container-height, 56px);--_container-shadow-color: var(--md-fab-container-shadow-color, var(--md-sys-color-shadow, #000));--_container-shape: var(--md-fab-container-shape, 16px);--_container-width: var(--md-fab-container-width, 56px);--_focus-container-elevation: var(--md-fab-focus-container-elevation, 3);--_focus-icon-color: var(--md-fab-focus-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-container-elevation: var(--md-fab-hover-container-elevation, 4);--_hover-icon-color: var(--md-fab-hover-icon-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-color: var(--md-fab-hover-state-layer-color, var(--md-sys-color-primary, #6750a4));--_hover-state-layer-opacity: var(--md-fab-hover-state-layer-opacity, 0.08);--_icon-color: var(--md-fab-icon-color, var(--md-sys-color-primary, #6750a4));--_icon-size: var(--md-fab-icon-size, 24px);--_lowered-container-color: var(--md-fab-lowered-container-color, var(--md-sys-color-surface-container-low, #f7f2fa));--_lowered-container-elevation: var(--md-fab-lowered-container-elevation, 1);--_lowered-focus-container-elevation: var(--md-fab-lowered-focus-container-elevation, 1);--_lowered-hover-container-elevation: var(--md-fab-lowered-hover-container-elevation, 2);--_lowered-pressed-container-elevation: var(--md-fab-lowered-pressed-container-elevation, 1);--_pressed-container-elevation: var(--md-fab-pressed-container-elevation, 3);--_pressed-icon-color: var(--md-fab-pressed-icon-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-color: var(--md-fab-pressed-state-layer-color, var(--md-sys-color-primary, #6750a4));--_pressed-state-layer-opacity: var(--md-fab-pressed-state-layer-opacity, 0.12);--_focus-label-text-color: var(--md-fab-focus-label-text-color, var(--md-sys-color-primary, #6750a4));--_hover-label-text-color: var(--md-fab-hover-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-color: var(--md-fab-label-text-color, var(--md-sys-color-primary, #6750a4));--_label-text-type: var(--md-fab-label-text-type, var(--md-sys-typescale-label-large, 500 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto)));--_large-container-height: var(--md-fab-large-container-height, 96px);--_large-container-shape: var(--md-fab-large-container-shape, 28px);--_large-container-width: var(--md-fab-large-container-width, 96px);--_large-icon-size: var(--md-fab-large-icon-size, 36px);--_pressed-label-text-color: var(--md-fab-pressed-label-text-color, var(--md-sys-color-primary, #6750a4));--_primary-container-color: var(--md-fab-primary-container-color, var(--md-sys-color-primary-container, #eaddff));--_primary-focus-icon-color: var(--md-fab-primary-focus-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-focus-label-text-color: var(--md-fab-primary-focus-label-text-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-hover-icon-color: var(--md-fab-primary-hover-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-hover-label-text-color: var(--md-fab-primary-hover-label-text-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-hover-state-layer-color: var(--md-fab-primary-hover-state-layer-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-icon-color: var(--md-fab-primary-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-label-text-color: var(--md-fab-primary-label-text-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-pressed-icon-color: var(--md-fab-primary-pressed-icon-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-pressed-label-text-color: var(--md-fab-primary-pressed-label-text-color, var(--md-sys-color-on-primary-container, #21005d));--_primary-pressed-state-layer-color: var(--md-fab-primary-pressed-state-layer-color, var(--md-sys-color-on-primary-container, #21005d));--_secondary-container-color: var(--md-fab-secondary-container-color, var(--md-sys-color-secondary-container, #e8def8));--_secondary-focus-icon-color: var(--md-fab-secondary-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-focus-label-text-color: var(--md-fab-secondary-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-hover-icon-color: var(--md-fab-secondary-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-hover-label-text-color: var(--md-fab-secondary-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-hover-state-layer-color: var(--md-fab-secondary-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-icon-color: var(--md-fab-secondary-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-label-text-color: var(--md-fab-secondary-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-pressed-icon-color: var(--md-fab-secondary-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-pressed-label-text-color: var(--md-fab-secondary-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_secondary-pressed-state-layer-color: var(--md-fab-secondary-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_small-container-height: var(--md-fab-small-container-height, 40px);--_small-container-shape: var(--md-fab-small-container-shape, 12px);--_small-container-width: var(--md-fab-small-container-width, 40px);--_small-icon-size: var(--md-fab-small-icon-size, 24px);--_tertiary-container-color: var(--md-fab-tertiary-container-color, var(--md-sys-color-tertiary-container, #ffd8e4));--_tertiary-focus-icon-color: var(--md-fab-tertiary-focus-icon-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-focus-label-text-color: var(--md-fab-tertiary-focus-label-text-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-hover-icon-color: var(--md-fab-tertiary-hover-icon-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-hover-label-text-color: var(--md-fab-tertiary-hover-label-text-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-hover-state-layer-color: var(--md-fab-tertiary-hover-state-layer-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-icon-color: var(--md-fab-tertiary-icon-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-label-text-color: var(--md-fab-tertiary-label-text-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-pressed-icon-color: var(--md-fab-tertiary-pressed-icon-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-pressed-label-text-color: var(--md-fab-tertiary-pressed-label-text-color, var(--md-sys-color-on-tertiary-container, #31111d));--_tertiary-pressed-state-layer-color: var(--md-fab-tertiary-pressed-state-layer-color, var(--md-sys-color-on-tertiary-container, #31111d));--_container-shape-start-start: var( --md-fab-container-shape-start-start, var(--_container-shape) );--_container-shape-start-end: var( --md-fab-container-shape-start-end, var(--_container-shape) );--_container-shape-end-end: var( --md-fab-container-shape-end-end, var(--_container-shape) );--_container-shape-end-start: var( --md-fab-container-shape-end-start, var(--_container-shape) );--_large-container-shape-start-start: var( --md-fab-large-container-shape-start-start, var(--_large-container-shape) );--_large-container-shape-start-end: var( --md-fab-large-container-shape-start-end, var(--_large-container-shape) );--_large-container-shape-end-end: var( --md-fab-large-container-shape-end-end, var(--_large-container-shape) );--_large-container-shape-end-start: var( --md-fab-large-container-shape-end-start, var(--_large-container-shape) );--_small-container-shape-start-start: var( --md-fab-small-container-shape-start-start, var(--_small-container-shape) );--_small-container-shape-start-end: var( --md-fab-small-container-shape-start-end, var(--_small-container-shape) );--_small-container-shape-end-end: var( --md-fab-small-container-shape-end-end, var(--_small-container-shape) );--_small-container-shape-end-start: var( --md-fab-small-container-shape-end-start, var(--_small-container-shape) )}.fab .icon ::slotted(){color:var(--_icon-color)}.fab:focus{color:var(--_focus-icon-color)}.fab:hover{color:var(--_hover-icon-color)}.fab:active{color:var(--_pressed-icon-color)}.fab.primary{background-color:var(--_primary-container-color);--md-ripple-hover-color: var(--_primary-hover-state-layer-color);--md-ripple-pressed-color: var(--_primary-pressed-state-layer-color)}.fab.primary .icon ::slotted(){color:var(--_primary-icon-color)}.fab.primary:focus{color:var(--_primary-focus-icon-color)}.fab.primary:hover{color:var(--_primary-hover-icon-color)}.fab.primary:active{color:var(--_primary-pressed-icon-color)}.fab.primary .label{color:var(--_primary-label-text-color)}.fab:hover .fab.primary .label{color:var(--_primary-hover-label-text-color)}.fab:focus .fab.primary .label{color:var(--_primary-focus-label-text-color)}.fab:active .fab.primary .label{color:var(--_primary-pressed-label-text-color)}.fab.secondary{background-color:var(--_secondary-container-color);--md-ripple-hover-color: var(--_secondary-hover-state-layer-color);--md-ripple-pressed-color: var(--_secondary-pressed-state-layer-color)}.fab.secondary .icon ::slotted(){color:var(--_secondary-icon-color)}.fab.secondary:focus{color:var(--_secondary-focus-icon-color)}.fab.secondary:hover{color:var(--_secondary-hover-icon-color)}.fab.secondary:active{color:var(--_secondary-pressed-icon-color)}.fab.secondary .label{color:var(--_secondary-label-text-color)}.fab:hover .fab.secondary .label{color:var(--_secondary-hover-label-text-color)}.fab:focus .fab.secondary .label{color:var(--_secondary-focus-label-text-color)}.fab:active .fab.secondary .label{color:var(--_secondary-pressed-label-text-color)}.fab.tertiary{background-color:var(--_tertiary-container-color);--md-ripple-hover-color: var(--_tertiary-hover-state-layer-color);--md-ripple-pressed-color: var(--_tertiary-pressed-state-layer-color)}.fab.tertiary .icon ::slotted(){color:var(--_tertiary-icon-color)}.fab.tertiary:focus{color:var(--_tertiary-focus-icon-color)}.fab.tertiary:hover{color:var(--_tertiary-hover-icon-color)}.fab.tertiary:active{color:var(--_tertiary-pressed-icon-color)}.fab.tertiary .label{color:var(--_tertiary-label-text-color)}.fab:hover .fab.tertiary .label{color:var(--_tertiary-hover-label-text-color)}.fab:focus .fab.tertiary .label{color:var(--_tertiary-focus-label-text-color)}.fab:active .fab.tertiary .label{color:var(--_tertiary-pressed-label-text-color)}.fab:not(.hasIcon){padding-inline-start:20px}.fab:not(.hasIcon) .icon{display:none}.fab:not(.hasIcon) .label{padding-inline-start:0}.fab.small{width:var(--_small-container-width);height:var(--_small-container-height)}.fab.small .icon ::slotted(){width:var(--_small-icon-size);height:var(--_small-icon-size);font-size:var(--_small-icon-size)}.fab.small,.fab.small .ripple{border-start-start-radius:var(--_small-container-shape-start-start);border-start-end-radius:var(--_small-container-shape-start-end);border-end-start-radius:var(--_small-container-shape-end-start);border-end-end-radius:var(--_small-container-shape-end-end);--md-focus-ring-shape-start-start: var(--_small-container-shape-start-start);--md-focus-ring-shape-start-end: var(--_small-container-shape-start-end);--md-focus-ring-shape-end-end: var(--_small-container-shape-end-end);--md-focus-ring-shape-end-start: var(--_small-container-shape-end-start)}/# sourceMappingURL=fab-styles.css.map /\n`;\n "]}

package/fab/lib/fab.d.ts CHANGED Viewed

@@ -21,5 +21,6 @@ export declare class Fab extends SharedFab {
         small: boolean;
         large: boolean;
         extended: boolean;
+        hasIcon: boolean;
     };
 }

package/fab/lib/shared.d.ts CHANGED Viewed

@@ -29,6 +29,13 @@ export declare abstract class SharedFab extends LitElement {
      * Lowers the FAB's elevation.
      */
     lowered: boolean;
+    /**
+     * NOTE: For SSR use only as it will be overriden by icon slotchange event.
+     *
+     * Whether to display the icon or not in extended FAB. Does nothing on branded
+     * and non-extended FABs.
+     */
+    hasIcon: boolean;
     /**
      * Lowers the FAB's elevation and places it into the `lowered` state.
      */
@@ -39,8 +46,10 @@ export declare abstract class SharedFab extends LitElement {
         small: boolean;
         large: boolean;
         extended: boolean;
+        hasIcon: boolean;
     };
     private renderTouchTarget;
     private renderLabel;
     private renderIcon;
+    private onSlotchange;
 }

package/fab/lib/shared.js CHANGED Viewed

@@ -31,6 +31,13 @@ export class SharedFab extends LitElement {
          * Lowers the FAB's elevation.
          */
         this.lowered = false;
+        /**
+         * NOTE: For SSR use only as it will be overriden by icon slotchange event.
+         *
+         * Whether to display the icon or not in extended FAB. Does nothing on branded
+         * and non-extended FABs.
+         */
+        this.hasIcon = false;
         /**
          * Lowers the FAB's elevation and places it into the `lowered` state.
          */
@@ -60,6 +67,7 @@ export class SharedFab extends LitElement {
             'small': this.size === 'small' && !isExtended,
             'large': this.size === 'large' && !isExtended,
             'extended': isExtended,
+            'hasIcon': !isExtended || this.hasIcon,
         };
     }
     renderTouchTarget() {
@@ -70,10 +78,20 @@ export class SharedFab extends LitElement {
         return this.label ? html `<span class="label">${this.label}</span>` : '';
     }
     renderIcon() {
+        const { ariaLabel } = this;
         return html `<span class="icon">
-        <slot name="icon"></slot>
+        <slot
+            name="icon"
+            aria-hidden=${ariaLabel || this.label ? 'true' : nothing}
+            @slotchange=${this.onSlotchange}>
+        </slot>
       </span>`;
     }
+    onSlotchange(e) {
+        const slotEl = e.target;
+        const slottedEls = slotEl.assignedElements({ flatten: true });
+        this.hasIcon = slottedEls.length !== 0;
+    }
 }
 _a = SharedFab;
 (() => {
@@ -94,6 +112,9 @@ __decorate([
     property({ type: Boolean })
 ], SharedFab.prototype, "lowered", void 0);
 __decorate([
-    property({ type: Boolean })
+    property({ type: Boolean, attribute: 'has-icon' })
+], SharedFab.prototype, "hasIcon", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'reduced-touch-target' })
 ], SharedFab.prototype, "reducedTouchTarget", void 0);
 //# sourceMappingURL=shared.js.map

package/fab/lib/shared.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"shared.js","sourceRoot":"","sources":["shared.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;;AAEH,OAAO,8BAA8B,CAAC;AACtC,OAAO,2BAA2B,CAAC;AACnC,OAAO,wBAAwB,CAAC;AAEhC,OAAO,EAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAC,MAAM,KAAK,CAAC;AAC9C,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAGrD,OAAO,EAAC,yBAAyB,EAAC,MAAM,iCAAiC,CAAC;AAO1E,gEAAgE;AAChE,MAAM,OAAgB,SAAU,SAAQ,UAAU;IAAlD;;QAWE;;;;;WAKG;QACS,SAAI,GAAY,QAAQ,CAAC;QAErC;;WAEG;QACS,UAAK,GAAG,EAAE,CAAC;QAGvB;;WAEG;QACwB,YAAO,GAAG,KAAK,CAAC;QAE3C;;WAEG;~~QACwB~~,uBAAkB,GAAG,KAAK,CAAC;~~IA4CxD~~,CAAC;~~IA1CoB~~,MAAM;QACvB,iCAAiC;QACjC,MAAM,EAAC,SAAS,EAAC,GAAG,IAAuB,CAAC;QAC5C,OAAO,IAAI,CAAA;;qBAEM,QAAQ,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC;qBACjC,SAAS,IAAI,OAAO;;;;;UAK/B,IAAI,CAAC,iBAAiB,EAAE;UACxB,IAAI,CAAC,UAAU,EAAE;UACjB,IAAI,CAAC,WAAW,EAAE;;KAEvB,CAAC;IACJ,CAAC;IAES,gBAAgB;QACxB,MAAM,UAAU,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;QAChC,OAAO;YACL,SAAS,EAAE,IAAI,CAAC,OAAO;YACvB,OAAO,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,CAAC,UAAU;YAC7C,OAAO,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,CAAC,UAAU;YAC7C,UAAU,EAAE,UAAU;~~SACvB~~,CAAC;IACJ,CAAC;IAEO,iBAAiB;QACvB,OAAO,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,IAAI,CAAA,EAAE,CAAC,CAAC;YACR,IAAI,CAAA,kCAAkC,CAAC;IAC1E,CAAC;IAEO,WAAW;QACjB,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA,uBAAuB,IAAI,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;IAC1E,CAAC;IAEO,UAAU;QAChB,OAAO,IAAI,CAAA;;~~cAED~~,CAAC;IACb,CAAC;;;~~AA3ED~~;IACE,yBAAyB,CAAC,EAAI,CAAC,CAAC;AAClC,CAAC,GAAA,CAAA;AAED,kBAAkB;AACF,2BAAiB,GAAmB;IAClD,IAAI,EAAE,MAAe;IACrB,cAAc,EAAE,IAAI;CACrB,CAAC;AAQU;IAAX,QAAQ,EAAE;uCAA0B;AAKzB;IAAX,QAAQ,EAAE;wCAAY;AAMI;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;0CAAiB;~~AAKhB~~;~~IAA1B~~,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;~~qDAA4B~~","sourcesContent":["/*\n @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n /\n\nimport '../../elevation/elevation.js';\nimport '../../focus/focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, LitElement, nothing} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\nimport {requestUpdateOnAriaChange} from '../../internal/aria/delegate.js';\n\n/\n Sizes variants available to non-extended FABs.\n /\nexport type FabSize = 'medium'\|'small'\|'large';\n\n// tslint:disable-next-line:enforce-comments-on-exported-symbols\nexport abstract class SharedFab extends LitElement {\n static {\n requestUpdateOnAriaChange(this);\n }\n\n /* @nocollapse /\n static override shadowRootOptions: ShadowRootInit = {\n mode: 'open' as const,\n delegatesFocus: true,\n };\n\n /\n The size of the FAB.\n \n NOTE: Branded FABs cannot be sized to `small`, and Extended FABs do not\n * have different sizes.\n /\n @property() size: FabSize = 'medium';\n\n /\n The text to display on the FAB.\n /\n @property() label = '';\n\n\n /\n Lowers the FAB's elevation.\n /\n @property({type: Boolean}) lowered = false;\n\n /\n Lowers the FAB's elevation and places it into the `lowered` state.\n */\n @property({type: Boolean}) reducedTouchTarget = false;\n\n protected override render() {\n // Needed for closure conformance\n const {ariaLabel} = this as ARIAMixinStrict;\n return html`\n <button\n class=\"fab ${classMap(this.getRenderClasses())}\"\n aria-label=${ariaLabel \|\| nothing}\n >\n <md-elevation></md-elevation>\n <md-focus-ring></md-focus-ring>\n <md-ripple class=\"ripple\"></md-ripple>\n ${this.renderTouchTarget()}\n ${this.renderIcon()}\n ${this.renderLabel()}\n </button>\n `;\n }\n\n protected getRenderClasses() {\n const isExtended = !!this.label;\n return {\n 'lowered': this.lowered,\n 'small': this.size === 'small' && !isExtended,\n 'large': this.size === 'large' && !isExtended,\n 'extended': isExtended,\n };\n }\n\n private renderTouchTarget() {\n return this.reducedTouchTarget ? html`` :\n html`<div class=\"touch-target\"></div>`;\n }\n\n private renderLabel() {\n return this.label ? html`<span class=\"label\">${this.label}</span>` : '';\n }\n\n private renderIcon() {\n return html`<span class=\"icon\">\n <slot name=\"icon\"~~></~~slot>\n </span>`;\n }\n}\n"]}
1	+ {"version":3,"file":"shared.js","sourceRoot":"","sources":["shared.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n /\n\nimport '../../elevation/elevation.js';\nimport '../../focus/focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, LitElement, nothing} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {ARIAMixinStrict} from '../../internal/aria/aria.js';\nimport {requestUpdateOnAriaChange} from '../../internal/aria/delegate.js';\n\n/\n Sizes variants available to non-extended FABs.\n /\nexport type FabSize = 'medium'\|'small'\|'large';\n\n// tslint:disable-next-line:enforce-comments-on-exported-symbols\nexport abstract class SharedFab extends LitElement {\n static {\n requestUpdateOnAriaChange(this);\n }\n\n /* @nocollapse /\n static override shadowRootOptions: ShadowRootInit = {\n mode: 'open' as const,\n delegatesFocus: true,\n };\n\n /\n The size of the FAB.\n \n NOTE: Branded FABs cannot be sized to `small`, and Extended FABs do not\n * have different sizes.\n /\n @property() size: FabSize = 'medium';\n\n /\n The text to display on the FAB.\n /\n @property() label = '';\n\n\n /\n Lowers the FAB's elevation.\n /\n @property({type: Boolean}) lowered = false;\n\n /\n NOTE: For SSR use only as it will be overriden by icon slotchange event.\n \n Whether to display the icon or not in extended FAB. Does nothing on branded\n * and non-extended FABs.\n /\n @property({type: Boolean, attribute: 'has-icon'}) hasIcon = false;\n\n /\n Lowers the FAB's elevation and places it into the `lowered` state.\n */\n @property({type: Boolean, attribute: 'reduced-touch-target'})\n reducedTouchTarget = false;\n\n protected override render() {\n // Needed for closure conformance\n const {ariaLabel} = this as ARIAMixinStrict;\n return html`\n <button\n class=\"fab ${classMap(this.getRenderClasses())}\"\n aria-label=${ariaLabel \|\| nothing}\n >\n <md-elevation></md-elevation>\n <md-focus-ring></md-focus-ring>\n <md-ripple class=\"ripple\"></md-ripple>\n ${this.renderTouchTarget()}\n ${this.renderIcon()}\n ${this.renderLabel()}\n </button>\n `;\n }\n\n protected getRenderClasses() {\n const isExtended = !!this.label;\n return {\n 'lowered': this.lowered,\n 'small': this.size === 'small' && !isExtended,\n 'large': this.size === 'large' && !isExtended,\n 'extended': isExtended,\n 'hasIcon': !isExtended \|\| this.hasIcon,\n };\n }\n\n private renderTouchTarget() {\n return this.reducedTouchTarget ? html`` :\n html`<div class=\"touch-target\"></div>`;\n }\n\n private renderLabel() {\n return this.label ? html`<span class=\"label\">${this.label}</span>` : '';\n }\n\n private renderIcon() {\n const {ariaLabel} = this as ARIAMixinStrict;\n return html`<span class=\"icon\">\n <slot\n name=\"icon\"\n aria-hidden=${\n ariaLabel \|\| this.label ? 'true' : nothing as unknown as 'false'}\n @slotchange=${this.onSlotchange}>\n </slot>\n </span>`;\n }\n\n private onSlotchange(e: Event) {\n const slotEl = e.target as HTMLSlotElement;\n const slottedEls = slotEl.assignedElements({flatten: true});\n this.hasIcon = slottedEls.length !== 0;\n }\n}\n"]}

package/field/lib/_supporting-text.scss CHANGED Viewed

@@ -7,26 +7,16 @@
   .supporting-text {
     color: var(--_supporting-text-color);
     display: flex;
+    gap: var(--_supporting-text-padding);
     justify-content: space-between;
-    padding: 0 var(--_supporting-text-padding);
+    padding: var(--_supporting-text-padding-top) var(--_supporting-text-padding)
+      0;
     font: var(--_supporting-text-type);
   }
-  .supporting-text-start,
-  .supporting-text-end {
-    // Can't be an inline display element (<span>) for padding-top to work.
-    display: flex;
-  }
-  .supporting-text-start ::slotted(:not(:empty)),
-  .supporting-text-end ::slotted(:not(:empty)) {
-    // Add padding to slotted elements instead of the wrappers so that it does not
-    // show when the supporting text is empty.
-    padding-top: var(--_supporting-text-padding-top);
-  }
-  .supporting-text-end ::slotted(:not(:empty)) {
-    padding-inline-start: var(--_supporting-text-padding);
+  // Don't shrink the counter when the supporting text is long and wraps
+  .supporting-text :nth-child(2) {
+    flex-shrink: 0;
   }
   :hover .supporting-text {

package/field/lib/field.d.ts CHANGED Viewed

@@ -12,10 +12,14 @@ export declare class Field extends LitElement implements SurfacePositionTarget {
     disabled: boolean;
     error: boolean;
     focused: boolean;
-    label?: string;
+    label: string;
     populated: boolean;
     resizable: boolean;
     required: boolean;
+    supportingText: string;
+    errorText: string;
+    count: number;
+    max: number;
     /**
      * Whether or not the field has leading content.
      */
@@ -24,16 +28,36 @@ export declare class Field extends LitElement implements SurfacePositionTarget {
      * Whether or not the field has trailing content.
      */
     hasEnd: boolean;
+    private readonly slottedAriaDescribedBy;
+    private get counterText();
+    private get supportingOrErrorText();
     private isAnimating;
     private labelAnimation?;
+    /**
+     * When set to true, the error text's `role="alert"` will be removed, then
+     * re-added after an animation frame. This will re-announce an error message
+     * to screen readers.
+     */
+    private refreshErrorAlert;
     private readonly floatingLabelEl;
     private readonly restingLabelEl;
     private readonly containerEl;
+    /**
+     * Re-announces the field's error supporting text to screen readers.
+     *
+     * Error text announces to screen readers anytime it is visible and changes.
+     * Use the method to re-announce the message when the text has not changed,
+     * but announcement is still needed (such as for `reportValidity()`).
+     */
+    reannounceError(): void;
     protected update(props: PropertyValues<Field>): void;
     protected render(): TemplateResult<1>;
+    protected updated(changed: PropertyValues<Field>): void;
     protected renderBackground?(): TemplateResult;
     protected renderIndicator?(): TemplateResult;
-    protected renderOutline?(floatingLabel: TemplateResult): TemplateResult;
+    protected renderOutline?(floatingLabel: unknown): TemplateResult;
+    private renderSupportingText;
+    private updateSlottedAriaDescribedBy;
     private renderLabel;
     private animateLabelIfNeeded;
     private getLabelKeyframes;