@francofantomius/material-components 0.1.0 → 1.0.0

package/dist/chunks/player-C4ydiIpr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"player-C4ydiIpr.js","names":[],"sources":["../../src/components/player/player.css.ts","../../src/components/player/player.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const playerStyles = css`\n  :host {\n    display: block;\n    width: 100%;\n    box-sizing: border-box;\n    font-family: var(--md-sys-typescale-font-family, 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif);\n    position: relative;\n    border-radius: var(--md-sys-shape-corner-extra-large, 24px);\n    overflow: hidden;\n    color: var(--md-sys-color-on-surface, #1D1B20);\n    transition: box-shadow 200ms cubic-bezier(0.2, 0, 0, 1),\n                background-color 200ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  *, *::before, *::after {\n    box-sizing: inherit;\n  }\n\n  /* --- Variants --- */\n  :host(:not([variant])),\n  :host([variant=\"elevated\"]),\n  :host([variant=\"full\"]) {\n    background-color: var(--md-sys-color-surface-container-low, #F7F2FA);\n    box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px 1px rgba(0, 0, 0, 0.15));\n  }\n\n  :host([variant=\"filled\"]) {\n    background-color: var(--md-sys-color-surface-container-highest, #E6E0E9);\n    box-shadow: var(--md-sys-elevation-level0, none);\n  }\n\n  :host([variant=\"outlined\"]) {\n    background-color: var(--md-sys-color-surface, #FEF7FF);\n    border: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);\n    box-shadow: var(--md-sys-elevation-level0, none);\n  }\n\n  :host([variant=\"compact\"]),\n  :host([compact]) {\n    border-radius: var(--md-sys-shape-corner-large, 16px);\n  }\n\n  .player-container {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    position: relative;\n  }\n\n  /* Hidden native media element */\n  .native-media {\n    display: none;\n  }\n\n  /* --- Video Mode Layout --- */\n  :host([type=\"video\"]) .video-viewport {\n    position: relative;\n    width: 100%;\n    aspect-ratio: 16 / 9;\n    background-color: #000;\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  :host([type=\"video\"]) video,\n  :host([type=\"video\"]) ::slotted(video) {\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n    display: block;\n  }\n\n  /* Fullscreen Video Viewport (Scoped exclusively to the video viewport) */\n  .video-viewport:fullscreen {\n    width: 100vw !important;\n    height: 100vh !important;\n    max-width: 100vw !important;\n    max-height: 100vh !important;\n    aspect-ratio: auto !important;\n    background-color: #000 !important;\n    display: flex !important;\n    align-items: center !important;\n    justify-content: center !important;\n    border-radius: 0 !important;\n    margin: 0 !important;\n    padding: 0 !important;\n  }\n\n  .video-viewport:-webkit-full-screen {\n    width: 100vw !important;\n    height: 100vh !important;\n    max-width: 100vw !important;\n    max-height: 100vh !important;\n    aspect-ratio: auto !important;\n    background-color: #000 !important;\n    display: flex !important;\n    align-items: center !important;\n    justify-content: center !important;\n    border-radius: 0 !important;\n    margin: 0 !important;\n    padding: 0 !important;\n  }\n\n  .video-overlay {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    background: linear-gradient(\n      to bottom,\n      rgba(0, 0, 0, 0.65) 0%,\n      rgba(0, 0, 0, 0) 25%,\n      rgba(0, 0, 0, 0) 60%,\n      rgba(0, 0, 0, 0.8) 100%\n    );\n    opacity: 1;\n    transition: opacity 250ms cubic-bezier(0.2, 0, 0, 1);\n    color: #fff;\n    padding: 16px 20px;\n    pointer-events: none;\n  }\n\n  .video-overlay * {\n    pointer-events: auto;\n  }\n\n  .video-viewport:not(:hover):not(.controls-visible) .video-overlay.auto-hide {\n    opacity: 0;\n  }\n\n  .video-top-bar {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 12px;\n  }\n\n  .video-top-actions {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n  }\n\n  .video-title {\n    font-size: var(--md-sys-typescale-title-medium-size, 16px);\n    font-weight: 500;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .video-center-controls {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 16px;\n  }\n\n  /* --- Audio Layout (Large Screen Default) --- */\n  .audio-layout {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n    padding: 20px 24px;\n    gap: 16px;\n  }\n\n  .audio-main-row {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    gap: 16px;\n  }\n\n  .audio-header {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    min-width: 0;\n    flex: 1;\n  }\n\n  .artwork-container {\n    width: 64px;\n    height: 64px;\n    border-radius: var(--md-sys-shape-corner-medium, 12px);\n    background-color: var(--md-sys-color-surface-container-high, #ECE6F0);\n    overflow: hidden;\n    flex-shrink: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-shadow: var(--md-sys-elevation-level1, 0px 1px 2px rgba(0, 0, 0, 0.1));\n  }\n\n  .artwork-img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    display: block;\n  }\n\n  .artwork-fallback {\n    color: var(--md-sys-color-primary, #6750A4);\n    font-size: 32px;\n  }\n\n  .track-info {\n    flex: 1;\n    min-width: 0;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    gap: 2px;\n  }\n\n  .track-title {\n    font-size: var(--md-sys-typescale-title-medium-size, 16px);\n    font-weight: 600;\n    color: var(--md-sys-color-on-surface, #1D1B20);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    line-height: 22px;\n  }\n\n  .track-artist {\n    font-size: var(--md-sys-typescale-body-medium-size, 14px);\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    line-height: 18px;\n  }\n\n  .track-album {\n    font-size: 12px;\n    color: var(--md-sys-color-outline, #79747E);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  /* Compact controls (on right side) - hidden on large screens */\n  .compact-controls-right {\n    display: none;\n    align-items: center;\n    gap: 4px;\n    flex-shrink: 0;\n    margin-left: auto;\n  }\n\n  /* Full player scrubber and controls sections */\n  .full-player-scrubber {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n  }\n\n  .full-player-controls {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n  }\n\n  /* --- Small Screen / Compact Variant Layout --- */\n  /* Hide scrollbar/scrubber and show: Image | text (left) and Previous | Play/Pause | Next (right) */\n  @media (max-width: 600px) {\n    :host([type=\"audio\"]:not([variant=\"full\"])) .audio-layout {\n      padding: 10px 14px;\n      gap: 0;\n    }\n\n    :host([type=\"audio\"]:not([variant=\"full\"])) .audio-header {\n      gap: 12px;\n    }\n\n    :host([type=\"audio\"]:not([variant=\"full\"])) .artwork-container {\n      width: 44px;\n      height: 44px;\n      border-radius: var(--md-sys-shape-corner-small, 8px);\n    }\n\n    :host([type=\"audio\"]:not([variant=\"full\"])) .track-title {\n      font-size: 14px;\n      line-height: 18px;\n    }\n\n    :host([type=\"audio\"]:not([variant=\"full\"])) .track-artist {\n      font-size: 12px;\n      line-height: 16px;\n    }\n\n    :host([type=\"audio\"]:not([variant=\"full\"])) .track-album {\n      display: none;\n    }\n\n    :host([type=\"audio\"]:not([variant=\"full\"])) .compact-controls-right {\n      display: flex;\n    }\n\n    :host([type=\"audio\"]:not([variant=\"full\"])) .full-player-scrubber {\n      display: none !important;\n    }\n\n    :host([type=\"audio\"]:not([variant=\"full\"])) .full-player-controls {\n      display: none !important;\n    }\n  }\n\n  /* Explicit compact mode (forced compact on any screen width) */\n  :host([compact]) .audio-layout,\n  :host([variant=\"compact\"]) .audio-layout {\n    padding: 10px 14px;\n    gap: 0;\n  }\n\n  :host([compact]) .audio-header,\n  :host([variant=\"compact\"]) .audio-header {\n    gap: 12px;\n  }\n\n  :host([compact]) .artwork-container,\n  :host([variant=\"compact\"]) .artwork-container {\n    width: 44px;\n    height: 44px;\n    border-radius: var(--md-sys-shape-corner-small, 8px);\n  }\n\n  :host([compact]) .track-title,\n  :host([variant=\"compact\"]) .track-title {\n    font-size: 14px;\n    line-height: 18px;\n  }\n\n  :host([compact]) .track-artist,\n  :host([variant=\"compact\"]) .track-artist {\n    font-size: 12px;\n    line-height: 16px;\n  }\n\n  :host([compact]) .track-album,\n  :host([variant=\"compact\"]) .track-album {\n    display: none;\n  }\n\n  :host([compact]) .compact-controls-right,\n  :host([variant=\"compact\"]) .compact-controls-right {\n    display: flex;\n  }\n\n  :host([compact]) .full-player-scrubber,\n  :host([variant=\"compact\"]) .full-player-scrubber {\n    display: none !important;\n  }\n\n  :host([compact]) .full-player-controls,\n  :host([variant=\"compact\"]) .full-player-controls {\n    display: none !important;\n  }\n\n  /* --- Progress / Scrubber Section --- */\n  .scrubber-section {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n    width: 100%;\n  }\n\n  .progress-slider-container {\n    position: relative;\n    height: 24px;\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n    touch-action: none;\n    user-select: none;\n  }\n\n  .slider-track-bg {\n    position: absolute;\n    left: 0;\n    right: 0;\n    height: 6px;\n    border-radius: 3px;\n    background-color: var(--md-sys-color-surface-variant, #E7E0EC);\n    overflow: hidden;\n    clip-path: inset(0 0 0 0%);\n    transition: clip-path 300ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  .progress-slider-container.playing-wave .slider-track-bg {\n    clip-path: inset(0 0 0 var(--progress-percent, 0%));\n  }\n\n  .slider-buffer-bar {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    background-color: var(--md-sys-color-secondary-container, #E8DEF8);\n    transition: width 150ms linear;\n  }\n\n  .slider-active-bar {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    background-color: var(--md-sys-color-primary, #6750A4);\n    border-radius: 3px;\n    opacity: 1;\n    transition: opacity 250ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  .progress-slider-container.playing-wave .slider-active-bar {\n    opacity: 0;\n  }\n\n  .slider-sinus-wave {\n    position: absolute;\n    left: 0;\n    top: 50%;\n    transform: translateY(-50%) scaleY(0.2);\n    height: 20px;\n    background-color: var(--md-sys-color-primary, #6750A4);\n    -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 20'%3E%3Cpath d='M 0 10 C 4.5 4.5, 11.5 4.5, 16 10 S 27.5 15.5, 32 10' fill='none' stroke='black' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E\");\n    mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 20'%3E%3Cpath d='M 0 10 C 4.5 4.5, 11.5 4.5, 16 10 S 27.5 15.5, 32 10' fill='none' stroke='black' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E\");\n    -webkit-mask-repeat: repeat-x;\n    mask-repeat: repeat-x;\n    -webkit-mask-size: 32px 20px;\n    mask-size: 32px 20px;\n    animation: sinus-wave-anim 1.2s linear infinite;\n    animation-play-state: paused;\n    opacity: 0;\n    pointer-events: none;\n    z-index: 1;\n    transition: transform 300ms cubic-bezier(0.2, 0, 0, 1),\n                opacity 250ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  .progress-slider-container.playing-wave .slider-sinus-wave {\n    opacity: 1;\n    transform: translateY(-50%) scaleY(1);\n    animation-play-state: running;\n  }\n\n  @keyframes sinus-wave-anim {\n    0% {\n      -webkit-mask-position: 0 0;\n      mask-position: 0 0;\n    }\n    100% {\n      -webkit-mask-position: -32px 0;\n      mask-position: -32px 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .slider-sinus-wave {\n      animation: none;\n      transition: none;\n    }\n    .slider-track-bg {\n      transition: none;\n    }\n    .slider-active-bar {\n      transition: none;\n    }\n  }\n\n  .slider-thumb {\n    position: absolute;\n    width: 16px;\n    height: 16px;\n    border-radius: 50%;\n    background-color: var(--md-sys-color-primary, #6750A4);\n    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);\n    top: 50%;\n    transform: translate(-50%, -50%) scale(0.85);\n    transition: transform 120ms cubic-bezier(0.2, 0, 0, 1), background-color 120ms ease;\n    z-index: 2;\n  }\n\n  .progress-slider-container:hover .slider-thumb,\n  .progress-slider-container:active .slider-thumb,\n  .progress-slider-container.dragging .slider-thumb {\n    transform: translate(-50%, -50%) scale(1.2);\n  }\n\n  .time-display {\n    display: flex;\n    justify-content: space-between;\n    font-size: 12px;\n    font-variant-numeric: tabular-nums;\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n    font-weight: 500;\n  }\n\n  /* --- Main Controls Row --- */\n  .controls-row {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 8px;\n    width: 100%;\n  }\n\n  .controls-group-left,\n  .controls-group-right {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    flex: 1;\n  }\n\n  .controls-group-right {\n    justify-content: flex-end;\n  }\n\n  .controls-group-center {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n  }\n\n  /* Play / Pause Primary Button */\n  .play-pause-btn {\n    width: 48px;\n    height: 48px;\n    border-radius: var(--md-sys-shape-corner-full, 9999px);\n    background-color: var(--md-sys-color-primary, #6750A4);\n    color: var(--md-sys-color-on-primary, #FFFFFF);\n    border: none;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    position: relative;\n    overflow: hidden;\n    outline: none;\n    box-shadow: var(--md-sys-elevation-level1, 0px 1px 3px rgba(0, 0, 0, 0.2));\n    transition: transform 120ms cubic-bezier(0.2, 0, 0, 1),\n                background-color 150ms ease,\n                box-shadow 150ms ease;\n  }\n\n  .play-pause-btn.compact-play-btn {\n    width: 40px;\n    height: 40px;\n  }\n\n  .play-pause-btn.compact-play-btn md-icon {\n    font-size: 24px;\n  }\n\n  .play-pause-btn:hover {\n    background-color: var(--md-sys-color-primary-container, #EADDFF);\n    color: var(--md-sys-color-on-primary-container, #21005D);\n    box-shadow: var(--md-sys-elevation-level2, 0px 2px 6px rgba(0, 0, 0, 0.25));\n    transform: scale(1.04);\n  }\n\n  .play-pause-btn:active {\n    transform: scale(0.96);\n  }\n\n  .play-pause-btn md-icon {\n    font-size: 28px;\n  }\n\n  /* Control Icon Button */\n  .ctrl-btn {\n    width: 36px;\n    height: 36px;\n    border-radius: var(--md-sys-shape-corner-full, 9999px);\n    background: transparent;\n    border: none;\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    position: relative;\n    overflow: hidden;\n    outline: none;\n    transition: background-color 120ms ease, color 120ms ease;\n  }\n\n  .ctrl-btn:hover {\n    background-color: var(--md-sys-color-surface-container-highest, rgba(0, 0, 0, 0.08));\n    color: var(--md-sys-color-on-surface, #1D1B20);\n  }\n\n  .ctrl-btn.active {\n    color: var(--md-sys-color-primary, #6750A4);\n    background-color: var(--md-sys-color-primary-container, #EADDFF);\n  }\n\n  .ctrl-btn md-icon {\n    font-size: 20px;\n  }\n\n  /* Playback Speed Badge / Pill */\n  .speed-btn {\n    min-width: 32px;\n    height: 28px;\n    padding: 0 6px;\n    border-radius: var(--md-sys-shape-corner-small, 8px);\n    font-size: 11px;\n    font-weight: 600;\n    background: transparent;\n    border: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n    cursor: pointer;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    outline: none;\n    transition: all 120ms ease;\n  }\n\n  .speed-btn:hover {\n    background-color: var(--md-sys-color-surface-container-highest, #E6E0E9);\n    border-color: var(--md-sys-color-outline, #79747E);\n    color: var(--md-sys-color-on-surface, #1D1B20);\n  }\n\n  /* Volume slider widget - Always visible in full player */\n  .volume-container {\n    display: flex;\n    align-items: center;\n    position: relative;\n    gap: 6px;\n  }\n\n  .volume-slider-wrapper {\n    width: 72px;\n    opacity: 1;\n    display: flex;\n    align-items: center;\n  }\n\n  .volume-slider {\n    -webkit-appearance: none;\n    appearance: none;\n    width: 72px;\n    height: 4px;\n    border-radius: 2px;\n    background: linear-gradient(\n      to right,\n      var(--md-sys-color-primary, #6750A4) 0%,\n      var(--md-sys-color-primary, #6750A4) var(--volume-percent, 100%),\n      var(--md-sys-color-surface-variant, #E7E0EC) var(--volume-percent, 100%),\n      var(--md-sys-color-surface-variant, #E7E0EC) 100%\n    );\n    accent-color: var(--md-sys-color-primary, #6750A4);\n    outline: none;\n    cursor: pointer;\n  }\n\n  .volume-slider::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    appearance: none;\n    width: 12px;\n    height: 12px;\n    border-radius: 50%;\n    background: var(--md-sys-color-primary, #6750A4);\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\n    cursor: pointer;\n    transition: transform 100ms ease;\n  }\n\n  .volume-slider::-webkit-slider-thumb:hover {\n    transform: scale(1.25);\n  }\n\n  .volume-slider::-moz-range-thumb {\n    width: 12px;\n    height: 12px;\n    border-radius: 50%;\n    background: var(--md-sys-color-primary, #6750A4);\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\n    cursor: pointer;\n    border: none;\n  }\n\n  .volume-slider::-moz-range-progress {\n    background-color: var(--md-sys-color-primary, #6750A4);\n    border-radius: 2px;\n    height: 4px;\n  }\n\n  /* Video controls bar inside video viewport */\n  .video-bottom-bar {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    width: 100%;\n  }\n\n  .video-bottom-bar .controls-row {\n    color: #fff;\n  }\n\n  .video-bottom-bar .ctrl-btn {\n    color: #fff;\n  }\n\n  .video-bottom-bar .ctrl-btn:hover {\n    background-color: rgba(255, 255, 255, 0.2);\n    color: #fff;\n  }\n\n  .video-bottom-bar .ctrl-btn.active {\n    background-color: var(--md-sys-color-primary, #6750A4);\n    color: #fff;\n  }\n\n  .video-bottom-bar .time-display {\n    color: rgba(255, 255, 255, 0.85);\n  }\n\n  .video-bottom-bar .speed-btn {\n    border-color: rgba(255, 255, 255, 0.4);\n    color: #fff;\n  }\n\n  .video-bottom-bar .speed-btn:hover {\n    background-color: rgba(255, 255, 255, 0.2);\n  }\n\n  .video-bottom-bar .volume-slider {\n    background: linear-gradient(\n      to right,\n      var(--md-sys-color-primary, #6750A4) 0%,\n      var(--md-sys-color-primary, #6750A4) var(--volume-percent, 100%),\n      rgba(255, 255, 255, 0.35) var(--volume-percent, 100%),\n      rgba(255, 255, 255, 0.35) 100%\n    );\n  }\n\n  .video-bottom-bar .volume-slider::-webkit-slider-thumb {\n    background: var(--md-sys-color-primary, #6750A4);\n    border: 1.5px solid #fff;\n  }\n\n  .video-bottom-bar .volume-slider::-moz-range-thumb {\n    background: var(--md-sys-color-primary, #6750A4);\n    border: 1.5px solid #fff;\n  }\n\n  /* Extra content / footer slot */\n  .extra-content {\n    border-top: 1px solid var(--md-sys-color-outline-variant, #CAC4D0);\n    padding: 12px 24px;\n    font-size: var(--md-sys-typescale-body-medium-size, 14px);\n    color: var(--md-sys-color-on-surface-variant, #49454F);\n  }\n\n  .extra-content[hidden],\n  .extra-content:empty {\n    display: none !important;\n  }\n\n  :host([compact]) .extra-content,\n  :host([variant=\"compact\"]) .extra-content {\n    padding: 8px 16px;\n  }\n`;\n","import { html, nothing } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport { MdBaseElement } from '../../internal/base-component.js';\nimport '../../internal/ripple/ripple.js';\nimport '../../internal/focus-ring/focus-ring.js';\nimport '../icon/icon.js';\nimport { playerStyles } from './player.css.js';\n\nexport type PlayerType = 'audio' | 'video';\nexport type PlayerVariant = 'elevated' | 'filled' | 'outlined' | 'compact' | 'full';\n\nconst PLAYBACK_RATES = [0.5, 0.75, 1, 1.25, 1.5, 2];\n\nfunction formatTime(seconds: number): string {\n  if (isNaN(seconds) || seconds < 0 || !isFinite(seconds)) {\n    return '0:00';\n  }\n  const totalSeconds = Math.floor(seconds);\n  const hrs = Math.floor(totalSeconds / 3600);\n  const mins = Math.floor((totalSeconds % 3600) / 60);\n  const secs = totalSeconds % 60;\n\n  const paddedSecs = secs < 10 ? `0${secs}` : `${secs}`;\n  if (hrs > 0) {\n    const paddedMins = mins < 10 ? `0${mins}` : `${mins}`;\n    return `${hrs}:${paddedMins}:${paddedSecs}`;\n  }\n  return `${mins}:${paddedSecs}`;\n}\n\n@customElement('md-player')\nexport class MdPlayer extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, playerStyles];\n\n  @property({ type: String, reflect: true })\n  type: PlayerType = 'audio';\n\n  @property({ type: String, reflect: true })\n  variant: PlayerVariant = 'elevated';\n\n  @property({ type: String })\n  src = '';\n\n  @property({ type: String, attribute: 'track-title' })\n  trackTitle = '';\n\n  @property({ type: String })\n  artist = '';\n\n  @property({ type: String })\n  album = '';\n\n  @property({ type: String })\n  poster = '';\n\n  @property({ type: Number })\n  currentTime = 0;\n\n  @property({ type: Number })\n  duration = 0;\n\n  @property({ type: Number })\n  volume = 1;\n\n  @property({ type: Boolean, reflect: true })\n  muted = false;\n\n  @property({ type: Number, attribute: 'playback-rate' })\n  playbackRate = 1;\n\n  @property({ type: Boolean, reflect: true })\n  paused = true;\n\n  @property({ type: Boolean, reflect: true })\n  loop = false;\n\n  @property({ type: Boolean, reflect: true })\n  autoplay = false;\n\n  @property({ type: String })\n  preload: 'auto' | 'metadata' | 'none' = 'metadata';\n\n  @property({ type: Boolean, reflect: true })\n  compact = false;\n\n  @property({ type: Boolean, attribute: 'show-skip' })\n  showSkip = true;\n\n  @property({ type: Boolean, attribute: 'show-seek' })\n  showSeek = true;\n\n  @property({ type: Boolean, attribute: 'show-volume' })\n  showVolume = true;\n\n  @property({ type: Boolean, attribute: 'show-playback-rate' })\n  showPlaybackRate = true;\n\n  @property({ type: Boolean, attribute: 'show-queue' })\n  showQueue = true;\n\n  @property({ type: Number, attribute: 'seek-step' })\n  seekStep = 10;\n\n  @property({ type: Boolean, reflect: true })\n  shuffle = false;\n\n  @property({ type: Number })\n  buffered = 0;\n\n  @property({ type: String })\n  crossorigin = '';\n\n  @state()\n  private isDraggingScrubber = false;\n\n  @state()\n  private scrubFraction = 0;\n\n  @state()\n  private isFullscreen = false;\n\n  @state()\n  private queueOpen = false;\n\n  @state()\n  private controlsVisible = true;\n\n  @state()\n  private hasExtraContent = false;\n\n  @query('.native-media')\n  private internalMediaEl?: HTMLMediaElement;\n\n  @query('.progress-slider-container')\n  private sliderContainerEl?: HTMLElement;\n\n  @query('.video-viewport')\n  private videoViewportEl?: HTMLElement;\n\n  private slottedMediaEl: HTMLMediaElement | null = null;\n  private controlsHideTimeout: ReturnType<typeof setTimeout> | null = null;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'region');\n    this.setAttribute('aria-label', this.trackTitle ? `Media Player: ${this.trackTitle}` : 'Media Player');\n    document.addEventListener('fullscreenchange', this.handleFullscreenChange);\n    document.addEventListener('webkitfullscreenchange', this.handleFullscreenChange);\n    document.addEventListener('mozfullscreenchange', this.handleFullscreenChange);\n    document.addEventListener('MSFullscreenChange', this.handleFullscreenChange);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    document.removeEventListener('fullscreenchange', this.handleFullscreenChange);\n    document.removeEventListener('webkitfullscreenchange', this.handleFullscreenChange);\n    document.removeEventListener('mozfullscreenchange', this.handleFullscreenChange);\n    document.removeEventListener('MSFullscreenChange', this.handleFullscreenChange);\n    if (this.controlsHideTimeout) {\n      clearTimeout(this.controlsHideTimeout);\n    }\n  }\n\n  override firstUpdated() {\n    this.syncMediaProperties();\n  }\n\n  override updated(changedProperties: Map<string, unknown>) {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('trackTitle')) {\n      this.setAttribute('aria-label', this.trackTitle ? `Media Player: ${this.trackTitle}` : 'Media Player');\n    }\n\n    const media = this.getMediaElement();\n    if (!media) return;\n\n    if (changedProperties.has('src') && this.src && media.src !== this.src) {\n      media.src = this.src;\n      media.load?.();\n    }\n    if (changedProperties.has('volume')) {\n      media.volume = Math.max(0, Math.min(1, this.volume));\n    }\n    if (changedProperties.has('muted')) {\n      media.muted = this.muted;\n    }\n    if (changedProperties.has('playbackRate')) {\n      media.playbackRate = this.playbackRate;\n    }\n    if (changedProperties.has('loop')) {\n      media.loop = this.loop;\n    }\n  }\n\n  public getMediaElement(): HTMLMediaElement | null {\n    if (this.slottedMediaEl) {\n      return this.slottedMediaEl;\n    }\n    return this.internalMediaEl || null;\n  }\n\n  private syncMediaProperties() {\n    const media = this.getMediaElement();\n    if (!media) return;\n\n    media.volume = this.volume;\n    media.muted = this.muted;\n    media.playbackRate = this.playbackRate;\n    media.loop = this.loop;\n    media.autoplay = this.autoplay;\n    media.preload = this.preload;\n  }\n\n  private handleDefaultSlotChange = (e: Event) => {\n    const slot = e.target as HTMLSlotElement;\n    const nodes = slot.assignedNodes({ flatten: true });\n    this.hasExtraContent = nodes.some(\n      (node) => node.nodeType === Node.ELEMENT_NODE || (node.textContent && node.textContent.trim().length > 0)\n    );\n  };\n\n  private handleMediaSlotChange = (e: Event) => {\n    const slot = e.target as HTMLSlotElement;\n    const elements = slot.assignedElements();\n    const media = elements.find(\n      (el): el is HTMLMediaElement => el instanceof HTMLAudioElement || el instanceof HTMLVideoElement\n    );\n\n    if (media) {\n      this.slottedMediaEl = media;\n      this.bindMediaEvents(this.slottedMediaEl);\n      this.syncMediaProperties();\n    } else {\n      this.slottedMediaEl = null;\n    }\n  };\n\n  private bindMediaEvents(media: HTMLMediaElement) {\n    media.onplay = () => {\n      this.paused = false;\n      this.emitEvent('play');\n    };\n\n    media.onpause = () => {\n      this.paused = true;\n      this.emitEvent('pause');\n    };\n\n    media.ontimeupdate = () => {\n      if (!this.isDraggingScrubber) {\n        this.currentTime = media.currentTime || 0;\n      }\n      this.emitEvent('timeupdate', {\n        currentTime: this.currentTime,\n        duration: this.duration,\n        progress: this.duration > 0 ? this.currentTime / this.duration : 0,\n      });\n    };\n\n    media.ondurationchange = () => {\n      this.duration = media.duration || 0;\n    };\n\n    media.onloadedmetadata = () => {\n      this.duration = media.duration || 0;\n      this.currentTime = media.currentTime || 0;\n    };\n\n    media.onprogress = () => {\n      if (media.buffered && media.buffered.length > 0) {\n        const bufferedEnd = media.buffered.end(media.buffered.length - 1);\n        this.buffered = this.duration > 0 ? bufferedEnd / this.duration : 0;\n      }\n    };\n\n    media.onvolumechange = () => {\n      this.volume = media.volume;\n      this.muted = media.muted;\n      this.emitEvent('volumechange', { volume: this.volume, muted: this.muted });\n    };\n\n    media.onratechange = () => {\n      this.playbackRate = media.playbackRate;\n      this.emitEvent('ratechange', { playbackRate: this.playbackRate });\n    };\n\n    media.onended = () => {\n      this.paused = true;\n      this.emitEvent('ended');\n    };\n\n    media.onseeking = () => {\n      this.emitEvent('seeking', { currentTime: media.currentTime });\n    };\n\n    media.onseeked = () => {\n      this.emitEvent('seeked', { currentTime: media.currentTime });\n    };\n\n    media.onerror = (e) => {\n      this.emitEvent('error', { error: e });\n    };\n  }\n\n  /* --- Public Playback Controls --- */\n\n  public async play(): Promise<void> {\n    const media = this.getMediaElement();\n    if (media) {\n      try {\n        await media.play();\n      } catch {\n        this.paused = false;\n      }\n    } else {\n      this.paused = false;\n    }\n    this.paused = false;\n    this.emitEvent('play');\n  }\n\n  public pause(): void {\n    const media = this.getMediaElement();\n    if (media) {\n      media.pause();\n    }\n    this.paused = true;\n    this.emitEvent('pause');\n  }\n\n  public togglePlay(): void {\n    if (this.paused) {\n      this.play();\n    } else {\n      this.pause();\n    }\n  }\n\n  public seek(timeInSeconds: number): void {\n    const targetTime = Math.max(0, Math.min(this.duration || Infinity, timeInSeconds));\n    this.currentTime = targetTime;\n    const media = this.getMediaElement();\n    if (media) {\n      media.currentTime = targetTime;\n    }\n    this.emitEvent('seeked', { currentTime: targetTime });\n  }\n\n  public seekBy(deltaSeconds: number): void {\n    this.seek(this.currentTime + deltaSeconds);\n  }\n\n  public setVolume(vol: number): void {\n    const clamped = Math.max(0, Math.min(1, vol));\n    this.volume = clamped;\n    if (clamped > 0 && this.muted) {\n      this.muted = false;\n    }\n    const media = this.getMediaElement();\n    if (media) {\n      media.volume = clamped;\n      media.muted = this.muted;\n    }\n    this.emitEvent('volumechange', { volume: this.volume, muted: this.muted });\n  }\n\n  public toggleMute(): void {\n    this.muted = !this.muted;\n    const media = this.getMediaElement();\n    if (media) {\n      media.muted = this.muted;\n    }\n    this.emitEvent('volumechange', { volume: this.volume, muted: this.muted });\n  }\n\n  public setPlaybackRate(rate: number): void {\n    this.playbackRate = rate;\n    const media = this.getMediaElement();\n    if (media) {\n      media.playbackRate = rate;\n    }\n    this.emitEvent('ratechange', { playbackRate: rate });\n  }\n\n  public cyclePlaybackRate(): void {\n    const currentIndex = PLAYBACK_RATES.indexOf(this.playbackRate);\n    const nextIndex = (currentIndex + 1) % PLAYBACK_RATES.length;\n    const nextRate = PLAYBACK_RATES[nextIndex] ?? 1;\n    this.setPlaybackRate(nextRate);\n  }\n\n  public toggleLoop(): void {\n    this.loop = !this.loop;\n    const media = this.getMediaElement();\n    if (media) {\n      media.loop = this.loop;\n    }\n  }\n\n  public toggleShuffle(): void {\n    this.shuffle = !this.shuffle;\n    this.emitEvent('shuffle', { shuffle: this.shuffle });\n  }\n\n  public toggleQueue(): void {\n    this.queueOpen = !this.queueOpen;\n    this.emitEvent('queue', { open: this.queueOpen });\n  }\n\n  public restart(): void {\n    this.seek(0);\n    this.play();\n  }\n\n  public async toggleFullscreen(): Promise<void> {\n    if (this.type !== 'video') return;\n\n    const viewport = this.videoViewportEl || (this.shadowRoot?.querySelector('.video-viewport') as HTMLElement | null);\n    const target = viewport || this;\n\n    const isCurrentlyFullscreen = Boolean(\n      document.fullscreenElement === target ||\n      document.fullscreenElement === this ||\n      (this.shadowRoot && (this.shadowRoot as any).fullscreenElement === target) ||\n      (document as any).webkitFullscreenElement === target ||\n      (document as any).webkitFullscreenElement === this ||\n      (document as any).mozFullScreenElement === target ||\n      (document as any).msFullscreenElement === target\n    );\n\n    if (!isCurrentlyFullscreen) {\n      try {\n        if (target.requestFullscreen) {\n          await target.requestFullscreen();\n        } else if ((target as any).webkitRequestFullscreen) {\n          await (target as any).webkitRequestFullscreen();\n        } else if ((target as any).mozRequestFullScreen) {\n          await (target as any).mozRequestFullScreen();\n        } else if ((target as any).msRequestFullscreen) {\n          await (target as any).msRequestFullscreen();\n        } else {\n          const media = this.getMediaElement();\n          if (media && (media as any).webkitEnterFullscreen) {\n            (media as any).webkitEnterFullscreen();\n          }\n        }\n        this.isFullscreen = true;\n      } catch {\n        // Fallback for restricted / mock environments\n        this.isFullscreen = true;\n      }\n    } else {\n      try {\n        if (document.exitFullscreen) {\n          await document.exitFullscreen();\n        } else if ((document as any).webkitExitFullscreen) {\n          await (document as any).webkitExitFullscreen();\n        } else if ((document as any).mozCancelFullScreen) {\n          await (document as any).mozCancelFullScreen();\n        } else if ((document as any).msExitFullscreen) {\n          await (document as any).msExitFullscreen();\n        }\n        this.isFullscreen = false;\n      } catch {\n        this.isFullscreen = false;\n      }\n    }\n    this.emitEvent('fullscreenchange', { fullscreen: this.isFullscreen }, { bubbles: false });\n  }\n\n  public async togglePictureInPicture(): Promise<void> {\n    const media = this.getMediaElement();\n    if (media instanceof HTMLVideoElement && 'requestPictureInPicture' in media) {\n      if (document.pictureInPictureElement) {\n        await document.exitPictureInPicture();\n      } else {\n        await media.requestPictureInPicture();\n      }\n    }\n  }\n\n  public previous(): void {\n    this.emitEvent('previous');\n  }\n\n  public next(): void {\n    this.emitEvent('next');\n  }\n\n  /* --- Event Handlers --- */\n\n  private handleFullscreenChange = (e?: Event) => {\n    // Avoid processing custom synthetic events to prevent infinite dispatch loops\n    if (e && (e instanceof CustomEvent || (e as any).detail !== undefined)) {\n      return;\n    }\n\n    if (this.type !== 'video') {\n      this.isFullscreen = false;\n      return;\n    }\n\n    const viewport = this.videoViewportEl || this.shadowRoot?.querySelector('.video-viewport');\n    const isFs = Boolean(\n      document.fullscreenElement === viewport ||\n      document.fullscreenElement === this ||\n      (this.shadowRoot && (this.shadowRoot as any).fullscreenElement === viewport) ||\n      (document as any).webkitFullscreenElement === viewport ||\n      (document as any).webkitFullscreenElement === this ||\n      (document as any).mozFullScreenElement === viewport\n    );\n\n    this.isFullscreen = isFs;\n    this.emitEvent('fullscreenchange', { fullscreen: isFs }, { bubbles: false });\n  };\n\n  private handleMouseMove = () => {\n    this.controlsVisible = true;\n    if (this.controlsHideTimeout) {\n      clearTimeout(this.controlsHideTimeout);\n    }\n    if (!this.paused && this.type === 'video') {\n      this.controlsHideTimeout = setTimeout(() => {\n        this.controlsVisible = false;\n      }, 3000);\n    }\n  };\n\n  private handleVolumeSliderInput = (e: Event) => {\n    const input = e.target as HTMLInputElement;\n    const val = parseFloat(input.value);\n    this.setVolume(val);\n  };\n\n  private handleScrubberPointerDown = (e: PointerEvent) => {\n    e.preventDefault();\n    if (!this.sliderContainerEl) return;\n\n    this.isDraggingScrubber = true;\n    this.sliderContainerEl.classList.add('dragging');\n    this.sliderContainerEl.setPointerCapture(e.pointerId);\n    this.updateScrubberFromPointer(e);\n  };\n\n  private handleScrubberPointerMove = (e: PointerEvent) => {\n    if (this.isDraggingScrubber) {\n      this.updateScrubberFromPointer(e);\n    }\n  };\n\n  private handleScrubberPointerUp = (e: PointerEvent) => {\n    if (this.isDraggingScrubber) {\n      this.isDraggingScrubber = false;\n      if (this.sliderContainerEl) {\n        this.sliderContainerEl.classList.remove('dragging');\n        try {\n          this.sliderContainerEl.releasePointerCapture(e.pointerId);\n        } catch {\n          // pointer capture release fallback\n        }\n      }\n      const targetTime = (this.duration || 0) * this.scrubFraction;\n      this.seek(targetTime);\n    }\n  };\n\n  private updateScrubberFromPointer(e: PointerEvent) {\n    if (!this.sliderContainerEl) return;\n    const rect = this.sliderContainerEl.getBoundingClientRect();\n    const x = Math.max(0, Math.min(rect.width, e.clientX - rect.left));\n    const fraction = rect.width > 0 ? x / rect.width : 0;\n    this.scrubFraction = Math.max(0, Math.min(1, fraction));\n    if (this.isDraggingScrubber) {\n      this.currentTime = (this.duration || 0) * this.scrubFraction;\n    }\n  }\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    const target = e.target as HTMLElement;\n    if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') return;\n\n    switch (e.key) {\n      case ' ':\n      case 'k':\n      case 'K':\n        e.preventDefault();\n        this.togglePlay();\n        break;\n      case 'ArrowLeft':\n      case 'j':\n      case 'J':\n        e.preventDefault();\n        this.seekBy(-this.seekStep);\n        break;\n      case 'ArrowRight':\n      case 'l':\n      case 'L':\n        e.preventDefault();\n        this.seekBy(this.seekStep);\n        break;\n      case 'ArrowUp':\n        e.preventDefault();\n        this.setVolume(Math.min(1, this.volume + 0.1));\n        break;\n      case 'ArrowDown':\n        e.preventDefault();\n        this.setVolume(Math.max(0, this.volume - 0.1));\n        break;\n      case 'm':\n      case 'M':\n        e.preventDefault();\n        this.toggleMute();\n        break;\n      case 'f':\n      case 'F':\n        if (this.type === 'video') {\n          e.preventDefault();\n          this.toggleFullscreen();\n        }\n        break;\n    }\n  };\n\n  /* --- Render Helpers --- */\n\n  private getVolumeIcon(): string {\n    if (this.muted || this.volume === 0) return 'volume_off';\n    if (this.volume < 0.5) return 'volume_down';\n    return 'volume_up';\n  }\n\n  private renderScrubber(isVideo = false) {\n    const currentProgress = this.duration > 0 ? Math.min(1, Math.max(0, this.currentTime / this.duration)) : 0;\n    const displayFraction = this.isDraggingScrubber ? this.scrubFraction : currentProgress;\n    const progressPercent = displayFraction * 100;\n    const bufferPercent = Math.min(1, Math.max(0, this.buffered)) * 100;\n    const isAudio = !isVideo && this.type !== 'video';\n    const isPlaying = isAudio && !this.paused;\n\n    return html`\n      <div class=\"scrubber-section\">\n        <div\n          class=\"progress-slider-container ${isPlaying ? 'playing-wave' : ''}\"\n          role=\"slider\"\n          aria-label=\"Seek track position\"\n          aria-valuemin=\"0\"\n          aria-valuemax=${this.duration || 100}\n          aria-valuenow=${this.currentTime}\n          aria-valuetext=\"${formatTime(this.currentTime)} of ${formatTime(this.duration)}\"\n          tabindex=\"0\"\n          style=\"--progress-percent: ${progressPercent}%;\"\n          @pointerdown=${this.handleScrubberPointerDown}\n          @pointermove=${this.handleScrubberPointerMove}\n          @pointerup=${this.handleScrubberPointerUp}\n          @pointercancel=${this.handleScrubberPointerUp}\n        >\n          <div class=\"slider-track-bg\">\n            <div class=\"slider-buffer-bar\" style=\"width: ${bufferPercent}%\"></div>\n            <div class=\"slider-active-bar\" style=\"width: ${progressPercent}%\"></div>\n          </div>\n          ${isAudio\n            ? html`<div class=\"slider-sinus-wave\" style=\"width: ${progressPercent}%\"></div>`\n            : nothing}\n          <div class=\"slider-thumb\" style=\"left: ${progressPercent}%\"></div>\n        </div>\n\n        <div class=\"time-display\">\n          <span class=\"time-current\">${formatTime(this.currentTime)}</span>\n          <span class=\"time-duration\">${formatTime(this.duration)}</span>\n        </div>\n      </div>\n    `;\n  }\n\n  private renderControls(isVideo = false) {\n    return html`\n      <div class=\"controls-row\">\n        <!-- Left Group -->\n        <div class=\"controls-group-left\">\n          ${!isVideo\n            ? html`\n                <button\n                  class=\"ctrl-btn ${this.shuffle ? 'active' : ''}\"\n                  type=\"button\"\n                  aria-label=\"Toggle shuffle\"\n                  aria-pressed=${this.shuffle}\n                  @click=${this.toggleShuffle}\n                >\n                  <md-ripple></md-ripple>\n                  <md-focus-ring></md-focus-ring>\n                  <md-icon name=\"shuffle\"></md-icon>\n                </button>\n              `\n            : nothing}\n\n          ${this.showVolume\n            ? html`\n                <div class=\"volume-container\">\n                  <button\n                    class=\"ctrl-btn\"\n                    type=\"button\"\n                    aria-label=${this.muted ? 'Unmute' : 'Mute'}\n                    @click=${this.toggleMute}\n                  >\n                    <md-ripple></md-ripple>\n                    <md-focus-ring></md-focus-ring>\n                    <md-icon name=${this.getVolumeIcon()}></md-icon>\n                  </button>\n                  <div class=\"volume-slider-wrapper\">\n                    <input\n                      class=\"volume-slider\"\n                      type=\"range\"\n                      min=\"0\"\n                      max=\"1\"\n                      step=\"0.05\"\n                      aria-label=\"Volume level\"\n                      style=\"--volume-percent: ${(this.muted ? 0 : this.volume) * 100}%;\"\n                      .value=${String(this.muted ? 0 : this.volume)}\n                      @input=${this.handleVolumeSliderInput}\n                    />\n                  </div>\n                </div>\n              `\n            : nothing}\n        </div>\n\n        <!-- Center Group (Primary controls) -->\n        <div class=\"controls-group-center\">\n          ${this.showSkip\n            ? html`\n                <button\n                  class=\"ctrl-btn\"\n                  type=\"button\"\n                  aria-label=\"Previous track\"\n                  @click=${this.previous}\n                >\n                  <md-ripple></md-ripple>\n                  <md-focus-ring></md-focus-ring>\n                  <md-icon name=\"skip_previous\"></md-icon>\n                </button>\n              `\n            : nothing}\n\n          ${this.showSeek\n            ? html`\n                <button\n                  class=\"ctrl-btn\"\n                  type=\"button\"\n                  aria-label=\"Rewind ${this.seekStep} seconds\"\n                  @click=${() => this.seekBy(-this.seekStep)}\n                >\n                  <md-ripple></md-ripple>\n                  <md-focus-ring></md-focus-ring>\n                  <md-icon name=\"replay_10\"></md-icon>\n                </button>\n              `\n            : nothing}\n\n          <button\n            class=\"play-pause-btn\"\n            type=\"button\"\n            aria-label=${this.paused ? 'Play' : 'Pause'}\n            @click=${this.togglePlay}\n          >\n            <md-ripple></md-ripple>\n            <md-focus-ring></md-focus-ring>\n            <md-icon name=${this.paused ? 'play_arrow' : 'pause'}></md-icon>\n          </button>\n\n          ${this.showSeek\n            ? html`\n                <button\n                  class=\"ctrl-btn\"\n                  type=\"button\"\n                  aria-label=\"Forward ${this.seekStep} seconds\"\n                  @click=${() => this.seekBy(this.seekStep)}\n                >\n                  <md-ripple></md-ripple>\n                  <md-focus-ring></md-focus-ring>\n                  <md-icon name=\"forward_10\"></md-icon>\n                </button>\n              `\n            : nothing}\n\n          ${this.showSkip\n            ? html`\n                <button\n                  class=\"ctrl-btn\"\n                  type=\"button\"\n                  aria-label=\"Next track\"\n                  @click=${this.next}\n                >\n                  <md-ripple></md-ripple>\n                  <md-focus-ring></md-focus-ring>\n                  <md-icon name=\"skip_next\"></md-icon>\n                </button>\n              `\n            : nothing}\n        </div>\n\n        <!-- Right Group -->\n        <div class=\"controls-group-right\">\n          ${this.showPlaybackRate\n            ? html`\n                <button\n                  class=\"speed-btn\"\n                  type=\"button\"\n                  aria-label=\"Change playback speed, current speed ${this.playbackRate}x\"\n                  @click=${this.cyclePlaybackRate}\n                >\n                  <md-ripple></md-ripple>\n                  <md-focus-ring></md-focus-ring>\n                  ${this.playbackRate}x\n                </button>\n              `\n            : nothing}\n\n          ${!isVideo\n            ? html`\n                <button\n                  class=\"ctrl-btn ${this.loop ? 'active' : ''}\"\n                  type=\"button\"\n                  aria-label=\"Toggle repeat\"\n                  aria-pressed=${this.loop}\n                  @click=${this.toggleLoop}\n                >\n                  <md-ripple></md-ripple>\n                  <md-focus-ring></md-focus-ring>\n                  <md-icon name=${this.loop ? 'repeat_one' : 'repeat'}></md-icon>\n                </button>\n              `\n            : nothing}\n\n          ${!isVideo && this.showQueue\n            ? html`\n                <button\n                  class=\"ctrl-btn ${this.queueOpen ? 'active' : ''}\"\n                  type=\"button\"\n                  aria-label=\"Play queue\"\n                  aria-pressed=${this.queueOpen}\n                  @click=${this.toggleQueue}\n                >\n                  <md-ripple></md-ripple>\n                  <md-focus-ring></md-focus-ring>\n                  <md-icon name=\"queue_music\"></md-icon>\n                </button>\n              `\n            : nothing}\n\n          ${isVideo\n            ? html`\n                <button\n                  class=\"ctrl-btn fullscreen-bottom-btn\"\n                  type=\"button\"\n                  aria-label=\"Fullscreen\"\n                  @click=${(e: Event) => { e.stopPropagation(); this.toggleFullscreen(); }}\n                >\n                  <md-ripple></md-ripple>\n                  <md-focus-ring></md-focus-ring>\n                  <md-icon name=${this.isFullscreen ? 'fullscreen_exit' : 'fullscreen'}></md-icon>\n                </button>\n              `\n            : nothing}\n\n          <slot name=\"actions\"></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  private renderAudioLayout() {\n    return html`\n      <div class=\"audio-layout\">\n        <!-- Main Row: Image | text on left, and on small screens Previous | Stop/Play | Next on right -->\n        <div class=\"audio-main-row\">\n          <!-- Left section: Image | text -->\n          <div class=\"audio-header\">\n            <slot name=\"artwork\">\n              <div class=\"artwork-container\">\n                ${this.poster\n                  ? html`<img class=\"artwork-img\" src=${this.poster} alt=${this.trackTitle || 'Track artwork'} />`\n                  : html`<md-icon class=\"artwork-fallback\" name=\"music_note\"></md-icon>`}\n              </div>\n            </slot>\n\n            <div class=\"track-info\">\n              <slot name=\"title\">\n                <span class=\"track-title\">${this.trackTitle || 'Unknown Title'}</span>\n              </slot>\n              <slot name=\"artist\">\n                ${this.artist ? html`<span class=\"track-artist\">${this.artist}</span>` : nothing}\n              </slot>\n              ${this.album ? html`<span class=\"track-album\">${this.album}</span>` : nothing}\n            </div>\n          </div>\n\n          <!-- Small screen compact controls: Previous song | Stop/Play | Next song on right -->\n          <div class=\"compact-controls-right\">\n            ${this.showSkip\n              ? html`\n                  <button\n                    class=\"ctrl-btn\"\n                    type=\"button\"\n                    aria-label=\"Previous song\"\n                    @click=${this.previous}\n                  >\n                    <md-ripple></md-ripple>\n                    <md-focus-ring></md-focus-ring>\n                    <md-icon name=\"skip_previous\"></md-icon>\n                  </button>\n                `\n              : nothing}\n\n            <button\n              class=\"play-pause-btn compact-play-btn\"\n              type=\"button\"\n              aria-label=${this.paused ? 'Play' : 'Pause'}\n              @click=${this.togglePlay}\n            >\n              <md-ripple></md-ripple>\n              <md-focus-ring></md-focus-ring>\n              <md-icon name=${this.paused ? 'play_arrow' : 'pause'}></md-icon>\n            </button>\n\n            ${this.showSkip\n              ? html`\n                  <button\n                    class=\"ctrl-btn\"\n                    type=\"button\"\n                    aria-label=\"Next song\"\n                    @click=${this.next}\n                  >\n                    <md-ripple></md-ripple>\n                    <md-focus-ring></md-focus-ring>\n                    <md-icon name=\"skip_next\"></md-icon>\n                  </button>\n                `\n              : nothing}\n          </div>\n        </div>\n\n        <!-- Full Player: Scrubber Section (Hidden on small screen / compact) -->\n        <div class=\"full-player-scrubber\">\n          ${this.renderScrubber()}\n        </div>\n\n        <!-- Full Player: Controls Row (Hidden on small screen / compact) -->\n        <div class=\"full-player-controls\">\n          ${this.renderControls(false)}\n        </div>\n      </div>\n    `;\n  }\n\n  private renderVideoLayout() {\n    return html`\n      <div\n        class=\"video-viewport ${this.controlsVisible ? 'controls-visible' : ''}\"\n        @mousemove=${this.handleMouseMove}\n        @click=${(e: MouseEvent) => {\n          const target = e.target as HTMLElement;\n          if (target.closest('button') || target.closest('input') || target.closest('.progress-slider-container')) return;\n          this.togglePlay();\n        }}\n      >\n        <slot name=\"media\" @slotchange=${this.handleMediaSlotChange}>\n          ${this.src\n            ? html`\n                <video\n                  src=${this.src}\n                  poster=${this.poster || nothing}\n                  ?autoplay=${this.autoplay}\n                  ?loop=${this.loop}\n                  preload=${this.preload}\n                  crossorigin=${this.crossorigin || nothing}\n                  @play=${() => { this.paused = false; this.emitEvent('play'); }}\n                  @pause=${() => { this.paused = true; this.emitEvent('pause'); }}\n                  @timeupdate=${() => {\n                    if (!this.isDraggingScrubber && this.internalMediaEl) {\n                      this.currentTime = this.internalMediaEl.currentTime;\n                    }\n                  }}\n                  @durationchange=${() => {\n                    if (this.internalMediaEl) this.duration = this.internalMediaEl.duration;\n                  }}\n                  @loadedmetadata=${() => {\n                    if (this.internalMediaEl) {\n                      this.duration = this.internalMediaEl.duration;\n                      this.currentTime = this.internalMediaEl.currentTime;\n                    }\n                  }}\n                  @progress=${() => {\n                    if (this.internalMediaEl?.buffered?.length) {\n                      const end = this.internalMediaEl.buffered.end(this.internalMediaEl.buffered.length - 1);\n                      this.buffered = this.duration > 0 ? end / this.duration : 0;\n                    }\n                  }}\n                  @ended=${() => { this.paused = true; this.emitEvent('ended'); }}\n                ></video>\n              `\n            : nothing}\n        </slot>\n\n        <div class=\"video-overlay ${!this.paused ? 'auto-hide' : ''}\">\n          <div class=\"video-top-bar\">\n            <slot name=\"title\">\n              <span class=\"video-title\">${this.trackTitle || ''}</span>\n            </slot>\n            <div class=\"video-top-actions\">\n              <button\n                class=\"ctrl-btn\"\n                type=\"button\"\n                aria-label=\"Picture in picture\"\n                @click=${(e: Event) => { e.stopPropagation(); this.togglePictureInPicture(); }}\n              >\n                <md-ripple></md-ripple>\n                <md-focus-ring></md-focus-ring>\n                <md-icon name=\"picture_in_picture_alt\"></md-icon>\n              </button>\n              <button\n                class=\"ctrl-btn fullscreen-top-btn\"\n                type=\"button\"\n                aria-label=\"Fullscreen\"\n                @click=${(e: Event) => { e.stopPropagation(); this.toggleFullscreen(); }}\n              >\n                <md-ripple></md-ripple>\n                <md-focus-ring></md-focus-ring>\n                <md-icon name=${this.isFullscreen ? 'fullscreen_exit' : 'fullscreen'}></md-icon>\n              </button>\n            </div>\n          </div>\n\n          <div class=\"video-center-controls\">\n            <button\n              class=\"play-pause-btn\"\n              type=\"button\"\n              aria-label=${this.paused ? 'Play' : 'Pause'}\n              @click=${(e: Event) => { e.stopPropagation(); this.togglePlay(); }}\n            >\n              <md-ripple></md-ripple>\n              <md-focus-ring></md-focus-ring>\n              <md-icon name=${this.paused ? 'play_arrow' : 'pause'}></md-icon>\n            </button>\n          </div>\n\n          <div class=\"video-bottom-bar\" @click=${(e: Event) => e.stopPropagation()}>\n            ${this.renderScrubber(true)}\n            ${this.renderControls(true)}\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  override render() {\n    return html`\n      <div class=\"player-container\" @keydown=${this.handleKeyDown}>\n        <!-- Hidden Native Audio when in audio mode with src -->\n        ${this.type === 'audio' && this.src\n          ? html`\n              <audio\n                class=\"native-media\"\n                src=${this.src}\n                ?autoplay=${this.autoplay}\n                ?loop=${this.loop}\n                preload=${this.preload}\n                crossorigin=${this.crossorigin || nothing}\n                @play=${() => { this.paused = false; this.emitEvent('play'); }}\n                @pause=${() => { this.paused = true; this.emitEvent('pause'); }}\n                @timeupdate=${() => {\n                  if (!this.isDraggingScrubber && this.internalMediaEl) {\n                    this.currentTime = this.internalMediaEl.currentTime;\n                  }\n                }}\n                @durationchange=${() => {\n                  if (this.internalMediaEl) this.duration = this.internalMediaEl.duration;\n                }}\n                @loadedmetadata=${() => {\n                  if (this.internalMediaEl) {\n                    this.duration = this.internalMediaEl.duration;\n                    this.currentTime = this.internalMediaEl.currentTime;\n                  }\n                }}\n                @progress=${() => {\n                  if (this.internalMediaEl?.buffered?.length) {\n                    const end = this.internalMediaEl.buffered.end(this.internalMediaEl.buffered.length - 1);\n                    this.buffered = this.duration > 0 ? end / this.duration : 0;\n                  }\n                }}\n                @ended=${() => { this.paused = true; this.emitEvent('ended'); }}\n              ></audio>\n            `\n          : nothing}\n\n        <!-- Audio Mode Slot Container (for slotted native audio) -->\n        ${this.type === 'audio'\n          ? html`<div style=\"display:none;\"><slot name=\"media\" @slotchange=${this.handleMediaSlotChange}></slot></div>`\n          : nothing}\n\n        ${this.type === 'video' ? this.renderVideoLayout() : this.renderAudioLayout()}\n\n        <div class=\"extra-content\" ?hidden=${!this.hasExtraContent}>\n          <slot @slotchange=${this.handleDefaultSlotChange}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\n// Aliases for convenience & clear semantics\n@customElement('md-media-player')\nexport class MdMediaPlayer extends MdPlayer {}\n\n@customElement('md-audio-player')\nexport class MdAudioPlayer extends MdPlayer {}\n\n@customElement('md-video-player')\nexport class MdVideoPlayer extends MdPlayer {\n  override type: PlayerType = 'video';\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-player': MdPlayer;\n    'md-media-player': MdMediaPlayer;\n    'md-audio-player': MdAudioPlayer;\n    'md-video-player': MdVideoPlayer;\n  }\n}\n"],"mappings":";;;;;;AAEA,IAAa,IAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA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"}

package/dist/chunks/progress-LQmLMDjX.js

@@ -0,0 +1,266 @@
+import { n as m, t as i } from "./decorate-DXuynaiA.js";
+import { css as v, html as r, nothing as o } from "lit";
+import { customElement as f, property as a } from "lit/decorators.js";
+var y = v`
+  :host {
+    display: inline-flex;
+    vertical-align: middle;
+  }
+
+  /* --- Linear Progress --- */
+  :host(:not([type])),
+  :host([type="linear"]) {
+    display: block;
+    width: 100%;
+    height: 20px;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .linear-track-bg {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    right: 0;
+    height: 4px;
+    transform: translateY(-50%);
+    background-color: var(--md-sys-color-surface-container-highest, #E6E0E9);
+    border-radius: var(--md-sys-shape-corner-full, 9999px);
+    overflow: hidden;
+    transition: clip-path 200ms cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  .linear-buffer {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    background-color: var(--md-sys-color-primary-container, #EADDFF);
+    border-radius: inherit;
+    transition: width 200ms cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  .linear-bar {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: var(--md-sys-color-primary, #6750A4);
+    border-radius: inherit;
+    transform-origin: left;
+    transition: transform 200ms cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  /* Wavy Sinus Line for Linear Determinate Progress */
+  .linear-sinus-wave {
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    height: 20px;
+    background-color: var(--md-sys-color-primary, #6750A4);
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 20'%3E%3Cpath d='M 0 10 C 4.5 4.5, 11.5 4.5, 16 10 S 27.5 15.5, 32 10' fill='none' stroke='black' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 20'%3E%3Cpath d='M 0 10 C 4.5 4.5, 11.5 4.5, 16 10 S 27.5 15.5, 32 10' fill='none' stroke='black' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
+    -webkit-mask-repeat: repeat-x;
+    mask-repeat: repeat-x;
+    -webkit-mask-size: 32px 20px;
+    mask-size: 32px 20px;
+    animation: sinus-wave-anim 1.2s linear infinite;
+    transition: width 200ms cubic-bezier(0.2, 0, 0, 1);
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  @keyframes sinus-wave-anim {
+    0% {
+      -webkit-mask-position: 0 0;
+      mask-position: 0 0;
+    }
+    100% {
+      -webkit-mask-position: -32px 0;
+      mask-position: -32px 0;
+    }
+  }
+
+  :host([indeterminate]:not([type])) .linear-bar,
+  :host([indeterminate][type="linear"]) .linear-bar {
+    animation: md-linear-indeterminate 2s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+  }
+
+  @keyframes md-linear-indeterminate {
+    0% {
+      left: -35%;
+      right: 100%;
+    }
+    60% {
+      left: 100%;
+      right: -90%;
+    }
+    100% {
+      left: 100%;
+      right: -90%;
+    }
+  }
+
+  /* --- Circular Progress --- */
+  :host([type="circular"]) {
+    width: 48px;
+    height: 48px;
+    position: relative;
+  }
+
+  svg {
+    width: 100%;
+    height: 100%;
+    transform: rotate(-90deg);
+  }
+
+  circle, path {
+    fill: none;
+    stroke-width: 4px;
+    stroke-linecap: round;
+  }
+
+  .circle-track {
+    stroke: var(--md-sys-color-surface-container-highest, #E6E0E9);
+  }
+
+  .circle-indicator {
+    stroke: var(--md-sys-color-primary, #6750A4);
+    transition: stroke-dashoffset 200ms cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  .circle-wave-indicator {
+    stroke: var(--md-sys-color-primary, #6750A4);
+    transition: stroke-dashoffset 200ms cubic-bezier(0.2, 0, 0, 1);
+    transform-origin: 24px 24px;
+    animation: md-circular-wave-rotate 6s linear infinite;
+  }
+
+  @keyframes md-circular-wave-rotate {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  :host([indeterminate][type="circular"]) svg {
+    animation: md-circular-rotate 1.4s linear infinite;
+  }
+
+  :host([indeterminate][type="circular"]) .circle-indicator {
+    animation: md-circular-dash 1.4s ease-in-out infinite;
+  }
+
+  @keyframes md-circular-rotate {
+    100% {
+      transform: rotate(270deg);
+    }
+  }
+
+  @keyframes md-circular-dash {
+    0% {
+      stroke-dasharray: 1, 200;
+      stroke-dashoffset: 0;
+    }
+    50% {
+      stroke-dasharray: 89, 200;
+      stroke-dashoffset: -35px;
+    }
+    100% {
+      stroke-dasharray: 89, 200;
+      stroke-dashoffset: -124px;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .linear-sinus-wave,
+    .circle-wave-indicator {
+      animation: none;
+      transition: none;
+    }
+  }
+`, b = "M 44.000 24.000 C 44.942 25.309, 45.659 26.854, 45.381 28.253 C 45.103 29.652, 43.849 30.805, 42.478 31.654 C 41.106 32.502, 39.795 33.121, 39.133 34.111 C 38.471 35.102, 38.401 36.550, 38.142 38.142 C 37.883 39.734, 37.298 41.333, 36.111 42.126 C 34.925 42.919, 33.224 42.847, 31.654 42.478 C 30.084 42.108, 28.719 41.618, 27.551 41.850 C 26.382 42.083, 25.309 43.058, 24.000 44.000 C 22.691 44.942, 21.146 45.659, 19.747 45.381 C 18.348 45.103, 17.195 43.849, 16.346 42.478 C 15.498 41.106, 14.879 39.795, 13.889 39.133 C 12.898 38.471, 11.450 38.401, 9.858 38.142 C 8.266 37.883, 6.667 37.298, 5.874 36.111 C 5.081 34.925, 5.153 33.224, 5.522 31.654 C 5.892 30.084, 6.382 28.719, 6.150 27.551 C 5.917 26.382, 4.942 25.309, 4.000 24.000 C 3.058 22.691, 2.341 21.146, 2.619 19.747 C 2.897 18.348, 4.151 17.195, 5.522 16.346 C 6.894 15.498, 8.205 14.879, 8.867 13.889 C 9.529 12.898, 9.599 11.450, 9.858 9.858 C 10.117 8.266, 10.702 6.667, 11.889 5.874 C 13.075 5.081, 14.776 5.153, 16.346 5.522 C 17.916 5.892, 19.281 6.382, 20.449 6.150 C 21.618 5.917, 22.691 4.942, 24.000 4.000 C 25.309 3.058, 26.854 2.341, 28.253 2.619 C 29.652 2.897, 30.805 4.151, 31.654 5.522 C 32.502 6.894, 33.121 8.205, 34.111 8.867 C 35.102 9.529, 36.550 9.599, 38.142 9.858 C 39.734 10.117, 41.333 10.702, 42.126 11.889 C 42.919 13.075, 42.847 14.776, 42.478 16.346 C 42.108 17.916, 41.618 19.281, 41.850 20.449 C 42.083 21.618, 43.058 22.691, 44.000 24.000 Z", t = class extends m {
+  constructor(...e) {
+    super(...e), this.type = "linear", this.value = null, this.max = 1, this.buffer = 1, this.indeterminate = !0, this.wavy = !0;
+  }
+  static {
+    this.styles = [m.styles, y];
+  }
+  willUpdate(e) {
+    super.willUpdate(e), e.has("value") ? this.indeterminate = this.value === null || this.value === void 0 : this.value !== null && this.value !== void 0 && !e.has("indeterminate") && (this.indeterminate = !1), !this.indeterminate && this.value !== null && this.value !== void 0 ? this.setAttribute("aria-valuenow", String(this.value)) : this.removeAttribute("aria-valuenow");
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.setAttribute("role", "progressbar"), this.setAttribute("aria-valuemin", "0"), this.setAttribute("aria-valuemax", String(this.max));
+  }
+  render() {
+    const e = this.max || 1, s = this.value !== null && this.value !== void 0 ? Math.min(Math.max(this.value / e, 0), 1) : 0, h = Math.min(Math.max((this.buffer ?? 1) / e, 0), 1), u = !this.indeterminate && this.value !== null && this.value !== void 0, l = this.wavy && u;
+    if (this.type === "circular") {
+      const n = 2 * Math.PI * 20, p = n - s * n;
+      return l ? r`
+          <svg viewBox="0 0 48 48">
+            <circle class="circle-track" cx="24" cy="24" r=${20}></circle>
+            <path
+              class="circle-wave-indicator"
+              d=${b}
+              pathLength="100"
+              stroke-dasharray="100"
+              stroke-dashoffset=${(1 - s) * 100}
+            ></path>
+          </svg>
+        ` : r`
+        <svg viewBox="0 0 48 48">
+          <circle class="circle-track" cx="24" cy="24" r=${20}></circle>
+          <circle
+            class="circle-indicator"
+            cx="24"
+            cy="24"
+            r=${20}
+            stroke-dasharray=${this.indeterminate ? o : `${n}`}
+            stroke-dashoffset=${this.indeterminate ? o : `${p}`}
+          ></circle>
+        </svg>
+      `;
+    }
+    const c = s * 100, d = h * 100;
+    return l ? r`
+        <div
+          class="linear-track-bg"
+          style="clip-path: inset(0 0 0 ${c}%);"
+        >
+          ${this.buffer < 1 ? r`<div class="linear-buffer" style="width: ${d}%"></div>` : o}
+        </div>
+        <div class="linear-sinus-wave" style="width: ${c}%"></div>
+      ` : r`
+      <div class="linear-track-bg">
+        ${this.buffer < 1 ? r`<div class="linear-buffer" style="width: ${d}%"></div>` : o}
+        <div
+          class="linear-bar"
+          style=${this.indeterminate ? "" : `transform: scaleX(${s})`}
+        ></div>
+      </div>
+    `;
+  }
+};
+i([a({
+  type: String,
+  reflect: !0
+})], t.prototype, "type", void 0);
+i([a({ type: Number })], t.prototype, "value", void 0);
+i([a({ type: Number })], t.prototype, "max", void 0);
+i([a({ type: Number })], t.prototype, "buffer", void 0);
+i([a({
+  type: Boolean,
+  reflect: !0
+})], t.prototype, "indeterminate", void 0);
+i([a({ type: Boolean })], t.prototype, "wavy", void 0);
+t = i([f("md-progress")], t);
+export {
+  b as n,
+  t
+};
+
+//# sourceMappingURL=progress-LQmLMDjX.js.map

package/dist/chunks/progress-LQmLMDjX.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-LQmLMDjX.js","names":[],"sources":["../../src/components/progress/progress.css.ts","../../src/components/progress/progress.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const progressStyles = css`\n  :host {\n    display: inline-flex;\n    vertical-align: middle;\n  }\n\n  /* --- Linear Progress --- */\n  :host(:not([type])),\n  :host([type=\"linear\"]) {\n    display: block;\n    width: 100%;\n    height: 20px;\n    position: relative;\n    overflow: hidden;\n  }\n\n  .linear-track-bg {\n    position: absolute;\n    top: 50%;\n    left: 0;\n    right: 0;\n    height: 4px;\n    transform: translateY(-50%);\n    background-color: var(--md-sys-color-surface-container-highest, #E6E0E9);\n    border-radius: var(--md-sys-shape-corner-full, 9999px);\n    overflow: hidden;\n    transition: clip-path 200ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  .linear-buffer {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    background-color: var(--md-sys-color-primary-container, #EADDFF);\n    border-radius: inherit;\n    transition: width 200ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  .linear-bar {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    background-color: var(--md-sys-color-primary, #6750A4);\n    border-radius: inherit;\n    transform-origin: left;\n    transition: transform 200ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  /* Wavy Sinus Line for Linear Determinate Progress */\n  .linear-sinus-wave {\n    position: absolute;\n    left: 0;\n    top: 50%;\n    transform: translateY(-50%);\n    height: 20px;\n    background-color: var(--md-sys-color-primary, #6750A4);\n    -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 20'%3E%3Cpath d='M 0 10 C 4.5 4.5, 11.5 4.5, 16 10 S 27.5 15.5, 32 10' fill='none' stroke='black' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E\");\n    mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 20'%3E%3Cpath d='M 0 10 C 4.5 4.5, 11.5 4.5, 16 10 S 27.5 15.5, 32 10' fill='none' stroke='black' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E\");\n    -webkit-mask-repeat: repeat-x;\n    mask-repeat: repeat-x;\n    -webkit-mask-size: 32px 20px;\n    mask-size: 32px 20px;\n    animation: sinus-wave-anim 1.2s linear infinite;\n    transition: width 200ms cubic-bezier(0.2, 0, 0, 1);\n    pointer-events: none;\n    z-index: 1;\n  }\n\n  @keyframes sinus-wave-anim {\n    0% {\n      -webkit-mask-position: 0 0;\n      mask-position: 0 0;\n    }\n    100% {\n      -webkit-mask-position: -32px 0;\n      mask-position: -32px 0;\n    }\n  }\n\n  :host([indeterminate]:not([type])) .linear-bar,\n  :host([indeterminate][type=\"linear\"]) .linear-bar {\n    animation: md-linear-indeterminate 2s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;\n  }\n\n  @keyframes md-linear-indeterminate {\n    0% {\n      left: -35%;\n      right: 100%;\n    }\n    60% {\n      left: 100%;\n      right: -90%;\n    }\n    100% {\n      left: 100%;\n      right: -90%;\n    }\n  }\n\n  /* --- Circular Progress --- */\n  :host([type=\"circular\"]) {\n    width: 48px;\n    height: 48px;\n    position: relative;\n  }\n\n  svg {\n    width: 100%;\n    height: 100%;\n    transform: rotate(-90deg);\n  }\n\n  circle, path {\n    fill: none;\n    stroke-width: 4px;\n    stroke-linecap: round;\n  }\n\n  .circle-track {\n    stroke: var(--md-sys-color-surface-container-highest, #E6E0E9);\n  }\n\n  .circle-indicator {\n    stroke: var(--md-sys-color-primary, #6750A4);\n    transition: stroke-dashoffset 200ms cubic-bezier(0.2, 0, 0, 1);\n  }\n\n  .circle-wave-indicator {\n    stroke: var(--md-sys-color-primary, #6750A4);\n    transition: stroke-dashoffset 200ms cubic-bezier(0.2, 0, 0, 1);\n    transform-origin: 24px 24px;\n    animation: md-circular-wave-rotate 6s linear infinite;\n  }\n\n  @keyframes md-circular-wave-rotate {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n\n  :host([indeterminate][type=\"circular\"]) svg {\n    animation: md-circular-rotate 1.4s linear infinite;\n  }\n\n  :host([indeterminate][type=\"circular\"]) .circle-indicator {\n    animation: md-circular-dash 1.4s ease-in-out infinite;\n  }\n\n  @keyframes md-circular-rotate {\n    100% {\n      transform: rotate(270deg);\n    }\n  }\n\n  @keyframes md-circular-dash {\n    0% {\n      stroke-dasharray: 1, 200;\n      stroke-dashoffset: 0;\n    }\n    50% {\n      stroke-dasharray: 89, 200;\n      stroke-dashoffset: -35px;\n    }\n    100% {\n      stroke-dasharray: 89, 200;\n      stroke-dashoffset: -124px;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .linear-sinus-wave,\n    .circle-wave-indicator {\n      animation: none;\n      transition: none;\n    }\n  }\n`;\n\n","import { html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { MdBaseElement } from '../../internal/base-component.js';\nimport { progressStyles } from './progress.css.js';\n\nexport type ProgressType = 'linear' | 'circular';\n\nexport const WAVY_CIRCLE_PATH =\n  'M 44.000 24.000 C 44.942 25.309, 45.659 26.854, 45.381 28.253 C 45.103 29.652, 43.849 30.805, 42.478 31.654 C 41.106 32.502, 39.795 33.121, 39.133 34.111 C 38.471 35.102, 38.401 36.550, 38.142 38.142 C 37.883 39.734, 37.298 41.333, 36.111 42.126 C 34.925 42.919, 33.224 42.847, 31.654 42.478 C 30.084 42.108, 28.719 41.618, 27.551 41.850 C 26.382 42.083, 25.309 43.058, 24.000 44.000 C 22.691 44.942, 21.146 45.659, 19.747 45.381 C 18.348 45.103, 17.195 43.849, 16.346 42.478 C 15.498 41.106, 14.879 39.795, 13.889 39.133 C 12.898 38.471, 11.450 38.401, 9.858 38.142 C 8.266 37.883, 6.667 37.298, 5.874 36.111 C 5.081 34.925, 5.153 33.224, 5.522 31.654 C 5.892 30.084, 6.382 28.719, 6.150 27.551 C 5.917 26.382, 4.942 25.309, 4.000 24.000 C 3.058 22.691, 2.341 21.146, 2.619 19.747 C 2.897 18.348, 4.151 17.195, 5.522 16.346 C 6.894 15.498, 8.205 14.879, 8.867 13.889 C 9.529 12.898, 9.599 11.450, 9.858 9.858 C 10.117 8.266, 10.702 6.667, 11.889 5.874 C 13.075 5.081, 14.776 5.153, 16.346 5.522 C 17.916 5.892, 19.281 6.382, 20.449 6.150 C 21.618 5.917, 22.691 4.942, 24.000 4.000 C 25.309 3.058, 26.854 2.341, 28.253 2.619 C 29.652 2.897, 30.805 4.151, 31.654 5.522 C 32.502 6.894, 33.121 8.205, 34.111 8.867 C 35.102 9.529, 36.550 9.599, 38.142 9.858 C 39.734 10.117, 41.333 10.702, 42.126 11.889 C 42.919 13.075, 42.847 14.776, 42.478 16.346 C 42.108 17.916, 41.618 19.281, 41.850 20.449 C 42.083 21.618, 43.058 22.691, 44.000 24.000 Z';\n\n@customElement('md-progress')\nexport class MdProgress extends MdBaseElement {\n  static override styles = [MdBaseElement.styles, progressStyles];\n\n  @property({ type: String, reflect: true })\n  type: ProgressType = 'linear';\n\n  @property({ type: Number })\n  value: number | null = null;\n\n  @property({ type: Number })\n  max = 1;\n\n  @property({ type: Number })\n  buffer = 1;\n\n  @property({ type: Boolean, reflect: true })\n  indeterminate = true;\n\n  @property({ type: Boolean })\n  wavy = true;\n\n  override willUpdate(changedProperties: Map<string, unknown>) {\n    super.willUpdate(changedProperties);\n    if (changedProperties.has('value')) {\n      this.indeterminate = this.value === null || this.value === undefined;\n    } else if (this.value !== null && this.value !== undefined && !changedProperties.has('indeterminate')) {\n      this.indeterminate = false;\n    }\n\n    if (!this.indeterminate && this.value !== null && this.value !== undefined) {\n      this.setAttribute('aria-valuenow', String(this.value));\n    } else {\n      this.removeAttribute('aria-valuenow');\n    }\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'progressbar');\n    this.setAttribute('aria-valuemin', '0');\n    this.setAttribute('aria-valuemax', String(this.max));\n  }\n\n  override render() {\n    const maxVal = this.max || 1;\n    const fraction = this.value !== null && this.value !== undefined ? Math.min(Math.max(this.value / maxVal, 0), 1) : 0;\n    const bufferFraction = Math.min(Math.max((this.buffer ?? 1) / maxVal, 0), 1);\n    const hasValue = !this.indeterminate && this.value !== null && this.value !== undefined;\n    const isWavy = this.wavy && hasValue;\n\n    if (this.type === 'circular') {\n      const radius = 20;\n      const circumference = 2 * Math.PI * radius;\n      const offset = circumference - fraction * circumference;\n\n      if (isWavy) {\n        return html`\n          <svg viewBox=\"0 0 48 48\">\n            <circle class=\"circle-track\" cx=\"24\" cy=\"24\" r=${radius}></circle>\n            <path\n              class=\"circle-wave-indicator\"\n              d=${WAVY_CIRCLE_PATH}\n              pathLength=\"100\"\n              stroke-dasharray=\"100\"\n              stroke-dashoffset=${(1 - fraction) * 100}\n            ></path>\n          </svg>\n        `;\n      }\n\n      return html`\n        <svg viewBox=\"0 0 48 48\">\n          <circle class=\"circle-track\" cx=\"24\" cy=\"24\" r=${radius}></circle>\n          <circle\n            class=\"circle-indicator\"\n            cx=\"24\"\n            cy=\"24\"\n            r=${radius}\n            stroke-dasharray=${this.indeterminate ? nothing : `${circumference}`}\n            stroke-dashoffset=${this.indeterminate ? nothing : `${offset}`}\n          ></circle>\n        </svg>\n      `;\n    }\n\n    // Linear progress\n    const progressPercent = fraction * 100;\n    const bufferPercent = bufferFraction * 100;\n\n    if (isWavy) {\n      return html`\n        <div\n          class=\"linear-track-bg\"\n          style=\"clip-path: inset(0 0 0 ${progressPercent}%);\"\n        >\n          ${this.buffer < 1 ? html`<div class=\"linear-buffer\" style=\"width: ${bufferPercent}%\"></div>` : nothing}\n        </div>\n        <div class=\"linear-sinus-wave\" style=\"width: ${progressPercent}%\"></div>\n      `;\n    }\n\n    return html`\n      <div class=\"linear-track-bg\">\n        ${this.buffer < 1 ? html`<div class=\"linear-buffer\" style=\"width: ${bufferPercent}%\"></div>` : nothing}\n        <div\n          class=\"linear-bar\"\n          style=${this.indeterminate ? '' : `transform: scaleX(${fraction})`}\n        ></div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-progress': MdProgress;\n  }\n}\n\n"],"mappings":"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"}