material 3.1.0 → 3.2.1

package/dist/vue/slider.js

@@ -1,5 +1,3 @@
-// src/vue/slider.ts
-// Generated by scripts/generate-adapters.ts from src/elements. Do not edit.
 import "material/elements/css/slider";
 import { sliderElement, defineSlider } from "../elements/slider.js";
 import { createComponent } from "./create.js";

package/dist/vue/snackbar.js

@@ -1,5 +1,3 @@
-// src/vue/snackbar.ts
-// Generated by scripts/generate-adapters.ts from src/elements. Do not edit.
 import "material/elements/css/progress";
 import "material/elements/css/button";
 import "material/elements/css/icon-button";

package/dist/vue/split-button.js

@@ -1,5 +1,3 @@
-// src/vue/split-button.ts
-// Generated by scripts/generate-adapters.ts from src/elements. Do not edit.
 import "material/elements/css/progress";
 import "material/elements/css/button";
 import "material/elements/css/menu";

package/dist/vue/switch.js

@@ -1,5 +1,3 @@
-// src/vue/switch.ts
-// Generated by scripts/generate-adapters.ts from src/elements. Do not edit.
 import "material/elements/css/switch";
 import { switchElement, defineSwitch } from "../elements/switch.js";
 import { createComponent } from "./create.js";

package/dist/vue/tab.js

@@ -1,5 +1,3 @@
-// src/vue/tab.ts
-// Generated by scripts/generate-adapters.ts from src/elements. Do not edit.
 import { tabDeclaration } from "../elements/tabs.js";
 import { createDeclaration } from "./create.js";
 export const MTab = /*#__PURE__*/ createDeclaration(tabDeclaration, "MTab");

package/dist/vue/tabs.js

@@ -1,5 +1,3 @@
-// src/vue/tabs.ts
-// Generated by scripts/generate-adapters.ts from src/elements. Do not edit.
 import "material/elements/css/badge";
 import "material/elements/css/progress";
 import "material/elements/css/button";

package/dist/vue/text-field.js

@@ -1,5 +1,3 @@
-// src/vue/text-field.ts
-// Generated by scripts/generate-adapters.ts from src/elements. Do not edit.
 import "material/elements/css/text-field";
 import { textFieldElement, defineTextField } from "../elements/text-field.js";
 import { createComponent } from "./create.js";

package/dist/vue/timepicker.js

@@ -1,5 +1,3 @@
-// src/vue/timepicker.ts
-// Generated by scripts/generate-adapters.ts from src/elements. Do not edit.
 import "material/elements/css/timepicker";
 import { timepickerElement, defineTimepicker } from "../elements/timepicker.js";
 import { createComponent } from "./create.js";

package/dist/vue/toolbar.js

@@ -1,5 +1,3 @@
-// src/vue/toolbar.ts
-// Generated by scripts/generate-adapters.ts from src/elements. Do not edit.
 import "material/elements/css/icon-button";
 import "material/elements/css/toolbar";
 import { toolbarElement, defineToolbar } from "../elements/toolbar.js";

package/dist/vue/tooltip.js

@@ -1,5 +1,3 @@
-// src/vue/tooltip.ts
-// Generated by scripts/generate-adapters.ts from src/elements. Do not edit.
 import "material/elements/css/tooltip";
 import { tooltipElement, defineTooltip } from "../elements/tooltip.js";
 import { createComponent } from "./create.js";

package/dist/vue/top-app-bar.js

@@ -1,5 +1,3 @@
-// src/vue/top-app-bar.ts
-// Generated by scripts/generate-adapters.ts from src/elements. Do not edit.
 import "material/elements/css/top-app-bar";
 import { topAppBarElement, defineTopAppBar } from "../elements/top-app-bar.js";
 import { createComponent } from "./create.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "material",
-  "version": "3.1.0",
+  "version": "3.2.1",
   "description": "Material Design 3 components for the web: plain JavaScript, web components, and React, Vue, Svelte and Solid components. TypeScript, zero dependencies.",
   "author": "floor",
   "license": "MIT",

package/src/styles/components/_tabs.scss

@@ -291,21 +291,30 @@ $container: "#{base.$prefix}-tabs";
         @include m.visually-hidden;
     }
 
-    // Badge positioning (2. Badge - optional). The layout modifier is on the tab
-    // itself, so these hang off &, not off a nested tab.
-    &--icon-only .#{base.$prefix}-badge__wrapper .#{base.$prefix}-badge--top-right {
-        top: 4px;
-        right: 4px;
+    // Badge on the icon, else the label (tab.ts): 6dp over the icon, 4dp after the
+    // label, mirrored in RTL (m3.material.io/components/{tabs/specs,badges/guidelines}).
+    &--icon-only .#{base.$prefix}-badge__wrapper .#{base.$prefix}-badge--top-right,
+    &--icon-and-text .#{base.$prefix}-badge__wrapper .#{base.$prefix}-badge--top-right {
+        top: 0;
+        right: auto;
+        left: calc(100% - 6px);
+
+        @include m.rtl {
+            right: calc(100% - 6px);
+            left: auto;
+        }
     }
 
     &--text-only .#{base.$prefix}-badge__wrapper .#{base.$prefix}-badge--top-right {
-        top: 8px;
-        right: 8px;
-    }
+        top: 50%;
+        right: auto;
+        left: calc(100% + 4px);
+        transform: translateY(-50%);
 
-    &--icon-and-text .#{base.$prefix}-badge__wrapper .#{base.$prefix}-badge--top-right {
-        top: 4px;
-        right: calc(50% - 20px);
+        @include m.rtl {
+            right: calc(100% + 4px);
+            left: auto;
+        }
     }
 
     // ACTIVE TAB STATES - PRIMARY VARIANT

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

@@ -1,40 +1,103 @@
-// 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 'sass:list';
+@use 'sass:map';
 @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.
+$sizes: (
+  'xs': (32px, 18px, 13px, 'label-large', 20px),
+  's': (40px, 12px, 17px, 'label-large', 24px),
+  'm': (56px, 8px, 25px, 'title-medium', 24px),
+  'l': (96px, 8px, 50px, 'headline-small', 32px),
+  'xl': (136px, 8px, 67px, 'headline-large', 40px),
+);
+$densities: ('comfortable': 4px, 'compact': 8px);
+$icon-first: ':has(> [icon]:empty:first-child)';
+
+@mixin item($size, $font: true, $letter: true, $weight: true) {
+  $t: map.get($sizes, $size);
+  $type: map.get(v.$typescale, list.nth($t, 4));
+  height: list.nth($t, 1);
+  padding: 0 list.nth($t, 3);
+  @if $font {
+    font-size: map.get($type, 'font-size');
+    line-height: map.get($type, 'line-height');
+    @if $letter { letter-spacing: map.get($type, 'letter-spacing'); }
+  }
+  @if $weight { font-weight: map.get($type, 'font-weight'); }
+}
+
 @include c.host('button-group') {
   display: inline-flex;
-  vertical-align: middle;
+  vertical-align: baseline;
   gap: 12px;
   white-space: nowrap;
 
-  // Only the small/default size is reserved here. Other sizes retain their
-  // original baseline until their size reservation is addressed in #49.
-  &:not([size]), &[size='s'] {
-    vertical-align: baseline;
-    align-items: baseline;
-
-    // Preserve the inherited line box without adding inline space or a gap.
-    &::before {
-      content: " ";
-      white-space: pre;
-      width: 0;
-      margin-inline-end: -12px;
+  &::before {
+    width: 0;
+    height: 32px;
+    margin-inline-end: -12px;
+    align-self: flex-start;
+  }
+
+  &#{$icon-first} {
+    align-items: center;
+
+    &::before { content: ""; }
+  }
+
+  &[size='xs'] { gap: 18px; }
+  &:is([size='m'], [size='l'], [size='xl']) { gap: 8px; }
+
+  @each $density, $step in $densities {
+    &[density='#{$density}'] > * { height: 40px - $step; }
+  }
+
+  @each $size in ('xs', 'm', 'l', 'xl') {
+    &[size='#{$size}'] {
+      $t: map.get($sizes, $size);
+
+      > * {
+        @if $size == 'xs' { @include item($size, $font: false, $weight: false); }
+        @else if $size == 'm' { @include item($size, $weight: false); }
+        @else { @include item($size, $letter: false, $weight: false); }
+      }
+
+      @each $density, $step in $densities {
+        &[density='#{$density}'] > * { height: list.nth($t, 1) - $step; }
+      }
+
+      &::before {
+        height: list.nth($t, 1) * 0.5 + list.nth($t, 5) * 0.5;
+        @if $size == 'xs' { margin-inline-end: -1 * list.nth($t, 2); }
+      }
     }
   }
+
+  &:is([size='m'], [size='l'], [size='xl'])::before { margin-inline-end: -8px; }
+  &:is([size='l'], [size='xl']) > * { letter-spacing: 0; font-weight: 400; }
+
+  @each $density, $step in $densities {
+    &[density='#{$density}']::before { margin-block-start: $step * -0.5; }
+  }
 }
 
 @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');
+  flex: none;
+  min-width: 58px;
+  font-family: var(--mtrl-ref-typeface-plain,Roboto,sans-serif);
+  @include item('s');
+
+  &[icon]:empty { min-width: 0; padding: 0; aspect-ratio: 1; }
+}
+
+@include c.host('button-group') {
+  &[kind='connected'] {
+    gap: 2px;
+
+    &::before { margin-inline-end: -2px; }
+  }
+
+  &:is(:not([size]), [size='xs'], [size='s'])[kind='connected'] > * { min-width: 48px; }
 }

package/src/styles/elements/_datepicker.scss

@@ -9,7 +9,7 @@
 // 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;
+  display: inline-flex;
   box-sizing: border-box;
   width: v.text-field('width');
   vertical-align: baseline;

package/src/styles/themes/_baseline.scss

@@ -145,8 +145,13 @@
     --#{$prefix}-sys-color-inverse-primary: #6750a4;
 }
 
-// Apply baseline light theme to :root by default
-:root {
+// Apply baseline light theme to :root by default. `:where()` keeps these
+// declarations at zero specificity: `:root` and `[data-theme="name"]` share
+// specificity (0,1,0), so an unconditional :root block wins wherever baseline
+// is emitted after another theme (an app compiling the partials in its own
+// order). At (0,0,0) a selected theme always wins, in any order, while the
+// roles a theme does not declare still inherit from here.
+:where(:root) {
     @include baseline-light-variables;
 
     // Apply dark theme based on system preference
@@ -155,8 +160,12 @@
     }
 }
 
-// Dark theme class for manual switching
-.dark-theme {
+// Dark theme class for manual switching. `:where()` for the same reason: a
+// page that selected a theme uses data-theme-mode="dark" instead, and a stray
+// dark-theme class on a themed element must not override it. On an unthemed
+// page (or a nested container, where nothing else declares the roles) the
+// class behaves exactly as before.
+:where(.dark-theme) {
     @include baseline-dark-variables;
 }