material 1.0.4 → 3.0.0-next.0

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

@@ -0,0 +1,27 @@
+// src/styles/elements/_bottom-app-bar.scss
+// <m-bottom-app-bar> before upgrade: the bar, placed as the upgraded one is
+// (along the bottom of its positioned container), with its actions in a row
+// and the FAB at the end.
+@use '../abstract/functions' as f;
+@use '../abstract/theme' as t;
+@use 'config' as c;
+
+// As components/_bottom-app-bar.scss: 80px, padded 12px 16px 12px 4px,
+// actions 4px apart.
+@include c.host('bottom-app-bar') {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  box-sizing: border-box;
+  height: 80px;
+  padding: 12px 16px 12px 4px;
+  background-color: t.color('surface-container');
+
+  > [slot='fab'] {
+    margin-left: auto;
+  }
+}

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

@@ -0,0 +1,6 @@
+// src/styles/elements/_bottom-sheet.scss
+// <m-bottom-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('bottom-sheet');

package/src/styles/elements/_button-group.scss

@@ -0,0 +1,25 @@
+// src/styles/elements/_button-group.scss
+// <m-button-group> before upgrade: a box per <m-button-group-item>, the size
+// of its button, which is drawn on upgrade.
+@use '../abstract/variables' as v;
+@use '../abstract/mixins' as m;
+@use 'config' as c;
+
+// As components/_button-group.scss: the standard group's 12px between
+// outlined buttons of the small size.
+@include c.host('button-group') {
+  display: inline-flex;
+  vertical-align: middle;
+  gap: 12px;
+  white-space: nowrap;
+}
+
+@include c.declarations('button-group') {
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  height: v.button('height-s');
+  padding: 0 v.button('padding-s');
+  border: v.button('outline-width-s') solid transparent;
+  @include m.typography('label-large');
+}

package/src/styles/elements/_button.scss

@@ -0,0 +1,78 @@
+// src/styles/elements/_button.scss
+// <m-button> before upgrade: the button's container, with the label as its
+// text. From the $button tokens, as components/_button.scss.
+@use 'sass:map';
+@use 'sass:list';
+@use '../abstract/variables' as v;
+@use '../abstract/mixins' as m;
+@use '../abstract/theme' as t;
+@use 'config' as c;
+
+// As $label-typescale and $content-color in components/_button.scss.
+$label-typescale: ('xs': 'label-large', 's': 'label-large', 'm': 'title-medium', 'l': 'headline-small', 'xl': 'headline-large');
+$containers: (
+  'filled': ('primary', 'on-primary'),
+  'elevated': ('surface-container-low', 'primary'),
+  'tonal': ('secondary-container', 'on-secondary-container'),
+  'outlined': (transparent, 'on-surface-variant'),
+  'text': (transparent, 'primary')
+);
+
+@mixin size($size) {
+  height: v.button('height-#{$size}');
+  padding: 0 v.button('padding-#{$size}');
+  gap: v.button('icon-gap-#{$size}');
+  border-radius: v.button('shape-round-#{$size}');
+  @include m.typography(map.get($label-typescale, $size));
+
+  // The leading icon's place (its markup is an attribute, drawn on upgrade).
+  &[icon]::before {
+    width: v.button('icon-size-#{$size}');
+    height: v.button('icon-size-#{$size}');
+  }
+}
+
+@include c.host('button') {
+  display: inline-flex;
+  vertical-align: middle;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-width: v.button('min-width');
+  white-space: nowrap;
+  background-color: t.color('primary');
+  color: t.color('on-primary');
+  @include size('s');
+
+  @each $size in map.keys($label-typescale) {
+    &[size='#{$size}'] {
+      @include size($size);
+    }
+  }
+
+  @each $variant, $roles in $containers {
+    &[variant='#{$variant}'] {
+      $bg: list.nth($roles, 1);
+      background-color: if($bg == transparent, transparent, t.color($bg));
+      color: t.color(list.nth($roles, 2));
+    }
+  }
+
+  &[variant='outlined'] {
+    border: v.button('outline-width-s') solid t.color('outline-variant');
+  }
+
+  &[variant='text'] {
+    padding: 0 v.button('padding-horizontal-small');
+  }
+
+  &[icon]::before {
+    content: '';
+    flex: none;
+  }
+
+  &[icon]:not([size]),
+  &[icon][size='s'] {
+    padding-left: v.button('padding-icon');
+  }
+}

package/src/styles/elements/_card.scss

@@ -0,0 +1,57 @@
+// src/styles/elements/_card.scss
+// <m-card> before upgrade: the card's container, its header from the
+// `headline` and `subhead` attributes, then the content.
+@use '../abstract/variables' as v;
+@use '../abstract/mixins' as m;
+@use '../abstract/theme' as t;
+@use 'config' as c;
+
+// As components/_card.scss: the header padded 16px on top and at the sides,
+// the content padded 16px all round.
+@include c.host('card') {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  padding: v.card('padding');
+  border-radius: v.card('border-radius');
+  background-color: t.color('surface-container-low');
+  color: t.color('on-surface');
+  @include m.typography('body-medium');
+
+  &[variant='filled'] {
+    background-color: t.color('surface-container-highest');
+  }
+
+  &[variant='outlined'] {
+    border: 1px solid t.color('outline-variant');
+    background-color: t.color('surface');
+  }
+
+  // The header: headline, then subhead, 16px above the content.
+  &[headline]::before {
+    content: attr(headline);
+    order: -2;
+    @include m.typography('title-large');
+  }
+
+  &[subhead]::after {
+    content: attr(subhead);
+    order: -1;
+    color: t.color('on-surface-variant');
+  }
+
+  &[headline]:not([subhead])::before,
+  &[subhead]::after {
+    margin-bottom: v.card('padding');
+  }
+
+  > [slot='headline'] {
+    order: -2;
+    @include m.typography('title-large');
+  }
+
+  > [slot='subhead'] {
+    order: -1;
+    color: t.color('on-surface-variant');
+  }
+}

package/src/styles/elements/_carousel.scss

@@ -0,0 +1,12 @@
+// src/styles/elements/_carousel.scss
+// <m-carousel> before upgrade: its box, which the page sizes; the
+// <m-carousel-item> declarations are drawn on upgrade.
+@use 'config' as c;
+
+@include c.host('carousel') {
+  display: block;
+}
+
+@include c.declarations('carousel') {
+  display: none;
+}

package/src/styles/elements/_checkbox.scss

@@ -0,0 +1,38 @@
+// src/styles/elements/_checkbox.scss
+// <m-checkbox> before upgrade: the box, then the label.
+@use '../abstract/mixins' as m;
+@use '../abstract/theme' as t;
+@use 'config' as c;
+
+// As components/_checkbox.scss: the 18px box with its 2px outline, 12px
+// from the label, in a 40px row with 4px above and below.
+@include c.host('checkbox') {
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  min-height: 48px;
+  padding: 4px 0;
+  color: t.color('on-surface');
+  @include m.typography('body-large');
+
+  &::before {
+    content: '';
+    flex: none;
+    box-sizing: border-box;
+    width: 18px;
+    height: 18px;
+    margin-inline-end: 12px;
+    border: 2px solid t.color('on-surface-variant');
+    border-radius: 2px;
+  }
+
+  &[checked]::before {
+    border-color: t.color('primary');
+    background-color: t.color('primary');
+  }
+
+  &[label-position='start']::before {
+    order: 1;
+    margin-inline: 12px 0;
+  }
+}

package/src/styles/elements/_chips.scss

@@ -0,0 +1,33 @@
+// src/styles/elements/_chips.scss
+// <m-chips> before upgrade: the chip set's rows, with a box per <m-chip>,
+// which is drawn on upgrade.
+@use '../abstract/variables' as v;
+@use '../abstract/mixins' as m;
+@use 'config' as c;
+
+@include c.host('chips') {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+
+  &[vertical] {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  &[scrollable] {
+    flex-wrap: nowrap;
+    overflow: hidden;
+  }
+}
+
+// As components/_chips.scss: the chip's height and the 16px beside its label.
+@include c.declarations('chips') {
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  height: v.chip('height');
+  padding: 0 16px;
+  white-space: nowrap;
+  @include m.typography('label-large');
+}

package/src/styles/elements/_config.scss

@@ -0,0 +1,48 @@
+// src/styles/elements/_config.scss
+// =============================================================================
+// PRE-UPGRADE STYLES: shared configuration
+// =============================================================================
+// Until its script defines it, an element is its server-rendered light DOM,
+// unstyled. These rules give the undefined host the box it will have once
+// upgraded, so nothing moves when the shadow root arrives (ssr.md, Phase A).
+//
+// Every rule is scoped to `:not(:defined)`, so none can reach an upgraded
+// element. Sizes come from the same tokens and variables the components use.
+//
+// The tag prefix is a module variable: with a custom prefix, configure it
+//   @use 'material/src/styles/elements' with ($tag-prefix: 'x');
+// or, at runtime, use `preupgradeStyles('x')` from `material/elements/preupgrade`.
+// =============================================================================
+
+$tag-prefix: 'm' !default;
+
+/** The element's tag: `tag('button')` is `m-button`. */
+@function tag($name) {
+  @return '#{$tag-prefix}-#{$name}';
+}
+
+/** Rules for the undefined host. */
+@mixin host($name) {
+  #{tag($name)}:not(:defined) {
+    @content;
+  }
+}
+
+/**
+ * Declaration children (`<m-tab>`) and other content that only means
+ * something after upgrade: kept in the flow to reserve their space, but not
+ * painted.
+ */
+@mixin declarations($name, $selector: '*') {
+  #{tag($name)}:not(:defined) > #{$selector} {
+    visibility: hidden;
+    @content;
+  }
+}
+
+/** An overlay renders nothing until upgrade, open or not: it opens in the top layer. */
+@mixin overlay($name) {
+  @include host($name) {
+    display: none;
+  }
+}

package/src/styles/elements/_datepicker.scss

@@ -0,0 +1,31 @@
+// src/styles/elements/_datepicker.scss
+// <m-datepicker> before upgrade: the label above the field, the field and the
+// line under it for the supporting text.
+@use '../abstract/variables' as v;
+@use '../abstract/mixins' as m;
+@use '../abstract/theme' as t;
+@use 'config' as c;
+
+// As components/_datepicker.scss: the text field's width, the label 4px above
+// the 56px field, and 4px + one body-small line under it.
+@include c.host('datepicker') {
+  display: inline-block;
+  box-sizing: border-box;
+  width: v.text-field('width');
+  vertical-align: baseline;
+  white-space: nowrap;
+
+  &::before {
+    content: attr(label) ' ';
+    white-space: pre;
+    display: inline-block;
+    width: 100%;
+    padding-bottom: 4px + v.text-field('height') + 4px + 16px;
+    color: t.color('on-surface');
+    @include m.typography('body-small');
+  }
+
+  > * {
+    display: none;
+  }
+}

package/src/styles/elements/_dialog.scss

@@ -0,0 +1,6 @@
+// src/styles/elements/_dialog.scss
+// <m-dialog> 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('dialog');

package/src/styles/elements/_divider.scss

@@ -0,0 +1,19 @@
+// src/styles/elements/_divider.scss
+// <m-divider> before upgrade: the 1px line, horizontal or vertical.
+@use '../abstract/theme' as t;
+@use 'config' as c;
+
+@include c.host('divider') {
+  display: block;
+  height: 1px;
+  overflow: hidden;
+  color: transparent;
+  background-color: t.color('outline-variant');
+
+  &[orientation='vertical'] {
+    display: inline-block;
+    align-self: stretch;
+    width: 1px;
+    height: auto;
+  }
+}

package/src/styles/elements/_drawer.scss

@@ -0,0 +1,23 @@
+// src/styles/elements/_drawer.scss
+// <m-drawer> before upgrade: the sheet's height, with a place per
+// <m-drawer-item>, which is drawn on upgrade. Closed, the upgraded drawer
+// keeps that height with nothing in it; open, its sheet is painted.
+@use '../abstract/theme' as t;
+@use 'config' as c;
+
+// As components/_drawer.scss: 12px above and below 56px items.
+@include c.host('drawer') {
+  display: block;
+  flex-shrink: 0;
+  padding: 12px 0;
+
+  &[open] {
+    background-color: t.color('surface');
+  }
+}
+
+@include c.declarations('drawer') {
+  display: block;
+  height: 56px;
+  overflow: hidden;
+}

package/src/styles/elements/_extended-fab.scss

@@ -0,0 +1,57 @@
+// src/styles/elements/_extended-fab.scss
+// <m-extended-fab> before upgrade: the container, with the label as its text
+// and the icon's place before it.
+@use 'sass:map';
+@use '../abstract/functions' as f;
+@use '../abstract/mixins' as m;
+@use '../abstract/theme' as t;
+@use 'config' as c;
+
+// As $sizes in components/_extended-fab.scss.
+$sizes: (
+  'small': (height: 56px, icon: 24px, label: 'title-medium', padding: 16px, gap: 8px, shape: 'large'),
+  'medium': (height: 80px, icon: 28px, label: 'title-large', padding: 26px, gap: 16px, shape: 'large-increased'),
+  'large': (height: 96px, icon: 32px, label: 'headline-small', padding: 28px, gap: 20px, shape: 'extra-large')
+);
+
+@mixin size($size) {
+  $tokens: map.get($sizes, $size);
+  height: map.get($tokens, height);
+  min-width: map.get($tokens, height);
+  padding: 0 map.get($tokens, padding);
+  gap: map.get($tokens, gap);
+  border-radius: f.get-shape(map.get($tokens, shape));
+  @include m.typography(map.get($tokens, label));
+
+  &[icon]::before {
+    width: map.get($tokens, icon);
+    height: map.get($tokens, icon);
+  }
+}
+
+@include c.host('extended-fab') {
+  display: inline-flex;
+  vertical-align: middle;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  white-space: nowrap;
+  background-color: t.color('primary-container');
+  color: t.color('on-primary-container');
+  @include size('small');
+
+  &[icon]::before {
+    content: '';
+    flex: none;
+  }
+
+  &[icon-position='end']::before {
+    order: 1;
+  }
+
+  @each $size in ('medium', 'large') {
+    &[size='#{$size}'] {
+      @include size($size);
+    }
+  }
+}

package/src/styles/elements/_fab-menu.scss

@@ -0,0 +1,43 @@
+// src/styles/elements/_fab-menu.scss
+// <m-fab-menu> before upgrade: the closed FAB, at its size and on its colour
+// set's container. The item declarations render nothing.
+@use 'sass:list';
+@use 'sass:map';
+@use '../abstract/functions' as f;
+@use '../abstract/theme' as t;
+@use 'config' as c;
+
+// As components/_fab.scss and _fab-menu.scss: the FAB the menu opens from.
+$sizes: ('default': (56px, 'large'), 'medium': (80px, 'large-increased'), 'large': (96px, 'extra-large'));
+
+@mixin size($size) {
+  $values: map.get($sizes, $size);
+  width: list.nth($values, 1);
+  height: list.nth($values, 1);
+  border-radius: f.get-shape(list.nth($values, 2));
+}
+
+@include c.host('fab-menu') {
+  display: inline-block;
+  vertical-align: middle;
+  box-sizing: border-box;
+  overflow: hidden;
+  background-color: t.color('primary-container');
+  @include size('default');
+
+  @each $size in map.keys($sizes) {
+    &[size='#{$size}'] {
+      @include size($size);
+    }
+  }
+
+  @each $role in secondary, tertiary {
+    &[color='#{$role}'] {
+      background-color: t.color('#{$role}-container');
+    }
+  }
+}
+
+@include c.declarations('fab-menu') {
+  display: none;
+}

package/src/styles/elements/_fab.scss

@@ -0,0 +1,33 @@
+// src/styles/elements/_fab.scss
+// <m-fab> before upgrade: the container, at its size.
+@use 'sass:list';
+@use 'sass:map';
+@use '../abstract/functions' as f;
+@use '../abstract/theme' as t;
+@use 'config' as c;
+
+// As the sizes in components/_fab.scss: container and shape.
+$sizes: ('default': (56px, 'large'), 'medium': (80px, 'large-increased'), 'large': (96px, 'extra-large'));
+
+@mixin size($size) {
+  $values: map.get($sizes, $size);
+  width: list.nth($values, 1);
+  height: list.nth($values, 1);
+  border-radius: f.get-shape(list.nth($values, 2));
+}
+
+@include c.host('fab') {
+  display: inline-block;
+  vertical-align: middle;
+  box-sizing: border-box;
+  overflow: hidden;
+  color: transparent;
+  background-color: t.color('primary-container');
+  @include size('default');
+
+  @each $size in map.keys($sizes) {
+    &[size='#{$size}'] {
+      @include size($size);
+    }
+  }
+}

package/src/styles/elements/_field.scss

@@ -0,0 +1,126 @@
+// src/styles/elements/_field.scss
+// The text field's box before upgrade, shared by <m-text-field>, <m-select>
+// and <m-datepicker>: the container (filled or outlined, default or
+// compact), the label and the value on the input's line.
+@use '../abstract/variables' as v;
+@use '../abstract/mixins' as m;
+@use '../abstract/theme' as t;
+
+// 4dp under the field plus one body-small line (16dp). The multiline field
+// adds the same row (elements/_text-field.scss).
+$supporting-row: 20px;
+
+/**
+ * The field: a text field, or a select (`$trailing`: the space its trailing
+ * icon takes beside the text).
+ */
+@mixin field($trailing: 0px) {
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+  // The unsized field's width, as components/_text-field.scss sets it.
+  width: v.text-field('width');
+  height: v.text-field('height');
+  // The input's line, where the upgraded field's text is: 24px down under a
+  // label (FLO-299). The half pixel is the line's baseline, as measured: with
+  // it, the sibling on this line does not move at upgrade.
+  padding: 24.5px (v.text-field('padding-horizontal') + $trailing) 0 v.text-field('padding-horizontal');
+  border-radius: v.text-field('border-radius') v.text-field('border-radius') 0 0;
+  border-bottom: v.text-field('border-width') solid t.color('on-surface-variant');
+  background-color: t.color('surface-container-highest');
+  color: t.color('on-surface');
+  white-space: nowrap;
+  // Clipped without moving the baseline, as `hidden` would.
+  overflow: clip;
+  @include m.typography('body-large');
+
+  // The value, or a space holding its line; then the label.
+  &::before {
+    content: attr(value) ' ';
+    white-space: pre;
+  }
+
+  &[label]::after {
+    content: attr(label);
+    position: absolute;
+    top: v.text-field('padding-vertical');
+    left: v.text-field('padding-horizontal');
+    color: t.color('on-surface-variant');
+  }
+
+  &[label][value]:not([value=''])::after {
+    top: 8px;
+    @include m.typography('body-small');
+  }
+
+  // Without a label the text is centred in the field
+  &:not([label]) {
+    padding-top: 16.5px;
+  }
+
+  &[variant='outlined'] {
+    padding-top: 15.5px;
+    border: v.text-field('border-width') solid t.color('outline');
+    border-radius: v.text-field('border-radius');
+    background: none;
+
+    &[label][value]:not([value=''])::after {
+      top: -8px;
+      padding: 0 4px;
+      left: 12px;
+    }
+  }
+
+  &[density='compact'] {
+    height: 40px;
+    padding-top: 13.5px;
+    @include m.typography('body-medium');
+
+    &::after {
+      top: 10px;
+      @include m.typography('body-medium');
+    }
+
+    &:not([label]) {
+      padding-top: 10px;
+    }
+
+    &[variant='outlined'] {
+      padding-top: 9px;
+    }
+  }
+
+  // The supporting text row (FLO-300): upgraded, the field gets a row under
+  // it, 4dp and a 16dp body-small line, when it has supporting text or a
+  // counter (a maxlength). The host reserves the row as a transparent bottom
+  // border, so the fill stays on the 56px field (clipped to the padding box)
+  // and the indicator is drawn as the padding box's last pixel line.
+  &[supporting-text]:not([supporting-text='']),
+  &[maxlength] {
+    $row: $supporting-row;
+    height: calc(#{v.text-field('height')} + #{$row});
+    border-bottom: $row solid transparent;
+    background-clip: padding-box;
+    background-image: linear-gradient(to top, #{t.color('on-surface-variant')} v.text-field('border-width'), transparent v.text-field('border-width'));
+
+    // Outlined: the outline as an inset ring round the padding box, whose
+    // bottom corners keep their radius inside the reserved border
+    &[variant='outlined'] {
+      padding-top: calc(15.5px + #{v.text-field('border-width')});
+      padding-left: calc(#{v.text-field('padding-horizontal')} + #{v.text-field('border-width')});
+      border-width: 0 0 $row;
+      border-radius: v.text-field('border-radius') / v.text-field('border-radius') v.text-field('border-radius') calc(#{v.text-field('border-radius')} + #{$row}) calc(#{v.text-field('border-radius')} + #{$row});
+      background-image: none;
+      box-shadow: inset 0 0 0 v.text-field('border-width') t.color('outline');
+    }
+
+    &[density='compact'] {
+      height: calc(40px + #{$row});
+    }
+  }
+
+  // Children are the element's own content only after upgrade.
+  > * {
+    display: none;
+  }
+}