@moodlehq/design-system 2.1.1 → 3.1.0

package/dist/index.css

@@ -1,4 +1,490 @@
-@charset "UTF-8";/*!
+@charset "UTF-8";.mds-activity-icon {
+  align-items: center;
+  /*
+   * content-box so block-size/inline-size declare the ICON content area.
+   * Padding then expands the tile beyond that — matching Figma's structure
+   * where "size" is the icon and padding is added by the container variant.
+   */
+  box-sizing: content-box;
+  display: inline-flex;
+  flex-shrink: 0;
+  justify-content: center;
+  overflow: hidden;
+}
+
+/* none: no background tile, no padding — tile equals the icon size */
+
+.mds-activity-icon--none {
+  border-radius: var(--mds-border-radius-none);
+}
+
+/*
+ * default: 8px padding each side — tile = icon + 16px (e.g. lg: 24+16 = 40px total).
+ * large:  12px padding each side — tile = icon + 24px (e.g. lg: 24+24 = 48px total).
+ */
+
+.mds-activity-icon--default {
+  border-radius: var(--mds-border-radius-xl);
+  padding: var(--mds-spacing-xs);
+}
+
+.mds-activity-icon--large {
+  border-radius: var(--mds-border-radius-xl);
+  padding: var(--mds-spacing-sm);
+}
+
+/* Figma uses a smaller outer radius for default+sm only. */
+
+.mds-activity-icon--default.mds-activity-icon--size-sm {
+  border-radius: var(--mds-border-radius-lg);
+}
+
+/* Category background colors apply only when a background container is active. */
+
+.mds-activity-icon--default.mds-activity-icon--category-assessment,
+.mds-activity-icon--large.mds-activity-icon--category-assessment {
+  background-color: var(--mds-activity-icon-assessment-bg);
+}
+
+.mds-activity-icon--default.mds-activity-icon--category-collaboration,
+.mds-activity-icon--large.mds-activity-icon--category-collaboration {
+  background-color: var(--mds-activity-icon-collaboration-bg);
+}
+
+.mds-activity-icon--default.mds-activity-icon--category-communication,
+.mds-activity-icon--large.mds-activity-icon--category-communication {
+  background-color: var(--mds-activity-icon-communication-bg);
+}
+
+.mds-activity-icon--default.mds-activity-icon--category-interactive,
+.mds-activity-icon--large.mds-activity-icon--category-interactive {
+  background-color: var(--mds-activity-icon-interactive-bg);
+}
+
+.mds-activity-icon--default.mds-activity-icon--category-other,
+.mds-activity-icon--large.mds-activity-icon--category-other {
+  background-color: var(--mds-activity-icon-other-bg);
+}
+
+.mds-activity-icon--default.mds-activity-icon--category-resource,
+.mds-activity-icon--large.mds-activity-icon--category-resource {
+  background-color: var(--mds-activity-icon-resource-bg);
+}
+
+/* Size variants */
+
+.mds-activity-icon--size-sm {
+  block-size: var(--mds-icons-sm);
+  inline-size: var(--mds-icons-sm);
+}
+
+.mds-activity-icon--size-md {
+  /* Intentionally follows the Figma token mapping, where md uses the lg icon token. */
+  block-size: var(--mds-icons-lg);
+  inline-size: var(--mds-icons-lg);
+}
+
+.mds-activity-icon--size-lg {
+  /* Intentionally follows the Figma token mapping, where lg uses the xl icon token. */
+  block-size: var(--mds-icons-xl);
+  inline-size: var(--mds-icons-xl);
+}
+
+.mds-activity-icon--size-xl {
+  /* Intentionally follows the Figma token mapping, where xl uses the xxl icon token. */
+  block-size: var(--mds-icons-xxl);
+  inline-size: var(--mds-icons-xxl);
+}
+
+.mds-activity-icon__asset {
+  block-size: 100%;
+  border-radius: var(--mds-border-radius-xs);
+  display: block;
+  inline-size: 100%;
+}
+
+.mds-btn.btn {
+  background-color: var(--mds-bg-interactive-primary-default);
+  border: var(--mds-stroke-weight-sm) solid var(--mds-border-translucent);
+  border-radius: var(--mds-border-radius-md);
+  padding: var(--mds-spacing-xs) var(--mds-spacing-sm);
+
+  color: var(--mds-text-inverse);
+  font-family: var(--mds-font-family-base);
+  font-weight: var(--mds-font-weight-regular);
+  font-size: var(--mds-font-size-paragraph-default);
+  line-height: var(--mds-line-height-paragraph-small);
+  letter-spacing: var(--mds-letter-spacing-default);
+
+  /* gap provides consistent spacing between startIcon/endIcon and label text;
+     has no visual effect when the button contains only a single child (no icon) */
+  display: inline-flex;
+  align-items: center;
+  gap: var(--mds-spacing-xxs);
+}
+
+.mds-btn.btn:hover {
+  background-color: var(--mds-bg-interactive-primary-hover);
+}
+
+.mds-btn.btn:active {
+  background-color: var(--mds-bg-interactive-primary-active);
+  border: var(--mds-stroke-weight-sm) solid var(--mds-border-translucent);
+}
+
+.mds-btn.btn:disabled {
+  background-color: var(--mds-bg-interactive-primary-disabled);
+}
+
+/**
+  * Secondary variants
+  */
+
+.mds-btn.btn.btn-secondary {
+  background-color: var(--mds-bg-interactive-secondary-default);
+  color: var(--mds-text-default);
+}
+
+.mds-btn.btn.btn-secondary:hover {
+  background-color: var(--mds-bg-interactive-secondary-hover);
+}
+
+.mds-btn.btn.btn-secondary:active {
+  background-color: var(--mds-bg-interactive-secondary-active);
+}
+
+.mds-btn.btn.btn-secondary:disabled {
+  background-color: var(--mds-bg-interactive-secondary-disabled);
+}
+
+/**
+  * Danger variants
+  */
+
+.mds-btn.btn-danger {
+  background-color: var(--mds-bg-interactive-danger-default);
+}
+
+.mds-btn.btn-danger:hover {
+  background-color: var(--mds-bg-interactive-danger-hover);
+}
+
+.mds-btn.btn-danger:active {
+  background-color: var(--mds-bg-interactive-danger-active);
+}
+
+.mds-btn.btn.btn-danger:disabled {
+  background-color: var(--mds-bg-interactive-danger-disabled);
+}
+
+/**
+  * Outline Primary variants
+  */
+
+.mds-btn.btn-outline-primary {
+  background-color: transparent;
+  border: var(--mds-stroke-weight-sm) solid
+    var(--mds-border-interactive-primary-default);
+  color: var(--mds-text-link-primary-default);
+}
+
+.mds-btn.btn-outline-primary:hover {
+  background-color: var(--mds-bg-interactive-primary-hover);
+  color: var(--mds-text-inverse);
+}
+
+.mds-btn.btn-outline-primary:active {
+  background-color: var(--mds-bg-interactive-primary-active);
+  color: var(--mds-text-inverse);
+}
+
+.mds-btn.btn.btn-outline-primary:disabled {
+  background-color: transparent;
+  border: var(--mds-stroke-weight-sm) solid
+    var(--mds-border-interactive-primary-disabled);
+  color: var(--mds-color-blue-300);
+}
+
+/**
+  * Outline Secondary variants
+  */
+
+.mds-btn.btn-outline-secondary {
+  background-color: transparent;
+  border: var(--mds-stroke-weight-sm) solid
+    var(--mds-border-interactive-secondary-default);
+  color: var(--mds-text-muted);
+}
+
+.mds-btn.btn-outline-secondary:hover {
+  background-color: var(--mds-border-interactive-secondary-hover);
+  color: var(--mds-text-inverse);
+}
+
+.mds-btn.btn-outline-secondary:active {
+  background-color: var(--mds-border-interactive-secondary-active);
+  color: var(--mds-text-inverse);
+}
+
+.mds-btn.btn.btn-outline-secondary:disabled {
+  background-color: transparent;
+  border: var(--mds-stroke-weight-sm) solid
+    var(--mds-border-interactive-secondary-disabled);
+  color: var(--mds-color-gray-500);
+}
+
+/**
+  * Outline Danger variants
+  */
+
+.mds-btn.btn-outline-danger {
+  background-color: transparent;
+  border: var(--mds-stroke-weight-sm) solid
+    var(--mds-border-interactive-danger-default);
+  color: var(--mds-text-danger);
+}
+
+.mds-btn.btn-outline-danger:hover {
+  background-color: var(--mds-bg-interactive-danger-default);
+  color: var(--mds-text-inverse);
+}
+
+.mds-btn.btn-outline-danger:active {
+  background-color: var(--mds-bg-interactive-danger-hover);
+  color: var(--mds-text-inverse);
+}
+
+.mds-btn.btn.btn-outline-danger:disabled {
+  background-color: transparent;
+  border: var(--mds-stroke-weight-sm) solid
+    var(--mds-border-interactive-danger-disabled);
+  color: var(--mds-color-red-300);
+}
+
+/**
+  * Size variants
+  */
+
+.mds-btn.btn-sm {
+  padding: var(--mds-spacing-xxs) var(--mds-spacing-xs);
+  font-size: var(--mds-font-size-paragraph-small);
+  line-height: var(--mds-line-height-paragraph-small);
+}
+
+.mds-btn.btn-lg {
+  padding: var(--mds-spacing-xs) var(--mds-spacing-md);
+  font-size: var(--mds-font-size-paragraph-lead);
+  line-height: var(--mds-line-height-paragraph-default);
+}
+
+.mds-close-button.btn-close {
+  inline-size: var(--mds-icons-md);
+  block-size: var(--mds-icons-md);
+  padding: 0;
+  border-radius: var(--mds-border-radius-xs);
+  background-image: url("data:image/svg+xml,%3csvg%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M4.12109%205.87891L8.22266%209.98047L4.12109%2014.1211C3.61328%2014.5898%203.61328%2015.4102%204.12109%2015.8789C4.58984%2016.3867%205.41016%2016.3867%205.87891%2015.8789L9.98047%2011.7773L14.1211%2015.8789C14.5898%2016.3867%2015.4102%2016.3867%2015.8789%2015.8789C16.3867%2015.4102%2016.3867%2014.5898%2015.8789%2014.1211L11.7773%209.98047L15.8789%205.87891C16.3867%205.41016%2016.3867%204.58984%2015.8789%204.12109C15.4102%203.61328%2014.5898%203.61328%2014.1211%204.12109L9.98047%208.22266L5.87891%204.12109C5.41016%203.61328%204.58984%203.61328%204.12109%204.12109C3.61328%204.58984%203.61328%205.41016%204.12109%205.87891Z'%20fill='%231D2125'/%3e%3c/svg%3e");
+  background-size: var(--mds-icons-md) var(--mds-icons-md);
+  opacity: 0.6;
+}
+
+.mds-close-button.btn-close:hover {
+  opacity: 0.75;
+}
+
+.mds-close-button.btn-close:focus {
+  box-shadow: none;
+}
+
+.mds-close-button.btn-close:focus-visible {
+  outline: var(--mds-stroke-weight-md) solid var(--mds-focus-default);
+  outline-offset: 0;
+  box-shadow: none;
+  opacity: 1;
+}
+
+.mds-close-button.btn-close:disabled,
+.mds-close-button.btn-close.disabled {
+  opacity: 0.25;
+}
+
+.mds-close-button.btn-close.mds-close-button--sm {
+  inline-size: var(--mds-icons-sm);
+  block-size: var(--mds-icons-sm);
+  background-size: var(--mds-icons-sm) var(--mds-icons-sm);
+}
+
+.mds-close-button.btn-close.mds-close-button--md {
+  inline-size: var(--mds-icons-md);
+  block-size: var(--mds-icons-md);
+  background-size: var(--mds-icons-md) var(--mds-icons-md);
+}
+
+.mds-close-button.btn-close.mds-close-button--lg {
+  inline-size: var(--mds-icons-lg);
+  block-size: var(--mds-icons-lg);
+  background-size: var(--mds-icons-lg) var(--mds-icons-lg);
+}
+
+/* Parent element */
+
+.mds-form-check {
+  /* Grid layout: column 1 = input, column 2 = label. The feedback is then placed
+     explicitly into column 2 via grid-column so it aligns with the label without
+     requiring any offset calculation. Grid formatting context also suppresses
+     Bootstrap's float on the input child. */
+  display: inline-grid;
+  grid-template-columns: auto auto;
+  align-items: start;
+  /* Prevent flex containers from stretching this element across the cross axis,
+     which would widen the grid and split the two auto columns equally, pushing
+     the label away from the input. start preserves content-sized behaviour. */
+  align-self: start;
+  /* min-height matches the icon-lg token (24px) so the wrapper never collapses
+     below the height of the radio indicator, regardless of label content. */
+  min-height: var(--mds-icons-lg, 1.5rem);
+  /* Reset Bootstrap's padding-inline-start — it exists to indent label text past a
+     floated input, which our grid layout does not use. column-gap handles the spacing. */
+  padding: var(--mds-spacing-none, 0);
+  /* column-gap keeps input and label spaced; row-gap gives breathing room above feedback */
+  column-gap: var(--mds-spacing-xs, 0.5rem);
+  row-gap: var(--mds-spacing-xxs, 0.25rem);
+
+  /* UI text/UI default */
+  font-family: var(--mds-font-family-base, Arial, sans-serif);
+  font-size: var(--mds-font-size-body, 1rem);
+  font-weight: var(--mds-font-weight-regular, 400);
+  line-height: var(--mds-line-height-paragraph-small, 1.0875rem); /* 108.75% */
+  letter-spacing: var(--mds-letter-spacing, 0);
+}
+
+/* Input element styles */
+
+.mds-form-check-input {
+  border-radius: var(--mds-border-radius-pill, 50rem);
+  border: var(--mds-stroke-weight-sm, 1px) solid
+    var(--mds-border-interactive-secondary-default, #6a737b);
+  /* Use background-color, not the background shorthand — the shorthand resets
+     background-image to none, which wipes out Bootstrap's --bs-form-check-bg-image
+     (the inner dot SVG) on the checked state. */
+}
+
+/* Bootstrap's .form-check .form-check-input rule (specificity 0,2,0) sets float: left
+   and a negative margin-inline-start that causes overlap. Match its specificity to
+   ensure our flex-friendly reset wins regardless of load order. */
+
+.mds-form-check .mds-form-check-input {
+  margin: 0;
+  float: none;
+  background-color: var(--mds-bg-surface-default, #fff);
+}
+
+.mds-form-check-input:checked {
+  background-color: var(--mds-bg-interactive-primary-default);
+  border-color: transparent;
+}
+
+.mds-form-check-input:disabled {
+  border-color: var(--mds-border-interactive-secondary-disabled);
+}
+
+.mds-form-check-input:disabled:checked {
+  background-color: var(--mds-bg-interactive-primary-disabled);
+  border-color: transparent;
+}
+
+.mds-form-check-input.is-invalid {
+  border-color: var(--mds-border-interactive-danger-default);
+}
+
+.mds-form-check-input.is-invalid:checked {
+  background-color: var(--mds-bg-interactive-danger-default);
+  border-color: transparent;
+}
+
+/* Explicit rule for invalid + disabled to avoid relying on specificity cascade order.
+   Disabled takes visual precedence: use the disabled background/border, not the danger ones. */
+
+.mds-form-check-input.is-invalid:disabled {
+  background-color: var(--mds-bg-interactive-secondary-disabled);
+  border-color: var(--mds-border-interactive-secondary-disabled);
+}
+
+.mds-form-check-input.is-invalid:disabled:checked {
+  background-color: var(--mds-bg-interactive-primary-disabled);
+  border-color: transparent;
+}
+
+/* is-valid (Bootstrap) and neutral feedback states are intentionally not supported.
+   Radio buttons surface a binary valid/invalid result; positive confirmation
+   is conveyed by form-level success messaging rather than per-input valid styling. */
+
+/* Hover styles are intentionally omitted. The radio input relies on the OS/browser
+   default appearance for hover; no design token exists for a radio hover state. */
+
+/* Focus ring: Only outline + outline-offset allowed (no box-shadow or border).
+  See .github/instructions/components.instructions.md for full rules and rationale. */
+
+.mds-form-check-input:focus,
+.mds-form-check-input.is-invalid:focus {
+  /* Reset Bootstrap's :focus box-shadow; our ring is applied on :focus-visible only */
+  box-shadow: none;
+  outline: none;
+}
+
+.mds-form-check-input:focus-visible {
+  outline: var(--mds-stroke-weight-md) solid var(--mds-focus-default);
+  outline-offset: var(--mds-spacing-offset);
+  box-shadow: none;
+}
+
+.mds-form-check-input.is-invalid:focus-visible {
+  outline: var(--mds-stroke-weight-md) solid var(--mds-border-feedback-danger);
+  outline-offset: var(--mds-spacing-offset);
+  box-shadow: none;
+}
+
+/* Label element styles */
+
+.mds-form-check .form-check-label,
+.mds-form-check .mds-form-check-label {
+  color: var(--mds-text-default, #1d2125);
+  cursor: pointer;
+}
+
+/* Use sibling selector so the label reflects the input's disabled/invalid state */
+
+.mds-form-check .mds-form-check-input:disabled ~ .form-check-label,
+.mds-form-check .mds-form-check-input:disabled ~ .mds-form-check-label {
+  color: var(--mds-text-muted);
+  /* Disabled inputs are not interactive — suppress the pointer cursor on the label */
+  cursor: default;
+}
+
+.mds-form-check .mds-form-check-input.is-invalid ~ .form-check-label,
+.mds-form-check .mds-form-check-input.is-invalid ~ .mds-form-check-label {
+  color: var(--mds-text-danger);
+}
+
+/* Feedback element styles — UI text/UI small */
+
+.mds-form-check .invalid-feedback,
+.mds-form-check .mds-form-check-feedback {
+  /* Place feedback in column 2 (the label column) so it aligns with the label
+     regardless of input size or font-size differences. Row placement is automatic. */
+  grid-column: 2;
+  font-size: var(--mds-font-size-paragraph-small, 0.875rem);
+  font-weight: var(--mds-font-weight-medium, 500);
+  color: var(--mds-text-danger);
+}
+
+/* Dim the feedback when the input is disabled to match the reduced visual weight of
+   the label and input; keeps the feedback legible without implying it is actionable. */
+
+.mds-form-check:has(.mds-form-check-input:disabled) .invalid-feedback,
+.mds-form-check:has(.mds-form-check-input:disabled) .mds-form-check-feedback {
+  opacity: 0.5;
+}
+/*!
  * Bootstrap  v5.3.8 (https://getbootstrap.com/)
  * Copyright 2011-2025 The Bootstrap Authors
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
@@ -17,26 +503,54 @@
   --mds-stroke-weight-sm: 0.0625rem;
   --mds-stroke-weight-xl: 0.25rem;
   --mds-stroke-weight-xxl: 0.3125rem;
-  --mds-border-radius-lg: var(--mds-scale-300);
-  --mds-border-radius-md: var(--mds-scale-200);
+  --mds-border-radius-lg: var(--mds-scale-400);
+  --mds-border-radius-md: var(--mds-scale-300);
   --mds-border-radius-none: var(--mds-scale-0);
   --mds-border-radius-pill: var(--mds-scale-1800);
-  --mds-border-radius-sm: var(--mds-scale-100);
+  --mds-border-radius-sm: var(--mds-scale-200);
   --mds-border-radius-xl: var(--mds-scale-600);
+  --mds-border-radius-xs: var(--mds-scale-100);
   --mds-border-radius-xxl: var(--mds-scale-1000);
 }
 
+/**
+ * THIS FILE IS AUTO-GENERATED BY STYLE DICTIONARY — DO NOT EDIT DIRECTLY.
+ */
+
+:root {
+  --mds-breakpoints-lg: 62rem;
+  --mds-breakpoints-md: 48rem;
+  --mds-breakpoints-sm: 36rem;
+  --mds-breakpoints-xl: 75rem;
+  --mds-breakpoints-xxl: 87.5rem;
+}
+
 /**
  * THIS FILE IS AUTO-GENERATED BY STYLE DICTIONARY — DO NOT EDIT DIRECTLY.
  */
 
 :root {
   --mds-border-translucent: rgba(0, 0, 0, 0);
+  --mds-activity-icon-assessment-bg: var(--mds-color-pink-100);
+  --mds-activity-icon-assessment-icon: var(--mds-color-pink-500);
+  --mds-activity-icon-collaboration-bg: var(--mds-color-indigo-100);
+  --mds-activity-icon-collaboration-icon: var(--mds-color-indigo-500);
+  --mds-activity-icon-communication-bg: var(--mds-color-orange-100);
+  --mds-activity-icon-communication-icon: var(--mds-color-orange-600);
+  --mds-activity-icon-file-bg: var(--mds-color-cyan-100);
+  --mds-activity-icon-file-icon: var(--mds-color-cyan-500);
+  --mds-activity-icon-interactive-bg: var(--mds-color-red-100);
+  --mds-activity-icon-interactive-icon: var(--mds-color-red-700);
+  --mds-activity-icon-other-bg: var(--mds-color-gray-300);
+  --mds-activity-icon-other-icon: var(--mds-color-gray-900);
+  --mds-activity-icon-resource-bg: var(--mds-color-cyan-100);
+  --mds-activity-icon-resource-icon: var(--mds-color-cyan-500);
   --mds-bg-feedback-danger-subtle: var(--mds-color-red-100);
   --mds-bg-feedback-info-default: var(--mds-color-cyan-500);
   --mds-bg-feedback-info-subtle: var(--mds-color-cyan-100);
   --mds-bg-feedback-primary-default: var(--mds-color-blue-500);
   --mds-bg-feedback-primary-subtle: var(--mds-color-blue-100);
+  --mds-bg-feedback-secondary-default: var(--mds-color-gray-400);
   --mds-bg-feedback-secondary-subtle: var(--mds-color-gray-100);
   --mds-bg-feedback-success-default: var(--mds-color-green-500);
   --mds-bg-feedback-success-subtle: var(--mds-color-green-100);
@@ -44,11 +558,11 @@
   --mds-bg-feedback-warning-subtle: var(--mds-color-yellow-100);
   --mds-bg-interactive-danger-active: var(--mds-color-red-700);
   --mds-bg-interactive-danger-default: var(--mds-color-red-500);
-  --mds-bg-interactive-danger-disabled: var(--mds-color-red-300);
+  --mds-bg-interactive-danger-disabled: var(--mds-color-red-200);
   --mds-bg-interactive-danger-hover: var(--mds-color-red-600);
   --mds-bg-interactive-primary-active: var(--mds-color-blue-700);
   --mds-bg-interactive-primary-default: var(--mds-color-blue-500);
-  --mds-bg-interactive-primary-disabled: var(--mds-color-blue-300);
+  --mds-bg-interactive-primary-disabled: var(--mds-color-blue-200);
   --mds-bg-interactive-primary-hover: var(--mds-color-blue-600);
   --mds-bg-interactive-secondary-default: var(--mds-color-gray-400);
   --mds-bg-interactive-secondary-disabled: var(--mds-color-gray-200);
@@ -72,7 +586,9 @@
   --mds-border-interactive-secondary-disabled: var(--mds-color-gray-500);
   --mds-border-interactive-secondary-hover: var(--mds-color-gray-600);
   --mds-border-subtle: var(--mds-color-gray-200);
+  --mds-focus-danger: var(--mds-color-red-200);
   --mds-text-danger: var(--mds-color-red-500);
+  --mds-text-danger-disabled: var(--mds-color-red-300);
   --mds-text-default: var(--mds-color-gray-900);
   --mds-text-emphasis: var(--mds-color-gray-black);
   --mds-text-feedback-danger: var(--mds-color-red-800);
@@ -82,6 +598,7 @@
   --mds-text-feedback-success: var(--mds-color-green-800);
   --mds-text-feedback-warning: var(--mds-color-yellow-800);
   --mds-text-inverse: var(--mds-color-gray-100);
+  --mds-text-link-primary-disabled: var(--mds-color-blue-300);
   --mds-text-muted: var(--mds-color-gray-600);
   --mds-text-subtle: var(--mds-color-gray-700);
   --mds-bg-feedback-danger-default: var(--mds-bg-interactive-danger-default);
@@ -263,9 +780,9 @@
  */
 
 :root {
-  --mds-color-lg: rgba(0, 0, 0, 0.2);
-  --mds-color-md: rgba(0, 0, 0, 0.2);
-  --mds-color-sm: rgba(0, 0, 0, 0.1);
+  --mds-color-lg: rgba(0, 0, 0, 0.17);
+  --mds-color-md: rgba(0, 0, 0, 0.15);
+  --mds-color-sm: rgba(0, 0, 0, 0.08);
   --mds-blur-lg: var(--mds-scale-1200);
   --mds-blur-md: var(--mds-scale-600);
   --mds-blur-sm: var(--mds-scale-100);
@@ -279,12 +796,13 @@
  */
 
 :root {
-  --mds-icons-lg: var(--mds-scale-700);
-  --mds-icons-md: var(--mds-scale-600);
-  --mds-icons-sm: var(--mds-scale-400);
-  --mds-icons-xl: var(--mds-scale-800);
-  --mds-icons-xs: var(--mds-scale-300);
-  --mds-icons-xxl: var(--mds-scale-1000);
+  --mds-icons-lg: var(--mds-scale-800);
+  --mds-icons-md: var(--mds-scale-700);
+  --mds-icons-sm: var(--mds-scale-600);
+  --mds-icons-xl: var(--mds-scale-1000);
+  --mds-icons-xs: var(--mds-scale-400);
+  --mds-icons-xxl: var(--mds-scale-1100);
+  --mds-icons-xxs: var(--mds-scale-300);
   --mds-icons-xxxl: var(--mds-scale-1200);
 }
 
@@ -293,6 +811,7 @@
  */
 
 :root {
+  --mds-spacing-offset: 0.0625rem;
   --mds-spacing-lg: var(--mds-scale-700);
   --mds-spacing-md: var(--mds-scale-600);
   --mds-spacing-none: var(--mds-scale-0);
@@ -350,139 +869,4 @@
   --mds-margin-bottom-heading: var(--mds-spacing-xs); /** Default margin below a Headings. */
   --mds-margin-bottom-paragraph: var(--mds-spacing-md); /** Default margin below a paragraph. */
 }
-.mds-btn.btn {
-  background-color: var(--mds-bg-interactive-primary-default);
-  border: var(--mds-stroke-weight-sm) solid var(--mds-border-translucent);
-  border-radius: var(--mds-border-radius-lg);
-  padding: var(--mds-spacing-xs) var(--mds-spacing-sm);
-
-  color: var(--mds-text-inverse);
-  font-family: var(--mds-font-family-base);
-  font-weight: var(--mds-font-weight-regular);
-  font-size: var(--mds-font-size-paragraph-default);
-  line-height: var(--mds-line-height-paragraph-small);
-  letter-spacing: var(--mds-letter-spacing-default);
-}
-.mds-btn.btn:hover {
-  background-color: var(--mds-bg-interactive-primary-hover);
-}
-.mds-btn.btn:active {
-  background-color: var(--mds-bg-interactive-primary-active);
-  border: var(--mds-stroke-weight-sm) solid var(--mds-border-translucent);
-}
-.mds-btn.btn:disabled {
-  background-color: var(--mds-bg-interactive-primary-disabled);
-}
-/**
-  * Secondary variants
-  */
-.mds-btn.btn.btn-secondary {
-  background-color: var(--mds-bg-interactive-secondary-default);
-  color: var(--mds-text-default);
-}
-.mds-btn.btn.btn-secondary:hover {
-  background-color: var(--mds-bg-interactive-secondary-hover);
-}
-.mds-btn.btn.btn-secondary:active {
-  background-color: var(--mds-bg-interactive-secondary-active);
-}
-.mds-btn.btn.btn-secondary:disabled {
-  background-color: var(--mds-bg-interactive-secondary-disabled);
-}
-/**
-  * Danger variants
-  */
-.mds-btn.btn-danger {
-  background-color: var(--mds-bg-interactive-danger-default);
-}
-.mds-btn.btn-danger:hover {
-  background-color: var(--mds-bg-interactive-danger-hover);
-}
-.mds-btn.btn-danger:active {
-  background-color: var(--mds-bg-interactive-danger-active);
-}
-.mds-btn.btn.btn-danger:disabled {
-  background-color: var(--mds-bg-interactive-danger-disabled);
-}
-/**
-  * Outline Primary variants
-  */
-.mds-btn.btn-outline-primary {
-  background-color: transparent;
-  border: var(--mds-stroke-weight-sm) solid
-    var(--mds-border-interactive-primary-default);
-  color: var(--mds-text-link-primary-default);
-}
-.mds-btn.btn-outline-primary:hover {
-  background-color: var(--mds-bg-interactive-primary-hover);
-  color: var(--mds-text-inverse);
-}
-.mds-btn.btn-outline-primary:active {
-  background-color: var(--mds-bg-interactive-primary-active);
-  color: var(--mds-text-inverse);
-}
-.mds-btn.btn.btn-outline-primary:disabled {
-  background-color: transparent;
-  border: var(--mds-stroke-weight-sm) solid
-    var(--mds-border-interactive-primary-disabled);
-  color: var(--mds-color-blue-300);
-}
-/**
-  * Outline Secondary variants
-  */
-.mds-btn.btn-outline-secondary {
-  background-color: transparent;
-  border: var(--mds-stroke-weight-sm) solid
-    var(--mds-border-interactive-secondary-default);
-  color: var(--mds-text-muted);
-}
-.mds-btn.btn-outline-secondary:hover {
-  background-color: var(--mds-border-interactive-secondary-hover);
-  color: var(--mds-text-inverse);
-}
-.mds-btn.btn-outline-secondary:active {
-  background-color: var(--mds-border-interactive-secondary-active);
-  color: var(--mds-text-inverse);
-}
-.mds-btn.btn.btn-outline-secondary:disabled {
-  background-color: transparent;
-  border: var(--mds-stroke-weight-sm) solid
-    var(--mds-border-interactive-secondary-disabled);
-  color: var(--mds-color-gray-500);
-}
-/**
-  * Outline Danger variants
-  */
-.mds-btn.btn-outline-danger {
-  background-color: transparent;
-  border: var(--mds-stroke-weight-sm) solid
-    var(--mds-border-interactive-danger-default);
-  color: var(--mds-text-danger);
-}
-.mds-btn.btn-outline-danger:hover {
-  background-color: var(--mds-bg-interactive-danger-default);
-  color: var(--mds-text-inverse);
-}
-.mds-btn.btn-outline-danger:active {
-  background-color: var(--mds-bg-interactive-danger-hover);
-  color: var(--mds-text-inverse);
-}
-.mds-btn.btn.btn-outline-danger:disabled {
-  background-color: transparent;
-  border: var(--mds-stroke-weight-sm) solid
-    var(--mds-border-interactive-danger-disabled);
-  color: var(--mds-color-red-300);
-}
-/**
-  * Size variants
-  */
-.mds-btn.btn-sm {
-  padding: var(--mds-spacing-xxs) var(--mds-spacing-xs);
-  font-size: var(--mds-font-size-paragraph-small);
-  line-height: var(--mds-line-height-paragraph-small);
-}
-.mds-btn.btn-lg {
-  padding: var(--mds-spacing-xs) var(--mds-spacing-md);
-  font-size: var(--mds-font-size-paragraph-lead);
-  line-height: var(--mds-line-height-paragraph-default);
-}
+/*$vite$:1*/