widgies 0.1.0 → 0.1.1

package/README.md

@@ -36,18 +36,28 @@ A tiny, zero-dependency set of Web Component widgets you can drop into any web p
 <widgies-timer minutes="25" aria-label="25-minute timer"></widgies-timer>
 ```
 
-## Widgets in v0.1.0
-
-| Tag                       | What it does               | Key attributes      |
-| ------------------------- | -------------------------- | ------------------- |
-| `<widgies-calculator>`    | 4-function calculator      | –                   |
-| `<widgies-random-number>` | Cryptographically safe RNG | `min` `max`         |
-| `<widgies-timer>`         | Countdown / Pomodoro       | `seconds` `minutes` |
-| `<widgies-affirmation>`   | Random positive message    | `interval` (ms)     |
-| `<widgies-qr-code>`       | QR code generator          | `value` `size`      |
-| `<widgies-ambient>`       | Rain, ocean, forest sounds | `sound`             |
-
-All widgets share **theme tokens**, **focus rings**, and **ARIA roles**. Bundle size ≈10 kB gzipped.
+## Available Widgets
+
+| Tag                           | What it does                    | Key attributes        |
+| ----------------------------- | ------------------------------- | --------------------- |
+| `<widgies-calculator>`        | 4-function calculator           | –                     |
+| `<widgies-timer>`             | Countdown / Pomodoro timer      | `minutes` `seconds`   |
+| `<widgies-random-number>`     | Cryptographically safe RNG      | `min` `max`           |
+| `<widgies-qr-code>`           | QR code generator               | `text`                |
+| `<widgies-affirmation>`       | Random positive messages        | `interval` (ms)       |
+| `<widgies-ambient>`           | Nature sounds for focus         | `sound`               |
+| `<widgies-unit-converter>`    | Multi-category unit converter   | –                     |
+| `<widgies-currency-exchange>` | Real-time currency rates        | –                     |
+| `<widgies-color-palette>`     | Color picker and palette tool   | –                     |
+| `<widgies-dad-jokes>`         | Random dad joke generator       | –                     |
+| `<widgies-magic-8-ball>`      | Classic Magic 8-Ball            | –                     |
+| `<widgies-fortune-cookie>`    | Virtual fortune cookies         | –                     |
+| `<widgies-random-image>`      | Curated random images           | –                     |
+| `<widgies-tiny-planet>`       | Animated planet visualization   | –                     |
+
+📖 **[Complete Widgets Reference →](docs/widgets-reference.md)**
+
+All widgets share **theme tokens**, **focus rings**, and **ARIA roles**. Bundle size ≈15 kB gzipped.
 
 ## Installation
 
@@ -63,13 +73,22 @@ import 'widgies';
 import 'widgies/calculator';
 import 'widgies/timer';
 import 'widgies/random-number';
+import 'widgies/qr-code';
 import 'widgies/affirmation';
 import 'widgies/ambient';
-import 'widgies/qr-code';
+import 'widgies/unit-converter';
+import 'widgies/currency-exchange';
+import 'widgies/color-palette';
+import 'widgies/dad-jokes';
+import 'widgies/magic-8-ball';
+import 'widgies/fortune-cookie';
+import 'widgies/random-image';
+import 'widgies/tiny-planet';
 
 // Option 3: Import widget classes for manual registration
-import { CalculatorWidget } from 'widgies';
+import { CalculatorWidget, TimerWidget } from 'widgies';
 CalculatorWidget.register();
+TimerWidget.register();
 ```
 
 Or via CDN:

package/dist/affirmation.js

@@ -12,8 +12,10 @@ import{a as r}from"./chunk-3F3FJ7VN.js";var i=class extends r{constructor(){supe
       ${this.getBaseStyles()}
 
       .affirmation {
-        width: 350px;
+        max-width: 100%;
+        width: 100%;
         text-align: center;
+        box-sizing: border-box;
       }
 
       .display {

package/dist/affirmation.min.js

@@ -12,8 +12,10 @@ import{a as r}from"./chunk-BP7C5X5K.min.js";var i=class extends r{constructor(){
       ${this.getBaseStyles()}
 
       .affirmation {
-        width: 350px;
+        max-width: 100%;
+        width: 100%;
         text-align: center;
+        box-sizing: border-box;
       }
 
       .display {

package/dist/calculator.js

@@ -25,7 +25,7 @@ import{a as i}from"./chunk-3F3FJ7VN.js";var e=class extends i{constructor(){supe
           <button class="btn number" data-action="input" data-number=".">.</button>
         </div>
       </div>
-    `,this.shadow.appendChild(a),this.display=this.shadow.querySelector(".display")}attachEventListeners(){this.shadow.addEventListener("click",t=>{let a=t.target;if(!a.matches("button"))return;let r=a.dataset.action,n=a.dataset.number,o=a.dataset.operator;switch(r){case"input":this.inputNumber(n);break;case"operator":this.inputOperator(o);break;case"calculate":this.calculate();break;case"clear":this.clear();break}})}inputNumber(t){this.waitingForOperand?(this.currentValue=t,this.waitingForOperand=!1):this.currentValue=this.currentValue==="0"?t:this.currentValue+t,this.updateDisplay()}inputOperator(t){let a=parseFloat(this.currentValue);if(this.previousValue==="")this.previousValue=this.currentValue;else if(this.operator){let r=this.performCalculation();this.currentValue=String(r),this.previousValue=this.currentValue,this.updateDisplay()}this.waitingForOperand=!0,this.operator=t}calculate(){if(this.previousValue!==""&&this.operator){let t=this.performCalculation();this.currentValue=String(t),this.previousValue="",this.operator="",this.waitingForOperand=!0,this.updateDisplay()}}performCalculation(){let t=parseFloat(this.previousValue),a=parseFloat(this.currentValue);switch(this.operator){case"+":return t+a;case"-":return t-a;case"*":return t*a;case"/":return a!==0?t/a:0;default:return a}}clear(){this.currentValue="0",this.previousValue="",this.operator="",this.waitingForOperand=!1,this.updateDisplay()}updateDisplay(){this.display&&(this.display.textContent=this.currentValue)}getStyles(){return`
+    `,this.shadow.appendChild(a),this.display=this.shadow.querySelector(".display")}attachEventListeners(){this.shadow.addEventListener("click",t=>{let a=t.target;if(!a.matches("button"))return;let r=a.dataset.action,n=a.dataset.number,o=a.dataset.operator;switch(r){case"input":this.inputNumber(n);break;case"operator":this.inputOperator(o);break;case"calculate":this.calculate();break;case"clear":this.clear();break}})}inputNumber(t){this.waitingForOperand?(this.currentValue=t,this.waitingForOperand=!1):this.currentValue=this.currentValue==="0"?t:this.currentValue+t,this.updateDisplay()}inputOperator(t){this.showOperatorFeedback(t);let a=parseFloat(this.currentValue);if(this.previousValue==="")this.previousValue=this.currentValue;else if(this.operator){let r=this.performCalculation();this.currentValue=String(r),this.previousValue=this.currentValue,this.updateDisplay()}this.waitingForOperand=!0,this.operator=t}calculate(){if(this.previousValue!==""&&this.operator){let t=this.performCalculation();this.currentValue=String(t),this.previousValue="",this.operator="",this.waitingForOperand=!0,this.updateDisplay()}}performCalculation(){let t=parseFloat(this.previousValue),a=parseFloat(this.currentValue);switch(this.operator){case"+":return t+a;case"-":return t-a;case"*":return t*a;case"/":return a!==0?t/a:0;default:return a}}clear(){this.currentValue="0",this.previousValue="",this.operator="",this.waitingForOperand=!1,this.updateDisplay()}updateDisplay(){this.display&&(this.display.textContent=this.currentValue)}showOperatorFeedback(t){let a=this.shadow.querySelector(`[data-operator="${t}"]`);a&&(a.classList.add("pressed"),setTimeout(()=>{a.classList.remove("pressed")},150))}getStyles(){return`
       ${this.getBaseStyles()}
 
       .calculator {
@@ -63,6 +63,13 @@ import{a as i}from"./chunk-3F3FJ7VN.js";var e=class extends i{constructor(){supe
 
       .btn.operator {
         background: color-mix(in srgb, var(--widgies-accent, var(--widgies-accent-light, #6c4cff)) 80%, black);
+        transition: all 0.1s ease;
+      }
+
+      .btn.operator.pressed {
+        background: var(--widgies-accent, var(--widgies-accent-light, #6c4cff));
+        transform: scale(0.95);
+        box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
       }
 
       .btn.equals {
@@ -85,6 +92,10 @@ import{a as i}from"./chunk-3F3FJ7VN.js";var e=class extends i{constructor(){supe
           background: color-mix(in srgb, var(--widgies-accent, var(--widgies-accent-dark, #a88bff)) 80%, white);
         }
 
+        .btn.operator.pressed {
+          background: var(--widgies-accent, var(--widgies-accent-dark, #a88bff));
+        }
+
         .btn.equals {
           background: var(--widgies-accent, var(--widgies-accent-dark, #a88bff));
         }

package/dist/calculator.min.js

@@ -25,7 +25,7 @@ import{a as i}from"./chunk-BP7C5X5K.min.js";var e=class extends i{constructor(){
           <button class="btn number" data-action="input" data-number=".">.</button>
         </div>
       </div>
-    `,this.shadow.appendChild(a),this.display=this.shadow.querySelector(".display")}attachEventListeners(){this.shadow.addEventListener("click",t=>{let a=t.target;if(!a.matches("button"))return;let r=a.dataset.action,n=a.dataset.number,o=a.dataset.operator;switch(r){case"input":this.inputNumber(n);break;case"operator":this.inputOperator(o);break;case"calculate":this.calculate();break;case"clear":this.clear();break}})}inputNumber(t){this.waitingForOperand?(this.currentValue=t,this.waitingForOperand=!1):this.currentValue=this.currentValue==="0"?t:this.currentValue+t,this.updateDisplay()}inputOperator(t){let a=parseFloat(this.currentValue);if(this.previousValue==="")this.previousValue=this.currentValue;else if(this.operator){let r=this.performCalculation();this.currentValue=String(r),this.previousValue=this.currentValue,this.updateDisplay()}this.waitingForOperand=!0,this.operator=t}calculate(){if(this.previousValue!==""&&this.operator){let t=this.performCalculation();this.currentValue=String(t),this.previousValue="",this.operator="",this.waitingForOperand=!0,this.updateDisplay()}}performCalculation(){let t=parseFloat(this.previousValue),a=parseFloat(this.currentValue);switch(this.operator){case"+":return t+a;case"-":return t-a;case"*":return t*a;case"/":return a!==0?t/a:0;default:return a}}clear(){this.currentValue="0",this.previousValue="",this.operator="",this.waitingForOperand=!1,this.updateDisplay()}updateDisplay(){this.display&&(this.display.textContent=this.currentValue)}getStyles(){return`
+    `,this.shadow.appendChild(a),this.display=this.shadow.querySelector(".display")}attachEventListeners(){this.shadow.addEventListener("click",t=>{let a=t.target;if(!a.matches("button"))return;let r=a.dataset.action,n=a.dataset.number,o=a.dataset.operator;switch(r){case"input":this.inputNumber(n);break;case"operator":this.inputOperator(o);break;case"calculate":this.calculate();break;case"clear":this.clear();break}})}inputNumber(t){this.waitingForOperand?(this.currentValue=t,this.waitingForOperand=!1):this.currentValue=this.currentValue==="0"?t:this.currentValue+t,this.updateDisplay()}inputOperator(t){this.showOperatorFeedback(t);let a=parseFloat(this.currentValue);if(this.previousValue==="")this.previousValue=this.currentValue;else if(this.operator){let r=this.performCalculation();this.currentValue=String(r),this.previousValue=this.currentValue,this.updateDisplay()}this.waitingForOperand=!0,this.operator=t}calculate(){if(this.previousValue!==""&&this.operator){let t=this.performCalculation();this.currentValue=String(t),this.previousValue="",this.operator="",this.waitingForOperand=!0,this.updateDisplay()}}performCalculation(){let t=parseFloat(this.previousValue),a=parseFloat(this.currentValue);switch(this.operator){case"+":return t+a;case"-":return t-a;case"*":return t*a;case"/":return a!==0?t/a:0;default:return a}}clear(){this.currentValue="0",this.previousValue="",this.operator="",this.waitingForOperand=!1,this.updateDisplay()}updateDisplay(){this.display&&(this.display.textContent=this.currentValue)}showOperatorFeedback(t){let a=this.shadow.querySelector(`[data-operator="${t}"]`);a&&(a.classList.add("pressed"),setTimeout(()=>{a.classList.remove("pressed")},150))}getStyles(){return`
       ${this.getBaseStyles()}
 
       .calculator {
@@ -63,6 +63,13 @@ import{a as i}from"./chunk-BP7C5X5K.min.js";var e=class extends i{constructor(){
 
       .btn.operator {
         background: color-mix(in srgb, var(--widgies-accent, var(--widgies-accent-light, #6c4cff)) 80%, black);
+        transition: all 0.1s ease;
+      }
+
+      .btn.operator.pressed {
+        background: var(--widgies-accent, var(--widgies-accent-light, #6c4cff));
+        transform: scale(0.95);
+        box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
       }
 
       .btn.equals {
@@ -85,6 +92,10 @@ import{a as i}from"./chunk-BP7C5X5K.min.js";var e=class extends i{constructor(){
           background: color-mix(in srgb, var(--widgies-accent, var(--widgies-accent-dark, #a88bff)) 80%, white);
         }
 
+        .btn.operator.pressed {
+          background: var(--widgies-accent, var(--widgies-accent-dark, #a88bff));
+        }
+
         .btn.equals {
           background: var(--widgies-accent, var(--widgies-accent-dark, #a88bff));
         }

package/dist/index.d.ts

@@ -5,4 +5,12 @@ export { TimerWidget } from './widgets/timer.js';
 export { AffirmationWidget } from './widgets/affirmation.js';
 export { AmbientWidget } from './widgets/ambient.js';
 export { QRCodeWidget } from './widgets/qr-code.js';
+export { FortuneCookieWidget } from './widgets/fortune-cookie.js';
+export { TinyPlanetWidget } from './widgets/tiny-planet.js';
+export { Magic8BallWidget } from './widgets/magic-8-ball.js';
+export { UnitConverterWidget } from './widgets/unit-converter.js';
+export { CurrencyExchangeWidget } from './widgets/currency-exchange.js';
+export { RandomImageWidget } from './widgets/random-image.js';
+export { ColorPaletteWidget } from './widgets/color-palette.js';
+export { DadJokesWidget } from './widgets/dad-jokes.js';
 export declare function registerAllWidgets(): void;

package/dist/widgets/calculator.d.ts

@@ -13,6 +13,7 @@ export declare class CalculatorWidget extends BaseWidget {
     private performCalculation;
     private clear;
     private updateDisplay;
+    private showOperatorFeedback;
     protected getStyles(): string;
 }
 export declare function register(): void;

package/dist/widgets/color-palette.d.ts

@@ -0,0 +1,24 @@
+import { BaseWidget } from '../core/BaseWidget.js';
+export declare class ColorPaletteWidget extends BaseWidget {
+    private palette;
+    private currentRed;
+    private currentGreen;
+    private currentBlue;
+    private presets;
+    protected render(): void;
+    private renderManualMode;
+    protected attachEventListeners(): void;
+    private updateSliderDisplay;
+    private addCurrentColor;
+    private randomizeRGB;
+    private loadPreset;
+    private clearPalette;
+    private copyColor;
+    private showCopyFeedback;
+    private copyAllColors;
+    private hexToRgb;
+    private rgbToHex;
+    private hexToHsl;
+    private hslToHex;
+    protected getStyles(): string;
+}

package/dist/widgets/currency-exchange.d.ts

@@ -0,0 +1,20 @@
+import { BaseWidget } from '../core/BaseWidget.js';
+export declare class CurrencyExchangeWidget extends BaseWidget {
+    private currencies;
+    private fromCurrency;
+    private toCurrency;
+    private amount;
+    private exchangeRate;
+    private convertedAmount;
+    private isLoading;
+    private lastUpdated;
+    private errorMessage;
+    protected render(): void;
+    protected attachEventListeners(): void;
+    connectedCallback(): void;
+    private getCurrencyOptions;
+    private fetchExchangeRate;
+    private getMockRate;
+    private updateConversion;
+    protected getStyles(): string;
+}

package/dist/widgets/dad-jokes.d.ts

@@ -0,0 +1,15 @@
+import { BaseWidget } from '../core/BaseWidget.js';
+export declare class DadJokesWidget extends BaseWidget {
+    private display;
+    private newButton;
+    private currentJoke;
+    private isLoading;
+    protected render(): void;
+    protected attachEventListeners(): void;
+    private fetchNewJoke;
+    private showNewJoke;
+    private updateButton;
+    connectedCallback(): void;
+    protected getStyles(): string;
+}
+export declare function register(): void;

package/dist/widgets/fortune-cookie.d.ts

@@ -0,0 +1,13 @@
+import { BaseWidget } from '../core/BaseWidget.js';
+export declare class FortuneCookieWidget extends BaseWidget {
+    private fortunes;
+    private currentFortune;
+    private isOpen;
+    protected render(): void;
+    protected attachEventListeners(): void;
+    private openCookie;
+    private handleCookieClick;
+    private getNewFortune;
+    private getRandomFortune;
+    protected getStyles(): string;
+}

package/dist/widgets/magic-8-ball.d.ts

@@ -0,0 +1,12 @@
+import { BaseWidget } from '../core/BaseWidget.js';
+export declare class Magic8BallWidget extends BaseWidget {
+    private responses;
+    private currentResponse;
+    private isShaking;
+    private showResponse;
+    protected render(): void;
+    protected attachEventListeners(): void;
+    private shakeBall;
+    private getRandomResponse;
+    protected getStyles(): string;
+}

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

@@ -0,0 +1,17 @@
+import { BaseWidget } from '../core/BaseWidget.js';
+export declare class RandomImageWidget extends BaseWidget {
+    private imageCategories;
+    private currentCategory;
+    private currentImage;
+    private imageTitle;
+    private isLoading;
+    private errorMessage;
+    protected render(): void;
+    protected attachEventListeners(): void;
+    private loadRandomImage;
+    private testImageLoad;
+    private saveImage;
+    private shareImage;
+    private fallbackShare;
+    protected getStyles(): string;
+}

package/dist/widgets/tiny-planet.d.ts

@@ -0,0 +1,14 @@
+import { BaseWidget } from '../core/BaseWidget.js';
+export declare class TinyPlanetWidget extends BaseWidget {
+    private places;
+    private currentPlace;
+    private imageUrl;
+    private isLoading;
+    protected render(): void;
+    protected attachEventListeners(): void;
+    private exploreNewPlace;
+    private generateSatelliteImage;
+    private testImageLoad;
+    private formatCoordinate;
+    protected getStyles(): string;
+}

package/dist/widgets/unit-converter.d.ts

@@ -0,0 +1,18 @@
+import { BaseWidget } from '../core/BaseWidget.js';
+export declare class UnitConverterWidget extends BaseWidget {
+    private categories;
+    private currentCategory;
+    private fromUnit;
+    private toUnit;
+    private inputValue;
+    protected render(): void;
+    protected attachEventListeners(): void;
+    private getUnitOptions;
+    private getConvertedValue;
+    private convertTemperature;
+    private updateResult;
+    private getQuickConversions;
+    private convertValue;
+    private convertTemperatureValue;
+    protected getStyles(): string;
+}