material 1.0.4 → 3.0.0-next.0

package/src/styles/elements/_icon-button.scss

@@ -0,0 +1,55 @@
+// src/styles/elements/_icon-button.scss
+// <m-icon-button> before upgrade: the container, round, at its size and width.
+@use 'sass:list';
+@use 'sass:map';
+@use '../abstract/theme' as t;
+@use 'config' as c;
+
+// As $sizes and $widths in components/_icon-button.scss: container height,
+// then the narrow, default and wide widths.
+$sizes: (
+  'xs': (32px, 28px, 32px, 40px),
+  's': (40px, 32px, 40px, 52px),
+  'm': (56px, 48px, 56px, 72px),
+  'l': (96px, 64px, 96px, 128px),
+  'xl': (136px, 104px, 136px, 184px)
+);
+
+@mixin size($size, $width) {
+  $values: map.get($sizes, $size);
+  height: list.nth($values, 1);
+  width: list.nth($values, map.get(('narrow': 2, 'default': 3, 'wide': 4), $width));
+  border-radius: list.nth($values, 1) * 0.5;
+}
+
+@include c.host('icon-button') {
+  display: inline-block;
+  vertical-align: middle;
+  box-sizing: border-box;
+  overflow: hidden;
+  color: transparent;
+  @include size('s', 'default');
+
+  @each $size in map.keys($sizes) {
+    @each $width in ('default', 'narrow', 'wide') {
+      $selector: if($size == 's', '', "[size='#{$size}']") + if($width == 'default', '', "[width='#{$width}']");
+      @if $selector != '' {
+        &#{$selector} {
+          @include size($size, $width);
+        }
+      }
+    }
+  }
+
+  &[variant='filled'] {
+    background-color: t.color('primary');
+  }
+
+  &[variant='tonal'] {
+    background-color: t.color('secondary-container');
+  }
+
+  &[variant='outlined'] {
+    border: 1px solid t.color('outline-variant');
+  }
+}

package/src/styles/elements/_index.scss

@@ -0,0 +1,42 @@
+// src/styles/elements/_index.scss
+// Every element's pre-upgrade rules, for a page that compiles mtrl's SCSS:
+//   @use 'material/src/styles/elements' with ($tag-prefix: 'x');
+// The build emits the same rules as material/elements/preupgrade.css.
+@forward 'config';
+@use 'badge';
+@use 'bottom-app-bar';
+@use 'bottom-sheet';
+@use 'button-group';
+@use 'button';
+@use 'card';
+@use 'carousel';
+@use 'checkbox';
+@use 'chips';
+@use 'datepicker';
+@use 'dialog';
+@use 'divider';
+@use 'drawer';
+@use 'extended-fab';
+@use 'fab';
+@use 'fab-menu';
+@use 'icon-button';
+@use 'list';
+@use 'loading-indicator';
+@use 'menu';
+@use 'navigation-bar';
+@use 'navigation-rail';
+@use 'progress';
+@use 'radios';
+@use 'search';
+@use 'select';
+@use 'side-sheet';
+@use 'slider';
+@use 'snackbar';
+@use 'split-button';
+@use 'switch';
+@use 'tabs';
+@use 'text-field';
+@use 'timepicker';
+@use 'toolbar';
+@use 'tooltip';
+@use 'top-app-bar';

package/src/styles/elements/_list.scss

@@ -0,0 +1,34 @@
+// src/styles/elements/_list.scss
+// <m-list> before upgrade: a row per <m-list-item>, which is drawn on upgrade.
+@use '../abstract/mixins' as m;
+@use '../abstract/theme' as t;
+@use 'config' as c;
+
+// As components/_list.scss: 8px above and below the rows, one-line rows
+// 56px, two-line 72px, a 1px divider and the subheader's padded line.
+@include c.host('list') {
+  display: block;
+  padding: 8px 0;
+  background-color: t.color('surface');
+}
+
+@include c.declarations('list') {
+  display: block;
+  height: 56px;
+  overflow: hidden;
+
+  &[supporting-text],
+  &[overline] {
+    height: 72px;
+  }
+
+  &[kind='divider'] {
+    height: 1px;
+  }
+
+  &[kind='subheader'] {
+    height: auto;
+    padding: 16px 16px 8px;
+    @include m.typography('label-large');
+  }
+}

package/src/styles/elements/_loading-indicator.scss

@@ -0,0 +1,13 @@
+// src/styles/elements/_loading-indicator.scss
+// <m-loading-indicator> before upgrade: its box.
+@use 'config' as c;
+
+// As --mtrl-loading-indicator-size in components/_loading-indicator.scss.
+@include c.host('loading-indicator') {
+  display: inline-flex;
+  vertical-align: middle;
+  width: 48px;
+  height: 48px;
+  overflow: hidden;
+  color: transparent;
+}

package/src/styles/elements/_menu.scss

@@ -0,0 +1,6 @@
+// src/styles/elements/_menu.scss
+// <m-menu> before upgrade: nothing. It opens in the top layer once upgraded,
+// and reserves no space in the page.
+@use 'config' as c;
+
+@include c.overlay('menu');

package/src/styles/elements/_navigation-bar.scss

@@ -0,0 +1,17 @@
+// src/styles/elements/_navigation-bar.scss
+// <m-navigation-bar> before upgrade: the bar's surface and height, so the page
+// doesn't move when it is drawn; its <m-navigation-bar-item>s are drawn on upgrade.
+@use '../abstract/theme' as t;
+@use 'config' as c;
+
+// As components/_navigation-bar.scss: 64px and the bottom inset, surface container
+@include c.host('navigation-bar') {
+  display: block;
+  box-sizing: border-box;
+  block-size: calc(64px + env(safe-area-inset-bottom, 0px));
+  background: t.color('surface-container');
+}
+
+@include c.declarations('navigation-bar') {
+  display: none;
+}

package/src/styles/elements/_navigation-rail.scss

@@ -0,0 +1,24 @@
+// src/styles/elements/_navigation-rail.scss
+// <m-navigation-rail> before upgrade: the rail's surface and height, with a
+// place per <m-navigation-rail-item>, which is drawn on upgrade.
+@use '../abstract/theme' as t;
+@use 'config' as c;
+
+// As components/_navigation-rail.scss: 44px above the 48px menu button and
+// 40px under it, 64px items 4px apart, 16px at the end; the rail 96px wide.
+@include c.host('navigation-rail') {
+  display: block;
+  box-sizing: border-box;
+  padding: 44px + 48px + 40px 0 16px;
+  background: linear-gradient(t.color('surface'), t.color('surface')) no-repeat 0 0 / 96px 100%;
+}
+
+@include c.declarations('navigation-rail') {
+  display: block;
+  height: 64px;
+  overflow: hidden;
+
+  & + * {
+    margin-top: 4px;
+  }
+}

package/src/styles/elements/_progress.scss

@@ -0,0 +1,24 @@
+// src/styles/elements/_progress.scss
+// <m-progress> before upgrade: the linear track's height, or the circle's box.
+@use '../abstract/theme' as t;
+@use 'config' as c;
+
+// As the factory's canvas: 4px thin linear (2px from each end), 40px circle.
+@include c.host('progress') {
+  display: block;
+  box-sizing: border-box;
+  height: 4px;
+  padding: 0 4px;
+  overflow: hidden;
+  color: transparent;
+  background: t.color('secondary-container') content-box;
+
+  &[variant='circular'] {
+    display: inline-flex;
+    vertical-align: middle;
+    width: 40px;
+    height: 40px;
+    padding: 0;
+    background: none;
+  }
+}

package/src/styles/elements/_radios.scss

@@ -0,0 +1,23 @@
+// src/styles/elements/_radios.scss
+// <m-radios> before upgrade: a row per <m-radio>, which is drawn on upgrade.
+@use '../abstract/mixins' as m;
+@use 'config' as c;
+
+@include c.host('radios') {
+  display: block;
+  @include m.typography('body-large');
+
+  &[direction='horizontal'] {
+    display: flex;
+    flex-wrap: wrap;
+  }
+}
+
+// As components/_radios.scss: a 48px row, the 40px control and 8px before the text.
+@include c.declarations('radios') {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  height: 48px;
+  padding-inline-start: 48px;
+}

package/src/styles/elements/_search.scss

@@ -0,0 +1,36 @@
+// src/styles/elements/_search.scss
+// <m-search> before upgrade: the search bar, with the placeholder where the
+// query goes; the <m-search-suggestion> declarations are drawn on upgrade.
+@use '../abstract/variables' as v;
+@use '../abstract/mixins' as m;
+@use '../abstract/theme' as t;
+@use 'config' as c;
+
+// As components/_search.scss: the 56px bar, fully rounded, its 48px leading
+// icon 4px from the start and the input 4px beyond it.
+@include c.host('search') {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  height: 56px;
+  padding: 0 56px 0 60px;
+  border-radius: v.shape('full');
+  background-color: t.color('surface-container-high');
+  color: t.color('on-surface-variant');
+  white-space: nowrap;
+  overflow: hidden;
+  @include m.typography('body-large');
+
+  &::before {
+    content: attr(placeholder);
+  }
+
+  &[value]:not([value=''])::before {
+    content: attr(value);
+    color: t.color('on-surface');
+  }
+}
+
+@include c.declarations('search') {
+  display: none;
+}

package/src/styles/elements/_select.scss

@@ -0,0 +1,15 @@
+// src/styles/elements/_select.scss
+// <m-select> before upgrade: the text field it is, with the dropdown icon's
+// space; the <m-select-option> declarations are drawn on upgrade.
+@use 'config' as c;
+@use 'field';
+
+// As components/_select.scss: the 24px icon, 12px from the end and 16px from the text.
+@include c.host('select') {
+  @include field.field(36px);
+
+  // The value is an option's, shown on upgrade; the label floats above it.
+  &::before {
+    content: ' ';
+  }
+}

package/src/styles/elements/_side-sheet.scss

@@ -0,0 +1,6 @@
+// src/styles/elements/_side-sheet.scss
+// <m-side-sheet> before upgrade: nothing. It opens in the top layer once upgraded,
+// and reserves no space in the page.
+@use 'config' as c;
+
+@include c.overlay('side-sheet');

package/src/styles/elements/_slider.scss

@@ -0,0 +1,10 @@
+// src/styles/elements/_slider.scss
+// <m-slider> before upgrade: the 48px row of the default size.
+@use 'config' as c;
+
+@include c.host('slider') {
+  display: block;
+  height: 48px;
+  overflow: hidden;
+  color: transparent;
+}

package/src/styles/elements/_snackbar.scss

@@ -0,0 +1,6 @@
+// src/styles/elements/_snackbar.scss
+// <m-snackbar> before upgrade: nothing. It opens in the top layer once upgraded,
+// and reserves no space in the page.
+@use 'config' as c;
+
+@include c.overlay('snackbar');

package/src/styles/elements/_split-button.scss

@@ -0,0 +1,53 @@
+// src/styles/elements/_split-button.scss
+// <m-split-button> before upgrade: the leading button with its label, then
+// the trailing button; the <m-menu-item> declarations are drawn on upgrade.
+@use '../abstract/variables' as v;
+@use '../abstract/mixins' as m;
+@use '../abstract/theme' as t;
+@use 'config' as c;
+
+// As components/_split-button.scss (small, filled): the leading button's
+// 16px and 12px beside the label, the 2px gap, the 48px trailing button,
+// and their 4px inner corners.
+$gap: 2px;
+$trailing: 48px;
+
+@include c.host('split-button') {
+  display: inline-flex;
+  vertical-align: middle;
+  align-items: center;
+  position: relative;
+  z-index: 0;
+  box-sizing: border-box;
+  height: v.button('height-s');
+  padding: 0 calc(12px + #{$gap + $trailing}) 0 v.button('padding-s');
+  color: t.color('on-primary');
+  white-space: nowrap;
+  @include m.typography('label-large');
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    z-index: -1;
+    top: 0;
+    bottom: 0;
+    background-color: t.color('primary');
+  }
+
+  &::before {
+    left: 0;
+    right: $gap + $trailing;
+    border-radius: v.button('shape-round-s') 4px 4px v.button('shape-round-s');
+  }
+
+  &::after {
+    right: 0;
+    width: $trailing;
+    border-radius: 4px v.button('shape-round-s') v.button('shape-round-s') 4px;
+  }
+
+  > * {
+    display: none;
+  }
+}

package/src/styles/elements/_switch.scss

@@ -0,0 +1,51 @@
+// src/styles/elements/_switch.scss
+// <m-switch> before upgrade: the label, then the track (unchecked or checked),
+// with the supporting text under the label.
+@use '../abstract/variables' as v;
+@use '../abstract/mixins' as m;
+@use '../abstract/theme' as t;
+@use 'config' as c;
+
+// As components/_switch.scss: the 48px row with 4px above and below, the
+// 12px gap, the 52 x 32 track with its 2px outline and its 16px thumb.
+@include c.host('switch') {
+  display: inline-grid;
+  grid-template-columns: auto auto;
+  align-content: center;
+  align-items: center;
+  column-gap: 12px;
+  box-sizing: border-box;
+  min-height: 56px;
+  padding: 4px 0;
+  color: t.color('on-surface');
+  @include m.typography('body-large');
+
+  &::after {
+    content: '';
+    grid-column: 2;
+    grid-row: 1;
+    box-sizing: border-box;
+    width: 52px;
+    height: 32px;
+    border: 2px solid t.color('outline');
+    border-radius: v.shape('full');
+    background: radial-gradient(circle at 14px 50%, t.color('outline') 8px, transparent 8.5px) t.color('surface-container-highest');
+  }
+
+  &[checked]::after {
+    border-color: t.color('primary');
+    background: radial-gradient(circle at calc(100% - 14px) 50%, t.color('on-primary') 12px, transparent 12.5px) t.color('primary');
+  }
+
+  &[supporting-text]::after {
+    grid-row: 1 / span 2;
+  }
+
+  &[supporting-text]::before {
+    content: attr(supporting-text);
+    grid-column: 1;
+    grid-row: 2;
+    color: t.color('on-surface-variant');
+    @include m.typography('body-medium');
+  }
+}

package/src/styles/elements/_tabs.scss

@@ -0,0 +1,22 @@
+// src/styles/elements/_tabs.scss
+// <m-tabs> before upgrade: the row of tabs, 48px, or 64px when they have
+// icons; the <m-tab> declarations are drawn on upgrade.
+@use '../abstract/theme' as t;
+@use 'config' as c;
+
+// As components/_tabs.scss: the tab heights and the 1px divider under them.
+@include c.host('tabs') {
+  display: block;
+  box-sizing: border-box;
+  height: 48px;
+  overflow: hidden;
+  border-bottom: 1px solid t.color('outline-variant');
+
+  &:has(> [icon]) {
+    height: 64px;
+  }
+}
+
+@include c.declarations('tabs') {
+  display: none;
+}

package/src/styles/elements/_text-field.scss

@@ -0,0 +1,62 @@
+// src/styles/elements/_text-field.scss
+// <m-text-field> before upgrade: the field's container, the label at rest and
+// the value on the input's line.
+@use 'config' as c;
+@use 'field';
+@use '../abstract/variables' as v;
+
+@include c.host('text-field') {
+  @include field.field;
+
+  // Multiline is the textarea's box, not the single-line 56px one (FLO-425).
+  // Height and padding-top are the component's (&--multiline). The padding-top
+  // is where the first line starts: the inline sibling on this line aligns to
+  // it. It is the single-line field's text (FLO-299): 16px, 24px under a
+  // filled field's label, and outlined the same 16px less its own border.
+  &[type='multiline'] {
+    height: v.text-field('height-multiline');
+    padding-top: v.text-field('padding-top-multiline');
+
+    &[label] {
+      padding-top: v.text-field('padding-top-multiline-label');
+    }
+
+    &[variant='outlined'] {
+      padding-top: calc(#{v.text-field('padding-top-multiline')} - #{v.text-field('border-width')});
+    }
+
+    // Compact multiline stays the compact field (40px), with the compact
+    // single-line field's first line.
+    &[density='compact'] {
+      height: 40px;
+      padding-top: v.text-field('padding-top-multiline-compact');
+
+      &[label] {
+        padding-top: v.text-field('padding-top-multiline-compact-label');
+      }
+
+      &[variant='outlined'] {
+        padding-top: calc(#{v.text-field('padding-top-multiline-compact')} - #{v.text-field('border-width')});
+      }
+    }
+
+    // The supporting row is the single-line field's. Outlined drops its top
+    // border for an inset ring, so the whole inset is padding there.
+    &[supporting-text]:not([supporting-text='']),
+    &[maxlength] {
+      height: calc(#{v.text-field('height-multiline')} + #{field.$supporting-row});
+
+      &[variant='outlined'] {
+        padding-top: v.text-field('padding-top-multiline');
+      }
+
+      &[density='compact'] {
+        height: calc(40px + #{field.$supporting-row});
+
+        &[variant='outlined'] {
+          padding-top: v.text-field('padding-top-multiline-compact');
+        }
+      }
+    }
+  }
+}

package/src/styles/elements/_timepicker.scss

@@ -0,0 +1,6 @@
+// src/styles/elements/_timepicker.scss
+// <m-timepicker> before upgrade: nothing. It opens in the top layer once upgraded,
+// and reserves no space in the page.
+@use 'config' as c;
+
+@include c.overlay('timepicker');

package/src/styles/elements/_toolbar.scss

@@ -0,0 +1,47 @@
+// src/styles/elements/_toolbar.scss
+// <m-toolbar> before upgrade: the docked bar or the floating pill, with the
+// items in a row (a column when vertical) and the FAB after them.
+@use '../abstract/variables' as v;
+@use '../abstract/mixins' as m;
+@use '../abstract/theme' as t;
+@use 'config' as c;
+
+// As components/_toolbar.scss: 64px, docked padded 16px at each end with the
+// items spread, floating padded 8px with the items 4px apart.
+@include c.host('toolbar') {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  box-sizing: border-box;
+  min-height: 64px;
+  padding-inline: 16px;
+  background-color: t.color('surface-container');
+
+  &[arrangement='center'] {
+    justify-content: center;
+    gap: 32px;
+  }
+
+  &[variant='floating'] {
+    width: fit-content;
+    justify-content: center;
+    gap: 4px;
+    padding: 8px;
+    border-radius: v.shape('full');
+
+    &:not([flat]) {
+      @include m.elevation(1);
+    }
+
+    &[orientation='vertical'] {
+      flex-direction: column;
+      min-height: 0;
+      min-width: 64px;
+    }
+  }
+
+  &[color='vibrant'] {
+    background-color: t.color('primary-container');
+  }
+}

package/src/styles/elements/_tooltip.scss

@@ -0,0 +1,6 @@
+// src/styles/elements/_tooltip.scss
+// <m-tooltip> before upgrade: nothing. It opens in the top layer once upgraded,
+// and reserves no space in the page.
+@use 'config' as c;
+
+@include c.overlay('tooltip');

package/src/styles/elements/_top-app-bar.scss

@@ -0,0 +1,57 @@
+// src/styles/elements/_top-app-bar.scss
+// <m-top-app-bar> before upgrade: the bar, placed as the upgraded one is
+// (over the top of its positioned container), with the headline in its
+// type style; leading and trailing children in their places.
+@use '../abstract/functions' as f;
+@use '../abstract/mixins' as m;
+@use '../abstract/theme' as t;
+@use 'config' as c;
+
+// As components/_top-app-bar.scss: 64px small and center bars, the headline
+// 16px after the 12px padding; medium (112px) and large (152px) bars set it
+// in a second row, 24px and 28px above the bottom.
+@include c.host('top-app-bar') {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: f.get-z-index('fixed');
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  height: 64px;
+  padding: 0 12px 0 28px;
+  background-color: t.color('surface');
+  color: t.color('on-surface');
+  white-space: nowrap;
+  overflow: hidden;
+  @include m.typography('title-large');
+
+  &[type='center'] {
+    justify-content: center;
+  }
+
+  &[type='medium'],
+  &[type='large'] {
+    align-items: flex-end;
+    padding-left: 44px;
+    padding-bottom: 24px;
+    height: 112px;
+    @include m.typography('headline-small');
+  }
+
+  &[type='large'] {
+    padding-bottom: 28px;
+    height: 152px;
+    @include m.typography('headline-medium');
+  }
+
+  > [slot='leading'] {
+    order: -1;
+  }
+
+  > [slot='trailing'] {
+    order: 1;
+    margin-left: auto;
+  }
+}