smoothly 0.1.83 → 0.1.87

package/dist/smoothly/smoothly-calendar.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, i as createEvent, h, j as getElement } from './index-02a70ac1.js';
-import { d as dist } from './index-a28d88cf.js';
-import { w as weekdays, m as month } from './generate-776b3b0f.js';
+import { d as dist } from './index-a5a08f46.js';
+import { w as weekdays, m as month } from './generate-50b98474.js';
 import './_commonjsHelpers-8fe71198.js';
 
 const styleCss = ".sc-smoothly-calendar-h{display:block;--other-month-opacity:0.5}.sc-smoothly-calendar-h>smoothly-input-month.sc-smoothly-calendar{width:calc(100% - 1em);padding:0.5em 0.5em 0 0.5em}th.sc-smoothly-calendar,td.sc-smoothly-calendar{text-align:center;padding:0.5em;min-width:2em;background-color:rgb(var(--smoothly-default-shade));cursor:pointer;user-select:none}td.currentMonth.sc-smoothly-calendar{color:rgb(var(--smoothly-default-contrast))}td.sc-smoothly-calendar:not(.currentMonth){color:rgba(var(--smoothly-default-contrast), var(--other-month-opacity))}td.sc-smoothly-calendar:nth-child(6):not(.currentMonth).selected,td.sc-smoothly-calendar:nth-child(6):not(.currentMonth).dateRange,td.sc-smoothly-calendar:nth-child(7):not(.currentMonth).selected,td.sc-smoothly-calendar:nth-child(7):not(.currentMonth).dateRange{color:rgba(var(--smoothly-default-contrast))}td.sc-smoothly-calendar:nth-child(6),td.sc-smoothly-calendar:nth-child(7){color:rgb(var(--smoothly-danger-tint))}td.sc-smoothly-calendar:nth-child(6):not(.currentMonth),td.sc-smoothly-calendar:nth-child(7):not(.currentMonth){color:rgba(var(--smoothly-danger-tint), var(--other-month-opacity))}td.sc-smoothly-calendar:not(.selected,.disable).sc-smoothly-calendar:hover{color:rgb(var(--smoothly-primary-contrast));background:rgb(var(--smoothly-primary-tint))}td.selected.sc-smoothly-calendar{color:rgb(var(--smoothly-primary-contrast));background:rgb(var(--smoothly-primary-color))}td.sc-smoothly-calendar:not(.selected,.dateRange).sc-smoothly-calendar:not(:hover).today{background:rgb(var(--smoothly-dark-tint));color:rgb(var(--smoothly-dark-contrast))}td.dateRange.sc-smoothly-calendar{color:rgb(var(--smoothly-primary-contrast));background:rgb(var(--smoothly-primary-tint))}td.disable.sc-smoothly-calendar{cursor:not-allowed;background-color:rgb(var(--smoothly-default-tint), 0.5);color:rgb(var(--smoothly-default-contrast), 0.5)}";
@@ -40,22 +40,14 @@ let Calendar = class {
           event.stopPropagation();
         } }),
       h("table", null, h("thead", null, h("tr", null, weekdays().map(day => (h("th", null, day))))), month((_b = this.month) !== null && _b !== void 0 ? _b : this.value).map(week => (h("tr", null, week.map(date => {
-        var _a, _b, _c, _d, _e, _f, _g;
-        return (h("td", { tabindex: 1, onClick: this.min || this.max
-            ? !(date < ((_a = this.min) !== null && _a !== void 0 ? _a : "") || date > ((_b = this.max) !== null && _b !== void 0 ? _b : ""))
-              ? () => this.onClick(date)
-              : undefined
-            : () => this.onClick(date), class: (date == this.value ? ["selected"] : [])
-            .concat(...(date == dist.Date.now() ? ["today"] : []), dist.Date.firstOfMonth((_c = this.month) !== null && _c !== void 0 ? _c : this.value) == dist.Date.firstOfMonth(date) ? ["currentMonth"] : [], this.doubleInput
-            ? date >= ((_d = this.start) !== null && _d !== void 0 ? _d : "") && date <= ((_e = this.end) !== null && _e !== void 0 ? _e : "")
+        var _a, _b, _c;
+        return (h("td", { tabindex: 1, onClick: (this.min || this.max) && (date < this.min || date > this.max) ? undefined : () => this.onClick(date), class: (date == this.value ? ["selected"] : [])
+            .concat(...(date == dist.Date.now() ? ["today"] : []), dist.Date.firstOfMonth((_a = this.month) !== null && _a !== void 0 ? _a : this.value) == dist.Date.firstOfMonth(date) ? ["currentMonth"] : [], this.doubleInput
+            ? date >= ((_b = this.start) !== null && _b !== void 0 ? _b : "") && date <= ((_c = this.end) !== null && _c !== void 0 ? _c : "")
               ? ["dateRange"]
               : []
             : "")
-            .concat(...(this.min || this.max
-            ? date < ((_f = this.min) !== null && _f !== void 0 ? _f : "") || date > ((_g = this.max) !== null && _g !== void 0 ? _g : "")
-              ? ["disable"]
-              : []
-            : ""))
+            .concat(...(this.min || this.max ? (date < this.min || date > this.max ? ["disable"] : []) : ""))
             .join(" ") }, date.substring(8, 10)));
       }))))),
     ];

package/dist/smoothly/smoothly-display-amount.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance } from './index-02a70ac1.js';
-import { d as dist } from './index-a28d88cf.js';
+import { d as dist } from './index-a5a08f46.js';
 import './_commonjsHelpers-8fe71198.js';
 
 const styleCss = ".sc-smoothly-display-amount-h{display:block}[hidden].sc-smoothly-display-amount-h{display:none}";

package/dist/smoothly/smoothly-display.entry.js

@@ -1,6 +1,7 @@
 import { r as registerInstance, h } from './index-02a70ac1.js';
-import { d as dist } from './index-36a04e8c.js';
+import { d as dist } from './index-1be6d668.js';
 import './_commonjsHelpers-8fe71198.js';
+import './index-a5a08f46.js';
 
 const styleCss = ".sc-smoothly-display-h{display:block}[hidden].sc-smoothly-display-h{display:none}";
 

package/dist/smoothly/smoothly-input-date-range.entry.js

@@ -1,8 +1,8 @@
 import { r as registerInstance, i as createEvent, h } from './index-02a70ac1.js';
-import { d as dist } from './index-a28d88cf.js';
+import { d as dist } from './index-a5a08f46.js';
 import './_commonjsHelpers-8fe71198.js';
 
-const styleCss = ".sc-smoothly-input-date-range-h{position:relative;display:block}.sc-smoothly-input-date-range-h>nav.sc-smoothly-input-date-range{position:absolute;z-index:10;top:3.5em;background-color:rgb(var(--smoothly-default-shade));max-width:22em}.sc-smoothly-input-date-range-h>div.sc-smoothly-input-date-range{position:fixed;width:100vw;height:100vh;z-index:2}.sc-smoothly-input-date-range-h>nav.sc-smoothly-input-date-range>.arrow.sc-smoothly-input-date-range{position:absolute;z-index:9;transform:translate(10em, -.55em) rotate(45deg);width:1em;height:1em;background-color:rgb(var(--smoothly-default-shade))}.sc-smoothly-input-date-range-h>section.sc-smoothly-input-date-range{display:flex;flex-direction:row;align-items:center}.sc-smoothly-input-date-range-h>smoothly-input.sc-smoothly-input-date-range{padding:0}";
+const styleCss = ".sc-smoothly-input-date-range-h{position:relative;display:block}.sc-smoothly-input-date-range-h>nav.sc-smoothly-input-date-range{position:absolute;z-index:10;top:3.5em;background-color:rgb(var(--smoothly-default-shade));max-width:22em}.sc-smoothly-input-date-range-h>div.sc-smoothly-input-date-range{position:fixed;top:0px;left:0px;right:0px;bottom:0px;width:100vw;height:100vh;z-index:2}.sc-smoothly-input-date-range-h>nav.sc-smoothly-input-date-range>.arrow.sc-smoothly-input-date-range{position:absolute;z-index:9;transform:translate(10em, -.55em) rotate(45deg);width:1em;height:1em;background-color:rgb(var(--smoothly-default-shade))}.sc-smoothly-input-date-range-h>section.sc-smoothly-input-date-range{display:flex;flex-direction:row;align-items:center}.sc-smoothly-input-date-range-h>smoothly-input.sc-smoothly-input-date-range{padding:0}";
 
 let InputDateRange = class {
   constructor(hostRef) {

package/dist/smoothly/smoothly-input-date.entry.js

@@ -1,8 +1,8 @@
 import { r as registerInstance, i as createEvent, h } from './index-02a70ac1.js';
-import { d as dist } from './index-a28d88cf.js';
+import { d as dist } from './index-a5a08f46.js';
 import './_commonjsHelpers-8fe71198.js';
 
-const styleCss = ".sc-smoothly-input-date-h{position:relative}nav.sc-smoothly-input-date{position:absolute;z-index:10;top:3.5em;background-color:rgb(var(--smoothly-default-shade));max-width:22em}.sc-smoothly-input-date-h>div.sc-smoothly-input-date{position:fixed;width:100vw;height:100vh;z-index:2}.sc-smoothly-input-date-h>nav.sc-smoothly-input-date>.arrow.sc-smoothly-input-date{position:absolute;z-index:9;transform:translate(2em, -.55em) rotate(45deg);width:1em;height:1em;background-color:rgb(var(--smoothly-default-shade))}";
+const styleCss = ".sc-smoothly-input-date-h{position:relative}nav.sc-smoothly-input-date{position:absolute;z-index:10;top:3.5em;background-color:rgb(var(--smoothly-default-shade));max-width:22em}.sc-smoothly-input-date-h>div.sc-smoothly-input-date{position:fixed;top:0px;left:0px;right:0px;bottom:0px;width:100vw;height:100vh;z-index:2}.sc-smoothly-input-date-h>nav.sc-smoothly-input-date>.arrow.sc-smoothly-input-date{position:absolute;z-index:9;transform:translate(2em, -.55em) rotate(45deg);width:1em;height:1em;background-color:rgb(var(--smoothly-default-shade))}";
 
 let InputDate = class {
   constructor(hostRef) {

package/dist/smoothly/smoothly-input-month.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, i as createEvent, h } from './index-02a70ac1.js';
-import { d as dist } from './index-a28d88cf.js';
-import { y as years, a as months } from './generate-776b3b0f.js';
+import { d as dist } from './index-a5a08f46.js';
+import { y as years, a as months } from './generate-50b98474.js';
 import './_commonjsHelpers-8fe71198.js';
 
 const styleCss = ".sc-smoothly-input-month-h{display:flex;justify-content:space-between;font-size:large}smoothly-icon.sc-smoothly-input-month{font-size:smaller}";

package/dist/smoothly/smoothly-input.entry.js

@@ -1,5 +1,6 @@
 import { r as registerInstance, i as createEvent, h, k as Host } from './index-02a70ac1.js';
-import { d as dist } from './index-36a04e8c.js';
+import { d as dist$1 } from './index-a5a08f46.js';
+import { d as dist } from './index-1be6d668.js';
 import './_commonjsHelpers-8fe71198.js';
 
 const styleCss = ".sc-smoothly-input-h{display:block;position:relative}[hidden].sc-smoothly-input-h{display:none}label.sc-smoothly-input{position:absolute;left:0.4em;top:0.6em;color:rgb(var(--smoothly-text-tint));opacity:0.8;user-select:none;cursor:inherit;transition:font-size 0.1s;transition-timing-function:ease}input.sc-smoothly-input{padding:1em 0.2em 0.2em 0.2em;width:calc(100% - 0.4em);background:none;border:0;z-index:1;position:relative;font-size:1rem;font-family:var(--smoothly-font-family)}smoothly-icon.sc-smoothly-input{display:none;position:absolute;right:0.2em;top:0.6em}input.sc-smoothly-input:invalid+smoothly-icon.sc-smoothly-input{display:block}.has-value.sc-smoothly-input-h>label.sc-smoothly-input{top:0.3em;top:0.4em;font-size:60%;z-index:0}.sc-smoothly-input-h:focus-within>label.sc-smoothly-input{top:0.3em;top:0.4em;font-size:60%;z-index:0}input.sc-smoothly-input:focus{outline:none}input.sc-smoothly-input:-webkit-autofill,input.sc-smoothly-input:-webkit-autofill:hover,input.sc-smoothly-input:-webkit-autofill:focus,input.sc-smoothly-input:-webkit-autofill:active{box-shadow:0 0 0 30px unset inset !important;-webkit-box-shadow:0 0 0 30px unset inset !important}input.sc-smoothly-input:-webkit-autofill{-webkit-text-fill-color:unset !important}input.sc-smoothly-input:-internal-autofill-previewed,input.sc-smoothly-input:-internal-autofill-selected,textarea.sc-smoothly-input:-internal-autofill-previewed,textarea.sc-smoothly-input:-internal-autofill-selected,select.sc-smoothly-input:-internal-autofill-previewed,select.sc-smoothly-input:-internal-autofill-selected{background-color:none !important;background-image:none !important;color:unset !important}";
@@ -23,27 +24,30 @@ let SmoothlyInput = class {
         result = dist.get("price", this.currency);
         break;
       default:
-        result = dist.get(this.type);
+        result = dist.get(this.type, getLocale());
         break;
     }
     return result || dist.get("text");
   }
+  newState(state) {
+    const formatter = this.formatter;
+    return formatter.format(dist.StateEditor.copy(formatter.unformat(dist.StateEditor.copy(state))));
+  }
   valueWatcher(value, before) {
     if (this.lastValue != value) {
       this.lastValue = value;
-      this.state = Object.assign(Object.assign({}, this.state), { value: this.formatter.format(dist.StateEditor.copy(this.formatter.unformat(dist.StateEditor.copy({ value, selection: this.state.selection })))).value });
+      this.state = Object.assign(Object.assign({}, this.state), { value: this.newState({ value: this.formatter.toString(value), selection: this.state.selection }).value });
     }
     if (value != before)
       this.smoothlyChanged.emit({ name: this.name, value });
   }
   componentWillLoad() {
-    const formatter = this.formatter;
-    const value = formatter.toString(this.value) || "";
+    const value = this.formatter.toString(this.value) || "";
     const start = value.length;
-    this.state = formatter.format(dist.StateEditor.copy(formatter.unformat(dist.StateEditor.copy({
+    this.state = this.newState({
       value,
       selection: { start, end: start, direction: "none" },
-    }))));
+    });
   }
   componentDidRender() {
     if (this.keepFocusOnReRender) {
@@ -55,8 +59,7 @@ let SmoothlyInput = class {
     this.keepFocusOnReRender = keepFocus;
   }
   async setSelectionRange(start, end, direction) {
-    const formatter = this.formatter;
-    this.state = formatter.format(dist.StateEditor.copy(formatter.unformat(dist.StateEditor.copy(Object.assign(Object.assign({}, this.state), { selection: { start, end, direction: direction != undefined ? direction : this.state.selection.direction } })))));
+    this.state = this.newState(Object.assign(Object.assign({}, this.state), { selection: { start, end, direction: direction != undefined ? direction : this.state.selection.direction } }));
     const after = this.formatter.format(dist.StateEditor.copy(this.formatter.unformat(dist.StateEditor.copy(Object.assign({}, this.state)))));
     this.updateBackend(after, this.inputElement);
   }
@@ -73,7 +76,7 @@ let SmoothlyInput = class {
         end: backend.selectionEnd != undefined ? backend.selectionEnd : backend.value.length,
         direction: backend.selectionDirection ? backend.selectionDirection : "none",
       } });
-    const after = this.formatter.format(dist.StateEditor.copy(this.formatter.unformat(dist.StateEditor.copy(Object.assign({}, this.state)))));
+    const after = this.newState(Object.assign({}, this.state));
     this.updateBackend(after, backend);
   }
   onKeyDown(event) {
@@ -159,6 +162,10 @@ let SmoothlyInput = class {
     "value": ["valueWatcher"]
   }; }
 };
+function getLocale() {
+  const result = navigator.language;
+  return dist$1.Locale.is(result) ? result : dist$1.Language.is(result) ? dist$1.Locale.toLocale(result) : undefined;
+}
 SmoothlyInput.style = styleCss;
 
 export { SmoothlyInput as smoothly_input };

package/dist/smoothly/smoothly-select-demo.entry.js

@@ -21,8 +21,8 @@ let SmoothlySelectDemo = class {
       h("smoothly-select", { identifier: "currency" }, this.currencies.map(option => this.currency == option ? (h("option", { value: option, selected: true }, option)) : (h("option", { value: option }, option)))),
       h("smoothly-select", { identifier: "language" }, h("optgroup", { label: "Nordic" }, h("option", { value: "sv" }, "Swedish"), h("option", { value: "da", selected: true }, "Danish"), h("option", { value: "no" }, "Norwegian")), h("optgroup", { label: "Other" }, h("option", { value: "en" }, "English"))),
       h("smoothly-select", { identifier: "quantity", ref: e => (this.quantityElement = e) }, h("option", { value: "1" }, "1"), h("option", { value: "2" }, "2"), h("option", { value: "3" }, "3")),
-      h("smoothly-input-date", { max: "2021-12-30", min: "2021-10-10" }, "Date"),
-      h("smoothly-input-date-range", { max: "2021-12-30", min: "2021-10-10" }),
+      h("smoothly-input-date", { value: "2021-10-28", max: "2021-12-30", min: "2021-10-10" }, "Date"),
+      h("smoothly-input-date-range", { start: "2021-10-28", end: "2021-11-27", min: "2021-10-10", max: "2021-12-30" }),
       h("smoothly-selector", null, h("smoothly-item", { value: "1" }, "January"), h("smoothly-item", { value: "2" }, "February"), h("smoothly-item", { value: "3" }, "March"), h("smoothly-item", { value: "4" }, "April"), h("smoothly-item", { value: "5" }, "May"), h("smoothly-item", { value: "6" }, "June"), h("smoothly-item", { value: "7" }, "July"), h("smoothly-item", { value: "8" }, "August"), h("smoothly-item", { value: "9" }, "September"), h("smoothly-item", { value: "10" }, "October"), h("smoothly-item", { value: "11" }, "November"), h("smoothly-item", { value: "12" }, "December")),
       h("button", { onClick: () => this.alertf() }, "press here"),
       h("smoothly-picker", { label: "Filter", "empty-menu-label": "Sorry, we're out of options.", "max-height": "58px", multiple: true, options: [

package/dist/types/components/calendar/index.d.ts

@@ -6,8 +6,8 @@ export declare class Calendar {
   value: Date;
   start?: Date;
   end?: Date;
-  max?: Date;
-  min?: Date;
+  max: Date;
+  min: Date;
   doubleInput: boolean;
   valueChanged: EventEmitter<Date>;
   startChanged: EventEmitter<Date>;

package/dist/types/components/input/index.d.ts

@@ -18,6 +18,7 @@ export declare class SmoothlyInput {
   disabled: boolean;
   currency?: Currency;
   get formatter(): Formatter & Converter<any>;
+  private newState;
   smoothlyChanged: EventEmitter<{
     name: string;
     value: any;

package/dist/types/components.d.ts

@@ -26,8 +26,8 @@ export namespace Components {
     interface SmoothlyCalendar {
         "doubleInput": boolean;
         "end"?: Date;
-        "max"?: Date;
-        "min"?: Date;
+        "max": Date;
+        "min": Date;
         "month"?: Date;
         "start"?: Date;
         "value": Date;

package/dist/types/index.d.ts

@@ -1,4 +1,4 @@
 export { Components, JSX } from "./components";
 export { App } from "./components/App";
 export { Autocomplete, ClientIdentifier, Color, Expand, Fill, Message, Notice, Trigger, OptionType } from "./model";
-export { toCommaRgb } from "./utilities";
+export { Cosmetic } from "./utilities";

package/dist/types/utilities/Cosmetic/Color/CommaRgb.d.ts

@@ -0,0 +1,11 @@
+import { Hex } from "./Hex";
+import { Hsl } from "./Hsl";
+import { Rgb } from "./Rgb";
+export declare type CommaRgb = string;
+export declare namespace CommaRgb {
+  function is(value: any | CommaRgb): value is CommaRgb;
+  function from(color: any): CommaRgb | undefined;
+  function fromHex(hex: Hex): CommaRgb;
+  function fromRgb(rgb: Rgb): CommaRgb;
+  function fromHsl(hsl: Hsl): CommaRgb;
+}

package/dist/types/utilities/Cosmetic/Color/Hex.d.ts

@@ -0,0 +1,4 @@
+export declare type Hex = string;
+export declare namespace Hex {
+  function is(value: any | Hex): value is Hex;
+}

package/dist/types/utilities/Cosmetic/Color/Hsl.d.ts

@@ -0,0 +1,4 @@
+export declare type Hsl = string;
+export declare namespace Hsl {
+  function is(value: any | Hsl): value is Hsl;
+}

package/dist/types/utilities/Cosmetic/Color/Name.d.ts

@@ -0,0 +1,155 @@
+export declare const Names: {
+  readonly aliceblue: "#f0f8ff";
+  readonly antiquewhite: "#faebd7";
+  readonly aqua: "#00ffff";
+  readonly aquamarine: "#7fffd4";
+  readonly azure: "#f0ffff";
+  readonly beige: "#f5f5dc";
+  readonly bisque: "#ffe4c4";
+  readonly black: "#000000";
+  readonly blanchedalmond: "#ffebcd";
+  readonly blue: "#0000ff";
+  readonly blueviolet: "#8a2be2";
+  readonly brown: "#a52a2a";
+  readonly burlywood: "#deb887";
+  readonly cadetblue: "#5f9ea0";
+  readonly chartreuse: "#7fff00";
+  readonly chocolate: "#d2691e";
+  readonly coral: "#ff7f50";
+  readonly cornflowerblue: "#6495ed";
+  readonly cornsilk: "#fff8dc";
+  readonly crimson: "#dc143c";
+  readonly cyan: "#00ffff";
+  readonly darkblue: "#00008b";
+  readonly darkcyan: "#008b8b";
+  readonly darkgoldenrod: "#b8860b";
+  readonly darkgray: "#a9a9a9";
+  readonly darkgreen: "#006400";
+  readonly darkgrey: "#a9a9a9";
+  readonly darkkhaki: "#bdb76b";
+  readonly darkmagenta: "#8b008b";
+  readonly darkolivegreen: "#556b2f";
+  readonly darkorange: "#ff8c00";
+  readonly darkorchid: "#9932cc";
+  readonly darkred: "#8b0000";
+  readonly darksalmon: "#e9967a";
+  readonly darkseagreen: "#8fbc8f";
+  readonly darkslateblue: "#483d8b";
+  readonly darkslategray: "#2f4f4f";
+  readonly darkslategrey: "#2f4f4f";
+  readonly darkturquoise: "#00ced1";
+  readonly darkviolet: "#9400d3";
+  readonly deeppink: "#ff1493";
+  readonly deepskyblue: "#00bfff";
+  readonly dimgray: "#696969";
+  readonly dimgrey: "#696969";
+  readonly dodgerblue: "#1e90ff";
+  readonly firebrick: "#b22222";
+  readonly floralwhite: "#fffaf0";
+  readonly forestgreen: "#228b22";
+  readonly fuchsia: "#ff00ff";
+  readonly gainsboro: "#dcdcdc";
+  readonly ghostwhite: "#f8f8ff";
+  readonly goldenrod: "#daa520";
+  readonly gold: "#ffd700";
+  readonly gray: "#808080";
+  readonly green: "#008000";
+  readonly greenyellow: "#adff2f";
+  readonly grey: "#808080";
+  readonly honeydew: "#f0fff0";
+  readonly hotpink: "#ff69b4";
+  readonly indianred: "#cd5c5c";
+  readonly indigo: "#4b0082";
+  readonly ivory: "#fffff0";
+  readonly khaki: "#f0e68c";
+  readonly lavenderblush: "#fff0f5";
+  readonly lavender: "#e6e6fa";
+  readonly lawngreen: "#7cfc00";
+  readonly lemonchiffon: "#fffacd";
+  readonly lightblue: "#add8e6";
+  readonly lightcoral: "#f08080";
+  readonly lightcyan: "#e0ffff";
+  readonly lightgoldenrodyellow: "#fafad2";
+  readonly lightgray: "#d3d3d3";
+  readonly lightgreen: "#90ee90";
+  readonly lightgrey: "#d3d3d3";
+  readonly lightpink: "#ffb6c1";
+  readonly lightsalmon: "#ffa07a";
+  readonly lightseagreen: "#20b2aa";
+  readonly lightskyblue: "#87cefa";
+  readonly lightslategray: "#778899";
+  readonly lightslategrey: "#778899";
+  readonly lightsteelblue: "#b0c4de";
+  readonly lightyellow: "#ffffe0";
+  readonly lime: "#00ff00";
+  readonly limegreen: "#32cd32";
+  readonly linen: "#faf0e6";
+  readonly magenta: "#ff00ff";
+  readonly maroon: "#800000";
+  readonly mediumaquamarine: "#66cdaa";
+  readonly mediumblue: "#0000cd";
+  readonly mediumorchid: "#ba55d3";
+  readonly mediumpurple: "#9370db";
+  readonly mediumseagreen: "#3cb371";
+  readonly mediumslateblue: "#7b68ee";
+  readonly mediumspringgreen: "#00fa9a";
+  readonly mediumturquoise: "#48d1cc";
+  readonly mediumvioletred: "#c71585";
+  readonly midnightblue: "#191970";
+  readonly mintcream: "#f5fffa";
+  readonly mistyrose: "#ffe4e1";
+  readonly moccasin: "#ffe4b5";
+  readonly navajowhite: "#ffdead";
+  readonly navy: "#000080";
+  readonly oldlace: "#fdf5e6";
+  readonly olive: "#808000";
+  readonly olivedrab: "#6b8e23";
+  readonly orange: "#ffa500";
+  readonly orangered: "#ff4500";
+  readonly orchid: "#da70d6";
+  readonly palegoldenrod: "#eee8aa";
+  readonly palegreen: "#98fb98";
+  readonly paleturquoise: "#afeeee";
+  readonly palevioletred: "#db7093";
+  readonly papayawhip: "#ffefd5";
+  readonly peachpuff: "#ffdab9";
+  readonly peru: "#cd853f";
+  readonly pink: "#ffc0cb";
+  readonly plum: "#dda0dd";
+  readonly powderblue: "#b0e0e6";
+  readonly purple: "#800080";
+  readonly rebeccapurple: "#663399";
+  readonly red: "#ff0000";
+  readonly rosybrown: "#bc8f8f";
+  readonly royalblue: "#4169e1";
+  readonly saddlebrown: "#8b4513";
+  readonly salmon: "#fa8072";
+  readonly sandybrown: "#f4a460";
+  readonly seagreen: "#2e8b57";
+  readonly seashell: "#fff5ee";
+  readonly sienna: "#a0522d";
+  readonly silver: "#c0c0c0";
+  readonly skyblue: "#87ceeb";
+  readonly slateblue: "#6a5acd";
+  readonly slategray: "#708090";
+  readonly slategrey: "#708090";
+  readonly snow: "#fffafa";
+  readonly springgreen: "#00ff7f";
+  readonly steelblue: "#4682b4";
+  readonly tan: "#d2b48c";
+  readonly teal: "#008080";
+  readonly thistle: "#d8bfd8";
+  readonly tomato: "#ff6347";
+  readonly turquoise: "#40e0d0";
+  readonly violet: "#ee82ee";
+  readonly wheat: "#f5deb3";
+  readonly white: "#ffffff";
+  readonly whitesmoke: "#f5f5f5";
+  readonly yellow: "#ffff00";
+  readonly yellowgreen: "#9acd32";
+};
+export declare type Name = keyof typeof Names;
+export declare namespace Name {
+  const types: () => string[];
+  function is(value: any | Name): value is Name;
+}

package/dist/types/utilities/Cosmetic/Color/Rgb.d.ts

@@ -0,0 +1,4 @@
+export declare type Rgb = string;
+export declare namespace Rgb {
+  function is(value: any | Rgb): value is Rgb;
+}

package/dist/types/utilities/Cosmetic/Color/index.d.ts

@@ -0,0 +1,170 @@
+import { CommaRgb as ColorCommaRgb } from "./CommaRgb";
+import { Hex as ColorHex } from "./Hex";
+import { Hsl as ColorHsl } from "./Hsl";
+import { Name as ColorName } from "./Name";
+import { Rgb as ColorRgb } from "./Rgb";
+export declare type Color = ColorCommaRgb | ColorHex | ColorHsl | ColorName | ColorRgb;
+export declare namespace Color {
+  function is(value: any | Color): value is Color;
+  function from(value: any | Color): Color | undefined;
+  const Names: {
+    readonly aliceblue: "#f0f8ff";
+    readonly antiquewhite: "#faebd7";
+    readonly aqua: "#00ffff";
+    readonly aquamarine: "#7fffd4";
+    readonly azure: "#f0ffff";
+    readonly beige: "#f5f5dc";
+    readonly bisque: "#ffe4c4";
+    readonly black: "#000000";
+    readonly blanchedalmond: "#ffebcd";
+    readonly blue: "#0000ff";
+    readonly blueviolet: "#8a2be2";
+    readonly brown: "#a52a2a";
+    readonly burlywood: "#deb887";
+    readonly cadetblue: "#5f9ea0";
+    readonly chartreuse: "#7fff00";
+    readonly chocolate: "#d2691e";
+    readonly coral: "#ff7f50";
+    readonly cornflowerblue: "#6495ed";
+    readonly cornsilk: "#fff8dc";
+    readonly crimson: "#dc143c";
+    readonly cyan: "#00ffff";
+    readonly darkblue: "#00008b";
+    readonly darkcyan: "#008b8b";
+    readonly darkgoldenrod: "#b8860b";
+    readonly darkgray: "#a9a9a9";
+    readonly darkgreen: "#006400";
+    readonly darkgrey: "#a9a9a9";
+    readonly darkkhaki: "#bdb76b";
+    readonly darkmagenta: "#8b008b";
+    readonly darkolivegreen: "#556b2f";
+    readonly darkorange: "#ff8c00";
+    readonly darkorchid: "#9932cc";
+    readonly darkred: "#8b0000";
+    readonly darksalmon: "#e9967a";
+    readonly darkseagreen: "#8fbc8f";
+    readonly darkslateblue: "#483d8b";
+    readonly darkslategray: "#2f4f4f";
+    readonly darkslategrey: "#2f4f4f";
+    readonly darkturquoise: "#00ced1";
+    readonly darkviolet: "#9400d3";
+    readonly deeppink: "#ff1493";
+    readonly deepskyblue: "#00bfff";
+    readonly dimgray: "#696969";
+    readonly dimgrey: "#696969";
+    readonly dodgerblue: "#1e90ff";
+    readonly firebrick: "#b22222";
+    readonly floralwhite: "#fffaf0";
+    readonly forestgreen: "#228b22";
+    readonly fuchsia: "#ff00ff";
+    readonly gainsboro: "#dcdcdc";
+    readonly ghostwhite: "#f8f8ff";
+    readonly goldenrod: "#daa520";
+    readonly gold: "#ffd700";
+    readonly gray: "#808080";
+    readonly green: "#008000";
+    readonly greenyellow: "#adff2f";
+    readonly grey: "#808080";
+    readonly honeydew: "#f0fff0";
+    readonly hotpink: "#ff69b4";
+    readonly indianred: "#cd5c5c";
+    readonly indigo: "#4b0082";
+    readonly ivory: "#fffff0";
+    readonly khaki: "#f0e68c";
+    readonly lavenderblush: "#fff0f5";
+    readonly lavender: "#e6e6fa";
+    readonly lawngreen: "#7cfc00";
+    readonly lemonchiffon: "#fffacd";
+    readonly lightblue: "#add8e6";
+    readonly lightcoral: "#f08080";
+    readonly lightcyan: "#e0ffff";
+    readonly lightgoldenrodyellow: "#fafad2";
+    readonly lightgray: "#d3d3d3";
+    readonly lightgreen: "#90ee90";
+    readonly lightgrey: "#d3d3d3";
+    readonly lightpink: "#ffb6c1";
+    readonly lightsalmon: "#ffa07a";
+    readonly lightseagreen: "#20b2aa";
+    readonly lightskyblue: "#87cefa";
+    readonly lightslategray: "#778899";
+    readonly lightslategrey: "#778899";
+    readonly lightsteelblue: "#b0c4de";
+    readonly lightyellow: "#ffffe0";
+    readonly lime: "#00ff00";
+    readonly limegreen: "#32cd32";
+    readonly linen: "#faf0e6";
+    readonly magenta: "#ff00ff";
+    readonly maroon: "#800000";
+    readonly mediumaquamarine: "#66cdaa";
+    readonly mediumblue: "#0000cd";
+    readonly mediumorchid: "#ba55d3";
+    readonly mediumpurple: "#9370db";
+    readonly mediumseagreen: "#3cb371";
+    readonly mediumslateblue: "#7b68ee";
+    readonly mediumspringgreen: "#00fa9a";
+    readonly mediumturquoise: "#48d1cc";
+    readonly mediumvioletred: "#c71585";
+    readonly midnightblue: "#191970";
+    readonly mintcream: "#f5fffa";
+    readonly mistyrose: "#ffe4e1";
+    readonly moccasin: "#ffe4b5";
+    readonly navajowhite: "#ffdead";
+    readonly navy: "#000080";
+    readonly oldlace: "#fdf5e6";
+    readonly olive: "#808000";
+    readonly olivedrab: "#6b8e23";
+    readonly orange: "#ffa500";
+    readonly orangered: "#ff4500";
+    readonly orchid: "#da70d6";
+    readonly palegoldenrod: "#eee8aa";
+    readonly palegreen: "#98fb98";
+    readonly paleturquoise: "#afeeee";
+    readonly palevioletred: "#db7093";
+    readonly papayawhip: "#ffefd5";
+    readonly peachpuff: "#ffdab9";
+    readonly peru: "#cd853f";
+    readonly pink: "#ffc0cb";
+    readonly plum: "#dda0dd";
+    readonly powderblue: "#b0e0e6";
+    readonly purple: "#800080";
+    readonly rebeccapurple: "#663399";
+    readonly red: "#ff0000";
+    readonly rosybrown: "#bc8f8f";
+    readonly royalblue: "#4169e1";
+    readonly saddlebrown: "#8b4513";
+    readonly salmon: "#fa8072";
+    readonly sandybrown: "#f4a460";
+    readonly seagreen: "#2e8b57";
+    readonly seashell: "#fff5ee";
+    readonly sienna: "#a0522d";
+    readonly silver: "#c0c0c0";
+    readonly skyblue: "#87ceeb";
+    readonly slateblue: "#6a5acd";
+    readonly slategray: "#708090";
+    readonly slategrey: "#708090";
+    readonly snow: "#fffafa";
+    readonly springgreen: "#00ff7f";
+    readonly steelblue: "#4682b4";
+    readonly tan: "#d2b48c";
+    readonly teal: "#008080";
+    readonly thistle: "#d8bfd8";
+    readonly tomato: "#ff6347";
+    readonly turquoise: "#40e0d0";
+    readonly violet: "#ee82ee";
+    readonly wheat: "#f5deb3";
+    readonly white: "#ffffff";
+    readonly whitesmoke: "#f5f5f5";
+    readonly yellow: "#ffff00";
+    readonly yellowgreen: "#9acd32";
+  };
+  type Name = ColorName;
+  const Name: typeof ColorName;
+  type CommaRgb = ColorCommaRgb;
+  const CommaRgb: typeof ColorCommaRgb;
+  type Rgb = ColorRgb;
+  const Rgb: typeof ColorRgb;
+  type Hex = ColorHex;
+  const Hex: typeof ColorHex;
+  type Hsl = ColorHsl;
+  const Hsl: typeof ColorHsl;
+}

package/dist/types/utilities/Cosmetic/index.d.ts

@@ -0,0 +1,23 @@
+import { Color as CosmeticColor } from "./Color";
+export declare type Cosmetic = {
+  text?: {
+    background?: string;
+    color?: string;
+  };
+  border?: {
+    color?: string;
+    style?: string;
+    radius?: string;
+    width?: string;
+  };
+  gap?: string;
+  dangerColor?: string;
+  fontFamily?: string;
+  background?: string;
+};
+export declare namespace Cosmetic {
+  const types: typeof Cosmetic;
+  function from(value: any | Cosmetic): Cosmetic;
+  type Color = CosmeticColor;
+  const Color: typeof CosmeticColor;
+}

package/dist/types/utilities/index.d.ts

@@ -1 +1 @@
-export { toCommaRgb } from "./colorTransform";
+export { Cosmetic } from "./Cosmetic";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "smoothly",
-  "version": "0.1.83",
+  "version": "0.1.87",
   "description": "Web component library written in Stencil.",
   "author": "PayFunc",
   "license": "MIT",
@@ -62,11 +62,11 @@
   },
   "dependencies": {
     "authly": "0.2.8",
-    "isoly": "0.0.36",
+    "isoly": "0.0.39",
     "langly": "0.0.14",
     "normalize.css": "^8.0.1",
     "stencil-router-v2": "^0.6.0",
-    "tidily": "0.0.46"
+    "tidily": "0.0.47"
   },
   "devDependencies": {
     "@stencil/core": "^2.10.0",