material 3.0.6 → 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.0.6",
+  "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/main.scss

@@ -1,5 +1,8 @@
 // src/styles/main.scss
 
+// Configure before any theme module is loaded.
+@forward "themes/base-theme" show $contrast-emit;
+
 // Import Sass modules
 @use "sass:map";
 @use "sass:list" as sasslist;

package/src/styles/themes/_base-theme.scss

@@ -1,13 +1,19 @@
 // src/styles/themes/_base-theme.scss
 @use 'sass:map';
+@use 'sass:list';
 @use '../abstract/base' as *;
 
-// Build switch, not a public API (the README's Sass `@use … with` is unsupported).
+// Public compilation option, forwarded by the themes and main Sass entries.
 // all: explicit attribute rules and the prefers-contrast block (the full stylesheet).
 // explicit: the attribute rules only (material/styles/contrast, material/themes/<name>-contrast).
 // preference: the prefers-contrast block only (material/styles/base, material/themes/<name>).
+// none: standard roles only, with neither activation family.
 $contrast-emit: all !default;
 
+@if not list.index((all, explicit, preference, none), $contrast-emit) {
+  @error "$contrast-emit must be all, explicit, preference, or none.";
+}
+
 // Base theme definition with common properties and structure
 @mixin create-theme($name) {
   [data-theme="#{$name}"] {
@@ -80,7 +86,7 @@ $contrast-emit: all !default;
       }
     }
   }
-  @if $contrast-emit != preference {
+  @if $contrast-emit == all or $contrast-emit == explicit {
     #{$scope}:is([data-theme-contrast="medium"], [data-theme-contrast="high"]) {
       @include contrast-modes($name, $shared);
     }
@@ -90,7 +96,7 @@ $contrast-emit: all !default;
       }
     }
   }
-  @if $contrast-emit != explicit {
+  @if $contrast-emit == all or $contrast-emit == preference {
     @media (prefers-contrast: more) {
       #{$scope}:not([data-theme-contrast]) {
         @include contrast-modes($name, $high);

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;
 }