@material/web 2.4.2-nightly.b8cba86.0 → 2.4.2-nightly.d7503be.0
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.
- package/button/internal/_touch-target.scss +1 -1
- package/button/internal/button.d.ts +0 -4
- package/button/internal/button.js.map +1 -1
- package/button/internal/shared-styles.css +1 -1
- package/button/internal/shared-styles.css.map +1 -1
- package/button/internal/shared-styles.cssresult.js +1 -1
- package/button/internal/shared-styles.cssresult.js.map +1 -1
- package/checkbox/internal/checkbox.d.ts +0 -2
- package/checkbox/internal/checkbox.js.map +1 -1
- package/custom-elements.json +43934 -0
- package/iconbutton/internal/icon-button.d.ts +0 -4
- package/iconbutton/internal/icon-button.js.map +1 -1
- package/labs/behaviors/form-associated.d.ts +0 -22
- package/labs/behaviors/form-associated.js +0 -11
- package/labs/behaviors/form-associated.js.map +1 -1
- package/labs/gb/components/button/md-button.d.ts +10 -2
- package/labs/gb/components/button/md-button.js +85 -3
- package/labs/gb/components/button/md-button.js.map +1 -1
- package/labs/gb/components/card/md-card.d.ts +10 -2
- package/labs/gb/components/card/md-card.js +80 -3
- package/labs/gb/components/card/md-card.js.map +1 -1
- package/labs/gb/components/checkbox/md-checkbox.d.ts +1 -1
- package/labs/gb/components/checkbox/md-checkbox.js +1 -1
- package/labs/gb/components/checkbox/md-checkbox.js.map +1 -1
- package/labs/gb/components/divider/md-divider.d.ts +1 -1
- package/labs/gb/components/divider/md-divider.js +1 -1
- package/labs/gb/components/divider/md-divider.js.map +1 -1
- package/labs/gb/components/fab/md-fab.d.ts +1 -1
- package/labs/gb/components/fab/md-fab.js +1 -1
- package/labs/gb/components/fab/md-fab.js.map +1 -1
- package/labs/gb/components/iconbutton/md-icon-button.d.ts +1 -1
- package/labs/gb/components/iconbutton/md-icon-button.js +1 -1
- package/labs/gb/components/iconbutton/md-icon-button.js.map +1 -1
- package/labs/gb/components/list/md-list-item.d.ts +2 -2
- package/labs/gb/components/list/md-list-item.js +8 -8
- package/labs/gb/components/list/md-list-item.js.map +1 -1
- package/labs/gb/components/list/md-list.d.ts +1 -1
- package/labs/gb/components/list/md-list.js +1 -1
- package/labs/gb/components/list/md-list.js.map +1 -1
- package/labs/gb/components/menu/md-menu-group.d.ts +1 -1
- package/labs/gb/components/menu/md-menu-group.js +1 -1
- package/labs/gb/components/menu/md-menu-group.js.map +1 -1
- package/labs/gb/components/menu/md-menu-item.d.ts +1 -1
- package/labs/gb/components/menu/md-menu-item.js +1 -1
- package/labs/gb/components/menu/md-menu-item.js.map +1 -1
- package/labs/gb/components/menu/md-menu.d.ts +1 -1
- package/labs/gb/components/menu/md-menu.js +1 -1
- package/labs/gb/components/menu/md-menu.js.map +1 -1
- package/labs/gb/components/menu/menu.js +1 -1
- package/labs/gb/components/menu/menu.js.map +1 -1
- package/labs/gb/components/radio/md-radio.d.ts +1 -1
- package/labs/gb/components/radio/md-radio.js +1 -1
- package/labs/gb/components/radio/md-radio.js.map +1 -1
- package/labs/gb/components/splitbutton/_split-button-tokens.scss +135 -0
- package/labs/gb/components/splitbutton/md-split-button.d.ts +26 -0
- package/labs/gb/components/splitbutton/md-split-button.js +119 -0
- package/labs/gb/components/splitbutton/md-split-button.js.map +1 -0
- package/labs/gb/components/splitbutton/split-button.css +4 -0
- package/labs/gb/components/splitbutton/split-button.css.map +1 -0
- package/labs/gb/components/splitbutton/split-button.cssresult.d.ts +3 -0
- package/labs/gb/components/splitbutton/split-button.cssresult.js +14 -0
- package/labs/gb/components/splitbutton/split-button.cssresult.js.map +1 -0
- package/labs/gb/components/splitbutton/split-button.d.ts +47 -0
- package/labs/gb/components/splitbutton/split-button.js +46 -0
- package/labs/gb/components/splitbutton/split-button.js.map +1 -0
- package/labs/gb/components/splitbutton/split-button.scss +164 -0
- package/labs/gb/components/switch/md-switch.d.ts +1 -1
- package/labs/gb/components/switch/md-switch.js +1 -1
- package/labs/gb/components/switch/md-switch.js.map +1 -1
- package/labs/gb/styles/adopt-styles.js +7 -7
- package/labs/gb/styles/adopt-styles.js.map +1 -1
- package/labs/gb/styles/icon/md-icon.d.ts +1 -1
- package/labs/gb/styles/icon/md-icon.js +4 -1
- package/labs/gb/styles/icon/md-icon.js.map +1 -1
- package/labs/gb/styles/m3.css +1 -1
- package/labs/gb/styles/m3.css.map +1 -1
- package/labs/gb/styles/m3.cssresult.js +1 -1
- package/labs/gb/styles/m3.cssresult.js.map +1 -1
- package/labs/gb/styles/tailwind.css +1 -1
- package/labs/gb/styles/tailwind.css.map +1 -1
- package/labs/gb/styles/tailwind.cssresult.js +1 -1
- package/labs/gb/styles/tailwind.cssresult.js.map +1 -1
- package/labs/gb/styles/tailwind.scss +202 -5
- package/labs/gb/styles/typography/internal/_typography-tokens.scss +85 -16
- package/labs/gb/styles/typography/md-typography-tokens.css +1 -1
- package/labs/gb/styles/typography/md-typography-tokens.css.map +1 -1
- package/labs/gb/styles/typography/md-typography-tokens.cssresult.js +1 -1
- package/labs/gb/styles/typography/md-typography-tokens.cssresult.js.map +1 -1
- package/list/internal/listitem/list-item.d.ts +4 -1
- package/list/internal/listitem/list-item.js +4 -1
- package/list/internal/listitem/list-item.js.map +1 -1
- package/menu/internal/submenu/sub-menu.d.ts +5 -1
- package/menu/internal/submenu/sub-menu.js +5 -1
- package/menu/internal/submenu/sub-menu.js.map +1 -1
- package/package.json +25 -3
- package/radio/internal/radio.d.ts +0 -2
- package/radio/internal/radio.js.map +1 -1
- package/select/internal/select.d.ts +0 -2
- package/select/internal/select.js.map +1 -1
- package/slider/internal/slider.d.ts +0 -2
- package/slider/internal/slider.js.map +1 -1
- package/switch/internal/switch.d.ts +0 -2
- package/switch/internal/switch.js.map +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tailwind.cssresult.js","sourceRoot":"","sources":["tailwind.cssresult.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,0DAA0D;AAC1D,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;CAIxB,CAAC;AACF,eAAe,MAAM,CAAC,UAAW,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n// Generated stylesheet for ./labs/gb/styles/tailwind.css.\nimport {css} from 'lit';\nexport const styles = css`/*!\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */@layer theme, base, md, components, utilities;@theme inline{--color-*:initial;--color-primary: var(--md-sys-color-primary);--color-on-primary: var(--md-sys-color-on-primary);--color-primary-container: var(--md-sys-color-primary-container);--color-on-primary-container: var(--md-sys-color-on-primary-container);--color-primary-fixed: var(--md-sys-color-primary-fixed);--color-primary-fixed-dim: var(--md-sys-color-primary-fixed-dim);--color-on-primary-fixed: var(--md-sys-color-on-primary-fixed);--color-on-primary-fixed-variant: var( --md-sys-color-on-primary-fixed-variant );--color-secondary: var(--md-sys-color-secondary);--color-on-secondary: var(--md-sys-color-on-secondary);--color-secondary-container: var(--md-sys-color-secondary-container);--color-on-secondary-container: var(--md-sys-color-on-secondary-container);--color-secondary-fixed: var(--md-sys-color-secondary-fixed);--color-secondary-fixed-dim: var(--md-sys-color-secondary-fixed-dim);--color-on-secondary-fixed: var(--md-sys-color-on-secondary-fixed);--color-on-secondary-fixed-variant: var( --md-sys-color-on-secondary-fixed-variant );--color-tertiary: var(--md-sys-color-tertiary);--color-on-tertiary: var(--md-sys-color-on-tertiary);--color-tertiary-container: var(--md-sys-color-tertiary-container);--color-on-tertiary-container: var(--md-sys-color-on-tertiary-container);--color-tertiary-fixed: var(--md-sys-color-tertiary-fixed);--color-tertiary-fixed-dim: var(--md-sys-color-tertiary-fixed-dim);--color-on-tertiary-fixed: var(--md-sys-color-on-tertiary-fixed);--color-on-tertiary-fixed-variant: var( --md-sys-color-on-tertiary-fixed-variant );--color-error: var(--md-sys-color-error);--color-on-error: var(--md-sys-color-on-error);--color-error-container: var(--md-sys-color-error-container);--color-on-error-container: var(--md-sys-color-on-error-container);--color-surface: var(--md-sys-color-surface);--color-surface-dim: var(--md-sys-color-surface-dim);--color-surface-bright: var(--md-sys-color-surface-bright);--color-surface-container-lowest: var( --md-sys-color-surface-container-lowest );--color-surface-container-low: var(--md-sys-color-surface-container-low);--color-surface-container: var(--md-sys-color-surface-container);--color-surface-container-high: var(--md-sys-color-surface-container-high);--color-surface-container-highest: var( --md-sys-color-surface-container-highest );--color-on-surface: var(--md-sys-color-on-surface);--color-on-surface-variant: var(--md-sys-color-on-surface-variant);--color-outline: var(--md-sys-color-outline);--color-outline-variant: var(--md-sys-color-outline-variant);--color-inverse-surface: var(--md-sys-color-inverse-surface);--color-inverse-on-surface: var(--md-sys-color-inverse-on-surface);--color-inverse-primary: var(--md-sys-color-inverse-primary);--color-scrim: var(--md-sys-color-scrim);--color-shadow: var(--md-sys-color-shadow);--font-*:initial;--font-brand: var(--md-ref-typeface-brand);--font-plain: var(--md-ref-typeface-plain);--text-*:initial;--tracking-*:initial;--leading-*:initial;--typescale-label-sm: var(--md-sys-typescale-label-sm);--typescale-label-sm-tracking: var(--md-sys-typescale-label-sm-tracking);--typescale-label-md: var(--md-sys-typescale-label-md);--typescale-label-md-tracking: var(--md-sys-typescale-label-md-tracking);--typescale-label-lg: var(--md-sys-typescale-label-lg);--typescale-label-lg-tracking: var(--md-sys-typescale-label-lg-tracking);--typescale-body-sm: var(--md-sys-typescale-body-sm);--typescale-body-sm-tracking: var(--md-sys-typescale-body-sm-tracking);--typescale-body-md: var(--md-sys-typescale-body-md);--typescale-body-md-tracking: var(--md-sys-typescale-body-md-tracking);--typescale-body-lg: var(--md-sys-typescale-body-lg);--typescale-body-lg-tracking: var(--md-sys-typescale-body-lg-tracking);--typescale-title-sm: var(--md-sys-typescale-title-sm);--typescale-title-sm-tracking: var(--md-sys-typescale-title-sm-tracking);--typescale-title-md: var(--md-sys-typescale-title-md);--typescale-title-md-tracking: var(--md-sys-typescale-title-md-tracking);--typescale-title-lg: var(--md-sys-typescale-title-lg);--typescale-title-lg-tracking: var(--md-sys-typescale-title-lg-tracking);--typescale-headline-sm: var(--md-sys-typescale-headline-sm);--typescale-headline-sm-tracking: var( --md-sys-typescale-headline-sm-tracking );--typescale-headline-md: var(--md-sys-typescale-headline-md);--typescale-headline-md-tracking: var( --md-sys-typescale-headline-md-tracking );--typescale-headline-lg: var(--md-sys-typescale-headline-lg);--typescale-headline-lg-tracking: var( --md-sys-typescale-headline-lg-tracking );--typescale-display-sm: var(--md-sys-typescale-display-sm);--typescale-display-sm-tracking: var(--md-sys-typescale-display-sm-tracking);--typescale-display-md: var(--md-sys-typescale-display-md);--typescale-display-md-tracking: var(--md-sys-typescale-display-md-tracking);--typescale-display-lg: var(--md-sys-typescale-display-lg);--typescale-display-lg-tracking: var(--md-sys-typescale-display-lg-tracking);--font-weight-*:initial;--font-weight-normal: var(--md-ref-typeface-weight-regular);--font-weight-medium: var(--md-ref-typeface-weight-medium);--font-weight-bold: var(--md-ref-typeface-weight-bold);--radius-xs: var(--md-sys-shape-corner-xs);--radius-sm: var(--md-sys-shape-corner-sm);--radius-md: var(--md-sys-shape-corner-md);--radius-lg: var(--md-sys-shape-corner-lg);--radius-xl: var(--md-sys-shape-corner-lg-increased);--radius-2xl: var(--md-sys-shape-corner-xl);--radius-3xl: var(--md-sys-shape-corner-xl-increased);--radius-4xl: var(--md-sys-shape-corner-xxl);--shadow-2xs: initial;--shadow-xs: var(--md-sys-elevation-shadow-1);--shadow-sm: var(--md-sys-elevation-shadow-2);--shadow-md: var(--md-sys-elevation-shadow-3);--shadow-lg: var(--md-sys-elevation-shadow-4);--shadow-xl: var(--md-sys-elevation-shadow-5);--shadow-2xl: initial;--spacing: var(--md-sys-space-unit);--breakpoint-sm: 600px;--breakpoint-md: 840px;--breakpoint-lg: 1200px;--breakpoint-xl: 1600px;--breakpoint-2xl: initial}@utility typescale-*{font:--value(--typescale-*);letter-spacing:--value(--typescale-*-tracking)}\n`;\nexport default styles.styleSheet!;\n"]}
|
|
1
|
+
{"version":3,"file":"tailwind.cssresult.js","sourceRoot":"","sources":["tailwind.cssresult.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,0DAA0D;AAC1D,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;CAIxB,CAAC;AACF,eAAe,MAAM,CAAC,UAAW,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n// Generated stylesheet for ./labs/gb/styles/tailwind.css.\nimport {css} from 'lit';\nexport const styles = css`/*!\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */@layer theme, base, md, components, utilities;@theme{--spacing: calc(var(--md-sys-space-unit) / 2)}@theme inline{--color-*:initial;--color-primary: var(--md-sys-color-primary);--color-on-primary: var(--md-sys-color-on-primary);--color-primary-container: var(--md-sys-color-primary-container);--color-on-primary-container: var(--md-sys-color-on-primary-container);--color-primary-fixed: var(--md-sys-color-primary-fixed);--color-primary-fixed-dim: var(--md-sys-color-primary-fixed-dim);--color-on-primary-fixed: var(--md-sys-color-on-primary-fixed);--color-on-primary-fixed-variant: var( --md-sys-color-on-primary-fixed-variant );--color-secondary: var(--md-sys-color-secondary);--color-on-secondary: var(--md-sys-color-on-secondary);--color-secondary-container: var(--md-sys-color-secondary-container);--color-on-secondary-container: var(--md-sys-color-on-secondary-container);--color-secondary-fixed: var(--md-sys-color-secondary-fixed);--color-secondary-fixed-dim: var(--md-sys-color-secondary-fixed-dim);--color-on-secondary-fixed: var(--md-sys-color-on-secondary-fixed);--color-on-secondary-fixed-variant: var( --md-sys-color-on-secondary-fixed-variant );--color-tertiary: var(--md-sys-color-tertiary);--color-on-tertiary: var(--md-sys-color-on-tertiary);--color-tertiary-container: var(--md-sys-color-tertiary-container);--color-on-tertiary-container: var(--md-sys-color-on-tertiary-container);--color-tertiary-fixed: var(--md-sys-color-tertiary-fixed);--color-tertiary-fixed-dim: var(--md-sys-color-tertiary-fixed-dim);--color-on-tertiary-fixed: var(--md-sys-color-on-tertiary-fixed);--color-on-tertiary-fixed-variant: var( --md-sys-color-on-tertiary-fixed-variant );--color-error: var(--md-sys-color-error);--color-on-error: var(--md-sys-color-on-error);--color-error-container: var(--md-sys-color-error-container);--color-on-error-container: var(--md-sys-color-on-error-container);--color-surface: var(--md-sys-color-surface);--color-surface-dim: var(--md-sys-color-surface-dim);--color-surface-bright: var(--md-sys-color-surface-bright);--color-surface-container-lowest: var( --md-sys-color-surface-container-lowest );--color-surface-container-low: var(--md-sys-color-surface-container-low);--color-surface-container: var(--md-sys-color-surface-container);--color-surface-container-high: var(--md-sys-color-surface-container-high);--color-surface-container-highest: var( --md-sys-color-surface-container-highest );--color-on-surface: var(--md-sys-color-on-surface);--color-on-surface-variant: var(--md-sys-color-on-surface-variant);--color-outline: var(--md-sys-color-outline);--color-outline-variant: var(--md-sys-color-outline-variant);--color-inverse-surface: var(--md-sys-color-inverse-surface);--color-inverse-on-surface: var(--md-sys-color-inverse-on-surface);--color-inverse-primary: var(--md-sys-color-inverse-primary);--color-scrim: var(--md-sys-color-scrim);--color-shadow: var(--md-sys-color-shadow);--font-*:initial;--font-brand: var(--md-ref-typeface-brand);--font-plain: var(--md-ref-typeface-plain);--font-weight-normal: var(--md-ref-typeface-weight-regular);--font-weight-medium: var(--md-ref-typeface-weight-medium);--font-weight-bold: var(--md-ref-typeface-weight-bold);--text-*:initial;--tracking-*:initial;--leading-*:initial;--typescale-label-sm: var(--md-sys-typescale-label-sm);--typescale-label-sm-tracking: var(--md-sys-typescale-label-sm-tracking);--typescale-label-sm-axes: var(--md-sys-typescale-label-sm-axes);--typescale-label-md: var(--md-sys-typescale-label-md);--typescale-label-md-tracking: var(--md-sys-typescale-label-md-tracking);--typescale-label-md-axes: var(--md-sys-typescale-label-md-axes);--typescale-label-lg: var(--md-sys-typescale-label-lg);--typescale-label-lg-tracking: var(--md-sys-typescale-label-lg-tracking);--typescale-label-lg-axes: var(--md-sys-typescale-label-lg-axes);--typescale-body-sm: var(--md-sys-typescale-body-sm);--typescale-body-sm-tracking: var(--md-sys-typescale-body-sm-tracking);--typescale-body-sm-axes: var(--md-sys-typescale-body-sm-axes);--typescale-body-md: var(--md-sys-typescale-body-md);--typescale-body-md-tracking: var(--md-sys-typescale-body-md-tracking);--typescale-body-md-axes: var(--md-sys-typescale-body-md-axes);--typescale-body-lg: var(--md-sys-typescale-body-lg);--typescale-body-lg-tracking: var(--md-sys-typescale-body-lg-tracking);--typescale-body-lg-axes: var(--md-sys-typescale-body-lg-axes);--typescale-title-sm: var(--md-sys-typescale-title-sm);--typescale-title-sm-tracking: var(--md-sys-typescale-title-sm-tracking);--typescale-title-sm-axes: var(--md-sys-typescale-title-sm-axes);--typescale-title-md: var(--md-sys-typescale-title-md);--typescale-title-md-tracking: var(--md-sys-typescale-title-md-tracking);--typescale-title-md-axes: var(--md-sys-typescale-title-md-axes);--typescale-title-lg: var(--md-sys-typescale-title-lg);--typescale-title-lg-tracking: var(--md-sys-typescale-title-lg-tracking);--typescale-title-lg-axes: var(--md-sys-typescale-title-lg-axes);--typescale-headline-sm: var(--md-sys-typescale-headline-sm);--typescale-headline-sm-tracking: var( --md-sys-typescale-headline-sm-tracking );--typescale-headline-sm-axes: var(--md-sys-typescale-headline-sm-axes);--typescale-headline-md: var(--md-sys-typescale-headline-md);--typescale-headline-md-tracking: var( --md-sys-typescale-headline-md-tracking );--typescale-headline-md-axes: var(--md-sys-typescale-headline-md-axes);--typescale-headline-lg: var(--md-sys-typescale-headline-lg);--typescale-headline-lg-tracking: var( --md-sys-typescale-headline-lg-tracking );--typescale-headline-lg-axes: var(--md-sys-typescale-headline-lg-axes);--typescale-display-sm: var(--md-sys-typescale-display-sm);--typescale-display-sm-tracking: var(--md-sys-typescale-display-sm-tracking);--typescale-display-sm-axes: var(--md-sys-typescale-display-sm-axes);--typescale-display-md: var(--md-sys-typescale-display-md);--typescale-display-md-tracking: var(--md-sys-typescale-display-md-tracking);--typescale-display-md-axes: var(--md-sys-typescale-display-md-axes);--typescale-display-lg: var(--md-sys-typescale-display-lg);--typescale-display-lg-tracking: var(--md-sys-typescale-display-lg-tracking);--typescale-display-lg-axes: var(--md-sys-typescale-display-lg-axes);--typescale-emphasized-label-sm: var(--md-sys-typescale-emphasized-label-sm);--typescale-emphasized-label-sm-axes: var( --md-sys-typescale-emphasized-label-sm-axes );--typescale-emphasized-label-md: var(--md-sys-typescale-emphasized-label-md);--typescale-emphasized-label-md-axes: var( --md-sys-typescale-emphasized-label-md-axes );--typescale-emphasized-label-lg: var(--md-sys-typescale-emphasized-label-lg);--typescale-emphasized-label-lg-axes: var( --md-sys-typescale-emphasized-label-lg-axes );--typescale-emphasized-body-sm: var(--md-sys-typescale-emphasized-body-sm);--typescale-emphasized-body-sm-axes: var( --md-sys-typescale-emphasized-body-sm-axes );--typescale-emphasized-body-md: var(--md-sys-typescale-emphasized-body-md);--typescale-emphasized-body-md-axes: var( --md-sys-typescale-emphasized-body-md-axes );--typescale-emphasized-body-lg: var(--md-sys-typescale-emphasized-body-lg);--typescale-emphasized-body-lg-axes: var( --md-sys-typescale-emphasized-body-lg-axes );--typescale-emphasized-title-sm: var(--md-sys-typescale-emphasized-title-sm);--typescale-emphasized-title-sm-axes: var( --md-sys-typescale-emphasized-title-sm-axes );--typescale-emphasized-title-md: var(--md-sys-typescale-emphasized-title-md);--typescale-emphasized-title-md-axes: var( --md-sys-typescale-emphasized-title-md-axes );--typescale-emphasized-title-lg: var(--md-sys-typescale-emphasized-title-lg);--typescale-emphasized-title-lg-axes: var( --md-sys-typescale-emphasized-title-lg-axes );--typescale-emphasized-headline-sm: var( --md-sys-typescale-emphasized-headline-sm );--typescale-emphasized-headline-sm-axes: var( --md-sys-typescale-emphasized-headline-sm-axes );--typescale-emphasized-headline-md: var( --md-sys-typescale-emphasized-headline-md );--typescale-emphasized-headline-md-axes: var( --md-sys-typescale-emphasized-headline-md-axes );--typescale-emphasized-headline-lg: var( --md-sys-typescale-emphasized-headline-lg );--typescale-emphasized-headline-lg-axes: var( --md-sys-typescale-emphasized-headline-lg-axes );--typescale-emphasized-display-sm: var( --md-sys-typescale-emphasized-display-sm );--typescale-emphasized-display-sm-axes: var( --md-sys-typescale-emphasized-display-sm-axes );--typescale-emphasized-display-md: var( --md-sys-typescale-emphasized-display-md );--typescale-emphasized-display-md-axes: var( --md-sys-typescale-emphasized-display-md-axes );--typescale-emphasized-display-lg: var( --md-sys-typescale-emphasized-display-lg );--typescale-emphasized-display-lg-axes: var( --md-sys-typescale-emphasized-display-lg-axes );--radius-xs: var(--md-sys-shape-corner-xs);--radius-sm: var(--md-sys-shape-corner-sm);--radius-md: var(--md-sys-shape-corner-md);--radius-lg: var(--md-sys-shape-corner-lg);--radius-xl: var(--md-sys-shape-corner-lg-increased);--radius-2xl: var(--md-sys-shape-corner-xl);--radius-3xl: var(--md-sys-shape-corner-xl-increased);--radius-4xl: var(--md-sys-shape-corner-xxl);--shadow-2xs: initial;--shadow-xs: var(--md-sys-elevation-shadow-1);--shadow-sm: var(--md-sys-elevation-shadow-2);--shadow-md: var(--md-sys-elevation-shadow-3);--shadow-lg: var(--md-sys-elevation-shadow-4);--shadow-xl: var(--md-sys-elevation-shadow-5);--shadow-2xl: initial;--spacing-s0: var(--md-sys-space-0);--spacing-s25: var(--md-sys-space-25);--spacing-s50: var(--md-sys-space-50);--spacing-s75: var(--md-sys-space-75);--spacing-s100: var(--md-sys-space-100);--spacing-s125: var(--md-sys-space-125);--spacing-s150: var(--md-sys-space-150);--spacing-s175: var(--md-sys-space-175);--spacing-s200: var(--md-sys-space-200);--spacing-s250: var(--md-sys-space-250);--spacing-s300: var(--md-sys-space-300);--spacing-s400: var(--md-sys-space-400);--spacing-s450: var(--md-sys-space-450);--spacing-s500: var(--md-sys-space-500);--spacing-s600: var(--md-sys-space-600);--spacing-s700: var(--md-sys-space-700);--spacing-s800: var(--md-sys-space-800);--spacing-s900: var(--md-sys-space-900);--breakpoint-sm: 600px;--breakpoint-md: 840px;--breakpoint-lg: 1200px;--breakpoint-xl: 1600px;--breakpoint-2xl: initial}@utility typescale-*{font:--value(--typescale-*);letter-spacing:--value(--typescale-*-tracking);font-variation-settings:--value(--typescale-*-axes)}@utility typescale-emphasized-*{font:--value(--typescale-emphasized-*);letter-spacing:--value(--typescale-*-tracking);font-variation-settings:--value(--typescale-emphasized-*-axes)}@utility p-*{padding:--value(--spacing-*)}@utility px-*{padding-inline:--value(--spacing-*)}@utility py-*{padding-block:--value(--spacing-*)}@utility pl-*{padding-inline-start:--value(--spacing-*)}@utility ps-*{padding-inline-start:--value(--spacing-*)}@utility pe-*{padding-inline-end:--value(--spacing-*)}@utility pr-*{padding-inline-end:--value(--spacing-*)}@utility pt-*{padding-block-start:--value(--spacing-*)}@utility pbs-*{padding-block-start:--value(--spacing-*)}@utility pb-*{padding-block-end:--value(--spacing-*)}@utility pbe-*{padding-block-end:--value(--spacing-*)}@utility m-*{margin:--value(--spacing-*)}@utility mx-*{margin-inline:--value(--spacing-*)}@utility my-*{margin-block:--value(--spacing-*)}@utility ml-*{margin-inline-start:--value(--spacing-*)}@utility ms-*{margin-inline-start:--value(--spacing-*)}@utility me-*{margin-inline-end:--value(--spacing-*)}@utility mr-*{margin-inline-end:--value(--spacing-*)}@utility mt-*{margin-block-start:--value(--spacing-*)}@utility mbs-*{margin-block-start:--value(--spacing-*)}@utility mb-*{margin-block-end:--value(--spacing-*)}@utility mbe-*{margin-block-end:--value(--spacing-*)}@utility gap-*{gap:--value(--spacing-*)}@utility gap-x-*{column-gap:--value(--spacing-*)}@utility gap-y-*{row-gap:--value(--spacing-*)}@utility list-item{display:flex}\n`;\nexport default styles.styleSheet!;\n"]}
|
|
@@ -7,6 +7,11 @@
|
|
|
7
7
|
|
|
8
8
|
// Cascade `md` layer between `base` reset styles and `utilities` for overrides.
|
|
9
9
|
@layer theme, base, md, components, utilities;
|
|
10
|
+
// Non-inline theme to preserve Tailwind's default 4px spacing convention.
|
|
11
|
+
@theme {
|
|
12
|
+
--spacing: calc(var(--md-sys-space-unit) / 2);
|
|
13
|
+
}
|
|
14
|
+
// Inline theme to replace Tailwind's default custom properties.
|
|
10
15
|
@theme inline {
|
|
11
16
|
// Color
|
|
12
17
|
#{'--color-*'}: initial; // Do not use Tailwind's default color utilities.
|
|
@@ -70,50 +75,136 @@
|
|
|
70
75
|
#{'--font-*'}: initial; // Do not use Tailwind's default font utilities.
|
|
71
76
|
--font-brand: var(--md-ref-typeface-brand);
|
|
72
77
|
--font-plain: var(--md-ref-typeface-plain);
|
|
78
|
+
--font-weight-normal: var(--md-ref-typeface-weight-regular);
|
|
79
|
+
--font-weight-medium: var(--md-ref-typeface-weight-medium);
|
|
80
|
+
--font-weight-bold: var(--md-ref-typeface-weight-bold);
|
|
73
81
|
#{'--text-*'}: initial; // Do not use Tailwind's default text utilities.
|
|
74
82
|
#{'--tracking-*'}: initial;
|
|
75
83
|
#{'--leading-*'}: initial;
|
|
76
84
|
// Use the `typescale-<name>-<size>` utility to apply typography tokens.
|
|
77
85
|
--typescale-label-sm: var(--md-sys-typescale-label-sm);
|
|
78
86
|
--typescale-label-sm-tracking: var(--md-sys-typescale-label-sm-tracking);
|
|
87
|
+
--typescale-label-sm-axes: var(--md-sys-typescale-label-sm-axes);
|
|
79
88
|
--typescale-label-md: var(--md-sys-typescale-label-md);
|
|
80
89
|
--typescale-label-md-tracking: var(--md-sys-typescale-label-md-tracking);
|
|
90
|
+
--typescale-label-md-axes: var(--md-sys-typescale-label-md-axes);
|
|
81
91
|
--typescale-label-lg: var(--md-sys-typescale-label-lg);
|
|
82
92
|
--typescale-label-lg-tracking: var(--md-sys-typescale-label-lg-tracking);
|
|
93
|
+
--typescale-label-lg-axes: var(--md-sys-typescale-label-lg-axes);
|
|
83
94
|
--typescale-body-sm: var(--md-sys-typescale-body-sm);
|
|
84
95
|
--typescale-body-sm-tracking: var(--md-sys-typescale-body-sm-tracking);
|
|
96
|
+
--typescale-body-sm-axes: var(--md-sys-typescale-body-sm-axes);
|
|
85
97
|
--typescale-body-md: var(--md-sys-typescale-body-md);
|
|
86
98
|
--typescale-body-md-tracking: var(--md-sys-typescale-body-md-tracking);
|
|
99
|
+
--typescale-body-md-axes: var(--md-sys-typescale-body-md-axes);
|
|
87
100
|
--typescale-body-lg: var(--md-sys-typescale-body-lg);
|
|
88
101
|
--typescale-body-lg-tracking: var(--md-sys-typescale-body-lg-tracking);
|
|
102
|
+
--typescale-body-lg-axes: var(--md-sys-typescale-body-lg-axes);
|
|
89
103
|
--typescale-title-sm: var(--md-sys-typescale-title-sm);
|
|
90
104
|
--typescale-title-sm-tracking: var(--md-sys-typescale-title-sm-tracking);
|
|
105
|
+
--typescale-title-sm-axes: var(--md-sys-typescale-title-sm-axes);
|
|
91
106
|
--typescale-title-md: var(--md-sys-typescale-title-md);
|
|
92
107
|
--typescale-title-md-tracking: var(--md-sys-typescale-title-md-tracking);
|
|
108
|
+
--typescale-title-md-axes: var(--md-sys-typescale-title-md-axes);
|
|
93
109
|
--typescale-title-lg: var(--md-sys-typescale-title-lg);
|
|
94
110
|
--typescale-title-lg-tracking: var(--md-sys-typescale-title-lg-tracking);
|
|
111
|
+
--typescale-title-lg-axes: var(--md-sys-typescale-title-lg-axes);
|
|
95
112
|
--typescale-headline-sm: var(--md-sys-typescale-headline-sm);
|
|
96
113
|
--typescale-headline-sm-tracking: var(
|
|
97
114
|
--md-sys-typescale-headline-sm-tracking
|
|
98
115
|
);
|
|
116
|
+
--typescale-headline-sm-axes: var(--md-sys-typescale-headline-sm-axes);
|
|
99
117
|
--typescale-headline-md: var(--md-sys-typescale-headline-md);
|
|
100
118
|
--typescale-headline-md-tracking: var(
|
|
101
119
|
--md-sys-typescale-headline-md-tracking
|
|
102
120
|
);
|
|
121
|
+
--typescale-headline-md-axes: var(--md-sys-typescale-headline-md-axes);
|
|
103
122
|
--typescale-headline-lg: var(--md-sys-typescale-headline-lg);
|
|
104
123
|
--typescale-headline-lg-tracking: var(
|
|
105
124
|
--md-sys-typescale-headline-lg-tracking
|
|
106
125
|
);
|
|
126
|
+
--typescale-headline-lg-axes: var(--md-sys-typescale-headline-lg-axes);
|
|
107
127
|
--typescale-display-sm: var(--md-sys-typescale-display-sm);
|
|
108
128
|
--typescale-display-sm-tracking: var(--md-sys-typescale-display-sm-tracking);
|
|
129
|
+
--typescale-display-sm-axes: var(--md-sys-typescale-display-sm-axes);
|
|
109
130
|
--typescale-display-md: var(--md-sys-typescale-display-md);
|
|
110
131
|
--typescale-display-md-tracking: var(--md-sys-typescale-display-md-tracking);
|
|
132
|
+
--typescale-display-md-axes: var(--md-sys-typescale-display-md-axes);
|
|
111
133
|
--typescale-display-lg: var(--md-sys-typescale-display-lg);
|
|
112
134
|
--typescale-display-lg-tracking: var(--md-sys-typescale-display-lg-tracking);
|
|
113
|
-
|
|
114
|
-
--
|
|
115
|
-
--
|
|
116
|
-
|
|
135
|
+
--typescale-display-lg-axes: var(--md-sys-typescale-display-lg-axes);
|
|
136
|
+
--typescale-emphasized-label-sm: var(--md-sys-typescale-emphasized-label-sm);
|
|
137
|
+
--typescale-emphasized-label-sm-axes: var(
|
|
138
|
+
--md-sys-typescale-emphasized-label-sm-axes
|
|
139
|
+
);
|
|
140
|
+
--typescale-emphasized-label-md: var(--md-sys-typescale-emphasized-label-md);
|
|
141
|
+
--typescale-emphasized-label-md-axes: var(
|
|
142
|
+
--md-sys-typescale-emphasized-label-md-axes
|
|
143
|
+
);
|
|
144
|
+
--typescale-emphasized-label-lg: var(--md-sys-typescale-emphasized-label-lg);
|
|
145
|
+
--typescale-emphasized-label-lg-axes: var(
|
|
146
|
+
--md-sys-typescale-emphasized-label-lg-axes
|
|
147
|
+
);
|
|
148
|
+
--typescale-emphasized-body-sm: var(--md-sys-typescale-emphasized-body-sm);
|
|
149
|
+
--typescale-emphasized-body-sm-axes: var(
|
|
150
|
+
--md-sys-typescale-emphasized-body-sm-axes
|
|
151
|
+
);
|
|
152
|
+
--typescale-emphasized-body-md: var(--md-sys-typescale-emphasized-body-md);
|
|
153
|
+
--typescale-emphasized-body-md-axes: var(
|
|
154
|
+
--md-sys-typescale-emphasized-body-md-axes
|
|
155
|
+
);
|
|
156
|
+
--typescale-emphasized-body-lg: var(--md-sys-typescale-emphasized-body-lg);
|
|
157
|
+
--typescale-emphasized-body-lg-axes: var(
|
|
158
|
+
--md-sys-typescale-emphasized-body-lg-axes
|
|
159
|
+
);
|
|
160
|
+
--typescale-emphasized-title-sm: var(--md-sys-typescale-emphasized-title-sm);
|
|
161
|
+
--typescale-emphasized-title-sm-axes: var(
|
|
162
|
+
--md-sys-typescale-emphasized-title-sm-axes
|
|
163
|
+
);
|
|
164
|
+
--typescale-emphasized-title-md: var(--md-sys-typescale-emphasized-title-md);
|
|
165
|
+
--typescale-emphasized-title-md-axes: var(
|
|
166
|
+
--md-sys-typescale-emphasized-title-md-axes
|
|
167
|
+
);
|
|
168
|
+
--typescale-emphasized-title-lg: var(--md-sys-typescale-emphasized-title-lg);
|
|
169
|
+
--typescale-emphasized-title-lg-axes: var(
|
|
170
|
+
--md-sys-typescale-emphasized-title-lg-axes
|
|
171
|
+
);
|
|
172
|
+
--typescale-emphasized-headline-sm: var(
|
|
173
|
+
--md-sys-typescale-emphasized-headline-sm
|
|
174
|
+
);
|
|
175
|
+
--typescale-emphasized-headline-sm-axes: var(
|
|
176
|
+
--md-sys-typescale-emphasized-headline-sm-axes
|
|
177
|
+
);
|
|
178
|
+
--typescale-emphasized-headline-md: var(
|
|
179
|
+
--md-sys-typescale-emphasized-headline-md
|
|
180
|
+
);
|
|
181
|
+
--typescale-emphasized-headline-md-axes: var(
|
|
182
|
+
--md-sys-typescale-emphasized-headline-md-axes
|
|
183
|
+
);
|
|
184
|
+
--typescale-emphasized-headline-lg: var(
|
|
185
|
+
--md-sys-typescale-emphasized-headline-lg
|
|
186
|
+
);
|
|
187
|
+
--typescale-emphasized-headline-lg-axes: var(
|
|
188
|
+
--md-sys-typescale-emphasized-headline-lg-axes
|
|
189
|
+
);
|
|
190
|
+
--typescale-emphasized-display-sm: var(
|
|
191
|
+
--md-sys-typescale-emphasized-display-sm
|
|
192
|
+
);
|
|
193
|
+
--typescale-emphasized-display-sm-axes: var(
|
|
194
|
+
--md-sys-typescale-emphasized-display-sm-axes
|
|
195
|
+
);
|
|
196
|
+
--typescale-emphasized-display-md: var(
|
|
197
|
+
--md-sys-typescale-emphasized-display-md
|
|
198
|
+
);
|
|
199
|
+
--typescale-emphasized-display-md-axes: var(
|
|
200
|
+
--md-sys-typescale-emphasized-display-md-axes
|
|
201
|
+
);
|
|
202
|
+
--typescale-emphasized-display-lg: var(
|
|
203
|
+
--md-sys-typescale-emphasized-display-lg
|
|
204
|
+
);
|
|
205
|
+
--typescale-emphasized-display-lg-axes: var(
|
|
206
|
+
--md-sys-typescale-emphasized-display-lg-axes
|
|
207
|
+
);
|
|
117
208
|
|
|
118
209
|
// Shape
|
|
119
210
|
--radius-xs: var(--md-sys-shape-corner-xs);
|
|
@@ -135,7 +226,24 @@
|
|
|
135
226
|
--shadow-2xl: initial; // Material does not have a 2xl shadow.
|
|
136
227
|
|
|
137
228
|
// Space
|
|
138
|
-
--spacing: var(--md-sys-space-
|
|
229
|
+
--spacing-s0: var(--md-sys-space-0);
|
|
230
|
+
--spacing-s25: var(--md-sys-space-25);
|
|
231
|
+
--spacing-s50: var(--md-sys-space-50);
|
|
232
|
+
--spacing-s75: var(--md-sys-space-75);
|
|
233
|
+
--spacing-s100: var(--md-sys-space-100);
|
|
234
|
+
--spacing-s125: var(--md-sys-space-125);
|
|
235
|
+
--spacing-s150: var(--md-sys-space-150);
|
|
236
|
+
--spacing-s175: var(--md-sys-space-175);
|
|
237
|
+
--spacing-s200: var(--md-sys-space-200);
|
|
238
|
+
--spacing-s250: var(--md-sys-space-250);
|
|
239
|
+
--spacing-s300: var(--md-sys-space-300);
|
|
240
|
+
--spacing-s400: var(--md-sys-space-400);
|
|
241
|
+
--spacing-s450: var(--md-sys-space-450);
|
|
242
|
+
--spacing-s500: var(--md-sys-space-500);
|
|
243
|
+
--spacing-s600: var(--md-sys-space-600);
|
|
244
|
+
--spacing-s700: var(--md-sys-space-700);
|
|
245
|
+
--spacing-s800: var(--md-sys-space-800);
|
|
246
|
+
--spacing-s900: var(--md-sys-space-900);
|
|
139
247
|
|
|
140
248
|
// Breakpoints
|
|
141
249
|
--breakpoint-sm: 600px; // medium
|
|
@@ -149,4 +257,93 @@
|
|
|
149
257
|
@utility typescale-* {
|
|
150
258
|
font: #{'--value(--typescale-*)'};
|
|
151
259
|
letter-spacing: #{'--value(--typescale-*-tracking)'};
|
|
260
|
+
font-variation-settings: #{'--value(--typescale-*-axes)'};
|
|
261
|
+
}
|
|
262
|
+
@utility typescale-emphasized-* {
|
|
263
|
+
font: #{'--value(--typescale-emphasized-*)'};
|
|
264
|
+
letter-spacing: #{'--value(--typescale-*-tracking)'};
|
|
265
|
+
font-variation-settings: #{'--value(--typescale-emphasized-*-axes)'};
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
// Add Material spacing utilities for padding, margin, and gap.
|
|
269
|
+
@utility p-* {
|
|
270
|
+
padding: #{'--value(--spacing-*)'};
|
|
271
|
+
}
|
|
272
|
+
@utility px-* {
|
|
273
|
+
padding-inline: #{'--value(--spacing-*)'};
|
|
274
|
+
}
|
|
275
|
+
@utility py-* {
|
|
276
|
+
padding-block: #{'--value(--spacing-*)'};
|
|
277
|
+
}
|
|
278
|
+
@utility pl-* {
|
|
279
|
+
padding-inline-start: #{'--value(--spacing-*)'};
|
|
280
|
+
}
|
|
281
|
+
@utility ps-* {
|
|
282
|
+
padding-inline-start: #{'--value(--spacing-*)'};
|
|
283
|
+
}
|
|
284
|
+
@utility pe-* {
|
|
285
|
+
padding-inline-end: #{'--value(--spacing-*)'};
|
|
286
|
+
}
|
|
287
|
+
@utility pr-* {
|
|
288
|
+
padding-inline-end: #{'--value(--spacing-*)'};
|
|
289
|
+
}
|
|
290
|
+
@utility pt-* {
|
|
291
|
+
padding-block-start: #{'--value(--spacing-*)'};
|
|
292
|
+
}
|
|
293
|
+
@utility pbs-* {
|
|
294
|
+
padding-block-start: #{'--value(--spacing-*)'};
|
|
295
|
+
}
|
|
296
|
+
@utility pb-* {
|
|
297
|
+
padding-block-end: #{'--value(--spacing-*)'};
|
|
298
|
+
}
|
|
299
|
+
@utility pbe-* {
|
|
300
|
+
padding-block-end: #{'--value(--spacing-*)'};
|
|
301
|
+
}
|
|
302
|
+
@utility m-* {
|
|
303
|
+
margin: #{'--value(--spacing-*)'};
|
|
304
|
+
}
|
|
305
|
+
@utility mx-* {
|
|
306
|
+
margin-inline: #{'--value(--spacing-*)'};
|
|
307
|
+
}
|
|
308
|
+
@utility my-* {
|
|
309
|
+
margin-block: #{'--value(--spacing-*)'};
|
|
310
|
+
}
|
|
311
|
+
@utility ml-* {
|
|
312
|
+
margin-inline-start: #{'--value(--spacing-*)'};
|
|
313
|
+
}
|
|
314
|
+
@utility ms-* {
|
|
315
|
+
margin-inline-start: #{'--value(--spacing-*)'};
|
|
316
|
+
}
|
|
317
|
+
@utility me-* {
|
|
318
|
+
margin-inline-end: #{'--value(--spacing-*)'};
|
|
319
|
+
}
|
|
320
|
+
@utility mr-* {
|
|
321
|
+
margin-inline-end: #{'--value(--spacing-*)'};
|
|
322
|
+
}
|
|
323
|
+
@utility mt-* {
|
|
324
|
+
margin-block-start: #{'--value(--spacing-*)'};
|
|
325
|
+
}
|
|
326
|
+
@utility mbs-* {
|
|
327
|
+
margin-block-start: #{'--value(--spacing-*)'};
|
|
328
|
+
}
|
|
329
|
+
@utility mb-* {
|
|
330
|
+
margin-block-end: #{'--value(--spacing-*)'};
|
|
331
|
+
}
|
|
332
|
+
@utility mbe-* {
|
|
333
|
+
margin-block-end: #{'--value(--spacing-*)'};
|
|
334
|
+
}
|
|
335
|
+
@utility gap-* {
|
|
336
|
+
gap: #{'--value(--spacing-*)'};
|
|
337
|
+
}
|
|
338
|
+
@utility gap-x-* {
|
|
339
|
+
column-gap: #{'--value(--spacing-*)'};
|
|
340
|
+
}
|
|
341
|
+
@utility gap-y-* {
|
|
342
|
+
row-gap: #{'--value(--spacing-*)'};
|
|
343
|
+
}
|
|
344
|
+
|
|
345
|
+
// Override Tailwind's default `display: list-item` utility, which clashes
|
|
346
|
+
// with the `.list-item` component class.
|
|
347
|
+
@utility list-item {
|
|
348
|
+
display: flex;
|
|
152
349
|
}
|
|
@@ -4,17 +4,24 @@
|
|
|
4
4
|
//
|
|
5
5
|
|
|
6
6
|
// go/keep-sorted start by_regex='(.+) prefix_order=sass:
|
|
7
|
+
@use 'sass:list';
|
|
7
8
|
@use 'sass:map';
|
|
8
9
|
@use 'sass:meta';
|
|
10
|
+
@use 'sass:string';
|
|
9
11
|
@use '../../../../../sass/ext/map_ext';
|
|
10
12
|
@use '../../../../../tokens/versions/latest/sass/md-ref-typeface';
|
|
11
13
|
@use '../../../../../tokens/versions/latest/sass/md-sys-typescale';
|
|
14
|
+
@use '../../../../../tokens/versions/latest/sass/md-sys-typescale-emphasized';
|
|
15
|
+
@use '../../../../../tokens/versions/latest/sass/md-sys-typescale-emphasized-meta';
|
|
12
16
|
@use '../../../../../tokens/versions/latest/sass/md-sys-typescale-meta';
|
|
13
17
|
// go/keep-sorted end
|
|
14
18
|
|
|
15
19
|
@mixin emit-custom-properties(
|
|
16
20
|
$typescale-vars: meta.module-variables(md-sys-typescale),
|
|
17
21
|
$typescale-meta: meta.module-variables(md-sys-typescale-meta),
|
|
22
|
+
$typescale-emphasized-vars: meta.module-variables(md-sys-typescale-emphasized),
|
|
23
|
+
$typescale-emphasized-meta:
|
|
24
|
+
meta.module-variables(md-sys-typescale-emphasized-meta),
|
|
18
25
|
$typeface-vars:
|
|
19
26
|
map.merge(
|
|
20
27
|
meta.module-variables(md-ref-typeface),
|
|
@@ -55,26 +62,88 @@
|
|
|
55
62
|
@each $scale in $scales {
|
|
56
63
|
@each $long-size, $short-size in $sizes {
|
|
57
64
|
$typescale: '#{$scale}-#{$long-size}';
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
);
|
|
62
|
-
$
|
|
63
|
-
|
|
64
|
-
$typescale-vars,
|
|
65
|
-
|
|
65
|
+
|
|
66
|
+
$font: _font($typescale, $typescale-vars, $typescale-meta);
|
|
67
|
+
$tracking: map_ext.get-strict($typescale-vars, '#{$typescale}-tracking');
|
|
68
|
+
$axes: _axes($typescale, $typescale-vars);
|
|
69
|
+
$emphasized-font: _font(
|
|
70
|
+
$typescale,
|
|
71
|
+
$typescale-emphasized-vars,
|
|
72
|
+
$typescale-emphasized-meta
|
|
66
73
|
);
|
|
67
|
-
$
|
|
68
|
-
$typescale
|
|
69
|
-
|
|
74
|
+
$emphasized-axes: _axes-emphasized(
|
|
75
|
+
$typescale,
|
|
76
|
+
$typescale-emphasized-vars
|
|
70
77
|
);
|
|
71
|
-
$tracking: map_ext.get-strict($typescale-vars, '#{$typescale}-tracking');
|
|
72
78
|
|
|
73
|
-
--md-sys-typescale-#{$scale}-#{$short-size}: #{$
|
|
74
|
-
#{$size} /
|
|
75
|
-
#{$line-height}
|
|
76
|
-
#{$font};
|
|
79
|
+
--md-sys-typescale-#{$scale}-#{$short-size}: #{$font};
|
|
77
80
|
--md-sys-typescale-#{$scale}-#{$short-size}-tracking: #{$tracking};
|
|
81
|
+
--md-sys-typescale-#{$scale}-#{$short-size}-axes: #{$axes};
|
|
82
|
+
--md-sys-typescale-emphasized-#{$scale}-#{$short-size}: #{$emphasized-font};
|
|
83
|
+
--md-sys-typescale-emphasized-#{$scale}-#{$short-size}-axes: #{$emphasized-axes};
|
|
78
84
|
}
|
|
79
85
|
}
|
|
80
86
|
}
|
|
87
|
+
|
|
88
|
+
/// Returns the `font` shorthand for a typescale from the provided token and
|
|
89
|
+
/// metadata variable maps.
|
|
90
|
+
@function _font($typescale, $vars, $meta) {
|
|
91
|
+
$weight: map_ext.get-strict($meta, '#{$typescale}-weight--resolved');
|
|
92
|
+
$size: map_ext.get-strict($vars, '#{$typescale}-size');
|
|
93
|
+
$line-height: map_ext.get-strict($vars, '#{$typescale}-line-height');
|
|
94
|
+
$family: map_ext.get-strict($meta, '#{$typescale}-font--resolved');
|
|
95
|
+
@return #{$weight} #{$size} / #{$line-height} #{$family};
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
/// Returns the `font-variation-settings` value for a typescale from the
|
|
99
|
+
/// provided token variable map. Returns `normal` if no axes are changed from
|
|
100
|
+
/// their default values.
|
|
101
|
+
@function _axes($typescale, $vars) {
|
|
102
|
+
$axes: ();
|
|
103
|
+
$axes: _append-axis($axes, map_ext.get-strict($vars, '#{$typescale}-rond'));
|
|
104
|
+
$axes: _append-axis($axes, map_ext.get-strict($vars, '#{$typescale}-grad'));
|
|
105
|
+
@if list.length($axes) == 0 {
|
|
106
|
+
@return normal;
|
|
107
|
+
}
|
|
108
|
+
@return $axes;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
// TODO: Remove this function once emphasized tokens are fixed to use `'ROND' 100`
|
|
112
|
+
@function _axes-emphasized($typescale, $vars) {
|
|
113
|
+
$axes: ();
|
|
114
|
+
$axes: _append-axis($axes, ('ROND' 100));
|
|
115
|
+
$axes: _append-axis($axes, map_ext.get-strict($vars, '#{$typescale}-grad'));
|
|
116
|
+
@return $axes;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
/// Appends a font axis to a list if it is not the default value for the axis.
|
|
120
|
+
@function _append-axis($axes, $axis) {
|
|
121
|
+
// Not all axes from Carbon are supported in gBreeze.
|
|
122
|
+
// - 'opsz': use `font-size`
|
|
123
|
+
// - 'slnt': use `font-style`
|
|
124
|
+
// - 'wdth': use `font-stretch`/`font-width`
|
|
125
|
+
// - 'wght': use `font-weight`
|
|
126
|
+
$default-axes: (
|
|
127
|
+
'ROND': 0,
|
|
128
|
+
'GRAD': 0,
|
|
129
|
+
// These axes are unused in Material, but included for Carbon completeness.
|
|
130
|
+
'CRSV': 0,
|
|
131
|
+
'FILL': 0,
|
|
132
|
+
'HEXP': 0,
|
|
133
|
+
);
|
|
134
|
+
$axis-tag: list.nth($axis, 1);
|
|
135
|
+
$axis-value: list.nth($axis, 2);
|
|
136
|
+
@if not map.has-key($default-axes, $axis-tag) {
|
|
137
|
+
// Do not append unsupported axes.
|
|
138
|
+
@return $axes;
|
|
139
|
+
}
|
|
140
|
+
@if map.get($default-axes, $axis-tag) == $axis-value {
|
|
141
|
+
// Do not append axes with default values.
|
|
142
|
+
@return $axes;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
// Manually add quotes since Sass removes them for custom property values,
|
|
146
|
+
// even with string.quote().
|
|
147
|
+
$axis: '"#{$axis-tag}" #{$axis-value}';
|
|
148
|
+
@return list.append($axes, $axis, $separator: comma);
|
|
149
|
+
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* Copyright 2026 Google LLC
|
|
3
3
|
* SPDX-License-Identifier: Apache-2.0
|
|
4
|
-
*/@layer md.sys.typescale{:root{--md-ref-typeface-brand: var(--md-ref-typeface-plain);--md-ref-typeface-plain: Roboto Flex, Roboto, Noto Sans, system-ui, sans-serif;--md-ref-typeface-weight-regular: 400;--md-ref-typeface-weight-medium: 500;--md-ref-typeface-weight-bold: 700;--md-sys-typescale-label-sm: var(--md-ref-typeface-weight-medium) 0.6875rem
|
|
4
|
+
*/@layer md.sys.typescale{:root{--md-ref-typeface-brand: var(--md-ref-typeface-plain);--md-ref-typeface-plain: Roboto Flex, Roboto, Noto Sans, system-ui, sans-serif;--md-ref-typeface-weight-regular: 400;--md-ref-typeface-weight-medium: 500;--md-ref-typeface-weight-bold: 700;--md-sys-typescale-label-sm: var(--md-ref-typeface-weight-medium) 0.6875rem/1rem var(--md-ref-typeface-plain);--md-sys-typescale-label-sm-tracking: 0.03125rem;--md-sys-typescale-label-sm-axes: normal;--md-sys-typescale-emphasized-label-sm: var(--md-ref-typeface-weight-bold) 0.6875rem/1rem var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-label-sm-axes: "ROND" 100;--md-sys-typescale-label-md: var(--md-ref-typeface-weight-medium) 0.75rem/1rem var(--md-ref-typeface-plain);--md-sys-typescale-label-md-tracking: 0.03125rem;--md-sys-typescale-label-md-axes: normal;--md-sys-typescale-emphasized-label-md: var(--md-ref-typeface-weight-bold) 0.75rem/1rem var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-label-md-axes: "ROND" 100;--md-sys-typescale-label-lg: var(--md-ref-typeface-weight-medium) 0.875rem/1.25rem var(--md-ref-typeface-plain);--md-sys-typescale-label-lg-tracking: 0.00625rem;--md-sys-typescale-label-lg-axes: normal;--md-sys-typescale-emphasized-label-lg: var(--md-ref-typeface-weight-bold) 0.875rem/1.25rem var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-label-lg-axes: "ROND" 100;--md-sys-typescale-body-sm: var(--md-ref-typeface-weight-regular) 0.75rem/1rem var(--md-ref-typeface-plain);--md-sys-typescale-body-sm-tracking: 0.025rem;--md-sys-typescale-body-sm-axes: normal;--md-sys-typescale-emphasized-body-sm: var(--md-ref-typeface-weight-medium) 0.75rem/1rem var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-body-sm-axes: "ROND" 100;--md-sys-typescale-body-md: var(--md-ref-typeface-weight-regular) 0.875rem/1.25rem var(--md-ref-typeface-plain);--md-sys-typescale-body-md-tracking: 0.015625rem;--md-sys-typescale-body-md-axes: normal;--md-sys-typescale-emphasized-body-md: var(--md-ref-typeface-weight-medium) 0.875rem/1.25rem var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-body-md-axes: "ROND" 100;--md-sys-typescale-body-lg: var(--md-ref-typeface-weight-regular) 1rem/1.5rem var(--md-ref-typeface-plain);--md-sys-typescale-body-lg-tracking: 0.03125rem;--md-sys-typescale-body-lg-axes: normal;--md-sys-typescale-emphasized-body-lg: var(--md-ref-typeface-weight-medium) 1rem/1.5rem var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-body-lg-axes: "ROND" 100;--md-sys-typescale-title-sm: var(--md-ref-typeface-weight-medium) 0.875rem/1.25rem var(--md-ref-typeface-plain);--md-sys-typescale-title-sm-tracking: 0.00625rem;--md-sys-typescale-title-sm-axes: normal;--md-sys-typescale-emphasized-title-sm: var(--md-ref-typeface-weight-bold) 0.875rem/1.25rem var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-title-sm-axes: "ROND" 100;--md-sys-typescale-title-md: var(--md-ref-typeface-weight-medium) 1rem/1.5rem var(--md-ref-typeface-plain);--md-sys-typescale-title-md-tracking: 0.009375rem;--md-sys-typescale-title-md-axes: normal;--md-sys-typescale-emphasized-title-md: var(--md-ref-typeface-weight-bold) 1rem/1.5rem var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-title-md-axes: "ROND" 100;--md-sys-typescale-title-lg: var(--md-ref-typeface-weight-regular) 1.375rem/1.75rem var(--md-ref-typeface-brand);--md-sys-typescale-title-lg-tracking: 0rem;--md-sys-typescale-title-lg-axes: normal;--md-sys-typescale-emphasized-title-lg: var(--md-ref-typeface-weight-medium) 1.375rem/1.75rem var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-title-lg-axes: "ROND" 100;--md-sys-typescale-headline-sm: var(--md-ref-typeface-weight-regular) 1.5rem/2rem var(--md-ref-typeface-brand);--md-sys-typescale-headline-sm-tracking: 0rem;--md-sys-typescale-headline-sm-axes: normal;--md-sys-typescale-emphasized-headline-sm: var(--md-ref-typeface-weight-medium) 1.5rem/2rem var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-headline-sm-axes: "ROND" 100;--md-sys-typescale-headline-md: var(--md-ref-typeface-weight-regular) 1.75rem/2.25rem var(--md-ref-typeface-brand);--md-sys-typescale-headline-md-tracking: 0rem;--md-sys-typescale-headline-md-axes: normal;--md-sys-typescale-emphasized-headline-md: var(--md-ref-typeface-weight-medium) 1.75rem/2.25rem var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-headline-md-axes: "ROND" 100;--md-sys-typescale-headline-lg: var(--md-ref-typeface-weight-regular) 2rem/2.5rem var(--md-ref-typeface-brand);--md-sys-typescale-headline-lg-tracking: 0rem;--md-sys-typescale-headline-lg-axes: normal;--md-sys-typescale-emphasized-headline-lg: var(--md-ref-typeface-weight-medium) 2rem/2.5rem var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-headline-lg-axes: "ROND" 100;--md-sys-typescale-display-sm: var(--md-ref-typeface-weight-regular) 2.25rem/2.75rem var(--md-ref-typeface-brand);--md-sys-typescale-display-sm-tracking: 0rem;--md-sys-typescale-display-sm-axes: normal;--md-sys-typescale-emphasized-display-sm: var(--md-ref-typeface-weight-medium) 2.25rem/2.75rem var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-display-sm-axes: "ROND" 100;--md-sys-typescale-display-md: var(--md-ref-typeface-weight-regular) 2.8125rem/3.25rem var(--md-ref-typeface-brand);--md-sys-typescale-display-md-tracking: 0rem;--md-sys-typescale-display-md-axes: normal;--md-sys-typescale-emphasized-display-md: var(--md-ref-typeface-weight-medium) 2.8125rem/3.25rem var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-display-md-axes: "ROND" 100;--md-sys-typescale-display-lg: var(--md-ref-typeface-weight-regular) 3.5625rem/4rem var(--md-ref-typeface-brand);--md-sys-typescale-display-lg-tracking: -0.015625rem;--md-sys-typescale-display-lg-axes: normal;--md-sys-typescale-emphasized-display-lg: var(--md-ref-typeface-weight-medium) 3.5625rem/4rem var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-display-lg-axes: "ROND" 100}}/*# sourceMappingURL=md-typography-tokens.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["md-typography-tokens.scss","internal/_typography-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,wBACE,
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["md-typography-tokens.scss","internal/_typography-tokens.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA,GASA,wBACE,MC6BA,sDACA,+EACA,sCAIA,qCAIA,mCA6BI,8GACA,iDACA,yCACA,uHACA,wDAJA,4GACA,iDACA,yCACA,qHACA,wDAJA,gHACA,iDACA,yCACA,yHACA,wDAJA,4GACA,8CACA,wCACA,sHACA,uDAJA,gHACA,iDACA,wCACA,0HACA,uDAJA,2GACA,gDACA,wCACA,qHACA,uDAJA,gHACA,iDACA,yCACA,yHACA,wDAJA,2GACA,kDACA,yCACA,oHACA,wDAJA,iHACA,2CACA,yCACA,2HACA,wDAJA,+GACA,8CACA,4CACA,yHACA,2DAJA,mHACA,8CACA,4CACA,6HACA,2DAJA,+GACA,8CACA,4CACA,yHACA,2DAJA,kHACA,6CACA,2CACA,4HACA,0DAJA,oHACA,6CACA,2CACA,8HACA,0DAJA,iHACA,qDACA,2CACA,2HACA","file":"md-typography-tokens.css"}
|
|
@@ -8,7 +8,7 @@ import { css } from 'lit';
|
|
|
8
8
|
export const styles = css `/*!
|
|
9
9
|
* Copyright 2026 Google LLC
|
|
10
10
|
* SPDX-License-Identifier: Apache-2.0
|
|
11
|
-
*/@layer md.sys.typescale{:root{--md-ref-typeface-brand: var(--md-ref-typeface-plain);--md-ref-typeface-plain: Roboto Flex, Roboto, Noto Sans, system-ui, sans-serif;--md-ref-typeface-weight-regular: 400;--md-ref-typeface-weight-medium: 500;--md-ref-typeface-weight-bold: 700;--md-sys-typescale-label-sm: var(--md-ref-typeface-weight-medium) 0.6875rem
|
|
11
|
+
*/@layer md.sys.typescale{:root{--md-ref-typeface-brand: var(--md-ref-typeface-plain);--md-ref-typeface-plain: Roboto Flex, Roboto, Noto Sans, system-ui, sans-serif;--md-ref-typeface-weight-regular: 400;--md-ref-typeface-weight-medium: 500;--md-ref-typeface-weight-bold: 700;--md-sys-typescale-label-sm: var(--md-ref-typeface-weight-medium) 0.6875rem/1rem var(--md-ref-typeface-plain);--md-sys-typescale-label-sm-tracking: 0.03125rem;--md-sys-typescale-label-sm-axes: normal;--md-sys-typescale-emphasized-label-sm: var(--md-ref-typeface-weight-bold) 0.6875rem/1rem var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-label-sm-axes: "ROND" 100;--md-sys-typescale-label-md: var(--md-ref-typeface-weight-medium) 0.75rem/1rem var(--md-ref-typeface-plain);--md-sys-typescale-label-md-tracking: 0.03125rem;--md-sys-typescale-label-md-axes: normal;--md-sys-typescale-emphasized-label-md: var(--md-ref-typeface-weight-bold) 0.75rem/1rem var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-label-md-axes: "ROND" 100;--md-sys-typescale-label-lg: var(--md-ref-typeface-weight-medium) 0.875rem/1.25rem var(--md-ref-typeface-plain);--md-sys-typescale-label-lg-tracking: 0.00625rem;--md-sys-typescale-label-lg-axes: normal;--md-sys-typescale-emphasized-label-lg: var(--md-ref-typeface-weight-bold) 0.875rem/1.25rem var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-label-lg-axes: "ROND" 100;--md-sys-typescale-body-sm: var(--md-ref-typeface-weight-regular) 0.75rem/1rem var(--md-ref-typeface-plain);--md-sys-typescale-body-sm-tracking: 0.025rem;--md-sys-typescale-body-sm-axes: normal;--md-sys-typescale-emphasized-body-sm: var(--md-ref-typeface-weight-medium) 0.75rem/1rem var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-body-sm-axes: "ROND" 100;--md-sys-typescale-body-md: var(--md-ref-typeface-weight-regular) 0.875rem/1.25rem var(--md-ref-typeface-plain);--md-sys-typescale-body-md-tracking: 0.015625rem;--md-sys-typescale-body-md-axes: normal;--md-sys-typescale-emphasized-body-md: var(--md-ref-typeface-weight-medium) 0.875rem/1.25rem var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-body-md-axes: "ROND" 100;--md-sys-typescale-body-lg: var(--md-ref-typeface-weight-regular) 1rem/1.5rem var(--md-ref-typeface-plain);--md-sys-typescale-body-lg-tracking: 0.03125rem;--md-sys-typescale-body-lg-axes: normal;--md-sys-typescale-emphasized-body-lg: var(--md-ref-typeface-weight-medium) 1rem/1.5rem var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-body-lg-axes: "ROND" 100;--md-sys-typescale-title-sm: var(--md-ref-typeface-weight-medium) 0.875rem/1.25rem var(--md-ref-typeface-plain);--md-sys-typescale-title-sm-tracking: 0.00625rem;--md-sys-typescale-title-sm-axes: normal;--md-sys-typescale-emphasized-title-sm: var(--md-ref-typeface-weight-bold) 0.875rem/1.25rem var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-title-sm-axes: "ROND" 100;--md-sys-typescale-title-md: var(--md-ref-typeface-weight-medium) 1rem/1.5rem var(--md-ref-typeface-plain);--md-sys-typescale-title-md-tracking: 0.009375rem;--md-sys-typescale-title-md-axes: normal;--md-sys-typescale-emphasized-title-md: var(--md-ref-typeface-weight-bold) 1rem/1.5rem var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-title-md-axes: "ROND" 100;--md-sys-typescale-title-lg: var(--md-ref-typeface-weight-regular) 1.375rem/1.75rem var(--md-ref-typeface-brand);--md-sys-typescale-title-lg-tracking: 0rem;--md-sys-typescale-title-lg-axes: normal;--md-sys-typescale-emphasized-title-lg: var(--md-ref-typeface-weight-medium) 1.375rem/1.75rem var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-title-lg-axes: "ROND" 100;--md-sys-typescale-headline-sm: var(--md-ref-typeface-weight-regular) 1.5rem/2rem var(--md-ref-typeface-brand);--md-sys-typescale-headline-sm-tracking: 0rem;--md-sys-typescale-headline-sm-axes: normal;--md-sys-typescale-emphasized-headline-sm: var(--md-ref-typeface-weight-medium) 1.5rem/2rem var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-headline-sm-axes: "ROND" 100;--md-sys-typescale-headline-md: var(--md-ref-typeface-weight-regular) 1.75rem/2.25rem var(--md-ref-typeface-brand);--md-sys-typescale-headline-md-tracking: 0rem;--md-sys-typescale-headline-md-axes: normal;--md-sys-typescale-emphasized-headline-md: var(--md-ref-typeface-weight-medium) 1.75rem/2.25rem var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-headline-md-axes: "ROND" 100;--md-sys-typescale-headline-lg: var(--md-ref-typeface-weight-regular) 2rem/2.5rem var(--md-ref-typeface-brand);--md-sys-typescale-headline-lg-tracking: 0rem;--md-sys-typescale-headline-lg-axes: normal;--md-sys-typescale-emphasized-headline-lg: var(--md-ref-typeface-weight-medium) 2rem/2.5rem var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-headline-lg-axes: "ROND" 100;--md-sys-typescale-display-sm: var(--md-ref-typeface-weight-regular) 2.25rem/2.75rem var(--md-ref-typeface-brand);--md-sys-typescale-display-sm-tracking: 0rem;--md-sys-typescale-display-sm-axes: normal;--md-sys-typescale-emphasized-display-sm: var(--md-ref-typeface-weight-medium) 2.25rem/2.75rem var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-display-sm-axes: "ROND" 100;--md-sys-typescale-display-md: var(--md-ref-typeface-weight-regular) 2.8125rem/3.25rem var(--md-ref-typeface-brand);--md-sys-typescale-display-md-tracking: 0rem;--md-sys-typescale-display-md-axes: normal;--md-sys-typescale-emphasized-display-md: var(--md-ref-typeface-weight-medium) 2.8125rem/3.25rem var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-display-md-axes: "ROND" 100;--md-sys-typescale-display-lg: var(--md-ref-typeface-weight-regular) 3.5625rem/4rem var(--md-ref-typeface-brand);--md-sys-typescale-display-lg-tracking: -0.015625rem;--md-sys-typescale-display-lg-axes: normal;--md-sys-typescale-emphasized-display-lg: var(--md-ref-typeface-weight-medium) 3.5625rem/4rem var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-display-lg-axes: "ROND" 100}}
|
|
12
12
|
`;
|
|
13
13
|
export default styles.styleSheet;
|
|
14
14
|
//# sourceMappingURL=md-typography-tokens.cssresult.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"md-typography-tokens.cssresult.js","sourceRoot":"","sources":["md-typography-tokens.cssresult.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,iFAAiF;AACjF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;CAIxB,CAAC;AACF,eAAe,MAAM,CAAC,UAAW,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n// Generated stylesheet for ./labs/gb/styles/typography/md-typography-tokens.css.\nimport {css} from 'lit';\nexport const styles = css`/*!\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */@layer md.sys.typescale{:root{--md-ref-typeface-brand: var(--md-ref-typeface-plain);--md-ref-typeface-plain: Roboto Flex, Roboto, Noto Sans, system-ui, sans-serif;--md-ref-typeface-weight-regular: 400;--md-ref-typeface-weight-medium: 500;--md-ref-typeface-weight-bold: 700;--md-sys-typescale-label-sm: var(--md-ref-typeface-weight-medium) 0.6875rem
|
|
1
|
+
{"version":3,"file":"md-typography-tokens.cssresult.js","sourceRoot":"","sources":["md-typography-tokens.cssresult.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,iFAAiF;AACjF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;CAIxB,CAAC;AACF,eAAe,MAAM,CAAC,UAAW,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n// Generated stylesheet for ./labs/gb/styles/typography/md-typography-tokens.css.\nimport {css} from 'lit';\nexport const styles = css`/*!\n * Copyright 2026 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */@layer md.sys.typescale{:root{--md-ref-typeface-brand: var(--md-ref-typeface-plain);--md-ref-typeface-plain: Roboto Flex, Roboto, Noto Sans, system-ui, sans-serif;--md-ref-typeface-weight-regular: 400;--md-ref-typeface-weight-medium: 500;--md-ref-typeface-weight-bold: 700;--md-sys-typescale-label-sm: var(--md-ref-typeface-weight-medium) 0.6875rem/1rem var(--md-ref-typeface-plain);--md-sys-typescale-label-sm-tracking: 0.03125rem;--md-sys-typescale-label-sm-axes: normal;--md-sys-typescale-emphasized-label-sm: var(--md-ref-typeface-weight-bold) 0.6875rem/1rem var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-label-sm-axes: \"ROND\" 100;--md-sys-typescale-label-md: var(--md-ref-typeface-weight-medium) 0.75rem/1rem var(--md-ref-typeface-plain);--md-sys-typescale-label-md-tracking: 0.03125rem;--md-sys-typescale-label-md-axes: normal;--md-sys-typescale-emphasized-label-md: var(--md-ref-typeface-weight-bold) 0.75rem/1rem var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-label-md-axes: \"ROND\" 100;--md-sys-typescale-label-lg: var(--md-ref-typeface-weight-medium) 0.875rem/1.25rem var(--md-ref-typeface-plain);--md-sys-typescale-label-lg-tracking: 0.00625rem;--md-sys-typescale-label-lg-axes: normal;--md-sys-typescale-emphasized-label-lg: var(--md-ref-typeface-weight-bold) 0.875rem/1.25rem var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-label-lg-axes: \"ROND\" 100;--md-sys-typescale-body-sm: var(--md-ref-typeface-weight-regular) 0.75rem/1rem var(--md-ref-typeface-plain);--md-sys-typescale-body-sm-tracking: 0.025rem;--md-sys-typescale-body-sm-axes: normal;--md-sys-typescale-emphasized-body-sm: var(--md-ref-typeface-weight-medium) 0.75rem/1rem var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-body-sm-axes: \"ROND\" 100;--md-sys-typescale-body-md: var(--md-ref-typeface-weight-regular) 0.875rem/1.25rem var(--md-ref-typeface-plain);--md-sys-typescale-body-md-tracking: 0.015625rem;--md-sys-typescale-body-md-axes: normal;--md-sys-typescale-emphasized-body-md: var(--md-ref-typeface-weight-medium) 0.875rem/1.25rem var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-body-md-axes: \"ROND\" 100;--md-sys-typescale-body-lg: var(--md-ref-typeface-weight-regular) 1rem/1.5rem var(--md-ref-typeface-plain);--md-sys-typescale-body-lg-tracking: 0.03125rem;--md-sys-typescale-body-lg-axes: normal;--md-sys-typescale-emphasized-body-lg: var(--md-ref-typeface-weight-medium) 1rem/1.5rem var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-body-lg-axes: \"ROND\" 100;--md-sys-typescale-title-sm: var(--md-ref-typeface-weight-medium) 0.875rem/1.25rem var(--md-ref-typeface-plain);--md-sys-typescale-title-sm-tracking: 0.00625rem;--md-sys-typescale-title-sm-axes: normal;--md-sys-typescale-emphasized-title-sm: var(--md-ref-typeface-weight-bold) 0.875rem/1.25rem var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-title-sm-axes: \"ROND\" 100;--md-sys-typescale-title-md: var(--md-ref-typeface-weight-medium) 1rem/1.5rem var(--md-ref-typeface-plain);--md-sys-typescale-title-md-tracking: 0.009375rem;--md-sys-typescale-title-md-axes: normal;--md-sys-typescale-emphasized-title-md: var(--md-ref-typeface-weight-bold) 1rem/1.5rem var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-title-md-axes: \"ROND\" 100;--md-sys-typescale-title-lg: var(--md-ref-typeface-weight-regular) 1.375rem/1.75rem var(--md-ref-typeface-brand);--md-sys-typescale-title-lg-tracking: 0rem;--md-sys-typescale-title-lg-axes: normal;--md-sys-typescale-emphasized-title-lg: var(--md-ref-typeface-weight-medium) 1.375rem/1.75rem var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-title-lg-axes: \"ROND\" 100;--md-sys-typescale-headline-sm: var(--md-ref-typeface-weight-regular) 1.5rem/2rem var(--md-ref-typeface-brand);--md-sys-typescale-headline-sm-tracking: 0rem;--md-sys-typescale-headline-sm-axes: normal;--md-sys-typescale-emphasized-headline-sm: var(--md-ref-typeface-weight-medium) 1.5rem/2rem var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-headline-sm-axes: \"ROND\" 100;--md-sys-typescale-headline-md: var(--md-ref-typeface-weight-regular) 1.75rem/2.25rem var(--md-ref-typeface-brand);--md-sys-typescale-headline-md-tracking: 0rem;--md-sys-typescale-headline-md-axes: normal;--md-sys-typescale-emphasized-headline-md: var(--md-ref-typeface-weight-medium) 1.75rem/2.25rem var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-headline-md-axes: \"ROND\" 100;--md-sys-typescale-headline-lg: var(--md-ref-typeface-weight-regular) 2rem/2.5rem var(--md-ref-typeface-brand);--md-sys-typescale-headline-lg-tracking: 0rem;--md-sys-typescale-headline-lg-axes: normal;--md-sys-typescale-emphasized-headline-lg: var(--md-ref-typeface-weight-medium) 2rem/2.5rem var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-headline-lg-axes: \"ROND\" 100;--md-sys-typescale-display-sm: var(--md-ref-typeface-weight-regular) 2.25rem/2.75rem var(--md-ref-typeface-brand);--md-sys-typescale-display-sm-tracking: 0rem;--md-sys-typescale-display-sm-axes: normal;--md-sys-typescale-emphasized-display-sm: var(--md-ref-typeface-weight-medium) 2.25rem/2.75rem var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-display-sm-axes: \"ROND\" 100;--md-sys-typescale-display-md: var(--md-ref-typeface-weight-regular) 2.8125rem/3.25rem var(--md-ref-typeface-brand);--md-sys-typescale-display-md-tracking: 0rem;--md-sys-typescale-display-md-axes: normal;--md-sys-typescale-emphasized-display-md: var(--md-ref-typeface-weight-medium) 2.8125rem/3.25rem var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-display-md-axes: \"ROND\" 100;--md-sys-typescale-display-lg: var(--md-ref-typeface-weight-regular) 3.5625rem/4rem var(--md-ref-typeface-brand);--md-sys-typescale-display-lg-tracking: -0.015625rem;--md-sys-typescale-display-lg-axes: normal;--md-sys-typescale-emphasized-display-lg: var(--md-ref-typeface-weight-medium) 3.5625rem/4rem var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-display-lg-axes: \"ROND\" 100}}\n`;\nexport default styles.styleSheet!;\n"]}
|
|
@@ -16,7 +16,10 @@ export type ListItemType = 'text' | 'button' | 'link';
|
|
|
16
16
|
declare const listItemBaseClass: import("../../../labs/behaviors/mixin.js").MixinReturn<typeof LitElement>;
|
|
17
17
|
/**
|
|
18
18
|
* @fires request-activation {Event} Requests the list to set `tabindex=0` on
|
|
19
|
-
* the item and focus it.
|
|
19
|
+
* the item and focus it. Used internally for list keyboard navigation; most
|
|
20
|
+
* applications do not need to listen for this event. It is exposed for
|
|
21
|
+
* authors building their own list-item replacements or wrapping items in a
|
|
22
|
+
* custom controller. --bubbles --composed
|
|
20
23
|
*/
|
|
21
24
|
export declare class ListItemEl extends listItemBaseClass implements ListItem {
|
|
22
25
|
/** @nocollapse */
|
|
@@ -17,7 +17,10 @@ import { createRequestActivationEvent, } from '../list-navigation-helpers.js';
|
|
|
17
17
|
const listItemBaseClass = mixinDelegatesAria(LitElement);
|
|
18
18
|
/**
|
|
19
19
|
* @fires request-activation {Event} Requests the list to set `tabindex=0` on
|
|
20
|
-
* the item and focus it.
|
|
20
|
+
* the item and focus it. Used internally for list keyboard navigation; most
|
|
21
|
+
* applications do not need to listen for this event. It is exposed for
|
|
22
|
+
* authors building their own list-item replacements or wrapping items in a
|
|
23
|
+
* custom controller. --bubbles --composed
|
|
21
24
|
*/
|
|
22
25
|
export class ListItemEl extends listItemBaseClass {
|
|
23
26
|
constructor() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"list-item.js","sourceRoot":"","sources":["list-item.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,iCAAiC,CAAC;AACzC,OAAO,4BAA4B,CAAC;AACpC,OAAO,2BAA2B,CAAC;AAEnC,OAAO,EAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAiC,MAAM,KAAK,CAAC;AAC9E,OAAO,EAAC,QAAQ,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAY,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAChE,OAAO,EAAC,OAAO,EAAE,IAAI,IAAI,UAAU,EAAc,MAAM,oBAAoB,CAAC;AAG5E,OAAO,EAAC,kBAAkB,EAAC,MAAM,oCAAoC,CAAC;AACtE,OAAO,EACL,4BAA4B,GAE7B,MAAM,+BAA+B,CAAC;AAOvC,wCAAwC;AACxC,MAAM,iBAAiB,GAAG,kBAAkB,CAAC,UAAU,CAAC,CAAC;AAEzD;;;GAGG;AACH,MAAM,OAAO,UAAW,SAAQ,iBAAiB;IAAjD;;QAOE;;WAEG;QACuC,aAAQ,GAAG,KAAK,CAAC;QAE3D;;;WAGG;QACwB,SAAI,GAAiB,MAAM,CAAC;QAEvD;;WAEG;QAEH,eAAU,GAAG,IAAI,CAAC;QAElB;;WAEG;QACS,SAAI,GAAG,EAAE,CAAC;QAEtB;;;WAGG;QACS,WAAM,GAAiD,EAAE,CAAC;IAsJxE,CAAC;IAlJC,IAAY,UAAU;QACpB,OAAO,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC;IAC/C,CAAC;IAEkB,UAAU,CAAC,OAAmC;QAC/D,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC;QACrB,CAAC;QAED,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;IAC5B,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAC,cAAc,CAAC,IAAI,CAAA;;;YAGvB,IAAI,CAAC,YAAY,EAAE,IAAI,IAAI,CAAC,eAAe,EAAE;;;;UAI/C,IAAI,CAAC,UAAU,EAAE;;KAEtB,CAAC,CAAC;IACL,CAAC;IAED;;;;OAIG;IACO,cAAc,CAAC,OAAgB;QACvC,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC;QACtC,IAAI,GAAgB,CAAC;QACrB,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAClB,KAAK,MAAM;gBACT,GAAG,GAAG,OAAO,CAAA,GAAG,CAAC;gBACjB,MAAM;YACR,KAAK,QAAQ;gBACX,GAAG,GAAG,OAAO,CAAA,QAAQ,CAAC;gBACtB,MAAM;YACR,QAAQ;YACR,KAAK,MAAM;gBACT,GAAG,GAAG,OAAO,CAAA,IAAI,CAAC;gBAClB,MAAM;QACV,CAAC;QAED,MAAM,aAAa,GAAG,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC;QAC3C,2EAA2E;QAC3E,0DAA0D;QAC1D,MAAM,MAAM,GAAG,QAAQ,IAAI,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;QACjE,OAAO,UAAU,CAAA;SACZ,GAAG;;oBAEQ,IAAI,CAAC,UAAU,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;oBAC1C,IAAI,CAAC,UAAU;;wBAEV,IAAwB,CAAC,YAAY,IAAI,OAAO;uBACjD,IAAwB,CAAC,WAAW,IAAI,OAAO;wBAC9C,IAAwB,CAAC,YAAY,IAAI,OAAO;wBAChD,IAAwB,CAAC,YAAY,IAAI,OAAO;2BAC9C,QAAQ,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC;eAC7C,IAAI,CAAC,IAAI,IAAI,OAAO;iBAClB,MAAM;iBACN,IAAI,CAAC,OAAO;SACpB,OAAO,KAAK,GAAG;KACnB,CAAC;IACJ,CAAC;IAED;;OAEG;IACO,YAAY;QACpB,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;YACzB,OAAO,OAAO,CAAC;QACjB,CAAC;QAED,OAAO,IAAI,CAAA;;;kBAGG,IAAI,CAAC,UAAU,eAAe,CAAC;IAC/C,CAAC;IAED;;OAEG;IACO,eAAe;QACvB,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;YACzB,OAAO,OAAO,CAAC;QACjB,CAAC;QAED,OAAO,IAAI,CAAA;4BACa,IAAI,CAAC,4BAA4B;;;8BAG/B,CAAC;IAC7B,CAAC;IAES,4BAA4B,CAAC,CAAQ,IAAG,CAAC;IAEnD;;OAEG;IACO,gBAAgB;QACxB,OAAO,EAAC,UAAU,EAAE,IAAI,CAAC,UAAU,EAAC,CAAC;IACvC,CAAC;IAED;;OAEG;IACO,UAAU;QAClB,OAAO,IAAI,CAAA;;;;;;;;KAQV,CAAC;IACJ,CAAC;IAES,OAAO;QACf,IAAI,IAAI,CAAC,QAAQ,KAAK,CAAC,CAAC,EAAE,CAAC;YACzB,OAAO;QACT,CAAC;QACD,uEAAuE;QACvE,IAAI,CAAC,aAAa,CAAC,4BAA4B,EAAE,CAAC,CAAC;IACrD,CAAC;IAEQ,KAAK;QACZ,wEAAwE;QACxE,qDAAqD;QACrD,IAAI,CAAC,YAAY,EAAE,KAAK,EAAE,CAAC;IAC7B,CAAC;IAEQ,KAAK;QACZ,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;YACvB,wEAAwE;YACxE,yBAAyB;YACzB,KAAK,CAAC,KAAK,EAAE,CAAC;YACd,OAAO;QACT,CAAC;QAED,2EAA2E;QAC3E,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC;IAC5B,CAAC;;AArLD,kBAAkB;AACF,4BAAiB,GAAG;IAClC,GAAG,UAAU,CAAC,iBAAiB;IAC/B,cAAc,EAAE,IAAI;CACrB,AAHgC,CAG/B;AAKwC;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;4CAAkB;AAMhC;IAA1B,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;wCAA6B;AAMvD;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;8CAClD;AAKN;IAAX,QAAQ,EAAE;wCAAW;AAMV;IAAX,QAAQ,EAAE;0CAA2D;AAE9B;IAAvC,KAAK,CAAC,YAAY,CAAC;gDAAsD","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../../focus/md-focus-ring.js';\nimport '../../../labs/item/item.js';\nimport '../../../ripple/ripple.js';\n\nimport {html, LitElement, nothing, PropertyValues, TemplateResult} from 'lit';\nimport {property, query} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\nimport {literal, html as staticHtml, StaticValue} from 'lit/static-html.js';\n\nimport {ARIAMixinStrict} from '../../../internal/aria/aria.js';\nimport {mixinDelegatesAria} from '../../../internal/aria/delegate.js';\nimport {\n createRequestActivationEvent,\n ListItem,\n} from '../list-navigation-helpers.js';\n\n/**\n * Supported behaviors for a list item.\n */\nexport type ListItemType = 'text' | 'button' | 'link';\n\n// Separate variable needed for closure.\nconst listItemBaseClass = mixinDelegatesAria(LitElement);\n\n/**\n * @fires request-activation {Event} Requests the list to set `tabindex=0` on\n * the item and focus it. --bubbles --composed\n */\nexport class ListItemEl extends listItemBaseClass implements ListItem {\n /** @nocollapse */\n static override shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n /**\n * Disables the item and makes it non-selectable and non-interactive.\n */\n @property({type: Boolean, reflect: true}) disabled = false;\n\n /**\n * Sets the behavior of the list item, defaults to \"text\". Change to \"link\" or\n * \"button\" for interactive items.\n */\n @property({reflect: true}) type: ListItemType = 'text';\n\n /**\n * READONLY. Sets the `md-list-item` attribute on the element.\n */\n @property({type: Boolean, attribute: 'md-list-item', reflect: true})\n isListItem = true;\n\n /**\n * Sets the underlying `HTMLAnchorElement`'s `href` resource attribute.\n */\n @property() href = '';\n\n /**\n * Sets the underlying `HTMLAnchorElement`'s `target` attribute when `href` is\n * set.\n */\n @property() target: '_blank' | '_parent' | '_self' | '_top' | '' = '';\n\n @query('.list-item') protected readonly listItemRoot!: HTMLElement | null;\n\n private get isDisabled() {\n return this.disabled && this.type !== 'link';\n }\n\n protected override willUpdate(changed: PropertyValues<ListItemEl>) {\n if (this.href) {\n this.type = 'link';\n }\n\n super.willUpdate(changed);\n }\n\n protected override render() {\n return this.renderListItem(html`\n <md-item>\n <div slot=\"container\">\n ${this.renderRipple()} ${this.renderFocusRing()}\n </div>\n <slot name=\"start\" slot=\"start\"></slot>\n <slot name=\"end\" slot=\"end\"></slot>\n ${this.renderBody()}\n </md-item>\n `);\n }\n\n /**\n * Renders the root list item.\n *\n * @param content the child content of the list item.\n */\n protected renderListItem(content: unknown) {\n const isAnchor = this.type === 'link';\n let tag: StaticValue;\n switch (this.type) {\n case 'link':\n tag = literal`a`;\n break;\n case 'button':\n tag = literal`button`;\n break;\n default:\n case 'text':\n tag = literal`li`;\n break;\n }\n\n const isInteractive = this.type !== 'text';\n // TODO(b/265339866): announce \"button\"/\"link\" inside of a list item. Until\n // then all are \"listitem\" roles for correct announcement.\n const target = isAnchor && !!this.target ? this.target : nothing;\n return staticHtml`\n <${tag}\n id=\"item\"\n tabindex=\"${this.isDisabled || !isInteractive ? -1 : 0}\"\n ?disabled=${this.isDisabled}\n role=\"listitem\"\n aria-selected=${(this as ARIAMixinStrict).ariaSelected || nothing}\n aria-checked=${(this as ARIAMixinStrict).ariaChecked || nothing}\n aria-expanded=${(this as ARIAMixinStrict).ariaExpanded || nothing}\n aria-haspopup=${(this as ARIAMixinStrict).ariaHasPopup || nothing}\n class=\"list-item ${classMap(this.getRenderClasses())}\"\n href=${this.href || nothing}\n target=${target}\n @focus=${this.onFocus}\n >${content}</${tag}>\n `;\n }\n\n /**\n * Handles rendering of the ripple element.\n */\n protected renderRipple(): TemplateResult | typeof nothing {\n if (this.type === 'text') {\n return nothing;\n }\n\n return html` <md-ripple\n part=\"ripple\"\n for=\"item\"\n ?disabled=${this.isDisabled}></md-ripple>`;\n }\n\n /**\n * Handles rendering of the focus ring.\n */\n protected renderFocusRing(): TemplateResult | typeof nothing {\n if (this.type === 'text') {\n return nothing;\n }\n\n return html` <md-focus-ring\n @visibility-changed=${this.onFocusRingVisibilityChanged}\n part=\"focus-ring\"\n for=\"item\"\n inward></md-focus-ring>`;\n }\n\n protected onFocusRingVisibilityChanged(e: Event) {}\n\n /**\n * Classes applied to the list item root.\n */\n protected getRenderClasses(): ClassInfo {\n return {'disabled': this.isDisabled};\n }\n\n /**\n * Handles rendering the headline and supporting text.\n */\n protected renderBody() {\n return html`\n <slot></slot>\n <slot name=\"overline\" slot=\"overline\"></slot>\n <slot name=\"headline\" slot=\"headline\"></slot>\n <slot name=\"supporting-text\" slot=\"supporting-text\"></slot>\n <slot\n name=\"trailing-supporting-text\"\n slot=\"trailing-supporting-text\"></slot>\n `;\n }\n\n protected onFocus() {\n if (this.tabIndex !== -1) {\n return;\n }\n // Handles the case where the user clicks on the element and then tabs.\n this.dispatchEvent(createRequestActivationEvent());\n }\n\n override focus() {\n // TODO(b/300334509): needed for some cases where delegatesFocus doesn't\n // work programmatically like in FF and select-option\n this.listItemRoot?.focus();\n }\n\n override click() {\n if (!this.listItemRoot) {\n // If the element has not finished rendering, call super to ensure click\n // events are dispatched.\n super.click();\n return;\n }\n\n // Forward click to the element to ensure link <a>.click() works correctly.\n this.listItemRoot.click();\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"list-item.js","sourceRoot":"","sources":["list-item.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,iCAAiC,CAAC;AACzC,OAAO,4BAA4B,CAAC;AACpC,OAAO,2BAA2B,CAAC;AAEnC,OAAO,EAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAiC,MAAM,KAAK,CAAC;AAC9E,OAAO,EAAC,QAAQ,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAY,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAChE,OAAO,EAAC,OAAO,EAAE,IAAI,IAAI,UAAU,EAAc,MAAM,oBAAoB,CAAC;AAG5E,OAAO,EAAC,kBAAkB,EAAC,MAAM,oCAAoC,CAAC;AACtE,OAAO,EACL,4BAA4B,GAE7B,MAAM,+BAA+B,CAAC;AAOvC,wCAAwC;AACxC,MAAM,iBAAiB,GAAG,kBAAkB,CAAC,UAAU,CAAC,CAAC;AAEzD;;;;;;GAMG;AACH,MAAM,OAAO,UAAW,SAAQ,iBAAiB;IAAjD;;QAOE;;WAEG;QACuC,aAAQ,GAAG,KAAK,CAAC;QAE3D;;;WAGG;QACwB,SAAI,GAAiB,MAAM,CAAC;QAEvD;;WAEG;QAEH,eAAU,GAAG,IAAI,CAAC;QAElB;;WAEG;QACS,SAAI,GAAG,EAAE,CAAC;QAEtB;;;WAGG;QACS,WAAM,GAAiD,EAAE,CAAC;IAsJxE,CAAC;IAlJC,IAAY,UAAU;QACpB,OAAO,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC;IAC/C,CAAC;IAEkB,UAAU,CAAC,OAAmC;QAC/D,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC;QACrB,CAAC;QAED,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;IAC5B,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAC,cAAc,CAAC,IAAI,CAAA;;;YAGvB,IAAI,CAAC,YAAY,EAAE,IAAI,IAAI,CAAC,eAAe,EAAE;;;;UAI/C,IAAI,CAAC,UAAU,EAAE;;KAEtB,CAAC,CAAC;IACL,CAAC;IAED;;;;OAIG;IACO,cAAc,CAAC,OAAgB;QACvC,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC;QACtC,IAAI,GAAgB,CAAC;QACrB,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAClB,KAAK,MAAM;gBACT,GAAG,GAAG,OAAO,CAAA,GAAG,CAAC;gBACjB,MAAM;YACR,KAAK,QAAQ;gBACX,GAAG,GAAG,OAAO,CAAA,QAAQ,CAAC;gBACtB,MAAM;YACR,QAAQ;YACR,KAAK,MAAM;gBACT,GAAG,GAAG,OAAO,CAAA,IAAI,CAAC;gBAClB,MAAM;QACV,CAAC;QAED,MAAM,aAAa,GAAG,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC;QAC3C,2EAA2E;QAC3E,0DAA0D;QAC1D,MAAM,MAAM,GAAG,QAAQ,IAAI,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;QACjE,OAAO,UAAU,CAAA;SACZ,GAAG;;oBAEQ,IAAI,CAAC,UAAU,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;oBAC1C,IAAI,CAAC,UAAU;;wBAEV,IAAwB,CAAC,YAAY,IAAI,OAAO;uBACjD,IAAwB,CAAC,WAAW,IAAI,OAAO;wBAC9C,IAAwB,CAAC,YAAY,IAAI,OAAO;wBAChD,IAAwB,CAAC,YAAY,IAAI,OAAO;2BAC9C,QAAQ,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC;eAC7C,IAAI,CAAC,IAAI,IAAI,OAAO;iBAClB,MAAM;iBACN,IAAI,CAAC,OAAO;SACpB,OAAO,KAAK,GAAG;KACnB,CAAC;IACJ,CAAC;IAED;;OAEG;IACO,YAAY;QACpB,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;YACzB,OAAO,OAAO,CAAC;QACjB,CAAC;QAED,OAAO,IAAI,CAAA;;;kBAGG,IAAI,CAAC,UAAU,eAAe,CAAC;IAC/C,CAAC;IAED;;OAEG;IACO,eAAe;QACvB,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;YACzB,OAAO,OAAO,CAAC;QACjB,CAAC;QAED,OAAO,IAAI,CAAA;4BACa,IAAI,CAAC,4BAA4B;;;8BAG/B,CAAC;IAC7B,CAAC;IAES,4BAA4B,CAAC,CAAQ,IAAG,CAAC;IAEnD;;OAEG;IACO,gBAAgB;QACxB,OAAO,EAAC,UAAU,EAAE,IAAI,CAAC,UAAU,EAAC,CAAC;IACvC,CAAC;IAED;;OAEG;IACO,UAAU;QAClB,OAAO,IAAI,CAAA;;;;;;;;KAQV,CAAC;IACJ,CAAC;IAES,OAAO;QACf,IAAI,IAAI,CAAC,QAAQ,KAAK,CAAC,CAAC,EAAE,CAAC;YACzB,OAAO;QACT,CAAC;QACD,uEAAuE;QACvE,IAAI,CAAC,aAAa,CAAC,4BAA4B,EAAE,CAAC,CAAC;IACrD,CAAC;IAEQ,KAAK;QACZ,wEAAwE;QACxE,qDAAqD;QACrD,IAAI,CAAC,YAAY,EAAE,KAAK,EAAE,CAAC;IAC7B,CAAC;IAEQ,KAAK;QACZ,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;YACvB,wEAAwE;YACxE,yBAAyB;YACzB,KAAK,CAAC,KAAK,EAAE,CAAC;YACd,OAAO;QACT,CAAC;QAED,2EAA2E;QAC3E,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC;IAC5B,CAAC;;AArLD,kBAAkB;AACF,4BAAiB,GAAG;IAClC,GAAG,UAAU,CAAC,iBAAiB;IAC/B,cAAc,EAAE,IAAI;CACrB,AAHgC,CAG/B;AAKwC;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;4CAAkB;AAMhC;IAA1B,QAAQ,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;wCAA6B;AAMvD;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;8CAClD;AAKN;IAAX,QAAQ,EAAE;wCAAW;AAMV;IAAX,QAAQ,EAAE;0CAA2D;AAE9B;IAAvC,KAAK,CAAC,YAAY,CAAC;gDAAsD","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../../focus/md-focus-ring.js';\nimport '../../../labs/item/item.js';\nimport '../../../ripple/ripple.js';\n\nimport {html, LitElement, nothing, PropertyValues, TemplateResult} from 'lit';\nimport {property, query} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\nimport {literal, html as staticHtml, StaticValue} from 'lit/static-html.js';\n\nimport {ARIAMixinStrict} from '../../../internal/aria/aria.js';\nimport {mixinDelegatesAria} from '../../../internal/aria/delegate.js';\nimport {\n createRequestActivationEvent,\n ListItem,\n} from '../list-navigation-helpers.js';\n\n/**\n * Supported behaviors for a list item.\n */\nexport type ListItemType = 'text' | 'button' | 'link';\n\n// Separate variable needed for closure.\nconst listItemBaseClass = mixinDelegatesAria(LitElement);\n\n/**\n * @fires request-activation {Event} Requests the list to set `tabindex=0` on\n * the item and focus it. Used internally for list keyboard navigation; most\n * applications do not need to listen for this event. It is exposed for\n * authors building their own list-item replacements or wrapping items in a\n * custom controller. --bubbles --composed\n */\nexport class ListItemEl extends listItemBaseClass implements ListItem {\n /** @nocollapse */\n static override shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n /**\n * Disables the item and makes it non-selectable and non-interactive.\n */\n @property({type: Boolean, reflect: true}) disabled = false;\n\n /**\n * Sets the behavior of the list item, defaults to \"text\". Change to \"link\" or\n * \"button\" for interactive items.\n */\n @property({reflect: true}) type: ListItemType = 'text';\n\n /**\n * READONLY. Sets the `md-list-item` attribute on the element.\n */\n @property({type: Boolean, attribute: 'md-list-item', reflect: true})\n isListItem = true;\n\n /**\n * Sets the underlying `HTMLAnchorElement`'s `href` resource attribute.\n */\n @property() href = '';\n\n /**\n * Sets the underlying `HTMLAnchorElement`'s `target` attribute when `href` is\n * set.\n */\n @property() target: '_blank' | '_parent' | '_self' | '_top' | '' = '';\n\n @query('.list-item') protected readonly listItemRoot!: HTMLElement | null;\n\n private get isDisabled() {\n return this.disabled && this.type !== 'link';\n }\n\n protected override willUpdate(changed: PropertyValues<ListItemEl>) {\n if (this.href) {\n this.type = 'link';\n }\n\n super.willUpdate(changed);\n }\n\n protected override render() {\n return this.renderListItem(html`\n <md-item>\n <div slot=\"container\">\n ${this.renderRipple()} ${this.renderFocusRing()}\n </div>\n <slot name=\"start\" slot=\"start\"></slot>\n <slot name=\"end\" slot=\"end\"></slot>\n ${this.renderBody()}\n </md-item>\n `);\n }\n\n /**\n * Renders the root list item.\n *\n * @param content the child content of the list item.\n */\n protected renderListItem(content: unknown) {\n const isAnchor = this.type === 'link';\n let tag: StaticValue;\n switch (this.type) {\n case 'link':\n tag = literal`a`;\n break;\n case 'button':\n tag = literal`button`;\n break;\n default:\n case 'text':\n tag = literal`li`;\n break;\n }\n\n const isInteractive = this.type !== 'text';\n // TODO(b/265339866): announce \"button\"/\"link\" inside of a list item. Until\n // then all are \"listitem\" roles for correct announcement.\n const target = isAnchor && !!this.target ? this.target : nothing;\n return staticHtml`\n <${tag}\n id=\"item\"\n tabindex=\"${this.isDisabled || !isInteractive ? -1 : 0}\"\n ?disabled=${this.isDisabled}\n role=\"listitem\"\n aria-selected=${(this as ARIAMixinStrict).ariaSelected || nothing}\n aria-checked=${(this as ARIAMixinStrict).ariaChecked || nothing}\n aria-expanded=${(this as ARIAMixinStrict).ariaExpanded || nothing}\n aria-haspopup=${(this as ARIAMixinStrict).ariaHasPopup || nothing}\n class=\"list-item ${classMap(this.getRenderClasses())}\"\n href=${this.href || nothing}\n target=${target}\n @focus=${this.onFocus}\n >${content}</${tag}>\n `;\n }\n\n /**\n * Handles rendering of the ripple element.\n */\n protected renderRipple(): TemplateResult | typeof nothing {\n if (this.type === 'text') {\n return nothing;\n }\n\n return html` <md-ripple\n part=\"ripple\"\n for=\"item\"\n ?disabled=${this.isDisabled}></md-ripple>`;\n }\n\n /**\n * Handles rendering of the focus ring.\n */\n protected renderFocusRing(): TemplateResult | typeof nothing {\n if (this.type === 'text') {\n return nothing;\n }\n\n return html` <md-focus-ring\n @visibility-changed=${this.onFocusRingVisibilityChanged}\n part=\"focus-ring\"\n for=\"item\"\n inward></md-focus-ring>`;\n }\n\n protected onFocusRingVisibilityChanged(e: Event) {}\n\n /**\n * Classes applied to the list item root.\n */\n protected getRenderClasses(): ClassInfo {\n return {'disabled': this.isDisabled};\n }\n\n /**\n * Handles rendering the headline and supporting text.\n */\n protected renderBody() {\n return html`\n <slot></slot>\n <slot name=\"overline\" slot=\"overline\"></slot>\n <slot name=\"headline\" slot=\"headline\"></slot>\n <slot name=\"supporting-text\" slot=\"supporting-text\"></slot>\n <slot\n name=\"trailing-supporting-text\"\n slot=\"trailing-supporting-text\"></slot>\n `;\n }\n\n protected onFocus() {\n if (this.tabIndex !== -1) {\n return;\n }\n // Handles the case where the user clicks on the element and then tabs.\n this.dispatchEvent(createRequestActivationEvent());\n }\n\n override focus() {\n // TODO(b/300334509): needed for some cases where delegatesFocus doesn't\n // work programmatically like in FF and select-option\n this.listItemRoot?.focus();\n }\n\n override click() {\n if (!this.listItemRoot) {\n // If the element has not finished rendering, call super to ensure click\n // events are dispatched.\n super.click();\n return;\n }\n\n // Forward click to the element to ensure link <a>.click() works correctly.\n this.listItemRoot.click();\n }\n}\n"]}
|
|
@@ -11,7 +11,11 @@ import { Corner } from '../menu.js';
|
|
|
11
11
|
* @fires deactivate-items {Event} Requests the parent menu to deselect other
|
|
12
12
|
* items when a submenu opens. --bubbles --composed
|
|
13
13
|
* @fires request-activation {Event} Requests the parent to make the slotted item
|
|
14
|
-
* focusable and focus the item.
|
|
14
|
+
* focusable and focus the item. Used internally for menu keyboard navigation;
|
|
15
|
+
* most applications do not need to listen for this event. It is exposed for
|
|
16
|
+
* authors building their own menu-item replacements, or for advanced cases
|
|
17
|
+
* where you want to call `preventDefault`/`stopPropagation` on it to override
|
|
18
|
+
* default focus handling. --bubbles --composed
|
|
15
19
|
* @fires deactivate-typeahead {Event} Requests the parent menu to deactivate
|
|
16
20
|
* the typeahead functionality when a submenu opens. --bubbles --composed
|
|
17
21
|
* @fires activate-typeahead {Event} Requests the parent menu to activate the
|