@moodlehq/design-system 4.1.0 → 5.0.0

package/dist/components/progress-bar/index.css

@@ -0,0 +1,193 @@
+/* Wrapper layout */
+.mds-progress-bar {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mds-spacing-xs);
+  /* 120px is intentionally has no token by design just as in Figma. */
+  min-width: 120px;
+  width: 100%;
+}
+
+/* Inline variant: bar on the left, count on the right in one row. */
+.mds-progress-bar.mds-progress-bar--label-inline {
+  flex-direction: row;
+  align-items: center;
+}
+
+/* Track (outer container) */
+.mds-progress-bar-track.progress {
+  /* Re-state Bootstrap progress primitives here so host .progress overrides cannot drift MDS visuals. */
+  /* 0.375rem = 6px from Figma; intentionally has no token by design for consumer flexibility. */
+  display: flex;
+  height: 0.375rem;
+  overflow: hidden;
+  border-radius: var(--mds-border-radius-pill);
+  background-color: var(--mds-bg-feedback-secondary-default);
+  box-shadow: none;
+}
+
+/* In-progress and loading use the primary-subtle track. */
+.mds-progress-bar--in-progress .mds-progress-bar-track,
+.mds-progress-bar--loading .mds-progress-bar-track {
+  background-color: var(--mds-bg-feedback-primary-subtle);
+}
+
+/* Error track. */
+.mds-progress-bar--error .mds-progress-bar-track {
+  background-color: var(--mds-bg-feedback-danger-subtle);
+}
+
+/* Warning track. */
+.mds-progress-bar--warning .mds-progress-bar-track {
+  background-color: var(--mds-bg-feedback-warning-subtle);
+}
+
+/* Completed and empty keep the default secondary track. */
+.mds-progress-bar--completed .mds-progress-bar-track,
+.mds-progress-bar--empty .mds-progress-bar-track {
+  background-color: var(--mds-bg-feedback-secondary-default);
+}
+
+/* Inline variant: track should fill available row space. */
+.mds-progress-bar--label-inline .mds-progress-bar-track {
+  flex: 1 1 0;
+  min-inline-size: var(--mds-spacing-xxl);
+}
+
+/* Fill (inner progress indicator) */
+.mds-progress-bar-fill.progress-bar {
+  /* Keep core progress-bar behavior local so host --bs-progress-* token changes do not leak in. */
+  display: flex;
+  overflow: hidden;
+  background-color: var(--mds-bg-interactive-primary-default);
+  transition: width 0.3s ease;
+}
+
+/* Explicit striped styles avoid dependence on host Bootstrap variables. */
+.mds-progress-bar-fill.progress-bar-striped {
+  background-image: linear-gradient(
+    45deg,
+    rgba(255, 255, 255, 0.15) 25%,
+    transparent 25%,
+    transparent 50%,
+    rgba(255, 255, 255, 0.15) 50%,
+    rgba(255, 255, 255, 0.15) 75%,
+    transparent 75%,
+    transparent
+  );
+  /* Figma loading pattern uses a larger tile than the 6px bar height. */
+  background-size: var(--mds-spacing-md) var(--mds-spacing-md);
+  background-repeat: repeat;
+  background-position-x: 0;
+}
+
+[dir='rtl'] .mds-progress-bar-fill.progress-bar-striped {
+  background-image: linear-gradient(
+    -45deg,
+    rgba(255, 255, 255, 0.15) 25%,
+    transparent 25%,
+    transparent 50%,
+    rgba(255, 255, 255, 0.15) 50%,
+    rgba(255, 255, 255, 0.15) 75%,
+    transparent 75%,
+    transparent
+  );
+}
+
+.mds-progress-bar-fill.progress-bar-animated {
+  animation: mds-progress-bar-stripes 0.8s linear infinite;
+}
+
+[dir='rtl'] .mds-progress-bar-fill.progress-bar-animated {
+  animation-name: mds-progress-bar-stripes-rtl;
+}
+
+@keyframes mds-progress-bar-stripes {
+  0% {
+    background-position-x: var(--mds-spacing-md);
+  }
+}
+
+@keyframes mds-progress-bar-stripes-rtl {
+  0% {
+    background-position-x: calc(var(--mds-spacing-md) * -1);
+  }
+}
+
+/* Error fill. */
+.mds-progress-bar--error .mds-progress-bar-fill {
+  background-color: var(--mds-bg-feedback-danger-default);
+}
+
+/* Warning fill. */
+.mds-progress-bar--warning .mds-progress-bar-fill {
+  background-color: var(--mds-bg-feedback-warning-default);
+}
+
+/* Completed fill. */
+.mds-progress-bar--completed .mds-progress-bar-fill {
+  background-color: var(--mds-bg-feedback-success-default);
+}
+
+/* Empty fill blends with the track. */
+.mds-progress-bar--empty .mds-progress-bar-fill {
+  background-color: var(--mds-bg-feedback-secondary-default);
+}
+
+/* Label container */
+.mds-progress-bar-label {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--mds-spacing-xs);
+  width: 100%;
+
+  /* UI text/small */
+  font-family: var(--mds-font-family-base);
+  font-size: var(--mds-font-size-paragraph-small);
+  line-height: var(--mds-line-height-paragraph-small);
+  letter-spacing: var(--mds-letter-spacing-default);
+  color: var(--mds-text-subtle);
+}
+
+/* Title text */
+.mds-progress-bar-title {
+  font-weight: var(--mds-font-weight-medium);
+  line-height: var(--mds-line-height-paragraph-small);
+  word-break: break-word;
+}
+
+/* In title-and-count layout, title and count share one row and must both be able to shrink. */
+.mds-progress-bar--label-title-and-count .mds-progress-bar-title {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+}
+
+/* Count / percentage text */
+.mds-progress-bar-count {
+  font-weight: var(--mds-font-weight-regular);
+
+  /* Inline count sits outside .mds-progress-bar-label, so it needs explicit text styles. */
+  font-family: var(--mds-font-family-base);
+  font-size: var(--mds-font-size-paragraph-small);
+  line-height: var(--mds-line-height-paragraph-small);
+  letter-spacing: var(--mds-letter-spacing-default);
+  color: var(--mds-text-subtle);
+  white-space: normal;
+  overflow-wrap: anywhere;
+  min-inline-size: 0;
+}
+
+/* In title-and-count layout, count is bounded to prevent hogging the row. */
+.mds-progress-bar--label-title-and-count .mds-progress-bar-count {
+  flex: 0 1 50%;
+  max-inline-size: 50%;
+  text-align: end;
+}
+
+/* In inline layout, count takes only what it needs, leaving space for the track. */
+.mds-progress-bar--label-inline .mds-progress-bar-count {
+  flex: 0 1 auto;
+  max-inline-size: 40%;
+  text-align: start;
+}

package/dist/components/progress-bar/index.d.ts

@@ -0,0 +1 @@
+export * from './ProgressBar';

package/dist/components/progress-bar/index.js

@@ -0,0 +1,2 @@
+import { ProgressBar } from "./ProgressBar.js";
+export { ProgressBar };

package/dist/components/radio/index.css

@@ -0,0 +1,133 @@
+/* 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-xs, 0.75rem);
+  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);
+}
+/* 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);
+}
+.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);
+  line-height: var(--mds-line-height-paragraph-xs, 0.75rem);
+  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;
+}