widgies 0.1.0

package/dist/timer.js

@@ -0,0 +1,153 @@
+import{a as r}from"./chunk-3F3FJ7VN.js";var n=class extends r{constructor(){super(...arguments);this.display=null;this.playButton=null;this.resetButton=null;this.minutesInput=null;this.secondsInput=null;this.totalSeconds=0;this.remainingSeconds=0;this.isRunning=!1;this.intervalId=null}render(){this.shadow.innerHTML="";let t=this.createStyleSheet();t&&this.shadow.appendChild(t);let e=parseInt(this.getAttribute("minutes")||"0"),i=parseInt(this.getAttribute("seconds")||"0");(e>0||i>0)&&(this.totalSeconds=e*60+i,this.remainingSeconds=this.totalSeconds);let s=document.createElement("div");s.innerHTML=`
+      <div class="timer" role="timer" aria-label="Countdown timer">
+        <div class="time-inputs">
+          <label>
+            Minutes:
+            <input type="number" class="minutes-input" min="0" max="99" value="${e}" aria-label="Minutes">
+          </label>
+          <label>
+            Seconds:
+            <input type="number" class="seconds-input" min="0" max="59" value="${i}" aria-label="Seconds">
+          </label>
+        </div>
+        
+        <div class="display" aria-live="polite" aria-label="Time remaining">
+          ${this.formatTime(this.remainingSeconds)}
+        </div>
+        
+        <div class="controls">
+          <button class="play-btn" aria-label="Start or pause timer">
+            <span class="play-icon">\u25B6</span>
+            <span class="pause-icon" style="display: none">\u23F8</span>
+          </button>
+          <button class="reset-btn" aria-label="Reset timer">\u23F9</button>
+        </div>
+        
+        <div class="progress-bar">
+          <div class="progress-fill" style="width: ${this.getProgressPercentage()}%"></div>
+        </div>
+      </div>
+    `,this.shadow.appendChild(s),this.display=this.shadow.querySelector(".display"),this.playButton=this.shadow.querySelector(".play-btn"),this.resetButton=this.shadow.querySelector(".reset-btn"),this.minutesInput=this.shadow.querySelector(".minutes-input"),this.secondsInput=this.shadow.querySelector(".seconds-input")}attachEventListeners(){this.playButton?.addEventListener("click",()=>{this.toggleTimer()}),this.resetButton?.addEventListener("click",()=>{this.resetTimer()}),this.minutesInput?.addEventListener("input",()=>{this.updateTimeFromInputs()}),this.secondsInput?.addEventListener("input",()=>{this.updateTimeFromInputs()}),this.addEventListener("keydown",t=>{t.key===" "?(t.preventDefault(),this.toggleTimer()):(t.key==="r"||t.key==="R")&&(t.preventDefault(),this.resetTimer())})}updateTimeFromInputs(){if(!this.minutesInput||!this.secondsInput||this.isRunning)return;let t=Math.max(0,Math.min(99,parseInt(this.minutesInput.value)||0)),e=Math.max(0,Math.min(59,parseInt(this.secondsInput.value)||0));this.minutesInput.value=t.toString(),this.secondsInput.value=e.toString(),this.totalSeconds=t*60+e,this.remainingSeconds=this.totalSeconds,this.updateDisplay()}toggleTimer(){this.remainingSeconds<=0&&!this.isRunning&&(this.updateTimeFromInputs(),this.remainingSeconds<=0)||(this.isRunning?this.pauseTimer():this.startTimer())}startTimer(){this.remainingSeconds<=0||(this.isRunning=!0,this.updateButtonStates(),this.intervalId=window.setInterval(()=>{this.remainingSeconds--,this.updateDisplay(),this.remainingSeconds<=0&&this.completeTimer()},1e3),this.dispatchEvent(new CustomEvent("timer-started",{detail:{remainingSeconds:this.remainingSeconds},bubbles:!0})))}pauseTimer(){this.isRunning=!1,this.intervalId&&(clearInterval(this.intervalId),this.intervalId=null),this.updateButtonStates(),this.dispatchEvent(new CustomEvent("timer-paused",{detail:{remainingSeconds:this.remainingSeconds},bubbles:!0}))}resetTimer(){this.pauseTimer(),this.updateTimeFromInputs(),this.updateDisplay(),this.dispatchEvent(new CustomEvent("timer-reset",{detail:{totalSeconds:this.totalSeconds},bubbles:!0}))}completeTimer(){this.isRunning=!1,this.remainingSeconds=0,this.intervalId&&(clearInterval(this.intervalId),this.intervalId=null),this.updateDisplay(),this.updateButtonStates(),this.dispatchEvent(new CustomEvent("timer-complete",{detail:{totalSeconds:this.totalSeconds},bubbles:!0})),this.shadow.querySelector(".timer")?.classList.add("completed"),"Notification"in window&&new Notification("Timer Complete!",{body:"Your countdown timer has finished.",icon:'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="%236c4cff"/><path d="M9 12l2 2 4-4" stroke="white" stroke-width="2" fill="none"/></svg>'})}updateDisplay(){this.display&&(this.display.textContent=this.formatTime(this.remainingSeconds)),this.updateProgressBar()}updateProgressBar(){let t=this.shadow.querySelector(".progress-fill");t&&(t.style.width=`${this.getProgressPercentage()}%`)}getProgressPercentage(){return this.totalSeconds===0?0:Math.max(0,this.remainingSeconds/this.totalSeconds*100)}updateButtonStates(){let t=this.shadow.querySelector(".play-icon"),e=this.shadow.querySelector(".pause-icon");t&&e&&(this.isRunning?(t.style.display="none",e.style.display="inline"):(t.style.display="inline",e.style.display="none")),this.minutesInput&&this.secondsInput&&(this.minutesInput.disabled=this.isRunning,this.secondsInput.disabled=this.isRunning)}formatTime(t){let e=Math.floor(t/60),i=t%60;return`${e.toString().padStart(2,"0")}:${i.toString().padStart(2,"0")}`}static get observedAttributes(){return["minutes","seconds"]}attributeChangedCallback(t,e,i){if((t==="minutes"||t==="seconds")&&!this.isRunning){let s=parseInt(this.getAttribute("minutes")||"0"),a=parseInt(this.getAttribute("seconds")||"0");this.totalSeconds=s*60+a,this.remainingSeconds=this.totalSeconds,this.minutesInput&&(this.minutesInput.value=s.toString()),this.secondsInput&&(this.secondsInput.value=a.toString()),this.updateDisplay()}}disconnectedCallback(){super.disconnectedCallback(),this.intervalId&&clearInterval(this.intervalId)}getStyles(){return`
+      ${this.getBaseStyles()}
+
+      .timer {
+        width: 300px;
+        text-align: center;
+        transition: all 0.3s ease;
+      }
+
+      .timer.completed {
+        animation: pulse 0.5s ease-in-out;
+      }
+
+      @keyframes pulse {
+        0%, 100% { transform: scale(1); }
+        50% { transform: scale(1.05); }
+      }
+
+      .time-inputs {
+        display: flex;
+        gap: 1rem;
+        margin-bottom: 1rem;
+        justify-content: center;
+      }
+
+      .time-inputs label {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        font-size: 0.9rem;
+        font-weight: 500;
+      }
+
+      .time-inputs input {
+        width: 80px;
+        padding: 0.5rem;
+        margin-top: 0.25rem;
+        border: 1px solid color-mix(in srgb, var(--widgies-text, var(--widgies-text-light, #1a1a1a)) 30%, transparent);
+        border-radius: calc(var(--widgies-radius, 0.5rem) * 0.5);
+        background: var(--widgies-surface, var(--widgies-surface-light, #ffffffe6));
+        color: var(--widgies-text, var(--widgies-text-light, #1a1a1a));
+        font: inherit;
+        text-align: center;
+      }
+
+      .time-inputs input:focus {
+        outline: 2px solid var(--widgies-accent, var(--widgies-accent-light, #6c4cff));
+        outline-offset: 1px;
+      }
+
+      .time-inputs input:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      .display {
+        background: color-mix(in srgb, var(--widgies-surface, var(--widgies-surface-light, #ffffffe6)) 70%, var(--widgies-text, var(--widgies-text-light, #1a1a1a)));
+        color: var(--widgies-text, var(--widgies-text-light, #1a1a1a));
+        padding: 2rem;
+        margin: 1rem 0;
+        border-radius: var(--widgies-radius, 0.5rem);
+        font-size: 3rem;
+        font-weight: bold;
+        font-family: 'Courier New', monospace;
+        letter-spacing: 0.1em;
+      }
+
+      .controls {
+        display: flex;
+        gap: 1rem;
+        justify-content: center;
+        margin-bottom: 1rem;
+      }
+
+      .controls button {
+        width: 60px;
+        height: 60px;
+        border-radius: 50%;
+        font-size: 1.5rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0;
+      }
+
+      .progress-bar {
+        height: 8px;
+        background: color-mix(in srgb, var(--widgies-text, var(--widgies-text-light, #1a1a1a)) 20%, transparent);
+        border-radius: 4px;
+        overflow: hidden;
+      }
+
+      .progress-fill {
+        height: 100%;
+        background: var(--widgies-accent, var(--widgies-accent-light, #6c4cff));
+        transition: width 0.5s ease;
+        border-radius: 4px;
+      }
+
+      @media (prefers-color-scheme: dark) {
+        .time-inputs input {
+          background: var(--widgies-surface, var(--widgies-surface-dark, #181824e6));
+          color: var(--widgies-text, var(--widgies-text-dark, #f5f5ff));
+          border-color: color-mix(in srgb, var(--widgies-text, var(--widgies-text-dark, #f5f5ff)) 30%, transparent);
+        }
+
+        .time-inputs input:focus {
+          outline-color: var(--widgies-accent, var(--widgies-accent-dark, #a88bff));
+        }
+
+        .display {
+          background: color-mix(in srgb, var(--widgies-surface, var(--widgies-surface-dark, #181824e6)) 70%, var(--widgies-text, var(--widgies-text-dark, #f5f5ff)));
+          color: var(--widgies-text, var(--widgies-text-dark, #f5f5ff));
+        }
+
+        .progress-bar {
+          background: color-mix(in srgb, var(--widgies-text, var(--widgies-text-dark, #f5f5ff)) 20%, transparent);
+        }
+
+        .progress-fill {
+          background: var(--widgies-accent, var(--widgies-accent-dark, #a88bff));
+        }
+      }
+    `}};function o(){customElements.get("widgies-timer")||customElements.define("widgies-timer",n)}o();export{n as TimerWidget,o as register};

package/dist/timer.min.js

@@ -0,0 +1,153 @@
+import{a as r}from"./chunk-BP7C5X5K.min.js";var n=class extends r{constructor(){super(...arguments);this.display=null;this.playButton=null;this.resetButton=null;this.minutesInput=null;this.secondsInput=null;this.totalSeconds=0;this.remainingSeconds=0;this.isRunning=!1;this.intervalId=null}render(){this.shadow.innerHTML="";let t=this.createStyleSheet();t&&this.shadow.appendChild(t);let e=parseInt(this.getAttribute("minutes")||"0"),i=parseInt(this.getAttribute("seconds")||"0");(e>0||i>0)&&(this.totalSeconds=e*60+i,this.remainingSeconds=this.totalSeconds);let s=document.createElement("div");s.innerHTML=`
+      <div class="timer" role="timer" aria-label="Countdown timer">
+        <div class="time-inputs">
+          <label>
+            Minutes:
+            <input type="number" class="minutes-input" min="0" max="99" value="${e}" aria-label="Minutes">
+          </label>
+          <label>
+            Seconds:
+            <input type="number" class="seconds-input" min="0" max="59" value="${i}" aria-label="Seconds">
+          </label>
+        </div>
+        
+        <div class="display" aria-live="polite" aria-label="Time remaining">
+          ${this.formatTime(this.remainingSeconds)}
+        </div>
+        
+        <div class="controls">
+          <button class="play-btn" aria-label="Start or pause timer">
+            <span class="play-icon">\u25B6</span>
+            <span class="pause-icon" style="display: none">\u23F8</span>
+          </button>
+          <button class="reset-btn" aria-label="Reset timer">\u23F9</button>
+        </div>
+        
+        <div class="progress-bar">
+          <div class="progress-fill" style="width: ${this.getProgressPercentage()}%"></div>
+        </div>
+      </div>
+    `,this.shadow.appendChild(s),this.display=this.shadow.querySelector(".display"),this.playButton=this.shadow.querySelector(".play-btn"),this.resetButton=this.shadow.querySelector(".reset-btn"),this.minutesInput=this.shadow.querySelector(".minutes-input"),this.secondsInput=this.shadow.querySelector(".seconds-input")}attachEventListeners(){this.playButton?.addEventListener("click",()=>{this.toggleTimer()}),this.resetButton?.addEventListener("click",()=>{this.resetTimer()}),this.minutesInput?.addEventListener("input",()=>{this.updateTimeFromInputs()}),this.secondsInput?.addEventListener("input",()=>{this.updateTimeFromInputs()}),this.addEventListener("keydown",t=>{t.key===" "?(t.preventDefault(),this.toggleTimer()):(t.key==="r"||t.key==="R")&&(t.preventDefault(),this.resetTimer())})}updateTimeFromInputs(){if(!this.minutesInput||!this.secondsInput||this.isRunning)return;let t=Math.max(0,Math.min(99,parseInt(this.minutesInput.value)||0)),e=Math.max(0,Math.min(59,parseInt(this.secondsInput.value)||0));this.minutesInput.value=t.toString(),this.secondsInput.value=e.toString(),this.totalSeconds=t*60+e,this.remainingSeconds=this.totalSeconds,this.updateDisplay()}toggleTimer(){this.remainingSeconds<=0&&!this.isRunning&&(this.updateTimeFromInputs(),this.remainingSeconds<=0)||(this.isRunning?this.pauseTimer():this.startTimer())}startTimer(){this.remainingSeconds<=0||(this.isRunning=!0,this.updateButtonStates(),this.intervalId=window.setInterval(()=>{this.remainingSeconds--,this.updateDisplay(),this.remainingSeconds<=0&&this.completeTimer()},1e3),this.dispatchEvent(new CustomEvent("timer-started",{detail:{remainingSeconds:this.remainingSeconds},bubbles:!0})))}pauseTimer(){this.isRunning=!1,this.intervalId&&(clearInterval(this.intervalId),this.intervalId=null),this.updateButtonStates(),this.dispatchEvent(new CustomEvent("timer-paused",{detail:{remainingSeconds:this.remainingSeconds},bubbles:!0}))}resetTimer(){this.pauseTimer(),this.updateTimeFromInputs(),this.updateDisplay(),this.dispatchEvent(new CustomEvent("timer-reset",{detail:{totalSeconds:this.totalSeconds},bubbles:!0}))}completeTimer(){this.isRunning=!1,this.remainingSeconds=0,this.intervalId&&(clearInterval(this.intervalId),this.intervalId=null),this.updateDisplay(),this.updateButtonStates(),this.dispatchEvent(new CustomEvent("timer-complete",{detail:{totalSeconds:this.totalSeconds},bubbles:!0})),this.shadow.querySelector(".timer")?.classList.add("completed"),"Notification"in window&&new Notification("Timer Complete!",{body:"Your countdown timer has finished.",icon:'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="%236c4cff"/><path d="M9 12l2 2 4-4" stroke="white" stroke-width="2" fill="none"/></svg>'})}updateDisplay(){this.display&&(this.display.textContent=this.formatTime(this.remainingSeconds)),this.updateProgressBar()}updateProgressBar(){let t=this.shadow.querySelector(".progress-fill");t&&(t.style.width=`${this.getProgressPercentage()}%`)}getProgressPercentage(){return this.totalSeconds===0?0:Math.max(0,this.remainingSeconds/this.totalSeconds*100)}updateButtonStates(){let t=this.shadow.querySelector(".play-icon"),e=this.shadow.querySelector(".pause-icon");t&&e&&(this.isRunning?(t.style.display="none",e.style.display="inline"):(t.style.display="inline",e.style.display="none")),this.minutesInput&&this.secondsInput&&(this.minutesInput.disabled=this.isRunning,this.secondsInput.disabled=this.isRunning)}formatTime(t){let e=Math.floor(t/60),i=t%60;return`${e.toString().padStart(2,"0")}:${i.toString().padStart(2,"0")}`}static get observedAttributes(){return["minutes","seconds"]}attributeChangedCallback(t,e,i){if((t==="minutes"||t==="seconds")&&!this.isRunning){let s=parseInt(this.getAttribute("minutes")||"0"),a=parseInt(this.getAttribute("seconds")||"0");this.totalSeconds=s*60+a,this.remainingSeconds=this.totalSeconds,this.minutesInput&&(this.minutesInput.value=s.toString()),this.secondsInput&&(this.secondsInput.value=a.toString()),this.updateDisplay()}}disconnectedCallback(){super.disconnectedCallback(),this.intervalId&&clearInterval(this.intervalId)}getStyles(){return`
+      ${this.getBaseStyles()}
+
+      .timer {
+        width: 300px;
+        text-align: center;
+        transition: all 0.3s ease;
+      }
+
+      .timer.completed {
+        animation: pulse 0.5s ease-in-out;
+      }
+
+      @keyframes pulse {
+        0%, 100% { transform: scale(1); }
+        50% { transform: scale(1.05); }
+      }
+
+      .time-inputs {
+        display: flex;
+        gap: 1rem;
+        margin-bottom: 1rem;
+        justify-content: center;
+      }
+
+      .time-inputs label {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        font-size: 0.9rem;
+        font-weight: 500;
+      }
+
+      .time-inputs input {
+        width: 80px;
+        padding: 0.5rem;
+        margin-top: 0.25rem;
+        border: 1px solid color-mix(in srgb, var(--widgies-text, var(--widgies-text-light, #1a1a1a)) 30%, transparent);
+        border-radius: calc(var(--widgies-radius, 0.5rem) * 0.5);
+        background: var(--widgies-surface, var(--widgies-surface-light, #ffffffe6));
+        color: var(--widgies-text, var(--widgies-text-light, #1a1a1a));
+        font: inherit;
+        text-align: center;
+      }
+
+      .time-inputs input:focus {
+        outline: 2px solid var(--widgies-accent, var(--widgies-accent-light, #6c4cff));
+        outline-offset: 1px;
+      }
+
+      .time-inputs input:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      .display {
+        background: color-mix(in srgb, var(--widgies-surface, var(--widgies-surface-light, #ffffffe6)) 70%, var(--widgies-text, var(--widgies-text-light, #1a1a1a)));
+        color: var(--widgies-text, var(--widgies-text-light, #1a1a1a));
+        padding: 2rem;
+        margin: 1rem 0;
+        border-radius: var(--widgies-radius, 0.5rem);
+        font-size: 3rem;
+        font-weight: bold;
+        font-family: 'Courier New', monospace;
+        letter-spacing: 0.1em;
+      }
+
+      .controls {
+        display: flex;
+        gap: 1rem;
+        justify-content: center;
+        margin-bottom: 1rem;
+      }
+
+      .controls button {
+        width: 60px;
+        height: 60px;
+        border-radius: 50%;
+        font-size: 1.5rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0;
+      }
+
+      .progress-bar {
+        height: 8px;
+        background: color-mix(in srgb, var(--widgies-text, var(--widgies-text-light, #1a1a1a)) 20%, transparent);
+        border-radius: 4px;
+        overflow: hidden;
+      }
+
+      .progress-fill {
+        height: 100%;
+        background: var(--widgies-accent, var(--widgies-accent-light, #6c4cff));
+        transition: width 0.5s ease;
+        border-radius: 4px;
+      }
+
+      @media (prefers-color-scheme: dark) {
+        .time-inputs input {
+          background: var(--widgies-surface, var(--widgies-surface-dark, #181824e6));
+          color: var(--widgies-text, var(--widgies-text-dark, #f5f5ff));
+          border-color: color-mix(in srgb, var(--widgies-text, var(--widgies-text-dark, #f5f5ff)) 30%, transparent);
+        }
+
+        .time-inputs input:focus {
+          outline-color: var(--widgies-accent, var(--widgies-accent-dark, #a88bff));
+        }
+
+        .display {
+          background: color-mix(in srgb, var(--widgies-surface, var(--widgies-surface-dark, #181824e6)) 70%, var(--widgies-text, var(--widgies-text-dark, #f5f5ff)));
+          color: var(--widgies-text, var(--widgies-text-dark, #f5f5ff));
+        }
+
+        .progress-bar {
+          background: color-mix(in srgb, var(--widgies-text, var(--widgies-text-dark, #f5f5ff)) 20%, transparent);
+        }
+
+        .progress-fill {
+          background: var(--widgies-accent, var(--widgies-accent-dark, #a88bff));
+        }
+      }
+    `}};function o(){customElements.get("widgies-timer")||customElements.define("widgies-timer",n)}o();export{n as TimerWidget,o as register};

package/dist/widgets/affirmation.d.ts

@@ -0,0 +1,21 @@
+import { BaseWidget } from '../core/BaseWidget.js';
+export declare class AffirmationWidget extends BaseWidget {
+    private display;
+    private newButton;
+    private intervalId;
+    private autoInterval;
+    private affirmations;
+    private currentAffirmation;
+    protected render(): void;
+    protected attachEventListeners(): void;
+    private getRandomAffirmation;
+    private showNewAffirmation;
+    private startAutoInterval;
+    private stopAutoInterval;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected getStyles(): string;
+}
+export declare function register(): void;

package/dist/widgets/ambient.d.ts

@@ -0,0 +1,34 @@
+import { BaseWidget } from '../core/BaseWidget.js';
+export declare class AmbientWidget extends BaseWidget {
+    private audioContext;
+    private oscillators;
+    private gainNodes;
+    private gainNode;
+    private isPlaying;
+    private currentSound;
+    private playButton;
+    private soundSelect;
+    private volumeSlider;
+    private sounds;
+    protected render(): void;
+    protected attachEventListeners(): void;
+    private initAudioContext;
+    private createWhiteNoise;
+    createRainSound(): AudioBufferSourceNode;
+    createOceanSound(): AudioBufferSourceNode;
+    createForestSound(): AudioBufferSourceNode;
+    createCampfireSound(): AudioBufferSourceNode;
+    private togglePlayback;
+    private playSound;
+    private stopSound;
+    private changeSound;
+    private updateVolume;
+    private updatePlayButton;
+    private updateSoundDisplay;
+    private updateStatus;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    disconnectedCallback(): void;
+    protected getStyles(): string;
+}
+export declare function register(): void;

package/dist/widgets/calculator.d.ts

@@ -0,0 +1,18 @@
+import { BaseWidget } from '../core/BaseWidget.js';
+export declare class CalculatorWidget extends BaseWidget {
+    private display;
+    private currentValue;
+    private previousValue;
+    private operator;
+    private waitingForOperand;
+    protected render(): void;
+    protected attachEventListeners(): void;
+    private inputNumber;
+    private inputOperator;
+    private calculate;
+    private performCalculation;
+    private clear;
+    private updateDisplay;
+    protected getStyles(): string;
+}
+export declare function register(): void;

package/dist/widgets/qr-code.d.ts

@@ -0,0 +1,22 @@
+import { BaseWidget } from '../core/BaseWidget.js';
+export declare class QRCodeWidget extends BaseWidget {
+    private textInput;
+    private generateButton;
+    private qrDisplay;
+    private downloadButton;
+    protected render(): void;
+    protected attachEventListeners(): void;
+    protected handleActivation(event: KeyboardEvent): void;
+    private validateInput;
+    private generateQRCode;
+    private createQRCode;
+    private renderQRCode;
+    private downloadQRCode;
+    private showError;
+    private showLoading;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    connectedCallback(): void;
+    protected getStyles(): string;
+}
+export declare function register(): void;

package/dist/widgets/random-number.d.ts

@@ -0,0 +1,17 @@
+import { BaseWidget } from '../core/BaseWidget.js';
+export declare class RandomNumberWidget extends BaseWidget {
+    private display;
+    private generateButton;
+    private minInput;
+    private maxInput;
+    protected render(): void;
+    protected attachEventListeners(): void;
+    private validateInputs;
+    private generateRandomNumber;
+    private cryptoRandomInt;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    connectedCallback(): void;
+    protected getStyles(): string;
+}
+export declare function register(): void;

package/dist/widgets/timer.d.ts

@@ -0,0 +1,30 @@
+import { BaseWidget } from '../core/BaseWidget.js';
+export declare class TimerWidget extends BaseWidget {
+    private display;
+    private playButton;
+    private resetButton;
+    private minutesInput;
+    private secondsInput;
+    private totalSeconds;
+    private remainingSeconds;
+    private isRunning;
+    private intervalId;
+    protected render(): void;
+    protected attachEventListeners(): void;
+    private updateTimeFromInputs;
+    private toggleTimer;
+    private startTimer;
+    private pauseTimer;
+    private resetTimer;
+    private completeTimer;
+    private updateDisplay;
+    private updateProgressBar;
+    private getProgressPercentage;
+    private updateButtonStates;
+    private formatTime;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    disconnectedCallback(): void;
+    protected getStyles(): string;
+}
+export declare function register(): void;