smoothly 0.3.0 → 0.3.2

package/dist/cjs/smoothly.cjs.js

@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["smoothly-google-font.cjs",[[2,"smoothly-google-font",{"value":[1]}]]],["smoothly-radio-group.cjs",[[4,"smoothly-radio-group",{"orientation":[513]}]]],["smoothly-reorder.cjs",[[0,"smoothly-reorder"]]],["smoothly-svg.cjs",[[2,"smoothly-svg",{"url":[513],"size":[513],"color":[1]}]]],["smoothly-trigger-sink.cjs",[[6,"smoothly-trigger-sink",{"context":[16],"destination":[1],"filter":[1]},[[0,"trigger","TriggerListener"]]]]],["smoothly-trigger-source.cjs",[[6,"smoothly-trigger-source",{"listen":[1]}]]],["smoothly-accordion_50.cjs",[[0,"smoothly-app-demo",{"baseUrl":[1,"base-url"]}],[0,"smoothly-input-demo"],[2,"smoothly-select-demo",null,[[0,"selectionChanged","handleSelectionChanged"]]],[2,"smoothly-table-demo"],[0,"smoothly-display-demo"],[4,"smoothly-app",{"color":[1]}],[0,"smoothly-dialog-demo"],[2,"smoothly-icon-demo"],[6,"smoothly-button",{"color":[513],"expand":[513],"fill":[513],"disabled":[516],"type":[513],"link":[1],"download":[4]}],[4,"smoothly-room",{"label":[1],"icon":[1],"path":[1],"to":[1]}],[2,"smoothly-input-date-range",{"value":[1025],"start":[1025],"end":[1025],"max":[1025],"min":[1025],"open":[1028],"showLabel":[516,"show-label"]},[[0,"startChanged","onStartChanged"],[0,"endChanged","onEndChanged"],[0,"dateRangeSet","onDateRangeSet"]]],[1,"smoothly-picker",{"disabled":[516],"readonly":[516],"maxMenuHeight":[1,"max-menu-height"],"maxHeight":[1,"max-height"],"emptyMenuLabel":[1025,"empty-menu-label"],"multiple":[516],"mutable":[4],"optionStyle":[8,"option-style"],"options":[1040],"labelSetting":[513,"label-setting"],"label":[513],"selections":[1040],"selectNoneName":[1025,"select-none-name"],"selectAllName":[1025,"select-all-name"],"selectionName":[1025,"selection-name"],"newOptionLabel":[1025,"new-option-label"],"valueValidator":[16],"isOpen":[32],"empty":[32]},[[0,"optionSelect","optionSelectHandler"],[0,"optionUnselect","optionSelectHandler"],[0,"optionAdd","optionAddHandler"],[0,"menuEmpty","emptyHandler"]]],[6,"smoothly-notifier",{"notices":[32]},[[0,"notice","onNotice"],[0,"remove","onRemove"]]],[6,"smoothly-dialog",{"color":[513],"open":[1540],"closable":[516],"header":[513]},[[0,"trigger","TriggerListener"]]],[2,"smoothly-backtotop",{"opacity":[1],"bottom":[1],"right":[1],"visible":[32]}],[2,"smoothly-checkbox",{"selectAll":[4,"select-all"],"size":[1],"intermediate":[1540],"selected":[1540],"disabled":[1540],"t":[32]}],[6,"smoothly-submit",{"processing":[1540],"color":[513],"expand":[513],"fill":[513],"disabled":[516],"prevent":[4],"submit":[64]},[[0,"click","handleSubmit"]]],[6,"smoothly-table-expandable-cell",{"align":[1],"open":[1540]},[[0,"click","onClick"]]],[6,"smoothly-table-expandable-row",{"align":[1],"open":[1540]},[[0,"click","onClick"]]],[0,"smoothly-urlencoded",{"data":[1]}],[6,"smoothly-accordion",{"value":[1025]},[[0,"smoothlyOpen","handleOpenClose"],[0,"smoothlyClose","handleOpenClose"],[0,"smoothlyAccordionItemDidLoad","onAccordionItemDidLoad"],[0,"smoothlyAccordionItemDidUnload","onAccordionItemDidUnload"]]],[6,"smoothly-accordion-item",{"name":[1],"brand":[1],"open":[1540]}],[2,"smoothly-display",{"type":[1],"value":[8],"currency":[1],"country":[1],"format":[16]}],[2,"smoothly-display-amount",{"amount":[8],"currency":[1]}],[2,"smoothly-frame",{"url":[1],"name":[1],"origin":[1],"send":[64]}],[6,"smoothly-popup",{"visible":[1540],"direction":[1537],"cssVariables":[32]}],[6,"smoothly-radio",{"name":[1],"value":[1],"checked":[1540],"tabIndex":[2,"tab-index"]}],[6,"smoothly-select",{"identifier":[1],"background":[513],"value":[1025]}],[2,"smoothly-skeleton",{"widths":[16],"width":[1025],"color":[1],"period":[2],"distance":[1],"align":[513]}],[6,"smoothly-table",null,[[0,"expansionLoad","handleEvents"],[0,"expansionOpen","handleEvents"]]],[6,"smoothly-table-cell"],[6,"smoothly-table-header",{"name":[1]}],[6,"smoothly-table-row",null,[[0,"expansionLoad","onExpansionLoad"],[0,"expansionOpen","onExpansionOpen"]]],[6,"smoothly-input-date",{"name":[513],"value":[1025],"open":[1028],"max":[1025],"min":[1025],"disabled":[1028]},[[0,"dateSet","dateSetHandler"]]],[1,"smoothly-menu-options",{"toggle":[4],"emptyMenuLabel":[1025,"empty-menu-label"],"newOptionLabel":[1,"new-option-label"],"maxMenuHeight":[1,"max-menu-height"],"order":[4],"optionStyle":[8,"option-style"],"options":[1040],"resetHighlightOnOptionsChange":[1028,"reset-highlight-on-options-change"],"mutable":[4],"filteredOptions":[32],"highlightIndex":[32],"keyword":[32],"moveHighlight":[64],"setHighlight":[64],"getHighlighted":[64],"filterOptions":[64]},[[0,"optionHover","optionHoverHandler"]]],[2,"smoothly-notification",{"notice":[16],"tick":[32]},[[0,"trigger","onTrigger"]]],[2,"smoothly-display-date-time",{"datetime":[1]}],[2,"smoothly-spinner",{"active":[516],"size":[513]}],[6,"smoothly-tab",{"label":[1],"open":[1540]},[[0,"click","onClick"]]],[6,"smoothly-tab-switch",{"selectedElement":[32]},[[0,"expansionOpen","openChanged"]]],[0,"smoothly-tuple",{"tuple":[16]}],[1,"smoothly-option",{"aliases":[513],"dataHighlight":[1540,"data-highlight"],"name":[1537],"value":[1537],"divider":[1540],"checkbox":[4],"new":[4],"toggle":[4],"checked":[1028]}],[2,"smoothly-calendar",{"month":[1025],"value":[1025],"start":[1025],"end":[1025],"max":[1025],"min":[1025],"doubleInput":[516,"double-input"],"firstSelected":[32]}],[6,"smoothly-input",{"name":[513],"value":[1032],"type":[513],"required":[1540],"minLength":[1026,"min-length"],"showLabel":[516,"show-label"],"maxLength":[1026,"max-length"],"autocomplete":[1028],"pattern":[1040],"placeholder":[1025],"disabled":[1028],"readonly":[1028],"currency":[513],"initialValue":[32],"getFormData":[64],"setKeepFocusOnReRender":[64],"setSelectionRange":[64]}],[2,"smoothly-input-month",{"value":[1025]}],[6,"smoothly-quiet",{"color":[1]}],[6,"smoothly-selector",{"opened":[32],"selectedElement":[32],"missing":[32],"filter":[32]},[[0,"click","onClick"],[0,"itemSelected","onItemSelected"],[0,"keydown","onKeyDown"]]],[6,"smoothly-item",{"value":[8],"selected":[1540],"filter":[64]},[[0,"click","onClick"]]],[6,"smoothly-trigger",{"color":[513],"expand":[513],"fill":[513],"disabled":[516],"type":[513],"name":[1],"value":[8]},[[0,"click","onClick"]]],[2,"smoothly-icon",{"color":[513],"fill":[513],"name":[1],"size":[513],"toolTip":[1,"tool-tip"],"document":[32]}]]]], options);
+  return index.bootstrapLazy([["smoothly-google-font.cjs",[[2,"smoothly-google-font",{"value":[1]}]]],["smoothly-radio-group.cjs",[[4,"smoothly-radio-group",{"orientation":[513]}]]],["smoothly-reorder.cjs",[[0,"smoothly-reorder"]]],["smoothly-svg.cjs",[[2,"smoothly-svg",{"url":[513],"size":[513],"color":[1]}]]],["smoothly-trigger-sink.cjs",[[6,"smoothly-trigger-sink",{"context":[16],"destination":[1],"filter":[1]},[[0,"trigger","TriggerListener"]]]]],["smoothly-trigger-source.cjs",[[6,"smoothly-trigger-source",{"listen":[1]}]]],["smoothly-accordion_52.cjs",[[0,"smoothly-app-demo",{"baseUrl":[1,"base-url"]}],[0,"smoothly-input-demo"],[2,"smoothly-select-demo",null,[[0,"selectionChanged","handleSelectionChanged"]]],[2,"smoothly-table-demo"],[0,"smoothly-display-demo"],[4,"smoothly-app",{"color":[1]}],[0,"smoothly-dialog-demo"],[2,"smoothly-icon-demo"],[6,"smoothly-button",{"color":[513],"expand":[513],"fill":[513],"disabled":[516],"type":[513],"link":[1],"download":[4]}],[4,"smoothly-room",{"label":[1],"icon":[1],"path":[1],"to":[1]}],[2,"smoothly-input-date-range",{"value":[1025],"start":[1025],"end":[1025],"max":[1025],"min":[1025],"open":[1028],"showLabel":[516,"show-label"]},[[0,"startChanged","onStartChanged"],[0,"endChanged","onEndChanged"],[0,"dateRangeSet","onDateRangeSet"]]],[1,"smoothly-picker",{"disabled":[516],"readonly":[516],"maxMenuHeight":[1,"max-menu-height"],"maxHeight":[1,"max-height"],"emptyMenuLabel":[1025,"empty-menu-label"],"multiple":[516],"mutable":[4],"optionStyle":[8,"option-style"],"options":[1040],"labelSetting":[513,"label-setting"],"label":[513],"selections":[1040],"selectNoneName":[1025,"select-none-name"],"selectAllName":[1025,"select-all-name"],"selectionName":[1025,"selection-name"],"newOptionLabel":[1025,"new-option-label"],"valueValidator":[16],"isOpen":[32],"empty":[32]},[[0,"optionSelect","optionSelectHandler"],[0,"optionUnselect","optionSelectHandler"],[0,"optionAdd","optionAddHandler"],[0,"menuEmpty","emptyHandler"]]],[6,"smoothly-notifier",{"notices":[32]},[[0,"notice","onNotice"],[0,"remove","onRemove"]]],[6,"smoothly-dialog",{"color":[513],"open":[1540],"closable":[516],"header":[513]},[[0,"trigger","TriggerListener"]]],[2,"smoothly-backtotop",{"opacity":[1],"bottom":[1],"right":[1],"visible":[32]}],[2,"smoothly-checkbox",{"selectAll":[4,"select-all"],"size":[1],"intermediate":[1540],"selected":[1540],"disabled":[1540],"t":[32]}],[6,"smoothly-radio-button-item",{"value":[8],"selected":[1540],"expansion":[4]}],[6,"smoothly-submit",{"processing":[1540],"color":[513],"expand":[513],"fill":[513],"disabled":[516],"prevent":[4],"submit":[64]},[[0,"click","handleSubmit"]]],[6,"smoothly-table-expandable-cell",{"align":[1],"open":[1540]},[[0,"click","onClick"]]],[6,"smoothly-table-expandable-row",{"align":[1],"open":[1540]},[[0,"click","onClick"]]],[0,"smoothly-urlencoded",{"data":[1]}],[6,"smoothly-accordion",{"value":[1025]},[[0,"smoothlyOpen","handleOpenClose"],[0,"smoothlyClose","handleOpenClose"],[0,"smoothlyAccordionItemDidLoad","onAccordionItemDidLoad"],[0,"smoothlyAccordionItemDidUnload","onAccordionItemDidUnload"]]],[6,"smoothly-accordion-item",{"name":[1],"brand":[1],"open":[1540]}],[2,"smoothly-display",{"type":[1],"value":[8],"currency":[1],"country":[1],"format":[16]}],[2,"smoothly-frame",{"url":[1],"name":[1],"origin":[1],"send":[64]}],[6,"smoothly-popup",{"visible":[1540],"direction":[1537],"cssVariables":[32]}],[6,"smoothly-radio",{"name":[1],"value":[1],"checked":[1540],"tabIndex":[2,"tab-index"]}],[6,"smoothly-radio-button",{"value":[1032]},[[0,"radioSelect","radioSelectHandler"]]],[6,"smoothly-select",{"identifier":[1],"background":[513],"value":[1025]}],[2,"smoothly-skeleton",{"widths":[16],"width":[1025],"color":[1],"period":[2],"distance":[1],"align":[513]}],[6,"smoothly-table",null,[[0,"expansionLoad","handleEvents"],[0,"expansionOpen","handleEvents"]]],[6,"smoothly-table-cell"],[6,"smoothly-table-header",{"name":[1]}],[6,"smoothly-table-row",null,[[0,"expansionLoad","onExpansionLoad"],[0,"expansionOpen","onExpansionOpen"]]],[6,"smoothly-input-date",{"name":[513],"value":[1025],"open":[1028],"max":[1025],"min":[1025],"disabled":[1028]},[[0,"dateSet","dateSetHandler"]]],[1,"smoothly-menu-options",{"toggle":[4],"emptyMenuLabel":[1025,"empty-menu-label"],"newOptionLabel":[1,"new-option-label"],"maxMenuHeight":[1,"max-menu-height"],"order":[4],"optionStyle":[8,"option-style"],"options":[1040],"resetHighlightOnOptionsChange":[1028,"reset-highlight-on-options-change"],"mutable":[4],"filteredOptions":[32],"highlightIndex":[32],"keyword":[32],"moveHighlight":[64],"setHighlight":[64],"getHighlighted":[64],"filterOptions":[64]},[[0,"optionHover","optionHoverHandler"]]],[2,"smoothly-notification",{"notice":[16],"tick":[32]},[[0,"trigger","onTrigger"]]],[2,"smoothly-display-amount",{"amount":[8],"currency":[1],"toInteger":[4,"to-integer"]}],[2,"smoothly-display-date-time",{"datetime":[1]}],[2,"smoothly-spinner",{"active":[516],"size":[513]}],[6,"smoothly-tab",{"label":[1],"open":[1540]},[[0,"click","onClick"]]],[6,"smoothly-tab-switch",{"selectedElement":[32]},[[0,"expansionOpen","openChanged"]]],[0,"smoothly-tuple",{"tuple":[16]}],[1,"smoothly-option",{"aliases":[513],"dataHighlight":[1540,"data-highlight"],"name":[1537],"value":[1537],"divider":[1540],"checkbox":[4],"new":[4],"toggle":[4],"checked":[1028]}],[2,"smoothly-calendar",{"month":[1025],"value":[1025],"start":[1025],"end":[1025],"max":[1025],"min":[1025],"doubleInput":[516,"double-input"],"firstSelected":[32]}],[6,"smoothly-input",{"name":[513],"value":[1032],"type":[513],"required":[1540],"minLength":[1026,"min-length"],"showLabel":[516,"show-label"],"maxLength":[1026,"max-length"],"autocomplete":[1028],"pattern":[1040],"placeholder":[1025],"disabled":[1028],"readonly":[1028],"currency":[513],"initialValue":[32],"getFormData":[64],"setKeepFocusOnReRender":[64],"setSelectionRange":[64]}],[2,"smoothly-input-month",{"value":[1025]}],[6,"smoothly-quiet",{"color":[1]}],[6,"smoothly-selector",{"opened":[32],"selectedElement":[32],"missing":[32],"filter":[32]},[[0,"click","onClick"],[0,"itemSelected","onItemSelected"],[0,"keydown","onKeyDown"]]],[6,"smoothly-item",{"value":[8],"selected":[1540],"filter":[64]},[[0,"click","onClick"]]],[6,"smoothly-trigger",{"color":[513],"expand":[513],"fill":[513],"disabled":[516],"type":[513],"name":[1],"value":[8]},[[0,"click","onClick"]]],[2,"smoothly-icon",{"color":[513],"fill":[513],"name":[1],"size":[513],"toolTip":[1,"tool-tip"],"document":[32]}]]]], options);
 });

package/dist/collection/collection-manifest.json

@@ -32,6 +32,8 @@
     "./components/popup/index.js",
     "./components/quiet/index.js",
     "./components/radio/index.js",
+    "./components/radio-button/index.js",
+    "./components/radio-button/item/index.js",
     "./components/radio-group/index.js",
     "./components/reorder/index.js",
     "./components/room/index.js",

package/dist/collection/components/display-amount/index.js

@@ -1,6 +1,9 @@
 import { Component, Prop } from "@stencil/core";
 import { Currency } from "isoly";
 export class SmoothlyDisplayAmount {
+  constructor() {
+    this.toInteger = false;
+  }
   format(amount) {
     const digitsPerGroup = 3;
     const defaultDecimals = 2;
@@ -20,7 +23,7 @@ export class SmoothlyDisplayAmount {
       result = result.padEnd(separator + maxDecimals + 1, "0");
       result = result.substring(0, separator + maxDecimals + 1);
     }
-    else {
+    else if (!this.toInteger) {
       result = result + ".";
       separator = result.length - 1;
       result = result.padEnd(separator + maxDecimals + 1, "0");
@@ -89,6 +92,24 @@ export class SmoothlyDisplayAmount {
       },
       "attribute": "currency",
       "reflect": false
+    },
+    "toInteger": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "to-integer",
+      "reflect": false,
+      "defaultValue": "false"
     }
   }; }
 }

package/dist/collection/components/display-demo/index.js

@@ -28,6 +28,15 @@ export class SmoothlyDisplayDemo {
           h("dt", null, "price"),
           h("dd", null,
             h("smoothly-display", { type: "price", value: "13.37", currency: "SEK" })),
+          h("dt", null, "display amount without decimals"),
+          h("dd", null,
+            h("smoothly-display-amount", { amount: 200, currency: "SEK", toInteger: true })),
+          h("dt", null, "display amount with decimals if they are set, otherwise no decimal"),
+          h("dd", null,
+            h("smoothly-display-amount", { amount: 200.20, currency: "SEK", toInteger: true })),
+          h("dt", null, "display amount with decimals"),
+          h("dd", null,
+            h("smoothly-display-amount", { amount: 200.20, currency: "SEK" })),
           h("dt", null, "percent"),
           h("dd", null,
             h("smoothly-display", { type: "percent", value: "42" })),

package/dist/collection/components/input-demo/index.js

@@ -17,6 +17,15 @@ export class SmoothlyInputDemo {
           h("smoothly-input", { type: "card-number", name: "card" }, "Card #"),
           h("smoothly-input", { type: "card-expires", name: "card", style: { width: "calc(60% - 2px)" } }, "Expires"),
           h("smoothly-input", { type: "card-csc", name: "card", style: { width: "calc(40% - 1px)", borderLeft: "none" } }, "CVV/CVC"),
+          h("smoothly-radio-button", null,
+            h("smoothly-radio-button-item", { value: { some: "content", yes: "sir" }, expansion: true },
+              h("span", null, "Option 1"),
+              h("span", { slot: "expansion" }, "Some description.")),
+            h("smoothly-radio-button-item", { value: { some: "thing", yes: "miss" }, expansion: true },
+              h("span", null, "Option 2"),
+              h("span", { slot: "expansion" }, "Some other description.")),
+            h("smoothly-radio-button-item", { value: { some: "one", yes: "kid" } },
+              h("span", null, "Option 3"))),
           h("smoothly-radio", { name: "option", value: "1" }, "option 1"),
           h("smoothly-radio", { name: "option", value: "2", checked: true }, "option 2"),
           h("smoothly-radio", { name: "option", value: "3" }, "option 3"),

package/dist/collection/components/radio-button/Selected.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/radio-button/index.js

@@ -0,0 +1,48 @@
+import { Component, h, Host, Listen, Prop } from "@stencil/core";
+export class SmoothlyRadioButton {
+  radioSelectHandler(event) {
+    var _a;
+    (_a = this.active) === null || _a === void 0 ? void 0 : _a.select(false);
+    this.active = event.detail;
+    this.value = this.active.selected ? event.detail.value : undefined;
+    this.active.select(this.active.selected);
+  }
+  render() {
+    return (h(Host, null,
+      h("slot", null)));
+  }
+  static get is() { return "smoothly-radio-button"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["style.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["style.css"]
+  }; }
+  static get properties() { return {
+    "value": {
+      "type": "any",
+      "mutable": true,
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "value",
+      "reflect": false
+    }
+  }; }
+  static get listeners() { return [{
+      "name": "radioSelect",
+      "method": "radioSelectHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}

package/dist/collection/components/radio-button/item/index.js

@@ -0,0 +1,107 @@
+import { Component, Event, h, Host, Prop } from "@stencil/core";
+export class SmoothlyRadioButtonItem {
+  constructor() {
+    this.expansion = false;
+  }
+  componentWillLoad() {
+    this.select(this.selected);
+  }
+  select(selected = false) {
+    this.radioSelect.emit({
+      value: this.value,
+      selected,
+      select: s => (this.selected = s),
+    });
+  }
+  render() {
+    return (h(Host, null,
+      h("header", { onClick: () => this.select(!this.selected) },
+        h("smoothly-icon", { color: this.selected ? "success" : "medium", fill: "solid", name: this.selected ? "checkmark-circle" : "ellipse-outline", size: "tiny", toolTip: "Select" }),
+        h("slot", null)),
+      h("aside", { class: this.expansion ? "" : "hide" },
+        h("slot", { name: "expansion" }))));
+  }
+  static get is() { return "smoothly-radio-button-item"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["style.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["style.css"]
+  }; }
+  static get properties() { return {
+    "value": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "value",
+      "reflect": false
+    },
+    "selected": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "selected",
+      "reflect": true
+    },
+    "expansion": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "expansion",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get events() { return [{
+      "method": "radioSelect",
+      "name": "radioSelect",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "Selected",
+        "resolved": "Selected",
+        "references": {
+          "Selected": {
+            "location": "import",
+            "path": "../Selected"
+          }
+        }
+      }
+    }]; }
+}

package/dist/collection/components/radio-button/item/style.css

@@ -0,0 +1,67 @@
+:host {
+	display: block;
+	margin-bottom: 0.5rem;
+}
+
+:host:last-child {
+	margin-bottom: 0;
+}
+
+:host > header {
+	display: flex;
+	align-items: center;
+}
+
+:host > header > smoothly-icon {
+	margin-right: 0.5rem;
+	border-radius: 100%;
+	font-size: 1.3rem;
+	display: flex;
+	background: rgb(var(--smoothly-light-color));
+	transition: 0.2s;
+}
+
+:host[selected] > header > smoothly-icon {
+	color: rgb(var(--smoothly-success-color));
+	background: rgb(var(--smoothly-success-shade));
+}
+
+:host > aside {
+	display: none;
+	background: rgb(var(--smoothly-light-color));
+	color: rgb(var(--smoothly-light-contrast));
+	padding: 0;
+	border-radius: 5px;
+	margin-top: 0.5rem;
+	position: relative;
+	transition: 0.1s;
+}
+
+:host > aside::before {
+	content: "\25B2";
+	position: absolute;
+	top: -0.8rem;
+	left: 3rem;
+	color: rgb(var(--smoothly-light-color));
+}
+
+:host[selected] > aside {
+	display: block;
+	padding: 0.5rem;
+}
+
+:host > aside.hide {
+	display: none;
+}
+
+@media screen and (min-width: 900px){
+	:host > header:hover > smoothly-icon {
+		background: rgb(var(--smoothly-success-color));
+		cursor: pointer;
+	}
+	:host[selected] > header:hover > smoothly-icon {
+		background: rgb(var(--smoothly-warning-shade));
+		color: rgb(var(--smoothly-warning-color));
+		cursor: pointer;
+	}
+}

package/dist/collection/components/radio-button/style.css

@@ -0,0 +1,3 @@
+:host {
+	display: block;
+}

package/dist/custom-elements/index.d.ts

@@ -194,6 +194,18 @@ export const SmoothlyRadio: {
   new (): SmoothlyRadio;
 };
 
+interface SmoothlyRadioButton extends Components.SmoothlyRadioButton, HTMLElement {}
+export const SmoothlyRadioButton: {
+  prototype: SmoothlyRadioButton;
+  new (): SmoothlyRadioButton;
+};
+
+interface SmoothlyRadioButtonItem extends Components.SmoothlyRadioButtonItem, HTMLElement {}
+export const SmoothlyRadioButtonItem: {
+  prototype: SmoothlyRadioButtonItem;
+  new (): SmoothlyRadioButtonItem;
+};
+
 interface SmoothlyRadioGroup extends Components.SmoothlyRadioGroup, HTMLElement {}
 export const SmoothlyRadioGroup: {
   prototype: SmoothlyRadioGroup;