// Linear Progress Indicator — Vendoo Design System  (LinearProgressIndicator)
// ─────────────────────────────────────────────────────────────────────────────
// The REAL component body, lifted VERBATIM from the design-system source
//   progress/linear/LinearProgressIndicator.jsx
// The published _ds_bundle.js predates this component and does not export it, so
// — exactly like Steps.jsx / Navigation.jsx — this file registers it on
// window.VendooDesignSystem_a81b7b instead of using a top-level ESM `export`
// (the in-browser Babel transform rejects `export`). The playground renders this
// straight from the namespace; nothing is reimplemented.
// Requires tokens.css. React is global. Honors prefers-reduced-motion.
// ─────────────────────────────────────────────────────────────────────────────
(function () {
  const React = window.React;
  const ns = (window.VendooDesignSystem_a81b7b = window.VendooDesignSystem_a81b7b || {});

  const VDS_LPI_CSS = `
.vds-lpi{ position:relative; display:block; width:100%; height:4px; overflow:hidden;
  border-radius:var(--sys-radius-full); background:var(--sys-secondary-container);
  box-sizing:border-box; }
.vds-lpi__bar{ position:absolute; top:0; bottom:0; left:0;
  background:var(--sys-primary); border-radius:inherit; will-change:left,right; }
.vds-lpi__bar--1{ animation:vds-lpi-grow 2.1s cubic-bezier(0.65,0.815,0.735,0.395) infinite; }
.vds-lpi__bar--2{ animation:vds-lpi-shrink 2.1s cubic-bezier(0.165,0.84,0.44,1) infinite; }
@keyframes vds-lpi-grow{
  0%{ left:-35%; right:100%; }
  60%{ left:100%; right:-90%; }
  100%{ left:100%; right:-90%; }
}
@keyframes vds-lpi-shrink{
  0%{ left:-200%; right:100%; }
  60%{ left:107%; right:-8%; }
  100%{ left:107%; right:-8%; }
}
@media (prefers-reduced-motion: reduce){
  .vds-lpi__bar--1{ animation:vds-lpi-pulse 1.4s ease-in-out infinite; left:0; right:60%; }
  .vds-lpi__bar--2{ display:none; }
  @keyframes vds-lpi-pulse{ 0%,100%{ opacity:.45; } 50%{ opacity:1; } }
}
`;
  function vdsInjectCss(id, css) {
    if (typeof document === "undefined" || document.getElementById(id)) return;
    const s = document.createElement("style");
    s.id = id;
    s.textContent = css;
    document.head.appendChild(s);
  }

  function LinearProgressIndicator({ width, label = "Loading", className, style }) {
    vdsInjectCss("vds-lpi-css", VDS_LPI_CSS);
    const merged = Object.assign({}, width != null ? { width } : null, style);
    return (
      <div
        className={"vds-lpi" + (className ? " " + className : "")}
        style={merged}
        role="progressbar"
        aria-label={label}
        aria-busy="true"
      >
        <span className="vds-lpi__bar vds-lpi__bar--1"></span>
        <span className="vds-lpi__bar vds-lpi__bar--2"></span>
      </div>
    );
  }

  ns.LinearProgressIndicator = LinearProgressIndicator;
})();