@sky.ui/core 0.0.1

package/dist/sky-pagination/sky-pagination.js

@@ -0,0 +1,453 @@
+import{__decorate as t,__metadata as r}from"tslib";import{LitElement as i,css as a,html as e}from"lit";import{property as s,state as o,query as n,customElement as l}from"lit/decorators.js";import{when as d}from"lit/directives/when.js";import{repeat as p}from"lit/directives/repeat.js";import{classMap as c}from"lit/directives/class-map.js";import{PopoverController as g}from"../helper/controllers/popover-controller.js";import{SkyIcon as u}from"../sky-icon/sky-icon.js";let h=class extends i{constructor(){super(...arguments),this.totalPages=5,this.currentPage=1,this.disabledPages=[],this.loading=!1,this.showProgressBar=!1,this.variant="default",this.ellipsisEditIndex=null,this.ellipsisInputValue="",this.maxVisiblePage=5,this.dropdownOpen=!1,this.dropdownPop=new g(this,{getAnchor:()=>this.dropdownBtn??null,getPopover:()=>this.dropdownMenu??null,cssVarLeft:"--sky-pg-left",cssVarTop:"--sky-pg-top",cssVarWidth:"--sky-pg-width",placement:"bottom",align:"center",matchAnchorWidth:!0,maxWidthToViewport:!0,maxWidthMode:"cap",restoreFocusOnClose:!0,closeOnEscape:!0,closeOnOutside:!0,onOpenChange:t=>{this.dropdownOpen=t}})}static{this.dependencies={"sky-icon":u}}static{this.styles=a`
+    :host {
+      display: block;
+      width: fit-content;
+      max-width: 100%;
+      font-family: var(--sky-font);
+    }
+
+    .wrap {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+      width: fit-content;
+      max-width: 100%;
+      gap: var(--sky-space-2);
+    }
+
+    .block {
+      position: relative;
+    }
+
+    .overlay {
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      background: color-mix(
+        in oklab,
+        var(--sky-glass-primary) 60%,
+        transparent
+      );
+      backdrop-filter: var(--sky-blur-primary) var(--sky-brightness-primary)
+        var(--sky-saturation-primary);
+      -webkit-backdrop-filter: var(--sky-blur-primary)
+        var(--sky-brightness-primary) var(--sky-saturation-primary);
+      display: none;
+      z-index: 5;
+    }
+    :host([loading]) .block > .overlay {
+      display: block;
+    }
+
+    .overlay-spinner {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: var(--sky-space-5);
+      height: var(--sky-space-5);
+      transform: translate(-50%, -50%);
+      border-radius: var(--sky-radius-full);
+      border: 2px solid rgba(0, 0, 0, 0.15);
+      border-top-color: var(--sky-active-primary);
+      animation: spin 0.8s linear infinite;
+    }
+
+    @keyframes spin {
+      to {
+        transform: translate(-50%, -50%) rotate(360deg);
+      }
+    }
+
+    :host([loading]) .block {
+      pointer-events: none;
+      filter: saturate(0.8) opacity(0.8);
+    }
+
+    sky-icon {
+      display: inline-block;
+      width: 1em;
+      height: 1em;
+    }
+
+    .pagination {
+      display: flex;
+      gap: var(--sky-space-2);
+      width: max-content;
+      max-width: 100%;
+      position: relative;
+      height: var(--sky-space-8);
+      background: var(--sky-glass-primary);
+      box-shadow: var(--sky-box-shadow-primary);
+      border: var(--sky-border-primary);
+      border-radius: var(--sky-radius-secondary);
+      overflow: hidden;
+    }
+    .pagination::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      backdrop-filter: var(--sky-blur-primary) var(--sky-brightness-primary)
+        var(--sky-saturation-primary);
+      -webkit-backdrop-filter: var(--sky-blur-primary)
+        var(--sky-brightness-primary) var(--sky-saturation-primary);
+      z-index: -1;
+      border-radius: inherit;
+    }
+
+    .page-input {
+      width: var(--sky-space-8);
+      height: var(--sky-space-8);
+      border-radius: var(--sky-radius-secondary);
+      padding: 0;
+      flex-shrink: 0;
+      border: none;
+      background: transparent;
+      color: var(--sky-text-primary);
+      font-size: var(--sky-font-size-md);
+      font-family: var(--sky-font);
+      text-align: center;
+      outline: none;
+      transition: all 0.3s ease-in-out;
+    }
+    .page-input:focus {
+      box-shadow: var(--sky-box-shadow-primary);
+    }
+    .page-input::-webkit-outer-spin-button,
+    .page-input::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+
+    .page-button,
+    .arrow-button {
+      width: var(--sky-space-8);
+      height: var(--sky-space-8);
+      flex-shrink: 0;
+      background-color: transparent;
+      border-radius: var(--sky-radius-secondary);
+      font-size: var(--sky-font-size-md);
+      font-family: var(--sky-font);
+      color: var(--sky-text-primary);
+      cursor: pointer;
+      transition: all 0.3s ease-in-out;
+      display: flex;
+      border: none;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      z-index: 1;
+    }
+
+    :dir(rtl).arrow-button {
+      rotate: 180deg;
+    }
+
+    .page-button:hover,
+    .arrow-button:hover {
+      background-color: var(--sky-glass-primary);
+      border-color: var(--sky-border-light);
+    }
+    .page-button:focus-visible,
+    .arrow-button:focus-visible {
+      background-color: var(--sky-glass-primary);
+      border-color: var(--sky-border-light);
+      outline: none;
+    }
+
+    .page-button.active {
+      background-color: var(--sky-active-primary);
+      color: var(--sky-text-white);
+      transition:
+        background-color 0.4s,
+        transform 0.3s,
+        border-color 0.3s;
+      animation: selectionEffect 0.3s ease-in-out;
+    }
+    .arrow-button.disabled,
+    .page-button.disabled {
+      color: var(--sky-text-secondary);
+      background-color: transparent;
+      cursor: not-allowed;
+      pointer-events: none;
+      opacity: 0.6;
+    }
+
+    @keyframes selectionEffect {
+      0% {
+        background-color: var(--sky-glass-primary);
+        transform: scale(0.8);
+        opacity: 0.6;
+      }
+      100% {
+        background-color: var(--sky-active-primary);
+        transform: scale(1);
+        opacity: 1;
+      }
+    }
+
+    sky-icon {
+      font-size: var(--sky-font-size-xl);
+    }
+
+    .dropdown-pagination {
+      display: flex;
+      align-items: center;
+      gap: var(--sky-space-2);
+      position: relative;
+      border-radius: var(--sky-radius-secondary);
+      background: var(--sky-glass-primary);
+      box-shadow: var(--sky-box-shadow-primary);
+      border: var(--sky-border-primary);
+    }
+    .dropdown-pagination::before {
+      content: "";
+      position: absolute;
+      inset: 0;
+      backdrop-filter: var(--sky-blur-primary) var(--sky-brightness-primary)
+        var(--sky-saturation-primary);
+      -webkit-backdrop-filter: var(--sky-blur-primary)
+        var(--sky-brightness-primary) var(--sky-saturation-primary);
+      z-index: -1;
+      border-radius: inherit;
+    }
+    .dropdown-button {
+      border: none;
+      color: var(--sky-text-primary);
+      background-color: transparent;
+      padding: var(--sky-space-1) var(--sky-space-3);
+      border-radius: var(--sky-radius-secondary);
+      cursor: pointer;
+      width: var(--sky-space-12);
+      position: relative;
+      font-family: var(--sky-font);
+    }
+    .dropdown-button:focus-visible {
+      outline: 1px solid var(--sky-active-primary);
+    }
+
+    .dropdown-menu {
+      position: fixed;
+      width: var(--sky-pg-width, var(--sky-space-12));
+      left: var(--sky-pg-left, 0px);
+      margin: 0;
+      top: var(--sky-pg-top, 0px);
+      max-height: 250px;
+      overflow: auto;
+      background: var(--sky-glass-primary);
+      backdrop-filter: var(--sky-blur-primary) var(--sky-brightness-primary)
+        var(--sky-saturation-primary);
+      -webkit-backdrop-filter: var(--sky-blur-primary)
+        var(--sky-brightness-primary) var(--sky-saturation-primary);
+      box-shadow: var(--sky-box-shadow-primary);
+      border-radius: var(--sky-radius-secondary);
+      border: var(--sky-border-primary);
+      padding: var(--sky-space-1);
+    }
+
+    .dropdown-menu::-webkit-scrollbar {
+      width: 4px;
+      height: 4px;
+    }
+
+    .dropdown-menu::-webkit-scrollbar-thumb {
+      background-color: var(--sky-text-tertiary);
+      border-radius: 4px;
+      transition: background-color 0.3s ease-in-out;
+
+      cursor: grab;
+    }
+
+    .dropdown-menu::-webkit-scrollbar-thumb:hover {
+      background-color: var(--sky-text-secondary);
+      transition: background-color 0.3s ease-in-out;
+    }
+
+    .dropdown-menu::-webkit-scrollbar-track {
+      background-color: var(--sky-border-light);
+      border-radius: 4px;
+    }
+
+    .dropdown-menu::-webkit-scrollbar-button {
+      background-color: transparent;
+    }
+
+    .dropdown-menu button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: transparent;
+      border: 1px solid transparent;
+      padding: var(--sky-space-2);
+      color: var(--sky-text-primary);
+      cursor: pointer;
+      width: 100%;
+      text-align: center;
+      font-size: var(--sky-font-size-md);
+      font-family: var(--sky-font);
+      height: var(--sky-space-8);
+      transition: all 0.3s ease;
+    }
+    .dropdown-menu button.disabled {
+      cursor: not-allowed;
+      opacity: 0.6;
+    }
+
+    .progress-bar {
+      width: 100%;
+      height: 3px;
+      background-color: var(--sky-glass-primary);
+      border-radius: var(--sky-space-1);
+      overflow: hidden;
+      margin-top: var(--sky-space-3);
+    }
+    .progress-bar-fill {
+      height: 100%;
+      background-color: var(--sky-active-primary);
+      transition: width 0.3s ease-in-out;
+    }
+  `}firstUpdated(){this.dropdownPop.refreshTargets()}updated(t){if(t.has("ellipsisEditIndex")&&null!==this.ellipsisEditIndex){const t=this.renderRoot.querySelector(".page-input");t&&(t.focus(),t.select())}}toggleDropdown(t){this.loading||(t.stopPropagation(),this.dropdownPop.refreshTargets(),this.dropdownPop.open?this.dropdownPop.closePopover("api"):this.dropdownPop.openPopover(),requestAnimationFrame(()=>this.dropdownPop.position?.()))}_isDisabled(t){return!!this.loading||"number"==typeof t&&this.disabledPages.includes(t)}getNextAvailablePage(t){let r=this.currentPage;for(;;){if(r+=t,r<1||r>this.totalPages)return this.currentPage;if(!this.disabledPages.includes(r))return r}}handleArrowClick(t,r){if(this.loading)return;const i=this.getNextAvailablePage(t);this.goToPage(i,r)}goToPage(t,r){this.loading||(r&&r.stopPropagation(),t>=1&&t<=this.totalPages&&!this.disabledPages.includes(t)&&(this.currentPage=t,this.dropdownPop.closePopover("api"),this.dispatchEvent(new CustomEvent("page-change",{detail:{currentPage:this.currentPage},bubbles:!0,composed:!0}))))}nextPage(){this.goToPage(this.currentPage+1)}prevPage(){this.goToPage(this.currentPage-1)}setPage(t){this.goToPage(t)}handleEllipsisInputKey(t){if("Enter"===t.key){const t=Number(this.ellipsisInputValue);!isNaN(t)&&t>=1&&t<=this.totalPages&&!this.disabledPages.includes(t)&&this.goToPage(t),this.ellipsisEditIndex=null,this.ellipsisInputValue=""}else"Escape"===t.key&&(this.ellipsisEditIndex=null,this.ellipsisInputValue="")}handleEllipsisBlur(t){t?.stopPropagation();const r=Number(this.ellipsisInputValue);!isNaN(r)&&r>=1&&r<=this.totalPages&&!this.disabledPages.includes(r)&&this.goToPage(r),this.ellipsisEditIndex=null,this.ellipsisInputValue=""}renderLoadingOverlay(){return d(this.loading,()=>e`
+        <div class="overlay" part="overlay" aria-hidden="false">
+          <div
+            class="overlay-spinner"
+            part="overlay-spinner"
+            aria-label="Loading"
+          ></div>
+        </div>
+      `)}renderRegularPagination(){const t=this.maxVisiblePage,r=[];if(this.totalPages<=t)for(let t=1;t<=this.totalPages;t++)r.push(t);else{let t=Math.max(2,this.currentPage-1),i=Math.min(this.totalPages-1,this.currentPage+1);this.currentPage<=3?(t=2,i=4):this.currentPage>=this.totalPages-2&&(t=this.totalPages-3,i=this.totalPages-1),r.push(1),t>2&&r.push("...");for(let a=t;a<=i;a++)r.push(a);i<this.totalPages-1&&r.push("..."),r.push(this.totalPages)}return r.length>t+2&&(r.length=0,r.push(1,"...",this.currentPage,"...",this.totalPages)),e`
+      <div
+        class="pagination block"
+        part="pagination block"
+        aria-busy="${this.loading?"true":"false"}"
+        aria-disabled="${this.loading?"true":"false"}"
+      >
+        ${this.renderLoadingOverlay()}
+        <button
+          class=${c({"arrow-button":!0,disabled:1===this.currentPage||this.loading})}
+          part="arrow-button"
+          @click="${t=>this.handleArrowClick(-1,t)}"
+          ?disabled="${1===this.currentPage||this.loading}"
+        >
+          <sky-icon icon="ion:chevron-back"></sky-icon>
+        </button>
+
+        <div style="display: flex; overflow: hidden;">
+          ${p(r,(t,r)=>`${r}-${String(t)}`,(t,r)=>"..."===t?e`
+                    <div style="display:flex;align-items:center;">
+                      ${d(this.ellipsisEditIndex===r&&!this.loading,()=>e`
+                          <input
+                            type="number"
+                            class="page-input"
+                            part="page-input"
+                            min="1"
+                            max="${this.totalPages}"
+                            .value="${this.ellipsisInputValue}"
+                            @input="${t=>this.ellipsisInputValue=t.target.value}"
+                            @keydown="${t=>this.handleEllipsisInputKey(t)}"
+                            @blur="${this.handleEllipsisBlur}"
+                            ?disabled="${this.loading}"
+                          />
+                        `,()=>e`
+                          <button
+                            class=${c({"page-button":!0,disabled:this.loading})}
+                            part="page-button ${this.loading?"page-button--disabled":""}"
+                            @click="${()=>{this.loading||(this.ellipsisEditIndex=r,this.ellipsisInputValue="")}}"
+                            ?disabled="${this.loading}"
+                            title="Jump to page"
+                          >
+                            <sky-icon icon="ion:ellipsis-horizontal"></sky-icon>
+                          </button>
+                        `)}
+                    </div>
+                  `:e`
+                    <button
+                      class=${c({"page-button":!0,active:this.currentPage===t,disabled:this._isDisabled(t)})}
+                      part="page-button ${this.currentPage===t?"page-button--active":""} ${this._isDisabled(t)?"page-button--disabled":""}"
+                      @click="${()=>this.goToPage(t)}"
+                      ?disabled="${this._isDisabled(t)}"
+                    >
+                      ${t}
+                    </button>
+                  `)}
+        </div>
+
+        <button
+          class=${c({"arrow-button":!0,disabled:this.currentPage===this.totalPages||this.loading})}
+          part="arrow-button"
+          @click="${t=>this.handleArrowClick(1,t)}"
+          ?disabled="${this.currentPage===this.totalPages||this.loading}"
+        >
+          <sky-icon icon="ion:chevron-forward"></sky-icon>
+        </button>
+      </div>
+    `}render(){const t=this.currentPage/this.totalPages*100,r=Array.from({length:this.totalPages},(t,r)=>r+1);return e`
+      <div class="wrap" part="wrap" role="group" aria-label="Pagination">
+        ${"dropdown"===this.variant?e`
+              <div
+                class="dropdown-pagination block"
+                part="dropdown-pagination block"
+                aria-busy="${this.loading?"true":"false"}"
+                aria-disabled="${this.loading?"true":"false"}"
+              >
+                ${this.renderLoadingOverlay()}
+                <button
+                  class="arrow-button ${1===this.currentPage||this.loading?"disabled":""}"
+                  part="arrow-button"
+                  @click="${()=>this.handleArrowClick(-1)}"
+                  ?disabled="${1===this.currentPage||this.loading}"
+                >
+                  <sky-icon icon="ion:chevron-back"></sky-icon>
+                </button>
+
+                <button
+                  class="dropdown-button"
+                  part="dropdown-button"
+                  @click="${this.toggleDropdown}"
+                  ?disabled="${this.loading}"
+                  aria-expanded="${this.dropdownOpen?"true":"false"}"
+                >
+                  ${this.currentPage}
+                </button>
+
+                <div
+                  class="dropdown-menu"
+                  part="dropdown-menu"
+                  popover="manual"
+                  @toggle=${this.dropdownPop.onToggle}
+                  @click=${t=>t.stopPropagation()}
+                >
+                  ${p(r,t=>String(t),t=>e`
+                      <button
+                        class="page-button ${this.currentPage===t?"active":""} ${this._isDisabled(t)?"disabled":""}"
+                        part="page-button ${this.currentPage===t?"page-button--active":""} ${this._isDisabled(t)?"page-button--disabled":""}"
+                        @click=${r=>this.goToPage(t,r)}
+                        ?disabled=${this._isDisabled(t)}
+                        style="box-shadow:none"
+                      >
+                        ${t}
+                      </button>
+                    `)}
+                </div>
+
+                <button
+                  class="arrow-button ${this.currentPage===this.totalPages||this.loading?"disabled":""}"
+                  part="arrow-button"
+                  @click="${()=>this.handleArrowClick(1)}"
+                  ?disabled="${this.currentPage===this.totalPages||this.loading}"
+                >
+                  <sky-icon icon="ion:chevron-forward"></sky-icon>
+                </button>
+              </div>
+            `:this.renderRegularPagination()}
+        ${d(this.showProgressBar,()=>e`
+          <div class="progress-bar" part="progress-bar">
+            <div
+              class="progress-bar-fill"
+              part="progress-bar-fill"
+              style="width: ${t.toFixed(2)}%;"
+            ></div>
+          </div>
+        `)}
+      </div>
+    `}};t([s({type:Number}),r("design:type",Object)],h.prototype,"totalPages",void 0),t([s({type:Number}),r("design:type",Object)],h.prototype,"currentPage",void 0),t([s({type:Array}),r("design:type",Array)],h.prototype,"disabledPages",void 0),t([s({type:Boolean,reflect:!0}),r("design:type",Object)],h.prototype,"loading",void 0),t([s({type:Boolean}),r("design:type",Object)],h.prototype,"showProgressBar",void 0),t([s({type:String,reflect:!0}),r("design:type",String)],h.prototype,"variant",void 0),t([s({type:Number}),r("design:type",Object)],h.prototype,"ellipsisEditIndex",void 0),t([s({type:String}),r("design:type",Object)],h.prototype,"ellipsisInputValue",void 0),t([s({type:Number}),r("design:type",Object)],h.prototype,"maxVisiblePage",void 0),t([o(),r("design:type",Object)],h.prototype,"dropdownOpen",void 0),t([n(".dropdown-button"),r("design:type",HTMLElement)],h.prototype,"dropdownBtn",void 0),t([n(".dropdown-menu"),r("design:type",HTMLElement)],h.prototype,"dropdownMenu",void 0),h=t([l("sky-pagination")],h);export{h as SkyPagination};
+//# sourceMappingURL=sky-pagination.js.map

package/dist/sky-pagination/sky-pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sky-pagination.js","sources":["../../src/sky-pagination/sky-pagination.ts"],"sourcesContent":[null],"names":["SkyPagination","LitElement","constructor","this","totalPages","currentPage","disabledPages","loading","showProgressBar","variant","ellipsisEditIndex","ellipsisInputValue","maxVisiblePage","dropdownOpen","dropdownPop","PopoverController","getAnchor","dropdownBtn","getPopover","dropdownMenu","cssVarLeft","cssVarTop","cssVarWidth","placement","align","matchAnchorWidth","maxWidthToViewport","maxWidthMode","restoreFocusOnClose","closeOnEscape","closeOnOutside","onOpenChange","open","dependencies","SkyIcon","styles","css","firstUpdated","refreshTargets","updated","changed","has","input","renderRoot","querySelector","focus","select","toggleDropdown","event","stopPropagation","closePopover","openPopover","requestAnimationFrame","position","_isDisabled","page","includes","getNextAvailablePage","direction","handleArrowClick","nextPage","goToPage","dispatchEvent","CustomEvent","detail","bubbles","composed","prevPage","setPage","handleEllipsisInputKey","e","key","Number","isNaN","handleEllipsisBlur","renderLoadingOverlay","when","html","renderRegularPagination","maxVisiblePages","pages","i","push","startPage","Math","max","endPage","min","length","classMap","disabled","repeat","String","target","value","active","render","progressPercentage","pageNumbers","Array","from","_","onToggle","toFixed","__decorate","property","type","prototype","Boolean","reflect","state","query","HTMLElement","customElement"],"mappings":"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"}

package/dist/sky-progress/index.d.ts

@@ -0,0 +1 @@
+export * from "./sky-progress";

package/dist/sky-progress/index.js

@@ -0,0 +1 @@
+export * from './sky-progress.js';

package/dist/sky-progress/sky-progress.d.ts

@@ -0,0 +1,70 @@
+import { LitElement } from "lit";
+export type SkyProgressMode = "determinate" | "indeterminate";
+/**
+ * @element sky-progress
+ *
+ * @summary Linear progress bar with determinate, buffer, and indeterminate modes.
+ *
+ * @status stable
+ * @since 1.0.0
+ *
+ * @documentation https://library.sky-ui.com/components/progress
+ *
+ * @property {number} value - Current progress value.
+ * @property {number} max - Maximum value for progress normalization.
+ * @property {number} buffer - Secondary buffered amount rendered behind progress.
+ * @property {boolean} indeterminate - Enables animated unknown-progress mode.
+ * @property {string} color - Foreground bar color.
+ * @property {string} height - Track height CSS value.
+ * @property {string} radius - Track/bar border radius CSS value.
+ * @property {number} width - Indeterminate bar width percentage.
+ * @property {string} speed - Indeterminate animation duration.
+ *
+ * @csspart container - The outer track container.
+ * @csspart bar - The main progress bar (foreground).
+ * @csspart buffer - The buffer bar.
+ * @csspart indeterminate - The animated bar in indeterminate mode.
+ *
+ * @Behavior
+ * - Renders determinate progress and optional buffer widths from `value`, `buffer`, and `max`.
+ * - Uses LTR/RTL-aware marquee animation when `indeterminate` is true.
+ * - Exposes proper `progressbar` ARIA attributes for accessibility.
+ *
+ * @example
+ * ```html
+ * <sky-progress value="75" max="100" buffer="90" color="var(--sky-success-primary)" height="8px" radius="4px"></sky-progress>
+ * ```
+ * ```vue
+ * <template>
+ *   <sky-progress :value="75" :max="100" :buffer="90" color="var(--sky-success-primary)" height="8px" radius="4px"></sky-progress>
+ * </template>
+ * ```
+ * ```jsx
+ * export default function Demo() {
+ *   return <sky-progress value={75} max={100} buffer={90} color="var(--sky-success-primary)" height="8px" radius="4px"></sky-progress>;
+ * }
+ * ```
+ */
+export declare class SkyProgress extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Current progress value (0..`max`). */
+    value: number;
+    /** Maximum value for progress. */
+    max: number;
+    /** Buffer amount (0..`max`) shown behind the progress bar. */
+    buffer: number;
+    /** Indeterminate mode flag. */
+    indeterminate: boolean;
+    /** Foreground bar color. */
+    color: string;
+    /** Track height (e.g., `4px`). */
+    height: string;
+    /** Corner radius (e.g., `0px`, `8px`). */
+    radius: string;
+    /** Indeterminate bar width (percentage). */
+    width: number;
+    /** Indeterminate animation duration (e.g., `1s`). */
+    speed: string;
+    updated(changedProperties: Map<string, unknown>): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/sky-progress/sky-progress.js

@@ -0,0 +1,87 @@
+import{__decorate as t,__metadata as e}from"tslib";import{LitElement as r,css as i,nothing as s,html as o}from"lit";import{property as a,customElement as p}from"lit/decorators.js";import{when as n}from"lit/directives/when.js";import{styleMap as d}from"lit/directives/style-map.js";import{resolveColor as h}from"../helper/utils/color-resolver.js";import{resolveRadius as l}from"../helper/utils/size-resolver.js";let m=class extends r{constructor(){super(...arguments),this.value=0,this.max=100,this.buffer=0,this.indeterminate=!1,this.color="primary",this.height="4px",this.radius="0px",this.width=40,this.speed="1s"}static{this.styles=i`
+    :host {
+      display: block;
+      width: 100%;
+    }
+    .progress-container {
+      width: 100%;
+      height: var(--progress-height);
+      background-color: var(--sky-hover-primary);
+      overflow: hidden;
+      box-sizing: border-box;
+      position: relative;
+      border-radius: var(--progress-radius);
+    }
+    .progress-bar {
+      height: 100%;
+      position: relative;
+      width: 0%;
+      border-radius: var(--progress-radius);
+      background-color: var(--progress-color);
+      transition: width 0.3s ease-in-out;
+    }
+    .buffer-bar {
+      height: 100%;
+      width: 0%;
+      background-color: var(--sky-hover-tertiary);
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+    .indeterminate {
+      position: absolute;
+      width: var(--progress-width);
+      height: 100%;
+      background-color: var(--progress-color);
+      animation-duration: var(--progress-speed);
+      animation-timing-function: linear;
+      animation-iteration-count: infinite;
+    }
+
+    /* Default LTR animation */
+    @keyframes indeterminate-ltr {
+      from {
+        left: -100%;
+      }
+      to {
+        left: 100%;
+      }
+    }
+
+    /* RTL animation (reversed) */
+    @keyframes indeterminate-rtl {
+      from {
+        left: 100%;
+      }
+      to {
+        left: -100%;
+      }
+    }
+  `}updated(t){t.has("color")&&this.style.setProperty("--progress-color",h(this.color)),t.has("height")&&this.style.setProperty("--progress-height",this.height),t.has("radius")&&this.style.setProperty("--progress-radius",l(this.radius)),t.has("width")&&this.style.setProperty("--progress-width",`${this.width}%`),t.has("speed")&&this.style.setProperty("--progress-speed",this.speed)}render(){const t=this.value/this.max*100,e=this.buffer/this.max*100,r=Math.min(t+e,100),i=Math.min(t,r),a=i+Math.min(e,r-i),p=this.closest('[dir="rtl"]')||"rtl"===document.dir?"indeterminate-rtl":"indeterminate-ltr",h=this.indeterminate?s:Math.max(0,Math.min(this.value,this.max));return o`
+      <div
+        class="progress-container"
+        part="container"
+        role="progressbar"
+        aria-valuemin="0"
+        aria-valuemax="${this.max}"
+        aria-valuenow="${h}"
+      >
+        ${n(this.indeterminate,()=>o`<div
+            class="indeterminate"
+            part="indeterminate"
+            style=${d({animationName:p})}
+          ></div>`,()=>o`
+            <div
+              class="buffer-bar"
+              part="buffer"
+              style=${d({width:`${a}%`})}
+            ></div>
+            <div
+              class="progress-bar"
+              part="bar"
+              style=${d({width:`${i}%`})}
+            ></div>
+          `)}
+      </div>
+    `}};t([a({type:Number}),e("design:type",Object)],m.prototype,"value",void 0),t([a({type:Number}),e("design:type",Object)],m.prototype,"max",void 0),t([a({type:Number}),e("design:type",Object)],m.prototype,"buffer",void 0),t([a({type:Boolean,reflect:!0}),e("design:type",Object)],m.prototype,"indeterminate",void 0),t([a({type:String}),e("design:type",Object)],m.prototype,"color",void 0),t([a({type:String}),e("design:type",Object)],m.prototype,"height",void 0),t([a({type:String}),e("design:type",Object)],m.prototype,"radius",void 0),t([a({type:Number}),e("design:type",Object)],m.prototype,"width",void 0),t([a({type:String}),e("design:type",Object)],m.prototype,"speed",void 0),m=t([p("sky-progress")],m);export{m as SkyProgress};
+//# sourceMappingURL=sky-progress.js.map

package/dist/sky-progress/sky-progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sky-progress.js","sources":["../../src/sky-progress/sky-progress.ts"],"sourcesContent":[null],"names":["SkyProgress","LitElement","constructor","this","value","max","buffer","indeterminate","color","height","radius","width","speed","styles","css","updated","changedProperties","has","style","setProperty","resolveColor","resolveRadius","render","percentage","bufferPercentage","totalWidth","Math","min","progressWidth","bufferWidth","indeterminateAnimation","closest","document","dir","ariaNow","nothing","html","when","styleMap","animationName","__decorate","property","type","Number","prototype","Boolean","reflect","String","customElement"],"mappings":"2ZAuDO,IAAMA,EAAN,cAA0BC,EAA1B,WAAAC,uBA+DuBC,KAAAC,MAAQ,EAERD,KAAAE,IAAM,IAENF,KAAAG,OAAS,EAEOH,KAAAI,eAAgB,EAEhCJ,KAAAK,MAAQ,UAERL,KAAAM,OAAS,MAETN,KAAAO,OAAS,MAETP,KAAAQ,MAAQ,GAERR,KAAAS,MAAQ,IAmEtC,QAjJkBT,KAAAU,OAASC,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2D1B,CAuBO,OAAAC,CAAQC,GACXA,EAAkBC,IAAI,UACxBd,KAAKe,MAAMC,YAAY,mBAAoBC,EAAajB,KAAKK,QAC3DQ,EAAkBC,IAAI,WACxBd,KAAKe,MAAMC,YAAY,oBAAqBhB,KAAKM,QAC/CO,EAAkBC,IAAI,WACxBd,KAAKe,MAAMC,YAAY,oBAAqBE,EAAclB,KAAKO,SAC7DM,EAAkBC,IAAI,UACxBd,KAAKe,MAAMC,YAAY,mBAAoB,GAAGhB,KAAKQ,UACjDK,EAAkBC,IAAI,UACxBd,KAAKe,MAAMC,YAAY,mBAAoBhB,KAAKS,MACpD,CAES,MAAAU,GACP,MAAMC,EAAcpB,KAAKC,MAAQD,KAAKE,IAAO,IACvCmB,EAAoBrB,KAAKG,OAASH,KAAKE,IAAO,IAE9CoB,EAAaC,KAAKC,IAAIJ,EAAaC,EAAkB,KACrDI,EAAgBF,KAAKC,IAAIJ,EAAYE,GACrCI,EACJD,EAAgBF,KAAKC,IAAIH,EAAkBC,EAAaG,GAGpDE,EADQ3B,KAAK4B,QAAQ,gBAAmC,QAAjBC,SAASC,IAElD,oBACA,oBAEEC,EAAU/B,KAAKI,cACjB4B,EACAT,KAAKrB,IAAI,EAAGqB,KAAKC,IAAIxB,KAAKC,MAAOD,KAAKE,MAE1C,OAAO+B,CAAI;;;;;;yBAMUjC,KAAKE;yBACL6B;;UAEfG,EACAlC,KAAKI,cACL,IAAM6B,CAAI;;;oBAGAE,EAAS,CAAEC,cAAeT;mBAEpC,IAAMM,CAAI;;;;sBAIEE,EAAS,CAAE3B,MAAO,GAAGkB;;;;;sBAKrBS,EAAS,CAAE3B,MAAO,GAAGiB;;;;KAMzC,GAlF4BY,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,kCAAoB3C,EAAA4C,UAAA,gBAEVJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,kCAAoB3C,EAAA4C,UAAA,cAEVJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,kCAAqB3C,EAAA4C,UAAA,iBAEKJ,EAAA,CAA3CC,EAAS,CAAEC,KAAMG,QAASC,SAAS,6BAA8B9C,EAAA4C,UAAA,wBAEtCJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMK,kCAA4B/C,EAAA4C,UAAA,gBAElBJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMK,kCAAyB/C,EAAA4C,UAAA,iBAEfJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMK,kCAAyB/C,EAAA4C,UAAA,iBAEfJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMC,kCAAqB3C,EAAA4C,UAAA,gBAEXJ,EAAA,CAA3BC,EAAS,CAAEC,KAAMK,kCAAuB/C,EAAA4C,UAAA,gBA/E9B5C,EAAWwC,EAAA,CADvBQ,EAAc,iBACFhD"}

package/dist/sky-radio/index.d.ts

@@ -0,0 +1 @@
+export * from "./sky-radio";

package/dist/sky-radio/index.js

@@ -0,0 +1 @@
+export * from './sky-radio.js';