@skagerakenergi/design 0.5.1 → 0.6.1

package/INSTRUCTIONS.md

@@ -122,7 +122,10 @@ Interactive states use native HTML attributes and ARIA:
 **Variants:** `--filled`, `--tonal`, `--elevated`, `--outlined`, `--text`
 **M3 Expressive sizes:** `--xs` (32px), default (40px), `--md` (56px), `--lg` (96px), `--xl` (136px)
 **Shape:** `--square` (rounded rectangle instead of pill)
-**Toggle:** Add `aria-pressed="true"` or `aria-pressed="false"`
+**Toggle:** Add `aria-pressed="true"` or `aria-pressed="false"` — adds `se-button--selected` state automatically
+**Usage:** variant by emphasis — Filled (high) → Tonal (medium) → Outlined/Text (low). Labels 1–3 words, sentence case; never truncate or wrap. Max 3 buttons in one arrangement.
+**Placement:** primary action (filled) at trailing edge; secondary (outlined/text) at leading edge. Used in dialogs, forms, cards, toolbars.
+**Touch target:** 48 × 48 CSS px minimum; ensure container–background contrast ≥ 3:1.
 
 ```html
 <!-- Filled button -->
@@ -137,7 +140,13 @@ Interactive states use native HTML attributes and ARIA:
 <!-- Large square tonal button -->
 <button class="se-button se-button--tonal se-button--lg se-button--square">Large</button>
 
-<!-- Toggle button -->
+<!-- Toggle button (selected) -->
+<button class="se-button se-button--filled se-button--selected" aria-pressed="true">
+  <span class="se-button__icon material-symbols-outlined" aria-hidden="true">favorite</span>
+  Favorite
+</button>
+
+<!-- Toggle button (unselected) -->
 <button class="se-button se-button--filled" aria-pressed="false">
   <span class="se-button__icon material-symbols-outlined" aria-hidden="true">favorite</span>
   Favorite
@@ -158,6 +167,9 @@ Interactive states use native HTML attributes and ARIA:
 **Shape:** `--square`
 **Width:** `--narrow`, default, `--wide`
 **Toggle:** `aria-pressed="true"` / `"false"`
+**Usage:** default for openers (menus, search); toggle for binary actions (favorite, bookmark). Group related icon buttons in toolbars.
+**Toggle behavior:** outlined = unselected, filled = selected. Two visual cues required (not just color) — e.g. fill + weight.
+**Touch target:** 48 × 48 CSS px minimum even when nested inside smaller containers. Tooltip on hover required on web.
 
 ```html
 <!-- Standard icon button -->
@@ -185,6 +197,9 @@ Interactive states use native HTML attributes and ARIA:
 **Sizes:** default (56px), `--medium` (80px), `--large` (96px)
 **Container colors:** `--secondary`, `--tertiary` (default is primary container)
 **Tone colors:** `--primary-tone`, `--secondary-tone`, `--tertiary-tone`
+**Usage:** most important action on screen; one FAB per screen. Constructive actions only: create, favorite, share, start. Hide if unavailable — never disable.
+**Placement:** compact/medium: lower-right corner. Expanded: upper-left (within navigation rail). Scale size with viewport. Tooltip on focus required on web.
+**Contrast:** icon must have ≥ 3:1 contrast against container. Prioritize in focus order.
 
 ```html
 <button class="se-fab" aria-label="Add">
@@ -211,6 +226,9 @@ Interactive states use native HTML attributes and ARIA:
 **Sizes:** default (56px), `--medium` (80px), `--large` (96px)
 **Container colors:** `--secondary`, `--tertiary` (default is primary container)
 **Tone colors:** `--primary-tone`, `--secondary-tone`, `--tertiary-tone`
+**Usage:** use on long, scrolling views needing persistent access to a primary action. Label 1–2 words; icon optional but label required. One per screen.
+**Placement:** compact/medium: bottom of screen, center or trailing edge. Expanded: bottom-right or within navigation rail. Don't place in cards, dialogs, or upper half of mobile screens.
+**Behavior:** collapses to FAB on scroll down; re-expands on scroll up.
 
 ```html
 <button class="se-extended-fab">
@@ -259,8 +277,10 @@ Interactive states use native HTML attributes and ARIA:
 
 **Variants:** `--filled`, `--tonal`, `--elevated`, `--outlined`
 **M3 Expressive sizes:** `--xs`, default, `--md`, `--lg`, `--xl`
+**Optional:** `se-split-button__icon` (leading icon in action button)
 
 ```html
+<!-- Split button without icon -->
 <div class="se-split-button se-split-button--filled">
   <button class="se-split-button__action">
     <span class="se-split-button__label">Save</span>
@@ -269,6 +289,17 @@ Interactive states use native HTML attributes and ARIA:
     <span class="se-split-button__menu-icon" aria-hidden="true"><span class="material-symbols-outlined">arrow_drop_down</span></span>
   </button>
 </div>
+
+<!-- Split button with leading icon -->
+<div class="se-split-button se-split-button--tonal">
+  <button class="se-split-button__action">
+    <span class="se-split-button__icon material-symbols-outlined" aria-hidden="true">save</span>
+    <span class="se-split-button__label">Save</span>
+  </button>
+  <button class="se-split-button__trigger" aria-label="More save options" aria-haspopup="true" aria-expanded="false">
+    <span class="se-split-button__menu-icon" aria-hidden="true"><span class="material-symbols-outlined">arrow_drop_down</span></span>
+  </button>
+</div>
 ```
 
 ### Card
@@ -279,6 +310,10 @@ Interactive states use native HTML attributes and ARIA:
 
 **Variants:** `--elevated`, `--filled`, `--outlined`
 **Interactive:** Add `--interactive` + `tabindex="0"` + `role="button"`
+**Drag state:** `--dragged` (applied during drag operations on interactive cards)
+**Usage:** display content and actions on a single topic; cards are scan-friendly entry points. Don't force content into cards when dividers or spacing suffice.
+**Actionability:** non-actionable (holds buttons/links) or directly actionable (whole card clickable) — never both. Directly actionable cards use `role="button"` or `<a>`.
+**Adaptive:** compact — consider swapping cards for lists. Expanded — use multi-column grids. Drag interactions require a single-pointer alternative.
 
 ```html
 <!-- Elevated card -->
@@ -299,6 +334,10 @@ Interactive states use native HTML attributes and ARIA:
 @import '@skagerakenergi/design/checkbox.css';
 ```
 
+**Usage:** select one or more options from a list. Use checkboxes for grouped options; radio for single-select; switches for standalone toggles. Parent checkbox is indeterminate when some children are checked.
+**Placement:** click the icon **or** the text label to toggle.
+**Touch target:** 48 × 48 CSS px minimum; don't apply density by default.
+
 ```html
 <label class="se-checkbox">
   <input class="se-checkbox__input" type="checkbox">
@@ -320,7 +359,13 @@ Interactive states use native HTML attributes and ARIA:
 @import '@skagerakenergi/design/switch.css';
 ```
 
+**Icons:** Add `--icons` modifier + `se-switch__icon` inside the handle
+**Usage:** binary on/off settings with immediate effect. Don't use for opposing options (use connected button group) or grouped save-and-submit options (use checkboxes). Icons optional.
+**Labels:** short and direct; describe what happens when ON. Never embed label text in the switch.
+**Touch target:** 48 × 48 CSS px minimum; don't apply density by default.
+
 ```html
+<!-- Basic switch -->
 <label class="se-switch">
   <input class="se-switch__input" type="checkbox" role="switch">
   <span class="se-switch__track" aria-hidden="true">
@@ -328,6 +373,17 @@ Interactive states use native HTML attributes and ARIA:
   </span>
   <span class="se-switch__label">Dark mode</span>
 </label>
+
+<!-- Switch with icons -->
+<label class="se-switch se-switch--icons">
+  <input class="se-switch__input" type="checkbox" role="switch">
+  <span class="se-switch__track" aria-hidden="true">
+    <span class="se-switch__handle">
+      <span class="se-switch__icon" aria-hidden="true"><span class="material-symbols-outlined">close</span></span>
+    </span>
+  </span>
+  <span class="se-switch__label">Notifications</span>
+</label>
 ```
 
 ### Radio
@@ -336,20 +392,24 @@ Interactive states use native HTML attributes and ARIA:
 @import '@skagerakenergi/design/radio.css';
 ```
 
+**Usage:** single-select from ≤ 5 options; one must always be pre-selected. Use dropdown for more options. Click icon or label to select. Provide “Not applicable” if deselection needed.
+**Placement:** stack vertically; avoid horizontal lists.
+**Touch target:** 48 × 48 CSS px minimum. Arrow keys navigate and select within the group.
+
 ```html
-<fieldset>
-  <legend>Choose option</legend>
+<div class="se-radio-group" role="radiogroup" aria-labelledby="options-label">
+  <span id="options-label" class="se-radio-group__label">Choose option</span>
   <label class="se-radio">
     <input class="se-radio__input" type="radio" name="option" value="a" checked>
-    <span class="se-radio__indicator" aria-hidden="true"></span>
+    <span class="se-radio__indicator"></span>
     <span class="se-radio__label">Option A</span>
   </label>
   <label class="se-radio">
     <input class="se-radio__input" type="radio" name="option" value="b">
-    <span class="se-radio__indicator" aria-hidden="true"></span>
+    <span class="se-radio__indicator"></span>
     <span class="se-radio__label">Option B</span>
   </label>
-</fieldset>
+</div>
 ```
 
 ### Chips
@@ -359,6 +419,9 @@ Interactive states use native HTML attributes and ARIA:
 ```
 
 **Types:** `--assist`, `--filter`, `--input`, `--suggestion`
+**Usage:** enter information, make selections, filter content, or trigger actions. Always display as a group — never a single chip. Labels ≤ 20 characters, skip articles. Variant choice: Assist (verbs) | Filter (nouns) | Input (user data) | Suggestion (dynamic phrases).
+**Placement:** inline as a row; 8 dp spacing between chips. Wrap to a new row; use horizontal scroll if ≥ 3 rows. Filter chip trailing icon: medium/expanded windows only.
+**Touch target:** 48 × 48 CSS px minimum. Label contrast ≥ 3:1 against background.
 
 ```html
 <!-- Filter chip set -->
@@ -387,6 +450,12 @@ Interactive states use native HTML attributes and ARIA:
 ```
 
 **Variants:** `--filled` (default), `--outlined`
+**States:** `--populated` (when input has a value), `--error`, `--disabled`
+**Optional elements:** `se-text-field__leading` (leading icon), `se-text-field__trailing` (trailing action button)
+**Filled only:** `se-text-field__indicator` (active indicator line)
+**Usage:** for text input (contact info, search, etc.). Don't intermix filled and outlined in the same region. Error icon strongly recommended; asterisk (*) for required fields.
+**Adaptive:** compact — full width. Medium/expanded — bound by margins; avoid edge-to-edge stretching.
+**Touch target:** 48 × 48 CSS px minimum. Outlined fields need ≥ 3:1 outline–background contrast.
 
 ```html
 <!-- Filled text field -->
@@ -398,6 +467,17 @@ Interactive states use native HTML attributes and ARIA:
   </div>
 </div>
 
+<!-- Filled text field with leading and trailing icons -->
+<div class="se-text-field se-text-field--filled se-text-field--populated">
+  <div class="se-text-field__container">
+    <span class="se-text-field__leading" aria-hidden="true"><span class="material-symbols-outlined">search</span></span>
+    <label class="se-text-field__label" for="search">Search</label>
+    <input class="se-text-field__input" id="search" type="text" value="query">
+    <button class="se-text-field__trailing" type="button" aria-label="Clear"><span class="material-symbols-outlined">close</span></button>
+    <span class="se-text-field__indicator" aria-hidden="true"></span>
+  </div>
+</div>
+
 <!-- Outlined text field with supporting text -->
 <div class="se-text-field se-text-field--outlined">
   <div class="se-text-field__container">
@@ -412,6 +492,7 @@ Interactive states use native HTML attributes and ARIA:
   <div class="se-text-field__container">
     <label class="se-text-field__label" for="username">Username</label>
     <input class="se-text-field__input" id="username" type="text" aria-invalid="true" aria-describedby="username-error">
+    <button class="se-text-field__trailing" type="button" aria-label="Error"><span class="material-symbols-outlined">error</span></button>
   </div>
   <div class="se-text-field__supporting" id="username-error" role="alert">Username is already taken</div>
 </div>
@@ -424,8 +505,13 @@ Interactive states use native HTML attributes and ARIA:
 ```
 
 **Variants:** `--primary`, `--secondary`
+**Optional:** `se-tabs__icon` (icon above label, primary variant only; auto-fills on active)
+**Usage:** group related content at the same hierarchy level — not sequential content. Primary tabs under app bar; secondary below primary. Icons should be globally recognized. Max 4 fixed tabs; use scrollable for more.
+**Placement:** full-width container. Scrollable tabs offset 52 dp from leading edge. Don't scroll tabs behind an app bar.
+**Touch target:** 48 × 48 CSS px minimum. Arrow keys navigate between tabs; Space/Enter activates.
 
 ```html
+<!-- Primary tabs (text only) -->
 <div class="se-tabs se-tabs--primary" role="tablist" aria-label="Content sections">
   <button class="se-tabs__tab se-tabs__tab--active" role="tab" aria-selected="true">
     <span class="se-tabs__label">Tab 1</span>
@@ -441,6 +527,21 @@ Interactive states use native HTML attributes and ARIA:
   </button>
   <span class="se-tabs__divider" aria-hidden="true"></span>
 </div>
+
+<!-- Primary tabs with icons -->
+<div class="se-tabs se-tabs--primary" role="tablist" aria-label="Travel">
+  <button class="se-tabs__tab se-tabs__tab--active" role="tab" aria-selected="true">
+    <span class="se-tabs__icon material-symbols-outlined" aria-hidden="true">flight</span>
+    <span class="se-tabs__label">Flights</span>
+    <span class="se-tabs__indicator" aria-hidden="true"></span>
+  </button>
+  <button class="se-tabs__tab" role="tab" aria-selected="false" tabindex="-1">
+    <span class="se-tabs__icon material-symbols-outlined" aria-hidden="true">explore</span>
+    <span class="se-tabs__label">Explore</span>
+    <span class="se-tabs__indicator" aria-hidden="true"></span>
+  </button>
+  <span class="se-tabs__divider" aria-hidden="true"></span>
+</div>
 ```
 
 ### App Bar
@@ -495,8 +596,10 @@ Interactive states use native HTML attributes and ARIA:
 ```
 
 **Variants:** default (collapsed), `--expanded` (replaces former Navigation Drawer), `--modal`
+**Optional slots:** `se-nav-rail__menu` (icon button), `se-nav-rail__fab` (FAB container), `se-nav-rail__section` + `se-nav-rail__section-header` (grouped items in expanded mode)
 
 ```html
+<!-- Collapsed navigation rail -->
 <nav class="se-nav-rail" aria-label="Main navigation">
   <div class="se-nav-rail__items">
     <a class="se-nav-rail__item se-nav-rail__item--active" href="#home" aria-current="page">
@@ -511,6 +614,34 @@ Interactive states use native HTML attributes and ARIA:
     </a>
   </div>
 </nav>
+
+<!-- Expanded navigation rail with menu, FAB, and sections -->
+<nav class="se-nav-rail se-nav-rail--expanded" aria-label="Main navigation">
+  <button class="se-icon-button se-nav-rail__menu" aria-label="Close menu" aria-expanded="true">
+    <span class="se-icon-button__icon material-symbols-outlined" aria-hidden="true">menu</span>
+  </button>
+  <div class="se-nav-rail__fab">
+    <button class="se-extended-fab" aria-label="Compose">
+      <span class="se-extended-fab__icon material-symbols-outlined" aria-hidden="true">edit</span>
+      <span class="se-extended-fab__label">Compose</span>
+    </button>
+  </div>
+  <div class="se-nav-rail__items">
+    <a class="se-nav-rail__item se-nav-rail__item--active" href="#home" aria-current="page">
+      <span class="se-nav-rail__indicator" aria-hidden="true"></span>
+      <span class="se-nav-rail__icon material-symbols-outlined" aria-hidden="true">home</span>
+      <span class="se-nav-rail__label">Home</span>
+    </a>
+    <div class="se-nav-rail__section">
+      <span class="se-nav-rail__section-header">Settings</span>
+      <a class="se-nav-rail__item" href="#preferences">
+        <span class="se-nav-rail__indicator" aria-hidden="true"></span>
+        <span class="se-nav-rail__icon material-symbols-outlined" aria-hidden="true">tune</span>
+        <span class="se-nav-rail__label">Preferences</span>
+      </a>
+    </div>
+  </div>
+</nav>
 ```
 
 ### Toolbar
@@ -521,8 +652,10 @@ Interactive states use native HTML attributes and ARIA:
 
 **Variants:** `--docked` (replaces former Bottom App Bar), `--floating`, `--floating-vertical`
 **Style:** `--vibrant` (primary-container background)
+**Optional slot:** `se-toolbar__fab` (FAB container, used in docked variant)
 
 ```html
+<!-- Docked toolbar with FAB -->
 <footer class="se-toolbar se-toolbar--docked" role="toolbar" aria-label="Actions">
   <div class="se-toolbar__actions">
     <button class="se-icon-button" aria-label="Edit">
@@ -532,6 +665,11 @@ Interactive states use native HTML attributes and ARIA:
       <span class="se-icon-button__icon material-symbols-outlined" aria-hidden="true">share</span>
     </button>
   </div>
+  <div class="se-toolbar__fab">
+    <button class="se-fab" aria-label="Add">
+      <span class="se-fab__icon material-symbols-outlined" aria-hidden="true">add</span>
+    </button>
+  </div>
 </footer>
 ```
 
@@ -541,6 +679,10 @@ Interactive states use native HTML attributes and ARIA:
 @import '@skagerakenergi/design/badge.css';
 ```
 
+**Usage:** indicate notifications, counts, or status on navigation destinations. Small = unread dot; large = text (max 4 chars). Hide once the destination is viewed.
+**Placement:** anchored inside icon bounding box. Adjust for RTL. Use small in tight spaces (app bars); large when space allows (navigation rail).
+**Contrast:** badge container and label ≥ 3:1 contrast. Small badges use `aria-hidden="true"`; large badges use `aria-label`.
+
 ```html
 <!-- Small dot badge (no count) -->
 <span style="position: relative; display: inline-flex;">
@@ -565,7 +707,13 @@ Interactive states use native HTML attributes and ARIA:
 @import '@skagerakenergi/design/snackbar.css';
 ```
 
+**Variants:** `--two-line` (top-aligned items), `--action-below` (action moves below text)
+**Usage:** minimally interruptive messages not requiring user action. One at a time; max one action. Auto-dismiss 4–10 s; but auto-dismiss is inaccessible on web — add inline feedback near the trigger.
+**Placement:** bottom of UI, above FABs. Don't cover navigation or frequently used targets. Don't stack snackbars.
+**Accessibility:** `role="status"` + `aria-live="polite"`. Don't move focus to snackbar automatically. Focus returns to trigger on dismiss.
+
 ```html
+<!-- Single-line snackbar -->
 <div class="se-snackbar" role="status" aria-live="polite">
   <span class="se-snackbar__text">Item saved</span>
   <button class="se-snackbar__action">Undo</button>
@@ -573,6 +721,15 @@ Interactive states use native HTML attributes and ARIA:
     <span class="material-symbols-outlined">close</span>
   </button>
 </div>
+
+<!-- Two-line snackbar -->
+<div class="se-snackbar se-snackbar--two-line" role="status" aria-live="polite">
+  <span class="se-snackbar__text">This item has been moved to the trash. You can restore it from the trash folder.</span>
+  <button class="se-snackbar__action">Undo</button>
+  <button class="se-snackbar__close" aria-label="Dismiss">
+    <span class="material-symbols-outlined">close</span>
+  </button>
+</div>
 ```
 
 ### Progress Indicator
@@ -581,16 +738,20 @@ Interactive states use native HTML attributes and ARIA:
 @import '@skagerakenergi/design/progress-indicator.css';
 ```
 
-```html
 **Variants:** `--linear`, `--circular`
 **States:** `--indeterminate`
 **M3 Expressive:** `--wavy` (linear only)
+**Custom height:** Set `--se-progress-height` (default: `4px`)
+**Usage:** show status of ongoing processes. Choose by wait time: instant (< 200 ms) = none; short (200 ms–5 s) = loading indicator; long (> 5 s) = progress indicator. Linear for edge-of-container; circular for centered-in-element.
+**Placement:** linear along container edge; circular centered on loading area. In buttons: circular with flat shape, no track, indicator matches button label color.
+**Contrast:** active indicator ≥ 3:1 against background. Stop indicator required when track contrast < 3:1.
 
 ```html
-<!-- Linear determinate -->
+<!-- Linear determinate (with stop indicator) -->
 <div class="se-progress se-progress--linear" role="progressbar" aria-label="Loading" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
   <div class="se-progress__track">
     <div class="se-progress__indicator" style="width: 60%"></div>
+    <div class="se-progress__stop" aria-hidden="true" style="left: 60%"></div>
   </div>
 </div>
 
@@ -601,6 +762,21 @@ Interactive states use native HTML attributes and ARIA:
   </div>
 </div>
 
+<!-- Wavy linear (no stop element) -->
+<div class="se-progress se-progress--linear se-progress--wavy" role="progressbar" aria-label="Loading" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
+  <div class="se-progress__track">
+    <div class="se-progress__indicator" style="width: 40%"></div>
+  </div>
+</div>
+
+<!-- Custom height -->
+<div class="se-progress se-progress--linear" role="progressbar" aria-label="Loading" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="--se-progress-height: 8px">
+  <div class="se-progress__track">
+    <div class="se-progress__indicator" style="width: 60%"></div>
+    <div class="se-progress__stop" aria-hidden="true" style="left: 60%"></div>
+  </div>
+</div>
+
 <!-- Circular determinate -->
 <div class="se-progress se-progress--circular" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" aria-label="60% complete">
   <svg class="se-progress__track" viewBox="0 0 48 48">
@@ -616,11 +792,44 @@ Interactive states use native HTML attributes and ARIA:
 @import '@skagerakenergi/design/loading-indicator.css';
 ```
 
+**Variants:** default (no background), `--contained` (with primary-container background)
+**Responsive sizing:** `--se-loading-indicator-size` custom property (default: 48px, range: 24px–240px). Container-to-indicator ratio (79.2%) preserved at all sizes.
+**Usage scope:** short indeterminate waits (200ms–5s). Replaces indeterminate circular progress indicator for short processes. Never transition from loading indicator to progress indicator.
+**Container guidance:** use `--contained` when placed over other content (extra contrast); omit when on a plain surface; always use with pull-to-refresh.
+**Placement:** center in page/container when loading; center in empty space for loading more items; can embed inside other components (e.g. buttons).
+
+The loading indicator requires an inner SVG that performs shape morphing between 7 M3 MaterialShapes (SoftBurst → Cookie9Sided → Pentagon → Pill → Sunny → Cookie4Sided → Oval) with continuous rotation. The MaterialShapes library has no official web implementation — this package ships the pre-baked SVG as an importable asset.
+
+**Import the shapes SVG** (avoids inlining the large path data):
+
+```js
+// Vite / Vite-based frameworks (React, Vue, Svelte, etc.)
+import shapesSvg from '@skagerakenergi/design/loading-indicator-shapes.svg?raw'
+
+// Non-Vite (Webpack, plain HTML, SSR, etc.)
+import { loadingIndicatorShapesSvg } from '@skagerakenergi/design/loading-indicator-shapes.js'
+```
+
+Then inject the imported string as `innerHTML` of the container element:
+
 ```html
 <div class="se-loading-indicator" role="status" aria-label="Loading">
+  <!-- inject shapesSvg / loadingIndicatorShapesSvg here -->
+</div>
+
+<!-- Contained variant (with background — use over other content) -->
+<div class="se-loading-indicator se-loading-indicator--contained" role="status" aria-label="Loading">
+  <!-- inject shapesSvg / loadingIndicatorShapesSvg here -->
+</div>
+
+<!-- Responsive sizing (120px) -->
+<div class="se-loading-indicator" style="--se-loading-indicator-size: 120px" role="status" aria-label="Loading">
+  <!-- inject shapesSvg / loadingIndicatorShapesSvg here -->
 </div>
 ```
 
+**Accessibility:** `role="status"` + descriptive `aria-label` explaining what is loading (e.g. "Loading news article"). Active indicator must have ≥3:1 contrast against background. When embedded in another component, ≥3:1 contrast against that component's background.
+
 ### Divider
 
 ```css
@@ -628,6 +837,8 @@ Interactive states use native HTML attributes and ARIA:
 ```
 
 **Variants:** `--inset`, `--middle-inset`, `--vertical`
+**Usage:** full-width for unrelated content sections; inset for related content. Use sparingly — too many clutters the interface. Vertical dividers for large-screen side-by-side layouts.
+**Contrast:** decorative elements with no contrast minimums.
 
 ```html
 <hr class="se-divider">
@@ -641,15 +852,64 @@ Interactive states use native HTML attributes and ARIA:
 @import '@skagerakenergi/design/list.css';
 ```
 
+**Line variants:** default (one line), `--two-line`, `--three-line`
+**States:** `--interactive` (with `tabindex="0"`), `--selected`
+**Leading variants:** default (icon), `--avatar` (initials circle), `--image` (image background), `--video` (video thumbnail)
+**Trailing:** `se-list__trailing` (icon), `se-list__trailing-text` (text)
+**Optional element:** `se-list__overline` (overline text above the label)
+**List variant:** `--segmented` (dividers between items)
+**Usage:** vertical groups of text, icons, images. Keep labels brief; supporting text 1–3 lines. Use consistent placement for visuals across items. Gaps for contained lists; dividers for uncontained.
+**Adaptive:** compact — edge-to-edge, full-screen detail on select. Medium/expanded — list-detail side-by-side. Consider swapping for cards on large screens. Ideal line length 40–60 characters.
+**Touch target:** all interactive elements ≥ 48 × 48 CSS px.
+
 ```html
+<!-- Two-line list with icon leading and trailing text -->
 <ul class="se-list">
   <li class="se-list__item se-list__item--two-line">
     <span class="se-list__leading" aria-hidden="true">
       <span class="material-symbols-outlined">person</span>
     </span>
     <span class="se-list__content">
-      <span class="se-list__label">Item title</span>
-      <span class="se-list__supporting">Supporting text</span>
+      <span class="se-list__label">John Doe</span>
+      <span class="se-list__supporting">john@example.com</span>
+    </span>
+    <span class="se-list__trailing-text">3m ago</span>
+  </li>
+</ul>
+
+<!-- Interactive list with avatars -->
+<ul class="se-list">
+  <li class="se-list__item se-list__item--two-line se-list__item--interactive se-list__item--selected" tabindex="0">
+    <span class="se-list__leading se-list__leading--avatar">JD</span>
+    <span class="se-list__content">
+      <span class="se-list__label">John Doe</span>
+      <span class="se-list__supporting">john@example.com</span>
+    </span>
+    <span class="se-list__trailing" aria-hidden="true">
+      <span class="material-symbols-outlined">chevron_right</span>
+    </span>
+  </li>
+</ul>
+
+<!-- Three-line list with image leading -->
+<ul class="se-list">
+  <li class="se-list__item se-list__item--three-line">
+    <div class="se-list__leading se-list__leading--image"></div>
+    <span class="se-list__content">
+      <span class="se-list__label">Project files</span>
+      <span class="se-list__supporting">Updated design files for the new dashboard layout.</span>
+    </span>
+  </li>
+</ul>
+
+<!-- List item with video thumbnail leading -->
+<ul class="se-list">
+  <li class="se-list__item se-list__item--three-line">
+    <div class="se-list__leading se-list__leading--video"></div>
+    <span class="se-list__content">
+      <span class="se-list__overline">Category</span>
+      <span class="se-list__label">Video title</span>
+      <span class="se-list__supporting">Description text</span>
     </span>
   </li>
 </ul>
@@ -704,7 +964,7 @@ This library implements M3 Expressive, which adds to baseline M3:
 | Button Group | — | `se-button-group` (standard + `--connected`) |
 | Split Button | — | `se-split-button` |
 | Toolbar | — | `se-toolbar` (`--docked` + `--floating` + `--floating-vertical`) |
-| Loading Indicator | — | `se-loading-indicator` |
+| Loading Indicator | — | `se-loading-indicator` (default/`--contained`; `--se-loading-indicator-size`: 24–240px) |
 | Flexible App Bar | App Bar | `--medium-flexible`, `--large-flexible` |
 | Search App Bar | App Bar | `--search` |
 

package/README.md

@@ -288,6 +288,10 @@ Component files:
 - `split-button.css`, `switch.css`, `tabs.css`, `text-field.css`, `toolbar.css`
 - `layout.css`
 
+Loading indicator shape asset (avoids inlining the large SVG path data):
+- `loading-indicator-shapes.svg` — import with `?raw` in Vite-based projects
+- `loading-indicator-shapes.js` — ESM export (`loadingIndicatorShapesSvg: string`) for non-Vite environments
+
 ## Figma Code Connect
 
 This project uses [Figma Code Connect](https://github.com/figma/code-connect) to link Figma component instances to the corresponding HTML/CSS snippets so designers see real code in the Figma Dev Mode inspector.

package/dist/loading-indicator-shapes.d.ts

@@ -0,0 +1 @@
+export declare const loadingIndicatorShapesSvg: string;

package/dist/loading-indicator-shapes.js

@@ -0,0 +1 @@
+export const loadingIndicatorShapesSvg = '<svg class="se-loading-indicator__shapes" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="4 4 40 40" aria-hidden="true"><path fill="currentColor"><animate attributeName="d" calcMode="spline" dur="5s" keySplines="0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8" keyTimes="0; 0.14; 0.29; 0.43; 0.57; 0.71; 0.86; 1" repeatCount="indefinite" values="m37.4 24.7 0.5 0.7 0.8 0.9 0.8 1.0 0.6 1.0 -0.1 0.8 -0.0 0.1 -0.6 0.7 -1.1 0.5 -1.3 0.3 -1.0 0.2 -0.9 0.4 -0.7 1.1 0.1 1.0 0.1 1.1 0.0 1.2 -0.2 1.1 -0.4 0.5 -0.3 0.2 -0.8 0.2 -1.2 -0.4 -1.2 -0.4 -1.0 -0.5 -0.8 -0.1 -1.3 0.5 -0.5 0.8 -0.6 0.9 -0.6 1.0 -0.8 0.8 -0.8 0.2 -0.1 -0.0 -0.9 -0.3 -0.8 -1.0 -0.6 -1.0 -0.6 -0.9 -0.5 -0.7 -1.3 -0.3 -0.9 0.2 -0.9 0.4 -1.2 0.5 -1.2 0.3 -0.8 -0.3 -0.0 -0.1 -0.6 -0.6 -0.1 -1.2 0.1 -1.2 0.0 -1.1 0.0 -0.9 -0.7 -1.1 -0.9 -0.3 -1.1 -0.3 -1.2 -0.3 -1.1 -0.4 -0.5 -0.8 -0.0 0.0 -0.1 -0.9 0.6 -1.0 0.8 -0.9 0.8 -0.9 0.5 -0.7 -0.0 -1.4 -0.5 -0.7 -0.8 -0.9 -0.8 -0.9 -0.6 -1.0 0.1 -0.9 0.0 -0.0 0.5 -0.8 1.1 -0.4 1.2 -0.3 1.1 -0.3 0.9 -0.3 0.7 -1.1 0.0 -0.9 -0.0 -1.1 -0.1 -1.2 0.1 -1.2 0.6 -0.6 0.0 -0.1 0.8 -0.3 1.2 0.3 1.2 0.5 0.9 0.4 0.9 0.2 1.3 -0.3 0.5 -0.7 0.6 -0.9 0.6 -1.0 0.8 -1.0 0.9 -0.3 0.1 0.0 0.8 0.2 0.8 0.8 0.6 1.0 0.6 0.9 0.5 0.8 1.3 0.5 0.8 -0.1 1.0 -0.5 1.2 -0.4 1.2 -0.4 0.8 0.2 0.3 0.2 0.4 0.5 0.2 1.1 -0.0 1.2 -0.1 1.1 -0.1 1.0 0.7 1.1 0.9 0.4 1.0 0.2 1.3 0.3 1.1 0.5 0.6 0.7 0.0 0.1 0.1 0.8 -0.5 1.0 -0.9 1.0 -0.8 0.9 -0.5 0.7 z; m39.9 24.0 -0.3 0.8 -0.4 0.8 -0.3 0.8 -0.2 1.5 0.1 0.9 0.1 0.9 -0.1 0.9 -0.2 0.8 -0.3 0.8 -0.2 0.4 -0.3 0.4 -0.5 0.7 -0.7 0.5 -0.8 0.4 -0.8 0.4 -0.8 0.4 -1.2 1.0 -0.5 0.7 -0.5 0.8 -0.6 0.6 -0.6 0.6 -0.8 0.4 -0.4 0.2 -0.5 0.1 -0.9 0.2 -0.8 -0.0 -0.9 -0.2 -0.9 -0.3 -0.8 -0.1 -1.6 -0.1 -0.8 0.2 -0.9 0.3 -0.9 0.2 -0.8 -0.0 -0.9 -0.2 -0.5 -0.1 -0.4 -0.2 -0.8 -0.4 -0.6 -0.5 -0.6 -0.7 -0.5 -0.8 -0.5 -0.7 -1.2 -1.0 -0.7 -0.4 -0.9 -0.4 -0.8 -0.4 -0.6 -0.5 -0.6 -0.7 -0.3 -0.4 -0.2 -0.4 -0.3 -0.8 -0.2 -0.8 -0.1 -0.9 0.1 -0.9 0.1 -0.9 -0.2 -1.5 -0.3 -0.8 -0.4 -0.8 -0.3 -0.8 -0.2 -0.8 -0.1 -0.9 0.1 -0.7 -0.0 -0.2 0.2 -0.8 0.4 -0.8 0.5 -0.7 0.6 -0.6 0.7 -0.7 0.5 -0.6 0.6 -1.3 0.3 -0.9 0.2 -0.8 0.3 -0.8 0.5 -0.7 0.5 -0.6 0.2 -0.2 0.5 -0.4 0.8 -0.4 0.8 -0.3 0.8 -0.2 0.9 -0.0 0.8 -0.1 1.4 -0.5 0.7 -0.4 0.7 -0.5 0.7 -0.5 0.8 -0.3 0.8 -0.2 0.9 -0.1 0.0 -0.0 0.8 0.1 0.9 0.2 0.8 0.3 0.7 0.5 0.7 0.5 0.7 0.4 1.4 0.5 0.8 0.1 0.9 0.0 0.9 0.2 0.8 0.3 0.7 0.4 0.5 0.4 0.2 0.1 0.5 0.7 0.5 0.7 0.3 0.8 0.2 0.8 0.3 0.9 0.6 1.3 0.5 0.6 0.7 0.7 0.6 0.6 0.5 0.7 0.4 0.8 0.2 0.8 0.0 0.2 0.1 0.7 -0.1 0.9 z; m38.9 24.2 -0.2 0.8 -0.2 0.7 -0.3 0.8 -0.2 0.8 -0.3 0.7 -0.2 0.8 -0.3 0.8 -0.2 0.7 -0.3 0.8 -0.2 0.8 -0.3 0.7 -0.2 0.8 -0.4 1.0 -0.4 0.8 -0.4 0.8 -0.6 0.6 -0.7 0.5 0.0 0.1 -0.7 0.4 -0.8 0.3 -0.8 0.3 -0.9 0.1 -1.1 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -1.1 -0.0 -0.9 -0.1 -0.8 -0.3 -0.8 -0.3 -0.7 -0.5 -0.1 0.0 -0.6 -0.5 -0.6 -0.7 -0.4 -0.7 -0.4 -0.8 -0.4 -1.0 -0.2 -0.8 -0.3 -0.7 -0.2 -0.8 -0.3 -0.8 -0.2 -0.7 -0.3 -0.8 -0.2 -0.8 -0.3 -0.7 -0.2 -0.8 -0.3 -0.7 -0.2 -0.8 -0.3 -0.8 -0.2 -0.7 -0.3 -1.1 -0.2 -0.9 -0.0 -0.8 0.0 -0.9 0.2 -0.8 0.1 -0.1 0.3 -0.7 0.4 -0.8 0.6 -0.6 0.6 -0.6 0.9 -0.7 0.6 -0.5 0.7 -0.4 0.6 -0.5 0.7 -0.5 0.6 -0.4 0.7 -0.5 0.6 -0.5 0.7 -0.5 0.6 -0.4 0.7 -0.5 0.6 -0.5 0.7 -0.4 0.6 -0.5 0.9 -0.7 0.8 -0.4 0.8 -0.3 0.8 -0.2 0.8 -0.0 0.1 -0.0 0.9 0.0 0.8 0.2 0.8 0.3 0.8 0.4 0.9 0.7 0.6 0.5 0.7 0.4 0.6 0.5 0.7 0.5 0.6 0.4 0.7 0.5 0.6 0.5 0.7 0.5 0.6 0.4 0.7 0.5 0.6 0.5 0.7 0.4 0.6 0.5 0.9 0.7 0.6 0.6 0.6 0.7 0.4 0.7 0.3 0.7 0.0 0.1 0.2 0.8 0.1 0.9 -0.0 0.9 -0.2 0.8 -0.3 1.1 z; m39.6 24.0 -0.1 0.8 -0.3 0.8 -0.2 0.8 -0.3 0.7 -0.3 0.8 -0.4 0.7 -0.4 0.7 -0.5 0.6 -0.4 0.6 -0.6 0.6 -0.6 0.6 -0.4 0.4 -0.6 0.6 -0.4 0.5 -0.9 0.8 -0.5 0.5 -0.6 0.6 -0.4 0.4 -0.7 0.7 -0.5 0.5 -0.6 0.4 -0.7 0.5 -0.6 0.4 -0.7 0.4 -0.7 0.3 -0.8 0.3 -0.8 0.3 -0.8 0.2 -0.8 0.1 -0.8 0.1 -0.8 0.1 -0.9 0.0 -0.8 -0.0 -0.9 -0.1 -0.8 -0.2 -0.8 -0.2 -0.9 -0.2 -0.8 -0.3 -0.8 -0.4 -0.8 -0.4 -0.7 -0.5 -0.7 -0.5 -0.7 -0.5 -0.6 -0.6 -0.1 -0.1 -0.5 -0.6 -0.6 -0.7 -0.5 -0.7 -0.5 -0.8 -0.4 -0.7 -0.4 -0.8 -0.3 -0.8 -0.2 -0.8 -0.2 -0.9 -0.2 -0.8 -0.1 -0.9 0.0 -0.8 0.0 -0.9 0.1 -0.8 0.1 -0.8 0.1 -0.8 0.3 -0.8 0.2 -0.8 0.3 -0.7 0.4 -0.8 0.3 -0.7 0.5 -0.6 0.4 -0.7 0.4 -0.5 0.6 -0.6 0.6 -0.7 0.4 -0.4 0.6 -0.6 0.5 -0.4 0.8 -0.9 0.5 -0.5 0.6 -0.6 0.4 -0.4 0.7 -0.7 0.5 -0.5 0.6 -0.4 0.7 -0.5 0.6 -0.4 0.7 -0.4 0.7 -0.3 0.8 -0.3 0.8 -0.3 0.8 -0.2 0.8 -0.1 0.8 -0.1 0.8 -0.1 0.9 -0.0 0.8 0.0 0.9 0.1 0.8 0.2 0.8 0.2 0.9 0.2 0.8 0.4 0.8 0.3 0.8 0.4 0.7 0.5 0.7 0.5 0.7 0.5 0.6 0.7 0.1 -0.0 0.5 0.6 0.6 0.7 0.5 0.7 0.5 0.8 0.4 0.7 0.3 0.8 0.4 0.8 0.2 0.8 0.2 0.9 0.2 0.8 0.1 0.9 0.0 0.8 -0.0 0.8 -0.1 0.9 z; m40.0 24.0 -0.1 0.8 -0.5 0.8 -0.6 0.8 -0.6 0.6 -0.6 0.7 -0.5 0.6 -0.7 1.2 -0.1 0.7 -0.1 0.8 -0.0 0.9 -0.1 0.9 -0.1 0.9 -0.2 0.9 -0.5 0.7 -0.0 0.0 -0.7 0.5 -0.9 0.2 -0.9 0.1 -0.9 0.1 -0.8 0.0 -0.8 0.1 -0.8 0.1 -1.2 0.7 -0.6 0.5 -0.7 0.6 -0.6 0.6 -0.8 0.6 -0.8 0.5 -0.8 0.1 -0.0 0.0 -0.8 -0.1 -0.8 -0.5 -0.8 -0.6 -0.6 -0.6 -0.7 -0.6 -0.6 -0.5 -1.2 -0.7 -0.7 -0.1 -0.8 -0.1 -0.9 -0.0 -0.9 -0.1 -0.9 -0.1 -0.9 -0.2 -0.7 -0.5 -0.0 0.0 -0.5 -0.7 -0.2 -0.9 -0.1 -0.9 -0.1 -0.9 -0.0 -0.8 -0.1 -0.8 -0.1 -0.8 -0.7 -1.2 -0.5 -0.6 -0.6 -0.7 -0.6 -0.6 -0.6 -0.8 -0.5 -0.8 -0.1 -0.8 -0.0 -0.0 0.1 -0.8 0.5 -0.8 0.6 -0.8 0.6 -0.6 0.6 -0.7 0.5 -0.6 0.7 -1.2 0.1 -0.7 0.1 -0.8 0.0 -0.9 0.1 -0.9 0.1 -0.9 0.2 -0.9 0.5 -0.7 -0.0 -0.0 0.7 -0.5 0.9 -0.2 0.9 -0.1 0.9 -0.1 0.8 -0.0 0.8 -0.1 0.8 -0.1 1.2 -0.7 0.6 -0.5 0.7 -0.6 0.6 -0.6 0.8 -0.6 0.8 -0.5 0.8 -0.1 0.0 -0.0 0.8 0.1 0.8 0.5 0.8 0.6 0.6 0.6 0.7 0.6 0.6 0.5 1.2 0.7 0.7 0.1 0.8 0.1 0.9 0.0 0.9 0.1 0.9 0.1 0.9 0.2 0.7 0.5 0.0 -0.0 0.5 0.7 0.2 0.9 0.1 0.9 0.1 0.9 0.0 0.8 0.1 0.8 0.1 0.8 0.7 1.2 0.5 0.6 0.6 0.7 0.6 0.6 0.6 0.8 0.5 0.8 0.1 0.8 z; m36.9 24.6 0.1 0.7 0.2 0.8 0.2 0.7 0.4 0.9 0.4 0.9 0.2 0.9 0.1 1.0 0.1 0.9 -0.1 0.9 -0.3 0.9 -0.3 0.9 -0.4 0.8 -0.5 0.8 -0.6 0.6 -0.1 0.1 -0.6 0.6 -0.8 0.5 -0.8 0.4 -0.9 0.3 -0.9 0.3 -0.9 0.1 -0.9 -0.1 -1.0 -0.1 -0.9 -0.2 -0.9 -0.4 -0.9 -0.4 -0.7 -0.2 -0.8 -0.2 -0.7 -0.1 -1.2 0.0 -0.7 0.1 -0.8 0.2 -0.7 0.2 -0.9 0.4 -0.9 0.4 -0.9 0.2 -1.0 0.1 -0.9 0.1 -0.9 -0.1 -0.9 -0.3 -0.9 -0.3 -0.8 -0.4 -0.8 -0.5 -0.6 -0.6 -0.1 -0.1 -0.6 -0.6 -0.5 -0.8 -0.4 -0.8 -0.3 -0.9 -0.3 -0.9 -0.1 -0.9 0.1 -0.9 0.1 -1.0 0.2 -0.9 0.4 -0.9 0.4 -0.9 0.2 -0.7 0.2 -0.8 0.1 -0.7 -0.0 -1.2 -0.1 -0.7 -0.2 -0.8 -0.2 -0.7 -0.4 -0.9 -0.4 -0.9 -0.2 -0.9 -0.1 -1.0 -0.1 -0.9 0.1 -0.9 0.3 -0.9 0.3 -0.9 0.4 -0.8 0.5 -0.8 0.6 -0.6 0.1 -0.1 0.6 -0.6 0.8 -0.5 0.8 -0.4 0.9 -0.3 0.9 -0.3 0.9 -0.1 0.9 0.1 1.0 0.1 0.9 0.2 0.9 0.4 0.9 0.4 0.7 0.2 0.8 0.2 0.7 0.1 1.2 -0.0 0.7 -0.1 0.8 -0.2 0.7 -0.2 0.9 -0.4 0.9 -0.4 0.9 -0.2 1.0 -0.1 0.9 -0.1 0.9 0.1 0.9 0.3 0.9 0.3 0.8 0.4 0.8 0.5 0.6 0.6 0.1 0.1 0.6 0.6 0.5 0.8 0.4 0.8 0.3 0.9 0.3 0.9 0.1 0.9 -0.1 0.9 -0.1 1.0 -0.2 0.9 -0.4 0.9 -0.4 0.9 -0.2 0.7 -0.2 0.8 -0.1 0.7 z; m37.7 24.0 -0.3 0.7 -0.4 0.7 -0.3 0.6 -0.3 0.7 -0.4 0.6 -0.3 0.5 -0.4 0.6 -0.4 0.5 -0.4 0.5 -0.4 0.5 -0.4 0.5 -0.4 0.5 -0.3 0.4 -0.5 0.4 -0.8 0.8 -0.4 0.5 -0.4 0.3 -0.5 0.4 -0.5 0.4 -0.5 0.4 -0.5 0.4 -0.5 0.4 -0.6 0.4 -0.5 0.3 -0.6 0.4 -0.7 0.3 -0.6 0.3 -0.7 0.4 -0.7 0.3 -0.7 0.2 -0.7 0.3 -0.9 0.3 -0.8 0.2 -0.8 0.1 -0.9 0.1 -1.0 0.1 -0.9 -0.0 -0.9 -0.1 -0.9 -0.1 -0.9 -0.3 -0.9 -0.3 -0.8 -0.4 -0.8 -0.6 -0.7 -0.6 -0.0 0.0 -0.6 -0.7 -0.6 -0.8 -0.4 -0.8 -0.3 -0.9 -0.3 -0.9 -0.1 -0.9 -0.1 -0.9 0.0 -0.9 0.1 -1.0 0.1 -0.9 0.1 -0.8 0.2 -0.8 0.3 -0.9 0.3 -0.7 0.2 -0.7 0.3 -0.7 0.4 -0.7 0.3 -0.6 0.3 -0.7 0.4 -0.6 0.3 -0.5 0.4 -0.6 0.4 -0.5 0.4 -0.5 0.4 -0.5 0.4 -0.5 0.4 -0.5 0.3 -0.4 0.5 -0.4 0.8 -0.8 0.4 -0.5 0.4 -0.3 0.5 -0.4 0.5 -0.4 0.5 -0.4 0.5 -0.4 0.5 -0.4 0.6 -0.4 0.5 -0.3 0.6 -0.4 0.7 -0.3 0.6 -0.3 0.7 -0.4 0.7 -0.3 0.7 -0.2 0.7 -0.3 0.9 -0.3 0.8 -0.2 0.8 -0.1 0.9 -0.1 1.0 -0.1 0.9 0.0 0.9 0.1 0.9 0.1 0.9 0.3 0.9 0.3 0.8 0.4 0.8 0.6 0.7 0.6 -0.0 0.0 0.6 0.7 0.6 0.8 0.4 0.8 0.3 0.9 0.3 0.9 0.1 0.9 0.1 0.9 -0.0 0.9 -0.1 1.0 -0.1 0.9 -0.1 0.8 -0.2 0.8 -0.3 0.9 -0.3 0.7 z; m37.4 24.7 0.5 0.7 0.8 0.9 0.8 1.0 0.6 1.0 -0.1 0.8 -0.0 0.1 -0.6 0.7 -1.1 0.5 -1.3 0.3 -1.0 0.2 -0.9 0.4 -0.7 1.1 0.1 1.0 0.1 1.1 0.0 1.2 -0.2 1.1 -0.4 0.5 -0.3 0.2 -0.8 0.2 -1.2 -0.4 -1.2 -0.4 -1.0 -0.5 -0.8 -0.1 -1.3 0.5 -0.5 0.8 -0.6 0.9 -0.6 1.0 -0.8 0.8 -0.8 0.2 -0.1 -0.0 -0.9 -0.3 -0.8 -1.0 -0.6 -1.0 -0.6 -0.9 -0.5 -0.7 -1.3 -0.3 -0.9 0.2 -0.9 0.4 -1.2 0.5 -1.2 0.3 -0.8 -0.3 -0.0 -0.1 -0.6 -0.6 -0.1 -1.2 0.1 -1.2 0.0 -1.1 0.0 -0.9 -0.7 -1.1 -0.9 -0.3 -1.1 -0.3 -1.2 -0.3 -1.1 -0.4 -0.5 -0.8 -0.0 0.0 -0.1 -0.9 0.6 -1.0 0.8 -0.9 0.8 -0.9 0.5 -0.7 -0.0 -1.4 -0.5 -0.7 -0.8 -0.9 -0.8 -0.9 -0.6 -1.0 0.1 -0.9 0.0 -0.0 0.5 -0.8 1.1 -0.4 1.2 -0.3 1.1 -0.3 0.9 -0.3 0.7 -1.1 0.0 -0.9 -0.0 -1.1 -0.1 -1.2 0.1 -1.2 0.6 -0.6 0.0 -0.1 0.8 -0.3 1.2 0.3 1.2 0.5 0.9 0.4 0.9 0.2 1.3 -0.3 0.5 -0.7 0.6 -0.9 0.6 -1.0 0.8 -1.0 0.9 -0.3 0.1 0.0 0.8 0.2 0.8 0.8 0.6 1.0 0.6 0.9 0.5 0.8 1.3 0.5 0.8 -0.1 1.0 -0.5 1.2 -0.4 1.2 -0.4 0.8 0.2 0.3 0.2 0.4 0.5 0.2 1.1 -0.0 1.2 -0.1 1.1 -0.1 1.0 0.7 1.1 0.9 0.4 1.0 0.2 1.3 0.3 1.1 0.5 0.6 0.7 0.0 0.1 0.1 0.8 -0.5 1.0 -0.9 1.0 -0.8 0.9 -0.5 0.7 z"/><animateTransform attributeName="transform" attributeType="XML" calcMode="spline" dur="5s" keySplines="0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8" keyTimes="0; 0.14; 0.29; 0.43; 0.57; 0.71; 0.86; 1" repeatCount="indefinite" type="rotate" values="0 24 24; 154 24 24; 309 24 24; 463 24 24; 617 24 24; 771 24 24; 926 24 24; 1080 24 24"/></path></svg>';

package/dist/loading-indicator-shapes.svg

@@ -0,0 +1 @@
+<svg class="se-loading-indicator__shapes" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="4 4 40 40" aria-hidden="true"><path fill="currentColor"><animate attributeName="d" calcMode="spline" dur="5s" keySplines="0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8" keyTimes="0; 0.14; 0.29; 0.43; 0.57; 0.71; 0.86; 1" repeatCount="indefinite" values="m37.4 24.7 0.5 0.7 0.8 0.9 0.8 1.0 0.6 1.0 -0.1 0.8 -0.0 0.1 -0.6 0.7 -1.1 0.5 -1.3 0.3 -1.0 0.2 -0.9 0.4 -0.7 1.1 0.1 1.0 0.1 1.1 0.0 1.2 -0.2 1.1 -0.4 0.5 -0.3 0.2 -0.8 0.2 -1.2 -0.4 -1.2 -0.4 -1.0 -0.5 -0.8 -0.1 -1.3 0.5 -0.5 0.8 -0.6 0.9 -0.6 1.0 -0.8 0.8 -0.8 0.2 -0.1 -0.0 -0.9 -0.3 -0.8 -1.0 -0.6 -1.0 -0.6 -0.9 -0.5 -0.7 -1.3 -0.3 -0.9 0.2 -0.9 0.4 -1.2 0.5 -1.2 0.3 -0.8 -0.3 -0.0 -0.1 -0.6 -0.6 -0.1 -1.2 0.1 -1.2 0.0 -1.1 0.0 -0.9 -0.7 -1.1 -0.9 -0.3 -1.1 -0.3 -1.2 -0.3 -1.1 -0.4 -0.5 -0.8 -0.0 0.0 -0.1 -0.9 0.6 -1.0 0.8 -0.9 0.8 -0.9 0.5 -0.7 -0.0 -1.4 -0.5 -0.7 -0.8 -0.9 -0.8 -0.9 -0.6 -1.0 0.1 -0.9 0.0 -0.0 0.5 -0.8 1.1 -0.4 1.2 -0.3 1.1 -0.3 0.9 -0.3 0.7 -1.1 0.0 -0.9 -0.0 -1.1 -0.1 -1.2 0.1 -1.2 0.6 -0.6 0.0 -0.1 0.8 -0.3 1.2 0.3 1.2 0.5 0.9 0.4 0.9 0.2 1.3 -0.3 0.5 -0.7 0.6 -0.9 0.6 -1.0 0.8 -1.0 0.9 -0.3 0.1 0.0 0.8 0.2 0.8 0.8 0.6 1.0 0.6 0.9 0.5 0.8 1.3 0.5 0.8 -0.1 1.0 -0.5 1.2 -0.4 1.2 -0.4 0.8 0.2 0.3 0.2 0.4 0.5 0.2 1.1 -0.0 1.2 -0.1 1.1 -0.1 1.0 0.7 1.1 0.9 0.4 1.0 0.2 1.3 0.3 1.1 0.5 0.6 0.7 0.0 0.1 0.1 0.8 -0.5 1.0 -0.9 1.0 -0.8 0.9 -0.5 0.7 z; m39.9 24.0 -0.3 0.8 -0.4 0.8 -0.3 0.8 -0.2 1.5 0.1 0.9 0.1 0.9 -0.1 0.9 -0.2 0.8 -0.3 0.8 -0.2 0.4 -0.3 0.4 -0.5 0.7 -0.7 0.5 -0.8 0.4 -0.8 0.4 -0.8 0.4 -1.2 1.0 -0.5 0.7 -0.5 0.8 -0.6 0.6 -0.6 0.6 -0.8 0.4 -0.4 0.2 -0.5 0.1 -0.9 0.2 -0.8 -0.0 -0.9 -0.2 -0.9 -0.3 -0.8 -0.1 -1.6 -0.1 -0.8 0.2 -0.9 0.3 -0.9 0.2 -0.8 -0.0 -0.9 -0.2 -0.5 -0.1 -0.4 -0.2 -0.8 -0.4 -0.6 -0.5 -0.6 -0.7 -0.5 -0.8 -0.5 -0.7 -1.2 -1.0 -0.7 -0.4 -0.9 -0.4 -0.8 -0.4 -0.6 -0.5 -0.6 -0.7 -0.3 -0.4 -0.2 -0.4 -0.3 -0.8 -0.2 -0.8 -0.1 -0.9 0.1 -0.9 0.1 -0.9 -0.2 -1.5 -0.3 -0.8 -0.4 -0.8 -0.3 -0.8 -0.2 -0.8 -0.1 -0.9 0.1 -0.7 -0.0 -0.2 0.2 -0.8 0.4 -0.8 0.5 -0.7 0.6 -0.6 0.7 -0.7 0.5 -0.6 0.6 -1.3 0.3 -0.9 0.2 -0.8 0.3 -0.8 0.5 -0.7 0.5 -0.6 0.2 -0.2 0.5 -0.4 0.8 -0.4 0.8 -0.3 0.8 -0.2 0.9 -0.0 0.8 -0.1 1.4 -0.5 0.7 -0.4 0.7 -0.5 0.7 -0.5 0.8 -0.3 0.8 -0.2 0.9 -0.1 0.0 -0.0 0.8 0.1 0.9 0.2 0.8 0.3 0.7 0.5 0.7 0.5 0.7 0.4 1.4 0.5 0.8 0.1 0.9 0.0 0.9 0.2 0.8 0.3 0.7 0.4 0.5 0.4 0.2 0.1 0.5 0.7 0.5 0.7 0.3 0.8 0.2 0.8 0.3 0.9 0.6 1.3 0.5 0.6 0.7 0.7 0.6 0.6 0.5 0.7 0.4 0.8 0.2 0.8 0.0 0.2 0.1 0.7 -0.1 0.9 z; m38.9 24.2 -0.2 0.8 -0.2 0.7 -0.3 0.8 -0.2 0.8 -0.3 0.7 -0.2 0.8 -0.3 0.8 -0.2 0.7 -0.3 0.8 -0.2 0.8 -0.3 0.7 -0.2 0.8 -0.4 1.0 -0.4 0.8 -0.4 0.8 -0.6 0.6 -0.7 0.5 0.0 0.1 -0.7 0.4 -0.8 0.3 -0.8 0.3 -0.9 0.1 -1.1 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -0.8 -0.0 -1.1 -0.0 -0.9 -0.1 -0.8 -0.3 -0.8 -0.3 -0.7 -0.5 -0.1 0.0 -0.6 -0.5 -0.6 -0.7 -0.4 -0.7 -0.4 -0.8 -0.4 -1.0 -0.2 -0.8 -0.3 -0.7 -0.2 -0.8 -0.3 -0.8 -0.2 -0.7 -0.3 -0.8 -0.2 -0.8 -0.3 -0.7 -0.2 -0.8 -0.3 -0.7 -0.2 -0.8 -0.3 -0.8 -0.2 -0.7 -0.3 -1.1 -0.2 -0.9 -0.0 -0.8 0.0 -0.9 0.2 -0.8 0.1 -0.1 0.3 -0.7 0.4 -0.8 0.6 -0.6 0.6 -0.6 0.9 -0.7 0.6 -0.5 0.7 -0.4 0.6 -0.5 0.7 -0.5 0.6 -0.4 0.7 -0.5 0.6 -0.5 0.7 -0.5 0.6 -0.4 0.7 -0.5 0.6 -0.5 0.7 -0.4 0.6 -0.5 0.9 -0.7 0.8 -0.4 0.8 -0.3 0.8 -0.2 0.8 -0.0 0.1 -0.0 0.9 0.0 0.8 0.2 0.8 0.3 0.8 0.4 0.9 0.7 0.6 0.5 0.7 0.4 0.6 0.5 0.7 0.5 0.6 0.4 0.7 0.5 0.6 0.5 0.7 0.5 0.6 0.4 0.7 0.5 0.6 0.5 0.7 0.4 0.6 0.5 0.9 0.7 0.6 0.6 0.6 0.7 0.4 0.7 0.3 0.7 0.0 0.1 0.2 0.8 0.1 0.9 -0.0 0.9 -0.2 0.8 -0.3 1.1 z; m39.6 24.0 -0.1 0.8 -0.3 0.8 -0.2 0.8 -0.3 0.7 -0.3 0.8 -0.4 0.7 -0.4 0.7 -0.5 0.6 -0.4 0.6 -0.6 0.6 -0.6 0.6 -0.4 0.4 -0.6 0.6 -0.4 0.5 -0.9 0.8 -0.5 0.5 -0.6 0.6 -0.4 0.4 -0.7 0.7 -0.5 0.5 -0.6 0.4 -0.7 0.5 -0.6 0.4 -0.7 0.4 -0.7 0.3 -0.8 0.3 -0.8 0.3 -0.8 0.2 -0.8 0.1 -0.8 0.1 -0.8 0.1 -0.9 0.0 -0.8 -0.0 -0.9 -0.1 -0.8 -0.2 -0.8 -0.2 -0.9 -0.2 -0.8 -0.3 -0.8 -0.4 -0.8 -0.4 -0.7 -0.5 -0.7 -0.5 -0.7 -0.5 -0.6 -0.6 -0.1 -0.1 -0.5 -0.6 -0.6 -0.7 -0.5 -0.7 -0.5 -0.8 -0.4 -0.7 -0.4 -0.8 -0.3 -0.8 -0.2 -0.8 -0.2 -0.9 -0.2 -0.8 -0.1 -0.9 0.0 -0.8 0.0 -0.9 0.1 -0.8 0.1 -0.8 0.1 -0.8 0.3 -0.8 0.2 -0.8 0.3 -0.7 0.4 -0.8 0.3 -0.7 0.5 -0.6 0.4 -0.7 0.4 -0.5 0.6 -0.6 0.6 -0.7 0.4 -0.4 0.6 -0.6 0.5 -0.4 0.8 -0.9 0.5 -0.5 0.6 -0.6 0.4 -0.4 0.7 -0.7 0.5 -0.5 0.6 -0.4 0.7 -0.5 0.6 -0.4 0.7 -0.4 0.7 -0.3 0.8 -0.3 0.8 -0.3 0.8 -0.2 0.8 -0.1 0.8 -0.1 0.8 -0.1 0.9 -0.0 0.8 0.0 0.9 0.1 0.8 0.2 0.8 0.2 0.9 0.2 0.8 0.4 0.8 0.3 0.8 0.4 0.7 0.5 0.7 0.5 0.7 0.5 0.6 0.7 0.1 -0.0 0.5 0.6 0.6 0.7 0.5 0.7 0.5 0.8 0.4 0.7 0.3 0.8 0.4 0.8 0.2 0.8 0.2 0.9 0.2 0.8 0.1 0.9 0.0 0.8 -0.0 0.8 -0.1 0.9 z; m40.0 24.0 -0.1 0.8 -0.5 0.8 -0.6 0.8 -0.6 0.6 -0.6 0.7 -0.5 0.6 -0.7 1.2 -0.1 0.7 -0.1 0.8 -0.0 0.9 -0.1 0.9 -0.1 0.9 -0.2 0.9 -0.5 0.7 -0.0 0.0 -0.7 0.5 -0.9 0.2 -0.9 0.1 -0.9 0.1 -0.8 0.0 -0.8 0.1 -0.8 0.1 -1.2 0.7 -0.6 0.5 -0.7 0.6 -0.6 0.6 -0.8 0.6 -0.8 0.5 -0.8 0.1 -0.0 0.0 -0.8 -0.1 -0.8 -0.5 -0.8 -0.6 -0.6 -0.6 -0.7 -0.6 -0.6 -0.5 -1.2 -0.7 -0.7 -0.1 -0.8 -0.1 -0.9 -0.0 -0.9 -0.1 -0.9 -0.1 -0.9 -0.2 -0.7 -0.5 -0.0 0.0 -0.5 -0.7 -0.2 -0.9 -0.1 -0.9 -0.1 -0.9 -0.0 -0.8 -0.1 -0.8 -0.1 -0.8 -0.7 -1.2 -0.5 -0.6 -0.6 -0.7 -0.6 -0.6 -0.6 -0.8 -0.5 -0.8 -0.1 -0.8 -0.0 -0.0 0.1 -0.8 0.5 -0.8 0.6 -0.8 0.6 -0.6 0.6 -0.7 0.5 -0.6 0.7 -1.2 0.1 -0.7 0.1 -0.8 0.0 -0.9 0.1 -0.9 0.1 -0.9 0.2 -0.9 0.5 -0.7 -0.0 -0.0 0.7 -0.5 0.9 -0.2 0.9 -0.1 0.9 -0.1 0.8 -0.0 0.8 -0.1 0.8 -0.1 1.2 -0.7 0.6 -0.5 0.7 -0.6 0.6 -0.6 0.8 -0.6 0.8 -0.5 0.8 -0.1 0.0 -0.0 0.8 0.1 0.8 0.5 0.8 0.6 0.6 0.6 0.7 0.6 0.6 0.5 1.2 0.7 0.7 0.1 0.8 0.1 0.9 0.0 0.9 0.1 0.9 0.1 0.9 0.2 0.7 0.5 0.0 -0.0 0.5 0.7 0.2 0.9 0.1 0.9 0.1 0.9 0.0 0.8 0.1 0.8 0.1 0.8 0.7 1.2 0.5 0.6 0.6 0.7 0.6 0.6 0.6 0.8 0.5 0.8 0.1 0.8 z; m36.9 24.6 0.1 0.7 0.2 0.8 0.2 0.7 0.4 0.9 0.4 0.9 0.2 0.9 0.1 1.0 0.1 0.9 -0.1 0.9 -0.3 0.9 -0.3 0.9 -0.4 0.8 -0.5 0.8 -0.6 0.6 -0.1 0.1 -0.6 0.6 -0.8 0.5 -0.8 0.4 -0.9 0.3 -0.9 0.3 -0.9 0.1 -0.9 -0.1 -1.0 -0.1 -0.9 -0.2 -0.9 -0.4 -0.9 -0.4 -0.7 -0.2 -0.8 -0.2 -0.7 -0.1 -1.2 0.0 -0.7 0.1 -0.8 0.2 -0.7 0.2 -0.9 0.4 -0.9 0.4 -0.9 0.2 -1.0 0.1 -0.9 0.1 -0.9 -0.1 -0.9 -0.3 -0.9 -0.3 -0.8 -0.4 -0.8 -0.5 -0.6 -0.6 -0.1 -0.1 -0.6 -0.6 -0.5 -0.8 -0.4 -0.8 -0.3 -0.9 -0.3 -0.9 -0.1 -0.9 0.1 -0.9 0.1 -1.0 0.2 -0.9 0.4 -0.9 0.4 -0.9 0.2 -0.7 0.2 -0.8 0.1 -0.7 -0.0 -1.2 -0.1 -0.7 -0.2 -0.8 -0.2 -0.7 -0.4 -0.9 -0.4 -0.9 -0.2 -0.9 -0.1 -1.0 -0.1 -0.9 0.1 -0.9 0.3 -0.9 0.3 -0.9 0.4 -0.8 0.5 -0.8 0.6 -0.6 0.1 -0.1 0.6 -0.6 0.8 -0.5 0.8 -0.4 0.9 -0.3 0.9 -0.3 0.9 -0.1 0.9 0.1 1.0 0.1 0.9 0.2 0.9 0.4 0.9 0.4 0.7 0.2 0.8 0.2 0.7 0.1 1.2 -0.0 0.7 -0.1 0.8 -0.2 0.7 -0.2 0.9 -0.4 0.9 -0.4 0.9 -0.2 1.0 -0.1 0.9 -0.1 0.9 0.1 0.9 0.3 0.9 0.3 0.8 0.4 0.8 0.5 0.6 0.6 0.1 0.1 0.6 0.6 0.5 0.8 0.4 0.8 0.3 0.9 0.3 0.9 0.1 0.9 -0.1 0.9 -0.1 1.0 -0.2 0.9 -0.4 0.9 -0.4 0.9 -0.2 0.7 -0.2 0.8 -0.1 0.7 z; m37.7 24.0 -0.3 0.7 -0.4 0.7 -0.3 0.6 -0.3 0.7 -0.4 0.6 -0.3 0.5 -0.4 0.6 -0.4 0.5 -0.4 0.5 -0.4 0.5 -0.4 0.5 -0.4 0.5 -0.3 0.4 -0.5 0.4 -0.8 0.8 -0.4 0.5 -0.4 0.3 -0.5 0.4 -0.5 0.4 -0.5 0.4 -0.5 0.4 -0.5 0.4 -0.6 0.4 -0.5 0.3 -0.6 0.4 -0.7 0.3 -0.6 0.3 -0.7 0.4 -0.7 0.3 -0.7 0.2 -0.7 0.3 -0.9 0.3 -0.8 0.2 -0.8 0.1 -0.9 0.1 -1.0 0.1 -0.9 -0.0 -0.9 -0.1 -0.9 -0.1 -0.9 -0.3 -0.9 -0.3 -0.8 -0.4 -0.8 -0.6 -0.7 -0.6 -0.0 0.0 -0.6 -0.7 -0.6 -0.8 -0.4 -0.8 -0.3 -0.9 -0.3 -0.9 -0.1 -0.9 -0.1 -0.9 0.0 -0.9 0.1 -1.0 0.1 -0.9 0.1 -0.8 0.2 -0.8 0.3 -0.9 0.3 -0.7 0.2 -0.7 0.3 -0.7 0.4 -0.7 0.3 -0.6 0.3 -0.7 0.4 -0.6 0.3 -0.5 0.4 -0.6 0.4 -0.5 0.4 -0.5 0.4 -0.5 0.4 -0.5 0.4 -0.5 0.3 -0.4 0.5 -0.4 0.8 -0.8 0.4 -0.5 0.4 -0.3 0.5 -0.4 0.5 -0.4 0.5 -0.4 0.5 -0.4 0.5 -0.4 0.6 -0.4 0.5 -0.3 0.6 -0.4 0.7 -0.3 0.6 -0.3 0.7 -0.4 0.7 -0.3 0.7 -0.2 0.7 -0.3 0.9 -0.3 0.8 -0.2 0.8 -0.1 0.9 -0.1 1.0 -0.1 0.9 0.0 0.9 0.1 0.9 0.1 0.9 0.3 0.9 0.3 0.8 0.4 0.8 0.6 0.7 0.6 -0.0 0.0 0.6 0.7 0.6 0.8 0.4 0.8 0.3 0.9 0.3 0.9 0.1 0.9 0.1 0.9 -0.0 0.9 -0.1 1.0 -0.1 0.9 -0.1 0.8 -0.2 0.8 -0.3 0.9 -0.3 0.7 z; m37.4 24.7 0.5 0.7 0.8 0.9 0.8 1.0 0.6 1.0 -0.1 0.8 -0.0 0.1 -0.6 0.7 -1.1 0.5 -1.3 0.3 -1.0 0.2 -0.9 0.4 -0.7 1.1 0.1 1.0 0.1 1.1 0.0 1.2 -0.2 1.1 -0.4 0.5 -0.3 0.2 -0.8 0.2 -1.2 -0.4 -1.2 -0.4 -1.0 -0.5 -0.8 -0.1 -1.3 0.5 -0.5 0.8 -0.6 0.9 -0.6 1.0 -0.8 0.8 -0.8 0.2 -0.1 -0.0 -0.9 -0.3 -0.8 -1.0 -0.6 -1.0 -0.6 -0.9 -0.5 -0.7 -1.3 -0.3 -0.9 0.2 -0.9 0.4 -1.2 0.5 -1.2 0.3 -0.8 -0.3 -0.0 -0.1 -0.6 -0.6 -0.1 -1.2 0.1 -1.2 0.0 -1.1 0.0 -0.9 -0.7 -1.1 -0.9 -0.3 -1.1 -0.3 -1.2 -0.3 -1.1 -0.4 -0.5 -0.8 -0.0 0.0 -0.1 -0.9 0.6 -1.0 0.8 -0.9 0.8 -0.9 0.5 -0.7 -0.0 -1.4 -0.5 -0.7 -0.8 -0.9 -0.8 -0.9 -0.6 -1.0 0.1 -0.9 0.0 -0.0 0.5 -0.8 1.1 -0.4 1.2 -0.3 1.1 -0.3 0.9 -0.3 0.7 -1.1 0.0 -0.9 -0.0 -1.1 -0.1 -1.2 0.1 -1.2 0.6 -0.6 0.0 -0.1 0.8 -0.3 1.2 0.3 1.2 0.5 0.9 0.4 0.9 0.2 1.3 -0.3 0.5 -0.7 0.6 -0.9 0.6 -1.0 0.8 -1.0 0.9 -0.3 0.1 0.0 0.8 0.2 0.8 0.8 0.6 1.0 0.6 0.9 0.5 0.8 1.3 0.5 0.8 -0.1 1.0 -0.5 1.2 -0.4 1.2 -0.4 0.8 0.2 0.3 0.2 0.4 0.5 0.2 1.1 -0.0 1.2 -0.1 1.1 -0.1 1.0 0.7 1.1 0.9 0.4 1.0 0.2 1.3 0.3 1.1 0.5 0.6 0.7 0.0 0.1 0.1 0.8 -0.5 1.0 -0.9 1.0 -0.8 0.9 -0.5 0.7 z"/><animateTransform attributeName="transform" attributeType="XML" calcMode="spline" dur="5s" keySplines="0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8; 0.5 0.2 0 0.8" keyTimes="0; 0.14; 0.29; 0.43; 0.57; 0.71; 0.86; 1" repeatCount="indefinite" type="rotate" values="0 24 24; 154 24 24; 309 24 24; 463 24 24; 617 24 24; 771 24 24; 926 24 24; 1080 24 24"/></path></svg>

package/dist/loading-indicator.css

@@ -1,26 +1,31 @@
 /* Loading Indicator — M3 Expressive */
 /* Uses SVG shape morphing between 7 MaterialShapes with continuous rotation.
-   Shapes: SoftBurst → Cookie9Sided → Pentagon → Pill → Sunny → Cookie4Sided → Oval */
+   Shapes: SoftBurst → Cookie9Sided → Pentagon → Pill → Sunny → Cookie4Sided → Oval
+   Usage: short indeterminate waits (200ms–5s). Not for long processes — use progress indicator.
+   Responsive sizing: 24px–240px via --se-loading-indicator-size. Container-to-indicator ratio is 79.2%. */
 
 /* ── Base (default, no container) ── */
 .se-loading-indicator {
+  --se-loading-indicator-size: 48px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 48px;
-  height: 48px;
+  width: var(--se-loading-indicator-size);
+  height: var(--se-loading-indicator-size);
   position: relative;
   color: var(--md-sys-color-primary);
 }
 
-/* SVG shape morph element */
+/* SVG shape morph element — 79.2% of container (38/48 ratio) */
 .se-loading-indicator__shapes {
   display: block;
-  width: 38px;
-  height: 38px;
+  width: calc(var(--se-loading-indicator-size) * 0.792);
+  height: calc(var(--se-loading-indicator-size) * 0.792);
 }
 
 /* ── Contained variant ── */
+/* Use when placed over other content for extra contrast.
+   Not needed on a plain surface. Always use with pull-to-refresh. */
 .se-loading-indicator--contained {
   background-color: var(--md-sys-color-primary-container);
   border-radius: 50%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skagerakenergi/design",
-  "version": "0.5.1",
+  "version": "0.6.1",
   "author": "Chris Aurora Neumann Ruud <chrisauroraneumann.ruud@skagerakenergi.no>",
   "description": "Skagerak Energi design system — M3 component library (CSS only)",
   "type": "module",
@@ -41,6 +41,8 @@
     "./text-field.css": "./dist/text-field.css",
     "./list.css": "./dist/list.css",
     "./loading-indicator.css": "./dist/loading-indicator.css",
+    "./loading-indicator-shapes.svg": "./dist/loading-indicator-shapes.svg",
+    "./loading-indicator-shapes.js": "./dist/loading-indicator-shapes.js",
     "./layout.css": "./dist/layout.css",
     "./index.css": "./dist/index.css"
   },
@@ -85,6 +87,7 @@
     "test:spec": "playwright test --config tests/playwright.config.ts",
     "test:storybook": "vitest --run",
     "test": "pnpm test:spec && pnpm test:storybook",
+    "audit:docs": "node --import tsx scripts/audit-docs.ts",
     "figma:publish": "figma connect publish",
     "figma:unpublish": "figma connect unpublish"
   }