material 3.1.0 → 3.2.0

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.0",
   "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/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;
 }