@reliability-design/web 1.3.1 → 1.4.0

package/dist/components/rel-pagination/rel-pagination.ts

@@ -1,6 +1,5 @@
 import { LitElement, html, css } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
-import "../../styles/vars-v2.css";
 
 @customElement("rel-pagination")
 export class RelPagination extends LitElement {
@@ -28,8 +27,15 @@ export class RelPagination extends LitElement {
 
   static styles = css`
     :host {
-      display: inline-block;
-      font-family: var(--rel-fontFamilies-primary, 'Poppins', sans-serif);
+      /* container-type: inline-size applies INLINE-SIZE CONTAINMENT — the width
+         must resolve without consulting the contents. Combined with a
+         shrink-to-fit box (inline-block) that is contradictory and the host
+         collapses to width:0, which made the whole component invisible.
+         A size container must be block-level (or have a definite width). */
+      container-type: inline-size;
+      color: var(--rel-text-default);
+      display: block;
+      font-family: var(--rel-fonts-font-family, 'Poppins', sans-serif);
     }
 
     :host([type="count-text"]) {
@@ -52,20 +58,20 @@ export class RelPagination extends LitElement {
       display: flex;
       flex-direction: column;
       align-items: center;
-      gap: 16px;
+      gap: var(--rel-spacing-md);
     }
 
     .pag-stack {
       display: inline-flex;
       align-items: center;
-      gap: 12px;
+      gap: var(--rel-spacing-sm);
     }
 
     .pag-count {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      gap: 16px;
+      gap: var(--rel-spacing-xl);
       width: 100%;
     }
 
@@ -80,7 +86,7 @@ export class RelPagination extends LitElement {
     .pag-numbers {
       display: inline-flex;
       align-items: center;
-      gap: 4px;
+      gap: var(--rel-spacing-2xs);
     }
 
     /* ── Prev / Next — circular buttons ──────────────────────── */
@@ -92,22 +98,22 @@ export class RelPagination extends LitElement {
       width: 40px;
       height: 40px;
       padding: 0;
-      border-radius: 1000px;
-      border: 1px solid #e5e5e5;
-      background: #ffffff;
+      border-radius: var(--rel-border-radius-full-rounded);
+      border: 1px solid var(--rel-border-default);
+      background: var(--rel-bg-neutral);
       cursor: pointer;
-      color: #0b0b0b;
+      color: var(--rel-action-neutral-label-icons-ghost);
       box-sizing: border-box;
       transition: background 0.15s ease;
       flex-shrink: 0;
     }
 
     .pag-nav-btn:hover:not(:disabled) {
-      background: #f5f5f5;
+      background: var(--rel-bg-neutral-elevated-1);
     }
 
     .pag-nav-btn:focus-visible {
-      outline: 2px solid var(--rel-color-border-focus, #0059f4);
+      outline: 2px solid var(--rel-border-focus);
       outline-offset: 2px;
     }
 
@@ -129,33 +135,35 @@ export class RelPagination extends LitElement {
       justify-content: center;
       width: 40px;
       height: 40px;
-      padding: 8px;
-      border-radius: 8px;
-      border: 1px solid #e5e5e5;
-      background: #ffffff;
+      padding: var(--rel-spacing-xs);
+      border-radius: var(--rel-border-radius-sm);
+      border: 1px solid var(--rel-border-default);
+      background: var(--rel-bg-neutral);
       cursor: pointer;
-      font-family: inherit;
-      font-size: 14px;
-      font-weight: 500;
-      letter-spacing: -0.3px;
-      color: #0b0b0b;
-      line-height: 22px;
+      color: var(--rel-text-default);
       box-sizing: border-box;
       transition: background 0.15s ease, border-color 0.15s ease;
+      font-family: var(--rel-body-md-medium-font-family);
+      font-weight: var(--rel-body-md-medium-font-weight);
+      font-size: var(--rel-body-md-medium-font-size);
+      line-height: var(--rel-body-md-medium-line-height);
+      letter-spacing: var(--rel-body-md-medium-letter-spacing);
     }
 
     .pag-page-btn:hover {
-      background: #f5f5f5;
+      background: var(--rel-bg-neutral-elevated-1);
     }
 
     .pag-page-btn:focus-visible {
-      outline: 2px solid var(--rel-color-border-focus, #0059f4);
+      outline: 2px solid var(--rel-border-focus);
       outline-offset: 2px;
     }
 
+    /* Figma: current page is an inverse chip */
     .pag-page-btn[aria-current="page"] {
-      background: #e5e5e5;
-      border-color: #0b0b0b;
+      background: var(--rel-bg-neutral-inverse-2);
+      border-color: var(--rel-bg-neutral-inverse-2);
+      color: var(--rel-text-inverse);
     }
 
     /* ── Ellipsis ─────────────────────────────────────────────── */
@@ -166,33 +174,49 @@ export class RelPagination extends LitElement {
       justify-content: center;
       width: 40px;
       height: 40px;
-      font-size: 14px;
-      font-weight: 500;
-      letter-spacing: -0.3px;
-      color: #0b0b0b;
+      color: var(--rel-text-default);
       user-select: none;
+      font-family: var(--rel-body-md-medium-font-family);
+      font-weight: var(--rel-body-md-medium-font-weight);
+      font-size: var(--rel-body-md-medium-font-size);
+      line-height: var(--rel-body-md-medium-line-height);
+      letter-spacing: var(--rel-body-md-medium-letter-spacing);
     }
 
     /* ── Compact: "Page X of Y" ───────────────────────────────── */
 
     .pag-page-text {
-      font-size: 14px;
-      font-weight: 500;
-      letter-spacing: -0.3px;
-      color: #0b0b0b;
-      line-height: 22px;
+      color: var(--rel-text-default);
       white-space: nowrap;
+
+      font-family: var(--rel-body-md-medium-font-family);
+
+      font-weight: var(--rel-body-md-medium-font-weight);
+
+      font-size: var(--rel-body-md-medium-font-size);
+
+      line-height: var(--rel-body-md-medium-line-height);
+
+      letter-spacing: var(--rel-body-md-medium-letter-spacing);
+
     }
 
     /* ── Count-text: "1-5 of 50" ─────────────────────────────── */
 
     .pag-count-text {
-      font-size: 14px;
-      font-weight: 500;
-      letter-spacing: -0.3px;
-      color: #0b0b0b;
-      line-height: 22px;
+      color: var(--rel-text-default);
       white-space: nowrap;
+
+      font-family: var(--rel-body-md-medium-font-family);
+
+      font-weight: var(--rel-body-md-medium-font-weight);
+
+      font-size: var(--rel-body-md-medium-font-size);
+
+      line-height: var(--rel-body-md-medium-line-height);
+
+      letter-spacing: var(--rel-body-md-medium-letter-spacing);
+
     }
 
     /* ── Count-text: inline current page number ───────────────── */
@@ -203,70 +227,92 @@ export class RelPagination extends LitElement {
       justify-content: center;
       width: 24px;
       height: 40px;
-      font-size: 14px;
-      font-weight: 500;
-      letter-spacing: -0.3px;
-      color: #0b0b0b;
-      line-height: 22px;
+      color: var(--rel-text-default);
+      font-family: var(--rel-body-md-medium-font-family);
+      font-weight: var(--rel-body-md-medium-font-weight);
+      font-size: var(--rel-body-md-medium-font-size);
+      line-height: var(--rel-body-md-medium-line-height);
+      letter-spacing: var(--rel-body-md-medium-letter-spacing);
     }
 
     /* ── Extended sub-label ───────────────────────────────────── */
 
     .pag-label {
-      font-size: 14px;
-      font-weight: 400;
-      letter-spacing: -0.3px;
-      color: #7d7d7d;
-      line-height: 22px;
+      color: var(--rel-text-caption);
       text-align: center;
-    }
 
-    /* ── Dark mode ───────────────────────────────────────────── */
+      font-family: var(--rel-body-md-regular-font-family);
 
-    :host-context([data-theme="dark"]) .pag-nav-btn,
-    [data-theme="dark"] .pag-nav-btn {
-      background: #1a1a1a;
-      border-color: #333333;
-      color: #f5f5f5;
-    }
+      font-weight: var(--rel-body-md-regular-font-weight);
+
+      font-size: var(--rel-body-md-regular-font-size);
+
+      line-height: var(--rel-body-md-regular-line-height);
+
+      letter-spacing: var(--rel-body-md-regular-letter-spacing);
 
-    :host-context([data-theme="dark"]) .pag-nav-btn:hover:not(:disabled),
-    [data-theme="dark"] .pag-nav-btn:hover:not(:disabled) {
-      background: #2b2b2b;
+    }
+    /* ── Task 4: responsive behaviour (conventions §4) ───────────────── */
+    .auto-compact {
+      display: none;
     }
 
-    :host-context([data-theme="dark"]) .pag-page-btn,
-    [data-theme="dark"] .pag-page-btn {
-      background: #1a1a1a;
-      border-color: #333333;
-      color: #f5f5f5;
+    .pag-numbers {
+      flex-wrap: wrap;
+      justify-content: center;
     }
 
-    :host-context([data-theme="dark"]) .pag-page-btn:hover,
-    [data-theme="dark"] .pag-page-btn:hover {
-      background: #2b2b2b;
+    @container (max-width: 768px) {
+      .pag-page-btn {
+        width: auto;
+        min-width: 36px;
+      }
     }
 
-    :host-context([data-theme="dark"]) .pag-page-btn[aria-current="page"],
-    [data-theme="dark"] .pag-page-btn[aria-current="page"] {
-      background: #333333;
-      border-color: #f5f5f5;
+    /* 480–768px: shrink the number window to current ±1 plus first/last */
+    @container (min-width: 480px) and (max-width: 768px) {
+      .pag-page-btn:not(.near):not(.edge):not([aria-current="page"]),
+      .pag-ellipsis {
+        display: none;
+      }
     }
 
-    :host-context([data-theme="dark"]) .pag-ellipsis,
-    :host-context([data-theme="dark"]) .pag-page-text,
-    :host-context([data-theme="dark"]) .pag-count-text,
-    :host-context([data-theme="dark"]) .pag-current-num,
-    [data-theme="dark"] .pag-ellipsis,
-    [data-theme="dark"] .pag-page-text,
-    [data-theme="dark"] .pag-count-text,
-    [data-theme="dark"] .pag-current-num {
-      color: #f5f5f5;
+    /* <480px: swap to the compact layout automatically */
+    @container (max-width: 479px) {
+      .auto-extended {
+        display: none;
+      }
+
+      .auto-compact {
+        display: block;
+      }
     }
 
-    :host-context([data-theme="dark"]) .pag-label,
-    [data-theme="dark"] .pag-label {
-      color: #a3a3a3;
+    /* Fallback for browsers without container queries */
+    @supports not (container-type: inline-size) {
+      @media (max-width: 768px) {
+        .pag-page-btn {
+          width: auto;
+          min-width: 36px;
+        }
+      }
+
+      @media (min-width: 480px) and (max-width: 768px) {
+        .pag-page-btn:not(.near):not(.edge):not([aria-current="page"]),
+        .pag-ellipsis {
+          display: none;
+        }
+      }
+
+      @media (max-width: 479px) {
+        .auto-extended {
+          display: none;
+        }
+
+        .auto-compact {
+          display: block;
+        }
+      }
     }
   `;
 
@@ -377,7 +423,7 @@ export class RelPagination extends LitElement {
     const total = this.computedTotalPages;
 
     return html`
-      <div class="pag-root" role="navigation" aria-label="${this.ariaLabel}">
+      <div part="base" class="pag-root" role="navigation" aria-label="${this.ariaLabel}">
         <div class="pag-stack">
           ${this.renderNavBtn("prev")}
           <div class="pag-numbers">
@@ -386,7 +432,7 @@ export class RelPagination extends LitElement {
                 ? html`<span class="pag-ellipsis">...</span>`
                 : html`<button
                     type="button"
-                    class="pag-page-btn"
+                    class="pag-page-btn ${Math.abs(p - current) <= 1 ? "near" : ""} ${p === 1 || p === total ? "edge" : ""}"
                     aria-label="Page ${p}"
                     aria-current="${p === current ? "page" : "false"}"
                     @click="${() => this.handlePageChange(p)}"
@@ -423,7 +469,7 @@ export class RelPagination extends LitElement {
     const end = Math.min(current * this.perPage, effectiveTotalItems);
 
     return html`
-      <div class="pag-count" role="navigation" aria-label="${this.ariaLabel}">
+      <div part="label" class="pag-count" role="navigation" aria-label="${this.ariaLabel}">
         <span class="pag-count-text">${start}–${end} of ${effectiveTotalItems}</span>
         <div class="pag-count-nav">
           ${this.renderNavBtn("prev")}
@@ -437,6 +483,11 @@ export class RelPagination extends LitElement {
   render() {
     if (this.type === "compact") return this.renderCompact();
     if (this.type === "count-text") return this.renderCountText();
-    return this.renderExtended();
+    /* Task 4: extended auto-switches to the compact layout under 480px
+       (container query, media-query fallback) — same markup, CSS-toggled. */
+    return html`
+      <div class="auto-extended">${this.renderExtended()}</div>
+      <div class="auto-compact">${this.renderCompact()}</div>
+    `;
   }
 }

package/dist/components/rel-popover/README.md

@@ -372,25 +372,25 @@ The component implements WCAG accessibility guidelines:
 The component uses design tokens from the Reliability Design System:
 
 ### Colors (rel-popover-content)
-- `--rel-colors-white` - Content background
-- `--rel-colors-gray-border` - Border color
-- `--rel-colors-gray-heading` - Text color
-- `--rel-colors-gray-placeholder` - Paragraph text color
+- `--rel-bg-surface` - Content background
+- `--rel-border-default` - Border color
+- `--rel-text-label` - Text color
+- `--rel-text-placeholder` - Paragraph text color
 
 ### Typography
-- `--rel-fontFamilies-primary` - Font family (Poppins)
-- `--rel-fontWeights-semibold` - Heading weight
-- `--rel-fontSizes-sm` - Base text size
-- `--rel-lineHeights-md` - Paragraph line height
+- `--rel-fonts-font-family` - Font family (Poppins)
+- `--rel-fonts-weight-body-semibold` - Heading weight
+- `--rel-body-sm-regular-font-size` - Base text size
+- `--rel-body-md-regular-line-height` - Paragraph line height
 
 ### Spacing
-- `--rel-spacing-space-md` (16px) - Content padding
-- `--rel-spacing-space-xs` (8px) - Heading bottom margin
-- `--rel-spacing-space-sm` (12px) - Paragraph bottom margin
+- `--rel-spacing-md` (16px) - Content padding
+- `--rel-spacing-xs` (8px) - Heading bottom margin
+- `--rel-spacing-sm` (12px) - Paragraph bottom margin
 
 ### Borders & Effects
-- `--rel-borders-width-stroke-100` (1px) - Border width
-- `--rel-borders-radius-border-radius-200` (8px) - Border radius
+- `--rel-stroke-sm` (1px) - Border width
+- `--rel-border-radius-sm` (8px) - Border radius
 - `--rel-shadows-shadow-300` - Drop shadow
 
 ### Z-Index

package/dist/components/rel-popover/rel-popover-content.ts

@@ -1,27 +1,47 @@
 import { LitElement, html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import "../../styles/vars-v2.css";
 
 @customElement("rel-popover-content")
 export class RelPopoverContent extends LitElement {
   @property({ type: String, attribute: "aria-label" }) ariaLabel = "";
 
+  /** Figma Size axis (S/M/L): panel padding 12/16/20px. */
+  @property({ type: String, reflect: true }) size: "sm" | "md" | "lg" = "md";
+
   static styles = css`
     :host {
+      gap: var(--rel-spacing-md);
+      color: var(--rel-text-body);
       display: block;
       width: 100%;
       max-width: 400px;
     }
 
     .popover-content {
-      background: var(--rel-color-bg-primary);
-      border: var(--rel-borders-width-stroke-100) solid var(--rel-color-border-default);
-      border-radius: var(--rel-borders-radius-border-radius-200);
+      background: var(--rel-bg-neutral);
+      border: var(--rel-stroke-sm) solid var(--rel-border-default);
+      border-radius: var(--rel-border-radius-sm);
       box-shadow: var(--rel-shadows-shadow-300);
-      padding: var(--rel-spacing-space-md);
-      font-family: var(--rel-fontFamilies-primary);
-      font-size: var(--rel-fontSizes-sm);
-      color: var(--rel-color-text-heading);
+      padding: var(--rel-spacing-lg);
+      color: var(--rel-text-label);
+      font-family: var(--rel-body-md-regular-font-family);
+      font-weight: var(--rel-body-md-regular-font-weight);
+      font-size: var(--rel-body-md-regular-font-size);
+      line-height: var(--rel-body-md-regular-line-height);
+      letter-spacing: var(--rel-body-md-regular-letter-spacing);
+    }
+
+    /* Figma Size axis: S = 12px padding, M = 16px, L = 20px */
+    :host([size="sm"]) .popover-content {
+      padding: var(--rel-spacing-sm);
+    }
+
+    :host([size="md"]) .popover-content {
+      padding: var(--rel-spacing-md);
+    }
+
+    :host([size="lg"]) .popover-content {
+      padding: var(--rel-spacing-lg);
     }
 
     .popover-content ::slotted(h1),
@@ -30,15 +50,20 @@ export class RelPopoverContent extends LitElement {
     .popover-content ::slotted(h4),
     .popover-content ::slotted(h5),
     .popover-content ::slotted(h6) {
-      margin: 0 0 var(--rel-spacing-space-xs);
-      font-weight: var(--rel-fontWeights-semibold);
-      color: var(--rel-color-text-heading);
+      margin: 0 0 var(--rel-spacing-xs);
+      font-family: var(--rel-headings-sm-font-family);
+      font-weight: var(--rel-headings-sm-font-weight);
+      font-size: var(--rel-headings-sm-font-size);
+      line-height: var(--rel-headings-sm-line-height);
+      letter-spacing: var(--rel-headings-sm-letter-spacing);
+      color: var(--rel-text-label);
+      margin-bottom: var(--rel-spacing-2xs);
     }
 
     .popover-content ::slotted(p) {
-      margin: 0 0 var(--rel-spacing-space-sm);
-      color: var(--rel-color-text-placeholder);
-      line-height: var(--rel-lineHeights-md);
+      margin: 0 0 var(--rel-spacing-sm);
+      color: var(--rel-text-placeholder);
+      line-height: var(--rel-body-md-regular-line-height);
     }
 
     .popover-content ::slotted(p:last-child) {

package/dist/components/rel-popover/rel-popover.ts

@@ -1,6 +1,5 @@
 import { LitElement, html, css } from "lit";
 import { customElement, property, state, query } from "lit/decorators.js";
-import "../../styles/vars-v2.css";
 
 type SideType = "top" | "right" | "bottom" | "left";
 type AlignType = "start" | "center" | "end";
@@ -15,8 +14,8 @@ export class RelPopover extends LitElement {
   @property({ type: Boolean, attribute: "defaultopen" }) defaultOpen = false;
   @property({ type: Boolean, reflect: true }) disabled = false;
 
-  @property({ type: String }) side: SideType = "bottom";
-  @property({ type: String }) align: AlignType = "center";
+  @property({ type: String, reflect: true }) side: SideType = "bottom";
+  @property({ type: String, reflect: true }) align: AlignType = "center";
   @property({ type: Number, attribute: "sideoffset" }) sideOffset = 8;
   @property({ type: Number, attribute: "alignoffset" }) alignOffset = 0;
 
@@ -44,6 +43,7 @@ export class RelPopover extends LitElement {
 
   static styles = css`
     :host {
+      color: var(--rel-text-default);
       display: inline-block;
       position: relative;
     }
@@ -281,20 +281,31 @@ export class RelPopover extends LitElement {
     let top = 0;
     let left = 0;
 
+    // Alignment along the cross axis. Previously every branch hardcoded the
+    // centre calculation, so `align` and `alignOffset` were dead code —
+    // "center" worked by accident and "start"/"end" did nothing.
+    const alignAxis = (start: number, size: number, contentSize: number) => {
+      switch (this.align) {
+        case "start": return start;
+        case "end": return start + size - contentSize;
+        default: return start + size / 2 - contentSize / 2; // center
+      }
+    };
+
     if (this.side === "top") {
       top = t.top - c.height - this.sideOffset;
-      left = t.left + t.width / 2 - c.width / 2;
+      left = alignAxis(t.left, t.width, c.width) + this.alignOffset;
     }
     if (this.side === "bottom") {
       top = t.bottom + this.sideOffset;
-      left = t.left + t.width / 2 - c.width / 2;
+      left = alignAxis(t.left, t.width, c.width) + this.alignOffset;
     }
     if (this.side === "left") {
-      top = t.top + t.height / 2 - c.height / 2;
+      top = alignAxis(t.top, t.height, c.height) + this.alignOffset;
       left = t.left - c.width - this.sideOffset;
     }
     if (this.side === "right") {
-      top = t.top + t.height / 2 - c.height / 2;
+      top = alignAxis(t.top, t.height, c.height) + this.alignOffset;
       left = t.right + this.sideOffset;
     }
 

package/dist/components/rel-progress/README.md

@@ -51,14 +51,14 @@ None exposed.
 ## Tokens / CSS Variables
 
 ### Semantic Tokens
-- `--rel-fontFamilies-primary` - Font family
+- `--rel-fonts-font-family` - Font family
 
 ### Color Tokens
-- `--rel-colors-gray-border` - Track/background color
-- `--rel-colors-black` - Active progress bar color
+- `--rel-border-default` - Track/background color
+- `--rel-text-default` - Active progress bar color
 
 ### Border Tokens
-- `--rel-borders-radius-border-radius-200` - Linear track border radius
+- `--rel-border-radius-sm` - Linear track border radius
 
 ## Accessibility
 - Determinate modes use `role="progressbar"` with `aria-valuenow`, `aria-valuemin="0"`, `aria-valuemax="100"`
@@ -76,7 +76,7 @@ None exposed.
   - Height: `6px`
   - Track uses gray border color
   - Bar uses black color
-  - Border radius: `--rel-borders-radius-border-radius-200`
+  - Border radius: `--rel-border-radius-sm`
   - **Determinate**: bar width transitions smoothly (0.3s ease)
   - **Indeterminate**: 30% width bar slides left-to-right (1.5s infinite loop)
 

package/dist/components/rel-progress/rel-progress.ts

@@ -1,6 +1,5 @@
 import { LitElement, html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import "../../styles/vars-v2.css";
 
 export type ProgressMode =
   | "linear-determinate"
@@ -21,8 +20,9 @@ export class RelProgress extends LitElement {
 
   static styles = css`
     :host {
+      color: var(--rel-text-default);
       display: block;
-      font-family: var(--rel-fontFamilies-primary);
+      font-family: var(--rel-fonts-font-family);
     }
 
     :host([mode*="circular"]) {
@@ -31,16 +31,20 @@ export class RelProgress extends LitElement {
 
     /* Linear */
     .linear-track {
-      background: var(--rel-color-border-default);
-      border-radius: var(--rel-borders-radius-border-radius-0);
+      background: var(--rel-bg-neutral-elevated-2);
+      border-radius: var(--rel-border-radius-square);
       height: 6px;
       overflow: hidden;
       width: 100%;
     }
 
     .linear-bar {
-      background: var(--rel-color-text-primary);
+      background: var(--rel-bg-neutral-inverse-1);
       height: 100%;
+    }
+
+    /* Width animates only when value-driven (Figma Type=Determinate) */
+    .linear-bar.determinate {
       transition: width 0.3s ease;
     }
 
@@ -76,13 +80,13 @@ export class RelProgress extends LitElement {
 
     .circular-bg {
       fill: none;
-      stroke: var(--rel-color-border-default);
+      stroke: var(--rel-border-default);
       stroke-width: 3;
     }
 
     .circular-progress {
       fill: none;
-      stroke: var(--rel-color-text-primary);
+      stroke: var(--rel-text-default);
       stroke-width: 3;
       stroke-linecap: butt;
       transition: stroke-dashoffset 0.35s;
@@ -94,7 +98,7 @@ export class RelProgress extends LitElement {
     }
 
     .spinner-path {
-      stroke: var(--rel-color-text-primary);
+      stroke: var(--rel-text-default);
       stroke-linecap: butt;
       animation: dash 1.5s ease-in-out infinite;
     }
@@ -153,17 +157,17 @@ export class RelProgress extends LitElement {
 
   private renderLinearDeterminate() {
     return html`
-      <div class="linear-track" role="progressbar"
+      <div part="track" class="linear-track" role="progressbar"
         aria-valuenow="${this.safeValue}" aria-valuemin="0" aria-valuemax="100">
-        <div class="linear-bar" style="width: ${this.safeValue}%"></div>
+        <div part="indicator" class="linear-bar determinate" style="width: ${this.safeValue}%"></div>
       </div>
     `;
   }
 
   private renderLinearIndeterminate() {
     return html`
-      <div class="linear-track" role="progressbar">
-        <div class="linear-bar indeterminate"></div>
+      <div part="track" class="linear-track" role="progressbar">
+        <div part="indicator" class="linear-bar indeterminate"></div>
       </div>
     `;
   }